@editora/ui-core 0.1.12 → 0.1.13

package/dist/select.esm.js

@@ -1,8 +1,8 @@
-import { E as q } from "./ElementBase-909688f3.mjs";
-import { f as L, a as P, b as $ } from "./collection-a1aac0c6.mjs";
-import { r as D } from "./listbox-308789a0.mjs";
+import { E as R } from "./ElementBase-909688f3.mjs";
+import { f as M, a as q, b as $ } from "./collection-a1aac0c6.mjs";
+import { r as L } from "./listbox-308789a0.mjs";
 import "./collection.esm.js";
-const R = `
+const F = `
   :host {
     --ui-select-width: var(--ui-width, min(340px, 100%));
     --ui-select-min-height: var(--base-select-height-md, 42px);
@@ -283,7 +283,6 @@ const R = `
     scrollbar-width: thin;
     scrollbar-color: color-mix(in srgb, var(--ui-select-menu-border-color) 82%, transparent) transparent;
     scrollbar-gutter: auto;
-    backdrop-filter: saturate(1.04) blur(10px);
   }
 
   .menu::-webkit-scrollbar {
@@ -748,7 +747,7 @@ const R = `
     }
   }
 `;
-function d(p) {
+function h(p) {
   if (p == null)
     return !1;
   const e = String(p).toLowerCase();
@@ -757,7 +756,7 @@ function d(p) {
 function f(p) {
   return String(p).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function F(p) {
+function D(p) {
   if (!p)
     return null;
   const e = String(p).trim();
@@ -792,9 +791,9 @@ const S = /* @__PURE__ */ new Set([
   "data-valid",
   "close-on-scroll"
 ]);
-class T extends q {
+class O extends R {
   constructor() {
-    super(), this._controlEl = null, this._triggerEl = null, this._valueEl = null, this._panelEl = null, this._menuEl = null, this._observer = null, this._formUnregister = null, this._uid = Math.random().toString(36).slice(2, 8), this._options = [], this._menuItems = [], this._optionsFingerprint = "", this._open = !1, this._activeIndex = -1, this._placement = "bottom", this._onRootClick = this._onRootClick.bind(this), this._onRootKeyDown = this._onRootKeyDown.bind(this), this._onRootPointerDown = this._onRootPointerDown.bind(this), this._onRootPointerMove = this._onRootPointerMove.bind(this), this._onSlotChange = this._onSlotChange.bind(this), this._onDocumentPointerDown = this._onDocumentPointerDown.bind(this), this._onWindowResize = this._onWindowResize.bind(this), this._onWindowScroll = this._onWindowScroll.bind(this);
+    super(), this._controlEl = null, this._triggerEl = null, this._valueEl = null, this._panelEl = null, this._menuEl = null, this._observer = null, this._formUnregister = null, this._optionsSyncRaf = 0, this._panelPlacementRaf = 0, this._uid = Math.random().toString(36).slice(2, 8), this._options = [], this._menuItems = [], this._optionsFingerprint = "", this._menuRenderFingerprint = "", this._open = !1, this._activeIndex = -1, this._placement = "bottom", this._onRootClick = this._onRootClick.bind(this), this._onRootKeyDown = this._onRootKeyDown.bind(this), this._onRootPointerDown = this._onRootPointerDown.bind(this), this._onRootPointerMove = this._onRootPointerMove.bind(this), this._onSlotChange = this._onSlotChange.bind(this), this._onDocumentPointerDown = this._onDocumentPointerDown.bind(this), this._onWindowResize = this._onWindowResize.bind(this), this._onWindowScroll = this._onWindowScroll.bind(this);
   }
   static get observedAttributes() {
     return [
@@ -829,14 +828,12 @@ class T extends q {
   }
   connectedCallback() {
     super.connectedCallback(), this.root.addEventListener("click", this._onRootClick), this.root.addEventListener("keydown", this._onRootKeyDown), this.root.addEventListener("pointerdown", this._onRootPointerDown), this.root.addEventListener("pointermove", this._onRootPointerMove, { passive: !0 }), this.root.addEventListener("slotchange", this._onSlotChange), this._observer = new MutationObserver((e) => {
-      if (!e.some((s) => {
-        if (!(s.target instanceof HTMLElement) || s.target === this)
-          return s.type === "childList";
-        const n = s.target.tagName.toLowerCase();
-        return n === "option" || n === "optgroup";
-      }))
-        return;
-      this._syncOptionsData() && this._open && this._renderMenu();
+      e.some((i) => {
+        if (!(i.target instanceof HTMLElement) || i.target === this)
+          return i.type === "childList";
+        const s = i.target.tagName.toLowerCase();
+        return s === "option" || s === "optgroup";
+      }) && this._scheduleOptionsSync();
     }), this._observer.observe(this, {
       childList: !0,
       subtree: !0,
@@ -845,7 +842,7 @@ class T extends q {
     }), this._attachFormRegistration();
   }
   disconnectedCallback() {
-    this.root.removeEventListener("click", this._onRootClick), this.root.removeEventListener("keydown", this._onRootKeyDown), this.root.removeEventListener("pointerdown", this._onRootPointerDown), this.root.removeEventListener("pointermove", this._onRootPointerMove), this.root.removeEventListener("slotchange", this._onSlotChange), this._teardownOpenListeners(), this._observer && (this._observer.disconnect(), this._observer = null), this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
+    this.root.removeEventListener("click", this._onRootClick), this.root.removeEventListener("keydown", this._onRootKeyDown), this.root.removeEventListener("pointerdown", this._onRootPointerDown), this.root.removeEventListener("pointermove", this._onRootPointerMove), this.root.removeEventListener("slotchange", this._onSlotChange), this._teardownOpenListeners(), this._observer && (this._observer.disconnect(), this._observer = null), this._cancelOptionsSync(), this._cancelPanelPlacement(), this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
   }
   shouldRenderOnAttributeChange(e) {
     return !S.has(e);
@@ -867,19 +864,19 @@ class T extends q {
     t !== this.value && this.setAttribute("value", t);
   }
   get disabled() {
-    return d(this.getAttribute("disabled")) || d(this.getAttribute("loading"));
+    return h(this.getAttribute("disabled")) || h(this.getAttribute("loading"));
   }
   set disabled(e) {
     e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
   get closeOnScroll() {
-    return d(this.getAttribute("close-on-scroll")) || !this.hasAttribute("close-on-scroll");
+    return h(this.getAttribute("close-on-scroll")) || !this.hasAttribute("close-on-scroll");
   }
   set closeOnScroll(e) {
     this.setAttribute("close-on-scroll", e ? "true" : "false");
   }
   get showCheck() {
-    return d(this.getAttribute("show-check"));
+    return h(this.getAttribute("show-check"));
   }
   set showCheck(e) {
     e ? this.setAttribute("show-check", "true") : this.removeAttribute("show-check");
@@ -911,8 +908,8 @@ class T extends q {
     const t = e.target, i = t == null ? void 0 : t.closest(".menu-item[data-index]");
     if (!i)
       return;
-    const s = Number(i.dataset.index || "-1"), n = this._options[s];
-    !n || n.disabled || s === this._activeIndex || this._setActiveIndex(s);
+    const s = Number(i.dataset.index || "-1"), o = this._options[s];
+    !o || o.disabled || s === this._activeIndex || this._setActiveIndex(s);
   }
   _onRootClick(e) {
     const t = e.target;
@@ -927,8 +924,8 @@ class T extends q {
     const i = t.closest(".menu-item[data-index]");
     if (!i)
       return;
-    const s = Number(i.dataset.index || "-1"), n = this._options[s];
-    !n || n.disabled || (this._applyValueFromUser(n.value), this._closeMenu());
+    const s = Number(i.dataset.index || "-1"), o = this._options[s];
+    !o || o.disabled || (this._applyValueFromUser(o.value), this._closeMenu());
   }
   _onRootKeyDown(e) {
     const t = e.target;
@@ -975,27 +972,45 @@ class T extends q {
     const t = typeof e.composedPath == "function" ? e.composedPath() : [];
     t.includes(this) || t.includes(this.root) || this._closeMenu({ restoreFocus: !1 });
   }
+  _isInternalEvent(e) {
+    var s, o, a;
+    const t = e.target, i = typeof e.composedPath == "function" ? e.composedPath() : [];
+    return i.includes(this) || i.includes(this.root) || t instanceof Node && (t === this || this.root.contains(t) || (s = this._controlEl) != null && s.contains(t) || (o = this._panelEl) != null && o.contains(t) || (a = this._menuEl) != null && a.contains(t)) ? !0 : !!(this._controlEl && i.includes(this._controlEl) || this._triggerEl && i.includes(this._triggerEl) || this._panelEl && i.includes(this._panelEl) || this._menuEl && i.includes(this._menuEl));
+  }
   _onWindowResize() {
-    this._open && this._syncPanelPlacement();
+    this._open && this._schedulePanelPlacement();
   }
   _onWindowScroll(e) {
-    if (!this._open)
-      return;
-    const t = typeof e.composedPath == "function" ? e.composedPath() : [];
-    if (!(t.includes(this) || t.includes(this.root))) {
+    if (this._open && !this._isInternalEvent(e)) {
       if (this.closeOnScroll) {
         this._closeMenu({ restoreFocus: !1 });
         return;
       }
-      this._syncPanelPlacement();
+      this._schedulePanelPlacement();
     }
   }
   _attachOpenListeners() {
-    document.addEventListener("pointerdown", this._onDocumentPointerDown, !0), window.addEventListener("resize", this._onWindowResize, { passive: !0 }), window.addEventListener("scroll", this._onWindowScroll, !0);
+    document.addEventListener("pointerdown", this._onDocumentPointerDown, !0), window.addEventListener("resize", this._onWindowResize, { passive: !0 }), window.addEventListener("scroll", this._onWindowScroll, { passive: !0, capture: !0 });
   }
   _teardownOpenListeners() {
     document.removeEventListener("pointerdown", this._onDocumentPointerDown, !0), window.removeEventListener("resize", this._onWindowResize), window.removeEventListener("scroll", this._onWindowScroll, !0);
   }
+  _scheduleOptionsSync() {
+    this._optionsSyncRaf || (this._optionsSyncRaf = requestAnimationFrame(() => {
+      this._optionsSyncRaf = 0, this._syncOptionsData() && this._open ? this._renderMenu() : this._syncControlState();
+    }));
+  }
+  _cancelOptionsSync() {
+    this._optionsSyncRaf && (cancelAnimationFrame(this._optionsSyncRaf), this._optionsSyncRaf = 0);
+  }
+  _schedulePanelPlacement() {
+    this._panelPlacementRaf || (this._panelPlacementRaf = requestAnimationFrame(() => {
+      this._panelPlacementRaf = 0, this._syncPanelPlacement();
+    }));
+  }
+  _cancelPanelPlacement() {
+    this._panelPlacementRaf && (cancelAnimationFrame(this._panelPlacementRaf), this._panelPlacementRaf = 0);
+  }
   _emitValue(e, t) {
     this.dispatchEvent(
       new CustomEvent(e, {
@@ -1009,26 +1024,26 @@ class T extends q {
     (this.getAttribute("value") || "") !== e && (this.setAttribute("value", e), this._emitValue("input", e), this._emitValue("change", e));
   }
   _attachFormRegistration() {
-    var n;
+    var o;
     this._formUnregister && (this._formUnregister(), this._formUnregister = null);
     const e = this.getAttribute("name");
     if (!e)
       return;
-    const t = this.getRootNode(), i = t instanceof ShadowRoot ? t.host : null, s = ((n = i == null ? void 0 : i.closest) == null ? void 0 : n.call(i, "ui-form")) || this.closest("ui-form");
+    const t = this.getRootNode(), i = t instanceof ShadowRoot ? t.host : null, s = ((o = i == null ? void 0 : i.closest) == null ? void 0 : o.call(i, "ui-form")) || this.closest("ui-form");
     !s || typeof s.registerField != "function" || (this._formUnregister = s.registerField(e, {
       name: e,
       getValue: () => this.value,
-      setValue: (o) => {
-        this.value = o;
+      setValue: (a) => {
+        this.value = a;
       },
       validate: async () => {
-        if (!(d(this.getAttribute("required")) || this.hasAttribute("required")))
+        if (!(h(this.getAttribute("required")) || this.hasAttribute("required")))
           return { valid: !0 };
         const r = this.value.trim().length > 0;
         return { valid: r, message: r ? void 0 : "This field is required." };
       },
-      setError: (o) => {
-        o ? (this.setAttribute("validation", "error"), this.setAttribute("error", o)) : (this.getAttribute("validation") === "error" && this.removeAttribute("validation"), this.removeAttribute("error"));
+      setError: (a) => {
+        a ? (this.setAttribute("validation", "error"), this.setAttribute("error", a)) : (this.getAttribute("validation") === "error" && this.removeAttribute("validation"), this.removeAttribute("error"));
       }
     }));
   }
@@ -1040,44 +1055,44 @@ class T extends q {
     this.getAttribute("value") !== t && this.setAttribute("value", t);
   }
   _buildOptionsFromChildren() {
-    const e = [], t = (r, c) => {
-      const a = (r.label || r.textContent || r.value || "").trim(), u = String(r.value ?? "");
+    const e = [], t = (r, u) => {
+      const n = (r.label || r.textContent || r.value || "").trim(), c = String(r.value ?? "");
       e.push({
-        value: u,
-        label: a || u,
+        value: c,
+        label: n || c,
         disabled: !!r.disabled,
-        group: c
+        group: u
       });
     };
     Array.from(this.children).filter((r) => r instanceof HTMLElement ? !r.hasAttribute("slot") : !1).forEach((r) => {
-      const c = r.tagName.toLowerCase();
-      if (c === "option") {
+      const u = r.tagName.toLowerCase();
+      if (u === "option") {
         t(r, "");
         return;
       }
-      if (c === "optgroup") {
-        const a = r, u = (a.label || "").trim();
-        Array.from(a.children).forEach((l) => {
+      if (u === "optgroup") {
+        const n = r, c = (n.label || "").trim();
+        Array.from(n.children).forEach((l) => {
           l instanceof HTMLOptionElement && e.push({
             value: String(l.value ?? ""),
             label: (l.label || l.textContent || l.value || "").trim() || String(l.value ?? ""),
-            disabled: !!l.disabled || !!a.disabled,
-            group: u
+            disabled: !!l.disabled || !!n.disabled,
+            group: c
           });
         });
       }
     });
-    const s = (this.getAttribute("placeholder") || "").trim(), n = d(this.getAttribute("required")) || this.hasAttribute("required"), o = e.some((r) => r.value === "");
-    return s && !n && !o && e.unshift({ value: "", label: s, disabled: !1, group: "" }), e;
+    const s = (this.getAttribute("placeholder") || "").trim(), o = h(this.getAttribute("required")) || this.hasAttribute("required"), a = e.some((r) => r.value === "");
+    return s && !o && !a && e.unshift({ value: "", label: s, disabled: !1, group: "" }), e;
   }
   _computeOptionsFingerprint(e) {
     return e.map((t) => `${t.value}
${t.label}
${t.disabled ? "1" : "0"}
${t.group}`).join("");
   }
   _firstEnabledIndex() {
-    return L(this._options, (e) => e.disabled);
+    return M(this._options, (e) => e.disabled);
   }
   _lastEnabledIndex() {
-    return P(this._options, (e) => e.disabled);
+    return q(this._options, (e) => e.disabled);
   }
   _selectedIndex() {
     return $(this._options, this.value, (e) => e.value);
@@ -1086,11 +1101,11 @@ class T extends q {
     return this.getAttribute("check-placement") === "start" ? "start" : "end";
   }
   _syncOptionsData() {
-    var u;
+    var c;
     const e = this._buildOptionsFromChildren(), t = this._computeOptionsFingerprint(e), i = t !== this._optionsFingerprint;
     this._options = e, this._optionsFingerprint = t;
-    const s = this.getAttribute("value") || "", n = this.hasAttribute("value"), o = this._options.some((l) => l.value === s), r = d(this.getAttribute("required")) || this.hasAttribute("required"), c = ((u = this._options.find((l) => !l.disabled)) == null ? void 0 : u.value) || "", a = !r && this._options.some((l) => l.value === "") ? "" : c;
-    return n ? o || this._setValueAttr(a) : this._setValueAttr(a), i;
+    const s = this.getAttribute("value") || "", o = this.hasAttribute("value"), a = this._options.some((l) => l.value === s), r = h(this.getAttribute("required")) || this.hasAttribute("required"), u = ((c = this._options.find((l) => !l.disabled)) == null ? void 0 : c.value) || "", n = !r && this._options.some((l) => l.value === "") ? "" : u;
+    return o ? a || this._setValueAttr(n) : this._setValueAttr(n), i;
   }
   _currentDisplayText() {
     const e = this.value, t = (this.getAttribute("placeholder") || "").trim();
@@ -1134,29 +1149,34 @@ class T extends q {
     const e = this._menuEl;
     if (!e)
       return;
+    const t = `${this._optionsFingerprint}
${this.showCheck ? "1" : "0"}
${this._checkPlacement()}`;
+    if (this._menuItems.length > 0 && t === this._menuRenderFingerprint && this._menuItems.length === this._options.length) {
+      this._syncMenuSelectionState(), this._schedulePanelPlacement();
+      return;
+    }
     if (e.replaceChildren(), this._menuItems = [], !this._options.length) {
-      const n = document.createElement("p");
-      n.className = "menu-empty", n.textContent = "No options available", e.appendChild(n), e.refresh();
+      const r = document.createElement("p");
+      r.className = "menu-empty", r.textContent = "No options available", e.appendChild(r), this._menuRenderFingerprint = t, e.refresh();
       return;
     }
-    let t = "__none__";
-    this._options.forEach((n, o) => {
-      if (n.group && n.group !== t) {
-        const h = document.createElement("div");
-        h.className = "menu-group", h.setAttribute("role", "presentation"), h.textContent = n.group, e.appendChild(h), t = n.group;
+    let s = "__none__";
+    this._options.forEach((r, u) => {
+      if (r.group && r.group !== s) {
+        const d = document.createElement("div");
+        d.className = "menu-group", d.setAttribute("role", "presentation"), d.textContent = r.group, e.appendChild(d), s = r.group;
       }
-      n.group || (t = "__none__");
-      const r = document.createElement("button");
-      r.type = "button", r.className = "menu-item", r.id = `${this._uid}-opt-${o}`, r.setAttribute("role", "option"), r.setAttribute("data-index", String(o)), r.setAttribute("data-value", n.value), r.setAttribute("aria-selected", n.value === this.value ? "true" : "false"), r.setAttribute("aria-disabled", n.disabled ? "true" : "false"), r.tabIndex = -1, n.disabled && (r.disabled = !0);
+      r.group || (s = "__none__");
+      const n = document.createElement("button");
+      n.type = "button", n.className = "menu-item", n.id = `${this._uid}-opt-${u}`, n.setAttribute("role", "option"), n.setAttribute("data-index", String(u)), n.setAttribute("data-value", r.value), n.setAttribute("aria-selected", r.value === this.value ? "true" : "false"), n.setAttribute("aria-disabled", r.disabled ? "true" : "false"), n.tabIndex = -1, r.disabled && (n.disabled = !0);
       const c = document.createElement("span");
-      c.className = "menu-item-label", c.textContent = n.label;
-      const a = document.createElement("span");
-      a.className = "menu-item-check", a.setAttribute("aria-hidden", "true");
-      const u = this.showCheck, l = this._checkPlacement();
-      a.hidden = !u, r.setAttribute("data-check-placement", l), u && l === "start" ? r.append(a, c) : r.append(c, a), e.appendChild(r), this._menuItems.push(r);
+      c.className = "menu-item-label", c.textContent = r.label;
+      const l = document.createElement("span");
+      l.className = "menu-item-check", l.setAttribute("aria-hidden", "true");
+      const b = this.showCheck, m = this._checkPlacement();
+      l.hidden = !b, n.setAttribute("data-check-placement", m), b && m === "start" ? n.append(l, c) : n.append(c, l), e.appendChild(n), this._menuItems.push(n);
     });
-    const i = this._menuItems[0] || null, s = this._menuItems[this._menuItems.length - 1] || null;
-    i && i.setAttribute("data-edge-start", "true"), s && s.setAttribute("data-edge-end", "true"), e.refresh(), this._syncMenuSelectionState(), this._syncPanelPlacement();
+    const o = this._menuItems[0] || null, a = this._menuItems[this._menuItems.length - 1] || null;
+    o && o.setAttribute("data-edge-start", "true"), a && a.setAttribute("data-edge-end", "true"), e.refresh(), this._menuRenderFingerprint = t, this._syncMenuSelectionState(), this._schedulePanelPlacement();
   }
   _syncMenuSelectionState() {
     if (!this._menuEl)
@@ -1165,7 +1185,7 @@ class T extends q {
     this._menuItems.forEach((i) => {
       const s = Number(i.dataset.index || "-1");
       i.setAttribute("aria-selected", s === e ? "true" : "false");
-    }), this._activeIndex = D(this._options, {
+    }), this._activeIndex = L(this._options, {
       selectedIndex: e,
       getDisabled: (i) => i.disabled
     });
@@ -1180,15 +1200,15 @@ class T extends q {
     const e = this._panelEl, t = this._controlEl, i = this._menuEl;
     if (!e || !t || !i || !this._open)
       return;
-    const s = t.getBoundingClientRect(), n = window.innerHeight || document.documentElement.clientHeight || 0, o = Math.max(0, n - s.bottom - 12), r = Math.max(0, s.top - 12), c = Math.min(Math.max(i.scrollHeight, i.offsetHeight) + 4, 320), a = o < c && r > o;
-    this._placement = a ? "top" : "bottom", e.setAttribute("data-placement", this._placement), e.style.setProperty("--ui-select-available-height", `${Math.floor(a ? r : o)}px`);
+    const s = t.getBoundingClientRect(), o = window.innerHeight || document.documentElement.clientHeight || 0, a = Math.max(0, o - s.bottom - 12), r = Math.max(0, s.top - 12), u = Math.min(Math.max(i.scrollHeight, i.offsetHeight) + 4, 320), n = a < u && r > a;
+    this._placement = n ? "top" : "bottom", e.setAttribute("data-placement", this._placement), e.style.setProperty("--ui-select-available-height", `${Math.floor(n ? r : a)}px`);
   }
   _openMenu() {
-    this._open || this.disabled || (this._syncOptionsData(), this._open = !0, this._syncControlState(), this._renderMenu(), this._attachOpenListeners());
+    this._open || this.disabled || (this._cancelPanelPlacement(), this._syncOptionsData(), this._open = !0, this._syncControlState(), this._renderMenu(), this._attachOpenListeners());
   }
   _closeMenu(e = {}) {
     var t, i;
-    if (this._open && (this._open = !1, this._activeIndex = -1, this._teardownOpenListeners(), this._syncControlState(), e.restoreFocus !== !1))
+    if (this._open && (this._open = !1, this._activeIndex = -1, this._cancelPanelPlacement(), this._teardownOpenListeners(), this._syncControlState(), e.restoreFocus !== !1))
       try {
         (t = this._triggerEl) == null || t.focus({ preventScroll: !0 });
       } catch {
@@ -1199,44 +1219,44 @@ class T extends q {
     const e = this._triggerEl, t = this._controlEl, i = this._valueEl, s = this._panelEl;
     if (!e || !t || !i || !s)
       return;
-    const n = this.getAttribute("label") || "", o = this.getAttribute("description") || "", r = this.getAttribute("error") || "", c = this.getAttribute("aria-label") || n || "Select", a = d(this.getAttribute("loading")), u = d(this.getAttribute("required")) || this.hasAttribute("required"), l = this.getAttribute("tabindex"), h = this.hasAttribute("validation") && this.getAttribute("validation") === "error" || this.hasAttribute("invalid") || this.getAttribute("data-invalid") === "true", b = F(this.getAttribute("radius")), m = this.root.querySelector(".label"), v = this.root.querySelector(".label-text"), g = this.root.querySelector(".description"), x = this.root.querySelector(".description-text"), _ = this.root.querySelector(".error"), y = this.root.querySelector(".error-text"), w = this.root.querySelector(".meta"), A = this.root.querySelector(".required"), k = !!n || this._hasSlotContent("label"), E = !!o || this._hasSlotContent("description"), C = !!r || this._hasSlotContent("error"), z = this._hasSlotContent("leading"), I = this._hasSlotContent("trailing"), M = !!(this.getAttribute("placeholder") || "").trim() && this.value === "";
-    v && (v.textContent = n), x && (x.textContent = o), y && (y.textContent = r), m && (m.hidden = !k), g && (g.hidden = !E), _ && (_.hidden = !C), w && (w.hidden = !k && !E), A && (A.hidden = !u), i.textContent = this._currentDisplayText(), t.setAttribute("data-open", this._open ? "true" : "false"), t.setAttribute("data-placeholder-shown", M ? "true" : "false"), t.setAttribute("data-has-leading", String(z)), t.setAttribute("data-has-trailing", String(I)), e.disabled = this.disabled, e.setAttribute("aria-label", c), e.setAttribute("aria-expanded", this._open ? "true" : "false"), e.setAttribute("aria-busy", a ? "true" : "false"), e.setAttribute("aria-required", u ? "true" : "false"), h ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"), l != null && !this.disabled ? e.setAttribute("tabindex", l) : this.disabled ? e.setAttribute("tabindex", "-1") : e.setAttribute("tabindex", "0"), s.hidden = !this._open, s.setAttribute("data-placement", this._placement), this._open ? e.setAttribute("aria-controls", `${this._uid}-listbox`) : e.removeAttribute("aria-controls"), b && !["none", "full", "large"].includes(this.getAttribute("radius") || "") ? this.style.setProperty("--ui-select-radius", b) : this.style.removeProperty("--ui-select-radius"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false"), this.setAttribute("aria-busy", a ? "true" : "false"), this.toggleAttribute("open", this._open), this._open && this._syncPanelPlacement();
+    const o = this.getAttribute("label") || "", a = this.getAttribute("description") || "", r = this.getAttribute("error") || "", u = this.getAttribute("aria-label") || o || "Select", n = h(this.getAttribute("loading")), c = h(this.getAttribute("required")) || this.hasAttribute("required"), l = this.getAttribute("tabindex"), b = this.hasAttribute("validation") && this.getAttribute("validation") === "error" || this.hasAttribute("invalid") || this.getAttribute("data-invalid") === "true", m = D(this.getAttribute("radius")), d = this.root.querySelector(".label"), v = this.root.querySelector(".label-text"), g = this.root.querySelector(".description"), x = this.root.querySelector(".description-text"), _ = this.root.querySelector(".error"), y = this.root.querySelector(".error-text"), w = this.root.querySelector(".meta"), A = this.root.querySelector(".required"), E = !!o || this._hasSlotContent("label"), k = !!a || this._hasSlotContent("description"), C = !!r || this._hasSlotContent("error"), I = this._hasSlotContent("leading"), z = this._hasSlotContent("trailing"), P = !!(this.getAttribute("placeholder") || "").trim() && this.value === "";
+    v && (v.textContent = o), x && (x.textContent = a), y && (y.textContent = r), d && (d.hidden = !E), g && (g.hidden = !k), _ && (_.hidden = !C), w && (w.hidden = !E && !k), A && (A.hidden = !c), i.textContent = this._currentDisplayText(), t.setAttribute("data-open", this._open ? "true" : "false"), t.setAttribute("data-placeholder-shown", P ? "true" : "false"), t.setAttribute("data-has-leading", String(I)), t.setAttribute("data-has-trailing", String(z)), e.disabled = this.disabled, e.setAttribute("aria-label", u), e.setAttribute("aria-expanded", this._open ? "true" : "false"), e.setAttribute("aria-busy", n ? "true" : "false"), e.setAttribute("aria-required", c ? "true" : "false"), b ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"), l != null && !this.disabled ? e.setAttribute("tabindex", l) : this.disabled ? e.setAttribute("tabindex", "-1") : e.setAttribute("tabindex", "0"), s.hidden = !this._open, s.setAttribute("data-placement", this._placement), this._open ? e.setAttribute("aria-controls", `${this._uid}-listbox`) : e.removeAttribute("aria-controls"), m && !["none", "full", "large"].includes(this.getAttribute("radius") || "") ? this.style.setProperty("--ui-select-radius", m) : this.style.removeProperty("--ui-select-radius"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false"), this.setAttribute("aria-busy", n ? "true" : "false"), this.toggleAttribute("open", this._open), this._open && this._schedulePanelPlacement();
   }
   render() {
-    const e = this.getAttribute("label") || "", t = this.getAttribute("description") || "", i = this.getAttribute("error") || "", s = d(this.getAttribute("required")) || this.hasAttribute("required"), n = this.getAttribute("aria-label") || e || "Select", o = !!e || this._hasSlotContent("label"), r = !!t || this._hasSlotContent("description"), c = !!i || this._hasSlotContent("error"), a = this._hasSlotContent("leading"), u = this._hasSlotContent("trailing"), l = `${this._uid}-label`, h = `${this._uid}-description`, b = `${this._uid}-error`, m = `${this._uid}-trigger`, v = `${this._uid}-listbox`, g = [r ? h : "", c ? b : ""].filter(Boolean).join(" ");
+    const e = this.getAttribute("label") || "", t = this.getAttribute("description") || "", i = this.getAttribute("error") || "", s = h(this.getAttribute("required")) || this.hasAttribute("required"), o = this.getAttribute("aria-label") || e || "Select", a = !!e || this._hasSlotContent("label"), r = !!t || this._hasSlotContent("description"), u = !!i || this._hasSlotContent("error"), n = this._hasSlotContent("leading"), c = this._hasSlotContent("trailing"), l = `${this._uid}-label`, b = `${this._uid}-description`, m = `${this._uid}-error`, d = `${this._uid}-trigger`, v = `${this._uid}-listbox`, g = [r ? b : "", u ? m : ""].filter(Boolean).join(" ");
     this.setContent(`
-      <style>${R}</style>
+      <style>${F}</style>
       <slot class="content-slot"></slot>
       <div class="root" part="root">
-        <div class="meta" part="meta" ${o || r ? "" : "hidden"}>
-          <label class="label" part="label" id="${l}" for="${m}" ${o ? "" : "hidden"}>
+        <div class="meta" part="meta" ${a || r ? "" : "hidden"}>
+          <label class="label" part="label" id="${l}" for="${d}" ${a ? "" : "hidden"}>
             <slot name="label"><span class="label-text">${f(e)}</span></slot>
             <span class="required" aria-hidden="true" ${s ? "" : "hidden"}>*</span>
           </label>
-          <p class="description" part="description" id="${h}" ${r ? "" : "hidden"}>
+          <p class="description" part="description" id="${b}" ${r ? "" : "hidden"}>
             <slot name="description"><span class="description-text">${f(t)}</span></slot>
           </p>
         </div>
         <div class="field-shell" part="field-shell">
-          <div class="control" part="control" data-has-leading="${a}" data-has-trailing="${u}" data-open="false">
-            <span class="leading" part="leading" ${a ? "" : "hidden"}>
+          <div class="control" part="control" data-has-leading="${n}" data-has-trailing="${c}" data-open="false">
+            <span class="leading" part="leading" ${n ? "" : "hidden"}>
               <slot name="leading"></slot>
             </span>
             <button
-              id="${m}"
+              id="${d}"
               type="button"
               class="trigger native"
               part="trigger"
               role="combobox"
               aria-haspopup="listbox"
               aria-expanded="false"
-              aria-label="${f(n)}"
-              ${o ? `aria-labelledby="${l}"` : ""}
+              aria-label="${f(o)}"
+              ${a ? `aria-labelledby="${l}"` : ""}
               ${g ? `aria-describedby="${f(g)}"` : ""}
             >
               <span class="value" part="value"></span>
             </button>
-            <span class="trailing" part="trailing" ${u ? "" : "hidden"}>
+            <span class="trailing" part="trailing" ${c ? "" : "hidden"}>
               <slot name="trailing"></slot>
             </span>
             <span class="indicator" part="indicator" aria-hidden="true"></span>
@@ -1253,14 +1273,14 @@ class T extends q {
             ></ui-listbox>
           </div>
         </div>
-        <p class="error" part="error" id="${b}" ${c ? "" : "hidden"}>
+        <p class="error" part="error" id="${m}" ${u ? "" : "hidden"}>
           <slot name="error"><span class="error-text">${f(i)}</span></slot>
         </p>
       </div>
-    `), this._controlEl = this.root.querySelector(".control"), this._triggerEl = this.root.querySelector(".trigger"), this._valueEl = this.root.querySelector(".value"), this._panelEl = this.root.querySelector(".panel"), this._menuEl = this.root.querySelector(".menu"), this._syncOptionsData(), this._renderMenu(), !this._open && this._panelEl && (this._panelEl.hidden = !0), this._syncControlState();
+    `), this._controlEl = this.root.querySelector(".control"), this._triggerEl = this.root.querySelector(".trigger"), this._valueEl = this.root.querySelector(".value"), this._panelEl = this.root.querySelector(".panel"), this._menuEl = this.root.querySelector(".menu"), this._menuItems = [], this._menuRenderFingerprint = "", this._syncOptionsData(), this._renderMenu(), !this._open && this._panelEl && (this._panelEl.hidden = !0), this._syncControlState();
   }
 }
-typeof customElements < "u" && !customElements.get("ui-select") && customElements.define("ui-select", T);
+typeof customElements < "u" && !customElements.get("ui-select") && customElements.define("ui-select", O);
 export {
-  T as UISelect
+  O as UISelect
 };

package/dist/selection-popup.cjs.js

@@ -10,6 +10,7 @@
     --ui-selection-popup-border: 1px solid var(--ui-selection-popup-border-color);
     --ui-selection-popup-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-selection-popup-accent: var(--ui-color-primary, #2563eb);
+    --ui-selection-popup-enter-y: 6px;
     --ui-selection-popup-shadow:
       none;
     color-scheme: light dark;
@@ -38,9 +39,7 @@
     color: var(--ui-selection-popup-color);
     box-shadow: var(--ui-selection-popup-shadow);
     padding: var(--ui-selection-popup-padding);
-    transform:
-      translate3d(var(--ui-selection-popup-x, 0px), var(--ui-selection-popup-y, 0px), 0)
-      scale(0.96);
+    transform: translate3d(0, var(--ui-selection-popup-enter-y, 6px), 0) scale(0.96);
     transform-origin: var(--ui-selection-popup-origin-x, 50%) var(--ui-selection-popup-origin-y, 50%);
     opacity: 0;
     transition: transform 150ms cubic-bezier(0.2, 0.72, 0.2, 1), opacity 140ms ease;
@@ -49,9 +48,7 @@
 
   :host([open]) .popup {
     opacity: 1;
-    transform:
-      translate3d(var(--ui-selection-popup-x, 0px), var(--ui-selection-popup-y, 0px), 0)
-      scale(1);
+    transform: translate3d(0, 0, 0) scale(1);
   }
 
   .content {
@@ -191,7 +188,7 @@
       --ui-selection-popup-shadow: none;
     }
   }
-`;function M(p,e){if(p==null||p==="")return e;const t=Number(p);return Number.isFinite(t)?t:e}function y(p,e=!1){if(p==null)return e;const t=String(p).toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}function f(p,e,t){return Math.min(t,Math.max(e,p))}class C extends E.ElementBase{constructor(){super(),this._anchor=null,this._popup=null,this._raf=null,this._previousFocused=null,this._resizeObserver=null,this._mutationObserver=null,this._globalListenersBound=!1,this._onDocumentPointerDown=this._onDocumentPointerDown.bind(this),this._onDocumentKeyDown=this._onDocumentKeyDown.bind(this),this._onWindowChange=this._onWindowChange.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["open","anchor-id","headless","placement","offset","strategy","arrow","variant","tone","radius","size","close-on-outside","close-on-escape"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("slotchange",this._onSlotChange),this._syncAnchorFromAttribute(),this._syncOpenLifecycle(!1),this._schedulePosition()}disconnectedCallback(){this._unbindGlobalListeners(),this._teardownObservers(),this.root.removeEventListener("slotchange",this._onSlotChange),this._raf!=null&&(cancelAnimationFrame(this._raf),this._raf=null),super.disconnectedCallback()}attributeChangedCallback(e,t,o){t!==o&&(e==="anchor-id"&&this._syncAnchorFromAttribute(),e==="open"&&(this._syncOpenLifecycle(t!=null),this.dispatchEvent(new CustomEvent(o!=null?"open":"close",{bubbles:!0,composed:!0}))),this.isConnected&&this.requestRender(),this._schedulePosition())}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}openFor(e){if(!e)return;const t=document.getElementById(e);t&&(this._anchor=t,this.setAttribute("anchor-id",e),this.setAttribute("open",""),this._schedulePosition())}close(){this.removeAttribute("open")}_syncAnchorFromAttribute(){const e=this.getAttribute("anchor-id");if(!e){this._anchor=null;return}this._anchor=document.getElementById(e)}_syncOpenLifecycle(e){const t=this.open;if(!e&&t&&(this._previousFocused=document.activeElement||null,this._bindGlobalListeners(),this._ensureObservers(),this._schedulePosition()),e&&!t){this._unbindGlobalListeners(),this._teardownObservers(),this._raf!=null&&(cancelAnimationFrame(this._raf),this._raf=null);const o=this._anchor||this._previousFocused;if(o&&typeof o.focus=="function")try{o.focus({preventScroll:!0})}catch{o.focus()}this._previousFocused=null}}_onWindowChange(){this.open&&this._schedulePosition()}_onSlotChange(){this.open&&this._schedulePosition()}_onDocumentPointerDown(e){if(!this.open||!y(this.getAttribute("close-on-outside"),!0))return;const t=e.composedPath();t.includes(this)||this._anchor&&t.includes(this._anchor)||this.close()}_onDocumentKeyDown(e){this.open&&y(this.getAttribute("close-on-escape"),!0)&&e.key==="Escape"&&(e.stopPropagation(),this.close())}_schedulePosition(){this.open&&(this._raf!=null&&cancelAnimationFrame(this._raf),this._raf=requestAnimationFrame(()=>{this._raf=null,this._position()}))}_bindGlobalListeners(){this._globalListenersBound||(document.addEventListener("pointerdown",this._onDocumentPointerDown,!0),document.addEventListener("keydown",this._onDocumentKeyDown,!0),window.addEventListener("scroll",this._onWindowChange,!0),window.addEventListener("resize",this._onWindowChange),this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(document.removeEventListener("pointerdown",this._onDocumentPointerDown,!0),document.removeEventListener("keydown",this._onDocumentKeyDown,!0),window.removeEventListener("scroll",this._onWindowChange,!0),window.removeEventListener("resize",this._onWindowChange),this._globalListenersBound=!1)}_ensureObservers(){this._resizeObserver==null&&typeof ResizeObserver<"u"&&(this._resizeObserver=new ResizeObserver(()=>this._schedulePosition()),this._resizeObserver.observe(this)),this._mutationObserver==null&&typeof MutationObserver<"u"&&(this._mutationObserver=new MutationObserver(()=>this._schedulePosition()),this._mutationObserver.observe(this,{childList:!0,subtree:!0,characterData:!0}))}_teardownObservers(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._mutationObserver&&(this._mutationObserver.disconnect(),this._mutationObserver=null)}_candidateFor(e,t,o,s){return e==="top"?{placement:e,x:t.left+t.width/2-o.width/2,y:t.top-o.height-s}:e==="bottom"?{placement:e,x:t.left+t.width/2-o.width/2,y:t.bottom+s}:e==="left"?{placement:e,x:t.left-o.width-s,y:t.top+t.height/2-o.height/2}:{placement:e,x:t.right+s,y:t.top+t.height/2-o.height/2}}_overflowScore(e,t,o,s,u){const r=window.innerWidth-u,a=window.innerHeight-u,i=e+o,n=t+s,h=Math.max(0,u-e),b=Math.max(0,u-t),m=Math.max(0,i-r),l=Math.max(0,n-a);return h+b+m+l}_position(){const e=this._popup;if(!e||!this.open||!this._anchor)return;if(!document.body.contains(this._anchor)){this.close();return}const t=this._anchor.getBoundingClientRect();if(t.width===0&&t.height===0)return;const o=e.getBoundingClientRect();if(o.width===0||o.height===0)return;const s=this.getAttribute("placement")||"top",u=M(this.getAttribute("offset"),10),r=8,a=[],i=c=>{a.includes(c)||a.push(c)};s==="auto"?(i("top"),i("bottom"),i("right"),i("left")):(i(s),i({top:"bottom",bottom:"top",left:"right",right:"left"}[s]),i("top"),i("bottom"),i("right"),i("left"));let n=this._candidateFor(a[0],t,o,u),h=this._overflowScore(n.x,n.y,o.width,o.height,r);for(const c of a){const v=this._candidateFor(c,t,o,u),_=this._overflowScore(v.x,v.y,o.width,o.height,r);if(_<h&&(n=v,h=_,_===0))break}const b=Math.max(r,window.innerWidth-o.width-r),m=Math.max(r,window.innerHeight-o.height-r);let l=f(n.x,r,b),d=f(n.y,r,m);const g=(this.getAttribute("strategy")||"fixed")==="absolute";g&&(l+=window.scrollX||0,d+=window.scrollY||0),e.style.setProperty("--ui-selection-popup-x",`${Math.round(l)}px`),e.style.setProperty("--ui-selection-popup-y",`${Math.round(d)}px`),e.dataset.placement=n.placement;const O=t.left+t.width/2,P=t.top+t.height/2,L=g?l-(window.scrollX||0):l,A=g?d-(window.scrollY||0):d,w=f(O-L,12,o.width-12),x=f(P-A,12,o.height-12);e.style.setProperty("--ui-selection-popup-arrow-x",`${Math.round(w)}px`),e.style.setProperty("--ui-selection-popup-arrow-y",`${Math.round(x)}px`);const z=n.placement==="left"?"100%":n.placement==="right"?"0%":`${Math.round(w)}px`,D=n.placement==="top"?"100%":n.placement==="bottom"?"0%":`${Math.round(x)}px`;e.style.setProperty("--ui-selection-popup-origin-x",z),e.style.setProperty("--ui-selection-popup-origin-y",D)}render(){this.setContent(`
+`;function M(p,e){if(p==null||p==="")return e;const t=Number(p);return Number.isFinite(t)?t:e}function y(p,e=!1){if(p==null)return e;const t=String(p).toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}function f(p,e,t){return Math.min(t,Math.max(e,p))}class C extends E.ElementBase{constructor(){super(),this._anchor=null,this._popup=null,this._raf=null,this._previousFocused=null,this._resizeObserver=null,this._mutationObserver=null,this._globalListenersBound=!1,this._onDocumentPointerDown=this._onDocumentPointerDown.bind(this),this._onDocumentKeyDown=this._onDocumentKeyDown.bind(this),this._onWindowChange=this._onWindowChange.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["open","anchor-id","headless","placement","offset","strategy","arrow","variant","tone","radius","size","close-on-outside","close-on-escape"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("slotchange",this._onSlotChange),this._syncAnchorFromAttribute(),this._syncOpenLifecycle(!1),this._schedulePosition()}disconnectedCallback(){this._unbindGlobalListeners(),this._teardownObservers(),this.root.removeEventListener("slotchange",this._onSlotChange),this._raf!=null&&(cancelAnimationFrame(this._raf),this._raf=null),super.disconnectedCallback()}attributeChangedCallback(e,t,o){t!==o&&(e==="anchor-id"&&this._syncAnchorFromAttribute(),e==="open"&&(this._syncOpenLifecycle(t!=null),this.dispatchEvent(new CustomEvent(o!=null?"open":"close",{bubbles:!0,composed:!0}))),this.isConnected&&this.requestRender(),this._schedulePosition())}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}openFor(e){if(!e)return;const t=document.getElementById(e);t&&(this._anchor=t,this.setAttribute("anchor-id",e),this.setAttribute("open",""),this._schedulePosition())}close(){this.removeAttribute("open")}_syncAnchorFromAttribute(){const e=this.getAttribute("anchor-id");if(!e){this._anchor=null;return}this._anchor=document.getElementById(e)}_syncOpenLifecycle(e){const t=this.open;if(!e&&t&&(this._previousFocused=document.activeElement||null,this._bindGlobalListeners(),this._ensureObservers(),this._schedulePosition()),e&&!t){this._unbindGlobalListeners(),this._teardownObservers(),this._raf!=null&&(cancelAnimationFrame(this._raf),this._raf=null);const o=this._anchor||this._previousFocused;if(o&&typeof o.focus=="function")try{o.focus({preventScroll:!0})}catch{o.focus()}this._previousFocused=null}}_onWindowChange(){this.open&&this._schedulePosition()}_onSlotChange(){this.open&&this._schedulePosition()}_onDocumentPointerDown(e){if(!this.open||!y(this.getAttribute("close-on-outside"),!0))return;const t=e.composedPath();t.includes(this)||this._anchor&&t.includes(this._anchor)||this.close()}_onDocumentKeyDown(e){this.open&&y(this.getAttribute("close-on-escape"),!0)&&e.key==="Escape"&&(e.stopPropagation(),this.close())}_schedulePosition(){this.open&&(this._raf!=null&&cancelAnimationFrame(this._raf),this._raf=requestAnimationFrame(()=>{this._raf=null,this._position()}))}_bindGlobalListeners(){this._globalListenersBound||(document.addEventListener("pointerdown",this._onDocumentPointerDown,!0),document.addEventListener("keydown",this._onDocumentKeyDown,!0),window.addEventListener("scroll",this._onWindowChange,{passive:!0,capture:!0}),window.addEventListener("resize",this._onWindowChange),this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(document.removeEventListener("pointerdown",this._onDocumentPointerDown,!0),document.removeEventListener("keydown",this._onDocumentKeyDown,!0),window.removeEventListener("scroll",this._onWindowChange,!0),window.removeEventListener("resize",this._onWindowChange),this._globalListenersBound=!1)}_ensureObservers(){this._resizeObserver==null&&typeof ResizeObserver<"u"&&(this._resizeObserver=new ResizeObserver(()=>this._schedulePosition()),this._resizeObserver.observe(this)),this._mutationObserver==null&&typeof MutationObserver<"u"&&(this._mutationObserver=new MutationObserver(()=>this._schedulePosition()),this._mutationObserver.observe(this,{childList:!0,subtree:!0,characterData:!0}))}_teardownObservers(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._mutationObserver&&(this._mutationObserver.disconnect(),this._mutationObserver=null)}_candidateFor(e,t,o,s){return e==="top"?{placement:e,x:t.left+t.width/2-o.width/2,y:t.top-o.height-s}:e==="bottom"?{placement:e,x:t.left+t.width/2-o.width/2,y:t.bottom+s}:e==="left"?{placement:e,x:t.left-o.width-s,y:t.top+t.height/2-o.height/2}:{placement:e,x:t.right+s,y:t.top+t.height/2-o.height/2}}_overflowScore(e,t,o,s,u){const r=window.innerWidth-u,a=window.innerHeight-u,i=e+o,n=t+s,h=Math.max(0,u-e),b=Math.max(0,u-t),m=Math.max(0,i-r),l=Math.max(0,n-a);return h+b+m+l}_position(){const e=this._popup;if(!e||!this.open||!this._anchor)return;if(!document.body.contains(this._anchor)){this.close();return}const t=this._anchor.getBoundingClientRect();if(t.width===0&&t.height===0)return;const o=e.getBoundingClientRect();if(o.width===0||o.height===0)return;const s=this.getAttribute("placement")||"top",u=M(this.getAttribute("offset"),10),r=8,a=[],i=c=>{a.includes(c)||a.push(c)};s==="auto"?(i("top"),i("bottom"),i("right"),i("left")):(i(s),i({top:"bottom",bottom:"top",left:"right",right:"left"}[s]),i("top"),i("bottom"),i("right"),i("left"));let n=this._candidateFor(a[0],t,o,u),h=this._overflowScore(n.x,n.y,o.width,o.height,r);for(const c of a){const v=this._candidateFor(c,t,o,u),_=this._overflowScore(v.x,v.y,o.width,o.height,r);if(_<h&&(n=v,h=_,_===0))break}const b=Math.max(r,window.innerWidth-o.width-r),m=Math.max(r,window.innerHeight-o.height-r);let l=f(n.x,r,b),d=f(n.y,r,m);const g=(this.getAttribute("strategy")||"fixed")==="absolute";g&&(l+=window.scrollX||0,d+=window.scrollY||0),e.style.left=`${Math.round(l)}px`,e.style.top=`${Math.round(d)}px`,e.dataset.placement=n.placement;const O=t.left+t.width/2,L=t.top+t.height/2,P=g?l-(window.scrollX||0):l,A=g?d-(window.scrollY||0):d,w=f(O-P,12,o.width-12),x=f(L-A,12,o.height-12);e.style.setProperty("--ui-selection-popup-arrow-x",`${Math.round(w)}px`),e.style.setProperty("--ui-selection-popup-arrow-y",`${Math.round(x)}px`);const z=n.placement==="left"?"100%":n.placement==="right"?"0%":`${Math.round(w)}px`,D=n.placement==="top"?"100%":n.placement==="bottom"?"0%":`${Math.round(x)}px`;e.style.setProperty("--ui-selection-popup-origin-x",z),e.style.setProperty("--ui-selection-popup-origin-y",D)}render(){this.setContent(`
       <style>${S}</style>
       <div class="popup" part="popup" role="dialog" aria-label="Selection popup">
         <span class="arrow" part="arrow" aria-hidden="true"></span>

package/dist/selection-popup.esm.js

@@ -11,6 +11,7 @@ const E = `
     --ui-selection-popup-border: 1px solid var(--ui-selection-popup-border-color);
     --ui-selection-popup-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-selection-popup-accent: var(--ui-color-primary, #2563eb);
+    --ui-selection-popup-enter-y: 6px;
     --ui-selection-popup-shadow:
       none;
     color-scheme: light dark;
@@ -39,9 +40,7 @@ const E = `
     color: var(--ui-selection-popup-color);
     box-shadow: var(--ui-selection-popup-shadow);
     padding: var(--ui-selection-popup-padding);
-    transform:
-      translate3d(var(--ui-selection-popup-x, 0px), var(--ui-selection-popup-y, 0px), 0)
-      scale(0.96);
+    transform: translate3d(0, var(--ui-selection-popup-enter-y, 6px), 0) scale(0.96);
     transform-origin: var(--ui-selection-popup-origin-x, 50%) var(--ui-selection-popup-origin-y, 50%);
     opacity: 0;
     transition: transform 150ms cubic-bezier(0.2, 0.72, 0.2, 1), opacity 140ms ease;
@@ -50,9 +49,7 @@ const E = `
 
   :host([open]) .popup {
     opacity: 1;
-    transform:
-      translate3d(var(--ui-selection-popup-x, 0px), var(--ui-selection-popup-y, 0px), 0)
-      scale(1);
+    transform: translate3d(0, 0, 0) scale(1);
   }
 
   .content {
@@ -301,7 +298,7 @@ class S extends D {
     }));
   }
   _bindGlobalListeners() {
-    this._globalListenersBound || (document.addEventListener("pointerdown", this._onDocumentPointerDown, !0), document.addEventListener("keydown", this._onDocumentKeyDown, !0), window.addEventListener("scroll", this._onWindowChange, !0), window.addEventListener("resize", this._onWindowChange), this._globalListenersBound = !0);
+    this._globalListenersBound || (document.addEventListener("pointerdown", this._onDocumentPointerDown, !0), document.addEventListener("keydown", this._onDocumentKeyDown, !0), window.addEventListener("scroll", this._onWindowChange, { passive: !0, capture: !0 }), window.addEventListener("resize", this._onWindowChange), this._globalListenersBound = !0);
   }
   _unbindGlobalListeners() {
     this._globalListenersBound && (document.removeEventListener("pointerdown", this._onDocumentPointerDown, !0), document.removeEventListener("keydown", this._onDocumentKeyDown, !0), window.removeEventListener("scroll", this._onWindowChange, !0), window.removeEventListener("resize", this._onWindowChange), this._globalListenersBound = !1);
@@ -367,11 +364,11 @@ class S extends D {
     const b = Math.max(r, window.innerWidth - o.width - r), m = Math.max(r, window.innerHeight - o.height - r);
     let l = f(n.x, r, b), d = f(n.y, r, m);
     const g = (this.getAttribute("strategy") || "fixed") === "absolute";
-    g && (l += window.scrollX || 0, d += window.scrollY || 0), e.style.setProperty("--ui-selection-popup-x", `${Math.round(l)}px`), e.style.setProperty("--ui-selection-popup-y", `${Math.round(d)}px`), e.dataset.placement = n.placement;
-    const C = t.left + t.width / 2, L = t.top + t.height / 2, O = g ? l - (window.scrollX || 0) : l, P = g ? d - (window.scrollY || 0) : d, w = f(C - O, 12, o.width - 12), x = f(L - P, 12, o.height - 12);
+    g && (l += window.scrollX || 0, d += window.scrollY || 0), e.style.left = `${Math.round(l)}px`, e.style.top = `${Math.round(d)}px`, e.dataset.placement = n.placement;
+    const C = t.left + t.width / 2, L = t.top + t.height / 2, O = g ? l - (window.scrollX || 0) : l, A = g ? d - (window.scrollY || 0) : d, w = f(C - O, 12, o.width - 12), x = f(L - A, 12, o.height - 12);
     e.style.setProperty("--ui-selection-popup-arrow-x", `${Math.round(w)}px`), e.style.setProperty("--ui-selection-popup-arrow-y", `${Math.round(x)}px`);
-    const A = n.placement === "left" ? "100%" : n.placement === "right" ? "0%" : `${Math.round(w)}px`, z = n.placement === "top" ? "100%" : n.placement === "bottom" ? "0%" : `${Math.round(x)}px`;
-    e.style.setProperty("--ui-selection-popup-origin-x", A), e.style.setProperty("--ui-selection-popup-origin-y", z);
+    const z = n.placement === "left" ? "100%" : n.placement === "right" ? "0%" : `${Math.round(w)}px`, P = n.placement === "top" ? "100%" : n.placement === "bottom" ? "0%" : `${Math.round(x)}px`;
+    e.style.setProperty("--ui-selection-popup-origin-x", z), e.style.setProperty("--ui-selection-popup-origin-y", P);
   }
   render() {
     this.setContent(`

package/dist/split-button.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./ElementBase-1b301e7f.js"),g=require("./portal-d8d7fbca.js"),h=require("./dismissable-layer-193e3bed.js"),x=require("./positioner-accc6e5f.js");require("./listbox-ef2f708e.js");require("./collection-a2969ad2.js");require("./collection.cjs.js");const m=160,v=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./ElementBase-1b301e7f.js"),g=require("./portal-d9bae456.js"),h=require("./dismissable-layer-193e3bed.js"),x=require("./positioner-43b1c75a.js");require("./listbox-ef2f708e.js");require("./collection-a2969ad2.js");require("./collection.cjs.js");const m=160,v=`
   :host {
     --ui-split-button-radius: 12px;
     --ui-split-button-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);

package/dist/split-button.esm.js

@@ -1,7 +1,7 @@
 import { E as b } from "./ElementBase-909688f3.mjs";
-import { c as f } from "./portal-1cf392ca.mjs";
+import { c as f } from "./portal-9060f7a6.mjs";
 import { c as g } from "./dismissable-layer-9c7e6b58.mjs";
-import { a as h } from "./positioner-fbd61bf1.mjs";
+import { a as h } from "./positioner-16f3cca1.mjs";
 import "./listbox-308789a0.mjs";
 import "./collection-a1aac0c6.mjs";
 import "./collection.esm.js";

package/dist/standalone/radio.d.ts

@@ -0,0 +1,2 @@
+export * from '../components/ui-radio';
+//# sourceMappingURL=radio.d.ts.map

package/dist/standalone/radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/standalone/radio.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAC"}