@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/agent-reasoning/agent-reasoning.css CHANGED
@@ -1,47 +1,47 @@
1
1
  @scope (agent-reasoning-ui) {
2
2
  :where(:scope) {
3
3
  /* Grid — same columns as timeline-ui so they align via subgrid */
4
- --agent-reasoning-marker-w: 1rem;
5
- --agent-reasoning-gap-col: var(--a-space-2);
6
- --agent-reasoning-gap-row: var(--a-space-2);
4
+ --agent-reasoning-marker-w-default: 1rem;
5
+ --agent-reasoning-gap-col-default: var(--a-space-2);
6
+ --agent-reasoning-gap-row-default: var(--a-space-2);
7
7
 
8
8
  /* Typography */
9
- --agent-reasoning-font: var(--a-ui-sm);
10
- --agent-reasoning-weight-heading: var(--a-weight-medium);
9
+ --agent-reasoning-font-default: var(--a-ui-sm);
10
+ --agent-reasoning-weight-heading-default: var(--a-weight-medium);
11
11
 
12
12
  /* Colors */
13
- --agent-reasoning-fg: var(--a-fg);
14
- --agent-reasoning-fg-muted: var(--a-fg-muted);
15
- --agent-reasoning-fg-subtle: var(--a-fg-subtle);
16
- --agent-reasoning-border: var(--a-border-subtle);
17
- --agent-reasoning-spinner-track: var(--a-border-subtle);
18
- --agent-reasoning-spinner-head: var(--a-accent-bg);
19
- --agent-reasoning-iter-bg: var(--a-bg-subtle);
20
- --agent-reasoning-iter-bg-active: var(--a-bg-muted);
21
- --agent-reasoning-iter-border: var(--a-border-subtle);
13
+ --agent-reasoning-fg-default: var(--a-fg);
14
+ --agent-reasoning-fg-muted-default: var(--a-fg-muted);
15
+ --agent-reasoning-fg-subtle-default: var(--a-fg-subtle);
16
+ --agent-reasoning-border-default: var(--a-border-subtle);
17
+ --agent-reasoning-spinner-track-default: var(--a-border-subtle);
18
+ --agent-reasoning-spinner-head-default: var(--a-accent-bg);
19
+ --agent-reasoning-iter-bg-default: var(--a-bg-subtle);
20
+ --agent-reasoning-iter-bg-active-default: var(--a-bg-muted);
21
+ --agent-reasoning-iter-border-default: var(--a-border-subtle);
22
22
 
23
23
  /* Sizes */
24
- --agent-reasoning-marker-size: var(--a-icon-size);
25
- --agent-reasoning-radius: var(--a-radius);
26
- --agent-reasoning-iter-padding: var(--a-space-3);
24
+ --agent-reasoning-marker-size-default: var(--a-icon-size);
25
+ --agent-reasoning-radius-default: var(--a-radius);
26
+ --agent-reasoning-iter-padding-default: var(--a-space-3);
27
27
 
28
28
  /* Motion */
29
- --agent-reasoning-duration: var(--a-duration-fast);
30
- --agent-reasoning-easing: var(--a-easing-out);
31
- --agent-reasoning-spin-duration: 0.8s;
29
+ --agent-reasoning-duration-default: var(--a-duration-fast);
30
+ --agent-reasoning-easing-default: var(--a-easing-out);
31
+ --agent-reasoning-spin-duration-default: 0.8s;
32
32
  }
33
33
 
34
34
  :scope {
35
35
  display: grid;
36
36
  grid-template-columns:
37
- [marker] var(--agent-reasoning-marker-w)
37
+ [marker] var(--agent-reasoning-marker-w, var(--agent-reasoning-marker-w-default))
38
38
  [content] 1fr
39
39
  [aside] auto;
40
- column-gap: var(--agent-reasoning-gap-col);
41
- row-gap: var(--agent-reasoning-gap-row);
40
+ column-gap: var(--agent-reasoning-gap-col, var(--agent-reasoning-gap-col-default));
41
+ row-gap: var(--agent-reasoning-gap-row, var(--agent-reasoning-gap-row-default));
42
42
  min-width: 0;
43
- font-size: var(--agent-reasoning-font);
44
- color: var(--agent-reasoning-fg);
43
+ font-size: var(--agent-reasoning-font, var(--agent-reasoning-font-default));
44
+ color: var(--agent-reasoning-fg, var(--agent-reasoning-fg-default));
45
45
  }
46
46
 
47
47
  /* ═══════ Summary row ═══════ */
@@ -54,13 +54,13 @@
54
54
  cursor: pointer;
55
55
  user-select: none;
56
56
  padding-bottom: var(--a-space-1);
57
- color: var(--agent-reasoning-fg-muted);
57
+ color: var(--agent-reasoning-fg-muted, var(--agent-reasoning-fg-muted-default));
58
58
  border-radius: var(--a-radius-sm);
59
- transition: color var(--agent-reasoning-duration) var(--agent-reasoning-easing);
59
+ transition: color var(--agent-reasoning-duration, var(--agent-reasoning-duration-default)) var(--agent-reasoning-easing, var(--agent-reasoning-easing-default));
60
60
  }
61
61
 
62
62
  [data-reasoning-summary]:hover {
63
- color: var(--agent-reasoning-fg);
63
+ color: var(--agent-reasoning-fg, var(--agent-reasoning-fg-default));
64
64
  }
65
65
 
66
66
  [data-reasoning-summary]:focus-visible {
@@ -78,22 +78,22 @@
78
78
  }
79
79
 
80
80
  [data-reasoning-spinner] {
81
- width: var(--agent-reasoning-marker-size);
82
- height: var(--agent-reasoning-marker-size);
83
- border: 1.5px solid var(--agent-reasoning-spinner-track);
84
- border-top-color: var(--agent-reasoning-spinner-head);
81
+ width: var(--agent-reasoning-marker-size, var(--agent-reasoning-marker-size-default));
82
+ height: var(--agent-reasoning-marker-size, var(--agent-reasoning-marker-size-default));
83
+ border: 1.5px solid var(--agent-reasoning-spinner-track, var(--agent-reasoning-spinner-track-default));
84
+ border-top-color: var(--agent-reasoning-spinner-head, var(--agent-reasoning-spinner-head-default));
85
85
  border-radius: 50%;
86
- animation: _ar-spin var(--agent-reasoning-spin-duration) linear infinite;
86
+ animation: _ar-spin var(--agent-reasoning-spin-duration, var(--agent-reasoning-spin-duration-default)) linear infinite;
87
87
  box-sizing: border-box;
88
88
  }
89
89
 
90
90
  [data-reasoning-spinner][data-small] {
91
- width: calc(var(--agent-reasoning-marker-size) * 0.75);
92
- height: calc(var(--agent-reasoning-marker-size) * 0.75);
91
+ width: calc(var(--agent-reasoning-marker-size, var(--agent-reasoning-marker-size-default)) * 0.75);
92
+ height: calc(var(--agent-reasoning-marker-size, var(--agent-reasoning-marker-size-default)) * 0.75);
93
93
  }
94
94
 
95
95
  [data-reasoning-check] {
96
- --a-icon-size: var(--agent-reasoning-marker-size);
96
+ --a-icon-size: var(--agent-reasoning-marker-size, var(--agent-reasoning-marker-size-default));
97
97
  }
98
98
 
99
99
  [data-reasoning-summary] > [data-reasoning-label] {
@@ -110,7 +110,7 @@
110
110
  grid-row: 1;
111
111
  display: inline-flex;
112
112
  align-items: center;
113
- gap: var(--agent-reasoning-gap-col);
113
+ gap: var(--agent-reasoning-gap-col, var(--agent-reasoning-gap-col-default));
114
114
  white-space: nowrap;
115
115
  font-variant-numeric: tabular-nums;
116
116
  }
@@ -121,7 +121,7 @@
121
121
  display: grid;
122
122
  grid-template-columns: subgrid;
123
123
  grid-column: 1 / -1;
124
- row-gap: var(--agent-reasoning-gap-row);
124
+ row-gap: var(--agent-reasoning-gap-row, var(--agent-reasoning-gap-row-default));
125
125
  }
126
126
 
127
127
  [data-reasoning-body][hidden] { display: none; }
@@ -138,15 +138,15 @@
138
138
  grid-template-columns: subgrid;
139
139
  align-items: center;
140
140
  line-height: 1.5;
141
- color: var(--agent-reasoning-fg);
142
- animation: _ar-fade var(--agent-reasoning-duration) var(--agent-reasoning-easing);
141
+ color: var(--agent-reasoning-fg, var(--agent-reasoning-fg-default));
142
+ animation: _ar-fade var(--agent-reasoning-duration, var(--agent-reasoning-duration-default)) var(--agent-reasoning-easing, var(--agent-reasoning-easing-default));
143
143
  }
144
144
 
145
145
  [data-reasoning-thought]::before {
146
146
  content: '';
147
147
  grid-column: marker;
148
148
  height: 1px;
149
- background: var(--agent-reasoning-border);
149
+ background: var(--agent-reasoning-border, var(--agent-reasoning-border-default));
150
150
  align-self: center;
151
151
  width: 100%;
152
152
  }
@@ -165,24 +165,24 @@
165
165
  flex-direction: column;
166
166
  gap: var(--a-space-1);
167
167
  padding: var(--a-space-2) var(--a-space-3);
168
- border: 1px solid var(--agent-reasoning-border);
169
- border-radius: var(--agent-reasoning-radius);
170
- background: var(--agent-reasoning-iter-bg);
168
+ border: 1px solid var(--agent-reasoning-border, var(--agent-reasoning-border-default));
169
+ border-radius: var(--agent-reasoning-radius, var(--agent-reasoning-radius-default));
170
+ background: var(--agent-reasoning-iter-bg, var(--agent-reasoning-iter-bg-default));
171
171
  }
172
172
 
173
173
  [data-reasoning-plan-label] {
174
- font-size: var(--agent-reasoning-font);
175
- color: var(--agent-reasoning-fg-subtle);
174
+ font-size: var(--agent-reasoning-font, var(--agent-reasoning-font-default));
175
+ color: var(--agent-reasoning-fg-subtle, var(--agent-reasoning-fg-subtle-default));
176
176
  text-transform: uppercase;
177
177
  letter-spacing: 0.04em;
178
- font-weight: var(--agent-reasoning-weight-heading);
178
+ font-weight: var(--agent-reasoning-weight-heading, var(--agent-reasoning-weight-heading-default));
179
179
  }
180
180
 
181
181
  [data-reasoning-plan-list] {
182
182
  margin: 0;
183
183
  padding-inline-start: var(--a-space-5);
184
- font-size: var(--agent-reasoning-font);
185
- color: var(--agent-reasoning-fg);
184
+ font-size: var(--agent-reasoning-font, var(--agent-reasoning-font-default));
185
+ color: var(--agent-reasoning-fg, var(--agent-reasoning-fg-default));
186
186
  }
187
187
 
188
188
  [data-reasoning-plan-list] > li {
@@ -194,19 +194,19 @@
194
194
  [data-reasoning-iteration] {
195
195
  display: grid;
196
196
  grid-template-columns:
197
- [marker] var(--agent-reasoning-marker-w)
197
+ [marker] var(--agent-reasoning-marker-w, var(--agent-reasoning-marker-w-default))
198
198
  [content] 1fr
199
199
  [aside] auto;
200
- column-gap: var(--agent-reasoning-gap-col);
200
+ column-gap: var(--agent-reasoning-gap-col, var(--agent-reasoning-gap-col-default));
201
201
  row-gap: var(--a-space-2);
202
- padding: var(--agent-reasoning-iter-padding);
203
- border: 1px solid var(--agent-reasoning-iter-border);
204
- border-radius: var(--agent-reasoning-radius);
205
- background: var(--agent-reasoning-iter-bg);
202
+ padding: var(--agent-reasoning-iter-padding, var(--agent-reasoning-iter-padding-default));
203
+ border: 1px solid var(--agent-reasoning-iter-border, var(--agent-reasoning-iter-border-default));
204
+ border-radius: var(--agent-reasoning-radius, var(--agent-reasoning-radius-default));
205
+ background: var(--agent-reasoning-iter-bg, var(--agent-reasoning-iter-bg-default));
206
206
  }
207
207
 
208
208
  [data-reasoning-iteration][data-active] {
209
- background: var(--agent-reasoning-iter-bg-active);
209
+ background: var(--agent-reasoning-iter-bg-active, var(--agent-reasoning-iter-bg-active-default));
210
210
  }
211
211
 
212
212
  [data-reasoning-iter-header] {
@@ -214,7 +214,7 @@
214
214
  grid-template-columns: subgrid;
215
215
  grid-column: 1 / -1;
216
216
  align-items: center;
217
- color: var(--agent-reasoning-fg-muted);
217
+ color: var(--agent-reasoning-fg-muted, var(--agent-reasoning-fg-muted-default));
218
218
  }
219
219
 
220
220
  [data-reasoning-iter-header] > [data-reasoning-spinner],
@@ -227,8 +227,8 @@
227
227
  [data-reasoning-iter-n] {
228
228
  grid-column: content;
229
229
  font-variant-numeric: tabular-nums;
230
- color: var(--agent-reasoning-fg-subtle);
231
- font-weight: var(--agent-reasoning-weight-heading);
230
+ color: var(--agent-reasoning-fg-subtle, var(--agent-reasoning-fg-subtle-default));
231
+ font-weight: var(--agent-reasoning-weight-heading, var(--agent-reasoning-weight-heading-default));
232
232
  white-space: nowrap;
233
233
  }
234
234
 
@@ -236,7 +236,7 @@
236
236
  grid-column: content;
237
237
  justify-self: start;
238
238
  margin-inline-start: var(--a-space-2);
239
- color: var(--agent-reasoning-fg);
239
+ color: var(--agent-reasoning-fg, var(--agent-reasoning-fg-default));
240
240
  overflow: hidden;
241
241
  text-overflow: ellipsis;
242
242
  white-space: nowrap;
@@ -261,10 +261,10 @@
261
261
  }
262
262
 
263
263
  [data-reasoning-iter-summary] {
264
- color: var(--agent-reasoning-fg-muted);
264
+ color: var(--agent-reasoning-fg-muted, var(--agent-reasoning-fg-muted-default));
265
265
  font-variant-numeric: tabular-nums;
266
266
  white-space: nowrap;
267
- font-size: var(--agent-reasoning-font);
267
+ font-size: var(--agent-reasoning-font, var(--agent-reasoning-font-default));
268
268
  }
269
269
 
270
270
  /* ═══════ Animations ═══════ */
package/components/agent-reasoning/agent-reasoning.js CHANGED
@@ -10,7 +10,7 @@
10
10
  */
11
11
 
12
12
  import { defineIfFree } from '../../core/register.js';
13
- import { UIAgentReasoning } from './class.js';
13
+ import { UIAgentReasoning } from './agent-reasoning.class.js';
14
14
 
15
15
  defineIfFree('agent-reasoning-ui', UIAgentReasoning);
16
16
 
package/components/agent-suggestions/agent-suggestions.css CHANGED
@@ -1,14 +1,14 @@
1
1
  @scope (agent-suggestions-ui) {
2
2
  :where(:scope) {
3
- --agent-suggestions-gap: var(--a-space-2);
4
- --agent-suggestions-padding: var(--a-space-2);
3
+ --agent-suggestions-gap-default: var(--a-space-2);
4
+ --agent-suggestions-padding-default: var(--a-space-2);
5
5
  }
6
6
 
7
7
  :scope {
8
8
  display: flex;
9
9
  flex-wrap: wrap;
10
- gap: var(--agent-suggestions-gap);
11
- padding-block: var(--agent-suggestions-padding);
10
+ gap: var(--agent-suggestions-gap, var(--agent-suggestions-gap-default));
11
+ padding-block: var(--agent-suggestions-padding, var(--agent-suggestions-padding-default));
12
12
  }
13
13
 
14
14
  :scope[disabled] {
package/components/agent-suggestions/agent-suggestions.js CHANGED
@@ -10,7 +10,7 @@
10
10
  */
11
11
 
12
12
  import { defineIfFree } from '../../core/register.js';
13
- import { UIAgentSuggestions } from './class.js';
13
+ import { UIAgentSuggestions } from './agent-suggestions.class.js';
14
14
 
15
15
  defineIfFree('agent-suggestions-ui', UIAgentSuggestions);
16
16
 
package/components/agent-trace/agent-trace.css CHANGED
@@ -1,56 +1,56 @@
1
1
  @scope (agent-trace-ui) {
2
2
  :where(:scope) {
3
3
  /* ── Typography ── */
4
- --agent-trace-font: var(--a-ui-sm);
5
- --agent-trace-label-font: var(--a-ui-sm);
4
+ --agent-trace-font-default: var(--a-ui-sm);
5
+ --agent-trace-label-font-default: var(--a-ui-sm);
6
6
 
7
7
  /* ── Colors ── */
8
- --agent-trace-fg: var(--a-fg);
9
- --agent-trace-fg-muted: var(--a-fg-muted);
10
- --agent-trace-fg-subtle: var(--a-fg-subtle);
11
- --agent-trace-sep: var(--a-fg-subtle);
12
- --agent-trace-border: var(--a-border-subtle);
8
+ --agent-trace-fg-default: var(--a-fg);
9
+ --agent-trace-fg-muted-default: var(--a-fg-muted);
10
+ --agent-trace-fg-subtle-default: var(--a-fg-subtle);
11
+ --agent-trace-sep-default: var(--a-fg-subtle);
12
+ --agent-trace-border-default: var(--a-border-subtle);
13
13
 
14
14
  /* ── Layout ── */
15
- --agent-trace-pill-gap: var(--a-space-1);
16
- --agent-trace-inline-gap: var(--a-space-2);
17
- --agent-trace-block-gap: var(--a-space-3);
18
- --agent-trace-padding-y: var(--a-space-2);
15
+ --agent-trace-pill-gap-default: var(--a-space-1);
16
+ --agent-trace-inline-gap-default: var(--a-space-2);
17
+ --agent-trace-block-gap-default: var(--a-space-3);
18
+ --agent-trace-padding-y-default: var(--a-space-2);
19
19
  /* Component-intrinsic measurement; no --a-space-* equivalent */
20
- --agent-trace-dot-size: 6px;
20
+ --agent-trace-dot-size-default: 6px;
21
21
  /* STAGE column width — `max-content` lets the longest label set the
22
22
  track so multi-word labels ("Rows returned", "Query duration",
23
23
  "Drift vs. SFDC") stay on one line; the `7rem` floor stops the
24
24
  column from collapsing when only short labels are present. */
25
- --agent-trace-row-label-col: minmax(7rem, max-content);
25
+ --agent-trace-row-label-col-default: minmax(7rem, max-content);
26
26
  /* Shared across every detail DL so values tabulate at the same x. */
27
- --agent-trace-detail-label-col: 9rem;
27
+ --agent-trace-detail-label-col-default: 9rem;
28
28
 
29
29
  /* ── Motion ── */
30
- --agent-trace-chevron-dur: var(--a-duration-fast);
30
+ --agent-trace-chevron-dur-default: var(--a-duration-fast);
31
31
  }
32
32
 
33
33
  :scope {
34
34
  display: block;
35
- font-size: var(--agent-trace-font);
36
- color: var(--agent-trace-fg-muted);
35
+ font-size: var(--agent-trace-font, var(--agent-trace-font-default));
36
+ color: var(--agent-trace-fg-muted, var(--agent-trace-fg-muted-default));
37
37
  }
38
38
 
39
39
  [data-trace-root] {
40
- padding-block: var(--agent-trace-padding-y);
40
+ padding-block: var(--agent-trace-padding-y, var(--agent-trace-padding-y-default));
41
41
  }
42
42
 
43
43
  [data-trace-root] > summary {
44
44
  list-style: none;
45
45
  display: flex;
46
46
  align-items: center;
47
- gap: var(--agent-trace-inline-gap);
47
+ gap: var(--agent-trace-inline-gap, var(--agent-trace-inline-gap-default));
48
48
  cursor: pointer;
49
49
  white-space: nowrap;
50
50
  border-radius: var(--a-radius-sm);
51
51
  padding: var(--a-space-0-5) var(--a-space-1);
52
52
  margin: calc(var(--a-space-0-5) * -1) calc(var(--a-space-1) * -1);
53
- transition: background var(--agent-trace-chevron-dur);
53
+ transition: background var(--agent-trace-chevron-dur, var(--agent-trace-chevron-dur-default));
54
54
  }
55
55
 
56
56
  [data-trace-root] > summary:hover {
@@ -70,7 +70,7 @@
70
70
  min-width: 0;
71
71
  display: flex;
72
72
  align-items: center;
73
- gap: var(--agent-trace-inline-gap);
73
+ gap: var(--agent-trace-inline-gap, var(--agent-trace-inline-gap-default));
74
74
  overflow: hidden;
75
75
  text-overflow: ellipsis;
76
76
  font-variant-numeric: tabular-nums;
@@ -79,24 +79,24 @@
79
79
  [data-trace-pill] {
80
80
  display: inline-flex;
81
81
  align-items: center;
82
- gap: var(--agent-trace-pill-gap);
82
+ gap: var(--agent-trace-pill-gap, var(--agent-trace-pill-gap-default));
83
83
  white-space: nowrap;
84
84
  }
85
85
 
86
86
  [data-trace-dot] {
87
- --a-icon-size: var(--agent-trace-dot-size);
87
+ --a-icon-size: var(--agent-trace-dot-size, var(--agent-trace-dot-size-default));
88
88
  flex-shrink: 0;
89
89
  line-height: 0;
90
90
  }
91
91
 
92
92
  [data-trace-sep] {
93
- color: var(--agent-trace-sep);
93
+ color: var(--agent-trace-sep, var(--agent-trace-sep-default));
94
94
  margin-inline: 2px;
95
95
  }
96
96
 
97
97
  [data-trace-chevron] {
98
98
  flex-shrink: 0;
99
- transition: transform var(--agent-trace-chevron-dur);
99
+ transition: transform var(--agent-trace-chevron-dur, var(--agent-trace-chevron-dur-default));
100
100
  }
101
101
 
102
102
  [data-trace-root][open] [data-trace-chevron] {
@@ -106,8 +106,8 @@
106
106
  [data-trace-body] {
107
107
  display: flex;
108
108
  flex-direction: column;
109
- gap: var(--agent-trace-block-gap);
110
- margin-block-start: var(--agent-trace-block-gap);
109
+ gap: var(--agent-trace-block-gap, var(--agent-trace-block-gap-default));
110
+ margin-block-start: var(--agent-trace-block-gap, var(--agent-trace-block-gap-default));
111
111
  }
112
112
 
113
113
  /* Rows container — one grid, every row participates via subgrid.
@@ -128,14 +128,14 @@
128
128
  previously-empty right edge becomes the alignment edge for detail
129
129
  text. The whitespace between SCORE and DETAIL reads as breathing
130
130
  room between key-value and qualifier rather than dead air. */
131
- --trace-row-cols: var(--agent-trace-row-label-col) max-content 1fr;
131
+ --trace-row-cols: var(--agent-trace-row-label-col, var(--agent-trace-row-label-col-default)) max-content 1fr;
132
132
  display: grid;
133
133
  grid-template-columns: var(--trace-row-cols);
134
- column-gap: var(--agent-trace-block-gap);
134
+ column-gap: var(--agent-trace-block-gap, var(--agent-trace-block-gap-default));
135
135
  }
136
136
 
137
137
  [data-trace-rows][data-has-details] {
138
- --trace-row-cols: var(--agent-trace-row-label-col) max-content 1fr auto;
138
+ --trace-row-cols: var(--agent-trace-row-label-col, var(--agent-trace-row-label-col-default)) max-content 1fr auto;
139
139
  }
140
140
 
141
141
  /* Each row + the headers row + each <details>'s <summary> all use
@@ -148,7 +148,7 @@
148
148
  display: grid;
149
149
  grid-template-columns: subgrid;
150
150
  grid-column: 1 / -1;
151
- column-gap: var(--agent-trace-block-gap);
151
+ column-gap: var(--agent-trace-block-gap, var(--agent-trace-block-gap-default));
152
152
  align-items: baseline;
153
153
  min-width: 0;
154
154
  }
@@ -160,16 +160,16 @@
160
160
  /* Column headers — small caps with subtle underline */
161
161
  [data-trace-headers] {
162
162
  padding-block-end: var(--a-space-1);
163
- border-block-end: 1px solid var(--agent-trace-border);
163
+ border-block-end: 1px solid var(--agent-trace-border, var(--agent-trace-border-default));
164
164
  margin-block-end: var(--a-space-1);
165
165
  }
166
166
 
167
167
  [data-trace-header] {
168
- font-size: calc(var(--agent-trace-font) * 0.85);
168
+ font-size: calc(var(--agent-trace-font, var(--agent-trace-font-default)) * 0.85);
169
169
  text-transform: uppercase;
170
170
  letter-spacing: 0.06em;
171
171
  font-weight: var(--a-weight-medium);
172
- color: var(--agent-trace-fg-subtle);
172
+ color: var(--agent-trace-fg-subtle, var(--agent-trace-fg-subtle-default));
173
173
  }
174
174
 
175
175
  [data-trace-header]:nth-of-type(2),
@@ -204,13 +204,13 @@
204
204
  }
205
205
 
206
206
  [data-trace-label] {
207
- color: var(--agent-trace-fg-subtle);
207
+ color: var(--agent-trace-fg-subtle, var(--agent-trace-fg-subtle-default));
208
208
  }
209
209
 
210
210
  [data-trace-value] {
211
211
  font-variant-numeric: tabular-nums;
212
212
  text-align: right;
213
- color: var(--agent-trace-fg);
213
+ color: var(--agent-trace-fg, var(--agent-trace-fg-default));
214
214
  }
215
215
 
216
216
  [data-trace-aux] {
@@ -218,7 +218,7 @@
218
218
  of the row. Without this, the 1fr detail column left-aligns its
219
219
  content (typically a 1-3 word qualifier like "warehouse" or
220
220
  "reconciled") and the rest of the column reads as dead width. */
221
- color: var(--agent-trace-fg-muted);
221
+ color: var(--agent-trace-fg-muted, var(--agent-trace-fg-muted-default));
222
222
  overflow: hidden;
223
223
  text-overflow: ellipsis;
224
224
  white-space: nowrap;
@@ -231,7 +231,7 @@
231
231
  justify-self: end;
232
232
  align-self: center;
233
233
  transition: transform var(--a-duration-fast) var(--agent-trace-chevron-dur, var(--a-duration-fast));
234
- color: var(--agent-trace-fg-muted);
234
+ color: var(--agent-trace-fg-muted, var(--agent-trace-fg-muted-default));
235
235
  }
236
236
 
237
237
  details[data-trace-row][open] > summary > [data-trace-row-chevron] {
@@ -250,27 +250,27 @@
250
250
  [data-trace-row-body] {
251
251
  margin-block: var(--a-space-1) var(--a-space-2);
252
252
  margin-inline-start: var(--a-space-2);
253
- padding-inline-start: var(--agent-trace-block-gap);
254
- border-inline-start: 1px solid var(--agent-trace-border);
253
+ padding-inline-start: var(--agent-trace-block-gap, var(--agent-trace-block-gap-default));
254
+ border-inline-start: 1px solid var(--agent-trace-border, var(--agent-trace-border-default));
255
255
  }
256
256
 
257
257
  [data-trace-dl] {
258
258
  display: grid;
259
- grid-template-columns: var(--agent-trace-detail-label-col) 1fr;
260
- column-gap: var(--agent-trace-block-gap);
259
+ grid-template-columns: var(--agent-trace-detail-label-col, var(--agent-trace-detail-label-col-default)) 1fr;
260
+ column-gap: var(--agent-trace-block-gap, var(--agent-trace-block-gap-default));
261
261
  row-gap: var(--a-space-0-5);
262
262
  margin: 0;
263
263
  align-items: baseline;
264
264
  }
265
265
 
266
266
  [data-trace-dl] > dt {
267
- color: var(--agent-trace-fg-subtle);
268
- font-size: calc(var(--agent-trace-font) * 0.95);
267
+ color: var(--agent-trace-fg-subtle, var(--agent-trace-fg-subtle-default));
268
+ font-size: calc(var(--agent-trace-font, var(--agent-trace-font-default)) * 0.95);
269
269
  }
270
270
 
271
271
  [data-trace-dl] > dd {
272
272
  margin: 0;
273
- color: var(--agent-trace-fg);
273
+ color: var(--agent-trace-fg, var(--agent-trace-fg-default));
274
274
  font-variant-numeric: tabular-nums;
275
275
  min-width: 0;
276
276
  overflow-wrap: break-word;
@@ -280,13 +280,13 @@
280
280
  display: flex;
281
281
  flex-direction: column;
282
282
  gap: var(--a-space-1);
283
- padding-block-start: var(--agent-trace-inline-gap);
284
- border-block-start: 1px solid var(--agent-trace-border);
283
+ padding-block-start: var(--agent-trace-inline-gap, var(--agent-trace-inline-gap-default));
284
+ border-block-start: 1px solid var(--agent-trace-border, var(--agent-trace-border-default));
285
285
  }
286
286
 
287
287
  [data-trace-feedback-label] {
288
- color: var(--agent-trace-fg-subtle);
289
- font-size: calc(var(--agent-trace-label-font) * 0.85);
288
+ color: var(--agent-trace-fg-subtle, var(--agent-trace-fg-subtle-default));
289
+ font-size: calc(var(--agent-trace-label-font, var(--agent-trace-label-font-default)) * 0.85);
290
290
  font-weight: var(--a-weight-medium);
291
291
  text-transform: uppercase;
292
292
  letter-spacing: 0.06em;
@@ -299,11 +299,11 @@
299
299
  [data-trace-feedback] [data-trace-line] {
300
300
  display: grid;
301
301
  grid-template-columns: 1em 1fr;
302
- column-gap: var(--agent-trace-inline-gap);
302
+ column-gap: var(--agent-trace-inline-gap, var(--agent-trace-inline-gap-default));
303
303
  align-items: baseline;
304
304
  line-height: 1.5;
305
- font-size: var(--agent-trace-font);
306
- color: var(--agent-trace-fg);
305
+ font-size: var(--agent-trace-font, var(--agent-trace-font-default));
306
+ color: var(--agent-trace-fg, var(--agent-trace-fg-default));
307
307
  }
308
308
 
309
309
  [data-trace-feedback] [data-trace-line] > icon-ui {
@@ -315,6 +315,6 @@
315
315
  [data-trace-feedback] [data-trace-line] > span {
316
316
  min-width: 0;
317
317
  overflow-wrap: break-word;
318
- color: var(--agent-trace-fg-muted);
318
+ color: var(--agent-trace-fg-muted, var(--agent-trace-fg-muted-default));
319
319
  }
320
320
  }