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

package/popover/popover/popover.component.js

@@ -1,36 +1,36 @@
-var R = (i) => {
+var $ = (i) => {
   throw TypeError(i);
 };
-var N = (i, r, a) => r.has(i) || R("Cannot " + a);
-var v = (i, r, a) => (N(i, r, "read from private field"), a ? a.call(i) : r.get(i)), g = (i, r, a) => r.has(i) ? R("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(i) : r.set(i, a), l = (i, r, a, n) => (N(i, r, "write to private field"), n ? n.call(i, a) : r.set(i, a), a);
+var R = (i, r, a) => r.has(i) || $("Cannot " + a);
+var v = (i, r, a) => (R(i, r, "read from private field"), a ? a.call(i) : r.get(i)), g = (i, r, a) => r.has(i) ? $("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(i) : r.set(i, a), l = (i, r, a, n) => (R(i, r, "write to private field"), n ? n.call(i, a) : r.set(i, a), a);
 import { __runInitializers as b, __esDecorate as u } from "tslib";
-import { css as Z, isServer as O, html as S, nothing as j } from "lit";
-import { property as T, customElement as q } from "lit/decorators.js";
-import { ref as W } from "lit/directives/ref.js";
-import { SbbFocusTrapController as Q, IS_FOCUSABLE_QUERY as V, sbbInputModalityDetector as X, isFakeMousedownFromScreenReader as G } from "../../core/a11y.js";
-import { SbbOpenCloseBaseElement as k } from "../../core/base-elements.js";
-import { SbbMediaQueryPointerCoarse as J, SbbEscapableOverlayController as K, SbbLanguageController as ee } from "../../core/controllers.js";
-import { idReference as te, forceType as x } from "../../core/decorators.js";
-import { isZeroAnimationDuration as oe } from "../../core/dom.js";
-import { EventEmitter as H, composedPathHasAttribute as se } from "../../core/eventing.js";
-import { i18nClosePopover as ie } from "../../core/i18n.js";
-import { SbbHydrationMixin as re } from "../../core/mixins.js";
-import { isEventOnElement as Y, removeAriaOverlayTriggerAttributes as ae, setAriaOverlayTriggerAttributes as ne, getElementPosition as le } from "../../core/overlay.js";
+import { css as H, isServer as L, html as O, nothing as Y } from "lit";
+import { property as T, customElement as Z } from "lit/decorators.js";
+import { ref as j } from "lit/directives/ref.js";
+import { SbbFocusTrapController as q, IS_FOCUSABLE_QUERY as W, sbbInputModalityDetector as Q, isFakeMousedownFromScreenReader as V } from "../../core/a11y.js";
+import { SbbOpenCloseBaseElement as X } from "../../core/base-elements.js";
+import { SbbMediaQueryPointerCoarse as G, SbbEscapableOverlayController as J, SbbLanguageController as K } from "../../core/controllers.js";
+import { idReference as ee, forceType as x } from "../../core/decorators.js";
+import { isZeroAnimationDuration as te } from "../../core/dom.js";
+import { composedPathHasAttribute as oe } from "../../core/eventing.js";
+import { i18nClosePopover as se } from "../../core/i18n.js";
+import { SbbHydrationMixin as ie } from "../../core/mixins.js";
+import { isEventOnElement as N, removeAriaOverlayTriggerAttributes as re, setAriaOverlayTriggerAttributes as ae, getElementPosition as ne } from "../../core/overlay.js";
 import "../../button/secondary-button.js";
-const be = Z`*,:before,:after{box-sizing:border-box}:host{--sbb-popover-position: absolute;--sbb-popover-position-x: 0;--sbb-popover-position-y: 0;--sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);--sbb-popover-arrow-position-x: 0;--sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));--sbb-popover-inset: 0 auto auto 0;--sbb-popover-border-radius: var(--sbb-border-radius-8x);--sbb-popover-padding: var(--sbb-spacing-fixed-4x);--sbb-popover-background: var(--sbb-color-white);--sbb-popover-color: var(--sbb-color-charcoal);--sbb-popover-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-popover-animation-easing: ease-out;--sbb-popover-transform: translateY(var(--sbb-spacing-fixed-2x));--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);outline:none!important;display:none}:host([data-state]:not([data-state=closed])){display:block;--sbb-popover-inset: 0}:host([data-position=above]){--sbb-popover-transform: translateY(calc(var(--sbb-spacing-fixed-2x) * -1))}.sbb-popover:after,.sbb-popover__content:before{content:"";position:absolute;display:block;width:var(--sbb-popover-arrow-size);height:var(--sbb-popover-arrow-size);left:var(--sbb-popover-arrow-position-x);bottom:calc(100% - var(--sbb-popover-arrow-size) / 2);background-color:var(--sbb-popover-background);border-radius:var(--sbb-border-radius-2x) 0;transform:rotate(45deg)}.sbb-popover__container{position:fixed;inset:var(--sbb-popover-inset);pointer-events:none;z-index:var(--sbb-popover-z-index, var(--sbb-overlay-default-z-index));color:var(--sbb-popover-color)}.sbb-popover{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);display:none;position:var(--sbb-popover-position);pointer-events:all;top:var(--sbb-popover-position-y);bottom:unset;left:var(--sbb-popover-position-x);right:unset;border:none;border-radius:var(--sbb-popover-border-radius);padding:0;max-width:var(--sbb-popover-max-width);width:max-content;background-color:var(--sbb-popover-background);outline:none}:host(:focus-visible) .sbb-popover{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host([data-state]:not([data-state=closed])) .sbb-popover{display:block;animation-name:open;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}:host([data-state][data-state=closing]) .sbb-popover{pointer-events:none;animation-name:close;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}.sbb-popover:after{z-index:-1;box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}@media (forced-colors: active){.sbb-popover:after{outline:var(--sbb-border-width-1x) solid CanvasText}}:host([data-position=above]) .sbb-popover:after{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@media (forced-colors: active){.sbb-popover{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-popover:before{content:"";display:block;position:absolute;inset:0;z-index:-1;background-color:transparent}:host([data-position=below]) .sbb-popover:before{inset-block-start:calc(-1 * var(--sbb-spacing-fixed-6x))}:host([data-position=above]) .sbb-popover:before{inset-block-end:calc(-1 * var(--sbb-spacing-fixed-6x))}.sbb-popover__content{display:flex;gap:var(--sbb-spacing-fixed-4x);border-radius:var(--sbb-popover-border-radius);padding:var(--sbb-popover-padding);outline:none;background-color:var(--sbb-popover-background);overflow:hidden;flex-direction:row-reverse}:host([data-position=above]) .sbb-popover__content:before{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@keyframes open{0%{opacity:0;transform:var(--sbb-popover-transform)}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:var(--sbb-popover-transform)}}`, pe = 16, ce = 32;
-let he = 0;
-const L = /* @__PURE__ */ new Set(), de = O ? !1 : matchMedia(J).matches;
-let ve = (() => {
+const le = H`*,:before,:after{box-sizing:border-box}:host{--sbb-popover-position: absolute;--sbb-popover-position-x: 0;--sbb-popover-position-y: 0;--sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);--sbb-popover-arrow-position-x: 0;--sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));--sbb-popover-inset: 0 auto auto 0;--sbb-popover-border-radius: var(--sbb-border-radius-8x);--sbb-popover-padding: var(--sbb-spacing-fixed-4x);--sbb-popover-background: var(--sbb-color-white);--sbb-popover-color: var(--sbb-color-charcoal);--sbb-popover-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-popover-animation-easing: ease-out;--sbb-popover-transform: translateY(var(--sbb-spacing-fixed-2x));--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);outline:none!important;display:none}:host([data-state]:not([data-state=closed])){display:block;--sbb-popover-inset: 0}:host([data-position=above]){--sbb-popover-transform: translateY(calc(var(--sbb-spacing-fixed-2x) * -1))}.sbb-popover:after,.sbb-popover__content:before{content:"";position:absolute;display:block;width:var(--sbb-popover-arrow-size);height:var(--sbb-popover-arrow-size);left:var(--sbb-popover-arrow-position-x);bottom:calc(100% - var(--sbb-popover-arrow-size) / 2);background-color:var(--sbb-popover-background);border-radius:var(--sbb-border-radius-2x) 0;transform:rotate(45deg)}.sbb-popover__container{position:fixed;inset:var(--sbb-popover-inset);pointer-events:none;z-index:var(--sbb-popover-z-index, var(--sbb-overlay-default-z-index));color:var(--sbb-popover-color)}.sbb-popover{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);display:none;position:var(--sbb-popover-position);pointer-events:all;top:var(--sbb-popover-position-y);bottom:unset;left:var(--sbb-popover-position-x);right:unset;border:none;border-radius:var(--sbb-popover-border-radius);padding:0;max-width:var(--sbb-popover-max-width);width:max-content;background-color:var(--sbb-popover-background);outline:none}:host(:focus-visible) .sbb-popover{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host([data-state]:not([data-state=closed])) .sbb-popover{display:block;animation-name:open;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}:host([data-state][data-state=closing]) .sbb-popover{pointer-events:none;animation-name:close;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}.sbb-popover:after{z-index:-1;box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}@media (forced-colors: active){.sbb-popover:after{outline:var(--sbb-border-width-1x) solid CanvasText}}:host([data-position=above]) .sbb-popover:after{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@media (forced-colors: active){.sbb-popover{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-popover:before{content:"";display:block;position:absolute;inset:0;z-index:-1;background-color:transparent}:host([data-position=below]) .sbb-popover:before{inset-block-start:calc(-1 * var(--sbb-spacing-fixed-6x))}:host([data-position=above]) .sbb-popover:before{inset-block-end:calc(-1 * var(--sbb-spacing-fixed-6x))}.sbb-popover__content{display:flex;gap:var(--sbb-spacing-fixed-4x);border-radius:var(--sbb-popover-border-radius);padding:var(--sbb-popover-padding);outline:none;background-color:var(--sbb-popover-background);overflow:hidden;flex-direction:row-reverse}:host([data-position=above]) .sbb-popover__content:before{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@keyframes open{0%{opacity:0;transform:var(--sbb-popover-transform)}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:var(--sbb-popover-transform)}}`, be = 16, pe = 32;
+let ce = 0;
+const k = /* @__PURE__ */ new Set(), he = L ? !1 : matchMedia(G).matches;
+let de = (() => {
   var h, p;
-  let i = re(k), r, a = [], n = [];
+  let i = ie(X), r, a = [], n = [];
   return p = class extends i {
     constructor() {
       super(...arguments);
       g(this, h);
-      l(this, h, b(this, a, null)), this.willClose = (b(this, n), new H(this, k.events.willClose, { cancelable: !0 })), this.didClose = new H(this, k.events.didClose, { cancelable: !0 }), this._skipCloseFocus = !1, this._escapableOverlayController = new K(this), this._focusTrapController = new Q(this), this._pointerDownListener = (e) => {
-        this._isPointerDownEventOnPopover = Y(this.overlay, e);
+      l(this, h, b(this, a, null)), this._nextFocusedElement = b(this, n), this._skipCloseFocus = !1, this._escapableOverlayController = new J(this), this._focusTrapController = new q(this), this._pointerDownListener = (e) => {
+        this._isPointerDownEventOnPopover = N(this.overlay, e);
       }, this._closeOnBackdropClick = (e) => {
-        !this._isPointerDownEventOnPopover && !Y(this.overlay, e) && (this._nextFocusedElement = e.composedPath().filter((s) => s instanceof window.HTMLElement).find((s) => s.matches(V)), clearTimeout(this.closeTimeout), this.close());
+        !this._isPointerDownEventOnPopover && !N(this.overlay, e) && (this._nextFocusedElement = e.composedPath().filter((s) => s instanceof window.HTMLElement).find((s) => s.matches(W)), clearTimeout(this.closeTimeout), this.close());
       };
     }
     /**
@@ -46,8 +46,8 @@ let ve = (() => {
     }
     /** Opens the popover on trigger click. */
     open() {
-      if (!(this.state !== "closed" && this.state !== "closing" || !this.overlay || !this.willOpen.emit())) {
-        for (const e of L) {
+      if (!(this.state !== "closed" && this.state !== "closing" || !this.overlay || !this.dispatchBeforeOpenEvent())) {
+        for (const e of k) {
           const s = e.getAttribute("data-state");
           s && (s === "opened" || s === "opening") && e.close();
         }
@@ -56,32 +56,32 @@ let ve = (() => {
     }
     /** Closes the popover. */
     close(e) {
-      this.state !== "opened" && this.state !== "opening" || (this._popoverCloseElement = e, this.willClose.emit({ closeTarget: e }) && (this.state = "closing", this.inert = !0, this._triggerElement?.setAttribute("aria-expanded", "false"), this._isZeroAnimationDuration() && this._handleClosing()));
+      this.state !== "opened" && this.state !== "opening" || (this._popoverCloseElement = e, this.dispatchBeforeCloseEvent({ closeTarget: e ?? null }) && (this.state = "closing", this.inert = !0, this._triggerElement?.setAttribute("aria-expanded", "false"), this._isZeroAnimationDuration() && this._handleClosing()));
     }
     _isZeroAnimationDuration() {
-      return oe(this, "--sbb-popover-animation-duration");
+      return te(this, "--sbb-popover-animation-duration");
     }
     _handleClosing() {
-      this.state = "closed", this.hidePopover?.(), this.overlay?.firstElementChild?.scrollTo(0, 0), this.removeAttribute("tabindex"), this._skipCloseFocus || (this._nextFocusedElement || this._triggerElement)?.focus(), this._escapableOverlayController.disconnect(), this.didClose.emit({ closeTarget: this._popoverCloseElement }), this._openStateController?.abort(), this._focusTrapController.enabled = !1;
+      this.state = "closed", this.hidePopover?.(), this.overlay?.firstElementChild?.scrollTo(0, 0), this.removeAttribute("tabindex"), this._skipCloseFocus || (this._nextFocusedElement || this._triggerElement)?.focus(), this._escapableOverlayController.disconnect(), this.dispatchCloseEvent({ closeTarget: this._popoverCloseElement ?? null }), this._openStateController?.abort(), this._focusTrapController.enabled = !1;
     }
     _handleOpening() {
-      this.state = "opened", this.inert = !1, this._attachWindowEvents(), this._escapableOverlayController.connect(), this._setPopoverFocus(), this._focusTrapController.enabled = !0, this.didOpen.emit();
+      this.state = "opened", this.inert = !1, this._attachWindowEvents(), this._escapableOverlayController.connect(), this._setPopoverFocus(), this._focusTrapController.enabled = !0, this.dispatchOpenEvent();
     }
     connectedCallback() {
-      this.popover = "manual", super.connectedCallback(), this.id ||= `sbb-popover-${++he}`, this.state = "closed", L.add(this), this.hasUpdated && this._configureTrigger();
+      this.popover = "manual", super.connectedCallback(), this.id ||= `sbb-popover-${++ce}`, this.state = "closed", k.add(this), this.hasUpdated && this._configureTrigger();
     }
-    requestUpdate(e, s, m) {
-      super.requestUpdate(e, s, m), !O && (!e || e === "trigger" || e === "hoverTrigger") && this.hasUpdated && this._configureTrigger();
+    requestUpdate(e, s, f) {
+      super.requestUpdate(e, s, f), !L && (!e || e === "trigger" || e === "hoverTrigger") && this.hasUpdated && this._configureTrigger();
     }
     firstUpdated(e) {
       super.firstUpdated(e), this._configureTrigger();
     }
     disconnectedCallback() {
-      super.disconnectedCallback(), this._triggerElement = null, this._triggerAbortController?.abort(), this._openStateController?.abort(), L.delete(this);
+      super.disconnectedCallback(), this._triggerElement = null, this._triggerAbortController?.abort(), this._openStateController?.abort(), k.delete(this);
     }
     // Check if the trigger is valid and attach click event listeners.
     _configureTrigger() {
-      if (!O) {
+      if (!L) {
         if (this.hydrationRequired) {
           this.hydrationComplete.then(() => this._configureTrigger());
           return;
@@ -90,7 +90,7 @@ let ve = (() => {
       }
     }
     configureTrigger(e) {
-      this._triggerAbortController?.abort(), ae(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (ne(this._triggerElement, "dialog", this.id, this.state), this._triggerAbortController = new AbortController(), this.registerTriggerListeners(this._triggerAbortController.signal));
+      this._triggerAbortController?.abort(), re(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (ae(this._triggerElement, "dialog", this.id, this.state), this._triggerAbortController = new AbortController(), this.registerTriggerListeners(this._triggerAbortController.signal));
     }
     registerTriggerListeners(e) {
       this._triggerElement.addEventListener("click", () => this.open(), { signal: e });
@@ -113,7 +113,7 @@ let ve = (() => {
     }
     // Close the popover on click of any element that has the 'sbb-popover-close' attribute.
     _closeOnSbbPopoverCloseClick(e) {
-      const s = se(e, "sbb-popover-close", this);
+      const s = oe(e, "sbb-popover-close", this);
       s && !s.hasAttribute("disabled") && (clearTimeout(this.closeTimeout), this.close(s));
     }
     // Set popover position (x, y) to '0' once the popover is closed and the transition ended to prevent the
@@ -136,9 +136,9 @@ let ve = (() => {
     _setPopoverPosition() {
       if (!this.overlay || !this._triggerElement)
         return;
-      const e = le(this.overlay, this._triggerElement, this.shadowRoot.querySelector(".sbb-popover__container"), {
-        verticalOffset: pe,
-        horizontalOffset: ce,
+      const e = ne(this.overlay, this._triggerElement, this.shadowRoot.querySelector(".sbb-popover__container"), {
+        verticalOffset: be,
+        horizontalOffset: pe,
         centered: !0,
         responsiveHeight: !0
       });
@@ -146,14 +146,23 @@ let ve = (() => {
       const s = this._triggerElement.getBoundingClientRect().left - e.left + this._triggerElement.clientWidth / 2 - 8;
       this.style.setProperty("--sbb-popover-position-x", `${e.left}px`), this.style.setProperty("--sbb-popover-position-y", `${e.top}px`), this.style.setProperty("--sbb-popover-arrow-position-x", `${s}px`);
     }
+    dispatchBeforeCloseEvent(e) {
+      return this.dispatchEvent(new CustomEvent("beforeclose", {
+        detail: e,
+        cancelable: !0
+      }));
+    }
+    dispatchCloseEvent(e) {
+      return this.dispatchEvent(new CustomEvent("close", { detail: e }));
+    }
     render() {
-      return S`
+      return O`
       <div class="sbb-popover__container">
         <div
           @animationend=${this._onPopoverAnimationEnd}
           class="sbb-popover"
           role="tooltip"
-          ${W((e) => this.overlay = e)}
+          ${j((e) => this.overlay = e)}
         >
           <div
             @click=${(e) => this._closeOnSbbPopoverCloseClick(e)}
@@ -167,24 +176,24 @@ let ve = (() => {
     }
   }, h = new WeakMap(), (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
-    r = [te(), T()], u(p, null, r, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (s) => "trigger" in s, get: (s) => s.trigger, set: (s, m) => {
-      s.trigger = m;
+    r = [ee(), T()], u(p, null, r, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (s) => "trigger" in s, get: (s) => s.trigger, set: (s, f) => {
+      s.trigger = f;
     } }, metadata: e }, a, n), e && Object.defineProperty(p, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), p.styles = be, p;
-})(), Ae = (() => {
-  var f, _, y, w, C, c;
-  let i = [q("sbb-popover")], r, a = [], n, h = ve, p, D = [], E = [], e, s = [], m = [], A, P = [], z = [], F, B = [], I = [], M, U = [], $ = [];
+  })(), p.styles = le, p;
+})(), De = (() => {
+  var m, _, y, w, C, c;
+  let i = [Z("sbb-popover")], r, a = [], n, h = de, p, S = [], E = [], e, s = [], f = [], D, A = [], P = [], z, B = [], F = [], I, M = [], U = [];
   return c = class extends h {
     constructor() {
       super(...arguments);
-      g(this, f);
+      g(this, m);
       g(this, _);
       g(this, y);
       g(this, w);
       g(this, C);
-      l(this, f, b(this, D, !1)), l(this, _, (b(this, E), b(this, s, !1))), l(this, y, (b(this, m), b(this, P, 0))), l(this, w, (b(this, z), b(this, B, 0))), l(this, C, (b(this, I), b(this, U, ""))), this._hoverTrigger = (b(this, $), !1), this._language = new ee(this), this._overlayAbortController = null, this._onTriggerMouseEnter = () => {
+      l(this, m, b(this, S, !1)), l(this, _, (b(this, E), b(this, s, !1))), l(this, y, (b(this, f), b(this, A, 0))), l(this, w, (b(this, P), b(this, B, 0))), l(this, C, (b(this, F), b(this, M, ""))), this._hoverTrigger = (b(this, U), !1), this._language = new K(this), this._overlayAbortController = null, this._onTriggerMouseEnter = () => {
         this.state === "closed" || this.state === "closing" ? this._openTimeout = setTimeout(() => {
-          X.reset(), this.open();
+          Q.reset(), this.open();
         }, this.openDelay) : clearTimeout(this.closeTimeout);
       }, this._onTriggerMouseLeave = () => {
         this.state === "opened" || this.state === "opening" ? this.closeTimeout = setTimeout(() => this.close(), this.closeDelay) : clearTimeout(this._openTimeout);
@@ -196,10 +205,10 @@ let ve = (() => {
     }
     /** Whether the close button should be hidden. */
     get hideCloseButton() {
-      return v(this, f);
+      return v(this, m);
     }
     set hideCloseButton(o) {
-      l(this, f, o);
+      l(this, m, o);
     }
     /** Whether the popover should be triggered on hover. */
     get hoverTrigger() {
@@ -230,7 +239,7 @@ let ve = (() => {
       l(this, C, o);
     }
     configureTrigger(o) {
-      const t = this.hoverTrigger && !de;
+      const t = this.hoverTrigger && !he;
       this.trigger === o && t === this._hoverTrigger || (this._hoverTrigger !== t && (this._hoverTrigger = t, this._registerOverlayListeners()), super.configureTrigger(o));
     }
     _registerOverlayListeners() {
@@ -244,17 +253,17 @@ let ve = (() => {
       this._hoverTrigger && this.trigger ? (this.trigger.addEventListener("mouseenter", this._onTriggerMouseEnter, { signal: o }), this.trigger.addEventListener("mouseleave", this._onTriggerMouseLeave, { signal: o }), this.trigger.addEventListener("keydown", (t) => {
         (t.code === "Space" || t.code === "Enter") && this.open();
       }, { signal: o }), this.trigger.addEventListener("mousedown", (t) => {
-        G(t) && this.open();
+        V(t) && this.open();
       }, { signal: o })) : super.registerTriggerListeners(o);
     }
     firstUpdated(o) {
       super.firstUpdated(o), this._registerOverlayListeners();
     }
     renderContent() {
-      const o = S`
+      const o = O`
       <span class="sbb-popover__close">
         <sbb-secondary-button
-          aria-label=${this.accessibilityCloseLabel || ie[this._language.current]}
+          aria-label=${this.accessibilityCloseLabel || se[this._language.current]}
           size="s"
           type="button"
           icon-name="cross-small"
@@ -262,29 +271,29 @@ let ve = (() => {
         ></sbb-secondary-button>
       </span>
     `;
-      return S`
-      ${!this.hideCloseButton && !this._hoverTrigger ? o : j}
+      return O`
+      ${!this.hideCloseButton && !this._hoverTrigger ? o : Y}
       <span>
         <slot>No content</slot>
       </span>
     `;
     }
-  }, f = new WeakMap(), _ = new WeakMap(), y = new WeakMap(), w = new WeakMap(), C = new WeakMap(), n = c, (() => {
+  }, m = new WeakMap(), _ = new WeakMap(), y = new WeakMap(), w = new WeakMap(), C = new WeakMap(), n = c, (() => {
     const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
-    p = [x(), T({ attribute: "hide-close-button", type: Boolean })], e = [x(), T({ attribute: "hover-trigger", type: Boolean })], A = [x(), T({ attribute: "open-delay", type: Number })], F = [x(), T({ attribute: "close-delay", type: Number })], M = [x(), T({ attribute: "accessibility-close-label" })], u(c, null, p, { kind: "accessor", name: "hideCloseButton", static: !1, private: !1, access: { has: (t) => "hideCloseButton" in t, get: (t) => t.hideCloseButton, set: (t, d) => {
+    p = [x(), T({ attribute: "hide-close-button", type: Boolean })], e = [x(), T({ attribute: "hover-trigger", type: Boolean })], D = [x(), T({ attribute: "open-delay", type: Number })], z = [x(), T({ attribute: "close-delay", type: Number })], I = [x(), T({ attribute: "accessibility-close-label" })], u(c, null, p, { kind: "accessor", name: "hideCloseButton", static: !1, private: !1, access: { has: (t) => "hideCloseButton" in t, get: (t) => t.hideCloseButton, set: (t, d) => {
       t.hideCloseButton = d;
-    } }, metadata: o }, D, E), u(c, null, e, { kind: "accessor", name: "hoverTrigger", static: !1, private: !1, access: { has: (t) => "hoverTrigger" in t, get: (t) => t.hoverTrigger, set: (t, d) => {
+    } }, metadata: o }, S, E), u(c, null, e, { kind: "accessor", name: "hoverTrigger", static: !1, private: !1, access: { has: (t) => "hoverTrigger" in t, get: (t) => t.hoverTrigger, set: (t, d) => {
       t.hoverTrigger = d;
-    } }, metadata: o }, s, m), u(c, null, A, { kind: "accessor", name: "openDelay", static: !1, private: !1, access: { has: (t) => "openDelay" in t, get: (t) => t.openDelay, set: (t, d) => {
+    } }, metadata: o }, s, f), u(c, null, D, { kind: "accessor", name: "openDelay", static: !1, private: !1, access: { has: (t) => "openDelay" in t, get: (t) => t.openDelay, set: (t, d) => {
       t.openDelay = d;
-    } }, metadata: o }, P, z), u(c, null, F, { kind: "accessor", name: "closeDelay", static: !1, private: !1, access: { has: (t) => "closeDelay" in t, get: (t) => t.closeDelay, set: (t, d) => {
+    } }, metadata: o }, A, P), u(c, null, z, { kind: "accessor", name: "closeDelay", static: !1, private: !1, access: { has: (t) => "closeDelay" in t, get: (t) => t.closeDelay, set: (t, d) => {
       t.closeDelay = d;
-    } }, metadata: o }, B, I), u(c, null, M, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (t) => "accessibilityCloseLabel" in t, get: (t) => t.accessibilityCloseLabel, set: (t, d) => {
+    } }, metadata: o }, B, F), u(c, null, I, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (t) => "accessibilityCloseLabel" in t, get: (t) => t.accessibilityCloseLabel, set: (t, d) => {
       t.accessibilityCloseLabel = d;
-    } }, metadata: o }, U, $), u(null, r = { value: n }, i, { kind: "class", name: n.name, metadata: o }, null, a), n = r.value, o && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o }), b(n, a);
+    } }, metadata: o }, M, U), u(null, r = { value: n }, i, { kind: "class", name: n.name, metadata: o }, null, a), n = r.value, o && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o }), b(n, a);
   })(), n;
 })();
 export {
-  ve as SbbPopoverBaseElement,
-  Ae as SbbPopoverElement
+  de as SbbPopoverBaseElement,
+  De as SbbPopoverElement
 };

package/popover/popover-trigger/popover-trigger.component.d.ts

@@ -5,7 +5,6 @@ declare const SbbPopoverTriggerElement_base: import('../../core/mixins.js').Abst
  * It can be used as a trigger for the `sbb-popover` component.
  *
  * @slot - Use the unnamed slot to add content to the `sbb-popover-trigger`.
- * @overrideType value - string
  */
 export declare class SbbPopoverTriggerElement extends SbbPopoverTriggerElement_base {
     static styles: CSSResultGroup;

package/popover/popover-trigger/popover-trigger.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover-trigger.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/popover/popover-trigger/popover-trigger.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;;AAOnE;;;;;GAKG;AACH,qBAEM,wBAAyB,SAAQ,6BAEtC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtC,iBAAiB,IAAI,IAAI;cAUtB,cAAc,IAAI,cAAc;CAOpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}
+{"version":3,"file":"popover-trigger.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/popover/popover-trigger/popover-trigger.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;;AAOnE;;;;GAIG;AACH,qBAEM,wBAAyB,SAAQ,6BAEtC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtC,iBAAiB,IAAI,IAAI;cAUtB,cAAc,IAAI,cAAc;CAOpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}

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

@@ -5,14 +5,14 @@ declare const SbbRadioButtonElement_base: import('../../core/mixins.js').Abstrac
  * It displays a radio button enhanced with the SBB Design.
  *
  * @slot - Use the unnamed slot to add content to the radio label.
- * @event {Event} change - Fired on change.
- * @event {InputEvent} input - Fired on input.
+ * @event {Event} change - The change event is fired when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.
+ * @event {InputEvent} input - The input event fires when the value has been changed as a direct result of a user action.
  * @overrideType value - (T = string) | null
  */
 export declare class SbbRadioButtonElement<T = string> extends SbbRadioButtonElement_base {
     static styles: CSSResultGroup;
     static readonly events: {
-        readonly stateChange: "stateChange";
+        readonly statechange: "statechange";
         readonly change: "change";
         readonly input: "input";
     };

package/radio-button/radio-button/radio-button.component.js

@@ -4,19 +4,19 @@ var x = (t) => {
 var S = (t, e, s) => e.has(t) || x("Cannot " + s);
 var b = (t, e, s) => (S(t, e, "read from private field"), s ? s.call(t) : e.get(t)), m = (t, e, s) => e.has(t) ? x("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), d = (t, e, s, i) => (S(t, e, "write to private field"), i ? i.call(t, s) : e.set(t, s), s);
 import { __esDecorate as f, __runInitializers as c } from "tslib";
-import { css as E, LitElement as B, html as C } from "lit";
-import { customElement as I, property as k } from "lit/decorators.js";
-import { slotState as D, getOverride as O } from "../../core/decorators.js";
-import { isLean as j } from "../../core/dom.js";
-import { SbbRadioButtonCommonElementMixin as w, radioButtonCommonStyle as L } from "../common.js";
+import { css as E, LitElement as B, html as I } from "lit";
+import { customElement as D, property as k } from "lit/decorators.js";
+import { slotState as O, getOverride as j } from "../../core/decorators.js";
+import { isLean as w } from "../../core/dom.js";
+import { SbbRadioButtonCommonElementMixin as C, radioButtonCommonStyle as L } from "../common.js";
 const R = E`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}.sbb-radio-button{display:block}:host(:focus-visible) .sbb-radio-button{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}`;
 let J = (() => {
   var r, n, o;
-  let t = [I("sbb-radio-button"), D()], e, s = [], i, _ = w(B), v, h = [], p = [], z, g = [], y = [];
+  let t = [D("sbb-radio-button"), O()], e, s = [], i, _ = C(B), v, h = [], p = [], z, g = [], y = [];
   return o = class extends _ {
     constructor() {
       super(...arguments);
-      m(this, r, c(this, h, j() ? "xs" : "m"));
+      m(this, r, c(this, h, w() ? "xs" : "m"));
       m(this, n, (c(this, p), c(this, g, null)));
       c(this, y);
     }
@@ -40,7 +40,7 @@ let J = (() => {
       d(this, n, l);
     }
     render() {
-      return C`
+      return I`
       <label class="sbb-radio-button">
         <span class="sbb-radio-button__label-slot">
           <slot></slot>
@@ -50,13 +50,13 @@ let J = (() => {
     }
   }, r = new WeakMap(), n = new WeakMap(), i = o, (() => {
     const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
-    v = [k({ reflect: !0 }), O((a, u) => a.group?.size ?? u)], z = [k()], f(o, null, v, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, u) => {
+    v = [k({ reflect: !0 }), j((a, u) => a.group?.size ?? u)], z = [k()], f(o, null, v, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, u) => {
       a.size = u;
     } }, metadata: l }, h, p), f(o, null, z, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (a) => "value" in a, get: (a) => a.value, set: (a, u) => {
       a.value = u;
     } }, metadata: l }, g, y), f(null, e = { value: i }, t, { kind: "class", name: i.name, metadata: l }, null, s), i = e.value, l && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
   })(), o.styles = [L, R], o.events = {
-    stateChange: "stateChange",
+    statechange: "statechange",
     change: "change",
     input: "input"
   }, c(i, s), i;

package/radio-button/radio-button-group/radio-button-group.component.d.ts

@@ -9,7 +9,6 @@ declare const SbbRadioButtonGroupElement_base: import('../../core/mixins.js').Ab
  *
  * @slot - Use the unnamed slot to add `sbb-radio-button` elements to the `sbb-radio-button-group`.
  * @slot error - Use this to provide a `sbb-form-error` to show an error message.
- * @event {CustomEvent<void>} didChange - Deprecated. Only used for React. Will probably be removed once React 19 is available. Emits whenever the `sbb-radio-group` value changes.
  * @overrideType value - (T = string) | null
  */
 export declare class SbbRadioButtonGroupElement<T = string> extends SbbRadioButtonGroupElement_base {
@@ -55,11 +54,6 @@ export declare class SbbRadioButtonGroupElement<T = string> extends SbbRadioButt
      * List of contained radio buttons.
      */
     get radioButtons(): (SbbRadioButtonElement<T> | SbbRadioButtonPanelElement<T>)[];
-    /**
-     * Emits whenever the `sbb-radio-group` value changes.
-     * @deprecated only used for React. Will probably be removed once React 19 is available.
-     */
-    private _didChange;
     constructor();
     connectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues<this>): void;

package/radio-button/radio-button-group/radio-button-group.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button-group.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button-group/radio-button-group.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAElF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;;AAMhE;;;;;;;GAOG;AACH,qBAGM,0BAA0B,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,+BAEpD;IACC,gBAAgC,IAAI,gBAAgB;IACpD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX;;OAEG;IACH,SAEgB,mBAAmB,EAAE,OAAO,CAAS;IAErD;;OAEG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C;;OAEG;IACH,IACW,KAAK,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,EAa7B;IACD,IAAW,KAAK,IAAI,CAAC,GAAG,IAAI,CAE3B;IACD;;OAEG;IACH,OAAO,CAAC,cAAc,CAAkB;IAExC;;;OAGG;IACH,SAA4B,IAAI,EAAE,kBAAkB,CAAyB;IAE7E;;OAEG;IACH,SACgB,cAAc,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAEhE;;OAEG;IACH,SACgB,WAAW,EAAE,cAAc,CAAgB;IAE3D,SAEgB,IAAI,EAAE,MAAM,CAAwC;IAEpE;;OAEG;IACH,IAAW,YAAY,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAAG,0BAA0B,CAAC,CAAC,CAAC,CAAC,EAAE,CAOtF;IAED;;;OAGG;IACH,OAAO,CAAC,UAAU,CAGhB;;IAOc,iBAAiB,IAAI,IAAI;cAKtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAiBzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,cAAc;IAetB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAIzB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;cAON,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}
+{"version":3,"file":"radio-button-group.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button-group/radio-button-group.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAElF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;;AAMhE;;;;;;GAMG;AACH,qBAGM,0BAA0B,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,+BAEpD;IACC,gBAAgC,IAAI,gBAAgB;IACpD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX;;OAEG;IACH,SAEgB,mBAAmB,EAAE,OAAO,CAAS;IAErD;;OAEG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C;;OAEG;IACH,IACW,KAAK,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,EAa7B;IACD,IAAW,KAAK,IAAI,CAAC,GAAG,IAAI,CAE3B;IACD;;OAEG;IACH,OAAO,CAAC,cAAc,CAAkB;IAExC;;;OAGG;IACH,SAA4B,IAAI,EAAE,kBAAkB,CAAyB;IAE7E;;OAEG;IACH,SACgB,cAAc,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAEhE;;OAEG;IACH,SACgB,WAAW,EAAE,cAAc,CAAgB;IAE3D,SAEgB,IAAI,EAAE,MAAM,CAAwC;IAEpE;;OAEG;IACH,IAAW,YAAY,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAAG,0BAA0B,CAAC,CAAC,CAAC,CAAC,EAAE,CAOtF;;IAOe,iBAAiB,IAAI,IAAI;cAKtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAiBzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,cAAc;IAoBtB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAIzB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;cAON,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}

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

@@ -4,17 +4,16 @@ var T = (a) => {
 var $ = (a, r, n) => r.has(a) || T("Cannot " + n);
 var u = (a, r, n) => ($(a, r, "read from private field"), n ? n.call(a) : r.get(a)), b = (a, r, n) => r.has(a) ? T("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, n), l = (a, r, n, d) => ($(a, r, "write to private field"), d ? d.call(a, n) : r.set(a, n), n);
 import { __esDecorate as h, __runInitializers as s } from "tslib";
-import { css as H, LitElement as J, html as K } from "lit";
-import { customElement as Q, property as c } from "lit/decorators.js";
-import { slotState as W, forceType as w } from "../../core/decorators.js";
-import { isLean as X } from "../../core/dom.js";
-import { EventEmitter as Y } from "../../core/eventing.js";
-import { SbbDisabledMixin as Z, SbbElementInternalsMixin as P } from "../../core/mixins.js";
-const tt = H`*,:before,:after{box-sizing:border-box}:host{--sbb-radio-button-group-orientation: row;--sbb-radio-button-group-width: max-content;--sbb-radio-button-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);display:block}:host ::slotted(sbb-radio-button-panel){flex:auto}:host([orientation=vertical]){--sbb-radio-button-group-orientation: column;--sbb-radio-button-group-width: 100%}:host([orientation=vertical]) ::slotted(sbb-radio-button-panel){width:100%}:host([data-has-panel]){--sbb-radio-button-group-width: 100%}:host([data-has-panel][orientation=vertical]){--sbb-radio-button-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x)}@media (min-width: 0rem){:host([orientation=vertical][horizontal-from=zero]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=zero]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=zero]:not([data-has-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 22.5rem){:host([orientation=vertical][horizontal-from=micro]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=micro]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=micro]:not([data-has-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 37.5rem){:host([orientation=vertical][horizontal-from=small]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=small]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=small]:not([data-has-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 52.5rem){:host([orientation=vertical][horizontal-from=medium]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=medium]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=medium]:not([data-has-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 64rem){:host([orientation=vertical][horizontal-from=large]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=large]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=large]:not([data-has-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 80rem){:host([orientation=vertical][horizontal-from=wide]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=wide]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=wide]:not([data-has-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 90rem){:host([orientation=vertical][horizontal-from=ultra]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=ultra]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=ultra]:not([data-has-panel])){--sbb-radio-button-group-width: max-content}}.sbb-radio-group{display:flex;flex-direction:var(--sbb-radio-button-group-orientation);gap:var(--sbb-radio-button-group-gap);align-items:flex-start;width:var(--sbb-radio-button-group-width)}.sbb-radio-group__error{display:inline-block;margin-block-start:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=error])) .sbb-radio-group__error{display:none}`;
-let et = 0, ut = (() => {
+import { css as G, LitElement as H, html as J } from "lit";
+import { customElement as K, property as c } from "lit/decorators.js";
+import { slotState as Q, forceType as v } from "../../core/decorators.js";
+import { isLean as W } from "../../core/dom.js";
+import { SbbDisabledMixin as X, SbbElementInternalsMixin as Y } from "../../core/mixins.js";
+const Z = G`*,:before,:after{box-sizing:border-box}:host{--sbb-radio-button-group-orientation: row;--sbb-radio-button-group-width: max-content;--sbb-radio-button-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);display:block}:host ::slotted(sbb-radio-button-panel){flex:auto}:host([orientation=vertical]){--sbb-radio-button-group-orientation: column;--sbb-radio-button-group-width: 100%}:host([orientation=vertical]) ::slotted(sbb-radio-button-panel){width:100%}:host([data-has-panel]){--sbb-radio-button-group-width: 100%}:host([data-has-panel][orientation=vertical]){--sbb-radio-button-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x)}@media (min-width: 0rem){:host([orientation=vertical][horizontal-from=zero]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=zero]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=zero]:not([data-has-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 22.5rem){:host([orientation=vertical][horizontal-from=micro]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=micro]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=micro]:not([data-has-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 37.5rem){:host([orientation=vertical][horizontal-from=small]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=small]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=small]:not([data-has-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 52.5rem){:host([orientation=vertical][horizontal-from=medium]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=medium]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=medium]:not([data-has-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 64rem){:host([orientation=vertical][horizontal-from=large]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=large]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=large]:not([data-has-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 80rem){:host([orientation=vertical][horizontal-from=wide]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=wide]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=wide]:not([data-has-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 90rem){:host([orientation=vertical][horizontal-from=ultra]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=ultra]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=ultra]:not([data-has-panel])){--sbb-radio-button-group-width: max-content}}.sbb-radio-group{display:flex;flex-direction:var(--sbb-radio-button-group-orientation);gap:var(--sbb-radio-button-group-gap);align-items:flex-start;width:var(--sbb-radio-button-group-width)}.sbb-radio-group__error{display:inline-block;margin-block-start:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=error])) .sbb-radio-group__error{display:none}`;
+let P = 0, lt = (() => {
   var m, p, f, _, g, z, i;
-  let a = [Q("sbb-radio-button-group"), W()], r, n = [], d, x = Z(P(J)), y = [], E, S = [], k = [], q, B = [], C = [], I, F, R = [], U = [], N, V = [], D = [], A, L = [], j = [], G, M = [], O = [];
-  var v = (i = class extends x {
+  let a = [K("sbb-radio-button-group"), Q()], r, n = [], d, w = X(Y(H)), x = [], y, E = [], S = [], k, q = [], B = [], I, F, C = [], R = [], U, N = [], V = [], D, A = [], L = [], j, M = [], O = [];
+  return i = class extends w {
     constructor() {
       super();
       b(this, m);
@@ -23,7 +22,7 @@ let et = 0, ut = (() => {
       b(this, _);
       b(this, g);
       b(this, z);
-      l(this, m, (s(this, y), s(this, S, !1))), l(this, p, (s(this, k), s(this, B, !1))), this._fallbackValue = (s(this, C), null), l(this, f, s(this, R, X() ? "xs" : "m")), l(this, _, (s(this, U), s(this, V, null))), l(this, g, (s(this, D), s(this, L, "horizontal"))), l(this, z, (s(this, j), s(this, M, `sbb-radio-button-group-${++et}`))), this._didChange = (s(this, O), new Y(this, v.events.didChange)), this.addEventListener?.("change", (e) => this._onRadioChange(e));
+      l(this, m, (s(this, x), s(this, E, !1))), l(this, p, (s(this, S), s(this, q, !1))), this._fallbackValue = (s(this, B), null), l(this, f, s(this, C, W() ? "xs" : "m")), l(this, _, (s(this, R), s(this, N, null))), l(this, g, (s(this, V), s(this, A, "horizontal"))), l(this, z, (s(this, L), s(this, M, `sbb-radio-button-group-${++P}`))), s(this, O), this.addEventListener?.("change", (e) => this._onRadioChange(e));
     }
     /**
      * Whether the radios can be deselected.
@@ -110,7 +109,7 @@ let et = 0, ut = (() => {
     }
     _onRadioChange(e) {
       const t = e.target;
-      t.localName !== "sbb-radio-button" && t.localName !== "sbb-radio-button-panel" || t.group !== this || (this._fallbackValue = null, this._didChange.emit());
+      t.localName !== "sbb-radio-button" && t.localName !== "sbb-radio-button-panel" || t.group !== this || (this._fallbackValue = null, this.dispatchEvent(new Event("didChange", { bubbles: !0 })));
     }
     /**
      * Proxy 'name' to child radio-buttons
@@ -126,7 +125,7 @@ let et = 0, ut = (() => {
       this._fallbackValue && (this.value = this.value);
     }
     render() {
-      return K`
+      return J`
       <div class="sbb-radio-group">
         <slot
           @slotchange=${() => {
@@ -140,29 +139,28 @@ let et = 0, ut = (() => {
     `;
     }
   }, m = new WeakMap(), p = new WeakMap(), f = new WeakMap(), _ = new WeakMap(), g = new WeakMap(), z = new WeakMap(), d = i, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
-    E = [w(), c({ attribute: "allow-empty-selection", type: Boolean })], q = [w(), c({ type: Boolean })], I = [c()], F = [c()], N = [c({ attribute: "horizontal-from", reflect: !0 })], A = [c({ reflect: !0 })], G = [w(), c()], h(i, null, E, { kind: "accessor", name: "allowEmptySelection", static: !1, private: !1, access: { has: (t) => "allowEmptySelection" in t, get: (t) => t.allowEmptySelection, set: (t, o) => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(w[Symbol.metadata] ?? null) : void 0;
+    y = [v(), c({ attribute: "allow-empty-selection", type: Boolean })], k = [v(), c({ type: Boolean })], I = [c()], F = [c()], U = [c({ attribute: "horizontal-from", reflect: !0 })], D = [c({ reflect: !0 })], j = [v(), c()], h(i, null, y, { kind: "accessor", name: "allowEmptySelection", static: !1, private: !1, access: { has: (t) => "allowEmptySelection" in t, get: (t) => t.allowEmptySelection, set: (t, o) => {
       t.allowEmptySelection = o;
-    } }, metadata: e }, S, k), h(i, null, q, { kind: "accessor", name: "required", static: !1, private: !1, access: { has: (t) => "required" in t, get: (t) => t.required, set: (t, o) => {
+    } }, metadata: e }, E, S), h(i, null, k, { kind: "accessor", name: "required", static: !1, private: !1, access: { has: (t) => "required" in t, get: (t) => t.required, set: (t, o) => {
       t.required = o;
-    } }, metadata: e }, B, C), h(i, null, I, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, set: (t, o) => {
+    } }, metadata: e }, q, B), h(i, null, I, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, set: (t, o) => {
       t.value = o;
-    } }, metadata: e }, null, y), h(i, null, F, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, o) => {
+    } }, metadata: e }, null, x), h(i, null, F, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, o) => {
       t.size = o;
-    } }, metadata: e }, R, U), h(i, null, N, { kind: "accessor", name: "horizontalFrom", static: !1, private: !1, access: { has: (t) => "horizontalFrom" in t, get: (t) => t.horizontalFrom, set: (t, o) => {
+    } }, metadata: e }, C, R), h(i, null, U, { kind: "accessor", name: "horizontalFrom", static: !1, private: !1, access: { has: (t) => "horizontalFrom" in t, get: (t) => t.horizontalFrom, set: (t, o) => {
       t.horizontalFrom = o;
-    } }, metadata: e }, V, D), h(i, null, A, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, o) => {
+    } }, metadata: e }, N, V), h(i, null, D, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, o) => {
       t.orientation = o;
-    } }, metadata: e }, L, j), h(i, null, G, { kind: "accessor", name: "name", static: !1, private: !1, access: { has: (t) => "name" in t, get: (t) => t.name, set: (t, o) => {
+    } }, metadata: e }, A, L), h(i, null, j, { kind: "accessor", name: "name", static: !1, private: !1, access: { has: (t) => "name" in t, get: (t) => t.name, set: (t, o) => {
       t.name = o;
-    } }, metadata: e }, M, O), h(null, r = { value: d }, a, { kind: "class", name: d.name, metadata: e }, null, n), v = d = r.value, e && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), i.role = "radiogroup", i.styles = tt, i.events = {
+    } }, metadata: e }, M, O), h(null, r = { value: d }, a, { kind: "class", name: d.name, metadata: e }, null, n), d = r.value, e && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), i.role = "radiogroup", i.styles = Z, i.events = {
     didChange: "didChange",
     change: "change",
     input: "input"
-  }, s(d, n), i);
-  return v = d;
+  }, s(d, n), d;
 })();
 export {
-  ut as SbbRadioButtonGroupElement
+  lt as SbbRadioButtonGroupElement
 };

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

@@ -11,8 +11,8 @@ declare const SbbRadioButtonPanelElement_base: import('../../core/mixins.js').Ab
  * @slot subtext - Slot used to render a subtext under the label.
  * @slot suffix - Slot used to render additional content after the label.
  * @slot badge - Use this slot to provide a `sbb-card-badge` (optional).
- * @event {Event} change - Fired on change.
- * @event {InputEvent} input - Fired on input.
+ * @event {Event} change - The change event is fired when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.
+ * @event {InputEvent} input - The input event fires when the value has been changed as a direct result of a user action.
  * @overrideType value - (T = string) | null
  */
 export declare class SbbRadioButtonPanelElement<T = string> extends SbbRadioButtonPanelElement_base {
@@ -20,8 +20,6 @@ export declare class SbbRadioButtonPanelElement<T = string> extends SbbRadioButt
     static readonly events: {
         readonly change: "change";
         readonly input: "input";
-        readonly panelConnected: "panelConnected";
-        readonly stateChange: "stateChange";
     };
     /**
      * Size variant, either s or m.
@@ -33,12 +31,6 @@ export declare class SbbRadioButtonPanelElement<T = string> extends SbbRadioButt
      */
     accessor value: T | null;
     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;
     /**
@@ -49,6 +41,7 @@ export declare class SbbRadioButtonPanelElement<T = string> extends SbbRadioButt
      * As an exception, radio-panels with an expansion-panel attached are not checked automatically when navigating by keyboard
      */
     protected navigateByKeyboard(next: SbbRadioButtonPanelElement): Promise<void>;
+    private _dispatchChangeEvent;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"radio-button-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button-panel/radio-button-panel.component.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,0BAA0B,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,+BAEpD;IACC,OAAuB,MAAM,EAAE,cAAc,CAA8C;IAG3F,gBAAuB,MAAM;;;;;MAKlB;IAEX;;;OAGG;IACH,SAEgB,IAAI,EAAE,YAAY,CAAwB;IAE1D;;OAEG;IACH,SACgB,KAAK,EAAE,CAAC,GAAG,IAAI,CAAQ;IAEvC,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"}
+{"version":3,"file":"radio-button-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button-panel/radio-button-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,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,0BAA0B,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,+BAEpD;IACC,OAAuB,MAAM,EAAE,cAAc,CAA8C;IAG3F,gBAAuB,MAAM;;;MAGlB;IAEX;;;OAGG;IACH,SAEgB,IAAI,EAAE,YAAY,CAAwB;IAE1D;;OAEG;IACH,SACgB,KAAK,EAAE,CAAC,GAAG,IAAI,CAAQ;IAEvC,OAAO,CAAC,kCAAkC,CAAkB;IAE5C,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;IAQ5F,OAAO,CAAC,oBAAoB;cAST,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}