banhaten 0.2.0 → 0.3.0

package/docs/design-system/gap-promotion-report.md

@@ -2,7 +2,7 @@
 
 This file is generated from background scenario gap metadata. A candidate appears when the same normalized need occurs in at least three distinct backgrounds. Heuristics cover common shells, navigation, tables, steps, composers, timelines, assets, and elevation; use `promotionKey` on a gap when an explicit cross-background grouping is more accurate.
 
-Scanned 194 gaps across 36 backgrounds. Found 8 promotion candidates at the 3-background threshold.
+Scanned 100 gaps across 38 backgrounds. Found 4 promotion candidates at the 3-background threshold.
 
 ## Application/workspace shell
 
@@ -58,46 +58,6 @@ Backgrounds: `ai-growth-marketing`, `ai-node-detail`, `bauhow-room-planning`, `c
 | `shipment-list` | carrier brand mark (`shipment-carrier-brand-mark`) | icon asset | approximation |
 | `sku-management` | product and assistant icon set (`sku-product-icons`) | icon asset | approximation |
 
-## Sidebar navigation
-
-Key: `sidebar-navigation` · 11 backgrounds
-
-Backgrounds: `acme-finance-advisor`, `ai-growth-marketing`, `audit-log`, `bauhow-room-planning`, `data-source-browser`, `debt-payoff`, `marcohr-people`, `people-add-member`, `shipment-list`, `sku-management`, `stripe-demo-account`
-
-| Background | Gap | Kind | Status |
-| --- | --- | --- | --- |
-| `acme-finance-advisor` | compact app sidebar navigation (`acme-sidebar-navigation`) | component | missing |
-| `ai-growth-marketing` | report sidebar navigation (`report-sidebar-navigation`) | component | missing |
-| `audit-log` | audit sidebar navigation (`audit-sidebar-navigation`) | component | missing |
-| `bauhow-room-planning` | planning sidebar navigation (`room-planning-sidebar-navigation`) | component | missing |
-| `data-source-browser` | sidebar navigation with pinned list (`sidebar-navigation-with-pinned-list`) | component | missing |
-| `debt-payoff` | planning sidebar navigation (`planning-sidebar-navigation`) | component | missing |
-| `marcohr-people` | HR sidebar navigation (`marcohr-sidebar-navigation`) | component | missing |
-| `people-add-member` | HR sidebar navigation (`people-sidebar-navigation`) | component | missing |
-| `shipment-list` | shipment sidebar navigation (`shipment-sidebar-navigation`) | component | missing |
-| `sku-management` | cropped app sidebar navigation (`sku-sidebar-navigation`) | component | missing |
-| `stripe-demo-account` | payments sidebar navigation (`payments-sidebar-navigation`) | component | missing |
-
-## Data table pattern
-
-Key: `data-table-pattern` · 10 backgrounds
-
-Backgrounds: `audit-log`, `debt-payoff`, `inference-providers`, `marcohr-people`, `people-add-member`, `recent-orders`, `school-assignments`, `share-of-voice`, `sku-management`, `stripe-demo-account`
-
-| Background | Gap | Kind | Status |
-| --- | --- | --- | --- |
-| `audit-log` | audit activity table (`audit-activity-table`) | component | missing |
-| `debt-payoff` | debt table and pagination (`debt-table-and-pagination`) | component | approximation |
-| `inference-providers` | expandable provider configuration table (`expandable-provider-table`) | component | missing |
-| `marcohr-people` | employee policy table (`marcohr-employee-table`) | component | approximation |
-| `people-add-member` | people table with status rows (`people-table-and-status-rows`) | component | approximation |
-| `recent-orders` | orders table controls and rows (`orders-table-region`) | component | approximation |
-| `school-assignments` | assignments table (`assignments-table`) | component | missing |
-| `share-of-voice` | analytics table density (`share-of-voice-analytics-table`) | component | approximation |
-| `sku-management` | SKU data table and pagination (`sku-data-table`) | component | approximation |
-| `stripe-demo-account` | metric table cards (`metric-table-cards`) | component | approximation |
-| `stripe-demo-account` | sales tabs and table (`sales-tabs-and-table`) | component | approximation |
-
 ## Elevation/blur semantic effects
 
 Key: `elevation-effects` · 10 backgrounds
@@ -135,32 +95,6 @@ Backgrounds: `delivery-tracking`, `investor-profile`, `mcp-settings`, `profile-m
 | `school-assignments` | teacher avatar (`teacher-avatar`) | image asset | missing |
 | `stripe-demo-account` | Stripe mark and account avatar (`stripe-brand-and-avatar-assets`) | image asset | approximation |
 
-## Progress/step indicator
-
-Key: `progress-step-indicator` · 5 backgrounds
-
-Backgrounds: `accounting-workspace-setup`, `benefits-enrollment`, `mcp-settings`, `quran-audio-add-employee`, `refund-simulation`
-
-| Background | Gap | Kind | Status |
-| --- | --- | --- | --- |
-| `accounting-workspace-setup` | step progress indicator (`setup-progress-indicator`) | component | approximation |
-| `benefits-enrollment` | enrollment progress header (`enrollment-progress-header`) | component | missing |
-| `mcp-settings` | numbered setup steps (`numbered-setup-steps`) | component | missing |
-| `quran-audio-add-employee` | three-step employee progress indicator (`quran-audio-progress-stepper`) | component | approximation |
-| `refund-simulation` | refund progress timeline (`refund-progress-timeline`) | component | missing |
-
-## Composer pattern
-
-Key: `composer-pattern` · 3 backgrounds
-
-Backgrounds: `acme-finance-advisor`, `email-compose`, `order-shipment-timeline`
-
-| Background | Gap | Kind | Status |
-| --- | --- | --- | --- |
-| `acme-finance-advisor` | advisor prompt composer (`acme-advisor-composer`) | component | approximation |
-| `email-compose` | compose modal shell (`compose-modal-shell`) | layout/composition pattern | missing |
-| `order-shipment-timeline` | note composer (`note-composer`) | component | missing |
-
 ## Review rule
 
 A report entry is a prioritization signal, not automatic authorization to add a primitive. Review the mapped backgrounds, define the smallest stable API, migrate at least one real background, and remove the resolved gap metadata only after behavior, RTL, accessibility, and visual checks pass.

package/docs/design-system/launch-comparison-shadcn.md

@@ -1,12 +1,12 @@
 # Launch Comparison: Banhaten and shadcn/ui
 
-Reviewed against the official shadcn/ui CLI, registry, theming, and RTL documentation on 2026-07-10. shadcn/ui is the distribution and documentation benchmark—not Banhaten’s visual source.
+Benchmark references reviewed against the official shadcn/ui CLI, registry, theming, and RTL documentation on 2026-07-10; Banhaten implementation status refreshed on 2026-08-20. shadcn/ui is the distribution and documentation benchmark—not Banhaten’s visual source.
 
 ## Outcome
 
 Banhaten is a launch candidate with a distinct product contract: Arabic and English-first typography, inherited RTL by default, seven brand themes, three radius modes, stable primitives separated from larger Patterns, and a hard rule that distributable components consume canonical Banhaten tokens.
 
-The only intentionally unresolved visual exception is color contrast. The reviewed default-theme correction composes blue brand roles with the gray neutral ramp; the remaining source color pairs are documented rather than changed automatically. The Color Contrast page evaluates 742 theme/mode scenarios, reports 274 failures and 468 passes, and records the pair, score, threshold, state, swatches, recommendation, and best existing foreground candidate.
+The former color-contrast exception is closed. The reviewed semantic-role corrections preserve the Banhaten palette while selecting valid foreground/background roles across themes and states. The Color Contrast page now evaluates 910 theme/mode scenarios and reports **910 passes and 0 failures**, with every pair, score, threshold, state, and swatch retained as inspectable evidence.
 
 ## Benchmark Summary
 
@@ -14,7 +14,7 @@ The only intentionally unresolved visual exception is color contrast. The review
 | --- | --- | --- | --- |
 | Distribution | Source registry and CLI installation | Canonical Banhaten registry plus generated shadcn-compatible `registry.json` | Verified |
 | Component ownership | Copied source is consumer-owned | Receipt-backed generated ownership; local drift blocks updates unless explicitly forced | Stronger safety |
-| Registry dependencies | Dependency closure and typed registry items | Dependency graph, schema validation, mirror checks, and isolated compilation of all 67 items | Verified |
+| Registry dependencies | Dependency closure and typed registry items | Dependency graph, schema validation, mirror checks, and isolated compilation of all 68 items | Verified |
 | CLI | `init`, `add`, `view`, `docs`, migrations, presets | `init`, `add`, real `diff`, safe `update`, `list`, `search`, full `docs`, and `view` | Launch scope verified |
 | Framework setup | Multiple framework templates | Vite auto-configuration and framework-neutral/Next-style source installation | Verified |
 | Package managers | npm, pnpm, Yarn, Bun | Detection and install hints tested for all four | Verified |
@@ -23,7 +23,7 @@ The only intentionally unresolved visual exception is color contrast. The review
 | RTL | First-class RTL and install-time transformations | Authored logical layout, inherited direction hook/provider, Arabic font, explicit message catalogs, and RTL keyboard tests | Banhaten-specific |
 | Documentation | Live preview/code, component examples, API and CLI docs | Live registry previews, exact example source, extracted TypeScript props, token contract, accessibility contract, RTL, files, navigation/token search, and copy actions | Verified |
 | Components vs blocks | Components and larger blocks | Stable Components and broader Patterns; experiments and visual QA isolated under Lab | Verified |
-| Accessibility | Primitive semantics and per-component guidance | Native/Radix semantics, focus handling, dialog traps, tabs contract, reduced motion, forced colors, axe, Chromium/Firefox/WebKit tests | Verified except documented colors |
+| Accessibility | Primitive semantics and per-component guidance | Native/Radix semantics, focus handling, dialog traps, tabs contract, reduced motion, forced colors, 910/910 contrast, strict route Axe, and Chromium/Firefox/WebKit tests | Verified |
 | Release governance | Changelog and frequent CLI/schema evolution | Changelog, security, contributing, support matrix, stability tiers, deprecation, release gate, and roadmap | Verified |
 
 ## Full Finding Register
@@ -35,18 +35,18 @@ The only intentionally unresolved visual exception is color contrast. The review
 - Repaired Command Bar search/clear/submit behavior, Table disabled/action behavior, File Upload progress semantics, Spinner reduced-motion behavior, and Date Picker presets/month-year interaction.
 - Standardized direction resolution for Alert, Pagination, Input OTP, Carousel, and Toast through explicit props, `DirectionProvider`, nearest `[dir]`, then document direction.
 - Corrected Arabic Pagination copy and kept product strings explicit rather than silently localizing demo text.
-- Added focused behavior tests; the component suite currently runs 171 tests.
+- Added focused behavior tests; the component suite currently runs 205 tests.
 
 ### Colors and tokens
 
-- Preserved every requested source color value and moved all failing combinations into the generated Color Contrast report.
+- Repaired semantic foreground/background role selection across component states while preserving the canonical palette; all 910 generated contrast combinations now pass.
 - Split system, typography, effects, component variables, dark effects, and
   scoped aliases into owned `tokens/source/` fragments that compile to
   `tokens/banhaten.tokens.json`.
 - Generated live `var(...)` alias graphs rather than flattened semantic values and verified custom-property closure.
 - Added named categorical chart semantics, spinner/skeleton/motion tokens, exact icon stroke tokens, Item tokens, default border/transition wiring, reduced motion, and forced-color focus rules.
-- Generated exact component token metadata from source. All 67 registry components have non-empty token contracts.
-- Deduplicated theme CSS against the default cascade without changing values, reducing generated CSS from 466,671 bytes to 154,130 bytes.
+- Generated exact component token metadata from source. All 68 registry components have non-empty, current token contracts.
+- Deduplicated theme CSS against the default cascade and kept generated CSS at 156,729 bytes after the accessibility and component-token additions.
 - Documented the no-global-density decision and the semantic elevation hierarchy.
 
 ### Usage and composition
@@ -70,7 +70,7 @@ The only intentionally unresolved visual exception is color contrast. The review
 ### Documentation and presentation
 
 - Removed launch-blocking `noindex`, added description/social metadata, dynamic page titles, skip link, release status/version, and responsive searchable navigation.
-- Reframed the overview around quick start, token rules, safe updates, and the documented contrast exception.
+- Reframed the overview around quick start, token rules, safe updates, and the now-enforced contrast contract.
 - Added focus trap, Escape, initial focus, and focus return to Customize and Component Matrix dialogs.
 - Completed Preview/Code tab IDs, `aria-controls`, `aria-labelledby`, roving focus, and keyboard navigation.
 - Renamed ambiguous “Copy Page” to “Copy page link” and added clipboard fallback.
@@ -79,7 +79,7 @@ The only intentionally unresolved visual exception is color contrast. The review
 ### Verification and release
 
 - Browser checks cover Chromium, Firefox, and WebKit; visual baselines stay on Chromium for deterministic snapshots.
-- Automated checks cover LTR/RTL behavior, portals, focus return, docs navigation, mobile navigation, token copy/search, live theme overrides, the frozen contrast totals, reduced motion, forced colors, and serious/critical axe findings outside the intentionally documented color rule.
+- Automated checks cover LTR/RTL behavior, portals, focus return, docs navigation, mobile navigation, token copy/search, live theme overrides, the 910/910 contrast totals, reduced motion, forced colors, and strict route-wide Axe findings without a color-rule exception.
 - Bundle budgets, schema validation, token generation, token-only styling, registry mirrors, documentation coverage, CLI integration, isolated installs, package audit, and tarball contents are release gates.
 
 ## Deliberate Differences, Not Missing Copies

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "banhaten",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Banhaten design system: an Arabic and English-first React design system with shadcn-style component installation.",
   "type": "module",
   "bin": {
@@ -34,7 +34,7 @@
     "build": "npm --prefix playground ci --include=dev --include=optional && npm --prefix playground run build",
     "build:railway": "npm --prefix playground ci --include=dev --include=optional && npm --prefix playground run build:railway",
     "start": "node playground/scripts/serve-static.mjs playground/dist",
-    "check": "node --check src/cli/index.js && node --check src/cli/command-line.js && node --check src/cli/doctor.js && node --check src/cli/config-editors.js && node --check src/cli/source-scanner.js && node --check src/cli/jsonc.js && node --check src/cli/vite-config.js && node --check src/cli/install-plan.js && node --check src/cli/install-receipt.js && node --check src/cli/package-install-state.js && node --check src/cli/package-manager.js && node --check src/cli/package-plan.js && node --check src/cli/package-version.js && node --check scripts/compile-token-catalog.mjs && node --check scripts/sync-default-theme-neutral-values.mjs && node --check scripts/token-catalog-test.mjs && node --check scripts/registry-catalog.mjs && node --check scripts/generate-registry-index.mjs && node --check scripts/generate-shadcn-registry.mjs && node --check scripts/normalize-component-docs.mjs && node --check scripts/package-artifact.mjs && node --check scripts/check-package-contents.mjs && node --check scripts/select-react-compatibility.mjs && npm run contracts:check && npm run cli:test && npm run tokens:check && npm run registry:check && npm run docs:check && npm run package:check && npm run playground:build && npm run playground:test:browser && npm run playground:audit",
+    "check": "node --check src/cli/index.js && node --check src/cli/command-line.js && node --check src/cli/doctor.js && node --check src/cli/config-editors.js && node --check src/cli/source-scanner.js && node --check src/cli/jsonc.js && node --check src/cli/vite-config.js && node --check src/cli/install-plan.js && node --check src/cli/install-receipt.js && node --check src/cli/package-install-state.js && node --check src/cli/package-manager.js && node --check src/cli/package-plan.js && node --check src/cli/package-version.js && node --check scripts/compile-token-catalog.mjs && node --check scripts/sync-default-theme-neutral-values.mjs && node --check scripts/token-catalog-test.mjs && node --check scripts/registry-catalog.mjs && node --check scripts/generate-registry-index.mjs && node --check scripts/generate-shadcn-registry.mjs && node --check scripts/normalize-component-docs.mjs && node --check scripts/package-artifact.mjs && node --check scripts/check-package-contents.mjs && node --check scripts/select-react-compatibility.mjs && npm run contracts:check && npm run cli:test && npm run tokens:check && npm run components:ownership:check && npm run registry:check && npm run docs:check && npm run package:check && npm run playground:build && npm run playground:test:browser && npm run playground:audit",
     "contracts:check": "node scripts/validate-contracts.mjs",
     "cli:test": "node scripts/cli-argument-test.mjs && node scripts/cli-dependency-test.mjs && node scripts/cli-install-plan-test.mjs && node scripts/cli-integration-test.mjs && node scripts/cli-doctor-test.mjs",
     "playground:build": "npm --prefix playground run build",
@@ -49,6 +49,7 @@
     "registry:exports": "node scripts/check-isolated-registry-installs.mjs --write-exports",
     "registry:sync": "node scripts/check-registry-mirrors.mjs --write",
     "components:tokens:check": "node scripts/check-component-token-usage.mjs",
+    "components:ownership:check": "npm --prefix playground run test:ownership",
     "components:tokens:metadata": "node scripts/sync-component-token-metadata.mjs",
     "docs:check": "node scripts/check-component-docs.mjs && node scripts/normalize-component-docs.mjs",
     "docs:normalize": "node scripts/normalize-component-docs.mjs --write",

package/registry/components/alert-dialog.tsx

@@ -16,7 +16,7 @@ const alertDialogContentVariants = cva(
     "fixed left-1/2 top-1/2 z-[var(--bh-z-overlay)] flex max-h-[calc(100vh-(var(--bh-space-8xl-48)*2))] w-[var(--bh-alert-dialog-width)]",
     "max-w-[calc(100vw-(var(--bh-space-4xl-20)*2))] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden",
     "rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--shadow-modal)] outline-none",
-    "[--bh-alert-dialog-border:var(--bh-border-subtle)] [--shadow-modal:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-alert-dialog-border),var(--shadow-component-default)]",
+    "[--bh-alert-dialog-border:var(--bh-border-subtle)] [--shadow-modal:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-alert-dialog-border),var(--shadow-lg)]",
   ],
   {
     variants: {

package/registry/components/alert.tsx

@@ -11,6 +11,7 @@ import {
 
 import { cn } from "@/lib/utils"
 import { useResolvedDirection } from "@/hooks/use-direction"
+import { Button } from "@/components/ui/button"
 
 const alertVariants = cva(
   [
@@ -22,13 +23,13 @@ const alertVariants = cva(
     variants: {
       status: {
         danger:
-          "[--alert-bg:var(--bh-bg-danger-subtle)] [--alert-border:var(--bh-border-danger-subtle)] [--alert-title:var(--bh-content-danger-strong)] [--alert-description:var(--bh-content-danger-default)] [--alert-icon:var(--bh-content-danger-default)]",
+          "[--alert-bg:var(--bh-bg-danger-subtle)] [--alert-border:var(--bh-border-danger-subtle)] [--alert-title:var(--bh-content-danger-strong)] [--alert-description:var(--bh-content-danger-strong)] [--alert-icon:var(--bh-content-danger-default)]",
         success:
-          "[--alert-bg:var(--bh-bg-success-subtle)] [--alert-border:var(--bh-border-success-subtle)] [--alert-title:var(--bh-content-success-strong)] [--alert-description:var(--bh-content-success-default)] [--alert-icon:var(--bh-content-success-default)]",
+          "[--alert-bg:var(--bh-bg-success-subtle)] [--alert-border:var(--bh-border-success-subtle)] [--alert-title:var(--bh-content-success-strong)] [--alert-description:var(--bh-content-success-strong)] [--alert-icon:var(--bh-content-success-default)]",
         warning:
-          "[--alert-bg:var(--bh-bg-warning-subtle)] [--alert-border:var(--bh-border-warning-subtle)] [--alert-title:var(--bh-content-warning-strong)] [--alert-description:var(--bh-content-warning-default)] [--alert-icon:var(--bh-content-warning-default)]",
+          "[--alert-bg:var(--bh-bg-warning-subtle)] [--alert-border:var(--bh-border-warning-subtle)] [--alert-title:var(--bh-content-warning-strong)] [--alert-description:var(--bh-content-warning-strong)] [--alert-icon:var(--bh-content-warning-default)]",
         info:
-          "[--alert-bg:var(--bh-bg-info-subtle)] [--alert-border:var(--bh-border-info-subtle)] [--alert-title:var(--bh-content-brand-strong)] [--alert-description:var(--bh-content-brand-default)] [--alert-icon:var(--bh-content-brand-default)]",
+          "[--alert-bg:var(--bh-bg-info-subtle)] [--alert-border:var(--bh-border-info-subtle)] [--alert-title:var(--bh-content-brand-strong)] [--alert-description:var(--bh-content-brand-strong)] [--alert-icon:var(--bh-content-brand-default)]",
         neutral:
           "[--alert-bg:var(--bh-bg-neutral-subtle)] [--alert-border:var(--bh-border-subtle)] [--alert-title:var(--bh-content-default)] [--alert-description:var(--bh-content-default)] [--alert-icon:var(--bh-content-default)]",
       },
@@ -194,7 +195,7 @@ const Alert = React.forwardRef<HTMLElement, AlertProps>(function Alert(
               <p
                 data-slot="alert-description"
                 dir="auto"
-                className="m-0 w-full break-words text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-font-weight-regular)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--alert-description)] opacity-[var(--bh-opacity-80)]"
+                className="m-0 w-full break-words text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-font-weight-regular)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--alert-description)]"
               >
                 {description}
               </p>
@@ -212,15 +213,17 @@ const Alert = React.forwardRef<HTMLElement, AlertProps>(function Alert(
       )}
 
       {visibleCloseButton && (
-        <button
+        <Button
           data-slot="alert-close"
           aria-label={resolvedCloseLabel}
-          className="inline-flex size-[var(--bh-alert-icon-size)] shrink-0 cursor-pointer items-center justify-center rounded-[var(--bh-radius-full)] border-0 bg-transparent p-0 text-[var(--bh-content-subtle)] outline-none focus-visible:shadow-[var(--shadow-button-focus)]"
+          className="size-[var(--bh-alert-icon-size)] shrink-0 rounded-[var(--bh-radius-full)] p-0 text-[var(--bh-content-subtle)]"
           onClick={onClose}
+          size="icon-xs"
           type="button"
+          variant="ghost"
         >
           <CloseIcon />
-        </button>
+        </Button>
       )}
     </section>
   )
@@ -237,15 +240,16 @@ function AlertActions({
       className="flex shrink-0 items-center gap-[var(--bh-space-3xl-16)]"
     >
       {actions.map((action, index) => (
-        <button
+        <Button
           data-slot="alert-action"
-          className="inline-flex shrink-0 cursor-pointer items-center justify-center gap-[var(--bh-space-xxs-2)] border-0 bg-transparent p-0 text-start text-[length:var(--bh-text-body-md-underline-font-size)] font-[var(--bh-text-body-md-underline-font-weight)] leading-[var(--bh-text-body-md-underline-line-height)] tracking-[var(--bh-text-body-md-underline-letter-spacing)] text-[var(--bh-content-default)] underline outline-none [text-underline-position:from-font] focus-visible:shadow-[var(--shadow-button-focus)]"
+          className="h-auto shrink-0 gap-[var(--bh-space-xxs-2)] p-0 text-start text-[length:var(--bh-text-body-md-underline-font-size)] font-[var(--bh-text-body-md-underline-font-weight)] leading-[var(--bh-text-body-md-underline-line-height)] tracking-[var(--bh-text-body-md-underline-letter-spacing)] text-[var(--bh-content-default)] underline [text-underline-position:from-font]"
           key={index}
           onClick={action.onClick}
           type="button"
+          variant="ghost"
         >
           {action.label}
-        </button>
+        </Button>
       ))}
     </div>
   )

package/registry/components/avatar.tsx

@@ -50,7 +50,7 @@ const avatarVariants = cva(
 )
 
 const avatarFallbackVariants = cva(
-  "flex size-full items-center justify-center rounded-[var(--bh-avatar-radius,var(--bh-radius-full))] bg-[var(--bh-bg-neutral-subtle)] text-[length:var(--bh-avatar-fallback-size,var(--bh-text-body-sm-medium-font-size))] font-[var(--bh-font-weight-semibold)] leading-none text-[var(--bh-content-subtle)] whitespace-nowrap",
+  "flex size-full items-center justify-center rounded-[var(--bh-avatar-radius,var(--bh-radius-full))] bg-[var(--bh-bg-neutral-subtle)] text-[length:var(--bh-avatar-fallback-size,var(--bh-text-body-sm-medium-font-size))] font-[var(--bh-font-weight-semibold)] leading-none text-[var(--bh-content-default)] whitespace-nowrap",
   {
     variants: {
       size: avatarSizeVariants,
@@ -62,7 +62,7 @@ const avatarFallbackVariants = cva(
 )
 
 const avatarIconVariants = cva(
-  "flex size-full items-center justify-center rounded-[var(--bh-avatar-radius,var(--bh-radius-full))] bg-[var(--bh-bg-neutral-subtle)] text-[var(--bh-content-subtle)]",
+  "flex size-full items-center justify-center rounded-[var(--bh-avatar-radius,var(--bh-radius-full))] bg-[var(--bh-bg-neutral-subtle)] text-[var(--bh-content-default)]",
   {
     variants: {
       size: avatarSizeVariants,
@@ -147,7 +147,9 @@ const avatarActionVariants = cva(
 )
 
 function Avatar({
+  "aria-label": ariaLabel,
   className,
+  role,
   size,
   shape,
   ...props
@@ -155,9 +157,11 @@ function Avatar({
   VariantProps<typeof avatarVariants>) {
   return (
     <AvatarPrimitive.Root
+      aria-label={ariaLabel}
       data-slot="avatar"
       data-size={size ?? "default"}
       data-shape={shape ?? "circular"}
+      role={role ?? (ariaLabel ? "img" : undefined)}
       className={cn(avatarVariants({ size, shape, className }))}
       {...props}
     />
@@ -307,7 +311,7 @@ function AvatarGroupCount({
       data-slot="avatar-group-count"
       className={cn(
         avatarVariants({ size }),
-        "-ms-[var(--bh-space-md-8)] bg-[var(--bh-bg-neutral-subtle)] text-[length:var(--bh-avatar-fallback-size,var(--bh-text-body-sm-medium-font-size))] font-[var(--bh-font-weight-semibold)] leading-none text-[var(--bh-content-subtle)] ring-[var(--bh-space-xxs-2)] ring-[var(--bh-bg-default)]",
+        "-ms-[var(--bh-space-md-8)] bg-[var(--bh-bg-neutral-subtle)] text-[length:var(--bh-avatar-fallback-size,var(--bh-text-body-sm-medium-font-size))] font-[var(--bh-font-weight-semibold)] leading-none text-[var(--bh-content-default)] ring-[var(--bh-space-xxs-2)] ring-[var(--bh-bg-default)]",
         className
       )}
       {...props}

package/registry/components/badge.tsx

@@ -192,13 +192,13 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "neutral",
         class:
-          "border-[var(--bh-border-strong)] text-[var(--bh-content-subtle)] [--badge-dot-color:var(--bh-content-subtle)] [--badge-split-border-color:var(--bh-border-default)]",
+          "border-[var(--bh-border-strong)] text-[var(--bh-content-default)] [--badge-dot-color:var(--bh-content-default)] [--badge-split-border-color:var(--bh-border-default)]",
       },
       {
         badgeStyle: "solid",
         color: "neutral",
         class:
-          "bg-[var(--bh-bg-neutral-default)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-subtle)]",
+          "bg-[var(--bh-bg-neutral-bold)] text-[var(--bh-content-on-neutral)] [--badge-dot-color:var(--bh-content-on-neutral)] [--badge-split-border-color:var(--bh-border-subtle)]",
       },
       {
         badgeStyle: "light",
@@ -210,13 +210,13 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "blue",
         class:
-          "border-[var(--bh-border-accent-blue-strong)] text-[var(--bh-content-accent-blue-default)] [--badge-dot-color:var(--bh-content-accent-blue-default)] [--badge-split-border-color:var(--bh-border-accent-blue-subtle)]",
+          "border-[var(--bh-border-accent-blue-strong)] text-[var(--bh-content-accent-blue-strong)] [--badge-dot-color:var(--bh-content-accent-blue-strong)] [--badge-split-border-color:var(--bh-border-accent-blue-subtle)]",
       },
       {
         badgeStyle: "solid",
         color: "blue",
         class:
-          "bg-[var(--bh-bg-accent-blue-default)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-accent-blue-subtle)]",
+          "bg-[var(--bh-bg-accent-blue-bold)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-accent-blue-subtle)]",
       },
       {
         badgeStyle: "light",
@@ -228,13 +228,13 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "green",
         class:
-          "border-[var(--bh-border-accent-green-strong)] text-[var(--bh-content-accent-green-default)] [--badge-dot-color:var(--bh-content-accent-green-default)] [--badge-split-border-color:var(--bh-border-accent-green-subtle)]",
+          "border-[var(--bh-border-accent-green-strong)] text-[var(--bh-content-accent-green-strong)] [--badge-dot-color:var(--bh-content-accent-green-strong)] [--badge-split-border-color:var(--bh-border-accent-green-subtle)]",
       },
       {
         badgeStyle: "solid",
         color: "green",
         class:
-          "bg-[var(--bh-bg-accent-green-default)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-accent-green-subtle)]",
+          "bg-[var(--bh-bg-accent-green-default)] text-[var(--bh-content-on-light)] [--badge-dot-color:var(--bh-content-on-light)] [--badge-split-border-color:var(--bh-border-accent-green-subtle)]",
       },
       {
         badgeStyle: "light",
@@ -246,13 +246,13 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "amber",
         class:
-          "border-[var(--bh-border-accent-amber-strong)] text-[var(--bh-content-accent-amber-default)] [--badge-dot-color:var(--bh-content-accent-amber-default)] [--badge-split-border-color:var(--bh-border-accent-amber-subtle)]",
+          "border-[var(--bh-border-accent-amber-strong)] text-[var(--bh-content-accent-amber-strong)] [--badge-dot-color:var(--bh-content-accent-amber-strong)] [--badge-split-border-color:var(--bh-border-accent-amber-subtle)]",
       },
       {
         badgeStyle: "solid",
         color: "amber",
         class:
-          "bg-[var(--bh-bg-accent-amber-default)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-accent-amber-subtle)]",
+          "bg-[var(--bh-bg-accent-amber-default)] text-[var(--bh-content-on-light)] [--badge-dot-color:var(--bh-content-on-light)] [--badge-split-border-color:var(--bh-border-accent-amber-subtle)]",
       },
       {
         badgeStyle: "light",
@@ -264,7 +264,7 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "danger",
         class:
-          "border-[var(--bh-border-accent-red-strong)] text-[var(--bh-content-accent-red-default)] [--badge-dot-color:var(--bh-content-accent-red-default)] [--badge-split-border-color:var(--bh-border-accent-red-subtle)]",
+          "border-[var(--bh-border-accent-red-strong)] text-[var(--bh-content-accent-red-strong)] [--badge-dot-color:var(--bh-content-accent-red-strong)] [--badge-split-border-color:var(--bh-border-accent-red-subtle)]",
       },
       {
         badgeStyle: "solid",
@@ -282,7 +282,7 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "purple",
         class:
-          "border-[var(--bh-border-accent-purple-strong)] text-[var(--bh-content-accent-purple-default)] [--badge-dot-color:var(--bh-content-accent-purple-default)] [--badge-split-border-color:var(--bh-border-accent-purple-subtle)]",
+          "border-[var(--bh-border-accent-purple-strong)] text-[var(--bh-content-accent-purple-strong)] [--badge-dot-color:var(--bh-content-accent-purple-strong)] [--badge-split-border-color:var(--bh-border-accent-purple-subtle)]",
       },
       {
         badgeStyle: "solid",
@@ -300,13 +300,13 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "fuchsia",
         class:
-          "border-[var(--bh-border-accent-fuchsia-strong)] text-[var(--bh-content-accent-fuchsia-default)] [--badge-dot-color:var(--bh-content-accent-fuchsia-default)] [--badge-split-border-color:var(--bh-border-accent-fuchsia-subtle)]",
+          "border-[var(--bh-border-accent-fuchsia-strong)] text-[var(--bh-content-accent-fuchsia-strong)] [--badge-dot-color:var(--bh-content-accent-fuchsia-strong)] [--badge-split-border-color:var(--bh-border-accent-fuchsia-subtle)]",
       },
       {
         badgeStyle: "solid",
         color: "fuchsia",
         class:
-          "bg-[var(--bh-bg-accent-fuchsia-default)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-accent-fuchsia-subtle)]",
+          "bg-[var(--bh-bg-accent-fuchsia-default)] text-[var(--bh-content-on-light)] [--badge-dot-color:var(--bh-content-on-light)] [--badge-split-border-color:var(--bh-border-accent-fuchsia-subtle)]",
       },
       {
         badgeStyle: "light",
@@ -318,13 +318,13 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "rose",
         class:
-          "border-[var(--bh-border-accent-rose-strong)] text-[var(--bh-content-accent-rose-default)] [--badge-dot-color:var(--bh-content-accent-rose-default)] [--badge-split-border-color:var(--bh-border-accent-rose-subtle)]",
+          "border-[var(--bh-border-accent-rose-strong)] text-[var(--bh-content-accent-rose-strong)] [--badge-dot-color:var(--bh-content-accent-rose-strong)] [--badge-split-border-color:var(--bh-border-accent-rose-subtle)]",
       },
       {
         badgeStyle: "solid",
         color: "rose",
         class:
-          "bg-[var(--bh-bg-accent-rose-default)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-accent-rose-subtle)]",
+          "bg-[var(--bh-bg-accent-rose-bold)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-accent-rose-subtle)]",
       },
       {
         badgeStyle: "light",
@@ -336,13 +336,13 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "sky",
         class:
-          "border-[var(--bh-border-accent-sky-strong)] text-[var(--bh-content-accent-sky-default)] [--badge-dot-color:var(--bh-content-accent-sky-default)] [--badge-split-border-color:var(--bh-border-accent-sky-subtle)]",
+          "border-[var(--bh-border-accent-sky-strong)] text-[var(--bh-content-accent-sky-strong)] [--badge-dot-color:var(--bh-content-accent-sky-strong)] [--badge-split-border-color:var(--bh-border-accent-sky-subtle)]",
       },
       {
         badgeStyle: "solid",
         color: "sky",
         class:
-          "bg-[var(--bh-bg-accent-sky-base)] text-[var(--bh-content-on-color)] [--badge-dot-color:var(--bh-content-on-color)] [--badge-split-border-color:var(--bh-border-accent-sky-subtle)]",
+          "bg-[var(--bh-bg-accent-sky-base)] text-[var(--bh-content-on-light)] [--badge-dot-color:var(--bh-content-on-light)] [--badge-split-border-color:var(--bh-border-accent-sky-subtle)]",
       },
       {
         badgeStyle: "light",
@@ -354,7 +354,7 @@ const badgeVariants = cva(
         badgeStyle: "outline",
         color: "golden",
         class:
-          "border-[var(--bh-border-accent-golden-strong)] text-[var(--bh-content-accent-golden-default)] [--badge-dot-color:var(--bh-content-accent-golden-default)] [--badge-split-border-color:var(--bh-border-accent-golden-subtle)]",
+          "border-[var(--bh-border-accent-golden-strong)] text-[var(--bh-content-accent-golden-strong)] [--badge-dot-color:var(--bh-content-accent-golden-strong)] [--badge-split-border-color:var(--bh-border-accent-golden-subtle)]",
       },
       {
         badgeStyle: "solid",

package/registry/components/button-group.tsx

@@ -32,7 +32,7 @@ type ToggleGroupContextValue = {
 const toggleGroupContext = React.createContext<ToggleGroupContextValue | null>(null)
 
 const buttonGroupVariants = cva(
-  "inline-flex w-fit items-center overflow-hidden rounded-[var(--bh-button-group-radius)] bg-[var(--bh-button-group-bg)] text-[var(--bh-button-group-content)] shadow-[var(--shadow-button-group)] [--shadow-button-group:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-button-group-border),var(--shadow-component-default)]",
+  "inline-flex w-fit max-w-full items-center overflow-x-auto overflow-y-hidden rounded-[var(--bh-button-group-radius)] bg-[var(--bh-button-group-bg)] text-[var(--bh-button-group-content)] shadow-[var(--shadow-button-group)] outline-none focus-visible:shadow-[var(--shadow-button-group-focus)] [--shadow-button-group:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-button-group-border),var(--shadow-component-default)]",
   {
     variants: {
       size: {
@@ -200,6 +200,7 @@ const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(function
   mode = "default",
   children,
   role = "group",
+  tabIndex = 0,
   ...props
 }, ref) {
   const resolvedSize = resolveButtonGroupSize(density, size)
@@ -222,6 +223,7 @@ const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(function
         data-slot="button-group"
         ref={ref}
         role={role}
+        tabIndex={tabIndex}
         className={cn(buttonGroupVariants({ size: contextValue.size }), className)}
         {...props}
       >

package/registry/components/button.tsx

@@ -18,9 +18,9 @@ const buttonVariants = cva(
         destructive:
           "bg-[var(--bh-interactive-danger-default)] text-[var(--bh-content-on-color)] shadow-[var(--shadow-button-raised)] hover:bg-[var(--bh-interactive-danger-hover)] active:bg-[var(--bh-interactive-danger-pressed)] focus-visible:shadow-[var(--shadow-button-danger-focus)] disabled:bg-[var(--bh-interactive-danger-disabled)] disabled:text-[var(--bh-content-disabled)]",
         success:
-          "bg-[var(--bh-bg-success-default)] text-[var(--bh-content-on-color)] shadow-[var(--shadow-button-raised)] hover:bg-[var(--bh-bg-success-bold)] active:bg-[var(--bh-bg-success-strong)] disabled:bg-[var(--bh-interactive-brand-disabled)] disabled:text-[var(--bh-content-disabled)]",
+          "bg-[var(--bh-interactive-success-default)] text-[var(--bh-content-on-success)] shadow-[var(--shadow-button-raised)] hover:bg-[var(--bh-interactive-success-hover)] active:bg-[var(--bh-interactive-success-pressed)] disabled:bg-[var(--bh-interactive-brand-disabled)] disabled:text-[var(--bh-content-disabled)]",
         warning:
-          "bg-[var(--bh-bg-warning-default)] text-[var(--bh-content-on-light)] shadow-[var(--shadow-button-raised)] hover:bg-[var(--bh-bg-warning-bold)] active:bg-[var(--bh-bg-warning-strong)] disabled:bg-[var(--bh-interactive-brand-disabled)] disabled:text-[var(--bh-content-disabled)]",
+          "bg-[var(--bh-interactive-warning-default)] text-[var(--bh-content-on-warning)] shadow-[var(--shadow-button-raised)] hover:bg-[var(--bh-interactive-warning-hover)] active:bg-[var(--bh-interactive-warning-pressed)] disabled:bg-[var(--bh-interactive-brand-disabled)] disabled:text-[var(--bh-content-disabled)]",
         secondary:
           "bg-[var(--bh-interactive-secondary-default)] text-[var(--bh-content-default)] shadow-[var(--shadow-button-secondary)] [--bh-button-secondary-border:var(--bh-border-default)] hover:bg-[var(--bh-interactive-secondary-hover)] active:bg-[var(--bh-interactive-secondary-pressed)] focus-visible:[--bh-button-secondary-focus-border:var(--bh-border-brand-strong)] focus-visible:shadow-[var(--shadow-button-secondary-focus)] disabled:border-[length:var(--bh-border-width-default)] disabled:border-[var(--bh-border-disabled)] disabled:bg-[var(--bh-interactive-secondary-disabled)] disabled:text-[var(--bh-content-disabled)]",
         soft:

package/registry/components/card.tsx

@@ -58,7 +58,7 @@ const cardVariants = cva(
         orientation: "horizontal",
         breakpoint: "desktop",
         class:
-          "min-h-[var(--bh-card-horizontal-min-height)] w-[min(100%,var(--bh-card-horizontal-width))]",
+          "min-h-[var(--bh-card-horizontal-min-height)] w-[min(100%,var(--bh-card-horizontal-width))] flex-wrap",
       },
       {
         orientation: "horizontal",
@@ -109,6 +109,20 @@ type CardActionsProps = React.ComponentProps<"div"> & {
 }
 
 type CardFooterProps = React.ComponentProps<"div">
+type CardSurfaceProps = React.ComponentPropsWithoutRef<"article">
+
+const CardSurface = React.forwardRef<HTMLElement, CardSurfaceProps>(
+  function CardSurface({ className, ...props }, ref) {
+    return (
+      <article
+        data-slot="card-surface"
+        ref={ref}
+        className={cn(cardVariants(), className)}
+        {...props}
+      />
+    )
+  }
+)
 
 const Card = React.forwardRef<HTMLElement, CardProps>(function Card({
   actions,
@@ -362,7 +376,7 @@ function CardBody({
       className={cn(
         "flex min-w-0 flex-col",
         horizontal
-          ? "flex-1 gap-[var(--bh-space-5xl-24)] p-[var(--bh-card-horizontal-padding)]"
+          ? "min-w-[min(100%,var(--bh-card-vertical-width))] flex-[1_1_var(--bh-card-vertical-width)] gap-[var(--bh-space-5xl-24)] p-[var(--bh-card-horizontal-padding)]"
           : "w-full gap-[var(--bh-space-5xl-24)] p-[var(--bh-card-content-padding)]"
       )}
     >
@@ -566,7 +580,7 @@ function getCardMediaClassName(
   breakpoint: CardBreakpoint
 ) {
   if (orientation === "horizontal" && breakpoint === "desktop") {
-    return "h-auto w-[var(--bh-card-horizontal-media-width)]"
+    return "min-h-[var(--bh-card-media-height)] w-[min(100%,var(--bh-card-horizontal-media-width))] shrink flex-[1_1_var(--bh-card-horizontal-media-width)]"
   }
 
   return "h-[var(--bh-card-media-height)] w-full"
@@ -611,6 +625,7 @@ export {
   CardActions,
   CardFooter,
   CardMedia,
+  CardSurface,
   cardVariants,
   type CardActionsProps,
   type CardBreakpoint,
@@ -618,5 +633,6 @@ export {
   type CardMediaProps,
   type CardOrientation,
   type CardProps,
+  type CardSurfaceProps,
   type CardType,
 }

package/registry/components/carousel.tsx

@@ -17,16 +17,22 @@ type CarouselPlugin = UseCarouselParameters[1]
 type CarouselOrientation = "horizontal" | "vertical"
 
 type CarouselMessages = {
+  carouselLabel: string
+  carouselRoleDescription: string
   nextSlide: string
   previousSlide: string
 }
 
 const defaultCarouselMessages: CarouselMessages = {
+  carouselLabel: "Carousel",
+  carouselRoleDescription: "carousel",
   nextSlide: "Next slide",
   previousSlide: "Previous slide",
 }
 
 const arabicCarouselMessages: CarouselMessages = {
+  carouselLabel: "\u0639\u0627\u0631\u0636 \u0627\u0644\u0634\u0631\u0627\u0626\u062d",
+  carouselRoleDescription: "\u0639\u0627\u0631\u0636 \u0634\u0631\u0627\u0626\u062d",
   nextSlide: "\u0627\u0644\u0634\u0631\u064a\u062d\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629",
   previousSlide: "\u0627\u0644\u0634\u0631\u064a\u062d\u0629 \u0627\u0644\u0633\u0627\u0628\u0642\u0629",
 }
@@ -58,6 +64,9 @@ const CarouselContext = React.createContext<CarouselContextValue | null>(null)
 const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
   function Carousel(
     {
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-roledescription": ariaRoleDescription,
       children,
       className,
       dir,
@@ -138,6 +147,11 @@ const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
           dir={direction}
           ref={setRootRef}
           role="region"
+          aria-label={ariaLabelledBy ? undefined : (ariaLabel ?? messages.carouselLabel)}
+          aria-labelledby={ariaLabelledBy}
+          aria-roledescription={
+            ariaRoleDescription ?? messages.carouselRoleDescription
+          }
           className={cn("relative", className)}
           {...props}
         >