# Interaction & motion

Keyboard focus, unavailable controls and short motion share decisions across components.

## Interaction states

Every focusable element shows a `:focus-visible` outline of `--focus-width` in `--focus`, at `--focus-offset`, independently of structural borders. Components draw it inside, at `--focus-inset-offset`, where an outer outline would be clipped or cover a neighboring rule. Text fields and select, which show focus after every click, mark their corners instead, and checkbox and radio draw a thin ring, as described in [native forms](native-forms.md). Keep focus visible in both themes when refining these defaults.

| Token                  | Role                                                                      |
| ---------------------- | ------------------------------------------------------------------------- |
| `--focus`              | Keyboard focus color, following the accent.                               |
| `--focus-width`        | Keyboard focus stroke, independent of structural rules.                   |
| `--focus-offset`       | Default outer focus clearance.                                            |
| `--focus-inset-offset` | Inner focus clearance for surfaces that clip or adjoin an outer outline.  |
| `--disabled-opacity`   | Dimming for unavailable controls, without implementing disabled behavior. |

`--disabled-opacity` only dims: native `disabled` removes a control from interaction and the tab order, while `aria-disabled` alone needs an activation guard. The [state contract](../getting-started/composition.md#state-contract) defines the behavior each state requires.

## Short motion

Durations are named by what they animate. State changes, including a small hover nudge, use `--state-duration` with the default easing; reveals and moving parts use `--motion-duration` with `--motion-easing`. Honor reduced motion in the owning component; tokens do not disable animation by themselves.

| Token               | Role                                                          |
| ------------------- | ------------------------------------------------------------- |
| `--state-duration`  | Color, surface and border changes between interaction states. |
| `--motion-duration` | Positional transitions: reveals and moving parts.             |
| `--motion-easing`   | Easing of positional transitions.                             |

Continuous decoration and artwork animation parameters stay with their owner; they are not short control transitions. Never animate layout merely because a motion token exists.