division-ds 0.2.0 → 0.2.1

package/public/docs/components/search.md

@@ -13,6 +13,8 @@
 import { Search } from 'src/components/molecules/search/Search'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Props
 
 | Prop | Type | Default | Description |

package/public/docs/components/section-heading.md

@@ -13,6 +13,8 @@
 import { SectionHeading } from 'src/components/molecules/section-heading/SectionHeading'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Props
 
 | Prop | Type | Default | Description |

package/public/docs/components/segmented-control.md

@@ -13,6 +13,8 @@
 import { SegmentedControl } from 'src/components/molecules/segmented-control/SegmentedControl'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Props
 
 | Prop | Type | Default | Description |

package/public/docs/components/select.md

@@ -13,6 +13,8 @@
 import { Select } from 'src/components/atoms/select/Select'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Requires
 
 - A <FormField> around it. On its own the control has no label. FormField supplies the label, the help text and the error, and connects their ids so assistive tech (screen readers and similar tools) reads them together.
@@ -216,7 +218,7 @@ const TERRAIN_OPTIONS = [
 - **Trigger**: Uses exactly the same frame and styling as Input, so a select and a text field line up in a form.
 - **Value**: Shows the placeholder until something’s chosen.
 - **Content**: Portalled and positioned by Radix, the library of accessible building blocks this sits on. It slides down out of the trigger as it opens (M7; Radix’s Select closes at once, with no exit animation). It’s the one atom that carries the corner crosshair, because it’s a surface framing other content, and that’s what the crosshair marks. It’s also the shape that can’t be cut, since clip-path would clip the crosshair’s arms and the last row’s selection fill along with them.
-- **Item**: Highlighted rows use signal.fill with signal.ink. That’s the fill-selection grammar, the system’s rule for how a selection looks.
+- **Item**: Highlighted rows use accent.signal.indicator with accent.signal.indicator-ink. That’s the fill-selection grammar, the system’s rule for how a selection looks.
 - **ItemIndicator**: A tick on the selected row, so selection isn’t shown by the highlight alone.
 - **Item icon**: Optional. Sits before the label and is aria-hidden, an ARIA (Accessible Rich Internet Applications) attribute that hides it from assistive tech. It follows the row colour, so it turns ink on the highlight. It isn’t shown in the trigger.
 - **Group label**: Used with groups: a mono (monospaced font) heading over its rows that names the group for screen readers. It can’t be selected. A hairline separates the groups.

package/public/docs/components/sheet.md

@@ -13,6 +13,8 @@
 import { Sheet, SheetClose, SheetContent, SheetTrigger } from 'src/components/organisms/sheet/Sheet'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Props
 
 | Prop | Type | Default | Description |

package/public/docs/components/sidebar.md

@@ -13,6 +13,8 @@
 import { Sidebar } from 'src/components/organisms/sidebar/Sidebar'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Props
 
 | Prop | Type | Default | Description |

package/public/docs/components/skeleton.md

@@ -13,6 +13,8 @@
 import { Skeleton, SkeletonGroup } from 'src/components/atoms/skeleton/Skeleton'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Props
 
 | Prop | Type | Default | Description |

package/public/docs/components/slider.md

@@ -13,6 +13,8 @@
 import { Slider } from 'src/components/atoms/slider/Slider'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Props
 
 | Prop | Type | Default | Description |
@@ -108,5 +110,5 @@ function SingleValueLive() {
 
 - **Label and readout**: An 11px (pixel) mono label, in a monospaced font, and a 24px Oxanium readout with tabular figures, digits that all take the same width. Unlike Progress, there are no dimmed leading zeros. min and max belong to the caller and formatValue can return anything, so a fixed digit width would be one the value doesn’t actually have.
 - **Track**: 4px tall, sunken, no border.
-- **Range**: The filled span, in signal.fill.
+- **Range**: The filled span, in accent.signal.indicator.
 - **Thumb**: A 20px square inside a 24px hit area, the region that responds to a click or tap. There’s one per value.

package/public/docs/components/sparkline.md

@@ -13,6 +13,8 @@
 import { Sparkline } from 'src/components/atoms/sparkline/Sparkline'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Props
 
 | Prop | Type | Default | Description |

package/public/docs/components/spinner.md

@@ -13,6 +13,8 @@
 import { Spinner, spinnerVariants } from 'src/components/atoms/spinner/Spinner'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Props
 
 | Prop | Type | Default | Description |
@@ -32,7 +34,7 @@ Exported beside the component, from the same file. Import a type with `import ty
 export const spinnerVariants = cva(
   // The arc takes `currentColor`, so a caller can recolour it with one text utility: Button does
   // exactly that, so the arc matches whatever ink the button label is set in.
-  'inline-block shrink-0 text-[var(--color-accent-signal-fill)]',
+  'inline-block shrink-0 text-[var(--color-accent-signal-indicator)]',
   {
     variants: {
       size: { sm: 'w-3.5 h-3.5', md: 'w-5 h-5', lg: 'w-6 h-6' },
@@ -91,6 +93,6 @@ Not focusable. No keyboard behaviour of its own.
 ## Anatomy
 
 - **span**: The root. It gets role="status" only when it's labelled.
-- **Ring (ring)**: An SVG (Scalable Vector Graphics) track at 20% of currentColor, which is the surrounding text colour, plus an arc in currentColor. That's accent.signal.fill by default.
+- **Ring (ring)**: An SVG (Scalable Vector Graphics) track at 20% of currentColor, which is the surrounding text colour, plus an arc in currentColor. That's accent.signal.indicator by default.
 - **Blocks (conveyor)**: Three block glyphs, from full to half shade, running over a ten-cell track in border.control.
 - **sr-only label**: The text a screen reader announces. sr-only means it's hidden on screen but still read aloud. It's only there when label is passed.

package/public/docs/components/stat.md

@@ -13,6 +13,8 @@
 import { Stat } from 'src/components/molecules/stat/Stat'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Props
 
 | Prop | Type | Default | Description |

package/public/docs/components/status-tracker.md

@@ -13,6 +13,8 @@
 import { StatusTracker, statusTrackerText } from 'src/components/molecules/status-tracker/StatusTracker'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Requires
 
 - The root TooltipProvider (AppShell and DemoLayout mount it).

package/public/docs/components/stepper.md

@@ -13,6 +13,8 @@
 import { Stepper } from 'src/components/molecules/stepper/Stepper'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Props
 
 | Prop | Type | Default | Description |

package/public/docs/components/switch.md

@@ -13,6 +13,8 @@
 import { Switch } from 'src/components/atoms/switch/Switch'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Requires
 
 - Its own label. A Switch isn't a FormField child (FormField takes Input, Textarea, Select or QuantityStepper). Give it an id and put a <label htmlFor> beside it.
@@ -147,5 +149,5 @@ FormField passes its child an invalid prop, and Switch doesn't take one. A switc
 ## Anatomy
 
 - **Root**: role=switch, which tells screen readers (software that reads the page aloud) what it is. A 44×24 track.
-- **Thumb**: A 16px (pixel) square, 3px from the track edge in both states, travelling 22px. Its position is the state signal. It's text.primary when off and accent.signal.fill when on. Held down, it stretches 4px away from the edge it rests on: to the right when off, to the left when on, so it never leaves the track. Flipped, it speeds up across the track, gets a little longer in flight and a little shorter against the far edge, then goes back to its own shape. One give, no bounce.
-- **Track fill**: The control fill, on and off. When it's on, only the border turns to signal.fill. The track doesn't fill with the accent, so the thumb is the one thing that changes colour during a flip.
+- **Thumb**: A 16px (pixel) square, 3px from the track edge in both states, travelling 22px. Its position is the state signal. It's text.primary when off and accent.signal.indicator when on. Held down, it stretches 4px away from the edge it rests on: to the right when off, to the left when on, so it never leaves the track. Flipped, it speeds up across the track, gets a little longer in flight and a little shorter against the far edge, then goes back to its own shape. One give, no bounce.
+- **Track fill**: The control fill, on and off. When it's on, only the border turns to accent.signal.indicator. The track doesn't fill with the accent, so the thumb is the one thing that changes colour during a flip.

package/public/docs/components/tabs.md

@@ -13,6 +13,8 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from 'src/components/molecules/tabs/Tabs'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Props
 
 | Prop | Type | Default | Description |

package/public/docs/components/tag.md

@@ -13,6 +13,8 @@
 import { Tag } from 'src/components/atoms/tag/Tag'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Props
 
 | Prop | Type | Default | Description |

package/public/docs/components/textarea.md

@@ -13,6 +13,8 @@
 import { Textarea, textareaVariants } from 'src/components/atoms/textarea/Textarea'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Requires
 
 - A <FormField> around it. On its own the control has no label. FormField supplies the label, the help text and the error, and links up their ids.

package/public/docs/components/timeline.md

@@ -13,6 +13,8 @@
 import { Timeline, TimelineGroup, TimelineItem } from 'src/components/molecules/timeline/Timeline'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Props
 
 | Prop | Type | Default | Description |

package/public/docs/components/toast.md

@@ -13,6 +13,8 @@
 import { Toaster, useToast } from 'src/components/molecules/toast/Toast'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Requires
 
 - One <Toaster> near the root of the app, wrapped around everything that calls useToast(). AppShell and the demo layout each mount one. Outside it, useToast() throws an error.

package/public/docs/components/tool-call.md

@@ -13,6 +13,8 @@
 import { ToolCall } from 'src/components/molecules/tool-call/ToolCall'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Props
 
 | Prop | Type | Default | Description |

package/public/docs/components/tooltip.md

@@ -13,6 +13,8 @@
 import { Tooltip, TooltipProvider } from 'src/components/atoms/tooltip/Tooltip'
 ```
 
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
 ## Requires
 
 - One <TooltipProvider> near the root of the app. AppShell and the demo layout each mount one, so a screen doesn't add its own.

package/public/manifest/components.json

@@ -1537,7 +1537,7 @@
           "name": "tone",
           "type": "'signal' | 'ok' | 'warning' | 'hostile'",
           "default": "'signal'",
-          "description": "The fill colour. signal paints accent.signal.fill 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.15:1 contrast ratio, below the 3:1 a bar needs when it’s the only sign of progress. So set showValue there."
         },
         {
           "name": "className",
@@ -1738,7 +1738,7 @@
         }
       ],
       "dos": [
-        "Name the group with aria-label or a FormField legend.",
+        "Name the group: in a form, a fieldset legend that the RadioGroup points at with aria-labelledby; elsewhere, aria-label.",
         "Offer a default when one option really is the norm.",
         "Keep the set short. Past about seven options, use a Select."
       ],
@@ -1747,6 +1747,13 @@
         "Don't put a radio outside a RadioGroup. Both the roving focus and the value come from the group.",
         "Don't make choosing an option perform the action. Put a button after the group."
       ],
+      "pitfalls": [
+        {
+          "wrong": "<FormField label=\"Difficulty\" error={error}>\n  <RadioGroup>\n    <Radio value=\"easy\" />\n  </RadioGroup>\n</FormField>",
+          "right": "<fieldset aria-describedby={error ? 'difficulty-error' : undefined}>\n  <legend id=\"difficulty-label\" className=\"font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-[var(--color-text-primary)]\">\n    Difficulty\n  </legend>\n  <RadioGroup aria-labelledby=\"difficulty-label\" aria-required=\"true\" value={value} onValueChange={setValue} className=\"mt-2\">\n    {['easy', 'moderate', 'hard'].map(option => (\n      <div key={option} className=\"flex items-center gap-2\">\n        <Radio id={`difficulty-${option}`} value={option} invalid={Boolean(error)} />\n        <label htmlFor={`difficulty-${option}`} className=\"font-body text-sm\">{option}</label>\n      </div>\n    ))}\n  </RadioGroup>\n  {error ? (\n    <p id=\"difficulty-error\" className=\"mt-1.5 font-body text-sm text-[var(--color-accent-hostile-text)]\">{error}</p>\n  ) : null}\n</fieldset>",
+          "why": "FormField clones one control and gives it an id and a label; a group of radios has neither. The fieldset and legend name the group, the label styles match FormField, and the error is linked through aria-describedby. Give ErrorSummary the id of the first Radio so its link lands in the group."
+        }
+      ],
       "anatomy": [
         {
           "part": "RadioGroup",
@@ -2114,7 +2121,7 @@
         },
         {
           "part": "Item",
-          "description": "Highlighted rows use signal.fill with signal.ink. That’s the fill-selection grammar, the system’s rule for how a selection looks."
+          "description": "Highlighted rows use accent.signal.indicator with accent.signal.indicator-ink. That’s the fill-selection grammar, the system’s rule for how a selection looks."
         },
         {
           "part": "ItemIndicator",
@@ -2446,7 +2453,7 @@
         },
         {
           "part": "Range",
-          "description": "The filled span, in signal.fill."
+          "description": "The filled span, in accent.signal.indicator."
         },
         {
           "part": "Thumb",
@@ -2669,7 +2676,7 @@
         {
           "name": "spinnerVariants",
           "kind": "const",
-          "code": "export const spinnerVariants = cva(\n  // The arc takes `currentColor`, so a caller can recolour it with one text utility: Button does\n  // exactly that, so the arc matches whatever ink the button label is set in.\n  'inline-block shrink-0 text-[var(--color-accent-signal-fill)]',\n  {\n    variants: {\n      size: { sm: 'w-3.5 h-3.5', md: 'w-5 h-5', lg: 'w-6 h-6' },\n    },\n    defaultVariants: { size: 'md' },\n  }\n)",
+          "code": "export const spinnerVariants = cva(\n  // The arc takes `currentColor`, so a caller can recolour it with one text utility: Button does\n  // exactly that, so the arc matches whatever ink the button label is set in.\n  'inline-block shrink-0 text-[var(--color-accent-signal-indicator)]',\n  {\n    variants: {\n      size: { sm: 'w-3.5 h-3.5', md: 'w-5 h-5', lg: 'w-6 h-6' },\n    },\n    defaultVariants: { size: 'md' },\n  }\n)",
           "from": "src/components/atoms/spinner/Spinner"
         }
       ],
@@ -2692,7 +2699,7 @@
         },
         {
           "part": "Ring (ring)",
-          "description": "An SVG (Scalable Vector Graphics) track at 20% of currentColor, which is the surrounding text colour, plus an arc in currentColor. That's accent.signal.fill by default."
+          "description": "An SVG (Scalable Vector Graphics) track at 20% of currentColor, which is the surrounding text colour, plus an arc in currentColor. That's accent.signal.indicator by default."
         },
         {
           "part": "Blocks (conveyor)",
@@ -2843,11 +2850,11 @@
         },
         {
           "part": "Thumb",
-          "description": "A 16px (pixel) square, 3px from the track edge in both states, travelling 22px. Its position is the state signal. It's text.primary when off and accent.signal.fill when on. Held down, it stretches 4px away from the edge it rests on: to the right when off, to the left when on, so it never leaves the track. Flipped, it speeds up across the track, gets a little longer in flight and a little shorter against the far edge, then goes back to its own shape. One give, no bounce."
+          "description": "A 16px (pixel) square, 3px from the track edge in both states, travelling 22px. Its position is the state signal. It's text.primary when off and accent.signal.indicator when on. Held down, it stretches 4px away from the edge it rests on: to the right when off, to the left when on, so it never leaves the track. Flipped, it speeds up across the track, gets a little longer in flight and a little shorter against the far edge, then goes back to its own shape. One give, no bounce."
         },
         {
           "part": "Track fill",
-          "description": "The control fill, on and off. When it's on, only the border turns to signal.fill. The track doesn't fill with the accent, so the thumb is the one thing that changes colour during a flip."
+          "description": "The control fill, on and off. When it's on, only the border turns to accent.signal.indicator. The track doesn't fill with the accent, so the thumb is the one thing that changes colour during a flip."
         }
       ],
       "examples": [
@@ -4917,7 +4924,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."
+          "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."
         },
         {
           "name": "className",

package/public/manifest/tokens.json

@@ -564,7 +564,11 @@
       "name": "--color-accent-signal-fill",
       "layer": "semantic",
       "value": "#f2550f",
-      "use": "A solid block in the brand orange: the primary Button, a solid signal Badge. Put accent.signal.ink on it, never text.primary."
+      "use": "A solid block in the brand colour, exactly as chosen: the primary Button, IconButton, a solid signal Badge. Put accent.signal.ink on it, never text.primary. Never use it as the only sign of a state; use accent.signal.indicator.",
+      "measured": {
+        "dark": "The brand colour, exactly as chosen: Button, IconButton and solid Badge backgrounds, and brand decoration. Text on it is accent.signal.ink. Never the only sign of a state; that is accent.signal.indicator. The theme builder never moves it.",
+        "light": "The brand colour, exactly as chosen: Button, IconButton and solid Badge backgrounds, and brand decoration. Text on it is accent.signal.ink. Never the only sign of a state; that is accent.signal.indicator. The theme builder never moves it."
+      }
     },
     {
       "name": "--color-accent-signal-text",
@@ -585,7 +589,28 @@
       "value": "#0a0602",
       "use": "Text and icons on accent.signal.fill.",
       "measured": {
-        "dark": "5.85:1 on accent.signal.fill"
+        "dark": "5.85:1 on accent.signal.fill",
+        "light": "5.85:1 on accent.signal.fill"
+      }
+    },
+    {
+      "name": "--color-accent-signal-indicator",
+      "layer": "semantic",
+      "value": "#f2550f",
+      "use": "The accent where colour alone shows a state or value: a checked control, Switch on, Progress, Slider, Rating stars, the current item in Sidebar, Navbar, Tabs, SegmentedControl, Stepper and highlighted menu rows. Put accent.signal.indicator-ink on it.",
+      "measured": {
+        "dark": "The accent where colour alone marks a state or a value: checked controls, Switch on, Progress, Slider, Rating stars, the current item of Sidebar, Navbar, Tabs, SegmentedControl, Stepper and highlighted menu rows, and the hero numerals. 5.80:1 on surface.base. Same stop as accent.signal.fill here; the theme builder moves it to a nearby stop when a chosen accent is too pale or too dark to reach 3:1, and leaves accent.signal.fill alone.",
+        "light": "The accent where colour alone marks a state or a value: checked controls, Switch on, Progress, Slider, Rating stars, the current item of Sidebar, Navbar, Tabs, SegmentedControl, Stepper and highlighted menu rows, and the hero numerals. 3.14:1 on surface.base. Same stop as accent.signal.fill here; the theme builder moves it to a nearby stop when a chosen accent is too pale or too dark to reach 3:1, and leaves accent.signal.fill alone."
+      }
+    },
+    {
+      "name": "--color-accent-signal-indicator-ink",
+      "layer": "semantic",
+      "value": "#0a0602",
+      "use": "Text and icons on accent.signal.indicator.",
+      "measured": {
+        "dark": "Text and icons on accent.signal.indicator. 5.85:1. The theme builder picks white or this dark ink, whichever reaches 4.5:1.",
+        "light": "Text and icons on accent.signal.indicator. 5.85:1. The theme builder picks white or this dark ink, whichever reaches 4.5:1."
       }
     },
     {
@@ -595,7 +620,7 @@
       "use": "The faint orange hover wash under a nav item or an inactive tab.",
       "measured": {
         "dark": "Hover wash under a nav item or an inactive tab. Text on it is text.primary and gated. The focus ring and a checked control's fill drop under 3:1 on it in light theme, so neither is ever drawn on it.",
-        "light": "Hover wash under a nav item or an inactive tab. Text on it is text.primary and gated. The focus ring and a checked control's fill drop under 3:1 on it in light theme, so neither is ever drawn on it."
+        "light": "Hover wash under a nav item or an inactive tab. Text on it is text.primary and gated. A checked control's indicator drops under 3:1 on it in light theme and the focus ring is not gated on it, so neither is ever drawn on it."
       }
     },
     {
@@ -782,8 +807,14 @@
     {
       "name": "--color-focus-ring",
       "layer": "semantic",
-      "value": "#f2550f",
-      "use": "The keyboard focus outline. Use it only in focus-visible:outline-[var(--color-focus-ring)], with a 2px outline and a 2px offset."
+      "value": {
+        "dark": "#f2550f",
+        "light": "#c6440b"
+      },
+      "use": "The keyboard focus outline. Use it only in focus-visible:outline-[var(--color-focus-ring)], with a 2px outline and a 2px offset.",
+      "measured": {
+        "light": "4.51:1 on surface.base. A step darker than accent.signal.fill, which reaches only 3.14:1 on the light page: the ring is the one mark every keyboard user depends on, so it gets a margin."
+      }
     },
     {
       "name": "--color-chart-series-1",

package/scripts/division-ds.mjs

@@ -19,7 +19,7 @@
 import { existsSync, globSync, readdirSync, readFileSync, statSync } from 'node:fs'
 import { dirname, join, relative, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
-import { extractRules } from './lib/agent-docs.mjs'
+import { DOCS_SITE, extractRules, SKILL_SOURCE } from './lib/agent-docs.mjs'
 import { checkText } from './lib/check-text.mjs'
 import { createServer } from './lib/mcp-server.mjs'
 import { createTools } from './lib/mcp-tools.mjs'
@@ -28,14 +28,14 @@ import { applyPlan, diff, planRules, planSkill, SKILL_TARGETS, TARGETS } from '.
 
 const ROOT = join(dirname(fileURLToPath(import.meta.url)), '..')
 const DEFAULT_MANIFEST = join(ROOT, 'public/manifest/components.json')
-const CHECKED = /\.(tsx|jsx|ts)$/
+const CHECKED = /\.(tsx|jsx|ts|css)$/
 const SKIPPED_DIRS = new Set(['node_modules', '.git', 'dist', 'build', '.next', 'coverage'])
 
 const HELP = `division-ds: Division DS gates and agent rules for a project that uses the components.
 
 Usage:
   division-ds check [paths...] [--manifest <path|url>] [--tokens <path|url>] [--json]
-      Checks .tsx, .jsx and .ts files (default: ./src). A path may be a file, a directory or a
+      Checks .tsx, .jsx, .ts and .css files (default: ./src; a .css file gets the colour gate only). A path may be a file, a directory or a
       glob ("src/**/*.tsx"). Runs five gates and exits 1 on any finding:
         token-discipline   raw colours, Tailwind palette classes, token names that do not exist
         button-spacing     two Buttons/IconButtons side by side with no gap on their parent
@@ -149,12 +149,12 @@ async function check(options) {
       if (gate === 'button-spacing') console.error(`      ${ofGate[0].fix}`)
       console.error('')
     }
-    console.error('Each component\'s props, values and examples: /docs/components/<slug>.md. Tokens: public/manifest/tokens.json.')
+    console.error(`Each component's props, values and examples: ${DOCS_SITE}docs/components/<slug>.md. Tokens: ${DOCS_SITE}llms-tokens.txt.`)
   } else {
     console.log(`division-ds check passed: ${files.length} file(s), ${index.size} components, ${tokenNames.length} tokens, 0 findings.`)
     // It reads code, not the running page: say so, or a pass reads as "the screen works" (the
     // 2026-10-20 outside test shipped three runtime bugs past a clean check).
-    console.log('Checked: colours, tokens, button spacing, inline host cards, props and AI copy. Not checked: how the screen behaves; run the review checklist (commands/review.md) in a browser.')
+    console.log(`Checked: colours, tokens, button spacing, inline host cards, props and AI copy. Not checked: how the screen behaves; run the review checklist in a browser (commands/review.md from \`npx division-ds skill\`, or ${SKILL_SOURCE}commands/review.md).`)
   }
   process.exit(findings.length > 0 ? 1 : 0)
 }

package/scripts/lib/agent-docs.mjs

@@ -8,6 +8,8 @@ const TIER_NOUN = { atoms: 'Atom', molecules: 'Molecule', organisms: 'Organism'
 export const DOCS_SITE = 'https://victor-ilioiu.vercel.app/systems/division-ds/'
 /** Where shadcn downloads the components from: public/r/ in the public GitHub repository. */
 export const REGISTRY = 'https://raw.githubusercontent.com/Victor-Ilioiu/division-ds/main/public/r'
+/** The skill's files in the public repository, for a reader who has the package but not the skill. */
+export const SKILL_SOURCE = 'https://github.com/Victor-Ilioiu/division-ds/blob/main/skills/division-ds/'
 
 /** A table cell: one line, with the pipes that would end the cell escaped. */
 const cell = text => String(text ?? '').replace(/\s*\n\s*/g, ' ').replace(/\|/g, '\\|')
@@ -19,14 +21,29 @@ export function importLines(entry) {
   return entry.imports.map(({ names, from }) => `import { ${names.join(', ')} } from '${from}'`).join('\n')
 }
 
+/** The other components a page documents, by export name: ChatMessage's ResponseFeedback,
+ *  ProductCard's ProductGrid. Parts named after the component (CardBody, RadioGroup) and helpers
+ *  (lower case) are left out. The 2026-10-29 outside test could not find ResponseFeedback because
+ *  only its parent was listed anywhere an agent looks first. */
+export function alsoExports(entry) {
+  return entry.imports
+    .flatMap(({ names }) => names)
+    .filter(name => /^[A-Z][a-z]/.test(name) && !name.startsWith(entry.name) && !name.endsWith('Provider'))
+}
+
+/** Said under every Import block: the paths are the repository's, not an installed project's. */
+export const INSTALLED_PATHS = 'Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.'
+
 /** One component as a markdown page. `entry` is a manifest entry (see `manifestEntry`). */
 export function componentMarkdown(entry) {
   const out = [`# ${entry.name}`, '', `> ${entry.summary}`, '']
   out.push(`- **Best for:** ${entry.useWhen}`, `- **Not for:** ${entry.notFor}`)
+  const also = alsoExports(entry)
+  if (also.length) out.push(`- **Also on this page:** ${also.map(code).join(', ')}`)
   out.push(`- ${TIER_NOUN[entry.tier]}. Source: \`${entry.source}\``)
   out.push(`- Rendered docs page: \`/components/${entry.slug}\``, '')
 
-  out.push('## Import', '', fence(importLines(entry)), '')
+  out.push('## Import', '', fence(importLines(entry)), '', INSTALLED_PATHS, '')
 
   if (entry.requires?.length) {
     out.push('## Requires', '', ...entry.requires.map(item => `- ${item}`), '')
@@ -108,8 +125,10 @@ const byTier = entries =>
 export const firstSentence = text => text.match(/^.*?[.!?](?=\s|$)/)?.[0] ?? text
 
 /** One component's line in llms.txt: what it is, then best for and not for. */
-export const indexLine = entry =>
-  `- [${entry.name}](${entry.docs.replace(/^\//, '')}): ${firstSentence(entry.summary)} Best for: ${entry.useWhen} Not for: ${entry.notFor}`
+export const indexLine = entry => {
+  const also = alsoExports(entry)
+  return `- [${entry.name}](${entry.docs.replace(/^\//, '')}): ${firstSentence(entry.summary)} Best for: ${entry.useWhen} Not for: ${entry.notFor}${also.length ? ` Also: ${also.join(', ')}.` : ''}`
+}
 
 /** llms.txt, in the llmstxt.org shape: a title, a summary, then sections of links. */
 export function llmsIndex(entries, { rules }) {
@@ -245,7 +264,10 @@ export function designFile(entries, manifest, { fonts, rules }) {
   ]
   for (const [tier, group] of byTier(entries)) {
     out.push(`## ${tier[0].toUpperCase()}${tier.slice(1)}`, '')
-    for (const entry of group) out.push(`- [${entry.name}](${entry.docs.replace(/^\//, '')}): ${firstSentence(entry.summary)}`)
+    for (const entry of group) {
+      const also = alsoExports(entry)
+      out.push(`- [${entry.name}](${entry.docs.replace(/^\//, '')}): ${firstSentence(entry.summary)}${also.length ? ` Also: ${also.join(', ')}.` : ''}`)
+    }
     out.push('')
   }
   out.push('## Rules', '', 'In full: [llms-guidelines.txt](llms-guidelines.txt).', '', ...ruleHeadlines(rules).map(line => `- ${line}`), '')
@@ -462,7 +484,7 @@ const SKILL_COMMANDS = {
     body: [
       'Go through every line. A line that does not hold is a change to make, not a note to leave.',
       '',
-      '- [ ] **States.** Every region has its empty, loading, error, success and disabled or no-permission state, as planned in `commands/build.md`. An empty list says what is empty and offers the action that fills it.',
+      '- [ ] **States.** Every region has its empty, loading, error, success and disabled or no-permission state, as planned before the code (the regions-and-states plan of `commands/build.md`). An empty list says what is empty and offers the action that fills it.',
       '- [ ] **Headings.** One `PageHeader`, so one `h1`. Section headings continue the outline: `h2` under the `h1`, `h3` inside an `h2`, no level skipped. `SectionHeading` is given the level.',
       '- [ ] **Tokens only.** No hex, `rgb()`, palette class or invented token name. `division-ds check` passes.',
       '- [ ] **Buttons.** Two or more side by side share a parent with a gap. One primary button per view. A busy button takes `loading`; a disabled one says why nearby. Icon-only actions are `IconButton` with a `label`.',
@@ -557,7 +579,7 @@ export function skillFiles(split, componentCount) {
       '',
       // A project that installed the components has no public/ folder of ours (the 2026-10-20
       // outside test followed these steps to files that did not exist).
-      `Paths starting \`public/\` are in the Division DS repository. In a project that uses the components, read them online: \`public/llms.txt\` is \`${DOCS_SITE}llms.txt\`, and so on.`,
+      `Paths starting \`public/\` are in the Division DS repository. In a project that uses the components, read them online: \`public/llms.txt\` is \`${DOCS_SITE}llms.txt\`, and so on. The other procedures named here (\`commands/build.md\` and the rest) are in the skill: \`${SKILL_SOURCE}commands/<name>.md\`, or \`npx division-ds skill\` to install them.`,
       '',
       ...command.body,
       '',

package/scripts/lib/ai-copy.mjs

@@ -16,7 +16,9 @@
 // - `assistant-copy`: "answer", "please" or "!" in the interface text of the assistant components
 //   (ChatThread, ChatMessage, PromptInput, ApprovalRequest, ToolCall): their label-like string
 //   props only. Message bodies, a ToolCall's input and output and PromptInput's suggestions are
-//   content written by the person or the model, not the interface, and are never read.
+//   content written by the person or the model, not the interface, and are never read. A button
+//   placed inside one of them (a Button in ChatMessage's `actions`) is its interface too: its label
+//   and aria-label are checked the same way (missed by the 2026-10-29 outside test's probe).
 // Only literals are read (a string attribute, JSX text, a ternary of two literals). A variable is
 // not judged, the same as the props gate.
 import ts from 'typescript'
@@ -63,11 +65,22 @@ export function findAiCopyViolations(text, path) {
     const at = source.getLineAndCharacterOfPosition(node.getStart(source))
     violations.push({ path, line: at.line + 1, column: at.character + 1, rule, found, fix })
   }
+  // How many assistant components the walk is inside: a button in there speaks for the assistant.
+  let insideAssistant = 0
   const checkCta = (node, value, where) => {
     if (AI_WORD.test(value)) add(node, 'ai-in-cta', `${where}: "${value.trim()}"`, AI_FIX)
+    if (insideAssistant > 0) {
+      for (const word of ASSISTANT_WORDS) {
+        if (word.pattern.test(value)) add(node, 'assistant-copy', `${where} in an assistant component: "${value.trim()}"`, word.fix)
+      }
+    }
   }
+  const tagOf = node =>
+    ts.isJsxElement(node) ? node.openingElement.tagName.getText(source) : ts.isJsxSelfClosingElement(node) ? node.tagName.getText(source) : undefined
 
   const visit = node => {
+    const opensAssistant = tagOf(node) in ASSISTANT_COPY
+    if (opensAssistant) insideAssistant++
     if (ts.isJsxSelfClosingElement(node) || ts.isJsxOpeningElement(node)) {
       const tag = node.tagName.getText(source)
       for (const attribute of node.attributes.properties) {
@@ -96,6 +109,7 @@ export function findAiCopyViolations(text, path) {
       if (label.trim()) checkCta(node, label, `<${tag}> label`)
     }
     ts.forEachChild(node, visit)
+    if (opensAssistant) insideAssistant--
   }
   visit(source)
   return violations.sort((a, b) => a.line - b.line || a.column - b.column)

package/scripts/lib/check-text.mjs

@@ -10,10 +10,23 @@ import { findViolations as tokenDiscipline, formatViolation as formatTokenDiscip
 export const BUTTON_SPACING_FIX =
   'Wrap the buttons in one parent with a flex/grid class and a gap- utility (flex flex-wrap items-center gap-3), and move any margin from the buttons onto it.'
 
+/** A stylesheet with the value of every declaration of a real token blanked, newlines kept so line
+ *  numbers hold. Setting a token is how a project themes the system (the theme builder writes
+ *  exactly that into index.css), so a literal colour there is the point; anywhere else in the file,
+ *  or on a custom property the system does not have, it is reported as in any other file. */
+export function blankTokenOverrides(text, tokenNames) {
+  const known = new Set(tokenNames)
+  return text.replace(/(--[a-z0-9-]+)(\s*:)([^;}]*)/g, (match, name, colon, value) =>
+    // The var() references stay, so a token set from a name that does not exist is still caught.
+    known.has(name) ? name + colon + value.replace(/var\([^)]*\)|[^\n]/g, part => (part.length > 1 ? part : ' ')) : match
+  )
+}
+
 /** Every finding in `text`. `path` decides which gates apply (button spacing and AI copy need JSX) and is
  *  echoed into each finding. `index` is buildIndex(manifest); `tokenNames` the token names. */
 export function checkText(text, path, index, tokenNames) {
   const findings = []
+  if (/\.css$/.test(path)) text = blankTokenOverrides(text, tokenNames)
   for (const v of tokenDiscipline(text, path, tokenNames)) {
     findings.push({ gate: 'token-discipline', path, line: v.line, rule: v.rule, found: v.found, fix: v.fix, text: formatTokenDiscipline(v) })
   }

package/scripts/lib/mcp-server.mjs

@@ -12,7 +12,8 @@ export const PROTOCOL_VERSIONS = ['2025-11-25', '2025-06-18', '2025-03-26', '202
 
 const INSTRUCTIONS = `Division DS: a React 19, Tailwind 4 and Radix design system.
 Before writing a component, call get_component for its props and examples. Use only tokens from get_tokens or search, as var(--name).
-Before saying a screen is done, call validate_code on each file you wrote and fix every finding, then go through get_review_checklist.`
+Before saying a screen is done, call validate_code on each file you wrote (.css too) and fix every finding, then go through get_review_checklist.
+Shared helpers (theme toggle, form errors, money, links): https://victor-ilioiu.vercel.app/systems/division-ds/docs/helpers.md`
 
 /** A JSON-RPC error reply. */
 const failure = (id, code, message) => ({ jsonrpc: '2.0', id, error: { code, message } })