@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/form-layout/form-layout.html ADDED
@@ -0,0 +1,115 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/form/form-layout" 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 by Supersoniks</title>
7
+ <meta name="description" content="sonic-form-layout arranges slotted form controls in a responsive grid. Short fields (sonic-input · sonic-select) sit two per row when the host is wider than 440px; every other child spans the full wid">
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, 440px, sonic-fieldset">
9
+ <meta name="concorde-doc-id" content="core/components/ui/form/form-layout/form-layout">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/form/form-layout">
11
+ <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/form/form-layout.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-layout">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 layout</strong>. sonic-form-layout arranges slotted form controls in a responsive grid. Short fields (sonic-input · sonic-select) sit two per row when the host is wider than 440px; every other child spans the full wid <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, 440px, sonic-fieldset. URL: <a href="https://concorde.supersoniks.org/core/components/ui/form/form-layout">https://concorde.supersoniks.org/core/components/ui/form/form-layout</a>.</span></p>
20
+ <h1 id="form-layout">Form layout</h1>
21
+ <p><strong><code>sonic-form-layout</code></strong> arranges slotted form controls in a responsive grid. Short fields (<code>sonic-input</code> · <code>sonic-select</code>) sit two per row when the host is wider than <code>440px</code>; every other child spans the full width. It has no attributes: wrap the body of a <code>form</code> or <code>sonic-fieldset</code> with it.</p>
22
+ <h2 id="basic-example">Basic example</h2>
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;Special assistance&quot; rows=&quot;5&quot;&gt;&lt;/sonic-textarea&gt;
51
+ &lt;sonic-switch&gt;Add priority boarding&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;Confirm passenger&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>The column count depends on the host width, not the viewport: two columns above <code>440px</code>, one below. When the layout holds exactly one short field, it stays single-column so the field does not sit in half an empty row.</p>
65
+ <pre><code>&lt;div class=&quot;grid gap-8&quot;&gt;
66
+ &lt;sonic-form-layout style=&quot;max-width: 20rem&quot;&gt;
67
+ &lt;sonic-divider align=&quot;left&quot;&gt;Narrow host&lt;/sonic-divider&gt;
68
+ &lt;sonic-input label=&quot;Email&quot; name=&quot;email_narrow&quot; type=&quot;email&quot;&gt;&lt;/sonic-input&gt;
69
+ &lt;sonic-input label=&quot;Confirm email&quot; name=&quot;email_confirm_narrow&quot; type=&quot;email&quot;&gt;&lt;/sonic-input&gt;
70
+ &lt;/sonic-form-layout&gt;
71
+ &lt;sonic-form-layout&gt;
72
+ &lt;sonic-divider align=&quot;left&quot;&gt;Wide host&lt;/sonic-divider&gt;
73
+ &lt;sonic-input label=&quot;Email&quot; name=&quot;email_wide&quot; type=&quot;email&quot;&gt;&lt;/sonic-input&gt;
74
+ &lt;sonic-input label=&quot;Confirm email&quot; name=&quot;email_confirm_wide&quot; type=&quot;email&quot;&gt;&lt;/sonic-input&gt;
75
+ &lt;/sonic-form-layout&gt;
76
+ &lt;/div&gt;
77
+ </code></pre>
78
+ <h2 id="full-width-children">Full-width children</h2>
79
+ <p>Any child that is not a short field spans the full row: <code>sonic-textarea</code> · <code>sonic-checkbox</code> · <code>sonic-switch</code> · <code>sonic-divider</code> · <code>sonic-form-actions</code> and plain elements. Slotted dividers lose their vertical margin to match the grid gap, and <code>sonic-submit</code> uses <code>display: contents</code> so its button joins the grid directly.</p>
80
+ <pre><code>&lt;sonic-form-layout&gt;
81
+ &lt;sonic-input label=&quot;Subject&quot; name=&quot;subject&quot;&gt;&lt;/sonic-input&gt;
82
+ &lt;sonic-textarea label=&quot;Details&quot; rows=&quot;4&quot;&gt;&lt;/sonic-textarea&gt;
83
+ &lt;sonic-form-actions&gt;
84
+ &lt;sonic-button type=&quot;primary&quot;&gt;Send&lt;/sonic-button&gt;
85
+ &lt;/sonic-form-actions&gt;
86
+ &lt;/sonic-form-layout&gt;
87
+ </code></pre>
88
+ <h2 id="custom-column-wrapper">Custom column wrapper</h2>
89
+ <p>Add the class <code>form-item-container</code> to a wrapper element to keep it in the two-column flow like a short field.</p>
90
+ <pre><code>&lt;sonic-form-layout&gt;
91
+ &lt;sonic-input label=&quot;From&quot; name=&quot;from&quot; placeholder=&quot;CDG&quot;&gt;&lt;/sonic-input&gt;
92
+ &lt;div class=&quot;form-item-container&quot;&gt;
93
+ &lt;sonic-input label=&quot;To&quot; name=&quot;to&quot; placeholder=&quot;JFK&quot;&gt;&lt;/sonic-input&gt;
94
+ &lt;/div&gt;
95
+ &lt;/sonic-form-layout&gt;
96
+ </code></pre>
97
+ <h2 id="api-reference">API reference</h2>
98
+ <p>No attributes.</p>
99
+ <table>
100
+ <thead>
101
+ <tr>
102
+ <th>Slot</th>
103
+ <th>Description</th>
104
+ </tr>
105
+ </thead>
106
+ <tbody><tr>
107
+ <td><em>(default)</em></td>
108
+ <td>Fields and blocks in visual order; short fields and <code>form-item-container</code> share rows, everything else spans the full width</td>
109
+ </tr>
110
+ </tbody></table>
111
+
112
+ </article>
113
+ </main>
114
+ </body>
115
+ </html>
package/docs/core/components/ui/form/form-layout/form-layout.md ADDED
@@ -0,0 +1,109 @@
1
+ # Form layout
2
+
3
+ **`sonic-form-layout`** arranges slotted form controls in a responsive grid. Short fields (`sonic-input` · `sonic-select`) sit two per row when the host is wider than `440px`; every other child spans the full width. It has no attributes: wrap the body of a `form` or `sonic-fieldset` with it.
4
+
5
+ ## Basic example
6
+
7
+ <sonic-code>
8
+ <template>
9
+ <form>
10
+ <sonic-form-layout>
11
+ <sonic-input autocomplete="family-name" label="Last name" name="last_name"></sonic-input>
12
+ <sonic-input autocomplete="given-name" label="First name" name="first_name"></sonic-input>
13
+ <sonic-select autocomplete="sex" label="Gender" name="gender">
14
+ <option value="" selected="selected">— Select —</option>
15
+ <option value="prefer-not">Prefer not to say</option>
16
+ <option value="male">Male</option>
17
+ <option value="female">Female</option>
18
+ </sonic-select>
19
+ <sonic-input autocomplete="bday" label="Date of birth" name="birth_date" type="date"></sonic-input>
20
+ <sonic-divider></sonic-divider>
21
+ <sonic-input autocomplete="email" label="Email" name="email" type="email"></sonic-input>
22
+ <sonic-input
23
+ autocomplete="email"
24
+ label="Confirm email"
25
+ name="email_confirmation"
26
+ type="email"
27
+ ></sonic-input>
28
+ <sonic-input autocomplete="new-password" label="Password" name="password" type="password"></sonic-input>
29
+ <sonic-input
30
+ autocomplete="new-password"
31
+ label="Confirm password"
32
+ name="password_confirmation"
33
+ type="password"
34
+ ></sonic-input>
35
+ <sonic-divider></sonic-divider>
36
+ <sonic-textarea label="Special assistance" rows="5"></sonic-textarea>
37
+ <sonic-switch>Add priority boarding</sonic-switch>
38
+ <sonic-checkbox>Subscribe to newsletter</sonic-checkbox>
39
+ <sonic-checkbox>
40
+ I accept the
41
+ <sonic-link href="#" class="underline">terms and conditions</sonic-link>
42
+ </sonic-checkbox>
43
+ <sonic-form-actions>
44
+ <sonic-button type="success">Confirm passenger</sonic-button>
45
+ </sonic-form-actions>
46
+ </sonic-form-layout>
47
+ </form>
48
+ </template>
49
+ </sonic-code>
50
+
51
+ ## Responsive columns
52
+
53
+ The column count depends on the host width, not the viewport: two columns above `440px`, one below. When the layout holds exactly one short field, it stays single-column so the field does not sit in half an empty row.
54
+
55
+ <sonic-code>
56
+ <template>
57
+ <div class="grid gap-8">
58
+ <sonic-form-layout style="max-width: 20rem">
59
+ <sonic-divider align="left">Narrow host</sonic-divider>
60
+ <sonic-input label="Email" name="email_narrow" type="email"></sonic-input>
61
+ <sonic-input label="Confirm email" name="email_confirm_narrow" type="email"></sonic-input>
62
+ </sonic-form-layout>
63
+ <sonic-form-layout>
64
+ <sonic-divider align="left">Wide host</sonic-divider>
65
+ <sonic-input label="Email" name="email_wide" type="email"></sonic-input>
66
+ <sonic-input label="Confirm email" name="email_confirm_wide" type="email"></sonic-input>
67
+ </sonic-form-layout>
68
+ </div>
69
+ </template>
70
+ </sonic-code>
71
+
72
+ ## Full-width children
73
+
74
+ Any child that is not a short field spans the full row: `sonic-textarea` · `sonic-checkbox` · `sonic-switch` · `sonic-divider` · `sonic-form-actions` and plain elements. Slotted dividers lose their vertical margin to match the grid gap, and `sonic-submit` uses `display: contents` so its button joins the grid directly.
75
+
76
+ <sonic-code>
77
+ <template>
78
+ <sonic-form-layout>
79
+ <sonic-input label="Subject" name="subject"></sonic-input>
80
+ <sonic-textarea label="Details" rows="4"></sonic-textarea>
81
+ <sonic-form-actions>
82
+ <sonic-button type="primary">Send</sonic-button>
83
+ </sonic-form-actions>
84
+ </sonic-form-layout>
85
+ </template>
86
+ </sonic-code>
87
+
88
+ ## Custom column wrapper
89
+
90
+ Add the class `form-item-container` to a wrapper element to keep it in the two-column flow like a short field.
91
+
92
+ <sonic-code>
93
+ <template>
94
+ <sonic-form-layout>
95
+ <sonic-input label="From" name="from" placeholder="CDG"></sonic-input>
96
+ <div class="form-item-container">
97
+ <sonic-input label="To" name="to" placeholder="JFK"></sonic-input>
98
+ </div>
99
+ </sonic-form-layout>
100
+ </template>
101
+ </sonic-code>
102
+
103
+ ## API reference
104
+
105
+ No attributes.
106
+
107
+ | Slot | Description |
108
+ |------|-------------|
109
+ | *(default)* | Fields and blocks in visual order; short fields and `form-item-container` share rows, everything else spans the full width |
package/docs/core/components/ui/form/input/input.html ADDED
@@ -0,0 +1,235 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/form/input" data-doc-id="core/components/ui/form/input/input">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Input — Concorde by Supersoniks</title>
7
+ <meta name="description" content="sonic-input wraps a native &lt;input&gt; with a label, a description, prefix and suffix slots and Concorde sizes. Native attributes (type, placeholder, pattern, min, max, …) are passed through. Bind the val">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/input/input, input, Input, UI component, form, sonic-input, web component, , type, placeholder, pattern, min, max, formDataProvider, name">
9
+ <meta name="concorde-doc-id" content="core/components/ui/form/input/input">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/form/input">
11
+ <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/form/input.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/input">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 — Input</strong>. sonic-input wraps a native &lt;input&gt; with a label, a description, prefix and suffix slots and Concorde sizes. Native attributes (type, placeholder, pattern, min, max, …) are passed through. Bind the val <span>Doc ID: <code>core/components/ui/form/input/input</code>. Keywords: Concorde, supersoniks, core/components/ui/form/input/input, input, Input, UI component, form, sonic-input, web component, , type, placeholder, pattern, min, max, formDataProvider, name. URL: <a href="https://concorde.supersoniks.org/core/components/ui/form/input">https://concorde.supersoniks.org/core/components/ui/form/input</a>.</span></p>
20
+ <h1 id="input">Input</h1>
21
+ <p><strong><code>sonic-input</code></strong> wraps a native <code>&lt;input&gt;</code> with a label, a description, prefix and suffix slots and Concorde sizes. Native attributes (<code>type</code>, <code>placeholder</code>, <code>pattern</code>, <code>min</code>, <code>max</code>, …) are passed through. Bind the value to a store with <strong><code>formDataProvider</code></strong> and <strong><code>name</code></strong>, set on the field or on an ancestor.</p>
22
+ <h2 id="basic-example">Basic example</h2>
23
+ <pre><code>&lt;sonic-input label=&quot;Name&quot; placeholder=&quot;Ada Lindqvist&quot; description=&quot;As it appears on your passport.&quot;&gt;&lt;/sonic-input&gt;
24
+ </code></pre>
25
+ <h2 id="type">Type</h2>
26
+ <p>With no <code>type</code>, the input is <code>text</code>. Text-like types (<code>email</code>, <code>password</code>, <code>date</code>, <code>number</code>, <code>color</code>, <code>search</code>, …) are supported; <code>radio</code>, <code>checkbox</code> and <code>range</code> have dedicated components. <code>password</code> adds a visibility toggle.</p>
27
+ <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
28
+ &lt;sonic-input type=&quot;text&quot; label=&quot;Text&quot;&gt;&lt;/sonic-input&gt;
29
+ &lt;sonic-input type=&quot;email&quot; label=&quot;Email&quot; placeholder=&quot;ada@example.com&quot;&gt;&lt;/sonic-input&gt;
30
+ &lt;sonic-input type=&quot;password&quot; label=&quot;Password&quot;&gt;&lt;/sonic-input&gt;
31
+ &lt;sonic-input type=&quot;date&quot; label=&quot;Date&quot;&gt;&lt;/sonic-input&gt;
32
+ &lt;sonic-input type=&quot;number&quot; label=&quot;Number&quot;&gt;&lt;/sonic-input&gt;
33
+ &lt;sonic-input type=&quot;color&quot; label=&quot;Color&quot; value=&quot;#ffcc00&quot;&gt;&lt;/sonic-input&gt;
34
+ &lt;/div&gt;
35
+ </code></pre>
36
+ <h2 id="size-and-status">Size and status</h2>
37
+ <p>With no <code>size</code>, the input uses the base scale. <code>status</code> colors the field; it defaults to <code>default</code>.</p>
38
+ <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
39
+ &lt;sonic-input size=&quot;2xs&quot; value=&quot;2xs&quot;&gt;&lt;/sonic-input&gt;
40
+ &lt;sonic-input size=&quot;xs&quot; value=&quot;xs&quot;&gt;&lt;/sonic-input&gt;
41
+ &lt;sonic-input size=&quot;sm&quot; value=&quot;sm&quot;&gt;&lt;/sonic-input&gt;
42
+ &lt;sonic-input value=&quot;default&quot;&gt;&lt;/sonic-input&gt;
43
+ &lt;sonic-input size=&quot;lg&quot; value=&quot;lg&quot;&gt;&lt;/sonic-input&gt;
44
+ &lt;sonic-input size=&quot;xl&quot; value=&quot;xl&quot;&gt;&lt;/sonic-input&gt;
45
+ &lt;sonic-input size=&quot;2xl&quot; value=&quot;2xl&quot;&gt;&lt;/sonic-input&gt;
46
+ &lt;sonic-input status=&quot;success&quot; value=&quot;success&quot;&gt;&lt;/sonic-input&gt;
47
+ &lt;sonic-input status=&quot;error&quot; value=&quot;error&quot;&gt;&lt;/sonic-input&gt;
48
+ &lt;sonic-input status=&quot;warning&quot; value=&quot;warning&quot;&gt;&lt;/sonic-input&gt;
49
+ &lt;sonic-input status=&quot;info&quot; value=&quot;info&quot;&gt;&lt;/sonic-input&gt;
50
+ &lt;/div&gt;
51
+ </code></pre>
52
+ <h2 id="validation">Validation</h2>
53
+ <p><code>required</code>, <code>pattern</code>, <code>minlength</code> and the native type rules are checked by the browser. Feedback styles apply once the field is <code>touched</code> (after blur).</p>
54
+ <pre><code>&lt;sonic-input required type=&quot;email&quot; label=&quot;Email&quot; placeholder=&quot;ada@example.com&quot;&gt;&lt;/sonic-input&gt;
55
+ </code></pre>
56
+ <h2 id="prefix-and-suffix">Prefix and suffix</h2>
57
+ <p>Slotted content sits outside the field by default. Set <code>inlineContent</code> to draw it inside; clicking it then focuses the input unless <code>disableInlineContentFocus</code> is set.</p>
58
+ <pre><code>&lt;div class=&quot;grid grid-cols-2 gap-3&quot;&gt;
59
+ &lt;sonic-input type=&quot;search&quot; label=&quot;Search&quot; placeholder=&quot;Search flights&quot;&gt;
60
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;search&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
61
+ &lt;/sonic-input&gt;
62
+ &lt;sonic-input inlineContent type=&quot;number&quot; label=&quot;Checked bags&quot; placeholder=&quot;0&quot;&gt;
63
+ &lt;sonic-badge slot=&quot;suffix&quot; type=&quot;danger&quot; size=&quot;sm&quot;&gt;4 max&lt;/sonic-badge&gt;
64
+ &lt;/sonic-input&gt;
65
+ &lt;/div&gt;
66
+ </code></pre>
67
+ <h2 id="form-data">Form data</h2>
68
+ <p>Fields sharing the same <code>formDataProvider</code> and <code>name</code> stay in sync. The attribute is looked up on ancestors, so set it once on a wrapper.</p>
69
+ <pre><code>&lt;div formDataProvider=&quot;inputDemoForm&quot; class=&quot;grid grid-cols-2 gap-3&quot;&gt;
70
+ &lt;sonic-input name=&quot;city&quot; label=&quot;City&quot; value=&quot;Lisbon&quot;&gt;&lt;/sonic-input&gt;
71
+ &lt;sonic-input name=&quot;city&quot; label=&quot;Same field&quot;&gt;&lt;/sonic-input&gt;
72
+ &lt;/div&gt;
73
+ </code></pre>
74
+ <p><code>sameValueAs</code> sets <code>pattern</code> to the value of another field in the same store, for confirmation fields.</p>
75
+ <pre><code>&lt;div formDataProvider=&quot;inputDemoPassword&quot; class=&quot;grid grid-cols-2 gap-3&quot;&gt;
76
+ &lt;sonic-input type=&quot;password&quot; name=&quot;password&quot; label=&quot;Password&quot;&gt;&lt;/sonic-input&gt;
77
+ &lt;sonic-input type=&quot;password&quot; name=&quot;confirm&quot; sameValueAs=&quot;password&quot; label=&quot;Confirm password&quot;&gt;&lt;/sonic-input&gt;
78
+ &lt;/div&gt;
79
+ </code></pre>
80
+ <h2 id="filtering-a-list">Filtering a list</h2>
81
+ <p>The input writes <code>q</code> to the store used as <code>dataFilterProvider</code> by a <code>sonic-queue</code>; <code>inputDelayMs</code> debounces the requests while typing. Search a city, an airport or a flight number.</p>
82
+ <p><docs-lit-demo for="docs-flight-search-demo"></docs-lit-demo></p>
83
+ <h2 id="api-reference">API reference</h2>
84
+ <table>
85
+ <thead>
86
+ <tr>
87
+ <th>Attribute</th>
88
+ <th>Values</th>
89
+ <th>Description</th>
90
+ </tr>
91
+ </thead>
92
+ <tbody><tr>
93
+ <td><code>type</code></td>
94
+ <td><code>text</code> · <code>email</code> · <code>password</code> · <code>number</code> · <code>date</code> · <code>search</code> · <code>color</code> · … (default <code>text</code>)</td>
95
+ <td>Native input type</td>
96
+ </tr>
97
+ <tr>
98
+ <td><code>size</code></td>
99
+ <td><code>2xs</code> … <code>2xl</code> (default: base scale)</td>
100
+ <td>Typography and padding</td>
101
+ </tr>
102
+ <tr>
103
+ <td><code>status</code></td>
104
+ <td><code>default</code> · <code>success</code> · <code>error</code> · <code>warning</code> · <code>info</code></td>
105
+ <td>Field color</td>
106
+ </tr>
107
+ <tr>
108
+ <td><code>label</code></td>
109
+ <td>string (HTML)</td>
110
+ <td>Label; or use the <code>label</code> slot</td>
111
+ </tr>
112
+ <tr>
113
+ <td><code>description</code></td>
114
+ <td>string (HTML)</td>
115
+ <td>Help text under the field; or use the <code>description</code> slot</td>
116
+ </tr>
117
+ <tr>
118
+ <td><code>name</code></td>
119
+ <td>string</td>
120
+ <td>Key in the form store (dot notation allowed)</td>
121
+ </tr>
122
+ <tr>
123
+ <td><code>value</code></td>
124
+ <td>string</td>
125
+ <td>Initial value</td>
126
+ </tr>
127
+ <tr>
128
+ <td><code>formDataProvider</code></td>
129
+ <td>string</td>
130
+ <td>Store id; inherited from the closest ancestor</td>
131
+ </tr>
132
+ <tr>
133
+ <td><code>placeholder</code></td>
134
+ <td>string</td>
135
+ <td>Native placeholder</td>
136
+ </tr>
137
+ <tr>
138
+ <td><code>required</code> · <code>disabled</code> · <code>readonly</code> · <code>autofocus</code></td>
139
+ <td>boolean</td>
140
+ <td>Native flags</td>
141
+ </tr>
142
+ <tr>
143
+ <td><code>pattern</code> · <code>min</code> · <code>max</code> · <code>step</code> · <code>minlength</code> · <code>maxlength</code></td>
144
+ <td>native</td>
145
+ <td>Native constraints</td>
146
+ </tr>
147
+ <tr>
148
+ <td><code>inputmode</code> · <code>autocomplete</code> · <code>list</code> · <code>src</code> · <code>tabindex</code></td>
149
+ <td>native</td>
150
+ <td>Passed to the inner <code>&lt;input&gt;</code></td>
151
+ </tr>
152
+ <tr>
153
+ <td><code>data-aria-label</code> · <code>data-aria-labelledby</code></td>
154
+ <td>string</td>
155
+ <td>Forwarded as <code>aria-label</code> and <code>aria-labelledby</code></td>
156
+ </tr>
157
+ <tr>
158
+ <td><code>inlineContent</code></td>
159
+ <td>boolean</td>
160
+ <td>Renders prefix and suffix inside the field (forced for <code>password</code>)</td>
161
+ </tr>
162
+ <tr>
163
+ <td><code>disableInlineContentFocus</code></td>
164
+ <td>boolean</td>
165
+ <td>Clicking inline content does not focus the input</td>
166
+ </tr>
167
+ <tr>
168
+ <td><code>showPasswordToggle</code></td>
169
+ <td>boolean</td>
170
+ <td>Visibility toggle (forced for <code>password</code>)</td>
171
+ </tr>
172
+ <tr>
173
+ <td><code>sameValueAs</code></td>
174
+ <td>string</td>
175
+ <td>Name of a field whose value becomes this field&#39;s <code>pattern</code></td>
176
+ </tr>
177
+ <tr>
178
+ <td><code>inputDelayMs</code></td>
179
+ <td>number</td>
180
+ <td>Debounces value updates while typing</td>
181
+ </tr>
182
+ <tr>
183
+ <td><code>autoActive</code></td>
184
+ <td>boolean</td>
185
+ <td>Sets <code>active</code> whenever the value is not empty</td>
186
+ </tr>
187
+ <tr>
188
+ <td><code>active</code></td>
189
+ <td>boolean</td>
190
+ <td>Reflected state for styling</td>
191
+ </tr>
192
+ <tr>
193
+ <td><code>unsetOnDisconnect</code></td>
194
+ <td>boolean</td>
195
+ <td>Clears the store value when the element is removed</td>
196
+ </tr>
197
+ <tr>
198
+ <td><code>forceAutoFill</code></td>
199
+ <td>boolean</td>
200
+ <td>Lets properties override <code>type</code> / <code>label</code> / <code>description</code> / <code>name</code> attributes</td>
201
+ </tr>
202
+ </tbody></table>
203
+ <table>
204
+ <thead>
205
+ <tr>
206
+ <th>Slot</th>
207
+ <th>Description</th>
208
+ </tr>
209
+ </thead>
210
+ <tbody><tr>
211
+ <td><code>label</code></td>
212
+ <td>Rich label content</td>
213
+ </tr>
214
+ <tr>
215
+ <td><code>description</code></td>
216
+ <td>Rich help text</td>
217
+ </tr>
218
+ <tr>
219
+ <td><code>prefix</code></td>
220
+ <td>Content before the input</td>
221
+ </tr>
222
+ <tr>
223
+ <td><code>suffix</code></td>
224
+ <td>Content after the input</td>
225
+ </tr>
226
+ <tr>
227
+ <td><code>list</code></td>
228
+ <td>Extra content after the description</td>
229
+ </tr>
230
+ </tbody></table>
231
+
232
+ </article>
233
+ </main>
234
+ </body>
235
+ </html>
package/docs/core/components/ui/form/input/input.md ADDED
@@ -0,0 +1,142 @@
1
+ # Input
2
+
3
+ **`sonic-input`** wraps a native `<input>` with a label, a description, prefix and suffix slots and Concorde sizes. Native attributes (`type`, `placeholder`, `pattern`, `min`, `max`, …) are passed through. Bind the value to a store with **`formDataProvider`** and **`name`**, set on the field or on an ancestor.
4
+
5
+ ## Basic example
6
+
7
+ <sonic-code>
8
+ <template>
9
+ <sonic-input label="Name" placeholder="Ada Lindqvist" description="As it appears on your passport."></sonic-input>
10
+ </template>
11
+ </sonic-code>
12
+
13
+ ## Type
14
+
15
+ With no `type`, the input is `text`. Text-like types (`email`, `password`, `date`, `number`, `color`, `search`, …) are supported; `radio`, `checkbox` and `range` have dedicated components. `password` adds a visibility toggle.
16
+
17
+ <sonic-code>
18
+ <template>
19
+ <div class="grid gap-3">
20
+ <sonic-input type="text" label="Text"></sonic-input>
21
+ <sonic-input type="email" label="Email" placeholder="ada@example.com"></sonic-input>
22
+ <sonic-input type="password" label="Password"></sonic-input>
23
+ <sonic-input type="date" label="Date"></sonic-input>
24
+ <sonic-input type="number" label="Number"></sonic-input>
25
+ <sonic-input type="color" label="Color" value="#ffcc00"></sonic-input>
26
+ </div>
27
+ </template>
28
+ </sonic-code>
29
+
30
+ ## Size and status
31
+
32
+ With no `size`, the input uses the base scale. `status` colors the field; it defaults to `default`.
33
+
34
+ <sonic-code>
35
+ <template>
36
+ <div class="grid gap-3">
37
+ <sonic-input size="2xs" value="2xs"></sonic-input>
38
+ <sonic-input size="xs" value="xs"></sonic-input>
39
+ <sonic-input size="sm" value="sm"></sonic-input>
40
+ <sonic-input value="default"></sonic-input>
41
+ <sonic-input size="lg" value="lg"></sonic-input>
42
+ <sonic-input size="xl" value="xl"></sonic-input>
43
+ <sonic-input size="2xl" value="2xl"></sonic-input>
44
+ <sonic-input status="success" value="success"></sonic-input>
45
+ <sonic-input status="error" value="error"></sonic-input>
46
+ <sonic-input status="warning" value="warning"></sonic-input>
47
+ <sonic-input status="info" value="info"></sonic-input>
48
+ </div>
49
+ </template>
50
+ </sonic-code>
51
+
52
+ ## Validation
53
+
54
+ `required`, `pattern`, `minlength` and the native type rules are checked by the browser. Feedback styles apply once the field is `touched` (after blur).
55
+
56
+ <sonic-code>
57
+ <template>
58
+ <sonic-input required type="email" label="Email" placeholder="ada@example.com"></sonic-input>
59
+ </template>
60
+ </sonic-code>
61
+
62
+ ## Prefix and suffix
63
+
64
+ Slotted content sits outside the field by default. Set `inlineContent` to draw it inside; clicking it then focuses the input unless `disableInlineContentFocus` is set.
65
+
66
+ <sonic-code>
67
+ <template>
68
+ <div class="grid grid-cols-2 gap-3">
69
+ <sonic-input type="search" label="Search" placeholder="Search flights">
70
+ <sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
71
+ </sonic-input>
72
+ <sonic-input inlineContent type="number" label="Checked bags" placeholder="0">
73
+ <sonic-badge slot="suffix" type="danger" size="sm">4 max</sonic-badge>
74
+ </sonic-input>
75
+ </div>
76
+ </template>
77
+ </sonic-code>
78
+
79
+ ## Form data
80
+
81
+ Fields sharing the same `formDataProvider` and `name` stay in sync. The attribute is looked up on ancestors, so set it once on a wrapper.
82
+
83
+ <sonic-code>
84
+ <template>
85
+ <div formDataProvider="inputDemoForm" class="grid grid-cols-2 gap-3">
86
+ <sonic-input name="city" label="City" value="Lisbon"></sonic-input>
87
+ <sonic-input name="city" label="Same field"></sonic-input>
88
+ </div>
89
+ </template>
90
+ </sonic-code>
91
+
92
+ `sameValueAs` sets `pattern` to the value of another field in the same store, for confirmation fields.
93
+
94
+ <sonic-code>
95
+ <template>
96
+ <div formDataProvider="inputDemoPassword" class="grid grid-cols-2 gap-3">
97
+ <sonic-input type="password" name="password" label="Password"></sonic-input>
98
+ <sonic-input type="password" name="confirm" sameValueAs="password" label="Confirm password"></sonic-input>
99
+ </div>
100
+ </template>
101
+ </sonic-code>
102
+
103
+ ## Filtering a list
104
+
105
+ The input writes `q` to the store used as `dataFilterProvider` by a `sonic-queue`; `inputDelayMs` debounces the requests while typing. Search a city, an airport or a flight number.
106
+
107
+ <docs-lit-demo for="docs-flight-search-demo"></docs-lit-demo>
108
+
109
+ ## API reference
110
+
111
+ | Attribute | Values | Description |
112
+ |----------|---------|-------------|
113
+ | `type` | `text` · `email` · `password` · `number` · `date` · `search` · `color` · … (default `text`) | Native input type |
114
+ | `size` | `2xs` … `2xl` (default: base scale) | Typography and padding |
115
+ | `status` | `default` · `success` · `error` · `warning` · `info` | Field color |
116
+ | `label` | string (HTML) | Label; or use the `label` slot |
117
+ | `description` | string (HTML) | Help text under the field; or use the `description` slot |
118
+ | `name` | string | Key in the form store (dot notation allowed) |
119
+ | `value` | string | Initial value |
120
+ | `formDataProvider` | string | Store id; inherited from the closest ancestor |
121
+ | `placeholder` | string | Native placeholder |
122
+ | `required` · `disabled` · `readonly` · `autofocus` | boolean | Native flags |
123
+ | `pattern` · `min` · `max` · `step` · `minlength` · `maxlength` | native | Native constraints |
124
+ | `inputmode` · `autocomplete` · `list` · `src` · `tabindex` | native | Passed to the inner `<input>` |
125
+ | `data-aria-label` · `data-aria-labelledby` | string | Forwarded as `aria-label` and `aria-labelledby` |
126
+ | `inlineContent` | boolean | Renders prefix and suffix inside the field (forced for `password`) |
127
+ | `disableInlineContentFocus` | boolean | Clicking inline content does not focus the input |
128
+ | `showPasswordToggle` | boolean | Visibility toggle (forced for `password`) |
129
+ | `sameValueAs` | string | Name of a field whose value becomes this field's `pattern` |
130
+ | `inputDelayMs` | number | Debounces value updates while typing |
131
+ | `autoActive` | boolean | Sets `active` whenever the value is not empty |
132
+ | `active` | boolean | Reflected state for styling |
133
+ | `unsetOnDisconnect` | boolean | Clears the store value when the element is removed |
134
+ | `forceAutoFill` | boolean | Lets properties override `type` / `label` / `description` / `name` attributes |
135
+
136
+ | Slot | Description |
137
+ |------|-------------|
138
+ | `label` | Rich label content |
139
+ | `description` | Rich help text |
140
+ | `prefix` | Content before the input |
141
+ | `suffix` | Content after the input |
142
+ | `list` | Extra content after the description |