sonner-wc 0.2.0 → 0.3.0

package/dist/sonner-wc.js

@@ -14,8 +14,6 @@ var WARNING_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
 var INFO_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"/></svg>';
 var ERROR_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/></svg>';
 var CLOSE_ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>';
-var SPINNER_BARS = Array.from({ length: 12 }, () => '<div class="sonner-loading-bar"></div>').join("");
-var LOADING_SPINNER = '<div class="sonner-loading-wrapper" data-visible="true"><div class="sonner-spinner">' + SPINNER_BARS + "</div></div>";
 function getTypeIcon(type) {
   switch (type) {
     case "success":
@@ -68,6 +66,10 @@ function dismissAllToasts() {
     t.dismissAll();
 }
 
+// src/ssr.ts
+var HTMLElementCtor = typeof HTMLElement !== "undefined" ? HTMLElement : class {
+};
+
 // src/styles/toaster.css
 var toaster_default = `:host {
   position: fixed;
@@ -119,15 +121,24 @@ var toaster_default = `:host {
   --toast-close-button-start: 0;
   --toast-close-button-end: unset;
   --toast-close-button-transform: translate(-35%, -35%);
+  inset: unset;
+  border: none;
+  overflow: visible;
+  background: transparent;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   outline: none;
+  contain: layout style;
   z-index: 999999999;
   transition: transform 400ms ease;
   display: block;
 }
 
+::backdrop {
+  display: none;
+}
+
 :host(:focus-visible) {
   outline: 2px solid var(--gray9);
   outline-offset: 4px;
@@ -251,6 +262,8 @@ var toast_default = `:host {
   position: absolute;
   opacity: 0;
   transform: var(--y);
+  contain: layout style;
+  will-change: transform, opacity;
   touch-action: none;
   transition:
     transform 400ms,
@@ -405,16 +418,14 @@ var toast_default = `:host {
   animation: sonner-fade-in 300ms ease forwards;
 }
 
-[data-button],
-::slotted(button[slot='action']),
-::slotted(button[slot='cancel']) {
+[data-button] {
   border-radius: 4px;
   padding-left: 8px;
   padding-right: 8px;
   height: 24px;
   font-size: 12px;
   background: var(--normal-text);
-  color: contrast-color(var(--normal-text));
+  color: var(--normal-bg);
   margin-left: var(--toast-button-margin-start);
   margin-right: var(--toast-button-margin-end);
   border: none;
@@ -432,8 +443,7 @@ var toast_default = `:host {
 [data-button]:focus-visible {
   box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
 }
-[data-cancel],
-::slotted(button[slot='cancel']) {
+[data-cancel] {
   color: var(--normal-text);
   background: var(--cancel-bg, rgba(0, 0, 0, 0.08));
 }
@@ -820,16 +830,34 @@ function getToastSheet() {
 }
 
 // src/sonner-toast.ts
-var HTMLElementCtor = typeof HTMLElement !== "undefined" ? HTMLElement : class {
-};
 function isUrgentType(type) {
   return type === "error" || type === "warning";
 }
-function setContent(host, slotName, value) {
+function boolAttr(host, name) {
+  return host.hasAttribute(name) && host.getAttribute(name) !== "false";
+}
+function toggleAttr(host, name, on) {
+  if (on)
+    host.setAttribute(name, "");
+  else
+    host.removeAttribute(name);
+}
+function clearSlot(host, slotName) {
   for (const child of Array.from(host.children)) {
     if (child.getAttribute("slot") === slotName)
       host.removeChild(child);
   }
+}
+function slotElementFromHTML(html, slotName) {
+  const tpl = document.createElement("template");
+  tpl.innerHTML = html;
+  const el = tpl.content.firstElementChild;
+  if (el)
+    el.setAttribute("slot", slotName);
+  return el;
+}
+function setContent(host, slotName, value) {
+  clearSlot(host, slotName);
   if (value == null || value === "")
     return;
   const resolved = typeof value === "function" ? value() : value;
@@ -844,10 +872,14 @@ function setContent(host, slotName, value) {
     host.appendChild(span);
   }
 }
-function setButtonSlot(host, slotName, value, defaultCloseHandler) {
-  for (const child of Array.from(host.children)) {
-    if (child.getAttribute("slot") === slotName)
-      host.removeChild(child);
+function setButtonSlot(host, shadow, slotName, value, defaultCloseHandler) {
+  clearSlot(host, slotName);
+  const container = shadow.querySelector(`[data-${slotName}-host]`);
+  if (container) {
+    for (const child of Array.from(container.children)) {
+      if (child.tagName === "BUTTON")
+        container.removeChild(child);
+    }
   }
   if (!value)
     return;
@@ -856,13 +888,12 @@ function setButtonSlot(host, slotName, value, defaultCloseHandler) {
     host.appendChild(value);
     return;
   }
+  if (!container)
+    return;
   const btn = document.createElement("button");
-  btn.setAttribute("slot", slotName);
   btn.setAttribute("type", "button");
-  if (slotName === "cancel")
-    btn.setAttribute("data-cancel", "");
-  else
-    btn.setAttribute("data-action", "");
+  btn.setAttribute("data-button", "");
+  btn.setAttribute(slotName === "cancel" ? "data-cancel" : "data-action", "");
   btn.textContent = value.label;
   btn.addEventListener("click", (e) => {
     value.onClick?.(e);
@@ -870,27 +901,33 @@ function setButtonSlot(host, slotName, value, defaultCloseHandler) {
       return;
     defaultCloseHandler();
   });
-  host.appendChild(btn);
+  container.appendChild(btn);
 }
 var SPINNER_BARS_HTML = Array.from({ length: 12 }, () => '<div class="sonner-loading-bar"></div>').join("");
-var SHADOW_TEMPLATE = `
-  <div data-frame part="frame">
-    <button type="button" data-close-button part="close-button" hidden aria-label="Close toast"></button>
-    <div data-icon part="icon">
-      <slot name="icon"></slot>
-      <div class="sonner-loading-wrapper" aria-hidden="true">
-        <div class="sonner-spinner">${SPINNER_BARS_HTML}</div>
+var SHADOW_TEMPLATE = (() => {
+  if (typeof document === "undefined")
+    return null;
+  const tpl = document.createElement("template");
+  tpl.innerHTML = `
+    <div data-frame part="frame">
+      <button type="button" data-close-button part="close-button" hidden aria-label="Close toast"></button>
+      <div data-icon part="icon">
+        <slot name="icon"></slot>
+        <div class="sonner-loading-wrapper" aria-hidden="true">
+          <div class="sonner-spinner">${SPINNER_BARS_HTML}</div>
+        </div>
       </div>
+      <div data-content part="content">
+        <div data-title part="title"><slot name="title"></slot></div>
+        <div data-description part="description"><slot name="description"></slot></div>
+      </div>
+      <div data-cancel-host part="cancel"><slot name="cancel"></slot></div>
+      <div data-action-host part="action"><slot name="action"></slot></div>
+      <slot part="custom"></slot>
     </div>
-    <div data-content part="content">
-      <div data-title part="title"><slot name="title"></slot></div>
-      <div data-description part="description"><slot name="description"></slot></div>
-    </div>
-    <slot name="cancel"></slot>
-    <slot name="action"></slot>
-    <slot part="custom"></slot>
-  </div>
-`;
+  `;
+  return tpl;
+})();
 
 class SonnerToast extends HTMLElementCtor {
   static get observedAttributes() {
@@ -922,9 +959,7 @@ class SonnerToast extends HTMLElementCtor {
     super();
     this.#shadow = this.attachShadow({ mode: "open" });
     this.#shadow.adoptedStyleSheets = [getToastSheet()];
-    const tpl = document.createElement("template");
-    tpl.innerHTML = SHADOW_TEMPLATE;
-    this.#shadow.appendChild(tpl.content.cloneNode(true));
+    this.#shadow.appendChild(SHADOW_TEMPLATE.content.cloneNode(true));
     this.#closeBtn = this.#shadow.querySelector("[data-close-button]");
     this.#iconWrap = this.#shadow.querySelector("[data-icon]");
     this.#titleWrap = this.#shadow.querySelector("[data-title]");
@@ -1067,32 +1102,16 @@ class SonnerToast extends HTMLElementCtor {
       this.#remainingTime = 0;
       timerNeedsReset = true;
     }
-    if (options.dismissible !== undefined) {
-      if (options.dismissible)
-        this.setAttribute("dismissible", "");
-      else
-        this.removeAttribute("dismissible");
-    }
+    if (options.dismissible !== undefined)
+      toggleAttr(this, "dismissible", options.dismissible);
     if (options.position !== undefined)
       this.setAttribute("position", options.position);
-    if (options.closeButton !== undefined) {
-      if (options.closeButton)
-        this.setAttribute("close-button", "");
-      else
-        this.removeAttribute("close-button");
-    }
-    if (options.richColors !== undefined) {
-      if (options.richColors)
-        this.setAttribute("rich-colors", "");
-      else
-        this.removeAttribute("rich-colors");
-    }
-    if (options.invert !== undefined) {
-      if (options.invert)
-        this.setAttribute("invert", "");
-      else
-        this.removeAttribute("invert");
-    }
+    if (options.closeButton !== undefined)
+      toggleAttr(this, "close-button", options.closeButton);
+    if (options.richColors !== undefined)
+      toggleAttr(this, "rich-colors", options.richColors);
+    if (options.invert !== undefined)
+      toggleAttr(this, "invert", options.invert);
     if (options.icon !== undefined)
       this.setIcon(options.icon);
     if (options.title !== undefined)
@@ -1100,10 +1119,10 @@ class SonnerToast extends HTMLElementCtor {
     if (options.description !== undefined)
       this.setDescription(options.description);
     if (options.action !== undefined) {
-      setButtonSlot(this, "action", options.action, () => this.dismiss());
+      setButtonSlot(this, this.#shadow, "action", options.action, () => this.dismiss());
     }
     if (options.cancel !== undefined) {
-      setButtonSlot(this, "cancel", options.cancel, () => this.dismiss());
+      setButtonSlot(this, this.#shadow, "cancel", options.cancel, () => this.dismiss());
     }
     if (options.className)
       this.className = options.className;
@@ -1120,8 +1139,7 @@ class SonnerToast extends HTMLElementCtor {
     if (timerNeedsReset)
       this.#resetTimer();
     if (this.#mounted && typeChanged && !wasUrgent && isUrgentType(this.toastType)) {
-      const titleEl = Array.from(this.children).find((c) => c.getAttribute("slot") === "title");
-      const text = titleEl?.textContent?.trim();
+      const text = this.#getTitleText();
       if (text) {
         const toaster = this.closest("sonner-toaster");
         toaster?.announceUrgent(text);
@@ -1133,23 +1151,23 @@ class SonnerToast extends HTMLElementCtor {
     setContent(this, "title", value);
     this.#applyCloseButtonAriaLabel();
   }
+  #getTitleText() {
+    const titleEl = Array.from(this.children).find((c) => c.getAttribute("slot") === "title");
+    return titleEl?.textContent?.trim() ?? "";
+  }
   #applyCloseButtonAriaLabel() {
     if (this.#closeButtonAriaLabel) {
       this.#closeBtn.setAttribute("aria-label", this.#closeButtonAriaLabel);
       return;
     }
-    const titleEl = Array.from(this.children).find((c) => c.getAttribute("slot") === "title");
-    const text = titleEl?.textContent?.trim();
+    const text = this.#getTitleText();
     this.#closeBtn.setAttribute("aria-label", text ? `Close: ${text}` : "Close toast");
   }
   setDescription(value) {
     setContent(this, "description", value);
   }
   setIcon(value) {
-    for (const child of Array.from(this.children)) {
-      if (child.getAttribute("slot") === "icon")
-        this.removeChild(child);
-    }
+    clearSlot(this, "icon");
     if (value == null)
       return;
     if (value instanceof Node) {
@@ -1157,13 +1175,9 @@ class SonnerToast extends HTMLElementCtor {
         value.setAttribute("slot", "icon");
       this.appendChild(value);
     } else {
-      const tpl = document.createElement("template");
-      tpl.innerHTML = value;
-      const el = tpl.content.firstElementChild;
-      if (el) {
-        el.setAttribute("slot", "icon");
+      const el = slotElementFromHTML(value, "icon");
+      if (el)
         this.appendChild(el);
-      }
     }
   }
   setHandlers(handlers) {
@@ -1189,36 +1203,25 @@ class SonnerToast extends HTMLElementCtor {
     const urgent = isUrgentType(type);
     this.setAttribute("role", urgent ? "alert" : "status");
     this.setAttribute("aria-live", urgent ? "assertive" : "polite");
+    for (const c of Array.from(this.children)) {
+      if (c.getAttribute("slot") === "icon" && c.hasAttribute("data-sonner-default-icon"))
+        this.removeChild(c);
+    }
     if (type === "loading") {
       this.setAttribute("data-promise", "true");
-      for (const c of Array.from(this.children)) {
-        if (c.getAttribute("slot") === "icon" && c.hasAttribute("data-sonner-default-icon"))
-          this.removeChild(c);
-      }
-    } else {
-      this.removeAttribute("data-promise");
-      const hasUserIcon = Array.from(this.children).some((c) => {
-        if (c.getAttribute("slot") !== "icon")
-          return false;
-        return !c.hasAttribute("data-sonner-default-icon");
-      });
-      if (!hasUserIcon) {
-        for (const c of Array.from(this.children)) {
-          if (c.getAttribute("slot") === "icon" && c.hasAttribute("data-sonner-default-icon"))
-            this.removeChild(c);
-        }
-        const builtin = getTypeIcon(type);
-        if (builtin) {
-          const tpl = document.createElement("template");
-          tpl.innerHTML = builtin;
-          const el = tpl.content.firstElementChild;
-          if (el) {
-            el.setAttribute("slot", "icon");
-            el.setAttribute("data-sonner-default-icon", "");
-            this.appendChild(el);
-          }
-        }
-      }
+      return;
+    }
+    this.removeAttribute("data-promise");
+    const hasUserIcon = Array.from(this.children).some((c) => c.getAttribute("slot") === "icon");
+    if (hasUserIcon)
+      return;
+    const builtin = getTypeIcon(type);
+    if (!builtin)
+      return;
+    const el = slotElementFromHTML(builtin, "icon");
+    if (el) {
+      el.setAttribute("data-sonner-default-icon", "");
+      this.appendChild(el);
     }
   }
   #applyDismissible() {
@@ -1236,16 +1239,13 @@ class SonnerToast extends HTMLElementCtor {
       this.setAttribute("data-x-position", x);
   }
   #applyCloseButton() {
-    const show = this.hasAttribute("close-button") && this.getAttribute("close-button") !== "false";
-    this.#closeBtn.hidden = !show;
+    this.#closeBtn.hidden = !boolAttr(this, "close-button");
   }
   #applyRichColors() {
-    const rich = this.hasAttribute("rich-colors") && this.getAttribute("rich-colors") !== "false";
-    this.setAttribute("data-rich-colors", String(rich));
+    this.setAttribute("data-rich-colors", String(boolAttr(this, "rich-colors")));
   }
   #applyInvert() {
-    const invert = this.hasAttribute("invert") && this.getAttribute("invert") !== "false";
-    this.setAttribute("data-invert", String(invert));
+    this.setAttribute("data-invert", String(boolAttr(this, "invert")));
   }
   #readDuration() {
     const raw = this.getAttribute("duration");
@@ -1254,7 +1254,7 @@ class SonnerToast extends HTMLElementCtor {
     if (raw === "Infinity")
       return Infinity;
     const n = Number(raw);
-    return Number.isFinite(n) || n === Infinity ? n : null;
+    return Number.isFinite(n) ? n : null;
   }
   #effectiveDuration() {
     const explicit = this.#duration ?? this.#readDuration();
@@ -1416,8 +1416,6 @@ if (typeof customElements !== "undefined" && !customElements.get("sonner-toast")
   customElements.define("sonner-toast", SonnerToast);
 }
 // src/sonner-toaster.ts
-var HTMLElementCtor2 = typeof HTMLElement !== "undefined" ? HTMLElement : class {
-};
 function parseOffsetValue(v, fallback) {
   if (v == null)
     return fallback;
@@ -1438,7 +1436,7 @@ function applyOffsetVars(host, opts, prefix, fallback) {
   }
 }
 
-class SonnerToaster extends HTMLElementCtor2 {
+class SonnerToaster extends HTMLElementCtor {
   static get observedAttributes() {
     return [
       "position",
@@ -1507,6 +1505,11 @@ class SonnerToaster extends HTMLElementCtor2 {
     this.addEventListener("sonner-toast-mounted", () => this.#reflow({ remeasure: true }));
   }
   connectedCallback() {
+    if (typeof this.showPopover === "function") {
+      if (!this.hasAttribute("popover"))
+        this.setAttribute("popover", "manual");
+      this.showPopover();
+    }
     if (!this.hasAttribute("tabindex"))
       this.tabIndex = -1;
     if (!this.hasAttribute("role"))
@@ -1535,6 +1538,11 @@ class SonnerToaster extends HTMLElementCtor2 {
     this.#reflow({ remeasure: true });
   }
   disconnectedCallback() {
+    if (typeof this.hidePopover === "function") {
+      try {
+        this.hidePopover();
+      } catch {}
+    }
     this.#childObserver.disconnect();
     this.#resizeObserver.disconnect();
     document.removeEventListener("keydown", this.#onKeyDown);
@@ -1608,12 +1616,15 @@ class SonnerToaster extends HTMLElementCtor2 {
   #getPosition() {
     return this.getAttribute("position") || "bottom-right";
   }
-  #applyPosition() {
+  #applyPositionTo(target) {
     const [y, x] = this.#getPosition().split("-");
     if (y)
-      this.setAttribute("data-y-position", y);
+      target.setAttribute("data-y-position", y);
     if (x)
-      this.setAttribute("data-x-position", x);
+      target.setAttribute("data-x-position", x);
+  }
+  #applyPosition() {
+    this.#applyPositionTo(this);
   }
   #applyTheme() {
     if (this.#themeMql && this.#themeMqlHandler) {
@@ -1657,13 +1668,8 @@ class SonnerToaster extends HTMLElementCtor2 {
   }
   #applyToastPositions() {
     for (const t of this.#toasts) {
-      if (!t.hasAttribute("position")) {
-        const [y, x] = this.#getPosition().split("-");
-        if (y)
-          t.setAttribute("data-y-position", y);
-        if (x)
-          t.setAttribute("data-x-position", x);
-      }
+      if (!t.hasAttribute("position"))
+        this.#applyPositionTo(t);
     }
   }
   #propagateBoolean(attr) {
@@ -1678,13 +1684,8 @@ class SonnerToaster extends HTMLElementCtor2 {
     }
   }
   #decorateToast(toast) {
-    if (!toast.hasAttribute("position")) {
-      const [y, x] = this.#getPosition().split("-");
-      if (y)
-        toast.setAttribute("data-y-position", y);
-      if (x)
-        toast.setAttribute("data-x-position", x);
-    }
+    if (!toast.hasAttribute("position"))
+      this.#applyPositionTo(toast);
     if (!toast.hasAttribute("duration")) {
       const inherit = this.getAttribute("duration");
       if (inherit)
@@ -2017,5 +2018,5 @@ export {
   SonnerToast
 };
 
-//# debugId=EF7F0EA6003CE16A64756E2164756E21
+//# debugId=6DA0059CEA8E1A6464756E2164756E21
 //# sourceMappingURL=sonner-wc.js.map