@supersoniks/concorde 5.0.2 → 5.0.3

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

@@ -0,0 +1,175 @@
+# Badge
+
+A **non-interactive** pill for labels, counts, or highlights (counter, status, category). The API mirrors `sonic-button` (`type`, `variant`, `size`) without focus or click states.
+
+Colors come from theme tokens (`--sc-primary`, `--sc-danger`, …) or the semantic `type` values below. 
+
+## 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
+
+`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>

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

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

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

@@ -0,0 +1,12 @@
+# Captcha
+
+<sonic-code>
+  <template>
+  <sonic-captcha formDataProvider="captchaTestDataProvider" key="6Leq5V0iAAAAAB-41DlWN335jDlcIuXmhNtdd00t">
+    <sonic-submit serviceURL="/docs-mock-api" endPoint="api/unknown" onclick>
+      <sonic-button  class="mt-4">Submit with captcha</sonic-button>
+    </sonic-submit>
+  </sonic-captcha>
+  </template>
+</sonic-code>
+                

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

@@ -0,0 +1,152 @@
+# Card
+
+A **surface** for grouped content: padding, radius, shadow, and semantic **`type`** colors via shared theme tokens. Compose **`sonic-card-header`**, **`sonic-card-main`**, and **`sonic-card-footer`** inside the card, or put any markup in the default slot.
+
+Default **`type`** is `base` (page background). Use `light` for a subtle gray panel, `invert` / `neutral` for high-contrast blocks, and `primary`, `info`, `success`, `warning`, or `danger` for tinted surfaces (divider tokens apply on colored types).
+
+## Type
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-3">
+      <sonic-card type="base" class="min-w-[8rem]">Base</sonic-card>
+      <sonic-card type="light" class="min-w-[8rem]">Light</sonic-card>
+      <sonic-card type="primary" class="min-w-[8rem]">Primary</sonic-card>
+      <sonic-card type="info" class="min-w-[8rem]">Info</sonic-card>
+      <sonic-card type="success" class="min-w-[8rem]">Success</sonic-card>
+      <sonic-card type="warning" class="min-w-[8rem]">Warning</sonic-card>
+      <sonic-card type="danger" class="min-w-[8rem]">Danger</sonic-card>
+      <sonic-card type="neutral" class="min-w-[8rem]">Neutral</sonic-card>
+      <sonic-card type="invert" class="min-w-[8rem]">Invert</sonic-card>
+    </div>
+  </template>
+</sonic-code>
+
+## Header
+
+Quick titles with **`label`** and **`description`** attributes, or full control through the default slot. **`slot="suffix"`** aligns badges or actions on the right; suffix content does not shrink when the title wraps.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-4 max-w-xl">
+      <sonic-card>
+        <sonic-card-header
+          label="Account settings"
+          description="Manage your profile and preferences."
+        ></sonic-card-header>
+        <p class="m-0 text-sm opacity-80">Body content goes in the card slot or in <code>sonic-card-main</code>.</p>
+      </sonic-card>
+
+      <sonic-card type="neutral">
+        <sonic-card-header label="Notifications">
+          <sonic-card-header-description>
+            Choose what we email you about.
+          </sonic-card-header-description>
+          <sonic-badge slot="suffix"  type="warning" size="xs">3 new</sonic-badge>
+        </sonic-card-header>
+      </sonic-card>
+
+      <sonic-card>
+        <sonic-card-header label="Team workspace" description="Shared with 12 members">
+          <sonic-button
+            slot="suffix"
+            shape="circle"
+            variant="outline"
+            size="sm"
+            type="default"
+            icon
+            data-aria-label="Workspace settings"
+          >
+            <sonic-icon library="iconoir" name="settings"></sonic-icon>
+          </sonic-button>
+        </sonic-card-header>
+      </sonic-card>
+
+      <sonic-card type="primary">
+        <sonic-card-header>
+          <div>Custom header</div>
+          <sonic-card-header-description>
+            Use the header slot when attributes are not enough.
+          </sonic-card-header-description>
+          <sonic-button slot="suffix" shape="circle" variant="ghost" size="sm" type="primary" icon>
+            <sonic-icon library="iconoir" name="nav-arrow-right"></sonic-icon>
+          </sonic-button>
+        </sonic-card-header>
+      </sonic-card>
+    </div>
+  </template>
+</sonic-code>
+
+`label` and `description` accept HTML (rendered as markup). Prefer plain text when possible; use the slot for structured content.
+
+## Main
+
+Optional wrapper for the primary content area (typography, media, forms).
+
+<sonic-code>
+  <template>
+    <sonic-card class="max-w-xl">
+      <sonic-card-header label="Release notes" description="Version 2.4"></sonic-card-header>
+      <sonic-card-main>
+        <p class="mt-0">
+          Improved performance on large lists and fixed an issue with keyboard navigation in menus.
+        </p>
+        <sonic-divider></sonic-divider>
+        <p class="mb-0 text-sm opacity-80">See the changelog for details.</p>
+      </sonic-card-main>
+    </sonic-card>
+  </template>
+</sonic-code>
+
+## Footer
+
+Optional footer for actions, metadata, or secondary text.
+
+<sonic-code>
+  <template>
+    <sonic-card class="max-w-xl">
+      <sonic-card-header label="Confirm deletion"></sonic-card-header>
+      <sonic-card-main>
+        <p class="m-0">This project and all of its data will be removed permanently.</p>
+      </sonic-card-main>
+      <sonic-card-footer>
+      <sonic-divider></sonic-divider>
+        <div class="flex flex-wrap gap-2 justify-end">
+          <sonic-button variant="ghost" size="sm">Cancel</sonic-button>
+          <sonic-button type="danger" size="sm">Delete</sonic-button>
+        </div>
+      </sonic-card-footer>
+    </sonic-card>
+  </template>
+</sonic-code>
+
+## Full example
+
+Header, media, body, and footer together.
+
+<sonic-code>
+  <template>
+    <sonic-card class="max-w-md">
+      <sonic-card-header label="Featured route" description="San Francisco → New York">
+        <sonic-icon slot="suffix" library="iconoir" name="airplane"></sonic-icon>
+      </sonic-card-header>
+      <sonic-card-main>
+        <sonic-image
+          rounded
+          ratio="16/9"
+          src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=800&q=80"
+          alt=""
+        ></sonic-image>
+        <p class="mb-0">
+          Nonstop flight with flexible dates. Prices shown include taxes and fees.
+        </p>
+      </sonic-card-main>
+      <sonic-card-footer>
+        <div class="flex items-center justify-between gap-3 flex-wrap">
+          <span class="text-sm font-semibold">From $249</span>
+          <sonic-button type="primary" size="sm">Book</sonic-button>
+        </div>
+      </sonic-card-footer>
+    </sonic-card>
+  </template>
+</sonic-code>

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

@@ -0,0 +1,35 @@
+# Divider
+
+## Default
+<sonic-code>
+  <template>
+  <sonic-divider></sonic-divider>
+  </template>
+</sonic-code>
+
+## Align
+<sonic-code>
+  <template>
+  <sonic-divider label="Default centered label"></sonic-divider>
+  <sonic-divider label="Right" align="right"></sonic-divider>
+  <sonic-divider label="Center" align="center"></sonic-divider>
+  <sonic-divider label="Left" align="left"></sonic-divider>
+  </template>
+</sonic-code>
+
+## Size
+<sonic-code>
+  <template>
+  <sonic-divider size="xs" label="xs"></sonic-divider>
+  <sonic-divider size="sm" label="sm"></sonic-divider>
+  <sonic-divider size="md" label="md"></sonic-divider>
+  <sonic-divider size="lg" label="lg"></sonic-divider>
+  </template>
+</sonic-code>
+
+## Custom
+<sonic-code>
+  <template>
+  <sonic-divider><span class="mr-2">Lorem ipsum dolor sit amet</span><sonic-badge type="danger">+25</sonic-badge></sonic-divider>
+  </template>
+</sonic-code>

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

@@ -0,0 +1,77 @@
+# Checkbox
+
+## Size
+<sonic-code>
+  <template>
+  <div class="grid gap-2">
+    <sonic-checkbox size="2xs">2xs checkbox</sonic-checkbox>
+    <sonic-checkbox size="xs">xs checkbox</sonic-checkbox>
+    <sonic-checkbox size="sm">sm checkbox</sonic-checkbox>
+    <sonic-checkbox>default checkbox</sonic-checkbox>
+    <sonic-checkbox size="lg">lg checkbox</sonic-checkbox>
+    <sonic-checkbox size="xl">xl checkbox</sonic-checkbox>
+    <sonic-checkbox size="2xl">2xl checkbox</sonic-checkbox>
+  </div>
+  </template>
+</sonic-code>
+
+## Checked
+<sonic-code>
+  <template>
+  <sonic-checkbox checked
+    >Already checked checkbox
+  </sonic-checkbox>
+  </template>
+</sonic-code>
+
+## Disabled
+<sonic-code>
+  <template>
+  <sonic-checkbox disabled
+    >Disabled checkbox
+  </sonic-checkbox>
+  </template>
+</sonic-code>
+
+## Disabled and checked
+<sonic-code>
+  <template>
+  <sonic-checkbox disabled checked
+    >Disabled but already checked checkbox
+  </sonic-checkbox>
+  </template>
+</sonic-code>
+
+## Checkbox with link
+<sonic-code>
+  <template>
+  <sonic-checkbox>Checkbox with <sonic-link href="#" class="underline text-info">link</sonic-link>
+  </template>
+</sonic-code>
+
+## Check all checkbox
+<sonic-code>
+  <template>    
+      <div formDataProvider="checkbox-check-all-demo">
+      <sonic-checkbox  name='someSharedName' value="all" checksAll>All</sonic-checkbox>
+      <sonic-divider></sonic-divider>
+      <div class="grid gap-2">
+      <sonic-checkbox name="someSharedName" value="foo">Foo</sonic-checkbox>
+      <sonic-checkbox name="someSharedName" value="bar">Bar</sonic-checkbox>
+      </div>
+      <sonic-divider></sonic-divider>
+      <div>
+        <span>Enabling unsetOnDisconect ensures that outdated or irrelevant values are not retained in the form state once their associated inputs are no longer rendered.</span>
+        <div id="prunable-checkbox" class="flex gap-2 items-center">
+        <sonic-checkbox name="someSharedName" value="baz">Baz</sonic-checkbox>
+        <sonic-button variant="ghost" shape="circle" unique name="toggleCheckboxExistance" onclick="document.getElementById('prunable-checkbox').remove();" value="true"><sonic-icon library="fontAwesome" prefix="solid" name="trash"></sonic-icon></sonic-button>
+        </div>
+    </div>
+  </template>
+</sonic-code>
+
+## Example of use — blacklist + queue
+
+Checked **`blacklistFlags`** values are sent to the mock API (`?blacklistFlags=racist,sexist,…`), which excludes jokes whose **`flags`** match (see `filterDocsJokes` in `src/docs/mock-api/fixtures.ts`).
+
+<docs-lit-demo for="docs-joke-blacklist-demo"></docs-lit-demo>