@supersoniks/concorde 5.0.3 → 5.0.5

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

@@ -1,8 +1,6 @@
 # Badge
 
-A **non-interactive** pill for labels, counts, or highlights (counter, status, category). The API mirrors `sonic-button` (`type`, `variant`, `size`) without focus or click states.
-
-Colors come from theme tokens (`--sc-primary`, `--sc-danger`, …) or the semantic `type` values below. 
+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
 
@@ -24,9 +22,9 @@ Colors come from theme tokens (`--sc-primary`, `--sc-danger`, …) or the semant
 
 ## Variant
 
-`outline` — border and text in the `type` color. `ghost` — text only, no padding (except in forced-colors mode).
+Default **`variant`** is filled. **`outline`** — border and text in the `type` color. **`ghost`** — text only, no padding (except in forced-colors mode).
 
-## Outline
+### Outline
 
 <sonic-code>
   <template>
@@ -42,7 +40,7 @@ Colors come from theme tokens (`--sc-primary`, `--sc-danger`, …) or the semant
   </template>
 </sonic-code>
 
-## Ghost
+### Ghost
 
 <sonic-code>
   <template>
@@ -173,3 +171,18 @@ Count inside a button (`slot="suffix"`) or a badge absolutely positioned on a bu
     </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 |

package/src/core/components/ui/badge/badge.ts

@@ -4,7 +4,11 @@ import {
   fontSize,
   Size,
 } from "@supersoniks/concorde/core/components/ui/_css/size";
-import { typesBg } from "@supersoniks/concorde/core/components/ui/_css/type";
+import {
+  typesBg,
+  DefaultType,
+  typeColorInvert,
+} from "@supersoniks/concorde/core/components/ui/_css/type";
 
 const tagName = "sonic-badge";
 /**
@@ -17,6 +21,7 @@ export class Badge extends LitElement {
   static styles = [
     fontSize,
     typesBg,
+    typeColorInvert,
     css`
       :host {
         --sc-_gap: 0.3em;
@@ -111,14 +116,8 @@ export class Badge extends LitElement {
    * Le type change surtout la couleur composant
    */
   @property({ type: String, reflect: true })
-  type:
-    | "default"
-    | "primary"
-    | "warning"
-    | "danger"
-    | "success"
-    | "info"
-    | "neutral" = "default";
+  type: DefaultType = "default";
+
   /**
    * Le composant par defaut sans se paramètre à forte afordance
    * * ghost : composant super léger visuellement

package/src/core/components/ui/button/button.ts

@@ -18,6 +18,7 @@ import {
 } from "@supersoniks/concorde/core/components/ui/_css/size";
 import { PublisherManager } from "@supersoniks/concorde/utils";
 import { Route } from "@supersoniks/concorde/core/utils/route";
+import { Align } from "../_css/align";
 
 export type ButtonType =
   | "default"
@@ -458,10 +459,7 @@ export class Button extends FormCheckable(FormElement(LitElement)) {
   /**
    * Propriété text-align du bouton
    */
-  @property({ type: String, reflect: true }) align?:
-    | "right"
-    | "left"
-    | "center";
+  @property({ type: String, reflect: true }) align?: Align;
 
   /**
    * Propriété min-width du bouton
@@ -647,17 +645,9 @@ export class Button extends FormCheckable(FormElement(LitElement)) {
         @click=${this.handleChange}
         @pointerdown=${this.handleRepeatStart}
       >
-        <slot
-          @slotchange=${this.onSlotChange}
-          part="prefix"
-          name="prefix"
-        ></slot>
-        <slot part="main" class="main-slot"></slot>
-        <slot
-          @slotchange=${this.onSlotChange}
-          part="suffix"
-          name="suffix"
-        ></slot>
+        <slot @slotchange=${this.onSlotChange} name="prefix"></slot>
+        <slot class="main-slot"></slot>
+        <slot @slotchange=${this.onSlotChange} name="suffix"></slot>
         ${this.loading == true
           ? html`<sonic-icon name="loader" class="loader"></sonic-icon>`
           : ""}

package/src/core/components/ui/captcha/captcha.md

@@ -1,12 +1,71 @@
 # Captcha
 
+**`sonic-captcha`** embeds an **ALTCHA** widget and wires **`captchaToken`** / **`needsCaptchaValidation`** on the ancestor **`formDataProvider`** (or **`headersDataProvider`**). **`sonic-submit`** waits for a token before sending when validation is required. The widget loads only on **HTTPS**; on plain HTTP the host renders nothing.
+
+> Live widget calls the Supersoniks challenge service — not part of [docs mock API](#docs/_misc/docs-mock-api.md/docs-mock-api).
+
+## Basic example
+
+Wrap the form scope and place **`sonic-submit`** in the default slot so the challenge appears above the action.
+
+<sonic-code>
+  <template>
+    <sonic-scope
+      serviceURL="/docs-mock-api"
+      formDataProvider="captcha-docs-form"
+      submitResultDataProvider="captcha-docs-result"
+    >
+      <sonic-captcha formDataProvider="captcha-docs-form">
+        <sonic-input class="mb-3" name="email" type="email" label="Email" value="demo@example.com"></sonic-input>
+        <sonic-submit endPoint="api/register" onClick>
+          <sonic-button type="primary">Submit with captcha</sonic-button>
+        </sonic-submit>
+      </sonic-captcha>
+    </sonic-scope>
+  </template>
+</sonic-code>
+
+## Encrypted site key
+
+Optional **`key`** skips client-side key generation. When omitted, the component derives an encrypted key on connect (after **`generateEncryptedKey`**).
+
 <sonic-code>
   <template>
-  <sonic-captcha formDataProvider="captchaTestDataProvider" key="6Leq5V0iAAAAAB-41DlWN335jDlcIuXmhNtdd00t">
-    <sonic-submit serviceURL="/docs-mock-api" endPoint="api/unknown" onclick>
-      <sonic-button  class="mt-4">Submit with captcha</sonic-button>
-    </sonic-submit>
-  </sonic-captcha>
+    <sonic-captcha formDataProvider="captcha-docs-form" key="6Leq5V0iAAAAAB-41DlWN335jDlcIuXmhNtdd00t">
+      <sonic-button type="outline" disabled>Complete the challenge above to enable submit</sonic-button>
+    </sonic-captcha>
   </template>
 </sonic-code>
-                
+
+## Form publisher fields
+
+On connect (HTTPS only), **`needsCaptchaValidation`** is set to **`true`** and **`captchaToken`** is cleared. When the ALTCHA widget reaches **`verified`**, **`captchaToken`** is written on the form publisher and **`sonic-captcha-validate`** fires (`detail.valid` · **`detail.state`** · optional **`detail.token`** / **`detail.payload`**). **`sonic-submit`** still listens for **`request_token`** to refresh the token immediately before send.
+
+<sonic-code language="typescript">
+  <template>
+{
+  needsCaptchaValidation: true,
+  captchaKey: "…",
+  captchaToken: "…"
+}
+  </template>
+</sonic-code>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `formDataProvider` | publisher id | Same as ancestor form scope; reads/writes **`needsCaptchaValidation`** · **`captchaKey`** · **`captchaToken`** |
+| `key` | string | ALTCHA site key; auto-generated when empty |
+| `action` | string | Optional action name forwarded to the widget |
+| `zIndex` | number (default `9999`) | Stacking for the challenge overlay |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Form actions (typically **`sonic-submit`** and fields) rendered below the widget |
+
+| Event | Description |
+|-------|-------------|
+| `sonic-captcha-validate` | Fired when **`state`** is **`verified`** · **`error`** or **`expired`**; **`detail.valid`** is **`true`** only for **`verified`** |
+
+Related: [Submit](#core/components/functional/submit/submit.md/submit) — **`needsCaptchaValidation`** and deferred send.

package/src/core/components/ui/card/card.md

@@ -1,16 +1,27 @@
 # Card
 
-A **surface** for grouped content: padding, radius, shadow, and semantic **`type`** colors via shared theme tokens. Compose **`sonic-card-header`**, **`sonic-card-main`**, and **`sonic-card-footer`** inside the card, or put any markup in the default slot.
+Cards **group related content** on a padded surface with radius, theme **`type`** colors, and elevation. Default **`shadow`** is `lg`. Compose **`sonic-card-header`** / **`sonic-card-main`** / **`sonic-card-footer`**, or place any markup in the default slot.
 
-Default **`type`** is `base` (page background). Use `light` for a subtle gray panel, `invert` / `neutral` for high-contrast blocks, and `primary`, `info`, `success`, `warning`, or `danger` for tinted surfaces (divider tokens apply on colored types).
+## Basic example
+
+<sonic-code>
+  <template>
+    <sonic-card class="max-w-sm">
+      <p class="m-0">Related content on a raised surface.</p>
+    </sonic-card>
+  </template>
+</sonic-code>
 
 ## Type
 
+Default **`type`** is `base`. **`default`** and **`light`** share the same surface tokens.
+
 <sonic-code>
   <template>
     <div class="flex flex-wrap gap-3">
       <sonic-card type="base" class="min-w-[8rem]">Base</sonic-card>
       <sonic-card type="light" class="min-w-[8rem]">Light</sonic-card>
+      <sonic-card type="default" class="min-w-[8rem]">Default</sonic-card>
       <sonic-card type="primary" class="min-w-[8rem]">Primary</sonic-card>
       <sonic-card type="info" class="min-w-[8rem]">Info</sonic-card>
       <sonic-card type="success" class="min-w-[8rem]">Success</sonic-card>
@@ -22,9 +33,26 @@ Default **`type`** is `base` (page background). Use `light` for a subtle gray pa
   </template>
 </sonic-code>
 
+## Shadow
+
+Set **`shadow`** to control elevation. Default is `lg`.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-4 sm:grid-cols-2 max-w-2xl">
+      <sonic-card shadow="none" class="min-h-[5rem] flex items-center justify-center">None</sonic-card>
+      <sonic-card shadow="sm" class="min-h-[5rem] flex items-center justify-center">Small</sonic-card>
+      <sonic-card shadow="md" class="min-h-[5rem] flex items-center justify-center">Medium</sonic-card>
+      <sonic-card shadow="lg" class="min-h-[5rem] flex items-center justify-center">Large</sonic-card>
+    </div>
+  </template>
+</sonic-code>
+
 ## Header
 
-Quick titles with **`label`** and **`description`** attributes, or full control through the default slot. **`slot="suffix"`** aligns badges or actions on the right; suffix content does not shrink when the title wraps.
+Quick titles with **`label`** and **`description`**, or full control through the default slot. **`slot="suffix"`** aligns badges or actions on the right; suffix content does not shrink when the title wraps.
+
+`label` and `description` accept HTML (rendered as markup). Prefer plain text when possible; use **`sonic-card-header-description`** or the default slot for structured content.
 
 <sonic-code>
   <template>
@@ -42,7 +70,7 @@ Quick titles with **`label`** and **`description`** attributes, or full control
           <sonic-card-header-description>
             Choose what we email you about.
           </sonic-card-header-description>
-          <sonic-badge slot="suffix"  type="warning" size="xs">3 new</sonic-badge>
+          <sonic-badge slot="suffix" type="warning" size="xs">3 new</sonic-badge>
         </sonic-card-header>
       </sonic-card>
 
@@ -77,8 +105,6 @@ Quick titles with **`label`** and **`description`** attributes, or full control
   </template>
 </sonic-code>
 
-`label` and `description` accept HTML (rendered as markup). Prefer plain text when possible; use the slot for structured content.
-
 ## Main
 
 Optional wrapper for the primary content area (typography, media, forms).
@@ -110,7 +136,7 @@ Optional footer for actions, metadata, or secondary text.
         <p class="m-0">This project and all of its data will be removed permanently.</p>
       </sonic-card-main>
       <sonic-card-footer>
-      <sonic-divider></sonic-divider>
+        <sonic-divider></sonic-divider>
         <div class="flex flex-wrap gap-2 justify-end">
           <sonic-button variant="ghost" size="sm">Cancel</sonic-button>
           <sonic-button type="danger" size="sm">Delete</sonic-button>
@@ -128,14 +154,14 @@ Header, media, body, and footer together.
   <template>
     <sonic-card class="max-w-md">
       <sonic-card-header label="Featured route" description="San Francisco → New York">
-        <sonic-icon slot="suffix" library="iconoir" name="airplane"></sonic-icon>
+        <sonic-icon slot="suffix" library="iconoir" name="airplane" aria-hidden="true"></sonic-icon>
       </sonic-card-header>
       <sonic-card-main>
         <sonic-image
           rounded
           ratio="16/9"
-          src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=800&q=80"
-          alt=""
+          src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+          alt="Airplane wing above the clouds"
         ></sonic-image>
         <p class="mb-0">
           Nonstop flight with flexible dates. Prices shown include taxes and fees.
@@ -150,3 +176,40 @@ Header, media, body, and footer together.
     </sonic-card>
   </template>
 </sonic-code>
+
+## API reference
+
+### `sonic-card`
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `type` | `base` (default) · `light` · `invert` · `default` · `primary` · `warning` · `danger` · `success` · `info` · `neutral` | Semantic background and text (`default` and `light` share the same surface) |
+| `shadow` | `none` · `sm` · `md` · `lg` (default `lg`) | Elevation on the card surface |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Free-form content (header, main, footer, or direct markup) |
+
+### `sonic-card-header`
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `label` | HTML | Title (rendered as markup) |
+| `description` | HTML | Subtitle below the title |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Custom title / description when attributes are not enough |
+| `suffix` | Actions or badges aligned on the right (does not shrink) |
+
+### `sonic-card-header-description`
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Subtitle text; styled below the title when slotted in **`sonic-card-header`** |
+
+### `sonic-card-main` · `sonic-card-footer`
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Primary content (`main`) or actions / metadata (`footer`) |

package/src/core/components/ui/card/card.ts

@@ -3,13 +3,15 @@ import { customElement, property } from "lit/decorators.js";
 import "@supersoniks/concorde/core/components/ui/card/card-header";
 import "@supersoniks/concorde/core/components/ui/card/card-main";
 import "@supersoniks/concorde/core/components/ui/card/card-footer";
-import { typesBg } from "../_css/type";
+import { CardType, typesBg } from "../_css/type";
+import { Shadow, shadowable } from "../_css/shadow";
 
 const tagName = "sonic-card";
 @customElement(tagName)
 export class Card extends LitElement {
   static styles = [
     typesBg,
+    shadowable,
     css`
       * {
         box-sizing: border-box;
@@ -19,46 +21,46 @@ export class Card extends LitElement {
         --sc-_color: var(--sc-base-content, #000);
         --sc-_bg: var(--sc-base, #fff);
         --sc-_rounded: var(--sc-rounded-lg);
-        --sc-_shadow: var(--sc-shadow-lg);
+        --sc-_border-color: transparent;
+        --sc-_border-width: var(--sc-form-border-width);
+        display: block;
+        background: transparent;
         -webkit-print-color-adjust: exact;
       }
 
+      .shadowable {
+        padding: var(--sc-_padding);
+        background-color: var(--sc-_bg);
+        border-radius: var(--sc-_rounded);
+        color: var(--sc-_color);
+        border: var(--sc-_border-width) solid var(--sc-_border-color);
+      }
+
       @media print {
         :host {
           page-break-inside: avoid;
           break-inside: avoid;
+        }
+        .shadowable {
           box-shadow: none !important;
           border: 1px solid var(--sc-base-200, rgba(0, 0, 0, 0.12));
         }
       }
-
-      :host {
-        display: block;
-        padding: var(--sc-_padding);
-        background-color: var(--sc-_bg);
-        border-radius: var(--sc-_rounded);
-        box-shadow: var(--sc-_shadow);
-        color: var(--sc-_color);
-      }
     `,
   ];
 
+  /**
+   * Ombre
+   */
+  @property({ type: String, reflect: true }) shadow: Shadow = "lg";
+
   /**
    * Le type change surtout la couleur composant
    */
   @property({ type: String, reflect: true })
-  type:
-    | "light"
-    | "primary"
-    | "warning"
-    | "danger"
-    | "success"
-    | "info"
-    | "neutral"
-    | "invert"
-    | "base" = "base";
+  type: CardType = "base";
 
   render() {
-    return html`<slot></slot> `;
+    return html`<div class="shadowable"><slot></slot></div>`;
   }
 }

package/src/core/components/ui/divider/divider.md

@@ -1,35 +1,129 @@
 # Divider
 
-## Default
+**`sonic-divider`** draws a horizontal or vertical rule with optional **centered label** copy. Use it to separate sections in forms, cards, and **`sonic-menu`**. Set **`label`** for simple HTML captions or use the **default slot** for richer markup; default **`align`** is **`center`** and default **`lineStyle`** is **`solid`**.
+
+## Basic example
+
+A bare divider is a full-width line with vertical margin. Omit **`size`** to use the host default spacing (`0.5rem` block margin).
+
 <sonic-code>
   <template>
-  <sonic-divider></sonic-divider>
+    <sonic-divider></sonic-divider>
   </template>
 </sonic-code>
 
-## Align
+## Label and align
+
+**`label`** renders inside the line (HTML via the same pipeline as other form labels). **`align`** controls which side(s) of the line remain visible: **`left`** drops the leading segment, **`right`** drops the trailing segment, **`center`** keeps both.
+
 <sonic-code>
   <template>
-  <sonic-divider label="Default centered label"></sonic-divider>
-  <sonic-divider label="Right" align="right"></sonic-divider>
-  <sonic-divider label="Center" align="center"></sonic-divider>
-  <sonic-divider label="Left" align="left"></sonic-divider>
+    <div class="grid gap-4">
+      <sonic-divider label="Default centered label"></sonic-divider>
+      <sonic-divider label="Left" align="left"></sonic-divider>
+      <sonic-divider label="Center" align="center"></sonic-divider>
+      <sonic-divider label="Right" align="right"></sonic-divider>
+    </div>
   </template>
 </sonic-code>
 
 ## Size
+
+**`size`** adjusts block margin and label font size. Values follow the shared Concorde scale (`2xs` … `2xl`).
+
+<sonic-code>
+  <template>
+    <div class="grid gap-4">
+      <sonic-divider size="2xs" label="2xs"></sonic-divider>
+      <sonic-divider size="xs" label="xs"></sonic-divider>
+      <sonic-divider size="sm" label="sm"></sonic-divider>
+      <sonic-divider size="md" label="md"></sonic-divider>
+      <sonic-divider size="lg" label="lg"></sonic-divider>
+      <sonic-divider size="xl" label="xl"></sonic-divider>
+      <sonic-divider size="2xl" label="2xl"></sonic-divider>
+    </div>
+  </template>
+</sonic-code>
+
+## Line style
+
+**`lineStyle`** sets the stroke of the rule (`solid` · `dashed` · `dotted`). In HTML use the reflected attribute **`linestyle`** (case-insensitive).
+
 <sonic-code>
   <template>
-  <sonic-divider size="xs" label="xs"></sonic-divider>
-  <sonic-divider size="sm" label="sm"></sonic-divider>
-  <sonic-divider size="md" label="md"></sonic-divider>
-  <sonic-divider size="lg" label="lg"></sonic-divider>
+    <div class="grid gap-4">
+      <sonic-divider label="Solid"></sonic-divider>
+      <sonic-divider label="Dashed" lineStyle="dashed"></sonic-divider>
+      <sonic-divider label="Dotted" lineStyle="dotted"></sonic-divider>
+    </div>
   </template>
 </sonic-code>
 
-## Custom
+## Vertical and margin
+
+Set **`vertical`** for a column rule (for example between toolbar actions). **`noMargin`** removes host margin when a parent layout already provides spacing.
+
 <sonic-code>
   <template>
-  <sonic-divider><span class="mr-2">Lorem ipsum dolor sit amet</span><sonic-badge type="danger">+25</sonic-badge></sonic-divider>
+    <div class="flex items-stretch gap-2" style="min-height: 3rem;">
+      <span class="flex items-center px-2">Before</span>
+      <sonic-divider vertical noMargin></sonic-divider>
+      <span class="flex items-center px-2">After</span>
+    </div>
   </template>
 </sonic-code>
+
+## Default slot
+
+Slotted content replaces or augments **`label`**. Useful for badges, icons, or mixed markup in menus.
+
+<sonic-code>
+  <template>
+    <sonic-divider>
+      <span class="mr-2">Section title</span>
+      <sonic-badge type="danger">+25</sonic-badge>
+    </sonic-divider>
+  </template>
+</sonic-code>
+
+
+## Inside typed cards
+
+On **`sonic-card`** with semantic **`type`** (`primary` · `warning` · `danger` · `info` · `success`), the rule uses the card’s text color at reduced opacity so it stays visible on tinted surfaces. **`label`** and slotted captions use the same foreground color as surrounding copy.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-4 max-w-xl">
+      <sonic-card type="danger">
+        <div>This action cannot be undone.</div>
+        <sonic-divider label="Affected resources"></sonic-divider>
+        <ul class="m-0 pl-5 text-sm">
+          <li>Project files</li>
+          <li>Shared links</li>
+        </ul>
+      </sonic-card>
+      <sonic-card type="info">
+        <div>Maintenance is scheduled for tonight.</div>
+        <sonic-divider></sonic-divider>
+        <div class="opacity-60">Expected downtime: about 15 minutes.</div>
+      </sonic-card>
+    </div>
+  </template>
+</sonic-code>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `label` | string (HTML) | Caption centered on the rule; combined with default-slot content when both are set |
+| `align` | `left` · `center` · `right` (default `center`) | Hides the leading or trailing line segment for left/right alignment |
+| `size` | `2xs` · `xs` · `sm` · `md` · `lg` · `xl` · `2xl` · `inherit` | Vertical margin and label `font-size`; omit for host defaults |
+| `lineStyle` | `solid` · `dashed` · `dotted` (default `solid`) | Stroke style of the rule (HTML attribute `linestyle`) |
+| `vertical` | boolean | Renders a vertical rule; swap block/inline margins |
+| `noMargin` | boolean | Sets host margin to `0` |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Label markup when **`label`** is insufficient or empty |
+
+The inner flex container exposes **`part="divider"`** for theme overrides.