@supersoniks/concorde 5.0.1 → 5.0.3

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

@@ -30,29 +30,31 @@
   </template>
 </sonic-code>
 
-Default placement is `bottom`. Content is aligned on the start of the trigger, add `center` to center it. If there is not enough room, content flips to the opposite side and stays inside the viewport.
+Default placement is `bottom`. Placement is written `side-align`, like `sonic-tooltip`: `side` is `top`, `right`, `bottom` or `left`, `align` is `start`, `center` or `end`. Without `align`, content is aligned on the start of the trigger. If there is not enough room, content flips to the opposite side and stays inside the viewport.
+
+The former space syntax (`placement="bottom center"`) still works but is deprecated.
 
 <sonic-code>
   <template>
-    <sonic-pop class="inline-block" placement="bottom center">
+    <sonic-pop class="inline-block" placement="bottom-center">
       <sonic-button>Bottom center</sonic-button>
       <sonic-menu slot="content">
         <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
       </sonic-menu>
     </sonic-pop>
-    <sonic-pop class="inline-block" placement="top center">
+    <sonic-pop class="inline-block" placement="top-center">
       <sonic-button>Top center</sonic-button>
       <sonic-menu slot="content">
         <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
       </sonic-menu>
     </sonic-pop>
-    <sonic-pop class="inline-block" placement="left center">
+    <sonic-pop class="inline-block" placement="left-center">
       <sonic-button>Left center</sonic-button>
       <sonic-menu slot="content">
         <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
       </sonic-menu>
     </sonic-pop>
-    <sonic-pop class="inline-block" placement="right center">
+    <sonic-pop class="inline-block" placement="right-center">
       <sonic-button>Right center</sonic-button>
       <sonic-menu slot="content">
         <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>

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

@@ -7,20 +7,31 @@ import HTML, {
 } from "@supersoniks/concorde/core/utils/HTML";
 import {
   computeFloatingPosition,
+  FloatingPlacement,
   FloatingSide,
   getFloatingBounds,
+  parsePlacement,
+  startFrameLoop,
   supportsPopover,
 } from "@supersoniks/concorde/core/utils/positioning";
 import { Shadow, shadowable } from "../_css/shadow";
-type PopPlacement =
-  | "bottom"
-  | "top"
-  | "right"
-  | "left"
-  | "bottom center"
-  | "top center"
-  | "right center"
-  | "left center";
+
+/** @deprecated écriture avec espace, utiliser `"bottom-center"`. */
+type LegacyPopPlacement = `${FloatingSide} center`;
+type PopPlacement = FloatingPlacement | LegacyPopPlacement;
+
+let legacyPlacementWarned = false;
+
+function normalizePopPlacement(placement: PopPlacement): FloatingPlacement {
+  if (!placement.includes(" ")) return placement as FloatingPlacement;
+  if (!legacyPlacementWarned) {
+    legacyPlacementWarned = true;
+    console.warn(
+      `[concorde] sonic-pop placement="${placement}" est déprécié, utiliser placement="${placement.replace(" ", "-")}".`,
+    );
+  }
+  return placement.replace(" ", "-") as FloatingPlacement;
+}
 
 const tagName = "sonic-pop";
 
@@ -108,7 +119,6 @@ export class Pop extends LitElement {
   @property({ type: String, reflect: true }) shadow: Shadow = "lg";
 
   @property({ type: String }) placement: PopPlacement = "bottom";
-  positioningRuns = false;
   lastContentX = 0;
   lastContentY = 0;
   resizeObserver: ResizeObserver = new ResizeObserver(() =>
@@ -116,12 +126,9 @@ export class Pop extends LitElement {
   );
 
   @state() private triggerElement: HTMLElement | null = null;
-
-  runPositioningLoop() {
-    if (!this.positioningRuns) return;
-    this.computePosition(this.placement);
-    window.requestAnimationFrame(() => this.runPositioningLoop());
-  }
+  private stopPositioning?: () => void;
+  private hideDisplayTimeout?: ReturnType<typeof setTimeout>;
+  private pendingShow = false;
 
   toggle(e: Event) {
     if (this.open && this.noToggle) return;
@@ -134,12 +141,22 @@ export class Pop extends LitElement {
       this.triggerElement = e.target as HTMLElement;
     }
 
-    this.open = !this.open;
-    this.open ? this.show() : this.hide();
+    if (this.open) this.hide();
+    else this.show();
   }
 
   show() {
+    if (!this.popContent) {
+      this.pendingShow = true;
+      this.updateComplete.then(() => {
+        if (this.pendingShow) this.show();
+      });
+      return;
+    }
+    this.pendingShow = false;
+    if (this.open) return;
     if (!Pop.supportsPopover) this.setMaxZindex();
+    clearTimeout(this.hideDisplayTimeout);
     this.popContent?.style?.removeProperty("display");
     if (Pop.supportsPopover && !this.popContent.matches(":popover-open")) {
       this.popContent.showPopover();
@@ -148,41 +165,50 @@ export class Pop extends LitElement {
     // Pop.pops suit l'ordre d'ouverture : Escape ferme le dernier ouvert.
     if (Pop.pops.delete(this)) Pop.pops.add(this);
     this.popContent.setAttribute("tabindex", "0");
-    if (this.popBtn && this.popContent && !this.positioningRuns) {
-      this.positioningRuns = true;
+    if (this.popBtn && this.popContent && !this.stopPositioning) {
       this.lastContentX = 0;
       this.lastContentY = 0;
-      this.runPositioningLoop();
+      this.stopPositioning = startFrameLoop(() =>
+        this.computePosition(this.placement),
+      );
     }
     this.dispatchEvent(new CustomEvent("show"));
   }
 
   hide() {
+    this.pendingShow = false;
+    if (!this.popContent) {
+      this.dispatchEvent(new CustomEvent("hide"));
+      return;
+    }
     if (!Pop.supportsPopover) this.resetZindexes();
     if (Pop.supportsPopover && this.popContent?.matches(":popover-open")) {
       this.popContent.hidePopover();
     }
     this.open = false;
     this.popContent.setAttribute("tabindex", "-1");
-    this.positioningRuns = false;
+    this.stopPositionLoop();
+    if (!Pop.supportsPopover) this.hideContentAfterTransition();
     if (this.triggerElement) {
       this.triggerElement.focus();
       this.triggerElement = null;
     }
-    Object.assign(this.popContent.style, {
-      left: `${this.lastContentX}px`,
-      top: `${this.lastContentY}px`,
-    });
     this.dispatchEvent(new CustomEvent("hide"));
   }
 
-  protected updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
-    // Le template remet style="display:none" à chaque render —
-    // on le retire après coup quand le pop est ouvert.
-    if (this.open) {
-      this.popContent?.style?.removeProperty("display");
-    }
+  private stopPositionLoop() {
+    this.stopPositioning?.();
+    this.stopPositioning = undefined;
+  }
+
+  /** Sans display:none, le contenu masqué par opacité resterait atteignable au clavier. */
+  private hideContentAfterTransition() {
+    clearTimeout(this.hideDisplayTimeout);
+    const duration =
+      parseFloat(getComputedStyle(this.popContent).transitionDuration) * 1000;
+    this.hideDisplayTimeout = setTimeout(() => {
+      if (!this.open) this.popContent.style.display = "none";
+    }, duration || 0);
   }
 
   /**
@@ -226,6 +252,7 @@ export class Pop extends LitElement {
     const target = path[0] as HTMLElement;
 
     Pop.pops.forEach((pop: Pop) => {
+      if (!pop.open) return;
       const popContainsTarget = path.includes(pop);
       const popContentContainsTarget = path.includes(
         pop.querySelector('[slot="content"]') as EventTarget,
@@ -247,7 +274,8 @@ export class Pop extends LitElement {
     if (Pop.pops.size == 0) {
       document.addEventListener("pointerdown", this._handleClosePop);
       document.addEventListener("click", this._handleClosePop);
-      document.addEventListener("keydown", Pop._handleKeyDown);
+      // Capture : passer avant les écouteurs Escape des ancêtres (ex. sonic-modal).
+      document.addEventListener("keydown", Pop._handleKeyDown, true);
     }
     Pop.pops.add(this);
   }
@@ -264,24 +292,36 @@ export class Pop extends LitElement {
     if (this.popContent) {
       this.resizeObserver.unobserve(this.popContent);
     }
+    this.stopPositionLoop();
+    clearTimeout(this.hideDisplayTimeout);
+    if (this.open) {
+      if (!Pop.supportsPopover) this.resetZindexes();
+      this.open = false;
+      this.triggerElement = null;
+      this.popContent?.style.setProperty("display", "none");
+    }
     super.disconnectedCallback();
     Pop.pops.delete(this);
     if (Pop.pops.size == 0) {
       document.removeEventListener("pointerdown", this._handleClosePop);
       document.removeEventListener("click", this._handleClosePop);
-      document.removeEventListener("keydown", Pop._handleKeyDown);
+      document.removeEventListener("keydown", Pop._handleKeyDown, true);
     }
   }
 
   computePosition(placement: PopPlacement) {
-    const [side, secondary] = placement.split(" ");
+    const { side, align } = parsePlacement(
+      normalizePopPlacement(placement),
+      "bottom",
+      "start",
+    );
     const contentRect = this.popContent.getBoundingClientRect();
 
     const { x, y } = computeFloatingPosition({
       anchor: this.getBoundingClientRect(),
       floating: contentRect,
-      side: side as FloatingSide,
-      align: secondary == "center" ? "center" : "start",
+      side,
+      align,
       bounds: getFloatingBounds(this.popContent, 5),
     });
 

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

@@ -11,6 +11,7 @@ import "@supersoniks/concorde/core/components/ui/table/table-tbody";
 import "@supersoniks/concorde/core/components/ui/table/table-tfoot";
 import "@supersoniks/concorde/core/components/ui/table/table-caption";
 import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
+import { Size } from "@supersoniks/concorde/core/components/ui/_css/size";
 
 const tagName = "sonic-table";
 @customElement(tagName)
@@ -66,14 +67,7 @@ export class Table extends LitElement {
     `,
   ];
 
-  @property({ type: String, reflect: true }) size?:
-    | "2xs"
-    | "xs"
-    | "sm"
-    | "md"
-    | "lg"
-    | "xl"
-    | "2xl";
+  @property({ type: String, reflect: true }) size?: Size;
   @property({ type: Boolean, reflect: true }) bordered?: boolean;
   @property({ type: Boolean, reflect: true }) rounded?: boolean;
   @property({ type: Boolean, reflect: true }) noCustomScroll?: boolean;

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

@@ -0,0 +1,14 @@
+import {
+  isDismissed,
+  markDismissed,
+} from "@supersoniks/concorde/core/utils/dismissed";
+
+const storageKey = "sonic-toast-dismissed";
+
+export function isToastDismissed(id: string | number): boolean {
+  return isDismissed(storageKey, id);
+}
+
+export function markToastDismissed(id: string | number): void {
+  markDismissed(storageKey, id);
+}

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

@@ -10,19 +10,28 @@ import { renderToastContent } from "@supersoniks/concorde/core/components/ui/toa
 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";
+import {
+  isToastDismissed,
+  markToastDismissed,
+} from "@supersoniks/concorde/core/components/ui/toast/dismissed";
+import { resolveToastCloseLabel } from "@supersoniks/concorde/core/components/ui/_i18n/ui-aria-labels";
 
-const icon: Record<string, string> = {
-  warning: "warning-circled-outline",
-  success: "check-circled-outline",
-  error: "warning-circled-outline",
-  info: "info-empty",
-};
+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;
@@ -31,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);
@@ -52,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;
@@ -67,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;
@@ -114,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);
       }
 
@@ -133,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)
-        );
+      /*STATUS — accent via statusColor (--sc-_color) */
+      :host([status]) .sonic-toast {
+        border-top: 3px solid var(--sc-_color);
       }
 
-      .error {
-        --sc-toast-status-color: var(--sc-danger, var(--sc-base-content, #000));
-      }
-
-      .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 {
@@ -180,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;
@@ -209,7 +192,7 @@ export class SonicToastItem extends LitElement {
   @property() label: ToastContent = "";
   @property({ type: String }) id = "";
   @property() text: ToastContent = "";
-  @property({ type: String }) status: ToastStatus = "";
+  @property({ type: String, reflect: true }) status: ToastStatus = "";
   @property({ type: Boolean }) ghost = false;
   @property({ type: Boolean }) preserve = false;
   @property({ type: Boolean }) dismissForever = false;
@@ -218,7 +201,42 @@ export class SonicToastItem extends LitElement {
   @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[];
@@ -229,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");
   }
 
   /**
@@ -238,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");
   }
 
   /**
@@ -254,33 +272,8 @@ 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;
     }
 
@@ -295,14 +288,14 @@ export class SonicToastItem extends LitElement {
 
     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()}
       >
@@ -314,9 +307,9 @@ 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>`}
 
@@ -329,8 +322,6 @@ export class SonicToastItem extends LitElement {
           ${this.useSlot ? nothing : renderToastContent(this.text)}
           <slot></slot>
         </div>
-
-        ${!this.preserve ? this.autoHide() : ""}
       </div>
     </div>`;
   }
@@ -339,6 +330,13 @@ export class SonicToastItem extends LitElement {
     if (_changedProperties.has("styleSheet")) {
       this.syncAdoptedStyleSheets();
     }
+    if (
+      _changedProperties.has("preserve") ||
+      _changedProperties.has("visible") ||
+      _changedProperties.has("_dismissed")
+    ) {
+      this._syncHideTimer();
+    }
   }
 
   syncAdoptedStyleSheets() {
@@ -357,30 +355,80 @@ export class SonicToastItem extends LitElement {
   }
 
   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();
+  };
 }