@sbb-esta/lyne-elements 2.0.2 → 2.1.0

package/popover/popover.js

@@ -1,41 +1,41 @@
-var q = (s) => {
+var W = (s) => {
   throw TypeError(s);
 };
-var W = (s, i, r) => i.has(s) || q("Cannot " + r);
-var p = (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 h } from "tslib";
-import { css as X, isServer as V, html as j, nothing as G } from "lit";
-import { customElement as J, property as f } from "lit/decorators.js";
-import { ref as ee } from "lit/directives/ref.js";
-import { SbbFocusHandler as te, IS_FOCUSABLE_QUERY as oe, setModalityOnNextFocus as x, getFirstFocusableElement as se } from "../core/a11y.js";
-import { SbbOpenCloseBaseElement as ie } from "../core/base-elements.js";
-import { SbbMediaQueryPointerCoarse as re, SbbLanguageController as ae } from "../core/controllers.js";
-import { forceType as y } from "../core/decorators.js";
-import { isZeroAnimationDuration as ne, findReferencedElement as le } from "../core/dom.js";
-import { EventEmitter as K, composedPathHasAttribute as be } from "../core/eventing.js";
-import { i18nClosePopover as pe } from "../core/i18n.js";
-import { SbbHydrationMixin as ce } from "../core/mixins.js";
-import { isEventOnElement as Q, removeAriaOverlayTriggerAttributes as he, setAriaOverlayTriggerAttributes as de, getElementPosition as ve } from "../core/overlay.js";
+var j = (s, i, r) => i.has(s) || W("Cannot " + r);
+var p = (s, i, r) => (j(s, i, "read from private field"), r ? r.call(s) : i.get(s)), h = (s, i, r) => i.has(s) ? W("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, r), n = (s, i, r, b) => (j(s, i, "write to private field"), b ? b.call(s, r) : i.set(s, r), r);
+import { __runInitializers as l, __esDecorate as c } from "tslib";
+import { css as G, isServer as X, html as K, 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 E, getFirstFocusableElement as ie } from "../core/a11y.js";
+import { SbbOpenCloseBaseElement as re } from "../core/base-elements.js";
+import { SbbMediaQueryPointerCoarse as ae, SbbLanguageController as ne } from "../core/controllers.js";
+import { hostAttributes as le, forceType as w } from "../core/decorators.js";
+import { isZeroAnimationDuration as be, findReferencedElement as pe } from "../core/dom.js";
+import { EventEmitter as Q, composedPathHasAttribute as he } from "../core/eventing.js";
+import { i18nClosePopover as ce } from "../core/i18n.js";
+import { SbbHydrationMixin as de } from "../core/mixins.js";
+import { isEventOnElement as V, removeAriaOverlayTriggerAttributes as ve, setAriaOverlayTriggerAttributes as ue, getElementPosition as ge } from "../core/overlay.js";
 import "../button/secondary-button.js";
-const ue = 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);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)}}`, ge = 16, _e = 32;
-let me = 0;
-const E = /* @__PURE__ */ new Set(), fe = V ? !1 : matchMedia(re).matches;
-let Me = (() => {
-  var d, v, u, g, _, m, a;
-  let s = [J("sbb-popover")], i, r = [], b, T = ce(ie), k, L = [], D = [], S, z = [], O = [], P, A = [], B = [], F, M = [], I = [], H, R = [], $ = [], N, U = [], Y = [];
-  var w = (a = class extends T {
+const _e = G`*,: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);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}.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)}}`, fe = 16, me = 32;
+let ye = 0;
+const T = /* @__PURE__ */ new Set(), we = X ? !1 : matchMedia(ae).matches;
+let He = (() => {
+  var d, v, u, g, _, f, a;
+  let s = [ee("sbb-popover"), le({ popover: "manual" })], i, r = [], b, k = de(re), L, D = [], S = [], P, z = [], O = [], A, B = [], F = [], M, I = [], H = [], R, $ = [], N = [], U, Y = [], Z = [];
+  var C = (a = class extends k {
     constructor() {
       super(...arguments);
-      c(this, d);
-      c(this, v);
-      c(this, u);
-      c(this, g);
-      c(this, _);
-      c(this, m);
-      n(this, d, l(this, L, null)), n(this, v, (l(this, D), l(this, z, !1))), n(this, u, (l(this, O), 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, m, (l(this, $), l(this, U, ""))), this.willClose = (l(this, Y), new K(this, w.events.willClose, { cancelable: !0 })), this.didClose = new K(this, w.events.didClose, { cancelable: !0 }), this._skipCloseFocus = !1, this._focusHandler = new te(), this._hoverTrigger = !1, this._language = new ae(this), this._pointerDownListener = (e) => {
-        this._isPointerDownEventOnPopover = Q(this._overlay, e);
+      h(this, d);
+      h(this, v);
+      h(this, u);
+      h(this, g);
+      h(this, _);
+      h(this, f);
+      n(this, d, l(this, D, null)), n(this, v, (l(this, S), l(this, z, !1))), n(this, u, (l(this, O), l(this, B, !1))), n(this, g, (l(this, F), l(this, I, 0))), n(this, _, (l(this, H), l(this, $, 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._focusHandler = new oe(), this._hoverTrigger = !1, this._language = new ne(this), this._pointerDownListener = (e) => {
+        this._isPointerDownEventOnPopover = V(this._overlay, e);
       }, this._closeOnBackdropClick = (e) => {
-        !this._isPointerDownEventOnPopover && !Q(this._overlay, e) && (this._nextFocusedElement = e.composedPath().filter((t) => t instanceof window.HTMLElement).find((t) => t.matches(oe)), clearTimeout(this._closeTimeout), this.close());
+        !this._isPointerDownEventOnPopover && !V(this._overlay, e) && (this._nextFocusedElement = e.composedPath().filter((t) => t instanceof window.HTMLElement).find((t) => t.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 = () => {
@@ -86,20 +86,20 @@ let Me = (() => {
     }
     /** This will be forwarded as aria-label to the close button element. */
     get accessibilityCloseLabel() {
-      return p(this, m);
+      return p(this, f);
     }
     set accessibilityCloseLabel(e) {
-      n(this, m, e);
+      n(this, f, e);
     }
     /** Opens the popover on trigger click. */
     open() {
-      var e;
+      var e, t;
       if (!(this.state !== "closed" && this.state !== "closing" || !this._overlay) && this.willOpen.emit()) {
-        for (const t of Array.from(E)) {
-          const o = t.getAttribute("data-state");
-          o && (o === "opened" || o === "opening") && t.close();
+        for (const o of Array.from(T)) {
+          const m = o.getAttribute("data-state");
+          m && (m === "opened" || m === "opening") && o.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._isZeroAnimationDuration() && this._handleOpening();
+        (e = this.showPopover) == null || e.call(this), 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._isZeroAnimationDuration() && this._handleOpening();
       }
     }
     /** Closes the popover. */
@@ -108,15 +108,15 @@ let Me = (() => {
       this.state !== "opened" && this.state !== "opening" || (this._popoverCloseElement = e, this.willClose.emit({ closeTarget: e }) && (this.state = "closing", this.inert = !0, (t = this._triggerElement) == null || t.setAttribute("aria-expanded", "false"), this._isZeroAnimationDuration() && this._handleClosing()));
     }
     _isZeroAnimationDuration() {
-      return ne(this, "--sbb-popover-animation-duration");
+      return be(this, "--sbb-popover-animation-duration");
     }
     _handleClosing() {
-      var e, t, o, Z;
-      if (this.state = "closed", (t = (e = this._overlay) == null ? void 0 : e.firstElementChild) == null || t.scrollTo(0, 0), (o = this._overlay) == null || o.removeAttribute("tabindex"), !this._skipCloseFocus) {
-        const C = this._nextFocusedElement || this._triggerElement;
-        x(C), C == null || C.focus();
+      var e, t, o, m, q;
+      if (this.state = "closed", (e = this.hidePopover) == null || e.call(this), (o = (t = this._overlay) == null ? void 0 : t.firstElementChild) == null || o.scrollTo(0, 0), (m = this._overlay) == null || m.removeAttribute("tabindex"), !this._skipCloseFocus) {
+        const x = this._nextFocusedElement || this._triggerElement;
+        E(x), x == null || x.focus();
       }
-      this.didClose.emit({ closeTarget: this._popoverCloseElement }), (Z = this._openStateController) == null || Z.abort(), this._focusHandler.disconnect();
+      this.didClose.emit({ closeTarget: this._popoverCloseElement }), (q = this._openStateController) == null || q.abort(), this._focusHandler.disconnect();
     }
     _handleOpening() {
       this.state = "opened", this.inert = !1, this._attachWindowEvents(), this._setPopoverFocus(), this._focusHandler.trap(this, {
@@ -131,7 +131,7 @@ let Me = (() => {
       }
     }
     connectedCallback() {
-      super.connectedCallback(), this.id || (this.id = this.id || `sbb-popover-${++me}`), this._configure(), this.state = "closed", E.add(this);
+      super.connectedCallback(), this.id || (this.id = this.id || `sbb-popover-${++ye}`), this._configure(), this.state = "closed", T.add(this);
     }
     willUpdate(e) {
       var t, o;
@@ -142,20 +142,20 @@ let Me = (() => {
     }
     disconnectedCallback() {
       var e, t;
-      super.disconnectedCallback(), (e = this._popoverController) == null || e.abort(), (t = this._openStateController) == null || t.abort(), this._focusHandler.disconnect(), E.delete(this);
+      super.disconnectedCallback(), (e = this._popoverController) == null || e.abort(), (t = this._openStateController) == null || t.abort(), this._focusHandler.disconnect(), T.delete(this);
     }
     // Check if the trigger is valid and attach click event listeners.
     _configure() {
       var t;
-      if (V)
+      if (X)
         return;
       if (this.hydrationRequired) {
         this.hydrationComplete.then(() => this._configure());
         return;
       }
-      if (he(this._triggerElement), !this.trigger || (this._triggerElement = le(this.trigger), !this._triggerElement))
+      if (ve(this._triggerElement), !this.trigger || (this._triggerElement = pe(this.trigger), !this._triggerElement))
         return;
-      de(this._triggerElement, "dialog", this.id, this.state), this._hoverTrigger = this.hoverTrigger && !fe, (t = this._popoverController) == null || t.abort();
+      ue(this._triggerElement, "dialog", this.id, this.state), this._hoverTrigger = this.hoverTrigger && !we, (t = this._popoverController) == null || t.abort();
       const { signal: e } = this._popoverController = new AbortController();
       this._hoverTrigger ? (this._triggerElement.addEventListener("mouseenter", this._onTriggerMouseEnter, { signal: e }), this._triggerElement.addEventListener("mouseleave", this._onTriggerMouseLeave, { signal: e }), this._triggerElement.addEventListener("keydown", (o) => {
         (o.code === "Space" || o.code === "Enter") && this.open();
@@ -183,7 +183,7 @@ let Me = (() => {
     }
     // Close the popover on click of any element that has the 'sbb-popover-close' attribute.
     _closeOnSbbPopoverCloseClick(e) {
-      const t = be(e, "sbb-popover-close", this);
+      const t = he(e, "sbb-popover-close", this);
       t && !t.hasAttribute("disabled") && (clearTimeout(this._closeTimeout), this.close(t));
     }
     // Set popover position (x, y) to '0' once the popover is closed and the transition ended to prevent the
@@ -195,8 +195,8 @@ let Me = (() => {
     }
     // Set focus on the first focusable element.
     _setPopoverFocus() {
-      const e = this.shadowRoot.querySelector("[sbb-popover-close]") || se(Array.from(this.children).filter((t) => t instanceof window.HTMLElement));
-      e ? (x(e), e.focus()) : (this._overlay.setAttribute("tabindex", "0"), x(this._overlay), this._overlay.focus(), this._overlay.addEventListener("blur", () => {
+      const e = this.shadowRoot.querySelector("[sbb-popover-close]") || ie(Array.from(this.children).filter((t) => t instanceof window.HTMLElement));
+      e ? (E(e), e.focus()) : (this._overlay.setAttribute("tabindex", "0"), E(this._overlay), this._overlay.focus(), this._overlay.addEventListener("blur", () => {
         setTimeout(() => {
           var t;
           document.visibilityState !== "hidden" && ((t = this._overlay) == null || t.removeAttribute("tabindex"), (this.state === "opened" || this.state === "opening") && (this._skipCloseFocus = !0), this.close());
@@ -208,9 +208,9 @@ let Me = (() => {
     _setPopoverPosition() {
       if (!this._overlay || !this._triggerElement)
         return;
-      const e = ve(this._overlay, this._triggerElement, this.shadowRoot.querySelector(".sbb-popover__container"), {
-        verticalOffset: ge,
-        horizontalOffset: _e,
+      const e = ge(this._overlay, this._triggerElement, this.shadowRoot.querySelector(".sbb-popover__container"), {
+        verticalOffset: fe,
+        horizontalOffset: me,
         centered: !0,
         responsiveHeight: !0
       });
@@ -219,10 +219,10 @@ let Me = (() => {
       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 = j`
+      const e = K`
       <span class="sbb-popover__close">
         <sbb-secondary-button
-          aria-label=${this.accessibilityCloseLabel || pe[this._language.current]}
+          aria-label=${this.accessibilityCloseLabel || ce[this._language.current]}
           size="s"
           type="button"
           icon-name="cross-small"
@@ -230,19 +230,19 @@ let Me = (() => {
         ></sbb-secondary-button>
       </span>
     `;
-      return j`
+      return K`
       <div class="sbb-popover__container">
         <div
           @animationend=${this._onPopoverAnimationEnd}
           class="sbb-popover"
           role="tooltip"
-          ${ee((t) => this._overlay = t)}
+          ${te((t) => this._overlay = t)}
         >
           <div
             @click=${(t) => this._closeOnSbbPopoverCloseClick(t)}
             class="sbb-popover__content"
           >
-            ${!this.hideCloseButton && !this._hoverTrigger ? e : G}
+            ${!this.hideCloseButton && !this._hoverTrigger ? e : J}
             <span>
               <slot>No content</slot>
             </span>
@@ -251,24 +251,24 @@ let Me = (() => {
       </div>
     `;
     }
-  }, d = new WeakMap(), v = new WeakMap(), u = new WeakMap(), g = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), b = a, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(T[Symbol.metadata] ?? null) : void 0;
-    k = [f()], S = [y(), f({ attribute: "hide-close-button", type: Boolean })], P = [y(), f({ attribute: "hover-trigger", type: Boolean })], F = [y(), f({ attribute: "open-delay", type: Number })], H = [y(), f({ attribute: "close-delay", type: Number })], N = [y(), f({ attribute: "accessibility-close-label" })], h(a, null, k, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (t) => "trigger" in t, get: (t) => t.trigger, set: (t, o) => {
+  }, d = new WeakMap(), v = new WeakMap(), u = new WeakMap(), g = new WeakMap(), _ = new WeakMap(), f = new WeakMap(), b = a, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(k[Symbol.metadata] ?? null) : void 0;
+    L = [y()], P = [w(), y({ attribute: "hide-close-button", type: Boolean })], A = [w(), y({ attribute: "hover-trigger", type: Boolean })], M = [w(), y({ attribute: "open-delay", type: Number })], R = [w(), y({ attribute: "close-delay", type: Number })], U = [w(), y({ attribute: "accessibility-close-label" })], c(a, null, L, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (t) => "trigger" in t, get: (t) => t.trigger, set: (t, o) => {
       t.trigger = o;
-    } }, metadata: e }, L, D), h(a, null, S, { kind: "accessor", name: "hideCloseButton", static: !1, private: !1, access: { has: (t) => "hideCloseButton" in t, get: (t) => t.hideCloseButton, set: (t, o) => {
+    } }, metadata: e }, D, S), c(a, null, P, { kind: "accessor", name: "hideCloseButton", static: !1, private: !1, access: { has: (t) => "hideCloseButton" in t, get: (t) => t.hideCloseButton, set: (t, o) => {
       t.hideCloseButton = o;
-    } }, metadata: e }, z, O), h(a, null, P, { kind: "accessor", name: "hoverTrigger", static: !1, private: !1, access: { has: (t) => "hoverTrigger" in t, get: (t) => t.hoverTrigger, set: (t, o) => {
+    } }, metadata: e }, z, O), c(a, null, A, { kind: "accessor", name: "hoverTrigger", static: !1, private: !1, access: { has: (t) => "hoverTrigger" in t, get: (t) => t.hoverTrigger, set: (t, o) => {
       t.hoverTrigger = o;
-    } }, metadata: e }, A, B), h(a, null, F, { kind: "accessor", name: "openDelay", static: !1, private: !1, access: { has: (t) => "openDelay" in t, get: (t) => t.openDelay, set: (t, o) => {
+    } }, metadata: e }, B, F), c(a, null, M, { kind: "accessor", name: "openDelay", static: !1, private: !1, access: { has: (t) => "openDelay" in t, get: (t) => t.openDelay, set: (t, o) => {
       t.openDelay = o;
-    } }, metadata: e }, M, I), h(a, null, H, { kind: "accessor", name: "closeDelay", static: !1, private: !1, access: { has: (t) => "closeDelay" in t, get: (t) => t.closeDelay, set: (t, o) => {
+    } }, metadata: e }, I, H), c(a, null, R, { kind: "accessor", name: "closeDelay", static: !1, private: !1, access: { has: (t) => "closeDelay" in t, get: (t) => t.closeDelay, set: (t, o) => {
       t.closeDelay = o;
-    } }, metadata: e }, R, $), h(a, null, N, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (t) => "accessibilityCloseLabel" in t, get: (t) => t.accessibilityCloseLabel, set: (t, o) => {
+    } }, metadata: e }, $, N), c(a, null, U, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (t) => "accessibilityCloseLabel" in t, get: (t) => t.accessibilityCloseLabel, set: (t, o) => {
       t.accessibilityCloseLabel = o;
-    } }, metadata: e }, U, Y), h(null, i = { value: b }, s, { kind: "class", name: b.name, metadata: e }, null, r), w = b = i.value, e && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), a.styles = ue, l(b, r), a);
-  return w = b;
+    } }, metadata: e }, Y, Z), c(null, i = { value: b }, s, { kind: "class", name: b.name, metadata: e }, null, r), C = b = i.value, e && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a.styles = _e, l(b, r), a);
+  return C = b;
 })();
 export {
-  Me as SbbPopoverElement
+  He as SbbPopoverElement
 };

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

@@ -1,9 +1,7 @@
 import { LitElement } from 'lit';
-import { SbbCheckedStateChange, SbbDisabledStateChange, SbbStateChange } from '../../core/interfaces.js';
 import { AbstractConstructor, Constructor, SbbFormAssociatedRadioButtonMixinType } from '../../core/mixins.js';
 import { SbbRadioButtonGroupElement } from '../radio-button-group.js';
 export type SbbRadioButtonSize = 'xs' | 's' | 'm';
-export type SbbRadioButtonStateChange = Extract<SbbStateChange, SbbDisabledStateChange | SbbCheckedStateChange>;
 export declare class SbbRadioButtonCommonElementMixinType extends SbbFormAssociatedRadioButtonMixinType {
     get allowEmptySelection(): boolean;
     set allowEmptySelection(boolean: 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;AAKtD,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,WAAW,EAEhB,KAAK,qCAAqC,EAC3C,MAAM,sBAAsB,CAAC;AAC9B,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,oCAAqC,SAAQ,qCAAqC;IACrG,IAAW,mBAAmB,IAAI,OAAO,CAAC;IAC1C,IAAW,mBAAmB,CAAC,OAAO,EADJ,OACI,EAAE;IACxC,IAAW,KAAK,IAAI,0BAA0B,GAAG,IAAI,CAAC;IAC/C,MAAM,IAAI,IAAI;CACtB;AAGD,eAAO,MAAM,gCAAgC,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cACpE,CAAC,KACZ,mBAAmB,CAAC,oCAAoC,CAAC,GAAG,CAwH9D,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,EAAE,MAAM,KAAK,CAAC;AAItC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,WAAW,EAEhB,KAAK,qCAAqC,EAC3C,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAE3E,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAElD,MAAM,CAAC,OAAO,OAAO,oCAAqC,SAAQ,qCAAqC;IACrG,IAAW,mBAAmB,IAAI,OAAO,CAAC;IAC1C,IAAW,mBAAmB,CAAC,OAAO,EADJ,OACI,EAAE;IACxC,IAAW,KAAK,IAAI,0BAA0B,GAAG,IAAI,CAAC;IAC/C,MAAM,IAAI,IAAI;CACtB;AAGD,eAAO,MAAM,gCAAgC,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cACpE,CAAC,KACZ,mBAAmB,CAAC,oCAAoC,CAAC,GAAG,CA6F9D,CAAC"}

package/radio-button/common.js

@@ -1,13 +1,12 @@
 import { __esDecorate as n, __runInitializers as l } from "tslib";
 import { property as d } from "lit/decorators.js";
 import { setModalityOnNextFocus as c } from "../core/a11y.js";
-import { EventEmitter as u } from "../core/eventing.js";
-import { SbbFormAssociatedRadioButtonMixin as h } from "../core/mixins.js";
-import { css as m } from "lit";
-const k = (s) => (() => {
+import { SbbFormAssociatedRadioButtonMixin as u } from "../core/mixins.js";
+import { css as h } from "lit";
+const x = (s) => (() => {
   var o;
-  let r = h(s), b = [], a;
-  return o = class extends r {
+  let i = u(s), b = [], a;
+  return o = class extends i {
     /**
      * Whether the radio can be deselected.
      */
@@ -26,7 +25,7 @@ const k = (s) => (() => {
     }
     constructor() {
       var t, e;
-      super(), this._allowEmptySelection = (l(this, b), !1), this._group = null, this._stateChange = new u(this, o.events.stateChange, { bubbles: !0 }), (t = this.addEventListener) == null || t.call(this, "click", (i) => this._handleClick(i)), (e = this.addEventListener) == null || e.call(this, "keydown", (i) => this._handleKeyDown(i));
+      super(), this._allowEmptySelection = (l(this, b), !1), this._group = null, (t = this.addEventListener) == null || t.call(this, "click", (r) => this._handleClick(r)), (e = this.addEventListener) == null || e.call(this, "keydown", (r) => this._handleKeyDown(r));
     }
     connectedCallback() {
       super.connectedCallback(), this._group = this.closest("sbb-radio-button-group"), ["disabled", "required", "size"].forEach((t) => this.requestUpdate(t));
@@ -38,9 +37,6 @@ const k = (s) => (() => {
     select() {
       this.disabled || this.formDisabled || (this.allowEmptySelection ? (this.checked = !this.checked, this.emitChangeEvents()) : this.checked || (this.checked = !0, this.emitChangeEvents()));
     }
-    willUpdate(t) {
-      super.willUpdate(t), t.has("checked") && this.checked !== t.get("checked") && this._stateChange.emit({ type: "checked", checked: this.checked }), t.has("disabled") && this.disabled !== t.get("disabled") && this._stateChange.emit({ type: "disabled", disabled: this.disabled });
-    }
     isDisabledExternally() {
       var t;
       return ((t = this.group) == null ? void 0 : t.disabled) ?? !1;
@@ -56,17 +52,16 @@ const k = (s) => (() => {
       t.code === "Space" && (t.preventDefault(), this.select());
     }
   }, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    a = [d({ attribute: "allow-empty-selection", type: Boolean })], n(o, null, a, { kind: "setter", name: "allowEmptySelection", static: !1, private: !1, access: { has: (e) => "allowEmptySelection" in e, set: (e, i) => {
-      e.allowEmptySelection = i;
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    a = [d({ attribute: "allow-empty-selection", type: Boolean })], n(o, null, a, { kind: "setter", name: "allowEmptySelection", static: !1, private: !1, access: { has: (e) => "allowEmptySelection" in e, set: (e, r) => {
+      e.allowEmptySelection = r;
     } }, metadata: t }, null, b), t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), o.events = {
     change: "change",
-    input: "input",
-    stateChange: "stateChange"
+    input: "input"
   }, o;
-})(), _ = m`*,:before,:after{box-sizing:border-box}:host{--sbb-radio-button-label-color: var(--sbb-color-charcoal);--sbb-radio-button-background-color: var(--sbb-color-white);--sbb-radio-button-inner-circle-color: var(--sbb-color-white);--sbb-radio-button-border-width: var(--sbb-border-width-1x);--sbb-radio-button-border-style: solid;--sbb-radio-button-border-color: var(--sbb-color-smoke);--sbb-radio-button-dimension: var(--sbb-size-icon-ui-small);--sbb-radio-button-inner-circle-dimension: .625rem;--sbb-radio-button-cursor: pointer;--sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align: calc( (1em * var(--sbb-typo-line-height-body-text) - var(--sbb-radio-button-dimension)) / 2 )}@media (forced-colors: active){:host{--sbb-radio-button-background-color: Canvas !important;--sbb-radio-button-border-width: var(--sbb-border-width-2x);--sbb-radio-button-border-color: ButtonBorder}}:host([data-checked]){--sbb-radio-button-inner-circle-color: var(--sbb-color-red);--sbb-radio-button-background-fake-border-width: calc( (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2 )}@media (forced-colors: active){:host([data-checked]){--sbb-radio-button-inner-circle-color: Highlight;--sbb-radio-button-border-color: Highlight}}:host(:disabled){--sbb-radio-button-label-color: var(--sbb-color-granite);--sbb-radio-button-background-color: var(--sbb-color-milk);--sbb-radio-button-border-style: dashed;--sbb-radio-button-inner-circle-color: var(--sbb-color-charcoal);--sbb-radio-button-cursor: default}@media (forced-colors: active){:host(:disabled){--sbb-radio-button-inner-circle-color: GrayText;--sbb-radio-button-border-color: GrayText;--sbb-radio-button-border-style: solid}}:host([size=xs]){--sbb-radio-button-dimension: 1.25rem}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-radio-button{display:block;cursor:var(--sbb-radio-button-cursor);-webkit-user-select:none;user-select:none;position:relative;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent;--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([size=s]) .sbb-radio-button{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([size=xs]) .sbb-radio-button{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-radio-button__label-slot{display:flex;align-items:flex-start;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";flex-shrink:0;width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);border-radius:50%;margin-block-start:var(--sbb-radio-button-icon-align);transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-4x));transition-timing-function:ease;transition-property:background-color,border}@media (forced-colors: active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-radio-button__label-slot:after{position:absolute;border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color)}`;
+})(), w = h`*,:before,:after{box-sizing:border-box}:host{--sbb-radio-button-label-color: var(--sbb-color-charcoal);--sbb-radio-button-background-color: var(--sbb-color-white);--sbb-radio-button-inner-circle-color: var(--sbb-color-white);--sbb-radio-button-border-width: var(--sbb-border-width-1x);--sbb-radio-button-border-style: solid;--sbb-radio-button-border-color: var(--sbb-color-smoke);--sbb-radio-button-dimension: var(--sbb-size-icon-ui-small);--sbb-radio-button-inner-circle-dimension: .625rem;--sbb-radio-button-cursor: pointer;--sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align: calc( (1em * var(--sbb-typo-line-height-body-text) - var(--sbb-radio-button-dimension)) / 2 )}@media (forced-colors: active){:host{--sbb-radio-button-background-color: Canvas !important;--sbb-radio-button-border-width: var(--sbb-border-width-2x);--sbb-radio-button-border-color: ButtonBorder}}:host([data-checked]){--sbb-radio-button-inner-circle-color: var(--sbb-color-red);--sbb-radio-button-background-fake-border-width: calc( (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2 )}@media (forced-colors: active){:host([data-checked]){--sbb-radio-button-inner-circle-color: Highlight;--sbb-radio-button-border-color: Highlight}}:host(:disabled){--sbb-radio-button-label-color: var(--sbb-color-granite);--sbb-radio-button-background-color: var(--sbb-color-milk);--sbb-radio-button-border-style: dashed;--sbb-radio-button-inner-circle-color: var(--sbb-color-charcoal);--sbb-radio-button-cursor: default}@media (forced-colors: active){:host(:disabled){--sbb-radio-button-inner-circle-color: GrayText;--sbb-radio-button-border-color: GrayText;--sbb-radio-button-border-style: solid}}:host([size=xs]){--sbb-radio-button-dimension: 1.25rem}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-radio-button{display:block;cursor:var(--sbb-radio-button-cursor);-webkit-user-select:none;user-select:none;position:relative;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent;--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([size=s]) .sbb-radio-button{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([size=xs]) .sbb-radio-button{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-radio-button__label-slot{display:flex;align-items:flex-start;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";flex-shrink:0;width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);border-radius:50%;margin-block-start:var(--sbb-radio-button-icon-align);transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-4x));transition-timing-function:ease;transition-property:background-color,border}@media (forced-colors: active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-radio-button__label-slot:after{position:absolute;border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color)}`;
 export {
-  k as SbbRadioButtonCommonElementMixin,
-  _ as radioButtonCommonStyle
+  x as SbbRadioButtonCommonElementMixin,
+  w as radioButtonCommonStyle
 };

package/radio-button/radio-button-group.js

@@ -52,7 +52,7 @@ let et = 0, ut = (() => {
     set value(e) {
       if (this._fallbackValue = e, !this._didLoad)
         return;
-      if (!e) {
+      if (e == null) {
         this.radioButtons.forEach((a) => a.checked = !1);
         return;
       }

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

@@ -1,5 +1,7 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { SbbCheckedStateChange, SbbDisabledStateChange, SbbStateChange } from '../../core/interfaces.js';
 import { SbbPanelSize } from '../../core/mixins.js';
+export type SbbRadioButtonStateChange = Extract<SbbStateChange, SbbDisabledStateChange | SbbCheckedStateChange>;
 declare const SbbRadioButtonPanelElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbPanelMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbRadioButtonCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbUpdateSchedulerMixinType> & typeof LitElement;
 /**
  /**
@@ -16,10 +18,10 @@ declare const SbbRadioButtonPanelElement_base: import('../../core/mixins.js').Ab
 export declare class SbbRadioButtonPanelElement extends SbbRadioButtonPanelElement_base {
     static styles: CSSResultGroup;
     static readonly events: {
-        readonly stateChange: "stateChange";
         readonly change: "change";
         readonly input: "input";
         readonly panelConnected: "panelConnected";
+        readonly stateChange: "stateChange";
     };
     /**
      * Size variant, either s or m.
@@ -27,6 +29,12 @@ export declare class SbbRadioButtonPanelElement extends SbbRadioButtonPanelEleme
      */
     accessor size: SbbPanelSize;
     private _hasSelectionExpansionPanelElement;
+    /**
+     * @internal
+     * Internal event that emits whenever the state of the radio option
+     * in relation to the parent selection panel changes.
+     */
+    private _stateChange;
     connectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"radio-button-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button-panel/radio-button-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,6BAA6B,CAAC;;AAErC;;;;;;;;;;;GAWG;AACH,qBAGM,0BAA2B,SAAQ,+BAExC;IACC,OAAuB,MAAM,EAAE,cAAc,CAA8C;IAG3F,gBAAuB,MAAM;;;;;MAKlB;IAEX;;;OAGG;IACH,SAEgB,IAAI,EAAE,YAAY,CAAwB;IAE1D,OAAO,CAAC,kCAAkC,CAAkB;IAE5C,iBAAiB,IAAI,IAAI;cAKtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5E;;OAEG;cACgB,qBAAqB,IAAI,IAAI;IAShD;;OAEG;cACsB,kBAAkB,CAAC,IAAI,EAAE,0BAA0B,GAAG,OAAO,CAAC,IAAI,CAAC;cAQzE,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}
+{"version":3,"file":"radio-button-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button-panel/radio-button-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,6BAA6B,CAAC;AAErC,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAC7C,cAAc,EACd,sBAAsB,GAAG,qBAAqB,CAC/C,CAAC;;AAEF;;;;;;;;;;;GAWG;AACH,qBAGM,0BAA2B,SAAQ,+BAExC;IACC,OAAuB,MAAM,EAAE,cAAc,CAA8C;IAG3F,gBAAuB,MAAM;;;;;MAKlB;IAEX;;;OAGG;IACH,SAEgB,IAAI,EAAE,YAAY,CAAwB;IAE1D,OAAO,CAAC,kCAAkC,CAAkB;IAE5D;;;;OAIG;IACH,OAAO,CAAC,YAAY,CAIlB;IAEc,iBAAiB,IAAI,IAAI;cAKtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAkB5E;;OAEG;cACgB,qBAAqB,IAAI,IAAI;IAShD;;OAEG;cACsB,kBAAkB,CAAC,IAAI,EAAE,0BAA0B,GAAG,OAAO,CAAC,IAAI,CAAC;cAQzE,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}

package/radio-button/radio-button-panel.js

@@ -1,41 +1,42 @@
-var _ = (e) => {
-  throw TypeError(e);
+var _ = (t) => {
+  throw TypeError(t);
 };
-var f = (e, s, i) => s.has(e) || _("Cannot " + i);
-var g = (e, s, i) => (f(e, s, "read from private field"), i ? i.call(e) : s.get(e)), S = (e, s, i) => s.has(e) ? _("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, i), c = (e, s, i, n) => (f(e, s, "write to private field"), n ? n.call(e, i) : s.set(e, i), i);
-import { __runInitializers as b, __esDecorate as y } from "tslib";
-import { LitElement as z, html as x, nothing as E } from "lit";
-import { customElement as v, property as C } from "lit/decorators.js";
-import { slotState as k, getOverride as B } from "../core/decorators.js";
-import { isLean as P } from "../core/dom.js";
-import { SbbPanelMixin as R, SbbUpdateSchedulerMixin as w, panelCommonStyle as I } from "../core/mixins.js";
-import { SbbRadioButtonCommonElementMixin as D, radioButtonCommonStyle as M } from "./common.js";
+var g = (t, s, i) => s.has(t) || _("Cannot " + i);
+var y = (t, s, i) => (g(t, s, "read from private field"), i ? i.call(t) : s.get(t)), S = (t, s, i) => s.has(t) ? _("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, i), d = (t, s, i, n) => (g(t, s, "write to private field"), n ? n.call(t, i) : s.set(t, i), i);
+import { __runInitializers as b, __esDecorate as x } from "tslib";
+import { LitElement as E, html as z, nothing as v } from "lit";
+import { customElement as C, property as k } from "lit/decorators.js";
+import { slotState as B, getOverride as R } from "../core/decorators.js";
+import { isLean as w } from "../core/dom.js";
+import { EventEmitter as I } from "../core/eventing.js";
+import { SbbPanelMixin as P, SbbUpdateSchedulerMixin as D, panelCommonStyle as M } from "../core/mixins.js";
+import { SbbRadioButtonCommonElementMixin as O, radioButtonCommonStyle as U } from "./common.js";
 import "../screen-reader-only.js";
-let G = (() => {
+let N = (() => {
   var o, l;
-  let e = [v("sbb-radio-button-panel"), k()], s, i = [], n, m = R(D(w(z))), d, p = [], u = [];
-  return l = class extends m {
+  let t = [C("sbb-radio-button-panel"), B()], s, i = [], n, m = P(O(D(E))), u, h = [], p = [];
+  var r = (l = class extends m {
     constructor() {
       super(...arguments);
       S(this, o);
-      c(this, o, b(this, p, P() ? "s" : "m")), this._hasSelectionExpansionPanelElement = (b(this, u), !1);
+      d(this, o, b(this, h, w() ? "s" : "m")), this._hasSelectionExpansionPanelElement = (b(this, p), !1), this._stateChange = new I(this, r.events.stateChange, { bubbles: !0 });
     }
     /**
      * Size variant, either s or m.
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return g(this, o);
+      return y(this, o);
     }
-    set size(t) {
-      c(this, o, t);
+    set size(e) {
+      d(this, o, e);
     }
     connectedCallback() {
-      var t;
-      super.connectedCallback(), this._hasSelectionExpansionPanelElement = !!((t = this.closest) != null && t.call(this, "sbb-selection-expansion-panel"));
+      var e;
+      super.connectedCallback(), this._hasSelectionExpansionPanelElement = !!((e = this.closest) != null && e.call(this, "sbb-selection-expansion-panel"));
     }
-    willUpdate(t) {
-      super.willUpdate(t), t.has("checked") && this.toggleAttribute("data-checked", this.checked);
+    willUpdate(e) {
+      super.willUpdate(e), e.has("checked") && (this.toggleAttribute("data-checked", this.checked), this.checked !== e.get("checked") && this._stateChange.emit({ type: "checked", checked: this.checked })), e.has("disabled") && this.disabled !== e.get("disabled") && this._stateChange.emit({ type: "disabled", disabled: this.disabled });
     }
     /**
      * As an exception, panels with an expansion-panel attached are always focusable
@@ -46,11 +47,11 @@ let G = (() => {
     /**
      * As an exception, radio-panels with an expansion-panel attached are not checked automatically when navigating by keyboard
      */
-    async navigateByKeyboard(t) {
-      this._hasSelectionExpansionPanelElement ? t.focus() : await super.navigateByKeyboard(t);
+    async navigateByKeyboard(e) {
+      this._hasSelectionExpansionPanelElement ? e.focus() : await super.navigateByKeyboard(e);
     }
     render() {
-      return x`
+      return z`
       <label class="sbb-selection-panel">
         <div class="sbb-selection-panel__badge">
           <slot name="badge"></slot>
@@ -61,26 +62,27 @@ let G = (() => {
             <slot name="suffix"></slot>
           </span>
           <slot name="subtext"></slot>
-          ${this.expansionState ? x`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : E}
+          ${this.expansionState ? z`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : v}
         </span>
       </label>
     `;
     }
   }, o = new WeakMap(), n = l, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
-    d = [C({ reflect: !0 }), B((a, r) => {
-      var h;
-      return (h = a.group) != null && h.size ? a.group.size === "xs" ? "s" : a.group.size : r;
-    })], y(l, null, d, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, r) => {
-      a.size = r;
-    } }, metadata: t }, p, u), y(null, s = { value: n }, e, { kind: "class", name: n.name, metadata: t }, null, i), n = s.value, t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), l.styles = [M, I], l.events = {
-    stateChange: "stateChange",
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
+    u = [k({ reflect: !0 }), R((a, c) => {
+      var f;
+      return (f = a.group) != null && f.size ? a.group.size === "xs" ? "s" : a.group.size : c;
+    })], x(l, null, u, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, c) => {
+      a.size = c;
+    } }, metadata: e }, h, p), x(null, s = { value: n }, t, { kind: "class", name: n.name, metadata: e }, null, i), r = n = s.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), l.styles = [U, M], l.events = {
     change: "change",
     input: "input",
-    panelConnected: "panelConnected"
-  }, b(n, i), n;
+    panelConnected: "panelConnected",
+    stateChange: "stateChange"
+  }, b(n, i), l);
+  return r = n;
 })();
 export {
-  G as SbbRadioButtonPanelElement
+  N as SbbRadioButtonPanelElement
 };

package/screen-reader-only.js

@@ -1,8 +1,8 @@
-import { __esDecorate as o, __runInitializers as n } from "tslib";
+import { __esDecorate as n, __runInitializers as o } from "tslib";
 import { css as c, html as m, LitElement as d } from "lit";
 import { customElement as u } from "lit/decorators.js";
 const p = c`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
-let _ = (() => {
+let y = (() => {
   var t;
   let i = [u("sbb-screen-reader-only")], l, r = [], e, s = d;
   return t = class extends s {
@@ -11,9 +11,9 @@ let _ = (() => {
     }
   }, e = t, (() => {
     const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
-    o(null, l = { value: e }, i, { kind: "class", name: e.name, metadata: a }, null, r), e = l.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), t.styles = p, n(e, r), e;
+    n(null, l = { value: e }, i, { kind: "class", name: e.name, metadata: a }, null, r), e = l.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), t.styles = p, o(e, r), e;
 })();
 export {
-  _ as SbbScreenReaderOnlyElement
+  y as SbbScreenReaderOnlyElement
 };