@d4gger/design-system 2.7.0 → 3.0.1

package/dist/docs/{qr-code.md → components/qr-code.md}

@@ -3,18 +3,13 @@ title: QRCode
 status: canonical
 category: Components
 archetype: adapter-backed
-package_path: packages/d4gger-design-system/src/components/qrCode/QrCode.tsx
-css_path: packages/d4gger-design-system/src/styles/components/qr-code.css
-props_path: packages/d4gger-design-system/src/components/qrCode/qrCode.props.ts
-test_path: packages/d4gger-design-system/src/test/components/QRCode.test.tsx
-demo_path: apps/playground/app/page.tsx
 depends_on:
   - qrcode.react
 ---
 
 # QRCode
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 
@@ -35,7 +30,7 @@ No slots: flat export. The component renders a single `<div>` host element (or a
 | Prop | Type | Default | Required | Description | Responsive |
 |---|---|---|---|---|---|
 | `value` | `string` | `undefined` | yes | String payload encoded into the QR modules. Required by `QRCodeSVG`; the host element also omits the native `value` attribute. | no |
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | no | Container size; selects one of the internal `sizeMap` values (`sm: 128`, `md: 192`, `lg: 256` px) and writes `data-size`. The CSS overrides the rendered SVG width and height with sizing tokens. | no |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | no | Painted size; selects one of the internal `sizeMap` values (`sm: 128`, `md: 192`, `lg: 256` px) and writes `data-size` plus the matching `dsx-qr-code-size-*` class. The SVG paints at exactly the `sizeMap` dimensions — the CSS never constrains it, so every size is scannable. | no |
 | `level` | `'L' \| 'M' \| 'Q' \| 'H'` | `'M'` | no | Error-correction level passed through to `QRCodeSVG`. `L` is ~7%, `M` is ~15%, `Q` is ~25%, `H` is ~30% recovery. | no |
 | `marginSize` | `number` | `0` | no | Quiet-zone margin passed through to `QRCodeSVG`. Default `0` matches the adapter default and is the spec baseline. | no |
 | `fgColor` | `string` | `var(--dsx-color-on-surface)` | no | Module (foreground) color. Default falls back to the token CSS variable; pass an explicit value to override. | no |
@@ -48,7 +43,8 @@ No slots: flat export. The component renders a single `<div>` host element (or a
 Rules that apply to this row:
 
 - The component extends `Omit<ComponentPropsWithoutRef<'div'>, 'value'>` because `value` is redefined by the QR-specific prop. Native `<div>` attributes that are not prop def keys are forwarded.
-- `size` is wired through `extractProps` and writes both the modifier class and `data-size`. The runtime `sizeMap` (`sm: 128`, `md: 192`, `lg: 256`) is the actual SVG pixel size; the CSS further constrains the rendered SVG width and height to the `size-{xs|md|xl}` sizing tokens so the visual size matches the container.
+- The three size modifier selectors share the base SVG display and corner treatment; matrix dimensions remain runtime-owned.
+- `size` is wired through `extractProps` and writes both the modifier class and `data-size`. The runtime `sizeMap` (`sm: 128`, `md: 192`, `lg: 256`) is the actual SVG pixel size, painted verbatim through the adapter's own width/height attributes. The `dsx-size-{xs|md|xl}` sizing tokens are NOT applied to the QR matrix — a former revision constrained the SVG to those tokens (16/24/40px) and rendered unscannable codes; the override was removed and must not return.
 - `level`, `marginSize`, `fgColor`, and `bgColor` are NOT in the prop def bag; they are typed in the `QRCodeProps` interface and consumed in the render path. The prop def only declares `asChild` and `size`. The interface-level defaults (`'M'`, `0`, token fallbacks) are applied at the destructuring site, not via `extractProps`.
 - The component does not currently expose a `data-high-contrast` prop or write that attribute, even though `qr-code.css` has a high-contrast block. The CSS block is a hook for downstream apps; the runtime does not emit the attribute today (see Anomalies).
 
@@ -87,9 +83,9 @@ Every CSS value the component paints is a `var(--dsx-*)` token, with runtime fal
 | Background | `var(--dsx-color-surface-raised)` | Container surface. |
 | Border | `var(--dsx-border-width-sm)` + `var(--dsx-color-outline)` | Edge. |
 | SVG border radius | `var(--dsx-rounded-sm)` | SVG corners. |
-| Size `sm` | `var(--dsx-size-xs)` | Rendered SVG width and height at the `sm` size. |
-| Size `md` | `var(--dsx-size-md)` | Rendered SVG width and height at the `md` size. |
-| Size `lg` | `var(--dsx-size-xl)` | Rendered SVG width and height at the `lg` size. |
+| Size `sm` | (runtime `128` px) | Painted SVG width and height at the `sm` size — no token. |
+| Size `md` | (runtime `192` px) | Painted SVG width and height at the `md` size — no token. |
+| Size `lg` | (runtime `256` px) | Painted SVG width and height at the `lg` size — no token. |
 | Module color (default) | `var(--dsx-color-on-surface)` (runtime fallback) | QR modules. |
 | Background color (default) | `var(--dsx-color-surface-raised)` (runtime fallback) | Quiet zone. |
 | High-contrast surface | `var(--dsx-color-surface-raised)` | High-contrast container. |
@@ -98,7 +94,7 @@ Every CSS value the component paints is a `var(--dsx-*)` token, with runtime fal
 
 Rules:
 
-- The runtime SVG dimensions (`128`, `192`, `256`) are NOT tokens; they are the adapter's own pixel size used to compute the QR matrix. The CSS overrides the visible width and height with the `size-{xs|md|xl}` sizing tokens. The mismatch between the runtime px and the CSS px means the adapter still draws a sharp matrix; the CSS only constrains the rendered size.
+- The runtime SVG dimensions (`128`, `192`, `256`) are NOT tokens; they are the adapter's own pixel size used to compute the QR matrix, painted verbatim. The CSS must never override the visible width and height with sizing tokens — that revision shipped 16/24/40px unscannable codes.
 - The `fgColor` and `bgColor` props are passed as CSS variable references (`'var(--dsx-color-on-surface)'`, `'var(--dsx-color-surface-raised)'`) when the consumer does not pass explicit values. The adapter forwards these into SVG attributes; token-driven theming therefore requires the `qr-code.css` rules to win on the modules, which is what the high-contrast block does.
 - The high-contrast block uses `svg rect[fill]:first-of-type` to recolor the background module; this relies on the adapter emitting the background as a single `<rect>`. If the adapter's output changes, the high-contrast fallback breaks.
 
@@ -145,11 +141,11 @@ The demo file at `demo_path` exposes the component to the playground. The playgr
 
 **Default story:**
 
-- Renders `QRCode` with `value="https://d4gger.example"` and no other props. Asserts the root class is `dsx-qr-code`, the inner element is an `svg`, the `data-size` attribute is `md`, and the SVG width and height resolve to `var(--dsx-size-md)`.
+- Renders `QRCode` with `value="https://d4gger.example"` and no other props. Asserts the root class is `dsx-qr-code`, the inner element is an `svg`, the `data-size` attribute is `md`, and the SVG width and height attributes are `192`.
 
 **Variant story** (one per size):
 
-- Renders QRCode with `size="sm"`, `size="md"`, and `size="lg"`. Asserts the matching `dsx-qr-code-size-{sm|md|lg}` class and `data-size` value. Also asserts the SVG width and height resolve to the corresponding sizing token.
+- Renders QRCode with `size="sm"`, `size="md"`, and `size="lg"`. Asserts the matching `dsx-qr-code-size-{sm|md|lg}` class and `data-size` value. Also asserts the SVG width and height attributes are `128` / `192` / `256` — never a sizing token.
 
 **Composition story** (for `asChild`):
 
@@ -185,7 +181,7 @@ The demo file at `demo_path` exposes the component to the playground. The playgr
 
 - `qrcode.react` `QRCodeSVG`: adapter that renders the SVG QR matrix. The adapter is a `peerDependency`; the package does not own the rendered modules.
 - `@radix-ui/react-slot`: enables `asChild` for consumer-supplied host elements.
-- No DS component composition. The runtime does not import any DS primitives; the surface is a self-contained adapter-backed primitive (the roster labels it `primitive`, but the source is adapter-backed; see Anomalies).
+- No DS component composition. The runtime does not import any DS primitives; the surface is a self-contained adapter-backed primitive, matching the roster archetype.
 
 **Used by:**
 
@@ -199,7 +195,7 @@ The demo file at `demo_path` exposes the component to the playground. The playgr
 **Boundary rules:**
 
 - App-owned data: the encoded payload, the persistence of the payload, the security/rotation policy, the print/download lifecycle, and any analytics on scan events.
-- DS-owned visuals: token bindings (`--dsx-space-md`, `--dsx-rounded-xl`, `--dsx-rounded-sm`, `--dsx-color-surface-raised`, `--dsx-color-outline`, `--dsx-color-on-surface`, `--dsx-color-high-contrast-border`, `--dsx-color-high-contrast`, `--dsx-border-width-sm`, `--dsx-size-{xs|md|xl}`), the `dsx-qr-code` root class, the `dsx-qr-code-size-{sm|md|lg}` modifier classes, and the high-contrast CSS hook.
+- DS-owned visuals: token bindings (`--dsx-space-md`, `--dsx-rounded-xl`, `--dsx-rounded-sm`, `--dsx-color-surface-raised`, `--dsx-color-outline`, `--dsx-color-on-surface`, `--dsx-color-high-contrast-border`, `--dsx-color-high-contrast`, `--dsx-border-width-sm`), the `dsx-qr-code` root class, the `dsx-qr-code-size-{sm|md|lg}` modifier classes, the runtime painted sizes (`128`/`192`/`256`), and the high-contrast CSS hook. The `dsx-size-*` tokens are explicitly NOT bound to the matrix.
 
 ## Penpot build recipe
 
@@ -210,7 +206,7 @@ The package does not yet publish a Penpot asset for QRCode. Recipe is visual ref
 ### Root board
 
 - **Name**: `Components / QRCode`.
-- **Dimensions**: `var(--dsx-size-md)` × `var(--dsx-size-md)` at the default `md` size; `var(--dsx-size-xs)` at `sm`; `var(--dsx-size-xl)` at `lg`.
+- **Dimensions**: `192` × `192` px at the default `md` size; `128` px at `sm`; `256` px at `lg` (runtime painted sizes, not tokens).
 - **Layout**: `Fixed`.
 - **Sizing**: `horizontalSizing = 'fix'`, `verticalSizing = 'fix'`.
 
@@ -230,9 +226,9 @@ The package does not yet publish a Penpot asset for QRCode. Recipe is visual ref
 | Root | stroke | `--dsx-color-outline` | Color | `strokes` |
 | Root | padding | `--dsx-space-md` | Spacing | `padding` |
 | Root | corner radius | `--dsx-rounded-xl` | Radius | `radius` |
-| Root (size sm) | width, height | `--dsx-size-xs` | Sizing | `size` |
-| Root (size md) | width, height | `--dsx-size-md` | Sizing | `size` |
-| Root (size lg) | width, height | `--dsx-size-xl` | Sizing | `size` |
+| Root (size sm) | width, height | `128` px (runtime, no token) | Sizing | `size` |
+| Root (size md) | width, height | `192` px (runtime, no token) | Sizing | `size` |
+| Root (size lg) | width, height | `256` px (runtime, no token) | Sizing | `size` |
 | Matrix | fill | `--dsx-color-on-surface` | Color | `fills` |
 | Matrix (high-contrast) | fill | `--dsx-color-high-contrast` | Color | `fills` (state) |
 

package/dist/docs/{quote.md → components/quote.md}

@@ -3,17 +3,12 @@ title: Quote
 status: canonical
 category: Primitives
 archetype: primitive
-package_path: packages/d4gger-design-system/src/components/quote/Quote.tsx
-css_path: packages/d4gger-design-system/src/styles/components/quote.css
-props_path: packages/d4gger-design-system/src/components/quote/quote.props.ts
-test_path: packages/d4gger-design-system/src/test/components/Quote.test.tsx
-demo_path: apps/playground/app/page.tsx
 depends_on: []
 ---
 
 # Quote
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 
@@ -113,7 +108,7 @@ Rules:
 
 ## Playground demo spec
 
-The demo file at `demo_path` exposes the component to the playground. The playground lives at `apps/playground/app/` (Next.js app router, no per-component routes today). The `demo_path` recorded here is the current playground root; the spec assumes a single shared page that renders all components. Per-component routes are an aspirational target and not yet present in the repo.
+`Quote` is registered in `apps/playground/lib/registry/typography.tsx` under the `quote` key. The registry entry imports `quotePropDefs` and renders the component with a sample inline quotation. Per-component route: `/docs/quote`.
 
 **Default story:**
 
@@ -129,7 +124,7 @@ The demo file at `demo_path` exposes the component to the playground. The playgr
 
 **Token story:**
 
-- Renders inside a `Theme` wrapper with `accentColor="amber"`, `accentColor="silver"`, and `accentColor="bronze"`. Asserts the italic style is visually unchanged because Quote does not consume `data-accent-color`.
+- Renders inside a `Theme` wrapper with `accentColor="rift"`, `accentColor="warp"`, and `accentColor="ray"`. Asserts the italic style is visually unchanged because Quote does not consume `data-accent-color`.
 
 **A11y story:**
 

package/dist/docs/{radio-cards.md → components/radio-cards.md}

@@ -3,11 +3,6 @@ title: RadioCards
 status: canonical
 category: Components
 archetype: composite
-package_path: packages/d4gger-design-system/src/components/radioCards/RadioCards.tsx
-css_path: packages/d4gger-design-system/src/styles/components/radio-cards.css
-props_path: packages/d4gger-design-system/src/components/radioCards/radioCards.props.ts
-test_path: packages/d4gger-design-system/src/test/components/RadioCards.test.tsx
-demo_path: apps/playground/app/page.tsx
 depends_on:
   - RadioGroup (Radix `@radix-ui/react-radio-group`; the `Root` wraps `RadioGroupPrimitive.Root` and the `Item` wraps `RadioGroupPrimitive.Item`, the `data-state='checked'` attribute is the source of the visual selected state)
   - Card (token-aligned surface; the `Item` reuses the `dsx-card` surface tokens through the `baseCard.css` import)
@@ -16,7 +11,7 @@ depends_on:
 
 # RadioCards
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 

package/dist/docs/{radio-group.md → components/radio-group.md}

@@ -3,20 +3,13 @@ title: RadioGroup
 status: canonical
 category: Components
 archetype: composite
-package_path: packages/d4gger-design-system/src/components/radioGroup/RadioGroup.tsx
-css_path: packages/d4gger-design-system/src/styles/components/radio-group.css
-props_path: packages/d4gger-design-system/src/components/radioGroup/radioGroup.props.ts
-test_path: packages/d4gger-design-system/src/test/components/RadioGroup.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/forms.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
 depends_on:
   - "@radix-ui/react-radio-group"
 ---
 
 # RadioGroup
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 
@@ -54,7 +47,7 @@ A mutually exclusive selection cluster backed by `@radix-ui/react-radio-group`.
 | Prop | Type | Default | Required | Description | Responsive |
 |---|---|---|---|---|---|
 | `value` | `string` | — | yes | Unique value for this item. | no |
-| `size` | `'sm' \| 'md'` | `'md'` | no | Item-level size override. Drives the `dsx-radio-item--{size}` class. | no |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | no | Item-level size override. Drives the `dsx-radio-item--{size}` class. | no |
 | `label` | `ReactNode` | `undefined` | no | When set, the item wraps itself in a `<label class="dsx-radio-option">` and renders the label inside a `dsx-radio-option__label` span. | no |
 | `description` | `ReactNode` | `undefined` | no | When set, the item renders a `dsx-radio-option__description` span under the label. | no |
 | `asChild` | `boolean` | `false` | no | Renders the item host through `Slot`. | no |
@@ -86,6 +79,7 @@ Rules:
 | `RadioGroupItem` (host) | `dsx-radio-item` | `radio-group.css` |
 | `RadioGroupItem` (size sm) | `dsx-radio-item--sm` | `radio-group.css` |
 | `RadioGroupItem` (size md) | `dsx-radio-item--md` | `radio-group.css` |
+| `RadioGroupItem` (size lg) | `dsx-radio-item--lg` | `radio-group.css` |
 | Item indicator | `dsx-radio-item__indicator` | `radio-group.css` |
 | Item dot | `dsx-radio-item__dot` | `radio-group.css` |
 | Option wrapper | `dsx-radio-option` | `radio-group.css` |
@@ -113,7 +107,9 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 | Option label/description typography | `var(--dsx-typography-body-medium-*)` | Body ramp. |
 | Option description color | `var(--dsx-color-on-surface-variant)` | Muted description. |
 | Item size (default) | `var(--dsx-size-md)` | Default control. |
-| Item size (sm) | `var(--dsx-size-sm)` | Small control. |
+| Item size (sm) | `var(--dsx-size-sm)` | Small control (20px). |
+| Item size (lg) | `var(--dsx-size-lg)` | Large control (32px). |
+| Item hit area | `max(100% + 16px, 44px)` via `::before` | Layout-neutral 44px pointer target (WCAG 2.5.8, TMA touch). |
 | Item radius | `var(--dsx-rounded-full)` | Round. |
 | Item border | `var(--dsx-border-width-md)` solid `var(--dsx-color-outline-variant)` | Resting edge. |
 | Item background | `var(--dsx-color-surface)` | Resting fill. |

package/dist/docs/{rating.md → components/rating.md}

@@ -3,20 +3,13 @@ title: Rating
 status: canonical
 category: Components
 archetype: primitive
-package_path: packages/d4gger-design-system/src/components/rating/Rating.tsx
-css_path: packages/d4gger-design-system/src/styles/components/rating.css
-props_path: packages/d4gger-design-system/src/components/rating/rating.props.ts
-test_path: packages/d4gger-design-system/src/test/components/Rating.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/forms.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
 depends_on:
   - Icon
 ---
 
 # Rating
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 
@@ -86,6 +79,8 @@ Rules:
 
 - The component does not write `@media` rules.
 
+- The `sm` star remains 20px visually. A centered `::before` layer expands its pointer target to the 24px `size-md` token, filling the existing 4px gap without overlapping neighboring targets.
+
 **Reduced motion:**
 
 - Item transitions use `var(--dsx-motion-duration-fast)` and `var(--dsx-motion-easing-standard)` for color, transform, opacity, and box-shadow. No explicit `prefers-reduced-motion` gate is present in the CSS.

package/dist/docs/{resizable.md → components/resizable.md}

@@ -3,20 +3,13 @@ title: Resizable
 status: canonical
 category: Components
 archetype: adapter-backed
-package_path: packages/d4gger-design-system/src/components/resizable/Resizable.tsx
-css_path: packages/d4gger-design-system/src/styles/components/resizable.css
-props_path: packages/d4gger-design-system/src/components/resizable/resizable.props.ts
-test_path: packages/d4gger-design-system/src/test/components/Resizable.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/layout.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
 depends_on:
   - react-resizable-panels
 ---
 
 # Resizable
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 

package/dist/docs/{result.md → components/result.md}

@@ -3,8 +3,6 @@ title: Result
 status: canonical
 category: Components
 archetype: composite
-package_path: packages/d4gger-design-system/src/components/result/Result.tsx
-css_path: packages/d4gger-design-system/src/styles/components/result.css
 ---
 
 # Result
@@ -17,6 +15,8 @@ Canonical outcome and list-state surface. `state` is `success`, `failure`, `expi
 
 `Result.Root`, `Result.Icon`, `Result.Title`, `Result.Description`, `Result.Metadata`, `Result.Steps`, and `Result.Actions`. Root class is `dsx-result`; slot classes use `dsx-result__<slot>`. Root writes `data-state` and `data-tone`.
 
+The root shrinks to the available width, direct children stay within that width, and long titles, descriptions, and identifiers wrap without truncation. Actions wrap intrinsically; no viewport query selects a different layout.
+
 ## Wiring notes
 
 `EmptyState` delegates to `Result state="empty"` while preserving its legacy class and props. `DataTable` uses Result for loading, empty, no-results, and error states. Copy, retry behavior, and async work are consumer-owned.
@@ -24,3 +24,7 @@ Canonical outcome and list-state surface. `state` is `success`, `failure`, `expi
 ## Playground demo spec
 
 Show every state, an independently overridden tone, populated slots, and alert/loading semantics.
+
+The live playground example switches between all seven states with actual buttons. Each state has contextual copy, a matching illustration or spinner, and an appropriate recovery action. Success shows connection metadata; loading shows steps. Recovery returns to success and Continue opens the empty saved-server state. The compact default example provides an illustration, title, and description.
+
+The inline live example uses headline-medium for its title and one outlined Result surface, avoiding compounded Card/Result padding. Short state titles preserve whole-word readability at 320px.

package/dist/docs/{rich-text-editor.md → components/rich-text-editor.md}

@@ -3,13 +3,6 @@ title: RichTextEditor
 status: canonical
 category: Components
 archetype: adapter-backed
-package_path: packages/d4gger-design-system/src/components/richTextEditor/RichTextEditor.tsx
-css_path: packages/d4gger-design-system/src/styles/components/rich-text-editor.css
-props_path: packages/d4gger-design-system/src/components/richTextEditor/richTextEditor.props.ts
-test_path: packages/d4gger-design-system/src/test/components/RichTextEditor.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/forms.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
 depends_on:
   - "@tiptap/react"
   - "@tiptap/starter-kit"
@@ -27,7 +20,7 @@ Import the editor and its composition helper from `@d4gger/design-system/rich-te
 
 Stable attributes are: image `src`, `alt`, optional `caption`; embed canonical `url`; callout `tone`, optional `title`, nested content; code language/content; comparison before/after sources, alt text, optional labels; poll persistent ID and display metadata. Embed HTML never accepts raw iframes. Applications own URL allowlists/oEmbed callbacks, uploads, polling/voting, authentication, storage, and sanitization. Matching read-side exports are `ArticleImage`, `ArticleEmbed`, `BeforeAfterComparison`, and `ArticlePoll`.
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 

package/dist/docs/{scroll-area.md → components/scroll-area.md}

@@ -3,13 +3,6 @@ title: ScrollArea
 status: canonical
 category: Components
 archetype: radix-compound
-package_path: packages/d4gger-design-system/src/components/scrollArea/ScrollArea.tsx
-css_path: packages/d4gger-design-system/src/styles/components/scroll-area.css
-props_path: packages/d4gger-design-system/src/components/scrollArea/scrollArea.props.ts
-test_path: packages/d4gger-design-system/src/test/components/ScrollArea.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/layout.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
 depends_on:
   - "@radix-ui/react-scroll-area"
   - "@radix-ui/react-slot"
@@ -17,7 +10,7 @@ depends_on:
 
 # ScrollArea
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 

package/dist/docs/{search-bar.md → components/search-bar.md}

@@ -3,13 +3,6 @@ title: SearchBar
 status: canonical
 category: Components
 archetype: composite
-package_path: packages/d4gger-design-system/src/components/searchBar/SearchBar.tsx
-css_path: packages/d4gger-design-system/src/styles/components/search-bar.css
-props_path: packages/d4gger-design-system/src/components/searchBar/searchBar.props.ts
-test_path: packages/d4gger-design-system/src/test/components/SearchBar.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/overlay.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
 depends_on:
   - Command (the `SearchBar.Menu` slot renders through the DS `Command` surface for the search-first list and keyboard navigation)
   - Dialog (the `SearchBar.Menu` slot mounts a `Dialog` for the modal palette; the trigger button opens the dialog)
@@ -21,7 +14,7 @@ depends_on:
 
 # SearchBar
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 
@@ -46,9 +39,9 @@ A global search trigger with a command-palette-style results menu. The trigger b
 | Prop | Type | Default | Required | Description | Responsive |
 |---|---|---|---|---|---|
 | `asChild` | `boolean` | `false` | no | Renders the root through `Slot` from `@radix-ui/react-slot`. | no |
-| `variant` | `'default' \| 'ghost'` | `'default'` | no | Trigger style. Writes `data-variant`. The CSS does not currently declare per-variant rules; the attribute is the contract hook. | no |
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | no | Trigger height. Writes `data-size`. The CSS does not currently declare per-size rules; the attribute is the contract hook. | no |
-| `radius` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'full'` | `undefined` | no | Trigger corner roundness. Writes `data-radius`. | no |
+| `variant` | `'default' \| 'ghost'` | `'default'` | no | Trigger style. Writes `data-variant` on the root and maps onto the trigger `Button` (`default` → `outline`, `ghost` → `ghost`); the paint comes from the Button contract, so `search-bar.css` declares no per-variant rules of its own. | no |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | no | Trigger height. Writes `data-size` on the root and flows into the trigger `Button` `size`; the paint comes from the Button contract. | no |
+| `radius` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'full'` | `undefined` | no | Trigger corner roundness. Writes `data-radius` on the root and flows into the trigger `Button` `radius`; the paint comes from the Button contract. | no |
 | `compact` | `boolean` | `false` | no | Reduces the container gap. Adds the `dsx-search-bar--compact` modifier class. | no |
 | `openOnShortcut` | `boolean` | `true` | no | When set, the root listens for `Cmd/Ctrl + K` on `window` and toggles the menu. The listener is registered in a `useEffect` and removed on unmount. | no |
 | `defaultOpen` | `boolean` | `false` | no | Initial open state when uncontrolled. | no |
@@ -80,6 +73,7 @@ Rules:
 | `showClose` | `boolean` | `false` | no | Toggles the dialog's close button. | no |
 | `size` | `DialogSize` (the `Dialog` size union) | `'md'` | no | Dialog size. | no |
 | `title` | `string` | `'Search'` | no | Accessible dialog title, rendered via a `VisuallyHidden`-wrapped `DialogTitle`. Fixes the Radix a11y requirement that every `DialogContent` have a `DialogTitle`. | no |
+| `description` | `string` | `undefined` | no | Optional accessible dialog description, rendered via a `VisuallyHidden`-wrapped `DialogDescription` when set. Quiets the Radix missing-`Description` warning for consumers that need a described palette. | no |
 | (Command props) | n/a | n/a | no | All standard `Command` props are forwarded. | no |
 
 `SearchBarMenuProps` is `CommandProps & SearchBarMenuOwnProps`.

package/dist/docs/{section.md → components/section.md}

@@ -3,20 +3,13 @@ title: Section
 status: canonical
 category: Foundations
 archetype: layout-primitive
-package_path: packages/d4gger-design-system/src/components/section/Section.tsx
-css_path: packages/d4gger-design-system/src/styles/components/section.css
-props_path: packages/d4gger-design-system/src/components/section/section.props.ts
-test_path: packages/d4gger-design-system/src/test/components/Section.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/layout.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
 depends_on:
   - Box
 ---
 
 # Section
 
-> Source of truth: the package source at `package_path`. The spec mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose