@d4gger/design-system 2.7.0 → 3.0.1

package/dist/docs/{config-drawer.md → components/config-drawer.md}

@@ -3,13 +3,6 @@ title: ConfigDrawer
 status: canonical
 category: Foundations
 archetype: composite
-package_path: packages/d4gger-design-system/src/components/configDrawer/ConfigDrawer.tsx
-css_path: packages/d4gger-design-system/src/styles/components/config-drawer.css
-props_path: packages/d4gger-design-system/src/components/configDrawer/configDrawer.props.ts
-test_path: packages/d4gger-design-system/src/test/components/ConfigDrawer.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/utility.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
 depends_on:
   - Sheet
   - IconButton
@@ -25,7 +18,7 @@ depends_on:
 
 # ConfigDrawer
 
-> 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
 
@@ -45,13 +38,14 @@ A right-anchored preferences drawer that exposes the live theme controls: appear
 | SettingRow | `Flex direction="row" justify="between" align="center" gap="md"` | `dsx-config-drawer__row` | A label / description / control triplet. The label is a `Label` element; the description (when present) is a `Text variant="label-small" tone="muted"`; the control is whatever the consumer passes as `children`. |
 | SettingRow info | `Flex direction="column" gap="1"` | `dsx-config-drawer__row-info` | The left column of the row, containing the `Label` and the description. |
 | SettingRow control wrapper | `<div>` | `dsx-config-drawer__row-control` | The right column of the row, wrapping the control. |
+| Accent preview swatch | `<span aria-hidden="true">` | `dsx-config-drawer__accent-swatch` + `data-tier` | Non-interactive preview of each accent tier. It does not write `data-accent-color`, because the swatch represents a color value rather than consuming theme scope. |
 | Scaling input (specific) | `NumberInput` | `dsx-config-drawer__scaling-input` | The scaling control. Sized to `7ch` so the percentage fits without breaking the row rhythm. |
 
 **Internal layout:**
 
 - The default trigger is a ghost `IconButton` with a `settings` icon. Passing the `trigger` prop replaces it entirely.
 - The body is a single scrollable column. Each `SettingRow` is a `flex-direction: row` with `justify-content: space-between`, so the label and control sit on opposite ends of the row.
-- The seven default rows (Theme, Accent, Gray, Radius, Density, Scaling) are separated by `Separator` components from the package. The order is fixed and reflects the dependency direction: appearance first, then accent, then gray, then radius, then density, then scaling.
+- The six default rows (Theme, Accent, Gray, Radius, Density, Scaling) are separated by `Separator` components from the package. The order is fixed and reflects the dependency direction: appearance first, then accent, then gray, then radius, then density, then scaling.
 - Each row's control is a `SegmentedControl` (for the categorical tokens) or a `NumberInput` (for the scaling percentage). The control is wrapped in a `<div class="dsx-config-drawer__row-control">` so it stays right-aligned without leaking the `gap` into the control itself.
 
 ## Props contract
@@ -75,7 +69,7 @@ The root does not accept `asChild` directly; consumers can swap the host element
 | `description` | `string` | `undefined` | no | Optional helper text rendered under the label as a muted `Text`. | no |
 | `children` | `ReactNode` | (none) | **yes** | The control rendered on the right (typically a `SegmentedControl` or `NumberInput`). | no |
 
-`SettingRow` is an internal helper; consumers do not compose their own rows. The seven default rows are wired inside the component.
+`SettingRow` is an internal helper; consumers do not compose their own rows. The six default rows are wired inside the component.
 
 ## CSS class contract
 
@@ -90,6 +84,7 @@ The root does not accept `asChild` directly; consumers can swap the host element
 | Setting row | `dsx-config-drawer__row` | `config-drawer.css` |
 | Setting row info column | `dsx-config-drawer__row-info` | `config-drawer.css` |
 | Setting row control wrapper | `dsx-config-drawer__row-control` | `config-drawer.css` |
+| Accent preview swatch | `dsx-config-drawer__accent-swatch` | `config-drawer.css` |
 | Scaling `NumberInput` | `dsx-config-drawer__scaling-input` | `config-drawer.css` |
 
 **Responsive behavior:**
@@ -112,6 +107,10 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 | Row min-height | `var(--dsx-size-lg)` | Min hit target |
 | Row gap | `var(--dsx-space-md)` | Horizontal gap between info and control |
 | Row info gap | `var(--dsx-space-2xs)` | Vertical gap inside the info column |
+| Accent preview size | `var(--dsx-space-sm)` | Square preview swatch dimensions |
+| Accent preview spacing | `var(--dsx-space-xs)` | Gap between the preview and tier label |
+| Accent preview radius | `var(--dsx-radius-full)` | Circular preview shape |
+| Accent preview fill | `var(--dsx-runtime-accent-{rift,warp,ray}-9)` | Exact value represented by each theme choice |
 | Scaling input width | `7ch` | Fixed width for the percentage `NumberInput` |
 
 The default trigger is an `IconButton`; its visual contract is owned by `IconButton`. The row labels use the `Label` component; their visual contract is owned by `Label`. The segmented controls use the `SegmentedControl` component; their visual contract is owned by `SegmentedControl`.
@@ -171,17 +170,17 @@ The component itself has no motion. The wrapping `Sheet` handles open / close tr
 
 **State story:**
 
-- Renders the drawer with `defaultOpen` and confirms the seven rows appear with the correct default selections (`System`, `Amber`, `Auto`, `Medium`, `Comfortable`, `100`).
+- Renders the drawer with `defaultOpen` and confirms the six rows appear with the correct default selections (`System`, `Rift`, `Auto`, `Medium`, `Comfortable`, `100`).
 - Renders the drawer with `open` (controlled) and confirms the same.
 - Renders a custom `trigger` and confirms the custom trigger is rendered when the drawer is closed.
 
 **Composition story:**
 
-- The component owns its own composition. The composition story is the default render: header + seven rows + separators.
+- The component owns its own composition. The composition story is the default render: header + six rows + separators.
 
 **Token story:**
 
-- Renders the default drawer inside a `Theme` wrapper with `accentColor="silver"` and `accentColor="bronze"`. Asserts the active segmented option tracks `--dsx-color-primary` and is not affected by the accent token.
+- Renders the default drawer inside a `Theme` wrapper with `accentColor="warp"` and `accentColor="ray"`. Asserts the active segmented option tracks `--dsx-color-primary` while each accent preview continues to show the exact tier it represents.
 
 **A11y story:**
 
@@ -213,7 +212,7 @@ The playground registry for `config-drawer` does not expose prop controls. The c
 
 **State boundaries:**
 
-- Owned by ConfigDrawer: the seven default rows, their order, and the `SettingRow` layout.
+- Owned by ConfigDrawer: the six default rows, their order, the accent previews, and the `SettingRow` layout.
 - Owned by the consumer: the placement of the drawer, the custom `trigger` (if any), the controlled `open` / `onOpenChange` (if any), and the surrounding `ThemeProvider`.
 - Owned by `useTheme()`: every categorical selection (`theme`, `accentColor`, `grayColor`, `radius`, `density`, `scaling`) is read from and written to the active `ThemeProvider` context. The drawer does not own the value; it surfaces the control.
 

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

@@ -3,13 +3,6 @@ title: Container
 status: canonical
 category: Foundations
 archetype: layout-primitive
-package_path: packages/d4gger-design-system/src/components/container/Container.tsx
-css_path: packages/d4gger-design-system/src/styles/components/container.css
-props_path: packages/d4gger-design-system/src/components/container/container.props.ts
-test_path: packages/d4gger-design-system/src/test/components/Container.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
   - Flex
@@ -17,7 +10,7 @@ depends_on:
 
 # Container
 
-> 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
 
@@ -113,7 +106,7 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 | Max width | `var(--dsx-container-max-width, 1080px)` | Resolved from `size` |
 | Margin | `auto` | CSS keyword |
 | Padding inline | `var(--dsx-container-inset, var(--dsx-space-margin))` | Resolved from `inset` |
-| Display | `var(--dsx-box-display, flex)` | Inherited from `dsx-flex` |
+| Display | `var(--dsx-box-display, flex)` | Conditional: only applies when the `dsx-flex` class is written (a flex layout prop is set); otherwise the host keeps the CSS `block` default |
 | Gap | `var(--dsx-box-gap, 0)` | Inherited from `dsx-flex` |
 | Size ramp | `1`→`420px`, `2`→`640px`, `3`→`768px`, `4`→`1024px`, `content`→`1080px`, `wide`→`1200px`, `full`→`none` | `size` value resolution |
 | Inset ramp | `var(--dsx-space-{xs,sm,md,lg,xl,2xl,3xl,gutter,margin})` | `inset` value resolution (via `SpaceToken`) |
@@ -162,7 +155,7 @@ Container has no motion. The motion section is intentionally empty.
 
 **Default story:**
 
-- Renders `Container` with no extra props and a child node. Asserts the root classes are `dsx-container`, `dsx-flex`, and `dsx-box`, the host element is a `div`, and `--dsx-container-max-width` resolves to `1080px`.
+- Renders `Container` with no extra props and a child node. Asserts the root classes are `dsx-container` and `dsx-box` (the `dsx-flex` class is conditional — it is only written when a flex layout prop such as `direction`, `align`, `justify`, `gap`, or `wrap` is set), the host element is a `div`, and `--dsx-container-max-width` resolves to `1080px`.
 
 **Size story:**
 

package/dist/docs/{context-menu.md → components/context-menu.md}

@@ -3,26 +3,16 @@ title: ContextMenu
 status: canonical
 category: Components
 archetype: radix-compound
-package_path: packages/d4gger-design-system/src/components/contextMenu/ContextMenu.tsx
-css_path: packages/d4gger-design-system/src/styles/components/context-menu.css
-props_path: packages/d4gger-design-system/src/components/contextMenu/contextMenu.props.ts
-test_path: packages/d4gger-design-system/src/test/components/ContextMenu.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:
   - "@radix-ui/react-context-menu (the underlying Radix primitive; `ContextMenu.Root`, `Trigger`, `Content`, `Label`, `Separator`, `Group`, `Sub`, `RadioGroup`, `CheckboxItem`, `RadioItem`, `SubTrigger`, `SubContent` proxy to it)"
   - "Menu (the internal abstraction; `MenuContent`, `MenuItem`, `MenuPortal`, `MenuRoot`, `MenuSeparator` are wrapped to share the framer-motion content open / close animation and the portal theme mirroring)"
   - "@radix-ui/react-slot (powers `asChild` on `Shortcut` and the prop-def bag on `Item` / `SubTrigger`)"
-  - _internal/BaseDialog (PortalThemeBoundary + PortalThemeWrapper; mirrors the `data-dsx-*` attribute contract into the content portal; `MenuContent` consumes the wrapper)
-  - _internal/motion (MOTION_TRANSITIONS.menu for the content open / close animation, MOTION_TRANSITIONS.reduced for `prefers-reduced-motion: reduce`; consumed by `MenuContent` and inherited by the ContextMenu content)
-  - _internal/helpers/extractProps (turns the prop defs on `Item`, `SubTrigger`, and `Shortcut` into merged class + style output)
   - Icon (the `chevron-right` glyph on the sub-trigger; the `check` / `minus` glyphs on checkbox items)
 ---
 
 # ContextMenu
 
-> 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
 
@@ -166,7 +156,7 @@ Every CSS value the component paints is a `var(--dsx-*)` token. The `context-men
 | Content min-width | `var(--dsx-size-menu-min-width)` | Dropdown minimum width. |
 | Content padding | `var(--dsx-space-xs)` | Content gutter. |
 | Content border radius | `var(--dsx-rounded-lg)` | Content corner roundness. |
-| Content background | `var(--dsx-color-surface-overlay)` | Dropdown surface. |
+| Content background | `var(--dsx-color-panel-translucent)` | Dropdown surface. |
 | Content border | `var(--dsx-border-width-sm) solid var(--dsx-color-outline)` | Dropdown edge. |
 | Content z-index | `var(--dsx-z-index-dropdown)` | Stack above page. |
 | Item min-height | `var(--dsx-size-lg)` | Item touch target. |

package/dist/docs/{copy-button.md → components/copy-button.md}

@@ -3,13 +3,6 @@ title: CopyButton
 status: canonical
 category: Primitives
 archetype: composite
-package_path: packages/d4gger-design-system/src/components/copyButton/CopyButton.tsx
-css_path: packages/d4gger-design-system/src/styles/components/copy-button.css
-props_path: packages/d4gger-design-system/src/components/copyButton/copyButton.props.ts
-test_path: packages/d4gger-design-system/src/test/components/CopyButton.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/actions.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
 depends_on:
   - Button
   - Icon
@@ -17,7 +10,7 @@ depends_on:
 
 # CopyButton
 
-> 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
 
@@ -45,7 +38,7 @@ No slots: flat export. The component does not expose named subcomponents. The vi
 | `radius` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'full'` | `undefined` | no | Corner roundness; writes `data-radius` on the button. | no |
 | `color` | `string` | `undefined` | no | Accent color; writes `data-accent-color` on the button. The prop def has an empty enum so any string is accepted. | no |
 | `highContrast` | `boolean` | `false` | no | When `true`, swaps to the high-contrast palette; writes `data-high-contrast="true"` on the button. | no |
-| `asChild` | `boolean` | `false` | no | Renders through `Slot`; forwards to the underlying Button. | no |
+| `asChild` | `boolean` | `false` | no | Renders through `Slot`; forwards to the underlying Button. Styling slot only — the click handler always `preventDefault`s so the copy wins; do not use `asChild` with a navigating anchor. | no |
 | `aria-label` | `string` | `undefined` | no | Accessible name. When omitted and `children` is a string, the component uses that string as the label. Otherwise it falls back to `"Copy value"`. | no |
 | `disabled` | `boolean` | `undefined` | no | Standard button prop. Forwarded to the underlying Button. | no |
 | `className` | `string` | `undefined` | no | Extra classes appended to `dsx-copy-button` on the underlying button. | no |
@@ -94,20 +87,20 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 
 | Property | Token | Role |
 |---|---|---|
-| `transition` | `var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-in-out, ease-in-out)` | Animate the icon and color swap. |
-| Color (copied state) | `var(--dsx-color-success)` | Success state fill and border. |
-| Icon color (copied state) | `var(--dsx-color-success)` | Success state icon. |
+| `transition` | `var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-in-out, ease-in-out)` | Animate the icon swap. |
+| Color (copied state) | (none — inherits the variant fill) | The copied state never repaints (Direction #3 Q2 pick). |
+| Icon color (copied state) | `currentColor` | Check icon inherits the variant text color. |
 
 Rules:
 
 - No raw color, spacing, radius, or motion values in `copy-button.css`.
-- The non-copied state defers entirely to the underlying Button's class contract. CopyButton only overrides the success state.
+- The non-copied state defers entirely to the underlying Button's class contract. CopyButton only swaps the icon and label — no success wash on any variant.
 
 ## Motion contract
 
 | Region | Token | Default | Reduced |
 |---|---|---|---|
-| State transition (`all`) | `var(--dsx-motion-duration-fast, 150ms)` + `var(--dsx-motion-easing-in-out, ease-in-out)` | Animates the icon swap and color change when entering and leaving the success state. | `transition: none` inside `@media (prefers-reduced-motion: reduce)`. |
+| State transition (`all`) | `var(--dsx-motion-duration-fast, 150ms)` + `var(--dsx-motion-easing-in-out, ease-in-out)` | Animates the icon swap when entering and leaving the success state. | `transition: none` inside `@media (prefers-reduced-motion: reduce)`. |
 
 Rules:
 
@@ -132,11 +125,11 @@ Rules:
 
 **Reduced motion:**
 
-- The icon and color swap transition collapses to `none` when `prefers-reduced-motion: reduce` matches.
+- The icon swap transition collapses to `none` when `prefers-reduced-motion: reduce` matches.
 
 **Color and meaning:**
 
-- The success state is communicated by the check icon, copied label, success color, and a polite atomic live region.
+- The success state is communicated by the check icon, the copied label, and a polite atomic live region. No color change.
 
 **Naming:**
 
@@ -206,4 +199,4 @@ Rules:
 **Boundary rules:**
 
 - App-owned data: the copied value, the surrounding code or token surface, the clipboard environment handling, and the user feedback copy.
-- DS-owned visuals: the `dsx-copy-button` wrapper class, the success state modifier class, the success color and icon, the transition timing, and the underlying Button class contract.
+- DS-owned visuals: the `dsx-copy-button` wrapper class, the success state modifier class, the icon swap, the transition timing, and the underlying Button class contract.

package/dist/docs/{copy-field.md → components/copy-field.md}

@@ -3,13 +3,6 @@ title: CopyField
 status: canonical
 category: Components
 archetype: composite
-package_path: packages/d4gger-design-system/src/components/copyField/CopyField.tsx
-css_path: packages/d4gger-design-system/src/styles/components/copy-field.css
-props_path: packages/d4gger-design-system/src/components/copyField/copyField.props.ts
-test_path: packages/d4gger-design-system/src/test/components/CopyField.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:
   - Field
   - InputGroup
@@ -49,7 +42,7 @@ Root `dsx-copy-field`; value input `dsx-copy-field__input`; action `dsx-copy-fie
 
 ## Token mapping
 
-CopyField paints no new colors. Its only local sizing uses `var(--dsx-copy-field-action-min-width)` and spacing inherited from Field/InputGroup.
+CopyField paints no new colors. Its only local sizing uses `var(--dsx-copy-field-action-min-width)` and spacing inherited from Field/InputGroup. The copy action is a direct InputGroup child: join, radii, and height are group-owned, and it inherits the field-shell outline token (`--dsx-boundary-control-color`) at rest and hover, so the group reads as one frame. The read-only value half invites no hover: shell keeps its resting border/background under hover, cursor stays default.
 
 ## Motion contract
 
@@ -61,7 +54,7 @@ The label is connected with generated IDs. The input is read-only rather than di
 
 ## Playground demo spec
 
-Show default, all sizes, disabled, with/without description, full composition, clipboard success, light/dark, and alternate accents. Test clipboard success/failure and `vitest-axe`.
+Show default, all sizes, disabled, with/without description, full composition, clipboard success, light/dark. Theme/accent switching belongs to the config drawer — no per-component theme/accent stories. Test clipboard success/failure and `vitest-axe`.
 
 ## Wiring notes
 

package/dist/docs/{data-list.md → components/data-list.md}

@@ -3,20 +3,15 @@ title: DataList
 status: canonical
 category: Components
 archetype: composite
-package_path: packages/d4gger-design-system/src/components/dataList/DataList.tsx
-css_path: packages/d4gger-design-system/src/styles/components/data-list.css
-props_path: packages/d4gger-design-system/src/components/dataList/dataList.props.ts
-test_path: packages/d4gger-design-system/src/test/components/DataList.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/data.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
 depends_on:
   - Item
 ---
 
 # DataList
 
-> 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.
+Content regions use an intrinsic `8rem` flex basis, so sibling label/value regions wrap as readable blocks when they cannot fit together. The consumer can override the basis through ordinary style composition for a compact media row. No viewport breakpoint selects the arrangement.
+
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 
@@ -54,7 +49,7 @@ A structured list surface for metadata, attributes, or settings rows that render
 | Prop | Type | Default | Required | Description | Responsive |
 |---|---|---|---|---|---|
 | `variant` | `'default' \| 'outline' \| 'muted'` | `'default'` | no | Item surface treatment; writes `data-variant`. | no |
-| `size` | `'xs' \| 'sm' \| 'md' \| 'lg'` | `'md'` | no | Item min-height; writes `data-size`. | no |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg'` | `'md'` | no | Item min-height and vertical padding; writes `data-size`. | no |
 | `interactive` | `boolean` | `false` | no | When `true`, adds pointer cursor and hover styles; writes `data-interactive="true"`. | no |
 | `text` | `React.ReactNode` | `undefined` | no | Structured primary text content. | no |
 | `metadata` | `React.ReactNode` | `undefined` | no | Structured secondary text content. | no |
@@ -75,7 +70,9 @@ Rules:
 - `listType` and `asChild` on Root are wired through `extractProps`.
 - `variant`, `size`, and `interactive` on Item are wired through `extractProps`.
 - When `text`, `metadata`, `icon`, or `badge` props are provided on Item, the component renders structured content automatically. Otherwise, `children` are rendered directly.
-- Ordered lists use a CSS counter (`dsx-data-list-counter`) for markers; unordered lists use a bullet (`\2022`).
+- Ordered lists use a CSS counter (`dsx-data-list-counter`) for markers; unordered lists use a drawn dot (see below).
+- Item body wraps intrinsically and centers its slots vertically; `Media` keeps top alignment (`align-self: flex-start`) so icons/avatars anchor against multi-line text while text, badge, marker, and actions share one center line.
+- The unordered marker is a drawn dot (radial fill at a fixed fraction of the marker box), so it scales with item size for free; ordered numerals stay text (counter) at natural size. A text bullet glyph was tried and rejected: growing `font-size` compounds (the box's `em` resolves against the pseudo-element's own font-size), and the glyph renders font-dependent small.
 
 ## CSS class contract
 
@@ -114,6 +111,8 @@ Rules:
 
 - The component does not write `@media` rules. Size and variant are single-value only.
 
+- Primary and secondary text use `overflow-wrap: anywhere` so emails and identifiers stay inside their content column at narrow widths. The centered slot alignment and top-anchored media remain unchanged.
+
 **Reduced motion:**
 
 - Item body transitions use `var(--dsx-motion-duration-fast)` and `var(--dsx-motion-easing-standard)` for background-color, box-shadow, and color. No explicit `prefers-reduced-motion` gate in the CSS.
@@ -205,7 +204,7 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 
 **Composition story:**
 
-- Renders items using children-based composition with `DataList.Media`, `DataList.Content`, `DataList.Text`, `DataList.Metadata`, `DataList.Badge`, and `DataList.Actions` slots all populated.
+- Renders items using children-based composition with `DataList.Media`, `DataList.Content`, `DataList.Text`, `DataList.Metadata`, `DataList.Badge`, and `DataList.Actions` slots all populated. The profile example includes a working CopyButton for its email; a consumer-owned content basis keeps media and content together at narrow widths.
 
 **Token story:**
 
@@ -243,3 +242,9 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 
 - App-owned data: the list items, the item content, the action handlers, and the host element when `asChild` is set.
 - DS-owned visuals: token bindings, the `dsx-data-list` root class, the slot classes, and the `data-*` attribute contract.
+
+## Maintainer follow-up, 2026-10-03
+
+DataList represents ordered/unordered entries, not a semantic description list. The roster keeps Description List as a separate candidate. Playground examples show one primary text and subordinate metadata inside one Content slot per entry, with meaningful team and connection-priority lists. Two equal Content siblings are not the default example. The media/badge/action composition remains available.
+
+Item vertical padding scales with xs/sm/md/lg through space-xs/sm/md/lg, so identical content reveals actual density differences instead of masking the minimum-height scale.