@supersoniks/concorde 4.5.2 → 4.7.0

package/src/core/components/functional/router/router.md

@@ -1,94 +1,77 @@
 # Router
 
-The router observes the document.location changes and updates its view as follows
+**sonic-router** watches `document.location` (pathname + hash) and renders the matching view.
 
-## Data-route / Basic
+From a **Lit** parent, pass a **`.routes`** map (property binding — same rule as [`.items` on list](#core/components/functional/list/list.md/list)): keys are path patterns, values are render functions. Use **`fallback`** when nothing matches.
 
-When the data-route attribute of a template matches the current url, the content of this template is rendered
+Legacy HTML **`<template data-route="…">`** remains for hosts without Lit — [HTML integration](#docs/_misc/html-integration.md/html-integration).
 
-<sonic-code>
-  <template>
-    <div class="flex gap-2 items-center">
-      <sonic-button href="#core/components/functional/router/router.md/router#home" size="xs">Home</sonic-button>
-      <sonic-button href="#core/components/functional/router/router.md/router#about" size="xs">About</sonic-button>
-      <sonic-button href="#core/components/functional/router/router.md/router#work" size="xs">Work</sonic-button>
-      <sonic-button href="#core/components/functional/router/router.md/router#contact" size="xs">Contact</sonic-button>
-    </div>
-    <sonic-router>
-      <template data-route="#home">
-        <div class="text-center text-neutral-700 border rounded text-4xl  my-6 p-3 ">Home</div>
-      </template>
-      <template data-route="#about">
-        <div class="text-center text-neutral-700 border rounded text-4xl  my-6 p-3 ">About</div>
-      </template>
-      <template data-route="#work">
-        <div class="text-center text-neutral-700 border rounded text-4xl  my-6 p-3 ">Work</div>
-      </template>
-      <template data-route="#contact">
-        <div class="text-center text-neutral-700 border rounded text-4xl  my-6 p-3 ">Contact</div>
-      </template>
-    </sonic-router>
-  </template>
-</sonic-code>
+## Static routes (no parameters)
 
-## Data-route / Regexp
+Route keys are matched against `pathname + hash`. A simple hash route `#home` matches when the location contains that segment.
 
-You can use any RegExp in the data-route attribute of your templates to match the current location and to extract variables from it using capturing groups.
-A dataProvider attribute is generated using the dataProviderExpression where $1, $2... are replaced with this variables.
+On the **doc site**, the page URL is already a hash (`#…/router.md/router`). Demos append a **second** hash for in-page routes (`#…/router#home`), use **`href` + `autoActive="strict"`** on `sonic-button` for the active state, and `history.replaceState` on click so markdown is not reloaded (`setDocsDemoSubHash` in `src/docs/docs-location.ts`).
 
-**e.g.**, data-route="#couleur_<b class="text-danger">(\d+)</b>" => dataProviderExpression="api/unknown/<b class="text-danger">$1</b>"
+<docs-lit-demo for="docs-router-basic-demo"></docs-lit-demo>
 
-The rendered content of the matching template is scoped with this  **dataProvider**.
-You can make creative usage on this feature to generate dynamic content based on services.
+```typescript
+@state()
+private routes = {
+  "#home": () => html`<div>Home</div>`,
+  "#about": () => html`<div>About</div>`,
+  fallback: () => html`<div>Not found</div>`,
+};
 
-<sonic-code>
-  <template>
-    <sonic-list fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
-      <template>
-        <sonic-button radio size="xs" data-bind ::href="#core/components/functional/router/router.md/router#couleur_$id">
-          <span data-bind ::inner-html="ucFirst|$name"></span>
-        </sonic-button>
-      </template>
-    </sonic-list>
-    <sonic-router>
-      <template data-route="#couleur_(\d+)" dataProviderExpression="api/unknown/$1">
-        <sonic-fetch>
-          <input type="color" disabled data-bind ::value="$data.color" class=" w-full h-10 my-3" />
-        </sonic-fetch>
-      </template>
-    </sonic-router>
-  </template>
-</sonic-code>
+html`
+  <sonic-button href="#home">Home</sonic-button>
+  <sonic-router .routes=${this.routes}></sonic-router>
+`;
+```
 
-## Data-route / Url-pattern
+| Key | When it runs |
+|-----|----------------|
+| `"#home"`, `"#about"`, … | `RegExp` or [url-pattern](https://www.npmjs.com/package/url-pattern) test succeeds on current location |
+| **`fallback`** | No other route matched (not an attribute — a key on the same object) |
 
-Same as RegExp but using <a href="https://www.npmjs.com/package/url-pattern" target="_blank">url patterns</a>  
-**e.g.**, data-route="#couleur_<b class="text-danger">:id</b>" => dataProviderExpression="api/unknown/<b class="text-danger">:id</b>"
+## Routes with parameters
 
-<sonic-code>
-  <template>
-    <sonic-list fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
-      <template>
-        <sonic-button radio size="xs" data-bind ::href="#core/components/functional/router/router.md/router#couleur_$id">
-          <span data-bind ::inner-html="ucFirst|$name"></span>
-        </sonic-button>
-      </template>
-    </sonic-list>
-    <sonic-router>
-      <template data-route="/*#couleur_:id" dataProviderExpression="api/unknown/:id">
-        <sonic-fetch>
-          <input type="color" disabled data-bind ::value="$data.color" class=" w-full h-10 my-3" />
-        </sonic-fetch>
-      </template>
-    </sonic-router>
-  </template>
-</sonic-code>
+Two styles (see `router.demo.ts` and `docs-router-params-demo`):
+
+### Url-pattern (`:name`)
+
+Key uses **`:param`** segments. The render function receives an **object** `{ param: string }`.
+
+<docs-lit-demo for="docs-router-params-demo"></docs-lit-demo>
+
+```typescript
+"#couleur/:id": ({ id }) => html`<p>Colour id: ${id}</p>`,
+```
 
-## Redirect
+### RegExp (capturing groups)
 
-Redirect allows to redirect to a url when a data is provided.
-Here Redirect waits that a data is available in the property *theData* of the dataProvider *stupid-data-set-id*
-We are then redirected to the url *#data-is-set* which does nothing in itself.
+Key is a **RegExp** string with `(\d+)` / `(\w+)` groups. The render function receives an **array** of captured strings (in order).
+
+```typescript
+"#products/(\\d+)/(\\w+)": ([productId, slug]) =>
+  html`<p>Product ${productId}, slug ${slug}</p>`,
+```
+
+With parameters you usually render data directly in Lit (`${id}`). The old **`<template data-route>` + `dataProviderExpression`** pattern scoped a `dataProvider` for `data-bind` / fetch children — prefer **`@subscribe`** or explicit props when using `.routes`.
+
+## `.routes` binding
+
+Always use **`.routes=${…}`** in Lit templates: route handlers are functions and must be set as **properties**, not HTML attributes.
+
+## Optional attributes
+
+| Attribute | Role |
+|-----------|------|
+| **`basePath`** | Prefix for pattern matching (default allows optional leading segments) |
+| **`fallBackRoute`** | If set and no template/route matches, navigates to this URL (redirect). Distinct from **`routes.fallback`** which only renders content |
+
+## `sonic-redirect`
+
+Separate component: redirect when data appears on a publisher (login steps, wizards). Not part of the `.routes` map.
 
 <sonic-code>
   <template>
@@ -101,29 +84,11 @@ We are then redirected to the url *#data-is-set* which does nothing in itself.
         Delete the data and do a history.back()
       </sonic-button>
     </div>
-    
   </template>
 </sonic-code>
 
-Example of use : use with a router and a submit to manage the steps of login/logout, display of user info.
-
-## Fallback
-
-The fallback route is rendered when no other route matches the current location.
-
-<sonic-code>
-  <sonic-router>
-    <template data-route="#home">
-      <div>Home</div>
-    </template>
-    <template data-route="#fallback">
-      <div>Fallback</div>
-    </template>
-  </sonic-router>
-</sonic-code>
-
-## Programmatic routes
-
-
+Example: combine with **`.routes`** and **submit** for login / logout / profile steps.
 
+## Package demo
 
+`sonic-router-demo` (`router.demo.ts`) — home, user profile (`#user/:id/:slug`), products RegExp, **fallback** 404.

package/src/core/components/functional/router/router.ts

@@ -50,7 +50,7 @@ export class SonicRouter extends TemplatesContainer(LitElement) {
   templateValueAttribute = "data-route";
 
   @property({ type: String }) fallBackRoute?: string;
-  @property({ type: Object }) routes?: RoutesToRenderer;
+  @property({ type: Object, attribute: false }) routes?: RoutesToRenderer;
   @property({ type: String }) basePath?: string;
 
   protected createRenderRoot(): HTMLElement | DocumentFragment {

package/src/core/components/functional/states/states.md

@@ -41,7 +41,7 @@ When using **capturing groups ()** the stored values are accessible via the **da
 
 <sonic-code>
   <template>
-    <div  serviceURL="https://reqres.in">
+    <div  serviceURL="/docs-mock-api">
       <sonic-list formDataProvider="states-regexp-example" fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
         <template>
           <sonic-button radio size="xs" name="selection" data-bind ::value="#couleur_$id">
@@ -67,7 +67,7 @@ Same as RegExp but using <a href="https://www.npmjs.com/package/url-pattern" tar
 
 <sonic-code>
   <template>
-    <div serviceURL="https://reqres.in">
+    <div serviceURL="/docs-mock-api">
       <sonic-list formDataProvider="states-regexp-example" fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
         <template>
           <sonic-button radio size="xs" name="selection" data-bind ::value="#couleur_$id">

package/src/core/components/functional/submit/submit.md

@@ -1,58 +1,90 @@
 # Submit
 
-## The submit element is used to send data to a rest service
- * The api is set up like a [fetcher](#core/components/functional/fetch/fetch.md/fetch).
- * The *formDataProvider* attribute points to the adress where the data is held by a publisher.
- * This attribute is also used by form elements such as *sonic-input*, or *sonic-select*, which fill this publisher with their *value* attribute according to their *name* attribute
- * The *method* attribute allows you to choose the sending method: *put/delete/post*, *post* being the default method.
- * If the *onClick* attribute is present, the data is sent when the content is clicked on
- * If the *onEnterKey* attribute is present, data is sent when the enter key of an element contained in the *sonic-submit* with focus is pressed
- * During sending, *sonic-submit* elements with the same *dataProvider* attribute have the *disabled="disabled "* property, which has the effect of disabling their content
- * The *clearedDataOnSuccess* attribute can be used to clear the data from the corresponding dataProvider when the call to the api has provided a result.
-
-## Form example
-<sonic-code>
-  <template>
-  <sonic-scope
-        serviceURL="https://reqres.in" dataProvider="api/register"
-        formDataProvider="submit-example" submitResultDataProvider="submit-example-result"
-        method="post"
-        class="max-w-lg block"
-      >
-        <sonic-submit onEnterKey>
-          <div class="grid grid-cols-2 gap-4 mb-4 ">
-            <sonic-input required name="email" type="email" value="eve.holt@reqres.in"></sonic-input>
-            <sonic-input required type="password" name="password" value="pistol"></sonic-input>
-          </div>
-        </sonic-submit>
-        <sonic-submit onClick>
-          <sonic-button type="success" class="w-full">Submit</sonic-button>
-        </sonic-submit>
-    </sonic-scope>
-  </template>
-</sonic-code>
+> **Live demos:** `<docs-lit-demo>` + `src/docs/example/docs-submit-demos.ts`. Use [Local API demos](#docs/_misc/docs-mock-api.md/docs-mock-api) (`serviceURL="/docs-mock-api"`).
 
+## Overview
 
+**sonic-submit** sends the **formDataProvider** publisher to a REST endpoint (same configuration model as [fetch](#core/components/functional/fetch/fetch.md/fetch): `serviceURL` on an ancestor, path via `dataProvider` or `endPoint`).
 
+| Trigger | Attribute |
+|---------|-----------|
+| Click inside the slot | `onClick` |
+| Enter in a focused field inside the slot | `onEnterKey` |
 
+| Data / API | Attribute / property | Notes |
+|------------|----------------------|--------|
+| Form fields | `formDataProvider` on ancestor | Filled by `sonic-input`, `sonic-select`, etc. via `name` |
+| Result after call | `submitResultDataProvider` on ancestor | Whole result object (after optional `submit-result-key`) |
+| Slice of JSON result | `submit-result-key` on **sonic-submit** | Dot path, e.g. `data` when the API returns `{ data: { … } }` |
+| HTTP verb | `method` on **sonic-submit** | `post` (default), `put`, `patch`, `delete`, `get` — not inherited from `sonic-scope` |
+| Path override | `endPoint` on **sonic-submit** | Wins over ancestor `dataProvider` |
+| JSON vs multipart | `sendAsFormData` on **sonic-submit** | `FormData` body, still expects JSON response |
+| Reset publishers | `clearedDataOnSuccess` on ancestor | Space-separated `DataProviderKey.path` values; runs when a **result object** is returned (including error payloads with `messages`) |
+| Browser form POST | `native` on **sonic-submit** | See [Native HTML form](#native-html-form) |
+| Result event | — | Bubbles `submit` `CustomEvent` with `detail` = result |
+| Credential Management API | `usernameKey`, `passwordKey` on **sonic-submit** | After a **successful** HTTP response, stores login if those keys exist in the payload (defaults: `username`, `password`) |
+| ALTCHA / captcha | `needsCaptchaValidation` on form/header publisher | Defers send until token is set — see [Captcha](#core/components/ui/captcha/captcha.md/captcha) |
 
-## Result handling example
+While a REST submit runs, the slot is wrapped with `data-disabled` (faded, no pointer events). With **`native`**, validation and loader still run, then the browser performs a normal form submission.
 
-Result will show when something has been submit because the **dataprovider** used in this example is the same as the **submitResultDataProvider** used in the previous form.
-<sonic-code>
-  <template>
-      <div dataProvider="submit-example-result">
-        <div>Id : <span data-bind ::inner-html="$id"></span></div>
-        <div>Token : <span data-bind ::inner-html="$token"></span></div>
-        <div data-bind ::inner-html="$error"></div>
-      </div>
-  </template>
-</sonic-code>
+## Form and result handling
+
+POST to mock `api/register`; result publisher `submit-example-result`.
+
+<docs-lit-demo for="docs-submit-demo"></docs-lit-demo>
+
+## Native HTML form
+
+With **`native`**, Concorde does **not** call `fetch`. After form validation it:
+
+1. Copies **formDataProvider** values into matching `<input>` / `<select>` / `<textarea>` inside the closest **`<form>`** (creates hidden inputs if needed).
+2. Programmatically clicks a hidden native `type="submit"` control (`name` / `value` on **sonic-submit** if you need them).
+
+Use a real `<form action="…" method="post">` ancestor. For SPAs, a named **`target`** (e.g. iframe) avoids leaving the doc page.
+
+<docs-lit-demo for="docs-submit-native-demo"></docs-lit-demo>
+
+## sendAsFormData
+
+Sends fields as **`multipart/form-data`** instead of `application/json` (response is still parsed as JSON).
 
+<docs-lit-demo for="docs-submit-formdata-demo"></docs-lit-demo>
 
-## dot notation
+## submit-result-key
 
-You can write the folowing code where the name attribute is written in dot notation.
+When the API wraps the payload (e.g. `{ data: { id, token } }`), set **`submit-result-key="data"`** on **sonic-submit** so **submitResultDataProvider** receives only the inner object.
+
+<docs-lit-demo for="docs-submit-result-key-demo"></docs-lit-demo>
+
+Mock endpoint: `POST /docs-mock-api/api/register/nested`.
+
+## clearedDataOnSuccess
+
+Lists one or more publisher ids (space-separated). After the API returns a result object, each is set to `{}` — useful to reset the form publisher.
+
+<docs-lit-demo for="docs-submit-clear-demo"></docs-lit-demo>
+
+## Custom `submit` event
+
+Listen for the bubbling **`submit`** event; **`event.detail`** is the same result written to **submitResultDataProvider** (if configured).
+
+<docs-lit-demo for="docs-submit-event-demo"></docs-lit-demo>
+
+## endPoint vs dataProvider
+
+Ancestor **`dataProvider`** is the default path; **`endPoint`** on **sonic-submit** overrides it for that button only.
+
+<docs-lit-demo for="docs-submit-endpoint-demo"></docs-lit-demo>
+
+## method="get"
+
+Appends publisher fields as a query string on the endpoint, then performs a GET. The mock route `api/register/echo` returns the query for inspection.
+
+<docs-lit-demo for="docs-submit-get-demo"></docs-lit-demo>
+
+## dot notation (formDataProvider shape)
+
+You can use dot notation in **`name`** on form controls; the publisher stores nested objects:
 
 <sonic-code>
   <template>
@@ -65,19 +97,18 @@ You can write the folowing code where the name attribute is written in dot notat
   </template>
 </sonic-code>
 
-The data will be stored in the following format:
+Stored shape:
 
- <sonic-code language="typescript">
+<sonic-code language="typescript">
   <template>
   {
-    email: {
-      value: "eve.holt@reqres.in",
-    },
-    details: {
-      password: {
-        value: "pistol",
-      },
-    },
+    email: { value: "eve.holt@reqres.in" },
+    details: { password: { value: "pistol" } }
   }
   </template>
-</sonic-code>
+</sonic-code>
+
+## Related
+
+- [Captcha](#core/components/ui/captcha/captcha.md/captcha) — submit waits for `captchaToken` when validation is required.
+- [HTML integration](#docs/_misc/html-integration.md/html-integration) — legacy `data-bind` result blocks; prefer **submitResultDataProvider** + `@subscribe` in Lit demos.

package/src/core/components/functional/submit/submit.ts

@@ -26,11 +26,16 @@ declare const window: ConcordeWindow;
  * * Les données envoyées sont celles présentes dans le publisher dont l'adresse est renseignée via l'attribut *formDataProvider*.
  * Cet attribut est également utilisé par les éléments de form comme *sonic-input*, ou *sonic-select*, qui remplissent ce publisher avec leur attribut *value* en fonction de leur attribut *name*
  * * L'api est configuré à la manière d'un fetcher.
- * * L'attribut *method* permet de choisir la méthode d'envoie : *put/delete/post*, *post* étant la méthode par défaut.
+ * * L'attribut *method* sur sonic-submit permet de choisir la méthode : *post* (défaut), *put*, *patch*, *delete*, *get*.
+ * * *endPoint* sur sonic-submit remplace le *dataProvider* ancêtre pour l'URL de la requête.
+ * * *sendAsFormData* envoie un corps multipart/form-data au lieu de JSON.
+ * * *native* : après validation, copie le publisher dans un <form> HTML ancêtre et déclenche un submit navigateur (pas d'appel fetch).
+ * * *submitResultKey* / submit-result-key : ne conserve qu'une sous-partie du JSON avant écriture dans *submitResultDataProvider*.
  * * Si l'attribut *onClick* est présent, les données sont envoyées quand on click dans son contenu
  * * Si l'attribut *onEnterKey* est présent, les données sont envoyées quand on appuie sur la touche entrée d'un élément contenu dans le *sonic-submit* ayant le focus
- * * Pendant l'envoi, les éléments *sonic-submit* ayant le même attribut *dataProvider* ont la propriété *disabled="disabled"* ce qui a pour effet de désactiver leur contenu
- * * L'attribut *clearedDataOnSuccess* peut être utilisé pour vider les données des dataProvider correspondants lorsque l'appel à l'api a fourni un résultat.
+ * * Pendant l'envoi REST, le slot est désactivé visuellement (*data-disabled*).
+ * * *clearedDataOnSuccess* (ancêtre) : ids de publishers séparés par des espaces, remis à {} lorsqu'un résultat est retourné.
+ * * Événement *submit* (bubbles) avec *detail* = résultat. *usernameKey* / *passwordKey* : Credential Management API après succès HTTP.
  */
 @customElement(tagName)
 export class Submit extends Subscriber(LitElement) {
@@ -123,6 +128,8 @@ export class Submit extends Subscriber(LitElement) {
     const native = this.hasAttribute("native");
     if (native) {
       this.submitNativeForm();
+      Loader.hide();
+      this.disabled = false;
       return;
     }
     //

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

@@ -3,7 +3,7 @@
 <sonic-code>
   <template>
   <sonic-captcha formDataProvider="captchaTestDataProvider" key="6Leq5V0iAAAAAB-41DlWN335jDlcIuXmhNtdd00t">
-    <sonic-submit serviceURL="https://reqres.in" endPoint="api/unknown" onclick>
+    <sonic-submit serviceURL="/docs-mock-api" endPoint="api/unknown" onclick>
       <sonic-button  class="mt-4">Submit with captcha</sonic-button>
     </sonic-submit>
   </sonic-captcha>
@@ -21,4 +21,4 @@
   </sonic-captcha>
   </template>
 </sonic-code>
-                
+                

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

@@ -51,7 +51,7 @@
     <sonic-card-main >
       <h3>Main area</h3>
       <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure id dolor debitis deleniti eligendi natus dolorem a commodi sunt dicta? Ipsa asperiores magni consequuntur dolor voluptatibus. Maxime, nemo? Facere, odio.</p>
-      <iframe width="560" height="315" src="https://www.youtube.com/embed/IZTOtyksyPs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+      <iframe width="560" height="315" src="https://www.youtube.com/embed/aqz-KE-bpKQ" title="Big Buck Bunny (Blender Foundation)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
     </sonic-card-main>
   </sonic-card>
   </template>

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

@@ -70,35 +70,8 @@
   </template>
 </sonic-code>
 
-## Example of use
-<sonic-code>
-  <template>
-    <sonic-subscriber dataProvider="jokeFilter" class="text-xl my-4 block font-bold">
-      Remove following jokes :
-      <sonic-value key="blacklistFlags" class="block text-sm"></sonic-value>
-    </sonic-subscriber>
-    <div formDataProvider="jokeFilter" class="grid grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-2 mt-2 mb-3">
-      <sonic-checkbox name="blacklistFlags"  value="nsfw">nsfw</sonic-checkbox>
-      <sonic-checkbox name="blacklistFlags"  value="religious">religious</sonic-checkbox>
-      <sonic-checkbox name="blacklistFlags"  value="political">political</sonic-checkbox>
-      <sonic-checkbox name="blacklistFlags"  value="racist" checked disabled>racist</sonic-checkbox>
-      <sonic-checkbox name="blacklistFlags"  value="sexist" checked disabled>sexist</sonic-checkbox>
-      <sonic-checkbox name="blacklistFlags"  value="explicit">explicit</sonic-checkbox>
-    </div>
-    <sonic-queue
-      lazyload
-      dataProviderExpression="joke/Any?amount=10&lang=en"
-      dataFilterProvider="jokeFilter"
-      serviceURL="https://v2.jokeapi.dev"
-      key="jokes"
-    >
-      <template>
-        <div class="border-0 border-b-[1px] border-b-neutral-300  py-3 leading-tight">
-          <sonic-value key="joke"></sonic-value>
-          <sonic-value key="setup" class="font-bold"></sonic-value><br>
-          <sonic-value key="delivery"></sonic-value>
-        </div>
-      </template>
-    </sonic-queue>
-  </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>

package/src/core/components/ui/form/input/input.md

@@ -1,6 +1,5 @@
 # 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 attibutes list
@@ -124,35 +123,11 @@
 
 
 
-## Example of use
-<sonic-code>
-  <template>
-  <sonic-input
-    formDataProvider="input-filter"
-    name="contains"
-    value="chien"
-    class="mb-4"
-  ></sonic-input>
-  <sonic-subscriber dataProvider="input-filter" class="text-xl my-4 block font-bold">
-    Blagues trouvées pour "<span data-bind ::inner-html="$contains"></span>" :
-  </sonic-subscriber>
-  <sonic-queue
-    lazyload
-    dataProviderExpression="joke/Any?amount=10&lang=fr"
-    dataFilterProvider="input-filter"
-    serviceURL="https://v2.jokeapi.dev"
-    key="jokes"
-  >
-    <template>
-      <div class="border-0 border-b-[1px] border-b-neutral-300 border-dotted py-3">
-        <div data-bind ::inner-html="$joke"></div>
-        <div data-bind ::inner-html="$setup"></div>
-        <div data-bind ::inner-html="$delivery"></div>
-      </div>
-    </template>
-  </sonic-queue>
-  </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>

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

@@ -6,6 +6,8 @@ Please note that only basic text input params and methods are implemented at thi
 
 Here are some of the features of the input-autocomplete component:
 
+Doc examples below use HTML binding on suggestion rows. The Lit equivalent uses an **`items`** callback with the row object (see `docs-queue-geo-demo` in `src/docs/example/docs-queue-demos.ts`). Embedding without Lit: [HTML integration](#docs/_misc/html-integration.md/html-integration).
+
 * It provides a suggest behavior, where the user can type a few letters and the component will suggest possible matches.
 * It can be used with a variety of data providers, such as an API.
 * It is fully customizable, so you can change the look and feel of the component to match your needs.
@@ -34,7 +36,7 @@ The result is that when you select an item, the input takes the value of the sel
     name="nom" 
     propertyName="bloop"
     placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="https://geo.api.gouv.fr" 
+    serviceurl="/docs-mock-api/geo" 
     dataproviderexpression="communes?limit=5&boost=population"
     >
       <template>
@@ -65,7 +67,7 @@ By using these attributes, we can separate the search parameter from the name of
     name="siren" 
     value="212703771" 
     placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="https://geo.api.gouv.fr" 
+    serviceurl="/docs-mock-api/geo" 
     dataproviderexpression="communes?limit=5&boost=population"
     searchParameter="nom" 
     >
@@ -95,7 +97,7 @@ The following code shows how to use the `select` attribute in an autocomplete in
     name="siren" 
     value="212703771" 
     placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="https://geo.api.gouv.fr" 
+    serviceurl="/docs-mock-api/geo" 
     dataproviderexpression="communes?limit=5&boost=population"
     searchParameter="nom" 
     >
@@ -119,7 +121,7 @@ At the moment you can enable keyboard up/down by adding an attribut "data-keyboa
     name="nom" 
     data-keyboard-nav="nav-autocomplete" 
     placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="https://geo.api.gouv.fr" 
+    serviceurl="/docs-mock-api/geo" 
     dataproviderexpression="communes?limit=60&boost=population"
     >
     <template>

package/src/core/components/ui/form/radio/radio.md

@@ -50,35 +50,8 @@
 </sonic-code>
 
 
-## Example of use
-<sonic-code>
-  <template>
-      <sonic-subscriber dataProvider="jokeFilterRadio" class="text-xl my-4 block font-bold">
-        Remove following jokes :
-        <sonic-value key="blacklistFlags" class="block text-sm"></sonic-value>
-      </sonic-subscriber>
-      <div formDataProvider="jokeFilterRadio"  class="grid grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-2 mt-2 mb-3">
-        <sonic-radio name="blacklistFlags"  value="nsfw">nsfw</sonic-radio>
-        <sonic-radio name="blacklistFlags"  value="religious">religious</sonic-radio>
-        <sonic-radio name="blacklistFlags"  value="political">political</sonic-radio>
-        <sonic-radio name="blacklistFlags"  value="racist" checked >racist</sonic-radio>
-        <sonic-radio name="blacklistFlags"  value="sexist"  >sexist</sonic-radio>
-        <sonic-radio name="blacklistFlags"   value="explicit">explicit</sonic-radio>
-      </div>
-      <sonic-queue
-        lazyload
-        dataProviderExpression="joke/Any?amount=10&lang=en"
-        dataFilterProvider="jokeFilterRadio"
-        serviceURL="https://v2.jokeapi.dev"
-        key="jokes"
-      >
-        <template>
-          <div class="border-0 border-b-[1px] border-b-neutral-300  py-3 leading-tight">
-            <sonic-value key="joke"></sonic-value>
-            <sonic-value key="setup" class="font-bold"></sonic-value><br>
-            <sonic-value key="delivery"></sonic-value>
-          </div>
-        </template>
-      </sonic-queue>
-  </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>