@adia-ai/web-components 0.6.33 → 0.6.35

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 (391) hide show
  1. package/CHANGELOG.md +64 -0
  2. package/color/index.js +1 -1
  3. package/components/accordion/accordion-item.yaml +2 -2
  4. package/components/accordion/accordion.css +2 -2
  5. package/components/accordion/accordion.js +1 -1
  6. package/components/action-list/action-item.yaml +2 -2
  7. package/components/action-list/action-list.css +2 -2
  8. package/components/action-list/action-list.js +1 -1
  9. package/components/agent-artifact/{class.js → agent-artifact.class.js} +1 -1
  10. package/components/agent-artifact/agent-artifact.css +31 -31
  11. package/components/agent-artifact/agent-artifact.js +1 -1
  12. package/components/agent-feedback-bar/agent-feedback-bar.css +10 -10
  13. package/components/agent-feedback-bar/agent-feedback-bar.js +1 -1
  14. package/components/agent-questions/agent-questions.css +57 -57
  15. package/components/agent-questions/agent-questions.js +1 -1
  16. package/components/agent-reasoning/agent-reasoning.css +62 -62
  17. package/components/agent-reasoning/agent-reasoning.js +1 -1
  18. package/components/agent-suggestions/agent-suggestions.css +4 -4
  19. package/components/agent-suggestions/agent-suggestions.js +1 -1
  20. package/components/agent-trace/agent-trace.css +53 -53
  21. package/components/alert/alert.a2ui.json +64 -1
  22. package/components/alert/{class.js → alert.class.js} +189 -2
  23. package/components/alert/alert.css +119 -41
  24. package/components/alert/alert.d.ts +14 -0
  25. package/components/alert/alert.js +1 -1
  26. package/components/alert/alert.test.js +184 -0
  27. package/components/alert/alert.yaml +114 -1
  28. package/components/avatar/avatar-group.yaml +2 -2
  29. package/components/avatar/avatar.css +27 -27
  30. package/components/avatar/avatar.js +1 -1
  31. package/components/badge/badge.css +27 -27
  32. package/components/badge/badge.js +1 -1
  33. package/components/block/block.css +16 -16
  34. package/components/block/block.js +1 -1
  35. package/components/breadcrumb/breadcrumb.css +23 -23
  36. package/components/breadcrumb/breadcrumb.js +1 -1
  37. package/components/button/button.css +101 -91
  38. package/components/button/button.js +1 -1
  39. package/components/calendar-grid/calendar-grid.a2ui.json +146 -0
  40. package/components/calendar-grid/calendar-grid.class.js +326 -0
  41. package/components/calendar-grid/calendar-grid.css +246 -0
  42. package/components/calendar-grid/calendar-grid.d.ts +41 -0
  43. package/components/calendar-grid/calendar-grid.js +17 -0
  44. package/components/calendar-grid/calendar-grid.yaml +136 -0
  45. package/components/calendar-picker/calendar-picker.css +139 -139
  46. package/components/calendar-picker/calendar-picker.js +1 -1
  47. package/components/canvas/canvas.css +12 -12
  48. package/components/card/card.css +83 -83
  49. package/components/card/card.js +1 -1
  50. package/components/chart/chart.css +224 -224
  51. package/components/chart/chart.js +1 -1
  52. package/components/chart-legend/chart-legend.css +26 -26
  53. package/components/chart-legend/chart-legend.js +1 -1
  54. package/components/chat-thread/chat-input.a2ui.json +1 -1
  55. package/components/chat-thread/chat-input.js +6 -1
  56. package/components/chat-thread/chat-input.yaml +4 -1
  57. package/components/chat-thread/chat-thread.js +1 -1
  58. package/components/check/check.css +40 -40
  59. package/components/check/check.js +1 -1
  60. package/components/code/code.css +125 -125
  61. package/components/code/code.js +1 -1
  62. package/components/col/col.css +15 -15
  63. package/components/col/col.js +1 -1
  64. package/components/color-input/color-input.js +1 -1
  65. package/components/color-picker/color-picker.css +55 -55
  66. package/components/color-picker/color-picker.js +1 -1
  67. package/components/combobox/combobox.a2ui.json +363 -0
  68. package/components/combobox/combobox.class.js +861 -0
  69. package/components/combobox/combobox.css +244 -0
  70. package/components/combobox/combobox.d.ts +113 -0
  71. package/components/combobox/combobox.examples.md +59 -0
  72. package/components/combobox/combobox.js +17 -0
  73. package/components/combobox/combobox.test.js +181 -0
  74. package/components/combobox/combobox.yaml +369 -0
  75. package/components/command/command.css +90 -90
  76. package/components/command/command.js +1 -1
  77. package/components/date-range-picker/date-range-picker.a2ui.json +300 -0
  78. package/components/date-range-picker/date-range-picker.class.js +791 -0
  79. package/components/date-range-picker/date-range-picker.css +224 -0
  80. package/components/date-range-picker/date-range-picker.d.ts +82 -0
  81. package/components/date-range-picker/date-range-picker.examples.md +37 -0
  82. package/components/date-range-picker/date-range-picker.js +17 -0
  83. package/components/date-range-picker/date-range-picker.test.js +387 -0
  84. package/components/date-range-picker/date-range-picker.yaml +285 -0
  85. package/components/datetime-picker/datetime-picker.a2ui.json +334 -0
  86. package/components/datetime-picker/datetime-picker.class.js +706 -0
  87. package/components/datetime-picker/datetime-picker.css +150 -0
  88. package/components/datetime-picker/datetime-picker.d.ts +86 -0
  89. package/components/datetime-picker/datetime-picker.examples.md +46 -0
  90. package/components/datetime-picker/datetime-picker.js +17 -0
  91. package/components/datetime-picker/datetime-picker.test.js +454 -0
  92. package/components/datetime-picker/datetime-picker.yaml +332 -0
  93. package/components/demo-toggle/demo-toggle.css +27 -27
  94. package/components/demo-toggle/demo-toggle.js +1 -1
  95. package/components/description-list/description-list.css +18 -18
  96. package/components/description-list/description-list.js +1 -1
  97. package/components/divider/divider.css +24 -24
  98. package/components/divider/divider.js +1 -1
  99. package/components/drawer/drawer.js +1 -1
  100. package/components/embed/embed.css +6 -6
  101. package/components/embed/embed.js +1 -1
  102. package/components/empty-state/empty-state.css +27 -27
  103. package/components/empty-state/empty-state.js +1 -1
  104. package/components/feed/feed.css +12 -12
  105. package/components/feed/feed.js +1 -1
  106. package/components/field/field.css +28 -28
  107. package/components/field/field.js +1 -1
  108. package/components/field/field.test.js +1 -1
  109. package/components/fields/fields.css +5 -5
  110. package/components/fields/fields.js +1 -1
  111. package/components/grid/grid.css +5 -5
  112. package/components/grid/grid.js +1 -1
  113. package/components/heatmap/heatmap.css +63 -63
  114. package/components/heatmap/heatmap.js +1 -1
  115. package/components/icon/icon.css +12 -12
  116. package/components/icon/icon.js +1 -1
  117. package/components/image/image.css +14 -14
  118. package/components/image/image.js +1 -1
  119. package/components/index.js +11 -0
  120. package/components/inline-message/inline-message.a2ui.json +143 -0
  121. package/components/inline-message/inline-message.class.js +169 -0
  122. package/components/inline-message/inline-message.css +75 -0
  123. package/components/inline-message/inline-message.d.ts +31 -0
  124. package/components/inline-message/inline-message.examples.md +19 -0
  125. package/components/inline-message/inline-message.js +17 -0
  126. package/components/inline-message/inline-message.test.js +203 -0
  127. package/components/inline-message/inline-message.yaml +205 -0
  128. package/components/input/input.css +67 -67
  129. package/components/input/input.js +1 -1
  130. package/components/input/input.yaml +5 -4
  131. package/components/inspector/inspector.css +6 -6
  132. package/components/inspector/inspector.js +1 -1
  133. package/components/integration-card/integration-card.a2ui.json +268 -0
  134. package/components/integration-card/integration-card.class.js +410 -0
  135. package/components/integration-card/integration-card.css +169 -0
  136. package/components/integration-card/integration-card.d.ts +63 -0
  137. package/components/integration-card/integration-card.examples.md +41 -0
  138. package/components/integration-card/integration-card.js +17 -0
  139. package/components/integration-card/integration-card.test.js +306 -0
  140. package/components/integration-card/integration-card.yaml +280 -0
  141. package/components/kbd/kbd.css +32 -32
  142. package/components/kbd/kbd.js +1 -1
  143. package/components/link/link.css +12 -12
  144. package/components/link/link.js +1 -1
  145. package/components/list/list-item.yaml +2 -2
  146. package/components/list/list.css +8 -8
  147. package/components/list/list.js +1 -1
  148. package/components/list-window/list-window.a2ui.json +277 -0
  149. package/components/list-window/list-window.class.js +688 -0
  150. package/components/list-window/list-window.css +124 -0
  151. package/components/list-window/list-window.d.ts +84 -0
  152. package/components/list-window/list-window.examples.md +73 -0
  153. package/components/list-window/list-window.js +17 -0
  154. package/components/list-window/list-window.test.js +303 -0
  155. package/components/list-window/list-window.yaml +270 -0
  156. package/components/loading-overlay/loading-overlay.a2ui.json +176 -0
  157. package/components/loading-overlay/loading-overlay.class.js +203 -0
  158. package/components/loading-overlay/loading-overlay.css +81 -0
  159. package/components/loading-overlay/loading-overlay.d.ts +24 -0
  160. package/components/loading-overlay/loading-overlay.examples.md +50 -0
  161. package/components/loading-overlay/loading-overlay.js +17 -0
  162. package/components/loading-overlay/loading-overlay.test.js +257 -0
  163. package/components/loading-overlay/loading-overlay.yaml +260 -0
  164. package/components/menu/menu-divider.yaml +1 -1
  165. package/components/menu/menu-item.yaml +1 -1
  166. package/components/menu/menu.a2ui.json +3 -0
  167. package/components/menu/menu.css +8 -8
  168. package/components/menu/menu.js +1 -1
  169. package/components/menu/menu.yaml +7 -0
  170. package/components/modal/{class.js → modal.class.js} +12 -1
  171. package/components/modal/modal.css +54 -44
  172. package/components/modal/modal.js +1 -1
  173. package/components/nav/nav.css +40 -40
  174. package/components/nav/nav.js +1 -1
  175. package/components/nav-group/nav-group.css +52 -52
  176. package/components/nav-group/nav-group.js +1 -1
  177. package/components/nav-item/nav-item.css +44 -44
  178. package/components/nav-item/nav-item.js +1 -1
  179. package/components/noodles/noodles.css +31 -31
  180. package/components/noodles/noodles.js +1 -1
  181. package/components/option-card/option-card.css +69 -69
  182. package/components/option-card/option-card.js +1 -1
  183. package/components/otp-input/otp-input.css +30 -30
  184. package/components/otp-input/otp-input.js +1 -1
  185. package/components/page/page.css +18 -18
  186. package/components/page/page.js +1 -1
  187. package/components/pagination/pagination.css +61 -61
  188. package/components/pagination/pagination.js +1 -1
  189. package/components/pane/pane.css +57 -57
  190. package/components/pane/pane.js +1 -1
  191. package/components/pipeline-status/pipeline-status.css +65 -65
  192. package/components/pipeline-status/pipeline-status.js +1 -1
  193. package/components/popover/popover.a2ui.json +8 -1
  194. package/components/popover/popover.css +17 -17
  195. package/components/popover/popover.js +1 -1
  196. package/components/popover/popover.yaml +14 -1
  197. package/components/progress/progress.css +23 -23
  198. package/components/progress/progress.js +1 -1
  199. package/components/progress-row/progress-row.css +17 -17
  200. package/components/progress-row/progress-row.js +1 -1
  201. package/components/radio/radio.css +39 -39
  202. package/components/radio/radio.js +1 -1
  203. package/components/range/range.css +55 -55
  204. package/components/range/range.js +1 -1
  205. package/components/rating/rating.css +28 -28
  206. package/components/rating/rating.js +1 -1
  207. package/components/richtext/richtext.css +133 -133
  208. package/components/richtext/richtext.js +1 -1
  209. package/components/row/row.css +19 -19
  210. package/components/row/row.js +1 -1
  211. package/components/search/search.css +5 -5
  212. package/components/search/search.js +1 -1
  213. package/components/segment/segment.css +24 -24
  214. package/components/segment/segment.js +1 -1
  215. package/components/segmented/segmented.css +25 -25
  216. package/components/segmented/segmented.js +1 -1
  217. package/components/select/select.a2ui.json +58 -4
  218. package/components/select/{class.js → select.class.js} +415 -6
  219. package/components/select/select.css +242 -84
  220. package/components/select/select.d.ts +31 -1
  221. package/components/select/select.js +1 -1
  222. package/components/select/select.test.js +202 -0
  223. package/components/select/select.yaml +126 -5
  224. package/components/skeleton/skeleton.css +14 -14
  225. package/components/skeleton/skeleton.js +1 -1
  226. package/components/slider/slider.css +46 -46
  227. package/components/slider/slider.js +1 -1
  228. package/components/spinner/spinner.a2ui.json +198 -0
  229. package/components/spinner/spinner.class.js +99 -0
  230. package/components/spinner/spinner.css +221 -0
  231. package/components/spinner/spinner.d.ts +26 -0
  232. package/components/spinner/spinner.examples.md +26 -0
  233. package/components/spinner/spinner.js +17 -0
  234. package/components/spinner/spinner.test.js +272 -0
  235. package/components/spinner/spinner.yaml +238 -0
  236. package/components/stack/stack.css +11 -11
  237. package/components/stack/stack.js +1 -1
  238. package/components/stat/stat.css +25 -25
  239. package/components/step-progress/step-progress.css +20 -20
  240. package/components/step-progress/step-progress.js +1 -1
  241. package/components/stepper/stepper-item.yaml +1 -1
  242. package/components/stepper/stepper.css +29 -29
  243. package/components/stepper/stepper.js +1 -1
  244. package/components/stream/stream.css +12 -12
  245. package/components/stream/stream.js +1 -1
  246. package/components/swatch/swatch.css +68 -68
  247. package/components/swatch/swatch.js +1 -1
  248. package/components/swiper/swiper.css +57 -57
  249. package/components/swiper/swiper.js +1 -1
  250. package/components/switch/switch.css +52 -52
  251. package/components/switch/switch.js +1 -1
  252. package/components/table/table.css +163 -163
  253. package/components/table/table.js +1 -1
  254. package/components/table-toolbar/{class.js → table-toolbar.class.js} +1 -1
  255. package/components/table-toolbar/table-toolbar.css +32 -32
  256. package/components/table-toolbar/table-toolbar.js +1 -1
  257. package/components/tabs/tab.yaml +2 -2
  258. package/components/tabs/tabs.css +51 -51
  259. package/components/tabs/tabs.js +1 -1
  260. package/components/tag/tag.css +48 -48
  261. package/components/tag/tag.js +1 -1
  262. package/components/tags-input/tags-input.a2ui.json +337 -0
  263. package/components/tags-input/tags-input.class.js +776 -0
  264. package/components/tags-input/tags-input.css +201 -0
  265. package/components/tags-input/tags-input.d.ts +120 -0
  266. package/components/tags-input/tags-input.examples.md +92 -0
  267. package/components/tags-input/tags-input.js +17 -0
  268. package/components/tags-input/tags-input.test.js +368 -0
  269. package/components/tags-input/tags-input.yaml +367 -0
  270. package/components/text/text.css +44 -44
  271. package/components/text/text.js +1 -1
  272. package/components/textarea/textarea.a2ui.json +1 -1
  273. package/components/textarea/textarea.css +46 -46
  274. package/components/textarea/textarea.js +1 -1
  275. package/components/textarea/textarea.yaml +11 -8
  276. package/components/time-picker/time-picker.a2ui.json +267 -0
  277. package/components/time-picker/time-picker.class.js +693 -0
  278. package/components/time-picker/time-picker.css +122 -0
  279. package/components/time-picker/time-picker.d.ts +75 -0
  280. package/components/time-picker/time-picker.examples.md +35 -0
  281. package/components/time-picker/time-picker.js +17 -0
  282. package/components/time-picker/time-picker.test.js +287 -0
  283. package/components/time-picker/time-picker.yaml +256 -0
  284. package/components/timeline/timeline-item.yaml +2 -2
  285. package/components/timeline/{class.js → timeline.class.js} +1 -1
  286. package/components/timeline/timeline.css +50 -50
  287. package/components/timeline/timeline.js +1 -1
  288. package/components/toast/toast.css +58 -58
  289. package/components/toast/toast.js +1 -1
  290. package/components/toggle-group/toggle-group.css +6 -6
  291. package/components/toggle-group/toggle-group.js +1 -1
  292. package/components/toggle-group/toggle-option.yaml +1 -1
  293. package/components/toggle-scheme/toggle-scheme.css +2 -2
  294. package/components/toggle-scheme/toggle-scheme.js +1 -1
  295. package/components/toolbar/toolbar-group.yaml +1 -1
  296. package/components/toolbar/toolbar.css +17 -17
  297. package/components/toolbar/toolbar.js +1 -1
  298. package/components/tooltip/tooltip.css +2 -2
  299. package/components/tooltip/tooltip.js +1 -1
  300. package/components/tree/tree-item.yaml +1 -1
  301. package/components/tree/tree.css +37 -37
  302. package/components/tree/tree.js +1 -1
  303. package/components/upload/upload.css +49 -49
  304. package/components/upload/upload.js +1 -1
  305. package/dist/web-components.min.css +1 -1
  306. package/dist/web-components.min.js +146 -87
  307. package/package.json +3 -3
  308. package/styles/components.css +11 -0
  309. /package/components/accordion/{class.js → accordion.class.js} +0 -0
  310. /package/components/action-list/{class.js → action-list.class.js} +0 -0
  311. /package/components/agent-feedback-bar/{class.js → agent-feedback-bar.class.js} +0 -0
  312. /package/components/agent-questions/{class.js → agent-questions.class.js} +0 -0
  313. /package/components/agent-reasoning/{class.js → agent-reasoning.class.js} +0 -0
  314. /package/components/agent-suggestions/{class.js → agent-suggestions.class.js} +0 -0
  315. /package/components/avatar/{class.js → avatar.class.js} +0 -0
  316. /package/components/badge/{class.js → badge.class.js} +0 -0
  317. /package/components/block/{class.js → block.class.js} +0 -0
  318. /package/components/breadcrumb/{class.js → breadcrumb.class.js} +0 -0
  319. /package/components/button/{class.js → button.class.js} +0 -0
  320. /package/components/calendar-picker/{class.js → calendar-picker.class.js} +0 -0
  321. /package/components/card/{class.js → card.class.js} +0 -0
  322. /package/components/chart/{class.js → chart.class.js} +0 -0
  323. /package/components/chart-legend/{class.js → chart-legend.class.js} +0 -0
  324. /package/components/chat-thread/{class.js → chat-thread.class.js} +0 -0
  325. /package/components/check/{class.js → check.class.js} +0 -0
  326. /package/components/code/{class.js → code.class.js} +0 -0
  327. /package/components/col/{class.js → col.class.js} +0 -0
  328. /package/components/color-input/{class.js → color-input.class.js} +0 -0
  329. /package/components/color-picker/{class.js → color-picker.class.js} +0 -0
  330. /package/components/command/{class.js → command.class.js} +0 -0
  331. /package/components/demo-toggle/{class.js → demo-toggle.class.js} +0 -0
  332. /package/components/description-list/{class.js → description-list.class.js} +0 -0
  333. /package/components/divider/{class.js → divider.class.js} +0 -0
  334. /package/components/drawer/{class.js → drawer.class.js} +0 -0
  335. /package/components/embed/{class.js → embed.class.js} +0 -0
  336. /package/components/empty-state/{class.js → empty-state.class.js} +0 -0
  337. /package/components/feed/{class.js → feed.class.js} +0 -0
  338. /package/components/field/{class.js → field.class.js} +0 -0
  339. /package/components/fields/{class.js → fields.class.js} +0 -0
  340. /package/components/grid/{class.js → grid.class.js} +0 -0
  341. /package/components/heatmap/{class.js → heatmap.class.js} +0 -0
  342. /package/components/icon/{class.js → icon.class.js} +0 -0
  343. /package/components/image/{class.js → image.class.js} +0 -0
  344. /package/components/input/{class.js → input.class.js} +0 -0
  345. /package/components/inspector/{class.js → inspector.class.js} +0 -0
  346. /package/components/kbd/{class.js → kbd.class.js} +0 -0
  347. /package/components/link/{class.js → link.class.js} +0 -0
  348. /package/components/list/{class.js → list.class.js} +0 -0
  349. /package/components/menu/{class.js → menu.class.js} +0 -0
  350. /package/components/nav/{class.js → nav.class.js} +0 -0
  351. /package/components/nav-group/{class.js → nav-group.class.js} +0 -0
  352. /package/components/nav-item/{class.js → nav-item.class.js} +0 -0
  353. /package/components/noodles/{class.js → noodles.class.js} +0 -0
  354. /package/components/option-card/{class.js → option-card.class.js} +0 -0
  355. /package/components/otp-input/{class.js → otp-input.class.js} +0 -0
  356. /package/components/page/{class.js → page.class.js} +0 -0
  357. /package/components/pagination/{class.js → pagination.class.js} +0 -0
  358. /package/components/pane/{class.js → pane.class.js} +0 -0
  359. /package/components/pipeline-status/{class.js → pipeline-status.class.js} +0 -0
  360. /package/components/popover/{class.js → popover.class.js} +0 -0
  361. /package/components/progress/{class.js → progress.class.js} +0 -0
  362. /package/components/progress-row/{class.js → progress-row.class.js} +0 -0
  363. /package/components/radio/{class.js → radio.class.js} +0 -0
  364. /package/components/range/{class.js → range.class.js} +0 -0
  365. /package/components/rating/{class.js → rating.class.js} +0 -0
  366. /package/components/richtext/{class.js → richtext.class.js} +0 -0
  367. /package/components/row/{class.js → row.class.js} +0 -0
  368. /package/components/search/{class.js → search.class.js} +0 -0
  369. /package/components/segment/{class.js → segment.class.js} +0 -0
  370. /package/components/segmented/{class.js → segmented.class.js} +0 -0
  371. /package/components/skeleton/{class.js → skeleton.class.js} +0 -0
  372. /package/components/slider/{class.js → slider.class.js} +0 -0
  373. /package/components/stack/{class.js → stack.class.js} +0 -0
  374. /package/components/step-progress/{class.js → step-progress.class.js} +0 -0
  375. /package/components/stepper/{class.js → stepper.class.js} +0 -0
  376. /package/components/stream/{class.js → stream.class.js} +0 -0
  377. /package/components/swatch/{class.js → swatch.class.js} +0 -0
  378. /package/components/swiper/{class.js → swiper.class.js} +0 -0
  379. /package/components/switch/{class.js → switch.class.js} +0 -0
  380. /package/components/table/{class.js → table.class.js} +0 -0
  381. /package/components/tabs/{class.js → tabs.class.js} +0 -0
  382. /package/components/tag/{class.js → tag.class.js} +0 -0
  383. /package/components/text/{class.js → text.class.js} +0 -0
  384. /package/components/textarea/{class.js → textarea.class.js} +0 -0
  385. /package/components/toast/{class.js → toast.class.js} +0 -0
  386. /package/components/toggle-group/{class.js → toggle-group.class.js} +0 -0
  387. /package/components/toggle-scheme/{class.js → toggle-scheme.class.js} +0 -0
  388. /package/components/toolbar/{class.js → toolbar.class.js} +0 -0
  389. /package/components/tooltip/{class.js → tooltip.class.js} +0 -0
  390. /package/components/tree/{class.js → tree.class.js} +0 -0
  391. /package/components/upload/{class.js → upload.class.js} +0 -0
package/components/time-picker/time-picker.yaml ADDED
@@ -0,0 +1,256 @@
1
+ $schema: ../../../../scripts/schemas/component.yaml.schema.json
2
+ name: UITimePicker
3
+ tag: time-picker-ui
4
+ status: stable
5
+ component: TimePicker
6
+ category: input
7
+ version: 1
8
+ description: >-
9
+ Time-of-day picker with discrete segments (hour, minute, optional second,
10
+ optional AM/PM). Each segment follows the WAI-ARIA Spinbutton pattern with
11
+ Arrow-key increment/decrement, Page Up/Down for larger jumps, Home/End for
12
+ segment min/max, and Tab to move between segments. Form-associated input
13
+ emitting ISO 8601 time string ("HH:mm" or "HH:mm:ss") via change events.
14
+ Per ADR-0025 no native form controls — segments are contenteditable spans
15
+ inside a custom host. SPEC-043.
16
+ props:
17
+ name:
18
+ description: Form field name for FormData submission
19
+ type: string
20
+ default: ''
21
+ value:
22
+ description: Current time value as ISO 8601 ("HH:mm" or "HH:mm:ss"). Empty when no value selected.
23
+ type: string
24
+ default: ''
25
+ min:
26
+ description: Earliest selectable time as ISO 8601. Empty disables the constraint.
27
+ type: string
28
+ default: ''
29
+ reflect: true
30
+ max:
31
+ description: Latest selectable time as ISO 8601. Empty disables the constraint.
32
+ type: string
33
+ default: ''
34
+ reflect: true
35
+ step:
36
+ description: Per-Arrow-keypress increment in seconds. 60 = minute precision (default), 900 = 15-minute, 1 = second precision.
37
+ type: number
38
+ default: 60
39
+ reflect: true
40
+ precision:
41
+ description: Whether the seconds segment is exposed. `minute` (default) hides seconds; `second` adds the seconds segment + separator.
42
+ type: string
43
+ default: minute
44
+ enum:
45
+ - minute
46
+ - second
47
+ reflect: true
48
+ hourcycle:
49
+ description: |
50
+ Hour cycle. Empty (default) derives from the document locale — most
51
+ en-* locales resolve to `h23`. `h12` forces a 12-hour cycle with an
52
+ AM/PM (meridiem) segment; `h23` forces 24-hour cycle.
53
+ type: string
54
+ default: ''
55
+ enum:
56
+ - ''
57
+ - h12
58
+ - h23
59
+ reflect: true
60
+ attribute: hour-cycle
61
+ placeholder:
62
+ description: Per-segment placeholder text shown when a segment is empty. Defaults to "--".
63
+ type: string
64
+ default: '--'
65
+ disabled:
66
+ description: Disables interaction; dims the control
67
+ type: boolean
68
+ default: false
69
+ reflect: true
70
+ readonly:
71
+ description: Prevents editing while keeping the field focusable. Segments stay focusable for inspection.
72
+ type: boolean
73
+ default: false
74
+ reflect: true
75
+ required:
76
+ description: Marks the field as required for form validation. Sets aria-required.
77
+ type: boolean
78
+ default: false
79
+ reflect: true
80
+ locale:
81
+ description: BCP-47 locale tag used to derive hour-cycle when `hour-cycle` is empty. Falls back to `<html lang>` then to browser default.
82
+ type: string
83
+ default: ''
84
+ events:
85
+ change:
86
+ description: Fired when the value commits (segment edit completes via Arrow / Tab / blur).
87
+ detail:
88
+ value:
89
+ type: string
90
+ description: Current value as ISO 8601 ("HH:mm" or "HH:mm:ss").
91
+ segment:
92
+ type: string
93
+ description: Which segment commit fired the event (`hour` | `minute` | `second` | `meridiem`).
94
+ input:
95
+ description: Fired on intermediate segment edits before commit.
96
+ detail:
97
+ value:
98
+ type: string
99
+ description: In-flight value as ISO 8601.
100
+ invalid:
101
+ description: Fired when a constraint is violated (min/max range, parse error).
102
+ detail:
103
+ value:
104
+ type: string
105
+ description: Value that failed validation.
106
+ reason:
107
+ type: string
108
+ description: Why it failed (`min` | `max` | `parse`).
109
+ enum:
110
+ - min
111
+ - max
112
+ - parse
113
+ slots:
114
+ prefix:
115
+ description: Leading content (e.g. an `<icon-ui name="clock">`); sits before the hour segment.
116
+ suffix:
117
+ description: Trailing content (e.g. a timezone label); sits after the last segment.
118
+ states:
119
+ - name: idle
120
+ description: Default, ready for interaction.
121
+ - name: editing
122
+ description: One segment is the focus target.
123
+ attribute: editing
124
+ - name: disabled
125
+ description: Non-interactive; dimmed.
126
+ attribute: disabled
127
+ - name: focused
128
+ description: Keyboard focus ring on the host.
129
+ selector: :focus-within
130
+ traits:
131
+ - focusable
132
+ tokens:
133
+ --time-picker-bg:
134
+ description: Host background color.
135
+ --time-picker-fg:
136
+ description: Host text color.
137
+ --time-picker-fg-muted:
138
+ description: Muted text color (empty placeholder + separator).
139
+ --time-picker-border:
140
+ description: Host border color.
141
+ --time-picker-radius:
142
+ description: Host border radius.
143
+ --time-picker-px:
144
+ description: Host inline padding.
145
+ --time-picker-py:
146
+ description: Host block padding.
147
+ --time-picker-segment-bg-focus:
148
+ description: Focused segment background.
149
+ --time-picker-segment-fg-focus:
150
+ description: Focused segment text color.
151
+ --time-picker-separator-fg:
152
+ description: Separator (`:`) text color.
153
+ requiredIcons: []
154
+ a2ui:
155
+ rules:
156
+ - >-
157
+ `<time-picker-ui>` is the canonical standalone time-of-day picker.
158
+ Per ADR-0025 NEVER wrap a native `<input type="time">` — segments
159
+ are contenteditable spans + ElementInternals provides form
160
+ participation.
161
+ - >-
162
+ `value` MUST be ISO 8601 time `HH:mm` or `HH:mm:ss` (24-hour),
163
+ or empty string. Localized formats (e.g. "9:30 AM") are not
164
+ accepted; display formatting is derived from `hour-cycle`
165
+ regardless of how the value is stored.
166
+ - >-
167
+ `step` is in seconds. 60 = minute precision (default); 900 =
168
+ 15-minute precision (meeting-time common); 1 = second precision
169
+ (requires `precision="second"`).
170
+ - >-
171
+ `precision="second"` exposes the seconds segment AND emits
172
+ `HH:mm:ss`. Default `precision="minute"` emits `HH:mm`.
173
+ - >-
174
+ `hour-cycle` overrides locale-derived behavior. Set explicitly
175
+ (`h12` / `h23`) when the surface needs a specific cycle (cron
176
+ editors, log queries, system surfaces).
177
+ - >-
178
+ For datetime selection use `<datetime-picker-ui>` (SPEC-038) —
179
+ it composes this primitive as its time pane.
180
+ anti_patterns:
181
+ - wrong: |
182
+ {"component": "TimePicker", "value": "9:30 AM"}
183
+ why: |
184
+ Localized format is not a valid `value`. The contract requires ISO
185
+ 8601 time (`HH:mm` or `HH:mm:ss`, 24-hour). The display format is
186
+ derived from `hourCycle` regardless of how the value is stored.
187
+ fix: |
188
+ {"component": "TimePicker", "value": "09:30"}
189
+ - wrong: |
190
+ {"component": "TimePicker", "value": "2026-05-24T09:30"}
191
+ why: |
192
+ Datetime string is invalid for TimePicker — the date portion is
193
+ not accepted. For datetime selection use the DatetimePicker
194
+ component.
195
+ fix: |
196
+ {"component": "DatetimePicker", "value": "2026-05-24T09:30"}
197
+ - wrong: |
198
+ {"component": "TimePicker", "children": [
199
+ {"component": "Input", "type": "time"}
200
+ ]}
201
+ why: |
202
+ Nesting a native time input violates ADR-0025 and bypasses
203
+ ElementInternals form participation.
204
+ fix: |
205
+ {"component": "TimePicker", "name": "field-name"}
206
+ examples:
207
+ - name: meeting-time-15min-step
208
+ description: Time-of-day picker with 15-minute step and business-hours bounds.
209
+ a2ui: |
210
+ [
211
+ {"id": "root", "component": "Field", "label": "Start time",
212
+ "children": ["t"]},
213
+ {"id": "t", "component": "TimePicker",
214
+ "name": "start-time", "value": "09:30",
215
+ "min": "08:00", "max": "18:00", "step": 900}
216
+ ]
217
+ - name: log-cursor-second-precision
218
+ description: Time picker with second precision for a log-cursor query.
219
+ a2ui: |
220
+ [
221
+ {"id": "root", "component": "Field", "label": "Cursor",
222
+ "children": ["t"]},
223
+ {"id": "t", "component": "TimePicker",
224
+ "name": "cursor", "precision": "second", "step": 1,
225
+ "value": "14:30:45"}
226
+ ]
227
+ - name: alarm-12h-cycle
228
+ description: Forced 12-hour cycle with AM/PM segment for an alarm picker.
229
+ a2ui: |
230
+ [
231
+ {"id": "root", "component": "Field", "label": "Alarm",
232
+ "children": ["t"]},
233
+ {"id": "t", "component": "TimePicker",
234
+ "name": "alarm", "hourCycle": "h12", "value": "07:00"}
235
+ ]
236
+ keywords:
237
+ - time
238
+ - timepicker
239
+ - time-picker
240
+ - clock
241
+ - hour
242
+ - minute
243
+ - spinbutton
244
+ synonyms:
245
+ tags:
246
+ - TimeInput
247
+ - TimePicker
248
+ time:
249
+ - clock
250
+ - hour
251
+ - minute
252
+ - alarm
253
+ related:
254
+ - CalendarPicker
255
+ - Field
256
+ - Input
package/components/timeline/timeline-item.yaml CHANGED
@@ -1,9 +1,9 @@
1
1
  # Edit this file; run `npm run build:components` to regenerate a2ui.json.
2
2
  #
3
3
  # §176 (v0.5.5): authored to close the §175 baseline-orphan class. The
4
- # component already existed as a sibling class in the parent's class.js
4
+ # component already existed as a sibling class in the parent's timeline.class.js
5
5
  # + was registered alongside the parent (e.g. UIList + UIListItem both
6
- # from list/class.js). The catalog just lacked its own entry. With the
6
+ # from list/list.class.js). The catalog just lacked its own entry. With the
7
7
  # §172 sibling-yaml scanner, this file gets picked up next to the parent
8
8
  # yaml.
9
9
 
package/components/timeline/{class.js → timeline.class.js} RENAMED
@@ -88,7 +88,7 @@ export class UITimelineItem extends UIElement {
88
88
  };
89
89
 
90
90
  // §205 (v0.5.7): dynamic chevron icons stamped on expanded-state ternary
91
- // (class.js:167). Per FEEDBACK-16 §1 + §209 slot-11 ternary-walker discovery.
91
+ // (timeline.class.js:167). Per FEEDBACK-16 §1 + §209 slot-11 ternary-walker discovery.
92
92
  // Note: `this.icon` consumer-supplied — not declared here.
93
93
  static requiredIcons = ['caret-down', 'caret-right'];
94
94
 
package/components/timeline/timeline.css CHANGED
@@ -2,7 +2,7 @@
2
2
  TIMELINE-N + TIMELINE-ITEM-N
3
3
 
4
4
  Grid-based layout with three columns:
5
- [marker] var(--timeline-marker-w) [content] 1fr [aside] auto
5
+ [marker] var(--timeline-marker-w, var(--timeline-marker-w-default)) [content] 1fr [aside] auto
6
6
 
7
7
  Items are subgrid of the container, so their dots/labels/aside
8
8
  align perfectly to a single vertical axis regardless of size.
@@ -18,77 +18,77 @@
18
18
  @scope (timeline-ui) {
19
19
  :where(:scope) {
20
20
  /* Grid */
21
- --timeline-marker-w: 1.25rem;
22
- --timeline-gap-col: var(--a-space-2);
23
- --timeline-gap-row: var(--a-space-3);
21
+ --timeline-marker-w-default: 1.25rem;
22
+ --timeline-gap-col-default: var(--a-space-2);
23
+ --timeline-gap-row-default: var(--a-space-3);
24
24
 
25
25
  /* Dot */
26
- --timeline-dot-size: 0.625rem;
27
- --timeline-dot-bg: var(--a-border);
28
- --timeline-dot-bg-active: var(--a-accent-bg);
29
- --timeline-dot-bg-done: var(--a-success-bg);
30
- --timeline-dot-bg-error: var(--a-danger-bg);
31
- --timeline-dot-bg-warning: var(--a-warning-bg);
26
+ --timeline-dot-size-default: 0.625rem;
27
+ --timeline-dot-bg-default: var(--a-border);
28
+ --timeline-dot-bg-active-default: var(--a-accent-bg);
29
+ --timeline-dot-bg-done-default: var(--a-success-bg);
30
+ --timeline-dot-bg-error-default: var(--a-danger-bg);
31
+ --timeline-dot-bg-warning-default: var(--a-warning-bg);
32
32
 
33
33
  /* Sub-dot (outcomes) */
34
- --timeline-subdot-size: 4px;
35
- --timeline-subdot-bg: var(--a-fg-subtle);
34
+ --timeline-subdot-size-default: 4px;
35
+ --timeline-subdot-bg-default: var(--a-fg-subtle);
36
36
 
37
37
  /* Connector line */
38
- --timeline-line-size: 2px;
39
- --timeline-line-fg: var(--a-border-subtle);
40
- --timeline-line-fg-done: var(--a-border);
38
+ --timeline-line-size-default: 2px;
39
+ --timeline-line-fg-default: var(--a-border-subtle);
40
+ --timeline-line-fg-done-default: var(--a-border);
41
41
 
42
42
  /* Icon (replaces dot) */
43
- --timeline-icon-size: 1rem;
44
- --timeline-icon-bg: var(--a-bg-muted);
45
- --timeline-icon-fg: var(--a-fg-subtle);
46
- --timeline-icon-bg-success: var(--a-success-muted);
47
- --timeline-icon-fg-success: var(--a-success-strong);
48
- --timeline-icon-bg-accent: var(--a-accent-muted);
49
- --timeline-icon-fg-accent: var(--a-accent);
50
- --timeline-icon-bg-warning: var(--a-warning-muted);
51
- --timeline-icon-fg-warning: var(--a-warning);
52
- --timeline-icon-bg-danger: var(--a-danger-muted);
53
- --timeline-icon-fg-danger: var(--a-danger-strong);
43
+ --timeline-icon-size-default: 1rem;
44
+ --timeline-icon-bg-default: var(--a-bg-muted);
45
+ --timeline-icon-fg-default: var(--a-fg-subtle);
46
+ --timeline-icon-bg-success-default: var(--a-success-muted);
47
+ --timeline-icon-fg-success-default: var(--a-success-strong);
48
+ --timeline-icon-bg-accent-default: var(--a-accent-muted);
49
+ --timeline-icon-fg-accent-default: var(--a-accent);
50
+ --timeline-icon-bg-warning-default: var(--a-warning-muted);
51
+ --timeline-icon-fg-warning-default: var(--a-warning);
52
+ --timeline-icon-bg-danger-default: var(--a-danger-muted);
53
+ --timeline-icon-fg-danger-default: var(--a-danger-strong);
54
54
 
55
55
  /* Typography */
56
- --timeline-label-weight: var(--a-weight-medium);
57
- --timeline-label-size: var(--a-ui-size);
58
- --timeline-label-fg: var(--a-fg);
59
- --timeline-label-fg-muted: var(--a-fg-muted);
60
- --timeline-desc-fg: var(--a-fg-subtle);
61
- --timeline-desc-size: var(--a-ui-sm);
62
- --timeline-time-fg: var(--a-fg-muted);
63
- --timeline-time-size: var(--a-ui-sm);
64
- --timeline-outcome-fg: var(--a-fg-muted);
56
+ --timeline-label-weight-default: var(--a-weight-medium);
57
+ --timeline-label-size-default: var(--a-ui-size);
58
+ --timeline-label-fg-default: var(--a-fg);
59
+ --timeline-label-fg-muted-default: var(--a-fg-muted);
60
+ --timeline-desc-fg-default: var(--a-fg-subtle);
61
+ --timeline-desc-size-default: var(--a-ui-sm);
62
+ --timeline-time-fg-default: var(--a-fg-muted);
63
+ --timeline-time-size-default: var(--a-ui-sm);
64
+ --timeline-outcome-fg-default: var(--a-fg-muted);
65
65
 
66
66
  /* Motion */
67
- --timeline-duration: var(--a-duration-fast);
68
- --timeline-easing: var(--a-easing-out);
69
- --timeline-spin-duration: 0.8s;
70
- --timeline-pulse-duration: 2s;
67
+ --timeline-duration-default: var(--a-duration-fast);
68
+ --timeline-easing-default: var(--a-easing-out);
69
+ --timeline-spin-duration-default: 0.8s;
70
+ --timeline-pulse-duration-default: 2s;
71
71
  }
72
72
 
73
73
  :scope {
74
74
  box-sizing: border-box;
75
75
  display: grid;
76
76
  grid-template-columns:
77
- [marker] var(--timeline-marker-w)
77
+ [marker] var(--timeline-marker-w, var(--timeline-marker-w-default))
78
78
  [content] 1fr
79
79
  [aside] auto;
80
- column-gap: var(--timeline-gap-col);
81
- row-gap: var(--timeline-gap-row);
80
+ column-gap: var(--timeline-gap-col, var(--timeline-gap-col-default));
81
+ row-gap: var(--timeline-gap-row, var(--timeline-gap-row-default));
82
82
  min-width: 0;
83
83
  }
84
84
 
85
85
  /* Compact variant (agent-reasoning + chat-adjacent) */
86
86
  :scope[size="sm"] {
87
- --timeline-marker-w: 1rem;
88
- --timeline-dot-size: 6px;
89
- --timeline-gap-row: var(--a-space-2);
90
- --timeline-label-size: var(--a-ui-sm);
91
- --timeline-label-weight: var(--a-weight-normal);
87
+ --timeline-marker-w-default: 1rem;
88
+ --timeline-dot-size-default: 6px;
89
+ --timeline-gap-row-default: var(--a-space-2);
90
+ --timeline-label-size-default: var(--a-ui-sm);
91
+ --timeline-label-weight-default: var(--a-weight-normal);
92
92
  }
93
93
 
94
94
  /* Horizontal layout — fall back to flow layout; drops subgrid.
@@ -396,7 +396,7 @@ timeline-ui[orientation="horizontal"] > timeline-item-ui {
396
396
  flex-direction: column;
397
397
  flex: 1 1 0;
398
398
  min-width: 0;
399
- padding-top: calc(var(--timeline-dot-size) + var(--timeline-gap-col));
399
+ padding-top: calc(var(--timeline-dot-size, var(--timeline-dot-size-default)) + var(--timeline-gap-col, var(--timeline-gap-col-default)));
400
400
  text-align: center;
401
401
  position: relative;
402
402
  }
@@ -409,11 +409,11 @@ timeline-ui[orientation="horizontal"] > timeline-item-ui::before {
409
409
 
410
410
  timeline-ui[orientation="horizontal"] > timeline-item-ui::after {
411
411
  left: 50%;
412
- top: calc(var(--timeline-dot-size) / 2 - var(--timeline-line-size) / 2);
412
+ top: calc(var(--timeline-dot-size, var(--timeline-dot-size-default)) / 2 - var(--timeline-line-size, var(--timeline-line-size-default)) / 2);
413
413
  right: -50%;
414
414
  bottom: auto;
415
415
  width: 100%;
416
- height: var(--timeline-line-size);
416
+ height: var(--timeline-line-size, var(--timeline-line-size-default));
417
417
  }
418
418
 
419
419
  timeline-ui[orientation="horizontal"] > timeline-item-ui > [slot="label"],
package/components/timeline/timeline.js CHANGED
@@ -10,7 +10,7 @@
10
10
  */
11
11
 
12
12
  import { defineIfFree } from '../../core/register.js';
13
- import { UITimeline, UITimelineItem } from './class.js';
13
+ import { UITimeline, UITimelineItem } from './timeline.class.js';
14
14
 
15
15
  defineIfFree('timeline-ui', UITimeline);
16
16
  defineIfFree('timeline-item-ui', UITimelineItem);
package/components/toast/toast.css CHANGED
@@ -7,14 +7,14 @@
7
7
  attribute toggling inside `@scope`. Selectors moved out as plain
8
8
  `toast-ui[data-…]` rules. See docs/BROWSER-COMPAT.md §3a. */
9
9
  toast-ui[data-open] {
10
- transition: transform var(--toast-duration) var(--toast-easing),
11
- opacity var(--toast-duration) var(--toast-easing);
10
+ transition: transform var(--toast-duration, var(--toast-duration-default)) var(--toast-easing, var(--toast-easing-default)),
11
+ opacity var(--toast-duration, var(--toast-duration-default)) var(--toast-easing, var(--toast-easing-default));
12
12
  transform: translateY(0);
13
13
  opacity: 1;
14
14
  }
15
15
  toast-ui[data-closing] {
16
- transition: transform var(--toast-duration) var(--toast-easing),
17
- opacity var(--toast-duration) var(--toast-easing);
16
+ transition: transform var(--toast-duration, var(--toast-duration-default)) var(--toast-easing, var(--toast-easing-default)),
17
+ opacity var(--toast-duration, var(--toast-duration-default)) var(--toast-easing, var(--toast-easing-default));
18
18
  opacity: 0;
19
19
  }
20
20
  toast-ui[data-closing],
@@ -29,30 +29,30 @@ toast-ui[data-closing][position="top-left"] {
29
29
 
30
30
  @scope (toast-ui) {
31
31
  :where(:scope) {
32
- --toast-bg: var(--a-bg-subtle);
33
- --toast-fg: var(--a-fg);
34
- --toast-radius: var(--a-radius-md);
35
- --toast-shadow: var(--a-shadow-lg);
36
- --toast-duration: var(--a-duration);
37
- --toast-easing: var(--a-easing-out);
38
- --toast-pad-x: var(--a-space-4);
39
- --toast-pad-y: var(--a-space-3);
40
- --toast-border: var(--a-border-subtle);
41
- --toast-max-width: 24rem;
42
- --toast-gap: var(--a-space-3);
32
+ --toast-bg-default: var(--a-bg-subtle);
33
+ --toast-fg-default: var(--a-fg);
34
+ --toast-radius-default: var(--a-radius-md);
35
+ --toast-shadow-default: var(--a-shadow-lg);
36
+ --toast-duration-default: var(--a-duration);
37
+ --toast-easing-default: var(--a-easing-out);
38
+ --toast-pad-x-default: var(--a-space-4);
39
+ --toast-pad-y-default: var(--a-space-3);
40
+ --toast-border-default: var(--a-border-subtle);
41
+ --toast-max-width-default: 24rem;
42
+ --toast-gap-default: var(--a-space-3);
43
43
 
44
44
  /* ── Typography ── */
45
- --toast-font: var(--a-font-family);
46
- --toast-size: var(--a-ui-md);
45
+ --toast-font-default: var(--a-font-family);
46
+ --toast-size-default: var(--a-ui-md);
47
47
 
48
48
  /* ── Position offset ── */
49
- --toast-offset: var(--a-space-4);
49
+ --toast-offset-default: var(--a-space-4);
50
50
 
51
51
  /* ── Close button ── */
52
- --toast-close-duration: var(--a-duration-fast);
53
- --toast-close-easing: var(--a-easing);
54
- --toast-focus-ring: var(--a-focus-ring);
55
- --toast-focus-radius: var(--a-radius-sm);
52
+ --toast-close-duration-default: var(--a-duration-fast);
53
+ --toast-close-easing-default: var(--a-easing);
54
+ --toast-focus-ring-default: var(--a-focus-ring);
55
+ --toast-focus-radius-default: var(--a-radius-sm);
56
56
  }
57
57
 
58
58
  :scope {
@@ -61,16 +61,16 @@ toast-ui[data-closing][position="top-left"] {
61
61
  z-index: 9999;
62
62
  display: flex;
63
63
  align-items: center;
64
- gap: var(--toast-gap);
65
- max-width: var(--toast-max-width);
66
- padding: var(--toast-pad-y) var(--toast-pad-x);
67
- background: var(--toast-bg);
68
- color: var(--toast-fg);
69
- font-family: var(--toast-font);
70
- font-size: var(--toast-size);
71
- border: 1px solid var(--toast-border);
72
- border-radius: var(--toast-radius);
73
- box-shadow: var(--toast-shadow);
64
+ gap: var(--toast-gap, var(--toast-gap-default));
65
+ max-width: var(--toast-max-width, var(--toast-max-width-default));
66
+ padding: var(--toast-pad-y, var(--toast-pad-y-default)) var(--toast-pad-x, var(--toast-pad-x-default));
67
+ background: var(--toast-bg, var(--toast-bg-default));
68
+ color: var(--toast-fg, var(--toast-fg-default));
69
+ font-family: var(--toast-font, var(--toast-font-default));
70
+ font-size: var(--toast-size, var(--toast-size-default));
71
+ border: 1px solid var(--toast-border, var(--toast-border-default));
72
+ border-radius: var(--toast-radius, var(--toast-radius-default));
73
+ box-shadow: var(--toast-shadow, var(--toast-shadow-default));
74
74
  opacity: 0;
75
75
  pointer-events: auto;
76
76
  }
@@ -79,25 +79,25 @@ toast-ui[data-closing][position="top-left"] {
79
79
 
80
80
  :where(:scope),
81
81
  :where(:scope[position="bottom-right"]) {
82
- bottom: var(--toast-offset);
83
- right: var(--toast-offset);
82
+ bottom: var(--toast-offset, var(--toast-offset-default));
83
+ right: var(--toast-offset, var(--toast-offset-default));
84
84
  transform: translateY(1rem);
85
85
  }
86
86
  :where(:scope[position="bottom-left"]) {
87
- bottom: var(--toast-offset);
88
- left: var(--toast-offset);
87
+ bottom: var(--toast-offset, var(--toast-offset-default));
88
+ left: var(--toast-offset, var(--toast-offset-default));
89
89
  right: auto;
90
90
  transform: translateY(1rem);
91
91
  }
92
92
  :where(:scope[position="top-right"]) {
93
- top: var(--toast-offset);
94
- right: var(--toast-offset);
93
+ top: var(--toast-offset, var(--toast-offset-default));
94
+ right: var(--toast-offset, var(--toast-offset-default));
95
95
  bottom: auto;
96
96
  transform: translateY(-1rem);
97
97
  }
98
98
  :where(:scope[position="top-left"]) {
99
- top: var(--toast-offset);
100
- left: var(--toast-offset);
99
+ top: var(--toast-offset, var(--toast-offset-default));
100
+ left: var(--toast-offset, var(--toast-offset-default));
101
101
  right: auto;
102
102
  bottom: auto;
103
103
  transform: translateY(-1rem);
@@ -116,24 +116,24 @@ toast-ui[data-closing][position="top-left"] {
116
116
 
117
117
  :where(:scope),
118
118
  :where(:scope[variant="info"]) {
119
- --toast-bg: var(--a-info-muted);
120
- --toast-fg: var(--a-info-text);
121
- --toast-border: var(--a-info-border-subtle);
119
+ --toast-bg-default: var(--a-info-muted);
120
+ --toast-fg-default: var(--a-info-text);
121
+ --toast-border-default: var(--a-info-border-subtle);
122
122
  }
123
123
  :where(:scope[variant="success"]) {
124
- --toast-bg: var(--a-success-muted);
125
- --toast-fg: var(--a-success-text);
126
- --toast-border: var(--a-success-border-subtle);
124
+ --toast-bg-default: var(--a-success-muted);
125
+ --toast-fg-default: var(--a-success-text);
126
+ --toast-border-default: var(--a-success-border-subtle);
127
127
  }
128
128
  :where(:scope[variant="warning"]) {
129
- --toast-bg: var(--a-warning-muted);
130
- --toast-fg: var(--a-warning-text);
131
- --toast-border: var(--a-warning-border-subtle);
129
+ --toast-bg-default: var(--a-warning-muted);
130
+ --toast-fg-default: var(--a-warning-text);
131
+ --toast-border-default: var(--a-warning-border-subtle);
132
132
  }
133
133
  :where(:scope[variant="danger"]) {
134
- --toast-bg: var(--a-danger-muted);
135
- --toast-fg: var(--a-danger-text);
136
- --toast-border: var(--a-danger-border-subtle);
134
+ --toast-bg-default: var(--a-danger-muted);
135
+ --toast-fg-default: var(--a-danger-text);
136
+ --toast-border-default: var(--a-danger-border-subtle);
137
137
  }
138
138
 
139
139
  /* `primary` is the accent-filled variant — solid bg + on-accent text
@@ -143,9 +143,9 @@ toast-ui[data-closing][position="top-left"] {
143
143
  primary; border picks up `--a-accent-border-subtle` since there's
144
144
  no `--a-primary-border-subtle` token. */
145
145
  :where(:scope[variant="primary"]) {
146
- --toast-bg: var(--a-primary-bg);
147
- --toast-fg: var(--a-primary-fg);
148
- --toast-border: var(--a-accent-border-subtle);
146
+ --toast-bg-default: var(--a-primary-bg);
147
+ --toast-fg-default: var(--a-primary-fg);
148
+ --toast-border-default: var(--a-accent-border-subtle);
149
149
  }
150
150
 
151
151
  /* `muted` and `neutral` are semantic aliases of the base canvas
@@ -155,9 +155,9 @@ toast-ui[data-closing][position="top-left"] {
155
155
  saved" without success-green). Mirrors alert-ui's pattern. */
156
156
  :where(:scope[variant="muted"]),
157
157
  :where(:scope[variant="neutral"]) {
158
- --toast-bg: var(--a-bg-subtle);
159
- --toast-fg: var(--a-fg);
160
- --toast-border: var(--a-border-subtle);
158
+ --toast-bg-default: var(--a-bg-subtle);
159
+ --toast-fg-default: var(--a-fg);
160
+ --toast-border-default: var(--a-border-subtle);
161
161
  }
162
162
 
163
163
  /* ── Message slot ── */
package/components/toast/toast.js CHANGED
@@ -10,7 +10,7 @@
10
10
  */
11
11
 
12
12
  import { defineIfFree } from '../../core/register.js';
13
- import { UIToast } from './class.js';
13
+ import { UIToast } from './toast.class.js';
14
14
 
15
15
  defineIfFree('toast-ui', UIToast);
16
16
 
package/components/toggle-group/toggle-group.css CHANGED
@@ -10,18 +10,18 @@ toggle-option-ui:not([disabled]):hover {
10
10
  @scope (toggle-group-ui) {
11
11
  :where(:scope) {
12
12
  /* ── Tokens ── */
13
- --toggle-group-border-width: 1px;
14
- --toggle-group-border-color: var(--a-ui-border);
15
- --toggle-group-radius: var(--a-radius);
16
- --toggle-group-height: var(--a-size);
13
+ --toggle-group-border-width-default: 1px;
14
+ --toggle-group-border-color-default: var(--a-ui-border);
15
+ --toggle-group-radius-default: var(--a-radius);
16
+ --toggle-group-height-default: var(--a-size);
17
17
  text-align: start; /* §text-align-reset — blocks inheritance from centered ancestors */
18
18
  }
19
19
 
20
20
  :scope {
21
21
  box-sizing: border-box;
22
22
  display: inline-flex;
23
- border: var(--toggle-group-border-width) solid var(--toggle-group-border-color);
24
- border-radius: var(--toggle-group-radius);
23
+ border: var(--toggle-group-border-width, var(--toggle-group-border-width-default)) solid var(--toggle-group-border-color, var(--toggle-group-border-color-default));
24
+ border-radius: var(--toggle-group-radius, var(--toggle-group-radius-default));
25
25
  overflow: hidden;
26
26
  }
27
27
  }