# Independent handoff examples These are original additions to the frozen local reference, not observed Figma runtime behavior. The four pages load `../assets/reference.css` and `../assets/reference.js` and add `examples.css` and `examples.js`. No build tooling or runtime dependencies are required. No request, persistence, analytics, account mutation, or form transmission is added. ## Existing action extension `extension.html` uses the existing `.button` class and `data-component="primary-action"`. It retains `Prepare preview` as the accessible name in every state. A fixed 18px progress slot prevents a width change. Click, Enter, and Space start one 900ms local operation. While busy, `aria-disabled="true"` and a guarded handler prevent duplicate activation while keeping the focused native button in the tab order. The label remains visible, an adjacent polite status announces progress, and reduced motion leaves a static progress mark. Completion removes busy and disabled semantics. An activation counter is present only as an observable fixture value. The guide at the start of this attempt required retained label/width and disabled suppression but does not specify progress anatomy, a busy-focus policy, completion timing, or a fixture API. Those four decisions were original implementation choices (gap G1), so the Specify stage is Assisted. ## Resource page `resources.html` composes the guide's global header/footer, `.page-intro`, `.catalog-toolbar`, `.surface-grid`, and `.surface-card`. Resource IDs, categories, titles, destinations, image sources, and alt text are explicit data in the rebuild script. The guide's `data-filter`, `data-category-filter`, `.filter-item`, `data-category`, `data-search`, `data-count`, and `.filter-empty` API operates without modification. Clear resets both filters, dispatches the normal input event, and returns focus to the query. Cards stay in source order. Resource image links are presentation-only duplicates; each visible destination remains a native keyboard-accessible link. The 390/768/1440 tests exercise the actual CSS rules: one card column below 768px and two columns at 768px and above. Native navigation and browser Back are verified. These data examples are original editorial content using the documented resource object shape, not production Figma records. ## Reusable inline notification `notification.html` introduces `[data-component="inline-notification"]`. Each instance requires a stable root ID, a heading referenced by `aria-labelledby`, a native `[data-dismiss-notification]` button with a specific accessible name, and `data-focus-return` pointing to a surviving enabled control. Dismissal hides the instance without deleting its content, focuses that control, and emits the bubbling `notification:dismiss` event. Essential information has no expiry timer. The example consumes that event to write a single polite status and provides an explicit restore button. Query input is unchanged. The guide at the start of this attempt supplied a feedback/status contract, native button semantics, token roles, and the brief's focus requirement. It did not define a dismissible API, exact focus-target selection, restoration policy, or notification color role. The selector/event, query return target, hide/restore policy, and lavender informational surface are original choices (gap G2); Specify is Assisted. ## Difficult collection state `difficult.html` uses a German content fixture with long compounds and a native search/category interface. `navigator.onLine` plus native online/offline events controls the notice. Local resources remain searchable offline. A zero-match query shows an empty result and an explicit reset action; query and category survive offline transitions and connection checks. Reset is the sole operation that clears them and returns focus to search. If reconnection removes the currently focused retry control, focus returns to search. A single atomic polite status reports count, offline context, and recovery. Local filtering is synchronous. The connection check reports browser connectivity only and never claims that a remote endpoint recovered. The guide at the start of this attempt specified long text wrapping, local offline content, editable query, recovery labels, and polite status. It did not define precedence of combined offline and filtered-empty feedback or actual connectivity detection/retry behavior. Displaying both persistent instructions, using browser connectivity events, and checking connectivity without a remote request are original choices (gap G3); Specify is Assisted. ## Verification and boundaries Rebuild from the repository root: ```sh python3 designs/figma/evidence/handoff/build-examples.py .agents/skills/design-research/scripts/run-playwright.sh designs/figma/evidence/handoff/verify-handoff.cjs http://127.0.0.1:4173/ ``` The browser run verifies loading geometry within 0.1px, keyboard activation and focus, filters, native navigation, preserved query/content, actual Chromium offline mode, responsive overflow, runtime errors, and unchanged source hashes during the run. Screenshot dimensions and state metadata are in `evidence/handoff/browser-results.json`. The tests inspect live-region DOM semantics and updates; they do not claim an assistive-technology speech test. External font availability is recorded rather than treated as proof of source typography fidelity. The guide subsequently adopted G1–G3 in `../implementation.html#extension-contracts` and `../patterns.html`. This attempt retains its original Assisted ratings because this implementer authored those missing decisions. The final browser run uses the revised stable guide and bundled Liberation Sans fallback; it does not claim Figma Sans fidelity.