@supersoniks/concorde 5.1.1 → 5.1.3-immutable.1

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

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

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

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

@@ -0,0 +1,142 @@
+# 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/radio/radio.md

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