@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
@@ -1,131 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/alert-messages/alert-messages.html" data-doc-id="core/components/ui/alert-messages/alert-messages">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Alert messages — Concorde</title>
7
- <meta name="description" content="sonic-alert-messages renders a vertical stack of sonic-alert items from a messages array on a linked data provider (typical pattern: submitResultDataProvider after a form submit). Only entries with ty">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/alert-messages/alert-messages, alert-messages, Alert messages, UI component, sonic-alert-messages, web component, sonic-alert, messages, submitResultDataProvider, type=&quot;public&quot;, announce, dataProvider, type">
9
- <meta name="concorde-doc-id" content="core/components/ui/alert-messages/alert-messages">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/alert-messages/alert-messages.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-messages/alert-messages.md/alert-messages" 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 messages</strong>. sonic-alert-messages renders a vertical stack of sonic-alert items from a messages array on a linked data provider (typical pattern: submitResultDataProvider after a form submit). Only entries with ty <span>Doc ID: <code>core/components/ui/alert-messages/alert-messages</code>. Keywords: Concorde, supersoniks, core/components/ui/alert-messages/alert-messages, alert-messages, Alert messages, UI component, sonic-alert-messages, web component, sonic-alert, messages, submitResultDataProvider, type=&quot;public&quot;, announce, dataProvider, type. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/alert-messages/alert-messages.html">https://concorde.supersoniks.org/crawl/core/components/ui/alert-messages/alert-messages.html</a>.</span></p>
19
- <h1 id="alert-messages">Alert messages</h1>
20
- <p><strong><code>sonic-alert-messages</code></strong> renders a vertical stack of <strong><code>sonic-alert</code></strong> items from a <strong><code>messages</code></strong> array on a linked <strong>data provider</strong> (typical pattern: <strong><code>submitResultDataProvider</code></strong> after a form submit). Only entries with <strong><code>type=&quot;public&quot;</code></strong> are shown. Each alert gets <strong><code>announce</code></strong> so screen readers pick up feedback after the request.</p>
21
- <h2 id="with-submit-result">With submit result</h2>
22
- <p>Bind <strong><code>dataProvider</code></strong> to the same publisher as <strong><code>submitResultDataProvider</code></strong>. API <strong><code>messages</code></strong> entries need <strong><code>type</code></strong>: <strong><code>public</code></strong>, plus <strong><code>content</code></strong> and optional <strong><code>status</code></strong> (<code>warning</code> · <code>success</code> · <code>error</code> · <code>info</code>).</p>
23
- <pre><code>&lt;sonic-scope
24
- serviceURL=&quot;/docs-mock-api&quot;
25
- formDataProvider=&quot;submit-example&quot;
26
- submitResultDataProvider=&quot;submit-example-result&quot;
27
- &gt;
28
- &lt;sonic-alert-messages dataProvider=&quot;submit-example-result&quot; background class=&quot;mb-4&quot;&gt;&lt;/sonic-alert-messages&gt;
29
- &lt;div class=&quot;grid gap-4 max-w-md&quot;&gt;
30
- &lt;sonic-input name=&quot;email&quot; type=&quot;email&quot; label=&quot;Email&quot; value=&quot;&quot;&gt;&lt;/sonic-input&gt;
31
- &lt;sonic-input name=&quot;password&quot; type=&quot;password&quot; label=&quot;Password&quot; value=&quot;&quot;&gt;&lt;/sonic-input&gt;
32
- &lt;sonic-submit endPoint=&quot;api/register&quot; onClick&gt;
33
- &lt;sonic-button type=&quot;primary&quot;&gt;Submit (empty fields → error messages)&lt;/sonic-button&gt;
34
- &lt;/sonic-submit&gt;
35
- &lt;/div&gt;
36
- &lt;/sonic-scope&gt;
37
- </code></pre>
38
- <h2 id="shared-alert-props">Shared alert props</h2>
39
- <p><strong><code>size</code></strong> · <strong><code>background</code></strong> and <strong><code>noIcon</code></strong> apply to every rendered <strong><code>sonic-alert</code></strong> in the list.</p>
40
- <pre><code>&lt;sonic-button
41
- size=&quot;sm&quot;
42
- variant=&quot;outline&quot;
43
- class=&quot;mb-3&quot;
44
- onclick=&quot;SonicPublisherManager.get(&#39;submit-example-result&#39;).set({ messages: [{ type: &#39;public&#39;, content: &#39;Compact inline feedback without icons.&#39;, status: &#39;info&#39; }] })&quot;
45
- &gt;
46
- Load sample messages
47
- &lt;/sonic-button&gt;
48
- &lt;sonic-alert-messages
49
- dataProvider=&quot;submit-example-result&quot;
50
- size=&quot;sm&quot;
51
- background
52
- noIcon
53
- &gt;&lt;/sonic-alert-messages&gt;
54
- </code></pre>
55
- <h2 id="message-shape">Message shape</h2>
56
- <p>Example JSON on the result publisher (or API response merged into it):</p>
57
- <pre><code class="language-typescript">{
58
- &quot;messages&quot;: [
59
- {
60
- &quot;type&quot;: &quot;public&quot;,
61
- &quot;content&quot;: &quot;The product has been added to your cart&quot;,
62
- &quot;status&quot;: &quot;success&quot;
63
- }
64
- ]
65
- }
66
- </code></pre>
67
- <h2 id="api-reference">API reference</h2>
68
- <table>
69
- <thead>
70
- <tr>
71
- <th>Attribute</th>
72
- <th>Values</th>
73
- <th>Description</th>
74
- </tr>
75
- </thead>
76
- <tbody><tr>
77
- <td><code>dataProvider</code></td>
78
- <td>publisher id</td>
79
- <td>Source object; <strong><code>messages</code></strong> array is auto-filled via <strong>Subscriber</strong></td>
80
- </tr>
81
- <tr>
82
- <td><code>size</code></td>
83
- <td><code>2xs</code> … <code>2xl</code> (default <code>md</code>)</td>
84
- <td>Passed to each <strong><code>sonic-alert</code></strong></td>
85
- </tr>
86
- <tr>
87
- <td><code>background</code></td>
88
- <td>boolean</td>
89
- <td>Tinted background on each alert</td>
90
- </tr>
91
- <tr>
92
- <td><code>noIcon</code></td>
93
- <td>boolean</td>
94
- <td>Hides icons on each alert</td>
95
- </tr>
96
- <tr>
97
- <td><code>messages</code></td>
98
- <td><code>Message[]</code></td>
99
- <td>Usually set by the publisher; each item uses <strong><code>content</code></strong> as alert <strong><code>text</code></strong></td>
100
- </tr>
101
- </tbody></table>
102
- <table>
103
- <thead>
104
- <tr>
105
- <th>Message field</th>
106
- <th>Values</th>
107
- <th>Description</th>
108
- </tr>
109
- </thead>
110
- <tbody><tr>
111
- <td><code>type</code></td>
112
- <td><code>public</code></td>
113
- <td>Required for the message to render</td>
114
- </tr>
115
- <tr>
116
- <td><code>content</code></td>
117
- <td>string</td>
118
- <td>Alert body (<strong><code>text</code></strong> on <strong><code>sonic-alert</code></strong>)</td>
119
- </tr>
120
- <tr>
121
- <td><code>status</code></td>
122
- <td><code>warning</code> · <code>success</code> · <code>error</code> · <code>info</code></td>
123
- <td>Alert <strong><code>status</code></strong>; defaults to <strong><code>default</code></strong> when omitted</td>
124
- </tr>
125
- </tbody></table>
126
- <p>No slots — alerts are generated from <strong><code>messages</code></strong>.</p>
127
-
128
- </article>
129
- </main>
130
- </body>
131
- </html>
@@ -1,197 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/badge/badge.html" data-doc-id="core/components/ui/badge/badge">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Badge — Concorde</title>
7
- <meta name="description" content="Badges are compact, non-interactive labels for status, counts, or categories. They mirror sonic-button styling (type, variant, size) without focus rings or click handling—use a button when the control">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/badge/badge, badge, Badge, UI component, sonic-badge, web component, sonic-button, type, variant, size, default, base-100, neutral, base-content, outline">
9
- <meta name="concorde-doc-id" content="core/components/ui/badge/badge">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/badge/badge.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/badge/badge.md/badge" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Badge</strong>. Badges are compact, non-interactive labels for status, counts, or categories. They mirror sonic-button styling (type, variant, size) without focus rings or click handling—use a button when the control <span>Doc ID: <code>core/components/ui/badge/badge</code>. Keywords: Concorde, supersoniks, core/components/ui/badge/badge, badge, Badge, UI component, sonic-badge, web component, sonic-button, type, variant, size, default, base-100, neutral, base-content, outline. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/badge/badge.html">https://concorde.supersoniks.org/crawl/core/components/ui/badge/badge.html</a>.</span></p>
19
- <h1 id="badge">Badge</h1>
20
- <p>Badges are <strong>compact, non-interactive</strong> labels for status, counts, or categories. They mirror <strong><code>sonic-button</code></strong> styling (<code>type</code>, <code>variant</code>, <code>size</code>) without focus rings or click handling—use a button when the control should be actionable.</p>
21
- <h2 id="type">Type</h2>
22
- <p><code>default</code> — subtle background (<code>base-100</code>). <code>neutral</code> — dark fill (<code>base-content</code>) with light text, useful on light backgrounds.</p>
23
- <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
24
- &lt;sonic-badge&gt;Default&lt;/sonic-badge&gt;
25
- &lt;sonic-badge type=&quot;primary&quot;&gt;Primary&lt;/sonic-badge&gt;
26
- &lt;sonic-badge type=&quot;neutral&quot;&gt;Neutral&lt;/sonic-badge&gt;
27
- &lt;sonic-badge type=&quot;warning&quot;&gt;Warning&lt;/sonic-badge&gt;
28
- &lt;sonic-badge type=&quot;info&quot;&gt;Info&lt;/sonic-badge&gt;
29
- &lt;sonic-badge type=&quot;success&quot;&gt;Success&lt;/sonic-badge&gt;
30
- &lt;sonic-badge type=&quot;danger&quot;&gt;Danger&lt;/sonic-badge&gt;
31
- &lt;/div&gt;
32
- </code></pre>
33
- <h2 id="variant">Variant</h2>
34
- <p>Default <strong><code>variant</code></strong> is filled. <strong><code>outline</code></strong> — border and text in the <code>type</code> color. <strong><code>ghost</code></strong> — text only, no padding (except in forced-colors mode).</p>
35
- <h3 id="outline">Outline</h3>
36
- <pre><code>&lt;div class=&quot;flex items-center flex-wrap gap-3&quot;&gt;
37
- &lt;sonic-badge variant=&quot;outline&quot;&gt;Default&lt;/sonic-badge&gt;
38
- &lt;sonic-badge variant=&quot;outline&quot; type=&quot;primary&quot;&gt;Primary&lt;/sonic-badge&gt;
39
- &lt;sonic-badge variant=&quot;outline&quot; type=&quot;neutral&quot;&gt;Neutral&lt;/sonic-badge&gt;
40
- &lt;sonic-badge variant=&quot;outline&quot; type=&quot;warning&quot;&gt;Warning&lt;/sonic-badge&gt;
41
- &lt;sonic-badge variant=&quot;outline&quot; type=&quot;info&quot;&gt;Info&lt;/sonic-badge&gt;
42
- &lt;sonic-badge variant=&quot;outline&quot; type=&quot;success&quot;&gt;Success&lt;/sonic-badge&gt;
43
- &lt;sonic-badge variant=&quot;outline&quot; type=&quot;danger&quot;&gt;Danger&lt;/sonic-badge&gt;
44
- &lt;/div&gt;
45
- </code></pre>
46
- <h3 id="ghost">Ghost</h3>
47
- <pre><code>&lt;div class=&quot;flex items-center flex-wrap gap-3&quot;&gt;
48
- &lt;sonic-badge variant=&quot;ghost&quot;&gt;Default&lt;/sonic-badge&gt;
49
- &lt;sonic-badge variant=&quot;ghost&quot; type=&quot;primary&quot;&gt;Primary&lt;/sonic-badge&gt;
50
- &lt;sonic-badge variant=&quot;ghost&quot; type=&quot;neutral&quot;&gt;Neutral&lt;/sonic-badge&gt;
51
- &lt;sonic-badge variant=&quot;ghost&quot; type=&quot;warning&quot;&gt;Warning&lt;/sonic-badge&gt;
52
- &lt;sonic-badge variant=&quot;ghost&quot; type=&quot;info&quot;&gt;Info&lt;/sonic-badge&gt;
53
- &lt;sonic-badge variant=&quot;ghost&quot; type=&quot;success&quot;&gt;Success&lt;/sonic-badge&gt;
54
- &lt;sonic-badge variant=&quot;ghost&quot; type=&quot;danger&quot;&gt;Danger&lt;/sonic-badge&gt;
55
- &lt;/div&gt;
56
- </code></pre>
57
- <h2 id="size">Size</h2>
58
- <p>Default size is <code>md</code> (omit the <code>size</code> attribute). Typography and padding follow <code>sonic-button</code>.</p>
59
- <pre><code>&lt;div class=&quot;flex flex-wrap items-center gap-2&quot;&gt;
60
- &lt;sonic-badge size=&quot;2xs&quot;&gt;2Xs&lt;/sonic-badge&gt;
61
- &lt;sonic-badge size=&quot;xs&quot;&gt;Xs&lt;/sonic-badge&gt;
62
- &lt;sonic-badge size=&quot;sm&quot;&gt;Sm&lt;/sonic-badge&gt;
63
- &lt;sonic-badge&gt;Md&lt;/sonic-badge&gt;
64
- &lt;sonic-badge size=&quot;lg&quot;&gt;Lg&lt;/sonic-badge&gt;
65
- &lt;sonic-badge size=&quot;xl&quot;&gt;Xl&lt;/sonic-badge&gt;
66
- &lt;sonic-badge size=&quot;2xl&quot;&gt;2Xl&lt;/sonic-badge&gt;
67
- &lt;/div&gt;
68
- </code></pre>
69
- <h2 id="prefix-and-suffix-slots">Prefix and suffix slots</h2>
70
- <p>Icons or short text before / after the main label.</p>
71
- <pre><code>&lt;sonic-badge type=&quot;info&quot; size=&quot;sm&quot;&gt;
72
- &lt;sonic-icon slot=&quot;prefix&quot; name=&quot;info-empty&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt;
73
- Info
74
- &lt;/sonic-badge&gt;
75
- &lt;sonic-badge type=&quot;success&quot;&gt;
76
- Verified
77
- &lt;sonic-icon slot=&quot;suffix&quot; name=&quot;check&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt;
78
- &lt;/sonic-badge&gt;
79
- </code></pre>
80
- <h2 id="empty-badges">Empty badges</h2>
81
- <p>Badge with no text (visual dot). <code>min-width</code> / <code>min-height</code> keep a readable shape.</p>
82
- <pre><code>&lt;div class=&quot;flex items-center flex-wrap gap-3&quot;&gt;
83
- &lt;sonic-badge type=&quot;danger&quot; size=&quot;2xs&quot;&gt;&lt;/sonic-badge&gt;
84
- &lt;sonic-badge type=&quot;danger&quot; size=&quot;xs&quot;&gt;&lt;/sonic-badge&gt;
85
- &lt;sonic-badge type=&quot;danger&quot; size=&quot;sm&quot;&gt;&lt;/sonic-badge&gt;
86
- &lt;sonic-badge type=&quot;danger&quot;&gt;&lt;/sonic-badge&gt;
87
- &lt;sonic-badge type=&quot;danger&quot; size=&quot;lg&quot;&gt;&lt;/sonic-badge&gt;
88
- &lt;sonic-badge type=&quot;danger&quot; size=&quot;xl&quot;&gt;&lt;/sonic-badge&gt;
89
- &lt;sonic-badge type=&quot;danger&quot; size=&quot;2xl&quot;&gt;&lt;/sonic-badge&gt;
90
- &lt;/div&gt;
91
- </code></pre>
92
- <h2 id="ellipsis">Ellipsis</h2>
93
- <p>With <code>ellipsis</code>, long labels truncate. The parent must constrain width (<code>max-width</code>, grid, etc.).</p>
94
- <pre><code>&lt;div class=&quot;grid grid-cols-2 gap-4 max-w-xl&quot;&gt;
95
- &lt;sonic-badge ellipsis size=&quot;sm&quot; variant=&quot;outline&quot;&gt;
96
- &lt;sonic-icon slot=&quot;prefix&quot; name=&quot;info-empty&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt;
97
- Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
98
- &lt;/sonic-badge&gt;
99
- &lt;sonic-badge ellipsis size=&quot;sm&quot;&gt;
100
- &lt;sonic-icon slot=&quot;prefix&quot; name=&quot;info-empty&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt;
101
- Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
102
- &lt;/sonic-badge&gt;
103
- &lt;/div&gt;
104
- </code></pre>
105
- <h2 id="badge-in-button">Badge in button</h2>
106
- <p>Count inside a button (<code>slot=&quot;suffix&quot;</code>) or a badge absolutely positioned on a button / icon.</p>
107
- <pre><code>&lt;div class=&quot;flex flex-wrap gap-4 items-center&quot;&gt;
108
- &lt;sonic-button type=&quot;default&quot;&gt;
109
- Messages &lt;sonic-badge slot=&quot;suffix&quot; type=&quot;danger&quot; size=&quot;xs&quot;&gt;5&lt;/sonic-badge&gt;
110
- &lt;/sonic-button&gt;
111
- &lt;div class=&quot;relative inline-block&quot;&gt;
112
- &lt;sonic-button type=&quot;success&quot; class=&quot;relative&quot;&gt;My account&lt;/sonic-button&gt;
113
- &lt;sonic-badge
114
- type=&quot;danger&quot;
115
- size=&quot;xs&quot;
116
- class=&quot;absolute right-1 top-0 pe-none transform -translate-y-1/2&quot;
117
- &gt;12&lt;/sonic-badge
118
- &gt;
119
- &lt;/div&gt;
120
- &lt;div class=&quot;relative inline-block&quot;&gt;
121
- &lt;sonic-button type=&quot;neutral&quot; shape=&quot;circle&quot; variant=&quot;outline&quot;&gt;
122
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
123
- &lt;/sonic-button&gt;
124
- &lt;sonic-badge
125
- type=&quot;danger&quot;
126
- size=&quot;xs&quot;
127
- class=&quot;absolute right-1 bottom-1 pe-none transform translate-y-1/2 translate-x-1/2&quot;
128
- &gt;33&lt;/sonic-badge
129
- &gt;
130
- &lt;/div&gt;
131
- &lt;div class=&quot;relative inline-block&quot;&gt;
132
- &lt;sonic-button type=&quot;neutral&quot; shape=&quot;circle&quot; variant=&quot;outline&quot;&gt;
133
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
134
- &lt;/sonic-button&gt;
135
- &lt;sonic-badge
136
- type=&quot;danger&quot;
137
- size=&quot;xs&quot;
138
- class=&quot;absolute right-2 bottom-2 pe-none transform translate-y-1/2 translate-x-1/2&quot;
139
- &gt;&lt;/sonic-badge&gt;
140
- &lt;/div&gt;
141
- &lt;/div&gt;
142
- </code></pre>
143
- <h2 id="api-reference">API reference</h2>
144
- <table>
145
- <thead>
146
- <tr>
147
- <th>Attribute</th>
148
- <th>Values</th>
149
- <th>Description</th>
150
- </tr>
151
- </thead>
152
- <tbody><tr>
153
- <td><code>type</code></td>
154
- <td><code>default</code> (default) · <code>primary</code> · <code>neutral</code> · <code>warning</code> · <code>info</code> · <code>success</code> · <code>danger</code></td>
155
- <td>Semantic color (<code>--sc-*</code> tokens)</td>
156
- </tr>
157
- <tr>
158
- <td><code>variant</code></td>
159
- <td><code>default</code> (default) · <code>outline</code> · <code>ghost</code></td>
160
- <td>Filled, bordered, or text-only</td>
161
- </tr>
162
- <tr>
163
- <td><code>size</code></td>
164
- <td><code>2xs</code> … <code>2xl</code> (default <code>md</code>)</td>
165
- <td>Typography and padding (aligned with <strong><code>sonic-button</code></strong>)</td>
166
- </tr>
167
- <tr>
168
- <td><code>ellipsis</code></td>
169
- <td>boolean</td>
170
- <td>Single-line truncation; parent must constrain width</td>
171
- </tr>
172
- </tbody></table>
173
- <table>
174
- <thead>
175
- <tr>
176
- <th>Slot</th>
177
- <th>Description</th>
178
- </tr>
179
- </thead>
180
- <tbody><tr>
181
- <td><em>(default)</em></td>
182
- <td>Main label</td>
183
- </tr>
184
- <tr>
185
- <td><code>prefix</code></td>
186
- <td>Icon or short text before the label</td>
187
- </tr>
188
- <tr>
189
- <td><code>suffix</code></td>
190
- <td>Icon or short text after the label</td>
191
- </tr>
192
- </tbody></table>
193
-
194
- </article>
195
- </main>
196
- </body>
197
- </html>
@@ -1,150 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/button/button.html" data-doc-id="core/components/ui/button/button">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Button — Concorde</title>
7
- <meta name="description" content="The length of the button depends on the size of its content">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/button/button, button, Button, UI component, sonic-button, web component">
9
- <meta name="concorde-doc-id" content="core/components/ui/button/button">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/button/button.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/button/button.md/button" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Button</strong>. The length of the button depends on the size of its content <span>Doc ID: <code>core/components/ui/button/button</code>. Keywords: Concorde, supersoniks, core/components/ui/button/button, button, Button, UI component, sonic-button, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/button/button.html">https://concorde.supersoniks.org/crawl/core/components/ui/button/button.html</a>.</span></p>
19
- <h1 id="button">Button</h1>
20
- <h2 id="type">Type</h2>
21
- <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
22
- &lt;sonic-button&gt;Default&lt;/sonic-button&gt;
23
- &lt;sonic-button type=&quot;primary&quot;&gt;Primary&lt;/sonic-button&gt;
24
- &lt;sonic-button type=&quot;neutral&quot;&gt;Neutral&lt;/sonic-button&gt;
25
- &lt;sonic-button type=&quot;warning&quot;&gt;Warning&lt;/sonic-button&gt;
26
- &lt;sonic-button type=&quot;info&quot;&gt;Info&lt;/sonic-button&gt;
27
- &lt;sonic-button type=&quot;success&quot;&gt;Success&lt;/sonic-button&gt;
28
- &lt;sonic-button type=&quot;danger&quot;&gt;Danger&lt;/sonic-button&gt;
29
- &lt;sonic-button type=&quot;custom&quot; style=&quot;--sc-btn-custom-color: #fde68a; --sc-btn-custom-bg: #5b21b6&quot;&gt;Custom&lt;/sonic-button&gt;
30
- &lt;/div&gt;
31
- </code></pre>
32
- <h2 id="outline">Outline</h2>
33
- <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
34
- &lt;sonic-button variant=&quot;outline&quot;&gt;Default&lt;/sonic-button&gt;
35
- &lt;sonic-button variant=&quot;outline&quot; type=&quot;primary&quot;&gt;Primary&lt;/sonic-button&gt;
36
- &lt;sonic-button variant=&quot;outline&quot; type=&quot;neutral&quot;&gt;Neutral&lt;/sonic-button&gt;
37
- &lt;sonic-button variant=&quot;outline&quot; type=&quot;warning&quot;&gt;Warning&lt;/sonic-button&gt;
38
- &lt;sonic-button variant=&quot;outline&quot; type=&quot;info&quot;&gt;Info&lt;/sonic-button&gt;
39
- &lt;sonic-button variant=&quot;outline&quot; type=&quot;success&quot;&gt;Success&lt;/sonic-button&gt;
40
- &lt;sonic-button variant=&quot;outline&quot; type=&quot;danger&quot;&gt;Danger&lt;/sonic-button&gt;
41
- &lt;sonic-button variant=&quot;outline&quot; type=&quot;custom&quot; style=&quot;--sc-btn-custom-bg: #5b21b6&quot;&gt;Custom&lt;/sonic-button&gt;
42
- &lt;/div&gt;
43
- </code></pre>
44
- <h2 id="variant">Variant</h2>
45
- <pre><code>&lt;sonic-button variant=&quot;default&quot;&gt;Default&lt;/sonic-button&gt;
46
- &lt;sonic-button variant=&quot;outline&quot;&gt;Outline&lt;/sonic-button&gt;
47
- &lt;sonic-button variant=&quot;ghost&quot;&gt;Ghost&lt;/sonic-button&gt;
48
- &lt;sonic-button variant=&quot;link&quot;&gt;Link&lt;/sonic-button&gt;
49
- &lt;sonic-button variant=&quot;unstyled&quot;&gt;Unstyled&lt;/sonic-button&gt;
50
- </code></pre>
51
- <h2 id="size">Size</h2>
52
- <pre><code>&lt;sonic-button size=&quot;2xs&quot;&gt;2Xs button&lt;/sonic-button&gt;
53
- &lt;sonic-button size=&quot;xs&quot;&gt;Xs button&lt;/sonic-button&gt;
54
- &lt;sonic-button size=&quot;sm&quot;&gt;Sm button&lt;/sonic-button&gt;
55
- &lt;sonic-button size=&quot;md&quot;&gt;Md button&lt;/sonic-button&gt;
56
- &lt;sonic-button&gt;Default button&lt;/sonic-button&gt;
57
- &lt;sonic-button size=&quot;lg&quot;&gt;Lg button&lt;/sonic-button&gt;
58
- &lt;sonic-button size=&quot;xl&quot;&gt;Xl button&lt;/sonic-button&gt;
59
- &lt;sonic-button size=&quot;2xl&quot;&gt;2Xl button&lt;/sonic-button&gt;
60
- </code></pre>
61
- <h2 id="shape">Shape</h2>
62
- <pre><code>&lt;sonic-button shape=&quot;circle&quot;&gt; 😂 &lt;/sonic-button&gt;
63
- &lt;sonic-button shape=&quot;square&quot;&gt; 🚀 &lt;/sonic-button&gt;
64
- </code></pre>
65
- <h2 id="loading">Loading</h2>
66
- <p>The length of the button depends on the size of its content</p>
67
- <pre><code>&lt;sonic-button loading&gt;&lt;/sonic-button&gt;
68
- &lt;sonic-button loading&gt;Loading button&lt;/sonic-button&gt;
69
- &lt;sonic-button loading&gt;&lt;span slot=&quot;prefix&quot;&gt;🚀&lt;/span&gt;Loading with prefix&lt;span slot=&quot;suffix&quot;&gt;😂&lt;/span&gt;&lt;/sonic-button&gt;
70
- </code></pre>
71
- <h2 id="swap">Swap</h2>
72
- <pre><code>&lt;sonic-button formDataProvider=&quot;button_swap_example&quot; name=&quot;youpi&quot; value=&quot;youpla&quot; type=&quot;primary&quot; shape=&quot;circle&quot; variant=&quot;outline&quot; class=&quot;mr-4&quot;&gt;
73
- &lt;sonic-icon library=&quot;iconoir&quot; swap=&quot;on&quot; name=&quot;eye-empty&quot;&gt;&lt;/sonic-icon&gt;
74
- &lt;sonic-icon library=&quot;iconoir&quot; swap=&quot;off&quot; name=&quot;eye-off&quot;&gt;&lt;/sonic-icon&gt;
75
- &lt;/sonic-button&gt;
76
- &lt;sonic-button formDataProvider=&quot;button_swap_example&quot; name=&quot;youpi&quot; value=&quot;youpla&quot; type=&quot;primary&quot; variant=&quot;outline&quot;&gt;
77
- &lt;sonic-icon library=&quot;iconoir&quot; swap=&quot;on&quot; slot=&quot;prefix&quot; name=&quot;eye-empty&quot;&gt;&lt;/sonic-icon&gt;
78
- &lt;sonic-icon library=&quot;iconoir&quot; swap=&quot;off&quot; slot=&quot;prefix&quot; name=&quot;eye-off&quot;&gt;&lt;/sonic-icon&gt;
79
- Révélez
80
- &lt;span swap=&quot;off&quot;&gt;...&lt;/span&gt;
81
- &lt;span swap=&quot;on&quot;&gt;moi !&lt;/span&gt;
82
- &lt;/sonic-button&gt;
83
- </code></pre>
84
- <h2 id="reset">Reset</h2>
85
- <pre><code>&lt;div formDataProvider=&quot;button-reset-demo&quot; class=&quot;mb-2&quot;&gt;
86
- &lt;sonic-checkbox name=&quot;aChexbox&quot; value=&quot;AValueToSet&quot;&gt;Set A value&lt;/sonic-checkbox&gt;&lt;br&gt;
87
- &lt;sonic-button reset&gt;Reset current formDataProvider&lt;/sonic-button&gt;
88
- &lt;/div&gt;
89
- &lt;sonic-button reset=&quot;button-reset-demo&quot;&gt;Reset formDataProvider by name&lt;/sonic-button&gt;
90
- </code></pre>
91
- <h2 id="goback">GoBack</h2>
92
- <pre><code>&lt;sonic-button goBack type=&quot;primary&quot; variant=&quot;outline&quot; class=&quot;mr-4&quot;&gt;
93
- &lt;sonic-icon library=&quot;iconoir&quot; slot=&quot;prefix&quot; name=&quot;arrow-left&quot;&gt;&lt;/sonic-icon&gt;
94
- Retour classique
95
- &lt;/sonic-button&gt;
96
- &lt;sonic-button goBack=&quot;http://la-billetterie.net&quot; type=&quot;primary&quot; variant=&quot;outline&quot; class=&quot;mr-4&quot;&gt;
97
- &lt;sonic-icon library=&quot;iconoir&quot; slot=&quot;prefix&quot; name=&quot;arrow-left&quot;&gt;&lt;/sonic-icon&gt;
98
- Retour url prédéfinie
99
- &lt;/sonic-button&gt;
100
- </code></pre>
101
- <h2 id="button-with-icon">Button with icon</h2>
102
- <pre><code>&lt;sonic-button goBack type=&quot;primary&quot; variant=&quot;outline&quot; class=&quot;mr-4&quot;&gt;
103
- &lt;sonic-icon library=&quot;iconoir&quot; slot=&quot;prefix&quot; name=&quot;arrow-right&quot; &gt;&lt;/sonic-icon&gt;
104
- Button with icon
105
- &lt;/sonic-button&gt;
106
- </code></pre>
107
- <h2 id="button-group">Button group</h2>
108
- <pre><code>&lt;sonic-group label=&quot;Code promo&quot; class=&quot;mr-4&quot;&gt;
109
- &lt;sonic-input placeholder=&quot;Entrez votre code ici...&quot;&gt;&lt;/sonic-input&gt;
110
- &lt;sonic-button type=&quot;primary&quot; shape=&quot;square&quot;&gt;
111
- &lt;sonic-icon library=&quot;iconoir&quot; library=&quot;iconoir&quot; name=&quot;gift&quot;&gt;&lt;/sonic-icon&gt;
112
- &lt;/sonic-button&gt;
113
- &lt;/sonic-group&gt;
114
- &lt;sonic-divider size=&quot;lg&quot;&gt;&lt;/sonic-divider&gt;
115
- &lt;div class=&quot;text-lg mb-2&quot;&gt;Choose a subscription&lt;/div&gt;
116
- &lt;sonic-group formDataProvider=&quot;subscriptionData&quot;&gt;
117
- &lt;sonic-button radio minWidth=&quot;10rem&quot; name=&quot;subscription&quot; value=&quot;standard&quot; type=&quot;default&quot;
118
- &gt;😎 Standard&lt;/sonic-button
119
- &gt;
120
- &lt;sonic-button radio minWidth=&quot;10rem&quot; name=&quot;subscription&quot; value=&quot;premium&quot; type=&quot;default&quot;&gt;⭐ Premium&lt;/sonic-button&gt;
121
- &lt;sonic-button radio minWidth=&quot;10rem&quot; name=&quot;subscription&quot; value=&quot;diamond&quot; type=&quot;default&quot;&gt;💎 Diamond&lt;/sonic-button&gt;
122
- &lt;/sonic-group&gt;
123
- </code></pre>
124
- <h2 id="aria-label">Aria-label</h2>
125
- <pre><code>&lt;sonic-button data-aria-label=&quot;Custom aria label&quot; type=&quot;primary&quot; &gt;
126
- Button with aria label
127
- &lt;/sonic-button&gt;
128
- &lt;sonic-button data-aria-label=&quot;Custom aria label&quot; href=&quot;https://google.fr&quot; type=&quot;primary&quot; &gt;
129
- Button link with aria label
130
- &lt;/sonic-button&gt;
131
- </code></pre>
132
- <h2 id="custom-styles--active-states-with-tailwind">Custom styles &amp; active states with tailwind</h2>
133
- <pre><code>&lt;div formDataProvider=&quot;subscriptionData2&quot;&gt;
134
- &lt;sonic-button
135
- class=&quot;bg-neutral-100 transition-all text-center text-lg text-neutral-400 rounded-md min-w-[8rem] [&amp;[active]]:text-danger-content [&amp;[active]]:min-w-[13rem] [&amp;[active]]:bg-danger [&amp;[active]]:font-black [&amp;[active]]:rounded-full&quot;
136
- variant=&quot;unstyled&quot;
137
- checkable unique
138
- name=&quot;subscription&quot;
139
- value=&quot;premium&quot;
140
- type=&quot;default&quot;&gt;
141
- &lt;span swap=&quot;off&quot; class=&quot;inline-block py-2 px-3&quot; &gt;subscribe&lt;/span&gt;
142
- &lt;span swap=&quot;on&quot; class=&quot;inline-block py-2 px-3&quot; &gt;⭐ Premium&lt;/span&gt;
143
- &lt;/sonic-button&gt;
144
- &lt;/div&gt;
145
- </code></pre>
146
-
147
- </article>
148
- </main>
149
- </body>
150
- </html>
@@ -1,112 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/captcha/captcha.html" data-doc-id="core/components/ui/captcha/captcha">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Captcha — Concorde</title>
7
- <meta name="description" content="sonic-captcha embeds an ALTCHA widget and wires captchaToken / needsCaptchaValidation on the ancestor formDataProvider (or headersDataProvider). sonic-submit waits for a token before sending when vali">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/captcha/captcha, captcha, Captcha, UI component, sonic-captcha, web component, captchaToken, needsCaptchaValidation, formDataProvider, headersDataProvider, sonic-submit, key, generateEncryptedKey">
9
- <meta name="concorde-doc-id" content="core/components/ui/captcha/captcha">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/captcha/captcha.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/captcha/captcha.md/captcha" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Captcha</strong>. sonic-captcha embeds an ALTCHA widget and wires captchaToken / needsCaptchaValidation on the ancestor formDataProvider (or headersDataProvider). sonic-submit waits for a token before sending when vali <span>Doc ID: <code>core/components/ui/captcha/captcha</code>. Keywords: Concorde, supersoniks, core/components/ui/captcha/captcha, captcha, Captcha, UI component, sonic-captcha, web component, captchaToken, needsCaptchaValidation, formDataProvider, headersDataProvider, sonic-submit, key, generateEncryptedKey. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/captcha/captcha.html">https://concorde.supersoniks.org/crawl/core/components/ui/captcha/captcha.html</a>.</span></p>
19
- <h1 id="captcha">Captcha</h1>
20
- <p><strong><code>sonic-captcha</code></strong> embeds an <strong>ALTCHA</strong> widget and wires <strong><code>captchaToken</code></strong> / <strong><code>needsCaptchaValidation</code></strong> on the ancestor <strong><code>formDataProvider</code></strong> (or <strong><code>headersDataProvider</code></strong>). <strong><code>sonic-submit</code></strong> waits for a token before sending when validation is required. The widget loads only on <strong>HTTPS</strong>; on plain HTTP the host renders nothing.</p>
21
- <blockquote>
22
- <p>Live widget calls the Supersoniks challenge service — not part of <a href="../../../../docs/_misc/docs-mock-api.html#docs-mock-api">docs mock API</a>.</p>
23
- </blockquote>
24
- <h2 id="basic-example">Basic example</h2>
25
- <p>Wrap the form scope and place <strong><code>sonic-submit</code></strong> in the default slot so the challenge appears above the action.</p>
26
- <pre><code>&lt;sonic-scope
27
- serviceURL=&quot;/docs-mock-api&quot;
28
- formDataProvider=&quot;captcha-docs-form&quot;
29
- submitResultDataProvider=&quot;captcha-docs-result&quot;
30
- &gt;
31
- &lt;sonic-captcha formDataProvider=&quot;captcha-docs-form&quot;&gt;
32
- &lt;sonic-input class=&quot;mb-3&quot; name=&quot;email&quot; type=&quot;email&quot; label=&quot;Email&quot; value=&quot;demo@example.com&quot;&gt;&lt;/sonic-input&gt;
33
- &lt;sonic-submit endPoint=&quot;api/register&quot; onClick&gt;
34
- &lt;sonic-button type=&quot;primary&quot;&gt;Submit with captcha&lt;/sonic-button&gt;
35
- &lt;/sonic-submit&gt;
36
- &lt;/sonic-captcha&gt;
37
- &lt;/sonic-scope&gt;
38
- </code></pre>
39
- <h2 id="encrypted-site-key">Encrypted site key</h2>
40
- <p>Optional <strong><code>key</code></strong> skips client-side key generation. When omitted, the component derives an encrypted key on connect (after <strong><code>generateEncryptedKey</code></strong>).</p>
41
- <pre><code>&lt;sonic-captcha formDataProvider=&quot;captcha-docs-form&quot; key=&quot;6Leq5V0iAAAAAB-41DlWN335jDlcIuXmhNtdd00t&quot;&gt;
42
- &lt;sonic-button type=&quot;outline&quot; disabled&gt;Complete the challenge above to enable submit&lt;/sonic-button&gt;
43
- &lt;/sonic-captcha&gt;
44
- </code></pre>
45
- <h2 id="form-publisher-fields">Form publisher fields</h2>
46
- <p>On connect (HTTPS only), <strong><code>needsCaptchaValidation</code></strong> is set to <strong><code>true</code></strong> and <strong><code>captchaToken</code></strong> is cleared. When the ALTCHA widget reaches <strong><code>verified</code></strong>, <strong><code>captchaToken</code></strong> is written on the form publisher and <strong><code>sonic-captcha-validate</code></strong> fires (<code>detail.valid</code> · <strong><code>detail.state</code></strong> · optional <strong><code>detail.token</code></strong> / <strong><code>detail.payload</code></strong>). <strong><code>sonic-submit</code></strong> still listens for <strong><code>request_token</code></strong> to refresh the token immediately before send.</p>
47
- <pre><code class="language-typescript">{
48
- needsCaptchaValidation: true,
49
- captchaKey: &quot;…&quot;,
50
- captchaToken: &quot;…&quot;
51
- }
52
- </code></pre>
53
- <h2 id="api-reference">API reference</h2>
54
- <table>
55
- <thead>
56
- <tr>
57
- <th>Attribute</th>
58
- <th>Values</th>
59
- <th>Description</th>
60
- </tr>
61
- </thead>
62
- <tbody><tr>
63
- <td><code>formDataProvider</code></td>
64
- <td>publisher id</td>
65
- <td>Same as ancestor form scope; reads/writes <strong><code>needsCaptchaValidation</code></strong> · <strong><code>captchaKey</code></strong> · <strong><code>captchaToken</code></strong></td>
66
- </tr>
67
- <tr>
68
- <td><code>key</code></td>
69
- <td>string</td>
70
- <td>ALTCHA site key; auto-generated when empty</td>
71
- </tr>
72
- <tr>
73
- <td><code>action</code></td>
74
- <td>string</td>
75
- <td>Optional action name forwarded to the widget</td>
76
- </tr>
77
- <tr>
78
- <td><code>zIndex</code></td>
79
- <td>number (default <code>9999</code>)</td>
80
- <td>Stacking for the challenge overlay</td>
81
- </tr>
82
- </tbody></table>
83
- <table>
84
- <thead>
85
- <tr>
86
- <th>Slot</th>
87
- <th>Description</th>
88
- </tr>
89
- </thead>
90
- <tbody><tr>
91
- <td><em>(default)</em></td>
92
- <td>Form actions (typically <strong><code>sonic-submit</code></strong> and fields) rendered below the widget</td>
93
- </tr>
94
- </tbody></table>
95
- <table>
96
- <thead>
97
- <tr>
98
- <th>Event</th>
99
- <th>Description</th>
100
- </tr>
101
- </thead>
102
- <tbody><tr>
103
- <td><code>sonic-captcha-validate</code></td>
104
- <td>Fired when <strong><code>state</code></strong> is <strong><code>verified</code></strong> · <strong><code>error</code></strong> or <strong><code>expired</code></strong>; <strong><code>detail.valid</code></strong> is <strong><code>true</code></strong> only for <strong><code>verified</code></strong></td>
105
- </tr>
106
- </tbody></table>
107
- <p>Related: <a href="../../functional/submit/submit.html#submit">Submit</a> — <strong><code>needsCaptchaValidation</code></strong> and deferred send.</p>
108
-
109
- </article>
110
- </main>
111
- </body>
112
- </html>