@supersoniks/concorde 5.0.5 → 5.1.0

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 (168) hide show
  1. package/.github/workflows/ci.yml +21 -0
  2. package/.github-export-ignore +30 -0
  3. package/.tmp-cem/custom-elements.json +13705 -0
  4. package/CONTRIBUTING.md +59 -0
  5. package/DEV.md +54 -0
  6. package/LICENSE +21 -0
  7. package/OPEN_SOURCE_CHECKPOINT.md +133 -0
  8. package/build-infos.json +1 -1
  9. package/concorde-3d.bundle.js +3960 -0
  10. package/concorde-3d.es.js +33433 -0
  11. package/concorde-core.bundle.js +196 -196
  12. package/concorde-core.es.js +3685 -3405
  13. package/concorde-hugging-face-infer.bundle.js +32 -0
  14. package/concorde-hugging-face-infer.es.js +2952 -0
  15. package/concorde-interactive.bundle.js +1157 -0
  16. package/concorde-interactive.es.js +10734 -0
  17. package/concorde-shader.bundle.js +116 -0
  18. package/concorde-shader.es.js +8353 -0
  19. package/concorde-webgpu.bundle.js +307 -0
  20. package/concorde-webgpu.es.js +8627 -0
  21. package/custom-elements-manifest.config.mjs +14 -0
  22. package/dist/concorde-core.bundle.js +196 -196
  23. package/dist/concorde-core.es.js +3685 -3405
  24. package/docs/assets/{index-wVZpLVYW.js → index-D8MVWqY6.js} +1351 -1222
  25. package/docs/assets/index-DiD0qYvE.css +1 -0
  26. package/docs/crawl/core/components/ui/alert/alert.html +71 -172
  27. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +5 -113
  28. package/docs/crawl/core/components/ui/badge/badge.html +79 -157
  29. package/docs/crawl/core/components/ui/button/button.html +0 -1
  30. package/docs/crawl/core/components/ui/captcha/captcha.html +8 -90
  31. package/docs/crawl/core/components/ui/card/card.html +68 -222
  32. package/docs/crawl/core/components/ui/divider/divider.html +31 -117
  33. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +101 -232
  34. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +52 -95
  35. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +38 -97
  36. package/docs/crawl/core/components/ui/form/input/input.html +3 -3
  37. package/docs/crawl/core/components/ui/form/textarea/textarea.html +3 -3
  38. package/docs/crawl/core/components/ui/group/group.html +38 -60
  39. package/docs/crawl/core/components/ui/icon/icon.html +47 -136
  40. package/docs/crawl/core/components/ui/image/image.html +56 -244
  41. package/docs/crawl/core/components/ui/link/link.html +9 -67
  42. package/docs/crawl/core/components/ui/loader/loader.html +23 -97
  43. package/docs/crawl/core/components/ui/menu/menu.html +90 -162
  44. package/docs/crawl/core/components/ui/modal/modal.html +50 -275
  45. package/docs/crawl/core/components/ui/pop/pop.html +66 -260
  46. package/docs/crawl/core/components/ui/progress/progress.html +30 -103
  47. package/docs/crawl/core/components/ui/table/table.html +171 -303
  48. package/docs/crawl/core/components/ui/toast/toast.html +59 -170
  49. package/docs/crawl/core/components/ui/tooltip/tooltip.html +29 -90
  50. package/docs/crawl/docs/_decorators/ancestor-attribute.html +2 -3
  51. package/docs/crawl/docs/_getting-started/concorde-outside.html +3 -3
  52. package/docs/crawl/docs/_getting-started/start.html +1 -1
  53. package/docs/crawl/docs/_getting-started/theming.html +63 -311
  54. package/docs/crawl/hubs/form-components.html +53 -75
  55. package/docs/crawl/index.html +6 -7
  56. package/docs/docs-mock-api-sw.js +0 -2
  57. package/docs/docs-mock-api-sw.js.map +2 -2
  58. package/docs/index.html +7 -9
  59. package/docs/llms-full.txt +456 -1703
  60. package/docs/llms.txt +32 -25
  61. package/docs/sitemap.xml +0 -3
  62. package/docs/src/core/components/functional/fetch/fetch.md +0 -0
  63. package/docs/src/core/components/functional/if/if.md +0 -0
  64. package/docs/src/core/components/functional/list/list.md +0 -0
  65. package/docs/src/core/components/functional/router/router.md +0 -0
  66. package/docs/src/core/components/functional/sdui/sdui.md +0 -0
  67. package/docs/src/core/components/functional/states/states.md +0 -0
  68. package/docs/src/core/components/functional/submit/submit.md +0 -0
  69. package/docs/src/core/components/ui/alert/alert.md +72 -147
  70. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -85
  71. package/docs/src/core/components/ui/badge/badge.md +80 -141
  72. package/docs/src/core/components/ui/button/button.md +0 -1
  73. package/docs/src/core/components/ui/captcha/captcha.md +6 -65
  74. package/docs/src/core/components/ui/card/card.md +65 -183
  75. package/docs/src/core/components/ui/divider/divider.md +13 -107
  76. package/docs/src/core/components/ui/form/fieldset/fieldset.md +99 -175
  77. package/docs/src/core/components/ui/form/form-actions/form-actions.md +52 -75
  78. package/docs/src/core/components/ui/form/form-layout/form-layout.md +34 -109
  79. package/docs/src/core/components/ui/form/input/input.md +1 -1
  80. package/docs/src/core/components/ui/form/radio/radio.md +0 -0
  81. package/docs/src/core/components/ui/form/select/select.md +0 -0
  82. package/docs/src/core/components/ui/form/switch/switch.md +0 -0
  83. package/docs/src/core/components/ui/form/textarea/textarea.md +1 -1
  84. package/docs/src/core/components/ui/group/group.md +36 -36
  85. package/docs/src/core/components/ui/icon/icon.md +43 -132
  86. package/docs/src/core/components/ui/image/image.md +53 -179
  87. package/docs/src/core/components/ui/link/link.md +7 -45
  88. package/docs/src/core/components/ui/loader/loader.md +22 -79
  89. package/docs/src/core/components/ui/menu/menu.md +92 -133
  90. package/docs/src/core/components/ui/modal/modal.md +47 -163
  91. package/docs/src/core/components/ui/pop/pop.md +64 -262
  92. package/docs/src/core/components/ui/progress/progress.md +30 -76
  93. package/docs/src/core/components/ui/table/table.md +171 -147
  94. package/docs/src/core/components/ui/toast/toast.md +58 -108
  95. package/docs/src/core/components/ui/tooltip/tooltip.md +26 -68
  96. package/docs/src/docs/_core-concept/subscriber.md +0 -0
  97. package/docs/src/docs/_decorators/ancestor-attribute.md +2 -3
  98. package/docs/src/docs/_getting-started/concorde-outside.md +3 -3
  99. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -0
  100. package/docs/src/docs/_getting-started/pubsub.md +0 -0
  101. package/docs/src/docs/_getting-started/start.md +1 -1
  102. package/docs/src/docs/_getting-started/theming.md +61 -223
  103. package/docs/src/docs/search/docs-search.json +348 -3083
  104. package/docs/src/tsconfig.declarations.json +22 -0
  105. package/docs/src/tsconfig.emit.json +23 -0
  106. package/docs/src/tsconfig.json +3 -63
  107. package/gitlab/job_github_mirror.sh +39 -0
  108. package/package.json +36 -2
  109. package/scripts/generate-sdui-catalog.mjs +250 -0
  110. package/scripts/generate-sdui-catalog.spec.ts +91 -0
  111. package/scripts/github-export.mjs +150 -0
  112. package/scripts/post-build-docs.js +0 -0
  113. package/scripts/post-build.mjs +0 -0
  114. package/scripts/pre-build.mjs +15 -0
  115. package/src/core/components/functional/fetch/fetch.md +0 -0
  116. package/src/core/components/functional/if/if.md +0 -0
  117. package/src/core/components/functional/if/if.ts +0 -0
  118. package/src/core/components/functional/list/list.demo.ts +0 -0
  119. package/src/core/components/functional/list/list.md +0 -0
  120. package/src/core/components/functional/router/router.md +0 -0
  121. package/src/core/components/functional/router/router.ts +0 -0
  122. package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +5 -5
  123. package/src/core/components/functional/sdui/__fixtures__/descriptors.ts +251 -0
  124. package/src/core/components/functional/sdui/__snapshots__/sdui-action.spec.ts.snap +73 -0
  125. package/src/core/components/functional/sdui/__snapshots__/sdui-incremental.spec.ts.snap +50 -0
  126. package/src/core/components/functional/sdui/__snapshots__/sdui-partial.spec.ts.snap +50 -0
  127. package/src/core/components/functional/sdui/__snapshots__/sdui.regression.spec.ts.snap +461 -0
  128. package/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
  129. package/src/core/components/functional/sdui/component-catalog.json +3103 -0
  130. package/src/core/components/functional/sdui/component-catalog.spec.ts +23 -0
  131. package/src/core/components/functional/sdui/sdui-action.spec.ts +99 -0
  132. package/src/core/components/functional/sdui/sdui-dom-snapshot.ts +61 -0
  133. package/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
  134. package/src/core/components/functional/sdui/sdui-incremental.spec.ts +137 -0
  135. package/src/core/components/functional/sdui/sdui-partial.spec.ts +83 -0
  136. package/src/core/components/functional/sdui/sdui-partial.ts +19 -0
  137. package/src/core/components/functional/sdui/sdui-safe.spec.ts +188 -0
  138. package/src/core/components/functional/sdui/sdui-safe.ts +100 -0
  139. package/src/core/components/functional/sdui/sdui.md +122 -0
  140. package/src/core/components/functional/sdui/sdui.regression.spec.ts +64 -0
  141. package/src/core/components/functional/sdui/sdui.ts +442 -34
  142. package/src/core/components/functional/sdui/types.ts +49 -0
  143. package/src/core/components/functional/states/states.md +0 -0
  144. package/src/core/components/functional/submit/submit.md +0 -0
  145. package/src/core/components/functional/subscriber/subscriber.ts +0 -0
  146. package/src/core/components/functional/value/value.ts +0 -0
  147. package/src/core/components/ui/_css/size.ts +0 -0
  148. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  149. package/src/core/components/ui/form/radio/radio.md +0 -0
  150. package/src/core/components/ui/form/select/select.md +0 -0
  151. package/src/core/components/ui/form/switch/switch.md +0 -0
  152. package/src/core/mixins/Subscriber.ts +0 -0
  153. package/src/core/utils/DataBindObserver.ts +0 -0
  154. package/src/core/utils/Objects.ts +0 -0
  155. package/src/core/utils/route.ts +0 -0
  156. package/src/css.d.ts +19 -0
  157. package/src/docs/_core-concept/subscriber.md +0 -0
  158. package/src/docs/_getting-started/my-first-subscriber.md +0 -0
  159. package/src/docs/_getting-started/pubsub.md +0 -0
  160. package/src/docs/example/users.ts +0 -0
  161. package/src/docs/search/page.ts +0 -0
  162. package/src/tsconfig.declarations.json +22 -0
  163. package/src/tsconfig.emit.json +23 -0
  164. package/src/tsconfig.json +90 -0
  165. package/src/tsconfig.tsbuildinfo +1 -1
  166. package/docs/assets/index-CD4WyL6o.css +0 -1
  167. package/docs/crawl/core/components/ui/theme/theme.html +0 -131
  168. package/docs/src/core/components/ui/theme/theme.md +0 -122
@@ -3,9 +3,9 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Form layout — Concorde</title>
7
- <meta name="description" content="sonic-form-layout arranges slotted form controls in a responsive CSS grid with consistent vertical spacing. Pair sonic-input · sonic-select and sonic-input-autocomplete fields side by side when the ho">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/form-layout/form-layout, form-layout, Form layout, UI component, form, sonic-form-layout, web component, sonic-input, sonic-select, sonic-input-autocomplete, sonic-form-actions, sonic-fieldset, offsetWidth">
6
+ <title>Form-layout — Concorde</title>
7
+ <meta name="description" content="autocomplete=&quot;email&quot;">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/form-layout/form-layout, form-layout, Form-layout, UI component, form, sonic-form-layout, web component">
9
9
  <meta name="concorde-doc-id" content="core/components/ui/form/form-layout/form-layout">
10
10
  <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html">
11
11
  </head>
@@ -15,105 +15,46 @@
15
15
  </header>
16
16
  <main>
17
17
  <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Form layout</strong>. sonic-form-layout arranges slotted form controls in a responsive CSS grid with consistent vertical spacing. Pair sonic-input · sonic-select and sonic-input-autocomplete fields side by side when the ho <span>Doc ID: <code>core/components/ui/form/form-layout/form-layout</code>. Keywords: Concorde, supersoniks, core/components/ui/form/form-layout/form-layout, form-layout, Form layout, UI component, form, sonic-form-layout, web component, sonic-input, sonic-select, sonic-input-autocomplete, sonic-form-actions, sonic-fieldset, offsetWidth. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html</a>.</span></p>
19
- <h1 id="form-layout">Form layout</h1>
20
- <p><strong><code>sonic-form-layout</code></strong> arranges slotted form controls in a <strong>responsive CSS grid</strong> with consistent vertical spacing. Pair <strong><code>sonic-input</code></strong> · <strong><code>sonic-select</code></strong> and <strong><code>sonic-input-autocomplete</code></strong> fields side by side when the host is wider than <strong>440px</strong>; <strong>textareas</strong>, <strong>toggles</strong>, <strong>dividers</strong>, and <strong><code>sonic-form-actions</code></strong> span the full width. Wrap a <strong><code>form</code></strong> or <strong><code>sonic-fieldset</code></strong> body—no attributes are required.</p>
21
- <h2 id="basic-example">Basic example</h2>
22
- <p>Typical registration-style form: short fields flow in two columns on wide layouts; long or grouped blocks stay full width.</p>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Form-layout</strong>. autocomplete=&quot;email&quot; <span>Doc ID: <code>core/components/ui/form/form-layout/form-layout</code>. Keywords: Concorde, supersoniks, core/components/ui/form/form-layout/form-layout, form-layout, Form-layout, UI component, form, sonic-form-layout, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html</a>.</span></p>
19
+ <h1 id="form-layout">Form-layout</h1>
23
20
  <pre><code>&lt;form&gt;
24
- &lt;sonic-form-layout&gt;
25
- &lt;sonic-input autocomplete=&quot;family-name&quot; label=&quot;Last name&quot; name=&quot;last_name&quot;&gt;&lt;/sonic-input&gt;
26
- &lt;sonic-input autocomplete=&quot;given-name&quot; label=&quot;First name&quot; name=&quot;first_name&quot;&gt;&lt;/sonic-input&gt;
27
- &lt;sonic-select autocomplete=&quot;sex&quot; label=&quot;Gender&quot; name=&quot;gender&quot;&gt;
28
- &lt;option value=&quot;&quot; selected=&quot;selected&quot;&gt;— Select —&lt;/option&gt;
29
- &lt;option value=&quot;prefer-not&quot;&gt;Prefer not to say&lt;/option&gt;
30
- &lt;option value=&quot;male&quot;&gt;Male&lt;/option&gt;
31
- &lt;option value=&quot;female&quot;&gt;Female&lt;/option&gt;
32
- &lt;/sonic-select&gt;
33
- &lt;sonic-input autocomplete=&quot;bday&quot; label=&quot;Date of birth&quot; name=&quot;birth_date&quot; type=&quot;date&quot;&gt;&lt;/sonic-input&gt;
34
- &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
35
- &lt;sonic-input autocomplete=&quot;email&quot; label=&quot;Email&quot; name=&quot;email&quot; type=&quot;email&quot;&gt;&lt;/sonic-input&gt;
36
- &lt;sonic-input
37
- autocomplete=&quot;email&quot;
38
- label=&quot;Confirm email&quot;
39
- name=&quot;email_confirmation&quot;
40
- type=&quot;email&quot;
41
- &gt;&lt;/sonic-input&gt;
42
- &lt;sonic-input autocomplete=&quot;new-password&quot; label=&quot;Password&quot; name=&quot;password&quot; type=&quot;password&quot;&gt;&lt;/sonic-input&gt;
43
- &lt;sonic-input
44
- autocomplete=&quot;new-password&quot;
45
- label=&quot;Confirm password&quot;
46
- name=&quot;password_confirmation&quot;
47
- type=&quot;password&quot;
48
- &gt;&lt;/sonic-input&gt;
49
- &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
50
- &lt;sonic-textarea label=&quot;Message&quot; rows=&quot;5&quot;&gt;&lt;/sonic-textarea&gt;
51
- &lt;sonic-switch&gt;Enable optional feature&lt;/sonic-switch&gt;
52
- &lt;sonic-checkbox&gt;Subscribe to newsletter&lt;/sonic-checkbox&gt;
53
- &lt;sonic-checkbox&gt;
54
- I accept the
55
- &lt;sonic-link href=&quot;#&quot; class=&quot;underline&quot;&gt;terms and conditions&lt;/sonic-link&gt;
56
- &lt;/sonic-checkbox&gt;
57
- &lt;sonic-form-actions&gt;
58
- &lt;sonic-button type=&quot;success&quot;&gt;Submit&lt;/sonic-button&gt;
59
- &lt;/sonic-form-actions&gt;
60
- &lt;/sonic-form-layout&gt;
61
- &lt;/form&gt;
62
- </code></pre>
63
- <h2 id="responsive-columns">Responsive columns</h2>
64
- <p>When the host <strong><code>offsetWidth</code></strong> is <strong>greater than 440px</strong>, the grid uses <strong>two equal columns</strong> with slightly larger gap (<strong>1.75rem</strong>). Below that breakpoint, fields stack in a <strong>single column</strong> (<strong>1.5rem</strong> gap).</p>
65
- <p>If the slot contains <strong>exactly one</strong> direct <strong><code>sonic-input</code></strong>, <strong><code>sonic-select</code></strong>, or <strong><code>sonic-input-autocomplete</code></strong>, the layout stays <strong>one column</strong> even above the breakpoint so a lone field does not sit in half an empty row.</p>
66
- <pre><code>&lt;div class=&quot;grid gap-8 md:grid-cols-2 mb-6&quot;&gt;
67
- &lt;div&gt;
68
- &lt;sonic-form-layout style=&quot;max-width: 20rem&quot;&gt;
69
- &lt;sonic-divider align=&quot;left&quot;&gt;Narrow host (single column)&lt;/sonic-divider&gt;
70
- &lt;sonic-input label=&quot;Email&quot; name=&quot;email_narrow&quot; type=&quot;email&quot;&gt;&lt;/sonic-input&gt;
71
- &lt;sonic-input label=&quot;Confirm email&quot; name=&quot;email_confirm_narrow&quot; type=&quot;email&quot;&gt;&lt;/sonic-input&gt;
72
- &lt;/sonic-form-layout&gt;
73
- &lt;/div&gt;
74
- &lt;/div&gt;
75
- &lt;div&gt;
76
- &lt;sonic-form-layout&gt;
77
- &lt;sonic-divider align=&quot;left&quot;&gt;Wide host (two columns for inputs)&lt;/sonic-divider&gt;
78
- &lt;sonic-input label=&quot;Email&quot; name=&quot;email_wide&quot; type=&quot;email&quot;&gt;&lt;/sonic-input&gt;
79
- &lt;sonic-input label=&quot;Confirm email&quot; name=&quot;email_confirm_wide&quot; type=&quot;email&quot;&gt;&lt;/sonic-input&gt;
80
- &lt;/sonic-form-layout&gt;
81
- &lt;/div&gt;
82
- </code></pre>
83
- <h2 id="full-width-slotted-blocks">Full-width slotted blocks</h2>
84
- <p>Everything except <strong><code>sonic-input</code></strong>, <strong><code>sonic-select</code></strong>, <strong><code>sonic-input-autocomplete</code></strong>, and slotted elements with class <strong><code>form-item-container</code></strong> is assigned <strong><code>grid-column: 1 / -1</code></strong>. Use this for <strong><code>sonic-textarea</code></strong>, <strong><code>sonic-checkbox</code></strong>, <strong><code>sonic-switch</code></strong>, <strong><code>sonic-form-actions</code></strong>, <strong><code>sonic-divider</code></strong>, and similar blocks.</p>
85
- <p>Slotted <strong><code>sonic-divider</code></strong> sets <strong><code>--sc-divider-my: 0</code></strong> so divider spacing matches the grid rhythm. Slotted <strong><code>sonic-submit</code></strong> uses <strong><code>display: contents</code></strong> so submit controls participate in the grid without an extra wrapper box.</p>
86
- <pre><code>&lt;sonic-form-layout&gt;
87
- &lt;sonic-input label=&quot;Subject&quot; name=&quot;subject&quot;&gt;&lt;/sonic-input&gt;
88
- &lt;sonic-textarea label=&quot;Details&quot; rows=&quot;4&quot;&gt;&lt;/sonic-textarea&gt;
21
+ &lt;sonic-form-layout&gt;
22
+ &lt;sonic-input autocomplete=&quot;family-name&quot; label=&quot;Nom&quot; name=&quot;nom&quot;&gt;&lt;/sonic-input&gt;
23
+ &lt;sonic-input autocomplete=&quot;given-name&quot; label=&quot;Prénom&quot; name=&quot;prenom&quot;&gt;&lt;/sonic-input&gt;
24
+ &lt;sonic-select autocomplete=&quot;sex&quot; label=&quot;Sexe&quot; name=&quot;sexe&quot;&gt;
25
+ &lt;option value=&quot;&quot; selected=&quot;selected&quot;&gt;- Sélectionner -&lt;/option&gt;
26
+ &lt;option value=&quot;-&quot;&gt;Je préfère ne pas le dire&lt;/option&gt;
27
+ &lt;option value=&quot;Homme&quot;&gt;Homme&lt;/option&gt;
28
+ &lt;option value=&quot;Femme&quot;&gt;Femme&lt;/option&gt;
29
+ &lt;/sonic-select&gt;
30
+ &lt;sonic-input autocomplete=&quot;bday&quot; label=&quot;Date de naissance&quot; name=&quot;date_naissance&quot; type=&quot;date&quot;&gt;&lt;/sonic-input&gt;
31
+ &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
32
+ &lt;sonic-input autocomplete=&quot;email&quot; label=&quot;e-mail&quot; name=&quot;email&quot; type=&quot;email&quot;&gt;&lt;/sonic-input&gt;
33
+ &lt;sonic-input
34
+ autocomplete=&quot;email&quot;
35
+ label=&quot;Confirmer votre e-mail&quot;
36
+ name=&quot;email_confirmation&quot;
37
+ type=&quot;email&quot;
38
+ &gt;&lt;/sonic-input&gt;
39
+ &lt;sonic-input autocomplete=&quot;new-password&quot; label=&quot;Mot de passe&quot; name=&quot;password&quot; type=&quot;password&quot;&gt;&lt;/sonic-input&gt;
40
+ &lt;sonic-input
41
+ autocomplete=&quot;new-password&quot;
42
+ label=&quot;Confirmer votre mot de passe&quot;
43
+ name=&quot;password_confirmation&quot;
44
+ type=&quot;password&quot;
45
+ &gt;&lt;/sonic-input&gt;
46
+ &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
47
+ &lt;sonic-textarea label=&quot;Message&quot; rows=&quot;5&quot;&gt;
48
+ &lt;/sonic-textarea&gt;
49
+ &lt;sonic-switch&gt;Activer une superbe option&lt;/sonic-switch&gt;
50
+ &lt;sonic-checkbox&gt;Inscription à la newsletter&lt;/sonic-checkbox&gt;
51
+ &lt;sonic-checkbox&gt;J&#39;ai lu et accepte les &lt;sonic-link href=&quot;#&quot; class=&quot;underline&quot;&gt;Conditions générales de ventes&lt;/sonic-link&gt;&lt;/sonic-checkbox&gt;
89
52
  &lt;sonic-form-actions&gt;
90
- &lt;sonic-button type=&quot;primary&quot;&gt;Send&lt;/sonic-button&gt;
53
+ &lt;sonic-button type=&quot;success&quot;&gt;Valider&lt;/sonic-button&gt;
91
54
  &lt;/sonic-form-actions&gt;
92
55
  &lt;/sonic-form-layout&gt;
56
+ &lt;/form &gt;
93
57
  </code></pre>
94
- <h2 id="custom-column-wrapper">Custom column wrapper</h2>
95
- <p>Add class <strong><code>form-item-container</code></strong> on a slotted wrapper (for example a <strong><code>div</code></strong>) when a field is not a direct <strong><code>sonic-input</code></strong> / <strong><code>sonic-select</code></strong> / <strong><code>sonic-input-autocomplete</code></strong> but should still share the two-column flow with short inputs.</p>
96
- <pre><code>&lt;sonic-form-layout&gt;
97
- &lt;sonic-input label=&quot;City&quot; name=&quot;city&quot;&gt;&lt;/sonic-input&gt;
98
- &lt;div class=&quot;form-item-container&quot;&gt;
99
- &lt;sonic-input label=&quot;Postal code&quot; name=&quot;postal_code&quot;&gt;&lt;/sonic-input&gt;
100
- &lt;/div&gt;
101
- &lt;/sonic-form-layout&gt;
102
- </code></pre>
103
- <h2 id="api-reference">API reference</h2>
104
- <p>No public attributes — layout follows slotted children and host width.</p>
105
- <table>
106
- <thead>
107
- <tr>
108
- <th>Slot</th>
109
- <th>Description</th>
110
- </tr>
111
- </thead>
112
- <tbody><tr>
113
- <td><em>(default)</em></td>
114
- <td>Form fields and blocks in visual order; column vs full-width rules apply per slotted tag or <strong><code>form-item-container</code></strong> class</td>
115
- </tr>
116
- </tbody></table>
117
58
 
118
59
  </article>
119
60
  </main>
@@ -4,7 +4,7 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Input — Concorde</title>
7
- <meta name="description" content="Native attributes list">
7
+ <meta name="description" content="Native attibutes list">
8
8
  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/input/input, input, Input, UI component, form, sonic-input, web component">
9
9
  <meta name="concorde-doc-id" content="core/components/ui/form/input/input">
10
10
  <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.html">
@@ -15,11 +15,11 @@
15
15
  </header>
16
16
  <main>
17
17
  <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Input</strong>. Native attributes list <span>Doc ID: <code>core/components/ui/form/input/input</code>. Keywords: Concorde, supersoniks, core/components/ui/form/input/input, input, Input, UI component, form, sonic-input, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.html</a>.</span></p>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Input</strong>. Native attibutes list <span>Doc ID: <code>core/components/ui/form/input/input</code>. Keywords: Concorde, supersoniks, core/components/ui/form/input/input, input, Input, UI component, form, sonic-input, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.html</a>.</span></p>
19
19
  <h1 id="input">Input</h1>
20
20
  <sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_input.asp#midcontentadcontainer">
21
21
  <sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
22
- Native attributes list
22
+ Native attibutes list
23
23
  </sonic-button>
24
24
 
25
25
  <h2 id="label">Label</h2>
@@ -4,7 +4,7 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Textarea — Concorde</title>
7
- <meta name="description" content="Native attributes list">
7
+ <meta name="description" content="Native attibutes list">
8
8
  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/textarea/textarea, textarea, Textarea, UI component, form, sonic-textarea, web component">
9
9
  <meta name="concorde-doc-id" content="core/components/ui/form/textarea/textarea">
10
10
  <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/textarea/textarea.html">
@@ -15,11 +15,11 @@
15
15
  </header>
16
16
  <main>
17
17
  <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Textarea</strong>. Native attributes list <span>Doc ID: <code>core/components/ui/form/textarea/textarea</code>. Keywords: Concorde, supersoniks, core/components/ui/form/textarea/textarea, textarea, Textarea, UI component, form, sonic-textarea, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/textarea/textarea.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/textarea/textarea.html</a>.</span></p>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Textarea</strong>. Native attibutes list <span>Doc ID: <code>core/components/ui/form/textarea/textarea</code>. Keywords: Concorde, supersoniks, core/components/ui/form/textarea/textarea, textarea, Textarea, UI component, form, sonic-textarea, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/textarea/textarea.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/textarea/textarea.html</a>.</span></p>
19
19
  <h1 id="textarea">Textarea</h1>
20
20
  <sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_textarea.asp#midcontentadcontainer">
21
21
  <sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
22
- Native attributes list
22
+ Native attibutes list
23
23
  </sonic-button>
24
24
 
25
25
 
@@ -4,8 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Group — Concorde</title>
7
- <meta name="description" content="sonic-group lays out slotted sonic-button · sonic-input and sonic-select controls in a single horizontal row with shared corner radius (first / middle / last items). Optional label and description fol">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/group/group, group, Group, UI component, sonic-group, web component, sonic-button, sonic-input, sonic-select, label, description, radio, name, formDataProvider">
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
9
  <meta name="concorde-doc-id" content="core/components/ui/group/group">
10
10
  <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/group/group.html">
11
11
  </head>
@@ -15,11 +15,9 @@
15
15
  </header>
16
16
  <main>
17
17
  <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Group</strong>. sonic-group lays out slotted sonic-button · sonic-input and sonic-select controls in a single horizontal row with shared corner radius (first / middle / last items). Optional label and description fol <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, sonic-button, sonic-input, sonic-select, label, description, radio, name, formDataProvider. 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>
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
19
  <h1 id="group">Group</h1>
20
- <p><strong><code>sonic-group</code></strong> lays out slotted <strong><code>sonic-button</code></strong> · <strong><code>sonic-input</code></strong> and <strong><code>sonic-select</code></strong> controls in a single horizontal row with <strong>shared corner radius</strong> (first / middle / last items). Optional <strong><code>label</code></strong> and <strong><code>description</code></strong> follow form field styling. Use it for <strong>button groups</strong>, <strong>radio rows</strong>, or <strong>input + action</strong> toolbars.</p>
21
20
  <h2 id="radio-group">Radio group</h2>
22
- <p>Pair with <strong><code>sonic-button</code></strong> <strong><code>radio</code></strong> and a shared <strong><code>name</code></strong>; ancestor <strong><code>formDataProvider</code></strong> stores the selected <strong><code>value</code></strong>.</p>
23
21
  <pre><code>&lt;sonic-group formDataProvider=&quot;subscriptionData&quot;&gt;
24
22
  &lt;sonic-button radio name=&quot;subscription&quot; value=&quot;standard&quot; type=&quot;default&quot;&gt;😎 Standard&lt;/sonic-button&gt;
25
23
  &lt;sonic-button radio checked name=&quot;subscription&quot; value=&quot;premium&quot; type=&quot;default&quot;&gt;⭐ Premium&lt;/sonic-button&gt;
@@ -27,76 +25,56 @@
27
25
  &lt;/sonic-group&gt;
28
26
  </code></pre>
29
27
  <h2 id="button-group">Button group</h2>
30
- <p>Adjacent link or action buttons without merging into one control.</p>
31
28
  <pre><code>&lt;sonic-group&gt;
32
- &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;
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;
33
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;
34
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;
35
32
  &lt;/sonic-group&gt;
36
33
  </code></pre>
37
34
  <h2 id="input-actions-prefix">Input actions prefix</h2>
38
- <p>Action control before the field. <strong><code>label</code></strong> or <strong><code>description</code></strong> on <strong><code>sonic-group</code></strong> annotate the row.</p>
39
- <pre><code>&lt;sonic-group label=&quot;Label&quot; description=&quot;Description&quot;&gt;
35
+ <pre><code>&lt;div class=&quot;grid grid-cols-3 gap-3&quot;&gt;
36
+ &lt;sonic-group&gt;
40
37
  &lt;sonic-button type=&quot;info&quot; shape=&quot;square&quot;&gt;
41
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;info-empty&quot;&gt;&lt;/sonic-icon&gt;
38
+ &lt;sonic-icon library=&quot;iconoir&quot; library=&quot;iconoir&quot; name=&quot;info-empty&quot;&gt;&lt;/sonic-icon&gt;
42
39
  &lt;/sonic-button&gt;
43
- &lt;sonic-input&gt;&lt;/sonic-input&gt;
40
+ &lt;sonic-input placeholder=&quot;placeholder&quot; &gt;&lt;/sonic-input&gt;
44
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;
45
55
  </code></pre>
46
56
  <h2 id="input-actions-suffix">Input actions suffix</h2>
47
- <p>Field first, action after (submit, validate, etc.).</p>
48
- <pre><code>&lt;sonic-group label=&quot;Label&quot; description=&quot;Description&quot;&gt;
49
- &lt;sonic-input&gt;&lt;/sonic-input&gt;
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;
50
72
  &lt;sonic-button type=&quot;primary&quot; shape=&quot;square&quot;&gt;
51
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;check&quot;&gt;&lt;/sonic-icon&gt;
73
+ &lt;sonic-icon library=&quot;iconoir&quot; library=&quot;iconoir&quot; name=&quot;check&quot;&gt;&lt;/sonic-icon&gt;
52
74
  &lt;/sonic-button&gt;
53
75
  &lt;/sonic-group&gt;
76
+ &lt;/div&gt;
54
77
  </code></pre>
55
- <h2 id="api-reference">API reference</h2>
56
- <table>
57
- <thead>
58
- <tr>
59
- <th>Attribute</th>
60
- <th>Values</th>
61
- <th>Description</th>
62
- </tr>
63
- </thead>
64
- <tbody><tr>
65
- <td><code>label</code></td>
66
- <td>string (HTML)</td>
67
- <td>Label above the row; <strong><code>slot=&quot;label&quot;</code></strong> overrides / extends</td>
68
- </tr>
69
- <tr>
70
- <td><code>description</code></td>
71
- <td>string (HTML)</td>
72
- <td>Help text below the row; <strong><code>slot=&quot;description&quot;</code></strong> overrides / extends</td>
73
- </tr>
74
- <tr>
75
- <td><code>alignItems</code></td>
76
- <td>CSS align-items (default <code>center</code>)</td>
77
- <td>Cross-axis alignment of the main flex row</td>
78
- </tr>
79
- </tbody></table>
80
- <table>
81
- <thead>
82
- <tr>
83
- <th>Slot</th>
84
- <th>Description</th>
85
- </tr>
86
- </thead>
87
- <tbody><tr>
88
- <td><em>(default)</em></td>
89
- <td><strong><code>sonic-button</code></strong> · <strong><code>sonic-input</code></strong> · <strong><code>sonic-select</code></strong> in visual order</td>
90
- </tr>
91
- <tr>
92
- <td><code>label</code></td>
93
- <td>Custom label markup</td>
94
- </tr>
95
- <tr>
96
- <td><code>description</code></td>
97
- <td>Custom description markup</td>
98
- </tr>
99
- </tbody></table>
100
78
 
101
79
  </article>
102
80
  </main>