banhaten 0.4.0 → 0.6.0

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

@@ -36,7 +36,7 @@ export function LoadingPanel() {
 
 ## Token Contract
 
-Skeleton consumes Banhaten background, border, radius, spacing, button, card, opacity, and shadow tokens. Custom layout sizing should be passed through CSS variables or token classes rather than raw dimensions.
+Skeleton consumes Banhaten background, border, radius, spacing, button, card, opacity, and elevation tokens. Custom layout sizing should be passed through CSS variables or token classes rather than raw dimensions.
 
 - Fill: `--bh-bg-muted`, `--bh-bg-subtle`, `--bh-bg-raised-subtle`, `--bh-bg-brand-subtle`
 - Highlight: `--bh-bg-raised-subtle`, `--bh-bg-default`, `--bh-bg-brand-soft`
@@ -86,6 +86,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `features` | `shimmer animation`, `reduced motion`, `text lines`, `avatar placeholders`, `button placeholders`, `input placeholders`, `card placeholders`, `list placeholders`, `table placeholders`, `form placeholders` |
 | `shapes` | `block`, `text`, `circle` |
 | `sizes` | `xs`, `sm`, `md`, `lg`, `xl` |
-| `tokens` | `--bh-alpha-alpha-transparent`, `--bh-bg-brand-soft`, `--bh-bg-brand-subtle`, `--bh-bg-default`, `--bh-bg-default-hover`, `--bh-bg-muted`, `--bh-bg-raised`, `--bh-bg-raised-subtle`, `--bh-bg-subtle`, `--bh-border-default`, `--bh-border-subtle`, `--bh-button-lg-height`, `--bh-button-md-height`, `--bh-button-sm-height`, `--bh-button-xl-height`, `--bh-card-desktop-content-padding`, `--bh-control-default`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-radius-md-6`, `--bh-radius-xl-10`, `--bh-skeleton-bg`, `--bh-skeleton-duration`, `--bh-skeleton-height`, `--bh-skeleton-highlight`, `--bh-skeleton-radius`, `--bh-skeleton-shimmer-width`, `--bh-skeleton-table-columns`, `--bh-skeleton-width`, `--bh-space-11xl-96`, `--bh-space-12xl-128`, `--bh-space-13xl-160`, `--bh-space-14xl-192`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-7xl-40`, `--bh-space-8xl-48`, `--bh-space-9xl-64`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-text-body-md-regular-line-height`, `--shadow-component-default` |
+| `tokens` | `--bh-alpha-alpha-transparent`, `--bh-bg-brand-soft`, `--bh-bg-brand-subtle`, `--bh-bg-default`, `--bh-bg-default-hover`, `--bh-bg-muted`, `--bh-bg-raised`, `--bh-bg-raised-subtle`, `--bh-bg-subtle`, `--bh-border-default`, `--bh-border-subtle`, `--bh-button-lg-height`, `--bh-button-md-height`, `--bh-button-sm-height`, `--bh-button-xl-height`, `--bh-card-desktop-content-padding`, `--bh-control-default`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-radius-md-6`, `--bh-radius-xl-10`, `--bh-skeleton-bg`, `--bh-skeleton-duration`, `--bh-skeleton-height`, `--bh-skeleton-highlight`, `--bh-skeleton-radius`, `--bh-skeleton-shimmer-width`, `--bh-skeleton-table-columns`, `--bh-skeleton-width`, `--bh-space-11xl-96`, `--bh-space-12xl-128`, `--bh-space-13xl-160`, `--bh-space-14xl-192`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-7xl-40`, `--bh-space-8xl-48`, `--bh-space-9xl-64`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-text-body-md-regular-line-height`, `--elevation-component-default` |
 | `tones` | `default`, `subtle`, `surface`, `brand` |
 <!-- registry-contract:end -->

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

@@ -76,5 +76,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `modes` | `desktop`, `mobile` |
 | `sizes` | `small`, `medium`, `large` |
 | `states` | `header-action`, `footer-actions`, `without-footer`, `primary-only` |
-| `tokens` | `--bh-bg-default`, `--bh-bg-dim`, `--bh-bg-muted`, `--bh-bg-neutral-medium`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-border-default`, `--bh-border-input`, `--bh-border-subtle`, `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-link`, `--bh-content-on-brand`, `--bh-content-on-color`, `--bh-content-subtle`, `--bh-content-success-default`, `--bh-control-default`, `--bh-font-family`, `--bh-font-weight-medium`, `--bh-icon-stroke-220`, `--bh-interactive-brand-default`, `--bh-interactive-ghost-hover`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-space-11xl-96`, `--bh-space-12xl-128`, `--bh-space-18xl-320`, `--bh-space-19xl-384`, `--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-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-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-heading-sm-medium-font-size`, `--bh-text-heading-sm-medium-font-weight`, `--bh-text-heading-sm-medium-line-height`, `--bh-text-heading-xs-medium-font-size`, `--bh-text-heading-xs-medium-line-height`, `--shadow-button-raised`, `--shadow-button-soft`, `--shadow-component-default` |
+| `tokens` | `--bh-bg-default`, `--bh-bg-dim`, `--bh-bg-muted`, `--bh-bg-neutral-medium`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-border-default`, `--bh-border-input`, `--bh-border-subtle`, `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-link`, `--bh-content-on-brand`, `--bh-content-on-color`, `--bh-content-subtle`, `--bh-content-success-default`, `--bh-control-default`, `--bh-font-family`, `--bh-font-weight-medium`, `--bh-icon-stroke-220`, `--bh-interactive-brand-default`, `--bh-interactive-ghost-hover`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-space-11xl-96`, `--bh-space-12xl-128`, `--bh-space-18xl-320`, `--bh-space-19xl-384`, `--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-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-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-heading-sm-medium-font-size`, `--bh-text-heading-sm-medium-font-weight`, `--bh-text-heading-sm-medium-line-height`, `--bh-text-heading-xs-medium-font-size`, `--bh-text-heading-xs-medium-line-height`, `--elevation-button-raised`, `--elevation-button-soft`, `--elevation-component-default` |
 <!-- registry-contract:end -->

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

@@ -30,7 +30,7 @@ Use `showTicks` and `tickCount` for dotted track markers. Use `indicator` for Fi
 
 ## Tokens
 
-Slider consumes component aliases for track size, thumb size, pill height, tick geometry, thumb shadows, and semantic color roles. Tones map to semantic brand/status/accent tokens so color theme changes are inherited automatically.
+Slider consumes component aliases for track size, thumb size, pill height, tick geometry, thumb elevation, and semantic color roles. Tones map to semantic brand/status/accent tokens so color theme changes are inherited automatically.
 
 ## Install
 
@@ -75,7 +75,7 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `indicators` | `none`, `lower-text`, `upper-text`, `lower-tooltip`, `upper-tooltip` |
 | `sizes` | `sm`, `default`, `lg` |
 | `states` | `default`, `disabled` |
-| `tokens` | `--bh-bg-always-white`, `--bh-bg-brand-soft`, `--bh-bg-brand-subtle`, `--bh-bg-danger-default`, `--bh-bg-danger-soft`, `--bh-bg-danger-subtle`, `--bh-bg-default`, `--bh-bg-disabled`, `--bh-bg-neutral-bold`, `--bh-bg-neutral-soft`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-bg-success-default`, `--bh-bg-success-soft`, `--bh-bg-success-subtle`, `--bh-bg-warning-default`, `--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-disabled`, `--bh-border-strong`, `--bh-border-subtle`, `--bh-border-success-strong`, `--bh-border-success-subtle`, `--bh-border-warning-strong`, `--bh-border-warning-subtle`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-interactive-indicator-default`, `--bh-opacity-60`, `--bh-radius-full`, `--bh-radius-md-6`, `--bh-slider-indicator-gap`, `--bh-slider-pill-height`, `--bh-slider-pill-radius`, `--bh-slider-pill-thumb-border-width`, `--bh-slider-pill-thumb-width`, `--bh-slider-pill-track-bg`, `--bh-slider-range-bg`, `--bh-slider-thumb-bg`, `--bh-slider-thumb-grip-bg`, `--bh-slider-thumb-grip-width`, `--bh-slider-thumb-pill-bg`, `--bh-slider-thumb-pill-border`, `--bh-slider-thumb-radius`, `--bh-slider-thumb-ring-bg`, `--bh-slider-thumb-ring-width-current`, `--bh-slider-thumb-ring-width-lg`, `--bh-slider-thumb-ring-width-md`, `--bh-slider-thumb-ring-width-sm`, `--bh-slider-thumb-size-current`, `--bh-slider-thumb-size-lg`, `--bh-slider-thumb-size-md`, `--bh-slider-thumb-size-sm`, `--bh-slider-tick-bg`, `--bh-slider-tick-gap`, `--bh-slider-tick-size`, `--bh-slider-track-bg`, `--bh-slider-track-radius`, `--bh-slider-track-size-current`, `--bh-slider-track-size-lg`, `--bh-slider-track-size-md`, `--bh-slider-track-size-sm`, `--bh-slider-vertical-height`, `--bh-slider-width`, `--bh-space-6xl-32`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--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-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-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-z-base`, `--bh-z-overlay`, `--bh-z-popover`, `--bh-z-raised`, `--shadow-slider-thumb`, `--shadow-slider-thumb-focus`, `--shadow-slider-tooltip` |
+| `tokens` | `--bh-bg-always-white`, `--bh-bg-brand-soft`, `--bh-bg-brand-subtle`, `--bh-bg-danger-default`, `--bh-bg-danger-soft`, `--bh-bg-danger-subtle`, `--bh-bg-default`, `--bh-bg-disabled`, `--bh-bg-neutral-bold`, `--bh-bg-neutral-soft`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-bg-success-default`, `--bh-bg-success-soft`, `--bh-bg-success-subtle`, `--bh-bg-warning-default`, `--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-disabled`, `--bh-border-strong`, `--bh-border-subtle`, `--bh-border-success-strong`, `--bh-border-success-subtle`, `--bh-border-warning-strong`, `--bh-border-warning-subtle`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-interactive-indicator-default`, `--bh-opacity-60`, `--bh-radius-full`, `--bh-radius-md-6`, `--bh-slider-indicator-gap`, `--bh-slider-pill-height`, `--bh-slider-pill-radius`, `--bh-slider-pill-thumb-border-width`, `--bh-slider-pill-thumb-width`, `--bh-slider-pill-track-bg`, `--bh-slider-range-bg`, `--bh-slider-thumb-bg`, `--bh-slider-thumb-grip-bg`, `--bh-slider-thumb-grip-width`, `--bh-slider-thumb-pill-bg`, `--bh-slider-thumb-pill-border`, `--bh-slider-thumb-radius`, `--bh-slider-thumb-ring-bg`, `--bh-slider-thumb-ring-width-current`, `--bh-slider-thumb-ring-width-lg`, `--bh-slider-thumb-ring-width-md`, `--bh-slider-thumb-ring-width-sm`, `--bh-slider-thumb-size-current`, `--bh-slider-thumb-size-lg`, `--bh-slider-thumb-size-md`, `--bh-slider-thumb-size-sm`, `--bh-slider-tick-bg`, `--bh-slider-tick-gap`, `--bh-slider-tick-size`, `--bh-slider-track-bg`, `--bh-slider-track-radius`, `--bh-slider-track-size-current`, `--bh-slider-track-size-lg`, `--bh-slider-track-size-md`, `--bh-slider-track-size-sm`, `--bh-slider-vertical-height`, `--bh-slider-width`, `--bh-space-6xl-32`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--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-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-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-z-base`, `--bh-z-overlay`, `--bh-z-popover`, `--bh-z-raised`, `--elevation-slider-thumb`, `--elevation-slider-thumb-focus`, `--elevation-slider-tooltip` |
 | `tones` | `brand`, `neutral`, `success`, `warning`, `danger` |
 | `valueModes` | `single`, `range`, `multi-thumb` |
 <!-- registry-contract:end -->

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

@@ -19,7 +19,7 @@ Social Button is the sign-in action primitive for supported identity providers.
 
 ## Token Contract
 
-Social Button uses Banhaten control, typography, radius, focus, spacing, and shadow tokens. Provider colors are the limited brand-color exception and should stay scoped to this component.
+Social Button uses Banhaten control, typography, radius, focus, spacing, and elevation tokens. Provider colors are the limited brand-color exception and should stay scoped to this component.
 
 ## RTL
 
@@ -60,6 +60,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `registryDependencies` | None |
 | `platforms` | `apple`, `facebook`, `google`, `linkedin`, `twitter`, `whatsapp` |
 | `sizes` | `default`, `icon` |
-| `tokens` | `--bh-bg-raised`, `--bh-bg-raised-hover`, `--bh-border-default`, `--bh-border-focus`, `--bh-border-width-default`, `--bh-content-default`, `--bh-icon-stroke-200`, `--bh-icon-stroke-225`, `--bh-opacity-50`, `--bh-social-apple-bg`, `--bh-social-apple-border`, `--bh-social-apple-fg`, `--bh-social-apple-hover`, `--bh-social-apple-icon`, `--bh-social-apple-icon-border`, `--bh-social-apple-outline-icon`, `--bh-social-apple-width`, `--bh-social-apple-width-rtl`, `--bh-social-button-bg`, `--bh-social-button-bg-hover`, `--bh-social-button-border`, `--bh-social-button-current-border`, `--bh-social-button-fg`, `--bh-social-button-focus-border`, `--bh-social-button-gap`, `--bh-social-button-height`, `--bh-social-button-icon`, `--bh-social-button-icon-size`, `--bh-social-button-label-padding-inline-end`, `--bh-social-button-padding-x`, `--bh-social-button-padding-y`, `--bh-social-button-radius`, `--bh-social-button-width`, `--bh-social-button-width-rtl`, `--bh-social-facebook-bg`, `--bh-social-facebook-fg`, `--bh-social-facebook-hover`, `--bh-social-facebook-icon`, `--bh-social-facebook-outline-icon`, `--bh-social-facebook-width`, `--bh-social-facebook-width-rtl`, `--bh-social-google-bg`, `--bh-social-google-border`, `--bh-social-google-fg`, `--bh-social-google-hover`, `--bh-social-google-width`, `--bh-social-google-width-rtl`, `--bh-social-linkedin-bg`, `--bh-social-linkedin-fg`, `--bh-social-linkedin-hover`, `--bh-social-linkedin-icon`, `--bh-social-linkedin-outline-icon`, `--bh-social-linkedin-width`, `--bh-social-linkedin-width-rtl`, `--bh-social-twitter-bg`, `--bh-social-twitter-border`, `--bh-social-twitter-fg`, `--bh-social-twitter-hover`, `--bh-social-twitter-icon`, `--bh-social-twitter-icon-border`, `--bh-social-twitter-outline-icon`, `--bh-social-twitter-width`, `--bh-social-twitter-width-rtl`, `--bh-social-whatsapp-bg`, `--bh-social-whatsapp-fg`, `--bh-social-whatsapp-hover`, `--bh-social-whatsapp-icon`, `--bh-social-whatsapp-outline-icon`, `--bh-social-whatsapp-width`, `--bh-social-whatsapp-width-rtl`, `--bh-text-button-font-size`, `--bh-text-button-font-weight`, `--bh-text-button-letter-spacing`, `--bh-text-button-line-height`, `--shadow-component-default`, `--shadow-social-button`, `--shadow-social-button-focus` |
+| `tokens` | `--bh-bg-raised`, `--bh-bg-raised-hover`, `--bh-border-default`, `--bh-border-focus`, `--bh-border-width-default`, `--bh-content-default`, `--bh-icon-stroke-200`, `--bh-icon-stroke-225`, `--bh-opacity-50`, `--bh-social-apple-bg`, `--bh-social-apple-border`, `--bh-social-apple-fg`, `--bh-social-apple-hover`, `--bh-social-apple-icon`, `--bh-social-apple-icon-border`, `--bh-social-apple-outline-icon`, `--bh-social-apple-width`, `--bh-social-apple-width-rtl`, `--bh-social-button-bg`, `--bh-social-button-bg-hover`, `--bh-social-button-border`, `--bh-social-button-current-border`, `--bh-social-button-fg`, `--bh-social-button-focus-border`, `--bh-social-button-gap`, `--bh-social-button-height`, `--bh-social-button-icon`, `--bh-social-button-icon-size`, `--bh-social-button-label-padding-inline-end`, `--bh-social-button-padding-x`, `--bh-social-button-padding-y`, `--bh-social-button-radius`, `--bh-social-button-width`, `--bh-social-button-width-rtl`, `--bh-social-facebook-bg`, `--bh-social-facebook-fg`, `--bh-social-facebook-hover`, `--bh-social-facebook-icon`, `--bh-social-facebook-outline-icon`, `--bh-social-facebook-width`, `--bh-social-facebook-width-rtl`, `--bh-social-google-bg`, `--bh-social-google-border`, `--bh-social-google-fg`, `--bh-social-google-hover`, `--bh-social-google-width`, `--bh-social-google-width-rtl`, `--bh-social-linkedin-bg`, `--bh-social-linkedin-fg`, `--bh-social-linkedin-hover`, `--bh-social-linkedin-icon`, `--bh-social-linkedin-outline-icon`, `--bh-social-linkedin-width`, `--bh-social-linkedin-width-rtl`, `--bh-social-twitter-bg`, `--bh-social-twitter-border`, `--bh-social-twitter-fg`, `--bh-social-twitter-hover`, `--bh-social-twitter-icon`, `--bh-social-twitter-icon-border`, `--bh-social-twitter-outline-icon`, `--bh-social-twitter-width`, `--bh-social-twitter-width-rtl`, `--bh-social-whatsapp-bg`, `--bh-social-whatsapp-fg`, `--bh-social-whatsapp-hover`, `--bh-social-whatsapp-icon`, `--bh-social-whatsapp-outline-icon`, `--bh-social-whatsapp-width`, `--bh-social-whatsapp-width-rtl`, `--bh-text-button-font-size`, `--bh-text-button-font-weight`, `--bh-text-button-letter-spacing`, `--bh-text-button-line-height`, `--elevation-component-default`, `--elevation-social-button`, `--elevation-social-button-focus` |
 | `variants` | `solid`, `outline` |
 <!-- registry-contract:end -->

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

@@ -0,0 +1,82 @@
+# Streaming Text
+
+`StreamingText` shows a response arriving token by token. A slim caret trails the text: solid while `streaming`, then a slow blink once the response is complete.
+
+The component renders only what it is given. When your transport streams tokens, pass the text so far and keep `streaming` on until the response ends. To reveal a finished response locally, run it through `useTypewriter`, which returns the revealed part and whether it is still typing.
+
+## API
+
+```tsx
+import { StreamingText, useTypewriter } from "@/components/ui/streaming-text"
+
+<StreamingText streaming={isStreaming} text={partial} />
+
+const typed = useTypewriter(response)
+<StreamingText streaming={typed.typing} text={typed.text} />
+```
+
+### StreamingText
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `text` | `string` | – | The text that has arrived so far. |
+| `streaming` | `boolean` | `false` | More text is on its way: the caret stays solid and the root sets `aria-busy`. |
+| `caret` | `boolean` | `true` | Shows the caret after the text. |
+| `as` | `"p" \| "div" \| "span"` | `"p"` | Rendered element. The ref is typed as `HTMLElement` for all three. |
+
+### useTypewriter
+
+`useTypewriter(text, options)` returns `{ text, typing }`: the revealed part of `text` and whether more is still to come.
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `speed` | `number` | `220` | Characters revealed per second. |
+| `onComplete` | `() => void` | – | Called once each time the reveal reaches the end of a text, including an empty one. |
+
+Text that grows continues from what is already revealed, and different text starts over; the returned text is always a prefix of the current one. To replay a reveal, remount the component that calls the hook, for example with a `key`.
+
+## Install
+
+```bash
+npx banhaten add streaming-text
+```
+
+## Examples
+
+Primary registry example: `examples/streaming-text-demo.tsx`.
+
+## Token Contract
+
+Prose uses the `body-sm-regular` scale in `--bh-content-default`. The caret is `--bh-streaming-text-caret-width` wide (aliasing `--bh-space-xxs-2`), one em tall, rounded with `--bh-radius-full`, offset by `--bh-space-xxs-2`, and blinks on `--bh-streaming-text-caret-duration`.
+
+Covered source files: `components/streaming-text.tsx` and `components/streaming-text.css`.
+
+## RTL Rules
+
+- Text inherits document direction.
+- The caret follows the text through a logical start margin, so it trails Arabic text at its end edge.
+
+## Accessibility
+
+The root exposes `aria-busy` while streaming and `data-state` for styling. The caret is decorative and hidden from assistive technology. Under `prefers-reduced-motion`, `useTypewriter` reveals the whole text at once and the caret does not blink.
+
+<!-- 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/streaming-text.tsx: StreamingText, useTypewriter` |
+| `parts` | `StreamingText` |
+| `registryDependencies` | None |
+| `props.text` | `string; default null; The text that has arrived so far.` |
+| `props.streaming` | `boolean; default "false"; True while more text is on its way; keeps the caret solid and sets aria-busy.` |
+| `props.caret` | `boolean; default "true"; Shows the caret after the visible text.` |
+| `props.as` | `"p" \| "div" \| "span"; default "p"; Rendered element; the ref is an HTMLElement for all three.` |
+| `props.speed` | `number; default "220"; useTypewriter option: characters revealed per second.` |
+| `features` | `caller-driven streaming`, `local typewriter reveal`, `reduced motion`, `RTL` |
+| `states` | `streaming`, `complete` |
+| `tokens` | `--bh-content-default`, `--bh-font-family`, `--bh-opacity-0`, `--bh-opacity-100`, `--bh-radius-full`, `--bh-space-xxs-2`, `--bh-streaming-text-caret-duration`, `--bh-streaming-text-caret-width`, `--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` |
+<!-- registry-contract:end -->

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

@@ -57,7 +57,10 @@ The table is composed from these parts:
 - `TableItem`: the content variant rendered inside a cell.
 - `DataTable`: composed workflow shell for search, filters, actions, pagination, and table states.
 - `DataTableSurface`: ARIA table surface for bespoke CSS-grid rows while keeping the table root owned by Banhaten.
-- `TableRoot`, `TableHeader`, `TableBody`, `TableRowElement`, `TableHead`, and `TableCell`: owned semantic elements for product-specific read-only tables that do not fit the data-column API.
+- `TableRoot`, `TableHeader`, `TableBody`, `TableRowElement`, `TableHead`, and `TableCell`: owned semantic elements for product-specific read-only tables that do not fit the data-column API. They are unstyled unless `TableRoot` has `size="comfortable"`.
+- `TableContainer`: the rounded, bordered frame for the owned elements.
+- `TableCellText`: line + subline content for an owned `TableCell`, with an optional caption and leading icon or avatar.
+- `TableCellLink`: a flush text action for a cell label that opens a record.
 
 Use semantic `<table>` markup when the table is mostly read-only data. Use an ARIA grid only when the product needs cell-level keyboard navigation. Interactive content inside cells, such as checkboxes, toggles, and actions, must remain real controls.
 
@@ -77,7 +80,7 @@ const exampleColumns = [
 ];
 ```
 
-RTL tables reverse the visual column order and align cell content to the end. The selection cell moves to the far right, and the action cell moves to the far left. The row data order should not change.
+RTL tables reverse the visual column order and align cell content to the end. The selection cell moves to the far right, and the action cell moves to the far left. The row data order should not change. An `avatarText` name and caption each resolve their own content direction, so an opposing script truncates at its actual end without changing the avatar layout.
 
 ## Sizing
 
@@ -86,9 +89,77 @@ RTL tables reverse the visual column order and align cell content to the end. Th
 | Header row | `sm` | `44px` | `44px` |
 | Body row | `sm` | `48px` | `44px` |
 | Body row | `lg` | `56px` | `56px` |
+| Header row | `comfortable` | `44px` | `44px` |
+| Body row | `comfortable` | `64px` | `64px` |
+
+`sm` rows use body-sm (14/20) text and `lg` rows use body-md (15/24), matching the `sm` and `lg` cells of `Table item 1.2`.
 
 Cell padding is `12px` on the inline axis. The fixed `44px` action column keeps `8px` inline padding around its `28px` action button. Inline content gap is `6px`; header label and sort icon gap is `4px`. The base checkbox and action columns use fixed dimensions so hover, selected, and icon states do not shift the table.
 
+### Comfortable size
+
+`size="comfortable"` follows the `Table item 1.2` spec used in product frames:
+
+- Header cells are `44px` tall with `8px` inline padding, body-sm medium (14/20) labels in `content/subtle`, on the `interactive/table/header` fill.
+- Body cells are `64px` tall with `8px` inline padding and body-md (15/24) text in `content/default`.
+- Rows have no dividers.
+- The frame has a `12px` radius.
+
+Items inside a comfortable table use the `lg` item sizes. Use `Badge size="lg"` for status badges in comfortable rows.
+
+The owned table elements take the same spec. Set `size="comfortable"` on `TableRoot` and wrap it in `TableContainer`, which draws the `12px` frame with a `1px` subtle border inside its edge and scrolls the table horizontally. Without a size, `TableRoot` and its cells stay unstyled.
+
+```tsx
+<TableContainer>
+  <TableRoot aria-label="Requisitions" size="comfortable">
+    <TableHeader>
+      <TableRowElement>
+        <TableHead>Request</TableHead>
+        <TableHead>Approval</TableHead>
+      </TableRowElement>
+    </TableHeader>
+    <TableBody>
+      <TableRowElement>
+        <TableCell>Senior Product Designer</TableCell>
+        <TableCell><Badge color="amber" size="lg">Your approval</Badge></TableCell>
+      </TableRowElement>
+    </TableBody>
+  </TableRoot>
+</TableContainer>
+```
+
+### Line + subline cells
+
+`Table item 1.2` gives its `lg` text cells an optional caption (`hasCaption`) under the label. This covers base leading, base regular, subtle, avatar + text, brand logo + text, payment and image cells.
+
+- The label keeps the row's text size: body-md (15/24) in `lg` and `comfortable` rows.
+- The caption is body-2xs (12/16) in `content/subtle`.
+- There is no gap between the two lines, so the pair fills `40px`. That leaves `8px` above and below in a `56px` `lg` row, and `12px` in a `64px` comfortable row.
+- A leading icon or avatar sits `6px` before the text, and the pair centres on it.
+- `sm` cells in Figma are single-line.
+
+In `Table`, set `caption` on a `text`, `avatarText`, `brandLogoText`, `payment` or `image` item. DataTable search also matches captions, while sorting uses the label.
+
+```ts
+{ id: "request", header: "Request", width: "fill", item: (row) => ({ type: "text", weight: "medium", value: row.title, caption: row.id }) }
+```
+
+With the owned elements, put `TableCellText` inside `TableCell`. Its children are the label. Set `weight="medium"` for a leading label and `tone="subtle"` for secondary text. When the label opens the record, make it a `TableCellLink`, not a link `Button`. A Button brings its control padding, which moves the label off the caption's start edge and adds space above the pair. `TableCellLink` keeps the cell's text style and colour and sits flush with the cell padding. It underlines on hover and focus and draws the focus ring 2px outside the text. It renders a button by default; with `asChild` it styles an anchor or router link.
+
+```tsx
+<TableCell>
+  <TableCellText caption="REQ-1042 · Product">
+    <TableCellLink onClick={() => openRequest("1042")}>Senior Product Designer</TableCellLink>
+  </TableCellText>
+</TableCell>
+
+<TableCellText caption="REQ-1038 · Platform">
+  <TableCellLink asChild>
+    <a href="#/requisitions/1038">Frontend Engineer</a>
+  </TableCellLink>
+</TableCellText>
+```
+
 ## States
 
 | State | Treatment |
@@ -98,7 +169,7 @@ Cell padding is `12px` on the inline axis. The fixed `44px` action column keeps
 | `selected` | Selected row background and checked selection control. |
 | `disabled` | Disabled content color and no row actions. |
 
-The selected checkbox uses the brand or checkbox fill and a white check icon. Header checkbox supports checked, unchecked, and indeterminate states.
+The selected checkbox uses the brand or checkbox fill and a mode-aware contrasting check icon. Header checkbox supports checked, unchecked, and indeterminate states.
 
 ## Token Mapping
 
@@ -151,6 +222,8 @@ type TableSortState = { columnId: string; direction: "asc" | "desc" } | null;
 
 Use `item` for standard content variants and `renderCell` only for custom product-specific cells. Custom cells still render inside `TableCell`, so spacing, alignment, row height, truncation, RTL behavior, and disabled state stay consistent.
 
+Cell content resolves in this order: `renderCell`, `item`, then an own row field whose key matches the column `id`. The implicit row-field fallback applies only to ordinary data columns and renders string or number values—including `0`—through the standard text item. Use `item` or `renderCell` for formatted values, booleans, dates, objects, and custom nodes. Selection and action columns never read an implicit row value; return `null` from `renderCell` when a deliberately blank data cell is required.
+
 Use `sortValue` when the visible cell content should sort by an underlying value, such as dates, percentages, status rank, or formatted numbers. Use `searchValue` when the cell should contribute searchable text that is different from the visible content.
 
 ## Table Items
@@ -160,10 +233,10 @@ The item catalog in Figma supports these cell content variants. Code may normali
 | Figma item type | Use for | Notes |
 | --- | --- | --- |
 | `checkbox` | Row selection | Fixed selection column. |
-| `baseLeading` | Primary label | Medium body label. |
-| `baseRegular` | Standard body text | Regular body label. |
-| `subtle` | Secondary text | Uses subtle content color. |
-| `avatarText` | Person, owner, assignee | Avatar plus label; `lg` may include caption. |
+| `baseLeading` | Primary label | Medium body label; `lg` may include caption. |
+| `baseRegular` | Standard body text | Regular body label; `lg` may include caption. |
+| `subtle` | Secondary text | Uses subtle content color; `lg` may include caption. |
+| `avatarText` | Person, owner, assignee | Avatar plus medium label; `lg` may include caption. Name and caption resolve direction independently. |
 | `rating` | Star rating | Five 20px stars with full, half, and empty states. |
 | `progress` | Percent completion | 8px track, percent label, mirrored fill in RTL. |
 | `toggle` | Binary row setting | 32px switch in `sm`; preserve native button semantics. |
@@ -172,16 +245,16 @@ The item catalog in Figma supports these cell content variants. Code may normali
 | `avatarStack` | Team or group membership | Overlapped 20px avatars, optional count and add button. |
 | `tags` | Neutral labels | Bordered tags with compact 24px height. |
 | `file` | Attachment indicator | Icon-only file cell. |
-| `brandLogoText` | Brand or account identity | Logo plus label. |
-| `payment` | Payment method | Payment icon plus optional label. |
-| `image` | Thumbnail item | Image thumbnail plus label. |
+| `brandLogoText` | Brand or account identity | Logo plus medium label; `lg` may include caption. |
+| `payment` | Payment method | Payment icon plus optional medium label; `lg` may include caption. |
+| `image` | Thumbnail item | Image thumbnail plus medium label; `lg` may include caption. |
 | `action` | Single row menu | Icon button, usually overflow menu. |
 | `actionGroup` | Multiple row actions | View, edit, delete group; reverse order in RTL. |
 
 ```ts
 type TableItem =
   | { type: "checkbox"; checked: boolean; indeterminate?: boolean }
-  | { type: "text"; tone?: "default" | "subtle"; weight?: "regular" | "medium"; value: string }
+  | { type: "text"; tone?: "default" | "subtle"; weight?: "regular" | "medium"; value: string; caption?: string }
   | { type: "avatarText"; name: string; caption?: string; src?: string; status?: "top" | "bottom" }
   | { type: "rating"; value: number; max?: 5 }
   | { type: "progress"; value: number; label?: string; tone?: "success" | "brand" }
@@ -191,9 +264,9 @@ type TableItem =
   | { type: "avatarStack"; avatars: AvatarItem[]; count?: number; canAdd?: boolean }
   | { type: "tags"; items: string[]; maxVisible?: number }
   | { type: "file"; label?: string }
-  | { type: "brandLogoText"; label: string; logoSrc?: string }
-  | { type: "payment"; brand: "maestro" | "mastercard" | "visa" | string; label?: string }
-  | { type: "image"; label: string; src: string }
+  | { type: "brandLogoText"; label: string; caption?: string; logoSrc?: string }
+  | { type: "payment"; brand: "maestro" | "mastercard" | "visa" | string; label?: string; caption?: string }
+  | { type: "image"; label: string; caption?: string; src: string }
   | { type: "action"; label: string; icon: "more"; onAction: () => void }
   | { type: "actionGroup"; actions: TableAction[] };
 
@@ -337,7 +410,9 @@ const filters = [
 />
 ```
 
-`DataTable` applies active filter predicates, searches row text from `getRowSearchText`, column `searchValue`, or table item text, sorts by column `sortValue` or table item value, and paginates the resulting rows. Set `pagination={false}` for unpaginated datasets.
+`DataTable` applies active filter predicates, searches row text from `getRowSearchText`, column `searchValue`, or table item text, sorts by column `sortValue` or table item value, and paginates the resulting rows. Set `pagination={false}` for unpaginated datasets. When `pagination.showCaption` is enabled, the Pagination caption receives the same measured visible range and total as the DataTable footer summary; the standalone Pagination demo default is never used for table data.
+
+Direction does not choose language. Pass `pagination.messages` to localize Pagination controls and accessible names, and pass `labels.resultsSummary` to format the measured DataTable range and total. An explicit `pagination.ariaLabel` overrides the message catalog's navigation label.
 
 ## Accessibility
 
@@ -391,7 +466,7 @@ npx banhaten add table
 
 ## API
 
-Supported runtime exports: `DataTable`, `Table`, `DataTableSurface`, `TableBody`, `TableCell`, `TableHead`, `TableHeader`, `TableRoot`, `TableRowElement`.
+Supported runtime exports: `DataTable`, `Table`, `DataTableSurface`, `TableBody`, `TableCell`, `TableCellLink`, `TableCellText`, `TableContainer`, `TableHead`, `TableHeader`, `TableRoot`, `TableRowElement`.
 
 Use the live registry docs for the generated API table and source-backed examples.
 
@@ -409,7 +484,7 @@ Covered source files: `components/expanded/table.css`, `components/expanded/Tabl
 
 ## RTL Rules
 
-This component has no special RTL contract beyond inherited document direction and logical spacing.
+The table layout inherits document direction and uses logical spacing. Within `avatarText`, the independently truncated name and caption use `dir="auto"`; this preserves the identifying start of Latin content in an RTL table (and Arabic content in an LTR table) while the avatar and columns continue to mirror with the table.
 
 <!-- registry-contract:start -->
 ## Registry Contract
@@ -419,11 +494,18 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 
 | Field | Values |
 | --- | --- |
-| `supportedExports` | `components/expanded/Table.tsx: DataTable, Table`, `components/table-elements.tsx: DataTableSurface, TableBody, TableCell, TableHead, TableHeader, TableRoot, TableRowElement` |
-| `parts` | `Table`, `DataTable`, `DataTableSurface`, `TableRoot`, `TableHeader`, `TableBody`, `TableRowElement`, `TableHead`, `TableCell` |
+| `supportedExports` | `components/expanded/Table.tsx: DataTable, Table`, `components/table-elements.tsx: DataTableSurface, TableBody, TableCell, TableCellLink, TableCellText, TableContainer, TableHead, TableHeader, TableRoot, TableRowElement` |
+| `parts` | `Table`, `DataTable`, `DataTableSurface`, `TableContainer`, `TableRoot`, `TableHeader`, `TableBody`, `TableRowElement`, `TableHead`, `TableCell`, `TableCellText`, `TableCellLink` |
 | `registryDependencies` | `avatar`, `badge`, `button`, `checkbox`, `pagination`, `progress`, `spinner`, `tag`, `toggle`, `toolbar` |
+| `props.Table.size` | `"sm" \| "lg" \| "comfortable"; default "sm"; sm and lg are 48px and 56px rows; sm uses body-sm text and lg uses body-md, as in the Table item 1.2 sm and lg cells. comfortable follows Table item 1.2: 44px headers in body-sm medium on the table-header fill, 64px rows with 8px cells and body-md text, no row rules, and a 12px radius.` |
+| `props.TableItem.caption` | `string; default null; Second line under the label on text, avatarText, brandLogoText, payment and image items (Table item 1.2 hasCaption): body-2xs in content/subtle with no gap. Use it in lg or comfortable rows; the two lines fill 40px of a 56px row. Search matches captions; sorting uses the label.` |
+| `props.TableRoot.size` | `"comfortable"; default null; Applies the comfortable spec to TableHead and TableCell. Without a size the owned elements stay unstyled.` |
+| `props.TableContainer` | `div; default null; Frame for the owned elements: 12px radius, default background, and a 1px subtle border drawn inside the edge. The table scrolls horizontally inside it.` |
+| `props.TableCellText` | `span; default null; Text content for an owned TableCell: children are the label, caption adds the second line, leading adds an icon or avatar 6px before the text, and tone (default \| subtle) and weight (regular \| medium) set the label. The label keeps the cell text size; use TableCellLink when it opens a record.` |
+| `props.TableCellLink` | `button; default null; A cell label that opens a record: it keeps the cell text style and colour, sits flush with the cell padding, underlines on hover and focus, and shows the focus ring 2px outside the text. Renders a button, or its child (such as an anchor) with asChild. Use it as the TableCellText label instead of a padded Button.` |
+| `features` | `measured DataTable pagination captions`, `explicit DataTable pagination message catalogs`, `safe row-key cell fallback`, `comfortable size with 44px headers, 64px rows, 8px cells, body-md text, and no row rules`, `TableContainer frame with a 12px radius and an inside border`, `comfortable size on the owned table elements through TableRoot size`, `line + subline cells: an optional caption under text, avatarText, brandLogoText, payment and image items, and TableCellText for the owned elements`, `TableCellLink for flush record links in owned cells` |
 | `modes` | `table`, `data-table` |
-| `sizes` | `sm`, `lg` |
+| `sizes` | `sm`, `lg`, `comfortable` |
 | `states` | `default`, `selected`, `disabled`, `loading`, `empty`, `error` |
-| `tokens` | `--bh-avatar-fallback-font-size-md`, `--bh-avatar-fallback-font-size-xs`, `--bh-avatar-size-md`, `--bh-avatar-size-xs`, `--bh-bg-accent-amber-subtle`, `--bh-bg-accent-fuchsia-subtle`, `--bh-bg-accent-golden-default`, `--bh-bg-brand-default`, `--bh-bg-brand-soft`, `--bh-bg-danger-subtle`, `--bh-bg-default`, `--bh-bg-muted`, `--bh-bg-neutral-medium`, `--bh-bg-neutral-soft`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-bg-success-default`, `--bh-bg-success-subtle`, `--bh-bg-warning-default`, `--bh-bg-warning-subtle`, `--bh-border-brand-strong`, `--bh-border-default`, `--bh-border-focus`, `--bh-border-subtle`, `--bh-content-accent-amber-strong`, `--bh-content-accent-fuchsia-strong`, `--bh-content-brand-default`, `--bh-content-danger-strong`, `--bh-content-default`, `--bh-content-muted`, `--bh-content-on-brand`, `--bh-content-subtle`, `--bh-content-success-default`, `--bh-content-warning-strong`, `--bh-control-default`, `--bh-duration-fast`, `--bh-easing-standard`, `--bh-focus-ring-width`, `--bh-font-family`, `--bh-font-weight-semibold`, `--bh-icon-size-default`, `--bh-icon-slot-size-default`, `--bh-icon-stroke-190`, `--bh-icon-stroke-225`, `--bh-input-width`, `--bh-interactive-ghost-hover`, `--bh-opacity-0`, `--bh-opacity-100`, `--bh-opacity-muted`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-radius-md-6`, `--bh-radius-sm-4`, `--bh-space-12xl-128`, `--bh-space-16xl-256`, `--bh-space-19xl-384`, `--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-8xl-48`, `--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-table-min-width`, `--bh-table-selection-column-min-width`, `--bh-text-base-letter-spacing`, `--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-lg-semibold-font-size`, `--bh-text-body-lg-semibold-font-weight`, `--bh-text-body-lg-semibold-line-height`, `--bh-text-body-md-semibold-font-size`, `--bh-text-body-md-semibold-font-weight`, `--bh-text-body-md-semibold-line-height`, `--bh-text-body-sm-medium-font-weight`, `--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-regular-font-size`, `--shadow-component-focus-ring` |
+| `tokens` | `--bh-avatar-fallback-font-size-md`, `--bh-avatar-fallback-font-size-xs`, `--bh-avatar-size-md`, `--bh-avatar-size-xs`, `--bh-bg-accent-amber-subtle`, `--bh-bg-accent-fuchsia-subtle`, `--bh-bg-accent-golden-default`, `--bh-bg-brand-default`, `--bh-bg-brand-soft`, `--bh-bg-danger-subtle`, `--bh-bg-default`, `--bh-bg-muted`, `--bh-bg-neutral-medium`, `--bh-bg-neutral-soft`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-bg-success-default`, `--bh-bg-success-subtle`, `--bh-bg-warning-default`, `--bh-bg-warning-subtle`, `--bh-border-brand-strong`, `--bh-border-default`, `--bh-border-focus`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-accent-amber-strong`, `--bh-content-accent-fuchsia-strong`, `--bh-content-brand-default`, `--bh-content-danger-strong`, `--bh-content-default`, `--bh-content-muted`, `--bh-content-on-brand`, `--bh-content-subtle`, `--bh-content-success-default`, `--bh-content-warning-strong`, `--bh-control-default`, `--bh-duration-fast`, `--bh-easing-standard`, `--bh-focus-ring-width`, `--bh-font-family`, `--bh-font-weight-medium`, `--bh-font-weight-regular`, `--bh-font-weight-semibold`, `--bh-icon-size-default`, `--bh-icon-slot-size-default`, `--bh-icon-stroke-190`, `--bh-icon-stroke-225`, `--bh-input-width`, `--bh-interactive-ghost-hover`, `--bh-opacity-0`, `--bh-opacity-100`, `--bh-opacity-muted`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-radius-md-6`, `--bh-radius-sm-4`, `--bh-space-12xl-128`, `--bh-space-16xl-256`, `--bh-space-19xl-384`, `--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-8xl-48`, `--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-table-caption-content`, `--bh-table-cell-text-gap`, `--bh-table-comfortable-cell-content`, `--bh-table-comfortable-cell-padding-x`, `--bh-table-comfortable-header-bg`, `--bh-table-comfortable-header-content`, `--bh-table-comfortable-header-height`, `--bh-table-comfortable-min-width`, `--bh-table-comfortable-radius`, `--bh-table-comfortable-row-height`, `--bh-table-container-bg`, `--bh-table-container-border`, `--bh-table-container-radius`, `--bh-table-min-width`, `--bh-table-selection-column-min-width`, `--bh-text-base-letter-spacing`, `--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-regular-font-size`, `--bh-text-body-3xs-regular-line-height`, `--bh-text-body-lg-semibold-font-size`, `--bh-text-body-lg-semibold-font-weight`, `--bh-text-body-lg-semibold-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-md-semibold-font-size`, `--bh-text-body-md-semibold-font-weight`, `--bh-text-body-md-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-line-height`, `--bh-text-body-xs-regular-font-size`, `--elevation-component-focus-ring` |
 <!-- registry-contract:end -->

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

@@ -15,18 +15,37 @@ Tabs is a Radix-backed local navigation primitive with underline, segmented, and
 | Prop | Values |
 | --- | --- |
 | `variant` | `underline`, `segment`, `rounded` |
-| `size` | `md`, `sm`, `xs` |
-| `fullWidth` | `boolean` |
+| `size` | `md`, `sm`, `xs`, `comfortable` |
+| `fullWidth` | `boolean`; default `false`. Equal shares while labels fit; content-safe scrolling under pressure. |
 | `activeIndex`, `defaultActiveIndex` | controlled or uncontrolled index |
 | `onActiveIndexChange` | selected-index callback |
 
+### Comfortable size
+
+`size="comfortable"` is the view navigation in an app page: the `View navigation` row in the ATS360 product frames.
+
+- Underline tabs are `48px` tall with a `36px` content row and `2px` label padding.
+- Tabs sit `8px` apart, with no divider under the row.
+- The active tab's `2px` brand indicator is an inset shadow, so the label stays centred in the full tab height.
+- Active labels are body-md medium in `content/default`; the others are body-md regular in `content/subtle`.
+
+The library `Tabs` frame keeps `16px` gaps and a `1px` divider; the other sizes still follow it. Segment and rounded tabs render `comfortable` like `md`.
+
+```tsx
+<Tabs ariaLabel="Requisition views" items={["All requests", "Needs my approval", "Drafts"]} size="comfortable" />
+```
+
 ## Token Contract
 
 Tabs uses Banhaten tab CSS variables for sizes, spacing, border, radius, active indicators, surfaces, and content states.
 
 ## RTL
 
-Tabs accepts `dir="rtl"` and mirrors layout through inherited direction. Labels should remain short enough for each treatment and viewport.
+Tabs accepts `dir="rtl"` and mirrors layout through inherited direction. Trigger labels stay complete in both directions: content-hug tabs keep their intrinsic width, while full-width tabs keep equal shares until a label's intrinsic width requires horizontal overflow.
+
+## Overflow
+
+Tab labels stay on one line and are never painted outside their trigger. When all triggers cannot fit, the tab list owns horizontal scrolling. `fullWidth` changes how spare inline space is distributed; it does not enable truncation or unsafe shrinking.
 
 ## Accessibility
 
@@ -62,8 +81,8 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `supportedExports` | `components/tabs.tsx: Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger` |
 | `parts` | `Tabs`, `TabsRoot`, `TabsList`, `TabsTrigger`, `TabsContent` |
 | `registryDependencies` | None |
-| `features` | `Radix keyboard behavior`, `controlled active index`, `controlled value`, `optional panels`, `full-width tabs` |
-| `sizes` | `md`, `sm`, `xs` |
-| `tokens` | `--bh-bg-default`, `--bh-bg-neutral-subtle`, `--bh-border-default`, `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-subtle`, `--bh-font-family`, `--bh-font-weight-medium`, `--bh-opacity-60`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-radius-md-6`, `--bh-space-3xl-16`, `--bh-space-6xl-32`, `--bh-space-7xl-40`, `--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-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`, `--shadow-button-soft` |
+| `features` | `Radix keyboard behavior`, `controlled active index`, `controlled value`, `optional panels`, `content-hug tabs`, `content-safe full-width tabs`, `horizontal overflow without label overlap`, `comfortable view-navigation size: 48px underline tabs 8px apart, inset indicator, no divider` |
+| `sizes` | `md`, `sm`, `xs`, `comfortable` |
+| `tokens` | `--bh-bg-default`, `--bh-bg-neutral-subtle`, `--bh-border-default`, `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-subtle`, `--bh-font-family`, `--bh-font-weight-medium`, `--bh-opacity-60`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-radius-md-6`, `--bh-space-3xl-16`, `--bh-space-6xl-32`, `--bh-space-7xl-40`, `--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-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`, `--elevation-button-soft` |
 | `variants` | `underline`, `segment`, `rounded` |
 <!-- registry-contract:end -->

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

@@ -90,6 +90,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `registryDependencies` | None |
 | `sizes` | `xs`, `md`, `lg` |
 | `states` | `default`, `active`, `disabled` |
-| `tokens` | `--bh-bg-accent-green-default`, `--bh-bg-always-dark`, `--bh-bg-always-white`, `--bh-bg-brand-subtle`, `--bh-bg-danger-default`, `--bh-bg-neutral-bold`, `--bh-bg-neutral-subtle`, `--bh-border-brand-strong`, `--bh-border-default`, `--bh-border-disabled`, `--bh-border-focus`, `--bh-border-subtle`, `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-on-neutral`, `--bh-control-default`, `--bh-control-md`, `--bh-icon-size-default`, `--bh-icon-slot-size-default`, `--bh-icon-stroke-200`, `--bh-icon-stroke-225`, `--bh-interactive-ghost-hover`, `--bh-interactive-secondary-default`, `--bh-interactive-secondary-disabled`, `--bh-interactive-secondary-hover`, `--bh-opacity-30`, `--bh-radius-full`, `--bh-radius-xs-2`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-none`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-tag-active-border-width`, `--bh-tag-focus-ring-inset`, `--bh-tag-focus-ring-width`, `--bh-text-body-3xs-semibold-font-size`, `--bh-text-body-3xs-semibold-font-weight`, `--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-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-z-raised`, `--shadow-button-focus` |
+| `tokens` | `--bh-bg-accent-green-default`, `--bh-bg-always-dark`, `--bh-bg-always-white`, `--bh-bg-brand-subtle`, `--bh-bg-danger-default`, `--bh-bg-neutral-bold`, `--bh-bg-neutral-subtle`, `--bh-border-brand-strong`, `--bh-border-default`, `--bh-border-disabled`, `--bh-border-focus`, `--bh-border-subtle`, `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-on-neutral`, `--bh-control-default`, `--bh-control-md`, `--bh-icon-size-default`, `--bh-icon-slot-size-default`, `--bh-icon-stroke-200`, `--bh-icon-stroke-225`, `--bh-interactive-ghost-hover`, `--bh-interactive-secondary-default`, `--bh-interactive-secondary-disabled`, `--bh-interactive-secondary-hover`, `--bh-opacity-30`, `--bh-radius-full`, `--bh-radius-xs-2`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-none`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-tag-active-border-width`, `--bh-tag-focus-ring-inset`, `--bh-tag-focus-ring-width`, `--bh-text-body-3xs-semibold-font-size`, `--bh-text-body-3xs-semibold-font-weight`, `--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-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-z-raised`, `--elevation-button-focus` |
 | `types` | `simple`, `dot`, `flag`, `avatar`, `icon` |
 <!-- registry-contract:end -->

package/docs/design-system/components/task-list.md

@@ -0,0 +1,95 @@
+# Task List
+
+`TaskList` is an agent progress tracker. Rows move from a dashed pending circle to an arrow while active (with a shimmering label) to a check when done. The header icon crossfades from a list to a determinate pie to a filled check, and the counter rolls its digits as work completes through [Rolling Count](./rolling-count.md).
+
+For any other list, compose the parts instead of configuring the tracker: `TaskListRoot` draws the surface, `TaskListHeader` is a static header, `TaskListItems` renders rows, and `TaskListPreview` shows the first rows and folds the rest. [Approval Card](./approval-card.md) builds its plan this way.
+
+## API
+
+```tsx
+import {
+  TaskList,
+  TaskListHeader,
+  TaskListPreview,
+  TaskListRoot,
+  type TaskListItem,
+} from "@/components/ui/task-list"
+
+const items: TaskListItem[] = [
+  { id: "1", label: "Scaffold the project structure", status: "done" },
+  { id: "2", label: "Build the component registry", status: "active" },
+  { id: "3", label: "Wire up checkout", status: "pending" },
+]
+
+<TaskList items={items} />
+
+<TaskListRoot surface="well">
+  <TaskListHeader count={items.length}>To-dos</TaskListHeader>
+  <TaskListPreview items={items} visibleCount={2} />
+</TaskListRoot>
+```
+
+### TaskList
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `readonly TaskListItem[]` | – | Rows with `id`, `label`, and `pending`, `active`, or `done` status. |
+| `title` | `React.ReactNode` | `"To-dos"` | Header label. |
+| `surface` | `"card" \| "well" \| "plain"` | `"card"` | Raised card, subtle well for embedding, or no surface. |
+| `open` / `defaultOpen` / `onOpenChange` | `boolean` | `true` | Fold state. |
+| `labels` | `Partial<TaskListLabels>` | English | `count(done, total)` copy, which the toggle reads after its title. |
+
+### Parts
+
+| Part | Props | Description |
+| --- | --- | --- |
+| `TaskListRoot` | `surface` | Surface of a composed list. A header inside it names the rows. |
+| `TaskListHeader` | `children`, `count`, `items` | Static header. `items` drives the icon from list to progress pie to check; `count` renders at the end. |
+| `TaskListItems` | `items` | Rows. They start flush when no header sits above them. |
+| `TaskListPreview` | `items`, `visibleCount` (`3`), `labels` | The first rows, then a Collapsible fold for the rest with `more(count)` and `less` copy. |
+
+## Install
+
+```bash
+npx banhaten add task-list
+```
+
+## Examples
+
+Primary registry example: `examples/task-list-demo.tsx`.
+
+## Token Contract
+
+Surfaces use `--bh-bg-raised` with `--elevation-02` and `--bh-radius-2xl-12` (card) or `--bh-bg-subtle` with `--bh-radius-lg-8` (well). Rows use the `body-xs` scale, `--bh-task-list-icon-size` icons, `--bh-content-subtle` for muted rows, `--bh-content-default` for the active row, and `--bh-content-success-default` for the finished check. Motion uses the `--bh-duration-*` foundation tokens, rows enter `--bh-task-list-stagger` apart, and the active row uses the shared shimmer.
+
+Covered source files: `components/task-list.tsx`, `components/task-list.css`, and the `collapsible`, `rolling-count`, and `shimmer-text` registry dependencies.
+
+## RTL Rules
+
+- Rows, counters, and the collapse chevron use logical placement.
+- The active arrow icon mirrors horizontally in RTL; the check and dashed circle are symmetric.
+
+## Accessibility
+
+The collapsible header and the "more" control are Collapsible triggers with `aria-expanded` and `aria-controls`, named by what they show: the header by its title and progress, for example "To-dos 2 of 5 done". Folded rows unmount after their closing animation, so nothing hidden can be focused. Rows are labelled by the header title of their list, including a `TaskListHeader` composed inside `TaskListRoot`. Status changes are expressed through icons plus strikethrough, never color alone, and the counter carries an accessible "done of total" summary. Rolling digits, crossfades, and shimmer 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/task-list.tsx: TaskList, TaskListHeader, TaskListItems, TaskListPreview, TaskListRoot` |
+| `parts` | `TaskList`, `TaskListRoot`, `TaskListHeader`, `TaskListItems`, `TaskListPreview` |
+| `registryDependencies` | `collapsible`, `rolling-count`, `shimmer-text` |
+| `props.items` | `readonly TaskListItem[]; default null; Rows with id, label, and pending, active, or done status.` |
+| `props.surface` | `"card" \| "well" \| "plain"; default "card"; Raised card, subtle well for embedding, or no surface.` |
+| `props.labels` | `Partial<TaskListLabels>; default "English"; Localized counter copy, read after the title in the toggle's name.` |
+| `props.visibleCount` | `number; default "3"; TaskListPreview: rows shown before the rest fold behind a more control.` |
+| `features` | `controlled state`, `uncontrolled state`, `composable parts`, `preview fold`, `reduced motion`, `RTL` |
+| `states` | `pending`, `active`, `done` |
+| `tokens` | `--bh-bg-raised`, `--bh-bg-subtle`, `--bh-content-default`, `--bh-content-subtle`, `--bh-content-success-default`, `--bh-duration-default`, `--bh-duration-fast`, `--bh-duration-moderate`, `--bh-duration-slow`, `--bh-easing-standard`, `--bh-font-family`, `--bh-icon-stroke-180`, `--bh-icon-stroke-200`, `--bh-opacity-0`, `--bh-opacity-100`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-radius-sm-4`, `--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-space-xxxs-1`, `--bh-task-list-icon-size`, `--bh-task-list-stagger`, `--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` |
+| `variants` | `card`, `well`, `plain` |
+<!-- registry-contract:end -->

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

@@ -60,5 +60,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `registryDependencies` | None |
 | `modes` | `default`, `tags` |
 | `states` | `placeholder`, `filled`, `disabled` |
-| `tokens` | `--bh-bg-accent-blue-soft`, `--bh-border-danger-strong`, `--bh-border-default`, `--bh-border-disabled`, `--bh-border-focus`, `--bh-border-input`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-accent-blue-strong`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-control-md`, `--bh-font-weight-semibold`, `--bh-icon-stroke-225`, `--bh-icon-stroke-250`, `--bh-interactive-input-default`, `--bh-interactive-input-disabled`, `--bh-interactive-secondary-default`, `--bh-interactive-secondary-disabled`, `--bh-opacity-0`, `--bh-opacity-30`, `--bh-opacity-50`, `--bh-radius-full`, `--bh-space-xs-4`, `--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-textarea-border`, `--bh-textarea-close-button-size`, `--bh-textarea-close-icon-size`, `--bh-textarea-focus-ring-inset`, `--bh-textarea-focus-ring-width`, `--bh-textarea-gap`, `--bh-textarea-helper-icon-size`, `--bh-textarea-icon-size`, `--bh-textarea-inline-gap`, `--bh-textarea-min-height`, `--bh-textarea-padding`, `--bh-textarea-radius`, `--bh-textarea-tag-avatar-font-size`, `--bh-textarea-tag-avatar-size`, `--bh-textarea-tag-height`, `--bh-textarea-width`, `--shadow-component-default`, `--shadow-textarea` |
+| `tokens` | `--bh-bg-accent-blue-soft`, `--bh-border-danger-strong`, `--bh-border-default`, `--bh-border-disabled`, `--bh-border-focus`, `--bh-border-input`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-accent-blue-strong`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-control-md`, `--bh-font-weight-semibold`, `--bh-icon-stroke-225`, `--bh-icon-stroke-250`, `--bh-interactive-input-default`, `--bh-interactive-input-disabled`, `--bh-interactive-secondary-default`, `--bh-interactive-secondary-disabled`, `--bh-opacity-0`, `--bh-opacity-30`, `--bh-opacity-50`, `--bh-radius-full`, `--bh-space-xs-4`, `--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-textarea-border`, `--bh-textarea-close-button-size`, `--bh-textarea-close-icon-size`, `--bh-textarea-focus-ring-inset`, `--bh-textarea-focus-ring-width`, `--bh-textarea-gap`, `--bh-textarea-helper-icon-size`, `--bh-textarea-icon-size`, `--bh-textarea-inline-gap`, `--bh-textarea-min-height`, `--bh-textarea-padding`, `--bh-textarea-radius`, `--bh-textarea-tag-avatar-font-size`, `--bh-textarea-tag-avatar-size`, `--bh-textarea-tag-height`, `--bh-textarea-width`, `--elevation-component-default`, `--elevation-textarea` |
 <!-- registry-contract:end -->