@supersoniks/concorde 5.1.1 → 5.1.3-immutable.1

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

@@ -1,142 +1,160 @@
 # 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 attributes list
-</sonic-button>
+**`sonic-input`** wraps a native `<input>` with a label, a description, prefix and suffix slots and Concorde sizes. Native attributes (`type`, `placeholder`, `pattern`, `min`, `max`, …) are passed through. Bind the value to a store with **`formDataProvider`** and **`name`**, set on the field or on an ancestor.
 
-## Label
-<sonic-code>
-  <template>
-  <sonic-input label="Label"></sonic-input>
-  </template>
-</sonic-code>
+## Basic example
 
-## Placeholder
 <sonic-code>
   <template>
-  <sonic-input placeholder="placeholder"></sonic-input>
+    <sonic-input label="Name" placeholder="Ada Lindqvist" description="As it appears on your passport."></sonic-input>
   </template>
 </sonic-code>
 
-## Value
-<sonic-code>
-  <template>
-  <sonic-input value="value"></sonic-input>
-  </template>
-</sonic-code>
+## Type
 
-## Required
-<sonic-code>
-  <template>
-  <sonic-input required  type="email" placeholder="you@email.com" label="Feedback on blur"></sonic-input>
-  </template>
-</sonic-code>
+With no `type`, the input is `text`. Text-like types (`email`, `password`, `date`, `number`, `color`, `search`, …) are supported; `radio`, `checkbox` and `range` have dedicated components. `password` adds a visibility toggle.
 
-## Description
 <sonic-code>
   <template>
-  <sonic-input description="Description goes here" ></sonic-input>
+    <div class="grid gap-3">
+      <sonic-input type="text" label="Text"></sonic-input>
+      <sonic-input type="email" label="Email" placeholder="ada@example.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="#ffcc00"></sonic-input>
+    </div>
   </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>
+## Size and status
+
+With no `size`, the input uses the base scale. `status` colors the field; it defaults to `default`.
 
 <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>
+    <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 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>
+      <sonic-input status="success" value="success"></sonic-input>
+      <sonic-input status="error" value="error"></sonic-input>
+      <sonic-input status="warning" value="warning"></sonic-input>
+      <sonic-input status="info" value="info"></sonic-input>
+    </div>
   </template>
 </sonic-code>
 
-## Size
+## Validation
+
+`required`, `pattern`, `minlength` and the native type rules are checked by the browser. Feedback styles apply once the field is `touched` (after blur).
+
 <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>
+    <sonic-input required type="email" label="Email" placeholder="ada@example.com"></sonic-input>
   </template>
 </sonic-code>
 
-## List
-<sonic-alert status="error" label="Non fonctionnel" class="mb-4"></sonic-alert>
+## Prefix and suffix
+
+Slotted content sits outside the field by default. Set `inlineContent` to draw it inside; clicking it then focuses the input unless `disableInlineContentFocus` is set.
 
 <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>
+    <div class="grid grid-cols-2 gap-3">
+      <sonic-input type="search" label="Search" placeholder="Search flights">
+        <sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
+      </sonic-input>
+      <sonic-input inlineContent type="number" label="Checked bags" placeholder="0">
+        <sonic-badge slot="suffix" type="danger" size="sm">4 max</sonic-badge>
+      </sonic-input>
+    </div>
   </template>
 </sonic-code>
 
-## Prefix & suffix
+## Form data
+
+Fields sharing the same `formDataProvider` and `name` stay in sync. The attribute is looked up on ancestors, so set it once on a wrapper.
 
 <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>
+    <div formDataProvider="inputDemoForm" class="grid grid-cols-2 gap-3">
+      <sonic-input name="city" label="City" value="Lisbon"></sonic-input>
+      <sonic-input name="city" label="Same field"></sonic-input>
+    </div>
   </template>
 </sonic-code>
 
-## InlineContent
+## Nested keys
+
+A dot in `name` stores a nested object in the form publisher.
 
 <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 formDataProvider="input-nested-demo" class="grid grid-cols-2 gap-3">
+      <sonic-input label="Passenger" name="passenger.name" value="Ada Lindqvist"></sonic-input>
+      <sonic-input label="Seat" name="passenger.seat" value="2A"></sonic-input>
+      <div class="col-span-2">
+        <sonic-value dataProvider="input-nested-demo" key="passenger.name"></sonic-value>
+        ·
+        <sonic-value dataProvider="input-nested-demo" key="passenger.seat"></sonic-value>
       </div>
-    </sonic-input>
-  </div>
+    </div>
   </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>
-
+`sameValueAs` sets `pattern` to the value of another field in the same store, for confirmation fields. Dot paths are supported.
 
 <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>
+    <div formDataProvider="inputDemoPassword" class="grid grid-cols-2 gap-3">
+      <sonic-input type="password" name="password" label="Password"></sonic-input>
+      <sonic-input type="password" name="confirm" sameValueAs="password" label="Confirm password"></sonic-input>
+    </div>
   </template>
 </sonic-code>
 
-<!-- <sonic-input type="password" inlineContent size="2xl"><span slot="suffix">PLOP</span></sonic-input> -->
+## Filtering a list
+
+The input writes `q` to the store used as `dataFilterProvider` by a `sonic-queue`; `inputDelayMs` debounces the requests while typing. Search a city, an airport or a flight number.
+
+<docs-lit-demo for="docs-flight-search-demo"></docs-lit-demo>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `type` | `text` · `email` · `password` · `number` · `date` · `search` · `color` · … (default `text`) | Native input type |
+| `size` | `2xs` … `2xl` (default: base scale) | Typography and padding |
+| `status` | `default` · `success` · `error` · `warning` · `info` | Field color |
+| `label` | string (HTML) | Label; or use the `label` slot |
+| `description` | string (HTML) | Help text under the field; or use the `description` slot |
+| `name` | string | Key in the form store (dot notation allowed) |
+| `value` | string | Initial value |
+| `formDataProvider` | string | Store id; inherited from the closest ancestor |
+| `placeholder` | string | Native placeholder |
+| `required` · `disabled` · `readonly` · `autofocus` | boolean | Native flags |
+| `pattern` · `min` · `max` · `step` · `minlength` · `maxlength` | native | Native constraints |
+| `inputmode` · `autocomplete` · `list` · `src` · `tabindex` | native | Passed to the inner `<input>` |
+| `data-aria-label` · `data-aria-labelledby` | string | Forwarded as `aria-label` and `aria-labelledby` |
+| `inlineContent` | boolean | Renders prefix and suffix inside the field (forced for `password`) |
+| `disableInlineContentFocus` | boolean | Clicking inline content does not focus the input |
+| `showPasswordToggle` | boolean | Visibility toggle (forced for `password`) |
+| `sameValueAs` | string | Name of a field whose value becomes this field's `pattern` |
+| `inputDelayMs` | number | Debounces value updates while typing |
+| `autoActive` | boolean | Sets `active` whenever the value is not empty |
+| `active` | boolean | Reflected state for styling |
+| `unsetOnDisconnect` | boolean | Clears the store value when the element is removed |
+| `forceAutoFill` | boolean | Lets properties override `type` / `label` / `description` / `name` attributes |
+
+| Slot | Description |
+|------|-------------|
+| `label` | Rich label content |
+| `description` | Rich help text |
+| `prefix` | Content before the input |
+| `suffix` | Content after the input |
+| `list` | Extra content after the description |

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

@@ -15,6 +15,7 @@ import {
 } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormInput from "@supersoniks/concorde/core/mixins/FormInput";
+import { traverseDotNotation } from "@supersoniks/concorde/core/utils/Objects";
 import { classMap } from "lit/directives/class-map.js";
 import {
   fontSize,
@@ -107,7 +108,10 @@ export class Input extends FormInput(FormElement(LitElement)) {
         (this.pattern = this.escapeRegExp(v));
       const formPublisher = this.getFormPublisher();
       if (!formPublisher || !this.sameValueAsName) return;
-      formPublisher[this.sameValueAsName].onAssign(this.sameValueAsHandle);
+      // Dot notation (same as FormElement name) — not formPublisher["a.b"].
+      traverseDotNotation(formPublisher, this.sameValueAsName).onAssign(
+        this.sameValueAsHandle,
+      );
     }
     if (this.type == "password") {
       this.isPassword = true;
@@ -120,7 +124,9 @@ export class Input extends FormInput(FormElement(LitElement)) {
     if (this.hasAttribute("sameValueAs") && this.sameValueAsName) {
       const formPublisher = this.getFormPublisher();
       if (!formPublisher) return;
-      formPublisher[this.sameValueAsName].offAssign(this.sameValueAsHandle);
+      traverseDotNotation(formPublisher, this.sameValueAsName).offAssign(
+        this.sameValueAsHandle,
+      );
     }
   }
 

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

@@ -1,57 +1,92 @@
 # Radio
 
-## Size
+**`sonic-radio`** is a round [Checkbox](/core/components/ui/form/checkbox) in radio mode: radios sharing a `name` under one **`formDataProvider`** store a single value, and a checked radio cannot be unchecked by a click. Label goes in the default slot or `label`, helper text in the `description` slot.
+
+## Basic example
+
 <sonic-code>
   <template>
-    <div class="grid gap-2" formDataProvider="radioSizeExemple">
-      <sonic-radio name="size" value="2xs" size="2xs">2xs radio</sonic-radio>
-      <sonic-radio name="size" value="xs" size="xs">xs radio</sonic-radio>
-      <sonic-radio name="size" value="sm" size="sm">sm radio</sonic-radio>
-      <sonic-radio name="size" value="default" >default radio</sonic-radio>
-      <sonic-radio name="size" value="lg" size="lg">lg radio</sonic-radio>
-      <sonic-radio name="size" value="xl" size="xl">xl radio</sonic-radio>
-      <sonic-radio name="size" value="2xl" size="2xl">2xl radio</sonic-radio>
+    <div formDataProvider="radio-basic-demo" class="grid gap-2">
+      <sonic-radio name="seat" value="window" checked>Window</sonic-radio>
+      <sonic-radio name="seat" value="aisle">Aisle</sonic-radio>
+      <div>Seat: <sonic-value dataProvider="radio-basic-demo" key="seat"></sonic-value></div>
     </div>
   </template>
 </sonic-code>
 
-## Checked
-<sonic-code>
-  <template>
-  <sonic-radio checked
-    >Already checked radio
-  </sonic-radio>
-  </template>
-</sonic-code>
+## Size
+
+With no `size`, the radio follows `md` (1rem).
 
-## Disabled
 <sonic-code>
   <template>
-  <sonic-radio disabled
-    >Disabled radio
-  </sonic-radio>
+    <div class="grid gap-2" formDataProvider="radio-size-demo">
+      <sonic-radio name="size" value="2xs" size="2xs">2xs</sonic-radio>
+      <sonic-radio name="size" value="xs" size="xs">xs</sonic-radio>
+      <sonic-radio name="size" value="sm" size="sm">sm</sonic-radio>
+      <sonic-radio name="size" value="md">Default</sonic-radio>
+      <sonic-radio name="size" value="lg" size="lg">lg</sonic-radio>
+      <sonic-radio name="size" value="xl" size="xl">xl</sonic-radio>
+      <sonic-radio name="size" value="2xl" size="2xl">2xl</sonic-radio>
+    </div>
   </template>
 </sonic-code>
 
-## Disabled and checked
+## Checked and disabled
+
+`checked` sets the initial state. `disabled` blocks interaction and dims the control.
+
 <sonic-code>
   <template>
-  <sonic-radio disabled checked
-    >Disabled but already checked radio
-  </sonic-radio>
+    <div class="grid gap-2">
+      <sonic-radio name="state-checked" value="a" checked>Checked</sonic-radio>
+      <sonic-radio name="state-disabled" value="b" disabled>Disabled</sonic-radio>
+      <sonic-radio name="state-both" value="c" disabled checked>Disabled and checked</sonic-radio>
+      <sonic-radio name="state-link" value="d">I accept the <sonic-link href="#" class="underline">terms</sonic-link></sonic-radio>
+    </div>
   </template>
 </sonic-code>
 
-## radio with link
+## Nested keys
+
+A dot in `name` writes a nested object in the form store (same as [Submit](/core/components/functional/submit) nested fields).
+
 <sonic-code>
   <template>
-  <sonic-radio name="link" value="link">radio with <sonic-link href="#" class="underline text-info">link</sonic-link>
+    <div formDataProvider="radio-nested-demo" class="grid gap-2">
+      <sonic-radio name="passenger.seat" value="window" checked>Window</sonic-radio>
+      <sonic-radio name="passenger.seat" value="aisle">Aisle</sonic-radio>
+      <div>Seat: <sonic-value dataProvider="radio-nested-demo" key="passenger.seat"></sonic-value></div>
+    </div>
   </template>
 </sonic-code>
 
+## Filtering a list
+
+The radio group writes one `status` value to the store used as `dataFilterProvider` by a `sonic-queue`. See [Checkbox](/core/components/ui/form/checkbox) for the multi-value version.
+
+<docs-lit-demo for="docs-flight-status-radio-demo"></docs-lit-demo>
+
+## API reference
 
-## Example of use — blacklist + queue
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `name` | string | Key in the form data (dot notation supported) |
+| `value` | string | Value stored when checked |
+| `formDataProvider` | string | Form data id; inherited from the closest ancestor when omitted |
+| `checked` | boolean | Initial checked state |
+| `unsetOnDisconnect` | boolean | Removes the value from the data when the element is removed |
+| `label` | string (HTML) | Label, rendered before the default slot |
+| `description` | string (HTML) | Helper text, rendered in the `description` slot |
+| `size` | `2xs` … `2xl` · `inherit` (default `md`) | Font size and control size |
+| `disabled` | boolean | Blocks interaction |
+| `required` | boolean | Native validation on form submit |
+| `autofocus` | boolean | Focuses the input on load |
+| `data-aria-label` · `data-aria-labelledby` | string | Forwarded to the inner input as `aria-label` / `aria-labelledby` |
 
-Same mock filter as [Checkbox](#core/components/ui/form/checkbox/checkbox.md/checkbox) (`blacklistFlags` query param). Radio sends **one** flag at a time.
+| Slot | Description |
+|------|-------------|
+| *(default)* | Label content (text, links) |
+| `description` | Helper text under the label |
 
-<docs-lit-demo for="docs-joke-blacklist-radio-demo"></docs-lit-demo>
+Fires a `change` event on each click.

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

@@ -1,71 +1,86 @@
 # Select
 
+**`sonic-select`** wraps a native `<select>` with a label, a description, prefix and suffix slots and Concorde sizes. Options come from child `<option>` tags or from the `options` attribute (JSON). Bind the value to a store with **`formDataProvider`** and **`name`**, set on the field or on an ancestor.
+
+## Basic example
+
+<sonic-code>
+  <template>
+    <sonic-select label="Cabin class" description="Pick one.">
+      <option value="">No selection</option>
+      <option value="economy">Economy</option>
+      <option value="premium" selected>Premium</option>
+      <option value="business">Business</option>
+      <option value="first">First</option>
+    </sonic-select>
+  </template>
+</sonic-code>
+
 ## Options
+
+`options` takes an array of objects; `valueKey` (default `value`) and `wordingKey` (default `wording`) name the keys to read. An option with `selected` sets the initial value; with no `value` and nothing selected, the first option is used.
+
 <sonic-code>
   <template>
-    <div class="grid gap-3">
-      <sonic-select> 
-        <option value="">No Selection</option>
-        <option value="1">One</option>
-        <option value="2" selected>Two (set by "tag")</option>
-        <option value="3">Three</option>
-      </sonic-select>
-      <sonic-select options='[{"value":"", "wording":"Set options via \"attribute\""},
-              {"value":"dark", "wording":"dark (set by \"attribute\")", "selected" : "true"}, {"value":"auto", "wording":"auto"}
-              ]'> 
-      </sonic-select>
-    </div>
+    <sonic-select label="Meal" wordingKey="label" options='[{"value":"standard","label":"Standard"},{"value":"vegetarian","label":"Vegetarian","selected":true},{"value":"none","label":"No meal"}]'></sonic-select>
   </template>
 </sonic-code>
 
-## Size
+## Size and status
+
+With no `size`, the select uses the base scale. `status` colors the field; it defaults to `default`.
+
 <sonic-code>
   <template>
     <div class="grid gap-3">
       <sonic-select size="2xs"><option>2xs</option></sonic-select>
       <sonic-select size="xs"><option>xs</option></sonic-select>
       <sonic-select size="sm"><option>sm</option></sonic-select>
-      <sonic-select size="md"><option>md</option></sonic-select>
-      <sonic-select size="default"><option>default</option></sonic-select>
+      <sonic-select><option>default</option></sonic-select>
       <sonic-select size="lg"><option>lg</option></sonic-select>
       <sonic-select size="xl"><option>xl</option></sonic-select>
       <sonic-select size="2xl"><option>2xl</option></sonic-select>
+      <sonic-select status="success"><option>success</option></sonic-select>
+      <sonic-select status="error"><option>error</option></sonic-select>
+      <sonic-select status="warning"><option>warning</option></sonic-select>
+      <sonic-select status="info"><option>info</option></sonic-select>
+      <sonic-select status="primary"><option>primary</option></sonic-select>
+      <sonic-select disabled><option>disabled</option></sonic-select>
     </div>
   </template>
 </sonic-code>
 
+## Filtering a list
 
-## Multiple
-<sonic-code>
-  <template>
-    <div class="grid gap-3">
-      <sonic-select multiple> 
-        <option value="">Choose a number</option>
-        <option value="1">One</option>
-        <option value="2">Two</option>
-        <option value="3">Three</option>
-      </sonic-select>
-    </div>
-  </template>
-</sonic-code>
-
+`name="direction"` writes to the store used as `dataFilterProvider` by a `sonic-queue`, which sends it as `?direction=` to the [mock API](/docs/misc/docs-mock-api): switch between departures and arrivals.
 
-## Disabled
-<sonic-code>
-  <template>
-    <div class="grid gap-3">
-      <sonic-select disabled> 
-        <option value="">Choose a number</option>
-        <option value="1">One</option>
-        <option value="2">Two</option>
-        <option value="3">Three</option>
-      </sonic-select>
-    </div>
-  </template>
-</sonic-code>
+<docs-lit-demo for="docs-flight-direction-demo"></docs-lit-demo>
 
-## Example of use — language filter + queue
+## API reference
 
-**`name="lang"`** is sent as `?lang=fr|en` to the [doc mock API](#docs/_misc/docs-mock-api.md/docs-mock-api) (`filterDocsJokes`). Same pattern as [Input](#core/components/ui/form/input/input.md/input) (`contains`):
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `name` | string | Key in the form store (dot notation allowed) |
+| `value` | string | Initial value |
+| `formDataProvider` | string | Store id; inherited from the closest ancestor |
+| `options` | JSON array | Options as objects; alternative to child `<option>` tags |
+| `valueKey` | string (default `value`) | Option key used as value |
+| `wordingKey` | string (default `wording`) | Option key used as text |
+| `size` | `2xs` … `2xl` (default: base scale) | Typography and padding |
+| `status` | `default` · `success` · `error` · `warning` · `info` · `primary` | Field color |
+| `label` | string (HTML) | Label; or use the `label` slot |
+| `description` | string (HTML) | Help text under the field; or use the `description` slot |
+| `required` · `disabled` · `autofocus` | boolean | Native flags |
+| `multiple` | boolean | Native multiple selection; only one value is stored |
+| `selectSize` | number | Native `size` (visible rows) |
+| `data-aria-label` · `data-aria-labelledby` | string | Forwarded as `aria-label` and `aria-labelledby` |
+| `unsetOnDisconnect` | boolean | Clears the store value when the element is removed |
+| `forceAutoFill` | boolean | Lets properties override `label` / `description` / `name` attributes |
 
-<docs-lit-demo for="docs-joke-lang-demo"></docs-lit-demo>
+| Slot | Description |
+|------|-------------|
+| *(default)* | `<option>` elements |
+| `label` | Rich label content |
+| `description` | Rich help text |
+| `prefix` | Content before the select |
+| `suffix` | Content after the select |