@supersoniks/concorde 3.1.100 → 3.2.1

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

@@ -0,0 +1,104 @@
+# 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" dataProvider="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
+<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>

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

@@ -0,0 +1,129 @@
+# Fieldset
+
+## Variant
+<sonic-code>
+  <template>
+    <sonic-fieldset variant="default" >
+      Default
+    </sonic-fieldset>
+    <sonic-fieldset variant="ghost" >
+      Ghost
+    </sonic-fieldset>
+    <sonic-fieldset variant="shadow" >
+      Shadow
+    </sonic-fieldset>
+  </template>
+</sonic-code>
+
+## Legend
+<sonic-code>
+  <template>
+  <sonic-fieldset>
+    <sonic-legend label="Legend via attribut : label" description="Description via attribut : description">
+    </sonic-legend>
+  </sonic-fieldset>
+  <sonic-fieldset>
+    <sonic-legend iconLibrary="iconoir"  iconName="pin-alt">
+      Custom legend via <b>slot</b>
+      <sonic-legend-description>
+        Description via composant : sonic-legend-description
+      </sonic-legend-description>
+    </sonic-legend>
+  </sonic-fieldset>
+  </template>
+</sonic-code>
+
+
+## Short hand
+<sonic-code>
+  <template>
+  <sonic-fieldset
+    label="All props on fieldset tag"
+    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+    iconLibrary="iconoir"
+    iconName="user">
+  </sonic-fieldset>
+  </template>
+</sonic-code>
+
+## Example of use
+<sonic-code>
+  <template>
+  <sonic-div formDataProvider="user_create">
+    <form action="/inscription?lang=fr" method="POST" class="mb-20" accept-charset="UTF-8" id="youpla">
+      <sonic-fieldset form="formid" collapsible="true" collapsed="false">
+        <sonic-legend iconLibrary="iconoir"  iconName="user">
+          Informations personnelles
+          <span slot="description">Description du fieldset lorem ipsum dolor</span>
+          <sonic-pop class="inline-block" slot="suffix">
+            <sonic-button shape="circle" variant="ghost">
+              <sonic-icon library="iconoir" size="lg" name="more-vert"></sonic-icon
+            ></sonic-button>
+            <sonic-menu slot="content" minWidth="12rem">
+              <sonic-menu-item>Mentions légales</sonic-menu-item>
+              <sonic-menu-item>Conditions générales d'utilisation</sonic-menu-item>
+            </sonic-menu>
+          </sonic-pop>
+        </sonic-legend>
+        <sonic-form-layout>
+          <sonic-input autocomplete="family-name" label="Nom" name="nom"></sonic-input>
+          <sonic-input autocomplete="given-name" label="Prénom" name="prenom"></sonic-input>
+          <sonic-select autocomplete="sex" label="Sexe" name="sexe">
+            <option value="" selected="selected">- Sélectionner -</option>
+            <option value="-">Je préfère ne pas le dire</option>
+            <option value="Homme">Homme</option>
+            <option value="Femme">Femme</option>
+          </sonic-select>
+          <sonic-input autocomplete="bday" label="Date de naissance" name="date_naissance" type="date"></sonic-input>
+          <sonic-divider></sonic-divider>
+          <sonic-input autocomplete="email" label="e-mail" name="email" type="email"></sonic-input>
+          <sonic-input
+            autocomplete="email"
+            label="Confirmer votre e-mail"
+            name="email_confirmation"
+            type="email"
+          ></sonic-input>
+          <sonic-input autocomplete="new-password" label="Mot de passe" name="password" type="password"></sonic-input>
+          <sonic-input
+            autocomplete="new-password"
+            label="Confirmer votre mot de passe"
+            name="password_confirmation"
+            type="password"
+          ></sonic-input>
+        </sonic-form-layout>
+      </sonic-fieldset>
+      <sonic-fieldset form="formid" collapsible="true" collapsed="false">
+        <sonic-legend iconLibrary="iconoir"  iconName="pin-alt"> Coordonnées </sonic-legend>
+        <sonic-form-layout>
+          <sonic-input autocomplete="postal-code" label="Code postal" name="cp"></sonic-input>
+          <sonic-input autocomplete="address-level2" label="Ville" name="ville"></sonic-input>
+        </sonic-form-layout>
+      </sonic-fieldset>
+      <div class="">
+        <sonic-button submit type="primary">
+          <sonic-icon  library="iconoir" name="check"></sonic-icon>
+          S'inscrire
+        </sonic-button>
+        <sonic-tooltip class="inline-flex" label="Vous êtes sûr(e) ? 🙄">
+          <sonic-button size="sm" variant="ghost"> Continuer sans m'inscrire </sonic-button>
+        </sonic-tooltip>
+      </div>
+    </form>
+    <div dataProvider="user_create" class="my-6 text-neutral-600 p-5 rounded-xl shadow-lg">
+       <div class="font-bold text-lg text-neutral-400">Submitted informations...</div>
+      <div class="text-lg my-2">
+        <sonic-value key="nom" class="font-bold"></sonic-value>
+        <sonic-value key="prenom"></sonic-value>
+      </div>
+      <div class="text-sm">
+        <sonic-value key="sexe"></sonic-value>
+        <sonic-value key="date_naissance"></sonic-value>
+      </div>
+      <div class="text-sm">
+        <sonic-value key="email"></sonic-value>
+        <sonic-value key="cp"></sonic-value>
+        <sonic-value key="ville"></sonic-value></div>
+    </div>
+  </sonic-div>
+  </template>
+</sonic-code>

package/docs/src/core/components/ui/form/form-actions/form-actions.md

@@ -0,0 +1,77 @@
+# Form-actions
+
+## Left by default
+
+<sonic-code>
+  <template>
+  <form>
+    <sonic-form-layout>
+      <sonic-input label="First name"></sonic-input>
+      <sonic-input label="Last name"></sonic-input>
+      <sonic-form-actions>
+        <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button> 
+        <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon>  Cancel</sonic-button> 
+      </sonic-form-actions>
+    </sonic-form-layout>
+  </form >
+  </template>
+</sonic-code>
+
+## Justify
+
+<sonic-code>
+  <template>
+  <form>
+    <sonic-form-layout>
+      <sonic-input label="First name"></sonic-input>
+      <sonic-input label="Last name"></sonic-input>
+      <sonic-form-actions justify="flex-end">
+        <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button> 
+        <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon>  Cancel</sonic-button> 
+      </sonic-form-actions>
+    </sonic-form-layout>
+  </form >
+  </template>
+</sonic-code>
+
+## Direction
+
+<sonic-code>
+  <template>
+  <form>
+    <sonic-form-layout>
+      <sonic-input label="First name"></sonic-input>
+      <sonic-input label="Last name"></sonic-input>
+      <sonic-form-actions direction="row-reverse">
+        <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button> 
+        <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon>  Cancel</sonic-button> 
+      </sonic-form-actions>
+    </sonic-form-layout>
+  </form >
+  </template>
+</sonic-code>
+
+## Center
+
+<sonic-code>
+  <template>
+  <form>
+    <sonic-form-layout>
+      <sonic-input label="First name"></sonic-input>
+      <sonic-input label="Last name"></sonic-input>
+      <sonic-form-actions justify="center" >
+        <sonic-button type="info" minWidth="12rem">
+          <sonic-icon name="nav-arrow-left" library="iconoir" slot="prefix"></sonic-icon>
+          Left seats
+        </sonic-button> 
+        <sonic-divider vertical></sonic-divider>
+        <sonic-button type="info" minWidth="12rem">
+          <sonic-icon name="nav-arrow-right" library="iconoir" slot="suffix"></sonic-icon>
+          Right seats
+        </sonic-button> 
+      </sonic-form-actions>
+    </sonic-form-layout>
+  </form >
+  </template>
+</sonic-code>
+

package/docs/src/core/components/ui/form/form-layout/form-layout.md

@@ -0,0 +1,44 @@
+# Form-layout
+
+<sonic-code>
+  <template>
+  <form>
+    <sonic-form-layout>
+      <sonic-input autocomplete="family-name" label="Nom" name="nom"></sonic-input>
+      <sonic-input autocomplete="given-name" label="Prénom" name="prenom"></sonic-input>
+      <sonic-select autocomplete="sex" label="Sexe" name="sexe">
+        <option value="" selected="selected">- Sélectionner -</option>
+        <option value="-">Je préfère ne pas le dire</option>
+        <option value="Homme">Homme</option>
+        <option value="Femme">Femme</option>
+      </sonic-select>
+      <sonic-input autocomplete="bday" label="Date de naissance" name="date_naissance" type="date"></sonic-input>
+      <sonic-divider></sonic-divider>
+      <sonic-input autocomplete="email" label="e-mail" name="email" type="email"></sonic-input>
+      <sonic-input
+        autocomplete="email"
+        label="Confirmer votre e-mail"
+        name="email_confirmation"
+        type="email"
+      ></sonic-input>
+      <sonic-input autocomplete="new-password" label="Mot de passe" name="password" type="password"></sonic-input>
+      <sonic-input
+        autocomplete="new-password"
+        label="Confirmer votre mot de passe"
+        name="password_confirmation"
+        type="password"
+      ></sonic-input>
+      <sonic-divider></sonic-divider>
+      <sonic-textarea label="Message" rows="5">
+      </sonic-textarea>
+      <sonic-switch>Activer une superbe option</sonic-switch>
+      <sonic-checkbox>Inscription à la newsletter</sonic-checkbox>
+      <sonic-checkbox>J'ai lu et accepte les <sonic-link href="#" class="underline">Conditions générales de ventes</sonic-link></sonic-checkbox>
+      <sonic-form-actions>
+        <sonic-button type="success">Valider</sonic-button> 
+      </sonic-form-actions>
+    </sonic-form-layout>
+  </form >
+  </template>
+</sonic-code>
+

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

@@ -0,0 +1,167 @@
+# 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
+</sonic-button>
+
+## Label
+<sonic-code>
+  <template>
+  <sonic-input label="Label"></sonic-input>
+  </template>
+</sonic-code>
+
+## Placeholder
+<sonic-code>
+  <template>
+  <sonic-input placeholder="placeholder"></sonic-input>
+  </template>
+</sonic-code>
+
+## Value
+<sonic-code>
+  <template>
+  <sonic-input value="value"></sonic-input>
+  </template>
+</sonic-code>
+
+## Required
+<sonic-code>
+  <template>
+  <sonic-input required  type="email" placeholder="you@email.com" label="Feedback on blur"></sonic-input>
+  </template>
+</sonic-code>
+
+## Description
+<sonic-code>
+  <template>
+  <sonic-input description="Description goes here" ></sonic-input>
+  </template>
+</sonic-code>
+
+## Type
+<sonic-button size="2xs" type="info" target="_blank" href="https://www.w3schools.com/html/html_form_input_types.asp">Liste des types</sonic-button>
+
+<sonic-code>
+  <template>
+  <div class="grid gap-3">
+    <sonic-input type="text" label="Text">Text</sonic-input>
+    <sonic-input type="email" label="Email" placeholder="plop@kiki.com"></sonic-input>
+    <sonic-input type="password" label="Password"></sonic-input>
+    <sonic-input type="date" label="Date"></sonic-input>
+    <sonic-input type="number" label="Number"></sonic-input>
+    <sonic-input type="color" label="Color" value="#ffff00"></sonic-input>
+  </div>
+  </template>
+</sonic-code>
+
+## Size
+<sonic-code>
+  <template>
+  <div class="grid gap-3">
+    <sonic-input size="2xs" value="2xs"></sonic-input>
+    <sonic-input size="xs" value="xs"></sonic-input>
+    <sonic-input size="sm" value="sm"></sonic-input>
+    <sonic-input size="md" value="md"></sonic-input>
+    <sonic-input value="default"></sonic-input>
+    <sonic-input size="lg" value="lg"></sonic-input>
+    <sonic-input size="xl" value="xl"></sonic-input>
+    <sonic-input size="2xl" value="2xl"></sonic-input>
+  </div>
+  </template>
+</sonic-code>
+
+## List
+<sonic-alert status="error" label="Non fonctionnel" class="mb-4"></sonic-alert>
+
+<sonic-code>
+  <template>
+  <sonic-input list="browsers"></sonic-input>
+  <datalist id="browsers">
+    <option value="Internet Explorer">
+    <option value="Firefox">
+    <option value="Google Chrome">
+    <option value="Opera">
+    <option value="Safari">
+  </datalist>
+  </template>
+</sonic-code>
+
+## Prefix & suffix
+
+<sonic-code>
+  <template>
+  <div class="grid grid-cols-2 gap-3">
+    <sonic-input type="search" label="Search" placeholder="Search plane">
+      <sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
+    </sonic-input>
+    <sonic-input type="number" label="Amount" placeholder="0">
+      <sonic-icon library="iconoir" name="euro" slot="suffix"></sonic-icon>
+    </sonic-input>
+  </div>
+  </template>
+</sonic-code>
+
+## InlineContent
+
+<sonic-code>
+  <template>
+  <div class="grid grid-cols-2 gap-3">
+    <sonic-input inlineContent type="search" label="Search icon in input" placeholder="Search plane">
+      <sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
+    </sonic-input>
+    <sonic-input inlineContent type="number" label="Number of seats" placeholder="0">
+      <div slot="suffix" class="flex gap-2 items-center">
+        <sonic-badge type="danger" size="sm">4 max</sonic-badge>
+        <sonic-icon library="iconoir" name="euro" ></sonic-icon>
+      </div>
+    </sonic-input>
+  </div>
+  </template>
+</sonic-code>
+
+
+
+## Example of use
+<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>
+
+
+<sonic-code>
+  <template>
+    <sonic-input type="search"  placeholder="Search plane" class="inline-block">
+    </sonic-input>
+    <sonic-button type="danger" label="Amount" placeholder="0">azdazd
+    </sonic-button>
+  </template>
+</sonic-code>
+
+<!-- <sonic-input type="password" inlineContent size="2xl"><span slot="suffix">PLOP</span></sonic-input> -->

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

@@ -0,0 +1,131 @@
+# 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).
+
+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.
+
+Here are some of the features of the input-autocomplete component:
+
+* 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.
+
+If you are looking for a component to provide a suggest behavior, the input-autocomplete component is a good option. 
+
+
+
+## Simple Example
+
+In this example, the input will use its name as the search parameter when calling the service responsible for autocompletion.
+
+The template is used to render the list items of results.
+The list items are responsible for making a selection.
+
+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.
+
+
+<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="https://geo.api.gouv.fr" 
+    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="https://geo.api.gouv.fr" 
+    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="https://geo.api.gouv.fr" 
+    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="https://geo.api.gouv.fr" 
+    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> 
+