@supersoniks/concorde 5.1.2 → 5.1.3-immutable.2

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

@@ -1,86 +1,71 @@
 # 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>
-    <sonic-select label="Meal" wordingKey="label" options='[{"value":"standard","label":"Standard"},{"value":"vegetarian","label":"Vegetarian","selected":true},{"value":"none","label":"No meal"}]'></sonic-select>
+    <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>
   </template>
 </sonic-code>
 
-## Size and status
-
-With no `size`, the select uses the base scale. `status` colors the field; it defaults to `default`.
-
+## Size
 <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><option>default</option></sonic-select>
+      <sonic-select size="md"><option>md</option></sonic-select>
+      <sonic-select size="default"><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
 
-`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.
+## 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>
+
 
-<docs-lit-demo for="docs-flight-direction-demo"></docs-lit-demo>
+## 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>
 
-## API reference
+## Example of use — language filter + queue
 
-| 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 |
+**`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`):
 
-| Slot | Description |
-|------|-------------|
-| *(default)* | `<option>` elements |
-| `label` | Rich label content |
-| `description` | Rich help text |
-| `prefix` | Content before the select |
-| `suffix` | Content after the select |
+<docs-lit-demo for="docs-joke-lang-demo"></docs-lit-demo>

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

@@ -1,80 +1,57 @@
 # Switch
 
-**`sonic-switch`** is a toggle-styled [Checkbox](/core/components/ui/form/checkbox) in `unique` mode: when on, it stores its `value` under `name` in the **`formDataProvider`** data; when off, it stores `null`. Switches sharing a `name` behave as one choice, so give independent switches distinct names. Label goes in the default slot or `label`, helper text in the `description` slot.
-
-## Basic example
-
+## Size
 <sonic-code>
   <template>
-    <div formDataProvider="switch-basic-demo" class="grid gap-2">
-      <sonic-switch name="notifications" value="on" checked>
-        Notifications
-        <span slot="description">Get an alert when your gate changes.</span>
-      </sonic-switch>
-      <div>Value: <sonic-value dataProvider="switch-basic-demo" key="notifications"></sonic-value></div>
+    <div class="grid gap-2" formDataProvider="switchSizeExemple">
+      <sonic-switch name="size2xs" value="2xs" size="2xs">2xs switch</sonic-switch>
+      <sonic-switch name="sizexs" value="xs" size="xs">xs switch</sonic-switch>
+      <sonic-switch name="sizesm" value="sm" size="sm">sm switch</sonic-switch>
+      <sonic-switch name="size" value="default" >default switch</sonic-switch>
+      <sonic-switch name="sizelg" value="lg" size="lg">lg switch</sonic-switch>
+      <sonic-switch name="sizexl" value="xl" size="xl">xl switch</sonic-switch>
+      <sonic-switch name="size2xl" value="2xl" size="2xl">2xl switch</sonic-switch>
     </div>
   </template>
 </sonic-code>
 
-## Size
-
-With no `size`, the switch follows `md` (1rem).
-
+## Checked
 <sonic-code>
   <template>
-    <div class="grid gap-2">
-      <sonic-switch size="2xs">2xs</sonic-switch>
-      <sonic-switch size="xs">xs</sonic-switch>
-      <sonic-switch size="sm">sm</sonic-switch>
-      <sonic-switch>Default</sonic-switch>
-      <sonic-switch size="lg">lg</sonic-switch>
-      <sonic-switch size="xl">xl</sonic-switch>
-      <sonic-switch size="2xl">2xl</sonic-switch>
-    </div>
+  <sonic-switch checked
+    >Already checked switch
+  </sonic-switch>
   </template>
 </sonic-code>
 
-## Checked and disabled
-
-`checked` sets the initial state. `disabled` blocks interaction and dims the control.
-
+## Disabled
 <sonic-code>
   <template>
-    <div class="grid gap-2">
-      <sonic-switch checked>Checked</sonic-switch>
-      <sonic-switch disabled>Disabled</sonic-switch>
-      <sonic-switch disabled checked>Disabled and checked</sonic-switch>
-      <sonic-switch>I accept the <sonic-link href="#" class="underline">terms</sonic-link></sonic-switch>
-    </div>
+  <sonic-switch disabled
+    >Disabled switch
+  </sonic-switch>
   </template>
 </sonic-code>
 
-## Filtering a list
-
-On, the switch writes `status=delayed` to the store used as `dataFilterProvider` by a `sonic-queue`; off, it writes `null` and the filter is dropped.
+## Disabled and checked
+<sonic-code>
+  <template>
+  <sonic-switch disabled checked
+    >Disabled but already checked switch
+  </sonic-switch>
+  </template>
+</sonic-code>
 
-<docs-lit-demo for="docs-flight-delayed-switch-demo"></docs-lit-demo>
+## switch with link
+<sonic-code>
+  <template>
+  <sonic-switch name="link" value="link">switch with <sonic-link href="#" class="underline text-info">link</sonic-link>
+  </template>
+</sonic-code>
 
-## API reference
 
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `name` | string | Key in the form data (dot notation supported) |
-| `value` | string | Value stored when on |
-| `formDataProvider` | string | Form data id; inherited from the closest ancestor when omitted |
-| `checked` | boolean | Initial 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 track 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` |
+## Example of use — blacklist + queue
 
-| Slot | Description |
-|------|-------------|
-| *(default)* | Label content (text, links) |
-| `description` | Helper text under the label |
+Same mock filter as [Checkbox](#core/components/ui/form/checkbox/checkbox.md/checkbox); switches can enable several flags (comma-separated in the query).
 
-Fires a `change` event on each click.
+<docs-lit-demo for="docs-joke-blacklist-switch-demo"></docs-lit-demo>

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

@@ -1,82 +1,65 @@
 # Textarea
 
-**`sonic-textarea`** wraps a native `<textarea>` with a label, a description and Concorde sizes. Native attributes (`rows`, `cols`, `maxlength`, `wrap`, …) are passed through. Bind the value to a store with **`formDataProvider`** and **`name`**, set on the field or on an ancestor.
+<sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_textarea.asp#midcontentadcontainer">
+  <sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
+  Native attributes list
+</sonic-button>
 
-## Basic example
 
+## Label
 <sonic-code>
   <template>
-    <sonic-textarea label="Comments to the crew" placeholder="Write your message" description="Plain text only."></sonic-textarea>
+  <sonic-textarea label="Label"></sonic-textarea>
   </template>
 </sonic-code>
 
-## Rows and resize
-
-`rows` sets the visible height. With no `resize`, the user can resize vertically only.
-
+## Placeholder
 <sonic-code>
   <template>
-    <div class="grid gap-3">
-      <sonic-textarea rows="6" label="Six rows"></sonic-textarea>
-      <sonic-textarea resize="none" label="Not resizable"></sonic-textarea>
-    </div>
+  <sonic-textarea placeholder="placeholder"></sonic-textarea>
   </template>
 </sonic-code>
 
-## Size and status
-
-With no `size`, the textarea uses `md`. `status` colors the field; it defaults to `default`.
-
+## Value
 <sonic-code>
   <template>
-    <div class="grid gap-3">
-      <sonic-textarea rows="1" size="2xs" value="2xs"></sonic-textarea>
-      <sonic-textarea rows="1" size="xs" value="xs"></sonic-textarea>
-      <sonic-textarea rows="1" size="sm" value="sm"></sonic-textarea>
-      <sonic-textarea rows="1" value="default"></sonic-textarea>
-      <sonic-textarea rows="1" size="lg" value="lg"></sonic-textarea>
-      <sonic-textarea rows="1" size="xl" value="xl"></sonic-textarea>
-      <sonic-textarea rows="1" size="2xl" value="2xl"></sonic-textarea>
-      <sonic-textarea rows="1" status="success" value="success"></sonic-textarea>
-      <sonic-textarea rows="1" status="error" value="error"></sonic-textarea>
-      <sonic-textarea rows="1" status="warning" value="warning"></sonic-textarea>
-      <sonic-textarea rows="1" status="info" value="info"></sonic-textarea>
-    </div>
+  <sonic-textarea value="value"></sonic-textarea>
   </template>
 </sonic-code>
 
-## Validation
-
-`required`, `minlength` and `maxlength` are checked by the browser. Feedback styles apply once the field is `touched` (after blur).
+## Required
+<sonic-code>
+  <template>
+  <sonic-textarea required label="Feedback on blur" placeholder="required" ></sonic-textarea>
+  </template>
+</sonic-code>
 
+## Rows
 <sonic-code>
   <template>
-    <sonic-textarea required minlength="10" label="Special assistance request" placeholder="At least 10 characters"></sonic-textarea>
+  <sonic-textarea rows="8"></sonic-textarea>
   </template>
 </sonic-code>
 
-## API reference
+## Description
+<sonic-code>
+  <template>
+  <sonic-textarea  description="Description goes here" ></sonic-textarea>
+  </template>
+</sonic-code>
 
-| 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 |
-| `label` | string (HTML) | Label; or use the `label` slot |
-| `description` | string (HTML) | Help text under the field; or use the `description` slot |
-| `placeholder` | string | Native placeholder |
-| `size` | `2xs` … `2xl` (default `md`) | Typography and padding |
-| `status` | `default` · `success` · `error` · `warning` · `info` | Field color |
-| `rows` · `cols` | number | Native dimensions |
-| `minlength` · `maxlength` | number | Native length constraints |
-| `wrap` | `soft` · `hard` | Native wrapping |
-| `resize` | `vertical` · `horizontal` · `both` · `none` · `block` · `inline` (default `vertical`) | CSS resize handle |
-| `required` · `disabled` · `readonly` · `autofocus` | boolean | Native flags |
-| `autocomplete` · `tabindex` | native | Passed to the inner `<textarea>` |
-| `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 |
 
-| Slot | Description |
-|------|-------------|
-| `label` | Rich label content |
-| `description` | Rich help text |
+## Size
+<sonic-code>
+  <template>
+  <div class="grid gap-4">
+    <sonic-textarea size="2xs" value="2xs"></sonic-textarea>
+    <sonic-textarea size="xs" value="xs"></sonic-textarea>
+    <sonic-textarea size="sm" value="sm"></sonic-textarea>
+    <sonic-textarea value="md / default"></sonic-textarea>
+    <sonic-textarea size="lg" value="lg"></sonic-textarea>
+    <sonic-textarea size="xl" value="xl"></sonic-textarea>
+    <sonic-textarea size="2xl" value="2xl"></sonic-textarea>
+  </div>
+  </template>
+</sonic-code>

package/docs/src/core/components/ui/group/group.md

@@ -1,64 +1,62 @@
 # Group
 
-**`sonic-group`** lays out `sonic-button` · `sonic-input` and `sonic-select` controls in one row with a **shared corner radius**: only the outer corners of the first and last items stay rounded. Use it for button groups, radio rows or a field with an attached action. Optional `label` and `description` follow form field styling.
+**`sonic-group`** lays out slotted **`sonic-button`** · **`sonic-input`** and **`sonic-select`** controls in a single horizontal row with **shared corner radius** (first / middle / last items). Optional **`label`** and **`description`** follow form field styling. Use it for **button groups**, **radio rows**, or **input + action** toolbars.
 
 ## Radio group
 
-Give each `sonic-button` the `radio` attribute and a shared `name`. The selected `value` is written to the `formDataProvider` set on the group (inherited by the buttons).
+Pair with **`sonic-button`** **`radio`** and a shared **`name`**; ancestor **`formDataProvider`** stores the selected **`value`**.
 
 <sonic-code>
   <template>
-    <sonic-group formDataProvider="groupPlanDemo">
-      <sonic-button radio name="plan" value="free" type="default">Free</sonic-button>
-      <sonic-button radio checked name="plan" value="pro" type="default">Pro</sonic-button>
-      <sonic-button radio name="plan" value="team" type="default">Team</sonic-button>
+    <sonic-group formDataProvider="subscriptionData">
+      <sonic-button radio name="subscription" value="standard" type="default">😎 Standard</sonic-button>
+      <sonic-button radio checked name="subscription" value="premium" type="default">⭐ Premium</sonic-button>
+      <sonic-button radio name="subscription" value="diamond" type="default">💎 Diamond</sonic-button>
     </sonic-group>
   </template>
 </sonic-code>
 
 ## Button group
 
-Adjacent action buttons that stay independent controls.
+Adjacent link or action buttons without merging into one control.
 
 <sonic-code>
   <template>
     <sonic-group>
-      <sonic-button type="default">
-        <sonic-icon library="iconoir" name="align-left"></sonic-icon>
-      </sonic-button>
-      <sonic-button type="default">
-        <sonic-icon library="iconoir" name="align-center"></sonic-icon>
-      </sonic-button>
-      <sonic-button type="default">
-        <sonic-icon library="iconoir" name="align-right"></sonic-icon>
-      </sonic-button>
+      <sonic-button type="info" target="_blank" href="https://wwws.airfrance.fr/">🗼 Air France</sonic-button>
+      <sonic-button type="success" target="_blank" href="https://www.airtahitinui.com/">🌴 Air Tahiti</sonic-button>
+      <sonic-button type="danger" target="_blank" href="https://www.aircorsica.com/">💣 Air Corsica</sonic-button>
     </sonic-group>
   </template>
 </sonic-code>
 
-## Field with action
+## Input actions prefix
 
-Put the action before or after the field. `label` and `description` annotate the whole row.
+Action control before the field. **`label`** or **`description`** on **`sonic-group`** annotate the row.
 
 <sonic-code>
   <template>
-    <div class="grid gap-4 max-w-md">
-      <sonic-group label="Search" description="Type a flight number, then confirm.">
-        <sonic-input placeholder="CN 001"></sonic-input>
-        <sonic-button type="primary" shape="square">
-          <sonic-icon library="iconoir" name="search"></sonic-icon>
+      <sonic-group label="Label" description="Description">
+        <sonic-button type="info" shape="square">
+          <sonic-icon library="iconoir" name="info-empty"></sonic-icon>
         </sonic-button>
+        <sonic-input></sonic-input>
       </sonic-group>
-      <sonic-group label="Extra baggage">
-        <sonic-button type="default" shape="square">
-          <sonic-icon library="iconoir" name="minus"></sonic-icon>
-        </sonic-button>
-        <sonic-input type="number" value="1"></sonic-input>
-        <sonic-button type="default" shape="square">
-          <sonic-icon library="iconoir" name="plus"></sonic-icon>
+  </template>
+</sonic-code>
+
+## Input actions suffix
+
+Field first, action after (submit, validate, etc.).
+
+<sonic-code>
+  <template>
+      <sonic-group label="Label" description="Description">
+        <sonic-input></sonic-input>
+        <sonic-button type="primary" shape="square">
+          <sonic-icon library="iconoir" name="check"></sonic-icon>
         </sonic-button>
       </sonic-group>
-    </div>
   </template>
 </sonic-code>
 
@@ -66,12 +64,12 @@ Put the action before or after the field. `label` and `description` annotate the
 
 | Attribute | Values | Description |
 |----------|---------|-------------|
-| `label` | string (HTML) | Label above the row; content of `slot="label"` is appended |
-| `description` | string (HTML) | Help text below the row; content of `slot="description"` replaces it |
-| `alignItems` | CSS `align-items` value (default `center`) | Cross-axis alignment of the row |
+| `label` | string (HTML) | Label above the row; **`slot="label"`** overrides / extends |
+| `description` | string (HTML) | Help text below the row; **`slot="description"`** overrides / extends |
+| `alignItems` | CSS align-items (default `center`) | Cross-axis alignment of the main flex row |
 
 | Slot | Description |
 |------|-------------|
-| *(default)* | `sonic-button` · `sonic-input` · `sonic-select` in visual order |
+| *(default)* | **`sonic-button`** · **`sonic-input`** · **`sonic-select`** in visual order |
 | `label` | Custom label markup |
 | `description` | Custom description markup |

package/docs/src/core/components/ui/icon/icon.md

@@ -139,7 +139,7 @@ Use **`library="custom"`** with SVG files on your origin. On an ancestor (for ex
 
 ## Size
 
-Omit **`size`** for the default scale (`1em` height, inherited from the font size). Steps go from `2xs` to `3xl`.
+Omit **`size`** for the default scale (`1em` height). Larger steps use **`3xl`**.
 
 <sonic-code>
   <template>
@@ -194,8 +194,8 @@ On connect, the host sets **`aria-hidden="true"`**. Treat icons as decorative un
 
 <sonic-code>
   <template>
-    <sonic-button type="neutral" variant="outline" shape="circle" aria-label="Flight details">
-      <sonic-icon library="iconoir" name="airplane"></sonic-icon>
+    <sonic-button type="neutral" variant="outline" shape="circle" aria-label="User profile">
+      <sonic-icon library="iconoir" name="user"></sonic-icon>
     </sonic-button>
   </template>
 </sonic-code>
@@ -207,7 +207,7 @@ On connect, the host sets **`aria-hidden="true"`**. Treat icons as decorative un
 | `name` | string | Icon id in the core bundle or in the remote library |
 | `library` | `heroicons` · `iconoir` · `feathers` · `lucide` · `material` · `fontAwesome` · `custom` | CDN or custom template; omit for bundled core icons |
 | `prefix` | string | Library-specific variant; defaults per library when empty |
-| `size` | `2xs` · `xs` · `sm` · `lg` · `xl` · `2xl` · `3xl` (default `1em`, no attribute) | `em`-based SVG scale on the host |
+| `size` | `2xs` · `xs` · `sm` · `lg` · `xl` · `2xl` · `3xl` (default `md`) | `em`-based SVG scale on the host |
 
 Ancestor attributes (for **`library="custom"`** only): **`customIconLibraryPath`** (URL template with **`$prefix`** and **`$name`**) and **`customIconDefaultPrefix`**. May be set on **`sonic-scope`**, theme roots, or globally in the document.