@supersoniks/concorde 5.1.0 → 5.1.2

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 (628) hide show
  1. package/.agents/skills/concorde-docs/SKILL.md +153 -0
  2. package/.agents/skills/{concorde-component-docs/template.md → concorde-docs/templates/component.md} +6 -2
  3. package/.agents/skills/concorde-docs/templates/decorator.md +43 -0
  4. package/.agents/skills/concorde-docs/templates/guide.md +25 -0
  5. package/.claude/launch.json +15 -0
  6. package/.claude/vite.http.config.mjs +7 -0
  7. package/.taste-skill/after/desktop-fold.jpg +0 -0
  8. package/.taste-skill/after/desktop-page-01.jpg +0 -0
  9. package/.taste-skill/after/desktop-page-02.jpg +0 -0
  10. package/.taste-skill/after/desktop-page-03.jpg +0 -0
  11. package/.taste-skill/after/mobile-fold.jpg +0 -0
  12. package/.taste-skill/after/mobile-page-01.jpg +0 -0
  13. package/.taste-skill/after/report.json +4103 -0
  14. package/.taste-skill/after/tablet-fold.jpg +0 -0
  15. package/.taste-skill/after/tablet-page-01.jpg +0 -0
  16. package/.taste-skill/after/tablet-page-02.jpg +0 -0
  17. package/.taste-skill/before/desktop-fold.jpg +0 -0
  18. package/.taste-skill/before/desktop-page-01.jpg +0 -0
  19. package/.taste-skill/before/desktop-page-02.jpg +0 -0
  20. package/.taste-skill/before/mobile-fold.jpg +0 -0
  21. package/.taste-skill/before/mobile-page-01.jpg +0 -0
  22. package/.taste-skill/before/report.json +2556 -0
  23. package/.taste-skill/before/tablet-fold.jpg +0 -0
  24. package/.taste-skill/before/tablet-page-01.jpg +0 -0
  25. package/.taste-skill/direction.json +510 -0
  26. package/.taste-skill/notes.md +84 -0
  27. package/.taste-skill/prod/desktop-fold.jpg +0 -0
  28. package/.taste-skill/prod/desktop-page-01.jpg +0 -0
  29. package/.taste-skill/prod/desktop-page-02.jpg +0 -0
  30. package/.taste-skill/prod/desktop-page-03.jpg +0 -0
  31. package/.taste-skill/prod/mobile-fold.jpg +0 -0
  32. package/.taste-skill/prod/mobile-page-01.jpg +0 -0
  33. package/.taste-skill/prod/mobile-page-02.jpg +0 -0
  34. package/.taste-skill/prod/report.json +1973 -0
  35. package/.taste-skill/prod/tablet-fold.jpg +0 -0
  36. package/.taste-skill/prod/tablet-page-01.jpg +0 -0
  37. package/.taste-skill/prod/tablet-page-02.jpg +0 -0
  38. package/.tmp-cem/custom-elements.json +2013 -2013
  39. package/AUDIT.md +228 -0
  40. package/PLAN-AMELIORATION.md +220 -0
  41. package/PLAN-DOCS-AGENTS.md +80 -0
  42. package/README.md +3 -3
  43. package/ai/skills/concorde/SKILL.md +1 -1
  44. package/ai/skills/concorde-get-set-dp/SKILL.md +3 -3
  45. package/ai/skills/concorde-theme/SKILL.md +1 -1
  46. package/build-infos.json +1 -1
  47. package/concorde-core.bundle.js +16 -16
  48. package/concorde-core.es.js +235 -233
  49. package/dist/concorde-core.bundle.js +16 -16
  50. package/dist/concorde-core.es.js +235 -233
  51. package/dist/img/archive/concorde-001-2cv.webp +0 -0
  52. package/dist/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  53. package/dist/img/archive/concorde-red-arrows-2002.webm +0 -0
  54. package/dist/img/archive/credits.json +28 -0
  55. package/docs/.htaccess +75 -0
  56. package/docs/404.html +15 -0
  57. package/docs/404.md +5 -0
  58. package/docs/assets/index-BgG6FFPt.js +11765 -0
  59. package/docs/assets/index-x89XINSG.css +1 -0
  60. package/docs/core/components/functional/date/date.html +211 -0
  61. package/docs/core/components/functional/date/date.md +150 -0
  62. package/docs/core/components/functional/fetch/fetch.html +180 -0
  63. package/docs/core/components/functional/fetch/fetch.md +108 -0
  64. package/docs/core/components/functional/if/if.html +65 -0
  65. package/docs/core/components/functional/if/if.md +34 -0
  66. package/docs/core/components/functional/jsonata/jsonata.html +110 -0
  67. package/docs/core/components/functional/jsonata/jsonata.md +61 -0
  68. package/docs/core/components/functional/list/list.html +198 -0
  69. package/docs/core/components/functional/list/list.md +121 -0
  70. package/docs/core/components/functional/mix/mix.html +78 -0
  71. package/docs/core/components/functional/mix/mix.md +46 -0
  72. package/docs/core/components/functional/queue/queue.html +155 -0
  73. package/docs/core/components/functional/queue/queue.md +51 -0
  74. package/docs/core/components/functional/router/router.html +154 -0
  75. package/docs/core/components/functional/router/router.md +93 -0
  76. package/docs/core/components/functional/sdui/sdui-extension-points.html +127 -0
  77. package/docs/core/components/functional/sdui/sdui-extension-points.md +94 -0
  78. package/docs/core/components/functional/sdui/sdui.html +397 -0
  79. package/docs/core/components/functional/sdui/sdui.md +307 -0
  80. package/docs/core/components/functional/states/states.html +141 -0
  81. package/docs/core/components/functional/states/states.md +112 -0
  82. package/docs/core/components/functional/submit/submit.html +178 -0
  83. package/docs/core/components/functional/submit/submit.md +106 -0
  84. package/docs/{crawl/core → core}/components/functional/subscriber/subscriber.html +6 -5
  85. package/docs/core/components/functional/subscriber/subscriber.md +91 -0
  86. package/docs/core/components/functional/translation/translation.html +60 -0
  87. package/docs/core/components/functional/translation/translation.md +38 -0
  88. package/docs/core/components/functional/value/value.html +81 -0
  89. package/docs/core/components/functional/value/value.md +47 -0
  90. package/docs/core/components/ui/alert/alert.html +201 -0
  91. package/docs/core/components/ui/alert/alert.md +186 -0
  92. package/docs/core/components/ui/alert-messages/alert-messages.html +132 -0
  93. package/docs/core/components/ui/alert-messages/alert-messages.md +85 -0
  94. package/docs/core/components/ui/badge/badge.html +197 -0
  95. package/docs/core/components/ui/badge/badge.md +181 -0
  96. package/docs/core/components/ui/button/button.html +309 -0
  97. package/docs/core/components/ui/button/button.md +216 -0
  98. package/docs/core/components/ui/captcha/captcha.html +80 -0
  99. package/docs/core/components/ui/captcha/captcha.md +56 -0
  100. package/docs/core/components/ui/card/card.html +254 -0
  101. package/docs/core/components/ui/card/card.md +215 -0
  102. package/docs/core/components/ui/divider/divider.html +144 -0
  103. package/docs/core/components/ui/divider/divider.md +126 -0
  104. package/docs/core/components/ui/form/checkbox/checkbox.html +200 -0
  105. package/docs/core/components/ui/form/checkbox/checkbox.md +125 -0
  106. package/docs/core/components/ui/form/fieldset/fieldset.html +238 -0
  107. package/docs/core/components/ui/form/fieldset/fieldset.md +161 -0
  108. package/docs/core/components/ui/form/form-actions/form-actions.html +122 -0
  109. package/docs/core/components/ui/form/form-actions/form-actions.md +98 -0
  110. package/docs/core/components/ui/form/form-layout/form-layout.html +115 -0
  111. package/docs/core/components/ui/form/form-layout/form-layout.md +109 -0
  112. package/docs/core/components/ui/form/input/input.html +235 -0
  113. package/docs/core/components/ui/form/input/input.md +142 -0
  114. package/docs/core/components/ui/form/radio/radio.html +144 -0
  115. package/docs/core/components/ui/form/radio/radio.md +78 -0
  116. package/docs/core/components/ui/form/select/select.html +178 -0
  117. package/docs/core/components/ui/form/select/select.md +86 -0
  118. package/docs/core/components/ui/form/switch/switch.html +146 -0
  119. package/docs/core/components/ui/form/switch/switch.md +80 -0
  120. package/docs/core/components/ui/form/textarea/textarea.html +162 -0
  121. package/docs/core/components/ui/form/textarea/textarea.md +82 -0
  122. package/docs/core/components/ui/group/group.html +113 -0
  123. package/docs/core/components/ui/group/group.md +77 -0
  124. package/docs/core/components/ui/icon/icon.html +223 -0
  125. package/docs/core/components/ui/icon/icon.md +214 -0
  126. package/docs/core/components/ui/image/image.html +194 -0
  127. package/docs/core/components/ui/image/image.md +167 -0
  128. package/docs/core/components/ui/link/link.html +101 -0
  129. package/docs/core/components/ui/link/link.md +81 -0
  130. package/docs/core/components/ui/loader/loader.html +114 -0
  131. package/docs/core/components/ui/loader/loader.md +87 -0
  132. package/docs/{crawl/core → core}/components/ui/menu/menu.html +189 -116
  133. package/docs/core/components/ui/menu/menu.md +370 -0
  134. package/docs/core/components/ui/modal/modal.html +324 -0
  135. package/docs/core/components/ui/modal/modal.md +211 -0
  136. package/docs/core/components/ui/pop/pop.html +250 -0
  137. package/docs/core/components/ui/pop/pop.md +216 -0
  138. package/docs/core/components/ui/progress/progress.html +132 -0
  139. package/docs/core/components/ui/progress/progress.md +109 -0
  140. package/docs/core/components/ui/table/table.html +333 -0
  141. package/docs/core/components/ui/table/table.md +267 -0
  142. package/docs/core/components/ui/theme/theme.html +116 -0
  143. package/docs/core/components/ui/theme/theme.md +97 -0
  144. package/docs/core/components/ui/toast/toast.html +185 -0
  145. package/docs/core/components/ui/toast/toast.md +147 -0
  146. package/docs/core/components/ui/tooltip/tooltip.html +112 -0
  147. package/docs/core/components/ui/tooltip/tooltip.md +89 -0
  148. package/docs/docs/decorators/ancestor-attribute.html +71 -0
  149. package/docs/docs/decorators/ancestor-attribute.md +59 -0
  150. package/docs/docs/decorators/auto-subscribe.html +61 -0
  151. package/docs/docs/decorators/auto-subscribe.md +40 -0
  152. package/docs/docs/decorators/bind.html +86 -0
  153. package/docs/docs/decorators/bind.md +77 -0
  154. package/docs/docs/decorators/get.html +166 -0
  155. package/docs/docs/decorators/get.md +160 -0
  156. package/docs/docs/decorators/handle.html +139 -0
  157. package/docs/docs/decorators/handle.md +119 -0
  158. package/docs/docs/decorators/on-assign.html +72 -0
  159. package/docs/docs/decorators/on-assign.md +63 -0
  160. package/docs/docs/decorators/patch.html +76 -0
  161. package/docs/docs/decorators/patch.md +44 -0
  162. package/docs/docs/decorators/post.html +150 -0
  163. package/docs/docs/decorators/post.md +134 -0
  164. package/docs/docs/decorators/publish.html +74 -0
  165. package/docs/docs/decorators/publish.md +56 -0
  166. package/docs/docs/decorators/put.html +83 -0
  167. package/docs/docs/decorators/put.md +51 -0
  168. package/docs/docs/decorators/subscribe.html +91 -0
  169. package/docs/docs/decorators/subscribe.md +87 -0
  170. package/docs/docs/decorators/wait-for-ancestors.html +82 -0
  171. package/docs/docs/decorators/wait-for-ancestors.md +76 -0
  172. package/docs/docs/directives/sub.html +79 -0
  173. package/docs/docs/directives/sub.md +75 -0
  174. package/docs/docs/directives/t.html +91 -0
  175. package/docs/docs/directives/t.md +73 -0
  176. package/docs/{crawl/docs/_getting-started → docs/getting-started}/ai-agents.html +12 -11
  177. package/{src/docs/_getting-started → docs/docs/getting-started}/ai-agents.md +3 -3
  178. package/docs/docs/getting-started/components.html +27 -0
  179. package/docs/docs/getting-started/components.md +5 -0
  180. package/docs/{crawl/docs/_getting-started → docs/getting-started}/create-a-component.html +11 -14
  181. package/docs/{src/docs/_getting-started → docs/getting-started}/create-a-component.md +3 -6
  182. package/docs/{crawl/docs/_core-concept → docs/getting-started}/dataFlow.html +26 -29
  183. package/docs/{src/docs/_core-concept → docs/getting-started}/dataFlow.md +17 -18
  184. package/docs/docs/getting-started/installation.html +69 -0
  185. package/docs/docs/getting-started/installation.md +36 -0
  186. package/docs/{crawl/docs/_getting-started → docs/getting-started}/my-first-component.html +13 -22
  187. package/docs/{src/docs/_getting-started → docs/getting-started}/my-first-component.md +5 -14
  188. package/docs/docs/getting-started/start.html +47 -0
  189. package/{src/docs/_getting-started → docs/docs/getting-started}/start.md +1 -13
  190. package/docs/docs/getting-started/theming.html +334 -0
  191. package/{src/docs/_getting-started → docs/docs/getting-started}/theming.md +2 -2
  192. package/docs/docs/index.html +99 -0
  193. package/docs/{crawl/docs/_misc → docs/misc}/api-configuration.html +18 -18
  194. package/docs/{src/docs/_misc → docs/misc}/api-configuration.md +10 -12
  195. package/docs/{crawl/docs/_misc → docs/misc}/dataProviderKey.html +12 -11
  196. package/{src/docs/_misc → docs/docs/misc}/dataProviderKey.md +4 -4
  197. package/docs/{crawl/docs/_misc → docs/misc}/docs-mock-api.html +25 -28
  198. package/docs/{src/docs/_misc → docs/misc}/docs-mock-api.md +12 -13
  199. package/docs/{crawl/docs/_misc → docs/misc}/dynamic-path.html +16 -15
  200. package/{src/docs/_misc → docs/docs/misc}/dynamic-path.md +8 -8
  201. package/docs/{crawl/docs/_misc → docs/misc}/endpoint.html +16 -15
  202. package/{src/docs/_misc → docs/docs/misc}/endpoint.md +8 -8
  203. package/docs/{crawl/docs/_misc → docs/misc}/html-integration.html +12 -15
  204. package/docs/{src/docs/_misc → docs/misc}/html-integration.md +4 -5
  205. package/docs/docs-mock-api-sw.js +60 -223
  206. package/docs/docs-mock-api-sw.js.map +4 -4
  207. package/docs/hubs/decorators.html +443 -0
  208. package/docs/hubs/form-components.html +404 -0
  209. package/docs/hubs/remote-data.html +371 -0
  210. package/docs/img/archive/concorde-001-2cv.webp +0 -0
  211. package/docs/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  212. package/docs/img/archive/concorde-red-arrows-2002.webm +0 -0
  213. package/docs/img/archive/credits.json +28 -0
  214. package/docs/img/concorde/plane_01.jpg +0 -0
  215. package/docs/img/concorde/plane_02.jpg +0 -0
  216. package/docs/img/concorde/plane_03.jpg +0 -0
  217. package/docs/img/concorde/plane_04.jpg +0 -0
  218. package/docs/img/concorde/plane_05.jpg +0 -0
  219. package/docs/img/concorde/plane_06.jpg +0 -0
  220. package/docs/img/concorde/plane_07.jpg +0 -0
  221. package/docs/img/concorde/plane_08.jpg +0 -0
  222. package/docs/img/concorde/plane_09.jpg +0 -0
  223. package/docs/img/concorde/plane_10.jpg +0 -0
  224. package/docs/img/concorde/plane_11.jpg +0 -0
  225. package/docs/img/concorde/plane_12.jpg +0 -0
  226. package/docs/img/concorde/plane_13.jpg +0 -0
  227. package/docs/index.html +96 -67
  228. package/docs/index.md +22 -0
  229. package/docs/llms-full.txt +3329 -3295
  230. package/docs/llms.txt +94 -92
  231. package/docs/robots.txt +11 -10
  232. package/docs/sitemap.xml +78 -78
  233. package/docs/src/core/components/functional/date/date.md +91 -231
  234. package/docs/src/core/components/functional/fetch/fetch.md +66 -83
  235. package/docs/src/core/components/functional/if/if.md +28 -3
  236. package/docs/src/core/components/functional/jsonata/jsonata.md +42 -37
  237. package/docs/src/core/components/functional/list/list.md +99 -43
  238. package/docs/src/core/components/functional/mix/mix.md +31 -26
  239. package/docs/src/core/components/functional/queue/queue.md +40 -61
  240. package/docs/src/core/components/functional/router/router.md +64 -65
  241. package/docs/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
  242. package/docs/src/core/components/functional/sdui/component-catalog.json +3103 -0
  243. package/docs/src/core/components/functional/sdui/example.json +19 -86
  244. package/docs/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
  245. package/docs/src/core/components/functional/sdui/sdui.md +196 -245
  246. package/docs/src/core/components/functional/states/states.md +86 -61
  247. package/docs/src/core/components/functional/submit/submit.md +64 -72
  248. package/docs/src/core/components/functional/translation/translation.md +38 -0
  249. package/docs/src/core/components/functional/value/value.md +34 -22
  250. package/docs/src/core/components/ui/alert/alert.md +139 -74
  251. package/docs/src/core/components/ui/alert-messages/alert-messages.md +85 -0
  252. package/docs/src/core/components/ui/badge/badge.md +137 -83
  253. package/docs/src/core/components/ui/button/button.md +139 -105
  254. package/docs/src/core/components/ui/captcha/captcha.md +50 -6
  255. package/docs/src/core/components/ui/card/card.md +183 -65
  256. package/docs/src/core/components/ui/divider/divider.md +104 -13
  257. package/docs/src/core/components/ui/form/checkbox/checkbox.md +90 -42
  258. package/docs/src/core/components/ui/form/fieldset/fieldset.md +135 -103
  259. package/docs/src/core/components/ui/form/form-actions/form-actions.md +71 -50
  260. package/docs/src/core/components/ui/form/form-layout/form-layout.md +99 -34
  261. package/docs/src/core/components/ui/form/input/input.md +95 -95
  262. package/docs/src/core/components/ui/form/radio/radio.md +55 -34
  263. package/docs/src/core/components/ui/form/select/select.md +60 -45
  264. package/docs/src/core/components/ui/form/switch/switch.md +57 -34
  265. package/docs/src/core/components/ui/form/textarea/textarea.md +55 -38
  266. package/docs/src/core/components/ui/group/group.md +49 -47
  267. package/docs/src/core/components/ui/icon/icon.md +132 -43
  268. package/docs/src/core/components/ui/image/image.md +132 -72
  269. package/docs/src/core/components/ui/link/link.md +46 -8
  270. package/docs/src/core/components/ui/loader/loader.md +55 -23
  271. package/docs/src/core/components/ui/menu/menu.md +155 -114
  272. package/docs/src/core/components/ui/modal/modal.md +154 -62
  273. package/docs/src/core/components/ui/pop/pop.md +185 -65
  274. package/docs/src/core/components/ui/progress/progress.md +76 -30
  275. package/docs/src/core/components/ui/table/table.md +146 -334
  276. package/docs/src/core/components/ui/theme/theme.md +97 -0
  277. package/docs/src/core/components/ui/toast/toast.md +80 -99
  278. package/docs/src/core/components/ui/tooltip/tooltip.md +52 -45
  279. package/docs/src/docs/decorators/ancestor-attribute.md +59 -0
  280. package/docs/src/docs/decorators/auto-subscribe.md +40 -0
  281. package/docs/src/docs/decorators/bind.md +77 -0
  282. package/docs/src/docs/decorators/get.md +160 -0
  283. package/docs/src/docs/decorators/handle.md +119 -0
  284. package/docs/src/docs/decorators/on-assign.md +63 -0
  285. package/docs/src/docs/decorators/patch.md +44 -0
  286. package/docs/src/docs/decorators/post.md +134 -0
  287. package/docs/src/docs/decorators/publish.md +56 -0
  288. package/docs/src/docs/decorators/put.md +51 -0
  289. package/docs/src/docs/decorators/subscribe.md +87 -0
  290. package/docs/src/docs/decorators/wait-for-ancestors.md +76 -0
  291. package/docs/src/docs/directives/sub.md +75 -0
  292. package/docs/src/docs/directives/t.md +73 -0
  293. package/docs/src/docs/{_getting-started → getting-started}/ai-agents.md +3 -3
  294. package/docs/src/docs/getting-started/components.md +5 -0
  295. package/{src/docs/_getting-started → docs/src/docs/getting-started}/create-a-component.md +3 -6
  296. package/{src/docs/_core-concept → docs/src/docs/getting-started}/dataFlow.md +17 -18
  297. package/docs/src/docs/getting-started/installation.md +36 -0
  298. package/{src/docs/_getting-started → docs/src/docs/getting-started}/my-first-component.md +5 -14
  299. package/docs/src/docs/getting-started/start.md +35 -0
  300. package/docs/src/docs/getting-started/theming.md +253 -0
  301. package/{src/docs/_misc → docs/src/docs/misc}/api-configuration.md +10 -12
  302. package/docs/src/docs/{_misc → misc}/dataProviderKey.md +4 -4
  303. package/{src/docs/_misc → docs/src/docs/misc}/docs-mock-api.md +12 -13
  304. package/docs/src/docs/{_misc → misc}/dynamic-path.md +8 -8
  305. package/docs/src/docs/{_misc → misc}/endpoint.md +8 -8
  306. package/{src/docs/_misc → docs/src/docs/misc}/html-integration.md +4 -5
  307. package/docs/src/docs/search/docs-search.json +3729 -2949
  308. package/docs/src/tsconfig.json +176 -5
  309. package/index.html +94 -67
  310. package/package.json +11 -4
  311. package/public/docs-mock-api-sw.js +58 -223
  312. package/public/docs-mock-api-sw.js.map +4 -4
  313. package/public/img/archive/concorde-001-2cv.webp +0 -0
  314. package/public/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  315. package/public/img/archive/concorde-red-arrows-2002.webm +0 -0
  316. package/public/img/archive/credits.json +28 -0
  317. package/public/img/concorde/plane_01.jpg +0 -0
  318. package/public/img/concorde/plane_02.jpg +0 -0
  319. package/public/img/concorde/plane_03.jpg +0 -0
  320. package/public/img/concorde/plane_04.jpg +0 -0
  321. package/public/img/concorde/plane_05.jpg +0 -0
  322. package/public/img/concorde/plane_06.jpg +0 -0
  323. package/public/img/concorde/plane_07.jpg +0 -0
  324. package/public/img/concorde/plane_08.jpg +0 -0
  325. package/public/img/concorde/plane_09.jpg +0 -0
  326. package/public/img/concorde/plane_10.jpg +0 -0
  327. package/public/img/concorde/plane_11.jpg +0 -0
  328. package/public/img/concorde/plane_12.jpg +0 -0
  329. package/public/img/concorde/plane_13.jpg +0 -0
  330. package/public/robots.txt +11 -10
  331. package/scripts/docs-markdown-vite-plugin.ts +37 -0
  332. package/scripts/docs-public-url.mjs +50 -0
  333. package/scripts/docs.htaccess +75 -0
  334. package/scripts/generate-crawl-docs.mjs +207 -116
  335. package/scripts/generate-crawl-docs.test.mjs +124 -0
  336. package/scripts/post-build-docs.js +34 -50
  337. package/scripts/post-build.mjs +0 -0
  338. package/src/core/components/functional/date/date.md +91 -231
  339. package/src/core/components/functional/fetch/fetch.md +66 -83
  340. package/src/core/components/functional/if/if.md +28 -3
  341. package/src/core/components/functional/if/if.ts +0 -0
  342. package/src/core/components/functional/jsonata/jsonata.md +42 -37
  343. package/src/core/components/functional/list/list.demo.ts +0 -0
  344. package/src/core/components/functional/list/list.md +99 -43
  345. package/src/core/components/functional/mix/mix.md +31 -26
  346. package/src/core/components/functional/queue/queue.demo.ts +10 -7
  347. package/src/core/components/functional/queue/queue.md +40 -61
  348. package/src/core/components/functional/router/router.demo.ts +16 -16
  349. package/src/core/components/functional/router/router.md +64 -65
  350. package/src/core/components/functional/router/router.ts +0 -0
  351. package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +0 -0
  352. package/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
  353. package/src/core/components/functional/sdui/component-catalog.json +1 -1
  354. package/src/core/components/functional/sdui/example.json +19 -86
  355. package/src/core/components/functional/sdui/sdui-extension-points.md +1 -1
  356. package/src/core/components/functional/sdui/sdui.md +187 -358
  357. package/src/core/components/functional/sdui/types.ts +0 -0
  358. package/src/core/components/functional/states/states.demo.ts +21 -22
  359. package/src/core/components/functional/states/states.md +86 -61
  360. package/src/core/components/functional/states/states.ts +1 -1
  361. package/src/core/components/functional/submit/submit.md +64 -72
  362. package/src/core/components/functional/subscriber/subscriber.ts +0 -0
  363. package/src/core/components/functional/translation/translation.md +38 -0
  364. package/src/core/components/functional/value/value.md +34 -22
  365. package/src/core/components/functional/value/value.ts +0 -0
  366. package/src/core/components/ui/_css/size.ts +0 -0
  367. package/src/core/components/ui/alert/alert.md +48 -58
  368. package/src/core/components/ui/badge/badge.md +27 -34
  369. package/src/core/components/ui/button/button.md +139 -106
  370. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  371. package/src/core/components/ui/captcha/captcha.md +17 -32
  372. package/src/core/components/ui/card/card.md +6 -6
  373. package/src/core/components/ui/divider/divider.md +8 -11
  374. package/src/core/components/ui/form/checkbox/checkbox.md +90 -42
  375. package/src/core/components/ui/form/fieldset/fieldset.md +31 -75
  376. package/src/core/components/ui/form/form-actions/form-actions.md +14 -16
  377. package/src/core/components/ui/form/form-layout/form-layout.md +19 -29
  378. package/src/core/components/ui/form/input/input.md +95 -95
  379. package/src/core/components/ui/form/radio/radio.md +55 -34
  380. package/src/core/components/ui/form/select/select.md +60 -45
  381. package/src/core/components/ui/form/switch/switch.md +57 -34
  382. package/src/core/components/ui/form/textarea/textarea.md +55 -38
  383. package/src/core/components/ui/group/group.md +35 -33
  384. package/src/core/components/ui/icon/icon.md +4 -4
  385. package/src/core/components/ui/image/image.md +41 -107
  386. package/src/core/components/ui/link/link.md +6 -6
  387. package/src/core/components/ui/loader/loader.md +30 -55
  388. package/src/core/components/ui/menu/menu.md +27 -27
  389. package/src/core/components/ui/modal/modal.md +72 -96
  390. package/src/core/components/ui/modal/modal.ts +14 -11
  391. package/src/core/components/ui/pop/pop.md +80 -158
  392. package/src/core/components/ui/progress/progress.md +2 -2
  393. package/src/core/components/ui/table/table.md +91 -255
  394. package/src/core/components/ui/theme/theme.md +11 -36
  395. package/src/core/components/ui/toast/toast.md +48 -117
  396. package/src/core/components/ui/tooltip/tooltip.md +27 -62
  397. package/src/core/mixins/Subscriber.ts +0 -0
  398. package/src/core/utils/DataBindObserver.ts +0 -0
  399. package/src/core/utils/LocationHandler.spec.ts +80 -0
  400. package/src/core/utils/LocationHandler.ts +5 -9
  401. package/src/core/utils/Objects.ts +0 -0
  402. package/src/core/utils/route.ts +0 -0
  403. package/src/docs/code.ts +88 -75
  404. package/src/docs/components/docs-demo-sources.ts +70 -147
  405. package/src/docs/components/docs-lit-demo.ts +20 -40
  406. package/src/docs/components/docs-source-link.ts +0 -82
  407. package/src/docs/decorators/ancestor-attribute.md +59 -0
  408. package/src/docs/decorators/auto-subscribe.md +40 -0
  409. package/src/docs/decorators/bind.md +77 -0
  410. package/src/docs/decorators/get.md +160 -0
  411. package/src/docs/decorators/handle.md +119 -0
  412. package/src/docs/decorators/on-assign.md +63 -0
  413. package/src/docs/decorators/patch.md +44 -0
  414. package/src/docs/decorators/post.md +134 -0
  415. package/src/docs/decorators/publish.md +56 -0
  416. package/src/docs/decorators/put.md +51 -0
  417. package/src/docs/decorators/subscribe.md +87 -0
  418. package/src/docs/decorators/wait-for-ancestors.md +76 -0
  419. package/src/docs/directives/sub.md +75 -0
  420. package/src/docs/directives/t.md +73 -0
  421. package/src/docs/docs-location.spec.ts +46 -0
  422. package/src/docs/docs-location.ts +123 -32
  423. package/src/docs/docs.ts +6 -2
  424. package/src/docs/example/decorators-demo-bind-demos.ts +81 -116
  425. package/src/docs/example/decorators-demo-geo.ts +30 -19
  426. package/src/docs/example/decorators-demo-post.ts +88 -186
  427. package/src/docs/example/decorators-demo-subscribe-publish-get-demos.ts +165 -268
  428. package/src/docs/example/decorators-demo.ts +85 -98
  429. package/src/docs/example/docs-api-config-demos.ts +19 -20
  430. package/src/docs/example/docs-boarding-pass-demo.ts +134 -0
  431. package/src/docs/example/docs-flight-demos.ts +147 -0
  432. package/src/docs/example/docs-jsonata-demos.ts +52 -52
  433. package/src/docs/example/docs-list-demos.ts +43 -123
  434. package/src/docs/example/docs-provider-keys.ts +33 -28
  435. package/src/docs/example/docs-queue-demos.ts +37 -77
  436. package/src/docs/example/docs-router-demos.ts +20 -25
  437. package/src/docs/example/docs-submit-demos.ts +48 -48
  438. package/src/docs/example/docs-toggle-demos.ts +4 -3
  439. package/src/docs/example/users.ts +0 -0
  440. package/src/docs/getting-started/ai-agents.md +76 -0
  441. package/src/docs/getting-started/components.md +5 -0
  442. package/src/docs/getting-started/create-a-component.md +136 -0
  443. package/src/docs/getting-started/dataFlow.md +87 -0
  444. package/src/docs/getting-started/installation.md +36 -0
  445. package/src/docs/getting-started/my-first-component.md +227 -0
  446. package/src/docs/getting-started/start.md +35 -0
  447. package/src/docs/getting-started/theming.md +253 -0
  448. package/src/docs/header/header.ts +240 -71
  449. package/src/docs/home/catalog.ts +44 -0
  450. package/src/docs/home/home.ts +520 -0
  451. package/src/docs/home/mach-stage.ts +389 -0
  452. package/src/docs/layout.ts +12 -11
  453. package/src/docs/misc/api-configuration.md +79 -0
  454. package/src/docs/misc/dataProviderKey.md +168 -0
  455. package/src/docs/misc/docs-mock-api.md +62 -0
  456. package/src/docs/misc/dynamic-path.md +71 -0
  457. package/src/docs/misc/endpoint.md +45 -0
  458. package/src/docs/misc/html-integration.md +14 -0
  459. package/src/docs/mock-api/api-config-mock.ts +5 -0
  460. package/src/docs/mock-api/fixtures.ts +0 -278
  461. package/src/docs/mock-api/flights.ts +89 -0
  462. package/src/docs/mock-api/router.ts +3 -4
  463. package/src/docs/mock-api/urls.ts +1 -2
  464. package/src/docs/navigation/components-index.ts +56 -0
  465. package/src/docs/navigation/navigation.ts +219 -232
  466. package/src/docs/navigation/pager.ts +67 -0
  467. package/src/docs/navigation/toc.ts +101 -0
  468. package/src/docs/search/docs-search.json +2419 -4374
  469. package/src/docs/search/markdown-renderer.ts +33 -7
  470. package/src/docs/search/page.ts +9 -6
  471. package/src/docs/search/search.ts +154 -122
  472. package/src/docs/shiki/index.ts +109 -0
  473. package/src/docs/tailwind/css/base/scrollbar.css +22 -0
  474. package/src/docs/tailwind/css/base/theme.css +96 -0
  475. package/src/docs/tailwind/css/base/typography.css +4 -0
  476. package/src/docs/tailwind/css/docs/boarding-pass.css +65 -0
  477. package/src/docs/tailwind/css/docs/content.css +32 -0
  478. package/src/docs/tailwind/css/docs/page.css +10 -0
  479. package/src/docs/tailwind/css/docs.css +9 -0
  480. package/src/docs/tailwind/css/home/hero.css +210 -0
  481. package/src/docs/tailwind/css/home/motion.css +84 -0
  482. package/src/docs/tailwind/css/home/sections.css +416 -0
  483. package/src/docs/tailwind/css/tailwind.css +7 -185
  484. package/src/tsconfig.json +23 -2
  485. package/src/tsconfig.tsbuildinfo +1 -1
  486. package/tailwind.config.js +8 -4
  487. package/vite.config.mts +11 -2
  488. package/.agents/skills/concorde-component-docs/SKILL.md +0 -194
  489. package/.github/workflows/ci.yml +0 -21
  490. package/.github-export-ignore +0 -30
  491. package/CONTRIBUTING.md +0 -59
  492. package/DEV.md +0 -54
  493. package/LICENSE +0 -21
  494. package/OPEN_SOURCE_CHECKPOINT.md +0 -133
  495. package/concorde-3d.bundle.js +0 -3960
  496. package/concorde-3d.es.js +0 -33433
  497. package/concorde-hugging-face-infer.bundle.js +0 -32
  498. package/concorde-hugging-face-infer.es.js +0 -2952
  499. package/concorde-interactive.bundle.js +0 -1157
  500. package/concorde-interactive.es.js +0 -10734
  501. package/concorde-shader.bundle.js +0 -116
  502. package/concorde-shader.es.js +0 -8353
  503. package/concorde-webgpu.bundle.js +0 -307
  504. package/concorde-webgpu.es.js +0 -8627
  505. package/docs/assets/index-D8MVWqY6.js +0 -12251
  506. package/docs/assets/index-DiD0qYvE.css +0 -1
  507. package/docs/crawl/core/components/functional/date/date.html +0 -190
  508. package/docs/crawl/core/components/functional/fetch/fetch.html +0 -109
  509. package/docs/crawl/core/components/functional/if/if.html +0 -27
  510. package/docs/crawl/core/components/functional/jsonata/jsonata.html +0 -79
  511. package/docs/crawl/core/components/functional/list/list.html +0 -70
  512. package/docs/crawl/core/components/functional/mix/mix.html +0 -45
  513. package/docs/crawl/core/components/functional/queue/queue.html +0 -96
  514. package/docs/crawl/core/components/functional/router/router.html +0 -106
  515. package/docs/crawl/core/components/functional/sdui/sdui.html +0 -269
  516. package/docs/crawl/core/components/functional/states/states.html +0 -66
  517. package/docs/crawl/core/components/functional/submit/submit.html +0 -160
  518. package/docs/crawl/core/components/functional/value/value.html +0 -51
  519. package/docs/crawl/core/components/ui/alert/alert.html +0 -110
  520. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +0 -23
  521. package/docs/crawl/core/components/ui/badge/badge.html +0 -119
  522. package/docs/crawl/core/components/ui/button/button.html +0 -149
  523. package/docs/crawl/core/components/ui/captcha/captcha.html +0 -30
  524. package/docs/crawl/core/components/ui/card/card.html +0 -99
  525. package/docs/crawl/core/components/ui/divider/divider.html +0 -58
  526. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +0 -73
  527. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +0 -135
  528. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +0 -79
  529. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +0 -62
  530. package/docs/crawl/core/components/ui/form/input/input.html +0 -109
  531. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +0 -38
  532. package/docs/crawl/core/components/ui/form/radio/radio.html +0 -56
  533. package/docs/crawl/core/components/ui/form/select/select.html +0 -73
  534. package/docs/crawl/core/components/ui/form/switch/switch.html +0 -56
  535. package/docs/crawl/core/components/ui/form/textarea/textarea.html +0 -59
  536. package/docs/crawl/core/components/ui/group/group.html +0 -82
  537. package/docs/crawl/core/components/ui/icon/icon.html +0 -133
  538. package/docs/crawl/core/components/ui/image/image.html +0 -110
  539. package/docs/crawl/core/components/ui/link/link.html +0 -42
  540. package/docs/crawl/core/components/ui/loader/loader.html +0 -50
  541. package/docs/crawl/core/components/ui/modal/modal.html +0 -117
  542. package/docs/crawl/core/components/ui/pop/pop.html +0 -102
  543. package/docs/crawl/core/components/ui/progress/progress.html +0 -58
  544. package/docs/crawl/core/components/ui/table/table.html +0 -413
  545. package/docs/crawl/core/components/ui/toast/toast.html +0 -122
  546. package/docs/crawl/core/components/ui/tooltip/tooltip.html +0 -79
  547. package/docs/crawl/docs/_core-concept/overview.html +0 -66
  548. package/docs/crawl/docs/_core-concept/subscriber.html +0 -75
  549. package/docs/crawl/docs/_decorators/ancestor-attribute.html +0 -116
  550. package/docs/crawl/docs/_decorators/auto-subscribe.html +0 -202
  551. package/docs/crawl/docs/_decorators/bind.html +0 -141
  552. package/docs/crawl/docs/_decorators/get.html +0 -149
  553. package/docs/crawl/docs/_decorators/handle.html +0 -165
  554. package/docs/crawl/docs/_decorators/on-assign.html +0 -355
  555. package/docs/crawl/docs/_decorators/patch.html +0 -78
  556. package/docs/crawl/docs/_decorators/post.html +0 -139
  557. package/docs/crawl/docs/_decorators/publish.html +0 -61
  558. package/docs/crawl/docs/_decorators/put.html +0 -78
  559. package/docs/crawl/docs/_decorators/subscribe.html +0 -109
  560. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +0 -137
  561. package/docs/crawl/docs/_directives/sub.html +0 -93
  562. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +0 -100
  563. package/docs/crawl/docs/_getting-started/concorde-outside.html +0 -58
  564. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +0 -110
  565. package/docs/crawl/docs/_getting-started/pubsub.html +0 -62
  566. package/docs/crawl/docs/_getting-started/start.html +0 -76
  567. package/docs/crawl/docs/_getting-started/theming.html +0 -85
  568. package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +0 -138
  569. package/docs/crawl/hubs/decorators.html +0 -547
  570. package/docs/crawl/hubs/form-components.html +0 -359
  571. package/docs/crawl/hubs/remote-data.html +0 -452
  572. package/docs/crawl/index.html +0 -101
  573. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
  574. package/docs/src/docs/_core-concept/overview.md +0 -57
  575. package/docs/src/docs/_core-concept/subscriber.md +0 -75
  576. package/docs/src/docs/_decorators/ancestor-attribute.md +0 -127
  577. package/docs/src/docs/_decorators/auto-subscribe.md +0 -202
  578. package/docs/src/docs/_decorators/bind.md +0 -167
  579. package/docs/src/docs/_decorators/get.md +0 -162
  580. package/docs/src/docs/_decorators/handle.md +0 -175
  581. package/docs/src/docs/_decorators/on-assign.md +0 -390
  582. package/docs/src/docs/_decorators/patch.md +0 -70
  583. package/docs/src/docs/_decorators/post.md +0 -146
  584. package/docs/src/docs/_decorators/publish.md +0 -55
  585. package/docs/src/docs/_decorators/put.md +0 -70
  586. package/docs/src/docs/_decorators/subscribe.md +0 -100
  587. package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -163
  588. package/docs/src/docs/_directives/sub.md +0 -91
  589. package/docs/src/docs/_getting-started/concorde-manual-install.md +0 -133
  590. package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
  591. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -120
  592. package/docs/src/docs/_getting-started/pubsub.md +0 -37
  593. package/docs/src/docs/_getting-started/start.md +0 -47
  594. package/docs/src/docs/_getting-started/theming.md +0 -91
  595. package/docs/src/docs/_misc/formelement-subscriber-removal.md +0 -115
  596. package/docs/src/tsconfig.declarations.json +0 -22
  597. package/docs/src/tsconfig.emit.json +0 -23
  598. package/gitlab/job_github_mirror.sh +0 -39
  599. package/scripts/github-export.mjs +0 -150
  600. package/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
  601. package/src/css.d.ts +0 -19
  602. package/src/docs/_core-concept/overview.md +0 -57
  603. package/src/docs/_core-concept/subscriber.md +0 -75
  604. package/src/docs/_decorators/ancestor-attribute.md +0 -128
  605. package/src/docs/_decorators/auto-subscribe.md +0 -202
  606. package/src/docs/_decorators/bind.md +0 -167
  607. package/src/docs/_decorators/get.md +0 -162
  608. package/src/docs/_decorators/handle.md +0 -175
  609. package/src/docs/_decorators/on-assign.md +0 -390
  610. package/src/docs/_decorators/patch.md +0 -70
  611. package/src/docs/_decorators/post.md +0 -146
  612. package/src/docs/_decorators/publish.md +0 -55
  613. package/src/docs/_decorators/put.md +0 -70
  614. package/src/docs/_decorators/subscribe.md +0 -100
  615. package/src/docs/_decorators/wait-for-ancestors.md +0 -163
  616. package/src/docs/_directives/sub.md +0 -91
  617. package/src/docs/_getting-started/concorde-manual-install.md +0 -133
  618. package/src/docs/_getting-started/concorde-outside.md +0 -33
  619. package/src/docs/_getting-started/my-first-subscriber.md +0 -120
  620. package/src/docs/_getting-started/pubsub.md +0 -37
  621. package/src/docs/_misc/formelement-subscriber-removal.md +0 -115
  622. package/src/docs/example/docs-input-autocomplete-demos.ts +0 -110
  623. package/src/docs/example/docs-joke-demos.ts +0 -297
  624. package/src/docs/prism/index.ts +0 -6
  625. package/src/docs/prism/prism.css +0 -158
  626. package/src/docs/prism/prism.js +0 -1022
  627. package/src/tsconfig.declarations.json +0 -22
  628. package/src/tsconfig.emit.json +0 -23
@@ -0,0 +1,309 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/button" data-doc-id="core/components/ui/button/button">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Button — Concorde by Supersoniks</title>
7
+ <meta name="description" content="sonic-button is the clickable control of the library: a plain button, a link when href is set, or a form toggle when it has a name and value. It shares type / variant / size with sonic-badge, and expo">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/button/button, button, Button, UI component, sonic-button, web component, href, name, value, type, variant, size, sonic-badge, prefix, suffix">
9
+ <meta name="concorde-doc-id" content="core/components/ui/button/button">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/button">
11
+ <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/button.md">
12
+ </head>
13
+ <body>
14
+ <header>
15
+ <p><a href="/docs/index.html">Concorde documentation</a> · <a href="https://concorde.supersoniks.org/core/components/ui/button">same URL (interactive)</a> · <a href="/llms.txt">llms.txt</a></p>
16
+ </header>
17
+ <main>
18
+ <article>
19
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Button</strong>. sonic-button is the clickable control of the library: a plain button, a link when href is set, or a form toggle when it has a name and value. It shares type / variant / size with sonic-badge, and expo <span>Doc ID: <code>core/components/ui/button/button</code>. Keywords: Concorde, supersoniks, core/components/ui/button/button, button, Button, UI component, sonic-button, web component, href, name, value, type, variant, size, sonic-badge, prefix, suffix. URL: <a href="https://concorde.supersoniks.org/core/components/ui/button">https://concorde.supersoniks.org/core/components/ui/button</a>.</span></p>
20
+ <h1 id="button">Button</h1>
21
+ <p><strong><code>sonic-button</code></strong> is the clickable control of the library: a plain button, a link when <code>href</code> is set, or a form toggle when it has a <code>name</code> and <code>value</code>. It shares <code>type</code> / <code>variant</code> / <code>size</code> with <strong><code>sonic-badge</code></strong>, and exposes <code>prefix</code> / <code>suffix</code> slots for icons.</p>
22
+ <h2 id="type">Type</h2>
23
+ <p>With no <code>type</code>, the button is <code>default</code>. Use <code>custom</code> with <code>--sc-btn-custom-color</code> and <code>--sc-btn-custom-bg</code> for a one-off color.</p>
24
+ <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
25
+ &lt;sonic-button&gt;Default&lt;/sonic-button&gt;
26
+ &lt;sonic-button type=&quot;primary&quot;&gt;Primary&lt;/sonic-button&gt;
27
+ &lt;sonic-button type=&quot;neutral&quot;&gt;Neutral&lt;/sonic-button&gt;
28
+ &lt;sonic-button type=&quot;warning&quot;&gt;Warning&lt;/sonic-button&gt;
29
+ &lt;sonic-button type=&quot;info&quot;&gt;Info&lt;/sonic-button&gt;
30
+ &lt;sonic-button type=&quot;success&quot;&gt;Success&lt;/sonic-button&gt;
31
+ &lt;sonic-button type=&quot;danger&quot;&gt;Danger&lt;/sonic-button&gt;
32
+ &lt;sonic-button type=&quot;custom&quot; style=&quot;--sc-btn-custom-color: #fde68a; --sc-btn-custom-bg: #5b21b6&quot;&gt;Custom&lt;/sonic-button&gt;
33
+ &lt;/div&gt;
34
+ </code></pre>
35
+ <h2 id="variant">Variant</h2>
36
+ <p>With no <code>variant</code>, the button is filled. The <code>outline</code> / <code>ghost</code> / <code>link</code> variants take their color from <code>type</code>. <code>unstyled</code> removes all styling so you can apply your own classes.</p>
37
+ <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
38
+ &lt;sonic-button type=&quot;primary&quot;&gt;Default&lt;/sonic-button&gt;
39
+ &lt;sonic-button type=&quot;primary&quot; variant=&quot;outline&quot;&gt;Outline&lt;/sonic-button&gt;
40
+ &lt;sonic-button type=&quot;primary&quot; variant=&quot;ghost&quot;&gt;Ghost&lt;/sonic-button&gt;
41
+ &lt;sonic-button type=&quot;primary&quot; variant=&quot;link&quot;&gt;Link&lt;/sonic-button&gt;
42
+ &lt;sonic-button variant=&quot;unstyled&quot;&gt;Unstyled&lt;/sonic-button&gt;
43
+ &lt;/div&gt;
44
+ </code></pre>
45
+ <h2 id="size">Size</h2>
46
+ <p>With no <code>size</code>, the button is <code>md</code>.</p>
47
+ <pre><code>&lt;div class=&quot;flex flex-wrap items-center gap-2&quot;&gt;
48
+ &lt;sonic-button size=&quot;2xs&quot;&gt;2xs&lt;/sonic-button&gt;
49
+ &lt;sonic-button size=&quot;xs&quot;&gt;xs&lt;/sonic-button&gt;
50
+ &lt;sonic-button size=&quot;sm&quot;&gt;sm&lt;/sonic-button&gt;
51
+ &lt;sonic-button&gt;md&lt;/sonic-button&gt;
52
+ &lt;sonic-button size=&quot;lg&quot;&gt;lg&lt;/sonic-button&gt;
53
+ &lt;sonic-button size=&quot;xl&quot;&gt;xl&lt;/sonic-button&gt;
54
+ &lt;sonic-button size=&quot;2xl&quot;&gt;2xl&lt;/sonic-button&gt;
55
+ &lt;/div&gt;
56
+ </code></pre>
57
+ <h2 id="shape">Shape</h2>
58
+ <p><code>circle</code> and <code>square</code> make a fixed-size icon button. <code>block</code> stretches to the full width of the parent.</p>
59
+ <pre><code>&lt;div class=&quot;flex flex-wrap items-center gap-2 mb-2&quot;&gt;
60
+ &lt;sonic-button shape=&quot;circle&quot; type=&quot;primary&quot;&gt;&lt;sonic-icon library=&quot;iconoir&quot; name=&quot;plus&quot;&gt;&lt;/sonic-icon&gt;&lt;/sonic-button&gt;
61
+ &lt;sonic-button shape=&quot;square&quot; type=&quot;primary&quot;&gt;&lt;sonic-icon library=&quot;iconoir&quot; name=&quot;plus&quot;&gt;&lt;/sonic-icon&gt;&lt;/sonic-button&gt;
62
+ &lt;/div&gt;
63
+ &lt;sonic-button shape=&quot;block&quot; type=&quot;primary&quot;&gt;Block&lt;/sonic-button&gt;
64
+ </code></pre>
65
+ <h2 id="prefix-and-suffix-slots">Prefix and suffix slots</h2>
66
+ <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
67
+ &lt;sonic-button type=&quot;primary&quot; variant=&quot;outline&quot;&gt;
68
+ &lt;sonic-icon library=&quot;iconoir&quot; slot=&quot;prefix&quot; name=&quot;arrow-left&quot;&gt;&lt;/sonic-icon&gt;
69
+ Previous flight
70
+ &lt;/sonic-button&gt;
71
+ &lt;sonic-button type=&quot;primary&quot;&gt;
72
+ Next flight
73
+ &lt;sonic-icon library=&quot;iconoir&quot; slot=&quot;suffix&quot; name=&quot;arrow-right&quot;&gt;&lt;/sonic-icon&gt;
74
+ &lt;/sonic-button&gt;
75
+ &lt;/div&gt;
76
+ </code></pre>
77
+ <h2 id="loading">Loading</h2>
78
+ <p><code>loading</code> replaces the content with a spinner and blocks clicks. The button keeps the width of its content.</p>
79
+ <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
80
+ &lt;sonic-button loading&gt;&lt;/sonic-button&gt;
81
+ &lt;sonic-button loading&gt;Loading button&lt;/sonic-button&gt;
82
+ &lt;sonic-button loading type=&quot;primary&quot;&gt;
83
+ &lt;sonic-icon library=&quot;iconoir&quot; slot=&quot;prefix&quot; name=&quot;check&quot;&gt;&lt;/sonic-icon&gt;
84
+ Checking in
85
+ &lt;/sonic-button&gt;
86
+ &lt;/div&gt;
87
+ </code></pre>
88
+ <h2 id="link">Link</h2>
89
+ <p>With <code>href</code>, the button renders as a link. For a relative <code>href</code>, the button gets <code>active</code> when the current URL matches, according to <code>autoActive</code> (default <code>partial</code>). Add <code>pushState</code> to navigate without reloading the page.</p>
90
+ <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
91
+ &lt;sonic-button href=&quot;https://example.com&quot; target=&quot;_blank&quot; type=&quot;primary&quot;&gt;External link&lt;/sonic-button&gt;
92
+ &lt;sonic-button href=&quot;/core/components/ui/button&quot; variant=&quot;ghost&quot;&gt;Current page&lt;/sonic-button&gt;
93
+ &lt;/div&gt;
94
+ </code></pre>
95
+ <h2 id="toggle-and-radio">Toggle and radio</h2>
96
+ <p>A button with <code>name</code> and <code>value</code> writes to its <code>formDataProvider</code> and toggles <code>active</code> when clicked. Add <code>radio</code> for a single choice in a group, or <code>unique</code> to also allow deselecting. Children marked <code>swap=&quot;on&quot;</code> / <code>swap=&quot;off&quot;</code> show only in the active / inactive state.</p>
97
+ <pre><code>&lt;div class=&quot;flex flex-wrap items-center gap-4&quot;&gt;
98
+ &lt;sonic-button formDataProvider=&quot;button-toggle-demo&quot; name=&quot;visible&quot; value=&quot;yes&quot; type=&quot;primary&quot; shape=&quot;circle&quot; variant=&quot;outline&quot;&gt;
99
+ &lt;sonic-icon library=&quot;iconoir&quot; swap=&quot;on&quot; name=&quot;eye-empty&quot;&gt;&lt;/sonic-icon&gt;
100
+ &lt;sonic-icon library=&quot;iconoir&quot; swap=&quot;off&quot; name=&quot;eye-off&quot;&gt;&lt;/sonic-icon&gt;
101
+ &lt;/sonic-button&gt;
102
+ &lt;sonic-group formDataProvider=&quot;button-radio-demo&quot;&gt;
103
+ &lt;sonic-button radio minWidth=&quot;7rem&quot; name=&quot;plan&quot; value=&quot;free&quot;&gt;Free&lt;/sonic-button&gt;
104
+ &lt;sonic-button radio minWidth=&quot;7rem&quot; name=&quot;plan&quot; value=&quot;pro&quot;&gt;Pro&lt;/sonic-button&gt;
105
+ &lt;sonic-button radio minWidth=&quot;7rem&quot; name=&quot;plan&quot; value=&quot;team&quot;&gt;Team&lt;/sonic-button&gt;
106
+ &lt;/sonic-group&gt;
107
+ &lt;/div&gt;
108
+ </code></pre>
109
+ <h2 id="reset">Reset</h2>
110
+ <p><code>reset</code> clears the button&#39;s own <code>formDataProvider</code>. Give it a value to clear another one by name.</p>
111
+ <pre><code>&lt;div formDataProvider=&quot;button-reset-demo&quot; class=&quot;mb-2&quot;&gt;
112
+ &lt;sonic-checkbox name=&quot;agree&quot; value=&quot;yes&quot;&gt;Extra baggage&lt;/sonic-checkbox&gt;
113
+ &lt;sonic-button reset&gt;Reset this form&lt;/sonic-button&gt;
114
+ &lt;/div&gt;
115
+ &lt;sonic-button reset=&quot;button-reset-demo&quot;&gt;Reset by name&lt;/sonic-button&gt;
116
+ </code></pre>
117
+ <h2 id="go-back">Go back</h2>
118
+ <p><code>goBack</code> navigates back in history. When there is no previous page on the same origin, it goes to the attribute value, or to the site root if empty.</p>
119
+ <pre><code>&lt;sonic-button goBack=&quot;/&quot; variant=&quot;outline&quot;&gt;
120
+ &lt;sonic-icon library=&quot;iconoir&quot; slot=&quot;prefix&quot; name=&quot;arrow-left&quot;&gt;&lt;/sonic-icon&gt;
121
+ Back
122
+ &lt;/sonic-button&gt;
123
+ </code></pre>
124
+ <h2 id="accessibility">Accessibility</h2>
125
+ <p>Icon-only buttons need a label. Use <code>data-aria-label</code>, which is forwarded to the inner <code>button</code> (and link).</p>
126
+ <pre><code>&lt;sonic-button shape=&quot;circle&quot; data-aria-label=&quot;Close&quot;&gt;
127
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;cancel&quot;&gt;&lt;/sonic-icon&gt;
128
+ &lt;/sonic-button&gt;
129
+ </code></pre>
130
+ <h2 id="api-reference">API reference</h2>
131
+ <table>
132
+ <thead>
133
+ <tr>
134
+ <th>Attribute</th>
135
+ <th>Values</th>
136
+ <th>Description</th>
137
+ </tr>
138
+ </thead>
139
+ <tbody><tr>
140
+ <td><code>type</code></td>
141
+ <td><code>default</code> (default) · <code>primary</code> · <code>neutral</code> · <code>warning</code> · <code>info</code> · <code>success</code> · <code>danger</code> · <code>custom</code></td>
142
+ <td>Color; <code>custom</code> reads <code>--sc-btn-custom-color</code> and <code>--sc-btn-custom-bg</code></td>
143
+ </tr>
144
+ <tr>
145
+ <td><code>variant</code></td>
146
+ <td><code>default</code> (default) · <code>outline</code> · <code>ghost</code> · <code>link</code> · <code>unstyled</code></td>
147
+ <td>Visual style</td>
148
+ </tr>
149
+ <tr>
150
+ <td><code>size</code></td>
151
+ <td><code>2xs</code> … <code>2xl</code> (default <code>md</code>) · <code>inherit</code></td>
152
+ <td>Typography and padding</td>
153
+ </tr>
154
+ <tr>
155
+ <td><code>shape</code></td>
156
+ <td><code>default</code> (default) · <code>circle</code> · <code>square</code> · <code>block</code></td>
157
+ <td>Icon button or full width</td>
158
+ </tr>
159
+ <tr>
160
+ <td><code>icon</code></td>
161
+ <td>boolean</td>
162
+ <td>Enlarges a lone icon</td>
163
+ </tr>
164
+ <tr>
165
+ <td><code>loading</code></td>
166
+ <td>boolean</td>
167
+ <td>Shows a spinner and blocks clicks</td>
168
+ </tr>
169
+ <tr>
170
+ <td><code>disabled</code></td>
171
+ <td>boolean</td>
172
+ <td>Dims the button and blocks clicks</td>
173
+ </tr>
174
+ <tr>
175
+ <td><code>active</code></td>
176
+ <td>boolean</td>
177
+ <td>Active state, set automatically for links and toggles</td>
178
+ </tr>
179
+ <tr>
180
+ <td><code>align</code></td>
181
+ <td><code>left</code> · <code>center</code> · <code>right</code></td>
182
+ <td>Text alignment</td>
183
+ </tr>
184
+ <tr>
185
+ <td><code>direction</code></td>
186
+ <td>flex direction (default <code>row</code>)</td>
187
+ <td>Layout of slots</td>
188
+ </tr>
189
+ <tr>
190
+ <td><code>alignItems</code></td>
191
+ <td>flex <code>align-items</code> (default <code>center</code>)</td>
192
+ <td>Cross-axis alignment of slots</td>
193
+ </tr>
194
+ <tr>
195
+ <td><code>justify</code></td>
196
+ <td>flex <code>justify-content</code> (default <code>center</code>)</td>
197
+ <td>Main-axis alignment of slots</td>
198
+ </tr>
199
+ <tr>
200
+ <td><code>minWidth</code></td>
201
+ <td>CSS length (default <code>0</code>)</td>
202
+ <td>Minimum width of the button</td>
203
+ </tr>
204
+ <tr>
205
+ <td><code>href</code></td>
206
+ <td>URL</td>
207
+ <td>Renders the button as a link</td>
208
+ </tr>
209
+ <tr>
210
+ <td><code>target</code></td>
211
+ <td><code>_self</code> · <code>_blank</code> · <code>_parent</code> · <code>_top</code></td>
212
+ <td>Link target</td>
213
+ </tr>
214
+ <tr>
215
+ <td><code>download</code></td>
216
+ <td>string</td>
217
+ <td>Link <code>download</code> attribute</td>
218
+ </tr>
219
+ <tr>
220
+ <td><code>pushState</code></td>
221
+ <td>boolean</td>
222
+ <td>Navigates with <code>history.pushState</code></td>
223
+ </tr>
224
+ <tr>
225
+ <td><code>autoActive</code></td>
226
+ <td><code>partial</code> (default) · <code>strict</code> · <code>strict-path-only</code> · <code>disabled</code></td>
227
+ <td>URL matching for <code>active</code></td>
228
+ </tr>
229
+ <tr>
230
+ <td><code>goBack</code></td>
231
+ <td>URL or empty</td>
232
+ <td>Goes back in history, with a fallback URL</td>
233
+ </tr>
234
+ <tr>
235
+ <td><code>reset</code></td>
236
+ <td>empty or provider name</td>
237
+ <td>Clears the current or named form data provider</td>
238
+ </tr>
239
+ <tr>
240
+ <td><code>name</code> / <code>value</code></td>
241
+ <td>string</td>
242
+ <td>Form field written to the data provider</td>
243
+ </tr>
244
+ <tr>
245
+ <td><code>formDataProvider</code></td>
246
+ <td>string</td>
247
+ <td>Data provider to write to (default: nearest ancestor)</td>
248
+ </tr>
249
+ <tr>
250
+ <td><code>radio</code></td>
251
+ <td>boolean</td>
252
+ <td>Single choice among buttons with the same <code>name</code></td>
253
+ </tr>
254
+ <tr>
255
+ <td><code>unique</code></td>
256
+ <td>boolean</td>
257
+ <td>Like <code>radio</code>, but can be deselected</td>
258
+ </tr>
259
+ <tr>
260
+ <td><code>autoRepeat</code></td>
261
+ <td>boolean</td>
262
+ <td>Repeats the click while the pointer is held</td>
263
+ </tr>
264
+ <tr>
265
+ <td><code>data-aria-label</code></td>
266
+ <td>string</td>
267
+ <td><code>aria-label</code> of the inner button</td>
268
+ </tr>
269
+ <tr>
270
+ <td><code>data-aria-labelledby</code></td>
271
+ <td>string</td>
272
+ <td><code>aria-labelledby</code> of the inner button</td>
273
+ </tr>
274
+ <tr>
275
+ <td><code>data-aria-controls</code></td>
276
+ <td>string</td>
277
+ <td><code>aria-controls</code> of the inner button</td>
278
+ </tr>
279
+ <tr>
280
+ <td><code>data-aria-expanded</code></td>
281
+ <td>boolean</td>
282
+ <td><code>aria-expanded</code> of the inner button</td>
283
+ </tr>
284
+ </tbody></table>
285
+ <table>
286
+ <thead>
287
+ <tr>
288
+ <th>Slot</th>
289
+ <th>Description</th>
290
+ </tr>
291
+ </thead>
292
+ <tbody><tr>
293
+ <td><em>(default)</em></td>
294
+ <td>Label</td>
295
+ </tr>
296
+ <tr>
297
+ <td><code>prefix</code></td>
298
+ <td>Icon or text before the label</td>
299
+ </tr>
300
+ <tr>
301
+ <td><code>suffix</code></td>
302
+ <td>Icon or text after the label</td>
303
+ </tr>
304
+ </tbody></table>
305
+
306
+ </article>
307
+ </main>
308
+ </body>
309
+ </html>
@@ -0,0 +1,216 @@
1
+ # Button
2
+
3
+ **`sonic-button`** is the clickable control of the library: a plain button, a link when `href` is set, or a form toggle when it has a `name` and `value`. It shares `type` / `variant` / `size` with **`sonic-badge`**, and exposes `prefix` / `suffix` slots for icons.
4
+
5
+ ## Type
6
+
7
+ With no `type`, the button is `default`. Use `custom` with `--sc-btn-custom-color` and `--sc-btn-custom-bg` for a one-off color.
8
+
9
+ <sonic-code>
10
+ <template>
11
+ <div class="flex flex-wrap gap-2">
12
+ <sonic-button>Default</sonic-button>
13
+ <sonic-button type="primary">Primary</sonic-button>
14
+ <sonic-button type="neutral">Neutral</sonic-button>
15
+ <sonic-button type="warning">Warning</sonic-button>
16
+ <sonic-button type="info">Info</sonic-button>
17
+ <sonic-button type="success">Success</sonic-button>
18
+ <sonic-button type="danger">Danger</sonic-button>
19
+ <sonic-button type="custom" style="--sc-btn-custom-color: #fde68a; --sc-btn-custom-bg: #5b21b6">Custom</sonic-button>
20
+ </div>
21
+ </template>
22
+ </sonic-code>
23
+
24
+ ## Variant
25
+
26
+ With no `variant`, the button is filled. The `outline` / `ghost` / `link` variants take their color from `type`. `unstyled` removes all styling so you can apply your own classes.
27
+
28
+ <sonic-code>
29
+ <template>
30
+ <div class="flex flex-wrap gap-2">
31
+ <sonic-button type="primary">Default</sonic-button>
32
+ <sonic-button type="primary" variant="outline">Outline</sonic-button>
33
+ <sonic-button type="primary" variant="ghost">Ghost</sonic-button>
34
+ <sonic-button type="primary" variant="link">Link</sonic-button>
35
+ <sonic-button variant="unstyled">Unstyled</sonic-button>
36
+ </div>
37
+ </template>
38
+ </sonic-code>
39
+
40
+ ## Size
41
+
42
+ With no `size`, the button is `md`.
43
+
44
+ <sonic-code>
45
+ <template>
46
+ <div class="flex flex-wrap items-center gap-2">
47
+ <sonic-button size="2xs">2xs</sonic-button>
48
+ <sonic-button size="xs">xs</sonic-button>
49
+ <sonic-button size="sm">sm</sonic-button>
50
+ <sonic-button>md</sonic-button>
51
+ <sonic-button size="lg">lg</sonic-button>
52
+ <sonic-button size="xl">xl</sonic-button>
53
+ <sonic-button size="2xl">2xl</sonic-button>
54
+ </div>
55
+ </template>
56
+ </sonic-code>
57
+
58
+ ## Shape
59
+
60
+ `circle` and `square` make a fixed-size icon button. `block` stretches to the full width of the parent.
61
+
62
+ <sonic-code>
63
+ <template>
64
+ <div class="flex flex-wrap items-center gap-2 mb-2">
65
+ <sonic-button shape="circle" type="primary"><sonic-icon library="iconoir" name="plus"></sonic-icon></sonic-button>
66
+ <sonic-button shape="square" type="primary"><sonic-icon library="iconoir" name="plus"></sonic-icon></sonic-button>
67
+ </div>
68
+ <sonic-button shape="block" type="primary">Block</sonic-button>
69
+ </template>
70
+ </sonic-code>
71
+
72
+ ## Prefix and suffix slots
73
+
74
+ <sonic-code>
75
+ <template>
76
+ <div class="flex flex-wrap gap-2">
77
+ <sonic-button type="primary" variant="outline">
78
+ <sonic-icon library="iconoir" slot="prefix" name="arrow-left"></sonic-icon>
79
+ Previous flight
80
+ </sonic-button>
81
+ <sonic-button type="primary">
82
+ Next flight
83
+ <sonic-icon library="iconoir" slot="suffix" name="arrow-right"></sonic-icon>
84
+ </sonic-button>
85
+ </div>
86
+ </template>
87
+ </sonic-code>
88
+
89
+ ## Loading
90
+
91
+ `loading` replaces the content with a spinner and blocks clicks. The button keeps the width of its content.
92
+
93
+ <sonic-code>
94
+ <template>
95
+ <div class="flex flex-wrap gap-2">
96
+ <sonic-button loading></sonic-button>
97
+ <sonic-button loading>Loading button</sonic-button>
98
+ <sonic-button loading type="primary">
99
+ <sonic-icon library="iconoir" slot="prefix" name="check"></sonic-icon>
100
+ Checking in
101
+ </sonic-button>
102
+ </div>
103
+ </template>
104
+ </sonic-code>
105
+
106
+ ## Link
107
+
108
+ With `href`, the button renders as a link. For a relative `href`, the button gets `active` when the current URL matches, according to `autoActive` (default `partial`). Add `pushState` to navigate without reloading the page.
109
+
110
+ <sonic-code>
111
+ <template>
112
+ <div class="flex flex-wrap gap-2">
113
+ <sonic-button href="https://example.com" target="_blank" type="primary">External link</sonic-button>
114
+ <sonic-button href="/core/components/ui/button" variant="ghost">Current page</sonic-button>
115
+ </div>
116
+ </template>
117
+ </sonic-code>
118
+
119
+ ## Toggle and radio
120
+
121
+ A button with `name` and `value` writes to its `formDataProvider` and toggles `active` when clicked. Add `radio` for a single choice in a group, or `unique` to also allow deselecting. Children marked `swap="on"` / `swap="off"` show only in the active / inactive state.
122
+
123
+ <sonic-code>
124
+ <template>
125
+ <div class="flex flex-wrap items-center gap-4">
126
+ <sonic-button formDataProvider="button-toggle-demo" name="visible" value="yes" type="primary" shape="circle" variant="outline">
127
+ <sonic-icon library="iconoir" swap="on" name="eye-empty"></sonic-icon>
128
+ <sonic-icon library="iconoir" swap="off" name="eye-off"></sonic-icon>
129
+ </sonic-button>
130
+ <sonic-group formDataProvider="button-radio-demo">
131
+ <sonic-button radio minWidth="7rem" name="plan" value="free">Free</sonic-button>
132
+ <sonic-button radio minWidth="7rem" name="plan" value="pro">Pro</sonic-button>
133
+ <sonic-button radio minWidth="7rem" name="plan" value="team">Team</sonic-button>
134
+ </sonic-group>
135
+ </div>
136
+ </template>
137
+ </sonic-code>
138
+
139
+ ## Reset
140
+
141
+ `reset` clears the button's own `formDataProvider`. Give it a value to clear another one by name.
142
+
143
+ <sonic-code>
144
+ <template>
145
+ <div formDataProvider="button-reset-demo" class="mb-2">
146
+ <sonic-checkbox name="agree" value="yes">Extra baggage</sonic-checkbox>
147
+ <sonic-button reset>Reset this form</sonic-button>
148
+ </div>
149
+ <sonic-button reset="button-reset-demo">Reset by name</sonic-button>
150
+ </template>
151
+ </sonic-code>
152
+
153
+ ## Go back
154
+
155
+ `goBack` navigates back in history. When there is no previous page on the same origin, it goes to the attribute value, or to the site root if empty.
156
+
157
+ <sonic-code>
158
+ <template>
159
+ <sonic-button goBack="/" variant="outline">
160
+ <sonic-icon library="iconoir" slot="prefix" name="arrow-left"></sonic-icon>
161
+ Back
162
+ </sonic-button>
163
+ </template>
164
+ </sonic-code>
165
+
166
+ ## Accessibility
167
+
168
+ Icon-only buttons need a label. Use `data-aria-label`, which is forwarded to the inner `button` (and link).
169
+
170
+ <sonic-code>
171
+ <template>
172
+ <sonic-button shape="circle" data-aria-label="Close">
173
+ <sonic-icon library="iconoir" name="cancel"></sonic-icon>
174
+ </sonic-button>
175
+ </template>
176
+ </sonic-code>
177
+
178
+ ## API reference
179
+
180
+ | Attribute | Values | Description |
181
+ |----------|---------|-------------|
182
+ | `type` | `default` (default) · `primary` · `neutral` · `warning` · `info` · `success` · `danger` · `custom` | Color; `custom` reads `--sc-btn-custom-color` and `--sc-btn-custom-bg` |
183
+ | `variant` | `default` (default) · `outline` · `ghost` · `link` · `unstyled` | Visual style |
184
+ | `size` | `2xs` … `2xl` (default `md`) · `inherit` | Typography and padding |
185
+ | `shape` | `default` (default) · `circle` · `square` · `block` | Icon button or full width |
186
+ | `icon` | boolean | Enlarges a lone icon |
187
+ | `loading` | boolean | Shows a spinner and blocks clicks |
188
+ | `disabled` | boolean | Dims the button and blocks clicks |
189
+ | `active` | boolean | Active state, set automatically for links and toggles |
190
+ | `align` | `left` · `center` · `right` | Text alignment |
191
+ | `direction` | flex direction (default `row`) | Layout of slots |
192
+ | `alignItems` | flex `align-items` (default `center`) | Cross-axis alignment of slots |
193
+ | `justify` | flex `justify-content` (default `center`) | Main-axis alignment of slots |
194
+ | `minWidth` | CSS length (default `0`) | Minimum width of the button |
195
+ | `href` | URL | Renders the button as a link |
196
+ | `target` | `_self` · `_blank` · `_parent` · `_top` | Link target |
197
+ | `download` | string | Link `download` attribute |
198
+ | `pushState` | boolean | Navigates with `history.pushState` |
199
+ | `autoActive` | `partial` (default) · `strict` · `strict-path-only` · `disabled` | URL matching for `active` |
200
+ | `goBack` | URL or empty | Goes back in history, with a fallback URL |
201
+ | `reset` | empty or provider name | Clears the current or named form data provider |
202
+ | `name` / `value` | string | Form field written to the data provider |
203
+ | `formDataProvider` | string | Data provider to write to (default: nearest ancestor) |
204
+ | `radio` | boolean | Single choice among buttons with the same `name` |
205
+ | `unique` | boolean | Like `radio`, but can be deselected |
206
+ | `autoRepeat` | boolean | Repeats the click while the pointer is held |
207
+ | `data-aria-label` | string | `aria-label` of the inner button |
208
+ | `data-aria-labelledby` | string | `aria-labelledby` of the inner button |
209
+ | `data-aria-controls` | string | `aria-controls` of the inner button |
210
+ | `data-aria-expanded` | boolean | `aria-expanded` of the inner button |
211
+
212
+ | Slot | Description |
213
+ |------|-------------|
214
+ | *(default)* | Label |
215
+ | `prefix` | Icon or text before the label |
216
+ | `suffix` | Icon or text after the label |
@@ -0,0 +1,80 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/captcha" data-doc-id="core/components/ui/captcha/captcha">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Captcha — Concorde by Supersoniks</title>
7
+ <meta name="description" content="sonic-captcha embeds an ALTCHA proof-of-work widget and makes the nearest form wait for it. Place it inside a form scope and put sonic-submit in its default slot: the widget renders above the slot con">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/captcha/captcha, captcha, Captcha, UI component, sonic-captcha, web component, sonic-submit, headersDataProvider, formDataProvider, needsCaptchaValidation, true, captchaToken, captchaKey">
9
+ <meta name="concorde-doc-id" content="core/components/ui/captcha/captcha">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/captcha">
11
+ <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/captcha.md">
12
+ </head>
13
+ <body>
14
+ <header>
15
+ <p><a href="/docs/index.html">Concorde documentation</a> · <a href="https://concorde.supersoniks.org/core/components/ui/captcha">same URL (interactive)</a> · <a href="/llms.txt">llms.txt</a></p>
16
+ </header>
17
+ <main>
18
+ <article>
19
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Captcha</strong>. sonic-captcha embeds an ALTCHA proof-of-work widget and makes the nearest form wait for it. Place it inside a form scope and put sonic-submit in its default slot: the widget renders above the slot con <span>Doc ID: <code>core/components/ui/captcha/captcha</code>. Keywords: Concorde, supersoniks, core/components/ui/captcha/captcha, captcha, Captcha, UI component, sonic-captcha, web component, sonic-submit, headersDataProvider, formDataProvider, needsCaptchaValidation, true, captchaToken, captchaKey. URL: <a href="https://concorde.supersoniks.org/core/components/ui/captcha">https://concorde.supersoniks.org/core/components/ui/captcha</a>.</span></p>
20
+ <h1 id="captcha">Captcha</h1>
21
+ <p><strong><code>sonic-captcha</code></strong> embeds an <a href="https://altcha.org">ALTCHA</a> proof-of-work widget and makes the nearest form wait for it. Place it inside a form scope and put <strong><code>sonic-submit</code></strong> in its default slot: the widget renders above the slot content, and the submit sends only once a token is available.</p>
22
+ <h2 id="basic-example">Basic example</h2>
23
+ <p>The widget loads only on <strong>HTTPS</strong>. On plain HTTP the component renders nothing and the form is not blocked.</p>
24
+ <pre><code>&lt;sonic-scope
25
+ serviceURL=&quot;/docs-mock-api&quot;
26
+ formDataProvider=&quot;captcha-docs-form&quot;
27
+ submitResultDataProvider=&quot;captcha-docs-result&quot;
28
+ &gt;
29
+ &lt;sonic-captcha&gt;
30
+ &lt;sonic-input class=&quot;mb-3 block&quot; name=&quot;email&quot; type=&quot;email&quot; label=&quot;Email&quot; value=&quot;demo@example.com&quot;&gt;&lt;/sonic-input&gt;
31
+ &lt;sonic-submit endPoint=&quot;api/register&quot; onClick&gt;
32
+ &lt;sonic-button type=&quot;primary&quot;&gt;Join the crew&lt;/sonic-button&gt;
33
+ &lt;/sonic-submit&gt;
34
+ &lt;/sonic-captcha&gt;
35
+ &lt;/sonic-scope&gt;
36
+ </code></pre>
37
+ <h2 id="form-integration">Form integration</h2>
38
+ <p>The component writes to the publisher named by the closest <code>headersDataProvider</code>, or else <code>formDataProvider</code>, on itself or an ancestor. On connect it sets <code>needsCaptchaValidation</code> to <code>true</code>. When <strong><code>sonic-submit</code></strong> sees that flag, it requests a token, the captcha copies the solved ALTCHA payload into <code>captchaToken</code> and its key into <code>captchaKey</code>, and the request is sent. <code>needsCaptchaValidation</code> is stripped from the payload. On disconnect both fields are reset.</p>
39
+ <pre><code class="language-typescript">{
40
+ email: &quot;demo@example.com&quot;,
41
+ captchaKey: &quot;…&quot;,
42
+ captchaToken: &quot;…&quot;
43
+ }
44
+ </code></pre>
45
+ <h2 id="key-and-challenge-endpoint">Key and challenge endpoint</h2>
46
+ <p>With no <code>key</code>, the component generates an encrypted key on connect. The widget fetches its challenge from the <code>chalengeUrl</code> property (a JavaScript property, not an attribute) with <code>key</code> and <code>maxNumber</code> (default <code>50000</code>) as query parameters. Point it at your own ALTCHA server and verify <code>captchaToken</code> there.</p>
47
+ <p>Labels follow the page language: French when <code>&lt;html lang&gt;</code> starts with <code>fr</code>, English otherwise.</p>
48
+ <h2 id="api-reference">API reference</h2>
49
+ <table>
50
+ <thead>
51
+ <tr>
52
+ <th>Attribute</th>
53
+ <th>Values</th>
54
+ <th>Description</th>
55
+ </tr>
56
+ </thead>
57
+ <tbody><tr>
58
+ <td><code>key</code></td>
59
+ <td>string (default generated)</td>
60
+ <td>Key sent to the challenge endpoint and copied to <code>captchaKey</code></td>
61
+ </tr>
62
+ </tbody></table>
63
+ <table>
64
+ <thead>
65
+ <tr>
66
+ <th>Slot</th>
67
+ <th>Description</th>
68
+ </tr>
69
+ </thead>
70
+ <tbody><tr>
71
+ <td><em>(default)</em></td>
72
+ <td>Form fields and actions, rendered below the widget</td>
73
+ </tr>
74
+ </tbody></table>
75
+ <p>No events.</p>
76
+
77
+ </article>
78
+ </main>
79
+ </body>
80
+ </html>