@editora/ui-core 0.1.12 → 0.1.13

package/dist/drawer.esm.js

@@ -1,7 +1,40 @@
-import { E } from "./ElementBase-909688f3.mjs";
-import { O as d } from "./overlayManager-86454af7.mjs";
-import "./scroll-lock-9de6d328.mjs";
-const x = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', A = `
+import { E as I } from "./ElementBase-909688f3.mjs";
+import { O as m } from "./overlayManager-5bbd4dc3.mjs";
+import "./scroll-lock-31da444f.mjs";
+function F(i) {
+  return typeof requestAnimationFrame == "function" ? requestAnimationFrame(() => i()) : window.setTimeout(i, 16);
+}
+function _(i) {
+  if (i) {
+    if (typeof cancelAnimationFrame == "function") {
+      cancelAnimationFrame(i);
+      return;
+    }
+    window.clearTimeout(i);
+  }
+}
+const E = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', S = /* @__PURE__ */ new Set([
+  "side",
+  "dismissible",
+  "headless",
+  "variant",
+  "density",
+  "shape",
+  "elevation",
+  "tone",
+  "size",
+  "inset",
+  "close-on-overlay",
+  "close-on-esc",
+  "lock-while-loading",
+  "show-close",
+  "state",
+  "role",
+  "aria-label",
+  "aria-labelledby",
+  "aria-describedby",
+  "initial-focus"
+]), O = `
   :host {
     position: fixed;
     inset: 0;
@@ -502,29 +535,29 @@ const x = 'button:not([disabled]), [href], input:not([disabled]), select:not([di
     }
   }
 `;
-function u(i, e) {
+function w(i, e) {
   if (i == null)
     return e;
-  const r = i.trim().toLowerCase();
-  return r !== "false" && r !== "0" && r !== "off";
+  const t = i.trim().toLowerCase();
+  return t !== "false" && t !== "0" && t !== "off";
 }
-function c(i) {
+function v(i) {
   return i.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function L(i, e) {
+function C(i, e) {
   return i === "top" || i === "bottom" || i === "left" || i === "right" ? i : i === "start" ? e === "rtl" ? "right" : "left" : i === "end" ? e === "rtl" ? "left" : "right" : "left";
 }
-function y(i, e) {
-  var t;
-  const r = i.querySelector(`[slot="${e}"]`);
-  return r ? ((t = r.textContent) == null ? void 0 : t.trim().length) !== 0 || r.children.length > 0 : !1;
+function A(i, e) {
+  var r;
+  const t = i.querySelector(`[slot="${e}"]`);
+  return t ? ((r = t.textContent) == null ? void 0 : r.trim().length) !== 0 || t.children.length > 0 : !1;
 }
-function _() {
+function L() {
   return typeof window < "u" && typeof document < "u";
 }
-class O extends E {
+class T extends I {
   constructor() {
-    super(), this._uid = Math.random().toString(36).slice(2, 10), this._isOpen = !1, this._restoreFocusEl = null, this._globalListenersBound = !1, this._closeReason = "programmatic", this._onRootClick = this._onRootClick.bind(this), this._onDocumentKeyDown = this._onDocumentKeyDown.bind(this), this._onDocumentFocusIn = this._onDocumentFocusIn.bind(this);
+    super(), this._uid = Math.random().toString(36).slice(2, 10), this._isOpen = !1, this._restoreFocusEl = null, this._globalListenersBound = !1, this._closeReason = "programmatic", this._focusInitialFrame = 0, this._focusTrapFrame = 0, this._restoreFocusFrame = 0, this._onRootClick = this._onRootClick.bind(this), this._onDocumentKeyDown = this._onDocumentKeyDown.bind(this), this._onDocumentFocusIn = this._onDocumentFocusIn.bind(this);
   }
   static get observedAttributes() {
     return [
@@ -556,15 +589,19 @@ class O extends E {
     super.connectedCallback(), this.root.addEventListener("click", this._onRootClick), this._syncOpenState();
   }
   disconnectedCallback() {
-    this.root.removeEventListener("click", this._onRootClick), this._unbindGlobalListeners(), this._releaseOpenResources(), this._restoreFocusEl = null, this._isOpen = !1, super.disconnectedCallback();
+    this.root.removeEventListener("click", this._onRootClick), this._unbindGlobalListeners(), this._cancelScheduledFocusWork(), this._releaseOpenResources(), this._restoreFocusEl = null, this._isOpen = !1, super.disconnectedCallback();
   }
-  attributeChangedCallback(e, r, t) {
-    if (r !== t) {
+  attributeChangedCallback(e, t, r) {
+    if (t !== r) {
       if (e === "open") {
         this._syncOpenState();
         return;
       }
-      this.isConnected && this.requestRender(), this._isOpen && (e === "initial-focus" || e === "dismissible" || e === "show-close") && queueMicrotask(() => this._ensureFocusTrap());
+      if (S.has(e)) {
+        this._syncLiveUi(), this._isOpen && (e === "initial-focus" || e === "dismissible" || e === "show-close") && this._scheduleEnsureFocusTrap();
+        return;
+      }
+      this.isConnected && this.requestRender();
     }
   }
   open() {
@@ -587,31 +624,31 @@ class O extends E {
   }
   get dismissible() {
     const e = this.getAttribute("dismissible");
-    return e == null ? !1 : u(e, !0);
+    return e == null ? !1 : w(e, !0);
   }
   set dismissible(e) {
     e ? this.setAttribute("dismissible", "") : this.removeAttribute("dismissible");
   }
   get closeOnOverlay() {
-    return u(this.getAttribute("close-on-overlay"), !0);
+    return w(this.getAttribute("close-on-overlay"), !0);
   }
   set closeOnOverlay(e) {
     this.setAttribute("close-on-overlay", String(e));
   }
   get closeOnEsc() {
-    return u(this.getAttribute("close-on-esc"), !0);
+    return w(this.getAttribute("close-on-esc"), !0);
   }
   set closeOnEsc(e) {
     this.setAttribute("close-on-esc", String(e));
   }
   get lockWhileLoading() {
-    return u(this.getAttribute("lock-while-loading"), !0);
+    return w(this.getAttribute("lock-while-loading"), !0);
   }
   set lockWhileLoading(e) {
     this.setAttribute("lock-while-loading", String(e));
   }
   get showClose() {
-    return this.hasAttribute("show-close") ? u(this.getAttribute("show-close"), !0) : this.dismissible;
+    return this.hasAttribute("show-close") ? w(this.getAttribute("show-close"), !0) : this.dismissible;
   }
   set showClose(e) {
     this.setAttribute("show-close", String(e));
@@ -636,8 +673,27 @@ class O extends E {
   _getPanel() {
     return this.root.querySelector(".panel");
   }
+  _getOverlay() {
+    return this.root.querySelector(".overlay");
+  }
+  _getHeader() {
+    return this.root.querySelector(".header");
+  }
+  _titleId() {
+    return `ui-drawer-title-${this._uid}`;
+  }
+  _descriptionId() {
+    return `ui-drawer-description-${this._uid}`;
+  }
+  _bodyId() {
+    return `ui-drawer-body-${this._uid}`;
+  }
+  _resolvedSide() {
+    const e = this.getAttribute("dir") || document.documentElement.getAttribute("dir") || "ltr";
+    return C(this.getAttribute("side"), e === "rtl" ? "rtl" : "ltr");
+  }
   _isTopMost() {
-    const e = d.top();
+    const e = m.top();
     return e ? e === this : !0;
   }
   _isInteractionLocked() {
@@ -646,22 +702,65 @@ class O extends E {
   _isNodeInsideDrawer(e) {
     if (!e)
       return !1;
-    const r = this._getPanel();
-    return r && r.contains(e) ? !0 : this.contains(e);
+    const t = this._getPanel();
+    return t && t.contains(e) ? !0 : this.contains(e);
   }
   _isFocusable(e) {
     if (!e || !e.isConnected || e.disabled || e.matches('[inert], [aria-hidden="true"]') || e.closest('[inert], [aria-hidden="true"]'))
       return !1;
-    if (!_())
+    if (!L())
       return !0;
-    const r = window.getComputedStyle(e);
-    return r.display !== "none" && r.visibility !== "hidden";
+    const t = window.getComputedStyle(e);
+    return t.display !== "none" && t.visibility !== "hidden";
   }
   _collectFocusable() {
-    const e = this._getPanel(), r = [], t = (o) => {
-      this._isFocusable(o) && (r.includes(o) || r.push(o));
+    const e = this._getPanel(), t = [], r = (s) => {
+      this._isFocusable(s) && (t.includes(s) || t.push(s));
     };
-    return this.querySelectorAll(x).forEach(t), e && e.querySelectorAll(x).forEach(t), r;
+    return this.querySelectorAll(E).forEach(r), e && e.querySelectorAll(E).forEach(r), t;
+  }
+  _cancelScheduledFocusWork() {
+    this._focusInitialFrame && (_(this._focusInitialFrame), this._focusInitialFrame = 0), this._focusTrapFrame && (_(this._focusTrapFrame), this._focusTrapFrame = 0), this._restoreFocusFrame && (_(this._restoreFocusFrame), this._restoreFocusFrame = 0);
+  }
+  _scheduleFocusInitial() {
+    this._isOpen && (this._focusInitialFrame || (this._focusInitialFrame = F(() => {
+      this._focusInitialFrame = 0, this._focusInitial();
+    })));
+  }
+  _scheduleEnsureFocusTrap() {
+    this._isOpen && (this._focusTrapFrame || (this._focusTrapFrame = F(() => {
+      this._focusTrapFrame = 0, this._ensureFocusTrap();
+    })));
+  }
+  _scheduleRestoreFocus(e) {
+    !e || !this._canRestoreFocus(e) || (this._restoreFocusFrame && _(this._restoreFocusFrame), this._restoreFocusFrame = F(() => {
+      this._restoreFocusFrame = 0;
+      try {
+        this._canRestoreFocus(e) && e.focus({ preventScroll: !0 });
+      } catch {
+        try {
+          this._canRestoreFocus(e) && e.focus();
+        } catch {
+        }
+      }
+    }));
+  }
+  _syncLiveUi() {
+    const e = this.hasAttribute("open"), t = this._getOverlay(), r = this._getPanel(), s = this._getHeader(), a = this.root.querySelector(".close-btn");
+    if (t && t.setAttribute("aria-hidden", e ? "false" : "true"), !r)
+      return;
+    const o = this._resolvedSide();
+    r.classList.remove("side-left", "side-right", "side-top", "side-bottom"), r.classList.add(`side-${o}`);
+    const n = this.state === "loading";
+    n ? r.setAttribute("aria-busy", "true") : r.removeAttribute("aria-busy");
+    const y = this.getAttribute("role") || "dialog";
+    r.setAttribute("role", y);
+    const u = (this.getAttribute("title") || "").trim(), h = (this.getAttribute("description") || "").trim(), p = A(this, "header"), b = this.showClose, x = b || p || !!u || !!h;
+    s && s.classList.toggle("empty", !x), a && (a.hidden = !b, a.disabled = n && this.lockWhileLoading);
+    const f = this.getAttribute("aria-label") || "", g = this.getAttribute("aria-labelledby") || "", l = this.getAttribute("aria-describedby") || "", c = g || (!f && (p || u) ? this._titleId() : ""), d = [];
+    l ? d.push(l) : (h && d.push(this._descriptionId()), d.push(this._bodyId()));
+    const k = f || (c ? "" : "Drawer");
+    k ? r.setAttribute("aria-label", k) : r.removeAttribute("aria-label"), c ? r.setAttribute("aria-labelledby", c) : r.removeAttribute("aria-labelledby"), d.length ? r.setAttribute("aria-describedby", d.join(" ")) : r.removeAttribute("aria-describedby");
   }
   _focusInitial() {
     if (!this._isOpen)
@@ -669,21 +768,30 @@ class O extends E {
     const e = this._getPanel();
     if (!e)
       return;
-    const r = this.getAttribute("initial-focus") || "";
-    if (r) {
-      const s = this.querySelector(r) || e.querySelector(r);
-      if (s && this._isFocusable(s))
+    const t = this.getAttribute("initial-focus") || "";
+    if (t) {
+      const o = this.querySelector(t) || e.querySelector(t);
+      if (o && this._isFocusable(o))
         try {
-          s.focus();
+          o.focus({ preventScroll: !0 });
           return;
         } catch {
+          try {
+            o.focus();
+            return;
+          } catch {
+          }
         }
     }
-    const t = this._collectFocusable(), a = t.find((s) => s.hasAttribute("autofocus")) || t[0] || e;
+    const r = this._collectFocusable(), a = r.find((o) => o.hasAttribute("autofocus")) || r[0] || e;
     a === e && !a.hasAttribute("tabindex") && a.setAttribute("tabindex", "-1");
     try {
-      a.focus();
+      a.focus({ preventScroll: !0 });
     } catch {
+      try {
+        a.focus();
+      } catch {
+      }
     }
   }
   _ensureFocusTrap() {
@@ -694,31 +802,31 @@ class O extends E {
   }
   _releaseOpenResources() {
     try {
-      d.unregister(this), d.releaseLock();
+      m.unregister(this), m.releaseLock();
     } catch {
     }
   }
   _canRestoreFocus(e) {
     if (!e || !e.isConnected || e.disabled)
       return !1;
-    if (!_())
+    if (!L())
       return !0;
-    const r = window.getComputedStyle(e);
-    return r.display !== "none" && r.visibility !== "hidden";
+    const t = window.getComputedStyle(e);
+    return t.display !== "none" && t.visibility !== "hidden";
   }
   _syncOpenState() {
     const e = this.hasAttribute("open");
-    if (e === this._isOpen) {
-      e ? (this._bindGlobalListeners(), queueMicrotask(() => this._ensureFocusTrap())) : this._unbindGlobalListeners();
+    if (this._syncLiveUi(), e === this._isOpen) {
+      e ? (this._bindGlobalListeners(), this._scheduleEnsureFocusTrap()) : (this._unbindGlobalListeners(), this._cancelScheduledFocusWork());
       return;
     }
     if (this._isOpen = e, e) {
-      this._bindGlobalListeners(), this._restoreFocusEl = document.activeElement || null, this._closeReason = "programmatic";
+      this._cancelScheduledFocusWork(), this._bindGlobalListeners(), this._restoreFocusEl = document.activeElement || null, this._closeReason = "programmatic";
       try {
-        d.register(this), d.acquireLock();
+        m.register(this), m.acquireLock();
       } catch {
       }
-      this._focusInitial(), queueMicrotask(() => this._ensureFocusTrap()), this.dispatchEvent(new CustomEvent("open", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("show", { bubbles: !0, composed: !0 })), this.dispatchEvent(
+      this._scheduleFocusInitial(), this._scheduleEnsureFocusTrap(), this.dispatchEvent(new CustomEvent("open", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("show", { bubbles: !0, composed: !0 })), this.dispatchEvent(
         new CustomEvent("change", {
           bubbles: !0,
           composed: !0,
@@ -727,77 +835,87 @@ class O extends E {
       );
       return;
     }
-    this._unbindGlobalListeners(), this._releaseOpenResources();
-    const r = this._closeReason;
+    this._unbindGlobalListeners(), this._cancelScheduledFocusWork(), this._releaseOpenResources();
+    const t = this._closeReason;
     this.dispatchEvent(
       new CustomEvent("close", {
         bubbles: !0,
         composed: !0,
-        detail: { reason: r }
+        detail: { reason: t }
       })
     ), this.dispatchEvent(
       new CustomEvent("hide", {
         bubbles: !0,
         composed: !0,
-        detail: { reason: r }
+        detail: { reason: t }
       })
     ), this.dispatchEvent(
       new CustomEvent("change", {
         bubbles: !0,
         composed: !0,
-        detail: { open: !1, reason: r }
+        detail: { open: !1, reason: t }
       })
     );
-    const t = this._restoreFocusEl;
-    if (this._restoreFocusEl = null, this._closeReason = "programmatic", t && this._canRestoreFocus(t))
-      try {
-        this._canRestoreFocus(t) && t.focus();
-      } catch {
-      }
+    const r = this._restoreFocusEl;
+    this._restoreFocusEl = null, this._closeReason = "programmatic", this._scheduleRestoreFocus(r);
   }
   _requestClose(e) {
     if (!this._isOpen || this._isInteractionLocked())
       return;
-    const r = new CustomEvent("request-close", {
+    const t = new CustomEvent("request-close", {
       detail: { reason: e },
       bubbles: !0,
       composed: !0,
       cancelable: !0
     });
-    this.dispatchEvent(r);
-    const t = new CustomEvent("ui-request-close", {
+    this.dispatchEvent(t);
+    const r = new CustomEvent("ui-request-close", {
       detail: { reason: e },
       bubbles: !0,
       composed: !0,
       cancelable: !0
     });
-    this.dispatchEvent(t), !(r.defaultPrevented || t.defaultPrevented) && this.close(e);
+    this.dispatchEvent(r), !(t.defaultPrevented || r.defaultPrevented) && this.close(e);
   }
   _onRootClick(e) {
-    const r = e.target;
-    if (!r || !this._isOpen)
+    const t = e.target;
+    if (!t || !this._isOpen)
       return;
-    if (r.closest(".close-btn")) {
+    if (t.closest(".close-btn")) {
       this._requestClose("button");
       return;
     }
-    r.closest(".overlay") && (!this.dismissible || !this.closeOnOverlay || this._isTopMost() && this._requestClose("overlay"));
+    t.closest(".overlay") && (!this.dismissible || !this.closeOnOverlay || this._isTopMost() && this._requestClose("overlay"));
   }
   _handleTab(e) {
-    const r = this._getPanel();
-    if (!r)
+    const t = this._getPanel();
+    if (!t)
       return;
-    const t = this._collectFocusable();
-    if (!t.length) {
-      e.preventDefault(), r.focus();
+    const r = this._collectFocusable();
+    if (!r.length) {
+      e.preventDefault(), t.focus();
       return;
     }
-    const o = t[0], a = t[t.length - 1], s = document.activeElement, n = !!s && this._isNodeInsideDrawer(s);
+    const s = r[0], a = r[r.length - 1], o = document.activeElement, n = !!o && this._isNodeInsideDrawer(o);
     if (e.shiftKey) {
-      (!n || s === o) && (e.preventDefault(), a.focus());
+      if (!n || o === s) {
+        e.preventDefault();
+        try {
+          a.focus({ preventScroll: !0 });
+        } catch {
+          a.focus();
+        }
+      }
       return;
     }
-    (!n || s === a) && (e.preventDefault(), o.focus());
+    if (!n || o === a) {
+      e.preventDefault();
+      try {
+        s.focus({ preventScroll: !0 });
+      } catch {
+        s.focus();
+      }
+    }
   }
   _onDocumentKeyDown(e) {
     if (!(!this._isOpen || !this._isTopMost())) {
@@ -813,40 +931,40 @@ class O extends E {
   _onDocumentFocusIn(e) {
     if (!this._isOpen || !this._isTopMost())
       return;
-    const r = e.target, t = this._getPanel(), o = typeof e.composedPath == "function" ? e.composedPath() : [];
-    r && this._isNodeInsideDrawer(r) || o.includes(this) || t && o.includes(t) || this._focusInitial();
+    const t = e.target, r = this._getPanel(), s = typeof e.composedPath == "function" ? e.composedPath() : [];
+    t && this._isNodeInsideDrawer(t) || s.includes(this) || r && s.includes(r) || this._scheduleFocusInitial();
   }
   render() {
-    const e = this.getAttribute("dir") || document.documentElement.getAttribute("dir") || "ltr", r = L(this.getAttribute("side"), e === "rtl" ? "rtl" : "ltr"), t = this.showClose, o = y(this, "header"), a = y(this, "footer"), s = (this.getAttribute("title") || "").trim(), n = (this.getAttribute("description") || "").trim(), k = t || o || !!s || !!n, h = `ui-drawer-title-${this._uid}`, b = `ui-drawer-description-${this._uid}`, f = `ui-drawer-body-${this._uid}`, g = this.getAttribute("aria-label") || "", C = this.getAttribute("aria-labelledby") || "", w = this.getAttribute("aria-describedby") || "", p = C || (!g && (o || s) ? h : ""), l = [];
-    w ? l.push(w) : (n && l.push(b), l.push(f));
-    const v = g || (p ? "" : "Drawer"), m = this.state === "loading";
+    const e = this.getAttribute("dir") || document.documentElement.getAttribute("dir") || "ltr", t = C(this.getAttribute("side"), e === "rtl" ? "rtl" : "ltr"), r = this.showClose, s = A(this, "header"), a = A(this, "footer"), o = (this.getAttribute("title") || "").trim(), n = (this.getAttribute("description") || "").trim(), y = r || s || !!o || !!n, u = `ui-drawer-title-${this._uid}`, h = `ui-drawer-description-${this._uid}`, p = `ui-drawer-body-${this._uid}`, b = this.getAttribute("aria-label") || "", x = this.getAttribute("aria-labelledby") || "", f = this.getAttribute("aria-describedby") || "", g = x || (!b && (s || o) ? u : ""), l = [];
+    f ? l.push(f) : (n && l.push(h), l.push(p));
+    const c = b || (g ? "" : "Drawer"), d = this.state === "loading";
     this.setContent(`
-      <style>${A}</style>
+      <style>${O}</style>
       <div class="overlay" part="overlay" aria-hidden="true"></div>
       <aside
-        class="panel side-${r}"
+        class="panel side-${t}"
         part="panel"
         role="dialog"
         aria-modal="true"
-        ${v ? `aria-label="${c(v)}"` : ""}
-        ${p ? `aria-labelledby="${c(p)}"` : ""}
-        ${l.length ? `aria-describedby="${c(l.join(" "))}"` : ""}
-        ${m ? 'aria-busy="true"' : ""}
+        ${c ? `aria-label="${v(c)}"` : ""}
+        ${g ? `aria-labelledby="${v(g)}"` : ""}
+        ${l.length ? `aria-describedby="${v(l.join(" "))}"` : ""}
+        ${d ? 'aria-busy="true"' : ""}
         tabindex="-1"
       >
-        <header class="header ${k ? "" : "empty"}" part="header">
+        <header class="header ${y ? "" : "empty"}" part="header">
           <div class="header-main">
-            ${o ? `<slot name="header" id="${h}"></slot>` : ""}
-            ${!o && s ? `<h2 class="title" id="${h}">${c(s)}</h2>` : ""}
-            ${n ? `<p class="subtitle" id="${b}">${c(n)}</p>` : ""}
+            ${s ? `<slot name="header" id="${u}"></slot>` : ""}
+            ${!s && o ? `<h2 class="title" id="${u}">${v(o)}</h2>` : ""}
+            ${n ? `<p class="subtitle" id="${h}">${v(n)}</p>` : ""}
           </div>
           <button
             type="button"
             class="close-btn"
             part="close"
             aria-label="Close drawer"
-            ${t ? "" : "hidden"}
-            ${m && this.lockWhileLoading ? "disabled" : ""}
+            ${r ? "" : "hidden"}
+            ${d && this.lockWhileLoading ? "disabled" : ""}
           >
             <svg class="close-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true">
               <path d="M3.5 3.5L12.5 12.5"></path>
@@ -854,10 +972,10 @@ class O extends E {
             </svg>
           </button>
         </header>
-        <div class="body" part="body" id="${f}"><slot></slot></div>
+        <div class="body" part="body" id="${p}"><slot></slot></div>
         <footer class="footer ${a ? "" : "empty"}" part="footer"><slot name="footer"></slot></footer>
       </aside>
-    `), this._isOpen && queueMicrotask(() => this._ensureFocusTrap());
+    `), this._syncLiveUi(), this._isOpen && this._scheduleEnsureFocusTrap();
   }
   _bindGlobalListeners() {
     this._globalListenersBound || (document.addEventListener("keydown", this._onDocumentKeyDown, !0), document.addEventListener("focusin", this._onDocumentFocusIn, !0), this._globalListenersBound = !0);
@@ -866,7 +984,7 @@ class O extends E {
     this._globalListenersBound && (document.removeEventListener("keydown", this._onDocumentKeyDown, !0), document.removeEventListener("focusin", this._onDocumentFocusIn, !0), this._globalListenersBound = !1);
   }
 }
-typeof customElements < "u" && !customElements.get("ui-drawer") && customElements.define("ui-drawer", O);
+typeof customElements < "u" && !customElements.get("ui-drawer") && customElements.define("ui-drawer", T);
 export {
-  O as UIDrawer
+  T as UIDrawer
 };

package/dist/floating-toolbar.cjs.js

@@ -20,8 +20,6 @@
     --ui-floating-toolbar-focus-ring: var(--ui-color-focus-ring, #2563eb);
     --ui-floating-toolbar-accent: var(--ui-color-primary, #2563eb);
     --ui-floating-toolbar-backdrop: none;
-    --ui-floating-toolbar-x: 0px;
-    --ui-floating-toolbar-y: 0px;
     --ui-floating-toolbar-enter-y: -4px;
     --ui-floating-toolbar-duration: 170ms;
     --ui-floating-toolbar-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
@@ -49,13 +47,7 @@
     display: grid;
     gap: var(--ui-floating-toolbar-gap);
     outline: none;
-    transform:
-      translate3d(
-        var(--ui-floating-toolbar-x, 0px),
-        calc(var(--ui-floating-toolbar-y, 0px) + var(--ui-floating-toolbar-enter-y, -4px)),
-        0
-      )
-      scale(0.985);
+    transform: translate3d(0, var(--ui-floating-toolbar-enter-y, -4px), 0) scale(0.985);
     opacity: 0;
     transition:
       transform var(--ui-floating-toolbar-duration) var(--ui-floating-toolbar-easing),
@@ -68,9 +60,7 @@
 
   :host([open]) .panel {
     opacity: 1;
-    transform:
-      translate3d(var(--ui-floating-toolbar-x, 0px), var(--ui-floating-toolbar-y, 0px), 0)
-      scale(1);
+    transform: translate3d(0, 0, 0) scale(1);
   }
 
   .panel[data-side="bottom"] {
@@ -210,7 +200,7 @@
       transition: none !important;
     }
   }
-`;function m(i,t){if(i==null||i==="")return t;const e=Number(i);return Number.isFinite(e)?e:t}function b(i,t){if(i==null)return t;const e=i.trim().toLowerCase();return e!=="false"&&e!=="0"&&e!=="off"}function c(i,t,e){return Math.min(e,Math.max(t,i))}function v(i){if(!document.body.contains(i))return!1;const t=window.getComputedStyle(i);return!(t.display==="none"||t.visibility==="hidden"||Number.parseFloat(t.opacity||"1")<=0)}function y(i){return i==="top"||i==="bottom"?i:"auto"}function w(i){return i==="start"||i==="end"?i:"center"}function x(i){const t='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',e=[];return i.forEach(o=>{o instanceof HTMLElement&&(o.matches(t)&&e.push(o),e.push(...Array.from(o.querySelectorAll(t))))}),Array.from(new Set(e))}class f extends p.ElementBase{constructor(){super(...arguments),this._anchor=null,this._panel=null,this._toolbarSlot=null,this._defaultSlot=null,this._raf=null,this._resizeObserver=null,this._mutationObserver=null,this._globalListenersBound=!1,this._isOpen=!1,this._closeReason="programmatic",this._onWindowChangeBound=this._onWindowChange.bind(this),this._onDocumentPointerDownBound=this._onDocumentPointerDown.bind(this),this._onDocumentKeyDownBound=this._onDocumentKeyDown.bind(this),this._onPanelKeyDownBound=this._onPanelKeyDown.bind(this),this._onSlotChangeBound=this._onSlotChange.bind(this)}static get observedAttributes(){return["open","anchor-id","headless","disabled","placement","align","offset","close-on-outside","close-on-escape","aria-label","aria-labelledby","variant","density","shape","elevation","tone"]}connectedCallback(){super.connectedCallback(),this._syncAnchorFromAttribute(),this._syncOpenState(),this._schedulePosition()}disconnectedCallback(){this._unbindGlobalListeners(),this._teardownObservers(),this._raf!=null&&(cancelAnimationFrame(this._raf),this._raf=null),super.disconnectedCallback()}attributeChangedCallback(t,e,o){if(e!==o){if(t==="anchor-id"){this._syncAnchorFromAttribute(),this.hasAttribute("open")&&!this._anchor&&this._requestClose("anchor-missing"),this._schedulePosition();return}if(t==="open"){this._syncOpenState(),this._schedulePosition();return}if(t==="disabled"){this.hasAttribute("disabled")&&this.hasAttribute("open")&&this._requestClose("disabled");return}if(t==="headless"){this._syncOpenState(),this._schedulePosition();return}if(t==="aria-label"||t==="aria-labelledby"){this._syncPanelA11y();return}(t==="placement"||t==="align"||t==="offset")&&this._schedulePosition()}}showForAnchorId(t){if(this.hasAttribute("disabled")||!t)return;const e=document.getElementById(t);if(!e){this._requestClose("anchor-missing");return}this._anchor=e,this.setAttribute("anchor-id",t),this.openToolbar()}hide(){this.closeToolbar("programmatic")}openToolbar(){this.hasAttribute("disabled")||(this.hasAttribute("open")||this.setAttribute("open",""),this._schedulePosition())}closeToolbar(t="programmatic"){this.hasAttribute("open")&&(this._closeReason=t,this.removeAttribute("open"))}_syncOpenState(){const t=this.hasAttribute("open")&&!this.hasAttribute("headless")&&!this.hasAttribute("disabled");if(t===this._isOpen){t&&this._schedulePosition();return}if(this._isOpen=t,t){this._bindGlobalListeners(),this._ensureObservers(),this._dispatchOpenEvents(),this._schedulePosition();return}this._unbindGlobalListeners(),this._teardownObservers(),this._raf!=null&&(cancelAnimationFrame(this._raf),this._raf=null),this._dispatchCloseEvents(this._closeReason),this._closeReason="programmatic"}_dispatchOpenEvents(){this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!0}}))}_dispatchCloseEvents(t){this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0,detail:{reason:t}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!1,reason:t}}))}_requestClose(t){if(!this.hasAttribute("open"))return;const e=new CustomEvent("request-close",{detail:{reason:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e);const o=new CustomEvent("ui-request-close",{detail:{reason:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(o),!(e.defaultPrevented||o.defaultPrevented)&&this.closeToolbar(t)}_syncAnchorFromAttribute(){const t=this.getAttribute("anchor-id");if(!t){this._anchor=null;return}this._anchor=document.getElementById(t)}_schedulePosition(){!this.hasAttribute("open")||this.hasAttribute("headless")||this.hasAttribute("disabled")||(this._raf!=null&&cancelAnimationFrame(this._raf),this._raf=requestAnimationFrame(()=>{this._raf=null,this._position()}))}_ensureObservers(){if(!(this._resizeObserver&&this._mutationObserver)){if(typeof ResizeObserver<"u"){if(this._resizeObserver=new ResizeObserver(()=>this._schedulePosition()),this._panel)try{this._resizeObserver.observe(this._panel)}catch{}if(this._anchor)try{this._resizeObserver.observe(this._anchor)}catch{}}if(typeof MutationObserver<"u"&&this._anchor){this._mutationObserver=new MutationObserver(()=>this._schedulePosition());try{this._mutationObserver.observe(this._anchor,{attributes:!0,childList:!1,subtree:!1})}catch{}}}}_teardownObservers(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._mutationObserver&&(this._mutationObserver.disconnect(),this._mutationObserver=null)}_refreshObservers(){this._isOpen&&(this._teardownObservers(),this._ensureObservers())}_bindGlobalListeners(){this._globalListenersBound||(window.addEventListener("scroll",this._onWindowChangeBound,!0),window.addEventListener("resize",this._onWindowChangeBound),document.addEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.addEventListener("keydown",this._onDocumentKeyDownBound,!0),this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(window.removeEventListener("scroll",this._onWindowChangeBound,!0),window.removeEventListener("resize",this._onWindowChangeBound),document.removeEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.removeEventListener("keydown",this._onDocumentKeyDownBound,!0),this._globalListenersBound=!1)}_position(){if(!this.hasAttribute("open")||this.hasAttribute("headless")||this.hasAttribute("disabled"))return;if(!this._anchor){this._requestClose("anchor-missing");return}if(!v(this._anchor)){this._requestClose("anchor-hidden");return}if(!this._panel)return;const t=this._anchor.getBoundingClientRect(),e=this._panel.getBoundingClientRect(),o=8,n=Math.max(0,m(this.getAttribute("offset"),8)),r=y(this.getAttribute("placement")),s=w(this.getAttribute("align")),a=t.top-o,l=window.innerHeight-t.bottom-o,d=r==="bottom"||r==="auto"&&l>a&&a<e.height+n,g=d?"bottom":"top";let h=d?t.bottom+n:t.top-e.height-n;h=c(h,o,window.innerHeight-e.height-o);let u=t.left+t.width/2-e.width/2;s==="start"&&(u=t.left),s==="end"&&(u=t.right-e.width),u=c(u,o,window.innerWidth-e.width-o),this.style.setProperty("--ui-floating-toolbar-x",`${Math.round(u)}px`),this.style.setProperty("--ui-floating-toolbar-y",`${Math.round(h)}px`),this.style.setProperty("--ui-floating-toolbar-origin-x",s==="start"?"0%":s==="end"?"100%":"50%"),this._panel.setAttribute("data-side",g)}_onWindowChange(){this.hasAttribute("open")&&this._schedulePosition()}_onDocumentPointerDown(t){if(!this.hasAttribute("open")||!b(this.getAttribute("close-on-outside"),!0))return;const e=t.composedPath();e.includes(this)||this._anchor&&e.includes(this._anchor)||this._requestClose("outside")}_onDocumentKeyDown(t){this.hasAttribute("open")&&t.key==="Escape"&&b(this.getAttribute("close-on-escape"),!0)&&(t.preventDefault(),this._requestClose("escape"))}_onPanelKeyDown(t){if(!this._panel||!["ArrowRight","ArrowLeft","Home","End"].includes(t.key))return;const e=this._getFocusableItems();if(e.length===0)return;const o=document.activeElement,n=o?e.indexOf(o):-1;let r=n;t.key==="Home"?r=0:t.key==="End"?r=e.length-1:t.key==="ArrowRight"?r=n<0?0:(n+1)%e.length:t.key==="ArrowLeft"&&(r=n<0?e.length-1:(n-1+e.length)%e.length);const s=e[r];s&&(t.preventDefault(),s.focus())}_getFocusableItems(){var o,n;const t=((o=this._toolbarSlot)==null?void 0:o.assignedElements({flatten:!0}))||[],e=((n=this._defaultSlot)==null?void 0:n.assignedElements({flatten:!0}))||[];return x([...t,...e])}_onSlotChange(){this._syncRowVisibility(),this._schedulePosition()}_syncRowVisibility(){var r,s;const t=this.root.querySelector(".row-toolbar"),e=this.root.querySelector(".row-default");if(!t||!e)return;const o=(((r=this._toolbarSlot)==null?void 0:r.assignedNodes({flatten:!0}))||[]).some(a=>{var l;return a.nodeType===Node.TEXT_NODE?!!((l=a.textContent)!=null&&l.trim()):a.nodeType===Node.ELEMENT_NODE}),n=(((s=this._defaultSlot)==null?void 0:s.assignedNodes({flatten:!0}))||[]).some(a=>{var l;return a.nodeType===Node.TEXT_NODE?!!((l=a.textContent)!=null&&l.trim()):a.nodeType===Node.ELEMENT_NODE});o?t.removeAttribute("hidden"):t.setAttribute("hidden",""),n?e.removeAttribute("hidden"):e.setAttribute("hidden","")}_syncPanelA11y(){if(!this._panel)return;const t=this.getAttribute("aria-labelledby"),e=this.getAttribute("aria-label")||(t?null:"Floating toolbar");t?this._panel.setAttribute("aria-labelledby",t):this._panel.removeAttribute("aria-labelledby"),e?this._panel.setAttribute("aria-label",e):this._panel.removeAttribute("aria-label")}render(){var t,e,o,n,r,s;this.setContent(`
+`;function m(i,t){if(i==null||i==="")return t;const e=Number(i);return Number.isFinite(e)?e:t}function c(i,t){if(i==null)return t;const e=i.trim().toLowerCase();return e!=="false"&&e!=="0"&&e!=="off"}function b(i,t,e){return Math.min(e,Math.max(t,i))}function v(i){if(!document.body.contains(i))return!1;const t=window.getComputedStyle(i);return!(t.display==="none"||t.visibility==="hidden"||Number.parseFloat(t.opacity||"1")<=0)}function w(i){return i==="top"||i==="bottom"?i:"auto"}function y(i){return i==="start"||i==="end"?i:"center"}function x(i){const t='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',e=[];return i.forEach(o=>{o instanceof HTMLElement&&(o.matches(t)&&e.push(o),e.push(...Array.from(o.querySelectorAll(t))))}),Array.from(new Set(e))}class f extends p.ElementBase{constructor(){super(...arguments),this._anchor=null,this._panel=null,this._toolbarSlot=null,this._defaultSlot=null,this._raf=null,this._resizeObserver=null,this._mutationObserver=null,this._globalListenersBound=!1,this._isOpen=!1,this._closeReason="programmatic",this._onWindowChangeBound=this._onWindowChange.bind(this),this._onDocumentPointerDownBound=this._onDocumentPointerDown.bind(this),this._onDocumentKeyDownBound=this._onDocumentKeyDown.bind(this),this._onPanelKeyDownBound=this._onPanelKeyDown.bind(this),this._onSlotChangeBound=this._onSlotChange.bind(this)}static get observedAttributes(){return["open","anchor-id","headless","disabled","placement","align","offset","close-on-outside","close-on-escape","aria-label","aria-labelledby","variant","density","shape","elevation","tone"]}connectedCallback(){super.connectedCallback(),this._syncAnchorFromAttribute(),this._syncOpenState(),this._schedulePosition()}disconnectedCallback(){this._unbindGlobalListeners(),this._teardownObservers(),this._raf!=null&&(cancelAnimationFrame(this._raf),this._raf=null),super.disconnectedCallback()}attributeChangedCallback(t,e,o){if(e!==o){if(t==="anchor-id"){this._syncAnchorFromAttribute(),this.hasAttribute("open")&&!this._anchor&&this._requestClose("anchor-missing"),this._schedulePosition();return}if(t==="open"){this._syncOpenState(),this._schedulePosition();return}if(t==="disabled"){this.hasAttribute("disabled")&&this.hasAttribute("open")&&this._requestClose("disabled");return}if(t==="headless"){this._syncOpenState(),this._schedulePosition();return}if(t==="aria-label"||t==="aria-labelledby"){this._syncPanelA11y();return}(t==="placement"||t==="align"||t==="offset")&&this._schedulePosition()}}showForAnchorId(t){if(this.hasAttribute("disabled")||!t)return;const e=document.getElementById(t);if(!e){this._requestClose("anchor-missing");return}this._anchor=e,this.setAttribute("anchor-id",t),this.openToolbar()}hide(){this.closeToolbar("programmatic")}openToolbar(){this.hasAttribute("disabled")||(this.hasAttribute("open")||this.setAttribute("open",""),this._schedulePosition())}closeToolbar(t="programmatic"){this.hasAttribute("open")&&(this._closeReason=t,this.removeAttribute("open"))}_syncOpenState(){const t=this.hasAttribute("open")&&!this.hasAttribute("headless")&&!this.hasAttribute("disabled");if(t===this._isOpen){t&&this._schedulePosition();return}if(this._isOpen=t,t){this._bindGlobalListeners(),this._ensureObservers(),this._dispatchOpenEvents(),this._schedulePosition();return}this._unbindGlobalListeners(),this._teardownObservers(),this._raf!=null&&(cancelAnimationFrame(this._raf),this._raf=null),this._dispatchCloseEvents(this._closeReason),this._closeReason="programmatic"}_dispatchOpenEvents(){this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!0}}))}_dispatchCloseEvents(t){this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0,detail:{reason:t}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!1,reason:t}}))}_requestClose(t){if(!this.hasAttribute("open"))return;const e=new CustomEvent("request-close",{detail:{reason:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e);const o=new CustomEvent("ui-request-close",{detail:{reason:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(o),!(e.defaultPrevented||o.defaultPrevented)&&this.closeToolbar(t)}_syncAnchorFromAttribute(){const t=this.getAttribute("anchor-id");if(!t){this._anchor=null;return}this._anchor=document.getElementById(t)}_schedulePosition(){!this.hasAttribute("open")||this.hasAttribute("headless")||this.hasAttribute("disabled")||(this._raf!=null&&cancelAnimationFrame(this._raf),this._raf=requestAnimationFrame(()=>{this._raf=null,this._position()}))}_ensureObservers(){if(!(this._resizeObserver&&this._mutationObserver)){if(typeof ResizeObserver<"u"){if(this._resizeObserver=new ResizeObserver(()=>this._schedulePosition()),this._panel)try{this._resizeObserver.observe(this._panel)}catch{}if(this._anchor)try{this._resizeObserver.observe(this._anchor)}catch{}}if(typeof MutationObserver<"u"&&this._anchor){this._mutationObserver=new MutationObserver(()=>this._schedulePosition());try{this._mutationObserver.observe(this._anchor,{attributes:!0,childList:!1,subtree:!1})}catch{}}}}_teardownObservers(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._mutationObserver&&(this._mutationObserver.disconnect(),this._mutationObserver=null)}_refreshObservers(){this._isOpen&&(this._teardownObservers(),this._ensureObservers())}_bindGlobalListeners(){this._globalListenersBound||(window.addEventListener("scroll",this._onWindowChangeBound,{passive:!0,capture:!0}),window.addEventListener("resize",this._onWindowChangeBound),document.addEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.addEventListener("keydown",this._onDocumentKeyDownBound,!0),this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(window.removeEventListener("scroll",this._onWindowChangeBound,!0),window.removeEventListener("resize",this._onWindowChangeBound),document.removeEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.removeEventListener("keydown",this._onDocumentKeyDownBound,!0),this._globalListenersBound=!1)}_position(){if(!this.hasAttribute("open")||this.hasAttribute("headless")||this.hasAttribute("disabled"))return;if(!this._anchor){this._requestClose("anchor-missing");return}if(!v(this._anchor)){this._requestClose("anchor-hidden");return}if(!this._panel)return;const t=this._anchor.getBoundingClientRect(),e=this._panel.getBoundingClientRect(),o=8,n=Math.max(0,m(this.getAttribute("offset"),8)),r=w(this.getAttribute("placement")),s=y(this.getAttribute("align")),a=t.top-o,l=window.innerHeight-t.bottom-o,d=r==="bottom"||r==="auto"&&l>a&&a<e.height+n,g=d?"bottom":"top";let h=d?t.bottom+n:t.top-e.height-n;h=b(h,o,window.innerHeight-e.height-o);let u=t.left+t.width/2-e.width/2;s==="start"&&(u=t.left),s==="end"&&(u=t.right-e.width),u=b(u,o,window.innerWidth-e.width-o),this._panel.style.left=`${Math.round(u)}px`,this._panel.style.top=`${Math.round(h)}px`,this.style.setProperty("--ui-floating-toolbar-origin-x",s==="start"?"0%":s==="end"?"100%":"50%"),this._panel.setAttribute("data-side",g)}_onWindowChange(){this.hasAttribute("open")&&this._schedulePosition()}_onDocumentPointerDown(t){if(!this.hasAttribute("open")||!c(this.getAttribute("close-on-outside"),!0))return;const e=t.composedPath();e.includes(this)||this._anchor&&e.includes(this._anchor)||this._requestClose("outside")}_onDocumentKeyDown(t){this.hasAttribute("open")&&t.key==="Escape"&&c(this.getAttribute("close-on-escape"),!0)&&(t.preventDefault(),this._requestClose("escape"))}_onPanelKeyDown(t){if(!this._panel||!["ArrowRight","ArrowLeft","Home","End"].includes(t.key))return;const e=this._getFocusableItems();if(e.length===0)return;const o=document.activeElement,n=o?e.indexOf(o):-1;let r=n;t.key==="Home"?r=0:t.key==="End"?r=e.length-1:t.key==="ArrowRight"?r=n<0?0:(n+1)%e.length:t.key==="ArrowLeft"&&(r=n<0?e.length-1:(n-1+e.length)%e.length);const s=e[r];s&&(t.preventDefault(),s.focus())}_getFocusableItems(){var o,n;const t=((o=this._toolbarSlot)==null?void 0:o.assignedElements({flatten:!0}))||[],e=((n=this._defaultSlot)==null?void 0:n.assignedElements({flatten:!0}))||[];return x([...t,...e])}_onSlotChange(){this._syncRowVisibility(),this._schedulePosition()}_syncRowVisibility(){var r,s;const t=this.root.querySelector(".row-toolbar"),e=this.root.querySelector(".row-default");if(!t||!e)return;const o=(((r=this._toolbarSlot)==null?void 0:r.assignedNodes({flatten:!0}))||[]).some(a=>{var l;return a.nodeType===Node.TEXT_NODE?!!((l=a.textContent)!=null&&l.trim()):a.nodeType===Node.ELEMENT_NODE}),n=(((s=this._defaultSlot)==null?void 0:s.assignedNodes({flatten:!0}))||[]).some(a=>{var l;return a.nodeType===Node.TEXT_NODE?!!((l=a.textContent)!=null&&l.trim()):a.nodeType===Node.ELEMENT_NODE});o?t.removeAttribute("hidden"):t.setAttribute("hidden",""),n?e.removeAttribute("hidden"):e.setAttribute("hidden","")}_syncPanelA11y(){if(!this._panel)return;const t=this.getAttribute("aria-labelledby"),e=this.getAttribute("aria-label")||(t?null:"Floating toolbar");t?this._panel.setAttribute("aria-labelledby",t):this._panel.removeAttribute("aria-labelledby"),e?this._panel.setAttribute("aria-label",e):this._panel.removeAttribute("aria-label")}render(){var t,e,o,n,r,s;this.setContent(`
       <style>${_}</style>
       <section class="panel" part="panel" role="toolbar" aria-orientation="horizontal" tabindex="-1">
         <div class="row row-toolbar" part="row-toolbar">