@helloimjolopez-pathway/pathway-tokens 11.1.0 → 11.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 Design system for Ministry Brands Amplify. Tokens + components + specifications, all versioned in one place, with Storybook deployed from `main`.
 
-> **Looking for the tokens?** → **[TOKENS.md](TOKENS.md)** — where the CSS lives, which
+> **Looking for the tokens?** → **[TOKENS.md](TOKENS.md)**, where the CSS lives, which
 > of the 284 names you may use, and what to link in what order.
 
 ## Using the tokens
@@ -16,14 +16,14 @@ one name set rather than each having their own.
 
 | | Count | Name these? |
 |---|---|---|
-| Colour (`themes/light.css`, `themes/midnight.css` — same names) | **186** | Yes |
+| Colour (`themes/light.css`, `themes/midnight.css`, same names) | **186** | Yes |
 | Type scale (`type.css`) | 41 | Yes |
 | Spacing, radii, borders (`layout.css`) | 40 | Yes |
 | Motion (`motion.css`) | 17 | Yes |
 | Sheet and TopNav padding (`layout-responsive.css`) | 6 | Yes |
 | Breakpoints (`breakpoints.css`) | 5 | Yes |
 | **Working vocabulary** | **284** | |
-| Raw ramps (`primitives.css`) | 350 | **No** — but you must load it |
+| Raw ramps (`primitives.css`) | 350 | **No**, but you must load it |
 | Component metrics (`layout-contextual.css`) | 26 | This repo's components |
 
 **The CSS lives in [`src/tokens/`](src/tokens/), and that folder has its own README**
@@ -40,8 +40,7 @@ npm install @helloimjolopez-pathway/pathway-tokens
 NuGet: `Pathway.DesignTokens`.
 
 ```js
-// Every stylesheet is a named subpath export. primitives.css MUST come first —
-// the themes resolve through it, so without it all colour resolves to nothing
+// Every stylesheet is a named subpath export. primitives.css MUST come first, // the themes resolve through it, so without it all colour resolves to nothing
 // and the page renders unstyled with no console error.
 import "@helloimjolopez-pathway/pathway-tokens/primitives.css";
 import "@helloimjolopez-pathway/pathway-tokens/themes/light.css";
@@ -92,8 +91,7 @@ as too granular to adopt. Retired 2026-09-03 and not coming back.
 ```
 
 One name carries both modes. Set `data-theme="midnight"` on `<html>` to flip the page,
-or on any element to flip just that subtree. Never write a mode into a property name —
-`--semantic-color-light-mode-*` resolves to nothing.
+or on any element to flip just that subtree. Never write a mode into a property name, `--semantic-color-light-mode-*` resolves to nothing.
 
 ### Can I use a primitive?
 
@@ -129,7 +127,7 @@ pathway-ds/
 ├── scripts/                     Token sync/audit/fix + component build scripts
 ```
 
-## Governance — where things live
+## Governance: where things live
 
 | To change… | Where |
 |---|---|
@@ -146,15 +144,15 @@ pathway-ds/
 
 Three workflows in `.github/workflows/`:
 
-1. **`sync-tokens.yml`** — fires when `tokens/figma-export/**` changes. Normalises the Figma export into the W3C DTCG JSON and commits `tokens/pathway-design-tokens.json`.
-2. **`sync-component.yml`** — fires when `components/sidenav/sidenav.html` changes. Regenerates the `sidenav-figmamake.html` variant and commits it.
-3. **`deploy-pages.yml`** — fires on every push to `main`. Builds Style Dictionary and Storybook fresh and deploys a clean `_site` artifact through the official Pages actions. Nothing is committed back to `main`. (`deploy-storybook.yml` is the retired predecessor, kept manual-only; it committed 14MB of build output per push.)
+1. **`sync-tokens.yml`**, fires when `tokens/figma-export/**` changes. Normalises the Figma export into the W3C DTCG JSON and commits `tokens/pathway-design-tokens.json`.
+2. **`sync-component.yml`**, fires when `components/sidenav/sidenav.html` changes. Regenerates the `sidenav-figmamake.html` variant and commits it.
+3. **`deploy-pages.yml`**, fires on every push to `main`. Builds Style Dictionary and Storybook fresh and deploys a clean `_site` artifact through the official Pages actions. Nothing is committed back to `main`. (`deploy-storybook.yml` is the retired predecessor, kept manual-only; it committed 14MB of build output per push.)
 
 Source of truth is always the repo on `main`; Storybook is a downstream artifact.
 
 ## Typography (brand fonts)
 
-Pathway uses **Red Hat Text** (all UI text) and **Red Hat Display** (headings H1–H3 only). Both are open-source Google Fonts.
+Pathway uses **Red Hat Text** (all UI text) and **Red Hat Display** (headings H1H3 only). Both are open-source Google Fonts.
 
 **Load via CDN (web/prototypes):**
 
@@ -170,6 +168,174 @@ Pathway uses **Red Hat Text** (all UI text) and **Red Hat Display** (headings H1
 
 Licensed under the [SIL Open Font License](https://scripts.sil.org/OFL). Free for any use.
 
+## The components
+
+Everything in the library, with the four things you need for each: what it is
+specified as, what implements it, where to see it running, and which Figma node
+it was measured from. This table is generated from
+[`components/manifest.json`](components/manifest.json) by
+`npm run build-component-index`, so it cannot drift from the registry.
+
+<!-- BEGIN component-index (generated by scripts/build-component-index.js) -->
+
+**17 components with their own page, 2 building blocks that only exist nested.**
+
+| Component | Spec | Module | Storybook | Figma node | Code Connect files |
+|---|---|---|---|---|---|
+| **SideNav** | [spec](components/sidenav/sidenav-spec.md) | [`sidenav.jsx`](components/sidenav/sidenav.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-sidenav--docs) | `40004059:1375` | 9 |
+| **Scrollable** | [spec](components/scrollbar/scrollbar-spec.md) | [`scrollbar.jsx`](components/scrollbar/scrollbar.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-scrollbar--docs) | repo only, not in Figma | 0 |
+| **Checkbox** | [spec](components/checkbox/checkbox-spec.md) | [`checkbox.jsx`](components/checkbox/checkbox.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-checkbox--docs) | `40002324:54532` | 1 |
+| **OrgSwitcher** | [spec](components/org-switcher/org-switcher-spec.md) | [`org-switcher.jsx`](components/org-switcher/org-switcher.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-orgswitcher--docs) | `40006819:14583` | 2 |
+| **TopNav.Global** | [spec](components/top-nav/top-nav-spec.md) | [`top-nav.jsx`](components/top-nav/top-nav.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-topnav--docs) | `40007067:6508` | 4 |
+| **Spinner** | [spec](components/spinner/spinner-spec.md) | [`spinner.jsx`](components/spinner/spinner.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-spinner--docs) | `40006622:50003` | 0 |
+| **Button** | [spec](components/button/button-spec.md) | [`button.jsx`](components/button/button.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-button--docs) | `40003293:93741` | 3 |
+| **Search** | [spec](components/search/search-spec.md) | [`search.jsx`](components/search/search.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-global-search-top-nav--docs) | `40007095:4048` | 1 |
+| **NavShell** | [spec](components/nav-shell/nav-shell-spec.md) | composed, see its stories | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-navshell--docs) | 3 sets on page `Navigation: Top Nav, Navigation: Side Nav, Page Template` | 0 |
+| **Widget** | [spec](components/widget/widget-spec.md) | [`widget.jsx`](components/widget/widget.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-widget--docs) | `40009622:39702` | 2 |
+| **KPI Tile** | [spec](components/kpi-tile/kpi-tile-spec.md) | [`kpi-tile.jsx`](components/kpi-tile/kpi-tile.jsx)<br>[`kpi-number-trend.jsx`](components/kpi-tile/kpi-number-trend.jsx)<br>[`mini-chart.jsx`](components/kpi-tile/mini-chart.jsx)<br>[`bar-chart.jsx`](components/kpi-tile/bar-chart.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-kpi-tile--docs) | 7 sets on page `40009862:10309` | 9 |
+| **Dashboard** | [spec](components/dashboard/dashboard-spec.md) | [`dashboard.jsx`](components/dashboard/dashboard.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-dashboard--docs) | no Figma component | 0 |
+| **Icon** | [spec](components/icon/icon-spec.md) | [`icon.jsx`](components/icon/icon.jsx)<br>[`action-icon.jsx`](components/icon/action-icon.jsx)<br>[`display-icon.jsx`](components/icon/display-icon.jsx)<br>[`featured-icon.jsx`](components/icon/featured-icon.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-action-icon--docs) | `48:1153` | 4 |
+| **Dropdown** | [spec](components/dropdown/dropdown-spec.md) | [`dropdown.jsx`](components/dropdown/dropdown.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-dropdown--docs) | `40005568:4207` | 3 |
+| **Mini Chart** | [spec](components/kpi-tile/mini-chart-spec.md) | [`mini-chart.jsx`](components/kpi-tile/mini-chart.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-mini-chart--docs) | `40009415:27919` | 1 |
+| **Bar Chart** | [spec](components/kpi-tile/bar-chart-spec.md) | [`bar-chart.jsx`](components/kpi-tile/bar-chart.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-bar-chart--docs) | `40009417:13029` | 3 |
+| **Page Template** | [spec](components/page-template/page-template-spec.md) | [`page-template.jsx`](components/page-template/page-template.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-page-template--docs) | `40009709:26016` | 0 |
+
+Building blocks. Each is mapped for Code Connect and specced, but has no page
+of its own because it only ever appears as a nested instance inside the
+component above it.
+
+| Component | Spec | Module | Storybook | Figma node | Code Connect files |
+|---|---|---|---|---|---|
+| **ModuleIcon** | [spec](components/module-icon/module-icon-spec.md) | [`module-icon.jsx`](components/module-icon/module-icon.jsx) | nested only | `40006876:42134` | 1 |
+| **TopNav.Actions** | [spec](components/top-nav-actions/top-nav-actions-spec.md) | [`top-nav.jsx`](components/top-nav/top-nav.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-topnav--docs) | `40007082:7313` | 1 |
+
+<!-- END component-index -->
+
+### What is checked, and what is not
+
+Two suites. `npm run build-dist` runs the token-integrity checks, and
+`npm run check-tokens` runs the documentation and story checks, so both fail a
+build rather than relying on someone noticing.
+
+In `build-dist`:
+
+| Check | What it catches |
+|---|---|
+| `check-demo-tokens` | a document naming a token that does not exist |
+| `check-token-refs` | a reference to the retired `--semantic-color-light-mode-*` form |
+| `check-token-names` | a name that is not kebab-case lowercase |
+| `check-token-object-refs` | a `T`/`L` object key referenced but never defined |
+| `check-ladder-order` | a ladder whose names disagree with its resolved luminance |
+| `check-state-distinctness` | an interaction state indistinguishable from another state in its group |
+| `check-variant-distinctness` | a component prop that has stopped changing anything |
+| `check-fill-foreground-pairs` | a fill with no paired `On Subtle` / `On Strong` foreground, or the reverse |
+| `check-motion-coverage` | a state change with no transition, or a partial one |
+| `fix-stale-doc-hex --check` | a hand-copied hex in a doc that no longer matches its token |
+| `check-story-yield` | a token docs page rendering less content than its floor |
+
+In `check-tokens`, additionally:
+
+| Check | What it catches |
+|---|---|
+| `build-component-index --check` | the component table above out of step with the manifest, and a Storybook link in it that is not in the build |
+| `check-spec-stories` | a spec whose Storybook section names a story that does not exist, or omits one that does |
+| `check-demo-links` | a standalone demo linking a stylesheet or script that is not served where the page is served. All twelve demos linked `../../src/tokens/*.css`, which resolves in the repo and NOWHERE ELSE: the built Storybook mounts `components/` only, and Pages copies `components/` while putting the token contract at `/tokens/`. Verified against the live site on 2026-10-08, `/src/tokens/primitives.css` was 404. Every `StandaloneDemo` story and every published demo URL had been loading nine 404s and rendering on fallback colours rather than Pathway's. `pathway-sidenav.html` was worse: it loaded `../../dist/pathway-sidenav.js`, which is gitignored and never published, so that page had no script at all and rendered nothing. |
+| `check-component-tables` | a component that keeps its measurements as data naming a key its lookup object does not define. `KPI_TILE_SPECS` named `gapChart03`, `L` had no such key, so the value was undefined, React dropped the style and CSS fell back to no gap. Nothing threw and no story was blank. |
+
+And the ones that need a built Storybook, so they are their own command,
+`npm run verify-storybook`:
+
+| Check | What it catches |
+|---|---|
+| `check-syntax` | a component or story file that does not parse. Redundant with the build and worth it anyway: it parses all 54 files in about a second, where the build takes three minutes and reports the same error as a WARN line far above the failure |
+| `check-stories-render` | a story that renders NOTHING while the build stays green |
+| `check-mdx-refs` | a docs page referencing a story that does not exist, which renders an empty block, and a `<Controls>` pointed at a story with no argTypes, which renders an empty table under a heading promising controls |
+| `check-accessible-names` | a button with no accessible name, resolved the way a browser does: `aria-label`, `aria-labelledby`, text content with `aria-hidden` subtrees removed, then `title` |
+
+**That last one matters more than it sounds.** A module-level error in a CSF
+file blanks every story in that file and webpack compiles it happily. It has
+happened three times here: a leftover `storyName` assignment after a rename
+blanked all nine Global Search stories, a dangling `BRAND_AXIS` reference
+blanked more, and `useState` used without being imported blanked the Widget
+Glance configurations story. The check loads all 107 stories in headless Chrome
+and fails on an empty root. It was verified by breaking a story on purpose: the
+build reported no errors and the check reported the blank page.
+
+**`check-accessible-names` found 101 on its first run,** all of them Buttons.
+Every labelled Pathway Button announced as just "button": `aria-label` was set
+only when `showText` was false, on the rule that a button showing its text does
+not need a label. True of an ordinary button, false here, because the text sat
+inside `pw-button__container`, which carried `aria-hidden="true"`, so the name
+computation skipped it. The only named case was the icon-only one, which is
+backwards. Fixed by removing that `aria-hidden` rather than adding a label, so
+the name comes from the visible text and cannot drift from it.
+
+**Standalone demos are generated now, for the three newest components.**
+`scripts/build-demos.js` bundles the real module with esbuild and writes the
+page around it, so Widget, KPI Tile and Dashboard have a hands-on resize demo
+that cannot fall behind the component. The twelve older demos are hand-written
+and each says, at the top of its script block, "Mirrors `<name>.jsx` exactly.
+Keep the two in step": a second implementation of a shipped component, kept
+correct by memory. Converting them is a separate job. Their token links were
+repointed at `components/_demo/tokens/` so they at least render.
+
+**What is NOT checked, and why it matters.**
+
+- **Code Connect verifies nothing.** It publishes a code snippet to a Figma
+  component. It never compares a token value, a measurement or a layout, and it
+  flows repo to Figma only. A component can be fully mapped and completely
+  wrong.
+- **The token checks confirm that a name RESOLVES, not that it is the right
+  name.** `check-fill-foreground-pairs` proves every fill HAS a paired
+  foreground; nothing measures the pair a component actually uses against a
+  contrast ratio per mode. Button's Primary and Negative labels sat on the mono
+  anchor at 3.04:1 and 2.85:1 in Midnight while every check passed.
+- **Nothing can verify a Figma node id from here.** Only Figma knows whether an
+  id resolves and what kind of thing it is, and the MCP is interactively
+  authenticated, so this needs an agent session.
+  `npm run check-figma-nodes` does the half that can be automated: it lists
+  every id the repo cites, where each is cited, and which are cited as a set.
+
+So drift between Figma and this repo is the normal state, not the exception,
+and only measurement finds it. A sweep on 2026-10-07 found four defects of that
+class that had each survived months: two cited ids that do not exist in the
+file at all, Search's node pointing at a 2594x1680 layout frame rather than a
+component, and NavShell's pointing at a variant rather than its set.
+
+A second sweep on 2026-10-12 found three more. NavShell cited `ScreenTemplate`
+as though it owned it: there is no NavShell set in the file, so the manifest now
+names the three sets it composes and says so. `icon-spec.md` held the whole
+14-section spec twice, 645 lines, the second copy still describing the retired
+single `Icon` Storybook page. The Page Template page's second
+`Page Template` frame is the Midnight Mode showcase: instances of the one
+`ScreenTemplate` set under a `Semantic: Color` override to `Amplify Dark`, one
+of them also overridden to `Tablet 798pt`.
+
+That last one is in this list as a defect of MINE, not of the file. On
+2026-10-12 the manifest and a commit message both called those four nodes
+duplicate component sets. They are one set and two instances of it. The error
+came from comparing bound fill variables, which are identical across modes
+because a variable is the same variable in every mode, and never reading
+`explicitVariableModes`, which is the only thing that marks a mode showcase.
+When two nodes look identical in Figma, read the mode override before
+concluding anything.
+
+### Walking through one
+
+Take Widget as the shape of it. Open [`components/widget/widget-spec.md`](components/widget/widget-spec.md)
+for the anatomy, the token table, the size ladder and the grid; open the
+Storybook page for the same thing running, with a Playground, a size ladder at
+the exact Figma boxes, and two token listings that resolve against the live
+document; open [`components/widget/widget.jsx`](components/widget/widget.jsx)
+for the implementation, where every measurement carries the Figma node it came
+from. The Code Connect file next to it is what makes the Figma component offer
+this code, and it publishes repo to Figma only.
+
+Widget, KPI Tile and Dashboard are three components, not three views of one.
+A Widget is a container that does not know what it holds. A KPI Tile is a card
+in its own right. Both nest the same building block, `KpiNumberAndTrend`, which
+has no card of its own and gets one from whatever nests it.
+
 ## Component-to-token map
 
 `tokens/component-token-map.json` maps every component element to its CSS variable. Use this file to answer "which token does X use?" without reading specs.

package/components/scrollbar/scrollbar.jsx

@@ -1,16 +1,16 @@
 /**
- * Scrollable — Pathway Design System
+ * Scrollable, Pathway Design System
  *
  * A reusable overlay-scrollbar wrapper. Hides the native OS scrollbar entirely and renders
  * one custom liquid-glass thumb so scrolling looks and behaves IDENTICALLY on macOS, Windows,
- * iOS, and Android (native scrollbars can't be made consistent — this sidesteps them).
+ * iOS, and Android (native scrollbars can't be made consistent: this sidesteps them).
  *
  * Behaviour (see components/scrollbar/scrollbar-spec.md):
  *   - Thumb height is PROPORTIONAL to content: (viewport / total) × track, floored at 28px.
  *   - Reveal: appears while scrolling, fades ~900ms after; also appears when the MOUSE is near
  *     the right-edge bar (so it can be grabbed). It does NOT appear from hovering the panel.
  *   - Drag: MOUSE only, via a wider invisible grab strip (the 6px thumb alone is hard to hit).
- *   - Touch: passive — the bar just shows position; you scroll by swiping content. The grab
+ *   - Touch: passive: the bar just shows position; you scroll by swiping content. The grab
  *     strip is disabled on touch devices via a `(hover: none)` rule.
  *   - Keyboard / a11y: the content scrolls natively (arrows, PageUp/Down, Home/End, Space); the
  *     thumb is decorative (`aria-hidden`) and never the only scroll mechanism.
@@ -20,16 +20,17 @@
  */
 
 import React, { useRef, useState, useEffect, useCallback } from "react";
+import { useReducedMotion } from "../_shared/use-reduced-motion.jsx";
 
 // ─── TOKENS ──────────────────────────────────────────────────────────────────
-// Every colour + unit resolves through a SEMANTIC Pathway token — no primitives,
+// Every colour + unit resolves through a SEMANTIC Pathway token: no primitives,
 // no hardcoded hex/px. Motion uses the --motion-* tokens (durations/easings from design-system-spec §2).
 export const SCROLL = {
-  thumbWidth:  "var(--semantic-layout-units-padding-xtight)",     // 6px — visible thumb thickness
+  thumbWidth:  "var(--semantic-layout-units-padding-xtight)",     // 6px: visible thumb thickness
   thumbRadius: "var(--semantic-layout-units-cornerradius-full)",  // fully-rounded pill
-  thumbMin:    28,                                                // px — min thumb length (grab-target floor); JS layout math
-  gutter:      "var(--semantic-layout-units-padding-xxxtight)",   // 2px — inset from the right edge
-  grabZone:    16,                                                // px — invisible mouse grab strip (wider than the 6px thumb so it's catchable)
+  thumbMin:    28,                                                // px, min thumb length (grab-target floor); JS layout math
+  gutter:      "var(--semantic-layout-units-padding-xxxtight)",   // 2px, inset from the right edge
+  grabZone:    16,                                                // px, invisible mouse grab strip (wider than the 6px thumb so it's catchable)
   // THE LIGHT RUNGS ARE A DELIBERATE CHOICE BY THE DESIGN OWNER. Do not raise
   // them again without asking Jo first.
   //
@@ -46,7 +47,7 @@ export const SCROLL = {
   // Scrim/Faint and Scrim/Light resolve to Cool Neutral 800, so the thumb was
   // drawing a COOL grey over warm surfaces and reading as a cold bar against
   // them. Reported 2026-10-02. The comment below has always said "light warm
-  // overlay" — the value simply did not match it.
+  // overlay": the value simply did not match it.
   //
   // Scrim is also the wrong family: it is the modal backdrop, where a cool
   // near-black is right. The thumb is an overlay on a surface, and under the
@@ -61,7 +62,7 @@ export const SCROLL = {
   thumbEdge:   "inset 0 0 0 0.5px color-mix(in srgb, var(--semantic-color-fill-static-neutral-faint) 35%, transparent)",
   // Fade OUT gracefully, but appear INSTANTLY. Animating opacity on the way in
   // multiplied the thumb's own alpha by the in-flight opacity, so during the
-  // 200ms glide-in it rendered as low as 1.18:1 — below the floor at the exact
+  // 200ms glide-in it rendered as low as 1.18:1, below the floor at the exact
   // moment the user is looking for it. Only the fade-out is animated now.
   // Asymmetric fade: snappy decelerate glide-IN, graceful fade-OUT. Each entry
   // names every property it is responsible for, because the element swaps
@@ -94,12 +95,13 @@ if (typeof document !== "undefined" && !document.getElementById("pds-scrollable-
       "--pw-scrollbar-thumb-rest:var(--primitive-color-warm-neutral-100-16);" +
       "--pw-scrollbar-thumb-hover:var(--primitive-color-warm-neutral-100-24)}" +
     ".pds-scrollable__view{scrollbar-width:none;-ms-overflow-style:none}" +
-    ".pds-scrollable__view::-webkit-scrollbar{width:0;height:0;display:none}" +
+    ".pds-scrollable__view:-webkit-scrollbar{width:0;height:0;display:none}" +
     "@media (hover: none){.pds-scrollable__grab{pointer-events:none!important}}";
   document.head.appendChild(s);
 }
 
 export function Scrollable({ children, className = "", style = {}, viewClassName = "", viewStyle = {} }) {
+  const noMotion = useReducedMotion();
   const viewRef = useRef(null);
   const dragRef = useRef(null);
   const idleRef = useRef(null);
@@ -140,7 +142,7 @@ export function Scrollable({ children, className = "", style = {}, viewClassName
   const onScroll = () => { recompute(); wake(); };
 
   // Edge-proximity reveal (mouse): show the bar when the cursor is within grabZone of the right
-  // edge, so it can be grabbed — but NOT from hovering the rest of the panel.
+  // edge, so it can be grabbed: but NOT from hovering the rest of the panel.
   const onMouseMove = (e) => {
     const rect = e.currentTarget.getBoundingClientRect();
     if (rect.right - e.clientX <= SCROLL.grabZone) {
@@ -194,7 +196,7 @@ export function Scrollable({ children, className = "", style = {}, viewClassName
 
       {thumb.show && (
         <>
-          {/* Visual thumb — decorative, never intercepts pointer events. */}
+          {/* Visual thumb, decorative, never intercepts pointer events. */}
           <div
             aria-hidden="true"
             style={{
@@ -203,11 +205,11 @@ export function Scrollable({ children, className = "", style = {}, viewClassName
               background: hot ? SCROLL.thumbHover : SCROLL.thumbRest,
               backdropFilter: SCROLL.thumbBlur, WebkitBackdropFilter: SCROLL.thumbBlur,
               boxShadow: SCROLL.thumbEdge,
-              opacity: active ? 1 : 0, transition: active ? SCROLL.fadeIn : SCROLL.fadeOut,
+              opacity: active ? 1 : 0, transition: noMotion ? "none" : (active ? SCROLL.fadeIn : SCROLL.fadeOut),
               pointerEvents: "none", zIndex: 5,
             }}
           />
-          {/* Invisible mouse grab strip — wider than the thumb so it's catchable; disabled on
+          {/* Invisible mouse grab strip, wider than the thumb so it's catchable; disabled on
               touch via the (hover:none) rule so finger-swipes scroll the content beneath. */}
           <div
             aria-hidden="true"

package/components/sidenav/sidenav.jsx

@@ -1,5 +1,5 @@
 /**
- * SideNav — Pathway Design System
+ * SideNav, Pathway Design System
  *
  * Importable React component module. Source of truth for the SideNav
  * implementation; the standalone demo (sidenav.html) and the Storybook
@@ -13,7 +13,9 @@
  * drift, and wait. Do not resolve it by fetching Figma. See CLAUDE.md 1.1.
  *
  * Spec: components/sidenav/sidenav-spec.md
- * Figma: https://www.figma.com/design/3sw45aVcngFAmpbP6cfrXP/?node-id=40003951-2927
+ * Figma: https://www.figma.com/design/3sw45aVcngFAmpbP6cfrXP/?node-id=40004059-1375
+ *        SideNav.Container, a COMPONENT_SET. The id cited here until
+ *        2026-10-07, 40003951-2927, does not exist in the file.
  */
 
 import React, { useState, useRef } from "react";
@@ -32,7 +34,7 @@ import ReactDOM from "react-dom";
  * one theme into the bundle, so Midnight Mode could not work at all in the coded
  * component no matter what the consumer did. `t()` also returns the token id
  * unchanged when it cannot resolve a name, which emits invalid CSS that the
- * browser silently drops — so a renamed token failed as a colour that quietly
+ * browser silently drops: so a renamed token failed as a colour that quietly
  * reverted to inherited, with no error anywhere.
  *
  * Referencing the custom property instead means the cascade resolves the value,
@@ -136,7 +138,7 @@ export const L = {
   menuPadT:    u("padding-tight"),
   menuPadB:    u("padding-xxwide"),
   itemH:       u("accessibility-touch-target-aa-height"),
-  iconWrap:    24,   // no token in Figma — leading icon wrapper
+  iconWrap:    24,   // no token in Figma, leading icon wrapper
   iconInner:   16,   // Material Symbols Rounded frame size, per design-system-spec §7.2
   rowPadH:     u("padding-tight"),
   // Collapsed rail: container.rowStart's padding-right in Figma. It is what
@@ -144,8 +146,8 @@ export const L = {
   // the design.
   railIconInset: u("padding-xxtight"),
   textPad:     u("padding-xtight"),
-  childIndent: 24,   // no token in Figma — level-1 left indent
-  stripeW:     4,    // no token in Figma — indicator stripe width
+  childIndent: 24,   // no token in Figma, level-1 left indent
+  stripeW:     4,    // no token in Figma, indicator stripe width
   colPadL:     u("padding-medium"),
   colPadR:     u("padding-tight"),
   collapseGap: u("padding-xxtight"),
@@ -251,7 +253,7 @@ export function SideNavItem({
 
         <IndicatorStripe visible={showStripe} />
 
-        {/* Leading icon — Level 0 only */}
+        {/* Leading icon, Level 0 only */}
         {!isChild && item.icon && (
           <div style={{ width: L.iconWrap, height: L.iconWrap, display: "flex",
             alignItems: "center", justifyContent: "center", flexShrink: 0,
@@ -270,7 +272,7 @@ export function SideNavItem({
               ? <span className="material-symbols-rounded" aria-hidden="true"
                   style={{ fontSize: L.iconInner, lineHeight: 1, color: iconColor,
                     // display:block so the glyph is laid out as a box rather than
-                    // on a text baseline — an inline glyph in a flex-centred
+                    // on a text baseline: an inline glyph in a flex-centred
                     // parent is centred by its line box, not by its own art, so
                     // it rode high inside the 24px wrap.
                     display: "block",
@@ -311,15 +313,22 @@ export function SideNavItem({
           </p>
         </div>
 
-        {/* Chevron — groupers only */}
-        {!isChild && hasChildren && (
+        {/* Chevron, groupers only, and EXPANDED ONLY.
+            Figma's SideNavItem.Collapsed is indicator + Container.LeadingIcon
+            and nothing else: there is no chevron in the rail. Giving it
+            width 0 and max-width 0 was not enough, because the glyph still
+            painted outside its collapsed box, so the rail showed a second
+            column of 10px chevrons 17px to the right of the icons. Measured
+            2026-10-02: two distinct glyph centres, 28.8 and 45.8, where there
+            should be one. It is now not rendered at all when collapsed. */}
+        {!isChild && hasChildren && !isSidebarCollapsed && (
           <div style={{ width: isSidebarCollapsed ? 0 : 40, height: L.iconWrap, display: "flex",
             alignItems: "center", justifyContent: "center", flexShrink: 0,
             maxWidth: isSidebarCollapsed ? 0 : 40,
             opacity: isSidebarCollapsed ? 0 : 1,
             overflow: "hidden",
             transition: "max-width var(--motion-duration-6) var(--motion-easing-emphasized), opacity var(--motion-duration-3) var(--motion-easing-standard)" }}>
-            {/* Chevron rotation matches accordion timing — --motion-duration-5 + --motion-easing-accordion */}
+            {/* Chevron rotation matches accordion timing, --motion-duration-5 + --motion-easing-accordion */}
             <div style={{ transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
               transition: "transform var(--motion-duration-5) var(--motion-easing-accordion)" }}>
               {chevronDown ? chevronDown({ size: 10, color: iconColor }) : <ChevDown size={10} color={iconColor} />}
@@ -385,7 +394,7 @@ export function SideNavTooltip({ label, anchorRect, onMouseEnter, onMouseLeave }
 }
 
 // ─── SectionLabel ─────────────────────────────────────────────────────────────
-// Figma node 40006794-5977 — building block used in CollapsedPopover headers.
+// Figma node 40006794-5977, building block used in CollapsedPopover headers.
 // Tokens: Foreground/Static/Neutral/Base (#313131), Label/Section/Small/Semibold
 //         (11px / 600 / 16px / 0.6px letter-spacing, uppercase)
 // Padding: Padding/Tight (12px left), Padding/XTight (8px vertical)
@@ -414,7 +423,7 @@ export function CollapsedPopover({ item, onClick, anchorRect, onMouseEnter, onMo
         boxShadow: c2("--elevation-widget"),
         padding: "var(--semantic-layout-units-padding-xxtight)", minWidth: 200, pointerEvents: "auto",
         animation: "popoverIn var(--motion-duration-3) var(--motion-easing-spring) forwards" }}>
-      {/* Section label — Figma component 40006794-5977 */}
+      {/* Section label, Figma component 40006794-5977 */}
       <div style={{ borderBottom: `0.5px solid ${c("stroke-static-neutral-faint")}` }}>
         <SectionLabel label={item.label} />
       </div>
@@ -453,11 +462,11 @@ export function PopoverRow({ item, onClick, activeId }) {
 // ─── CollapseButton ───────────────────────────────────────────────────────────
 // Redesigned in Figma (2026-05-12): now uses Slot.RowStart (Module.Mark icon)
 // + Slot.RowEnd (Action Icon). The action icon uses Foreground/Action/Secondary/Rest
-// (#6b6b6b) — different from nav item icons. SVG assets fetched from Figma directly.
+// (#6b6b6b), different from nav item icons. SVG assets fetched from Figma directly.
 export function CollapseButton({ isSidebarCollapsed, onToggle, collapseIcon, expandIcon }) {
   const [h, setH] = useState(false);
   const labelColor = h ? T.text.navHover : T.text.navBase;
-  const actionIconColor = T.icon.actionSecondary; // var(--semantic-color-stroke-action-field-hover) — always static, no hover change
+  const actionIconColor = T.icon.actionSecondary; // var(--semantic-color-stroke-action-field-hover), always static, no hover change
   return (
     <div style={{ width: "100%" }}>
       <div style={{ height: 1, backgroundColor: T.fill.infoSubtle, marginBottom: L.collapseGap }} />
@@ -469,10 +478,10 @@ export function CollapseButton({ isSidebarCollapsed, onToggle, collapseIcon, exp
           borderRadius: T.radius, backgroundColor: h ? T.fill.navHover : T.fill.navBase,
           cursor: "pointer", transition: "background-color var(--motion-duration-3) var(--motion-easing-standard)", overflow: "hidden" }}>
 
-        {/* Slot.RowStart — 4px stripe column (structural, always present) */}
+        {/* Slot.RowStart, 4px stripe column (structural, always present) */}
         <div style={{ width: L.stripeW, alignSelf: "stretch", flexShrink: 0 }} />
 
-        {/* Container.Main — label (hidden when collapsed) */}
+        {/* Container.Main, label (hidden when collapsed) */}
         <div style={{ flex: 1, paddingLeft: L.rowPadH,
           maxWidth: isSidebarCollapsed ? 0 : 200,
           opacity: isSidebarCollapsed ? 0 : 1,
@@ -486,7 +495,7 @@ export function CollapseButton({ isSidebarCollapsed, onToggle, collapseIcon, exp
           </span>
         </div>
 
-        {/* Slot.RowEnd — Action Icon (right_panel_open / left_panel_open from Figma) */}
+        {/* Slot.RowEnd, Action Icon (right_panel_open / left_panel_open from Figma) */}
         <div style={{ width: 40, height: L.iconWrap, display: "flex",
           alignItems: "center", justifyContent: "center", flexShrink: 0,
           marginLeft: isSidebarCollapsed ? "auto" : 0,
@@ -509,15 +518,15 @@ export function CollapseButton({ isSidebarCollapsed, onToggle, collapseIcon, exp
 // Optional in-nav section heading. Figma: SideNav.SectionLabel (node 40006794:5975).
 // Tokens: Label/Section/Small/Semibold (11px/600/16px/0.6px), Foreground/Static/Neutral/Base (#606060)
 // Container: h-[40px], pl-[4px], pr-[4px], py-[8px]
-// In collapsed rail: hidden — replaced by a Divider (rendered by SideNav itself, see §2.3)
+// In collapsed rail: hidden, replaced by a Divider (rendered by SideNav itself, see §2.3)
 // ── NavHeader ────────────────────────────────────────────────────────────────
 // Sits at the TOP of the SideNav. 48px row with the expand/collapse action icon
 // in Slot.RowEnd (expanded) or centered (collapsed). Divider below.
 // Matches Figma "Slot.NavHeader" (node 40007331:7794).
-// Hidden on mobile (<768px) — TopNav hamburger is the sole toggle there.
+// Hidden on mobile (<768px), TopNav hamburger is the sole toggle there.
 export function NavHeader({ isSidebarCollapsed, onToggle, collapseIcon, expandIcon }) {
   const [h, setH] = useState(false);
-  const actionIconColor = T.icon.actionSecondary; // var(--semantic-color-stroke-action-field-hover) — always static
+  const actionIconColor = T.icon.actionSecondary; // var(--semantic-color-stroke-action-field-hover), always static
   return (
     <div style={{ width: "100%", flexShrink: 0 }}>
       <div onClick={onToggle} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
@@ -547,7 +556,7 @@ export function NavHeader({ isSidebarCollapsed, onToggle, collapseIcon, expandIc
           </div>
         )}
       </div>
-      {/* Divider — Stroke/Static/Neutral/Base, py-[2px] in Figma */}
+      {/* Divider, Stroke/Static/Neutral/Base, py-[2px] in Figma */}
       <div style={{ padding: "2px 0" }}>
         <div style={{ height: 1, backgroundColor: T.fill.infoSubtle }} />
       </div>
@@ -571,7 +580,7 @@ export function NavSectionLabel({ label }) {
 }
 
 // ── BulletDot ────────────────────────────────────────────────────────────────
-// 6px filled circle — leading icon for SideNavListSection's ListItem.
+// 6px filled circle, leading icon for SideNavListSection's ListItem.
 // Color cycles Base / Hover / Active just like SideNavItem icons.
 export function BulletDot({ color }) {
   return (
@@ -618,7 +627,7 @@ export function ListItem({ item, isActive, onClick }) {
 
 // ── SideNavListSection ───────────────────────────────────────────────────────
 // Figma: SideNav.ListSection (node 40007332:8034). A labelled grouping of flat
-// nav items — no icons, no children, no expand/collapse. Used for contextual
+// nav items: no icons, no children, no expand/collapse. Used for contextual
 // link lists (Recent Content, Pinned, Bookmarks). Only shown in expanded sidebar.
 export function SideNavListSection({ label, items, activeId, onNavigate }) {
   return (
@@ -727,7 +736,7 @@ export function SideNav({
           anchorRect={popoverId === item.id ? popoverRect : null}
           onPopoverEnter={onPopoverEnter} onPopoverLeave={onPopoverLeave}
           activeId={activeId} />
-        {/* Level 1 children — animated accordion. grid-template-rows 0fr→1fr at
+        {/* Level 1 children, animated accordion. grid-template-rows 0fr→1fr at
             --motion-duration-5 + --motion-easing-accordion, with inner wrapper opacity
             fade --motion-duration-4 (70ms delay on expand, no delay on collapse). */}
         {hasChildren && !collapsed && (
@@ -767,12 +776,12 @@ export function SideNav({
       paddingLeft:  collapsed ? L.navColPadH : L.navPadH,
       paddingRight: collapsed ? L.navColPadH : L.navPadH,
       boxSizing: "border-box", flexShrink: 0,
-      // Smooth-spring curve — soft personality, no overshoot.
+      // Smooth-spring curve, soft personality, no overshoot.
       transition: "width var(--motion-duration-6) var(--motion-easing-emphasized)",
       borderRight: `0.5px solid ${T.fill.infoSubtle}`,
       overflow: "hidden",   // the inner menu scrolls; the nav itself does not
     }}>
-      {/* NavHeader — TOP of nav, PINNED (flexShrink:0) so it stays visible while the
+      {/* NavHeader, TOP of nav, PINNED (flexShrink:0) so it stays visible while the
           item list scrolls beneath it. Hidden on mobile (<768px). */}
       {(!hideCollapseButton || headerEnd) && (
         <div style={{ flexShrink: 0 }}>
@@ -802,7 +811,7 @@ export function SideNav({
         </div>
       )}
 
-      {/* SideNavMenu — the ONLY scroll region, wrapped in <Scrollable> so the custom
+      {/* SideNavMenu: the ONLY scroll region, wrapped in <Scrollable> so the custom
           overlay scrollbar (identical on every OS, never affects layout/padding) handles
           overflow. flex:1 + minHeight:0 lets it shrink below content height; the pinned
           header above never moves. Applies in BOTH expanded (240px) and collapsed (72px) states. */}
@@ -810,7 +819,7 @@ export function SideNav({
         style={{ flex: 1, minHeight: 0,
           // Bleed the scroll region out to the nav's TRUE right edge so the overlay thumb
           // hugs the edge in BOTH states (the nav's border-box paddingRight would otherwise
-          // inset the thumb by 16px expanded / 12px on the 72px rail — badly off on the rail).
+          // inset the thumb by 16px expanded / 12px on the 72px rail, badly off on the rail).
           // negated through calc() because these are var() references, and negating
           // a string would produce NaN
           marginRight: neg(collapsed ? L.navColPadH : L.navPadH) }}
@@ -818,11 +827,11 @@ export function SideNav({
           paddingTop: L.menuPadT,
           // Re-add the content's right inset INSIDE the scroll view so items keep their
           // position; only the thumb moves to the edge. (Spec rule: padding on viewStyle,
-          // never on the wrapper — keeps the thumb flush on any scroll surface.)
+          // never on the wrapper, keeps the thumb flush on any scroll surface.)
           paddingRight: collapsed ? L.navColPadH : L.navPadH }}
       >
 
-        {/* Sectioned render — when `sections` prop is provided */}
+        {/* Sectioned render: when `sections` prop is provided */}
         {sections && sections.map(({ section, items: secItems }, sIdx) => (
           <div key={section} style={{ display: "flex", flexDirection: "column",
             gap: L.menuGap, flexShrink: 0 }}>
@@ -846,10 +855,10 @@ export function SideNav({
           </div>
         ))}
 
-        {/* Flat render — when only `items` is provided (backward compatibility) */}
+        {/* Flat render: when only `items` is provided (backward compatibility) */}
         {!sections && (items || []).map(renderItem)}
 
-        {/* SideNavListSection — optional. Hidden in collapsed rail. */}
+        {/* SideNavListSection, optional. Hidden in collapsed rail. */}
         {listSection && (
           <div style={{ opacity: collapsed ? 0 : 1,
             maxHeight: collapsed ? 0 : 400, overflow: "hidden",
@@ -859,16 +868,16 @@ export function SideNav({
           </div>
         )}
 
-        {/* Body slot — scrolls with the item list, so it sits INSIDE
+        {/* Body slot, scrolls with the item list, so it sits INSIDE
             Scrollable and above the spacer. Use this for content that belongs
             with the items; use `footer` for anything that must stay visible. */}
         {children && <div style={{ flexShrink: 0 }}>{children}</div>}
 
-        {/* Bottom spacer — fills remaining height */}
+        {/* Bottom spacer, fills remaining height */}
         <div style={{ flex: 1, minHeight: L.menuPadB }} />
       </Scrollable>
 
-      {/* Footer slot — OUTSIDE Scrollable and flexShrink:0, so it is pinned to
+      {/* Footer slot, OUTSIDE Scrollable and flexShrink:0, so it is pinned to
           the bottom of the nav and stays put while the list scrolls. The
           divider only appears when the slot has content, so a nav without a
           footer is unchanged. Padding drops to the rail's narrower inset when
@@ -906,7 +915,7 @@ function ChevUp({ size = 10, color }) {
 
 // ─── Collapse / Expand action icons (fetched from Figma 2026-05-12) ──────────
 //
-// PINNED 2026-09-07 — DO NOT RE-SYNC THESE TWO FROM FIGMA.
+// PINNED 2026-09-07: DO NOT RE-SYNC THESE TWO FROM FIGMA.
 //
 // The Figma SideBar Expand/Collapse component was changed after this date to a
 // different icon. Jo has explicitly rejected that change for the repo, for
@@ -919,7 +928,7 @@ function ChevUp({ size = 10, color }) {
 // by pulling Figma, and do not silently re-fetch node 40006793:3783. Ask first
 // if you think it should change.
 // ─────────────────────────────────────────────────────────────────────────────
-// right_panel_open — used on the collapse button when sidebar is EXPANDED (click to collapse)
+// right_panel_open, used on the collapse button when sidebar is EXPANDED (click to collapse)
 // Token: Foreground/Action/Secondary/Rest (#6b6b6b)
 // Figma component: SideBar Expand/Collapse, Type=Collapse, node 40006793:3783
 function RightPanelOpenIcon({ size = 12, color = T.icon.actionSecondary }) {
@@ -930,7 +939,7 @@ function RightPanelOpenIcon({ size = 12, color = T.icon.actionSecondary }) {
   );
 }
 
-// left_panel_open — used on the collapse button when sidebar is COLLAPSED (click to expand)
+// left_panel_open, used on the collapse button when sidebar is COLLAPSED (click to expand)
 // Token: Foreground/Action/Secondary/Rest (#6b6b6b)
 // Figma component: SideBar Expand/Collapse, Type=Expand, node 40006793:3783
 function LeftPanelOpenIcon({ size = 12, color = T.icon.actionSecondary }) {

package/dist/brands/newco/index.css

@@ -1,7 +1,7 @@
 /*
- NewCo brand layer — single entry point. Load AFTER the Pathway index and set data-brand="newco".
+ NewCo brand layer, single entry point. Load AFTER the Pathway index and set data-brand="newco".
  @imports every token file in load order (primitives first, so the themes that
- reference it resolve). Generated — do not edit. Run `npm run build-dist`.
+ reference it resolve). Generated: do not edit. Run `npm run build-dist`.
 */
 @import "./primitives.css";
 @import "./themes/light.css";

package/dist/brands/newco/layout-contextual.css

@@ -1,5 +1,5 @@
 /**
- * contextual-layout-units — one name per token, breakpoint resolved by media query.
+ * contextual-layout-units: one name per token, breakpoint resolved by media query.
  * Generated by style-dictionary.config.js. Do not edit.
  *
  * [data-brand="newco"] is the desktop value. Narrower breakpoints override only what differs.
@@ -39,4 +39,7 @@
   --contextual-layout-units-sidenav-width-collapsed: 84px;
   --contextual-layout-units-sidenav-width-expanded: 256px;
   --contextual-layout-units-topnav-height: 60px;
+  --contextual-layout-units-widget-minwidth-detail: 0px;
+  --contextual-layout-units-widget-minwidth-explore: 0px;
+  --contextual-layout-units-widget-minwidth-glance: 0px;
 }

package/dist/brands/newco/tokens.js

@@ -373,6 +373,39 @@ const tokens = {
       "height"
     ]
   },
+  "contextual-layout-units-widget-minwidth-detail": {
+    "value": 0,
+    "type": "number",
+    "path": [
+      "contextual-layout-units",
+      "newco",
+      "widget",
+      "minwidth",
+      "detail"
+    ]
+  },
+  "contextual-layout-units-widget-minwidth-explore": {
+    "value": 0,
+    "type": "number",
+    "path": [
+      "contextual-layout-units",
+      "newco",
+      "widget",
+      "minwidth",
+      "explore"
+    ]
+  },
+  "contextual-layout-units-widget-minwidth-glance": {
+    "value": 0,
+    "type": "number",
+    "path": [
+      "contextual-layout-units",
+      "newco",
+      "widget",
+      "minwidth",
+      "glance"
+    ]
+  },
   "primitive-color-amethyst-0": {
     "value": "#faf9fc",
     "type": "color",
@@ -4214,7 +4247,7 @@ const tokens = {
     ]
   },
   "primitive-color-seabreeze-300-70": {
-    "value": "#8598d7b2",
+    "value": "#8598d7b3",
     "type": "color",
     "path": [
       "primitive-color",

package/dist/breakpoints.css

@@ -1,12 +1,12 @@
 /*
  ==========================================================================
- PATHWAY DESIGN TOKENS — CONTRACT
+ PATHWAY DESIGN TOKENS, CONTRACT
  ==========================================================================
 
  The breakpoint values. Name these freely.
 
  Declares 5 custom properties.
- Generated — do not edit. Run `npm run build-tokens`.
+ Generated: do not edit. Run `npm run build-tokens`.
  ==========================================================================
 */
 :root {

package/dist/contract.json

@@ -1,7 +1,7 @@
 {
   "$comment": "The names a consumer may use. Generated from the emitted CSS by scripts/build-contract.js, do not hand-edit. Lint against `contract` if you want the boundary enforced; nothing here blocks a primitive.",
-  "version": "11.1.0",
-  "generated": "2026-10-02",
+  "version": "11.2.0",
+  "generated": "2026-10-13",
   "counts": {
     "contract": 360,
     "infrastructure": 585,

package/dist/index.css

@@ -1,7 +1,7 @@
 /*
- Pathway design tokens — single entry point.
+ Pathway design tokens, single entry point.
  @imports every token file in load order (primitives first, so the themes that
- reference it resolve). Generated — do not edit. Run `npm run build-dist`.
+ reference it resolve). Generated: do not edit. Run `npm run build-dist`.
 */
 @import "./primitives.css";
 @import "./themes/light.css";

package/dist/layout-contextual.css

@@ -1,16 +1,16 @@
 /*
  ==========================================================================
- PATHWAY DESIGN TOKENS — COMPONENT INTERNALS
+ PATHWAY DESIGN TOKENS, COMPONENT INTERNALS
  ==========================================================================
 
  Per-component metrics (Button, Card, NavItem, Page, focus ring).
 
- This repo's own components use these. Product code generally should not —
+ This repo's own components use these. Product code generally should not 
  prefer layout.css, which is the general spacing contract. These exist so a
  component's geometry can be tuned without moving the whole scale.
 
  Declares 37 custom properties.
- Generated — do not edit. Run `npm run build-tokens`.
+ Generated: do not edit. Run `npm run build-tokens`.
  ==========================================================================
 */
 :root {

package/dist/layout-responsive.css

@@ -1,6 +1,6 @@
 /*
  ==========================================================================
- PATHWAY DESIGN TOKENS — CONTRACT
+ PATHWAY DESIGN TOKENS, CONTRACT
  ==========================================================================
 
  The only layout tokens that change by breakpoint. Name these freely.
@@ -15,7 +15,7 @@
  columns; it says nothing about the chrome's padding.
 
  Declares 23 custom properties.
- Generated — do not edit. Run `npm run build-tokens`.
+ Generated: do not edit. Run `npm run build-tokens`.
  ==========================================================================
 */
 :root {

package/dist/layout.css

@@ -1,11 +1,11 @@
 /*
  ==========================================================================
- PATHWAY DESIGN TOKENS — CONTRACT
+ PATHWAY DESIGN TOKENS, CONTRACT
  ==========================================================================
 
  Spacing, radii and border widths. Name these freely.
 
- Values already carry their unit, so use them directly — do NOT wrap in
+ Values already carry their unit, so use them directly: do NOT wrap in
  calc(... * 1px). That produces calc(4px * 1px), which is not a length, so
  the browser silently drops the declaration.
 
@@ -13,7 +13,7 @@
  putting the breakpoint in the property name, so one name works responsively.
 
  Declares 76 custom properties.
- Generated — do not edit. Run `npm run build-tokens`.
+ Generated: do not edit. Run `npm run build-tokens`.
  ==========================================================================
 */
 :root {

package/dist/motion.css

@@ -1,11 +1,11 @@
 /*
  ==========================================================================
- PATHWAY DESIGN TOKENS — CONTRACT
+ PATHWAY DESIGN TOKENS, CONTRACT
  ==========================================================================
 
  Durations and easings. Name these freely.
 
- These are NOT in the Figma Variables panel — the panel has zero motion
+ These are NOT in the Figma Variables panel: the panel has zero motion
  variables. Their source of truth is docs/design-system-spec.md §2, and
  scripts/sync-motion-tokens.js generates this file from it.
 
@@ -13,12 +13,12 @@
  alone gets no motion at all, and no warning. Consume the package.
 
  Declares 21 custom properties.
- Generated — do not edit. Run `npm run build-tokens`.
+ Generated: do not edit. Run `npm run build-tokens`.
  ==========================================================================
 */
 :root {
   --motion-duration-1: 100ms; /** Instant tap feedback, tiny opacity flickers */
-  --motion-duration-2: 150ms; /** Hover fills, small opacity fades, colour transitions — the most common micro-interaction timing */
+  --motion-duration-2: 150ms; /** Hover fills, small opacity fades, colour transitions: the most common micro-interaction timing */
   --motion-duration-3: 200ms; /** Micro-interactions needing slightly more presence; small reveals, focus rings */
   --motion-duration-4: 300ms; /** Chevron / disclosure rotation, dropdown & popover content, in-component state */
   --motion-duration-5: 380ms; /** Panel state changes: accordions, expand/collapse, item enter/exit */
@@ -26,16 +26,16 @@
   --motion-duration-7: 680ms; /** Cross-component transitions: page content sliding, large layout shifts */
   --motion-duration-8: 1100ms; /** Slowest transition step: very large layout shifts, deliberate full-screen moves */
   --motion-duration-loop: 1000ms; /** Standard continuous-loop period (standalone Spinner, skeleton shimmer) */
-  --motion-duration-loop-fast: 750ms; /** Tighter loop for embedded/inline contexts (in-button spinner — faster reads as more responsive feedback) */
+  --motion-duration-loop-fast: 750ms; /** Tighter loop for embedded/inline contexts (in-button spinner, faster reads as more responsive feedback) */
   --motion-easing-breath: cubic-bezier(0.37, 0, 0.63, 1);
   --motion-easing-burst: cubic-bezier(0.30, 0, 0.5, 1.18);
-  --motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); /** Enters where the element should glide in smoothly — overlay panels, popovers, anything appearing from outside. Pure ease-out, no bounce. */
+  --motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); /** Enters where the element should glide in smoothly: overlay panels, popovers, anything appearing from outside. Pure ease-out, no bounce. */
   --motion-easing-emphasized: cubic-bezier(0.32, 0.72, 0, 1); /** Large physical-scale transitions: full-panel width changes, SideNav width. Smooth glide, no overshoot. */
   --motion-easing-inout: cubic-bezier(0.62, 0.02, 0.23, 1);
-  --motion-easing-spring: cubic-bezier(0.34, 1.04, 0.64, 1); /** Signature Pathway curve. Interactive element entrances: dropdown/popover panel opens. A whisper of overshoot (y2=1.04) — easeful, only *ever so slightly* alive. Softened 2026-06-08 from 1.08, which read as too bouncy. Not for chevrons — see chevron rule below. */
+  --motion-easing-spring: cubic-bezier(0.34, 1.04, 0.64, 1); /** Signature Pathway curve. Interactive element entrances: dropdown/popover panel opens. A whisper of overshoot (y2=1.04), easeful, only *ever so slightly* alive. Softened 2026-06-08 from 1.08, which read as too bouncy. Not for chevrons, see chevron rule below. */
   --motion-easing-spring-soft: cubic-bezier(0.30, 1.05, 0.40, 1);
-  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /** Most transitions — enters AND exits. Smooth, no overshoot. Default for colour, fill, opacity, focus rings. */
-  --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /** Exits where the element leaves cleanly — dismissing overlays, scaling down. */
-  --motion-easing-accordion: cubic-bezier(0.33, 1.03, 0.68, 1); /** Accordion settle — content reveal/hide, chevron rotation. The gentlest overshoot in the system (y2=1.03). Softened 2026-06-08 from 0.22,1.12,0.36,1, which was visibly bouncy. */
+  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /** Most transitions, enters AND exits. Smooth, no overshoot. Default for colour, fill, opacity, focus rings. */
+  --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /** Exits where the element leaves cleanly, dismissing overlays, scaling down. */
+  --motion-easing-accordion: cubic-bezier(0.33, 1.03, 0.68, 1); /** Accordion settle, content reveal/hide, chevron rotation. The gentlest overshoot in the system (y2=1.03). Softened 2026-06-08 from 0.22,1.12,0.36,1, which was visibly bouncy. */
   --motion-easing-linear: cubic-bezier(0, 0, 1, 1); /** Continuous loops only (spinners, shimmer). Never for bounded transitions. */
 }

package/dist/primitives.css

@@ -1,11 +1,11 @@
 /*
  ==========================================================================
- PATHWAY DESIGN TOKENS — INFRASTRUCTURE
+ PATHWAY DESIGN TOKENS, INFRASTRUCTURE
  ==========================================================================
 
  The raw colour ramps. NOT part of the token contract.
 
- You must LOAD this file — every semantic token resolves through it, so
+ You must LOAD this file: every semantic token resolves through it, so
  without it all colour resolves to nothing and the page renders unstyled
  with no console error. But product code should not NAME these.
 
@@ -19,7 +19,7 @@
  Nothing blocks you. It is an escape hatch with a stated cost.
 
  Declares 548 custom properties.
- Generated — do not edit. Run `npm run build-tokens`.
+ Generated: do not edit. Run `npm run build-tokens`.
  ==========================================================================
 */
 :root {

package/dist/themes/light.css

@@ -1,6 +1,6 @@
 /*
  ==========================================================================
- PATHWAY DESIGN TOKENS — CONTRACT
+ PATHWAY DESIGN TOKENS, CONTRACT
  ==========================================================================
 
  The colour contract, Light Mode. Name these freely.
@@ -9,11 +9,11 @@
 
  themes/midnight.css declares the SAME names with inverted values, so a
  component names a colour once and both modes resolve by selector. Never
- put a mode in a property name — that form came from tokens.css, retired
+ put a mode in a property name: that form came from tokens.css, retired
  2026-09-03, and resolves to nothing.
 
  Declares 210 custom properties.
- Generated — do not edit. Run `npm run build-tokens`.
+ Generated: do not edit. Run `npm run build-tokens`.
  ==========================================================================
 */
 :root, [data-theme="light"] {

package/dist/themes/midnight.css

@@ -1,6 +1,6 @@
 /*
  ==========================================================================
- PATHWAY DESIGN TOKENS — CONTRACT
+ PATHWAY DESIGN TOKENS, CONTRACT
  ==========================================================================
 
  The colour contract, Midnight Mode. Identical names to themes/light.css.
@@ -15,7 +15,7 @@
  White, XLight and Black are inversion anchors and keep their value.
 
  Declares 210 custom properties.
- Generated — do not edit. Run `npm run build-tokens`.
+ Generated: do not edit. Run `npm run build-tokens`.
  ==========================================================================
 */
 [data-theme="dark"], [data-theme="midnight"] {

package/dist/tokens.json

@@ -400,6 +400,22 @@
           "$type": "number",
           "$value": "{primitive-unit.unit.60}"
         }
+      },
+      "widget": {
+        "minwidth": {
+          "detail": {
+            "$type": "number",
+            "$value": 0
+          },
+          "explore": {
+            "$type": "number",
+            "$value": 0
+          },
+          "glance": {
+            "$type": "number",
+            "$value": 0
+          }
+        }
       }
     }
   },
@@ -451,7 +467,7 @@
       "2": {
         "$type": "duration",
         "$value": "150ms",
-        "$description": "Hover fills, small opacity fades, colour transitions — the most common micro-interaction timing"
+        "$description": "Hover fills, small opacity fades, colour transitions: the most common micro-interaction timing"
       },
       "3": {
         "$type": "duration",
@@ -491,7 +507,7 @@
       "loop-fast": {
         "$type": "duration",
         "$value": "750ms",
-        "$description": "Tighter loop for embedded/inline contexts (in-button spinner — faster reads as more responsive feedback)"
+        "$description": "Tighter loop for embedded/inline contexts (in-button spinner, faster reads as more responsive feedback)"
       }
     },
     "easing": {
@@ -503,7 +519,7 @@
           0.2,
           1
         ],
-        "$description": "Most transitions — enters AND exits. Smooth, no overshoot. Default for colour, fill, opacity, focus rings."
+        "$description": "Most transitions, enters AND exits. Smooth, no overshoot. Default for colour, fill, opacity, focus rings."
       },
       "spring": {
         "$type": "cubicBezier",
@@ -513,7 +529,7 @@
           0.64,
           1
         ],
-        "$description": "Signature Pathway curve. Interactive element entrances: dropdown/popover panel opens. A whisper of overshoot (y2=1.04) — easeful, only *ever so slightly* alive. Softened 2026-06-08 from 1.08, which read as too bouncy. Not for chevrons — see chevron rule below."
+        "$description": "Signature Pathway curve. Interactive element entrances: dropdown/popover panel opens. A whisper of overshoot (y2=1.04), easeful, only *ever so slightly* alive. Softened 2026-06-08 from 1.08, which read as too bouncy. Not for chevrons, see chevron rule below."
       },
       "decelerate": {
         "$type": "cubicBezier",
@@ -523,7 +539,7 @@
           0.2,
           1
         ],
-        "$description": "Enters where the element should glide in smoothly — overlay panels, popovers, anything appearing from outside. Pure ease-out, no bounce."
+        "$description": "Enters where the element should glide in smoothly: overlay panels, popovers, anything appearing from outside. Pure ease-out, no bounce."
       },
       "accelerate": {
         "$type": "cubicBezier",
@@ -533,7 +549,7 @@
           1,
           1
         ],
-        "$description": "Exits where the element leaves cleanly — dismissing overlays, scaling down."
+        "$description": "Exits where the element leaves cleanly, dismissing overlays, scaling down."
       },
       "emphasized": {
         "$type": "cubicBezier",
@@ -553,7 +569,7 @@
           0.68,
           1
         ],
-        "$description": "Accordion settle — content reveal/hide, chevron rotation. The gentlest overshoot in the system (y2=1.03). Softened 2026-06-08 from 0.22,1.12,0.36,1, which was visibly bouncy."
+        "$description": "Accordion settle, content reveal/hide, chevron rotation. The gentlest overshoot in the system (y2=1.03). Softened 2026-06-08 from 0.22,1.12,0.36,1, which was visibly bouncy."
       },
       "linear": {
         "$type": "cubicBezier",
@@ -3882,7 +3898,7 @@
         },
         "300-70": {
           "$type": "color",
-          "$value": "#8598d7b2"
+          "$value": "#8598d7b3"
         },
         "300-8": {
           "$type": "color",

package/dist/type.css

@@ -1,6 +1,6 @@
 /*
  ==========================================================================
- PATHWAY DESIGN TOKENS — CONTRACT
+ PATHWAY DESIGN TOKENS, CONTRACT
  ==========================================================================
 
  The type SCALE. Name these freely.
@@ -18,7 +18,7 @@
  designer applies them.
 
  Declares 39 custom properties.
- Generated — do not edit. Run `npm run build-tokens`.
+ Generated: do not edit. Run `npm run build-tokens`.
  ==========================================================================
 */
 :root {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@helloimjolopez-pathway/pathway-tokens",
-  "version": "11.1.0",
-  "description": "Pathway Design System tokens — CSS custom properties, JS export, and DTCG JSON",
+  "version": "11.2.0",
+  "description": "Pathway Design System tokens, CSS custom properties, JS export, and DTCG JSON",
   "license": "UNLICENSED",
   "type": "module",
   "engines": {
@@ -62,7 +62,7 @@
     "fix-tokens": "node scripts/fix-tokens.js",
     "fix-tokens-preview": "node scripts/fix-tokens.js --dry-run",
     "build-tokens": "node scripts/sync-motion-tokens.js && node style-dictionary.config.js && node scripts/stamp-headers.js",
-    "build-dist": "node scripts/sync-motion-tokens.js && node style-dictionary.config.js && node scripts/stamp-headers.js && node scripts/check-demo-tokens.js && node scripts/check-token-refs.js && node scripts/check-token-names.js && node scripts/check-token-object-refs.js && node scripts/fix-stale-doc-hex.js --check && node scripts/check-state-distinctness.js && node scripts/check-ladder-order.js && node scripts/check-variant-distinctness.js && node scripts/check-fill-foreground-pairs.js && node scripts/check-story-yield.js && node scripts/check-motion-coverage.js && node scripts/build-dist.js && node scripts/build-index.js && node scripts/build-contract.js && npm run build-elements && npm run sync-demo-module-icon",
+    "build-dist": "node scripts/sync-motion-tokens.js && node style-dictionary.config.js && node scripts/stamp-headers.js && node scripts/check-demo-tokens.js && node scripts/check-token-refs.js && node scripts/check-token-names.js && node scripts/check-token-object-refs.js && node scripts/fix-stale-doc-hex.js --check && node scripts/check-state-distinctness.js && node scripts/check-ladder-order.js && node scripts/check-variant-distinctness.js && node scripts/check-fill-foreground-pairs.js && node scripts/check-story-yield.js && node scripts/check-motion-coverage.js && node scripts/check-spec-stories.js && node scripts/check-code-connect.js && node scripts/build-component-index.js --check && node scripts/build-dist.js && node scripts/build-index.js && node scripts/build-contract.js && npm run build-elements && npm run sync-demo-module-icon && node scripts/check-component-tables.js && node scripts/build-demos.js && node scripts/check-demo-links.js && node scripts/check-alpha-names.js && node scripts/check-token-descriptions.js",
     "storybook": "node style-dictionary.config.js && PATHWAY_BRAND_AXIS=1 storybook dev -p 6006",
     "build-storybook": "storybook build",
     "check-demo-tokens": "node scripts/check-demo-tokens.js",
@@ -74,7 +74,7 @@
     "check-secrets": "node scripts/check-secrets.js",
     "check-token-refs": "node scripts/check-token-refs.js",
     "check-token-names": "node scripts/check-token-names.js",
-    "check-tokens": "node scripts/check-demo-tokens.js && node scripts/check-token-refs.js && node scripts/check-token-names.js && node scripts/check-token-object-refs.js && node scripts/check-story-yield.js && node scripts/fix-stale-doc-hex.js --check && node scripts/check-motion-coverage.js",
+    "check-tokens": "node scripts/check-demo-tokens.js && node scripts/check-token-refs.js && node scripts/check-token-names.js && node scripts/check-token-object-refs.js && node scripts/check-story-yield.js && node scripts/fix-stale-doc-hex.js --check && node scripts/check-motion-coverage.js && node scripts/build-component-index.js --check && node scripts/check-spec-stories.js && node scripts/check-code-connect.js && node scripts/check-component-tables.js && node scripts/check-alpha-names.js && node scripts/check-token-descriptions.js",
     "build-elements": "esbuild components/sidenav/pathway-sidenav.js --bundle --format=esm --minify --loader:.jsx=jsx --jsx=automatic --define:process.env.NODE_ENV='\"production\"' --outfile=dist/pathway-sidenav.js",
     "check-story-yield": "node scripts/check-story-yield.js",
     "stamp-headers": "node scripts/stamp-headers.js",
@@ -85,7 +85,28 @@
     "check-token-object-refs": "node scripts/check-token-object-refs.js",
     "check-motion-coverage": "node scripts/check-motion-coverage.js",
     "sync-demo-module-icon": "node scripts/sync-demo-module-icon.js",
-    "build-storybook:brands": "PATHWAY_BRAND_AXIS=1 storybook build"
+    "build-storybook:brands": "PATHWAY_BRAND_AXIS=1 storybook build",
+    "build-component-index": "node scripts/build-component-index.js",
+    "check-component-index": "node scripts/build-component-index.js --check",
+    "check-spec-stories": "node scripts/check-spec-stories.js",
+    "check-figma-nodes": "node scripts/check-figma-nodes.js",
+    "check-stories-render": "node scripts/check-stories-render.js",
+    "verify-storybook": "node scripts/check-syntax.js && storybook build --quiet && node scripts/check-stories-render.js && node scripts/check-sidebar-shape.js && node scripts/check-reduced-motion.js && node scripts/check-target-size.js && node scripts/check-contrast-focus.js && node scripts/check-mdx-refs.js && node scripts/check-accessible-names.js && node scripts/check-demos-render.js",
+    "check-code-connect": "node scripts/check-code-connect.js",
+    "check-mdx-refs": "node scripts/check-mdx-refs.js",
+    "check-component-tables": "node scripts/check-component-tables.js",
+    "check-accessible-names": "node scripts/check-accessible-names.js",
+    "check-syntax": "node scripts/check-syntax.js",
+    "build-demos": "node scripts/build-demos.js",
+    "check-demo-links": "node scripts/check-demo-links.js",
+    "check-alpha-names": "node scripts/check-alpha-names.js",
+    "check-demos-render": "node scripts/check-demos-render.js",
+    "check-token-descriptions": "node scripts/check-token-descriptions.js",
+    "check-sidebar-shape": "node scripts/check-sidebar-shape.js",
+    "check-reduced-motion": "node scripts/check-reduced-motion.js",
+    "check-target-size": "node scripts/check-target-size.js",
+    "check-contrast-focus": "node scripts/check-contrast-focus.js",
+    "check-spec-structure": "node scripts/check-spec-structure.js"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.29.2",