@supersoniks/concorde 5.1.0 → 5.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (628) hide show
  1. package/.agents/skills/concorde-docs/SKILL.md +153 -0
  2. package/.agents/skills/{concorde-component-docs/template.md → concorde-docs/templates/component.md} +6 -2
  3. package/.agents/skills/concorde-docs/templates/decorator.md +43 -0
  4. package/.agents/skills/concorde-docs/templates/guide.md +25 -0
  5. package/.claude/launch.json +15 -0
  6. package/.claude/vite.http.config.mjs +7 -0
  7. package/.taste-skill/after/desktop-fold.jpg +0 -0
  8. package/.taste-skill/after/desktop-page-01.jpg +0 -0
  9. package/.taste-skill/after/desktop-page-02.jpg +0 -0
  10. package/.taste-skill/after/desktop-page-03.jpg +0 -0
  11. package/.taste-skill/after/mobile-fold.jpg +0 -0
  12. package/.taste-skill/after/mobile-page-01.jpg +0 -0
  13. package/.taste-skill/after/report.json +4103 -0
  14. package/.taste-skill/after/tablet-fold.jpg +0 -0
  15. package/.taste-skill/after/tablet-page-01.jpg +0 -0
  16. package/.taste-skill/after/tablet-page-02.jpg +0 -0
  17. package/.taste-skill/before/desktop-fold.jpg +0 -0
  18. package/.taste-skill/before/desktop-page-01.jpg +0 -0
  19. package/.taste-skill/before/desktop-page-02.jpg +0 -0
  20. package/.taste-skill/before/mobile-fold.jpg +0 -0
  21. package/.taste-skill/before/mobile-page-01.jpg +0 -0
  22. package/.taste-skill/before/report.json +2556 -0
  23. package/.taste-skill/before/tablet-fold.jpg +0 -0
  24. package/.taste-skill/before/tablet-page-01.jpg +0 -0
  25. package/.taste-skill/direction.json +510 -0
  26. package/.taste-skill/notes.md +84 -0
  27. package/.taste-skill/prod/desktop-fold.jpg +0 -0
  28. package/.taste-skill/prod/desktop-page-01.jpg +0 -0
  29. package/.taste-skill/prod/desktop-page-02.jpg +0 -0
  30. package/.taste-skill/prod/desktop-page-03.jpg +0 -0
  31. package/.taste-skill/prod/mobile-fold.jpg +0 -0
  32. package/.taste-skill/prod/mobile-page-01.jpg +0 -0
  33. package/.taste-skill/prod/mobile-page-02.jpg +0 -0
  34. package/.taste-skill/prod/report.json +1973 -0
  35. package/.taste-skill/prod/tablet-fold.jpg +0 -0
  36. package/.taste-skill/prod/tablet-page-01.jpg +0 -0
  37. package/.taste-skill/prod/tablet-page-02.jpg +0 -0
  38. package/.tmp-cem/custom-elements.json +2013 -2013
  39. package/AUDIT.md +228 -0
  40. package/PLAN-AMELIORATION.md +220 -0
  41. package/PLAN-DOCS-AGENTS.md +80 -0
  42. package/README.md +3 -3
  43. package/ai/skills/concorde/SKILL.md +1 -1
  44. package/ai/skills/concorde-get-set-dp/SKILL.md +3 -3
  45. package/ai/skills/concorde-theme/SKILL.md +1 -1
  46. package/build-infos.json +1 -1
  47. package/concorde-core.bundle.js +16 -16
  48. package/concorde-core.es.js +235 -233
  49. package/dist/concorde-core.bundle.js +16 -16
  50. package/dist/concorde-core.es.js +235 -233
  51. package/dist/img/archive/concorde-001-2cv.webp +0 -0
  52. package/dist/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  53. package/dist/img/archive/concorde-red-arrows-2002.webm +0 -0
  54. package/dist/img/archive/credits.json +28 -0
  55. package/docs/.htaccess +75 -0
  56. package/docs/404.html +15 -0
  57. package/docs/404.md +5 -0
  58. package/docs/assets/index-BgG6FFPt.js +11765 -0
  59. package/docs/assets/index-x89XINSG.css +1 -0
  60. package/docs/core/components/functional/date/date.html +211 -0
  61. package/docs/core/components/functional/date/date.md +150 -0
  62. package/docs/core/components/functional/fetch/fetch.html +180 -0
  63. package/docs/core/components/functional/fetch/fetch.md +108 -0
  64. package/docs/core/components/functional/if/if.html +65 -0
  65. package/docs/core/components/functional/if/if.md +34 -0
  66. package/docs/core/components/functional/jsonata/jsonata.html +110 -0
  67. package/docs/core/components/functional/jsonata/jsonata.md +61 -0
  68. package/docs/core/components/functional/list/list.html +198 -0
  69. package/docs/core/components/functional/list/list.md +121 -0
  70. package/docs/core/components/functional/mix/mix.html +78 -0
  71. package/docs/core/components/functional/mix/mix.md +46 -0
  72. package/docs/core/components/functional/queue/queue.html +155 -0
  73. package/docs/core/components/functional/queue/queue.md +51 -0
  74. package/docs/core/components/functional/router/router.html +154 -0
  75. package/docs/core/components/functional/router/router.md +93 -0
  76. package/docs/core/components/functional/sdui/sdui-extension-points.html +127 -0
  77. package/docs/core/components/functional/sdui/sdui-extension-points.md +94 -0
  78. package/docs/core/components/functional/sdui/sdui.html +397 -0
  79. package/docs/core/components/functional/sdui/sdui.md +307 -0
  80. package/docs/core/components/functional/states/states.html +141 -0
  81. package/docs/core/components/functional/states/states.md +112 -0
  82. package/docs/core/components/functional/submit/submit.html +178 -0
  83. package/docs/core/components/functional/submit/submit.md +106 -0
  84. package/docs/{crawl/core → core}/components/functional/subscriber/subscriber.html +6 -5
  85. package/docs/core/components/functional/subscriber/subscriber.md +91 -0
  86. package/docs/core/components/functional/translation/translation.html +60 -0
  87. package/docs/core/components/functional/translation/translation.md +38 -0
  88. package/docs/core/components/functional/value/value.html +81 -0
  89. package/docs/core/components/functional/value/value.md +47 -0
  90. package/docs/core/components/ui/alert/alert.html +201 -0
  91. package/docs/core/components/ui/alert/alert.md +186 -0
  92. package/docs/core/components/ui/alert-messages/alert-messages.html +132 -0
  93. package/docs/core/components/ui/alert-messages/alert-messages.md +85 -0
  94. package/docs/core/components/ui/badge/badge.html +197 -0
  95. package/docs/core/components/ui/badge/badge.md +181 -0
  96. package/docs/core/components/ui/button/button.html +309 -0
  97. package/docs/core/components/ui/button/button.md +216 -0
  98. package/docs/core/components/ui/captcha/captcha.html +80 -0
  99. package/docs/core/components/ui/captcha/captcha.md +56 -0
  100. package/docs/core/components/ui/card/card.html +254 -0
  101. package/docs/core/components/ui/card/card.md +215 -0
  102. package/docs/core/components/ui/divider/divider.html +144 -0
  103. package/docs/core/components/ui/divider/divider.md +126 -0
  104. package/docs/core/components/ui/form/checkbox/checkbox.html +200 -0
  105. package/docs/core/components/ui/form/checkbox/checkbox.md +125 -0
  106. package/docs/core/components/ui/form/fieldset/fieldset.html +238 -0
  107. package/docs/core/components/ui/form/fieldset/fieldset.md +161 -0
  108. package/docs/core/components/ui/form/form-actions/form-actions.html +122 -0
  109. package/docs/core/components/ui/form/form-actions/form-actions.md +98 -0
  110. package/docs/core/components/ui/form/form-layout/form-layout.html +115 -0
  111. package/docs/core/components/ui/form/form-layout/form-layout.md +109 -0
  112. package/docs/core/components/ui/form/input/input.html +235 -0
  113. package/docs/core/components/ui/form/input/input.md +142 -0
  114. package/docs/core/components/ui/form/radio/radio.html +144 -0
  115. package/docs/core/components/ui/form/radio/radio.md +78 -0
  116. package/docs/core/components/ui/form/select/select.html +178 -0
  117. package/docs/core/components/ui/form/select/select.md +86 -0
  118. package/docs/core/components/ui/form/switch/switch.html +146 -0
  119. package/docs/core/components/ui/form/switch/switch.md +80 -0
  120. package/docs/core/components/ui/form/textarea/textarea.html +162 -0
  121. package/docs/core/components/ui/form/textarea/textarea.md +82 -0
  122. package/docs/core/components/ui/group/group.html +113 -0
  123. package/docs/core/components/ui/group/group.md +77 -0
  124. package/docs/core/components/ui/icon/icon.html +223 -0
  125. package/docs/core/components/ui/icon/icon.md +214 -0
  126. package/docs/core/components/ui/image/image.html +194 -0
  127. package/docs/core/components/ui/image/image.md +167 -0
  128. package/docs/core/components/ui/link/link.html +101 -0
  129. package/docs/core/components/ui/link/link.md +81 -0
  130. package/docs/core/components/ui/loader/loader.html +114 -0
  131. package/docs/core/components/ui/loader/loader.md +87 -0
  132. package/docs/{crawl/core → core}/components/ui/menu/menu.html +189 -116
  133. package/docs/core/components/ui/menu/menu.md +370 -0
  134. package/docs/core/components/ui/modal/modal.html +324 -0
  135. package/docs/core/components/ui/modal/modal.md +211 -0
  136. package/docs/core/components/ui/pop/pop.html +250 -0
  137. package/docs/core/components/ui/pop/pop.md +216 -0
  138. package/docs/core/components/ui/progress/progress.html +132 -0
  139. package/docs/core/components/ui/progress/progress.md +109 -0
  140. package/docs/core/components/ui/table/table.html +333 -0
  141. package/docs/core/components/ui/table/table.md +267 -0
  142. package/docs/core/components/ui/theme/theme.html +116 -0
  143. package/docs/core/components/ui/theme/theme.md +97 -0
  144. package/docs/core/components/ui/toast/toast.html +185 -0
  145. package/docs/core/components/ui/toast/toast.md +147 -0
  146. package/docs/core/components/ui/tooltip/tooltip.html +112 -0
  147. package/docs/core/components/ui/tooltip/tooltip.md +89 -0
  148. package/docs/docs/decorators/ancestor-attribute.html +71 -0
  149. package/docs/docs/decorators/ancestor-attribute.md +59 -0
  150. package/docs/docs/decorators/auto-subscribe.html +61 -0
  151. package/docs/docs/decorators/auto-subscribe.md +40 -0
  152. package/docs/docs/decorators/bind.html +86 -0
  153. package/docs/docs/decorators/bind.md +77 -0
  154. package/docs/docs/decorators/get.html +166 -0
  155. package/docs/docs/decorators/get.md +160 -0
  156. package/docs/docs/decorators/handle.html +139 -0
  157. package/docs/docs/decorators/handle.md +119 -0
  158. package/docs/docs/decorators/on-assign.html +72 -0
  159. package/docs/docs/decorators/on-assign.md +63 -0
  160. package/docs/docs/decorators/patch.html +76 -0
  161. package/docs/docs/decorators/patch.md +44 -0
  162. package/docs/docs/decorators/post.html +150 -0
  163. package/docs/docs/decorators/post.md +134 -0
  164. package/docs/docs/decorators/publish.html +74 -0
  165. package/docs/docs/decorators/publish.md +56 -0
  166. package/docs/docs/decorators/put.html +83 -0
  167. package/docs/docs/decorators/put.md +51 -0
  168. package/docs/docs/decorators/subscribe.html +91 -0
  169. package/docs/docs/decorators/subscribe.md +87 -0
  170. package/docs/docs/decorators/wait-for-ancestors.html +82 -0
  171. package/docs/docs/decorators/wait-for-ancestors.md +76 -0
  172. package/docs/docs/directives/sub.html +79 -0
  173. package/docs/docs/directives/sub.md +75 -0
  174. package/docs/docs/directives/t.html +91 -0
  175. package/docs/docs/directives/t.md +73 -0
  176. package/docs/{crawl/docs/_getting-started → docs/getting-started}/ai-agents.html +12 -11
  177. package/{src/docs/_getting-started → docs/docs/getting-started}/ai-agents.md +3 -3
  178. package/docs/docs/getting-started/components.html +27 -0
  179. package/docs/docs/getting-started/components.md +5 -0
  180. package/docs/{crawl/docs/_getting-started → docs/getting-started}/create-a-component.html +11 -14
  181. package/docs/{src/docs/_getting-started → docs/getting-started}/create-a-component.md +3 -6
  182. package/docs/{crawl/docs/_core-concept → docs/getting-started}/dataFlow.html +26 -29
  183. package/docs/{src/docs/_core-concept → docs/getting-started}/dataFlow.md +17 -18
  184. package/docs/docs/getting-started/installation.html +69 -0
  185. package/docs/docs/getting-started/installation.md +36 -0
  186. package/docs/{crawl/docs/_getting-started → docs/getting-started}/my-first-component.html +13 -22
  187. package/docs/{src/docs/_getting-started → docs/getting-started}/my-first-component.md +5 -14
  188. package/docs/docs/getting-started/start.html +47 -0
  189. package/{src/docs/_getting-started → docs/docs/getting-started}/start.md +1 -13
  190. package/docs/docs/getting-started/theming.html +334 -0
  191. package/{src/docs/_getting-started → docs/docs/getting-started}/theming.md +2 -2
  192. package/docs/docs/index.html +99 -0
  193. package/docs/{crawl/docs/_misc → docs/misc}/api-configuration.html +18 -18
  194. package/docs/{src/docs/_misc → docs/misc}/api-configuration.md +10 -12
  195. package/docs/{crawl/docs/_misc → docs/misc}/dataProviderKey.html +12 -11
  196. package/{src/docs/_misc → docs/docs/misc}/dataProviderKey.md +4 -4
  197. package/docs/{crawl/docs/_misc → docs/misc}/docs-mock-api.html +25 -28
  198. package/docs/{src/docs/_misc → docs/misc}/docs-mock-api.md +12 -13
  199. package/docs/{crawl/docs/_misc → docs/misc}/dynamic-path.html +16 -15
  200. package/{src/docs/_misc → docs/docs/misc}/dynamic-path.md +8 -8
  201. package/docs/{crawl/docs/_misc → docs/misc}/endpoint.html +16 -15
  202. package/{src/docs/_misc → docs/docs/misc}/endpoint.md +8 -8
  203. package/docs/{crawl/docs/_misc → docs/misc}/html-integration.html +12 -15
  204. package/docs/{src/docs/_misc → docs/misc}/html-integration.md +4 -5
  205. package/docs/docs-mock-api-sw.js +60 -223
  206. package/docs/docs-mock-api-sw.js.map +4 -4
  207. package/docs/hubs/decorators.html +443 -0
  208. package/docs/hubs/form-components.html +404 -0
  209. package/docs/hubs/remote-data.html +371 -0
  210. package/docs/img/archive/concorde-001-2cv.webp +0 -0
  211. package/docs/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  212. package/docs/img/archive/concorde-red-arrows-2002.webm +0 -0
  213. package/docs/img/archive/credits.json +28 -0
  214. package/docs/img/concorde/plane_01.jpg +0 -0
  215. package/docs/img/concorde/plane_02.jpg +0 -0
  216. package/docs/img/concorde/plane_03.jpg +0 -0
  217. package/docs/img/concorde/plane_04.jpg +0 -0
  218. package/docs/img/concorde/plane_05.jpg +0 -0
  219. package/docs/img/concorde/plane_06.jpg +0 -0
  220. package/docs/img/concorde/plane_07.jpg +0 -0
  221. package/docs/img/concorde/plane_08.jpg +0 -0
  222. package/docs/img/concorde/plane_09.jpg +0 -0
  223. package/docs/img/concorde/plane_10.jpg +0 -0
  224. package/docs/img/concorde/plane_11.jpg +0 -0
  225. package/docs/img/concorde/plane_12.jpg +0 -0
  226. package/docs/img/concorde/plane_13.jpg +0 -0
  227. package/docs/index.html +96 -67
  228. package/docs/index.md +22 -0
  229. package/docs/llms-full.txt +3329 -3295
  230. package/docs/llms.txt +94 -92
  231. package/docs/robots.txt +11 -10
  232. package/docs/sitemap.xml +78 -78
  233. package/docs/src/core/components/functional/date/date.md +91 -231
  234. package/docs/src/core/components/functional/fetch/fetch.md +66 -83
  235. package/docs/src/core/components/functional/if/if.md +28 -3
  236. package/docs/src/core/components/functional/jsonata/jsonata.md +42 -37
  237. package/docs/src/core/components/functional/list/list.md +99 -43
  238. package/docs/src/core/components/functional/mix/mix.md +31 -26
  239. package/docs/src/core/components/functional/queue/queue.md +40 -61
  240. package/docs/src/core/components/functional/router/router.md +64 -65
  241. package/docs/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
  242. package/docs/src/core/components/functional/sdui/component-catalog.json +3103 -0
  243. package/docs/src/core/components/functional/sdui/example.json +19 -86
  244. package/docs/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
  245. package/docs/src/core/components/functional/sdui/sdui.md +196 -245
  246. package/docs/src/core/components/functional/states/states.md +86 -61
  247. package/docs/src/core/components/functional/submit/submit.md +64 -72
  248. package/docs/src/core/components/functional/translation/translation.md +38 -0
  249. package/docs/src/core/components/functional/value/value.md +34 -22
  250. package/docs/src/core/components/ui/alert/alert.md +139 -74
  251. package/docs/src/core/components/ui/alert-messages/alert-messages.md +85 -0
  252. package/docs/src/core/components/ui/badge/badge.md +137 -83
  253. package/docs/src/core/components/ui/button/button.md +139 -105
  254. package/docs/src/core/components/ui/captcha/captcha.md +50 -6
  255. package/docs/src/core/components/ui/card/card.md +183 -65
  256. package/docs/src/core/components/ui/divider/divider.md +104 -13
  257. package/docs/src/core/components/ui/form/checkbox/checkbox.md +90 -42
  258. package/docs/src/core/components/ui/form/fieldset/fieldset.md +135 -103
  259. package/docs/src/core/components/ui/form/form-actions/form-actions.md +71 -50
  260. package/docs/src/core/components/ui/form/form-layout/form-layout.md +99 -34
  261. package/docs/src/core/components/ui/form/input/input.md +95 -95
  262. package/docs/src/core/components/ui/form/radio/radio.md +55 -34
  263. package/docs/src/core/components/ui/form/select/select.md +60 -45
  264. package/docs/src/core/components/ui/form/switch/switch.md +57 -34
  265. package/docs/src/core/components/ui/form/textarea/textarea.md +55 -38
  266. package/docs/src/core/components/ui/group/group.md +49 -47
  267. package/docs/src/core/components/ui/icon/icon.md +132 -43
  268. package/docs/src/core/components/ui/image/image.md +132 -72
  269. package/docs/src/core/components/ui/link/link.md +46 -8
  270. package/docs/src/core/components/ui/loader/loader.md +55 -23
  271. package/docs/src/core/components/ui/menu/menu.md +155 -114
  272. package/docs/src/core/components/ui/modal/modal.md +154 -62
  273. package/docs/src/core/components/ui/pop/pop.md +185 -65
  274. package/docs/src/core/components/ui/progress/progress.md +76 -30
  275. package/docs/src/core/components/ui/table/table.md +146 -334
  276. package/docs/src/core/components/ui/theme/theme.md +97 -0
  277. package/docs/src/core/components/ui/toast/toast.md +80 -99
  278. package/docs/src/core/components/ui/tooltip/tooltip.md +52 -45
  279. package/docs/src/docs/decorators/ancestor-attribute.md +59 -0
  280. package/docs/src/docs/decorators/auto-subscribe.md +40 -0
  281. package/docs/src/docs/decorators/bind.md +77 -0
  282. package/docs/src/docs/decorators/get.md +160 -0
  283. package/docs/src/docs/decorators/handle.md +119 -0
  284. package/docs/src/docs/decorators/on-assign.md +63 -0
  285. package/docs/src/docs/decorators/patch.md +44 -0
  286. package/docs/src/docs/decorators/post.md +134 -0
  287. package/docs/src/docs/decorators/publish.md +56 -0
  288. package/docs/src/docs/decorators/put.md +51 -0
  289. package/docs/src/docs/decorators/subscribe.md +87 -0
  290. package/docs/src/docs/decorators/wait-for-ancestors.md +76 -0
  291. package/docs/src/docs/directives/sub.md +75 -0
  292. package/docs/src/docs/directives/t.md +73 -0
  293. package/docs/src/docs/{_getting-started → getting-started}/ai-agents.md +3 -3
  294. package/docs/src/docs/getting-started/components.md +5 -0
  295. package/{src/docs/_getting-started → docs/src/docs/getting-started}/create-a-component.md +3 -6
  296. package/{src/docs/_core-concept → docs/src/docs/getting-started}/dataFlow.md +17 -18
  297. package/docs/src/docs/getting-started/installation.md +36 -0
  298. package/{src/docs/_getting-started → docs/src/docs/getting-started}/my-first-component.md +5 -14
  299. package/docs/src/docs/getting-started/start.md +35 -0
  300. package/docs/src/docs/getting-started/theming.md +253 -0
  301. package/{src/docs/_misc → docs/src/docs/misc}/api-configuration.md +10 -12
  302. package/docs/src/docs/{_misc → misc}/dataProviderKey.md +4 -4
  303. package/{src/docs/_misc → docs/src/docs/misc}/docs-mock-api.md +12 -13
  304. package/docs/src/docs/{_misc → misc}/dynamic-path.md +8 -8
  305. package/docs/src/docs/{_misc → misc}/endpoint.md +8 -8
  306. package/{src/docs/_misc → docs/src/docs/misc}/html-integration.md +4 -5
  307. package/docs/src/docs/search/docs-search.json +3729 -2949
  308. package/docs/src/tsconfig.json +176 -5
  309. package/index.html +94 -67
  310. package/package.json +11 -4
  311. package/public/docs-mock-api-sw.js +58 -223
  312. package/public/docs-mock-api-sw.js.map +4 -4
  313. package/public/img/archive/concorde-001-2cv.webp +0 -0
  314. package/public/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  315. package/public/img/archive/concorde-red-arrows-2002.webm +0 -0
  316. package/public/img/archive/credits.json +28 -0
  317. package/public/img/concorde/plane_01.jpg +0 -0
  318. package/public/img/concorde/plane_02.jpg +0 -0
  319. package/public/img/concorde/plane_03.jpg +0 -0
  320. package/public/img/concorde/plane_04.jpg +0 -0
  321. package/public/img/concorde/plane_05.jpg +0 -0
  322. package/public/img/concorde/plane_06.jpg +0 -0
  323. package/public/img/concorde/plane_07.jpg +0 -0
  324. package/public/img/concorde/plane_08.jpg +0 -0
  325. package/public/img/concorde/plane_09.jpg +0 -0
  326. package/public/img/concorde/plane_10.jpg +0 -0
  327. package/public/img/concorde/plane_11.jpg +0 -0
  328. package/public/img/concorde/plane_12.jpg +0 -0
  329. package/public/img/concorde/plane_13.jpg +0 -0
  330. package/public/robots.txt +11 -10
  331. package/scripts/docs-markdown-vite-plugin.ts +37 -0
  332. package/scripts/docs-public-url.mjs +50 -0
  333. package/scripts/docs.htaccess +75 -0
  334. package/scripts/generate-crawl-docs.mjs +207 -116
  335. package/scripts/generate-crawl-docs.test.mjs +124 -0
  336. package/scripts/post-build-docs.js +34 -50
  337. package/scripts/post-build.mjs +0 -0
  338. package/src/core/components/functional/date/date.md +91 -231
  339. package/src/core/components/functional/fetch/fetch.md +66 -83
  340. package/src/core/components/functional/if/if.md +28 -3
  341. package/src/core/components/functional/if/if.ts +0 -0
  342. package/src/core/components/functional/jsonata/jsonata.md +42 -37
  343. package/src/core/components/functional/list/list.demo.ts +0 -0
  344. package/src/core/components/functional/list/list.md +99 -43
  345. package/src/core/components/functional/mix/mix.md +31 -26
  346. package/src/core/components/functional/queue/queue.demo.ts +10 -7
  347. package/src/core/components/functional/queue/queue.md +40 -61
  348. package/src/core/components/functional/router/router.demo.ts +16 -16
  349. package/src/core/components/functional/router/router.md +64 -65
  350. package/src/core/components/functional/router/router.ts +0 -0
  351. package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +0 -0
  352. package/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
  353. package/src/core/components/functional/sdui/component-catalog.json +1 -1
  354. package/src/core/components/functional/sdui/example.json +19 -86
  355. package/src/core/components/functional/sdui/sdui-extension-points.md +1 -1
  356. package/src/core/components/functional/sdui/sdui.md +187 -358
  357. package/src/core/components/functional/sdui/types.ts +0 -0
  358. package/src/core/components/functional/states/states.demo.ts +21 -22
  359. package/src/core/components/functional/states/states.md +86 -61
  360. package/src/core/components/functional/states/states.ts +1 -1
  361. package/src/core/components/functional/submit/submit.md +64 -72
  362. package/src/core/components/functional/subscriber/subscriber.ts +0 -0
  363. package/src/core/components/functional/translation/translation.md +38 -0
  364. package/src/core/components/functional/value/value.md +34 -22
  365. package/src/core/components/functional/value/value.ts +0 -0
  366. package/src/core/components/ui/_css/size.ts +0 -0
  367. package/src/core/components/ui/alert/alert.md +48 -58
  368. package/src/core/components/ui/badge/badge.md +27 -34
  369. package/src/core/components/ui/button/button.md +139 -106
  370. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  371. package/src/core/components/ui/captcha/captcha.md +17 -32
  372. package/src/core/components/ui/card/card.md +6 -6
  373. package/src/core/components/ui/divider/divider.md +8 -11
  374. package/src/core/components/ui/form/checkbox/checkbox.md +90 -42
  375. package/src/core/components/ui/form/fieldset/fieldset.md +31 -75
  376. package/src/core/components/ui/form/form-actions/form-actions.md +14 -16
  377. package/src/core/components/ui/form/form-layout/form-layout.md +19 -29
  378. package/src/core/components/ui/form/input/input.md +95 -95
  379. package/src/core/components/ui/form/radio/radio.md +55 -34
  380. package/src/core/components/ui/form/select/select.md +60 -45
  381. package/src/core/components/ui/form/switch/switch.md +57 -34
  382. package/src/core/components/ui/form/textarea/textarea.md +55 -38
  383. package/src/core/components/ui/group/group.md +35 -33
  384. package/src/core/components/ui/icon/icon.md +4 -4
  385. package/src/core/components/ui/image/image.md +41 -107
  386. package/src/core/components/ui/link/link.md +6 -6
  387. package/src/core/components/ui/loader/loader.md +30 -55
  388. package/src/core/components/ui/menu/menu.md +27 -27
  389. package/src/core/components/ui/modal/modal.md +72 -96
  390. package/src/core/components/ui/modal/modal.ts +14 -11
  391. package/src/core/components/ui/pop/pop.md +80 -158
  392. package/src/core/components/ui/progress/progress.md +2 -2
  393. package/src/core/components/ui/table/table.md +91 -255
  394. package/src/core/components/ui/theme/theme.md +11 -36
  395. package/src/core/components/ui/toast/toast.md +48 -117
  396. package/src/core/components/ui/tooltip/tooltip.md +27 -62
  397. package/src/core/mixins/Subscriber.ts +0 -0
  398. package/src/core/utils/DataBindObserver.ts +0 -0
  399. package/src/core/utils/LocationHandler.spec.ts +80 -0
  400. package/src/core/utils/LocationHandler.ts +5 -9
  401. package/src/core/utils/Objects.ts +0 -0
  402. package/src/core/utils/route.ts +0 -0
  403. package/src/docs/code.ts +88 -75
  404. package/src/docs/components/docs-demo-sources.ts +70 -147
  405. package/src/docs/components/docs-lit-demo.ts +20 -40
  406. package/src/docs/components/docs-source-link.ts +0 -82
  407. package/src/docs/decorators/ancestor-attribute.md +59 -0
  408. package/src/docs/decorators/auto-subscribe.md +40 -0
  409. package/src/docs/decorators/bind.md +77 -0
  410. package/src/docs/decorators/get.md +160 -0
  411. package/src/docs/decorators/handle.md +119 -0
  412. package/src/docs/decorators/on-assign.md +63 -0
  413. package/src/docs/decorators/patch.md +44 -0
  414. package/src/docs/decorators/post.md +134 -0
  415. package/src/docs/decorators/publish.md +56 -0
  416. package/src/docs/decorators/put.md +51 -0
  417. package/src/docs/decorators/subscribe.md +87 -0
  418. package/src/docs/decorators/wait-for-ancestors.md +76 -0
  419. package/src/docs/directives/sub.md +75 -0
  420. package/src/docs/directives/t.md +73 -0
  421. package/src/docs/docs-location.spec.ts +46 -0
  422. package/src/docs/docs-location.ts +123 -32
  423. package/src/docs/docs.ts +6 -2
  424. package/src/docs/example/decorators-demo-bind-demos.ts +81 -116
  425. package/src/docs/example/decorators-demo-geo.ts +30 -19
  426. package/src/docs/example/decorators-demo-post.ts +88 -186
  427. package/src/docs/example/decorators-demo-subscribe-publish-get-demos.ts +165 -268
  428. package/src/docs/example/decorators-demo.ts +85 -98
  429. package/src/docs/example/docs-api-config-demos.ts +19 -20
  430. package/src/docs/example/docs-boarding-pass-demo.ts +134 -0
  431. package/src/docs/example/docs-flight-demos.ts +147 -0
  432. package/src/docs/example/docs-jsonata-demos.ts +52 -52
  433. package/src/docs/example/docs-list-demos.ts +43 -123
  434. package/src/docs/example/docs-provider-keys.ts +33 -28
  435. package/src/docs/example/docs-queue-demos.ts +37 -77
  436. package/src/docs/example/docs-router-demos.ts +20 -25
  437. package/src/docs/example/docs-submit-demos.ts +48 -48
  438. package/src/docs/example/docs-toggle-demos.ts +4 -3
  439. package/src/docs/example/users.ts +0 -0
  440. package/src/docs/getting-started/ai-agents.md +76 -0
  441. package/src/docs/getting-started/components.md +5 -0
  442. package/src/docs/getting-started/create-a-component.md +136 -0
  443. package/src/docs/getting-started/dataFlow.md +87 -0
  444. package/src/docs/getting-started/installation.md +36 -0
  445. package/src/docs/getting-started/my-first-component.md +227 -0
  446. package/src/docs/getting-started/start.md +35 -0
  447. package/src/docs/getting-started/theming.md +253 -0
  448. package/src/docs/header/header.ts +240 -71
  449. package/src/docs/home/catalog.ts +44 -0
  450. package/src/docs/home/home.ts +520 -0
  451. package/src/docs/home/mach-stage.ts +389 -0
  452. package/src/docs/layout.ts +12 -11
  453. package/src/docs/misc/api-configuration.md +79 -0
  454. package/src/docs/misc/dataProviderKey.md +168 -0
  455. package/src/docs/misc/docs-mock-api.md +62 -0
  456. package/src/docs/misc/dynamic-path.md +71 -0
  457. package/src/docs/misc/endpoint.md +45 -0
  458. package/src/docs/misc/html-integration.md +14 -0
  459. package/src/docs/mock-api/api-config-mock.ts +5 -0
  460. package/src/docs/mock-api/fixtures.ts +0 -278
  461. package/src/docs/mock-api/flights.ts +89 -0
  462. package/src/docs/mock-api/router.ts +3 -4
  463. package/src/docs/mock-api/urls.ts +1 -2
  464. package/src/docs/navigation/components-index.ts +56 -0
  465. package/src/docs/navigation/navigation.ts +219 -232
  466. package/src/docs/navigation/pager.ts +67 -0
  467. package/src/docs/navigation/toc.ts +101 -0
  468. package/src/docs/search/docs-search.json +2419 -4374
  469. package/src/docs/search/markdown-renderer.ts +33 -7
  470. package/src/docs/search/page.ts +9 -6
  471. package/src/docs/search/search.ts +154 -122
  472. package/src/docs/shiki/index.ts +109 -0
  473. package/src/docs/tailwind/css/base/scrollbar.css +22 -0
  474. package/src/docs/tailwind/css/base/theme.css +96 -0
  475. package/src/docs/tailwind/css/base/typography.css +4 -0
  476. package/src/docs/tailwind/css/docs/boarding-pass.css +65 -0
  477. package/src/docs/tailwind/css/docs/content.css +32 -0
  478. package/src/docs/tailwind/css/docs/page.css +10 -0
  479. package/src/docs/tailwind/css/docs.css +9 -0
  480. package/src/docs/tailwind/css/home/hero.css +210 -0
  481. package/src/docs/tailwind/css/home/motion.css +84 -0
  482. package/src/docs/tailwind/css/home/sections.css +416 -0
  483. package/src/docs/tailwind/css/tailwind.css +7 -185
  484. package/src/tsconfig.json +23 -2
  485. package/src/tsconfig.tsbuildinfo +1 -1
  486. package/tailwind.config.js +8 -4
  487. package/vite.config.mts +11 -2
  488. package/.agents/skills/concorde-component-docs/SKILL.md +0 -194
  489. package/.github/workflows/ci.yml +0 -21
  490. package/.github-export-ignore +0 -30
  491. package/CONTRIBUTING.md +0 -59
  492. package/DEV.md +0 -54
  493. package/LICENSE +0 -21
  494. package/OPEN_SOURCE_CHECKPOINT.md +0 -133
  495. package/concorde-3d.bundle.js +0 -3960
  496. package/concorde-3d.es.js +0 -33433
  497. package/concorde-hugging-face-infer.bundle.js +0 -32
  498. package/concorde-hugging-face-infer.es.js +0 -2952
  499. package/concorde-interactive.bundle.js +0 -1157
  500. package/concorde-interactive.es.js +0 -10734
  501. package/concorde-shader.bundle.js +0 -116
  502. package/concorde-shader.es.js +0 -8353
  503. package/concorde-webgpu.bundle.js +0 -307
  504. package/concorde-webgpu.es.js +0 -8627
  505. package/docs/assets/index-D8MVWqY6.js +0 -12251
  506. package/docs/assets/index-DiD0qYvE.css +0 -1
  507. package/docs/crawl/core/components/functional/date/date.html +0 -190
  508. package/docs/crawl/core/components/functional/fetch/fetch.html +0 -109
  509. package/docs/crawl/core/components/functional/if/if.html +0 -27
  510. package/docs/crawl/core/components/functional/jsonata/jsonata.html +0 -79
  511. package/docs/crawl/core/components/functional/list/list.html +0 -70
  512. package/docs/crawl/core/components/functional/mix/mix.html +0 -45
  513. package/docs/crawl/core/components/functional/queue/queue.html +0 -96
  514. package/docs/crawl/core/components/functional/router/router.html +0 -106
  515. package/docs/crawl/core/components/functional/sdui/sdui.html +0 -269
  516. package/docs/crawl/core/components/functional/states/states.html +0 -66
  517. package/docs/crawl/core/components/functional/submit/submit.html +0 -160
  518. package/docs/crawl/core/components/functional/value/value.html +0 -51
  519. package/docs/crawl/core/components/ui/alert/alert.html +0 -110
  520. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +0 -23
  521. package/docs/crawl/core/components/ui/badge/badge.html +0 -119
  522. package/docs/crawl/core/components/ui/button/button.html +0 -149
  523. package/docs/crawl/core/components/ui/captcha/captcha.html +0 -30
  524. package/docs/crawl/core/components/ui/card/card.html +0 -99
  525. package/docs/crawl/core/components/ui/divider/divider.html +0 -58
  526. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +0 -73
  527. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +0 -135
  528. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +0 -79
  529. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +0 -62
  530. package/docs/crawl/core/components/ui/form/input/input.html +0 -109
  531. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +0 -38
  532. package/docs/crawl/core/components/ui/form/radio/radio.html +0 -56
  533. package/docs/crawl/core/components/ui/form/select/select.html +0 -73
  534. package/docs/crawl/core/components/ui/form/switch/switch.html +0 -56
  535. package/docs/crawl/core/components/ui/form/textarea/textarea.html +0 -59
  536. package/docs/crawl/core/components/ui/group/group.html +0 -82
  537. package/docs/crawl/core/components/ui/icon/icon.html +0 -133
  538. package/docs/crawl/core/components/ui/image/image.html +0 -110
  539. package/docs/crawl/core/components/ui/link/link.html +0 -42
  540. package/docs/crawl/core/components/ui/loader/loader.html +0 -50
  541. package/docs/crawl/core/components/ui/modal/modal.html +0 -117
  542. package/docs/crawl/core/components/ui/pop/pop.html +0 -102
  543. package/docs/crawl/core/components/ui/progress/progress.html +0 -58
  544. package/docs/crawl/core/components/ui/table/table.html +0 -413
  545. package/docs/crawl/core/components/ui/toast/toast.html +0 -122
  546. package/docs/crawl/core/components/ui/tooltip/tooltip.html +0 -79
  547. package/docs/crawl/docs/_core-concept/overview.html +0 -66
  548. package/docs/crawl/docs/_core-concept/subscriber.html +0 -75
  549. package/docs/crawl/docs/_decorators/ancestor-attribute.html +0 -116
  550. package/docs/crawl/docs/_decorators/auto-subscribe.html +0 -202
  551. package/docs/crawl/docs/_decorators/bind.html +0 -141
  552. package/docs/crawl/docs/_decorators/get.html +0 -149
  553. package/docs/crawl/docs/_decorators/handle.html +0 -165
  554. package/docs/crawl/docs/_decorators/on-assign.html +0 -355
  555. package/docs/crawl/docs/_decorators/patch.html +0 -78
  556. package/docs/crawl/docs/_decorators/post.html +0 -139
  557. package/docs/crawl/docs/_decorators/publish.html +0 -61
  558. package/docs/crawl/docs/_decorators/put.html +0 -78
  559. package/docs/crawl/docs/_decorators/subscribe.html +0 -109
  560. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +0 -137
  561. package/docs/crawl/docs/_directives/sub.html +0 -93
  562. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +0 -100
  563. package/docs/crawl/docs/_getting-started/concorde-outside.html +0 -58
  564. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +0 -110
  565. package/docs/crawl/docs/_getting-started/pubsub.html +0 -62
  566. package/docs/crawl/docs/_getting-started/start.html +0 -76
  567. package/docs/crawl/docs/_getting-started/theming.html +0 -85
  568. package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +0 -138
  569. package/docs/crawl/hubs/decorators.html +0 -547
  570. package/docs/crawl/hubs/form-components.html +0 -359
  571. package/docs/crawl/hubs/remote-data.html +0 -452
  572. package/docs/crawl/index.html +0 -101
  573. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
  574. package/docs/src/docs/_core-concept/overview.md +0 -57
  575. package/docs/src/docs/_core-concept/subscriber.md +0 -75
  576. package/docs/src/docs/_decorators/ancestor-attribute.md +0 -127
  577. package/docs/src/docs/_decorators/auto-subscribe.md +0 -202
  578. package/docs/src/docs/_decorators/bind.md +0 -167
  579. package/docs/src/docs/_decorators/get.md +0 -162
  580. package/docs/src/docs/_decorators/handle.md +0 -175
  581. package/docs/src/docs/_decorators/on-assign.md +0 -390
  582. package/docs/src/docs/_decorators/patch.md +0 -70
  583. package/docs/src/docs/_decorators/post.md +0 -146
  584. package/docs/src/docs/_decorators/publish.md +0 -55
  585. package/docs/src/docs/_decorators/put.md +0 -70
  586. package/docs/src/docs/_decorators/subscribe.md +0 -100
  587. package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -163
  588. package/docs/src/docs/_directives/sub.md +0 -91
  589. package/docs/src/docs/_getting-started/concorde-manual-install.md +0 -133
  590. package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
  591. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -120
  592. package/docs/src/docs/_getting-started/pubsub.md +0 -37
  593. package/docs/src/docs/_getting-started/start.md +0 -47
  594. package/docs/src/docs/_getting-started/theming.md +0 -91
  595. package/docs/src/docs/_misc/formelement-subscriber-removal.md +0 -115
  596. package/docs/src/tsconfig.declarations.json +0 -22
  597. package/docs/src/tsconfig.emit.json +0 -23
  598. package/gitlab/job_github_mirror.sh +0 -39
  599. package/scripts/github-export.mjs +0 -150
  600. package/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
  601. package/src/css.d.ts +0 -19
  602. package/src/docs/_core-concept/overview.md +0 -57
  603. package/src/docs/_core-concept/subscriber.md +0 -75
  604. package/src/docs/_decorators/ancestor-attribute.md +0 -128
  605. package/src/docs/_decorators/auto-subscribe.md +0 -202
  606. package/src/docs/_decorators/bind.md +0 -167
  607. package/src/docs/_decorators/get.md +0 -162
  608. package/src/docs/_decorators/handle.md +0 -175
  609. package/src/docs/_decorators/on-assign.md +0 -390
  610. package/src/docs/_decorators/patch.md +0 -70
  611. package/src/docs/_decorators/post.md +0 -146
  612. package/src/docs/_decorators/publish.md +0 -55
  613. package/src/docs/_decorators/put.md +0 -70
  614. package/src/docs/_decorators/subscribe.md +0 -100
  615. package/src/docs/_decorators/wait-for-ancestors.md +0 -163
  616. package/src/docs/_directives/sub.md +0 -91
  617. package/src/docs/_getting-started/concorde-manual-install.md +0 -133
  618. package/src/docs/_getting-started/concorde-outside.md +0 -33
  619. package/src/docs/_getting-started/my-first-subscriber.md +0 -120
  620. package/src/docs/_getting-started/pubsub.md +0 -37
  621. package/src/docs/_misc/formelement-subscriber-removal.md +0 -115
  622. package/src/docs/example/docs-input-autocomplete-demos.ts +0 -110
  623. package/src/docs/example/docs-joke-demos.ts +0 -297
  624. package/src/docs/prism/index.ts +0 -6
  625. package/src/docs/prism/prism.css +0 -158
  626. package/src/docs/prism/prism.js +0 -1022
  627. package/src/tsconfig.declarations.json +0 -22
  628. package/src/tsconfig.emit.json +0 -23
package/docs/core/components/ui/form/fieldset/fieldset.html ADDED
@@ -0,0 +1,238 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/form/fieldset" 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 by Supersoniks</title>
7
+ <meta name="description" content="sonic-fieldset groups related form controls in a bordered container rendered as a native &lt;fieldset&gt;. Put fields in the default slot and title the group with a slotted sonic-legend or with the label an">
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, sonic-form-layout, variant, default, ghost, shadow">
9
+ <meta name="concorde-doc-id" content="core/components/ui/form/fieldset/fieldset">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/form/fieldset">
11
+ <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/form/fieldset.md">
12
+ </head>
13
+ <body>
14
+ <header>
15
+ <p><a href="/docs/index.html">Concorde documentation</a> · <a href="https://concorde.supersoniks.org/core/components/ui/form/fieldset">same URL (interactive)</a> · <a href="/llms.txt">llms.txt</a></p>
16
+ </header>
17
+ <main>
18
+ <article>
19
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Fieldset</strong>. sonic-fieldset groups related form controls in a bordered container rendered as a native &lt;fieldset&gt;. Put fields in the default slot and title the group with a slotted sonic-legend or with the label an <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, sonic-form-layout, variant, default, ghost, shadow. URL: <a href="https://concorde.supersoniks.org/core/components/ui/form/fieldset">https://concorde.supersoniks.org/core/components/ui/form/fieldset</a>.</span></p>
20
+ <h1 id="fieldset">Fieldset</h1>
21
+ <p><strong><code>sonic-fieldset</code></strong> groups related form controls in a bordered container rendered as a native <code>&lt;fieldset&gt;</code>. Put fields in the default slot and title the group with a slotted <code>sonic-legend</code> or with the <code>label</code> and <code>description</code> shorthand. Pair the body with <code>sonic-form-layout</code> for responsive columns.</p>
22
+ <h2 id="basic-example">Basic example</h2>
23
+ <pre><code>&lt;sonic-fieldset&gt;
24
+ &lt;sonic-legend label=&quot;Passenger contact&quot;&gt;&lt;/sonic-legend&gt;
25
+ &lt;sonic-form-layout&gt;
26
+ &lt;sonic-input autocomplete=&quot;email&quot; label=&quot;Email&quot; name=&quot;email&quot; type=&quot;email&quot;&gt;&lt;/sonic-input&gt;
27
+ &lt;sonic-input autocomplete=&quot;tel&quot; label=&quot;Phone&quot; name=&quot;phone&quot; type=&quot;tel&quot;&gt;&lt;/sonic-input&gt;
28
+ &lt;/sonic-form-layout&gt;
29
+ &lt;/sonic-fieldset&gt;
30
+ </code></pre>
31
+ <h2 id="variant">Variant</h2>
32
+ <p>With no <code>variant</code>, the fieldset is <code>default</code> (bordered). <code>ghost</code> and <code>shadow</code> hide the border; <code>shadow</code> adds <code>--sc-shadow-lg</code>.</p>
33
+ <pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
34
+ &lt;sonic-fieldset variant=&quot;default&quot;&gt;
35
+ &lt;sonic-legend label=&quot;Default&quot;&gt;&lt;/sonic-legend&gt;
36
+ &lt;sonic-input label=&quot;Field&quot; name=&quot;a&quot;&gt;&lt;/sonic-input&gt;
37
+ &lt;/sonic-fieldset&gt;
38
+ &lt;sonic-fieldset variant=&quot;ghost&quot;&gt;
39
+ &lt;sonic-legend label=&quot;Ghost&quot;&gt;&lt;/sonic-legend&gt;
40
+ &lt;sonic-input label=&quot;Field&quot; name=&quot;b&quot;&gt;&lt;/sonic-input&gt;
41
+ &lt;/sonic-fieldset&gt;
42
+ &lt;sonic-fieldset variant=&quot;shadow&quot;&gt;
43
+ &lt;sonic-legend label=&quot;Shadow&quot;&gt;&lt;/sonic-legend&gt;
44
+ &lt;sonic-input label=&quot;Field&quot; name=&quot;c&quot;&gt;&lt;/sonic-input&gt;
45
+ &lt;/sonic-fieldset&gt;
46
+ &lt;/div&gt;
47
+ </code></pre>
48
+ <h2 id="tight">Tight</h2>
49
+ <p><code>tight</code> removes horizontal padding, side borders and rounding, for a flat strip inside a parent.</p>
50
+ <pre><code>&lt;sonic-fieldset tight variant=&quot;ghost&quot;&gt;
51
+ &lt;sonic-legend label=&quot;Tight fieldset&quot;&gt;&lt;/sonic-legend&gt;
52
+ &lt;sonic-input label=&quot;Field&quot; name=&quot;tight&quot;&gt;&lt;/sonic-input&gt;
53
+ &lt;/sonic-fieldset&gt;
54
+ </code></pre>
55
+ <h2 id="legend">Legend</h2>
56
+ <p><code>sonic-legend</code> takes <code>label</code> and <code>description</code>, or custom markup in its default slot with <code>sonic-legend-description</code> for the secondary line. <code>iconName</code> adds a leading <code>sonic-icon</code>. <strong><code>label</code> and <code>description</code> are rendered as HTML</strong>: pass trusted content only.</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">Shorthand legend</h2>
72
+ <p>When <code>label</code> is set on <code>sonic-fieldset</code>, it renders the <code>sonic-legend</code> itself and forwards <code>description</code> · <code>iconName</code> · <code>iconLibrary</code> · <code>iconPrefix</code>. Do not also slot a <code>sonic-legend</code>, or the group gets two titles.</p>
73
+ <pre><code>&lt;sonic-fieldset
74
+ label=&quot;Crew profile&quot;
75
+ description=&quot;Basic crew member 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><code>slot=&quot;suffix&quot;</code> on <code>sonic-legend</code> aligns menus or icon buttons to the end of the title row.</p>
84
+ <pre><code>&lt;sonic-fieldset&gt;
85
+ &lt;sonic-legend label=&quot;Passenger details&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
+ <p><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></p>
103
+ <h2 id="api-reference">API reference</h2>
104
+ <h3 id="sonic-fieldset"><code>sonic-fieldset</code></h3>
105
+ <table>
106
+ <thead>
107
+ <tr>
108
+ <th>Attribute</th>
109
+ <th>Values</th>
110
+ <th>Description</th>
111
+ </tr>
112
+ </thead>
113
+ <tbody><tr>
114
+ <td><code>variant</code></td>
115
+ <td><code>default</code> · <code>ghost</code> · <code>shadow</code> (default <code>default</code>)</td>
116
+ <td>Border and shadow treatment</td>
117
+ </tr>
118
+ <tr>
119
+ <td><code>tight</code></td>
120
+ <td>boolean</td>
121
+ <td>Removes horizontal padding, side borders and rounding</td>
122
+ </tr>
123
+ <tr>
124
+ <td><code>label</code></td>
125
+ <td>string</td>
126
+ <td>Shorthand title; renders a <code>sonic-legend</code> when set</td>
127
+ </tr>
128
+ <tr>
129
+ <td><code>description</code></td>
130
+ <td>string</td>
131
+ <td>Shorthand description (HTML)</td>
132
+ </tr>
133
+ <tr>
134
+ <td><code>iconName</code></td>
135
+ <td>string</td>
136
+ <td>Shorthand legend icon <code>name</code></td>
137
+ </tr>
138
+ <tr>
139
+ <td><code>iconLibrary</code></td>
140
+ <td>string</td>
141
+ <td>Shorthand legend icon <code>library</code></td>
142
+ </tr>
143
+ <tr>
144
+ <td><code>iconPrefix</code></td>
145
+ <td>string</td>
146
+ <td>Shorthand legend icon <code>prefix</code></td>
147
+ </tr>
148
+ <tr>
149
+ <td><code>disabled</code></td>
150
+ <td>boolean</td>
151
+ <td>Sets <code>disabled</code> on the inner native <code>&lt;fieldset&gt;</code></td>
152
+ </tr>
153
+ <tr>
154
+ <td><code>form</code></td>
155
+ <td>string</td>
156
+ <td>Sets <code>form</code> on the inner native <code>&lt;fieldset&gt;</code></td>
157
+ </tr>
158
+ <tr>
159
+ <td><code>dataProvider</code></td>
160
+ <td>string</td>
161
+ <td>Publisher key; matching publisher fields (e.g. <code>label</code>) fill the properties</td>
162
+ </tr>
163
+ </tbody></table>
164
+ <table>
165
+ <thead>
166
+ <tr>
167
+ <th>Slot</th>
168
+ <th>Description</th>
169
+ </tr>
170
+ </thead>
171
+ <tbody><tr>
172
+ <td><em>(default)</em></td>
173
+ <td>Optional <code>sonic-legend</code>, then the grouped fields</td>
174
+ </tr>
175
+ </tbody></table>
176
+ <h3 id="sonic-legend"><code>sonic-legend</code></h3>
177
+ <table>
178
+ <thead>
179
+ <tr>
180
+ <th>Attribute</th>
181
+ <th>Values</th>
182
+ <th>Description</th>
183
+ </tr>
184
+ </thead>
185
+ <tbody><tr>
186
+ <td><code>label</code></td>
187
+ <td>string</td>
188
+ <td>Title (HTML)</td>
189
+ </tr>
190
+ <tr>
191
+ <td><code>description</code></td>
192
+ <td>string</td>
193
+ <td>Description (HTML), wrapped in <code>sonic-legend-description</code></td>
194
+ </tr>
195
+ <tr>
196
+ <td><code>iconName</code></td>
197
+ <td>string</td>
198
+ <td>Leading <code>sonic-icon</code> <code>name</code></td>
199
+ </tr>
200
+ <tr>
201
+ <td><code>iconLibrary</code></td>
202
+ <td>string</td>
203
+ <td>Icon <code>library</code></td>
204
+ </tr>
205
+ <tr>
206
+ <td><code>iconPrefix</code></td>
207
+ <td>string</td>
208
+ <td>Icon <code>prefix</code></td>
209
+ </tr>
210
+ <tr>
211
+ <td><code>forceAutoFill</code></td>
212
+ <td>boolean</td>
213
+ <td>Lets a <code>label</code> or <code>description</code> set as a property override the attribute value</td>
214
+ </tr>
215
+ </tbody></table>
216
+ <table>
217
+ <thead>
218
+ <tr>
219
+ <th>Slot</th>
220
+ <th>Description</th>
221
+ </tr>
222
+ </thead>
223
+ <tbody><tr>
224
+ <td><em>(default)</em></td>
225
+ <td>Custom title and <code>sonic-legend-description</code></td>
226
+ </tr>
227
+ <tr>
228
+ <td><code>suffix</code></td>
229
+ <td>Trailing actions (menus, icon buttons)</td>
230
+ </tr>
231
+ </tbody></table>
232
+ <h3 id="sonic-legend-description"><code>sonic-legend-description</code></h3>
233
+ <p>No attributes. The default slot holds the muted line under the legend title.</p>
234
+
235
+ </article>
236
+ </main>
237
+ </body>
238
+ </html>
package/docs/core/components/ui/form/fieldset/fieldset.md ADDED
@@ -0,0 +1,161 @@
1
+ # Fieldset
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.
4
+
5
+ ## Basic example
6
+
7
+ <sonic-code>
8
+ <template>
9
+ <sonic-fieldset>
10
+ <sonic-legend label="Passenger contact"></sonic-legend>
11
+ <sonic-form-layout>
12
+ <sonic-input autocomplete="email" label="Email" name="email" type="email"></sonic-input>
13
+ <sonic-input autocomplete="tel" label="Phone" name="phone" type="tel"></sonic-input>
14
+ </sonic-form-layout>
15
+ </sonic-fieldset>
16
+ </template>
17
+ </sonic-code>
18
+
19
+ ## Variant
20
+
21
+ With no `variant`, the fieldset is `default` (bordered). `ghost` and `shadow` hide the border; `shadow` adds `--sc-shadow-lg`.
22
+
23
+ <sonic-code>
24
+ <template>
25
+ <div class="grid gap-4">
26
+ <sonic-fieldset variant="default">
27
+ <sonic-legend label="Default"></sonic-legend>
28
+ <sonic-input label="Field" name="a"></sonic-input>
29
+ </sonic-fieldset>
30
+ <sonic-fieldset variant="ghost">
31
+ <sonic-legend label="Ghost"></sonic-legend>
32
+ <sonic-input label="Field" name="b"></sonic-input>
33
+ </sonic-fieldset>
34
+ <sonic-fieldset variant="shadow">
35
+ <sonic-legend label="Shadow"></sonic-legend>
36
+ <sonic-input label="Field" name="c"></sonic-input>
37
+ </sonic-fieldset>
38
+ </div>
39
+ </template>
40
+ </sonic-code>
41
+
42
+ ## Tight
43
+
44
+ `tight` removes horizontal padding, side borders and rounding, for a flat strip inside a parent.
45
+
46
+ <sonic-code>
47
+ <template>
48
+ <sonic-fieldset tight variant="ghost">
49
+ <sonic-legend label="Tight fieldset"></sonic-legend>
50
+ <sonic-input label="Field" name="tight"></sonic-input>
51
+ </sonic-fieldset>
52
+ </template>
53
+ </sonic-code>
54
+
55
+ ## Legend
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.
58
+
59
+ <sonic-code>
60
+ <template>
61
+ <div class="grid gap-4">
62
+ <sonic-fieldset>
63
+ <sonic-legend label="Attributes" description="Short description via attributes"></sonic-legend>
64
+ <sonic-input label="Field" name="attr"></sonic-input>
65
+ </sonic-fieldset>
66
+ <sonic-fieldset>
67
+ <sonic-legend iconLibrary="iconoir" iconName="pin-alt">
68
+ Custom title in the default slot
69
+ <sonic-legend-description>Description via sonic-legend-description</sonic-legend-description>
70
+ </sonic-legend>
71
+ <sonic-input label="Field" name="slot"></sonic-input>
72
+ </sonic-fieldset>
73
+ </div>
74
+ </template>
75
+ </sonic-code>
76
+
77
+ ## Shorthand legend
78
+
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.
80
+
81
+ <sonic-code>
82
+ <template>
83
+ <sonic-fieldset
84
+ label="Crew profile"
85
+ description="Basic crew member fields"
86
+ iconLibrary="iconoir"
87
+ iconName="user"
88
+ >
89
+ <sonic-input label="Display name" name="display_name"></sonic-input>
90
+ </sonic-fieldset>
91
+ </template>
92
+ </sonic-code>
93
+
94
+ ## Legend actions
95
+
96
+ `slot="suffix"` on `sonic-legend` aligns menus or icon buttons to the end of the title row.
97
+
98
+ <sonic-code>
99
+ <template>
100
+ <sonic-fieldset>
101
+ <sonic-legend label="Passenger details">
102
+ <sonic-pop class="inline-block" slot="suffix">
103
+ <sonic-button shape="circle" variant="ghost">
104
+ <sonic-icon library="iconoir" size="lg" name="more-vert"></sonic-icon>
105
+ </sonic-button>
106
+ <sonic-menu slot="content" minWidth="12rem">
107
+ <sonic-menu-item>Legal notice</sonic-menu-item>
108
+ <sonic-menu-item>Terms of use</sonic-menu-item>
109
+ </sonic-menu>
110
+ </sonic-pop>
111
+ </sonic-legend>
112
+ <sonic-form-layout>
113
+ <sonic-input autocomplete="family-name" label="Last name" name="last_name"></sonic-input>
114
+ <sonic-input autocomplete="given-name" label="First name" name="first_name"></sonic-input>
115
+ </sonic-form-layout>
116
+ </sonic-fieldset>
117
+ </template>
118
+ </sonic-code>
119
+
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>
121
+
122
+ ## API reference
123
+
124
+ ### `sonic-fieldset`
125
+
126
+ | Attribute | Values | Description |
127
+ |----------|---------|-------------|
128
+ | `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 |
138
+
139
+ | Slot | Description |
140
+ |------|-------------|
141
+ | *(default)* | Optional `sonic-legend`, then the grouped fields |
142
+
143
+ ### `sonic-legend`
144
+
145
+ | Attribute | Values | Description |
146
+ |----------|---------|-------------|
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 |
153
+
154
+ | Slot | Description |
155
+ |------|-------------|
156
+ | *(default)* | Custom title and `sonic-legend-description` |
157
+ | `suffix` | Trailing actions (menus, icon buttons) |
158
+
159
+ ### `sonic-legend-description`
160
+
161
+ No attributes. The default slot holds the muted line under the legend title.
package/docs/core/components/ui/form/form-actions/form-actions.html ADDED
@@ -0,0 +1,122 @@
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">
3
+ <head>
4
+ <meta charset="UTF-8">
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">
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">
12
+ </head>
13
+ <body>
14
+ <header>
15
+ <p><a href="/docs/index.html">Concorde documentation</a> · <a href="https://concorde.supersoniks.org/core/components/ui/form/form-actions">same URL (interactive)</a> · <a href="/llms.txt">llms.txt</a></p>
16
+ </header>
17
+ <main>
18
+ <article>
19
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — 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>
20
+ <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>
22
+ <h2 id="basic-example">Basic example</h2>
23
+ <p>With no attributes, actions align to the start of the row.</p>
24
+ <pre><code>&lt;form&gt;
25
+ &lt;sonic-form-layout&gt;
26
+ &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
27
+ &lt;sonic-input label=&quot;Last name&quot;&gt;&lt;/sonic-input&gt;
28
+ &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;
30
+ &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
+ &lt;/sonic-form-actions&gt;
32
+ &lt;/sonic-form-layout&gt;
33
+ &lt;/form&gt;
34
+ </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>
37
+ <pre><code>&lt;form&gt;
38
+ &lt;sonic-form-layout&gt;
39
+ &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
40
+ &lt;sonic-input label=&quot;Last name&quot;&gt;&lt;/sonic-input&gt;
41
+ &lt;sonic-form-actions justify=&quot;flex-end&quot;&gt;
42
+ &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;
43
+ &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;
44
+ &lt;/sonic-form-actions&gt;
45
+ &lt;/sonic-form-layout&gt;
46
+ &lt;/form&gt;
47
+ </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>
50
+ <pre><code>&lt;form&gt;
51
+ &lt;sonic-form-layout&gt;
52
+ &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
53
+ &lt;sonic-input label=&quot;Last name&quot;&gt;&lt;/sonic-input&gt;
54
+ &lt;sonic-form-actions direction=&quot;row-reverse&quot;&gt;
55
+ &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;
56
+ &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;
57
+ &lt;/sonic-form-actions&gt;
58
+ &lt;/sonic-form-layout&gt;
59
+ &lt;/form&gt;
60
+ </code></pre>
61
+ <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>
63
+ <pre><code>&lt;form&gt;
64
+ &lt;sonic-form-layout&gt;
65
+ &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
66
+ &lt;sonic-input label=&quot;Last name&quot;&gt;&lt;/sonic-input&gt;
67
+ &lt;sonic-form-actions justify=&quot;center&quot;&gt;
68
+ &lt;sonic-button type=&quot;info&quot; minWidth=&quot;12rem&quot;&gt;
69
+ &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
71
+ &lt;/sonic-button&gt;
72
+ &lt;sonic-divider vertical&gt;&lt;/sonic-divider&gt;
73
+ &lt;sonic-button type=&quot;info&quot; minWidth=&quot;12rem&quot;&gt;
74
+ &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
76
+ &lt;/sonic-button&gt;
77
+ &lt;/sonic-form-actions&gt;
78
+ &lt;/sonic-form-layout&gt;
79
+ &lt;/form&gt;
80
+ </code></pre>
81
+ <h2 id="api-reference">API reference</h2>
82
+ <table>
83
+ <thead>
84
+ <tr>
85
+ <th>Attribute</th>
86
+ <th>Values</th>
87
+ <th>Description</th>
88
+ </tr>
89
+ </thead>
90
+ <tbody><tr>
91
+ <td><code>direction</code></td>
92
+ <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>
94
+ </tr>
95
+ <tr>
96
+ <td><code>justify</code></td>
97
+ <td>CSS <code>justify-content</code> value (default <code>flex-start</code>)</td>
98
+ <td>Distribution along the main axis</td>
99
+ </tr>
100
+ <tr>
101
+ <td><code>alignItems</code></td>
102
+ <td>CSS <code>align-items</code> value (default <code>center</code>)</td>
103
+ <td>Cross-axis alignment</td>
104
+ </tr>
105
+ </tbody></table>
106
+ <table>
107
+ <thead>
108
+ <tr>
109
+ <th>Slot</th>
110
+ <th>Description</th>
111
+ </tr>
112
+ </thead>
113
+ <tbody><tr>
114
+ <td><em>(default)</em></td>
115
+ <td>Footer controls</td>
116
+ </tr>
117
+ </tbody></table>
118
+
119
+ </article>
120
+ </main>
121
+ </body>
122
+ </html>
package/docs/core/components/ui/form/form-actions/form-actions.md ADDED
@@ -0,0 +1,98 @@
1
+ # Form actions
2
+
3
+ **`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. Use `justify` and `direction` to arrange the controls.
4
+
5
+ ## Basic example
6
+
7
+ With no attributes, actions align to the start of the row.
8
+
9
+ <sonic-code>
10
+ <template>
11
+ <form>
12
+ <sonic-form-layout>
13
+ <sonic-input label="First name"></sonic-input>
14
+ <sonic-input label="Last name"></sonic-input>
15
+ <sonic-form-actions>
16
+ <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Check in</sonic-button>
17
+ <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
18
+ </sonic-form-actions>
19
+ </sonic-form-layout>
20
+ </form>
21
+ </template>
22
+ </sonic-code>
23
+
24
+ ## Justify
25
+
26
+ `justify` is the CSS `justify-content` of the row (default `flex-start`). Use `flex-end` for dialog-style footers or `center` for toolbars.
27
+
28
+ <sonic-code>
29
+ <template>
30
+ <form>
31
+ <sonic-form-layout>
32
+ <sonic-input label="First name"></sonic-input>
33
+ <sonic-input label="Last name"></sonic-input>
34
+ <sonic-form-actions justify="flex-end">
35
+ <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
36
+ <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
37
+ </sonic-form-actions>
38
+ </sonic-form-layout>
39
+ </form>
40
+ </template>
41
+ </sonic-code>
42
+
43
+ ## Direction
44
+
45
+ `direction` is the CSS `flex-direction` (default `row`). `row-reverse` swaps the visual order but keeps the DOM and focus order.
46
+
47
+ <sonic-code>
48
+ <template>
49
+ <form>
50
+ <sonic-form-layout>
51
+ <sonic-input label="First name"></sonic-input>
52
+ <sonic-input label="Last name"></sonic-input>
53
+ <sonic-form-actions direction="row-reverse">
54
+ <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
55
+ <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
56
+ </sonic-form-actions>
57
+ </sonic-form-layout>
58
+ </form>
59
+ </template>
60
+ </sonic-code>
61
+
62
+ ## Mixed controls
63
+
64
+ Any content can be slotted, such as a vertical `sonic-divider`. The default `alignItems` (`center`) keeps items of different heights aligned.
65
+
66
+ <sonic-code>
67
+ <template>
68
+ <form>
69
+ <sonic-form-layout>
70
+ <sonic-input label="First name"></sonic-input>
71
+ <sonic-input label="Last name"></sonic-input>
72
+ <sonic-form-actions justify="center">
73
+ <sonic-button type="info" minWidth="12rem">
74
+ <sonic-icon name="nav-arrow-left" library="iconoir" slot="prefix"></sonic-icon>
75
+ Previous step
76
+ </sonic-button>
77
+ <sonic-divider vertical></sonic-divider>
78
+ <sonic-button type="info" minWidth="12rem">
79
+ <sonic-icon name="nav-arrow-right" library="iconoir" slot="suffix"></sonic-icon>
80
+ Next step
81
+ </sonic-button>
82
+ </sonic-form-actions>
83
+ </sonic-form-layout>
84
+ </form>
85
+ </template>
86
+ </sonic-code>
87
+
88
+ ## API reference
89
+
90
+ | Attribute | Values | Description |
91
+ |----------|---------|-------------|
92
+ | `direction` | `row` (default) · `column` · `row-reverse` · `column-reverse` | CSS `flex-direction` of the row |
93
+ | `justify` | CSS `justify-content` value (default `flex-start`) | Distribution along the main axis |
94
+ | `alignItems` | CSS `align-items` value (default `center`) | Cross-axis alignment |
95
+
96
+ | Slot | Description |
97
+ |------|-------------|
98
+ | *(default)* | Footer controls |