@supersoniks/concorde 5.1.0 → 5.1.2

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

@@ -1,129 +1,161 @@
 # Fieldset
 
-## Variant
+**`sonic-fieldset`** groups related form controls in a bordered container rendered as a native `<fieldset>`. Put fields in the default slot and title the group with a slotted `sonic-legend` or with the `label` and `description` shorthand. Pair the body with `sonic-form-layout` for responsive columns.
+
+## Basic example
+
 <sonic-code>
   <template>
-    <sonic-fieldset variant="default" >
-      Default
-    </sonic-fieldset>
-    <sonic-fieldset variant="ghost" >
-      Ghost
-    </sonic-fieldset>
-    <sonic-fieldset variant="shadow" >
-      Shadow
+    <sonic-fieldset>
+      <sonic-legend label="Passenger contact"></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>
 
-## Legend
+## Variant
+
+With no `variant`, the fieldset is `default` (bordered). `ghost` and `shadow` hide the border; `shadow` adds `--sc-shadow-lg`.
+
 <sonic-code>
   <template>
-  <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>
+    <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
+
+`tight` removes horizontal padding, side borders and rounding, for a flat strip inside a parent.
 
-## Short hand
 <sonic-code>
   <template>
-  <sonic-fieldset
-    label="All props on fieldset tag"
-    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    iconLibrary="iconoir"
-    iconName="user">
-  </sonic-fieldset>
+    <sonic-fieldset tight variant="ghost">
+      <sonic-legend label="Tight fieldset"></sonic-legend>
+      <sonic-input label="Field" name="tight"></sonic-input>
+    </sonic-fieldset>
   </template>
 </sonic-code>
 
-## Example of use
+## Legend
+
+`sonic-legend` takes `label` and `description`, or custom markup in its default slot with `sonic-legend-description` for the secondary line. `iconName` adds a leading `sonic-icon`. **`label` and `description` are rendered as HTML**: pass trusted content only.
+
 <sonic-code>
   <template>
-  <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 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>
+    <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 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>
+        <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 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>
+
+## Shorthand legend
+
+When `label` is set on `sonic-fieldset`, it renders the `sonic-legend` itself and forwards `description` · `iconName` · `iconLibrary` · `iconPrefix`. Do not also slot a `sonic-legend`, or the group gets two titles.
+
+<sonic-code>
+  <template>
+    <sonic-fieldset
+      label="Crew profile"
+      description="Basic crew member fields"
+      iconLibrary="iconoir"
+      iconName="user"
+    >
+      <sonic-input label="Display name" name="display_name"></sonic-input>
+    </sonic-fieldset>
+  </template>
+</sonic-code>
+
+## Legend actions
+
+`slot="suffix"` on `sonic-legend` aligns menus or icon buttons to the end of the title row.
+
+<sonic-code>
+  <template>
+    <sonic-fieldset>
+      <sonic-legend label="Passenger details">
+        <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>
+  </template>
+</sonic-code>
+
+<sonic-alert status="warning" label="Disabled state and form association" text="Both attributes are set on the inner native fieldset only. Slotted Concorde fields are not disabled or re-associated by them: set disabled on each field instead."></sonic-alert>
+
+## API reference
+
+### `sonic-fieldset`
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `variant` | `default` · `ghost` · `shadow` (default `default`) | Border and shadow treatment |
+| `tight` | boolean | Removes horizontal padding, side borders and rounding |
+| `label` | string | Shorthand title; renders a `sonic-legend` when set |
+| `description` | string | Shorthand description (HTML) |
+| `iconName` | string | Shorthand legend icon `name` |
+| `iconLibrary` | string | Shorthand legend icon `library` |
+| `iconPrefix` | string | Shorthand legend icon `prefix` |
+| `disabled` | boolean | Sets `disabled` on the inner native `<fieldset>` |
+| `form` | string | Sets `form` on the inner native `<fieldset>` |
+| `dataProvider` | string | Publisher key; matching publisher fields (e.g. `label`) fill the properties |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Optional `sonic-legend`, then the grouped fields |
+
+### `sonic-legend`
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `label` | string | Title (HTML) |
+| `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 | Lets a `label` or `description` set as a property override the attribute value |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Custom title and `sonic-legend-description` |
+| `suffix` | Trailing actions (menus, icon buttons) |
+
+### `sonic-legend-description`
+
+No attributes. The default slot holds the muted line under the legend title.

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

@@ -1,77 +1,98 @@
-# Form-actions
+# Form actions
 
-## Left by default
+**`sonic-form-actions`** lays out form footer controls (submit, cancel) in a wrapping flex row with a `0.3rem` gap. Place it inside `sonic-form-layout`, where it spans the full width, or at the end of any block. Use `justify` and `direction` to arrange the controls.
+
+## Basic example
+
+With no attributes, actions align to the start of the row.
 
 <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> Check in</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
 
+`justify` is the CSS `justify-content` of the row (default `flex-start`). Use `flex-end` for dialog-style footers or `center` for toolbars.
+
 <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>
 
 ## Direction
 
+`direction` is the CSS `flex-direction` (default `row`). `row-reverse` swaps the visual order but keeps the DOM and focus order.
+
 <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>
 
-## Center
+## Mixed controls
+
+Any content can be slotted, such as a vertical `sonic-divider`. The default `alignItems` (`center`) keeps items of different heights aligned.
 
 <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>
+            Previous step
+          </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>
+            Next step
+          </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` | CSS `flex-direction` of the row |
+| `justify` | CSS `justify-content` value (default `flex-start`) | Distribution along the main axis |
+| `alignItems` | CSS `align-items` value (default `center`) | Cross-axis alignment |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Footer controls |

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

@@ -1,44 +1,109 @@
-# Form-layout
+# Form layout
+
+**`sonic-form-layout`** arranges slotted form controls in a responsive grid. Short fields (`sonic-input` · `sonic-select`) sit two per row when the host is wider than `440px`; every other child spans the full width. It has no attributes: wrap the body of a `form` or `sonic-fieldset` with it.
+
+## Basic example
+
+<sonic-code>
+  <template>
+    <form>
+      <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-select autocomplete="sex" label="Gender" name="gender">
+          <option value="" selected="selected">— Select —</option>
+          <option value="prefer-not">Prefer not to say</option>
+          <option value="male">Male</option>
+          <option value="female">Female</option>
+        </sonic-select>
+        <sonic-input autocomplete="bday" label="Date of birth" name="birth_date" type="date"></sonic-input>
+        <sonic-divider></sonic-divider>
+        <sonic-input autocomplete="email" label="Email" name="email" type="email"></sonic-input>
+        <sonic-input
+          autocomplete="email"
+          label="Confirm email"
+          name="email_confirmation"
+          type="email"
+        ></sonic-input>
+        <sonic-input autocomplete="new-password" label="Password" name="password" type="password"></sonic-input>
+        <sonic-input
+          autocomplete="new-password"
+          label="Confirm password"
+          name="password_confirmation"
+          type="password"
+        ></sonic-input>
+        <sonic-divider></sonic-divider>
+        <sonic-textarea label="Special assistance" rows="5"></sonic-textarea>
+        <sonic-switch>Add priority boarding</sonic-switch>
+        <sonic-checkbox>Subscribe to newsletter</sonic-checkbox>
+        <sonic-checkbox>
+          I accept the
+          <sonic-link href="#" class="underline">terms and conditions</sonic-link>
+        </sonic-checkbox>
+        <sonic-form-actions>
+          <sonic-button type="success">Confirm passenger</sonic-button>
+        </sonic-form-actions>
+      </sonic-form-layout>
+    </form>
+  </template>
+</sonic-code>
+
+## Responsive columns
+
+The column count depends on the host width, not the viewport: two columns above `440px`, one below. When the layout holds exactly one short field, it stays single-column so the field does not sit in half an empty row.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-8">
+      <sonic-form-layout style="max-width: 20rem">
+        <sonic-divider align="left">Narrow host</sonic-divider>
+        <sonic-input label="Email" name="email_narrow" type="email"></sonic-input>
+        <sonic-input label="Confirm email" name="email_confirm_narrow" type="email"></sonic-input>
+      </sonic-form-layout>
+      <sonic-form-layout>
+        <sonic-divider align="left">Wide host</sonic-divider>
+        <sonic-input label="Email" name="email_wide" type="email"></sonic-input>
+        <sonic-input label="Confirm email" name="email_confirm_wide" type="email"></sonic-input>
+      </sonic-form-layout>
+    </div>
+  </template>
+</sonic-code>
+
+## Full-width children
+
+Any child that is not a short field spans the full row: `sonic-textarea` · `sonic-checkbox` · `sonic-switch` · `sonic-divider` · `sonic-form-actions` and plain elements. Slotted dividers lose their vertical margin to match the grid gap, and `sonic-submit` uses `display: contents` so its button joins the grid directly.
 
 <sonic-code>
   <template>
-  <form>
     <sonic-form-layout>
-      <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-divider></sonic-divider>
-      <sonic-textarea label="Message" rows="5">
-      </sonic-textarea>
-      <sonic-switch>Activer une superbe option</sonic-switch>
-      <sonic-checkbox>Inscription à la newsletter</sonic-checkbox>
-      <sonic-checkbox>J'ai lu et accepte les <sonic-link href="#" class="underline">Conditions générales de ventes</sonic-link></sonic-checkbox>
+      <sonic-input label="Subject" name="subject"></sonic-input>
+      <sonic-textarea label="Details" rows="4"></sonic-textarea>
       <sonic-form-actions>
-        <sonic-button type="success">Valider</sonic-button> 
+        <sonic-button type="primary">Send</sonic-button>
       </sonic-form-actions>
     </sonic-form-layout>
-  </form >
   </template>
 </sonic-code>
 
+## Custom column wrapper
+
+Add the class `form-item-container` to a wrapper element to keep it in the two-column flow like a short field.
+
+<sonic-code>
+  <template>
+    <sonic-form-layout>
+      <sonic-input label="From" name="from" placeholder="CDG"></sonic-input>
+      <div class="form-item-container">
+        <sonic-input label="To" name="to" placeholder="JFK"></sonic-input>
+      </div>
+    </sonic-form-layout>
+  </template>
+</sonic-code>
+
+## API reference
+
+No attributes.
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Fields and blocks in visual order; short fields and `form-item-container` share rows, everything else spans the full width |