banhaten 0.5.0 → 0.6.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 (290) hide show
  1. package/CHANGELOG.md +177 -139
  2. package/CONTRIBUTING.md +46 -46
  3. package/README.md +192 -192
  4. package/SECURITY.md +15 -15
  5. package/banhaten.config.example.json +11 -11
  6. package/docs/design-spacing.md +13 -13
  7. package/docs/design-system/README.md +22 -22
  8. package/docs/design-system/adoption-quality-remediation.md +87 -87
  9. package/docs/design-system/agent-usage.md +13 -13
  10. package/docs/design-system/appearance-presets.md +189 -189
  11. package/docs/design-system/appearances/default.md +94 -94
  12. package/docs/design-system/appearances/rounded.md +95 -95
  13. package/docs/design-system/appearances/sharp.md +95 -95
  14. package/docs/design-system/component-docs-pattern.md +81 -81
  15. package/docs/design-system/component-implementation-ownership-audit.md +245 -245
  16. package/docs/design-system/component-quality-audit-2026-08-20.md +225 -225
  17. package/docs/design-system/component-showcase-consistency-report.md +219 -219
  18. package/docs/design-system/component-token-consistency-audit.md +173 -173
  19. package/docs/design-system/components/README.md +91 -90
  20. package/docs/design-system/components/accordion.md +52 -52
  21. package/docs/design-system/components/activity-feed.md +93 -93
  22. package/docs/design-system/components/activity-heatmap.md +56 -56
  23. package/docs/design-system/components/alert-dialog.md +71 -71
  24. package/docs/design-system/components/alert.md +103 -97
  25. package/docs/design-system/components/app-header.md +97 -0
  26. package/docs/design-system/components/aspect-ratio.md +45 -45
  27. package/docs/design-system/components/attribute.md +101 -89
  28. package/docs/design-system/components/autocomplete.md +75 -75
  29. package/docs/design-system/components/avatar.md +53 -53
  30. package/docs/design-system/components/badge.md +55 -55
  31. package/docs/design-system/components/banner.md +86 -86
  32. package/docs/design-system/components/breadcrumbs.md +181 -177
  33. package/docs/design-system/components/button-group.md +97 -97
  34. package/docs/design-system/components/button.md +80 -80
  35. package/docs/design-system/components/card.md +102 -88
  36. package/docs/design-system/components/carousel.md +46 -46
  37. package/docs/design-system/components/catalog-components.md +46 -46
  38. package/docs/design-system/components/checkbox.md +53 -53
  39. package/docs/design-system/components/collapsible.md +63 -63
  40. package/docs/design-system/components/command.md +61 -61
  41. package/docs/design-system/components/context-menu.md +45 -45
  42. package/docs/design-system/components/date-picker.md +80 -80
  43. package/docs/design-system/components/divider.md +102 -102
  44. package/docs/design-system/components/empty-state.md +56 -56
  45. package/docs/design-system/components/field.md +70 -70
  46. package/docs/design-system/components/file-upload.md +186 -186
  47. package/docs/design-system/components/hover-card.md +47 -47
  48. package/docs/design-system/components/icons.md +48 -48
  49. package/docs/design-system/components/input-group.md +57 -57
  50. package/docs/design-system/components/input-otp.md +56 -56
  51. package/docs/design-system/components/input.md +111 -109
  52. package/docs/design-system/components/item.md +58 -58
  53. package/docs/design-system/components/kbd.md +49 -49
  54. package/docs/design-system/components/label.md +49 -49
  55. package/docs/design-system/components/menu.md +94 -73
  56. package/docs/design-system/components/menubar.md +46 -46
  57. package/docs/design-system/components/modal.md +104 -104
  58. package/docs/design-system/components/native-select.md +53 -53
  59. package/docs/design-system/components/navigation-menu.md +49 -49
  60. package/docs/design-system/components/onboarding-step-list-item.md +81 -81
  61. package/docs/design-system/components/page-header.md +127 -93
  62. package/docs/design-system/components/pagination.md +56 -56
  63. package/docs/design-system/components/popover.md +59 -59
  64. package/docs/design-system/components/progress-slider.md +49 -49
  65. package/docs/design-system/components/progress.md +76 -76
  66. package/docs/design-system/components/radio-card.md +50 -50
  67. package/docs/design-system/components/radio-group.md +56 -56
  68. package/docs/design-system/components/resizable.md +43 -43
  69. package/docs/design-system/components/scroll-area.md +50 -50
  70. package/docs/design-system/components/segmented-control.md +54 -54
  71. package/docs/design-system/components/select.md +68 -64
  72. package/docs/design-system/components/sheet.md +66 -66
  73. package/docs/design-system/components/sidebar.md +167 -111
  74. package/docs/design-system/components/skeleton.md +74 -74
  75. package/docs/design-system/components/slideout.md +64 -64
  76. package/docs/design-system/components/slider.md +62 -62
  77. package/docs/design-system/components/social-button.md +49 -49
  78. package/docs/design-system/components/spinner.md +62 -62
  79. package/docs/design-system/components/steps.md +65 -65
  80. package/docs/design-system/components/table.md +499 -422
  81. package/docs/design-system/components/tabs.md +74 -59
  82. package/docs/design-system/components/tag.md +79 -79
  83. package/docs/design-system/components/textarea.md +49 -49
  84. package/docs/design-system/components/timeline.md +82 -82
  85. package/docs/design-system/components/toast.md +57 -57
  86. package/docs/design-system/components/toggle.md +80 -80
  87. package/docs/design-system/components/toolbar.md +89 -89
  88. package/docs/design-system/components/tooltip.md +92 -92
  89. package/docs/design-system/components/typography.md +18 -18
  90. package/docs/design-system/density-and-elevation.md +65 -65
  91. package/docs/design-system/design-system-test-missing-items.md +368 -368
  92. package/docs/design-system/direction-and-localization.md +23 -23
  93. package/docs/design-system/form-recipes.md +73 -73
  94. package/docs/design-system/gap-promotion-policy.md +21 -21
  95. package/docs/design-system/icons.md +74 -74
  96. package/docs/design-system/installation.md +70 -70
  97. package/docs/design-system/launch-comparison-shadcn.md +98 -98
  98. package/docs/design-system/registry-and-cli.md +64 -64
  99. package/docs/design-system/release-policy.md +30 -30
  100. package/docs/design-system/roadmap.md +14 -14
  101. package/docs/design-system/support-matrix.md +23 -23
  102. package/docs/design-system/tabs.md +54 -54
  103. package/docs/design-system/template-gap-audit.md +32 -32
  104. package/docs/design-system/templates.md +59 -59
  105. package/docs/design-system/token-governance.md +72 -72
  106. package/package.json +98 -98
  107. package/registry/component-contract.json +40 -40
  108. package/registry/components/accordion.tsx +155 -155
  109. package/registry/components/alert-dialog.tsx +297 -297
  110. package/registry/components/alert.tsx +309 -293
  111. package/registry/components/app-header.tsx +151 -0
  112. package/registry/components/aspect-ratio.tsx +30 -30
  113. package/registry/components/attribute.tsx +489 -454
  114. package/registry/components/autocomplete.tsx +598 -598
  115. package/registry/components/avatar.tsx +385 -385
  116. package/registry/components/badge.tsx +630 -629
  117. package/registry/components/button-group.tsx +565 -565
  118. package/registry/components/button.tsx +128 -127
  119. package/registry/components/card.tsx +651 -638
  120. package/registry/components/carousel.tsx +296 -296
  121. package/registry/components/chart.tsx +203 -203
  122. package/registry/components/checkbox.tsx +247 -247
  123. package/registry/components/collapsible.tsx +109 -109
  124. package/registry/components/command.tsx +208 -208
  125. package/registry/components/context-menu.tsx +236 -236
  126. package/registry/components/date-picker.tsx +1289 -1289
  127. package/registry/components/expanded/ActivityFeed.tsx +227 -227
  128. package/registry/components/expanded/ActivityHeatmap.tsx +64 -64
  129. package/registry/components/expanded/Banner.tsx +179 -179
  130. package/registry/components/expanded/Breadcrumbs.tsx +135 -131
  131. package/registry/components/expanded/CatalogComponentsShowcase.tsx +205 -205
  132. package/registry/components/expanded/CatalogDivider.tsx +49 -49
  133. package/registry/components/expanded/EmptyState.tsx +155 -155
  134. package/registry/components/expanded/FileUpload.tsx +543 -543
  135. package/registry/components/expanded/OnboardingStepListItem.tsx +60 -60
  136. package/registry/components/expanded/PageHeader.tsx +209 -179
  137. package/registry/components/expanded/Slideout.tsx +108 -108
  138. package/registry/components/expanded/Steps.tsx +402 -402
  139. package/registry/components/expanded/Table.tsx +1109 -1092
  140. package/registry/components/expanded/Timeline.tsx +203 -203
  141. package/registry/components/expanded/activityFeed.css +248 -248
  142. package/registry/components/expanded/activityHeatmap.css +66 -66
  143. package/registry/components/expanded/banner.css +260 -260
  144. package/registry/components/expanded/breadcrumbs.css +157 -140
  145. package/registry/components/expanded/catalogComponentsShowcase.css +87 -87
  146. package/registry/components/expanded/divider.css +75 -75
  147. package/registry/components/expanded/emptyState.css +111 -111
  148. package/registry/components/expanded/fileUpload.css +457 -457
  149. package/registry/components/expanded/onboardingStepListItem.css +135 -135
  150. package/registry/components/expanded/pageHeader.css +284 -248
  151. package/registry/components/expanded/slideout.css +276 -276
  152. package/registry/components/expanded/steps.css +356 -356
  153. package/registry/components/expanded/table.css +655 -606
  154. package/registry/components/expanded/timeline.css +286 -286
  155. package/registry/components/field.tsx +283 -283
  156. package/registry/components/hover-card.tsx +48 -48
  157. package/registry/components/input-content.ts +107 -107
  158. package/registry/components/input-group.tsx +130 -130
  159. package/registry/components/input-otp.tsx +584 -584
  160. package/registry/components/input.tsx +992 -990
  161. package/registry/components/item.tsx +189 -189
  162. package/registry/components/kbd.tsx +246 -246
  163. package/registry/components/label.tsx +78 -78
  164. package/registry/components/menu.tsx +1091 -978
  165. package/registry/components/menubar.tsx +226 -226
  166. package/registry/components/modal.tsx +872 -872
  167. package/registry/components/native-select.tsx +205 -205
  168. package/registry/components/navigation-menu.tsx +171 -171
  169. package/registry/components/pagination.css +36 -36
  170. package/registry/components/pagination.tsx +560 -560
  171. package/registry/components/popover.tsx +338 -338
  172. package/registry/components/progress-slider.tsx +216 -216
  173. package/registry/components/radio-card.tsx +676 -676
  174. package/registry/components/radio-group.tsx +570 -570
  175. package/registry/components/resizable.tsx +108 -108
  176. package/registry/components/scroll-area.tsx +91 -91
  177. package/registry/components/segmented-control.tsx +87 -87
  178. package/registry/components/select-content.tsx +218 -218
  179. package/registry/components/select.tsx +937 -937
  180. package/registry/components/sheet.tsx +305 -305
  181. package/registry/components/sidebar.tsx +1535 -1433
  182. package/registry/components/skeleton.css +54 -54
  183. package/registry/components/skeleton.tsx +482 -482
  184. package/registry/components/slider.tsx +380 -380
  185. package/registry/components/social-button.tsx +387 -387
  186. package/registry/components/spinner.tsx +78 -78
  187. package/registry/components/table-elements.tsx +287 -128
  188. package/registry/components/tabs.css +246 -222
  189. package/registry/components/tabs.tsx +245 -241
  190. package/registry/components/tag.tsx +423 -423
  191. package/registry/components/textarea.tsx +610 -610
  192. package/registry/components/toast.tsx +136 -136
  193. package/registry/components/toggle.tsx +256 -256
  194. package/registry/components/toolbar.tsx +539 -539
  195. package/registry/components/tooltip.tsx +433 -433
  196. package/registry/examples/alert-demo.tsx +34 -34
  197. package/registry/examples/alert-dialog-demo.tsx +42 -42
  198. package/registry/examples/app-header-demo.tsx +40 -0
  199. package/registry/examples/aspect-ratio-demo.tsx +11 -11
  200. package/registry/examples/attribute-demo.tsx +65 -65
  201. package/registry/examples/autocomplete-demo.tsx +109 -109
  202. package/registry/examples/avatar-demo.tsx +132 -132
  203. package/registry/examples/badge-demo.tsx +69 -69
  204. package/registry/examples/button-demo.tsx +86 -86
  205. package/registry/examples/button-group-demo.tsx +63 -63
  206. package/registry/examples/card-demo.tsx +86 -86
  207. package/registry/examples/carousel-demo.tsx +43 -43
  208. package/registry/examples/chart-demo.tsx +18 -18
  209. package/registry/examples/checkbox-demo.tsx +62 -62
  210. package/registry/examples/collapsible-demo.tsx +16 -16
  211. package/registry/examples/collection-filter-bar-demo.tsx +135 -135
  212. package/registry/examples/command-demo.tsx +42 -42
  213. package/registry/examples/command-palette-demo.tsx +235 -235
  214. package/registry/examples/context-menu-demo.tsx +29 -29
  215. package/registry/examples/control-density-contract-demo.tsx +65 -65
  216. package/registry/examples/date-picker-demo.tsx +127 -127
  217. package/registry/examples/divider-demo.tsx +17 -17
  218. package/registry/examples/expanded/activity-heatmap-demo.tsx +29 -29
  219. package/registry/examples/expanded/banner-demo.tsx +48 -48
  220. package/registry/examples/expanded/breadcrumbs-demo.tsx +59 -59
  221. package/registry/examples/expanded/empty-state-demo.tsx +39 -39
  222. package/registry/examples/expanded/file-upload-demo.tsx +60 -60
  223. package/registry/examples/expanded/onboarding-step-demo.tsx +11 -11
  224. package/registry/examples/expanded/slideout-demo.tsx +15 -15
  225. package/registry/examples/expanded/steps-demo.tsx +29 -29
  226. package/registry/examples/expanded/tabs-demo.tsx +13 -13
  227. package/registry/examples/expanded/timeline-demo.tsx +18 -18
  228. package/registry/examples/field-demo.tsx +51 -51
  229. package/registry/examples/hover-card-demo.tsx +23 -23
  230. package/registry/examples/input-actions-demo.tsx +36 -36
  231. package/registry/examples/input-demo.tsx +87 -87
  232. package/registry/examples/input-group-demo.tsx +16 -16
  233. package/registry/examples/input-otp-demo.tsx +72 -72
  234. package/registry/examples/item-demo.tsx +46 -46
  235. package/registry/examples/kbd-demo.tsx +12 -12
  236. package/registry/examples/label-demo.tsx +20 -20
  237. package/registry/examples/menu-demo.tsx +122 -122
  238. package/registry/examples/menubar-demo.tsx +34 -34
  239. package/registry/examples/modal-demo.tsx +74 -74
  240. package/registry/examples/native-select-demo.tsx +16 -16
  241. package/registry/examples/navigation-menu-demo.tsx +29 -29
  242. package/registry/examples/pagination-demo.tsx +20 -20
  243. package/registry/examples/popover-demo.tsx +547 -547
  244. package/registry/examples/progress-demo.tsx +37 -37
  245. package/registry/examples/progress-slider-demo.tsx +29 -29
  246. package/registry/examples/radio-card-demo.tsx +51 -51
  247. package/registry/examples/radio-group-demo.tsx +62 -62
  248. package/registry/examples/resizable-demo.tsx +22 -22
  249. package/registry/examples/results-toolbar-demo.tsx +44 -44
  250. package/registry/examples/scroll-area-demo.tsx +15 -15
  251. package/registry/examples/segmented-control-demo.tsx +39 -39
  252. package/registry/examples/select-demo.tsx +87 -87
  253. package/registry/examples/sheet-demo.tsx +47 -47
  254. package/registry/examples/sidebar-demo.tsx +101 -101
  255. package/registry/examples/slider-demo.tsx +31 -31
  256. package/registry/examples/social-button-demo.tsx +61 -61
  257. package/registry/examples/spinner-demo.tsx +59 -59
  258. package/registry/examples/tabs-demo.tsx +13 -13
  259. package/registry/examples/tag-demo.tsx +29 -29
  260. package/registry/examples/textarea-demo.tsx +79 -79
  261. package/registry/examples/toast-demo.tsx +35 -35
  262. package/registry/examples/toggle-demo.tsx +59 -59
  263. package/registry/examples/tooltip-demo.tsx +115 -115
  264. package/registry/guidance/USAGE.md +27 -27
  265. package/registry/hooks/use-direction.ts +207 -207
  266. package/registry/index.json +387 -17
  267. package/registry/styles/globals.css +46 -0
  268. package/registry.json +24 -2
  269. package/schema/config.schema.json +51 -51
  270. package/schema/registry.schema.json +194 -194
  271. package/schema/tokens.schema.json +167 -167
  272. package/src/cli/command-line.js +194 -194
  273. package/src/cli/config-editors.js +9 -9
  274. package/src/cli/doctor.js +399 -399
  275. package/src/cli/file-transaction.js +302 -302
  276. package/src/cli/global-css.js +153 -153
  277. package/src/cli/index.js +1002 -1002
  278. package/src/cli/install-plan.js +592 -592
  279. package/src/cli/install-receipt.js +171 -171
  280. package/src/cli/jsonc.js +203 -203
  281. package/src/cli/package-install-state.js +254 -254
  282. package/src/cli/package-manager.js +238 -238
  283. package/src/cli/package-plan.js +185 -185
  284. package/src/cli/package-version.js +97 -97
  285. package/src/cli/registry-query.js +207 -207
  286. package/src/cli/reporting.js +55 -55
  287. package/src/cli/schema-validation.js +19 -19
  288. package/src/cli/source-scanner.js +686 -686
  289. package/src/cli/vite-config.js +478 -478
  290. package/tokens/banhaten.tokens.json +184 -0
package/registry/components/expanded/slideout.css CHANGED
@@ -1,276 +1,276 @@
1
- .ds-slideout {
2
- --slideout-bg-raised: var(--bh-bg-raised);
3
- --slideout-bg-default: var(--bh-bg-default);
4
- --slideout-bg-dim: var(--bh-bg-dim);
5
- --slideout-bg-muted: var(--bh-bg-muted);
6
- --slideout-bg-neutral: var(--bh-bg-neutral-subtle);
7
- --slideout-border-subtle: var(--bh-border-subtle);
8
- --slideout-border-default: var(--bh-border-default);
9
- --slideout-border-input: var(--bh-border-input);
10
- --slideout-brand: var(--bh-content-brand-default);
11
- --slideout-brand-action: var(--bh-interactive-brand-default);
12
- --slideout-content-default: var(--bh-content-default);
13
- --slideout-content-subtle: var(--bh-content-subtle);
14
- --slideout-content-link: var(--bh-content-link);
15
- --slideout-content-success: var(--bh-content-success-default);
16
- --slideout-on-brand: var(--bh-content-on-brand);
17
- --slideout-on-color: var(--bh-content-on-color);
18
- --slideout-radius-control: var(--bh-control-default);
19
- --slideout-radius-lg: var(--bh-radius-lg-8);
20
- --slideout-radius-xl: var(--bh-radius-2xl-12);
21
- --slideout-radius-full: var(--bh-radius-full);
22
- --slideout-space-xxs: var(--bh-space-xxs-2);
23
- --slideout-space-xs: var(--bh-space-xs-4);
24
- --slideout-space-sm: var(--bh-space-sm-6);
25
- --slideout-space-md: var(--bh-space-md-8);
26
- --slideout-space-lg: var(--bh-space-lg-10);
27
- --slideout-space-xl: var(--bh-space-xl-12);
28
- --slideout-space-2xl: var(--bh-space-2xl-14);
29
- --slideout-space-3xl: var(--bh-space-3xl-16);
30
- --slideout-space-4xl: var(--bh-space-4xl-20);
31
- --slideout-space-5xl: var(--bh-space-5xl-24);
32
- --slideout-space-6xl: var(--bh-space-6xl-32);
33
- --slideout-space-7xl: var(--bh-space-7xl-40);
34
- --slideout-panel-width: calc(var(--bh-space-18xl-320) + var(--bh-space-4xl-20));
35
- --slideout-outer-width: calc(var(--slideout-panel-width) + var(--bh-space-3xl-16));
36
- --slideout-height: calc(var(--bh-space-19xl-384) + var(--bh-space-19xl-384) + var(--bh-space-12xl-128) + var(--bh-space-xs-4));
37
- --slideout-header-height: var(--bh-space-9xl-64);
38
- --slideout-control-height-sm: var(--bh-space-6xl-32);
39
- --slideout-control-height-md: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
40
- --slideout-control-height-lg: var(--bh-space-7xl-40);
41
- --slideout-close-mobile-size: var(--bh-space-5xl-24);
42
- --slideout-scrollbar-size: var(--bh-space-xl-12);
43
- --slideout-scrollbar-border: var(--bh-space-xs-4);
44
- --slideout-choice-size: var(--bh-space-3xl-16);
45
- --slideout-dot-size: var(--bh-space-sm-6);
46
- --slideout-avatar-status-offset: calc(-1 * var(--bh-space-xxxs-1));
47
- --slideout-elevation-control: var(--elevation-button-raised);
48
- --slideout-elevation-surface: var(--elevation-component-default);
49
-
50
- box-sizing: border-box;
51
- display: flex;
52
- align-items: stretch;
53
- justify-content: center;
54
- width: var(--slideout-outer-width);
55
- height: var(--slideout-height);
56
- padding: var(--slideout-space-md);
57
- overflow: hidden;
58
- color: var(--slideout-content-default);
59
- background: transparent;
60
- font-family: var(--bh-font-family);
61
- font-size: var(--bh-text-body-md-regular-font-size);
62
- line-height: var(--bh-text-body-md-regular-line-height);
63
- letter-spacing: var(--bh-text-body-md-regular-letter-spacing);
64
- }
65
-
66
- .ds-slideout *,
67
- .ds-slideout *::before,
68
- .ds-slideout *::after {
69
- box-sizing: border-box;
70
- }
71
-
72
- .ds-slideout--medium {
73
- --slideout-panel-width: calc(var(--bh-space-19xl-384) + var(--bh-space-3xl-16));
74
- --slideout-outer-width: calc(var(--slideout-panel-width) + var(--bh-space-3xl-16));
75
- }
76
-
77
- .ds-slideout--large {
78
- --slideout-panel-width: calc(var(--bh-space-19xl-384) + var(--bh-space-11xl-96) + var(--bh-space-4xl-20));
79
- --slideout-outer-width: calc(var(--slideout-panel-width) + var(--bh-space-3xl-16));
80
- }
81
-
82
- .ds-slideout--mobile {
83
- --slideout-panel-width: calc(var(--bh-space-19xl-384) - var(--bh-space-md-8) - var(--bh-space-xxxs-1));
84
- --slideout-outer-width: var(--slideout-panel-width);
85
- --slideout-height: calc(var(--bh-space-19xl-384) + var(--bh-space-19xl-384) + var(--bh-space-7xl-40) + var(--bh-space-xs-4));
86
- padding: 0;
87
- }
88
-
89
- .ds-slideout:dir(rtl) {
90
- font-family: var(--bh-font-family);
91
- }
92
-
93
- .ds-slideout__panel {
94
- display: flex;
95
- flex: 1 1 auto;
96
- flex-direction: column;
97
- width: var(--slideout-panel-width);
98
- min-width: 0;
99
- min-height: 0;
100
- overflow: hidden;
101
- border: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
102
- border-radius: var(--slideout-radius-xl);
103
- background: var(--slideout-bg-raised);
104
- }
105
-
106
- .ds-slideout--mobile .ds-slideout__panel {
107
- border-radius: 0;
108
- }
109
-
110
- .ds-slideout__header {
111
- display: flex;
112
- flex: 0 0 auto;
113
- align-items: center;
114
- gap: var(--slideout-space-3xl);
115
- min-height: var(--slideout-header-height);
116
- padding-block: var(--slideout-space-3xl);
117
- padding-inline: var(--slideout-space-4xl) var(--slideout-space-3xl);
118
- border-bottom: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
119
- background: var(--slideout-bg-raised);
120
- }
121
-
122
- .ds-slideout--mobile .ds-slideout__header {
123
- gap: var(--slideout-space-lg);
124
- }
125
-
126
- .ds-slideout__close-icon {
127
- width: var(--slideout-space-4xl);
128
- height: var(--slideout-space-4xl);
129
- stroke-width: var(--bh-icon-stroke-220);
130
- }
131
-
132
- .ds-slideout__heading-wrap {
133
- display: flex;
134
- flex: 1 1 0;
135
- align-items: center;
136
- gap: var(--slideout-space-xl);
137
- min-width: 0;
138
- }
139
-
140
- .ds-slideout__title {
141
- flex: 1 1 0;
142
- min-width: 0;
143
- margin: 0;
144
- color: var(--slideout-content-default);
145
- font-size: var(--bh-text-heading-sm-medium-font-size);
146
- font-weight: var(--bh-text-heading-sm-medium-font-weight);
147
- line-height: var(--bh-text-heading-sm-medium-line-height);
148
- overflow-wrap: anywhere;
149
- }
150
-
151
- .ds-slideout--mobile .ds-slideout__title {
152
- font-size: var(--bh-text-heading-xs-medium-font-size);
153
- line-height: var(--bh-text-heading-xs-medium-line-height);
154
- }
155
-
156
- .ds-slideout__text-button,
157
- .ds-slideout__close,
158
- .ds-slideout__button {
159
- border: 0;
160
- margin: 0;
161
- font: inherit;
162
- letter-spacing: inherit;
163
- cursor: pointer;
164
- }
165
-
166
- .ds-slideout__text-button {
167
- flex: 0 0 auto;
168
- height: var(--slideout-control-height-sm);
169
- padding: var(--slideout-space-md) var(--slideout-space-lg);
170
- border-radius: var(--slideout-radius-control);
171
- color: var(--slideout-content-link);
172
- background: transparent;
173
- font-weight: var(--bh-font-weight-medium);
174
- }
175
-
176
- .ds-slideout__close {
177
- display: flex;
178
- flex: 0 0 auto;
179
- align-items: center;
180
- justify-content: center;
181
- width: var(--slideout-control-height-sm);
182
- height: var(--slideout-control-height-sm);
183
- padding: 0;
184
- border-radius: var(--slideout-radius-full);
185
- color: var(--slideout-content-subtle);
186
- background: transparent;
187
- }
188
-
189
- .ds-slideout--mobile .ds-slideout__close {
190
- width: var(--slideout-close-mobile-size);
191
- height: var(--slideout-close-mobile-size);
192
- }
193
-
194
- .ds-slideout__body {
195
- position: relative;
196
- display: flex;
197
- flex: 1 1 auto;
198
- flex-direction: column;
199
- min-height: 0;
200
- padding: var(--slideout-space-4xl);
201
- overflow-x: hidden;
202
- overflow-y: auto;
203
- scrollbar-gutter: stable;
204
- scrollbar-color: var(--bh-bg-neutral-medium) transparent;
205
- scrollbar-width: thin;
206
- }
207
-
208
- .ds-slideout__body::-webkit-scrollbar {
209
- width: var(--slideout-scrollbar-size);
210
- }
211
-
212
- .ds-slideout__body::-webkit-scrollbar-track {
213
- background: transparent;
214
- }
215
-
216
- .ds-slideout__body::-webkit-scrollbar-thumb {
217
- border: var(--slideout-scrollbar-border) solid transparent;
218
- border-radius: var(--slideout-radius-full);
219
- background: var(--bh-bg-neutral-medium);
220
- background-clip: padding-box;
221
- }
222
-
223
- .ds-slideout__footer {
224
- display: flex;
225
- flex: 0 0 auto;
226
- flex-direction: column;
227
- gap: var(--slideout-space-md);
228
- padding: var(--slideout-space-4xl);
229
- border-top: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
230
- background: var(--slideout-bg-raised);
231
- }
232
-
233
- .ds-slideout__button {
234
- position: relative;
235
- display: flex;
236
- align-items: center;
237
- justify-content: center;
238
- min-height: var(--slideout-control-height-lg);
239
- padding: var(--slideout-space-md) var(--slideout-space-lg);
240
- border-radius: var(--slideout-radius-control);
241
- font-weight: var(--bh-font-weight-medium);
242
- line-height: var(--bh-text-body-md-medium-line-height);
243
- white-space: nowrap;
244
- }
245
-
246
- .ds-slideout__button--primary {
247
- color: var(--slideout-on-brand);
248
- background: var(--slideout-brand-action);
249
- box-shadow: var(--slideout-elevation-control);
250
- }
251
-
252
- .ds-slideout__button--secondary {
253
- color: var(--slideout-content-default);
254
- background: var(--slideout-bg-neutral);
255
- box-shadow: var(--elevation-button-soft);
256
- }
257
-
258
- .ds-slideout__text-button:hover,
259
- .ds-slideout__close:hover,
260
- .ds-slideout__button--secondary:hover {
261
- background: var(--bh-interactive-ghost-hover);
262
- }
263
-
264
- .ds-slideout__text-button:focus-visible,
265
- .ds-slideout__close:focus-visible,
266
- .ds-slideout__button:focus-visible {
267
- outline: var(--slideout-space-xxs) solid var(--slideout-brand);
268
- outline-offset: var(--slideout-space-xxs);
269
- }
270
-
271
- .ds-slideout-slot {
272
- display: flex;
273
- flex-direction: column;
274
- width: 100%;
275
- min-width: 0;
276
- }
1
+ .ds-slideout {
2
+ --slideout-bg-raised: var(--bh-bg-raised);
3
+ --slideout-bg-default: var(--bh-bg-default);
4
+ --slideout-bg-dim: var(--bh-bg-dim);
5
+ --slideout-bg-muted: var(--bh-bg-muted);
6
+ --slideout-bg-neutral: var(--bh-bg-neutral-subtle);
7
+ --slideout-border-subtle: var(--bh-border-subtle);
8
+ --slideout-border-default: var(--bh-border-default);
9
+ --slideout-border-input: var(--bh-border-input);
10
+ --slideout-brand: var(--bh-content-brand-default);
11
+ --slideout-brand-action: var(--bh-interactive-brand-default);
12
+ --slideout-content-default: var(--bh-content-default);
13
+ --slideout-content-subtle: var(--bh-content-subtle);
14
+ --slideout-content-link: var(--bh-content-link);
15
+ --slideout-content-success: var(--bh-content-success-default);
16
+ --slideout-on-brand: var(--bh-content-on-brand);
17
+ --slideout-on-color: var(--bh-content-on-color);
18
+ --slideout-radius-control: var(--bh-control-default);
19
+ --slideout-radius-lg: var(--bh-radius-lg-8);
20
+ --slideout-radius-xl: var(--bh-radius-2xl-12);
21
+ --slideout-radius-full: var(--bh-radius-full);
22
+ --slideout-space-xxs: var(--bh-space-xxs-2);
23
+ --slideout-space-xs: var(--bh-space-xs-4);
24
+ --slideout-space-sm: var(--bh-space-sm-6);
25
+ --slideout-space-md: var(--bh-space-md-8);
26
+ --slideout-space-lg: var(--bh-space-lg-10);
27
+ --slideout-space-xl: var(--bh-space-xl-12);
28
+ --slideout-space-2xl: var(--bh-space-2xl-14);
29
+ --slideout-space-3xl: var(--bh-space-3xl-16);
30
+ --slideout-space-4xl: var(--bh-space-4xl-20);
31
+ --slideout-space-5xl: var(--bh-space-5xl-24);
32
+ --slideout-space-6xl: var(--bh-space-6xl-32);
33
+ --slideout-space-7xl: var(--bh-space-7xl-40);
34
+ --slideout-panel-width: calc(var(--bh-space-18xl-320) + var(--bh-space-4xl-20));
35
+ --slideout-outer-width: calc(var(--slideout-panel-width) + var(--bh-space-3xl-16));
36
+ --slideout-height: calc(var(--bh-space-19xl-384) + var(--bh-space-19xl-384) + var(--bh-space-12xl-128) + var(--bh-space-xs-4));
37
+ --slideout-header-height: var(--bh-space-9xl-64);
38
+ --slideout-control-height-sm: var(--bh-space-6xl-32);
39
+ --slideout-control-height-md: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
40
+ --slideout-control-height-lg: var(--bh-space-7xl-40);
41
+ --slideout-close-mobile-size: var(--bh-space-5xl-24);
42
+ --slideout-scrollbar-size: var(--bh-space-xl-12);
43
+ --slideout-scrollbar-border: var(--bh-space-xs-4);
44
+ --slideout-choice-size: var(--bh-space-3xl-16);
45
+ --slideout-dot-size: var(--bh-space-sm-6);
46
+ --slideout-avatar-status-offset: calc(-1 * var(--bh-space-xxxs-1));
47
+ --slideout-elevation-control: var(--elevation-button-raised);
48
+ --slideout-elevation-surface: var(--elevation-component-default);
49
+
50
+ box-sizing: border-box;
51
+ display: flex;
52
+ align-items: stretch;
53
+ justify-content: center;
54
+ width: var(--slideout-outer-width);
55
+ height: var(--slideout-height);
56
+ padding: var(--slideout-space-md);
57
+ overflow: hidden;
58
+ color: var(--slideout-content-default);
59
+ background: transparent;
60
+ font-family: var(--bh-font-family);
61
+ font-size: var(--bh-text-body-md-regular-font-size);
62
+ line-height: var(--bh-text-body-md-regular-line-height);
63
+ letter-spacing: var(--bh-text-body-md-regular-letter-spacing);
64
+ }
65
+
66
+ .ds-slideout *,
67
+ .ds-slideout *::before,
68
+ .ds-slideout *::after {
69
+ box-sizing: border-box;
70
+ }
71
+
72
+ .ds-slideout--medium {
73
+ --slideout-panel-width: calc(var(--bh-space-19xl-384) + var(--bh-space-3xl-16));
74
+ --slideout-outer-width: calc(var(--slideout-panel-width) + var(--bh-space-3xl-16));
75
+ }
76
+
77
+ .ds-slideout--large {
78
+ --slideout-panel-width: calc(var(--bh-space-19xl-384) + var(--bh-space-11xl-96) + var(--bh-space-4xl-20));
79
+ --slideout-outer-width: calc(var(--slideout-panel-width) + var(--bh-space-3xl-16));
80
+ }
81
+
82
+ .ds-slideout--mobile {
83
+ --slideout-panel-width: calc(var(--bh-space-19xl-384) - var(--bh-space-md-8) - var(--bh-space-xxxs-1));
84
+ --slideout-outer-width: var(--slideout-panel-width);
85
+ --slideout-height: calc(var(--bh-space-19xl-384) + var(--bh-space-19xl-384) + var(--bh-space-7xl-40) + var(--bh-space-xs-4));
86
+ padding: 0;
87
+ }
88
+
89
+ .ds-slideout:dir(rtl) {
90
+ font-family: var(--bh-font-family);
91
+ }
92
+
93
+ .ds-slideout__panel {
94
+ display: flex;
95
+ flex: 1 1 auto;
96
+ flex-direction: column;
97
+ width: var(--slideout-panel-width);
98
+ min-width: 0;
99
+ min-height: 0;
100
+ overflow: hidden;
101
+ border: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
102
+ border-radius: var(--slideout-radius-xl);
103
+ background: var(--slideout-bg-raised);
104
+ }
105
+
106
+ .ds-slideout--mobile .ds-slideout__panel {
107
+ border-radius: 0;
108
+ }
109
+
110
+ .ds-slideout__header {
111
+ display: flex;
112
+ flex: 0 0 auto;
113
+ align-items: center;
114
+ gap: var(--slideout-space-3xl);
115
+ min-height: var(--slideout-header-height);
116
+ padding-block: var(--slideout-space-3xl);
117
+ padding-inline: var(--slideout-space-4xl) var(--slideout-space-3xl);
118
+ border-bottom: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
119
+ background: var(--slideout-bg-raised);
120
+ }
121
+
122
+ .ds-slideout--mobile .ds-slideout__header {
123
+ gap: var(--slideout-space-lg);
124
+ }
125
+
126
+ .ds-slideout__close-icon {
127
+ width: var(--slideout-space-4xl);
128
+ height: var(--slideout-space-4xl);
129
+ stroke-width: var(--bh-icon-stroke-220);
130
+ }
131
+
132
+ .ds-slideout__heading-wrap {
133
+ display: flex;
134
+ flex: 1 1 0;
135
+ align-items: center;
136
+ gap: var(--slideout-space-xl);
137
+ min-width: 0;
138
+ }
139
+
140
+ .ds-slideout__title {
141
+ flex: 1 1 0;
142
+ min-width: 0;
143
+ margin: 0;
144
+ color: var(--slideout-content-default);
145
+ font-size: var(--bh-text-heading-sm-medium-font-size);
146
+ font-weight: var(--bh-text-heading-sm-medium-font-weight);
147
+ line-height: var(--bh-text-heading-sm-medium-line-height);
148
+ overflow-wrap: anywhere;
149
+ }
150
+
151
+ .ds-slideout--mobile .ds-slideout__title {
152
+ font-size: var(--bh-text-heading-xs-medium-font-size);
153
+ line-height: var(--bh-text-heading-xs-medium-line-height);
154
+ }
155
+
156
+ .ds-slideout__text-button,
157
+ .ds-slideout__close,
158
+ .ds-slideout__button {
159
+ border: 0;
160
+ margin: 0;
161
+ font: inherit;
162
+ letter-spacing: inherit;
163
+ cursor: pointer;
164
+ }
165
+
166
+ .ds-slideout__text-button {
167
+ flex: 0 0 auto;
168
+ height: var(--slideout-control-height-sm);
169
+ padding: var(--slideout-space-md) var(--slideout-space-lg);
170
+ border-radius: var(--slideout-radius-control);
171
+ color: var(--slideout-content-link);
172
+ background: transparent;
173
+ font-weight: var(--bh-font-weight-medium);
174
+ }
175
+
176
+ .ds-slideout__close {
177
+ display: flex;
178
+ flex: 0 0 auto;
179
+ align-items: center;
180
+ justify-content: center;
181
+ width: var(--slideout-control-height-sm);
182
+ height: var(--slideout-control-height-sm);
183
+ padding: 0;
184
+ border-radius: var(--slideout-radius-full);
185
+ color: var(--slideout-content-subtle);
186
+ background: transparent;
187
+ }
188
+
189
+ .ds-slideout--mobile .ds-slideout__close {
190
+ width: var(--slideout-close-mobile-size);
191
+ height: var(--slideout-close-mobile-size);
192
+ }
193
+
194
+ .ds-slideout__body {
195
+ position: relative;
196
+ display: flex;
197
+ flex: 1 1 auto;
198
+ flex-direction: column;
199
+ min-height: 0;
200
+ padding: var(--slideout-space-4xl);
201
+ overflow-x: hidden;
202
+ overflow-y: auto;
203
+ scrollbar-gutter: stable;
204
+ scrollbar-color: var(--bh-bg-neutral-medium) transparent;
205
+ scrollbar-width: thin;
206
+ }
207
+
208
+ .ds-slideout__body::-webkit-scrollbar {
209
+ width: var(--slideout-scrollbar-size);
210
+ }
211
+
212
+ .ds-slideout__body::-webkit-scrollbar-track {
213
+ background: transparent;
214
+ }
215
+
216
+ .ds-slideout__body::-webkit-scrollbar-thumb {
217
+ border: var(--slideout-scrollbar-border) solid transparent;
218
+ border-radius: var(--slideout-radius-full);
219
+ background: var(--bh-bg-neutral-medium);
220
+ background-clip: padding-box;
221
+ }
222
+
223
+ .ds-slideout__footer {
224
+ display: flex;
225
+ flex: 0 0 auto;
226
+ flex-direction: column;
227
+ gap: var(--slideout-space-md);
228
+ padding: var(--slideout-space-4xl);
229
+ border-top: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
230
+ background: var(--slideout-bg-raised);
231
+ }
232
+
233
+ .ds-slideout__button {
234
+ position: relative;
235
+ display: flex;
236
+ align-items: center;
237
+ justify-content: center;
238
+ min-height: var(--slideout-control-height-lg);
239
+ padding: var(--slideout-space-md) var(--slideout-space-lg);
240
+ border-radius: var(--slideout-radius-control);
241
+ font-weight: var(--bh-font-weight-medium);
242
+ line-height: var(--bh-text-body-md-medium-line-height);
243
+ white-space: nowrap;
244
+ }
245
+
246
+ .ds-slideout__button--primary {
247
+ color: var(--slideout-on-brand);
248
+ background: var(--slideout-brand-action);
249
+ box-shadow: var(--slideout-elevation-control);
250
+ }
251
+
252
+ .ds-slideout__button--secondary {
253
+ color: var(--slideout-content-default);
254
+ background: var(--slideout-bg-neutral);
255
+ box-shadow: var(--elevation-button-soft);
256
+ }
257
+
258
+ .ds-slideout__text-button:hover,
259
+ .ds-slideout__close:hover,
260
+ .ds-slideout__button--secondary:hover {
261
+ background: var(--bh-interactive-ghost-hover);
262
+ }
263
+
264
+ .ds-slideout__text-button:focus-visible,
265
+ .ds-slideout__close:focus-visible,
266
+ .ds-slideout__button:focus-visible {
267
+ outline: var(--slideout-space-xxs) solid var(--slideout-brand);
268
+ outline-offset: var(--slideout-space-xxs);
269
+ }
270
+
271
+ .ds-slideout-slot {
272
+ display: flex;
273
+ flex-direction: column;
274
+ width: 100%;
275
+ min-width: 0;
276
+ }