@supersoniks/concorde 5.1.0 → 5.1.1

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

@@ -1,121 +0,0 @@
-# Alert
-
-<sonic-code>
-  <template>
-    <sonic-alert status="error" label="Email error" text="This address is already in use" background></sonic-alert>
-  </template>
-</sonic-code>
-
-## Status
-
-<sonic-code>
-  <template>
-  <div class="grid gap-4">
-  <sonic-alert label="Default"> This address is already in use. </sonic-alert>
-  <sonic-alert status="success" label="Success"> This address is already in use. </sonic-alert>
-  <sonic-alert status="error" label="Error"> This address is already in use. </sonic-alert>
-  <sonic-alert status="warning" label="Warning"> This address is already in use. </sonic-alert>
-  <sonic-alert status="info" label="Info"> This address is already in use. </sonic-alert>
-  </div>
-  </template>
-</sonic-code>
-
-## Sizes
-
-<sonic-code>
-  <template>
-  <div class="grid gap-4">
-  <sonic-alert status="error" label="Email error" size="2xs">
-    This address is already in use. Lorem ipsum dolor sit amet.
-  </sonic-alert>
-  <sonic-alert status="error" label="Email error" size="xs">
-    This address is already in use. Lorem ipsum dolor sit amet.
-  </sonic-alert>
-  <sonic-alert status="error" label="Email error" size="sm">
-    This address is already in use. Lorem ipsum dolor sit amet.
-  </sonic-alert>
-  <sonic-alert status="error" label="Email error">
-    This address is already in use. Lorem ipsum dolor sit amet.
-  </sonic-alert>
-  <sonic-alert status="error" label="Email error" size="lg">
-    This address is already in use. Lorem ipsum dolor sit amet.
-  </sonic-alert>
-  <sonic-alert status="error" label="Email error" size="xl">
-    This address is already in use. Lorem ipsum dolor sit amet.
-  </sonic-alert>
-  <sonic-alert status="error" label="Email error" size="2xl">
-    This address is already in use. Lorem ipsum dolor sit amet.
-  </sonic-alert>
-  </div>
-  </template>
-</sonic-code>
-
-## Alert with link
-
-<sonic-code>
-  <template>
-  <sonic-alert status="info" label="New messages !">
-    You have 2 unread messages<br />
-    <div class="flex gap-2 mt-1">
-      <sonic-button variant="outline" type="info" size="xs">See messages</sonic-button>
-      <sonic-button variant="ghost" type="info" size="xs">dismiss</sonic-button>
-    </div>
-  </sonic-alert>
-  </template>
-</sonic-code>
-
-## Background
-
-<sonic-code>
-  <template>
-  <div class="grid gap-4">
-  <sonic-alert background label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="success" background label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="error" background label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="warning" background label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="info" background label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  </div>
-  </template>
-</sonic-code>
-
-## Dismissible
-
-<sonic-code>
-  <template>
-  <sonic-alert class="mb-3" dismissible label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="success" class="mb-3" dismissible label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="error" class="mb-3" dismissible label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="warning" class="mb-3" dismissible label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="info" class="mb-3" dismissible label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  </template>
-</sonic-code>
-
-## Dismiss forever
-
-<sonic-code>
-  <template>
-  <sonic-alert class="mb-3" dismissible dismissForever label="Lorem ipsum dolor" id="addressUniqueId">
-    This address is already in use.
-  </sonic-alert>
-  </template>
-</sonic-code>

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

@@ -1,127 +0,0 @@
-# Badge
-
-## Type
-<sonic-code>
-  <template>
-  <sonic-badge>Default</sonic-badge>
-  <sonic-badge type="primary">Primary</sonic-badge>
-  <sonic-badge type="neutral">Neutral</sonic-badge>
-  <sonic-badge type="warning">Warning</sonic-badge>
-  <sonic-badge type="info">Info</sonic-badge>
-  <sonic-badge type="success">Success</sonic-badge>
-  <sonic-badge type="danger">Danger</sonic-badge>
-  <sonic-badge type="contrast">Contrast</sonic-badge>
-  </template>
-</sonic-code>
-
-
-## Outline
-<sonic-code>
-  <template>
-  <div class="flex items-center flex-wrap gap-3">
-    <sonic-badge variant="outline">Default</sonic-badge>
-    <sonic-badge variant="outline" type="primary">Primary</sonic-badge>
-    <sonic-badge variant="outline" type="neutral">Neutral</sonic-badge>
-    <sonic-badge variant="outline" type="warning">Warning</sonic-badge>
-    <sonic-badge variant="outline" type="info">Info</sonic-badge>
-    <sonic-badge variant="outline" type="success">Success</sonic-badge>
-    <sonic-badge variant="outline" type="danger">Danger</sonic-badge>
-    <sonic-badge variant="outline" type="contrast">Contrast</sonic-badge>
-  </div>
-  </template>
-</sonic-code>
-
-## Ghost
-<sonic-code>
-  <template>
-    <div class="flex items-center flex-wrap gap-3">
-    <sonic-badge variant="ghost">Default</sonic-badge>
-    <sonic-badge variant="ghost" type="primary">Primary</sonic-badge>
-    <sonic-badge variant="ghost" type="neutral">Neutral</sonic-badge>
-    <sonic-badge variant="ghost" type="warning">Warning</sonic-badge>
-    <sonic-badge variant="ghost" type="info">Info</sonic-badge>
-    <sonic-badge variant="ghost" type="success">Success</sonic-badge>
-    <sonic-badge variant="ghost" type="danger">Danger</sonic-badge>
-    <sonic-badge variant="ghost" type="contrast">Contrast</sonic-badge>
-  </div>
-  </template>
-</sonic-code>
-
-## Size
-<sonic-code>
-  <template>
-  <sonic-badge size="2xs">2Xs badge</sonic-badge>
-  <sonic-badge size="xs">Xs badge</sonic-badge>
-  <sonic-badge size="sm">Sm badge</sonic-badge>
-  <sonic-badge>Md badge</sonic-badge>
-  <sonic-badge size="lg">Lg badge</sonic-badge>
-  <sonic-badge size="xl">Xl badge</sonic-badge>
-  <sonic-badge size="2xl">2Xl badge</sonic-badge>
-  </template>
-</sonic-code>
-
-
-## Empty badges
-<sonic-code>
-  <template>
-  <div class="flex items-center flex-wrap gap-3">
-    <sonic-badge type="danger" size="2xs"></sonic-badge>
-    <sonic-badge type="danger" size="xs"></sonic-badge>
-    <sonic-badge type="danger" size="sm"></sonic-badge>
-    <sonic-badge type="danger"></sonic-badge>
-    <sonic-badge type="danger" size="lg"></sonic-badge>
-    <sonic-badge type="danger" size="xl"></sonic-badge>
-    <sonic-badge type="danger" size="2xl"></sonic-badge>
-  </div>
-  </template>
-</sonic-code>
-
-
-## Ellipsis
-<sonic-code>
-  <template>
-    <div class="grid grid-cols-3 gap-4" >
-        <sonic-badge ellipsis size="sm" variant="outline"  >
-        <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon> Lorem ipsum dolor sit consectetur adipiscing elit. Lorem ipsum dolor sit consectetur adipiscing elit.</sonic-badge>
-        <sonic-badge ellipsis size="sm" > <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon> Lorem ipsum dolor sit consectetur adipiscing elit. Lorem ipsum dolor sit consectetur adipiscing elit.</sonic-badge>
-    </div>
-  </template>
-</sonic-code>
-
-## Badge in button
-<sonic-code>
-  <template>
-  <div class="flex flex-wrap gap-4 items-center">
-    <sonic-button type="default">
-      Messages <sonic-badge slot="suffix" type="danger" size="xs">5</sonic-badge>
-    </sonic-button>
-    <div class="relative inline-block">
-      <sonic-button type="success" class="relative"> Mon compte </sonic-button>
-      <sonic-badge type="danger" size="xs" class="absolute right-1 top-0 pe-none transform -translate-y-1/2"
-        >12</sonic-badge
-      >
-    </div>
-    <div class="relative inline-block">
-      <sonic-button type="neutral" shape="circle" variant="outline"
-        ><sonic-icon library="iconoir" name="user"></sonic-icon>
-      </sonic-button>
-      <sonic-badge
-        type="danger"
-        size="xs"
-        class="absolute right-1 bottom-1 pe-none transform translate-y-1/2 translate-x-1/2"
-        >33</sonic-badge
-      >
-    </div>
-    <div class="relative inline-block">
-      <sonic-button type="neutral" shape="circle" variant="outline"
-        ><sonic-icon library="iconoir" name="user"></sonic-icon>
-      </sonic-button>
-      <sonic-badge
-        type="danger"
-        size="xs"
-        class="absolute right-2 bottom-2 pe-none transform translate-y-1/2 translate-x-1/2"
-      ></sonic-badge>
-    </div>
-  </div>
-  </template>
-</sonic-code>

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

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

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

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

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

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