@supersoniks/concorde 4.9.98-visual-stack.1 → 4.9.98-visual-stack.3

package/src/core/components/ui/toast/render-content.ts

@@ -0,0 +1,13 @@
+import { nothing } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { ToastContent } from "@supersoniks/concorde/core/components/ui/toast/types";
+
+/**
+ * Renders toast title/text content: TemplateResult/DirectiveResult as-is,
+ * HTML strings via unsafeHTML (legacy).
+ */
+export function renderToastContent(content?: ToastContent) {
+  if (!content) return nothing;
+  if (content instanceof Object) return content;
+  return unsafeHTML(content);
+}

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

@@ -1,23 +1,37 @@
-import { html, LitElement, css, nothing } from "lit";
+import { html, LitElement, css, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import "@supersoniks/concorde/core/components/ui/toast/types";
-import { ToastStatus } from "@supersoniks/concorde/core/components/ui/toast/types";
+import {
+  ToastContent,
+  ToastStatus,
+  ToastStyleSheetInput,
+} from "@supersoniks/concorde/core/components/ui/toast/types";
+import { renderToastContent } from "@supersoniks/concorde/core/components/ui/toast/render-content";
+import { normalizeStyleSheets } from "@supersoniks/concorde/core/components/ui/modal/modal-utils";
 import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
 import { HTML } from "@supersoniks/concorde/utils";
-
-const icon: Record<string, string> = {
-  warning: "warning-circled-outline",
-  success: "check-circled-outline",
-  error: "warning-circled-outline",
-  info: "info-empty",
-};
+import {
+  isToastDismissed,
+  markToastDismissed,
+} from "@supersoniks/concorde/core/components/ui/toast/dismissed";
+import { resolveToastCloseLabel } from "@supersoniks/concorde/core/components/ui/_i18n/ui-aria-labels";
+
+import {
+  statusAriaLive,
+  statusAriaRole,
+  statusColor,
+  statusIcon,
+  toStatus,
+} from "@supersoniks/concorde/core/components/ui/_css/type";
+
+const AUTO_HIDE_DELAY = 6000;
 const tagName = "sonic-toast-item";
 
 @customElement(tagName)
 export class SonicToastItem extends LitElement {
   static styles = [
     customScroll,
+    statusColor,
     css`
       * {
         box-sizing: border-box;
@@ -26,7 +40,6 @@ export class SonicToastItem extends LitElement {
         display: block;
         pointer-events: auto;
         position: relative;
-        --sc-toast-status-color: transparent;
         --sc-toast-color: var(--sc-base-content, #000);
         --sc-toast-bg: var(--sc-base, #fff);
         --sc-toast-rounded: var(--sc-rounded-md);
@@ -47,14 +60,13 @@ export class SonicToastItem extends LitElement {
         pointer-events: auto;
         overflow: hidden;
         line-height: 1.25;
-        color: var(--sc-toast-color);
         box-shadow: var(--sc-toast-shadow);
         border-radius: var(--sc-toast-rounded);
         background: var(--sc-toast-bg);
       }
 
       .sonic-toast-content {
-        padding: 1em 2.5rem 1em 1em;
+        padding: 0.8em 2.25rem 0.8em 0.8em;
         display: flex;
         gap: 0.5rem;
         overflow: auto;
@@ -62,6 +74,7 @@ export class SonicToastItem extends LitElement {
       }
 
       .sonic-toast-text {
+        color: var(--sc-toast-color);
         align-self: center;
         margin-top: auto;
         margin-bottom: auto;
@@ -109,6 +122,7 @@ export class SonicToastItem extends LitElement {
         border-radius: 50%;
         text-align: center;
         opacity: 0.5;
+        color: var(--sc-toast-color);
         background: rgba(0, 0, 0, 0);
       }
 
@@ -128,39 +142,21 @@ export class SonicToastItem extends LitElement {
       /*Title*/
       .sonic-toast-title {
         font-weight: bold;
-        font-size: 1.15rem;
-        margin: 0.15em 0 0.25em;
+        font-size: 1.125rem;
+        margin: 0.15em 0 0.15em;
         line-height: 1.2;
       }
 
-      /*STATUS*/
-      .success {
-        --sc-toast-status-color: var(
-          --sc-success,
-          var(--sc-base-content, #000)
-        );
-      }
-
-      .error {
-        --sc-toast-status-color: var(--sc-danger, var(--sc-base-content, #000));
+      /*STATUS — accent via statusColor (--sc-_color) */
+      :host([status]) .sonic-toast {
+        border-top: 3px solid var(--sc-_color);
       }
 
-      .warning {
-        --sc-toast-status-color: var(
-          --sc-warning,
-          var(--sc-base-content, #000)
-        );
-      }
-
-      .info {
-        --sc-toast-status-color: var(--sc-info, var(--sc-base-content, #000));
-      }
-
-      .success,
-      .error,
-      .info,
-      .warning {
-        border-top: 3px solid var(--sc-toast-status-color, currentColor);
+      :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 {
@@ -175,20 +171,12 @@ export class SonicToastItem extends LitElement {
         pointer-events: none;
         transition: 0.2s;
         border-radius: var(--sc-toast-rounded);
-        background-color: var(--sc-toast-status-color);
       }
 
       .sonic-toast:hover:before {
         opacity: 0.025;
       }
 
-      .info .sonic-toast-icon,
-      .error .sonic-toast-icon,
-      .success .sonic-toast-icon,
-      .warning .sonic-toast-icon {
-        color: var(--sc-toast-status-color, currentColor);
-      }
-
       .sonic-toast-icon {
         position: sticky;
         top: 0;
@@ -201,16 +189,54 @@ export class SonicToastItem extends LitElement {
     `,
   ];
 
-  @property({ type: String }) title = "";
+  @property() label: ToastContent = "";
   @property({ type: String }) id = "";
-  @property({ type: String }) text = "";
-  @property({ type: String }) status: ToastStatus = "";
+  @property() text: ToastContent = "";
+  @property({ type: String, reflect: true }) status: ToastStatus = "";
   @property({ type: Boolean }) ghost = false;
   @property({ type: Boolean }) preserve = false;
   @property({ type: Boolean }) dismissForever = false;
   @property({ type: String }) maxHeight = "10rem";
+  @property({ type: Boolean }) useSlot = false;
+  @property({ attribute: false }) styleSheet?: ToastStyleSheetInput;
   @state() visible = true;
   @state() private _titleId: string = "";
+  @state() private _dismissed = false;
+  private _adoptedStyleSheets: Array<CSSStyleSheet> = [];
+  private _hideTimer?: ReturnType<typeof setTimeout>;
+  private _hideRemaining = AUTO_HIDE_DELAY;
+  private _hideStartedAt = 0;
+  private _hovered = false;
+  private _focused = false;
+  private _hidden = false;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener("mouseenter", this._onMouseEnter);
+    this.addEventListener("mouseleave", this._onMouseLeave);
+    this.addEventListener("focusin", this._onFocusIn);
+    this.addEventListener("focusout", this._onFocusOut);
+  }
+
+  disconnectedCallback(): void {
+    this._clearHideTimer();
+    this.removeEventListener("mouseenter", this._onMouseEnter);
+    this.removeEventListener("mouseleave", this._onMouseLeave);
+    this.removeEventListener("focusin", this._onFocusIn);
+    this.removeEventListener("focusout", this._onFocusOut);
+    super.disconnectedCallback();
+  }
+
+  protected willUpdate(changedProperties: PropertyValues): void {
+    if (
+      changedProperties.has("dismissForever") ||
+      changedProperties.has("id")
+    ) {
+      this._dismissed =
+        this.dismissForever && !!this.id && isToastDismissed(this.id);
+    }
+    super.willUpdate(changedProperties);
+  }
 
   // @queryAssignedElements({flatten: true, slot: main"})
   // textSlot!: HTMLElement[];
@@ -221,7 +247,7 @@ export class SonicToastItem extends LitElement {
    * - "status" pour les autres (messages informatifs)
    */
   getAriaRole(): "alert" | "status" {
-    return this.status === "error" ? "alert" : "status";
+    return statusAriaRole(toStatus(this.status) ?? "default");
   }
 
   /**
@@ -230,7 +256,7 @@ export class SonicToastItem extends LitElement {
    * - "polite" pour les autres (peut attendre)
    */
   getAriaLive(): "polite" | null {
-    return this.status === "error" ? null : "polite";
+    return statusAriaLive(toStatus(this.status) ?? "default");
   }
 
   /**
@@ -246,56 +272,30 @@ export class SonicToastItem extends LitElement {
     return this._titleId;
   }
 
-  /**
-   * Génère un label ARIA descriptif pour le bouton de fermeture
-   */
-  getCloseButtonLabel(): string {
-    const statusLabels: Record<string, string> = {
-      error: "Fermer le message d'erreur",
-      warning: "Fermer l'avertissement",
-      success: "Fermer le message de succès",
-      info: "Fermer l'information",
-    };
-    const statusLabel = this.status
-      ? statusLabels[this.status] || "Fermer la notification"
-      : "Fermer la notification";
-    return statusLabel;
-  }
-
   render() {
-    // check if the toast is dismissed
-    if (this.dismissForever) {
-      const dismissed = localStorage.getItem("sonic-toast-dismissed") || "{}";
-      const dismissedObj = JSON.parse(dismissed);
-      if (dismissedObj[this.id]) {
-        return nothing;
-      }
-    }
-
-    if (!this.visible) {
+    if (this._dismissed || !this.visible) {
       return nothing;
     }
 
-    const titleId = this.title ? this.getTitleId() : undefined;
+    const titleId = this.label ? this.getTitleId() : undefined;
     // Extrait un label pour aria-label si pas de titre, en essayant de couper proprement
     const ariaLabel =
-      !this.title && this.text
+      !this.label && typeof this.text === "string"
         ? this.text.length > 100
           ? this.text.substring(0, 100).replace(/\s+\S*$/, "") + "..."
           : this.text
         : undefined;
 
     const ariaLive = this.getAriaLive();
-
     return html`<div
-      class="sonic-toast ${this.status} ${this.ghost ? "ghost" : ""}"
+      class="sonic-toast ${this.ghost ? "ghost" : ""}"
       role=${this.getAriaRole()}
       aria-live=${ariaLive || nothing}
       aria-atomic="true"
       aria-label=${ariaLabel || nothing}
     >
       <button
-        aria-label=${this.getCloseButtonLabel()}
+        aria-label=${resolveToastCloseLabel(this.status)}
         class="sonic-toast-close"
         @click=${() => this.hide()}
       >
@@ -307,52 +307,128 @@ export class SonicToastItem extends LitElement {
       >
         ${this.status &&
         html`<sonic-icon
-          name=${icon[this.status]}
+          name=${statusIcon[toStatus(this.status) ?? "default"]}
           class="sonic-toast-icon"
-          size="2xl"
+          size="xl"
           aria-hidden="true"
         ></sonic-icon>`}
 
         <div class="sonic-toast-text">
-          ${this.title
+          ${this.label
             ? html`<div class="sonic-toast-title" id=${titleId}>
-                ${this.title}
+                ${renderToastContent(this.label)}
               </div>`
             : ""}
-          ${this.text ? unsafeHTML(this.text) : ""}
+          ${this.useSlot ? nothing : renderToastContent(this.text)}
           <slot></slot>
         </div>
-
-        ${!this.preserve ? this.autoHide() : ""}
       </div>
     </div>`;
   }
 
+  protected updated(_changedProperties: PropertyValues): void {
+    if (_changedProperties.has("styleSheet")) {
+      this.syncAdoptedStyleSheets();
+    }
+    if (
+      _changedProperties.has("preserve") ||
+      _changedProperties.has("visible") ||
+      _changedProperties.has("_dismissed")
+    ) {
+      this._syncHideTimer();
+    }
+  }
+
+  syncAdoptedStyleSheets() {
+    if (!(this.renderRoot instanceof ShadowRoot)) return;
+
+    const nextStyleSheets = normalizeStyleSheets(this.styleSheet);
+    const currentStyleSheets = this.renderRoot.adoptedStyleSheets.filter(
+      (sheet) => !this._adoptedStyleSheets.includes(sheet),
+    );
+
+    this.renderRoot.adoptedStyleSheets = [
+      ...currentStyleSheets,
+      ...nextStyleSheets,
+    ];
+    this._adoptedStyleSheets = nextStyleSheets;
+  }
+
   hide() {
+    this._clearHideTimer();
+    this._hidden = true;
     if (!HTML.getClosestElement(this, "sonic-toast")) {
       this.visible = false;
     }
 
     if (this.dismissForever) {
-      // set in local Storage an Object with the id as key and if it's dismissed as value
-      const dismissed = localStorage.getItem("sonic-toast-dismissed") || "{}";
-      const dismissedObj = JSON.parse(dismissed);
-      dismissedObj[this.id] = true;
-      localStorage.setItem(
-        "sonic-toast-dismissed",
-        JSON.stringify(dismissedObj)
-      );
+      markToastDismissed(this.id);
     }
     this.dispatchEvent(new CustomEvent("hide", { bubbles: true }));
   }
 
   show() {
+    this._hidden = false;
+    this._hideRemaining = AUTO_HIDE_DELAY;
     this.visible = true;
+    this._syncHideTimer();
   }
 
-  autoHide() {
-    setTimeout(() => {
+  private _syncHideTimer() {
+    const shouldRun =
+      !this.preserve &&
+      this.visible &&
+      !this._hidden &&
+      !this._dismissed &&
+      !this._hovered &&
+      !this._focused;
+
+    if (!shouldRun) {
+      this._pauseHideTimer();
+      return;
+    }
+    if (this._hideTimer) return;
+
+    this._hideStartedAt = Date.now();
+    this._hideTimer = setTimeout(() => {
+      this._hideTimer = undefined;
       this.hide();
-    }, 6000);
+    }, this._hideRemaining);
   }
+
+  private _pauseHideTimer() {
+    if (!this._hideTimer) return;
+    clearTimeout(this._hideTimer);
+    this._hideTimer = undefined;
+    this._hideRemaining = Math.max(
+      0,
+      this._hideRemaining - (Date.now() - this._hideStartedAt),
+    );
+  }
+
+  private _clearHideTimer() {
+    clearTimeout(this._hideTimer);
+    this._hideTimer = undefined;
+  }
+
+  private _onMouseEnter = () => {
+    this._hovered = true;
+    this._syncHideTimer();
+  };
+
+  private _onMouseLeave = () => {
+    this._hovered = false;
+    this._syncHideTimer();
+  };
+
+  private _onFocusIn = () => {
+    this._focused = true;
+    this._syncHideTimer();
+  };
+
+  private _onFocusOut = (e: FocusEvent) => {
+    if (this.contains(e.relatedTarget as Node | null)) return;
+    this._focused = false;
+    this._syncHideTimer();
+  };
 }

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

@@ -5,13 +5,33 @@ import { animate } from "@lit-labs/motion";
 import Objects from "@supersoniks/concorde/core/utils/Objects";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { styleMap, StyleInfo } from "lit/directives/style-map.js";
 import "@supersoniks/concorde/core/components/ui/toast/toast-item";
+import { renderToastContent } from "@supersoniks/concorde/core/components/ui/toast/render-content";
+import { isToastDismissed } from "@supersoniks/concorde/core/components/ui/toast/dismissed";
 import {
   Toast,
+  ToastContent,
   ToastStatus,
 } from "@supersoniks/concorde/core/components/ui/toast/types";
+
+let deprecatedTitleWarned = false;
+
+function resolveToastLabel(
+  conf: Pick<Toast, "label" | "title">,
+): ToastContent | undefined {
+  if (conf.label !== undefined) return conf.label;
+  if (conf.title !== undefined) {
+    if (!deprecatedTitleWarned) {
+      deprecatedTitleWarned = true;
+      console.warn(
+        "[concorde] Toast.title est déprécié, utiliser Toast.label.",
+      );
+    }
+    return conf.title;
+  }
+  return undefined;
+}
 import { ConcordeWindow } from "@supersoniks/concorde/core/_types/types";
 import { Theme } from "@supersoniks/concorde/core/components/ui/theme/theme";
 import { sonicClassPrefix } from "@supersoniks/concorde/core/utils/Utils";
@@ -47,7 +67,7 @@ export class SonicToast extends LitElement {
         bottom: "1.25rem",
         right: "1.25rem",
         zIndex: "10000",
-        maxWidth: "64ch",
+        maxWidth: "45ch",
         flexDirection: "column-reverse",
       };
     }
@@ -55,7 +75,6 @@ export class SonicToast extends LitElement {
     // ${window.parent == window ? "fixed-area" : ""}
     SonicToast.handleExistingToastDelegation();
     if (!this.toasts) return nothing;
-
     return html`<div style=${styleMap(styles)}>
       ${repeat(
         this.toasts,
@@ -64,7 +83,10 @@ export class SonicToast extends LitElement {
           <sonic-toast-item
             maxHeight=${isIframe ? "none" : "10rem"}
             status=${ifDefined(item.status)}
-            title=${ifDefined(item.title)}
+            .label=${resolveToastLabel(item)}
+            .text=${item.useSlot ? undefined : item.text}
+            .styleSheet=${item.styleSheet}
+            ?useSlot=${item.useSlot}
             ?ghost=${item.ghost}
             ?dismissForever=${item.dismissForever}
             ?preserve=${item.preserve}
@@ -93,10 +115,9 @@ export class SonicToast extends LitElement {
               stabilizeOut: true,
             })}
           >
-            <!-- Le texte est passé dans le slot et non pas en propriété pour contrer des problèmatiques de shadow-dom et d'appel exterieur (exemple: fancybox) -->
-            ${item.text ? unsafeHTML(item.text) : ""}
+            ${item.useSlot ? renderToastContent(item.text) : nothing}
           </sonic-toast-item>
-        `
+        `,
       )}
     </div>`;
   }
@@ -124,7 +145,21 @@ export class SonicToast extends LitElement {
 
     // Filtrer pour garder seulement les toasts qui ne correspondent pas au statut donné
     toastComponent.toasts = toastComponent.toasts.filter(
-      (toast) => toast.status !== status
+      (toast) => toast.status !== status,
+    );
+  }
+
+  static removeItemById(id: string | number) {
+    if (SonicToast.delegateToasts) {
+      SonicToast.handleExistingToastDelegation();
+      window.parent.postMessage({ type: "removeItemById", id }, "*");
+      return;
+    }
+    const toastComponent: SonicToast = SonicToast.getInstance();
+    if (!toastComponent) return;
+
+    toastComponent.toasts = toastComponent.toasts.filter(
+      (toast) => toast.id !== id,
     );
   }
 
@@ -139,7 +174,7 @@ export class SonicToast extends LitElement {
     if (!toastComponent) return;
 
     toastComponent.toasts = toastComponent.toasts.filter(
-      (item) => item.preserve
+      (item) => item.preserve,
     );
   }
 
@@ -159,32 +194,30 @@ export class SonicToast extends LitElement {
     }
     // Init toast area si absente (au <sonic-theme> ou <body< à défaut)
     const toastComponent = SonicToast.getInstance();
-
     // Ajoute le toast à la liste
     const nextId = conf.id ?? new Date().valueOf();
 
     const interactiveRegExp = new RegExp(
-      "</a>|</.*?button>|</.*?input>|</.*?textarea>|</.*?select>"
+      "</a>|</.*?button>|</.*?input>|</.*?textarea>|</.*?select>",
     );
-    const hasInteractive = interactiveRegExp.test(conf.text);
+    const hasInteractive =
+      typeof conf.text === "string" && interactiveRegExp.test(conf.text);
 
     const currentToast = {
       id: nextId,
       text: conf.text,
-      title: conf.title,
+      label: resolveToastLabel(conf),
       status: conf.status,
       preserve: hasInteractive ? true : conf.preserve,
       ghost: conf.ghost,
       dismissForever: conf.dismissForever,
+      styleSheet: conf.styleSheet,
+      useSlot: conf.useSlot,
     };
 
     // check if the toast is dismissed
-    if (conf.dismissForever && conf.id) {
-      const dismissed = localStorage.getItem("sonic-toast-dismissed") || "{}";
-      const dismissedObj = JSON.parse(dismissed);
-      if (dismissedObj[conf.id]) {
-        return null;
-      }
+    if (conf.dismissForever && conf.id && isToastDismissed(conf.id)) {
+      return null;
     }
 
     if (toastComponent?.toasts.length) {
@@ -210,7 +243,7 @@ export class SonicToast extends LitElement {
     const toastComponent: SonicToast = SonicToast.getInstance();
     window.parent.postMessage(
       { type: "addToasts", toasts: toastComponent.toasts },
-      "*"
+      "*",
     );
     toastComponent.toasts = [];
   }
@@ -220,7 +253,7 @@ export class SonicToast extends LitElement {
       SonicToast.handleExistingToastDelegation();
       window.parent.postMessage(
         { type: "removeToast", toast: toastToRemove },
-        "*"
+        "*",
       );
       return;
     }
@@ -257,6 +290,10 @@ function handleIframeContexts() {
       SonicToast.removeItemsByStatus(e.data.status);
     }
 
+    if (e.data.type == "removeItemById") {
+      SonicToast.removeItemById(e.data.id);
+    }
+
     if (e.data.type == "removeTemporaryItems") {
       SonicToast.removeTemporaryItems();
     }

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

@@ -1,14 +1,26 @@
 import { Message } from "@supersoniks/concorde/core/_types/types";
+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 ToastContent = string | TemplateResult | DirectiveResult;
+
+export type ToastStyleSheetInput = ModalStyleSheetInput;
+
 // Toast
 export type Toast = {
   id?: string | number;
-  text: string;
-  title?: string;
+  text: ToastContent;
+  label?: ToastContent;
+  /** @deprecated Utiliser `label`. */
+  title?: ToastContent;
   status?: ToastStatus;
   preserve?: boolean;
   ghost?: boolean;
   dismissForever?: boolean;
+  styleSheet?: ToastStyleSheetInput;
+  /** Legacy: project text into the light DOM slot instead of the shadow root. */
+  useSlot?: boolean;
 };