@supersoniks/concorde 5.1.0 → 5.1.1

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

@@ -1,129 +0,0 @@
-# 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

@@ -1,77 +0,0 @@
-# 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

@@ -1,44 +0,0 @@
-# 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

@@ -1,142 +0,0 @@
-# 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 attibutes 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

@@ -1,29 +0,0 @@
-# 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

@@ -1,57 +0,0 @@
-# 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

@@ -1,71 +0,0 @@
-# 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

@@ -1,57 +0,0 @@
-# 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

@@ -1,65 +0,0 @@
-# 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 attibutes 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>