@sbb-esta/lyne-elements 1.2.1 → 1.4.0

package/popover/popover.js

@@ -1,24 +1,25 @@
-import { css as u, html as d, nothing as g } from "lit";
-import { property as l, customElement as f } from "lit/decorators.js";
-import { ref as m } from "lit/directives/ref.js";
-import { SbbFocusHandler as _, IS_FOCUSABLE_QUERY as w, setModalityOnNextFocus as b, getFirstFocusableElement as y } from "../core/a11y.js";
+import { css as u, isServer as g, html as d, nothing as f } from "lit";
+import { property as l, customElement as m } from "lit/decorators.js";
+import { ref as _ } from "lit/directives/ref.js";
+import { SbbFocusHandler as w, IS_FOCUSABLE_QUERY as y, setModalityOnNextFocus as b, getFirstFocusableElement as x } from "../core/a11y.js";
 import { SbbOpenCloseBaseElement as E } from "../core/base-elements.js";
-import { SbbLanguageController as x } from "../core/controllers.js";
-import { findReferencedElement as C } from "../core/dom.js";
-import { EventEmitter as h, composedPathHasAttribute as T } from "../core/eventing.js";
-import { i18nClosePopover as k } from "../core/i18n.js";
-import { isEventOnElement as c, removeAriaOverlayTriggerAttributes as P, setAriaOverlayTriggerAttributes as L, getElementPosition as O } from "../core/overlay.js";
+import { SbbLanguageController as C } from "../core/controllers.js";
+import { findReferencedElement as T } from "../core/dom.js";
+import { EventEmitter as h, composedPathHasAttribute as k } from "../core/eventing.js";
+import { i18nClosePopover as P } from "../core/i18n.js";
+import { SbbHydrationMixin as L } from "../core/mixins.js";
+import { isEventOnElement as c, removeAriaOverlayTriggerAttributes as O, setAriaOverlayTriggerAttributes as S, getElementPosition as A } from "../core/overlay.js";
 import "../button/secondary-button.js";
-const S = u`*,:before,:after{box-sizing:border-box}:host{--sbb-popover-position: absolute;--sbb-popover-position-x: 0;--sbb-popover-position-y: 0;--sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);--sbb-popover-arrow-position-x: 0;--sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));--sbb-popover-inset: 0 auto auto 0;--sbb-popover-border-radius: var(--sbb-border-radius-8x);--sbb-popover-padding: var(--sbb-spacing-fixed-4x);--sbb-popover-background: var(--sbb-color-white);--sbb-popover-color: var(--sbb-color-charcoal);--sbb-popover-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-popover-animation-easing: ease-out;--sbb-popover-transform: translateY(var(--sbb-spacing-fixed-2x));--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:block}:host([data-position=above]){--sbb-popover-transform: translateY(calc(var(--sbb-spacing-fixed-2x) * -1))}:host(:not([data-state=closed])){--sbb-popover-inset: 0}.sbb-popover:after,.sbb-popover__content:before{content:"";position:absolute;display:block;width:var(--sbb-popover-arrow-size);height:var(--sbb-popover-arrow-size);left:var(--sbb-popover-arrow-position-x);bottom:calc(100% - var(--sbb-popover-arrow-size) / 2);background-color:var(--sbb-popover-background);border-radius:var(--sbb-border-radius-2x) 0;transform:rotate(45deg)}.sbb-popover__container{position:fixed;inset:var(--sbb-popover-inset);pointer-events:none;z-index:var(--sbb-popover-z-index, var(--sbb-overlay-default-z-index));color:var(--sbb-popover-color)}.sbb-popover{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);display:none;position:var(--sbb-popover-position);pointer-events:all;top:var(--sbb-popover-position-y);bottom:unset;left:var(--sbb-popover-position-x);right:unset;border:none;border-radius:var(--sbb-popover-border-radius);padding:0;max-width:var(--sbb-popover-max-width);width:max-content;background-color:var(--sbb-popover-background);outline:none}.sbb-popover:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}:host([data-state]:not([data-state=closed])) .sbb-popover{display:block;animation-name:open;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}:host([data-state][data-state=closing]) .sbb-popover{pointer-events:none;animation-name:close;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}.sbb-popover:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);z-index:-1}@media (forced-colors: active){.sbb-popover:after{outline:var(--sbb-border-width-1x) solid CanvasText}}:host([data-position=above]) .sbb-popover:after{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@media (forced-colors: active){.sbb-popover{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-popover:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background-color:transparent}:host([data-position=below]) .sbb-popover:before{inset-block-start:calc(-1 * var(--sbb-spacing-fixed-6x))}:host([data-position=above]) .sbb-popover:before{inset-block-end:calc(-1 * var(--sbb-spacing-fixed-6x))}.sbb-popover__content{display:flex;gap:var(--sbb-spacing-fixed-4x);border-radius:var(--sbb-popover-border-radius);padding:var(--sbb-popover-padding);outline:none;background-color:var(--sbb-popover-background);overflow:hidden;flex-direction:row-reverse}:host([data-position=above]) .sbb-popover__content:before{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@keyframes open{0%{opacity:0;transform:var(--sbb-popover-transform)}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:var(--sbb-popover-transform)}}`;
-var A = Object.defineProperty, F = Object.getOwnPropertyDescriptor, n = (e, o, t, i) => {
-  for (var r = i > 1 ? void 0 : i ? F(o, t) : o, a = e.length - 1, p; a >= 0; a--)
+const F = u`*,:before,:after{box-sizing:border-box}:host{--sbb-popover-position: absolute;--sbb-popover-position-x: 0;--sbb-popover-position-y: 0;--sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);--sbb-popover-arrow-position-x: 0;--sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));--sbb-popover-inset: 0 auto auto 0;--sbb-popover-border-radius: var(--sbb-border-radius-8x);--sbb-popover-padding: var(--sbb-spacing-fixed-4x);--sbb-popover-background: var(--sbb-color-white);--sbb-popover-color: var(--sbb-color-charcoal);--sbb-popover-animation-duration: var( --sbb-disable-animation-time, var(--sbb-animation-duration-4x) );--sbb-popover-animation-easing: ease-out;--sbb-popover-transform: translateY(var(--sbb-spacing-fixed-2x));--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:block}:host([data-position=above]){--sbb-popover-transform: translateY(calc(var(--sbb-spacing-fixed-2x) * -1))}:host(:not([data-state=closed])){--sbb-popover-inset: 0}.sbb-popover:after,.sbb-popover__content:before{content:"";position:absolute;display:block;width:var(--sbb-popover-arrow-size);height:var(--sbb-popover-arrow-size);left:var(--sbb-popover-arrow-position-x);bottom:calc(100% - var(--sbb-popover-arrow-size) / 2);background-color:var(--sbb-popover-background);border-radius:var(--sbb-border-radius-2x) 0;transform:rotate(45deg)}.sbb-popover__container{position:fixed;inset:var(--sbb-popover-inset);pointer-events:none;z-index:var(--sbb-popover-z-index, var(--sbb-overlay-default-z-index));color:var(--sbb-popover-color)}.sbb-popover{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);display:none;position:var(--sbb-popover-position);pointer-events:all;top:var(--sbb-popover-position-y);bottom:unset;left:var(--sbb-popover-position-x);right:unset;border:none;border-radius:var(--sbb-popover-border-radius);padding:0;max-width:var(--sbb-popover-max-width);width:max-content;background-color:var(--sbb-popover-background);outline:none}.sbb-popover:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}:host([data-state]:not([data-state=closed])) .sbb-popover{display:block;animation-name:open;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}:host([data-state][data-state=closing]) .sbb-popover{pointer-events:none;animation-name:close;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}.sbb-popover:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);z-index:-1}@media (forced-colors: active){.sbb-popover:after{outline:var(--sbb-border-width-1x) solid CanvasText}}:host([data-position=above]) .sbb-popover:after{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@media (forced-colors: active){.sbb-popover{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-popover:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background-color:transparent}:host([data-position=below]) .sbb-popover:before{inset-block-start:calc(-1 * var(--sbb-spacing-fixed-6x))}:host([data-position=above]) .sbb-popover:before{inset-block-end:calc(-1 * var(--sbb-spacing-fixed-6x))}.sbb-popover__content{display:flex;gap:var(--sbb-spacing-fixed-4x);border-radius:var(--sbb-popover-border-radius);padding:var(--sbb-popover-padding);outline:none;background-color:var(--sbb-popover-background);overflow:hidden;flex-direction:row-reverse}:host([data-position=above]) .sbb-popover__content:before{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@keyframes open{0%{opacity:0;transform:var(--sbb-popover-transform)}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:var(--sbb-popover-transform)}}`;
+var z = Object.defineProperty, D = Object.getOwnPropertyDescriptor, n = (e, o, t, i) => {
+  for (var r = i > 1 ? void 0 : i ? D(o, t) : o, a = e.length - 1, p; a >= 0; a--)
     (p = e[a]) && (r = (i ? p(o, t, r) : p(r)) || r);
-  return i && r && A(o, t, r), r;
+  return i && r && z(o, t, r), r;
 };
-const z = 16, D = 32;
-let M = 0;
+const M = 16, B = 32;
+let H = 0;
 const v = /* @__PURE__ */ new Set();
-let s = class extends E {
+let s = class extends L(E) {
   constructor() {
     super(...arguments), this.hideCloseButton = !1, this.hoverTrigger = !1, this.openDelay = 0, this.closeDelay = 0, this.willClose = new h(
       this,
@@ -26,10 +27,10 @@ let s = class extends E {
     ), this.didClose = new h(
       this,
       s.events.didClose
-    ), this._skipCloseFocus = !1, this._focusHandler = new _(), this._hoverTrigger = !1, this._language = new x(this), this._pointerDownListener = (e) => {
+    ), this._skipCloseFocus = !1, this._focusHandler = new w(), this._hoverTrigger = !1, this._language = new C(this), this._pointerDownListener = (e) => {
       this._isPointerDownEventOnPopover = c(this._overlay, e);
     }, this._closeOnBackdropClick = (e) => {
-      !this._isPointerDownEventOnPopover && !c(this._overlay, e) && (this._nextFocusedElement = e.composedPath().filter((o) => o instanceof window.HTMLElement).find((o) => o.matches(w)), clearTimeout(this._closeTimeout), this.close());
+      !this._isPointerDownEventOnPopover && !c(this._overlay, e) && (this._nextFocusedElement = e.composedPath().filter((o) => o instanceof window.HTMLElement).find((o) => o.matches(y)), clearTimeout(this._closeTimeout), this.close());
     }, this._onTriggerMouseEnter = () => {
       this.state === "closed" || this.state === "closing" ? this._openTimeout = setTimeout(() => this.open(), this.openDelay) : clearTimeout(this._closeTimeout);
     }, this._onTriggerMouseLeave = () => {
@@ -69,7 +70,7 @@ let s = class extends E {
     e !== o && ((t = this._popoverController) == null || t.abort(), (i = this._openStateController) == null || i.abort(), this._configure());
   }
   connectedCallback() {
-    super.connectedCallback(), this.id || (this.id = this.id || `sbb-popover-${++M}`), this._configure(), this.state = "closed", v.add(this);
+    super.connectedCallback(), this.id || (this.id = this.id || `sbb-popover-${++H}`), this._configure(), this.state = "closed", v.add(this);
   }
   willUpdate(e) {
     super.willUpdate(e), e.has("trigger") && this._removeTriggerClickListener(this.trigger, e.get("trigger")), e.has("hoverTrigger") && this._configure();
@@ -84,27 +85,33 @@ let s = class extends E {
   // Check if the trigger is valid and attach click event listeners.
   _configure() {
     var e;
-    P(this._triggerElement), this.trigger && (this._triggerElement = C(this.trigger), this._triggerElement && (L(this._triggerElement, "dialog", this.id, this.state), this._hoverTrigger = this.hoverTrigger && !window.matchMedia("(pointer: coarse)").matches, (e = this._popoverController) == null || e.abort(), this._popoverController = new AbortController(), this._hoverTrigger ? (this._triggerElement.addEventListener("mouseenter", this._onTriggerMouseEnter, {
-      signal: this._popoverController.signal
-    }), this._triggerElement.addEventListener("mouseleave", this._onTriggerMouseLeave, {
-      signal: this._popoverController.signal
-    }), this._triggerElement.addEventListener(
-      "keydown",
-      (o) => {
-        (o.code === "Space" || o.code === "Enter") && this.open();
-      },
-      {
-        signal: this._popoverController.signal
+    if (!g) {
+      if (this.hydrationRequired) {
+        this.hydrationComplete.then(() => this._configure);
+        return;
       }
-    )) : this._triggerElement.addEventListener(
-      "click",
-      () => {
-        this.state === "closed" && this.open();
-      },
-      {
+      O(this._triggerElement), this.trigger && (this._triggerElement = T(this.trigger), this._triggerElement && (S(this._triggerElement, "dialog", this.id, this.state), this._hoverTrigger = this.hoverTrigger && !window.matchMedia("(pointer: coarse)").matches, (e = this._popoverController) == null || e.abort(), this._popoverController = new AbortController(), this._hoverTrigger ? (this._triggerElement.addEventListener("mouseenter", this._onTriggerMouseEnter, {
         signal: this._popoverController.signal
-      }
-    )));
+      }), this._triggerElement.addEventListener("mouseleave", this._onTriggerMouseLeave, {
+        signal: this._popoverController.signal
+      }), this._triggerElement.addEventListener(
+        "keydown",
+        (o) => {
+          (o.code === "Space" || o.code === "Enter") && this.open();
+        },
+        {
+          signal: this._popoverController.signal
+        }
+      )) : this._triggerElement.addEventListener(
+        "click",
+        () => {
+          this.state === "closed" && this.open();
+        },
+        {
+          signal: this._popoverController.signal
+        }
+      )));
+    }
   }
   _attachWindowEvents() {
     this._openStateController = new AbortController(), document.addEventListener("scroll", () => this._setPopoverPosition(), {
@@ -123,7 +130,7 @@ let s = class extends E {
   }
   // Close the popover on click of any element that has the 'sbb-popover-close' attribute.
   _closeOnSbbPopoverCloseClick(e) {
-    const o = T(e, "sbb-popover-close", this);
+    const o = k(e, "sbb-popover-close", this);
     o && !o.hasAttribute("disabled") && (clearTimeout(this._closeTimeout), this.close(o));
   }
   // Set popover position (x, y) to '0' once the popover is closed and the transition ended to prevent the
@@ -146,7 +153,7 @@ let s = class extends E {
   }
   // Set focus on the first focusable element.
   _setPopoverFocus() {
-    const e = this.shadowRoot.querySelector("[sbb-popover-close]") || y(
+    const e = this.shadowRoot.querySelector("[sbb-popover-close]") || x(
       Array.from(this.children).filter((o) => o instanceof window.HTMLElement)
     );
     e ? (b(e), e.focus()) : (this._overlay.setAttribute("tabindex", "0"), b(this._overlay), this._overlay.focus(), this._overlay.addEventListener(
@@ -165,13 +172,13 @@ let s = class extends E {
   _setPopoverPosition() {
     if (!this._overlay || !this._triggerElement)
       return;
-    const e = O(
+    const e = A(
       this._overlay,
       this._triggerElement,
       this.shadowRoot.querySelector(".sbb-popover__container"),
       {
-        verticalOffset: z,
-        horizontalOffset: D,
+        verticalOffset: M,
+        horizontalOffset: B,
         centered: !0,
         responsiveHeight: !0
       }
@@ -184,7 +191,7 @@ let s = class extends E {
     const e = d`
       <span class="sbb-popover__close">
         <sbb-secondary-button
-          aria-label=${this.accessibilityCloseLabel || k[this._language.current]}
+          aria-label=${this.accessibilityCloseLabel || P[this._language.current]}
           size="s"
           type="button"
           icon-name="cross-small"
@@ -198,13 +205,13 @@ let s = class extends E {
           @animationend=${(o) => this._onPopoverAnimationEnd(o)}
           class="sbb-popover"
           role="tooltip"
-          ${m((o) => this._overlay = o)}
+          ${_((o) => this._overlay = o)}
         >
           <div
             @click=${(o) => this._closeOnSbbPopoverCloseClick(o)}
             class="sbb-popover__content"
           >
-            ${!this.hideCloseButton && !this._hoverTrigger ? e : g}
+            ${!this.hideCloseButton && !this._hoverTrigger ? e : f}
             <span>
               <slot>No content</slot>
             </span>
@@ -214,7 +221,7 @@ let s = class extends E {
     `;
   }
 };
-s.styles = S;
+s.styles = F;
 n([
   l()
 ], s.prototype, "trigger", 2);
@@ -234,7 +241,7 @@ n([
   l({ attribute: "accessibility-close-label" })
 ], s.prototype, "accessibilityCloseLabel", 2);
 s = n([
-  f("sbb-popover")
+  m("sbb-popover")
 ], s);
 export {
   s as SbbPopoverElement

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

@@ -3,7 +3,7 @@ import { SbbCheckedStateChange, SbbDisabledStateChange, SbbStateChange } from '.
 import { AbstractConstructor } from '../../core/mixins.js';
 import { SbbRadioButtonGroupElement } from '../radio-button-group.js';
 
-export type SbbRadioButtonSize = 's' | 'm';
+export type SbbRadioButtonSize = 'xs' | 's' | 'm';
 export type SbbRadioButtonStateChange = Extract<SbbStateChange, SbbDisabledStateChange | SbbCheckedStateChange>;
 export declare class SbbRadioButtonCommonElementMixinType {
     get allowEmptySelection(): boolean;

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

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

package/radio-button/common.js

@@ -9,10 +9,10 @@ var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, i = (s, e, t
     (n = s[a]) && (r = (o ? n(e, t, r) : n(r)) || r);
   return o && r && m(e, t, r), r;
 };
-const z = (s) => {
+const C = (s) => {
   let e = class extends s {
     constructor() {
-      super(...arguments), this._allowEmptySelection = !1, this._disabled = !1, this._required = !1, this._group = null, this._checked = !1, this._size = "m", this._abort = new l(this), this._handlerRepository = new h(this, u), this._stateChange = new p(
+      super(...arguments), this._allowEmptySelection = !1, this._disabled = !1, this._required = !1, this._group = null, this._checked = !1, this._abort = new l(this), this._handlerRepository = new h(this, u), this._stateChange = new p(
         this,
         e.events.stateChange,
         { bubbles: !0 }
@@ -51,13 +51,6 @@ const z = (s) => {
     get checked() {
       return this._checked;
     }
-    set size(t) {
-      this._size = t;
-    }
-    get size() {
-      var t;
-      return ((t = this.group) == null ? void 0 : t.size) ?? this._size;
-    }
     select() {
       this.disabled || (this.allowEmptySelection ? this.checked = !this.checked : this.checked || (this.checked = !0));
     }
@@ -91,15 +84,13 @@ const z = (s) => {
     b({ reflect: !0, type: Boolean })
   ], e.prototype, "required", 1), i([
     b({ reflect: !0, type: Boolean })
-  ], e.prototype, "checked", 1), i([
-    b({ reflect: !0 })
-  ], e.prototype, "size", 1), e = i([
+  ], e.prototype, "checked", 1), e = i([
     d({
       role: "radio"
     })
   ], e), e;
-}, C = f`*,: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([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([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}}.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{--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);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}: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)}.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-zero-time, 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)}`;
+}, z = f`*,: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([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([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{--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);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}: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-zero-time, 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 {
-  z as SbbRadioButtonCommonElementMixin,
-  C as radioButtonCommonStyle
+  C as SbbRadioButtonCommonElementMixin,
+  z as radioButtonCommonStyle
 };

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

@@ -1,4 +1,5 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+import { SbbRadioButtonSize } from '../common.js';
 
 declare const SbbRadioButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbRadioButtonCommonElementMixinType> & typeof LitElement;
 /**
@@ -11,7 +12,12 @@ export declare class SbbRadioButtonElement extends SbbRadioButtonElement_base {
     static readonly events: {
         readonly stateChange: "stateChange";
     };
-    constructor();
+    /**
+     * Size variant.
+     */
+    set size(value: SbbRadioButtonSize);
+    get size(): SbbRadioButtonSize;
+    private _size;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button/radio-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;;AAQhD;;;;GAIG;AACH,qBACa,qBAAsB,SAAQ,0BAA4C;IACrF,OAAuB,MAAM,EAAE,cAAc,CAA8C;IAC3F,gBAAuB,MAAM;;MAElB;;cAOQ,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}
+{"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button/radio-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAIhD,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,cAAc,CAAC;;AAItB;;;;GAIG;AACH,qBAEa,qBAAsB,SAAQ,0BAA4C;IACrF,OAAuB,MAAM,EAAE,cAAc,CAA8C;IAC3F,gBAAuB,MAAM;;MAElB;IAEX;;OAEG;IACH,IACW,IAAI,CAAC,KAAK,EAAE,kBAAkB,EAExC;IACD,IAAW,IAAI,IAAI,kBAAkB,CAEpC;IACD,OAAO,CAAC,KAAK,CAA2B;cAErB,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}

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

@@ -38,7 +38,7 @@ export declare class SbbRadioButtonGroupElement extends SbbRadioButtonGroupEleme
      */
     value?: any | null;
     /**
-     * Size variant, either m or s.
+     * Size variant.
      */
     size: SbbRadioButtonSize;
     /**
@@ -71,7 +71,6 @@ export declare class SbbRadioButtonGroupElement extends SbbRadioButtonGroupEleme
      * Emits whenever the `sbb-radio-group` value changes.
      */
     private _input;
-    constructor();
     connectedCallback(): void;
     willUpdate(changedProperties: PropertyValues<this>): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): void;

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

@@ -1 +1 @@
-{"version":3,"file":"radio-button-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button-group/radio-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAkB,MAAM,0BAA0B,CAAC;AAElG,OAAO,KAAK,EAAE,kBAAkB,EAA6B,MAAM,cAAc,CAAC;AAClF,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAIhE,MAAM,MAAM,8BAA8B,GAAG;IAC3C,KAAK,EAAE,GAAG,GAAG,IAAI,CAAC;IAClB,WAAW,EAAE,qBAAqB,GAAG,0BAA0B,CAAC;CACjE,CAAC;;AAEF;;;;;;;;GAQG;AACH,qBAIa,0BAA2B,SAAQ,+BAA4B;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX;;OAEG;IAEI,mBAAmB,EAAE,OAAO,CAAS;IAE5C;;OAEG;IACiC,QAAQ,EAAE,OAAO,CAAS;IAE9D;;OAEG;IACgB,KAAK,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IAEtC;;OAEG;IACgB,IAAI,EAAE,kBAAkB,CAAO;IAElD;;OAEG;IAEI,cAAc,CAAC,EAAE,iBAAiB,CAAC;IAE1C;;OAEG;IAEI,WAAW,EAAE,cAAc,CAAgB;IAElD;;OAEG;IACH,IAAW,YAAY,IAAI,CAAC,qBAAqB,GAAG,0BAA0B,CAAC,EAAE,CAOhF;IAED,OAAO,KAAK,cAAc,GAIzB;IAED,OAAO,CAAC,kCAAkC,CAAkB;IAC5D,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAyC;IAEvD,OAAO,CAAC,aAAa;IAQrB;;;OAGG;IACH,OAAO,CAAC,UAAU,CAGhB;IAEF;;OAEG;IACH,OAAO,CAAC,OAAO,CAGb;IAEF;;OAEG;IACH,OAAO,CAAC,MAAM,CAGZ;;IAOc,iBAAiB,IAAI,IAAI;IAuBzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAqBtD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAI5C,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,cAAc;cA+BH,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}
+{"version":3,"file":"radio-button-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button-group/radio-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAkB,MAAM,0BAA0B,CAAC;AAElG,OAAO,KAAK,EAA6B,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClF,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAIhE,MAAM,MAAM,8BAA8B,GAAG;IAC3C,KAAK,EAAE,GAAG,GAAG,IAAI,CAAC;IAClB,WAAW,EAAE,qBAAqB,GAAG,0BAA0B,CAAC;CACjE,CAAC;;AAEF;;;;;;;;GAQG;AACH,qBAKa,0BAA2B,SAAQ,+BAA4B;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX;;OAEG;IAEI,mBAAmB,EAAE,OAAO,CAAS;IAE5C;;OAEG;IACiC,QAAQ,EAAE,OAAO,CAAS;IAE9D;;OAEG;IACgB,KAAK,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IAEtC;;OAEG;IACgB,IAAI,EAAE,kBAAkB,CAAO;IAElD;;OAEG;IAEI,cAAc,CAAC,EAAE,iBAAiB,CAAC;IAE1C;;OAEG;IAEI,WAAW,EAAE,cAAc,CAAgB;IAElD;;OAEG;IACH,IAAW,YAAY,IAAI,CAAC,qBAAqB,GAAG,0BAA0B,CAAC,EAAE,CAOhF;IAED,OAAO,KAAK,cAAc,GAIzB;IAED,OAAO,CAAC,kCAAkC,CAAkB;IAC5D,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAyC;IAEvD,OAAO,CAAC,aAAa;IAQrB;;;OAGG;IACH,OAAO,CAAC,UAAU,CAGhB;IAEF;;OAEG;IACH,OAAO,CAAC,OAAO,CAGb;IAEF;;OAEG;IACH,OAAO,CAAC,MAAM,CAGZ;IAEc,iBAAiB,IAAI,IAAI;IAuBzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAqBtD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAI5C,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,cAAc;cA+BH,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}

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

@@ -1,8 +1,8 @@
 import { css as b, LitElement as u, html as p } from "lit";
 import { property as s, customElement as c } from "lit/decorators.js";
 import { isArrowKeyPressed as m, getNextElementIndex as f } from "../core/a11y.js";
-import { SbbConnectedAbortController as g, SbbSlotStateController as v } from "../core/controllers.js";
-import { hostAttributes as w } from "../core/decorators.js";
+import { SbbConnectedAbortController as g } from "../core/controllers.js";
+import { hostAttributes as v, slotState as w } from "../core/decorators.js";
 import { EventEmitter as h } from "../core/eventing.js";
 import { SbbDisabledMixin as _ } from "../core/mixins.js";
 const x = b`*,: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}`;
@@ -13,7 +13,7 @@ var z = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (t, o, e
 };
 let a = class extends _(u) {
   constructor() {
-    super(), this.allowEmptySelection = !1, this.required = !1, this.size = "m", this.orientation = "horizontal", this._hasSelectionExpansionPanelElement = !1, this._didLoad = !1, this._abort = new g(this), this._didChange = new h(
+    super(...arguments), this.allowEmptySelection = !1, this.required = !1, this.size = "m", this.orientation = "horizontal", this._hasSelectionExpansionPanelElement = !1, this._didLoad = !1, this._abort = new g(this), this._didChange = new h(
       this,
       a.events.didChange
     ), this._change = new h(
@@ -22,7 +22,7 @@ let a = class extends _(u) {
     ), this._input = new h(
       this,
       a.events.input
-    ), new v(this);
+    );
   }
   /**
    * List of contained radio buttons.
@@ -158,9 +158,10 @@ r([
 ], a.prototype, "orientation", 2);
 a = r([
   c("sbb-radio-button-group"),
-  w({
+  v({
     role: "radiogroup"
-  })
+  }),
+  w()
 ], a);
 export {
   a as SbbRadioButtonGroupElement

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

@@ -1,5 +1,6 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
 
+export type SbbRadioButtonPanelSize = 's' | 'm';
 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,7 +17,12 @@ export declare class SbbRadioButtonPanelElement extends SbbRadioButtonPanelEleme
         readonly stateChange: "stateChange";
         readonly panelConnected: "panelConnected";
     };
-    constructor();
+    /**
+     * Size variant.
+     */
+    set size(value: SbbRadioButtonPanelSize);
+    get size(): SbbRadioButtonPanelSize;
+    private _size;
     protected willUpdate(changedProperties: PropertyValues<this>): Promise<void>;
     protected render(): TemplateResult;
 }

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;AAOb,OAAO,6BAA6B,CAAC;;AAErC;;;;;;;;GAQG;AACH,qBACa,0BAA2B,SAAQ,+BAE/C;IACC,OAAuB,MAAM,EAAE,cAAc,CAA8C;IAG3F,gBAAuB,MAAM;;;MAGlB;;cAOc,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAQxE,MAAM,IAAI,cAAc;CA6B5C;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;AAOb,OAAO,6BAA6B,CAAC;AAErC,MAAM,MAAM,uBAAuB,GAAG,GAAG,GAAG,GAAG,CAAC;;AAEhD;;;;;;;;GAQG;AACH,qBAEa,0BAA2B,SAAQ,+BAE/C;IACC,OAAuB,MAAM,EAAE,cAAc,CAA8C;IAG3F,gBAAuB,MAAM;;;MAGlB;IAEX;;OAEG;IACH,IACW,IAAI,CAAC,KAAK,EAAE,uBAAuB,EAE7C;IACD,IAAW,IAAI,IAAI,uBAAuB,CAEzC;IACD,OAAO,CAAC,KAAK,CAAgC;cAEpB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAQxE,MAAM,IAAI,cAAc;CA6B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}

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

@@ -1,25 +1,32 @@
-import { LitElement as d, html as i, nothing as b } from "lit";
-import { customElement as p } from "lit/decorators.js";
-import { SbbSlotStateController as c } from "../core/controllers.js";
-import { SbbPanelMixin as m, SbbUpdateSchedulerMixin as u, panelCommonStyle as h } from "../core/mixins.js";
-import { SbbRadioButtonCommonElementMixin as f, radioButtonCommonStyle as S } from "./common.js";
+import { LitElement as d, html as l, nothing as b } from "lit";
+import { property as c, customElement as u } from "lit/decorators.js";
+import { slotState as m } from "../core/decorators.js";
+import { SbbPanelMixin as h, SbbUpdateSchedulerMixin as f, panelCommonStyle as _ } from "../core/mixins.js";
+import { SbbRadioButtonCommonElementMixin as g, radioButtonCommonStyle as v } from "./common.js";
 import "../screen-reader-only.js";
-var v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, _ = (t, s, l, n) => {
-  for (var e = n > 1 ? void 0 : n ? x(s, l) : s, o = t.length - 1, r; o >= 0; o--)
-    (r = t[o]) && (e = (n ? r(s, l, e) : r(e)) || e);
-  return n && e && v(s, l, e), e;
+var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (e, n, o, i) => {
+  for (var t = i > 1 ? void 0 : i ? y(n, o) : n, a = e.length - 1, r; a >= 0; a--)
+    (r = e[a]) && (t = (i ? r(n, o, t) : r(t)) || t);
+  return i && t && x(n, o, t), t;
 };
-let a = class extends m(
-  f(u(d))
+let s = class extends h(
+  g(f(d))
 ) {
   constructor() {
-    super(), new c(this);
+    super(...arguments), this._size = "m";
   }
-  async willUpdate(t) {
-    super.willUpdate(t), t.has("checked") && this.toggleAttribute("data-checked", this.checked);
+  set size(e) {
+    this._size = e;
+  }
+  get size() {
+    var e;
+    return (e = this.group) != null && e.size ? this.group.size === "xs" ? "s" : this.group.size : this._size;
+  }
+  async willUpdate(e) {
+    super.willUpdate(e), e.has("checked") && this.toggleAttribute("data-checked", this.checked);
   }
   render() {
-    return i`
+    return l`
       <label class="sbb-selection-panel">
         <div class="sbb-selection-panel__badge">
           <slot name="badge"></slot>
@@ -40,20 +47,24 @@ let a = class extends m(
             <slot name="suffix"></slot>
           </span>
           <slot name="subtext"></slot>
-          ${this.expansionState ? i`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : b}
+          ${this.expansionState ? l`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : b}
         </span>
       </label>
     `;
   }
 };
-a.styles = [S, h];
-a.events = {
+s.styles = [v, _];
+s.events = {
   stateChange: "stateChange",
   panelConnected: "panelConnected"
 };
-a = _([
-  p("sbb-radio-button-panel")
-], a);
+p([
+  c({ reflect: !0 })
+], s.prototype, "size", 1);
+s = p([
+  u("sbb-radio-button-panel"),
+  m()
+], s);
 export {
-  a as SbbRadioButtonPanelElement
+  s as SbbRadioButtonPanelElement
 };

package/radio-button/radio-button.js

@@ -1,19 +1,26 @@
-import { css as a, LitElement as l, html as u, nothing as d } from "lit";
-import { customElement as c } from "lit/decorators.js";
-import { SbbSlotStateController as f } from "../core/controllers.js";
-import { SbbRadioButtonCommonElementMixin as m, radioButtonCommonStyle as p } from "./common.js";
-const h = a`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}.sbb-radio-button{display:block}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-radio-button{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}`;
-var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, x = (b, t, r, e) => {
-  for (var o = e > 1 ? void 0 : e ? _(t, r) : t, i = b.length - 1, n; i >= 0; i--)
-    (n = b[i]) && (o = (e ? n(t, r, o) : n(o)) || o);
-  return e && o && v(t, r, o), o;
+import { css as l, LitElement as u, html as d, nothing as c } from "lit";
+import { property as f, customElement as p } from "lit/decorators.js";
+import { slotState as m } from "../core/decorators.js";
+import { SbbRadioButtonCommonElementMixin as h, radioButtonCommonStyle as v } from "./common.js";
+const _ = l`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}.sbb-radio-button{display:block}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-radio-button{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}`;
+var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, b = (t, s, i, r) => {
+  for (var e = r > 1 ? void 0 : r ? y(s, i) : s, n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (e = (r ? a(s, i, e) : a(e)) || e);
+  return r && e && g(s, i, e), e;
 };
-let s = class extends m(l) {
+let o = class extends h(u) {
   constructor() {
-    super(), new f(this);
+    super(...arguments), this._size = "m";
+  }
+  set size(t) {
+    this._size = t;
+  }
+  get size() {
+    var t;
+    return ((t = this.group) == null ? void 0 : t.size) ?? this._size;
   }
   render() {
-    return u`
+    return d`
       <label class="sbb-radio-button">
         <input
           type="radio"
@@ -22,7 +29,7 @@ let s = class extends m(l) {
           ?disabled=${this.disabled}
           ?required=${this.required}
           ?checked=${this.checked}
-          value=${this.value || d}
+          value=${this.value || c}
           class="sbb-screen-reader-only"
         />
         <span class="sbb-radio-button__label-slot">
@@ -32,13 +39,17 @@ let s = class extends m(l) {
     `;
   }
 };
-s.styles = [p, h];
-s.events = {
+o.styles = [v, _];
+o.events = {
   stateChange: "stateChange"
 };
-s = x([
-  c("sbb-radio-button")
-], s);
+b([
+  f({ reflect: !0 })
+], o.prototype, "size", 1);
+o = b([
+  p("sbb-radio-button"),
+  m()
+], o);
 export {
-  s as SbbRadioButtonElement
+  o as SbbRadioButtonElement
 };

package/selection-expansion-panel/selection-expansion-panel.d.ts

@@ -43,7 +43,6 @@ export declare class SbbSelectionExpansionPanelElement extends SbbSelectionExpan
      * Whether it has an expandable content
      */
     private get _hasContent();
-    constructor();
     connectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): void;

package/selection-expansion-panel/selection-expansion-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selection-expansion-panel.d.ts","sourceRoot":"","sources":["../../../src/elements/selection-expansion-panel/selection-expansion-panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAiBvC,OAAO,eAAe,CAAC;;AAEvB;;;;;;;;;GASG;AACH,qBACa,iCAAkC,SAAQ,sCAA6B;IAElF,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAK1C;IAEX,yCAAyC;IACtB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAW;IAErD,qDAAqD;IACQ,SAAS,UAAS;IAE/E,iDAAiD;IACE,UAAU,UAAS;IAEtE,wCAAwC;IAExC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,8CAA8C;IAC9C,OAAO,KAAK,QAAQ,QAEnB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,+CAA+C;IAC/C,OAAO,KAAK,SAAS,QAEpB;IAED,wEAAwE;IACxE,OAAO,CAAC,SAAS,CAGf;IAEF,oDAAoD;IACpD,OAAO,CAAC,QAAQ,CAGd;IAEF,wEAAwE;IACxE,OAAO,CAAC,UAAU,CAGhB;IAEF,oDAAoD;IACpD,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,YAAY,CAAkB;IAEtC;;OAEG;IACH,OAAO,KAAK,WAAW,GAGtB;;IAOe,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,KAAK;IAcb,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,eAAe;YAUT,oBAAoB;cAoBf,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,+BAA+B,EAAE,iCAAiC,CAAC;KACpE;CACF"}
+{"version":3,"file":"selection-expansion-panel.d.ts","sourceRoot":"","sources":["../../../src/elements/selection-expansion-panel/selection-expansion-panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAcvC,OAAO,eAAe,CAAC;;AAEvB;;;;;;;;;GASG;AACH,qBAEa,iCAAkC,SAAQ,sCAA6B;IAElF,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAK1C;IAEX,yCAAyC;IACtB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAW;IAErD,qDAAqD;IACQ,SAAS,UAAS;IAE/E,iDAAiD;IACE,UAAU,UAAS;IAEtE,wCAAwC;IAExC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,8CAA8C;IAC9C,OAAO,KAAK,QAAQ,QAEnB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,+CAA+C;IAC/C,OAAO,KAAK,SAAS,QAEpB;IAED,wEAAwE;IACxE,OAAO,CAAC,SAAS,CAGf;IAEF,oDAAoD;IACpD,OAAO,CAAC,QAAQ,CAGd;IAEF,wEAAwE;IACxE,OAAO,CAAC,UAAU,CAGhB;IAEF,oDAAoD;IACpD,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,YAAY,CAAkB;IAEtC;;OAEG;IACH,OAAO,KAAK,WAAW,GAGtB;IAEe,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,KAAK;IAcb,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,eAAe;YAUT,oBAAoB;cAoBf,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,+BAA+B,EAAE,iCAAiC,CAAC;KACpE;CACF"}