@supersoniks/concorde 5.0.5 → 5.1.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 (282) hide show
  1. package/.claude/launch.json +15 -0
  2. package/.claude/vite.http.config.mjs +7 -0
  3. package/.taste-skill/after/desktop-fold.jpg +0 -0
  4. package/.taste-skill/after/desktop-page-01.jpg +0 -0
  5. package/.taste-skill/after/desktop-page-02.jpg +0 -0
  6. package/.taste-skill/after/desktop-page-03.jpg +0 -0
  7. package/.taste-skill/after/mobile-fold.jpg +0 -0
  8. package/.taste-skill/after/mobile-page-01.jpg +0 -0
  9. package/.taste-skill/after/report.json +4103 -0
  10. package/.taste-skill/after/tablet-fold.jpg +0 -0
  11. package/.taste-skill/after/tablet-page-01.jpg +0 -0
  12. package/.taste-skill/after/tablet-page-02.jpg +0 -0
  13. package/.taste-skill/before/desktop-fold.jpg +0 -0
  14. package/.taste-skill/before/desktop-page-01.jpg +0 -0
  15. package/.taste-skill/before/desktop-page-02.jpg +0 -0
  16. package/.taste-skill/before/mobile-fold.jpg +0 -0
  17. package/.taste-skill/before/mobile-page-01.jpg +0 -0
  18. package/.taste-skill/before/report.json +2556 -0
  19. package/.taste-skill/before/tablet-fold.jpg +0 -0
  20. package/.taste-skill/before/tablet-page-01.jpg +0 -0
  21. package/.taste-skill/direction.json +510 -0
  22. package/.taste-skill/notes.md +84 -0
  23. package/.taste-skill/prod/desktop-fold.jpg +0 -0
  24. package/.taste-skill/prod/desktop-page-01.jpg +0 -0
  25. package/.taste-skill/prod/desktop-page-02.jpg +0 -0
  26. package/.taste-skill/prod/desktop-page-03.jpg +0 -0
  27. package/.taste-skill/prod/mobile-fold.jpg +0 -0
  28. package/.taste-skill/prod/mobile-page-01.jpg +0 -0
  29. package/.taste-skill/prod/mobile-page-02.jpg +0 -0
  30. package/.taste-skill/prod/report.json +1973 -0
  31. package/.taste-skill/prod/tablet-fold.jpg +0 -0
  32. package/.taste-skill/prod/tablet-page-01.jpg +0 -0
  33. package/.taste-skill/prod/tablet-page-02.jpg +0 -0
  34. package/.tmp-cem/custom-elements.json +13705 -0
  35. package/AUDIT.md +228 -0
  36. package/PLAN-AMELIORATION.md +220 -0
  37. package/build-infos.json +1 -1
  38. package/concorde-core.bundle.js +196 -196
  39. package/concorde-core.es.js +3854 -3572
  40. package/custom-elements-manifest.config.mjs +14 -0
  41. package/dist/concorde-core.bundle.js +196 -196
  42. package/dist/concorde-core.es.js +3854 -3572
  43. package/dist/img/archive/concorde-001-2cv.webp +0 -0
  44. package/dist/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  45. package/dist/img/archive/concorde-red-arrows-2002.webm +0 -0
  46. package/dist/img/archive/credits.json +28 -0
  47. package/docs/assets/index-Bb-_LRyY.js +12280 -0
  48. package/docs/index.html +1 -1
  49. package/index.html +27 -63
  50. package/package.json +44 -3
  51. package/public/img/archive/concorde-001-2cv.webp +0 -0
  52. package/public/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  53. package/public/img/archive/concorde-red-arrows-2002.webm +0 -0
  54. package/public/img/archive/credits.json +28 -0
  55. package/scripts/generate-sdui-catalog.mjs +250 -0
  56. package/scripts/generate-sdui-catalog.spec.ts +91 -0
  57. package/scripts/pre-build.mjs +15 -0
  58. package/src/core/components/functional/fetch/fetch.md +2 -2
  59. package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +5 -5
  60. package/src/core/components/functional/sdui/__fixtures__/descriptors.ts +251 -0
  61. package/src/core/components/functional/sdui/__snapshots__/sdui-action.spec.ts.snap +73 -0
  62. package/src/core/components/functional/sdui/__snapshots__/sdui-incremental.spec.ts.snap +50 -0
  63. package/src/core/components/functional/sdui/__snapshots__/sdui-partial.spec.ts.snap +50 -0
  64. package/src/core/components/functional/sdui/__snapshots__/sdui.regression.spec.ts.snap +461 -0
  65. package/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
  66. package/src/core/components/functional/sdui/component-catalog.json +3103 -0
  67. package/src/core/components/functional/sdui/component-catalog.spec.ts +23 -0
  68. package/src/core/components/functional/sdui/sdui-action.spec.ts +99 -0
  69. package/src/core/components/functional/sdui/sdui-dom-snapshot.ts +61 -0
  70. package/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
  71. package/src/core/components/functional/sdui/sdui-incremental.spec.ts +137 -0
  72. package/src/core/components/functional/sdui/sdui-partial.spec.ts +83 -0
  73. package/src/core/components/functional/sdui/sdui-partial.ts +19 -0
  74. package/src/core/components/functional/sdui/sdui-safe.spec.ts +188 -0
  75. package/src/core/components/functional/sdui/sdui-safe.ts +100 -0
  76. package/src/core/components/functional/sdui/sdui.md +122 -0
  77. package/src/core/components/functional/sdui/sdui.regression.spec.ts +64 -0
  78. package/src/core/components/functional/sdui/sdui.ts +442 -34
  79. package/src/core/components/functional/sdui/types.ts +49 -0
  80. package/src/core/components/ui/modal/modal.ts +14 -11
  81. package/src/docs/_getting-started/components.md +5 -0
  82. package/src/docs/_getting-started/theming.md +2 -2
  83. package/src/docs/code.ts +88 -75
  84. package/src/docs/components/docs-demo-sources.ts +16 -8
  85. package/src/docs/components/docs-lit-demo.ts +19 -37
  86. package/src/docs/docs.ts +5 -0
  87. package/src/docs/example/docs-boarding-pass-demo.ts +134 -0
  88. package/src/docs/example/docs-provider-keys.ts +12 -0
  89. package/src/docs/header/header.ts +233 -69
  90. package/src/docs/home/catalog.ts +44 -0
  91. package/src/docs/home/home.ts +513 -0
  92. package/src/docs/home/mach-stage.ts +389 -0
  93. package/src/docs/layout.ts +3 -1
  94. package/src/docs/navigation/components-index.ts +56 -0
  95. package/src/docs/navigation/navigation.ts +240 -232
  96. package/src/docs/navigation/pager.ts +67 -0
  97. package/src/docs/navigation/toc.ts +98 -0
  98. package/src/docs/search/docs-search.json +330 -20
  99. package/src/docs/search/markdown-renderer.ts +11 -3
  100. package/src/docs/shiki/index.ts +109 -0
  101. package/src/docs/tailwind/css/base/scrollbar.css +22 -0
  102. package/src/docs/tailwind/css/base/theme.css +96 -0
  103. package/src/docs/tailwind/css/base/typography.css +4 -0
  104. package/src/docs/tailwind/css/docs/boarding-pass.css +65 -0
  105. package/src/docs/tailwind/css/docs/content.css +32 -0
  106. package/src/docs/tailwind/css/docs/page.css +10 -0
  107. package/src/docs/tailwind/css/docs.css +9 -0
  108. package/src/docs/tailwind/css/home/hero.css +210 -0
  109. package/src/docs/tailwind/css/home/motion.css +84 -0
  110. package/src/docs/tailwind/css/home/sections.css +416 -0
  111. package/src/docs/tailwind/css/tailwind.css +7 -185
  112. package/src/tsconfig.json +113 -2
  113. package/src/tsconfig.tsbuildinfo +1 -1
  114. package/tailwind.config.js +8 -4
  115. package/docs/assets/index-wVZpLVYW.js +0 -12122
  116. package/docs/crawl/core/components/functional/date/date.html +0 -190
  117. package/docs/crawl/core/components/functional/fetch/fetch.html +0 -109
  118. package/docs/crawl/core/components/functional/if/if.html +0 -27
  119. package/docs/crawl/core/components/functional/jsonata/jsonata.html +0 -79
  120. package/docs/crawl/core/components/functional/list/list.html +0 -70
  121. package/docs/crawl/core/components/functional/mix/mix.html +0 -45
  122. package/docs/crawl/core/components/functional/queue/queue.html +0 -96
  123. package/docs/crawl/core/components/functional/router/router.html +0 -106
  124. package/docs/crawl/core/components/functional/sdui/sdui.html +0 -269
  125. package/docs/crawl/core/components/functional/states/states.html +0 -66
  126. package/docs/crawl/core/components/functional/submit/submit.html +0 -160
  127. package/docs/crawl/core/components/functional/subscriber/subscriber.html +0 -67
  128. package/docs/crawl/core/components/functional/value/value.html +0 -51
  129. package/docs/crawl/core/components/ui/alert/alert.html +0 -211
  130. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +0 -131
  131. package/docs/crawl/core/components/ui/badge/badge.html +0 -197
  132. package/docs/crawl/core/components/ui/button/button.html +0 -150
  133. package/docs/crawl/core/components/ui/captcha/captcha.html +0 -112
  134. package/docs/crawl/core/components/ui/card/card.html +0 -253
  135. package/docs/crawl/core/components/ui/divider/divider.html +0 -144
  136. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +0 -73
  137. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +0 -266
  138. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +0 -122
  139. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +0 -121
  140. package/docs/crawl/core/components/ui/form/input/input.html +0 -109
  141. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +0 -38
  142. package/docs/crawl/core/components/ui/form/radio/radio.html +0 -56
  143. package/docs/crawl/core/components/ui/form/select/select.html +0 -73
  144. package/docs/crawl/core/components/ui/form/switch/switch.html +0 -56
  145. package/docs/crawl/core/components/ui/form/textarea/textarea.html +0 -59
  146. package/docs/crawl/core/components/ui/group/group.html +0 -104
  147. package/docs/crawl/core/components/ui/icon/icon.html +0 -222
  148. package/docs/crawl/core/components/ui/image/image.html +0 -298
  149. package/docs/crawl/core/components/ui/link/link.html +0 -100
  150. package/docs/crawl/core/components/ui/loader/loader.html +0 -124
  151. package/docs/crawl/core/components/ui/menu/menu.html +0 -394
  152. package/docs/crawl/core/components/ui/modal/modal.html +0 -342
  153. package/docs/crawl/core/components/ui/pop/pop.html +0 -296
  154. package/docs/crawl/core/components/ui/progress/progress.html +0 -131
  155. package/docs/crawl/core/components/ui/table/table.html +0 -545
  156. package/docs/crawl/core/components/ui/theme/theme.html +0 -131
  157. package/docs/crawl/core/components/ui/toast/toast.html +0 -233
  158. package/docs/crawl/core/components/ui/tooltip/tooltip.html +0 -140
  159. package/docs/crawl/docs/_core-concept/dataFlow.html +0 -177
  160. package/docs/crawl/docs/_core-concept/overview.html +0 -66
  161. package/docs/crawl/docs/_core-concept/subscriber.html +0 -75
  162. package/docs/crawl/docs/_decorators/ancestor-attribute.html +0 -117
  163. package/docs/crawl/docs/_decorators/auto-subscribe.html +0 -202
  164. package/docs/crawl/docs/_decorators/bind.html +0 -141
  165. package/docs/crawl/docs/_decorators/get.html +0 -149
  166. package/docs/crawl/docs/_decorators/handle.html +0 -165
  167. package/docs/crawl/docs/_decorators/on-assign.html +0 -355
  168. package/docs/crawl/docs/_decorators/patch.html +0 -78
  169. package/docs/crawl/docs/_decorators/post.html +0 -139
  170. package/docs/crawl/docs/_decorators/publish.html +0 -61
  171. package/docs/crawl/docs/_decorators/put.html +0 -78
  172. package/docs/crawl/docs/_decorators/subscribe.html +0 -109
  173. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +0 -137
  174. package/docs/crawl/docs/_directives/sub.html +0 -93
  175. package/docs/crawl/docs/_getting-started/ai-agents.html +0 -173
  176. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +0 -100
  177. package/docs/crawl/docs/_getting-started/concorde-outside.html +0 -58
  178. package/docs/crawl/docs/_getting-started/create-a-component.html +0 -111
  179. package/docs/crawl/docs/_getting-started/my-first-component.html +0 -189
  180. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +0 -110
  181. package/docs/crawl/docs/_getting-started/pubsub.html +0 -62
  182. package/docs/crawl/docs/_getting-started/start.html +0 -76
  183. package/docs/crawl/docs/_getting-started/theming.html +0 -333
  184. package/docs/crawl/docs/_misc/api-configuration.html +0 -149
  185. package/docs/crawl/docs/_misc/dataProviderKey.html +0 -135
  186. package/docs/crawl/docs/_misc/docs-mock-api.html +0 -158
  187. package/docs/crawl/docs/_misc/dynamic-path.html +0 -180
  188. package/docs/crawl/docs/_misc/endpoint.html +0 -50
  189. package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +0 -138
  190. package/docs/crawl/docs/_misc/html-integration.html +0 -48
  191. package/docs/crawl/hubs/decorators.html +0 -547
  192. package/docs/crawl/hubs/form-components.html +0 -381
  193. package/docs/crawl/hubs/remote-data.html +0 -452
  194. package/docs/crawl/index.html +0 -102
  195. package/docs/llms-full.txt +0 -7008
  196. package/docs/llms.txt +0 -97
  197. package/docs/sitemap.xml +0 -240
  198. package/docs/src/core/components/functional/date/date.md +0 -290
  199. package/docs/src/core/components/functional/fetch/fetch.md +0 -125
  200. package/docs/src/core/components/functional/if/if.md +0 -9
  201. package/docs/src/core/components/functional/jsonata/jsonata.md +0 -56
  202. package/docs/src/core/components/functional/list/list.md +0 -65
  203. package/docs/src/core/components/functional/mix/mix.md +0 -41
  204. package/docs/src/core/components/functional/queue/queue.md +0 -72
  205. package/docs/src/core/components/functional/router/router.md +0 -94
  206. package/docs/src/core/components/functional/sdui/default-library.json +0 -108
  207. package/docs/src/core/components/functional/sdui/example.json +0 -99
  208. package/docs/src/core/components/functional/sdui/sdui.md +0 -356
  209. package/docs/src/core/components/functional/states/states.md +0 -87
  210. package/docs/src/core/components/functional/submit/submit.md +0 -114
  211. package/docs/src/core/components/functional/subscriber/subscriber.md +0 -91
  212. package/docs/src/core/components/functional/value/value.md +0 -35
  213. package/docs/src/core/components/ui/alert/alert.md +0 -196
  214. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -85
  215. package/docs/src/core/components/ui/badge/badge.md +0 -188
  216. package/docs/src/core/components/ui/button/button.md +0 -183
  217. package/docs/src/core/components/ui/captcha/captcha.md +0 -71
  218. package/docs/src/core/components/ui/card/card.md +0 -215
  219. package/docs/src/core/components/ui/divider/divider.md +0 -129
  220. package/docs/src/core/components/ui/form/checkbox/checkbox.md +0 -77
  221. package/docs/src/core/components/ui/form/fieldset/fieldset.md +0 -205
  222. package/docs/src/core/components/ui/form/form-actions/form-actions.md +0 -100
  223. package/docs/src/core/components/ui/form/form-layout/form-layout.md +0 -119
  224. package/docs/src/core/components/ui/form/input/input.md +0 -142
  225. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
  226. package/docs/src/core/components/ui/form/radio/radio.md +0 -57
  227. package/docs/src/core/components/ui/form/select/select.md +0 -71
  228. package/docs/src/core/components/ui/form/switch/switch.md +0 -57
  229. package/docs/src/core/components/ui/form/textarea/textarea.md +0 -65
  230. package/docs/src/core/components/ui/group/group.md +0 -75
  231. package/docs/src/core/components/ui/icon/icon.md +0 -214
  232. package/docs/src/core/components/ui/icon/icons.json +0 -1
  233. package/docs/src/core/components/ui/image/image.md +0 -233
  234. package/docs/src/core/components/ui/link/link.md +0 -81
  235. package/docs/src/core/components/ui/loader/loader.md +0 -112
  236. package/docs/src/core/components/ui/menu/menu.md +0 -370
  237. package/docs/src/core/components/ui/modal/modal.md +0 -235
  238. package/docs/src/core/components/ui/pop/pop.md +0 -294
  239. package/docs/src/core/components/ui/progress/progress.md +0 -109
  240. package/docs/src/core/components/ui/table/table.md +0 -431
  241. package/docs/src/core/components/ui/theme/theme.md +0 -122
  242. package/docs/src/core/components/ui/toast/toast.md +0 -216
  243. package/docs/src/core/components/ui/tooltip/tooltip.md +0 -124
  244. package/docs/src/docs/_core-concept/dataFlow.md +0 -88
  245. package/docs/src/docs/_core-concept/overview.md +0 -57
  246. package/docs/src/docs/_core-concept/subscriber.md +0 -75
  247. package/docs/src/docs/_decorators/ancestor-attribute.md +0 -128
  248. package/docs/src/docs/_decorators/auto-subscribe.md +0 -202
  249. package/docs/src/docs/_decorators/bind.md +0 -167
  250. package/docs/src/docs/_decorators/get.md +0 -162
  251. package/docs/src/docs/_decorators/handle.md +0 -175
  252. package/docs/src/docs/_decorators/on-assign.md +0 -390
  253. package/docs/src/docs/_decorators/patch.md +0 -70
  254. package/docs/src/docs/_decorators/post.md +0 -146
  255. package/docs/src/docs/_decorators/publish.md +0 -55
  256. package/docs/src/docs/_decorators/put.md +0 -70
  257. package/docs/src/docs/_decorators/subscribe.md +0 -100
  258. package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -163
  259. package/docs/src/docs/_directives/sub.md +0 -91
  260. package/docs/src/docs/_getting-started/ai-agents.md +0 -76
  261. package/docs/src/docs/_getting-started/concorde-manual-install.md +0 -133
  262. package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
  263. package/docs/src/docs/_getting-started/create-a-component.md +0 -139
  264. package/docs/src/docs/_getting-started/my-first-component.md +0 -236
  265. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -120
  266. package/docs/src/docs/_getting-started/pubsub.md +0 -37
  267. package/docs/src/docs/_getting-started/start.md +0 -47
  268. package/docs/src/docs/_getting-started/theming.md +0 -253
  269. package/docs/src/docs/_misc/api-configuration.md +0 -81
  270. package/docs/src/docs/_misc/dataProviderKey.md +0 -168
  271. package/docs/src/docs/_misc/docs-mock-api.md +0 -63
  272. package/docs/src/docs/_misc/dynamic-path.md +0 -71
  273. package/docs/src/docs/_misc/endpoint.md +0 -45
  274. package/docs/src/docs/_misc/formelement-subscriber-removal.md +0 -115
  275. package/docs/src/docs/_misc/html-integration.md +0 -15
  276. package/docs/src/docs/search/docs-search.json +0 -12242
  277. package/docs/src/tag-list.json +0 -1
  278. package/docs/src/tsconfig-model.json +0 -23
  279. package/docs/src/tsconfig.json +0 -1242
  280. package/src/docs/prism/index.ts +0 -6
  281. package/src/docs/prism/prism.css +0 -158
  282. package/src/docs/prism/prism.js +0 -1022
package/docs/crawl/core/components/functional/submit/submit.html DELETED
@@ -1,160 +0,0 @@
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>
package/docs/crawl/core/components/functional/subscriber/subscriber.html DELETED
@@ -1,67 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/functional/subscriber/subscriber.html" data-doc-id="core/components/functional/subscriber/subscriber">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Subscriber — Concorde</title>
7
- <meta name="description" content="La mixin Subscriber permet lier un composant à un publisher.">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/functional/subscriber/subscriber, subscriber, Subscriber, functional component, sonic-subscriber, web component">
9
- <meta name="concorde-doc-id" content="core/components/functional/subscriber/subscriber">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/functional/subscriber/subscriber.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/subscriber/subscriber.md/subscriber" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde functional component — Subscriber</strong>. La mixin Subscriber permet lier un composant à un publisher. <span>Doc ID: <code>core/components/functional/subscriber/subscriber</code>. Keywords: Concorde, supersoniks, core/components/functional/subscriber/subscriber, subscriber, Subscriber, functional component, sonic-subscriber, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/functional/subscriber/subscriber.html">https://concorde.supersoniks.org/crawl/core/components/functional/subscriber/subscriber.html</a>.</span></p>
19
- <h1 id="subscriber">Subscriber</h1>
20
- <p>La mixin Subscriber permet lier un composant à un publisher.
21
- La liaison à un publisher se fait via l&#39;attribut <em>dataProvider</em> du composant qui représente ce que l&#39;on obtient en appellant PublisherManager.get(dataProvider).</p>
22
- <p>Les propriétés du composant sont automatiquement remplies avec les propriétés du même nom dans les données du publisher.</p>
23
- <p>Le composant est automatiquement mis à jour lorsque les données du publisher sont mises à jour.</p>
24
- <h2 id="dataprovider">DataProvider</h2>
25
- <p><strong>Id</strong> of the dataProvider that the component will <strong>subscribe</strong> to</p>
26
- <pre><code>&lt;sonic-subscriber dataProvider=&quot;id_that_the_subsriber_will_subscribe_to&quot; debug&gt;
27
- &lt;sonic-button&gt; custom dataProvider id&lt;/sonic-button&gt;
28
- &lt;/sonic-subscriber&gt;
29
- &lt;sonic-subscriber debug&gt;
30
- &lt;sonic-button&gt; default id : pageHTML&lt;/sonic-button&gt;
31
- &lt;/sonic-subscriber&gt;
32
- </code></pre>
33
- <h2 id="props">Props</h2>
34
- <p>Data object (json) that will be passed to the dataProvider</p>
35
- <pre><code>&lt;sonic-subscriber props=&#39;{&quot;data&quot;:&quot;Hello world&quot;}&#39; debug&gt;
36
- &lt;sonic-button&gt; Hover to see the data&lt;/sonic-button&gt;
37
- &lt;/sonic-subscriber&gt;
38
- </code></pre>
39
- <h2 id="debug">Debug</h2>
40
- <p><strong>Helper</strong>, display the data held by the dataProvider in a floating div</p>
41
- <pre><code>&lt;sonic-subscriber debug&gt;
42
- &lt;sonic-button&gt; see the dataProvider&#39;data &lt;/sonic-button&gt;
43
- &lt;/sonic-subscriber&gt;
44
- </code></pre>
45
- <h2 id="noautofill">NoAutofill</h2>
46
- <p><sonic-alert status="info">Docs coming soon</sonic-alert></p>
47
- <h2 id="propertymap">PropertyMap</h2>
48
- <p><sonic-alert status="info">Docs coming soon</sonic-alert></p>
49
- <p>Permet de mapper un nom de propriété de donnée source vers une propriété du subscriber à la volée</p>
50
- <h2 id="bindpublisher">BindPublisher</h2>
51
- <p><sonic-alert status="info">Docs coming soon</sonic-alert></p>
52
- <p>On peut utiliser cette fonction pour lier un publisher spécifique au composant si besoin.</p>
53
- <h2 id="instancecounter">instanceCounter</h2>
54
- <p><sonic-alert status="info">Docs coming soon</sonic-alert></p>
55
- <h2 id="publisher">Publisher</h2>
56
- <p><sonic-alert status="info">Docs coming soon</sonic-alert></p>
57
- <h2 id="args">Args</h2>
58
- <p><sonic-alert status="info">Docs coming soon</sonic-alert></p>
59
- <h2 id="noshadowdom">NoShadowDom</h2>
60
- <p>Par défaut on crée un shadow dom mais on peut demander à ne pas en avoir via cette propriété et un attribut associé.<br>Cela se fait à l&#39;initialisation uniquement et n&#39;est pas modifiable lors de la vie du composant.</p>
61
- <h2 id="other-attributes-gathered-from-subscriberstoriests">Other attributes gathered from subscriber.stories.ts</h2>
62
- <p>styles ??<br>title ??<br>_props ??<br>onAssign ??<br>defferedDebug ??</p>
63
-
64
- </article>
65
- </main>
66
- </body>
67
- </html>
package/docs/crawl/core/components/functional/value/value.html DELETED
@@ -1,51 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/functional/value/value.html" data-doc-id="core/components/functional/value/value">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Value — Concorde</title>
7
- <meta name="description" content="Simply shows a value from a data provider.">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/functional/value/value, value, Value, functional component, sonic-value, web component">
9
- <meta name="concorde-doc-id" content="core/components/functional/value/value">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/functional/value/value.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/value/value.md/value" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde functional component — Value</strong>. Simply shows a value from a data provider. <span>Doc ID: <code>core/components/functional/value/value</code>. Keywords: Concorde, supersoniks, core/components/functional/value/value, value, Value, functional component, sonic-value, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/functional/value/value.html">https://concorde.supersoniks.org/crawl/core/components/functional/value/value.html</a>.</span></p>
19
- <h1 id="value">Value</h1>
20
- <p>Simply shows a value from a data provider.
21
- You can target sub data value using dot syntax.
22
- The value reacts to changes.</p>
23
- <ul>
24
- <li>Below is a form that helps you to set a value for the field &quot;preference&quot; in the data target with id &quot;value-example&quot;</li>
25
- </ul>
26
- <pre><code>&lt;div formDataProvider=&quot;value-example&quot;&gt;
27
- which one do you prefer ?
28
- &lt;sonic-radio name=&quot;preference&quot; checked value=&quot;dogs&quot;&gt; Dogs&lt;/sonic-radio&gt;
29
- &lt;sonic-radio name=&quot;preference&quot; value=&quot;cats&quot;&gt; Cats&lt;/sonic-radio&gt;
30
- &lt;/div&gt;
31
- </code></pre>
32
- <ul>
33
- <li>Then you can see live value of the preference using this code :</li>
34
- </ul>
35
- <pre><code>I prefer &lt;sonic-value dataProvider=&quot;value-example&quot; key=&quot;preference&quot;&gt;&lt;/sonic-value&gt;
36
- </code></pre>
37
- <ul>
38
- <li>If you have more complex data like this</li>
39
- </ul>
40
- <pre><code>&lt;sonic-subscriber dataProvider=&quot;value-example-2&quot; props=&#39;{&quot;my&quot;:{&quot;complex&quot;:[{&quot;data&quot;:&quot;👋 Hi There&quot;}]}}&#39;&gt;&lt;/sonic-subscriber&gt;
41
- </code></pre>
42
- <ul>
43
- <li>You can target it with the dot syntax</li>
44
- </ul>
45
- <pre><code>&lt;sonic-value dataProvider=&quot;value-example-2&quot; key=&quot;my.complex.0.data&quot;&gt;&lt;/sonic-value&gt;
46
- </code></pre>
47
-
48
- </article>
49
- </main>
50
- </body>
51
- </html>
package/docs/crawl/core/components/ui/alert/alert.html DELETED
@@ -1,211 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/alert/alert.html" data-doc-id="core/components/ui/alert/alert">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Alert — Concorde</title>
7
- <meta name="description" content="Alerts surface important feedback inline—errors, confirmations, or contextual help. Use label / text for simple copy, or the default slot for rich content (links, buttons). Set announce when the messa">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/alert/alert, alert, Alert, UI component, sonic-alert, web component, label, text, announce, status, default, role, aria-live">
9
- <meta name="concorde-doc-id" content="core/components/ui/alert/alert">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/alert/alert.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/alert/alert.md/alert" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Alert</strong>. Alerts surface important feedback inline—errors, confirmations, or contextual help. Use label / text for simple copy, or the default slot for rich content (links, buttons). Set announce when the messa <span>Doc ID: <code>core/components/ui/alert/alert</code>. Keywords: Concorde, supersoniks, core/components/ui/alert/alert, alert, Alert, UI component, sonic-alert, web component, label, text, announce, status, default, role, aria-live. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/alert/alert.html">https://concorde.supersoniks.org/crawl/core/components/ui/alert/alert.html</a>.</span></p>
19
- <h1 id="alert">Alert</h1>
20
- <p>Alerts <strong>surface important feedback</strong> inline—errors, confirmations, or contextual help. Use <strong><code>label</code></strong> / <strong><code>text</code></strong> for simple copy, or the <strong>default slot</strong> for rich content (links, buttons). Set <strong><code>announce</code></strong> when the message appears after an action so screen readers pick it up.</p>
21
- <h2 id="basic-example">Basic example</h2>
22
- <pre><code>&lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; text=&quot;This address is already in use&quot; background&gt;&lt;/sonic-alert&gt;
23
- </code></pre>
24
- <h2 id="status">Status</h2>
25
- <p>Color and icon follow <code>status</code>. With no <code>status</code>, behavior is <code>default</code>.</p>
26
- <pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
27
- &lt;sonic-alert label=&quot;Default&quot;&gt;This address is already in use.&lt;/sonic-alert&gt;
28
- &lt;sonic-alert status=&quot;success&quot; label=&quot;Success&quot;&gt;This address is already in use.&lt;/sonic-alert&gt;
29
- &lt;sonic-alert status=&quot;error&quot; label=&quot;Error&quot;&gt;This address is already in use.&lt;/sonic-alert&gt;
30
- &lt;sonic-alert status=&quot;warning&quot; label=&quot;Warning&quot;&gt;This address is already in use.&lt;/sonic-alert&gt;
31
- &lt;sonic-alert status=&quot;info&quot; label=&quot;Info&quot;&gt;This address is already in use.&lt;/sonic-alert&gt;
32
- &lt;/div&gt;
33
- </code></pre>
34
- <h2 id="accessibility-announce">Accessibility (<code>announce</code>)</h2>
35
- <p>By default, an alert already in the DOM is <strong>not</strong> announced (no <code>role</code> / <code>aria-live</code>). Set <strong><code>announce</code></strong> when the message appears <strong>after</strong> user action (API response, validation, etc.): screen readers get <code>role=&quot;alert&quot;</code> for <code>error</code>, otherwise <code>role=&quot;status&quot;</code> and <code>aria-live=&quot;polite&quot;</code>.</p>
36
- <p><code>sonic-alert-messages</code> sets <code>announce</code> on every rendered alert.</p>
37
- <pre><code>&lt;sonic-alert announce status=&quot;success&quot; label=&quot;Saved&quot; text=&quot;Your changes were saved.&quot;&gt;&lt;/sonic-alert&gt;
38
- </code></pre>
39
- <h2 id="content-and-icon">Content and icon</h2>
40
- <p><code>label</code> and <code>text</code> accept plain text only. The default slot is rendered after <code>text</code>. Use the <strong><code>icon</code></strong> slot to replace the default <code>sonic-icon</code>. <strong><code>noIcon</code></strong> hides the icon.</p>
41
- <pre><code>&lt;sonic-alert status=&quot;info&quot; noIcon label=&quot;No icon&quot; text=&quot;Informational message.&quot;&gt;&lt;/sonic-alert&gt;
42
- </code></pre>
43
- <h2 id="custom-icon-slot">Custom icon slot</h2>
44
- <p>Project any markup into <strong><code>slot=&quot;icon&quot;</code></strong> (emoji, image, custom component). Keep it decorative with <code>aria-hidden=&quot;true&quot;</code> when the message text already conveys meaning.</p>
45
- <pre><code>&lt;sonic-alert status=&quot;success&quot; label=&quot;Achievement unlocked&quot; background&gt;
46
- &lt;span slot=&quot;icon&quot; aria-hidden=&quot;true&quot; class=&quot;text-lg leading-none&quot;&gt;🎉&lt;/span&gt;
47
- You unlocked a new badge.
48
- &lt;/sonic-alert&gt;
49
- </code></pre>
50
- <h2 id="sizes">Sizes</h2>
51
- <pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
52
- &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;2xs&quot;&gt;
53
- This address is already in use. Lorem ipsum dolor sit amet.
54
- &lt;/sonic-alert&gt;
55
- &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;xs&quot;&gt;
56
- This address is already in use. Lorem ipsum dolor sit amet.
57
- &lt;/sonic-alert&gt;
58
- &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;sm&quot;&gt;
59
- This address is already in use. Lorem ipsum dolor sit amet.
60
- &lt;/sonic-alert&gt;
61
- &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot;&gt;
62
- This address is already in use. Lorem ipsum dolor sit amet.
63
- &lt;/sonic-alert&gt;
64
- &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;lg&quot;&gt;
65
- This address is already in use. Lorem ipsum dolor sit amet.
66
- &lt;/sonic-alert&gt;
67
- &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;xl&quot;&gt;
68
- This address is already in use. Lorem ipsum dolor sit amet.
69
- &lt;/sonic-alert&gt;
70
- &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;2xl&quot;&gt;
71
- This address is already in use. Lorem ipsum dolor sit amet.
72
- &lt;/sonic-alert&gt;
73
- &lt;/div&gt;
74
- </code></pre>
75
- <h2 id="alert-with-link">Alert with link</h2>
76
- <p>Rich content in the slot (buttons, links).</p>
77
- <pre><code>&lt;sonic-alert status=&quot;info&quot; label=&quot;New messages !&quot;&gt;
78
- You have 2 unread messages&lt;br /&gt;
79
- &lt;div class=&quot;flex gap-2 mt-1&quot;&gt;
80
- &lt;sonic-button variant=&quot;outline&quot; type=&quot;info&quot; size=&quot;xs&quot;&gt;See messages&lt;/sonic-button&gt;
81
- &lt;sonic-button variant=&quot;ghost&quot; type=&quot;info&quot; size=&quot;xs&quot;&gt;Dismiss&lt;/sonic-button&gt;
82
- &lt;/div&gt;
83
- &lt;/sonic-alert&gt;
84
- </code></pre>
85
- <h2 id="background">Background</h2>
86
- <p>Tinted background from the <code>status</code> color (<code>color-mix</code> on <code>currentColor</code>).</p>
87
- <pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
88
- &lt;sonic-alert background label=&quot;Lorem ipsum dolor&quot;&gt;This address is already in use.&lt;/sonic-alert&gt;
89
- &lt;sonic-alert status=&quot;success&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
90
- This address is already in use.
91
- &lt;/sonic-alert&gt;
92
- &lt;sonic-alert status=&quot;error&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
93
- This address is already in use.
94
- &lt;/sonic-alert&gt;
95
- &lt;sonic-alert status=&quot;warning&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
96
- This address is already in use.
97
- &lt;/sonic-alert&gt;
98
- &lt;sonic-alert status=&quot;info&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
99
- This address is already in use.
100
- &lt;/sonic-alert&gt;
101
- &lt;/div&gt;
102
- </code></pre>
103
- <h2 id="dismissible">Dismissible</h2>
104
- <p><code>dismissible</code> removes the alert from the DOM when the close control is clicked (i18n aria label). <strong><code>dismissible</code></strong> and <strong><code>background</code></strong> are independent: without <code>background</code>, close sits at the end of the row; with <code>background</code>, top-right.</p>
105
- <pre><code>&lt;sonic-alert status=&quot;info&quot; class=&quot;mb-3&quot; dismissible label=&quot;This address is already in use.&quot;&gt;
106
- &lt;/sonic-alert&gt;
107
- &lt;sonic-alert class=&quot;mb-3&quot; dismissible background label=&quot;Lorem ipsum dolor&quot;&gt;
108
- This address is already in use.
109
- &lt;/sonic-alert&gt;
110
- &lt;sonic-alert status=&quot;success&quot; class=&quot;mb-3&quot; dismissible background label=&quot;Lorem ipsum dolor&quot;&gt;
111
- This address is already in use.
112
- &lt;/sonic-alert&gt;
113
- &lt;sonic-alert status=&quot;error&quot; class=&quot;mb-3&quot; dismissible background label=&quot;Lorem ipsum dolor&quot;&gt;
114
- This address is already in use.
115
- &lt;/sonic-alert&gt;
116
- &lt;sonic-alert status=&quot;warning&quot; class=&quot;mb-3&quot; dismissible background label=&quot;Lorem ipsum dolor&quot;&gt;
117
- This address is already in use.
118
- &lt;/sonic-alert&gt;
119
- &lt;sonic-alert status=&quot;info&quot; class=&quot;mb-3&quot; dismissible background label=&quot;Lorem ipsum dolor&quot;&gt;
120
- This address is already in use.
121
- &lt;/sonic-alert&gt;
122
- </code></pre>
123
- <h2 id="dismiss-forever">Dismiss forever</h2>
124
- <p>With <strong><code>dismissForever</code></strong>, dismissal is stored in <code>localStorage</code> (key <code>sonic-alert-dismissed</code>). A stable <strong><code>id</code></strong> on the element is <strong>required</strong>; without <code>id</code>, a warning is logged and nothing is persisted.</p>
125
- <pre><code>&lt;sonic-alert
126
- class=&quot;mb-3&quot;
127
- dismissible
128
- background
129
- dismissForever
130
- label=&quot;Lorem ipsum dolor&quot;
131
- id=&quot;addressUniqueId&quot;
132
- &gt;
133
- This address is already in use.
134
- &lt;/sonic-alert&gt;
135
- </code></pre>
136
- <h2 id="api-reference">API reference</h2>
137
- <table>
138
- <thead>
139
- <tr>
140
- <th>Attribute</th>
141
- <th>Values</th>
142
- <th>Description</th>
143
- </tr>
144
- </thead>
145
- <tbody><tr>
146
- <td><code>status</code></td>
147
- <td><code>default</code> · <code>info</code> · <code>success</code> · <code>warning</code> · <code>error</code></td>
148
- <td>Color and default icon</td>
149
- </tr>
150
- <tr>
151
- <td><code>label</code></td>
152
- <td>string</td>
153
- <td>Title (plain text)</td>
154
- </tr>
155
- <tr>
156
- <td><code>text</code></td>
157
- <td>string</td>
158
- <td>Short body (plain text), rendered before the slot</td>
159
- </tr>
160
- <tr>
161
- <td><code>size</code></td>
162
- <td><code>2xs</code> … <code>2xl</code></td>
163
- <td>Corner radius and typography</td>
164
- </tr>
165
- <tr>
166
- <td><code>background</code></td>
167
- <td>boolean</td>
168
- <td>Tinted background (<code>color-mix</code> on status color)</td>
169
- </tr>
170
- <tr>
171
- <td><code>dismissible</code></td>
172
- <td>boolean</td>
173
- <td>Close control; removes the element from the DOM</td>
174
- </tr>
175
- <tr>
176
- <td><code>dismissForever</code></td>
177
- <td>boolean</td>
178
- <td>Persists dismissal in <code>localStorage</code>; requires <strong><code>id</code></strong></td>
179
- </tr>
180
- <tr>
181
- <td><code>noIcon</code></td>
182
- <td>boolean</td>
183
- <td>Hides the icon (including custom <code>icon</code> slot content)</td>
184
- </tr>
185
- <tr>
186
- <td><code>announce</code></td>
187
- <td>boolean</td>
188
- <td><code>role=&quot;alert&quot;</code> / <code>aria-live</code> for dynamically injected content</td>
189
- </tr>
190
- </tbody></table>
191
- <table>
192
- <thead>
193
- <tr>
194
- <th>Slot</th>
195
- <th>Description</th>
196
- </tr>
197
- </thead>
198
- <tbody><tr>
199
- <td><em>(default)</em></td>
200
- <td>Message body (HTML, actions); rendered after <code>text</code></td>
201
- </tr>
202
- <tr>
203
- <td><code>icon</code></td>
204
- <td>Replaces the default <code>sonic-icon</code></td>
205
- </tr>
206
- </tbody></table>
207
-
208
- </article>
209
- </main>
210
- </body>
211
- </html>