@supersoniks/concorde 5.0.2 → 5.0.3

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>
+

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

@@ -0,0 +1,142 @@
+# Input
+
+<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
+</sonic-button>
+
+## Label
+<sonic-code>
+  <template>
+  <sonic-input label="Label"></sonic-input>
+  </template>
+</sonic-code>
+
+## Placeholder
+<sonic-code>
+  <template>
+  <sonic-input placeholder="placeholder"></sonic-input>
+  </template>
+</sonic-code>
+
+## Value
+<sonic-code>
+  <template>
+  <sonic-input value="value"></sonic-input>
+  </template>
+</sonic-code>
+
+## Required
+<sonic-code>
+  <template>
+  <sonic-input required  type="email" placeholder="you@email.com" label="Feedback on blur"></sonic-input>
+  </template>
+</sonic-code>
+
+## Description
+<sonic-code>
+  <template>
+  <sonic-input description="Description goes here" ></sonic-input>
+  </template>
+</sonic-code>
+
+## Type
+<sonic-button size="2xs" type="info" target="_blank" href="https://www.w3schools.com/html/html_form_input_types.asp">Liste des types</sonic-button>
+
+<sonic-code>
+  <template>
+  <div class="grid gap-3">
+    <sonic-input type="text" label="Text">Text</sonic-input>
+    <sonic-input type="email" label="Email" placeholder="plop@kiki.com"></sonic-input>
+    <sonic-input type="password" label="Password"></sonic-input>
+    <sonic-input type="date" label="Date"></sonic-input>
+    <sonic-input type="number" label="Number"></sonic-input>
+    <sonic-input type="color" label="Color" value="#ffff00"></sonic-input>
+  </div>
+  </template>
+</sonic-code>
+
+## Size
+<sonic-code>
+  <template>
+  <div class="grid gap-3">
+    <sonic-input size="2xs" value="2xs"></sonic-input>
+    <sonic-input size="xs" value="xs"></sonic-input>
+    <sonic-input size="sm" value="sm"></sonic-input>
+    <sonic-input size="md" value="md"></sonic-input>
+    <sonic-input value="default"></sonic-input>
+    <sonic-input size="lg" value="lg"></sonic-input>
+    <sonic-input size="xl" value="xl"></sonic-input>
+    <sonic-input size="2xl" value="2xl"></sonic-input>
+  </div>
+  </template>
+</sonic-code>
+
+## List
+<sonic-alert status="error" label="Non fonctionnel" class="mb-4"></sonic-alert>
+
+<sonic-code>
+  <template>
+  <sonic-input list="browsers"></sonic-input>
+  <datalist id="browsers">
+    <option value="Internet Explorer">
+    <option value="Firefox">
+    <option value="Google Chrome">
+    <option value="Opera">
+    <option value="Safari">
+  </datalist>
+  </template>
+</sonic-code>
+
+## Prefix & suffix
+
+<sonic-code>
+  <template>
+  <div class="grid grid-cols-2 gap-3">
+    <sonic-input type="search" label="Search" placeholder="Search plane">
+      <sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
+    </sonic-input>
+    <sonic-input type="number" label="Amount" placeholder="0">
+      <sonic-icon library="iconoir" name="euro" slot="suffix"></sonic-icon>
+    </sonic-input>
+  </div>
+  </template>
+</sonic-code>
+
+## InlineContent
+
+<sonic-code>
+  <template>
+  <div class="grid grid-cols-2 gap-3">
+    <sonic-input inlineContent type="search" label="Search icon in input" placeholder="Search plane">
+      <sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
+    </sonic-input>
+    <sonic-input inlineContent type="number" label="Number of seats" placeholder="0">
+      <div slot="suffix" class="flex gap-2 items-center">
+        <sonic-badge type="danger" size="sm">4 max</sonic-badge>
+        <sonic-icon library="iconoir" name="euro" ></sonic-icon>
+      </div>
+    </sonic-input>
+  </div>
+  </template>
+</sonic-code>
+
+
+
+## Example of use — search + queue
+
+Filter with **`formDataProvider`** + **`name="contains"`** (mock API: substring on joke text). Caption and rows via Lit (`@subscribe`, `.items` on `sonic-queue`):
+
+<docs-lit-demo for="docs-joke-search-demo"></docs-lit-demo>
+
+
+<sonic-code>
+  <template>
+    <sonic-input type="search"  placeholder="Search plane" class="inline-block">
+    </sonic-input>
+    <sonic-button type="danger" label="Amount" placeholder="0">azdazd
+    </sonic-button>
+  </template>
+</sonic-code>
+
+<!-- <sonic-input type="password" inlineContent size="2xl"><span slot="suffix">PLOP</span></sonic-input> -->

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

@@ -0,0 +1,29 @@
+# Input-autocomplete
+
+Champ formulaire + suggestions via [queue](#core/components/functional/queue/queue.md/queue). Valeur via `formDataProvider` + `name` ; la recherche filtre la queue (store interne).
+
+Rendu des lignes : propriété **`.items`** (callback Lit) — voir les démos ci-dessous. Mock : `serviceURL="/docs-mock-api/geo/"`.
+
+## Simple
+
+`name` = paramètre de recherche = valeur formulaire.
+
+<docs-lit-demo for="docs-input-autocomplete-basic-demo"></docs-lit-demo>
+
+## Valeur ≠ paramètre de recherche
+
+Recherche sur `nom`, valeur formulaire = `code`. Préremplissage via `value`.
+
+<docs-lit-demo for="docs-input-autocomplete-code-demo"></docs-lit-demo>
+
+## Mode select
+
+À la fermeture du pop, seule une valeur de la liste (ou vide) est conservée.
+
+<docs-lit-demo for="docs-input-autocomplete-select-demo"></docs-lit-demo>
+
+## Navigation clavier
+
+`data-keyboard-nav` sur le champ et les items (flèches haut / bas).
+
+<docs-lit-demo for="docs-input-autocomplete-keyboard-demo"></docs-lit-demo>

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

@@ -0,0 +1,57 @@
+# Radio
+
+## Size
+<sonic-code>
+  <template>
+    <div class="grid gap-2" formDataProvider="radioSizeExemple">
+      <sonic-radio name="size" value="2xs" size="2xs">2xs radio</sonic-radio>
+      <sonic-radio name="size" value="xs" size="xs">xs radio</sonic-radio>
+      <sonic-radio name="size" value="sm" size="sm">sm radio</sonic-radio>
+      <sonic-radio name="size" value="default" >default radio</sonic-radio>
+      <sonic-radio name="size" value="lg" size="lg">lg radio</sonic-radio>
+      <sonic-radio name="size" value="xl" size="xl">xl radio</sonic-radio>
+      <sonic-radio name="size" value="2xl" size="2xl">2xl radio</sonic-radio>
+    </div>
+  </template>
+</sonic-code>
+
+## Checked
+<sonic-code>
+  <template>
+  <sonic-radio checked
+    >Already checked radio
+  </sonic-radio>
+  </template>
+</sonic-code>
+
+## Disabled
+<sonic-code>
+  <template>
+  <sonic-radio disabled
+    >Disabled radio
+  </sonic-radio>
+  </template>
+</sonic-code>
+
+## Disabled and checked
+<sonic-code>
+  <template>
+  <sonic-radio disabled checked
+    >Disabled but already checked radio
+  </sonic-radio>
+  </template>
+</sonic-code>
+
+## radio with link
+<sonic-code>
+  <template>
+  <sonic-radio name="link" value="link">radio with <sonic-link href="#" class="underline text-info">link</sonic-link>
+  </template>
+</sonic-code>
+
+
+## Example of use — blacklist + queue
+
+Same mock filter as [Checkbox](#core/components/ui/form/checkbox/checkbox.md/checkbox) (`blacklistFlags` query param). Radio sends **one** flag at a time.
+
+<docs-lit-demo for="docs-joke-blacklist-radio-demo"></docs-lit-demo>

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

@@ -0,0 +1,71 @@
+# Select
+
+## Options
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-select> 
+        <option value="">No Selection</option>
+        <option value="1">One</option>
+        <option value="2" selected>Two (set by "tag")</option>
+        <option value="3">Three</option>
+      </sonic-select>
+      <sonic-select options='[{"value":"", "wording":"Set options via \"attribute\""},
+              {"value":"dark", "wording":"dark (set by \"attribute\")", "selected" : "true"}, {"value":"auto", "wording":"auto"}
+              ]'> 
+      </sonic-select>
+    </div>
+  </template>
+</sonic-code>
+
+## Size
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-select size="2xs"><option>2xs</option></sonic-select>
+      <sonic-select size="xs"><option>xs</option></sonic-select>
+      <sonic-select size="sm"><option>sm</option></sonic-select>
+      <sonic-select size="md"><option>md</option></sonic-select>
+      <sonic-select size="default"><option>default</option></sonic-select>
+      <sonic-select size="lg"><option>lg</option></sonic-select>
+      <sonic-select size="xl"><option>xl</option></sonic-select>
+      <sonic-select size="2xl"><option>2xl</option></sonic-select>
+    </div>
+  </template>
+</sonic-code>
+
+
+## Multiple
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-select multiple> 
+        <option value="">Choose a number</option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </sonic-select>
+    </div>
+  </template>
+</sonic-code>
+
+
+## Disabled
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-select disabled> 
+        <option value="">Choose a number</option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </sonic-select>
+    </div>
+  </template>
+</sonic-code>
+
+## Example of use — language filter + queue
+
+**`name="lang"`** is sent as `?lang=fr|en` to the [doc mock API](#docs/_misc/docs-mock-api.md/docs-mock-api) (`filterDocsJokes`). Same pattern as [Input](#core/components/ui/form/input/input.md/input) (`contains`):
+
+<docs-lit-demo for="docs-joke-lang-demo"></docs-lit-demo>

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

@@ -0,0 +1,57 @@
+# Switch
+
+## Size
+<sonic-code>
+  <template>
+    <div class="grid gap-2" formDataProvider="switchSizeExemple">
+      <sonic-switch name="size2xs" value="2xs" size="2xs">2xs switch</sonic-switch>
+      <sonic-switch name="sizexs" value="xs" size="xs">xs switch</sonic-switch>
+      <sonic-switch name="sizesm" value="sm" size="sm">sm switch</sonic-switch>
+      <sonic-switch name="size" value="default" >default switch</sonic-switch>
+      <sonic-switch name="sizelg" value="lg" size="lg">lg switch</sonic-switch>
+      <sonic-switch name="sizexl" value="xl" size="xl">xl switch</sonic-switch>
+      <sonic-switch name="size2xl" value="2xl" size="2xl">2xl switch</sonic-switch>
+    </div>
+  </template>
+</sonic-code>
+
+## Checked
+<sonic-code>
+  <template>
+  <sonic-switch checked
+    >Already checked switch
+  </sonic-switch>
+  </template>
+</sonic-code>
+
+## Disabled
+<sonic-code>
+  <template>
+  <sonic-switch disabled
+    >Disabled switch
+  </sonic-switch>
+  </template>
+</sonic-code>
+
+## Disabled and checked
+<sonic-code>
+  <template>
+  <sonic-switch disabled checked
+    >Disabled but already checked switch
+  </sonic-switch>
+  </template>
+</sonic-code>
+
+## switch with link
+<sonic-code>
+  <template>
+  <sonic-switch name="link" value="link">switch with <sonic-link href="#" class="underline text-info">link</sonic-link>
+  </template>
+</sonic-code>
+
+
+## Example of use — blacklist + queue
+
+Same mock filter as [Checkbox](#core/components/ui/form/checkbox/checkbox.md/checkbox); switches can enable several flags (comma-separated in the query).
+
+<docs-lit-demo for="docs-joke-blacklist-switch-demo"></docs-lit-demo>

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

@@ -0,0 +1,65 @@
+# Textarea
+
+<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
+</sonic-button>
+
+
+## Label
+<sonic-code>
+  <template>
+  <sonic-textarea label="Label"></sonic-textarea>
+  </template>
+</sonic-code>
+
+## Placeholder
+<sonic-code>
+  <template>
+  <sonic-textarea placeholder="placeholder"></sonic-textarea>
+  </template>
+</sonic-code>
+
+## Value
+<sonic-code>
+  <template>
+  <sonic-textarea value="value"></sonic-textarea>
+  </template>
+</sonic-code>
+
+## Required
+<sonic-code>
+  <template>
+  <sonic-textarea required label="Feedback on blur" placeholder="required" ></sonic-textarea>
+  </template>
+</sonic-code>
+
+## Rows
+<sonic-code>
+  <template>
+  <sonic-textarea rows="8"></sonic-textarea>
+  </template>
+</sonic-code>
+
+## Description
+<sonic-code>
+  <template>
+  <sonic-textarea  description="Description goes here" ></sonic-textarea>
+  </template>
+</sonic-code>
+
+
+## Size
+<sonic-code>
+  <template>
+  <div class="grid gap-4">
+    <sonic-textarea size="2xs" value="2xs"></sonic-textarea>
+    <sonic-textarea size="xs" value="xs"></sonic-textarea>
+    <sonic-textarea size="sm" value="sm"></sonic-textarea>
+    <sonic-textarea value="md / default"></sonic-textarea>
+    <sonic-textarea size="lg" value="lg"></sonic-textarea>
+    <sonic-textarea size="xl" value="xl"></sonic-textarea>
+    <sonic-textarea size="2xl" value="2xl"></sonic-textarea>
+  </div>
+  </template>
+</sonic-code>