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

package/scripts/pre-publish.mjs

@@ -1,99 +1,77 @@
 import fs from "fs";
 
+// Liste des fichiers requis
 const requiredFiles = [
-  "concorde-core.bundle.js",
-  "concorde-core.es.js",
-  "concorde-3d.bundle.js",
-  "concorde-3d.es.js",
-  "concorde-shader.bundle.js",
-  "concorde-shader.es.js",
-  "concorde-webgpu.bundle.js",
-  "concorde-webgpu.es.js",
-  "concorde-hugging-face-infer.bundle.js",
-  "concorde-hugging-face-infer.es.js",
-  "dist/types/decorators.d.ts",
-  "dist/js/decorators.js",
-  "ai/AGENTS.md",
-  "scripts/ai-init.mjs",
+  'concorde-core.bundle.js',
+  'concorde-core.es.js',
+  'ai/AGENTS.md',
+  'scripts/ai-init.mjs',
 ];
 
 let allFilesExist = true;
 
-for (const file of requiredFiles) {
-
-  if (!fs.existsSync(file)) {
-
-    console.error(`Le fichier requis est manquant: ${file}`);
-    allFilesExist = false;
-
-  }
-
-}
+requiredFiles.forEach((file) => {
+    if (!fs.existsSync(file)) {
+        console.error(`Le fichier requis est manquant: ${file}`);
+        allFilesExist = false;
+    }
+});
 
 if (!allFilesExist) {
 
-  console.error("❌ La publication est bloquée en raison de fichiers manquants.");
-  process.exit(1);
-
+    console.error('❌ La publication est bloquée en raison de fichiers manquants.');
+    process.exit(1);  // Bloque la publication en renvoyant un code d'erreur
+} else {
+    //emoji check mark
+    console.log('✅ Tous les fichiers requis sont présents')
 }
 
-console.log("✅ Tous les fichiers requis sont présents");
-
+// list ts files having console.log in their code ins the src folder
+// console.log("🚀 Maintenance des console.log");
 const consoleLogFiles = [];
-
 function listFiles(dir) {
-
-  let files = [];
-  const list = fs.readdirSync(dir);
-
-  for (const file of list) {
-
-    const filePath = dir + "/" + file;
-    const stat = fs.statSync(filePath);
-
-    if (stat && stat.isDirectory()) {
-
-      files = files.concat(listFiles(filePath));
-    } else if (filePath.indexOf(".ts") !== -1) {
-
-      files.push(filePath);
-
+    let files = [];
+    let list = fs.readdirSync(dir);
+    list.forEach((file) => {
+        const path = dir + "/" + file;
+        let stat = fs.statSync(path);
+        if (stat && stat.isDirectory()) {
+            files = files.concat(listFiles(path));
+        } else {
+            if (path.indexOf(".ts") != -1) {
+                files.push(path);
+            }
+        }
     }
-
-  }
-
-  return files;
-
+    );
+    return files;
 }
+const componentsFiles = listFiles('src');
+componentsFiles.forEach((file) => {
+    if (!file.match(/\.ts$/)) {
+        return;
+    }
+    const content
 
-const componentsFiles = listFiles("src");
-
-for (const file of componentsFiles) {
-
-  if (!file.match(/\.ts$/)) continue;
-  const content = fs.readFileSync(file, "utf8");
-
-  if (content.includes("console.log")) {
-
-    consoleLogFiles.push(file);
-
-  }
-
+    = fs.readFileSync(file, 'utf8');
+    if (content.includes('console.log')) {
+        consoleLogFiles.push(file);
+    }
 }
+);
 
 if (consoleLogFiles.length > 0) {
+    //add an error emoji    console.error('Les fichiers suivants contiennent des console.log:');
+    consoleLogFiles.forEach((file) => {
+        // ajouter une émoji puce
+        console.error(" - "+file);
+    }
+    );
 
-  for (const file of consoleLogFiles) {
-
-    console.error(" - " + file);
-
-  }
-
-  console.error(
-    "❌ La publication est bloquée en raison de la présence de console.log."
-  );
-  process.exit(1);
-
+    console.error('❌ La publication est bloquée en raison de la présence de console.log.');
+    process.exit(1);  // Bloque la publication en renvoyant un code d'erreur
+}else{
+    //emoji check mark
+    console.log('✅ Bavo! Aucun console.log oublié')
 }
 
-console.log("✅ Bavo! Aucun console.log oublié");

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

@@ -32,9 +32,9 @@ Change **Tax %** → même idée.
 
 ## Helpers
 
-`$ucFirst` · `$currency` · `$percent` · `$date` · `$toChart(items, labelKey, valueKey, datasetLabel?)` · `$cosine` · `$rankBySimilarity` · `$mediaUrl(x)` (string | `{url}` | `{blobUrl}`)
+`$ucFirst` · `$currency` · `$percent` · `$date` · `$toChart(items, labelKey, valueKey, datasetLabel?)`
 
-Pas de DOM, pas de réseau, pas d’`eval`. `$mediaUrl` ne crée pas d’ObjectURL (les producteurs HF / extract publient déjà `url`).
+Pas de DOM, pas de réseau, pas d’`eval`.
 
 ## Markup
 
@@ -51,8 +51,6 @@ Pas de DOM, pas de réseau, pas d’`eval`. `$mediaUrl` ne crée pas d’ObjectU
 
 Pour du multi-entrées ou une fonction TS : primitive [`derive`](#docs/_core-concept/dataFlow.md/dataFlow).
 
-Visual stack (3d → HF → jsonata → shader): [Visual stack](#docs/_misc/visual-stack.md/visual-stack).
-
 ## States
 
 `{output}/_state_` → `{ status, error? }` (`loading` | `ready` | `error` | `empty`). Brancher avec `sonic-states`.

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

@@ -40,8 +40,8 @@ It has no shadowdom, and its display style is set to `contents`, so an empty SDU
 
 ### Meaning of the keys:
 
-* **js**: An array of URLs pointing to JavaScript files to load. They are **awaited** before the UI is parsed (needed for CDN addon bundles that register custom elements). Prefer IIFE `*.bundle.js` URLs; `*.es.js` (or `?module`) load as `type="module"`.
-* **css**: An array of URLs pointing to CSS files to load (also awaited).
+* **js**: An array of URLs pointing to JavaScript files to load.
+* **css**: An array of URLs pointing to CSS files to load.
 * **library**: A record of SDUINode definitions intended to be used as a model for other nodes. The keys of the record can be used as the libraryKey of the node. This node will then specialize the model with its own descriptor.
 * **nodes**: An array of SDUINode descriptors. Each SDUINode will result in an HTMLElement added to the root of the component.
 

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

@@ -66,13 +66,13 @@ export class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
     const library: Record<string, SDUINode> = {};
     Object.assign(library, default_library, this.sduiDescriptor.library);
     this.sduiDescriptor.library = library;
-    await this.loadAssets();
+    this.loadAssets();
     await this.loadLibrary();
     await this.transformSDUIDescriptor();
     this.parseRootNodes();
   }
   /**
-   * Suppression du contenu du composant avant la génération de la nouvelle UI
+   * Suppressiond du contenu du composant avant le génération de la nouvelle ui
    */
   private removeChildren() {
     while (
@@ -82,28 +82,15 @@ export class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
     }
   }
   /**
-   * Chargement de fichiers js et css associés si besoin.
-   * Les scripts `js[]` sont attendus avant le parse (ex. bundles CDN addons).
-   * Échec d’un `loadJS` → throw (pas de parse UI sans dépendances).
-   * Les `js[]` / markup doivent venir d’un descripteur de confiance.
+   * Chargement de fichiers js et css associés si besoin
    **/
-  private async loadAssets() {
+  private loadAssets() {
     if (!this.sduiDescriptor) return;
     if (this.sduiDescriptor.js) {
-      const results = await Promise.all(
-        this.sduiDescriptor.js.map((src) => HTML.loadJS(src)),
-      );
-      const failed = this.sduiDescriptor.js.filter((_, i) => !results[i]);
-      if (failed.length) {
-        throw new Error(
-          `SDUI: échec chargement js[] — ${failed.join(", ")}`,
-        );
-      }
+      for (const src of this.sduiDescriptor.js) HTML.loadJS(src);
     }
     if (this.sduiDescriptor.css) {
-      await Promise.all(
-        this.sduiDescriptor.css.map((src) => HTML.loadCSS(src)),
-      );
+      for (const src of this.sduiDescriptor.css) HTML.loadCSS(src);
     }
   }
   /**
@@ -144,11 +131,11 @@ export class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
     nodes.forEach((node) => this.appendChild(this.parseChild(node)));
   }
   /**
-   * On parse un noeud : crée l'élément graphique et ses enfants via `handleChildNodes`.
+   * On parse un noeud ce qui crée un éléments graphique et ses enfants par recursivité via `handleChildNodes`
    */
   private parseChild(node: SDUINode) {
-    const childTagName = node.tagName || "div";
-    let { element, contentElement } = this.handleLibrary(node, childTagName);
+    const tagName = node.tagName || "div";
+    let { element, contentElement } = this.handleLibrary(node, tagName);
     this.handleAttributes(node, element);
     element = this.handleMarkup(node, element);
     if (!contentElement) contentElement = element;
@@ -178,23 +165,25 @@ export class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
   private handleChildNodes(
     node: SDUINode,
     contentElement: HTMLElement,
-    element: HTMLElement,
+    element: HTMLElement
   ) {
-    if (!node.nodes) return;
-    for (const child of node.nodes) {
-      const childElement = this.parseChild(child);
-      let nodeToAppendOn = contentElement;
-      if (child.parentElementSelector) {
-        nodeToAppendOn =
-          element.querySelector(child.parentElementSelector) || contentElement;
-      }
-      if (nodeToAppendOn.shadowRoot) {
-        nodeToAppendOn.shadowRoot.appendChild(childElement);
-      } else if (nodeToAppendOn.tagName.toLocaleLowerCase() == "template") {
-        const template = nodeToAppendOn as HTMLTemplateElement;
-        template.content.appendChild(childElement);
-      } else {
-        nodeToAppendOn.appendChild(childElement);
+    if (node.nodes) {
+      const children: Array<SDUINode> = node.nodes;
+      for (const child of children) {
+        const childElement = this.parseChild(child);
+        let nodeToAppendOn = contentElement;
+        if (child.parentElementSelector) {
+          nodeToAppendOn =
+            element.querySelector(child.parentElementSelector) ||
+            contentElement;
+        }
+        if (nodeToAppendOn.shadowRoot)
+          nodeToAppendOn.shadowRoot.appendChild(childElement);
+        else if (nodeToAppendOn.tagName.toLocaleLowerCase() == "template") {
+          const template: HTMLTemplateElement =
+            nodeToAppendOn as HTMLTemplateElement;
+          template.content.appendChild(childElement);
+        } else nodeToAppendOn.appendChild(childElement);
       }
     }
   }
@@ -245,11 +234,11 @@ export class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
   }
 
   /**
-   * Si le noeud a une propriété innerHTML, l'ajoute au contentElement.
+   * si le noeud à une propriété innerHTML, on l'ajout ay innerHTML de l'élément html en cours de création
    */
   private handleInnerHTML(
     node: SDUINode,
-    contentElement: HTMLElement | undefined,
+    contentElement: HTMLElement | undefined
   ) {
     if (!node.innerHTML) return;
     if (node.innerHTML.indexOf("wording_") != -1) {

package/src/core/components/ui/button/button.ts

@@ -9,7 +9,6 @@ import {
 import { styleMap } from "lit/directives/style-map.js";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormCheckable from "@supersoniks/concorde/core/mixins/FormCheckable";
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import { ifDefined } from "lit/directives/if-defined.js";
 import {
   fontSize,
@@ -42,7 +41,7 @@ const tagName = "sonic-button";
  * * Le bouton possède cependant et notamment une propriété href contrairement à un badge
  */
 @customElement(tagName)
-export class Button extends FormCheckable(FormElement(Subscriber(LitElement))) {
+export class Button extends FormCheckable(FormElement(LitElement)) {
   static styles = [
     fontSize,
     css`

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/input/input.ts

@@ -13,7 +13,6 @@ 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";
@@ -21,19 +20,14 @@ import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
 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,
@@ -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")
     );
   }
 

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>