fix(InputOTP): limit slot transition to color and box-shadow only

[gonzoblasco]

Description

The InputOTPSlot uses transition-all which animates every CSS property when the data-active state changes during keyboard navigation (Tab/Shift+Tab). This causes a visual layout shift where the page content jumps to the left.

Root Cause

When the hidden input inside the input-otp library gains or loses focus via keyboard navigation, the data-active attribute toggles on the slot div. Only border-color and box-shadow actually change (via data-[active=true]:border-ring and data-[active=true]:ring-3), but transition-all animates every property — including z-index and other layout-affecting changes during the transition frame — causing visible content shift.

Fix

Replaced transition-all with transition-[color,box-shadow] to scope transitions to only the properties that actually change on focus. This eliminates the layout shift while keeping smooth visual feedback.

Changes

Updated all 15 files that had transition-all across the codebase:

• apps/v4/registry/new-york-v4/ui/input-otp.tsx (registry component)
• 14 style variants in apps/v4/styles/ (base-luma, base-lyra, base-maia, base-mira, base-nova, base-nova/ui-rtl, base-vega, radix-luma, radix-lyra, radix-maia, radix-mira, radix-nova, radix-nova/ui-rtl, radix-vega)

The rhea and sera variants already used scoped transitions (transition-[color,box-shadow] and transition-[color,border-color] respectively), confirming this pattern is correct.

Fixes #11157

Testing

• Verified no transition-all remains in any input-otp.tsx file
• All changes are consistent with the existing rhea and sera variants
• Manual testing: Tab/Shift+Tab on Input OTP no longer causes layout shift

[vercel]

@gonzoblasco is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.