banhaten 0.4.0 → 0.6.0

package/docs/design-system/components/approval-card.md

@@ -0,0 +1,134 @@
+# Approval Card
+
+Approval cards pause the agent for a human decision. `ApprovalQuestions` walks through up to a few single-choice questions with a free-text "Something else" option, `ApprovalCommand` asks to run a shell command, and `ApprovalPlan` presents a short plan as a pending to-do list with an optional auto-approve countdown. All three compose `ApprovalFrame`, the shared shell: a tinted icon header, the body, and an action row. Compose it yourself for another kind of decision.
+
+Questions slide vertically inside a viewport sized to the active one, step badges and countdown seconds roll their digits, and the plan composes Task List parts: a well root, a static header with the step count, and a preview fold.
+
+## API
+
+```tsx
+import {
+  ApprovalCommand,
+  ApprovalPlan,
+  ApprovalQuestions,
+} from "@/components/ui/approval-card"
+
+<ApprovalQuestions
+  onApprove={({ answers }) => submit(answers)}
+  onReject={skip}
+  questions={questions}
+/>
+
+<ApprovalCommand command="pnpm db:migrate && pnpm build" cwd="~/acme" onApprove={run} onReject={skip} />
+
+<ApprovalPlan onApprove={({ source }) => approve(source)} onViewPlan={openPlan} plan={plan} planTitle="Session auth migration" />
+```
+
+Every card also takes `title` and `approveLabel`, each with its own default, plus native `div` props.
+
+### ApprovalQuestions
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `questions` | `readonly ApprovalQuestion[]` | – | `{ id, prompt, options }` answered one at a time. |
+| `onApprove` | `(payload: { answers }) => void` | – | Fires once every question has an answer. |
+| `onReject` / `rejectLabel` | `() => void` / `string` | – / `"Skip"` | The skip action. |
+| `labels` | `Partial<ApprovalQuestionsLabels>` | English | Navigation and free-text copy. |
+
+### ApprovalCommand
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `command` / `cwd` | `string` | – | Command block content and the working directory above it. |
+| `onApprove` / `onReject` | `() => void` | – | Run and Skip actions. |
+| `rejectLabel` | `string` | `"Skip"` | Skip action copy. |
+
+### ApprovalPlan
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `plan` | `readonly ApprovalPlanStep[]` | – | Steps as `{ id, title }`, shown as pending to-do rows. Keep step details for the full plan that `onViewPlan` opens. |
+| `planTitle` / `planSummary` | `React.ReactNode` | – | Intro copy above the steps. |
+| `planPreviewCount` | `number` | `3` | Steps shown before the "more" fold. |
+| `autoApproveSeconds` | `number` | `0` | Opt-in countdown. At zero `onApprove` fires with `source: "timeout"`; choosing either action cancels it, and a new value restarts it. |
+| `onApprove` | `(payload: { source }) => void` | – | `source` is `"user"` for a click or `"timeout"` for the countdown. |
+| `onViewPlan` / `viewPlanLabel` | `() => void` / `string` | – / `"View plan"` | Secondary action that opens the full plan. |
+| `onDownload` / `onExpand` | `() => void` | – | Adds header actions. |
+| `labels` | `Partial<ApprovalPlanLabels>` | English | Countdown, fold, and header action copy. |
+
+### ApprovalFrame
+
+```tsx
+import { ApprovalFrame } from "@/components/ui/approval-card"
+
+<ApprovalFrame
+  approveLabel="Apply"
+  icon={<GitCompareIcon />}
+  onApprove={apply}
+  onSecondary={review}
+  secondaryLabel="Review"
+  title="Apply this change?"
+  tone="warning"
+>
+  <DiffSummary files={files} />
+</ApprovalFrame>
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `icon` / `tone` | `React.ReactNode` / `"info" \| "warning" \| "success"` | – | Header glyph in a tile tinted by `tone`; the tile sets the glyph's size and stroke. The ready-made cards use info for questions, warning for commands, and success for plans. |
+| `title` | `React.ReactNode` | – | Header copy. |
+| `approveLabel` / `onApprove` / `approveDisabled` | `string` / `() => void` / `boolean` | – / – / `false` | Primary action, disabled until the decision is complete. |
+| `secondaryLabel` / `onSecondary` | `string` / `() => void` | – | Secondary action. |
+| `headerActions` / `footerStart` | `React.ReactNode` | – | Controls at the end of the header, and content at the start of the action row. |
+
+## Install
+
+```bash
+npx banhaten add approval-card
+```
+
+## Examples
+
+Primary registry example: `examples/approval-card-demo.tsx`.
+
+## Token Contract
+
+The card uses `--bh-bg-raised`, `--bh-radius-2xl-12`, `--elevation-02`, and `--bh-space-xl-12` padding. Icon tiles map the info, warning, and success tones to `--bh-bg-info-subtle`, `--bh-bg-warning-subtle`, and `--bh-bg-success-subtle` with the matching content tokens, and stroke their glyph with `--bh-icon-stroke-200`. Options use `--bh-border-subtle`, `--bh-radius-lg-8`, and lift to `--elevation-02` when selected while their Kbd fills with `--bh-bg-inverse`. The command block uses `--bh-font-family-mono` on `--bh-bg-subtle`. Slides and fades use the `--bh-duration-slow` and `--bh-duration-moderate` foundation tokens with `--bh-easing-emphasized`. The countdown ring drains linearly over each one-second tick, and the countdown unmounts when its fade ends.
+
+Covered source files: `components/approval-card.tsx`, the internal `components/approval-frame.tsx` and `components/approval-questions.tsx`, `components/approval-card.css`, and the `button`, `kbd`, `rolling-count`, `task-list`, and `tooltip` registry dependencies.
+
+## RTL Rules
+
+- Header, options, and actions inherit direction and use logical alignment.
+- The command block and working directory stay LTR; the submit arrow mirrors.
+
+## Accessibility
+
+In `ApprovalQuestions`, each question is a group of native radio inputs labelled by its prompt: Tab reaches the group once, arrow keys move the choice without skipping ahead, the letter shown on each option picks it, and Enter confirms the answer. "Something else" is its own radio next to the text field, and Enter in the field commits the typed answer unless it is confirming an IME composition; inactive questions are hidden from assistive technology and removed from the tab order. Enter on the last answered question approves. The previous and next controls form a group named by `questionOf`, such as "Question 2 of 3". The countdown is a polite live region whose ring is also a labelled cancel button with a Tooltip. Slides, rolls, and fades collapse to instant changes under `prefers-reduced-motion`.
+
+<!-- registry-contract:start -->
+## Registry Contract
+
+This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
+`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
+
+| Field | Values |
+| --- | --- |
+| `supportedExports` | `components/approval-card.tsx: ApprovalCommand, ApprovalFrame, ApprovalPlan, ApprovalQuestions` |
+| `parts` | `ApprovalQuestions`, `ApprovalCommand`, `ApprovalPlan`, `ApprovalFrame` |
+| `registryDependencies` | `button`, `kbd`, `rolling-count`, `task-list`, `tooltip` |
+| `props.questions` | `readonly ApprovalQuestion[]; default null; ApprovalQuestions: single-choice questions, each with a free-text Something else option.` |
+| `props.command` | `string; default null; ApprovalCommand: shell command shown in the mono block.` |
+| `props.cwd` | `string; default null; ApprovalCommand: working directory shown above the command.` |
+| `props.plan` | `readonly ApprovalPlanStep[]; default null; ApprovalPlan: steps with an id and a title, rendered as a pending to-do list. Step details belong in the full plan.` |
+| `props.planPreviewCount` | `number; default "3"; ApprovalPlan: steps shown before the more fold.` |
+| `props.autoApproveSeconds` | `number; default "0"; ApprovalPlan: opt-in countdown; at zero onApprove fires with source timeout. Either action cancels it. A new value restarts it.` |
+| `props.icon` | `React.ReactNode; default null; ApprovalFrame: header glyph, sized and stroked by the tinted icon tile.` |
+| `props.tone` | `"info" \| "warning" \| "success"; default null; ApprovalFrame: tint of the icon tile. Questions use info, commands warning, and plans success.` |
+| `props.onApprove` | `callback; default null; Primary action. ApprovalQuestions passes { answers }, ApprovalPlan passes { source: user \| timeout }, and ApprovalCommand passes nothing.` |
+| `props.onReject` | `() => void; default null; Skip action on ApprovalQuestions and ApprovalCommand.` |
+| `props.onViewPlan` | `() => void; default null; ApprovalPlan secondary action that opens the full plan; it also stops the countdown.` |
+| `props.labels` | `Partial<ApprovalQuestionsLabels> \| Partial<ApprovalPlanLabels>; default "English"; Localized navigation, countdown, and helper copy for the card that uses them.` |
+| `tokens` | `--bh-bg-info-subtle`, `--bh-bg-inverse`, `--bh-bg-raised`, `--bh-bg-subtle`, `--bh-bg-success-subtle`, `--bh-bg-warning-subtle`, `--bh-border-subtle`, `--bh-border-success-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-information-default`, `--bh-content-inverse`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-content-success-default`, `--bh-content-warning-default`, `--bh-duration-default`, `--bh-duration-fast`, `--bh-duration-moderate`, `--bh-duration-slow`, `--bh-easing-emphasized`, `--bh-easing-standard`, `--bh-font-family`, `--bh-font-family-mono`, `--bh-icon-stroke-180`, `--bh-icon-stroke-200`, `--bh-icon-stroke-250`, `--bh-opacity-0`, `--bh-opacity-100`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-radius-md-6`, `--bh-space-2xl-14`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-body-2xs-medium-font-size`, `--bh-text-body-2xs-medium-font-weight`, `--bh-text-body-2xs-regular-font-size`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-3xs-regular-font-size`, `--bh-text-body-3xs-regular-line-height`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-medium-letter-spacing`, `--bh-text-body-md-medium-line-height`, `--bh-text-body-xs-medium-font-weight`, `--bh-text-body-xs-regular-font-size`, `--bh-text-body-xs-regular-font-weight`, `--bh-text-body-xs-regular-letter-spacing`, `--bh-text-body-xs-regular-line-height`, `--elevation-02`, `--elevation-component-focus-ring` |
+<!-- registry-contract:end -->

package/docs/design-system/components/attribute.md

@@ -31,10 +31,21 @@ Use `AttributeCard` for the surface, `AttributeHeader` for optional title and de
 | `AttributeList density` | `compact`, `default`, `comfortable` |
 | `AttributeList dividers` | `boolean` |
 | `AttributeList bordered` | `boolean` |
-| `AttributeList labelWidth` | CSS length, default `220px` |
+| `AttributeList labelWidth` | CSS length, default `220px` (`176px` at comfortable density) |
 | `AttributeItem fullSpan` | `boolean`, useful in `two-column` layouts |
 | `AttributeItem truncate` | `boolean` |
 
+## Comfortable density
+
+`density="comfortable"` is the label/value row of a detail card inside an app shell. Rows have no block padding and sit `16px` apart, so the list follows its card's own gap. The label is body-sm (`14px / 20px`) in content/subtle, in a `176px` column (`--bh-attribute-comfortable-label-width`), and the value is body-md medium, `16px` after it. Label and value align to the top of the row.
+
+```tsx
+<AttributeList density="comfortable">
+  <AttributeItem label="Requester">Mohamed Ali</AttributeItem>
+  <AttributeItem label="Start date">1 December 2026</AttributeItem>
+</AttributeList>
+```
+
 ## Composition
 
 Values are open React slots. Compose existing primitives for status badges, copy buttons, file rows, progress bars, skeleton bars, links, and custom details.
@@ -97,7 +108,8 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `supportedExports` | `components/attribute.tsx: AttributeCard, AttributeHeader, AttributeItem, AttributeLabel, AttributeList, AttributeValue, attributeCardVariants, attributeHeaderVariants, attributeItemVariants, attributeLabelVariants, attributeListVariants, attributeValueVariants` |
 | `parts` | `AttributeCard`, `AttributeHeader`, `AttributeList`, `AttributeItem`, `AttributeLabel`, `AttributeValue` |
 | `registryDependencies` | None |
+| `props.AttributeList.density` | `"compact" \| "default" \| "comfortable"; default "default"; compact and default set the row padding (8px, 16px). comfortable is the app-shell detail row: no row padding, rows 16px apart, a 14/20 label in a 176px column and 16px before the value.` |
 | `densities` | `compact`, `default`, `comfortable` |
 | `layouts` | `inline`, `end`, `stacked`, `two-column` |
-| `tokens` | `--bh-attribute-header-icon-size`, `--bh-attribute-header-icon-size-lg`, `--bh-attribute-label-width`, `--bh-bg-default`, `--bh-bg-neutral-soft`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-subtle`, `--bh-icon-size-default`, `--bh-icon-slot-size-default`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-medium-letter-spacing`, `--bh-text-body-md-medium-line-height`, `--bh-text-body-md-regular-font-size`, `--bh-text-body-md-regular-font-weight`, `--bh-text-body-md-regular-letter-spacing`, `--bh-text-body-md-regular-line-height`, `--bh-text-heading-sm-medium-font-size`, `--bh-text-heading-sm-medium-font-weight`, `--bh-text-heading-sm-medium-letter-spacing`, `--bh-text-heading-sm-medium-line-height` |
+| `tokens` | `--bh-attribute-comfortable-label-width`, `--bh-attribute-header-icon-size`, `--bh-attribute-header-icon-size-lg`, `--bh-attribute-label-width`, `--bh-bg-default`, `--bh-bg-neutral-soft`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-subtle`, `--bh-icon-size-default`, `--bh-icon-slot-size-default`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-md-8`, `--bh-space-none`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-medium-letter-spacing`, `--bh-text-body-md-medium-line-height`, `--bh-text-body-md-regular-font-size`, `--bh-text-body-md-regular-font-weight`, `--bh-text-body-md-regular-letter-spacing`, `--bh-text-body-md-regular-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-line-height`, `--bh-text-heading-sm-medium-font-size`, `--bh-text-heading-sm-medium-font-weight`, `--bh-text-heading-sm-medium-letter-spacing`, `--bh-text-heading-sm-medium-line-height` |
 <!-- registry-contract:end -->

package/docs/design-system/components/avatar.md

@@ -66,5 +66,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `forms` | `circular`, `rounded` |
 | `sizes` | `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl` |
 | `statusColors` | `offline`, `busy`, `blocked`, `available`, `away` |
-| `tokens` | `--bh-avatar-action-icon-size`, `--bh-avatar-action-icon-size-2xl`, `--bh-avatar-action-icon-size-3xl`, `--bh-avatar-action-icon-size-4xl`, `--bh-avatar-action-icon-size-large`, `--bh-avatar-action-icon-size-medium`, `--bh-avatar-action-icon-size-small`, `--bh-avatar-action-icon-size-tiny`, `--bh-avatar-action-icon-size-xlarge`, `--bh-avatar-action-icon-size-xsmall`, `--bh-avatar-action-size`, `--bh-avatar-action-size-2xl`, `--bh-avatar-action-size-3xl`, `--bh-avatar-action-size-4xl`, `--bh-avatar-action-size-large`, `--bh-avatar-action-size-medium`, `--bh-avatar-action-size-small`, `--bh-avatar-action-size-tiny`, `--bh-avatar-action-size-xlarge`, `--bh-avatar-action-size-xsmall`, `--bh-avatar-fallback-font-size-2xl`, `--bh-avatar-fallback-font-size-2xs`, `--bh-avatar-fallback-font-size-3xl`, `--bh-avatar-fallback-font-size-4xl`, `--bh-avatar-fallback-font-size-lg`, `--bh-avatar-fallback-font-size-md`, `--bh-avatar-fallback-font-size-sm`, `--bh-avatar-fallback-font-size-xl`, `--bh-avatar-fallback-font-size-xs`, `--bh-avatar-fallback-size`, `--bh-avatar-icon-size`, `--bh-avatar-icon-size-2xl`, `--bh-avatar-icon-size-2xs`, `--bh-avatar-icon-size-3xl`, `--bh-avatar-icon-size-4xl`, `--bh-avatar-icon-size-lg`, `--bh-avatar-icon-size-md`, `--bh-avatar-icon-size-sm`, `--bh-avatar-icon-size-xl`, `--bh-avatar-icon-size-xs`, `--bh-avatar-icon-slot-size`, `--bh-avatar-radius`, `--bh-avatar-size`, `--bh-avatar-size-2xl`, `--bh-avatar-size-2xs`, `--bh-avatar-size-3xl`, `--bh-avatar-size-4xl`, `--bh-avatar-size-lg`, `--bh-avatar-size-md`, `--bh-avatar-size-sm`, `--bh-avatar-size-xl`, `--bh-avatar-size-xs`, `--bh-avatar-status-ring`, `--bh-avatar-status-ring-default`, `--bh-avatar-status-ring-thin`, `--bh-avatar-status-size`, `--bh-avatar-status-size-large`, `--bh-avatar-status-size-medium`, `--bh-avatar-status-size-small`, `--bh-avatar-status-size-tiny`, `--bh-avatar-status-size-xlarge`, `--bh-avatar-status-size-xsmall`, `--bh-bg-accent-golden-default`, `--bh-bg-accent-red-default`, `--bh-bg-accent-sky-base`, `--bh-bg-default`, `--bh-bg-neutral-default`, `--bh-bg-neutral-medium`, `--bh-bg-neutral-subtle`, `--bh-bg-success-default`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-on-brand`, `--bh-font-weight-semibold`, `--bh-icon-slot-size-default`, `--bh-icon-stroke-210`, `--bh-icon-stroke-240`, `--bh-icon-stroke-260`, `--bh-icon-stroke-280`, `--bh-interactive-brand-default`, `--bh-interactive-danger-default`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-space-md-8`, `--bh-space-none`, `--bh-space-xl-12`, `--bh-space-xxs-2`, `--bh-text-body-sm-medium-font-size`, `--shadow-avatar-badge` |
+| `tokens` | `--bh-avatar-action-icon-size`, `--bh-avatar-action-icon-size-2xl`, `--bh-avatar-action-icon-size-3xl`, `--bh-avatar-action-icon-size-4xl`, `--bh-avatar-action-icon-size-large`, `--bh-avatar-action-icon-size-medium`, `--bh-avatar-action-icon-size-small`, `--bh-avatar-action-icon-size-tiny`, `--bh-avatar-action-icon-size-xlarge`, `--bh-avatar-action-icon-size-xsmall`, `--bh-avatar-action-size`, `--bh-avatar-action-size-2xl`, `--bh-avatar-action-size-3xl`, `--bh-avatar-action-size-4xl`, `--bh-avatar-action-size-large`, `--bh-avatar-action-size-medium`, `--bh-avatar-action-size-small`, `--bh-avatar-action-size-tiny`, `--bh-avatar-action-size-xlarge`, `--bh-avatar-action-size-xsmall`, `--bh-avatar-fallback-font-size-2xl`, `--bh-avatar-fallback-font-size-2xs`, `--bh-avatar-fallback-font-size-3xl`, `--bh-avatar-fallback-font-size-4xl`, `--bh-avatar-fallback-font-size-lg`, `--bh-avatar-fallback-font-size-md`, `--bh-avatar-fallback-font-size-sm`, `--bh-avatar-fallback-font-size-xl`, `--bh-avatar-fallback-font-size-xs`, `--bh-avatar-fallback-size`, `--bh-avatar-icon-size`, `--bh-avatar-icon-size-2xl`, `--bh-avatar-icon-size-2xs`, `--bh-avatar-icon-size-3xl`, `--bh-avatar-icon-size-4xl`, `--bh-avatar-icon-size-lg`, `--bh-avatar-icon-size-md`, `--bh-avatar-icon-size-sm`, `--bh-avatar-icon-size-xl`, `--bh-avatar-icon-size-xs`, `--bh-avatar-icon-slot-size`, `--bh-avatar-radius`, `--bh-avatar-size`, `--bh-avatar-size-2xl`, `--bh-avatar-size-2xs`, `--bh-avatar-size-3xl`, `--bh-avatar-size-4xl`, `--bh-avatar-size-lg`, `--bh-avatar-size-md`, `--bh-avatar-size-sm`, `--bh-avatar-size-xl`, `--bh-avatar-size-xs`, `--bh-avatar-status-ring`, `--bh-avatar-status-ring-default`, `--bh-avatar-status-ring-thin`, `--bh-avatar-status-size`, `--bh-avatar-status-size-large`, `--bh-avatar-status-size-medium`, `--bh-avatar-status-size-small`, `--bh-avatar-status-size-tiny`, `--bh-avatar-status-size-xlarge`, `--bh-avatar-status-size-xsmall`, `--bh-bg-accent-golden-default`, `--bh-bg-accent-red-default`, `--bh-bg-accent-sky-base`, `--bh-bg-default`, `--bh-bg-neutral-default`, `--bh-bg-neutral-medium`, `--bh-bg-neutral-subtle`, `--bh-bg-success-default`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-on-brand`, `--bh-font-weight-semibold`, `--bh-icon-slot-size-default`, `--bh-icon-stroke-210`, `--bh-icon-stroke-240`, `--bh-icon-stroke-260`, `--bh-icon-stroke-280`, `--bh-interactive-brand-default`, `--bh-interactive-danger-default`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-space-md-8`, `--bh-space-none`, `--bh-space-xl-12`, `--bh-space-xxs-2`, `--bh-text-body-sm-medium-font-size`, `--elevation-avatar-badge` |
 <!-- registry-contract:end -->

package/docs/design-system/components/badge.md

@@ -67,6 +67,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `options` | `splitAction` |
 | `sizes` | `sm`, `lg` |
 | `styles` | `light`, `outline`, `solid` |
-| `tokens` | `--bh-badge-focus-ring-width`, `--bh-badge-outline-border-width`, `--bh-bg-accent-amber-default`, `--bh-bg-accent-amber-subtle`, `--bh-bg-accent-blue-bold`, `--bh-bg-accent-blue-subtle`, `--bh-bg-accent-fuchsia-default`, `--bh-bg-accent-fuchsia-subtle`, `--bh-bg-accent-golden-default`, `--bh-bg-accent-golden-subtle`, `--bh-bg-accent-green-default`, `--bh-bg-accent-green-subtle`, `--bh-bg-accent-purple-default`, `--bh-bg-accent-purple-subtle`, `--bh-bg-accent-red-default`, `--bh-bg-accent-red-subtle`, `--bh-bg-accent-rose-bold`, `--bh-bg-accent-rose-subtle`, `--bh-bg-accent-sky-base`, `--bh-bg-accent-sky-subtle`, `--bh-bg-neutral-bold`, `--bh-bg-neutral-subtle`, `--bh-border-accent-amber-strong`, `--bh-border-accent-amber-subtle`, `--bh-border-accent-blue-strong`, `--bh-border-accent-blue-subtle`, `--bh-border-accent-fuchsia-strong`, `--bh-border-accent-fuchsia-subtle`, `--bh-border-accent-golden-strong`, `--bh-border-accent-golden-subtle`, `--bh-border-accent-green-strong`, `--bh-border-accent-green-subtle`, `--bh-border-accent-purple-strong`, `--bh-border-accent-purple-subtle`, `--bh-border-accent-red-strong`, `--bh-border-accent-red-subtle`, `--bh-border-accent-rose-strong`, `--bh-border-accent-rose-subtle`, `--bh-border-accent-sky-strong`, `--bh-border-accent-sky-subtle`, `--bh-border-default`, `--bh-border-focus`, `--bh-border-focus-danger`, `--bh-border-strong`, `--bh-border-subtle`, `--bh-content-accent-amber-default`, `--bh-content-accent-amber-strong`, `--bh-content-accent-blue-default`, `--bh-content-accent-blue-strong`, `--bh-content-accent-fuchsia-default`, `--bh-content-accent-fuchsia-strong`, `--bh-content-accent-golden-default`, `--bh-content-accent-golden-strong`, `--bh-content-accent-green-default`, `--bh-content-accent-green-strong`, `--bh-content-accent-purple-default`, `--bh-content-accent-purple-strong`, `--bh-content-accent-red-default`, `--bh-content-accent-red-strong`, `--bh-content-accent-rose-default`, `--bh-content-accent-rose-strong`, `--bh-content-accent-sky-default`, `--bh-content-accent-sky-strong`, `--bh-content-default`, `--bh-content-link`, `--bh-content-muted`, `--bh-content-on-color`, `--bh-content-on-light`, `--bh-content-on-neutral`, `--bh-interactive-ghost-default`, `--bh-opacity-35`, `--bh-radius-full`, `--bh-radius-xs-2`, `--bh-space-2xl-14`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-md-8`, `--bh-space-none`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-text-body-2xs-medium-font-size`, `--bh-text-body-2xs-medium-font-weight`, `--bh-text-body-2xs-medium-letter-spacing`, `--bh-text-body-2xs-medium-line-height`, `--bh-text-body-2xs-semibold-font-weight`, `--bh-text-body-3xs-medium-font-size`, `--bh-text-body-3xs-medium-font-weight`, `--bh-text-body-3xs-medium-letter-spacing`, `--bh-text-body-3xs-medium-line-height`, `--bh-text-body-3xs-semibold-font-weight` |
+| `tokens` | `--bh-badge-focus-ring-width`, `--bh-badge-outline-border-width`, `--bh-bg-accent-amber-default`, `--bh-bg-accent-amber-subtle`, `--bh-bg-accent-blue-bold`, `--bh-bg-accent-blue-subtle`, `--bh-bg-accent-fuchsia-default`, `--bh-bg-accent-fuchsia-subtle`, `--bh-bg-accent-golden-default`, `--bh-bg-accent-golden-subtle`, `--bh-bg-accent-green-default`, `--bh-bg-accent-green-subtle`, `--bh-bg-accent-purple-default`, `--bh-bg-accent-purple-subtle`, `--bh-bg-accent-red-default`, `--bh-bg-accent-red-subtle`, `--bh-bg-accent-rose-bold`, `--bh-bg-accent-rose-subtle`, `--bh-bg-accent-sky-base`, `--bh-bg-accent-sky-subtle`, `--bh-bg-neutral-bold`, `--bh-bg-neutral-subtle`, `--bh-border-accent-amber-strong`, `--bh-border-accent-amber-subtle`, `--bh-border-accent-blue-strong`, `--bh-border-accent-blue-subtle`, `--bh-border-accent-fuchsia-strong`, `--bh-border-accent-fuchsia-subtle`, `--bh-border-accent-golden-strong`, `--bh-border-accent-golden-subtle`, `--bh-border-accent-green-strong`, `--bh-border-accent-green-subtle`, `--bh-border-accent-purple-strong`, `--bh-border-accent-purple-subtle`, `--bh-border-accent-red-strong`, `--bh-border-accent-red-subtle`, `--bh-border-accent-rose-strong`, `--bh-border-accent-rose-subtle`, `--bh-border-accent-sky-strong`, `--bh-border-accent-sky-subtle`, `--bh-border-default`, `--bh-border-focus`, `--bh-border-focus-danger`, `--bh-border-strong`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-accent-amber-default`, `--bh-content-accent-amber-strong`, `--bh-content-accent-blue-default`, `--bh-content-accent-blue-strong`, `--bh-content-accent-fuchsia-default`, `--bh-content-accent-fuchsia-strong`, `--bh-content-accent-golden-default`, `--bh-content-accent-golden-strong`, `--bh-content-accent-green-default`, `--bh-content-accent-green-strong`, `--bh-content-accent-purple-default`, `--bh-content-accent-purple-strong`, `--bh-content-accent-red-default`, `--bh-content-accent-red-strong`, `--bh-content-accent-rose-default`, `--bh-content-accent-rose-strong`, `--bh-content-accent-sky-default`, `--bh-content-accent-sky-strong`, `--bh-content-default`, `--bh-content-link`, `--bh-content-muted`, `--bh-content-on-color`, `--bh-content-on-light`, `--bh-content-on-neutral`, `--bh-interactive-ghost-default`, `--bh-opacity-35`, `--bh-radius-full`, `--bh-radius-xs-2`, `--bh-space-2xl-14`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-md-8`, `--bh-space-none`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-text-body-2xs-medium-font-size`, `--bh-text-body-2xs-medium-font-weight`, `--bh-text-body-2xs-medium-letter-spacing`, `--bh-text-body-2xs-medium-line-height`, `--bh-text-body-2xs-semibold-font-weight`, `--bh-text-body-3xs-medium-font-size`, `--bh-text-body-3xs-medium-font-weight`, `--bh-text-body-3xs-medium-letter-spacing`, `--bh-text-body-3xs-medium-line-height`, `--bh-text-body-3xs-semibold-font-weight` |
 | `types` | `default`, `leading-icon`, `trailing-icon`, `dot`, `flag` |
 <!-- registry-contract:end -->

package/docs/design-system/components/banner.md

@@ -98,6 +98,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `modes` | `slim`, `single-action-inline`, `single-action`, `input` |
 | `sizes` | `floating`, `full-width` |
 | `states` | `title`, `title-description` |
-| `tokens` | `--bh-bg-brand-bold`, `--bh-bg-brand-soft`, `--bh-bg-muted`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-link`, `--bh-content-on-brand`, `--bh-content-subtle`, `--bh-font-family`, `--bh-font-weight-regular`, `--bh-font-weight-semibold`, `--bh-icon-size-default`, `--bh-icon-slot-size-default`, `--bh-icon-stroke-210`, `--bh-icon-stroke-225`, `--bh-input-width`, `--bh-radius-xl-10`, `--bh-space-17xl-288`, `--bh-space-19xl-384`, `--bh-space-3xl-16`, `--bh-space-8xl-48`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-body-2xs-medium-font-size`, `--bh-text-body-2xs-medium-font-weight`, `--bh-text-body-2xs-medium-line-height`, `--bh-text-body-lg-medium-font-size`, `--bh-text-body-lg-medium-font-weight`, `--bh-text-body-lg-medium-line-height`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-medium-letter-spacing`, `--bh-text-body-md-medium-line-height`, `--shadow-xl` |
+| `tokens` | `--bh-bg-brand-bold`, `--bh-bg-brand-soft`, `--bh-bg-muted`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-link`, `--bh-content-on-brand`, `--bh-content-subtle`, `--bh-font-family`, `--bh-font-weight-regular`, `--bh-font-weight-semibold`, `--bh-icon-size-default`, `--bh-icon-slot-size-default`, `--bh-icon-stroke-210`, `--bh-icon-stroke-225`, `--bh-input-width`, `--bh-radius-xl-10`, `--bh-space-17xl-288`, `--bh-space-19xl-384`, `--bh-space-3xl-16`, `--bh-space-8xl-48`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-body-2xs-medium-font-size`, `--bh-text-body-2xs-medium-font-weight`, `--bh-text-body-2xs-medium-line-height`, `--bh-text-body-lg-medium-font-size`, `--bh-text-body-lg-medium-font-weight`, `--bh-text-body-lg-medium-line-height`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-medium-letter-spacing`, `--bh-text-body-md-medium-line-height`, `--elevation-05` |
 | `variants` | `brand`, `grey`, `brand-light` |
 <!-- registry-contract:end -->

package/docs/design-system/components/breadcrumbs.md

@@ -28,6 +28,7 @@ Use semantic names in code even if the Figma variant labels are title-cased.
 ```ts
 type BreadcrumbSeparator = "slash" | "chevron";
 type BreadcrumbStyle = "default" | "raised";
+type BreadcrumbSize = "md" | "sm";
 
 type BreadcrumbItem = {
   label: string;
@@ -40,6 +41,7 @@ type BreadcrumbsProps = {
   items: BreadcrumbItem[];
   separator?: BreadcrumbSeparator;
   style?: BreadcrumbStyle;
+  size?: BreadcrumbSize;
   iconOnly?: boolean;
   dir?: "ltr" | "rtl" | "auto";
   maxItems?: number;
@@ -55,9 +57,11 @@ type BreadcrumbsProps = {
 - The default style has no container background and uses a compact inline gap.
 - The raised style adds a surface fill, a 1px border, 12px padding, and an 8px radius in the Figma source.
 - Text items use `Body/body-md (base)/medium` with a 15px size and 24px line height.
+- `size="sm"` uses `Body/body-sm/medium` with a 14px size, a 20px line height, and a 12px separator, so labels sit 20px apart, as in a 14px trail written with two spaces on each side of the slash.
 - Item glyphs are 18px square inside 20px slots.
 - Slash and chevron separators are 16px square and should be decorative.
 - LTR chevrons point right; RTL chevrons point left.
+- Each label resolves its own content direction, so an opposing script truncates at its actual end while the trail keeps the inherited layout direction.
 - The icon-only type keeps the same item and separator rhythm but hides visible labels.
 - Do not allow wrapping inside individual breadcrumb labels unless the component has a deliberate collapsed or overflow mode.
 
@@ -68,7 +72,7 @@ Breadcrumbs should consume existing semantic tokens:
 ```ts
 export const breadcrumbsTokens = {
   itemColor: "content.subtle",
-  currentItemColor: "content.default",
+  currentItemColor: "content.default", // --bh-breadcrumbs-current-content
   iconColor: "content.subtle",
   separatorColor: "content.subtle",
   raisedBackground: "background.card",
@@ -171,7 +175,7 @@ Covered source files: `components/expanded/breadcrumbs.css`, `components/expande
 
 ## RTL Rules
 
-This component has no special RTL contract beyond inherited document direction and logical spacing.
+The ordered trail inherits document direction and uses logical spacing. Each independently truncated label uses `dir="auto"`, preserving the identifying start of Latin content in an RTL trail (and Arabic content in an LTR trail) without changing item order, icon placement, or separator mirroring.
 
 <!-- registry-contract:start -->
 ## Registry Contract
@@ -185,7 +189,8 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `parts` | `Breadcrumbs` |
 | `registryDependencies` | None |
 | `modes` | `text`, `icon-only`, `slash`, `chevron` |
+| `sizes` | `md`, `sm` |
 | `states` | `link`, `current`, `overflow` |
-| `tokens` | `--bh-bg-raised`, `--bh-border-focus`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-subtle`, `--bh-focus-ring-width`, `--bh-font-family`, `--bh-font-weight-medium`, `--bh-icon-size-default`, `--bh-icon-slot-size-default`, `--bh-icon-stroke-190`, `--bh-icon-stroke-200`, `--bh-icon-stroke-225`, `--bh-interactive-ghost-hover`, `--bh-radius-lg-8`, `--bh-radius-sm-4`, `--bh-space-3xl-16`, `--bh-space-6xl-32`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-base-letter-spacing`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-md-font-size`, `--bh-text-body-md-line-height` |
+| `tokens` | `--bh-bg-raised`, `--bh-border-focus`, `--bh-border-subtle`, `--bh-breadcrumbs-current-content`, `--bh-content-default`, `--bh-content-subtle`, `--bh-focus-ring-width`, `--bh-font-family`, `--bh-font-weight-medium`, `--bh-icon-size-default`, `--bh-icon-slot-size-default`, `--bh-icon-stroke-190`, `--bh-icon-stroke-200`, `--bh-icon-stroke-225`, `--bh-interactive-ghost-hover`, `--bh-radius-lg-8`, `--bh-radius-sm-4`, `--bh-space-3xl-16`, `--bh-space-6xl-32`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-base-letter-spacing`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-md-font-size`, `--bh-text-body-md-line-height`, `--bh-text-body-sm-medium-font-size`, `--bh-text-body-sm-medium-font-weight`, `--bh-text-body-sm-medium-letter-spacing`, `--bh-text-body-sm-medium-line-height` |
 | `variants` | `default`, `raised` |
 <!-- registry-contract:end -->

package/docs/design-system/components/button-group.md

@@ -113,6 +113,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `modes` | `default`, `iconOnly` |
 | `selectionTypes` | `single`, `multiple` |
 | `sizes` | `md`, `sm`, `xs` |
-| `tokens` | `--bh-border-width-default`, `--bh-button-group-bg`, `--bh-button-group-border`, `--bh-button-group-content`, `--bh-button-group-content-active`, `--bh-button-group-content-disabled`, `--bh-button-group-divider`, `--bh-button-group-icon-size`, `--bh-button-group-icon-slot-size`, `--bh-button-group-item-active-bg`, `--bh-button-group-item-bg`, `--bh-button-group-item-disabled-bg`, `--bh-button-group-item-hover-bg`, `--bh-button-group-item-pressed-bg`, `--bh-button-group-label-padding-x`, `--bh-button-group-md-gap`, `--bh-button-group-md-height`, `--bh-button-group-md-icon-padding-x`, `--bh-button-group-md-item-rtl-width`, `--bh-button-group-md-item-width`, `--bh-button-group-md-padding-x`, `--bh-button-group-radius`, `--bh-button-group-sm-gap`, `--bh-button-group-sm-height`, `--bh-button-group-sm-icon-padding-x`, `--bh-button-group-sm-item-rtl-width`, `--bh-button-group-sm-item-width`, `--bh-button-group-sm-padding-x`, `--bh-button-group-xs-gap`, `--bh-button-group-xs-height`, `--bh-button-group-xs-icon-padding-x`, `--bh-button-group-xs-item-rtl-width`, `--bh-button-group-xs-item-width`, `--bh-button-group-xs-padding-x`, `--bh-text-button-font-size`, `--bh-text-button-font-weight`, `--bh-text-button-letter-spacing`, `--bh-text-button-line-height`, `--bh-z-raised`, `--shadow-button-group`, `--shadow-button-group-focus`, `--shadow-component-default` |
+| `tokens` | `--bh-border-width-default`, `--bh-button-group-bg`, `--bh-button-group-border`, `--bh-button-group-content`, `--bh-button-group-content-active`, `--bh-button-group-content-disabled`, `--bh-button-group-divider`, `--bh-button-group-icon-size`, `--bh-button-group-icon-slot-size`, `--bh-button-group-item-active-bg`, `--bh-button-group-item-bg`, `--bh-button-group-item-disabled-bg`, `--bh-button-group-item-hover-bg`, `--bh-button-group-item-pressed-bg`, `--bh-button-group-label-padding-x`, `--bh-button-group-md-gap`, `--bh-button-group-md-height`, `--bh-button-group-md-icon-padding-x`, `--bh-button-group-md-item-rtl-width`, `--bh-button-group-md-item-width`, `--bh-button-group-md-padding-x`, `--bh-button-group-radius`, `--bh-button-group-sm-gap`, `--bh-button-group-sm-height`, `--bh-button-group-sm-icon-padding-x`, `--bh-button-group-sm-item-rtl-width`, `--bh-button-group-sm-item-width`, `--bh-button-group-sm-padding-x`, `--bh-button-group-xs-gap`, `--bh-button-group-xs-height`, `--bh-button-group-xs-icon-padding-x`, `--bh-button-group-xs-item-rtl-width`, `--bh-button-group-xs-item-width`, `--bh-button-group-xs-padding-x`, `--bh-text-button-font-size`, `--bh-text-button-font-weight`, `--bh-text-button-letter-spacing`, `--bh-text-button-line-height`, `--bh-z-raised`, `--elevation-button-group`, `--elevation-button-group-focus`, `--elevation-component-default` |
 | `widths` | `fixed`, `content` |
 <!-- registry-contract:end -->

package/docs/design-system/components/button.md

@@ -12,12 +12,14 @@ Button is the primary action primitive for forms, workflows, navigation actions,
 
 | Prop | Values | Default |
 | --- | --- | --- |
-| `variant` | `default`, `secondary`, `soft`, `outline`, `ghost`, `ghost-primary`, `danger`, `soft-danger`, `white` | `default` |
+| `variant` | `default`, `secondary`, `soft`, `outline`, `ghost`, `ghost-primary`, `danger`, `soft-danger`, `white`, `success`, `warning`, `link` | `default` |
 | `size` | `xs`, `sm`, `default`, `lg`, `xl`, `icon-xs`, `icon-sm`, `icon`, `icon-lg`, `icon-xl` | `default` |
 | `asChild` | `boolean` | `false` |
 | `disabled` | `boolean` | `false` |
 | `aria-busy` | `boolean` | none |
 
+`destructive` and `soft-destructive` remain accepted as deprecated compatibility aliases. Replace them with `danger` and `soft-danger`, respectively; the aliases are not separate visual treatments and will remain available for the repository's documented deprecation window.
+
 ## Examples
 
 ```tsx
@@ -49,13 +51,13 @@ Button is the primary action primitive for forms, workflows, navigation actions,
 
 ## Token Contract
 
-Button consumes semantic interaction, content, border, radius, typography, spacing, opacity, and shadow tokens. Component source should not hard-code Figma color, spacing, radius, or shadow literals.
+Button consumes semantic interaction, content, border, radius, typography, spacing, opacity, and elevation tokens. Component source should not hard-code Figma color, spacing, radius, or elevation recipes.
 
 - Typography: `--bh-text-button-font-size`, `--bh-text-button-line-height`, `--bh-text-button-font-weight`, `--bh-text-button-letter-spacing`
 - Shape: `--bh-control-default`
 - Heights and padding: `--bh-button-*-height`, `--bh-button-*-padding-x`, `--bh-button-*-padding-y`
 - Icon rhythm: `--bh-button-icon-size` is an 18px glyph inside `--bh-button-icon-slot-size` at 20px; `--bh-button-icon-offset` and `--bh-button-label-padding-x` preserve optical alignment.
-- Effects: `--shadow-button-raised`, `--shadow-button-secondary`, `--shadow-button-soft`, `--shadow-button-focus`, `--shadow-button-danger-focus`
+- Effects: `--elevation-button-raised`, `--elevation-button-secondary`, `--elevation-button-soft`, `--elevation-button-focus`, `--elevation-button-danger-focus`
 
 ## RTL Rules
 
@@ -87,9 +89,10 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `supportedExports` | `components/button.tsx: Button, buttonVariants` |
 | `parts` | `Button` |
 | `registryDependencies` | `spinner` |
+| `props.variant` | `"default" \| "secondary" \| "soft" \| "outline" \| "ghost" \| "ghost-primary" \| "danger" \| "soft-danger" \| "white" \| "success" \| "warning" \| "link" \| "destructive" \| "soft-destructive"; default "default"; Twelve canonical semantic treatments. The deprecated destructive and soft-destructive compatibility aliases remain accepted and map to danger and soft-danger, respectively.` |
 | `props.density` | `"compact" \| "default" \| "comfortable"; default "comfortable"; Preferred cross-component sizing contract. Maps to legacy xs, sm, or default sizes while preserving icon-only sizing.` |
 | `densities` | `compact`, `default`, `comfortable` |
 | `sizes` | `xs`, `sm`, `default`, `lg`, `xl`, `icon-xs`, `icon-sm`, `icon`, `icon-lg`, `icon-xl` |
-| `tokens` | `--bh-bg-always-white`, `--bh-border-brand-strong`, `--bh-border-danger-strong`, `--bh-border-default`, `--bh-border-disabled`, `--bh-border-focus`, `--bh-border-width-default`, `--bh-button-gap`, `--bh-button-gap-xs`, `--bh-button-icon-offset`, `--bh-button-icon-size`, `--bh-button-icon-slot-size`, `--bh-button-label-padding-x`, `--bh-button-lg-height`, `--bh-button-lg-padding-x`, `--bh-button-lg-padding-y`, `--bh-button-md-height`, `--bh-button-md-padding-x`, `--bh-button-secondary-border`, `--bh-button-secondary-focus-border`, `--bh-button-sm-height`, `--bh-button-sm-padding-x`, `--bh-button-sm-padding-y`, `--bh-button-xl-height`, `--bh-button-xl-padding-y`, `--bh-button-xs-height`, `--bh-button-xs-padding-x`, `--bh-content-brand-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-on-brand`, `--bh-content-on-color`, `--bh-content-on-light`, `--bh-content-on-success`, `--bh-content-on-warning`, `--bh-control-default`, `--bh-interactive-brand-default`, `--bh-interactive-brand-disabled`, `--bh-interactive-brand-hover`, `--bh-interactive-brand-pressed`, `--bh-interactive-danger-default`, `--bh-interactive-danger-disabled`, `--bh-interactive-danger-hover`, `--bh-interactive-danger-pressed`, `--bh-interactive-danger-soft-default`, `--bh-interactive-danger-soft-disabled`, `--bh-interactive-danger-soft-hover`, `--bh-interactive-danger-soft-pressed`, `--bh-interactive-ghost-default`, `--bh-interactive-ghost-disabled`, `--bh-interactive-ghost-hover`, `--bh-interactive-ghost-pressed`, `--bh-interactive-outlined-default`, `--bh-interactive-outlined-disabled`, `--bh-interactive-outlined-hover`, `--bh-interactive-outlined-pressed`, `--bh-interactive-secondary-default`, `--bh-interactive-secondary-disabled`, `--bh-interactive-secondary-hover`, `--bh-interactive-secondary-pressed`, `--bh-interactive-soft-default`, `--bh-interactive-soft-disabled`, `--bh-interactive-soft-hover`, `--bh-interactive-soft-pressed`, `--bh-interactive-success-default`, `--bh-interactive-success-hover`, `--bh-interactive-success-pressed`, `--bh-interactive-warning-default`, `--bh-interactive-warning-hover`, `--bh-interactive-warning-pressed`, `--bh-opacity-30`, `--bh-space-none`, `--bh-text-button-font-size`, `--bh-text-button-font-weight`, `--bh-text-button-letter-spacing`, `--bh-text-button-line-height`, `--shadow-button-danger-focus`, `--shadow-button-focus`, `--shadow-button-raised`, `--shadow-button-secondary`, `--shadow-button-secondary-focus`, `--shadow-button-soft` |
-| `variants` | `default`, `secondary`, `soft`, `outline`, `ghost`, `ghost-primary`, `danger`, `soft-danger`, `white` |
+| `tokens` | `--bh-bg-always-white`, `--bh-border-brand-strong`, `--bh-border-danger-strong`, `--bh-border-default`, `--bh-border-disabled`, `--bh-border-focus`, `--bh-border-width-default`, `--bh-button-gap`, `--bh-button-gap-xs`, `--bh-button-icon-offset`, `--bh-button-icon-size`, `--bh-button-icon-slot-size`, `--bh-button-label-padding-x`, `--bh-button-lg-height`, `--bh-button-lg-padding-x`, `--bh-button-lg-padding-y`, `--bh-button-md-height`, `--bh-button-md-padding-x`, `--bh-button-secondary-border`, `--bh-button-secondary-focus-border`, `--bh-button-sm-height`, `--bh-button-sm-padding-x`, `--bh-button-sm-padding-y`, `--bh-button-xl-height`, `--bh-button-xl-padding-y`, `--bh-button-xs-height`, `--bh-button-xs-padding-x`, `--bh-content-brand-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-on-brand`, `--bh-content-on-color`, `--bh-content-on-light`, `--bh-content-on-success`, `--bh-content-on-warning`, `--bh-control-default`, `--bh-interactive-brand-default`, `--bh-interactive-brand-disabled`, `--bh-interactive-brand-hover`, `--bh-interactive-brand-pressed`, `--bh-interactive-danger-default`, `--bh-interactive-danger-disabled`, `--bh-interactive-danger-hover`, `--bh-interactive-danger-pressed`, `--bh-interactive-danger-soft-default`, `--bh-interactive-danger-soft-disabled`, `--bh-interactive-danger-soft-hover`, `--bh-interactive-danger-soft-pressed`, `--bh-interactive-ghost-default`, `--bh-interactive-ghost-disabled`, `--bh-interactive-ghost-hover`, `--bh-interactive-ghost-pressed`, `--bh-interactive-outlined-default`, `--bh-interactive-outlined-disabled`, `--bh-interactive-outlined-hover`, `--bh-interactive-outlined-pressed`, `--bh-interactive-secondary-default`, `--bh-interactive-secondary-disabled`, `--bh-interactive-secondary-hover`, `--bh-interactive-secondary-pressed`, `--bh-interactive-soft-default`, `--bh-interactive-soft-disabled`, `--bh-interactive-soft-hover`, `--bh-interactive-soft-pressed`, `--bh-interactive-success-default`, `--bh-interactive-success-hover`, `--bh-interactive-success-pressed`, `--bh-interactive-warning-default`, `--bh-interactive-warning-hover`, `--bh-interactive-warning-pressed`, `--bh-opacity-30`, `--bh-space-none`, `--bh-text-button-font-size`, `--bh-text-button-font-weight`, `--bh-text-button-letter-spacing`, `--bh-text-button-line-height`, `--elevation-button-danger-focus`, `--elevation-button-focus`, `--elevation-button-raised`, `--elevation-button-secondary`, `--elevation-button-secondary-focus`, `--elevation-button-soft` |
+| `variants` | `default`, `secondary`, `soft`, `outline`, `ghost`, `ghost-primary`, `danger`, `soft-danger`, `white`, `success`, `warning`, `link` |
 <!-- registry-contract:end -->

package/docs/design-system/components/card.md

@@ -48,8 +48,19 @@ export function Example() {
 | `orientation` | `vertical`, `horizontal` |
 | `type` | `leading-image`, `trailing-image`, `full-image` |
 | `breakpoint` | `desktop`, `mobile` |
+| `size` | `default`, `comfortable` |
 | `dir` | inherited, `ltr`, `rtl` |
 
+## Comfortable size
+
+`size="comfortable"` is the panel inside an app shell. It keeps the card surface, background and 1px inset edge, and uses a `12px` radius (`--bh-card-comfortable-radius`) where the library cards use `16px`. `Card` and `CardSurface` both take it, and both render `data-size`.
+
+```tsx
+<CardSurface size="comfortable" className="p-[var(--bh-space-5xl-24)]">
+  <h2>Position details</h2>
+</CardSurface>
+```
+
 ## RTL
 
 Card uses logical spacing, inherited direction, and `dir="auto"` copy wrappers so title, subtitle, description, footer actions, and menu affordances mirror naturally.
@@ -96,8 +107,11 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `supportedExports` | `components/card.tsx: Card, CardActions, CardFooter, CardMedia, CardSurface, cardVariants` |
 | `parts` | `Card`, `CardSurface`, `CardMedia`, `CardFooter`, `CardActions` |
 | `registryDependencies` | `button` |
+| `props.Card.size` | `"default" \| "comfortable"; default "default"; comfortable is the panel inside an app shell: the same surface and 1px inset edge with a 12px radius instead of the library card's 16px.` |
+| `props.CardSurface.size` | `"default" \| "comfortable"; default "default"; The same sizes as Card, for compositions that bring their own layout.` |
 | `breakpoints` | `desktop`, `mobile` |
 | `orientations` | `vertical`, `horizontal` |
-| `tokens` | `--bh-bg-accent-green-subtle`, `--bh-bg-accent-sky-subtle`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-card-actions-max-width`, `--bh-card-bg`, `--bh-card-border`, `--bh-card-content-padding`, `--bh-card-desktop-content-padding`, `--bh-card-desktop-full-height`, `--bh-card-desktop-horizontal-padding`, `--bh-card-desktop-media-height`, `--bh-card-full-height`, `--bh-card-horizontal-media-width`, `--bh-card-horizontal-min-height`, `--bh-card-horizontal-padding`, `--bh-card-horizontal-width`, `--bh-card-media-height`, `--bh-card-media-overlay`, `--bh-card-mobile-content-padding`, `--bh-card-mobile-full-height`, `--bh-card-mobile-horizontal-padding`, `--bh-card-mobile-media-height`, `--bh-card-more-icon-size`, `--bh-card-more-size`, `--bh-card-radius`, `--bh-card-vertical-width`, `--bh-content-default`, `--bh-content-on-color`, `--bh-content-subtle`, `--bh-control-default`, `--bh-interactive-ghost-hover`, `--bh-radius-3xl-16`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xxs-2`, `--bh-text-body-lg-regular-font-size`, `--bh-text-body-lg-regular-font-weight`, `--bh-text-body-lg-regular-letter-spacing`, `--bh-text-body-lg-regular-line-height`, `--bh-text-body-md-regular-font-size`, `--bh-text-body-md-regular-font-weight`, `--bh-text-body-md-regular-letter-spacing`, `--bh-text-body-md-regular-line-height`, `--bh-text-heading-sm-semibold-font-size`, `--bh-text-heading-sm-semibold-font-weight`, `--bh-text-heading-sm-semibold-letter-spacing`, `--bh-text-heading-sm-semibold-line-height`, `--shadow-button-focus` |
+| `sizes` | `default`, `comfortable` |
+| `tokens` | `--bh-bg-accent-green-subtle`, `--bh-bg-accent-sky-subtle`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-card-actions-max-width`, `--bh-card-bg`, `--bh-card-border`, `--bh-card-comfortable-radius`, `--bh-card-content-padding`, `--bh-card-desktop-content-padding`, `--bh-card-desktop-full-height`, `--bh-card-desktop-horizontal-padding`, `--bh-card-desktop-media-height`, `--bh-card-full-height`, `--bh-card-horizontal-media-width`, `--bh-card-horizontal-min-height`, `--bh-card-horizontal-padding`, `--bh-card-horizontal-width`, `--bh-card-media-height`, `--bh-card-media-overlay`, `--bh-card-mobile-content-padding`, `--bh-card-mobile-full-height`, `--bh-card-mobile-horizontal-padding`, `--bh-card-mobile-media-height`, `--bh-card-more-icon-size`, `--bh-card-more-size`, `--bh-card-radius`, `--bh-card-vertical-width`, `--bh-content-default`, `--bh-content-on-color`, `--bh-content-subtle`, `--bh-control-default`, `--bh-interactive-ghost-hover`, `--bh-radius-3xl-16`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xxs-2`, `--bh-text-body-lg-regular-font-size`, `--bh-text-body-lg-regular-font-weight`, `--bh-text-body-lg-regular-letter-spacing`, `--bh-text-body-lg-regular-line-height`, `--bh-text-body-md-regular-font-size`, `--bh-text-body-md-regular-font-weight`, `--bh-text-body-md-regular-letter-spacing`, `--bh-text-body-md-regular-line-height`, `--bh-text-heading-sm-semibold-font-size`, `--bh-text-heading-sm-semibold-font-weight`, `--bh-text-heading-sm-semibold-letter-spacing`, `--bh-text-heading-sm-semibold-line-height`, `--elevation-button-focus` |
 | `types` | `leading-image`, `trailing-image`, `full-image` |
 <!-- registry-contract:end -->

package/docs/design-system/components/catalog-components.md

@@ -57,6 +57,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `registryDependencies` | `breadcrumbs`, `button`, `file-upload`, `table`, `tag` |
 | `modes` | `showcase`, `divider`, `content-divider` |
 | `states` | `label`, `action`, `disabled-action` |
-| `tokens` | `--bh-bg-raised`, `--bh-border-focus`, `--bh-border-subtle`, `--bh-catalog-file-grid-max`, `--bh-catalog-file-grid-min`, `--bh-catalog-file-preview-max`, `--bh-catalog-file-preview-min`, `--bh-content-default`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-control-default`, `--bh-focus-ring-width`, `--bh-font-family`, `--bh-font-weight-medium`, `--bh-font-weight-regular`, `--bh-interactive-ghost-hover`, `--bh-interactive-soft-default`, `--bh-opacity-65`, `--bh-radius-lg-8`, `--bh-space-2xl-14`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-base-letter-spacing`, `--bh-text-body-md-font-size`, `--bh-text-body-md-line-height`, `--bh-text-body-sm-regular-line-height`, `--bh-text-body-xs-regular-font-size`, `--bh-text-heading-xs-semibold-font-size`, `--bh-text-heading-xs-semibold-font-weight`, `--bh-text-heading-xs-semibold-line-height`, `--shadow-component-default` |
+| `tokens` | `--bh-bg-raised`, `--bh-border-focus`, `--bh-border-subtle`, `--bh-catalog-file-grid-max`, `--bh-catalog-file-grid-min`, `--bh-catalog-file-preview-max`, `--bh-catalog-file-preview-min`, `--bh-content-default`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-control-default`, `--bh-focus-ring-width`, `--bh-font-family`, `--bh-font-weight-medium`, `--bh-font-weight-regular`, `--bh-interactive-ghost-hover`, `--bh-interactive-soft-default`, `--bh-opacity-65`, `--bh-radius-lg-8`, `--bh-space-2xl-14`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-base-letter-spacing`, `--bh-text-body-md-font-size`, `--bh-text-body-md-line-height`, `--bh-text-body-sm-regular-line-height`, `--bh-text-body-xs-regular-font-size`, `--bh-text-heading-xs-semibold-font-size`, `--bh-text-heading-xs-semibold-font-weight`, `--bh-text-heading-xs-semibold-line-height`, `--elevation-component-default` |
 | `variants` | `solid-divider`, `dotted-divider` |
 <!-- registry-contract:end -->

package/docs/design-system/components/chart.md

@@ -1,46 +1,110 @@
 # Chart
 
-Chart provides Recharts wrappers with Banhaten chart tokens, responsive sizing, tooltip content, and legend content.
+Eight ECharts families and 18 ready-made blocks adapted from [EvilCharts](https://evilcharts.com/docs/echarts/area-chart/blocks), using Banhaten tokens throughout. Existing Recharts wrappers remain compatible.
+
+## Install
+
+```bash
+npx banhaten add chart
+```
+
+This installs the source modules and declares `echarts` and `recharts`. The playground loads the chart page separately; chart instances initialize when visible.
 
 ## API
 
+Use `DataChart` for application data. Every series uses a Banhaten categorical palette index; raw colors are not part of the specification.
+
 ```tsx
-<ChartContainer config={{ revenue: { color: "var(--bh-chart-1)" } }}>
-  <LineChart data={data}>
-    <ChartTooltip content={<ChartTooltipContent />} />
-    <Line dataKey="revenue" stroke="var(--color-revenue)" />
-  </LineChart>
-</ChartContainer>
+import { DataChart } from "@/components/ui/data-chart"
+import type { ChartSpec } from "@/components/ui/chart-options"
+
+const spec: ChartSpec = {
+  family: "area",
+  variant: "gradient",
+  categoryKey: "month",
+  data: [
+    { month: "Jan", revenue: 120, costs: 80 },
+    { month: "Feb", revenue: 180, costs: 95 },
+    { month: "Mar", revenue: 150, costs: 90 },
+  ],
+  series: [
+    { key: "revenue", label: "Revenue", colorIndex: 0 },
+    { key: "costs", label: "Costs", colorIndex: 1 },
+  ],
+  legend: true,
+  brush: true,
+}
+
+<DataChart label="Revenue and costs" description="Revenue exceeds costs in each month." spec={spec} />
 ```
 
+`DataChart` accepts `spec`, required `label`, optional `description`, `loading`, `loadingLabel`, `emptyLabel`, and container attributes. `ChartSpec` selects `area`, `line`, `bar`, `composed`, `radar`, `pie`, `radial`, or `sankey`. Use `stack="stacked"` or `stack="percent"`, `horizontal`, `labels`, `grid`, `max`, `nodes`, and `links` where applicable. Curves are native ECharts approximations, matching the reference implementation; named spline variants are not mathematical spline implementations.
+
+Shared parts support seven `legendIndicator` shapes; series `dotStyle` and `activeDotStyle`; `tooltipRadius`, `tooltipSurface`, `tooltipPosition`, and `tooltipCursor`. Translucent tooltips use the Banhaten opacity token. Brush controls are enabled with `brush: true`. Forecast `buffer` tails apply to independent series; stacked series retain their complete data to preserve totals.
+
+Use `EChart` for advanced native options. Its `option(theme)` factory receives resolved inherited Banhaten colors, font metrics, spacing, radii, opacity, direction, and reduced-motion preference. An optional `onReady(chart, theme)` callback can attach interactions and return their cleanup. Native options supplied by callers must also use these tokens.
+
+```tsx
+import { ChartBlock } from "@/components/ui/chart-block"
+
+<ChartBlock block="latency" />
+```
+
+`ChartBlock` provides example compositions with illustrative datasets. Time-range controls update both chart data and summaries. The visible data table uses the same filtered rows. Use `DataChart` for your own production data or adapt the installed block source.
+
+| Family | Block IDs |
+| --- | --- |
+| Area | `latency`, `portfolio`, `benchmark`, `audience` |
+| Line | `payouts`, `shipments` |
+| Bar | `peak`, `grid`, `monospace` |
+| Pie | `market-share`, `progress-rings`, `revenue-mix`, `reliability-score` |
+| Radial | `budget`, `ride`, `cache-tiers` |
+| Sankey | `allocation`, `pipeline` |
+
+Legacy `ChartContainer`, `ChartTooltip`, `ChartTooltipContent`, `ChartLegend`, and `ChartLegendContent` still compose with Recharts. Their `config` maps series names to `--color-*` CSS variables.
+
 ## Token Contract
 
-Chart adds `--bh-chart-1` through `--bh-chart-5` via the token build. `ChartContainer` maps config entries to `--color-*` variables.
+- Marks use the eight `--bh-chart-categorical-*` colors. Neutral tracks, surfaces, borders, and text use existing semantic tokens.
+- Fonts, weights, sizes, line heights, spacing, radii, opacity, and animation duration resolve from the chart's inherited Banhaten tokens. No duplicate theme palette is maintained.
+- Theme, font, radius, and direction changes update mounted charts. Existing legend selections and brush range survive theme updates.
+- Gradient fills and patterns remain available. Colored blur shadows and glow variants are omitted. Tooltips have no shadow.
+- Numeric data, chart percentages, angles, and geometry ratios describe the visualization rather than design tokens.
+- All source modules, including TypeScript helpers, are included in token governance checks.
 
-## RTL
+### Chart corner radii
 
-Chart layout depends on the Recharts configuration. Surrounding labels and legends use logical layout.
+Keep chart marks subtly rounded so their endpoints and stacked joins remain easy to compare. Use `--bh-radius-sm-4` for exposed bar ends and separated donut slices: 4px in the default theme, 6px in rounded mode, and 0px in sharp mode. The native `option(theme)` API exposes this as `theme.markRadius` separately from surface and tooltip radii.
 
-## Accessibility
+| Mark | Corner treatment |
+| --- | --- |
+| Bars, including composed charts | Small radius at the exposed value end; square at the baseline. |
+| Stacked bars | Square between segments; Small radius only at the outer end of the stack. |
+| Standard pie and donut slices | Square slice corners (0px). |
+| Separated and petal donut slices | Small radius; avoid pill-shaped corners. |
 
-Pair charts with text summaries or tables for critical data. Tooltips are supplemental.
+## RTL
 
-## Install
+`DataChart` inherits direction or accepts `dir="rtl"`. Cartesian category axes and value-axis placement mirror. Block controls, summaries, and tables follow logical layout. Data order is preserved. Text uses the active Banhaten Arabic and English font tokens.
 
-```bash
-npx banhaten add chart
-```
+## Accessibility
+
+Supply a meaningful `label` and a concise `description` of the finding. Charts are labelled figures; hover tooltips supplement that description. Blocks provide keyboard-operable time ranges and expandable data tables. For application data, provide a corresponding table or text summary when precise values matter. Do not rely on color alone: use labels, patterns, dashed strokes, or point markers. Reduced motion disables animations and moving dashes.
 
 ## Examples
 
-Primary registry example: `examples/chart-demo.tsx`.
+Primary registry example: `examples/chart-demo.tsx`. Ready-made block example: `examples/chart-block-demo.tsx`.
 
-Open the live component page or run `npx banhaten docs chart` to inspect source files, install command, and examples.
+The live Chart page contains all eight families, all 18 blocks, and an Arabic RTL example. Examples include gradients, texture fills, grouped/stacked/percentage series, dots, brush controls, circular and polygon radar grids, pie labels, radial progress, and Sankey links.
 
 ## RTL Rules
 
 - `inheritsDirection`: true
-- `layout`: Chart labels and legends should use logical layout; chart geometry is controlled by Recharts.
+- `layout`: Cartesian axes mirror; block layouts use logical properties. Legacy Recharts geometry remains caller-controlled.
+
+## Source attribution
+
+Chart designs and illustrative block data are adapted from the MIT-licensed [EvilCharts repository](https://github.com/legions-developer/evilcharts). Its notice is included in the installed chart files. The shared renderer uses Apache ECharts under Apache-2.0. Banhaten's token layer, family builders, and lifecycle replace duplicated source chart implementations.
 
 <!-- registry-contract:start -->
 ## Registry Contract
@@ -50,9 +114,16 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 
 | Field | Values |
 | --- | --- |
-| `supportedExports` | `components/chart.tsx: ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent` |
-| `parts` | `ChartContainer`, `ChartTooltip`, `ChartTooltipContent`, `ChartLegend`, `ChartLegendContent` |
-| `registryDependencies` | None |
-| `features` | `responsive container`, `tooltip content`, `legend content`, `config colors` |
-| `tokens` | `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-border-subtle`, `--bh-chart-categorical-aqua`, `--bh-chart-categorical-brand`, `--bh-chart-categorical-danger`, `--bh-chart-categorical-fuchsia`, `--bh-chart-categorical-information`, `--bh-chart-categorical-purple`, `--bh-chart-categorical-success`, `--bh-chart-categorical-warning`, `--bh-content-default`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-space-17xl-288`, `--bh-space-19xl-384`, `--bh-space-3xl-16`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-text-body-xs-medium-font-size`, `--bh-text-body-xs-medium-font-weight`, `--bh-text-body-xs-regular-font-size`, `--bh-text-body-xs-regular-font-weight`, `--bh-text-body-xs-regular-letter-spacing`, `--bh-text-body-xs-regular-line-height`, `--shadow-popover` |
+| `supportedExports` | `components/chart.tsx: ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent`, `components/echart.tsx: EChart`, `components/chart-options.ts: createChartOption`, `components/data-chart.tsx: DataChart`, `components/chart-block.tsx: ChartBlock, chartBlocks` |
+| `parts` | `DataChart`, `ChartBlock`, `EChart`, `ChartContainer`, `ChartTooltip`, `ChartTooltipContent`, `ChartLegend`, `ChartLegendContent` |
+| `registryDependencies` | `button`, `progress` |
+| `props.spec` | `ChartSpec; default null; DataChart: family, data, series, variant, stacking, labels, brush, and interaction options. Series colors are Banhaten palette indices.` |
+| `props.label` | `string; default null; DataChart / EChart: required accessible chart name.` |
+| `props.description` | `string; default null; DataChart / EChart: optional accessible text summary.` |
+| `props.block` | `ChartBlockId; default null; ChartBlock: one of 18 documented blocks, with illustrative data and period controls where applicable.` |
+| `props.option` | `(theme: EChartTheme) => EChartsOption; default null; EChart: advanced option factory receives resolved inherited Banhaten tokens.` |
+| `props.onReady` | `(chart, theme) => void \| (() => void); default null; EChart: attach custom interactions and return their cleanup.` |
+| `props.config` | `ChartConfig; default null; Legacy ChartContainer: maps series names to CSS color variables.` |
+| `features` | `eight chart families`, `18 ready-made blocks`, `live theme and font tokens`, `responsive SVG`, `tooltips and legends`, `range brush`, `pattern fills`, `reduced motion`, `RTL`, `Recharts compatibility` |
+| `tokens` | `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-border-default`, `--bh-border-focus`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-chart-categorical-aqua`, `--bh-chart-categorical-brand`, `--bh-chart-categorical-danger`, `--bh-chart-categorical-fuchsia`, `--bh-chart-categorical-information`, `--bh-chart-categorical-purple`, `--bh-chart-categorical-success`, `--bh-chart-categorical-warning`, `--bh-chart-neutral-default`, `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-duration-default`, `--bh-focus-ring-width`, `--bh-font-family`, `--bh-font-family-mono`, `--bh-icon-stroke-200`, `--bh-interactive-ghost-hover`, `--bh-opacity-15`, `--bh-opacity-30`, `--bh-opacity-90`, `--bh-opacity-muted`, `--bh-radius-3xl-16`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-radius-md-6`, `--bh-radius-sm-4`, `--bh-radius-xl-10`, `--bh-radius-xs-2`, `--bh-space-11xl-96`, `--bh-space-12xl-128`, `--bh-space-15xl-224`, `--bh-space-17xl-288`, `--bh-space-19xl-384`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-7xl-40`, `--bh-space-9xl-64`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-body-2xs-regular-font-size`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-3xs-regular-font-size`, `--bh-text-body-3xs-regular-line-height`, `--bh-text-body-sm-medium-font-size`, `--bh-text-body-sm-medium-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-line-height`, `--bh-text-body-xs-medium-font-size`, `--bh-text-body-xs-medium-font-weight`, `--bh-text-body-xs-regular-font-size`, `--bh-text-body-xs-regular-font-weight`, `--bh-text-body-xs-regular-letter-spacing`, `--bh-text-body-xs-regular-line-height`, `--bh-text-heading-lg-semibold-font-size`, `--bh-text-heading-lg-semibold-font-weight`, `--bh-text-heading-lg-semibold-letter-spacing`, `--bh-text-heading-lg-semibold-line-height`, `--bh-text-heading-md-semibold-font-size`, `--bh-text-heading-md-semibold-font-weight`, `--bh-text-heading-md-semibold-letter-spacing`, `--bh-text-heading-md-semibold-line-height`, `--bh-text-heading-xs-semibold-font-size`, `--bh-text-heading-xs-semibold-font-weight`, `--bh-text-heading-xs-semibold-letter-spacing`, `--bh-text-heading-xs-semibold-line-height`, `--elevation-popover` |
 <!-- registry-contract:end -->

package/docs/design-system/components/checkbox.md

@@ -64,5 +64,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `registryDependencies` | None |
 | `cardPositions` | `start`, `end` |
 | `states` | `unchecked`, `checked`, `indeterminate`, `selected`, `disabled` |
-| `tokens` | `--bh-bg-default`, `--bh-bg-disabled`, `--bh-bg-raised`, `--bh-bg-raised-hover`, `--bh-border-brand-strong`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-checkbox-card-border`, `--bh-checkbox-card-border-width`, `--bh-checkbox-card-border-width-active`, `--bh-checkbox-card-border-width-current`, `--bh-checkbox-card-content-gap`, `--bh-checkbox-card-gap`, `--bh-checkbox-card-label-gap`, `--bh-checkbox-card-media-icon-size`, `--bh-checkbox-card-padding`, `--bh-checkbox-card-radius`, `--bh-checkbox-card-text-gap`, `--bh-checkbox-card-width`, `--bh-checkbox-control-border`, `--bh-checkbox-control-radius`, `--bh-checkbox-control-size`, `--bh-checkbox-icon-size`, `--bh-checkbox-root-size`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-on-color`, `--bh-content-subtle`, `--bh-icon-stroke-300`, `--bh-interactive-checkbox-default`, `--bh-interactive-checkbox-hover`, `--bh-opacity-60`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-medium-letter-spacing`, `--bh-text-body-md-medium-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-line-height`, `--shadow-checkbox-card`, `--shadow-checkbox-card-focus`, `--shadow-checkbox-control`, `--shadow-checkbox-focus`, `--shadow-component-default` |
+| `tokens` | `--bh-bg-default`, `--bh-bg-disabled`, `--bh-bg-raised`, `--bh-bg-raised-hover`, `--bh-border-brand-strong`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-checkbox-card-border`, `--bh-checkbox-card-border-width`, `--bh-checkbox-card-border-width-active`, `--bh-checkbox-card-border-width-current`, `--bh-checkbox-card-content-gap`, `--bh-checkbox-card-gap`, `--bh-checkbox-card-label-gap`, `--bh-checkbox-card-media-icon-size`, `--bh-checkbox-card-padding`, `--bh-checkbox-card-radius`, `--bh-checkbox-card-text-gap`, `--bh-checkbox-card-width`, `--bh-checkbox-control-border`, `--bh-checkbox-control-radius`, `--bh-checkbox-control-size`, `--bh-checkbox-icon-size`, `--bh-checkbox-root-size`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-icon-stroke-300`, `--bh-interactive-checkbox-content`, `--bh-interactive-checkbox-default`, `--bh-interactive-checkbox-hover`, `--bh-opacity-60`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-medium-letter-spacing`, `--bh-text-body-md-medium-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-line-height`, `--elevation-checkbox-card`, `--elevation-checkbox-card-focus`, `--elevation-checkbox-control`, `--elevation-checkbox-focus`, `--elevation-component-default` |
 <!-- registry-contract:end -->