@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,144 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/divider" data-doc-id="core/components/ui/divider/divider">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Divider — Concorde by Supersoniks</title>
7
+ <meta name="description" content="sonic-divider draws a horizontal or vertical rule with optional centered label copy. Use it to separate sections in forms, cards, and sonic-menu. Set label for simple HTML captions or use the default ">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/divider/divider, divider, Divider, UI component, sonic-divider, web component, sonic-menu, label, align, center, lineStyle, solid, size, 0.5rem">
9
+ <meta name="concorde-doc-id" content="core/components/ui/divider/divider">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/divider">
11
+ <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/divider.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/divider">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 — Divider</strong>. sonic-divider draws a horizontal or vertical rule with optional centered label copy. Use it to separate sections in forms, cards, and sonic-menu. Set label for simple HTML captions or use the default <span>Doc ID: <code>core/components/ui/divider/divider</code>. Keywords: Concorde, supersoniks, core/components/ui/divider/divider, divider, Divider, UI component, sonic-divider, web component, sonic-menu, label, align, center, lineStyle, solid, size, 0.5rem. URL: <a href="https://concorde.supersoniks.org/core/components/ui/divider">https://concorde.supersoniks.org/core/components/ui/divider</a>.</span></p>
20
+ <h1 id="divider">Divider</h1>
21
+ <p><strong><code>sonic-divider</code></strong> draws a horizontal or vertical rule with optional <strong>centered label</strong> copy. Use it to separate sections in forms, cards, and <strong><code>sonic-menu</code></strong>. Set <strong><code>label</code></strong> for simple HTML captions or use the <strong>default slot</strong> for richer markup; default <strong><code>align</code></strong> is <strong><code>center</code></strong> and default <strong><code>lineStyle</code></strong> is <strong><code>solid</code></strong>.</p>
22
+ <h2 id="basic-example">Basic example</h2>
23
+ <p>A bare divider is a full-width line with vertical margin. Omit <strong><code>size</code></strong> to use the host default spacing (<code>0.5rem</code> block margin).</p>
24
+ <pre><code>&lt;sonic-divider&gt;&lt;/sonic-divider&gt;
25
+ </code></pre>
26
+ <h2 id="label-and-align">Label and align</h2>
27
+ <p><strong><code>label</code></strong> renders inside the line (as HTML). <strong><code>align</code></strong> controls which side(s) of the line remain visible: <strong><code>left</code></strong> drops the leading segment, <strong><code>right</code></strong> drops the trailing segment, <strong><code>center</code></strong> keeps both.</p>
28
+ <pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
29
+ &lt;sonic-divider label=&quot;Default centered label&quot;&gt;&lt;/sonic-divider&gt;
30
+ &lt;sonic-divider label=&quot;Left&quot; align=&quot;left&quot;&gt;&lt;/sonic-divider&gt;
31
+ &lt;sonic-divider label=&quot;Center&quot; align=&quot;center&quot;&gt;&lt;/sonic-divider&gt;
32
+ &lt;sonic-divider label=&quot;Right&quot; align=&quot;right&quot;&gt;&lt;/sonic-divider&gt;
33
+ &lt;/div&gt;
34
+ </code></pre>
35
+ <h2 id="size">Size</h2>
36
+ <p><strong><code>size</code></strong> adjusts block margin and label font size. Values follow the shared Concorde scale (<code>2xs</code> … <code>2xl</code>).</p>
37
+ <pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
38
+ &lt;sonic-divider size=&quot;2xs&quot; label=&quot;2xs&quot;&gt;&lt;/sonic-divider&gt;
39
+ &lt;sonic-divider size=&quot;xs&quot; label=&quot;xs&quot;&gt;&lt;/sonic-divider&gt;
40
+ &lt;sonic-divider size=&quot;sm&quot; label=&quot;sm&quot;&gt;&lt;/sonic-divider&gt;
41
+ &lt;sonic-divider size=&quot;md&quot; label=&quot;md&quot;&gt;&lt;/sonic-divider&gt;
42
+ &lt;sonic-divider size=&quot;lg&quot; label=&quot;lg&quot;&gt;&lt;/sonic-divider&gt;
43
+ &lt;sonic-divider size=&quot;xl&quot; label=&quot;xl&quot;&gt;&lt;/sonic-divider&gt;
44
+ &lt;sonic-divider size=&quot;2xl&quot; label=&quot;2xl&quot;&gt;&lt;/sonic-divider&gt;
45
+ &lt;/div&gt;
46
+ </code></pre>
47
+ <h2 id="line-style">Line style</h2>
48
+ <p><strong><code>lineStyle</code></strong> sets the stroke of the rule (<code>solid</code> · <code>dashed</code> · <code>dotted</code>). In HTML use the reflected attribute <strong><code>linestyle</code></strong> (case-insensitive).</p>
49
+ <pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
50
+ &lt;sonic-divider label=&quot;Solid&quot;&gt;&lt;/sonic-divider&gt;
51
+ &lt;sonic-divider label=&quot;Dashed&quot; lineStyle=&quot;dashed&quot;&gt;&lt;/sonic-divider&gt;
52
+ &lt;sonic-divider label=&quot;Dotted&quot; lineStyle=&quot;dotted&quot;&gt;&lt;/sonic-divider&gt;
53
+ &lt;/div&gt;
54
+ </code></pre>
55
+ <h2 id="vertical-and-margin">Vertical and margin</h2>
56
+ <p>Set <strong><code>vertical</code></strong> for a column rule (for example between toolbar actions). <strong><code>noMargin</code></strong> removes host margin when a parent layout already provides spacing.</p>
57
+ <pre><code>&lt;div class=&quot;flex items-stretch gap-2&quot; style=&quot;min-height: 3rem;&quot;&gt;
58
+ &lt;span class=&quot;flex items-center px-2&quot;&gt;Before&lt;/span&gt;
59
+ &lt;sonic-divider vertical noMargin&gt;&lt;/sonic-divider&gt;
60
+ &lt;span class=&quot;flex items-center px-2&quot;&gt;After&lt;/span&gt;
61
+ &lt;/div&gt;
62
+ </code></pre>
63
+ <h2 id="default-slot">Default slot</h2>
64
+ <p>Slotted content replaces or augments <strong><code>label</code></strong>. Useful for badges, icons, or mixed markup in menus.</p>
65
+ <pre><code>&lt;sonic-divider&gt;
66
+ &lt;span class=&quot;mr-2&quot;&gt;Departures&lt;/span&gt;
67
+ &lt;sonic-badge type=&quot;danger&quot;&gt;+25&lt;/sonic-badge&gt;
68
+ &lt;/sonic-divider&gt;
69
+ </code></pre>
70
+ <h2 id="inside-typed-cards">Inside typed cards</h2>
71
+ <p>On <strong><code>sonic-card</code></strong> with semantic <strong><code>type</code></strong> (<code>primary</code> · <code>warning</code> · <code>danger</code> · <code>info</code> · <code>success</code>), the rule uses the card’s text color at reduced opacity so it stays visible on tinted surfaces. <strong><code>label</code></strong> and slotted captions use the same foreground color as surrounding copy.</p>
72
+ <pre><code>&lt;div class=&quot;grid gap-4 max-w-xl&quot;&gt;
73
+ &lt;sonic-card type=&quot;danger&quot;&gt;
74
+ &lt;div&gt;CN 001 is cancelled.&lt;/div&gt;
75
+ &lt;sonic-divider label=&quot;Affected passengers&quot;&gt;&lt;/sonic-divider&gt;
76
+ &lt;ul class=&quot;m-0 pl-5 text-sm&quot;&gt;
77
+ &lt;li&gt;Ada Lindqvist&lt;/li&gt;
78
+ &lt;li&gt;Captain Leo Marchand&lt;/li&gt;
79
+ &lt;/ul&gt;
80
+ &lt;/sonic-card&gt;
81
+ &lt;sonic-card type=&quot;info&quot;&gt;
82
+ &lt;div&gt;Aircraft maintenance is scheduled for tonight.&lt;/div&gt;
83
+ &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
84
+ &lt;div class=&quot;opacity-60&quot;&gt;Expected downtime: about 15 minutes.&lt;/div&gt;
85
+ &lt;/sonic-card&gt;
86
+ &lt;/div&gt;
87
+ </code></pre>
88
+ <h2 id="api-reference">API reference</h2>
89
+ <table>
90
+ <thead>
91
+ <tr>
92
+ <th>Attribute</th>
93
+ <th>Values</th>
94
+ <th>Description</th>
95
+ </tr>
96
+ </thead>
97
+ <tbody><tr>
98
+ <td><code>label</code></td>
99
+ <td>string (HTML)</td>
100
+ <td>Caption centered on the rule; combined with default-slot content when both are set</td>
101
+ </tr>
102
+ <tr>
103
+ <td><code>align</code></td>
104
+ <td><code>left</code> · <code>center</code> · <code>right</code> (default <code>center</code>)</td>
105
+ <td>Hides the leading or trailing line segment for left/right alignment</td>
106
+ </tr>
107
+ <tr>
108
+ <td><code>size</code></td>
109
+ <td><code>2xs</code> … <code>2xl</code> · <code>inherit</code></td>
110
+ <td>Vertical margin and label <code>font-size</code>; omit for host defaults</td>
111
+ </tr>
112
+ <tr>
113
+ <td><code>lineStyle</code></td>
114
+ <td><code>solid</code> · <code>dashed</code> · <code>dotted</code> (default <code>solid</code>)</td>
115
+ <td>Stroke style of the rule (HTML attribute <code>linestyle</code>)</td>
116
+ </tr>
117
+ <tr>
118
+ <td><code>vertical</code></td>
119
+ <td>boolean</td>
120
+ <td>Renders a vertical rule; swap block/inline margins</td>
121
+ </tr>
122
+ <tr>
123
+ <td><code>noMargin</code></td>
124
+ <td>boolean</td>
125
+ <td>Sets host margin to <code>0</code></td>
126
+ </tr>
127
+ </tbody></table>
128
+ <table>
129
+ <thead>
130
+ <tr>
131
+ <th>Slot</th>
132
+ <th>Description</th>
133
+ </tr>
134
+ </thead>
135
+ <tbody><tr>
136
+ <td><em>(default)</em></td>
137
+ <td>Label markup when <strong><code>label</code></strong> is insufficient or empty</td>
138
+ </tr>
139
+ </tbody></table>
140
+
141
+ </article>
142
+ </main>
143
+ </body>
144
+ </html>
@@ -0,0 +1,126 @@
1
+ # Divider
2
+
3
+ **`sonic-divider`** draws a horizontal or vertical rule with optional **centered label** copy. Use it to separate sections in forms, cards, and **`sonic-menu`**. Set **`label`** for simple HTML captions or use the **default slot** for richer markup; default **`align`** is **`center`** and default **`lineStyle`** is **`solid`**.
4
+
5
+ ## Basic example
6
+
7
+ A bare divider is a full-width line with vertical margin. Omit **`size`** to use the host default spacing (`0.5rem` block margin).
8
+
9
+ <sonic-code>
10
+ <template>
11
+ <sonic-divider></sonic-divider>
12
+ </template>
13
+ </sonic-code>
14
+
15
+ ## Label and align
16
+
17
+ **`label`** renders inside the line (as HTML). **`align`** controls which side(s) of the line remain visible: **`left`** drops the leading segment, **`right`** drops the trailing segment, **`center`** keeps both.
18
+
19
+ <sonic-code>
20
+ <template>
21
+ <div class="grid gap-4">
22
+ <sonic-divider label="Default centered label"></sonic-divider>
23
+ <sonic-divider label="Left" align="left"></sonic-divider>
24
+ <sonic-divider label="Center" align="center"></sonic-divider>
25
+ <sonic-divider label="Right" align="right"></sonic-divider>
26
+ </div>
27
+ </template>
28
+ </sonic-code>
29
+
30
+ ## Size
31
+
32
+ **`size`** adjusts block margin and label font size. Values follow the shared Concorde scale (`2xs` … `2xl`).
33
+
34
+ <sonic-code>
35
+ <template>
36
+ <div class="grid gap-4">
37
+ <sonic-divider size="2xs" label="2xs"></sonic-divider>
38
+ <sonic-divider size="xs" label="xs"></sonic-divider>
39
+ <sonic-divider size="sm" label="sm"></sonic-divider>
40
+ <sonic-divider size="md" label="md"></sonic-divider>
41
+ <sonic-divider size="lg" label="lg"></sonic-divider>
42
+ <sonic-divider size="xl" label="xl"></sonic-divider>
43
+ <sonic-divider size="2xl" label="2xl"></sonic-divider>
44
+ </div>
45
+ </template>
46
+ </sonic-code>
47
+
48
+ ## Line style
49
+
50
+ **`lineStyle`** sets the stroke of the rule (`solid` · `dashed` · `dotted`). In HTML use the reflected attribute **`linestyle`** (case-insensitive).
51
+
52
+ <sonic-code>
53
+ <template>
54
+ <div class="grid gap-4">
55
+ <sonic-divider label="Solid"></sonic-divider>
56
+ <sonic-divider label="Dashed" lineStyle="dashed"></sonic-divider>
57
+ <sonic-divider label="Dotted" lineStyle="dotted"></sonic-divider>
58
+ </div>
59
+ </template>
60
+ </sonic-code>
61
+
62
+ ## Vertical and margin
63
+
64
+ Set **`vertical`** for a column rule (for example between toolbar actions). **`noMargin`** removes host margin when a parent layout already provides spacing.
65
+
66
+ <sonic-code>
67
+ <template>
68
+ <div class="flex items-stretch gap-2" style="min-height: 3rem;">
69
+ <span class="flex items-center px-2">Before</span>
70
+ <sonic-divider vertical noMargin></sonic-divider>
71
+ <span class="flex items-center px-2">After</span>
72
+ </div>
73
+ </template>
74
+ </sonic-code>
75
+
76
+ ## Default slot
77
+
78
+ Slotted content replaces or augments **`label`**. Useful for badges, icons, or mixed markup in menus.
79
+
80
+ <sonic-code>
81
+ <template>
82
+ <sonic-divider>
83
+ <span class="mr-2">Departures</span>
84
+ <sonic-badge type="danger">+25</sonic-badge>
85
+ </sonic-divider>
86
+ </template>
87
+ </sonic-code>
88
+
89
+ ## Inside typed cards
90
+
91
+ On **`sonic-card`** with semantic **`type`** (`primary` · `warning` · `danger` · `info` · `success`), the rule uses the card’s text color at reduced opacity so it stays visible on tinted surfaces. **`label`** and slotted captions use the same foreground color as surrounding copy.
92
+
93
+ <sonic-code>
94
+ <template>
95
+ <div class="grid gap-4 max-w-xl">
96
+ <sonic-card type="danger">
97
+ <div>CN 001 is cancelled.</div>
98
+ <sonic-divider label="Affected passengers"></sonic-divider>
99
+ <ul class="m-0 pl-5 text-sm">
100
+ <li>Ada Lindqvist</li>
101
+ <li>Captain Leo Marchand</li>
102
+ </ul>
103
+ </sonic-card>
104
+ <sonic-card type="info">
105
+ <div>Aircraft maintenance is scheduled for tonight.</div>
106
+ <sonic-divider></sonic-divider>
107
+ <div class="opacity-60">Expected downtime: about 15 minutes.</div>
108
+ </sonic-card>
109
+ </div>
110
+ </template>
111
+ </sonic-code>
112
+
113
+ ## API reference
114
+
115
+ | Attribute | Values | Description |
116
+ |----------|---------|-------------|
117
+ | `label` | string (HTML) | Caption centered on the rule; combined with default-slot content when both are set |
118
+ | `align` | `left` · `center` · `right` (default `center`) | Hides the leading or trailing line segment for left/right alignment |
119
+ | `size` | `2xs` … `2xl` · `inherit` | Vertical margin and label `font-size`; omit for host defaults |
120
+ | `lineStyle` | `solid` · `dashed` · `dotted` (default `solid`) | Stroke style of the rule (HTML attribute `linestyle`) |
121
+ | `vertical` | boolean | Renders a vertical rule; swap block/inline margins |
122
+ | `noMargin` | boolean | Sets host margin to `0` |
123
+
124
+ | Slot | Description |
125
+ |------|-------------|
126
+ | *(default)* | Label markup when **`label`** is insufficient or empty |
@@ -0,0 +1,200 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/form/checkbox" data-doc-id="core/components/ui/form/checkbox/checkbox">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Checkbox — Concorde by Supersoniks</title>
7
+ <meta name="description" content="sonic-checkbox is a styled checkbox that writes its value into form data. Give it a name and a formDataProvider (on the field or an ancestor); checkboxes sharing a name build an array of the checked v">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/checkbox/checkbox, checkbox, Checkbox, UI component, form, sonic-checkbox, web component, value, name, formDataProvider, label, description, size, md, checked">
9
+ <meta name="concorde-doc-id" content="core/components/ui/form/checkbox/checkbox">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/form/checkbox">
11
+ <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/form/checkbox.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/form/checkbox">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 — Checkbox</strong>. sonic-checkbox is a styled checkbox that writes its value into form data. Give it a name and a formDataProvider (on the field or an ancestor); checkboxes sharing a name build an array of the checked v <span>Doc ID: <code>core/components/ui/form/checkbox/checkbox</code>. Keywords: Concorde, supersoniks, core/components/ui/form/checkbox/checkbox, checkbox, Checkbox, UI component, form, sonic-checkbox, web component, value, name, formDataProvider, label, description, size, md, checked. URL: <a href="https://concorde.supersoniks.org/core/components/ui/form/checkbox">https://concorde.supersoniks.org/core/components/ui/form/checkbox</a>.</span></p>
20
+ <h1 id="checkbox">Checkbox</h1>
21
+ <p><strong><code>sonic-checkbox</code></strong> is a styled checkbox that writes its <code>value</code> into form data. Give it a <code>name</code> and a <code>formDataProvider</code> (on the field or an ancestor); checkboxes sharing a <code>name</code> build an array of the checked values. Label goes in the default slot or <code>label</code>, helper text in the <code>description</code> slot.</p>
22
+ <h2 id="basic-example">Basic example</h2>
23
+ <pre><code>&lt;sonic-checkbox&gt;
24
+ Notify me of gate changes
25
+ &lt;span slot=&quot;description&quot;&gt;One message per change, no spam.&lt;/span&gt;
26
+ &lt;/sonic-checkbox&gt;
27
+ </code></pre>
28
+ <h2 id="size">Size</h2>
29
+ <p>With no <code>size</code>, the checkbox follows <code>md</code> (1rem).</p>
30
+ <pre><code>&lt;div class=&quot;grid gap-2&quot;&gt;
31
+ &lt;sonic-checkbox size=&quot;2xs&quot;&gt;2xs&lt;/sonic-checkbox&gt;
32
+ &lt;sonic-checkbox size=&quot;xs&quot;&gt;xs&lt;/sonic-checkbox&gt;
33
+ &lt;sonic-checkbox size=&quot;sm&quot;&gt;sm&lt;/sonic-checkbox&gt;
34
+ &lt;sonic-checkbox&gt;Default&lt;/sonic-checkbox&gt;
35
+ &lt;sonic-checkbox size=&quot;lg&quot;&gt;lg&lt;/sonic-checkbox&gt;
36
+ &lt;sonic-checkbox size=&quot;xl&quot;&gt;xl&lt;/sonic-checkbox&gt;
37
+ &lt;sonic-checkbox size=&quot;2xl&quot;&gt;2xl&lt;/sonic-checkbox&gt;
38
+ &lt;/div&gt;
39
+ </code></pre>
40
+ <h2 id="checked-and-disabled">Checked and disabled</h2>
41
+ <p><code>checked</code> sets the initial state. <code>disabled</code> blocks interaction and dims the control.</p>
42
+ <pre><code>&lt;div class=&quot;grid gap-2&quot;&gt;
43
+ &lt;sonic-checkbox checked&gt;Checked&lt;/sonic-checkbox&gt;
44
+ &lt;sonic-checkbox disabled&gt;Disabled&lt;/sonic-checkbox&gt;
45
+ &lt;sonic-checkbox disabled checked&gt;Disabled and checked&lt;/sonic-checkbox&gt;
46
+ &lt;sonic-checkbox&gt;I accept the &lt;sonic-link href=&quot;#&quot; class=&quot;underline&quot;&gt;terms&lt;/sonic-link&gt;&lt;/sonic-checkbox&gt;
47
+ &lt;/div&gt;
48
+ </code></pre>
49
+ <h2 id="form-binding">Form binding</h2>
50
+ <p>Checkboxes with the same <code>name</code> under one <code>formDataProvider</code> store an array of the checked <code>value</code>s. Initial state is read from that data, so a value already present checks the matching box. See <a href="/docs/getting-started/dataFlow">Data flow</a>.</p>
51
+ <pre><code>&lt;div formDataProvider=&quot;checkbox-multiple-demo&quot; class=&quot;grid gap-2&quot;&gt;
52
+ &lt;sonic-checkbox name=&quot;extras&quot; value=&quot;baggage&quot; checked&gt;Extra baggage&lt;/sonic-checkbox&gt;
53
+ &lt;sonic-checkbox name=&quot;extras&quot; value=&quot;meal&quot;&gt;Meal&lt;/sonic-checkbox&gt;
54
+ &lt;sonic-checkbox name=&quot;extras&quot; value=&quot;lounge&quot;&gt;Lounge access&lt;/sonic-checkbox&gt;
55
+ &lt;div&gt;Selected: &lt;sonic-value dataProvider=&quot;checkbox-multiple-demo&quot; key=&quot;extras&quot;&gt;&lt;/sonic-value&gt;&lt;/div&gt;
56
+ &lt;/div&gt;
57
+ </code></pre>
58
+ <h2 id="single-value">Single value</h2>
59
+ <p><code>unique</code> stores a single value instead of an array: checking one box unchecks the others with the same <code>name</code>, and the checked box can be unchecked again (value <code>null</code>). <code>radio</code> does the same but cannot be unchecked by a click.</p>
60
+ <pre><code>&lt;div formDataProvider=&quot;checkbox-unique-demo&quot; class=&quot;grid gap-2&quot;&gt;
61
+ &lt;sonic-checkbox unique name=&quot;cabin&quot; value=&quot;economy&quot;&gt;Economy&lt;/sonic-checkbox&gt;
62
+ &lt;sonic-checkbox unique name=&quot;cabin&quot; value=&quot;business&quot;&gt;Business&lt;/sonic-checkbox&gt;
63
+ &lt;div&gt;Cabin: &lt;sonic-value dataProvider=&quot;checkbox-unique-demo&quot; key=&quot;cabin&quot;&gt;&lt;/sonic-value&gt;&lt;/div&gt;
64
+ &lt;/div&gt;
65
+ </code></pre>
66
+ <h2 id="check-all-and-indeterminate">Check all and indeterminate</h2>
67
+ <p>A checkbox with <code>checksAll</code> and the same <code>name</code> toggles every sibling value. It shows the indeterminate icon when only some are checked; its own <code>value</code> is never stored. With <code>unsetOnDisconnect</code>, a checkbox removes its value from the data when it leaves the DOM. <code>showAsIndeterminate</code> forces the indeterminate icon on any checkbox.</p>
68
+ <pre><code>&lt;div formDataProvider=&quot;checkbox-check-all-demo&quot; class=&quot;grid gap-2&quot;&gt;
69
+ &lt;sonic-checkbox name=&quot;alerts&quot; value=&quot;all&quot; checksAll&gt;All alerts&lt;/sonic-checkbox&gt;
70
+ &lt;sonic-checkbox name=&quot;alerts&quot; value=&quot;boarding&quot;&gt;Boarding&lt;/sonic-checkbox&gt;
71
+ &lt;sonic-checkbox name=&quot;alerts&quot; value=&quot;gate&quot;&gt;Gate change&lt;/sonic-checkbox&gt;
72
+ &lt;div id=&quot;checkbox-removable&quot; class=&quot;flex gap-2 items-center&quot;&gt;
73
+ &lt;sonic-checkbox name=&quot;alerts&quot; value=&quot;delay&quot; unsetOnDisconnect&gt;Delay&lt;/sonic-checkbox&gt;
74
+ &lt;sonic-button size=&quot;xs&quot; variant=&quot;ghost&quot; onclick=&quot;document.getElementById(&#39;checkbox-removable&#39;).remove()&quot;&gt;Remove&lt;/sonic-button&gt;
75
+ &lt;/div&gt;
76
+ &lt;div&gt;Selected: &lt;sonic-value dataProvider=&quot;checkbox-check-all-demo&quot; key=&quot;alerts&quot;&gt;&lt;/sonic-value&gt;&lt;/div&gt;
77
+ &lt;/div&gt;
78
+ </code></pre>
79
+ <h2 id="api-reference">API reference</h2>
80
+ <table>
81
+ <thead>
82
+ <tr>
83
+ <th>Attribute</th>
84
+ <th>Values</th>
85
+ <th>Description</th>
86
+ </tr>
87
+ </thead>
88
+ <tbody><tr>
89
+ <td><code>name</code></td>
90
+ <td>string</td>
91
+ <td>Key in the form data (dot notation supported)</td>
92
+ </tr>
93
+ <tr>
94
+ <td><code>value</code></td>
95
+ <td>string</td>
96
+ <td>Value stored when checked</td>
97
+ </tr>
98
+ <tr>
99
+ <td><code>formDataProvider</code></td>
100
+ <td>string</td>
101
+ <td>Form data id; inherited from the closest ancestor when omitted</td>
102
+ </tr>
103
+ <tr>
104
+ <td><code>checked</code></td>
105
+ <td>boolean</td>
106
+ <td>Initial checked state</td>
107
+ </tr>
108
+ <tr>
109
+ <td><code>unique</code></td>
110
+ <td>boolean</td>
111
+ <td>Stores a single value; can be unchecked</td>
112
+ </tr>
113
+ <tr>
114
+ <td><code>radio</code></td>
115
+ <td>boolean</td>
116
+ <td>Stores a single value; cannot be unchecked by a click</td>
117
+ </tr>
118
+ <tr>
119
+ <td><code>checksAll</code></td>
120
+ <td>boolean</td>
121
+ <td>Toggles every checkbox with the same <code>name</code></td>
122
+ </tr>
123
+ <tr>
124
+ <td><code>unsetOnDisconnect</code></td>
125
+ <td>boolean</td>
126
+ <td>Removes the value from the data when the element is removed</td>
127
+ </tr>
128
+ <tr>
129
+ <td><code>showAsIndeterminate</code></td>
130
+ <td>boolean</td>
131
+ <td>Forces the indeterminate icon</td>
132
+ </tr>
133
+ <tr>
134
+ <td><code>label</code></td>
135
+ <td>string (HTML)</td>
136
+ <td>Label, rendered before the default slot</td>
137
+ </tr>
138
+ <tr>
139
+ <td><code>description</code></td>
140
+ <td>string (HTML)</td>
141
+ <td>Helper text, rendered in the <code>description</code> slot</td>
142
+ </tr>
143
+ <tr>
144
+ <td><code>size</code></td>
145
+ <td><code>2xs</code> … <code>2xl</code> · <code>inherit</code> (default <code>md</code>)</td>
146
+ <td>Font size and box size</td>
147
+ </tr>
148
+ <tr>
149
+ <td><code>disabled</code></td>
150
+ <td>boolean</td>
151
+ <td>Blocks interaction</td>
152
+ </tr>
153
+ <tr>
154
+ <td><code>required</code></td>
155
+ <td>boolean</td>
156
+ <td>Native validation on form submit</td>
157
+ </tr>
158
+ <tr>
159
+ <td><code>autofocus</code></td>
160
+ <td>boolean</td>
161
+ <td>Focuses the input on load</td>
162
+ </tr>
163
+ <tr>
164
+ <td><code>iconName</code></td>
165
+ <td>string (default <code>check</code>)</td>
166
+ <td>Icon shown when checked</td>
167
+ </tr>
168
+ <tr>
169
+ <td><code>indeterminateIconName</code></td>
170
+ <td>string (default <code>minus-small</code>)</td>
171
+ <td>Icon shown when indeterminate</td>
172
+ </tr>
173
+ <tr>
174
+ <td><code>data-aria-label</code> · <code>data-aria-labelledby</code></td>
175
+ <td>string</td>
176
+ <td>Forwarded to the inner input as <code>aria-label</code> / <code>aria-labelledby</code></td>
177
+ </tr>
178
+ </tbody></table>
179
+ <table>
180
+ <thead>
181
+ <tr>
182
+ <th>Slot</th>
183
+ <th>Description</th>
184
+ </tr>
185
+ </thead>
186
+ <tbody><tr>
187
+ <td><em>(default)</em></td>
188
+ <td>Label content (text, links)</td>
189
+ </tr>
190
+ <tr>
191
+ <td><code>description</code></td>
192
+ <td>Helper text under the label</td>
193
+ </tr>
194
+ </tbody></table>
195
+ <p>Fires a <code>change</code> event on each click.</p>
196
+
197
+ </article>
198
+ </main>
199
+ </body>
200
+ </html>
@@ -0,0 +1,125 @@
1
+ # Checkbox
2
+
3
+ **`sonic-checkbox`** is a styled checkbox that writes its `value` into form data. Give it a `name` and a `formDataProvider` (on the field or an ancestor); checkboxes sharing a `name` build an array of the checked values. Label goes in the default slot or `label`, helper text in the `description` slot.
4
+
5
+ ## Basic example
6
+
7
+ <sonic-code>
8
+ <template>
9
+ <sonic-checkbox>
10
+ Notify me of gate changes
11
+ <span slot="description">One message per change, no spam.</span>
12
+ </sonic-checkbox>
13
+ </template>
14
+ </sonic-code>
15
+
16
+ ## Size
17
+
18
+ With no `size`, the checkbox follows `md` (1rem).
19
+
20
+ <sonic-code>
21
+ <template>
22
+ <div class="grid gap-2">
23
+ <sonic-checkbox size="2xs">2xs</sonic-checkbox>
24
+ <sonic-checkbox size="xs">xs</sonic-checkbox>
25
+ <sonic-checkbox size="sm">sm</sonic-checkbox>
26
+ <sonic-checkbox>Default</sonic-checkbox>
27
+ <sonic-checkbox size="lg">lg</sonic-checkbox>
28
+ <sonic-checkbox size="xl">xl</sonic-checkbox>
29
+ <sonic-checkbox size="2xl">2xl</sonic-checkbox>
30
+ </div>
31
+ </template>
32
+ </sonic-code>
33
+
34
+ ## Checked and disabled
35
+
36
+ `checked` sets the initial state. `disabled` blocks interaction and dims the control.
37
+
38
+ <sonic-code>
39
+ <template>
40
+ <div class="grid gap-2">
41
+ <sonic-checkbox checked>Checked</sonic-checkbox>
42
+ <sonic-checkbox disabled>Disabled</sonic-checkbox>
43
+ <sonic-checkbox disabled checked>Disabled and checked</sonic-checkbox>
44
+ <sonic-checkbox>I accept the <sonic-link href="#" class="underline">terms</sonic-link></sonic-checkbox>
45
+ </div>
46
+ </template>
47
+ </sonic-code>
48
+
49
+ ## Form binding
50
+
51
+ Checkboxes with the same `name` under one `formDataProvider` store an array of the checked `value`s. Initial state is read from that data, so a value already present checks the matching box. See [Data flow](/docs/getting-started/dataFlow).
52
+
53
+ <sonic-code>
54
+ <template>
55
+ <div formDataProvider="checkbox-multiple-demo" class="grid gap-2">
56
+ <sonic-checkbox name="extras" value="baggage" checked>Extra baggage</sonic-checkbox>
57
+ <sonic-checkbox name="extras" value="meal">Meal</sonic-checkbox>
58
+ <sonic-checkbox name="extras" value="lounge">Lounge access</sonic-checkbox>
59
+ <div>Selected: <sonic-value dataProvider="checkbox-multiple-demo" key="extras"></sonic-value></div>
60
+ </div>
61
+ </template>
62
+ </sonic-code>
63
+
64
+ ## Single value
65
+
66
+ `unique` stores a single value instead of an array: checking one box unchecks the others with the same `name`, and the checked box can be unchecked again (value `null`). `radio` does the same but cannot be unchecked by a click.
67
+
68
+ <sonic-code>
69
+ <template>
70
+ <div formDataProvider="checkbox-unique-demo" class="grid gap-2">
71
+ <sonic-checkbox unique name="cabin" value="economy">Economy</sonic-checkbox>
72
+ <sonic-checkbox unique name="cabin" value="business">Business</sonic-checkbox>
73
+ <div>Cabin: <sonic-value dataProvider="checkbox-unique-demo" key="cabin"></sonic-value></div>
74
+ </div>
75
+ </template>
76
+ </sonic-code>
77
+
78
+ ## Check all and indeterminate
79
+
80
+ A checkbox with `checksAll` and the same `name` toggles every sibling value. It shows the indeterminate icon when only some are checked; its own `value` is never stored. With `unsetOnDisconnect`, a checkbox removes its value from the data when it leaves the DOM. `showAsIndeterminate` forces the indeterminate icon on any checkbox.
81
+
82
+ <sonic-code>
83
+ <template>
84
+ <div formDataProvider="checkbox-check-all-demo" class="grid gap-2">
85
+ <sonic-checkbox name="alerts" value="all" checksAll>All alerts</sonic-checkbox>
86
+ <sonic-checkbox name="alerts" value="boarding">Boarding</sonic-checkbox>
87
+ <sonic-checkbox name="alerts" value="gate">Gate change</sonic-checkbox>
88
+ <div id="checkbox-removable" class="flex gap-2 items-center">
89
+ <sonic-checkbox name="alerts" value="delay" unsetOnDisconnect>Delay</sonic-checkbox>
90
+ <sonic-button size="xs" variant="ghost" onclick="document.getElementById('checkbox-removable').remove()">Remove</sonic-button>
91
+ </div>
92
+ <div>Selected: <sonic-value dataProvider="checkbox-check-all-demo" key="alerts"></sonic-value></div>
93
+ </div>
94
+ </template>
95
+ </sonic-code>
96
+
97
+ ## API reference
98
+
99
+ | Attribute | Values | Description |
100
+ |----------|---------|-------------|
101
+ | `name` | string | Key in the form data (dot notation supported) |
102
+ | `value` | string | Value stored when checked |
103
+ | `formDataProvider` | string | Form data id; inherited from the closest ancestor when omitted |
104
+ | `checked` | boolean | Initial checked state |
105
+ | `unique` | boolean | Stores a single value; can be unchecked |
106
+ | `radio` | boolean | Stores a single value; cannot be unchecked by a click |
107
+ | `checksAll` | boolean | Toggles every checkbox with the same `name` |
108
+ | `unsetOnDisconnect` | boolean | Removes the value from the data when the element is removed |
109
+ | `showAsIndeterminate` | boolean | Forces the indeterminate icon |
110
+ | `label` | string (HTML) | Label, rendered before the default slot |
111
+ | `description` | string (HTML) | Helper text, rendered in the `description` slot |
112
+ | `size` | `2xs` … `2xl` · `inherit` (default `md`) | Font size and box size |
113
+ | `disabled` | boolean | Blocks interaction |
114
+ | `required` | boolean | Native validation on form submit |
115
+ | `autofocus` | boolean | Focuses the input on load |
116
+ | `iconName` | string (default `check`) | Icon shown when checked |
117
+ | `indeterminateIconName` | string (default `minus-small`) | Icon shown when indeterminate |
118
+ | `data-aria-label` · `data-aria-labelledby` | string | Forwarded to the inner input as `aria-label` / `aria-labelledby` |
119
+
120
+ | Slot | Description |
121
+ |------|-------------|
122
+ | *(default)* | Label content (text, links) |
123
+ | `description` | Helper text under the label |
124
+
125
+ Fires a `change` event on each click.