# UI Micro-Interactions Component Map (MI6)

This document maps StellaOps UI components to their interaction types and motion token usage. Components must use tokens from the catalog (`tokens/motion.scss`, `motion-tokens.ts`) rather than bespoke values.

## Token Catalog Reference

| Token | CSS Variable | Duration | Use Case |
| --- | --- | --- | --- |
| durationXs | --motion-duration-xs | 80ms | Focus rings, instant feedback |
| durationSm | --motion-duration-sm | 140ms | Hover states, button presses |
| durationMd | --motion-duration-md | 200ms | Modal open/close, panel slide |
| durationLg | --motion-duration-lg | 260ms | Page transitions, accordions |
| durationXl | --motion-duration-xl | 320ms | Complex sequences, onboarding |
| easeStandard | --motion-ease-standard | cubic-bezier(0.2,0,0,1) | Default for all transitions |
| easeEntrance | --motion-ease-entrance | cubic-bezier(0.18,0.89,0.32,1) | Elements appearing |
| easeExit | --motion-ease-exit | cubic-bezier(0.36,0,-0.56,-0.56) | Elements leaving |
| easeBounce | --motion-ease-bounce | cubic-bezier(0.34,1.56,0.64,1) | Playful feedback only |

## Component Mapping

| Component | Interaction Type | Tokens Used | Reduced-Motion Behavior |
| --- | --- | --- | --- |
| Button (primary) | Hover lift, press scale | durationSm, easeStandard, scaleSm | No transform, instant state change |
| Button (secondary) | Hover border, press | durationXs, easeStandard | Instant state change |
| Modal/Dialog | Fade + slide up | durationMd, easeEntrance/Exit, translateMd | Instant show/hide |
| Dropdown/Menu | Fade + scale | durationSm, easeStandard, scaleSm | Instant show/hide |
| Toast/Snackbar | Slide in, auto-dismiss | durationMd, easeEntrance, translateLg | Instant show/hide |
| Accordion | Height expand | durationMd, easeStandard | Instant toggle |
| Tabs | Indicator slide | durationSm, easeStandard | Instant indicator |
| Progress bar | Width fill | durationMd, easeStandard | No animation, instant fill |
| Spinner/Loader | Rotate animation | N/A (CSS keyframe) | Static icon or hidden |
| Skeleton | Shimmer pulse | durationXl, easeStandard | Static skeleton, no shimmer |
| Badge (status) | Scale pop on change | durationXs, easeBounce, scaleSm | No scale, instant |
| Focus ring | Fade in | durationXs, easeStandard | Always visible, no fade |
| Tooltip | Fade + offset | durationSm, easeEntrance, translateSm | Instant show/hide |
| Banner (info) | Slide down | durationMd, easeEntrance, translateMd | Instant show/hide |
| Error state | Shake animation | durationSm, easeStandard | No shake, border only |

## Perf Budget Compliance (MI5)

| Metric | Budget | Measurement |
| --- | --- | --- |
| Interaction response | <= 100ms | Time to visual feedback |
| Animation frame (avg) | <= 16ms | Chrome DevTools Performance |
| Animation frame (p95) | <= 50ms | Chrome DevTools Performance |
| Layout shift | <= 0.05 CLS | Lighthouse CI |
| LCP placeholder | Show within 400ms | Lighthouse CI |

## Validation Rules

1. **Lint rule**: ESLint/Stylelint blocks non-catalog easing values in `.scss` and `.ts` files
2. **Storybook check**: All component stories must demonstrate reduced-motion variant
3. **Playwright check**: Snapshot tests run with `--disable-animations` and reduced-motion emulation
4. **CI gate**: Perf budget failures block merge

## Evidence

- Token catalog: `src/Web/StellaOps.Web/src/styles/tokens/_motion.scss`
- TypeScript tokens: `src/Web/StellaOps.Web/src/app/styles/motion-tokens.ts`
- Storybook stories: `src/Web/StellaOps.Web/src/stories/motion-tokens.stories.ts`