fix: conflicting focus-visible and focus-within transitions between ease-card-flip-3d and ease-floating-label

[Pcmhacker-piro]

Description

3D Card Flip (#30439) uses :focus-visible and :focus-within on the checkbox/button activator, while Floating Label Input (#30447) also uses :focus-within and :focus-visible on the input wrapper. When a card flip contains a form input, the focus ring transitions from the card flip conflict with the label float transition, producing janky animation.

Affected Components

• 3D Card Flip (Add 3D Card Flip component with perspective and backface-visibility #30439)
• Floating Label Form Input (Add Floating Label Form Input component #30447)

Suggested Resolution

• Isolate focus transitions with transition-property scoping
• Use nested :focus-within with explicit containment

[github-actions]

Hey @Pcmhacker-piro! 👋

Thanks for opening this issue — you've been auto-assigned to it.

Before you start coding, please read the quick checklist:

• Make sure no existing issue already covers this idea
• Read the Contribution Guide before opening a PR
• Add files only inside the submissions/ directory (e.g., submissions/examples/your-feature-name/ or submissions/docs/your-feature-name/)
• Include demo.html · style.css · README.md in your folder
• Max 25 active issues per contributor — unassign others before taking new ones
• Join our official Discord Server (Optional - for general developer chat and support; official issues belong on GitHub!)

🕑 Inactivity rule: Issues with no progress for 24 hours (1 day) will be unassigned and reopened for others.

The maintainer will review your PR once submitted. Good luck! ⚡