@supersoniks/concorde 4.8.0 → 4.9.1

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

@@ -0,0 +1,182 @@
+# Button
+
+## Type
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-button>Default</sonic-button>
+      <sonic-button type="primary">Primary</sonic-button>
+      <sonic-button type="neutral">Neutral</sonic-button>
+      <sonic-button type="warning">Warning</sonic-button>
+      <sonic-button type="info">Info</sonic-button>
+      <sonic-button type="success">Success</sonic-button>
+      <sonic-button type="danger">Danger</sonic-button>
+      <sonic-button type="custom" style="--sc-btn-custom-color: #fde68a; --sc-btn-custom-bg: #5b21b6">Custom</sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+## Outline
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-button variant="outline">Default</sonic-button>
+      <sonic-button variant="outline" type="primary">Primary</sonic-button>
+      <sonic-button variant="outline" type="neutral">Neutral</sonic-button>
+      <sonic-button variant="outline" type="warning">Warning</sonic-button>
+      <sonic-button variant="outline" type="info">Info</sonic-button>
+      <sonic-button variant="outline" type="success">Success</sonic-button>
+      <sonic-button variant="outline" type="danger">Danger</sonic-button>
+      <sonic-button variant="outline" type="custom" style="--sc-btn-custom-bg: #5b21b6">Custom</sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+## Variant
+<sonic-code>
+  <template>
+    <sonic-button variant="default">Default</sonic-button>
+    <sonic-button variant="outline">Outline</sonic-button>
+    <sonic-button variant="ghost">Ghost</sonic-button>
+    <sonic-button variant="link">Link</sonic-button>
+    <sonic-button variant="unstyled">Unstyled</sonic-button>
+  </template>
+</sonic-code>
+
+## Size
+<sonic-code>
+  <template>
+    <sonic-button size="2xs">2Xs button</sonic-button>
+    <sonic-button size="xs">Xs button</sonic-button>
+    <sonic-button size="sm">Sm button</sonic-button>
+    <sonic-button size="md">Md button</sonic-button>
+    <sonic-button>Default button</sonic-button>
+    <sonic-button size="lg">Lg button</sonic-button>
+    <sonic-button size="xl">Xl button</sonic-button>
+    <sonic-button size="2xl">2Xl button</sonic-button>
+  </template>
+</sonic-code>
+
+## Shape
+<sonic-code>
+  <template>
+    <sonic-button shape="circle"> 😂 </sonic-button>
+    <sonic-button shape="square"> 🚀 </sonic-button>
+  </template>
+</sonic-code>
+
+## Loading
+The length of the button depends on the size of its content
+<sonic-code>
+  <template>
+    <sonic-button loading></sonic-button>
+    <sonic-button loading>Loading button</sonic-button>
+  </template>
+</sonic-code>
+
+## Swap
+<sonic-code>
+  <template>
+    <sonic-button formDataProvider="button_swap_example" name="youpi" value="youpla" type="primary" shape="circle" variant="outline" class="mr-4">
+      <sonic-icon library="iconoir" swap="on" name="eye-empty"></sonic-icon>
+      <sonic-icon library="iconoir" swap="off" name="eye-off"></sonic-icon>
+    </sonic-button>
+    <sonic-button formDataProvider="button_swap_example" name="youpi" value="youpla" type="primary" variant="outline">
+      <sonic-icon library="iconoir" swap="on" slot="prefix" name="eye-empty"></sonic-icon>
+      <sonic-icon library="iconoir" swap="off" slot="prefix" name="eye-off"></sonic-icon>
+      Révélez
+      <span swap="off">...</span>
+      <span swap="on">moi !</span>
+    </sonic-button>
+  </template>
+</sonic-code>
+
+## Reset
+<sonic-code>
+  <template>
+    <div formDataProvider="button-reset-demo" class="mb-2">
+      <sonic-checkbox name="aChexbox" value="AValueToSet">Set A value</sonic-checkbox><br>
+      <sonic-button reset>Reset current formDataProvider</sonic-button>
+    </div>
+      <sonic-button reset="button-reset-demo">Reset formDataProvider by name</sonic-button>
+  </template>
+</sonic-code>
+
+
+## GoBack
+<sonic-code>
+  <template>
+    <sonic-button goBack type="primary" variant="outline"  class="mr-4">
+      <sonic-icon library="iconoir" slot="prefix" name="arrow-left"></sonic-icon>
+      Retour classique
+    </sonic-button>
+    <sonic-button goBack="http://la-billetterie.net" type="primary" variant="outline"  class="mr-4">
+      <sonic-icon library="iconoir" slot="prefix" name="arrow-left"></sonic-icon>
+      Retour url prédéfinie
+    </sonic-button>
+  </template>
+</sonic-code>
+
+## Button with icon
+<sonic-code>
+  <template>
+    <sonic-button goBack type="primary" variant="outline"  class="mr-4">
+      <sonic-icon library="iconoir" slot="prefix" name="arrow-right" ></sonic-icon>
+      Button with icon
+    </sonic-button>
+  </template>
+</sonic-code>
+
+
+## Button group
+<sonic-code>
+  <template>
+    <sonic-group label="Code promo" class="mr-4">
+      <sonic-input placeholder="Entrez votre code ici..."></sonic-input>
+      <sonic-button type="primary" shape="square">
+        <sonic-icon library="iconoir" library="iconoir" name="gift"></sonic-icon>
+      </sonic-button>
+    </sonic-group>
+    <sonic-divider size="lg"></sonic-divider>
+    <div class="text-lg mb-2">Choose a subscription</div>
+    <sonic-group formDataProvider="subscriptionData">
+      <sonic-button radio minWidth="10rem" name="subscription" value="standard" type="default"
+        >😎 Standard</sonic-button
+      >
+      <sonic-button radio minWidth="10rem" name="subscription" value="premium" type="default">⭐ Premium</sonic-button>
+      <sonic-button radio minWidth="10rem" name="subscription" value="diamond" type="default">💎 Diamond</sonic-button>
+    </sonic-group>
+  </template>
+</sonic-code>
+
+
+## Aria-label
+<sonic-code>
+  <template>
+      <sonic-button data-aria-label="Custom aria label" type="primary" >
+        Button with aria label
+      </sonic-button>
+       <sonic-button data-aria-label="Custom aria label" href="https://google.fr" type="primary" >
+        Button link with aria label
+      </sonic-button>
+  </template>
+</sonic-code>
+
+
+## Custom styles & active states with tailwind
+<sonic-code>
+  <template>
+    <div formDataProvider="subscriptionData2">
+      <sonic-button
+        class="bg-neutral-100 transition-all text-center text-lg text-neutral-400 rounded-md min-w-[8rem] [&[active]]:text-danger-content [&[active]]:min-w-[13rem] [&[active]]:bg-danger [&[active]]:font-black [&[active]]:rounded-full"
+        variant="unstyled"
+        checkable unique 
+        name="subscription"
+        value="premium"
+        type="default">
+          <span swap="off" class="inline-block py-2 px-3" >subscribe</span>
+          <span swap="on" class="inline-block py-2 px-3" >⭐ Premium</span>
+      </sonic-button>
+    </div>
+  </template>
+</sonic-code>

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

@@ -0,0 +1,12 @@
+# Captcha
+
+<sonic-code>
+  <template>
+  <sonic-captcha formDataProvider="captchaTestDataProvider" key="6Leq5V0iAAAAAB-41DlWN335jDlcIuXmhNtdd00t">
+    <sonic-submit serviceURL="/docs-mock-api" endPoint="api/unknown" onclick>
+      <sonic-button  class="mt-4">Submit with captcha</sonic-button>
+    </sonic-submit>
+  </sonic-captcha>
+  </template>
+</sonic-code>
+                

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

@@ -0,0 +1,97 @@
+# Card
+
+## Type
+<sonic-code>
+  <template>
+  <div class="grid grid-cols-3 gap-3">
+    <sonic-card type="base">Base</sonic-card>
+    <sonic-card type="light">Light</sonic-card>
+    <sonic-card type="primary">Primary</sonic-card>
+    <sonic-card type="warning">Warning</sonic-card>
+    <sonic-card type="danger">Danger</sonic-card>
+    <sonic-card type="success">Success</sonic-card>
+    <sonic-card type="info">Info</sonic-card>
+    <sonic-card type="neutral">Neutral</sonic-card>
+    <sonic-card type="invert">Invert</sonic-card>
+  </div>
+  </template>
+</sonic-code>
+
+## Header
+<sonic-code>
+  <template>
+  <div class="grid grid-cols-1 gap-3">
+    <sonic-card >
+      <sonic-card-header label="Header simple, titre géré via l'attribut : label" description="Description via l'attribut : description">
+      </sonic-card-header>
+    </sonic-card>
+    <sonic-card type="neutral">
+      <sonic-card-header label="Header composé">
+        <sonic-card-header-description>Description rendu via le composant : "sonic-card-header-description"</sonic-card-header-description>
+        <div  slot="suffix" class="flex">
+          Suffix
+        </div>
+      </sonic-card-header>
+    </sonic-card>
+    <sonic-card type="invert">
+      <sonic-card-header>
+        <div>Header custom</div>
+        <div class="text-lg text-danger">Tout le contenu excepté l'icône ✈ passe par le slot du header</div>
+        <span slot="suffix" >✈</span>
+      </sonic-card-header>
+    </sonic-card>
+  </div>
+  </template>
+</sonic-code>
+
+## Main
+<sonic-code>
+  <template>
+  <sonic-card >
+    <sonic-card-main >
+      <h3>Main area</h3>
+      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure id dolor debitis deleniti eligendi natus dolorem a commodi sunt dicta? Ipsa asperiores magni consequuntur dolor voluptatibus. Maxime, nemo? Facere, odio.</p>
+      <iframe width="560" height="315" src="https://www.youtube.com/embed/aqz-KE-bpKQ" title="Big Buck Bunny (Blender Foundation)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    </sonic-card-main>
+  </sonic-card>
+  </template>
+</sonic-code>
+
+## Footer
+<sonic-code>
+  <template>
+  <sonic-card >
+    <sonic-card-footer >
+      <div >
+        <h4 class="mb-0">Footer area</h4>
+        <small>Debitis deleniti eligendi natus dolorem aufdh.</small>
+        <div>
+          🛫 ✈ ✈ ✈ ✈ ✈ 🛬
+        </div>
+      </div>
+    </sonic-card-footer>
+  </sonic-card>
+  </template>
+</sonic-code>
+
+
+## Example of use
+<sonic-code>
+  <template>
+  <sonic-card >
+    <sonic-card-header label="Header" description="Header description">
+      <sonic-icon library="iconoir" name="nav-arrow-right" slot="suffix" ></sonic-icon>
+    </sonic-card-header>
+    <sonic-card-main >
+      <sonic-image rounded ratio="11/4" src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg">
+      </sonic-image>
+      <p><b>Main</b> - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure id dolor debitis deleniti eligendi natus dolorem a commodi sunt dicta? Ipsa asperiores magni consequuntur dolor voluptatibus. Maxime, nemo? Facere, odio.</p>
+    </sonic-card-main>
+    <sonic-card-footer>
+      <div>
+        <i>Footer</i> - Amet consectetur adipisicing
+      </div>
+    </sonic-card-footer>
+  </sonic-card>
+  </template>
+</sonic-code>

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

@@ -0,0 +1,35 @@
+# Divider
+
+## Default
+<sonic-code>
+  <template>
+  <sonic-divider></sonic-divider>
+  </template>
+</sonic-code>
+
+## Align
+<sonic-code>
+  <template>
+  <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
+<sonic-code>
+  <template>
+  <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>
+
+## Custom
+<sonic-code>
+  <template>
+  <sonic-divider><span class="mr-2">Lorem ipsum dolor sit amet</span><sonic-badge type="danger">+25</sonic-badge></sonic-divider>
+  </template>
+</sonic-code>

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

@@ -0,0 +1,77 @@
+# Checkbox
+
+## Size
+<sonic-code>
+  <template>
+  <div class="grid gap-2">
+    <sonic-checkbox size="2xs">2xs checkbox</sonic-checkbox>
+    <sonic-checkbox size="xs">xs checkbox</sonic-checkbox>
+    <sonic-checkbox size="sm">sm checkbox</sonic-checkbox>
+    <sonic-checkbox>default checkbox</sonic-checkbox>
+    <sonic-checkbox size="lg">lg checkbox</sonic-checkbox>
+    <sonic-checkbox size="xl">xl checkbox</sonic-checkbox>
+    <sonic-checkbox size="2xl">2xl checkbox</sonic-checkbox>
+  </div>
+  </template>
+</sonic-code>
+
+## Checked
+<sonic-code>
+  <template>
+  <sonic-checkbox checked
+    >Already checked checkbox
+  </sonic-checkbox>
+  </template>
+</sonic-code>
+
+## Disabled
+<sonic-code>
+  <template>
+  <sonic-checkbox disabled
+    >Disabled checkbox
+  </sonic-checkbox>
+  </template>
+</sonic-code>
+
+## Disabled and checked
+<sonic-code>
+  <template>
+  <sonic-checkbox disabled checked
+    >Disabled but already checked checkbox
+  </sonic-checkbox>
+  </template>
+</sonic-code>
+
+## Checkbox with link
+<sonic-code>
+  <template>
+  <sonic-checkbox>Checkbox with <sonic-link href="#" class="underline text-info">link</sonic-link>
+  </template>
+</sonic-code>
+
+## Check all checkbox
+<sonic-code>
+  <template>    
+      <div formDataProvider="checkbox-check-all-demo" dataProvider="checkbox-check-all-demo">
+      <sonic-checkbox  name='someSharedName' value="all" checksAll>All</sonic-checkbox>
+      <sonic-divider></sonic-divider>
+      <div class="grid gap-2">
+      <sonic-checkbox name="someSharedName" value="foo">Foo</sonic-checkbox>
+      <sonic-checkbox name="someSharedName" value="bar">Bar</sonic-checkbox>
+      </div>
+      <sonic-divider></sonic-divider>
+      <div>
+        <span>Enabling unsetOnDisconect ensures that outdated or irrelevant values are not retained in the form state once their associated inputs are no longer rendered.</span>
+        <div id="prunable-checkbox" class="flex gap-2 items-center">
+        <sonic-checkbox name="someSharedName" value="baz">Baz</sonic-checkbox>
+        <sonic-button variant="ghost" shape="circle" unique name="toggleCheckboxExistance" onclick="document.getElementById('prunable-checkbox').remove();" value="true"><sonic-icon library="fontAwesome" prefix="solid" name="trash"></sonic-icon></sonic-button>
+        </div>
+    </div>
+  </template>
+</sonic-code>
+
+## Example of use — blacklist + queue
+
+Checked **`blacklistFlags`** values are sent to the mock API (`?blacklistFlags=racist,sexist,…`), which excludes jokes whose **`flags`** match (see `filterDocsJokes` in `src/docs/mock-api/fixtures.ts`).
+
+<docs-lit-demo for="docs-joke-blacklist-demo"></docs-lit-demo>

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

@@ -0,0 +1,129 @@
+# Fieldset
+
+## Variant
+<sonic-code>
+  <template>
+    <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
+<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>
+  </template>
+</sonic-code>
+
+
+## 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>
+  </template>
+</sonic-code>
+
+## Example of use
+<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>
+      </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>
+      <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>

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

@@ -0,0 +1,77 @@
+# Form-actions
+
+## 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 >
+  </template>
+</sonic-code>
+
+## 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 >
+  </template>
+</sonic-code>
+
+## 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 >
+  </template>
+</sonic-code>
+
+## 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 >
+  </template>
+</sonic-code>
+

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

@@ -0,0 +1,44 @@
+# Form-layout
+
+<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-form-actions>
+        <sonic-button type="success">Valider</sonic-button> 
+      </sonic-form-actions>
+    </sonic-form-layout>
+  </form >
+  </template>
+</sonic-code>
+