@supersoniks/concorde 5.1.1 → 5.1.3-immutable.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (459) 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/skills +1 -0
  6. package/.github/workflows/ci.yml +21 -0
  7. package/.github-export-ignore +30 -0
  8. package/CONTRIBUTING.md +59 -0
  9. package/DEV.md +54 -0
  10. package/LICENSE +21 -0
  11. package/OPEN_SOURCE_CHECKPOINT.md +133 -0
  12. package/README.md +4 -4
  13. package/ai/README.md +29 -41
  14. package/ai/skills/concorde/SKILL.md +54 -324
  15. package/ai/skills/concorde/rules/composition.md +32 -0
  16. package/ai/skills/concorde/rules/data.md +47 -0
  17. package/ai/skills/concorde/rules/http.md +25 -0
  18. package/ai/skills/concorde/rules/lists-forms.md +35 -0
  19. package/ai/skills/concorde/rules/styling.md +46 -0
  20. package/ai/skills/concorde/rules/troubleshooting.md +45 -0
  21. package/build-infos.json +1 -1
  22. package/concorde-core.bundle.js +177 -177
  23. package/concorde-core.es.js +4993 -4833
  24. package/custom-elements-manifest.public.config.mjs +8 -0
  25. package/{.tmp-cem/custom-elements.json → custom-elements.json} +11758 -8904
  26. package/dist/concorde-core.bundle.js +177 -177
  27. package/dist/concorde-core.es.js +4993 -4833
  28. package/dist/docs-mock-api-sw.js +58 -223
  29. package/dist/docs-mock-api-sw.js.map +4 -4
  30. package/dist/img/concorde/plane_01.jpg +0 -0
  31. package/dist/img/concorde/plane_02.jpg +0 -0
  32. package/dist/img/concorde/plane_03.jpg +0 -0
  33. package/dist/img/concorde/plane_04.jpg +0 -0
  34. package/dist/img/concorde/plane_05.jpg +0 -0
  35. package/dist/img/concorde/plane_06.jpg +0 -0
  36. package/dist/img/concorde/plane_07.jpg +0 -0
  37. package/dist/img/concorde/plane_08.jpg +0 -0
  38. package/dist/img/concorde/plane_09.jpg +0 -0
  39. package/dist/img/concorde/plane_10.jpg +0 -0
  40. package/dist/img/concorde/plane_11.jpg +0 -0
  41. package/dist/img/concorde/plane_12.jpg +0 -0
  42. package/dist/img/concorde/plane_13.jpg +0 -0
  43. package/dist/img/og-concorde.jpg +0 -0
  44. package/dist/robots.txt +11 -10
  45. package/docs/assets/index-D_alEsng.js +12122 -0
  46. package/docs/crawl/core/components/functional/date/date.html +190 -0
  47. package/docs/crawl/core/components/functional/fetch/fetch.html +109 -0
  48. package/docs/crawl/core/components/functional/if/if.html +27 -0
  49. package/docs/crawl/core/components/functional/jsonata/jsonata.html +79 -0
  50. package/docs/crawl/core/components/functional/list/list.html +70 -0
  51. package/docs/crawl/core/components/functional/mix/mix.html +45 -0
  52. package/docs/crawl/core/components/functional/queue/queue.html +96 -0
  53. package/docs/crawl/core/components/functional/router/router.html +106 -0
  54. package/docs/crawl/core/components/functional/sdui/sdui-extension-points.html +126 -0
  55. package/docs/crawl/core/components/functional/sdui/sdui.html +368 -0
  56. package/docs/crawl/core/components/functional/states/states.html +66 -0
  57. package/docs/crawl/core/components/functional/submit/submit.html +160 -0
  58. package/docs/crawl/core/components/functional/subscriber/subscriber.html +67 -0
  59. package/docs/crawl/core/components/functional/value/value.html +51 -0
  60. package/docs/crawl/core/components/ui/alert/alert.html +211 -0
  61. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +131 -0
  62. package/docs/crawl/core/components/ui/badge/badge.html +197 -0
  63. package/docs/crawl/core/components/ui/button/button.html +150 -0
  64. package/docs/crawl/core/components/ui/captcha/captcha.html +112 -0
  65. package/docs/crawl/core/components/ui/card/card.html +253 -0
  66. package/docs/crawl/core/components/ui/divider/divider.html +144 -0
  67. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +73 -0
  68. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +266 -0
  69. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +122 -0
  70. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +121 -0
  71. package/docs/crawl/core/components/ui/form/input/input.html +109 -0
  72. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +38 -0
  73. package/docs/crawl/core/components/ui/form/radio/radio.html +56 -0
  74. package/docs/crawl/core/components/ui/form/select/select.html +73 -0
  75. package/docs/crawl/core/components/ui/form/switch/switch.html +56 -0
  76. package/docs/crawl/core/components/ui/form/textarea/textarea.html +59 -0
  77. package/docs/crawl/core/components/ui/group/group.html +104 -0
  78. package/docs/crawl/core/components/ui/icon/icon.html +222 -0
  79. package/docs/crawl/core/components/ui/image/image.html +298 -0
  80. package/docs/crawl/core/components/ui/link/link.html +100 -0
  81. package/docs/crawl/core/components/ui/loader/loader.html +124 -0
  82. package/docs/crawl/core/components/ui/menu/menu.html +394 -0
  83. package/docs/crawl/core/components/ui/modal/modal.html +342 -0
  84. package/docs/crawl/core/components/ui/pop/pop.html +296 -0
  85. package/docs/crawl/core/components/ui/progress/progress.html +131 -0
  86. package/docs/crawl/core/components/ui/table/table.html +545 -0
  87. package/docs/crawl/core/components/ui/theme/theme.html +131 -0
  88. package/docs/crawl/core/components/ui/toast/toast.html +233 -0
  89. package/docs/crawl/core/components/ui/tooltip/tooltip.html +140 -0
  90. package/docs/crawl/docs/_core-concept/dataFlow.html +177 -0
  91. package/docs/crawl/docs/_core-concept/overview.html +66 -0
  92. package/docs/crawl/docs/_core-concept/subscriber.html +75 -0
  93. package/docs/crawl/docs/_decorators/ancestor-attribute.html +117 -0
  94. package/docs/crawl/docs/_decorators/auto-subscribe.html +202 -0
  95. package/docs/crawl/docs/_decorators/bind.html +141 -0
  96. package/docs/crawl/docs/_decorators/get.html +149 -0
  97. package/docs/crawl/docs/_decorators/handle.html +165 -0
  98. package/docs/crawl/docs/_decorators/on-assign.html +355 -0
  99. package/docs/crawl/docs/_decorators/patch.html +78 -0
  100. package/docs/crawl/docs/_decorators/post.html +139 -0
  101. package/docs/crawl/docs/_decorators/publish.html +61 -0
  102. package/docs/crawl/docs/_decorators/put.html +78 -0
  103. package/docs/crawl/docs/_decorators/subscribe.html +109 -0
  104. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +137 -0
  105. package/docs/crawl/docs/_directives/sub.html +93 -0
  106. package/docs/crawl/docs/_getting-started/ai-agents.html +173 -0
  107. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +100 -0
  108. package/docs/crawl/docs/_getting-started/concorde-outside.html +58 -0
  109. package/docs/crawl/docs/_getting-started/create-a-component.html +111 -0
  110. package/docs/crawl/docs/_getting-started/my-first-component.html +189 -0
  111. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +110 -0
  112. package/docs/crawl/docs/_getting-started/pubsub.html +62 -0
  113. package/docs/crawl/docs/_getting-started/start.html +76 -0
  114. package/docs/crawl/docs/_getting-started/theming.html +333 -0
  115. package/docs/crawl/docs/_misc/api-configuration.html +149 -0
  116. package/docs/crawl/docs/_misc/dataProviderKey.html +135 -0
  117. package/docs/crawl/docs/_misc/docs-mock-api.html +158 -0
  118. package/docs/crawl/docs/_misc/dynamic-path.html +180 -0
  119. package/docs/crawl/docs/_misc/endpoint.html +50 -0
  120. package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +138 -0
  121. package/docs/crawl/docs/_misc/html-integration.html +48 -0
  122. package/docs/crawl/hubs/decorators.html +547 -0
  123. package/docs/crawl/hubs/form-components.html +381 -0
  124. package/docs/crawl/hubs/remote-data.html +452 -0
  125. package/docs/crawl/index.html +103 -0
  126. package/docs/index.html +1 -1
  127. package/docs/llms-full.txt +7174 -0
  128. package/docs/llms.txt +98 -0
  129. package/docs/sitemap.xml +243 -0
  130. package/docs/src/core/components/functional/date/date.md +290 -0
  131. package/docs/src/core/components/functional/fetch/fetch.md +125 -0
  132. package/docs/src/core/components/functional/if/if.md +9 -0
  133. package/docs/src/core/components/functional/jsonata/jsonata.md +56 -0
  134. package/docs/src/core/components/functional/list/list.md +65 -0
  135. package/docs/src/core/components/functional/mix/mix.md +41 -0
  136. package/docs/src/core/components/functional/queue/queue.md +72 -0
  137. package/docs/src/core/components/functional/router/router.md +94 -0
  138. package/docs/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
  139. package/docs/src/core/components/functional/sdui/component-catalog.json +3103 -0
  140. package/docs/src/core/components/functional/sdui/default-library.json +108 -0
  141. package/docs/src/core/components/functional/sdui/example.json +99 -0
  142. package/docs/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
  143. package/docs/src/core/components/functional/sdui/sdui.md +478 -0
  144. package/docs/src/core/components/functional/states/states.md +87 -0
  145. package/docs/src/core/components/functional/submit/submit.md +114 -0
  146. package/docs/src/core/components/functional/subscriber/subscriber.md +91 -0
  147. package/docs/src/core/components/functional/value/value.md +35 -0
  148. package/docs/src/core/components/ui/alert/alert.md +196 -0
  149. package/docs/src/core/components/ui/alert-messages/alert-messages.md +85 -0
  150. package/docs/src/core/components/ui/badge/badge.md +188 -0
  151. package/docs/src/core/components/ui/button/button.md +183 -0
  152. package/docs/src/core/components/ui/captcha/captcha.md +71 -0
  153. package/docs/src/core/components/ui/card/card.md +215 -0
  154. package/docs/src/core/components/ui/divider/divider.md +129 -0
  155. package/docs/src/core/components/ui/form/checkbox/checkbox.md +77 -0
  156. package/docs/src/core/components/ui/form/fieldset/fieldset.md +205 -0
  157. package/docs/src/core/components/ui/form/form-actions/form-actions.md +100 -0
  158. package/docs/src/core/components/ui/form/form-layout/form-layout.md +119 -0
  159. package/docs/src/core/components/ui/form/input/input.md +142 -0
  160. package/docs/src/core/components/ui/form/radio/radio.md +57 -0
  161. package/docs/src/core/components/ui/form/select/select.md +71 -0
  162. package/docs/src/core/components/ui/form/switch/switch.md +57 -0
  163. package/docs/src/core/components/ui/form/textarea/textarea.md +65 -0
  164. package/docs/src/core/components/ui/group/group.md +75 -0
  165. package/docs/src/core/components/ui/icon/icon.md +214 -0
  166. package/docs/src/core/components/ui/icon/icons.json +1 -0
  167. package/docs/src/core/components/ui/image/image.md +233 -0
  168. package/docs/src/core/components/ui/link/link.md +81 -0
  169. package/docs/src/core/components/ui/loader/loader.md +112 -0
  170. package/docs/src/core/components/ui/menu/menu.md +370 -0
  171. package/docs/src/core/components/ui/modal/modal.md +235 -0
  172. package/docs/src/core/components/ui/pop/pop.md +294 -0
  173. package/docs/src/core/components/ui/progress/progress.md +109 -0
  174. package/docs/src/core/components/ui/table/table.md +431 -0
  175. package/docs/src/core/components/ui/theme/theme.md +122 -0
  176. package/docs/src/core/components/ui/toast/toast.md +216 -0
  177. package/docs/src/core/components/ui/tooltip/tooltip.md +124 -0
  178. package/{src → docs/src}/docs/_core-concept/subscriber.md +0 -0
  179. package/{src → docs/src}/docs/_getting-started/my-first-subscriber.md +0 -0
  180. package/{src → docs/src}/docs/_getting-started/pubsub.md +0 -0
  181. package/docs/src/docs/_getting-started/theming.md +253 -0
  182. package/docs/src/docs/search/docs-search.json +12242 -0
  183. package/docs/src/tag-list.json +1 -0
  184. package/docs/src/tsconfig-model.json +23 -0
  185. package/docs/src/tsconfig.declarations.json +22 -0
  186. package/docs/src/tsconfig.emit.json +23 -0
  187. package/docs/src/tsconfig.json +1332 -0
  188. package/gitlab/job_github_mirror.sh +39 -0
  189. package/index.html +157 -5
  190. package/package.json +22 -4
  191. package/public/docs-mock-api-sw.js +58 -223
  192. package/public/docs-mock-api-sw.js.map +4 -4
  193. package/public/img/concorde/plane_01.jpg +0 -0
  194. package/public/img/concorde/plane_02.jpg +0 -0
  195. package/public/img/concorde/plane_03.jpg +0 -0
  196. package/public/img/concorde/plane_04.jpg +0 -0
  197. package/public/img/concorde/plane_05.jpg +0 -0
  198. package/public/img/concorde/plane_06.jpg +0 -0
  199. package/public/img/concorde/plane_07.jpg +0 -0
  200. package/public/img/concorde/plane_08.jpg +0 -0
  201. package/public/img/concorde/plane_09.jpg +0 -0
  202. package/public/img/concorde/plane_10.jpg +0 -0
  203. package/public/img/concorde/plane_11.jpg +0 -0
  204. package/public/img/concorde/plane_12.jpg +0 -0
  205. package/public/img/concorde/plane_13.jpg +0 -0
  206. package/public/img/og-concorde.jpg +0 -0
  207. package/public/robots.txt +11 -10
  208. package/scripts/ai-init.mjs +104 -379
  209. package/scripts/ai-init.test.mjs +81 -239
  210. package/scripts/docs-markdown-vite-plugin.ts +43 -0
  211. package/scripts/docs-public-url.mjs +56 -0
  212. package/scripts/docs.htaccess +82 -0
  213. package/scripts/generate-cem.mjs +244 -0
  214. package/scripts/generate-cem.test.mjs +122 -0
  215. package/scripts/generate-crawl-docs.mjs +233 -118
  216. package/scripts/generate-crawl-docs.test.mjs +124 -0
  217. package/scripts/generate-sdui-catalog.mjs +11 -10
  218. package/scripts/github-export.mjs +150 -0
  219. package/scripts/post-build-docs.js +37 -50
  220. package/scripts/post-build.mjs +0 -0
  221. package/scripts/pre-publish.mjs +2 -1
  222. package/scripts/site-pages.mjs +212 -0
  223. package/scripts/site-pages.test.mjs +116 -0
  224. package/site-pages/about.md +22 -0
  225. package/site-pages/privacy.md +32 -0
  226. package/src/core/components/functional/date/date.md +91 -231
  227. package/src/core/components/functional/example/example.ts +3 -1
  228. package/src/core/components/functional/fetch/fetch.md +66 -83
  229. package/src/core/components/functional/if/if.md +28 -3
  230. package/src/core/components/functional/if/if.ts +0 -0
  231. package/src/core/components/functional/jsonata/jsonata.md +42 -37
  232. package/src/core/components/functional/list/list.demo.ts +0 -0
  233. package/src/core/components/functional/list/list.md +103 -43
  234. package/src/core/components/functional/list/list.ts +17 -4
  235. package/src/core/components/functional/mix/mix.md +31 -26
  236. package/src/core/components/functional/queue/queue.demo.ts +10 -7
  237. package/src/core/components/functional/queue/queue.md +40 -61
  238. package/src/core/components/functional/router/router.demo.ts +16 -16
  239. package/src/core/components/functional/router/router.md +64 -65
  240. package/src/core/components/functional/router/router.ts +0 -0
  241. package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +0 -0
  242. package/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
  243. package/src/core/components/functional/sdui/component-catalog.json +2 -2
  244. package/src/core/components/functional/sdui/example.json +19 -86
  245. package/src/core/components/functional/sdui/sdui-extension-points.md +1 -1
  246. package/src/core/components/functional/sdui/sdui-immutable.spec.ts +74 -0
  247. package/src/core/components/functional/sdui/sdui.md +187 -358
  248. package/src/core/components/functional/sdui/sdui.ts +33 -8
  249. package/src/core/components/functional/sdui/types.ts +0 -0
  250. package/src/core/components/functional/states/states.demo.ts +21 -22
  251. package/src/core/components/functional/states/states.md +86 -61
  252. package/src/core/components/functional/states/states.ts +1 -1
  253. package/src/core/components/functional/submit/submit.md +64 -72
  254. package/src/core/components/functional/submit/submit.spec.ts +60 -0
  255. package/src/core/components/functional/submit/submit.ts +6 -3
  256. package/src/core/components/functional/subscriber/subscriber.ts +0 -0
  257. package/src/core/components/functional/translation/translation.md +38 -0
  258. package/src/core/components/functional/value/value.md +34 -22
  259. package/src/core/components/functional/value/value.ts +0 -0
  260. package/src/core/components/ui/_css/size.ts +0 -0
  261. package/src/core/components/ui/alert/alert.md +48 -58
  262. package/src/core/components/ui/badge/badge.md +27 -34
  263. package/src/core/components/ui/button/button.md +139 -106
  264. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  265. package/src/core/components/ui/captcha/captcha.md +17 -32
  266. package/src/core/components/ui/card/card.md +6 -6
  267. package/src/core/components/ui/divider/divider.md +8 -11
  268. package/src/core/components/ui/form/checkbox/checkbox.md +90 -42
  269. package/src/core/components/ui/form/fieldset/fieldset.md +31 -75
  270. package/src/core/components/ui/form/form-actions/form-actions.md +14 -16
  271. package/src/core/components/ui/form/form-layout/form-layout.md +19 -29
  272. package/src/core/components/ui/form/input/input.md +108 -90
  273. package/src/core/components/ui/form/input/input.ts +8 -2
  274. package/src/core/components/ui/form/radio/radio.md +65 -30
  275. package/src/core/components/ui/form/select/select.md +60 -45
  276. package/src/core/components/ui/form/switch/switch.md +57 -34
  277. package/src/core/components/ui/form/textarea/textarea.md +55 -38
  278. package/src/core/components/ui/group/group.md +35 -33
  279. package/src/core/components/ui/icon/icon.md +4 -4
  280. package/src/core/components/ui/image/image.md +41 -107
  281. package/src/core/components/ui/link/link.md +6 -6
  282. package/src/core/components/ui/loader/loader.md +30 -55
  283. package/src/core/components/ui/menu/menu.md +27 -27
  284. package/src/core/components/ui/modal/modal.md +72 -96
  285. package/src/core/components/ui/pop/pop.md +80 -158
  286. package/src/core/components/ui/progress/progress.md +2 -2
  287. package/src/core/components/ui/table/table.md +91 -255
  288. package/src/core/components/ui/theme/theme.md +11 -36
  289. package/src/core/components/ui/toast/toast.md +48 -117
  290. package/src/core/components/ui/tooltip/tooltip.md +27 -62
  291. package/src/core/decorators/subscriber/bind.ts +9 -14
  292. package/src/core/decorators/subscriber/subscribe.ts +15 -9
  293. package/src/core/decorators/subscriber/subscribe.type-test.ts +14 -5
  294. package/src/core/mixins/Subscriber.ts +0 -0
  295. package/src/core/utils/DataBindObserver.ts +0 -0
  296. package/src/core/utils/LocationHandler.spec.ts +80 -0
  297. package/src/core/utils/LocationHandler.ts +5 -9
  298. package/src/core/utils/Objects.ts +0 -0
  299. package/src/core/utils/PublisherProxy.ts +166 -125
  300. package/src/core/utils/deepReadonly.spec.ts +66 -0
  301. package/src/core/utils/deepReadonly.ts +71 -0
  302. package/src/core/utils/immutableValue.spec.ts +54 -0
  303. package/src/core/utils/immutableValue.ts +102 -0
  304. package/src/core/utils/nestedDotForm.spec.ts +88 -0
  305. package/src/core/utils/publisherImmutable.spec.ts +76 -0
  306. package/src/core/utils/route.ts +0 -0
  307. package/src/core/utils/strictGet.spec.ts +61 -0
  308. package/src/core/utils/strictGet.ts +102 -0
  309. package/src/css.d.ts +19 -0
  310. package/src/docs/components/docs-demo-sources.ts +55 -140
  311. package/src/docs/components/docs-lit-demo.ts +1 -3
  312. package/src/docs/components/docs-source-link.ts +0 -82
  313. package/src/docs/decorators/ancestor-attribute.md +59 -0
  314. package/src/docs/decorators/auto-subscribe.md +40 -0
  315. package/src/docs/decorators/bind.md +76 -0
  316. package/src/docs/decorators/get.md +160 -0
  317. package/src/docs/decorators/handle.md +119 -0
  318. package/src/docs/decorators/on-assign.md +63 -0
  319. package/src/docs/decorators/patch.md +44 -0
  320. package/src/docs/decorators/post.md +134 -0
  321. package/src/docs/decorators/publish.md +56 -0
  322. package/src/docs/decorators/put.md +51 -0
  323. package/src/docs/decorators/subscribe.md +87 -0
  324. package/src/docs/decorators/wait-for-ancestors.md +76 -0
  325. package/src/docs/directives/sub.md +75 -0
  326. package/src/docs/directives/t.md +73 -0
  327. package/src/docs/docs-location.spec.ts +56 -0
  328. package/src/docs/docs-location.ts +133 -32
  329. package/src/docs/docs.ts +1 -2
  330. package/src/docs/example/decorators-demo-bind-demos.ts +83 -135
  331. package/src/docs/example/decorators-demo-geo.ts +30 -19
  332. package/src/docs/example/decorators-demo-post.ts +88 -186
  333. package/src/docs/example/decorators-demo-subscribe-publish-get-demos.ts +165 -268
  334. package/src/docs/example/decorators-demo.ts +85 -98
  335. package/src/docs/example/docs-api-config-demos.ts +19 -20
  336. package/src/docs/example/docs-flight-demos.ts +147 -0
  337. package/src/docs/example/docs-jsonata-demos.ts +52 -52
  338. package/src/docs/example/docs-list-demos.ts +43 -123
  339. package/src/docs/example/docs-provider-keys.ts +21 -28
  340. package/src/docs/example/docs-queue-demos.ts +37 -77
  341. package/src/docs/example/docs-router-demos.ts +20 -25
  342. package/src/docs/example/docs-submit-demos.ts +48 -48
  343. package/src/docs/example/docs-toggle-demos.ts +4 -3
  344. package/src/docs/example/users.ts +0 -0
  345. package/src/docs/getting-started/ai-agents.md +50 -0
  346. package/src/docs/getting-started/create-a-component.md +136 -0
  347. package/src/docs/getting-started/dataFlow.md +87 -0
  348. package/src/docs/getting-started/installation.md +36 -0
  349. package/src/docs/getting-started/my-first-component.md +227 -0
  350. package/src/docs/getting-started/start.md +35 -0
  351. package/src/docs/header/header.ts +11 -6
  352. package/src/docs/home/catalog.ts +1 -1
  353. package/src/docs/home/home.ts +20 -11
  354. package/src/docs/layout.ts +12 -13
  355. package/src/docs/misc/api-configuration.md +79 -0
  356. package/src/docs/misc/dataProviderKey.md +168 -0
  357. package/src/docs/misc/docs-mock-api.md +62 -0
  358. package/src/docs/misc/dynamic-path.md +71 -0
  359. package/src/docs/misc/endpoint.md +45 -0
  360. package/src/docs/misc/html-integration.md +14 -0
  361. package/src/docs/misc/publisher-get-immutability-docs-crawl.json +902 -0
  362. package/src/docs/misc/publisher-get-immutability-docs-recheck.json +13 -0
  363. package/src/docs/misc/publisher-get-immutability-study.md +229 -0
  364. package/src/docs/mock-api/api-config-mock.ts +5 -0
  365. package/src/docs/mock-api/fixtures.ts +0 -278
  366. package/src/docs/mock-api/flights.ts +89 -0
  367. package/src/docs/mock-api/router.ts +3 -4
  368. package/src/docs/mock-api/urls.ts +1 -2
  369. package/src/docs/navigation/navigation.ts +84 -101
  370. package/src/docs/navigation/toc.ts +7 -4
  371. package/src/docs/search/docs-search.json +3188 -5153
  372. package/src/docs/search/markdown-renderer.ts +31 -8
  373. package/src/docs/search/page.ts +9 -6
  374. package/src/docs/search/search.ts +154 -122
  375. package/src/docs/tailwind/css/docs/content.css +4 -5
  376. package/src/tsconfig.declarations.json +22 -0
  377. package/src/tsconfig.emit.json +23 -0
  378. package/src/tsconfig.json +53 -5
  379. package/src/tsconfig.tsbuildinfo +1 -1
  380. package/vite.config.mts +11 -2
  381. package/.agents/skills/concorde-component-docs/SKILL.md +0 -194
  382. package/.taste-skill/after/desktop-fold.jpg +0 -0
  383. package/.taste-skill/after/desktop-page-01.jpg +0 -0
  384. package/.taste-skill/after/desktop-page-02.jpg +0 -0
  385. package/.taste-skill/after/desktop-page-03.jpg +0 -0
  386. package/.taste-skill/after/mobile-fold.jpg +0 -0
  387. package/.taste-skill/after/mobile-page-01.jpg +0 -0
  388. package/.taste-skill/after/report.json +0 -4103
  389. package/.taste-skill/after/tablet-fold.jpg +0 -0
  390. package/.taste-skill/after/tablet-page-01.jpg +0 -0
  391. package/.taste-skill/after/tablet-page-02.jpg +0 -0
  392. package/.taste-skill/before/desktop-fold.jpg +0 -0
  393. package/.taste-skill/before/desktop-page-01.jpg +0 -0
  394. package/.taste-skill/before/desktop-page-02.jpg +0 -0
  395. package/.taste-skill/before/mobile-fold.jpg +0 -0
  396. package/.taste-skill/before/mobile-page-01.jpg +0 -0
  397. package/.taste-skill/before/report.json +0 -2556
  398. package/.taste-skill/before/tablet-fold.jpg +0 -0
  399. package/.taste-skill/before/tablet-page-01.jpg +0 -0
  400. package/.taste-skill/direction.json +0 -510
  401. package/.taste-skill/notes.md +0 -84
  402. package/.taste-skill/prod/desktop-fold.jpg +0 -0
  403. package/.taste-skill/prod/desktop-page-01.jpg +0 -0
  404. package/.taste-skill/prod/desktop-page-02.jpg +0 -0
  405. package/.taste-skill/prod/desktop-page-03.jpg +0 -0
  406. package/.taste-skill/prod/mobile-fold.jpg +0 -0
  407. package/.taste-skill/prod/mobile-page-01.jpg +0 -0
  408. package/.taste-skill/prod/mobile-page-02.jpg +0 -0
  409. package/.taste-skill/prod/report.json +0 -1973
  410. package/.taste-skill/prod/tablet-fold.jpg +0 -0
  411. package/.taste-skill/prod/tablet-page-01.jpg +0 -0
  412. package/.taste-skill/prod/tablet-page-02.jpg +0 -0
  413. package/AUDIT.md +0 -228
  414. package/PLAN-AMELIORATION.md +0 -220
  415. package/ai/AGENTS.md +0 -56
  416. package/ai/cursor/rules/concorde-menu.mdc +0 -15
  417. package/ai/cursor/rules/concorde-scope.mdc +0 -14
  418. package/ai/cursor/rules/concorde-theme.mdc +0 -13
  419. package/ai/cursor/rules/concorde.mdc +0 -66
  420. package/ai/jetbrains/rules/concorde.md +0 -53
  421. package/ai/skills/concorde-get-set-dp/SKILL.md +0 -194
  422. package/ai/skills/concorde-imports/SKILL.md +0 -78
  423. package/ai/skills/concorde-menu/SKILL.md +0 -74
  424. package/ai/skills/concorde-scope/SKILL.md +0 -70
  425. package/ai/skills/concorde-theme/SKILL.md +0 -57
  426. package/docs/assets/index-Bb-_LRyY.js +0 -12280
  427. package/src/docs/example/docs-input-autocomplete-demos.ts +0 -110
  428. package/src/docs/example/docs-joke-demos.ts +0 -297
  429. /package/{src → docs/src}/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -0
  430. /package/{src → docs/src}/docs/_core-concept/dataFlow.md +0 -0
  431. /package/{src → docs/src}/docs/_core-concept/overview.md +0 -0
  432. /package/{src → docs/src}/docs/_decorators/ancestor-attribute.md +0 -0
  433. /package/{src → docs/src}/docs/_decorators/auto-subscribe.md +0 -0
  434. /package/{src → docs/src}/docs/_decorators/bind.md +0 -0
  435. /package/{src → docs/src}/docs/_decorators/get.md +0 -0
  436. /package/{src → docs/src}/docs/_decorators/handle.md +0 -0
  437. /package/{src → docs/src}/docs/_decorators/on-assign.md +0 -0
  438. /package/{src → docs/src}/docs/_decorators/patch.md +0 -0
  439. /package/{src → docs/src}/docs/_decorators/post.md +0 -0
  440. /package/{src → docs/src}/docs/_decorators/publish.md +0 -0
  441. /package/{src → docs/src}/docs/_decorators/put.md +0 -0
  442. /package/{src → docs/src}/docs/_decorators/subscribe.md +0 -0
  443. /package/{src → docs/src}/docs/_decorators/wait-for-ancestors.md +0 -0
  444. /package/{src → docs/src}/docs/_directives/sub.md +0 -0
  445. /package/{src → docs/src}/docs/_getting-started/ai-agents.md +0 -0
  446. /package/{src → docs/src}/docs/_getting-started/concorde-manual-install.md +0 -0
  447. /package/{src → docs/src}/docs/_getting-started/concorde-outside.md +0 -0
  448. /package/{src → docs/src}/docs/_getting-started/create-a-component.md +0 -0
  449. /package/{src → docs/src}/docs/_getting-started/my-first-component.md +0 -0
  450. /package/{src → docs/src}/docs/_getting-started/start.md +0 -0
  451. /package/{src → docs/src}/docs/_misc/api-configuration.md +0 -0
  452. /package/{src → docs/src}/docs/_misc/dataProviderKey.md +0 -0
  453. /package/{src → docs/src}/docs/_misc/docs-mock-api.md +0 -0
  454. /package/{src → docs/src}/docs/_misc/dynamic-path.md +0 -0
  455. /package/{src → docs/src}/docs/_misc/endpoint.md +0 -0
  456. /package/{src → docs/src}/docs/_misc/formelement-subscriber-removal.md +0 -0
  457. /package/{src → docs/src}/docs/_misc/html-integration.md +0 -0
  458. /package/src/docs/{_getting-started → getting-started}/components.md +0 -0
  459. /package/src/docs/{_getting-started → getting-started}/theming.md +0 -0
package/docs/crawl/core/components/functional/sdui/sdui.html ADDED
@@ -0,0 +1,368 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/functional/sdui/sdui.html" data-doc-id="core/components/functional/sdui/sdui">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SDUI — Concorde</title>
7
+ <meta name="description" content="SDUI stands for Server Driven User Interfaces.">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/functional/sdui/sdui, sdui, SDUI, functional component, sonic-sdui, web component, Server Driven User Interfaces, props, contents, profile=&quot;safe&quot;, js, markup, innerHTML, prefix, suffix">
9
+ <meta name="concorde-doc-id" content="core/components/functional/sdui/sdui">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/functional/sdui/sdui.html">
11
+ </head>
12
+ <body>
13
+ <header>
14
+ <p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/functional/sdui/sdui.md/sdui" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde functional component — SDUI</strong>. SDUI stands for Server Driven User Interfaces. <span>Doc ID: <code>core/components/functional/sdui/sdui</code>. Keywords: Concorde, supersoniks, core/components/functional/sdui/sdui, sdui, SDUI, functional component, sonic-sdui, web component, Server Driven User Interfaces, props, contents, profile=&quot;safe&quot;, js, markup, innerHTML, prefix, suffix. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/functional/sdui/sdui.html">https://concorde.supersoniks.org/crawl/core/components/functional/sdui/sdui.html</a>.</span></p>
19
+ <h1 id="sdui">SDUI</h1>
20
+ <h2 id="what-is-sdui">What is SDUI?</h2>
21
+ <p>SDUI stands for <code>Server Driven User Interfaces</code>.
22
+ Basically, it generates a user interface based on a JSON SDUI Descriptor.</p>
23
+ <h3 id="subscriber-extension">Subscriber extension:</h3>
24
+ <p>SDUI extends the mixin <a href="../../../../docs/_core-concept/subscriber.html#subscriber">Subscriber</a>.
25
+ This means that you must set a dataProvider with an id pointing to the publisher that will hold your SDUI Descriptor.
26
+ This also means that it has a reactive property named <code>props</code> that you can set with the JSON SDUI Descriptor in order to configure it.</p>
27
+ <h3 id="fetcher-extension">Fetcher extension:</h3>
28
+ <p>SDUI extends the mixin Fetcher as <a href="../fetch/fetch.html#fetch">Fetch</a> and <a href="../list/list.html#list">List</a>.</p>
29
+ <p>In this case, it will parse the JSON coming from the request.
30
+ The JSON must comply with the SDUI descriptor format.</p>
31
+ <p>As a fetcher, invalidating the publisher or updating the endpoint will trigger a new fetch and update accordingly.</p>
32
+ <h3 id="rendering">Rendering:</h3>
33
+ <p>It has no shadowdom, and its display style is set to <code>contents</code>, so an empty SDUI has the fewest impact on the layout.</p>
34
+ <h3 id="safe-profile-opt-in">Safe profile (opt-in)</h3>
35
+ <p>Set <code>profile=&quot;safe&quot;</code> on <code>sonic-sdui</code> to refuse untrusted HTML/JS from the descriptor:</p>
36
+ <ul>
37
+ <li><code>js</code> URLs are <strong>not</strong> loaded</li>
38
+ <li>nodes that use <code>markup</code>, <code>innerHTML</code>, <code>prefix</code>, or <code>suffix</code> are <strong>skipped</strong> (not rendered)</li>
39
+ <li><code>textContent</code> is <strong>allowed</strong> (plain text, no HTML parsing)</li>
40
+ <li>a clear <code>console.warn</code> is emitted for each refusal</li>
41
+ <li>without the attribute, behaviour is unchanged</li>
42
+ </ul>
43
+ <p>Use the pure helper <code>validateSafeDescriptor(descriptor)</code> (from <code>sdui-safe</code>) to list violations server-side or in a custom validator — it returns <code>{ path, field, message }[]</code> and has no side effects.</p>
44
+ <pre><code>&lt;sonic-sdui
45
+ profile=&quot;safe&quot;
46
+ dataProvider=&quot;sdui-safe-example&quot;
47
+ props=&#39;{
48
+ &quot;nodes&quot;:[
49
+ { &quot;tagName&quot;:&quot;p&quot;, &quot;textContent&quot;:&quot;Plain text is fine&quot; },
50
+ { &quot;innerHTML&quot;:&quot;&amp;lt;script&amp;gt;/* refused */&amp;lt;/script&amp;gt;&quot; }
51
+ ]
52
+ }&#39;
53
+ &gt;&lt;/sonic-sdui&gt;
54
+ </code></pre>
55
+ <h3 id="component-catalog-build-only">Component catalog (build-only)</h3>
56
+ <p>At build time, Concorde generates a <strong>neutral JSON catalog</strong> of custom elements for SDUI / external agents:</p>
57
+ <ul>
58
+ <li>file: <code>src/core/components/functional/sdui/component-catalog.json</code></li>
59
+ <li>import: <code>@supersoniks/concorde/sdui/component-catalog.json</code> (or the long <code>core/components/functional/sdui/…</code> path)</li>
60
+ <li>regenerate: <code>yarn generate:sdui-catalog</code> (also runs in <code>prebuild</code>)</li>
61
+ <li>source: Custom Elements Manifest via <code>@custom-elements-manifest/analyzer</code> (Lit)</li>
62
+ <li>no runtime impact</li>
63
+ </ul>
64
+ <p>Each entry includes <code>tag</code>, <code>props</code> (name, attribute, type, allowed <code>values</code> when detectable, <code>default</code>, description), plus slots/events when present.</p>
65
+ <p>Components with thin JSDoc are listed in <code>component-catalog.gaps.json</code> (same folder) — annotations are <strong>not</strong> mass-rewritten in this step.</p>
66
+ <h3 id="incremental-operations-opt-in">Incremental operations (opt-in)</h3>
67
+ <p>Beside the full-descriptor rebuild path, <code>sonic-sdui</code> exposes surgical ops (siblings keep DOM state):</p>
68
+ <ul>
69
+ <li><code>upsertNode(node, parentId?, index?)</code> — <code>node.nodeId</code> required</li>
70
+ <li><code>removeNode(nodeId)</code></li>
71
+ <li><code>setData(path, value)</code> — updates a publisher path (<code>form.email</code> or <code>provider.nested</code>)</li>
72
+ <li><code>applyOp(op)</code> / optional <code>opsDataProvider</code> for a stream of <code>SDUIOp</code></li>
73
+ <li><code>endIncremental()</code> — return to props → full rebuild</li>
74
+ </ul>
75
+ <p>Public extension surface (also covered above): <code>profile=&quot;safe&quot;</code>, <code>textContent</code>, <code>sdui-action</code> / <code>action</code>, component catalog JSON, <code>partial</code> + <code>childNodeIds</code> / <code>nodeById</code>, and these incremental ops.</p>
76
+ <h3 id="partial-rendering-opt-in">Partial rendering (opt-in)</h3>
77
+ <p>Set the boolean attribute <code>partial</code> on <code>sonic-sdui</code> to tolerate missing child references:</p>
78
+ <ul>
79
+ <li>Declare a flat registry with <code>nodeById</code> and point to children with <code>childNodeIds: [&quot;a&quot;, &quot;b&quot;]</code></li>
80
+ <li>If a <code>childNodeId</code> is <strong>missing</strong> and <code>partial</code> is set → a light placeholder is inserted<br>(<code>data-sdui-placeholder</code>, <code>data-node-id</code>, <code>display: contents</code>, <code>aria-hidden</code>)</li>
81
+ <li>If <code>partial</code> is <strong>not</strong> set → <code>console.warn</code> and the missing child is skipped (no crash)</li>
82
+ <li>Nested <code>nodes</code> arrays keep working as before; without <code>childNodeIds</code> / <code>partial</code>, behaviour is unchanged</li>
83
+ <li>Incremental ops (later) reuse the same placeholder path</li>
84
+ </ul>
85
+ <pre><code>&lt;sonic-sdui
86
+ partial
87
+ dataProvider=&quot;sdui-partial-example&quot;
88
+ props=&#39;{
89
+ &quot;nodes&quot;:[{
90
+ &quot;tagName&quot;:&quot;div&quot;,
91
+ &quot;childNodeIds&quot;:[&quot;title&quot;, &quot;body&quot;]
92
+ }],
93
+ &quot;nodeById&quot;:{
94
+ &quot;title&quot;:{ &quot;nodeId&quot;:&quot;title&quot;, &quot;tagName&quot;:&quot;h2&quot;, &quot;textContent&quot;:&quot;Hello&quot; }
95
+ }
96
+ }&#39;
97
+ &gt;&lt;/sonic-sdui&gt;
98
+ </code></pre>
99
+ <h3 id="actions-sdui-action">Actions (<code>sdui-action</code>)</h3>
100
+ <p>Declarative opt-in on a node: set <code>action: { name, context? }</code> (and optionally <code>nodeId</code>).
101
+ A click on the rendered element dispatches a <code>CustomEvent</code> named <strong><code>sdui-action</code></strong> on <code>sonic-sdui</code> with:</p>
102
+ <ul>
103
+ <li><code>detail: { name, context, sourceNodeId? }</code></li>
104
+ <li><code>bubbles: true</code>, <code>composed: true</code> — so a host (page shell, parent) can listen without binding each node</li>
105
+ </ul>
106
+ <p>This does <strong>not</strong> replace form submit (<code>sonic-submit</code> / POST / <code>messagesKey</code>). Those keep working as before; only nodes that declare <code>action</code> emit <code>sdui-action</code>.</p>
107
+ <pre><code>&lt;sonic-sdui
108
+ dataProvider=&quot;sdui-action-example&quot;
109
+ props=&#39;{
110
+ &quot;nodes&quot;:[{
111
+ &quot;tagName&quot;:&quot;sonic-button&quot;,
112
+ &quot;nodeId&quot;:&quot;confirm-btn&quot;,
113
+ &quot;textContent&quot;:&quot;Confirm&quot;,
114
+ &quot;action&quot;:{ &quot;name&quot;:&quot;confirm&quot;, &quot;context&quot;:{ &quot;step&quot;:1 } }
115
+ }]
116
+ }&#39;
117
+ &gt;&lt;/sonic-sdui&gt;
118
+ &lt;script type=&quot;module&quot;&gt;
119
+ document.querySelector(&quot;sonic-sdui&quot;)?.addEventListener(&quot;sdui-action&quot;, (e) =&gt; {
120
+ console.log(e.detail); // { name, context, sourceNodeId }
121
+ });
122
+ &lt;/script&gt;
123
+ </code></pre>
124
+ <h2 id="sdui-descriptor">SDUI descriptor</h2>
125
+ <h3 id="typescript-definition">TypeScript definition:</h3>
126
+ <pre><code class="language-typescript">export type SDUIDescriptor = {
127
+ js?: Array&amp;lt;string&amp;gt;;
128
+ css?: Array&amp;lt;string&amp;gt;;
129
+ library?: Record&amp;lt;string, SDUINode&amp;gt;;
130
+ nodes?: Array&amp;lt;SDUINode&amp;gt;;
131
+ nodeById?: Record&amp;lt;string, SDUINode&amp;gt;;
132
+ };
133
+ </code></pre>
134
+ <h3 id="meaning-of-the-keys">Meaning of the keys:</h3>
135
+ <ul>
136
+ <li><strong>js</strong>: An array of URLs pointing to JavaScript files to load.</li>
137
+ <li><strong>css</strong>: An array of URLs pointing to CSS files to load.</li>
138
+ <li><strong>library</strong>: A record of SDUINode definitions intended to be used as a model for other nodes. The keys of the record can be used as the libraryKey of the node. This node will then specialize the model with its own descriptor.</li>
139
+ <li><strong>nodes</strong>: An array of SDUINode descriptors. Each SDUINode will result in an HTMLElement added to the root of the component.</li>
140
+ <li><strong>nodeById</strong>: Optional flat map of nodes by <code>nodeId</code>, used with <code>childNodeIds</code> for partial / incremental graphs.</li>
141
+ </ul>
142
+ <h2 id="sduinode">SDUINode</h2>
143
+ <h3 id="descriptor">Descriptor</h3>
144
+ <p>An SDUINode represents an HTMLElement.</p>
145
+ <p>TypeScript definition:</p>
146
+ <pre><code class="language-typescript">export type SDUINode = {
147
+ markup?: string;
148
+ tagName?: string;
149
+ attributes?: Record&amp;lt;string, string&amp;gt;;
150
+ nodes?: Array&amp;lt;SDUINode&amp;gt;;
151
+ textContent?: string;
152
+ innerHTML?: string;
153
+ prefix?: string;
154
+ suffix?: string;
155
+ libraryKey?: string;
156
+ contentElementSelector?: string;
157
+ parentElementSelector?: string;
158
+ action?: { name: string; context?: Record&amp;lt;string, unknown&amp;gt; };
159
+ nodeId?: string;
160
+ };
161
+ </code></pre>
162
+ <p>Summary of properties:</p>
163
+ <ul>
164
+ <li><strong>markup</strong>: Use it if you prefer to define your node entirely using an HTML string.</li>
165
+ <li><strong>tagName</strong>: The tag name of the HTML element.</li>
166
+ <li><strong>attributes</strong>: A string key/value pair storing each attribute name/value of the HTML element created.</li>
167
+ <li><strong>nodes</strong>: An array of SDUINode descriptors. The children of the HTMLElement are created this way.</li>
168
+ <li><strong>textContent</strong>: Plain text for the node (no HTML parsing). Preferred for safe UIs; ignored when <code>nodes</code> is non-empty. Allowed with <code>profile=&quot;safe&quot;</code>.</li>
169
+ <li><strong>innerHTML</strong>: The inner HTML of the current node is defined here if needed.</li>
170
+ <li><strong>prefix</strong>: Use it if you want to wrap the component with some HTML string in conjunction with the suffix.</li>
171
+ <li><strong>suffix</strong>: Use it if you want to wrap the component with some HTML string in conjunction with the prefix.</li>
172
+ <li><strong>libraryKey</strong>: An identifier that points to an SDUINode to be used as a model for this node.</li>
173
+ <li><strong>contentElementSelector</strong>: For SDUINodes defined in the library only. It is a CSS selector that defines where child nodes are added.</li>
174
+ <li><strong>parentElementSelector</strong>: If the current node, as a future child, has a <code>parentElementSelector</code> attribute, it is added to the node corresponding to the associated CSS selector rather than directly to the element.</li>
175
+ <li><strong>action</strong>: Optional <code>{ name, context? }</code>. Click emits <code>sdui-action</code> (see above).</li>
176
+ <li><strong>nodeId</strong>: Optional logical id (not the DOM <code>id</code> attribute). Copied into <code>sdui-action.detail.sourceNodeId</code> when set.</li>
177
+ <li><strong>childNodeIds</strong>: Optional list of <code>nodeId</code>s to append as children (from <code>nodeById</code> / tree index). See Partial rendering.</li>
178
+ </ul>
179
+ <h3 id="markup">Markup</h3>
180
+ <p>Use it if you prefer to define your node entirely using an HTML string.</p>
181
+ <pre><code>&lt;sonic-sdui
182
+ dataProvider=&quot;sdui-markup-example&quot;
183
+ props=&#39;{
184
+ &quot;nodes&quot;:[
185
+ {
186
+ &quot;markup&quot;:&quot;keep shouting &lt;sonic-badge&gt;foo&lt;/sonic-badge&gt; &lt;sonic-badge&gt;bar&lt;/sonic-badge&gt; !&quot;
187
+ }
188
+ ]}&#39;
189
+ &gt;&lt;/sonic-sdui&gt;
190
+ </code></pre>
191
+ <h3 id="tag-name">Tag name</h3>
192
+ <p>Here we use the field <code>tagName</code> of SDUINode to create an element with tag name <code>sonic-input</code>.</p>
193
+ <pre><code>&lt;sonic-sdui
194
+ dataProvider=&quot;sdui-tagName-example&quot;
195
+ props=&#39;{
196
+ &quot;nodes&quot;:[
197
+ {
198
+ &quot;tagName&quot;:&quot;sonic-input&quot;
199
+ }
200
+ ]}&#39;
201
+ &gt;&lt;/sonic-sdui&gt;
202
+ </code></pre>
203
+ <h3 id="attributes">Attributes</h3>
204
+ <p>A string key/value pair storing each attribute name/value of the HTML element created.
205
+ As no tag name is defined, a div element is created.
206
+ Here we define the style attribute to create a tiny red square.</p>
207
+ <pre><code>&lt;sonic-sdui
208
+ dataProvider=&quot;sdui-attributes-example&quot;
209
+ props=&#39;{
210
+ &quot;nodes&quot;:[{
211
+ &quot;attributes&quot;:{
212
+ &quot;style&quot;:&quot;width:50px;height:10px;background:red;&quot;
213
+ }
214
+ }]
215
+ }&#39;
216
+ &gt;&lt;/sonic-sdui&gt;
217
+ </code></pre>
218
+ <h3 id="nodes">Nodes</h3>
219
+ <p>Children of the current node can be added using the field <code>nodes</code> recursively.</p>
220
+ <pre><code>&lt;sonic-sdui
221
+ dataProvider=&quot;sdui-nodes-example&quot;
222
+ props=&#39;{
223
+ &quot;nodes&quot;:[{
224
+ &quot;nodes&quot;:[
225
+ {&quot;innerHTML&quot;:&quot;A&quot;},
226
+ {
227
+ &quot;prefix&quot;:&quot;B&quot;,
228
+ &quot;nodes&quot;:[
229
+ {&quot;innerHTML&quot;:&quot;👉 B.1&quot;},
230
+ {&quot;innerHTML&quot;:&quot;👉 B.2&quot;}
231
+ ]
232
+ }
233
+ ]
234
+ }]
235
+ }&#39;
236
+ &gt;&lt;/sonic-sdui&gt;
237
+ </code></pre>
238
+ <h3 id="innerhtml">InnerHTML</h3>
239
+ <p>As no tag name is defined, a div element is created, and then we use <code>innerHTML</code> to add content to it.</p>
240
+ <pre><code>&lt;sonic-sdui
241
+ dataProvider=&quot;sdui-html-example&quot;
242
+ props=&#39;{
243
+ &quot;nodes&quot;:[{
244
+ &quot;innerHTML&quot;:&quot;keep shouting &lt;sonic-badge&gt;foo&lt;/sonic-badge&gt; &lt;sonic-badge&gt;bar&lt;/sonic-badge&gt; !&quot;
245
+ }]
246
+ }&#39;
247
+ &gt;&lt;/sonic-sdui&gt;
248
+ </code></pre>
249
+ <h3 id="prefix-and-suffix">Prefix and suffix</h3>
250
+ <p>Use them if you want to wrap the component with some HTML string.</p>
251
+ <pre><code>&lt;sonic-sdui
252
+ dataProvider=&quot;sdui-prefixSuffix-example&quot;
253
+ props=&#39;{
254
+ &quot;nodes&quot;:[{
255
+ &quot;prefix&quot;:&quot;👇&quot;,
256
+ &quot;suffix&quot;:&quot;☝️&quot;,
257
+ &quot;innerHTML&quot;:&quot;The node content&quot;
258
+ }]
259
+ }&#39;
260
+ &gt;&lt;/sonic-sdui&gt;
261
+ </code></pre>
262
+ <h3 id="library-key-and-contentelementselector">Library key and contentElementSelector</h3>
263
+ <p>The libraryKey of SDUINode is an identifier that points to an SDUINode description in the library to be used as a model for this node.</p>
264
+ <p>Note that the SDUI has a default library containing some basic component definitions useful for form declaration (see default-library.json).</p>
265
+ <p>This example uses the library key <code>submit</code> which points to a <code>sonic-submit</code> containing a button also coming from the library.</p>
266
+ <p>The element named <code>button</code> in the library is a <code>sonic-button</code> of type <code>success</code> containing a check icon as a prefix.</p>
267
+ <p>Since the <code>submit</code> library element contains an attribute <code>contentElementSelector</code> with the value <code>sonic-button</code>, the &quot;injected content&quot; is put inside the button.</p>
268
+ <p>We used <code>innerHTML</code> for the sake of simplicity, but you can use nodes to add any complex content.</p>
269
+ <pre><code>&lt;sonic-sdui dataProvider=&quot;sdui-library-example&quot; props=&#39;
270
+ {
271
+ &quot;nodes&quot;:[
272
+ {
273
+ &quot;libraryKey&quot;:&quot;submit&quot;,
274
+ &quot;innerHTML&quot;:&quot;Injected content&quot;
275
+ }
276
+ ]
277
+ }
278
+ &#39;&gt;&lt;/sonic-sdui&gt;
279
+ </code></pre>
280
+ <h3 id="parentelementselector">parentElementSelector</h3>
281
+ <p>This special field lets you inject the content at any place in the HTML flow already set inside the parent SDUI component by using a CSS selector.</p>
282
+ <p>⚠️ Note that it doesn&#39;t work with top-level nodes.</p>
283
+ <pre><code>&lt;sonic-sdui dataProvider=&quot;sdui-parentElementSelector-example&quot; props=&#39;
284
+ {
285
+ &quot;nodes&quot;:[
286
+ {
287
+ &quot;nodes&quot;:[
288
+ {
289
+ &quot;prefix&quot;:&quot;👇 Selected parent element&quot;,
290
+ &quot;suffix&quot;:&quot;☝️ End of selected parent element&quot;,
291
+ &quot;tagName&quot;:&quot;span&quot;
292
+ },
293
+ {
294
+ &quot;parentElementSelector&quot;:&quot;span&quot;,
295
+ &quot;innerHTML&quot;:&quot;Content having a parentElementSelector attribute&quot;
296
+ }
297
+ ]
298
+ }
299
+ ]
300
+ }
301
+ &#39;&gt;&lt;/sonic-sdui&gt;
302
+ </code></pre>
303
+ <h3 id="fetch-example">Fetch example:</h3>
304
+ <pre><code>&lt;sonic-sdui dataProvider=&quot;sdui-fetch-example&quot; endPoint=&quot;/src/core/components/functional/sdui/example.json&quot;&gt;&lt;/sonic-sdui&gt;
305
+ </code></pre>
306
+ <h2 id="transformers">Transformers:</h2>
307
+ <p>The transformers let you transform the structure of the SDUI Descriptor into a new one before parsing and rendering it.</p>
308
+ <p>To enable it, you must fill the <code>transformation</code> attribute of the component with a URL pointing to a Transform descriptor.</p>
309
+ <pre><code class="language-typescript">export type SDUITransformDescription = {
310
+ library?: Record&amp;lt;string, SDUINode&amp;gt;;
311
+ transforms: Array&amp;lt;SDUITransformAction&amp;gt;;
312
+ };
313
+ </code></pre>
314
+ <h3 id="the-library">The library:</h3>
315
+ <p>Each key of the library will be merged with the current library in the SDUI Descriptor, by replacing or creating items library key by key.</p>
316
+ <h3 id="the-transform-actions">The transform actions:</h3>
317
+ <p>Each transform represents an action that will be done on the SDUI descriptor before the creation of the entire UI.</p>
318
+ <pre><code class="language-typescript">export type SDUITransformAction = {
319
+ action: SDUITransformActionName;
320
+ patterns?: Array&amp;lt;SDUINode&amp;gt;;
321
+ after?: SDUINode;
322
+ before?: SDUINode;
323
+ in?: SDUINode;
324
+ ui?: SDUINode;
325
+ };
326
+ </code></pre>
327
+ <p>The action that will be done is a verb:</p>
328
+ <pre><code class="language-typescript">export type SDUITransformActionName = &quot;remap&quot; | &quot;unwrap&quot; | &quot;wrap&quot; | &quot;delete&quot; | &quot;insert&quot; | &quot;move&quot;;
329
+ </code></pre>
330
+ <ul>
331
+ <li><strong>remap</strong>: The properties (tagName, innerHTML, etc.) of the targeted SDUINode will be created/changed according to their presence in the <code>ui</code> (SDUINode) property of the transformAction.</li>
332
+ <li><strong>unwrap</strong>: Replaces the targeted SDUINode in place with its children.</li>
333
+ <li><strong>wrap</strong>: Groups all SDUINodes targeted by the patterns into the new SDUINode described in the <code>ui</code> prop of the transformAction.</li>
334
+ <li><strong>delete</strong>: Deletes the targeted item.</li>
335
+ <li><strong>insert</strong>: Inserts a new SDUINode described by the <code>ui</code> prop into the flow. The position of insertion depends on the presence of the attributes <code>before</code>, <code>after</code>, <code>in</code>, which is a pattern to target an existing SDUINode.</li>
336
+ </ul>
337
+ <h2 id="misc-tricks">Misc Tricks:</h2>
338
+ <h3 id="sduikey">sduiKey</h3>
339
+ <p>This is an HTML attribute to set on the component if needed. In this case, the component will not treat its props value directly as an SDUI descriptor. Internally, it will basically extract the SDUIDescriptor by doing something like this: <code>const sduiDescriptor = this.props[this.sduikey]</code>.</p>
340
+ <h3 id="messagekey">messageKey</h3>
341
+ <p>This is an HTML attribute to set on the component if needed. In this case, the component will automatically create a <code>sonic-toast-message-subscriber</code> component. The data found in <code>props[messageKey]</code> will be treated as the data expected by the <code>sonic-toast-message-subscriber</code>. So, by respecting the format of data supported by this component, you will be able to show multiple toasts in the result of a request.</p>
342
+ <p>Example of JSON with <code>messageKey</code>=<code>messages</code>:</p>
343
+ <pre><code class="language-typescript">{
344
+ &quot;messages&quot;: [{
345
+ &quot;content&quot;: &quot;The product has been added to your cart&quot;,
346
+ &quot;status&quot;: &quot;success&quot;,
347
+ &quot;type&quot;: &quot;public&quot;
348
+ }]
349
+ }
350
+ </code></pre>
351
+ <h3 id="library">library</h3>
352
+ <p>This is an HTML attribute to set on the component if needed. You can set a URL pointing to a JSON describing a library with the same structure as the library in the SDUIDescriptor. The component will simply override its library with the given one.</p>
353
+ <h2 id="playground">Playground</h2>
354
+ <p>Here is a little playground to let you test some simple tricks.</p>
355
+ <pre><code>&lt;sonic-textarea
356
+ rows=&quot;10&quot;
357
+ onChange=&quot;SonicPublisherManager.get(&#39;sdui-playground&#39;).set(JSON.parse(this.value))&quot;
358
+ value=&#39;{&quot;nodes&quot;:[{&quot;tagName&quot;:&quot;div&quot;, &quot;innerHTML&quot;:&quot;test&quot;}]}&#39;
359
+ &gt;
360
+ &lt;/sonic-textarea&gt;
361
+ &lt;sonic-sdui dataProvider=&quot;sdui-playground&quot; props=&#39;{&quot;nodes&quot;:[{&quot;tagName&quot;:&quot;div&quot;, &quot;innerHTML&quot;:&quot;test&quot;}]}&#39;&gt;
362
+ &lt;/sonic-sdui&gt;
363
+ </code></pre>
364
+
365
+ </article>
366
+ </main>
367
+ </body>
368
+ </html>
package/docs/crawl/core/components/functional/states/states.html ADDED
@@ -0,0 +1,66 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/functional/states/states.html" data-doc-id="core/components/functional/states/states">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>States — Concorde</title>
7
+ <meta name="description" content="* It loops over its child templates and tests if the regexp contained in the *data-value* attribute matches the value of the property">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/functional/states/states, states, States, functional component, sonic-states, web component">
9
+ <meta name="concorde-doc-id" content="core/components/functional/states/states">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/functional/states/states.html">
11
+ </head>
12
+ <body>
13
+ <header>
14
+ <p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/functional/states/states.md/states" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde functional component — States</strong>. * It loops over its child templates and tests if the regexp contained in the *data-value* attribute matches the value of the property <span>Doc ID: <code>core/components/functional/states/states</code>. Keywords: Concorde, supersoniks, core/components/functional/states/states, states, States, functional component, sonic-states, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/functional/states/states.html">https://concorde.supersoniks.org/crawl/core/components/functional/states/states.html</a>.</span></p>
19
+ <h1 id="states">States</h1>
20
+ <h3 id="sonic-states-displays-different-states-depending-on-the-value-of-a-sub-property-of-its-dataprovider-data-path-attribute-in-dot-notation">sonic-states displays different states depending on the value of a sub-property of its dataProvider (data-path attribute in dot notation):</h3>
21
+ <ul>
22
+ <li>It loops over its child templates and tests if the regexp contained in the <em>data-value</em> attribute matches the value of the property</li>
23
+ <li>If so, the content of the corresponding template is displayed as a state.</li>
24
+ <li>If the attribute dataProviderExpression is provided the content is surrounded by a div:</li>
25
+ <li>The &quot;dataProvider&quot; attribute of this div is the result of calling the replace function on the property value with the regexp and dataproviderExpression as parameters.</li>
26
+ <li>The subscribers/fetch... of the template will refer to this dataProvider</li>
27
+ <li>You can also use url-pattern expressions for the route parameters, see the examples</li>
28
+ <li> <strong>Examples</strong></li>
29
+ <li>With ma.property= 2 :</li>
30
+ <li>RegExp data-value = (\d+) and dataproviderExpression = /user/$1 the dataProvider attribute will be &quot;/user/2&quot;</li>
31
+ <li>url-pattern data-value = :id and dataproviderExpression = /user/:id the dataProvider attribute will be &quot;/user/2</li>
32
+ </ul>
33
+ <h2 id="basic">Basic</h2>
34
+ <pre><code>&lt;div class=&quot;flex gap-2 items-center&quot; formDataProvider=&quot;states-basic-example&quot;&gt;
35
+ &lt;sonic-button radio name=&quot;selection&quot; value=&quot;#home&quot; checked size=&quot;xs&quot;&gt;Home&lt;/sonic-button&gt;
36
+ &lt;sonic-button radio name=&quot;selection&quot; value=&quot;#about&quot; size=&quot;xs&quot;&gt;About&lt;/sonic-button&gt;
37
+ &lt;sonic-button radio name=&quot;selection&quot; value=&quot;#work&quot; size=&quot;xs&quot;&gt;Work&lt;/sonic-button&gt;
38
+ &lt;sonic-button radio name=&quot;selection&quot; value=&quot;#contact&quot; size=&quot;xs&quot;&gt;Contact&lt;/sonic-button&gt;
39
+ &lt;/div&gt;
40
+ &lt;div class=&quot;text-center text-neutral-700 border rounded text-4xl my-6 p-3 &quot;&gt;
41
+ &lt;sonic-states dataProvider=&quot;states-basic-example&quot; data-path=&quot;selection&quot;&gt;
42
+ &lt;template data-value=&quot;#home&quot;&gt;Home
43
+ </code></pre>
44
+ <h2 id="regexp">Regexp</h2>
45
+ <p>When using <strong>capturing groups ()</strong> the stored values are accessible via the <strong>dataProviderExpression</strong><br><strong>e.g.</strong>, data-value=&quot;#couleur_<b class="text-danger">(\d+)</b>&quot; =&gt; dataProviderExpression=&quot;api/unknown/<b class="text-danger">$1</b>&quot;</p>
46
+ <pre><code>&lt;div serviceURL=&quot;/docs-mock-api&quot;&gt;
47
+ &lt;sonic-list formDataProvider=&quot;states-regexp-example&quot; fetch dataProvider=&quot;api/unknown&quot; key=&quot;data&quot; class=&quot;flex gap-2 items-center&quot; &gt;
48
+ &lt;template&gt;
49
+ &lt;sonic-button radio size=&quot;xs&quot; name=&quot;selection&quot; data-bind ::value=&quot;#couleur_$id&quot;&gt;
50
+ &lt;span data-bind ::inner-html=&quot;ucFirst|$name&quot;&gt;&lt;/span&gt;
51
+ &lt;/sonic-button&gt;
52
+ </code></pre>
53
+ <h2 id="url-pattern">Url-pattern</h2>
54
+ <p>Same as RegExp but using <a href="https://www.npmjs.com/package/url-pattern" target="_blank">url patterns</a><br><strong>e.g.</strong>, data-value=&quot;#couleur_<b class="text-danger">:id</b>&quot; =&gt; dataProviderExpression=&quot;api/unknown/<b class="text-danger">:id</b>&quot;</p>
55
+ <pre><code>&lt;div serviceURL=&quot;/docs-mock-api&quot;&gt;
56
+ &lt;sonic-list formDataProvider=&quot;states-regexp-example&quot; fetch dataProvider=&quot;api/unknown&quot; key=&quot;data&quot; class=&quot;flex gap-2 items-center&quot; &gt;
57
+ &lt;template&gt;
58
+ &lt;sonic-button radio size=&quot;xs&quot; name=&quot;selection&quot; data-bind ::value=&quot;#couleur_$id&quot;&gt;
59
+ &lt;span data-bind ::inner-html=&quot;ucFirst|$name&quot;&gt;&lt;/span&gt;
60
+ &lt;/sonic-button&gt;
61
+ </code></pre>
62
+
63
+ </article>
64
+ </main>
65
+ </body>
66
+ </html>
package/docs/crawl/core/components/functional/submit/submit.html ADDED
@@ -0,0 +1,160 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/functional/submit/submit.html" data-doc-id="core/components/functional/submit/submit">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Submit — Concorde</title>
7
+ <meta name="description" content="&gt; Live demos: &lt;docs-lit-demo&gt; + src/docs/example/docs-submit-demos.ts. Use Local API demos (serviceURL=&quot;/docs-mock-api&quot;).">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/functional/submit/submit, submit, Submit, functional component, sonic-submit, web component, , src/docs/example/docs-submit-demos.ts, serviceURL=&quot;/docs-mock-api&quot;, serviceURL, dataProvider, endPoint, onClick, onEnterKey, formDataProvider, sonic-input">
9
+ <meta name="concorde-doc-id" content="core/components/functional/submit/submit">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/functional/submit/submit.html">
11
+ </head>
12
+ <body>
13
+ <header>
14
+ <p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/functional/submit/submit.md/submit" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde functional component — Submit</strong>. &gt; Live demos: &lt;docs-lit-demo&gt; + src/docs/example/docs-submit-demos.ts. Use Local API demos (serviceURL=&quot;/docs-mock-api&quot;). <span>Doc ID: <code>core/components/functional/submit/submit</code>. Keywords: Concorde, supersoniks, core/components/functional/submit/submit, submit, Submit, functional component, sonic-submit, web component, , src/docs/example/docs-submit-demos.ts, serviceURL=&quot;/docs-mock-api&quot;, serviceURL, dataProvider, endPoint, onClick, onEnterKey, formDataProvider, sonic-input. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/functional/submit/submit.html">https://concorde.supersoniks.org/crawl/core/components/functional/submit/submit.html</a>.</span></p>
19
+ <h1 id="submit">Submit</h1>
20
+ <blockquote>
21
+ <p><strong>Live demos:</strong> <code>&lt;docs-lit-demo&gt;</code> + <code>src/docs/example/docs-submit-demos.ts</code>. Use <a href="../../../../docs/_misc/docs-mock-api.html#docs-mock-api">Local API demos</a> (<code>serviceURL=&quot;/docs-mock-api&quot;</code>).</p>
22
+ </blockquote>
23
+ <h2 id="overview">Overview</h2>
24
+ <p><strong>sonic-submit</strong> sends the <strong>formDataProvider</strong> publisher to a REST endpoint (same configuration model as <a href="../fetch/fetch.html#fetch">fetch</a>: <code>serviceURL</code> on an ancestor, path via <code>dataProvider</code> or <code>endPoint</code>).</p>
25
+ <table>
26
+ <thead>
27
+ <tr>
28
+ <th>Trigger</th>
29
+ <th>Attribute</th>
30
+ </tr>
31
+ </thead>
32
+ <tbody><tr>
33
+ <td>Click inside the slot</td>
34
+ <td><code>onClick</code></td>
35
+ </tr>
36
+ <tr>
37
+ <td>Enter in a focused field inside the slot</td>
38
+ <td><code>onEnterKey</code></td>
39
+ </tr>
40
+ </tbody></table>
41
+ <table>
42
+ <thead>
43
+ <tr>
44
+ <th>Data / API</th>
45
+ <th>Attribute / property</th>
46
+ <th>Notes</th>
47
+ </tr>
48
+ </thead>
49
+ <tbody><tr>
50
+ <td>Form fields</td>
51
+ <td><code>formDataProvider</code> on ancestor</td>
52
+ <td>Filled by <code>sonic-input</code>, <code>sonic-select</code>, etc. via <code>name</code></td>
53
+ </tr>
54
+ <tr>
55
+ <td>Result after call</td>
56
+ <td><code>submitResultDataProvider</code> on ancestor</td>
57
+ <td>Whole result object (after optional <code>submit-result-key</code>)</td>
58
+ </tr>
59
+ <tr>
60
+ <td>Slice of JSON result</td>
61
+ <td><code>submit-result-key</code> on <strong>sonic-submit</strong></td>
62
+ <td>Dot path, e.g. <code>data</code> when the API returns <code>{ data: { … } }</code></td>
63
+ </tr>
64
+ <tr>
65
+ <td>HTTP verb</td>
66
+ <td><code>method</code> on <strong>sonic-submit</strong></td>
67
+ <td><code>post</code> (default), <code>put</code>, <code>patch</code>, <code>delete</code>, <code>get</code> — not inherited from <code>sonic-scope</code></td>
68
+ </tr>
69
+ <tr>
70
+ <td>Path override</td>
71
+ <td><code>endPoint</code> on <strong>sonic-submit</strong></td>
72
+ <td>Wins over ancestor <code>dataProvider</code></td>
73
+ </tr>
74
+ <tr>
75
+ <td>JSON vs multipart</td>
76
+ <td><code>sendAsFormData</code> on <strong>sonic-submit</strong></td>
77
+ <td><code>FormData</code> body, still expects JSON response</td>
78
+ </tr>
79
+ <tr>
80
+ <td>Reset publishers</td>
81
+ <td><code>clearedDataOnSuccess</code> on ancestor</td>
82
+ <td>Space-separated <code>DataProviderKey.path</code> values; runs when a <strong>result object</strong> is returned (including error payloads with <code>messages</code>)</td>
83
+ </tr>
84
+ <tr>
85
+ <td>Browser form POST</td>
86
+ <td><code>native</code> on <strong>sonic-submit</strong></td>
87
+ <td>See <a href="#native-html-form">Native HTML form</a></td>
88
+ </tr>
89
+ <tr>
90
+ <td>Result event</td>
91
+ <td>—</td>
92
+ <td>Bubbles <code>submit</code> <code>CustomEvent</code> with <code>detail</code> = result</td>
93
+ </tr>
94
+ <tr>
95
+ <td>Credential Management API</td>
96
+ <td><code>usernameKey</code>, <code>passwordKey</code> on <strong>sonic-submit</strong></td>
97
+ <td>After a <strong>successful</strong> HTTP response, stores login if those keys exist in the payload (defaults: <code>username</code>, <code>password</code>)</td>
98
+ </tr>
99
+ <tr>
100
+ <td>ALTCHA / captcha</td>
101
+ <td><code>needsCaptchaValidation</code> on form/header publisher</td>
102
+ <td>Defers send until token is set — see <a href="../../ui/captcha/captcha.html#captcha">Captcha</a></td>
103
+ </tr>
104
+ </tbody></table>
105
+ <p>While a REST submit runs, the slot is wrapped with <code>data-disabled</code> (faded, no pointer events). With <strong><code>native</code></strong>, validation and loader still run, then the browser performs a normal form submission.</p>
106
+ <h2 id="form-and-result-handling">Form and result handling</h2>
107
+ <p>POST to mock <code>api/register</code>; result publisher <code>submit-example-result</code>.</p>
108
+ <p><docs-lit-demo for="docs-submit-demo"></docs-lit-demo></p>
109
+ <h2 id="native-html-form">Native HTML form</h2>
110
+ <p>With <strong><code>native</code></strong>, Concorde does <strong>not</strong> call <code>fetch</code>. After form validation it:</p>
111
+ <ol>
112
+ <li>Copies <strong>formDataProvider</strong> values into matching <code>&lt;input&gt;</code> / <code>&lt;select&gt;</code> / <code>&lt;textarea&gt;</code> inside the closest <strong><code>&lt;form&gt;</code></strong> (creates hidden inputs if needed).</li>
113
+ <li>Programmatically clicks a hidden native <code>type=&quot;submit&quot;</code> control (<code>name</code> / <code>value</code> on <strong>sonic-submit</strong> if you need them).</li>
114
+ </ol>
115
+ <p>Use a real <code>&lt;form action=&quot;…&quot; method=&quot;post&quot;&gt;</code> ancestor. For SPAs, a named <strong><code>target</code></strong> (e.g. iframe) avoids leaving the doc page.</p>
116
+ <p><docs-lit-demo for="docs-submit-native-demo"></docs-lit-demo></p>
117
+ <h2 id="sendasformdata">sendAsFormData</h2>
118
+ <p>Sends fields as <strong><code>multipart/form-data</code></strong> instead of <code>application/json</code> (response is still parsed as JSON).</p>
119
+ <p><docs-lit-demo for="docs-submit-formdata-demo"></docs-lit-demo></p>
120
+ <h2 id="submit-result-key">submit-result-key</h2>
121
+ <p>When the API wraps the payload (e.g. <code>{ data: { id, token } }</code>), set <strong><code>submit-result-key=&quot;data&quot;</code></strong> on <strong>sonic-submit</strong> so <strong>submitResultDataProvider</strong> receives only the inner object.</p>
122
+ <p><docs-lit-demo for="docs-submit-result-key-demo"></docs-lit-demo></p>
123
+ <p>Mock endpoint: <code>POST /docs-mock-api/api/register/nested</code>.</p>
124
+ <h2 id="cleareddataonsuccess">clearedDataOnSuccess</h2>
125
+ <p>Lists one or more publisher ids (space-separated). After the API returns a result object, each is set to <code>{}</code> — useful to reset the form publisher.</p>
126
+ <p><docs-lit-demo for="docs-submit-clear-demo"></docs-lit-demo></p>
127
+ <h2 id="custom-submit-event">Custom <code>submit</code> event</h2>
128
+ <p>Listen for the bubbling <strong><code>submit</code></strong> event; <strong><code>event.detail</code></strong> is the same result written to <strong>submitResultDataProvider</strong> (if configured).</p>
129
+ <p><docs-lit-demo for="docs-submit-event-demo"></docs-lit-demo></p>
130
+ <h2 id="endpoint-vs-dataprovider">endPoint vs dataProvider</h2>
131
+ <p>Ancestor <strong><code>dataProvider</code></strong> is the default path; <strong><code>endPoint</code></strong> on <strong>sonic-submit</strong> overrides it for that button only.</p>
132
+ <p><docs-lit-demo for="docs-submit-endpoint-demo"></docs-lit-demo></p>
133
+ <h2 id="methodget">method=&quot;get&quot;</h2>
134
+ <p>Appends publisher fields as a query string on the endpoint, then performs a GET. The mock route <code>api/register/echo</code> returns the query for inspection.</p>
135
+ <p><docs-lit-demo for="docs-submit-get-demo"></docs-lit-demo></p>
136
+ <h2 id="dot-notation-formdataprovider-shape">dot notation (formDataProvider shape)</h2>
137
+ <p>You can use dot notation in <strong><code>name</code></strong> on form controls; the publisher stores nested objects:</p>
138
+ <pre><code>&lt;sonic-scope formDataProvider=&quot;submit-example-dot-notation&quot;&gt;
139
+ &lt;div class=&quot;grid grid-cols-2 gap-4 mb-4 &quot;&gt;
140
+ &lt;sonic-input required name=&quot;email.value&quot; type=&quot;email&quot; value=&quot;eve.holt@reqres.in&quot;&gt;&lt;/sonic-input&gt;
141
+ &lt;sonic-input required type=&quot;password&quot; name=&quot;details.password.value&quot; value=&quot;pistol&quot;&gt;&lt;/sonic-input&gt;
142
+ &lt;/div&gt;
143
+ &lt;/sonic-scope&gt;
144
+ </code></pre>
145
+ <p>Stored shape:</p>
146
+ <pre><code class="language-typescript">{
147
+ email: { value: &quot;eve.holt@reqres.in&quot; },
148
+ details: { password: { value: &quot;pistol&quot; } }
149
+ }
150
+ </code></pre>
151
+ <h2 id="related">Related</h2>
152
+ <ul>
153
+ <li><a href="../../ui/captcha/captcha.html#captcha">Captcha</a> — submit waits for <code>captchaToken</code> when validation is required.</li>
154
+ <li><a href="../../../../docs/_misc/html-integration.html#html-integration">HTML integration</a> — legacy <code>data-bind</code> result blocks; prefer <strong>submitResultDataProvider</strong> + <code>@subscribe</code> in Lit demos.</li>
155
+ </ul>
156
+
157
+ </article>
158
+ </main>
159
+ </body>
160
+ </html>