@supersoniks/concorde 5.0.5 → 5.1.1

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

@@ -1,196 +0,0 @@
-# Alert
-
-Alerts **surface important feedback** inline—errors, confirmations, or contextual help. Use **`label`** / **`text`** for simple copy, or the **default slot** for rich content (links, buttons). Set **`announce`** when the message appears after an action so screen readers pick it up.
-
-## Basic example
-
-<sonic-code>
-  <template>
-    <sonic-alert status="error" label="Email error" text="This address is already in use" background></sonic-alert>
-  </template>
-</sonic-code>
-
-## Status
-
-Color and icon follow `status`. With no `status`, behavior is `default`.
-
-<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>
-
-## Accessibility (`announce`)
-
-By default, an alert already in the DOM is **not** announced (no `role` / `aria-live`). Set **`announce`** when the message appears **after** user action (API response, validation, etc.): screen readers get `role="alert"` for `error`, otherwise `role="status"` and `aria-live="polite"`.
-
-`sonic-alert-messages` sets `announce` on every rendered alert.
-
-<sonic-code>
-  <template>
-    <sonic-alert announce status="success" label="Saved" text="Your changes were saved."></sonic-alert>
-  </template>
-</sonic-code>
-
-## Content and icon
-
-`label` and `text` accept plain text only. The default slot is rendered after `text`. Use the **`icon`** slot to replace the default `sonic-icon`. **`noIcon`** hides the icon.
-
-<sonic-code>
-  <template>
-    <sonic-alert status="info" noIcon label="No icon" text="Informational message."></sonic-alert>
-  </template>
-</sonic-code>
-
-## Custom icon slot
-
-Project any markup into **`slot="icon"`** (emoji, image, custom component). Keep it decorative with `aria-hidden="true"` when the message text already conveys meaning.
-
-<sonic-code>
-  <template>
-    <sonic-alert status="success" label="Achievement unlocked" background>
-      <span slot="icon" aria-hidden="true" class="text-lg leading-none">🎉</span>
-      You unlocked a new badge.
-    </sonic-alert>
-  </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
-
-Rich content in the slot (buttons, links).
-
-<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
-
-Tinted background from the `status` color (`color-mix` on `currentColor`).
-
-<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
-
-`dismissible` removes the alert from the DOM when the close control is clicked (i18n aria label). **`dismissible`** and **`background`** are independent: without `background`, close sits at the end of the row; with `background`, top-right.
-
-<sonic-code>
-  <template>
-    <sonic-alert status="info" class="mb-3" dismissible label="This address is already in use.">
-    </sonic-alert>
-    <sonic-alert class="mb-3" dismissible background label="Lorem ipsum dolor">
-      This address is already in use.
-    </sonic-alert>
-    <sonic-alert status="success" class="mb-3" dismissible background label="Lorem ipsum dolor">
-      This address is already in use.
-    </sonic-alert>
-    <sonic-alert status="error" class="mb-3" dismissible background label="Lorem ipsum dolor">
-      This address is already in use.
-    </sonic-alert>
-    <sonic-alert status="warning" class="mb-3" dismissible background label="Lorem ipsum dolor">
-      This address is already in use.
-    </sonic-alert>
-    <sonic-alert status="info" class="mb-3" dismissible background label="Lorem ipsum dolor">
-      This address is already in use.
-    </sonic-alert>
-  </template>
-</sonic-code>
-
-## Dismiss forever
-
-With **`dismissForever`**, dismissal is stored in `localStorage` (key `sonic-alert-dismissed`). A stable **`id`** on the element is **required**; without `id`, a warning is logged and nothing is persisted.
-
-<sonic-code>
-  <template>
-    <sonic-alert
-      class="mb-3"
-      dismissible
-      background
-      dismissForever
-      label="Lorem ipsum dolor"
-      id="addressUniqueId"
-    >
-      This address is already in use.
-    </sonic-alert>
-  </template>
-</sonic-code>
-
-## API reference
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `status` | `default` · `info` · `success` · `warning` · `error` | Color and default icon |
-| `label` | string | Title (plain text) |
-| `text` | string | Short body (plain text), rendered before the slot |
-| `size` | `2xs` … `2xl` | Corner radius and typography |
-| `background` | boolean | Tinted background (`color-mix` on status color) |
-| `dismissible` | boolean | Close control; removes the element from the DOM |
-| `dismissForever` | boolean | Persists dismissal in `localStorage`; requires **`id`** |
-| `noIcon` | boolean | Hides the icon (including custom `icon` slot content) |
-| `announce` | boolean | `role="alert"` / `aria-live` for dynamically injected content |
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | Message body (HTML, actions); rendered after `text` |
-| `icon` | Replaces the default `sonic-icon` |

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

@@ -1,85 +0,0 @@
-# Alert messages
-
-**`sonic-alert-messages`** renders a vertical stack of **`sonic-alert`** items from a **`messages`** array on a linked **data provider** (typical pattern: **`submitResultDataProvider`** after a form submit). Only entries with **`type="public"`** are shown. Each alert gets **`announce`** so screen readers pick up feedback after the request.
-
-## With submit result
-
-Bind **`dataProvider`** to the same publisher as **`submitResultDataProvider`**. API **`messages`** entries need **`type`**: **`public`**, plus **`content`** and optional **`status`** (`warning` · `success` · `error` · `info`).
-
-<sonic-code>
-  <template>
-    <sonic-scope
-      serviceURL="/docs-mock-api"
-      formDataProvider="submit-example"
-      submitResultDataProvider="submit-example-result"
-    >
-      <sonic-alert-messages dataProvider="submit-example-result" background class="mb-4"></sonic-alert-messages>
-      <div class="grid gap-4 max-w-md">
-        <sonic-input name="email" type="email" label="Email" value=""></sonic-input>
-        <sonic-input name="password" type="password" label="Password" value=""></sonic-input>
-        <sonic-submit endPoint="api/register" onClick>
-          <sonic-button type="primary">Submit (empty fields → error messages)</sonic-button>
-        </sonic-submit>
-      </div>
-    </sonic-scope>
-  </template>
-</sonic-code>
-
-## Shared alert props
-
-**`size`** · **`background`** and **`noIcon`** apply to every rendered **`sonic-alert`** in the list.
-
-<sonic-code>
-  <template>
-    <sonic-button
-      size="sm"
-      variant="outline"
-      class="mb-3"
-      onclick="SonicPublisherManager.get('submit-example-result').set({ messages: [{ type: 'public', content: 'Compact inline feedback without icons.', status: 'info' }] })"
-    >
-      Load sample messages
-    </sonic-button>
-    <sonic-alert-messages
-      dataProvider="submit-example-result"
-      size="sm"
-      background
-      noIcon
-    ></sonic-alert-messages>
-  </template>
-</sonic-code>
-
-## Message shape
-
-Example JSON on the result publisher (or API response merged into it):
-
-<sonic-code language="typescript">
-  <template>
-{
-  "messages": [
-    {
-      "type": "public",
-      "content": "The product has been added to your cart",
-      "status": "success"
-    }
-  ]
-}
-  </template>
-</sonic-code>
-
-## API reference
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `dataProvider` | publisher id | Source object; **`messages`** array is auto-filled via **Subscriber** |
-| `size` | `2xs` … `2xl` (default `md`) | Passed to each **`sonic-alert`** |
-| `background` | boolean | Tinted background on each alert |
-| `noIcon` | boolean | Hides icons on each alert |
-| `messages` | `Message[]` | Usually set by the publisher; each item uses **`content`** as alert **`text`** |
-
-| Message field | Values | Description |
-|---------------|---------|-------------|
-| `type` | `public` | Required for the message to render |
-| `content` | string | Alert body (**`text`** on **`sonic-alert`**) |
-| `status` | `warning` · `success` · `error` · `info` | Alert **`status`**; defaults to **`default`** when omitted |
-
-No slots — alerts are generated from **`messages`**.

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

@@ -1,188 +0,0 @@
-# Badge
-
-Badges are **compact, non-interactive** labels for status, counts, or categories. They mirror **`sonic-button`** styling (`type`, `variant`, `size`) without focus rings or click handling—use a button when the control should be actionable.
-
-## Type
-
-`default` — subtle background (`base-100`). `neutral` — dark fill (`base-content`) with light text, useful on light backgrounds.
-
-<sonic-code>
-  <template>
-    <div class="flex flex-wrap gap-2">
-      <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>
-    </div>
-  </template>
-</sonic-code>
-
-## Variant
-
-Default **`variant`** is filled. **`outline`** — border and text in the `type` color. **`ghost`** — text only, no padding (except in forced-colors mode).
-
-### 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>
-    </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>
-    </div>
-  </template>
-</sonic-code>
-
-## Size
-
-Default size is `md` (omit the `size` attribute). Typography and padding follow `sonic-button`.
-
-<sonic-code>
-  <template>
-    <div class="flex flex-wrap items-center gap-2">
-      <sonic-badge size="2xs">2Xs</sonic-badge>
-      <sonic-badge size="xs">Xs</sonic-badge>
-      <sonic-badge size="sm">Sm</sonic-badge>
-      <sonic-badge>Md</sonic-badge>
-      <sonic-badge size="lg">Lg</sonic-badge>
-      <sonic-badge size="xl">Xl</sonic-badge>
-      <sonic-badge size="2xl">2Xl</sonic-badge>
-    </div>
-  </template>
-</sonic-code>
-
-## Prefix and suffix slots
-
-Icons or short text before / after the main label.
-
-<sonic-code>
-  <template>
-    <sonic-badge type="info" size="sm">
-      <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon>
-      Info
-    </sonic-badge>
-    <sonic-badge type="success">
-      Verified
-      <sonic-icon slot="suffix" name="check" library="iconoir"></sonic-icon>
-    </sonic-badge>
-  </template>
-</sonic-code>
-
-## Empty badges
-
-Badge with no text (visual dot). `min-width` / `min-height` keep a readable shape.
-
-<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
-
-With `ellipsis`, long labels truncate. The parent must constrain width (`max-width`, grid, etc.).
-
-<sonic-code>
-  <template>
-    <div class="grid grid-cols-2 gap-4 max-w-xl">
-      <sonic-badge ellipsis size="sm" variant="outline">
-        <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon>
-        Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
-      </sonic-badge>
-      <sonic-badge ellipsis size="sm">
-        <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon>
-        Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
-      </sonic-badge>
-    </div>
-  </template>
-</sonic-code>
-
-## Badge in button
-
-Count inside a button (`slot="suffix"`) or a badge absolutely positioned on a button / icon.
-
-<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">My account</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>
-
-## API reference
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `type` | `default` (default) · `primary` · `neutral` · `warning` · `info` · `success` · `danger` | Semantic color (`--sc-*` tokens) |
-| `variant` | `default` (default) · `outline` · `ghost` | Filled, bordered, or text-only |
-| `size` | `2xs` … `2xl` (default `md`) | Typography and padding (aligned with **`sonic-button`**) |
-| `ellipsis` | boolean | Single-line truncation; parent must constrain width |
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | Main label |
-| `prefix` | Icon or short text before the label |
-| `suffix` | Icon or short text after the label |

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

@@ -1,183 +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>
-    <sonic-button loading><span slot="prefix">🚀</span>Loading with prefix<span slot="suffix">😂</span></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>