@editora/ui-core 0.1.12 → 0.1.14

package/dist/context-menu.esm.js

@@ -1,17 +1,18 @@
-import { E as A } from "./ElementBase-909688f3.mjs";
-import { c as S } from "./portal-1cf392ca.mjs";
-import { c as w } from "./dismissable-layer-9c7e6b58.mjs";
-import { c as P } from "./menu-item-styles-27fdbac4.mjs";
+import { E } from "./ElementBase-909688f3.mjs";
+import { c as A } from "./portal-fe73e5cc.mjs";
+import { c as S } from "./dismissable-layer-9c7e6b58.mjs";
+import { l as P } from "./positioner-e9770c66.mjs";
+import { c as w } from "./menu-item-styles-27fdbac4.mjs";
 import "./listbox-308789a0.mjs";
 import "./collection-a1aac0c6.mjs";
 import "./collection.esm.js";
-const p = '.menuitem, [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [data-menu-item]', b = [
+const c = '.menuitem, [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [data-menu-item]', b = [
   ":scope > .menuitem",
   ':scope > [role="menuitem"]',
   ':scope > [role="menuitemcheckbox"]',
   ':scope > [role="menuitemradio"]',
   ":scope > [data-menu-item]"
-].join(", "), L = ":scope > .submenu", u = 8, O = 6, C = 420, I = 110, k = [
+].join(", "), O = ":scope > .submenu", l = 8, L = 6, R = 420, C = 110, I = [
   "--ui-color-primary",
   "--ui-color-primary-hover",
   "--ui-color-foreground-on-primary",
@@ -46,7 +47,7 @@ const p = '.menuitem, [role="menuitem"], [role="menuitemcheckbox"], [role="menui
   "--accent-surface",
   "--accent-indicator",
   "--accent-track"
-], R = [
+], k = [
   { prefix: "--accent-", from: 1, to: 12 },
   { prefix: "--accent-a", from: 1, to: 12 },
   { prefix: "--gray-", from: 1, to: 12 },
@@ -70,7 +71,7 @@ const p = '.menuitem, [role="menuitem"], [role="menuitemcheckbox"], [role="menui
   "--base-context-menu-item-line-height",
   "--base-context-menu-submenu-radius",
   "--base-context-menu-submenu-padding"
-], v = `
+], g = `
   :host {
     position: fixed;
     inset: 0;
@@ -352,14 +353,14 @@ const p = '.menuitem, [role="menuitem"], [role="menuitemcheckbox"], [role="menui
     --ui-context-menu-status-border: color-mix(in srgb, #16a34a 46%, var(--ui-context-menu-border-color));
     --ui-context-menu-status-text: #15803d;
   }
-`, E = `
+`, v = `
   ui-context-menu [slot="menu"],
   ui-context-menu [slot="content"] {
     display: flex;
     flex-direction: column;
     gap: 0;
   }
-  ${P({
+  ${w({
   scopes: ['ui-context-menu [slot="menu"]', 'ui-context-menu [slot="content"]'],
   prefix: "--ui-context-menu",
   itemSelectors: [".menuitem", '[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]', "[data-menu-item]"],
@@ -417,104 +418,83 @@ const p = '.menuitem, [role="menuitem"], [role="menuitemcheckbox"], [role="menui
 function z() {
   if (typeof document > "u")
     return;
-  const s = "ui-context-menu-light-dom-style";
-  if (document.getElementById(s))
+  const o = "ui-context-menu-light-dom-style";
+  if (document.getElementById(o))
     return;
   const t = document.createElement("style");
-  t.id = s, t.textContent = E, document.head.appendChild(t);
+  t.id = o, t.textContent = v, document.head.appendChild(t);
 }
-function B(s, t) {
-  return s.replace(/(^|})\s*([^@}{][^{}]*)\{/g, (e, i, n) => {
-    const o = n.split(",").map((r) => r.trim()).filter(Boolean).map((r) => r.startsWith(t) ? r : `${t} ${r}`).join(", ");
+function B(o, t) {
+  return o.replace(/(^|})\s*([^@}{][^{}]*)\{/g, (e, i, n) => {
+    const s = n.split(",").map((r) => r.trim()).filter(Boolean).map((r) => r.startsWith(t) ? r : `${t} ${r}`).join(", ");
     return `${i}
-${o} {`;
+${s} {`;
   });
 }
-function F(s) {
-  const t = s.replace(/:host\(\[([a-z-]+)(?:="([^"]+)")?\]\)/g, (e, i, n) => n != null ? `.ui-context-menu-portal[data-${i}="${n}"]` : `.ui-context-menu-portal[data-${i}="true"]`).replace(/:host/g, ".ui-context-menu-portal");
+function F(o) {
+  const t = o.replace(/:host\(\[([a-z-]+)(?:="([^"]+)")?\]\)/g, (e, i, n) => n != null ? `.ui-context-menu-portal[data-${i}="${n}"]` : `.ui-context-menu-portal[data-${i}="true"]`).replace(/:host/g, ".ui-context-menu-portal");
   return B(t, ".ui-context-menu-portal");
 }
-function H(s) {
-  return s.replace(/(^|,)\s*ui-context-menu\b/gm, (t, e) => `${e} .ui-context-menu-portal`);
+function H(o) {
+  return o.replace(/(^|,)\s*ui-context-menu\b/gm, (t, e) => `${e} .ui-context-menu-portal`);
 }
-const D = `${F(v)}
-${H(E)}`;
-function y(s, t, e) {
-  return Math.min(e, Math.max(t, s));
+const D = `${F(g)}
+${H(v)}`;
+function M(o) {
+  return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function M(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function q(o, t) {
+  return typeof o == "number" ? { x: o, y: typeof t == "number" ? t : 0 } : o;
 }
-function q(s, t) {
-  return typeof s == "number" ? { x: s, y: typeof t == "number" ? t : 0 } : s;
+function $(o) {
+  return o === "top" || o === "left" || o === "right" ? o : "bottom";
 }
-function $(s) {
-  return s === "top" || s === "left" || s === "right" ? s : "bottom";
+function V(o) {
+  return `${o}-start`;
 }
-function _(s) {
-  if (!s)
+function _(o) {
+  if (!o)
     return "";
-  const t = s.trim().toLowerCase();
+  const t = o.trim().toLowerCase();
   return t === "1" ? "sm" : t === "2" ? "md" : t === "3" ? "lg" : t === "sm" || t === "md" || t === "lg" ? t : t === "compact" ? "sm" : t === "comfortable" ? "lg" : "";
 }
-function g(s) {
-  if (!s)
+function y(o) {
+  if (!o)
     return "";
-  const t = s.trim().toLowerCase();
-  return t ? t === "none" ? "0px" : t === "sm" ? "8px" : t === "md" ? "12px" : t === "lg" ? "16px" : t === "full" ? "999px" : t === "square" ? "6px" : t === "soft" ? "16px" : /^\d+(\.\d+)?$/.test(t) ? `${t}px` : s : "";
+  const t = o.trim().toLowerCase();
+  return t ? t === "none" ? "0px" : t === "sm" ? "8px" : t === "md" ? "12px" : t === "lg" ? "16px" : t === "full" ? "999px" : t === "square" ? "6px" : t === "soft" ? "16px" : /^\d+(\.\d+)?$/.test(t) ? `${t}px` : o : "";
 }
-function V(s) {
-  if (!s.isConnected || s.hidden)
+function N(o) {
+  if (!o.isConnected || o.hidden)
     return !1;
-  const t = window.getComputedStyle(s);
+  const t = window.getComputedStyle(o);
   return !(t.display === "none" || t.visibility === "hidden");
 }
-function N(s) {
-  if (!s.isConnected)
+function W(o) {
+  if (!o.isConnected)
     return !1;
-  const t = window.getComputedStyle(s);
+  const t = window.getComputedStyle(o);
   if (t.display === "none" || t.visibility === "hidden")
     return !1;
-  const e = s.getBoundingClientRect();
+  const e = o.getBoundingClientRect();
   if (e.width > 0 || e.height > 0)
     return !0;
   const i = Number.parseFloat(t.width || "0"), n = Number.parseFloat(t.height || "0");
   return i > 0 || n > 0;
 }
-function x(s) {
-  const t = s.getAttribute("aria-disabled");
-  return s.hasAttribute("disabled") || t === "true" || s.disabled === !0;
+function x(o) {
+  const t = o.getAttribute("aria-disabled");
+  return o.hasAttribute("disabled") || t === "true" || o.disabled === !0;
 }
-function G(s) {
-  for (const t of s)
-    if (t instanceof HTMLElement && t.matches(p))
+function G(o) {
+  for (const t of o)
+    if (t instanceof HTMLElement && t.matches(c))
       return t;
   return null;
 }
-function W(s) {
-  return {
-    top: s.y,
-    left: s.x,
-    right: s.x,
-    bottom: s.y,
-    width: 0,
-    height: 0
-  };
-}
-function U(s, t, e, i, n) {
-  const o = window.innerWidth || document.documentElement.clientWidth || 0, r = window.innerHeight || document.documentElement.clientHeight || 0, a = Math.max(u, o - t - u), c = Math.max(u, r - e - u);
-  let l = i, h = i === "left" ? s.left - t - n : i === "right" ? s.right + n : s.left, m = i === "top" ? s.top - e - n : i === "bottom" ? s.bottom + n : s.top;
-  return i === "top" || i === "bottom" ? l === "bottom" && m + e > r - u && s.top - e - n >= u ? (l = "top", m = s.top - e - n) : l === "top" && m < u && s.bottom + n + e <= r - u && (l = "bottom", m = s.bottom + n) : (i === "left" || i === "right") && (l === "right" && h + t > o - u && s.left - t - n >= u ? (l = "left", h = s.left - t - n) : l === "left" && h < u && s.right + n + t <= o - u && (l = "right", h = s.right + n)), h = y(h, u, a), m = y(m, u, c), {
-    x: Math.round(h),
-    y: Math.round(m),
-    placement: l,
-    maxWidth: Math.max(160, o - u * 2),
-    maxHeight: Math.max(120, r - u * 2)
-  };
-}
-class Y extends A {
+class U extends E {
   constructor() {
-    super(), this._isOpen = !1, this._anchorEl = null, this._point = { x: 0, y: 0 }, this._restoreFocusEl = null, this._portalEl = null, this._portalSurfaceEl = null, this._portalContentHostEl = null, this._dismissableLayer = null, this._contentAnchor = null, this._contentSourceEl = null, this._contentOriginalParent = null, this._positionRaf = null, this._submenuRaf = null, this._anchorTrackRaf = null, this._typeaheadBuffer = "", this._typeaheadTimer = null, this._submenuIntentTimer = null, this._submenuIntentItem = null, this._hoveredItem = null, this._lastAnchorRect = null, this._resizeListenerBound = !1, this._scrollListenerBound = !1, this._nextOpenSource = "attribute", this._onRootClick = this._onRootClick.bind(this), this._onRootKeyDown = this._onRootKeyDown.bind(this), this._onRootPointerOver = this._onRootPointerOver.bind(this), this._onRootPointerLeave = this._onRootPointerLeave.bind(this), this._onRootFocusIn = this._onRootFocusIn.bind(this), this._onContextMenu = this._onContextMenu.bind(this), this._onViewportChange = this._onViewportChange.bind(this), this._trackAnchorLayout = this._trackAnchorLayout.bind(this);
+    super(), this._isOpen = !1, this._anchorEl = null, this._point = { x: 0, y: 0 }, this._restoreFocusEl = null, this._portalEl = null, this._portalSurfaceEl = null, this._portalContentHostEl = null, this._dismissableLayer = null, this._positioner = null, this._positionerPlacement = null, this._positionerOffset = 0, this._positionerAnchorEl = null, this._contentAnchor = null, this._contentSourceEl = null, this._contentOriginalParent = null, this._positionRaf = null, this._submenuRaf = null, this._anchorTrackRaf = null, this._typeaheadBuffer = "", this._typeaheadTimer = null, this._submenuIntentTimer = null, this._submenuIntentItem = null, this._hoveredItem = null, this._lastAnchorRect = null, this._resizeListenerBound = !1, this._scrollListenerBound = !1, this._nextOpenSource = "attribute", this._onRootClick = this._onRootClick.bind(this), this._onRootKeyDown = this._onRootKeyDown.bind(this), this._onRootPointerOver = this._onRootPointerOver.bind(this), this._onRootPointerLeave = this._onRootPointerLeave.bind(this), this._onRootFocusIn = this._onRootFocusIn.bind(this), this._onContextMenu = this._onContextMenu.bind(this), this._onViewportChange = this._onViewportChange.bind(this), this._trackAnchorLayout = this._trackAnchorLayout.bind(this);
   }
   static get observedAttributes() {
     return [
@@ -703,12 +683,12 @@ class Y extends A {
   _syncVisualState() {
     const t = _(this.getAttribute("size") || this.getAttribute("density"));
     t && t !== "md" ? this.setAttribute("data-ui-context-menu-size", t) : this.removeAttribute("data-ui-context-menu-size"), t === "sm" ? (this.style.setProperty("--ui-context-menu-padding", "4px"), this.style.setProperty("--ui-context-menu-item-gap", "8px"), this.style.setProperty("--ui-context-menu-item-min-height", "32px"), this.style.setProperty("--ui-context-menu-item-pad-y", "6px"), this.style.setProperty("--ui-context-menu-item-pad-x", "8px"), this.style.setProperty("--ui-context-menu-item-font-size", "13px"), this.style.setProperty("--ui-context-menu-item-line-height", "18px"), this.style.setProperty("--ui-context-menu-separator-margin", "4px 8px")) : t === "lg" ? (this.style.setProperty("--ui-context-menu-padding", "8px"), this.style.setProperty("--ui-context-menu-item-gap", "12px"), this.style.setProperty("--ui-context-menu-item-min-height", "40px"), this.style.setProperty("--ui-context-menu-item-pad-y", "9px"), this.style.setProperty("--ui-context-menu-item-pad-x", "12px"), this.style.setProperty("--ui-context-menu-item-font-size", "15px"), this.style.setProperty("--ui-context-menu-item-line-height", "22px"), this.style.setProperty("--ui-context-menu-separator-margin", "8px 12px")) : (this.style.removeProperty("--ui-context-menu-padding"), this.style.removeProperty("--ui-context-menu-item-gap"), this.style.removeProperty("--ui-context-menu-item-min-height"), this.style.removeProperty("--ui-context-menu-item-pad-y"), this.style.removeProperty("--ui-context-menu-item-pad-x"), this.style.removeProperty("--ui-context-menu-item-font-size"), this.style.removeProperty("--ui-context-menu-item-line-height"), this.style.removeProperty("--ui-context-menu-separator-margin"));
-    const e = g(this.getAttribute("radius") || this.getAttribute("shape"));
+    const e = y(this.getAttribute("radius") || this.getAttribute("shape"));
     e ? (this.style.setProperty("--ui-context-menu-radius", e), this.style.setProperty("--ui-context-menu-item-radius", e), this.style.setProperty("--ui-context-menu-submenu-radius", e)) : (this.style.removeProperty("--ui-context-menu-radius"), this.style.removeProperty("--ui-context-menu-item-radius"), this.style.removeProperty("--ui-context-menu-submenu-radius"));
   }
   _syncGlobalListeners(t) {
     const e = t, i = t && !!this._anchorEl;
-    e && !this._resizeListenerBound ? (window.addEventListener("resize", this._onViewportChange), this._resizeListenerBound = !0) : !e && this._resizeListenerBound && (window.removeEventListener("resize", this._onViewportChange), this._resizeListenerBound = !1), i && !this._scrollListenerBound ? (window.addEventListener("scroll", this._onViewportChange, !0), this._scrollListenerBound = !0) : !i && this._scrollListenerBound && (window.removeEventListener("scroll", this._onViewportChange, !0), this._scrollListenerBound = !1), t && this._anchorEl ? this._startAnchorTracking() : this._stopAnchorTracking();
+    e && !this._resizeListenerBound ? (window.addEventListener("resize", this._onViewportChange), this._resizeListenerBound = !0) : !e && this._resizeListenerBound && (window.removeEventListener("resize", this._onViewportChange), this._resizeListenerBound = !1), i && !this._scrollListenerBound ? (window.addEventListener("scroll", this._onViewportChange, { passive: !0, capture: !0 }), this._scrollListenerBound = !0) : !i && this._scrollListenerBound && (window.removeEventListener("scroll", this._onViewportChange, !0), this._scrollListenerBound = !1), t && this._anchorEl ? this._startAnchorTracking() : this._stopAnchorTracking();
   }
   _unbindGlobalListeners() {
     this._syncGlobalListeners(!1);
@@ -729,20 +709,20 @@ class Y extends A {
       const n = t.getPropertyValue(i).trim();
       n ? this._portalEl.style.setProperty(i, n) : this._portalEl.style.removeProperty(i);
     };
-    k.forEach(e), T.forEach(e), R.forEach(({ prefix: i, from: n, to: o }) => {
-      for (let r = n; r <= o; r += 1)
+    I.forEach(e), T.forEach(e), k.forEach(({ prefix: i, from: n, to: s }) => {
+      for (let r = n; r <= s; r += 1)
         e(`${i}${r}`);
     });
   }
   _syncPortalVisualState() {
     if (!this._portalEl)
       return;
-    const t = _(this.getAttribute("size") || this.getAttribute("density")), e = g(this.getAttribute("radius") || this.getAttribute("shape"));
+    const t = _(this.getAttribute("size") || this.getAttribute("density")), e = y(this.getAttribute("radius") || this.getAttribute("shape"));
     this._syncPortalThemeVariables(), this._setPortalFlag("open", this._isOpen), this._setPortalFlag("headless", this.headless), this._setPortalFlag("disabled", this.isDisabled);
-    const i = this.getAttribute("variant"), n = _(this.getAttribute("size") || this.getAttribute("density")), o = this.getAttribute("density"), r = this.getAttribute("radius"), a = this.getAttribute("shape"), c = this.getAttribute("elevation"), l = this.getAttribute("tone"), h = this.getAttribute("placement");
-    i ? this._portalEl.setAttribute("data-variant", i) : this._portalEl.removeAttribute("data-variant"), n && n !== "md" ? this._portalEl.setAttribute("data-size", n) : this._portalEl.removeAttribute("data-size"), o ? this._portalEl.setAttribute("data-density", o) : this._portalEl.removeAttribute("data-density"), r ? this._portalEl.setAttribute("data-radius", r) : this._portalEl.removeAttribute("data-radius"), a ? this._portalEl.setAttribute("data-shape", a) : this._portalEl.removeAttribute("data-shape"), c ? this._portalEl.setAttribute("data-elevation", c) : this._portalEl.removeAttribute("data-elevation"), l ? this._portalEl.setAttribute("data-tone", l) : this._portalEl.removeAttribute("data-tone"), h ? this._portalEl.setAttribute("data-placement-request", h) : this._portalEl.removeAttribute("data-placement-request"), t === "sm" ? (this._portalEl.style.setProperty("--ui-context-menu-padding", "4px"), this._portalEl.style.setProperty("--ui-context-menu-item-gap", "8px"), this._portalEl.style.setProperty("--ui-context-menu-item-min-height", "32px"), this._portalEl.style.setProperty("--ui-context-menu-item-pad-y", "6px"), this._portalEl.style.setProperty("--ui-context-menu-item-pad-x", "8px"), this._portalEl.style.setProperty("--ui-context-menu-item-font-size", "13px"), this._portalEl.style.setProperty("--ui-context-menu-item-line-height", "18px"), this._portalEl.style.setProperty("--ui-context-menu-separator-margin", "4px 8px")) : t === "lg" ? (this._portalEl.style.setProperty("--ui-context-menu-padding", "8px"), this._portalEl.style.setProperty("--ui-context-menu-item-gap", "12px"), this._portalEl.style.setProperty("--ui-context-menu-item-min-height", "40px"), this._portalEl.style.setProperty("--ui-context-menu-item-pad-y", "9px"), this._portalEl.style.setProperty("--ui-context-menu-item-pad-x", "12px"), this._portalEl.style.setProperty("--ui-context-menu-item-font-size", "15px"), this._portalEl.style.setProperty("--ui-context-menu-item-line-height", "22px"), this._portalEl.style.setProperty("--ui-context-menu-separator-margin", "8px 12px")) : (this._portalEl.style.removeProperty("--ui-context-menu-padding"), this._portalEl.style.removeProperty("--ui-context-menu-item-gap"), this._portalEl.style.removeProperty("--ui-context-menu-item-min-height"), this._portalEl.style.removeProperty("--ui-context-menu-item-pad-y"), this._portalEl.style.removeProperty("--ui-context-menu-item-pad-x"), this._portalEl.style.removeProperty("--ui-context-menu-item-font-size"), this._portalEl.style.removeProperty("--ui-context-menu-item-line-height"), this._portalEl.style.removeProperty("--ui-context-menu-separator-margin")), e ? (this._portalEl.style.setProperty("--ui-context-menu-radius", e), this._portalEl.style.setProperty("--ui-context-menu-item-radius", e), this._portalEl.style.setProperty("--ui-context-menu-submenu-radius", e)) : (this._portalEl.style.removeProperty("--ui-context-menu-radius"), this._portalEl.style.removeProperty("--ui-context-menu-item-radius"), this._portalEl.style.removeProperty("--ui-context-menu-submenu-radius")), this.state !== "idle" ? this._portalEl.setAttribute("data-state", this.state) : this._portalEl.removeAttribute("data-state");
-    const m = this._portalEl.querySelector(".state-row");
-    m && (m.textContent = this._stateText());
+    const i = this.getAttribute("variant"), n = _(this.getAttribute("size") || this.getAttribute("density")), s = this.getAttribute("density"), r = this.getAttribute("radius"), u = this.getAttribute("shape"), a = this.getAttribute("elevation"), h = this.getAttribute("tone"), m = this.getAttribute("placement");
+    i ? this._portalEl.setAttribute("data-variant", i) : this._portalEl.removeAttribute("data-variant"), n && n !== "md" ? this._portalEl.setAttribute("data-size", n) : this._portalEl.removeAttribute("data-size"), s ? this._portalEl.setAttribute("data-density", s) : this._portalEl.removeAttribute("data-density"), r ? this._portalEl.setAttribute("data-radius", r) : this._portalEl.removeAttribute("data-radius"), u ? this._portalEl.setAttribute("data-shape", u) : this._portalEl.removeAttribute("data-shape"), a ? this._portalEl.setAttribute("data-elevation", a) : this._portalEl.removeAttribute("data-elevation"), h ? this._portalEl.setAttribute("data-tone", h) : this._portalEl.removeAttribute("data-tone"), m ? this._portalEl.setAttribute("data-placement-request", m) : this._portalEl.removeAttribute("data-placement-request"), t === "sm" ? (this._portalEl.style.setProperty("--ui-context-menu-padding", "4px"), this._portalEl.style.setProperty("--ui-context-menu-item-gap", "8px"), this._portalEl.style.setProperty("--ui-context-menu-item-min-height", "32px"), this._portalEl.style.setProperty("--ui-context-menu-item-pad-y", "6px"), this._portalEl.style.setProperty("--ui-context-menu-item-pad-x", "8px"), this._portalEl.style.setProperty("--ui-context-menu-item-font-size", "13px"), this._portalEl.style.setProperty("--ui-context-menu-item-line-height", "18px"), this._portalEl.style.setProperty("--ui-context-menu-separator-margin", "4px 8px")) : t === "lg" ? (this._portalEl.style.setProperty("--ui-context-menu-padding", "8px"), this._portalEl.style.setProperty("--ui-context-menu-item-gap", "12px"), this._portalEl.style.setProperty("--ui-context-menu-item-min-height", "40px"), this._portalEl.style.setProperty("--ui-context-menu-item-pad-y", "9px"), this._portalEl.style.setProperty("--ui-context-menu-item-pad-x", "12px"), this._portalEl.style.setProperty("--ui-context-menu-item-font-size", "15px"), this._portalEl.style.setProperty("--ui-context-menu-item-line-height", "22px"), this._portalEl.style.setProperty("--ui-context-menu-separator-margin", "8px 12px")) : (this._portalEl.style.removeProperty("--ui-context-menu-padding"), this._portalEl.style.removeProperty("--ui-context-menu-item-gap"), this._portalEl.style.removeProperty("--ui-context-menu-item-min-height"), this._portalEl.style.removeProperty("--ui-context-menu-item-pad-y"), this._portalEl.style.removeProperty("--ui-context-menu-item-pad-x"), this._portalEl.style.removeProperty("--ui-context-menu-item-font-size"), this._portalEl.style.removeProperty("--ui-context-menu-item-line-height"), this._portalEl.style.removeProperty("--ui-context-menu-separator-margin")), e ? (this._portalEl.style.setProperty("--ui-context-menu-radius", e), this._portalEl.style.setProperty("--ui-context-menu-item-radius", e), this._portalEl.style.setProperty("--ui-context-menu-submenu-radius", e)) : (this._portalEl.style.removeProperty("--ui-context-menu-radius"), this._portalEl.style.removeProperty("--ui-context-menu-item-radius"), this._portalEl.style.removeProperty("--ui-context-menu-submenu-radius")), this.state !== "idle" ? this._portalEl.setAttribute("data-state", this.state) : this._portalEl.removeAttribute("data-state");
+    const p = this._portalEl.querySelector(".state-row");
+    p && (p.textContent = this._stateText());
   }
   _moveContentIntoPortal() {
     if (this._contentSourceEl)
@@ -761,7 +741,7 @@ class Y extends A {
     var i, n;
     if ((i = this._portalEl) != null && i.isConnected)
       return;
-    const t = S();
+    const t = A();
     if (!t)
       return;
     const e = document.createElement("div");
@@ -769,13 +749,13 @@ class Y extends A {
       <style>${D}</style>
       <div class="surface" part="menu" role="menu" aria-hidden="true" aria-busy="false" tabindex="-1">
         <div class="state-row" part="state"></div>
-        <ui-listbox class="content-host" slot="menu" role="menu" item-selector="${p.replace(/"/g, "&quot;")}" direct-item-selector="${b.replace(/"/g, "&quot;")}" item-role="menuitem" active-attribute="data-active"></ui-listbox>
+        <ui-listbox class="content-host" slot="menu" role="menu" item-selector="${c.replace(/"/g, "&quot;")}" direct-item-selector="${b.replace(/"/g, "&quot;")}" item-role="menuitem" active-attribute="data-active"></ui-listbox>
       </div>
     `, t.appendChild(e), this._portalEl = e, this._portalSurfaceEl = e.querySelector(".surface"), this._portalContentHostEl = e.querySelector("ui-listbox.content-host"), this._moveContentIntoPortal(), (n = this._portalContentHostEl) == null || n.refresh(), this._syncPortalVisualState(), this._syncSurfaceState(), this._bindPortalInteractionListeners(), this._syncDismissableLayer();
   }
   _teardownPortal() {
-    var t, e;
-    if ((t = this._dismissableLayer) == null || t.destroy(), this._dismissableLayer = null, this._unbindPortalInteractionListeners(), this._restoreContentFromPortal(), this._portalContentHostEl = null, this._portalSurfaceEl = null, (e = this._portalEl) != null && e.parentElement)
+    var t, e, i;
+    if ((t = this._dismissableLayer) == null || t.destroy(), this._dismissableLayer = null, (e = this._positioner) == null || e.destroy(), this._positioner = null, this._positionerPlacement = null, this._positionerOffset = 0, this._positionerAnchorEl = null, this._unbindPortalInteractionListeners(), this._restoreContentFromPortal(), this._portalContentHostEl = null, this._portalSurfaceEl = null, (i = this._portalEl) != null && i.parentElement)
       try {
         this._portalEl.parentElement.removeChild(this._portalEl);
       } catch {
@@ -789,15 +769,15 @@ class Y extends A {
       (e = this._dismissableLayer) == null || e.destroy(), this._dismissableLayer = null;
       return;
     }
-    (i = this._dismissableLayer) == null || i.destroy(), this._dismissableLayer = w({
+    (i = this._dismissableLayer) == null || i.destroy(), this._dismissableLayer = S({
       node: t,
       trigger: this._anchorEl || this,
       closeOnEscape: this.closeOnEscape,
       closeOnPointerOutside: !0,
       closeOnFocusOutside: !0,
       onDismiss: (n) => {
-        const o = n === "escape-key" ? "escape" : "outside";
-        this._setOpen(!1, o);
+        const s = n === "escape-key" ? "escape" : "outside";
+        this._setOpen(!1, s);
       }
     });
   }
@@ -817,6 +797,48 @@ class Y extends A {
       height: t.height
     };
   }
+  _pointVirtualAnchor() {
+    return {
+      getBoundingClientRect: () => {
+        const { x: t, y: e } = this._point;
+        return {
+          x: t,
+          y: e,
+          top: e,
+          left: t,
+          right: t,
+          bottom: e,
+          width: 0,
+          height: 0,
+          toJSON: () => ({})
+        };
+      }
+    };
+  }
+  _rebuildPositioner(t, e, i) {
+    var n;
+    (n = this._positioner) == null || n.destroy(), this._positioner = P({
+      anchor: this._anchorEl || this._pointVirtualAnchor(),
+      floating: t,
+      placement: e,
+      strategy: "fixed",
+      offset: i,
+      flip: !0,
+      shift: !0,
+      boundaryPadding: l,
+      observeWindowResize: !1,
+      observeScroll: !1,
+      observeAncestorScroll: !1,
+      observeAncestorResize: !1,
+      observeLayoutShift: !1,
+      observeAnchorResize: !1,
+      observeFloatingResize: !1,
+      onUpdate: (s) => {
+        const r = window.innerWidth || document.documentElement.clientWidth || 0, u = window.innerHeight || document.documentElement.clientHeight || 0;
+        t.style.maxWidth = `${Math.max(160, r - l * 2)}px`, t.style.maxHeight = `${Math.max(120, u - l * 2)}px`, t.setAttribute("data-placement", s.placement.split("-")[0]);
+      }
+    }), this._positionerPlacement = e, this._positionerOffset = i, this._positionerAnchorEl = this._anchorEl;
+  }
   _startAnchorTracking() {
     !this._isOpen || !this._anchorEl || this._anchorTrackRaf != null || (this._lastAnchorRect = this._captureAnchorRect(), this._anchorTrackRaf = requestAnimationFrame(this._trackAnchorLayout));
   }
@@ -844,10 +866,10 @@ class Y extends A {
   _queryMenuItems(t) {
     var i;
     const e = t || this._menuHost();
-    return e ? (((i = this._listbox()) == null ? void 0 : i.queryItems({ container: e })) || []).filter((n) => V(n)) : [];
+    return e ? (((i = this._listbox()) == null ? void 0 : i.queryItems({ container: e })) || []).filter((n) => N(n)) : [];
   }
   _submenuFor(t) {
-    return t.querySelector(L);
+    return t.querySelector(O);
   }
   _clearHighlights() {
     this._hoveredItem = null;
@@ -904,38 +926,38 @@ class Y extends A {
     }
     const e = document.activeElement;
     if (e instanceof HTMLElement) {
-      const n = e.closest(p);
+      const n = e.closest(c);
       if (n instanceof HTMLElement)
         return n;
     }
     return (i = this._hoveredItem) != null && i.isConnected ? this._hoveredItem : null;
   }
   _moveFocus(t, e) {
-    var o, r, a;
+    var s, r, u;
     const i = t.closest(".submenu") || this._menuHost();
     if (!i)
       return;
     if (e === "first") {
-      const c = (o = this._listbox()) == null ? void 0 : o.focusBoundary("first", {
+      const a = (s = this._listbox()) == null ? void 0 : s.focusBoundary("first", {
         container: i,
         focus: !0,
         owner: this._surface(),
         scroll: !0
       });
-      c && this._setOpenBranch(c, !1);
+      a && this._setOpenBranch(a, !1);
       return;
     }
     if (e === "last") {
-      const c = (r = this._listbox()) == null ? void 0 : r.focusBoundary("last", {
+      const a = (r = this._listbox()) == null ? void 0 : r.focusBoundary("last", {
         container: i,
         focus: !0,
         owner: this._surface(),
         scroll: !0
       });
-      c && this._setOpenBranch(c, !1);
+      a && this._setOpenBranch(a, !1);
       return;
     }
-    const n = (a = this._listbox()) == null ? void 0 : a.move(e === "next" ? 1 : -1, {
+    const n = (u = this._listbox()) == null ? void 0 : u.move(e === "next" ? 1 : -1, {
       container: i,
       current: t,
       focus: !0,
@@ -949,27 +971,27 @@ class Y extends A {
     if (!i || (i.querySelectorAll('[data-submenu-open="true"]').forEach((r) => r.removeAttribute("data-submenu-open")), !t))
       return;
     const n = [];
-    let o = t;
-    for (; o; ) {
-      const r = o.closest(".submenu");
+    let s = t;
+    for (; s; ) {
+      const r = s.closest(".submenu");
       if (!r)
         break;
-      const a = r.parentElement;
-      if (!(a instanceof HTMLElement) || !a.matches(p))
+      const u = r.parentElement;
+      if (!(u instanceof HTMLElement) || !u.matches(c))
         break;
-      n.unshift(a), o = a;
+      n.unshift(u), s = u;
     }
     n.forEach((r) => r.setAttribute("data-submenu-open", "true")), e && this._submenuFor(t) && t.setAttribute("data-submenu-open", "true");
   }
   _openSubmenu(t, e) {
-    var o;
+    var s;
     this._cancelSubmenuIntent();
     const i = this._submenuFor(t);
     if (!i || x(t))
       return !1;
     if (this._setOpenBranch(t, !0), this._scheduleSubmenuLayout(), !e)
       return !0;
-    const n = (o = this._listbox()) == null ? void 0 : o.focusBoundary("first", {
+    const n = (s = this._listbox()) == null ? void 0 : s.focusBoundary("first", {
       container: i,
       focus: !0,
       owner: this._surface(),
@@ -982,7 +1004,7 @@ class Y extends A {
     if (!e)
       return !1;
     const i = e.parentElement;
-    return !(i instanceof HTMLElement) || !i.matches(p) ? !1 : (this._focusItem(i), this._setOpenBranch(i, !1), i.removeAttribute("data-submenu-open"), !0);
+    return !(i instanceof HTMLElement) || !i.matches(c) ? !1 : (this._focusItem(i), this._setOpenBranch(i, !1), i.removeAttribute("data-submenu-open"), !0);
   }
   _clearSubmenuState() {
     var e;
@@ -991,14 +1013,14 @@ class Y extends A {
     t && (t.querySelectorAll('[data-submenu-open="true"]').forEach((i) => i.removeAttribute("data-submenu-open")), (e = this._listbox()) == null || e.clearActive({ container: t }));
   }
   _handleTypeahead(t, e) {
-    var o;
+    var s;
     if (!this.typeahead || t.ctrlKey || t.altKey || t.metaKey || t.key.length !== 1 || !/\S/.test(t.key))
       return !1;
     const i = (e == null ? void 0 : e.closest(".submenu")) || this._menuHost();
     if (!i)
       return !1;
-    this._typeaheadBuffer = `${this._typeaheadBuffer}${t.key}`.slice(-24), this._typeaheadTimer != null && window.clearTimeout(this._typeaheadTimer), this._typeaheadTimer = window.setTimeout(() => this._resetTypeahead(), C);
-    const n = (o = this._listbox()) == null ? void 0 : o.typeahead(this._typeaheadBuffer, {
+    this._typeaheadBuffer = `${this._typeaheadBuffer}${t.key}`.slice(-24), this._typeaheadTimer != null && window.clearTimeout(this._typeaheadTimer), this._typeaheadTimer = window.setTimeout(() => this._resetTypeahead(), R);
+    const n = (s = this._listbox()) == null ? void 0 : s.typeahead(this._typeaheadBuffer, {
       container: i,
       current: e,
       focus: !0,
@@ -1010,8 +1032,8 @@ class Y extends A {
   _applySelectionBehavior(t) {
     const e = t.getAttribute("role");
     if (e === "menuitemcheckbox") {
-      const o = t.getAttribute("aria-checked") !== "true";
-      t.setAttribute("aria-checked", o ? "true" : "false"), t.setAttribute("data-state", o ? "checked" : "unchecked");
+      const s = t.getAttribute("aria-checked") !== "true";
+      t.setAttribute("aria-checked", s ? "true" : "false"), t.setAttribute("data-state", s ? "checked" : "unchecked");
       return;
     }
     if (e !== "menuitemradio")
@@ -1020,21 +1042,21 @@ class Y extends A {
     if (!i)
       return;
     const n = t.getAttribute("data-group") || t.getAttribute("name") || "";
-    i.querySelectorAll('[role="menuitemradio"]').forEach((o) => {
-      const r = o.getAttribute("data-group") || o.getAttribute("name") || "";
-      n && r !== n || (o.setAttribute("aria-checked", "false"), o.setAttribute("data-state", "unchecked"));
+    i.querySelectorAll('[role="menuitemradio"]').forEach((s) => {
+      const r = s.getAttribute("data-group") || s.getAttribute("name") || "";
+      n && r !== n || (s.setAttribute("aria-checked", "false"), s.setAttribute("data-state", "unchecked"));
     }), t.setAttribute("aria-checked", "true"), t.setAttribute("data-state", "checked");
   }
   _emitSelect(t) {
-    var o;
-    const e = this._menuHost(), n = (e ? Array.from(e.querySelectorAll(p)) : []).indexOf(t);
+    var s;
+    const e = this._menuHost(), n = (e ? Array.from(e.querySelectorAll(c)) : []).indexOf(t);
     this.dispatchEvent(new CustomEvent("select", {
       bubbles: !0,
       composed: !0,
       detail: {
         index: n,
         value: t.getAttribute("data-value") || t.getAttribute("value") || void 0,
-        label: t.getAttribute("aria-label") || ((o = t.textContent) == null ? void 0 : o.trim()) || void 0,
+        label: t.getAttribute("aria-label") || ((s = t.textContent) == null ? void 0 : s.trim()) || void 0,
         checked: t.getAttribute("aria-checked") === "true",
         item: t
       }
@@ -1046,15 +1068,20 @@ class Y extends A {
     }));
   }
   _positionMenu() {
+    var r;
     const t = this._surface();
     if (!t)
       return;
-    if (this._anchorEl && !N(this._anchorEl)) {
+    if (this._anchorEl && !W(this._anchorEl)) {
       this.close();
       return;
     }
-    const e = this._anchorEl ? this._anchorEl.getBoundingClientRect() : W(this._point), i = t.getBoundingClientRect(), n = i.width || t.offsetWidth || 240, o = i.height || t.offsetHeight || 0, r = $(this.getAttribute("placement")), a = U(e, n, o, r, this._anchorEl ? O : 0);
-    t.style.left = `${a.x}px`, t.style.top = `${a.y}px`, t.style.maxWidth = `${a.maxWidth}px`, t.style.maxHeight = `${a.maxHeight}px`, t.setAttribute("data-placement", a.placement);
+    const e = $(this.getAttribute("placement")), i = V(e), n = this._anchorEl ? L : 0;
+    if (!this._positioner || this._positionerPlacement !== i || this._positionerOffset !== n || this._positionerAnchorEl !== this._anchorEl) {
+      this._rebuildPositioner(t, i, n);
+      return;
+    }
+    (r = this._positioner) == null || r.update();
   }
   _scheduleSubmenuLayout() {
     this._isOpen && (this._submenuRaf != null && cancelAnimationFrame(this._submenuRaf), this._submenuRaf = requestAnimationFrame(() => {
@@ -1066,15 +1093,15 @@ class Y extends A {
     if (!t)
       return;
     const e = window.innerWidth || document.documentElement.clientWidth || 0, i = window.innerHeight || document.documentElement.clientHeight || 0;
-    Array.from(t.querySelectorAll('.menuitem > .submenu, [role="menuitem"] > .submenu')).forEach((o) => {
-      const r = o.parentElement;
+    Array.from(t.querySelectorAll('.menuitem > .submenu, [role="menuitem"] > .submenu')).forEach((s) => {
+      const r = s.parentElement;
       if (!(r instanceof HTMLElement))
         return;
       r.removeAttribute("data-submenu-side"), r.removeAttribute("data-submenu-align");
-      const a = o.style.display, c = o.style.visibility, l = o.style.pointerEvents, h = o.style.opacity, m = o.style.transform;
-      o.style.display = "grid", o.style.visibility = "hidden", o.style.pointerEvents = "none", o.style.opacity = "0", o.style.transform = "none";
-      const d = r.getBoundingClientRect(), f = o.getBoundingClientRect();
-      d.right + u + f.width > e && d.left - u - f.width >= u && r.setAttribute("data-submenu-side", "left"), d.top + f.height > i - u && d.bottom - f.height >= u && r.setAttribute("data-submenu-align", "up"), o.style.display = a, o.style.visibility = c, o.style.pointerEvents = l, o.style.opacity = h, o.style.transform = m;
+      const u = s.style.display, a = s.style.visibility, h = s.style.pointerEvents, m = s.style.opacity, p = s.style.transform;
+      s.style.display = "grid", s.style.visibility = "hidden", s.style.pointerEvents = "none", s.style.opacity = "0", s.style.transform = "none";
+      const d = r.getBoundingClientRect(), f = s.getBoundingClientRect();
+      d.right + l + f.width > e && d.left - l - f.width >= l && r.setAttribute("data-submenu-side", "left"), d.top + f.height > i - l && d.bottom - f.height >= l && r.setAttribute("data-submenu-align", "up"), s.style.display = u, s.style.visibility = a, s.style.pointerEvents = h, s.style.opacity = m, s.style.transform = p;
     });
   }
   _onRootClick(t) {
@@ -1128,7 +1155,7 @@ class Y extends A {
       this._submenuIntentTimer = null;
       const e = this._submenuIntentItem;
       this._submenuIntentItem = null, !(!e || !e.isConnected || !this._isOpen) && (this._setOpenBranch(e, !0), this._scheduleSubmenuLayout());
-    }, I));
+    }, C));
   }
   _onRootKeyDown(t) {
     if (!this._isOpen)
@@ -1183,10 +1210,10 @@ class Y extends A {
   render() {
     const t = M(this._stateText());
     this.setContent(`
-      <style>${v}</style>
+      <style>${g}</style>
       <div class="surface" part="menu" role="menu" aria-hidden="true" aria-busy="false" tabindex="-1">
         <div class="state-row" part="state" data-state="${this.state}">${t}</div>
-        <ui-listbox class="content-host" part="content" slot="menu" role="menu" item-selector="${p.replace(/"/g, "&quot;")}" direct-item-selector="${b.replace(/"/g, "&quot;")}" item-role="menuitem" active-attribute="data-active">
+        <ui-listbox class="content-host" part="content" slot="menu" role="menu" item-selector="${c.replace(/"/g, "&quot;")}" direct-item-selector="${b.replace(/"/g, "&quot;")}" item-role="menuitem" active-attribute="data-active">
           <slot name="menu"></slot>
           <slot name="content"></slot>
         </ui-listbox>
@@ -1198,7 +1225,7 @@ class Y extends A {
     return !1;
   }
 }
-typeof customElements < "u" && !customElements.get("ui-context-menu") && customElements.define("ui-context-menu", Y);
+typeof customElements < "u" && !customElements.get("ui-context-menu") && customElements.define("ui-context-menu", U);
 export {
-  Y as UIContextMenu
+  U as UIContextMenu
 };

package/dist/date-field.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("./ElementBase-1b301e7f.js"),U=require("./calendar-a8735e40.js"),d=require("./date-time-utils-5cf58cd0.js");require("./scroll-lock-48793569.js");let F=0;const I=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("./ElementBase-1b301e7f.js"),U=require("./calendar-a8735e40.js"),d=require("./date-time-utils-66480de4.js");require("./scroll-lock-d7b0df21.js");require("./positioner-33529bb8.js");let F=0;const I=`
   :host {
     --ui-date-field-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
     --ui-date-field-border: 1px solid var(--ui-date-field-border-color);

package/dist/date-field.esm.js

@@ -1,7 +1,8 @@
 import { E as F } from "./ElementBase-909688f3.mjs";
 import { p as U } from "./calendar-2c11b824.mjs";
-import { n as h, a as I, b as E } from "./date-time-utils-bdceb7af.mjs";
-import "./scroll-lock-9de6d328.mjs";
+import { n as h, a as I, b as E } from "./date-time-utils-a2c7af25.mjs";
+import "./scroll-lock-31da444f.mjs";
+import "./positioner-e9770c66.mjs";
 let T = 0;
 const w = `
   :host {