fix(tooltip): no keyboard trigger, no prefers-reduced-motion, fragile positioning

[Samyssmile]

Problem

The ct-tooltip component is the weakest component in the design system. It has multiple accessibility and implementation issues that contradict the project's "accessibility-first" principle.

1. No keyboard trigger fallback

The tooltip only shows via data-state="open" — there is no CSS :focus-within or :focus selector as a fallback. Keyboard-only users cannot see tooltips without correct JS implementation. Other components (e.g., file-upload with :focus-within) handle this correctly.

2. Missing prefers-reduced-motion

Tooltip has transition: opacity, transform on .ct-tooltip__content but does not respect prefers-reduced-motion: reduce. This is inconsistent — Toast (line 788), Dropdown (line 919), Accordion (line 2257), and Datepicker (line 1240) all have @media (prefers-reduced-motion) blocks. Tooltip does not.

3. Fragile positioning

Positioning relies purely on position: absolute with percentage-based offsets. No viewport-awareness or overflow protection. Tooltips clip when the trigger element is near the edge of the viewport.

4. Duplicate selector block

.ct-tooltip__content is defined twice (lines ~800 and ~821). The second block only sets --_tt-offset. This should be merged into the first block.

5. Hardcoded max-width

max-width: 280px is a magic number instead of a design token.

Expected behavior

• Tooltip should be visible on :focus-within as CSS fallback
• @media (prefers-reduced-motion: reduce) should disable transitions
• Duplicate selector should be merged
• max-width should use a token or component-level custom property

Files

• components/components.css lines 794–857

[Samyssmile]

Fixed: keyboard trigger (:focus-within), prefers-reduced-motion, viewport-safe max-width, data-align for edge positioning, refactored transform system. Stories added for positions, alignment, and keyboard nav.