rcf-lite 0.12.0 → 0.13.0

package/blueprints/application-spa/contributions/user-stories/application-spa-us-1104.json

@@ -0,0 +1,63 @@
+{
+  "usId": "application-spa-US-1104",
+  "prdId": "PRD-001",
+  "reqId": "application-spa-REQ-003",
+  "version": "1.0.0",
+  "status": "approved",
+  "title": "Grid, spacing scale, container widths, and safe areas",
+  "asA": "user on any device",
+  "iWant": "screens that line up and breathe consistently",
+  "soThat": "the application reads as one designed product rather than assembled parts",
+  "acceptanceCriteria": [
+    {
+      "id": "AC-1104-1",
+      "description": "All spacing in component and layout styles resolves to the 4pt-scale spacing tokens; arbitrary pixel values outside the scale do not appear.",
+      "given": "the shipped stylesheet output",
+      "when": "spacing declarations are audited",
+      "then": "every margin, padding, and gap value maps to a spacing token",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1104-2",
+      "description": "Container maximum widths match the declared per-breakpoint values in the viewport table (assets/viewports.md).",
+      "given": "each baseline breakpoint",
+      "when": "the main container is measured",
+      "then": "its maximum width matches the declared value for that breakpoint",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1104-3",
+      "description": "Page-level layout uses the declared grid; sections align to it rather than to per-section improvised offsets.",
+      "given": "any declared route",
+      "when": "section edges are compared against the grid",
+      "then": "content aligns to grid columns and gutters",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1104-4",
+      "description": "On viewports with hardware cutouts, no content or interactive control renders under the cutout; safe-area insets are applied.",
+      "given": "a notched viewport profile",
+      "when": "shell and route content render",
+      "then": "all content and controls clear the unsafe regions",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1104-5",
+      "description": "Vertical rhythm between stacked sections uses the scale's section-spacing tokens consistently across routes.",
+      "given": "any two routes with stacked sections",
+      "when": "inter-section spacing is compared",
+      "then": "the same structural relationships use the same spacing tokens",
+      "testable": true,
+      "scope": "runtime"
+    }
+  ],
+  "tacIds": [
+    "TAC-202-application-spa-theme-system"
+  ],
+  "createdAt": "2026-08-19T09:00:00Z",
+  "updatedAt": "2026-08-19T09:00:00Z"
+}

package/blueprints/application-spa/contributions/user-stories/application-spa-us-1105.json

@@ -0,0 +1,69 @@
+{
+  "usId": "application-spa-US-1105",
+  "prdId": "PRD-001",
+  "reqId": "application-spa-REQ-004",
+  "version": "1.0.0",
+  "status": "approved",
+  "title": "Reflow without horizontal overflow at every baseline breakpoint",
+  "asA": "user on a small phone, a tablet, or a desktop",
+  "iWant": "every screen to fit my viewport and reorganise sensibly",
+  "soThat": "I never scroll sideways or squint at scaled-down desktop layouts",
+  "acceptanceCriteria": [
+    {
+      "id": "AC-1105-1",
+      "description": "No declared route produces page-level horizontal overflow at viewport widths 360, 768, 1024, or 1440.",
+      "given": "every route in the inventory",
+      "when": "rendered at each baseline breakpoint",
+      "then": "document scroll width does not exceed viewport width",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1105-2",
+      "description": "Layout reorganises across breakpoints (stacking, column changes, navigation collapse) rather than uniformly scaling desktop layout down.",
+      "given": "a route with multi-column desktop layout",
+      "when": "rendered at 360",
+      "then": "columns stack or reorganise; content is not proportionally shrunk",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1105-3",
+      "description": "Images declare intrinsic dimensions or aspect-ratio, render within their containers, and never force layout shift or overflow.",
+      "given": "any route with images",
+      "when": "images load at each breakpoint",
+      "then": "no layout shift from late image sizing and no container overflow",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1105-4",
+      "description": "Data tables below 768 either adopt the card layout or scroll inside an explicitly scoped container; the page itself never scrolls horizontally.",
+      "given": "a route containing a data table",
+      "when": "rendered below 768",
+      "then": "the table is card-formatted or contained in its own scroll region",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1105-5",
+      "description": "Type scales fluidly between breakpoints per the typography tokens; no text is clipped or truncated by reflow at any baseline width.",
+      "given": "any route",
+      "when": "the viewport is resized across the baseline range",
+      "then": "text wraps or scales without clipping or unintended truncation",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1105-6",
+      "description": "Interactive controls remain at or above the minimum target size at every breakpoint; touch targets do not shrink below 24x24 on small viewports.",
+      "given": "any interactive control",
+      "when": "measured at 360",
+      "then": "its target area is at least 24x24 CSS pixels",
+      "testable": true,
+      "scope": "runtime"
+    }
+  ],
+  "createdAt": "2026-08-19T09:00:00Z",
+  "updatedAt": "2026-08-19T09:00:00Z"
+}

package/blueprints/application-spa/contributions/user-stories/application-spa-us-1106.json

@@ -0,0 +1,63 @@
+{
+  "usId": "application-spa-US-1106",
+  "prdId": "PRD-001",
+  "reqId": "application-spa-REQ-005",
+  "version": "1.0.0",
+  "status": "approved",
+  "title": "Semantic token layer with complete dark and light palettes",
+  "asA": "user who prefers a dark interface",
+  "iWant": "a dark theme that is as considered and complete as the light one",
+  "soThat": "choosing dark mode never costs me legibility or polish",
+  "acceptanceCriteria": [
+    {
+      "id": "AC-1106-1",
+      "description": "Every colour declaration in component styles resolves to a semantic token (surface, on-surface, primary, on-primary, accent, danger, warning, success, muted, or their declared derivatives); raw hex or rgb values do not appear in component styles.",
+      "given": "the shipped stylesheet output",
+      "when": "colour declarations are audited",
+      "then": "every colour routes through a semantic token",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1106-2",
+      "description": "Every semantic token declared for the light theme has a declared dark value; parity is verified over the token file, and a missing pair fails the build.",
+      "given": "assets/tokens/design-tokens.json as integrated into the project",
+      "when": "the token sets are diffed by key",
+      "then": "the light and dark key sets are identical",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1106-3",
+      "description": "Every token pairing used for text or essential UI meets the contrast thresholds in both themes: 4.5:1 body text, 3:1 large text and non-text UI.",
+      "given": "the declared token pairings",
+      "when": "contrast is computed for both themes",
+      "then": "every pairing meets its threshold in light and in dark",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1106-4",
+      "description": "First visit with no stored preference follows prefers-color-scheme.",
+      "given": "a fresh browser profile with a dark OS preference",
+      "when": "the application first loads",
+      "then": "the dark theme renders without a flash of the wrong theme",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1106-5",
+      "description": "Elevation, borders, and disabled states remain distinguishable in dark mode; dark is not a naive inversion that flattens hierarchy.",
+      "given": "components with elevation and disabled states",
+      "when": "rendered in dark theme",
+      "then": "surface levels and disabled affordances are visually distinct per the token definitions",
+      "testable": true,
+      "scope": "runtime"
+    }
+  ],
+  "tacIds": [
+    "TAC-202-application-spa-theme-system"
+  ],
+  "createdAt": "2026-08-19T09:00:00Z",
+  "updatedAt": "2026-08-19T09:00:00Z"
+}

package/blueprints/application-spa/contributions/user-stories/application-spa-us-1107.json

@@ -0,0 +1,63 @@
+{
+  "usId": "application-spa-US-1107",
+  "prdId": "PRD-001",
+  "reqId": "application-spa-REQ-005",
+  "version": "1.0.0",
+  "status": "approved",
+  "title": "Theme toggle with session and per-user persistence",
+  "asA": "signed-in user",
+  "iWant": "my theme choice remembered wherever I use the application",
+  "soThat": "I set it once and never think about it again",
+  "acceptanceCriteria": [
+    {
+      "id": "AC-1107-1",
+      "description": "An explicit theme toggle is reachable from the shell on every route, operable by pointer and keyboard, with an accessible name and current-state exposure.",
+      "given": "any declared route",
+      "when": "the toggle is located and operated by keyboard",
+      "then": "the theme switches and the control announces its new state",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1107-2",
+      "description": "Toggling applies instantly to the whole application without reload or flash of unstyled or mixed-theme content.",
+      "given": "a rendered route",
+      "when": "the toggle is activated",
+      "then": "all visible surfaces switch in the same frame",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1107-3",
+      "description": "The chosen theme persists for the session: navigation and reload within the session keep the choice.",
+      "given": "a user who toggled theme",
+      "when": "the page is reloaded in the same session",
+      "then": "the chosen theme renders from first paint",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1107-4",
+      "description": "For signed-in users the choice persists to the user profile and follows the user to another browser after sign-in.",
+      "given": "a signed-in user who chose dark",
+      "when": "they sign in on another browser",
+      "then": "dark renders once their profile loads, without re-toggling",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1107-5",
+      "description": "An explicit user choice outranks the OS preference until the user clears or changes it.",
+      "given": "a user who explicitly chose light on a dark-preference OS",
+      "when": "the application loads",
+      "then": "light renders",
+      "testable": true,
+      "scope": "runtime"
+    }
+  ],
+  "tacIds": [
+    "TAC-202-application-spa-theme-system"
+  ],
+  "createdAt": "2026-08-19T09:00:00Z",
+  "updatedAt": "2026-08-19T09:00:00Z"
+}

package/blueprints/application-spa/contributions/user-stories/application-spa-us-1108.json

@@ -0,0 +1,90 @@
+{
+  "usId": "application-spa-US-1108",
+  "prdId": "PRD-001",
+  "reqId": "application-spa-REQ-006",
+  "version": "1.0.0",
+  "status": "approved",
+  "title": "Buttons and text inputs with full state and semantics contracts",
+  "asA": "user interacting with actions and text entry",
+  "iWant": "controls that respond visibly and predictably in every state",
+  "soThat": "I always know what is pressable, what is busy, and what went wrong",
+  "acceptanceCriteria": [
+    {
+      "id": "AC-1108-1",
+      "description": "Buttons render all applicable states from the token layer: default, hover, focus, active, and disabled, each visually distinct per assets/component-specs.",
+      "given": "a button in each variant",
+      "when": "each state is induced",
+      "then": "each state is visually distinct and token-driven in both themes",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1108-2",
+      "description": "A button driving an async action shows a busy state, suppresses duplicate submission while pending, and communicates the busy state to assistive technology.",
+      "given": "a button wired to an async action",
+      "when": "it is activated",
+      "then": "it enters busy state, ignores repeat activation, and exposes the state programmatically",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1108-3",
+      "description": "Destructive-variant buttons are visually distinct via the danger tokens and never the default focused action in confirmation dialogs.",
+      "given": "a destructive confirmation dialog",
+      "when": "it opens",
+      "then": "initial focus rests on the non-destructive action",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1108-4",
+      "description": "Text inputs and textareas render default, focus, disabled, error, and success states from the token layer with a visible focus indicator.",
+      "given": "an input in each state",
+      "when": "states are induced",
+      "then": "each state is distinct, and focus is visible per application-spa-REQ-019",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1108-5",
+      "description": "Inputs pair a programmatically associated visible label; placeholder text is never the only label.",
+      "given": "any input in the application",
+      "when": "its accessible name is computed",
+      "then": "the name comes from an associated label element or equivalent, not placeholder",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1108-6",
+      "description": "Error state on an input pairs the danger border and icon with error text tied via aria-describedby and aria-invalid.",
+      "given": "an input failing validation",
+      "when": "the error renders",
+      "then": "the message is programmatically associated and announced",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1108-7",
+      "description": "Textareas resize within declared bounds without breaking layout, and long input never overflows the control.",
+      "given": "a textarea with maximal content",
+      "when": "content is entered and the control resized",
+      "then": "layout holds and content scrolls within the control",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1108-8",
+      "description": "Disabled controls are excluded from Tab order, expose their disabled state programmatically, and still meet the 3:1 non-text contrast for their boundaries.",
+      "given": "a disabled button and input",
+      "when": "traversed and inspected",
+      "then": "they are skipped by Tab, announced as disabled, and remain perceivable",
+      "testable": true,
+      "scope": "runtime"
+    }
+  ],
+  "tacIds": [
+    "TAC-203-application-spa-component-library"
+  ],
+  "createdAt": "2026-08-19T09:00:00Z",
+  "updatedAt": "2026-08-19T09:00:00Z"
+}

package/blueprints/application-spa/contributions/user-stories/application-spa-us-1109.json

@@ -0,0 +1,90 @@
+{
+  "usId": "application-spa-US-1109",
+  "prdId": "PRD-001",
+  "reqId": "application-spa-REQ-006",
+  "version": "1.0.0",
+  "status": "approved",
+  "title": "Selection controls: select, checkbox, radio, switch, combobox",
+  "asA": "user making choices in forms and filters",
+  "iWant": "selection controls that work the way platform controls work",
+  "soThat": "nothing about choosing options needs learning or fighting",
+  "acceptanceCriteria": [
+    {
+      "id": "AC-1109-1",
+      "description": "Selects open with Enter, Space, or arrow keys, support arrow navigation and type-ahead within options, commit on Enter, and cancel on Escape restoring the prior value.",
+      "given": "a focused select",
+      "when": "operated by keyboard only",
+      "then": "the full open, navigate, commit, cancel grammar works",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1109-2",
+      "description": "Checkboxes support checked, unchecked, and where used indeterminate, toggle with Space, and expose state changes to assistive technology.",
+      "given": "a checkbox in each state",
+      "when": "toggled by pointer and keyboard",
+      "then": "state changes render and announce correctly",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1109-3",
+      "description": "Radio groups behave as one Tab stop with arrow keys moving selection within the group, and exactly one selected member.",
+      "given": "a focused radio group",
+      "when": "Tab and arrows are pressed",
+      "then": "Tab exits the group, arrows move the selection",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1109-4",
+      "description": "Switches expose switch semantics (role and checked state), toggle with Space and Enter, and apply their effect immediately without a separate submit.",
+      "given": "a switch control",
+      "when": "toggled",
+      "then": "semantics announce on and off and the effect applies immediately",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1109-5",
+      "description": "Comboboxes implement the filtering pattern: typing filters options, arrows traverse the filtered list, Enter commits, Escape closes without committing, and the expanded state plus active option are exposed programmatically.",
+      "given": "a combobox with options",
+      "when": "operated by keyboard only",
+      "then": "the full filter, traverse, commit, cancel grammar works with correct ARIA state",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1109-6",
+      "description": "A combobox with no matching options renders a designed empty message inside the listbox, never an empty popup.",
+      "given": "a combobox filtered to zero matches",
+      "when": "the listbox renders",
+      "then": "a designed no-matches message is shown",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1109-7",
+      "description": "All selection controls render default, hover, focus, disabled, and error states from the token layer in both themes.",
+      "given": "each selection control",
+      "when": "each state is induced in both themes",
+      "then": "states are distinct and token-driven",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1109-8",
+      "description": "Every selection control meets the 24x24 minimum target size including its label hit area.",
+      "given": "each selection control at 360 viewport",
+      "when": "target areas are measured",
+      "then": "each is at least 24x24 CSS pixels",
+      "testable": true,
+      "scope": "runtime"
+    }
+  ],
+  "tacIds": [
+    "TAC-203-application-spa-component-library"
+  ],
+  "createdAt": "2026-08-19T09:00:00Z",
+  "updatedAt": "2026-08-19T09:00:00Z"
+}

package/blueprints/application-spa/contributions/user-stories/application-spa-us-1110.json

@@ -0,0 +1,100 @@
+{
+  "usId": "application-spa-US-1110",
+  "prdId": "PRD-001",
+  "reqId": "application-spa-REQ-006",
+  "version": "1.0.0",
+  "status": "approved",
+  "title": "Overlays: modals, drawers, tooltips, popovers, toasts",
+  "asA": "user encountering layered UI",
+  "iWant": "overlays that manage focus and dismissal correctly",
+  "soThat": "layered content never strands, traps, or surprises me",
+  "acceptanceCriteria": [
+    {
+      "id": "AC-1110-1",
+      "description": "Modals trap focus while open, move initial focus to the first meaningful element, restore focus to the trigger on close, and mark background content inert.",
+      "given": "an open modal",
+      "when": "Tab is cycled and the modal closed",
+      "then": "focus stays inside while open and returns to the trigger on close",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1110-2",
+      "description": "Modals close on Escape and on an explicit close control; destructive-intent modals do not close on backdrop click.",
+      "given": "an open modal of each intent",
+      "when": "Escape, close control, and backdrop are tried",
+      "then": "dismissal follows the declared per-intent rules",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1110-3",
+      "description": "Drawers animate from the appropriate edge using motion tokens, share the modal focus and dismissal contract, and are sized per breakpoint (full-width at 360).",
+      "given": "an open drawer at each breakpoint",
+      "when": "rendered and dismissed",
+      "then": "sizing, focus, and dismissal follow the contract",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1110-4",
+      "description": "Tooltips appear on hover and on keyboard focus, disappear on blur and Escape, carry no interactive content, and are exposed via aria-describedby.",
+      "given": "a control with a tooltip",
+      "when": "focused via keyboard",
+      "then": "the tooltip shows, is announced, and dismisses on Escape",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1110-5",
+      "description": "Popovers with interactive content receive focus on open, return it on close, close on Escape and outside click, and reposition to stay within the viewport.",
+      "given": "an open popover near a viewport edge",
+      "when": "rendered and dismissed",
+      "then": "it remains fully visible and follows the focus contract",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1110-6",
+      "description": "Toasts render in one shell-owned region, auto-dismiss on a motion-token duration, pause dismissal on hover and focus, and are announced via a live region without stealing focus.",
+      "given": "an action that raises a toast",
+      "when": "the toast appears",
+      "then": "it announces politely, never takes focus, and pauses on hover",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1110-7",
+      "description": "Toasts never carry the only path to an action; anything actionable from a toast is also reachable from a persistent surface.",
+      "given": "a toast offering an action",
+      "when": "the toast expires unseen",
+      "then": "the same action remains reachable elsewhere",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1110-8",
+      "description": "Stacked overlays dismiss strictly topmost-first on Escape.",
+      "given": "a popover open above a modal",
+      "when": "Escape is pressed twice",
+      "then": "the popover closes first, then the modal",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1110-9",
+      "description": "All overlays derive surface, elevation, and backdrop styling from tokens and render correctly in both themes.",
+      "given": "each overlay type in both themes",
+      "when": "rendered",
+      "then": "styling is token-driven with no theme-specific defects",
+      "testable": true,
+      "scope": "runtime"
+    }
+  ],
+  "tacIds": [
+    "TAC-203-application-spa-component-library",
+    "TAC-201-application-spa-app-shell"
+  ],
+  "createdAt": "2026-08-19T09:00:00Z",
+  "updatedAt": "2026-08-19T09:00:00Z"
+}

package/blueprints/application-spa/contributions/user-stories/application-spa-us-1111.json

@@ -0,0 +1,90 @@
+{
+  "usId": "application-spa-US-1111",
+  "prdId": "PRD-001",
+  "reqId": "application-spa-REQ-006",
+  "version": "1.0.0",
+  "status": "approved",
+  "title": "Data display: cards, tables, tabs, pagination",
+  "asA": "user reading and working through collections of content",
+  "iWant": "data surfaces that stay readable, navigable, and honest about their extent",
+  "soThat": "I can scan, sort, and move through content without friction",
+  "acceptanceCriteria": [
+    {
+      "id": "AC-1111-1",
+      "description": "Cards compose token-defined surface, radius, spacing, and elevation; a whole clickable card is a single link with one accessible name, without nested interactive-in-interactive defects.",
+      "given": "a clickable card containing secondary actions",
+      "when": "inspected and operated",
+      "then": "the card is one coherent target and secondary actions remain independently operable",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1111-2",
+      "description": "Tables render semantic table markup with column headers programmatically associated to cells.",
+      "given": "a data table",
+      "when": "the accessibility tree is inspected",
+      "then": "headers associate to their cells",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1111-3",
+      "description": "Sortable columns expose sort state visually and via aria-sort, and toggle through ascending and descending predictably.",
+      "given": "a sortable column",
+      "when": "its header is activated repeatedly",
+      "then": "sort order cycles and both exposures update",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1111-4",
+      "description": "Tables ship their own empty, loading (skeleton rows), and error states per application-spa-REQ-010 rather than collapsing to nothing.",
+      "given": "a table in each non-success data state",
+      "when": "rendered",
+      "then": "the designed state fills the table region",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1111-5",
+      "description": "Tabs implement the standard pattern: one Tab stop for the tablist, arrow keys move between tabs, selection follows the declared activation mode, and panels are labelled by their tabs.",
+      "given": "a tablist with several tabs",
+      "when": "operated by keyboard",
+      "then": "the pattern grammar works with correct ARIA wiring",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1111-6",
+      "description": "The active tab is preserved on re-entry where the journey spec declares persistence, via URL or stored state.",
+      "given": "a tabbed route with declared persistence",
+      "when": "the user leaves and returns",
+      "then": "the previously active tab is selected",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1111-7",
+      "description": "Pagination controls show current position and total extent where known, disable rather than hide impossible moves, and are fully keyboard operable.",
+      "given": "a paginated collection on its first page",
+      "when": "the controls render",
+      "then": "previous is disabled with state exposed, position is visible",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-1111-8",
+      "description": "Page changes update the URL per the canonical shape so paginated positions are shareable and restorable.",
+      "given": "a paginated collection",
+      "when": "the user moves to page three and reloads",
+      "then": "page three renders from the URL",
+      "testable": true,
+      "scope": "runtime"
+    }
+  ],
+  "tacIds": [
+    "TAC-203-application-spa-component-library"
+  ],
+  "createdAt": "2026-08-19T09:00:00Z",
+  "updatedAt": "2026-08-19T09:00:00Z"
+}