@supersoniks/concorde 4.9.98-visual-stack.0 → 4.9.98-visual-stack.2

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

@@ -1,20 +1,28 @@
-import { html, LitElement, css, nothing } from "lit";
+import { html, LitElement, css, nothing, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import {
   fontSize,
   Size,
 } from "@supersoniks/concorde/core/components/ui/_css/size";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-const icon = {
-  warning: "warning-circled-outline",
-  success: "check-circled-outline",
-  error: "warning-circled-outline",
-  info: "info-empty",
-  default: "info-empty",
-};
-
-export type AlertStatus = keyof typeof icon;
+import {
+  StatusIconKey,
+  statusAriaLive,
+  statusAriaRole,
+  statusColor,
+  statusIcon,
+} from "@supersoniks/concorde/core/components/ui/_css/type";
+import {
+  isDismissed,
+  markDismissed,
+} from "@supersoniks/concorde/core/utils/dismissed";
+import {
+  resolveUiLabel,
+  uiAriaLabels,
+} from "@supersoniks/concorde/core/components/ui/_i18n/ui-aria-labels";
+
+export type AlertStatus = StatusIconKey;
 const tagName = "sonic-alert";
+const dismissStorageKey = "sonic-alert-dismissed";
 
 /**
  * Affiche un message en ligne.
@@ -24,66 +32,29 @@ const tagName = "sonic-alert";
 export class Alert extends LitElement {
   static styles = [
     fontSize,
+    statusColor,
     css`
       :host {
-        --sc_color: var(--sc-base-content, #000);
-        --sc_rounded: var(--sc-rounded);
-        --sc_fw: var(--sc-font-weight-base, 400);
-        --sc_fst: var(--sc-font-style-base, normal);
-        --sc_label-fw: bold;
-
-        font-weight: var(--sc_fw);
-        font-style: var(--sc_fst);
-        color: var(--sc_color);
+        --sc-_rounded: var(--sc-rounded);
         position: relative;
         display: flex;
         gap: 0.4em;
-        border-radius: var(--sc_rounded);
+        border-radius: var(--sc-_rounded);
       }
 
       .label {
-        font-weight: var(--sc_label-fw);
+        font-weight: bold;
         margin-bottom: 0.15em;
         display: block;
       }
 
-      :host([status="warning"]) {
-        --sc_color: var(--sc-warning, var(--sc-base-content, #000));
-      }
-      :host([status="error"]) {
-        --sc_color: var(--sc-danger, var(--sc-base-content, #000));
-      }
-      :host([status="info"]) {
-        --sc_color: var(--sc-info, var(--sc-base-content, #000));
-      }
-      :host([status="success"]) {
-        --sc_color: var(--sc-success, var(--sc-base-content, #000));
-      }
-
       /*background*/
-      :host([dismissible]),
       :host([background]) {
-        background: var(--sc-base, #fff);
-        padding: 0.8em 1.15em;
-      }
-      :host([dismissible]):before,
-      :host([background]):before {
-        background-color: currentColor;
-        content: "";
-        display: block;
-        position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        opacity: 0.08;
-        border-radius: var(--sc_rounded);
-        pointer-events: none;
+        background: color-mix(in srgb, currentColor 8%, var(--sc-base, #fff));
+        padding: 0.8em;
       }
 
       .content {
-        z-index: 2;
-        position: relative;
         flex: 1;
       }
 
@@ -91,30 +62,34 @@ export class Alert extends LitElement {
         display: block;
       }
 
-      .hidden {
-        display: none !important;
-      }
-
       /*Rounded*/
       :host([size="2xs"]),
       :host([size="xs"]),
       :host([size="sm"]) {
-        --sc_rounded: var(--sc-rounded-sm);
+        --sc-_rounded: var(--sc-rounded-sm);
       }
 
       /*Dismissible*/
-      :host([dismissible]) {
+      .close-btn {
+        flex-shrink: 0;
+        align-self: flex-start;
+        border-left: var(--sc-border-width, 1px) solid currentColor;
+        padding-left: 0.5em;
+        margin-left: 0.5em;
+      }
+      :host([dismissible][background]) {
         padding-right: 3rem;
       }
-      :host([dismissible]) .close-btn {
+      :host([dismissible][background]) .close-btn {
         position: absolute;
         top: 0.4rem;
         right: 0.3rem;
+        border-left: none;
       }
     `,
   ];
   /**
-   * Titre du message d'erreur
+   * Titre du message (texte brut, utiliser le slot pour du contenu riche)
    */
   @property({ type: String }) label = "";
 
@@ -125,8 +100,6 @@ export class Alert extends LitElement {
    */
   @property({ type: String }) text = "";
 
-  @property({ type: String }) id = new Date().getTime().toString();
-
   @property({ type: String, reflect: true }) size?: Size;
 
   @property({ type: Boolean, reflect: true }) dismissible = false;
@@ -135,33 +108,58 @@ export class Alert extends LitElement {
 
   @property({ type: String, reflect: true }) status: AlertStatus = "default";
 
+  /**
+   * Mémorise la fermeture dans le localStorage. Nécessite un `id`.
+   */
   @property({ type: Boolean, reflect: true }) dismissForever = false;
 
+  /**
+   * Annonce le message aux lecteurs d'écran (role alert/status).
+   * À activer pour les messages injectés dynamiquement, pas pour une alerte déjà dans la page.
+   */
+  @property({ type: Boolean, reflect: true }) announce = false;
+
   connectedCallback() {
-    if (this.dismissForever) {
-      const dismissed = localStorage.getItem("sonic-alert-dismissed") || "{}";
-      const dismissedObj = JSON.parse(dismissed);
-      if (dismissedObj[this.id]) {
-        this.remove();
-      }
-    }
     super.connectedCallback();
+    if (
+      this.dismissForever &&
+      this.id &&
+      isDismissed(dismissStorageKey, this.id)
+    ) {
+      this.remove();
+    }
+  }
+
+  willUpdate(changed: PropertyValues<this>) {
+    if (changed.has("announce") || changed.has("status")) {
+      this._syncAnnounceA11y();
+    }
+  }
+
+  private _syncAnnounceA11y() {
+    if (!this.announce) {
+      this.removeAttribute("role");
+      this.removeAttribute("aria-live");
+      return;
+    }
+    this.setAttribute("role", statusAriaRole(this.status));
+    const live = statusAriaLive(this.status);
+    if (live) this.setAttribute("aria-live", live);
+    else this.removeAttribute("aria-live");
   }
 
   render() {
     return html`
-      <slot name="icon" class="${this.noIcon ? "hidden" : ""}"
-        >${!this.noIcon
-          ? html`<div>
-              ${this.status &&
-              html`<sonic-icon name=${icon[this.status]}></sonic-icon>`}
-            </div>`
-          : nothing}</slot
-      >
+      ${this.noIcon
+        ? nothing
+        : html`<slot name="icon">
+            <sonic-icon
+              aria-hidden="true"
+              name=${statusIcon[this.status] ?? statusIcon.default}
+            ></sonic-icon>
+          </slot>`}
       <div class="content">
-        ${this.label
-          ? html`<span class="label">${unsafeHTML(this.label)}</span>`
-          : nothing}
+        ${this.label ? html`<span class="label">${this.label}</span>` : nothing}
         <div>${this.text}<slot></slot></div>
       </div>
       ${this.dismissible
@@ -171,6 +169,7 @@ export class Alert extends LitElement {
             variant="unstyled"
             shape="circle"
             icon
+            .ariaLabel=${resolveUiLabel(uiAriaLabels.closeAlert)}
           >
             <sonic-icon name="cancel"></sonic-icon>
           </sonic-button>`
@@ -180,15 +179,11 @@ export class Alert extends LitElement {
 
   close() {
     this.remove();
-    // if dismiss forever, save in localstorage
-    if (this.dismissForever) {
-      const dismissed = localStorage.getItem("sonic-alert-dismissed") || "{}";
-      const dismissedObj = JSON.parse(dismissed);
-      dismissedObj[this.id] = true;
-      localStorage.setItem(
-        "sonic-alert-dismissed",
-        JSON.stringify(dismissedObj)
-      );
+    if (!this.dismissForever) return;
+    if (!this.id) {
+      console.warn("sonic-alert : dismissForever nécessite un id.");
+      return;
     }
+    markDismissed(dismissStorageKey, this.id);
   }
 }

package/src/core/components/ui/alert-messages/alert-messages.ts

@@ -4,7 +4,6 @@ import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import { Message } from "@supersoniks/concorde/core/_types/types";
 import { map } from "lit/directives/map.js";
 import { Size } from "@supersoniks/concorde/core/components/ui/_css/size";
-
 import { ifDefined } from "lit/directives/if-defined.js";
 import { APIResult } from "@supersoniks/concorde/core/components/ui/toast/message-subscriber";
 
@@ -37,6 +36,7 @@ export class AlertMessages extends Subscriber(LitElement, {} as APIResult) {
       ${map(this.messages, (message) => {
         if (message.type == "public") {
           return html`<sonic-alert
+            announce
             status=${message.status || "default"}
             text=${ifDefined(message.content)}
             size=${this.size}

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

@@ -1,127 +1,175 @@
 # 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. 
+
 ## Type
+
+`default` — subtle background (`base-100`). `neutral` — dark fill (`base-content`) with light text, useful on light backgrounds.
+
 <sonic-code>
   <template>
-  <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>
-  <sonic-badge type="contrast">Contrast</sonic-badge>
+    <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
+
+`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>
-    <sonic-badge variant="outline" type="contrast">Contrast</sonic-badge>
-  </div>
+    <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>
-    <sonic-badge variant="ghost" type="contrast">Contrast</sonic-badge>
-  </div>
+      <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>
-  <sonic-badge size="2xs">2Xs badge</sonic-badge>
-  <sonic-badge size="xs">Xs badge</sonic-badge>
-  <sonic-badge size="sm">Sm badge</sonic-badge>
-  <sonic-badge>Md badge</sonic-badge>
-  <sonic-badge size="lg">Lg badge</sonic-badge>
-  <sonic-badge size="xl">Xl badge</sonic-badge>
-  <sonic-badge size="2xl">2Xl badge</sonic-badge>
+    <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.
 
-## Empty badges
 <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>
+    <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-3 gap-4" >
-        <sonic-badge ellipsis size="sm" variant="outline"  >
-        <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon> Lorem ipsum dolor sit consectetur adipiscing elit. Lorem ipsum dolor sit consectetur adipiscing elit.</sonic-badge>
-        <sonic-badge ellipsis size="sm" > <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon> Lorem ipsum dolor sit consectetur adipiscing elit. Lorem ipsum dolor sit consectetur adipiscing elit.</sonic-badge>
+    <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"> Mon compte </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>
+    <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>
-      <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 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>
-  </div>
   </template>
 </sonic-code>