@antadesign/anta 0.3.33 → 0.3.35

package/dist/elements/a-toast.js

@@ -1,4 +1,4 @@
-import { HTMLElementBase, installDismissTrigger } from "../anta_helpers";
+import { HTMLElementBase, installDismissTrigger, isDOMNode } from "../anta_helpers";
 import "./a-toast.css";
 const EXIT_MS = 220;
 const DEFAULT_DURATION = 5e3;
@@ -10,21 +10,27 @@ class AToastElement extends HTMLElementBase {
   /** Off-DOM state channel — drives `:state(leaving)` for the exit fade. */
   #internals;
   /** The content slot. Also the element the `--toast-remaining` countdown
-   *  animates on, so slotted content can inherit the value (see SHADOW_STYLE). */
+   *  animates on, so slotted content can inherit the value (see a-toast.css). */
   #slot;
   /** A DOM node handed in via the `content` property (the wrapper's DOM-node
    *  branch). String / JSX content arrives as slotted children instead. */
   #content;
   /** The content node we last slotted, so an in-place update can swap or clear it
    *  without touching the reconciler's own children. */
-  #slotted;
+  #slotted = [];
+  #appliedContent;
   #timer;
   #exitTimer;
+  #timerView;
+  #exitView;
+  #countdown;
+  #exitCountdownTime = null;
   /** Time left on the auto-dismiss timer (ms), tracked across pause/resume. */
   #remaining = 0;
   /** When the current run started, for computing remaining on pause. */
   #startedAt = 0;
   #leaving = false;
+  #dismissed = false;
   // Independent pause holds — the countdown runs only when BOTH are false.
   #hovered = false;
   #focused = false;
@@ -36,10 +42,9 @@ class AToastElement extends HTMLElementBase {
       console.warn("a-toast: ElementInternals unavailable \u2014 exit fade disabled.", err);
     }
     const shadow = this.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = SHADOW_STYLE;
-    this.#slot = document.createElement("slot");
-    shadow.append(style, this.#slot);
+    this.#slot = this.doc.createElement("slot");
+    this.#slot.setAttribute("part", "content");
+    shadow.append(this.#slot);
     installDismissTrigger(this, DISMISS_ATTR, () => this.dismiss());
   }
   connectedCallback() {
@@ -48,7 +53,13 @@ class AToastElement extends HTMLElementBase {
     this.addEventListener("pointerleave", this.#onPointerLeave);
     this.addEventListener("focusin", this.#onFocusIn);
     this.addEventListener("focusout", this.#onFocusOut);
-    if (this.hasAttribute("leaving")) {
+    this.#focused = this.matches(":focus-within");
+    if (this.#leaving || this.hasAttribute("leaving")) {
+      this.#dismissed = false;
+      if (this.#exitCountdownTime != null) {
+        this.#startCountdown(this.#exitCountdownTime);
+        this.#exitCountdownTime = null;
+      }
       this.dismiss();
       return;
     }
@@ -56,10 +67,12 @@ class AToastElement extends HTMLElementBase {
   }
   disconnectedCallback() {
     this.#clearTimer();
-    if (this.#exitTimer != null) {
-      this.view.clearTimeout(this.#exitTimer);
-      this.#exitTimer = void 0;
-    }
+    this.#clearExitTimer();
+    if (this.#leaving) this.#exitCountdownTime = this.#countdown?.currentTime ?? this.#exitCountdownTime;
+    this.#countdown?.cancel();
+    this.#countdown = void 0;
+    this.#hovered = false;
+    this.#focused = false;
     this.removeEventListener("pointerenter", this.#onPointerEnter);
     this.removeEventListener("pointerleave", this.#onPointerLeave);
     this.removeEventListener("focusin", this.#onFocusIn);
@@ -79,13 +92,12 @@ class AToastElement extends HTMLElementBase {
   /** Cancel a pending exit and bring the toast back (an upsert landed during the
    *  exit window). */
   #revive() {
-    if (this.#exitTimer != null) {
-      this.view.clearTimeout(this.#exitTimer);
-      this.#exitTimer = void 0;
-    }
+    this.#clearExitTimer();
     this.#leaving = false;
+    this.#dismissed = false;
+    this.#exitCountdownTime = null;
     this.#internals?.states?.delete("leaving");
-    this.#startTimer();
+    if (this.isConnected) this.restart();
   }
   /** A live DOM node to show as the content (set by the wrapper's DOM-node
    *  branch). Paired getter/setter so React 19's property assignment works. */
@@ -93,7 +105,7 @@ class AToastElement extends HTMLElementBase {
     return this.#content ?? null;
   }
   set content(node) {
-    this.#content = node ?? void 0;
+    this.#content = isDOMNode(node) ? node : void 0;
     this.#applyContent();
   }
   /** Slot the content node into our own light DOM. Only ever touches the node WE
@@ -104,9 +116,12 @@ class AToastElement extends HTMLElementBase {
    *  arrives as reconciler-owned children, so `#content` is undefined and this
    *  only clears any node we had slotted. */
   #applyContent() {
-    if (this.#content === this.#slotted) return;
-    if (this.#slotted?.parentNode === this) this.removeChild(this.#slotted);
-    this.#slotted = this.#content;
+    if (this.#content === this.#appliedContent && !(this.#content?.nodeType === 11 && this.#content.hasChildNodes())) return;
+    for (const node of this.#slotted) {
+      if (node.parentNode === this) this.removeChild(node);
+    }
+    this.#appliedContent = this.#content;
+    this.#slotted = this.#content?.nodeType === 11 ? Array.from(this.#content.childNodes) : this.#content ? [this.#content] : [];
     if (this.#content) this.append(this.#content);
   }
   /** Auto-dismiss delay in ms. Empty / non-positive falls back to the 5000ms
@@ -132,25 +147,32 @@ class AToastElement extends HTMLElementBase {
    *  only — the auto-dismiss above is the real JS timer — so it degrades to a
    *  static full bar where custom-property animation is unsupported. Sticky
    *  (`Infinity` duration) runs no countdown; the var stays at its initial 1. */
-  #startCountdown() {
-    if (Number.isFinite(this.#duration)) {
-      this.#slot.style.animation = `toast-remaining ${this.#duration}ms linear forwards`;
-      this.#eachCountdown((a) => {
-        a.currentTime = 0;
-      });
+  #startCountdown(currentTime = 0) {
+    if (!Number.isFinite(this.#duration)) {
+      this.#countdown?.cancel();
+      this.#countdown = void 0;
+      return;
+    }
+    try {
+      if (!this.#countdown) {
+        const styles = this.view.getComputedStyle(this.#slot);
+        this.#countdown = this.#slot.animate?.({
+          "--toast-remaining": [
+            styles.getPropertyValue("--_toast-countdown-from").trim(),
+            styles.getPropertyValue("--_toast-countdown-to").trim()
+          ]
+        }, { duration: this.#duration, fill: "forwards" });
+      } else {
+        this.#countdown.effect?.updateTiming({ duration: this.#duration });
+      }
+      if (this.#countdown) this.#countdown.currentTime = currentTime;
       if (this.#paused || this.#leaving) this.#pauseCountdown();
-    } else {
-      this.#slot.style.animation = "";
+    } catch {
     }
   }
-  /** Run `fn` for the `--toast-remaining` animation on the slot, if present.
-   *  Guarded — `getAnimations` / animation control may be absent in a partial
-   *  runtime, and the countdown is non-essential (never let it break the toast). */
   #eachCountdown(fn) {
     try {
-      for (const a of this.#slot.getAnimations?.() ?? []) {
-        if (a.animationName === "toast-remaining") fn(a);
-      }
+      if (this.#countdown) fn(this.#countdown);
     } catch {
     }
   }
@@ -170,16 +192,26 @@ class AToastElement extends HTMLElementBase {
       return;
     }
     this.#startedAt = Date.now();
-    this.#timer = this.view.setTimeout(() => {
+    this.#timerView = this.view;
+    this.#timer = this.#timerView.setTimeout(() => {
       this.#timer = void 0;
+      this.#timerView = void 0;
       this.dismiss();
     }, this.#remaining);
     this.#playCountdown();
   }
   #clearTimer() {
     if (this.#timer != null) {
-      this.view.clearTimeout(this.#timer);
+      this.#timerView?.clearTimeout(this.#timer);
       this.#timer = void 0;
+      this.#timerView = void 0;
+    }
+  }
+  #clearExitTimer() {
+    if (this.#exitTimer != null) {
+      this.#exitView?.clearTimeout(this.#exitTimer);
+      this.#exitTimer = void 0;
+      this.#exitView = void 0;
     }
   }
   /** Freeze the timer, banking the time left, and freeze the display countdown
@@ -202,7 +234,8 @@ class AToastElement extends HTMLElementBase {
     this.#focused = true;
     this.#pause();
   };
-  #onFocusOut = () => {
+  #onFocusOut = (event) => {
+    if (isDOMNode(event.relatedTarget) && this.contains(event.relatedTarget)) return;
     this.#focused = false;
     this.#armIfActive();
   };
@@ -227,49 +260,30 @@ class AToastElement extends HTMLElementBase {
    *  update). If the toast is currently paused, the fresh time is banked and the
    *  countdown stays paused until hover / focus releases. */
   restart() {
-    if (this.#leaving) return;
+    if (this.#leaving || !this.isConnected) return;
     this.#clearTimer();
     this.#startTimer();
   }
   /** Play the exit (shadow only), then emit a bubbling `dismiss`. The owner
    *  removes the node on that event — the element never removes itself.
-   *  Idempotent. */
+   *  Idempotent within each connection. */
   dismiss() {
-    if (this.#leaving) return;
+    if (this.#exitTimer != null || this.#dismissed) return;
     this.#leaving = true;
     this.#clearTimer();
     this.#pauseCountdown();
     this.#internals?.states?.add("leaving");
+    if (!this.isConnected) return;
     const wait = this.#exitDuration();
-    this.#exitTimer = this.view.setTimeout(() => {
+    this.#exitView = this.view;
+    this.#exitTimer = this.#exitView.setTimeout(() => {
       this.#exitTimer = void 0;
-      this.dispatchEvent(new CustomEvent("dismiss", { bubbles: true, composed: true }));
+      this.#exitView = void 0;
+      this.#dismissed = true;
+      this.dispatchEvent(new this.view.CustomEvent("dismiss", { bubbles: true, composed: true }));
     }, wait);
   }
 }
-const SHADOW_STYLE = `
-  :host { display: block; opacity: 1; translate: 0 0; }
-  :host(:state(leaving)) { opacity: 0; }
-
-  @starting-style {
-    :host { opacity: 0; translate: 0 12px; }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    :host {
-      transition:
-        opacity var(--toast-dur, 220ms) ease,
-        translate var(--toast-dur, 220ms) ease;
-    }
-  }
-
-  slot { display: block; }
-
-  @keyframes toast-remaining {
-    from { --toast-remaining: 1; }
-    to { --toast-remaining: 0; }
-  }
-`;
 function register_a_toast() {
   if (typeof customElements === "undefined") return;
   if (!customElements.get("a-toast")) {

package/dist/elements/a-toaster.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-toaster{--toaster-inset: 16px;--toaster-gap: 12px;--toaster-width: 380px}a-toaster:not(:defined){display:none}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-toaster{--toaster-inset: 16px;--toaster-gap: 12px;--toaster-width: 380px;display:contents}a-toaster:not(:defined){display:none}a-toaster::part(region){position:fixed;inset:0;margin:0;padding:0;border:0;background:transparent;overflow:visible;pointer-events:none;width:auto;height:auto}a-toaster::part(region):popover-open{display:block}a-toaster::part(zone){position:absolute;display:flex;flex-direction:column;gap:var(--toaster-gap, 12px);width:min(var(--toaster-width, 380px),calc(100vw - 2 * var(--toaster-inset, 16px)));box-sizing:border-box;pointer-events:none}a-toaster>:is([slot=top-left],[slot=top-center],[slot=top-right],[slot=bottom-left],[slot=bottom-center],[slot=bottom-right]){pointer-events:auto}a-toaster::part(top-left),a-toaster::part(top-center),a-toaster::part(top-right){top:var(--toaster-inset, 16px);flex-direction:column-reverse}a-toaster::part(bottom-left),a-toaster::part(bottom-center),a-toaster::part(bottom-right){bottom:var(--toaster-inset, 16px)}a-toaster::part(top-left),a-toaster::part(bottom-left){left:var(--toaster-inset, 16px)}a-toaster::part(top-right),a-toaster::part(bottom-right){right:var(--toaster-inset, 16px)}a-toaster::part(top-center),a-toaster::part(bottom-center){left:50%;transform:translate(-50%)}}

package/dist/elements/a-toaster.js

@@ -5,22 +5,22 @@ const ZONES = TOAST_PLACEMENTS;
 class AToasterElement extends HTMLElementBase {
   #region;
   #shown = false;
+  #slots = [];
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = SHADOW_STYLE;
-    this.#region = document.createElement("div");
-    this.#region.className = "region";
+    this.#region = this.doc.createElement("div");
     this.#region.setAttribute("part", "region");
     this.#region.setAttribute("popover", "manual");
     for (const zone of ZONES) {
-      const slot = document.createElement("slot");
+      const slot = this.doc.createElement("slot");
       slot.name = zone;
+      slot.setAttribute("part", `zone ${zone}`);
       this.#region.append(slot);
+      this.#slots.push(slot);
     }
     this.#region.addEventListener("slotchange", this.#syncVisibility);
-    shadow.append(style, this.#region);
+    shadow.append(this.#region);
   }
   connectedCallback() {
     this.#syncVisibility();
@@ -28,12 +28,12 @@ class AToasterElement extends HTMLElementBase {
   disconnectedCallback() {
     this.#shown = false;
   }
-  /** Show the region while it holds a toast, hide it when empty. A child count
-   *  read + a shadow popover toggle — no host or light-DOM mutation. */
+  /** Show the popover while a placement has assigned elements. Unmatched
+   * children do not keep an empty region in the top layer. */
   #syncVisibility = () => {
     const region = this.#region;
     if (typeof region.showPopover !== "function") return;
-    const has = this.childElementCount > 0;
+    const has = this.#slots.some((slot) => slot.assignedElements().length > 0);
     if (has && !this.#shown) {
       if (!this.isConnected) return;
       try {
@@ -50,41 +50,6 @@ class AToasterElement extends HTMLElementBase {
     }
   };
 }
-const SHADOW_STYLE = `
-  :host { display: contents; }
-
-  .region {
-    position: fixed;
-    inset: 0;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    overflow: visible;
-    pointer-events: none;
-    width: auto;
-    height: auto;
-  }
-  .region:popover-open { display: block; }
-
-  slot {
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    gap: var(--toaster-gap, 12px);
-    width: min(var(--toaster-width, 380px), calc(100vw - 2 * var(--toaster-inset, 16px)));
-    box-sizing: border-box;
-    pointer-events: none;
-  }
-
-  ::slotted(*) { pointer-events: auto; }
-
-  slot[name^="top-"] { top: var(--toaster-inset, 16px); flex-direction: column-reverse; }
-  slot[name^="bottom-"] { bottom: var(--toaster-inset, 16px); flex-direction: column; }
-  slot[name$="-left"] { left: var(--toaster-inset, 16px); }
-  slot[name$="-right"] { right: var(--toaster-inset, 16px); }
-  slot[name$="-center"] { left: 50%; transform: translateX(-50%); }
-`;
 function register_a_toaster() {
   if (typeof customElements === "undefined") return;
   if (!customElements.get("a-toaster")) {

package/dist/elements/a-tooltip.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-tooltip:not(:defined){display:none}@media(hover:none)and (pointer:coarse){:where(:has(>a-tooltip)){-webkit-touch-callout:none;user-select:none}}a-tooltip{--tooltip-bg: light-dark( color-mix(in oklch, var(--bg-1) 80%, transparent), color-mix(in oklch, var(--bg-1) 70%, transparent) );--tooltip-shadow: 0 1px 8px color-mix(in oklch, var(--text-1) 15%, transparent), 0 0 1px color-mix(in oklch, var(--text-1) 50%, transparent);--tooltip-radius: 3px;--tooltip-max-width: min( calc(100vw - 20px) , 80ch);--tooltip-border: none;--tooltip-backdrop-filter: blur(8px)}a-tooltip[round]{--tooltip-radius: 20px;@supports (border-radius: attr(probe type(<length>),1px)){--tooltip-radius: attr(round type(<length>), 20px)}}.dark a-tooltip{--tooltip-shadow: 0 2px 16px color-mix(in oklch, black 70%, transparent), inset 0 0 0 1px color-mix(in oklch, white 15%, transparent)}@media(forced-colors:active){a-tooltip{--tooltip-border: 1px dotted CanvasText}}}a-tooltip>p:last-child,a-tooltip>:not([slot])>p:last-child{margin-block-end:0}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-tooltip:not(:defined){display:none}@media(hover:none)and (pointer:coarse){:where(:has(>a-tooltip)){-webkit-touch-callout:none;user-select:none}}a-tooltip{--tooltip-bg: light-dark( color-mix(in oklch, var(--bg-1) 80%, transparent), color-mix(in oklch, var(--bg-1) 70%, transparent) );--tooltip-shadow: 0 1px 8px color-mix(in oklch, var(--text-1) 15%, transparent), 0 0 1px color-mix(in oklch, var(--text-1) 50%, transparent);--tooltip-radius: 3px;--tooltip-max-width: min( calc(100vw - 20px) , 80ch);--tooltip-border: none;--tooltip-backdrop-filter: blur(8px);display:contents}a-tooltip::part(container){--_dur: .15s;position:fixed;left:0;top:0;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible;box-sizing:border-box;width:fit-content;pointer-events:none;opacity:0;transition:opacity var(--_dur) ease,overlay var(--_dur) ease allow-discrete,display var(--_dur) ease allow-discrete}a-tooltip::part(container):popover-open{opacity:1}@starting-style{a-tooltip::part(container):popover-open{opacity:0}}a-tooltip::part(bubble){display:block;box-sizing:border-box;width:fit-content;max-width:var(--tooltip-max-width, min( calc(100vw - 20px) , 80ch));max-height:calc(100vh - 20px);overflow:clip;text-align:left;background:var(--tooltip-bg, Canvas);color:var(--text-2, CanvasText);box-shadow:var(--tooltip-shadow, 0 1px 8px color-mix(in oklch, black 20%, transparent));-webkit-backdrop-filter:var(--tooltip-backdrop-filter, blur(8px));backdrop-filter:var(--tooltip-backdrop-filter, blur(8px));padding:var(--tooltip-padding, 4px 8px);border:var(--tooltip-border, none);border-radius:var(--tooltip-radius, 3px);outline:none;font-family:var(--sans-serif, system-ui, sans-serif);font-size:14px;font-weight:400;font-style:normal;font-stretch:normal;line-height:1.5;letter-spacing:var(--_tooltip-letter-spacing, .025ch);word-spacing:normal;text-transform:none;white-space:break-spaces;word-break:break-word;overflow-wrap:break-word;transition:opacity 60ms linear}a-tooltip[interactive]::part(container){pointer-events:auto}a-tooltip:state(proximity-hidden)::part(bubble){transition:none}@media(prefers-reduced-motion:reduce){a-tooltip::part(container),a-tooltip::part(bubble){transition:none}}a-tooltip[round]{--tooltip-radius: 20px;@supports (border-radius: attr(probe type(<length>),1px)){--tooltip-radius: attr(round type(<length>), 20px)}}.dark a-tooltip{--tooltip-shadow: 0 2px 16px color-mix(in oklch, black 70%, transparent), inset 0 0 0 1px color-mix(in oklch, white 15%, transparent)}@media(forced-colors:active){a-tooltip{--tooltip-border: 1px dotted CanvasText}}}a-tooltip>p:last-child,a-tooltip>:not([slot])>p:last-child{margin-block-end:0}

package/dist/elements/a-tooltip.d.ts

@@ -7,7 +7,7 @@ import './a-tooltip.css';
  * Styling notes (`a-tooltip.css` ships comment-free):
  * - `a-tooltip:not(:defined)` is hidden — before upgrade the host is an
  *   unknown inline element and its content would flash *inside the anchor*.
- *   Once defined, the shadow `:host { display: contents }` governs and
+ *   Once defined, external host CSS applies `display: contents` and
  *   content renders only in the popover via the slot.
  * - Only the bubble "chrome" is tokenized (`--tooltip-*`): it lives inside
  *   the shadow popover, unreachable from plain consumer CSS; the custom