@d4gger/design-system 3.0.1 → 4.0.1

package/dist/docs/components/box.md

@@ -179,42 +179,11 @@ Box has no motion. The motion section is intentionally empty.
 
 - Box is not interactive and does not require an accessible name on its own. When Box wraps an interactive element, the interactive element's accessible name is the source.
 
-## Playground demo spec
-
-**Default story:**
-
-- Renders `Box` with no extra props and a child node. Asserts the root class is `dsx-box` and the host element is a `div`.
-
-**Padding story:**
-
-- Renders `Box padding="md"` and `Box p="md"` side by side. Asserts the matching `dsx-r-p-md` class and that `--dsx-box-padding` plus `--dsx-r-p` resolve to `var(--dsx-space-md)`.
-
-**Surface story:**
-
-- Renders `Box surface="surface-raised" border borderTone="strong" radius="md" shadow="2"`. Asserts that the `dsx-box` root class is present and the inline style carries the resolved CSS variables for surface, border, and shadow.
-
-**Responsive story:**
+The padding matrix uses outlined content bounds and the surface matrix uses actual Box surface props. The live example offers sm/md/lg padding controls (8/16/24px) around a fixed inner surface.
 
-- Renders `Box padding={{ initial: 'sm', md: 'lg' }} display={{ initial: 'flex', lg: 'grid' }}`. Asserts the `dsx-r-p-sm`, `md:dsx-r-p-lg`, and breakpoint variants for `display` resolve.
-
-**Token story:**
-
-- Box does not honor `data-accent-color`; surface tones come from `var(--dsx-color-*)` and respond to the active `Theme` wrapper automatically. Render `Box` inside a `Theme` with `accentColor="silver"` and `accentColor="bronze"`. The story asserts the surface variables come from the theme, not the brand color.
-
-**A11y story:**
-
-- Use `vitest-axe` against the rendered `Box`. The default story is a non-semantic `div` with no axe-critical content; tests assert no violations on the default render.
-
-**Props exposed in the playground controls:**
+## Playground demo spec
 
-| Prop | Control | Default |
-|---|---|---|
-| `display` | select | `block` |
-| `padding` | select | `md` |
-| `radius` | select | `md` |
-| `surface` | select | `surface` |
-| `border` | boolean | `false` |
-| `shadow` | select | `none` |
+The matrix exposes padding sm/md/lg and three neutral surfaces. Every cell outlines the content bounds inside a Box with an actual padding/surface prop. The live example changes padding between 8/16/24px around an unchanged inner project surface. It uses native Buttons with aria-pressed and remains bounded at 320px.
 
 ## Wiring notes
 

package/dist/docs/components/breadcrumb.md

@@ -112,7 +112,7 @@ Rules:
 
 **Responsive behavior:**
 
-- The component does not write `@media` rules. `size` is single-value only; the prop def is not `responsive: true`.
+- The component does not use width breakpoints. `size` is single-value only; the prop def is not `responsive: true`.
 
 **Reduced motion:**
 
@@ -127,17 +127,18 @@ Rules:
 | Link radius | `var(--dsx-rounded-md)` | Rounded tap area. |
 | Link color | `var(--dsx-color-on-surface)` | Default link. |
 | Link hover background | `var(--dsx-effect-hover-ghost)` | Hover. |
-| Link hover color | `var(--dsx-color-primary)` | Hover. |
+| Link hover color | `var(--dsx-color-accent-indicator)` | Hover. |
 | Link focus ring | `var(--dsx-shadow-focus-ring)` | Visible focus. |
 | Link disabled opacity | `var(--dsx-opacity-disabled)` | Disabled state. |
-| Page color | `var(--dsx-color-high-contrast)` | Current page text. |
+| Page background | `var(--dsx-color-accent-surface)` | Subtle current-page fill. |
+| Page color | `var(--dsx-color-accent-indicator)` | Current page text. |
 | Separator color | `var(--dsx-color-on-surface-variant)` | Divider. |
 | Typography (link and page) | `var(--dsx-typography-body-medium-*)` | Body copy. |
 
 Rules:
 
 - No raw color, spacing, radius, or motion values in `breadcrumb.css`.
-- The breadcrumb does not honor `data-accent-color`; the hover color uses `var(--dsx-color-primary)` directly because the active page is the only state the consumer needs to see in the accent color.
+- Breadcrumb inherits the active theme accent roles: hover/current-page foreground uses accent-indicator and the current-page fill uses accent-surface.
 
 ## Motion contract
 
@@ -176,7 +177,7 @@ Rules:
 
 **Color and meaning:**
 
-- The current page is communicated by `aria-current` and the high-contrast text color. The color is not the only signal.
+- The current page is communicated by `aria-current` and the accent foreground and current-page label. The color is not the only signal.
 
 **Naming:**
 
@@ -185,6 +186,8 @@ Rules:
 
 ## Playground demo spec
 
+Size scales the link/page typography and padding: sm uses body-small and space-xs; md retains body-medium with space-xs/space-sm; lg uses body-large and space-sm/space-md. Link targets have a minimum 24px height, and long labels wrap within the available container.
+
 **Default story:**
 
 - Renders a `Breadcrumb` with three items: Home (link), Products (link), Keyboard (page). Asserts the root has `dsx-breadcrumb` and `data-size="md"`. Asserts the page has `aria-current="page"`.
@@ -273,7 +276,7 @@ Rules:
 | `<Link text>` | typography | `var(--dsx-typography-body-medium-*)` | Typography | `typography` |
 | `<Link text>` | color | `var(--dsx-color-on-surface)` | Color | `fills` |
 | `<Page text>` | typography | `var(--dsx-typography-body-medium-*)` | Typography | `typography` |
-| `<Page text>` | color | `var(--dsx-color-high-contrast)` | Color | `fills` |
+| `<Page text>` | color | `var(--dsx-color-accent-indicator)` | Color | `fills` |
 | `<Separator icon>` | color | `var(--dsx-color-on-surface-variant)` | Color | `fills` |
 
 ### State transformations
@@ -281,8 +284,8 @@ Rules:
 | State | Link fill | Link background |
 |---|---|---|
 | `default` | `var(--dsx-color-on-surface)` | `transparent` |
-| `hover` | `var(--dsx-color-primary)` | `var(--dsx-effect-hover-ghost)` |
-| `focus-visible` | `var(--dsx-color-primary)` | `var(--dsx-shadow-focus-ring)` |
+| `hover` | `var(--dsx-color-accent-indicator)` | `var(--dsx-effect-hover-ghost)` |
+| `focus-visible` | `var(--dsx-color-accent-indicator)` | `var(--dsx-shadow-focus-ring)` |
 | `disabled` | `var(--dsx-color-on-surface)` with `var(--dsx-opacity-disabled)` | `transparent` |
 
 ### Variant model
@@ -295,3 +298,5 @@ Rules:
 - [ ] Token bindings resolve at the values `DESIGN.md` describes.
 - [ ] Component is promoted to Main Component under `Components`.
 - [ ] `penpotUtils.shapeStructure(board, 3)` matches the expected hierarchy.
+
+Current-page text pairs accent-indicator with accent-surface, retaining readable foreground contrast in both appearances.

package/dist/docs/components/callout.md

@@ -16,7 +16,7 @@ depends_on: []
 
 ## Purpose
 
-A bordered inline notice: an icon, a message, and an optional trailing action column. Distinct from `Alert` (in-page flow banner) and `Toast`/`Sonner` (transient) — `Callout` is a persistent, bordered box, most often used for contextual tips, warnings, or dismissible product notices.
+A bordered inline notice: an icon, a message, and an optional action row. Distinct from `Alert` (in-page flow banner) and `Toast`/`Sonner` (transient) — `Callout` is a persistent, bordered box, most often used for contextual tips, warnings, or dismissible product notices.
 
 ## Anatomy & slots
 
@@ -26,10 +26,10 @@ A bordered inline notice: an icon, a message, and an optional trailing action co
 
 | Slot | Element | Renders | Notes |
 |---|---|---|---|
-| `Callout.Root` | `<div>` | `dsx-callout` | 3-column grid: `auto 1fr auto` (icon, text, actions). |
+| `Callout.Root` | `<div>` | `dsx-callout` | Two-column grid: icon plus minmax(0, 1fr) content. Title, text and actions stack in column 2. |
 | `Callout.Icon` | `<div>` | `dsx-callout__icon` | Grid column 1. Sized by the `size` prop. |
 | `Callout.Text` | `<p>` | `dsx-callout__text` | Grid column 2. The message body. |
-| `Callout.Actions` | `<div>` | `dsx-callout__actions` | Grid column 3. **Optional** — a callout with no actions renders correctly; the 3rd grid track collapses to 0 width when nothing occupies it. Holds a dismiss button and/or other actions. |
+| `Callout.Actions` | `<div>` | `dsx-callout__actions` | Optional wrapping action row in content column 2, below title/text. Without an Icon, all content uses column 1. |
 
 ## Props contract
 
@@ -94,7 +94,9 @@ Rules that apply to this row:
 
 Rules:
 
-- No raw color, spacing, or radius values in `callout.css`. The action column introduced no new tokens — it reuses `--dsx-space-xs` for its internal gap.
+- No raw color, spacing, or radius values in `callout.css`. The action row introduces no new tokens — it reuses `--dsx-space-xs` for its internal gap.
+
+When no `Callout.Icon` is rendered, Title, Text and Actions occupy the first grid column. No empty icon gutter is reserved.
 
 ## Motion contract
 
@@ -178,7 +180,7 @@ Rules:
 
 **State boundaries:**
 
-- Owned by `Callout`: the root class, variant/size modifier classes, the grid layout, and the three slot classes.
+- Owned by `Callout`: the root class, variant/size modifier classes, the grid layout, and its slot classes.
 - Owned by the consumer: the message content, which action(s) render inside `Callout.Actions`, and any dismissal state/persistence (e.g. per-user dismissal tracked on the backend, per the `dashboard_notices` ask this slot was added for).
 
 **Boundary rules:**
@@ -193,7 +195,7 @@ Rules:
 ### Root board
 
 - **Name**: `Components / Callout`.
-- **Layout**: `Grid`, columns `auto 1fr auto`, gap per `size`.
+- **Layout**: `Grid`, columns `auto minmax(0, 1fr)`, gap per `size`.
 
 ### Layer tree
 
@@ -217,4 +219,13 @@ Rules:
 
 - [ ] Token bindings resolve at the values `DESIGN.md` describes.
 - [ ] Component is promoted to Main Component under `Components`.
-- [ ] Grid renders correctly with `Actions` present and absent (3rd column collapses to 0 width when empty).
+- [ ] Grid renders with optional Title, Icon and Actions; actions wrap below copy.
+
+## Overlay review composition
+
+`Callout.Title` is an existing h3 slot with class `dsx-callout__title`. Its
+heading, Text and wrapping Actions stack beside an Icon that spans the rows.
+Without Icon the root becomes a single column. Text has margin=0 and
+min-width=0; long copy wraps. Existing tone values info/warning/success/danger
+select semantic border and icon colors; highContrast uses the high-contrast
+foreground. `/docs/callout` shows all tones and real dismiss/restore actions.

package/dist/docs/components/card.md

@@ -126,15 +126,15 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 | Glass inset rim | `var(--dsx-effect-panel-glass-rim)` | Theme-aware subtle inset perimeter |
 | Glass border | `var(--dsx-effect-panel-glass-border)` | Theme-aware outer edge |
 | Shadow (glass) | `var(--dsx-shadow-panel-shadow)` | Glass shadow |
-| Glass backdrop | `var(--dsx-effect-panel-glass-backdrop-filter)` | Glass blur |
+| Glass backdrop | `var(--dsx-effect-panel-glass-backdrop-filter)` | Glass blur. Declared as `-webkit-backdrop-filter` first and the standard `backdrop-filter` last: the Next/Turbopack CSS pipeline drops the standard line when it comes first, and the blur silently disappears (B-1, 2026-10-04). This spec directs that order in `_internal/baseCard.css`; `src/test/styles/backdrop-filter-order.test.ts` guards it for every rule in the package. |
 | Surface (elevated) | `var(--dsx-color-surface-raised)` | Elevated surface |
 | Shadow (elevated) | `var(--dsx-shadow-elevation-3, var(--dsx-effect-shadow-3))` (hover: `--elevation-4`) | Elevated shadow |
 | Surface (filled) | `var(--dsx-color-surface)` | Filled surface (no shadow) |
 | Surface (outline) | `transparent` (plus `--dsx-effect-panel-solid-backdrop-filter`) | Compatibility outline surface |
 | Active / selected surface | `var(--dsx-color-accent-surface)` | Active / selected card |
-| Active / selected border | `var(--dsx-color-accent-indicator)` | Active / selected card edge |
+| Active / selected edge | `var(--dsx-boundary-selected-ring)` | Local accent-indicator 2px inset ring on every variant, including legacy outline; physical border is transparent, including under an outer light Theme |
 | High-contrast surface | `var(--dsx-color-high-contrast-container)` | High-contrast card |
-| High-contrast border | `var(--dsx-color-high-contrast-border)` | High-contrast card edge |
+| High-contrast edge | `var(--dsx-boundary-high-contrast-ring)` | Local 2px inset ring; physical border is transparent |
 | High-contrast text | `var(--dsx-color-high-contrast)` | High-contrast text |
 | Hover border | `var(--dsx-color-outline-variant)` | Hover border color |
 | Hover background | `var(--dsx-effect-hover-layer)` over surface-raised | Hover surface |
@@ -148,6 +148,13 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 
 The component is static. Hover state changes are instant; no transition is applied.
 
+Selected and high-contrast edges survive hover. For the color-role repair,
+the owning spec explicitly permits the narrow `baseCard.css` selector change:
+exclude selected/high-contrast cards from generic hover and static-accent
+edge/hover paint, and exclude selected cards from the light glass shadow override. This
+keeps the shared engine from replacing their inset rings; Alert and FileUpload
+behavior is unchanged by these Card-only exclusions.
+
 ## Accessibility
 
 **Roles:**

package/dist/docs/components/code.md

@@ -8,256 +8,69 @@ depends_on: []
 
 # Code
 
-> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
+> Source of truth: the package source at `package_path`. The spec mirrors source in the same change.
 
 ## Purpose
 
-An inline monospace code token that renders a `<code>` element with a `variant` background and border treatment, a `tone` color override, a `size` scale, an optional `color` accent, a `highContrast` toggle, and the shared `asChild` infra. For multi-line code, compose inside a `<pre>`.
+Monospace inline code with four treatments, three genuine sizes, optional accent foreground, tone and high contrast. Multi-line code uses a consumer-owned `pre > Code` composition and an overflow container.
 
 ## Anatomy & slots
 
-**Parent:** `Code` (no compound; flat polymorphic export).
-
-**Slots:**
-
-No slots: flat export. The component renders a single `<code>` host element (or the consumer's host element when `as` or `asChild` is set) with the `dsx-code` root class, the variant modifier class, and any `tone` modifier class.
+A single `<code>` root with `dsx-code`; no compound slots. `asChild` slots a consumer host. Native code attributes and refs are forwarded.
 
 ## Props contract
 
 | Prop | Type | Default | Required | Description | Responsive |
 |---|---|---|---|---|---|
-| `variant` | `'solid' \| 'soft' \| 'outline' \| 'ghost'` | `'soft'` | no | Code treatment. Writes the `dsx-code--{variant}` modifier class and the `data-variant` attribute. `solid` paints a primary background; `soft` paints a sunken surface with an outline; `outline` paints a transparent background with an inset outline; `ghost` paints nothing. | no |
-| `tone` | `'default' \| 'muted' \| 'inverse'` | `'default'` | no | Tone modifier. Writes `dsx-code--{tone}` for `muted` and `inverse`. The CSS combines `dsx-code--solid.dsx-code--muted` and `dsx-code--soft.dsx-code--inverse` for tone-on-variant pairings. | no |
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | no | Code cap size. Writes the `data-size` attribute. | no |
-| `color` | `string` | `undefined` | no | Free-form accent color. Writes the `data-accent-color` attribute. The component is not opinionated about the value; consumers that pass it get the `data-accent-color` attribute for downstream CSS targeting. | no |
-| `highContrast` | `boolean` | `false` | no | When `true`, writes `data-high-contrast="true"`. | no |
-| `asChild` | `boolean` | `false` | no | Renders the host through `Slot` from `@radix-ui/react-slot`; consumer supplies the host element. | no |
-| `className` | `string` | `undefined` | no | Extra classes appended to `dsx-code`. | no |
-| `style` | `React.CSSProperties` | `undefined` | no | Extra inline style forwarded to the host element. | no |
-| `children` | `React.ReactNode` | `undefined` | no | Code body (typically a short token, a function name, or a small literal). | no |
-
-Rules that apply to this row:
-
-- `Code` extends `Omit<ComponentPropsWithoutRef<'code'>, 'color'>` because `color` is redefined by the prop def bag.
-- `variant`, `tone`, `size`, `color`, `highContrast`, and `asChild` flow through `extractProps` and the prop def bag.
-- `data-variant`, `data-size`, `data-accent-color`, and `data-high-contrast` are written alongside the modifier classes so the CSS can target them through attribute selectors.
-- The `color` prop in the prop def has `default: undefined` and an empty `values: [] as const` array, so the runtime accepts any string but the prop def does not enumerate values. The TS type resolves to `string | undefined`.
+| `variant` | `'solid' \| 'soft' \| 'outline' \| 'ghost'` | `'soft'` | no | Writes `dsx-code--{variant}` and `data-variant`. | no |
+| `tone` | `'default' \| 'muted' \| 'inverse'` | `'default'` | no | Non-default tones write `dsx-code--{tone}`. | no |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | no | Writes `data-size`; small is 0.85×, default 1× and large 1.15× the code font-size token. Inline gutter remains compact at all sizes; ghost has none. | no |
+| `color` | `'rift' \| 'warp' \| 'ray' \| string` | `undefined` | no | Writes `data-accent-color`; recognized accents resolve semantic tokens, including astral/spark. Unknown strings retain ambient tokens. | no |
+| `highContrast` | `boolean` | `false` | no | Writes `data-high-contrast="true"` and paints a real contrast treatment. | no |
+| `asChild` | `boolean` | `false` | no | Slot the consumer host. | no |
+| `className` | `string` | `undefined` | no | Additional classes. | no |
+| `style` | `React.CSSProperties` | `undefined` | no | Forwarded style. | no |
+| `children` | `React.ReactNode` | `undefined` | no | Code content. | no |
 
 ## CSS class contract
 
-**Root class:** `dsx-code`
-
-**Modifier classes** (driven by the `variant` and `tone` prop defs and the `data-*` attributes):
-
-| Attribute | Allowed values | Class | CSS file |
-|---|---|---|---|
-| (class) | `solid`, `soft`, `outline`, `ghost` | `dsx-code--{variant}` | `code.css` |
-| (class) | `muted`, `inverse` | `dsx-code--muted`, `dsx-code--inverse` | `code.css` |
-| `data-variant` | `solid`, `soft`, `outline`, `ghost` | `.dsx-code[data-variant='{variant}']` | `code.css` |
-| `data-size` | `sm`, `md`, `lg` | (CSS contract for size) | n/a |
-| `data-accent-color` | any custom string | (no rule in the source CSS) | n/a |
-| `data-high-contrast` | `true` | (no rule in the source CSS) | n/a |
-
-**Slot classes:** none.
-
-**Responsive behavior:**
-
-- The component does not write `@media` rules. `size` is single-value only; the prop def is not `responsive: true`. The CSS for `data-size` is left to downstream CSS.
+Root: `dsx-code`. Modifier classes: `dsx-code--solid`, `--soft`, `--outline`, `--ghost`, `--muted`, `--inverse`. Attributes: `data-variant`, `data-size`, `data-accent-color`, `data-high-contrast`. There are no viewport breakpoints.
 
-**Reduced motion:**
-
-- Code has no motion. No transitions or animations are declared in `code.css`.
+- Soft: contextual neutral wash, normal foreground, no outline. It remains an inline text treatment rather than an input frame.
+- Solid: accent-track fill with accent-contrast foreground. Muted and inverse retain that readable filled pairing.
+- Outline: transparent with an inset outline.
+- Ghost: transparent, no outline or padding at every size.
+- A non-solid explicit color uses accent-indicator, except inverse tone, which preserves its inverse foreground.
+- Soft inverse uses the inverse-background / on-inverse-background pair and no shadow.
+- High contrast: soft uses high-contrast-container / high-contrast; solid uses high-contrast / on-high-contrast; outline and ghost use high-contrast ink. Inverse soft/outline/ghost retain their inverse foreground and surface pairing when high contrast is enabled. The inverse context already supplies the contrasting pair; a normal-surface ink must not replace it.
 
 ## Token mapping
 
-Every CSS value the component paints is a `var(--dsx-*)` token.
-
 | Property | Token | Role |
 |---|---|---|
-| Font family | `var(--dsx-typography-code-font-family)` | Monospace stack (token-backed; see rules). |
-| Font size | `var(--dsx-typography-code-font-size)` | Default code size. |
-| Font weight | `var(--dsx-typography-code-font-weight)` | Code weight. |
-| Line height | `var(--dsx-typography-code-line-height)` | Code rhythm. |
-| Letter spacing | `var(--dsx-typography-code-letter-spacing)` | Code tracking. |
-| Border radius | `var(--dsx-rounded-sm)` | Code cap roundness. |
-| Padding | `var(--dsx-space-0-5, 2px) var(--dsx-space-1-5, 6px)` | Inline gutter. |
-| Background (soft) | `var(--dsx-color-surface-sunken)` | Soft surface (Direction #3 Q1 pick: sunken, pressed into the page). |
-| Border (soft) | `var(--dsx-color-outline-variant)` | Soft outline (via `inset 0 0 0 1px`). |
-| Background (solid) | `var(--dsx-color-primary)` | Solid surface. |
-| Color (solid) | `var(--dsx-color-on-primary)` | Solid text. |
-| Outline (outline) | `var(--dsx-shadow-inset-outline)` | Inset outline. |
-| Color (outline) | `var(--dsx-color-on-surface)` | Outline text. |
-| Color (ghost) | `var(--dsx-color-on-surface)` | Ghost text. |
-| Color (muted) | `var(--dsx-color-on-surface-variant)` | Muted tone. |
-| Color (solid + muted) | `color-mix(in srgb, var(--dsx-color-on-primary) 65%, transparent)` | Muted text on solid. |
-| Color (inverse) | `var(--dsx-color-on-inverse-background)` | Inverse-context color. |
-| Background (soft + inverse) | `color-mix(in srgb, var(--dsx-color-on-high-contrast) 15%, transparent)` | Inverse soft surface. |
-| Color (soft + inverse) | `var(--dsx-color-on-high-contrast)` | Inverse soft text. |
+| Typography | `--dsx-typography-code-*` | JetBrains Mono family, font size, weight, line height, tracking, axes, case and decoration. |
+| Small / large font size | code font-size × 0.85 / × 1.15 | Existing scale preserved. |
+| Padding | `--dsx-space-0-5`, `--dsx-space-1-5` | Compact inline gutters at every size; ghost has zero padding. |
+| Radius / outline | `--dsx-rounded-sm` / `--dsx-shadow-inset-outline` | Cap geometry; edge belongs to the outline variant only. |
+| Soft | `--dsx-code-soft-background`, `--dsx-color-on-surface` | Neutral wash from the dedicated gray-alpha-3 effect; also used by the consumer preformatted example. |
+| Solid | `--dsx-color-accent-track`, `--dsx-color-accent-contrast` | Filled code with readable foreground. |
+| Accent / muted / inverse | `--dsx-color-accent-indicator`, `--dsx-color-on-surface-variant`, inverse-background + on-inverse-background | Context roles. |
+| High contrast | high-contrast-container + high-contrast, high-contrast + on-high-contrast | Self-contained soft/solid pairs. |
 
-Rules:
-
-- The monospace font stack resolves from `var(--dsx-typography-code-font-family)` (the `code` node in `tokens/typography.json`); it is token-backed, not a CSS hard-code.
-- The `color-mix` expressions are token-driven; the alpha is encoded in the token, not as a raw value.
+No local alpha mixing or primitive accent ramp reference is authored here. The component bridge references the existing gray-12-at-10% effect and is rebound at local theme/accent/gray boundaries. Soft and ghost stay distinct on page, shell and raised backgrounds.
 
 ## Motion contract
 
-| Region | Token | Default | Reduced |
-|---|---|---|---|
-| (none) | `none` | `none` | `none` |
-
-Rules:
-
-- Code has no motion. The motion section is intentionally empty.
+Static typography; no animation or transition.
 
 ## Accessibility
 
-**Roles:**
-
-- The component renders a `<code>` by default (or the consumer's host element when `as` / `asChild` is set). The semantic role of an inline code token is preserved.
-
-**Keyboard:**
-
-- Code is not interactive. No keyboard contract beyond the page-level Tab order.
-
-**Focus:**
-
-- Code has no focusable surface. Focus management is the consumer's responsibility when the code is wrapped in a focusable container.
-
-**Reduced motion:**
-
-- N/A. Code has no motion.
-
-**Color and meaning:**
-
-- The `variant` and `tone` props are visual modifiers. The code body itself carries the meaning.
-
-**Naming:**
-
-- No accessible name is required by default. Consumers that need an announced label for a code token (e.g. an inline icon) should supply `aria-label`.
+Native `<code>` semantics are preserved. The component is non-interactive; no focus or touch target is required. Consumer hosts through `asChild` own their semantics. Surrounding copy explains the snippet. Preformatted content keeps its whitespace and can scroll horizontally in the consumer's bounded overflow region.
 
 ## Playground demo spec
 
-`Code` is registered in `apps/playground/lib/registry/typography.tsx` under the `code` key. The registry entry imports `codePropDefs` and renders the component with a sample code token. Per-component route: `/docs/code`.
-
-**Default story:**
-
-- Renders `Code` with a default code string. Asserts the root class is `dsx-code` and the variant modifier is `dsx-code--soft`. The `data-variant` attribute is `soft` and the `data-size` attribute is `md`. Host element is `CODE`.
-
-**Variant story:**
-
-- Renders Code with each `variant` value. Asserts the matching `dsx-code--{variant}` class and the matching `data-variant` attribute.
-
-**Size story:**
-
-- Renders Code with each `size` value. Asserts the `data-size` attribute on the root.
-
-**Color story:**
-
-- Renders Code with a `color` value (e.g. `color="blue"`). Asserts the `data-accent-color` attribute on the root.
-
-**Composition story** (for `asChild`):
-
-- Renders Code with `asChild` wrapping a `<span>` element. Asserts the host element is `SPAN` and the `dsx-code` class is preserved.
-
-**State story:**
-
-- Renders Code in muted and inverse states, including the variant-on-tone pairings (`solid` + `muted`, `soft` + `inverse`).
-
-**Token story:**
-
-- Renders inside a `Theme` wrapper. Code is not themed by `data-accent-color`; the story documents that the variant surfaces are visually unchanged across accent colors.
-
-**A11y story:**
-
-- The default render passes the `vitest-axe` no-violations check.
-
-**Props exposed in the playground controls:**
-
-| Prop | Control | Default |
-|---|---|---|
-| `variant` | select | `soft` |
-| `tone` | select | `default` |
-| `size` | select | `md` |
-| `color` | text | (empty) |
-| `highContrast` | boolean | `false` |
-| `asChild` | boolean | `false` |
+`/docs/code`, typography registry. Matrix forwards all props. The live example compares all variants and sizes, muted/inverse/high-contrast states, all five accent strings, a slotted host, real inline configuration names and a preformatted snippet, and soft/ghost comparisons on page, shell and raised backgrounds. Inverse code has its paired background. Solid foreground remains readable on every accent in both appearances.
 
 ## Wiring notes
 
-**Composes from:**
-
-- `@radix-ui/react-slot` for `asChild`.
-- `_internal/helpers/extractProps` for the prop def bag.
-- `_internal/props/{asChild,highContrast}.prop` for the shared prop defs.
-- `_internal/cn` (via `classNames`) for class merging.
-- No DS component composition. Code is a leaf primitive.
-
-**Used by:**
-
-- The Playground typography registry, in-product inline code tokens, and any app surface that needs a monospace accent (command palettes, key hints, code samples, file paths).
-
-**State boundaries:**
-
-- Owned by Code: the root class, the variant and tone modifier classes, the `data-variant`, `data-size`, `data-accent-color`, and `data-high-contrast` attributes, and the prop def bag.
-- Owned by the consumer: the code body, the host element when `as` / `asChild` is set, and any extra `className` / `style` applied through prop forwarding.
-
-**Boundary rules:**
-
-- App-owned data: the code string, the surrounding prose context, and the host element when `asChild` is set.
-- DS-owned visuals: the `dsx-code` root class, the variant and tone modifier classes, the data attributes, and the prop def bag.
-
-## Penpot build recipe
-
-> Optional. Penpot is a visual reference, not a code authority. The Code recipe tracks the variant, tone, size, color, and high-contrast contract.
-
-The package does not yet publish a Penpot asset for Code. The recipe is visual reference only and tracks the CSS contract.
-
-### Root board
-
-- **Name**: `Primitives / Code`.
-- **Dimensions**: `auto × auto` (inline token).
-- **Layout**: `Flex` (inline).
-- **Sizing**: `horizontalSizing = 'auto'`, `verticalSizing = 'auto'`.
-
-### Layer tree
-
-```
-<Root Board: Code>
-  └── <Text: code body (monospace)>
-```
-
-### Token bindings (Penpot properties)
-
-| Shape | Property | Token | Token type | Penpot property name |
-|---|---|---|---|---|
-| Root | typography | `--dsx-typography-code-*` token family | Typography | `typography` |
-| Root | radius | `--dsx-rounded-sm` | Radius | `radius` |
-| Root (soft) | fill | `--dsx-color-surface-raised` | Color | `fills` (state) |
-| Root (soft) | stroke | `--dsx-color-outline-variant` | Color | `strokes` (state) |
-| Root (solid) | fill | `--dsx-color-primary` | Color | `fills` (state) |
-| Root (solid) | text fill | `--dsx-color-on-primary` | Color | `fills` (state) |
-| Root (outline) | stroke | `--dsx-shadow-inset-outline` | Color | `strokes` (state) |
-
-### State transformations
-
-| State | Root fill | Root stroke | Text fill |
-|---|---|---|---|
-| `soft` (default) | `--dsx-color-surface-raised` | `--dsx-color-outline-variant` | `--dsx-color-on-surface` |
-| `solid` | `--dsx-color-primary` | (none) | `--dsx-color-on-primary` |
-| `outline` | `transparent` | `--dsx-shadow-inset-outline` | `--dsx-color-on-surface` |
-| `ghost` | `transparent` | (none) | `--dsx-color-on-surface` |
-
-### Variant model
-
-- `variant`: `soft`, `solid`, `outline`, `ghost`. Default `soft`.
-- `tone`: `default`, `muted`, `inverse`. Default `default`.
-- `size`: `sm`, `md`, `lg`. Default `md`.
-- `color` and `highContrast` documented in the spec body.
-- Total members: variant × tone × size = 4 × 3 × 3 = 36, plus the high-contrast toggle.
-
-### Validation checklist
-
-- [ ] Token bindings resolve at the values `DESIGN.md` describes.
-- [ ] Component is promoted to Main Component under `Primitives`.
-- [ ] `penpotUtils.shapeStructure(board, 3)` matches the expected hierarchy.
-- [ ] Monospace font stack resolves from `--dsx-typography-code-font-family`; treat it as token-backed in Penpot.
+Radix Slot implements `asChild`; `extractProps` consumes `codePropDefs`; classnames merges the root/modifiers. Code is a leaf primitive; the token layer scopes accent values. Apps own text, host, code language, syntax highlighting and preformatted overflow layout.

package/dist/docs/components/collapsible.md

@@ -73,7 +73,7 @@ Rules:
 
 **Responsive behavior:**
 
-- The component does not write `@media` rules. The motion and layout are single-value only.
+- The component does not use width breakpoints. The motion and layout are single-value only.
 
 **Reduced motion:**
 
@@ -86,7 +86,11 @@ Rules:
     }
   }
   ```
-  The expand/collapse keyframes (`dsx-collapsible-expand`, `dsx-collapsible-collapse`) are gated off when the user prefers reduced motion. The chevron rotation uses `var(--dsx-motion-duration-fast)` and is not explicitly gated at the CSS level; the token layer should map it to `0` under reduced motion.
+  The expand/collapse keyframes (`dsx-collapsible-expand`, `dsx-collapsible-collapse`) are gated off when the user prefers reduced motion. The chevron rotation uses `var(--dsx-motion-duration-fast)` and is disabled in component CSS under reduced motion.
+
+**Force-mounted content** (`Collapsible.Content forceMount`, used by `Sidebar.MenuSubTrigger`):
+
+- The closed look of the content is the end frame of `dsx-collapsible-collapse` (`height: 0`, `opacity: 0`, `visibility: hidden`, held by the `both` fill). A force-mounted panel that first mounts closed never plays that animation, because Radix suppresses the mount animation by writing `animation-name: none` on the element. The runtime-inserted style block therefore hides it at rest: `.dsx-collapsible__content[data-state='closed']:where([style*='animation-name: none']) { display: none; }`. After any toggle Radix puts the animation back and the panel animates out as usual. Without this rule a closed sidebar parent listed all of its children (G-14, 2026-10-05).
 
 ## Token mapping
 
@@ -98,7 +102,7 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 | Trigger padding | `var(--dsx-space-md)` | Internal gutter |
 | Trigger color | `var(--dsx-color-on-surface)` | Closed trigger text |
 | Trigger label type | `var(--dsx-typography-label-large-font-family)`, `var(--dsx-typography-label-large-font-size)` | Trigger text ramp |
-| Trigger open color | `var(--dsx-color-primary)` | Open trigger text |
+| Trigger open color | `var(--dsx-color-accent-indicator)` | Open trigger text |
 | Trigger focus ring | `var(--dsx-shadow-focus-ring)` | Focus indicator |
 | Chevron transition | `var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease)` | Rotate transition |
 | Content padding | `var(--dsx-space-md)` | Inner content gutter |
@@ -107,12 +111,14 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 | Expand/collapse duration | `var(--dsx-motion-duration-normal)` | Keyframe duration |
 | Expand/collapse easing | `var(--dsx-motion-easing-in-out)` | Keyframe easing |
 
+Content height and vertical padding animate together from zero to their measured/underlying values. This prevents padding from clamping the first animation frames. The underlying endpoint retains consumer padding overrides, including `asChild` hosts. No wrapper is added.
+
 ## Motion contract
 
 | Region | Token | Default | Reduced |
 |---|---|---|---|
-| `dsx-collapsible__content` height + opacity | `var(--dsx-motion-duration-normal)` + `var(--dsx-motion-easing-in-out)` | 200ms in-out (token-dependent) | `animation: none !important` via the runtime-inserted `prefers-reduced-motion` block |
-| `dsx-collapsible__chevron` rotate | `var(--dsx-motion-duration-fast)` + `var(--dsx-motion-easing-standard)` | 150ms standard (token-dependent) | Token-layer override; the chevron transition is not explicitly gated at the CSS level |
+| `dsx-collapsible__content` height + block-axis padding + opacity | `var(--dsx-motion-duration-normal)` + `var(--dsx-motion-easing-in-out)` | motion-duration-normal (token-dependent) | `animation: none !important` via the runtime-inserted `prefers-reduced-motion` block |
+| `dsx-collapsible__chevron` rotate | `var(--dsx-motion-duration-fast)` + `var(--dsx-motion-easing-standard)` | 150ms standard (token-dependent) | Transition disabled in component CSS |
 
 ## Accessibility
 
@@ -126,15 +132,15 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 |---|---|
 | `Tab` | Moves focus to the trigger. |
 | `Enter`, `Space` | Toggles the open state. |
-| `Escape` | Collapses the content if the content has focus. Behavior is owned by Radix. |
 
 **Focus:**
 
 - The trigger renders a visible focus ring via `box-shadow: var(--dsx-shadow-focus-ring)` on `:focus-visible`.
+- A collapsed force-mounted panel is out of the tab order: the end frame of the collapse animation sets `visibility: hidden`, and a panel that mounted closed is `display: none`. Radix unmounts a panel that is not force-mounted.
 
 **Reduced motion:**
 
-- The runtime-inserted style block disables the expand/collapse keyframes when `prefers-reduced-motion: reduce` matches. The chevron rotation is not explicitly gated; consumers should rely on the global motion token override.
+- The runtime-inserted style block disables the expand/collapse keyframes when `prefers-reduced-motion: reduce` matches. The chevron transition is disabled in component CSS as well.
 
 **Color and meaning:**
 
@@ -144,36 +150,11 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 
 - `Collapsible.Trigger` is the interactive element; the consumer's `children` become the button's accessible name.
 
-## Playground demo spec
-
-**Default story:**
-
-- Renders a `Collapsible` with a trigger and content. Asserts the root renders as a transparent host and the trigger and content are present.
-
-**State story:**
-
-- Renders with `open`. Asserts the trigger has `data-state="open"` and the content is visible.
-- Renders with `defaultOpen={false}` and triggers a click. Asserts the trigger's `data-state` flips from `closed` to `open`.
-- Renders with `disabled`. Asserts the trigger is disabled and the content does not toggle.
+The live example embeds a disclosure and moving footer in a project card. Disabled and initially expanded warp/ray examples remain separate.
 
-**Composition story:**
-
-- Renders the root wrapped in a `Card` to demonstrate the surface composition pattern. Asserts the trigger and content are present inside the card.
-
-**Token story:**
-
-- Renders inside a `Theme` wrapper with `accentColor="silver"` and `accentColor="bronze"`. Collapsible does not track `data-accent-color`; the story asserts the open trigger color continues to resolve through `var(--dsx-color-primary)`.
-
-**A11y story:**
-
-- Uses `vitest-axe` against the rendered default story. Asserts no axe violations.
-
-**Props exposed in the playground controls:**
+## Playground demo spec
 
-| Prop | Control | Default |
-|---|---|---|
-| `open` | boolean | `false` |
-| `disabled` | boolean | `false` |
+The default render is a disclosure within a bounded consumer surface. The live project card includes fixed introductory content, optional project details, and a footer that moves with the disclosure. Separate disabled and initially expanded warp/ray examples expose the behavior and accent state. Normal-motion probes sample expansion and collapse; reduced motion skips both animations.
 
 ## Wiring notes
 

package/dist/docs/components/command.md

@@ -236,6 +236,8 @@ The palette has no mount or exit motion. Item selection and hover animate throug
 - `Command` accepts an optional `label` for the palette. When omitted, the input placeholder and surrounding context must provide a meaningful name.
 - Each `CommandItem` needs a meaningful label. The optional `CommandShortcut` is decorative.
 
+`Command.Shortcut` displays a hint; consumers wire the handler. The live playground example implements ⌘P/⌘S and Ctrl+P/Ctrl+S while focus is inside the palette and explains that scope. `Command.Separator` owns the group boundary; headings do not add a second rule.
+
 ## Playground demo spec
 
 **Default story:**