banhaten 0.4.0 → 0.6.0

package/docs/design-system/components/page-header.md

@@ -19,15 +19,43 @@ Figma reference: `Page Header`, node `1154:2816` in `Design system 3.0 Copy`.
 
 | Prop | Type | Default |
 | --- | --- | --- |
-| `title` | `string` | `Section Tile` |
+| `title` | `ReactNode` (inline content) | `Section Tile` |
 | `metaInfo` | `string` | `Meta info` |
-| `description` | `string` | `Section description` |
-| `icon` | `ReactNode` or `false` | home icon |
+| `description` | `ReactNode` (inline content) | `Section description` |
+| `icon` | `ReactNode` or `false` | home icon; none in `comfortable` unless passed |
 | `breadcrumbs` | `PageHeaderBreadcrumb[]` or `false` | four `Home` items |
-| `actions` | `PageHeaderAction[]` or `false` | four `Button` actions |
-| `tabs` | `PageHeaderTabs` or `false` | underline `Tabs` |
+| `actions` | `PageHeaderAction[]`, your own nodes, or `false` | four `Button` actions |
+| `children` | `ReactNode` | none; supporting content under the description, such as a status badge |
+| `size` | `default` or `comfortable` | `default` |
+| `tabs` | `PageHeaderTabs` or `false` | underline `Tabs`; none in `comfortable` unless passed |
+| `tabs.fullWidth` | `boolean` | `true`; set `false` for content-width triggers |
 | `dir` | `ltr` or `rtl` | `ltr` |
 
+### Comfortable size
+
+`size="comfortable"` is the page heading inside an app shell whose header already carries the breadcrumbs. This is the `Page heading` frame in the ATS360 product files.
+
+- **Spacing:** no block padding; the title and description sit `8px` apart, and actions sit `24px` from the copy and `12px` from each other.
+- **Action data** render as `40px` (`density="comfortable"`) secondary Buttons.
+- **Action widths:** Buttons in the actions keep a minimum width of `160px`, or `176px` for primary Buttons. Longer labels grow past it, and icon-only Buttons keep their own size.
+- **Icon and tabs** appear only when you pass them.
+
+When a page needs a primary action, pass your own nodes instead of action data. The page's Buttons keep their own variants:
+
+```tsx
+<PageHeader
+  size="comfortable"
+  title="Requisitions"
+  description="Track headcount requests, budget checks, and approval ownership."
+  actions={<>
+    <Button variant="outline">Budgets</Button>
+    <Button>Create request</Button>
+  </>}
+/>
+```
+
+`description` takes inline content, for example a record ID followed by its status text. `children` render under it in a wrapping row, for badges or other supporting content.
+
 ## Structure
 
 The implementation follows the Figma hierarchy:
@@ -36,28 +64,33 @@ The implementation follows the Figma hierarchy:
 - Title row with optional icon, title, and meta text.
 - Action group aligned to the end of the title row.
 - Optional body description below the title row.
-- Underline `Tabs` spanning the full header width.
+- Underline `Tabs` spanning the full header width. Triggers take equal shares by default and can opt into content width with `tabs.fullWidth: false`.
+
+The title and description each resolve their own content direction. This keeps punctuation attached to the content when its script opposes the surrounding page direction, without changing the mirrored header layout.
+
+`PageHeader` reuses the existing `Button` and `Tabs` components instead of duplicating their behavior or visual contracts. Action descriptors render as `secondary`, default-density Buttons; PageHeader owns only their grouping and placement.
 
-`PageHeader` reuses the existing `Tabs` component instead of duplicating tab behavior.
+Breadcrumb items retain Breadcrumbs' icon-slot contract: populated slots use the canonical icon geometry, while empty slots collapse instead of reserving space inside the header.
 
 ## Token Contract
 
 The component consumes Banhaten semantic tokens and component aliases. Do not hard-code Figma fallback literals in component source; promote any Figma value into its owned `tokens/source/` fragment as a `--bh-*` token or alias first.
 
-- Borders: `--bh-border-default`
 - Content: `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-heading`, `--bh-content-muted`, `--bh-content-subtle`
-- Interactive: `--bh-interactive-secondary-default`
-- Shape: `--bh-control-default`
+- Actions inherit Button's secondary surface, border, typography, focus, and disabled tokens instead of redeclaring them in PageHeader.
+- Breadcrumb icon visibility and geometry remain owned by Breadcrumbs.
 
 ## Pixel Rules
 
-- Header root is vertically padded by `20px`.
+- Header root is vertically padded by `20px`; `comfortable` has no padding.
 - Breadcrumb and body text use `15px / 24px`.
 - Title uses `24px / 28px` at weight `600`.
 - Meta text uses `12px / 16px`.
-- Title row and action group are separated by `40px`.
-- Action buttons are `36px` high with an `8px` radius, subtle border, drop shadow, and inner bottom shadow.
-- Tabs use the existing `underline`, `md`, `fullWidth` tab treatment.
+- Title row and action group are separated by `40px`; `24px` in `comfortable`.
+- Title and description are `4px` apart; `8px` in `comfortable`. Actions are `8px` apart; `12px` in `comfortable`.
+- Populated breadcrumb icon slots remain `20px`; empty slots collapse to `0px`.
+- Actions use Button's `secondary`, `density="default"` contract (`36px` high, resolving to `sm`); PageHeader owns only action-group placement and gap.
+- Tabs use the existing `underline`, `md`, `fullWidth` treatment by default. Full-width triggers keep equal shares while labels fit; both full and content-width modes preserve intrinsic label width and scroll horizontally when the row is narrower than its labels.
 
 ## Accessibility
 
@@ -65,7 +98,8 @@ The component consumes Banhaten semantic tokens and component aliases. Do not ha
 - Mark the current breadcrumb with `current: true` so it receives `aria-current="page"`.
 - Separators are decorative and hidden from assistive technology.
 - Action items render as real buttons or anchors.
-- Focus states use the brand token and remain visible for keyboard users.
+- Action focus and disabled states come from Button; breadcrumb focus remains visible for keyboard users.
+- Tab labels remain complete and non-overlapping; constrained rows scroll locally instead of truncating or painting one label over another.
 
 ## Install
 
@@ -81,7 +115,7 @@ Open the live component page or run `npx banhaten docs page-header` to inspect s
 
 ## RTL Rules
 
-This component has no special RTL contract beyond inherited document direction and logical spacing.
+The header layout inherits document direction and uses logical spacing. The title and description independently use `dir="auto"`, so Latin copy in an RTL header (and Arabic copy in an LTR header) keeps neutral punctuation at its content end while breadcrumbs, actions, metadata, and tabs retain the header direction. Horizontal tab overflow follows that inherited direction without changing or truncating label copy.
 
 <!-- registry-contract:start -->
 ## Registry Contract
@@ -94,7 +128,14 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `supportedExports` | `components/expanded/PageHeader.tsx: PageHeader` |
 | `parts` | `PageHeader` |
 | `registryDependencies` | `breadcrumbs`, `button`, `tabs` |
+| `props.PageHeader.size` | `"default" \| "comfortable"; default "default"; comfortable is the page heading inside an app shell whose header carries the breadcrumbs: no block padding, 8px between title and description, 24px between copy and actions, 12px between actions, 40px action Buttons with a 160px minimum width (176px for primary), and no icon or tabs unless passed.` |
+| `props.PageHeader.actions` | `PageHeaderAction[] \| ReactNode \| false; default "[]"; Action data renders secondary Buttons at the header density; pass your own nodes for primary actions or other controls.` |
+| `props.PageHeader.description` | `ReactNode; default null; Inline description content under the title, in body-md and content/subtle.` |
+| `props.PageHeader.children` | `ReactNode; default null; Supporting content under the description, such as status badges, in a wrapping row with 8px gaps.` |
+| `props.PageHeader.title` | `ReactNode; default null; Heading content in heading-md semibold (24/28); inline content such as a record name and its type is allowed.` |
+| `features` | `Breadcrumb-owned icon-slot visibility`, `Button-owned default-density secondary action styling`, `content-safe horizontal tab overflow`, `full-width tab opt-out`, `comfortable size for app-shell page headings`, `custom action nodes and rich descriptions` |
 | `modes` | `breadcrumbs`, `metadata`, `description`, `actions`, `tabs` |
+| `sizes` | `default`, `comfortable` |
 | `states` | `default`, `without-icon`, `without-actions`, `without-tabs` |
-| `tokens` | `--bh-bg-raised`, `--bh-border-default`, `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-control-default`, `--bh-focus-ring-width`, `--bh-font-family`, `--bh-icon-stroke-190`, `--bh-interactive-secondary-default`, `--bh-opacity-muted`, `--bh-space-2xl-14`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-7xl-40`, `--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-regular-font-size`, `--bh-text-body-2xs-regular-font-weight`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--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-md-semibold-font-size`, `--bh-text-heading-md-semibold-font-weight`, `--bh-text-heading-md-semibold-line-height`, `--shadow-button-secondary` |
+| `tokens` | `--bh-button-label-padding-x`, `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-focus-ring-width`, `--bh-font-family`, `--bh-icon-stroke-190`, `--bh-page-header-comfortable-action-min-width`, `--bh-page-header-comfortable-primary-action-min-width`, `--bh-space-2xl-14`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-7xl-40`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-text-body-2xs-regular-font-size`, `--bh-text-body-2xs-regular-font-weight`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--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-md-semibold-font-size`, `--bh-text-heading-md-semibold-font-weight`, `--bh-text-heading-md-semibold-line-height` |
 <!-- registry-contract:end -->

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

@@ -25,7 +25,7 @@ Pagination navigates paged result sets, tables, and long lists. It supports nume
 
 ## Token Contract
 
-Pagination uses Banhaten control height, radius, border, background, content, focus, icon, caption, and shadow tokens. Previous/next glyphs are 18px inside 20px slots.
+Pagination uses Banhaten control height, radius, border, background, content, focus, icon, caption, and elevation tokens. Previous/next glyphs are 18px inside 20px slots.
 
 ## RTL
 
@@ -66,7 +66,7 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `parts` | `Pagination` |
 | `registryDependencies` | None |
 | `features` | `container-aware compact numeric pages`, `contained horizontal control scrolling`, `wrapping captions and summaries` |
-| `tokens` | `--bh-border-brand-strong`, `--bh-content-disabled`, `--bh-icon-stroke-225`, `--bh-pagination-action-gap`, `--bh-pagination-active-bg`, `--bh-pagination-active-border`, `--bh-pagination-active-content`, `--bh-pagination-caption-content`, `--bh-pagination-caption-font-weight`, `--bh-pagination-caption-width`, `--bh-pagination-control-content`, `--bh-pagination-control-gap`, `--bh-pagination-control-ghost-bg`, `--bh-pagination-control-ghost-hover`, `--bh-pagination-control-ghost-pressed`, `--bh-pagination-control-label-padding-x`, `--bh-pagination-control-label-rtl-padding-x`, `--bh-pagination-control-soft-bg`, `--bh-pagination-control-soft-hover`, `--bh-pagination-control-soft-pressed`, `--bh-pagination-control-text-gap`, `--bh-pagination-control-text-padding-x`, `--bh-pagination-control-text-rtl-gap`, `--bh-pagination-control-text-rtl-padding-x`, `--bh-pagination-font-size`, `--bh-pagination-icon-size`, `--bh-pagination-icon-slot-size`, `--bh-pagination-item-size`, `--bh-pagination-label-font-weight`, `--bh-pagination-letter-spacing`, `--bh-pagination-line-height`, `--bh-pagination-numeric-width`, `--bh-pagination-page-bg`, `--bh-pagination-page-content`, `--bh-pagination-page-gap`, `--bh-pagination-page-hover`, `--bh-pagination-page-pressed`, `--bh-pagination-radius`, `--bh-pagination-root-gap`, `--bh-pagination-simple-width`, `--bh-space-md-8`, `--shadow-pagination-active`, `--shadow-pagination-control`, `--shadow-pagination-focus` |
+| `tokens` | `--bh-border-brand-strong`, `--bh-content-disabled`, `--bh-icon-stroke-225`, `--bh-pagination-action-gap`, `--bh-pagination-active-bg`, `--bh-pagination-active-border`, `--bh-pagination-active-content`, `--bh-pagination-caption-content`, `--bh-pagination-caption-font-weight`, `--bh-pagination-caption-width`, `--bh-pagination-control-content`, `--bh-pagination-control-gap`, `--bh-pagination-control-ghost-bg`, `--bh-pagination-control-ghost-hover`, `--bh-pagination-control-ghost-pressed`, `--bh-pagination-control-label-padding-x`, `--bh-pagination-control-label-rtl-padding-x`, `--bh-pagination-control-soft-bg`, `--bh-pagination-control-soft-hover`, `--bh-pagination-control-soft-pressed`, `--bh-pagination-control-text-gap`, `--bh-pagination-control-text-padding-x`, `--bh-pagination-control-text-rtl-gap`, `--bh-pagination-control-text-rtl-padding-x`, `--bh-pagination-font-size`, `--bh-pagination-icon-size`, `--bh-pagination-icon-slot-size`, `--bh-pagination-item-size`, `--bh-pagination-label-font-weight`, `--bh-pagination-letter-spacing`, `--bh-pagination-line-height`, `--bh-pagination-numeric-width`, `--bh-pagination-page-bg`, `--bh-pagination-page-content`, `--bh-pagination-page-gap`, `--bh-pagination-page-hover`, `--bh-pagination-page-pressed`, `--bh-pagination-radius`, `--bh-pagination-root-gap`, `--bh-pagination-simple-width`, `--bh-space-md-8`, `--elevation-pagination-active`, `--elevation-pagination-control`, `--elevation-pagination-focus` |
 | `types` | `numeric`, `simple`, `summary` |
 | `variants` | `soft`, `ghost` |
 <!-- registry-contract:end -->

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

@@ -73,5 +73,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `offsets` | `tight`, `default`, `loose` |
 | `sides` | `top`, `right`, `bottom`, `left` |
 | `sizes` | `sm`, `md`, `lg`, `auto` |
-| `tokens` | `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-control-default`, `--bh-font-family`, `--bh-icon-stroke-200`, `--bh-interactive-ghost-hover`, `--bh-popover-arrow-depth`, `--bh-popover-arrow-width`, `--bh-popover-bg`, `--bh-popover-body-gap`, `--bh-popover-border`, `--bh-popover-close-icon-size`, `--bh-popover-close-size`, `--bh-popover-content-gap`, `--bh-popover-footer-gap`, `--bh-popover-header-gap`, `--bh-popover-lg-width`, `--bh-popover-max-width`, `--bh-popover-md-width`, `--bh-popover-offset`, `--bh-popover-offset-default`, `--bh-popover-offset-loose`, `--bh-popover-offset-tight`, `--bh-popover-padding`, `--bh-popover-radius`, `--bh-popover-sm-width`, `--bh-popover-trigger-gap`, `--bh-radius-full`, `--bh-text-base-letter-spacing`, `--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`, `--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-z-popover`, `--shadow-button-focus`, `--shadow-popover` |
+| `tokens` | `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-control-default`, `--bh-font-family`, `--bh-icon-stroke-200`, `--bh-interactive-ghost-hover`, `--bh-popover-arrow-depth`, `--bh-popover-arrow-width`, `--bh-popover-bg`, `--bh-popover-body-gap`, `--bh-popover-border`, `--bh-popover-close-icon-size`, `--bh-popover-close-size`, `--bh-popover-content-gap`, `--bh-popover-footer-gap`, `--bh-popover-header-gap`, `--bh-popover-lg-width`, `--bh-popover-max-width`, `--bh-popover-md-width`, `--bh-popover-offset`, `--bh-popover-offset-default`, `--bh-popover-offset-loose`, `--bh-popover-offset-tight`, `--bh-popover-padding`, `--bh-popover-radius`, `--bh-popover-sm-width`, `--bh-popover-trigger-gap`, `--bh-radius-full`, `--bh-text-base-letter-spacing`, `--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`, `--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-z-popover`, `--elevation-button-focus`, `--elevation-popover` |
 <!-- registry-contract:end -->

package/docs/design-system/components/progress-slider.md

@@ -61,6 +61,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `features` | `start-anchored fill`, `grip handle`, `ticks` |
 | `sizes` | `default`, `lg` |
 | `states` | `default`, `disabled` |
-| `tokens` | `--bh-bg-brand-soft`, `--bh-bg-brand-subtle`, `--bh-bg-danger-soft`, `--bh-bg-danger-subtle`, `--bh-bg-neutral-soft`, `--bh-bg-neutral-subtle`, `--bh-bg-success-soft`, `--bh-bg-success-subtle`, `--bh-bg-warning-soft`, `--bh-bg-warning-subtle`, `--bh-border-brand-strong`, `--bh-border-brand-subtle`, `--bh-border-danger-strong`, `--bh-border-danger-subtle`, `--bh-border-strong`, `--bh-border-subtle`, `--bh-border-success-strong`, `--bh-border-success-subtle`, `--bh-border-warning-strong`, `--bh-border-warning-subtle`, `--bh-content-disabled`, `--bh-opacity-60`, `--bh-progress-slider-border-width-current`, `--bh-progress-slider-border-width-lg`, `--bh-progress-slider-border-width-md`, `--bh-progress-slider-fill-bg`, `--bh-progress-slider-fill-border`, `--bh-progress-slider-grip-bg`, `--bh-progress-slider-grip-height-current`, `--bh-progress-slider-grip-height-lg`, `--bh-progress-slider-grip-height-md`, `--bh-progress-slider-grip-width`, `--bh-progress-slider-handle-width-current`, `--bh-progress-slider-handle-width-lg`, `--bh-progress-slider-handle-width-md`, `--bh-progress-slider-height-current`, `--bh-progress-slider-height-lg`, `--bh-progress-slider-height-md`, `--bh-progress-slider-radius`, `--bh-progress-slider-tick-bg`, `--bh-progress-slider-tick-gap`, `--bh-progress-slider-tick-padding`, `--bh-progress-slider-tick-size`, `--bh-progress-slider-track-bg`, `--bh-progress-slider-width-current`, `--bh-progress-slider-width-lg`, `--bh-progress-slider-width-md`, `--bh-radius-full`, `--bh-z-overlay`, `--bh-z-popover`, `--bh-z-raised`, `--shadow-progress-slider-thumb-focus` |
+| `tokens` | `--bh-bg-brand-soft`, `--bh-bg-brand-subtle`, `--bh-bg-danger-soft`, `--bh-bg-danger-subtle`, `--bh-bg-neutral-soft`, `--bh-bg-neutral-subtle`, `--bh-bg-success-soft`, `--bh-bg-success-subtle`, `--bh-bg-warning-soft`, `--bh-bg-warning-subtle`, `--bh-border-brand-strong`, `--bh-border-brand-subtle`, `--bh-border-danger-strong`, `--bh-border-danger-subtle`, `--bh-border-strong`, `--bh-border-subtle`, `--bh-border-success-strong`, `--bh-border-success-subtle`, `--bh-border-warning-strong`, `--bh-border-warning-subtle`, `--bh-content-disabled`, `--bh-opacity-60`, `--bh-progress-slider-border-width-current`, `--bh-progress-slider-border-width-lg`, `--bh-progress-slider-border-width-md`, `--bh-progress-slider-fill-bg`, `--bh-progress-slider-fill-border`, `--bh-progress-slider-grip-bg`, `--bh-progress-slider-grip-height-current`, `--bh-progress-slider-grip-height-lg`, `--bh-progress-slider-grip-height-md`, `--bh-progress-slider-grip-width`, `--bh-progress-slider-handle-width-current`, `--bh-progress-slider-handle-width-lg`, `--bh-progress-slider-handle-width-md`, `--bh-progress-slider-height-current`, `--bh-progress-slider-height-lg`, `--bh-progress-slider-height-md`, `--bh-progress-slider-radius`, `--bh-progress-slider-tick-bg`, `--bh-progress-slider-tick-gap`, `--bh-progress-slider-tick-padding`, `--bh-progress-slider-tick-size`, `--bh-progress-slider-track-bg`, `--bh-progress-slider-width-current`, `--bh-progress-slider-width-lg`, `--bh-progress-slider-width-md`, `--bh-radius-full`, `--bh-z-overlay`, `--bh-z-popover`, `--bh-z-raised`, `--elevation-progress-slider-thumb-focus` |
 | `tones` | `brand`, `neutral`, `success`, `warning`, `danger` |
 <!-- registry-contract:end -->

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

@@ -60,6 +60,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `parts` | `RadioCard` |
 | `registryDependencies` | None |
 | `states` | `default`, `active`, `disabled` |
-| `tokens` | `--bh-bg-accent-blue-soft`, `--bh-bg-accent-purple-soft`, `--bh-bg-always-white`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-bg-raised-hover`, `--bh-border-brand-strong`, `--bh-border-default`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-icon-size-default`, `--bh-icon-slot-size-default`, `--bh-icon-stroke-180`, `--bh-icon-stroke-200`, `--bh-interactive-radiobutton-default`, `--bh-opacity-disabled-media`, `--bh-radio-card-bg`, `--bh-radio-card-border`, `--bh-radio-card-border-width`, `--bh-radio-card-border-width-active`, `--bh-radio-card-company-mark-color`, `--bh-radio-card-payment-height`, `--bh-radio-card-payment-logo-color`, `--bh-radio-card-payment-logo-height`, `--bh-radio-card-payment-logo-width`, `--bh-radio-card-payment-width`, `--bh-radio-card-width`, `--bh-radio-control-border`, `--bh-radius-full`, `--bh-radius-md-6`, `--bh-radius-xl-10`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-7xl-40`, `--bh-space-lg-10`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--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-component-default`, `--shadow-radio-card`, `--shadow-radio-card-current`, `--shadow-radio-card-disabled`, `--shadow-radio-control` |
+| `tokens` | `--bh-bg-accent-blue-soft`, `--bh-bg-accent-purple-soft`, `--bh-bg-always-white`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-bg-raised-hover`, `--bh-border-brand-strong`, `--bh-border-default`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-icon-size-default`, `--bh-icon-slot-size-default`, `--bh-icon-stroke-180`, `--bh-icon-stroke-200`, `--bh-interactive-radiobutton-default`, `--bh-opacity-disabled-media`, `--bh-radio-card-bg`, `--bh-radio-card-border`, `--bh-radio-card-border-width`, `--bh-radio-card-border-width-active`, `--bh-radio-card-company-mark-color`, `--bh-radio-card-payment-height`, `--bh-radio-card-payment-logo-color`, `--bh-radio-card-payment-logo-height`, `--bh-radio-card-payment-logo-width`, `--bh-radio-card-payment-width`, `--bh-radio-card-width`, `--bh-radio-control-border`, `--bh-radius-full`, `--bh-radius-md-6`, `--bh-radius-xl-10`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-7xl-40`, `--bh-space-lg-10`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--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-component-default`, `--elevation-radio-card`, `--elevation-radio-card-current`, `--elevation-radio-card-disabled`, `--elevation-radio-control` |
 | `types` | `with-icon`, `icon-radio-right`, `payment`, `with-avatar`, `company-icon`, `icon-radio-left`, `radio-label` |
 <!-- registry-contract:end -->

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

@@ -68,5 +68,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `controlPositions` | `start`, `end` |
 | `orientations` | `vertical`, `horizontal` |
 | `states` | `default`, `error`, `disabled` |
-| `tokens` | `--bh-bg-always-white`, `--bh-bg-default`, `--bh-bg-disabled`, `--bh-border-brand-strong`, `--bh-border-danger-strong`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-width-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-interactive-radiobutton-default`, `--bh-opacity-0`, `--bh-opacity-100`, `--bh-radio-control-border`, `--bh-radio-group-message-max-width`, `--bh-radius-full`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--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-text-body-md-medium-font-weight`, `--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-medium-font-size`, `--bh-text-body-sm-medium-font-weight`, `--bh-text-body-sm-medium-letter-spacing`, `--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-letter-spacing`, `--bh-text-body-sm-regular-line-height`, `--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-z-raised`, `--shadow-button-focus`, `--shadow-radio-control` |
+| `tokens` | `--bh-bg-always-white`, `--bh-bg-default`, `--bh-bg-disabled`, `--bh-border-brand-strong`, `--bh-border-danger-strong`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-width-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-interactive-radiobutton-default`, `--bh-opacity-0`, `--bh-opacity-100`, `--bh-radio-control-border`, `--bh-radio-group-message-max-width`, `--bh-radius-full`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--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-text-body-md-medium-font-weight`, `--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-medium-font-size`, `--bh-text-body-sm-medium-font-weight`, `--bh-text-body-sm-medium-letter-spacing`, `--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-letter-spacing`, `--bh-text-body-sm-regular-line-height`, `--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-z-raised`, `--elevation-button-focus`, `--elevation-radio-control` |
 <!-- registry-contract:end -->

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

@@ -53,5 +53,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `parts` | `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle` |
 | `registryDependencies` | None |
 | `features` | `horizontal panels`, `vertical panels`, `keyboard resize handle` |
-| `tokens` | `--bh-bg-raised`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-muted`, `--bh-radius-full`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-z-raised`, `--shadow-button-focus`, `--shadow-component-focus-ring` |
+| `tokens` | `--bh-bg-raised`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-muted`, `--bh-radius-full`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-z-raised`, `--elevation-button-focus`, `--elevation-component-focus-ring` |
 <!-- registry-contract:end -->

package/docs/design-system/components/rolling-count.md

@@ -0,0 +1,61 @@
+# Rolling Count
+
+`RollingCount` shows tabular figures where each changed character rolls into place like an odometer: the old glyph slides out as the new one slides in, up when a digit grows and down when it shrinks, with 9 to 0 continuing upward. Task List uses it for its progress counter and Approval Card for its step badge and countdown seconds.
+
+## API
+
+```tsx
+import { RollingCount } from "@/components/ui/rolling-count"
+
+<RollingCount value={`${done}/${total}`} aria-label={`${done} of ${total} done`} />
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `string` | – | Text to show. Only the characters that change roll; a value that grows a digit keeps the existing glyphs in place. |
+| `aria-label` | `string` | `value` | What assistive technology reads instead of the plain value. |
+| `dir` | `"ltr" \| "rtl"` | `"ltr"` | Glyph order. Stays left-to-right by default so values like 2/5 keep their order inside RTL copy. |
+
+Any other `span` prop passes through.
+
+## Install
+
+```bash
+npx banhaten add rolling-count
+```
+
+## Examples
+
+Primary registry example: `examples/rolling-count-demo.tsx`.
+
+## Token Contract
+
+Glyphs use tabular figures and inherit the surrounding type scale and color. Each roll runs on the `--bh-duration-slow` foundation duration with `--bh-easing-standard`, and a digit returns to plain text when its roll transition ends.
+
+Covered source files: `components/rolling-count.tsx` and `components/rolling-count.css`.
+
+## RTL Rules
+
+- Digits keep left-to-right order inside RTL copy, so separators such as 2/5 stay in reading order.
+- The counter isolates its bidi context so it never reorders surrounding Arabic text.
+
+## Accessibility
+
+Assistive technology reads the plain value, or `aria-label` when given, from a visually hidden span; the rolling glyphs are hidden from it. Under `prefers-reduced-motion` the roll collapses to an instant change.
+
+<!-- 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/rolling-count.tsx: RollingCount` |
+| `parts` | `RollingCount` |
+| `registryDependencies` | None |
+| `props.value` | `string; default null; Text to show; each changed character rolls up or down into place.` |
+| `props.aria-label` | `string; default null; What assistive technology reads instead of the value, for example 2 of 5 done.` |
+| `props.dir` | `"ltr" \| "rtl"; default "ltr"; Glyph order. Stays left-to-right by default so values like 2/5 keep their order inside RTL copy.` |
+| `tokens` | `--bh-duration-slow`, `--bh-easing-standard` |
+<!-- registry-contract:end -->

package/docs/design-system/components/scroll-area.md

@@ -60,5 +60,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `parts` | `ScrollArea`, `ScrollBar` |
 | `registryDependencies` | None |
 | `features` | `vertical scrollbar`, `horizontal scrollbar`, `two-axis scrollbar composition`, `viewport clipping`, `keyboard-focusable viewport`, `viewportProps escape hatch` |
-| `tokens` | `--bh-border-default`, `--bh-radius-full`, `--bh-space-lg-10`, `--bh-space-xxs-2`, `--shadow-component-focus-ring` |
+| `tokens` | `--bh-border-default`, `--bh-radius-full`, `--bh-space-lg-10`, `--bh-space-xxs-2`, `--elevation-component-focus-ring` |
 <!-- registry-contract:end -->

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

@@ -13,6 +13,8 @@ Select is a Radix Select-backed field and menu system. It supports default and s
 
 | Prop | Type / values | Default | Notes |
 | --- | --- | --- | --- |
+| `aria-label` | `string` | — | Gives a label-less trigger a stable purpose-based name. It is forwarded to the trigger, not the root. |
+| `aria-labelledby` | `string` | — | Names the trigger from external text. It is forwarded to the trigger, not the root. |
 | `variant` | `default`, `soft` | `default` | Selects the trigger surface. |
 | `size` | `lg`, `md` | `lg` | Selects the trigger height. |
 | `state` | `default`, `filled`, `error`, `disabled` | `default` | Selects the visual state. |
@@ -24,11 +26,16 @@ Select is a Radix Select-backed field and menu system. It supports default and s
 | `hasTrailingIcon` | `boolean` | `false` | Set true to show the default information icon inside the trigger. |
 | `trailingIcon` | `ReactNode \| false` | `null` | A node enables the trailing slot; false always removes it. |
 | `expandIcon` | `ReactNode \| false` | `chevron-down` | Replaces the expand icon, or removes it when false. |
+| `triggerProps` | `React.ComponentProps<"button">` | — | Advanced trigger attributes, spread last so matching values override top-level trigger defaults. |
 
 ## Migration
 
 Select now renders only its expand chevron when optional trigger-icon props are omitted. Add `hasLeadingIcon` or `hasTrailingIcon` to retain the previous default user or information icon. A supplied icon enables its slot, while explicit `false` always removes it.
 
+## Sizing rule
+
+Select is `320px` wide by default (`--bh-select-width`), the width of the library Select frame. In a form grid or form card, make each field fill its column: pass `className="w-full"`, or set `--bh-select-width: 100%` on the field. Keep the default for a field that stands on its own.
+
 ## Token Contract
 
 Select consumes Banhaten field, trigger, menu, item, checkbox, status, avatar, payment, typography, spacing, border, radius, shadow, and focus tokens.
@@ -39,7 +46,7 @@ Values, labels, helper text, and menu item text use `text-start` and `dir="auto"
 
 ## Accessibility
 
-Radix provides listbox semantics, focus management, typeahead, selection state, and keyboard behavior. Use visible helper or error text for validation states.
+Radix provides listbox semantics, focus management, typeahead, selection state, and keyboard behavior. Every Select needs a stable name that describes its purpose rather than its current value. Prefer a visible `label`; for a visually label-less control, pass `aria-label`, `aria-labelledby`, a text `label` with `hasLabel={false}`, or associate an external `<label>` through `triggerId`. Top-level ARIA naming props are forwarded to the trigger. `triggerProps` remains the advanced override path. Do not rely on `value` or `placeholder` as the control name. Use visible helper or error text for validation states.
 
 ## Install
 
@@ -70,6 +77,8 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `supportedExports` | `components/select-content.tsx: SelectIcon, SelectItemAvatar, SelectItemCompanyLogo, SelectItemPaymentIcon, SelectItemStatusDot, getDefaultSelectItemMedia`, `components/select.tsx: Select, SelectCheckboxIndicator, SelectHelperText, SelectItemAvatar, SelectItemCompanyLogo, SelectItemPaymentIcon, SelectItemStatusDot, SelectLabel, SelectMenu, SelectMenuItem, SelectRoot, SelectTrigger, selectMenu, selectMenuItem, selectRoot, selectTrigger` |
 | `parts` | `Select`, `SelectRoot`, `SelectLabel`, `SelectTrigger`, `SelectHelperText`, `SelectMenu`, `SelectMenuItem`, `SelectCheckboxIndicator`, `SelectItemAvatar`, `SelectItemCompanyLogo`, `SelectItemPaymentIcon`, `SelectItemStatusDot` |
 | `registryDependencies` | None |
+| `props.aria-label` | `string; default null; Provides a stable purpose-based accessible name for a label-less Select and is forwarded to its trigger.` |
+| `props.aria-labelledby` | `string; default null; Names a label-less Select trigger from external text without placing the relationship on the inert root.` |
 | `props.density` | `"compact" \| "default" \| "comfortable"; default "default"; Preferred cross-component sizing contract. Overrides the legacy size prop with 32px, 36px, or 40px control heights.` |
 | `props.hasInformationIcon` | `boolean; default false; Shows an information icon beside the field label.` |
 | `props.hasLeadingIcon` | `boolean; default false; Shows the default user leading icon when no leadingIcon is supplied.` |
@@ -77,11 +86,12 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `props.hasTrailingIcon` | `boolean; default false; Shows the default information trailing icon when no trailingIcon is supplied.` |
 | `props.trailingIcon` | `React.ReactNode \| false; default null; Supplies and enables a custom trailing icon; false always removes the trailing slot.` |
 | `props.expandIcon` | `React.ReactNode \| false; default "chevron-down"; Uses the default expand chevron when omitted, accepts a replacement node, and hides the slot when false.` |
+| `props.triggerProps` | `React.ComponentProps<"button">; default null; Forwards advanced trigger attributes and is spread last, so matching attributes override the top-level trigger defaults.` |
 | `densities` | `compact`, `default`, `comfortable` |
 | `itemTypes` | `default`, `icon`, `avatar`, `company`, `payment`, `dot` |
 | `selectionTypes` | `default`, `checkbox` |
 | `sizes` | `lg`, `md`, `comfortable` |
 | `states` | `default`, `filled`, `error`, `disabled` |
-| `tokens` | `--bh-bg-accent-blue-default`, `--bh-bg-accent-blue-soft`, `--bh-bg-accent-purple-soft`, `--bh-bg-accent-red-default`, `--bh-bg-always-white`, `--bh-bg-brand-default`, `--bh-bg-danger-default`, `--bh-bg-default`, `--bh-bg-disabled`, `--bh-bg-info-default`, `--bh-bg-neutral-default`, `--bh-bg-success-default`, `--bh-bg-warning-default`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-accent-blue-strong`, `--bh-content-accent-purple-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-on-color`, `--bh-content-subtle`, `--bh-font-weight-semibold`, `--bh-icon-size-default`, `--bh-icon-stroke-200`, `--bh-icon-stroke-220`, `--bh-interactive-checkbox-default`, `--bh-opacity-60`, `--bh-radius-full`, `--bh-select-avatar-font-size`, `--bh-select-check-color`, `--bh-select-checkbox-border`, `--bh-select-checkbox-icon-size`, `--bh-select-checkbox-radius`, `--bh-select-checkbox-size`, `--bh-select-company-icon-size`, `--bh-select-content-gap`, `--bh-select-field-gap`, `--bh-select-icon-size`, `--bh-select-icon-slot-size`, `--bh-select-item-check-offset`, `--bh-select-item-content-padding`, `--bh-select-item-gap`, `--bh-select-item-hover-bg`, `--bh-select-item-min-height`, `--bh-select-item-padding-x`, `--bh-select-item-radius`, `--bh-select-item-selected-padding-end`, `--bh-select-item-value-padding-x`, `--bh-select-label-gap`, `--bh-select-media-inset`, `--bh-select-menu-bg`, `--bh-select-menu-list-gap`, `--bh-select-menu-offset`, `--bh-select-menu-padding-y`, `--bh-select-menu-radius`, `--bh-select-menu-width`, `--bh-select-payment-height`, `--bh-select-payment-mark-offset`, `--bh-select-payment-mark-size`, `--bh-select-payment-radius`, `--bh-select-payment-width`, `--bh-select-status-dot-size`, `--bh-select-trigger-bg`, `--bh-select-trigger-bg-disabled`, `--bh-select-trigger-bg-soft`, `--bh-select-trigger-border`, `--bh-select-trigger-border-current`, `--bh-select-trigger-border-disabled`, `--bh-select-trigger-border-error`, `--bh-select-trigger-border-focus`, `--bh-select-trigger-gap`, `--bh-select-trigger-icon-color`, `--bh-select-trigger-padding-x`, `--bh-select-trigger-padding-y-comfortable`, `--bh-select-trigger-padding-y-lg`, `--bh-select-trigger-padding-y-md`, `--bh-select-trigger-radius`, `--bh-select-value-padding-inline`, `--bh-select-width`, `--bh-space-md-8`, `--bh-space-xxxs-1`, `--bh-text-body-2xs-regular-font-size`, `--bh-text-body-2xs-regular-font-weight`, `--bh-text-body-2xs-regular-letter-spacing`, `--bh-text-body-2xs-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-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`, `--bh-text-body-xs-medium-font-size`, `--bh-text-body-xs-medium-font-weight`, `--bh-text-body-xs-medium-letter-spacing`, `--bh-text-body-xs-medium-line-height`, `--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-z-popover`, `--shadow-component-default`, `--shadow-select-checkbox`, `--shadow-select-danger-focus-ring`, `--shadow-select-focus-ring`, `--shadow-select-menu`, `--shadow-select-trigger` |
+| `tokens` | `--bh-bg-accent-blue-default`, `--bh-bg-accent-blue-soft`, `--bh-bg-accent-purple-soft`, `--bh-bg-accent-red-default`, `--bh-bg-always-white`, `--bh-bg-brand-default`, `--bh-bg-danger-default`, `--bh-bg-default`, `--bh-bg-disabled`, `--bh-bg-info-default`, `--bh-bg-neutral-default`, `--bh-bg-success-default`, `--bh-bg-warning-default`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-accent-blue-strong`, `--bh-content-accent-purple-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-font-weight-semibold`, `--bh-icon-size-default`, `--bh-icon-stroke-200`, `--bh-icon-stroke-220`, `--bh-interactive-checkbox-content`, `--bh-interactive-checkbox-default`, `--bh-opacity-60`, `--bh-radius-full`, `--bh-select-avatar-font-size`, `--bh-select-check-color`, `--bh-select-checkbox-border`, `--bh-select-checkbox-icon-size`, `--bh-select-checkbox-radius`, `--bh-select-checkbox-size`, `--bh-select-company-icon-size`, `--bh-select-content-gap`, `--bh-select-field-gap`, `--bh-select-icon-size`, `--bh-select-icon-slot-size`, `--bh-select-item-check-offset`, `--bh-select-item-content-padding`, `--bh-select-item-gap`, `--bh-select-item-hover-bg`, `--bh-select-item-min-height`, `--bh-select-item-padding-x`, `--bh-select-item-radius`, `--bh-select-item-selected-padding-end`, `--bh-select-item-value-padding-x`, `--bh-select-label-gap`, `--bh-select-media-inset`, `--bh-select-menu-bg`, `--bh-select-menu-list-gap`, `--bh-select-menu-offset`, `--bh-select-menu-padding-y`, `--bh-select-menu-radius`, `--bh-select-menu-width`, `--bh-select-payment-height`, `--bh-select-payment-mark-offset`, `--bh-select-payment-mark-size`, `--bh-select-payment-radius`, `--bh-select-payment-width`, `--bh-select-status-dot-size`, `--bh-select-trigger-bg`, `--bh-select-trigger-bg-disabled`, `--bh-select-trigger-bg-soft`, `--bh-select-trigger-border`, `--bh-select-trigger-border-current`, `--bh-select-trigger-border-disabled`, `--bh-select-trigger-border-error`, `--bh-select-trigger-border-focus`, `--bh-select-trigger-gap`, `--bh-select-trigger-icon-color`, `--bh-select-trigger-padding-x`, `--bh-select-trigger-padding-y-comfortable`, `--bh-select-trigger-padding-y-lg`, `--bh-select-trigger-padding-y-md`, `--bh-select-trigger-radius`, `--bh-select-value-padding-inline`, `--bh-select-width`, `--bh-space-md-8`, `--bh-space-xxxs-1`, `--bh-text-body-2xs-regular-font-size`, `--bh-text-body-2xs-regular-font-weight`, `--bh-text-body-2xs-regular-letter-spacing`, `--bh-text-body-2xs-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-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`, `--bh-text-body-xs-medium-font-size`, `--bh-text-body-xs-medium-font-weight`, `--bh-text-body-xs-medium-letter-spacing`, `--bh-text-body-xs-medium-line-height`, `--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-z-popover`, `--elevation-component-default`, `--elevation-select-checkbox`, `--elevation-select-danger-focus-ring`, `--elevation-select-focus-ring`, `--elevation-select-menu`, `--elevation-select-trigger` |
 | `variants` | `default`, `soft` |
 <!-- registry-contract:end -->

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

@@ -78,5 +78,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `features` | `focus trap`, `outside dismissal`, `Escape dismissal`, `logical sides`, `scrollable body`, `footer actions` |
 | `sides` | `start`, `end`, `top`, `bottom` |
 | `sizes` | `sm`, `default`, `lg` |
-| `tokens` | `--bh-bg-backdrop`, `--bh-bg-raised`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-subtle`, `--bh-icon-stroke-200`, `--bh-interactive-ghost-hover`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-space-12xl-128`, `--bh-space-16xl-256`, `--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-8xl-48`, `--bh-space-9xl-64`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-xs-4`, `--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-semibold-font-size`, `--bh-text-heading-sm-semibold-font-weight`, `--bh-text-heading-sm-semibold-letter-spacing`, `--bh-text-heading-sm-semibold-line-height`, `--bh-z-overlay`, `--shadow-button-focus`, `--shadow-component-default` |
+| `tokens` | `--bh-bg-backdrop`, `--bh-bg-raised`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-subtle`, `--bh-icon-stroke-200`, `--bh-interactive-ghost-hover`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-space-12xl-128`, `--bh-space-16xl-256`, `--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-8xl-48`, `--bh-space-9xl-64`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-xs-4`, `--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-semibold-font-size`, `--bh-text-heading-sm-semibold-font-weight`, `--bh-text-heading-sm-semibold-letter-spacing`, `--bh-text-heading-sm-semibold-line-height`, `--bh-z-overlay`, `--elevation-button-focus`, `--elevation-component-default` |
 <!-- registry-contract:end -->

package/docs/design-system/components/shimmer-text.md

@@ -0,0 +1,67 @@
+# Shimmer Text
+
+`ShimmerText` is text with a soft brightness valley sweeping through it, for labels of work in progress such as a sync that is running or a file being read. The AI conversation components share it: the Thinking State label, the Thinking Reasoning header, the active Task List row, and the Agent Input while it enhances a prompt all use it, so they move the same way.
+
+Use it to mark a moving part inside ordinary copy. It is presentational; announce progress through your own semantics or through Thinking State.
+
+## API
+
+```tsx
+import { ShimmerText } from "@/components/ui/shimmer-text"
+
+<p>
+  Searching the workspace for <ShimmerText tone="default">billing/invoices.ts</ShimmerText>
+</p>
+
+<ShimmerText>Reading 12 files</ShimmerText>
+<ShimmerText animated={false}>Read 12 files</ShimmerText>
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `animated` | `boolean` | `true` | Runs the brightness sweep. Set false to keep the same colors without motion. |
+| `tone` | `"subtle" \| "default"` | `"subtle"` | `subtle` reads as secondary copy; `default` matches primary text. |
+
+Any other `span` prop passes through. The `data-slot="shimmer-text"` attribute is what the styles key on, so it cannot be overridden; wrap the primitive when you need your own hook.
+
+## Install
+
+```bash
+npx banhaten add shimmer-text
+```
+
+## Examples
+
+Primary registry example: `examples/shimmer-text-demo.tsx`.
+
+## Token Contract
+
+The shimmer is built from existing content tokens: the base color is `--bh-content-subtle` (or `--bh-content-default` for the `default` tone) and the passing valley is `--bh-content-disabled` (or `--bh-content-subtle`). The sweep runs on `--bh-shimmer-text-duration` with the `--bh-easing-standard` foundation easing. Text size and weight are inherited.
+
+Covered source files: `components/shimmer-text.tsx` and `components/shimmer-text.css`.
+
+## RTL Rules
+
+- The text inherits document direction.
+- The shine sweeps from the reading start to the reading end, so RTL text uses mirrored keyframes automatically.
+
+## Accessibility
+
+The glyphs stay real text, so screen readers read them normally. The shimmer is purely decorative: under `prefers-reduced-motion` it renders as static text in the base color with no gradient, and the resting color keeps the base text contrast.
+
+<!-- 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/shimmer-text.tsx: ShimmerText` |
+| `parts` | `ShimmerText` |
+| `registryDependencies` | None |
+| `props.animated` | `boolean; default "true"; Runs the brightness sweep; set false to keep the same colors without motion.` |
+| `props.tone` | `"subtle" \| "default"; default "subtle"; Secondary or primary text color pair for the sweep.` |
+| `tokens` | `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-easing-standard`, `--bh-shimmer-text-duration` |
+| `tones` | `subtle`, `default` |
+<!-- registry-contract:end -->

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

@@ -1,6 +1,6 @@
 # Sidebar
 
-Sidebar is the complete Figma-aligned application navigation system. It provides a 280px expanded shell and 48px icon rail, brand and workspace headers, grouped and nested menus, tree navigation, badges and actions, user footers, tooltips, controlled state, and logical RTL placement.
+Sidebar is the complete Figma-aligned application navigation system. It provides a 900px minimum height, 280px expanded shell and 48px icon rail, staged expand/collapse motion, brand and workspace headers, grouped and nested menus, tree navigation, badges and actions, user footers with hover identity previews, tooltips, controlled state, and logical RTL placement.
 
 All sidebar parts render inside `SidebarProvider`. The provider owns controlled or uncontrolled collapse state and supplies the tooltip context used by icon-only menu rows.
 
@@ -48,7 +48,7 @@ All sidebar parts render inside `SidebarProvider`. The provider owns controlled
 | `SidebarHeader`, `SidebarBody`, `SidebarFooter` | layout regions |
 | `SidebarHeaderBrand`, `SidebarHeaderWorkspaceSwitch` | brand and workspace header compositions |
 | `SidebarHeaderAction` | compact search or custom header action |
-| `SidebarFooterUser` | supporting-text or bordered user switcher |
+| `SidebarFooterUser` | supporting-text, bordered, or inset card user switcher with a collapsed hover/focus identity preview |
 | `SidebarGroup`, `SidebarGroupLabel`, `SidebarGroupAction` | grouped navigation, disclosure, and actions |
 | `SidebarMenu`, `SidebarMenuItem`, `SidebarMenuButton` | default and avatar menu structure with optional slots |
 | `SidebarMenuBadge` | neutral count badge for a menu row |
@@ -62,9 +62,69 @@ All sidebar parts render inside `SidebarProvider`. The provider owns controlled
 
 Use `SidebarHeaderBrand` for product navigation. Use `SidebarHeaderWorkspaceSwitch` with `variant="actions"` for the compact search/collapse header or `variant="card"` for the bordered workspace card.
 
+Brand and workspace headers keep a visible `SidebarTrigger` beneath their identity control while the rail is collapsed, so the same header can always expand again. Pass `collapseAction={false}` only when another persistent expand control is present.
+
+When the rail is collapsed, `SidebarFooterUser` reveals the user's name and supporting text beside the avatar on hover or keyboard focus. Set `showIdentityPreview={false}` to disable that behavior. To make the row selectable, wrap it with `MenuRoot` and `MenuTrigger asChild`, then render account actions in a portalled `MenuContent`; the live playground example demonstrates this composition.
+
+## Sizes
+
+`SidebarProvider` accepts `size="default" | "comfortable"`. The default size is the 32px Figma menu-item set. The comfortable size matches application shells that use 40px navigation rows:
+
+| | `default` | `comfortable` |
+| --- | --- | --- |
+| Menu row height | 32px | 40px (`--bh-sidebar-comfortable-item-height`) |
+| Gap between rows | 0 | 8px (`--bh-sidebar-comfortable-item-gap`) |
+| Row label | body-sm 14/20 | body-md 15/24 |
+| Icon to label | 6px gap + 4px label padding | 6px gap + 2px label padding |
+| Header, body and footer inline padding | 10px / 12px / 10px | 16px (`--bh-sidebar-comfortable-padding`) |
+| Rail edge | 1px end border | 1px stroke inside all four sides, an outline inset by its width (`--bh-sidebar-border`) |
+| Header to first menu, between body sections, and above the footer | header and footer padding | 24px (`--bh-sidebar-comfortable-section-gap`) |
+| Brand name | body-xl semibold 20/30 | heading-md semibold 24/28 |
+| Group label row | 24px with 4px bottom padding, 12px/6px group padding | 20px, no group padding, 8px to the first row |
+
+Comfortable rules apply only while the sidebar is expanded; the 48px collapsed rail is identical at both sizes. In comfortable sidebars the body is a flex column, so a section can be pinned to the bottom with `className="mt-auto"`.
+
+```tsx
+<SidebarProvider size="comfortable">
+  <Sidebar>
+    <SidebarHeader>
+      <SidebarHeaderBrand
+        brand="ATS360"
+        collapseAction={false}
+        logo={false}
+        searchAction={false}
+        subtitle="Recruiting"
+      />
+    </SidebarHeader>
+    <SidebarBody>
+      <SidebarMenu>{/* 40px rows */}</SidebarMenu>
+      <SidebarGroup className="mt-auto">
+        <SidebarGroupLabel>WORKSPACE</SidebarGroupLabel>
+        <SidebarMenu>{/* label-only rows */}</SidebarMenu>
+      </SidebarGroup>
+    </SidebarBody>
+    <SidebarFooter divider={false}>
+      <SidebarFooterUser name="Omar Ali" supportText="Talent acquisition" variant="card" />
+    </SidebarFooter>
+  </Sidebar>
+</SidebarProvider>
+```
+
+`SidebarHeaderBrand` takes `logo={false}` for a text-only brand and `subtitle` for a stacked product or module line in body-sm `content-subtle`. A collapsed text-only brand shows only its header actions.
+
+`SidebarFooterUser variant="card"` renders the signed-in user as an inset `--bh-sidebar-user-card-bg` block with 8px padding, a body-md medium name and a body-sm subtle role. It shows no avatar or chevron unless `avatar` or `trailingIcon` is passed. Any footer variant accepts `avatar={false}` and `trailingIcon={false}` to hide those slots while expanded. Pair the card with `SidebarFooter divider={false}` to drop the top rule.
+
+Group label text uses `--bh-sidebar-group-label-content`, which defaults to `--bh-content-muted`. A product theme can point it at `--bh-content-subtle` without restyling the label.
+
 ## Token Contract
 
-Sidebar uses generated `--bh-sidebar-*` tokens for expanded and collapsed widths, row heights, header actions, compact controls, workspace cards, tree indentation, padding, backgrounds, borders, and menu states. Expanded and collapsed navigation share the same 18px glyph in a centered 20px slot. Do not replace these dimensions with local literals in product compositions.
+Sidebar uses generated `--bh-sidebar-*` tokens for its 900px minimum height, expanded and collapsed widths, row heights, header actions, compact controls, workspace cards, tree indentation, user-preview placement, motion duration and easing, padding, backgrounds, borders, and menu states. Expanded and collapsed navigation share the same 18px glyph in a centered 20px slot. Do not replace these dimensions with local literals in product compositions.
+
+## Motion
+
+The shell, header, menu rows, nested lists, and footer share one tokenized choreography. The width boundary uses `--bh-sidebar-motion-duration` with `--bh-sidebar-motion-easing`; labels and secondary actions use the faster `--bh-sidebar-motion-duration-content`. Content exits as collapse begins and returns after `--bh-sidebar-motion-delay-content`, while icons stay on the logical-start track instead of jumping to the center of the still-expanded shell.
+
+Nested menus and group labels contract through layout rather than unmounting on the first frame. The rail remains clipped until its width transition finishes, then permits the footer identity preview to extend outside the shell. The global reduced-motion rule and component-level `motion-reduce` variants remove the choreography when the user requests less motion.
 
 ## RTL
 
@@ -74,7 +134,7 @@ Use `dir="rtl"` on `SidebarProvider` and `side="start"` or `side="end"` for logi
 
 Provide a text child or explicit `aria-label` for every menu button. Collapsed rows reuse that label in a tooltip. Active menu and tree rows expose `aria-current="page"`; expandable tree rows expose `aria-expanded`; `SidebarToggle` announces both its action and pressed collapse state.
 
-Level 2 rows, group labels, and tree groups unmount while collapsed so keyboard users do not encounter invisible controls. Use native links through `asChild` when a row navigates, and keep button rendering for in-place actions.
+Level 2 rows, group labels, and tree groups remain mounted long enough to animate, but become `aria-hidden` and inert while collapsed so keyboard and assistive-technology users do not encounter invisible controls. Use native links through `asChild` when a row navigates, and keep button rendering for in-place actions.
 
 ## Install
 
@@ -108,8 +168,15 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `registryDependencies` | `tooltip` |
 | `props.collapsed` | `boolean; default false; Controls the provider-owned 280px expanded or 48px rail state. Pair with onCollapsedChange for controlled usage.` |
 | `props.defaultCollapsed` | `boolean; default false; Sets the initial rail state when SidebarProvider owns collapse state internally.` |
+| `props.size` | `"default" \| "comfortable"; default "default"; Set on SidebarProvider. comfortable uses 40px rows 8px apart with body-md labels, 16px shell padding, a 24px section gap, a heading-md brand, and 20px group labels; the collapsed rail is unchanged.` |
+| `props.subtitle` | `React.ReactNode; default "undefined"; Adds a body-sm content-subtle line under the SidebarHeaderBrand name and switches the brand to a stacked layout.` |
+| `props.logo` | `React.ReactNode \| false; default "Sparkles glyph"; Replaces the SidebarHeaderBrand mark; false renders a text-only brand with no logo slot.` |
+| `props.divider` | `boolean; default true; Draws the SidebarFooter top rule; false removes it for inset footer cards.` |
+| `props.avatar` | `React.ReactNode \| false; default "person glyph"; Replaces the SidebarFooterUser avatar; false hides the slot while expanded. The collapsed rail always shows a glyph.` |
+| `props.trailingIcon` | `React.ReactNode \| false; default "part-specific"; Trailing glyph on menu rows and the footer user; false hides the footer user's chevron.` |
+| `props.showIdentityPreview` | `boolean; default true; Reveals the collapsed footer user's name and supporting text beside the rail on hover or keyboard focus.` |
 | `props.side` | `"start" \| "end"; default "start"; Places Sidebar on the logical start or end edge and selects the matching logical border.` |
-| `props.variant` | `SidebarMenuButtonVariant \| SidebarWorkspaceVariant \| "default" \| "supporting-text"; default "part-specific"; Selects default/avatar/nested menu rows, action/card workspace headers, or default/supporting-text footers on the part that owns it.` |
+| `props.variant` | `SidebarMenuButtonVariant \| SidebarWorkspaceVariant \| "default" \| "supporting-text" \| "card"; default "part-specific"; Selects default/avatar/nested menu rows, action/card workspace headers, or default/supporting-text/card footers on the part that owns it. The card footer is an inset bg-subtle block with a body-md name and body-sm role and no avatar or chevron unless passed.` |
 | `props.active` | `boolean; default false; Applies the selected menu or tree treatment and exposes aria-current="page".` |
 | `props.state` | `"default" \| "hover" \| "active" \| "focus"; default "default"; Deterministic interaction state for documentation matrices; product hover and focus remain native CSS interactions.` |
 | `props.showLine` | `boolean; default false; Selects the neutral/brand line-guided Level 2 treatment on SidebarMenuSubButton.` |
@@ -117,9 +184,9 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `props.expandable` | `boolean; default false; Adds a disclosure affordance to group labels or tree-group headings.` |
 | `props.asChild` | `boolean; default false; Renders menu, tree, or inset content through Radix Slot while preserving sidebar layout and semantics.` |
 | `directions` | `ltr`, `rtl` |
-| `features` | `280px expanded and 48px collapsed shells`, `controlled collapse`, `uncontrolled collapse`, `brand header with search and collapse actions`, `workspace action and card headers`, `default, avatar, Level 2, and Level 2 line menu rows`, `supporting text, count badge, and trailing action slots`, `group labels with disclosure and icon actions`, `four-level tree navigation`, `supporting-text and bordered user footers`, `icon-only rail with tooltips`, `logical side placement and RTL mirroring` |
+| `features` | `280px expanded and 48px collapsed shells`, `comfortable size with 40px rows, 8px row gap, and body-md labels`, `controlled collapse`, `uncontrolled collapse`, `brand header with search and collapse actions`, `text-only brand with a stacked subtitle`, `workspace action and card headers`, `visible collapsed-header expand action`, `default, avatar, Level 2, and Level 2 line menu rows`, `supporting text, count badge, and trailing action slots`, `group labels with disclosure, icon actions, and a tokenized label color`, `four-level tree navigation`, `supporting-text, bordered, and inset card user footers`, `divider-free footer`, `collapsed footer identity preview on hover and keyboard focus`, `tokenized staged expand and collapse motion`, `reduced-motion fallback`, `icon-only rail with tooltips`, `logical side placement and RTL mirroring` |
 | `sides` | `start`, `end` |
 | `states` | `default`, `hover`, `active`, `focus`, `expanded`, `collapsed` |
-| `tokens` | `--bh-bg-brand-default`, `--bh-bg-default`, `--bh-bg-default-hover`, `--bh-bg-neutral-subtle`, `--bh-border-focus`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-border-width-strong`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-on-brand`, `--bh-content-subtle`, `--bh-control-sm`, `--bh-icon-stroke-200`, `--bh-interactive-ghost-active`, `--bh-interactive-ghost-default`, `--bh-interactive-ghost-hover`, `--bh-opacity-0`, `--bh-opacity-100`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-radius-md-6`, `--bh-sidebar-active-guide-height`, `--bh-sidebar-bg`, `--bh-sidebar-bg-collapsed`, `--bh-sidebar-border`, `--bh-sidebar-brand-height`, `--bh-sidebar-compact-control-size`, `--bh-sidebar-header-action-size`, `--bh-sidebar-icon-size`, `--bh-sidebar-icon-size-collapsed`, `--bh-sidebar-icon-slot-size`, `--bh-sidebar-item-bg-active`, `--bh-sidebar-item-bg-hover`, `--bh-sidebar-item-content`, `--bh-sidebar-item-content-active`, `--bh-sidebar-item-height`, `--bh-sidebar-item-height-collapsed`, `--bh-sidebar-item-padding-x`, `--bh-sidebar-level-2-indent-width`, `--bh-sidebar-padding`, `--bh-sidebar-rail-width`, `--bh-sidebar-tree-indent-step`, `--bh-sidebar-tree-item-height`, `--bh-sidebar-width`, `--bh-sidebar-width-collapsed`, `--bh-sidebar-workspace-card-height`, `--bh-sidebar-workspace-trigger-max-width`, `--bh-sidebar-workspace-trigger-width`, `--bh-space-19xl-384`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-8xl-48`, `--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-font-weight`, `--bh-text-body-2xs-regular-letter-spacing`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-3xs-semibold-font-size`, `--bh-text-body-3xs-semibold-font-weight`, `--bh-text-body-3xs-semibold-letter-spacing`, `--bh-text-body-3xs-semibold-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`, `--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-body-xl-semibold-font-size`, `--bh-text-body-xl-semibold-font-weight`, `--bh-text-body-xl-semibold-letter-spacing`, `--bh-text-body-xl-semibold-line-height`, `--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-body-xs-semibold-font-weight`, `--shadow-button-focus` |
-| `variants` | `default menu`, `avatar menu`, `Level 2 menu`, `Level 2 line menu`, `workspace actions`, `workspace card`, `default footer`, `supporting-text footer` |
+| `tokens` | `--bh-bg-brand-default`, `--bh-bg-default`, `--bh-bg-default-hover`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-border-focus`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-border-width-strong`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-on-brand`, `--bh-content-subtle`, `--bh-control-sm`, `--bh-icon-stroke-200`, `--bh-interactive-ghost-active`, `--bh-interactive-ghost-default`, `--bh-interactive-ghost-hover`, `--bh-opacity-0`, `--bh-opacity-100`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-radius-md-6`, `--bh-radius-xl-10`, `--bh-sidebar-active-guide-height`, `--bh-sidebar-bg`, `--bh-sidebar-bg-collapsed`, `--bh-sidebar-border`, `--bh-sidebar-brand-height`, `--bh-sidebar-comfortable-brand-padding`, `--bh-sidebar-comfortable-group-label-height`, `--bh-sidebar-comfortable-item-gap`, `--bh-sidebar-comfortable-item-height`, `--bh-sidebar-comfortable-label-padding`, `--bh-sidebar-comfortable-padding`, `--bh-sidebar-comfortable-section-gap`, `--bh-sidebar-compact-control-size`, `--bh-sidebar-group-label-content`, `--bh-sidebar-header-action-size`, `--bh-sidebar-icon-size`, `--bh-sidebar-icon-size-collapsed`, `--bh-sidebar-icon-slot-size`, `--bh-sidebar-item-bg-active`, `--bh-sidebar-item-bg-hover`, `--bh-sidebar-item-content`, `--bh-sidebar-item-content-active`, `--bh-sidebar-item-height`, `--bh-sidebar-item-height-collapsed`, `--bh-sidebar-item-padding-x`, `--bh-sidebar-level-2-indent-width`, `--bh-sidebar-min-height`, `--bh-sidebar-motion-delay-content`, `--bh-sidebar-motion-duration`, `--bh-sidebar-motion-duration-content`, `--bh-sidebar-motion-easing`, `--bh-sidebar-padding`, `--bh-sidebar-rail-width`, `--bh-sidebar-tree-indent-step`, `--bh-sidebar-tree-item-height`, `--bh-sidebar-user-card-bg`, `--bh-sidebar-user-card-bg-hover`, `--bh-sidebar-user-preview-gap`, `--bh-sidebar-user-preview-height`, `--bh-sidebar-user-preview-width`, `--bh-sidebar-width`, `--bh-sidebar-width-collapsed`, `--bh-sidebar-workspace-card-height`, `--bh-sidebar-workspace-trigger-max-width`, `--bh-sidebar-workspace-trigger-width`, `--bh-space-10xl-80`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-8xl-48`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-none`, `--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-font-weight`, `--bh-text-body-2xs-regular-letter-spacing`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-3xs-semibold-font-size`, `--bh-text-body-3xs-semibold-font-weight`, `--bh-text-body-3xs-semibold-letter-spacing`, `--bh-text-body-3xs-semibold-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-md-regular-font-size`, `--bh-text-body-md-regular-letter-spacing`, `--bh-text-body-md-regular-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`, `--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-body-xl-semibold-font-size`, `--bh-text-body-xl-semibold-font-weight`, `--bh-text-body-xl-semibold-letter-spacing`, `--bh-text-body-xl-semibold-line-height`, `--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-body-xs-semibold-font-weight`, `--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-z-overlay`, `--elevation-button-focus`, `--elevation-component-default` |
+| `variants` | `default menu`, `avatar menu`, `Level 2 menu`, `Level 2 line menu`, `workspace actions`, `workspace card`, `default footer`, `supporting-text footer`, `card footer`, `comfortable size` |
 <!-- registry-contract:end -->