@orangelogic/design-system 2.19.0-pr77234.3 → 2.19.0-pr77248.4

package/library/components/popup.js

@@ -1,11 +1,11 @@
-import { a as ze, i as Vt, r as Be, x as j, n as v, C as Ie, c as Me } from "../chunks/custom-element.fmLrnDZr.js";
-import { r as ye } from "../chunks/state.Dt9F_SuS.js";
+import { a as _e, i as Vt, r as ze, x as j, n as v, C as Be, c as Ie } from "../chunks/custom-element.fmLrnDZr.js";
+import { r as Me } from "../chunks/state.Dt9F_SuS.js";
 import { e as ut } from "../chunks/query.BBf1UFkC.js";
 import { e as He } from "../chunks/base.D76d76ww.js";
 import { o as Tt } from "../chunks/if-defined.CKupVaWs.js";
 import { o as se } from "../chunks/style-map.lEJHEwk3.js";
 import { i as Lt, p as ne, f as We, a as qe } from "../chunks/browser.Va59Ix3P.js";
-import { c as ve } from "../chunks/component.styles.DtouHn2g.js";
+import { c as ye } from "../chunks/component.styles.DtouHn2g.js";
 import { L as Ve } from "../chunks/i18n.C6c6_pqI.js";
 import { e as Dt } from "../chunks/class-map.DqNfBvJI.js";
 import { n as Ue } from "../chunks/when.Dr1es41R.js";
@@ -77,7 +77,7 @@ function Ke(e) {
   }
   return t;
 }
-class Xe extends Ke(ze) {
+class Xe extends Ke(_e) {
 }
 function Ge(e, t, o) {
   const i = e.getAttribute(t);
@@ -305,7 +305,7 @@ class ht extends Xe {
     document.dispatchEvent(t);
   }
   static async open(t, o, i, s) {
-    await Promise.resolve().then(() => $e);
+    await Promise.resolve().then(() => Ne);
     const r = arguments.length === 2, n = i || t, a = new this();
     let l = !1;
     a.dispose = () => {
@@ -345,7 +345,7 @@ class ht extends Xe {
     t.delayed = !!o.delayed, t.receivesFocus = o.receivesFocus ?? "auto", t.triggerElement = o.trigger || null, t.type = o.type || "modal", t.offset = o.offset ?? 0, t.placement = o.placement, t.willPreventClose = !!o.notImmediatelyClosable;
   }
 }
-const be = Symbol("element resolver updated");
+const ve = Symbol("element resolver updated");
 class hi {
   constructor(t, { selector: o } = { selector: "" }) {
     this._element = null, this._selector = "", this.mutationCallback = (i) => {
@@ -373,7 +373,7 @@ class hi {
     if (t === this.element)
       return;
     const o = this.element;
-    this._element = t, this.host.requestUpdate(be, o);
+    this._element = t, this.host.requestUpdate(ve, o);
   }
   get selector() {
     return this._selector;
@@ -877,7 +877,7 @@ function Z(e) {
 function at(e) {
   return e.split("-")[1];
 }
-function we(e) {
+function be(e) {
   return e === "x" ? "y" : "x";
 }
 function Jt(e) {
@@ -888,7 +888,7 @@ function Y(e) {
   return wi.has(Z(e)) ? "y" : "x";
 }
 function Zt(e) {
-  return we(Y(e));
+  return be(Y(e));
 }
 function xi(e, t, o) {
   o === void 0 && (o = !1);
@@ -933,7 +933,7 @@ function Si(e) {
     ...e
   };
 }
-function xe(e) {
+function we(e) {
   return typeof e != "number" ? Si(e) : {
     top: e,
     right: e,
@@ -1084,7 +1084,7 @@ async function dt(e, t) {
     elementContext: d = "floating",
     altBoundary: u = !1,
     padding: p = 0
-  } = st(t, e), f = xe(p), m = a[u ? d === "floating" ? "reference" : "floating" : d], y = Et(await r.getClippingRect({
+  } = st(t, e), f = we(p), m = a[u ? d === "floating" ? "reference" : "floating" : d], y = Et(await r.getClippingRect({
     element: (o = await (r.isElement == null ? void 0 : r.isElement(m))) == null || o ? m : m.contextElement || await (r.getDocumentElement == null ? void 0 : r.getDocumentElement(a.floating)),
     boundary: c,
     rootBoundary: h,
@@ -1131,7 +1131,7 @@ const Ti = (e) => ({
     } = st(e, t) || {};
     if (c == null)
       return {};
-    const d = xe(h), u = {
+    const d = we(h), u = {
       x: o,
       y: i
     }, p = Zt(s), f = Jt(p), g = await n.getDimensions(c), m = p === "y", y = m ? "top" : "left", x = m ? "bottom" : "right", E = m ? "clientHeight" : "clientWidth", C = r.reference[f] + r.reference[p] - u[p] - r.floating[f], P = u[p] - r.reference[p], F = await (n.getOffsetParent == null ? void 0 : n.getOffsetParent(c));
@@ -1213,7 +1213,7 @@ const Ti = (e) => ({
                   Q === "y";
                 }
                 return !0;
-              }).map(($) => [$.placement, $.overflows.filter((Q) => Q > 0).reduce((Q, _e) => Q + _e, 0)]).sort(($, Q) => $[1] - Q[1])[0]) == null ? void 0 : G[0];
+              }).map(($) => [$.placement, $.overflows.filter((Q) => Q > 0).reduce((Q, $e) => Q + $e, 0)]).sort(($, Q) => $[1] - Q[1])[0]) == null ? void 0 : G[0];
               N && (U = N);
               break;
             }
@@ -1362,7 +1362,7 @@ const Ni = function(e) {
       } = st(e, t), c = {
         x: o,
         y: i
-      }, h = await dt(t, l), d = Y(Z(s)), u = we(d);
+      }, h = await dt(t, l), d = Y(Z(s)), u = be(d);
       let p = c[u], f = c[d];
       if (r) {
         const m = u === "y" ? "top" : "left", y = u === "y" ? "bottom" : "right", x = p + h[m], E = p - h[y];
@@ -1435,7 +1435,7 @@ function Ct() {
   return typeof window < "u";
 }
 function lt(e) {
-  return Ee(e) ? (e.nodeName || "").toLowerCase() : "#document";
+  return xe(e) ? (e.nodeName || "").toLowerCase() : "#document";
 }
 function L(e) {
   var t;
@@ -1443,9 +1443,9 @@ function L(e) {
 }
 function q(e) {
   var t;
-  return (t = (Ee(e) ? e.ownerDocument : e.document) || window.document) == null ? void 0 : t.documentElement;
+  return (t = (xe(e) ? e.ownerDocument : e.document) || window.document) == null ? void 0 : t.documentElement;
 }
-function Ee(e) {
+function xe(e) {
   return Ct() ? e instanceof Node || e instanceof L(e).Node : !1;
 }
 function z(e) {
@@ -1528,14 +1528,14 @@ function tt(e) {
   );
   return fe(t) ? t.host : t;
 }
-function Pe(e) {
+function Ee(e) {
   const t = tt(e);
-  return rt(t) ? e.ownerDocument ? e.ownerDocument.body : e.body : W(t) && gt(t) ? t : Pe(t);
+  return rt(t) ? e.ownerDocument ? e.ownerDocument.body : e.body : W(t) && gt(t) ? t : Ee(t);
 }
 function pt(e, t, o) {
   var i;
   t === void 0 && (t = []), o === void 0 && (o = !0);
-  const s = Pe(e), r = s === ((i = e.ownerDocument) == null ? void 0 : i.body), n = L(s);
+  const s = Ee(e), r = s === ((i = e.ownerDocument) == null ? void 0 : i.body), n = L(s);
   if (r) {
     const a = Bt(n);
     return t.concat(n, n.visualViewport || [], gt(s) ? s : [], a && o ? pt(a) : []);
@@ -1545,7 +1545,7 @@ function pt(e, t, o) {
 function Bt(e) {
   return e.parent && Object.getPrototypeOf(e.parent) ? e.frameElement : null;
 }
-function Ce(e) {
+function Pe(e) {
   const t = B(e);
   let o = parseFloat(t.width) || 0, i = parseFloat(t.height) || 0;
   const s = W(e), r = s ? e.offsetWidth : o, n = s ? e.offsetHeight : i, a = wt(o) !== r || wt(i) !== n;
@@ -1566,7 +1566,7 @@ function nt(e) {
     width: i,
     height: s,
     $: r
-  } = Ce(t);
+  } = Pe(t);
   let n = (r ? wt(o.width) : o.width) / i, a = (r ? wt(o.height) : o.height) / s;
   return (!n || !Number.isFinite(n)) && (n = 1), (!a || !Number.isFinite(a)) && (a = 1), {
     x: n,
@@ -1574,7 +1574,7 @@ function nt(e) {
   };
 }
 const ji = /* @__PURE__ */ H(0);
-function Oe(e) {
+function Ce(e) {
   const t = L(e);
   return !te() || !t.visualViewport ? ji : {
     x: t.visualViewport.offsetLeft,
@@ -1589,7 +1589,7 @@ function ot(e, t, o, i) {
   const s = e.getBoundingClientRect(), r = ee(e);
   let n = H(1);
   t && (i ? z(i) && (n = nt(i)) : n = nt(e));
-  const a = Yi(r, o, i) ? Oe(r) : H(0);
+  const a = Yi(r, o, i) ? Ce(r) : H(0);
   let l = (s.left + a.x) / n.x, c = (s.top + a.y) / n.y, h = s.width / n.x, d = s.height / n.y;
   if (r) {
     const u = L(r), p = i && z(i) ? L(i) : i;
@@ -1610,7 +1610,7 @@ function ie(e, t) {
   const o = St(e).scrollLeft;
   return t ? t.left + o : ot(q(e)).left + o;
 }
-function Ae(e, t, o) {
+function Oe(e, t, o) {
   o === void 0 && (o = !1);
   const i = e.getBoundingClientRect(), s = i.left + t.scrollLeft - (o ? 0 : (
     // RTL <body> scrollbar.
@@ -1640,7 +1640,7 @@ function Ki(e) {
     const p = ot(i);
     c = nt(i), h.x = p.x + i.clientLeft, h.y = p.y + i.clientTop;
   }
-  const u = n && !d && !r ? Ae(n, l, !0) : H(0);
+  const u = n && !d && !r ? Oe(n, l, !0) : H(0);
   return {
     width: o.width * c.x,
     height: o.height * c.y,
@@ -1696,7 +1696,7 @@ function ge(e, t, o) {
   else if (z(t))
     i = Zi(t, o);
   else {
-    const s = Oe(e);
+    const s = Ce(e);
     i = {
       x: t.x - s.x,
       y: t.y - s.y,
@@ -1706,9 +1706,9 @@ function ge(e, t, o) {
   }
   return Et(i);
 }
-function Se(e, t) {
+function Ae(e, t) {
   const o = tt(e);
-  return o === t || !z(o) || rt(o) ? !1 : B(o).position === "fixed" || Se(o, t);
+  return o === t || !z(o) || rt(o) ? !1 : B(o).position === "fixed" || Ae(o, t);
 }
 function to(e, t) {
   const o = t.get(e);
@@ -1719,7 +1719,7 @@ function to(e, t) {
   let n = r ? tt(e) : e;
   for (; z(n) && !rt(n); ) {
     const a = B(n), l = At(n);
-    !l && a.position === "fixed" && (s = null), (r ? !l && !s : !l && a.position === "static" && !!s && Ji.has(s.position) || gt(n) && !l && Se(e, n)) ? i = i.filter((h) => h !== n) : s = a, n = tt(n);
+    !l && a.position === "fixed" && (s = null), (r ? !l && !s : !l && a.position === "static" && !!s && Ji.has(s.position) || gt(n) && !l && Ae(e, n)) ? i = i.filter((h) => h !== n) : s = a, n = tt(n);
   }
   return t.set(e, i), i;
 }
@@ -1745,7 +1745,7 @@ function io(e) {
   const {
     width: t,
     height: o
-  } = Ce(e);
+  } = Pe(e);
   return {
     width: t,
     height: o
@@ -1767,7 +1767,7 @@ function oo(e, t, o) {
       l.x = p.x + t.clientLeft, l.y = p.y + t.clientTop;
     } else s && c();
   r && !i && s && c();
-  const h = s && !i && !r ? Ae(s, a) : H(0), d = n.left + a.scrollLeft - l.x - h.x, u = n.top + a.scrollTop - l.y - h.y;
+  const h = s && !i && !r ? Oe(s, a) : H(0), d = n.left + a.scrollLeft - l.x - h.x, u = n.top + a.scrollTop - l.y - h.y;
   return {
     x: d,
     y: u,
@@ -1786,7 +1786,7 @@ function me(e, t) {
   let o = e.offsetParent;
   return q(e) === o && (o = o.ownerDocument.body), o;
 }
-function Re(e, t) {
+function Se(e, t) {
   const o = L(e);
   if (Ot(e))
     return o;
@@ -1805,7 +1805,7 @@ function Re(e, t) {
   return i && rt(i) && Ft(i) && !At(i) ? o : i || Vi(e) || o;
 }
 const so = async function(e) {
-  const t = this.getOffsetParent || Re, o = this.getDimensions, i = await o(e.floating);
+  const t = this.getOffsetParent || Se, o = this.getDimensions, i = await o(e.floating);
   return {
     reference: oo(e.reference, await t(e.floating), e.strategy),
     floating: {
@@ -1823,7 +1823,7 @@ const It = {
   convertOffsetParentRelativeRectToViewportRelativeRect: Ki,
   getDocumentElement: q,
   getClippingRect: eo,
-  getOffsetParent: Re,
+  getOffsetParent: Se,
   getElementRects: so,
   getClientRects: Xi,
   getDimensions: io,
@@ -1831,7 +1831,7 @@ const It = {
   isElement: z,
   isRTL: no
 };
-function Te(e, t) {
+function Re(e, t) {
   return e.x === t.x && e.y === t.y && e.width === t.width && e.height === t.height;
 }
 function ro(e, t) {
@@ -1865,7 +1865,7 @@ function ro(e, t) {
           n(!1, 1e-7);
         }, 1e3);
       }
-      O === 1 && !Te(c, e.getBoundingClientRect()) && n(), C = !1;
+      O === 1 && !Re(c, e.getBoundingClientRect()) && n(), C = !1;
     }
     try {
       o = new IntersectionObserver(P, {
@@ -1907,7 +1907,7 @@ function Mt(e, t, o, i) {
   l && m();
   function m() {
     const y = ot(e);
-    g && !Te(g, y) && o(), g = y, f = requestAnimationFrame(m);
+    g && !Re(g, y) && o(), g = y, f = requestAnimationFrame(m);
   }
   return o(), () => {
     var y;
@@ -1916,7 +1916,7 @@ function Mt(e, t, o, i) {
     }), d?.(), (y = p) == null || y.disconnect(), p = null, l && cancelAnimationFrame(f);
   };
 }
-const Ht = Ni, Le = $i, Wt = Li, qt = _i, ao = Di, De = Ti, ke = (e, t, o) => {
+const Ht = Ni, Te = $i, Wt = Li, qt = _i, ao = Di, Le = Ti, De = (e, t, o) => {
   const i = /* @__PURE__ */ new Map(), s = {
     platform: It,
     ...o
@@ -2005,7 +2005,7 @@ class ho {
         crossAxis: r,
         mainAxis: s
       }),
-      Le({ padding: vt }),
+      Te({ padding: vt }),
       i,
       qt({
         apply: ({ availableHeight: u, availableWidth: p, rects: { floating: f } }) => {
@@ -2023,12 +2023,12 @@ class ho {
         padding: vt
       }),
       ...n ? [
-        De({
+        Le({
           element: n,
           padding: t.tipPadding || vt
         })
       ] : []
-    ], { middlewareData: l, placement: c, x: h, y: d } = await ke(
+    ], { middlewareData: l, placement: c, x: h, y: d } = await De(
       t.trigger,
       o,
       {
@@ -2094,7 +2094,7 @@ class oe {
       t && (customElements.whenDefined("cx-overlay").then(async () => {
         const { Overlay: o } = await Promise.resolve().then(() => Co);
         this.overlay = new o(), this.overlay.open = !0;
-      }), Promise.resolve().then(() => $e));
+      }), Promise.resolve().then(() => Ne));
     }
   }
   get overlay() {
@@ -2126,7 +2126,7 @@ class oe {
     this.isPersistent || this.abort();
   }
 }
-const po = 300, Fe = {
+const po = 300, ke = {
   keyboard: "Press Space or Alt+Down Arrow for additional options",
   mouse: "Click and hold for additional options",
   touch: "Double tap and long press for additional options"
@@ -2188,7 +2188,7 @@ class uo extends oe {
     const o = document.createElement("div");
     o.id = `longpress-describedby-descriptor-${Ut()}`;
     const i = ni() || ri() ? "touch" : "keyboard";
-    o.textContent = Fe[i], o.slot = "longpress-describedby-descriptor";
+    o.textContent = ke[i], o.slot = "longpress-describedby-descriptor";
     const s = t.getRootNode(), r = this.overlay.getRootNode();
     s === r ? this.overlay.append(o) : (o.hidden = !("host" in s), t.insertAdjacentElement("afterend", o));
     const n = $t(
@@ -2719,7 +2719,7 @@ const A = (K = class extends ct {
       this.elementResolver.selector = i ? `#${i}` : "", this.triggerInteraction = s;
     }
     let o = !1;
-    t.has(be) && (o = this.triggerElement, this.triggerElement = this.elementResolver.element), t.has("triggerElement") && (o = t.get("triggerElement")), o !== !1 && this.bindEvents();
+    t.has(ve) && (o = this.triggerElement, this.triggerElement = this.elementResolver.element), t.has("triggerElement") && (o = t.get("triggerElement")), o !== !1 && this.bindEvents();
   }
   updated(t) {
     super.updated(t), t.has("placement") && (this.placement ? this.dialogEl.setAttribute("actual-placement", this.placement) : this.dialogEl.removeAttribute("actual-placement"), this.open && typeof t.get("placement") < "u" && this.placementController.resetOverlayPosition()), t.has("state") && this.state === "closed" && typeof t.get("state") < "u" && this.placementController.clearOverlayPosition();
@@ -2785,9 +2785,9 @@ const A = (K = class extends ct {
     super.disconnectedCallback(), this.removeEventListener("close", this.handleClose), this.strategy?.releaseDescription(), this.open = !1;
   }
 }, K.styles = [
-  ve,
+  ye,
   Vt`
-      ${Be(fo)}
+      ${ze(fo)}
     `
 ], K.openCount = 1, K);
 R([
@@ -2822,7 +2822,7 @@ R([
   ut("slot")
 ], A.prototype, "slotEl", 2);
 R([
-  ye()
+  Me()
 ], A.prototype, "state", 1);
 R([
   v({ attribute: "tip-padding", type: Number })
@@ -2839,14 +2839,14 @@ R([
 R([
   v()
 ], A.prototype, "type", 2);
-let Ne = A;
+let Fe = A;
 const Co = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  LONGPRESS_INSTRUCTIONS: Fe,
-  Overlay: Ne
+  LONGPRESS_INSTRUCTIONS: ke,
+  Overlay: Fe
 }, Symbol.toStringTag, { value: "Module" }));
-Qe("cx-overlay", Ne);
-const $e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+Qe("cx-overlay", Fe);
+const Ne = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null
 }, Symbol.toStringTag, { value: "Module" }));
 function Oo(e) {
@@ -2902,7 +2902,7 @@ const So = Vt`
     width: max-content;
   }
 
-  .popup--fixed, .popup--overlay {
+  .popup--fixed {
     position: fixed;
     z-index: var(--cx-z-index-dialog);
   }
@@ -2911,12 +2911,6 @@ const So = Vt`
     display: none;
   }
 
-  .popup--overlay.popup:not(.popup--active) {
-    display: unset;
-    visibility: hidden;
-    opacity: 0;
-  }
-
   .popup__arrow {
     position: absolute;
     width: calc(var(--arrow-size-diagonal) * 2);
@@ -2958,9 +2952,9 @@ function Lo(e) {
   const t = "contextElement" in e ? e.contextElement.ownerDocument.defaultView : null;
   return "getBoundingClientRect" in e && ("contextElement" in e ? e.contextElement instanceof (t?.Element ?? Element) : !0);
 }
-let b = class extends Ie {
+let b = class extends Be {
   constructor() {
-    super(...arguments), this.localize = new Ve(this), this.active = !1, this.placement = "top", this.strategy = "absolute", this.distance = 0, this.skidding = 0, this.arrow = !1, this.arrowPlacement = "anchor", this.arrowPadding = 10, this.flip = !1, this.hide = !1, this.hideBoundaryStrategy = "escaped", this.flipFallbackPlacements = "", this.flipFallbackStrategy = "best-fit", this.flipPadding = 0, this.shift = !1, this.shiftPadding = 0, this.autoSizePadding = 0, this.hoverBridge = !1, this.autoWidthFactor = 1, this.overlayOpened = !1, this.updateHoverBridge = () => {
+    super(...arguments), this.localize = new Ve(this), this.active = !1, this.placement = "top", this.strategy = "absolute", this.distance = 0, this.skidding = 0, this.arrow = !1, this.arrowPlacement = "anchor", this.arrowPadding = 10, this.flip = !1, this.hide = !1, this.hideBoundaryStrategy = "escaped", this.flipFallbackPlacements = "", this.flipFallbackStrategy = "best-fit", this.flipPadding = 0, this.shift = !1, this.shiftPadding = 0, this.autoSizePadding = 0, this.hoverBridge = !1, this.autoWidthFactor = 1, this.updateHoverBridge = () => {
       if (this.hoverBridge && this.anchorEl) {
         const e = this.anchorEl.getBoundingClientRect(), t = this.popup.getBoundingClientRect(), o = this.placement.includes("top") || this.placement.includes("bottom") || this.placement === "center";
         let i = 0, s = 0, r = 0, n = 0, a = 0, l = 0, c = 0, h = 0;
@@ -2990,18 +2984,14 @@ let b = class extends Ie {
   disconnectedCallback() {
     super.disconnectedCallback(), this.stop();
   }
-  runFirstUpdated() {
-    if (this.strategy !== "overlay") {
-      this.start();
-      return;
-    }
-    if (this.overlayOpened && this.start(), !ne) {
+  async runFirstUpdated() {
+    if (this.start(), this.strategy === "overlay" && !ne) {
       const e = We(this);
       e && (this.autoSizeBoundary = e, this.flipBoundary = e, this.shiftBoundary = e);
     }
   }
   async updated(e) {
-    super.updated(e), e.has("active") && (this.active ? this.strategy !== "overlay" && (this.start(), this.emit("cx-opened"), this.overlayOpened = !0) : this.stop()), e.has("anchor") && this.handleAnchorChange(), this.active && this.overlayOpened && (await this.updateComplete, this.reposition());
+    super.updated(e), e.has("active") && (this.active ? (this.start(), this.emit("cx-opened")) : this.stop()), e.has("anchor") && this.handleAnchorChange(), this.active && (await this.updateComplete, this.reposition());
   }
   async handleAnchorChange() {
     if (await this.stop(), this.anchor && typeof this.anchor == "string") {
@@ -3012,10 +3002,10 @@ let b = class extends Ie {
       flatten: !0
     })[0]), this.anchorEl instanceof Element && this.anchorEl.tagName.toLowerCase() === "cx-dialog" && (this.anchorEl = this.anchorEl?.shadowRoot?.querySelector(
       '[part="panel"]'
-    )), this.anchorEl && this.strategy !== "overlay" && this.start();
+    )), this.anchorEl && this.start();
   }
   async handleOverlayOpened(e) {
-    e.target === this.overlay && (this.start(), await this.updateComplete, this.emit("cx-opened"), this.overlayOpened = !0);
+    e.target === this.overlay && (this.style.removeProperty("--auto-size-available-width"), this.style.removeProperty("--auto-size-available-height"), this.reposition(), await this.updateComplete, this.emit("cx-opened"));
   }
   start() {
     this.anchorEl && (this.cleanup = Mt(this.anchorEl, this.popup, () => {
@@ -3023,7 +3013,7 @@ let b = class extends Ie {
     }));
   }
   async stop() {
-    return this.active || (this.overlayOpened = !1), new Promise((e) => {
+    return new Promise((e) => {
       this.cleanup ? (this.cleanup(), this.cleanup = void 0, this.removeAttribute("data-current-placement"), this.style.removeProperty("--auto-size-available-width"), this.style.removeProperty("--auto-size-available-height"), requestAnimationFrame(() => e())) : e();
     });
   }
@@ -3059,7 +3049,7 @@ let b = class extends Ie {
     if (this.shift) {
       let t = this.shiftBoundary;
       !t && ["fixed", "overlay"].includes(this.strategy) && (t = document.body), e.push(
-        Le({
+        Te({
           boundary: t,
           padding: this.shiftPadding
         })
@@ -3085,7 +3075,7 @@ let b = class extends Ie {
     } else
       this.style.removeProperty("--auto-size-available-width"), this.style.removeProperty("--auto-size-available-height");
     this.arrow && e.push(
-      De({
+      Le({
         element: this.arrowEl,
         padding: this.arrowPadding
       })
@@ -3094,7 +3084,7 @@ let b = class extends Ie {
         boundary: this.hideBoundary,
         strategy: this.hideBoundaryStrategy
       })
-    ), ke(this.anchorEl, this.popup, {
+    ), De(this.anchorEl, this.popup, {
       middleware: e,
       placement: this.placement === "center" ? "bottom" : this.placement,
       platform: {
@@ -3146,7 +3136,7 @@ let b = class extends Ie {
   }
   render() {
     const e = j`<cx-overlay
-      ?open=${this.active}
+      open
       placement="bottom"
       type="manual"
       @cx-opened=${this.handleOverlayOpened}
@@ -3155,9 +3145,9 @@ let b = class extends Ie {
         part="popup"
         class=${Dt({
       popup: !0,
-      "popup--active": this.overlayOpened,
+      "popup--active": this.active,
+      "popup--fixed": !0,
       "popup--has-arrow": this.arrow,
-      "popup--overlay": !0,
       "popup--use-size-middleware": this.isSizeMiddleWareUsed
     })}
       >
@@ -3204,7 +3194,7 @@ let b = class extends Ie {
     `;
   }
 };
-b.styles = [ve, So];
+b.styles = [ye, So];
 w([
   ut(".popup")
 ], b.prototype, "popup", 2);
@@ -3301,11 +3291,8 @@ w([
 w([
   v({ attribute: "auto-width-factor" })
 ], b.prototype, "autoWidthFactor", 2);
-w([
-  ye()
-], b.prototype, "overlayOpened", 2);
 b = w([
-  Me("cx-popup")
+  Ie("cx-popup")
 ], b);
 export {
   b as default