@supersoniks/concorde 5.1.1 → 5.1.3-immutable.1

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/value/value.md

@@ -0,0 +1,35 @@
+# Value
+
+Simply shows a value from a data provider.
+You can target sub data value using dot syntax.
+The value reacts to changes.
+
+* Below is a form that helps you to set a value for the field "preference" in the data target with id "value-example"
+<sonic-code>
+  <template>
+    <div formDataProvider="value-example">
+      which one do you prefer  ?
+      <sonic-radio name="preference" checked value="dogs"> Dogs</sonic-radio>
+      <sonic-radio name="preference" value="cats"> Cats</sonic-radio>
+    </div>
+  </template>
+</sonic-code>
+* Then you can see live value of the preference using this code :
+<sonic-code>
+  <template>
+  I prefer <sonic-value dataProvider="value-example" key="preference"></sonic-value> 
+  </template>
+</sonic-code>
+* If you have more complex data like this
+<sonic-code>
+  <template>
+    <sonic-subscriber dataProvider="value-example-2" props='{"my":{"complex":[{"data":"👋 Hi There"}]}}'></sonic-subscriber> 
+  </template>
+</sonic-code>
+* You can target it with the dot syntax
+<sonic-code>
+  <template>
+  <sonic-value dataProvider="value-example-2" key="my.complex.0.data"></sonic-value> 
+  </template>
+</sonic-code>
+

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

@@ -0,0 +1,196 @@
+# 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="Email error" text="This address is already in use" 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">This address is already in use.</sonic-alert>
+      <sonic-alert status="success" label="Success">This address is already in use.</sonic-alert>
+      <sonic-alert status="error" label="Error">This address is already in use.</sonic-alert>
+      <sonic-alert status="warning" label="Warning">This address is already in use.</sonic-alert>
+      <sonic-alert status="info" label="Info">This address is already in use.</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="Saved" text="Your changes were saved."></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="Informational message."></sonic-alert>
+  </template>
+</sonic-code>
+
+## Custom icon slot
+
+Project any markup into **`slot="icon"`** (emoji, 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="Achievement unlocked" background>
+      <span slot="icon" aria-hidden="true" class="text-lg leading-none">🎉</span>
+      You unlocked a new badge.
+    </sonic-alert>
+  </template>
+</sonic-code>
+
+## Sizes
+
+<sonic-code>
+  <template>
+    <div class="grid gap-4">
+      <sonic-alert status="error" label="Email error" size="2xs">
+        This address is already in use. Lorem ipsum dolor sit amet.
+      </sonic-alert>
+      <sonic-alert status="error" label="Email error" size="xs">
+        This address is already in use. Lorem ipsum dolor sit amet.
+      </sonic-alert>
+      <sonic-alert status="error" label="Email error" size="sm">
+        This address is already in use. Lorem ipsum dolor sit amet.
+      </sonic-alert>
+      <sonic-alert status="error" label="Email error">
+        This address is already in use. Lorem ipsum dolor sit amet.
+      </sonic-alert>
+      <sonic-alert status="error" label="Email error" size="lg">
+        This address is already in use. Lorem ipsum dolor sit amet.
+      </sonic-alert>
+      <sonic-alert status="error" label="Email error" size="xl">
+        This address is already in use. Lorem ipsum dolor sit amet.
+      </sonic-alert>
+      <sonic-alert status="error" label="Email error" size="2xl">
+        This address is already in use. Lorem ipsum dolor sit amet.
+      </sonic-alert>
+    </div>
+  </template>
+</sonic-code>
+
+## Alert with link
+
+Rich content in the slot (buttons, links).
+
+<sonic-code>
+  <template>
+    <sonic-alert status="info" label="New messages !">
+      You have 2 unread messages<br />
+      <div class="flex gap-2 mt-1">
+        <sonic-button variant="outline" type="info" size="xs">See messages</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="Lorem ipsum dolor">This address is already in use.</sonic-alert>
+      <sonic-alert status="success" background label="Lorem ipsum dolor">
+        This address is already in use.
+      </sonic-alert>
+      <sonic-alert status="error" background label="Lorem ipsum dolor">
+        This address is already in use.
+      </sonic-alert>
+      <sonic-alert status="warning" background label="Lorem ipsum dolor">
+        This address is already in use.
+      </sonic-alert>
+      <sonic-alert status="info" background label="Lorem ipsum dolor">
+        This address is already in use.
+      </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="This address is already in use.">
+    </sonic-alert>
+    <sonic-alert class="mb-3" dismissible background label="Lorem ipsum dolor">
+      This address is already in use.
+    </sonic-alert>
+    <sonic-alert status="success" class="mb-3" dismissible background label="Lorem ipsum dolor">
+      This address is already in use.
+    </sonic-alert>
+    <sonic-alert status="error" class="mb-3" dismissible background label="Lorem ipsum dolor">
+      This address is already in use.
+    </sonic-alert>
+    <sonic-alert status="warning" class="mb-3" dismissible background label="Lorem ipsum dolor">
+      This address is already in use.
+    </sonic-alert>
+    <sonic-alert status="info" class="mb-3" dismissible background label="Lorem ipsum dolor">
+      This address is already in use.
+    </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="Lorem ipsum dolor"
+      id="addressUniqueId"
+    >
+      This address is already in use.
+    </sonic-alert>
+  </template>
+</sonic-code>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `status` | `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` | 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`**.

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

@@ -0,0 +1,188 @@
+# Badge
+
+Badges are **compact, non-interactive** labels for status, counts, or categories. They mirror **`sonic-button`** styling (`type`, `variant`, `size`) without focus rings or click handling—use a button when the control should be actionable.
+
+## Type
+
+`default` — subtle background (`base-100`). `neutral` — dark fill (`base-content`) with light text, useful on light backgrounds.
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-badge>Default</sonic-badge>
+      <sonic-badge type="primary">Primary</sonic-badge>
+      <sonic-badge type="neutral">Neutral</sonic-badge>
+      <sonic-badge type="warning">Warning</sonic-badge>
+      <sonic-badge type="info">Info</sonic-badge>
+      <sonic-badge type="success">Success</sonic-badge>
+      <sonic-badge type="danger">Danger</sonic-badge>
+    </div>
+  </template>
+</sonic-code>
+
+## Variant
+
+Default **`variant`** is filled. **`outline`** — border and text in the `type` color. **`ghost`** — text only, no padding (except in forced-colors mode).
+
+### Outline
+
+<sonic-code>
+  <template>
+    <div class="flex items-center flex-wrap gap-3">
+      <sonic-badge variant="outline">Default</sonic-badge>
+      <sonic-badge variant="outline" type="primary">Primary</sonic-badge>
+      <sonic-badge variant="outline" type="neutral">Neutral</sonic-badge>
+      <sonic-badge variant="outline" type="warning">Warning</sonic-badge>
+      <sonic-badge variant="outline" type="info">Info</sonic-badge>
+      <sonic-badge variant="outline" type="success">Success</sonic-badge>
+      <sonic-badge variant="outline" type="danger">Danger</sonic-badge>
+    </div>
+  </template>
+</sonic-code>
+
+### Ghost
+
+<sonic-code>
+  <template>
+    <div class="flex items-center flex-wrap gap-3">
+      <sonic-badge variant="ghost">Default</sonic-badge>
+      <sonic-badge variant="ghost" type="primary">Primary</sonic-badge>
+      <sonic-badge variant="ghost" type="neutral">Neutral</sonic-badge>
+      <sonic-badge variant="ghost" type="warning">Warning</sonic-badge>
+      <sonic-badge variant="ghost" type="info">Info</sonic-badge>
+      <sonic-badge variant="ghost" type="success">Success</sonic-badge>
+      <sonic-badge variant="ghost" type="danger">Danger</sonic-badge>
+    </div>
+  </template>
+</sonic-code>
+
+## Size
+
+Default size is `md` (omit the `size` attribute). Typography and padding follow `sonic-button`.
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap items-center gap-2">
+      <sonic-badge size="2xs">2Xs</sonic-badge>
+      <sonic-badge size="xs">Xs</sonic-badge>
+      <sonic-badge size="sm">Sm</sonic-badge>
+      <sonic-badge>Md</sonic-badge>
+      <sonic-badge size="lg">Lg</sonic-badge>
+      <sonic-badge size="xl">Xl</sonic-badge>
+      <sonic-badge size="2xl">2Xl</sonic-badge>
+    </div>
+  </template>
+</sonic-code>
+
+## Prefix and suffix slots
+
+Icons or short text before / after the main label.
+
+<sonic-code>
+  <template>
+    <sonic-badge type="info" size="sm">
+      <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon>
+      Info
+    </sonic-badge>
+    <sonic-badge type="success">
+      Verified
+      <sonic-icon slot="suffix" name="check" library="iconoir"></sonic-icon>
+    </sonic-badge>
+  </template>
+</sonic-code>
+
+## Empty badges
+
+Badge with no text (visual dot). `min-width` / `min-height` keep a readable shape.
+
+<sonic-code>
+  <template>
+    <div class="flex items-center flex-wrap gap-3">
+      <sonic-badge type="danger" size="2xs"></sonic-badge>
+      <sonic-badge type="danger" size="xs"></sonic-badge>
+      <sonic-badge type="danger" size="sm"></sonic-badge>
+      <sonic-badge type="danger"></sonic-badge>
+      <sonic-badge type="danger" size="lg"></sonic-badge>
+      <sonic-badge type="danger" size="xl"></sonic-badge>
+      <sonic-badge type="danger" size="2xl"></sonic-badge>
+    </div>
+  </template>
+</sonic-code>
+
+## Ellipsis
+
+With `ellipsis`, long labels truncate. The parent must constrain width (`max-width`, grid, etc.).
+
+<sonic-code>
+  <template>
+    <div class="grid grid-cols-2 gap-4 max-w-xl">
+      <sonic-badge ellipsis size="sm" variant="outline">
+        <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon>
+        Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
+      </sonic-badge>
+      <sonic-badge ellipsis size="sm">
+        <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon>
+        Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
+      </sonic-badge>
+    </div>
+  </template>
+</sonic-code>
+
+## Badge in button
+
+Count inside a button (`slot="suffix"`) or a badge absolutely positioned on a button / icon.
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-4 items-center">
+      <sonic-button type="default">
+        Messages <sonic-badge slot="suffix" type="danger" size="xs">5</sonic-badge>
+      </sonic-button>
+      <div class="relative inline-block">
+        <sonic-button type="success" class="relative">My account</sonic-button>
+        <sonic-badge
+          type="danger"
+          size="xs"
+          class="absolute right-1 top-0 pe-none transform -translate-y-1/2"
+          >12</sonic-badge
+        >
+      </div>
+      <div class="relative inline-block">
+        <sonic-button type="neutral" shape="circle" variant="outline">
+          <sonic-icon library="iconoir" name="user"></sonic-icon>
+        </sonic-button>
+        <sonic-badge
+          type="danger"
+          size="xs"
+          class="absolute right-1 bottom-1 pe-none transform translate-y-1/2 translate-x-1/2"
+          >33</sonic-badge
+        >
+      </div>
+      <div class="relative inline-block">
+        <sonic-button type="neutral" shape="circle" variant="outline">
+          <sonic-icon library="iconoir" name="user"></sonic-icon>
+        </sonic-button>
+        <sonic-badge
+          type="danger"
+          size="xs"
+          class="absolute right-2 bottom-2 pe-none transform translate-y-1/2 translate-x-1/2"
+        ></sonic-badge>
+      </div>
+    </div>
+  </template>
+</sonic-code>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `type` | `default` (default) · `primary` · `neutral` · `warning` · `info` · `success` · `danger` | Semantic color (`--sc-*` tokens) |
+| `variant` | `default` (default) · `outline` · `ghost` | Filled, bordered, or text-only |
+| `size` | `2xs` … `2xl` (default `md`) | Typography and padding (aligned with **`sonic-button`**) |
+| `ellipsis` | boolean | Single-line truncation; parent must constrain width |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Main label |
+| `prefix` | Icon or short text before the label |
+| `suffix` | Icon or short text after the label |