@godxjp/ui 19.1.0 → 19.3.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 (437) hide show
  1. package/README.md +25 -128
  2. package/dist/app/theme-axes.d.ts +4 -15
  3. package/dist/app/timezones.d.ts +1 -4
  4. package/dist/components/charts/area-chart.d.ts +2 -3
  5. package/dist/components/charts/bar-chart.d.ts +2 -3
  6. package/dist/components/charts/chart-frame.d.ts +7 -16
  7. package/dist/components/charts/chart-summary.d.ts +2 -2
  8. package/dist/components/charts/compact-bar-trend.d.ts +9 -24
  9. package/dist/components/charts/index.d.ts +1 -6
  10. package/dist/components/data-display/badge.d.ts +20 -14
  11. package/dist/components/data-display/badge.js +18 -4
  12. package/dist/components/data-display/card.d.ts +21 -41
  13. package/dist/components/data-display/carousel.d.ts +1 -2
  14. package/dist/components/data-display/code-block.d.ts +4 -0
  15. package/dist/components/data-display/code-block.js +24 -0
  16. package/dist/components/data-display/data-table.d.ts +15 -37
  17. package/dist/components/data-display/data-table.js +1 -3
  18. package/dist/components/data-display/descriptions.d.ts +2 -6
  19. package/dist/components/data-display/descriptions.js +0 -2
  20. package/dist/components/data-display/index.d.ts +4 -0
  21. package/dist/components/data-display/index.js +4 -0
  22. package/dist/components/data-display/list-row.d.ts +3 -22
  23. package/dist/components/data-display/permission-matrix.d.ts +7 -20
  24. package/dist/components/data-display/progress.d.ts +1 -1
  25. package/dist/components/data-display/prose.d.ts +4 -0
  26. package/dist/components/data-display/prose.js +20 -0
  27. package/dist/components/data-display/service-launcher-card.d.ts +3 -10
  28. package/dist/components/data-display/table.d.ts +20 -80
  29. package/dist/components/data-display/table.js +0 -3
  30. package/dist/components/data-display/timeline.d.ts +3 -5
  31. package/dist/components/data-entry/branch-scope-picker.d.ts +2 -19
  32. package/dist/components/data-entry/branch-scope-picker.js +0 -1
  33. package/dist/components/data-entry/calendar.d.ts +3 -2
  34. package/dist/components/data-entry/calendar.js +58 -3
  35. package/dist/components/data-entry/command-palette.d.ts +8 -22
  36. package/dist/components/data-entry/date-picker.d.ts +4 -5
  37. package/dist/components/data-entry/date-picker.js +6 -1
  38. package/dist/components/data-entry/date-range-picker.d.ts +1 -1
  39. package/dist/components/data-entry/date-range-picker.js +8 -3
  40. package/dist/components/data-entry/form-errors.d.ts +7 -18
  41. package/dist/components/data-entry/form-field.js +1 -5
  42. package/dist/components/data-entry/form.d.ts +1 -9
  43. package/dist/components/data-entry/input.d.ts +16 -14
  44. package/dist/components/data-entry/input.js +3 -0
  45. package/dist/components/data-entry/month-picker.js +2 -2
  46. package/dist/components/data-entry/month-range-picker.d.ts +4 -6
  47. package/dist/components/data-entry/month-range-picker.js +2 -2
  48. package/dist/components/data-entry/number-input.d.ts +1 -5
  49. package/dist/components/data-entry/number-input.js +1 -0
  50. package/dist/components/data-entry/radio.js +0 -1
  51. package/dist/components/data-entry/search-select.d.ts +2 -4
  52. package/dist/components/data-entry/select.d.ts +11 -6
  53. package/dist/components/data-entry/select.js +4 -2
  54. package/dist/components/data-entry/switch.js +0 -1
  55. package/dist/components/data-entry/textarea.d.ts +10 -16
  56. package/dist/components/data-entry/time-picker.d.ts +3 -5
  57. package/dist/components/data-entry/upload-types.d.ts +1 -5
  58. package/dist/components/data-entry/use-upload-draft.d.ts +0 -4
  59. package/dist/components/feedback/dialog.d.ts +6 -15
  60. package/dist/components/feedback/overlay-header-tone.d.ts +1 -1
  61. package/dist/components/feedback/sheet.d.ts +3 -10
  62. package/dist/components/feedback/sheet.js +1 -1
  63. package/dist/components/feedback/sonner.js +2 -3
  64. package/dist/components/general/activity.d.ts +4 -30
  65. package/dist/components/general/button.js +1 -10
  66. package/dist/components/general/logo.d.ts +6 -28
  67. package/dist/components/general/reveal.d.ts +3 -9
  68. package/dist/components/general/typography.d.ts +1 -3
  69. package/dist/components/layout/account-chip.d.ts +8 -0
  70. package/dist/components/layout/account-chip.js +45 -0
  71. package/dist/components/layout/auth-divider.d.ts +2 -9
  72. package/dist/components/layout/auth-shell.d.ts +1 -14
  73. package/dist/components/layout/breadcrumb.d.ts +1 -5
  74. package/dist/components/layout/centered-shell.d.ts +4 -18
  75. package/dist/components/layout/error-surface.d.ts +11 -28
  76. package/dist/components/layout/error-surface.js +4 -1
  77. package/dist/components/layout/index.d.ts +2 -0
  78. package/dist/components/layout/index.js +2 -0
  79. package/dist/components/layout/legal-document-shell.d.ts +5 -28
  80. package/dist/components/layout/master-detail.d.ts +2 -18
  81. package/dist/components/layout/page-container.js +0 -1
  82. package/dist/components/layout/responsive-grid.d.ts +6 -1
  83. package/dist/components/layout/responsive-grid.js +9 -2
  84. package/dist/components/layout/service-role-panel.d.ts +7 -19
  85. package/dist/components/layout/sidebar.d.ts +5 -27
  86. package/dist/components/layout/sidebar.js +0 -1
  87. package/dist/components/layout/split-pane.d.ts +0 -7
  88. package/dist/components/layout/topbar.d.ts +1 -14
  89. package/dist/components/navigation/app-setting-picker.js +1 -3
  90. package/dist/components/navigation/filter-bar.d.ts +1 -6
  91. package/dist/components/navigation/pagination-utils.d.ts +2 -12
  92. package/dist/components/navigation/tabs-scroll.d.ts +2 -36
  93. package/dist/components/navigation/tabs.js +4 -8
  94. package/dist/components/query/data-state.d.ts +2 -2
  95. package/dist/components/ui/credential-reveal.d.ts +1 -4
  96. package/dist/components/ui/hover-card.d.ts +1 -2
  97. package/dist/components/ui/separator.d.ts +2 -15
  98. package/dist/components/ui/toggle-group.d.ts +1 -5
  99. package/dist/components/ui/toggle.d.ts +6 -31
  100. package/dist/email/brand-mark.d.ts +6 -34
  101. package/dist/email/color.d.ts +7 -17
  102. package/dist/email/geometry.d.ts +4 -8
  103. package/dist/email/index.d.ts +4 -48
  104. package/dist/email/inline-style.d.ts +3 -9
  105. package/dist/email/urgency.d.ts +2 -7
  106. package/dist/form/form-context.d.ts +2 -5
  107. package/dist/form/form-root.d.ts +1 -2
  108. package/dist/i18n/messages/en.json +4 -0
  109. package/dist/i18n/messages/ja.json +4 -0
  110. package/dist/i18n/messages/vi.json +4 -0
  111. package/dist/inertia/index.d.ts +2 -10
  112. package/dist/lib/control-styles.d.ts +10 -21
  113. package/dist/lib/control-styles.js +4 -6
  114. package/dist/lib/datetime/format-date.d.ts +1 -4
  115. package/dist/lib/field-a11y.d.ts +11 -68
  116. package/dist/lib/field-a11y.js +0 -1
  117. package/dist/lib/format.d.ts +4 -8
  118. package/dist/lib/hooks.d.ts +6 -12
  119. package/dist/lib/permission-grid.d.ts +3 -18
  120. package/dist/lib/query-error.d.ts +3 -3
  121. package/dist/props/components/app.prop.d.ts +15 -38
  122. package/dist/props/components/charts.prop.d.ts +2 -3
  123. package/dist/props/components/data-display.prop.d.ts +55 -72
  124. package/dist/props/components/data-entry.prop.d.ts +35 -40
  125. package/dist/props/components/form.prop.d.ts +2 -6
  126. package/dist/props/components/general.prop.d.ts +11 -27
  127. package/dist/props/components/layout.prop.d.ts +89 -260
  128. package/dist/props/components/navigation.prop.d.ts +27 -42
  129. package/dist/props/registry.d.ts +36 -1
  130. package/dist/props/registry.js +45 -1
  131. package/dist/props/vocabulary/data.prop.d.ts +18 -49
  132. package/dist/props/vocabulary/index.d.ts +1 -1
  133. package/dist/props/vocabulary/interaction.prop.d.ts +10 -12
  134. package/dist/props/vocabulary/layout.prop.d.ts +8 -30
  135. package/dist/props/vocabulary/shared.prop.d.ts +3 -2
  136. package/dist/styles/alert-layout.css +1 -32
  137. package/dist/styles/badge-layout.css +19 -18
  138. package/dist/styles/base.css +14 -113
  139. package/dist/styles/card-layout.css +6 -128
  140. package/dist/styles/chart-layout.css +2 -17
  141. package/dist/styles/control.css +380 -458
  142. package/dist/styles/core.css +21 -0
  143. package/dist/styles/data-display-layout.css +175 -94
  144. package/dist/styles/data-entry-layout.css +0 -45
  145. package/dist/styles/density.css +1 -30
  146. package/dist/styles/dialog-layout.css +5 -69
  147. package/dist/styles/focus-ring.css +13 -87
  148. package/dist/styles/fonts.css +1 -31
  149. package/dist/styles/form-layout.css +7 -91
  150. package/dist/styles/index.css +2 -20
  151. package/dist/styles/layout.css +38 -456
  152. package/dist/styles/logo-layout.css +1 -35
  153. package/dist/styles/motion.css +3 -42
  154. package/dist/styles/navigation-layout.css +3 -50
  155. package/dist/styles/shell-layout.css +37 -403
  156. package/dist/styles/table-layout.css +16 -274
  157. package/dist/styles/text-layout.css +7 -21
  158. package/dist/styles/toggle.css +1 -23
  159. package/dist/theme/dxs.canonical.css +1 -55
  160. package/dist/theme/example.service.css +1 -26
  161. package/dist/theme/famgia.service.css +5 -15
  162. package/dist/tokens/axes.css +3 -40
  163. package/dist/tokens/base.css +1 -4
  164. package/dist/tokens/components/activity.css +6 -42
  165. package/dist/tokens/components/badge.css +12 -13
  166. package/dist/tokens/components/banner.css +4 -9
  167. package/dist/tokens/components/card.css +32 -88
  168. package/dist/tokens/components/chart.css +9 -26
  169. package/dist/tokens/components/control.css +37 -222
  170. package/dist/tokens/components/data-display.css +28 -79
  171. package/dist/tokens/components/data-entry.css +5 -19
  172. package/dist/tokens/components/descriptions.css +7 -27
  173. package/dist/tokens/components/email.css +38 -84
  174. package/dist/tokens/components/error-surface.css +2 -18
  175. package/dist/tokens/components/feedback.css +27 -124
  176. package/dist/tokens/components/form.css +13 -45
  177. package/dist/tokens/components/legal-document.css +16 -41
  178. package/dist/tokens/components/list-row.css +11 -36
  179. package/dist/tokens/components/logo.css +2 -57
  180. package/dist/tokens/components/navigation.css +16 -94
  181. package/dist/tokens/components/scroll-area.css +2 -18
  182. package/dist/tokens/components/separator.css +8 -30
  183. package/dist/tokens/components/sheet.css +3 -14
  184. package/dist/tokens/components/shell.css +53 -307
  185. package/dist/tokens/components/sidebar.css +5 -22
  186. package/dist/tokens/components/table.css +19 -140
  187. package/dist/tokens/components/toggle.css +3 -65
  188. package/dist/tokens/components/upload.css +7 -43
  189. package/dist/tokens/foundation.css +108 -383
  190. package/dist/tokens/semantic/layout.css +33 -207
  191. package/docs/CANONICAL-CONTRACTS.md +206 -0
  192. package/docs/COMPONENTS.md +157 -0
  193. package/docs/COMPOSITION-VS-COMPONENT.md +105 -0
  194. package/docs/CONSUMER-RULES.md +14 -0
  195. package/docs/CUSTOMER-THEMING.md +162 -0
  196. package/docs/DATETIME.md +69 -0
  197. package/docs/DEVELOPMENT.md +173 -0
  198. package/docs/FORMS.md +143 -0
  199. package/docs/FRAME-A11Y-CI.md +267 -0
  200. package/docs/FRAME-COVERAGE-LEDGER.md +123 -0
  201. package/docs/FRAME-COVERAGE-REPORT.md +140 -0
  202. package/docs/FRAME-COVERAGE-STANDARD.md +65 -0
  203. package/docs/FRAME-COVERAGE.md +29 -0
  204. package/docs/PROPS-REGISTRY.md +61 -0
  205. package/docs/PROPS-VOCABULARY.md +100 -0
  206. package/docs/README.md +60 -0
  207. package/docs/REGISTRY.md +70 -0
  208. package/docs/SPACING.md +56 -0
  209. package/docs/STANDARDS-vocabulary-tokens.md +48 -0
  210. package/docs/TESTING.md +98 -0
  211. package/docs/TOKENS.md +347 -0
  212. package/docs/asset-modules.d.ts +46 -0
  213. package/docs/assets/cover-terrain.svg +6 -0
  214. package/docs/assets/portrait-amber.svg +5 -0
  215. package/docs/assets/portrait-clay.svg +5 -0
  216. package/docs/assets/portrait-indigo.svg +5 -0
  217. package/docs/assets/portrait-iris.svg +5 -0
  218. package/docs/assets/portrait-moss.svg +5 -0
  219. package/docs/assets/portrait-plum.svg +5 -0
  220. package/docs/assets/portrait-slate.svg +5 -0
  221. package/docs/charts/compact-bar-trend.tsx +328 -0
  222. package/docs/charts/size-tiers.tsx +192 -0
  223. package/docs/data-display/accordion.tsx +99 -0
  224. package/docs/data-display/avatar.tsx +355 -0
  225. package/docs/data-display/badge.tsx +283 -0
  226. package/docs/data-display/card/examples/detail-panel.tsx +106 -0
  227. package/docs/data-display/card/index.md +3 -0
  228. package/docs/data-display/card/index.tsx +285 -0
  229. package/docs/data-display/carousel.tsx +160 -0
  230. package/docs/data-display/charts.tsx +198 -0
  231. package/docs/data-display/code-block.tsx +90 -0
  232. package/docs/data-display/collapsible.tsx +162 -0
  233. package/docs/data-display/credential-reveal.tsx +145 -0
  234. package/docs/data-display/data-table/examples/approval-queue.tsx +212 -0
  235. package/docs/data-display/data-table/examples/grid-features.tsx +158 -0
  236. package/docs/data-display/data-table/examples/list-page.tsx +175 -0
  237. package/docs/data-display/data-table/index.md +5 -0
  238. package/docs/data-display/data-table/index.tsx +295 -0
  239. package/docs/data-display/descriptions.tsx +143 -0
  240. package/docs/data-display/empty-state.tsx +164 -0
  241. package/docs/data-display/hover-card.tsx +181 -0
  242. package/docs/data-display/list-row.tsx +420 -0
  243. package/docs/data-display/permission-matrix.tsx +188 -0
  244. package/docs/data-display/popover-touch.tsx +27 -0
  245. package/docs/data-display/popover.tsx +246 -0
  246. package/docs/data-display/progress.tsx +84 -0
  247. package/docs/data-display/prose.tsx +105 -0
  248. package/docs/data-display/qr-code.tsx +68 -0
  249. package/docs/data-display/scroll-area.tsx +303 -0
  250. package/docs/data-display/service-launcher-card.tsx +145 -0
  251. package/docs/data-display/stat-card.tsx +99 -0
  252. package/docs/data-display/table.tsx +251 -0
  253. package/docs/data-display/timeline.tsx +112 -0
  254. package/docs/data-display/touch-actions.tsx +36 -0
  255. package/docs/data-display/tree-list.tsx +107 -0
  256. package/docs/data-entry/branch-scope-picker.tsx +123 -0
  257. package/docs/data-entry/calendar.tsx +180 -0
  258. package/docs/data-entry/cascader.tsx +378 -0
  259. package/docs/data-entry/checkbox.tsx +256 -0
  260. package/docs/data-entry/color-picker.tsx +117 -0
  261. package/docs/data-entry/command-palette.tsx +179 -0
  262. package/docs/data-entry/command.tsx +262 -0
  263. package/docs/data-entry/country-picker-recipe.tsx +175 -0
  264. package/docs/data-entry/date-picker.tsx +191 -0
  265. package/docs/data-entry/date-range-picker.tsx +149 -0
  266. package/docs/data-entry/form/examples/employee-settings.tsx +267 -0
  267. package/docs/data-entry/form/examples/invoice-form.tsx +387 -0
  268. package/docs/data-entry/form-field/examples/a11y-contract.tsx +240 -0
  269. package/docs/data-entry/form-field/examples/create-form.tsx +105 -0
  270. package/docs/data-entry/form-field/index.md +8 -0
  271. package/docs/data-entry/form-field/index.tsx +330 -0
  272. package/docs/data-entry/form-inertia.tsx +80 -0
  273. package/docs/data-entry/form-root.tsx +102 -0
  274. package/docs/data-entry/form.tsx +724 -0
  275. package/docs/data-entry/input-otp.tsx +231 -0
  276. package/docs/data-entry/input.tsx +114 -0
  277. package/docs/data-entry/label.tsx +100 -0
  278. package/docs/data-entry/month-picker.tsx +101 -0
  279. package/docs/data-entry/month-range-picker.tsx +115 -0
  280. package/docs/data-entry/number-input.tsx +240 -0
  281. package/docs/data-entry/password-input.tsx +102 -0
  282. package/docs/data-entry/password-strength.tsx +97 -0
  283. package/docs/data-entry/radio-group.tsx +95 -0
  284. package/docs/data-entry/rating.tsx +87 -0
  285. package/docs/data-entry/search-input.tsx +120 -0
  286. package/docs/data-entry/select-async-contracts.tsx +108 -0
  287. package/docs/data-entry/select-matrix.tsx +204 -0
  288. package/docs/data-entry/select.tsx +369 -0
  289. package/docs/data-entry/slider.tsx +130 -0
  290. package/docs/data-entry/switch.tsx +67 -0
  291. package/docs/data-entry/tag-input.tsx +108 -0
  292. package/docs/data-entry/textarea.tsx +209 -0
  293. package/docs/data-entry/time-picker.tsx +99 -0
  294. package/docs/data-entry/toggle-count.tsx +293 -0
  295. package/docs/data-entry/toggle-group.tsx +225 -0
  296. package/docs/data-entry/toggle.tsx +127 -0
  297. package/docs/data-entry/transfer.tsx +97 -0
  298. package/docs/data-entry/tree-select.tsx +204 -0
  299. package/docs/data-entry/upload.tsx +184 -0
  300. package/docs/feedback/alert-dialog.tsx +270 -0
  301. package/docs/feedback/alert.tsx +248 -0
  302. package/docs/feedback/banner.tsx +183 -0
  303. package/docs/feedback/danger-confirm.tsx +88 -0
  304. package/docs/feedback/dialog-touch.tsx +24 -0
  305. package/docs/feedback/dialog.tsx +193 -0
  306. package/docs/feedback/sheet.tsx +420 -0
  307. package/docs/feedback/skeleton.tsx +111 -0
  308. package/docs/feedback/toast.tsx +135 -0
  309. package/docs/feedback/tooltip.tsx +171 -0
  310. package/docs/feedback/two-factor-setup.tsx +68 -0
  311. package/docs/foundation/_email-specimen.ts +274 -0
  312. package/docs/foundation/colors.tsx +204 -0
  313. package/docs/foundation/density.tsx +232 -0
  314. package/docs/foundation/email-tokens.tsx +323 -0
  315. package/docs/foundation/radius-shadow.tsx +154 -0
  316. package/docs/foundation/spacing.tsx +211 -0
  317. package/docs/foundation/typography.tsx +147 -0
  318. package/docs/general/activity.tsx +224 -0
  319. package/docs/general/button/examples/destructive-confirm.tsx +90 -0
  320. package/docs/general/button/examples/form-actions.tsx +85 -0
  321. package/docs/general/button/examples/toolbar.tsx +160 -0
  322. package/docs/general/button/index.md +12 -0
  323. package/docs/general/button/index.tsx +211 -0
  324. package/docs/general/logo.tsx +131 -0
  325. package/docs/general/reveal.tsx +41 -0
  326. package/docs/general/typography.tsx +152 -0
  327. package/docs/layout/account-chip.tsx +72 -0
  328. package/docs/layout/admin-collection.tsx +122 -0
  329. package/docs/layout/app-shell.tsx +374 -0
  330. package/docs/layout/aspect-ratio.tsx +135 -0
  331. package/docs/layout/auth-account-summary.tsx +103 -0
  332. package/docs/layout/auth-divider.tsx +28 -0
  333. package/docs/layout/auth-footer.tsx +37 -0
  334. package/docs/layout/auth-identity.tsx +36 -0
  335. package/docs/layout/auth-recovery/examples/mfa-challenge.md +41 -0
  336. package/docs/layout/auth-recovery/examples/mfa-challenge.tsx +254 -0
  337. package/docs/layout/auth-recovery/examples/mobile-390.md +25 -0
  338. package/docs/layout/auth-recovery/examples/mobile-390.tsx +82 -0
  339. package/docs/layout/auth-recovery/examples/password-recovery.md +24 -0
  340. package/docs/layout/auth-recovery/examples/password-recovery.tsx +197 -0
  341. package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.md +27 -0
  342. package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.tsx +156 -0
  343. package/docs/layout/auth-recovery/index.md +140 -0
  344. package/docs/layout/auth-recovery/index.tsx +96 -0
  345. package/docs/layout/auth-shell-context.tsx +103 -0
  346. package/docs/layout/auth-shell-device.tsx +112 -0
  347. package/docs/layout/auth-shell-registration.tsx +335 -0
  348. package/docs/layout/auth-shell-variants.tsx +139 -0
  349. package/docs/layout/auth-shell.tsx +59 -0
  350. package/docs/layout/auth-stack.tsx +40 -0
  351. package/docs/layout/centered-shell.tsx +102 -0
  352. package/docs/layout/error-surface/examples/application-403.tsx +84 -0
  353. package/docs/layout/error-surface/examples/application-404.tsx +77 -0
  354. package/docs/layout/error-surface/examples/system-500.tsx +47 -0
  355. package/docs/layout/error-surface/examples/system-503.tsx +48 -0
  356. package/docs/layout/error-surface/index.md +153 -0
  357. package/docs/layout/error-surface/index.tsx +239 -0
  358. package/docs/layout/flex.tsx +266 -0
  359. package/docs/layout/legal-document-shell/_data.ts +110 -0
  360. package/docs/layout/legal-document-shell/examples/desktop-1440.md +12 -0
  361. package/docs/layout/legal-document-shell/examples/desktop-1440.tsx +83 -0
  362. package/docs/layout/legal-document-shell/examples/mobile-390.md +22 -0
  363. package/docs/layout/legal-document-shell/examples/mobile-390.tsx +70 -0
  364. package/docs/layout/legal-document-shell/examples/tablet-1024.md +3 -0
  365. package/docs/layout/legal-document-shell/examples/tablet-1024.tsx +84 -0
  366. package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.md +18 -0
  367. package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.tsx +61 -0
  368. package/docs/layout/legal-document-shell/index.md +51 -0
  369. package/docs/layout/legal-document-shell/index.tsx +101 -0
  370. package/docs/layout/master-detail.tsx +387 -0
  371. package/docs/layout/org-switcher.tsx +131 -0
  372. package/docs/layout/page-container.tsx +954 -0
  373. package/docs/layout/resizable-panel.tsx +419 -0
  374. package/docs/layout/responsive-grid.tsx +243 -0
  375. package/docs/layout/separator.tsx +327 -0
  376. package/docs/layout/service-role-panel.tsx +144 -0
  377. package/docs/layout/sidebar.tsx +609 -0
  378. package/docs/layout/split-pane.tsx +468 -0
  379. package/docs/layout/topbar.tsx +349 -0
  380. package/docs/navigation/app-setting-picker.tsx +142 -0
  381. package/docs/navigation/breadcrumb.tsx +135 -0
  382. package/docs/navigation/context-menu.tsx +123 -0
  383. package/docs/navigation/dropdown-menu.tsx +213 -0
  384. package/docs/navigation/filter-bar.tsx +227 -0
  385. package/docs/navigation/menubar.tsx +141 -0
  386. package/docs/navigation/navigation-menu.tsx +158 -0
  387. package/docs/navigation/pagination.tsx +241 -0
  388. package/docs/navigation/steps.tsx +265 -0
  389. package/docs/navigation/tabs-rtl.tsx +28 -0
  390. package/docs/navigation/tabs.tsx +314 -0
  391. package/docs/navigation/toolbar.tsx +339 -0
  392. package/docs/providers/app-provider.tsx +191 -0
  393. package/docs/providers/format-date.tsx +230 -0
  394. package/docs/query/button-refetch.tsx +160 -0
  395. package/docs/query/data-state.tsx +192 -0
  396. package/docs/query/infinite-query-state.tsx +93 -0
  397. package/docs/query/mutation-feedback.tsx +70 -0
  398. package/docs/query/prefetch-link.tsx +262 -0
  399. package/docs/query/touch-actions.tsx +68 -0
  400. package/docs/showcase/acme-portal.tsx +455 -0
  401. package/docs/showcase/acme-website.tsx +461 -0
  402. package/docs/showcase/case1-warehouse-dashboard.tsx +359 -0
  403. package/docs/showcase/case2-employee-me.tsx +444 -0
  404. package/docs/showcase/case3-approval-workflow.tsx +529 -0
  405. package/docs/showcase/case4-login.tsx +313 -0
  406. package/docs/showcase/case5-shift-calendar.tsx +795 -0
  407. package/docs/showcase/case6-agency-handy.tsx +1113 -0
  408. package/docs/showcase/futurelastic-web.tsx +392 -0
  409. package/docs/showcase/org-switcher.tsx +313 -0
  410. package/docs/showcase/permission-matrix.tsx +346 -0
  411. package/docs/showcase/public-landing.tsx +210 -0
  412. package/docs/showcase/settings-account-sections.tsx +559 -0
  413. package/docs/showcase/settings-security-mfa.tsx +145 -0
  414. package/docs/showcase/table-approval-queue.tsx +199 -0
  415. package/docs/showcase/table-bulk-actions.tsx +460 -0
  416. package/docs/showcase/table-compact-kintone.tsx +438 -0
  417. package/docs/showcase/table-conditional-format.tsx +367 -0
  418. package/docs/showcase/table-crud-list.tsx +544 -0
  419. package/docs/showcase/table-density.tsx +347 -0
  420. package/docs/showcase/table-expandable-rows.tsx +480 -0
  421. package/docs/showcase/table-filter-chips.tsx +456 -0
  422. package/docs/showcase/table-footer-totals.tsx +314 -0
  423. package/docs/showcase/table-grouped-subtotals.tsx +391 -0
  424. package/docs/showcase/table-master-detail.tsx +484 -0
  425. package/docs/showcase/table-pagination.tsx +327 -0
  426. package/docs/showcase/table-states.tsx +366 -0
  427. package/docs/showcase/table-sticky-columns.tsx +376 -0
  428. package/docs/showcase/table-tree-rows.tsx +444 -0
  429. package/docs/showcase/table-view-tabs.tsx +488 -0
  430. package/package.json +9 -12
  431. package/scripts/_agent-setup.mjs +16 -2
  432. package/scripts/audit-hook.mjs +3 -13
  433. package/scripts/init-agent-kit.mjs +1 -14
  434. package/scripts/postinstall.mjs +12 -12
  435. package/scripts/ui-audit.mjs +93 -31
  436. package/scripts/visual-audit-rules.mjs +51 -7
  437. package/scripts/visual-audit.mjs +118 -47
package/dist/styles/toggle.css CHANGED
@@ -1,17 +1,4 @@
1
- /* TOGGLE · counter pill + pressed-state chrome (gh#312).
2
- *
3
- * The Toggle BOX itself (heights, padding, variants, the pressed fill) lives in
4
- * `styles/control.css` alongside every other control — import `@godxjp/ui/styles/control` for it.
5
- * This layer is only the counter pill Toggle shares with Button, plus the non-colour encodings of
6
- * the pressed state; `@godxjp/ui/styles` imports it right after control.css so its pressed-state
7
- * rules land later in the cascade at equal specificity.
8
- *
9
- * Every constant here is a token declared in `tokens/components/toggle.css`, where the share-vs-
10
- * split reasoning and the measured contrast numbers live. The geometry knobs carry Button's exact
11
- * counter values off the same primitive scale (asserted by the token-parity test), so the two
12
- * pills are the same size; only the COLOUR knobs are deliberately Toggle's own, because Toggle's
13
- * pill sits on a surface that inverts.
14
- */
1
+
15
2
 
16
3
  @layer components {
17
4
  .ui-toggle-count {
@@ -29,10 +16,6 @@
29
16
  font-variant-numeric: tabular-nums;
30
17
  }
31
18
 
32
- /* PRESSED — the state is never carried by hue alone (WCAG 1.4.1). Three independent encodings:
33
- * the chip's own fill/label invert (control.css), the pill inverts from a quiet near-invisible
34
- * chip to a solid one, and the forced-colors rule below. `aria-pressed` carries it
35
- * programmatically; nothing appends "(selected)" to the accessible name. */
36
19
  .ui-toggle[data-state="on"] {
37
20
  border-color: var(--toggle-pressed-border-color, hsl(var(--primary)));
38
21
  }
@@ -42,11 +25,6 @@
42
25
  color: var(--toggle-pressed-count-color, hsl(var(--primary)));
43
26
  }
44
27
 
45
- /* Forced colors flattens every background, so neither inversion distinguishes the states any
46
- * more. An outline on the pressed pill restores a structural difference at zero layout cost,
47
- * and the chip's border follows the system Highlight — the `default` variant's border is
48
- * `transparent` when unpressed, and forced-colors preserves transparency, so the two states
49
- * stay structurally different there too. */
50
28
  @media (forced-colors: active) {
51
29
  .ui-toggle[data-state="on"] {
52
30
  border-color: Highlight;
package/dist/theme/dxs.canonical.css CHANGED
@@ -1,77 +1,23 @@
1
- /* ───────────────────────────────────────────────────────────────────────────
2
- * THE CANONICAL DXS THEME — gh#214
3
- *
4
- * The one stylesheet a DXS surface imports INSTEAD of `@godxjp/ui/styles`. It
5
- * makes the canonical contract the DEFAULT for every surface in the app, so no
6
- * page ever needs local CSS for auth geometry, density, page insets, the brand
7
- * logo colour, the auth divider, or the legal footer.
8
- *
9
- * import "@godxjp/ui/theme/dxs.canonical.css"; // instead of @godxjp/ui/styles
10
- *
11
- * Prefer the RUNTIME route when the app already mounts the provider — it is the
12
- * same contract, switchable at runtime and persisted with the other axes:
13
- *
14
- * <AppProvider brand="dxs"> … </AppProvider> // writes <html data-brand="dxs">
15
- *
16
- * NOT A NEW BRAND. Every value below is canonical evidence already encoded in
17
- * this package — the shipped GodX Navy primary ramp, and the
18
- * `--auth-shell-canonical-*` measures declared in
19
- * `src/tokens/components/shell.css`. This file only re-points the generic knob
20
- * at the canonical one; it invents no colour and no geometry.
21
- *
22
- * SOURCE OF TRUTH: `src/tokens/axes.css` · `:root[data-brand="dxs"]`. This file
23
- * mirrors that block at `:root` for stylesheet-only apps (no provider). They are
24
- * asserted identical by `src/tokens/__tests__/dxs-canonical-theme.test.ts` — add
25
- * a knob to BOTH or to neither.
26
- *
27
- * OVERRIDING: declare your own root block AFTER this import; at equal
28
- * specificity the later declaration wins. Token overrides only — never component
29
- * CSS or Tailwind utilities in a theme file.
30
- * ─────────────────────────────────────────────────────────────────────────── */
1
+
31
2
 
32
3
  @import "@godxjp/ui/styles";
33
4
 
34
5
  :root {
35
- /* ── Brand palette — the shipped GodX Navy ramp (identical to the `brand`
36
- * axis preset). The emerald IDENTITY mark is deliberately NOT here:
37
- * `--logo-godx-color` / `--logo-wordmark-color` default to the `--brand`
38
- * IDENTITY role at their call sites and never read `--primary` (nor the
39
- * `--success` status green — gh#250), so a re-themed action colour can
40
- * never recolour the GoDX mark or wordmark. */
41
6
  --primary: 211 73% 15%;
42
7
  --primary-foreground: 0 0% 100%;
43
8
  --ring: 24 99% 46%;
44
9
  --accent: 24 99% 95%;
45
10
  --accent-foreground: 24 99% 28%;
46
11
 
47
- /* ── Canonical auth surface — 36px controls, 22.5rem card measure, 16px page
48
- * inset (15px below 30rem, see the media query below). This is what
49
- * `AuthShell variant="canonical"` applies per-instance, made the default
50
- * for every auth surface in the app. `variant="canonical"` still owns the
51
- * COMPACT CARD density (`[data-density="compact"]` is element-scoped and
52
- * cannot be reached from a token), so keep passing it for the full
53
- * canonical card rhythm. */
54
12
  --auth-shell-control-height: var(--auth-shell-canonical-control-height);
55
13
  --auth-shell-heading-size: var(--auth-shell-canonical-heading-size);
56
14
  --auth-shell-card-max-width: var(--auth-shell-canonical-card-max-width);
57
15
  --auth-shell-main-padding: var(--auth-shell-canonical-main-padding);
58
16
  }
59
17
 
60
- /* Canonical 15px mobile page inset. */
61
18
  @media (max-width: 30rem) {
62
19
  :root {
63
20
  --auth-shell-main-padding: var(--auth-shell-canonical-main-padding-mobile);
64
21
  }
65
22
  }
66
23
 
67
- /* ── TODO (no canonical in-repo source yet — do NOT guess) ───────────────────
68
- * · AppShell rail width / collapsed rail width / responsive breakpoint are
69
- * still CSS literals, not tokens (gh#213), so there is nothing for a theme to
70
- * bind. Add the bindings here once `--app-shell-sidebar-width` /
71
- * `--app-shell-rail-width` / the breakpoint knob ship.
72
- * · Standalone `.ui-topbar` height/gap/inset knobs do not exist yet (gh#213).
73
- * · A real DXS wordmark ASSET (logotype artwork) has not been supplied by
74
- * design. `<Logo wordmark="GoDX" />` typesets the name in the design-system
75
- * display face via `--logo-wordmark-font-family`; swap in the real logotype
76
- * (an inline `<svg>` passed as `wordmark`) when it exists.
77
- * ─────────────────────────────────────────────────────────────────────────── */
package/dist/theme/example.service.css CHANGED
@@ -1,32 +1,7 @@
1
- /* Service theme — the ONLY file apps may use to customize design tokens.
2
- * Copy to: apps/<your-app>/src/theme.css
3
- * Import this file once in main.tsx (instead of @godxjp/ui/styles directly). */
1
+
4
2
 
5
3
  @import "@godxjp/ui/styles";
6
4
 
7
- /* Override tokens below. Do NOT add component styles or Tailwind utilities here. */
8
5
  :root {
9
- /* Brand — pair primary with a focus ring and tinted accent: */
10
- /* --primary: 211 73% 15%; */
11
- /* --primary-foreground: 0 0% 100%; */
12
- /* --ring: 24 99% 46%; */
13
- /* --accent: 24 99% 95%; */
14
- /* --accent-foreground: 24 99% 28%; */
15
-
16
- /* Semantic status (optional — defaults in base.css): */
17
- /* --success: 146 40% 58%; */
18
- /* --warning: 44 100% 49%; */
19
- /* --info: 223 42% 50%; */
20
- /* --attention: 24 99% 46%; */
21
-
22
- /* Layout density (optional): */
23
- /* --space-page-x: var(--space-8); */
24
6
 
25
- /* Primitive component tokens — override tokens only, no selector CSS: */
26
- /* --card-space-inset: var(--space-section-active); */
27
- /* --card-space-header-y: var(--space-stack-sm); */
28
- /* --card-space-body-y: var(--space-section-active); */
29
- /* --card-space-footer-y: var(--space-stack-sm); */
30
- /* --card-title-font-size: var(--font-size-base); */
31
- /* --card-header-background-alpha: 0.55; */
32
7
  }
package/dist/theme/famgia.service.css CHANGED
@@ -1,37 +1,27 @@
1
- /* ───────────────────────────────────────────────────────────────
2
- * Famgia service theme — ファムジア株式会社
3
- * Re-themes @godxjp/ui via SEMANTIC TOKENS only (no component CSS).
4
- * Brand: electric blue #2563EB (primary) + violet #7C3AED (accent gradient).
5
- * Import this instead of "@godxjp/ui/styles".
6
- * ─────────────────────────────────────────────────────────────── */
1
+
7
2
 
8
3
  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap");
9
4
  @import "@godxjp/ui/styles";
10
5
 
11
- /* ── Light (default) ── */
12
6
  :root {
13
- /* Brand primary ramp — electric blue */
14
- --primary: 221 83% 53%; /* #2563EB */
7
+
8
+ --primary: 221 83% 53%;
15
9
  --primary-foreground: 0 0% 100%;
16
- --primary-hover: 224 71% 48%; /* #1D4ED8 */
17
- --primary-active: 226 71% 40%; /* #1E40AF */
10
+ --primary-hover: 224 71% 48%;
11
+ --primary-active: 226 71% 40%;
18
12
  --ring: 221 83% 53%;
19
13
 
20
- /* Brand-colored text (AA on tint/white) */
21
14
  --text-link: 224 76% 45%;
22
15
  --text-brand: 221 83% 53%;
23
16
  --text-primary: 224 76% 42%;
24
17
 
25
- /* Signature brand gradient: blue → violet */
26
18
  --gradient-brand: linear-gradient(135deg, hsl(221 83% 53%), hsl(262 83% 58%));
27
19
 
28
- /* Typography — Inter (Latin/VI) + Noto Sans JP (kana/kanji) */
29
20
  --font-family-sans:
30
21
  "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
31
22
  "Helvetica Neue", Arial, sans-serif;
32
23
  }
33
24
 
34
- /* ── Dark ── lifted blue for contrast */
35
25
  .dark {
36
26
  --primary: 221 90% 66%;
37
27
  --primary-foreground: 222 47% 11%;
package/dist/tokens/axes.css CHANGED
@@ -1,27 +1,12 @@
1
- /* THEME AXES — global consumer API. AppProvider's theme/brand/density/fontSize
2
- * props write `data-*` attributes onto <html>; the selectors here bind each axis
3
- * to tokens (Rule #21 "every component honours every theme axis"). Density lives
4
- * in density.css (shared with the .ui-density-* classes); the dark theme aliases
5
- * in foundation.css. Every axis is a NO-OP at its default value, so apps that set
6
- * nothing — or override tokens in their own theme.css — are unaffected.
7
- *
8
- * `:root[data-…]` (specificity 0,2,0) intentionally outranks an app theme.css
9
- * `:root` (0,1,0): when an axis IS set it wins; when it is NOT set the app token
10
- * override wins. brand is therefore fully opt-in (no default rule). */
11
1
 
12
- /* ── font-size axis — base-driven: a preset sets ONLY --font-size-base and the
13
- * whole golden modular scale (foundation.css) rescales from it. The `default`
14
- * value emits no rule → foundation 14px stands. */
2
+
15
3
  :root[data-font-size="sm"] {
16
- --font-size-base: 0.8125rem; /* 13px */
4
+ --font-size-base: 0.8125rem;
17
5
  }
18
6
  :root[data-font-size="lg"] {
19
- --font-size-base: 1rem; /* 16px */
7
+ --font-size-base: 1rem;
20
8
  }
21
9
 
22
- /* ── brand axis — primary-palette presets (canonical values; src/test/theme-globals.ts
23
- * mirrors these for the Storybook toolbar). OPT-IN: no `default` rule, so an app
24
- * that pins --primary in its own theme.css keeps it unless it sets data-brand. */
25
10
  :root[data-brand="brand"] {
26
11
  --primary: 211 73% 15%;
27
12
  --primary-foreground: 0 0% 100%;
@@ -58,25 +43,6 @@
58
43
  --accent-foreground: 215 25% 20%;
59
44
  }
60
45
 
61
- /* ── THE CANONICAL DXS PRESET (gh#214) ──────────────────────────────────────
62
- * `dxs` is the one brand value that is NOT just a primary tint: it binds the
63
- * canonical DXS SURFACE CONTRACT that every hosted-identity screen shares, so a
64
- * service selects it once (`<AppProvider brand="dxs">`, or import
65
- * `@godxjp/ui/theme/dxs.canonical.css`) and needs ZERO page CSS for auth
66
- * geometry, density, insets, logo colour, divider or footer.
67
- *
68
- * SINGLE SOURCE OF TRUTH — every value below is already canonical evidence in
69
- * this package: the palette is the shipped GodX Navy ramp (identical to
70
- * `data-brand="brand"`), and the auth knobs simply re-point the generic
71
- * AuthShell tokens at the `--auth-shell-canonical-*` values declared in
72
- * `tokens/components/shell.css`. Nothing here is a new brand colour.
73
- * `src/theme/dxs.canonical.css` mirrors this block for stylesheet-only apps;
74
- * `src/tokens/__tests__/dxs-canonical-theme.test.ts` fails if the two drift.
75
- *
76
- * The GoDX identity mark needs no binding: `--logo-godx-color` /
77
- * `--logo-wordmark-color` already default to the `--brand` IDENTITY role (the
78
- * canonical emerald) at their call sites, and never reference `--primary` — nor
79
- * the `--success` status green they wrongly borrowed before gh#250. */
80
46
  :root[data-brand="dxs"] {
81
47
  --primary: 211 73% 15%;
82
48
  --primary-foreground: 0 0% 100%;
@@ -84,9 +50,6 @@
84
50
  --accent: 24 99% 95%;
85
51
  --accent-foreground: 24 99% 28%;
86
52
 
87
- /* Canonical auth surface — 36px controls, 22.5rem card measure, 16px page
88
- * inset (15px below 30rem, see the media query). Matches AuthShell
89
- * `variant="canonical"`, which still owns the compact CARD density knob. */
90
53
  --auth-shell-control-height: var(--auth-shell-canonical-control-height);
91
54
  --auth-shell-heading-size: var(--auth-shell-canonical-heading-size);
92
55
  --auth-shell-card-max-width: var(--auth-shell-canonical-card-max-width);
package/dist/tokens/base.css CHANGED
@@ -1,7 +1,4 @@
1
- /* @godxjp/ui — token manifest.
2
- * Services MUST NOT edit package token files directly.
3
- * App-specific overrides live in app theme.css after importing @godxjp/ui/styles.
4
- */
1
+
5
2
 
6
3
  @import "./foundation.css";
7
4
  @import "./semantic/layout.css";
package/dist/tokens/components/activity.css CHANGED
@@ -1,64 +1,28 @@
1
- /*
2
- * ACTIVITY — the ambient/looping motion primitive (gh#313).
3
- *
4
- * The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while
5
- * something is happening elsewhere (someone typing, a sync in flight, a response streaming, a
6
- * recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme
7
- * retunes the whole ambient feel in one place instead of forking a `@keyframes`.
8
- *
9
- * TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and
10
- * `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow`
11
- * and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next
12
- * to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name
13
- * shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour
14
- * and alpha — everything the shape rule DOES cover — live here.
15
- *
16
- * Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel.
17
- */
1
+
18
2
 
19
3
  :root {
20
- /* Mark geometry. `em`-based so the whole mark tracks `--activity-font-size-*` (and therefore
21
- * `--font-size-base` and the density axis) instead of pinning a px diameter per size step. */
4
+
22
5
  --activity-mark-size: 0.25em;
23
- /* Travel of one `dots` step — the loop counterpart to `--reveal-distance`, named to match.
24
- * It is ALSO the height the mark row reserves, so the indicator appearing under a composer
25
- * never shifts the row. */
6
+
26
7
  --activity-mark-offset: 0.25em;
27
- /* Resting opacity of a dot at the bottom of its cycle. Never 0: a dot that vanishes reads as a
28
- * rendering bug at the trough, and the reduced-motion resting state must stay fully legible. */
8
+
29
9
  --activity-mark-rest-alpha: 0.35;
30
- /* The single `pulse` mark — a breathing dot (live / recording), bigger than one `dots` dot
31
- * because it carries the whole affordance alone. */
10
+
32
11
  --activity-pulse-mark-size: 0.5em;
33
12
 
34
- /* Mark-to-mark and mark-to-label gap. */
35
13
  --activity-gap: var(--space-1);
36
14
 
37
- /* Root size ladder — the mark is `em`-based, so this ONE value scales the whole indicator.
38
- * Steps mirror the `Text` size the label is rendered at, so mark and label stay optically
39
- * paired (`--font-size-sm` IS `--font-size-base`; the ladder skips the alias). */
40
15
  --activity-font-size-xs: var(--font-size-2xs);
41
16
  --activity-font-size-sm: var(--font-size-xs);
42
17
  --activity-font-size-md: var(--font-size-sm);
43
18
  --activity-font-size-lg: var(--font-size-lg);
44
19
 
45
- /* Indeterminate `bar` (syncing). Width is an inline measure, not a fill: the bar sits beside a
46
- * label in a row, so `100%` would eat the label's space. */
47
20
  --activity-bar-width: 4rem;
48
21
  --activity-bar-radius: var(--radius-pill);
49
22
  --activity-bar-segment-width: 40%;
50
23
  --activity-bar-track-alpha: 0.2;
51
- /* Bar THICKNESS, declared last in the group because it carries the axis exemption below.
52
- * Drawn at TEXT scale, not band scale: the bar sits inline beside its label, so it tracks the
53
- * type it accompanies instead of a fixed step (gh#324). */
54
- /* scale-exempt: an em thickness that must track the label beside it, not a fixed band step */
24
+
55
25
  --activity-bar-height: 0.25em;
56
26
 
57
- /* Mark colour. ROLE-MIRROR KNOB ⇒ declared `initial` here with the role default at the CALL SITE
58
- * (`hsl(var(--activity-color, var(--muted-foreground)))` in styles/motion.css). Written as
59
- * `--activity-color: var(--muted-foreground)` it would freeze at the `:root` role value and a
60
- * scoped `[data-tenant]` / `.dark` override of `--muted-foreground` would never reach it.
61
- * @see docs/TOKENS.md · "Role-mirror knobs MUST be `initial`".
62
- * Documented default: --activity-color = var(--muted-foreground) (tone="muted"). */
63
27
  --activity-color: initial;
64
28
  }
package/dist/tokens/components/badge.css CHANGED
@@ -1,22 +1,21 @@
1
- /* Badge component tokens. */
1
+
2
2
 
3
3
  :root {
4
4
  --badge-space-gap: var(--space-inline-xs);
5
5
  --badge-space-x: var(--space-2);
6
6
  --badge-space-y: var(--space-1);
7
- /* Small-by-design (badge/pill/counter). A knob (rule #45) so a service can
8
- * re-tune badge text without touching the global --font-size-xs step. */
7
+
9
8
  --badge-font-size: var(--font-size-xs);
10
- /* Companion to --badge-font-size (gh#260). The cva's old `text-xs` utility also set
11
- * line-height via Tailwind's default `--text-xs--line-height: calc(1 / 0.75)` (the theme
12
- * remaps --text-xs but never that companion). Same unitless ratio here keeps the default
13
- * badge pixel-identical now that badge-layout.css owns the type metrics. */
9
+
14
10
  --badge-line-height: calc(1 / 0.75);
15
- /* Leading/trailing glyph inside the pill. It was a bare `0.75rem` in badge-layout.css with no
16
- * token at all, so a service could only resize it with `!important` or a forked stylesheet —
17
- * the two routes the icon axis's tier 2 exists to abolish (gh#326). Same step, so nothing
18
- * moves. Matches --badge-font-size's step by design: the glyph reads as a character in the
19
- * label's run, so the two retune together. Deliberately NOT --scaling-multiplied — the literal
20
- * it replaces did not track density. */
11
+
21
12
  --badge-icon-size: var(--icon-size-xs);
13
+
14
+ --badge-tint-fill: 18%;
15
+ --badge-tint-edge: 45%;
16
+
17
+ --badge-tint-surface: hsl(var(--card));
18
+ --badge-tint-foreground: hsl(var(--card-foreground));
19
+
20
+ --badge-color: var(--badge-tint-surface);
22
21
  }
package/dist/tokens/components/banner.css CHANGED
@@ -1,16 +1,11 @@
1
- /* Banner — the full-bleed attention strip (<Banner> = Alert variant="banner").
2
- * Colour stays with the alert tone rules; these tokens own ONLY the strip geometry,
3
- * so a service retunes the banner once here instead of forking alert-layout.css
4
- * (rule #45 — every service-tunable constant gets a knob). */
1
+
5
2
 
6
3
  :root {
7
- /* Square corners — a strip spans its container edge-to-edge, so it carries no radius. */
4
+
8
5
  --banner-radius: 0;
9
- /* The strip keeps a single hairline block-end rule (tone-coloured via the alert
10
- * border rules); inline/block-start edges are open so it reads as part of the frame. */
6
+
11
7
  --banner-border-width: 1px;
12
- /* Strip inset. Block is denser than the inline Alert card; inline defaults to the
13
- * page gutter so banner text aligns with page content under AppShell/PageContainer. */
8
+
14
9
  --banner-space-inset-block: var(--space-3);
15
10
  --banner-space-inset-inline: var(--space-page-active-x, var(--space-6));
16
11
  }
package/dist/tokens/components/card.css CHANGED
@@ -1,89 +1,48 @@
1
- /* Card component tokens: card chrome derives from semantic layout tokens. */
1
+
2
2
 
3
3
  :root {
4
- /* Horizontal inset of every slot (header / content / footer) + the resting top/bottom
5
- * shell padding. This is the column the title, body and footer all align to. */
4
+
6
5
  --card-space-inset: var(--space-section-active);
7
- /* BLOCK-axis (top/bottom) shell padding of the slotted card rhythm — a plain header's top, a
8
- * `solo` body's top, and the terminal slot's bottom (gh#232). Split off --card-space-inset so a
9
- * shell (AuthShell compact) can retune the card's height WITHOUT moving the inline column.
10
- * Declared `initial` — NOT `var(--card-space-inset)` — so the default resolves at the CALL SITE:
11
- * a :root binding would freeze at the :root inset and `[data-density="tight"|"cozy"]` (which
12
- * override --card-space-inset on the card element) would stop reaching it. See docs/TOKENS.md ·
13
- * "Role-mirror knobs MUST be `initial`" — the same call-site rule applies to derived knobs. */
14
- --card-space-shell-y: initial; /* default = var(--card-space-inset) */
15
- /* Vertical padding of a BANDED header band (top = bottom). Drives --card-space-divided-y. */
6
+
7
+ --card-space-shell-y: initial;
8
+
16
9
  --card-space-header-y: var(--space-stack-sm);
17
- /* Gap between the header and the body, and the body's own top padding — the breathing
18
- * room under a title before content begins. */
10
+
19
11
  --card-space-body-y: var(--space-section-active);
20
- /* Symmetric block padding for a SOLO content slot, so a composed shell can tune block and
21
- * inline spacing independently without targeting CardContent.
22
- * Declared `initial` for the SAME reason as --card-space-shell-y above: written as
23
- * `var(--card-space-inset)` here it would freeze at the :root inset, and a card carrying
24
- * [data-density="tight"|"cozy"] (which override --card-space-inset ON THE CARD) would keep the
25
- * :root value. The default now resolves at the call site through the chain
26
- * solo-y → shell-y → inset, so a solo body follows the general block knob when only that is
27
- * set, and an explicit solo-y still wins. */
28
- --card-space-solo-y: initial; /* default = var(--card-space-shell-y, var(--card-space-inset)) */
29
- /* Vertical padding of a SEPARATED footer band (top = bottom). Drives --card-space-divided-y. */
12
+
13
+ --card-space-solo-y: initial;
14
+
30
15
  --card-space-footer-y: var(--space-stack-sm);
31
- /* DIVIDED-section vertical padding (rule #44/#45). A header/footer that carries a divider
32
- * border (banded header, separated footer) reads as its own band, so it pads SYMMETRICALLY
33
- * top+bottom — distinct from a plain header that flows into the body (top inset, no bottom).
34
- * One themeable knob keeps the header- and footer-band rhythm in sync; a service theme tunes
35
- * the band density here instead of forking per-slot CSS. */
16
+
36
17
  --card-space-divided-y: var(--card-space-header-y);
37
- /* Vertical gap between stacked items WITHIN a slot (e.g. title ↕ description in the header). */
18
+
38
19
  --card-space-gap: var(--space-stack-xs);
39
20
  --card-title-font-size: var(--font-size-base);
40
21
  --card-title-line-height: var(--line-height-tight);
41
22
  --card-title-font-weight: var(--font-weight-semibold);
42
23
  --card-description-font-size: var(--font-size-sm);
43
24
  --card-description-line-height: var(--line-height-normal);
44
- /* Card fill + edge — opt-in knobs that DEFAULT to the live --card / --border roles. Declared
45
- * `initial` (not `var(--card)`) so the default re-resolves at the call site under a scoped theme:
46
- * a :root binding to a role var freezes at the :root value and a scoped `[data-tenant]` override of
47
- * the role never reaches it (see docs/STANDARDS-vocabulary-tokens.md · "role-mirror knobs"). A
48
- * service still overrides the knob directly (--card-background: …) to win over the role default. */
49
- --card-background: initial; /* default = hsl(var(--card)) */
50
- --card-border: initial; /* default = hsl(var(--border)) */
51
- /* Banded-header fill — role-tintable (rule #45): a service points this at any role,
52
- * e.g. --card-header-background: var(--primary), and tunes --card-header-background-alpha for
53
- * the wash strength. Default = the live --muted role (resolved at the call site). */
54
- --card-header-background: initial; /* default = hsl(var(--muted)) */
25
+
26
+ --card-background: initial;
27
+ --card-border: initial;
28
+
29
+ --card-header-background: initial;
55
30
  --card-header-background-alpha: 0.55;
56
- /* Banded-header divider — tokenised (rule #44) so a service theme can make it
57
- * dashed / heavier / none without forking CSS. Pair with
58
- * --card-header-background-alpha: 0 for a quiet borderless-band header.
59
- * Default = 1px solid hsl(var(--card-border)) (resolved at the call site). */
31
+
60
32
  --card-header-border-bottom: initial;
61
33
  --card-radius: var(--radius-xl);
62
- /* The DXS hi-fi baseline uses a quiet 10px data surface with one shadow-sm
63
- * elevation layer. Consumers can still flatten or lift cards through this knob. */
34
+
64
35
  --card-shadow: var(--shadow-sm);
65
- /* Brand glow layer — invisible no-op at rest (rule #44). Paired AFTER --card-shadow in the
66
- * surface box-shadow so a service can wash every card with the global glow, e.g.
67
- * --card-glow: var(--shadow-glow), with no markup change. */
36
+
68
37
  --card-glow: 0 0 0 0 transparent;
69
- /* Fill tint — subtle role wash over the card background (default transparent = invisible).
70
- * Painted as an overlay so a service sets --card-tint: hsl(var(--primary) / 0.04) once. */
38
+
71
39
  --card-tint: transparent;
72
- /* Accent edge — width of the semantic leading-edge stripe (data-accent).
73
- * Tokenised (rule #44) so a service theme can re-tune it without forking CSS.
74
- * The slot padding compensation in card-layout.css subtracts the same token,
75
- * so content stays aligned on the shell whatever the rail width. */
40
+
76
41
  --card-accent-rail-width: var(--stroke-2xl);
77
- /* Accent placement `perimeter` (gh#12) — the FULL attention border. Two knobs so a service can
78
- * tune the edge weight and the outer ring independently; the defaults reproduce the optical
79
- * weight of `variant="featured"` (1px border + 1px ring) in the card's own semantic accent tone
80
- * instead of --primary. Structural 1px literals, like the base card hairline. */
42
+
81
43
  --card-accent-perimeter-width: var(--stroke-hairline);
82
44
  --card-accent-perimeter-ring-width: var(--stroke-hairline);
83
- /* `variant="featured"` edge — role-mirror knob (docs/TOKENS.md). `initial` so the --primary
84
- * default resolves at the CALL SITE and a scoped [data-tenant]/.dark override of --primary
85
- * reaches it; a service points it anywhere (e.g. var(--attention)) to retint every featured card
86
- * at once. Default = hsl(var(--primary)). */
45
+
87
46
  --card-featured-border-color: initial;
88
47
  --card-featured-ring-width: var(--stroke-hairline);
89
48
  --stat-card-label-font-size: var(--font-size-xs);
@@ -97,46 +56,31 @@
97
56
  --stat-card-icon-size: var(--icon-size-2xl);
98
57
  --stat-card-icon-glyph-size: var(--icon-size-lg);
99
58
  --stat-card-icon-radius: var(--radius-md);
100
- /* Medallion tint — soft brand wash + brand glyph by default; a service retints by overriding
101
- * --primary or these tokens directly (rule #44/#45). `initial` so the --primary default
102
- * re-resolves at the call site under a scoped theme (no :root freeze).
103
- * Defaults = hsl(var(--primary) / 0.1) fill · hsl(var(--primary)) glyph. */
59
+
104
60
  --stat-card-icon-background: initial;
105
61
  --stat-card-icon-foreground: initial;
106
62
  --stat-card-delta-font-size: var(--font-size-xs);
107
- /* ── ServiceLauncherCard (gh#219) ───────────────────────────────────────────────────
108
- * Internal rhythm of a launcher tile: one gap knob drives the vertical stack AND the
109
- * icon↔title↔status row, so a service theme retunes the whole tile density once. */
63
+
110
64
  --card-service-launcher-space-gap: var(--space-stack-sm);
111
- /* Semantic icon surface — 36px, the `--icon-size-2xl` step, multiplied by --scaling so the
112
- * medallion still breathes with its sibling controls (the gh#328 rule: an icon that wants
113
- * density says so itself). It read `var(--control-height-lg)` until gh#324: a CONTROL tier is
114
- * the wrong axis for an icon box, and the bug was visible — `@media (pointer: coarse)` lifts
115
- * the control ladder to the 44px tap floor, so on every touch device the medallion silently
116
- * inflated to 48px while the glyph inside it stayed 20px. */
65
+
117
66
  --card-service-launcher-icon-size: calc(var(--icon-size-2xl) * var(--scaling));
118
67
  --card-service-launcher-icon-glyph-size: calc(var(--icon-size-lg) * var(--scaling));
119
68
  --card-service-launcher-icon-radius: var(--radius-md);
120
- /* Available-service medallion tint. `initial` (role-mirror rule, docs/TOKENS.md) so the role
121
- * defaults resolve at the CALL SITE and a scoped [data-tenant]/.dark override reaches them.
122
- * Defaults = hsl(var(--accent)) fill · hsl(var(--primary)) glyph. */
69
+
123
70
  --card-service-launcher-icon-background: initial;
124
71
  --card-service-launcher-icon-foreground: initial;
125
- /* Unavailable medallion tint — applied when the consumer supplies `disabledReason`, so an
126
- * un-launchable service never reads as brand-live. `initial` for the same role-mirror reason.
127
- * Defaults = hsl(var(--muted)) fill · hsl(var(--muted-foreground)) glyph. */
72
+
128
73
  --card-service-launcher-unavailable-icon-background: initial;
129
74
  --card-service-launcher-unavailable-icon-foreground: initial;
130
- /* Description prose — also drives the disabled-reason line and the catalog-CTA caption. */
75
+
131
76
  --card-service-launcher-description-font-size: var(--font-size-xs);
132
77
  --card-service-launcher-description-line-height: var(--line-height-body);
133
- /* Mono metadata line (hostname · plan) — tighter leading than prose by design. */
78
+
134
79
  --card-service-launcher-metadata-font-size: var(--font-size-xs);
135
80
  --card-service-launcher-metadata-line-height: var(--line-height-normal);
136
- /* Dashed catalog/add companion tile: kept tall enough to sit level with a populated launcher
137
- * tile in the same grid row. Four control tiers ≈ medallion + title + description + action. */
81
+
138
82
  --card-service-launcher-cta-min-height: calc(var(--control-height-lg) * 4);
139
- /* Skeleton bar widths — shape-matched placeholders for the title and status badge. */
83
+
140
84
  --card-service-launcher-skeleton-title-width: var(--space-12);
141
85
  --card-service-launcher-skeleton-status-width: var(--space-10);
142
86
  }
package/dist/tokens/components/chart.css CHANGED
@@ -1,47 +1,30 @@
1
- /* Chart component tokens — the dependency-free `CompactBarTrend` primitive
2
- * (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a
3
- * service theme can match its own design grid WITHOUT page-local CSS or inline heights
4
- * (cardinal rules #44/#45). The recharts-backed charts draw their own SVG and only use the
5
- * foundation `--chart-1..6` palette. */
1
+
6
2
 
7
3
  :root {
8
- /* ── Plot height tiers (size = xs|sm|md|lg) ───────────────────────────────────────────
9
- * `xs` is the canonical dashboard-summary-card density: a seven-day trend that sits under
10
- * a KPI headline without stealing its vertical rhythm. A service retunes the whole scale
11
- * here; a screen picks a step with the `size` prop. */
4
+
12
5
  --chart-trend-plot-height-xs: 3.5rem;
13
6
  --chart-trend-plot-height-sm: 5rem;
14
7
  --chart-trend-plot-height-md: 7.5rem;
15
8
  --chart-trend-plot-height-lg: 10rem;
16
- /* Active tier — chart-layout.css re-points this per `data-size`; overriding it directly
17
- * pins one height for every trend regardless of `size`. */
9
+
18
10
  --chart-trend-plot-height: var(--chart-trend-plot-height-xs);
19
11
 
20
- /* ── Bar marks ────────────────────────────────────────────────────────────────────────
21
- * Thin marks, a surface gap between neighbours and a rounded data-end anchored to the
22
- * baseline (the data-visualization mark spec). */
23
12
  --chart-trend-bar-gap: var(--space-2);
24
13
  --chart-trend-bar-radius: var(--radius-sm);
25
- /* Ceiling on a single mark so a 3-point trend does not render slabs. */
14
+
26
15
  --chart-trend-bar-max-width: 1.5rem;
27
- /* Floor so a zero/absent value still reads as a plotted category rather than a hole. */
16
+
28
17
  --chart-trend-bar-min-height: var(--stroke-md);
29
- /* Muted mark fill — role-mirror knob, declared `initial` so the role default re-resolves
30
- * at the CALL SITE under `.dark` / `[data-tenant]` (docs/TOKENS.md · "Role-mirror knobs
31
- * MUST be `initial`"). Default = hsl(var(--muted-foreground) / 0.75), which clears the
32
- * 3:1 non-text contrast floor (WCAG 1.4.11) against the card surface. */
18
+
33
19
  --chart-trend-bar-background: initial;
34
- /* Opacity applied to the muted-fill role default. */
20
+
35
21
  --chart-trend-bar-background-alpha: 0.75;
36
- /* Emphasized ("current") mark fill — role-mirror knob. Default = hsl(var(--primary)). */
22
+
37
23
  --chart-trend-bar-emphasis-background: initial;
38
24
 
39
- /* ── Baseline + category ticks ────────────────────────────────────────────────────────
40
- * Chrome defaults QUIET (rule #44): no baseline rule at rest. A service opts in with
41
- * `--chart-trend-baseline-border: 1px solid hsl(var(--border));`. */
42
25
  --chart-trend-baseline-border: initial;
43
26
  --chart-trend-tick-gap: var(--space-1);
44
27
  --chart-trend-tick-font-size: var(--font-size-xs);
45
- /* Gap between the plot block and the optional activity footer slot. */
28
+
46
29
  --chart-trend-footer-gap: var(--space-2);
47
30
  }