@supersoniks/concorde 5.0.4 → 5.0.5

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 (208) hide show
  1. package/.agents/skills/concorde-component-docs/SKILL.md +194 -0
  2. package/.agents/skills/concorde-component-docs/template.md +45 -0
  3. package/ai/cursor/rules/concorde-theme.mdc +1 -1
  4. package/ai/cursor/rules/concorde.mdc +1 -1
  5. package/ai/skills/concorde/SKILL.md +1 -1
  6. package/ai/skills/concorde-theme/SKILL.md +21 -10
  7. package/build-infos.json +1 -1
  8. package/concorde-core.bundle.js +528 -534
  9. package/concorde-core.es.js +4257 -4212
  10. package/dist/concorde-core.bundle.js +528 -534
  11. package/dist/concorde-core.es.js +4257 -4212
  12. package/dist/docs-mock-api-sw.js +2 -0
  13. package/dist/docs-mock-api-sw.js.map +2 -2
  14. package/docs/assets/index-CD4WyL6o.css +1 -0
  15. package/docs/assets/{index-D8MVWqY6.js → index-wVZpLVYW.js} +1221 -1350
  16. package/docs/crawl/core/components/ui/alert/alert.html +172 -71
  17. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +113 -5
  18. package/docs/crawl/core/components/ui/badge/badge.html +157 -79
  19. package/docs/crawl/core/components/ui/button/button.html +1 -0
  20. package/docs/crawl/core/components/ui/captcha/captcha.html +90 -8
  21. package/docs/crawl/core/components/ui/card/card.html +222 -68
  22. package/docs/crawl/core/components/ui/divider/divider.html +117 -31
  23. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +232 -101
  24. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +95 -52
  25. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +97 -38
  26. package/docs/crawl/core/components/ui/form/input/input.html +3 -3
  27. package/docs/crawl/core/components/ui/form/textarea/textarea.html +3 -3
  28. package/docs/crawl/core/components/ui/group/group.html +60 -38
  29. package/docs/crawl/core/components/ui/icon/icon.html +136 -47
  30. package/docs/crawl/core/components/ui/image/image.html +244 -56
  31. package/docs/crawl/core/components/ui/link/link.html +67 -9
  32. package/docs/crawl/core/components/ui/loader/loader.html +97 -23
  33. package/docs/crawl/core/components/ui/menu/menu.html +162 -90
  34. package/docs/crawl/core/components/ui/modal/modal.html +275 -50
  35. package/docs/crawl/core/components/ui/pop/pop.html +260 -66
  36. package/docs/crawl/core/components/ui/progress/progress.html +103 -30
  37. package/docs/crawl/core/components/ui/table/table.html +303 -171
  38. package/docs/crawl/core/components/ui/theme/theme.html +131 -0
  39. package/docs/crawl/core/components/ui/toast/toast.html +170 -59
  40. package/docs/crawl/core/components/ui/tooltip/tooltip.html +90 -29
  41. package/docs/crawl/docs/_decorators/ancestor-attribute.html +3 -2
  42. package/docs/crawl/docs/_getting-started/concorde-outside.html +3 -3
  43. package/docs/crawl/docs/_getting-started/start.html +1 -1
  44. package/docs/crawl/docs/_getting-started/theming.html +311 -63
  45. package/docs/crawl/hubs/form-components.html +75 -53
  46. package/docs/crawl/index.html +7 -6
  47. package/docs/docs-mock-api-sw.js +2 -0
  48. package/docs/docs-mock-api-sw.js.map +2 -2
  49. package/docs/index.html +9 -7
  50. package/docs/llms-full.txt +1703 -456
  51. package/docs/llms.txt +25 -32
  52. package/docs/sitemap.xml +3 -0
  53. package/docs/src/core/components/functional/fetch/fetch.md +0 -0
  54. package/docs/src/core/components/functional/if/if.md +0 -0
  55. package/docs/src/core/components/functional/list/list.md +0 -0
  56. package/docs/src/core/components/functional/router/router.md +0 -0
  57. package/docs/src/core/components/functional/sdui/sdui.md +0 -0
  58. package/docs/src/core/components/functional/states/states.md +0 -0
  59. package/docs/src/core/components/functional/submit/submit.md +0 -0
  60. package/docs/src/core/components/ui/alert/alert.md +147 -72
  61. package/docs/src/core/components/ui/alert-messages/alert-messages.md +85 -0
  62. package/docs/src/core/components/ui/badge/badge.md +141 -80
  63. package/docs/src/core/components/ui/button/button.md +1 -0
  64. package/docs/src/core/components/ui/captcha/captcha.md +65 -6
  65. package/docs/src/core/components/ui/card/card.md +183 -65
  66. package/docs/src/core/components/ui/divider/divider.md +107 -13
  67. package/docs/src/core/components/ui/form/fieldset/fieldset.md +175 -99
  68. package/docs/src/core/components/ui/form/form-actions/form-actions.md +75 -52
  69. package/docs/src/core/components/ui/form/form-layout/form-layout.md +109 -34
  70. package/docs/src/core/components/ui/form/input/input.md +1 -1
  71. package/docs/src/core/components/ui/form/radio/radio.md +0 -0
  72. package/docs/src/core/components/ui/form/select/select.md +0 -0
  73. package/docs/src/core/components/ui/form/switch/switch.md +0 -0
  74. package/docs/src/core/components/ui/form/textarea/textarea.md +1 -1
  75. package/docs/src/core/components/ui/group/group.md +36 -36
  76. package/docs/src/core/components/ui/icon/icon.md +132 -43
  77. package/docs/src/core/components/ui/image/image.md +179 -53
  78. package/docs/src/core/components/ui/link/link.md +45 -7
  79. package/docs/src/core/components/ui/loader/loader.md +79 -22
  80. package/docs/src/core/components/ui/menu/menu.md +133 -92
  81. package/docs/src/core/components/ui/modal/modal.md +163 -47
  82. package/docs/src/core/components/ui/pop/pop.md +262 -64
  83. package/docs/src/core/components/ui/progress/progress.md +76 -30
  84. package/docs/src/core/components/ui/table/table.md +147 -171
  85. package/docs/src/core/components/ui/theme/theme.md +122 -0
  86. package/docs/src/core/components/ui/toast/toast.md +108 -58
  87. package/docs/src/core/components/ui/tooltip/tooltip.md +68 -26
  88. package/docs/src/docs/_core-concept/subscriber.md +0 -0
  89. package/docs/src/docs/_decorators/ancestor-attribute.md +3 -2
  90. package/docs/src/docs/_getting-started/concorde-outside.md +3 -3
  91. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -0
  92. package/docs/src/docs/_getting-started/pubsub.md +0 -0
  93. package/docs/src/docs/_getting-started/start.md +1 -1
  94. package/docs/src/docs/_getting-started/theming.md +223 -61
  95. package/docs/src/docs/search/docs-search.json +3083 -348
  96. package/docs/src/tsconfig.json +63 -3
  97. package/gitlab/job_tests.sh +0 -0
  98. package/index.html +4 -2
  99. package/package.json +7 -1
  100. package/public/docs-mock-api-sw.js +2 -0
  101. package/public/docs-mock-api-sw.js.map +2 -2
  102. package/scripts/post-build-docs.js +0 -0
  103. package/scripts/post-build.mjs +0 -0
  104. package/src/core/components/functional/fetch/fetch.md +0 -0
  105. package/src/core/components/functional/if/if.md +0 -0
  106. package/src/core/components/functional/list/list.demo.ts +0 -0
  107. package/src/core/components/functional/list/list.md +0 -0
  108. package/src/core/components/functional/router/router.md +0 -0
  109. package/src/core/components/functional/router/router.ts +0 -0
  110. package/src/core/components/functional/sdui/sdui.md +0 -0
  111. package/src/core/components/functional/states/states.md +0 -0
  112. package/src/core/components/functional/submit/submit.md +0 -0
  113. package/src/core/components/functional/subscriber/subscriber.ts +0 -0
  114. package/src/core/components/ui/_css/align.ts +1 -0
  115. package/src/core/components/ui/_css/size.ts +0 -0
  116. package/src/core/components/ui/_css/type.ts +86 -8
  117. package/src/core/components/ui/_i18n/ui-aria-labels.ts +8 -0
  118. package/src/core/components/ui/alert/alert.md +21 -2
  119. package/src/core/components/ui/alert-messages/alert-messages.md +85 -0
  120. package/src/core/components/ui/badge/badge.md +19 -6
  121. package/src/core/components/ui/badge/badge.ts +8 -9
  122. package/src/core/components/ui/button/button.ts +5 -15
  123. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  124. package/src/core/components/ui/captcha/captcha.md +65 -6
  125. package/src/core/components/ui/card/card.md +73 -10
  126. package/src/core/components/ui/card/card.ts +24 -22
  127. package/src/core/components/ui/divider/divider.md +107 -13
  128. package/src/core/components/ui/divider/divider.ts +40 -33
  129. package/src/core/components/ui/form/fieldset/fieldset.md +175 -99
  130. package/src/core/components/ui/form/fieldset/fieldset.ts +15 -28
  131. package/src/core/components/ui/form/fieldset/legend.ts +13 -13
  132. package/src/core/components/ui/form/form-actions/form-actions.md +75 -52
  133. package/src/core/components/ui/form/form-actions/form-actions.ts +7 -5
  134. package/src/core/components/ui/form/form-layout/form-layout.md +109 -34
  135. package/src/core/components/ui/form/form-layout/form-layout.ts +27 -24
  136. package/src/core/components/ui/form/radio/radio.md +0 -0
  137. package/src/core/components/ui/form/select/select.md +0 -0
  138. package/src/core/components/ui/form/switch/switch.md +0 -0
  139. package/src/core/components/ui/form/textarea/textarea.ts +4 -3
  140. package/src/core/components/ui/group/group.md +36 -36
  141. package/src/core/components/ui/group/group.ts +5 -10
  142. package/src/core/components/ui/icon/icon.md +132 -43
  143. package/src/core/components/ui/image/image.md +35 -3
  144. package/src/core/components/ui/link/link.md +43 -5
  145. package/src/core/components/ui/loader/loader.md +79 -22
  146. package/src/core/components/ui/loader/loader.ts +67 -27
  147. package/src/core/components/ui/loader/styles/fixed.ts +6 -11
  148. package/src/core/components/ui/menu/menu.md +133 -92
  149. package/src/core/components/ui/menu/menu.ts +53 -58
  150. package/src/core/components/ui/modal/modal.md +163 -47
  151. package/src/core/components/ui/modal/modal.ts +2 -4
  152. package/src/core/components/ui/pop/pop.md +217 -123
  153. package/src/core/components/ui/pop/pop.ts +0 -1
  154. package/src/core/components/ui/progress/progress.md +76 -30
  155. package/src/core/components/ui/progress/progress.ts +25 -56
  156. package/src/core/components/ui/table/table-caption.ts +2 -2
  157. package/src/core/components/ui/table/table-tbody.ts +3 -3
  158. package/src/core/components/ui/table/table-td.ts +23 -18
  159. package/src/core/components/ui/table/table-th.ts +8 -8
  160. package/src/core/components/ui/table/table-tr.ts +4 -4
  161. package/src/core/components/ui/table/table.md +147 -171
  162. package/src/core/components/ui/table/table.ts +20 -19
  163. package/src/core/components/ui/theme/theme-collection/auto.ts +15 -0
  164. package/src/core/components/ui/theme/theme-collection/core-variables.ts +8 -31
  165. package/src/core/components/ui/theme/theme-collection/dark.ts +1 -7
  166. package/src/core/components/ui/theme/theme-collection/light.ts +30 -26
  167. package/src/core/components/ui/theme/theme.md +122 -0
  168. package/src/core/components/ui/theme/theme.ts +30 -7
  169. package/src/core/components/ui/toast/toast-item.ts +6 -9
  170. package/src/core/components/ui/toast/toast.md +108 -58
  171. package/src/core/components/ui/toast/types.ts +1 -1
  172. package/src/core/components/ui/tooltip/tooltip.md +68 -26
  173. package/src/core/mixins/Subscriber.ts +0 -0
  174. package/src/core/utils/DataBindObserver.ts +0 -0
  175. package/src/core/utils/Objects.ts +0 -0
  176. package/src/core/utils/route.ts +0 -0
  177. package/src/docs/_core-concept/subscriber.md +0 -0
  178. package/src/docs/_getting-started/my-first-subscriber.md +0 -0
  179. package/src/docs/_getting-started/pubsub.md +0 -0
  180. package/src/docs/_getting-started/start.md +1 -1
  181. package/src/docs/_getting-started/theming.md +223 -61
  182. package/src/docs/code.ts +125 -58
  183. package/src/docs/example/users.ts +0 -0
  184. package/src/docs/header/header.ts +62 -54
  185. package/src/docs/mock-api/router.ts +2 -0
  186. package/src/docs/navigation/navigation.ts +6 -3
  187. package/src/docs/search/docs-search.json +2504 -399
  188. package/src/docs/search/markdown-renderer.ts +6 -6
  189. package/src/docs/search/page.ts +0 -0
  190. package/src/docs/search/search.ts +4 -4
  191. package/src/docs/tailwind/css/tailwind.css +6 -5
  192. package/src/tsconfig.json +18 -0
  193. package/src/tsconfig.tsbuildinfo +1 -1
  194. package/tailwind.config.js +19 -0
  195. package/.github/workflows/ci.yml +0 -21
  196. package/.github-export-ignore +0 -30
  197. package/CONTRIBUTING.md +0 -59
  198. package/DEV.md +0 -54
  199. package/LICENSE +0 -21
  200. package/OPEN_SOURCE_CHECKPOINT.md +0 -133
  201. package/docs/assets/index-DiD0qYvE.css +0 -1
  202. package/docs/src/tsconfig.declarations.json +0 -22
  203. package/docs/src/tsconfig.emit.json +0 -23
  204. package/gitlab/job_github_mirror.sh +0 -39
  205. package/scripts/github-export.mjs +0 -150
  206. package/src/css.d.ts +0 -19
  207. package/src/tsconfig.declarations.json +0 -22
  208. package/src/tsconfig.emit.json +0 -23
package/docs/crawl/core/components/ui/form/form-layout/form-layout.html CHANGED
@@ -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="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">
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">
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,46 +15,105 @@
15
15
  </header>
16
16
  <main>
17
17
  <article>
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>
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>
20
23
  <pre><code>&lt;form&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;
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;
52
89
  &lt;sonic-form-actions&gt;
53
- &lt;sonic-button type=&quot;success&quot;&gt;Valider&lt;/sonic-button&gt;
90
+ &lt;sonic-button type=&quot;primary&quot;&gt;Send&lt;/sonic-button&gt;
54
91
  &lt;/sonic-form-actions&gt;
55
92
  &lt;/sonic-form-layout&gt;
56
- &lt;/form &gt;
57
93
  </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>
58
117
 
59
118
  </article>
60
119
  </main>
package/docs/crawl/core/components/ui/form/input/input.html CHANGED
@@ -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 attibutes list">
7
+ <meta name="description" content="Native attributes 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 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>
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>
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 attibutes list
22
+ Native attributes list
23
23
  </sonic-button>
24
24
 
25
25
  <h2 id="label">Label</h2>
package/docs/crawl/core/components/ui/form/textarea/textarea.html CHANGED
@@ -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 attibutes list">
7
+ <meta name="description" content="Native attributes 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 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>
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>
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 attibutes list
22
+ Native attributes list
23
23
  </sonic-button>
24
24
 
25
25
 
package/docs/crawl/core/components/ui/group/group.html CHANGED
@@ -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="Group: 😎 Standard ⭐ Premium 💎 Diamond">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/group/group, group, Group, UI component, sonic-group, web component">
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">
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,9 +15,11 @@
15
15
  </header>
16
16
  <main>
17
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>
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>
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>
20
21
  <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>
21
23
  <pre><code>&lt;sonic-group formDataProvider=&quot;subscriptionData&quot;&gt;
22
24
  &lt;sonic-button radio name=&quot;subscription&quot; value=&quot;standard&quot; type=&quot;default&quot;&gt;😎 Standard&lt;/sonic-button&gt;
23
25
  &lt;sonic-button radio checked name=&quot;subscription&quot; value=&quot;premium&quot; type=&quot;default&quot;&gt;⭐ Premium&lt;/sonic-button&gt;
@@ -25,56 +27,76 @@
25
27
  &lt;/sonic-group&gt;
26
28
  </code></pre>
27
29
  <h2 id="button-group">Button group</h2>
30
+ <p>Adjacent link or action buttons without merging into one control.</p>
28
31
  <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;
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;
30
33
  &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
34
  &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
35
  &lt;/sonic-group&gt;
33
36
  </code></pre>
34
37
  <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;
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;
37
40
  &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;
41
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;info-empty&quot;&gt;&lt;/sonic-icon&gt;
39
42
  &lt;/sonic-button&gt;
40
- &lt;sonic-input placeholder=&quot;placeholder&quot; &gt;&lt;/sonic-input&gt;
43
+ &lt;sonic-input&gt;&lt;/sonic-input&gt;
41
44
  &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
45
  </code></pre>
56
46
  <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;
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;
72
50
  &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;
51
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;check&quot;&gt;&lt;/sonic-icon&gt;
74
52
  &lt;/sonic-button&gt;
75
53
  &lt;/sonic-group&gt;
76
- &lt;/div&gt;
77
54
  </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>
78
100
 
79
101
  </article>
80
102
  </main>