@adia-ai/web-components 0.4.5 → 0.4.7

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 (316) hide show
  1. package/README.md +63 -24
  2. package/USAGE.md +604 -0
  3. package/components/accordion/accordion.d.ts +17 -0
  4. package/components/accordion/accordion.js +10 -117
  5. package/components/accordion/class.js +132 -0
  6. package/components/action-list/action-list.d.ts +15 -0
  7. package/components/action-list/action-list.js +9 -140
  8. package/components/action-list/class.js +156 -0
  9. package/components/agent-artifact/agent-artifact.d.ts +25 -0
  10. package/components/agent-artifact/agent-artifact.js +8 -181
  11. package/components/agent-artifact/class.js +200 -0
  12. package/components/agent-feedback-bar/agent-feedback-bar.d.ts +21 -0
  13. package/components/agent-feedback-bar/agent-feedback-bar.js +8 -143
  14. package/components/agent-feedback-bar/class.js +162 -0
  15. package/components/agent-questions/agent-questions.d.ts +23 -0
  16. package/components/agent-questions/agent-questions.js +8 -180
  17. package/components/agent-questions/class.js +199 -0
  18. package/components/agent-reasoning/agent-reasoning.d.ts +23 -0
  19. package/components/agent-reasoning/agent-reasoning.js +8 -494
  20. package/components/agent-reasoning/class.js +513 -0
  21. package/components/agent-suggestions/agent-suggestions.d.ts +21 -0
  22. package/components/agent-suggestions/agent-suggestions.js +8 -78
  23. package/components/agent-suggestions/class.js +97 -0
  24. package/components/agent-trace/agent-trace.d.ts +19 -0
  25. package/components/alert/alert.d.ts +29 -0
  26. package/components/alert/alert.js +8 -175
  27. package/components/alert/class.js +194 -0
  28. package/components/avatar/avatar.d.ts +27 -0
  29. package/components/avatar/avatar.js +9 -159
  30. package/components/avatar/class.js +173 -0
  31. package/components/badge/badge.d.ts +27 -0
  32. package/components/badge/badge.js +9 -75
  33. package/components/badge/class.js +93 -0
  34. package/components/block/block.d.ts +19 -0
  35. package/components/block/block.js +9 -15
  36. package/components/block/class.js +33 -0
  37. package/components/breadcrumb/breadcrumb.d.ts +23 -0
  38. package/components/breadcrumb/breadcrumb.js +8 -113
  39. package/components/breadcrumb/class.js +132 -0
  40. package/components/button/button.d.ts +34 -0
  41. package/components/button/button.js +15 -66
  42. package/components/button/class.js +80 -0
  43. package/components/calendar-picker/calendar-picker.a2ui.json +6 -1
  44. package/components/calendar-picker/calendar-picker.d.ts +27 -0
  45. package/components/calendar-picker/calendar-picker.js +8 -332
  46. package/components/calendar-picker/calendar-picker.yaml +51 -177
  47. package/components/calendar-picker/class.js +351 -0
  48. package/components/canvas/canvas.a2ui.json +6 -1
  49. package/components/canvas/canvas.d.ts +17 -0
  50. package/components/canvas/canvas.yaml +19 -36
  51. package/components/card/card.a2ui.json +3 -0
  52. package/components/card/card.d.ts +27 -0
  53. package/components/card/card.js +9 -50
  54. package/components/card/card.yaml +171 -433
  55. package/components/card/class.js +68 -0
  56. package/components/chart/chart.d.ts +41 -0
  57. package/components/chart/chart.js +8 -2131
  58. package/components/chart/class.js +2150 -0
  59. package/components/chart-legend/chart-legend.d.ts +27 -0
  60. package/components/chart-legend/chart-legend.js +8 -197
  61. package/components/chart-legend/class.js +215 -0
  62. package/components/chat-thread/chat-thread.d.ts +17 -0
  63. package/components/chat-thread/chat-thread.js +8 -157
  64. package/components/chat-thread/class.js +176 -0
  65. package/components/check/check.d.ts +30 -0
  66. package/components/check/check.js +11 -52
  67. package/components/check/class.js +68 -0
  68. package/components/code/class.js +501 -0
  69. package/components/code/code.d.ts +39 -0
  70. package/components/code/code.js +8 -482
  71. package/components/col/class.js +30 -0
  72. package/components/col/col.d.ts +23 -0
  73. package/components/col/col.js +10 -13
  74. package/components/color-picker/class.js +550 -0
  75. package/components/color-picker/color-picker.d.ts +37 -0
  76. package/components/color-picker/color-picker.js +8 -531
  77. package/components/command/class.js +364 -0
  78. package/components/command/command.a2ui.json +3 -0
  79. package/components/command/command.d.ts +19 -0
  80. package/components/command/command.js +8 -345
  81. package/components/command/command.yaml +105 -124
  82. package/components/demo-toggle/class.js +153 -0
  83. package/components/demo-toggle/demo-toggle.d.ts +23 -0
  84. package/components/demo-toggle/demo-toggle.js +8 -135
  85. package/components/description-list/class.js +86 -0
  86. package/components/description-list/description-list.d.ts +21 -0
  87. package/components/description-list/description-list.js +8 -67
  88. package/components/divider/class.js +57 -0
  89. package/components/divider/divider.d.ts +19 -0
  90. package/components/divider/divider.js +10 -40
  91. package/components/drawer/class.js +306 -0
  92. package/components/drawer/drawer.d.ts +25 -0
  93. package/components/drawer/drawer.js +8 -287
  94. package/components/embed/class.js +73 -0
  95. package/components/embed/embed.d.ts +23 -0
  96. package/components/embed/embed.js +9 -55
  97. package/components/empty-state/class.js +108 -0
  98. package/components/empty-state/empty-state.d.ts +21 -0
  99. package/components/empty-state/empty-state.js +9 -90
  100. package/components/feed/class.js +381 -0
  101. package/components/feed/feed.d.ts +19 -0
  102. package/components/feed/feed.js +9 -367
  103. package/components/field/class.js +266 -0
  104. package/components/field/field.d.ts +23 -0
  105. package/components/field/field.js +8 -247
  106. package/components/fields/class.js +106 -0
  107. package/components/fields/fields.d.ts +19 -0
  108. package/components/fields/fields.js +8 -87
  109. package/components/grid/class.js +31 -0
  110. package/components/grid/grid.d.ts +23 -0
  111. package/components/grid/grid.js +10 -14
  112. package/components/heatmap/class.js +305 -0
  113. package/components/heatmap/heatmap.d.ts +31 -0
  114. package/components/heatmap/heatmap.js +8 -286
  115. package/components/icon/class.js +54 -0
  116. package/components/icon/icon.d.ts +23 -0
  117. package/components/icon/icon.js +13 -40
  118. package/components/image/class.js +112 -0
  119. package/components/image/image.d.ts +33 -0
  120. package/components/image/image.js +9 -94
  121. package/components/index.js +1 -0
  122. package/components/input/class.js +773 -0
  123. package/components/input/input.a2ui.json +3 -0
  124. package/components/input/input.d.ts +61 -0
  125. package/components/input/input.js +8 -755
  126. package/components/input/input.yaml +171 -442
  127. package/components/inspector/class.js +142 -0
  128. package/components/inspector/inspector.a2ui.json +8 -1
  129. package/components/inspector/inspector.d.ts +17 -0
  130. package/components/inspector/inspector.js +8 -124
  131. package/components/inspector/inspector.yaml +15 -30
  132. package/components/kbd/class.js +34 -0
  133. package/components/kbd/kbd.a2ui.json +3 -0
  134. package/components/kbd/kbd.d.ts +17 -0
  135. package/components/kbd/kbd.js +10 -17
  136. package/components/kbd/kbd.yaml +54 -185
  137. package/components/link/class.js +187 -0
  138. package/components/link/link.d.ts +55 -0
  139. package/components/link/link.js +8 -168
  140. package/components/list/class.js +249 -0
  141. package/components/list/list.d.ts +23 -0
  142. package/components/list/list.js +9 -231
  143. package/components/menu/class.js +332 -0
  144. package/components/menu/menu.d.ts +21 -0
  145. package/components/menu/menu.js +11 -316
  146. package/components/modal/class.js +231 -0
  147. package/components/modal/modal.a2ui.json +5 -1
  148. package/components/modal/modal.d.ts +23 -0
  149. package/components/modal/modal.js +8 -212
  150. package/components/modal/modal.yaml +19 -39
  151. package/components/nav/class.js +150 -0
  152. package/components/nav/nav.d.ts +31 -0
  153. package/components/nav/nav.js +8 -131
  154. package/components/nav-group/class.js +152 -0
  155. package/components/nav-group/nav-group.d.ts +35 -0
  156. package/components/nav-group/nav-group.js +9 -134
  157. package/components/nav-item/class.js +86 -0
  158. package/components/nav-item/nav-item.d.ts +37 -0
  159. package/components/nav-item/nav-item.js +10 -69
  160. package/components/noodles/class.js +510 -0
  161. package/components/noodles/noodles.d.ts +33 -0
  162. package/components/noodles/noodles.js +9 -493
  163. package/components/option-card/class.js +167 -0
  164. package/components/option-card/option-card.d.ts +30 -0
  165. package/components/option-card/option-card.js +8 -149
  166. package/components/otp-input/class.js +180 -0
  167. package/components/otp-input/otp-input.a2ui.json +5 -1
  168. package/components/otp-input/otp-input.d.ts +25 -0
  169. package/components/otp-input/otp-input.js +9 -162
  170. package/components/otp-input/otp-input.yaml +45 -174
  171. package/components/page/class.js +97 -0
  172. package/components/page/page.d.ts +46 -0
  173. package/components/page/page.js +8 -79
  174. package/components/pagination/class.js +195 -0
  175. package/components/pagination/pagination.d.ts +23 -0
  176. package/components/pagination/pagination.js +9 -177
  177. package/components/pane/class.js +186 -0
  178. package/components/pane/pane.a2ui.json +12 -1
  179. package/components/pane/pane.css +10 -0
  180. package/components/pane/pane.d.ts +31 -0
  181. package/components/pane/pane.js +8 -143
  182. package/components/pane/pane.yaml +57 -157
  183. package/components/pipeline-status/class.js +189 -0
  184. package/components/pipeline-status/pipeline-status.a2ui.json +7 -1
  185. package/components/pipeline-status/pipeline-status.d.ts +21 -0
  186. package/components/pipeline-status/pipeline-status.js +9 -172
  187. package/components/pipeline-status/pipeline-status.yaml +34 -72
  188. package/components/popover/class.js +194 -0
  189. package/components/popover/popover.d.ts +23 -0
  190. package/components/popover/popover.js +9 -176
  191. package/components/progress/class.js +74 -0
  192. package/components/progress/progress.a2ui.json +3 -0
  193. package/components/progress/progress.d.ts +19 -0
  194. package/components/progress/progress.js +10 -57
  195. package/components/progress/progress.yaml +124 -287
  196. package/components/progress-row/class.js +110 -0
  197. package/components/progress-row/progress-row.d.ts +23 -0
  198. package/components/progress-row/progress-row.js +8 -92
  199. package/components/radio/class.js +83 -0
  200. package/components/radio/radio.d.ts +28 -0
  201. package/components/radio/radio.js +11 -67
  202. package/components/range/class.js +194 -0
  203. package/components/range/range.d.ts +31 -0
  204. package/components/range/range.js +9 -176
  205. package/components/rating/class.js +148 -0
  206. package/components/rating/rating.d.ts +33 -0
  207. package/components/rating/rating.js +9 -130
  208. package/components/richtext/class.js +87 -0
  209. package/components/richtext/richtext.a2ui.json +7 -1
  210. package/components/richtext/richtext.d.ts +19 -0
  211. package/components/richtext/richtext.js +8 -68
  212. package/components/richtext/richtext.yaml +30 -65
  213. package/components/row/class.js +50 -0
  214. package/components/row/row.d.ts +27 -0
  215. package/components/row/row.js +10 -33
  216. package/components/search/class.js +134 -0
  217. package/components/search/search.d.ts +35 -0
  218. package/components/search/search.js +10 -117
  219. package/components/segment/class.js +62 -0
  220. package/components/segment/segment.d.ts +25 -0
  221. package/components/segment/segment.js +10 -45
  222. package/components/segmented/class.js +165 -0
  223. package/components/segmented/segmented.a2ui.json +4 -0
  224. package/components/segmented/segmented.d.ts +24 -0
  225. package/components/segmented/segmented.js +10 -148
  226. package/components/segmented/segmented.yaml +41 -59
  227. package/components/select/class.js +408 -0
  228. package/components/select/select.d.ts +57 -0
  229. package/components/select/select.js +15 -396
  230. package/components/skeleton/class.js +52 -0
  231. package/components/skeleton/skeleton.d.ts +23 -0
  232. package/components/skeleton/skeleton.js +8 -34
  233. package/components/slider/class.js +184 -0
  234. package/components/slider/slider.d.ts +31 -0
  235. package/components/slider/slider.js +9 -166
  236. package/components/stack/class.js +28 -0
  237. package/components/stack/stack.d.ts +17 -0
  238. package/components/stack/stack.js +10 -11
  239. package/components/step-progress/class.js +98 -0
  240. package/components/step-progress/step-progress.d.ts +27 -0
  241. package/components/step-progress/step-progress.js +8 -79
  242. package/components/stepper/class.js +126 -0
  243. package/components/stepper/stepper.d.ts +19 -0
  244. package/components/stepper/stepper.js +9 -112
  245. package/components/stream/class.js +109 -0
  246. package/components/stream/stream.d.ts +19 -0
  247. package/components/stream/stream.js +8 -90
  248. package/components/swatch/class.js +131 -0
  249. package/components/swatch/swatch.d.ts +28 -0
  250. package/components/swatch/swatch.js +8 -112
  251. package/components/swiper/class.js +373 -0
  252. package/components/swiper/swiper.a2ui.json +4 -0
  253. package/components/swiper/swiper.d.ts +31 -0
  254. package/components/swiper/swiper.js +8 -354
  255. package/components/swiper/swiper.yaml +68 -212
  256. package/components/switch/class.js +63 -0
  257. package/components/switch/switch.a2ui.json +6 -1
  258. package/components/switch/switch.d.ts +30 -0
  259. package/components/switch/switch.js +11 -47
  260. package/components/switch/switch.yaml +70 -265
  261. package/components/table/class.js +1453 -0
  262. package/components/table/table.d.ts +37 -0
  263. package/components/table/table.js +8 -1435
  264. package/components/table-toolbar/class.js +680 -0
  265. package/components/table-toolbar/table-toolbar.d.ts +33 -0
  266. package/components/table-toolbar/table-toolbar.js +8 -689
  267. package/components/tabs/class.js +242 -0
  268. package/components/tabs/tabs.d.ts +21 -0
  269. package/components/tabs/tabs.js +8 -223
  270. package/components/tag/class.js +99 -0
  271. package/components/tag/tag.d.ts +27 -0
  272. package/components/tag/tag.js +8 -80
  273. package/components/text/class.js +46 -0
  274. package/components/text/text.d.ts +25 -0
  275. package/components/text/text.js +9 -28
  276. package/components/textarea/class.js +134 -0
  277. package/components/textarea/textarea.d.ts +31 -0
  278. package/components/textarea/textarea.js +11 -118
  279. package/components/timeline/class.js +176 -0
  280. package/components/timeline/timeline.d.ts +19 -0
  281. package/components/timeline/timeline.js +9 -162
  282. package/components/toast/class.js +92 -0
  283. package/components/toast/toast.d.ts +23 -0
  284. package/components/toast/toast.js +9 -76
  285. package/components/toggle-group/class.js +154 -0
  286. package/components/toggle-group/toggle-group.d.ts +19 -0
  287. package/components/toggle-group/toggle-group.js +11 -140
  288. package/components/toggle-scheme/class.js +286 -0
  289. package/components/toggle-scheme/toggle-scheme.a2ui.json +197 -0
  290. package/components/toggle-scheme/toggle-scheme.css +20 -0
  291. package/components/toggle-scheme/toggle-scheme.d.ts +41 -0
  292. package/components/toggle-scheme/toggle-scheme.js +17 -0
  293. package/components/toggle-scheme/toggle-scheme.yaml +173 -0
  294. package/components/toolbar/class.js +388 -0
  295. package/components/toolbar/toolbar.d.ts +23 -0
  296. package/components/toolbar/toolbar.js +10 -376
  297. package/components/tooltip/class.js +299 -0
  298. package/components/tooltip/tooltip.d.ts +27 -0
  299. package/components/tooltip/tooltip.js +8 -280
  300. package/components/tree/class.js +245 -0
  301. package/components/tree/tree.d.ts +15 -0
  302. package/components/tree/tree.js +9 -244
  303. package/components/upload/class.js +199 -0
  304. package/components/upload/upload.d.ts +27 -0
  305. package/components/upload/upload.js +11 -183
  306. package/core/element.d.ts +174 -0
  307. package/core/form.d.ts +108 -0
  308. package/core/index.d.ts +11 -0
  309. package/core/index.js +1 -0
  310. package/core/register.d.ts +25 -0
  311. package/core/register.js +58 -0
  312. package/core/signals.d.ts +94 -0
  313. package/core/template.d.ts +70 -0
  314. package/index.d.ts +315 -0
  315. package/package.json +25 -6
  316. package/traits/CATEGORIES.md +1 -1
package/components/toggle-scheme/toggle-scheme.a2ui.json ADDED
@@ -0,0 +1,197 @@
1
+ {
2
+ "$schema": "https://json-schema.org/draft/2020-12/schema",
3
+ "$id": "https://adiaui.dev/a2ui/v0_9/components/ToggleScheme.json",
4
+ "title": "ToggleScheme",
5
+ "description": "Icon-button primitive that toggles `color-scheme` between light and dark on a target element (default `:root`). Encapsulates the prefers-color-scheme initial-resolution, the inline-style write to the target, optional localStorage persistence (sharing the `adia-theme-` namespace with <theme-panel>), and the moon/sun icon swap. Replaces the hand-wired `<button-ui id=\"theme-toggle\">` + `applyScheme()` pattern previously duplicated across apps/genui, apps/construct-canvas, playgrounds/chat.",
6
+ "type": "object",
7
+ "allOf": [
8
+ {
9
+ "$ref": "common_types.json#/$defs/ComponentCommon"
10
+ },
11
+ {
12
+ "$ref": "common_types.json#/$defs/CatalogComponentCommon"
13
+ }
14
+ ],
15
+ "properties": {
16
+ "activeScheme": {
17
+ "description": "Resolved scheme (\"light\" | \"dark\"). Read-only; mutate via .setScheme() or .toggle().",
18
+ "type": "string",
19
+ "enum": [
20
+ "",
21
+ "light",
22
+ "dark"
23
+ ],
24
+ "default": ""
25
+ },
26
+ "color": {
27
+ "description": "Semantic intent forwarded to the internal <button-ui>.",
28
+ "type": "string",
29
+ "enum": [
30
+ "",
31
+ "default",
32
+ "accent",
33
+ "info",
34
+ "success",
35
+ "warning",
36
+ "danger"
37
+ ],
38
+ "default": ""
39
+ },
40
+ "component": {
41
+ "const": "ToggleScheme"
42
+ },
43
+ "disabled": {
44
+ "description": "Disables the internal button.",
45
+ "type": "boolean",
46
+ "default": false
47
+ },
48
+ "iconDark": {
49
+ "description": "Phosphor icon shown when active-scheme is \"dark\" (clicking switches to light).",
50
+ "type": "string",
51
+ "default": "moon"
52
+ },
53
+ "iconLight": {
54
+ "description": "Phosphor icon shown when active-scheme is \"light\" (clicking switches to dark).",
55
+ "type": "string",
56
+ "default": "sun"
57
+ },
58
+ "labelDark": {
59
+ "description": "aria-label / title applied to the internal button when active-scheme is \"dark\".",
60
+ "type": "string",
61
+ "default": "Switch to light mode"
62
+ },
63
+ "labelLight": {
64
+ "description": "aria-label / title applied to the internal button when active-scheme is \"light\".",
65
+ "type": "string",
66
+ "default": "Switch to dark mode"
67
+ },
68
+ "persist": {
69
+ "description": "Persist the user's choice to localStorage under `${storage-prefix}scheme`.",
70
+ "type": "boolean",
71
+ "default": false
72
+ },
73
+ "scheme": {
74
+ "description": "Initial scheme — \"auto\" follows prefers-color-scheme; \"light\" / \"dark\" force.",
75
+ "type": "string",
76
+ "enum": [
77
+ "auto",
78
+ "light",
79
+ "dark"
80
+ ],
81
+ "default": "auto"
82
+ },
83
+ "size": {
84
+ "description": "Sizing scale forwarded to the internal <button-ui>.",
85
+ "type": "string",
86
+ "enum": [
87
+ "xs",
88
+ "sm",
89
+ "md",
90
+ "lg",
91
+ "xl"
92
+ ],
93
+ "default": "md"
94
+ },
95
+ "storagePrefix": {
96
+ "description": "LocalStorage key prefix; default matches <theme-panel> for cross-element interop.",
97
+ "type": "string",
98
+ "default": "adia-theme-"
99
+ },
100
+ "target": {
101
+ "description": "CSS selector for the element receiving `color-scheme`. \":root\" → <html>.",
102
+ "type": "string",
103
+ "default": ":root"
104
+ },
105
+ "variant": {
106
+ "description": "Visual style forwarded to the internal <button-ui>. Defaults to \"ghost\" (matches app practice).",
107
+ "type": "string",
108
+ "enum": [
109
+ "default",
110
+ "solid",
111
+ "outline",
112
+ "ghost",
113
+ "primary",
114
+ "secondary",
115
+ "soft"
116
+ ],
117
+ "default": "ghost"
118
+ }
119
+ },
120
+ "required": [
121
+ "component"
122
+ ],
123
+ "unevaluatedProperties": false,
124
+ "x-adiaui": {
125
+ "anti_patterns": [],
126
+ "category": "control",
127
+ "events": {
128
+ "scheme-change": {
129
+ "description": "Fired when the active scheme changes. detail contains { scheme: \"light\" | \"dark\", source: \"press\" | \"media\" | \"programmatic\" }."
130
+ }
131
+ },
132
+ "examples": [
133
+ {
134
+ "description": "Drop into a toolbar / app header as a single icon-button affordance.",
135
+ "a2ui": "[\n {\n \"id\": \"root\",\n \"component\": \"ToggleScheme\",\n \"persist\": true\n }\n]",
136
+ "name": "header-action"
137
+ }
138
+ ],
139
+ "keywords": [
140
+ "scheme",
141
+ "color-scheme",
142
+ "dark-mode",
143
+ "light-mode",
144
+ "theme",
145
+ "toggle",
146
+ "moon",
147
+ "sun"
148
+ ],
149
+ "name": "UIToggleScheme",
150
+ "related": [
151
+ "Button",
152
+ "Switch"
153
+ ],
154
+ "slots": {},
155
+ "states": [
156
+ {
157
+ "description": "Default, ready for interaction.",
158
+ "name": "idle"
159
+ },
160
+ {
161
+ "description": "Active scheme is light.",
162
+ "attribute": "active-scheme",
163
+ "name": "light"
164
+ },
165
+ {
166
+ "description": "Active scheme is dark.",
167
+ "attribute": "active-scheme",
168
+ "name": "dark"
169
+ },
170
+ {
171
+ "description": "Non-interactive; the internal button is disabled.",
172
+ "attribute": "disabled",
173
+ "name": "disabled"
174
+ }
175
+ ],
176
+ "synonyms": {
177
+ "dark-mode": [
178
+ "toggle-scheme"
179
+ ],
180
+ "theme-toggle": [
181
+ "toggle-scheme"
182
+ ],
183
+ "toggle": [
184
+ "toggle-scheme",
185
+ "switch"
186
+ ]
187
+ },
188
+ "tag": "toggle-scheme-ui",
189
+ "tokens": {
190
+ "--toggle-scheme-icon-transition": {
191
+ "description": "Duration + easing for icon-color transition when scheme flips."
192
+ }
193
+ },
194
+ "traits": [],
195
+ "version": 1
196
+ }
197
+ }
package/components/toggle-scheme/toggle-scheme.css ADDED
@@ -0,0 +1,20 @@
1
+ @scope (toggle-scheme-ui) {
2
+ :where(:scope) {
3
+ --toggle-scheme-icon-transition: var(--a-duration-fast) var(--a-easing);
4
+ }
5
+
6
+ :scope {
7
+ display: inline-flex;
8
+ align-items: center;
9
+ justify-content: center;
10
+ line-height: 0;
11
+ }
12
+
13
+ :scope[disabled] {
14
+ pointer-events: none;
15
+ }
16
+
17
+ :scope > [part="button"] {
18
+ transition: color var(--toggle-scheme-icon-transition);
19
+ }
20
+ }
package/components/toggle-scheme/toggle-scheme.d.ts ADDED
@@ -0,0 +1,41 @@
1
+ /**
2
+ * `<toggle-scheme-ui>` — Icon-button primitive that toggles `color-scheme` between light and dark on a target element (default `:root`). Encapsulates the prefers-color-scheme initial-resolution, the inline-style write to the target, optional localStorage persistence (sharing the `adia-theme-` namespace with <theme-panel>), and the moon/sun icon swap. Replaces the hand-wired `<button-ui id="theme-toggle">` + `applyScheme()` pattern previously duplicated across apps/genui, apps/construct-canvas, playgrounds/chat.
3
+ *
4
+ * @see https://ui-kit.exe.xyz/site/components/toggle-scheme
5
+ *
6
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
7
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
8
+ * run `npm run components`, then `npm run codegen:dts` to regenerate;
9
+ * or hand-author this file fully if rich event types are needed.
10
+ */
11
+
12
+ import { UIElement } from '../../core/element.js';
13
+
14
+ export class UIToggleScheme extends UIElement {
15
+ /** Resolved scheme ("light" | "dark"). Read-only; mutate via .setScheme() or .toggle(). */
16
+ activeScheme: '' | 'light' | 'dark';
17
+ /** Semantic intent forwarded to the internal <button-ui>. */
18
+ color: '' | 'default' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
19
+ /** Disables the internal button. */
20
+ disabled: boolean;
21
+ /** Phosphor icon shown when active-scheme is "dark" (clicking switches to light). */
22
+ iconDark: string;
23
+ /** Phosphor icon shown when active-scheme is "light" (clicking switches to dark). */
24
+ iconLight: string;
25
+ /** aria-label / title applied to the internal button when active-scheme is "dark". */
26
+ labelDark: string;
27
+ /** aria-label / title applied to the internal button when active-scheme is "light". */
28
+ labelLight: string;
29
+ /** Persist the user's choice to localStorage under `${storage-prefix}scheme`. */
30
+ persist: boolean;
31
+ /** Initial scheme — "auto" follows prefers-color-scheme; "light" / "dark" force. */
32
+ scheme: 'auto' | 'light' | 'dark';
33
+ /** Sizing scale forwarded to the internal <button-ui>. */
34
+ size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
35
+ /** LocalStorage key prefix; default matches <theme-panel> for cross-element interop. */
36
+ storagePrefix: string;
37
+ /** CSS selector for the element receiving `color-scheme`. ":root" → <html>. */
38
+ target: string;
39
+ /** Visual style forwarded to the internal <button-ui>. Defaults to "ghost" (matches app practice). */
40
+ variant: 'default' | 'solid' | 'outline' | 'ghost' | 'primary' | 'secondary' | 'soft';
41
+ }
package/components/toggle-scheme/toggle-scheme.js ADDED
@@ -0,0 +1,17 @@
1
+ /**
2
+ * `<toggle-scheme-ui>` — auto-registers the tag on import.
3
+ *
4
+ * For non-side-effect class import (test isolation, tag override), use
5
+ * the `class` subpath:
6
+ *
7
+ * import { UIToggleScheme } from '@adia-ai/web-components/components/toggle-scheme/class';
8
+ *
9
+ * @see ../../USAGE.md#registration--auto-vs-explicit
10
+ */
11
+
12
+ import { defineIfFree } from '../../core/register.js';
13
+ import { UIToggleScheme } from './class.js';
14
+
15
+ defineIfFree('toggle-scheme-ui', UIToggleScheme);
16
+
17
+ export { UIToggleScheme };
package/components/toggle-scheme/toggle-scheme.yaml ADDED
@@ -0,0 +1,173 @@
1
+ # Edit this file; run `node scripts/build/components.mjs` to regenerate a2ui.json.
2
+ $schema: ../../../../scripts/schemas/component.yaml.schema.json
3
+ name: UIToggleScheme
4
+ tag: toggle-scheme-ui
5
+ component: ToggleScheme
6
+ category: control
7
+ version: 1
8
+ description: >-
9
+ Icon-button primitive that toggles `color-scheme` between light and dark on
10
+ a target element (default `:root`). Encapsulates the prefers-color-scheme
11
+ initial-resolution, the inline-style write to the target, optional
12
+ localStorage persistence (sharing the `adia-theme-` namespace with
13
+ <theme-panel>), and the moon/sun icon swap. Replaces the hand-wired
14
+ `<button-ui id="theme-toggle">` + `applyScheme()` pattern previously
15
+ duplicated across apps/genui, apps/construct-canvas, playgrounds/chat.
16
+ props:
17
+ scheme:
18
+ description: Initial scheme — "auto" follows prefers-color-scheme; "light" / "dark" force.
19
+ type: string
20
+ default: auto
21
+ enum:
22
+ - auto
23
+ - light
24
+ - dark
25
+ reflect: true
26
+ target:
27
+ description: CSS selector for the element receiving `color-scheme`. ":root" → <html>.
28
+ type: string
29
+ default: ":root"
30
+ reflect: true
31
+ persist:
32
+ description: Persist the user's choice to localStorage under `${storage-prefix}scheme`.
33
+ type: boolean
34
+ default: false
35
+ reflect: true
36
+ storagePrefix:
37
+ description: LocalStorage key prefix; default matches <theme-panel> for cross-element interop.
38
+ type: string
39
+ default: "adia-theme-"
40
+ attribute: storage-prefix
41
+ reflect: true
42
+ iconLight:
43
+ description: Phosphor icon shown when active-scheme is "light" (clicking switches to dark).
44
+ type: string
45
+ default: sun
46
+ attribute: icon-light
47
+ reflect: true
48
+ iconDark:
49
+ description: Phosphor icon shown when active-scheme is "dark" (clicking switches to light).
50
+ type: string
51
+ default: moon
52
+ attribute: icon-dark
53
+ reflect: true
54
+ labelLight:
55
+ description: aria-label / title applied to the internal button when active-scheme is "light".
56
+ type: string
57
+ default: "Switch to dark mode"
58
+ attribute: label-light
59
+ reflect: true
60
+ labelDark:
61
+ description: aria-label / title applied to the internal button when active-scheme is "dark".
62
+ type: string
63
+ default: "Switch to light mode"
64
+ attribute: label-dark
65
+ reflect: true
66
+ size:
67
+ description: Sizing scale forwarded to the internal <button-ui>.
68
+ type: string
69
+ default: md
70
+ enum:
71
+ - xs
72
+ - sm
73
+ - md
74
+ - lg
75
+ - xl
76
+ reflect: true
77
+ variant:
78
+ description: Visual style forwarded to the internal <button-ui>. Defaults to "ghost" (matches app practice).
79
+ type: string
80
+ default: ghost
81
+ enum:
82
+ - default
83
+ - solid
84
+ - outline
85
+ - ghost
86
+ - primary
87
+ - secondary
88
+ - soft
89
+ reflect: true
90
+ color:
91
+ description: Semantic intent forwarded to the internal <button-ui>.
92
+ type: string
93
+ default: ""
94
+ enum:
95
+ - ""
96
+ - default
97
+ - accent
98
+ - info
99
+ - success
100
+ - warning
101
+ - danger
102
+ reflect: true
103
+ disabled:
104
+ description: Disables the internal button.
105
+ type: boolean
106
+ default: false
107
+ reflect: true
108
+ activeScheme:
109
+ description: Resolved scheme ("light" | "dark"). Read-only; mutate via .setScheme() or .toggle().
110
+ type: string
111
+ default: ""
112
+ enum:
113
+ - ""
114
+ - light
115
+ - dark
116
+ attribute: active-scheme
117
+ reflect: true
118
+ events:
119
+ scheme-change:
120
+ description: >-
121
+ Fired when the active scheme changes. detail contains
122
+ { scheme: "light" | "dark", source: "press" | "media" | "programmatic" }.
123
+ slots: {}
124
+ states:
125
+ - name: idle
126
+ description: Default, ready for interaction.
127
+ - name: light
128
+ description: Active scheme is light.
129
+ attribute: active-scheme
130
+ - name: dark
131
+ description: Active scheme is dark.
132
+ attribute: active-scheme
133
+ - name: disabled
134
+ description: Non-interactive; the internal button is disabled.
135
+ attribute: disabled
136
+ traits: []
137
+ tokens:
138
+ --toggle-scheme-icon-transition:
139
+ description: Duration + easing for icon-color transition when scheme flips.
140
+ a2ui:
141
+ rules: []
142
+ anti_patterns: []
143
+ examples:
144
+ - name: header-action
145
+ description: Drop into a toolbar / app header as a single icon-button affordance.
146
+ a2ui: >-
147
+ [
148
+ {
149
+ "id": "root",
150
+ "component": "ToggleScheme",
151
+ "persist": true
152
+ }
153
+ ]
154
+ keywords:
155
+ - scheme
156
+ - color-scheme
157
+ - dark-mode
158
+ - light-mode
159
+ - theme
160
+ - toggle
161
+ - moon
162
+ - sun
163
+ synonyms:
164
+ toggle:
165
+ - toggle-scheme
166
+ - switch
167
+ dark-mode:
168
+ - toggle-scheme
169
+ theme-toggle:
170
+ - toggle-scheme
171
+ related:
172
+ - Button
173
+ - Switch