@supersoniks/concorde 5.1.1 → 5.1.2

package/docs/src/core/components/functional/submit/submit.md

@@ -0,0 +1,106 @@
+# Submit
+
+**`sonic-submit`** sends the form publisher named by `formDataProvider` to a REST endpoint and writes the response to `submitResultDataProvider`. The request is configured like [Fetch](/core/components/functional/fetch): `serviceURL` on an ancestor, path from the ancestor `dataProvider` or from `endPoint`. Form fields such as `sonic-input` fill the publisher through their `name`.
+
+## Basic example
+
+`onClick` sends on a click inside the element, `onEnterKey` on Enter in a focused field inside it. The method defaults to `post` and the body to JSON. Fields are validated first; while the request runs, the content is faded and not clickable.
+
+<docs-lit-demo for="docs-submit-demo"></docs-lit-demo>
+
+## Result key
+
+When the API wraps its payload (`{ data: { id, token } }`), set `submitResultKey` to a dot path so `submitResultDataProvider` receives only that part.
+
+<docs-lit-demo for="docs-submit-result-key-demo"></docs-lit-demo>
+
+## Reset after submit
+
+`clearedDataOnSuccess` on an ancestor lists publisher ids, separated by spaces, that are set to `{}` once the API returns a result. This includes error results with `messages`.
+
+<docs-lit-demo for="docs-submit-clear-demo"></docs-lit-demo>
+
+## Submit event
+
+After each request, `sonic-submit` dispatches a bubbling `submit` event whose `detail` is the result, the same value written to `submitResultDataProvider`.
+
+<docs-lit-demo for="docs-submit-event-demo"></docs-lit-demo>
+
+## Endpoint override
+
+`endPoint` on `sonic-submit` replaces the ancestor `dataProvider` as the request path, for this element only.
+
+<docs-lit-demo for="docs-submit-endpoint-demo"></docs-lit-demo>
+
+## HTTP method
+
+Set `method` to `put` · `patch` · `delete` · `get` (default `post`). It is read on `sonic-submit` only, never inherited. With `get`, the fields are appended to the endpoint as a query string.
+
+<docs-lit-demo for="docs-submit-get-demo"></docs-lit-demo>
+
+## Multipart body
+
+`sendAsFormData` sends the fields as `multipart/form-data` instead of JSON. The response is still parsed as JSON.
+
+<docs-lit-demo for="docs-submit-formdata-demo"></docs-lit-demo>
+
+## Native form
+
+With `native`, no request is made: after validation, the publisher values are copied into the matching controls of the closest `<form>` (hidden inputs are created when missing), then the browser submits the form. `name` and `value` on `sonic-submit` are sent as the submit button pair. Use a `target` iframe to stay on the page.
+
+<docs-lit-demo for="docs-submit-native-demo"></docs-lit-demo>
+
+## Nested fields
+
+A dot in a field `name` stores a nested object in the form publisher, and the body is sent with the same shape.
+
+<sonic-code>
+  <template>
+    <sonic-scope formDataProvider="submit-example-dot-notation">
+      <div class="grid grid-cols-2 gap-4">
+        <sonic-input label="Passenger" name="passenger.name" value="Ada Lindqvist"></sonic-input>
+        <sonic-input label="Seat" name="passenger.seat" value="2A"></sonic-input>
+      </div>
+    </sonic-scope>
+  </template>
+</sonic-code>
+
+<sonic-code language="typescript">
+  <template>
+{ passenger: { name: "Ada Lindqvist", seat: "2A" } }
+  </template>
+</sonic-code>
+
+## API reference
+
+| Attribute | Values | Description |
+|-----------|--------|-------------|
+| `onClick` | boolean | Sends on click inside the element |
+| `onEnterKey` | boolean | Sends on Enter in a focused field inside the element |
+| `method` | `post` · `put` · `patch` · `delete` · `get` (default `post`) | HTTP method. `get` sends the fields as a query string |
+| `endPoint` | string | Request path. Overrides the ancestor `dataProvider` |
+| `submitResultKey` | string | Dot path of the response part written to `submitResultDataProvider` |
+| `sendAsFormData` | boolean | Sends `multipart/form-data` instead of JSON |
+| `native` | boolean | Fills and submits the closest `<form>` instead of calling the API |
+| `name` · `value` | string | Submit button pair added to a native form submission |
+| `disabled` | boolean | Ignores triggers. Set while a request runs |
+| `usernameKey` · `passwordKey` | string (default `username` · `password`) | After a successful response, fields stored with the Credential Management API when both are present |
+
+| Ancestor attribute | Description |
+|--------------------|-------------|
+| `serviceURL` | API base URL |
+| `dataProvider` | Default request path |
+| `formDataProvider` | Publisher sent as the body. Required |
+| `submitResultDataProvider` | Publisher receiving the result |
+| `headersDataProvider` | Publisher sent as request headers |
+| `clearedDataOnSuccess` | Space-separated publisher ids reset to `{}` after a result |
+
+When the form or headers publisher has `needsCaptchaValidation`, the request waits for a [Captcha](/core/components/ui/captcha) token. A network failure produces a result with an error message in `messages`.
+
+| Event | Detail |
+|-------|--------|
+| `submit` | The result (after `submitResultKey`) |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Fields and buttons that trigger the submission |

package/docs/src/core/components/functional/subscriber/subscriber.md

@@ -0,0 +1,91 @@
+# Subscriber
+
+La mixin Subscriber permet lier un composant à un publisher.
+La liaison à un publisher se fait via l'attribut *dataProvider* du composant qui représente ce que l'on obtient en appellant PublisherManager.get(dataProvider).
+
+Les propriétés du composant sont automatiquement remplies avec les propriétés du même nom dans les données du publisher.
+
+Le composant est automatiquement mis à jour lorsque les données du publisher sont mises à jour.
+
+## DataProvider
+
+**Id** of the dataProvider that the component will **subscribe** to
+
+<sonic-code>
+  <template>
+    <sonic-subscriber dataProvider="id_that_the_subsriber_will_subscribe_to" debug>
+      <sonic-button> custom dataProvider id</sonic-button>
+    </sonic-subscriber>
+    <sonic-subscriber debug>
+      <sonic-button> default id : pageHTML</sonic-button>
+    </sonic-subscriber>
+  </template>
+</sonic-code>
+
+## Props
+
+Data object (json) that will be passed to the dataProvider
+
+<sonic-code>
+  <template>
+    <sonic-subscriber props='{"data":"Hello world"}' debug>
+      <sonic-button> Hover to see the data</sonic-button>
+    </sonic-subscriber>
+  </template>
+</sonic-code>
+
+
+## Debug
+
+**Helper**, display the data held by the dataProvider in a floating div
+
+<sonic-code>
+  <template>
+    <sonic-subscriber debug>
+      <sonic-button> see the dataProvider'data </sonic-button>
+    </sonic-subscriber>
+  </template>
+</sonic-code>
+
+
+## NoAutofill
+
+<sonic-alert status="info">Docs coming soon</sonic-alert>
+
+## PropertyMap
+
+<sonic-alert status="info">Docs coming soon</sonic-alert>
+
+Permet de mapper un nom de propriété de donnée source vers une propriété du subscriber à la volée
+
+## BindPublisher
+
+<sonic-alert status="info">Docs coming soon</sonic-alert>
+
+On peut utiliser cette fonction pour lier un publisher spécifique au composant si besoin.
+
+## instanceCounter
+
+<sonic-alert status="info">Docs coming soon</sonic-alert>
+
+## Publisher
+
+<sonic-alert status="info">Docs coming soon</sonic-alert>
+
+## Args
+
+<sonic-alert status="info">Docs coming soon</sonic-alert>
+ 
+## NoShadowDom
+
+Par défaut on crée un shadow dom mais on peut demander à ne pas en avoir via cette propriété et un attribut associé.  
+Cela se fait à l'initialisation uniquement et n'est pas modifiable lors de la vie du composant.
+
+
+## Other attributes gathered from subscriber.stories.ts
+
+styles ??  
+title ??  
+_props ??  
+onAssign ??  
+defferedDebug ??

package/docs/src/core/components/functional/translation/translation.md

@@ -0,0 +1,38 @@
+# Translation
+
+**`sonic-t`** renders a translated label in plain HTML. It is the markup counterpart of the [t()](/docs/directives/t) directive and shares its endpoint, batching and cache.
+
+## Basic example
+
+Set `serviceURL` and `wordingProvider` on an ancestor, then give each `sonic-t` a `key`. Labels requested together are fetched in one call.
+
+<sonic-code>
+  <template>
+    <div serviceURL="/docs-mock-api" wordingProvider="wording/labels?lang=fr">
+      <p><sonic-t key="flight.boarding"></sonic-t></p>
+    </div>
+  </template>
+</sonic-code>
+
+## HTML labels
+
+The label is escaped by default. Add `unsafeHTML` for labels that contain trusted markup.
+
+<sonic-code>
+  <template>
+    <div serviceURL="/docs-mock-api" wordingProvider="wording/labels?lang=fr">
+      <p><sonic-t key="flight.gate" unsafeHTML></sonic-t></p>
+    </div>
+  </template>
+</sonic-code>
+
+Endpoint format, reloading on `<html lang>` change and `wordingVersionProvider` are described on the [t()](/docs/directives/t) page.
+
+## API reference
+
+| Attribute | Values | Description |
+|-----------|--------|-------------|
+| `key` | string | Label key. Renders nothing while empty |
+| `unsafeHTML` | boolean | Renders the label as HTML instead of text |
+
+No slots.

package/docs/src/core/components/functional/value/value.md

@@ -0,0 +1,47 @@
+# Value
+
+**`sonic-value`** prints one value from a data provider and updates when it changes. Set `dataProvider` (or inherit it from an ancestor) and point `key` at the field to show.
+
+## Basic example
+
+The form below writes `cabin` into the `value-checkin` provider; `sonic-value` reads it back.
+
+<sonic-code>
+  <template>
+    <div formDataProvider="value-checkin" class="flex flex-wrap gap-4 mb-3">
+      <sonic-radio name="cabin" value="Economy" checked>Economy</sonic-radio>
+      <sonic-radio name="cabin" value="Business">Business</sonic-radio>
+      <sonic-radio name="cabin" value="First">First</sonic-radio>
+    </div>
+    <p>Cabin: <sonic-value dataProvider="value-checkin" key="cabin"></sonic-value></p>
+  </template>
+</sonic-code>
+
+The value is rendered as HTML, not escaped: only display trusted data. When the value is an object or is missing, nothing is printed.
+
+## Nested key
+
+`key` accepts a dot path, array indexes included.
+
+<sonic-code>
+  <template>
+    <sonic-subscriber dataProvider="value-passenger" props='{"passenger":{"name":"Ada Lindqvist","seats":[{"number":"2A"}]}}'></sonic-subscriber>
+    <p>
+      <sonic-value dataProvider="value-passenger" key="passenger.name"></sonic-value>
+      is seated in
+      <sonic-value dataProvider="value-passenger" key="passenger.seats.0.number"></sonic-value>
+    </p>
+  </template>
+</sonic-code>
+
+## API reference
+
+| Attribute | Values | Description |
+|-----------|--------|-------------|
+| `dataProvider` | string | Provider to read. Inherited from the closest ancestor when omitted |
+| `key` | string (required) | Dot path of the value in the provider |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Content rendered after the value |
+| `prefix` · `suffix` | Rendered around the default slot, after the value |

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

@@ -0,0 +1,186 @@
+# Alert
+
+Alerts **surface important feedback** inline—errors, confirmations, or contextual help. Use **`label`** / **`text`** for simple copy, or the **default slot** for rich content (links, buttons). Set **`announce`** when the message appears after an action so screen readers pick it up.
+
+## Basic example
+
+<sonic-code>
+  <template>
+    <sonic-alert status="error" label="Gate change" text="CN 001 now departs from gate B12" background></sonic-alert>
+  </template>
+</sonic-code>
+
+## Status
+
+Color and icon follow `status`. With no `status`, behavior is `default`.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-4">
+      <sonic-alert label="Default">CN 001 · CDG → JFK.</sonic-alert>
+      <sonic-alert status="success" label="Success">CN 001 has landed at JFK.</sonic-alert>
+      <sonic-alert status="error" label="Error">CN 001 is cancelled.</sonic-alert>
+      <sonic-alert status="warning" label="Warning">Turbulence expected over the Atlantic.</sonic-alert>
+      <sonic-alert status="info" label="Info">Boarding starts in 20 minutes.</sonic-alert>
+    </div>
+  </template>
+</sonic-code>
+
+## Accessibility (`announce`)
+
+By default, an alert already in the DOM is **not** announced (no `role` / `aria-live`). Set **`announce`** when the message appears **after** user action (API response, validation, etc.): screen readers get `role="alert"` for `error`, otherwise `role="status"` and `aria-live="polite"`.
+
+`sonic-alert-messages` sets `announce` on every rendered alert.
+
+<sonic-code>
+  <template>
+    <sonic-alert announce status="success" label="Checked in" text="Your boarding pass is ready."></sonic-alert>
+  </template>
+</sonic-code>
+
+## Content and icon
+
+`label` and `text` accept plain text only. The default slot is rendered after `text`. Use the **`icon`** slot to replace the default `sonic-icon`. **`noIcon`** hides the icon.
+
+<sonic-code>
+  <template>
+    <sonic-alert status="info" noIcon label="No icon" text="Cruising altitude reached."></sonic-alert>
+  </template>
+</sonic-code>
+
+## Custom icon slot
+
+Project any markup into **`slot="icon"`** (icon, image, custom component). Keep it decorative with `aria-hidden="true"` when the message text already conveys meaning.
+
+<sonic-code>
+  <template>
+    <sonic-alert status="success" label="Upgrade confirmed" background>
+      <sonic-icon slot="icon" library="iconoir" name="trophy" aria-hidden="true"></sonic-icon>
+      You are now seated in first class.
+    </sonic-alert>
+  </template>
+</sonic-code>
+
+## Size
+
+Default size is `md` (omit the `size` attribute). `inherit` follows the parent font size.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-4">
+      <sonic-alert status="error" label="Delayed" size="2xs">
+        CN 001 departure moved to 18:40.
+      </sonic-alert>
+      <sonic-alert status="error" label="Delayed" size="xs">
+        CN 001 departure moved to 18:40.
+      </sonic-alert>
+      <sonic-alert status="error" label="Delayed" size="sm">
+        CN 001 departure moved to 18:40.
+      </sonic-alert>
+      <sonic-alert status="error" label="Delayed">
+        CN 001 departure moved to 18:40.
+      </sonic-alert>
+      <sonic-alert status="error" label="Delayed" size="lg">
+        CN 001 departure moved to 18:40.
+      </sonic-alert>
+      <sonic-alert status="error" label="Delayed" size="xl">
+        CN 001 departure moved to 18:40.
+      </sonic-alert>
+      <sonic-alert status="error" label="Delayed" size="2xl">
+        CN 001 departure moved to 18:40.
+      </sonic-alert>
+    </div>
+  </template>
+</sonic-code>
+
+## Alert with link
+
+Rich content in the slot (buttons, links).
+
+<sonic-code>
+  <template>
+    <sonic-alert status="info" label="Gate change">
+      CN 001 now departs from gate B12<br />
+      <div class="flex gap-2 mt-1">
+        <sonic-button variant="outline" type="info" size="xs">View flight</sonic-button>
+        <sonic-button variant="ghost" type="info" size="xs">Dismiss</sonic-button>
+      </div>
+    </sonic-alert>
+  </template>
+</sonic-code>
+
+## Background
+
+Tinted background from the `status` color (`color-mix` on `currentColor`).
+
+<sonic-code>
+  <template>
+    <div class="grid gap-4">
+      <sonic-alert background label="Flight update">Boarding is now open at gate B12.</sonic-alert>
+      <sonic-alert status="success" background label="Flight update">
+        Boarding is now open at gate B12.
+      </sonic-alert>
+      <sonic-alert status="error" background label="Flight update">
+        Boarding is now open at gate B12.
+      </sonic-alert>
+      <sonic-alert status="warning" background label="Flight update">
+        Boarding is now open at gate B12.
+      </sonic-alert>
+      <sonic-alert status="info" background label="Flight update">
+        Boarding is now open at gate B12.
+      </sonic-alert>
+    </div>
+  </template>
+</sonic-code>
+
+## Dismissible
+
+`dismissible` removes the alert from the DOM when the close control is clicked (i18n aria label). **`dismissible`** and **`background`** are independent: without `background`, close sits at the end of the row; with `background`, top-right.
+
+<sonic-code>
+  <template>
+    <sonic-alert status="info" class="mb-3" dismissible label="Baggage claim moved to belt 4.">
+    </sonic-alert>
+    <sonic-alert class="mb-3" dismissible background label="Flight update">
+      Boarding is now open at gate B12.
+    </sonic-alert>
+  </template>
+</sonic-code>
+
+## Dismiss forever
+
+With **`dismissForever`**, dismissal is stored in `localStorage` (key `sonic-alert-dismissed`). A stable **`id`** on the element is **required**; without `id`, a warning is logged and nothing is persisted.
+
+<sonic-code>
+  <template>
+    <sonic-alert
+      class="mb-3"
+      dismissible
+      background
+      dismissForever
+      label="Flight update"
+      id="addressUniqueId"
+    >
+      Boarding is now open at gate B12.
+    </sonic-alert>
+  </template>
+</sonic-code>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `status` | `default` (default) · `info` · `success` · `warning` · `error` | Color and default icon |
+| `label` | string | Title (plain text) |
+| `text` | string | Short body (plain text), rendered before the slot |
+| `size` | `2xs` … `2xl` (default `md`) · `inherit` | Corner radius and typography |
+| `background` | boolean | Tinted background (`color-mix` on status color) |
+| `dismissible` | boolean | Close control; removes the element from the DOM |
+| `dismissForever` | boolean | Persists dismissal in `localStorage`; requires **`id`** |
+| `noIcon` | boolean | Hides the icon (including custom `icon` slot content) |
+| `announce` | boolean | `role="alert"` / `aria-live` for dynamically injected content |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Message body (HTML, actions); rendered after `text` |
+| `icon` | Replaces the default `sonic-icon` |

package/docs/src/core/components/ui/alert-messages/alert-messages.md

@@ -0,0 +1,85 @@
+# Alert messages
+
+**`sonic-alert-messages`** renders a vertical stack of **`sonic-alert`** items from a **`messages`** array on a linked **data provider** (typical pattern: **`submitResultDataProvider`** after a form submit). Only entries with **`type="public"`** are shown. Each alert gets **`announce`** so screen readers pick up feedback after the request.
+
+## With submit result
+
+Bind **`dataProvider`** to the same publisher as **`submitResultDataProvider`**. API **`messages`** entries need **`type`**: **`public`**, plus **`content`** and optional **`status`** (`warning` · `success` · `error` · `info`).
+
+<sonic-code>
+  <template>
+    <sonic-scope
+      serviceURL="/docs-mock-api"
+      formDataProvider="submit-example"
+      submitResultDataProvider="submit-example-result"
+    >
+      <sonic-alert-messages dataProvider="submit-example-result" background class="mb-4"></sonic-alert-messages>
+      <div class="grid gap-4 max-w-md">
+        <sonic-input name="email" type="email" label="Email" value=""></sonic-input>
+        <sonic-input name="password" type="password" label="Password" value=""></sonic-input>
+        <sonic-submit endPoint="api/register" onClick>
+          <sonic-button type="primary">Submit (empty fields → error messages)</sonic-button>
+        </sonic-submit>
+      </div>
+    </sonic-scope>
+  </template>
+</sonic-code>
+
+## Shared alert props
+
+**`size`** · **`background`** and **`noIcon`** apply to every rendered **`sonic-alert`** in the list.
+
+<sonic-code>
+  <template>
+    <sonic-button
+      size="sm"
+      variant="outline"
+      class="mb-3"
+      onclick="SonicPublisherManager.get('submit-example-result').set({ messages: [{ type: 'public', content: 'Compact inline feedback without icons.', status: 'info' }] })"
+    >
+      Load sample messages
+    </sonic-button>
+    <sonic-alert-messages
+      dataProvider="submit-example-result"
+      size="sm"
+      background
+      noIcon
+    ></sonic-alert-messages>
+  </template>
+</sonic-code>
+
+## Message shape
+
+Example JSON on the result publisher (or API response merged into it):
+
+<sonic-code language="typescript">
+  <template>
+{
+  "messages": [
+    {
+      "type": "public",
+      "content": "The product has been added to your cart",
+      "status": "success"
+    }
+  ]
+}
+  </template>
+</sonic-code>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `dataProvider` | publisher id | Source object; **`messages`** array is auto-filled via **Subscriber** |
+| `size` | `2xs` … `2xl` (default `md`) | Passed to each **`sonic-alert`** |
+| `background` | boolean | Tinted background on each alert |
+| `noIcon` | boolean | Hides icons on each alert |
+| `messages` | `Message[]` | Usually set by the publisher; each item uses **`content`** as alert **`text`** |
+
+| Message field | Values | Description |
+|---------------|---------|-------------|
+| `type` | `public` | Required for the message to render |
+| `content` | string | Alert body (**`text`** on **`sonic-alert`**) |
+| `status` | `warning` · `success` · `error` · `info` | Alert **`status`**; defaults to **`default`** when omitted |
+
+No slots — alerts are generated from **`messages`**.