@nadicodeai/design-system 0.5.0 → 0.5.2

package/AGENTS.md

@@ -41,7 +41,7 @@ Generated-artifact and runtime-JS prohibitions live in the Forbidden Patterns ta
 | --- | --- | --- | --- |
 | Design token, contract, or token-pipeline change | `DESIGN.md`, `scripts/sd/config.ts`, `scripts/sd/transforms.ts`, `scripts/sd/format-token-layer.ts`, `scripts/sd/format-tailwind-v4-theme.ts` | `npm exec -- design.md spec`, `scripts/build.ts`, `tests/token-structural-parity.test.ts`, `tests/consumer-css-discipline.test.ts`, `tests/tailwind-v4-theme.test.ts` | `npm run lint:design && npm run build && npm run test` |
 | Kernel geometry or component work | `DESIGN.md` Layout and Components | `src/css/index.css`, `src/css/layout.css`, `src/css/primitives.css`, `src/css/components/*.css`, `src/css/motion.css`, `tests/kernel-css-architecture.test.ts`, `tests/kernel-rendered-geometry.test.ts` | from design-system/: `npx vitest run tests/kernel-css-architecture.test.ts tests/kernel-rendered-geometry.test.ts` |
-| CSS component or `examples/` specimen work | `DESIGN.md` Layout and Components | `src/css/components/`, `examples/`, `../skills/nadicodeai-brand-copy/SKILL.md`, `../skills/nadicodeai-brand-copy/references/brand-voice-profile.md`, `../skills/nadicodeai-brand-copy/references/voice-examples.md`, `../skills/nadicodeai-brand-copy/references/anti-slop-patterns.md` | `npm run test -- tests/examples-package-coherence.test.ts` |
+| CSS component or `examples/` specimen work | `DESIGN.md` Layout and Components | `src/css/components/`, `examples/`, `../skills/nadicodeai-brand-copy/SKILL.md`, `../skills/nadicodeai-brand-copy/references/writing-craft.md`, `../skills/nadicodeai-brand-copy/references/brand-voice-profile.md`, `../skills/nadicodeai-brand-copy/references/voice-examples.md` | `npm run test -- tests/examples-package-coherence.test.ts` |
 | Package consumption or export surface | `README.md` | `package.json`, `scripts/build.ts`, `dist/tailwind/`, `dist/tokens/` | `npm run build && npm run test -- tests/build-produces-exports.test.ts tests/tailwind-v4-theme.test.ts` |
 
 ## DESIGN.md Authoring

package/DESIGN.md

@@ -128,15 +128,19 @@ colors:
   dark-cyan-soft: "#7ee8de"
   dark-cyan-deep: "#1f9e9a"
   dark-success: "#62d494"
-  dark-state-ready: "#d4d4d4"
-  dark-state-running: "#a9befa"
-  dark-state-review: "#ffd97d"
-  dark-state-blocked: "#f7b3b5"
-  dark-state-complete: "#62d494"
+  dark-state-ready: "#8f8f8f"
+  dark-state-running: "#4f6ae6"
+  dark-state-review: "#f5a623"
+  dark-state-blocked: "#cd212a"
+  dark-state-complete: "#008c45"
   dark-selection-bg: "#ededed"
   dark-selection-fg: "#0a0a0a"
   dark-cross: "#6e6e6e"
   dark-chart-1: "#7d99f2"
+  dark-chart-2: "#17b568"
+  dark-chart-3: "#ffd97d"
+  dark-chart-4: "#f28085"
+  dark-chart-5: "#33d1cb"
   dark-chart-6: "#9575cd"
 
 typography:
@@ -256,6 +260,7 @@ rounded:
 
 spacing:
   xxs: 4px
+  filter-chip-gap: 6px
   xs: 8px
   sm: 12px
   md: 16px
@@ -312,6 +317,8 @@ spacing:
   h-bento-mobile-copy: 248px
   h-bento-mobile-main: 537px
   h-bento-strip: 20px
+  filter-chip-height: 28px
+  filter-chip-icon: 14px
 
 components:
   label-mono:
@@ -348,6 +355,13 @@ components:
     typography: "{typography.caption}"
     rounded: "{rounded.full}"
     padding: "0px {spacing.xs}"
+  filter-chip:
+    backgroundColor: "{colors.canvas-soft}"
+    textColor: "{colors.body}"
+    typography: "{typography.caption}"
+    rounded: "{rounded.sm}"
+    padding: "0px {spacing.xs}"
+    height: "{spacing.filter-chip-height}"
   state-tag-ready:
     backgroundColor: "{colors.canvas}"
     textColor: "{colors.ink}"
@@ -479,12 +493,12 @@ Backgrounds are `{colors.background-100}` (page default, white) and `{colors.bac
 - **Semantic feedback** (`{colors.success}`, `{colors.error}` + `{colors.error-soft}`/`{colors.error-deep}`, `{colors.warning}` + `{colors.warning-soft}`/`{colors.warning-deep}`, `{colors.info}`): validation, caution, approval, and operational feedback. `success` uses `green-italia-700`; `error` uses `red-italia-800` with soft/deep on `red-italia-200`/`red-italia-900`; `warning` uses `amber-600` with soft/deep on `amber-200`/`amber-900`; `info` (`blue-cobalto-700`) is the new informational role.
 - **Accent** (`{colors.accent}` = `red-italia-700`): UI highlights, badges, and selected markers. Flag red is now an active accent — the former "decoration-only" restriction on flag red is retired. Do not conflate this functional Italia `accent` with the identically-named shadcn surface role `accent`: the latter is a neutral (mapped to `{colors.canvas-soft-2}` in light and `{colors.dark-canvas-soft-2}` in dark) and carries no flag-red hue despite the shared word.
 - **Flag Red** (`{colors.flag-red}`): kept as a stable alias at the same value as `{colors.accent}` (`red-italia-700`, `#cd212a`). `accent` and `flag-red` are two roles at one hex: `accent` is the interface-highlight role, `flag-red` is the identity-mark alias. `error` (`red-italia-800`) stays a distinct, deeper red; never use it as an accent.
-- **Workflow States** (`{colors.state-ready}`, `{colors.state-running}`, `{colors.state-review}`, `{colors.state-blocked}`, `{colors.state-complete}`): the left-border/state vocabulary for agentic work surfaces. `state-running` is now `blue-cobalto-700` and `state-complete` is `green-italia-700` — blue means in motion, green means done; `state-ready` moves to `gray-900`. The dark counterparts (`{colors.dark-state-ready}`, `{colors.dark-state-running}`, `{colors.dark-state-review}`, `{colors.dark-state-blocked}`, `{colors.dark-state-complete}`) ride the same Italia scales moved to lighter steps for the dark console — ready ink-neutral (`gray` step `#d4d4d4`), running a light `blue-cobalto` (blue = in motion), review `amber-400`, blocked `red-italia-400`, complete `green-italia-500` — carried on the `state-tag` 3 px `border-left`, each clearing 4.5:1 on the dark canvas for its label.
+- **Workflow States** (`{colors.state-ready}`, `{colors.state-running}`, `{colors.state-review}`, `{colors.state-blocked}`, `{colors.state-complete}`): the left-border/state vocabulary for agentic work surfaces. `state-running` is `blue-cobalto-700` and `state-complete` is `green-italia-700` — blue means in motion, green means done; `state-ready` is `gray-900`. The dark counterparts (`{colors.dark-state-ready}`, `{colors.dark-state-running}`, `{colors.dark-state-review}`, `{colors.dark-state-blocked}`, `{colors.dark-state-complete}`) preserve the same functional identity instead of shifting to pastel labels: ready uses `gray-700`, running uses `blue-cobalto-600`, review reuses `amber-600`, blocked uses `red-italia-700`, and complete reuses `green-italia-700`. These state colors are carried only by the `state-tag` 3 px `border-left` rail and related non-text state accents; label text stays on the neutral foreground roles for contrast in both light and dark.
 
 ### Chart categoricals (functional tier)
 
-- **Charts** (`{colors.chart-1}`…`{colors.chart-6}`): the categorical series palette — cobalto, verde, ambra, rosso, plus a functional-only teal and viola. Functional only: never place chart colours on marketing surfaces, campi, or generated imagery. On the dark canvas the deep cobalto and viola drop below the 3:1 WCAG 1.4.11 floor for data marks, so they carry dark-tuned steps (`{colors.dark-chart-1}` on `blue-cobalto-500`, `{colors.dark-chart-6}` a lighter viola); the four mid/high-luminance series (verde, ambra, rosso, teal) already clear 3:1 and stay saturated in both modes.
-- **Categorical distinguishability**: the same-family neighbours are held apart — `chart-3`/`chart-4` (ambra/rosso) and `chart-2`/`chart-5` (verde/teal) each clear a CIEDE2000 ≥ 20 normal / ≥ 15 deuteranopia-simulated floor. Two proximities are brand-locked and exempt from the numeric floor: `chart-2`/`chart-4` (verde/rosso, the flag pair, which collapses under red-green deficiency by identity) and `chart-1`/`chart-6` (cobalto/viola, adjacent blue-violet). Charts using the full six must carry redundant encoding (direct labels, position, or pattern), never hue alone, so these two pairs stay readable under colour-vision deficiency.
+- **Charts** (`{colors.chart-1}`…`{colors.chart-6}`): the categorical series palette — cobalto, verde, ambra, rosso, plus a functional-only teal and viola. Functional only: never place chart colours on marketing surfaces, campi, or generated imagery. On the dark canvas all six series carry dark-tuned steps, remapped in the `.dark` scope so any consumer reading the semantic token gets the right hue in both modes: `{colors.dark-chart-1}` on `blue-cobalto-500`, `{colors.dark-chart-2}` on `green-italia-600`, `{colors.dark-chart-3}` on `amber-400`, `{colors.dark-chart-4}` on `red-italia-500`, `{colors.dark-chart-5}` on the `dark-cyan` value, `{colors.dark-chart-6}` a lighter viola. Clearing the 3:1 WCAG 1.4.11 data-mark floor is necessary but not sufficient on the near-black canvas: the full-saturation light hues read as loud saturated blocks there, so each dark step lightens or desaturates its hue while keeping series identity, and all six clear 3:1 against `{colors.dark-canvas}`. Verde takes the one-step move to `green-italia-600` (not the mint `green-italia-500`) so the verde/teal separation survives in normal vision.
+- **Categorical distinguishability**: the same-family neighbours are held apart — `chart-3`/`chart-4` (ambra/rosso) and `chart-2`/`chart-5` (verde/teal) each clear a CIEDE2000 ≥ 20 normal / ≥ 15 deuteranopia-simulated floor, in the light set and in the dark-tuned set alike. Two proximities are brand-locked and exempt from the numeric floor: `chart-2`/`chart-4` (verde/rosso, the flag pair, which collapses under red-green deficiency by identity) and `chart-1`/`chart-6` (cobalto/viola, adjacent blue-violet). Charts using the full six must carry redundant encoding (direct labels, position, or pattern), never hue alone, so these two pairs stay readable under colour-vision deficiency.
 
 ### Brand tier — i campi
 
@@ -503,9 +517,9 @@ Four campo rules govern their use:
 
 ### Dark primitives
 
-**Dark Primitives** (`{colors.dark-canvas}`, `{colors.dark-ink}`, `{colors.dark-line}`, and siblings) are the source tokens for the generated shadcn `.dark` role map — mode-bearing primitives, not a separate palette; consuming apps opt in by applying a `.dark` ancestor through their runtime theme provider. The dark neutrals (`dark-canvas`, `dark-canvas-soft`, `dark-canvas-soft-2`, `dark-ink`, `dark-body`, `dark-muted`, `dark-line`, `dark-input`, `dark-seam`, `dark-primary`, `dark-on-primary`) are true neutrals: each is a pure gray (equal channels) so the interface carries no ambient tint, and they step in clear elevation planes (`dark-canvas` → `dark-canvas-soft` → `dark-canvas-soft-2`). `dark-input` is the resting text-input boundary, held one gray brighter than the decorative `dark-line` border so a field edge clears non-text contrast before the focus ring appears. Chroma lives only in the intentional accents: the dark semantic ramps ride the same Italia scales as their light counterparts, moved to lighter steps so each pair clears 4.5:1 on the dark surfaces — `dark-link`/`dark-link-deep` on `green-italia-400`/`green-italia-300`, `dark-error`/`dark-error-deep` on `red-italia-400`/`red-italia-300`, `dark-warning`/`dark-warning-deep` on `amber-400`/`amber-300`, with the `*-soft` tinted grounds on each scale's `1000` step, plus `dark-success` on `green-italia-500` for the positive-feedback green and the `dark-state-*` workflow family on their matching Italia scale steps. The remaining dark-ramp members stay true-neutral: `dark-selection-bg`/`dark-selection-fg` invert the light selection (a bright neutral ground with dark text) and `dark-cross` is the visible mark gray, brighter than the decorative `dark-line`. Never reintroduce hue into the neutral set.
+**Dark Primitives** (`{colors.dark-canvas}`, `{colors.dark-ink}`, `{colors.dark-line}`, and siblings) are the source tokens for the generated shadcn `.dark` role map — mode-bearing primitives, not a separate palette; consuming apps opt in by applying a `.dark` ancestor through their runtime theme provider. The dark neutrals (`dark-canvas`, `dark-canvas-soft`, `dark-canvas-soft-2`, `dark-ink`, `dark-body`, `dark-muted`, `dark-line`, `dark-input`, `dark-seam`, `dark-primary`, `dark-on-primary`) are true neutrals: each is a pure gray (equal channels) so the interface carries no ambient tint, and they step in clear elevation planes (`dark-canvas` → `dark-canvas-soft` → `dark-canvas-soft-2`). `dark-input` is the resting text-input boundary, held one gray brighter than the decorative `dark-line` border so a field edge clears non-text contrast before the focus ring appears. Chroma lives only in the intentional accents: the dark semantic ramps ride the same Italia scales as their light counterparts, moved to lighter steps where they are text-bearing — `dark-link`/`dark-link-deep` on `green-italia-400`/`green-italia-300`, `dark-error`/`dark-error-deep` on `red-italia-400`/`red-italia-300`, `dark-warning`/`dark-warning-deep` on `amber-400`/`amber-300`, with the `*-soft` tinted grounds on each scale's `1000` step, plus `dark-success` on `green-italia-500` for the positive-feedback green. The `dark-state-*` workflow family is not a text role; it preserves the matching ready/running/review/blocked/complete rail colors for 3 px state accents while text stays on neutral foreground roles. The remaining dark-ramp members stay true-neutral: `dark-selection-bg`/`dark-selection-fg` invert the light selection (a bright neutral ground with dark text) and `dark-cross` is the visible mark gray, brighter than the decorative `dark-line`. Never reintroduce hue into the neutral set.
 
-This grayscale-only discipline is not dark-specific: it governs the whole generated shadcn surface-role bridge in both the light `:root` and dark `.dark` maps. The surface-role family — `background`, `card`, `popover`, `muted`, `secondary`, the `sidebar` roles and their `-foreground`/`-border` variants, plus `border` and `input` — resolves only to pure grays (equal channels) in both themes; hue in the role bridge is reserved for `primary`, `destructive`, and the focus rings (`ring`/`sidebar-ring`). Large product surfaces never take a tinted fill.
+This grayscale-only discipline is not dark-specific: it governs the whole generated shadcn surface-role bridge in both the light `:root` and dark `.dark` maps. The surface-role family — `background`, `card`, `popover`, `muted`, `secondary`, the `sidebar` roles and their `-foreground`/`-border` variants, plus `border` and `input` — resolves only to pure grays (equal channels) in both themes; hue in the role bridge is reserved for `primary`, `destructive`, and the focus rings (`ring`/`sidebar-ring`). In dark product shells, `background`, `card`, `popover`, and `sidebar` share `{colors.dark-canvas}` so page chrome, cards, tables, overlays, and nav rails read as one black console. `muted`, `secondary`, and `accent` retain the `dark-canvas-soft` steps for small interaction states such as hover, selected rows, keycaps, and inline controls. Large product surfaces never take a tinted or soft-panel fill by default.
 
 Do not delete a color because the current website kernel does not consume it. Prototype usage is not palette authority; removals require an explicit palette migration decision.
 
@@ -515,25 +529,25 @@ Geist Sans carries all narrative and interface copy. Geist Mono is reserved for
 
 All body, title, caption, and code typography uses `letterSpacing: 0px`. Do not use viewport-scaled type (no `vw`/`vh` font sizing): use fixed token sizes stepped by breakpoint-specific rules when a headline must grow. The two large display tiers carry a small negative tracking — `display-xl` at `-1.5px` and `display-lg` at `-1px` — so large type reads optically tight; this is a display-heading-only exception and every non-display tier stays at `0px`.
 
-| Token | Size | Weight | Line Height | Use |
-| --- | --- | --- | --- | --- |
-| `{typography.display-xl}` | 72px | 600 | 74px | Large desktop homepage hero only. |
-| `{typography.display-lg}` | 52px | 600 | 54px | Compact hero and major landing headlines. |
-| `{typography.display-md}` | 24px | 600 | 32px | Recovered display tier for compact cards, pricing names, and asset labels. |
-| `{typography.display-sm}` | 20px | 600 | 28px | Recovered small display tier for inline display micro-headings. |
-| `{typography.title-lg}` | 40px | 600 | 41px | Kernel specimen headings and major section headings. |
-| `{typography.title-md}` | 30px | 600 | 32px | Standard section title. |
-| `{typography.title-sm}` | 22px | 600 | 25px | Cell and artifact titles. |
-| `{typography.body-lg}` | 18px | 400 | 27px | Hero/lead paragraphs. |
-| `{typography.body-md}` | 16px | 400 | 25px | Default body copy. |
-| `{typography.body-md-strong}` | 16px | 500 | 24px | Emphasised body copy at the default size. |
-| `{typography.body-sm}` | 14px | 400 | 20px | Secondary copy, nav, compact cell copy. |
-| `{typography.body-sm-strong}` | 14px | 500 | 20px | Emphasised secondary copy and compact labels. |
-| `{typography.caption}` | 12px | 400 | 16px | Footer secondary lines and badge labels. |
-| `{typography.caption-mono}` | 12px | 500 | 16px | Eyebrows, labels, status tags. |
-| `{typography.code}` | 13px | 400 | 20px | Tool calls, snippets, traces. |
-| `{typography.button-lg}` | 16px | 500 | 24px | Marketing-scale button labels. |
-| `{typography.button-md}` | 14px | 500 | 18px | Standard button and control labels. |
+| Token                         | Size | Weight | Line Height | Use                                                                        |
+| ----------------------------- | ---- | ------ | ----------- | -------------------------------------------------------------------------- |
+| `{typography.display-xl}`     | 72px | 600    | 74px        | Large desktop homepage hero only.                                          |
+| `{typography.display-lg}`     | 52px | 600    | 54px        | Compact hero and major landing headlines.                                  |
+| `{typography.display-md}`     | 24px | 600    | 32px        | Recovered display tier for compact cards, pricing names, and asset labels. |
+| `{typography.display-sm}`     | 20px | 600    | 28px        | Recovered small display tier for inline display micro-headings.            |
+| `{typography.title-lg}`       | 40px | 600    | 41px        | Kernel specimen headings and major section headings.                       |
+| `{typography.title-md}`       | 30px | 600    | 32px        | Standard section title.                                                    |
+| `{typography.title-sm}`       | 22px | 600    | 25px        | Cell and artifact titles.                                                  |
+| `{typography.body-lg}`        | 18px | 400    | 27px        | Hero/lead paragraphs.                                                      |
+| `{typography.body-md}`        | 16px | 400    | 25px        | Default body copy.                                                         |
+| `{typography.body-md-strong}` | 16px | 500    | 24px        | Emphasised body copy at the default size.                                  |
+| `{typography.body-sm}`        | 14px | 400    | 20px        | Secondary copy, nav, compact cell copy.                                    |
+| `{typography.body-sm-strong}` | 14px | 500    | 20px        | Emphasised secondary copy and compact labels.                              |
+| `{typography.caption}`        | 12px | 400    | 16px        | Footer secondary lines and badge labels.                                   |
+| `{typography.caption-mono}`   | 12px | 500    | 16px        | Eyebrows, labels, status tags.                                             |
+| `{typography.code}`           | 13px | 400    | 20px        | Tool calls, snippets, traces.                                              |
+| `{typography.button-lg}`      | 16px | 500    | 24px        | Marketing-scale button labels.                                             |
+| `{typography.button-md}`      | 14px | 500    | 18px        | Standard button and control labels.                                        |
 
 ## Layout
 
@@ -648,6 +662,8 @@ Interactive CSS components must expose a visible `:focus-visible` state using th
 
 **`badge-secondary`** — small rounded metadata badge for "New", "Beta", "Live", or similar labels.
 
+**`filter-chip`** — removable selected-filter label. Neutral chrome only: `{colors.line}` border, muted/background fill, foreground text, compact radius, and an inline remove icon with a visible `:focus-visible` ring. It names the active facet/value pair and clears that facet; it does not carry lifecycle, workflow, product-tier, or feature-state color. Use this for table/search filters after a shadcn `Select`, `Popover`, or command filter is applied.
+
 **`link-inline`** — inline body link. Uses `{colors.link}` and normal body rhythm.
 
 ### Content Surfaces

package/README.md

@@ -11,7 +11,7 @@ For Tailwind CSS v4 CSS-first projects, `npm run build` also emits `dist/tailwin
 @import "@nadicodeai/design-system/tailwind/theme.css";
 ```
 
-The CSS adapter provides shadcn-compatible semantic utilities such as `bg-background`, `text-foreground`, `bg-primary`, `text-primary-foreground`, `border-border`, and `ring-ring`. It publishes both `:root` light roles and `.dark` dark roles; consuming apps opt into dark mode by applying a `.dark` ancestor, normally through their own theme provider. NadicodeAI-specific spacing utilities are namespaced, for example `p-nadicode-lg` and `h-nadicode-h-cell-sm`, so standard Tailwind/shadcn classes such as `max-w-3xl` keep their normal Tailwind behavior. React consumers normally get this through `@nadicodeai/ui/globals.css`.
+The CSS adapter provides shadcn-compatible semantic utilities such as `bg-background`, `text-foreground`, `bg-primary`, `text-primary-foreground`, `border-border`, and `ring-ring`. It publishes both `:root` light roles and `.dark` dark roles; consuming apps opt into dark mode by applying a `.dark` ancestor, normally through their own theme provider. The raw `--nc-*` brand-token remaps (the state, selection, cross, and chart families) are the one exception: they are emitted at `:root.dark`, so they flip only when the `dark` class sits on the root element itself (the next-themes `attribute="class"` default), not on an inner wrapper. NadicodeAI-specific spacing utilities are namespaced, for example `p-nadicode-lg` and `h-nadicode-h-cell-sm`, so standard Tailwind/shadcn classes such as `max-w-3xl` keep their normal Tailwind behavior. React consumers normally get this through `@nadicodeai/ui/globals.css`.
 
 Geist and Geist Mono (SIL Open Font License 1.1) ship inside the package under `src/assets/fonts/`. Consumers can pull the `@font-face` shim directly:
 

package/dist/css/components/state-tag.css

@@ -36,7 +36,7 @@
  * dark-grounded, not a light chip on the dark canvas. Scoped to the component
  * because canvas/ink/line are global neutrals that must not be remapped in the
  * unscoped .dark block. The variant state colors flip separately via the
- * generated .dark --nc-state-* remap in the Tailwind theme map. Direct
+ * generated :root.dark --nc-state-* remap in the Tailwind theme map. Direct
  * counterparts: the tag stays a canvas-grounded chip in both themes.
  */
 .dark .nc-state-tag {

package/dist/css/primitives.css

@@ -273,6 +273,42 @@
   color: var(--nc-body);
 }
 
+/* nc-filter-chip — removable selected-filter label (DESIGN.md filter-chip).
+   It uses neutral chrome only: applied filter state is not workflow, lifecycle,
+   or taxonomy state, so color is reserved for the remove affordance focus ring. */
+.nc-filter-chip {
+  display: inline-flex;
+  width: fit-content;
+  min-height: var(--nc-filter-chip-height);
+  align-items: center;
+  justify-content: center;
+  gap: var(--nc-filter-chip-gap);
+  border: var(--nc-guide) solid var(--nc-line);
+  border-radius: var(--nc-rounded-sm);
+  padding: 0 var(--nc-xs);
+  background: var(--nc-canvas-soft);
+  color: var(--nc-body);
+}
+
+.nc-filter-chip svg {
+  width: var(--nc-filter-chip-icon);
+  height: var(--nc-filter-chip-icon);
+  flex: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+}
+
+.dark .nc-filter-chip {
+  border-color: var(--nc-dark-line);
+  background: var(--nc-dark-canvas-soft);
+  color: var(--nc-dark-body);
+}
+
+.nc-filter-chip:focus-visible {
+  outline: 2px solid var(--nc-link);
+  outline-offset: 2px;
+}
+
 /* nc-link-inline — the inline body link style (DESIGN.md link-inline). It reads
    in the {colors.link} accent against the body rhythm (the body type is applied
    in markup via .nc-type-body-md), keeps the natural underline so it stays

package/dist/css/tokens.generated.css

@@ -125,19 +125,24 @@
   --nc-dark-cyan-soft: #7ee8de;
   --nc-dark-cyan-deep: #1f9e9a;
   --nc-dark-success: #62d494;
-  --nc-dark-state-ready: #d4d4d4;
-  --nc-dark-state-running: #a9befa;
-  --nc-dark-state-review: #ffd97d;
-  --nc-dark-state-blocked: #f7b3b5;
-  --nc-dark-state-complete: #62d494;
+  --nc-dark-state-ready: #8f8f8f;
+  --nc-dark-state-running: #4f6ae6;
+  --nc-dark-state-review: #f5a623;
+  --nc-dark-state-blocked: #cd212a;
+  --nc-dark-state-complete: #008c45;
   --nc-dark-selection-bg: #ededed;
   --nc-dark-selection-fg: #0a0a0a;
   --nc-dark-cross: #6e6e6e;
   --nc-dark-chart-1: #7d99f2;
+  --nc-dark-chart-2: #17b568;
+  --nc-dark-chart-3: #ffd97d;
+  --nc-dark-chart-4: #f28085;
+  --nc-dark-chart-5: #33d1cb;
   --nc-dark-chart-6: #9575cd;
 
   /* Spacing */
   --nc-xxs: 4px;
+  --nc-filter-chip-gap: 6px;
   --nc-xs: 8px;
   --nc-sm: 12px;
   --nc-md: 16px;
@@ -194,6 +199,8 @@
   --nc-h-bento-mobile-copy: 248px;
   --nc-h-bento-mobile-main: 537px;
   --nc-h-bento-strip: 20px;
+  --nc-filter-chip-height: 28px;
+  --nc-filter-chip-icon: 14px;
 
   /* Radii */
   --nc-rounded-none: 0px;

package/dist/tailwind/nadicode.tailwind.json

@@ -122,15 +122,19 @@
         "dark-cyan-soft": "#7ee8de",
         "dark-cyan-deep": "#1f9e9a",
         "dark-success": "#62d494",
-        "dark-state-ready": "#d4d4d4",
-        "dark-state-running": "#a9befa",
-        "dark-state-review": "#ffd97d",
-        "dark-state-blocked": "#f7b3b5",
-        "dark-state-complete": "#62d494",
+        "dark-state-ready": "#8f8f8f",
+        "dark-state-running": "#4f6ae6",
+        "dark-state-review": "#f5a623",
+        "dark-state-blocked": "#cd212a",
+        "dark-state-complete": "#008c45",
         "dark-selection-bg": "#ededed",
         "dark-selection-fg": "#0a0a0a",
         "dark-cross": "#6e6e6e",
         "dark-chart-1": "#7d99f2",
+        "dark-chart-2": "#17b568",
+        "dark-chart-3": "#ffd97d",
+        "dark-chart-4": "#f28085",
+        "dark-chart-5": "#33d1cb",
         "dark-chart-6": "#9575cd"
       },
       "fontFamily": {
@@ -337,6 +341,7 @@
       },
       "spacing": {
         "xxs": "4px",
+        "filter-chip-gap": "6px",
         "xs": "8px",
         "sm": "12px",
         "md": "16px",
@@ -392,7 +397,9 @@
         "h-bento-secondary": "240px",
         "h-bento-mobile-copy": "248px",
         "h-bento-mobile-main": "537px",
-        "h-bento-strip": "20px"
+        "h-bento-strip": "20px",
+        "filter-chip-height": "28px",
+        "filter-chip-icon": "14px"
       }
     }
   }

package/dist/tailwind/nadicode.theme.css

@@ -42,9 +42,9 @@
   --radius: var(--radius-md);
   --background: var(--color-dark-canvas);
   --foreground: var(--color-dark-ink);
-  --card: var(--color-dark-canvas-soft);
+  --card: var(--color-dark-canvas);
   --card-foreground: var(--color-dark-ink);
-  --popover: var(--color-dark-canvas-soft);
+  --popover: var(--color-dark-canvas);
   --popover-foreground: var(--color-dark-ink);
   --primary: var(--color-dark-primary);
   --primary-foreground: var(--color-dark-on-primary);
@@ -60,11 +60,11 @@
   --input: var(--color-dark-input);
   --ring: var(--color-dark-link);
   --chart-1: var(--color-dark-chart-1);
-  --chart-2: var(--color-nadicode-chart-2);
-  --chart-3: var(--color-nadicode-chart-3);
-  --chart-4: var(--color-nadicode-chart-4);
-  --chart-5: var(--color-nadicode-chart-5);
-  --sidebar: var(--color-dark-canvas-soft);
+  --chart-2: var(--color-dark-chart-2);
+  --chart-3: var(--color-dark-chart-3);
+  --chart-4: var(--color-dark-chart-4);
+  --chart-5: var(--color-dark-chart-5);
+  --sidebar: var(--color-dark-canvas);
   --sidebar-foreground: var(--color-dark-ink);
   --sidebar-primary: var(--color-dark-primary);
   --sidebar-primary-foreground: var(--color-dark-on-primary);
@@ -72,6 +72,9 @@
   --sidebar-accent-foreground: var(--color-dark-ink);
   --sidebar-border: var(--color-dark-line);
   --sidebar-ring: var(--color-dark-link);
+}
+
+:root.dark {
   --nc-state-ready: var(--nc-dark-state-ready);
   --nc-state-running: var(--nc-dark-state-running);
   --nc-state-review: var(--nc-dark-state-review);
@@ -80,10 +83,17 @@
   --nc-selection-bg: var(--nc-dark-selection-bg);
   --nc-selection-fg: var(--nc-dark-selection-fg);
   --nc-cross: var(--nc-dark-cross);
+  --nc-chart-1: var(--nc-dark-chart-1);
+  --nc-chart-2: var(--nc-dark-chart-2);
+  --nc-chart-3: var(--nc-dark-chart-3);
+  --nc-chart-4: var(--nc-dark-chart-4);
+  --nc-chart-5: var(--nc-dark-chart-5);
+  --nc-chart-6: var(--nc-dark-chart-6);
 }
 
 :root {
   --nadicode-spacing-xxs: var(--spacing-nadicode-xxs);
+  --nadicode-spacing-filter-chip-gap: var(--spacing-nadicode-filter-chip-gap);
   --nadicode-spacing-xs: var(--spacing-nadicode-xs);
   --nadicode-spacing-sm: var(--spacing-nadicode-sm);
   --nadicode-spacing-md: var(--spacing-nadicode-md);
@@ -140,6 +150,8 @@
   --nadicode-spacing-h-bento-mobile-copy: var(--spacing-nadicode-h-bento-mobile-copy);
   --nadicode-spacing-h-bento-mobile-main: var(--spacing-nadicode-h-bento-mobile-main);
   --nadicode-spacing-h-bento-strip: var(--spacing-nadicode-h-bento-strip);
+  --nadicode-spacing-filter-chip-height: var(--spacing-nadicode-filter-chip-height);
+  --nadicode-spacing-filter-chip-icon: var(--spacing-nadicode-filter-chip-icon);
 }
 
 /* === FAITHFUL PROJECTION of the @google/design.md Tailwind export. === */
@@ -264,15 +276,19 @@
   --color-dark-cyan-soft: #7ee8de;
   --color-dark-cyan-deep: #1f9e9a;
   --color-dark-success: #62d494;
-  --color-dark-state-ready: #d4d4d4;
-  --color-dark-state-running: #a9befa;
-  --color-dark-state-review: #ffd97d;
-  --color-dark-state-blocked: #f7b3b5;
-  --color-dark-state-complete: #62d494;
+  --color-dark-state-ready: #8f8f8f;
+  --color-dark-state-running: #4f6ae6;
+  --color-dark-state-review: #f5a623;
+  --color-dark-state-blocked: #cd212a;
+  --color-dark-state-complete: #008c45;
   --color-dark-selection-bg: #ededed;
   --color-dark-selection-fg: #0a0a0a;
   --color-dark-cross: #6e6e6e;
   --color-dark-chart-1: #7d99f2;
+  --color-dark-chart-2: #17b568;
+  --color-dark-chart-3: #ffd97d;
+  --color-dark-chart-4: #f28085;
+  --color-dark-chart-5: #33d1cb;
   --color-dark-chart-6: #9575cd;
   --color-nadicode-muted: #888888;
   --color-nadicode-primary: #008c45;
@@ -427,6 +443,7 @@
   --radius-pill: 100px;
   --radius-full: 9999px;
   --spacing-nadicode-xxs: 4px;
+  --spacing-nadicode-filter-chip-gap: 6px;
   --spacing-nadicode-xs: 8px;
   --spacing-nadicode-sm: 12px;
   --spacing-nadicode-md: 16px;
@@ -483,4 +500,6 @@
   --spacing-nadicode-h-bento-mobile-copy: 248px;
   --spacing-nadicode-h-bento-mobile-main: 537px;
   --spacing-nadicode-h-bento-strip: 20px;
+  --spacing-nadicode-filter-chip-height: 28px;
+  --spacing-nadicode-filter-chip-icon: 14px;
 }

package/dist/tokens/nadicode.dtcg.json

@@ -1328,55 +1328,55 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.831,
-            0.831,
-            0.831
+            0.561,
+            0.561,
+            0.561
           ],
-          "hex": "#d4d4d4"
+          "hex": "#8f8f8f"
         }
       },
       "dark-state-running": {
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.663,
-            0.745,
-            0.98
+            0.31,
+            0.416,
+            0.902
           ],
-          "hex": "#a9befa"
+          "hex": "#4f6ae6"
         }
       },
       "dark-state-review": {
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            1,
-            0.851,
-            0.49
+            0.961,
+            0.651,
+            0.137
           ],
-          "hex": "#ffd97d"
+          "hex": "#f5a623"
         }
       },
       "dark-state-blocked": {
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.969,
-            0.702,
-            0.71
+            0.804,
+            0.129,
+            0.165
           ],
-          "hex": "#f7b3b5"
+          "hex": "#cd212a"
         }
       },
       "dark-state-complete": {
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.384,
-            0.831,
-            0.58
+            0,
+            0.549,
+            0.271
           ],
-          "hex": "#62d494"
+          "hex": "#008c45"
         }
       },
       "dark-selection-bg": {
@@ -1423,6 +1423,50 @@
           "hex": "#7d99f2"
         }
       },
+      "dark-chart-2": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.09,
+            0.71,
+            0.408
+          ],
+          "hex": "#17b568"
+        }
+      },
+      "dark-chart-3": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            1,
+            0.851,
+            0.49
+          ],
+          "hex": "#ffd97d"
+        }
+      },
+      "dark-chart-4": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.949,
+            0.502,
+            0.522
+          ],
+          "hex": "#f28085"
+        }
+      },
+      "dark-chart-5": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.2,
+            0.82,
+            0.796
+          ],
+          "hex": "#33d1cb"
+        }
+      },
       "dark-chart-6": {
         "$value": {
           "colorSpace": "srgb",
@@ -1443,6 +1487,12 @@
           "unit": "px"
         }
       },
+      "filter-chip-gap": {
+        "$value": {
+          "value": 6,
+          "unit": "px"
+        }
+      },
       "xs": {
         "$value": {
           "value": 8,
@@ -1778,6 +1828,18 @@
           "value": 20,
           "unit": "px"
         }
+      },
+      "filter-chip-height": {
+        "$value": {
+          "value": 28,
+          "unit": "px"
+        }
+      },
+      "filter-chip-icon": {
+        "$value": {
+          "value": 14,
+          "unit": "px"
+        }
       }
     },
     "rounded": {

package/package.json

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