banhaten 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/README.md +4 -4
  3. package/docs/design-system/component-implementation-ownership-audit.md +2 -1
  4. package/docs/design-system/component-quality-audit-2026-08-20.md +4 -2
  5. package/docs/design-system/components/alert-dialog.md +1 -1
  6. package/docs/design-system/components/alert.md +2 -2
  7. package/docs/design-system/components/attribute.md +1 -1
  8. package/docs/design-system/components/avatar.md +2 -2
  9. package/docs/design-system/components/banner.md +2 -2
  10. package/docs/design-system/components/breadcrumbs.md +2 -2
  11. package/docs/design-system/components/button-group.md +2 -2
  12. package/docs/design-system/components/button.md +2 -2
  13. package/docs/design-system/components/date-picker.md +3 -1
  14. package/docs/design-system/components/file-upload.md +1 -1
  15. package/docs/design-system/components/input.md +8 -6
  16. package/docs/design-system/components/item.md +3 -1
  17. package/docs/design-system/components/kbd.md +11 -8
  18. package/docs/design-system/components/menu.md +2 -2
  19. package/docs/design-system/components/modal.md +1 -1
  20. package/docs/design-system/components/onboarding-step-list-item.md +2 -2
  21. package/docs/design-system/components/pagination.md +2 -2
  22. package/docs/design-system/components/radio-card.md +1 -1
  23. package/docs/design-system/components/select.md +1 -1
  24. package/docs/design-system/components/sidebar.md +59 -19
  25. package/docs/design-system/components/table.md +1 -1
  26. package/docs/design-system/components/tag.md +3 -3
  27. package/docs/design-system/components/toolbar.md +1 -1
  28. package/docs/design-system/density-and-elevation.md +16 -12
  29. package/docs/design-system/icons.md +6 -1
  30. package/docs/design-system/installation.md +1 -1
  31. package/docs/design-system/token-governance.md +7 -8
  32. package/package.json +1 -1
  33. package/registry/components/alert-dialog.tsx +1 -1
  34. package/registry/components/alert.tsx +3 -3
  35. package/registry/components/attribute.tsx +8 -2
  36. package/registry/components/avatar.tsx +21 -17
  37. package/registry/components/button-group.tsx +1 -1
  38. package/registry/components/button.tsx +1 -1
  39. package/registry/components/date-picker.tsx +16 -4
  40. package/registry/components/expanded/OnboardingStepListItem.tsx +6 -5
  41. package/registry/components/expanded/banner.css +10 -5
  42. package/registry/components/expanded/breadcrumbs.css +4 -4
  43. package/registry/components/expanded/fileUpload.css +3 -3
  44. package/registry/components/expanded/onboardingStepListItem.css +14 -5
  45. package/registry/components/expanded/table.css +5 -2
  46. package/registry/components/input.tsx +12 -5
  47. package/registry/components/item.tsx +1 -1
  48. package/registry/components/kbd.tsx +109 -15
  49. package/registry/components/menu.tsx +1 -1
  50. package/registry/components/modal.tsx +1 -1
  51. package/registry/components/pagination.tsx +12 -7
  52. package/registry/components/radio-card.tsx +1 -2
  53. package/registry/components/select.tsx +1 -1
  54. package/registry/components/sidebar.tsx +929 -57
  55. package/registry/components/tag.tsx +1 -1
  56. package/registry/components/toolbar.tsx +1 -1
  57. package/registry/examples/attribute-demo.tsx +1 -1
  58. package/registry/examples/command-palette-demo.tsx +0 -1
  59. package/registry/examples/kbd-demo.tsx +2 -1
  60. package/registry/examples/sidebar-demo.tsx +60 -16
  61. package/registry/guidance/USAGE.md +1 -1
  62. package/registry/index.json +233 -31
  63. package/registry/styles/globals.css +152 -118
  64. package/registry.json +4 -3
  65. package/tokens/banhaten.tokens.json +169 -49
package/registry/styles/globals.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* Banhaten design system tokens: deterministically generated from tokens/banhaten.tokens.json and tokens/banhaten.utilities.css. */
2
2
 
3
3
  :root,
4
- [data-theme="blue"] {
4
+ [data-theme="gray"] {
5
5
  --accent: var(--bh-interactive-ghost-hover);
6
6
  --accent-foreground: var(--bh-content-default);
7
7
  --accent-hover: var(--bh-interactive-ghost-pressed);
@@ -18,7 +18,8 @@
18
18
  --bh-alert-expanded-radius: var(--bh-radius-xl-10);
19
19
  --bh-alert-expanded-rtl-height: calc(var(--bh-space-11xl-96) + var(--bh-space-5xl-24));
20
20
  --bh-alert-expanded-width: 500px;
21
- --bh-alert-icon-size: var(--bh-space-4xl-20);
21
+ --bh-alert-icon-size: var(--bh-icon-size-default);
22
+ --bh-alert-icon-slot-size: var(--bh-icon-slot-size-default);
22
23
  --bh-alpha-alpha-transparent: rgb(255 255 255 / 0);
23
24
  --bh-alpha-alpha-transparent-to-100: rgb(255 255 255 / 0);
24
25
  --bh-alpha-alpha-transparent-to-500: rgb(255 255 255 / 0);
@@ -70,8 +71,8 @@
70
71
  --bh-avatar-icon-size-2xs: var(--bh-space-lg-10);
71
72
  --bh-avatar-icon-size-3xl: var(--bh-space-6xl-32);
72
73
  --bh-avatar-icon-size-4xl: 36px;
73
- --bh-avatar-icon-size-lg: var(--bh-space-4xl-20);
74
- --bh-avatar-icon-size-md: var(--bh-space-4xl-20);
74
+ --bh-avatar-icon-size-lg: var(--bh-icon-size-default);
75
+ --bh-avatar-icon-size-md: var(--bh-icon-size-default);
75
76
  --bh-avatar-icon-size-sm: var(--bh-space-3xl-16);
76
77
  --bh-avatar-icon-size-xl: var(--bh-space-5xl-24);
77
78
  --bh-avatar-icon-size-xs: var(--bh-space-xl-12);
@@ -181,15 +182,11 @@
181
182
  --bh-bg-warning-subtle: var(--bh-amber-50);
182
183
  --bh-blue-100: #D6EAFF;
183
184
  --bh-blue-200: #BBDAFF;
184
- --bh-blue-300: #8DBDFF;
185
- --bh-blue-400: #5B97FF;
186
185
  --bh-blue-50: #EBF5FF;
187
186
  --bh-blue-500: #3276FF;
188
187
  --bh-blue-600: #245DED;
189
188
  --bh-blue-700: #1D49BF;
190
- --bh-blue-800: #11318F;
191
189
  --bh-blue-900: #0A1B63;
192
- --bh-blue-alpha10: rgb(50 118 255 / 0.1);
193
190
  --bh-border-accent-amber-strong: var(--bh-amber-500);
194
191
  --bh-border-accent-amber-subtle: var(--bh-amber-300);
195
192
  --bh-border-accent-aqua-strong: var(--bh-aqua-500);
@@ -242,7 +239,8 @@
242
239
  --bh-button-group-content-default: var(--bh-content-subtle);
243
240
  --bh-button-group-content-disabled: var(--bh-content-disabled);
244
241
  --bh-button-group-divider: var(--bh-border-subtle);
245
- --bh-button-group-icon-size: var(--bh-space-4xl-20);
242
+ --bh-button-group-icon-size: var(--bh-icon-size-default);
243
+ --bh-button-group-icon-slot-size: var(--bh-icon-slot-size-default);
246
244
  --bh-button-group-item-active-bg: var(--bh-interactive-ghost-active);
247
245
  --bh-button-group-item-bg: var(--bh-interactive-ghost-default);
248
246
  --bh-button-group-item-disabled-bg: var(--bh-interactive-ghost-disabled);
@@ -270,7 +268,8 @@
270
268
  --bh-button-group-xs-item-width: 112px;
271
269
  --bh-button-group-xs-padding-x: var(--bh-space-md-8);
272
270
  --bh-button-icon-offset: calc(var(--bh-space-xxs-2) * -1);
273
- --bh-button-icon-size: var(--bh-space-4xl-20);
271
+ --bh-button-icon-size: var(--bh-icon-size-default);
272
+ --bh-button-icon-slot-size: var(--bh-icon-slot-size-default);
274
273
  --bh-button-label-padding-x: var(--bh-space-xs-4);
275
274
  --bh-button-lg-height: var(--bh-space-8xl-48);
276
275
  --bh-button-lg-padding-x: var(--bh-space-xl-12);
@@ -345,48 +344,48 @@
345
344
  --bh-checkbox-indeterminate-height: var(--bh-space-xxs-2);
346
345
  --bh-checkbox-indeterminate-width: var(--bh-space-md-8);
347
346
  --bh-checkbox-root-size: var(--bh-space-4xl-20);
348
- --bh-colors-brand-border-border-strong: var(--bh-blue-600);
349
- --bh-colors-brand-border-border-strong-dark: var(--bh-blue-500);
350
- --bh-colors-brand-border-border-subtle: var(--bh-blue-300);
351
- --bh-colors-brand-border-border-subtle-dark: var(--bh-blue-800);
352
- --bh-colors-brand-checkbox-bg-default: var(--bh-blue-600);
353
- --bh-colors-brand-checkbox-bg-default-dark: var(--bh-blue-500);
354
- --bh-colors-brand-checkbox-bg-hover: var(--bh-blue-600);
355
- --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-blue-600);
356
- --bh-colors-brand-color-on-brand-dark: var(--bh-base-white);
347
+ --bh-colors-brand-border-border-strong: var(--bh-gray-950);
348
+ --bh-colors-brand-border-border-strong-dark: var(--bh-gray-dark-950);
349
+ --bh-colors-brand-border-border-subtle: var(--bh-gray-500);
350
+ --bh-colors-brand-border-border-subtle-dark: var(--bh-gray-dark-500);
351
+ --bh-colors-brand-checkbox-bg-default: var(--bh-gray-950);
352
+ --bh-colors-brand-checkbox-bg-default-dark: var(--bh-gray-50);
353
+ --bh-colors-brand-checkbox-bg-hover: var(--bh-gray-950);
354
+ --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-gray-100);
355
+ --bh-colors-brand-color-on-brand-dark: var(--bh-gray-dark-50);
357
356
  --bh-colors-brand-color-on-brand-light: var(--bh-base-white);
358
- --bh-colors-brand-content-dark: var(--bh-blue-500);
359
- --bh-colors-brand-content-light: var(--bh-blue-600);
360
- --bh-colors-brand-content-strong-dark: var(--bh-blue-400);
361
- --bh-colors-brand-content-strong-light: var(--bh-blue-700);
362
- --bh-colors-brand-focused-dark: var(--bh-blue-300);
363
- --bh-colors-brand-focused-light: var(--bh-blue-500);
364
- --bh-colors-brand-indicator: var(--bh-blue-500);
365
- --bh-colors-brand-indicator-dark: var(--bh-blue-600);
366
- --bh-colors-brand-interactive-default: var(--bh-derived-blue-550-reviewed);
367
- --bh-colors-brand-interactive-default-dark: var(--bh-blue-600);
368
- --bh-colors-brand-interactive-hover: var(--bh-blue-600);
369
- --bh-colors-brand-interactive-hover-dark: var(--bh-derived-blue-550-reviewed);
370
- --bh-colors-brand-interactive-pressed: var(--bh-blue-700);
371
- --bh-colors-brand-interactive-pressed-dark: var(--bh-blue-600);
372
- --bh-colors-brand-link-dark: var(--bh-blue-500);
373
- --bh-colors-brand-link-hover-dark: var(--bh-blue-400);
374
- --bh-colors-brand-link-hover-light: var(--bh-blue-700);
375
- --bh-colors-brand-link-light: var(--bh-blue-600);
376
- --bh-colors-brand-radiobutton-bg-default: var(--bh-blue-600);
377
- --bh-colors-brand-radiobutton-bg-default-dark: var(--bh-blue-500);
378
- --bh-colors-brand-radiobutton-bg-hover: var(--bh-blue-600);
379
- --bh-colors-brand-radiobutton-bg-hover-dark: var(--bh-blue-600);
380
- --bh-colors-brand-surface-base: var(--bh-blue-500);
381
- --bh-colors-brand-surface-base-dark: var(--bh-blue-600);
382
- --bh-colors-brand-surface-bold-dark: var(--bh-blue-700);
383
- --bh-colors-brand-surface-bold-light: var(--bh-blue-600);
384
- --bh-colors-brand-surface-soft-dark: var(--bh-blue-800);
385
- --bh-colors-brand-surface-soft-light: var(--bh-blue-100);
386
- --bh-colors-brand-surface-strong-dark: var(--bh-blue-800);
387
- --bh-colors-brand-surface-strong-light: var(--bh-blue-700);
388
- --bh-colors-brand-surface-subtle-dark: var(--bh-blue-alpha10);
389
- --bh-colors-brand-surface-subtle-light: var(--bh-blue-50);
357
+ --bh-colors-brand-content-dark: var(--bh-base-white);
358
+ --bh-colors-brand-content-light: var(--bh-gray-950);
359
+ --bh-colors-brand-content-strong-dark: var(--bh-base-white);
360
+ --bh-colors-brand-content-strong-light: var(--bh-gray-950);
361
+ --bh-colors-brand-focused-dark: var(--bh-base-white);
362
+ --bh-colors-brand-focused-light: var(--bh-gray-950);
363
+ --bh-colors-brand-indicator: var(--bh-gray-950);
364
+ --bh-colors-brand-indicator-dark: var(--bh-gray-dark-950);
365
+ --bh-colors-brand-interactive-default: var(--bh-gray-950);
366
+ --bh-colors-brand-interactive-default-dark: var(--bh-gray-dark-950);
367
+ --bh-colors-brand-interactive-hover: var(--bh-gray-900);
368
+ --bh-colors-brand-interactive-hover-dark: var(--bh-gray-dark-900);
369
+ --bh-colors-brand-interactive-pressed: var(--bh-gray-950);
370
+ --bh-colors-brand-interactive-pressed-dark: var(--bh-gray-dark-950);
371
+ --bh-colors-brand-link-dark: var(--bh-base-white);
372
+ --bh-colors-brand-link-hover-dark: var(--bh-gray-200);
373
+ --bh-colors-brand-link-hover-light: var(--bh-gray-900);
374
+ --bh-colors-brand-link-light: var(--bh-gray-950);
375
+ --bh-colors-brand-radiobutton-bg-default: var(--bh-gray-950);
376
+ --bh-colors-brand-radiobutton-bg-default-dark: var(--bh-gray-50);
377
+ --bh-colors-brand-radiobutton-bg-hover: var(--bh-gray-950);
378
+ --bh-colors-brand-radiobutton-bg-hover-dark: var(--bh-gray-500);
379
+ --bh-colors-brand-surface-base: var(--bh-gray-950);
380
+ --bh-colors-brand-surface-base-dark: var(--bh-base-white);
381
+ --bh-colors-brand-surface-bold-dark: var(--bh-gray-dark-900);
382
+ --bh-colors-brand-surface-bold-light: var(--bh-gray-800);
383
+ --bh-colors-brand-surface-soft-dark: var(--bh-gray-dark-alpha-300);
384
+ --bh-colors-brand-surface-soft-light: var(--bh-gray-300);
385
+ --bh-colors-brand-surface-strong-dark: var(--bh-gray-dark-800);
386
+ --bh-colors-brand-surface-strong-light: var(--bh-gray-900);
387
+ --bh-colors-brand-surface-subtle-dark: var(--bh-gray-dark-alpha-200);
388
+ --bh-colors-brand-surface-subtle-light: var(--bh-gray-200);
390
389
  --bh-colors-neutral-100: var(--bh-gray-100);
391
390
  --bh-colors-neutral-200: var(--bh-gray-200);
392
391
  --bh-colors-neutral-300: var(--bh-gray-300);
@@ -479,7 +478,8 @@
479
478
  --bh-date-month-year-list-width: var(--bh-date-range-month-width);
480
479
  --bh-date-month-year-spacer-height: 252px;
481
480
  --bh-date-nav-button-size: var(--bh-button-xs-height);
482
- --bh-date-nav-icon-size: var(--bh-button-icon-size);
481
+ --bh-date-nav-icon-size: var(--bh-icon-size-default);
482
+ --bh-date-nav-icon-slot-size: var(--bh-icon-slot-size-default);
483
483
  --bh-date-picker-width: var(--bh-date-trigger-width);
484
484
  --bh-date-presets-width: 144px;
485
485
  --bh-date-range-month-width: var(--bh-space-15xl-224);
@@ -490,9 +490,9 @@
490
490
  --bh-date-title-chevron-size: var(--bh-space-3xl-16);
491
491
  --bh-date-title-height: var(--bh-button-xs-height);
492
492
  --bh-date-trigger-height: var(--bh-button-md-height);
493
- --bh-date-trigger-icon-size: var(--bh-button-icon-size);
493
+ --bh-date-trigger-icon-size: var(--bh-icon-size-default);
494
+ --bh-date-trigger-icon-slot-size: var(--bh-icon-slot-size-default);
494
495
  --bh-date-trigger-width: 260px;
495
- --bh-derived-blue-550-reviewed: #2B6BED;
496
496
  --bh-duration-accordion: 180ms;
497
497
  --bh-duration-default: 200ms;
498
498
  --bh-duration-fast: 160ms;
@@ -593,6 +593,9 @@
593
593
  --bh-icon-explorer-swatch-width: 150px;
594
594
  --bh-icon-explorer-topbar-bg: color-mix(in srgb, var(--bh-bg-grouped) 92%, transparent);
595
595
  --bh-icon-explorer-topbar-min-height: 74px;
596
+ --bh-icon-size-default: 18px;
597
+ --bh-icon-slot-inset-default: calc((var(--bh-icon-slot-size-default) - var(--bh-icon-size-default)) / 2);
598
+ --bh-icon-slot-size-default: var(--bh-space-4xl-20);
596
599
  --bh-icon-stroke-180: 1.8;
597
600
  --bh-icon-stroke-190: 1.9;
598
601
  --bh-icon-stroke-200: 2;
@@ -615,6 +618,7 @@
615
618
  --bh-input-content-gap: var(--bh-space-sm-6);
616
619
  --bh-input-helper-gap: var(--bh-space-sm-6);
617
620
  --bh-input-icon-size: var(--bh-space-3xl-16);
621
+ --bh-input-icon-slot-size: var(--bh-space-4xl-20);
618
622
  --bh-input-info-icon-size: 13.333px;
619
623
  --bh-input-inline-gap: var(--bh-space-xs-4);
620
624
  --bh-input-inline-tags-gap: var(--bh-space-sm-6);
@@ -696,7 +700,8 @@
696
700
  --bh-item-content-gap: var(--bh-space-xxs-2);
697
701
  --bh-item-gap: var(--bh-space-xl-12);
698
702
  --bh-item-group-gap: var(--bh-space-xs-4);
699
- --bh-item-icon-size: var(--bh-space-4xl-20);
703
+ --bh-item-icon-size: var(--bh-icon-size-default);
704
+ --bh-item-icon-slot-size: var(--bh-icon-slot-size-default);
700
705
  --bh-item-media-radius: var(--bh-radius-lg-8);
701
706
  --bh-item-media-size: var(--bh-space-7xl-40);
702
707
  --bh-item-min-height-lg: var(--bh-space-11xl-96);
@@ -741,7 +746,8 @@
741
746
  --bh-menu-item-radius: var(--bh-radius-md-6);
742
747
  --bh-menu-item-slot-gap: var(--bh-space-md-8);
743
748
  --bh-menu-label-padding-x: var(--bh-space-3xl-16);
744
- --bh-menu-leading-icon-size: var(--bh-space-4xl-20);
749
+ --bh-menu-leading-icon-size: var(--bh-icon-size-default);
750
+ --bh-menu-leading-icon-slot-size: var(--bh-icon-slot-size-default);
745
751
  --bh-menu-padding-y: var(--bh-space-sm-6);
746
752
  --bh-menu-progress-gap: var(--bh-space-md-8);
747
753
  --bh-menu-progress-height: var(--bh-space-md-8);
@@ -801,7 +807,8 @@
801
807
  --bh-pagination-control-text-rtl-gap: var(--bh-space-xxs-2);
802
808
  --bh-pagination-control-text-rtl-padding-x: var(--bh-space-sm-6);
803
809
  --bh-pagination-font-size: var(--bh-text-body-md-medium-font-size);
804
- --bh-pagination-icon-size: var(--bh-space-4xl-20);
810
+ --bh-pagination-icon-size: var(--bh-icon-size-default);
811
+ --bh-pagination-icon-slot-size: var(--bh-icon-slot-size-default);
805
812
  --bh-pagination-item-size: var(--bh-space-6xl-32);
806
813
  --bh-pagination-label-font-weight: var(--bh-text-body-md-medium-font-weight);
807
814
  --bh-pagination-letter-spacing: var(--bh-text-body-md-medium-letter-spacing);
@@ -948,22 +955,35 @@
948
955
  --bh-select-trigger-radius: var(--bh-radius-lg-8);
949
956
  --bh-select-value-padding-inline: var(--bh-space-xs-4);
950
957
  --bh-select-width: var(--bh-space-18xl-320);
951
- --bh-sidebar-bg: var(--bh-bg-raised);
958
+ --bh-sidebar-active-guide-height: 15px;
959
+ --bh-sidebar-bg: var(--bh-bg-default);
952
960
  --bh-sidebar-bg-collapsed: var(--bh-bg-default);
953
961
  --bh-sidebar-border: var(--bh-border-subtle);
954
- --bh-sidebar-icon-size: var(--bh-space-5xl-24);
962
+ --bh-sidebar-brand-height: 38px;
963
+ --bh-sidebar-compact-control-size: 36px;
964
+ --bh-sidebar-header-action-size: 28px;
965
+ --bh-sidebar-icon-size: var(--bh-icon-size-default);
966
+ --bh-sidebar-icon-size-collapsed: var(--bh-icon-size-default);
967
+ --bh-sidebar-icon-slot-size: var(--bh-icon-slot-size-default);
955
968
  --bh-sidebar-item-bg-active: var(--bh-interactive-soft-default);
956
969
  --bh-sidebar-item-bg-hover: var(--bh-interactive-ghost-hover);
957
970
  --bh-sidebar-item-content: var(--bh-content-subtle);
958
971
  --bh-sidebar-item-content-active: var(--bh-content-default);
959
972
  --bh-sidebar-item-gap: var(--bh-space-md-8);
960
- --bh-sidebar-item-height: var(--bh-space-7xl-40);
961
- --bh-sidebar-item-padding-x: var(--bh-space-xl-12);
962
- --bh-sidebar-padding: var(--bh-space-3xl-16);
973
+ --bh-sidebar-item-height: var(--bh-space-6xl-32);
974
+ --bh-sidebar-item-height-collapsed: var(--bh-space-7xl-40);
975
+ --bh-sidebar-item-padding-x: var(--bh-space-sm-6);
976
+ --bh-sidebar-level-2-indent-width: 44px;
977
+ --bh-sidebar-padding: var(--bh-space-lg-10);
963
978
  --bh-sidebar-rail-width: 16px;
964
979
  --bh-sidebar-section-gap: var(--bh-space-3xl-16);
980
+ --bh-sidebar-tree-indent-step: 22px;
981
+ --bh-sidebar-tree-item-height: 28px;
965
982
  --bh-sidebar-width: 280px;
966
- --bh-sidebar-width-collapsed: 72px;
983
+ --bh-sidebar-width-collapsed: 48px;
984
+ --bh-sidebar-workspace-card-height: 50px;
985
+ --bh-sidebar-workspace-trigger-max-width: 148px;
986
+ --bh-sidebar-workspace-trigger-width: 143px;
967
987
  --bh-skeleton-duration: 1.4s;
968
988
  --bh-skeleton-shimmer-width: 62%;
969
989
  --bh-skeleton-width: 100%;
@@ -1363,6 +1383,8 @@
1363
1383
  --secondary-foreground: var(--bh-content-default);
1364
1384
  --secondary-hover: var(--bh-interactive-secondary-hover);
1365
1385
  --secondary-pressed: var(--bh-interactive-secondary-pressed);
1386
+ --shadow-2xl: 0px 0px 0px 1px rgb(0 0 0 / 0.06), 0px 1px 1px -0.5px rgb(0 0 0 / 0.06), 0px 3px 3px -1.5px rgb(0 0 0 / 0.06), 0px 6px 6px -3px rgb(0 0 0 / 0.06), 0px 12px 12px -6px rgb(0 0 0 / 0.06), 0px 24px 24px -12px rgb(0 0 0 / 0.06), inset 0px 1px 0px 0px rgb(255 255 255 / 0), inset 0px 0px 0px 1px rgb(255 255 255 / 0);
1387
+ --shadow-3xl: 0px 0px 0px 1px rgb(0 0 0 / 0.06), 0px 1px 1px -0.5px rgb(0 0 0 / 0.06), 0px 3px 3px -1.5px rgb(0 0 0 / 0.06), 0px 6px 6px -3px rgb(0 0 0 / 0.06), 0px 12px 12px -6px rgb(0 0 0 / 0.06), 0px 24px 24px -12px rgb(0 0 0 / 0.06), 0px 48px 48px -24px rgb(0 0 0 / 0.06), inset 0px 1px 0px 0px rgb(255 255 255 / 0), inset 0px 0px 0px 1px rgb(255 255 255 / 0);
1366
1388
  --shadow-accordion-item: none;
1367
1389
  --shadow-avatar-badge: none;
1368
1390
  --shadow-badge: none;
@@ -1396,8 +1418,8 @@
1396
1418
  --shadow-date-time-input: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-input);
1397
1419
  --shadow-input: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-input-border, var(--bh-border-input)), var(--shadow-component-default);
1398
1420
  --shadow-input-focus-ring: var(--shadow-component-focus-stroke);
1399
- --shadow-lg: 0px 10px 16px -3px rgb(15 17 20 / 0.06), 0px 4px 6px -2px rgb(15 17 20 / 0.04);
1400
- --shadow-md: 0px 1.75px 4px -1px rgb(15 17 20 / 0.1);
1421
+ --shadow-lg: 0px 0px 0px 1px rgb(0 0 0 / 0.06), 0px 1px 1px -0.5px rgb(0 0 0 / 0.06), 0px 3px 3px -1.5px rgb(0 0 0 / 0.06), 0px 6px 6px -3px rgb(0 0 0 / 0.06), inset 0px 1px 0px 0px rgb(255 255 255 / 0), inset 0px 0px 0px 1px rgb(255 255 255 / 0);
1422
+ --shadow-md: 0px 0px 0px 1px rgb(0 0 0 / 0.06), 0px 1px 1px -0.5px rgb(0 0 0 / 0.06), 0px 3px 3px -1.5px rgb(0 0 0 / 0.06), inset 0px 1px 0px 0px rgb(255 255 255 / 0), inset 0px 0px 0px 1px rgb(255 255 255 / 0);
1401
1423
  --shadow-menu: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-menu-border), var(--shadow-lg);
1402
1424
  --shadow-pagination-active: var(--shadow-button-raised);
1403
1425
  --shadow-pagination-control: var(--shadow-button-soft);
@@ -1417,13 +1439,13 @@
1417
1439
  --shadow-slider-thumb: var(--shadow-md);
1418
1440
  --shadow-slider-thumb-focus: var(--shadow-slider-thumb), var(--shadow-component-focus-ring);
1419
1441
  --shadow-slider-tooltip: var(--shadow-lg);
1420
- --shadow-sm: 0px 1px 3px 0px rgb(15 17 20 / 0.1);
1442
+ --shadow-sm: 0px 0px 0px 1px rgb(0 0 0 / 0.06), 0px 1px 1px -0.5px rgb(0 0 0 / 0.06), inset 0px 1px 0px 0px rgb(255 255 255 / 0), inset 0px 0px 0px 1px rgb(255 255 255 / 0);
1421
1443
  --shadow-social-button: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-social-button-border, transparent), var(--shadow-component-default);
1422
1444
  --shadow-social-button-focus: var(--shadow-social-button), var(--shadow-component-focus-ring);
1423
1445
  --shadow-social-button-focus-ring: var(--shadow-component-focus-ring);
1424
1446
  --shadow-textarea: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-textarea-border, var(--bh-border-input)), var(--shadow-component-default);
1425
- --shadow-xl: 0px 20px 25px -5px rgb(15 17 20 / 0.08), 0px 10px 10px -5px rgb(15 17 20 / 0.06);
1426
- --shadow-xs: 0px 1px 2px 0px rgb(15 17 20 / 0.06);
1447
+ --shadow-xl: 0px 0px 0px 1px rgb(0 0 0 / 0.06), 0px 1px 1px -0.5px rgb(0 0 0 / 0.06), 0px 3px 3px -1.5px rgb(0 0 0 / 0.06), 0px 6px 6px -3px rgb(0 0 0 / 0.06), 0px 12px 12px -6px rgb(0 0 0 / 0.06), inset 0px 1px 0px 0px rgb(255 255 255 / 0), inset 0px 0px 0px 1px rgb(255 255 255 / 0);
1448
+ --shadow-xs: 0px 0px 0px 1px rgb(0 0 0 / 0.06), inset 0px 0px 0px 1px rgb(255 255 255 / 0);
1427
1449
  --soft: var(--bh-interactive-soft-default);
1428
1450
  --soft-hover: var(--bh-interactive-soft-hover);
1429
1451
  --soft-pressed: var(--bh-interactive-soft-pressed);
@@ -1442,48 +1464,53 @@
1442
1464
 
1443
1465
  /* Banhaten brand theme light token modes: generated from tokens/banhaten.tokens.json. */
1444
1466
 
1445
- [data-theme="gray"] {
1446
- --bh-colors-brand-border-border-strong: var(--bh-gray-950);
1447
- --bh-colors-brand-border-border-strong-dark: var(--bh-gray-dark-950);
1448
- --bh-colors-brand-border-border-subtle: var(--bh-gray-500);
1449
- --bh-colors-brand-border-border-subtle-dark: var(--bh-gray-dark-500);
1450
- --bh-colors-brand-checkbox-bg-default: var(--bh-gray-950);
1451
- --bh-colors-brand-checkbox-bg-default-dark: var(--bh-gray-50);
1452
- --bh-colors-brand-checkbox-bg-hover: var(--bh-gray-950);
1453
- --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-gray-100);
1454
- --bh-colors-brand-color-on-brand-dark: var(--bh-gray-dark-50);
1455
- --bh-colors-brand-content-dark: var(--bh-base-white);
1456
- --bh-colors-brand-content-light: var(--bh-gray-950);
1457
- --bh-colors-brand-content-strong-dark: var(--bh-base-white);
1458
- --bh-colors-brand-content-strong-light: var(--bh-gray-950);
1459
- --bh-colors-brand-focused-dark: var(--bh-base-white);
1460
- --bh-colors-brand-focused-light: var(--bh-gray-950);
1461
- --bh-colors-brand-indicator: var(--bh-gray-950);
1462
- --bh-colors-brand-indicator-dark: var(--bh-gray-dark-950);
1463
- --bh-colors-brand-interactive-default: var(--bh-gray-950);
1464
- --bh-colors-brand-interactive-default-dark: var(--bh-gray-dark-950);
1465
- --bh-colors-brand-interactive-hover: var(--bh-gray-900);
1466
- --bh-colors-brand-interactive-hover-dark: var(--bh-gray-dark-900);
1467
- --bh-colors-brand-interactive-pressed: var(--bh-gray-950);
1468
- --bh-colors-brand-interactive-pressed-dark: var(--bh-gray-dark-950);
1469
- --bh-colors-brand-link-dark: var(--bh-base-white);
1470
- --bh-colors-brand-link-hover-dark: var(--bh-gray-200);
1471
- --bh-colors-brand-link-hover-light: var(--bh-gray-900);
1472
- --bh-colors-brand-link-light: var(--bh-gray-950);
1473
- --bh-colors-brand-radiobutton-bg-default: var(--bh-gray-950);
1474
- --bh-colors-brand-radiobutton-bg-default-dark: var(--bh-gray-50);
1475
- --bh-colors-brand-radiobutton-bg-hover: var(--bh-gray-950);
1476
- --bh-colors-brand-radiobutton-bg-hover-dark: var(--bh-gray-500);
1477
- --bh-colors-brand-surface-base: var(--bh-gray-950);
1478
- --bh-colors-brand-surface-base-dark: var(--bh-base-white);
1479
- --bh-colors-brand-surface-bold-dark: var(--bh-gray-dark-900);
1480
- --bh-colors-brand-surface-bold-light: var(--bh-gray-800);
1481
- --bh-colors-brand-surface-soft-dark: var(--bh-gray-dark-alpha-300);
1482
- --bh-colors-brand-surface-soft-light: var(--bh-gray-300);
1483
- --bh-colors-brand-surface-strong-dark: var(--bh-gray-dark-800);
1484
- --bh-colors-brand-surface-strong-light: var(--bh-gray-900);
1485
- --bh-colors-brand-surface-subtle-dark: var(--bh-gray-dark-alpha-200);
1486
- --bh-colors-brand-surface-subtle-light: var(--bh-gray-200);
1467
+ [data-theme="blue"] {
1468
+ --bh-blue-300: #8DBDFF;
1469
+ --bh-blue-400: #5B97FF;
1470
+ --bh-blue-800: #11318F;
1471
+ --bh-blue-alpha10: rgb(50 118 255 / 0.1);
1472
+ --bh-colors-brand-border-border-strong: var(--bh-blue-600);
1473
+ --bh-colors-brand-border-border-strong-dark: var(--bh-blue-500);
1474
+ --bh-colors-brand-border-border-subtle: var(--bh-blue-300);
1475
+ --bh-colors-brand-border-border-subtle-dark: var(--bh-blue-800);
1476
+ --bh-colors-brand-checkbox-bg-default: var(--bh-blue-600);
1477
+ --bh-colors-brand-checkbox-bg-default-dark: var(--bh-blue-500);
1478
+ --bh-colors-brand-checkbox-bg-hover: var(--bh-blue-600);
1479
+ --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-blue-600);
1480
+ --bh-colors-brand-color-on-brand-dark: var(--bh-base-white);
1481
+ --bh-colors-brand-content-dark: var(--bh-blue-500);
1482
+ --bh-colors-brand-content-light: var(--bh-blue-600);
1483
+ --bh-colors-brand-content-strong-dark: var(--bh-blue-400);
1484
+ --bh-colors-brand-content-strong-light: var(--bh-blue-700);
1485
+ --bh-colors-brand-focused-dark: var(--bh-blue-300);
1486
+ --bh-colors-brand-focused-light: var(--bh-blue-500);
1487
+ --bh-colors-brand-indicator: var(--bh-blue-500);
1488
+ --bh-colors-brand-indicator-dark: var(--bh-blue-600);
1489
+ --bh-colors-brand-interactive-default: var(--bh-derived-blue-550-reviewed);
1490
+ --bh-colors-brand-interactive-default-dark: var(--bh-blue-600);
1491
+ --bh-colors-brand-interactive-hover: var(--bh-blue-600);
1492
+ --bh-colors-brand-interactive-hover-dark: var(--bh-derived-blue-550-reviewed);
1493
+ --bh-colors-brand-interactive-pressed: var(--bh-blue-700);
1494
+ --bh-colors-brand-interactive-pressed-dark: var(--bh-blue-600);
1495
+ --bh-colors-brand-link-dark: var(--bh-blue-500);
1496
+ --bh-colors-brand-link-hover-dark: var(--bh-blue-400);
1497
+ --bh-colors-brand-link-hover-light: var(--bh-blue-700);
1498
+ --bh-colors-brand-link-light: var(--bh-blue-600);
1499
+ --bh-colors-brand-radiobutton-bg-default: var(--bh-blue-600);
1500
+ --bh-colors-brand-radiobutton-bg-default-dark: var(--bh-blue-500);
1501
+ --bh-colors-brand-radiobutton-bg-hover: var(--bh-blue-600);
1502
+ --bh-colors-brand-radiobutton-bg-hover-dark: var(--bh-blue-600);
1503
+ --bh-colors-brand-surface-base: var(--bh-blue-500);
1504
+ --bh-colors-brand-surface-base-dark: var(--bh-blue-600);
1505
+ --bh-colors-brand-surface-bold-dark: var(--bh-blue-700);
1506
+ --bh-colors-brand-surface-bold-light: var(--bh-blue-600);
1507
+ --bh-colors-brand-surface-soft-dark: var(--bh-blue-800);
1508
+ --bh-colors-brand-surface-soft-light: var(--bh-blue-100);
1509
+ --bh-colors-brand-surface-strong-dark: var(--bh-blue-800);
1510
+ --bh-colors-brand-surface-strong-light: var(--bh-blue-700);
1511
+ --bh-colors-brand-surface-subtle-dark: var(--bh-blue-alpha10);
1512
+ --bh-colors-brand-surface-subtle-light: var(--bh-blue-50);
1513
+ --bh-derived-blue-550-reviewed: #2B6BED;
1487
1514
  }
1488
1515
 
1489
1516
  [data-theme="brown"] {
@@ -1513,6 +1540,7 @@
1513
1540
  --bh-colors-brand-checkbox-bg-default-dark: var(--bh-amber-600);
1514
1541
  --bh-colors-brand-checkbox-bg-hover: var(--bh-amber-700);
1515
1542
  --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-amber-700);
1543
+ --bh-colors-brand-color-on-brand-dark: var(--bh-base-white);
1516
1544
  --bh-colors-brand-content-dark: var(--bh-amber-500);
1517
1545
  --bh-colors-brand-content-light: var(--bh-amber-700);
1518
1546
  --bh-colors-brand-content-strong-dark: var(--bh-amber-400);
@@ -1696,6 +1724,7 @@
1696
1724
  --bh-colors-brand-checkbox-bg-default-dark: var(--bh-derived-green-600-dark-reviewed);
1697
1725
  --bh-colors-brand-checkbox-bg-hover: var(--bh-emerald-800);
1698
1726
  --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-emerald-800);
1727
+ --bh-colors-brand-color-on-brand-dark: var(--bh-base-white);
1699
1728
  --bh-colors-brand-content-dark: var(--bh-emerald-500);
1700
1729
  --bh-colors-brand-content-light: var(--bh-emerald-700);
1701
1730
  --bh-colors-brand-content-strong-dark: var(--bh-emerald-400);
@@ -1818,6 +1847,7 @@
1818
1847
  --bh-colors-brand-checkbox-bg-default-dark: var(--bh-violet-600);
1819
1848
  --bh-colors-brand-checkbox-bg-hover: var(--bh-violet-800);
1820
1849
  --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-violet-700);
1850
+ --bh-colors-brand-color-on-brand-dark: var(--bh-base-white);
1821
1851
  --bh-colors-brand-content-dark: var(--bh-violet-500);
1822
1852
  --bh-colors-brand-content-light: var(--bh-violet-700);
1823
1853
  --bh-colors-brand-content-strong-dark: var(--bh-violet-400);
@@ -1939,6 +1969,7 @@
1939
1969
  --bh-colors-brand-checkbox-bg-default-dark: var(--bh-derived-teal-600-dark-reviewed);
1940
1970
  --bh-colors-brand-checkbox-bg-hover: var(--bh-teal-800);
1941
1971
  --bh-colors-brand-checkbox-bg-hover-dark: var(--bh-teal-800);
1972
+ --bh-colors-brand-color-on-brand-dark: var(--bh-base-white);
1942
1973
  --bh-colors-brand-content-dark: var(--bh-teal-500);
1943
1974
  --bh-colors-brand-content-light: var(--bh-teal-700);
1944
1975
  --bh-colors-brand-content-strong-dark: var(--bh-teal-300);
@@ -2054,8 +2085,8 @@
2054
2085
  /* End Banhaten brand theme light token modes. */
2055
2086
 
2056
2087
  .dark,
2057
- .dark[data-theme="blue"],
2058
- .dark [data-theme="blue"] {
2088
+ .dark[data-theme="gray"],
2089
+ .dark [data-theme="gray"] {
2059
2090
  --accent: var(--bh-interactive-ghost-hover);
2060
2091
  --accent-foreground: var(--bh-content-default);
2061
2092
  --accent-hover: var(--bh-interactive-ghost-pressed);
@@ -2363,7 +2394,8 @@
2363
2394
  --bh-pagination-control-text-rtl-gap: var(--bh-space-xxs-2);
2364
2395
  --bh-pagination-control-text-rtl-padding-x: var(--bh-space-sm-6);
2365
2396
  --bh-pagination-font-size: var(--bh-text-body-md-medium-font-size);
2366
- --bh-pagination-icon-size: var(--bh-space-4xl-20);
2397
+ --bh-pagination-icon-size: var(--bh-icon-size-default);
2398
+ --bh-pagination-icon-slot-size: var(--bh-icon-slot-size-default);
2367
2399
  --bh-pagination-item-size: var(--bh-space-6xl-32);
2368
2400
  --bh-pagination-label-font-weight: var(--bh-text-body-md-medium-font-weight);
2369
2401
  --bh-pagination-letter-spacing: var(--bh-text-body-md-medium-letter-spacing);
@@ -2489,6 +2521,8 @@
2489
2521
  --secondary-foreground: var(--bh-content-default);
2490
2522
  --secondary-hover: var(--bh-interactive-secondary-hover);
2491
2523
  --secondary-pressed: var(--bh-interactive-secondary-pressed);
2524
+ --shadow-2xl: 0px 0px 0px 1px rgb(0 0 0 / 0.16), 0px 1px 1px -0.5px rgb(0 0 0 / 0.18), 0px 3px 3px -1.5px rgb(0 0 0 / 0.18), 0px 6px 6px -3px rgb(0 0 0 / 0.18), 0px 12px 12px -6px rgb(0 0 0 / 0.18), 0px 24px 24px -12px rgb(0 0 0 / 0.18), inset 0px 1px 0px 0px rgb(255 255 255 / 0.08), inset 0px 0px 0px 1px rgb(255 255 255 / 0.06);
2525
+ --shadow-3xl: 0px 0px 0px 1px rgb(0 0 0 / 0.2), 0px 1px 1px -0.5px rgb(0 0 0 / 0.18), 0px 3px 3px -1.5px rgb(0 0 0 / 0.18), 0px 6px 6px -3px rgb(0 0 0 / 0.18), 0px 12px 12px -6px rgb(0 0 0 / 0.18), 0px 24px 24px -12px rgb(0 0 0 / 0.18), 0px 48px 48px -24px rgb(0 0 0 / 0.18), inset 0px 1px 0px 0px rgb(255 255 255 / 0.11), inset 0px 0px 0px 1px rgb(255 255 255 / 0.06);
2492
2526
  --shadow-button-danger-focus: var(--shadow-component-danger-focus-ring);
2493
2527
  --shadow-button-focus: var(--shadow-component-focus-ring);
2494
2528
  --shadow-button-group: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-button-group-border), var(--shadow-component-default);
@@ -2510,8 +2544,8 @@
2510
2544
  --shadow-date-surface: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-date-surface-border, var(--bh-border-subtle)), var(--shadow-lg);
2511
2545
  --shadow-input: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-input-border, var(--bh-border-input)), var(--shadow-component-default);
2512
2546
  --shadow-input-focus-ring: var(--shadow-component-focus-stroke);
2513
- --shadow-lg: 0px 10px 16px -3px rgb(15 17 20 / 0.06), 0px 4px 6px -2px rgb(15 17 20 / 0.04);
2514
- --shadow-md: 0px 1.75px 4px -1px rgb(15 17 20 / 0.1);
2547
+ --shadow-lg: 0px 0px 0px 1px rgb(0 0 0 / 0.16), 0px 1px 1px -0.5px rgb(0 0 0 / 0.18), 0px 3px 3px -1.5px rgb(0 0 0 / 0.18), 0px 6px 6px -3px rgb(0 0 0 / 0.18), inset 0px 1px 0px 0px rgb(255 255 255 / 0.06), inset 0px 0px 0px 1px rgb(255 255 255 / 0.04);
2548
+ --shadow-md: 0px 0px 0px 1px rgb(0 0 0 / 0.16), 0px 1px 1px -0.5px rgb(0 0 0 / 0.18), 0px 3px 3px -1.5px rgb(0 0 0 / 0.18), inset 0px 1px 0px 0px rgb(255 255 255 / 0.06), inset 0px 0px 0px 1px rgb(255 255 255 / 0.04);
2515
2549
  --shadow-menu: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-menu-border), var(--shadow-lg);
2516
2550
  --shadow-progress-slider-thumb-focus: var(--shadow-component-focus-ring);
2517
2551
  --shadow-radio-card: inset 0px 0px 0px var(--bh-radio-card-border-width, var(--bh-border-width-default)) var(--bh-radio-card-border, var(--bh-border-default)), var(--shadow-radio-card-surface);
@@ -2524,13 +2558,13 @@
2524
2558
  --shadow-select-trigger: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-select-trigger-border-current, var(--bh-select-trigger-border)), var(--shadow-component-default);
2525
2559
  --shadow-slider-thumb-focus: var(--shadow-slider-thumb), var(--shadow-component-focus-ring);
2526
2560
  --shadow-slider-tooltip: var(--shadow-lg);
2527
- --shadow-sm: 0px 1px 3px 0px rgb(15 17 20 / 0.1);
2561
+ --shadow-sm: 0px 0px 0px 1px rgb(0 0 0 / 0), 0px 1px 1px -0.5px rgb(0 0 0 / 0.18), inset 0px 1px 0px 0px rgb(255 255 255 / 0.04), inset 0px 0px 0px 1px rgb(255 255 255 / 0.04);
2528
2562
  --shadow-social-button: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-social-button-border, transparent), var(--shadow-component-default);
2529
2563
  --shadow-social-button-focus: var(--shadow-social-button), var(--shadow-component-focus-ring);
2530
2564
  --shadow-social-button-focus-ring: var(--shadow-component-focus-ring);
2531
2565
  --shadow-textarea: inset 0px 0px 0px var(--bh-border-width-default) var(--bh-textarea-border, var(--bh-border-input)), var(--shadow-component-default);
2532
- --shadow-xl: 0px 20px 25px -5px rgb(15 17 20 / 0.08), 0px 10px 10px -5px rgb(15 17 20 / 0.06);
2533
- --shadow-xs: 0px 1px 2px 0px rgb(15 17 20 / 0.06);
2566
+ --shadow-xl: 0px 0px 0px 1px rgb(0 0 0 / 0.16), 0px 1px 1px -0.5px rgb(0 0 0 / 0.18), 0px 3px 3px -1.5px rgb(0 0 0 / 0.18), 0px 6px 6px -3px rgb(0 0 0 / 0.18), 0px 12px 12px -6px rgb(0 0 0 / 0.18), inset 0px 1px 0px 0px rgb(255 255 255 / 0.08), inset 0px 0px 0px 1px rgb(255 255 255 / 0.04);
2567
+ --shadow-xs: 0px 0px 0px 1px rgb(0 0 0 / 0), inset 0px 0px 0px 1px rgb(255 255 255 / 0.04);
2534
2568
  --soft: var(--bh-interactive-soft-default);
2535
2569
  --soft-hover: var(--bh-interactive-soft-hover);
2536
2570
  --soft-pressed: var(--bh-interactive-soft-pressed);
package/registry.json CHANGED
@@ -771,7 +771,7 @@
771
771
  "name": "kbd",
772
772
  "type": "registry:component",
773
773
  "title": "Kbd",
774
- "description": "Keyboard key and platform-aware shortcut primitives for search fields, command rows, and help text with shared tokenized surfaces.",
774
+ "description": "Keyboard key and platform-aware shortcut primitives: physical keycaps, separated chords, and compact combined hints for inputs and command rows.",
775
775
  "author": "Ahmad Galal",
776
776
  "registryDependencies": [
777
777
  "base"
@@ -925,10 +925,11 @@
925
925
  "name": "sidebar",
926
926
  "type": "registry:component",
927
927
  "title": "Sidebar",
928
- "description": "Composable app sidebar with controlled or uncontrolled collapse state, grouped menu items, logical start/end placement, RTL mirroring, and generated sidebar tokens.",
928
+ "description": "Figma-aligned application sidebar with 280px expanded and 48px collapsed shells, brand and workspace headers, search and actions, default/avatar/nested/tree menu variants, badges, group actions, user footers, controlled state, tooltips, logical placement, and RTL mirroring.",
929
929
  "author": "Ahmad Galal",
930
930
  "registryDependencies": [
931
- "base"
931
+ "base",
932
+ "tooltip"
932
933
  ],
933
934
  "dependencies": [
934
935
  "@radix-ui/react-slot@^1.2.3",