# Interaction Notes

## Navigation

Anchor navigation updates the URL hash and lands the target below the sticky header using `scroll-margin-block-start`. Locale switching preserves only hashes listed for the route. Mobile navigation closes after an internal destination activates. Focus is returned only when the close action does not immediately navigate.

## Drawer

`closed → opening → open → closing → closed`. Opening stores the active element, sets `aria-expanded=true`, reveals backdrop, makes page landmarks inert, locks body scroll without layout shift, and focuses the close control. Tab and Shift+Tab remain inside. Escape and backdrop close unless a nested blocking dialog is active.

## Dialogs

Use native `<dialog>` when browser support and QA pass; otherwise use a proven accessible primitive. The trigger regains focus on close. Backdrop click is permitted when the form is idle. During submission, closing requires an explicit cancel decision so an in-flight request is not silently duplicated.

## Demo validation

Validation occurs on submit, then on change/blur for fields that are already invalid. A form summary uses `role=alert` or an announced live region. First invalid field receives focus after the summary is updated. Native input semantics remain. Email syntax validation is deliberately modest; the server remains authoritative.

## Theme

Apply preference immediately. Persist cookie and storage in one transaction. Broadcast changes through the `storage` event. In System mode, respond to `prefers-color-scheme` changes. Never animate the entire page between themes.

## Product tour

Opening starts at step one. Back is disabled on the first step. Next becomes Finish on the last. Step heading receives programmatic focus after each change. Progress text is localized and announced politely. Completion does not imply a video was watched.

## FAQ

Native `details/summary` is the baseline. Multiple items may remain open. Do not introduce accordion exclusivity without a content reason and a new decision.

## Analytics

Events are emitted through a vendor-neutral adapter after consent. Event payloads contain route, locale, resolved theme, direction, component/source ID, and non-PII state. Form field values and free text are forbidden. Development logs must be disabled in production.
