@supersoniks/concorde 4.9.98-visual-stack.1 → 4.9.98-visual-stack.2

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

@@ -1,97 +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="grid grid-cols-3 gap-3">
-    <sonic-card type="base">Base</sonic-card>
-    <sonic-card type="light">Light</sonic-card>
-    <sonic-card type="primary">Primary</sonic-card>
-    <sonic-card type="warning">Warning</sonic-card>
-    <sonic-card type="danger">Danger</sonic-card>
-    <sonic-card type="success">Success</sonic-card>
-    <sonic-card type="info">Info</sonic-card>
-    <sonic-card type="neutral">Neutral</sonic-card>
-    <sonic-card type="invert">Invert</sonic-card>
-  </div>
+    <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 grid-cols-1 gap-3">
-    <sonic-card >
-      <sonic-card-header label="Header simple, titre géré via l'attribut : label" description="Description via l'attribut : description">
-      </sonic-card-header>
-    </sonic-card>
-    <sonic-card type="neutral">
-      <sonic-card-header label="Header composé">
-        <sonic-card-header-description>Description rendu via le composant : "sonic-card-header-description"</sonic-card-header-description>
-        <div  slot="suffix" class="flex">
-          Suffix
-        </div>
-      </sonic-card-header>
-    </sonic-card>
-    <sonic-card type="invert">
-      <sonic-card-header>
-        <div>Header custom</div>
-        <div class="text-lg text-danger">Tout le contenu excepté l'icône ✈ passe par le slot du header</div>
-        <span slot="suffix" >✈</span>
-      </sonic-card-header>
-    </sonic-card>
-  </div>
+    <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 >
-    <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/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>
+    <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 >
-    <sonic-card-footer >
-      <div >
-        <h4 class="mb-0">Footer area</h4>
-        <small>Debitis deleniti eligendi natus dolorem aufdh.</small>
-        <div>
-          🛫 ✈ ✈ ✈ ✈ ✈ 🛬
+    <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>
-      </div>
-    </sonic-card-footer>
-  </sonic-card>
+      </sonic-card-footer>
+    </sonic-card>
   </template>
 </sonic-code>
 
+## Full example
+
+Header, media, body, and footer together.
 
-## Example of use
 <sonic-code>
   <template>
-  <sonic-card >
-    <sonic-card-header label="Header" description="Header description">
-      <sonic-icon library="iconoir" name="nav-arrow-right" slot="suffix" ></sonic-icon>
-    </sonic-card-header>
-    <sonic-card-main >
-      <sonic-image rounded ratio="11/4" src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg">
-      </sonic-image>
-      <p><b>Main</b> - 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>
-    </sonic-card-main>
-    <sonic-card-footer>
-      <div>
-        <i>Footer</i> - Amet consectetur adipisicing
-      </div>
-    </sonic-card-footer>
-  </sonic-card>
+    <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/src/core/components/ui/divider/divider.ts

@@ -6,12 +6,13 @@ import {
   query,
 } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { Size } from "@supersoniks/concorde/core/components/ui/_css/size";
 const tagName = "sonic-divider";
 @customElement(tagName)
 export class Divider extends LitElement {
   static styles = [
     css`
-      :host { 
+      :host {
         --sc-divider-my: 0.5rem;
         --sc-divider-mx: 0;
         --sc-divider-border-width: max(
@@ -150,14 +151,8 @@ export class Divider extends LitElement {
   divider!: HTMLDivElement;
 
   @property({ type: String }) label = "";
-  @property({ type: String, reflect: true }) size?:
-    | "2xs"
-    | "xs"
-    | "sm"
-    | "md"
-    | "lg"
-    | "xl"
-    | "2xl";
+  @property({ type: String, reflect: true }) size?: Size;
+
   @property({ type: String, reflect: true }) align:
     | "left"
     | "right"

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

@@ -52,7 +52,7 @@
 ## Check all checkbox
 <sonic-code>
   <template>    
-      <div formDataProvider="checkbox-check-all-demo" dataProvider="checkbox-check-all-demo">
+      <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">

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

@@ -1,7 +1,6 @@
 import { html, LitElement, css, CSSResultGroup, PropertyValues } from "lit";
 import { customElement, property, queryAssignedNodes } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormInput from "@supersoniks/concorde/core/mixins/FormInput";
 import FormCheckable from "@supersoniks/concorde/core/mixins/FormCheckable";
@@ -11,29 +10,14 @@ import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
 
 const tagName = "sonic-checkbox";
 /**
- * ### Le composent sonic-checkbox étend les mixins FormCheckable, FormInput, FormElement et Subscriber
- * **FormElement :**
- * * La propriété value est remplie automatiquement a l'aide de l'attribut name renseigné, ceci en prenant la valeur de la propriété du même nom dans les données du dataprovider associé.
- * * Par défault lorsque modifie l'input, la valeur est également mise à jour via le même dataprovider
- * * On peut cependant décider de mettre à jour la donnée à une autre adresse en renseigne l'attribut *formDataProvider*.
- * * Par conséquent on peut par exemple le lier à un composant *queue* (via sa propriété *dataFilterProvider*) de manière à appeller en auto une api avec des filtres.
- * * **FormInput **
- * Uniquement des propriétés classiques d'un input HTML. La prise en compte est ici partielle, par exemple les propriétés *placeholder*, *readonly*, *pattern*, *min* et *max* n'ont pas de sens pour un checkbox.
- * **FormCheckable :**
- * * La propriété checked mise à true si la valeur de la propriété du même nom dans les données du dataprovider associé contient un propriété checked.
- * **Comportements :**
- * * multiple (par défaut):
- * - on peut cocher plusieurs checkbox ayant le même *name*.
- * - la valeur enregistrée dans la propriété nommé du même nom dans formDataProvider est un tableau avec les *value* des cases cochées ayant le même *name*.
- * * unique (Ajouter l'attribute unique au composant a l'intégration):
- * - on ne peut cocher qu'une seule checkbox ayant le même *name*.
- * * radio (Ajouter l'attribute radio au composant a l'intégration):
- * Comme unique, mais on ne peut pas décocher la case sauf en en cochant une autre, comme un bouton radio.
+ * ### sonic-checkbox — FormCheckable + FormInput + FormElement
+ * Synchronise l'état coché via `formDataProvider` + `name`.
+ * Modes : multiple (défaut), `unique`, `radio`.
  */
 
 @customElement(tagName)
 export class Checkbox extends FormCheckable(
-  FormInput(FormElement(Subscriber(LitElement)))
+  FormInput(FormElement(LitElement))
 ) {
   static styles = [
     fontSize,

package/src/core/components/ui/form/fieldset/legend-description.ts

@@ -6,7 +6,7 @@ export class LegendDescription extends LitElement {
   static styles = [
     css`
       :host {
-        font-size: 1.15rem;
+        font-size: 1.125rem;
         line-height: 1.2;
         display: block;
         color: var(--sc-base-500, var(--sc-base-content, #000));

package/src/core/components/ui/form/fieldset/legend.ts

@@ -11,7 +11,7 @@ export class Legend extends LitElement {
   static styles = [
     css`
       :host {
-        --sc-legend-font-size: 1.5rem;
+        --sc-legend-font-size: 1.25rem;
         --sc-legend-font-weight: var(--sc-font-weight-base, 400);
         --sc-legend-font-style: var(--sc-headings-font-style, normal);
         --sc-legend-family: var(

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

@@ -2,7 +2,7 @@
 
 <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
+  Native attributes list
 </sonic-button>
 
 ## Label

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

@@ -13,27 +13,28 @@ import {
   description,
   passwordToggle,
 } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormInput from "@supersoniks/concorde/core/mixins/FormInput";
 import { classMap } from "lit/directives/class-map.js";
-import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
+import {
+  fontSize,
+  Size,
+} from "@supersoniks/concorde/core/components/ui/_css/size";
+import {
+  resolveUiLabel,
+  uiAriaLabels,
+} from "@supersoniks/concorde/core/components/ui/_i18n/ui-aria-labels";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 /**
- * ### Le composent sonic-input étend les mixins FormInput, FormElement et Subscriber
- * **FormElement :**
- * * La propriété value est remplie automatiquement a l'aide de l'attribut name renseigné, ceci en prenant la valeur de la propriété du même nom dans les données du dataprovider associé.
- * * Par défault lorsque l'on édite l'input, la valeur est également mise à jour via le même dataprovider
- * * On peut cependant décider de mettre à jour la donnée à une autre adresse en renseigne l'attribut *formDataProvider*.
- * * Par conséquent on peut par exemple le lier à un composant *queue* (via sa propriété *dataFilterProvider*) de manière à appeller en auto une api avec des filtres.
- * **FormInput :**
- * Uniquement des propriétés classiques d'un input HTML.
+ * ### sonic-input — FormInput + FormElement
+ * Synchronise `value` via `formDataProvider` + `name`.
+ * Peut alimenter un `sonic-queue` via `dataFilterProvider` pointant sur le même store.
  */
 const tagName = "sonic-input";
 
 @customElement(tagName)
-export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
+export class Input extends FormInput(FormElement(LitElement)) {
   static styles = [
     fontSize,
     formControl,
@@ -54,14 +55,7 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
   /**
    * Taille du composant, implique notamment des modifications de typo et de marge interne
    */
-  @property({ type: String, reflect: true }) size?:
-    | "2xs"
-    | "xs"
-    | "sm"
-    | "md"
-    | "lg"
-    | "xl"
-    | "2xl";
+  @property({ type: String, reflect: true }) size?: Size;
   @property({ type: String }) inputmode?: string;
   @property({ type: String }) list?: string;
   @property({ type: String }) placeholder?: string;
@@ -108,11 +102,11 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
     super.connectedCallback();
     this.hasSlotOrProps();
     if (this.hasAttribute("sameValueAs")) {
-      this.sameValueAsName = this.getAttribute("sameValueAs");
+      this.sameValueAsName = this.getAttribute("sameValueAs") || undefined;
       this.sameValueAsHandle = (v: string) =>
         (this.pattern = this.escapeRegExp(v));
       const formPublisher = this.getFormPublisher();
-      if (!formPublisher) return;
+      if (!formPublisher || !this.sameValueAsName) return;
       formPublisher[this.sameValueAsName].onAssign(this.sameValueAsHandle);
     }
     if (this.type == "password") {
@@ -169,7 +163,7 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
     if (this.changeTimeoutId) clearTimeout(this.changeTimeoutId);
     this.changeTimeoutId = setTimeout(
       () => super.handleChange(e),
-      parseInt(this.getAttribute("inputDelayMs"))
+      parseInt(this.getAttribute("inputDelayMs") || "0"),
     );
   }
 
@@ -218,8 +212,8 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
     //let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
     return html`
       <label for="${this.id || "form-element"}" class="${
-      this.hasLabel ? "form-label" : "hidden"
-    }"
+        this.hasLabel ? "form-label" : "hidden"
+      }"
         >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot
           name="label"
           @slotchange=${this.hasSlotOrProps}
@@ -227,8 +221,8 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
       ></label>
 
       <div @click=${this.inlineContentFocus} class="form-control ${classMap(
-      slotClasses
-    )}">
+        slotClasses,
+      )}">
         <div part="content" class="${
           this.inlineContent ? "form-element form-element-wrapper" : "contents"
         }">
@@ -269,7 +263,11 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
                       shape="circle"
                       class="password-toggle"
                       @click=${this.togglePasswordVisibility}
-                      data-aria-label="Toggle password visibility"
+                      .ariaLabel=${resolveUiLabel(
+                        this.isPassword
+                          ? uiAriaLabels.showPassword
+                          : uiAriaLabels.hidePassword,
+                      )}
                       variant="unstyled"
                     >
                       <sonic-icon

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

@@ -1,133 +1,29 @@
 # Input-autocomplete
 
-The input-autocomplete component brings input and queue together in order to create a suggest behavior. This is why this component is partially configured as a form [input](#core/components/ui/form/input/input.md/input) and as a [queue](#core/components/functional/queue/queue.md/queue).
+Champ formulaire + suggestions via [queue](#core/components/functional/queue/queue.md/queue). Valeur via `formDataProvider` + `name` ; la recherche filtre la queue (store interne).
 
-Please note that only basic text input params and methods are implemented at this time. You should also be sure to understand the behavior of a [queue](#core/components/functional/queue/queue.md/queue) in order to take full advantage of the input-autocomplete component.
+Rendu des lignes : propriété **`.items`** (callback Lit) — voir les démos ci-dessous. Mock : `serviceURL="/docs-mock-api/geo/"`.
 
-Here are some of the features of the input-autocomplete component:
+## Simple
 
-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).
+`name` = paramètre de recherche = valeur formulaire.
 
-* 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.
+<docs-lit-demo for="docs-input-autocomplete-basic-demo"></docs-lit-demo>
 
-If you are looking for a component to provide a suggest behavior, the input-autocomplete component is a good option. 
+## 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>
 
-## Simple Example
+## Mode select
 
-In this example, the input will use its name as the search parameter when calling the service responsible for autocompletion.
+À la fermeture du pop, seule une valeur de la liste (ou vide) est conservée.
 
-The template is used to render the list items of results.
-The list items are responsible for making a selection.
+<docs-lit-demo for="docs-input-autocomplete-select-demo"></docs-lit-demo>
 
-This time, we added buttons with the same name as the input while keeping the same data provider.
-The result is that when you select an item, the input takes the value of the selected item, completing the classic suggest behavior.
+## Navigation clavier
 
+`data-keyboard-nav` sur le champ et les items (flèches haut / bas).
 
-<sonic-code>
-  <template>
-    <sonic-input-autocomplete 
-    class="w-64"
-    label="A french city name" 
-    formDataProvider="autoComplete-example-base" 
-    name="nom" 
-    propertyName="bloop"
-    placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="/docs-mock-api/geo" 
-    dataproviderexpression="communes?limit=5&boost=population"
-    >
-      <template>
-        <sonic-menu-item debug radio name="nom" data-bind ::inner-html="$nom" ::value="$nom"></sonic-menu-item>
-      </template>
-    </sonic-input-autocomplete>
-  </template>
-</sonic-code> 
-
-
-## Value different from search parameter
-
-In this example, the search parameter is separated from the name of the input. This means that the input will use the name "nom" as the search parameter, but the form data provider will be filled with the data named "siren" from the selected list item.
-
-To do this, we need to use the `searchParam` attribute on the input element. This attribute specifies the name of the search parameter that will be used.
-
-We also need to use the `name` and `value` attribute on the list items. This attribute specifies the value of the data provider that will be used for the selected list item.
-
-By using these attributes, we can separate the search parameter from the name of the input and still fill the form data provider with the data from the selected list item.
-
-
-<sonic-code>
-  <template>
-    <sonic-input-autocomplete 
-    class="w-64"
-    label="A french city name" 
-    formDataProvider="autoComplete-example" 
-    name="siren" 
-    value="212703771" 
-    placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="/docs-mock-api/geo" 
-    dataproviderexpression="communes?limit=5&boost=population"
-    searchParameter="nom" 
-    >
-      <template>
-        <sonic-menu-item debug  radio name="siren" data-bind ::inner-html="$nom" ::value="$siren"></sonic-menu-item>
-      </template>
-    </sonic-input-autocomplete>
-  </template>
-</sonic-code> 
-
-
-## Select autocomplete / value different from search parameter
-
-This example is the same as the previous one, except that the `select` attribute is used. This attribute changes the look and feel of the component slightly.
-
-Now the text is less free because, you must select either something from the list given by the service, or nothing else.
-
-The following code shows how to use the `select` attribute in an autocomplete input:
-
-<sonic-code>
-  <template>
-    <sonic-input-autocomplete 
-    select
-    class="w-64"
-    label="A french city name" 
-    formDataProvider="autoComplete-example2" 
-    name="siren" 
-    value="212703771" 
-    placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="/docs-mock-api/geo" 
-    dataproviderexpression="communes?limit=5&boost=population"
-    searchParameter="nom" 
-    >
-      <template>
-        <sonic-menu-item debug radio name="siren" data-bind ::inner-html="$nom" ::value="$siren"></sonic-menu-item>
-      </template>
-    </sonic-input-autocomplete>
-  </template>
-</sonic-code> 
-
-## keyboard navigation
-
-At the moment you can enable keyboard up/down by adding an attribut "data-keyboard-nav" on the component and its listItems
-
-<sonic-code>
-  <template>
-    <sonic-input-autocomplete 
-    class="w-64"
-    label="A french city name" 
-    formDataProvider="autoComplete-example-keyboard" 
-    name="nom" 
-    data-keyboard-nav="nav-autocomplete" 
-    placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="/docs-mock-api/geo" 
-    dataproviderexpression="communes?limit=60&boost=population"
-    >
-    <template>
-        <sonic-menu-item debug radio name="nom" data-keyboard-nav="nav-autocomplete" data-bind ::inner-html="$nom" ::value="$nom"></sonic-menu-item>
-      </template>
-    </sonic-input-autocomplete>
-  </template>
-</sonic-code> 
-
+<docs-lit-demo for="docs-input-autocomplete-keyboard-demo"></docs-lit-demo>