@sbb-esta/lyne-elements 3.0.0-next.1 → 3.0.0-next.2

package/popover/popover/popover.component.js

@@ -1,51 +1,36 @@
-var q = (s) => {
-  throw TypeError(s);
+var R = (i) => {
+  throw TypeError(i);
 };
-var W = (s, i, r) => i.has(s) || q("Cannot " + r);
-var h = (s, i, r) => (W(s, i, "read from private field"), r ? r.call(s) : i.get(s)), c = (s, i, r) => i.has(s) ? q("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, r), n = (s, i, r, b) => (W(s, i, "write to private field"), b ? b.call(s, r) : i.set(s, r), r);
-import { __runInitializers as l, __esDecorate as d } from "tslib";
-import { css as X, isServer as T, html as j, nothing as G } from "lit";
-import { customElement as J, property as y } from "lit/decorators.js";
-import { ref as K } from "lit/directives/ref.js";
-import { SbbFocusTrapController as ee, IS_FOCUSABLE_QUERY as te, sbbInputModalityDetector as oe } from "../../core/a11y.js";
-import { SbbOpenCloseBaseElement as se } from "../../core/base-elements.js";
-import { SbbMediaQueryPointerCoarse as ie, SbbEscapableOverlayController as re, SbbLanguageController as ae } from "../../core/controllers.js";
-import { idReference as ne, forceType as w } from "../../core/decorators.js";
-import { isZeroAnimationDuration as le } from "../../core/dom.js";
-import { EventEmitter as Q, composedPathHasAttribute as be } from "../../core/eventing.js";
-import { i18nClosePopover as pe } from "../../core/i18n.js";
-import { SbbHydrationMixin as he } from "../../core/mixins.js";
-import { isEventOnElement as V, removeAriaOverlayTriggerAttributes as ce, setAriaOverlayTriggerAttributes as de, getElementPosition as ve } from "../../core/overlay.js";
+var N = (i, r, a) => r.has(i) || R("Cannot " + a);
+var v = (i, r, a) => (N(i, r, "read from private field"), a ? a.call(i) : r.get(i)), g = (i, r, a) => r.has(i) ? R("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(i) : r.set(i, a), l = (i, r, a, n) => (N(i, r, "write to private field"), n ? n.call(i, a) : r.set(i, a), a);
+import { __runInitializers as b, __esDecorate as u } from "tslib";
+import { css as Z, isServer as O, html as S, nothing as j } from "lit";
+import { property as T, customElement as q } from "lit/decorators.js";
+import { ref as W } from "lit/directives/ref.js";
+import { SbbFocusTrapController as Q, IS_FOCUSABLE_QUERY as V, sbbInputModalityDetector as X, isFakeMousedownFromScreenReader as G } from "../../core/a11y.js";
+import { SbbOpenCloseBaseElement as k } from "../../core/base-elements.js";
+import { SbbMediaQueryPointerCoarse as J, SbbEscapableOverlayController as K, SbbLanguageController as ee } from "../../core/controllers.js";
+import { idReference as te, forceType as x } from "../../core/decorators.js";
+import { isZeroAnimationDuration as oe } from "../../core/dom.js";
+import { EventEmitter as H, composedPathHasAttribute as se } from "../../core/eventing.js";
+import { i18nClosePopover as ie } from "../../core/i18n.js";
+import { SbbHydrationMixin as re } from "../../core/mixins.js";
+import { isEventOnElement as Y, removeAriaOverlayTriggerAttributes as ae, setAriaOverlayTriggerAttributes as ne, getElementPosition as le } from "../../core/overlay.js";
 import "../../button/secondary-button.js";
-const ge = X`*,: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-duration, 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);outline:none!important;display:none}:host([data-state]:not([data-state=closed])){display:block;--sbb-popover-inset: 0}:host([data-position=above]){--sbb-popover-transform: translateY(calc(var(--sbb-spacing-fixed-2x) * -1))}.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}:host(:focus-visible) .sbb-popover{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, 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{z-index:-1;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)}@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)}}`, ue = 16, _e = 32;
-let me = 0;
-const E = /* @__PURE__ */ new Set(), fe = T ? !1 : matchMedia(ie).matches;
-let Ie = (() => {
-  var v, g, u, _, m, f, a;
-  let s = [J("sbb-popover")], i, r = [], b, k = he(se), D, L = [], P = [], O, S = [], z = [], A, B = [], F = [], I, M = [], $ = [], R, U = [], N = [], H, Y = [], Z = [];
-  var C = (a = class extends k {
+const be = Z`*,: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-duration, 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);outline:none!important;display:none}:host([data-state]:not([data-state=closed])){display:block;--sbb-popover-inset: 0}:host([data-position=above]){--sbb-popover-transform: translateY(calc(var(--sbb-spacing-fixed-2x) * -1))}.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}:host(:focus-visible) .sbb-popover{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, 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{z-index:-1;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)}@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;inset: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)}}`, pe = 16, ce = 32;
+let he = 0;
+const L = /* @__PURE__ */ new Set(), de = O ? !1 : matchMedia(J).matches;
+let ve = (() => {
+  var h, p;
+  let i = re(k), r, a = [], n = [];
+  return p = class extends i {
     constructor() {
       super(...arguments);
-      c(this, v);
-      c(this, g);
-      c(this, u);
-      c(this, _);
-      c(this, m);
-      c(this, f);
-      n(this, v, l(this, L, null)), n(this, g, (l(this, P), l(this, S, !1))), n(this, u, (l(this, z), l(this, B, !1))), n(this, _, (l(this, F), l(this, M, 0))), n(this, m, (l(this, $), l(this, U, 0))), n(this, f, (l(this, N), l(this, Y, ""))), this.willClose = (l(this, Z), new Q(this, C.events.willClose, { cancelable: !0 })), this.didClose = new Q(this, C.events.didClose, { cancelable: !0 }), this._skipCloseFocus = !1, this._hoverTrigger = !1, this._escapableOverlayController = new re(this), this._focusTrapController = new ee(this), this._language = new ae(this), this._pointerDownListener = (t) => {
-        this._isPointerDownEventOnPopover = V(this._overlay, t);
-      }, this._closeOnBackdropClick = (t) => {
-        !this._isPointerDownEventOnPopover && !V(this._overlay, t) && (this._nextFocusedElement = t.composedPath().filter((e) => e instanceof window.HTMLElement).find((e) => e.matches(te)), clearTimeout(this._closeTimeout), this.close());
-      }, this._onTriggerMouseEnter = () => {
-        this.state === "closed" || this.state === "closing" ? this._openTimeout = setTimeout(() => {
-          oe.reset(), 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));
+      g(this, h);
+      l(this, h, b(this, a, null)), this.willClose = (b(this, n), new H(this, k.events.willClose, { cancelable: !0 })), this.didClose = new H(this, k.events.didClose, { cancelable: !0 }), this._skipCloseFocus = !1, this._escapableOverlayController = new K(this), this._focusTrapController = new Q(this), this._pointerDownListener = (e) => {
+        this._isPointerDownEventOnPopover = Y(this.overlay, e);
+      }, this._closeOnBackdropClick = (e) => {
+        !this._isPointerDownEventOnPopover && !Y(this.overlay, e) && (this._nextFocusedElement = e.composedPath().filter((s) => s instanceof window.HTMLElement).find((s) => s.matches(V)), clearTimeout(this.closeTimeout), this.close());
       };
     }
     /**
@@ -54,108 +39,61 @@ let Ie = (() => {
      * For attribute usage, provide an id reference.
      */
     get trigger() {
-      return h(this, v);
-    }
-    set trigger(t) {
-      n(this, v, t);
-    }
-    /** Whether the close button should be hidden. */
-    get hideCloseButton() {
-      return h(this, g);
-    }
-    set hideCloseButton(t) {
-      n(this, g, t);
-    }
-    /** Whether the popover should be triggered on hover. */
-    get hoverTrigger() {
-      return h(this, u);
-    }
-    set hoverTrigger(t) {
-      n(this, u, t);
-    }
-    /** Open the popover after a certain delay. */
-    get openDelay() {
-      return h(this, _);
+      return v(this, h);
     }
-    set openDelay(t) {
-      n(this, _, t);
-    }
-    /** Close the popover after a certain delay. */
-    get closeDelay() {
-      return h(this, m);
-    }
-    set closeDelay(t) {
-      n(this, m, t);
-    }
-    /** This will be forwarded as aria-label to the close button element. */
-    get accessibilityCloseLabel() {
-      return h(this, f);
-    }
-    set accessibilityCloseLabel(t) {
-      n(this, f, t);
+    set trigger(e) {
+      l(this, h, e);
     }
     /** Opens the popover on trigger click. */
     open() {
-      var t, e;
-      if (!(this.state !== "closed" && this.state !== "closing" || !this._overlay || !this.willOpen.emit())) {
-        for (const o of E) {
-          const p = o.getAttribute("data-state");
-          p && (p === "opened" || p === "opening") && o.close();
+      if (!(this.state !== "closed" && this.state !== "closing" || !this.overlay || !this.willOpen.emit())) {
+        for (const e of L) {
+          const s = e.getAttribute("data-state");
+          s && (s === "opened" || s === "opening") && e.close();
         }
-        (t = this.showPopover) == null || t.call(this), 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._isZeroAnimationDuration() && this._handleOpening();
+        this.showPopover?.(), this.state = "opening", this.inert = !0, this._setPopoverPosition(), this._triggerElement?.setAttribute("aria-expanded", "true"), this._nextFocusedElement = void 0, this._skipCloseFocus = !1, this._isZeroAnimationDuration() && this._handleOpening();
       }
     }
     /** Closes the popover. */
-    close(t) {
-      var e;
-      this.state !== "opened" && this.state !== "opening" || (this._popoverCloseElement = t, this.willClose.emit({ closeTarget: t }) && (this.state = "closing", this.inert = !0, (e = this._triggerElement) == null || e.setAttribute("aria-expanded", "false"), this._isZeroAnimationDuration() && this._handleClosing()));
+    close(e) {
+      this.state !== "opened" && this.state !== "opening" || (this._popoverCloseElement = e, this.willClose.emit({ closeTarget: e }) && (this.state = "closing", this.inert = !0, this._triggerElement?.setAttribute("aria-expanded", "false"), this._isZeroAnimationDuration() && this._handleClosing()));
     }
     _isZeroAnimationDuration() {
-      return le(this, "--sbb-popover-animation-duration");
+      return oe(this, "--sbb-popover-animation-duration");
     }
     _handleClosing() {
-      var t, e, o, p;
-      if (this.state = "closed", (t = this.hidePopover) == null || t.call(this), (o = (e = this._overlay) == null ? void 0 : e.firstElementChild) == null || o.scrollTo(0, 0), this.removeAttribute("tabindex"), !this._skipCloseFocus) {
-        const x = this._nextFocusedElement || this._triggerElement;
-        x == null || x.focus();
-      }
-      this._escapableOverlayController.disconnect(), this.didClose.emit({ closeTarget: this._popoverCloseElement }), (p = this._openStateController) == null || p.abort(), this._focusTrapController.enabled = !1;
+      this.state = "closed", this.hidePopover?.(), this.overlay?.firstElementChild?.scrollTo(0, 0), this.removeAttribute("tabindex"), this._skipCloseFocus || (this._nextFocusedElement || this._triggerElement)?.focus(), this._escapableOverlayController.disconnect(), this.didClose.emit({ closeTarget: this._popoverCloseElement }), this._openStateController?.abort(), this._focusTrapController.enabled = !1;
     }
     _handleOpening() {
       this.state = "opened", this.inert = !1, this._attachWindowEvents(), this._escapableOverlayController.connect(), this._setPopoverFocus(), this._focusTrapController.enabled = !0, this.didOpen.emit();
     }
     connectedCallback() {
-      this.popover = "manual", super.connectedCallback(), this.id || (this.id = `sbb-popover-${++me}`), this.state = "closed", E.add(this), this.hasUpdated && this._configureTrigger();
+      this.popover = "manual", super.connectedCallback(), this.id ||= `sbb-popover-${++he}`, this.state = "closed", L.add(this), this.hasUpdated && this._configureTrigger();
     }
-    requestUpdate(t, e, o) {
-      super.requestUpdate(t, e, o), !T && (!t || t === "trigger" || t === "hoverTrigger") && this.hasUpdated && this._configureTrigger();
+    requestUpdate(e, s, m) {
+      super.requestUpdate(e, s, m), !O && (!e || e === "trigger" || e === "hoverTrigger") && this.hasUpdated && this._configureTrigger();
     }
-    firstUpdated(t) {
-      super.firstUpdated(t), this._configureTrigger(), this._hoverTrigger && (this._overlay.addEventListener("mouseenter", () => this._onOverlayMouseEnter()), this._overlay.addEventListener("mouseleave", () => this._onOverlayMouseLeave()));
+    firstUpdated(e) {
+      super.firstUpdated(e), this._configureTrigger();
     }
     disconnectedCallback() {
-      var t, e;
-      super.disconnectedCallback(), this._triggerElement = null, (t = this._triggerAbortController) == null || t.abort(), (e = this._openStateController) == null || e.abort(), E.delete(this);
+      super.disconnectedCallback(), this._triggerElement = null, this._triggerAbortController?.abort(), this._openStateController?.abort(), L.delete(this);
     }
     // Check if the trigger is valid and attach click event listeners.
     _configureTrigger() {
-      var o;
-      if (T)
-        return;
-      if (this.hydrationRequired) {
-        this.hydrationComplete.then(() => this._configureTrigger());
-        return;
+      if (!O) {
+        if (this.hydrationRequired) {
+          this.hydrationComplete.then(() => this._configureTrigger());
+          return;
+        }
+        this.configureTrigger(this._triggerElement ?? null);
       }
-      const t = this.hoverTrigger && !fe;
-      if (this.trigger === this._triggerElement && t === this._hoverTrigger || ((o = this._triggerAbortController) == null || o.abort(), ce(this._triggerElement), this._triggerElement = this.trigger, this._hoverTrigger = t, !this._triggerElement))
-        return;
-      de(this._triggerElement, "dialog", this.id, this.state);
-      const { signal: e } = this._triggerAbortController = new AbortController();
-      this._hoverTrigger ? (this._triggerElement.addEventListener("mouseenter", this._onTriggerMouseEnter, { signal: e }), this._triggerElement.addEventListener("mouseleave", this._onTriggerMouseLeave, { signal: e }), this._triggerElement.addEventListener("keydown", (p) => {
-        (p.code === "Space" || p.code === "Enter") && this.open();
-      }, { signal: e })) : this._triggerElement.addEventListener("click", () => {
-        this.state === "closed" && this.open();
-      }, { signal: e });
+    }
+    configureTrigger(e) {
+      this._triggerAbortController?.abort(), ae(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (ne(this._triggerElement, "dialog", this.id, this.state), this._triggerAbortController = new AbortController(), this.registerTriggerListeners(this._triggerAbortController.signal));
+    }
+    registerTriggerListeners(e) {
+      this._triggerElement.addEventListener("click", () => this.open(), { signal: e });
     }
     _attachWindowEvents() {
       this._openStateController = new AbortController(), document.addEventListener("scroll", () => this._setPopoverPosition(), {
@@ -174,16 +112,16 @@ let Ie = (() => {
       });
     }
     // Close the popover on click of any element that has the 'sbb-popover-close' attribute.
-    _closeOnSbbPopoverCloseClick(t) {
-      const e = be(t, "sbb-popover-close", this);
-      e && !e.hasAttribute("disabled") && (clearTimeout(this._closeTimeout), this.close(e));
+    _closeOnSbbPopoverCloseClick(e) {
+      const s = se(e, "sbb-popover-close", this);
+      s && !s.hasAttribute("disabled") && (clearTimeout(this.closeTimeout), this.close(s));
     }
     // 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(t) {
-      t.animationName === "open" && this.state === "opening" ? this._handleOpening() : t.animationName === "close" && this.state === "closing" && this._handleClosing();
+    _onPopoverAnimationEnd(e) {
+      e.animationName === "open" && this.state === "opening" ? this._handleOpening() : e.animationName === "close" && this.state === "closing" && this._handleClosing();
     }
     // Set focus on the first focusable element.
     _setPopoverFocus() {
@@ -196,69 +134,157 @@ let Ie = (() => {
       }));
     }
     _setPopoverPosition() {
-      if (!this._overlay || !this._triggerElement)
+      if (!this.overlay || !this._triggerElement)
         return;
-      const t = ve(this._overlay, this._triggerElement, this.shadowRoot.querySelector(".sbb-popover__container"), {
-        verticalOffset: ue,
-        horizontalOffset: _e,
+      const e = le(this.overlay, this._triggerElement, this.shadowRoot.querySelector(".sbb-popover__container"), {
+        verticalOffset: pe,
+        horizontalOffset: ce,
         centered: !0,
         responsiveHeight: !0
       });
-      this.setAttribute("data-position", t.alignment.vertical);
-      const e = this._triggerElement.getBoundingClientRect().left - t.left + this._triggerElement.clientWidth / 2 - 8;
-      this.style.setProperty("--sbb-popover-position-x", `${t.left}px`), this.style.setProperty("--sbb-popover-position-y", `${t.top}px`), this.style.setProperty("--sbb-popover-arrow-position-x", `${e}px`);
+      this.setAttribute("data-position", e.alignment.vertical);
+      const s = 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", `${s}px`);
     }
     render() {
-      const t = j`
-      <span class="sbb-popover__close">
-        <sbb-secondary-button
-          aria-label=${this.accessibilityCloseLabel || pe[this._language.current]}
-          size="s"
-          type="button"
-          icon-name="cross-small"
-          sbb-popover-close
-        ></sbb-secondary-button>
-      </span>
-    `;
-      return j`
+      return S`
       <div class="sbb-popover__container">
         <div
           @animationend=${this._onPopoverAnimationEnd}
           class="sbb-popover"
           role="tooltip"
-          ${K((e) => this._overlay = e)}
+          ${W((e) => this.overlay = e)}
         >
           <div
             @click=${(e) => this._closeOnSbbPopoverCloseClick(e)}
             class="sbb-popover__content"
           >
-            ${!this.hideCloseButton && !this._hoverTrigger ? t : G}
-            <span>
-              <slot>No content</slot>
-            </span>
+            ${this.renderContent()}
           </div>
         </div>
       </div>
     `;
     }
-  }, v = new WeakMap(), g = new WeakMap(), u = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), f = new WeakMap(), b = a, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(k[Symbol.metadata] ?? null) : void 0;
-    D = [ne(), y()], O = [w(), y({ attribute: "hide-close-button", type: Boolean })], A = [w(), y({ attribute: "hover-trigger", type: Boolean })], I = [w(), y({ attribute: "open-delay", type: Number })], R = [w(), y({ attribute: "close-delay", type: Number })], H = [w(), y({ attribute: "accessibility-close-label" })], d(a, null, D, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (e) => "trigger" in e, get: (e) => e.trigger, set: (e, o) => {
-      e.trigger = o;
-    } }, metadata: t }, L, P), d(a, null, O, { kind: "accessor", name: "hideCloseButton", static: !1, private: !1, access: { has: (e) => "hideCloseButton" in e, get: (e) => e.hideCloseButton, set: (e, o) => {
-      e.hideCloseButton = o;
-    } }, metadata: t }, S, z), d(a, null, A, { kind: "accessor", name: "hoverTrigger", static: !1, private: !1, access: { has: (e) => "hoverTrigger" in e, get: (e) => e.hoverTrigger, set: (e, o) => {
-      e.hoverTrigger = o;
-    } }, metadata: t }, B, F), d(a, null, I, { kind: "accessor", name: "openDelay", static: !1, private: !1, access: { has: (e) => "openDelay" in e, get: (e) => e.openDelay, set: (e, o) => {
-      e.openDelay = o;
-    } }, metadata: t }, M, $), d(a, null, R, { kind: "accessor", name: "closeDelay", static: !1, private: !1, access: { has: (e) => "closeDelay" in e, get: (e) => e.closeDelay, set: (e, o) => {
-      e.closeDelay = o;
-    } }, metadata: t }, U, N), d(a, null, H, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (e) => "accessibilityCloseLabel" in e, get: (e) => e.accessibilityCloseLabel, set: (e, o) => {
-      e.accessibilityCloseLabel = o;
-    } }, metadata: t }, Y, Z), d(null, i = { value: b }, s, { kind: "class", name: b.name, metadata: t }, null, r), C = b = i.value, t && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), a.styles = ge, l(b, r), a);
-  return C = b;
+  }, h = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    r = [te(), T()], u(p, null, r, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (s) => "trigger" in s, get: (s) => s.trigger, set: (s, m) => {
+      s.trigger = m;
+    } }, metadata: e }, a, n), e && Object.defineProperty(p, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), p.styles = be, p;
+})(), Ae = (() => {
+  var f, _, y, w, C, c;
+  let i = [q("sbb-popover")], r, a = [], n, h = ve, p, D = [], E = [], e, s = [], m = [], A, P = [], z = [], F, B = [], I = [], M, U = [], $ = [];
+  return c = class extends h {
+    constructor() {
+      super(...arguments);
+      g(this, f);
+      g(this, _);
+      g(this, y);
+      g(this, w);
+      g(this, C);
+      l(this, f, b(this, D, !1)), l(this, _, (b(this, E), b(this, s, !1))), l(this, y, (b(this, m), b(this, P, 0))), l(this, w, (b(this, z), b(this, B, 0))), l(this, C, (b(this, I), b(this, U, ""))), this._hoverTrigger = (b(this, $), !1), this._language = new ee(this), this._overlayAbortController = null, this._onTriggerMouseEnter = () => {
+        this.state === "closed" || this.state === "closing" ? this._openTimeout = setTimeout(() => {
+          X.reset(), 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));
+      };
+    }
+    /** Whether the close button should be hidden. */
+    get hideCloseButton() {
+      return v(this, f);
+    }
+    set hideCloseButton(o) {
+      l(this, f, o);
+    }
+    /** Whether the popover should be triggered on hover. */
+    get hoverTrigger() {
+      return v(this, _);
+    }
+    set hoverTrigger(o) {
+      l(this, _, o);
+    }
+    /** Open the popover after a certain delay. */
+    get openDelay() {
+      return v(this, y);
+    }
+    set openDelay(o) {
+      l(this, y, o);
+    }
+    /** Close the popover after a certain delay. */
+    get closeDelay() {
+      return v(this, w);
+    }
+    set closeDelay(o) {
+      l(this, w, o);
+    }
+    /** This will be forwarded as aria-label to the close button element. */
+    get accessibilityCloseLabel() {
+      return v(this, C);
+    }
+    set accessibilityCloseLabel(o) {
+      l(this, C, o);
+    }
+    configureTrigger(o) {
+      const t = this.hoverTrigger && !de;
+      this.trigger === o && t === this._hoverTrigger || (this._hoverTrigger !== t && (this._hoverTrigger = t, this._registerOverlayListeners()), super.configureTrigger(o));
+    }
+    _registerOverlayListeners() {
+      this._overlayAbortController?.abort(), this._hoverTrigger && (this._overlayAbortController = new AbortController(), this.overlay?.addEventListener("mouseenter", () => this._onOverlayMouseEnter(), {
+        signal: this._overlayAbortController.signal
+      }), this.overlay?.addEventListener("mouseleave", () => this._onOverlayMouseLeave(), {
+        signal: this._overlayAbortController.signal
+      }));
+    }
+    registerTriggerListeners(o) {
+      this._hoverTrigger && this.trigger ? (this.trigger.addEventListener("mouseenter", this._onTriggerMouseEnter, { signal: o }), this.trigger.addEventListener("mouseleave", this._onTriggerMouseLeave, { signal: o }), this.trigger.addEventListener("keydown", (t) => {
+        (t.code === "Space" || t.code === "Enter") && this.open();
+      }, { signal: o }), this.trigger.addEventListener("mousedown", (t) => {
+        G(t) && this.open();
+      }, { signal: o })) : super.registerTriggerListeners(o);
+    }
+    firstUpdated(o) {
+      super.firstUpdated(o), this._registerOverlayListeners();
+    }
+    renderContent() {
+      const o = S`
+      <span class="sbb-popover__close">
+        <sbb-secondary-button
+          aria-label=${this.accessibilityCloseLabel || ie[this._language.current]}
+          size="s"
+          type="button"
+          icon-name="cross-small"
+          sbb-popover-close
+        ></sbb-secondary-button>
+      </span>
+    `;
+      return S`
+      ${!this.hideCloseButton && !this._hoverTrigger ? o : j}
+      <span>
+        <slot>No content</slot>
+      </span>
+    `;
+    }
+  }, f = new WeakMap(), _ = new WeakMap(), y = new WeakMap(), w = new WeakMap(), C = new WeakMap(), n = c, (() => {
+    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
+    p = [x(), T({ attribute: "hide-close-button", type: Boolean })], e = [x(), T({ attribute: "hover-trigger", type: Boolean })], A = [x(), T({ attribute: "open-delay", type: Number })], F = [x(), T({ attribute: "close-delay", type: Number })], M = [x(), T({ attribute: "accessibility-close-label" })], u(c, null, p, { kind: "accessor", name: "hideCloseButton", static: !1, private: !1, access: { has: (t) => "hideCloseButton" in t, get: (t) => t.hideCloseButton, set: (t, d) => {
+      t.hideCloseButton = d;
+    } }, metadata: o }, D, E), u(c, null, e, { kind: "accessor", name: "hoverTrigger", static: !1, private: !1, access: { has: (t) => "hoverTrigger" in t, get: (t) => t.hoverTrigger, set: (t, d) => {
+      t.hoverTrigger = d;
+    } }, metadata: o }, s, m), u(c, null, A, { kind: "accessor", name: "openDelay", static: !1, private: !1, access: { has: (t) => "openDelay" in t, get: (t) => t.openDelay, set: (t, d) => {
+      t.openDelay = d;
+    } }, metadata: o }, P, z), u(c, null, F, { kind: "accessor", name: "closeDelay", static: !1, private: !1, access: { has: (t) => "closeDelay" in t, get: (t) => t.closeDelay, set: (t, d) => {
+      t.closeDelay = d;
+    } }, metadata: o }, B, I), u(c, null, M, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (t) => "accessibilityCloseLabel" in t, get: (t) => t.accessibilityCloseLabel, set: (t, d) => {
+      t.accessibilityCloseLabel = d;
+    } }, metadata: o }, U, $), u(null, r = { value: n }, i, { kind: "class", name: n.name, metadata: o }, null, a), n = r.value, o && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o }), b(n, a);
+  })(), n;
 })();
 export {
-  Ie as SbbPopoverElement
+  ve as SbbPopoverBaseElement,
+  Ae as SbbPopoverElement
 };

package/popover/popover-trigger/popover-trigger.component.js

@@ -5,7 +5,7 @@ import { SbbButtonBaseElement as v } from "../../core/base-elements.js";
 import { hostContext as i } from "../../core/dom.js";
 import { SbbDisabledTabIndexActionMixin as m, SbbNegativeMixin as p } from "../../core/mixins.js";
 import { SbbIconNameMixin as h } from "../../icon.js";
-const g = c`*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-popover-color: inherit}@media (forced-colors: active){:host{--sbb-popover-color: ButtonText !important}}@media (any-hover: hover){:host(:hover){--sbb-popover-color: var(--sbb-color-iron)}:host(:hover[negative]){--sbb-popover-color: var(--sbb-color-cloud)}}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:is(:active,[data-active])){--sbb-popover-color: var(--sbb-color-anthracite)}:host(:is(:active,[data-active])[negative]){--sbb-popover-color: var(--sbb-color-cement)}:host(:is(:disabled,[disabled-interactive])){pointer-events:none;--sbb-popover-color: var(--sbb-color-graphite)}@media (forced-colors: active){:host(:is(:disabled,[disabled-interactive])){--sbb-popover-color: GrayText !important}}:host(:is(:disabled,[disabled-interactive])[negative]){--sbb-popover-color: var(--sbb-color-smoke)}:host([data-icon-small]){display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host([data-icon-small]){--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host([data-icon-small]) .sbb-popover-trigger{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host([data-icon-small]) .sbb-popover-trigger:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([data-icon-small][negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host([data-icon-small]:is(:disabled,[disabled-interactive])) .sbb-popover-trigger{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host([data-icon-small]:is(:disabled,[disabled-interactive])) .sbb-popover-trigger:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host([data-icon-small]:focus-visible) .sbb-popover-trigger:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}@media (any-hover: hover){:host([data-icon-small]:not(:disabled,[disabled-interactive],active):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host([data-icon-small]:not(:disabled,[disabled-interactive],active):hover) .sbb-popover-trigger:before{background-color:var(--sbb-button-color-hover-background)}}:host([data-icon-small]:is(active)) .sbb-popover-trigger:before{background-color:var(--sbb-button-color-active-background)}:host(:not([data-icon-small])) .sbb-popover-trigger{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;display:flex;cursor:pointer;color:var(--sbb-popover-color)}:host(:focus-visible:not([data-icon-small])) .sbb-popover-trigger{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-4x)}sbb-icon{min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small)}`;
+const g = c`*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-popover-color: inherit}@media (forced-colors: active){:host{--sbb-popover-color: ButtonText !important}}@media (any-hover: hover){:host(:hover){--sbb-popover-color: var(--sbb-color-iron)}:host(:hover[negative]){--sbb-popover-color: var(--sbb-color-cloud)}}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:is(:active,[data-active])){--sbb-popover-color: var(--sbb-color-anthracite)}:host(:is(:active,[data-active])[negative]){--sbb-popover-color: var(--sbb-color-cement)}:host(:is(:disabled,[disabled-interactive])){pointer-events:none;--sbb-popover-color: var(--sbb-color-graphite)}@media (forced-colors: active){:host(:is(:disabled,[disabled-interactive])){--sbb-popover-color: GrayText !important}}:host(:is(:disabled,[disabled-interactive])[negative]){--sbb-popover-color: var(--sbb-color-smoke)}:host([data-icon-small]){display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host([data-icon-small]){--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host([data-icon-small]) .sbb-popover-trigger{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host([data-icon-small]) .sbb-popover-trigger:before{position:absolute;content:"";inset:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([data-icon-small][negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host([data-icon-small]:is(:disabled,[disabled-interactive])) .sbb-popover-trigger{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host([data-icon-small]:is(:disabled,[disabled-interactive])) .sbb-popover-trigger:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host([data-icon-small]:focus-visible) .sbb-popover-trigger:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}@media (any-hover: hover){:host([data-icon-small]:not(:disabled,[disabled-interactive],active):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host([data-icon-small]:not(:disabled,[disabled-interactive],active):hover) .sbb-popover-trigger:before{background-color:var(--sbb-button-color-hover-background)}}:host([data-icon-small]:is(active)) .sbb-popover-trigger:before{background-color:var(--sbb-button-color-active-background)}:host(:not([data-icon-small])) .sbb-popover-trigger{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;display:flex;cursor:pointer;color:var(--sbb-popover-color)}:host(:focus-visible:not([data-icon-small])) .sbb-popover-trigger{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-4x)}sbb-icon{min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small)}`;
 let T = (() => {
   var t;
   let s = [u("sbb-popover-trigger")], b, e = [], o, a = m(p(h(v)));

package/popover/popover.js

@@ -1,4 +1,5 @@
-import { SbbPopoverElement as r } from "./popover/popover.component.js";
+import { SbbPopoverBaseElement as b, SbbPopoverElement as r } from "./popover/popover.component.js";
 export {
+  b as SbbPopoverBaseElement,
   r as SbbPopoverElement
 };

package/popover.js

@@ -1,6 +1,7 @@
-import { SbbPopoverElement as r } from "./popover/popover/popover.component.js";
-import { SbbPopoverTriggerElement as m } from "./popover/popover-trigger/popover-trigger.component.js";
+import { SbbPopoverBaseElement as r, SbbPopoverElement as b } from "./popover/popover/popover.component.js";
+import { SbbPopoverTriggerElement as p } from "./popover/popover-trigger/popover-trigger.component.js";
 export {
-  r as SbbPopoverElement,
-  m as SbbPopoverTriggerElement
+  r as SbbPopoverBaseElement,
+  b as SbbPopoverElement,
+  p as SbbPopoverTriggerElement
 };

package/radio-button/common/radio-button-common.js

@@ -1,10 +1,10 @@
 import { __esDecorate as r, __runInitializers as c } from "tslib";
 import { property as h } from "lit/decorators.js";
 import { SbbFormAssociatedRadioButtonMixin as u } from "../../core/mixins.js";
-const b = (n) => (() => {
+const b = (o) => (() => {
   var t;
-  let a = u(n), s = [], o;
-  return t = class extends a {
+  let l = u(o), a = [], s;
+  return t = class extends l {
     /**
      * Whether the radio can be deselected.
      */
@@ -12,8 +12,7 @@ const b = (n) => (() => {
       this._allowEmptySelection = !!e;
     }
     get allowEmptySelection() {
-      var e;
-      return this._allowEmptySelection || (((e = this.group) == null ? void 0 : e.allowEmptySelection) ?? !1);
+      return this._allowEmptySelection || (this.group?.allowEmptySelection ?? !1);
     }
     /**
      * Reference to the connected radio button group.
@@ -22,8 +21,7 @@ const b = (n) => (() => {
       return this._group;
     }
     constructor() {
-      var e, i;
-      super(), this._allowEmptySelection = (c(this, s), !1), this._group = null, (e = this.addEventListener) == null || e.call(this, "click", (l) => this._handleClick(l)), (i = this.addEventListener) == null || i.call(this, "keydown", (l) => this._handleKeyDown(l));
+      super(), this._allowEmptySelection = (c(this, a), !1), this._group = null, this.addEventListener?.("click", (e) => this._handleClick(e)), this.addEventListener?.("keydown", (e) => this._handleKeyDown(e));
     }
     connectedCallback() {
       super.connectedCallback(), this._group = this.closest("sbb-radio-button-group"), ["disabled", "required", "size"].forEach((e) => this.requestUpdate(e));
@@ -36,12 +34,10 @@ const b = (n) => (() => {
       this.disabled || this.formDisabled || (this.allowEmptySelection ? (this.checked = !this.checked, this.emitChangeEvents()) : this.checked || (this.checked = !0, this.emitChangeEvents()));
     }
     isDisabledExternally() {
-      var e;
-      return ((e = this.group) == null ? void 0 : e.disabled) ?? !1;
+      return this.group?.disabled ?? !1;
     }
     isRequiredExternally() {
-      var e;
-      return ((e = this.group) == null ? void 0 : e.required) ?? !1;
+      return this.group?.required ?? !1;
     }
     async _handleClick(e) {
       e.preventDefault(), this.select(), await this.updateComplete, this.focus();
@@ -50,10 +46,10 @@ const b = (n) => (() => {
       e.code === "Space" && (e.preventDefault(), this.select());
     }
   }, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
-    o = [h({ attribute: "allow-empty-selection", type: Boolean })], r(t, null, o, { kind: "setter", name: "allowEmptySelection", static: !1, private: !1, access: { has: (i) => "allowEmptySelection" in i, set: (i, l) => {
-      i.allowEmptySelection = l;
-    } }, metadata: e }, null, s), e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    s = [h({ attribute: "allow-empty-selection", type: Boolean })], r(t, null, s, { kind: "setter", name: "allowEmptySelection", static: !1, private: !1, access: { has: (i) => "allowEmptySelection" in i, set: (i, n) => {
+      i.allowEmptySelection = n;
+    } }, metadata: e }, null, a), e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), t.events = {
     change: "change",
     input: "input"