@supersoniks/concorde 5.1.2 → 5.1.3-immutable.1

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 (497) hide show
  1. package/.agents/skills/concorde-docs/SKILL.md +1 -1
  2. package/.claude/skills +1 -0
  3. package/.github/workflows/ci.yml +21 -0
  4. package/.github-export-ignore +30 -0
  5. package/CONTRIBUTING.md +59 -0
  6. package/DEV.md +54 -0
  7. package/LICENSE +21 -0
  8. package/OPEN_SOURCE_CHECKPOINT.md +133 -0
  9. package/README.md +1 -1
  10. package/ai/README.md +29 -41
  11. package/ai/skills/concorde/SKILL.md +54 -324
  12. package/ai/skills/concorde/rules/composition.md +32 -0
  13. package/ai/skills/concorde/rules/data.md +47 -0
  14. package/ai/skills/concorde/rules/http.md +25 -0
  15. package/ai/skills/concorde/rules/lists-forms.md +35 -0
  16. package/ai/skills/concorde/rules/styling.md +46 -0
  17. package/ai/skills/concorde/rules/troubleshooting.md +45 -0
  18. package/build-infos.json +1 -1
  19. package/concorde-core.bundle.js +177 -177
  20. package/concorde-core.es.js +4993 -4833
  21. package/custom-elements-manifest.public.config.mjs +8 -0
  22. package/{.tmp-cem/custom-elements.json → custom-elements.json} +11722 -8868
  23. package/dist/concorde-core.bundle.js +177 -177
  24. package/dist/concorde-core.es.js +4993 -4833
  25. package/dist/docs-mock-api-sw.js +58 -223
  26. package/dist/docs-mock-api-sw.js.map +4 -4
  27. package/dist/img/og-concorde.jpg +0 -0
  28. package/dist/robots.txt +11 -10
  29. package/docs/assets/index-CD4WyL6o.css +1 -0
  30. package/docs/assets/index-D_alEsng.js +12122 -0
  31. package/docs/crawl/core/components/functional/date/date.html +190 -0
  32. package/docs/crawl/core/components/functional/fetch/fetch.html +109 -0
  33. package/docs/crawl/core/components/functional/if/if.html +27 -0
  34. package/docs/crawl/core/components/functional/jsonata/jsonata.html +79 -0
  35. package/docs/crawl/core/components/functional/list/list.html +70 -0
  36. package/docs/crawl/core/components/functional/mix/mix.html +45 -0
  37. package/docs/crawl/core/components/functional/queue/queue.html +96 -0
  38. package/docs/crawl/core/components/functional/router/router.html +106 -0
  39. package/docs/{core → crawl/core}/components/functional/sdui/sdui-extension-points.html +8 -9
  40. package/docs/crawl/core/components/functional/sdui/sdui.html +368 -0
  41. package/docs/crawl/core/components/functional/states/states.html +66 -0
  42. package/docs/crawl/core/components/functional/submit/submit.html +160 -0
  43. package/docs/{core → crawl/core}/components/functional/subscriber/subscriber.html +5 -6
  44. package/docs/crawl/core/components/functional/value/value.html +51 -0
  45. package/docs/{core → crawl/core}/components/ui/alert/alert.html +63 -53
  46. package/docs/{core → crawl/core}/components/ui/alert-messages/alert-messages.html +5 -6
  47. package/docs/{core → crawl/core}/components/ui/badge/badge.html +33 -33
  48. package/docs/crawl/core/components/ui/button/button.html +150 -0
  49. package/docs/crawl/core/components/ui/captcha/captcha.html +112 -0
  50. package/docs/{core → crawl/core}/components/ui/card/card.html +11 -12
  51. package/docs/{core → crawl/core}/components/ui/divider/divider.html +14 -14
  52. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +73 -0
  53. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +266 -0
  54. package/docs/{core → crawl/core}/components/ui/form/form-actions/form-actions.html +23 -23
  55. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +121 -0
  56. package/docs/crawl/core/components/ui/form/input/input.html +109 -0
  57. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +38 -0
  58. package/docs/crawl/core/components/ui/form/radio/radio.html +56 -0
  59. package/docs/crawl/core/components/ui/form/select/select.html +73 -0
  60. package/docs/crawl/core/components/ui/form/switch/switch.html +56 -0
  61. package/docs/crawl/core/components/ui/form/textarea/textarea.html +59 -0
  62. package/docs/crawl/core/components/ui/group/group.html +104 -0
  63. package/docs/{core → crawl/core}/components/ui/icon/icon.html +9 -10
  64. package/docs/crawl/core/components/ui/image/image.html +298 -0
  65. package/docs/{core → crawl/core}/components/ui/link/link.html +11 -12
  66. package/docs/crawl/core/components/ui/loader/loader.html +124 -0
  67. package/docs/{core → crawl/core}/components/ui/menu/menu.html +33 -34
  68. package/docs/crawl/core/components/ui/modal/modal.html +342 -0
  69. package/docs/crawl/core/components/ui/pop/pop.html +296 -0
  70. package/docs/{core → crawl/core}/components/ui/progress/progress.html +7 -8
  71. package/docs/crawl/core/components/ui/table/table.html +545 -0
  72. package/docs/crawl/core/components/ui/theme/theme.html +131 -0
  73. package/docs/crawl/core/components/ui/toast/toast.html +233 -0
  74. package/docs/crawl/core/components/ui/tooltip/tooltip.html +140 -0
  75. package/docs/{docs/getting-started → crawl/docs/_core-concept}/dataFlow.html +29 -26
  76. package/docs/crawl/docs/_core-concept/overview.html +66 -0
  77. package/docs/crawl/docs/_core-concept/subscriber.html +75 -0
  78. package/docs/crawl/docs/_decorators/ancestor-attribute.html +117 -0
  79. package/docs/crawl/docs/_decorators/auto-subscribe.html +202 -0
  80. package/docs/crawl/docs/_decorators/bind.html +141 -0
  81. package/docs/crawl/docs/_decorators/get.html +149 -0
  82. package/docs/crawl/docs/_decorators/handle.html +165 -0
  83. package/docs/crawl/docs/_decorators/on-assign.html +355 -0
  84. package/docs/crawl/docs/_decorators/patch.html +78 -0
  85. package/docs/crawl/docs/_decorators/post.html +139 -0
  86. package/docs/crawl/docs/_decorators/publish.html +61 -0
  87. package/docs/crawl/docs/_decorators/put.html +78 -0
  88. package/docs/crawl/docs/_decorators/subscribe.html +109 -0
  89. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +137 -0
  90. package/docs/crawl/docs/_directives/sub.html +93 -0
  91. package/docs/{docs/getting-started → crawl/docs/_getting-started}/ai-agents.html +11 -12
  92. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +100 -0
  93. package/docs/crawl/docs/_getting-started/concorde-outside.html +58 -0
  94. package/docs/{docs/getting-started → crawl/docs/_getting-started}/create-a-component.html +14 -11
  95. package/docs/{docs/getting-started → crawl/docs/_getting-started}/my-first-component.html +22 -13
  96. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +110 -0
  97. package/docs/crawl/docs/_getting-started/pubsub.html +62 -0
  98. package/docs/crawl/docs/_getting-started/start.html +76 -0
  99. package/docs/{docs/getting-started → crawl/docs/_getting-started}/theming.html +9 -10
  100. package/docs/{docs/misc → crawl/docs/_misc}/api-configuration.html +18 -18
  101. package/docs/{docs/misc → crawl/docs/_misc}/dataProviderKey.html +11 -12
  102. package/docs/{docs/misc → crawl/docs/_misc}/docs-mock-api.html +28 -25
  103. package/docs/{docs/misc → crawl/docs/_misc}/dynamic-path.html +15 -16
  104. package/docs/{docs/misc → crawl/docs/_misc}/endpoint.html +15 -16
  105. package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +138 -0
  106. package/docs/{docs/misc → crawl/docs/_misc}/html-integration.html +15 -12
  107. package/docs/crawl/hubs/decorators.html +547 -0
  108. package/docs/crawl/hubs/form-components.html +381 -0
  109. package/docs/crawl/hubs/remote-data.html +452 -0
  110. package/docs/crawl/index.html +103 -0
  111. package/docs/docs-mock-api-sw.js +223 -58
  112. package/docs/docs-mock-api-sw.js.map +4 -4
  113. package/docs/index.html +68 -95
  114. package/docs/llms-full.txt +3610 -2231
  115. package/docs/llms.txt +86 -94
  116. package/docs/robots.txt +10 -11
  117. package/docs/sitemap.xml +84 -78
  118. package/docs/src/core/components/functional/date/date.md +231 -91
  119. package/docs/src/core/components/functional/fetch/fetch.md +83 -66
  120. package/docs/src/core/components/functional/if/if.md +3 -28
  121. package/docs/src/core/components/functional/jsonata/jsonata.md +37 -42
  122. package/docs/src/core/components/functional/list/list.md +43 -99
  123. package/docs/src/core/components/functional/mix/mix.md +26 -31
  124. package/docs/src/core/components/functional/queue/queue.md +61 -40
  125. package/docs/src/core/components/functional/router/router.md +65 -64
  126. package/docs/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
  127. package/docs/src/core/components/functional/sdui/component-catalog.json +1 -1
  128. package/docs/src/core/components/functional/sdui/example.json +86 -19
  129. package/docs/src/core/components/functional/sdui/sdui-extension-points.md +1 -1
  130. package/docs/src/core/components/functional/sdui/sdui.md +358 -187
  131. package/docs/src/core/components/functional/states/states.md +61 -86
  132. package/docs/src/core/components/functional/submit/submit.md +72 -64
  133. package/docs/src/core/components/functional/value/value.md +22 -34
  134. package/docs/src/core/components/ui/alert/alert.md +58 -48
  135. package/docs/src/core/components/ui/badge/badge.md +34 -27
  136. package/docs/src/core/components/ui/button/button.md +106 -139
  137. package/docs/src/core/components/ui/captcha/captcha.md +32 -17
  138. package/docs/src/core/components/ui/card/card.md +6 -6
  139. package/docs/src/core/components/ui/divider/divider.md +11 -8
  140. package/docs/src/core/components/ui/form/checkbox/checkbox.md +42 -90
  141. package/docs/src/core/components/ui/form/fieldset/fieldset.md +75 -31
  142. package/docs/src/core/components/ui/form/form-actions/form-actions.md +16 -14
  143. package/docs/src/core/components/ui/form/form-layout/form-layout.md +29 -19
  144. package/docs/src/core/components/ui/form/input/input.md +95 -95
  145. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +29 -0
  146. package/docs/src/core/components/ui/form/radio/radio.md +34 -55
  147. package/docs/src/core/components/ui/form/select/select.md +45 -60
  148. package/docs/src/core/components/ui/form/switch/switch.md +34 -57
  149. package/docs/src/core/components/ui/form/textarea/textarea.md +38 -55
  150. package/docs/src/core/components/ui/group/group.md +33 -35
  151. package/docs/src/core/components/ui/icon/icon.md +4 -4
  152. package/docs/src/core/components/ui/image/image.md +107 -41
  153. package/docs/src/core/components/ui/link/link.md +6 -6
  154. package/docs/src/core/components/ui/loader/loader.md +55 -30
  155. package/docs/src/core/components/ui/menu/menu.md +27 -27
  156. package/docs/src/core/components/ui/modal/modal.md +96 -72
  157. package/docs/src/core/components/ui/pop/pop.md +158 -80
  158. package/docs/src/core/components/ui/progress/progress.md +2 -2
  159. package/docs/src/core/components/ui/table/table.md +255 -91
  160. package/docs/src/core/components/ui/theme/theme.md +36 -11
  161. package/docs/src/core/components/ui/toast/toast.md +117 -48
  162. package/docs/src/core/components/ui/tooltip/tooltip.md +62 -27
  163. package/docs/{docs/getting-started → src/docs/_core-concept}/dataFlow.md +18 -17
  164. package/docs/src/docs/_core-concept/overview.md +57 -0
  165. package/docs/src/docs/_core-concept/subscriber.md +75 -0
  166. package/docs/src/docs/_decorators/ancestor-attribute.md +128 -0
  167. package/docs/src/docs/_decorators/auto-subscribe.md +202 -0
  168. package/docs/src/docs/_decorators/bind.md +167 -0
  169. package/docs/src/docs/_decorators/get.md +162 -0
  170. package/docs/src/docs/_decorators/handle.md +175 -0
  171. package/docs/src/docs/_decorators/on-assign.md +390 -0
  172. package/docs/src/docs/_decorators/patch.md +70 -0
  173. package/docs/src/docs/_decorators/post.md +146 -0
  174. package/docs/src/docs/_decorators/publish.md +55 -0
  175. package/docs/src/docs/_decorators/put.md +70 -0
  176. package/docs/src/docs/_decorators/subscribe.md +100 -0
  177. package/docs/src/docs/_decorators/wait-for-ancestors.md +163 -0
  178. package/docs/src/docs/_directives/sub.md +91 -0
  179. package/docs/src/docs/{getting-started → _getting-started}/ai-agents.md +3 -3
  180. package/docs/src/docs/_getting-started/concorde-manual-install.md +133 -0
  181. package/docs/src/docs/_getting-started/concorde-outside.md +33 -0
  182. package/docs/{docs/getting-started → src/docs/_getting-started}/create-a-component.md +6 -3
  183. package/docs/src/docs/{getting-started → _getting-started}/my-first-component.md +14 -5
  184. package/docs/src/docs/_getting-started/my-first-subscriber.md +120 -0
  185. package/docs/src/docs/_getting-started/pubsub.md +37 -0
  186. package/docs/src/docs/{getting-started → _getting-started}/start.md +13 -1
  187. package/docs/src/docs/{getting-started → _getting-started}/theming.md +2 -2
  188. package/docs/src/docs/{misc → _misc}/api-configuration.md +12 -10
  189. package/docs/src/docs/{misc → _misc}/dataProviderKey.md +4 -4
  190. package/docs/{docs/misc → src/docs/_misc}/docs-mock-api.md +13 -12
  191. package/docs/{docs/misc → src/docs/_misc}/dynamic-path.md +8 -8
  192. package/docs/{docs/misc → src/docs/_misc}/endpoint.md +8 -8
  193. package/docs/src/docs/_misc/formelement-subscriber-removal.md +115 -0
  194. package/docs/{docs/misc → src/docs/_misc}/html-integration.md +5 -4
  195. package/docs/src/docs/search/docs-search.json +4375 -2420
  196. package/docs/src/tsconfig.declarations.json +22 -0
  197. package/docs/src/tsconfig.emit.json +23 -0
  198. package/docs/src/tsconfig.json +2 -23
  199. package/gitlab/job_github_mirror.sh +39 -0
  200. package/index.html +89 -0
  201. package/package.json +22 -4
  202. package/public/img/og-concorde.jpg +0 -0
  203. package/scripts/ai-init.mjs +104 -379
  204. package/scripts/ai-init.test.mjs +81 -239
  205. package/scripts/docs-markdown-vite-plugin.ts +11 -5
  206. package/scripts/docs-public-url.mjs +6 -0
  207. package/scripts/docs.htaccess +7 -0
  208. package/scripts/generate-cem.mjs +244 -0
  209. package/scripts/generate-cem.test.mjs +122 -0
  210. package/scripts/generate-crawl-docs.mjs +29 -5
  211. package/scripts/generate-sdui-catalog.mjs +11 -10
  212. package/scripts/github-export.mjs +150 -0
  213. package/scripts/post-build-docs.js +3 -0
  214. package/scripts/post-build.mjs +0 -0
  215. package/scripts/pre-publish.mjs +2 -1
  216. package/scripts/site-pages.mjs +212 -0
  217. package/scripts/site-pages.test.mjs +116 -0
  218. package/site-pages/about.md +22 -0
  219. package/site-pages/privacy.md +32 -0
  220. package/src/core/components/functional/date/date.md +1 -1
  221. package/src/core/components/functional/example/example.ts +3 -1
  222. package/src/core/components/functional/if/if.ts +0 -0
  223. package/src/core/components/functional/list/list.demo.ts +0 -0
  224. package/src/core/components/functional/list/list.md +6 -2
  225. package/src/core/components/functional/list/list.ts +17 -4
  226. package/src/core/components/functional/mix/mix.md +0 -0
  227. package/src/core/components/functional/router/router.demo.ts +0 -0
  228. package/src/core/components/functional/router/router.ts +0 -0
  229. package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +0 -0
  230. package/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
  231. package/src/core/components/functional/sdui/component-catalog.json +2 -2
  232. package/src/core/components/functional/sdui/example.json +0 -0
  233. package/src/core/components/functional/sdui/sdui-immutable.spec.ts +74 -0
  234. package/src/core/components/functional/sdui/sdui.ts +33 -8
  235. package/src/core/components/functional/sdui/types.ts +0 -0
  236. package/src/core/components/functional/states/states.ts +0 -0
  237. package/src/core/components/functional/submit/submit.spec.ts +60 -0
  238. package/src/core/components/functional/submit/submit.ts +6 -3
  239. package/src/core/components/functional/subscriber/subscriber.ts +0 -0
  240. package/src/core/components/functional/value/value.md +0 -0
  241. package/src/core/components/functional/value/value.ts +0 -0
  242. package/src/core/components/ui/_css/size.ts +0 -0
  243. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  244. package/src/core/components/ui/card/card.md +1 -1
  245. package/src/core/components/ui/form/input/input.md +19 -1
  246. package/src/core/components/ui/form/input/input.ts +8 -2
  247. package/src/core/components/ui/form/radio/radio.md +14 -0
  248. package/src/core/components/ui/image/image.md +17 -17
  249. package/src/core/components/ui/modal/modal.md +2 -2
  250. package/src/core/decorators/subscriber/bind.ts +9 -14
  251. package/src/core/decorators/subscriber/subscribe.ts +15 -9
  252. package/src/core/decorators/subscriber/subscribe.type-test.ts +14 -5
  253. package/src/core/mixins/Subscriber.ts +0 -0
  254. package/src/core/utils/DataBindObserver.ts +0 -0
  255. package/src/core/utils/Objects.ts +0 -0
  256. package/src/core/utils/PublisherProxy.ts +166 -125
  257. package/src/core/utils/deepReadonly.spec.ts +66 -0
  258. package/src/core/utils/deepReadonly.ts +71 -0
  259. package/src/core/utils/immutableValue.spec.ts +54 -0
  260. package/src/core/utils/immutableValue.ts +102 -0
  261. package/src/core/utils/nestedDotForm.spec.ts +88 -0
  262. package/src/core/utils/publisherImmutable.spec.ts +76 -0
  263. package/src/core/utils/route.ts +0 -0
  264. package/src/core/utils/strictGet.spec.ts +61 -0
  265. package/src/core/utils/strictGet.ts +102 -0
  266. package/src/css.d.ts +19 -0
  267. package/src/docs/components/docs-demo-sources.ts +3 -3
  268. package/src/docs/decorators/bind.md +23 -24
  269. package/src/docs/docs-location.spec.ts +10 -0
  270. package/src/docs/docs-location.ts +10 -0
  271. package/src/docs/example/decorators-demo-bind-demos.ts +11 -28
  272. package/src/docs/example/docs-toggle-demos.ts +1 -1
  273. package/src/docs/example/users.ts +0 -0
  274. package/src/docs/getting-started/ai-agents.md +29 -55
  275. package/src/docs/getting-started/dataFlow.md +2 -2
  276. package/src/docs/home/home.ts +3 -1
  277. package/src/docs/misc/publisher-get-immutability-docs-crawl.json +902 -0
  278. package/src/docs/misc/publisher-get-immutability-docs-recheck.json +13 -0
  279. package/src/docs/misc/publisher-get-immutability-study.md +229 -0
  280. package/src/docs/navigation/navigation.ts +5 -1
  281. package/src/docs/search/docs-search.json +358 -58
  282. package/src/docs/search/markdown-renderer.ts +6 -1
  283. package/src/docs/tailwind/css/docs/content.css +4 -5
  284. package/src/tsconfig.declarations.json +22 -0
  285. package/src/tsconfig.emit.json +23 -0
  286. package/src/tsconfig.json +53 -5
  287. package/src/tsconfig.tsbuildinfo +1 -1
  288. package/.taste-skill/after/desktop-fold.jpg +0 -0
  289. package/.taste-skill/after/desktop-page-01.jpg +0 -0
  290. package/.taste-skill/after/desktop-page-02.jpg +0 -0
  291. package/.taste-skill/after/desktop-page-03.jpg +0 -0
  292. package/.taste-skill/after/mobile-fold.jpg +0 -0
  293. package/.taste-skill/after/mobile-page-01.jpg +0 -0
  294. package/.taste-skill/after/report.json +0 -4103
  295. package/.taste-skill/after/tablet-fold.jpg +0 -0
  296. package/.taste-skill/after/tablet-page-01.jpg +0 -0
  297. package/.taste-skill/after/tablet-page-02.jpg +0 -0
  298. package/.taste-skill/before/desktop-fold.jpg +0 -0
  299. package/.taste-skill/before/desktop-page-01.jpg +0 -0
  300. package/.taste-skill/before/desktop-page-02.jpg +0 -0
  301. package/.taste-skill/before/mobile-fold.jpg +0 -0
  302. package/.taste-skill/before/mobile-page-01.jpg +0 -0
  303. package/.taste-skill/before/report.json +0 -2556
  304. package/.taste-skill/before/tablet-fold.jpg +0 -0
  305. package/.taste-skill/before/tablet-page-01.jpg +0 -0
  306. package/.taste-skill/direction.json +0 -510
  307. package/.taste-skill/notes.md +0 -84
  308. package/.taste-skill/prod/desktop-fold.jpg +0 -0
  309. package/.taste-skill/prod/desktop-page-01.jpg +0 -0
  310. package/.taste-skill/prod/desktop-page-02.jpg +0 -0
  311. package/.taste-skill/prod/desktop-page-03.jpg +0 -0
  312. package/.taste-skill/prod/mobile-fold.jpg +0 -0
  313. package/.taste-skill/prod/mobile-page-01.jpg +0 -0
  314. package/.taste-skill/prod/mobile-page-02.jpg +0 -0
  315. package/.taste-skill/prod/report.json +0 -1973
  316. package/.taste-skill/prod/tablet-fold.jpg +0 -0
  317. package/.taste-skill/prod/tablet-page-01.jpg +0 -0
  318. package/.taste-skill/prod/tablet-page-02.jpg +0 -0
  319. package/AUDIT.md +0 -228
  320. package/PLAN-AMELIORATION.md +0 -220
  321. package/PLAN-DOCS-AGENTS.md +0 -80
  322. package/ai/AGENTS.md +0 -56
  323. package/ai/cursor/rules/concorde-menu.mdc +0 -15
  324. package/ai/cursor/rules/concorde-scope.mdc +0 -14
  325. package/ai/cursor/rules/concorde-theme.mdc +0 -13
  326. package/ai/cursor/rules/concorde.mdc +0 -66
  327. package/ai/jetbrains/rules/concorde.md +0 -53
  328. package/ai/skills/concorde-get-set-dp/SKILL.md +0 -194
  329. package/ai/skills/concorde-imports/SKILL.md +0 -78
  330. package/ai/skills/concorde-menu/SKILL.md +0 -74
  331. package/ai/skills/concorde-scope/SKILL.md +0 -70
  332. package/ai/skills/concorde-theme/SKILL.md +0 -57
  333. package/docs/.htaccess +0 -75
  334. package/docs/404.html +0 -15
  335. package/docs/404.md +0 -5
  336. package/docs/assets/index-BgG6FFPt.js +0 -11765
  337. package/docs/assets/index-x89XINSG.css +0 -1
  338. package/docs/core/components/functional/date/date.html +0 -211
  339. package/docs/core/components/functional/date/date.md +0 -150
  340. package/docs/core/components/functional/fetch/fetch.html +0 -180
  341. package/docs/core/components/functional/fetch/fetch.md +0 -108
  342. package/docs/core/components/functional/if/if.html +0 -65
  343. package/docs/core/components/functional/if/if.md +0 -34
  344. package/docs/core/components/functional/jsonata/jsonata.html +0 -110
  345. package/docs/core/components/functional/jsonata/jsonata.md +0 -61
  346. package/docs/core/components/functional/list/list.html +0 -198
  347. package/docs/core/components/functional/list/list.md +0 -121
  348. package/docs/core/components/functional/mix/mix.html +0 -78
  349. package/docs/core/components/functional/mix/mix.md +0 -46
  350. package/docs/core/components/functional/queue/queue.html +0 -155
  351. package/docs/core/components/functional/queue/queue.md +0 -51
  352. package/docs/core/components/functional/router/router.html +0 -154
  353. package/docs/core/components/functional/router/router.md +0 -93
  354. package/docs/core/components/functional/sdui/sdui-extension-points.md +0 -94
  355. package/docs/core/components/functional/sdui/sdui.html +0 -397
  356. package/docs/core/components/functional/sdui/sdui.md +0 -307
  357. package/docs/core/components/functional/states/states.html +0 -141
  358. package/docs/core/components/functional/states/states.md +0 -112
  359. package/docs/core/components/functional/submit/submit.html +0 -178
  360. package/docs/core/components/functional/submit/submit.md +0 -106
  361. package/docs/core/components/functional/subscriber/subscriber.md +0 -91
  362. package/docs/core/components/functional/translation/translation.html +0 -60
  363. package/docs/core/components/functional/translation/translation.md +0 -38
  364. package/docs/core/components/functional/value/value.html +0 -81
  365. package/docs/core/components/functional/value/value.md +0 -47
  366. package/docs/core/components/ui/alert/alert.md +0 -186
  367. package/docs/core/components/ui/alert-messages/alert-messages.md +0 -85
  368. package/docs/core/components/ui/badge/badge.md +0 -181
  369. package/docs/core/components/ui/button/button.html +0 -309
  370. package/docs/core/components/ui/button/button.md +0 -216
  371. package/docs/core/components/ui/captcha/captcha.html +0 -80
  372. package/docs/core/components/ui/captcha/captcha.md +0 -56
  373. package/docs/core/components/ui/card/card.md +0 -215
  374. package/docs/core/components/ui/divider/divider.md +0 -126
  375. package/docs/core/components/ui/form/checkbox/checkbox.html +0 -200
  376. package/docs/core/components/ui/form/checkbox/checkbox.md +0 -125
  377. package/docs/core/components/ui/form/fieldset/fieldset.html +0 -238
  378. package/docs/core/components/ui/form/fieldset/fieldset.md +0 -161
  379. package/docs/core/components/ui/form/form-actions/form-actions.md +0 -98
  380. package/docs/core/components/ui/form/form-layout/form-layout.html +0 -115
  381. package/docs/core/components/ui/form/form-layout/form-layout.md +0 -109
  382. package/docs/core/components/ui/form/input/input.html +0 -235
  383. package/docs/core/components/ui/form/input/input.md +0 -142
  384. package/docs/core/components/ui/form/radio/radio.html +0 -144
  385. package/docs/core/components/ui/form/radio/radio.md +0 -78
  386. package/docs/core/components/ui/form/select/select.html +0 -178
  387. package/docs/core/components/ui/form/select/select.md +0 -86
  388. package/docs/core/components/ui/form/switch/switch.html +0 -146
  389. package/docs/core/components/ui/form/switch/switch.md +0 -80
  390. package/docs/core/components/ui/form/textarea/textarea.html +0 -162
  391. package/docs/core/components/ui/form/textarea/textarea.md +0 -82
  392. package/docs/core/components/ui/group/group.html +0 -113
  393. package/docs/core/components/ui/group/group.md +0 -77
  394. package/docs/core/components/ui/icon/icon.md +0 -214
  395. package/docs/core/components/ui/image/image.html +0 -194
  396. package/docs/core/components/ui/image/image.md +0 -167
  397. package/docs/core/components/ui/link/link.md +0 -81
  398. package/docs/core/components/ui/loader/loader.html +0 -114
  399. package/docs/core/components/ui/loader/loader.md +0 -87
  400. package/docs/core/components/ui/menu/menu.md +0 -370
  401. package/docs/core/components/ui/modal/modal.html +0 -324
  402. package/docs/core/components/ui/modal/modal.md +0 -211
  403. package/docs/core/components/ui/pop/pop.html +0 -250
  404. package/docs/core/components/ui/pop/pop.md +0 -216
  405. package/docs/core/components/ui/progress/progress.md +0 -109
  406. package/docs/core/components/ui/table/table.html +0 -333
  407. package/docs/core/components/ui/table/table.md +0 -267
  408. package/docs/core/components/ui/theme/theme.html +0 -116
  409. package/docs/core/components/ui/theme/theme.md +0 -97
  410. package/docs/core/components/ui/toast/toast.html +0 -185
  411. package/docs/core/components/ui/toast/toast.md +0 -147
  412. package/docs/core/components/ui/tooltip/tooltip.html +0 -112
  413. package/docs/core/components/ui/tooltip/tooltip.md +0 -89
  414. package/docs/docs/decorators/ancestor-attribute.html +0 -71
  415. package/docs/docs/decorators/ancestor-attribute.md +0 -59
  416. package/docs/docs/decorators/auto-subscribe.html +0 -61
  417. package/docs/docs/decorators/auto-subscribe.md +0 -40
  418. package/docs/docs/decorators/bind.html +0 -86
  419. package/docs/docs/decorators/bind.md +0 -77
  420. package/docs/docs/decorators/get.html +0 -166
  421. package/docs/docs/decorators/get.md +0 -160
  422. package/docs/docs/decorators/handle.html +0 -139
  423. package/docs/docs/decorators/handle.md +0 -119
  424. package/docs/docs/decorators/on-assign.html +0 -72
  425. package/docs/docs/decorators/on-assign.md +0 -63
  426. package/docs/docs/decorators/patch.html +0 -76
  427. package/docs/docs/decorators/patch.md +0 -44
  428. package/docs/docs/decorators/post.html +0 -150
  429. package/docs/docs/decorators/post.md +0 -134
  430. package/docs/docs/decorators/publish.html +0 -74
  431. package/docs/docs/decorators/publish.md +0 -56
  432. package/docs/docs/decorators/put.html +0 -83
  433. package/docs/docs/decorators/put.md +0 -51
  434. package/docs/docs/decorators/subscribe.html +0 -91
  435. package/docs/docs/decorators/subscribe.md +0 -87
  436. package/docs/docs/decorators/wait-for-ancestors.html +0 -82
  437. package/docs/docs/decorators/wait-for-ancestors.md +0 -76
  438. package/docs/docs/directives/sub.html +0 -79
  439. package/docs/docs/directives/sub.md +0 -75
  440. package/docs/docs/directives/t.html +0 -91
  441. package/docs/docs/directives/t.md +0 -73
  442. package/docs/docs/getting-started/ai-agents.md +0 -76
  443. package/docs/docs/getting-started/components.html +0 -27
  444. package/docs/docs/getting-started/components.md +0 -5
  445. package/docs/docs/getting-started/installation.html +0 -69
  446. package/docs/docs/getting-started/installation.md +0 -36
  447. package/docs/docs/getting-started/my-first-component.md +0 -227
  448. package/docs/docs/getting-started/start.html +0 -47
  449. package/docs/docs/getting-started/start.md +0 -35
  450. package/docs/docs/getting-started/theming.md +0 -253
  451. package/docs/docs/index.html +0 -99
  452. package/docs/docs/misc/api-configuration.md +0 -79
  453. package/docs/docs/misc/dataProviderKey.md +0 -168
  454. package/docs/hubs/decorators.html +0 -443
  455. package/docs/hubs/form-components.html +0 -404
  456. package/docs/hubs/remote-data.html +0 -371
  457. package/docs/img/archive/concorde-001-2cv.webp +0 -0
  458. package/docs/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  459. package/docs/img/archive/concorde-red-arrows-2002.webm +0 -0
  460. package/docs/img/archive/credits.json +0 -28
  461. package/docs/index.md +0 -22
  462. package/docs/src/core/components/functional/translation/translation.md +0 -38
  463. package/docs/src/docs/decorators/ancestor-attribute.md +0 -59
  464. package/docs/src/docs/decorators/auto-subscribe.md +0 -40
  465. package/docs/src/docs/decorators/bind.md +0 -77
  466. package/docs/src/docs/decorators/get.md +0 -160
  467. package/docs/src/docs/decorators/handle.md +0 -119
  468. package/docs/src/docs/decorators/on-assign.md +0 -63
  469. package/docs/src/docs/decorators/patch.md +0 -44
  470. package/docs/src/docs/decorators/post.md +0 -134
  471. package/docs/src/docs/decorators/publish.md +0 -56
  472. package/docs/src/docs/decorators/put.md +0 -51
  473. package/docs/src/docs/decorators/subscribe.md +0 -87
  474. package/docs/src/docs/decorators/wait-for-ancestors.md +0 -76
  475. package/docs/src/docs/directives/sub.md +0 -75
  476. package/docs/src/docs/directives/t.md +0 -73
  477. package/docs/src/docs/getting-started/components.md +0 -5
  478. package/docs/src/docs/getting-started/create-a-component.md +0 -136
  479. package/docs/src/docs/getting-started/dataFlow.md +0 -87
  480. package/docs/src/docs/getting-started/installation.md +0 -36
  481. package/docs/src/docs/misc/docs-mock-api.md +0 -62
  482. package/docs/src/docs/misc/dynamic-path.md +0 -71
  483. package/docs/src/docs/misc/endpoint.md +0 -45
  484. package/docs/src/docs/misc/html-integration.md +0 -14
  485. /package/{docs → dist}/img/concorde/plane_01.jpg +0 -0
  486. /package/{docs → dist}/img/concorde/plane_02.jpg +0 -0
  487. /package/{docs → dist}/img/concorde/plane_03.jpg +0 -0
  488. /package/{docs → dist}/img/concorde/plane_04.jpg +0 -0
  489. /package/{docs → dist}/img/concorde/plane_05.jpg +0 -0
  490. /package/{docs → dist}/img/concorde/plane_06.jpg +0 -0
  491. /package/{docs → dist}/img/concorde/plane_07.jpg +0 -0
  492. /package/{docs → dist}/img/concorde/plane_08.jpg +0 -0
  493. /package/{docs → dist}/img/concorde/plane_09.jpg +0 -0
  494. /package/{docs → dist}/img/concorde/plane_10.jpg +0 -0
  495. /package/{docs → dist}/img/concorde/plane_11.jpg +0 -0
  496. /package/{docs → dist}/img/concorde/plane_12.jpg +0 -0
  497. /package/{docs → dist}/img/concorde/plane_13.jpg +0 -0
package/docs/src/core/components/ui/captcha/captcha.md CHANGED
@@ -1,10 +1,12 @@
1
1
  # Captcha
2
2
 
3
- **`sonic-captcha`** embeds an [ALTCHA](https://altcha.org) 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 content, and the submit sends only once a token is available.
3
+ **`sonic-captcha`** embeds an **ALTCHA** widget and wires **`captchaToken`** / **`needsCaptchaValidation`** on the ancestor **`formDataProvider`** (or **`headersDataProvider`**). **`sonic-submit`** waits for a token before sending when validation is required. The widget loads only on **HTTPS**; on plain HTTP the host renders nothing.
4
+
5
+ > Live widget calls the Supersoniks challenge service — not part of [docs mock API](#docs/_misc/docs-mock-api.md/docs-mock-api).
4
6
 
5
7
  ## Basic example
6
8
 
7
- The widget loads only on **HTTPS**. On plain HTTP the component renders nothing and the form is not blocked.
9
+ Wrap the form scope and place **`sonic-submit`** in the default slot so the challenge appears above the action.
8
10
 
9
11
  <sonic-code>
10
12
  <template>
@@ -13,44 +15,57 @@ The widget loads only on **HTTPS**. On plain HTTP the component renders nothing
13
15
  formDataProvider="captcha-docs-form"
14
16
  submitResultDataProvider="captcha-docs-result"
15
17
  >
16
- <sonic-captcha>
17
- <sonic-input class="mb-3 block" name="email" type="email" label="Email" value="demo@example.com"></sonic-input>
18
+ <sonic-captcha formDataProvider="captcha-docs-form">
19
+ <sonic-input class="mb-3" name="email" type="email" label="Email" value="demo@example.com"></sonic-input>
18
20
  <sonic-submit endPoint="api/register" onClick>
19
- <sonic-button type="primary">Join the crew</sonic-button>
21
+ <sonic-button type="primary">Submit with captcha</sonic-button>
20
22
  </sonic-submit>
21
23
  </sonic-captcha>
22
24
  </sonic-scope>
23
25
  </template>
24
26
  </sonic-code>
25
27
 
26
- ## Form integration
28
+ ## Encrypted site key
29
+
30
+ Optional **`key`** skips client-side key generation. When omitted, the component derives an encrypted key on connect (after **`generateEncryptedKey`**).
31
+
32
+ <sonic-code>
33
+ <template>
34
+ <sonic-captcha formDataProvider="captcha-docs-form" key="6Leq5V0iAAAAAB-41DlWN335jDlcIuXmhNtdd00t">
35
+ <sonic-button type="outline" disabled>Complete the challenge above to enable submit</sonic-button>
36
+ </sonic-captcha>
37
+ </template>
38
+ </sonic-code>
39
+
40
+ ## Form publisher fields
27
41
 
28
- The component writes to the publisher named by the closest `headersDataProvider`, or else `formDataProvider`, on itself or an ancestor. On connect it sets `needsCaptchaValidation` to `true`. When **`sonic-submit`** sees that flag, it requests a token, the captcha copies the solved ALTCHA payload into `captchaToken` and its key into `captchaKey`, and the request is sent. `needsCaptchaValidation` is stripped from the payload. On disconnect both fields are reset.
42
+ On connect (HTTPS only), **`needsCaptchaValidation`** is set to **`true`** and **`captchaToken`** is cleared. When the ALTCHA widget reaches **`verified`**, **`captchaToken`** is written on the form publisher and **`sonic-captcha-validate`** fires (`detail.valid` · **`detail.state`** · optional **`detail.token`** / **`detail.payload`**). **`sonic-submit`** still listens for **`request_token`** to refresh the token immediately before send.
29
43
 
30
44
  <sonic-code language="typescript">
31
45
  <template>
32
46
  {
33
- email: "demo@example.com",
47
+ needsCaptchaValidation: true,
34
48
  captchaKey: "…",
35
49
  captchaToken: "…"
36
50
  }
37
51
  </template>
38
52
  </sonic-code>
39
53
 
40
- ## Key and challenge endpoint
41
-
42
- With no `key`, the component generates an encrypted key on connect. The widget fetches its challenge from the `chalengeUrl` property (a JavaScript property, not an attribute) with `key` and `maxNumber` (default `50000`) as query parameters. Point it at your own ALTCHA server and verify `captchaToken` there.
43
-
44
- Labels follow the page language: French when `<html lang>` starts with `fr`, English otherwise.
45
-
46
54
  ## API reference
47
55
 
48
56
  | Attribute | Values | Description |
49
57
  |----------|---------|-------------|
50
- | `key` | string (default generated) | Key sent to the challenge endpoint and copied to `captchaKey` |
58
+ | `formDataProvider` | publisher id | Same as ancestor form scope; reads/writes **`needsCaptchaValidation`** · **`captchaKey`** · **`captchaToken`** |
59
+ | `key` | string | ALTCHA site key; auto-generated when empty |
60
+ | `action` | string | Optional action name forwarded to the widget |
61
+ | `zIndex` | number (default `9999`) | Stacking for the challenge overlay |
51
62
 
52
63
  | Slot | Description |
53
64
  |------|-------------|
54
- | *(default)* | Form fields and actions, rendered below the widget |
65
+ | *(default)* | Form actions (typically **`sonic-submit`** and fields) rendered below the widget |
66
+
67
+ | Event | Description |
68
+ |-------|-------------|
69
+ | `sonic-captcha-validate` | Fired when **`state`** is **`verified`** · **`error`** or **`expired`**; **`detail.valid`** is **`true`** only for **`verified`** |
55
70
 
56
- No events.
71
+ Related: [Submit](#core/components/functional/submit/submit.md/submit) — **`needsCaptchaValidation`** and deferred send.
package/docs/src/core/components/ui/card/card.md CHANGED
@@ -7,7 +7,7 @@ Cards **group related content** on a padded surface with radius, theme **`type`*
7
7
  <sonic-code>
8
8
  <template>
9
9
  <sonic-card class="max-w-sm">
10
- <p class="m-0">CN 001 · CDG → JFK · On time.</p>
10
+ <p class="m-0">Related content on a raised surface.</p>
11
11
  </sonic-card>
12
12
  </template>
13
13
  </sonic-code>
@@ -153,23 +153,23 @@ Header, media, body, and footer together.
153
153
  <sonic-code>
154
154
  <template>
155
155
  <sonic-card class="max-w-md">
156
- <sonic-card-header label="Featured route" description="CDG → JFK">
156
+ <sonic-card-header label="Featured route" description="San Francisco → New York">
157
157
  <sonic-icon slot="suffix" library="iconoir" name="airplane" aria-hidden="true"></sonic-icon>
158
158
  </sonic-card-header>
159
159
  <sonic-card-main>
160
160
  <sonic-image
161
161
  rounded
162
162
  ratio="16/9"
163
- src="img/concorde/plane_04.jpg"
164
- alt="Concorde on the apron under a blue sky"
163
+ src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
164
+ alt="Airplane wing above the clouds"
165
165
  ></sonic-image>
166
166
  <p class="mb-0">
167
- Nonstop at Mach 2.04, with flexible dates.
167
+ Nonstop flight with flexible dates. Prices shown include taxes and fees.
168
168
  </p>
169
169
  </sonic-card-main>
170
170
  <sonic-card-footer>
171
171
  <div class="flex items-center justify-between gap-3 flex-wrap">
172
- <span class="text-sm font-semibold">Cabin class: Business</span>
172
+ <span class="text-sm font-semibold">From $249</span>
173
173
  <sonic-button type="primary" size="sm">Book</sonic-button>
174
174
  </div>
175
175
  </sonic-card-footer>
package/docs/src/core/components/ui/divider/divider.md CHANGED
@@ -14,7 +14,7 @@ A bare divider is a full-width line with vertical margin. Omit **`size`** to use
14
14
 
15
15
  ## Label and align
16
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.
17
+ **`label`** renders inside the line (HTML via the same pipeline as other form labels). **`align`** controls which side(s) of the line remain visible: **`left`** drops the leading segment, **`right`** drops the trailing segment, **`center`** keeps both.
18
18
 
19
19
  <sonic-code>
20
20
  <template>
@@ -80,12 +80,13 @@ Slotted content replaces or augments **`label`**. Useful for badges, icons, or m
80
80
  <sonic-code>
81
81
  <template>
82
82
  <sonic-divider>
83
- <span class="mr-2">Departures</span>
83
+ <span class="mr-2">Section title</span>
84
84
  <sonic-badge type="danger">+25</sonic-badge>
85
85
  </sonic-divider>
86
86
  </template>
87
87
  </sonic-code>
88
88
 
89
+
89
90
  ## Inside typed cards
90
91
 
91
92
  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.
@@ -94,15 +95,15 @@ On **`sonic-card`** with semantic **`type`** (`primary` · `warning` · `danger`
94
95
  <template>
95
96
  <div class="grid gap-4 max-w-xl">
96
97
  <sonic-card type="danger">
97
- <div>CN 001 is cancelled.</div>
98
- <sonic-divider label="Affected passengers"></sonic-divider>
98
+ <div>This action cannot be undone.</div>
99
+ <sonic-divider label="Affected resources"></sonic-divider>
99
100
  <ul class="m-0 pl-5 text-sm">
100
- <li>Ada Lindqvist</li>
101
- <li>Captain Leo Marchand</li>
101
+ <li>Project files</li>
102
+ <li>Shared links</li>
102
103
  </ul>
103
104
  </sonic-card>
104
105
  <sonic-card type="info">
105
- <div>Aircraft maintenance is scheduled for tonight.</div>
106
+ <div>Maintenance is scheduled for tonight.</div>
106
107
  <sonic-divider></sonic-divider>
107
108
  <div class="opacity-60">Expected downtime: about 15 minutes.</div>
108
109
  </sonic-card>
@@ -116,7 +117,7 @@ On **`sonic-card`** with semantic **`type`** (`primary` · `warning` · `danger`
116
117
  |----------|---------|-------------|
117
118
  | `label` | string (HTML) | Caption centered on the rule; combined with default-slot content when both are set |
118
119
  | `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
+ | `size` | `2xs` · `xs` · `sm` · `md` · `lg` · `xl` · `2xl` · `inherit` | Vertical margin and label `font-size`; omit for host defaults |
120
121
  | `lineStyle` | `solid` · `dashed` · `dotted` (default `solid`) | Stroke style of the rule (HTML attribute `linestyle`) |
121
122
  | `vertical` | boolean | Renders a vertical rule; swap block/inline margins |
122
123
  | `noMargin` | boolean | Sets host margin to `0` |
@@ -124,3 +125,5 @@ On **`sonic-card`** with semantic **`type`** (`primary` · `warning` · `danger`
124
125
  | Slot | Description |
125
126
  |------|-------------|
126
127
  | *(default)* | Label markup when **`label`** is insufficient or empty |
128
+
129
+ The inner flex container exposes **`part="divider"`** for theme overrides.
package/docs/src/core/components/ui/form/checkbox/checkbox.md CHANGED
@@ -1,125 +1,77 @@
1
1
  # Checkbox
2
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
-
3
+ ## Size
7
4
  <sonic-code>
8
5
  <template>
9
- <sonic-checkbox>
10
- Notify me of gate changes
11
- <span slot="description">One message per change, no spam.</span>
12
- </sonic-checkbox>
6
+ <div class="grid gap-2">
7
+ <sonic-checkbox size="2xs">2xs checkbox</sonic-checkbox>
8
+ <sonic-checkbox size="xs">xs checkbox</sonic-checkbox>
9
+ <sonic-checkbox size="sm">sm checkbox</sonic-checkbox>
10
+ <sonic-checkbox>default checkbox</sonic-checkbox>
11
+ <sonic-checkbox size="lg">lg checkbox</sonic-checkbox>
12
+ <sonic-checkbox size="xl">xl checkbox</sonic-checkbox>
13
+ <sonic-checkbox size="2xl">2xl checkbox</sonic-checkbox>
14
+ </div>
13
15
  </template>
14
16
  </sonic-code>
15
17
 
16
- ## Size
17
-
18
- With no `size`, the checkbox follows `md` (1rem).
19
-
18
+ ## Checked
20
19
  <sonic-code>
21
20
  <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>
21
+ <sonic-checkbox checked
22
+ >Already checked checkbox
23
+ </sonic-checkbox>
31
24
  </template>
32
25
  </sonic-code>
33
26
 
34
- ## Checked and disabled
35
-
36
- `checked` sets the initial state. `disabled` blocks interaction and dims the control.
37
-
27
+ ## Disabled
38
28
  <sonic-code>
39
29
  <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>
30
+ <sonic-checkbox disabled
31
+ >Disabled checkbox
32
+ </sonic-checkbox>
46
33
  </template>
47
34
  </sonic-code>
48
35
 
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
-
36
+ ## Disabled and checked
53
37
  <sonic-code>
54
38
  <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>
39
+ <sonic-checkbox disabled checked
40
+ >Disabled but already checked checkbox
41
+ </sonic-checkbox>
61
42
  </template>
62
43
  </sonic-code>
63
44
 
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
-
45
+ ## Checkbox with link
68
46
  <sonic-code>
69
47
  <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>
48
+ <sonic-checkbox>Checkbox with <sonic-link href="#" class="underline text-info">link</sonic-link>
75
49
  </template>
76
50
  </sonic-code>
77
51
 
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
-
52
+ ## Check all checkbox
82
53
  <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>
54
+ <template>
55
+ <div formDataProvider="checkbox-check-all-demo">
56
+ <sonic-checkbox name='someSharedName' value="all" checksAll>All</sonic-checkbox>
57
+ <sonic-divider></sonic-divider>
58
+ <div class="grid gap-2">
59
+ <sonic-checkbox name="someSharedName" value="foo">Foo</sonic-checkbox>
60
+ <sonic-checkbox name="someSharedName" value="bar">Bar</sonic-checkbox>
91
61
  </div>
92
- <div>Selected: <sonic-value dataProvider="checkbox-check-all-demo" key="alerts"></sonic-value></div>
62
+ <sonic-divider></sonic-divider>
63
+ <div>
64
+ <span>Enabling unsetOnDisconect ensures that outdated or irrelevant values are not retained in the form state once their associated inputs are no longer rendered.</span>
65
+ <div id="prunable-checkbox" class="flex gap-2 items-center">
66
+ <sonic-checkbox name="someSharedName" value="baz">Baz</sonic-checkbox>
67
+ <sonic-button variant="ghost" shape="circle" unique name="toggleCheckboxExistance" onclick="document.getElementById('prunable-checkbox').remove();" value="true"><sonic-icon library="fontAwesome" prefix="solid" name="trash"></sonic-icon></sonic-button>
68
+ </div>
93
69
  </div>
94
70
  </template>
95
71
  </sonic-code>
96
72
 
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` |
73
+ ## Example of use — blacklist + queue
119
74
 
120
- | Slot | Description |
121
- |------|-------------|
122
- | *(default)* | Label content (text, links) |
123
- | `description` | Helper text under the label |
75
+ Checked **`blacklistFlags`** values are sent to the mock API (`?blacklistFlags=racist,sexist,…`), which excludes jokes whose **`flags`** match (see `filterDocsJokes` in `src/docs/mock-api/fixtures.ts`).
124
76
 
125
- Fires a `change` event on each click.
77
+ <docs-lit-demo for="docs-joke-blacklist-demo"></docs-lit-demo>
package/docs/src/core/components/ui/form/fieldset/fieldset.md CHANGED
@@ -1,13 +1,13 @@
1
1
  # Fieldset
2
2
 
3
- **`sonic-fieldset`** groups related form controls in a bordered container rendered as a native `<fieldset>`. Put fields in the default slot and title the group with a slotted `sonic-legend` or with the `label` and `description` shorthand. Pair the body with `sonic-form-layout` for responsive columns.
3
+ **`sonic-fieldset`** groups related form controls with a bordered container and an accessible **`<fieldset>`** semantics layer. Put fields in the **default slot**; add a title with **`sonic-legend`** or the shorthand **`label`** / **`description`** / **`iconName`** attributes. Default **`variant`** is `default`. Pair the body with **`sonic-form-layout`** for responsive columns.
4
4
 
5
5
  ## Basic example
6
6
 
7
7
  <sonic-code>
8
8
  <template>
9
9
  <sonic-fieldset>
10
- <sonic-legend label="Passenger contact"></sonic-legend>
10
+ <sonic-legend label="Contact details"></sonic-legend>
11
11
  <sonic-form-layout>
12
12
  <sonic-input autocomplete="email" label="Email" name="email" type="email"></sonic-input>
13
13
  <sonic-input autocomplete="tel" label="Phone" name="phone" type="tel"></sonic-input>
@@ -18,7 +18,7 @@
18
18
 
19
19
  ## Variant
20
20
 
21
- With no `variant`, the fieldset is `default` (bordered). `ghost` and `shadow` hide the border; `shadow` adds `--sc-shadow-lg`.
21
+ **`ghost`** and **`shadow`** use a transparent border; **`shadow`** also applies **`--sc-shadow-lg`**.
22
22
 
23
23
  <sonic-code>
24
24
  <template>
@@ -39,9 +39,9 @@ With no `variant`, the fieldset is `default` (bordered). `ghost` and `shadow` hi
39
39
  </template>
40
40
  </sonic-code>
41
41
 
42
- ## Tight
42
+ ## Tight layout
43
43
 
44
- `tight` removes horizontal padding, side borders and rounding, for a flat strip inside a parent.
44
+ Set **`tight`** to remove horizontal padding and side borders (flat strip inside a parent).
45
45
 
46
46
  <sonic-code>
47
47
  <template>
@@ -54,7 +54,9 @@ With no `variant`, the fieldset is `default` (bordered). `ghost` and `shadow` hi
54
54
 
55
55
  ## Legend
56
56
 
57
- `sonic-legend` takes `label` and `description`, or custom markup in its default slot with `sonic-legend-description` for the secondary line. `iconName` adds a leading `sonic-icon`. **`label` and `description` are rendered as HTML**: pass trusted content only.
57
+ Use **`sonic-legend`** for the group title. Set **`label`** and **`description`** for simple copy, or use the **default slot** for custom markup. Add secondary text with **`sonic-legend-description`**. Place actions in **`slot="suffix"`** on the legend.
58
+
59
+ Attribute values on **`sonic-legend`** are rendered as HTML—use only trusted content.
58
60
 
59
61
  <sonic-code>
60
62
  <template>
@@ -74,15 +76,15 @@ With no `variant`, the fieldset is `default` (bordered). `ghost` and `shadow` hi
74
76
  </template>
75
77
  </sonic-code>
76
78
 
77
- ## Shorthand legend
79
+ ## Shorthand legend on the fieldset
78
80
 
79
- When `label` is set on `sonic-fieldset`, it renders the `sonic-legend` itself and forwards `description` · `iconName` · `iconLibrary` · `iconPrefix`. Do not also slot a `sonic-legend`, or the group gets two titles.
81
+ When **`label`** is set on **`sonic-fieldset`**, the component renders **`sonic-legend`** for you. Pass **`description`** **`iconName`** **`iconLibrary`** and **`iconPrefix`** the same way. Do not combine shorthand **`label`** with a separate slotted **`sonic-legend`**—you will get two legends.
80
82
 
81
83
  <sonic-code>
82
84
  <template>
83
85
  <sonic-fieldset
84
- label="Crew profile"
85
- description="Basic crew member fields"
86
+ label="Account"
87
+ description="Basic profile fields"
86
88
  iconLibrary="iconoir"
87
89
  iconName="user"
88
90
  >
@@ -93,12 +95,12 @@ When `label` is set on `sonic-fieldset`, it renders the `sonic-legend` itself an
93
95
 
94
96
  ## Legend actions
95
97
 
96
- `slot="suffix"` on `sonic-legend` aligns menus or icon buttons to the end of the title row.
98
+ Use **`slot="suffix"`** on **`sonic-legend`** for menus or icon buttons aligned to the end of the legend row.
97
99
 
98
100
  <sonic-code>
99
101
  <template>
100
102
  <sonic-fieldset>
101
- <sonic-legend label="Passenger details">
103
+ <sonic-legend label="Personal information">
102
104
  <sonic-pop class="inline-block" slot="suffix">
103
105
  <sonic-button shape="circle" variant="ghost">
104
106
  <sonic-icon library="iconoir" size="lg" name="more-vert"></sonic-icon>
@@ -117,7 +119,49 @@ When `label` is set on `sonic-fieldset`, it renders the `sonic-legend` itself an
117
119
  </template>
118
120
  </sonic-code>
119
121
 
120
- <sonic-alert status="warning" label="Disabled state and form association" text="Both attributes are set on the inner native fieldset only. Slotted Concorde fields are not disabled or re-associated by them: set disabled on each field instead."></sonic-alert>
122
+ ## Form association and disabled state
123
+
124
+ ### Associating a distant `form`
125
+
126
+ Set **`form`** on **`sonic-fieldset`** to the **`id`** of a **`<form>`** elsewhere in the page (same as the native **`form`** attribute on **`<fieldset>`**). Named fields in the fieldset then belong to that form for submit and constraint validation—for example a toolbar **`form`** and a field group rendered lower on the layout.
127
+
128
+ <sonic-code>
129
+ <template>
130
+ <div class="grid gap-4">
131
+ <form id="billing-form" class="flex flex-wrap items-center gap-2">
132
+ <sonic-button submit type="primary">Save billing</sonic-button>
133
+ </form>
134
+ <sonic-fieldset form="billing-form" label="Billing address">
135
+ <sonic-form-layout>
136
+ <sonic-input label="Street" name="street" autocomplete="street-address"></sonic-input>
137
+ <sonic-input label="Postal code" required name="postal_code" autocomplete="postal-code"></sonic-input>
138
+ <sonic-input label="City" name="city" autocomplete="address-level2"></sonic-input>
139
+ </sonic-form-layout>
140
+ </sonic-fieldset>
141
+ </div>
142
+ </template>
143
+ </sonic-code>
144
+
145
+ ### Disabling a group
146
+
147
+ Set **`disabled`** on **`sonic-fieldset`** to disable the inner **`<fieldset>`** and every control in the group (same as a native fieldset). Use it for read-only steps or sections gated by permissions.
148
+
149
+ <sonic-code>
150
+ <template>
151
+ <div class="grid gap-4">
152
+ <sonic-fieldset label="Editable">
153
+ <sonic-input label="Display name" name="display_name"></sonic-input>
154
+ </sonic-fieldset>
155
+ <sonic-fieldset label="Locked" disabled>
156
+ <sonic-input label="Account ID" name="account_id" value="acct_42"></sonic-input>
157
+ </sonic-fieldset>
158
+ </div>
159
+ </template>
160
+ </sonic-code>
161
+
162
+ ## Accessibility
163
+
164
+ The inner **`<fieldset>`** carries grouping semantics. **`disabled`** is applied on that element so nested controls are disabled in the usual way. **`sonic-legend`** renders a native **`<legend>`** for the group label.
121
165
 
122
166
  ## API reference
123
167
 
@@ -126,36 +170,36 @@ When `label` is set on `sonic-fieldset`, it renders the `sonic-legend` itself an
126
170
  | Attribute | Values | Description |
127
171
  |----------|---------|-------------|
128
172
  | `variant` | `default` · `ghost` · `shadow` (default `default`) | Border and shadow treatment |
129
- | `tight` | boolean | Removes horizontal padding, side borders and rounding |
130
- | `label` | string | Shorthand title; renders a `sonic-legend` when set |
131
- | `description` | string | Shorthand description (HTML) |
132
- | `iconName` | string | Shorthand legend icon `name` |
133
- | `iconLibrary` | string | Shorthand legend icon `library` |
134
- | `iconPrefix` | string | Shorthand legend icon `prefix` |
135
- | `disabled` | boolean | Sets `disabled` on the inner native `<fieldset>` |
136
- | `form` | string | Sets `form` on the inner native `<fieldset>` |
137
- | `dataProvider` | string | Publisher key; matching publisher fields (e.g. `label`) fill the properties |
173
+ | `tight` | boolean | Removes horizontal padding and side borders |
174
+ | `label` | string | Shorthand legend title; renders **`sonic-legend`** when set |
175
+ | `description` | string | Shorthand legend description (HTML) |
176
+ | `iconName` | string | Shorthand legend icon **`name`** |
177
+ | `iconLibrary` | string | Shorthand legend icon **`library`** |
178
+ | `iconPrefix` | string | Shorthand legend icon **`prefix`** |
179
+ | `disabled` | boolean | Disables the native **`<fieldset>`** and its controls |
180
+ | `form` | string | **`id`** of an associated **`form`** |
181
+ | `dataProvider` | string | Subscriber key; can autofill properties that match publisher fields (e.g. **`label`**) |
138
182
 
139
183
  | Slot | Description |
140
184
  |------|-------------|
141
- | *(default)* | Optional `sonic-legend`, then the grouped fields |
185
+ | *(default)* | Legend (optional) and field group content in visual order |
142
186
 
143
187
  ### `sonic-legend`
144
188
 
145
189
  | Attribute | Values | Description |
146
190
  |----------|---------|-------------|
147
- | `label` | string | Title (HTML) |
148
- | `description` | string | Description (HTML), wrapped in `sonic-legend-description` |
149
- | `iconName` | string | Leading `sonic-icon` `name` |
150
- | `iconLibrary` | string | Icon `library` |
151
- | `iconPrefix` | string | Icon `prefix` |
152
- | `forceAutoFill` | boolean | Lets a `label` or `description` set as a property override the attribute value |
191
+ | `label` | string | Title HTML when not using the default slot |
192
+ | `description` | string | Description HTML (wrapped in **`sonic-legend-description`**) |
193
+ | `iconName` | string | Leading **`sonic-icon`** **`name`** |
194
+ | `iconLibrary` | string | Icon **`library`** |
195
+ | `iconPrefix` | string | Icon **`prefix`** |
196
+ | `forceAutoFill` | boolean | Allows Subscriber autofill to override attribute-backed **`label`** / **`description`** |
153
197
 
154
198
  | Slot | Description |
155
199
  |------|-------------|
156
- | *(default)* | Custom title and `sonic-legend-description` |
200
+ | *(default)* | Legend title and description components |
157
201
  | `suffix` | Trailing actions (menus, icon buttons) |
158
202
 
159
203
  ### `sonic-legend-description`
160
204
 
161
- No attributes. The default slot holds the muted line under the legend title.
205
+ Muted description line below the legend title. No attributes—project content through the **default slot**.