@supersoniks/concorde 5.0.4 → 5.1.0

package/src/core/components/ui/theme/theme-collection/light.ts

@@ -1,32 +1,36 @@
 import { css } from "lit";
 
-export const light = css`
-  :host([theme="light"]) {
-    /*Boutons*/
-    --sc-primary: var(--sc-base-800);
-    --sc-info: #2563eb;
-    --sc-danger: #f43f5e;
-    --sc-warning: #f97316;
-    --sc-success: #14b8a6;
+export const lightCss = css`
+  /*Boutons*/
+  --sc-primary: var(--sc-base-800);
+  --sc-info: #2563eb;
+  --sc-danger: #f43f5e;
+  --sc-warning: #f97316;
+  --sc-success: #14b8a6;
+
+  --sc-primary-content: var(--sc-base, #fff);
+  --sc-info-content: var(--sc-base, #fff);
+  --sc-danger-content: var(--sc-base, #fff);
+  --sc-warning-content: var(--sc-base, #fff);
+  --sc-success-content: var(--sc-base, #fff);
 
-    --sc-primary-content: var(--sc-base, #fff);
-    --sc-info-content: var(--sc-base, #fff);
-    --sc-danger-content: var(--sc-base, #fff);
-    --sc-warning-content: var(--sc-base, #fff);
-    --sc-success-content: var(--sc-base, #fff);
+  /*Bases*/
+  --sc-base: #fff;
+  --sc-base-50: #f8fafc;
+  --sc-base-100: #f1f5f9;
+  --sc-base-200: #e2e8f0;
+  --sc-base-300: #cbd5e1;
+  --sc-base-400: #94a3b8;
+  --sc-base-500: #64748b;
+  --sc-base-600: #475569;
+  --sc-base-700: #334155;
+  --sc-base-800: #1e293b;
+  --sc-base-900: #0f172a;
+  --sc-base-content: var(--sc-base-700);
+`;
 
-    /*Bases*/
-    --sc-base: #fff;
-    --sc-base-50: #f8fafc;
-    --sc-base-100: #f1f5f9;
-    --sc-base-200: #e2e8f0;
-    --sc-base-300: #cbd5e1;
-    --sc-base-400: #94a3b8;
-    --sc-base-500: #64748b;
-    --sc-base-600: #475569;
-    --sc-base-700: #334155;
-    --sc-base-800: #1e293b;
-    --sc-base-900: #0f172a;
-    --sc-base-content: var(--sc-base-700);
+export const light = css`
+  :host([theme="light"]) {
+    ${lightCss}
   }
 `;

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

@@ -0,0 +1,122 @@
+# Theme
+
+**`sonic-theme`** wraps a Concorde UI: it registers **`--sc-*`** design tokens and provides the default slot for your app. With no **`theme`** attribute (or **`theme="custom"`**), only shared primitives and your overrides apply—built-in **`light`** / **`dark`** / **`auto`** palettes are opt-in. Set **`color`** and **`font`** when the host should carry base text and typography; add Tailwind **`bg-base`** and **`block`** (or **`min-h-screen`**) on the tag for a full surface fill. **Popovers**, **modals**, and **toasts** mount under the nearest connected theme (see [Pop container](#pop-container)). Import **`@supersoniks/concorde/theme`** once at the app entry. For the full public token list and brand overrides, see [Customization](#docs/_getting-started/theming.md/theming).
+
+## Basic example
+
+Wrap interactive components so tokens and overlays resolve from one root.
+
+<sonic-code>
+  <template>
+    <sonic-theme color font class="block bg-base p-6 rounded-lg">
+      <sonic-button type="primary">Save changes</sonic-button>
+    </sonic-theme>
+  </template>
+</sonic-code>
+
+## Theme mode
+
+**Default:** omit **`theme`** or set **`theme="custom"`**. The host loads core tokens (`--sc-rounded`, shadows, form defaults, …) and any **`--sc-*`** you set; it does **not** apply the built-in light or dark palette.
+
+Set **`theme`** to **`light`** or **`dark`** for Concorde’s preset palettes. Set **`theme="auto"`** to follow **`prefers-color-scheme`** (light palette until the OS prefers dark).
+
+<sonic-code>
+  <template>
+    <div class="grid gap-4 md:grid-cols-2">
+      <sonic-theme theme="light" color font class="block bg-base p-4 rounded-md border border-neutral-200">
+        <p class="text-sm mb-3 opacity-80">theme="light"</p>
+        <div class="flex flex-wrap gap-2">
+          <sonic-badge type="primary">Primary</sonic-badge>
+          <sonic-badge type="success">Success</sonic-badge>
+          <sonic-badge type="danger">Danger</sonic-badge>
+        </div>
+      </sonic-theme>
+      <sonic-theme theme="dark" color font class="block bg-base p-4 rounded-md">
+        <p class="text-sm mb-3 opacity-80">theme="dark"</p>
+        <div class="flex flex-wrap gap-2">
+          <sonic-badge type="primary">Primary</sonic-badge>
+          <sonic-badge type="success">Success</sonic-badge>
+          <sonic-badge type="danger">Danger</sonic-badge>
+        </div>
+      </sonic-theme>
+    </div>
+  </template>
+</sonic-code>
+
+## Presentation
+
+**`color`** sets text from **`--sc-base-content`**. **`font`** applies **`--sc-font-family-base`**, **`--sc-font-weight-base`**, and **`--sc-font-style-base`**. For the page or shell background, use **`bg-base`** on **`sonic-theme`** (maps to **`--sc-base`** in Tailwind) with **`block`** so the host paints the surface. Components keep their own fallbacks when **`color`** / **`font`** are omitted.
+
+<sonic-code>
+  <template>
+    <sonic-theme theme="light" color font class="block bg-base p-6 min-h-[8rem] rounded-lg">
+      <p>Body copy inherits base content color and font from the theme host.</p>
+    </sonic-theme>
+  </template>
+</sonic-code>
+
+## Custom tokens
+
+Override **primitives** on **`sonic-theme`** (or **`:root`** / a project stylesheet). Derived radii, shadows, and control rounding are computed from tokens such as **`--sc-rounded`**—avoid copying long lists of internal variables unless you have a specific need.
+
+<sonic-code>
+  <template>
+    <sonic-theme
+      theme="custom"
+      color
+      font
+      class="block bg-base p-6 rounded-lg"
+      style="--sc-primary: #353429; --sc-rounded: 0.25rem;"
+    >
+      <sonic-button type="primary">Brand primary</sonic-button>
+    </sonic-theme>
+  </template>
+</sonic-code>
+
+## Pop container
+
+**`Theme.getPopContainer()`** returns the last connected **`sonic-theme`**, or **`document.body`** if none is connected. When a theme disconnects, the previous connected instance is adopted. Imperative **`Modal.create()`** and declarative **`sonic-modal`** use the same container.
+
+<sonic-code>
+  <template>
+    <sonic-theme theme="light" color font class="block bg-base p-4 rounded-lg">
+      <sonic-button onclick="document.getElementById('themePopModal').show()">
+        Open modal
+      </sonic-button>
+      <sonic-modal id="themePopModal">
+        <sonic-modal-title>Mounted on theme</sonic-modal-title>
+        <sonic-modal-content>
+          This dialog is appended under the nearest sonic-theme pop container.
+        </sonic-modal-content>
+        <sonic-modal-actions>
+          <sonic-button hideModal>Close</sonic-button>
+        </sonic-modal-actions>
+      </sonic-modal>
+    </sonic-theme>
+  </template>
+</sonic-code>
+
+## Embedded iframes
+
+On connect, the theme publishes resolved **`--sc-*`** values and linked font stylesheet URLs (Google Fonts / Adobe Fonts) to the **`sonic-theme`** data channel and **`postMessage`**s them to same-page iframes. Iframes can request a refresh by posting **`{ type: "GetSonicTheme" }`**.
+
+<sonic-code language="javascript">
+  <template>
+// Inside the iframe — ask the parent theme to rebroadcast tokens
+window.parent.postMessage({ type: "GetSonicTheme" }, "*");
+  </template>
+</sonic-code>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `theme` | omitted · `custom` (default) · `light` · `dark` · `auto` | Omitted or `custom`: core tokens and your `--sc-*` only. `light` / `dark`: fixed presets. `auto`: presets follow `prefers-color-scheme` |
+| `color` | boolean | Host text color uses `--sc-base-content` |
+| `font` | boolean | Host font uses `--sc-font-family-base` and related base weight/style tokens |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Application markup and Concorde components |
+
+Surface background: Tailwind **`bg-base`** on **`sonic-theme`** (requires Concorde Tailwind color **`base`** → **`--sc-base`**).

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

@@ -1,6 +1,7 @@
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { coreVariables } from "@supersoniks/concorde/core/components/ui/theme/theme-collection/core-variables";
+import { auto } from "@supersoniks/concorde/core/components/ui/theme/theme-collection/auto";
 import { light } from "@supersoniks/concorde/core/components/ui/theme/theme-collection/light";
 import { dark } from "@supersoniks/concorde/core/components/ui/theme/theme-collection/dark";
 import { PublisherManager } from "@supersoniks/concorde/utils";
@@ -12,6 +13,7 @@ export class Theme extends LitElement {
   static styles = [
     light,
     dark,
+    auto,
     coreVariables,
     css`
       :host([color]) {
@@ -50,32 +52,53 @@ export class Theme extends LitElement {
 
   static instance: Theme | undefined;
 
-  constructor() {
-    super();
-    Theme.instance = this;
+  private readonly onWindowMessage = (event: MessageEvent) =>
+    this.receiveMessage(event);
+
+  /** Last connected `<sonic-theme>`; used as the portal root for overlays. */
+  private static adoptPopContainerInstance(exclude?: Theme) {
+    Theme.instance = undefined;
+    const themes = document.querySelectorAll(tagName);
+    for (let i = themes.length - 1; i >= 0; i--) {
+      const elt = themes[i];
+      if (elt !== exclude && elt instanceof Theme && elt.isConnected) {
+        Theme.instance = elt;
+        return;
+      }
+    }
   }
 
   /**
    * retourne le conteneur de tout ce qui pop : popups / modale / tooltip? / dropdown / ...
    */
   public static getPopContainer() {
-    return Theme.instance || document.body;
+    if (Theme.instance?.isConnected) return Theme.instance;
+    Theme.adoptPopContainerInstance();
+    return Theme.instance ?? document.body;
   }
 
   @property({ type: String, reflect: true })
-  theme?: "light" | "dark";
+  theme?: "light" | "dark" | "auto" | "custom";
 
-  @property({ type: Boolean, reflect: true }) background = false;
   @property({ type: Boolean, reflect: true }) color = false;
   @property({ type: Boolean, reflect: true }) font = false;
 
   connectedCallback(): void {
     super.connectedCallback();
-    window.addEventListener("message", (e) => this.receiveMessage(e), false);
+    Theme.instance = this;
+    window.addEventListener("message", this.onWindowMessage, false);
     window.dispatchEvent(new CustomEvent("SonicThemeReady"));
     this.postCSSVars();
   }
 
+  disconnectedCallback(): void {
+    window.removeEventListener("message", this.onWindowMessage, false);
+    if (Theme.instance === this) {
+      Theme.adoptPopContainerInstance(this);
+    }
+    super.disconnectedCallback();
+  }
+
   postCSSVars() {
     const stylesheets = document.styleSheets;
     const ssLength = stylesheets.length;

package/src/core/components/ui/toast/toast-item.ts

@@ -148,19 +148,16 @@ export class SonicToastItem extends LitElement {
       }
 
       /*STATUS — accent via statusColor (--sc-_color) */
-      :host([status]) .sonic-toast {
+      :host([status="success"]) .sonic-toast,
+      :host([status="error"]) .sonic-toast,
+      :host([status="info"]) .sonic-toast,
+      :host([status="warning"]) .sonic-toast {
         border-top: 3px solid var(--sc-_color);
       }
 
-      :host([status="success"]) .sonic-toast:before,
-      :host([status="error"]) .sonic-toast:before,
-      :host([status="info"]) .sonic-toast:before,
-      :host([status="warning"]) .sonic-toast:before {
-        background-color: var(--sc-_color);
-      }
-
       .sonic-toast:before {
         content: "";
+        background-color: var(--sc-_color);
         display: block;
         position: absolute;
         left: 0;
@@ -192,7 +189,7 @@ export class SonicToastItem extends LitElement {
   @property() label: ToastContent = "";
   @property({ type: String }) id = "";
   @property() text: ToastContent = "";
-  @property({ type: String, reflect: true }) status: ToastStatus = "";
+  @property({ type: String, reflect: true }) status?: ToastStatus;
   @property({ type: Boolean }) ghost = false;
   @property({ type: Boolean }) preserve = false;
   @property({ type: Boolean }) dismissForever = false;

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

@@ -1,166 +1,216 @@
 # Toast
 
-## Utilisation de base
+Toasts surface **short-lived feedback** in a fixed stack (bottom-right in the main window). Queue messages with **`SonicToast.add()`** on the global **`SonicToast`** class—the host **`sonic-toast`** is created automatically. Prefer **`label`** for a heading; use **`preserve`** or interactive **`text`** when the user must read or act before dismiss.
+
+## Basic example
+
+Click the button to show a toast.
 
 <sonic-code>
   <template>
-    <sonic-button onclick="window.SonicToast.add({ text: 'Message de notification simple' })">
-      Afficher un toast
+    <sonic-button onclick="SonicToast.add({ text: 'Simple notification' })">
+      Show toast
     </sonic-button>
   </template>
 </sonic-code>
 
-## Statut
+## Status
 
-Les statuts disponibles sont : `success`, `error`, `warning`, `info` ou vide (par défaut).
+**`status`** drives color, icon, and live-region behavior. Omit **`status`** or pass an empty string for a neutral toast.
 
 <sonic-code>
   <template>
     <div class="flex flex-wrap gap-2">
-      <sonic-button onclick="window.SonicToast.add({ text: 'Message par défaut', status: '' })">
+      <sonic-button onclick="SonicToast.add({ text: 'Default message', status: '' })">
         Default
       </sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ text: 'Opération réussie !', status: 'success' })">
+      <sonic-button onclick="SonicToast.add({ text: 'Operation succeeded', status: 'success' })">
         Success
       </sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ text: 'Une erreur est survenue', status: 'error' })">
+      <sonic-button onclick="SonicToast.add({ text: 'Something went wrong', status: 'error' })">
         Error
       </sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ text: 'Attention à ce point', status: 'warning' })">
+      <sonic-button onclick="SonicToast.add({ text: 'Check this detail', status: 'warning' })">
         Warning
       </sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ text: 'Information importante', status: 'info' })">
+      <sonic-button onclick="SonicToast.add({ text: 'Helpful context', status: 'info' })">
         Info
       </sonic-button>
     </div>
   </template>
 </sonic-code>
 
-## Avec titre
+## Label
+
+Set **`label`** for a bold title above **`text`**. **`title`** still works but is deprecated—use **`label`** in new code.
 
 <sonic-code>
   <template>
     <div class="flex flex-wrap gap-2">
-      <sonic-button onclick="window.SonicToast.add({ title: 'Succès', text: 'Votre demande a été traitée avec succès.', status: 'success' })">
-        Toast avec titre
+      <sonic-button
+        onclick="SonicToast.add({ label: 'Success', text: 'Your request was processed.', status: 'success' })"
+      >
+        Toast with label
       </sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ title: 'Test', text: 'Une erreur est survenue lors du traitement.', status: 'error' })">
-        Toast d'erreur avec titre
+      <sonic-button
+        onclick="SonicToast.add({ label: 'Error', text: 'Processing failed. Try again.', status: 'error' })"
+      >
+        Error with label
       </sonic-button>
     </div>
   </template>
 </sonic-code>
 
-## Avec contenu HTML
+## HTML in text
 
-Le contenu du toast peut contenir du HTML.
+**`text`** (and **`label`**) can include HTML strings. Links and controls in **`text`** automatically enable **`preserve`** so the toast does not auto-hide while the user interacts.
 
 <sonic-code>
   <template>
-    <sonic-button onclick="window.SonicToast.add({ text: 'Message avec <strong>HTML</strong> et un <a href=&quot;#&quot;>lien cliquable</a>', status: 'info' })">
-      Toast avec HTML
+    <sonic-button
+      onclick="SonicToast.add({ text: 'Message with <strong>HTML</strong> and an <a href=&quot;#&quot;>action link</a>', status: 'info' })"
+    >
+      Toast with HTML
     </sonic-button>
   </template>
 </sonic-code>
 
+## Preserve
 
-## Persistance
-
-Par défaut, les toasts disparaissent automatiquement. Avec `preserve: true`, le toast reste affiché jusqu'à ce qu'il soit fermé manuellement.
+Without **`preserve`**, toasts auto-hide after about six seconds (timer pauses on hover or focus). Set **`preserve`** to keep the toast until the user closes it.
 
 <sonic-code>
   <template>
-    <sonic-button onclick="window.SonicToast.add({ text: 'Ce toast ne disparaîtra pas automatiquement', status: 'info', preserve: true })">
-      Toast persistant
+    <sonic-button
+      onclick="SonicToast.add({ text: 'This toast stays until you dismiss it', status: 'info', preserve: true })"
+    >
+      Persistent toast
     </sonic-button>
   </template>
 </sonic-code>
 
-## Masquer définitivement
+## Dismiss forever
 
-Avec `dismissForever: true` et un `id`, le toast peut être masqué définitivement. Une fois fermé, il ne réapparaîtra plus même après rechargement de la page.
+With **`dismissForever`** and a stable **`id`**, closing the toast stores dismissal in **`localStorage`**—**`SonicToast.add`** skips it on later visits. Duplicate payloads (same fields, ignoring **`id`**) are not queued twice.
 
 <sonic-code>
   <template>
-    <sonic-button onclick="window.SonicToast.add({ id: 'unique-toast-id', text: 'Ce toast peut être masqué définitivement', status: 'info', dismissForever: true })">
-      Toast avec dismiss forever
+    <sonic-button
+      onclick="SonicToast.add({ id: 'unique-toast-id', text: 'Dismiss forever hides this across reloads', status: 'info', dismissForever: true })"
+    >
+      Dismiss forever
     </sonic-button>
   </template>
 </sonic-code>
 
-## Fantôme
+## Ghost
 
-Avec `ghost: true`, le toast devient semi-transparent et non-interactif.
+**`ghost`** renders a semi-transparent, non-interactive toast—useful for loading or background states. **`SonicToast.removeAll`** leaves ghost toasts in place.
 
 <sonic-code>
   <template>
-    <sonic-button onclick="window.SonicToast.add({ text: 'Toast fantôme (semi-transparent)', status: 'info', ghost: true })">
-      Toast ghost
+    <sonic-button
+      onclick="SonicToast.add({ text: 'Ghost toast (non-interactive)', status: 'info', ghost: true })"
+    >
+      Ghost toast
     </sonic-button>
   </template>
 </sonic-code>
 
+## Dismissal
 
-## Méthodes de suppression
+Use static helpers to clear the stack from app logic (for example after navigation).
 
-### Tout supprimer
+### Remove all
 
-Supprime tous les toasts sauf ceux marqués comme `ghost`.
+Removes every toast except **`ghost`** items.
 
 <sonic-code>
   <template>
     <div class="flex flex-wrap gap-2">
-      <sonic-button onclick="window.SonicToast.add({ text: 'Toast 1', status: 'info' })">Ajouter toast 1</sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ text: 'Toast 2', status: 'success' })">Ajouter toast 2</sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ text: 'Toast 3', status: 'warning' })">Ajouter toast 3</sonic-button>
-      <sonic-button onclick="window.SonicToast.removeAll()">Supprimer tous</sonic-button>
+      <sonic-button onclick="SonicToast.add({ text: 'Toast 1', status: 'info' })">Add toast 1</sonic-button>
+      <sonic-button onclick="SonicToast.add({ text: 'Toast 2', status: 'success' })">Add toast 2</sonic-button>
+      <sonic-button onclick="SonicToast.add({ text: 'Toast 3', status: 'warning' })">Add toast 3</sonic-button>
+      <sonic-button onclick="SonicToast.removeAll()">Remove all</sonic-button>
     </div>
   </template>
 </sonic-code>
 
-### Supprimer par statut
-
-Supprime tous les toasts d'un statut spécifique.
+### Remove by status
 
 <sonic-code>
   <template>
     <div class="flex flex-wrap gap-2">
-      <sonic-button onclick="window.SonicToast.add({ text: 'Toast success', status: 'success' })">Success</sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ text: 'Toast error', status: 'error' })">Error</sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ text: 'Toast warning', status: 'warning' })">Warning</sonic-button>
-      <sonic-button onclick="window.SonicToast.removeItemsByStatus('success')">Supprimer success</sonic-button>
-      <sonic-button onclick="window.SonicToast.removeItemsByStatus('error')">Supprimer error</sonic-button>
+      <sonic-button onclick="SonicToast.add({ text: 'Success toast', status: 'success' })">Success</sonic-button>
+      <sonic-button onclick="SonicToast.add({ text: 'Error toast', status: 'error' })">Error</sonic-button>
+      <sonic-button onclick="SonicToast.add({ text: 'Warning toast', status: 'warning' })">Warning</sonic-button>
+      <sonic-button onclick="SonicToast.removeItemsByStatus('success')">Remove success</sonic-button>
+      <sonic-button onclick="SonicToast.removeItemsByStatus('error')">Remove error</sonic-button>
     </div>
   </template>
 </sonic-code>
 
-### Supprimer les éléments temporaires
+### Remove temporary items
 
-Supprime tous les toasts qui ne sont pas marqués comme `preserve`.
+Removes toasts that are not **`preserve`**.
 
 <sonic-code>
   <template>
     <div class="flex flex-wrap gap-2">
-      <sonic-button onclick="window.SonicToast.add({ text: 'Toast temporaire', status: 'info' })">Temporaire</sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ text: 'Toast persistant', status: 'success', preserve: true })">Persistant</sonic-button>
-      <sonic-button onclick="window.SonicToast.removeTemporaryItems()">Supprimer temporaires</sonic-button>
+      <sonic-button onclick="SonicToast.add({ text: 'Temporary toast', status: 'info' })">Temporary</sonic-button>
+      <sonic-button onclick="SonicToast.add({ text: 'Persistent toast', status: 'success', preserve: true })">
+        Persistent
+      </sonic-button>
+      <sonic-button onclick="SonicToast.removeTemporaryItems()">Remove temporary</sonic-button>
     </div>
   </template>
 </sonic-code>
 
-## Exemple complet
+## Combined options
 
 <sonic-code>
   <template>
-    <sonic-button onclick="window.SonicToast.add({ 
+    <sonic-button
+      onclick="SonicToast.add({
       id: 'welcome-toast',
-      title: 'Bienvenue',
-      text: 'Bienvenue sur notre plateforme ! Vous pouvez commencer à explorer les fonctionnalités.',
+      label: 'Welcome',
+      text: 'Welcome to the platform. Explore the docs to get started.',
       status: 'success',
       dismissForever: true
-    })">
-      Toast complet
+    })"
+    >
+      Full example
     </sonic-button>
   </template>
 </sonic-code>
 
+## Accessibility
+
+Each toast uses **`role="alert"`** for **`error`** and **`role="status"`** otherwise (with **`aria-live="polite"`** when applicable). Status icons are decorative (**`aria-hidden`**). The close control has an i18n **`aria-label`**. When there is no **`label`**, a truncated string **`aria-label`** may be derived from plain **`text`**.
+
+## API reference
+
+Options passed to **`SonicToast.add(conf)`**:
+
+| Option | Values | Description |
+|----------|---------|-------------|
+| `text` | string · Lit template | Main body; HTML strings are supported |
+| `label` | string · Lit template | Optional heading above **`text`** |
+| `title` | string · Lit template | Deprecated alias for **`label`** |
+| `status` | `success` · `error` · `warning` · `info` · `` (empty) | Semantic styling and live region behavior |
+| `id` | string · number | Stable id for deduplication and **`dismissForever`** (defaults to timestamp) |
+| `preserve` | boolean | Skip auto-hide; forced when **`text`** contains interactive markup |
+| `ghost` | boolean | Semi-transparent and non-interactive; kept by **`removeAll`** |
+| `dismissForever` | boolean | Persist dismissal in **`localStorage`** when closed (requires stable **`id`**) |
+| `styleSheet` | modal style input | Extra adopted styles on the toast item shadow root |
+| `useSlot` | boolean | Legacy: project **`text`** into the light DOM slot |
+
+| Method | Description |
+|--------|-------------|
+| `SonicToast.add(conf)` | Append a toast; returns the config or **`null`** if skipped (dismissed forever or duplicate) |
+| `SonicToast.removeAll()` | Remove all non-**`ghost`** toasts |
+| `SonicToast.removeItemsByStatus(status)` | Remove toasts matching **`status`** |
+| `SonicToast.removeItemById(id)` | Remove a single toast by **`id`** |
+| `SonicToast.removeTemporaryItems()` | Remove toasts without **`preserve`** |
+
+**`sonic-toast`** is mounted automatically; **`sonic-toast-item`** is internal. In iframes, toasts can delegate to the parent window via **`postMessage`**.

package/src/core/components/ui/toast/types.ts

@@ -3,7 +3,7 @@ import { TemplateResult } from "lit";
 import { DirectiveResult } from "lit/directive.js";
 import { ModalStyleSheetInput } from "@supersoniks/concorde/core/components/ui/modal/modal-utils";
 
-export type ToastStatus = Message["status"] | "" | "success";
+export type ToastStatus = Message["status"] | "" | "default";
 
 export type ToastContent = string | TemplateResult | DirectiveResult;