@godxjp/ui 19.0.0 → 19.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 (445) hide show
  1. package/README.md +25 -128
  2. package/dist/app/app-provider.d.ts +1 -1
  3. package/dist/app/app-provider.js +3 -0
  4. package/dist/app/theme-axes.d.ts +4 -15
  5. package/dist/app/timezones.d.ts +1 -4
  6. package/dist/components/charts/area-chart.d.ts +2 -3
  7. package/dist/components/charts/bar-chart.d.ts +2 -3
  8. package/dist/components/charts/chart-frame.d.ts +7 -16
  9. package/dist/components/charts/chart-summary.d.ts +2 -2
  10. package/dist/components/charts/compact-bar-trend.d.ts +9 -24
  11. package/dist/components/charts/index.d.ts +1 -6
  12. package/dist/components/data-display/badge.d.ts +2 -12
  13. package/dist/components/data-display/card.d.ts +21 -41
  14. package/dist/components/data-display/carousel.d.ts +1 -2
  15. package/dist/components/data-display/code-block.d.ts +4 -0
  16. package/dist/components/data-display/code-block.js +24 -0
  17. package/dist/components/data-display/data-table.d.ts +15 -37
  18. package/dist/components/data-display/data-table.js +1 -3
  19. package/dist/components/data-display/descriptions.d.ts +2 -6
  20. package/dist/components/data-display/descriptions.js +0 -2
  21. package/dist/components/data-display/index.d.ts +4 -0
  22. package/dist/components/data-display/index.js +4 -0
  23. package/dist/components/data-display/list-row.d.ts +3 -22
  24. package/dist/components/data-display/permission-matrix.d.ts +7 -20
  25. package/dist/components/data-display/progress.d.ts +1 -1
  26. package/dist/components/data-display/prose.d.ts +4 -0
  27. package/dist/components/data-display/prose.js +20 -0
  28. package/dist/components/data-display/service-launcher-card.d.ts +3 -10
  29. package/dist/components/data-display/table.d.ts +20 -80
  30. package/dist/components/data-display/table.js +0 -3
  31. package/dist/components/data-display/timeline.d.ts +3 -5
  32. package/dist/components/data-entry/branch-scope-picker.d.ts +2 -19
  33. package/dist/components/data-entry/branch-scope-picker.js +0 -1
  34. package/dist/components/data-entry/calendar.d.ts +3 -2
  35. package/dist/components/data-entry/calendar.js +58 -3
  36. package/dist/components/data-entry/cascader.js +3 -1
  37. package/dist/components/data-entry/checkbox-group.js +12 -5
  38. package/dist/components/data-entry/checkbox.js +30 -21
  39. package/dist/components/data-entry/command-palette.d.ts +8 -22
  40. package/dist/components/data-entry/date-picker.d.ts +4 -5
  41. package/dist/components/data-entry/date-picker.js +12 -3
  42. package/dist/components/data-entry/date-range-picker.d.ts +1 -1
  43. package/dist/components/data-entry/date-range-picker.js +17 -6
  44. package/dist/components/data-entry/form-errors.d.ts +7 -18
  45. package/dist/components/data-entry/form-field.d.ts +1 -1
  46. package/dist/components/data-entry/form-field.js +15 -6
  47. package/dist/components/data-entry/form.d.ts +1 -9
  48. package/dist/components/data-entry/input.d.ts +16 -14
  49. package/dist/components/data-entry/input.js +13 -3
  50. package/dist/components/data-entry/month-picker.js +6 -4
  51. package/dist/components/data-entry/month-range-picker.d.ts +4 -6
  52. package/dist/components/data-entry/month-range-picker.js +11 -5
  53. package/dist/components/data-entry/number-input.d.ts +1 -5
  54. package/dist/components/data-entry/number-input.js +1 -0
  55. package/dist/components/data-entry/radio.js +19 -6
  56. package/dist/components/data-entry/search-select.d.ts +3 -5
  57. package/dist/components/data-entry/search-select.js +8 -2
  58. package/dist/components/data-entry/select.d.ts +15 -2
  59. package/dist/components/data-entry/select.js +57 -10
  60. package/dist/components/data-entry/switch.js +9 -2
  61. package/dist/components/data-entry/textarea.d.ts +10 -16
  62. package/dist/components/data-entry/textarea.js +8 -1
  63. package/dist/components/data-entry/time-picker.d.ts +3 -5
  64. package/dist/components/data-entry/tree-select.js +3 -1
  65. package/dist/components/data-entry/upload-types.d.ts +1 -5
  66. package/dist/components/data-entry/use-upload-draft.d.ts +0 -4
  67. package/dist/components/feedback/dialog.d.ts +6 -15
  68. package/dist/components/feedback/overlay-header-tone.d.ts +1 -1
  69. package/dist/components/feedback/sheet.d.ts +3 -10
  70. package/dist/components/feedback/sheet.js +1 -1
  71. package/dist/components/feedback/sonner.js +2 -3
  72. package/dist/components/general/activity.d.ts +4 -30
  73. package/dist/components/general/button.js +1 -10
  74. package/dist/components/general/logo.d.ts +6 -28
  75. package/dist/components/general/reveal.d.ts +3 -9
  76. package/dist/components/general/typography.d.ts +1 -3
  77. package/dist/components/layout/account-chip.d.ts +8 -0
  78. package/dist/components/layout/account-chip.js +45 -0
  79. package/dist/components/layout/auth-divider.d.ts +2 -9
  80. package/dist/components/layout/auth-shell.d.ts +1 -14
  81. package/dist/components/layout/breadcrumb.d.ts +1 -5
  82. package/dist/components/layout/centered-shell.d.ts +4 -18
  83. package/dist/components/layout/error-surface.d.ts +11 -28
  84. package/dist/components/layout/error-surface.js +4 -1
  85. package/dist/components/layout/index.d.ts +2 -0
  86. package/dist/components/layout/index.js +2 -0
  87. package/dist/components/layout/legal-document-shell.d.ts +5 -28
  88. package/dist/components/layout/master-detail.d.ts +2 -18
  89. package/dist/components/layout/page-container.js +0 -1
  90. package/dist/components/layout/responsive-grid.d.ts +6 -1
  91. package/dist/components/layout/responsive-grid.js +9 -2
  92. package/dist/components/layout/service-role-panel.d.ts +7 -19
  93. package/dist/components/layout/sidebar.d.ts +5 -27
  94. package/dist/components/layout/sidebar.js +0 -1
  95. package/dist/components/layout/split-pane.d.ts +0 -7
  96. package/dist/components/layout/topbar.d.ts +1 -14
  97. package/dist/components/navigation/app-setting-picker.js +1 -3
  98. package/dist/components/navigation/filter-bar.d.ts +1 -6
  99. package/dist/components/navigation/pagination-utils.d.ts +2 -12
  100. package/dist/components/navigation/tabs-scroll.d.ts +2 -36
  101. package/dist/components/navigation/tabs.js +4 -8
  102. package/dist/components/query/data-state.d.ts +2 -2
  103. package/dist/components/ui/credential-reveal.d.ts +1 -4
  104. package/dist/components/ui/hover-card.d.ts +1 -2
  105. package/dist/components/ui/separator.d.ts +2 -15
  106. package/dist/components/ui/toggle-group.d.ts +1 -5
  107. package/dist/components/ui/toggle.d.ts +6 -31
  108. package/dist/email/brand-mark.d.ts +6 -34
  109. package/dist/email/color.d.ts +7 -17
  110. package/dist/email/geometry.d.ts +4 -8
  111. package/dist/email/index.d.ts +4 -48
  112. package/dist/email/inline-style.d.ts +3 -9
  113. package/dist/email/urgency.d.ts +2 -7
  114. package/dist/form/form-context.d.ts +2 -5
  115. package/dist/form/form-root.d.ts +1 -2
  116. package/dist/i18n/messages/en.json +4 -0
  117. package/dist/i18n/messages/ja.json +4 -0
  118. package/dist/i18n/messages/vi.json +4 -0
  119. package/dist/inertia/index.d.ts +2 -10
  120. package/dist/lib/control-styles.d.ts +10 -21
  121. package/dist/lib/control-styles.js +4 -6
  122. package/dist/lib/datetime/format-date.d.ts +1 -4
  123. package/dist/lib/field-a11y.d.ts +31 -36
  124. package/dist/lib/field-a11y.js +16 -2
  125. package/dist/lib/format.d.ts +4 -8
  126. package/dist/lib/hooks.d.ts +6 -12
  127. package/dist/lib/permission-grid.d.ts +3 -18
  128. package/dist/lib/query-error.d.ts +3 -3
  129. package/dist/props/components/app.prop.d.ts +19 -27
  130. package/dist/props/components/charts.prop.d.ts +2 -3
  131. package/dist/props/components/data-display.prop.d.ts +48 -72
  132. package/dist/props/components/data-entry.prop.d.ts +41 -30
  133. package/dist/props/components/form.prop.d.ts +2 -6
  134. package/dist/props/components/general.prop.d.ts +11 -27
  135. package/dist/props/components/layout.prop.d.ts +89 -260
  136. package/dist/props/components/navigation.prop.d.ts +27 -42
  137. package/dist/props/registry.d.ts +31 -0
  138. package/dist/props/registry.js +33 -0
  139. package/dist/props/vocabulary/data.prop.d.ts +18 -49
  140. package/dist/props/vocabulary/index.d.ts +1 -1
  141. package/dist/props/vocabulary/interaction.prop.d.ts +10 -12
  142. package/dist/props/vocabulary/layout.prop.d.ts +8 -30
  143. package/dist/props/vocabulary/shared.prop.d.ts +3 -2
  144. package/dist/styles/alert-layout.css +1 -32
  145. package/dist/styles/badge-layout.css +4 -18
  146. package/dist/styles/base.css +14 -113
  147. package/dist/styles/card-layout.css +6 -128
  148. package/dist/styles/chart-layout.css +2 -17
  149. package/dist/styles/control.css +380 -458
  150. package/dist/styles/core.css +21 -0
  151. package/dist/styles/data-display-layout.css +175 -94
  152. package/dist/styles/data-entry-layout.css +0 -45
  153. package/dist/styles/density.css +1 -30
  154. package/dist/styles/dialog-layout.css +5 -69
  155. package/dist/styles/focus-ring.css +13 -87
  156. package/dist/styles/fonts.css +1 -31
  157. package/dist/styles/form-layout.css +7 -91
  158. package/dist/styles/index.css +2 -20
  159. package/dist/styles/layout.css +38 -456
  160. package/dist/styles/logo-layout.css +1 -35
  161. package/dist/styles/motion.css +3 -42
  162. package/dist/styles/navigation-layout.css +3 -50
  163. package/dist/styles/shell-layout.css +37 -403
  164. package/dist/styles/table-layout.css +16 -274
  165. package/dist/styles/text-layout.css +7 -21
  166. package/dist/styles/toggle.css +1 -23
  167. package/dist/theme/dxs.canonical.css +1 -55
  168. package/dist/theme/example.service.css +1 -26
  169. package/dist/theme/famgia.service.css +5 -15
  170. package/dist/tokens/axes.css +3 -40
  171. package/dist/tokens/base.css +1 -4
  172. package/dist/tokens/components/activity.css +6 -42
  173. package/dist/tokens/components/badge.css +4 -13
  174. package/dist/tokens/components/banner.css +4 -9
  175. package/dist/tokens/components/card.css +32 -88
  176. package/dist/tokens/components/chart.css +9 -26
  177. package/dist/tokens/components/control.css +37 -222
  178. package/dist/tokens/components/data-display.css +28 -79
  179. package/dist/tokens/components/data-entry.css +5 -19
  180. package/dist/tokens/components/descriptions.css +7 -27
  181. package/dist/tokens/components/email.css +38 -84
  182. package/dist/tokens/components/error-surface.css +2 -18
  183. package/dist/tokens/components/feedback.css +27 -124
  184. package/dist/tokens/components/form.css +13 -45
  185. package/dist/tokens/components/legal-document.css +16 -41
  186. package/dist/tokens/components/list-row.css +11 -36
  187. package/dist/tokens/components/logo.css +2 -57
  188. package/dist/tokens/components/navigation.css +16 -94
  189. package/dist/tokens/components/scroll-area.css +2 -18
  190. package/dist/tokens/components/separator.css +8 -30
  191. package/dist/tokens/components/sheet.css +3 -14
  192. package/dist/tokens/components/shell.css +53 -307
  193. package/dist/tokens/components/sidebar.css +5 -22
  194. package/dist/tokens/components/table.css +19 -140
  195. package/dist/tokens/components/toggle.css +3 -65
  196. package/dist/tokens/components/upload.css +7 -43
  197. package/dist/tokens/foundation.css +108 -383
  198. package/dist/tokens/semantic/layout.css +33 -207
  199. package/docs/CANONICAL-CONTRACTS.md +206 -0
  200. package/docs/COMPONENTS.md +157 -0
  201. package/docs/COMPOSITION-VS-COMPONENT.md +105 -0
  202. package/docs/CONSUMER-RULES.md +14 -0
  203. package/docs/CUSTOMER-THEMING.md +162 -0
  204. package/docs/DATETIME.md +69 -0
  205. package/docs/DEVELOPMENT.md +173 -0
  206. package/docs/FORMS.md +143 -0
  207. package/docs/FRAME-A11Y-CI.md +267 -0
  208. package/docs/FRAME-COVERAGE-LEDGER.md +123 -0
  209. package/docs/FRAME-COVERAGE-REPORT.md +140 -0
  210. package/docs/FRAME-COVERAGE-STANDARD.md +65 -0
  211. package/docs/FRAME-COVERAGE.md +29 -0
  212. package/docs/PROPS-REGISTRY.md +61 -0
  213. package/docs/PROPS-VOCABULARY.md +100 -0
  214. package/docs/README.md +60 -0
  215. package/docs/REGISTRY.md +70 -0
  216. package/docs/SPACING.md +56 -0
  217. package/docs/STANDARDS-vocabulary-tokens.md +48 -0
  218. package/docs/TESTING.md +98 -0
  219. package/docs/TOKENS.md +347 -0
  220. package/docs/asset-modules.d.ts +46 -0
  221. package/docs/assets/cover-terrain.svg +6 -0
  222. package/docs/assets/portrait-amber.svg +5 -0
  223. package/docs/assets/portrait-clay.svg +5 -0
  224. package/docs/assets/portrait-indigo.svg +5 -0
  225. package/docs/assets/portrait-iris.svg +5 -0
  226. package/docs/assets/portrait-moss.svg +5 -0
  227. package/docs/assets/portrait-plum.svg +5 -0
  228. package/docs/assets/portrait-slate.svg +5 -0
  229. package/docs/charts/compact-bar-trend.tsx +328 -0
  230. package/docs/charts/size-tiers.tsx +192 -0
  231. package/docs/data-display/accordion.tsx +99 -0
  232. package/docs/data-display/avatar.tsx +355 -0
  233. package/docs/data-display/badge.tsx +247 -0
  234. package/docs/data-display/card/examples/detail-panel.tsx +106 -0
  235. package/docs/data-display/card/index.md +3 -0
  236. package/docs/data-display/card/index.tsx +285 -0
  237. package/docs/data-display/carousel.tsx +156 -0
  238. package/docs/data-display/charts.tsx +198 -0
  239. package/docs/data-display/code-block.tsx +90 -0
  240. package/docs/data-display/collapsible.tsx +162 -0
  241. package/docs/data-display/credential-reveal.tsx +145 -0
  242. package/docs/data-display/data-table/examples/approval-queue.tsx +212 -0
  243. package/docs/data-display/data-table/examples/grid-features.tsx +158 -0
  244. package/docs/data-display/data-table/examples/list-page.tsx +175 -0
  245. package/docs/data-display/data-table/index.md +5 -0
  246. package/docs/data-display/data-table/index.tsx +295 -0
  247. package/docs/data-display/descriptions.tsx +143 -0
  248. package/docs/data-display/empty-state.tsx +164 -0
  249. package/docs/data-display/hover-card.tsx +181 -0
  250. package/docs/data-display/list-row.tsx +420 -0
  251. package/docs/data-display/permission-matrix.tsx +184 -0
  252. package/docs/data-display/popover-touch.tsx +27 -0
  253. package/docs/data-display/popover.tsx +245 -0
  254. package/docs/data-display/progress.tsx +84 -0
  255. package/docs/data-display/prose.tsx +105 -0
  256. package/docs/data-display/qr-code.tsx +68 -0
  257. package/docs/data-display/scroll-area.tsx +271 -0
  258. package/docs/data-display/service-launcher-card.tsx +145 -0
  259. package/docs/data-display/stat-card.tsx +99 -0
  260. package/docs/data-display/table.tsx +251 -0
  261. package/docs/data-display/timeline.tsx +112 -0
  262. package/docs/data-display/touch-actions.tsx +36 -0
  263. package/docs/data-display/tree-list.tsx +107 -0
  264. package/docs/data-entry/branch-scope-picker.tsx +123 -0
  265. package/docs/data-entry/calendar.tsx +180 -0
  266. package/docs/data-entry/cascader.tsx +378 -0
  267. package/docs/data-entry/checkbox.tsx +256 -0
  268. package/docs/data-entry/color-picker.tsx +117 -0
  269. package/docs/data-entry/command-palette.tsx +179 -0
  270. package/docs/data-entry/command.tsx +262 -0
  271. package/docs/data-entry/country-picker-recipe.tsx +170 -0
  272. package/docs/data-entry/date-picker.tsx +191 -0
  273. package/docs/data-entry/date-range-picker.tsx +149 -0
  274. package/docs/data-entry/form/examples/employee-settings.tsx +267 -0
  275. package/docs/data-entry/form/examples/invoice-form.tsx +387 -0
  276. package/docs/data-entry/form-field/examples/a11y-contract.tsx +240 -0
  277. package/docs/data-entry/form-field/examples/create-form.tsx +105 -0
  278. package/docs/data-entry/form-field/index.md +8 -0
  279. package/docs/data-entry/form-field/index.tsx +326 -0
  280. package/docs/data-entry/form-inertia.tsx +80 -0
  281. package/docs/data-entry/form-root.tsx +102 -0
  282. package/docs/data-entry/form.tsx +724 -0
  283. package/docs/data-entry/input-otp.tsx +231 -0
  284. package/docs/data-entry/input.tsx +114 -0
  285. package/docs/data-entry/label.tsx +100 -0
  286. package/docs/data-entry/month-picker.tsx +101 -0
  287. package/docs/data-entry/month-range-picker.tsx +115 -0
  288. package/docs/data-entry/number-input.tsx +240 -0
  289. package/docs/data-entry/password-input.tsx +106 -0
  290. package/docs/data-entry/password-strength.tsx +97 -0
  291. package/docs/data-entry/radio-group.tsx +95 -0
  292. package/docs/data-entry/rating.tsx +87 -0
  293. package/docs/data-entry/search-input.tsx +120 -0
  294. package/docs/data-entry/select-async-contracts.tsx +108 -0
  295. package/docs/data-entry/select-matrix.tsx +204 -0
  296. package/docs/data-entry/select.tsx +369 -0
  297. package/docs/data-entry/slider.tsx +130 -0
  298. package/docs/data-entry/switch.tsx +67 -0
  299. package/docs/data-entry/tag-input.tsx +108 -0
  300. package/docs/data-entry/textarea.tsx +209 -0
  301. package/docs/data-entry/time-picker.tsx +99 -0
  302. package/docs/data-entry/toggle-count.tsx +293 -0
  303. package/docs/data-entry/toggle-group.tsx +225 -0
  304. package/docs/data-entry/toggle.tsx +127 -0
  305. package/docs/data-entry/transfer.tsx +97 -0
  306. package/docs/data-entry/tree-select.tsx +204 -0
  307. package/docs/data-entry/upload.tsx +184 -0
  308. package/docs/feedback/alert-dialog.tsx +270 -0
  309. package/docs/feedback/alert.tsx +248 -0
  310. package/docs/feedback/banner.tsx +183 -0
  311. package/docs/feedback/danger-confirm.tsx +88 -0
  312. package/docs/feedback/dialog-touch.tsx +24 -0
  313. package/docs/feedback/dialog.tsx +193 -0
  314. package/docs/feedback/sheet.tsx +410 -0
  315. package/docs/feedback/skeleton.tsx +111 -0
  316. package/docs/feedback/toast.tsx +135 -0
  317. package/docs/feedback/tooltip.tsx +171 -0
  318. package/docs/feedback/two-factor-setup.tsx +68 -0
  319. package/docs/foundation/_email-specimen.ts +274 -0
  320. package/docs/foundation/colors.tsx +202 -0
  321. package/docs/foundation/density.tsx +232 -0
  322. package/docs/foundation/email-tokens.tsx +306 -0
  323. package/docs/foundation/radius-shadow.tsx +152 -0
  324. package/docs/foundation/spacing.tsx +211 -0
  325. package/docs/foundation/typography.tsx +147 -0
  326. package/docs/general/activity.tsx +224 -0
  327. package/docs/general/button/examples/destructive-confirm.tsx +90 -0
  328. package/docs/general/button/examples/form-actions.tsx +85 -0
  329. package/docs/general/button/examples/toolbar.tsx +160 -0
  330. package/docs/general/button/index.md +12 -0
  331. package/docs/general/button/index.tsx +211 -0
  332. package/docs/general/logo.tsx +131 -0
  333. package/docs/general/reveal.tsx +41 -0
  334. package/docs/general/typography.tsx +152 -0
  335. package/docs/layout/account-chip.tsx +72 -0
  336. package/docs/layout/admin-collection.tsx +122 -0
  337. package/docs/layout/app-shell.tsx +374 -0
  338. package/docs/layout/aspect-ratio.tsx +119 -0
  339. package/docs/layout/auth-account-summary.tsx +103 -0
  340. package/docs/layout/auth-divider.tsx +28 -0
  341. package/docs/layout/auth-footer.tsx +37 -0
  342. package/docs/layout/auth-identity.tsx +36 -0
  343. package/docs/layout/auth-recovery/examples/mfa-challenge.md +41 -0
  344. package/docs/layout/auth-recovery/examples/mfa-challenge.tsx +254 -0
  345. package/docs/layout/auth-recovery/examples/mobile-390.md +25 -0
  346. package/docs/layout/auth-recovery/examples/mobile-390.tsx +82 -0
  347. package/docs/layout/auth-recovery/examples/password-recovery.md +24 -0
  348. package/docs/layout/auth-recovery/examples/password-recovery.tsx +197 -0
  349. package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.md +27 -0
  350. package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.tsx +156 -0
  351. package/docs/layout/auth-recovery/index.md +140 -0
  352. package/docs/layout/auth-recovery/index.tsx +96 -0
  353. package/docs/layout/auth-shell-context.tsx +103 -0
  354. package/docs/layout/auth-shell-device.tsx +112 -0
  355. package/docs/layout/auth-shell-registration.tsx +335 -0
  356. package/docs/layout/auth-shell-variants.tsx +139 -0
  357. package/docs/layout/auth-shell.tsx +59 -0
  358. package/docs/layout/auth-stack.tsx +40 -0
  359. package/docs/layout/centered-shell.tsx +102 -0
  360. package/docs/layout/error-surface/examples/application-403.tsx +84 -0
  361. package/docs/layout/error-surface/examples/application-404.tsx +77 -0
  362. package/docs/layout/error-surface/examples/system-500.tsx +47 -0
  363. package/docs/layout/error-surface/examples/system-503.tsx +48 -0
  364. package/docs/layout/error-surface/index.md +153 -0
  365. package/docs/layout/error-surface/index.tsx +239 -0
  366. package/docs/layout/flex.tsx +262 -0
  367. package/docs/layout/legal-document-shell/_data.ts +110 -0
  368. package/docs/layout/legal-document-shell/examples/desktop-1440.md +12 -0
  369. package/docs/layout/legal-document-shell/examples/desktop-1440.tsx +83 -0
  370. package/docs/layout/legal-document-shell/examples/mobile-390.md +22 -0
  371. package/docs/layout/legal-document-shell/examples/mobile-390.tsx +70 -0
  372. package/docs/layout/legal-document-shell/examples/tablet-1024.md +3 -0
  373. package/docs/layout/legal-document-shell/examples/tablet-1024.tsx +84 -0
  374. package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.md +18 -0
  375. package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.tsx +61 -0
  376. package/docs/layout/legal-document-shell/index.md +51 -0
  377. package/docs/layout/legal-document-shell/index.tsx +101 -0
  378. package/docs/layout/master-detail.tsx +387 -0
  379. package/docs/layout/org-switcher.tsx +131 -0
  380. package/docs/layout/page-container.tsx +946 -0
  381. package/docs/layout/resizable-panel.tsx +419 -0
  382. package/docs/layout/responsive-grid.tsx +235 -0
  383. package/docs/layout/separator.tsx +327 -0
  384. package/docs/layout/service-role-panel.tsx +144 -0
  385. package/docs/layout/sidebar.tsx +586 -0
  386. package/docs/layout/split-pane.tsx +451 -0
  387. package/docs/layout/topbar.tsx +347 -0
  388. package/docs/navigation/app-setting-picker.tsx +141 -0
  389. package/docs/navigation/breadcrumb.tsx +128 -0
  390. package/docs/navigation/context-menu.tsx +117 -0
  391. package/docs/navigation/dropdown-menu.tsx +213 -0
  392. package/docs/navigation/filter-bar.tsx +227 -0
  393. package/docs/navigation/menubar.tsx +141 -0
  394. package/docs/navigation/navigation-menu.tsx +165 -0
  395. package/docs/navigation/pagination.tsx +241 -0
  396. package/docs/navigation/steps.tsx +263 -0
  397. package/docs/navigation/tabs-rtl.tsx +28 -0
  398. package/docs/navigation/tabs.tsx +308 -0
  399. package/docs/navigation/toolbar.tsx +339 -0
  400. package/docs/providers/app-provider.tsx +191 -0
  401. package/docs/providers/format-date.tsx +230 -0
  402. package/docs/query/button-refetch.tsx +160 -0
  403. package/docs/query/data-state.tsx +192 -0
  404. package/docs/query/infinite-query-state.tsx +93 -0
  405. package/docs/query/mutation-feedback.tsx +70 -0
  406. package/docs/query/prefetch-link.tsx +262 -0
  407. package/docs/query/touch-actions.tsx +68 -0
  408. package/docs/showcase/acme-portal.tsx +441 -0
  409. package/docs/showcase/acme-website.tsx +455 -0
  410. package/docs/showcase/case1-warehouse-dashboard.tsx +343 -0
  411. package/docs/showcase/case2-employee-me.tsx +441 -0
  412. package/docs/showcase/case3-approval-workflow.tsx +527 -0
  413. package/docs/showcase/case4-login.tsx +307 -0
  414. package/docs/showcase/case5-shift-calendar.tsx +795 -0
  415. package/docs/showcase/case6-agency-handy.tsx +1072 -0
  416. package/docs/showcase/futurelastic-web.tsx +390 -0
  417. package/docs/showcase/org-switcher.tsx +313 -0
  418. package/docs/showcase/permission-matrix.tsx +343 -0
  419. package/docs/showcase/public-landing.tsx +210 -0
  420. package/docs/showcase/settings-account-sections.tsx +559 -0
  421. package/docs/showcase/settings-security-mfa.tsx +145 -0
  422. package/docs/showcase/table-approval-queue.tsx +199 -0
  423. package/docs/showcase/table-bulk-actions.tsx +460 -0
  424. package/docs/showcase/table-compact-kintone.tsx +438 -0
  425. package/docs/showcase/table-conditional-format.tsx +367 -0
  426. package/docs/showcase/table-crud-list.tsx +544 -0
  427. package/docs/showcase/table-density.tsx +340 -0
  428. package/docs/showcase/table-expandable-rows.tsx +471 -0
  429. package/docs/showcase/table-filter-chips.tsx +461 -0
  430. package/docs/showcase/table-footer-totals.tsx +311 -0
  431. package/docs/showcase/table-grouped-subtotals.tsx +388 -0
  432. package/docs/showcase/table-master-detail.tsx +479 -0
  433. package/docs/showcase/table-pagination.tsx +320 -0
  434. package/docs/showcase/table-states.tsx +363 -0
  435. package/docs/showcase/table-sticky-columns.tsx +373 -0
  436. package/docs/showcase/table-tree-rows.tsx +444 -0
  437. package/docs/showcase/table-view-tabs.tsx +488 -0
  438. package/package.json +10 -11
  439. package/scripts/_agent-setup.mjs +16 -2
  440. package/scripts/audit-hook.mjs +3 -13
  441. package/scripts/init-agent-kit.mjs +1 -14
  442. package/scripts/postinstall.mjs +12 -12
  443. package/scripts/ui-audit.mjs +93 -31
  444. package/scripts/visual-audit-rules.mjs +51 -7
  445. package/scripts/visual-audit.mjs +118 -47
@@ -3,16 +3,15 @@ import type * as React from "react";
3
3
  import type { ActionsProp, ChildrenProp, ClassNameProp, DisabledProp, ErrorProp, HasActiveFiltersProp, IdProp, LabelProp, OnClearFiltersProp, PendingProp, PlaceholderProp, StickyProp } from "../vocabulary/index.js";
4
4
  import type { SearchSelectOptionProp } from "./data-entry.prop.js";
5
5
  /**
6
- * How a {@link ToolbarProp} strip resolves more filters than fit one row (#216).
7
6
  * `wrap` (default) stacks on narrow viewports then wraps onto extra rows; `scroll` keeps ONE
8
7
  * bounded row that scrolls inline, so a wide filter set never pushes the list below the fold.
9
8
  */
10
9
  export type FilterBarOverflowProp = "wrap" | "scroll";
11
10
  /**
12
- * Typed search slot of the FilterBar model (gh#258). Renders the canonical SearchInput as the
13
- * FIRST control of the strip, with a token-owned consistent width (`--filter-bar-search-width`,
14
- * full-width below 640px). Controlled by consumer data via the `value`/`defaultValue`/
15
- * `onValueChange` triad; `onSearch` mirrors SearchInput's debounced-term callback.
11
+ * Renders the canonical SearchInput as the FIRST control of the strip, with a token-owned
12
+ * consistent width (`--filter-bar-search-width`, full-width below 640px). Controlled by consumer
13
+ * data via the `value`/`defaultValue`/ `onValueChange` triad; `onSearch` mirrors SearchInput's
14
+ * debounced-term callback.
16
15
  */
17
16
  export type FilterBarSearchProp = {
18
17
  value?: string;
@@ -30,11 +29,10 @@ export type FilterBarSearchProp = {
30
29
  disabled?: DisabledProp;
31
30
  };
32
31
  /**
33
- * One typed filter of the FilterBar model (gh#258): a labelled, domain-neutral Select whose
34
- * options and selection are consumer data. `value` is the filter's stable identity (never shown);
35
- * the visible `label` is rendered as the control's real `<label htmlFor>` (WCAG 2.5.3 / 1.3.1).
36
- * Selection is controlled via `selected`/`defaultSelected`/`onSelectedChange` the standard
37
- * triad, renamed so the filter's own identity `value` stays unambiguous.
32
+ * `value` is the filter's stable identity (never shown); the visible `label` is rendered as the
33
+ * control's real `<label htmlFor>` (WCAG 2.5.3 / 1.3.1). Selection is controlled via
34
+ * `selected`/`defaultSelected`/`onSelectedChange` the standard triad, renamed so the filter's
35
+ * own identity `value` stays unambiguous.
38
36
  */
39
37
  export type FilterBarFilterProp = {
40
38
  /** Stable filter identity (drives the control id + React key). */
@@ -48,10 +46,10 @@ export type FilterBarFilterProp = {
48
46
  disabled?: DisabledProp;
49
47
  };
50
48
  /**
51
- * One applied-filter chip of the FilterBar model (gh#258). Chips are pure consumer data the
52
- * lifecycle is: ADD by including the chip in `chips`, REMOVE via `onChipRemove(value)` (the ×
53
- * button), CLEAR-ALL via the bar's `onClear`. `label` should be a string when possible so the
54
- * remove button's accessible name can quote it; otherwise `value` is quoted instead.
49
+ * Chips are pure consumer data — the lifecycle is: ADD by including the chip in `chips`, REMOVE
50
+ * via `onChipRemove(value)` (the × button), CLEAR-ALL via the bar's `onClear`. `label` should be a
51
+ * string when possible so the remove button's accessible name can quote it; otherwise `value` is
52
+ * quoted instead.
55
53
  */
56
54
  export type FilterBarChipProp = {
57
55
  /** Stable chip identity, passed to `onChipRemove`. */
@@ -64,24 +62,21 @@ export type ToolbarProp = {
64
62
  onClear?: OnClearFiltersProp;
65
63
  hasActiveFilters?: HasActiveFiltersProp;
66
64
  /**
67
- * Pin the strip to the top of its scroll container while the list scrolls beneath it
68
- * (list-page filter bars, #197). Opt-in — default `false` keeps the toolbar quiet. Tune
69
- * the pinned offset/background with the `--filter-bar-sticky-offset` /
70
- * `--filter-bar-sticky-background` theme knobs.
65
+ * Opt-in default `false` keeps the toolbar quiet. Tune the pinned offset/background with the
66
+ * `--filter-bar-sticky-offset` / `--filter-bar-sticky-background` theme knobs.
71
67
  */
72
68
  sticky?: StickyProp;
73
69
  /**
74
- * Responsive overflow strategy (#216). Default `wrap`. Use `scroll` for list pages with many
75
- * filters (long JA/EN/VI labels) where a wrapped 3-row strip would push the table off screen.
76
- * Tune the scrollbar gutter with the `--filter-bar-scroll-padding-y` theme knob.
70
+ * Default `wrap`. Use `scroll` for list pages with many filters (long JA/EN/VI labels) where a
71
+ * wrapped 3-row strip would push the table off screen.
77
72
  */
78
73
  overflow?: FilterBarOverflowProp;
79
74
  /**
80
- * Typed model (gh#258) — search slot. When ANY model prop (`search`/`filters`/`chips`/
81
- * `onChipRemove`/`actions`/`resultCount`/`loading`/`disabled`/`error`) is present the bar renders
82
- * the canonical model layout: strip (search → filters → children → reset → actions) → chips row →
83
- * result-count/error line, with token-owned widths and stacking. Without any of them the bar
84
- * stays the plain children-composition toolbar — existing markup is unchanged.
75
+ * When ANY model prop (`search`/`filters`/`chips`/
76
+ * `onChipRemove`/`actions`/`resultCount`/`loading`/`disabled`/`error`) is present the bar
77
+ * renders the canonical model layout: strip (search → filters → children → reset → actions) →
78
+ * chips row → result-count/error line, with token-owned widths and stacking. Without any of them
79
+ * the bar stays the plain children-composition toolbar — existing markup is unchanged.
85
80
  */
86
81
  search?: FilterBarSearchProp;
87
82
  /** Typed model — labelled Select filters rendered after the search slot, in array order. */
@@ -110,9 +105,9 @@ export type ToolbarProp = {
110
105
  export type ToolbarGroupProp = {
111
106
  label: LabelProp;
112
107
  /**
113
- * `id` of the single control this group labels (#216). When set, the visible group label is
114
- * rendered as that control's real `<label htmlFor>`, so the filter is named by the text the
115
- * user sees (WCAG 2.5.3 / 1.3.1) — otherwise the control needs its own `aria-label`.
108
+ * When set, the visible group label is rendered as that control's real `<label htmlFor>`, so the
109
+ * filter is named by the text the user sees (WCAG 2.5.3 / 1.3.1) — otherwise the control needs
110
+ * its own `aria-label`.
116
111
  */
117
112
  controlId?: IdProp;
118
113
  className?: ClassNameProp;
@@ -120,13 +115,7 @@ export type ToolbarGroupProp = {
120
115
  };
121
116
  /** @see Pagination — offset/page-based (distinct from DataTable cursor pagination). */
122
117
  export type PaginationProp = {
123
- /**
124
- * Override the `<nav>` landmark's accessible name. Defaults to a localized "Pagination".
125
- * Multiple Pagination instances on one page/view (e.g. two independent result lists) need a
126
- * DISTINCT name each — two `<nav>` landmarks sharing one name/role fail axe's `landmark-unique`
127
- * (WCAG 2.4.1 / 1.3.1). Pass something that names what is being paged, e.g. `"注文一覧の
128
- * ページネーション"` vs `"請求書一覧のページネーション"`.
129
- */
118
+ /** Override the `<nav>` landmark's accessible name. Defaults to a localized "Pagination". */
130
119
  ariaLabel?: string;
131
120
  value?: number;
132
121
  total?: number;
@@ -137,9 +126,7 @@ export type PaginationProp = {
137
126
  /**
138
127
  * Hide the whole control when there is nothing to page through — zero items OR exactly one page.
139
128
  * `true` (default) keeps table footers clean: pagination is navigation between multiple result
140
- * pages, so a lone disabled `1 / 1` bar is noise. Set `false` for the explicit opt-in when a
141
- * consumer still wants the bar on a single page (e.g. to keep `showTotal` visible). A control
142
- * with `total === 0` is ALWAYS hidden — there is no data to navigate. (gh#153)
129
+ * pages, so a lone disabled `1 / 1` bar is noise.
143
130
  */
144
131
  hideOnSinglePage?: boolean;
145
132
  simple?: boolean;
@@ -173,9 +160,7 @@ export type StepsProp = {
173
160
  titlePlacement?: "horizontal" | "vertical";
174
161
  /**
175
162
  * The glyph between inline steps (`type="inline"` only). `chevron` (default, `›`) is the
176
- * breadcrumb-flavoured original. `arrow` (`→`) is the canonical hosted-identity progression
177
- * marker: a chevron reads as "drill into", an arrow reads as "then" — which is what a step row
178
- * means. Ignored by every other `type`.
163
+ * breadcrumb-flavoured original.
179
164
  */
180
165
  separator?: StepsSeparatorProp;
181
166
  onValueChange?: (value: number) => void;
@@ -119,6 +119,11 @@ export declare const VOCABULARY_REGISTRY: {
119
119
  readonly category: "shared";
120
120
  readonly description: "Explicit layout length (number→px | CSS string) — NOT the SizeProp tier";
121
121
  };
122
+ readonly ControlWidthProp: {
123
+ readonly file: "vocabulary/shared.prop.ts";
124
+ readonly category: "shared";
125
+ readonly description: "Inline sizing of a control: full (fill the column) | auto (hug the label)";
126
+ };
122
127
  readonly TitleProp: {
123
128
  readonly file: "vocabulary/content.prop.ts";
124
129
  readonly category: "content";
@@ -699,6 +704,12 @@ export declare const COMPONENT_PROP_REGISTRY: {
699
704
  readonly vocabulary: readonly ["DisabledProp", "ClassNameProp"];
700
705
  readonly local: readonly ["email", "avatarSrc", "avatarFallback", "actionLabel", "onAction"];
701
706
  };
707
+ readonly AccountChipProp: {
708
+ readonly group: "layout";
709
+ readonly file: "components/layout.prop.ts";
710
+ readonly vocabulary: readonly ["DisabledProp", "ClassNameProp"];
711
+ readonly local: readonly ["email", "avatarSrc", "avatarFallback", "actionLabel", "onAction"];
712
+ };
702
713
  readonly CenteredShellProp: {
703
714
  readonly group: "layout";
704
715
  readonly file: "components/layout.prop.ts";
@@ -994,6 +1005,16 @@ export declare const COMPONENT_PROP_REGISTRY: {
994
1005
  readonly file: "components/data-entry.prop.ts";
995
1006
  readonly vocabulary: readonly [];
996
1007
  };
1008
+ readonly CalendarFooterProp: {
1009
+ readonly group: "data-entry";
1010
+ readonly file: "components/data-entry.prop.ts";
1011
+ readonly vocabulary: readonly [{
1012
+ readonly field: "onClose";
1013
+ readonly local: true;
1014
+ readonly reason: "Fired by the Close footer action; the picker that embeds the Calendar closes its popover. Not a value change.";
1015
+ }];
1016
+ readonly local: readonly ["showToday", "showClose"];
1017
+ };
997
1018
  readonly DatePickerProp: {
998
1019
  readonly group: "data-entry";
999
1020
  readonly file: "components/data-entry.prop.ts";
@@ -1685,6 +1706,16 @@ export declare const COMPONENT_PROP_REGISTRY: {
1685
1706
  readonly file: "components/data-display/progress.tsx";
1686
1707
  readonly vocabulary: readonly ["ValueProp", "LabelProp", "ClassNameProp"];
1687
1708
  };
1709
+ readonly CodeBlockProp: {
1710
+ readonly group: "data-display";
1711
+ readonly file: "components/data-display.prop.ts";
1712
+ readonly vocabulary: readonly ["ChildrenProp", "SizeProp", "ClassNameProp"];
1713
+ };
1714
+ readonly ProseProp: {
1715
+ readonly group: "data-display";
1716
+ readonly file: "components/data-display.prop.ts";
1717
+ readonly vocabulary: readonly ["SizeProp", "ClassNameProp", "ChildrenProp"];
1718
+ };
1688
1719
  readonly TimelineProp: {
1689
1720
  readonly group: "data-display";
1690
1721
  readonly file: "components/data-display/timeline.tsx";
@@ -115,6 +115,11 @@ const VOCABULARY_REGISTRY = {
115
115
  category: "shared",
116
116
  description: "Explicit layout length (number\u2192px | CSS string) \u2014 NOT the SizeProp tier"
117
117
  },
118
+ ControlWidthProp: {
119
+ file: "vocabulary/shared.prop.ts",
120
+ category: "shared",
121
+ description: "Inline sizing of a control: full (fill the column) | auto (hug the label)"
122
+ },
118
123
  // content.prop.ts
119
124
  TitleProp: {
120
125
  file: "vocabulary/content.prop.ts",
@@ -726,6 +731,12 @@ const COMPONENT_PROP_REGISTRY = {
726
731
  vocabulary: ["DisabledProp", "ClassNameProp"],
727
732
  local: ["email", "avatarSrc", "avatarFallback", "actionLabel", "onAction"]
728
733
  },
734
+ AccountChipProp: {
735
+ group: "layout",
736
+ file: "components/layout.prop.ts",
737
+ vocabulary: ["DisabledProp", "ClassNameProp"],
738
+ local: ["email", "avatarSrc", "avatarFallback", "actionLabel", "onAction"]
739
+ },
729
740
  CenteredShellProp: {
730
741
  group: "layout",
731
742
  file: "components/layout.prop.ts",
@@ -1128,6 +1139,18 @@ const COMPONENT_PROP_REGISTRY = {
1128
1139
  vocabulary: ["DisabledProp"]
1129
1140
  },
1130
1141
  CalendarProp: { group: "data-entry", file: "components/data-entry.prop.ts", vocabulary: [] },
1142
+ CalendarFooterProp: {
1143
+ group: "data-entry",
1144
+ file: "components/data-entry.prop.ts",
1145
+ vocabulary: [
1146
+ {
1147
+ field: "onClose",
1148
+ local: true,
1149
+ reason: "Fired by the Close footer action; the picker that embeds the Calendar closes its popover. Not a value change."
1150
+ }
1151
+ ],
1152
+ local: ["showToday", "showClose"]
1153
+ },
1131
1154
  DatePickerProp: {
1132
1155
  group: "data-entry",
1133
1156
  file: "components/data-entry.prop.ts",
@@ -1867,6 +1890,16 @@ const COMPONENT_PROP_REGISTRY = {
1867
1890
  file: "components/data-display/progress.tsx",
1868
1891
  vocabulary: ["ValueProp", "LabelProp", "ClassNameProp"]
1869
1892
  },
1893
+ CodeBlockProp: {
1894
+ group: "data-display",
1895
+ file: "components/data-display.prop.ts",
1896
+ vocabulary: ["ChildrenProp", "SizeProp", "ClassNameProp"]
1897
+ },
1898
+ ProseProp: {
1899
+ group: "data-display",
1900
+ file: "components/data-display.prop.ts",
1901
+ vocabulary: ["SizeProp", "ClassNameProp", "ChildrenProp"]
1902
+ },
1870
1903
  TimelineProp: {
1871
1904
  group: "data-display",
1872
1905
  file: "components/data-display/timeline.tsx",
@@ -14,36 +14,23 @@ export type ColumnDefProp<T> = {
14
14
  key: string;
15
15
  header: React.ReactNode;
16
16
  /**
17
- * Accessible header text for a column whose `header` is visually empty — the
18
- * standard case for a row-actions or selection column. Rendered as an
19
- * `sr-only` label inside the `<th>` so the column keeps a screen-reader name
20
- * (e.g. "Actions" / "Select") while showing nothing on screen. Required
21
- * (dev-warned) when `header` is empty; ignored when `header` has visible text.
22
- * Route the string through `t()` for i18n.
17
+ * Accessible header text for a column whose `header` is visually empty — the standard case for a
18
+ * row-actions or selection column. Rendered as an `sr-only` label inside the `<th>` so the
19
+ * column keeps a screen-reader name (e.g.
23
20
  */
24
21
  ariaLabel?: string;
25
22
  render?: (row: T) => React.ReactNode;
26
23
  sortable?: boolean;
27
24
  /**
28
- * Column width: either a utility class (`"w-[300px]"`) or a CSS length
29
- * (`"300px"`, `"20%"`, `"calc(50% - 1rem)"`). Both work — a length is
30
- * applied inline, anything else is treated as a class.
31
- *
32
- * It used to be class-only, and a length silently became a dead class name,
33
- * so the column fell back to auto layout with nothing to indicate why.
25
+ * Column width: either a utility class (`"w-[300px]"`) or a CSS length (`"300px"`, `"20%"`,
26
+ * `"calc(50% - 1rem)"`). Both work — a length is applied inline, anything else is treated as a
27
+ * class.
34
28
  */
35
29
  width?: string;
36
30
  align?: ColumnAlignProp;
37
31
  /**
38
- * Alignment of the header cell, when it differs from the body.
39
- *
40
- * Defaults to `align`, which is the usual case. It exists because a table
41
- * can want centred headings over start-aligned text — a long subject reads
42
- * from the left while its column heading sits over the column — and `align`
43
- * alone cannot say that: setting it to `center` centres the rows too.
44
- *
45
- * Consumers were reaching for `[&_th_button]:justify-center` to get there,
46
- * which is a hand-tuned override of a layout the table owns.
32
+ * Alignment of the header cell, when it differs from the body. Defaults to `align`, which is the
33
+ * usual case.
47
34
  */
48
35
  headerAlign?: ColumnAlignProp;
49
36
  hiddenOnMobile?: boolean;
@@ -54,21 +41,17 @@ export type ColumnDefProp<T> = {
54
41
  */
55
42
  enableHiding?: boolean;
56
43
  /**
57
- * Pin the column to the inline-end edge so it stays visible while the rest of
58
- * the table scrolls horizontally — the standard home for a row-actions column.
59
- * The pinned cell keeps an opaque, hover/selection-aware background and casts a
60
- * separating shadow. Pin at most one column per table.
44
+ * Pin the column to the inline-end edge so it stays visible while the rest of the table scrolls
45
+ * horizontally — the standard home for a row-actions column. The pinned cell keeps an opaque,
46
+ * hover/selection-aware background and casts a separating shadow.
61
47
  */
62
48
  pin?: "end";
63
49
  /**
64
- * Relative importance of the column, read ONLY by `DataTable preset="action-collection"`
65
- * (gh#253). It is the SAME contract the `Table` primitive exposes on `TableHead`/`TableCell`:
66
- * DataTable stamps it onto both cells of the column for you, so the preset can swap the desktop
67
- * intrinsic widths for the token-owned priority measures (`--table-action-collection-*`) instead
68
- * of scrolling a five-column approval queue sideways at 390px. Leave the free-text column
69
- * unmarked — it takes the remaining space. Emitted as `data-priority` only when set, so an
70
- * ordinary column gains no attribute. Prefer this over `width` under the preset: an explicit
71
- * `width` utility wins the cascade and defeats the priority measure.
50
+ * It is the SAME contract the `Table` primitive exposes on `TableHead`/`TableCell`: DataTable
51
+ * stamps it onto both cells of the column for you, so the preset can swap the desktop intrinsic
52
+ * widths for the token-owned priority measures (`--table-action-collection-*`) instead of
53
+ * scrolling a five-column approval queue sideways at 390px. Leave the free-text column unmarked
54
+ * it takes the remaining space.
72
55
  */
73
56
  priority?: TableColumnPriorityProp;
74
57
  };
@@ -95,26 +78,12 @@ export type HasActiveFiltersProp = boolean;
95
78
  * offset/background are tuned via the `--filter-bar-sticky-*` theme knobs.
96
79
  */
97
80
  export type StickyProp = boolean;
98
- /**
99
- * Table named collection preset. `"default"` keeps the plain table (and emits no attribute).
100
- * `"action-collection"` is the canonical dense approval / action queue: below `collapseBelow`
101
- * the desktop intrinsic column widths are replaced by token-owned column-PRIORITY measures under
102
- * `table-layout: fixed` and cells wrap, so every column — including the row actions — stays inside
103
- * the initial narrow frame. The real `<table>` semantics are never rewritten.
104
- *
105
- * `"stacked-record-collection"` (gh#293 restore — SCR-215) is the canonical wide-record collection:
106
- * a table whose column count/content cannot be squeezed into any fixed-measure narrow frame at all
107
- * (an admin detail row with many heterogeneous fields). Below `collapseBelow` the header row hides
108
- * and every `<tr>` becomes a bordered key-value CARD stack — each `TableCell`'s own `label` prop
109
- * renders inline above its value, taking over the accessible-name role the (now hidden) `<th>`
110
- * association would otherwise carry. Above the step it is a byte-for-byte ordinary table.
111
- */
81
+ /** Table named collection preset. `"default"` keeps the plain table (and emits no attribute). */
112
82
  export type TablePresetProp = "default" | "action-collection" | "stacked-record-collection";
113
83
  /**
114
84
  * Relative importance of a table column, used by `preset="action-collection"` to allocate the
115
85
  * narrow-frame measure. `"primary"` is the row's subject, `"secondary"` its object/target,
116
86
  * `"meta"` a low-priority stamp (dates, ids), `"actions"` the row-action affordance whose measure
117
- * is reserved first so it can never be pushed outside the viewport. A column with no priority
118
- * takes the remaining space (the free-text column).
87
+ * is reserved first so it can never be pushed outside the viewport.
119
88
  */
120
89
  export type TableColumnPriorityProp = "primary" | "secondary" | "meta" | "actions";
@@ -1,5 +1,5 @@
1
1
  /** Barrel — all vocabulary prop types. */
2
- export type { ClassNameProp, ChildrenProp, IdProp, OpenProp, DefaultOpenProp, OnOpenChangeProp, HandlerProp, PendingProp, RequiredProp, DisabledProp, LabelProp, HelperProp, ErrorProp, ErrorBagProp, PlaceholderProp, NameProp, ValueProp, DefaultValueProp, OnValueChangeProp, OnChangeProp, OnClickProp, AsChildProp, WidthProp, } from "./shared.prop.js";
2
+ export type { ClassNameProp, ChildrenProp, IdProp, OpenProp, DefaultOpenProp, OnOpenChangeProp, HandlerProp, PendingProp, RequiredProp, DisabledProp, LabelProp, HelperProp, ErrorProp, ErrorBagProp, PlaceholderProp, NameProp, ValueProp, DefaultValueProp, OnValueChangeProp, OnChangeProp, OnClickProp, AsChildProp, WidthProp, ControlWidthProp, } from "./shared.prop.js";
3
3
  export type { TitleProp, SubtitleProp, StatusProp, DescriptionProp, ExtraProp, FooterProp, ActionProp, IconProp, ConfirmLabelProp, CancelLabelProp, ActionsProp, EmptyMessageProp, } from "./content.prop.js";
4
4
  export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, OrientationProp, TableDensityProp, DensityProp, GapProp, } from "./layout.prop.js";
5
5
  export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, SizeProp, FormLayoutProp, DescriptionsLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, ActivityVariantProp, ActivityAnnounceProp, } from "./interaction.prop.js";
@@ -4,8 +4,10 @@
4
4
  */
5
5
  /** Button visual style. */
6
6
  export type ButtonVariantProp = "default" | "destructive" | "outline" | "dashed" | "secondary" | "ghost" | "link";
7
- /** Corner shape — maps to the radius tokens (default = control/component radius). Shared by
8
- * Button + Badge. `pill` = fully rounded (`--radius-pill`), `sharp` = square (`--radius-sharp`). */
7
+ /**
8
+ * Corner shape maps to the radius tokens (default = control/component radius). Shared by Button
9
+ * + Badge.
10
+ */
9
11
  export type ShapeProp = "default" | "pill" | "sharp";
10
12
  /**
11
13
  * Avatar geometry — WHAT the mark represents, not just its corner radius, which is why it is a
@@ -22,7 +24,7 @@ export type TextSizeProp = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
22
24
  export type TextToneProp = "default" | "muted" | "primary" | "success" | "warning" | "destructive" | "info";
23
25
  /** Font weight — the reference-design canon is THREE weights only: `regular` (400 body), `medium` (500
24
26
  * heading/label), `bold` (700 emphasis). 600/`semibold` is forbidden. */
25
- export type FontWeightProp = "regular" | "medium" | "bold";
27
+ export type FontWeightProp = "regular" | "medium" | "semibold" | "bold";
26
28
  /** Heading level — drives both the `--heading-h*` size token and the semantic `<h1..h4>` element. */
27
29
  export type HeadingLevelProp = 1 | 2 | 3 | 4;
28
30
  /** Inline text alignment (logical, RTL-safe). */
@@ -71,9 +73,9 @@ export type SortStateProp = {
71
73
  direction: SortDirectionProp;
72
74
  };
73
75
  /**
74
- * Entrance-stagger ordinal for `Reveal` — an INDEX into the motion ladder, never a raw ms.
75
- * `0` = enter immediately; `1..6` each add one `--reveal-stagger-step` of delay so a column of
76
- * revealed rows cascades in. Reduced-motion collapses every step to 0 (content stays visible).
76
+ * Entrance-stagger ordinal for `Reveal` — an INDEX into the motion ladder, never a raw ms. `0` =
77
+ * enter immediately; `1..6` each add one `--reveal-stagger-step` of delay so a column of revealed
78
+ * rows cascades in.
77
79
  */
78
80
  export type RevealDelayProp = 0 | 1 | 2 | 3 | 4 | 5 | 6;
79
81
  /**
@@ -83,11 +85,7 @@ export type RevealDelayProp = 0 | 1 | 2 | 3 | 4 | 5 | 6;
83
85
  */
84
86
  export type ActivityVariantProp = "dots" | "pulse" | "bar";
85
87
  /**
86
- * Whether an ambient indicator announces its label to assistive technology.
87
- *
88
- * Default `false` — DELIBERATELY. An ambient affordance flickers on and off with every socket
89
- * event; a live region there re-announces continuously and makes the surface unusable with a
90
- * screen reader (`Skeleton`'s unconditional `aria-live="polite"` is the anti-pattern this default
91
- * exists to avoid). `"polite"` opts in for the rare case where the change genuinely must be heard.
88
+ * Whether an ambient indicator announces its label to assistive technology. Default `false` —
89
+ * DELIBERATELY.
92
90
  */
93
91
  export type ActivityAnnounceProp = false | "polite";
@@ -19,30 +19,17 @@ export type CenteredShellWidthProp = "sm" | "md" | "lg";
19
19
  export type CenteredShellAlignProp = "start" | "center";
20
20
  /**
21
21
  * ErrorSurface shell contract — WHERE the exception surface lives, not how it looks.
22
- *
23
- * `"application"` (403 / 404): the failure happened INSIDE the authenticated app, so the surface is
24
- * the page BODY of the `AppShell` the route already renders. It never reconstructs nav chrome — a
25
- * component cannot manufacture the sidebar/topbar/user menu, which are consumer-owned; it renders
26
- * as `AppShell`'s children (usually inside a `PageContainer`) so the shell is PRESERVED and the
27
- * user is never stranded chrome-less.
28
- *
29
- * `"system"` (500 / 503): the app itself failed — session and nav data may be gone — so the surface
30
- * owns the whole page and renders package-owned viewport-centred geometry
31
- * (`CenteredShell align="center"`), with no consumer `min-h-dvh` / flex CSS at 1440 / 1024 / 390.
22
+ * `"application"` (403 / 404): the failure happened INSIDE the authenticated app, so the surface
23
+ * is the page BODY of the `AppShell` the route already renders.
32
24
  */
33
25
  export type ErrorSurfaceModeProp = "application" | "system";
34
26
  /**
35
27
  * The HTTP status an ErrorSurface presents. Deliberately closed to the five exception pages every
36
- * app ships (RFC 9110 §15.5.1 / §15.5.4 / §15.5.5 / §15.6.1 / §15.6.4); it drives the default icon,
37
- * tone and the recommended `mode`. A number, never a string — it is the numeric status, and it is
38
- * rendered with tabular figures.
39
- *
40
- * `400` (gh#301) is the malformed-request page: a route reached with parameters the server refuses
41
- * to interpret (a bad id, a missing launch parameter, a hand-edited query string). It is an
42
- * `application` failure like 403/404 — the app itself is healthy, so the shell stays and the
43
- * viewer navigates away from it.
28
+ * app ships (RFC 9110 §15.5.1 / §15.5.4 / §15.5.5 / §15.6.1 / §15.6.4); it drives the default
29
+ * icon, tone and the recommended `mode`.
44
30
  */
45
- export type ErrorSurfaceStatusProp = 400 | 403 | 404 | 500 | 503;
31
+ /** Five curated statuses carry their own glyph and tone; any other HTTP status renders with a class-based fallback (4xx warning, 5xx destructive). */
32
+ export type ErrorSurfaceStatusProp = 400 | 403 | 404 | 500 | 503 | (number & {});
46
33
  /**
47
34
  * AuthShell named flow preset — the page MEASURE contract for a canonical hosted-identity flow
48
35
  * (card max-width plus the desktop and mobile page gutters), owned by component tokens.
@@ -54,7 +41,6 @@ export type ErrorSurfaceStatusProp = 400 | 403 | 404 | 500 | 503;
54
41
  * `"registration"` is the 360px sign-up measure — start-aligned like `"login"`, because a
55
42
  * registration card is the tallest surface in the set and a centred tall card overflows above the
56
43
  * scroll origin, and the only preset with a footer-clearance knob of its own.
57
- * Orthogonal to AuthShell's `variant` (which owns control density and heading size) — combine them.
58
44
  */
59
45
  export type AuthShellPresetProp = "default" | "login" | "registration" | "device-authorization" | "context-selection" | "account-recovery";
60
46
  /** Shared gap between layout children; components may document subsets. */
@@ -64,18 +50,10 @@ export type TableDensityProp = Exclude<DensityProp, "default">;
64
50
  /**
65
51
  * CenteredShell named page preset — the token-owned SHELL geometry of a whole page shape.
66
52
  * `"default"` keeps the shell's own box (and emits no attribute at all, so it can match no rule).
67
- * `"public-landing"` is the PUBLIC marketing / product landing contract: one content measure
68
- * shared by the header bar, the centred column and the footer, the section rhythm between page
69
- * sections, the flat (elevation-free) public-surface chrome and the hero heading tier — all owned
70
- * by `--centered-shell-landing-*` knobs so the landing COMPOSITION (hero, nav, sections, footer —
71
- * each of which fails the Framework-Component Test) needs no page-local CSS.
72
53
  */
73
54
  export type CenteredShellPresetProp = "default" | "public-landing";
74
55
  /**
75
- * Axis of a rule / track / group the shared inline↔block vocabulary (gh#308).
76
- * `"horizontal"` (the default everywhere) runs along the INLINE axis, `"vertical"` along the
77
- * BLOCK axis, so both flip correctly under `dir="rtl"` with no per-component rule. Promoted out
78
- * of the inline `"horizontal" | "vertical"` unions each component file used to spell for itself,
79
- * so `orientation` means one thing across Separator, Steps, RadioGroup and Toolbar.
56
+ * `"horizontal"` (the default everywhere) runs along the INLINE axis, `"vertical"` along the BLOCK
57
+ * axis, so both flip correctly under `dir="rtl"` with no per-component rule.
80
58
  */
81
59
  export type OrientationProp = "horizontal" | "vertical";
@@ -52,7 +52,8 @@ export type OnClickProp = React.MouseEventHandler<HTMLButtonElement>;
52
52
  export type AsChildProp = boolean;
53
53
  /**
54
54
  * An explicit layout dimension (NOT the `SizeProp` control-height tier). A `number` is treated as
55
- * px; a `string` is any CSS length (`"32rem"`, `"90vw"`, `"50%"`). Used for Sheet `width`, Form
56
- * `labelWidth`/`controlWidth` — values that are freeform lengths, not the xs|sm|md|lg tier.
55
+ * px; a `string` is any CSS length (`"32rem"`, `"90vw"`, `"50%"`).
57
56
  */
58
57
  export type WidthProp = number | string;
58
+ /** How a control sizes on the inline axis: fill its column, or hug its label. */
59
+ export type ControlWidthProp = "full" | "auto";
@@ -1,6 +1,4 @@
1
- /*
2
- * ALERT — inset, gaps, dismiss offset; colors via data-tone + semantic tokens.
3
- */
1
+
4
2
 
5
3
  @layer components {
6
4
  [data-slot="alert"] {
@@ -47,11 +45,6 @@
47
45
  color: hsl(var(--foreground));
48
46
  }
49
47
 
50
- /* variant="banner" (the <Banner> export) — the full-bleed page/shell attention strip.
51
- * ONLY geometry changes here: every tone colour rule above applies unchanged, and the
52
- * strip keeps its tone-coloured hairline on the block-end edge alone. All values are
53
- * --banner-* component tokens (src/tokens/components/banner.css), so a consumer never
54
- * writes CSS to place a banner and a service retunes the strip once via theme. */
55
48
  [data-slot="alert"][data-variant="banner"] {
56
49
  border-radius: var(--banner-radius);
57
50
  border-block-start-width: 0;
@@ -65,7 +58,6 @@
65
58
  padding-inline-end: calc(var(--alert-space-inset) + var(--space-8));
66
59
  }
67
60
 
68
- /* The banner strip reserves dismiss clearance from ITS inline inset, not the card's. */
69
61
  [data-slot="alert"][data-variant="banner"][data-dismissible] {
70
62
  padding-inline-end: calc(var(--banner-space-inset-inline) + var(--space-8));
71
63
  }
@@ -99,11 +91,6 @@
99
91
  color: hsl(var(--info));
100
92
  }
101
93
 
102
- /* Body stacks text vertically (title over description). The ≥sm two-column
103
- * layout exists ONLY to push an actions slot to the end — gate it on
104
- * :has(alert-actions), otherwise bare AlertTitle + AlertDescription (the
105
- * catalog example, AlertQueryError, the docs page) split into meaningless
106
- * side-by-side columns (godxjp-ui#106). */
107
94
  [data-slot="alert-body"] {
108
95
  display: flex;
109
96
  flex: 1;
@@ -138,8 +125,6 @@
138
125
  line-height: 1;
139
126
  }
140
127
 
141
- /* Title text reads the AA-strong status colour (darker than the fill) so the coloured heading
142
- * clears WCAG AA on the soft alert tint; the icon keeps the brighter role colour. */
143
128
  [data-slot="alert-title"][data-tone="destructive"] {
144
129
  color: hsl(var(--text-error));
145
130
  }
@@ -178,10 +163,6 @@
178
163
  }
179
164
  }
180
165
 
181
- /* Dismiss ✕ — BOTH halves of the affordance now live here. The rest opacity was a hard 0.7 in
182
- * this file while its `:hover` companion sat on the component as `hover:opacity-100`, so the
183
- * quiet-at-rest chrome (rule #44) was split across two files and a theme could reach neither.
184
- * The hover rule is load-bearing: without it the ✕ stays at the rest alpha forever. */
185
166
  [data-slot="alert-dismiss"] {
186
167
  position: absolute;
187
168
  top: var(--alert-dismiss-space-offset);
@@ -200,17 +181,11 @@
200
181
  block-size: var(--alert-dismiss-icon-size);
201
182
  }
202
183
 
203
- /* AlertContent fills the body column but stays shrinkable, so a long unbroken token truncates
204
- * instead of widening the alert. Was `min-w-0 flex-1` on the component. */
205
184
  [data-slot="alert-content"] {
206
185
  min-inline-size: 0;
207
186
  flex: 1 1 0%;
208
187
  }
209
188
 
210
- /* TOAST (Sonner) — the status glyph handed to sonner through its all-or-nothing `icons` config
211
- * prop. Sonner sizes the `[data-icon]` WRAPPER to a fixed 16px box and only sets `flex-shrink`
212
- * + margins on the svg inside it, so the glyph's own size is ours to own; the token is what
213
- * lets a consumer retune it without re-declaring all five icons. */
214
189
  .ui-toast-icon {
215
190
  inline-size: var(--toast-icon-size);
216
191
  block-size: var(--toast-icon-size);
@@ -243,9 +218,6 @@
243
218
  border-radius: var(--skeleton-radius);
244
219
  }
245
220
 
246
- /* Drop the self-frame inside a flush CardContent so the Card supplies the single
247
- * border — mirrors `.ui-data-table-surface` so the skeleton placeholder and the
248
- * real DataTable it swaps for sit identically (no nested double border). */
249
221
  [data-slot="card-content"][data-flush] .ui-skeleton-table {
250
222
  border-width: 0;
251
223
  border-radius: 0;
@@ -278,7 +250,6 @@
278
250
  border-radius: var(--skeleton-radius);
279
251
  padding: var(--skeleton-card-inset);
280
252
 
281
- /* Skeleton bars, named for what they stand in for rather than their size (#319). */
282
253
  .ui-skeleton-line {
283
254
  block-size: var(--skeleton-block-height);
284
255
  }
@@ -296,8 +267,6 @@
296
267
  inline-size: var(--skeleton-label-width);
297
268
  }
298
269
 
299
- /* Fills its grid track but stops at a readable measure — both are load-bearing: without the
300
- * fill it would size to content, without the cap it would run the full track. */
301
270
  .ui-skeleton-detail-value {
302
271
  block-size: var(--skeleton-block-height);
303
272
  inline-size: 100%;