banhaten 0.3.0 → 0.5.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 (348) hide show
  1. package/CHANGELOG.md +139 -73
  2. package/CONTRIBUTING.md +46 -44
  3. package/README.md +192 -190
  4. package/SECURITY.md +15 -15
  5. package/banhaten.config.example.json +11 -11
  6. package/docs/design-spacing.md +13 -0
  7. package/docs/design-system/README.md +22 -20
  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 -244
  16. package/docs/design-system/component-quality-audit-2026-08-20.md +225 -223
  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 +90 -76
  20. package/docs/design-system/components/accordion.md +53 -53
  21. package/docs/design-system/components/activity-feed.md +94 -94
  22. package/docs/design-system/components/activity-heatmap.md +57 -57
  23. package/docs/design-system/components/agent-input.md +85 -0
  24. package/docs/design-system/components/alert-dialog.md +72 -72
  25. package/docs/design-system/components/alert.md +98 -98
  26. package/docs/design-system/components/approval-card.md +134 -0
  27. package/docs/design-system/components/aspect-ratio.md +45 -45
  28. package/docs/design-system/components/attribute.md +89 -89
  29. package/docs/design-system/components/autocomplete.md +75 -75
  30. package/docs/design-system/components/avatar.md +54 -54
  31. package/docs/design-system/components/badge.md +54 -54
  32. package/docs/design-system/components/banner.md +87 -87
  33. package/docs/design-system/components/breadcrumbs.md +177 -176
  34. package/docs/design-system/components/button-group.md +98 -98
  35. package/docs/design-system/components/button.md +83 -80
  36. package/docs/design-system/components/card.md +88 -88
  37. package/docs/design-system/components/carousel.md +46 -46
  38. package/docs/design-system/components/catalog-components.md +47 -47
  39. package/docs/design-system/components/chart.md +95 -24
  40. package/docs/design-system/components/checkbox.md +54 -54
  41. package/docs/design-system/components/collapsible.md +67 -53
  42. package/docs/design-system/components/command.md +62 -62
  43. package/docs/design-system/components/context-menu.md +46 -46
  44. package/docs/design-system/components/date-picker.md +81 -79
  45. package/docs/design-system/components/divider.md +102 -102
  46. package/docs/design-system/components/empty-state.md +56 -56
  47. package/docs/design-system/components/field.md +70 -70
  48. package/docs/design-system/components/file-upload.md +187 -187
  49. package/docs/design-system/components/hover-card.md +48 -48
  50. package/docs/design-system/components/icons.md +48 -48
  51. package/docs/design-system/components/inline-citations.md +93 -0
  52. package/docs/design-system/components/input-group.md +58 -58
  53. package/docs/design-system/components/input-otp.md +56 -56
  54. package/docs/design-system/components/input.md +117 -61
  55. package/docs/design-system/components/item.md +59 -57
  56. package/docs/design-system/components/kbd.md +54 -49
  57. package/docs/design-system/components/label.md +49 -49
  58. package/docs/design-system/components/menu.md +71 -61
  59. package/docs/design-system/components/menubar.md +47 -47
  60. package/docs/design-system/components/modal.md +105 -105
  61. package/docs/design-system/components/native-select.md +54 -54
  62. package/docs/design-system/components/navigation-menu.md +50 -50
  63. package/docs/design-system/components/onboarding-step-list-item.md +82 -82
  64. package/docs/design-system/components/page-header.md +93 -86
  65. package/docs/design-system/components/pagination.md +57 -57
  66. package/docs/design-system/components/popover.md +60 -60
  67. package/docs/design-system/components/progress-slider.md +50 -50
  68. package/docs/design-system/components/progress.md +76 -76
  69. package/docs/design-system/components/radio-card.md +51 -51
  70. package/docs/design-system/components/radio-group.md +57 -57
  71. package/docs/design-system/components/resizable.md +44 -44
  72. package/docs/design-system/components/rolling-count.md +61 -0
  73. package/docs/design-system/components/scroll-area.md +51 -51
  74. package/docs/design-system/components/segmented-control.md +54 -54
  75. package/docs/design-system/components/select.md +68 -62
  76. package/docs/design-system/components/sheet.md +67 -67
  77. package/docs/design-system/components/shimmer-text.md +67 -0
  78. package/docs/design-system/components/sidebar.md +127 -76
  79. package/docs/design-system/components/skeleton.md +75 -75
  80. package/docs/design-system/components/slideout.md +65 -65
  81. package/docs/design-system/components/slider.md +63 -63
  82. package/docs/design-system/components/social-button.md +50 -50
  83. package/docs/design-system/components/spinner.md +62 -62
  84. package/docs/design-system/components/steps.md +65 -65
  85. package/docs/design-system/components/streaming-text.md +82 -0
  86. package/docs/design-system/components/table.md +419 -414
  87. package/docs/design-system/components/tabs.md +59 -55
  88. package/docs/design-system/components/tag.md +80 -80
  89. package/docs/design-system/components/task-list.md +95 -0
  90. package/docs/design-system/components/textarea.md +50 -50
  91. package/docs/design-system/components/thinking-reasoning.md +72 -0
  92. package/docs/design-system/components/thinking-state.md +67 -0
  93. package/docs/design-system/components/timeline.md +83 -83
  94. package/docs/design-system/components/toast.md +58 -58
  95. package/docs/design-system/components/toggle.md +81 -81
  96. package/docs/design-system/components/toolbar.md +92 -87
  97. package/docs/design-system/components/tooltip.md +94 -92
  98. package/docs/design-system/components/typography.md +18 -18
  99. package/docs/design-system/density-and-elevation.md +65 -61
  100. package/docs/design-system/design-system-test-missing-items.md +368 -368
  101. package/docs/design-system/direction-and-localization.md +23 -23
  102. package/docs/design-system/form-recipes.md +73 -73
  103. package/docs/design-system/gap-promotion-policy.md +21 -21
  104. package/docs/design-system/icons.md +74 -69
  105. package/docs/design-system/installation.md +70 -68
  106. package/docs/design-system/launch-comparison-shadcn.md +98 -98
  107. package/docs/design-system/registry-and-cli.md +64 -64
  108. package/docs/design-system/release-policy.md +30 -30
  109. package/docs/design-system/roadmap.md +14 -14
  110. package/docs/design-system/support-matrix.md +23 -23
  111. package/docs/design-system/tabs.md +54 -53
  112. package/docs/design-system/template-gap-audit.md +32 -0
  113. package/docs/design-system/templates.md +59 -0
  114. package/docs/design-system/token-governance.md +72 -60
  115. package/package.json +98 -98
  116. package/registry/component-contract.json +40 -40
  117. package/registry/components/accordion.tsx +155 -155
  118. package/registry/components/agent-input-parts.tsx +552 -0
  119. package/registry/components/agent-input-state.ts +156 -0
  120. package/registry/components/agent-input.css +307 -0
  121. package/registry/components/agent-input.tsx +382 -0
  122. package/registry/components/alert-dialog.tsx +297 -297
  123. package/registry/components/alert.tsx +293 -293
  124. package/registry/components/approval-card.css +409 -0
  125. package/registry/components/approval-card.tsx +401 -0
  126. package/registry/components/approval-frame.tsx +108 -0
  127. package/registry/components/approval-questions.tsx +559 -0
  128. package/registry/components/aspect-ratio.tsx +30 -30
  129. package/registry/components/attribute.tsx +454 -448
  130. package/registry/components/autocomplete.tsx +598 -651
  131. package/registry/components/avatar.tsx +385 -381
  132. package/registry/components/badge.tsx +629 -629
  133. package/registry/components/button-group.tsx +565 -565
  134. package/registry/components/button.tsx +127 -123
  135. package/registry/components/card.tsx +638 -638
  136. package/registry/components/carousel.tsx +296 -296
  137. package/registry/components/chart-block-data.ts +177 -0
  138. package/registry/components/chart-block.css +171 -0
  139. package/registry/components/chart-block.tsx +260 -0
  140. package/registry/components/chart-interactions.ts +123 -0
  141. package/registry/components/chart-options.cartesian.ts +162 -0
  142. package/registry/components/chart-options.paint.ts +99 -0
  143. package/registry/components/chart-options.parts.ts +72 -0
  144. package/registry/components/chart-options.radial.ts +109 -0
  145. package/registry/components/chart-options.ts +44 -0
  146. package/registry/components/chart-options.types.ts +67 -0
  147. package/registry/components/chart.tsx +203 -203
  148. package/registry/components/checkbox.tsx +247 -247
  149. package/registry/components/collapsible.tsx +109 -69
  150. package/registry/components/command.tsx +208 -208
  151. package/registry/components/context-menu.tsx +236 -236
  152. package/registry/components/data-chart.tsx +40 -0
  153. package/registry/components/date-picker.tsx +1289 -1277
  154. package/registry/components/echart-theme.ts +246 -0
  155. package/registry/components/echart.css +49 -0
  156. package/registry/components/echart.tsx +178 -0
  157. package/registry/components/expanded/ActivityFeed.tsx +227 -227
  158. package/registry/components/expanded/ActivityHeatmap.tsx +64 -64
  159. package/registry/components/expanded/Banner.tsx +179 -179
  160. package/registry/components/expanded/Breadcrumbs.tsx +131 -131
  161. package/registry/components/expanded/CatalogComponentsShowcase.tsx +205 -205
  162. package/registry/components/expanded/CatalogDivider.tsx +49 -49
  163. package/registry/components/expanded/EmptyState.tsx +155 -155
  164. package/registry/components/expanded/FileUpload.tsx +543 -543
  165. package/registry/components/expanded/OnboardingStepListItem.tsx +60 -59
  166. package/registry/components/expanded/PageHeader.tsx +179 -166
  167. package/registry/components/expanded/Slideout.tsx +108 -108
  168. package/registry/components/expanded/Steps.tsx +402 -402
  169. package/registry/components/expanded/Table.tsx +1092 -1071
  170. package/registry/components/expanded/Timeline.tsx +203 -203
  171. package/registry/components/expanded/activityFeed.css +248 -248
  172. package/registry/components/expanded/activityHeatmap.css +66 -66
  173. package/registry/components/expanded/banner.css +260 -255
  174. package/registry/components/expanded/breadcrumbs.css +140 -140
  175. package/registry/components/expanded/catalogComponentsShowcase.css +87 -87
  176. package/registry/components/expanded/divider.css +75 -75
  177. package/registry/components/expanded/emptyState.css +111 -111
  178. package/registry/components/expanded/fileUpload.css +457 -457
  179. package/registry/components/expanded/onboardingStepListItem.css +135 -126
  180. package/registry/components/expanded/pageHeader.css +248 -290
  181. package/registry/components/expanded/slideout.css +276 -276
  182. package/registry/components/expanded/steps.css +356 -356
  183. package/registry/components/expanded/table.css +606 -603
  184. package/registry/components/expanded/timeline.css +286 -286
  185. package/registry/components/field.tsx +283 -283
  186. package/registry/components/hover-card.tsx +48 -48
  187. package/registry/components/inline-citations.css +126 -0
  188. package/registry/components/inline-citations.tsx +292 -0
  189. package/registry/components/input-content.ts +107 -107
  190. package/registry/components/input-group.tsx +130 -130
  191. package/registry/components/input-otp.tsx +584 -584
  192. package/registry/components/input.tsx +990 -972
  193. package/registry/components/item.tsx +189 -189
  194. package/registry/components/kbd.tsx +246 -151
  195. package/registry/components/label.tsx +78 -78
  196. package/registry/components/menu.tsx +978 -986
  197. package/registry/components/menubar.tsx +226 -226
  198. package/registry/components/modal.tsx +872 -872
  199. package/registry/components/native-select.tsx +205 -205
  200. package/registry/components/navigation-menu.tsx +171 -171
  201. package/registry/components/pagination.css +36 -36
  202. package/registry/components/pagination.tsx +560 -555
  203. package/registry/components/popover.tsx +338 -338
  204. package/registry/components/progress-slider.tsx +216 -216
  205. package/registry/components/radio-card.tsx +676 -677
  206. package/registry/components/radio-group.tsx +570 -570
  207. package/registry/components/resizable.tsx +108 -108
  208. package/registry/components/rolling-count.css +37 -0
  209. package/registry/components/rolling-count.tsx +110 -0
  210. package/registry/components/scroll-area.tsx +91 -91
  211. package/registry/components/segmented-control.tsx +87 -87
  212. package/registry/components/select-content.tsx +218 -218
  213. package/registry/components/select.tsx +937 -932
  214. package/registry/components/sheet.tsx +305 -305
  215. package/registry/components/shimmer-text.css +69 -0
  216. package/registry/components/shimmer-text.tsx +43 -0
  217. package/registry/components/sidebar.tsx +1433 -358
  218. package/registry/components/skeleton.css +54 -54
  219. package/registry/components/skeleton.tsx +482 -482
  220. package/registry/components/slider.tsx +380 -380
  221. package/registry/components/social-button.tsx +387 -387
  222. package/registry/components/spinner.tsx +78 -78
  223. package/registry/components/streaming-text.css +45 -0
  224. package/registry/components/streaming-text.tsx +165 -0
  225. package/registry/components/table-elements.tsx +128 -128
  226. package/registry/components/tabs.css +222 -218
  227. package/registry/components/tabs.tsx +241 -241
  228. package/registry/components/tag.tsx +423 -423
  229. package/registry/components/task-list.css +328 -0
  230. package/registry/components/task-list.tsx +429 -0
  231. package/registry/components/textarea.tsx +610 -610
  232. package/registry/components/thinking-reasoning.css +178 -0
  233. package/registry/components/thinking-reasoning.tsx +253 -0
  234. package/registry/components/thinking-state.css +8 -0
  235. package/registry/components/thinking-state.tsx +46 -0
  236. package/registry/components/toast.tsx +136 -136
  237. package/registry/components/toggle.tsx +256 -256
  238. package/registry/components/toolbar.tsx +539 -539
  239. package/registry/components/tooltip.tsx +433 -431
  240. package/registry/examples/agent-input-demo.tsx +90 -0
  241. package/registry/examples/alert-demo.tsx +34 -34
  242. package/registry/examples/alert-dialog-demo.tsx +42 -42
  243. package/registry/examples/approval-card-demo.tsx +83 -0
  244. package/registry/examples/aspect-ratio-demo.tsx +11 -11
  245. package/registry/examples/attribute-demo.tsx +65 -65
  246. package/registry/examples/autocomplete-demo.tsx +109 -109
  247. package/registry/examples/avatar-demo.tsx +132 -132
  248. package/registry/examples/badge-demo.tsx +69 -69
  249. package/registry/examples/button-demo.tsx +86 -83
  250. package/registry/examples/button-group-demo.tsx +63 -63
  251. package/registry/examples/card-demo.tsx +86 -86
  252. package/registry/examples/carousel-demo.tsx +43 -43
  253. package/registry/examples/chart-block-demo.tsx +5 -0
  254. package/registry/examples/chart-demo.tsx +18 -33
  255. package/registry/examples/checkbox-demo.tsx +62 -62
  256. package/registry/examples/collapsible-demo.tsx +16 -16
  257. package/registry/examples/collection-filter-bar-demo.tsx +135 -135
  258. package/registry/examples/command-demo.tsx +42 -42
  259. package/registry/examples/command-palette-demo.tsx +235 -236
  260. package/registry/examples/context-menu-demo.tsx +29 -29
  261. package/registry/examples/control-density-contract-demo.tsx +65 -61
  262. package/registry/examples/date-picker-demo.tsx +127 -127
  263. package/registry/examples/divider-demo.tsx +17 -17
  264. package/registry/examples/expanded/activity-heatmap-demo.tsx +29 -29
  265. package/registry/examples/expanded/banner-demo.tsx +48 -48
  266. package/registry/examples/expanded/breadcrumbs-demo.tsx +59 -59
  267. package/registry/examples/expanded/empty-state-demo.tsx +39 -39
  268. package/registry/examples/expanded/file-upload-demo.tsx +60 -60
  269. package/registry/examples/expanded/onboarding-step-demo.tsx +11 -11
  270. package/registry/examples/expanded/slideout-demo.tsx +15 -15
  271. package/registry/examples/expanded/steps-demo.tsx +29 -29
  272. package/registry/examples/expanded/tabs-demo.tsx +13 -13
  273. package/registry/examples/expanded/timeline-demo.tsx +18 -18
  274. package/registry/examples/field-demo.tsx +51 -51
  275. package/registry/examples/hover-card-demo.tsx +23 -23
  276. package/registry/examples/inline-citations-demo.tsx +31 -0
  277. package/registry/examples/input-actions-demo.tsx +36 -0
  278. package/registry/examples/input-demo.tsx +87 -87
  279. package/registry/examples/input-group-demo.tsx +16 -16
  280. package/registry/examples/input-otp-demo.tsx +72 -72
  281. package/registry/examples/item-demo.tsx +46 -46
  282. package/registry/examples/kbd-demo.tsx +12 -11
  283. package/registry/examples/label-demo.tsx +20 -20
  284. package/registry/examples/menu-demo.tsx +122 -122
  285. package/registry/examples/menubar-demo.tsx +34 -34
  286. package/registry/examples/modal-demo.tsx +74 -74
  287. package/registry/examples/native-select-demo.tsx +16 -16
  288. package/registry/examples/navigation-menu-demo.tsx +29 -29
  289. package/registry/examples/pagination-demo.tsx +20 -20
  290. package/registry/examples/popover-demo.tsx +547 -546
  291. package/registry/examples/progress-demo.tsx +37 -37
  292. package/registry/examples/progress-slider-demo.tsx +29 -29
  293. package/registry/examples/radio-card-demo.tsx +51 -51
  294. package/registry/examples/radio-group-demo.tsx +62 -62
  295. package/registry/examples/resizable-demo.tsx +22 -22
  296. package/registry/examples/results-toolbar-demo.tsx +44 -44
  297. package/registry/examples/rolling-count-demo.tsx +39 -0
  298. package/registry/examples/scroll-area-demo.tsx +15 -15
  299. package/registry/examples/segmented-control-demo.tsx +39 -39
  300. package/registry/examples/select-demo.tsx +87 -87
  301. package/registry/examples/sheet-demo.tsx +47 -47
  302. package/registry/examples/shimmer-text-demo.tsx +20 -0
  303. package/registry/examples/sidebar-demo.tsx +101 -57
  304. package/registry/examples/slider-demo.tsx +31 -31
  305. package/registry/examples/social-button-demo.tsx +61 -61
  306. package/registry/examples/spinner-demo.tsx +59 -59
  307. package/registry/examples/streaming-text-demo.tsx +28 -0
  308. package/registry/examples/tabs-demo.tsx +13 -13
  309. package/registry/examples/tag-demo.tsx +29 -29
  310. package/registry/examples/task-list-demo.tsx +74 -0
  311. package/registry/examples/textarea-demo.tsx +79 -79
  312. package/registry/examples/thinking-reasoning-demo.tsx +74 -0
  313. package/registry/examples/thinking-state-demo.tsx +13 -0
  314. package/registry/examples/toast-demo.tsx +35 -35
  315. package/registry/examples/toggle-demo.tsx +59 -59
  316. package/registry/examples/tooltip-demo.tsx +115 -115
  317. package/registry/guidance/USAGE.md +27 -27
  318. package/registry/guidance/charts.LICENSE.txt +24 -0
  319. package/registry/hooks/use-controllable-state.ts +33 -0
  320. package/registry/hooks/use-direction.ts +207 -207
  321. package/registry/hooks/use-listbox-navigation.ts +73 -0
  322. package/registry/hooks/use-motion-end.ts +55 -0
  323. package/registry/hooks/use-reduced-motion.ts +28 -0
  324. package/registry/index.json +1634 -184
  325. package/registry/styles/globals.css +1462 -1570
  326. package/registry.json +364 -10
  327. package/schema/config.schema.json +51 -51
  328. package/schema/registry.schema.json +194 -190
  329. package/schema/tokens.schema.json +167 -163
  330. package/src/cli/command-line.js +194 -194
  331. package/src/cli/config-editors.js +9 -9
  332. package/src/cli/doctor.js +399 -399
  333. package/src/cli/file-transaction.js +302 -295
  334. package/src/cli/global-css.js +153 -153
  335. package/src/cli/index.js +1002 -1009
  336. package/src/cli/install-plan.js +592 -592
  337. package/src/cli/install-receipt.js +171 -171
  338. package/src/cli/jsonc.js +203 -203
  339. package/src/cli/package-install-state.js +254 -254
  340. package/src/cli/package-manager.js +238 -238
  341. package/src/cli/package-plan.js +185 -185
  342. package/src/cli/package-version.js +97 -97
  343. package/src/cli/registry-query.js +207 -207
  344. package/src/cli/reporting.js +55 -55
  345. package/src/cli/schema-validation.js +19 -19
  346. package/src/cli/source-scanner.js +686 -686
  347. package/src/cli/vite-config.js +478 -478
  348. package/tokens/banhaten.tokens.json +458 -224
package/registry/components/expanded/activityFeed.css CHANGED
@@ -1,248 +1,248 @@
1
- .ds-activity-feed {
2
- --activity-feed-bg-accent-purple-subtle: var(--bh-bg-accent-purple-subtle);
3
- --activity-feed-bg-raised: var(--bh-bg-raised);
4
- --activity-feed-bg-success: var(--bh-bg-success-default);
5
- --activity-feed-border-accent-purple-strong: var(--bh-border-accent-purple-strong);
6
- --activity-feed-border-default: var(--bh-border-default);
7
- --activity-feed-border-subtle: var(--bh-border-subtle);
8
- --activity-feed-content-default: var(--bh-content-default);
9
- --activity-feed-content-link: var(--bh-content-link);
10
- --activity-feed-content-on-brand: var(--bh-content-on-brand);
11
- --activity-feed-content-subtle: var(--bh-content-subtle);
12
- --activity-feed-interactive-brand: var(--bh-interactive-brand-default);
13
- --activity-feed-interactive-secondary: var(--bh-interactive-secondary-default);
14
- --activity-feed-radius-full: var(--bh-radius-full);
15
- --activity-feed-radius-sm: var(--bh-radius-sm-4);
16
- --activity-feed-control-radius: var(--bh-control-default);
17
- --activity-feed-space-xxs: var(--bh-space-xxs-2);
18
- --activity-feed-space-xs: var(--bh-space-xs-4);
19
- --activity-feed-space-md: var(--bh-space-md-8);
20
- --activity-feed-space-lg: var(--bh-space-lg-10);
21
- --activity-feed-space-xl: var(--bh-space-xl-12);
22
- --activity-feed-shadow-component: var(--shadow-component-default);
23
- --activity-feed-shadow-color-button: var(--shadow-button-raised);
24
-
25
- box-sizing: border-box;
26
- position: relative;
27
- width: var(--bh-activity-feed-compact-width);
28
- display: flex;
29
- flex-direction: column;
30
- align-items: flex-start;
31
- color: var(--activity-feed-content-default);
32
- font-family: var(--bh-font-family);
33
- letter-spacing: var(--bh-text-base-letter-spacing);
34
- }
35
-
36
- .ds-activity-feed *,
37
- .ds-activity-feed *::before,
38
- .ds-activity-feed *::after {
39
- box-sizing: border-box;
40
- }
41
-
42
- .ds-activity-feed a {
43
- text-decoration: none;
44
- }
45
-
46
- .ds-activity-feed:dir(rtl) {
47
- font-family: var(--bh-font-family);
48
- margin-inline-end: auto;
49
- }
50
-
51
- .ds-activity-feed-item {
52
- position: relative;
53
- width: 100%;
54
- display: flex;
55
- align-items: flex-start;
56
- gap: var(--activity-feed-space-xl);
57
- color: var(--activity-feed-content-default);
58
- }
59
-
60
- .ds-activity-feed-item__indicator {
61
- align-self: stretch;
62
- display: flex;
63
- flex: 0 0 auto;
64
- flex-direction: column;
65
- align-items: center;
66
- gap: var(--activity-feed-space-xxs);
67
- padding-top: var(--activity-feed-space-xxs);
68
- }
69
-
70
- .ds-activity-feed-item__avatar {
71
- position: relative;
72
- width: var(--bh-space-6xl-32);
73
- height: var(--bh-space-6xl-32);
74
- flex: 0 0 auto;
75
- overflow: hidden;
76
- border: var(--bh-space-xxxs-1) solid var(--activity-feed-border-subtle);
77
- border-radius: var(--activity-feed-radius-full);
78
- background: var(--activity-feed-bg-raised);
79
- }
80
-
81
- .ds-activity-feed-item__avatar img {
82
- display: block;
83
- width: 100%;
84
- height: 100%;
85
- object-fit: cover;
86
- }
87
-
88
- .ds-activity-feed-item__line {
89
- width: var(--bh-space-xxxs-1);
90
- min-height: var(--bh-space-xxxs-1);
91
- flex: 1 0 0;
92
- border-radius: var(--activity-feed-radius-full);
93
- background: var(--activity-feed-border-default);
94
- }
95
-
96
- .ds-activity-feed-item__content {
97
- min-width: 0;
98
- flex: 1 0 0;
99
- display: flex;
100
- flex-direction: column;
101
- align-items: flex-start;
102
- gap: var(--activity-feed-space-lg);
103
- }
104
-
105
- .ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__content {
106
- align-items: flex-start;
107
- }
108
-
109
- .ds-activity-feed-item__container {
110
- width: 100%;
111
- display: flex;
112
- flex-direction: column;
113
- align-items: flex-start;
114
- gap: var(--activity-feed-space-lg);
115
- }
116
-
117
- .ds-activity-feed-item__topline {
118
- width: 100%;
119
- display: flex;
120
- align-items: center;
121
- gap: var(--bh-space-sm-6);
122
- }
123
-
124
- .ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__topline {
125
- justify-content: flex-start;
126
- }
127
-
128
- .ds-activity-feed-item__text {
129
- min-width: 0;
130
- flex: 1 0 0;
131
- display: flex;
132
- align-items: center;
133
- gap: var(--activity-feed-space-xs);
134
- color: var(--activity-feed-content-default);
135
- font-size: var(--bh-text-body-md-font-size);
136
- font-weight: var(--bh-font-weight-regular);
137
- line-height: var(--bh-text-body-md-line-height);
138
- white-space: nowrap;
139
- word-break: break-word;
140
- }
141
-
142
- .ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__text {
143
- justify-content: flex-start;
144
- text-align: right;
145
- }
146
-
147
- .ds-activity-feed-item__text strong {
148
- color: var(--activity-feed-content-default);
149
- font-weight: var(--bh-font-weight-medium);
150
- }
151
-
152
- .ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__text strong {
153
- font-weight: var(--bh-font-weight-semibold);
154
- }
155
-
156
- .ds-activity-feed-item__support {
157
- color: var(--activity-feed-content-subtle);
158
- }
159
-
160
- .ds-activity-feed-item__link {
161
- color: var(--activity-feed-content-link);
162
- }
163
-
164
- .ds-activity-feed-item__status {
165
- width: var(--bh-space-3xl-16);
166
- height: var(--bh-space-3xl-16);
167
- flex: 0 0 var(--bh-space-3xl-16);
168
- display: inline-grid;
169
- place-items: center;
170
- padding: var(--bh-space-xxxs-1);
171
- }
172
-
173
- .ds-activity-feed-item__status > span {
174
- width: var(--bh-space-sm-6);
175
- height: var(--bh-space-sm-6);
176
- border-radius: var(--activity-feed-radius-full);
177
- background: var(--activity-feed-bg-success);
178
- }
179
-
180
- .ds-activity-feed-item__caption,
181
- .ds-activity-feed-item__slot {
182
- width: 100%;
183
- min-width: 0;
184
- border-radius: var(--activity-feed-radius-sm);
185
- font-size: var(--bh-text-body-md-font-size);
186
- font-weight: var(--bh-font-weight-regular);
187
- line-height: var(--bh-text-body-md-line-height);
188
- word-break: break-word;
189
- }
190
-
191
- .ds-activity-feed-item__caption {
192
- min-height: calc(var(--bh-space-8xl-48) + var(--bh-space-xxs-2));
193
- display: flex;
194
- align-items: center;
195
- justify-content: flex-start;
196
- border: var(--bh-space-xxxs-1) solid var(--activity-feed-border-subtle);
197
- background: var(--activity-feed-bg-raised);
198
- color: var(--activity-feed-content-default);
199
- padding: var(--activity-feed-space-xl);
200
- }
201
-
202
- .ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__caption {
203
- justify-content: flex-start;
204
- text-align: right;
205
- }
206
-
207
- .ds-activity-feed-item__slot {
208
- height: calc(var(--bh-space-9xl-64) + var(--bh-space-xl-12));
209
- display: grid;
210
- place-items: center;
211
- overflow: hidden;
212
- border: var(--bh-space-xxxs-1) dashed var(--activity-feed-border-accent-purple-strong);
213
- background: var(--activity-feed-bg-accent-purple-subtle);
214
- color: var(--activity-feed-content-subtle);
215
- font-size: var(--bh-text-body-xs-regular-font-size);
216
- line-height: var(--bh-text-body-sm-regular-line-height);
217
- }
218
-
219
- .ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__slot {
220
- place-items: center start;
221
- text-align: right;
222
- }
223
-
224
- .ds-activity-feed-item__timestamp {
225
- width: 100%;
226
- min-width: 0;
227
- color: var(--activity-feed-content-subtle);
228
- font-size: var(--bh-text-body-sm-regular-font-size);
229
- font-weight: var(--bh-font-weight-regular);
230
- line-height: var(--bh-text-body-sm-regular-line-height);
231
- }
232
-
233
- .ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__timestamp {
234
- text-align: right;
235
- }
236
-
237
- .ds-activity-feed-item__actions {
238
- display: flex;
239
- align-items: flex-start;
240
- gap: var(--activity-feed-space-md);
241
- padding-top: var(--activity-feed-space-md);
242
- }
243
-
244
- .ds-activity-feed-item__bottom-space {
245
- width: 100%;
246
- height: calc(var(--bh-space-4xl-20) + var(--bh-space-xxs-2));
247
- flex: 0 0 auto;
248
- }
1
+ .ds-activity-feed {
2
+ --activity-feed-bg-accent-purple-subtle: var(--bh-bg-accent-purple-subtle);
3
+ --activity-feed-bg-raised: var(--bh-bg-raised);
4
+ --activity-feed-bg-success: var(--bh-bg-success-default);
5
+ --activity-feed-border-accent-purple-strong: var(--bh-border-accent-purple-strong);
6
+ --activity-feed-border-default: var(--bh-border-default);
7
+ --activity-feed-border-subtle: var(--bh-border-subtle);
8
+ --activity-feed-content-default: var(--bh-content-default);
9
+ --activity-feed-content-link: var(--bh-content-link);
10
+ --activity-feed-content-on-brand: var(--bh-content-on-brand);
11
+ --activity-feed-content-subtle: var(--bh-content-subtle);
12
+ --activity-feed-interactive-brand: var(--bh-interactive-brand-default);
13
+ --activity-feed-interactive-secondary: var(--bh-interactive-secondary-default);
14
+ --activity-feed-radius-full: var(--bh-radius-full);
15
+ --activity-feed-radius-sm: var(--bh-radius-sm-4);
16
+ --activity-feed-control-radius: var(--bh-control-default);
17
+ --activity-feed-space-xxs: var(--bh-space-xxs-2);
18
+ --activity-feed-space-xs: var(--bh-space-xs-4);
19
+ --activity-feed-space-md: var(--bh-space-md-8);
20
+ --activity-feed-space-lg: var(--bh-space-lg-10);
21
+ --activity-feed-space-xl: var(--bh-space-xl-12);
22
+ --activity-feed-elevation-component: var(--elevation-component-default);
23
+ --activity-feed-elevation-color-button: var(--elevation-button-raised);
24
+
25
+ box-sizing: border-box;
26
+ position: relative;
27
+ width: var(--bh-activity-feed-compact-width);
28
+ display: flex;
29
+ flex-direction: column;
30
+ align-items: flex-start;
31
+ color: var(--activity-feed-content-default);
32
+ font-family: var(--bh-font-family);
33
+ letter-spacing: var(--bh-text-base-letter-spacing);
34
+ }
35
+
36
+ .ds-activity-feed *,
37
+ .ds-activity-feed *::before,
38
+ .ds-activity-feed *::after {
39
+ box-sizing: border-box;
40
+ }
41
+
42
+ .ds-activity-feed a {
43
+ text-decoration: none;
44
+ }
45
+
46
+ .ds-activity-feed:dir(rtl) {
47
+ font-family: var(--bh-font-family);
48
+ margin-inline-end: auto;
49
+ }
50
+
51
+ .ds-activity-feed-item {
52
+ position: relative;
53
+ width: 100%;
54
+ display: flex;
55
+ align-items: flex-start;
56
+ gap: var(--activity-feed-space-xl);
57
+ color: var(--activity-feed-content-default);
58
+ }
59
+
60
+ .ds-activity-feed-item__indicator {
61
+ align-self: stretch;
62
+ display: flex;
63
+ flex: 0 0 auto;
64
+ flex-direction: column;
65
+ align-items: center;
66
+ gap: var(--activity-feed-space-xxs);
67
+ padding-top: var(--activity-feed-space-xxs);
68
+ }
69
+
70
+ .ds-activity-feed-item__avatar {
71
+ position: relative;
72
+ width: var(--bh-space-6xl-32);
73
+ height: var(--bh-space-6xl-32);
74
+ flex: 0 0 auto;
75
+ overflow: hidden;
76
+ border: var(--bh-space-xxxs-1) solid var(--activity-feed-border-subtle);
77
+ border-radius: var(--activity-feed-radius-full);
78
+ background: var(--activity-feed-bg-raised);
79
+ }
80
+
81
+ .ds-activity-feed-item__avatar img {
82
+ display: block;
83
+ width: 100%;
84
+ height: 100%;
85
+ object-fit: cover;
86
+ }
87
+
88
+ .ds-activity-feed-item__line {
89
+ width: var(--bh-space-xxxs-1);
90
+ min-height: var(--bh-space-xxxs-1);
91
+ flex: 1 0 0;
92
+ border-radius: var(--activity-feed-radius-full);
93
+ background: var(--activity-feed-border-default);
94
+ }
95
+
96
+ .ds-activity-feed-item__content {
97
+ min-width: 0;
98
+ flex: 1 0 0;
99
+ display: flex;
100
+ flex-direction: column;
101
+ align-items: flex-start;
102
+ gap: var(--activity-feed-space-lg);
103
+ }
104
+
105
+ .ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__content {
106
+ align-items: flex-start;
107
+ }
108
+
109
+ .ds-activity-feed-item__container {
110
+ width: 100%;
111
+ display: flex;
112
+ flex-direction: column;
113
+ align-items: flex-start;
114
+ gap: var(--activity-feed-space-lg);
115
+ }
116
+
117
+ .ds-activity-feed-item__topline {
118
+ width: 100%;
119
+ display: flex;
120
+ align-items: center;
121
+ gap: var(--bh-space-sm-6);
122
+ }
123
+
124
+ .ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__topline {
125
+ justify-content: flex-start;
126
+ }
127
+
128
+ .ds-activity-feed-item__text {
129
+ min-width: 0;
130
+ flex: 1 0 0;
131
+ display: flex;
132
+ align-items: center;
133
+ gap: var(--activity-feed-space-xs);
134
+ color: var(--activity-feed-content-default);
135
+ font-size: var(--bh-text-body-md-font-size);
136
+ font-weight: var(--bh-font-weight-regular);
137
+ line-height: var(--bh-text-body-md-line-height);
138
+ white-space: nowrap;
139
+ word-break: break-word;
140
+ }
141
+
142
+ .ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__text {
143
+ justify-content: flex-start;
144
+ text-align: right;
145
+ }
146
+
147
+ .ds-activity-feed-item__text strong {
148
+ color: var(--activity-feed-content-default);
149
+ font-weight: var(--bh-font-weight-medium);
150
+ }
151
+
152
+ .ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__text strong {
153
+ font-weight: var(--bh-font-weight-semibold);
154
+ }
155
+
156
+ .ds-activity-feed-item__support {
157
+ color: var(--activity-feed-content-subtle);
158
+ }
159
+
160
+ .ds-activity-feed-item__link {
161
+ color: var(--activity-feed-content-link);
162
+ }
163
+
164
+ .ds-activity-feed-item__status {
165
+ width: var(--bh-space-3xl-16);
166
+ height: var(--bh-space-3xl-16);
167
+ flex: 0 0 var(--bh-space-3xl-16);
168
+ display: inline-grid;
169
+ place-items: center;
170
+ padding: var(--bh-space-xxxs-1);
171
+ }
172
+
173
+ .ds-activity-feed-item__status > span {
174
+ width: var(--bh-space-sm-6);
175
+ height: var(--bh-space-sm-6);
176
+ border-radius: var(--activity-feed-radius-full);
177
+ background: var(--activity-feed-bg-success);
178
+ }
179
+
180
+ .ds-activity-feed-item__caption,
181
+ .ds-activity-feed-item__slot {
182
+ width: 100%;
183
+ min-width: 0;
184
+ border-radius: var(--activity-feed-radius-sm);
185
+ font-size: var(--bh-text-body-md-font-size);
186
+ font-weight: var(--bh-font-weight-regular);
187
+ line-height: var(--bh-text-body-md-line-height);
188
+ word-break: break-word;
189
+ }
190
+
191
+ .ds-activity-feed-item__caption {
192
+ min-height: calc(var(--bh-space-8xl-48) + var(--bh-space-xxs-2));
193
+ display: flex;
194
+ align-items: center;
195
+ justify-content: flex-start;
196
+ border: var(--bh-space-xxxs-1) solid var(--activity-feed-border-subtle);
197
+ background: var(--activity-feed-bg-raised);
198
+ color: var(--activity-feed-content-default);
199
+ padding: var(--activity-feed-space-xl);
200
+ }
201
+
202
+ .ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__caption {
203
+ justify-content: flex-start;
204
+ text-align: right;
205
+ }
206
+
207
+ .ds-activity-feed-item__slot {
208
+ height: calc(var(--bh-space-9xl-64) + var(--bh-space-xl-12));
209
+ display: grid;
210
+ place-items: center;
211
+ overflow: hidden;
212
+ border: var(--bh-space-xxxs-1) dashed var(--activity-feed-border-accent-purple-strong);
213
+ background: var(--activity-feed-bg-accent-purple-subtle);
214
+ color: var(--activity-feed-content-subtle);
215
+ font-size: var(--bh-text-body-xs-regular-font-size);
216
+ line-height: var(--bh-text-body-sm-regular-line-height);
217
+ }
218
+
219
+ .ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__slot {
220
+ place-items: center start;
221
+ text-align: right;
222
+ }
223
+
224
+ .ds-activity-feed-item__timestamp {
225
+ width: 100%;
226
+ min-width: 0;
227
+ color: var(--activity-feed-content-subtle);
228
+ font-size: var(--bh-text-body-sm-regular-font-size);
229
+ font-weight: var(--bh-font-weight-regular);
230
+ line-height: var(--bh-text-body-sm-regular-line-height);
231
+ }
232
+
233
+ .ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__timestamp {
234
+ text-align: right;
235
+ }
236
+
237
+ .ds-activity-feed-item__actions {
238
+ display: flex;
239
+ align-items: flex-start;
240
+ gap: var(--activity-feed-space-md);
241
+ padding-top: var(--activity-feed-space-md);
242
+ }
243
+
244
+ .ds-activity-feed-item__bottom-space {
245
+ width: 100%;
246
+ height: calc(var(--bh-space-4xl-20) + var(--bh-space-xxs-2));
247
+ flex: 0 0 auto;
248
+ }
package/registry/components/expanded/activityHeatmap.css CHANGED
@@ -1,66 +1,66 @@
1
- .ds-activity-heatmap {
2
- --activity-heatmap-cell-size: var(--bh-space-3xl-16);
3
- --activity-heatmap-gap: var(--bh-space-xs-4);
4
- --activity-heatmap-radius: var(--bh-radius-sm-4);
5
- --activity-heatmap-level-0: var(--bh-bg-neutral-medium);
6
- --activity-heatmap-level-1: var(--bh-bg-accent-purple-subtle);
7
- --activity-heatmap-level-2: var(--bh-bg-accent-purple-soft);
8
- --activity-heatmap-level-3: var(--bh-bg-accent-purple-default);
9
- --activity-heatmap-level-4: var(--bh-content-accent-purple-strong);
10
-
11
- box-sizing: border-box;
12
- width: 100%;
13
- min-width: 0;
14
- max-width: 100%;
15
- overflow-x: auto;
16
- overflow-y: hidden;
17
- outline: none;
18
- color: var(--bh-content-default);
19
- font-family: var(--bh-font-family);
20
- }
21
-
22
- .ds-activity-heatmap:focus-visible {
23
- box-shadow: var(--shadow-component-focus-ring);
24
- }
25
-
26
- .ds-activity-heatmap *,
27
- .ds-activity-heatmap *::before,
28
- .ds-activity-heatmap *::after {
29
- box-sizing: border-box;
30
- }
31
-
32
- .ds-activity-heatmap__grid {
33
- display: grid;
34
- grid-auto-flow: column;
35
- grid-auto-columns: var(--activity-heatmap-cell-size);
36
- grid-template-rows: repeat(7, var(--activity-heatmap-cell-size));
37
- justify-content: start;
38
- gap: var(--activity-heatmap-gap);
39
- width: max-content;
40
- min-width: 100%;
41
- }
42
-
43
- .ds-activity-heatmap__cell {
44
- display: block;
45
- inline-size: var(--activity-heatmap-cell-size);
46
- block-size: var(--activity-heatmap-cell-size);
47
- aspect-ratio: 1;
48
- border-radius: var(--activity-heatmap-radius);
49
- background: var(--activity-heatmap-level-0);
50
- }
51
-
52
- .ds-activity-heatmap__cell[data-level="1"] {
53
- background: var(--activity-heatmap-level-1);
54
- }
55
-
56
- .ds-activity-heatmap__cell[data-level="2"] {
57
- background: var(--activity-heatmap-level-2);
58
- }
59
-
60
- .ds-activity-heatmap__cell[data-level="3"] {
61
- background: var(--activity-heatmap-level-3);
62
- }
63
-
64
- .ds-activity-heatmap__cell[data-level="4"] {
65
- background: var(--activity-heatmap-level-4);
66
- }
1
+ .ds-activity-heatmap {
2
+ --activity-heatmap-cell-size: var(--bh-space-3xl-16);
3
+ --activity-heatmap-gap: var(--bh-space-xs-4);
4
+ --activity-heatmap-radius: var(--bh-radius-sm-4);
5
+ --activity-heatmap-level-0: var(--bh-bg-neutral-medium);
6
+ --activity-heatmap-level-1: var(--bh-bg-accent-purple-subtle);
7
+ --activity-heatmap-level-2: var(--bh-bg-accent-purple-soft);
8
+ --activity-heatmap-level-3: var(--bh-bg-accent-purple-default);
9
+ --activity-heatmap-level-4: var(--bh-content-accent-purple-strong);
10
+
11
+ box-sizing: border-box;
12
+ width: 100%;
13
+ min-width: 0;
14
+ max-width: 100%;
15
+ overflow-x: auto;
16
+ overflow-y: hidden;
17
+ outline: none;
18
+ color: var(--bh-content-default);
19
+ font-family: var(--bh-font-family);
20
+ }
21
+
22
+ .ds-activity-heatmap:focus-visible {
23
+ box-shadow: var(--elevation-component-focus-ring);
24
+ }
25
+
26
+ .ds-activity-heatmap *,
27
+ .ds-activity-heatmap *::before,
28
+ .ds-activity-heatmap *::after {
29
+ box-sizing: border-box;
30
+ }
31
+
32
+ .ds-activity-heatmap__grid {
33
+ display: grid;
34
+ grid-auto-flow: column;
35
+ grid-auto-columns: var(--activity-heatmap-cell-size);
36
+ grid-template-rows: repeat(7, var(--activity-heatmap-cell-size));
37
+ justify-content: start;
38
+ gap: var(--activity-heatmap-gap);
39
+ width: max-content;
40
+ min-width: 100%;
41
+ }
42
+
43
+ .ds-activity-heatmap__cell {
44
+ display: block;
45
+ inline-size: var(--activity-heatmap-cell-size);
46
+ block-size: var(--activity-heatmap-cell-size);
47
+ aspect-ratio: 1;
48
+ border-radius: var(--activity-heatmap-radius);
49
+ background: var(--activity-heatmap-level-0);
50
+ }
51
+
52
+ .ds-activity-heatmap__cell[data-level="1"] {
53
+ background: var(--activity-heatmap-level-1);
54
+ }
55
+
56
+ .ds-activity-heatmap__cell[data-level="2"] {
57
+ background: var(--activity-heatmap-level-2);
58
+ }
59
+
60
+ .ds-activity-heatmap__cell[data-level="3"] {
61
+ background: var(--activity-heatmap-level-3);
62
+ }
63
+
64
+ .ds-activity-heatmap__cell[data-level="4"] {
65
+ background: var(--activity-heatmap-level-4);
66
+ }