@sbb-esta/lyne-elements 1.16.0 → 2.0.0

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

@@ -1,32 +1,32 @@
-var O = (a) => {
-  throw TypeError(a);
+var $ = (o) => {
+  throw TypeError(o);
 };
-var M = (a, s, n) => s.has(a) || O("Cannot " + n);
-var u = (a, s, n) => (M(a, s, "read from private field"), n ? n.call(a) : s.get(a)), c = (a, s, n) => s.has(a) ? O("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, n), l = (a, s, n, h) => (M(a, s, "write to private field"), h ? h.call(a, n) : s.set(a, n), n);
-import { __runInitializers as d, __esDecorate as b } from "tslib";
-import { css as J, LitElement as Q, html as V } from "lit";
-import { customElement as W, property as z } from "lit/decorators.js";
-import { isArrowKeyPressed as X, getNextElementIndex as Y } from "../core/a11y.js";
-import { SbbConnectedAbortController as Z } from "../core/controllers.js";
-import { hostAttributes as tt, slotState as et, forceType as $ } from "../core/decorators.js";
-import { EventEmitter as x } from "../core/eventing.js";
-import { SbbDisabledMixin as it } from "../core/mixins.js";
-const ot = J`*,: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 mt = (() => {
-  var m, p, _, g, f, v, r;
-  let a = [W("sbb-radio-button-group"), tt({
+var M = (o, i, n) => i.has(o) || $("Cannot " + n);
+var u = (o, i, n) => (M(o, i, "read from private field"), n ? n.call(o) : i.get(o)), b = (o, i, n) => i.has(o) ? $("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(o) : i.set(o, n), l = (o, i, n, d) => (M(o, i, "write to private field"), d ? d.call(o, n) : i.set(o, n), n);
+import { __runInitializers as s, __esDecorate as h } 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 { SbbConnectedAbortController as W } from "../core/controllers.js";
+import { hostAttributes as X, slotState as Y, forceType as w } from "../core/decorators.js";
+import { isLean as Z } from "../core/dom.js";
+import { EventEmitter as P } from "../core/eventing.js";
+import { SbbDisabledMixin as tt } from "../core/mixins.js";
+const et = 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 at = 0, ct = (() => {
+  var m, p, f, _, g, z, r;
+  let o = [Q("sbb-radio-button-group"), X({
     role: "radiogroup"
-  }), et()], s, n = [], h, y = it(Q), E, S = [], k = [], R, C = [], I = [], q, B = [], F = [], D, L = [], U = [], A, T = [], K = [], P, j = [], G = [];
-  var w = (r = class extends y {
+  }), Y()], i, n = [], d, x = tt(J), y = [], S, E = [], k = [], q, C = [], B = [], F, I, R = [], U = [], L, A = [], N = [], V, D = [], j = [], G, O = [], T = [];
+  var v = (r = class extends x {
     constructor() {
       super(...arguments);
-      c(this, m);
-      c(this, p);
-      c(this, _);
-      c(this, g);
-      c(this, f);
-      c(this, v);
-      l(this, m, d(this, S, !1)), l(this, p, (d(this, k), d(this, C, !1))), l(this, _, (d(this, I), d(this, B, void 0))), l(this, g, (d(this, F), d(this, L, "m"))), l(this, f, (d(this, U), d(this, T, null))), l(this, v, (d(this, K), d(this, j, "horizontal"))), this._hasSelectionExpansionPanelElement = (d(this, G), !1), this._didLoad = !1, this._abort = new Z(this), this._didChange = new x(this, w.events.didChange), this._change = new x(this, w.events.change), this._input = new x(this, w.events.input);
+      b(this, m);
+      b(this, p);
+      b(this, f);
+      b(this, _);
+      b(this, g);
+      b(this, z);
+      l(this, m, (s(this, y), s(this, E, !1))), l(this, p, (s(this, k), s(this, C, !1))), this._fallbackValue = (s(this, B), null), l(this, f, s(this, R, Z() ? "xs" : "m")), l(this, _, (s(this, U), s(this, A, null))), l(this, g, (s(this, N), s(this, D, "horizontal"))), l(this, z, (s(this, j), s(this, O, `sbb-radio-button-group-${++at}`))), this._didLoad = (s(this, T), !1), this._abort = new W(this), this._didChange = new P(this, v.events.didChange);
     }
     /**
      * Whether the radios can be deselected.
@@ -49,38 +49,53 @@ let mt = (() => {
     /**
      * The value of the radio group.
      */
-    get value() {
-      return u(this, _);
-    }
     set value(e) {
-      l(this, _, e);
+      if (this._fallbackValue = e, !this._didLoad)
+        return;
+      if (!e) {
+        this.radioButtons.forEach((a) => a.checked = !1);
+        return;
+      }
+      const t = this.radioButtons.find((a) => a.value === e);
+      t && (t.checked = !0);
+    }
+    get value() {
+      var e;
+      return ((e = this.radioButtons.find((t) => t.checked && !t.disabled)) == null ? void 0 : e.value) ?? this._fallbackValue;
     }
     /**
-     * Size variant.
+     * Size variant, either xs, s or m.
+     * @default 'm' / 'xs' (lean)
      */
     get size() {
-      return u(this, g);
+      return u(this, f);
     }
     set size(e) {
-      l(this, g, e);
+      l(this, f, e);
     }
     /**
      * Overrides the behaviour of `orientation` property.
      */
     get horizontalFrom() {
-      return u(this, f);
+      return u(this, _);
     }
     set horizontalFrom(e) {
-      l(this, f, e);
+      l(this, _, e);
     }
     /**
      * Radio group's orientation, either horizontal or vertical.
      */
     get orientation() {
-      return u(this, v);
+      return u(this, g);
     }
     set orientation(e) {
-      l(this, v, e);
+      l(this, g, e);
+    }
+    get name() {
+      return u(this, z);
+    }
+    set name(e) {
+      l(this, z, e);
     }
     /**
      * List of contained radio buttons.
@@ -88,122 +103,88 @@ let mt = (() => {
     get radioButtons() {
       var e;
       return Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-radio-button, sbb-radio-button-panel")) ?? []).filter((t) => {
-        var i;
-        return ((i = t.closest) == null ? void 0 : i.call(t, "sbb-radio-button-group")) === this;
+        var a;
+        return ((a = t.closest) == null ? void 0 : a.call(t, "sbb-radio-button-group")) === this;
       });
     }
-    get _enabledRadios() {
-      if (!this.disabled)
-        return this.radioButtons.filter((e) => !e.disabled);
-    }
     connectedCallback() {
-      var t, i;
+      var t;
       super.connectedCallback();
       const e = this._abort.signal;
-      this.addEventListener("stateChange", (o) => this._onRadioButtonChange(o), {
-        signal: e,
-        passive: !0
-      }), this.addEventListener("keydown", (o) => this._handleKeyDown(o), { signal: e }), this._hasSelectionExpansionPanelElement = !!((t = this.querySelector) != null && t.call(this, "sbb-selection-expansion-panel")), this.toggleAttribute("data-has-panel", !!((i = this.querySelector) != null && i.call(this, "sbb-selection-expansion-panel, sbb-radio-button-panel"))), this._updateRadios(this.value);
-    }
-    willUpdate(e) {
-      var t;
-      if (super.willUpdate(e), e.has("value") && this._valueChanged(this.value), e.has("disabled")) {
-        for (const i of this.radioButtons)
-          i.tabIndex = this._getRadioTabIndex(i), (t = i.requestUpdate) == null || t.call(i, "disabled");
-        this._setFocusableRadio();
-      }
-      e.has("required") && this.radioButtons.forEach((i) => {
-        var o;
-        return (o = i.requestUpdate) == null ? void 0 : o.call(i, "required");
-      }), e.has("size") && this.radioButtons.forEach((i) => {
-        var o;
-        return (o = i.requestUpdate) == null ? void 0 : o.call(i, "size");
+      this.toggleAttribute("data-has-panel", !!((t = this.querySelector) != null && t.call(this, "sbb-selection-expansion-panel, sbb-radio-button-panel"))), this.addEventListener("change", (a) => this._onRadioChange(a), {
+        signal: e
       });
     }
-    _valueChanged(e) {
-      for (const t of this.radioButtons)
-        t.checked = t.value === e, t.tabIndex = this._getRadioTabIndex(t);
-      this._setFocusableRadio();
-    }
-    firstUpdated(e) {
-      super.firstUpdated(e), this._didLoad = !0, this._updateRadios(this.value);
-    }
-    disconnectedCallback() {
-      super.disconnectedCallback();
-    }
-    _onRadioButtonChange(e) {
-      var t;
-      if (e.stopPropagation(), !!this._didLoad) {
-        if (e.detail.type === "disabled")
-          this._updateRadios(this.value);
-        else if (e.detail.type === "checked") {
-          const i = e.target;
-          e.detail.checked ? (this.value = i.value, this._emitChange(i, this.value)) : this.allowEmptySelection && (this.value = (t = this.radioButtons.find((o) => o.checked)) == null ? void 0 : t.value, this.value || this._emitChange(i));
-        }
-      }
+    willUpdate(e) {
+      super.willUpdate(e), e.has("disabled") && this.radioButtons.forEach((t) => {
+        var a;
+        return (a = t.requestUpdate) == null ? void 0 : a.call(t, "disabled");
+      }), e.has("required") && this.radioButtons.forEach((t) => {
+        var a;
+        return (a = t.requestUpdate) == null ? void 0 : a.call(t, "required");
+      }), e.has("size") && this.radioButtons.forEach((t) => {
+        var a;
+        return (a = t.requestUpdate) == null ? void 0 : a.call(t, "size");
+      }), e.has("name") && this._updateRadiosName();
+    }
+    async firstUpdated(e) {
+      super.firstUpdated(e), this._didLoad = !0, await this.updateComplete, this._updateRadioState();
+    }
+    _onRadioChange(e) {
+      const t = e.target;
+      t.localName !== "sbb-radio-button" && t.localName !== "sbb-radio-button-panel" || (this._fallbackValue = null, this._didChange.emit());
     }
-    _emitChange(e, t) {
-      this._change.emit({ value: t, radioButton: e }), this._input.emit({ value: t, radioButton: e }), this._didChange.emit({ value: t, radioButton: e });
+    /**
+     * Proxy 'name' to child radio-buttons
+     */
+    _updateRadiosName() {
+      this.radioButtons.forEach((e) => e.name = this.name);
     }
-    _updateRadios(e) {
-      var i;
-      if (!this._didLoad)
-        return;
-      const t = this.radioButtons;
-      this.value = e ?? ((i = t.find((o) => o.checked)) == null ? void 0 : i.value) ?? this.value;
-      for (const o of t)
-        o.checked = o.value === this.value, o.tabIndex = this._getRadioTabIndex(o);
-      this._setFocusableRadio();
-    }
-    _setFocusableRadio() {
-      const e = this.radioButtons.find((i) => i.checked && !i.disabled), t = this._enabledRadios;
-      !e && (t != null && t.length) && (t[0].tabIndex = 0);
-    }
-    _getRadioTabIndex(e) {
-      const t = !e.disabled && !this.disabled;
-      return (e.checked || this._hasSelectionExpansionPanelElement) && t ? 0 : -1;
-    }
-    _handleKeyDown(e) {
-      var N;
-      const t = this._enabledRadios;
-      if (!t || !t.length || // don't trap nested handling
-      e.target !== this && e.target.parentElement !== this && ((N = e.target.parentElement) == null ? void 0 : N.localName) !== "sbb-selection-expansion-panel" || !X(e))
-        return;
-      const i = t.findIndex((H) => H === e.target), o = Y(e, i, t.length);
-      this._hasSelectionExpansionPanelElement || t[o].select(), t[o].focus(), e.preventDefault();
+    /**
+     * Re-trigger the setter and update the checked state of the radios.
+     * Mainly used to cover cases where the setter is called before the radios are loaded
+     */
+    _updateRadioState() {
+      this._fallbackValue && (this.value = this.value);
     }
     render() {
-      return V`
+      return K`
       <div class="sbb-radio-group">
-        <slot @slotchange=${() => this._updateRadios()}></slot>
+        <slot
+          @slotchange=${() => {
+        this._updateRadiosName(), this._updateRadioState();
+      }}
+        ></slot>
       </div>
       <div class="sbb-radio-group__error">
         <slot name="error"></slot>
       </div>
     `;
     }
-  }, m = new WeakMap(), p = new WeakMap(), _ = new WeakMap(), g = new WeakMap(), f = new WeakMap(), v = new WeakMap(), h = r, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
-    E = [$(), z({ attribute: "allow-empty-selection", type: Boolean })], R = [$(), z({ type: Boolean })], q = [z()], D = [z()], A = [z({ attribute: "horizontal-from", reflect: !0 })], P = [z({ reflect: !0 })], b(r, null, E, { kind: "accessor", name: "allowEmptySelection", static: !1, private: !1, access: { has: (t) => "allowEmptySelection" in t, get: (t) => t.allowEmptySelection, set: (t, i) => {
-      t.allowEmptySelection = i;
-    } }, metadata: e }, S, k), b(r, null, R, { kind: "accessor", name: "required", static: !1, private: !1, access: { has: (t) => "required" in t, get: (t) => t.required, set: (t, i) => {
-      t.required = i;
-    } }, metadata: e }, C, I), b(r, null, q, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, get: (t) => t.value, set: (t, i) => {
-      t.value = i;
-    } }, metadata: e }, B, F), b(r, null, D, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, i) => {
-      t.size = i;
-    } }, metadata: e }, L, U), b(r, null, A, { kind: "accessor", name: "horizontalFrom", static: !1, private: !1, access: { has: (t) => "horizontalFrom" in t, get: (t) => t.horizontalFrom, set: (t, i) => {
-      t.horizontalFrom = i;
-    } }, metadata: e }, T, K), b(r, null, P, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, i) => {
-      t.orientation = i;
-    } }, metadata: e }, j, G), b(null, s = { value: h }, a, { kind: "class", name: h.name, metadata: e }, null, n), w = h = s.value, e && Object.defineProperty(h, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), r.styles = ot, r.events = {
+  }, m = new WeakMap(), p = new WeakMap(), f = new WeakMap(), _ = new WeakMap(), g = new WeakMap(), z = new WeakMap(), d = r, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
+    S = [w(), c({ attribute: "allow-empty-selection", type: Boolean })], q = [w(), c({ type: Boolean })], F = [c()], I = [c()], L = [c({ attribute: "horizontal-from", reflect: !0 })], V = [c({ reflect: !0 })], G = [w(), c()], h(r, null, S, { kind: "accessor", name: "allowEmptySelection", static: !1, private: !1, access: { has: (t) => "allowEmptySelection" in t, get: (t) => t.allowEmptySelection, set: (t, a) => {
+      t.allowEmptySelection = a;
+    } }, metadata: e }, E, k), h(r, null, q, { kind: "accessor", name: "required", static: !1, private: !1, access: { has: (t) => "required" in t, get: (t) => t.required, set: (t, a) => {
+      t.required = a;
+    } }, metadata: e }, C, B), h(r, null, F, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, set: (t, a) => {
+      t.value = a;
+    } }, metadata: e }, null, y), h(r, null, I, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, a) => {
+      t.size = a;
+    } }, metadata: e }, R, U), h(r, null, L, { kind: "accessor", name: "horizontalFrom", static: !1, private: !1, access: { has: (t) => "horizontalFrom" in t, get: (t) => t.horizontalFrom, set: (t, a) => {
+      t.horizontalFrom = a;
+    } }, metadata: e }, A, N), h(r, null, V, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, a) => {
+      t.orientation = a;
+    } }, metadata: e }, D, j), h(r, null, G, { kind: "accessor", name: "name", static: !1, private: !1, access: { has: (t) => "name" in t, get: (t) => t.name, set: (t, a) => {
+      t.name = a;
+    } }, metadata: e }, O, T), h(null, i = { value: d }, o, { kind: "class", name: d.name, metadata: e }, null, n), v = d = i.value, e && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), r.styles = et, r.events = {
     didChange: "didChange",
     change: "change",
     input: "input"
-  }, d(h, n), r);
-  return w = h;
+  }, s(d, n), r);
+  return v = d;
 })();
 export {
-  mt as SbbRadioButtonGroupElement
+  ct as SbbRadioButtonGroupElement
 };

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

@@ -1,5 +1,5 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
-import { SbbPanelSize } from '../../core/mixins.js';
+import { SbbFormAssociatedRadioButtonMixinType, SbbPanelSize } from '../../core/mixins.js';
 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;
 /**
  /**
@@ -9,16 +9,34 @@ 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.
+ * @overrideType value - string | null
  */
 export declare class SbbRadioButtonPanelElement extends SbbRadioButtonPanelElement_base {
     static styles: CSSResultGroup;
     static readonly events: {
         readonly stateChange: "stateChange";
+        readonly change: "change";
+        readonly input: "input";
         readonly panelConnected: "panelConnected";
     };
-    /** Size variant. */
+    /**
+     * Size variant, either s or m.
+     * @default 'm' / 's' (lean)
+     */
     accessor size: SbbPanelSize;
+    private _hasSelectionExpansionPanelElement;
+    connectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
+    /**
+     * As an exception, panels with an expansion-panel attached are always focusable
+     */
+    protected updateFocusableRadios(): void;
+    /**
+     * As an exception, radio-panels with an expansion-panel attached are not checked automatically when navigating by keyboard
+     */
+    protected navigateByKeyboard(next: SbbFormAssociatedRadioButtonMixinType): Promise<void>;
     protected render(): TemplateResult;
 }
 declare global {

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;AAIb,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,6BAA6B,CAAC;;AAErC;;;;;;;;GAQG;AACH,qBAGM,0BAA2B,SAAQ,+BAExC;IACC,OAAuB,MAAM,EAAE,cAAc,CAA8C;IAG3F,gBAAuB,MAAM;;;MAGlB;IAEX,oBAAoB;IACpB,SAEgB,IAAI,EAAE,YAAY,CAAO;cAEtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,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;AAKb,OAAO,EAEL,KAAK,qCAAqC,EAE1C,KAAK,YAAY,EAElB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,6BAA6B,CAAC;;AAErC;;;;;;;;;;;GAWG;AACH,qBAGM,0BAA2B,SAAQ,+BAExC;IACC,OAAuB,MAAM,EAAE,cAAc,CAA8C;IAG3F,gBAAuB,MAAM;;;;;MAKlB;IAEX;;;OAGG;IACH,SAEgB,IAAI,EAAE,YAAY,CAAwB;IAE1D,OAAO,CAAC,kCAAkC,CAAkB;IAE5C,iBAAiB,IAAI,IAAI;cAKtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5E;;OAEG;cACgB,qBAAqB,IAAI,IAAI;IAShD;;OAEG;cACsB,kBAAkB,CACzC,IAAI,EAAE,qCAAqC,GAC1C,OAAO,CAAC,IAAI,CAAC;cAQG,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}

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

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

package/radio-button/radio-button.js

@@ -1,61 +1,57 @@
-var h = (t) => {
+var p = (t) => {
   throw TypeError(t);
 };
-var p = (t, e, s) => e.has(t) || h("Cannot " + s);
-var _ = (t, e, s) => (p(t, e, "read from private field"), s ? s.call(t) : e.get(t)), z = (t, e, s) => e.has(t) ? h("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), v = (t, e, s, a) => (p(t, e, "write to private field"), a ? a.call(t, s) : e.set(t, s), s);
-import { __esDecorate as y, __runInitializers as u } from "tslib";
-import { css as g, LitElement as S, html as x, nothing as k } from "lit";
-import { customElement as E, property as B } from "lit/decorators.js";
-import { slotState as C, getOverride as $ } from "../core/decorators.js";
-import { SbbRadioButtonCommonElementMixin as D, radioButtonCommonStyle as I } from "./common.js";
-const O = g`*,: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))}`;
-let T = (() => {
-  var l, i;
-  let t = [E("sbb-radio-button"), C()], e, s = [], a, c = D(S), b, d = [], m = [];
-  return i = class extends c {
+var _ = (t, e, s) => e.has(t) || p("Cannot " + s);
+var h = (t, e, s) => (_(t, e, "read from private field"), s ? s.call(t) : e.get(t)), z = (t, e, s) => e.has(t) ? p("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), g = (t, e, s, o) => (_(t, e, "write to private field"), o ? o.call(t, s) : e.set(t, s), s);
+import { __esDecorate as v, __runInitializers as u } from "tslib";
+import { css as y, LitElement as S, html as x } from "lit";
+import { customElement as E, property as k } from "lit/decorators.js";
+import { slotState as B, getOverride as C } from "../core/decorators.js";
+import { isLean as D } from "../core/dom.js";
+import { SbbRadioButtonCommonElementMixin as I, radioButtonCommonStyle as O } from "./common.js";
+const j = y`*,: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))}`;
+let F = (() => {
+  var l, a;
+  let t = [E("sbb-radio-button"), B()], e, s = [], o, c = I(S), b, m = [], d = [];
+  return a = class extends c {
     constructor() {
       super(...arguments);
-      z(this, l, u(this, d, "m"));
-      u(this, m);
+      z(this, l, u(this, m, D() ? "xs" : "m"));
+      u(this, d);
     }
-    /** Size variant. */
+    /**
+     * Size variant, either xs, s or m.
+     * @default 'm' / 'xs' (lean)
+     */
     get size() {
-      return _(this, l);
+      return h(this, l);
     }
     set size(r) {
-      v(this, l, r);
+      g(this, l, r);
     }
     render() {
       return x`
       <label class="sbb-radio-button">
-        <input
-          type="radio"
-          aria-hidden="true"
-          tabindex="-1"
-          ?disabled=${this.disabled}
-          ?required=${this.required}
-          ?checked=${this.checked}
-          value=${this.value || k}
-          class="sbb-screen-reader-only"
-        />
         <span class="sbb-radio-button__label-slot">
           <slot></slot>
         </span>
       </label>
     `;
     }
-  }, l = new WeakMap(), a = i, (() => {
+  }, l = new WeakMap(), o = a, (() => {
     const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
-    b = [B({ reflect: !0 }), $((o, n) => {
+    b = [k({ reflect: !0 }), C((i, n) => {
       var f;
-      return ((f = o.group) == null ? void 0 : f.size) ?? n;
-    })], y(i, null, b, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (o) => "size" in o, get: (o) => o.size, set: (o, n) => {
-      o.size = n;
-    } }, metadata: r }, d, m), y(null, e = { value: a }, t, { kind: "class", name: a.name, metadata: r }, null, s), a = e.value, r && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), i.styles = [I, O], i.events = {
-    stateChange: "stateChange"
-  }, u(a, s), a;
+      return ((f = i.group) == null ? void 0 : f.size) ?? n;
+    })], v(a, null, b, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (i) => "size" in i, get: (i) => i.size, set: (i, n) => {
+      i.size = n;
+    } }, metadata: r }, m, d), v(null, e = { value: o }, t, { kind: "class", name: o.name, metadata: r }, null, s), o = e.value, r && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), a.styles = [O, j], a.events = {
+    stateChange: "stateChange",
+    change: "change",
+    input: "input"
+  }, u(o, s), o;
 })();
 export {
-  T as SbbRadioButtonElement
+  F as SbbRadioButtonElement
 };