division-ds 0.3.0 → 0.4.0

package/public/manifest/tokens.json

@@ -430,9 +430,12 @@
       "layer": "semantic",
       "value": {
         "dark": "#0d1016",
-        "light": "#c2cddc"
+        "light": "#e3e8ef"
       },
-      "use": "The opaque fill of a control you type or pick in (Input, Textarea, Select), and of small opaque surfaces: Kbd, Tag, Tooltip, menus, toasts. Not a card."
+      "use": "The opaque fill of a control you type or pick in (Input, Textarea, Select), and of small opaque surfaces: Kbd, Tag, Tooltip, menus, toasts. Not a card.",
+      "measured": {
+        "light": "neutral.50 mixed 31% of the way to neutral.100 in OKLab (#e3e8ef with the default preset), so the base-to-sunken step is OKLCH ΔL 0.038, the same step as the dark theme (#07080b to #0d1016, ΔL 0.038). neutral.100 alone sat ΔL 0.122 below base and made every field a heavy grey slab; the ramp has no stop in between. A mix of two ramp stops, not a literal, so a Theme Builder preset re-tints it."
+      }
     },
     {
       "name": "--color-surface-raised",
@@ -488,7 +491,7 @@
       "use": "The boundary of an interactive control at rest (Input, Select, secondary Button). The one border that has to be seen to find the control.",
       "measured": {
         "dark": "3.53:1 on surface.sunken (the control fill it is painted on) and 3.71:1 on surface.base — the INFORMATIONAL hairline, the one SC 1.4.11 governs. Opaque rather than alpha so the boundary holds whatever surface it lands on.",
-        "light": "3.49:1 on surface.sunken (the control fill it is painted on) and 5.10:1 on surface.base — the INFORMATIONAL hairline, the one SC 1.4.11 governs. Opaque rather than alpha so the boundary holds whatever surface it lands on."
+        "light": "4.56:1 on surface.sunken (the control fill it is painted on) and 5.10:1 on surface.base — the INFORMATIONAL hairline, the one SC 1.4.11 governs. Opaque rather than alpha so the boundary holds whatever surface it lands on."
       }
     },
     {
@@ -501,7 +504,7 @@
       "use": "The boundary of the small selection controls at rest: Checkbox, Radio, Switch track.",
       "measured": {
         "dark": "The boundary of the small selection controls (Checkbox, Radio, Switch track) at rest. 6.12:1 on surface.sunken. Brighter than border.control (3.53:1) on purpose: a 20px box drawn with the same hairline as a 320px input carries a fraction of the edge length, and at 3.53:1 an unchecked checkbox all but vanished on the dark page. border.control stays the hairline for the large fields.",
-        "light": "The boundary of the small selection controls (Checkbox, Radio, Switch track) at rest. Same value as border.control in this theme (3.49:1 on surface.sunken), which reads clearly on a light page; the token exists in both themes because dark needed its own brighter step."
+        "light": "The boundary of the small selection controls (Checkbox, Radio, Switch track) at rest. Same value as border.control in this theme (4.56:1 on surface.sunken), which reads clearly on a light page; the token exists in both themes because dark needed its own brighter step."
       }
     },
     {
@@ -544,7 +547,7 @@
       "use": "Placeholder text inside a control, on surface.sunken. Only there.",
       "measured": {
         "dark": "4.68:1 on surface.sunken, which is the control fill placeholder text is actually painted on. text.muted is gated against surface.base and passes there at 4.59:1, but reaches only 4.37:1 on the sunken fill — so placeholder needs its own step.",
-        "light": "7.83:1 on surface.sunken, the control fill it is painted on. Light theme needs no separate step from text.muted — unlike dark, where muted reaches only 4.37:1 there — but the name exists in both themes so the component layer has one alias to point at."
+        "light": "10.23:1 on surface.sunken, the control fill it is painted on. Light theme needs no separate step from text.muted — unlike dark, where muted reaches only 4.37:1 there — but the name exists in both themes so the component layer has one alias to point at."
       }
     },
     {
@@ -775,7 +778,7 @@
       "use": "Text or an icon that marks something as made by AI: the AiLabel mark, the AI glyph in a field an AI filled. Always beside a word, never colour alone.",
       "measured": {
         "dark": "Measured by the gate: 9.55:1 on surface.base, 9.08:1 on surface.sunken, 8.32:1 on surface.raised. One step lighter than accent.info.text (info.500) so AI marks and status text do not read as the same thing.",
-        "light": "Measured by the gate: 8.39:1 on surface.base, 5.75:1 on surface.sunken, 8.92:1 on surface.raised. info.700 reached only 3.49:1 on surface.sunken, so the light theme takes info.800."
+        "light": "Measured by the gate: 8.39:1 on surface.base, 7.50:1 on surface.sunken, 8.92:1 on surface.raised. info.700 reached only 3.49:1 on the earlier, darker surface.sunken (neutral.100), so the light theme takes info.800."
       }
     },
     {
@@ -788,7 +791,7 @@
       "use": "The boundary of a form field whose value an AI filled and the person has not changed. Input and Textarea paint it from aiValue; do not paint it by hand.",
       "measured": {
         "dark": "The edge of a field an AI filled. 7.91:1 on the AI-filled field (ai.wash over the control fill), far above the 3:1 SC 1.4.11 floor. Same stop as ai.text; a separate token because a boundary and text carry different floors.",
-        "light": "The edge of a field an AI filled. 5.24:1 on the AI-filled field (ai.wash over surface.sunken). Same stop as ai.text; a separate token because a boundary and text carry different floors."
+        "light": "The edge of a field an AI filled. 6.72:1 on the AI-filled field (ai.wash over surface.sunken). Same stop as ai.text; a separate token because a boundary and text carry different floors."
       }
     },
     {

package/scripts/lib/agent-docs.mjs

@@ -53,7 +53,7 @@ export function searchIndex(entries, tokens) {
 }
 
 /** 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.'
+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. An install has no index barrels: import each component from its own file, never from `components/molecules`.'
 
 /** One component as a markdown page. `entry` is a manifest entry (see `manifestEntry`). */
 export function componentMarkdown(entry) {

package/scripts/lib/props-validator.mjs

@@ -156,7 +156,14 @@ export function buildIndex(manifest) {
     const single = exportNames.length === 1
     for (const name of exportNames) {
       const spec = specs[name]
-      spec.checkUnknown = single && !unresolved && spec.rest?.open !== 'any'
+      // On a page that documents several components, the rows with no part tag are the main
+      // component's own. The main one is checked too when nothing passes through undocumented:
+      // its type is closed (manifest `closed`), or its only pass-through is native attributes,
+      // which the check already allows. Its parts stay unchecked: their rows list only what
+      // differs from the main component.
+      const main = name === entry.name && (entry.closed === true || spec.rest?.open === 'native')
+      spec.checkUnknown = (single || main) && !unresolved && spec.rest?.open !== 'any'
+      spec.namedByFormField = (entry.namedByFormField ?? []).includes(name)
       index.set(name, spec)
     }
   }
@@ -228,7 +235,7 @@ export function scriptKind(path) {
 
 /**
  * Every props violation in one file: `{ path, line, column, rule, component, prop, found, fix }`.
- * `rule` is 'unknown-prop' or 'invalid-value'. `index` comes from `buildIndex`.
+ * `rule` is 'unknown-prop', 'invalid-value' or 'missing-label' (a control FormField names, with no label and no FormField around it). `index` comes from `buildIndex`.
  */
 export function findPropViolations(text, path, index) {
   const source = ts.createSourceFile(path, text, ts.ScriptTarget.Latest, true, scriptKind(path))
@@ -254,11 +261,38 @@ export function findPropViolations(text, path, index) {
     return undefined
   }
 
+  // Inside a Division FormField, which names the control it holds.
+  const insideFormField = element => {
+    for (let node = element.parent; node; node = node.parent) {
+      const opening = ts.isJsxElement(node) ? node.openingElement : ts.isJsxSelfClosingElement(node) ? node : null
+      if (opening && opening !== element && resolve(opening.tagName) === 'FormField') return true
+    }
+    return false
+  }
+
   const check = element => {
     const exportName = resolve(element.tagName)
     const spec = exportName && index.get(exportName)
     if (!spec) return
     const tag = element.tagName.getText(source)
+    const attributes = element.attributes.properties
+    if (
+      spec.namedByFormField &&
+      !attributes.some(a => ts.isJsxSpreadAttribute(a) || a.name.getText(source) === 'label') &&
+      !insideFormField(element)
+    ) {
+      const at = source.getLineAndCharacterOfPosition(element.getStart(source))
+      violations.push({
+        path,
+        line: at.line + 1,
+        column: at.character + 1,
+        rule: 'missing-label',
+        component: tag,
+        prop: 'label',
+        found: `<${tag}>`,
+        fix: `${tag} has no name: give it a label, or put it in a FormField, which names it. See ${spec.docs}.`,
+      })
+    }
     const known = [...spec.props.keys()]
     for (const attribute of element.attributes.properties) {
       if (!ts.isJsxAttribute(attribute)) continue

package/skills/division-ds/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: division-ds
-description: Use when building or changing UI with Division DS (React 19, Tailwind 4, Radix; 72 components). Covers which component and token to use, the composition rules prop types cannot express (providers, FormField, button gaps, card borders), planning a screen's states, and how to check the result. Load it before writing any screen or component in a project that has Division DS components.
+description: Use when building or changing UI with Division DS (React 19, Tailwind 4, Radix; 74 components). Covers which component and token to use, the composition rules prop types cannot express (providers, FormField, button gaps, card borders), planning a screen's states, and how to check the result. Load it before writing any screen or component in a project that has Division DS components.
 ---
 
 # Division DS