@supersoniks/concorde 5.0.3 → 5.0.5

package/docs/crawl/core/components/ui/form/fieldset/fieldset.html

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Fieldset — Concorde</title>
-  <meta name="description" content="Default">
-  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/fieldset/fieldset, fieldset, Fieldset, UI component, form, sonic-fieldset, web component">
+  <meta name="description" content="sonic-fieldset groups related form controls with a bordered container and an accessible &lt;fieldset&gt; semantics layer. Put fields in the default slot; add a title with sonic-legend or the shorthand label">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/fieldset/fieldset, fieldset, Fieldset, UI component, form, sonic-fieldset, web component, , sonic-legend, label, description, iconName, variant, default, sonic-form-layout, ghost">
   <meta name="concorde-doc-id" content="core/components/ui/form/fieldset/fieldset">
   <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/fieldset/fieldset.html">
 </head>
@@ -15,119 +15,250 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Fieldset</strong>. Default <span>Doc ID: <code>core/components/ui/form/fieldset/fieldset</code>. Keywords: Concorde, supersoniks, core/components/ui/form/fieldset/fieldset, fieldset, Fieldset, UI component, form, sonic-fieldset, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/fieldset/fieldset.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/fieldset/fieldset.html</a>.</span></p>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Fieldset</strong>. sonic-fieldset groups related form controls with a bordered container and an accessible &lt;fieldset&gt; semantics layer. Put fields in the default slot; add a title with sonic-legend or the shorthand label <span>Doc ID: <code>core/components/ui/form/fieldset/fieldset</code>. Keywords: Concorde, supersoniks, core/components/ui/form/fieldset/fieldset, fieldset, Fieldset, UI component, form, sonic-fieldset, web component, , sonic-legend, label, description, iconName, variant, default, sonic-form-layout, ghost. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/fieldset/fieldset.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/fieldset/fieldset.html</a>.</span></p>
       <h1 id="fieldset">Fieldset</h1>
-<h2 id="variant">Variant</h2>
-<pre><code>&lt;sonic-fieldset variant=&quot;default&quot; &gt;
-      Default
-    &lt;/sonic-fieldset&gt;
-    &lt;sonic-fieldset variant=&quot;ghost&quot; &gt;
-      Ghost
+<p><strong><code>sonic-fieldset</code></strong> groups related form controls with a bordered container and an accessible <strong><code>&lt;fieldset&gt;</code></strong> semantics layer. Put fields in the <strong>default slot</strong>; add a title with <strong><code>sonic-legend</code></strong> or the shorthand <strong><code>label</code></strong> / <strong><code>description</code></strong> / <strong><code>iconName</code></strong> attributes. Default <strong><code>variant</code></strong> is <code>default</code>. Pair the body with <strong><code>sonic-form-layout</code></strong> for responsive columns.</p>
+<h2 id="basic-example">Basic example</h2>
+<pre><code>&lt;sonic-fieldset&gt;
+      &lt;sonic-legend label=&quot;Contact details&quot;&gt;&lt;/sonic-legend&gt;
+      &lt;sonic-form-layout&gt;
+        &lt;sonic-input autocomplete=&quot;email&quot; label=&quot;Email&quot; name=&quot;email&quot; type=&quot;email&quot;&gt;&lt;/sonic-input&gt;
+        &lt;sonic-input autocomplete=&quot;tel&quot; label=&quot;Phone&quot; name=&quot;phone&quot; type=&quot;tel&quot;&gt;&lt;/sonic-input&gt;
+      &lt;/sonic-form-layout&gt;
     &lt;/sonic-fieldset&gt;
-    &lt;sonic-fieldset variant=&quot;shadow&quot; &gt;
-      Shadow
+</code></pre>
+<h2 id="variant">Variant</h2>
+<p><strong><code>ghost</code></strong> and <strong><code>shadow</code></strong> use a transparent border; <strong><code>shadow</code></strong> also applies <strong><code>--sc-shadow-lg</code></strong>.</p>
+<pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
+      &lt;sonic-fieldset variant=&quot;default&quot;&gt;
+        &lt;sonic-legend label=&quot;Default&quot;&gt;&lt;/sonic-legend&gt;
+        &lt;sonic-input label=&quot;Field&quot; name=&quot;a&quot;&gt;&lt;/sonic-input&gt;
+      &lt;/sonic-fieldset&gt;
+      &lt;sonic-fieldset variant=&quot;ghost&quot;&gt;
+        &lt;sonic-legend label=&quot;Ghost&quot;&gt;&lt;/sonic-legend&gt;
+        &lt;sonic-input label=&quot;Field&quot; name=&quot;b&quot;&gt;&lt;/sonic-input&gt;
+      &lt;/sonic-fieldset&gt;
+      &lt;sonic-fieldset variant=&quot;shadow&quot;&gt;
+        &lt;sonic-legend label=&quot;Shadow&quot;&gt;&lt;/sonic-legend&gt;
+        &lt;sonic-input label=&quot;Field&quot; name=&quot;c&quot;&gt;&lt;/sonic-input&gt;
+      &lt;/sonic-fieldset&gt;
+    &lt;/div&gt;
+</code></pre>
+<h2 id="tight-layout">Tight layout</h2>
+<p>Set <strong><code>tight</code></strong> to remove horizontal padding and side borders (flat strip inside a parent).</p>
+<pre><code>&lt;sonic-fieldset tight variant=&quot;ghost&quot;&gt;
+      &lt;sonic-legend label=&quot;Tight fieldset&quot;&gt;&lt;/sonic-legend&gt;
+      &lt;sonic-input label=&quot;Field&quot; name=&quot;tight&quot;&gt;&lt;/sonic-input&gt;
     &lt;/sonic-fieldset&gt;
 </code></pre>
 <h2 id="legend">Legend</h2>
-<pre><code>&lt;sonic-fieldset&gt;
-    &lt;sonic-legend label=&quot;Legend via attribut : label&quot; description=&quot;Description via attribut : description&quot;&gt;
-    &lt;/sonic-legend&gt;
-  &lt;/sonic-fieldset&gt;
-  &lt;sonic-fieldset&gt;
-    &lt;sonic-legend iconLibrary=&quot;iconoir&quot;  iconName=&quot;pin-alt&quot;&gt;
-      Custom legend via &lt;b&gt;slot&lt;/b&gt;
-      &lt;sonic-legend-description&gt;
-        Description via composant : sonic-legend-description
-      &lt;/sonic-legend-description&gt;
-    &lt;/sonic-legend&gt;
-  &lt;/sonic-fieldset&gt;
+<p>Use <strong><code>sonic-legend</code></strong> for the group title. Set <strong><code>label</code></strong> and <strong><code>description</code></strong> for simple copy, or use the <strong>default slot</strong> for custom markup. Add secondary text with <strong><code>sonic-legend-description</code></strong>. Place actions in <strong><code>slot=&quot;suffix&quot;</code></strong> on the legend.</p>
+<p>Attribute values on <strong><code>sonic-legend</code></strong> are rendered as HTML—use only trusted content.</p>
+<pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
+      &lt;sonic-fieldset&gt;
+        &lt;sonic-legend label=&quot;Attributes&quot; description=&quot;Short description via attributes&quot;&gt;&lt;/sonic-legend&gt;
+        &lt;sonic-input label=&quot;Field&quot; name=&quot;attr&quot;&gt;&lt;/sonic-input&gt;
+      &lt;/sonic-fieldset&gt;
+      &lt;sonic-fieldset&gt;
+        &lt;sonic-legend iconLibrary=&quot;iconoir&quot; iconName=&quot;pin-alt&quot;&gt;
+          Custom title in the default slot
+          &lt;sonic-legend-description&gt;Description via sonic-legend-description&lt;/sonic-legend-description&gt;
+        &lt;/sonic-legend&gt;
+        &lt;sonic-input label=&quot;Field&quot; name=&quot;slot&quot;&gt;&lt;/sonic-input&gt;
+      &lt;/sonic-fieldset&gt;
+    &lt;/div&gt;
 </code></pre>
-<h2 id="short-hand">Short hand</h2>
+<h2 id="shorthand-legend-on-the-fieldset">Shorthand legend on the fieldset</h2>
+<p>When <strong><code>label</code></strong> is set on <strong><code>sonic-fieldset</code></strong>, the component renders <strong><code>sonic-legend</code></strong> for you. Pass <strong><code>description</code></strong> <strong><code>iconName</code></strong> <strong><code>iconLibrary</code></strong> and <strong><code>iconPrefix</code></strong> the same way. Do not combine shorthand <strong><code>label</code></strong> with a separate slotted <strong><code>sonic-legend</code></strong>—you will get two legends.</p>
 <pre><code>&lt;sonic-fieldset
-    label=&quot;All props on fieldset tag&quot;
-    description=&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit&quot;
-    iconLibrary=&quot;iconoir&quot;
-    iconName=&quot;user&quot;&gt;
-  &lt;/sonic-fieldset&gt;
+      label=&quot;Account&quot;
+      description=&quot;Basic profile fields&quot;
+      iconLibrary=&quot;iconoir&quot;
+      iconName=&quot;user&quot;
+    &gt;
+      &lt;sonic-input label=&quot;Display name&quot; name=&quot;display_name&quot;&gt;&lt;/sonic-input&gt;
+    &lt;/sonic-fieldset&gt;
 </code></pre>
-<h2 id="example-of-use">Example of use</h2>
-<pre><code>&lt;sonic-div formDataProvider=&quot;user_create&quot;&gt;
-    &lt;form action=&quot;/inscription?lang=fr&quot; method=&quot;POST&quot; class=&quot;mb-20&quot; accept-charset=&quot;UTF-8&quot; id=&quot;youpla&quot;&gt;
-      &lt;sonic-fieldset form=&quot;formid&quot; collapsible=&quot;true&quot; collapsed=&quot;false&quot;&gt;
-        &lt;sonic-legend iconLibrary=&quot;iconoir&quot;  iconName=&quot;user&quot;&gt;
-          Informations personnelles
-          &lt;span slot=&quot;description&quot;&gt;Description du fieldset lorem ipsum dolor&lt;/span&gt;
-          &lt;sonic-pop class=&quot;inline-block&quot; slot=&quot;suffix&quot;&gt;
-            &lt;sonic-button shape=&quot;circle&quot; variant=&quot;ghost&quot;&gt;
-              &lt;sonic-icon library=&quot;iconoir&quot; size=&quot;lg&quot; name=&quot;more-vert&quot;&gt;&lt;/sonic-icon
-            &gt;&lt;/sonic-button&gt;
-            &lt;sonic-menu slot=&quot;content&quot; minWidth=&quot;12rem&quot;&gt;
-              &lt;sonic-menu-item&gt;Mentions légales&lt;/sonic-menu-item&gt;
-              &lt;sonic-menu-item&gt;Conditions générales d&#39;utilisation&lt;/sonic-menu-item&gt;
-            &lt;/sonic-menu&gt;
-          &lt;/sonic-pop&gt;
-        &lt;/sonic-legend&gt;
+<h2 id="legend-actions">Legend actions</h2>
+<p>Use <strong><code>slot=&quot;suffix&quot;</code></strong> on <strong><code>sonic-legend</code></strong> for menus or icon buttons aligned to the end of the legend row.</p>
+<pre><code>&lt;sonic-fieldset&gt;
+      &lt;sonic-legend label=&quot;Personal information&quot;&gt;
+        &lt;sonic-pop class=&quot;inline-block&quot; slot=&quot;suffix&quot;&gt;
+          &lt;sonic-button shape=&quot;circle&quot; variant=&quot;ghost&quot;&gt;
+            &lt;sonic-icon library=&quot;iconoir&quot; size=&quot;lg&quot; name=&quot;more-vert&quot;&gt;&lt;/sonic-icon&gt;
+          &lt;/sonic-button&gt;
+          &lt;sonic-menu slot=&quot;content&quot; minWidth=&quot;12rem&quot;&gt;
+            &lt;sonic-menu-item&gt;Legal notice&lt;/sonic-menu-item&gt;
+            &lt;sonic-menu-item&gt;Terms of use&lt;/sonic-menu-item&gt;
+          &lt;/sonic-menu&gt;
+        &lt;/sonic-pop&gt;
+      &lt;/sonic-legend&gt;
+      &lt;sonic-form-layout&gt;
+        &lt;sonic-input autocomplete=&quot;family-name&quot; label=&quot;Last name&quot; name=&quot;last_name&quot;&gt;&lt;/sonic-input&gt;
+        &lt;sonic-input autocomplete=&quot;given-name&quot; label=&quot;First name&quot; name=&quot;first_name&quot;&gt;&lt;/sonic-input&gt;
+      &lt;/sonic-form-layout&gt;
+    &lt;/sonic-fieldset&gt;
+</code></pre>
+<h2 id="form-association-and-disabled-state">Form association and disabled state</h2>
+<h3 id="associating-a-distant-form">Associating a distant <code>form</code></h3>
+<p>Set <strong><code>form</code></strong> on <strong><code>sonic-fieldset</code></strong> to the <strong><code>id</code></strong> of a <strong><code>&lt;form&gt;</code></strong> elsewhere in the page (same as the native <strong><code>form</code></strong> attribute on <strong><code>&lt;fieldset&gt;</code></strong>). Named fields in the fieldset then belong to that form for submit and constraint validation—for example a toolbar <strong><code>form</code></strong> and a field group rendered lower on the layout.</p>
+<pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
+      &lt;form id=&quot;billing-form&quot; class=&quot;flex flex-wrap items-center gap-2&quot;&gt;
+        &lt;sonic-button submit type=&quot;primary&quot;&gt;Save billing&lt;/sonic-button&gt;
+      &lt;/form&gt;
+      &lt;sonic-fieldset form=&quot;billing-form&quot; label=&quot;Billing address&quot;&gt;
         &lt;sonic-form-layout&gt;
-          &lt;sonic-input autocomplete=&quot;family-name&quot; label=&quot;Nom&quot; name=&quot;nom&quot;&gt;&lt;/sonic-input&gt;
-          &lt;sonic-input autocomplete=&quot;given-name&quot; label=&quot;Prénom&quot; name=&quot;prenom&quot;&gt;&lt;/sonic-input&gt;
-          &lt;sonic-select autocomplete=&quot;sex&quot; label=&quot;Sexe&quot; name=&quot;sexe&quot;&gt;
-            &lt;option value=&quot;&quot; selected=&quot;selected&quot;&gt;- Sélectionner -&lt;/option&gt;
-            &lt;option value=&quot;-&quot;&gt;Je préfère ne pas le dire&lt;/option&gt;
-            &lt;option value=&quot;Homme&quot;&gt;Homme&lt;/option&gt;
-            &lt;option value=&quot;Femme&quot;&gt;Femme&lt;/option&gt;
-          &lt;/sonic-select&gt;
-          &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;
-          &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
-          &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;
-          &lt;sonic-input
-            autocomplete=&quot;email&quot;
-            label=&quot;Confirmer votre e-mail&quot;
-            name=&quot;email_confirmation&quot;
-            type=&quot;email&quot;
-          &gt;&lt;/sonic-input&gt;
-          &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;
-          &lt;sonic-input
-            autocomplete=&quot;new-password&quot;
-            label=&quot;Confirmer votre mot de passe&quot;
-            name=&quot;password_confirmation&quot;
-            type=&quot;password&quot;
-          &gt;&lt;/sonic-input&gt;
+          &lt;sonic-input label=&quot;Street&quot; name=&quot;street&quot; autocomplete=&quot;street-address&quot;&gt;&lt;/sonic-input&gt;
+          &lt;sonic-input label=&quot;Postal code&quot; required name=&quot;postal_code&quot; autocomplete=&quot;postal-code&quot;&gt;&lt;/sonic-input&gt;
+          &lt;sonic-input label=&quot;City&quot; name=&quot;city&quot; autocomplete=&quot;address-level2&quot;&gt;&lt;/sonic-input&gt;
         &lt;/sonic-form-layout&gt;
       &lt;/sonic-fieldset&gt;
-      &lt;sonic-fieldset form=&quot;formid&quot; collapsible=&quot;true&quot; collapsed=&quot;false&quot;&gt;
-        &lt;sonic-legend iconLibrary=&quot;iconoir&quot;  iconName=&quot;pin-alt&quot;&gt; Coordonnées &lt;/sonic-legend&gt;
-        &lt;sonic-form-layout&gt;
-          &lt;sonic-input autocomplete=&quot;postal-code&quot; label=&quot;Code postal&quot; name=&quot;cp&quot;&gt;&lt;/sonic-input&gt;
-          &lt;sonic-input autocomplete=&quot;address-level2&quot; label=&quot;Ville&quot; name=&quot;ville&quot;&gt;&lt;/sonic-input&gt;
-        &lt;/sonic-form-layout&gt;
+    &lt;/div&gt;
+</code></pre>
+<h3 id="disabling-a-group">Disabling a group</h3>
+<p>Set <strong><code>disabled</code></strong> on <strong><code>sonic-fieldset</code></strong> to disable the inner <strong><code>&lt;fieldset&gt;</code></strong> and every control in the group (same as a native fieldset). Use it for read-only steps or sections gated by permissions.</p>
+<pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
+      &lt;sonic-fieldset label=&quot;Editable&quot;&gt;
+        &lt;sonic-input label=&quot;Display name&quot; name=&quot;display_name&quot;&gt;&lt;/sonic-input&gt;
+      &lt;/sonic-fieldset&gt;
+      &lt;sonic-fieldset label=&quot;Locked&quot; disabled&gt;
+        &lt;sonic-input label=&quot;Account ID&quot; name=&quot;account_id&quot; value=&quot;acct_42&quot;&gt;&lt;/sonic-input&gt;
       &lt;/sonic-fieldset&gt;
-      &lt;div class=&quot;&quot;&gt;
-        &lt;sonic-button submit type=&quot;primary&quot;&gt;
-          &lt;sonic-icon  library=&quot;iconoir&quot; name=&quot;check&quot;&gt;&lt;/sonic-icon&gt;
-          S&#39;inscrire
-        &lt;/sonic-button&gt;
-        &lt;sonic-tooltip class=&quot;inline-flex&quot; label=&quot;Vous êtes sûr(e) ? 🙄&quot;&gt;
-          &lt;sonic-button size=&quot;sm&quot; variant=&quot;ghost&quot;&gt; Continuer sans m&#39;inscrire &lt;/sonic-button&gt;
-        &lt;/sonic-tooltip&gt;
-      &lt;/div&gt;
-    &lt;/form&gt;
-    &lt;div dataProvider=&quot;user_create&quot; class=&quot;my-6 text-neutral-600 p-5 rounded-xl shadow-lg&quot;&gt;
-       &lt;div class=&quot;font-bold text-lg text-neutral-400&quot;&gt;Submitted informations...&lt;/div&gt;
-      &lt;div class=&quot;text-lg my-2&quot;&gt;
-        &lt;sonic-value key=&quot;nom&quot; class=&quot;font-bold&quot;&gt;&lt;/sonic-value&gt;
-        &lt;sonic-value key=&quot;prenom&quot;&gt;&lt;/sonic-value&gt;
-      &lt;/div&gt;
-      &lt;div class=&quot;text-sm&quot;&gt;
-        &lt;sonic-value key=&quot;sexe&quot;&gt;&lt;/sonic-value&gt;
-        &lt;sonic-value key=&quot;date_naissance&quot;&gt;&lt;/sonic-value&gt;
-      &lt;/div&gt;
-      &lt;div class=&quot;text-sm&quot;&gt;
-        &lt;sonic-value key=&quot;email&quot;&gt;&lt;/sonic-value&gt;
-        &lt;sonic-value key=&quot;cp&quot;&gt;&lt;/sonic-value&gt;
-        &lt;sonic-value key=&quot;ville&quot;&gt;&lt;/sonic-value&gt;&lt;/div&gt;
     &lt;/div&gt;
-  &lt;/sonic-div&gt;
 </code></pre>
+<h2 id="accessibility">Accessibility</h2>
+<p>The inner <strong><code>&lt;fieldset&gt;</code></strong> carries grouping semantics. <strong><code>disabled</code></strong> is applied on that element so nested controls are disabled in the usual way. <strong><code>sonic-legend</code></strong> renders a native <strong><code>&lt;legend&gt;</code></strong> for the group label.</p>
+<h2 id="api-reference">API reference</h2>
+<h3 id="sonic-fieldset"><code>sonic-fieldset</code></h3>
+<table>
+<thead>
+<tr>
+<th>Attribute</th>
+<th>Values</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><code>variant</code></td>
+<td><code>default</code> · <code>ghost</code> · <code>shadow</code> (default <code>default</code>)</td>
+<td>Border and shadow treatment</td>
+</tr>
+<tr>
+<td><code>tight</code></td>
+<td>boolean</td>
+<td>Removes horizontal padding and side borders</td>
+</tr>
+<tr>
+<td><code>label</code></td>
+<td>string</td>
+<td>Shorthand legend title; renders <strong><code>sonic-legend</code></strong> when set</td>
+</tr>
+<tr>
+<td><code>description</code></td>
+<td>string</td>
+<td>Shorthand legend description (HTML)</td>
+</tr>
+<tr>
+<td><code>iconName</code></td>
+<td>string</td>
+<td>Shorthand legend icon <strong><code>name</code></strong></td>
+</tr>
+<tr>
+<td><code>iconLibrary</code></td>
+<td>string</td>
+<td>Shorthand legend icon <strong><code>library</code></strong></td>
+</tr>
+<tr>
+<td><code>iconPrefix</code></td>
+<td>string</td>
+<td>Shorthand legend icon <strong><code>prefix</code></strong></td>
+</tr>
+<tr>
+<td><code>disabled</code></td>
+<td>boolean</td>
+<td>Disables the native <strong><code>&lt;fieldset&gt;</code></strong> and its controls</td>
+</tr>
+<tr>
+<td><code>form</code></td>
+<td>string</td>
+<td><strong><code>id</code></strong> of an associated <strong><code>form</code></strong></td>
+</tr>
+<tr>
+<td><code>dataProvider</code></td>
+<td>string</td>
+<td>Subscriber key; can autofill properties that match publisher fields (e.g. <strong><code>label</code></strong>)</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Legend (optional) and field group content in visual order</td>
+</tr>
+</tbody></table>
+<h3 id="sonic-legend"><code>sonic-legend</code></h3>
+<table>
+<thead>
+<tr>
+<th>Attribute</th>
+<th>Values</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><code>label</code></td>
+<td>string</td>
+<td>Title HTML when not using the default slot</td>
+</tr>
+<tr>
+<td><code>description</code></td>
+<td>string</td>
+<td>Description HTML (wrapped in <strong><code>sonic-legend-description</code></strong>)</td>
+</tr>
+<tr>
+<td><code>iconName</code></td>
+<td>string</td>
+<td>Leading <strong><code>sonic-icon</code></strong> <strong><code>name</code></strong></td>
+</tr>
+<tr>
+<td><code>iconLibrary</code></td>
+<td>string</td>
+<td>Icon <strong><code>library</code></strong></td>
+</tr>
+<tr>
+<td><code>iconPrefix</code></td>
+<td>string</td>
+<td>Icon <strong><code>prefix</code></strong></td>
+</tr>
+<tr>
+<td><code>forceAutoFill</code></td>
+<td>boolean</td>
+<td>Allows Subscriber autofill to override attribute-backed <strong><code>label</code></strong> / <strong><code>description</code></strong></td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Legend title and description components</td>
+</tr>
+<tr>
+<td><code>suffix</code></td>
+<td>Trailing actions (menus, icon buttons)</td>
+</tr>
+</tbody></table>
+<h3 id="sonic-legend-description"><code>sonic-legend-description</code></h3>
+<p>Muted description line below the legend title. No attributes—project content through the <strong>default slot</strong>.</p>
 
     </article>
   </main>

package/docs/crawl/core/components/ui/form/form-actions/form-actions.html

@@ -3,9 +3,9 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Form-actions — Concorde</title>
-  <meta name="description" content="Left seats">
-  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/form-actions/form-actions, form-actions, Form-actions, UI component, form, sonic-form-actions, web component">
+  <title>Form actions — Concorde</title>
+  <meta name="description" content="sonic-form-actions lays out submit / cancel and other form footer controls in a wrapping flex row with a small fixed gap. Place it inside sonic-form-layout (full-width row) or any block that should en">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/form-actions/form-actions, form-actions, Form actions, UI component, form, sonic-form-actions, web component, sonic-form-layout, direction, row, justify, flex-start, alignItems, center, justify-content">
   <meta name="concorde-doc-id" content="core/components/ui/form/form-actions/form-actions">
   <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html">
 </head>
@@ -15,63 +15,106 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Form-actions</strong>. Left seats <span>Doc ID: <code>core/components/ui/form/form-actions/form-actions</code>. Keywords: Concorde, supersoniks, core/components/ui/form/form-actions/form-actions, form-actions, Form-actions, UI component, form, sonic-form-actions, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html</a>.</span></p>
-      <h1 id="form-actions">Form-actions</h1>
-<h2 id="left-by-default">Left by default</h2>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Form actions</strong>. sonic-form-actions lays out submit / cancel and other form footer controls in a wrapping flex row with a small fixed gap. Place it inside sonic-form-layout (full-width row) or any block that should en <span>Doc ID: <code>core/components/ui/form/form-actions/form-actions</code>. Keywords: Concorde, supersoniks, core/components/ui/form/form-actions/form-actions, form-actions, Form actions, UI component, form, sonic-form-actions, web component, sonic-form-layout, direction, row, justify, flex-start, alignItems, center, justify-content. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html</a>.</span></p>
+      <h1 id="form-actions">Form actions</h1>
+<p><strong><code>sonic-form-actions</code></strong> lays out submit / cancel and other <strong>form footer controls</strong> in a <strong>wrapping flex row</strong> with a small fixed gap. Place it inside <strong><code>sonic-form-layout</code></strong> (full-width row) or any block that should end with actions. Defaults: <strong><code>direction</code></strong> <code>row</code> · <strong><code>justify</code></strong> <code>flex-start</code> · <strong><code>alignItems</code></strong> <code>center</code>.</p>
+<h2 id="basic-example">Basic example</h2>
+<p>With no attributes, actions align to the <strong>start</strong> of the row (typical for left-to-right forms).</p>
 <pre><code>&lt;form&gt;
-    &lt;sonic-form-layout&gt;
-      &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
-      &lt;sonic-input label=&quot;Last name&quot;&gt;&lt;/sonic-input&gt;
-      &lt;sonic-form-actions&gt;
-        &lt;sonic-button type=&quot;success&quot;&gt;&lt;sonic-icon name=&quot;check&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Submit&lt;/sonic-button&gt; 
-        &lt;sonic-button type=&quot;danger&quot; variant=&quot;ghost&quot;&gt;&lt;sonic-icon name=&quot;undo&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt;  Cancel&lt;/sonic-button&gt; 
-      &lt;/sonic-form-actions&gt;
-    &lt;/sonic-form-layout&gt;
-  &lt;/form &gt;
+      &lt;sonic-form-layout&gt;
+        &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
+        &lt;sonic-input label=&quot;Last name&quot;&gt;&lt;/sonic-input&gt;
+        &lt;sonic-form-actions&gt;
+          &lt;sonic-button type=&quot;success&quot;&gt;&lt;sonic-icon name=&quot;check&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Submit&lt;/sonic-button&gt;
+          &lt;sonic-button type=&quot;danger&quot; variant=&quot;ghost&quot;&gt;&lt;sonic-icon name=&quot;undo&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Cancel&lt;/sonic-button&gt;
+        &lt;/sonic-form-actions&gt;
+      &lt;/sonic-form-layout&gt;
+    &lt;/form&gt;
 </code></pre>
-<h2 id="justify">Justify</h2>
+<h2 id="justify-content">Justify content</h2>
+<p><strong><code>justify</code></strong> maps to CSS <strong><code>justify-content</code></strong>. Use <strong><code>flex-end</code></strong> for dialog-style footers or <strong><code>center</code></strong> for balanced toolbars.</p>
 <pre><code>&lt;form&gt;
-    &lt;sonic-form-layout&gt;
-      &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
-      &lt;sonic-input label=&quot;Last name&quot;&gt;&lt;/sonic-input&gt;
-      &lt;sonic-form-actions justify=&quot;flex-end&quot;&gt;
-        &lt;sonic-button type=&quot;success&quot;&gt;&lt;sonic-icon name=&quot;check&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Submit&lt;/sonic-button&gt; 
-        &lt;sonic-button type=&quot;danger&quot; variant=&quot;ghost&quot;&gt;&lt;sonic-icon name=&quot;undo&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt;  Cancel&lt;/sonic-button&gt; 
-      &lt;/sonic-form-actions&gt;
-    &lt;/sonic-form-layout&gt;
-  &lt;/form &gt;
+      &lt;sonic-form-layout&gt;
+        &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
+        &lt;sonic-input label=&quot;Last name&quot;&gt;&lt;/sonic-input&gt;
+        &lt;sonic-form-actions justify=&quot;flex-end&quot;&gt;
+          &lt;sonic-button type=&quot;success&quot;&gt;&lt;sonic-icon name=&quot;check&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Submit&lt;/sonic-button&gt;
+          &lt;sonic-button type=&quot;danger&quot; variant=&quot;ghost&quot;&gt;&lt;sonic-icon name=&quot;undo&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Cancel&lt;/sonic-button&gt;
+        &lt;/sonic-form-actions&gt;
+      &lt;/sonic-form-layout&gt;
+    &lt;/form&gt;
 </code></pre>
-<h2 id="direction">Direction</h2>
+<h2 id="flex-direction">Flex direction</h2>
+<p><strong><code>direction</code></strong> maps to <strong><code>flex-direction</code></strong>. <strong><code>row-reverse</code></strong> swaps visual order while keeping DOM order (focus order unchanged).</p>
 <pre><code>&lt;form&gt;
-    &lt;sonic-form-layout&gt;
-      &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
-      &lt;sonic-input label=&quot;Last name&quot;&gt;&lt;/sonic-input&gt;
-      &lt;sonic-form-actions direction=&quot;row-reverse&quot;&gt;
-        &lt;sonic-button type=&quot;success&quot;&gt;&lt;sonic-icon name=&quot;check&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Submit&lt;/sonic-button&gt; 
-        &lt;sonic-button type=&quot;danger&quot; variant=&quot;ghost&quot;&gt;&lt;sonic-icon name=&quot;undo&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt;  Cancel&lt;/sonic-button&gt; 
-      &lt;/sonic-form-actions&gt;
-    &lt;/sonic-form-layout&gt;
-  &lt;/form &gt;
+      &lt;sonic-form-layout&gt;
+        &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
+        &lt;sonic-input label=&quot;Last name&quot;&gt;&lt;/sonic-input&gt;
+        &lt;sonic-form-actions direction=&quot;row-reverse&quot;&gt;
+          &lt;sonic-button type=&quot;success&quot;&gt;&lt;sonic-icon name=&quot;check&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Submit&lt;/sonic-button&gt;
+          &lt;sonic-button type=&quot;danger&quot; variant=&quot;ghost&quot;&gt;&lt;sonic-icon name=&quot;undo&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Cancel&lt;/sonic-button&gt;
+        &lt;/sonic-form-actions&gt;
+      &lt;/sonic-form-layout&gt;
+    &lt;/form&gt;
 </code></pre>
-<h2 id="center">Center</h2>
+<h2 id="mixed-controls">Mixed controls</h2>
+<p>Combine <strong><code>sonic-button</code></strong> with <strong><code>sonic-divider vertical</code></strong> or other slotted content. Default <strong><code>alignItems</code></strong> <code>center</code> keeps unlike heights aligned on the cross axis.</p>
 <pre><code>&lt;form&gt;
-    &lt;sonic-form-layout&gt;
-      &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
-      &lt;sonic-input label=&quot;Last name&quot;&gt;&lt;/sonic-input&gt;
-      &lt;sonic-form-actions justify=&quot;center&quot; &gt;
-        &lt;sonic-button type=&quot;info&quot; minWidth=&quot;12rem&quot;&gt;
-          &lt;sonic-icon name=&quot;nav-arrow-left&quot; library=&quot;iconoir&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
-          Left seats
-        &lt;/sonic-button&gt; 
-        &lt;sonic-divider vertical&gt;&lt;/sonic-divider&gt;
-        &lt;sonic-button type=&quot;info&quot; minWidth=&quot;12rem&quot;&gt;
-          &lt;sonic-icon name=&quot;nav-arrow-right&quot; library=&quot;iconoir&quot; slot=&quot;suffix&quot;&gt;&lt;/sonic-icon&gt;
-          Right seats
-        &lt;/sonic-button&gt; 
-      &lt;/sonic-form-actions&gt;
-    &lt;/sonic-form-layout&gt;
-  &lt;/form &gt;
+      &lt;sonic-form-layout&gt;
+        &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
+        &lt;sonic-input label=&quot;Last name&quot;&gt;&lt;/sonic-input&gt;
+        &lt;sonic-form-actions justify=&quot;center&quot;&gt;
+          &lt;sonic-button type=&quot;info&quot; minWidth=&quot;12rem&quot;&gt;
+            &lt;sonic-icon name=&quot;nav-arrow-left&quot; library=&quot;iconoir&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+            Left seats
+          &lt;/sonic-button&gt;
+          &lt;sonic-divider vertical&gt;&lt;/sonic-divider&gt;
+          &lt;sonic-button type=&quot;info&quot; minWidth=&quot;12rem&quot;&gt;
+            &lt;sonic-icon name=&quot;nav-arrow-right&quot; library=&quot;iconoir&quot; slot=&quot;suffix&quot;&gt;&lt;/sonic-icon&gt;
+            Right seats
+          &lt;/sonic-button&gt;
+        &lt;/sonic-form-actions&gt;
+      &lt;/sonic-form-layout&gt;
+    &lt;/form&gt;
 </code></pre>
+<h2 id="api-reference">API reference</h2>
+<table>
+<thead>
+<tr>
+<th>Attribute</th>
+<th>Values</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><code>direction</code></td>
+<td><code>row</code> (default) · <code>column</code> · <code>row-reverse</code> · <code>column-reverse</code></td>
+<td>Main-axis layout of slotted controls</td>
+</tr>
+<tr>
+<td><code>justify</code></td>
+<td>CSS justify-content (default <code>flex-start</code>)</td>
+<td>Distribution along the main axis</td>
+</tr>
+<tr>
+<td><code>alignItems</code></td>
+<td>CSS align-items (default <code>center</code>)</td>
+<td>Cross-axis alignment when items differ in height</td>
+</tr>
+</tbody></table>
+<p>The component exposes a single unnamed slot; there are no named slots. Slotted nodes use the host’s flex <strong><code>gap</code></strong> (<code>0.3rem</code>) and <strong><code>flex-wrap</code></strong>.</p>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Footer actions (<strong><code>sonic-button</code></strong> and related controls)</td>
+</tr>
+</tbody></table>
 
     </article>
   </main>