@editora/ui-core 0.1.8 → 0.1.10

package/dist/timeline.cjs.js

@@ -0,0 +1,198 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./ElementBase-1b301e7f.js"),m=`
+  :host {
+    --ui-timeline-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
+    --ui-timeline-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    --ui-timeline-text: var(--ui-color-text, #0f172a);
+    --ui-timeline-muted: var(--ui-color-muted, #64748b);
+    --ui-timeline-accent: var(--ui-color-primary, #2563eb);
+    --ui-timeline-indicator-duration: 1.8s;
+
+    display: block;
+    min-inline-size: 0;
+    color-scheme: light dark;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .frame {
+    border: 1px solid var(--ui-timeline-border);
+    border-radius: 14px;
+    background: var(--ui-timeline-bg);
+    padding: 14px;
+    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
+  }
+
+  .list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+    gap: 12px;
+  }
+
+  .item {
+    display: grid;
+    grid-template-columns: 20px minmax(0, 1fr);
+    gap: 10px;
+    min-inline-size: 0;
+  }
+
+  .rail {
+    position: relative;
+    display: flex;
+    justify-content: center;
+  }
+
+  .rail::before {
+    content: "";
+    position: absolute;
+    top: 12px;
+    bottom: -14px;
+    inline-size: 2px;
+    background: color-mix(in srgb, var(--ui-timeline-border) 84%, transparent);
+  }
+
+  .item:last-child .rail::before {
+    display: none;
+  }
+
+  .dot {
+    position: relative;
+    inline-size: 10px;
+    block-size: 10px;
+    margin-top: 3px;
+    border-radius: 999px;
+    background: var(--dot, var(--ui-timeline-accent));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--ui-timeline-accent)) 20%, transparent);
+  }
+
+  .item[data-active="true"] .dot::after {
+    content: "";
+    position: absolute;
+    inset: -6px;
+    border-radius: inherit;
+    border: 1px solid color-mix(in srgb, var(--dot, var(--ui-timeline-accent)) 62%, transparent);
+    opacity: 0.5;
+    animation: ui-timeline-dot-pulse var(--ui-timeline-indicator-duration) ease-out infinite;
+    pointer-events: none;
+  }
+
+  .item[data-active="true"] .rail::before {
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--dot, var(--ui-timeline-accent)) 44%, transparent),
+      color-mix(in srgb, var(--ui-timeline-border) 82%, transparent)
+    );
+  }
+
+  .content {
+    min-inline-size: 0;
+    display: grid;
+    gap: 4px;
+  }
+
+  .title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--ui-timeline-text);
+  }
+
+  .time,
+  .description {
+    font-size: 12px;
+    color: var(--ui-timeline-muted);
+  }
+
+  :host([headless]) .frame {
+    display: none;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-timeline-bg: #0f172a;
+    --ui-timeline-border: #334155;
+    --ui-timeline-text: #e2e8f0;
+    --ui-timeline-muted: #93a4bd;
+    --ui-timeline-accent: #93c5fd;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dot,
+    .dot::after {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @keyframes ui-timeline-dot-pulse {
+    0% {
+      transform: scale(0.9);
+      opacity: 0.5;
+    }
+    70% {
+      transform: scale(1.25);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1.25);
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .frame {
+      box-shadow: none;
+    }
+
+    .rail::before {
+      inline-size: 3px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-timeline-bg: Canvas;
+      --ui-timeline-border: CanvasText;
+      --ui-timeline-text: CanvasText;
+      --ui-timeline-muted: CanvasText;
+      --ui-timeline-accent: Highlight;
+    }
+
+    .frame,
+    .rail::before,
+    .dot {
+      forced-color-adjust: none;
+      box-shadow: none;
+    }
+
+    .dot::after {
+      animation: none !important;
+    }
+
+    .frame {
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+    }
+
+    .rail::before {
+      background: CanvasText;
+    }
+
+    .dot {
+      background: Highlight;
+    }
+  }
+`,o={default:"var(--ui-color-primary, #2563eb)",info:"var(--ui-color-info, #0891b2)",success:"var(--ui-color-success, #16a34a)",warning:"var(--ui-color-warning, #d97706)",danger:"var(--ui-color-danger, #dc2626)"};function a(n){return n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function u(n){if(!n)return[];try{const t=JSON.parse(n);return Array.isArray(t)?t.map(e=>{if(!e||typeof e!="object")return null;const r=String(e.title||"").trim();return r?{title:r,description:e.description?String(e.description):void 0,time:e.time?String(e.time):void 0,tone:e.tone,active:!!e.active}:null}).filter(Boolean):[]}catch{return[]}}class s extends d.ElementBase{static get observedAttributes(){return["items","variant","headless"]}render(){const t=u(this.getAttribute("items")),e=t.some(i=>i.active),r=t.length?t.map((i,l)=>{const c=o[i.tone||"default"]||o.default;return`
+              <li class="item" part="item" data-active="${(e?!!i.active:l===0)?"true":"false"}">
+                <div class="rail"><span class="dot" style="--dot:${c}"></span></div>
+                <article class="content">
+                  <span class="title">${a(i.title)}</span>
+                  ${i.time?`<span class="time">${a(i.time)}</span>`:""}
+                  ${i.description?`<span class="description">${a(i.description)}</span>`:""}
+                </article>
+              </li>
+            `}).join(""):'<div class="description">No timeline entries</div>';this.setContent(`
+      <style>${m}</style>
+      <section class="frame" part="frame">
+        <ol class="list" part="list">${r}</ol>
+      </section>
+    `)}shouldRenderOnAttributeChange(t,e,r){return!0}}typeof customElements<"u"&&!customElements.get("ui-timeline")&&customElements.define("ui-timeline",s);exports.UITimeline=s;

package/dist/timeline.esm.js

@@ -0,0 +1,248 @@
+import { E as c } from "./ElementBase-909688f3.mjs";
+const d = `
+  :host {
+    --ui-timeline-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
+    --ui-timeline-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    --ui-timeline-text: var(--ui-color-text, #0f172a);
+    --ui-timeline-muted: var(--ui-color-muted, #64748b);
+    --ui-timeline-accent: var(--ui-color-primary, #2563eb);
+    --ui-timeline-indicator-duration: 1.8s;
+
+    display: block;
+    min-inline-size: 0;
+    color-scheme: light dark;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .frame {
+    border: 1px solid var(--ui-timeline-border);
+    border-radius: 14px;
+    background: var(--ui-timeline-bg);
+    padding: 14px;
+    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
+  }
+
+  .list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+    gap: 12px;
+  }
+
+  .item {
+    display: grid;
+    grid-template-columns: 20px minmax(0, 1fr);
+    gap: 10px;
+    min-inline-size: 0;
+  }
+
+  .rail {
+    position: relative;
+    display: flex;
+    justify-content: center;
+  }
+
+  .rail::before {
+    content: "";
+    position: absolute;
+    top: 12px;
+    bottom: -14px;
+    inline-size: 2px;
+    background: color-mix(in srgb, var(--ui-timeline-border) 84%, transparent);
+  }
+
+  .item:last-child .rail::before {
+    display: none;
+  }
+
+  .dot {
+    position: relative;
+    inline-size: 10px;
+    block-size: 10px;
+    margin-top: 3px;
+    border-radius: 999px;
+    background: var(--dot, var(--ui-timeline-accent));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--ui-timeline-accent)) 20%, transparent);
+  }
+
+  .item[data-active="true"] .dot::after {
+    content: "";
+    position: absolute;
+    inset: -6px;
+    border-radius: inherit;
+    border: 1px solid color-mix(in srgb, var(--dot, var(--ui-timeline-accent)) 62%, transparent);
+    opacity: 0.5;
+    animation: ui-timeline-dot-pulse var(--ui-timeline-indicator-duration) ease-out infinite;
+    pointer-events: none;
+  }
+
+  .item[data-active="true"] .rail::before {
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--dot, var(--ui-timeline-accent)) 44%, transparent),
+      color-mix(in srgb, var(--ui-timeline-border) 82%, transparent)
+    );
+  }
+
+  .content {
+    min-inline-size: 0;
+    display: grid;
+    gap: 4px;
+  }
+
+  .title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--ui-timeline-text);
+  }
+
+  .time,
+  .description {
+    font-size: 12px;
+    color: var(--ui-timeline-muted);
+  }
+
+  :host([headless]) .frame {
+    display: none;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-timeline-bg: #0f172a;
+    --ui-timeline-border: #334155;
+    --ui-timeline-text: #e2e8f0;
+    --ui-timeline-muted: #93a4bd;
+    --ui-timeline-accent: #93c5fd;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dot,
+    .dot::after {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @keyframes ui-timeline-dot-pulse {
+    0% {
+      transform: scale(0.9);
+      opacity: 0.5;
+    }
+    70% {
+      transform: scale(1.25);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1.25);
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .frame {
+      box-shadow: none;
+    }
+
+    .rail::before {
+      inline-size: 3px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-timeline-bg: Canvas;
+      --ui-timeline-border: CanvasText;
+      --ui-timeline-text: CanvasText;
+      --ui-timeline-muted: CanvasText;
+      --ui-timeline-accent: Highlight;
+    }
+
+    .frame,
+    .rail::before,
+    .dot {
+      forced-color-adjust: none;
+      box-shadow: none;
+    }
+
+    .dot::after {
+      animation: none !important;
+    }
+
+    .frame {
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+    }
+
+    .rail::before {
+      background: CanvasText;
+    }
+
+    .dot {
+      background: Highlight;
+    }
+  }
+`, o = {
+  default: "var(--ui-color-primary, #2563eb)",
+  info: "var(--ui-color-info, #0891b2)",
+  success: "var(--ui-color-success, #16a34a)",
+  warning: "var(--ui-color-warning, #d97706)",
+  danger: "var(--ui-color-danger, #dc2626)"
+};
+function a(n) {
+  return n.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function m(n) {
+  if (!n)
+    return [];
+  try {
+    const t = JSON.parse(n);
+    return Array.isArray(t) ? t.map((e) => {
+      if (!e || typeof e != "object")
+        return null;
+      const r = String(e.title || "").trim();
+      return r ? {
+        title: r,
+        description: e.description ? String(e.description) : void 0,
+        time: e.time ? String(e.time) : void 0,
+        tone: e.tone,
+        active: !!e.active
+      } : null;
+    }).filter(Boolean) : [];
+  } catch {
+    return [];
+  }
+}
+class u extends c {
+  static get observedAttributes() {
+    return ["items", "variant", "headless"];
+  }
+  render() {
+    const t = m(this.getAttribute("items")), e = t.some((i) => i.active), r = t.length ? t.map((i, s) => {
+      const l = o[i.tone || "default"] || o.default;
+      return `
+              <li class="item" part="item" data-active="${(e ? !!i.active : s === 0) ? "true" : "false"}">
+                <div class="rail"><span class="dot" style="--dot:${l}"></span></div>
+                <article class="content">
+                  <span class="title">${a(i.title)}</span>
+                  ${i.time ? `<span class="time">${a(i.time)}</span>` : ""}
+                  ${i.description ? `<span class="description">${a(i.description)}</span>` : ""}
+                </article>
+              </li>
+            `;
+    }).join("") : '<div class="description">No timeline entries</div>';
+    this.setContent(`
+      <style>${d}</style>
+      <section class="frame" part="frame">
+        <ol class="list" part="list">${r}</ol>
+      </section>
+    `);
+  }
+  shouldRenderOnAttributeChange(t, e, r) {
+    return !0;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-timeline") && customElements.define("ui-timeline", u);
+export {
+  u as UITimeline
+};

package/dist/toast.cjs.js

@@ -0,0 +1,234 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-1b301e7f.js"),c=3200,d=170,h=`
+  :host {
+    display: block;
+    color-scheme: light dark;
+    position: fixed;
+    z-index: 9999;
+    top: 20px;
+    right: 20px;
+    pointer-events: none;
+    width: min(360px, calc(100vw - 24px));
+
+    --ui-toast-gap: 10px;
+    --ui-toast-radius: 12px;
+    --ui-toast-padding-y: 10px;
+    --ui-toast-padding-x: 12px;
+    --ui-toast-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-toast-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, var(--ui-color-text, #0f172a) 8%);
+    --ui-toast-color: var(--ui-color-text, #0f172a);
+    --ui-toast-muted: var(--ui-color-muted, #64748b);
+    --ui-toast-shadow:
+      none;
+    --ui-toast-focus-ring: var(--ui-color-focus-ring, #2563eb);
+  }
+
+  :host([position="top-left"]) {
+    left: 20px;
+    right: auto;
+  }
+
+  :host([position="top-center"]) {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+  }
+
+  :host([position="bottom-left"]) {
+    top: auto;
+    bottom: 20px;
+    left: 20px;
+    right: auto;
+  }
+
+  :host([position="bottom-center"]) {
+    top: auto;
+    bottom: 20px;
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+  }
+
+  :host([position="bottom-right"]) {
+    top: auto;
+    bottom: 20px;
+    right: 20px;
+  }
+
+  .toast-list {
+    display: grid;
+    gap: var(--ui-toast-gap);
+    width: 100%;
+  }
+
+  .toast {
+    pointer-events: auto;
+    position: relative;
+    display: grid;
+    gap: 3px;
+    border: 1px solid var(--ui-toast-border-color);
+    border-radius: var(--ui-toast-radius);
+    background: var(--ui-toast-bg);
+    color: var(--ui-toast-color);
+    box-shadow: var(--ui-toast-shadow);
+    min-height: 56px;
+    padding: var(--ui-toast-padding-y) var(--ui-toast-padding-x);
+    padding-inline-end: calc(var(--ui-toast-padding-x) + 26px);
+    font: 550 13px/1.4 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+    opacity: 0;
+    transform: translate3d(0, -8px, 0) scale(0.98);
+    transition: opacity 170ms ease, transform 170ms ease;
+    will-change: transform, opacity;
+    outline: none;
+  }
+
+  .toast.show {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+
+  .toast.closing {
+    opacity: 0;
+    transform: translate3d(0, -6px, 0) scale(0.98);
+  }
+
+  .toast[data-tone="success"] {
+    --ui-toast-border-color: color-mix(in srgb, var(--ui-color-success, #16a34a) 38%, var(--ui-color-border, #cbd5e1));
+    --ui-toast-bg: color-mix(in srgb, var(--ui-color-success, #16a34a) 10%, var(--ui-color-surface, #ffffff));
+  }
+
+  .toast[data-tone="warning"] {
+    --ui-toast-border-color: color-mix(in srgb, var(--ui-color-warning, #d97706) 38%, var(--ui-color-border, #cbd5e1));
+    --ui-toast-bg: color-mix(in srgb, var(--ui-color-warning, #d97706) 10%, var(--ui-color-surface, #ffffff));
+  }
+
+  .toast[data-tone="error"] {
+    --ui-toast-border-color: color-mix(in srgb, var(--ui-color-danger, #dc2626) 40%, var(--ui-color-border, #cbd5e1));
+    --ui-toast-bg: color-mix(in srgb, var(--ui-color-danger, #dc2626) 12%, var(--ui-color-surface, #ffffff));
+  }
+
+  .toast[data-tone="loading"] {
+    --ui-toast-border-color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 36%, var(--ui-color-border, #cbd5e1));
+  }
+
+  .message {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .meta {
+    color: var(--ui-toast-muted);
+    font-size: 11px;
+    line-height: 1.35;
+  }
+
+  .close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    inline-size: 24px;
+    block-size: 24px;
+    border-radius: 8px;
+    border: none;
+    background: transparent;
+    color: var(--ui-toast-muted);
+    display: inline-grid;
+    place-items: center;
+    cursor: pointer;
+    transition: background-color 140ms ease, color 140ms ease;
+  }
+
+  .close:hover {
+    background: color-mix(in srgb, var(--ui-toast-color) 8%, transparent);
+    color: var(--ui-toast-color);
+  }
+
+  .close:focus-visible {
+    outline: 2px solid var(--ui-toast-focus-ring);
+    outline-offset: 1px;
+  }
+
+  :host([headless]) {
+    display: none;
+  }
+
+  @media (max-width: 560px) {
+    :host {
+      inset-inline: 12px;
+      top: 12px;
+      right: auto;
+      width: auto;
+      transform: none;
+    }
+
+    :host([position="bottom-left"]),
+    :host([position="bottom-center"]),
+    :host([position="bottom-right"]) {
+      top: auto;
+      bottom: 12px;
+      left: 12px;
+      right: 12px;
+      transform: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .toast,
+    .close {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .toast {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-toast-bg: Canvas;
+      --ui-toast-color: CanvasText;
+      --ui-toast-muted: CanvasText;
+      --ui-toast-border-color: CanvasText;
+      --ui-toast-shadow: none;
+      --ui-toast-focus-ring: Highlight;
+    }
+
+    .toast,
+    .close {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+
+    .close {
+      border: 1px solid CanvasText;
+    }
+  }
+`;let p=0;function m(a){return String(a).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function g(a){const t=String(a||"").toLowerCase();return t==="success"||t==="warning"||t==="error"||t==="loading"||t==="neutral"?t:"info"}function f(a){const t=Number(a);return Number.isFinite(t)?Math.max(0,Math.trunc(t)):c}function b(a){const t=String(a||"polite").toLowerCase();return t==="off"||t==="assertive"?t:"polite"}class l extends u.ElementBase{constructor(){super(),this._toasts=[],this._timerMap=new Map,this._exitMap=new Map,this._onRootClick=this._handleRootClick.bind(this),this._onRootMouseEnter=this._handleRootMouseEnter.bind(this),this._onRootMouseLeave=this._handleRootMouseLeave.bind(this),this._onRootFocusIn=this._handleRootFocusIn.bind(this),this._onRootFocusOut=this._handleRootFocusOut.bind(this)}static get observedAttributes(){return["headless","position","max-visible"]}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-live","polite"),this.setAttribute("role","region"),this.root.addEventListener("click",this._onRootClick),this.root.addEventListener("mouseenter",this._onRootMouseEnter,!0),this.root.addEventListener("mouseleave",this._onRootMouseLeave,!0),this.root.addEventListener("focusin",this._onRootFocusIn),this.root.addEventListener("focusout",this._onRootFocusOut)}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this.root.removeEventListener("mouseenter",this._onRootMouseEnter,!0),this.root.removeEventListener("mouseleave",this._onRootMouseLeave,!0),this.root.removeEventListener("focusin",this._onRootFocusIn),this.root.removeEventListener("focusout",this._onRootFocusOut),this._clearAllTimers(),super.disconnectedCallback()}get headless(){return this.hasAttribute("headless")}set headless(t){t?this.setAttribute("headless",""):this.removeAttribute("headless")}show(t,e={}){const o=++p,s=g(e.type),i=f(e.duration),r=b(e.ariaLive),n={id:o,message:String(t??""),duration:i,tone:s,ariaLive:r,createdAt:Date.now(),closing:!1};return this._toasts.push(n),this._trimVisibleToasts(),this.requestRender(),this.dispatchEvent(new CustomEvent("show",{detail:{id:o,message:n.message,type:s},bubbles:!0})),this._scheduleAutoHide(o,i),o}hide(t){const e=this._toasts.find(i=>i.id===t);if(!e||e.closing)return;e.closing=!0,this._clearToastTimer(t),this.requestRender();const o=this._exitMap.get(t);o&&clearTimeout(o);const s=setTimeout(()=>{this._exitMap.delete(t);const i=this._toasts.length;this._toasts=this._toasts.filter(r=>r.id!==t),this._toasts.length!==i&&(this.requestRender(),this.dispatchEvent(new CustomEvent("hide",{detail:{id:t},bubbles:!0})))},d);this._exitMap.set(t,s)}_maxVisible(){const t=Number(this.getAttribute("max-visible"));return Number.isFinite(t)?Math.max(1,Math.trunc(t)):5}_trimVisibleToasts(){const t=this._toasts.filter(s=>!s.closing),e=this._maxVisible();if(t.length<=e)return;[...t].sort((s,i)=>s.createdAt-i.createdAt).slice(0,t.length-e).forEach(s=>this.hide(s.id))}_scheduleAutoHide(t,e){if(this._clearToastTimer(t),e<=0)return;const o=Date.now(),s=setTimeout(()=>{this._timerMap.delete(t),this.hide(t)},e);this._timerMap.set(t,{timeout:s,startedAt:o,remaining:e,paused:!1})}_pauseToast(t){const e=this._timerMap.get(t);if(!e||e.paused)return;clearTimeout(e.timeout);const o=Date.now()-e.startedAt;e.remaining=Math.max(0,e.remaining-o),e.paused=!0,this._timerMap.set(t,e)}_resumeToast(t){const e=this._timerMap.get(t);if(!e||!e.paused)return;const o=Math.max(0,e.remaining);this._scheduleAutoHide(t,o)}_clearToastTimer(t){const e=this._timerMap.get(t);e&&(clearTimeout(e.timeout),this._timerMap.delete(t));const o=this._exitMap.get(t);o&&(clearTimeout(o),this._exitMap.delete(t))}_clearAllTimers(){for(const t of this._timerMap.values())clearTimeout(t.timeout);this._timerMap.clear();for(const t of this._exitMap.values())clearTimeout(t);this._exitMap.clear()}_closestToastId(t){const e=t instanceof HTMLElement?t:null,o=e==null?void 0:e.closest(".toast[data-toast-id]");if(!o)return null;const s=Number(o.getAttribute("data-toast-id"));return Number.isFinite(s)?s:null}_handleRootClick(t){const e=t.target;if(!e)return;const o=e.closest("button.close[data-toast-id]");if(!o)return;t.preventDefault();const s=Number(o.getAttribute("data-toast-id"));Number.isNaN(s)||this.hide(s)}_handleRootMouseEnter(t){const e=this._closestToastId(t.target);e!=null&&this._pauseToast(e)}_handleRootMouseLeave(t){var i;const e=this._closestToastId(t.target);if(e==null)return;const o=(i=t.target)==null?void 0:i.closest(".toast[data-toast-id]"),s=t.relatedTarget;s&&(o!=null&&o.contains(s))||this._resumeToast(e)}_handleRootFocusIn(t){const e=this._closestToastId(t.target);e!=null&&this._pauseToast(e)}_handleRootFocusOut(t){var i;const e=this._closestToastId(t.target);if(e==null)return;const o=t.relatedTarget,s=(i=t.target)==null?void 0:i.closest(".toast[data-toast-id]");o&&(s!=null&&s.contains(o))||this._resumeToast(e)}render(){this.setContent(`
+      <style>${h}</style>
+      <div class="toast-list" aria-live="polite" part="list">
+        ${this._toasts.map(t=>{const e=t.ariaLive==="assertive"||t.tone==="error"?"alert":"status",o=t.duration>0?'<span class="meta" part="meta">Auto-dismiss</span>':'<span class="meta" part="meta">Persistent</span>';return`
+            <article
+              class="toast show${t.closing?" closing":""}"
+              part="toast"
+              data-toast-id="${t.id}"
+              data-tone="${t.tone}"
+              role="${e}"
+              aria-live="${t.ariaLive}"
+              tabindex="0"
+            >
+              <span class="message" part="message">${m(t.message)}</span>
+              ${o}
+              <button class="close" part="close" data-toast-id="${t.id}" aria-label="Close notification" type="button">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </article>
+          `}).join("")}
+      </div>
+    `)}shouldRenderOnAttributeChange(t,e,o){return e===o?!1:t==="headless"||t==="position"||t==="max-visible"}}typeof customElements<"u"&&!customElements.get("ui-toast")&&customElements.define("ui-toast",l);exports.UIToast=l;