@sbb-esta/lyne-elements 1.12.1 → 1.14.0

package/popover/popover.js

@@ -1,197 +1,224 @@
-import { css as u, isServer as g, html as d, nothing as f } from "lit";
-import { property as l, customElement as m } from "lit/decorators.js";
-import { ref as _ } from "lit/directives/ref.js";
-import { SbbFocusHandler as w, IS_FOCUSABLE_QUERY as y, setModalityOnNextFocus as b, getFirstFocusableElement as x } from "../core/a11y.js";
-import { SbbOpenCloseBaseElement as E } from "../core/base-elements.js";
-import { SbbLanguageController as C } from "../core/controllers.js";
-import { findReferencedElement as T } from "../core/dom.js";
-import { EventEmitter as h, composedPathHasAttribute as k } from "../core/eventing.js";
-import { i18nClosePopover as P } from "../core/i18n.js";
-import { SbbHydrationMixin as L } from "../core/mixins.js";
-import { isEventOnElement as c, removeAriaOverlayTriggerAttributes as O, setAriaOverlayTriggerAttributes as S, getElementPosition as A } from "../core/overlay.js";
-import "../button/secondary-button.js";
-const F = 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-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{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)}}`;
-var z = Object.defineProperty, D = Object.getOwnPropertyDescriptor, n = (e, o, t, i) => {
-  for (var r = i > 1 ? void 0 : i ? D(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 && z(o, t, r), r;
+var j = (s) => {
+  throw TypeError(s);
 };
-const M = 16, B = 32;
-let H = 0;
-const v = /* @__PURE__ */ new Set();
-let s = class extends L(E) {
-  constructor() {
-    super(...arguments), this.hideCloseButton = !1, this.hoverTrigger = !1, this.openDelay = 0, this.closeDelay = 0, this.willClose = new h(
-      this,
-      s.events.willClose
-    ), this.didClose = new h(
-      this,
-      s.events.didClose
-    ), this._skipCloseFocus = !1, this._focusHandler = new w(), this._hoverTrigger = !1, this._language = new C(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(y)), 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));
-    };
-  }
-  /** 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();
+var K = (s, i, r) => i.has(s) || j("Cannot " + r);
+var p = (s, i, r) => (K(s, i, "read from private field"), r ? r.call(s) : i.get(s)), c = (s, i, r) => i.has(s) ? j("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, r), n = (s, i, r, b) => (K(s, i, "write to private field"), b ? b.call(s, r) : i.set(s, r), r);
+import { __runInitializers as l, __esDecorate as h } from "tslib";
+import { css as Z, isServer as G, html as Q, nothing as J } from "lit";
+import { customElement as ee, property as y } from "lit/decorators.js";
+import { ref as te } from "lit/directives/ref.js";
+import { SbbFocusHandler as oe, IS_FOCUSABLE_QUERY as se, setModalityOnNextFocus as x, getFirstFocusableElement as ie } from "../core/a11y.js";
+import { SbbOpenCloseBaseElement as re } from "../core/base-elements.js";
+import { SbbLanguageController as ae } from "../core/controllers.js";
+import { forceType as w } from "../core/decorators.js";
+import { findReferencedElement as ne } from "../core/dom.js";
+import { EventEmitter as V, composedPathHasAttribute as le } from "../core/eventing.js";
+import { i18nClosePopover as be } from "../core/i18n.js";
+import { SbbHydrationMixin as pe } from "../core/mixins.js";
+import { isEventOnElement as X, removeAriaOverlayTriggerAttributes as ce, setAriaOverlayTriggerAttributes as he, getElementPosition as de } from "../core/overlay.js";
+import "../button/secondary-button.js";
+const ve = 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-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{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, ge = 32;
+let _e = 0;
+const E = /* @__PURE__ */ new Set();
+let Be = (() => {
+  var d, v, u, g, _, f, a;
+  let s = [ee("sbb-popover")], i, r = [], b, T = pe(re), k, L = [], S = [], D, z = [], P = [], O, A = [], B = [], F, M = [], I = [], H, R = [], $ = [], N, U = [], Y = [];
+  var C = (a = class extends T {
+    constructor() {
+      super(...arguments);
+      c(this, d);
+      c(this, v);
+      c(this, u);
+      c(this, g);
+      c(this, _);
+      c(this, f);
+      n(this, d, l(this, L, null)), n(this, v, (l(this, S), l(this, z, !1))), n(this, u, (l(this, P), l(this, A, !1))), n(this, g, (l(this, B), l(this, M, 0))), n(this, _, (l(this, I), l(this, R, 0))), n(this, f, (l(this, $), l(this, U, ""))), this.willClose = (l(this, Y), new V(this, C.events.willClose)), this.didClose = new V(this, C.events.didClose), this._skipCloseFocus = !1, this._focusHandler = new oe(), this._hoverTrigger = !1, this._language = new ae(this), this._pointerDownListener = (t) => {
+        this._isPointerDownEventOnPopover = X(this._overlay, t);
+      }, this._closeOnBackdropClick = (t) => {
+        !this._isPointerDownEventOnPopover && !X(this._overlay, t) && (this._nextFocusedElement = t.composedPath().filter((e) => e instanceof window.HTMLElement).find((e) => e.matches(se)), 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));
+      };
+    }
+    /**
+     * The element that will trigger the popover overlay.
+     * Accepts both a string (id of an element) or an HTML element.
+     */
+    get trigger() {
+      return p(this, d);
+    }
+    set trigger(t) {
+      n(this, d, t);
+    }
+    /** Whether the close button should be hidden. */
+    get hideCloseButton() {
+      return p(this, v);
+    }
+    set hideCloseButton(t) {
+      n(this, v, t);
+    }
+    /** Whether the popover should be triggered on hover. */
+    get hoverTrigger() {
+      return p(this, u);
+    }
+    set hoverTrigger(t) {
+      n(this, u, t);
+    }
+    /** Open the popover after a certain delay. */
+    get openDelay() {
+      return p(this, g);
+    }
+    set openDelay(t) {
+      n(this, g, t);
+    }
+    /** Close the popover after a certain delay. */
+    get closeDelay() {
+      return p(this, _);
+    }
+    set closeDelay(t) {
+      n(this, _, t);
+    }
+    /** This will be forwarded as aria-label to the close button element. */
+    get accessibilityCloseLabel() {
+      return p(this, f);
+    }
+    set accessibilityCloseLabel(t) {
+      n(this, f, t);
+    }
+    /** Opens the popover on trigger click. */
+    open() {
+      var t;
+      if (!(this.state !== "closed" && this.state !== "closing" || !this._overlay) && this.willOpen.emit()) {
+        for (const e of Array.from(E)) {
+          const o = e.getAttribute("data-state");
+          o && (o === "opened" || o === "opening") && e.close();
+        }
+        this.state = "opening", this.inert = !0, this._setPopoverPosition(), (t = this._triggerElement) == null || t.setAttribute("aria-expanded", "true"), this._nextFocusedElement = void 0, this._skipCloseFocus = !1;
       }
-      this.state = "opening", this.inert = !0, this._setPopoverPosition(), (e = this._triggerElement) == null || e.setAttribute("aria-expanded", "true"), this._nextFocusedElement = void 0, this._skipCloseFocus = !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")));
-  }
-  // Closes the popover on "Esc" key pressed and traps focus within the popover.
-  _onKeydownEvent(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());
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.id || (this.id = this.id || `sbb-popover-${++H}`), this._configure(), this.state = "closed", v.add(this);
-  }
-  willUpdate(e) {
-    super.willUpdate(e), e.has("trigger") && this._removeTriggerClickListener(this.trigger, e.get("trigger")), e.has("hoverTrigger") && this._configure();
-  }
-  firstUpdated(e) {
-    super.firstUpdated(e), this._hoverTrigger && (this._overlay.addEventListener("mouseenter", () => this._onOverlayMouseEnter()), this._overlay.addEventListener("mouseleave", () => this._onOverlayMouseLeave()));
-  }
-  disconnectedCallback() {
-    var e, o;
-    super.disconnectedCallback(), (e = this._popoverController) == null || e.abort(), (o = this._openStateController) == null || o.abort(), this._focusHandler.disconnect(), v.delete(this);
-  }
-  // Check if the trigger is valid and attach click event listeners.
-  _configure() {
-    var e;
-    if (!g) {
-      if (this.hydrationRequired) {
-        this.hydrationComplete.then(() => this._configure());
+    }
+    /** 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")));
+    }
+    // Closes the popover on "Esc" key pressed and traps focus within the popover.
+    _onKeydownEvent(t) {
+      if (this.state === "opened" && t.key === "Escape") {
+        this.close();
         return;
       }
-      O(this._triggerElement), this.trigger && (this._triggerElement = T(this.trigger), this._triggerElement && (S(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(
-        "keydown",
-        (o) => {
-          (o.code === "Space" || o.code === "Enter") && this.open();
-        },
-        {
-          signal: this._popoverController.signal
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.id || (this.id = this.id || `sbb-popover-${++_e}`), this._configure(), this.state = "closed", E.add(this);
+    }
+    willUpdate(t) {
+      var e, o;
+      super.willUpdate(t), t.has("trigger") && this.trigger !== t.get("trigger") && ((e = this._popoverController) == null || e.abort(), (o = this._openStateController) == null || o.abort(), this._configure()), t.has("hoverTrigger") && this._configure();
+    }
+    firstUpdated(t) {
+      super.firstUpdated(t), this._hoverTrigger && (this._overlay.addEventListener("mouseenter", () => this._onOverlayMouseEnter()), this._overlay.addEventListener("mouseleave", () => this._onOverlayMouseLeave()));
+    }
+    disconnectedCallback() {
+      var t, e;
+      super.disconnectedCallback(), (t = this._popoverController) == null || t.abort(), (e = this._openStateController) == null || e.abort(), this._focusHandler.disconnect(), E.delete(this);
+    }
+    // Check if the trigger is valid and attach click event listeners.
+    _configure() {
+      var t;
+      if (!G) {
+        if (this.hydrationRequired) {
+          this.hydrationComplete.then(() => this._configure());
+          return;
         }
-      )) : this._triggerElement.addEventListener(
-        "click",
-        () => {
+        ce(this._triggerElement), this.trigger && (this._triggerElement = ne(this.trigger), this._triggerElement && (he(this._triggerElement, "dialog", this.id, this.state), this._hoverTrigger = this.hoverTrigger && !window.matchMedia("(pointer: coarse)").matches, (t = this._popoverController) == null || t.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("keydown", (e) => {
+          (e.code === "Space" || e.code === "Enter") && this.open();
+        }, {
+          signal: this._popoverController.signal
+        })) : this._triggerElement.addEventListener("click", () => {
           this.state === "closed" && this.open();
-        },
-        {
+        }, {
           signal: this._popoverController.signal
-        }
-      )));
-    }
-  }
-  _attachWindowEvents() {
-    this._openStateController = new AbortController(), document.addEventListener("scroll", () => this._setPopoverPosition(), {
-      passive: !0,
-      signal: this._openStateController.signal
-    }), window.addEventListener("resize", () => this._setPopoverPosition(), {
-      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
-    });
-  }
-  // Close the popover on click of any element that has the 'sbb-popover-close' attribute.
-  _closeOnSbbPopoverCloseClick(e) {
-    const o = k(e, "sbb-popover-close", this);
-    o && !o.hasAttribute("disabled") && (clearTimeout(this._closeTimeout), this.close(o));
-  }
-  // 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;
-    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
+        })));
+      }
+    }
+    _attachWindowEvents() {
+      this._openStateController = new AbortController(), document.addEventListener("scroll", () => this._setPopoverPosition(), {
+        passive: !0,
+        signal: this._openStateController.signal
+      }), window.addEventListener("resize", () => this._setPopoverPosition(), {
+        passive: !0,
+        signal: this._openStateController.signal
+      }), window.addEventListener("keydown", (t) => this._onKeydownEvent(t), {
+        signal: this._openStateController.signal
+      }), window.addEventListener("pointerdown", this._pointerDownListener, {
+        signal: this._openStateController.signal
+      }), window.addEventListener("pointerup", this._closeOnBackdropClick, {
+        signal: this._openStateController.signal
       });
-    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();
+    }
+    // Close the popover on click of any element that has the 'sbb-popover-close' attribute.
+    _closeOnSbbPopoverCloseClick(t) {
+      const e = le(t, "sbb-popover-close", this);
+      e && !e.hasAttribute("disabled") && (clearTimeout(this._closeTimeout), this.close(e));
+    }
+    // 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) {
+      var e, o, q, W;
+      if (t.animationName === "open" && this.state === "opening")
+        this.state = "opened", this.didOpen.emit(), this.inert = !1, this._attachWindowEvents(), this._setPopoverFocus(), this._focusHandler.trap(this, {
+          postFilter: (m) => m !== this._overlay
+        });
+      else if (t.animationName === "close" && this.state === "closing") {
+        if (this.state = "closed", (o = (e = this._overlay) == null ? void 0 : e.firstElementChild) == null || o.scrollTo(0, 0), (q = this._overlay) == null || q.removeAttribute("tabindex"), !this._skipCloseFocus) {
+          const m = this._nextFocusedElement || this._triggerElement;
+          x(m), m == null || m.focus();
+        }
+        this.didClose.emit({ closeTarget: this._popoverCloseElement }), (W = this._openStateController) == null || W.abort(), this._focusHandler.disconnect();
       }
-      this.didClose.emit({ closeTarget: this._popoverCloseElement }), (r = this._openStateController) == null || r.abort(), this._focusHandler.disconnect();
-    }
-  }
-  // Set focus on the first focusable element.
-  _setPopoverFocus() {
-    const e = this.shadowRoot.querySelector("[sbb-popover-close]") || x(
-      Array.from(this.children).filter((o) => o instanceof window.HTMLElement)
-    );
-    e ? (b(e), e.focus()) : (this._overlay.setAttribute("tabindex", "0"), b(this._overlay), this._overlay.focus(), this._overlay.addEventListener(
-      "blur",
-      () => {
+    }
+    // Set focus on the first focusable element.
+    _setPopoverFocus() {
+      const t = this.shadowRoot.querySelector("[sbb-popover-close]") || ie(Array.from(this.children).filter((e) => e instanceof window.HTMLElement));
+      t ? (x(t), t.focus()) : (this._overlay.setAttribute("tabindex", "0"), x(this._overlay), this._overlay.focus(), this._overlay.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 e;
+          document.visibilityState !== "hidden" && ((e = this._overlay) == null || e.removeAttribute("tabindex"), (this.state === "opened" || this.state === "opening") && (this._skipCloseFocus = !0), this.close());
         });
-      },
-      {
+      }, {
         signal: this._openStateController.signal
-      }
-    ));
-  }
-  _setPopoverPosition() {
-    if (!this._overlay || !this._triggerElement)
-      return;
-    const e = A(
-      this._overlay,
-      this._triggerElement,
-      this.shadowRoot.querySelector(".sbb-popover__container"),
-      {
-        verticalOffset: M,
-        horizontalOffset: B,
+      }));
+    }
+    _setPopoverPosition() {
+      if (!this._overlay || !this._triggerElement)
+        return;
+      const t = de(this._overlay, this._triggerElement, this.shadowRoot.querySelector(".sbb-popover__container"), {
+        verticalOffset: ue,
+        horizontalOffset: ge,
         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`);
-  }
-  render() {
-    const e = d`
+      });
+      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`);
+    }
+    render() {
+      const t = Q`
       <span class="sbb-popover__close">
         <sbb-secondary-button
-          aria-label=${this.accessibilityCloseLabel || P[this._language.current]}
+          aria-label=${this.accessibilityCloseLabel || be[this._language.current]}
           size="s"
           type="button"
           icon-name="cross-small"
@@ -199,19 +226,19 @@ let s = class extends L(E) {
         ></sbb-secondary-button>
       </span>
     `;
-    return d`
+      return Q`
       <div class="sbb-popover__container">
         <div
-          @animationend=${(o) => this._onPopoverAnimationEnd(o)}
+          @animationend=${(e) => this._onPopoverAnimationEnd(e)}
           class="sbb-popover"
           role="tooltip"
-          ${_((o) => this._overlay = o)}
+          ${te((e) => this._overlay = e)}
         >
           <div
-            @click=${(o) => this._closeOnSbbPopoverCloseClick(o)}
+            @click=${(e) => this._closeOnSbbPopoverCloseClick(e)}
             class="sbb-popover__content"
           >
-            ${!this.hideCloseButton && !this._hoverTrigger ? e : f}
+            ${!this.hideCloseButton && !this._hoverTrigger ? t : J}
             <span>
               <slot>No content</slot>
             </span>
@@ -219,30 +246,25 @@ let s = class extends L(E) {
         </div>
       </div>
     `;
-  }
-};
-s.styles = F;
-n([
-  l()
-], s.prototype, "trigger", 2);
-n([
-  l({ attribute: "hide-close-button", type: Boolean })
-], s.prototype, "hideCloseButton", 2);
-n([
-  l({ attribute: "hover-trigger", type: Boolean })
-], s.prototype, "hoverTrigger", 2);
-n([
-  l({ attribute: "open-delay", type: Number })
-], s.prototype, "openDelay", 2);
-n([
-  l({ attribute: "close-delay", type: Number })
-], s.prototype, "closeDelay", 2);
-n([
-  l({ attribute: "accessibility-close-label" })
-], s.prototype, "accessibilityCloseLabel", 2);
-s = n([
-  m("sbb-popover")
-], s);
+    }
+  }, d = new WeakMap(), v = new WeakMap(), u = new WeakMap(), g = new WeakMap(), _ = new WeakMap(), f = new WeakMap(), b = a, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(T[Symbol.metadata] ?? null) : void 0;
+    k = [y()], D = [w(), y({ attribute: "hide-close-button", type: Boolean })], O = [w(), y({ attribute: "hover-trigger", type: Boolean })], F = [w(), y({ attribute: "open-delay", type: Number })], H = [w(), y({ attribute: "close-delay", type: Number })], N = [w(), y({ attribute: "accessibility-close-label" })], h(a, null, k, { 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, S), h(a, null, D, { 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 }, z, P), h(a, null, O, { 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 }, A, B), h(a, null, F, { 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, I), h(a, null, H, { 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 }, R, $), h(a, null, N, { 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 }, U, Y), h(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 = ve, l(b, r), a);
+  return C = b;
+})();
 export {
-  s as SbbPopoverElement
+  Be as SbbPopoverElement
 };

package/radio-button/common/radio-button-common.d.ts

@@ -7,7 +7,7 @@ export type SbbRadioButtonStateChange = Extract<SbbStateChange, SbbDisabledState
 export declare class SbbRadioButtonCommonElementMixinType {
     get allowEmptySelection(): boolean;
     set allowEmptySelection(boolean: boolean);
-    value?: string;
+    accessor value: string;
     get disabled(): boolean;
     set disabled(boolean: boolean);
     get required(): boolean;

package/radio-button/common/radio-button-common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/common/radio-button-common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAOtD,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAE3E,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAElD,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAC7C,cAAc,EACd,sBAAsB,GAAG,qBAAqB,CAC/C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,oCAAoC;IACvD,IAAW,mBAAmB,IAAI,OAAO,CAAC;IAC1C,IAAW,mBAAmB,CAAC,OAAO,EADJ,OACI,EAAE;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACtB,IAAW,QAAQ,IAAI,OAAO,CAAC;IAC/B,IAAW,QAAQ,CAAC,OAAO,EADJ,OACI,EAAE;IAC7B,IAAW,QAAQ,IAAI,OAAO,CAAC;IAC/B,IAAW,QAAQ,CAAC,OAAO,EADJ,OACI,EAAE;IAC7B,IAAW,KAAK,IAAI,0BAA0B,GAAG,IAAI,CAAC;IACtD,IAAW,OAAO,IAAI,OAAO,CAAC;IAC9B,IAAW,OAAO,CAAC,OAAO,EADJ,OACI,EAAE;IACrB,MAAM,IAAI,IAAI;CACtB;AAGD,eAAO,MAAM,gCAAgC,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,cAC5E,CAAC,KACZ,mBAAmB,CAAC,oCAAoC,CAAC,GAAG,CAuJ9D,CAAC"}
+{"version":3,"file":"radio-button-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/common/radio-button-common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAOtD,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAE3E,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAElD,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAC7C,cAAc,EACd,sBAAsB,GAAG,qBAAqB,CAC/C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,oCAAoC;IACvD,IAAW,mBAAmB,IAAI,OAAO,CAAC;IAC1C,IAAW,mBAAmB,CAAC,OAAO,EADJ,OACI,EAAE;IACxC,SAAgB,KAAK,EAAE,MAAM,CAAC;IAC9B,IAAW,QAAQ,IAAI,OAAO,CAAC;IAC/B,IAAW,QAAQ,CAAC,OAAO,EADJ,OACI,EAAE;IAC7B,IAAW,QAAQ,IAAI,OAAO,CAAC;IAC/B,IAAW,QAAQ,CAAC,OAAO,EADJ,OACI,EAAE;IAC7B,IAAW,KAAK,IAAI,0BAA0B,GAAG,IAAI,CAAC;IACtD,IAAW,OAAO,IAAI,OAAO,CAAC;IAC9B,IAAW,OAAO,CAAC,OAAO,EADJ,OACI,EAAE;IACrB,MAAM,IAAI,IAAI;CACtB;AAGD,eAAO,MAAM,gCAAgC,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,cAC5E,CAAC,KACZ,mBAAmB,CAAC,oCAAoC,CAAC,GAAG,CAoJ9D,CAAC"}