@teamblind-chorus/ui 1.2.0 → 2.0.0

package/agents/components/list/accordion.spec.json

@@ -85,7 +85,7 @@
     },
     "item": {
       "required": true,
-      "description": "Single expandable row. Hairline `outlineVariant` divider inset 16px (`layout.container.md`) on BOTH the leading and trailing edges, painted as an absolutely-positioned `::after` overlay on every row except the last — matching the family-wide List row divider rule. `data-state='open' | 'closed'` reflects the current open-state.",
+      "description": "Single expandable row. Hairline `border.default` divider inset 16px (`layout.container.md`) on BOTH the leading and trailing edges, painted as an absolutely-positioned `::after` overlay on every row except the last — matching the family-wide List row divider rule. `data-state='open' | 'closed'` reflects the current open-state.",
       "intrinsic": true
     },
     "trigger": {
@@ -105,12 +105,12 @@
     },
     "content": {
       "required": true,
-      "description": "Body region. Paints below the trigger when open; uses `hidden` attribute when closed.\n\nTwo padding modes by content kind:\n\n- **Prose body** (text, icon, button, form-field): inline padding is `32px leading / 16px trailing` — one extra `layout.container.md` of indent on the leading edge so the prose reads as nested INSIDE the trigger's label column. `min-height: 40px` keeps short single-line bodies on a touch-target rhythm.\n- **Embedded row group** (`<List embedded>` or another `<Accordion embedded>`): inline padding is `16px leading / 0 trailing` — the leading indent is paid once by the body (sub-list rows align one container.md inside the trigger's label column) and the trailing rail is paid by the row's own inline padding, so the sub-list stretches flush to the accordion's right edge without a double-paid gutter. The body also paints a hairline `outlineVariant` divider at its TOP via a `::before` overlay (inset 16px on both inline edges, matching the inter-item divider rule) so the parent trigger and the child rows read as a parent ↔ child hierarchy.\n\nThe two modes are selected automatically via `:has([data-embedded='true'])` — call sites do not pass a mode prop; dropping a `<List embedded>` (or nested `<Accordion embedded>`) into the content body switches the body to compact-host geometry.",
+      "description": "Body region. Paints below the trigger when open; uses `hidden` attribute when closed.\n\nTwo padding modes by content kind:\n\n- **Prose body** (text, icon, button, form-field): inline padding is `32px leading / 16px trailing` — one extra `layout.container.md` of indent on the leading edge so the prose reads as nested INSIDE the trigger's label column. `min-height: 40px` keeps short single-line bodies on a touch-target rhythm.\n- **Embedded row group** (`<List embedded>` or another `<Accordion embedded>`): inline padding is `16px leading / 0 trailing` — the leading indent is paid once by the body (sub-list rows align one container.md inside the trigger's label column) and the trailing rail is paid by the row's own inline padding, so the sub-list stretches flush to the accordion's right edge without a double-paid gutter. The body also paints a hairline `border.default` divider at its TOP via a `::before` overlay (inset 16px on both inline edges, matching the inter-item divider rule) so the parent trigger and the child rows read as a parent ↔ child hierarchy.\n\nThe two modes are selected automatically via `:has([data-embedded='true'])` — call sites do not pass a mode prop; dropping a `<List embedded>` (or nested `<Accordion embedded>`) into the content body switches the body to compact-host geometry.",
       "accepts": ["text", "icon", "button", "list", "form-field"]
     },
     "groupDivider": {
       "required": false,
-      "description": "Hairline `outlineVariant` rule painted at the TOP edge of the open content body via a `::before` overlay when the body hosts a `<List embedded>` (or any same-kind row group). Inset 16px (`layout.container.md`) on both inline edges, matching the inter-item divider. Distinguishes the parent trigger from the child group so the hierarchy reads visually. Omitted for prose bodies.",
+      "description": "Hairline `border.default` rule painted at the TOP edge of the open content body via a `::before` overlay when the body hosts a `<List embedded>` (or any same-kind row group). Inset 16px (`layout.container.md`) on both inline edges, matching the inter-item divider. Distinguishes the parent trigger from the child group so the hierarchy reads visually. Omitted for prose bodies.",
       "intrinsic": true
     }
   },
@@ -119,9 +119,9 @@
     "triggerPaddingBlock": "sys.layout.container.xs",
     "triggerPaddingInline": "sys.layout.container.md",
     "triggerLabelTypo": "sys.typo.body.md",
-    "triggerLabelColor": "sys.color.onSurface",
+    "triggerLabelColor": "sys.color.text.default",
     "chevronSize": "sys.icon.md",
-    "chevronColor": "sys.color.onSurfaceVariant",
+    "chevronColor": "sys.color.text.subtle",
     "chevronGap": "sys.layout.inline.md",
     "chevronRotationDuration": "120ms",
     "chevronRotationTiming": "ease-out",
@@ -133,15 +133,15 @@
     "contentIndent": "sys.layout.container.md",
     "contentMinHeight": "ref.space.500",
     "contentBodyTypo": "sys.typo.body.sm",
-    "contentBodyColor": "sys.color.onSurfaceVariant",
+    "contentBodyColor": "sys.color.text.subtle",
     "embeddedRowLabelTypo": "sys.typo.body.sm",
     "embeddedRowMinHeight": "ref.space.500",
     "embeddedRowDivider": "none",
     "dividerWidth": "sys.borderWidth.hairline",
-    "dividerColor": "sys.color.outlineVariant",
+    "dividerColor": "sys.color.border.default",
     "dividerInsetInline": "sys.layout.container.md",
     "groupDividerWidth": "sys.borderWidth.hairline",
-    "groupDividerColor": "sys.color.outlineVariant",
+    "groupDividerColor": "sys.color.border.default",
     "groupDividerInsetInline": "sys.layout.container.md"
   },
   "appearances": {
@@ -162,25 +162,25 @@
       "focusRing": {
         "composition": "inward",
         "layer": "::before overlay — position:absolute, inset:0, inset box-shadow, no reflow (DESIGN.md Focus ring composition)",
-        "innerCounterRing": { "width": "sys.borderWidth.hairline", "color": "sys.color.focusInset" },
-        "outerRing": { "width": "sys.borderWidth.thin", "color": "sys.color.focus" }
+        "innerCounterRing": { "width": "sys.borderWidth.hairline", "color": "sys.color.border.focused" },
+        "outerRing": { "width": "sys.borderWidth.thin", "color": "sys.color.border.focused" }
       },
-      "note": "Keyboard-focus (:focus-visible) visual — a three-layer inward ring inside the trigger's footprint, with no state-overlay tint (the ring alone carries focus here). Mirrors the `focusIndicator` block for spec-only renderers. Composes over the lifecycle state the trigger is in."
+      "note": "Keyboard-focus (:focus-visible) visual — a single inward ring inside the trigger's footprint, with no state-overlay tint (the ring alone carries focus here). Mirrors the `focusIndicator` block for spec-only renderers. Composes over the lifecycle state the trigger is in."
     },
     "disabled": {
-      "containerOpacity": "sys.state.disabled",
-      "pointerEvents": "none"
+      "text": "sys.color.text.disabled",
+      "icon": "sys.color.icon.disabled",
+      "pointerEvents": "none",
+      "note": "Explicit disabled (no opacity): trigger text to text.disabled, chevron/icons to icon.disabled."
     }
   },
   "focusIndicator": {
-    "description": "Keyboard-focus visual painted as an inward 3-layer ring inside the trigger's footprint. Composes over whichever lifecycle state the trigger is in.",
+    "description": "Keyboard-focus visual painted as an inward single ring inside the trigger's footprint. Composes over whichever lifecycle state the trigger is in.",
     "composition": "inward",
-    "compositionReason": "Items tile flush with only a hairline `outlineVariant` divider between them; an outward ring would overlap the divider and the neighbouring row.",
+    "compositionReason": "Items tile flush with only a hairline `border.default` divider between them; an outward ring would overlap the divider and the neighbouring row.",
     "ring": {
-      "outerWidth": "sys.borderWidth.thin",
-      "outerColor": "sys.color.focus",
-      "insetWidth": "sys.borderWidth.hairline",
-      "insetColor": "sys.color.focusInset",
+      "width": "sys.borderWidth.hairline",
+      "color": "sys.color.border.focused",
       "implementation": "inset box-shadow on the trigger's `::before` overlay."
     },
     "trigger": ":focus-visible (keyboard / programmatic focus, never plain mouse click)"
@@ -203,7 +203,7 @@
     "content body painted with a chromatic fill (primaryContainer, etc.) — the body inherits the host surface tone; chromatic emphasis on an accordion body reads as a Banner aside, not a content section",
     "destructive commit fired inline inside the content body without a Button wrapper — destructive commits open a Dialog / BottomSheet, never fire from a raw content link",
     "child `<List>` dropped into the content body WITHOUT `embedded={true}` — the list keeps its own surface chrome + inline padding and double-pays the body's 32px leading indent, leaving child rows at a deeper inset than the trigger's label column. Use `embedded` so the list inherits the body's edges.",
-    "child list group rendered WITHOUT the top `outlineVariant` divider — the parent trigger and the first child row tile flush, collapsing the parent ↔ child hierarchy into one stack. The top divider is the visual contract that the group is nested, not co-equal.",
+    "child list group rendered WITHOUT the top `border.default` divider — the parent trigger and the first child row tile flush, collapsing the parent ↔ child hierarchy into one stack. The top divider is the visual contract that the group is nested, not co-equal.",
     "top group divider replaced with a `border-top:` on the list container — `border` reflows the box and breaks the inward focus ring on the first list row. Paint via the body's `::before` overlay (no-layout stroke), never a layout border.",
     "trigger label sized below 16px or set to Semibold — Accordion is a List sub and inherits the family `label` spec (`16 / Regular / onSurface`); a 14/Semibold trigger reads as a different family from the rows it nests"
   ]

package/agents/components/list/entry.md

@@ -10,7 +10,7 @@ Directory-entry [List](./list.md) sub — an entity row pairing an optional lead
 
 ## Default
 
-Directory entry rows — pick the Thumbnail rung via the **Size** dropdown (`xlarge` 56 → `small` 32). Row payload (label + stacked secondary + single-line description + trailing follow toggle) stays constant; only the leading avatar footprint changes. At `xlarge` the inter-row divider anchors to the text column (16 + 56 + 12 = 84) so the rule reads as separating identity columns under the wider avatar.
+A single directory entry row — the atomic Entry component: leading Thumbnail + identity group (label + stacked `secondary` + single-line `description`) + a trailing follow toggle. Pick the Thumbnail rung via the **Size** dropdown (`xlarge` 56 → `small` 32); the row payload stays constant, only the leading avatar footprint changes.
 
 ```preview
 list/entry
@@ -31,23 +31,11 @@ import { Button, List } from '@teamblind-chorus/ui';
         <Button variant="toggle" onClick={() => {}}>Follow</Button>
       ),
     },
-    {
-      value: 'indie-game-devs',
-      label: 'Indie Game Devs',
-      secondary: '8,210 Followers',
-      description: 'Solo dev diaries, first-release postmortems, jam recaps.',
-      thumbnail: { src: '/placeholder.png', alt: 'Indie Game Devs' },
-      trailingIcon: (
-        <Button variant="toggle" onClick={() => {}}>Follow</Button>
-      ),
-    },
   ]}
 />
 ```
 
-## Use cases
-
-### With trailing Text Button (compact attribution row)
+## Trailing Text Button
 
 Pairs a leading Thumbnail + label with a trailing [Text Button](../button/text.md) (`size="xsmall"`) and nothing else — the most compact *image + label + trailing-text-button* identity-plus-commit row. The button carries the **link-affordance follow / invite** shape: `appearance="accent"` while inactive (`Follow`) so the commit reads as the loudest call, flipping to `appearance="default"` once active (`Following`) so the followed state recedes. Distinct from the [Default](#default)'s `variant="toggle"` Follow chip — reach for the text button when the row reads as an attribution line (channel / author + follow) rather than a directory entry with a pill control. This is the exact combo the [Post carousel](../carousel/post.md) card pins to the top of each post as its attached attribution element.
 
@@ -68,21 +56,13 @@ import { Button, List } from '@teamblind-chorus/ui';
         <Button variant="text" size="xsmall" appearance="accent" onClick={() => {}}>Follow</Button>
       ),
     },
-    {
-      value: 'plant-people',
-      label: 'Plant People',
-      thumbnail: { src: '/placeholder.png', alt: 'Plant People' },
-      trailingIcon: (
-        <Button variant="text" size="xsmall" onClick={() => {}}>Following</Button>
-      ),
-    },
   ]}
 />
 ```
 
-### With trailing star toggle
+## Trailing star toggle
 
-Uses the **single-shape fill-only contract**: always `<StarFillIcon>`, color flips by state (active = `var(--sys-color-icon-yellow)`, inactive = `var(--sys-color-icon-muted)`). Shape stays constant so the trailing rail keeps a stable hit-target footprint — never swap between outline (`StarIcon`) and fill (`StarFillIcon`) for the same affordance. Rows with a trailing affordance default to `size="small"` (32) — the smaller leading footprint keeps the trailing rail visually balanced.
+Uses the **single-shape fill-only contract**: always `<StarFillIcon>`, color flips by state (active = `var(--sys-color-icon-accent-yellow-default)`, inactive = `var(--sys-color-icon-subtle)`). Shape stays constant so the trailing rail keeps a stable hit-target footprint — never swap between outline (`StarIcon`) and fill (`StarFillIcon`) for the same affordance. Rows with a trailing affordance default to `size="small"` (32) — the smaller leading footprint keeps the trailing rail visually balanced.
 
 ```preview
 list/entry-with-star
@@ -106,30 +86,7 @@ import { StarFillIcon } from '@teamblind-chorus/ui/icons';
           aria-label="Favorited"
           aria-pressed="true"
           icon={<StarFillIcon />}
-          style={{ color: 'var(--sys-color-icon-yellow)' }}
-          onClick={() => {}}
-        />
-      ),
-    },
-    {
-      value: 'stocks',
-      label: 'Stocks & Investing',
-      count: <Badge count={142} />,
-      thumbnail: { src: '/placeholder.png', alt: 'Stocks & Investing' },
-    },
-    {
-      value: 'movie-talk',
-      label: 'Movie Talk',
-      count: <Badge count={24} />,
-      thumbnail: { src: '/placeholder.png', alt: 'Movie Talk' },
-      trailingIcon: (
-        <Button
-          variant="icon"
-          size="medium"
-          aria-label="Favorite"
-          aria-pressed="false"
-          icon={<StarFillIcon />}
-          style={{ color: 'var(--sys-color-icon-muted)' }}
+          style={{ color: 'var(--sys-color-icon-accent-yellow-default)' }}
           onClick={() => {}}
         />
       ),
@@ -138,9 +95,9 @@ import { StarFillIcon } from '@teamblind-chorus/ui/icons';
 />
 ```
 
-### As nav option (trailing chevron Icon Button)
+## Nav option
 
-The trailing slot carries a default [Icon Button](../button/icon.md) (`variant="icon"`, `size="medium"`) filled with a right-pointing chevron — the canonical nav-option drill-in affordance. Reach for it when the row routes to a sub-page and you still want to expose an identity-bearing thumbnail (workspace switch, channel directory drill-in). For pure label-only nav stacks, omit `thumbnail` instead — see [the label-only case below](#label-only-no-thumbnail).
+The trailing slot carries a default [Icon Button](../button/icon.md) (`variant="icon"`, `size="medium"`) filled with a right-pointing chevron — the canonical nav-option drill-in affordance. Reach for it when the row routes to a sub-page and you still want to expose an identity-bearing thumbnail (workspace switch, channel directory drill-in). For pure label-only nav stacks, omit `thumbnail` instead — see [the label-only case below](#label-only).
 
 ```preview
 list/entry-as-nav-option
@@ -167,26 +124,11 @@ import { ChevronRightIcon } from '@teamblind-chorus/ui/icons';
         />
       ),
     },
-    {
-      value: 'indie-game-devs',
-      label: 'Indie Game Devs',
-      secondary: '8,210 Followers',
-      thumbnail: { src: '/placeholder.png', alt: 'Indie Game Devs' },
-      trailingIcon: (
-        <Button
-          variant="icon"
-          size="medium"
-          aria-label="Open Indie Game Devs"
-          icon={<ChevronRightIcon />}
-          onClick={() => {}}
-        />
-      ),
-    },
   ]}
 />
 ```
 
-### Label only (no thumbnail)
+## Label only
 
 Omit `thumbnail` on a row to collapse the leading column — the label sits flush at the 16 inline rail and the row reads as a label-only entry. Reach for it on settings menus, category indexes, and *pick a sub-page* stacks. Pair with a trailing chevron Icon Button to assemble the canonical nav-option row; this is the shape [NavList](../nav-list/nav-list.md) bundles under its header.
 
@@ -206,25 +148,61 @@ import { ChevronRightIcon } from '@teamblind-chorus/ui/icons';
         <Button variant="icon" size="medium" aria-label="Open Location" icon={<ChevronRightIcon />} onClick={() => {}} />
       ),
     },
+  ]}
+/>
+```
+
+## Group
+
+Several directory rows bundled into one `<List>`, each with the leading Thumbnail and a different trailing affordance — a Follow toggle, a star favorite, a drill-in chevron — the realistic directory composition the single-variant sections below each isolate one facet of. Rows tile with a hairline divider between them; the last row drops its divider automatically. At `xlarge` the inter-row divider anchors to the text column (16 + 56 + 12 = 84) so the rule reads as separating identity columns under the wider avatar.
+
+```preview
+list/entry-group
+---
+import { Button, List } from '@teamblind-chorus/ui';
+import { ChevronRightIcon, StarFillIcon } from '@teamblind-chorus/ui/icons';
+
+<List
+  variant="entry"
+  size="medium"
+  aria-label="Channels"
+  items={[
     {
-      value: 'job',
-      label: 'Job Function',
+      value: 'sourdough',
+      label: 'Sourdough Bakers',
+      secondary: '12.4K Followers',
+      thumbnail: { src: '/placeholder.png', alt: 'Sourdough Bakers' },
       trailingIcon: (
-        <Button variant="icon" size="medium" aria-label="Open Job Function" icon={<ChevronRightIcon />} onClick={() => {}} />
+        <Button variant="toggle" onClick={() => {}}>Follow</Button>
       ),
     },
     {
-      value: 'learning',
-      label: 'Learning & Advising',
+      value: 'stocks',
+      label: 'Stocks & Investing',
+      secondary: '8,210 Followers',
+      thumbnail: { src: '/placeholder.png', alt: 'Stocks & Investing' },
       trailingIcon: (
-        <Button variant="icon" size="medium" aria-label="Open Learning & Advising" icon={<ChevronRightIcon />} onClick={() => {}} />
+        <Button
+          variant="icon" size="medium"
+          aria-label="Favorited" aria-pressed="true"
+          icon={<StarFillIcon />}
+          style={{ color: 'var(--sys-color-icon-accent-yellow-default)' }}
+          onClick={() => {}}
+        />
       ),
     },
     {
-      value: 'money',
-      label: 'Money',
+      value: 'indiedev',
+      label: 'Indie Game Devs',
+      secondary: '3 new this week',
+      thumbnail: { src: '/placeholder.png', alt: 'Indie Game Devs' },
       trailingIcon: (
-        <Button variant="icon" size="medium" aria-label="Open Money" icon={<ChevronRightIcon />} onClick={() => {}} />
+        <Button
+          variant="icon" size="medium"
+          aria-label="Open Indie Game Devs"
+          icon={<ChevronRightIcon />}
+          onClick={() => {}}
+        />
       ),
     },
   ]}
@@ -236,11 +214,11 @@ import { ChevronRightIcon } from '@teamblind-chorus/ui/icons';
 - **container** — outer vertical stack (delegates to family).
 - **row** — single list item; whole row is the click target.
 - **leading** *(optional)* — [Thumbnail](../thumbnail/thumbnail.md) at the list's `size` rung (32 / 40 / 48 / 56). `thumbnail` props forward verbatim. Omit per row to collapse the leading column entirely — the leading→text gap (12) also drops, and the label sits flush at the 16 inline rail. Mix-and-match per row is supported.
-- **label** — primary row text. `sys.typo.label.md` (14 / Semibold) / `sys.color.onSurface`. Pairs flush with `count` on the primary line.
+- **label** — primary row text. `sys.typo.label.md` (14 / Semibold) / `sys.color.text.default`. Pairs flush with `count` on the primary line.
 - **count** *(optional)* — inline node painted to the right of the label on the same line (canonical: `<Badge count={n} />`). Separated by `sys.layout.inline.sm` (4); label shrinks first so a long name truncates against the count.
-- **secondary** *(optional)* — stacked meta line below the label inside the identity group (follower count, location). `sys.typo.label.sm` (12 / Semibold) / `sys.color.onSurface`. Tiles flush with the label — line-height-only spacing, no margin — so the two lines read as one tight identity block.
-- **description** *(optional)* — single-line caption-tone supporting line below the identity group. `sys.typo.label.sm` (12 / Semibold) / `sys.color.onSurfaceVariant`. Separated from the identity group by `ref.space.25` (2). Truncates with ellipsis; never wraps.
-- **trailingIcon** *(optional, per-row)* — consumer-supplied node at the trailing edge. Canonical fills: `<Button variant="toggle">` (Follow chip), `<Button variant="text" size="xsmall" appearance="accent">` (Follow / Invite link-affordance — the [attribution-row case](#with-trailing-text-button-compact-attribution-row)), `<Button variant="icon">` (favorite / overflow), `<Badge>`. Its own hit target — clicks stop propagating before reaching the row.
+- **secondary** *(optional)* — stacked meta line below the label inside the identity group (follower count, location). `sys.typo.label.sm` (12 / Semibold) / `sys.color.text.default`. Tiles flush with the label — line-height-only spacing, no margin — so the two lines read as one tight identity block.
+- **description** *(optional)* — single-line caption-tone supporting line below the identity group. `sys.typo.label.sm` (12 / Semibold) / `sys.color.text.subtle`. Separated from the identity group by `ref.space.25` (2). Truncates with ellipsis; never wraps.
+- **trailingIcon** *(optional, per-row)* — consumer-supplied node at the trailing edge. Canonical fills: `<Button variant="toggle">` (Follow chip), `<Button variant="text" size="xsmall" appearance="accent">` (Follow / Invite link-affordance — the [attribution-row case](#trailing-text-button)), `<Button variant="icon">` (favorite / overflow), `<Badge>`. Its own hit target — clicks stop propagating before reaching the row.
 - **divider** *(optional, per-row)* — pass `divider: false` to suppress the row's bottom hairline. Use when a visual group ends mid-stack and the divider would visually fence off the next group from its label.
 
 ## Anatomy
@@ -259,7 +237,7 @@ import { ChevronRightIcon } from '@teamblind-chorus/ui/icons';
 | description                | `sys.typo.label.sm` (12 / Semibold) / `onSurfaceVariant`, single-line ellipsis |
 | text column → trailing     | `sys.layout.inline.sm` (4) |
 | trailingIcon               | `<Button variant="icon">`, `<Button variant="toggle">`, `<Button variant="text" appearance="accent">`, or `<Badge>` |
-| inter-row divider          | `1px` `outlineVariant`. Default (`small` / `medium` / `large`): `16` inset from both edges. `xlarge`: leading inset anchors to the text column (`16 + 56 + 12 = 84`) so the rule reads as separating identity columns; trailing inset stays at `16`. **Label-only rows** (no thumbnail): leading inset falls back to the default `16` regardless of `size`. |
+| inter-row divider          | `1px` `border.default`. Default (`small` / `medium` / `large`): `16` inset from both edges. `xlarge`: leading inset anchors to the text column (`16 + 56 + 12 = 84`) so the rule reads as separating identity columns; trailing inset stays at `16`. **Label-only rows** (no thumbnail): leading inset falls back to the default `16` regardless of `size`. |
 
 ## States
 
@@ -267,7 +245,7 @@ No `selected` state. State overlays (hover / pressed / disabled) delegate to the
 
 ## Focus indicator
 
-Inward 3-layer ring inside the row's bounds — see the family-wide [Focus indicator](./list.md#cross-sub-contract). The whole row is the keyboard target; a trailing toggle / icon button carries its own focus ring per its component spec.
+Inward single ring inside the row's bounds — see the family-wide [Focus indicator](./list.md#cross-sub-contract). The whole row is the keyboard target; a trailing toggle / icon button carries its own focus ring per its component spec.
 
 ## Behavior
 

package/agents/components/list/entry.spec.json

@@ -31,7 +31,7 @@
   "slots": {
     "container": {
       "required": true,
-      "description": "Outer scroll surface. Vertical stack with a transparent fill (inherits parent container tone); rows separated by a 1px outlineVariant divider, not a gap."
+      "description": "Outer scroll surface. Vertical stack with a transparent fill (inherits parent container tone); rows separated by a 1px border.default divider, not a gap."
     },
     "row": {
       "required": true,
@@ -40,7 +40,7 @@
     "leading": {
       "required": false,
       "omittedBehavior": "collapsed",
-      "fallbackOnMissingSrc": "sys.color.surfaceContainerHigh",
+      "fallbackOnMissingSrc": "sys.color.surface.sunken",
       "description": "Optional Thumbnail at the leading edge at the list's `size` rung (32 / 40 / 48 / 56), vertically centred against the text column. Forwarded verbatim from item.thumbnail. When `thumbnail` is omitted on a row descriptor the leading column collapses, the `leading → text` (12) gap drops to 0, and the label sits flush at the 16 inline rail — reach for it on label-only nav rows (settings menu, category index) and mix-and-match identity rows. `fallbackOnMissingSrc` is the dim-tone fill the Thumbnail paints when `src` is present but empty / fails to load — at scaffold time, agents fill `src` with `/placeholder.png` rather than relying on the fallback. To intentionally render a label-only row, omit `thumbnail` entirely rather than passing an empty `src`.",
       "accepts": [
         "thumbnail"
@@ -48,7 +48,7 @@
     },
     "label": {
       "required": true,
-      "description": "Primary row text. `sys.typo.label.md` (14 / Semibold) / `sys.color.onSurface`. Single line; truncates with ellipsis. Pairs flush with the inline `count` slot — no gap between them, only `sys.layout.inline.sm` (4) horizontal separation on the primary row.",
+      "description": "Primary row text. `sys.typo.label.md` (14 / Semibold) / `sys.color.text.default`. Single line; truncates with ellipsis. Pairs flush with the inline `count` slot — no gap between them, only `sys.layout.inline.sm` (4) horizontal separation on the primary row.",
       "accepts": [
         "text"
       ]
@@ -63,14 +63,14 @@
     },
     "secondary": {
       "required": false,
-      "description": "Optional stacked meta line painted below the label inside the identity group (e.g. `'12.4K Followers'`, `'Brooklyn, NY · Home baker'`). `sys.typo.label.sm` (12 / Semibold) / `sys.color.onSurface`. Tiles flush with the label — line-height-only spacing, no margin — so the two lines read as one tight identity block.",
+      "description": "Optional stacked meta line painted below the label inside the identity group (e.g. `'12.4K Followers'`, `'Brooklyn, NY · Home baker'`). `sys.typo.label.sm` (12 / Semibold) / `sys.color.text.default`. Tiles flush with the label — line-height-only spacing, no margin — so the two lines read as one tight identity block.",
       "accepts": [
         "text"
       ]
     },
     "description": {
       "required": false,
-      "description": "Optional secondary line under the identity group. `sys.typo.label.sm` (12 / Semibold) / `sys.color.onSurfaceVariant`. Single line; truncates with ellipsis. Separated from the identity group by `ref.space.25` (2) so the description reads as a tight supporting layer below the name rather than as a co-equal line.",
+      "description": "Optional secondary line under the identity group. `sys.typo.label.sm` (12 / Semibold) / `sys.color.text.subtle`. Single line; truncates with ellipsis. Separated from the identity group by `ref.space.25` (2) so the description reads as a tight supporting layer below the name rather than as a co-equal line.",
       "accepts": [
         "text"
       ]
@@ -126,7 +126,7 @@
     "divider": {
       "type": "boolean",
       "default": true,
-      "description": "Per-row bottom-divider opt-out. Pass `divider: false` to suppress the hairline `outlineVariant` rule beneath the row; the row's footprint and inline padding stay unchanged. Reach for it when a visual group ends mid-stack and the divider would visually fence off the next group from its label."
+      "description": "Per-row bottom-divider opt-out. Pass `divider: false` to suppress the hairline `border.default` rule beneath the row; the row's footprint and inline padding stay unchanged. Reach for it when a visual group ends mid-stack and the divider would visually fence off the next group from its label."
     },
     "strong": {
       "type": "boolean",
@@ -156,17 +156,17 @@
     "trailingActionGap": "sys.layout.inline.md",
     "trailingActionGapNote": "Fixed 8px between the text group and a trailing action — the family-wide trailing gap.",
     "dividerWidth": "sys.borderWidth.hairline",
-    "dividerColor": "sys.color.outlineVariant",
+    "dividerColor": "sys.color.border.default",
     "dividerPerRowOptOut": "Pass `divider: false` on a row to suppress its bottom divider.",
     "labelTypo": "sys.typo.label.md",
-    "labelColor": "sys.color.onSurface",
+    "labelColor": "sys.color.text.default",
     "labelToCountGap": "sys.layout.inline.sm",
     "secondaryTypo": "sys.typo.label.sm",
-    "secondaryColor": "sys.color.onSurface",
+    "secondaryColor": "sys.color.text.default",
     "secondaryToLabelGap": "0",
     "identityToDescriptionGap": "ref.space.25",
     "descriptionTypo": "sys.typo.label.sm",
-    "descriptionColor": "sys.color.onSurfaceVariant",
+    "descriptionColor": "sys.color.text.subtle",
     "descriptionMaxLines": 1,
     "leadingThumbnailSize": {
       "small": 32,
@@ -176,7 +176,7 @@
     },
     "dividerInset": "left 16 + right 16 from the row's edges (overrides the family-wide `right: 0` rule). At `size=\"xlarge\"`, the divider's left edge anchors to the text column instead (16 + 56 + 12 = 84 from the row's leading edge) so the rule reads as separating the text columns of two suggestion rows. Label-only rows (no thumbnail) always fall back to the default 16 inset regardless of `size` — there is no avatar column to anchor against.",
     "trailingIconSize": "16 × 16",
-    "trailingIconColor": "sys.color.onSurfaceVariant"
+    "trailingIconColor": "sys.color.text.subtle"
   },
   "states": {
     "default": {
@@ -204,37 +204,34 @@
         "layer": "::after/::before overlay — position:absolute, inset:0, inset box-shadow, no reflow (DESIGN.md Focus ring composition)",
         "innerCounterRing": {
           "width": "sys.borderWidth.hairline",
-          "color": "sys.color.focusInset"
+          "color": "sys.color.border.focused"
         },
         "outerRing": {
           "width": "sys.borderWidth.thin",
-          "color": "sys.color.focus"
+          "color": "sys.color.border.focused"
         }
       },
       "note": "Keyboard-focus (:focus-visible) visual. Mirrors the `focusIndicator` block (the external-reader contract); kept here so spec-only renderers see focus in the states map. Composes over the lifecycle state the row is in; never via plain mouse click."
     },
     "nestedActionScope": "The hover / pressed overlay is suppressed while the pointer sits on the independent trailing action (a favorite / follow / overflow control). The small control owns the state; the large row does NOT also read as hovered / pressed. The visual-state boundary matches the event boundary (the trailing action already stops propagation).",
     "disabled": {
-      "containerOpacity": "sys.state.disabled",
-      "containerOpacityScope": "Dims the row content only — the inter-row divider and the focus overlay keep full opacity, so a disabled row never fades the hairline rule between it and the next row.",
-      "pointerEvents": "none"
+      "text": "sys.color.text.disabled",
+      "icon": "sys.color.icon.disabled",
+      "pointerEvents": "none",
+      "note": "Explicit disabled (no opacity): row text to text.disabled, icons to icon.disabled. Divider/focus overlay unaffected."
     }
   },
   "focusIndicator": {
     "description": "Keyboard-focus visual — an accessibility indicator, not a lifecycle state. Composes over whichever lifecycle state the row is in.",
     "composition": "inward",
-    "compositionReason": "Rows tile the column flush with only a hairline `outlineVariant` divider between them; an outward ring would overlap the divider and the neighbouring row.",
+    "compositionReason": "Rows tile the column flush with only a hairline `border.default` divider between them; an outward ring would overlap the divider and the neighbouring row.",
     "overlay": {
       "color": "label",
       "opacity": "sys.state.focus"
     },
     "ring": {
-      "outerWidth": "sys.borderWidth.thin",
-      "outerColor": "sys.color.focus",
-      "outerLayerPosition": "depth 0..2px from the row edge (the outer stroke)",
-      "insetWidth": "sys.borderWidth.hairline",
-      "insetColor": "sys.color.focusInset",
-      "insetLayerPosition": "depth 2..3px from the row edge (the counter-ring just inside the outer stroke)",
+      "width": "sys.borderWidth.hairline",
+      "color": "sys.color.border.focused",
       "implementation": "inset box-shadow on the row's `::before` overlay (the `::after` carries the inter-row divider). Constrained strictly inside the row's footprint and never exceeds it."
     },
     "trigger": ":focus-visible (keyboard / programmatic focus, never plain mouse click)"

package/agents/components/list/list.md

@@ -10,7 +10,7 @@ A vertically-stacked sequence of rows for menus, settings panels, picker sheets,
 
 ## Cross-sub contract
 
-- **Container.** Vertical stack, transparent fill (inherits the parent surface). Rows separated by a 1px `outlineVariant` divider inset 16px (`layout.container.md`) from **both** the leading and trailing edges so the rule reads as separating *content*, not the container. The Entry sub overrides the leading inset at `size="xlarge"` only — see [entry.md](./entry.md). No outer radius — corner shape belongs to the wrapping container.
+- **Container.** Vertical stack, transparent fill (inherits the parent surface). Rows separated by a 1px `border.default` divider inset 16px (`layout.container.md`) from **both** the leading and trailing edges so the rule reads as separating *content*, not the container. The Entry sub overrides the leading inset at `size="xlarge"` only — see [entry.md](./entry.md). No outer radius — corner shape belongs to the wrapping container.
 - **Row geometry.** 8px block / 16px inline padding (`layout.container.xs` / `layout.container.md`); min-height 48px. Row spacing is **role-based**, not a single flex gap: the **text group → trailing action** gap is a fixed `layout.inline.md` (8px) in every sub, while the **leading → text group** gap depends on the leading *type* — `layout.inline.md` (8px) for an icon leading (Radio's indicator), `layout.inline.lg` (12px) for an image leading (a Standard row's `thumbnail` image type / Entry Thumbnail). A label-only Entry row (no `thumbnail`) drops the leading gap to 0. Row grows when `supportingText` is present.
 - **Label column.** Label: 16px / Regular / `onSurface` (sub-list rows compressed inside an accordion render at 14px / Regular — see [accordion.md](./accordion.md) § Nested list; Entry rows promote the label to 14px / Semibold so the inline `count` reads as part of the identity group). SupportingText: 14px / Regular / `onSurfaceVariant`, sits directly under the label with no extra gap — the two lines stack on the label-column's intrinsic line-box rhythm. The Entry sub replaces the second line with a single-line `description` (12px / Regular / `onSurfaceVariant`, separated from the identity group by `ref.space.25` (2) — see [entry.md](./entry.md)). All secondary lines truncate with ellipsis.
 - **Strong-label opt-in.** Pass `strong={true}` on a row (`<Accordion.Item strong>` on the accordion sub) to promote the label's weight from Regular (`body.*-weight`, 400) to Semibold (`label.*-weight`, 600) at the same size and line-height — `body.md → label.lg` at the 16 rung, `body.sm → label.md` at the 14 rung. The row's geometry (height, dividers, slot positions) is unchanged; only the label glyphs gain stroke weight. Reach for it when one row needs to read as the primary entry within a denser scan — the active company in a directory, the canonical answer in an FAQ, the user's own row in a member list. Use sparingly — a stack where every row is strong reads as the default again, defeating the marker.
@@ -23,4 +23,4 @@ A vertically-stacked sequence of rows for menus, settings panels, picker sheets,
 - **[Standard](./standard.md)** — Display / navigation rows; the default sub for menu lists that route or fire without a selection model. Text-only by default (no leading slot, whole row is the click target); a row opts into a 40px leading [Thumbnail](../thumbnail/thumbnail.md) — the image type — by passing `thumbnail` (the former Image sub, now a per-row case), or a 24px (`sys.icon.lg`) leading glyph — the icon type — by passing `icon` (8px from the text group, mutually exclusive with `thumbnail`). A row opts into an inline `count` Badge to the right of the label (the unread / status-count case); for the avatar-anchored identity group with an inline count, reach for [Entry](./entry.md) instead. Set `nav: true` on a row for the drill-in chevron (the former Nav sub, now a per-row case).
 - **[Radio](./radio.md)** — Single-select picker with a leading 16px radio indicator; clicking a row commits its value via `onChange(value)`.
 - **[Entry](./entry.md)** — Directory-entry rows with a selectable 32 / 40 / 48 / 56 leading [Thumbnail](../thumbnail/thumbnail.md) (`size="small|medium|large|xlarge"`). Identity group of label + optional inline `count` Badge + optional stacked `secondary` line, plus an optional single-line `description` separated by `ref.space.25` (2). Same click semantics as Standard. The single home for every entity-row case (follow suggestion, member directory, subscription / channel / topic / playlist directory).
-- **[Accordion](./accordion.md)** — Expandable rows. Trailing edge auto-renders a `ChevronDownIcon` that rotates `0° → 180°` on expand; the open trigger hosts a content body (prose or another `<List embedded>`) indented one extra `layout.container.md` so the body reads as nested inside the trigger's label column. When the body holds a `<List embedded>`, a hairline `outlineVariant` divider paints at the top of the body so parent ↔ child hierarchy reads.
+- **[Accordion](./accordion.md)** — Expandable rows. Trailing edge auto-renders a `ChevronDownIcon` that rotates `0° → 180°` on expand; the open trigger hosts a content body (prose or another `<List embedded>`) indented one extra `layout.container.md` so the body reads as nested inside the trigger's label column. When the body holds a `<List embedded>`, a hairline `border.default` divider paints at the top of the body so parent ↔ child hierarchy reads.

package/agents/components/list/radio.md

@@ -4,7 +4,7 @@
 
 Single-select picker List sub-component. Each row carries a leading 24px (`sys.icon.lg`) radio indicator; clicking commits that row's value via `onChange(value)`. Exactly one row is selected at a time. Row geometry, typography, divider, state overlays, and inward focus ring all delegate to the [family-wide rules](./list.md); this sub documents the Radio-specific leading indicator and selection contract.
 
-**Reach for this when** the user picks exactly one value from a short, fully-visible set — sort order, range filter, equity tier. **Skip when** multiple values may be selected (use [`Chip variant="filter"`](../chip/filter.md) or [`Button variant="check"`](../button/check.md)), the set is long enough to demand a sheet-driven picker ([Select](../form-field/select.md)), or the row *only* navigates without selecting (use a [Standard](./standard.md) row with `nav: true`). When a value both selects *and* opens a deeper screen — a major category — keep Radio and add `nav: true` (see [Major category with a second screen](#major-category-with-a-second-screen)).
+**Reach for this when** the user picks exactly one value from a short, fully-visible set — sort order, range filter, equity tier. **Skip when** multiple values may be selected (use [`Chip variant="filter"`](../chip/filter.md) or [`Button variant="check"`](../button/check.md)), the set is long enough to demand a sheet-driven picker ([Select](../form-field/select.md)), or the row *only* navigates without selecting (use a [Standard](./standard.md) row with `nav: true`). When a value both selects *and* opens a deeper screen — a major category — keep Radio and add `nav: true` (see [Major category](#major-category)).
 
 **Layout inset.** `full-bleed` — sits as a direct child of the page shell. Each row pays its own `16px inline / 8px block` padding via `layout.container.*`; do **not** wrap the list in another `padding-inline` / `px-*` / `style={{ padding: … }}` div, or the radio indicator lands at a different inset than the section headings around it. Inside a bounded surface (Card / Dialog / BottomSheet / Sheet), apply the negative-margin opt-out — see [`AGENTS.md` § Composition rules](../../../AGENTS.md#composition-rules).
 
@@ -18,25 +18,22 @@ list/radio
 import { useState } from 'react';
 import { List } from '@teamblind-chorus/ui';
 
-const [value, setValue] = useState('week');
+const [value, setValue] = useState('trending');
 
 <List
   variant="radio"
   value={value}
   onChange={setValue}
+  aria-label="Sort posts by"
   items={[
-    { value: 'day',     label: 'Day' },
-    { value: 'week',    label: 'Week' },
-    { value: 'month',   label: 'Month' },
-    { value: 'quarter', label: 'Quarter' },
-    { value: 'year',    label: 'Year' },
+    { value: 'newest',     label: 'Newest first' },
+    { value: 'trending',   label: 'Trending' },
+    { value: 'most-liked', label: 'Most liked' },
   ]}
 />
 ```
 
-## Use cases
-
-### With supporting text
+## Supporting text
 
 Pairs each label with a secondary line — for when the label alone doesn't carry enough context (*sort orders explained in copy*, *equity types with one-line definitions*).
 
@@ -57,12 +54,11 @@ const [value, setValue] = useState('trending');
     { value: 'newest',     label: 'Newest first',  supportingText: 'Most recent posts at the top' },
     { value: 'trending',   label: 'Trending',      supportingText: 'Active threads from the last 24h' },
     { value: 'most-liked', label: 'Most liked',    supportingText: 'Highest like count this week' },
-    { value: 'oldest',     label: 'Oldest first',  supportingText: 'Earliest posts at the top' },
   ]}
 />
 ```
 
-### Disabled item
+## Disabled item
 
 A row pinned to `disabled: true` — pointer-events suppressed, indicator dims with the row at `sys.state.disabled` opacity. For options contextually unavailable but still belonging in the set (*paywalled tier*, *region-locked option*).
 
@@ -79,16 +75,14 @@ const [value, setValue] = useState('week');
   value={value}
   onChange={setValue}
   items={[
-    { value: 'day',     label: 'Day' },
-    { value: 'week',    label: 'Week' },
-    { value: 'month',   label: 'Month' },
-    { value: 'quarter', label: 'Quarter', disabled: true },
-    { value: 'year',    label: 'Year' },
+    { value: 'day',   label: 'Day' },
+    { value: 'week',  label: 'Week' },
+    { value: 'month', label: 'Month', disabled: true },
   ]}
 />
 ```
 
-### Major category with a second screen
+## Major category
 
 A `nav: true` row adds a trailing right-pointing chevron alongside the radio indicator — for a major category that both commits a value *and* opens a deeper screen of sub-options. Selecting the row fires `onChange`; the row's `onClick` routes to the second screen. The chevron is decorative; the whole row is the single click target.
 
@@ -109,7 +103,6 @@ const [value, setValue] = useState('apparel');
     { value: 'all',      label: 'All categories' },
     { value: 'apparel',  label: 'Apparel',     supportingText: 'Tops, outerwear, footwear', nav: true, onClick: () => {} },
     { value: 'home',     label: 'Home & living', supportingText: 'Furniture, decor, kitchen', nav: true, onClick: () => {} },
-    { value: 'beauty',   label: 'Beauty' },
   ]}
 />
 ```
@@ -137,7 +130,7 @@ const [value, setValue] = useState('apparel');
 
 ## Focus indicator
 
-Inward 3-layer ring inside the row's bounds — see [Focus indicator](./list.md#cross-sub-contract). The row is the keyboard target, not the indicator.
+Inward single ring inside the row's bounds — see [Focus indicator](./list.md#cross-sub-contract). The row is the keyboard target, not the indicator.
 
 ## Behavior