@nadicodeai/design-system 6.0.1 → 6.1.0

package/DESIGN.md

@@ -309,12 +309,12 @@ Every value a role needs is carried by the role token itself; there is no numeri
 
 - **Action** (`{colors.action}` = ink `#111111`, `{colors.action-foreground}` = white, `{colors.action-hover}`, `{colors.action-active}`): the primary-control family is neutral — a white label on the ink field in light shells, and in dark shells the `dark-action-*` roles, a white control carrying a near-black label. Maximum contrast belongs to the thing that acts. The shadcn `primary` roles map here.
 - **Brand accent — verde** (`{colors.primary}` = deep verde `#007a3c`, white `{colors.on-primary}` text on its field): identity marks, logo contexts, and brand accents. Verde's working duties are exactly the scoped roles below — links, success, and Nadia's presence — and the brighter verde `#00a85a` stays the imagery-tier anchor, never carrying normal-size white text.
-- **Canvas / Line / Input / Cross / Seam** (`{colors.canvas}`, `{colors.line}`, `{colors.input}`, `{colors.cross}`, `{colors.seam}`): white content cells, the universal decorative 1 px divider, the resting-control boundary, the stronger mark/crosshair gray, and the dashed connector guide. `{colors.line}` owns ordinary seams and is deliberately quiet — a decorative hairline, not held to a non-text contrast floor. `{colors.input}` owns fields and other interactive boundaries and clears the 3:1 non-text floor against its canvas. Never darken a decorative border locally to make it behave like a control.
+- **Canvas / Line / Input / Cross / Seam** (`{colors.canvas}`, `{colors.line}`, `{colors.input}`, `{colors.cross}`, `{colors.seam}`): white content cells, the universal decorative 1 px divider, the resting-control boundary, the stronger mark/crosshair gray, and the dashed connector guide. `{colors.line}` owns ordinary seams and is deliberately quiet — a decorative hairline, not held to a non-text contrast floor. `{colors.input}` owns fields and other interactive boundaries and clears the 3:1 non-text floor against its canvas. A labeled filter or search control already identified by readable text and its icon may use the quiet line role for an optional perimeter, configured by its composition owner. Form fields whose boundary identifies the input keep the input role. Focus remains a separate full-contrast state. Never darken a decorative border locally to make it behave like a control.
 - **Body / Muted** (`{colors.body}`, `{colors.muted}`): `{colors.body}` is readable supporting copy and clears AA on canvas; `{colors.muted}` is restricted to disabled, inactive, and placeholder content. Do not use muted text for ordinary descriptions, labels, or help text.
 - **Focus ring** (`{colors.focus-ring}` / `{colors.dark-focus-ring}`): the ink keyboard-focus indicator, a full-opacity `outline` of `{spacing.focus-outline-width}` at `{spacing.focus-outline-offset}` offset, never a box-shadow. Focus is a state of material, so the indicator is the maximum-contrast neutral on each ground rather than a hue; the offset keeps it independent of the resting border, and it clears the 3:1 non-text floor against the adjacent canvas.
 - **Scrim** (`{colors.scrim}` / `{colors.dark-scrim}`): the semantic modal-overlay foreground. Its opacity is the generated material token declared in `Elevation & Depth`; it is never combined with backdrop blur.
 - **Link** (`{colors.link}`, `{colors.link-deep}`, `{colors.link-bg-soft}`): inline links, navigational accents, approved/example proof states, and the green entity-status tone. Green, keeping the Italian signal without turning the interface into flag decoration; `link` and `link-deep` clear AA as text on canvas, and `link-bg-soft` is the tinted green ground for link and tag chrome only: a message or conversation plane is a neutral surface, never a link-tinted one.
-- **Navigation selection** (`{colors.navigation-selection-bg}`, `{colors.navigation-selection-fg}`, `{colors.navigation-selection-hover}`): the selected destination in persistent product navigation, a neutral ink pill. Selection is a place, not a meaning, so it holds by contrast on the neutral spine; cobalto belongs to the semantic info and running roles only. The dark counterparts are tuned independently for the black console. Resting and hover pairs clear AA for text, and the offset focus outline stays visible against both the pill fill and the adjacent canvas.
+- **Navigation selection** (`{colors.navigation-selection-bg}`, `{colors.navigation-selection-fg}`, `{colors.navigation-selection-hover}`): the selected destination in persistent product navigation, a neutral selection field. Selection is a place, not a meaning, so it holds by contrast on the neutral spine; cobalto belongs to the semantic info and running roles only. The dark counterparts are tuned independently for the black console. Resting and hover pairs clear AA for text, and the offset focus outline stays visible against both the selection fill and the adjacent canvas.
 - **Semantic feedback** (`{colors.success}` = verde with `{colors.success-soft}`/`{colors.success-deep}`; `{colors.error}` = rosso funzionale `#d3302f` with `{colors.error-soft}`/`{colors.error-deep}`; `{colors.warning}` = giallo `#ffc220` with `{colors.warning-soft}`/`{colors.warning-deep}`; `{colors.info}` = cobalto `#1e3cff` with `{colors.info-soft}`/`{colors.info-deep}`): validation, caution, approval, and operational feedback. In each pair the `-soft` value is the tinted tag/banner ground and the `-deep` value is the AA-clearing text on it. On a solid `error` fill (the shadcn `destructive` role) text is white; on a solid `warning` or `success` fill text is ink. The success pair intentionally reuses the link pair's AA-safe verde values; its feedback meaning remains distinct from inline navigation and entity-status semantics.
 - **Accent** (`{colors.accent}` = arancio `#ff5a1f`): a small emphasis mark for exception flags and highlights; it appears as a mark, carries no text, and paints no fill or background. The identically-named shadcn surface role is a different thing — a neutral (`{colors.canvas-soft-2}` light, `{colors.dark-canvas-soft-2}` dark) with no hue.
 - **Verde vivo** (`{colors.verde-vivo}` = `#008c45`, dark `{colors.dark-verde-vivo}` = `#62d494`): Nadia's presence accent. It paints the marks that say *Nadia herself is here*, such as the success beat over her silhouette at a threshold (`@nadicodeai/ui/threshold`). It is a mark colour, never a control fill, a text colour, a link, or a status; `action`, `link`, and `success` keep their jobs. It clears the 3:1 non-text floor on `{colors.canvas}` (4.3:1) and `{colors.dark-canvas}` (11.4:1) and carries no text of its own. White on it is 4.34:1, below AA for normal text, so a label never sits on a `verde-vivo` fill; the ring, halo, or portrait sits on it and the words sit on the canvas.
@@ -343,7 +343,7 @@ This achromatic-neutral discipline is not dark-specific: it governs the generate
 
 ### Entity-color assignment
 
-- **Entity-color assignment**: categorical hues (`{colors.chart-1}`…`{colors.chart-6}`) assign in fixed order to entities per page context, and the assignment follows the entity identity, never rank, sort position, or array index. One assignment map exists per surface; a filter or re-sort never repaints the entities that remain on screen. Beyond six entities, fold the tail into a single neutral "other" slot (`{colors.muted}` register), never a seventh hue.
+- **Entity-color assignment**: categorical hues (`{colors.chart-1}`…`{colors.chart-6}`) assign in fixed order to entities per page context, and the assignment follows the entity identity, never rank, sort position, or array index. One assignment map exists per surface: the same entity keeps the same color in a chart and its paired table, whether the chart uses one categorical bar per entity or a time series per entity. A filter or re-sort never repaints the entities that remain on screen. Beyond six entities, fold the tail into a single neutral "other" slot (`{colors.muted}` register), never a seventh hue.
 
 ### Sequential ramp and diverging pair
 
@@ -352,7 +352,21 @@ This achromatic-neutral discipline is not dark-specific: it governs the generate
 
 ### Meter and bullet grammar
 
-- **Meter and bullet grammar**: cap and included-usage bars carry a positional threshold tick at the product-configured warning fraction (80% is the common default; the fraction is a consumer input, never a constant of this contract) and a cap tick at 100%. Overflow renders as a distinct segment continuing past the cap tick, never clamped away. Severity state tokens (`{colors.state-*}`) reinforce position, never act as the sole signal. The current value reads at the bar tip. Every meter carries an accessible name, and its `aria` values clamp to the meter maximum. A meter has two scales. At panel scale the grammar above holds whole. At row scale — a meter inside a list row, shown only once the value is already past the warning rung — it is a warning rather than a gauge: it drops both ticks and the tip value for a percent and a thin bar on one line, because a row cannot encode position legibly and the reader is asking how close the wall is, not how many. The overflow segment and the accessible name survive at both scales; the words a caption would have printed live in that name.
+A meter describes magnitude. The product defines its tone's semantic scope:
+the condition of the measured allowance, for example, or an operational access
+state. Those meanings are not interchangeable. Keep the measure, tone, label,
+and explanation consistent with the chosen scope; a ratio reaching its end
+does not independently establish the state of another capability. The
+foundation does not choose a product's colour thresholds or reinterpret a
+recorded balance as an access guarantee.
+
+At panel scale, show the product-configured threshold and cap ticks. Overflow
+continues past the cap as a distinct segment. At row scale, use a percentage and thin
+bar on one line, omitting ticks and tip labels that cannot read at that size.
+Row scale is comparison geometry, not a warning-only variant. Both scales keep
+an accessible name, the real textual value, and `aria` values bounded to the
+meter maximum. Colour reinforces its defined meaning; it is never the
+only explanation.
 
 ### Mark specs
 
@@ -560,7 +574,7 @@ Corners are restrained and assigned by material role.
 - Use `{rounded.3xl}` (16 px) for resting and raised product content surfaces, detached inspectors, modal dialogs, inset sheets, and takeovers.
 - Use `{rounded.full}` only for intrinsically circular identity/avatar chrome and compact control marks whose geometry is inherently round or pill-shaped. It never turns a content surface, button, badge, or navigation item into a pill by default.
 
-Public page-grammar cells are not cards and remain square because their parent frame supplies the visual system. Product cards use the resting material role; they do not gain a second border, nested ring, or stronger elevation merely because they contain grouped settings.
+Public page-grammar cells are not cards and remain square because their parent frame supplies the visual system. Product cards use the resting material role. A details composition may divide its header and bound individual facts with the outlined role; each edge has one owner and fact cells add no elevation. Grouping does not justify another ring around the same container or a stronger shadow.
 
 ## Motion
 
@@ -591,7 +605,7 @@ A register adds rules. It never redefines a foundation value. A value one regist
 | Register | Rulebook | Its own token families | Dark mode |
 | --- | --- | --- | --- |
 | Website | `apps/website/docs/design-doctrine.md` over `## Layout` here | `register.website.layout`: `section`, `page-*`, `frame-*`, `cell-padding`, `section-gap`, `cross-size-*`, every `h-*` height. It speaks `display-xl`, `display-lg`, and `title-lg` | Light only |
-| Portal | `apps/portal/docs/design-doctrine.md` | `register.portal.density`: `filter-chip-gap`, `filter-chip-height`, `filter-chip-icon` | System, light, dark, on the `.dark` class |
+| Portal | `apps/portal/docs/information-architecture.md` for direction; `apps/portal/docs/design-doctrine.md` for implementation | `register.portal.density`: `filter-chip-gap`, `filter-chip-height`, `filter-chip-icon` | System, light, dark, on the `.dark` class |
 | Nadia desktop app | `apps/nadia/docs/design-doctrine.md` | `register.nadia.*`: colour-role and radius aliases; six deprecated elevation recipes and the legacy overlay border remain as compatibility data. New surfaces consume the foundation's material roles | Follows the operating system, on the `.dark` class |
 
 The website's depth is flat and architectural: hairlines, contrast, dotted fields, diagonal fills, and dark action bands make hierarchy, and the page frame and row grid stay dominant. It uses no rung of the material ladder and no floating card stack as page structure. Marketing bands may use `register.website.layout.section`, emitted as `--nc-section`, when they need the broader inherited hero rhythm. The website uses no negative letter spacing outside the two display tiers.
@@ -608,7 +622,7 @@ Interface CSS components provide small metadata, label, and link chrome. They in
 
 Keyboard focus has one owner: the kit's foundation layer draws the full-opacity `{spacing.focus-outline-width}` `{colors.focus-ring}` / `{colors.dark-focus-ring}` outline at `{spacing.focus-outline-offset}` offset on every `:focus-visible` element. A component never repaints focus with its own ring, hue, or width, and never removes the outline without a contrast-safe equivalent.
 
-**`label-mono`** — mono eyebrow text, identifiers and code, and low-priority metadata. The mono register marks what the machine owns, not what a heading says, so a card, panel, or section title never takes it: titles are sentence-case sans.
+**`label-mono`** — mono eyebrow text, identifiers and code, and low-priority metadata. Use it for opaque identifiers and codes, not computer or Agent display names. Card, panel, and section titles use sentence-case sans.
 
 **`badge-secondary`** — small rounded metadata badge for "New", "Beta", "Live", or similar labels.
 
@@ -678,8 +692,8 @@ chooses the activity and supplies its readable meaning.
 
 This section states the correct form; a complete positive definition is the whole rule.
 
-- Pages are continuous `page-row` sequences inside one `page-frame`; centered content sits in the 10-column `active-lane` with columns 1 and 12 visibly owned — by empty canvas, `side-fill`, guide strips, or component-owned fillers.
-- Every visible line has one owner: ordinary seams are `{spacing.guide}` at `{colors.line}`, tuned only at the token contract; control boundaries are `{colors.input}` / `{colors.dark-input}`; keyboard focus is the dedicated focus-ring roles; crosshairs are `{colors.cross}` at `{spacing.guide}` weight.
+- Website pages are continuous `page-row` sequences inside one `page-frame`; centered content sits in the 10-column `active-lane` with columns 1 and 12 visibly owned — by empty canvas, `side-fill`, guide strips, or component-owned fillers.
+- Every visible line has one owner: ordinary seams are `{spacing.guide}` at `{colors.line}`, tuned only at the token contract; required control boundaries are `{colors.input}` / `{colors.dark-input}`; named collection controls may use the optional-perimeter rule above; keyboard focus is the dedicated focus-ring roles; crosshairs are `{colors.cross}` at `{spacing.guide}` weight.
 - Page structure is architectural: hairlines, luminance, spacing, and the grammar above. One material role per product container; structural page-grammar cells are border-only; the four `nc-elevation-*` rungs are the complete shadow vocabulary; modal scrims stay unblurred.
 - Typography uses fixed token sizes stepped by breakpoint; components take their default heights from the exported height tokens and grow only when real content requires it.
 - Agent identity visuals identify an Agent or its explicit type; conversations, artifacts, review states, and work output belong to assistant-ui and the agentic work surfaces. Text beside `{colors.verde-vivo}` sits on the canvas.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "6.0.1",
+  "version": "6.1.0",
   "type": "module",
   "publishConfig": {
     "access": "public"