@sbb-esta/lyne-elements 0.52.0 → 0.52.1

package/popover/popover.js

@@ -1,190 +1,190 @@
-import { css as u, html as d, nothing as g } from "lit";
-import { property as l, customElement as f } from "lit/decorators.js";
-import { ref as m } from "lit/directives/ref.js";
-import { SbbFocusHandler as _, IS_FOCUSABLE_QUERY as w, setModalityOnNextFocus as b, getFirstFocusableElement as y } from "../core/a11y.js";
+import { css as f, html as h, nothing as u } from "lit";
+import { property as b, customElement as m } from "lit/decorators.js";
+import { ref as g } from "lit/directives/ref.js";
+import { SbbFocusHandler as w, IS_FOCUSABLE_QUERY as y, setModalityOnNextFocus as p, getFirstFocusableElement as x } from "../core/a11y.js";
 import { SbbOpenCloseBaseElement as E } from "../core/base-elements.js";
-import { SbbLanguageController as x } from "../core/controllers.js";
-import { findReferencedElement as C } from "../core/dom.js";
-import { EventEmitter as h, composedPathHasAttribute as T } from "../core/eventing.js";
+import { SbbLanguageController as C } from "../core/controllers.js";
+import { findReferencedElement as _ } from "../core/dom.js";
+import { EventEmitter as v, composedPathHasAttribute as T } from "../core/eventing.js";
 import { i18nClosePopover as k } from "../core/i18n.js";
-import { isEventOnElement as c, removeAriaOverlayTriggerAttributes as P, setAriaOverlayTriggerAttributes as L, getElementPosition as O } from "../core/overlay.js";
+import { isEventOnElement as c, removeAriaOverlayTriggerAttributes as A, setAriaOverlayTriggerAttributes as L, getElementPosition as z } from "../core/overlay.js";
 import "../button/secondary-button.js";
-const S = u`*,:before,:after{box-sizing:border-box}:host{--sbb-popover-position: absolute;--sbb-popover-position-x: 0;--sbb-popover-position-y: 0;--sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);--sbb-popover-arrow-position-x: 0;--sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));--sbb-popover-inset: 0 auto auto 0;--sbb-popover-border-radius: var(--sbb-border-radius-8x);--sbb-popover-padding: var(--sbb-spacing-fixed-4x);--sbb-popover-background: var(--sbb-color-white);--sbb-popover-color: var(--sbb-color-charcoal);--sbb-popover-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-popover-animation-easing: ease-out;--sbb-popover-transform: translateY(var(--sbb-spacing-fixed-2x));--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:block}:host([data-position=above]){--sbb-popover-transform: translateY(calc(var(--sbb-spacing-fixed-2x) * -1))}:host(:not([data-state=closed])){--sbb-popover-inset: 0}.sbb-popover:after,.sbb-popover__content:before{content:"";position:absolute;display:block;width:var(--sbb-popover-arrow-size);height:var(--sbb-popover-arrow-size);left:var(--sbb-popover-arrow-position-x);bottom:calc(100% - var(--sbb-popover-arrow-size) / 2);background-color:var(--sbb-popover-background);border-radius:var(--sbb-border-radius-2x) 0;transform:rotate(45deg)}.sbb-popover__container{position:fixed;inset:var(--sbb-popover-inset);pointer-events:none;z-index:var(--sbb-popover-z-index, var(--sbb-overlay-default-z-index));color:var(--sbb-popover-color)}.sbb-popover{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);display:none;position:var(--sbb-popover-position);pointer-events:all;top:var(--sbb-popover-position-y);bottom:unset;left:var(--sbb-popover-position-x);right:unset;border:none;border-radius:var(--sbb-popover-border-radius);padding:0;max-width:var(--sbb-popover-max-width);width:max-content;background-color:var(--sbb-popover-background);outline:none}.sbb-popover:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}:host([data-state]:not([data-state=closed])) .sbb-popover{display:block;animation-name:open;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}:host([data-state][data-state=closing]) .sbb-popover{pointer-events:none;animation-name:close;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}.sbb-popover:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);z-index:-1}@media (forced-colors: active){.sbb-popover:after{outline:var(--sbb-border-width-1x) solid CanvasText}}:host([data-position=above]) .sbb-popover:after{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@media (forced-colors: active){.sbb-popover{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-popover:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background-color:transparent}:host([data-position=below]) .sbb-popover:before{inset-block-start:calc(-1 * var(--sbb-spacing-fixed-6x))}:host([data-position=above]) .sbb-popover:before{inset-block-end:calc(-1 * var(--sbb-spacing-fixed-6x))}.sbb-popover__content{display:flex;gap:var(--sbb-spacing-fixed-4x);border-radius:var(--sbb-popover-border-radius);padding:var(--sbb-popover-padding);outline:none;background-color:var(--sbb-popover-background);overflow:hidden;flex-direction:row-reverse}:host([data-position=above]) .sbb-popover__content:before{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@keyframes open{0%{opacity:0;transform:var(--sbb-popover-transform)}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:var(--sbb-popover-transform)}}`;
-var A = Object.defineProperty, F = Object.getOwnPropertyDescriptor, n = (e, o, t, i) => {
-  for (var r = i > 1 ? void 0 : i ? F(o, t) : o, a = e.length - 1, p; a >= 0; a--)
-    (p = e[a]) && (r = (i ? p(o, t, r) : p(r)) || r);
-  return i && r && A(o, t, r), r;
+const O = f`*,:before,:after{box-sizing:border-box}:host{--sbb-popover-position: absolute;--sbb-popover-position-x: 0;--sbb-popover-position-y: 0;--sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);--sbb-popover-arrow-position-x: 0;--sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));--sbb-popover-inset: 0 auto auto 0;--sbb-popover-border-radius: var(--sbb-border-radius-8x);--sbb-popover-padding: var(--sbb-spacing-fixed-4x);--sbb-popover-background: var(--sbb-color-white);--sbb-popover-color: var(--sbb-color-charcoal);--sbb-popover-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-popover-animation-easing: ease-out;--sbb-popover-transform: translateY(var(--sbb-spacing-fixed-2x));--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:block}:host([data-position=above]){--sbb-popover-transform: translateY(calc(var(--sbb-spacing-fixed-2x) * -1))}:host(:not([data-state=closed])){--sbb-popover-inset: 0}.sbb-popover:after,.sbb-popover__content:before{content:"";position:absolute;display:block;width:var(--sbb-popover-arrow-size);height:var(--sbb-popover-arrow-size);left:var(--sbb-popover-arrow-position-x);bottom:calc(100% - var(--sbb-popover-arrow-size) / 2);background-color:var(--sbb-popover-background);border-radius:var(--sbb-border-radius-2x) 0;transform:rotate(45deg)}.sbb-popover__container{position:fixed;inset:var(--sbb-popover-inset);pointer-events:none;z-index:var(--sbb-popover-z-index, var(--sbb-overlay-default-z-index));color:var(--sbb-popover-color)}.sbb-popover{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);display:none;position:var(--sbb-popover-position);pointer-events:all;top:var(--sbb-popover-position-y);bottom:unset;left:var(--sbb-popover-position-x);right:unset;border:none;border-radius:var(--sbb-popover-border-radius);padding:0;max-width:var(--sbb-popover-max-width);width:max-content;background-color:var(--sbb-popover-background);outline:none}.sbb-popover:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}:host([data-state]:not([data-state=closed])) .sbb-popover{display:block;animation-name:open;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}:host([data-state][data-state=closing]) .sbb-popover{pointer-events:none;animation-name:close;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}.sbb-popover:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);z-index:-1}@media (forced-colors: active){.sbb-popover:after{outline:var(--sbb-border-width-1x) solid CanvasText}}:host([data-position=above]) .sbb-popover:after{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@media (forced-colors: active){.sbb-popover{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-popover:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background-color:transparent}:host([data-position=below]) .sbb-popover:before{inset-block-start:calc(-1 * var(--sbb-spacing-fixed-6x))}:host([data-position=above]) .sbb-popover:before{inset-block-end:calc(-1 * var(--sbb-spacing-fixed-6x))}.sbb-popover__content{display:flex;gap:var(--sbb-spacing-fixed-4x);border-radius:var(--sbb-popover-border-radius);padding:var(--sbb-popover-padding);outline:none;background-color:var(--sbb-popover-background);overflow:hidden;flex-direction:row-reverse}:host([data-position=above]) .sbb-popover__content:before{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@keyframes open{0%{opacity:0;transform:var(--sbb-popover-transform)}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:var(--sbb-popover-transform)}}`;
+var S = Object.defineProperty, P = Object.getOwnPropertyDescriptor, n = (e, t, o, i) => {
+  for (var a = i > 1 ? void 0 : i ? P(t, o) : t, r = e.length - 1, l; r >= 0; r--)
+    (l = e[r]) && (a = (i ? l(t, o, a) : l(a)) || a);
+  return i && a && S(t, o, a), a;
 };
-const z = 16, D = 32;
-let M = 0;
-const v = /* @__PURE__ */ new Set();
+const F = 16, B = 32;
+let D = 0;
+const d = /* @__PURE__ */ new Set();
 let s = class extends E {
   constructor() {
-    super(...arguments), this.hideCloseButton = !1, this.hoverTrigger = !1, this.openDelay = 0, this.closeDelay = 0, this.willClose = new h(
+    super(...arguments), this.hideCloseButton = !1, this.hoverTrigger = !1, this.openDelay = 0, this.closeDelay = 0, this.willClose = new v(
       this,
       s.events.willClose
-    ), this.didClose = new h(
+    ), this.didClose = new v(
       this,
       s.events.didClose
-    ), this._skipCloseFocus = !1, this._focusHandler = new _(), this._hoverTrigger = !1, this._language = new x(this), this._pointerDownListener = (e) => {
-      this._isPointerDownEventOnPopover = c(this._overlay, e);
-    }, this._closeOnBackdropClick = (e) => {
-      !this._isPointerDownEventOnPopover && !c(this._overlay, e) && (this._nextFocusedElement = e.composedPath().filter((o) => o instanceof window.HTMLElement).find((o) => o.matches(w)), clearTimeout(this._closeTimeout), this.close());
-    }, this._onTriggerMouseEnter = () => {
-      this.state === "closed" || this.state === "closing" ? this._openTimeout = setTimeout(() => this.open(), this.openDelay) : clearTimeout(this._closeTimeout);
-    }, this._onTriggerMouseLeave = () => {
-      this.state === "opened" || this.state === "opening" ? this._closeTimeout = setTimeout(() => this.close(), this.closeDelay) : clearTimeout(this._openTimeout);
-    }, this._onOverlayMouseEnter = () => {
-      this.state !== "opening" && clearTimeout(this._closeTimeout);
-    }, this._onOverlayMouseLeave = () => {
-      this.state !== "opening" && (this._closeTimeout = setTimeout(() => this.close(), this.closeDelay));
+    ), this.h = !1, this.i = new w(), this.f = !1, this.o = new C(this), this.w = (e) => {
+      this.m = c(this.a, e);
+    }, this.x = (e) => {
+      !this.m && !c(this.a, e) && (this.g = e.composedPath().filter((t) => t instanceof window.HTMLElement).find((t) => t.matches(y)), clearTimeout(this.e), this.close());
+    }, this.t = () => {
+      this.state === "closed" || this.state === "closing" ? this.n = setTimeout(() => this.open(), this.openDelay) : clearTimeout(this.e);
+    }, this.u = () => {
+      this.state === "opened" || this.state === "opening" ? this.e = setTimeout(() => this.close(), this.closeDelay) : clearTimeout(this.n);
+    }, this.r = () => {
+      this.state !== "opening" && clearTimeout(this.e);
+    }, this.s = () => {
+      this.state !== "opening" && (this.e = setTimeout(() => this.close(), this.closeDelay));
     };
   }
   /** Opens the popover on trigger click. */
   open() {
     var e;
-    if (!(this.state !== "closed" && this.state !== "closing" || !this._overlay) && this.willOpen.emit()) {
-      for (const o of Array.from(v)) {
-        const t = o.getAttribute("data-state");
-        t && (t === "opened" || t === "opening") && o.close();
+    if (!(this.state !== "closed" && this.state !== "closing" || !this.a) && this.willOpen.emit()) {
+      for (const t of Array.from(d)) {
+        const o = t.getAttribute("data-state");
+        o && (o === "opened" || o === "opening") && t.close();
       }
-      this.state = "opening", this.inert = !0, this._setPopoverPosition(), (e = this._triggerElement) == null || e.setAttribute("aria-expanded", "true"), this._nextFocusedElement = void 0, this._skipCloseFocus = !1;
+      this.state = "opening", this.inert = !0, this.j(), (e = this.b) == null || e.setAttribute("aria-expanded", "true"), this.g = void 0, this.h = !1;
     }
   }
   /** Closes the popover. */
   close(e) {
-    var o;
-    this.state !== "opened" && this.state !== "opening" || (this._popoverCloseElement = e, this.willClose.emit({ closeTarget: e }) && (this.state = "closing", this.inert = !0, (o = this._triggerElement) == null || o.setAttribute("aria-expanded", "false")));
+    var t;
+    this.state !== "opened" && this.state !== "opening" || (this.l = e, this.willClose.emit({ closeTarget: e }) && (this.state = "closing", this.inert = !0, (t = this.b) == null || t.setAttribute("aria-expanded", "false")));
   }
   // Closes the popover on "Esc" key pressed and traps focus within the popover.
-  _onKeydownEvent(e) {
+  p(e) {
     if (this.state === "opened" && e.key === "Escape") {
       this.close();
       return;
     }
   }
   // Removes trigger click listener on trigger change.
-  _removeTriggerClickListener(e, o) {
-    var t, i;
-    e !== o && ((t = this._popoverController) == null || t.abort(), (i = this._openStateController) == null || i.abort(), this._configure());
+  q(e, t) {
+    var o, i;
+    e !== t && ((o = this.d) == null || o.abort(), (i = this.c) == null || i.abort(), this.k());
   }
   connectedCallback() {
-    super.connectedCallback(), this.id || (this.id = this.id || `sbb-popover-${++M}`), this._configure(), this.state = "closed", v.add(this);
+    super.connectedCallback(), this.id || (this.id = this.id || `sbb-popover-${++D}`), this.k(), this.state = "closed", d.add(this);
   }
   willUpdate(e) {
-    super.willUpdate(e), e.has("trigger") && this._removeTriggerClickListener(this.trigger, e.get("trigger")), e.has("hoverTrigger") && this._configure();
+    super.willUpdate(e), e.has("trigger") && this.q(this.trigger, e.get("trigger")), e.has("hoverTrigger") && this.k();
   }
   firstUpdated(e) {
-    super.firstUpdated(e), this._hoverTrigger && (this._overlay.addEventListener("mouseenter", () => this._onOverlayMouseEnter()), this._overlay.addEventListener("mouseleave", () => this._onOverlayMouseLeave()));
+    super.firstUpdated(e), this.f && (this.a.addEventListener("mouseenter", () => this.r()), this.a.addEventListener("mouseleave", () => this.s()));
   }
   disconnectedCallback() {
-    var e, o;
-    super.disconnectedCallback(), (e = this._popoverController) == null || e.abort(), (o = this._openStateController) == null || o.abort(), this._focusHandler.disconnect(), v.delete(this);
+    var e, t;
+    super.disconnectedCallback(), (e = this.d) == null || e.abort(), (t = this.c) == null || t.abort(), this.i.disconnect(), d.delete(this);
   }
   // Check if the trigger is valid and attach click event listeners.
-  _configure() {
+  k() {
     var e;
-    P(this._triggerElement), this.trigger && (this._triggerElement = C(this.trigger), this._triggerElement && (L(this._triggerElement, "dialog", this.id, this.state), this._hoverTrigger = this.hoverTrigger && !window.matchMedia("(pointer: coarse)").matches, (e = this._popoverController) == null || e.abort(), this._popoverController = new AbortController(), this._hoverTrigger ? (this._triggerElement.addEventListener("mouseenter", this._onTriggerMouseEnter, {
-      signal: this._popoverController.signal
-    }), this._triggerElement.addEventListener("mouseleave", this._onTriggerMouseLeave, {
-      signal: this._popoverController.signal
-    }), this._triggerElement.addEventListener(
+    A(this.b), this.trigger && (this.b = _(this.trigger), this.b && (L(this.b, "dialog", this.id, this.state), this.f = this.hoverTrigger && !window.matchMedia("(pointer: coarse)").matches, (e = this.d) == null || e.abort(), this.d = new AbortController(), this.f ? (this.b.addEventListener("mouseenter", this.t, {
+      signal: this.d.signal
+    }), this.b.addEventListener("mouseleave", this.u, {
+      signal: this.d.signal
+    }), this.b.addEventListener(
       "keydown",
-      (o) => {
-        (o.code === "Space" || o.code === "Enter") && this.open();
+      (t) => {
+        (t.code === "Space" || t.code === "Enter") && this.open();
       },
       {
-        signal: this._popoverController.signal
+        signal: this.d.signal
       }
-    )) : this._triggerElement.addEventListener(
+    )) : this.b.addEventListener(
       "click",
       () => {
         this.state === "closed" && this.open();
       },
       {
-        signal: this._popoverController.signal
+        signal: this.d.signal
       }
     )));
   }
-  _attachWindowEvents() {
-    this._openStateController = new AbortController(), document.addEventListener("scroll", () => this._setPopoverPosition(), {
+  v() {
+    this.c = new AbortController(), document.addEventListener("scroll", () => this.j(), {
       passive: !0,
-      signal: this._openStateController.signal
-    }), window.addEventListener("resize", () => this._setPopoverPosition(), {
+      signal: this.c.signal
+    }), window.addEventListener("resize", () => this.j(), {
       passive: !0,
-      signal: this._openStateController.signal
-    }), window.addEventListener("keydown", (e) => this._onKeydownEvent(e), {
-      signal: this._openStateController.signal
-    }), window.addEventListener("pointerdown", this._pointerDownListener, {
-      signal: this._openStateController.signal
-    }), window.addEventListener("pointerup", this._closeOnBackdropClick, {
-      signal: this._openStateController.signal
+      signal: this.c.signal
+    }), window.addEventListener("keydown", (e) => this.p(e), {
+      signal: this.c.signal
+    }), window.addEventListener("pointerdown", this.w, {
+      signal: this.c.signal
+    }), window.addEventListener("pointerup", this.x, {
+      signal: this.c.signal
     });
   }
   // Close the popover on click of any element that has the 'sbb-popover-close' attribute.
-  _closeOnSbbPopoverCloseClick(e) {
-    const o = T(e, "sbb-popover-close", this);
-    o && !o.hasAttribute("disabled") && (clearTimeout(this._closeTimeout), this.close(o));
+  y(e) {
+    const t = T(e, "sbb-popover-close", this);
+    t && !t.hasAttribute("disabled") && (clearTimeout(this.e), this.close(t));
   }
   // Set popover position (x, y) to '0' once the popover is closed and the transition ended to prevent the
   // viewport from overflowing. And set the focus to the first focusable element once the popover is open.
   // In rare cases it can be that the animationEnd event is triggered twice.
   // To avoid entering a corrupt state, exit when state is not expected.
-  _onPopoverAnimationEnd(e) {
-    var o, t, i, r;
+  z(e) {
+    var t, o, i, a;
     if (e.animationName === "open" && this.state === "opening")
-      this.state = "opened", this.didOpen.emit(), this.inert = !1, this._attachWindowEvents(), this._setPopoverFocus(), this._focusHandler.trap(this, {
-        postFilter: (a) => a !== this._overlay
+      this.state = "opened", this.didOpen.emit(), this.inert = !1, this.v(), this.A(), this.i.trap(this, {
+        postFilter: (r) => r !== this.a
       });
     else if (e.animationName === "close" && this.state === "closing") {
-      if (this.state = "closed", (t = (o = this._overlay) == null ? void 0 : o.firstElementChild) == null || t.scrollTo(0, 0), (i = this._overlay) == null || i.removeAttribute("tabindex"), !this._skipCloseFocus) {
-        const a = this._nextFocusedElement || this._triggerElement;
-        b(a), a == null || a.focus();
+      if (this.state = "closed", (o = (t = this.a) == null ? void 0 : t.firstElementChild) == null || o.scrollTo(0, 0), (i = this.a) == null || i.removeAttribute("tabindex"), !this.h) {
+        const r = this.g || this.b;
+        p(r), r == null || r.focus();
       }
-      this.didClose.emit({ closeTarget: this._popoverCloseElement }), (r = this._openStateController) == null || r.abort(), this._focusHandler.disconnect();
+      this.didClose.emit({ closeTarget: this.l }), (a = this.c) == null || a.abort(), this.i.disconnect();
     }
   }
   // Set focus on the first focusable element.
-  _setPopoverFocus() {
-    const e = this.shadowRoot.querySelector("[sbb-popover-close]") || y(
-      Array.from(this.children).filter((o) => o instanceof window.HTMLElement)
+  A() {
+    const e = this.shadowRoot.querySelector("[sbb-popover-close]") || x(
+      Array.from(this.children).filter((t) => t instanceof window.HTMLElement)
     );
-    e ? (b(e), e.focus()) : (this._overlay.setAttribute("tabindex", "0"), b(this._overlay), this._overlay.focus(), this._overlay.addEventListener(
+    e ? (p(e), e.focus()) : (this.a.setAttribute("tabindex", "0"), p(this.a), this.a.focus(), this.a.addEventListener(
       "blur",
       () => {
         setTimeout(() => {
-          var o;
-          document.visibilityState !== "hidden" && ((o = this._overlay) == null || o.removeAttribute("tabindex"), (this.state === "opened" || this.state === "opening") && (this._skipCloseFocus = !0), this.close());
+          var t;
+          document.visibilityState !== "hidden" && ((t = this.a) == null || t.removeAttribute("tabindex"), (this.state === "opened" || this.state === "opening") && (this.h = !0), this.close());
         });
       },
       {
-        signal: this._openStateController.signal
+        signal: this.c.signal
       }
     ));
   }
-  _setPopoverPosition() {
-    if (!this._overlay || !this._triggerElement)
+  j() {
+    if (!this.a || !this.b)
       return;
-    const e = O(
-      this._overlay,
-      this._triggerElement,
+    const e = z(
+      this.a,
+      this.b,
       this.shadowRoot.querySelector(".sbb-popover__container"),
       {
-        verticalOffset: z,
-        horizontalOffset: D,
+        verticalOffset: F,
+        horizontalOffset: B,
         centered: !0,
         responsiveHeight: !0
       }
     );
     this.setAttribute("data-position", e.alignment.vertical);
-    const o = this._triggerElement.getBoundingClientRect().left - e.left + this._triggerElement.clientWidth / 2 - 8;
-    this.style.setProperty("--sbb-popover-position-x", `${e.left}px`), this.style.setProperty("--sbb-popover-position-y", `${e.top}px`), this.style.setProperty("--sbb-popover-arrow-position-x", `${o}px`);
+    const t = this.b.getBoundingClientRect().left - e.left + this.b.clientWidth / 2 - 8;
+    this.style.setProperty("--sbb-popover-position-x", `${e.left}px`), this.style.setProperty("--sbb-popover-position-y", `${e.top}px`), this.style.setProperty("--sbb-popover-arrow-position-x", `${t}px`);
   }
   render() {
-    const e = d`
+    const e = h`
       <span class="sbb-popover__close">
         <sbb-secondary-button
-          aria-label=${this.accessibilityCloseLabel || k[this._language.current]}
+          aria-label=${this.accessibilityCloseLabel || k[this.o.current]}
           size="s"
           type="button"
           icon-name="cross-small"
@@ -192,19 +192,19 @@ let s = class extends E {
         ></sbb-secondary-button>
       </span>
     `;
-    return d`
+    return h`
       <div class="sbb-popover__container">
         <div
-          @animationend=${(o) => this._onPopoverAnimationEnd(o)}
+          @animationend=${(t) => this.z(t)}
           class="sbb-popover"
           role="tooltip"
-          ${m((o) => this._overlay = o)}
+          ${g((t) => this.a = t)}
         >
           <div
-            @click=${(o) => this._closeOnSbbPopoverCloseClick(o)}
+            @click=${(t) => this.y(t)}
             class="sbb-popover__content"
           >
-            ${!this.hideCloseButton && !this._hoverTrigger ? e : g}
+            ${!this.hideCloseButton && !this.f ? e : u}
             <span>
               <slot>No content</slot>
             </span>
@@ -214,27 +214,27 @@ let s = class extends E {
     `;
   }
 };
-s.styles = S;
+s.styles = O;
 n([
-  l()
+  b()
 ], s.prototype, "trigger", 2);
 n([
-  l({ attribute: "hide-close-button", type: Boolean })
+  b({ attribute: "hide-close-button", type: Boolean })
 ], s.prototype, "hideCloseButton", 2);
 n([
-  l({ attribute: "hover-trigger", type: Boolean })
+  b({ attribute: "hover-trigger", type: Boolean })
 ], s.prototype, "hoverTrigger", 2);
 n([
-  l({ attribute: "open-delay", type: Number })
+  b({ attribute: "open-delay", type: Number })
 ], s.prototype, "openDelay", 2);
 n([
-  l({ attribute: "close-delay", type: Number })
+  b({ attribute: "close-delay", type: Number })
 ], s.prototype, "closeDelay", 2);
 n([
-  l({ attribute: "accessibility-close-label" })
+  b({ attribute: "accessibility-close-label" })
 ], s.prototype, "accessibilityCloseLabel", 2);
 s = n([
-  f("sbb-popover")
+  m("sbb-popover")
 ], s);
 export {
   s as SbbPopoverElement