@supersoniks/concorde 5.0.5 → 5.1.0

package/docs/src/core/components/ui/divider/divider.md

@@ -1,129 +1,35 @@
 # Divider
 
-**`sonic-divider`** draws a horizontal or vertical rule with optional **centered label** copy. Use it to separate sections in forms, cards, and **`sonic-menu`**. Set **`label`** for simple HTML captions or use the **default slot** for richer markup; default **`align`** is **`center`** and default **`lineStyle`** is **`solid`**.
-
-## Basic example
-
-A bare divider is a full-width line with vertical margin. Omit **`size`** to use the host default spacing (`0.5rem` block margin).
-
+## Default
 <sonic-code>
   <template>
-    <sonic-divider></sonic-divider>
+  <sonic-divider></sonic-divider>
   </template>
 </sonic-code>
 
-## Label and align
-
-**`label`** renders inside the line (HTML via the same pipeline as other form labels). **`align`** controls which side(s) of the line remain visible: **`left`** drops the leading segment, **`right`** drops the trailing segment, **`center`** keeps both.
-
+## Align
 <sonic-code>
   <template>
-    <div class="grid gap-4">
-      <sonic-divider label="Default centered label"></sonic-divider>
-      <sonic-divider label="Left" align="left"></sonic-divider>
-      <sonic-divider label="Center" align="center"></sonic-divider>
-      <sonic-divider label="Right" align="right"></sonic-divider>
-    </div>
+  <sonic-divider label="Default centered label"></sonic-divider>
+  <sonic-divider label="Right" align="right"></sonic-divider>
+  <sonic-divider label="Center" align="center"></sonic-divider>
+  <sonic-divider label="Left" align="left"></sonic-divider>
   </template>
 </sonic-code>
 
 ## Size
-
-**`size`** adjusts block margin and label font size. Values follow the shared Concorde scale (`2xs` … `2xl`).
-
-<sonic-code>
-  <template>
-    <div class="grid gap-4">
-      <sonic-divider size="2xs" label="2xs"></sonic-divider>
-      <sonic-divider size="xs" label="xs"></sonic-divider>
-      <sonic-divider size="sm" label="sm"></sonic-divider>
-      <sonic-divider size="md" label="md"></sonic-divider>
-      <sonic-divider size="lg" label="lg"></sonic-divider>
-      <sonic-divider size="xl" label="xl"></sonic-divider>
-      <sonic-divider size="2xl" label="2xl"></sonic-divider>
-    </div>
-  </template>
-</sonic-code>
-
-## Line style
-
-**`lineStyle`** sets the stroke of the rule (`solid` · `dashed` · `dotted`). In HTML use the reflected attribute **`linestyle`** (case-insensitive).
-
 <sonic-code>
   <template>
-    <div class="grid gap-4">
-      <sonic-divider label="Solid"></sonic-divider>
-      <sonic-divider label="Dashed" lineStyle="dashed"></sonic-divider>
-      <sonic-divider label="Dotted" lineStyle="dotted"></sonic-divider>
-    </div>
+  <sonic-divider size="xs" label="xs"></sonic-divider>
+  <sonic-divider size="sm" label="sm"></sonic-divider>
+  <sonic-divider size="md" label="md"></sonic-divider>
+  <sonic-divider size="lg" label="lg"></sonic-divider>
   </template>
 </sonic-code>
 
-## Vertical and margin
-
-Set **`vertical`** for a column rule (for example between toolbar actions). **`noMargin`** removes host margin when a parent layout already provides spacing.
-
+## Custom
 <sonic-code>
   <template>
-    <div class="flex items-stretch gap-2" style="min-height: 3rem;">
-      <span class="flex items-center px-2">Before</span>
-      <sonic-divider vertical noMargin></sonic-divider>
-      <span class="flex items-center px-2">After</span>
-    </div>
+  <sonic-divider><span class="mr-2">Lorem ipsum dolor sit amet</span><sonic-badge type="danger">+25</sonic-badge></sonic-divider>
   </template>
 </sonic-code>
-
-## Default slot
-
-Slotted content replaces or augments **`label`**. Useful for badges, icons, or mixed markup in menus.
-
-<sonic-code>
-  <template>
-    <sonic-divider>
-      <span class="mr-2">Section title</span>
-      <sonic-badge type="danger">+25</sonic-badge>
-    </sonic-divider>
-  </template>
-</sonic-code>
-
-
-## Inside typed cards
-
-On **`sonic-card`** with semantic **`type`** (`primary` · `warning` · `danger` · `info` · `success`), the rule uses the card’s text color at reduced opacity so it stays visible on tinted surfaces. **`label`** and slotted captions use the same foreground color as surrounding copy.
-
-<sonic-code>
-  <template>
-    <div class="grid gap-4 max-w-xl">
-      <sonic-card type="danger">
-        <div>This action cannot be undone.</div>
-        <sonic-divider label="Affected resources"></sonic-divider>
-        <ul class="m-0 pl-5 text-sm">
-          <li>Project files</li>
-          <li>Shared links</li>
-        </ul>
-      </sonic-card>
-      <sonic-card type="info">
-        <div>Maintenance is scheduled for tonight.</div>
-        <sonic-divider></sonic-divider>
-        <div class="opacity-60">Expected downtime: about 15 minutes.</div>
-      </sonic-card>
-    </div>
-  </template>
-</sonic-code>
-
-## API reference
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `label` | string (HTML) | Caption centered on the rule; combined with default-slot content when both are set |
-| `align` | `left` · `center` · `right` (default `center`) | Hides the leading or trailing line segment for left/right alignment |
-| `size` | `2xs` · `xs` · `sm` · `md` · `lg` · `xl` · `2xl` · `inherit` | Vertical margin and label `font-size`; omit for host defaults |
-| `lineStyle` | `solid` · `dashed` · `dotted` (default `solid`) | Stroke style of the rule (HTML attribute `linestyle`) |
-| `vertical` | boolean | Renders a vertical rule; swap block/inline margins |
-| `noMargin` | boolean | Sets host margin to `0` |
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | Label markup when **`label`** is insufficient or empty |
-
-The inner flex container exposes **`part="divider"`** for theme overrides.

package/docs/src/core/components/ui/form/fieldset/fieldset.md

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

package/docs/src/core/components/ui/form/form-actions/form-actions.md

@@ -1,100 +1,77 @@
-# Form actions
+# Form-actions
 
-**`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 end with actions. Defaults: **`direction`** `row` · **`justify`** `flex-start` · **`alignItems`** `center`.
-
-## Basic example
-
-With no attributes, actions align to the **start** of the row (typical for left-to-right forms).
+## Left by default
 
 <sonic-code>
   <template>
-    <form>
-      <sonic-form-layout>
-        <sonic-input label="First name"></sonic-input>
-        <sonic-input label="Last name"></sonic-input>
-        <sonic-form-actions>
-          <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
-          <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
-        </sonic-form-actions>
-      </sonic-form-layout>
-    </form>
+  <form>
+    <sonic-form-layout>
+      <sonic-input label="First name"></sonic-input>
+      <sonic-input label="Last name"></sonic-input>
+      <sonic-form-actions>
+        <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button> 
+        <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon>  Cancel</sonic-button> 
+      </sonic-form-actions>
+    </sonic-form-layout>
+  </form >
   </template>
 </sonic-code>
 
-## Justify content
-
-**`justify`** maps to CSS **`justify-content`**. Use **`flex-end`** for dialog-style footers or **`center`** for balanced toolbars.
+## Justify
 
 <sonic-code>
   <template>
-    <form>
-      <sonic-form-layout>
-        <sonic-input label="First name"></sonic-input>
-        <sonic-input label="Last name"></sonic-input>
-        <sonic-form-actions justify="flex-end">
-          <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
-          <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
-        </sonic-form-actions>
-      </sonic-form-layout>
-    </form>
+  <form>
+    <sonic-form-layout>
+      <sonic-input label="First name"></sonic-input>
+      <sonic-input label="Last name"></sonic-input>
+      <sonic-form-actions justify="flex-end">
+        <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button> 
+        <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon>  Cancel</sonic-button> 
+      </sonic-form-actions>
+    </sonic-form-layout>
+  </form >
   </template>
 </sonic-code>
 
-## Flex direction
-
-**`direction`** maps to **`flex-direction`**. **`row-reverse`** swaps visual order while keeping DOM order (focus order unchanged).
+## Direction
 
 <sonic-code>
   <template>
-    <form>
-      <sonic-form-layout>
-        <sonic-input label="First name"></sonic-input>
-        <sonic-input label="Last name"></sonic-input>
-        <sonic-form-actions direction="row-reverse">
-          <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
-          <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
-        </sonic-form-actions>
-      </sonic-form-layout>
-    </form>
+  <form>
+    <sonic-form-layout>
+      <sonic-input label="First name"></sonic-input>
+      <sonic-input label="Last name"></sonic-input>
+      <sonic-form-actions direction="row-reverse">
+        <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button> 
+        <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon>  Cancel</sonic-button> 
+      </sonic-form-actions>
+    </sonic-form-layout>
+  </form >
   </template>
 </sonic-code>
 
-## Mixed controls
-
-Combine **`sonic-button`** with **`sonic-divider vertical`** or other slotted content. Default **`alignItems`** `center` keeps unlike heights aligned on the cross axis.
+## Center
 
 <sonic-code>
   <template>
-    <form>
-      <sonic-form-layout>
-        <sonic-input label="First name"></sonic-input>
-        <sonic-input label="Last name"></sonic-input>
-        <sonic-form-actions justify="center">
-          <sonic-button type="info" minWidth="12rem">
-            <sonic-icon name="nav-arrow-left" library="iconoir" slot="prefix"></sonic-icon>
-            Left seats
-          </sonic-button>
-          <sonic-divider vertical></sonic-divider>
-          <sonic-button type="info" minWidth="12rem">
-            <sonic-icon name="nav-arrow-right" library="iconoir" slot="suffix"></sonic-icon>
-            Right seats
-          </sonic-button>
-        </sonic-form-actions>
-      </sonic-form-layout>
-    </form>
+  <form>
+    <sonic-form-layout>
+      <sonic-input label="First name"></sonic-input>
+      <sonic-input label="Last name"></sonic-input>
+      <sonic-form-actions justify="center" >
+        <sonic-button type="info" minWidth="12rem">
+          <sonic-icon name="nav-arrow-left" library="iconoir" slot="prefix"></sonic-icon>
+          Left seats
+        </sonic-button> 
+        <sonic-divider vertical></sonic-divider>
+        <sonic-button type="info" minWidth="12rem">
+          <sonic-icon name="nav-arrow-right" library="iconoir" slot="suffix"></sonic-icon>
+          Right seats
+        </sonic-button> 
+      </sonic-form-actions>
+    </sonic-form-layout>
+  </form >
   </template>
 </sonic-code>
 
-## API reference
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `direction` | `row` (default) · `column` · `row-reverse` · `column-reverse` | Main-axis layout of slotted controls |
-| `justify` | CSS justify-content (default `flex-start`) | Distribution along the main axis |
-| `alignItems` | CSS align-items (default `center`) | Cross-axis alignment when items differ in height |
-
-The component exposes a single unnamed slot; there are no named slots. Slotted nodes use the host’s flex **`gap`** (`0.3rem`) and **`flex-wrap`**.
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | Footer actions (**`sonic-button`** and related controls) |