division-ds 0.3.0 → 0.4.0

package/public/manifest/components.json

@@ -118,7 +118,8 @@
           "caption": "With an explanation and sources",
           "source": "<div className=\"flex flex-col gap-2 max-w-md\">\n  <AiLabel\n    label=\"AI summary\"\n    explanation=\"Summarised from the three most recent reviews of this replica. It can miss details or get them wrong: verify before you rely on it.\"\n    sources={[\n      { label: 'Review by Ilse Varga', href: '#review-1' },\n      { label: 'Review by Tomas Brandt', href: '#review-2' },\n    ]}\n  />\n  <p className=\"text-sm text-[var(--color-text-primary)]\">\n    Reviewers find the gearbox quiet and the hop-up easy to tune; two mention a loose stock.\n  </p>\n</div>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "Avatar",
@@ -256,7 +257,8 @@
           "caption": "A row",
           "source": "const FIELD_TEAM = [\n  { name: 'Dana Iverson', role: 'Route Lead' },\n  { name: 'Ravi Okonkwo', role: 'Comms' },\n  { name: 'Mei Tanaka', role: 'Medic' },\n  { name: 'Sana Idrissi', role: 'Logistics' },\n]\n\n<div className=\"flex flex-col gap-3\">\n  {FIELD_TEAM.map(member => (\n    <div key={member.name} className=\"flex items-center gap-3\">\n      <Avatar name={member.name} size=\"md\" />\n      <div>\n        <p className=\"text-sm\">{member.name}</p>\n        <p className=\"text-xs text-[var(--color-text-muted)]\">{member.role}</p>\n      </div>\n    </div>\n  ))}\n</div>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "Badge",
@@ -395,7 +397,8 @@
           "caption": "In a row",
           "source": "<div className=\"flex flex-col gap-2 w-full max-w-xs\">\n  <div className=\"flex items-center justify-between\">\n    <span className=\"text-sm\">Depot Relay</span>\n    <Badge tone=\"ok\" emphasis=\"subtle\">\n      Nominal\n    </Badge>\n  </div>\n  <div className=\"flex items-center justify-between\">\n    <span className=\"text-sm\">North Sensor Array</span>\n    <Badge tone=\"warning\" emphasis=\"subtle\">\n      Degraded\n    </Badge>\n  </div>\n  <div className=\"flex items-center justify-between\">\n    <span className=\"text-sm\">Northgate Beacon</span>\n    <Badge tone=\"hostile\" emphasis=\"solid\">\n      Offline\n    </Badge>\n  </div>\n</div>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "Button",
@@ -604,7 +607,8 @@
           "caption": "Focus ring is never clipped",
           "source": "<div className=\"flex flex-col gap-4\">\n  <p className=\"text-sm text-[var(--color-text-secondary)] max-w-md\">\n    Press Tab to focus the button below, in either theme. The focus ring (the outline\n    that shows which element the keyboard is on) draws a clean rectangle around the whole\n    bevelled shape. You'll never see it cut off, because the component draws it on the\n    outer wrapper, which isn't clipped, and not on the bevelled button itself.\n  </p>\n  <Button variant=\"primary\">Dispatch team</Button>\n</div>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "Checkbox",
@@ -744,7 +748,8 @@
           "caption": "Invalid",
           "source": "<div className=\"flex items-center gap-2\">\n  <Checkbox id=\"state-invalid\" invalid />\n  <label htmlFor=\"state-invalid\">Confirm waiver on file</label>\n</div>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "Divider",
@@ -835,7 +840,8 @@
           "caption": "Drawing on",
           "source": "<div className=\"flex flex-col gap-4 w-full max-w-sm\">\n  {/* The Button atom, not a bare <button>: a hand-rolled one here had no system focus\n      ring at all (the UA default, rgb(16, 16, 16) auto 1px) and no type, so it defaulted\n      to submit. */}\n  <Button variant=\"secondary\" size=\"sm\" wrapperClassName=\"w-fit\" onClick={() => setReplayKey(k => k + 1)}>\n    Replay\n  </Button>\n  <Divider key={replayKey} className=\"anim-draw-on\" />\n  <p className=\"text-xs text-[var(--color-text-muted)]\">\n    This animation is switched off completely when someone has asked their device for\n    less motion (the prefers-reduced-motion: reduce setting).\n  </p>\n</div>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "IconButton",
@@ -1000,7 +1006,8 @@
           "caption": "Disabled",
           "source": "<IconButton label=\"Next step\" disabled>\n  <ChevronRight aria-hidden=\"true\" />\n</IconButton>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "Input",
@@ -1197,7 +1204,8 @@
           "caption": "Labelled the manual way",
           "source": "<div className=\"flex flex-col gap-1 text-sm max-w-xs\">\n  <label htmlFor=\"input-docs-callsign\">Call sign</label>\n  <Input id=\"input-docs-callsign\" aria-describedby=\"input-docs-callsign-help\" />\n  <p id=\"input-docs-callsign-help\" className=\"text-xs text-[var(--color-text-secondary)]\">\n    Letters, numbers and a hyphen. FormField will set this pattern up for you.\n  </p>\n</div>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "Kbd",
@@ -1223,6 +1231,18 @@
           "type": "ReactNode",
           "description": "The key's name, for example \"Esc\" or \"⌘\"."
         },
+        {
+          "name": "size",
+          "type": "'md' | 'sm'",
+          "default": "'md'",
+          "description": "md is 24px tall, for a cap beside text or in a menu row. sm is 20px tall, for a cap inside a 32px control: a small Button or a search field."
+        },
+        {
+          "name": "cut",
+          "type": "boolean",
+          "default": "false",
+          "description": "Cuts the bottom-right corner (5px at sm, 8px at md) so the cap nests in the corner of a bevelled control, its diagonal parallel to the control's. Only for a cap inside such a control."
+        },
         {
           "name": "className",
           "type": "string",
@@ -1243,10 +1263,11 @@
       "dos": [
         "Use one Kbd per physical key, and put them side by side for a chord (keys pressed together).",
         "Put it next to the action it triggers, in the same row or the same tooltip.",
-        "Write the key name the way the keyboard prints it."
+        "Write the key name the way the keyboard prints it.",
+        "Inside a 32px control, use size=\"sm\"; inside a bevelled one (a Button), add cut and place the cap at the end, near the cut corner."
       ],
       "donts": [
-        "Don’t bevel it. Cut corners are for surfaces and controls, not 24px chrome.",
+        "Don’t set cut on a cap that stands alone in text or a menu row. The cut answers a bevelled corner around it; without one it reads as a button.",
         "Don’t put a whole chord inside one Kbd (\"Ctrl+K\" in a single cap).",
         "Don’t use it for anything that isn’t a key. It’s not a badge."
       ],
@@ -1257,11 +1278,11 @@
         },
         {
           "part": "Hairline border",
-          "description": "A one-pixel border in border.hairline-strong, with no bevel (cut corners)."
+          "description": "A one-pixel border in border.hairline-strong. Square corners by default; with cut, the bottom-right corner is cut at 45 degrees and the border follows the diagonal."
         },
         {
           "part": "Mono legend",
-          "description": "JetBrains Mono, uppercase, 11px (pixels): the tertiary type role."
+          "description": "JetBrains Mono, uppercase, 11px (pixels): the tertiary type role, at both sizes."
         }
       ],
       "examples": [
@@ -1272,8 +1293,17 @@
         {
           "caption": "A chord: one cap per key",
           "source": "<span className=\"flex items-center gap-1\">\n  <Kbd>Ctrl</Kbd>\n  <span className=\"text-[var(--color-text-muted)] text-sm\">+</span>\n  <Kbd>K</Kbd>\n</span>\n<span className=\"text-sm text-[var(--color-text-secondary)]\">Open the command palette</span>"
+        },
+        {
+          "caption": "Sizes",
+          "source": "<Kbd>Esc</Kbd>\n<Kbd size=\"sm\">Esc</Kbd>"
+        },
+        {
+          "caption": "Small and cut, inside a small button",
+          "source": "<Button variant=\"secondary\" size=\"sm\" iconStart={<Search />} aria-keyshortcuts=\"Control+K\">\n  Search\n  <Kbd aria-hidden=\"true\" size=\"sm\" cut className=\"-mr-1.5 ml-2 -translate-y-[var(--cap-shift,0px)]\">\n    Ctrl K\n  </Kbd>\n</Button>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "Link",
@@ -1393,7 +1423,8 @@
           "caption": "External",
           "source": "<Link href=\"https://example.com\" external>\n  Supplier\n</Link>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "LoadingAnimation",
@@ -1490,7 +1521,157 @@
           "caption": "Aperture, three sizes",
           "source": "<LoadingAnimation variant=\"aperture\" size=\"sm\" label=\"Loading field kits\" />\n<LoadingAnimation variant=\"aperture\" size=\"md\" label=\"Loading field kits\" />\n<LoadingAnimation variant=\"aperture\" size=\"lg\" label=\"Loading field kits\" />"
         }
-      ]
+      ],
+      "closed": false
+    },
+    {
+      "name": "Panel",
+      "title": "Panel",
+      "tier": "atoms",
+      "slug": "panel",
+      "summary": "The system's framed surface: a thin border around a fill, with the crosshair corner marks and the cut corner as options. Card is a Panel with a title, body and footer; Panel is the frame alone, for a feature tile, a demo frame or a tile that is one link.",
+      "useWhen": "Framing content that has no title, body and footer structure: a feature tile, a demo area, or a tile that is one link.",
+      "notFor": "Content with a title, a body and actions: use Card. A page-width layout wrapper: use a plain div with max-w-*.",
+      "source": "src/components/atoms/panel/Panel.tsx",
+      "docs": "/docs/components/panel.md",
+      "imports": [
+        {
+          "names": [
+            "Panel"
+          ],
+          "from": "src/components/atoms/panel/Panel"
+        }
+      ],
+      "props": [
+        {
+          "name": "padding",
+          "type": "'none' | 'sm' | 'md' | 'lg'",
+          "default": "'md'",
+          "description": "Inner spacing: 0, 12px, 20px or 32px."
+        },
+        {
+          "name": "tone",
+          "type": "'base' | 'raised' | 'signal'",
+          "default": "'raised'",
+          "description": "base sits flush with the page, raised is one step up, signal is the brand wash for the one panel in a group that leads."
+        },
+        {
+          "name": "crosshair",
+          "type": "boolean",
+          "default": "false",
+          "description": "Draws the crosshair marks at the corners."
+        },
+        {
+          "name": "cut",
+          "type": "boolean",
+          "default": "false",
+          "description": "Cuts the bottom-right corner, with the border following the cut."
+        },
+        {
+          "name": "interactive",
+          "type": "boolean",
+          "default": "false",
+          "description": "Hover and focus states for a panel that is one link or button. Use it with asChild; it adds no behaviour of its own."
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "default": "false",
+          "description": "Renders the single child element (an a, a router Link, a button) with the panel classes merged onto it, instead of a div."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Merged with the component's classes. Use it for layout (a grid span, flex, gap), not for the fill or the border."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLDivElement>",
+          "description": "Passed through to the div, or to the child with asChild."
+        },
+        {
+          "name": "...rest",
+          "type": "HTMLAttributes<HTMLDivElement>",
+          "description": "Every native attribute, passed onto the element."
+        }
+      ],
+      "keyboard": [
+        {
+          "keys": [
+            "Tab"
+          ],
+          "does": "With interactive and asChild on a link or button: moves focus to the panel and shows the focus ring."
+        },
+        {
+          "keys": [
+            "Enter"
+          ],
+          "does": "Follows the link, or presses the button, that the panel was rendered as."
+        }
+      ],
+      "dos": [
+        "Use signal on at most one panel in a group: the one that leads.",
+        "Give a clickable panel interactive and asChild, with a real link or button as the child.",
+        "Leave 8px around a panel with the crosshair, so a parent that clips does not cut the marks off."
+      ],
+      "donts": [
+        "Don’t put a button near the bottom-right corner of a cut panel; the cut can clip it.",
+        "Don’t set a fill or border colour with a class. Choose a tone.",
+        "Don’t put a second link or button inside an interactive panel."
+      ],
+      "pitfalls": [
+        {
+          "wrong": "<Panel className=\"bg-[var(--color-surface-base)] border-[var(--color-border-selection)]\">",
+          "right": "<Panel tone=\"base\">",
+          "why": "The panel's fill and border come from its tone, through CSS that sits outside Tailwind's layers, so a bg- or border- class never wins. Pick the tone."
+        },
+        {
+          "wrong": "<Panel interactive onClick={open}>Replicas</Panel>",
+          "right": "<Panel interactive asChild><Link to=\"/replicas\">Replicas</Link></Panel>",
+          "why": "A div with a click handler cannot be reached by keyboard and is not announced as a link. interactive styles a panel that already is a link or a button; asChild makes it one."
+        }
+      ],
+      "anatomy": [
+        {
+          "part": "Frame",
+          "description": "A div (or, with asChild, your element) with the .panel class: a one-pixel border and a fill, both set by the tone."
+        },
+        {
+          "part": "Tone",
+          "description": "base: surface.base fill, border.hairline border. raised: surface.raised fill, border.hairline border. signal: accent.signal.wash fill, border.selection border. All tokens, so each one is right in both themes."
+        },
+        {
+          "part": "Crosshair",
+          "description": "Optional. Short marks drawn 5px outside each corner, in text.muted. The parent must not clip its overflow."
+        },
+        {
+          "part": "Cut corner",
+          "description": "Optional. The bottom-right corner cut at 45 degrees (14px), with the border drawn along the cut, so the outline does not break at that corner. With the crosshair on, the bottom-right marks fall inside the cut and are not drawn."
+        },
+        {
+          "part": "Interactive state",
+          "description": "Optional. On hover and on keyboard focus the border, diagonal included, turns accent.signal.indicator; keyboard focus also draws the focus ring 2px outside. Nothing moves."
+        }
+      ],
+      "examples": [
+        {
+          "caption": "Tones",
+          "source": "<Panel tone=\"base\">\n  <p className=\"font-display font-semibold\">Base</p>\n  <p className=\"text-sm text-[var(--color-text-secondary)]\">Flush with the page.</p>\n</Panel>\n<Panel tone=\"raised\">\n  <p className=\"font-display font-semibold\">Raised</p>\n  <p className=\"text-sm text-[var(--color-text-secondary)]\">One step up.</p>\n</Panel>\n<Panel tone=\"signal\">\n  <p className=\"font-display font-semibold\">Signal</p>\n  <p className=\"text-sm text-[var(--color-text-secondary)]\">The one that leads.</p>\n</Panel>"
+        },
+        {
+          "caption": "Padding",
+          "source": "<Panel padding=\"none\">none</Panel>\n<Panel padding=\"sm\">sm</Panel>\n<Panel padding=\"md\">md</Panel>\n<Panel padding=\"lg\">lg</Panel>"
+        },
+        {
+          "caption": "Crosshair and cut corner",
+          "source": "<Panel crosshair>Crosshair</Panel>\n<Panel cut>Cut corner</Panel>\n<Panel crosshair cut tone=\"signal\">Both</Panel>"
+        },
+        {
+          "caption": "Interactive, as a router link",
+          "source": "<Panel interactive cut padding=\"lg\" asChild>\n  <RouterLink to=\"/components/card\" className=\"flex flex-col gap-3\">\n    <span className=\"font-display text-lg font-semibold\">Card</span>\n    <span className=\"text-sm text-[var(--color-text-secondary)]\">A panel with a title, a body and a footer.</span>\n    <span className=\"inline-flex items-center gap-2 font-semibold text-[var(--color-accent-signal-text)]\">\n      Open <ArrowRight aria-hidden=\"true\" className=\"size-4\" />\n    </span>\n  </RouterLink>\n</Panel>"
+        }
+      ],
+      "closed": false
     },
     {
       "name": "Progress",
@@ -1537,7 +1718,7 @@
           "name": "tone",
           "type": "'signal' | 'ok' | 'warning' | 'hostile'",
           "default": "'signal'",
-          "description": "The fill colour. signal paints accent.signal.indicator to match Slider. On the track in light theme that’s a 2.15:1 contrast ratio, below the 3:1 a bar needs when it’s the only sign of progress. So set showValue there."
+          "description": "The fill colour. signal paints accent.signal.indicator to match Slider. On the track in light theme that’s a 2.80:1 contrast ratio, below the 3:1 a bar needs when it’s the only sign of progress. So set showValue there."
         },
         {
           "name": "className",
@@ -1610,7 +1791,8 @@
           "caption": "Tones",
           "source": "<div className=\"flex flex-col gap-4 w-full max-w-sm\">\n  <Progress label=\"Signal supply run\" value={40} tone=\"signal\" showValue />\n  <Progress label=\"BB reserves\" value={82} tone=\"ok\" showValue />\n  <Progress label=\"Gas reserves\" value={22} tone=\"warning\" showValue />\n  <Progress label=\"Battery reserves\" value={6} tone=\"hostile\" showValue />\n</div>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "Radio",
@@ -1785,7 +1967,8 @@
           "caption": "Disabled option",
           "source": "const SPEEDS = ['standard', 'priority', 'overnight'] as const\n\n<RadioGroup aria-label=\"Dispatch speed, one option disabled\" defaultValue=\"standard\">\n  {SPEEDS.map(speed => (\n    <div key={speed} className=\"flex items-center gap-2\">\n      <Radio value={speed} id={`disabled-${speed}`} disabled={speed === 'overnight'} />\n      <label htmlFor={`disabled-${speed}`} className=\"capitalize\">\n        {speed}\n      </label>\n    </div>\n  ))}\n</RadioGroup>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "ScoreRing",
@@ -1903,7 +2086,8 @@
           "caption": "The band boundaries: 49, 50, 89 and 90",
           "source": "<ScoreRing label=\"Depot A\" value={49} size=\"sm\" />\n<ScoreRing label=\"Depot B\" value={50} size=\"sm\" />\n<ScoreRing label=\"Depot C\" value={89} size=\"sm\" />\n<ScoreRing label=\"Depot D\" value={90} size=\"sm\" />"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "Select",
@@ -1930,7 +2114,7 @@
         {
           "name": "label",
           "type": "string",
-          "description": "Required. The trigger’s accessible name, the name a screen reader announces for it."
+          "description": "The trigger’s accessible name, the name a screen reader announces for it. Leave it out inside a FormField, which sets it from its own label. Outside one it is required, and `division-ds check` flags a missing one."
         },
         {
           "name": "options",
@@ -2165,6 +2349,10 @@
           "caption": "Beside an Input",
           "source": "const TERRAIN_OPTIONS = [\n  { value: 'woodland', label: 'Woodland' },\n  { value: 'urban', label: 'Urban' },\n  { value: 'desert', label: 'Desert' },\n  { value: 'indoor', label: 'Indoor' },\n]\n\n<label className=\"flex flex-col gap-1 text-sm\">\n  Call sign\n  <Input placeholder=\"Anvil-3\" />\n</label>\n{/* Deliberately NOT a <label>. A <label> associates with a labelable element — input,\n    select, textarea, button among them — but Radix's trigger is a <button>, and a\n    <label> wrapping a button is inert: it neither names it nor forwards a click. The\n    Select's accessible name comes from its required `label` prop, and the visible text\n    here matches it exactly (SC 2.5.3, label in name). Wrapping it in a <label> would\n    have looked correct and done nothing. */}\n<div className=\"flex flex-col gap-1 text-sm\">\n  <span>Terrain</span>\n  <Select label=\"Terrain\" options={TERRAIN_OPTIONS} placeholder=\"Choose terrain\" />\n</div>"
         }
+      ],
+      "closed": false,
+      "namedByFormField": [
+        "Select"
       ]
     },
     {
@@ -2301,7 +2489,8 @@
           "caption": "A profile row loading",
           "source": "<SkeletonGroup label=\"Loading the squad roster\" className=\"flex w-full max-w-sm items-center gap-3\">\n  <Skeleton shape=\"avatar\" size=\"md\" />\n  <div className=\"flex flex-1 flex-col gap-2\">\n    <Skeleton shape=\"text\" className=\"w-1/2\" />\n    <Skeleton shape=\"text\" className=\"w-1/3\" />\n  </div>\n</SkeletonGroup>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "Slider",
@@ -2477,7 +2666,8 @@
           "caption": "Disabled",
           "source": "<div className=\"w-full max-w-sm\">\n  <Slider label=\"Locked ration\" defaultValue={[8]} max={20} disabled />\n</div>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "Sparkline",
@@ -2617,7 +2807,8 @@
           "caption": "No values, one value, a flat run",
           "source": "<Sparkline values={[]} label=\"No readings yet\" />\n<Sparkline values={[12]} label=\"One reading: 12\" showLast />\n<Sparkline values={[7, 7, 7, 7]} label=\"Flat at 7\" showLast />"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "Spinner",
@@ -2723,7 +2914,8 @@
           "caption": "Decorative, inside a control",
           "source": "<span className=\"inline-flex items-center gap-2 border border-[var(--color-border-hairline-strong)] px-3 py-2\">\n  <Spinner aria-hidden=\"true\" />\n  <span className=\"text-sm\">Dispatching…</span>\n</span>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "Switch",
@@ -2874,7 +3066,8 @@
           "caption": "A settings row",
           "source": "<div className=\"flex w-full items-start justify-between gap-4\">\n  <div>\n    <label htmlFor=\"settings-offline-maps\" className=\"font-medium\">\n      Offline maps\n    </label>\n    <p className=\"text-sm text-[var(--color-text-secondary)]\">\n      Download the current route area before you lose signal.\n    </p>\n  </div>\n  <Switch id=\"settings-offline-maps\" defaultChecked />\n</div>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "Tag",
@@ -2985,7 +3178,8 @@
           "caption": "Long text",
           "source": "<Tag onDismiss={() => {}}>Stick battery 11.1 V, 1300 mAh, lithium polymer</Tag>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "Textarea",
@@ -3111,7 +3305,8 @@
           "caption": "With a counter",
           "source": "function CounterExample() {\n  const max = 140\n  const [value, setValue] = useState('')\n  return (\n    <label className=\"flex flex-col gap-1 text-sm w-full max-w-xs\">\n      Field day summary\n      <Textarea\n        value={value}\n        onChange={e => setValue(e.target.value)}\n        maxLength={max}\n        aria-describedby=\"textarea-docs-counter\"\n      />\n      <span id=\"textarea-docs-counter\" className=\"text-xs text-[var(--color-text-secondary)]\">\n        {value.length} / {max}\n      </span>\n    </label>\n  )\n}\n\n<CounterExample />"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "Tooltip",
@@ -3215,7 +3410,8 @@
           "caption": "Keyboard",
           "source": "<p className=\"text-sm text-[var(--color-text-secondary)] max-w-md\">\n  Press Tab to move to the trigger and the tooltip appears. Press Escape and it goes away,\n  without you moving the pointer. That's a rule in WCAG 2.2 (the Web Content Accessibility\n  Guidelines, the public rulebook for making websites usable by people with disabilities).\n  Its success criterion (SC) 1.4.13 says this kind of content has to stay dismissible (you\n  can close it), hoverable (you can move the pointer onto it) and persistent (it stays\n  until you do).\n</p>"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "Accordion",
@@ -3396,7 +3592,8 @@
           "caption": "Controlled: the page keeps track of which sections are open",
           "source": "function ControlledExample() {\n  const [open, setOpen] = useState<string[]>(['battery'])\n  return (\n    <div className=\"w-full max-w-lg\">\n      <p className=\"mb-3 font-mono text-xs uppercase tracking-[0.18em] text-[var(--color-text-secondary)]\">\n        Open: {open.length ? open.join(', ') : 'none'}\n      </p>\n      <Accordion type=\"multiple\" value={open} onValueChange={setOpen}>\n        <AccordionItem value=\"battery\">\n          <AccordionTrigger>Battery</AccordionTrigger>\n          <AccordionContent>11.1V LiPo, 1450mAh, with a deans connector.</AccordionContent>\n        </AccordionItem>\n        <AccordionItem value=\"hop-up\">\n          <AccordionTrigger>Hop-up</AccordionTrigger>\n          <AccordionContent>Rotary adjustment, 60 degree bucking.</AccordionContent>\n        </AccordionItem>\n      </Accordion>\n    </div>\n  )\n}\n\n<ControlledExample />"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "Alert",
@@ -3553,7 +3750,8 @@
           "caption": "Live: it appears after a click, and a screen reader announces it straight away",
           "source": "function LiveExample() {\n  const [shown, setShown] = useState(false)\n\n  return (\n    <div className=\"flex flex-col gap-3 w-full\">\n      <Button\n        variant=\"secondary\"\n        size=\"sm\"\n        wrapperClassName=\"self-start\"\n        onClick={() => setShown(true)}\n      >\n        Trigger a live alert\n      </Button>\n      {shown ? (\n        <Alert live tone=\"hostile\" title=\"Sync failed\" onDismiss={() => setShown(false)}>\n          The last manifest sync could not reach the server.\n        </Alert>\n      ) : null}\n    </div>\n  )\n}\n\n<LiveExample />"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "ApprovalRequest",
@@ -3707,7 +3905,8 @@
           "caption": "Resolved",
           "source": "<div className=\"flex w-full max-w-xl flex-col gap-3\">\n  <ApprovalRequest title=\"Move the Friday pickup to Thursday?\" state=\"approved\" onApprove={() => {}} onReject={() => {}}>\n    Pickup at Depot 4, Thursday 08:00 instead of Friday 08:00.\n  </ApprovalRequest>\n  <ApprovalRequest title=\"Cancel order ORD-1182?\" state=\"rejected\" onApprove={() => {}} onReject={() => {}}>\n    Two replicas, already packed.\n  </ApprovalRequest>\n</div>"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "AvatarGroup",
@@ -3858,7 +4057,8 @@
           "caption": "In a row, beside the words it summarises",
           "source": "const ALPHA: AvatarGroupPerson[] = [\n  { name: 'Ilse Varga', status: 'online' },\n  { name: 'Ravi Okonkwo', status: 'away' },\n  { name: 'Mei Tanaka', status: 'busy' },\n  { name: 'Sana Idrissi', status: 'online' },\n  { name: 'Dana Iverson', status: 'offline' },\n  { name: 'Lin Moreau', status: 'online' },\n  { name: 'Tomas Reyes', status: 'offline' },\n]\n\n<div className=\"flex items-center gap-3\">\n  <AvatarGroup people={ALPHA} max={3} size=\"sm\" label=\"Watching this replica\" />\n  <p className=\"text-sm text-[var(--color-text-secondary)]\">7 people are watching this replica</p>\n</div>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "Breadcrumbs",
@@ -3984,7 +4184,8 @@
           "caption": "A level that is not a page",
           "source": "const MID_LEVEL_TRAIL = [\n  { label: 'Catalogue', href: '/catalogue' },\n  { label: 'Optics' },\n  { label: 'Holo sights', href: '/catalogue/optics/holo-sights' },\n]\n\n<Breadcrumbs items={MID_LEVEL_TRAIL} label=\"Breadcrumb, mid-level example\" />"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "Card",
@@ -4172,7 +4373,8 @@
           "caption": "As a section",
           "source": "<div className=\"max-w-sm w-full\">\n  <Card as=\"section\">\n    <CardHeader>\n      <CardTitle level={2}>Totals</CardTitle>\n      <CardDescription>This week, all depots.</CardDescription>\n    </CardHeader>\n    <CardBody>128 kits collected, 6 outstanding.</CardBody>\n  </Card>\n</div>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "ChatMessage",
@@ -4338,7 +4540,155 @@
           "caption": "Feedback on a reply: thumbs up or down, one vote, and an optional detail step after Not helpful",
           "source": "const pretendSend = () => new Promise<void>(resolve => setTimeout(resolve, 800))\n\n<div className=\"flex w-full max-w-xl flex-col gap-6\">\n  <ChatMessage\n    role=\"assistant\"\n    author=\"Assistant\"\n    actions={<ResponseFeedback onSubmit={pretendSend} onDetail={() => {}} />}\n  >\n    Depot 4 holds 1,240 replicas. Eleven are below their reorder point.\n  </ChatMessage>\n</div>"
         }
-      ]
+      ],
+      "closed": true
+    },
+    {
+      "name": "CodeBlock",
+      "title": "Code block",
+      "tier": "molecules",
+      "slug": "code-block",
+      "summary": "Code or a command in a panel, with a title bar that names the file or language and a button that copies the text. Long lines scroll sideways inside it, and code longer than one line gets line numbers.",
+      "useWhen": "Showing code or a command someone will read or copy: an install step, a config file, an example.",
+      "notFor": "A word of code inside a sentence: use a code element. A key to press: use Kbd.",
+      "source": "src/components/molecules/code-block/CodeBlock.tsx",
+      "docs": "/docs/components/code-block.md",
+      "imports": [
+        {
+          "names": [
+            "CodeBlock"
+          ],
+          "from": "src/components/molecules/code-block/CodeBlock"
+        }
+      ],
+      "requires": [
+        "The app’s one Toaster at the root: the copy is confirmed with a toast."
+      ],
+      "props": [
+        {
+          "name": "code",
+          "type": "string",
+          "description": "The text shown and copied, exactly."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "description": "What the code is, in a few words (\"the theme CSS\"). Names the region and the copy button (\"Copy the theme CSS\")."
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "description": "Shown in the title bar: a file name (\"index.css\") or a language (\"bash\")."
+        },
+        {
+          "name": "language",
+          "type": "'css' | 'text'",
+          "default": "'text'",
+          "description": "css colours comments, at-rules, selectors and property names; text is plain."
+        },
+        {
+          "name": "lineNumbers",
+          "type": "boolean",
+          "description": "Line numbers in a gutter. Unset, they show when the code has more than one line."
+        },
+        {
+          "name": "copyable",
+          "type": "boolean",
+          "default": "true",
+          "description": "The copy button. Turn it off for code nobody should paste, such as a wrong example."
+        },
+        {
+          "name": "wrap",
+          "type": "boolean",
+          "default": "false",
+          "description": "Wraps long lines instead of scrolling them sideways. For prose, such as a prompt; leave code unwrapped."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Merged onto the frame. Use it for width (max-w-3xl) and spacing."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLDivElement>",
+          "description": "Passed through to the frame."
+        }
+      ],
+      "keyboard": [
+        {
+          "keys": [
+            "Tab"
+          ],
+          "does": "Moves to the copy button, then to the code region."
+        },
+        {
+          "keys": [
+            "←",
+            "→"
+          ],
+          "does": "In the focused code region: scrolls a long line sideways."
+        },
+        {
+          "keys": [
+            "Enter"
+          ],
+          "does": "On the copy button: copies the code."
+        }
+      ],
+      "dos": [
+        "Write a label that says what the code is, so the copy button reads \"Copy the install command\".",
+        "Give it a title: the file name it belongs in, or the language.",
+        "Set a max width with className; long lines scroll inside it, so it never widens the page."
+      ],
+      "donts": [
+        "Don’t put several unrelated commands in one block. One block per thing to copy.",
+        "Don’t set copyable on an example of what not to write.",
+        "Don’t wrap it in another bordered panel; it brings its own frame."
+      ],
+      "pitfalls": [
+        {
+          "wrong": "<pre className=\"font-mono text-sm\">{command}</pre>",
+          "right": "<CodeBlock code={command} label=\"the install command\" title=\"bash\" />",
+          "why": "A bare pre has no copy button, no name, and cannot be scrolled with a keyboard when a line runs past the edge."
+        }
+      ],
+      "anatomy": [
+        {
+          "part": "Frame",
+          "description": "A thin border around a surface.base fill. The syntax colours are measured for contrast on surface.base."
+        },
+        {
+          "part": "Title bar",
+          "description": "The title on the left, in 12px uppercase mono, and the copy button on the right, above a thin line."
+        },
+        {
+          "part": "Code region",
+          "description": "A pre with role region, named by the title and the label, focusable so a keyboard can scroll it. Up to 32rem tall, then it scrolls."
+        },
+        {
+          "part": "Line numbers",
+          "description": "A gutter in text.muted, hidden from screen readers and from text selection."
+        },
+        {
+          "part": "Copy button",
+          "description": "An IconButton named \"Copy\" plus the label. After copying, its icon turns into a tick for a moment and a toast confirms it."
+        }
+      ],
+      "examples": [
+        {
+          "caption": "A command",
+          "source": "<CodeBlock title=\"bash\" label=\"the check command\" code=\"npx division-ds check src\" className=\"max-w-3xl\" />"
+        },
+        {
+          "caption": "A file, with CSS colours and line numbers",
+          "source": "<CodeBlock\n  title=\"index.css\"\n  language=\"css\"\n  label=\"the theme CSS\"\n  className=\"max-w-3xl\"\n  code={'@import \"./division-ds/styles/division-ds.css\";\\n\\n/* Square corners */\\n:root {\\n  --shape-bevel: 0;\\n  --shape-radius: 4px;\\n}\\n'}\n/>"
+        },
+        {
+          "caption": "Not copyable, for code nobody should paste",
+          "source": "<CodeBlock title=\"Wrong\" label=\"a bare pre\" copyable={false} code={'<pre>{command}</pre>'} className=\"max-w-3xl\" />"
+        }
+      ],
+      "closed": true
     },
     {
       "name": "DatePicker",
@@ -4374,7 +4724,7 @@
         {
           "name": "label",
           "type": "string",
-          "description": "Required. Names the field. Inside a FormField, FormField sets it from its own label."
+          "description": "Names the field. Leave it out inside a FormField, which sets it from its own label. Outside one it is required, and `division-ds check` flags a missing one."
         },
         {
           "name": "value",
@@ -4621,7 +4971,7 @@
         },
         {
           "caption": "In a FormField, with help text",
-          "source": "<div className=\"w-full max-w-xs\">\n  <FormField label=\"Trip date\" help=\"Type it, or open the calendar.\">\n    <DatePicker label=\"Trip date\" />\n  </FormField>\n</div>"
+          "source": "<div className=\"w-full max-w-xs\">\n  <FormField label=\"Trip date\" help=\"Type it, or open the calendar.\">\n    <DatePicker />\n  </FormField>\n</div>"
         },
         {
           "caption": "Controlled: the page holds the value",
@@ -4639,6 +4989,11 @@
           "caption": "The calendar on its own",
           "source": "function InlineCalendar() {\n  const [date, setDate] = useState<string | null>(null)\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <Calendar value={date} onSelect={setDate} />\n      <span className=\"font-mono text-xs text-[var(--color-text-secondary)]\">{date ? formatLong(date) : 'No day picked'}</span>\n    </div>\n  )\n}\n\n<InlineCalendar />"
         }
+      ],
+      "closed": true,
+      "namedByFormField": [
+        "DateField",
+        "DatePicker"
       ]
     },
     {
@@ -4754,7 +5109,8 @@
           "caption": "Your own periods",
           "source": "<div className=\"w-full max-w-sm\">\n  <DateRangePicker\n    label=\"Season\"\n    aside={\n      <DatePresets\n        label=\"Seasons\"\n        presets={[\n          { label: 'Winter 2026', range: { start: '2026-01-01', end: '2026-03-31' } },\n          { label: 'Spring 2026', range: { start: '2026-04-01', end: '2026-06-30' } },\n          { label: 'Summer 2026', range: { start: '2026-07-01', end: '2026-09-30' } },\n        ]}\n      />\n    }\n  />\n</div>"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "DateRangePicker",
@@ -4780,7 +5136,7 @@
         {
           "name": "label",
           "type": "string",
-          "description": "Required. Names the field. Inside a FormField, FormField sets it."
+          "description": "Names the field. Leave it out inside a FormField, which sets it from its own label. Outside one it is required, and `division-ds check` flags a missing one."
         },
         {
           "name": "value",
@@ -4971,7 +5327,7 @@
         },
         {
           "caption": "With DatePresets beside the months",
-          "source": "<div className=\"w-full max-w-sm\">\n  <FormField label=\"Report period\" help=\"Pick a preset, or two days.\">\n    <DateRangePicker label=\"Report period\" aside={<DatePresets />} />\n  </FormField>\n</div>"
+          "source": "<div className=\"w-full max-w-sm\">\n  <FormField label=\"Report period\" help=\"Pick a preset, or two days.\">\n    <DateRangePicker aside={<DatePresets />} />\n  </FormField>\n</div>"
         },
         {
           "caption": "Controlled: the page holds the range",
@@ -4981,6 +5337,10 @@
           "caption": "Limits: November and December only",
           "source": "<div className=\"w-full max-w-sm\">\n  <DateRangePicker label=\"Rental\" min=\"2026-11-01\" max=\"2026-12-30\" defaultValue={{ start: '2026-11-20', end: '2026-11-23' }} />\n</div>"
         }
+      ],
+      "closed": true,
+      "namedByFormField": [
+        "DateRangePicker"
       ]
     },
     {
@@ -5091,7 +5451,8 @@
           "caption": "Three columns, fewer as the container narrows",
           "source": "<div className=\"w-full\">\n  <DescriptionList\n    columns={3}\n    items={[\n      { term: 'Order', description: 'ORD-2291' },\n      { term: 'Placed', description: '12 Oct 2026' },\n      { term: 'Ships', description: '16 Oct 2026' },\n      { term: 'Depot', description: 'Cluj, bay 4' },\n      { term: 'Carrier', description: 'Regular courier' },\n      { term: 'Weight', description: '22.1 kg' },\n    ]}\n  />\n</div>"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "DropdownMenu",
@@ -5178,6 +5539,12 @@
           "default": "'default'",
           "description": "Use hostile for a destructive action: hostile-coloured text at rest, the hostile fill with ink text when highlighted."
         },
+        {
+          "name": "asChild (Item)",
+          "type": "boolean",
+          "default": "false",
+          "description": "Makes the one child (a link) the item, for a menu of links. icon and shortcut are ignored then; put the content inside the link."
+        },
         {
           "name": "icon (Item)",
           "type": "ReactNode",
@@ -5371,7 +5738,8 @@
           "caption": "From an icon button",
           "source": "function IconButtonTriggerExample() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <IconButton label=\"Depot actions\" variant=\"secondary\">\n          <MoreHorizontal aria-hidden=\"true\" />\n        </IconButton>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuItem>View manifest</DropdownMenuItem>\n        <DropdownMenuItem>Reassign</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem tone=\"hostile\">Decommission</DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\n<IconButtonTriggerExample />"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "EmptyState",
@@ -5516,7 +5884,8 @@
           "caption": "Title only",
           "source": "<EmptyState level={4} size=\"sm\" title=\"No returns yet\" />"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "FormField",
@@ -5567,7 +5936,7 @@
         {
           "name": "children",
           "type": "ReactElement",
-          "description": "Exactly one control: Input, Textarea, Select or QuantityStepper. A label set on a Select or QuantityStepper child is replaced by the FormField label. An id you give the control is kept (point an ErrorSummary entry at it); without one, FormField makes one up."
+          "description": "Exactly one control: Input, Textarea, Select, MultiSelect, QuantityStepper, DatePicker, DateRangePicker or TimeField. The controls that name themselves (all but Input and Textarea) take the FormField label, so leave their own label out. An id you give the control is kept (point an ErrorSummary entry at it); without one, FormField makes one up."
         },
         {
           "name": "className",
@@ -5679,7 +6048,8 @@
           "caption": "A form with an error summary",
           "source": "const RESERVE_COUNTRIES = [\n  { value: 'ro', label: 'Romania' },\n  { value: 'ie', label: 'Ireland' },\n  { value: 'de', label: 'Germany' },\n]\n\nfunction ReserveExample() {\n  const [country, setCountry] = useState('')\n  const [magazines, setMagazines] = useState(0)\n  const [errors, setErrors] = useState<FormError[]>([])\n  const [attempt, setAttempt] = useState(0)\n  const summary = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (attempt > 0) summary.current?.focus()\n  }, [attempt])\n\n  const countryError = errors.find(current => current.fieldId === 'reserve-country')?.message\n  const magazinesError = errors.find(current => current.fieldId === 'reserve-magazines')?.message\n\n  return (\n    <form\n      noValidate\n      onSubmit={event => {\n        event.preventDefault()\n        const next: FormError[] = []\n        if (!country) next.push({ fieldId: 'reserve-country', message: 'Choose a country.' })\n        if (magazines < 4) next.push({ fieldId: 'reserve-magazines', message: 'Order at least 4 spare magazines.' })\n        setErrors(next)\n        if (next.length > 0) setAttempt(value => value + 1)\n      }}\n      className=\"flex flex-col gap-4 w-full max-w-sm p-5 bg-[var(--color-surface-base)]\"\n    >\n      <ErrorSummary ref={summary} errors={errors} headingLevel={4} />\n      <FormField label=\"Country\" required error={countryError}>\n        <Select\n          id=\"reserve-country\"\n          label=\"Country\"\n          options={RESERVE_COUNTRIES}\n          value={country}\n          onValueChange={value => {\n            setCountry(value)\n            if (value) setErrors(current => current.filter(item => item.fieldId !== 'reserve-country'))\n          }}\n        />\n      </FormField>\n      <FormField label=\"Spare magazines\" help=\"Four per replica.\" error={magazinesError}>\n        <QuantityStepper\n          id=\"reserve-magazines\"\n          label=\"Spare magazines\"\n          max={40}\n          value={magazines}\n          onValueChange={value => {\n            setMagazines(value)\n            if (value >= 4) setErrors(current => current.filter(item => item.fieldId !== 'reserve-magazines'))\n          }}\n        />\n      </FormField>\n      <Button type=\"submit\">Reserve</Button>\n    </form>\n  )\n}\n\n<ReserveExample />"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "ListItem",
@@ -5851,7 +6221,8 @@
           "caption": "A standalone row, outside a List",
           "source": "<div className=\"w-full max-w-xl\">\n  <ListItem as=\"div\" title=\"Spare magazine, 120 rounds\" description=\"Mid-cap, steel\" meta=\"€14.90\" />\n</div>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "MultiSelect",
@@ -5878,7 +6249,7 @@
         {
           "name": "label",
           "type": "string",
-          "description": "Required. The name screen readers give the text field and the list. FormField replaces it with its own label."
+          "description": "The name screen readers give the text field and the list. Leave it out inside a FormField, which sets it from its own label. Outside one it is required, and `division-ds check` flags a missing one."
         },
         {
           "name": "options",
@@ -6034,15 +6405,15 @@
       "examples": [
         {
           "caption": "Default",
-          "source": "const LOADOUT = [\n  { value: 'mags', label: 'Spare magazines' },\n  { value: 'goggles', label: 'Full-seal goggles' },\n  { value: 'mesh', label: 'Mesh face guard' },\n  { value: 'radio', label: 'Team radio', disabled: true },\n  { value: 'gloves', label: 'Gloves' },\n  { value: 'loader', label: 'Speed loader' },\n  { value: 'tracer', label: 'Tracer unit' },\n  { value: 'pouch', label: 'Dump pouch' },\n]\n\n<div className=\"w-full max-w-md\">\n  <FormField label=\"Loadout\">\n    <MultiSelect label=\"Loadout\" options={LOADOUT} placeholder=\"Choose your kit…\" />\n  </FormField>\n</div>"
+          "source": "const LOADOUT = [\n  { value: 'mags', label: 'Spare magazines' },\n  { value: 'goggles', label: 'Full-seal goggles' },\n  { value: 'mesh', label: 'Mesh face guard' },\n  { value: 'radio', label: 'Team radio', disabled: true },\n  { value: 'gloves', label: 'Gloves' },\n  { value: 'loader', label: 'Speed loader' },\n  { value: 'tracer', label: 'Tracer unit' },\n  { value: 'pouch', label: 'Dump pouch' },\n]\n\n<div className=\"w-full max-w-md\">\n  <FormField label=\"Loadout\">\n    <MultiSelect options={LOADOUT} placeholder=\"Choose your kit…\" />\n  </FormField>\n</div>"
         },
         {
           "caption": "Controlled: the page holds the chosen options",
-          "source": "const LOADOUT = [\n  { value: 'mags', label: 'Spare magazines' },\n  { value: 'goggles', label: 'Full-seal goggles' },\n  { value: 'mesh', label: 'Mesh face guard' },\n  { value: 'radio', label: 'Team radio', disabled: true },\n  { value: 'gloves', label: 'Gloves' },\n  { value: 'loader', label: 'Speed loader' },\n  { value: 'tracer', label: 'Tracer unit' },\n  { value: 'pouch', label: 'Dump pouch' },\n]\n\nfunction ControlledExample() {\n  const [kit, setKit] = useState<string[]>(['mags', 'goggles', 'gloves'])\n  return (\n    <div className=\"flex flex-col gap-2 w-full max-w-md\">\n      <FormField label=\"Loadout\" help=\"Remove a tag and watch the others close the gap.\">\n        <MultiSelect label=\"Loadout\" options={LOADOUT} value={kit} onValueChange={setKit} />\n      </FormField>\n      <span className=\"font-mono text-xs text-[var(--color-text-secondary)]\">value: [{kit.join(', ')}]</span>\n    </div>\n  )\n}\n\n<ControlledExample />"
+          "source": "const LOADOUT = [\n  { value: 'mags', label: 'Spare magazines' },\n  { value: 'goggles', label: 'Full-seal goggles' },\n  { value: 'mesh', label: 'Mesh face guard' },\n  { value: 'radio', label: 'Team radio', disabled: true },\n  { value: 'gloves', label: 'Gloves' },\n  { value: 'loader', label: 'Speed loader' },\n  { value: 'tracer', label: 'Tracer unit' },\n  { value: 'pouch', label: 'Dump pouch' },\n]\n\nfunction ControlledExample() {\n  const [kit, setKit] = useState<string[]>(['mags', 'goggles', 'gloves'])\n  return (\n    <div className=\"flex flex-col gap-2 w-full max-w-md\">\n      <FormField label=\"Loadout\" help=\"Remove a tag and watch the others close the gap.\">\n        <MultiSelect options={LOADOUT} value={kit} onValueChange={setKit} />\n      </FormField>\n      <span className=\"font-mono text-xs text-[var(--color-text-secondary)]\">value: [{kit.join(', ')}]</span>\n    </div>\n  )\n}\n\n<ControlledExample />"
         },
         {
           "caption": "Invalid",
-          "source": "const LOADOUT = [\n  { value: 'mags', label: 'Spare magazines' },\n  { value: 'goggles', label: 'Full-seal goggles' },\n  { value: 'mesh', label: 'Mesh face guard' },\n  { value: 'radio', label: 'Team radio', disabled: true },\n  { value: 'gloves', label: 'Gloves' },\n  { value: 'loader', label: 'Speed loader' },\n  { value: 'tracer', label: 'Tracer unit' },\n  { value: 'pouch', label: 'Dump pouch' },\n]\n\n<div className=\"w-full max-w-md\">\n  <FormField label=\"Loadout\" error=\"Pick eye protection.\">\n    <MultiSelect label=\"Loadout\" options={LOADOUT} defaultValue={['mags']} />\n  </FormField>\n</div>"
+          "source": "const LOADOUT = [\n  { value: 'mags', label: 'Spare magazines' },\n  { value: 'goggles', label: 'Full-seal goggles' },\n  { value: 'mesh', label: 'Mesh face guard' },\n  { value: 'radio', label: 'Team radio', disabled: true },\n  { value: 'gloves', label: 'Gloves' },\n  { value: 'loader', label: 'Speed loader' },\n  { value: 'tracer', label: 'Tracer unit' },\n  { value: 'pouch', label: 'Dump pouch' },\n]\n\n<div className=\"w-full max-w-md\">\n  <FormField label=\"Loadout\" error=\"Pick eye protection.\">\n    <MultiSelect options={LOADOUT} defaultValue={['mags']} />\n  </FormField>\n</div>"
         },
         {
           "caption": "Sizes",
@@ -6052,6 +6423,10 @@
           "caption": "Disabled",
           "source": "const LOADOUT = [\n  { value: 'mags', label: 'Spare magazines' },\n  { value: 'goggles', label: 'Full-seal goggles' },\n  { value: 'mesh', label: 'Mesh face guard' },\n  { value: 'radio', label: 'Team radio', disabled: true },\n  { value: 'gloves', label: 'Gloves' },\n  { value: 'loader', label: 'Speed loader' },\n  { value: 'tracer', label: 'Tracer unit' },\n  { value: 'pouch', label: 'Dump pouch' },\n]\n\n<div className=\"w-full max-w-md\">\n  <MultiSelect label=\"Locked loadout\" options={LOADOUT} defaultValue={['mags', 'gloves']} disabled />\n</div>"
         }
+      ],
+      "closed": true,
+      "namedByFormField": [
+        "MultiSelect"
       ]
     },
     {
@@ -6192,7 +6567,8 @@
           "caption": "Under a breadcrumb trail",
           "source": "<PageHeader\n  level={2}\n  breadcrumbs={\n    <Breadcrumbs\n      items={[\n        { label: 'Account', href: '#account' },\n        { label: 'Settings', href: '#settings' },\n        { label: 'Notifications' },\n      ]}\n    />\n  }\n  title=\"Notifications\"\n  description=\"What we send, and where.\"\n  actions={<Button variant=\"secondary\">Reset to defaults</Button>}\n/>"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "Pagination",
@@ -6415,7 +6791,8 @@
           "caption": "Table footer",
           "source": "function TableFooterExample() {\n  const total = 397\n  const [page, setPage] = useState(2)\n  const [pageSize, setPageSize] = useState(20)\n  return (\n    <div className=\"w-full\">\n      <Pagination\n        page={page}\n        pageCount={Math.ceil(total / pageSize)}\n        onPageChange={setPage}\n        totalItems={total}\n        pageSize={pageSize}\n        onPageSizeChange={size => {\n          setPageSize(size)\n          setPage(1)\n        }}\n        showFirstLast\n        label=\"Pagination, table footer\"\n      />\n    </div>\n  )\n}\n\n<TableFooterExample />"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "PromptInput",
@@ -6577,7 +6954,8 @@
           "caption": "Disabled",
           "source": "<div className=\"flex w-full max-w-xl flex-col gap-2\">\n  <PromptInput label=\"Message the assistant (disabled)\" value=\"\" onValueChange={() => {}} onSubmit={() => {}} disabled />\n  <p className=\"font-body text-sm text-[var(--color-text-secondary)]\">The assistant is offline until 14:00.</p>\n</div>"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "QuantityStepper",
@@ -6603,7 +6981,7 @@
         {
           "name": "label",
           "type": "string",
-          "description": "Required. Names the field and both buttons (\"Decrease Speed loader quantity\")."
+          "description": "Names the field and both buttons (\"Decrease Speed loader quantity\"). Leave it out inside a FormField, which sets it from its own label. Outside one it is required, and `division-ds check` flags a missing one."
         },
         {
           "name": "value",
@@ -6768,6 +7146,10 @@
           "caption": "In a cart line",
           "source": "function CartLine() {\n  const price = 38\n  const [qty, setQty] = useState(2)\n  return (\n    <div className=\"flex items-center gap-4 w-full\">\n      <span className=\"flex-1 font-body text-sm text-[var(--color-text-primary)]\">Speed loader</span>\n      <QuantityStepper\n        label=\"Speed loader quantity\"\n        defaultValue={2}\n        min={1}\n        max={9}\n        onValueChange={setQty}\n      />\n      <span className=\"w-16 text-right font-display font-semibold tabular-nums text-[var(--color-text-primary)]\">\n        €{price * qty}\n      </span>\n    </div>\n  )\n}\n\n<CartLine />"
         }
+      ],
+      "closed": true,
+      "namedByFormField": [
+        "QuantityStepper"
       ]
     },
     {
@@ -6938,7 +7320,8 @@
           "caption": "Input",
           "source": "function LiveInput() {\n  const [value, setValue] = useState(4)\n  return (\n    <div className=\"flex items-center gap-3\">\n      <RatingInput label=\"Rate the Prism holo sight\" value={value} onValueChange={setValue} />\n      <span className=\"font-mono text-xs text-[var(--color-text-secondary)]\">\n        You rated it {value} {value === 1 ? 'star' : 'stars'}\n      </span>\n    </div>\n  )\n}\n\n<LiveInput />"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "Search",
@@ -7088,7 +7471,8 @@
           "caption": "Sizes",
           "source": "<div className=\"max-w-xs w-full\">\n  <Search label=\"Search, small\" placeholder=\"Small\" inputSize=\"sm\" />\n</div>\n<div className=\"max-w-xs w-full\">\n  <Search label=\"Search, medium\" placeholder=\"Medium\" inputSize=\"md\" />\n</div>\n<div className=\"max-w-xs w-full\">\n  <Search label=\"Search, large\" placeholder=\"Large\" inputSize=\"lg\" />\n</div>"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "SectionHeading",
@@ -7209,7 +7593,8 @@
           "caption": "Naming its section",
           "source": "<section aria-labelledby=\"section-heading-docs-care\">\n  <SectionHeading\n    level={4}\n    id=\"section-heading-docs-care\"\n    title=\"Care plans\"\n    description=\"The section below is a region named “Care plans”. It takes that name from this heading, which carries the id.\"\n  />\n  <p className=\"mt-4 font-body text-sm text-[var(--color-text-primary)]\">\n    A chrono check, a tune and upgrade fitting, billed monthly.\n  </p>\n</section>"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "SegmentedControl",
@@ -7351,7 +7736,8 @@
           "caption": "Small, with icons, lined up with a small Button",
           "source": "function ToolbarExample() {\n  const [view, setView] = useState('board')\n  return (\n    <div className=\"flex flex-wrap items-center gap-3\">\n      <SegmentedControl\n        label=\"View\"\n        size=\"sm\"\n        options={[\n          { value: 'board', label: 'Board', icon: <Columns3 /> },\n          { value: 'table', label: 'Table', icon: <Table /> },\n        ]}\n        value={view}\n        onValueChange={setView}\n      />\n      <Button size=\"sm\" variant=\"secondary\">\n        Export\n      </Button>\n    </div>\n  )\n}\n\n<ToolbarExample />"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "Stat",
@@ -7464,7 +7850,8 @@
           "caption": "Without a delta",
           "source": "<div className=\"max-w-[10rem] w-full\">\n  <Stat label=\"Kits dispatched\" value={18} padTo={3} />\n</div>"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "StatusTracker",
@@ -7629,7 +8016,8 @@
           "caption": "Other status words",
           "source": "<div className=\"w-full max-w-xs\">\n  <StatusTracker\n    label=\"Door sensor, last 8 hours\"\n    statusLabels={{ ok: 'Closed', warning: 'Left open', hostile: 'Forced', neutral: 'Offline' }}\n    items={[\n      { id: 'h1', status: 'ok', label: '02:00 to 03:00' },\n      { id: 'h2', status: 'ok', label: '03:00 to 04:00' },\n      { id: 'h3', status: 'warning', label: '04:00 to 05:00, open 9 min' },\n      { id: 'h4', status: 'ok', label: '05:00 to 06:00' },\n      { id: 'h5', status: 'neutral', label: '06:00 to 07:00' },\n      { id: 'h6', status: 'ok', label: '07:00 to 08:00' },\n      { id: 'h7', status: 'ok', label: '08:00 to 09:00' },\n      { id: 'h8', status: 'ok', label: '09:00 to 10:00' },\n    ]}\n  />\n</div>"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "Stepper",
@@ -7747,7 +8135,8 @@
           "caption": "Live: move through the steps with Back and Continue",
           "source": "const CHECKOUT_STEPS: Step[] = [\n  { label: 'Shipping' },\n  { label: 'Payment' },\n  { label: 'Review', description: 'Check the manifest' },\n]\n\nfunction LiveStepper() {\n  const [current, setCurrent] = useState(0)\n  return (\n    <div className=\"flex flex-col gap-6 w-full\">\n      <Stepper steps={CHECKOUT_STEPS} current={current} label=\"Checkout progress\" />\n      <div className=\"flex gap-3\">\n        <Button\n          variant=\"secondary\"\n          size=\"sm\"\n          disabled={current === 0}\n          onClick={() => setCurrent(c => Math.max(0, c - 1))}\n        >\n          Back\n        </Button>\n        <Button\n          size=\"sm\"\n          disabled={current >= CHECKOUT_STEPS.length}\n          onClick={() => setCurrent(c => Math.min(CHECKOUT_STEPS.length, c + 1))}\n        >\n          Continue\n        </Button>\n      </div>\n    </div>\n  )\n}\n\n<LiveStepper />"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "Tabs",
@@ -7926,7 +8315,8 @@
           "caption": "Controlled: the page keeps track of which tab is open",
           "source": "function ControlledExample() {\n  const [value, setValue] = useState('replica')\n\n  return (\n    <div className=\"max-w-sm w-full\">\n      <div className=\"flex gap-2 mb-4\">\n        <Button size=\"sm\" variant=\"secondary\" onClick={() => setValue('replica')}>\n          Show replica\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" onClick={() => setValue('optics')}>\n          Show optics\n        </Button>\n      </div>\n      <Tabs value={value} onValueChange={setValue}>\n        <TabsList aria-label=\"Kit sections\">\n          <TabsTrigger value=\"replica\">Replica</TabsTrigger>\n          <TabsTrigger value=\"optics\">Optics</TabsTrigger>\n        </TabsList>\n        <TabsContent value=\"replica\">Electric carbine replica.</TabsContent>\n        <TabsContent value=\"optics\">Tube sight and holo sight.</TabsContent>\n      </Tabs>\n    </div>\n  )\n}\n\n<ControlledExample />"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "TimeField",
@@ -7951,7 +8341,7 @@
         {
           "name": "label",
           "type": "string",
-          "description": "Required. Names the field. Inside a FormField, FormField sets it."
+          "description": "Names the field. Leave it out inside a FormField, which sets it from its own label. Outside one it is required, and `division-ds check` flags a missing one."
         },
         {
           "name": "value",
@@ -7978,7 +8368,7 @@
           "name": "step",
           "type": "number",
           "default": "30",
-          "description": "Minutes between the times in the list."
+          "description": "Minutes between the times in the list. It only spaces the list: a typed time between steps (09:07) is kept as typed. Check it yourself if it must fall on a step."
         },
         {
           "name": "min",
@@ -8143,8 +8533,12 @@
         },
         {
           "caption": "With a DatePicker: a date and a time",
-          "source": "function DateAndTime() {\n  const [date, setDate] = useState('2026-11-14')\n  const [time, setTime] = useState('09:30')\n  return (\n    <div className=\"flex w-full max-w-md flex-col gap-3\">\n      <div className=\"grid gap-3 sm:grid-cols-[1fr_9rem]\">\n        <FormField label=\"Pickup date\">\n          <DatePicker label=\"Pickup date\" value={date} onValueChange={setDate} />\n        </FormField>\n        <FormField label=\"Pickup time\">\n          <TimeField label=\"Pickup time\" value={time} onValueChange={setTime} step={15} min=\"08:00\" max=\"18:00\" />\n        </FormField>\n      </div>\n      <span className=\"font-mono text-xs text-[var(--color-text-secondary)]\">\n        {date && time ? `${date}T${time}` : 'Pick a date and a time'}\n      </span>\n    </div>\n  )\n}\n\n<DateAndTime />"
+          "source": "function DateAndTime() {\n  const [date, setDate] = useState('2026-11-14')\n  const [time, setTime] = useState('09:30')\n  return (\n    <div className=\"flex w-full max-w-md flex-col gap-3\">\n      <div className=\"grid gap-3 sm:grid-cols-[1fr_9rem]\">\n        <FormField label=\"Pickup date\">\n          <DatePicker value={date} onValueChange={setDate} />\n        </FormField>\n        <FormField label=\"Pickup time\">\n          <TimeField value={time} onValueChange={setTime} step={15} min=\"08:00\" max=\"18:00\" />\n        </FormField>\n      </div>\n      <span className=\"font-mono text-xs text-[var(--color-text-secondary)]\">\n        {date && time ? `${date}T${time}` : 'Pick a date and a time'}\n      </span>\n    </div>\n  )\n}\n\n<DateAndTime />"
         }
+      ],
+      "closed": true,
+      "namedByFormField": [
+        "TimeField"
       ]
     },
     {
@@ -8299,7 +8693,8 @@
           "caption": "Without groups",
           "source": "<div className=\"w-full max-w-xl\">\n  <Timeline label=\"Work order WO-29\">\n    <TimelineItem icon={<Wrench />} title=\"Opened\" time=\"2026-10-09T08:00:00+03:00\" timeLabel=\"Fri 9 Oct\" />\n    <TimelineItem\n      icon={<Wrench />}\n      tone=\"signal\"\n      title=\"Assigned to Mara Lind\"\n      time=\"2026-10-12T11:20:00+03:00\"\n      timeLabel=\"Mon 12 Oct\"\n    />\n    <TimelineItem\n      icon={<CircleCheck />}\n      tone=\"ok\"\n      title=\"Closed: pallet jack serviced\"\n      time=\"2026-10-13T15:45:00+03:00\"\n      timeLabel=\"Tue 13 Oct\"\n    />\n  </Timeline>\n</div>"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "Toast",
@@ -8446,7 +8841,8 @@
           "caption": "With an action",
           "source": "function WithActionExample() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"secondary\"\n      size=\"sm\"\n      onClick={() =>\n        toast({\n          title: 'Item removed',\n          action: {\n            label: 'Undo',\n            altText: 'Undo from the manifest history',\n            onAction: () => toast({ title: 'Item restored', tone: 'ok' }),\n          },\n        })\n      }\n    >\n      Remove item\n    </Button>\n  )\n}\n\n<WithActionExample />"
         }
-      ]
+      ],
+      "closed": false
     },
     {
       "name": "ToolCall",
@@ -8577,7 +8973,8 @@
           "caption": "Without a title, details open",
           "source": "<div className=\"flex w-full max-w-xl flex-col gap-3\">\n  <ToolCall\n    name=\"count_pallets\"\n    status=\"done\"\n    duration=\"0.3 s\"\n    input={'{ \"depot\": 4, \"bay\": 2 }'}\n    output=\"14 pallets\"\n    defaultOpen\n  />\n</div>"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "AlertDialog",
@@ -8798,7 +9195,8 @@
           "caption": "Type the name to confirm, for the costliest actions",
           "source": "const request = (fail = false) =>\n  new Promise<void>((resolve, reject) =>\n    window.setTimeout(() => (fail ? reject(new Error('The server did not answer.')) : resolve()), 1000)\n  )\n\nconst ACCOUNT = 'northfield-supply'\n\nfunction TypeToConfirmExample() {\n  const [typed, setTyped] = useState('')\n  const matches = typed.trim() === ACCOUNT\n  return (\n    <AlertDialog onOpenChange={() => setTyped('')}>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"danger\">Delete account</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent\n        title=\"Delete the account?\"\n        description=\"Its 212 orders, saved kit lists and team access are removed for good.\"\n      >\n        <FormField label=\"Account name\" help={`Type ${ACCOUNT} to enable Delete account.`}>\n          <Input\n            value={typed}\n            onChange={event => setTyped(event.target.value)}\n            autoComplete=\"off\"\n            spellCheck={false}\n            className=\"font-mono\"\n          />\n        </FormField>\n        <AlertDialogFooter>\n          <AlertDialogCancel />\n          <AlertDialogAction disabled={!matches} loadingLabel=\"Deleting account\" onClick={() => request()}>\n            Delete account\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  )\n}\n\n<TypeToConfirmExample />"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "AuthForm",
@@ -8952,7 +9350,8 @@
           "caption": "Two-step sign-in with a code",
           "source": "const wait = (ms: number) => new Promise(resolve => window.setTimeout(resolve, ms))\n\n<AuthForm mode=\"verify-code\" onSubmit={() => wait(600).then(() => undefined)} headingLevel={4} />"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "Carousel",
@@ -9079,7 +9478,8 @@
           "caption": "Three short items: both buttons do nothing while everything fits",
           "source": "<Carousel label=\"Kestrel lengths\" itemWidth=\"8rem\">\n  {['Kestrel K', 'Kestrel C', 'Kestrel L'].map(name => (\n    <div\n      key={name}\n      className=\"flex h-20 items-center justify-center border border-[var(--color-border-hairline-strong)] font-display font-semibold text-[var(--color-text-primary)]\"\n    >\n      {name}\n    </div>\n  ))}\n</Carousel>"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "Cart",
@@ -9257,7 +9657,8 @@
           "caption": "Empty",
           "source": "<Cart lines={[]} onQuantityChange={() => {}} onRemove={() => {}} headingLevel={4} title=\"Saved for later\" />"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "ChartPanel",
@@ -9469,7 +9870,7 @@
       "examples": [
         {
           "caption": "Line, two series",
-          "source": "type Week = { week: string; online: number; store: number }\n\nconst WEEKS: Week[] = [\n  { week: 'W1', online: 120, store: 160 },\n  { week: 'W2', online: 131, store: 158 },\n  { week: 'W3', online: 142, store: 163 },\n  { week: 'W4', online: 150, store: 155 },\n  { week: 'W5', online: 171, store: 162 },\n  { week: 'W6', online: 188, store: 159 },\n  { week: 'W7', online: 197, store: 166 },\n  { week: 'W8', online: 214, store: 161 },\n]\n\n<ChartPanel<Week>\n  title=\"Weekly orders\"\n  summary=\"Online orders rose from 120 to 214 over eight weeks and passed in-store orders in week 5.\"\n  kind=\"line\"\n  data={WEEKS}\n  xKey=\"week\"\n  xLabel=\"Week\"\n  series={[\n    { key: 'online', label: 'Online' },\n    { key: 'store', label: 'In store' },\n  ]}\n  headingLevel={4}\n/>"
+          "source": "type Week = { week: string; online: number; store: number }\n\nconst WEEKS: Week[] = [\n  { week: 'W1', online: 118, store: 150 },\n  { week: 'W2', online: 149, store: 172 },\n  { week: 'W3', online: 168, store: 158 },\n  { week: 'W4', online: 141, store: 131 },\n  { week: 'W5', online: 126, store: 128 },\n  { week: 'W6', online: 174, store: 150 },\n  { week: 'W7', online: 231, store: 141 },\n  { week: 'W8', online: 183, store: 122 },\n  { week: 'W9', online: 139, store: 149 },\n  { week: 'W10', online: 162, store: 185 },\n  { week: 'W11', online: 196, store: 163 },\n  { week: 'W12', online: 170, store: 140 },\n]\n\n<ChartPanel<Week>\n  title=\"Weekly orders\"\n  summary=\"Online orders peaked three times in twelve weeks, highest at 231 in week 7; in-store orders peaked highest at 185 in week 10.\"\n  kind=\"line\"\n  area\n  curve=\"smooth\"\n  data={WEEKS}\n  xKey=\"week\"\n  xLabel=\"Week\"\n  series={[\n    { key: 'online', label: 'Online' },\n    { key: 'store', label: 'In store' },\n  ]}\n  headingLevel={4}\n/>"
         },
         {
           "caption": "Bar, one series",
@@ -9477,11 +9878,11 @@
         },
         {
           "caption": "Area under a smooth line",
-          "source": "type Day = { day: string; visits: number; orders: number }\n\nconst DAYS: Day[] = [\n  { day: 'Mon', visits: 1840, orders: 61 },\n  { day: 'Tue', visits: 2210, orders: 74 },\n  { day: 'Wed', visits: 1960, orders: 58 },\n  { day: 'Thu', visits: 2650, orders: 92 },\n  { day: 'Fri', visits: 3120, orders: 118 },\n  { day: 'Sat', visits: 3890, orders: 141 },\n  { day: 'Sun', visits: 3370, orders: 126 },\n]\n\n<ChartPanel<Day>\n  title=\"Visits this week\"\n  summary=\"Visits climbed from 1,840 on Monday to a Saturday peak of 3,890.\"\n  kind=\"line\"\n  area\n  curve=\"smooth\"\n  data={DAYS}\n  xKey=\"day\"\n  xLabel=\"Day\"\n  series={[{ key: 'visits', label: 'Visits' }]}\n  headline=\"19,040\"\n  headingLevel={4}\n/>"
+          "source": "type Day = { day: string; visits: number; orders: number }\n\nconst DAYS: Day[] = [\n  { day: 'Mon', visits: 1840, orders: 61 },\n  { day: 'Tue', visits: 2960, orders: 104 },\n  { day: 'Wed', visits: 2210, orders: 74 },\n  { day: 'Thu', visits: 1720, orders: 55 },\n  { day: 'Fri', visits: 2650, orders: 92 },\n  { day: 'Sat', visits: 3890, orders: 141 },\n  { day: 'Sun', visits: 3120, orders: 118 },\n]\n\n<ChartPanel<Day>\n  title=\"Visits this week\"\n  summary=\"Visits peaked on Tuesday at 2,960, fell to a Thursday low of 1,720, then peaked higher on Saturday at 3,890.\"\n  kind=\"line\"\n  area\n  curve=\"smooth\"\n  data={DAYS}\n  xKey=\"day\"\n  xLabel=\"Day\"\n  series={[{ key: 'visits', label: 'Visits' }]}\n  headline=\"18,390\"\n  headingLevel={4}\n/>"
         },
         {
           "caption": "No grid lines: only the labels along the axes",
-          "source": "type Week = { week: string; online: number; store: number }\n\nconst WEEKS: Week[] = [\n  { week: 'W1', online: 120, store: 160 },\n  { week: 'W2', online: 131, store: 158 },\n  { week: 'W3', online: 142, store: 163 },\n  { week: 'W4', online: 150, store: 155 },\n  { week: 'W5', online: 171, store: 162 },\n  { week: 'W6', online: 188, store: 159 },\n  { week: 'W7', online: 197, store: 166 },\n  { week: 'W8', online: 214, store: 161 },\n]\n\n<ChartPanel<Week>\n  title=\"Weekly orders, gridless\"\n  summary=\"Online orders rose from 120 to 214 over eight weeks and passed in-store orders in week 5.\"\n  kind=\"line\"\n  area\n  curve=\"smooth\"\n  grid={false}\n  data={WEEKS}\n  xKey=\"week\"\n  xLabel=\"Week\"\n  series={[\n    { key: 'online', label: 'Online' },\n    { key: 'store', label: 'In store' },\n  ]}\n  headingLevel={4}\n/>"
+          "source": "type Week = { week: string; online: number; store: number }\n\nconst WEEKS: Week[] = [\n  { week: 'W1', online: 118, store: 150 },\n  { week: 'W2', online: 149, store: 172 },\n  { week: 'W3', online: 168, store: 158 },\n  { week: 'W4', online: 141, store: 131 },\n  { week: 'W5', online: 126, store: 128 },\n  { week: 'W6', online: 174, store: 150 },\n  { week: 'W7', online: 231, store: 141 },\n  { week: 'W8', online: 183, store: 122 },\n  { week: 'W9', online: 139, store: 149 },\n  { week: 'W10', online: 162, store: 185 },\n  { week: 'W11', online: 196, store: 163 },\n  { week: 'W12', online: 170, store: 140 },\n]\n\n<ChartPanel<Week>\n  title=\"Weekly orders, gridless\"\n  summary=\"Online orders peaked three times in twelve weeks, highest at 231 in week 7; in-store orders peaked highest at 185 in week 10.\"\n  kind=\"line\"\n  area\n  curve=\"smooth\"\n  grid={false}\n  data={WEEKS}\n  xKey=\"week\"\n  xLabel=\"Week\"\n  series={[\n    { key: 'online', label: 'Online' },\n    { key: 'store', label: 'In store' },\n  ]}\n  headingLevel={4}\n/>"
         },
         {
           "caption": "A shaded band: night hours on a 24-hour series (the band wraps past midnight)",
@@ -9489,7 +9890,7 @@
         },
         {
           "caption": "Small: stat cards, each with a sparkline (a tiny line chart with no axes)",
-          "source": "type Week = { week: string; online: number; store: number }\n\ntype Day = { day: string; visits: number; orders: number }\n\nconst WEEKS: Week[] = [\n  { week: 'W1', online: 120, store: 160 },\n  { week: 'W2', online: 131, store: 158 },\n  { week: 'W3', online: 142, store: 163 },\n  { week: 'W4', online: 150, store: 155 },\n  { week: 'W5', online: 171, store: 162 },\n  { week: 'W6', online: 188, store: 159 },\n  { week: 'W7', online: 197, store: 166 },\n  { week: 'W8', online: 214, store: 161 },\n]\n\nconst DAYS: Day[] = [\n  { day: 'Mon', visits: 1840, orders: 61 },\n  { day: 'Tue', visits: 2210, orders: 74 },\n  { day: 'Wed', visits: 1960, orders: 58 },\n  { day: 'Thu', visits: 2650, orders: 92 },\n  { day: 'Fri', visits: 3120, orders: 118 },\n  { day: 'Sat', visits: 3890, orders: 141 },\n  { day: 'Sun', visits: 3370, orders: 126 },\n]\n\n<ChartPanel<Day>\n  title=\"Visits\"\n  headline=\"19,040\"\n  summary=\"Up every day but Wednesday and Sunday.\"\n  kind=\"line\"\n  area\n  curve=\"smooth\"\n  size=\"sm\"\n  data={DAYS}\n  xKey=\"day\"\n  xLabel=\"Day\"\n  series={[{ key: 'visits', label: 'Visits' }]}\n  headingLevel={4}\n/>\n<ChartPanel<Day>\n  title=\"Orders\"\n  headline=\"670\"\n  summary=\"Saturday took 141, the most of the week.\"\n  kind=\"bar\"\n  size=\"sm\"\n  data={DAYS}\n  xKey=\"day\"\n  xLabel=\"Day\"\n  series={[{ key: 'orders', label: 'Orders' }]}\n  headingLevel={4}\n/>\n<ChartPanel<Week>\n  title=\"Online orders\"\n  headline=\"214\"\n  summary=\"Eight weeks of growth, from 120 a week.\"\n  kind=\"line\"\n  curve=\"smooth\"\n  size=\"sm\"\n  data={WEEKS}\n  xKey=\"week\"\n  xLabel=\"Week\"\n  series={[{ key: 'online', label: 'Online' }]}\n  headingLevel={4}\n/>"
+          "source": "type Week = { week: string; online: number; store: number }\n\ntype Day = { day: string; visits: number; orders: number }\n\nconst WEEKS: Week[] = [\n  { week: 'W1', online: 118, store: 150 },\n  { week: 'W2', online: 149, store: 172 },\n  { week: 'W3', online: 168, store: 158 },\n  { week: 'W4', online: 141, store: 131 },\n  { week: 'W5', online: 126, store: 128 },\n  { week: 'W6', online: 174, store: 150 },\n  { week: 'W7', online: 231, store: 141 },\n  { week: 'W8', online: 183, store: 122 },\n  { week: 'W9', online: 139, store: 149 },\n  { week: 'W10', online: 162, store: 185 },\n  { week: 'W11', online: 196, store: 163 },\n  { week: 'W12', online: 170, store: 140 },\n]\n\nconst DAYS: Day[] = [\n  { day: 'Mon', visits: 1840, orders: 61 },\n  { day: 'Tue', visits: 2960, orders: 104 },\n  { day: 'Wed', visits: 2210, orders: 74 },\n  { day: 'Thu', visits: 1720, orders: 55 },\n  { day: 'Fri', visits: 2650, orders: 92 },\n  { day: 'Sat', visits: 3890, orders: 141 },\n  { day: 'Sun', visits: 3120, orders: 118 },\n]\n\n<ChartPanel<Day>\n  title=\"Visits\"\n  headline=\"18,390\"\n  summary=\"Two peaks: Tuesday, then a higher Saturday.\"\n  kind=\"line\"\n  area\n  curve=\"smooth\"\n  size=\"sm\"\n  data={DAYS}\n  xKey=\"day\"\n  xLabel=\"Day\"\n  series={[{ key: 'visits', label: 'Visits' }]}\n  headingLevel={4}\n/>\n<ChartPanel<Day>\n  title=\"Orders\"\n  headline=\"670\"\n  summary=\"Saturday took 141, the most of the week.\"\n  kind=\"bar\"\n  size=\"sm\"\n  data={DAYS}\n  xKey=\"day\"\n  xLabel=\"Day\"\n  series={[{ key: 'orders', label: 'Orders' }]}\n  headingLevel={4}\n/>\n<ChartPanel<Week>\n  title=\"Online orders\"\n  headline=\"170\"\n  summary=\"Three peaks in twelve weeks; the highest, 231, in week 7.\"\n  kind=\"line\"\n  area\n  curve=\"smooth\"\n  size=\"sm\"\n  data={WEEKS}\n  xKey=\"week\"\n  xLabel=\"Week\"\n  series={[{ key: 'online', label: 'Online' }]}\n  headingLevel={4}\n/>"
         },
         {
           "caption": "Donut with a centre total",
@@ -9499,7 +9900,8 @@
           "caption": "Radar, two series",
           "source": "type Profile = { measure: string; m4: number; ak: number }\n\nconst PROFILES: Profile[] = [\n  { measure: 'Range', m4: 78, ak: 64 },\n  { measure: 'Accuracy', m4: 82, ak: 70 },\n  { measure: 'Rate of fire', m4: 74, ak: 86 },\n  { measure: 'Weight', m4: 58, ak: 44 },\n  { measure: 'Reliability', m4: 70, ak: 90 },\n  { measure: 'Upgrades', m4: 92, ak: 62 },\n]\n\n<ChartPanel<Profile>\n  title=\"Replica profiles\"\n  summary=\"The M4 replica leads on range, accuracy and upgrades; the AK replica on rate of fire and reliability.\"\n  kind=\"radar\"\n  data={PROFILES}\n  xKey=\"measure\"\n  xLabel=\"Measure\"\n  series={[\n    { key: 'm4', label: 'M4 replica' },\n    { key: 'ak', label: 'AK replica' },\n  ]}\n  headingLevel={4}\n/>"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "ChatThread",
@@ -9625,7 +10027,8 @@
           "caption": "A live conversation: send anything, watch the reply stream in, press Stop to end it, or scroll up while it's still arriving",
           "source": "type Turn =\n  | { id: number; role: 'user'; text: string }\n  | { id: number; role: 'assistant'; text: string; tool?: ToolCallStatus; approval?: boolean }\n  | { id: number; role: 'system'; text: string }\n\nconst REPLIES = [\n  'Depot 4 holds 1,240 replicas across 38 lines. Two lines are under their reorder point: the K-41 field radio has 6 left against a reorder point of 10, and the trail pack has 3 left against 8. Everything else has at least two weeks of cover at the current rate. The reorder above covers both lines; once it is approved, the supplier confirms within a working day.',\n  'Inbound this week: one delivery from Arad on Thursday morning, 22 pallets, booked into bay 2. Outbound: nine shipments, the largest to Sibiu on Friday. Nothing is waiting on a person except the reorder above.',\n]\n\nconst HISTORY: Turn[] = [\n  { id: 1, role: 'user', text: 'Summarise stock at Depot 4.' },\n  {\n    id: 2,\n    role: 'assistant',\n    text: 'Depot 4 is in good shape: 1,240 replicas on hand and nothing overdue. Two lines are low, so I have drafted a reorder for you to check.',\n    tool: 'done',\n    approval: true,\n  },\n]\n\nfunction LiveConversation() {\n  const [turns, setTurns] = useState<Turn[]>(HISTORY)\n  const [draft, setDraft] = useState('')\n  const [phase, setPhase] = useState<'idle' | 'tool' | 'streaming'>('idle')\n  const [approval, setApproval] = useState<ApprovalState>('pending')\n  const [replyIndex, setReplyIndex] = useState(0)\n  const nextId = useRef(HISTORY.length + 1)\n  const activeId = useRef<number | null>(null)\n  const reply = useStreamedText(REPLIES[replyIndex % REPLIES.length], { active: phase === 'streaming' })\n\n  const updateActive = (change: (turn: Turn & { role: 'assistant' }) => Turn) =>\n    setTurns(list => list.map(turn => (turn.id === activeId.current && turn.role === 'assistant' ? change(turn) : turn)))\n\n  const addStopped = () => {\n    const id = nextId.current++\n    setTurns(list => [...list, { id, role: 'system', text: 'Assistant stopped' }])\n  }\n\n  // The tool \"runs\" for a moment, then the reply starts streaming.\n  useEffect(() => {\n    if (phase !== 'tool') return\n    const timer = window.setTimeout(() => {\n      updateActive(turn => ({ ...turn, tool: 'done' }))\n      setPhase('streaming')\n    }, 1200)\n    return () => window.clearTimeout(timer)\n  }, [phase])\n\n  // Finished or stopped: keep what arrived, and hand the thread a message that is no longer streaming.\n  useEffect(() => {\n    if (phase !== 'streaming' || !reply.done) return\n    updateActive(turn => ({ ...turn, text: reply.text }))\n    if (reply.stopped) addStopped()\n    setPhase('idle')\n    setReplyIndex(index => index + 1)\n  }, [phase, reply.done, reply.text, reply.stopped])\n\n  const send = (text: string) => {\n    const question = nextId.current++\n    const answer = nextId.current++\n    activeId.current = answer\n    setTurns(list => [...list, { id: question, role: 'user', text }, { id: answer, role: 'assistant', text: '', tool: 'running' }])\n    setDraft('')\n    setPhase('tool')\n  }\n\n  const stop = () => {\n    if (phase === 'streaming') {\n      reply.stop()\n      return\n    }\n    // Stopped before any text: the empty reply goes, the system line says what happened.\n    setTurns(list => list.filter(turn => turn.id !== activeId.current))\n    addStopped()\n    setPhase('idle')\n  }\n\n  const busy = phase !== 'idle'\n\n  return (\n    <div className=\"flex w-full max-w-2xl flex-col border border-[var(--color-border-hairline-strong)]\">\n      <ChatThread label=\"Conversation with the assistant\" busy={phase === 'tool'} className=\"h-[28rem]\">\n        {turns.map(turn => {\n          if (turn.role === 'user') {\n            return (\n              <ChatMessage key={turn.id} role=\"user\" author=\"You\">\n                {turn.text}\n              </ChatMessage>\n            )\n          }\n          if (turn.role === 'system') {\n            return (\n              <ChatMessage key={turn.id} role=\"system\" author=\"Status\">\n                {turn.text}\n              </ChatMessage>\n            )\n          }\n          const streaming = phase === 'streaming' && turn.id === activeId.current\n          const text = streaming ? reply.text : turn.text\n          return (\n            <ChatMessage key={turn.id} role=\"assistant\" author=\"Assistant\" streaming={streaming}>\n              {turn.tool === undefined ? null : (\n                <ToolCall\n                  name=\"query_stock_levels\"\n                  title=\"Read stock levels at Depot 4\"\n                  status={turn.tool}\n                  duration={turn.tool === 'done' ? '1.2 s' : undefined}\n                  input={'{ \"depot\": 4 }'}\n                  output={turn.tool === 'done' ? '{ \"on_hand\": 1240, \"lines\": 38, \"below_reorder_point\": 2 }' : undefined}\n                />\n              )}\n              {text === '' ? null : <p>{text}</p>}\n              {turn.approval ? (\n                <ApprovalRequest\n                  title=\"Send this reorder to the supplier?\"\n                  state={approval}\n                  onApprove={() => setApproval('approved')}\n                  onReject={() => setApproval('rejected')}\n                  approveLabel=\"Send reorder\"\n                  rejectLabel=\"Don't send\"\n                >\n                  <p>To: Arad replica supply</p>\n                  <p>10 × K-41 field radio, 8 × trail pack, to Depot 4 by Thursday 22 October.</p>\n                </ApprovalRequest>\n              ) : null}\n            </ChatMessage>\n          )\n        })}\n      </ChatThread>\n      <PromptInput\n        label=\"Message the assistant\"\n        placeholder=\"Ask about stock, orders or depots\"\n        value={draft}\n        onValueChange={setDraft}\n        onSubmit={send}\n        busy={busy}\n        onStop={stop}\n        className=\"p-4 border-t border-[var(--color-border-hairline-strong)]\"\n      />\n    </div>\n  )\n}\n\n<LiveConversation />"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "CheckoutForm",
@@ -9803,7 +10206,8 @@
           "caption": "Three steps, a demo order",
           "source": "const LINES: CartLine[] = [\n  { id: 'kestrel-c', name: 'Kestrel C carbine replica', unitPrice: 13900, quantity: 1 },\n  { id: 'prism-holo-sight', name: 'Prism holo sight', unitPrice: 4900, quantity: 2 },\n  { id: 'beam-600', name: 'Beam 600 rail light', unitPrice: 2400, quantity: 1 },\n]\n\nconst COUNTRIES = [\n  { value: 'ie', label: 'Ireland' },\n  { value: 'ro', label: 'Romania' },\n  { value: 'de', label: 'Germany' },\n  { value: 'fr', label: 'France' },\n  { value: 'es', label: 'Spain' },\n]\n\nconst wait = (ms: number) => new Promise(resolve => window.setTimeout(resolve, ms))\n\n<CheckoutForm lines={LINES} countries={COUNTRIES} onPlaceOrder={() => wait(800).then(() => undefined)} headingLevel={3} />"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "CommandPalette",
@@ -10005,7 +10409,8 @@
           "caption": "Store commands",
           "source": "function StoreCommands() {\n  const [open, setOpen] = useState(false)\n  const [last, setLast] = useState('none')\n  const make = (id: string, label: string, group: string, icon: ReactNode, extra: Partial<Command> = {}): Command => ({\n    id,\n    label,\n    group,\n    icon,\n    onSelect: () => setLast(label),\n    ...extra,\n  })\n  const commands = [\n    make('orders', 'Go to orders', 'Navigate', <Package />, { keywords: ['sales'] }),\n    make('shipments', 'Go to shipments', 'Navigate', <Truck />),\n    make('returns', 'Go to returns', 'Navigate', <Inbox />),\n    make('new-shipment', 'New shipment', 'Create', <Plus />, { shortcut: 'N' }),\n    make('new-product', 'New product', 'Create', <Box />),\n    make('invite', 'Invite a teammate', 'Account', <Users />, { keywords: ['team', 'people'] }),\n    make('settings', 'Open settings', 'Account', <Settings />),\n  ]\n  return (\n    <div className=\"flex flex-wrap items-center gap-3\">\n      <Button variant=\"secondary\" aria-keyshortcuts=\"Control+K Meta+K\" onClick={() => setOpen(true)}>\n        Open command palette\n      </Button>\n      <span aria-hidden=\"true\" className=\"inline-flex gap-1\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>K</Kbd>\n      </span>\n      <p role=\"status\" className=\"font-mono text-xs text-[var(--color-text-secondary)]\">\n        Last command: {last}\n      </p>\n      <CommandPalette commands={commands} open={open} onOpenChange={setOpen} />\n    </div>\n  )\n}\n\n<StoreCommands />"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "DataTable",
@@ -10227,7 +10632,8 @@
           "caption": "Empty",
           "source": "type Status = 'In transit' | 'Delivered' | 'Held'\n\ntype Shipment = { ref: string; destination: string; weight: number; items: number; status: Status }\n\nconst STATUS_TONE: Record<Status, 'info' | 'ok' | 'warning'> = {\n  'In transit': 'info',\n  Delivered: 'ok',\n  Held: 'warning',\n}\n\nconst COLUMNS: DataTableColumn<Shipment>[] = [\n  { key: 'ref', header: 'Reference', cell: s => s.ref, sortValue: s => s.ref },\n  { key: 'destination', header: 'Destination', cell: s => s.destination },\n  { key: 'weight', header: 'Weight (kg)', cell: s => s.weight.toFixed(1), sortValue: s => s.weight, numeric: true },\n  { key: 'items', header: 'Items', cell: s => String(s.items), sortValue: s => s.items, numeric: true },\n  {\n    key: 'status',\n    header: 'Status',\n    cell: s => (\n      <Badge emphasis=\"solid\" tone={STATUS_TONE[s.status]}>\n        {s.status}\n      </Badge>\n    ),\n  },\n]\n\n<DataTable caption=\"Returns\" columns={COLUMNS} rows={[]} getRowId={s => s.ref} rowHeader=\"ref\" emptyMessage=\"No returns yet.\" />"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "Dialog",
@@ -10399,7 +10805,8 @@
           "caption": "Long content",
           "source": "function LongContentExample() {\n  const contentRef = useRef<HTMLDivElement>(null)\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"secondary\">Read shipping terms</Button>\n      </DialogTrigger>\n      <DialogContent\n        ref={contentRef}\n        title=\"Shipping terms\"\n        size=\"lg\"\n        tabIndex={-1}\n        onOpenAutoFocus={event => {\n          event.preventDefault()\n          contentRef.current?.focus()\n        }}\n      >\n        <div className=\"flex flex-col gap-4\">\n          <p>Orders placed before 14:00 local time ship the same day; anything after ships the next business day.</p>\n          <p>Every parcel leaves in double-walled board with corner protection; ask for crate packaging on anything over 30kg.</p>\n          <p>Photograph the box before opening and report damage within 48 hours; we replace or refund, never both.</p>\n          <p>Unopened stock returns within 30 days for a full refund; opened stock returns for store credit only.</p>\n          <p>Depots outside the primary freight lanes add one to three business days and a remote-area surcharge.</p>\n          <p>A single parcel tops out at 40kg; heavier loads split automatically at checkout.</p>\n          <p>Cross-border shipments carry the recipient's own duties and taxes, billed separately by the carrier.</p>\n          <p>Reach the shipping desk at shipping@example.com for anything this page does not answer.</p>\n        </div>\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button>Done</Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\n<LongContentExample />"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "Footer",
@@ -10613,7 +11020,8 @@
           "caption": "With a wordmark and a backdrop: a layer behind the letters, with headroom over them",
           "source": "const STORE_COLUMNS: FooterColumn[] = [\n  {\n    title: 'Shop',\n    links: [\n      { label: 'Replicas', href: '#replicas' },\n      { label: 'Optics', href: '#optics' },\n      { label: 'Parts', href: '#parts' },\n      { label: 'Care', href: '#care' },\n    ],\n  },\n  {\n    title: 'Support',\n    links: [\n      { label: 'Shipping', href: '#shipping' },\n      { label: 'Returns', href: '#returns' },\n      { label: 'Warranty', href: '#warranty' },\n      { label: 'Contact', href: '#contact' },\n    ],\n  },\n  {\n    title: 'Company',\n    links: [\n      { label: 'About', href: '#about' },\n      { label: 'Field notes', href: '#field-notes' },\n      { label: 'Careers', href: '#careers' },\n    ],\n  },\n  {\n    title: 'Elsewhere',\n    links: [\n      { label: 'Site finder', href: 'https://example.com/sites', external: true },\n      { label: 'Field guides', href: 'https://example.com/field-guides', external: true },\n    ],\n  },\n]\n\nconst LEGAL = '© 2026 Hexline. A demo brand for this design system.'\n\nconst BACKDROP = (\n  <div\n    className=\"absolute inset-0\"\n    style={{\n      backgroundImage: 'radial-gradient(var(--color-text-muted) 1px, transparent 1.5px)',\n      backgroundSize: '14px 14px',\n      maskImage: 'linear-gradient(to bottom, transparent, black 70%)',\n    }}\n  />\n)\n\n<Footer label=\"Backdrop footer\" headingLevel={4} columns={STORE_COLUMNS.slice(0, 2)} legal={LEGAL} wordmark=\"Hexline\" backdrop={BACKDROP} />"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "KanbanBoard",
@@ -10864,7 +11272,8 @@
           "caption": "Work orders, with an empty column",
           "source": "type Order = { id: string; title: string; bay: string; status: 'open' | 'parts' | 'done' }\n\nconst ORDER_COLUMNS: KanbanColumn[] = [\n  { id: 'open', title: 'Open' },\n  { id: 'parts', title: 'Waiting for parts' },\n  { id: 'done', title: 'Done' },\n]\n\nconst ORDERS: Order[] = [\n  { id: 'wo-31', title: 'Replace dock door seal', bay: 'Bay 2', status: 'open' },\n  { id: 'wo-32', title: 'Recalibrate floor scale', bay: 'Bay 5', status: 'open' },\n  { id: 'wo-29', title: 'Service pallet jack', bay: 'Bay 1', status: 'done' },\n]\n\nconst orderAccessors = {\n  getItemId: (order: Order) => order.id,\n  getColumnId: (order: Order) => order.status,\n  setColumnId: (order: Order, status: string) => ({ ...order, status: status as Order['status'] }),\n}\n\nfunction WorkOrders() {\n  const [orders, setOrders] = useState(ORDERS)\n  return (\n    <div className=\"w-full min-w-0\">\n      <KanbanBoard\n        label=\"Depot work orders\"\n        columns={ORDER_COLUMNS}\n        items={orders}\n        getItemId={orderAccessors.getItemId}\n        getColumnId={orderAccessors.getColumnId}\n        getItemLabel={order => order.title}\n        renderCard={order => (\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">{order.title}</p>\n            <p className=\"font-mono text-xs uppercase tracking-[0.12em] text-[var(--color-text-secondary)]\">{order.bay}</p>\n          </div>\n        )}\n        onMove={(id, status, index) => setOrders(current => applyKanbanMove(current, id, status, index, orderAccessors))}\n        emptyColumnMessage=\"No orders waiting\"\n        columnHeadingLevel={4}\n      />\n    </div>\n  )\n}\n\n<WorkOrders />"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "Navbar",
@@ -10898,7 +11307,7 @@
         {
           "name": "items",
           "type": "NavbarItem[]",
-          "description": "Required. Each item has label, href and current."
+          "description": "Required. A link is { label, href, current }. A menu among the links is { label, menu, current }: menu lists { label, href, description } entries, opened from a dropdown on a wide bar and listed as a labelled group in the menu sheet on a narrow one."
         },
         {
           "name": "actions",
@@ -10920,7 +11329,13 @@
         {
           "name": "menuFooter",
           "type": "ReactNode",
-          "description": "Shown in the menu sheet under the links. Use it for an action that doesn't fit in actions on a narrow bar. Hide the matching copy in actions below the breakpoint by wrapping it in an element with the classes hidden @2xl:flex."
+          "description": "Shown in the menu sheet under the links. Use it for an action that doesn't fit in actions on a narrow bar. Hide the matching copy in actions below the breakpoint by wrapping it in an element with the classes hidden @2xl:flex (hidden @4xl:flex when collapseBelow is '4xl')."
+        },
+        {
+          "name": "collapseBelow",
+          "type": "'2xl' | '4xl'",
+          "default": "'2xl'",
+          "description": "The bar's own width below which the links fold into the menu sheet: 2xl is 42rem, 4xl is 56rem. Pick the one at which the brand, every link and the actions still fit on one row with room to spare."
         },
         {
           "name": "className",
@@ -10937,7 +11352,7 @@
         {
           "name": "NavbarItem",
           "kind": "type",
-          "code": "export type NavbarItem = { label: string; href: string; current?: boolean }",
+          "code": "export type NavbarItem = NavbarLink | NavbarMenu",
           "from": "src/components/organisms/navbar/Navbar"
         }
       ],
@@ -10998,11 +11413,16 @@
           "caption": "Store navigation",
           "source": "const ITEMS = [\n  { label: 'Replicas', href: '#replicas' },\n  { label: 'Optics', href: '#optics', current: true },\n  { label: 'Parts', href: '#parts' },\n  { label: 'Care', href: '#care' },\n  { label: 'Field notes', href: '#field-notes' },\n]\n\nconst BRAND = (\n  <a\n    href=\"#home\"\n    className=\"inline-flex items-center min-h-10 font-display font-bold uppercase tracking-[0.14em] text-[var(--color-text-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]\"\n  >\n    Hexline\n  </a>\n)\n\nconst ACTIONS = (\n  <>\n    <IconButton label=\"Search\" variant=\"ghost\">\n      <Search aria-hidden=\"true\" className=\"w-5 h-5\" />\n    </IconButton>\n    <IconButton label=\"Cart, 2 items\" variant=\"ghost\" asChild>\n      <a href=\"#cart\">\n        <ShoppingBag aria-hidden=\"true\" className=\"w-5 h-5\" />\n      </a>\n    </IconButton>\n  </>\n)\n\n<Navbar label=\"Store navigation\" brand={BRAND} items={ITEMS} actions={ACTIONS} />"
         },
+        {
+          "caption": "A menu among the links",
+          "source": "const ITEMS = [\n  { label: 'Replicas', href: '#replicas' },\n  { label: 'Optics', href: '#optics', current: true },\n  { label: 'Parts', href: '#parts' },\n  { label: 'Care', href: '#care' },\n  { label: 'Field notes', href: '#field-notes' },\n]\n\nconst BRAND = (\n  <a\n    href=\"#home\"\n    className=\"inline-flex items-center min-h-10 font-display font-bold uppercase tracking-[0.14em] text-[var(--color-text-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]\"\n  >\n    Hexline\n  </a>\n)\n\nconst ACTIONS = (\n  <>\n    <IconButton label=\"Search\" variant=\"ghost\">\n      <Search aria-hidden=\"true\" className=\"w-5 h-5\" />\n    </IconButton>\n    <IconButton label=\"Cart, 2 items\" variant=\"ghost\" asChild>\n      <a href=\"#cart\">\n        <ShoppingBag aria-hidden=\"true\" className=\"w-5 h-5\" />\n      </a>\n    </IconButton>\n  </>\n)\n\n<Navbar\n  label=\"Store navigation with a menu\"\n  brand={BRAND}\n  items={[\n    ...ITEMS.slice(0, 3),\n    {\n      label: 'Guides',\n      menu: [\n        { label: 'Sizing', href: '#sizing', description: 'Fit charts for every replica.' },\n        { label: 'Returns', href: '#returns', description: 'Thirty days, no questions.' },\n      ],\n    },\n  ]}\n  actions={ACTIONS}\n/>"
+        },
         {
           "caption": "A narrow container",
           "source": "const ITEMS = [\n  { label: 'Replicas', href: '#replicas' },\n  { label: 'Optics', href: '#optics', current: true },\n  { label: 'Parts', href: '#parts' },\n  { label: 'Care', href: '#care' },\n  { label: 'Field notes', href: '#field-notes' },\n]\n\nconst BRAND = (\n  <a\n    href=\"#home\"\n    className=\"inline-flex items-center min-h-10 font-display font-bold uppercase tracking-[0.14em] text-[var(--color-text-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]\"\n  >\n    Hexline\n  </a>\n)\n\nconst ACTIONS = (\n  <>\n    <IconButton label=\"Search\" variant=\"ghost\">\n      <Search aria-hidden=\"true\" className=\"w-5 h-5\" />\n    </IconButton>\n    <IconButton label=\"Cart, 2 items\" variant=\"ghost\" asChild>\n      <a href=\"#cart\">\n        <ShoppingBag aria-hidden=\"true\" className=\"w-5 h-5\" />\n      </a>\n    </IconButton>\n  </>\n)\n\n<div className=\"max-w-sm\">\n  <Navbar label=\"Store navigation, narrow\" brand={BRAND} items={ITEMS} actions={ACTIONS} />\n</div>"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "NewsletterForm",
@@ -11154,7 +11574,8 @@
           "caption": "A sign-up that fails",
           "source": "const wait = (ms: number) => new Promise(resolve => window.setTimeout(resolve, ms))\n\nasync function refuse() {\n  await wait(700)\n  throw new Error('The demo server is switched off.')\n}\n\n<div className=\"flex w-full flex-col gap-3\">\n  <p className=\"font-body text-sm text-[var(--color-text-secondary)]\">\n    Demo: this one rejects every address, so you can see the alert, and the address you typed stays in the field.\n  </p>\n  <NewsletterForm\n    label=\"Restock alerts by email\"\n    consent=\"An email when a sold-out replica is back. Nothing else.\"\n    submitLabel=\"Notify me\"\n    busyLabel=\"Signing you up\"\n    onSubmit={refuse}\n    headingLevel={4}\n  />\n</div>"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "ProductCard",
@@ -11328,7 +11749,8 @@
           "caption": "Nothing matches",
           "source": "<ProductGrid label=\"Hexline range, filtered\" products={[]} emptyMessage=\"No products match these filters.\" />"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "Sheet",
@@ -11483,7 +11905,8 @@
           "caption": "From the left",
           "source": "const DEPOTS = ['Brasov north', 'Brasov south', 'Sibiu', 'Cluj', 'Timisoara', 'Oradea']\n\nfunction FromTheLeftExample() {\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"secondary\">Open depot list</Button>\n      </SheetTrigger>\n      <SheetContent side=\"left\" title=\"Depots\">\n        <ul role=\"list\" className=\"flex flex-col gap-2\">\n          {DEPOTS.map(depot => (\n            <li key={depot}>{depot}</li>\n          ))}\n        </ul>\n      </SheetContent>\n    </Sheet>\n  )\n}\n\n<FromTheLeftExample />"
         }
-      ]
+      ],
+      "closed": true
     },
     {
       "name": "Sidebar",
@@ -11616,7 +12039,8 @@
           "caption": "In a sheet on a narrow screen: picking a link closes the sheet, through renderLink",
           "source": "const GROUPS: SidebarGroup[] = [\n  {\n    title: 'Operations',\n    icon: <Warehouse />,\n    items: [\n      { label: 'Overview', href: '#overview', icon: <LayoutDashboard /> },\n      { label: 'Orders', href: '#orders', icon: <Package />, current: true, count: 12 },\n      { label: 'Shipments', href: '#shipments', icon: <Truck /> },\n      { label: 'Returns', href: '#returns', icon: <Inbox />, count: 3 },\n    ],\n  },\n  {\n    title: 'Catalogue',\n    icon: <Boxes />,\n    defaultOpen: false,\n    items: [\n      { label: 'Products', href: '#products', icon: <Box /> },\n      { label: 'Inventory', href: '#inventory', icon: <Map /> },\n    ],\n  },\n  {\n    title: 'Account',\n    icon: <UserCog />,\n    collapsible: false,\n    items: [\n      { label: 'Settings', href: '#settings', icon: <Settings /> },\n      { label: 'Team', href: '#team', icon: <Users /> },\n    ],\n  },\n]\n\nconst HEADER = <p className=\"font-display font-semibold\">Hexline ops</p>\n\nconst FOOTER = <p className=\"text-xs text-[var(--color-text-secondary)]\">Signed in as Ana Pop</p>\n\nconst closeOnChoose = ({ onClick, ...props }: LinkRenderProps) => (\n  <SheetClose asChild type={undefined}>\n    <a {...props} onClick={onClick} />\n  </SheetClose>\n)\n\n<Sheet>\n  <SheetTrigger asChild>\n    <Button variant=\"secondary\">Open navigation</Button>\n  </SheetTrigger>\n  <SheetContent side=\"left\" title=\"Navigation\">\n    <Sidebar\n      label=\"Dashboard navigation, in a sheet\"\n      groups={GROUPS}\n      header={HEADER}\n      footer={FOOTER}\n      renderLink={closeOnChoose}\n    />\n  </SheetContent>\n</Sheet>"
         }
-      ]
+      ],
+      "closed": true
     }
   ]
 }