@supersoniks/concorde 5.0.5 → 5.1.0

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

@@ -1,119 +1,44 @@
-# Form layout
-
-**`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 host is wider than **440px**; **textareas**, **toggles**, **dividers**, and **`sonic-form-actions`** span the full width. Wrap a **`form`** or **`sonic-fieldset`** body—no attributes are required.
-
-## Basic example
-
-Typical registration-style form: short fields flow in two columns on wide layouts; long or grouped blocks stay full width.
-
-<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="Message" rows="5"></sonic-textarea>
-        <sonic-switch>Enable optional feature</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">Submit</sonic-button>
-        </sonic-form-actions>
-      </sonic-form-layout>
-    </form>
-  </template>
-</sonic-code>
-
-## Responsive columns
-
-When the host **`offsetWidth`** is **greater than 440px**, the grid uses **two equal columns** with slightly larger gap (**1.75rem**). Below that breakpoint, fields stack in a **single column** (**1.5rem** gap).
-
-If the slot contains **exactly one** direct **`sonic-input`**, **`sonic-select`**, or **`sonic-input-autocomplete`**, the layout stays **one column** even above the breakpoint so a lone field does not sit in half an empty row.
-
-<sonic-code>
-  <template>
-    <div class="grid gap-8 md:grid-cols-2 mb-6">
-      <div>
-        <sonic-form-layout style="max-width: 20rem">
-        <sonic-divider align="left">Narrow host (single column)</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>
-      </div>
-    </div>
-    <div>
-      <sonic-form-layout>
-      <sonic-divider align="left">Wide host (two columns for inputs)</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 slotted blocks
-
-Everything except **`sonic-input`**, **`sonic-select`**, **`sonic-input-autocomplete`**, and slotted elements with class **`form-item-container`** is assigned **`grid-column: 1 / -1`**. Use this for **`sonic-textarea`**, **`sonic-checkbox`**, **`sonic-switch`**, **`sonic-form-actions`**, **`sonic-divider`**, and similar blocks.
-
-Slotted **`sonic-divider`** sets **`--sc-divider-my: 0`** so divider spacing matches the grid rhythm. Slotted **`sonic-submit`** uses **`display: contents`** so submit controls participate in the grid without an extra wrapper box.
+# Form-layout
 
 <sonic-code>
   <template>
+  <form>
     <sonic-form-layout>
-      <sonic-input label="Subject" name="subject"></sonic-input>
-      <sonic-textarea label="Details" rows="4"></sonic-textarea>
+      <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-form-actions>
-        <sonic-button type="primary">Send</sonic-button>
+        <sonic-button type="success">Valider</sonic-button> 
       </sonic-form-actions>
     </sonic-form-layout>
+  </form >
   </template>
 </sonic-code>
 
-## Custom column wrapper
-
-Add class **`form-item-container`** on a slotted wrapper (for example a **`div`**) when a field is not a direct **`sonic-input`** / **`sonic-select`** / **`sonic-input-autocomplete`** but should still share the two-column flow with short inputs.
-
-<sonic-code>
-  <template>
-    <sonic-form-layout>
-      <sonic-input label="City" name="city"></sonic-input>
-      <div class="form-item-container">
-        <sonic-input label="Postal code" name="postal_code"></sonic-input>
-      </div>
-    </sonic-form-layout>
-  </template>
-</sonic-code>
-
-## API reference
-
-No public attributes — layout follows slotted children and host width.
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | Form fields and blocks in visual order; column vs full-width rules apply per slotted tag or **`form-item-container`** class |

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

@@ -2,7 +2,7 @@
 
 <sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_input.asp#midcontentadcontainer">
   <sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
-  Native attributes list
+  Native attibutes list
 </sonic-button>
 
 ## Label

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

@@ -2,7 +2,7 @@
 
 <sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_textarea.asp#midcontentadcontainer">
   <sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
-  Native attributes list
+  Native attibutes list
 </sonic-button>
 
 

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

@@ -1,11 +1,6 @@
 # Group
 
-**`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`** follow form field styling. Use it for **button groups**, **radio rows**, or **input + action** toolbars.
-
 ## Radio group
-
-Pair with **`sonic-button`** **`radio`** and a shared **`name`**; ancestor **`formDataProvider`** stores the selected **`value`**.
-
 <sonic-code>
   <template>
     <sonic-group formDataProvider="subscriptionData">
@@ -17,13 +12,10 @@ Pair with **`sonic-button`** **`radio`** and a shared **`name`**; ancestor **`fo
 </sonic-code>
 
 ## Button group
-
-Adjacent link or action buttons without merging into one control.
-
 <sonic-code>
   <template>
     <sonic-group>
-      <sonic-button type="info" target="_blank" href="https://wwws.airfrance.fr/">🗼 Air France</sonic-button>
+      <sonic-button type="info" target="_blank" href="https://wwws.airfrance.fr/">🗼Air France</sonic-button>
       <sonic-button type="success" target="_blank" href="https://www.airtahitinui.com/">🌴 Air Tahiti</sonic-button>
       <sonic-button type="danger" target="_blank" href="https://www.aircorsica.com/">💣 Air Corsica</sonic-button>
     </sonic-group>
@@ -31,45 +23,53 @@ Adjacent link or action buttons without merging into one control.
 </sonic-code>
 
 ## Input actions prefix
-
-Action control before the field. **`label`** or **`description`** on **`sonic-group`** annotate the row.
-
 <sonic-code>
   <template>
-      <sonic-group label="Label" description="Description">
+    <div class="grid grid-cols-3 gap-3">
+      <sonic-group>
+        <sonic-button type="info" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
+        </sonic-button>
+        <sonic-input placeholder="placeholder" ></sonic-input>
+      </sonic-group>
+      <sonic-group label="Label">
+        <sonic-button type="info" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
+        </sonic-button>
+        <sonic-input  ></sonic-input>
+      </sonic-group>
+      <sonic-group description="Description">
         <sonic-button type="info" shape="square">
-          <sonic-icon library="iconoir" name="info-empty"></sonic-icon>
+          <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
         </sonic-button>
-        <sonic-input></sonic-input>
+        <sonic-input ></sonic-input>
       </sonic-group>
+    </div>
   </template>
 </sonic-code>
 
 ## Input actions suffix
-
-Field first, action after (submit, validate, etc.).
-
 <sonic-code>
   <template>
-      <sonic-group label="Label" description="Description">
-        <sonic-input></sonic-input>
+    <div class="grid grid-cols-3 gap-3">
+      <sonic-group>
+        <sonic-input placeholder="placeholder" ></sonic-input>
+        <sonic-button type="primary" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
+        </sonic-button>
+      </sonic-group>
+      <sonic-group label="Label">
+        <sonic-input  ></sonic-input>
+        <sonic-button type="primary" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
+        </sonic-button>
+      </sonic-group>
+      <sonic-group description="Description">
+        <sonic-input ></sonic-input>
         <sonic-button type="primary" shape="square">
-          <sonic-icon library="iconoir" name="check"></sonic-icon>
+          <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
         </sonic-button>
       </sonic-group>
+    </div>
   </template>
-</sonic-code>
-
-## API reference
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `label` | string (HTML) | Label above the row; **`slot="label"`** overrides / extends |
-| `description` | string (HTML) | Help text below the row; **`slot="description"`** overrides / extends |
-| `alignItems` | CSS align-items (default `center`) | Cross-axis alignment of the main flex row |
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | **`sonic-button`** · **`sonic-input`** · **`sonic-select`** in visual order |
-| `label` | Custom label markup |
-| `description` | Custom description markup |
+</sonic-code>

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

@@ -1,214 +1,125 @@
 # Icon
 
-**`sonic-icon`** renders inline SVG icons from the **bundled core set** or from **CDN libraries**. Set **`name`** (and **`library`** / **`prefix`** when needed); scale with **`size`**. Icons inherit **`currentColor`** and are **`aria-hidden`** by default—keep visible text nearby or label the control that contains them.
 
-## Core library
+## Custom
 
-Omit **`library`** to use the bundled set in `icons.json`. Available **`name`** values: `cancel` · `check` · `check-circled-outline` · `emoji-puzzled` · `info-empty` · `loader` · `minus-small` · `more-horiz` · `more-vert` · `nav-arrow-down` · `warning-circled-outline`.
+<p >Icons located in the following folder : <span class="text-info">/svg/$prefix/$name.svg<span></p>
 
-<sonic-code>
+<sonic-code customIconLibraryPath="/svg/$prefix/$name.svg"
+      customIconDefaultPrefix="regular">
   <template>
-    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
-      <div class="text-center">
-        <sonic-icon name="cancel" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">cancel</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="check" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">check</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="check-circled-outline" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">check-circled-outline</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="emoji-puzzled" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">emoji-puzzled</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="info-empty" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">info-empty</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="loader" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">loader</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="minus-small" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">minus-small</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="more-horiz" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">more-horiz</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="more-vert" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">more-vert</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="nav-arrow-down" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">nav-arrow-down</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="warning-circled-outline" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">warning-circled-outline</div>
+    <sonic-scope  customIconLibraryPath="/svg/$prefix/$name.svg"
+      customIconDefaultPrefix="regular">
+      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4  gap-8">
+        <div class="text-center">
+          <sonic-icon library="custom" prefix="regular" name="plane"></sonic-icon>
+          <br>
+          <div class="text-xs mt-1">regular</div>
+        </div>
+        <div class="text-center">
+          <sonic-icon library="custom" prefix="solid" name="plane"></sonic-icon>
+          <br>
+          <div class="text-xs mt-1">solid</div>
+        </div>
+        <div class="text-center">
+          <sonic-icon library="custom"  name="plane"></sonic-icon>
+          <br>
+          <div class="text-xs mt-1">default prefix</div>
+        </div>
       </div>
-    </div>
+    </sonic-scope>
   </template>
 </sonic-code>
 
-## External libraries
-
-Set **`library`** to load SVGs from a built-in CDN template. **`prefix`** falls back to each library’s default when omitted (`outline` for **`heroicons`**, **`regular`** for **`fontAwesome`** and **`material`**, and so on).
 
+## External
 <sonic-code>
   <template>
     <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
       <sonic-link href="https://heroicons.com/" target="_blank" class="text-center underline">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
-        <br />
+        <br>
         <div class="text-xs mt-1">heroicons</div>
       </sonic-link>
       <sonic-link href="https://iconoir.com/" target="_blank" class="text-center underline">
-        <sonic-icon library="iconoir" name="2x2-cell" size="lg"></sonic-icon>
-        <br />
+        <sonic-icon library="iconoir" name="2x2-cell"  size="lg"></sonic-icon>
+        <br>
         <div class="text-xs mt-1">iconoir</div>
       </sonic-link>
       <sonic-link href="https://materialdesignicons.com/" target="_blank" class="text-center underline">
         <sonic-icon library="material" prefix="outline" name="email" size="lg"></sonic-icon>
-        <br />
+        <br>
         <div class="text-xs mt-1">material design</div>
       </sonic-link>
       <sonic-link href="https://fontawesome.com/search?o=r&m=free&s=regular" target="_blank" class="text-center underline">
         <sonic-icon library="fontAwesome" prefix="regular" name="user" size="lg"></sonic-icon>
-        <br />
+        <br>
         <div class="text-xs mt-1">fontAwesome regular</div>
       </sonic-link>
       <sonic-link href="https://fontawesome.com/search?o=r&m=free&s=solid" target="_blank" class="text-center underline">
         <sonic-icon library="fontAwesome" prefix="solid" name="book" size="lg"></sonic-icon>
-        <br />
+        <br>
         <div class="text-xs mt-1">fontAwesome solid</div>
       </sonic-link>
       <sonic-link href="https://feathericons.com/" target="_blank" class="text-center underline">
-        <sonic-icon library="feathers" name="activity" size="lg"></sonic-icon>
-        <br />
+        <sonic-icon library="feathers" name="activity"  size="lg"></sonic-icon>
+        <br>
         <div class="text-xs mt-1">feathers</div>
       </sonic-link>
       <sonic-link href="https://lucide.dev/" target="_blank" class="text-center underline">
-        <sonic-icon library="lucide" name="album" size="lg"></sonic-icon>
-        <br />
+        <sonic-icon library="lucide" name="album"  size="lg"></sonic-icon>
+        <br>
         <div class="text-xs mt-1">lucide</div>
       </sonic-link>
     </div>
   </template>
 </sonic-code>
 
-## Custom library
-
-Use **`library="custom"`** with SVG files on your origin. On an ancestor (for example **`sonic-scope`** or **`sonic-code`**), set **`customIconLibraryPath`** to a URL template with **`$prefix`** and **`$name`** placeholders, and optionally **`customIconDefaultPrefix`** when **`prefix`** is omitted.
-
-<sonic-code
-  customIconLibraryPath="/svg/$prefix/$name.svg"
-  customIconDefaultPrefix="regular"
->
-  <template>
-    <sonic-scope
-      customIconLibraryPath="/svg/$prefix/$name.svg"
-      customIconDefaultPrefix="regular"
-    >
-      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
-        <div class="text-center">
-          <sonic-icon library="custom" prefix="regular" name="plane"></sonic-icon>
-          <br />
-          <div class="text-xs mt-1">regular</div>
-        </div>
-        <div class="text-center">
-          <sonic-icon library="custom" prefix="solid" name="plane"></sonic-icon>
-          <br />
-          <div class="text-xs mt-1">solid</div>
-        </div>
-        <div class="text-center">
-          <sonic-icon library="custom" name="plane"></sonic-icon>
-          <br />
-          <div class="text-xs mt-1">default prefix</div>
-        </div>
-      </div>
-    </sonic-scope>
-  </template>
-</sonic-code>
-
 ## Size
-
-Omit **`size`** for the default scale (`1em` height). Larger steps use **`3xl`**.
-
 <sonic-code>
   <template>
-    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
+    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4  gap-8">
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xs"></sonic-icon>
-        <br />
+        <br>
         <div class="text-xs mt-1">2xs</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xs"></sonic-icon>
-        <br />
+        <br>
         <div class="text-xs mt-1">xs</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="sm"></sonic-icon>
-        <br />
+        <br>
         <div class="text-xs mt-1">sm</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap"></sonic-icon>
-        <br />
+        <br>
         <div class="text-xs mt-1">default</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
-        <br />
+        <br>
         <div class="text-xs mt-1">lg</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xl"></sonic-icon>
-        <br />
+        <br>
         <div class="text-xs mt-1">xl</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xl"></sonic-icon>
-        <br />
+        <br>
         <div class="text-xs mt-1">2xl</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="3xl"></sonic-icon>
-        <br />
+        <br>
         <div class="text-xs mt-1">3xl</div>
       </div>
     </div>
   </template>
 </sonic-code>
 
-## Accessibility
-
-On connect, the host sets **`aria-hidden="true"`**. Treat icons as decorative unless the surrounding control already has an accessible name. Do not rely on **`sonic-icon`** alone for meaning—use visible text or **`aria-label`** on the parent button / link.
-
-<sonic-code>
-  <template>
-    <sonic-button type="neutral" variant="outline" shape="circle" aria-label="User profile">
-      <sonic-icon library="iconoir" name="user"></sonic-icon>
-    </sonic-button>
-  </template>
-</sonic-code>
-
-## API reference
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `name` | string | Icon id in the core bundle or in the remote library |
-| `library` | `heroicons` · `iconoir` · `feathers` · `lucide` · `material` · `fontAwesome` · `custom` | CDN or custom template; omit for bundled core icons |
-| `prefix` | string | Library-specific variant; defaults per library when empty |
-| `size` | `2xs` · `xs` · `sm` · `lg` · `xl` · `2xl` · `3xl` (default `md`) | `em`-based SVG scale on the host |
-
-Ancestor attributes (for **`library="custom"`** only): **`customIconLibraryPath`** (URL template with **`$prefix`** and **`$name`**) and **`customIconDefaultPrefix`**. May be set on **`sonic-scope`**, theme roots, or globally in the document.
-
-No slots — the component inlines fetched or bundled SVG markup.