@deepfuture/dui-components 0.0.21 → 1.0.1

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 (333) hide show
  1. package/README.md +56 -65
  2. package/_install.js +11 -0
  3. package/accordion/accordion-item.d.ts +3 -20
  4. package/accordion/accordion-item.js +92 -292
  5. package/accordion/accordion.d.ts +3 -18
  6. package/accordion/accordion.js +9 -247
  7. package/accordion/index.d.ts +6 -6
  8. package/accordion/index.js +5 -5
  9. package/alert-dialog/alert-dialog-close.d.ts +3 -14
  10. package/alert-dialog/alert-dialog-close.js +4 -34
  11. package/alert-dialog/alert-dialog-popup.d.ts +3 -32
  12. package/alert-dialog/alert-dialog-popup.js +68 -317
  13. package/alert-dialog/alert-dialog-trigger.d.ts +3 -14
  14. package/alert-dialog/alert-dialog-trigger.js +4 -51
  15. package/alert-dialog/alert-dialog.d.ts +3 -30
  16. package/alert-dialog/alert-dialog.js +8 -158
  17. package/alert-dialog/index.d.ts +11 -11
  18. package/alert-dialog/index.js +9 -9
  19. package/all.d.ts +159 -123
  20. package/all.js +134 -231
  21. package/avatar/avatar.d.ts +3 -39
  22. package/avatar/avatar.js +18 -238
  23. package/avatar/index.d.ts +4 -4
  24. package/avatar/index.js +3 -3
  25. package/badge/badge.d.ts +3 -10
  26. package/badge/badge.js +87 -22
  27. package/badge/index.d.ts +2 -3
  28. package/badge/index.js +2 -3
  29. package/breadcrumb/breadcrumb-ellipsis.d.ts +3 -12
  30. package/breadcrumb/breadcrumb-ellipsis.js +8 -34
  31. package/breadcrumb/breadcrumb-item.d.ts +3 -11
  32. package/breadcrumb/breadcrumb-item.js +7 -26
  33. package/breadcrumb/breadcrumb-link.d.ts +3 -12
  34. package/breadcrumb/breadcrumb-link.js +16 -26
  35. package/breadcrumb/breadcrumb-page.d.ts +3 -11
  36. package/breadcrumb/breadcrumb-page.js +8 -31
  37. package/breadcrumb/breadcrumb-separator.d.ts +3 -12
  38. package/breadcrumb/breadcrumb-separator.js +8 -31
  39. package/breadcrumb/breadcrumb.d.ts +3 -12
  40. package/breadcrumb/breadcrumb.js +10 -33
  41. package/breadcrumb/index.d.ts +12 -13
  42. package/breadcrumb/index.js +12 -13
  43. package/button/button.d.ts +3 -32
  44. package/button/button.js +220 -165
  45. package/button/index.d.ts +3 -3
  46. package/button/index.js +3 -3
  47. package/calendar/calendar.d.ts +3 -31
  48. package/calendar/calendar.js +71 -481
  49. package/calendar/index.d.ts +3 -3
  50. package/calendar/index.js +3 -3
  51. package/card/card.d.ts +3 -27
  52. package/card/card.js +80 -163
  53. package/card/index.d.ts +2 -3
  54. package/card/index.js +2 -3
  55. package/card-grid/card-grid.d.ts +3 -15
  56. package/card-grid/card-grid.js +8 -106
  57. package/card-grid/index.d.ts +2 -3
  58. package/card-grid/index.js +2 -3
  59. package/checkbox/checkbox-group.d.ts +3 -34
  60. package/checkbox/checkbox-group.js +11 -188
  61. package/checkbox/checkbox.d.ts +3 -47
  62. package/checkbox/checkbox.js +43 -341
  63. package/checkbox/index.d.ts +6 -6
  64. package/checkbox/index.js +5 -5
  65. package/collapsible/collapsible.d.ts +3 -20
  66. package/collapsible/collapsible.js +82 -277
  67. package/collapsible/index.d.ts +3 -3
  68. package/collapsible/index.js +3 -3
  69. package/combobox/combobox.d.ts +3 -47
  70. package/combobox/combobox.js +136 -538
  71. package/combobox/index.d.ts +4 -4
  72. package/combobox/index.js +3 -3
  73. package/command/command-empty.d.ts +3 -8
  74. package/command/command-empty.js +10 -88
  75. package/command/command-group.d.ts +3 -13
  76. package/command/command-group.js +14 -114
  77. package/command/command-input.d.ts +3 -11
  78. package/command/command-input.js +20 -136
  79. package/command/command-item.d.ts +3 -18
  80. package/command/command-item.js +23 -212
  81. package/command/command-list.d.ts +3 -7
  82. package/command/command-list.js +11 -79
  83. package/command/command-separator.d.ts +3 -5
  84. package/command/command-separator.js +10 -11
  85. package/command/command-shortcut.d.ts +3 -5
  86. package/command/command-shortcut.js +9 -12
  87. package/command/command.d.ts +3 -23
  88. package/command/command.js +10 -339
  89. package/command/index.d.ts +17 -19
  90. package/command/index.js +16 -18
  91. package/data-table/data-table.d.ts +3 -57
  92. package/data-table/data-table.js +85 -449
  93. package/data-table/index.d.ts +3 -4
  94. package/data-table/index.js +2 -3
  95. package/dialog/dialog-close.d.ts +3 -14
  96. package/dialog/dialog-close.js +4 -34
  97. package/dialog/dialog-popup.d.ts +3 -34
  98. package/dialog/dialog-popup.js +70 -336
  99. package/dialog/dialog-trigger.d.ts +3 -14
  100. package/dialog/dialog-trigger.js +4 -51
  101. package/dialog/dialog.d.ts +3 -30
  102. package/dialog/dialog.js +8 -158
  103. package/dialog/index.d.ts +11 -11
  104. package/dialog/index.js +9 -9
  105. package/dropzone/dropzone.d.ts +3 -72
  106. package/dropzone/dropzone.js +29 -407
  107. package/dropzone/index.d.ts +4 -4
  108. package/dropzone/index.js +3 -3
  109. package/field/field.d.ts +3 -30
  110. package/field/field.js +34 -353
  111. package/field/index.d.ts +1 -0
  112. package/field/index.js +1 -0
  113. package/fieldset/fieldset.d.ts +3 -18
  114. package/fieldset/fieldset.js +21 -110
  115. package/fieldset/index.d.ts +1 -0
  116. package/fieldset/index.js +1 -0
  117. package/icon/icon.d.ts +3 -15
  118. package/icon/icon.js +4 -33
  119. package/icon/index.d.ts +2 -3
  120. package/icon/index.js +2 -3
  121. package/input/index.d.ts +3 -3
  122. package/input/index.js +3 -3
  123. package/input/input.d.ts +3 -49
  124. package/input/input.js +57 -238
  125. package/menu/index.d.ts +4 -5
  126. package/menu/index.js +4 -5
  127. package/menu/menu-item.d.ts +3 -13
  128. package/menu/menu-item.js +40 -91
  129. package/menu/menu.d.ts +3 -15
  130. package/menu/menu.js +27 -277
  131. package/menubar/index.d.ts +3 -4
  132. package/menubar/index.js +2 -3
  133. package/menubar/menubar.d.ts +3 -19
  134. package/menubar/menubar.js +12 -183
  135. package/number-field/index.d.ts +3 -3
  136. package/number-field/index.js +3 -3
  137. package/number-field/number-field.d.ts +3 -55
  138. package/number-field/number-field.js +205 -698
  139. package/package.json +125 -113
  140. package/popover/index.d.ts +11 -11
  141. package/popover/index.js +9 -9
  142. package/popover/popover-close.d.ts +3 -12
  143. package/popover/popover-close.js +4 -32
  144. package/popover/popover-popup.d.ts +3 -18
  145. package/popover/popover-popup.js +28 -205
  146. package/popover/popover-trigger.d.ts +3 -13
  147. package/popover/popover-trigger.js +4 -73
  148. package/popover/popover.d.ts +3 -29
  149. package/popover/popover.js +8 -207
  150. package/portal/index.d.ts +3 -4
  151. package/portal/index.js +2 -3
  152. package/portal/portal.d.ts +3 -27
  153. package/portal/portal.js +8 -157
  154. package/preview-card/index.d.ts +9 -9
  155. package/preview-card/index.js +7 -7
  156. package/preview-card/preview-card-popup.d.ts +3 -14
  157. package/preview-card/preview-card-popup.js +29 -194
  158. package/preview-card/preview-card-trigger.d.ts +3 -12
  159. package/preview-card/preview-card-trigger.js +4 -74
  160. package/preview-card/preview-card.d.ts +3 -33
  161. package/preview-card/preview-card.js +8 -239
  162. package/progress/index.d.ts +2 -3
  163. package/progress/index.js +2 -3
  164. package/progress/progress.d.ts +3 -17
  165. package/progress/progress.js +28 -130
  166. package/radio/index.d.ts +6 -6
  167. package/radio/index.js +5 -5
  168. package/radio/radio-group.d.ts +3 -37
  169. package/radio/radio-group.js +8 -200
  170. package/radio/radio.d.ts +3 -28
  171. package/radio/radio.js +38 -213
  172. package/scroll-area/index.d.ts +2 -3
  173. package/scroll-area/index.js +2 -3
  174. package/scroll-area/scroll-area.d.ts +3 -36
  175. package/scroll-area/scroll-area.js +25 -535
  176. package/select/index.d.ts +3 -4
  177. package/select/index.js +2 -3
  178. package/select/select.d.ts +3 -39
  179. package/select/select.js +115 -425
  180. package/separator/index.d.ts +2 -3
  181. package/separator/index.js +2 -3
  182. package/separator/separator.d.ts +3 -10
  183. package/separator/separator.js +23 -85
  184. package/sidebar/index.d.ts +29 -29
  185. package/sidebar/index.js +27 -32
  186. package/sidebar/sidebar-content.d.ts +3 -12
  187. package/sidebar/sidebar-content.js +7 -29
  188. package/sidebar/sidebar-footer.d.ts +3 -10
  189. package/sidebar/sidebar-footer.js +7 -20
  190. package/sidebar/sidebar-group-label.d.ts +3 -15
  191. package/sidebar/sidebar-group-label.js +16 -41
  192. package/sidebar/sidebar-group.d.ts +3 -13
  193. package/sidebar/sidebar-group.js +7 -24
  194. package/sidebar/sidebar-header.d.ts +3 -10
  195. package/sidebar/sidebar-header.js +7 -16
  196. package/sidebar/sidebar-inset.d.ts +3 -13
  197. package/sidebar/sidebar-inset.js +7 -28
  198. package/sidebar/sidebar-menu-button.d.ts +3 -26
  199. package/sidebar/sidebar-menu-button.js +59 -217
  200. package/sidebar/sidebar-menu-item.d.ts +3 -10
  201. package/sidebar/sidebar-menu-item.js +7 -19
  202. package/sidebar/sidebar-menu.d.ts +3 -12
  203. package/sidebar/sidebar-menu.js +7 -25
  204. package/sidebar/sidebar-provider.d.ts +3 -34
  205. package/sidebar/sidebar-provider.js +22 -232
  206. package/sidebar/sidebar-separator.d.ts +3 -10
  207. package/sidebar/sidebar-separator.js +9 -19
  208. package/sidebar/sidebar-trigger.d.ts +3 -14
  209. package/sidebar/sidebar-trigger.js +10 -46
  210. package/sidebar/sidebar.d.ts +3 -19
  211. package/sidebar/sidebar.js +65 -262
  212. package/slider/index.d.ts +3 -3
  213. package/slider/index.js +3 -3
  214. package/slider/slider.d.ts +3 -45
  215. package/slider/slider.js +97 -382
  216. package/spinner/index.d.ts +2 -3
  217. package/spinner/index.js +2 -3
  218. package/spinner/spinner.d.ts +3 -11
  219. package/spinner/spinner.js +20 -163
  220. package/split-button/index.d.ts +3 -1
  221. package/split-button/index.js +3 -1
  222. package/split-button/split-button.d.ts +3 -33
  223. package/split-button/split-button.js +306 -394
  224. package/stepper/index.d.ts +3 -3
  225. package/stepper/index.js +3 -3
  226. package/stepper/stepper.d.ts +3 -41
  227. package/stepper/stepper.js +57 -381
  228. package/switch/index.d.ts +3 -3
  229. package/switch/index.js +3 -3
  230. package/switch/switch.d.ts +3 -30
  231. package/switch/switch.js +63 -228
  232. package/tabs/index.d.ts +12 -12
  233. package/tabs/index.js +11 -11
  234. package/tabs/tab.d.ts +3 -14
  235. package/tabs/tab.js +32 -131
  236. package/tabs/tabs-indicator.d.ts +3 -9
  237. package/tabs/tabs-indicator.js +17 -22
  238. package/tabs/tabs-list.d.ts +3 -15
  239. package/tabs/tabs-list.js +14 -113
  240. package/tabs/tabs-panel.d.ts +3 -16
  241. package/tabs/tabs-panel.js +32 -114
  242. package/tabs/tabs.d.ts +3 -22
  243. package/tabs/tabs.js +8 -170
  244. package/textarea/index.d.ts +4 -4
  245. package/textarea/index.js +3 -3
  246. package/textarea/textarea.d.ts +3 -36
  247. package/textarea/textarea.js +63 -220
  248. package/toggle/index.d.ts +6 -6
  249. package/toggle/index.js +5 -5
  250. package/toggle/toggle-group.d.ts +3 -27
  251. package/toggle/toggle-group.js +9 -224
  252. package/toggle/toggle.d.ts +3 -26
  253. package/toggle/toggle.js +93 -178
  254. package/tokens/properties.css +361 -0
  255. package/tokens/prose.css +250 -0
  256. package/tokens/prose.d.ts +2 -0
  257. package/tokens/prose.js +4 -0
  258. package/tokens/tokens-raw.d.ts +2 -0
  259. package/tokens/tokens-raw.js +2 -0
  260. package/tokens/tokens.css +409 -0
  261. package/tokens/tokens.d.ts +2 -0
  262. package/tokens/tokens.js +5 -0
  263. package/toolbar/index.d.ts +2 -3
  264. package/toolbar/index.js +2 -3
  265. package/toolbar/toolbar.d.ts +3 -11
  266. package/toolbar/toolbar.js +25 -116
  267. package/tooltip/index.d.ts +9 -9
  268. package/tooltip/index.js +7 -7
  269. package/tooltip/tooltip-popup.d.ts +3 -14
  270. package/tooltip/tooltip-popup.js +31 -185
  271. package/tooltip/tooltip-trigger.d.ts +3 -14
  272. package/tooltip/tooltip-trigger.js +5 -148
  273. package/tooltip/tooltip.d.ts +3 -35
  274. package/tooltip/tooltip.js +8 -253
  275. package/trunc/index.d.ts +2 -3
  276. package/trunc/index.js +2 -3
  277. package/trunc/trunc.d.ts +3 -17
  278. package/trunc/trunc.js +10 -108
  279. package/_deprecated/center/center.d.ts +0 -14
  280. package/_deprecated/center/center.js +0 -37
  281. package/_deprecated/center/index.d.ts +0 -3
  282. package/_deprecated/center/index.js +0 -3
  283. package/_deprecated/center/register.js +0 -4
  284. package/_deprecated/hstack/hstack.d.ts +0 -25
  285. package/_deprecated/hstack/hstack.js +0 -187
  286. package/_deprecated/hstack/index.d.ts +0 -4
  287. package/_deprecated/hstack/index.js +0 -3
  288. package/_deprecated/hstack/register.d.ts +0 -1
  289. package/_deprecated/hstack/register.js +0 -4
  290. package/_deprecated/page-inset/index.d.ts +0 -3
  291. package/_deprecated/page-inset/index.js +0 -3
  292. package/_deprecated/page-inset/page-inset.d.ts +0 -28
  293. package/_deprecated/page-inset/page-inset.js +0 -151
  294. package/_deprecated/page-inset/register.d.ts +0 -1
  295. package/_deprecated/page-inset/register.js +0 -4
  296. package/_deprecated/vstack/index.d.ts +0 -3
  297. package/_deprecated/vstack/index.js +0 -3
  298. package/_deprecated/vstack/register.d.ts +0 -1
  299. package/_deprecated/vstack/register.js +0 -4
  300. package/_deprecated/vstack/vstack.d.ts +0 -17
  301. package/_deprecated/vstack/vstack.js +0 -125
  302. package/accordion/accordion-context.d.ts +0 -15
  303. package/accordion/accordion-context.js +0 -3
  304. package/alert-dialog/alert-dialog-context.d.ts +0 -13
  305. package/alert-dialog/alert-dialog-context.js +0 -3
  306. package/checkbox/checkbox-group-context.d.ts +0 -11
  307. package/checkbox/checkbox-group-context.js +0 -3
  308. package/command/command-context.d.ts +0 -30
  309. package/command/command-context.js +0 -3
  310. package/command/command-score.d.ts +0 -6
  311. package/command/command-score.js +0 -31
  312. package/dialog/dialog-context.d.ts +0 -13
  313. package/dialog/dialog-context.js +0 -3
  314. package/global.d.ts +0 -179
  315. package/menubar/menubar-context.d.ts +0 -9
  316. package/menubar/menubar-context.js +0 -2
  317. package/popover/popover-context.d.ts +0 -17
  318. package/popover/popover-context.js +0 -3
  319. package/preview-card/preview-card-context.d.ts +0 -16
  320. package/preview-card/preview-card-context.js +0 -3
  321. package/radio/radio-group-context.d.ts +0 -11
  322. package/radio/radio-group-context.js +0 -2
  323. package/sidebar/sidebar-context.d.ts +0 -15
  324. package/sidebar/sidebar-context.js +0 -3
  325. package/split-button/register.d.ts +0 -1
  326. package/split-button/register.js +0 -4
  327. package/tabs/tabs-context.d.ts +0 -8
  328. package/tabs/tabs-context.js +0 -2
  329. package/toggle/toggle-group-context.d.ts +0 -9
  330. package/toggle/toggle-group-context.js +0 -2
  331. package/tooltip/tooltip-context.d.ts +0 -17
  332. package/tooltip/tooltip-context.js +0 -3
  333. /package/{_deprecated/center/register.d.ts → _install.d.ts} +0 -0
package/tokens/tokens.css ADDED
@@ -0,0 +1,409 @@
1
+ /* =================================================================
2
+ * DUI Design Tokens
3
+ * =================================================================
4
+ * Combined token system: spacing, typography, borders, elevation,
5
+ * motion, colors, sizing, and focus.
6
+ *
7
+ * Tokens are declared on :root so they cascade through the entire
8
+ * document, including into shadow DOM via CSS custom property
9
+ * inheritance.
10
+ *
11
+ * Dark mode: apply data-theme="dark" on <html> to switch palettes.
12
+ * ================================================================= */
13
+
14
+ :root {
15
+ /* -----------------------------------------------------------
16
+ * Spacing (Tailwind base-4 system)
17
+ * ----------------------------------------------------------- */
18
+ --space-0: 0;
19
+ --space-px: 1px;
20
+ --space-0_5: 0.125rem; /* 2px */
21
+ --space-1: 0.25rem; /* 4px */
22
+ --space-1_5: 0.375rem; /* 6px */
23
+ --space-2: 0.5rem; /* 8px */
24
+ --space-2_5: 0.625rem; /* 10px */
25
+ --space-3: 0.75rem; /* 12px */
26
+ --space-3_5: 0.875rem; /* 14px */
27
+ --space-4: 1rem; /* 16px */
28
+ --space-4_5: 1.125rem; /* 18px */
29
+ --space-5: 1.25rem; /* 20px */
30
+ --space-6: 1.5rem; /* 24px */
31
+ --space-7: 1.75rem; /* 28px */
32
+ --space-8: 2rem; /* 32px */
33
+ --space-9: 2.25rem; /* 36px */
34
+ --space-10: 2.5rem; /* 40px */
35
+ --space-11: 2.75rem; /* 44px */
36
+ --space-12: 3rem; /* 48px */
37
+ --space-14: 3.5rem; /* 56px */
38
+ --space-16: 4rem; /* 64px */
39
+ --space-20: 5rem; /* 80px */
40
+ --space-24: 6rem; /* 96px */
41
+ --space-28: 7rem; /* 112px */
42
+ --space-32: 8rem; /* 128px */
43
+ --space-36: 9rem; /* 144px */
44
+ --space-40: 10rem; /* 160px */
45
+ --space-44: 11rem; /* 176px */
46
+ --space-48: 12rem; /* 192px */
47
+ --space-52: 13rem; /* 208px */
48
+ --space-56: 14rem; /* 224px */
49
+ --space-60: 15rem; /* 240px */
50
+ --space-64: 16rem; /* 256px */
51
+ --space-72: 18rem; /* 288px */
52
+ --space-80: 20rem; /* 320px */
53
+ --space-96: 24rem; /* 384px */
54
+
55
+ /* -----------------------------------------------------------
56
+ * Typography
57
+ * ----------------------------------------------------------- */
58
+ --font-sans:
59
+ 'Inter', system-ui, -apple-system, sans-serif,
60
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
61
+ --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
62
+ --font-mono:
63
+ 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo,
64
+ Consolas, "Liberation Mono", monospace;
65
+
66
+ /* -----------------------------------------------------------
67
+ * Type scale
68
+ * -----------------------------------------------------------
69
+ * Each size is paired with a line-height variable. The
70
+ * line-height is a unitless ratio; multiplied by the size,
71
+ * it yields the target leading (shown in comments).
72
+ * ----------------------------------------------------------- */
73
+
74
+ --text-2xs: 0.625rem; /* 10px */
75
+ --text-2xs--line-height: calc(0.75 / 0.625); /* 12px */
76
+
77
+ --text-xs: 0.75rem; /* 12px */
78
+ --text-xs--line-height: calc(1 / 0.75); /* 16px */
79
+
80
+ --text-sm: 0.875rem; /* 14px */
81
+ --text-sm--line-height: calc(1.25 / 0.875); /* 20px */
82
+
83
+ --text-base: 1rem; /* 16px */
84
+ --text-base--line-height: calc(1.5 / 1); /* 24px */
85
+
86
+ --text-lg: 1.125rem; /* 18px */
87
+ --text-lg--line-height: calc(1.75 / 1.125); /* 28px */
88
+
89
+ --text-xl: 1.25rem; /* 20px */
90
+ --text-xl--line-height: calc(1.75 / 1.25); /* 28px */
91
+
92
+ --text-2xl: 1.5rem; /* 24px */
93
+ --text-2xl--line-height: calc(2 / 1.5); /* 32px */
94
+
95
+ --text-3xl: 1.875rem; /* 30px */
96
+ --text-3xl--line-height: calc(2.25 / 1.875); /* 36px */
97
+
98
+ --text-4xl: 2.25rem; /* 36px */
99
+ --text-4xl--line-height: calc(2.5 / 2.25); /* 40px */
100
+
101
+ --text-5xl: 3rem; /* 48px */
102
+ --text-5xl--line-height: 1;
103
+
104
+ --text-6xl: 3.75rem; /* 60px */
105
+ --text-6xl--line-height: 1;
106
+
107
+ --text-7xl: 4.5rem; /* 72px */
108
+ --text-7xl--line-height: 1;
109
+
110
+ --text-8xl: 6rem; /* 96px */
111
+ --text-8xl--line-height: 1;
112
+
113
+ --text-9xl: 8rem; /* 128px */
114
+ --text-9xl--line-height: 1;
115
+
116
+ --letter-spacing-tightest: -0.02em;
117
+ --letter-spacing-tighter: -0.015em;
118
+ --letter-spacing-tight: -0.01em;
119
+ --letter-spacing-normal: 0em;
120
+ --letter-spacing-wide: 0.006em;
121
+ --letter-spacing-wider: 0.012em;
122
+ --letter-spacing-widest: 0.018em;
123
+
124
+ --font-weight-regular: 400;
125
+ --font-weight-medium: 500;
126
+ --font-weight-semibold: 600;
127
+ --font-weight-bold: 700;
128
+
129
+ --line-height-none: 1;
130
+ --line-height-tight: 1.25;
131
+ --line-height-snug: 1.375;
132
+ --line-height-normal: 1.5;
133
+ --line-height-relaxed: 1.625;
134
+
135
+ /* -----------------------------------------------------------
136
+ * Borders
137
+ * ----------------------------------------------------------- */
138
+ --radius-none: 0;
139
+ --radius-xs: 0.125rem;
140
+ --radius-sm: 0.25rem;
141
+ --radius-md: 0.5rem;
142
+ --radius-lg: 1rem;
143
+ --radius-xl: 1.5rem;
144
+ --radius-2xl: 2rem;
145
+ --radius-full: 9999px;
146
+
147
+ --border-width-hairline: 0.5px;
148
+ --border-width-thin: 1px;
149
+ --border-width-medium: 2px;
150
+ --border-width-thick: 4px;
151
+
152
+ /* -----------------------------------------------------------
153
+ * Elevation
154
+ * ----------------------------------------------------------- */
155
+ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
156
+ --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
157
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
158
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
159
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
160
+ --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
161
+ --shadow-none: 0 0 0 0 transparent;
162
+
163
+ --z-base: 0;
164
+ --z-dropdown: 700;
165
+ --z-sticky: 800;
166
+ --z-overlay: 900;
167
+ --z-modal: 1000;
168
+ --z-popover: 1100;
169
+ --z-toast: 1200;
170
+ --z-tooltip: 1300;
171
+
172
+ /* -----------------------------------------------------------
173
+ * Motion
174
+ * ----------------------------------------------------------- */
175
+ --duration-instant: 50ms;
176
+ --duration-fastest: 75ms;
177
+ --duration-faster: 100ms;
178
+ --duration-fast: 150ms;
179
+ --duration-normal: 250ms;
180
+ --duration-slow: 400ms;
181
+ --duration-slower: 700ms;
182
+
183
+ --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
184
+ --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
185
+ --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
186
+ --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
187
+ --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
188
+ --ease-in-1: cubic-bezier(0.25, 0, 1, 1);
189
+ --ease-in-2: cubic-bezier(0.5, 0, 1, 1);
190
+ --ease-in-3: cubic-bezier(0.7, 0, 1, 1);
191
+ --ease-in-4: cubic-bezier(0.9, 0, 1, 1);
192
+ --ease-in-5: cubic-bezier(1, 0, 1, 1);
193
+ --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
194
+ --ease-out-2: cubic-bezier(0, 0, 0.5, 1);
195
+ --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
196
+ --ease-out-4: cubic-bezier(0, 0, 0.1, 1);
197
+ --ease-out-5: cubic-bezier(0, 0, 0, 1);
198
+ --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
199
+ --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
200
+ --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
201
+ --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);
202
+ --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);
203
+
204
+ --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);
205
+ --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);
206
+ --ease-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);
207
+ --ease-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
208
+ --ease-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
209
+ --ease-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);
210
+ --ease-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
211
+ --ease-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);
212
+ --ease-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
213
+ --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);
214
+ --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);
215
+ --ease-quart-in-out: cubic-bezier(0.77, 0, 0.175, 1);
216
+ --ease-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);
217
+ --ease-quint-out: cubic-bezier(0.23, 1, 0.32, 1);
218
+ --ease-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1);
219
+ --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);
220
+ --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);
221
+ --ease-expo-in-out: cubic-bezier(1, 0, 0, 1);
222
+ --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);
223
+ --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);
224
+ --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
225
+
226
+ /* -----------------------------------------------------------
227
+ * Filters (presets for filter / backdrop-filter tokens)
228
+ * ----------------------------------------------------------- */
229
+ --filter-none: none;
230
+ --filter-blur-sm: blur(4px);
231
+ --filter-blur-md: blur(8px);
232
+ --filter-blur-lg: blur(16px);
233
+ --filter-blur-xl: blur(24px);
234
+ --filter-brightness-dim: brightness(0.8);
235
+ --filter-brightness-bright: brightness(1.15);
236
+ --filter-saturate-muted: saturate(0.5);
237
+ --filter-saturate-vivid: saturate(1.5);
238
+ --filter-grayscale: grayscale(1);
239
+
240
+ /* -----------------------------------------------------------
241
+ * Clip Paths (shape presets)
242
+ * ----------------------------------------------------------- */
243
+ --clip-none: none;
244
+ --clip-circle: circle(50%);
245
+ --clip-squircle: inset(0 round 30%);
246
+ --clip-hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
247
+ --clip-octagon: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);
248
+ --clip-chevron-right: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%);
249
+ --clip-bevel: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%);
250
+
251
+ /* -----------------------------------------------------------
252
+ * Component Sizing
253
+ * ----------------------------------------------------------- */
254
+ --component-height-xxs: 1.25rem; /* 20px */
255
+ --component-height-xs: 1.5rem; /* 24px */
256
+ --component-height-sm: 1.75rem; /* 28px */
257
+ --component-height-md: 2rem; /* 32px */
258
+ --component-height-lg: 2.25rem; /* 36px */
259
+ --component-height-xl: 2.5rem; /* 40px */
260
+
261
+ /* -----------------------------------------------------------
262
+ * Focus Ring
263
+ * ----------------------------------------------------------- */
264
+ --focus-ring-color: color-mix(in oklch, var(--accent), transparent 50%);
265
+ --focus-ring-width: 3px;
266
+ --focus-ring-offset: 0px;
267
+ --focus-ring-duration: var(--duration-fast);
268
+ --focus-ring-easing: var(--ease-out-3);
269
+
270
+ /* -----------------------------------------------------------
271
+ * Colors: Brand (theme-independent)
272
+ * ----------------------------------------------------------- */
273
+ --brand: oklch(0.728 0.1304 73.28);
274
+ --brand-foreground: oklch(1 0.02 73.28);
275
+ }
276
+
277
+ /* =================================================================
278
+ * COLOR SYSTEM
279
+ * =================================================================
280
+ * Built on two principles:
281
+ * 1. Operations on a base — colors are relationships, not fixed values.
282
+ * 2. Fewer primitives, more derivation — 4 primitives, everything
283
+ * else computed via oklch(from ...) and color-mix().
284
+ *
285
+ * Layer 1: Primitives (only values a theme author picks)
286
+ * Layer 2: Derived tokens (computed from primitives, never per-theme)
287
+ * Layer 3: Interaction states (component-level, not tokens)
288
+ * ================================================================= */
289
+
290
+ /* -----------------------------------------------------------------
291
+ * LIGHT THEME (default)
292
+ * ----------------------------------------------------------------- */
293
+ :root:not([data-theme="dark"]) {
294
+ /* --- Layer 1: Primitives --- */
295
+ --background: oklch(0.97 0 0);
296
+ --foreground: oklch(0.15 0 0);
297
+ --accent: oklch(0.55 0.25 260);
298
+ --destructive: oklch(0.55 0.22 25);
299
+ }
300
+
301
+ /* -----------------------------------------------------------------
302
+ * DARK THEME
303
+ * ----------------------------------------------------------------- */
304
+ :root[data-theme="dark"] {
305
+ /* --- Layer 1: Primitives --- */
306
+ --background: oklch(0.15 0.015 260);
307
+ --foreground: oklch(0.93 0 0);
308
+ --accent: oklch(0.75 0.18 260);
309
+ --destructive: oklch(0.70 0.18 25);
310
+ }
311
+
312
+ /* -----------------------------------------------------------------
313
+ * Layer 2: Derived tokens (computed from primitives)
314
+ * Defined once — same rules for light and dark.
315
+ * ----------------------------------------------------------------- */
316
+ :root {
317
+ /* Surfaces — lightness offsets from background.
318
+ Positive = elevated (brighter). Negative = sunken (darker). */
319
+ --sunken-2: oklch(from var(--background) calc(l - 0.03) c h);
320
+ --sunken-1: oklch(from var(--background) calc(l - 0.01) c h);
321
+ --surface-1: oklch(from var(--background) calc(l + 0.02) c h);
322
+ --surface-2: oklch(from var(--background) calc(l + 0.05) c h);
323
+ --surface-3: oklch(from var(--background) calc(l + 0.09) c h);
324
+
325
+ /* Borders — foreground at reduced alpha.
326
+ Semi-transparent so they adapt to any surface. */
327
+ --border: oklch(from var(--foreground) l c h / 0.15);
328
+ --border-strong: oklch(from var(--foreground) l c h / 0.25);
329
+
330
+ /* Text tiers — foreground at reduced alpha.
331
+ Semi-transparent so they adapt to any surface. */
332
+ --text-1: oklch(from var(--foreground) l c h / 0.90);
333
+ --text-2: oklch(from var(--foreground) l c h / 0.63);
334
+ --text-3: oklch(from var(--foreground) l c h / 0.45);
335
+
336
+ /* Accent surfaces — for badges, pills, tinted cards */
337
+ --accent-subtle: oklch(from var(--accent) l c h / 0.10);
338
+ --accent-text: oklch(from var(--accent) calc(l * 1.1) calc(c * 0.8) h);
339
+
340
+ /* Destructive surfaces */
341
+ --destructive-subtle: oklch(from var(--destructive) l c h / 0.10);
342
+ --destructive-text: var(--destructive);
343
+
344
+ /* Utility — scrim overlay for modals/dialogs */
345
+ --scrim: oklch(from var(--foreground) l c h / 0.35);
346
+
347
+ /* Meter / progress bar defaults */
348
+ --meter-track: var(--surface-1);
349
+ --meter-fill: var(--accent);
350
+
351
+ /* Chart palette (theme-independent) */
352
+ --chart-1: oklch(0.58 0.17 35);
353
+ --chart-2: oklch(0.55 0.13 185);
354
+ --chart-3: oklch(0.52 0.14 265);
355
+ --chart-4: oklch(0.62 0.15 85);
356
+ --chart-5: oklch(0.55 0.16 310);
357
+
358
+ /* -----------------------------------------------------------
359
+ * Prose (rich-text / markdown content)
360
+ * ----------------------------------------------------------- */
361
+ --prose-body: var(--text-1);
362
+ --prose-headings: var(--foreground);
363
+ --prose-lead: var(--text-2);
364
+ --prose-links: var(--accent);
365
+ --prose-links-hover: var(--accent-text);
366
+ --prose-bold: var(--foreground);
367
+ --prose-code: var(--foreground);
368
+ --prose-code-bg: var(--surface-1);
369
+ --prose-pre-bg: var(--surface-1);
370
+ --prose-pre-border: var(--border);
371
+ --prose-blockquote-border: var(--accent);
372
+ --prose-blockquote-text: var(--text-2);
373
+ --prose-hr: var(--border);
374
+ --prose-th-border: var(--border-strong);
375
+ --prose-td-border: var(--border);
376
+ --prose-caption: var(--text-3);
377
+ --prose-kbd-bg: var(--surface-2);
378
+ --prose-kbd-border: var(--border-strong);
379
+ }
380
+
381
+ /* =================================================================
382
+ * Base document styles
383
+ * ================================================================= */
384
+ :root {
385
+ color: var(--text-1);
386
+ font-family: var(--font-sans);
387
+ line-height: var(--line-height-normal);
388
+ -webkit-font-smoothing: antialiased;
389
+ -moz-osx-font-smoothing: grayscale;
390
+ }
391
+
392
+ /* =================================================================
393
+ * Heading defaults
394
+ * ================================================================= */
395
+ h1 { font-size: var(--text-4xl); line-height: var(--text-4xl--line-height); } /* 36 / 40 */
396
+ h2 { font-size: var(--text-3xl); line-height: var(--text-3xl--line-height); } /* 30 / 36 */
397
+ h3 { font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); } /* 24 / 32 */
398
+ h4 { font-size: var(--text-xl); line-height: var(--text-xl--line-height); } /* 20 / 28 */
399
+ h5 { font-size: var(--text-lg); line-height: var(--text-lg--line-height); } /* 18 / 28 */
400
+ h6 { font-size: var(--text-base); line-height: var(--text-base--line-height); } /* 16 / 24 */
401
+
402
+ /* =================================================================
403
+ * Baseline grid trim — prose elements anchor visible glyph edges,
404
+ * not CSS line-box edges, to the 4px grid.
405
+ * ================================================================= */
406
+ h1, h2, h3, h4, h5, h6,
407
+ p, li, blockquote, dt, dd {
408
+ text-box: trim-both cap alphabetic;
409
+ }
package/tokens/tokens.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const tokenSheet: CSSStyleSheet;
2
+ export { tokenSheet };
package/tokens/tokens.js ADDED
@@ -0,0 +1,5 @@
1
+ const tokensCSS = "/* =================================================================\n * DUI Design Tokens\n * =================================================================\n * Combined token system: spacing, typography, borders, elevation,\n * motion, colors, sizing, and focus.\n *\n * Tokens are declared on :root so they cascade through the entire\n * document, including into shadow DOM via CSS custom property\n * inheritance.\n *\n * Dark mode: apply data-theme=\"dark\" on <html> to switch palettes.\n * ================================================================= */\n\n:root {\n /* -----------------------------------------------------------\n * Spacing (Tailwind base-4 system)\n * ----------------------------------------------------------- */\n --space-0: 0;\n --space-px: 1px;\n --space-0_5: 0.125rem; /* 2px */\n --space-1: 0.25rem; /* 4px */\n --space-1_5: 0.375rem; /* 6px */\n --space-2: 0.5rem; /* 8px */\n --space-2_5: 0.625rem; /* 10px */\n --space-3: 0.75rem; /* 12px */\n --space-3_5: 0.875rem; /* 14px */\n --space-4: 1rem; /* 16px */\n --space-4_5: 1.125rem; /* 18px */\n --space-5: 1.25rem; /* 20px */\n --space-6: 1.5rem; /* 24px */\n --space-7: 1.75rem; /* 28px */\n --space-8: 2rem; /* 32px */\n --space-9: 2.25rem; /* 36px */\n --space-10: 2.5rem; /* 40px */\n --space-11: 2.75rem; /* 44px */\n --space-12: 3rem; /* 48px */\n --space-14: 3.5rem; /* 56px */\n --space-16: 4rem; /* 64px */\n --space-20: 5rem; /* 80px */\n --space-24: 6rem; /* 96px */\n --space-28: 7rem; /* 112px */\n --space-32: 8rem; /* 128px */\n --space-36: 9rem; /* 144px */\n --space-40: 10rem; /* 160px */\n --space-44: 11rem; /* 176px */\n --space-48: 12rem; /* 192px */\n --space-52: 13rem; /* 208px */\n --space-56: 14rem; /* 224px */\n --space-60: 15rem; /* 240px */\n --space-64: 16rem; /* 256px */\n --space-72: 18rem; /* 288px */\n --space-80: 20rem; /* 320px */\n --space-96: 24rem; /* 384px */\n\n /* -----------------------------------------------------------\n * Typography\n * ----------------------------------------------------------- */\n --font-sans:\n 'Inter', system-ui, -apple-system, sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n --font-mono:\n 'JetBrains Mono', ui-monospace, SFMono-Regular, \"SF Mono\", Menlo,\n Consolas, \"Liberation Mono\", monospace;\n\n /* -----------------------------------------------------------\n * Type scale\n * -----------------------------------------------------------\n * Each size is paired with a line-height variable. The\n * line-height is a unitless ratio; multiplied by the size,\n * it yields the target leading (shown in comments).\n * ----------------------------------------------------------- */\n\n --text-2xs: 0.625rem; /* 10px */\n --text-2xs--line-height: calc(0.75 / 0.625); /* 12px */\n\n --text-xs: 0.75rem; /* 12px */\n --text-xs--line-height: calc(1 / 0.75); /* 16px */\n\n --text-sm: 0.875rem; /* 14px */\n --text-sm--line-height: calc(1.25 / 0.875); /* 20px */\n\n --text-base: 1rem; /* 16px */\n --text-base--line-height: calc(1.5 / 1); /* 24px */\n\n --text-lg: 1.125rem; /* 18px */\n --text-lg--line-height: calc(1.75 / 1.125); /* 28px */\n\n --text-xl: 1.25rem; /* 20px */\n --text-xl--line-height: calc(1.75 / 1.25); /* 28px */\n\n --text-2xl: 1.5rem; /* 24px */\n --text-2xl--line-height: calc(2 / 1.5); /* 32px */\n\n --text-3xl: 1.875rem; /* 30px */\n --text-3xl--line-height: calc(2.25 / 1.875); /* 36px */\n\n --text-4xl: 2.25rem; /* 36px */\n --text-4xl--line-height: calc(2.5 / 2.25); /* 40px */\n\n --text-5xl: 3rem; /* 48px */\n --text-5xl--line-height: 1;\n\n --text-6xl: 3.75rem; /* 60px */\n --text-6xl--line-height: 1;\n\n --text-7xl: 4.5rem; /* 72px */\n --text-7xl--line-height: 1;\n\n --text-8xl: 6rem; /* 96px */\n --text-8xl--line-height: 1;\n\n --text-9xl: 8rem; /* 128px */\n --text-9xl--line-height: 1;\n\n --letter-spacing-tightest: -0.02em;\n --letter-spacing-tighter: -0.015em;\n --letter-spacing-tight: -0.01em;\n --letter-spacing-normal: 0em;\n --letter-spacing-wide: 0.006em;\n --letter-spacing-wider: 0.012em;\n --letter-spacing-widest: 0.018em;\n\n --font-weight-regular: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n\n --line-height-none: 1;\n --line-height-tight: 1.25;\n --line-height-snug: 1.375;\n --line-height-normal: 1.5;\n --line-height-relaxed: 1.625;\n\n /* -----------------------------------------------------------\n * Borders\n * ----------------------------------------------------------- */\n --radius-none: 0;\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.5rem;\n --radius-lg: 1rem;\n --radius-xl: 1.5rem;\n --radius-2xl: 2rem;\n --radius-full: 9999px;\n\n --border-width-hairline: 0.5px;\n --border-width-thin: 1px;\n --border-width-medium: 2px;\n --border-width-thick: 4px;\n\n /* -----------------------------------------------------------\n * Elevation\n * ----------------------------------------------------------- */\n --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --shadow-none: 0 0 0 0 transparent;\n\n --z-base: 0;\n --z-dropdown: 700;\n --z-sticky: 800;\n --z-overlay: 900;\n --z-modal: 1000;\n --z-popover: 1100;\n --z-toast: 1200;\n --z-tooltip: 1300;\n\n /* -----------------------------------------------------------\n * Motion\n * ----------------------------------------------------------- */\n --duration-instant: 50ms;\n --duration-fastest: 75ms;\n --duration-faster: 100ms;\n --duration-fast: 150ms;\n --duration-normal: 250ms;\n --duration-slow: 400ms;\n --duration-slower: 700ms;\n\n --ease-1: cubic-bezier(0.25, 0, 0.5, 1);\n --ease-2: cubic-bezier(0.25, 0, 0.4, 1);\n --ease-3: cubic-bezier(0.25, 0, 0.3, 1);\n --ease-4: cubic-bezier(0.25, 0, 0.2, 1);\n --ease-5: cubic-bezier(0.25, 0, 0.1, 1);\n --ease-in-1: cubic-bezier(0.25, 0, 1, 1);\n --ease-in-2: cubic-bezier(0.5, 0, 1, 1);\n --ease-in-3: cubic-bezier(0.7, 0, 1, 1);\n --ease-in-4: cubic-bezier(0.9, 0, 1, 1);\n --ease-in-5: cubic-bezier(1, 0, 1, 1);\n --ease-out-1: cubic-bezier(0, 0, 0.75, 1);\n --ease-out-2: cubic-bezier(0, 0, 0.5, 1);\n --ease-out-3: cubic-bezier(0, 0, 0.3, 1);\n --ease-out-4: cubic-bezier(0, 0, 0.1, 1);\n --ease-out-5: cubic-bezier(0, 0, 0, 1);\n --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);\n --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);\n --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);\n --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);\n --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);\n\n --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);\n --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);\n --ease-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);\n --ease-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);\n --ease-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n --ease-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);\n --ease-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n --ease-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);\n --ease-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);\n --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);\n --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);\n --ease-quart-in-out: cubic-bezier(0.77, 0, 0.175, 1);\n --ease-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n --ease-quint-out: cubic-bezier(0.23, 1, 0.32, 1);\n --ease-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1);\n --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);\n --ease-expo-in-out: cubic-bezier(1, 0, 0, 1);\n --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);\n --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);\n --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);\n\n /* -----------------------------------------------------------\n * Filters (presets for filter / backdrop-filter tokens)\n * ----------------------------------------------------------- */\n --filter-none: none;\n --filter-blur-sm: blur(4px);\n --filter-blur-md: blur(8px);\n --filter-blur-lg: blur(16px);\n --filter-blur-xl: blur(24px);\n --filter-brightness-dim: brightness(0.8);\n --filter-brightness-bright: brightness(1.15);\n --filter-saturate-muted: saturate(0.5);\n --filter-saturate-vivid: saturate(1.5);\n --filter-grayscale: grayscale(1);\n\n /* -----------------------------------------------------------\n * Clip Paths (shape presets)\n * ----------------------------------------------------------- */\n --clip-none: none;\n --clip-circle: circle(50%);\n --clip-squircle: inset(0 round 30%);\n --clip-hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n --clip-octagon: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);\n --clip-chevron-right: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%);\n --clip-bevel: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%);\n\n /* -----------------------------------------------------------\n * Component Sizing\n * ----------------------------------------------------------- */\n --component-height-xxs: 1.25rem; /* 20px */\n --component-height-xs: 1.5rem; /* 24px */\n --component-height-sm: 1.75rem; /* 28px */\n --component-height-md: 2rem; /* 32px */\n --component-height-lg: 2.25rem; /* 36px */\n --component-height-xl: 2.5rem; /* 40px */\n\n /* -----------------------------------------------------------\n * Focus Ring\n * ----------------------------------------------------------- */\n --focus-ring-color: color-mix(in oklch, var(--accent), transparent 50%);\n --focus-ring-width: 3px;\n --focus-ring-offset: 0px;\n --focus-ring-duration: var(--duration-fast);\n --focus-ring-easing: var(--ease-out-3);\n\n /* -----------------------------------------------------------\n * Colors: Brand (theme-independent)\n * ----------------------------------------------------------- */\n --brand: oklch(0.728 0.1304 73.28);\n --brand-foreground: oklch(1 0.02 73.28);\n}\n\n/* =================================================================\n * COLOR SYSTEM\n * =================================================================\n * Built on two principles:\n * 1. Operations on a base — colors are relationships, not fixed values.\n * 2. Fewer primitives, more derivation — 4 primitives, everything\n * else computed via oklch(from ...) and color-mix().\n *\n * Layer 1: Primitives (only values a theme author picks)\n * Layer 2: Derived tokens (computed from primitives, never per-theme)\n * Layer 3: Interaction states (component-level, not tokens)\n * ================================================================= */\n\n/* -----------------------------------------------------------------\n * LIGHT THEME (default)\n * ----------------------------------------------------------------- */\n:root:not([data-theme=\"dark\"]) {\n /* --- Layer 1: Primitives --- */\n --background: oklch(0.97 0 0);\n --foreground: oklch(0.15 0 0);\n --accent: oklch(0.55 0.25 260);\n --destructive: oklch(0.55 0.22 25);\n}\n\n/* -----------------------------------------------------------------\n * DARK THEME\n * ----------------------------------------------------------------- */\n:root[data-theme=\"dark\"] {\n /* --- Layer 1: Primitives --- */\n --background: oklch(0.15 0.015 260);\n --foreground: oklch(0.93 0 0);\n --accent: oklch(0.75 0.18 260);\n --destructive: oklch(0.70 0.18 25);\n}\n\n/* -----------------------------------------------------------------\n * Layer 2: Derived tokens (computed from primitives)\n * Defined once — same rules for light and dark.\n * ----------------------------------------------------------------- */\n:root {\n /* Surfaces — lightness offsets from background.\n Positive = elevated (brighter). Negative = sunken (darker). */\n --sunken-2: oklch(from var(--background) calc(l - 0.03) c h);\n --sunken-1: oklch(from var(--background) calc(l - 0.01) c h);\n --surface-1: oklch(from var(--background) calc(l + 0.02) c h);\n --surface-2: oklch(from var(--background) calc(l + 0.05) c h);\n --surface-3: oklch(from var(--background) calc(l + 0.09) c h);\n\n /* Borders — foreground at reduced alpha.\n Semi-transparent so they adapt to any surface. */\n --border: oklch(from var(--foreground) l c h / 0.15);\n --border-strong: oklch(from var(--foreground) l c h / 0.25);\n\n /* Text tiers — foreground at reduced alpha.\n Semi-transparent so they adapt to any surface. */\n --text-1: oklch(from var(--foreground) l c h / 0.90);\n --text-2: oklch(from var(--foreground) l c h / 0.63);\n --text-3: oklch(from var(--foreground) l c h / 0.45);\n\n /* Accent surfaces — for badges, pills, tinted cards */\n --accent-subtle: oklch(from var(--accent) l c h / 0.10);\n --accent-text: oklch(from var(--accent) calc(l * 1.1) calc(c * 0.8) h);\n\n /* Destructive surfaces */\n --destructive-subtle: oklch(from var(--destructive) l c h / 0.10);\n --destructive-text: var(--destructive);\n\n /* Utility — scrim overlay for modals/dialogs */\n --scrim: oklch(from var(--foreground) l c h / 0.35);\n\n /* Meter / progress bar defaults */\n --meter-track: var(--surface-1);\n --meter-fill: var(--accent);\n\n /* Chart palette (theme-independent) */\n --chart-1: oklch(0.58 0.17 35);\n --chart-2: oklch(0.55 0.13 185);\n --chart-3: oklch(0.52 0.14 265);\n --chart-4: oklch(0.62 0.15 85);\n --chart-5: oklch(0.55 0.16 310);\n\n /* -----------------------------------------------------------\n * Prose (rich-text / markdown content)\n * ----------------------------------------------------------- */\n --prose-body: var(--text-1);\n --prose-headings: var(--foreground);\n --prose-lead: var(--text-2);\n --prose-links: var(--accent);\n --prose-links-hover: var(--accent-text);\n --prose-bold: var(--foreground);\n --prose-code: var(--foreground);\n --prose-code-bg: var(--surface-1);\n --prose-pre-bg: var(--surface-1);\n --prose-pre-border: var(--border);\n --prose-blockquote-border: var(--accent);\n --prose-blockquote-text: var(--text-2);\n --prose-hr: var(--border);\n --prose-th-border: var(--border-strong);\n --prose-td-border: var(--border);\n --prose-caption: var(--text-3);\n --prose-kbd-bg: var(--surface-2);\n --prose-kbd-border: var(--border-strong);\n}\n\n/* =================================================================\n * Base document styles\n * ================================================================= */\n:root {\n color: var(--text-1);\n font-family: var(--font-sans);\n line-height: var(--line-height-normal);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* =================================================================\n * Heading defaults\n * ================================================================= */\nh1 { font-size: var(--text-4xl); line-height: var(--text-4xl--line-height); } /* 36 / 40 */\nh2 { font-size: var(--text-3xl); line-height: var(--text-3xl--line-height); } /* 30 / 36 */\nh3 { font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); } /* 24 / 32 */\nh4 { font-size: var(--text-xl); line-height: var(--text-xl--line-height); } /* 20 / 28 */\nh5 { font-size: var(--text-lg); line-height: var(--text-lg--line-height); } /* 18 / 28 */\nh6 { font-size: var(--text-base); line-height: var(--text-base--line-height); } /* 16 / 24 */\n\n/* =================================================================\n * Baseline grid trim — prose elements anchor visible glyph edges,\n * not CSS line-box edges, to the 4px grid.\n * ================================================================= */\nh1, h2, h3, h4, h5, h6,\np, li, blockquote, dt, dd {\n text-box: trim-both cap alphabetic;\n}\n";
2
+ const propertiesCSS = "/* =================================================================\n * CSS @property Declarations\n * =================================================================\n * Typed API surface for theme-default's component-level CSS custom\n * properties. These provide:\n *\n * 1. Type safety — browser rejects invalid values, falls back to\n * initial-value rather than inheriting garbage.\n * 2. Smooth transitions — registered properties with known syntax\n * can be interpolated, enabling animated variant changes.\n * 3. Self-documenting API — @property blocks are the machine-\n * readable schema and human-readable reference.\n * 4. DevTools integration — Chrome shows registered properties\n * with syntax and initial-value in computed styles.\n *\n * Only consumer-facing properties are declared here. Internal tokens\n * (--space-*, --primary, etc.) are implementation details.\n *\n * initial-value uses resolved values (no var() allowed). These match\n * the light-theme defaults and serve as the ultimate fallback when\n * no theme is applied.\n *\n * CONSTRAINT: @property registrations are global — two themes on\n * the same page could conflict. This is acceptable for DUI's model\n * where one theme is active at a time.\n * ================================================================= */\n\n/* -----------------------------------------------------------\n * Button\n * ----------------------------------------------------------- */\n@property --button-bg {\n syntax: \"*\";\n inherits: true;\n}\n\n@property --button-fg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.97 0 0);\n}\n\n@property --button-border {\n syntax: \"<color>\";\n inherits: true;\n initial-value: transparent;\n}\n\n@property --button-height {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 2rem;\n}\n\n@property --button-width {\n syntax: \"<length-percentage> | auto\";\n inherits: true;\n initial-value: auto;\n}\n\n@property --button-padding-y {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.5rem;\n}\n\n@property --button-padding-x {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.625rem;\n}\n\n@property --button-gap {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.375rem;\n}\n\n@property --button-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.5rem;\n}\n\n@property --button-font-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.875rem;\n}\n\n@property --button-icon-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.125rem;\n}\n\n/* -----------------------------------------------------------\n * Badge\n * ----------------------------------------------------------- */\n@property --badge-bg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.24 0.005 265);\n}\n\n@property --badge-fg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.985 0 0);\n}\n\n@property --badge-border {\n syntax: \"<color>\";\n inherits: true;\n initial-value: transparent;\n}\n\n@property --badge-icon-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.75rem;\n}\n\n/* -----------------------------------------------------------\n * Spinner\n * ----------------------------------------------------------- */\n@property --spinner-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.25rem;\n}\n\n@property --spinner-color {\n syntax: \"<color>\";\n inherits: true;\n initial-value: currentColor;\n}\n\n/* -----------------------------------------------------------\n * Checkbox\n * ----------------------------------------------------------- */\n@property --checkbox-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.125rem;\n}\n\n/* -----------------------------------------------------------\n * Radio\n * ----------------------------------------------------------- */\n@property --radio-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.125rem;\n}\n\n/* -----------------------------------------------------------\n * Slider\n * ----------------------------------------------------------- */\n@property --slider-track-height {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.375rem;\n}\n\n@property --slider-thumb-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.125rem;\n}\n\n/* -----------------------------------------------------------\n * Switch\n * ----------------------------------------------------------- */\n@property --switch-width {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 2.25rem;\n}\n\n@property --switch-height {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.25rem;\n}\n\n@property --switch-thumb-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1rem;\n}\n\n@property --switch-thumb-offset {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.125rem;\n}\n\n/* -----------------------------------------------------------\n * Toggle\n * ----------------------------------------------------------- */\n@property --toggle-gap {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.375rem;\n}\n\n/* -----------------------------------------------------------\n * Progress\n * ----------------------------------------------------------- */\n@property --progress-height {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.5rem;\n}\n\n/* -----------------------------------------------------------\n * Avatar\n * ----------------------------------------------------------- */\n@property --avatar-bg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.99 0 0);\n}\n\n@property --avatar-fg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.15 0 0 / 0.63);\n}\n\n/* -----------------------------------------------------------\n * Sidebar\n * ----------------------------------------------------------- */\n@property --sidebar-width {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 16rem;\n}\n\n@property --sidebar-width-mobile {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 18rem;\n}\n\n@property --sidebar-width-icon {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 3rem;\n}\n\n@property --sidebar-bg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.99 0 0);\n}\n\n@property --sidebar-fg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.15 0 0 / 0.90);\n}\n\n@property --sidebar-border {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.15 0 0 / 0.15);\n}\n\n@property --sidebar-button-bg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0 0 0 / 0);\n}\n\n@property --sidebar-button-fg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.15 0 0 / 0.90);\n}\n\n@property --sidebar-muted-fg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.15 0 0 / 0.63);\n}\n\n@property --sidebar-ring {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.55 0.25 260);\n}\n\n@property --sidebar-separator {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.15 0 0 / 0.15);\n}\n\n@property --sidebar-group-padding-y {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1rem;\n}\n\n@property --sidebar-group-label-inset {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.5rem;\n}\n\n@property --sidebar-button-inset {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1rem;\n}\n\n@property --sidebar-header-content-gap {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1rem;\n}\n\n/* -----------------------------------------------------------\n * Sidebar Menu Button\n * ----------------------------------------------------------- */\n@property --smb-height {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 2rem;\n}\n\n@property --smb-padding-x {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1rem;\n}\n\n@property --smb-gap {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.5rem;\n}\n\n@property --smb-icon-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1rem;\n}\n\n@property --smb-font-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.875rem;\n}\n\n@property --smb-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.5rem;\n}\n";
3
+ const tokenSheet = new CSSStyleSheet();
4
+ tokenSheet.replaceSync(propertiesCSS + "\n" + tokensCSS);
5
+ export { tokenSheet };
package/toolbar/index.d.ts CHANGED
@@ -1,3 +1,2 @@
1
- import { DuiToolbar } from "./toolbar.js";
2
- export { DuiToolbar };
3
- export declare const toolbarFamily: (typeof DuiToolbar)[];
1
+ import "./toolbar.js";
2
+ export { DuiToolbar } from "./toolbar.js";
package/toolbar/index.js CHANGED
@@ -1,3 +1,2 @@
1
- import { DuiToolbar } from "./toolbar.js";
2
- export { DuiToolbar };
3
- export const toolbarFamily = [DuiToolbar];
1
+ import "./toolbar.js";
2
+ export { DuiToolbar } from "./toolbar.js";
package/toolbar/toolbar.d.ts CHANGED
@@ -1,13 +1,5 @@
1
- /** Ported from original DUI: deep-future-app/app/client/components/dui/toolbar */
2
- import { LitElement, type TemplateResult } from "lit";
3
- export declare class DuiToolbar extends LitElement {
4
- static tagName: "dui-toolbar";
1
+ import { DuiToolbarPrimitive } from "@deepfuture/dui-primitives/toolbar";
2
+ import "../_install.js";
3
+ export declare class DuiToolbar extends DuiToolbarPrimitive {
5
4
  static styles: import("lit").CSSResult[];
6
- /** Adds horizontal and vertical padding. */
7
- accessor inset: boolean;
8
- /** Reduces left inset padding when a button is the first item. */
9
- accessor hasButtonLeft: boolean;
10
- /** Reduces right inset padding when a button is the last item. */
11
- accessor hasButtonRight: boolean;
12
- render(): TemplateResult;
13
5
  }
package/toolbar/toolbar.js CHANGED
@@ -1,128 +1,37 @@
1
- /** Ported from original DUI: deep-future-app/app/client/components/dui/toolbar */
2
- var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
3
- function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
4
- var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
5
- var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
6
- var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
7
- var _, done = false;
8
- for (var i = decorators.length - 1; i >= 0; i--) {
9
- var context = {};
10
- for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
11
- for (var p in contextIn.access) context.access[p] = contextIn.access[p];
12
- context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
13
- var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
14
- if (kind === "accessor") {
15
- if (result === void 0) continue;
16
- if (result === null || typeof result !== "object") throw new TypeError("Object expected");
17
- if (_ = accept(result.get)) descriptor.get = _;
18
- if (_ = accept(result.set)) descriptor.set = _;
19
- if (_ = accept(result.init)) initializers.unshift(_);
20
- }
21
- else if (_ = accept(result)) {
22
- if (kind === "field") initializers.unshift(_);
23
- else descriptor[key] = _;
24
- }
25
- }
26
- if (target) Object.defineProperty(target, contextIn.name, descriptor);
27
- done = true;
28
- };
29
- var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
30
- var useValue = arguments.length > 2;
31
- for (var i = 0; i < initializers.length; i++) {
32
- value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
33
- }
34
- return useValue ? value : void 0;
35
- };
36
- import { css, html, LitElement } from "lit";
37
- import { property } from "lit/decorators.js";
38
- import { base } from "@deepfuture/dui-core/base";
1
+ import { css } from "lit";
2
+ import { DuiToolbarPrimitive } from "@deepfuture/dui-primitives/toolbar";
3
+ import "../_install.js";
39
4
  const styles = css `
40
- :host {
41
- display: block;
42
- }
5
+ /* ── Root ── */
43
6
 
44
7
  [part="root"] {
45
- display: grid;
46
- grid-template-columns: 1fr auto 1fr;
47
- align-items: center;
48
- box-sizing: border-box;
8
+ column-gap: var(--space-2);
9
+ }
10
+
11
+ :host([inset]) [part="root"] {
12
+ padding-top: var(--toolbar-padding-y, var(--space-2));
13
+ padding-bottom: var(--toolbar-padding-y, var(--space-2));
14
+ padding-left: var(--toolbar-padding-x, var(--space-4));
15
+ padding-right: var(--toolbar-padding-x, var(--space-4));
49
16
  }
50
17
 
51
- [part="left"] {
52
- justify-self: start;
53
- display: flex;
54
- align-items: center;
18
+ :host([inset][has-button-left]) [part="root"] {
19
+ padding-left: var(--toolbar-padding-x-button, var(--space-2));
55
20
  }
56
21
 
57
- [part="center"] {
58
- justify-self: center;
59
- grid-column: 2;
60
- display: flex;
61
- align-items: center;
22
+ :host([inset][has-button-right]) [part="root"] {
23
+ padding-right: var(--toolbar-padding-x-button, var(--space-2));
62
24
  }
63
25
 
26
+ /* ── Slot containers ── */
27
+
28
+ [part="left"],
29
+ [part="center"],
64
30
  [part="right"] {
65
- justify-self: end;
66
- grid-column: 3;
67
- display: flex;
68
- align-items: center;
31
+ gap: var(--space-2);
69
32
  }
70
33
  `;
71
- let DuiToolbar = (() => {
72
- let _classSuper = LitElement;
73
- let _inset_decorators;
74
- let _inset_initializers = [];
75
- let _inset_extraInitializers = [];
76
- let _hasButtonLeft_decorators;
77
- let _hasButtonLeft_initializers = [];
78
- let _hasButtonLeft_extraInitializers = [];
79
- let _hasButtonRight_decorators;
80
- let _hasButtonRight_initializers = [];
81
- let _hasButtonRight_extraInitializers = [];
82
- return class DuiToolbar extends _classSuper {
83
- static {
84
- const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
85
- _inset_decorators = [property({ type: Boolean, reflect: true })];
86
- _hasButtonLeft_decorators = [property({ type: Boolean, reflect: true, attribute: "has-button-left" })];
87
- _hasButtonRight_decorators = [property({ type: Boolean, reflect: true, attribute: "has-button-right" })];
88
- __esDecorate(this, null, _inset_decorators, { kind: "accessor", name: "inset", static: false, private: false, access: { has: obj => "inset" in obj, get: obj => obj.inset, set: (obj, value) => { obj.inset = value; } }, metadata: _metadata }, _inset_initializers, _inset_extraInitializers);
89
- __esDecorate(this, null, _hasButtonLeft_decorators, { kind: "accessor", name: "hasButtonLeft", static: false, private: false, access: { has: obj => "hasButtonLeft" in obj, get: obj => obj.hasButtonLeft, set: (obj, value) => { obj.hasButtonLeft = value; } }, metadata: _metadata }, _hasButtonLeft_initializers, _hasButtonLeft_extraInitializers);
90
- __esDecorate(this, null, _hasButtonRight_decorators, { kind: "accessor", name: "hasButtonRight", static: false, private: false, access: { has: obj => "hasButtonRight" in obj, get: obj => obj.hasButtonRight, set: (obj, value) => { obj.hasButtonRight = value; } }, metadata: _metadata }, _hasButtonRight_initializers, _hasButtonRight_extraInitializers);
91
- if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
92
- }
93
- static tagName = "dui-toolbar";
94
- static styles = [base, styles];
95
- #inset_accessor_storage = __runInitializers(this, _inset_initializers, false);
96
- /** Adds horizontal and vertical padding. */
97
- get inset() { return this.#inset_accessor_storage; }
98
- set inset(value) { this.#inset_accessor_storage = value; }
99
- #hasButtonLeft_accessor_storage = (__runInitializers(this, _inset_extraInitializers), __runInitializers(this, _hasButtonLeft_initializers, false));
100
- /** Reduces left inset padding when a button is the first item. */
101
- get hasButtonLeft() { return this.#hasButtonLeft_accessor_storage; }
102
- set hasButtonLeft(value) { this.#hasButtonLeft_accessor_storage = value; }
103
- #hasButtonRight_accessor_storage = (__runInitializers(this, _hasButtonLeft_extraInitializers), __runInitializers(this, _hasButtonRight_initializers, false));
104
- /** Reduces right inset padding when a button is the last item. */
105
- get hasButtonRight() { return this.#hasButtonRight_accessor_storage; }
106
- set hasButtonRight(value) { this.#hasButtonRight_accessor_storage = value; }
107
- render() {
108
- return html `
109
- <nav part="root" role="toolbar">
110
- <div part="left">
111
- <slot name="left"></slot>
112
- </div>
113
- <div part="center">
114
- <slot name="center"></slot>
115
- </div>
116
- <div part="right">
117
- <slot name="right"></slot>
118
- </div>
119
- </nav>
120
- `;
121
- }
122
- constructor() {
123
- super(...arguments);
124
- __runInitializers(this, _hasButtonRight_extraInitializers);
125
- }
126
- };
127
- })();
128
- export { DuiToolbar };
34
+ export class DuiToolbar extends DuiToolbarPrimitive {
35
+ static styles = [...DuiToolbarPrimitive.styles, styles];
36
+ }
37
+ customElements.define(DuiToolbar.tagName, DuiToolbar);