@supersoniks/concorde 5.1.2 → 5.1.3-immutable.1

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

@@ -6,7 +6,7 @@ Alerts **surface important feedback** inline—errors, confirmations, or context
 
 <sonic-code>
   <template>
-    <sonic-alert status="error" label="Gate change" text="CN 001 now departs from gate B12" background></sonic-alert>
+    <sonic-alert status="error" label="Email error" text="This address is already in use" background></sonic-alert>
   </template>
 </sonic-code>
 
@@ -17,11 +17,11 @@ Color and icon follow `status`. With no `status`, behavior is `default`.
 <sonic-code>
   <template>
     <div class="grid gap-4">
-      <sonic-alert label="Default">CN 001 · CDG → JFK.</sonic-alert>
-      <sonic-alert status="success" label="Success">CN 001 has landed at JFK.</sonic-alert>
-      <sonic-alert status="error" label="Error">CN 001 is cancelled.</sonic-alert>
-      <sonic-alert status="warning" label="Warning">Turbulence expected over the Atlantic.</sonic-alert>
-      <sonic-alert status="info" label="Info">Boarding starts in 20 minutes.</sonic-alert>
+      <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>
@@ -34,7 +34,7 @@ By default, an alert already in the DOM is **not** announced (no `role` / `aria-
 
 <sonic-code>
   <template>
-    <sonic-alert announce status="success" label="Checked in" text="Your boarding pass is ready."></sonic-alert>
+    <sonic-alert announce status="success" label="Saved" text="Your changes were saved."></sonic-alert>
   </template>
 </sonic-code>
 
@@ -44,50 +44,48 @@ By default, an alert already in the DOM is **not** announced (no `role` / `aria-
 
 <sonic-code>
   <template>
-    <sonic-alert status="info" noIcon label="No icon" text="Cruising altitude reached."></sonic-alert>
+    <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"`** (icon, image, custom component). Keep it decorative with `aria-hidden="true"` when the message text already conveys meaning.
+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="Upgrade confirmed" background>
-      <sonic-icon slot="icon" library="iconoir" name="trophy" aria-hidden="true"></sonic-icon>
-      You are now seated in first class.
+    <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>
 
-## Size
-
-Default size is `md` (omit the `size` attribute). `inherit` follows the parent font size.
+## Sizes
 
 <sonic-code>
   <template>
     <div class="grid gap-4">
-      <sonic-alert status="error" label="Delayed" size="2xs">
-        CN 001 departure moved to 18:40.
+      <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="Delayed" size="xs">
-        CN 001 departure moved to 18:40.
+      <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="Delayed" size="sm">
-        CN 001 departure moved to 18:40.
+      <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="Delayed">
-        CN 001 departure moved to 18:40.
+      <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="Delayed" size="lg">
-        CN 001 departure moved to 18:40.
+      <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="Delayed" size="xl">
-        CN 001 departure moved to 18:40.
+      <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="Delayed" size="2xl">
-        CN 001 departure moved to 18:40.
+      <sonic-alert status="error" label="Email error" size="2xl">
+        This address is already in use. Lorem ipsum dolor sit amet.
       </sonic-alert>
     </div>
   </template>
@@ -99,10 +97,10 @@ Rich content in the slot (buttons, links).
 
 <sonic-code>
   <template>
-    <sonic-alert status="info" label="Gate change">
-      CN 001 now departs from gate B12<br />
+    <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">View flight</sonic-button>
+        <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>
@@ -116,18 +114,18 @@ Tinted background from the `status` color (`color-mix` on `currentColor`).
 <sonic-code>
   <template>
     <div class="grid gap-4">
-      <sonic-alert background label="Flight update">Boarding is now open at gate B12.</sonic-alert>
-      <sonic-alert status="success" background label="Flight update">
-        Boarding is now open at gate B12.
+      <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="Flight update">
-        Boarding is now open at gate B12.
+      <sonic-alert status="error" background label="Lorem ipsum dolor">
+        This address is already in use.
       </sonic-alert>
-      <sonic-alert status="warning" background label="Flight update">
-        Boarding is now open at gate B12.
+      <sonic-alert status="warning" background label="Lorem ipsum dolor">
+        This address is already in use.
       </sonic-alert>
-      <sonic-alert status="info" background label="Flight update">
-        Boarding is now open at gate B12.
+      <sonic-alert status="info" background label="Lorem ipsum dolor">
+        This address is already in use.
       </sonic-alert>
     </div>
   </template>
@@ -139,10 +137,22 @@ Tinted background from the `status` color (`color-mix` on `currentColor`).
 
 <sonic-code>
   <template>
-    <sonic-alert status="info" class="mb-3" dismissible label="Baggage claim moved to belt 4.">
+    <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 class="mb-3" dismissible background label="Flight update">
-      Boarding is now open at gate B12.
+    <sonic-alert status="info" class="mb-3" dismissible background label="Lorem ipsum dolor">
+      This address is already in use.
     </sonic-alert>
   </template>
 </sonic-code>
@@ -158,10 +168,10 @@ With **`dismissForever`**, dismissal is stored in `localStorage` (key `sonic-ale
       dismissible
       background
       dismissForever
-      label="Flight update"
+      label="Lorem ipsum dolor"
       id="addressUniqueId"
     >
-      Boarding is now open at gate B12.
+      This address is already in use.
     </sonic-alert>
   </template>
 </sonic-code>
@@ -170,10 +180,10 @@ With **`dismissForever`**, dismissal is stored in `localStorage` (key `sonic-ale
 
 | Attribute | Values | Description |
 |----------|---------|-------------|
-| `status` | `default` (default) · `info` · `success` · `warning` · `error` | Color and default icon |
+| `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` (default `md`) · `inherit` | Corner radius and typography |
+| `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`** |

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

@@ -24,27 +24,34 @@ Badges are **compact, non-interactive** labels for status, counts, or categories
 
 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="grid gap-3">
-      <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>
-      <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>
+    <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>
@@ -74,11 +81,11 @@ Icons or short text before / after the main label.
 <sonic-code>
   <template>
     <sonic-badge type="info" size="sm">
-      <sonic-icon slot="prefix" name="airplane" library="iconoir"></sonic-icon>
-      Boarding
+      <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon>
+      Info
     </sonic-badge>
     <sonic-badge type="success">
-      Landed
+      Verified
       <sonic-icon slot="suffix" name="check" library="iconoir"></sonic-icon>
     </sonic-badge>
   </template>
@@ -111,11 +118,11 @@ With `ellipsis`, long labels truncate. The parent must constrain width (`max-wid
     <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>
-        CN 001 · CDG → JFK · Gate change: now boarding at gate B12, terminal 2E
+        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>
-        CN 001 · CDG → JFK · Gate change: now boarding at gate B12, terminal 2E
+        Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
       </sonic-badge>
     </div>
   </template>
@@ -129,10 +136,10 @@ Count inside a button (`slot="suffix"`) or a badge absolutely positioned on a bu
   <template>
     <div class="flex flex-wrap gap-4 items-center">
       <sonic-button type="default">
-        Departures <sonic-badge slot="suffix" type="danger" size="xs">5</sonic-badge>
+        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">Crew</sonic-button>
+        <sonic-button type="success" class="relative">My account</sonic-button>
         <sonic-badge
           type="danger"
           size="xs"
@@ -171,7 +178,7 @@ Count inside a button (`slot="suffix"`) or a badge absolutely positioned on a bu
 |----------|---------|-------------|
 | `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`) · `inherit` | Typography and padding (aligned with **`sonic-button`**) |
+| `size` | `2xs` … `2xl` (default `md`) | Typography and padding (aligned with **`sonic-button`**) |
 | `ellipsis` | boolean | Single-line truncation; parent must constrain width |
 
 | Slot | Description |

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

@@ -1,11 +1,6 @@
 # Button
 
-**`sonic-button`** is the clickable control of the library: a plain button, a link when `href` is set, or a form toggle when it has a `name` and `value`. It shares `type` / `variant` / `size` with **`sonic-badge`**, and exposes `prefix` / `suffix` slots for icons.
-
 ## Type
-
-With no `type`, the button is `default`. Use `custom` with `--sc-btn-custom-color` and `--sc-btn-custom-bg` for a one-off color.
-
 <sonic-code>
   <template>
     <div class="flex flex-wrap gap-2">
@@ -21,196 +16,168 @@ With no `type`, the button is `default`. Use `custom` with `--sc-btn-custom-colo
   </template>
 </sonic-code>
 
-## Variant
-
-With no `variant`, the button is filled. The `outline` / `ghost` / `link` variants take their color from `type`. `unstyled` removes all styling so you can apply your own classes.
-
+## Outline
 <sonic-code>
   <template>
     <div class="flex flex-wrap gap-2">
-      <sonic-button type="primary">Default</sonic-button>
-      <sonic-button type="primary" variant="outline">Outline</sonic-button>
-      <sonic-button type="primary" variant="ghost">Ghost</sonic-button>
-      <sonic-button type="primary" variant="link">Link</sonic-button>
-      <sonic-button variant="unstyled">Unstyled</sonic-button>
+      <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>
 
-## Size
-
-With no `size`, the button is `md`.
-
+## Variant
 <sonic-code>
   <template>
-    <div class="flex flex-wrap items-center gap-2">
-      <sonic-button size="2xs">2xs</sonic-button>
-      <sonic-button size="xs">xs</sonic-button>
-      <sonic-button size="sm">sm</sonic-button>
-      <sonic-button>md</sonic-button>
-      <sonic-button size="lg">lg</sonic-button>
-      <sonic-button size="xl">xl</sonic-button>
-      <sonic-button size="2xl">2xl</sonic-button>
-    </div>
+    <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>
 
-## Shape
-
-`circle` and `square` make a fixed-size icon button. `block` stretches to the full width of the parent.
-
+## Size
 <sonic-code>
   <template>
-    <div class="flex flex-wrap items-center gap-2 mb-2">
-      <sonic-button shape="circle" type="primary"><sonic-icon library="iconoir" name="plus"></sonic-icon></sonic-button>
-      <sonic-button shape="square" type="primary"><sonic-icon library="iconoir" name="plus"></sonic-icon></sonic-button>
-    </div>
-    <sonic-button shape="block" type="primary">Block</sonic-button>
+    <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>
 
-## Prefix and suffix slots
-
+## Shape
 <sonic-code>
   <template>
-    <div class="flex flex-wrap gap-2">
-      <sonic-button type="primary" variant="outline">
-        <sonic-icon library="iconoir" slot="prefix" name="arrow-left"></sonic-icon>
-        Previous flight
-      </sonic-button>
-      <sonic-button type="primary">
-        Next flight
-        <sonic-icon library="iconoir" slot="suffix" name="arrow-right"></sonic-icon>
-      </sonic-button>
-    </div>
+    <sonic-button shape="circle"> 😂 </sonic-button>
+    <sonic-button shape="square"> 🚀 </sonic-button>
   </template>
 </sonic-code>
 
 ## Loading
-
-`loading` replaces the content with a spinner and blocks clicks. The button keeps the width of its content.
-
+The length of the button depends on the size of its content
 <sonic-code>
   <template>
-    <div class="flex flex-wrap gap-2">
-      <sonic-button loading></sonic-button>
-      <sonic-button loading>Loading button</sonic-button>
-      <sonic-button loading type="primary">
-        <sonic-icon library="iconoir" slot="prefix" name="check"></sonic-icon>
-        Checking in
-      </sonic-button>
-    </div>
+    <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>
 
-## Link
-
-With `href`, the button renders as a link. For a relative `href`, the button gets `active` when the current URL matches, according to `autoActive` (default `partial`). Add `pushState` to navigate without reloading the page.
+## 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 class="flex flex-wrap gap-2">
-      <sonic-button href="https://example.com" target="_blank" type="primary">External link</sonic-button>
-      <sonic-button href="/core/components/ui/button" variant="ghost">Current page</sonic-button>
+    <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>
 
-## Toggle and radio
-
-A button with `name` and `value` writes to its `formDataProvider` and toggles `active` when clicked. Add `radio` for a single choice in a group, or `unique` to also allow deselecting. Children marked `swap="on"` / `swap="off"` show only in the active / inactive state.
 
+## GoBack
 <sonic-code>
   <template>
-    <div class="flex flex-wrap items-center gap-4">
-      <sonic-button formDataProvider="button-toggle-demo" name="visible" value="yes" type="primary" shape="circle" variant="outline">
-        <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-group formDataProvider="button-radio-demo">
-        <sonic-button radio minWidth="7rem" name="plan" value="free">Free</sonic-button>
-        <sonic-button radio minWidth="7rem" name="plan" value="pro">Pro</sonic-button>
-        <sonic-button radio minWidth="7rem" name="plan" value="team">Team</sonic-button>
-      </sonic-group>
-    </div>
+    <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>
 
-## Reset
+## 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>
 
-`reset` clears the button's own `formDataProvider`. Give it a value to clear another one by name.
 
+## Button group
 <sonic-code>
   <template>
-    <div formDataProvider="button-reset-demo" class="mb-2">
-      <sonic-checkbox name="agree" value="yes">Extra baggage</sonic-checkbox>
-      <sonic-button reset>Reset this form</sonic-button>
-    </div>
-    <sonic-button reset="button-reset-demo">Reset by name</sonic-button>
+    <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>
 
-## Go back
-
-`goBack` navigates back in history. When there is no previous page on the same origin, it goes to the attribute value, or to the site root if empty.
 
+## Aria-label
 <sonic-code>
   <template>
-    <sonic-button goBack="/" variant="outline">
-      <sonic-icon library="iconoir" slot="prefix" name="arrow-left"></sonic-icon>
-      Back
-    </sonic-button>
+      <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>
 
-## Accessibility
-
-Icon-only buttons need a label. Use `data-aria-label`, which is forwarded to the inner `button` (and link).
 
+## Custom styles & active states with tailwind
 <sonic-code>
   <template>
-    <sonic-button shape="circle" data-aria-label="Close">
-      <sonic-icon library="iconoir" name="cancel"></sonic-icon>
-    </sonic-button>
+    <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>
-
-## API reference
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `type` | `default` (default) · `primary` · `neutral` · `warning` · `info` · `success` · `danger` · `custom` | Color; `custom` reads `--sc-btn-custom-color` and `--sc-btn-custom-bg` |
-| `variant` | `default` (default) · `outline` · `ghost` · `link` · `unstyled` | Visual style |
-| `size` | `2xs` … `2xl` (default `md`) · `inherit` | Typography and padding |
-| `shape` | `default` (default) · `circle` · `square` · `block` | Icon button or full width |
-| `icon` | boolean | Enlarges a lone icon |
-| `loading` | boolean | Shows a spinner and blocks clicks |
-| `disabled` | boolean | Dims the button and blocks clicks |
-| `active` | boolean | Active state, set automatically for links and toggles |
-| `align` | `left` · `center` · `right` | Text alignment |
-| `direction` | flex direction (default `row`) | Layout of slots |
-| `alignItems` | flex `align-items` (default `center`) | Cross-axis alignment of slots |
-| `justify` | flex `justify-content` (default `center`) | Main-axis alignment of slots |
-| `minWidth` | CSS length (default `0`) | Minimum width of the button |
-| `href` | URL | Renders the button as a link |
-| `target` | `_self` · `_blank` · `_parent` · `_top` | Link target |
-| `download` | string | Link `download` attribute |
-| `pushState` | boolean | Navigates with `history.pushState` |
-| `autoActive` | `partial` (default) · `strict` · `strict-path-only` · `disabled` | URL matching for `active` |
-| `goBack` | URL or empty | Goes back in history, with a fallback URL |
-| `reset` | empty or provider name | Clears the current or named form data provider |
-| `name` / `value` | string | Form field written to the data provider |
-| `formDataProvider` | string | Data provider to write to (default: nearest ancestor) |
-| `radio` | boolean | Single choice among buttons with the same `name` |
-| `unique` | boolean | Like `radio`, but can be deselected |
-| `autoRepeat` | boolean | Repeats the click while the pointer is held |
-| `data-aria-label` | string | `aria-label` of the inner button |
-| `data-aria-labelledby` | string | `aria-labelledby` of the inner button |
-| `data-aria-controls` | string | `aria-controls` of the inner button |
-| `data-aria-expanded` | boolean | `aria-expanded` of the inner button |
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | Label |
-| `prefix` | Icon or text before the label |
-| `suffix` | Icon or text after the label |