# Team resource extensions

Original additions to the frozen Figma public-website reference. They are not observed Figma runtime behavior. Open `index.html` or `rtl.html` through the existing static site server.

## Dependencies and loading

Load `../assets/reference.css`, then `extensions.css`. Load the deferred scripts in this order: `../assets/reference.js`, then `extensions.js`. The existing filtering API is synchronous and supports one filterable collection per document. This extension preserves that boundary. It is instantiated on both the English and Arabic documents.

The only runtime dependencies are the local base CSS/JS, the extension CSS/JS, the local Liberation Sans fallback font, Figma mark, and three captured public-page images. There is no build dependency at runtime, API request, analytics, persistence, account integration, or transmitted form data. The Python builder is optional regeneration tooling. `resources.json` records explicit fixture data and is not fetched at runtime.

## Loading action

The native `#prepare-pack.button` retains its visible and accessible label. Its `.progress-slot` reserves 18px in idle and busy states. Click, Enter, and Space invoke one 900ms deterministic local fixture. `aria-busy=true` and `aria-disabled=true` mark the busy period without removing focus or tab order; the handler suppresses duplicate activation. Completion removes both attributes. `#pack-status` is an adjacent atomic polite status. Reduced motion makes the progress mark static. `data-activations` is test-only observability. This prepares a local preview; it does not download or fetch a resource pack.

## Resource page

The new page composes `.site-header`, `.page-intro`, `.catalog-toolbar`, `.surface-grid`, `.surface-card`, and `.site-footer`. The existing behavior operates on `data-filter`, `data-category-filter`, `.filter-item`, `data-category`, `data-search`, `data-count`, and `.filter-empty`. The card grid is one column below 768px and two columns from 768px. Native destinations point to the new static `details.html` anchors. Image links duplicate the accessible title links and are omitted from keyboard and accessibility navigation. All content is original editorial fixture content; imagery remains labeled research captures in the fixture manifest.

## Filtered collection recovery panel

This composition did not exist in the base implementation. The root requires:

- `data-component="filtered-collection-recovery"`, a stable ID, and `aria-labelledby` naming its heading.
- `data-query`, `data-category`, and `data-results` selectors for the existing search input, select, and collection.
- `data-locale="en"` or `data-locale="ar"` for the included original translation fixtures.
- `[data-retained-query]`, `[data-offline-context]`, `.filter-empty`, `[data-collection-status]`, `[data-reset-collection]`, and `[data-check-connectivity]` children.

`connectRecoveryPanel` binds each rendered instance after the base filtering script. It composes a retained raw query/category summary, a reset action, a connectivity notice, empty guidance, and a single atomic polite count/connectivity status. The summary and notice are ordinary content, avoiding duplicate live announcements. Query strings use `textContent`, never HTML evaluation. No query is sent or stored. Two page instances exercise the same API with different languages.

Browser `online` and `offline` events update context without changing query/category or filtering away cached local content. Offline and empty guidance appear together. Check browser connection reads `navigator.onLine` without making a request or claiming endpoint recovery. If reconnection hides the focused check button, focus returns to search. Reset is the sole recovery action that clears both fields and returns focus to search. Ordinary editing remains available throughout.

## Choices and limits

The guide's adopted extension contracts decide loading geometry, timing, focus policy, duplicate suppression, online/offline source, retained filters, combined empty/offline presentation, explicit reset, and local-only recovery. The additional composition's stable selectors, editorial content, IDs, and fixture translations are routine local implementation choices. It uses the informational lavender token, inherited action/field/card classes, 16/24px gaps, logical padding, and wrapping. Arabic page content is RTL; the inherited English header/footer explicitly retain English language and LTR direction. Translation is a stress fixture, not a reviewed localization release. No unanswered consequential design or integration question remains inside this local reference boundary.

## Verification

Run from the repository root with a server serving `designs/figma/site` at port 4173:

```sh
python3 designs/figma/evidence/handoff-round2/build.py
.agents/skills/design-research/scripts/run-playwright.sh designs/figma/evidence/handoff-round2/verify.cjs http://127.0.0.1:4173/
```

Acceptance: loading width drift at most 0.1px, no repeated busy activation, focus preserved, stable accessible name, static progress under reduced motion; accurate search/category intersection and local destinations; matching retained-query summary; keyboard reset; simultaneous offline/empty notice; actual Chromium offline transition and reconnect preserving query/category; no overflow at 390/768/1440px, no runtime exceptions or external network requests. Tests validate live-region semantics and updates, not screen-reader speech output. Frozen dependency hashes and evidence are in `evidence/handoff-round2/`.