@supersoniks/concorde 5.0.2 → 5.0.3

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 (214) hide show
  1. package/build-infos.json +1 -1
  2. package/concorde-core.bundle.js +1 -1
  3. package/concorde-core.es.js +1 -1
  4. package/dist/concorde-core.bundle.js +1 -1
  5. package/dist/concorde-core.es.js +1 -1
  6. package/docs/altcha-widget.js +2662 -0
  7. package/docs/assets/index--GpD7R7a.css +1 -0
  8. package/docs/assets/index-BnK6OS7w.js +12115 -0
  9. package/docs/crawl/core/components/functional/date/date.html +190 -0
  10. package/docs/crawl/core/components/functional/fetch/fetch.html +109 -0
  11. package/docs/crawl/core/components/functional/if/if.html +27 -0
  12. package/docs/crawl/core/components/functional/jsonata/jsonata.html +79 -0
  13. package/docs/crawl/core/components/functional/list/list.html +70 -0
  14. package/docs/crawl/core/components/functional/mix/mix.html +45 -0
  15. package/docs/crawl/core/components/functional/queue/queue.html +96 -0
  16. package/docs/crawl/core/components/functional/router/router.html +106 -0
  17. package/docs/crawl/core/components/functional/sdui/sdui.html +269 -0
  18. package/docs/crawl/core/components/functional/states/states.html +66 -0
  19. package/docs/crawl/core/components/functional/submit/submit.html +160 -0
  20. package/docs/crawl/core/components/functional/subscriber/subscriber.html +67 -0
  21. package/docs/crawl/core/components/functional/value/value.html +51 -0
  22. package/docs/crawl/core/components/ui/alert/alert.html +140 -0
  23. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +23 -0
  24. package/docs/crawl/core/components/ui/badge/badge.html +148 -0
  25. package/docs/crawl/core/components/ui/button/button.html +150 -0
  26. package/docs/crawl/core/components/ui/captcha/captcha.html +30 -0
  27. package/docs/crawl/core/components/ui/card/card.html +143 -0
  28. package/docs/crawl/core/components/ui/divider/divider.html +58 -0
  29. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +73 -0
  30. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +135 -0
  31. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +79 -0
  32. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +62 -0
  33. package/docs/crawl/core/components/ui/form/input/input.html +109 -0
  34. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +38 -0
  35. package/docs/crawl/core/components/ui/form/radio/radio.html +56 -0
  36. package/docs/crawl/core/components/ui/form/select/select.html +73 -0
  37. package/docs/crawl/core/components/ui/form/switch/switch.html +56 -0
  38. package/docs/crawl/core/components/ui/form/textarea/textarea.html +59 -0
  39. package/docs/crawl/core/components/ui/group/group.html +82 -0
  40. package/docs/crawl/core/components/ui/icon/icon.html +133 -0
  41. package/docs/crawl/core/components/ui/image/image.html +186 -0
  42. package/docs/crawl/core/components/ui/link/link.html +42 -0
  43. package/docs/crawl/core/components/ui/loader/loader.html +50 -0
  44. package/docs/crawl/core/components/ui/menu/menu.html +322 -0
  45. package/docs/crawl/core/components/ui/modal/modal.html +117 -0
  46. package/docs/crawl/core/components/ui/pop/pop.html +178 -0
  47. package/docs/crawl/core/components/ui/progress/progress.html +58 -0
  48. package/docs/crawl/core/components/ui/table/table.html +413 -0
  49. package/docs/crawl/core/components/ui/toast/toast.html +122 -0
  50. package/docs/crawl/core/components/ui/tooltip/tooltip.html +79 -0
  51. package/docs/crawl/docs/_core-concept/dataFlow.html +177 -0
  52. package/docs/crawl/docs/_core-concept/overview.html +66 -0
  53. package/docs/crawl/docs/_core-concept/subscriber.html +75 -0
  54. package/docs/crawl/docs/_decorators/ancestor-attribute.html +116 -0
  55. package/docs/crawl/docs/_decorators/auto-subscribe.html +202 -0
  56. package/docs/crawl/docs/_decorators/bind.html +141 -0
  57. package/docs/crawl/docs/_decorators/get.html +149 -0
  58. package/docs/crawl/docs/_decorators/handle.html +165 -0
  59. package/docs/crawl/docs/_decorators/on-assign.html +355 -0
  60. package/docs/crawl/docs/_decorators/patch.html +78 -0
  61. package/docs/crawl/docs/_decorators/post.html +139 -0
  62. package/docs/crawl/docs/_decorators/publish.html +61 -0
  63. package/docs/crawl/docs/_decorators/put.html +78 -0
  64. package/docs/crawl/docs/_decorators/subscribe.html +109 -0
  65. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +137 -0
  66. package/docs/crawl/docs/_directives/sub.html +93 -0
  67. package/docs/crawl/docs/_getting-started/ai-agents.html +173 -0
  68. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +100 -0
  69. package/docs/crawl/docs/_getting-started/concorde-outside.html +58 -0
  70. package/docs/crawl/docs/_getting-started/create-a-component.html +111 -0
  71. package/docs/crawl/docs/_getting-started/my-first-component.html +189 -0
  72. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +110 -0
  73. package/docs/crawl/docs/_getting-started/pubsub.html +62 -0
  74. package/docs/crawl/docs/_getting-started/start.html +76 -0
  75. package/docs/crawl/docs/_getting-started/theming.html +85 -0
  76. package/docs/crawl/docs/_misc/api-configuration.html +149 -0
  77. package/docs/crawl/docs/_misc/dataProviderKey.html +135 -0
  78. package/docs/crawl/docs/_misc/docs-mock-api.html +158 -0
  79. package/docs/crawl/docs/_misc/dynamic-path.html +180 -0
  80. package/docs/crawl/docs/_misc/endpoint.html +50 -0
  81. package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +138 -0
  82. package/docs/crawl/docs/_misc/html-integration.html +48 -0
  83. package/docs/crawl/hubs/decorators.html +547 -0
  84. package/docs/crawl/hubs/form-components.html +359 -0
  85. package/docs/crawl/hubs/remote-data.html +452 -0
  86. package/docs/crawl/index.html +101 -0
  87. package/docs/css/docs.css +0 -0
  88. package/docs/docs-mock-api-sw.js +724 -0
  89. package/docs/docs-mock-api-sw.js.map +7 -0
  90. package/docs/fonts/ClashGrotesk-Bold.eot +0 -0
  91. package/docs/fonts/ClashGrotesk-Bold.ttf +0 -0
  92. package/docs/fonts/ClashGrotesk-Bold.woff +0 -0
  93. package/docs/fonts/ClashGrotesk-Bold.woff2 +0 -0
  94. package/docs/fonts/ClashGrotesk-Extralight.eot +0 -0
  95. package/docs/fonts/ClashGrotesk-Extralight.ttf +0 -0
  96. package/docs/fonts/ClashGrotesk-Extralight.woff +0 -0
  97. package/docs/fonts/ClashGrotesk-Extralight.woff2 +0 -0
  98. package/docs/fonts/ClashGrotesk-Light.eot +0 -0
  99. package/docs/fonts/ClashGrotesk-Light.ttf +0 -0
  100. package/docs/fonts/ClashGrotesk-Light.woff +0 -0
  101. package/docs/fonts/ClashGrotesk-Light.woff2 +0 -0
  102. package/docs/fonts/ClashGrotesk-Medium.eot +0 -0
  103. package/docs/fonts/ClashGrotesk-Medium.ttf +0 -0
  104. package/docs/fonts/ClashGrotesk-Medium.woff +0 -0
  105. package/docs/fonts/ClashGrotesk-Medium.woff2 +0 -0
  106. package/docs/fonts/ClashGrotesk-Regular.eot +0 -0
  107. package/docs/fonts/ClashGrotesk-Regular.ttf +0 -0
  108. package/docs/fonts/ClashGrotesk-Regular.woff +0 -0
  109. package/docs/fonts/ClashGrotesk-Regular.woff2 +0 -0
  110. package/docs/fonts/ClashGrotesk-Semibold.eot +0 -0
  111. package/docs/fonts/ClashGrotesk-Semibold.ttf +0 -0
  112. package/docs/fonts/ClashGrotesk-Semibold.woff +0 -0
  113. package/docs/fonts/ClashGrotesk-Semibold.woff2 +0 -0
  114. package/docs/fonts/ClashGrotesk-Variable.eot +0 -0
  115. package/docs/fonts/ClashGrotesk-Variable.ttf +0 -0
  116. package/docs/fonts/ClashGrotesk-Variable.woff +0 -0
  117. package/docs/fonts/ClashGrotesk-Variable.woff2 +0 -0
  118. package/docs/img/concorde-icon.svg +5 -0
  119. package/docs/img/concorde-logo.svg +1 -0
  120. package/docs/img/concorde.png +0 -0
  121. package/docs/img/concorde_def.png +0 -0
  122. package/docs/img/concorde_seuil.png.webp +0 -0
  123. package/docs/img/concorde_seuil_invert.png +0 -0
  124. package/docs/img/paul_metrand.jpg +0 -0
  125. package/docs/img/paul_metrand_xs.jpg +0 -0
  126. package/docs/index.html +93 -0
  127. package/docs/llms-full.txt +5945 -0
  128. package/docs/llms.txt +104 -0
  129. package/docs/robots.txt +16 -0
  130. package/docs/sitemap.xml +237 -0
  131. package/docs/src/core/components/functional/date/date.md +290 -0
  132. package/docs/src/core/components/functional/fetch/fetch.md +125 -0
  133. package/docs/src/core/components/functional/if/if.md +9 -0
  134. package/docs/src/core/components/functional/jsonata/jsonata.md +56 -0
  135. package/docs/src/core/components/functional/list/list.md +65 -0
  136. package/docs/src/core/components/functional/mix/mix.md +41 -0
  137. package/docs/src/core/components/functional/queue/queue.md +72 -0
  138. package/docs/src/core/components/functional/router/router.md +94 -0
  139. package/docs/src/core/components/functional/sdui/default-library.json +108 -0
  140. package/docs/src/core/components/functional/sdui/example.json +99 -0
  141. package/docs/src/core/components/functional/sdui/sdui.md +356 -0
  142. package/docs/src/core/components/functional/states/states.md +87 -0
  143. package/docs/src/core/components/functional/submit/submit.md +114 -0
  144. package/docs/src/core/components/functional/subscriber/subscriber.md +91 -0
  145. package/docs/src/core/components/functional/value/value.md +35 -0
  146. package/docs/src/core/components/ui/alert/alert.md +177 -0
  147. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -0
  148. package/docs/src/core/components/ui/badge/badge.md +175 -0
  149. package/docs/src/core/components/ui/button/button.md +183 -0
  150. package/docs/src/core/components/ui/captcha/captcha.md +12 -0
  151. package/docs/src/core/components/ui/card/card.md +152 -0
  152. package/docs/src/core/components/ui/divider/divider.md +35 -0
  153. package/docs/src/core/components/ui/form/checkbox/checkbox.md +77 -0
  154. package/docs/src/core/components/ui/form/fieldset/fieldset.md +129 -0
  155. package/docs/src/core/components/ui/form/form-actions/form-actions.md +77 -0
  156. package/docs/src/core/components/ui/form/form-layout/form-layout.md +44 -0
  157. package/docs/src/core/components/ui/form/input/input.md +142 -0
  158. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +29 -0
  159. package/docs/src/core/components/ui/form/radio/radio.md +57 -0
  160. package/docs/src/core/components/ui/form/select/select.md +71 -0
  161. package/docs/src/core/components/ui/form/switch/switch.md +57 -0
  162. package/docs/src/core/components/ui/form/textarea/textarea.md +65 -0
  163. package/docs/src/core/components/ui/group/group.md +75 -0
  164. package/docs/src/core/components/ui/icon/icon.md +125 -0
  165. package/docs/src/core/components/ui/icon/icons.json +1 -0
  166. package/docs/src/core/components/ui/image/image.md +201 -0
  167. package/docs/src/core/components/ui/link/link.md +43 -0
  168. package/docs/src/core/components/ui/loader/loader.md +55 -0
  169. package/docs/src/core/components/ui/menu/menu.md +329 -0
  170. package/docs/src/core/components/ui/modal/modal.md +119 -0
  171. package/docs/src/core/components/ui/pop/pop.md +200 -0
  172. package/docs/src/core/components/ui/progress/progress.md +63 -0
  173. package/docs/src/core/components/ui/table/table.md +455 -0
  174. package/docs/src/core/components/ui/toast/toast.md +166 -0
  175. package/docs/src/core/components/ui/tooltip/tooltip.md +82 -0
  176. package/docs/src/docs/_core-concept/dataFlow.md +88 -0
  177. package/docs/src/docs/_core-concept/overview.md +57 -0
  178. package/docs/src/docs/_core-concept/subscriber.md +75 -0
  179. package/docs/src/docs/_decorators/ancestor-attribute.md +127 -0
  180. package/docs/src/docs/_decorators/auto-subscribe.md +202 -0
  181. package/docs/src/docs/_decorators/bind.md +167 -0
  182. package/docs/src/docs/_decorators/get.md +162 -0
  183. package/docs/src/docs/_decorators/handle.md +175 -0
  184. package/docs/src/docs/_decorators/on-assign.md +390 -0
  185. package/docs/src/docs/_decorators/patch.md +70 -0
  186. package/docs/src/docs/_decorators/post.md +146 -0
  187. package/docs/src/docs/_decorators/publish.md +55 -0
  188. package/docs/src/docs/_decorators/put.md +70 -0
  189. package/docs/src/docs/_decorators/subscribe.md +100 -0
  190. package/docs/src/docs/_decorators/wait-for-ancestors.md +163 -0
  191. package/docs/src/docs/_directives/sub.md +91 -0
  192. package/docs/src/docs/_getting-started/ai-agents.md +76 -0
  193. package/docs/src/docs/_getting-started/concorde-manual-install.md +133 -0
  194. package/docs/src/docs/_getting-started/concorde-outside.md +33 -0
  195. package/docs/src/docs/_getting-started/create-a-component.md +139 -0
  196. package/docs/src/docs/_getting-started/my-first-component.md +236 -0
  197. package/docs/src/docs/_getting-started/my-first-subscriber.md +120 -0
  198. package/docs/src/docs/_getting-started/pubsub.md +37 -0
  199. package/docs/src/docs/_getting-started/start.md +47 -0
  200. package/docs/src/docs/_getting-started/theming.md +91 -0
  201. package/docs/src/docs/_misc/api-configuration.md +81 -0
  202. package/docs/src/docs/_misc/dataProviderKey.md +168 -0
  203. package/docs/src/docs/_misc/docs-mock-api.md +63 -0
  204. package/docs/src/docs/_misc/dynamic-path.md +71 -0
  205. package/docs/src/docs/_misc/endpoint.md +45 -0
  206. package/docs/src/docs/_misc/formelement-subscriber-removal.md +115 -0
  207. package/docs/src/docs/_misc/html-integration.md +15 -0
  208. package/docs/src/docs/search/docs-search.json +10137 -0
  209. package/docs/src/tag-list.json +1 -0
  210. package/docs/src/tsconfig-model.json +23 -0
  211. package/docs/src/tsconfig.json +1224 -0
  212. package/docs/svg/regular/plane.svg +1 -0
  213. package/docs/svg/solid/plane.svg +1 -0
  214. package/package.json +1 -1
package/docs/crawl/core/components/ui/group/group.html ADDED
@@ -0,0 +1,82 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/group/group.html" data-doc-id="core/components/ui/group/group">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Group — Concorde</title>
7
+ <meta name="description" content="Group: 😎 Standard ⭐ Premium 💎 Diamond">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/group/group, group, Group, UI component, sonic-group, web component">
9
+ <meta name="concorde-doc-id" content="core/components/ui/group/group">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/group/group.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/group/group.md/group" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Group</strong>. Group: 😎 Standard ⭐ Premium 💎 Diamond <span>Doc ID: <code>core/components/ui/group/group</code>. Keywords: Concorde, supersoniks, core/components/ui/group/group, group, Group, UI component, sonic-group, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/group/group.html">https://concorde.supersoniks.org/crawl/core/components/ui/group/group.html</a>.</span></p>
19
+ <h1 id="group">Group</h1>
20
+ <h2 id="radio-group">Radio group</h2>
21
+ <pre><code>&lt;sonic-group formDataProvider=&quot;subscriptionData&quot;&gt;
22
+ &lt;sonic-button radio name=&quot;subscription&quot; value=&quot;standard&quot; type=&quot;default&quot;&gt;😎 Standard&lt;/sonic-button&gt;
23
+ &lt;sonic-button radio checked name=&quot;subscription&quot; value=&quot;premium&quot; type=&quot;default&quot;&gt;⭐ Premium&lt;/sonic-button&gt;
24
+ &lt;sonic-button radio name=&quot;subscription&quot; value=&quot;diamond&quot; type=&quot;default&quot;&gt;💎 Diamond&lt;/sonic-button&gt;
25
+ &lt;/sonic-group&gt;
26
+ </code></pre>
27
+ <h2 id="button-group">Button group</h2>
28
+ <pre><code>&lt;sonic-group&gt;
29
+ &lt;sonic-button type=&quot;info&quot; target=&quot;_blank&quot; href=&quot;https://wwws.airfrance.fr/&quot;&gt;🗼Air France&lt;/sonic-button&gt;
30
+ &lt;sonic-button type=&quot;success&quot; target=&quot;_blank&quot; href=&quot;https://www.airtahitinui.com/&quot;&gt;🌴 Air Tahiti&lt;/sonic-button&gt;
31
+ &lt;sonic-button type=&quot;danger&quot; target=&quot;_blank&quot; href=&quot;https://www.aircorsica.com/&quot;&gt;💣 Air Corsica&lt;/sonic-button&gt;
32
+ &lt;/sonic-group&gt;
33
+ </code></pre>
34
+ <h2 id="input-actions-prefix">Input actions prefix</h2>
35
+ <pre><code>&lt;div class=&quot;grid grid-cols-3 gap-3&quot;&gt;
36
+ &lt;sonic-group&gt;
37
+ &lt;sonic-button type=&quot;info&quot; shape=&quot;square&quot;&gt;
38
+ &lt;sonic-icon library=&quot;iconoir&quot; library=&quot;iconoir&quot; name=&quot;info-empty&quot;&gt;&lt;/sonic-icon&gt;
39
+ &lt;/sonic-button&gt;
40
+ &lt;sonic-input placeholder=&quot;placeholder&quot; &gt;&lt;/sonic-input&gt;
41
+ &lt;/sonic-group&gt;
42
+ &lt;sonic-group label=&quot;Label&quot;&gt;
43
+ &lt;sonic-button type=&quot;info&quot; shape=&quot;square&quot;&gt;
44
+ &lt;sonic-icon library=&quot;iconoir&quot; library=&quot;iconoir&quot; name=&quot;info-empty&quot;&gt;&lt;/sonic-icon&gt;
45
+ &lt;/sonic-button&gt;
46
+ &lt;sonic-input &gt;&lt;/sonic-input&gt;
47
+ &lt;/sonic-group&gt;
48
+ &lt;sonic-group description=&quot;Description&quot;&gt;
49
+ &lt;sonic-button type=&quot;info&quot; shape=&quot;square&quot;&gt;
50
+ &lt;sonic-icon library=&quot;iconoir&quot; library=&quot;iconoir&quot; name=&quot;info-empty&quot;&gt;&lt;/sonic-icon&gt;
51
+ &lt;/sonic-button&gt;
52
+ &lt;sonic-input &gt;&lt;/sonic-input&gt;
53
+ &lt;/sonic-group&gt;
54
+ &lt;/div&gt;
55
+ </code></pre>
56
+ <h2 id="input-actions-suffix">Input actions suffix</h2>
57
+ <pre><code>&lt;div class=&quot;grid grid-cols-3 gap-3&quot;&gt;
58
+ &lt;sonic-group&gt;
59
+ &lt;sonic-input placeholder=&quot;placeholder&quot; &gt;&lt;/sonic-input&gt;
60
+ &lt;sonic-button type=&quot;primary&quot; shape=&quot;square&quot;&gt;
61
+ &lt;sonic-icon library=&quot;iconoir&quot; library=&quot;iconoir&quot; name=&quot;check&quot;&gt;&lt;/sonic-icon&gt;
62
+ &lt;/sonic-button&gt;
63
+ &lt;/sonic-group&gt;
64
+ &lt;sonic-group label=&quot;Label&quot;&gt;
65
+ &lt;sonic-input &gt;&lt;/sonic-input&gt;
66
+ &lt;sonic-button type=&quot;primary&quot; shape=&quot;square&quot;&gt;
67
+ &lt;sonic-icon library=&quot;iconoir&quot; library=&quot;iconoir&quot; name=&quot;check&quot;&gt;&lt;/sonic-icon&gt;
68
+ &lt;/sonic-button&gt;
69
+ &lt;/sonic-group&gt;
70
+ &lt;sonic-group description=&quot;Description&quot;&gt;
71
+ &lt;sonic-input &gt;&lt;/sonic-input&gt;
72
+ &lt;sonic-button type=&quot;primary&quot; shape=&quot;square&quot;&gt;
73
+ &lt;sonic-icon library=&quot;iconoir&quot; library=&quot;iconoir&quot; name=&quot;check&quot;&gt;&lt;/sonic-icon&gt;
74
+ &lt;/sonic-button&gt;
75
+ &lt;/sonic-group&gt;
76
+ &lt;/div&gt;
77
+ </code></pre>
78
+
79
+ </article>
80
+ </main>
81
+ </body>
82
+ </html>
package/docs/crawl/core/components/ui/icon/icon.html ADDED
@@ -0,0 +1,133 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html" data-doc-id="core/components/ui/icon/icon">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Icon — Concorde</title>
7
+ <meta name="description" content="customIconDefaultPrefix=&quot;regular&quot;&gt;">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/icon/icon, icon, Icon, UI component, sonic-icon, web component">
9
+ <meta name="concorde-doc-id" content="core/components/ui/icon/icon">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.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/icon/icon.md/icon" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Icon</strong>. customIconDefaultPrefix=&quot;regular&quot;&gt; <span>Doc ID: <code>core/components/ui/icon/icon</code>. Keywords: Concorde, supersoniks, core/components/ui/icon/icon, icon, Icon, UI component, sonic-icon, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html">https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html</a>.</span></p>
19
+ <h1 id="icon">Icon</h1>
20
+ <h2 id="custom">Custom</h2>
21
+ <p >Icons located in the following folder : <span class="text-info">/svg/$prefix/$name.svg<span></p>
22
+
23
+
24
+
25
+ <pre><code>&lt;sonic-scope customIconLibraryPath=&quot;/svg/$prefix/$name.svg&quot;
26
+ customIconDefaultPrefix=&quot;regular&quot;&gt;
27
+ &lt;div class=&quot;grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8&quot;&gt;
28
+ &lt;div class=&quot;text-center&quot;&gt;
29
+ &lt;sonic-icon library=&quot;custom&quot; prefix=&quot;regular&quot; name=&quot;plane&quot;&gt;&lt;/sonic-icon&gt;
30
+ &lt;br&gt;
31
+ &lt;div class=&quot;text-xs mt-1&quot;&gt;regular&lt;/div&gt;
32
+ &lt;/div&gt;
33
+ &lt;div class=&quot;text-center&quot;&gt;
34
+ &lt;sonic-icon library=&quot;custom&quot; prefix=&quot;solid&quot; name=&quot;plane&quot;&gt;&lt;/sonic-icon&gt;
35
+ &lt;br&gt;
36
+ &lt;div class=&quot;text-xs mt-1&quot;&gt;solid&lt;/div&gt;
37
+ &lt;/div&gt;
38
+ &lt;div class=&quot;text-center&quot;&gt;
39
+ &lt;sonic-icon library=&quot;custom&quot; name=&quot;plane&quot;&gt;&lt;/sonic-icon&gt;
40
+ &lt;br&gt;
41
+ &lt;div class=&quot;text-xs mt-1&quot;&gt;default prefix&lt;/div&gt;
42
+ &lt;/div&gt;
43
+ &lt;/div&gt;
44
+ &lt;/sonic-scope&gt;
45
+ </code></pre>
46
+ <h2 id="external">External</h2>
47
+ <pre><code>&lt;div class=&quot;grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8&quot;&gt;
48
+ &lt;sonic-link href=&quot;https://heroicons.com/&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
49
+ &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
50
+ &lt;br&gt;
51
+ &lt;div class=&quot;text-xs mt-1&quot;&gt;heroicons&lt;/div&gt;
52
+ &lt;/sonic-link&gt;
53
+ &lt;sonic-link href=&quot;https://iconoir.com/&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
54
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;2x2-cell&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
55
+ &lt;br&gt;
56
+ &lt;div class=&quot;text-xs mt-1&quot;&gt;iconoir&lt;/div&gt;
57
+ &lt;/sonic-link&gt;
58
+ &lt;sonic-link href=&quot;https://materialdesignicons.com/&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
59
+ &lt;sonic-icon library=&quot;material&quot; prefix=&quot;outline&quot; name=&quot;email&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
60
+ &lt;br&gt;
61
+ &lt;div class=&quot;text-xs mt-1&quot;&gt;material design&lt;/div&gt;
62
+ &lt;/sonic-link&gt;
63
+ &lt;sonic-link href=&quot;https://fontawesome.com/search?o=r&amp;m=free&amp;s=regular&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
64
+ &lt;sonic-icon library=&quot;fontAwesome&quot; prefix=&quot;regular&quot; name=&quot;user&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
65
+ &lt;br&gt;
66
+ &lt;div class=&quot;text-xs mt-1&quot;&gt;fontAwesome regular&lt;/div&gt;
67
+ &lt;/sonic-link&gt;
68
+ &lt;sonic-link href=&quot;https://fontawesome.com/search?o=r&amp;m=free&amp;s=solid&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
69
+ &lt;sonic-icon library=&quot;fontAwesome&quot; prefix=&quot;solid&quot; name=&quot;book&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
70
+ &lt;br&gt;
71
+ &lt;div class=&quot;text-xs mt-1&quot;&gt;fontAwesome solid&lt;/div&gt;
72
+ &lt;/sonic-link&gt;
73
+ &lt;sonic-link href=&quot;https://feathericons.com/&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
74
+ &lt;sonic-icon library=&quot;feathers&quot; name=&quot;activity&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
75
+ &lt;br&gt;
76
+ &lt;div class=&quot;text-xs mt-1&quot;&gt;feathers&lt;/div&gt;
77
+ &lt;/sonic-link&gt;
78
+ &lt;sonic-link href=&quot;https://lucide.dev/&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
79
+ &lt;sonic-icon library=&quot;lucide&quot; name=&quot;album&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
80
+ &lt;br&gt;
81
+ &lt;div class=&quot;text-xs mt-1&quot;&gt;lucide&lt;/div&gt;
82
+ &lt;/sonic-link&gt;
83
+ &lt;/div&gt;
84
+ </code></pre>
85
+ <h2 id="size">Size</h2>
86
+ <pre><code>&lt;div class=&quot;grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8&quot;&gt;
87
+ &lt;div class=&quot;text-center&quot;&gt;
88
+ &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;2xs&quot;&gt;&lt;/sonic-icon&gt;
89
+ &lt;br&gt;
90
+ &lt;div class=&quot;text-xs mt-1&quot;&gt;2xs&lt;/div&gt;
91
+ &lt;/div&gt;
92
+ &lt;div class=&quot;text-center&quot;&gt;
93
+ &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;xs&quot;&gt;&lt;/sonic-icon&gt;
94
+ &lt;br&gt;
95
+ &lt;div class=&quot;text-xs mt-1&quot;&gt;xs&lt;/div&gt;
96
+ &lt;/div&gt;
97
+ &lt;div class=&quot;text-center&quot;&gt;
98
+ &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;sm&quot;&gt;&lt;/sonic-icon&gt;
99
+ &lt;br&gt;
100
+ &lt;div class=&quot;text-xs mt-1&quot;&gt;sm&lt;/div&gt;
101
+ &lt;/div&gt;
102
+ &lt;div class=&quot;text-center&quot;&gt;
103
+ &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot;&gt;&lt;/sonic-icon&gt;
104
+ &lt;br&gt;
105
+ &lt;div class=&quot;text-xs mt-1&quot;&gt;default&lt;/div&gt;
106
+ &lt;/div&gt;
107
+ &lt;div class=&quot;text-center&quot;&gt;
108
+ &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
109
+ &lt;br&gt;
110
+ &lt;div class=&quot;text-xs mt-1&quot;&gt;lg&lt;/div&gt;
111
+ &lt;/div&gt;
112
+ &lt;div class=&quot;text-center&quot;&gt;
113
+ &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;xl&quot;&gt;&lt;/sonic-icon&gt;
114
+ &lt;br&gt;
115
+ &lt;div class=&quot;text-xs mt-1&quot;&gt;xl&lt;/div&gt;
116
+ &lt;/div&gt;
117
+ &lt;div class=&quot;text-center&quot;&gt;
118
+ &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;2xl&quot;&gt;&lt;/sonic-icon&gt;
119
+ &lt;br&gt;
120
+ &lt;div class=&quot;text-xs mt-1&quot;&gt;2xl&lt;/div&gt;
121
+ &lt;/div&gt;
122
+ &lt;div class=&quot;text-center&quot;&gt;
123
+ &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;3xl&quot;&gt;&lt;/sonic-icon&gt;
124
+ &lt;br&gt;
125
+ &lt;div class=&quot;text-xs mt-1&quot;&gt;3xl&lt;/div&gt;
126
+ &lt;/div&gt;
127
+ &lt;/div&gt;
128
+ </code></pre>
129
+
130
+ </article>
131
+ </main>
132
+ </body>
133
+ </html>
package/docs/crawl/core/components/ui/image/image.html ADDED
@@ -0,0 +1,186 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/image/image.html" data-doc-id="core/components/ui/image/image">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Image — Concorde</title>
7
+ <meta name="description" content="Responsive &lt;img&gt; wrapper: aspect ratio, object-fit: cover, rounded corners, and optional fade-in on load. The host uses a light placeholder background (--sc-placeholder-bg) until the file is ready. De">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/image/image, image, Image, UI component, sonic-image, web component, , object-fit: cover, --sc-placeholder-bg, loading, lazy, loading=&quot;eager&quot;, rounded, --sc-rounded, sm">
9
+ <meta name="concorde-doc-id" content="core/components/ui/image/image">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/image/image.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/image/image.md/image" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Image</strong>. Responsive &lt;img&gt; wrapper: aspect ratio, object-fit: cover, rounded corners, and optional fade-in on load. The host uses a light placeholder background (--sc-placeholder-bg) until the file is ready. De <span>Doc ID: <code>core/components/ui/image/image</code>. Keywords: Concorde, supersoniks, core/components/ui/image/image, image, Image, UI component, sonic-image, web component, , object-fit: cover, --sc-placeholder-bg, loading, lazy, loading=&quot;eager&quot;, rounded, --sc-rounded, sm. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/image/image.html">https://concorde.supersoniks.org/crawl/core/components/ui/image/image.html</a>.</span></p>
19
+ <h1 id="image">Image</h1>
20
+ <p>Responsive <strong><code>&lt;img&gt;</code></strong> wrapper: aspect ratio, <code>object-fit: cover</code>, rounded corners, and optional fade-in on load. The host uses a light placeholder background (<code>--sc-placeholder-bg</code>) until the file is ready. Default <strong><code>loading</code></strong> is <code>lazy</code>; set <strong><code>loading=&quot;eager&quot;</code></strong> for above-the-fold heroes.</p>
21
+ <h2 id="rounded">Rounded</h2>
22
+ <p>Omit <code>rounded</code> for square corners. Boolean <strong><code>rounded</code></strong> uses the theme token <code>--sc-rounded</code>. Sizes: <strong><code>sm</code></strong>, <strong><code>md</code></strong>, <strong><code>lg</code></strong>, <strong><code>xl</code></strong>, <strong><code>full</code></strong> (circle — pair with <code>ratio=&quot;1/1&quot;</code>), <strong><code>none</code></strong> (explicit reset).</p>
23
+ <pre><code>&lt;div class=&quot;grid gap-6 grid-cols-3 lg:grid-cols-4 items-end text-center text-xs &quot;&gt;
24
+ &lt;div&gt;
25
+ &lt;sonic-image
26
+ ratio=&quot;1/1&quot;
27
+ src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
28
+ &gt;&lt;/sonic-image&gt;
29
+ &lt;p class=&quot;mt-2&quot;&gt;default&lt;/p&gt;
30
+ &lt;/div&gt;
31
+ &lt;div&gt;
32
+ &lt;sonic-image
33
+ rounded=&quot;sm&quot;
34
+ ratio=&quot;1/1&quot;
35
+ src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
36
+ &gt;&lt;/sonic-image&gt;
37
+ &lt;p class=&quot;mt-2&quot;&gt;sm&lt;/p&gt;
38
+ &lt;/div&gt;
39
+ &lt;div&gt;
40
+ &lt;sonic-image
41
+ rounded
42
+ ratio=&quot;1/1&quot;
43
+ src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
44
+ &gt;&lt;/sonic-image&gt;
45
+ &lt;p class=&quot;mt-2&quot;&gt;rounded&lt;/p&gt;
46
+ &lt;/div&gt;
47
+ &lt;div&gt;
48
+ &lt;sonic-image
49
+ rounded=&quot;md&quot;
50
+ ratio=&quot;1/1&quot;
51
+ src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
52
+ &gt;&lt;/sonic-image&gt;
53
+ &lt;p class=&quot;mt-2&quot;&gt;md&lt;/p&gt;
54
+ &lt;/div&gt;
55
+ &lt;div&gt;
56
+ &lt;sonic-image
57
+ rounded=&quot;lg&quot;
58
+ ratio=&quot;1/1&quot;
59
+ src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
60
+ &gt;&lt;/sonic-image&gt;
61
+ &lt;p class=&quot;mt-2&quot;&gt;lg&lt;/p&gt;
62
+ &lt;/div&gt;
63
+ &lt;div&gt;
64
+ &lt;sonic-image
65
+ rounded=&quot;xl&quot;
66
+ ratio=&quot;1/1&quot;
67
+ src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
68
+ &gt;&lt;/sonic-image&gt;
69
+ &lt;p class=&quot;mt-2&quot;&gt;xl&lt;/p&gt;
70
+ &lt;/div&gt;
71
+ &lt;div &gt;
72
+ &lt;div &gt;
73
+ &lt;sonic-image
74
+ rounded=&quot;full&quot;
75
+ ratio=&quot;1/1&quot;
76
+ src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
77
+ &gt;&lt;/sonic-image&gt;
78
+ &lt;p class=&quot;mt-2&quot;&gt;full&lt;/p&gt;
79
+ &lt;/div&gt;
80
+ &lt;/div&gt;
81
+ &lt;/div&gt;
82
+ </code></pre>
83
+ <h2 id="aspect-ratio">Aspect ratio</h2>
84
+ <p><strong><code>ratio</code></strong> sets CSS <code>aspect-ratio</code> on the image (default <strong><code>auto</code></strong>). The image still fills the host width (<code>width: 100%</code>).</p>
85
+ <pre><code>&lt;div class=&quot;grid gap-8 grid-cols-2 items-center&quot;&gt;
86
+ &lt;sonic-image
87
+ src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
88
+ &gt;&lt;/sonic-image&gt;
89
+ &lt;sonic-image
90
+ ratio=&quot;16/9&quot;
91
+ src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
92
+ &gt;&lt;/sonic-image&gt;
93
+ &lt;sonic-image
94
+ ratio=&quot;1/1&quot;
95
+ src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
96
+ &gt;&lt;/sonic-image&gt;
97
+ &lt;sonic-image
98
+ ratio=&quot;2/3&quot;
99
+ src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
100
+ &gt;&lt;/sonic-image&gt;
101
+ &lt;/div&gt;
102
+ </code></pre>
103
+ <h2 id="object-position">Object position</h2>
104
+ <p><strong><code>objectPosition</code></strong> maps to CSS <code>object-position</code> (default <strong><code>center center</code></strong>). Useful on wide crops when the subject sits off-center.</p>
105
+ <pre><code>&lt;div class=&quot;grid gap-8 grid-cols-2 items-center&quot;&gt;
106
+ &lt;sonic-image
107
+ ratio=&quot;11/4&quot;
108
+ src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
109
+ &gt;&lt;/sonic-image&gt;
110
+ &lt;sonic-image
111
+ objectPosition=&quot;center top&quot;
112
+ ratio=&quot;11/4&quot;
113
+ src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
114
+ &gt;&lt;/sonic-image&gt;
115
+ &lt;/div&gt;
116
+ </code></pre>
117
+ <h2 id="cover">Cover</h2>
118
+ <p><strong><code>cover</code></strong> stretches the image to fill a <strong>positioned</strong> parent (<code>position: relative</code> + fixed height or inset). Aspect ratio on the host is ignored while <code>cover</code> is set.</p>
119
+ <pre><code>&lt;div class=&quot;h-96 relative rounded-lg overflow-hidden&quot;&gt;
120
+ &lt;sonic-image
121
+ cover
122
+ src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
123
+ &gt;&lt;/sonic-image&gt;
124
+ &lt;/div&gt;
125
+ </code></pre>
126
+ <h2 id="load-transition">Load transition</h2>
127
+ <p>Set <strong><code>transition</code></strong> to <strong><code>fade</code></strong> (default when the attribute is present) or <strong><code>fade-scale-out</code></strong>. The image stays at <code>opacity: 0</code> until the browser fires <strong><code>load</code></strong>, then the <strong><code>loaded</code></strong> class runs the animation. Changing <code>src</code> on an existing element does not replay the effect — mount a new <code>sonic-image</code> when you need another entrance (galleries, infinite scroll).</p>
128
+ <p>Click <strong>Add image</strong> to append small thumbnails and replay the transition. <strong>Clear</strong> resets the row.</p>
129
+ <pre><code>&lt;div class=&quot;flex flex-wrap gap-2 mb-4&quot;&gt;
130
+ &lt;sonic-button
131
+ size=&quot;sm&quot;
132
+ onclick=&quot;(function () {
133
+ var host = document.getElementById(&#39;sonic-image-transition-host&#39;);
134
+ var img = document.createElement(&#39;sonic-image&#39;);
135
+ img.transition = &#39;fade&#39;;
136
+ img.ratio = &#39;1/1&#39;;
137
+ img.rounded = &#39;md&#39;;
138
+ img.loading = &#39;eager&#39;;
139
+ img.style.width = &#39;5rem&#39;;
140
+ img.src = &#39;https://picsum.photos/seed/&#39; + Date.now() + &#39;/120/120&#39;;
141
+ host.appendChild(img);
142
+ })()&quot;
143
+ &gt;
144
+ Add image (fade)
145
+ &lt;/sonic-button&gt;
146
+ &lt;sonic-button
147
+ size=&quot;sm&quot;
148
+ variant=&quot;outline&quot;
149
+ onclick=&quot;(function () {
150
+ var host = document.getElementById(&#39;sonic-image-transition-host&#39;);
151
+ var img = document.createElement(&#39;sonic-image&#39;);
152
+ img.transition = &#39;fade-scale-out&#39;;
153
+ img.ratio = &#39;1/1&#39;;
154
+ img.rounded = &#39;md&#39;;
155
+ img.loading = &#39;eager&#39;;
156
+ img.style.width = &#39;5rem&#39;;
157
+ img.src = &#39;https://picsum.photos/seed/&#39; + Date.now() + &#39;/120/120&#39;;
158
+ host.appendChild(img);
159
+ })()&quot;
160
+ &gt;
161
+ Add image (fade-scale-out)
162
+ &lt;/sonic-button&gt;
163
+ &lt;sonic-button
164
+ size=&quot;sm&quot;
165
+ variant=&quot;ghost&quot;
166
+ onclick=&quot;document.getElementById(&#39;sonic-image-transition-host&#39;).replaceChildren()&quot;
167
+ &gt;
168
+ Clear
169
+ &lt;/sonic-button&gt;
170
+ &lt;/div&gt;
171
+ &lt;div id=&quot;sonic-image-transition-host&quot; class=&quot;flex flex-wrap gap-2 min-h-[5rem]&quot;&gt;&lt;/div&gt;
172
+ </code></pre>
173
+ <h2 id="accessibility-and-parts">Accessibility and parts</h2>
174
+ <p>Always set meaningful <strong><code>alt</code></strong> text (empty string only for decorative images). </p>
175
+ <pre><code>&lt;sonic-image
176
+ rounded=&quot;md&quot;
177
+ ratio=&quot;16/9&quot;
178
+ alt=&quot;Concorde aircraft in flight&quot;
179
+ src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
180
+ &gt;&lt;/sonic-image&gt;
181
+ </code></pre>
182
+
183
+ </article>
184
+ </main>
185
+ </body>
186
+ </html>
package/docs/crawl/core/components/ui/link/link.html ADDED
@@ -0,0 +1,42 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/link/link.html" data-doc-id="core/components/ui/link/link">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Link — Concorde</title>
7
+ <meta name="description" content="Link: Basic link with href attribute">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/link/link, link, Link, UI component, sonic-link, web component">
9
+ <meta name="concorde-doc-id" content="core/components/ui/link/link">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/link/link.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/link/link.md/link" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Link</strong>. Link: Basic link with href attribute <span>Doc ID: <code>core/components/ui/link/link</code>. Keywords: Concorde, supersoniks, core/components/ui/link/link, link, Link, UI component, sonic-link, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/link/link.html">https://concorde.supersoniks.org/crawl/core/components/ui/link/link.html</a>.</span></p>
19
+ <h1 id="link">Link</h1>
20
+ <h2 id="href">Href</h2>
21
+ <pre><code>&lt;sonic-link href=&quot;/&quot;&gt;Basic link with href attribute&lt;/sonic-link&gt;
22
+ </code></pre>
23
+ <h2 id="target">Target</h2>
24
+ <pre><code>&lt;sonic-link href=&quot;/&quot; target=&quot;_blank&quot;&gt;Link with target attribute&lt;/sonic-link&gt;
25
+ </code></pre>
26
+ <h2 id="autoactive">AutoActive</h2>
27
+ <pre><code>&lt;sonic-link href=&quot;/#core/components&quot; class=&quot;[&amp;[active]]:text-success&quot;&gt;autoActive partial (default)&lt;/sonic-link&gt;
28
+ </code></pre>
29
+ <h3 id="autoactive-strict-vs-partial">AutoActive Strict vs partial</h3>
30
+ <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
31
+ &lt;sonic-link href=&quot;/#core&quot; autoActive=&quot;strict&quot; class=&quot;[&amp;[active]]:text-success&quot;&gt;autoActive strict&lt;/sonic-link&gt;
32
+ &lt;sonic-link href=&quot;/./link.html#link&quot; autoActive=&quot;strict&quot; class=&quot;[&amp;[active]]:text-success&quot;&gt;autoActive strict&lt;/sonic-link&gt;
33
+ &lt;/div&gt;
34
+ </code></pre>
35
+ <h3 id="autoactive-disabled">AutoActive disabled</h3>
36
+ <pre><code>&lt;sonic-link href=&quot;/./link.html#link&quot; autoActive=&quot;disabled&quot; class=&quot;[&amp;[active]]:text-success&quot;&gt;autoActive disabled&lt;/sonic-link&gt;
37
+ </code></pre>
38
+
39
+ </article>
40
+ </main>
41
+ </body>
42
+ </html>
package/docs/crawl/core/components/ui/loader/loader.html ADDED
@@ -0,0 +1,50 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/loader/loader.html" data-doc-id="core/components/ui/loader/loader">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Loader — Concorde</title>
7
+ <meta name="description" content="import {Loader} from &quot;@supersoniks/concorde/core/components/ui/loader/loader&quot;;">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/loader/loader, loader, Loader, UI component, sonic-loader, web component">
9
+ <meta name="concorde-doc-id" content="core/components/ui/loader/loader">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/loader/loader.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/loader/loader.md/loader" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Loader</strong>. import {Loader} from &quot;@supersoniks/concorde/core/components/ui/loader/loader&quot;; <span>Doc ID: <code>core/components/ui/loader/loader</code>. Keywords: Concorde, supersoniks, core/components/ui/loader/loader, loader, Loader, UI component, sonic-loader, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/loader/loader.html">https://concorde.supersoniks.org/crawl/core/components/ui/loader/loader.html</a>.</span></p>
19
+ <h1 id="loader">Loader</h1>
20
+ <h2 id="inline-mode">Inline mode</h2>
21
+ <pre><code>&lt;sonic-loader mode=&quot;inline&quot;&gt;&lt;/sonic-loader&gt;
22
+ </code></pre>
23
+ <h2 id="currentcolor">CurrentColor</h2>
24
+ <pre><code>&lt;sonic-loader mode=&quot;inline&quot; currentColor style=&quot;color:purple;&quot;&gt;&lt;/sonic-loader&gt;
25
+ </code></pre>
26
+ <h2 id="align">Align</h2>
27
+ <pre><code>&lt;sonic-loader mode=&quot;inline&quot; align=&quot;left&quot;&gt;&lt;/sonic-loader&gt;
28
+ &lt;sonic-loader mode=&quot;inline&quot; align=&quot;center&quot;&gt;&lt;/sonic-loader&gt;
29
+ &lt;sonic-loader mode=&quot;inline&quot; align=&quot;right&quot;&gt;&lt;/sonic-loader&gt;
30
+ </code></pre>
31
+ <h2 id="fixed-mode">Fixed mode</h2>
32
+ <p><docs-lit-demo for="docs-toggle-loader-demo"></docs-lit-demo></p>
33
+ <h2 id="loading-button">Loading button</h2>
34
+ <pre><code>&lt;sonic-button loading&gt;A loading button&lt;/sonic-button&gt;
35
+ </code></pre>
36
+ <h2 id="hide--show-programmatically">Hide / show programmatically</h2>
37
+ <pre><code class="language-javascript">import {Loader} from &quot;@supersoniks/concorde/core/components/ui/loader/loader&quot;;
38
+ // Show
39
+ Loader.show({
40
+ mode:&quot;fixed&quot; // optional : fixed | inline
41
+ container : document.querySelector(&#39;#foo&#39;) // optional, default : parent sonic-theme || document.body
42
+ });
43
+ // Hide
44
+ Loader.hide();
45
+ </code></pre>
46
+
47
+ </article>
48
+ </main>
49
+ </body>
50
+ </html>