@supersoniks/concorde 5.0.1 → 5.0.2

package/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="fr">
   <head>
     <meta charset="UTF-8" />
@@ -84,7 +84,7 @@
         <div class="min-h-[100vh] pt-3">
           <docs-page
             noShadowDom
-            class="prose lg:prose-lg max-w-prose block py-8 prose-li:my-[.2em] leading-[1.5] lg:leading-[1.5] prose-h1:font-normal prose-h1:text-[4.2em]"
+            class="prose max-w-prose block py-8 prose-li:my-[.2em] leading-[1.5] lg:leading-[1.5] prose-h1:font-normal prose-h1:text-[3.25em] prose-code:before:content-none prose-code:after:content-none prose-pre:font-mono"
           ></docs-page>
         </div>
       </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "license": "MIT",
   "type": "module",
   "main": "",
@@ -96,6 +96,9 @@
     "./functional/translation": "./src/core/components/functional/translation/translation.ts",
     "./value": "./src/core/components/functional/value/value.ts",
     "./functional/value": "./src/core/components/functional/value/value.ts",
+    "./rounded": "./src/core/components/ui/_css/rounded.ts",
+    "./ui/rounded": "./src/core/components/ui/_css/rounded.ts",
+    "./ui/_css/rounded": "./src/core/components/ui/_css/rounded.ts",
     "./scroll": "./src/core/components/ui/_css/scroll.ts",
     "./ui/scroll": "./src/core/components/ui/_css/scroll.ts",
     "./ui/_css/scroll": "./src/core/components/ui/_css/scroll.ts",
@@ -108,6 +111,12 @@
     "./type": "./src/core/components/ui/_css/type.ts",
     "./ui/type": "./src/core/components/ui/_css/type.ts",
     "./ui/_css/type": "./src/core/components/ui/_css/type.ts",
+    "./ui-aria-labels": "./src/core/components/ui/_i18n/ui-aria-labels.ts",
+    "./ui/ui-aria-labels": "./src/core/components/ui/_i18n/ui-aria-labels.ts",
+    "./ui/_i18n/ui-aria-labels": "./src/core/components/ui/_i18n/ui-aria-labels.ts",
+    "./alert.spec": "./src/core/components/ui/alert/alert.spec.ts",
+    "./ui/alert.spec": "./src/core/components/ui/alert/alert.spec.ts",
+    "./ui/alert/alert.spec": "./src/core/components/ui/alert/alert.spec.ts",
     "./alert": "./src/core/components/ui/alert/alert.ts",
     "./ui/alert": "./src/core/components/ui/alert/alert.ts",
     "./alert-messages": "./src/core/components/ui/alert-messages/alert-messages.ts",
@@ -270,6 +279,9 @@
     "./ui/theme/light": "./src/core/components/ui/theme/theme-collection/light.ts",
     "./theme": "./src/core/components/ui/theme/theme.ts",
     "./ui/theme": "./src/core/components/ui/theme/theme.ts",
+    "./dismissed": "./src/core/components/ui/toast/dismissed.ts",
+    "./ui/dismissed": "./src/core/components/ui/toast/dismissed.ts",
+    "./ui/toast/dismissed": "./src/core/components/ui/toast/dismissed.ts",
     "./message-subscriber": "./src/core/components/ui/toast/message-subscriber.ts",
     "./ui/message-subscriber": "./src/core/components/ui/toast/message-subscriber.ts",
     "./ui/toast/message-subscriber": "./src/core/components/ui/toast/message-subscriber.ts",
@@ -340,6 +352,7 @@
     "./utils/dataProviderKey": "./src/core/utils/dataProviderKey.ts",
     "./utils/derive.spec": "./src/core/utils/derive.spec.ts",
     "./utils/derive": "./src/core/utils/derive.ts",
+    "./utils/dismissed": "./src/core/utils/dismissed.ts",
     "./utils/dpOptions.spec": "./src/core/utils/dpOptions.spec.ts",
     "./utils/endpoint.spec": "./src/core/utils/endpoint.spec.ts",
     "./utils/endpoint": "./src/core/utils/endpoint.ts",

package/src/core/components/ui/_css/rounded.ts

@@ -0,0 +1,36 @@
+import { css } from "lit";
+
+export type Rounded = "" | "base" | "none" | "full" | "sm" | "md" | "lg" | "xl";
+
+export const hostRounded = css`
+  :host {
+    --sc-_rounded: 0;
+    border-radius: var(--sc-_rounded);
+  }
+  :host([rounded]),
+  :host([rounded="base"]) {
+    --sc-_rounded: var(--sc-rounded);
+    overflow: hidden;
+  }
+  :host([rounded="sm"]) {
+    --sc-_rounded: var(--sc-rounded-sm);
+  }
+
+  :host([rounded="md"]) {
+    --sc-_rounded: var(--sc-rounded-md);
+  }
+
+  :host([rounded="lg"]) {
+    --sc-_rounded: var(--sc-rounded-lg);
+  }
+  :host([rounded="xl"]) {
+    --sc-_rounded: var(--sc-rounded-xl);
+  }
+
+  :host([rounded="full"]) {
+    --sc-_rounded: 50% !important;
+  }
+  :host([rounded="none"]) {
+    --sc-_rounded: 0 !important;
+  }
+`;

package/src/core/components/ui/_css/type.ts

@@ -1,5 +1,54 @@
 import { css } from "lit";
 
+/** Icônes pour les composants à `status` (API messages, alert, toast). */
+export const statusIcon = {
+  default: "info-empty",
+  info: "info-empty",
+  success: "check-circled-outline",
+  warning: "warning-circled-outline",
+  error: "warning-circled-outline",
+};
+
+export type StatusIconKey = keyof typeof statusIcon;
+
+export function toStatus(value?: string): StatusIconKey | undefined {
+  if (!value) return undefined;
+  if (value === "danger") return "error";
+  return value in statusIcon ? (value as StatusIconKey) : undefined;
+}
+
+export function statusAriaRole(status?: StatusIconKey): "alert" | "status" {
+  return status === "error" ? "alert" : "status";
+}
+
+export function statusAriaLive(status?: StatusIconKey): "polite" | null {
+  return status === "error" ? null : "polite";
+}
+
+export const statusColor = css`
+  :host {
+    --sc-_color: var(--sc-base-content, #000);
+    color: var(--sc-_color);
+  }
+
+  :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));
+  }
+
+  .inherit-color {
+    color: var(--sc-_color);
+  }
+`;
+
 export const typeColor = css`
   :host {
     --sc-_color: inherit;

package/src/core/components/ui/_i18n/ui-aria-labels.ts

@@ -0,0 +1,104 @@
+import HTML from "@supersoniks/concorde/core/utils/HTML";
+
+/** Langues supportées pour les libellés ARIA UI (anglais par défaut). */
+export type UiLang = "en" | "fr" | "de" | "nl" | "es" | "it";
+
+export type UiLabelDict = Partial<Record<UiLang, string>> & { en: string };
+
+const supported = new Set<string>(["en", "fr", "de", "nl", "es", "it"]);
+
+/** Lit la langue courante à chaque appel (pas d'état par composant). */
+export function resolveUiLabel(dict: UiLabelDict, lang?: string): string {
+  const code = (lang ?? HTML.getLanguage() ?? "en").split("-")[0].toLowerCase();
+  if (supported.has(code) && dict[code as UiLang]) {
+    return dict[code as UiLang]!;
+  }
+  return dict.en;
+}
+
+export const uiAriaLabels = {
+  closeWindow: {
+    en: "Close window",
+    fr: "Fermer la fenêtre",
+    de: "Fenster schließen",
+    nl: "Venster sluiten",
+    es: "Cerrar ventana",
+    it: "Chiudi finestra",
+  },
+  closeAlert: {
+    en: "Close",
+    fr: "Fermer",
+    de: "Schließen",
+    nl: "Sluiten",
+    es: "Cerrar",
+    it: "Chiudi",
+  },
+  showPassword: {
+    en: "Show password",
+    fr: "Afficher le mot de passe",
+    de: "Passwort anzeigen",
+    nl: "Wachtwoord tonen",
+    es: "Mostrar contraseña",
+    it: "Mostra password",
+  },
+  hidePassword: {
+    en: "Hide password",
+    fr: "Masquer le mot de passe",
+    de: "Passwort ausblenden",
+    nl: "Wachtwoord verbergen",
+    es: "Ocultar contraseña",
+    it: "Nascondi password",
+  },
+  closeToast: {
+    en: "Close notification",
+    fr: "Fermer la notification",
+    de: "Benachrichtigung schließen",
+    nl: "Melding sluiten",
+    es: "Cerrar notificación",
+    it: "Chiudi notifica",
+  },
+  closeToastError: {
+    en: "Close error message",
+    fr: "Fermer le message d'erreur",
+    de: "Fehlermeldung schließen",
+    nl: "Foutmelding sluiten",
+    es: "Cerrar mensaje de error",
+    it: "Chiudi messaggio di errore",
+  },
+  closeToastWarning: {
+    en: "Close warning",
+    fr: "Fermer l'avertissement",
+    de: "Warnung schließen",
+    nl: "Waarschuwing sluiten",
+    es: "Cerrar advertencia",
+    it: "Chiudi avviso",
+  },
+  closeToastSuccess: {
+    en: "Close success message",
+    fr: "Fermer le message de succès",
+    de: "Erfolgsmeldung schließen",
+    nl: "Succesmelding sluiten",
+    es: "Cerrar mensaje de éxito",
+    it: "Chiudi messaggio di successo",
+  },
+  closeToastInfo: {
+    en: "Close information message",
+    fr: "Fermer l'information",
+    de: "Information schließen",
+    nl: "Informatie sluiten",
+    es: "Cerrar información",
+    it: "Chiudi informazione",
+  },
+} as const satisfies Record<string, UiLabelDict>;
+
+const toastCloseByStatus: Record<string, UiLabelDict> = {
+  error: uiAriaLabels.closeToastError,
+  warning: uiAriaLabels.closeToastWarning,
+  success: uiAriaLabels.closeToastSuccess,
+  info: uiAriaLabels.closeToastInfo,
+};
+
+export function resolveToastCloseLabel(status?: string): string {
+  const dict = status ? toastCloseByStatus[status] : undefined;
+  return resolveUiLabel(dict ?? uiAriaLabels.closeToast);
+}

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

@@ -1,5 +1,9 @@
 # Alert
 
+Inline message in the page: title (`label`), body (`text` or default slot), icon from `status`. For HTML or actions, use the slot instead of `label` / `text` (plain text only).
+
+Use **`status`**: `default`, `info`, `success`, `warning`, `error`.
+
 <sonic-code>
   <template>
     <sonic-alert status="error" label="Email error" text="This address is already in use" background></sonic-alert>
@@ -8,15 +12,52 @@
 
 ## 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>
+    <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>
 
@@ -24,98 +65,113 @@
 
 <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>
+    <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>
+    <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>
+    <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 class="mb-3" dismissible label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="success" class="mb-3" dismissible label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="error" class="mb-3" dismissible label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="warning" class="mb-3" dismissible label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="info" class="mb-3" dismissible label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
+    <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 dismissForever label="Lorem ipsum dolor" id="addressUniqueId">
-    This address is already in use.
-  </sonic-alert>
+    <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>

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

@@ -0,0 +1,145 @@
+import { expect, vi } from "vitest";
+import TestUtils from "@supersoniks/concorde/test-utils/TestUtils";
+import "./alert";
+import { Alert } from "./alert";
+
+async function create(attributes: string) {
+  const element = TestUtils.bootstrap(
+    `<sonic-alert ${attributes}></sonic-alert>`
+  )[0] as Alert;
+  await element.updateComplete;
+  return element;
+}
+
+describe("SonicAlert", () => {
+  it("utilise status=default par défaut", async () => {
+    const elt = await create("");
+    expect(elt.getAttribute("status")).toBe("default");
+  });
+
+  it("conserve status=error", async () => {
+    const elt = await create('status="error"');
+    expect(elt.status).toBe("error");
+    expect(elt.getAttribute("status")).toBe("error");
+  });
+
+  it.each(["warning", "success", "info"])(
+    "accepte status=%s",
+    async (value) => {
+      const elt = await create(`status="${value}"`);
+      expect(elt.getAttribute("status")).toBe(value);
+    }
+  );
+
+  it("n'expose pas role ni aria-live sans announce", async () => {
+    const elt = await create('status="error"');
+    expect(elt.hasAttribute("role")).toBe(false);
+    expect(elt.hasAttribute("aria-live")).toBe(false);
+  });
+
+  it("avec announce, role=alert pour error sans aria-live explicite", async () => {
+    const error = await create('announce status="error"');
+    expect(error.getAttribute("role")).toBe("alert");
+    expect(error.hasAttribute("aria-live")).toBe(false);
+  });
+
+  it("avec announce, role=status et aria-live=polite pour les autres status", async () => {
+    const info = await create('announce status="info"');
+    expect(info.getAttribute("role")).toBe("status");
+    expect(info.getAttribute("aria-live")).toBe("polite");
+  });
+
+  it("retire role et aria-live quand announce repasse à false", async () => {
+    const elt = await create("announce status=info");
+    expect(elt.getAttribute("role")).toBe("status");
+    elt.announce = false;
+    await elt.updateComplete;
+    expect(elt.hasAttribute("role")).toBe(false);
+    expect(elt.hasAttribute("aria-live")).toBe(false);
+  });
+
+  it("affiche un bouton de fermeture uniquement si dismissible", async () => {
+    const dismissible = await create("dismissible");
+    expect(dismissible.shadowRoot?.querySelector(".close-btn")).not.toBeNull();
+    const plain = await create("");
+    expect(plain.shadowRoot?.querySelector(".close-btn")).toBeNull();
+  });
+
+  it("retire l'alerte au clic sur le bouton dismissible", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    container.innerHTML = '<sonic-alert dismissible text="msg"></sonic-alert>';
+    const elt = container.querySelector("sonic-alert") as Alert;
+    await elt.updateComplete;
+    const closeBtn = elt.shadowRoot?.querySelector(
+      ".close-btn"
+    ) as HTMLElement | null;
+    expect(closeBtn).not.toBeNull();
+    closeBtn!.click();
+    expect(container.querySelector("sonic-alert")).toBeNull();
+    container.remove();
+  });
+
+  it("masque l'icône décorative aux lecteurs d'écran", async () => {
+    const elt = await create('status="info"');
+    expect(
+      elt.shadowRoot?.querySelector("sonic-icon")?.getAttribute("aria-hidden")
+    ).toBe("true");
+  });
+
+  it("n'affiche pas l'icône si noIcon", async () => {
+    const elt = await create("noIcon");
+    expect(elt.shadowRoot?.querySelector("sonic-icon")).toBeNull();
+  });
+
+  it("traduit le libellé de fermeture selon la langue du document", async () => {
+    const previous = document.documentElement.lang;
+    document.documentElement.lang = "fr";
+    const fr = await create("dismissible");
+    expect(
+      (fr.shadowRoot?.querySelector(".close-btn") as HTMLElement & {
+        ariaLabel?: string;
+      })?.ariaLabel
+    ).toBe("Fermer");
+    document.documentElement.lang = "it";
+    const it = await create("dismissible");
+    expect(
+      (it.shadowRoot?.querySelector(".close-btn") as HTMLElement & {
+        ariaLabel?: string;
+      })?.ariaLabel
+    ).toBe("Chiudi");
+    document.documentElement.lang = previous;
+  });
+
+  it("n'interprète pas le HTML du label", async () => {
+    const elt = await create('label="<b>x</b>"');
+    expect(elt.shadowRoot?.querySelector(".label b")).toBeNull();
+    expect(elt.shadowRoot?.querySelector(".label")?.textContent).toBe(
+      "<b>x</b>"
+    );
+  });
+
+  it("mémorise la fermeture avec dismissForever et un id", async () => {
+    localStorage.clear();
+    const elt = await create('dismissForever id="my-alert"');
+    elt.close();
+    expect(JSON.parse(localStorage.getItem("sonic-alert-dismissed")!)).toEqual(
+      { "my-alert": true }
+    );
+    const children = TestUtils.bootstrap(
+      '<sonic-alert dismissForever id="my-alert"></sonic-alert>'
+    );
+    expect(children.length).toBe(0);
+  });
+
+  it("ne mémorise rien avec dismissForever sans id", async () => {
+    localStorage.clear();
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const elt = await create("dismissForever");
+    elt.close();
+    expect(localStorage.getItem("sonic-alert-dismissed")).toBeNull();
+    expect(warn).toHaveBeenCalled();
+    warn.mockRestore();
+  });
+
+});