@godxjp/ui 20.0.0 → 20.2.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 (273) hide show
  1. package/README.md +8 -2
  2. package/dist/app/app-provider.js +37 -21
  3. package/dist/app/index.d.ts +2 -0
  4. package/dist/app/index.js +2 -0
  5. package/dist/app/storage.d.ts +17 -0
  6. package/dist/app/storage.js +28 -0
  7. package/dist/app/theme-axes.d.ts +2 -0
  8. package/dist/app/theme-axes.js +45 -0
  9. package/dist/components/charts/chart-cartesian.d.ts +2 -1
  10. package/dist/components/charts/chart-cartesian.js +52 -3
  11. package/dist/components/charts/chart-category-axis.d.ts +55 -0
  12. package/dist/components/charts/chart-category-axis.js +93 -0
  13. package/dist/components/charts/chart-frame.d.ts +10 -1
  14. package/dist/components/charts/chart-frame.js +19 -3
  15. package/dist/components/charts/compact-bar-trend.d.ts +1 -1
  16. package/dist/components/charts/compact-bar-trend.js +2 -0
  17. package/dist/components/charts/pie-chart.d.ts +1 -1
  18. package/dist/components/charts/pie-chart.js +12 -1
  19. package/dist/components/charts/recharts-peer.d.ts +49 -0
  20. package/dist/components/charts/recharts-peer.js +45 -0
  21. package/dist/components/data-display/card.d.ts +12 -1
  22. package/dist/components/data-display/card.js +22 -4
  23. package/dist/components/data-display/code-block.js +6 -2
  24. package/dist/components/data-display/data-table.d.ts +39 -4
  25. package/dist/components/data-display/data-table.js +802 -270
  26. package/dist/components/data-display/descriptions.d.ts +27 -6
  27. package/dist/components/data-display/descriptions.js +58 -17
  28. package/dist/components/data-display/index.d.ts +2 -0
  29. package/dist/components/data-display/index.js +2 -0
  30. package/dist/components/data-display/list-row.d.ts +10 -1
  31. package/dist/components/data-display/list-row.js +7 -1
  32. package/dist/components/data-display/popover.d.ts +9 -3
  33. package/dist/components/data-display/popover.js +65 -11
  34. package/dist/components/data-display/range-timeline.d.ts +38 -0
  35. package/dist/components/data-display/range-timeline.js +161 -0
  36. package/dist/components/data-display/scroll-area.js +13 -2
  37. package/dist/components/data-display/service-launcher-card.js +14 -12
  38. package/dist/components/data-display/table.d.ts +71 -3
  39. package/dist/components/data-display/table.js +56 -18
  40. package/dist/components/data-display/tree-list.js +4 -9
  41. package/dist/components/data-entry/calendar.d.ts +2 -2
  42. package/dist/components/data-entry/calendar.js +23 -3
  43. package/dist/components/data-entry/cascader.d.ts +1 -1
  44. package/dist/components/data-entry/cascader.js +188 -24
  45. package/dist/components/data-entry/color-picker.d.ts +1 -1
  46. package/dist/components/data-entry/color-picker.js +17 -5
  47. package/dist/components/data-entry/control-appearance.d.ts +64 -0
  48. package/dist/components/data-entry/control-appearance.js +39 -0
  49. package/dist/components/data-entry/control-surface.d.ts +61 -0
  50. package/dist/components/data-entry/control-surface.js +39 -0
  51. package/dist/components/data-entry/date-picker.d.ts +1 -1
  52. package/dist/components/data-entry/date-picker.js +344 -113
  53. package/dist/components/data-entry/date-range-picker.d.ts +1 -1
  54. package/dist/components/data-entry/date-range-picker.js +278 -140
  55. package/dist/components/data-entry/form-field.d.ts +1 -1
  56. package/dist/components/data-entry/form-field.js +39 -4
  57. package/dist/components/data-entry/form.d.ts +4 -0
  58. package/dist/components/data-entry/form.js +4 -2
  59. package/dist/components/data-entry/index.d.ts +7 -3
  60. package/dist/components/data-entry/index.js +10 -1
  61. package/dist/components/data-entry/input-otp.d.ts +1 -1
  62. package/dist/components/data-entry/input.d.ts +12 -34
  63. package/dist/components/data-entry/input.js +92 -24
  64. package/dist/components/data-entry/month-picker.d.ts +1 -1
  65. package/dist/components/data-entry/month-picker.js +47 -10
  66. package/dist/components/data-entry/month-range-picker.d.ts +1 -1
  67. package/dist/components/data-entry/month-range-picker.js +51 -11
  68. package/dist/components/data-entry/number-input.d.ts +7 -0
  69. package/dist/components/data-entry/number-input.js +147 -98
  70. package/dist/components/data-entry/password-input.d.ts +1 -1
  71. package/dist/components/data-entry/radio.d.ts +1 -1
  72. package/dist/components/data-entry/radio.js +61 -13
  73. package/dist/components/data-entry/search-input.d.ts +1 -1
  74. package/dist/components/data-entry/search-input.js +16 -2
  75. package/dist/components/data-entry/search-select.d.ts +2 -2
  76. package/dist/components/data-entry/search-select.js +209 -78
  77. package/dist/components/data-entry/select.d.ts +22 -4
  78. package/dist/components/data-entry/select.js +215 -163
  79. package/dist/components/data-entry/slider.d.ts +9 -1
  80. package/dist/components/data-entry/slider.js +87 -9
  81. package/dist/components/data-entry/switch.d.ts +3 -0
  82. package/dist/components/data-entry/switch.js +29 -3
  83. package/dist/components/data-entry/textarea.d.ts +14 -56
  84. package/dist/components/data-entry/textarea.js +80 -33
  85. package/dist/components/data-entry/time-picker.d.ts +2 -2
  86. package/dist/components/data-entry/time-picker.js +333 -109
  87. package/dist/components/data-entry/time-range-picker.d.ts +5 -0
  88. package/dist/components/data-entry/time-range-picker.js +89 -0
  89. package/dist/components/data-entry/transfer.d.ts +1 -1
  90. package/dist/components/data-entry/transfer.js +86 -28
  91. package/dist/components/data-entry/tree-select.d.ts +1 -1
  92. package/dist/components/data-entry/tree-select.js +201 -113
  93. package/dist/components/data-entry/tree-utils.js +7 -14
  94. package/dist/components/data-entry/upload-files.d.ts +2 -0
  95. package/dist/components/data-entry/upload-files.js +31 -0
  96. package/dist/components/data-entry/upload-request.d.ts +4 -0
  97. package/dist/components/data-entry/upload-request.js +53 -0
  98. package/dist/components/data-entry/upload-types.d.ts +28 -0
  99. package/dist/components/data-entry/upload-types.js +2 -0
  100. package/dist/components/data-entry/upload.d.ts +2 -2
  101. package/dist/components/data-entry/upload.js +475 -115
  102. package/dist/components/feedback/dialog.js +19 -19
  103. package/dist/components/feedback/sheet.js +3 -0
  104. package/dist/components/feedback/tooltip.js +3 -0
  105. package/dist/components/general/button.d.ts +2 -1
  106. package/dist/components/general/button.js +7 -1
  107. package/dist/components/general/index.d.ts +1 -0
  108. package/dist/components/general/index.js +2 -0
  109. package/dist/components/general/typography.d.ts +3 -0
  110. package/dist/components/general/typography.js +15 -1
  111. package/dist/components/general/visually-hidden.d.ts +3 -0
  112. package/dist/components/general/visually-hidden.js +9 -0
  113. package/dist/components/layout/app-launcher.d.ts +34 -0
  114. package/dist/components/layout/app-launcher.js +261 -0
  115. package/dist/components/layout/app-shell.d.ts +3 -1
  116. package/dist/components/layout/app-shell.js +34 -14
  117. package/dist/components/layout/auth-shell.d.ts +1 -1
  118. package/dist/components/layout/auth-shell.js +2 -0
  119. package/dist/components/layout/breadcrumb.d.ts +14 -2
  120. package/dist/components/layout/breadcrumb.js +46 -4
  121. package/dist/components/layout/flex.d.ts +1 -1
  122. package/dist/components/layout/flex.js +23 -2
  123. package/dist/components/layout/index.d.ts +3 -0
  124. package/dist/components/layout/index.js +5 -1
  125. package/dist/components/layout/org-switcher.js +20 -1
  126. package/dist/components/layout/page-container.d.ts +1 -1
  127. package/dist/components/layout/page-container.js +5 -3
  128. package/dist/components/layout/responsive-grid.d.ts +16 -2
  129. package/dist/components/layout/responsive-grid.js +29 -2
  130. package/dist/components/layout/sidebar.js +2 -1
  131. package/dist/components/layout/topbar-item.d.ts +3 -0
  132. package/dist/components/layout/topbar-item.js +18 -3
  133. package/dist/components/layout/topbar.d.ts +1 -1
  134. package/dist/components/layout/topbar.js +27 -6
  135. package/dist/components/navigation/dropdown-menu.d.ts +30 -2
  136. package/dist/components/navigation/dropdown-menu.js +73 -11
  137. package/dist/components/navigation/pagination.d.ts +2 -2
  138. package/dist/components/navigation/pagination.js +155 -83
  139. package/dist/components/navigation/steps.d.ts +2 -2
  140. package/dist/components/navigation/steps.js +29 -4
  141. package/dist/components/navigation/tabs.d.ts +5 -33
  142. package/dist/components/navigation/tabs.js +232 -64
  143. package/dist/components/ui/hover-card.js +3 -0
  144. package/dist/components/ui/input-otp.d.ts +26 -28
  145. package/dist/components/ui/input-otp.js +50 -7
  146. package/dist/components/ui/password-input.d.ts +36 -2
  147. package/dist/components/ui/password-input.js +27 -7
  148. package/dist/components/ui/rating.d.ts +25 -0
  149. package/dist/components/ui/rating.js +67 -27
  150. package/dist/components/ui/segmented.d.ts +9 -0
  151. package/dist/components/ui/segmented.js +17 -2
  152. package/dist/components/ui/separator.d.ts +4 -0
  153. package/dist/components/ui/separator.js +13 -0
  154. package/dist/components/ui/tag-input.d.ts +45 -0
  155. package/dist/components/ui/tag-input.js +109 -27
  156. package/dist/form/form-context.d.ts +29 -0
  157. package/dist/form/form-context.js +44 -4
  158. package/dist/form/form-field-array.d.ts +22 -0
  159. package/dist/form/form-field-array.js +50 -0
  160. package/dist/form/form-field-control.d.ts +2 -1
  161. package/dist/form/form-field-control.js +116 -40
  162. package/dist/form/form-root.d.ts +2 -1
  163. package/dist/form/form-root.js +142 -23
  164. package/dist/form/index.d.ts +3 -1
  165. package/dist/form/index.js +12 -1
  166. package/dist/i18n/index.d.ts +1 -1
  167. package/dist/i18n/index.js +3 -1
  168. package/dist/i18n/messages/en.json +59 -6
  169. package/dist/i18n/messages/ja.json +59 -6
  170. package/dist/i18n/messages/vi.json +59 -6
  171. package/dist/i18n/translate.d.ts +19 -0
  172. package/dist/i18n/translate.js +24 -0
  173. package/dist/inertia/index.d.ts +20 -0
  174. package/dist/inertia/index.js +60 -1
  175. package/dist/lib/control-styles.d.ts +25 -3
  176. package/dist/lib/control-styles.js +9 -3
  177. package/dist/lib/datetime/picker-format.d.ts +8 -0
  178. package/dist/lib/datetime/picker-format.js +54 -0
  179. package/dist/lib/overlay-portal.d.ts +18 -0
  180. package/dist/lib/overlay-portal.js +17 -0
  181. package/dist/props/components/app.prop.d.ts +13 -2
  182. package/dist/props/components/charts.prop.d.ts +21 -0
  183. package/dist/props/components/data-display.prop.d.ts +55 -4
  184. package/dist/props/components/data-entry.prop.d.ts +687 -43
  185. package/dist/props/components/form.prop.d.ts +142 -4
  186. package/dist/props/components/general.prop.d.ts +30 -1
  187. package/dist/props/components/index.d.ts +2 -2
  188. package/dist/props/components/layout.prop.d.ts +255 -8
  189. package/dist/props/components/navigation.prop.d.ts +113 -3
  190. package/dist/props/registry.d.ts +376 -10
  191. package/dist/props/registry.js +493 -9
  192. package/dist/props/vocabulary/data.prop.d.ts +179 -1
  193. package/dist/props/vocabulary/index.d.ts +4 -4
  194. package/dist/props/vocabulary/interaction.prop.d.ts +51 -2
  195. package/dist/props/vocabulary/navigation.prop.d.ts +40 -0
  196. package/dist/props/vocabulary/shared.prop.d.ts +33 -0
  197. package/dist/styles/badge-layout.css +2 -1
  198. package/dist/styles/card-layout.css +36 -5
  199. package/dist/styles/chart-layout.css +17 -1
  200. package/dist/styles/control.css +520 -14
  201. package/dist/styles/data-display-layout.css +248 -7
  202. package/dist/styles/data-entry-layout.css +13 -0
  203. package/dist/styles/layout.css +221 -4
  204. package/dist/styles/navigation-layout.css +230 -1
  205. package/dist/styles/shell-layout.css +690 -21
  206. package/dist/styles/table-layout.css +95 -6
  207. package/dist/styles/text-layout.css +5 -0
  208. package/dist/tokens/base.css +1 -0
  209. package/dist/tokens/components/badge.css +1 -0
  210. package/dist/tokens/components/chart.css +6 -0
  211. package/dist/tokens/components/control.css +81 -3
  212. package/dist/tokens/components/data-display.css +9 -0
  213. package/dist/tokens/components/descriptions.css +11 -0
  214. package/dist/tokens/components/flex.css +8 -0
  215. package/dist/tokens/components/navigation.css +55 -0
  216. package/dist/tokens/components/shell.css +100 -5
  217. package/dist/tokens/components/table.css +14 -0
  218. package/dist/tokens/foundation.css +2 -0
  219. package/dist/tokens/semantic/layout.css +9 -0
  220. package/docs/CONSUMER-RULES.md +13 -0
  221. package/docs/DESIGN-AUTHORITY.md +43 -6
  222. package/docs/DEVELOPMENT.md +4 -3
  223. package/docs/FORMS.md +151 -6
  224. package/docs/FRAME-COVERAGE-REPORT.md +29 -16
  225. package/docs/README.md +1 -1
  226. package/docs/STANDARDS-vocabulary-tokens.md +1 -1
  227. package/docs/TESTING.md +15 -6
  228. package/docs/charts/cjk-category-axis.tsx +81 -0
  229. package/docs/data-display/card/index.tsx +22 -0
  230. package/docs/data-display/data-table/examples/antd-parity.tsx +257 -0
  231. package/docs/data-display/data-table/index.tsx +23 -0
  232. package/docs/data-display/descriptions.tsx +41 -0
  233. package/docs/data-display/list-row.tsx +6 -6
  234. package/docs/data-display/scroll-area.tsx +31 -25
  235. package/docs/data-display/table.tsx +104 -45
  236. package/docs/data-display/timeline.tsx +41 -0
  237. package/docs/data-entry/date-picker.tsx +85 -0
  238. package/docs/data-entry/date-range-picker.tsx +26 -0
  239. package/docs/data-entry/form-dynamic-fields.tsx +199 -0
  240. package/docs/data-entry/form.tsx +74 -4
  241. package/docs/data-entry/input-otp.tsx +24 -0
  242. package/docs/data-entry/input.tsx +46 -1
  243. package/docs/data-entry/month-range-picker.tsx +1 -1
  244. package/docs/data-entry/select.tsx +27 -0
  245. package/docs/data-entry/switch.tsx +41 -0
  246. package/docs/data-entry/textarea.tsx +38 -0
  247. package/docs/data-entry/time-picker.tsx +85 -1
  248. package/docs/data-entry/time-range-picker.tsx +55 -0
  249. package/docs/data-entry/transfer.tsx +17 -0
  250. package/docs/data-entry/upload.tsx +56 -12
  251. package/docs/feedback/tooltip.tsx +1 -1
  252. package/docs/general/activity.tsx +2 -2
  253. package/docs/general/button/index.tsx +14 -1
  254. package/docs/general/typography.tsx +14 -1
  255. package/docs/layout/app-launcher.tsx +195 -0
  256. package/docs/layout/app-shell-arrangements.tsx +5 -5
  257. package/docs/layout/app-shell.tsx +11 -0
  258. package/docs/layout/flex.tsx +50 -0
  259. package/docs/layout/responsive-grid.tsx +21 -1
  260. package/docs/layout/topbar.tsx +5 -9
  261. package/docs/navigation/app-setting-picker.tsx +11 -0
  262. package/docs/navigation/breadcrumb.tsx +48 -0
  263. package/docs/navigation/dropdown-menu.tsx +21 -0
  264. package/docs/navigation/pagination.tsx +52 -0
  265. package/docs/navigation/steps.tsx +37 -0
  266. package/docs/navigation/tabs.tsx +97 -1
  267. package/docs/query/button-refetch.tsx +1 -0
  268. package/docs/showcase/settings-security-mfa.tsx +3 -3
  269. package/package.json +24 -4
  270. package/scripts/_agent-setup.mjs +76 -9
  271. package/scripts/init-guinea-pig.mjs +26 -4
  272. package/scripts/ui-audit.mjs +243 -30
  273. package/scripts/visual-audit.mjs +45 -7
@@ -22,7 +22,8 @@
22
22
  vertical-align: middle;
23
23
  background: var(--table-header-background, hsl(var(--muted)));
24
24
  font-size: var(--table-head-font-size);
25
- font-weight: var(--font-weight-medium);
25
+
26
+ font-weight: var(--table-head-font-weight);
26
27
  color: var(--table-header-foreground, hsl(var(--muted-foreground)));
27
28
  white-space: nowrap;
28
29
  }
@@ -46,6 +47,27 @@
46
47
  padding-inline-end: 0;
47
48
  }
48
49
 
50
+ :is([data-slot="table-head"], [data-slot="table-cell"])[data-numeric] {
51
+ font-variant-numeric: tabular-nums;
52
+ text-align: end;
53
+ }
54
+
55
+ :is([data-slot="table-head"], [data-slot="table-cell"])[data-align="start"] {
56
+ text-align: start;
57
+ }
58
+
59
+ :is([data-slot="table-head"], [data-slot="table-cell"])[data-align="center"] {
60
+ text-align: center;
61
+ }
62
+
63
+ :is([data-slot="table-head"], [data-slot="table-cell"])[data-align="end"] {
64
+ text-align: end;
65
+ }
66
+
67
+ :is([data-slot="table-head"], [data-slot="table-cell"])[data-wrap] {
68
+ white-space: normal;
69
+ }
70
+
49
71
  [data-slot="table-cell"][data-indent] {
50
72
  padding-inline-start: calc(
51
73
  var(--table-cell-space-x) + var(--table-cell-indent-level, 0) *
@@ -241,34 +263,100 @@
241
263
 
242
264
  .ui-data-table-pin-end {
243
265
  position: sticky;
244
- inset-inline-end: 0;
266
+
267
+ inset-inline-end: calc(var(--table-fixed-offset, 0) * 1px);
245
268
  z-index: 2;
246
269
  background-color: hsl(var(--background));
247
270
  box-shadow: var(--table-pin-shadow);
248
271
  }
249
272
 
250
- th.ui-data-table-pin-end {
273
+ .ui-data-table-pin-start {
274
+ position: sticky;
275
+ inset-inline-start: calc(var(--table-fixed-offset, 0) * 1px);
276
+ z-index: 2;
277
+ background-color: hsl(var(--background));
278
+ box-shadow: var(--table-fixed-shadow-start);
279
+ }
280
+
281
+ th.ui-data-table-pin-end,
282
+ th.ui-data-table-pin-start {
251
283
  background-color: hsl(var(--secondary));
252
284
  }
253
285
 
286
+ [dir="rtl"] .ui-data-table-pin-start {
287
+ box-shadow: var(--table-fixed-shadow-start-rtl);
288
+ }
289
+
254
290
  [dir="rtl"] .ui-data-table-pin-end {
255
291
  box-shadow: 6px 0 6px -5px hsl(var(--foreground) / 0.12);
256
292
  }
257
293
 
258
- .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-end {
294
+ .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-end,
295
+ .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-start {
259
296
  background-image: linear-gradient(
260
297
  var(--table-row-hover-background, hsl(var(--muted) / 0.5)),
261
298
  var(--table-row-hover-background, hsl(var(--muted) / 0.5))
262
299
  );
263
300
  }
264
301
 
265
- .ui-data-table-surface tbody tr[data-state="selected"] > .ui-data-table-pin-end {
302
+ .ui-data-table-surface tbody tr[data-state="selected"] > .ui-data-table-pin-end,
303
+ .ui-data-table-surface tbody tr[data-state="selected"] > .ui-data-table-pin-start {
266
304
  background-image: linear-gradient(
267
305
  var(--table-row-selected-background, hsl(var(--muted) / 0.3)),
268
306
  var(--table-row-selected-background, hsl(var(--muted) / 0.3))
269
307
  );
270
308
  }
271
309
 
310
+ .ui-data-table-ellipsis {
311
+ overflow: hidden;
312
+ text-overflow: ellipsis;
313
+ white-space: nowrap;
314
+ }
315
+
316
+ .ui-data-table-surface[data-table-layout="fixed"] [data-slot="table"] {
317
+ table-layout: fixed;
318
+ }
319
+
320
+ .ui-data-table-scroll[data-scroll-y] {
321
+ overflow-y: auto;
322
+ max-block-size: var(--table-scroll-block-size, none);
323
+ }
324
+
325
+ .ui-data-table-scroll[data-scroll-x] :is(.ui-data-table-surface, [data-slot="table"]) {
326
+ min-inline-size: var(--table-scroll-inline-size, auto);
327
+ }
328
+
329
+ .ui-data-table-expand-column {
330
+ inline-size: var(--table-expand-column-width);
331
+ }
332
+
333
+ .ui-data-table-expanded-row > [data-slot="table-cell"] {
334
+ background-color: var(--table-row-expanded-background, hsl(var(--muted) / 0.3));
335
+ }
336
+
337
+ .ui-data-table-summary {
338
+ background-color: var(--table-summary-background, hsl(var(--muted)));
339
+ font-weight: var(--font-weight-medium);
340
+ }
341
+
342
+ .ui-data-table-summary > tr > [data-slot="table-cell"] {
343
+ border-block-start: var(--table-summary-border-width) solid hsl(var(--border));
344
+ }
345
+
346
+ .ui-data-table-filter-trigger[data-filtered] {
347
+ color: hsl(var(--primary));
348
+ }
349
+
350
+ .ui-data-table-selection-menu {
351
+ display: inline-flex;
352
+ align-items: center;
353
+ gap: var(--table-selection-menu-gap);
354
+ }
355
+
356
+ .ui-data-table-surface .ui-table-bordered {
357
+ border-width: 0;
358
+ }
359
+
272
360
  .ui-table-bordered {
273
361
  border: 1px solid var(--table-border-color, hsl(var(--border)));
274
362
  }
@@ -354,7 +442,8 @@
354
442
 
355
443
  .ui-data-table-sticky-header {
356
444
  position: sticky;
357
- inset-block-start: 0;
445
+
446
+ inset-block-start: var(--table-sticky-offset, 0);
358
447
  z-index: 10;
359
448
  }
360
449
 
@@ -100,6 +100,11 @@
100
100
  min-width: 0;
101
101
  }
102
102
 
103
+ [data-slot="text"][data-whitespace="pre-wrap"] {
104
+ white-space: pre-wrap;
105
+ overflow-wrap: break-word;
106
+ }
107
+
103
108
  [data-slot="text"][data-clamp] {
104
109
  display: -webkit-box;
105
110
  -webkit-box-orient: vertical;
@@ -1,5 +1,6 @@
1
1
 
2
2
 
3
+ @import "./components/flex.css";
3
4
  @import "./foundation.css";
4
5
 
5
6
  @import "./derived.css";
@@ -5,6 +5,7 @@
5
5
  --badge-space-x: var(--space-2);
6
6
  --badge-space-y: var(--space-1);
7
7
 
8
+ --badge-radius: var(--radius-md);
8
9
  --badge-font-size: var(--font-size-xs);
9
10
 
10
11
  --badge-line-height: calc(1 / 0.75);
@@ -28,3 +28,9 @@
28
28
 
29
29
  --chart-trend-footer-gap: var(--space-2);
30
30
  }
31
+
32
+ :root {
33
+ --chart-category-axis-gap: var(--space-2);
34
+
35
+ --chart-category-axis-max-fraction: 0.4;
36
+ }
@@ -28,6 +28,50 @@
28
28
  --control-icon-size: calc(var(--icon-size-md) * var(--scaling));
29
29
  --control-icon-size-sm: calc(var(--icon-size-sm) * var(--scaling));
30
30
 
31
+ --control-status-warning-border-color: var(--warning);
32
+ --control-status-warning-glow-color: var(--warning);
33
+ --control-status-warning-glow-alpha: var(--control-outline-error-alpha);
34
+
35
+ --control-variant-filled-background: var(--muted);
36
+ --control-variant-filled-hover-background: var(--accent);
37
+
38
+ --control-count-font-size: var(--font-size-sm);
39
+ --control-count-color: var(--muted-foreground);
40
+ --control-count-exceeded-color: var(--text-error);
41
+ --control-count-space-inline: var(--space-1);
42
+ --textarea-count-inset-block-end: var(--space-1);
43
+ --textarea-count-inset-inline-end: var(--space-2);
44
+
45
+ --input-addon-background: var(--muted);
46
+ --input-addon-color: var(--muted-foreground);
47
+ --input-addon-padding-inline: var(--control-padding-x);
48
+
49
+ --switch-content-font-size: var(--font-size-xs);
50
+ --switch-content-space-inline: var(--space-1);
51
+ --switch-spinner-size: calc(var(--switch-thumb-size) - var(--space-1));
52
+
53
+ --slider-mark-font-size: var(--font-size-xs);
54
+ --slider-mark-color: var(--muted-foreground);
55
+ --slider-mark-space-block-start: var(--space-2);
56
+ --slider-dot-size: var(--slider-track-height);
57
+ --slider-dot-background: var(--background);
58
+ --slider-dot-border-color: var(--border);
59
+ --slider-dot-active-border-color: var(--primary);
60
+ --slider-tooltip-background: var(--popover);
61
+ --slider-tooltip-color: var(--popover-foreground);
62
+ --slider-tooltip-font-size: var(--font-size-xs);
63
+ --slider-tooltip-radius: var(--radius-sm);
64
+ --slider-tooltip-padding-inline: var(--space-2);
65
+ --slider-tooltip-offset-block: var(--space-2);
66
+
67
+ --choice-button-background: var(--background);
68
+ --choice-button-color: var(--foreground);
69
+ --choice-button-border-color: var(--input);
70
+ --choice-button-selected-color: var(--primary);
71
+ --choice-button-selected-border-color: var(--primary);
72
+ --choice-button-solid-background: var(--primary);
73
+ --choice-button-solid-color: var(--primary-foreground);
74
+
31
75
  --toggle-focus-ring-width: var(--stroke-lg);
32
76
  --toggle-focus-ring-alpha: 1;
33
77
 
@@ -76,6 +120,8 @@
76
120
 
77
121
  --switch-unchecked-background: initial;
78
122
 
123
+ --switch-content-unchecked-foreground: initial;
124
+
79
125
  --color-picker-input-width: 6.5rem;
80
126
 
81
127
  --command-list-max-height: min(300px, 50vh);
@@ -83,6 +129,8 @@
83
129
  --command-group-padding: var(--space-1);
84
130
  --command-item-padding-y: var(--space-2);
85
131
  --command-item-padding-x: var(--space-2);
132
+
133
+ --command-item-gap: var(--control-gap);
86
134
  --command-palette-width: 35rem;
87
135
  --command-palette-inset-top: calc(var(--space-6) * 4);
88
136
  --command-palette-viewport-inset: var(--space-3);
@@ -140,14 +188,14 @@
140
188
  (var(--control-multiline-padding-block) + var(--control-border-width)) * 2
141
189
  );
142
190
 
143
- --control-inline-affix-pair-space-inline-end: 3.5rem;
144
-
145
191
  --control-composite-field-space-gap: var(--space-2);
146
192
 
147
193
  --input-file-button-height: var(--band-height-sm);
148
194
  --input-file-button-font-size: var(--font-size-sm);
149
195
 
150
196
  --search-select-panel-max-width: 32rem;
197
+
198
+ --search-select-panel-inline-size: auto;
151
199
  --search-select-panel-viewport-inset: var(--space-6);
152
200
  --search-select-list-space-inset: var(--space-1);
153
201
  --search-select-footer-space-inset: var(--space-1);
@@ -178,6 +226,10 @@
178
226
  --cascader-empty-space-block: var(--space-6);
179
227
 
180
228
  --select-content-max-height: 24rem;
229
+
230
+ --select-content-inline-size: auto;
231
+
232
+ --select-empty-space-block: var(--search-select-placeholder-space-block);
181
233
  --select-scroll-button-space-block: var(--space-1);
182
234
 
183
235
  --select-item-space-inline: 0.625rem;
@@ -194,6 +246,7 @@
194
246
  --time-picker-option-radius: var(--radius-md);
195
247
  --time-picker-option-font-size: var(--font-size-sm);
196
248
  --time-picker-footer-space-inset: var(--space-2);
249
+ --time-picker-footer-space-gap: var(--space-2);
197
250
 
198
251
  --time-picker-affix-space-gap: var(--control-inline-affix-space-gap);
199
252
 
@@ -261,6 +314,8 @@
261
314
  --month-picker-separator-icon-size: var(--icon-size-sm);
262
315
 
263
316
  --button-xs-height: var(--control-height-xs);
317
+
318
+ --button-bare-target-size: var(--control-height-xs);
264
319
  --button-xs-space-inline: var(--space-2);
265
320
  --button-xs-space-gap: var(--space-1);
266
321
  --button-xs-font-size: var(--font-size-xs);
@@ -290,11 +345,27 @@
290
345
  --button-count-secondary-color: initial;
291
346
 
292
347
  --control-label-font-size: var(--font-size-sm);
293
- --control-label-line-height: 1;
348
+
349
+ --control-label-line-height: var(--line-height-normal);
294
350
 
295
351
  --control-label-space-gap: 0.5rem;
296
352
 
297
353
  --control-label-disabled-alpha: 0.7;
354
+
355
+ --control-surface-border-color: hsl(var(--input));
356
+ --control-surface-background: hsl(var(--background));
357
+
358
+ --control-filled-border-color: transparent;
359
+ --control-filled-background: hsl(var(--muted));
360
+ --control-filled-shadow: none;
361
+
362
+ --control-borderless-border-color: transparent;
363
+ --control-borderless-background: transparent;
364
+ --control-borderless-shadow: none;
365
+
366
+ --control-status-error-border-color: hsl(var(--destructive));
367
+ --control-status-warning-border-color: hsl(var(--text-warning));
368
+ --control-status-warning-outline-color: var(--warning);
298
369
  }
299
370
 
300
371
  @media (pointer: coarse) {
@@ -303,3 +374,10 @@
303
374
  --control-height-default: var(--band-height-xl);
304
375
  }
305
376
  }
377
+
378
+ :root {
379
+ --textarea-padding-block-start: initial;
380
+ --textarea-padding-block-end: initial;
381
+ --textarea-padding-inline-start: initial;
382
+ --textarea-padding-inline-end: initial;
383
+ }
@@ -31,6 +31,7 @@
31
31
  --prose-code-space-inline: var(--space-1);
32
32
  --prose-code-radius: var(--radius-sm);
33
33
  --prose-image-radius: var(--radius-md);
34
+ --tree-item-indent-width: var(--space-5);
34
35
  --tree-item-title-font-size: var(--font-size-xs);
35
36
  --tree-item-description-font-size: var(--font-size-xs);
36
37
  --timeline-note-font-size: var(--font-size-xs);
@@ -122,3 +123,11 @@
122
123
 
123
124
  --permission-matrix-min-width: 48rem;
124
125
  }
126
+
127
+ :root {
128
+ --range-timeline-label-width: var(--app-shell-sidebar-width);
129
+ --range-timeline-unit-width: calc(var(--control-height-sm) * 2);
130
+ --range-timeline-row-height: var(--control-height-lg);
131
+ --range-timeline-bar-height: var(--control-height-sm);
132
+ --range-timeline-border-color: var(--border);
133
+ }
@@ -13,4 +13,15 @@
13
13
  --descriptions-value-font-size: var(--font-size-sm);
14
14
 
15
15
  --descriptions-value-line-height: calc(1.25 / 0.875);
16
+
17
+ --descriptions-row-border: none;
18
+ --descriptions-row-min-height: auto;
19
+
20
+ --descriptions-border-width: var(--stroke-hairline);
21
+ --descriptions-border-radius: var(--radius-md);
22
+
23
+ --descriptions-cell-padding-y: var(--space-2);
24
+ --descriptions-cell-padding-x: var(--space-3);
25
+
26
+ --descriptions-label-background: initial;
16
27
  }
@@ -0,0 +1,8 @@
1
+
2
+ :root {
3
+ --flex-surface-background: initial;
4
+ --flex-surface-warning-alpha: 0.04;
5
+ --flex-surface-radius: initial;
6
+ --flex-actions-offset-block: initial;
7
+ --flex-actions-offset-inline: initial;
8
+ }
@@ -10,6 +10,12 @@
10
10
  --pagination-total-font-size: var(--font-size-sm);
11
11
 
12
12
  --pagination-icon-size: var(--control-icon-size);
13
+
14
+ --pagination-control-height-sm: var(--band-height-sm);
15
+
16
+ --pagination-jumper-gap: var(--space-inline-xs);
17
+ --pagination-jumper-width: 4rem;
18
+ --pagination-jumper-font-size: var(--pagination-total-font-size);
13
19
  --filter-bar-gap: var(--space-3);
14
20
  --filter-bar-padding-y: var(--space-2);
15
21
  --filter-label-font-size: var(--font-size-xs);
@@ -29,6 +35,8 @@
29
35
  --app-setting-picker-compact-gap: var(--space-1);
30
36
  --app-setting-picker-compact-font-size: var(--font-size-xs);
31
37
  --breadcrumb-font-size: var(--font-size-xs);
38
+
39
+ --breadcrumb-menu-trigger-gap: var(--space-inline-xs);
32
40
  --menubar-shortcut-font-size: var(--font-size-xs);
33
41
  --tabs-list-max-inline-size: 100%;
34
42
  --tabs-list-overflow: auto;
@@ -47,6 +55,34 @@
47
55
  --tabs-trigger-line-padding-x: 1rem;
48
56
  --tabs-trigger-line-padding-y: 0.5rem;
49
57
 
58
+ --tabs-trigger-height-sm: var(--band-height-sm);
59
+ --tabs-trigger-height-md: var(--band-height-md);
60
+ --tabs-trigger-height-lg: var(--band-height-lg);
61
+ --tabs-trigger-font-size-sm: var(--font-size-xs);
62
+ --tabs-trigger-font-size-md: var(--font-size-base);
63
+ --tabs-trigger-font-size-lg: var(--font-size-lg);
64
+ --tabs-trigger-padding-x-sm: var(--space-2);
65
+ --tabs-trigger-padding-x-md: var(--space-3);
66
+ --tabs-trigger-padding-x-lg: var(--space-4);
67
+
68
+ --tabs-card-list-radius: 0px;
69
+ --tabs-card-list-space-inset: 0px;
70
+ --tabs-card-list-space-gap: var(--space-1);
71
+ --tabs-card-radius: var(--radius-md);
72
+ --tabs-card-rail-border-width: var(--stroke-hairline);
73
+ --tabs-card-background: initial;
74
+
75
+ --tabs-bar-gap: var(--space-2);
76
+ --tabs-extra-gap: var(--space-2);
77
+ --tabs-add-size: var(--band-height-md);
78
+ --tabs-add-radius: var(--radius-md);
79
+ --tabs-add-icon-size: var(--control-icon-size);
80
+ --tabs-trigger-icon-size: var(--control-icon-size);
81
+ --tabs-tab-remove-size: var(--band-height-xs);
82
+ --tabs-tab-remove-radius: var(--radius-sm);
83
+ --tabs-tab-remove-icon-size: var(--icon-size-xs);
84
+ --tabs-tab-remove-space-inline-end: var(--space-1);
85
+
50
86
  --menubar-item-hover-background: initial;
51
87
  --menubar-item-hover-foreground: initial;
52
88
 
@@ -75,6 +111,14 @@
75
111
  --menu-content-min-width: 10rem;
76
112
 
77
113
  --dropdown-content-min-width: 8rem;
114
+
115
+ --menu-content-width-sm: 12rem;
116
+ --menu-content-width-md: 16rem;
117
+ --menu-content-width-lg: 20rem;
118
+
119
+ --dropdown-arrow-width: var(--space-3);
120
+ --dropdown-arrow-height: var(--space-inline-xs);
121
+ --dropdown-arrow-background: initial;
78
122
  --menu-separator-space-block: var(--space-1);
79
123
  --menu-separator-space-inline: calc(var(--space-1) * -1);
80
124
 
@@ -99,6 +143,15 @@
99
143
  --steps-connector-inset: 1.25rem;
100
144
  --steps-connector-space-block-start: var(--space-4);
101
145
 
146
+ --steps-nav-space-gap: var(--space-2);
147
+ --steps-nav-space-inline: var(--space-4);
148
+ --steps-nav-space-block: var(--space-3);
149
+ --steps-nav-radius: var(--radius-md);
150
+ --steps-nav-separator-size: var(--control-icon-size-sm);
151
+
152
+ --steps-progress-ring-width: var(--stroke-md);
153
+ --steps-progress-track-color: initial;
154
+
102
155
  --app-setting-picker-locale-width: 10rem;
103
156
  --app-setting-picker-timezone-width: 14rem;
104
157
  --app-setting-picker-date-format-width: 11rem;
@@ -109,6 +162,8 @@
109
162
  --app-setting-picker-font-size-width: 9rem;
110
163
 
111
164
  --app-setting-picker-width-breakpoint: 40rem;
165
+ --app-setting-picker-bar-border-width: 0;
166
+ --app-setting-picker-bar-shadow: none;
112
167
  --app-setting-picker-icon-size: var(--icon-size-md);
113
168
  --app-setting-picker-icon-rest-alpha: 0.7;
114
169
  }
@@ -1,6 +1,7 @@
1
1
 
2
2
 
3
3
  :root {
4
+ --responsive-grid-column-width: 20rem;
4
5
  --sidebar-section-label-font-size: var(--font-size-2xs);
5
6
  --sidebar-product-tenant-font-size: var(--font-size-2xs);
6
7
  --sidebar-badge-font-size: var(--font-size-2xs);
@@ -44,9 +45,16 @@
44
45
  --app-shell-sidebar-width: 16rem;
45
46
  --app-shell-sidebar-collapsed-width: 4rem;
46
47
 
47
- --app-shell-nav-rail-width: 3.5rem;
48
+ --app-shell-nav-rail-width: 2.5rem;
49
+
50
+ --app-shell-nav-rail-item-size: var(--band-height-lg);
51
+
52
+ --app-shell-nav-rail-height: var(--app-shell-nav-rail-width);
53
+
54
+ --app-shell-nav-rail-inset: var(--space-3);
48
55
  --app-shell-page-max-width: 80rem;
49
- --app-shell-main-background: hsl(var(--muted) / 0.4);
56
+
57
+ --app-shell-main-background: initial;
50
58
  --app-shell-mobile-nav-width: 22.5rem;
51
59
 
52
60
  --app-shell-mobile-nav-background: initial;
@@ -82,6 +90,7 @@
82
90
  --sidebar-section-label-padding-x: var(--space-2);
83
91
  --sidebar-section-label-padding-bottom: var(--space-1);
84
92
 
93
+ --topbar-search-width: 16rem;
85
94
  --topbar-search-max-width: none;
86
95
 
87
96
  --topbar-height: auto;
@@ -101,14 +110,95 @@
101
110
  --topbar-item-hover-color: var(--accent-foreground);
102
111
  --topbar-item-active-background: var(--secondary);
103
112
 
113
+ --topbar-item-badge-offset-block: var(--space-1);
114
+ --topbar-item-badge-offset-inline: var(--space-1);
115
+ --topbar-item-badge-size: 1rem;
116
+ --topbar-item-badge-padding-inline: var(--space-1);
117
+ --topbar-item-badge-font-size: var(--font-size-2xs);
118
+ --topbar-item-badge-background: initial;
119
+ --topbar-item-badge-foreground: initial;
120
+ --topbar-item-badge-destructive-background: initial;
121
+ --topbar-item-badge-destructive-foreground: initial;
122
+
104
123
  --topbar-item-focus-ring-offset: calc(-1 * var(--focus-ring-width));
105
124
  --org-switcher-trigger-height: var(--band-height-xl);
106
125
  --org-switcher-trigger-padding-x: var(--space-2);
107
- --org-switcher-avatar-size: 1.75rem;
126
+
127
+ --org-switcher-avatar-size: var(--control-height-sm);
128
+
129
+ --org-switcher-sheet-inset: var(--space-3);
130
+
131
+ --org-switcher-list-inset: var(--org-switcher-sheet-inset);
132
+
133
+ --org-switcher-list-offset: 0px;
134
+
135
+ --org-switcher-dialog-width: 26rem;
136
+
137
+ --org-switcher-search-space-block: var(--space-3);
108
138
  --org-switcher-menu-width: 16rem;
109
139
  --org-switcher-sheet-max-height: 75dvh;
110
140
  --org-switcher-state-min-height: 8rem;
111
141
 
142
+ --app-launcher-panel-width: 20rem;
143
+ --app-launcher-panel-max-height: 26rem;
144
+ --app-launcher-panel-gap: var(--space-3);
145
+ --app-launcher-sheet-max-height: 75dvh;
146
+ --app-launcher-grid-gap: var(--space-1);
147
+ --app-launcher-tile-gap: var(--space-1);
148
+ --app-launcher-tile-padding: var(--space-2);
149
+
150
+ --app-launcher-tile-min-height: var(--control-height-comfortable);
151
+ --app-launcher-tile-radius: var(--radius);
152
+ --app-launcher-tile-color: var(--foreground);
153
+ --app-launcher-tile-hover-background: var(--accent);
154
+ --app-launcher-tile-hover-color: var(--accent-foreground);
155
+
156
+ --app-launcher-tile-current-background: initial;
157
+ --app-launcher-mark-size: 2.5rem;
158
+ --app-launcher-mark-radius: var(--radius);
159
+ --app-launcher-mark-background: var(--secondary);
160
+ --app-launcher-mark-foreground: var(--secondary-foreground);
161
+ --app-launcher-mark-font-size: var(--font-size-sm);
162
+ --app-launcher-name-font-size: var(--font-size-2xs);
163
+ --app-launcher-group-label-font-size: var(--font-size-2xs);
164
+ --app-launcher-group-label-color: var(--muted-foreground);
165
+ --app-launcher-state-min-height: 8rem;
166
+
167
+ --app-launcher-launchpad-backdrop-blur-size: 28px;
168
+ --app-launcher-launchpad-backdrop-alpha: 42%;
169
+ --app-launcher-launchpad-space-inset: var(--space-8);
170
+ --app-launcher-launchpad-panel-max-width: 60rem;
171
+ --app-launcher-launchpad-panel-gap: var(--space-8);
172
+ --app-launcher-launchpad-grid-gap: var(--space-6);
173
+ --app-launcher-launchpad-tile-inline-size: 7.5rem;
174
+ --app-launcher-launchpad-tile-padding: var(--space-3);
175
+ --app-launcher-launchpad-tile-radius: var(--radius-lg);
176
+ --app-launcher-launchpad-tile-gap: var(--space-3);
177
+ --app-launcher-launchpad-tile-hover-background: color-mix(
178
+ in srgb,
179
+ hsl(var(--foreground)) 10%,
180
+ transparent
181
+ );
182
+ --app-launcher-launchpad-mark-size: 4rem;
183
+ --app-launcher-launchpad-mark-radius: var(--radius-lg);
184
+
185
+ --app-launcher-launchpad-mark-background: color-mix(
186
+ in srgb,
187
+ hsl(var(--card)) 62%,
188
+ transparent
189
+ );
190
+ --app-launcher-launchpad-mark-border-color: color-mix(
191
+ in srgb,
192
+ hsl(var(--foreground)) 14%,
193
+ transparent
194
+ );
195
+ --app-launcher-launchpad-mark-font-size: var(--font-size-lg);
196
+ --app-launcher-launchpad-mark-shadow: var(--shadow-lg);
197
+ --app-launcher-launchpad-name-font-size: var(--font-size-sm);
198
+ --app-launcher-launchpad-title-font-size: var(--font-size-2xs);
199
+ --app-launcher-launchpad-title-letter-spacing: 0.08em;
200
+ --app-launcher-launchpad-close-space-padding: var(--space-2);
201
+
112
202
  --sidebar-item-active-color: initial;
113
203
  --sidebar-item-active-tint: initial;
114
204
 
@@ -173,8 +263,8 @@
173
263
 
174
264
  --auth-shell-registration-card-max-width: 22.5rem;
175
265
 
176
- --auth-shell-registration-main-padding-block-start: 9.5rem;
177
- --auth-shell-registration-main-padding-block-start-mobile: 8.875rem;
266
+ --auth-shell-registration-main-padding-block-start: 1rem;
267
+ --auth-shell-registration-main-padding-block-start-mobile: 0.9375rem;
178
268
  --auth-shell-registration-main-padding-inline: 1rem;
179
269
  --auth-shell-registration-main-padding-inline-mobile: 0.9375rem;
180
270
 
@@ -203,6 +293,8 @@
203
293
  --auth-footer-content-gap: 0.375rem;
204
294
 
205
295
  --auth-footer-text-font-size: var(--font-size-2xs);
296
+
297
+ --auth-footer-target-min-size: var(--touch-target-min);
206
298
  --auth-stack-gap: var(--space-3);
207
299
  --auth-shell-field-label-gap: var(--space-1);
208
300
 
@@ -245,6 +337,9 @@
245
337
  @media (pointer: coarse) {
246
338
  :root {
247
339
  --app-shell-bar-height: var(--band-height-3xl);
340
+
341
+ --app-shell-nav-rail-width: 3rem;
342
+ --app-shell-nav-rail-item-size: var(--band-height-xl);
248
343
  }
249
344
  }
250
345
 
@@ -17,11 +17,25 @@
17
17
  --table-surface-min-inline-size: 640px;
18
18
  --table-head-font-size: var(--font-size-xs);
19
19
 
20
+ --table-head-font-weight: var(--font-weight-medium);
21
+
20
22
  --table-header-background: initial;
21
23
  --table-header-foreground: initial;
22
24
 
23
25
  --table-pin-shadow: -6px 0 6px -5px hsl(var(--foreground) / 0.12);
24
26
 
27
+ --table-fixed-shadow-start: 6px 0 6px -5px hsl(var(--foreground) / 0.12);
28
+ --table-fixed-shadow-start-rtl: -6px 0 6px -5px hsl(var(--foreground) / 0.12);
29
+
30
+ --table-expand-column-width: 2.5rem;
31
+
32
+ --table-summary-background: initial;
33
+ --table-summary-border-width: var(--stroke-hairline);
34
+
35
+ --table-row-expanded-background: initial;
36
+
37
+ --table-selection-menu-gap: var(--space-1);
38
+
25
39
  --table-row-striped-background: initial;
26
40
  --table-row-hover-background: initial;
27
41
  --table-row-selected-background: initial;
@@ -186,6 +186,8 @@
186
186
 
187
187
  --scaling: 1;
188
188
 
189
+ --touch-target-min: 1.5rem;
190
+
189
191
  --space-0: 0;
190
192
  --space-1: calc(0.25rem * var(--scaling));
191
193
  --space-2: calc(0.5rem * var(--scaling));