@supersoniks/concorde 5.0.5 → 5.1.1

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

@@ -1,205 +0,0 @@
-# Fieldset
-
-**`sonic-fieldset`** groups related form controls with a bordered container and an accessible **`<fieldset>`** semantics layer. Put fields in the **default slot**; add a title with **`sonic-legend`** or the shorthand **`label`** / **`description`** / **`iconName`** attributes. Default **`variant`** is `default`. Pair the body with **`sonic-form-layout`** for responsive columns.
-
-## Basic example
-
-<sonic-code>
-  <template>
-    <sonic-fieldset>
-      <sonic-legend label="Contact details"></sonic-legend>
-      <sonic-form-layout>
-        <sonic-input autocomplete="email" label="Email" name="email" type="email"></sonic-input>
-        <sonic-input autocomplete="tel" label="Phone" name="phone" type="tel"></sonic-input>
-      </sonic-form-layout>
-    </sonic-fieldset>
-  </template>
-</sonic-code>
-
-## Variant
-
-**`ghost`** and **`shadow`** use a transparent border; **`shadow`** also applies **`--sc-shadow-lg`**.
-
-<sonic-code>
-  <template>
-    <div class="grid gap-4">
-      <sonic-fieldset variant="default">
-        <sonic-legend label="Default"></sonic-legend>
-        <sonic-input label="Field" name="a"></sonic-input>
-      </sonic-fieldset>
-      <sonic-fieldset variant="ghost">
-        <sonic-legend label="Ghost"></sonic-legend>
-        <sonic-input label="Field" name="b"></sonic-input>
-      </sonic-fieldset>
-      <sonic-fieldset variant="shadow">
-        <sonic-legend label="Shadow"></sonic-legend>
-        <sonic-input label="Field" name="c"></sonic-input>
-      </sonic-fieldset>
-    </div>
-  </template>
-</sonic-code>
-
-## Tight layout
-
-Set **`tight`** to remove horizontal padding and side borders (flat strip inside a parent).
-
-<sonic-code>
-  <template>
-    <sonic-fieldset tight variant="ghost">
-      <sonic-legend label="Tight fieldset"></sonic-legend>
-      <sonic-input label="Field" name="tight"></sonic-input>
-    </sonic-fieldset>
-  </template>
-</sonic-code>
-
-## Legend
-
-Use **`sonic-legend`** for the group title. Set **`label`** and **`description`** for simple copy, or use the **default slot** for custom markup. Add secondary text with **`sonic-legend-description`**. Place actions in **`slot="suffix"`** on the legend.
-
-Attribute values on **`sonic-legend`** are rendered as HTML—use only trusted content.
-
-<sonic-code>
-  <template>
-    <div class="grid gap-4">
-      <sonic-fieldset>
-        <sonic-legend label="Attributes" description="Short description via attributes"></sonic-legend>
-        <sonic-input label="Field" name="attr"></sonic-input>
-      </sonic-fieldset>
-      <sonic-fieldset>
-        <sonic-legend iconLibrary="iconoir" iconName="pin-alt">
-          Custom title in the default slot
-          <sonic-legend-description>Description via sonic-legend-description</sonic-legend-description>
-        </sonic-legend>
-        <sonic-input label="Field" name="slot"></sonic-input>
-      </sonic-fieldset>
-    </div>
-  </template>
-</sonic-code>
-
-## Shorthand legend on the fieldset
-
-When **`label`** is set on **`sonic-fieldset`**, the component renders **`sonic-legend`** for you. Pass **`description`** **`iconName`** **`iconLibrary`** and **`iconPrefix`** the same way. Do not combine shorthand **`label`** with a separate slotted **`sonic-legend`**—you will get two legends.
-
-<sonic-code>
-  <template>
-    <sonic-fieldset
-      label="Account"
-      description="Basic profile fields"
-      iconLibrary="iconoir"
-      iconName="user"
-    >
-      <sonic-input label="Display name" name="display_name"></sonic-input>
-    </sonic-fieldset>
-  </template>
-</sonic-code>
-
-## Legend actions
-
-Use **`slot="suffix"`** on **`sonic-legend`** for menus or icon buttons aligned to the end of the legend row.
-
-<sonic-code>
-  <template>
-    <sonic-fieldset>
-      <sonic-legend label="Personal information">
-        <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>Legal notice</sonic-menu-item>
-            <sonic-menu-item>Terms of use</sonic-menu-item>
-          </sonic-menu>
-        </sonic-pop>
-      </sonic-legend>
-      <sonic-form-layout>
-        <sonic-input autocomplete="family-name" label="Last name" name="last_name"></sonic-input>
-        <sonic-input autocomplete="given-name" label="First name" name="first_name"></sonic-input>
-      </sonic-form-layout>
-    </sonic-fieldset>
-  </template>
-</sonic-code>
-
-## Form association and disabled state
-
-### Associating a distant `form`
-
-Set **`form`** on **`sonic-fieldset`** to the **`id`** of a **`<form>`** elsewhere in the page (same as the native **`form`** attribute on **`<fieldset>`**). Named fields in the fieldset then belong to that form for submit and constraint validation—for example a toolbar **`form`** and a field group rendered lower on the layout.
-
-<sonic-code>
-  <template>
-    <div class="grid gap-4">
-      <form id="billing-form" class="flex flex-wrap items-center gap-2">
-        <sonic-button submit type="primary">Save billing</sonic-button>
-      </form>
-      <sonic-fieldset form="billing-form" label="Billing address">
-        <sonic-form-layout>
-          <sonic-input label="Street" name="street" autocomplete="street-address"></sonic-input>
-          <sonic-input label="Postal code" required name="postal_code" autocomplete="postal-code"></sonic-input>
-          <sonic-input label="City" name="city" autocomplete="address-level2"></sonic-input>
-        </sonic-form-layout>
-      </sonic-fieldset>
-    </div>
-  </template>
-</sonic-code>
-
-### Disabling a group
-
-Set **`disabled`** on **`sonic-fieldset`** to disable the inner **`<fieldset>`** and every control in the group (same as a native fieldset). Use it for read-only steps or sections gated by permissions.
-
-<sonic-code>
-  <template>
-    <div class="grid gap-4">
-      <sonic-fieldset label="Editable">
-        <sonic-input label="Display name" name="display_name"></sonic-input>
-      </sonic-fieldset>
-      <sonic-fieldset label="Locked" disabled>
-        <sonic-input label="Account ID" name="account_id" value="acct_42"></sonic-input>
-      </sonic-fieldset>
-    </div>
-  </template>
-</sonic-code>
-
-## Accessibility
-
-The inner **`<fieldset>`** carries grouping semantics. **`disabled`** is applied on that element so nested controls are disabled in the usual way. **`sonic-legend`** renders a native **`<legend>`** for the group label.
-
-## API reference
-
-### `sonic-fieldset`
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `variant` | `default` · `ghost` · `shadow` (default `default`) | Border and shadow treatment |
-| `tight` | boolean | Removes horizontal padding and side borders |
-| `label` | string | Shorthand legend title; renders **`sonic-legend`** when set |
-| `description` | string | Shorthand legend description (HTML) |
-| `iconName` | string | Shorthand legend icon **`name`** |
-| `iconLibrary` | string | Shorthand legend icon **`library`** |
-| `iconPrefix` | string | Shorthand legend icon **`prefix`** |
-| `disabled` | boolean | Disables the native **`<fieldset>`** and its controls |
-| `form` | string | **`id`** of an associated **`form`** |
-| `dataProvider` | string | Subscriber key; can autofill properties that match publisher fields (e.g. **`label`**) |
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | Legend (optional) and field group content in visual order |
-
-### `sonic-legend`
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `label` | string | Title HTML when not using the default slot |
-| `description` | string | Description HTML (wrapped in **`sonic-legend-description`**) |
-| `iconName` | string | Leading **`sonic-icon`** **`name`** |
-| `iconLibrary` | string | Icon **`library`** |
-| `iconPrefix` | string | Icon **`prefix`** |
-| `forceAutoFill` | boolean | Allows Subscriber autofill to override attribute-backed **`label`** / **`description`** |
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | Legend title and description components |
-| `suffix` | Trailing actions (menus, icon buttons) |
-
-### `sonic-legend-description`
-
-Muted description line below the legend title. No attributes—project content through the **default slot**.

package/docs/src/core/components/ui/form/form-actions/form-actions.md

@@ -1,100 +0,0 @@
-# Form actions
-
-**`sonic-form-actions`** lays out submit / cancel and other **form footer controls** in a **wrapping flex row** with a small fixed gap. Place it inside **`sonic-form-layout`** (full-width row) or any block that should end with actions. Defaults: **`direction`** `row` · **`justify`** `flex-start` · **`alignItems`** `center`.
-
-## Basic example
-
-With no attributes, actions align to the **start** of the row (typical for left-to-right forms).
-
-<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 content
-
-**`justify`** maps to CSS **`justify-content`**. Use **`flex-end`** for dialog-style footers or **`center`** for balanced toolbars.
-
-<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>
-
-## Flex direction
-
-**`direction`** maps to **`flex-direction`**. **`row-reverse`** swaps visual order while keeping DOM order (focus order unchanged).
-
-<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>
-
-## Mixed controls
-
-Combine **`sonic-button`** with **`sonic-divider vertical`** or other slotted content. Default **`alignItems`** `center` keeps unlike heights aligned on the cross axis.
-
-<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>
-
-## API reference
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `direction` | `row` (default) · `column` · `row-reverse` · `column-reverse` | Main-axis layout of slotted controls |
-| `justify` | CSS justify-content (default `flex-start`) | Distribution along the main axis |
-| `alignItems` | CSS align-items (default `center`) | Cross-axis alignment when items differ in height |
-
-The component exposes a single unnamed slot; there are no named slots. Slotted nodes use the host’s flex **`gap`** (`0.3rem`) and **`flex-wrap`**.
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | Footer actions (**`sonic-button`** and related controls) |

package/docs/src/core/components/ui/form/form-layout/form-layout.md

@@ -1,119 +0,0 @@
-# Form layout
-
-**`sonic-form-layout`** arranges slotted form controls in a **responsive CSS grid** with consistent vertical spacing. Pair **`sonic-input`** · **`sonic-select`** and **`sonic-input-autocomplete`** fields side by side when the host is wider than **440px**; **textareas**, **toggles**, **dividers**, and **`sonic-form-actions`** span the full width. Wrap a **`form`** or **`sonic-fieldset`** body—no attributes are required.
-
-## Basic example
-
-Typical registration-style form: short fields flow in two columns on wide layouts; long or grouped blocks stay full width.
-
-<sonic-code>
-  <template>
-    <form>
-      <sonic-form-layout>
-        <sonic-input autocomplete="family-name" label="Last name" name="last_name"></sonic-input>
-        <sonic-input autocomplete="given-name" label="First name" name="first_name"></sonic-input>
-        <sonic-select autocomplete="sex" label="Gender" name="gender">
-          <option value="" selected="selected">— Select —</option>
-          <option value="prefer-not">Prefer not to say</option>
-          <option value="male">Male</option>
-          <option value="female">Female</option>
-        </sonic-select>
-        <sonic-input autocomplete="bday" label="Date of birth" name="birth_date" type="date"></sonic-input>
-        <sonic-divider></sonic-divider>
-        <sonic-input autocomplete="email" label="Email" name="email" type="email"></sonic-input>
-        <sonic-input
-          autocomplete="email"
-          label="Confirm email"
-          name="email_confirmation"
-          type="email"
-        ></sonic-input>
-        <sonic-input autocomplete="new-password" label="Password" name="password" type="password"></sonic-input>
-        <sonic-input
-          autocomplete="new-password"
-          label="Confirm password"
-          name="password_confirmation"
-          type="password"
-        ></sonic-input>
-        <sonic-divider></sonic-divider>
-        <sonic-textarea label="Message" rows="5"></sonic-textarea>
-        <sonic-switch>Enable optional feature</sonic-switch>
-        <sonic-checkbox>Subscribe to newsletter</sonic-checkbox>
-        <sonic-checkbox>
-          I accept the
-          <sonic-link href="#" class="underline">terms and conditions</sonic-link>
-        </sonic-checkbox>
-        <sonic-form-actions>
-          <sonic-button type="success">Submit</sonic-button>
-        </sonic-form-actions>
-      </sonic-form-layout>
-    </form>
-  </template>
-</sonic-code>
-
-## Responsive columns
-
-When the host **`offsetWidth`** is **greater than 440px**, the grid uses **two equal columns** with slightly larger gap (**1.75rem**). Below that breakpoint, fields stack in a **single column** (**1.5rem** gap).
-
-If the slot contains **exactly one** direct **`sonic-input`**, **`sonic-select`**, or **`sonic-input-autocomplete`**, the layout stays **one column** even above the breakpoint so a lone field does not sit in half an empty row.
-
-<sonic-code>
-  <template>
-    <div class="grid gap-8 md:grid-cols-2 mb-6">
-      <div>
-        <sonic-form-layout style="max-width: 20rem">
-        <sonic-divider align="left">Narrow host (single column)</sonic-divider>
-          <sonic-input label="Email" name="email_narrow" type="email"></sonic-input>
-          <sonic-input label="Confirm email" name="email_confirm_narrow" type="email"></sonic-input>
-        </sonic-form-layout>
-      </div>
-    </div>
-    <div>
-      <sonic-form-layout>
-      <sonic-divider align="left">Wide host (two columns for inputs)</sonic-divider>
-        <sonic-input label="Email" name="email_wide" type="email"></sonic-input>
-        <sonic-input label="Confirm email" name="email_confirm_wide" type="email"></sonic-input>
-      </sonic-form-layout>
-    </div>
-  </template>
-</sonic-code>
-
-## Full-width slotted blocks
-
-Everything except **`sonic-input`**, **`sonic-select`**, **`sonic-input-autocomplete`**, and slotted elements with class **`form-item-container`** is assigned **`grid-column: 1 / -1`**. Use this for **`sonic-textarea`**, **`sonic-checkbox`**, **`sonic-switch`**, **`sonic-form-actions`**, **`sonic-divider`**, and similar blocks.
-
-Slotted **`sonic-divider`** sets **`--sc-divider-my: 0`** so divider spacing matches the grid rhythm. Slotted **`sonic-submit`** uses **`display: contents`** so submit controls participate in the grid without an extra wrapper box.
-
-<sonic-code>
-  <template>
-    <sonic-form-layout>
-      <sonic-input label="Subject" name="subject"></sonic-input>
-      <sonic-textarea label="Details" rows="4"></sonic-textarea>
-      <sonic-form-actions>
-        <sonic-button type="primary">Send</sonic-button>
-      </sonic-form-actions>
-    </sonic-form-layout>
-  </template>
-</sonic-code>
-
-## Custom column wrapper
-
-Add class **`form-item-container`** on a slotted wrapper (for example a **`div`**) when a field is not a direct **`sonic-input`** / **`sonic-select`** / **`sonic-input-autocomplete`** but should still share the two-column flow with short inputs.
-
-<sonic-code>
-  <template>
-    <sonic-form-layout>
-      <sonic-input label="City" name="city"></sonic-input>
-      <div class="form-item-container">
-        <sonic-input label="Postal code" name="postal_code"></sonic-input>
-      </div>
-    </sonic-form-layout>
-  </template>
-</sonic-code>
-
-## API reference
-
-No public attributes — layout follows slotted children and host width.
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | Form fields and blocks in visual order; column vs full-width rules apply per slotted tag or **`form-item-container`** class |

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

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

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