@teamblind-chorus/ui 1.2.0 → 2.0.0

package/agents/components/button/toggle.spec.json

@@ -63,16 +63,16 @@
   },
   "selectionStates": {
     "unselected": {
-      "background": "sys.color.primary",
-      "label": "sys.color.onPrimary",
+      "background": "sys.color.background.primary",
+      "label": "sys.color.text.onFill",
       "border": null
     },
     "selected": {
       "background": "transparent",
-      "label": "sys.color.onSurface",
+      "label": "sys.color.text.default",
       "border": {
         "width": "sys.borderWidth.hairline",
-        "color": "sys.color.outlineVariant"
+        "color": "sys.color.border.default"
       }
     }
   },
@@ -102,11 +102,11 @@
         "layer": "::after overlay — position:absolute, inset:0, 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 button is in; never via plain mouse click."
@@ -121,21 +121,19 @@
   "focusIndicator": {
     "description": "Keyboard-focus visual — an accessibility indicator, not a lifecycle state. Composes over whichever lifecycle state the button is in. The `states.focused` block above is kept for JSX runtime consumers; this block is the parallel external-reader contract.",
     "composition": "outward",
-    "compositionReason": "Action affordance with breathing room around it; the 3px outward extent is reserved by the surrounding layout.",
+    "compositionReason": "Action affordance with breathing room around it; the 1px outward ring is reserved by the surrounding layout.",
     "overlay": {
       "color": "label",
       "opacity": "sys.state.focus"
     },
     "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"
     },
     "trigger": ":focus-visible (keyboard / programmatic focus, never plain mouse click)"
   },
   "forbidden": [
-    "active state painted with sys.color.primary fill — active is transparent + hairline outline (the active state recedes, not asserts)",
+    "active state painted with sys.color.background.primary fill — active is transparent + hairline outline (the active state recedes, not asserts)",
     "active state painted with any opaque surface fill (surface, surfaceContainer, surfaceContainerHigh) — the committed form is transparent so the host surface shows through; do not re-bind to a tier'd fill",
     "rest state without an explicit `active={false}` — toggle is a binary contract, never tristate",
     "manual width override that breaks the full-card stretch when used inside ProfileCarousel.followAction"

package/agents/components/button/toolbar.md

@@ -22,9 +22,7 @@ import { Button } from '@teamblind-chorus/ui';
 </Button>
 ```
 
-## Use cases
-
-### Accent
+## Accent
 
 Brand-blue fill, `onPrimary` label — the single-commit form. Used when the Toolbar Button IS the surface's commit affordance.
 
@@ -38,7 +36,7 @@ import { Button } from '@teamblind-chorus/ui';
 </Button>
 ```
 
-### Inverse
+## Inverse
 
 Mirror for inverse hosts (snackbars, coach-mark surfaces). Geometry identical; colour pair flips.
 
@@ -52,7 +50,7 @@ import { Button } from '@teamblind-chorus/ui';
 </Button>
 ```
 
-### With icon
+## Leading icon
 
 Context glyph before the label — tag for *Filters*, calendar for *Pick date*.
 
@@ -70,7 +68,7 @@ import { PlusIcon } from '@teamblind-chorus/ui/icons';
 </Button>
 ```
 
-### With trailing icon
+## Trailing icon
 
 Directional/destination glyph — chevron-down to open a menu, "×" to clear. Unlike standard [Button](./button.md), Toolbar Button carries trailing icons because its role is often *trigger* rather than commit.
 
@@ -88,7 +86,7 @@ import { CheckedIcon } from '@teamblind-chorus/ui/icons';
 </Button>
 ```
 
-### Icon only
+## Icon only
 
 Glyph-only 32×32 square. Requires `aria-label`. When the label slot is absent, inline padding drops to `sys.layout.container.xs` (8) so the glyph centers.
 
@@ -105,7 +103,22 @@ import { PlusIcon } from '@teamblind-chorus/ui/icons';
 />
 ```
 
-### Group
+## Focus ring
+
+Hairline stroke is kept underneath the standard ring.
+
+```preview
+button/toolbar/focused
+---
+import { Button } from '@teamblind-chorus/ui';
+import { PlusIcon } from '@teamblind-chorus/ui/icons';
+
+<Button variant="toolbar" state="focused" leadingIcon={<PlusIcon />}>
+  Add row
+</Button>
+```
+
+## Group
 
 Adjacent Toolbar Buttons share `4px` gap (`sys.layout.inline.sm`) with Filter chips. Mix freely.
 
@@ -128,21 +141,6 @@ import { PlusIcon, CheckedIcon } from '@teamblind-chorus/ui/icons';
 </div>
 ```
 
-### Focus indicator
-
-Hairline stroke is kept underneath the standard ring.
-
-```preview
-button/toolbar/focused
----
-import { Button } from '@teamblind-chorus/ui';
-import { PlusIcon } from '@teamblind-chorus/ui/icons';
-
-<Button variant="toolbar" state="focused" leadingIcon={<PlusIcon />}>
-  Add row
-</Button>
-```
-
 ## Slots
 
 - **label** — accessible name. Required, single line.
@@ -155,9 +153,9 @@ Only the container ↔ label colour pair flips; geometry identical. For inline d
 
 | Appearance  | Background                          | Border                                          | Label / icon                       | When to reach for it |
 |-------------|-------------------------------------|--------------------------------------------------|------------------------------------|----------------------|
-| `default`   | `sys.color.surfaceContainerHigh`    | 1px `sys.color.outlineVariant`                   | `sys.color.onSurface`              | Quiet inline action — toolbar opener, "Edit" beside a row title. |
-| `accent`    | `sys.color.primary`                 | none                                             | `sys.color.onPrimary`              | The single commit — a [Page](../navigation-bar/sub.md) bar's "Save". Never two in a row. |
-| `inverse`   | `sys.color.inverseSurface`          | none                                             | `sys.color.inverseOnSurface`       | Inside an inverse host (Toast, coach-mark). |
+| `default`   | `sys.color.surfaceContainerHigh`    | 1px `sys.color.border.default`                   | `sys.color.text.default`              | Quiet inline action — toolbar opener, "Edit" beside a row title. |
+| `accent`    | `sys.color.background.primary`                 | none                                             | `sys.color.text.onFill`              | The single commit — a [Page](../navigation-bar/sub.md) bar's "Save". Never two in a row. |
+| `inverse`   | `sys.color.background.inverse`          | none                                             | `sys.color.text.inverse`       | Inside an inverse host (Toast, coach-mark). |
 
 ## Sizes
 

package/agents/components/button/toolbar.spec.json

@@ -61,23 +61,23 @@
   },
   "appearances": {
     "default": {
-      "background": "sys.color.surfaceContainerHigh",
-      "label": "sys.color.onSurface",
+      "background": "sys.color.surface.default",
+      "label": "sys.color.text.default",
       "border": {
         "width": "sys.borderWidth.hairline",
-        "color": "sys.color.outlineVariant"
+        "color": "sys.color.border.default"
       },
       "note": "The canonical Toolbar Button chrome (mirrors Filter chip's unselected state). The chip-shape signals an inline action that lives within a row of peers (a toolbar, a card footer, a Page bar where the affordance is one of several actions the user might pick)."
     },
     "accent": {
-      "background": "sys.color.primary",
-      "label": "sys.color.onPrimary",
+      "background": "sys.color.background.primary",
+      "label": "sys.color.text.onFill",
       "border": null,
       "note": "Brand-blue commit chip — reach for it when the Toolbar Button IS the surface's commit affordance (a Page bar's 'Save', a sheet's 'Confirm', a flow step's 'Done'). The accent fill claims commit-rank attention while keeping the 32px Toolbar Button footprint, so the bar reads at one density even though the action is the screen's most important. Pair sparingly — never two accent Toolbar Buttons in the same row."
     },
     "inverse": {
-      "background": "sys.color.inverseSurface",
-      "label": "sys.color.inverseOnSurface",
+      "background": "sys.color.background.inverse",
+      "label": "sys.color.text.inverse",
       "border": null,
       "note": "Inverse-toned chip for use inside an inverse host (snackbars, coach-mark surfaces, dark coach overlays). Same chrome geometry as `default`; the colour pair flips to the inverse cluster so the chip reads against the host's `inverseSurface` fill without a per-host tweak."
     }
@@ -88,16 +88,14 @@
   "focusIndicator": {
     "description": "Keyboard-focus visual — an accessibility indicator, not a lifecycle state. Composes over whichever lifecycle state the button is in. Visual ring is delegated to Filter chip's composition; this block restates the contract for external readers.",
     "composition": "outward",
-    "compositionReason": "Action affordance with breathing room around it; the 3px outward extent is reserved by the surrounding toolbar row.",
+    "compositionReason": "Action affordance with breathing room around it; the 1px outward ring is reserved by the surrounding toolbar row.",
     "overlay": {
       "color": "label",
       "opacity": "sys.state.focus"
     },
     "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"
     },
     "trigger": ":focus-visible (keyboard / programmatic focus, never plain mouse click)"
   },

package/agents/components/carousel/carousel.md

@@ -19,7 +19,7 @@ Both subs share the same pager geometry — a `ref.space.500` (40px) trailing pe
 
 Every Carousel paints a [Header](../header/header.md) (`size="large"`) at the top:
 
-- **Label** *(required)* — `sys.typo.heading.md` / Semibold / `sys.color.onSurface`. Leading position.
+- **Label** *(required)* — `sys.typo.heading.md` / Semibold / `sys.color.text.default`. Leading position.
 - **headerAction** *(optional)* — trailing [Text Button](../button/text.md) (`size={'xsmall'}`, `appearance={'accent'}`) per the link-affordance rule. Extends the header when there's an index page to route to.
 
 Carousel forwards `label` and `headerAction` to [Header](../header/header.md) verbatim; the header anatomy lives in Header's spec. Other hosts (in-sheet sub-sections, bounded cards, [SuggestionList](../suggestion-list/suggestion-list.md)) reach for `<Header />` directly — Carousel is the labelled-region host, Header the leading-row primitive it composes.

package/agents/components/carousel/post.md

@@ -55,9 +55,7 @@ import { Carousel, PostCarousel } from '@teamblind-chorus/ui';
 </Carousel>
 ```
 
-## Use cases
-
-### With header action
+## Header action
 
 Extend the header with a trailing `accent` Text Button when there's an index page to route to. Lifts the `headerAction` prop on the `<Carousel>` wrapper.
 
@@ -69,17 +67,15 @@ import { Carousel, PostCarousel } from '@teamblind-chorus/ui';
 <Carousel label="Trending right now" headerAction={{ label: 'See all', href: '#' }}>
   <PostCarousel
     items={[
-      { avatar: { src: '/placeholder.png', alt: 'Channel' }, channel: 'Engineering',  verified: true, followAction: true, title: 'The migration that finally landed after three quarters', body: 'Internal postmortem turned editorial — the scaffolding that held the rewrite together when the timeline did not.', mention: '@infra-talk', views: '14K' },
-      { avatar: { src: '/placeholder.png', alt: 'Channel' }, channel: 'Compensation', verified: true, followAction: true, title: 'Equity refresh negotiations — what actually moves',       body: 'A read on the conversations that get an actual refresh on the calendar versus the ones that get a polite no.',   mention: '@career',     views: '9K'  },
-      { avatar: { src: '/placeholder.png', alt: 'Channel' }, channel: 'Plant People', verified: false, followAction: true, title: 'Monstera dropping aerial roots — repot or train?',          body: 'Two-year-old monstera, roots crawling out of the drainage holes. Light and watering are dialed in.',              mention: '@plant-parents', views: '3K' },
+      { avatar: { src: '/placeholder.png', alt: 'Channel' }, channel: 'Engineering', verified: true, followAction: true, title: 'The migration that finally landed after three quarters', body: 'Internal postmortem turned editorial — the scaffolding that held the rewrite together when the timeline did not.', mention: '@infra-talk', views: '14K' },
     ]}
   />
 </Carousel>
 ```
 
-### Editorial cards (no follow, no verified)
+## Editorial card
 
-Cards drop `verified` and `followAction` — each card's header collapses to avatar + channel name. Reach for it on editorial collections where the card is informational only (round-ups, archives, *what we're reading*); the surface should not invite a per-card commit.
+The card drops `verified` and `followAction` — its header collapses to avatar + channel name. Reach for it on editorial collections where the card is informational only (round-ups, archives, *what we're reading*); the surface should not invite a per-card commit.
 
 ```preview
 carousel/post-editorial
@@ -89,9 +85,7 @@ import { Carousel, PostCarousel } from '@teamblind-chorus/ui';
 <Carousel label="Editor picks">
   <PostCarousel
     items={[
-      { avatar: { src: '/placeholder.png', alt: 'Channel' }, channel: 'Career',       title: 'The quiet math of staying versus leaving',                body: 'Salary checks, offer evaluations, and the long thread that runs longer than any single conversation can.',                       views: '18K' },
-      { avatar: { src: '/placeholder.png', alt: 'Channel' }, channel: 'Compensation', title: 'Equity refresh negotiations — what actually moves',       body: 'A read on the conversations that get an actual refresh on the calendar versus the ones that get a polite no.',                     views: '9K'  },
-      { avatar: { src: '/placeholder.png', alt: 'Channel' }, channel: 'Engineering',  title: 'The migration that finally landed after three quarters', body: 'Internal postmortem turned editorial — the scaffolding that held the rewrite together when the timeline did not.',                 views: '14K' },
+      { avatar: { src: '/placeholder.png', alt: 'Channel' }, channel: 'Career', title: 'The quiet math of staying versus leaving', body: 'Salary checks, offer evaluations, and the long thread that runs longer than any single conversation can.', views: '18K' },
     ]}
   />
 </Carousel>
@@ -103,12 +97,12 @@ import { Carousel, PostCarousel } from '@teamblind-chorus/ui';
 - **pager** — horizontal scroll-snap track. `scroll-snap-type: x mandatory`; native scrollbar hidden.
 - **card** — one compact post card per page; outline-only surface.
   - **avatar** — [Thumbnail](../thumbnail/thumbnail.md) `size={40}`, every prop (`src`, `alt`, `updateDot`, `logoBadge`) forwarded verbatim.
-  - **verified** *(optional)* — `VerifiedFillIcon` (`sys.icon.md`, `sys.color.primary`) to the LEFT of the channel name so the trust signal reads first.
-  - **channel** — channel / author name. `sys.typo.label.md` / Semibold / `sys.color.onSurface`.
-  - **followAction** *(optional)* — trailing [Text Button](../button/text.md) (`xsmall`). `accent` inactive (link-affordance) → `default` active (recedes). Same trailing-Text-Button shape as [List/entry](../list/entry.md)'s [attribution-row case](../list/entry.md#with-trailing-text-button-compact-attribution-row) — see the Behavior note below.
-  - **title** — `sys.typo.label.md` / Semibold / `sys.color.onSurface`. Single line, truncates.
-  - **body** — `sys.typo.body.sm` / `sys.color.onSurfaceVariant`. Three-line clamp.
-  - **mention** *(optional)* — `sys.typo.body.sm` / `sys.color.primary` (not italic).
+  - **verified** *(optional)* — `VerifiedFillIcon` (`sys.icon.md`, `sys.color.background.primary`) to the LEFT of the channel name so the trust signal reads first.
+  - **channel** — channel / author name. `sys.typo.label.md` / Semibold / `sys.color.text.default`.
+  - **followAction** *(optional)* — trailing [Text Button](../button/text.md) (`xsmall`). `accent` inactive (link-affordance) → `default` active (recedes). Same trailing-Text-Button shape as [List/entry](../list/entry.md)'s [attribution-row case](../list/entry.md#trailing-text-button) — see the Behavior note below.
+  - **title** — `sys.typo.label.md` / Semibold / `sys.color.text.default`. Single line, truncates.
+  - **body** — `sys.typo.body.sm` / `sys.color.text.subtle`. Three-line clamp.
+  - **mention** *(optional)* — `sys.typo.body.sm` / `sys.color.background.primary` (not italic).
   - **footer** — leading 'See more' [Text Button](../button/text.md) (`xsmall` / `secondary`) + trailing view count (`EyeIcon` + count `<span>`).
 - **pagination** — [Pagination](../pagination/pagination.md) component, one dot per card (`count` = card count, `activeIndex` from scroll position). Decorative — dot tokens and the `aria-hidden` contract live on its spec; the carousel centers the intrinsic-width row (`align-self: center`).
 
@@ -118,11 +112,11 @@ import { Carousel, PostCarousel } from '@teamblind-chorus/ui';
 |-------------------|----------------|
 | container         | No fill / padding — surrounding [Carousel](../carousel/carousel.md) provides chrome; `sys.layout.stack.md` pager→dots gap |
 | pager             | `gap: sys.layout.inline.md`, `padding-left: sys.layout.container.md` + `scroll-padding-left: sys.layout.container.md` (the 16 rail; full-bleed host → trailing edge reached intrinsically, no negative margin), `scroll-snap-type: x mandatory`, `scrollbar-width: none` |
-| card              | `flex: 0 0 calc(100% - sys.layout.inline.md - ref.space.500)`; `sys.color.surface` fill, `sys.radius.md`, `sys.borderWidth.hairline sys.color.outlineVariant` outline (inset box-shadow), `sys.layout.container.md` padding, `sys.layout.stack.sm` between blocks, `scroll-snap-align: start` |
+| card              | `flex: 0 0 calc(100% - sys.layout.inline.md - ref.space.500)`; `sys.color.surface` fill, `sys.radius.md`, `sys.borderWidth.hairline sys.color.border.default` outline (inset box-shadow), `sys.layout.container.md` padding, `sys.layout.stack.sm` between blocks, `scroll-snap-align: start` |
 | header            | Row: avatar + verified mark + name + spacer + follow action; `align-items: center`; `sys.layout.inline.md` gap |
-| avatar / verified | [Thumbnail](../thumbnail/thumbnail.md) `size={40}` delegated verbatim · `VerifiedFillIcon` at `sys.icon.md` / `sys.color.primary` (resolves to `ref.palette.blue.500`), leading of the channel name |
-| channel / title   | `sys.typo.label.md`, `sys.color.onSurface`, single-line truncate |
-| body / mention    | `sys.typo.body.sm` / `sys.color.onSurfaceVariant` (three-line clamp) · mention in `sys.color.primary` |
+| avatar / verified | [Thumbnail](../thumbnail/thumbnail.md) `size={40}` delegated verbatim · `VerifiedFillIcon` at `sys.icon.md` / `sys.color.background.primary` (resolves to `ref.palette.blue.500`), leading of the channel name |
+| channel / title   | `sys.typo.label.md`, `sys.color.text.default`, single-line truncate |
+| body / mention    | `sys.typo.body.sm` / `sys.color.text.subtle` (three-line clamp) · mention in `sys.color.background.primary` |
 | followAction      | [Text Button](../button/text.md) `size={'xsmall'}`, `appearance={'accent'}` inactive → `appearance={'default'}` active; state tokens delegate to Text Button |
 | footer            | Row: leading 'See more' Text Button (`xsmall` / `secondary`) + trailing view count `<span>`; `justify-content: space-between` |
 | pagination dot    | [Pagination](../pagination/pagination.md) component delegated verbatim — 6 × 6 dots, active/inactive colors, and row gap bind on its spec |

package/agents/components/carousel/post.spec.json

@@ -26,12 +26,12 @@
     },
     "card": {
       "required": true,
-      "description": "One compact post card per page. `flex: 0 0 calc(100% - sys.layout.inline.md - ref.space.500)` so a 40px peek of the next card always surfaces at the trailing edge. `scroll-snap-align: start`. Inner padding `sys.layout.container.md`, `sys.color.surface` fill, `sys.radius.md` corner, `sys.borderWidth.hairline` outline in `sys.color.outlineVariant`.",
+      "description": "One compact post card per page. `flex: 0 0 calc(100% - sys.layout.inline.md - ref.space.500)` so a 40px peek of the next card always surfaces at the trailing edge. `scroll-snap-align: start`. Inner padding `sys.layout.container.md`, `sys.color.surface.default` fill, `sys.radius.md` corner, `sys.borderWidth.hairline` outline in `sys.color.border.default`.",
       "intrinsic": true
     },
     "header": {
       "required": true,
-      "description": "Top row of the card: avatar (Thumbnail size 40) + channel name + optional VerifiedIcon (size sys.icon.md, sys.color.primary) + trailing follow affordance. Rendered by the **shared `EntryRow` atom** — the same component [List/entry](../list/entry.md) rows render — wrapped in a carousel-specific `chorus-post-carousel__card-header`. See `behavior.headerReusesEntryCombo`.",
+      "description": "Top row of the card: avatar (Thumbnail size 40) + channel name + optional VerifiedIcon (size sys.icon.md, sys.color.background.primary) + trailing follow affordance. Rendered by the **shared `EntryRow` atom** — the same component [List/entry](../list/entry.md) rows render — wrapped in a carousel-specific `chorus-post-carousel__card-header`. See `behavior.headerReusesEntryCombo`.",
       "intrinsic": true
     },
     "avatar": {
@@ -44,16 +44,16 @@
     },
     "verified": {
       "required": false,
-      "description": "Inline `VerifiedFillIcon` at `sys.icon.md`, painted in `sys.color.primary` (resolves to `ref.palette.blue.500`). Sits to the **LEFT** of the channel name so the reader's eye lands on the trust signal first, then the name. Decorative — pair with a textual affordance elsewhere if the verified status itself is meaningful.",
+      "description": "Inline `VerifiedFillIcon` at `sys.icon.md`, painted in `sys.color.background.primary` (resolves to `ref.palette.blue.500`). Sits to the **LEFT** of the channel name so the reader's eye lands on the trust signal first, then the name. Decorative — pair with a textual affordance elsewhere if the verified status itself is meaningful.",
       "accepts": [
         "icon"
       ],
       "defaultIcon": "VerifiedFillIcon",
-      "defaultIconColor": "sys.color.primary"
+      "defaultIconColor": "sys.color.icon.accent.blue.default"
     },
     "channel": {
       "required": true,
-      "description": "Channel / author name. `sys.typo.label.md` / Semibold / `sys.color.onSurface`. Single line; truncates. Sits to the right of the optional `verified` mark inside the channel-row sub-container.",
+      "description": "Channel / author name. `sys.typo.label.md` / Semibold / `sys.color.text.default`. Single line; truncates. Sits to the right of the optional `verified` mark inside the channel-row sub-container.",
       "accepts": [
         "text"
       ]
@@ -68,28 +68,28 @@
     },
     "title": {
       "required": true,
-      "description": "Post title. `sys.typo.label.md` / Semibold / `sys.color.onSurface`. One line; truncates with ellipsis.",
+      "description": "Post title. `sys.typo.label.md` / Semibold / `sys.color.text.default`. One line; truncates with ellipsis.",
       "accepts": [
         "text"
       ]
     },
     "body": {
       "required": true,
-      "description": "Post excerpt. `sys.typo.body.sm` / Regular / `sys.color.onSurfaceVariant`. Three-line clamp with trailing ellipsis.",
+      "description": "Post excerpt. `sys.typo.body.sm` / Regular / `sys.color.text.subtle`. Three-line clamp with trailing ellipsis.",
       "accepts": [
         "text"
       ]
     },
     "mention": {
       "required": false,
-      "description": "Tap-anywhere mention / tag line below the body. `sys.typo.body.sm` / `sys.color.primary` (no italic — the carousel card reads tags as part of its body block, unlike the Feed · Post card which italicises a single mention).",
+      "description": "Tap-anywhere mention / tag line below the body. `sys.typo.body.sm` / `sys.color.background.primary` (no italic — the carousel card reads tags as part of its body block, unlike the Feed · Post card which italicises a single mention).",
       "accepts": [
         "text"
       ]
     },
     "footer": {
       "required": true,
-      "description": "Bottom row: leading `more` affordance + trailing view count. The 'See more' label renders as a [Text Button](../button/text.md) (`size={'xsmall'}`, `appearance={'secondary'}`) — same family as the card-header follow action — so both card affordances share one state contract. The view count renders as a non-interactive `<span>` matching the same `xsmall` rhythm (`EyeIcon` at `sys.icon.md` + `sys.typo.label.sm` / `sys.color.onSurfaceVariant`).",
+      "description": "Bottom row: leading `more` affordance + trailing view count. The 'See more' label renders as a [Text Button](../button/text.md) (`size={'xsmall'}`, `appearance={'secondary'}`) — same family as the card-header follow action — so both card affordances share one state contract. The view count renders as a non-interactive `<span>` matching the same `xsmall` rhythm (`EyeIcon` at `sys.icon.md` + `sys.typo.label.sm` / `sys.color.text.subtle`).",
       "intrinsic": true
     },
     "pagination": {
@@ -106,8 +106,8 @@
     "pagePeek": "ref.space.500",
     "pagePeekNote": "Guaranteed minimum visibility of the next card at the trailing edge. Pinned to `ref.space.500` (40px) — a raw ref step rather than a responsive sys-layout rung — because the carousel wants a fixed-pixel visibility floor independent of the responsive sys-layout shift. The card's flex-basis is `calc(100% - sys.layout.inline.md - ref.space.500)`, so the inter-card gap plus the peek subtract from the pager's inline space in lock-step.",
     "pageSnapAnchor": "Cards stick to the leading edge of the pager (the pager's own `padding-left: sys.layout.container.md`, the 16 rail). `scroll-snap-align: start` on each card plus the pager's `scroll-padding-left: sys.layout.container.md` together guarantee that, after every swipe, the snapped card aligns flush with the 16 rail — and the trailing edge holds the 40px peek of the next card.",
-    "cardFill": "sys.color.surface",
-    "cardOutline": "sys.borderWidth.hairline sys.color.outlineVariant",
+    "cardFill": "sys.color.surface.default",
+    "cardOutline": "sys.borderWidth.hairline sys.color.border.default",
     "cardRadius": "sys.radius.md",
     "cardPadding": "sys.layout.container.md",
     "cardStackGap": "sys.layout.stack.sm",
@@ -115,23 +115,23 @@
     "cardAvatarSize": 40,
     "cardAvatarRendersAs": "Thumbnail at size 40 — the carousel does not paint its own circular crop or fallback; both come from the Thumbnail family.",
     "cardChannelTypo": "sys.typo.label.md",
-    "cardChannelColor": "sys.color.onSurface",
+    "cardChannelColor": "sys.color.text.default",
     "cardVerifiedIcon": "VerifiedFillIcon",
     "cardVerifiedSize": "sys.icon.md",
-    "cardVerifiedColor": "sys.color.primary",
+    "cardVerifiedColor": "sys.color.text.link",
     "cardVerifiedColorResolved": "ref.palette.blue.500",
     "cardVerifiedPosition": "Leading — sits to the LEFT of the channel name inside the channel-row sub-container.",
     "cardFollowActionRendersAs": "Button variant='text' size='xsmall' appearance='accent' (inactive — link-affordance rule) → appearance='default' (active — followed state recedes). All state tokens delegate to the Text Button family.",
     "cardMoreActionRendersAs": "Button variant='text' size='xsmall' appearance='secondary'. Same Text Button rung as the follow action so the card's two affordances share one state contract.",
     "cardTitleTypo": "sys.typo.label.md",
-    "cardTitleColor": "sys.color.onSurface",
+    "cardTitleColor": "sys.color.text.default",
     "cardBodyTypo": "sys.typo.body.sm",
-    "cardBodyColor": "sys.color.onSurfaceVariant",
+    "cardBodyColor": "sys.color.text.subtle",
     "cardBodyLineClamp": 3,
     "cardMentionTypo": "sys.typo.body.sm",
-    "cardMentionColor": "sys.color.primary",
+    "cardMentionColor": "sys.color.text.mention",
     "cardFooterTypo": "sys.typo.label.sm",
-    "cardFooterColor": "sys.color.onSurfaceVariant",
+    "cardFooterColor": "sys.color.text.subtle",
     "cardFooterIcon": "EyeIcon",
     "cardFooterIconSize": "sys.icon.md",
     "paginationRendersAs": "Pagination component — dot size / gap / radius and active / inactive colors all delegate to the [Pagination](../pagination/pagination.md) spec.",

package/agents/components/carousel/profile.md

@@ -56,9 +56,7 @@ import { Carousel, ProfileCarousel } from '@teamblind-chorus/ui';
 </Carousel>
 ```
 
-## Use cases
-
-### With header action
+## Header action
 
 Extend the header with a trailing `accent` Text Button when there's an index page to route to. Lifts the `headerAction` prop on the `<Carousel>` wrapper.
 
@@ -80,33 +78,12 @@ import { Carousel, ProfileCarousel } from '@teamblind-chorus/ui';
           { icon: 'heart', value: '81%' },
         ],
       },
-      {
-        avatar: { src: '/placeholder.png', alt: 'Tesla' },
-        name: 'Tesla',
-        followers: '1.4K followers',
-        metrics: [
-          { icon: 'star', value: '4.7' },
-          { icon: 'pulse', value: '86' },
-          { icon: 'heart', value: '85.3%' },
-        ],
-        followed: true,
-      },
-      {
-        avatar: { src: '/placeholder.png', alt: 'Stripe' },
-        name: 'Stripe',
-        followers: '2.1K followers',
-        metrics: [
-          { icon: 'star', value: '4.5' },
-          { icon: 'pulse', value: '92.4' },
-          { icon: 'heart', value: '88%' },
-        ],
-      },
     ]}
   />
 </Carousel>
 ```
 
-### With description
+## With description
 
 The metrics row swaps out for a two-line description. Use for editorial collections where the value of each profile is best explained in copy (channel topic, hot pitch) rather than numeric signals. The description block is fixed to the same two-line height as the metrics row, so cards stay flush across both modes even when description copy clamps with an ellipsis.
 
@@ -124,19 +101,6 @@ import { Carousel, ProfileCarousel } from '@teamblind-chorus/ui';
         followers: '12.4K followers',
         description: 'Hands-on threads about systems, infra, and the work behind the launch.',
       },
-      {
-        avatar: { src: '/placeholder.png', alt: 'Compensation' },
-        name: 'Compensation',
-        followers: '8.1K followers',
-        description: 'Salary checks, offer evaluations, and the quiet math of staying versus leaving — the channel that runs longer than any single conversation can.',
-        followed: true,
-      },
-      {
-        avatar: { src: '/placeholder.png', alt: 'Career' },
-        name: 'Career',
-        followers: '5.3K followers',
-        description: 'Promotion packets, scope debates, and the rewrites that actually cleared.',
-      },
     ]}
   />
 </Carousel>
@@ -149,9 +113,9 @@ import { Carousel, ProfileCarousel } from '@teamblind-chorus/ui';
 - **card** — one profile card per page; fixed at **176px** wide.
   - **cover** — top band; 88px tall image-area slot. Renders an `<img>` defaulting to `/placeholder.png` (universal Chorus placeholder). `object-fit: cover` crops to fill the band; `sys.color.surfaceContainerHigh` underlies as the no-image fallback. Consumers override via `items[i].cover.src`.
   - **avatar** — [Thumbnail](../thumbnail/thumbnail.md) `size={64}` with [`outlined={true}`](../thumbnail/thumbnail.md#with-surface-outline), centered and overlapping the cover band's bottom edge. The 2-token (`sys.borderWidth.thin`) `surface`-tone outset halo separating the circle from the cover image is owned by Thumbnail's outlined case — the carousel forwards the prop instead of painting a halo on its own wrapper.
-  - **name** — entity name; `sys.typo.label.md` / Semibold / `sys.color.onSurface`; centered, single line truncate.
-  - **followers** — follower count; `sys.typo.label.sm` / `sys.color.onSurfaceVariant`; centered.
-  - **metrics** *(optional)* — row of `icon + value` chips: `star → StarFillIcon (sys.color.icon.yellow)`, `pulse → PulseFillIcon (sys.color.success)`, `heart → HeartFillIcon (sys.color.icon.red)`. Mutually exclusive with `description`.
+  - **name** — entity name; `sys.typo.label.md` / Semibold / `sys.color.text.default`; centered, single line truncate.
+  - **followers** — follower count; `sys.typo.label.sm` / `sys.color.text.subtle`; centered.
+  - **metrics** *(optional)* — row of `icon + value` chips: `star → StarFillIcon (sys.color.icon.accent.yellow.default)`, `pulse → PulseFillIcon (sys.color.text.success)`, `heart → HeartFillIcon (sys.color.icon.accent.red.default)`. Mutually exclusive with `description`.
   - **description** *(optional)* — two-line clamped paragraph that replaces the metrics row when present. Block height fixed to two lines of `sys.typo.label.sm` regardless of copy length, so card height stays consistent across metrics-carrying and copy-carrying cards.
   - **followAction** — full-width [Toggle Button](../button/text.md) (`variant={'toggle'}`); `Follow` (inactive) / `Following` (active).
 - **pagination** — [Pagination](../pagination/pagination.md) component, one dot per card (`count` = card count, `activeIndex` from scroll position). Decorative — dot tokens and the `aria-hidden` contract live on its spec; the carousel centers the intrinsic-width row (`align-self: center`).
@@ -164,11 +128,11 @@ import { Carousel, ProfileCarousel } from '@teamblind-chorus/ui';
 | card           | Fixed `width: 176px`, `sys.color.surface` fill, `sys.radius.md`, inset hairline outline, `scroll-snap-align: start` |
 | cover          | 88px tall image-area slot. Default `src` = `/placeholder.png` (universal image placeholder), `object-fit: cover`, `sys.color.surfaceContainerHigh` underlay |
 | avatar         | [Thumbnail](../thumbnail/thumbnail.md) `size={64}` `outlined`, vertical center on cover's bottom edge. The 2-token `surface`-tone halo separating the circle from the cover image is painted by Thumbnail's `outlined` case (outset `box-shadow: 0 0 0 sys.borderWidth.thin sys.color.surface`) — wrapper has no halo of its own |
-| name           | `sys.typo.label.md`, `sys.color.onSurface`, centered |
-| followers      | `sys.typo.label.sm`, `sys.color.onSurfaceVariant`, centered |
+| name           | `sys.typo.label.md`, `sys.color.text.default`, centered |
+| followers      | `sys.typo.label.sm`, `sys.color.text.subtle`, centered |
 | metrics row    | `sys.layout.inline.md` gap, centered. Fixed-height slot — `calc(sys.typo.label.sm.size * sys.typo.label.sm.line * 2)` so the row always reserves two lines of `label.sm` regardless of content. |
-| metric chip    | `sys.icon.md` glyph + `sys.typo.label.sm` value; star → `StarFillIcon` (`sys.color.icon.yellow`), pulse → `PulseFillIcon` (`sys.color.success`), heart → `HeartFillIcon` (`sys.color.icon.red`) |
-| description    | `sys.typo.label.sm` / `sys.color.onSurfaceVariant`, centered, two-line clamp with trailing ellipsis. Two-layer DOM — outer container owns the same fixed-height slot as `metrics row` (min/max-height = 2 label.sm lines); inner `<p>` owns the `-webkit-line-clamp: 2` truncation. Split sidesteps a Chrome quirk where `display: -webkit-box` and explicit `height` on one element break the third-line clip. |
+| metric chip    | `sys.icon.md` glyph + `sys.typo.label.sm` value; star → `StarFillIcon` (`sys.color.icon.accent.yellow.default`), pulse → `PulseFillIcon` (`sys.color.text.success`), heart → `HeartFillIcon` (`sys.color.icon.accent.red.default`) |
+| description    | `sys.typo.label.sm` / `sys.color.text.subtle`, centered, two-line clamp with trailing ellipsis. Two-layer DOM — outer container owns the same fixed-height slot as `metrics row` (min/max-height = 2 label.sm lines); inner `<p>` owns the `-webkit-line-clamp: 2` truncation. Split sidesteps a Chrome quirk where `display: -webkit-box` and explicit `height` on one element break the third-line clip. |
 | followAction   | [Toggle Button](../button/text.md) (Chip-toggle anatomy), stretched to full card width |
 | pagination dot | [Pagination](../pagination/pagination.md) component delegated verbatim — 6 × 6 dots, active/inactive colors, and row gap bind on its spec |