@supersoniks/concorde 5.1.2 → 5.1.3-immutable.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 (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 +5183 -5018
  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 +5183 -5018
  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 +58 -0
  260. package/src/core/utils/immutableValue.ts +116 -0
  261. package/src/core/utils/nestedDotForm.spec.ts +88 -0
  262. package/src/core/utils/publisherImmutable.spec.ts +127 -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 +51 -51
  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/crawl/core/components/ui/form/fieldset/fieldset.html ADDED
@@ -0,0 +1,266 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/fieldset/fieldset.html" data-doc-id="core/components/ui/form/fieldset/fieldset">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Fieldset — Concorde</title>
7
+ <meta name="description" content="sonic-fieldset groups related form controls with a bordered container and an accessible &lt;fieldset&gt; semantics layer. Put fields in the default slot; add a title with sonic-legend or the shorthand label">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/fieldset/fieldset, fieldset, Fieldset, UI component, form, sonic-fieldset, web component, , sonic-legend, label, description, iconName, variant, default, sonic-form-layout, ghost">
9
+ <meta name="concorde-doc-id" content="core/components/ui/form/fieldset/fieldset">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/fieldset/fieldset.html">
11
+ </head>
12
+ <body>
13
+ <header>
14
+ <p><a href="../../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/form/fieldset/fieldset.md/fieldset" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Fieldset</strong>. sonic-fieldset groups related form controls with a bordered container and an accessible &lt;fieldset&gt; semantics layer. Put fields in the default slot; add a title with sonic-legend or the shorthand label <span>Doc ID: <code>core/components/ui/form/fieldset/fieldset</code>. Keywords: Concorde, supersoniks, core/components/ui/form/fieldset/fieldset, fieldset, Fieldset, UI component, form, sonic-fieldset, web component, , sonic-legend, label, description, iconName, variant, default, sonic-form-layout, ghost. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/fieldset/fieldset.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/fieldset/fieldset.html</a>.</span></p>
19
+ <h1 id="fieldset">Fieldset</h1>
20
+ <p><strong><code>sonic-fieldset</code></strong> groups related form controls with a bordered container and an accessible <strong><code>&lt;fieldset&gt;</code></strong> semantics layer. Put fields in the <strong>default slot</strong>; add a title with <strong><code>sonic-legend</code></strong> or the shorthand <strong><code>label</code></strong> / <strong><code>description</code></strong> / <strong><code>iconName</code></strong> attributes. Default <strong><code>variant</code></strong> is <code>default</code>. Pair the body with <strong><code>sonic-form-layout</code></strong> for responsive columns.</p>
21
+ <h2 id="basic-example">Basic example</h2>
22
+ <pre><code>&lt;sonic-fieldset&gt;
23
+ &lt;sonic-legend label=&quot;Contact details&quot;&gt;&lt;/sonic-legend&gt;
24
+ &lt;sonic-form-layout&gt;
25
+ &lt;sonic-input autocomplete=&quot;email&quot; label=&quot;Email&quot; name=&quot;email&quot; type=&quot;email&quot;&gt;&lt;/sonic-input&gt;
26
+ &lt;sonic-input autocomplete=&quot;tel&quot; label=&quot;Phone&quot; name=&quot;phone&quot; type=&quot;tel&quot;&gt;&lt;/sonic-input&gt;
27
+ &lt;/sonic-form-layout&gt;
28
+ &lt;/sonic-fieldset&gt;
29
+ </code></pre>
30
+ <h2 id="variant">Variant</h2>
31
+ <p><strong><code>ghost</code></strong> and <strong><code>shadow</code></strong> use a transparent border; <strong><code>shadow</code></strong> also applies <strong><code>--sc-shadow-lg</code></strong>.</p>
32
+ <pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
33
+ &lt;sonic-fieldset variant=&quot;default&quot;&gt;
34
+ &lt;sonic-legend label=&quot;Default&quot;&gt;&lt;/sonic-legend&gt;
35
+ &lt;sonic-input label=&quot;Field&quot; name=&quot;a&quot;&gt;&lt;/sonic-input&gt;
36
+ &lt;/sonic-fieldset&gt;
37
+ &lt;sonic-fieldset variant=&quot;ghost&quot;&gt;
38
+ &lt;sonic-legend label=&quot;Ghost&quot;&gt;&lt;/sonic-legend&gt;
39
+ &lt;sonic-input label=&quot;Field&quot; name=&quot;b&quot;&gt;&lt;/sonic-input&gt;
40
+ &lt;/sonic-fieldset&gt;
41
+ &lt;sonic-fieldset variant=&quot;shadow&quot;&gt;
42
+ &lt;sonic-legend label=&quot;Shadow&quot;&gt;&lt;/sonic-legend&gt;
43
+ &lt;sonic-input label=&quot;Field&quot; name=&quot;c&quot;&gt;&lt;/sonic-input&gt;
44
+ &lt;/sonic-fieldset&gt;
45
+ &lt;/div&gt;
46
+ </code></pre>
47
+ <h2 id="tight-layout">Tight layout</h2>
48
+ <p>Set <strong><code>tight</code></strong> to remove horizontal padding and side borders (flat strip inside a parent).</p>
49
+ <pre><code>&lt;sonic-fieldset tight variant=&quot;ghost&quot;&gt;
50
+ &lt;sonic-legend label=&quot;Tight fieldset&quot;&gt;&lt;/sonic-legend&gt;
51
+ &lt;sonic-input label=&quot;Field&quot; name=&quot;tight&quot;&gt;&lt;/sonic-input&gt;
52
+ &lt;/sonic-fieldset&gt;
53
+ </code></pre>
54
+ <h2 id="legend">Legend</h2>
55
+ <p>Use <strong><code>sonic-legend</code></strong> for the group title. Set <strong><code>label</code></strong> and <strong><code>description</code></strong> for simple copy, or use the <strong>default slot</strong> for custom markup. Add secondary text with <strong><code>sonic-legend-description</code></strong>. Place actions in <strong><code>slot=&quot;suffix&quot;</code></strong> on the legend.</p>
56
+ <p>Attribute values on <strong><code>sonic-legend</code></strong> are rendered as HTML—use only trusted content.</p>
57
+ <pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
58
+ &lt;sonic-fieldset&gt;
59
+ &lt;sonic-legend label=&quot;Attributes&quot; description=&quot;Short description via attributes&quot;&gt;&lt;/sonic-legend&gt;
60
+ &lt;sonic-input label=&quot;Field&quot; name=&quot;attr&quot;&gt;&lt;/sonic-input&gt;
61
+ &lt;/sonic-fieldset&gt;
62
+ &lt;sonic-fieldset&gt;
63
+ &lt;sonic-legend iconLibrary=&quot;iconoir&quot; iconName=&quot;pin-alt&quot;&gt;
64
+ Custom title in the default slot
65
+ &lt;sonic-legend-description&gt;Description via sonic-legend-description&lt;/sonic-legend-description&gt;
66
+ &lt;/sonic-legend&gt;
67
+ &lt;sonic-input label=&quot;Field&quot; name=&quot;slot&quot;&gt;&lt;/sonic-input&gt;
68
+ &lt;/sonic-fieldset&gt;
69
+ &lt;/div&gt;
70
+ </code></pre>
71
+ <h2 id="shorthand-legend-on-the-fieldset">Shorthand legend on the fieldset</h2>
72
+ <p>When <strong><code>label</code></strong> is set on <strong><code>sonic-fieldset</code></strong>, the component renders <strong><code>sonic-legend</code></strong> for you. Pass <strong><code>description</code></strong> <strong><code>iconName</code></strong> <strong><code>iconLibrary</code></strong> and <strong><code>iconPrefix</code></strong> the same way. Do not combine shorthand <strong><code>label</code></strong> with a separate slotted <strong><code>sonic-legend</code></strong>—you will get two legends.</p>
73
+ <pre><code>&lt;sonic-fieldset
74
+ label=&quot;Account&quot;
75
+ description=&quot;Basic profile fields&quot;
76
+ iconLibrary=&quot;iconoir&quot;
77
+ iconName=&quot;user&quot;
78
+ &gt;
79
+ &lt;sonic-input label=&quot;Display name&quot; name=&quot;display_name&quot;&gt;&lt;/sonic-input&gt;
80
+ &lt;/sonic-fieldset&gt;
81
+ </code></pre>
82
+ <h2 id="legend-actions">Legend actions</h2>
83
+ <p>Use <strong><code>slot=&quot;suffix&quot;</code></strong> on <strong><code>sonic-legend</code></strong> for menus or icon buttons aligned to the end of the legend row.</p>
84
+ <pre><code>&lt;sonic-fieldset&gt;
85
+ &lt;sonic-legend label=&quot;Personal information&quot;&gt;
86
+ &lt;sonic-pop class=&quot;inline-block&quot; slot=&quot;suffix&quot;&gt;
87
+ &lt;sonic-button shape=&quot;circle&quot; variant=&quot;ghost&quot;&gt;
88
+ &lt;sonic-icon library=&quot;iconoir&quot; size=&quot;lg&quot; name=&quot;more-vert&quot;&gt;&lt;/sonic-icon&gt;
89
+ &lt;/sonic-button&gt;
90
+ &lt;sonic-menu slot=&quot;content&quot; minWidth=&quot;12rem&quot;&gt;
91
+ &lt;sonic-menu-item&gt;Legal notice&lt;/sonic-menu-item&gt;
92
+ &lt;sonic-menu-item&gt;Terms of use&lt;/sonic-menu-item&gt;
93
+ &lt;/sonic-menu&gt;
94
+ &lt;/sonic-pop&gt;
95
+ &lt;/sonic-legend&gt;
96
+ &lt;sonic-form-layout&gt;
97
+ &lt;sonic-input autocomplete=&quot;family-name&quot; label=&quot;Last name&quot; name=&quot;last_name&quot;&gt;&lt;/sonic-input&gt;
98
+ &lt;sonic-input autocomplete=&quot;given-name&quot; label=&quot;First name&quot; name=&quot;first_name&quot;&gt;&lt;/sonic-input&gt;
99
+ &lt;/sonic-form-layout&gt;
100
+ &lt;/sonic-fieldset&gt;
101
+ </code></pre>
102
+ <h2 id="form-association-and-disabled-state">Form association and disabled state</h2>
103
+ <h3 id="associating-a-distant-form">Associating a distant <code>form</code></h3>
104
+ <p>Set <strong><code>form</code></strong> on <strong><code>sonic-fieldset</code></strong> to the <strong><code>id</code></strong> of a <strong><code>&lt;form&gt;</code></strong> elsewhere in the page (same as the native <strong><code>form</code></strong> attribute on <strong><code>&lt;fieldset&gt;</code></strong>). Named fields in the fieldset then belong to that form for submit and constraint validation—for example a toolbar <strong><code>form</code></strong> and a field group rendered lower on the layout.</p>
105
+ <pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
106
+ &lt;form id=&quot;billing-form&quot; class=&quot;flex flex-wrap items-center gap-2&quot;&gt;
107
+ &lt;sonic-button submit type=&quot;primary&quot;&gt;Save billing&lt;/sonic-button&gt;
108
+ &lt;/form&gt;
109
+ &lt;sonic-fieldset form=&quot;billing-form&quot; label=&quot;Billing address&quot;&gt;
110
+ &lt;sonic-form-layout&gt;
111
+ &lt;sonic-input label=&quot;Street&quot; name=&quot;street&quot; autocomplete=&quot;street-address&quot;&gt;&lt;/sonic-input&gt;
112
+ &lt;sonic-input label=&quot;Postal code&quot; required name=&quot;postal_code&quot; autocomplete=&quot;postal-code&quot;&gt;&lt;/sonic-input&gt;
113
+ &lt;sonic-input label=&quot;City&quot; name=&quot;city&quot; autocomplete=&quot;address-level2&quot;&gt;&lt;/sonic-input&gt;
114
+ &lt;/sonic-form-layout&gt;
115
+ &lt;/sonic-fieldset&gt;
116
+ &lt;/div&gt;
117
+ </code></pre>
118
+ <h3 id="disabling-a-group">Disabling a group</h3>
119
+ <p>Set <strong><code>disabled</code></strong> on <strong><code>sonic-fieldset</code></strong> to disable the inner <strong><code>&lt;fieldset&gt;</code></strong> and every control in the group (same as a native fieldset). Use it for read-only steps or sections gated by permissions.</p>
120
+ <pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
121
+ &lt;sonic-fieldset label=&quot;Editable&quot;&gt;
122
+ &lt;sonic-input label=&quot;Display name&quot; name=&quot;display_name&quot;&gt;&lt;/sonic-input&gt;
123
+ &lt;/sonic-fieldset&gt;
124
+ &lt;sonic-fieldset label=&quot;Locked&quot; disabled&gt;
125
+ &lt;sonic-input label=&quot;Account ID&quot; name=&quot;account_id&quot; value=&quot;acct_42&quot;&gt;&lt;/sonic-input&gt;
126
+ &lt;/sonic-fieldset&gt;
127
+ &lt;/div&gt;
128
+ </code></pre>
129
+ <h2 id="accessibility">Accessibility</h2>
130
+ <p>The inner <strong><code>&lt;fieldset&gt;</code></strong> carries grouping semantics. <strong><code>disabled</code></strong> is applied on that element so nested controls are disabled in the usual way. <strong><code>sonic-legend</code></strong> renders a native <strong><code>&lt;legend&gt;</code></strong> for the group label.</p>
131
+ <h2 id="api-reference">API reference</h2>
132
+ <h3 id="sonic-fieldset"><code>sonic-fieldset</code></h3>
133
+ <table>
134
+ <thead>
135
+ <tr>
136
+ <th>Attribute</th>
137
+ <th>Values</th>
138
+ <th>Description</th>
139
+ </tr>
140
+ </thead>
141
+ <tbody><tr>
142
+ <td><code>variant</code></td>
143
+ <td><code>default</code> · <code>ghost</code> · <code>shadow</code> (default <code>default</code>)</td>
144
+ <td>Border and shadow treatment</td>
145
+ </tr>
146
+ <tr>
147
+ <td><code>tight</code></td>
148
+ <td>boolean</td>
149
+ <td>Removes horizontal padding and side borders</td>
150
+ </tr>
151
+ <tr>
152
+ <td><code>label</code></td>
153
+ <td>string</td>
154
+ <td>Shorthand legend title; renders <strong><code>sonic-legend</code></strong> when set</td>
155
+ </tr>
156
+ <tr>
157
+ <td><code>description</code></td>
158
+ <td>string</td>
159
+ <td>Shorthand legend description (HTML)</td>
160
+ </tr>
161
+ <tr>
162
+ <td><code>iconName</code></td>
163
+ <td>string</td>
164
+ <td>Shorthand legend icon <strong><code>name</code></strong></td>
165
+ </tr>
166
+ <tr>
167
+ <td><code>iconLibrary</code></td>
168
+ <td>string</td>
169
+ <td>Shorthand legend icon <strong><code>library</code></strong></td>
170
+ </tr>
171
+ <tr>
172
+ <td><code>iconPrefix</code></td>
173
+ <td>string</td>
174
+ <td>Shorthand legend icon <strong><code>prefix</code></strong></td>
175
+ </tr>
176
+ <tr>
177
+ <td><code>disabled</code></td>
178
+ <td>boolean</td>
179
+ <td>Disables the native <strong><code>&lt;fieldset&gt;</code></strong> and its controls</td>
180
+ </tr>
181
+ <tr>
182
+ <td><code>form</code></td>
183
+ <td>string</td>
184
+ <td><strong><code>id</code></strong> of an associated <strong><code>form</code></strong></td>
185
+ </tr>
186
+ <tr>
187
+ <td><code>dataProvider</code></td>
188
+ <td>string</td>
189
+ <td>Subscriber key; can autofill properties that match publisher fields (e.g. <strong><code>label</code></strong>)</td>
190
+ </tr>
191
+ </tbody></table>
192
+ <table>
193
+ <thead>
194
+ <tr>
195
+ <th>Slot</th>
196
+ <th>Description</th>
197
+ </tr>
198
+ </thead>
199
+ <tbody><tr>
200
+ <td><em>(default)</em></td>
201
+ <td>Legend (optional) and field group content in visual order</td>
202
+ </tr>
203
+ </tbody></table>
204
+ <h3 id="sonic-legend"><code>sonic-legend</code></h3>
205
+ <table>
206
+ <thead>
207
+ <tr>
208
+ <th>Attribute</th>
209
+ <th>Values</th>
210
+ <th>Description</th>
211
+ </tr>
212
+ </thead>
213
+ <tbody><tr>
214
+ <td><code>label</code></td>
215
+ <td>string</td>
216
+ <td>Title HTML when not using the default slot</td>
217
+ </tr>
218
+ <tr>
219
+ <td><code>description</code></td>
220
+ <td>string</td>
221
+ <td>Description HTML (wrapped in <strong><code>sonic-legend-description</code></strong>)</td>
222
+ </tr>
223
+ <tr>
224
+ <td><code>iconName</code></td>
225
+ <td>string</td>
226
+ <td>Leading <strong><code>sonic-icon</code></strong> <strong><code>name</code></strong></td>
227
+ </tr>
228
+ <tr>
229
+ <td><code>iconLibrary</code></td>
230
+ <td>string</td>
231
+ <td>Icon <strong><code>library</code></strong></td>
232
+ </tr>
233
+ <tr>
234
+ <td><code>iconPrefix</code></td>
235
+ <td>string</td>
236
+ <td>Icon <strong><code>prefix</code></strong></td>
237
+ </tr>
238
+ <tr>
239
+ <td><code>forceAutoFill</code></td>
240
+ <td>boolean</td>
241
+ <td>Allows Subscriber autofill to override attribute-backed <strong><code>label</code></strong> / <strong><code>description</code></strong></td>
242
+ </tr>
243
+ </tbody></table>
244
+ <table>
245
+ <thead>
246
+ <tr>
247
+ <th>Slot</th>
248
+ <th>Description</th>
249
+ </tr>
250
+ </thead>
251
+ <tbody><tr>
252
+ <td><em>(default)</em></td>
253
+ <td>Legend title and description components</td>
254
+ </tr>
255
+ <tr>
256
+ <td><code>suffix</code></td>
257
+ <td>Trailing actions (menus, icon buttons)</td>
258
+ </tr>
259
+ </tbody></table>
260
+ <h3 id="sonic-legend-description"><code>sonic-legend-description</code></h3>
261
+ <p>Muted description line below the legend title. No attributes—project content through the <strong>default slot</strong>.</p>
262
+
263
+ </article>
264
+ </main>
265
+ </body>
266
+ </html>
package/docs/{core → crawl/core}/components/ui/form/form-actions/form-actions.html RENAMED
@@ -1,39 +1,38 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/form/form-actions" data-doc-id="core/components/ui/form/form-actions/form-actions">
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html" data-doc-id="core/components/ui/form/form-actions/form-actions">
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Form actions — Concorde by Supersoniks</title>
7
- <meta name="description" content="sonic-form-actions lays out form footer controls (submit, cancel) in a wrapping flex row with a 0.3rem gap. Place it inside sonic-form-layout, where it spans the full width, or at the end of any block">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/form-actions/form-actions, form-actions, Form actions, UI component, form, sonic-form-actions, web component, 0.3rem, sonic-form-layout, justify, direction, justify-content, flex-start, flex-end, center">
6
+ <title>Form actions — Concorde</title>
7
+ <meta name="description" content="sonic-form-actions lays out submit / cancel and other form footer controls in a wrapping flex row with a small fixed gap. Place it inside sonic-form-layout (full-width row) or any block that should en">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/form-actions/form-actions, form-actions, Form actions, UI component, form, sonic-form-actions, web component, sonic-form-layout, direction, row, justify, flex-start, alignItems, center, justify-content">
9
9
  <meta name="concorde-doc-id" content="core/components/ui/form/form-actions/form-actions">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/form/form-actions">
11
- <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/form/form-actions.md">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html">
12
11
  </head>
13
12
  <body>
14
13
  <header>
15
- <p><a href="/docs/index.html">Concorde documentation</a> · <a href="https://concorde.supersoniks.org/core/components/ui/form/form-actions">same URL (interactive)</a> · <a href="/llms.txt">llms.txt</a></p>
14
+ <p><a href="../../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/form/form-actions/form-actions.md/form-actions" rel="nofollow">interactive version</a></p>
16
15
  </header>
17
16
  <main>
18
17
  <article>
19
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Form actions</strong>. sonic-form-actions lays out form footer controls (submit, cancel) in a wrapping flex row with a 0.3rem gap. Place it inside sonic-form-layout, where it spans the full width, or at the end of any block <span>Doc ID: <code>core/components/ui/form/form-actions/form-actions</code>. Keywords: Concorde, supersoniks, core/components/ui/form/form-actions/form-actions, form-actions, Form actions, UI component, form, sonic-form-actions, web component, 0.3rem, sonic-form-layout, justify, direction, justify-content, flex-start, flex-end, center. URL: <a href="https://concorde.supersoniks.org/core/components/ui/form/form-actions">https://concorde.supersoniks.org/core/components/ui/form/form-actions</a>.</span></p>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Form actions</strong>. sonic-form-actions lays out submit / cancel and other form footer controls in a wrapping flex row with a small fixed gap. Place it inside sonic-form-layout (full-width row) or any block that should en <span>Doc ID: <code>core/components/ui/form/form-actions/form-actions</code>. Keywords: Concorde, supersoniks, core/components/ui/form/form-actions/form-actions, form-actions, Form actions, UI component, form, sonic-form-actions, web component, sonic-form-layout, direction, row, justify, flex-start, alignItems, center, justify-content. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html</a>.</span></p>
20
19
  <h1 id="form-actions">Form actions</h1>
21
- <p><strong><code>sonic-form-actions</code></strong> lays out form footer controls (submit, cancel) in a wrapping flex row with a <code>0.3rem</code> gap. Place it inside <code>sonic-form-layout</code>, where it spans the full width, or at the end of any block. Use <code>justify</code> and <code>direction</code> to arrange the controls.</p>
20
+ <p><strong><code>sonic-form-actions</code></strong> lays out submit / cancel and other <strong>form footer controls</strong> in a <strong>wrapping flex row</strong> with a small fixed gap. Place it inside <strong><code>sonic-form-layout</code></strong> (full-width row) or any block that should end with actions. Defaults: <strong><code>direction</code></strong> <code>row</code> · <strong><code>justify</code></strong> <code>flex-start</code> · <strong><code>alignItems</code></strong> <code>center</code>.</p>
22
21
  <h2 id="basic-example">Basic example</h2>
23
- <p>With no attributes, actions align to the start of the row.</p>
22
+ <p>With no attributes, actions align to the <strong>start</strong> of the row (typical for left-to-right forms).</p>
24
23
  <pre><code>&lt;form&gt;
25
24
  &lt;sonic-form-layout&gt;
26
25
  &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
27
26
  &lt;sonic-input label=&quot;Last name&quot;&gt;&lt;/sonic-input&gt;
28
27
  &lt;sonic-form-actions&gt;
29
- &lt;sonic-button type=&quot;success&quot;&gt;&lt;sonic-icon name=&quot;check&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Check in&lt;/sonic-button&gt;
28
+ &lt;sonic-button type=&quot;success&quot;&gt;&lt;sonic-icon name=&quot;check&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Submit&lt;/sonic-button&gt;
30
29
  &lt;sonic-button type=&quot;danger&quot; variant=&quot;ghost&quot;&gt;&lt;sonic-icon name=&quot;undo&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Cancel&lt;/sonic-button&gt;
31
30
  &lt;/sonic-form-actions&gt;
32
31
  &lt;/sonic-form-layout&gt;
33
32
  &lt;/form&gt;
34
33
  </code></pre>
35
- <h2 id="justify">Justify</h2>
36
- <p><code>justify</code> is the CSS <code>justify-content</code> of the row (default <code>flex-start</code>). Use <code>flex-end</code> for dialog-style footers or <code>center</code> for toolbars.</p>
34
+ <h2 id="justify-content">Justify content</h2>
35
+ <p><strong><code>justify</code></strong> maps to CSS <strong><code>justify-content</code></strong>. Use <strong><code>flex-end</code></strong> for dialog-style footers or <strong><code>center</code></strong> for balanced toolbars.</p>
37
36
  <pre><code>&lt;form&gt;
38
37
  &lt;sonic-form-layout&gt;
39
38
  &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
@@ -45,8 +44,8 @@
45
44
  &lt;/sonic-form-layout&gt;
46
45
  &lt;/form&gt;
47
46
  </code></pre>
48
- <h2 id="direction">Direction</h2>
49
- <p><code>direction</code> is the CSS <code>flex-direction</code> (default <code>row</code>). <code>row-reverse</code> swaps the visual order but keeps the DOM and focus order.</p>
47
+ <h2 id="flex-direction">Flex direction</h2>
48
+ <p><strong><code>direction</code></strong> maps to <strong><code>flex-direction</code></strong>. <strong><code>row-reverse</code></strong> swaps visual order while keeping DOM order (focus order unchanged).</p>
50
49
  <pre><code>&lt;form&gt;
51
50
  &lt;sonic-form-layout&gt;
52
51
  &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
@@ -59,7 +58,7 @@
59
58
  &lt;/form&gt;
60
59
  </code></pre>
61
60
  <h2 id="mixed-controls">Mixed controls</h2>
62
- <p>Any content can be slotted, such as a vertical <code>sonic-divider</code>. The default <code>alignItems</code> (<code>center</code>) keeps items of different heights aligned.</p>
61
+ <p>Combine <strong><code>sonic-button</code></strong> with <strong><code>sonic-divider vertical</code></strong> or other slotted content. Default <strong><code>alignItems</code></strong> <code>center</code> keeps unlike heights aligned on the cross axis.</p>
63
62
  <pre><code>&lt;form&gt;
64
63
  &lt;sonic-form-layout&gt;
65
64
  &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
@@ -67,12 +66,12 @@
67
66
  &lt;sonic-form-actions justify=&quot;center&quot;&gt;
68
67
  &lt;sonic-button type=&quot;info&quot; minWidth=&quot;12rem&quot;&gt;
69
68
  &lt;sonic-icon name=&quot;nav-arrow-left&quot; library=&quot;iconoir&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
70
- Previous step
69
+ Left seats
71
70
  &lt;/sonic-button&gt;
72
71
  &lt;sonic-divider vertical&gt;&lt;/sonic-divider&gt;
73
72
  &lt;sonic-button type=&quot;info&quot; minWidth=&quot;12rem&quot;&gt;
74
73
  &lt;sonic-icon name=&quot;nav-arrow-right&quot; library=&quot;iconoir&quot; slot=&quot;suffix&quot;&gt;&lt;/sonic-icon&gt;
75
- Next step
74
+ Right seats
76
75
  &lt;/sonic-button&gt;
77
76
  &lt;/sonic-form-actions&gt;
78
77
  &lt;/sonic-form-layout&gt;
@@ -90,19 +89,20 @@
90
89
  <tbody><tr>
91
90
  <td><code>direction</code></td>
92
91
  <td><code>row</code> (default) · <code>column</code> · <code>row-reverse</code> · <code>column-reverse</code></td>
93
- <td>CSS <code>flex-direction</code> of the row</td>
92
+ <td>Main-axis layout of slotted controls</td>
94
93
  </tr>
95
94
  <tr>
96
95
  <td><code>justify</code></td>
97
- <td>CSS <code>justify-content</code> value (default <code>flex-start</code>)</td>
96
+ <td>CSS justify-content (default <code>flex-start</code>)</td>
98
97
  <td>Distribution along the main axis</td>
99
98
  </tr>
100
99
  <tr>
101
100
  <td><code>alignItems</code></td>
102
- <td>CSS <code>align-items</code> value (default <code>center</code>)</td>
103
- <td>Cross-axis alignment</td>
101
+ <td>CSS align-items (default <code>center</code>)</td>
102
+ <td>Cross-axis alignment when items differ in height</td>
104
103
  </tr>
105
104
  </tbody></table>
105
+ <p>The component exposes a single unnamed slot; there are no named slots. Slotted nodes use the host’s flex <strong><code>gap</code></strong> (<code>0.3rem</code>) and <strong><code>flex-wrap</code></strong>.</p>
106
106
  <table>
107
107
  <thead>
108
108
  <tr>
@@ -112,7 +112,7 @@
112
112
  </thead>
113
113
  <tbody><tr>
114
114
  <td><em>(default)</em></td>
115
- <td>Footer controls</td>
115
+ <td>Footer actions (<strong><code>sonic-button</code></strong> and related controls)</td>
116
116
  </tr>
117
117
  </tbody></table>
118
118
 
package/docs/crawl/core/components/ui/form/form-layout/form-layout.html ADDED
@@ -0,0 +1,121 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html" data-doc-id="core/components/ui/form/form-layout/form-layout">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Form layout — Concorde</title>
7
+ <meta name="description" content="sonic-form-layout arranges slotted form controls in a responsive CSS grid with consistent vertical spacing. Pair sonic-input · sonic-select and sonic-input-autocomplete fields side by side when the ho">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/form-layout/form-layout, form-layout, Form layout, UI component, form, sonic-form-layout, web component, sonic-input, sonic-select, sonic-input-autocomplete, sonic-form-actions, sonic-fieldset, offsetWidth">
9
+ <meta name="concorde-doc-id" content="core/components/ui/form/form-layout/form-layout">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html">
11
+ </head>
12
+ <body>
13
+ <header>
14
+ <p><a href="../../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/form/form-layout/form-layout.md/form-layout" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Form layout</strong>. sonic-form-layout arranges slotted form controls in a responsive CSS grid with consistent vertical spacing. Pair sonic-input · sonic-select and sonic-input-autocomplete fields side by side when the ho <span>Doc ID: <code>core/components/ui/form/form-layout/form-layout</code>. Keywords: Concorde, supersoniks, core/components/ui/form/form-layout/form-layout, form-layout, Form layout, UI component, form, sonic-form-layout, web component, sonic-input, sonic-select, sonic-input-autocomplete, sonic-form-actions, sonic-fieldset, offsetWidth. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html</a>.</span></p>
19
+ <h1 id="form-layout">Form layout</h1>
20
+ <p><strong><code>sonic-form-layout</code></strong> arranges slotted form controls in a <strong>responsive CSS grid</strong> with consistent vertical spacing. Pair <strong><code>sonic-input</code></strong> · <strong><code>sonic-select</code></strong> and <strong><code>sonic-input-autocomplete</code></strong> fields side by side when the host is wider than <strong>440px</strong>; <strong>textareas</strong>, <strong>toggles</strong>, <strong>dividers</strong>, and <strong><code>sonic-form-actions</code></strong> span the full width. Wrap a <strong><code>form</code></strong> or <strong><code>sonic-fieldset</code></strong> body—no attributes are required.</p>
21
+ <h2 id="basic-example">Basic example</h2>
22
+ <p>Typical registration-style form: short fields flow in two columns on wide layouts; long or grouped blocks stay full width.</p>
23
+ <pre><code>&lt;form&gt;
24
+ &lt;sonic-form-layout&gt;
25
+ &lt;sonic-input autocomplete=&quot;family-name&quot; label=&quot;Last name&quot; name=&quot;last_name&quot;&gt;&lt;/sonic-input&gt;
26
+ &lt;sonic-input autocomplete=&quot;given-name&quot; label=&quot;First name&quot; name=&quot;first_name&quot;&gt;&lt;/sonic-input&gt;
27
+ &lt;sonic-select autocomplete=&quot;sex&quot; label=&quot;Gender&quot; name=&quot;gender&quot;&gt;
28
+ &lt;option value=&quot;&quot; selected=&quot;selected&quot;&gt;— Select —&lt;/option&gt;
29
+ &lt;option value=&quot;prefer-not&quot;&gt;Prefer not to say&lt;/option&gt;
30
+ &lt;option value=&quot;male&quot;&gt;Male&lt;/option&gt;
31
+ &lt;option value=&quot;female&quot;&gt;Female&lt;/option&gt;
32
+ &lt;/sonic-select&gt;
33
+ &lt;sonic-input autocomplete=&quot;bday&quot; label=&quot;Date of birth&quot; name=&quot;birth_date&quot; type=&quot;date&quot;&gt;&lt;/sonic-input&gt;
34
+ &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
35
+ &lt;sonic-input autocomplete=&quot;email&quot; label=&quot;Email&quot; name=&quot;email&quot; type=&quot;email&quot;&gt;&lt;/sonic-input&gt;
36
+ &lt;sonic-input
37
+ autocomplete=&quot;email&quot;
38
+ label=&quot;Confirm email&quot;
39
+ name=&quot;email_confirmation&quot;
40
+ type=&quot;email&quot;
41
+ &gt;&lt;/sonic-input&gt;
42
+ &lt;sonic-input autocomplete=&quot;new-password&quot; label=&quot;Password&quot; name=&quot;password&quot; type=&quot;password&quot;&gt;&lt;/sonic-input&gt;
43
+ &lt;sonic-input
44
+ autocomplete=&quot;new-password&quot;
45
+ label=&quot;Confirm password&quot;
46
+ name=&quot;password_confirmation&quot;
47
+ type=&quot;password&quot;
48
+ &gt;&lt;/sonic-input&gt;
49
+ &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
50
+ &lt;sonic-textarea label=&quot;Message&quot; rows=&quot;5&quot;&gt;&lt;/sonic-textarea&gt;
51
+ &lt;sonic-switch&gt;Enable optional feature&lt;/sonic-switch&gt;
52
+ &lt;sonic-checkbox&gt;Subscribe to newsletter&lt;/sonic-checkbox&gt;
53
+ &lt;sonic-checkbox&gt;
54
+ I accept the
55
+ &lt;sonic-link href=&quot;#&quot; class=&quot;underline&quot;&gt;terms and conditions&lt;/sonic-link&gt;
56
+ &lt;/sonic-checkbox&gt;
57
+ &lt;sonic-form-actions&gt;
58
+ &lt;sonic-button type=&quot;success&quot;&gt;Submit&lt;/sonic-button&gt;
59
+ &lt;/sonic-form-actions&gt;
60
+ &lt;/sonic-form-layout&gt;
61
+ &lt;/form&gt;
62
+ </code></pre>
63
+ <h2 id="responsive-columns">Responsive columns</h2>
64
+ <p>When the host <strong><code>offsetWidth</code></strong> is <strong>greater than 440px</strong>, the grid uses <strong>two equal columns</strong> with slightly larger gap (<strong>1.75rem</strong>). Below that breakpoint, fields stack in a <strong>single column</strong> (<strong>1.5rem</strong> gap).</p>
65
+ <p>If the slot contains <strong>exactly one</strong> direct <strong><code>sonic-input</code></strong>, <strong><code>sonic-select</code></strong>, or <strong><code>sonic-input-autocomplete</code></strong>, the layout stays <strong>one column</strong> even above the breakpoint so a lone field does not sit in half an empty row.</p>
66
+ <pre><code>&lt;div class=&quot;grid gap-8 md:grid-cols-2 mb-6&quot;&gt;
67
+ &lt;div&gt;
68
+ &lt;sonic-form-layout style=&quot;max-width: 20rem&quot;&gt;
69
+ &lt;sonic-divider align=&quot;left&quot;&gt;Narrow host (single column)&lt;/sonic-divider&gt;
70
+ &lt;sonic-input label=&quot;Email&quot; name=&quot;email_narrow&quot; type=&quot;email&quot;&gt;&lt;/sonic-input&gt;
71
+ &lt;sonic-input label=&quot;Confirm email&quot; name=&quot;email_confirm_narrow&quot; type=&quot;email&quot;&gt;&lt;/sonic-input&gt;
72
+ &lt;/sonic-form-layout&gt;
73
+ &lt;/div&gt;
74
+ &lt;/div&gt;
75
+ &lt;div&gt;
76
+ &lt;sonic-form-layout&gt;
77
+ &lt;sonic-divider align=&quot;left&quot;&gt;Wide host (two columns for inputs)&lt;/sonic-divider&gt;
78
+ &lt;sonic-input label=&quot;Email&quot; name=&quot;email_wide&quot; type=&quot;email&quot;&gt;&lt;/sonic-input&gt;
79
+ &lt;sonic-input label=&quot;Confirm email&quot; name=&quot;email_confirm_wide&quot; type=&quot;email&quot;&gt;&lt;/sonic-input&gt;
80
+ &lt;/sonic-form-layout&gt;
81
+ &lt;/div&gt;
82
+ </code></pre>
83
+ <h2 id="full-width-slotted-blocks">Full-width slotted blocks</h2>
84
+ <p>Everything except <strong><code>sonic-input</code></strong>, <strong><code>sonic-select</code></strong>, <strong><code>sonic-input-autocomplete</code></strong>, and slotted elements with class <strong><code>form-item-container</code></strong> is assigned <strong><code>grid-column: 1 / -1</code></strong>. Use this for <strong><code>sonic-textarea</code></strong>, <strong><code>sonic-checkbox</code></strong>, <strong><code>sonic-switch</code></strong>, <strong><code>sonic-form-actions</code></strong>, <strong><code>sonic-divider</code></strong>, and similar blocks.</p>
85
+ <p>Slotted <strong><code>sonic-divider</code></strong> sets <strong><code>--sc-divider-my: 0</code></strong> so divider spacing matches the grid rhythm. Slotted <strong><code>sonic-submit</code></strong> uses <strong><code>display: contents</code></strong> so submit controls participate in the grid without an extra wrapper box.</p>
86
+ <pre><code>&lt;sonic-form-layout&gt;
87
+ &lt;sonic-input label=&quot;Subject&quot; name=&quot;subject&quot;&gt;&lt;/sonic-input&gt;
88
+ &lt;sonic-textarea label=&quot;Details&quot; rows=&quot;4&quot;&gt;&lt;/sonic-textarea&gt;
89
+ &lt;sonic-form-actions&gt;
90
+ &lt;sonic-button type=&quot;primary&quot;&gt;Send&lt;/sonic-button&gt;
91
+ &lt;/sonic-form-actions&gt;
92
+ &lt;/sonic-form-layout&gt;
93
+ </code></pre>
94
+ <h2 id="custom-column-wrapper">Custom column wrapper</h2>
95
+ <p>Add class <strong><code>form-item-container</code></strong> on a slotted wrapper (for example a <strong><code>div</code></strong>) when a field is not a direct <strong><code>sonic-input</code></strong> / <strong><code>sonic-select</code></strong> / <strong><code>sonic-input-autocomplete</code></strong> but should still share the two-column flow with short inputs.</p>
96
+ <pre><code>&lt;sonic-form-layout&gt;
97
+ &lt;sonic-input label=&quot;City&quot; name=&quot;city&quot;&gt;&lt;/sonic-input&gt;
98
+ &lt;div class=&quot;form-item-container&quot;&gt;
99
+ &lt;sonic-input label=&quot;Postal code&quot; name=&quot;postal_code&quot;&gt;&lt;/sonic-input&gt;
100
+ &lt;/div&gt;
101
+ &lt;/sonic-form-layout&gt;
102
+ </code></pre>
103
+ <h2 id="api-reference">API reference</h2>
104
+ <p>No public attributes — layout follows slotted children and host width.</p>
105
+ <table>
106
+ <thead>
107
+ <tr>
108
+ <th>Slot</th>
109
+ <th>Description</th>
110
+ </tr>
111
+ </thead>
112
+ <tbody><tr>
113
+ <td><em>(default)</em></td>
114
+ <td>Form fields and blocks in visual order; column vs full-width rules apply per slotted tag or <strong><code>form-item-container</code></strong> class</td>
115
+ </tr>
116
+ </tbody></table>
117
+
118
+ </article>
119
+ </main>
120
+ </body>
121
+ </html>