@sbb-esta/lyne-elements-dev 4.7.0-dev.1773333589 → 4.7.0-dev.1773388991

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

@@ -1,167 +1,2 @@
-var M = (a) => {
-  throw TypeError(a);
-};
-var O = (a, r, s) => r.has(a) || M("Cannot " + s);
-var d = (a, r, s) => (O(a, r, "read from private field"), s ? s.call(a) : r.get(a)), u = (a, r, s) => r.has(a) ? M("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, s), n = (a, r, s, z) => (O(a, r, "write to private field"), z ? z.call(a, s) : r.set(a, s), s);
-import { __esDecorate as h, __runInitializers as l } from "tslib";
-import { MutationController as $ } from "@lit-labs/observers/mutation-controller.js";
-import { css as T, html as B } from "lit";
-import { property as b } from "lit/decorators.js";
-import { SbbElement as H } from "../core/base-elements.js";
-import { forceType as w } from "../core/decorators.js";
-import { isLean as J } from "../core/dom.js";
-import { SbbDisabledMixin as K } from "../core/mixins.js";
-import { boxSizingStyles as Q } from "../core/styles.js";
-const W = T`:host{display:block}:host([orientation=vertical]){--sbb-radio-button-group-orientation: column;--sbb-radio-button-group-width: 100%;--sbb-radio-button-group-radio-button-width: 100%}:host(:is(:state(has-panel),[state--has-panel])){--sbb-radio-button-group-width: 100%;--sbb-radio-button-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);--sbb-radio-button-group-radio-button-flex: auto}@media(min-width:0rem){:host([orientation=vertical][horizontal-from=zero]){--sbb-radio-button-group-orientation: row;--sbb-radio-button-group-radio-button-width: auto;--sbb-radio-button-group-radio-button-width: initial}:host([orientation=vertical][horizontal-from=zero]:not(:is(:state(has-panel),[state--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;--sbb-radio-button-group-radio-button-width: auto;--sbb-radio-button-group-radio-button-width: initial}:host([orientation=vertical][horizontal-from=small]:not(:is(:state(has-panel),[state--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;--sbb-radio-button-group-radio-button-width: auto;--sbb-radio-button-group-radio-button-width: initial}:host([orientation=vertical][horizontal-from=large]:not(:is(:state(has-panel),[state--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;--sbb-radio-button-group-radio-button-width: auto;--sbb-radio-button-group-radio-button-width: initial}:host([orientation=vertical][horizontal-from=ultra]:not(:is(:state(has-panel),[state--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)}:host(:is(:state(slotted-error),[state--slotted-error])) .sbb-radio-group{margin-block-end:var(--sbb-spacing-fixed-1x)}::slotted(sbb-radio-button-panel){width:var(--sbb-radio-button-group-radio-button-width);flex:var(--sbb-radio-button-group-radio-button-flex)}`;
-let X = 0, st = (() => {
-  var c, m, p, f, g, _, i;
-  let a = K(H), r = [], s, z = [], v = [], x, y = [], k = [], q, S, E = [], F = [], C, I = [], U = [], N, V = [], L = [], j, A = [], D = [];
-  return i = class extends a {
-    constructor() {
-      super();
-      u(this, c);
-      u(this, m);
-      u(this, p);
-      u(this, f);
-      u(this, g);
-      u(this, _);
-      n(this, c, (l(this, r), l(this, z, !1))), n(this, m, (l(this, v), l(this, y, !1))), this._fallbackValue = (l(this, k), null), n(this, p, l(this, E, J() ? "xs" : "m")), n(this, f, (l(this, F), l(this, I, null))), n(this, g, (l(this, U), l(this, V, "horizontal"))), n(this, _, (l(this, L), l(this, A, `sbb-radio-button-group-${++X}`))), l(this, D), this.addController(new $(this, {
-        config: { childList: !0, subtree: !0 },
-        callback: () => this.toggleState("has-panel", !!this.querySelector?.("sbb-radio-button-panel"))
-      })), this.addEventListener?.("change", (e) => this._onRadioChange(e));
-    }
-    /**
-     * Whether the radios can be deselected.
-     */
-    get allowEmptySelection() {
-      return d(this, c);
-    }
-    set allowEmptySelection(e) {
-      n(this, c, e);
-    }
-    /**
-     * Whether the radio group is required.
-     */
-    get required() {
-      return d(this, m);
-    }
-    set required(e) {
-      n(this, m, e);
-    }
-    /**
-     * The value of the radio group.
-     */
-    set value(e) {
-      if (this._fallbackValue = e, !this.hasUpdated)
-        return;
-      if (e == null) {
-        this.radioButtons.forEach((o) => o.checked = !1);
-        return;
-      }
-      const t = this.radioButtons.find((o) => o.value === e);
-      t && (t.checked = !0);
-    }
-    get value() {
-      return this.radioButtons.find((e) => e.checked && !e.disabled)?.value ?? this._fallbackValue;
-    }
-    /**
-     * Size variant, either xs, s or m.
-     * @default 'm' / 'xs' (lean)
-     */
-    get size() {
-      return d(this, p);
-    }
-    set size(e) {
-      n(this, p, e);
-    }
-    /**
-     * Overrides the behavior of `orientation` property.
-     */
-    get horizontalFrom() {
-      return d(this, f);
-    }
-    set horizontalFrom(e) {
-      n(this, f, e);
-    }
-    /**
-     * Radio group's orientation, either horizontal or vertical.
-     */
-    get orientation() {
-      return d(this, g);
-    }
-    set orientation(e) {
-      n(this, g, e);
-    }
-    get name() {
-      return d(this, _);
-    }
-    set name(e) {
-      n(this, _, e);
-    }
-    /**
-     * List of contained radio buttons.
-     */
-    get radioButtons() {
-      return Array.from(this.querySelectorAll?.("sbb-radio-button, sbb-radio-button-panel") ?? []).filter((e) => e.closest?.("sbb-radio-button-group") === this);
-    }
-    willUpdate(e) {
-      super.willUpdate(e), e.has("disabled") && this.radioButtons.forEach((t) => t.requestUpdate?.("disabled")), e.has("required") && this.radioButtons.forEach((t) => t.requestUpdate?.("required")), e.has("size") && this.radioButtons.forEach((t) => t.requestUpdate?.("size")), e.has("name") && this._updateRadiosName();
-    }
-    firstUpdated(e) {
-      super.firstUpdated(e), this.updateComplete.then(() => this._updateRadioState());
-    }
-    _onRadioChange(e) {
-      const t = e.target;
-      t.localName !== "sbb-radio-button" && t.localName !== "sbb-radio-button-panel" || t.group !== this || (this._fallbackValue = null, this.dispatchEvent(new Event("didChange", { bubbles: !0 })));
-    }
-    /**
-     * Proxy 'name' to child radio-buttons
-     */
-    _updateRadiosName() {
-      this.radioButtons.forEach((e) => e.name = this.name);
-    }
-    /**
-     * 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 != null && (this.value = this.value);
-    }
-    render() {
-      return B`
-      <div class="sbb-radio-group">
-        <slot
-          @slotchange=${() => {
-        this._updateRadiosName(), this._updateRadioState();
-      }}
-        ></slot>
-      </div>
-      <slot name="error"></slot>
-    `;
-    }
-  }, c = new WeakMap(), m = new WeakMap(), p = new WeakMap(), f = new WeakMap(), g = new WeakMap(), _ = new WeakMap(), (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
-    s = [w(), b({ attribute: "allow-empty-selection", type: Boolean })], x = [w(), b({ type: Boolean })], q = [b()], S = [b()], C = [b({ attribute: "horizontal-from", reflect: !0 })], N = [b({ reflect: !0 })], j = [w(), b()], h(i, null, s, { kind: "accessor", name: "allowEmptySelection", static: !1, private: !1, access: { has: (t) => "allowEmptySelection" in t, get: (t) => t.allowEmptySelection, set: (t, o) => {
-      t.allowEmptySelection = o;
-    } }, metadata: e }, z, v), h(i, null, x, { kind: "accessor", name: "required", static: !1, private: !1, access: { has: (t) => "required" in t, get: (t) => t.required, set: (t, o) => {
-      t.required = o;
-    } }, metadata: e }, y, k), h(i, null, q, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, set: (t, o) => {
-      t.value = o;
-    } }, metadata: e }, null, r), h(i, null, S, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, o) => {
-      t.size = o;
-    } }, metadata: e }, E, F), h(i, null, C, { kind: "accessor", name: "horizontalFrom", static: !1, private: !1, access: { has: (t) => "horizontalFrom" in t, get: (t) => t.horizontalFrom, set: (t, o) => {
-      t.horizontalFrom = o;
-    } }, metadata: e }, I, U), h(i, null, N, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, o) => {
-      t.orientation = o;
-    } }, metadata: e }, V, L), h(i, null, j, { kind: "accessor", name: "name", static: !1, private: !1, access: { has: (t) => "name" in t, get: (t) => t.name, set: (t, o) => {
-      t.name = o;
-    } }, metadata: e }, A, D), e && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), i.elementName = "sbb-radio-button-group", i.role = "radiogroup", i.styles = [Q, W], i.events = {
-    didChange: "didChange",
-    change: "change",
-    input: "input"
-  }, i;
-})();
-export {
-  st as SbbRadioButtonGroupElement
-};
+import { t as e } from "../radio-button-group.component-Cf8r6Whf.js";
+export { e as SbbRadioButtonGroupElement };

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

@@ -0,0 +1,232 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n, html as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbElement as a } from "./core/base-elements.js";
+import { forceType as o } from "./core/decorators.js";
+import { isLean as s } from "./core/dom.js";
+import { SbbDisabledMixin as c } from "./core/mixins.js";
+import { boxSizingStyles as l } from "./core/styles.js";
+import { MutationController as u } from "@lit-labs/observers/mutation-controller.js";
+//#region src/elements/radio-button-group/radio-button-group.scss?lit&inline
+var d = n`:host{display:block}:host([orientation=vertical]){--sbb-radio-button-group-orientation:column;--sbb-radio-button-group-width:100%;--sbb-radio-button-group-radio-button-width:100%}:host(:is(:state(has-panel),[state--has-panel])){--sbb-radio-button-group-width:100%;--sbb-radio-button-group-gap:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);--sbb-radio-button-group-radio-button-flex:auto}@media (width>=0){:host([orientation=vertical][horizontal-from=zero]){--sbb-radio-button-group-orientation:row;--sbb-radio-button-group-radio-button-width:initial}:host([orientation=vertical][horizontal-from=zero]:not(:is(:state(has-panel),[state--has-panel]))){--sbb-radio-button-group-width:max-content}}@media (width>=37.5rem){:host([orientation=vertical][horizontal-from=small]){--sbb-radio-button-group-orientation:row;--sbb-radio-button-group-radio-button-width:initial}:host([orientation=vertical][horizontal-from=small]:not(:is(:state(has-panel),[state--has-panel]))){--sbb-radio-button-group-width:max-content}}@media (width>=64rem){:host([orientation=vertical][horizontal-from=large]){--sbb-radio-button-group-orientation:row;--sbb-radio-button-group-radio-button-width:initial}:host([orientation=vertical][horizontal-from=large]:not(:is(:state(has-panel),[state--has-panel]))){--sbb-radio-button-group-width:max-content}}@media (width>=90rem){:host([orientation=vertical][horizontal-from=ultra]){--sbb-radio-button-group-orientation:row;--sbb-radio-button-group-radio-button-width:initial}:host([orientation=vertical][horizontal-from=ultra]:not(:is(:state(has-panel),[state--has-panel]))){--sbb-radio-button-group-width:max-content}}.sbb-radio-group{flex-direction:var(--sbb-radio-button-group-orientation);gap:var(--sbb-radio-button-group-gap);width:var(--sbb-radio-button-group-width);align-items:flex-start;display:flex}:host(:is(:state(slotted-error),[state--slotted-error])) .sbb-radio-group{margin-block-end:var(--sbb-spacing-fixed-1x)}::slotted(sbb-radio-button-panel){width:var(--sbb-radio-button-group-radio-button-width);flex:var(--sbb-radio-button-group-radio-button-flex)}`, f = 0, p = (() => {
+	let n = c(a), p = [], m, h = [], g = [], _, v = [], y = [], b, x, S = [], C = [], w, T = [], E = [], D, O = [], k = [], A, j = [], M = [];
+	return class extends n {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+			m = [o(), i({
+				attribute: "allow-empty-selection",
+				type: Boolean
+			})], _ = [o(), i({ type: Boolean })], b = [i()], x = [i()], w = [i({
+				attribute: "horizontal-from",
+				reflect: !0
+			})], D = [i({ reflect: !0 })], A = [o(), i()], e(this, null, m, {
+				kind: "accessor",
+				name: "allowEmptySelection",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "allowEmptySelection" in e,
+					get: (e) => e.allowEmptySelection,
+					set: (e, t) => {
+						e.allowEmptySelection = t;
+					}
+				},
+				metadata: t
+			}, h, g), e(this, null, _, {
+				kind: "accessor",
+				name: "required",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "required" in e,
+					get: (e) => e.required,
+					set: (e, t) => {
+						e.required = t;
+					}
+				},
+				metadata: t
+			}, v, y), e(this, null, b, {
+				kind: "setter",
+				name: "value",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "value" in e,
+					set: (e, t) => {
+						e.value = t;
+					}
+				},
+				metadata: t
+			}, null, p), e(this, null, x, {
+				kind: "accessor",
+				name: "size",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "size" in e,
+					get: (e) => e.size,
+					set: (e, t) => {
+						e.size = t;
+					}
+				},
+				metadata: t
+			}, S, C), e(this, null, w, {
+				kind: "accessor",
+				name: "horizontalFrom",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "horizontalFrom" in e,
+					get: (e) => e.horizontalFrom,
+					set: (e, t) => {
+						e.horizontalFrom = t;
+					}
+				},
+				metadata: t
+			}, T, E), e(this, null, D, {
+				kind: "accessor",
+				name: "orientation",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "orientation" in e,
+					get: (e) => e.orientation,
+					set: (e, t) => {
+						e.orientation = t;
+					}
+				},
+				metadata: t
+			}, O, k), e(this, null, A, {
+				kind: "accessor",
+				name: "name",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "name" in e,
+					get: (e) => e.name,
+					set: (e, t) => {
+						e.name = t;
+					}
+				},
+				metadata: t
+			}, j, M), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-radio-button-group";
+		}
+		static {
+			this.role = "radiogroup";
+		}
+		static {
+			this.styles = [l, d];
+		}
+		static {
+			this.events = {
+				didChange: "didChange",
+				change: "change",
+				input: "input"
+			};
+		}
+		#e;
+		get allowEmptySelection() {
+			return this.#e;
+		}
+		set allowEmptySelection(e) {
+			this.#e = e;
+		}
+		#t;
+		get required() {
+			return this.#t;
+		}
+		set required(e) {
+			this.#t = e;
+		}
+		set value(e) {
+			if (this._fallbackValue = e, !this.hasUpdated) return;
+			if (e == null) {
+				this.radioButtons.forEach((e) => e.checked = !1);
+				return;
+			}
+			let t = this.radioButtons.find((t) => t.value === e);
+			t && (t.checked = !0);
+		}
+		get value() {
+			return this.radioButtons.find((e) => e.checked && !e.disabled)?.value ?? this._fallbackValue;
+		}
+		#n;
+		get size() {
+			return this.#n;
+		}
+		set size(e) {
+			this.#n = e;
+		}
+		#r;
+		get horizontalFrom() {
+			return this.#r;
+		}
+		set horizontalFrom(e) {
+			this.#r = e;
+		}
+		#i;
+		get orientation() {
+			return this.#i;
+		}
+		set orientation(e) {
+			this.#i = e;
+		}
+		#a;
+		get name() {
+			return this.#a;
+		}
+		set name(e) {
+			this.#a = e;
+		}
+		get radioButtons() {
+			return Array.from(this.querySelectorAll?.("sbb-radio-button, sbb-radio-button-panel") ?? []).filter((e) => e.closest?.("sbb-radio-button-group") === this);
+		}
+		constructor() {
+			super(), this.#e = (t(this, p), t(this, h, !1)), this.#t = (t(this, g), t(this, v, !1)), this._fallbackValue = (t(this, y), null), this.#n = t(this, S, s() ? "xs" : "m"), this.#r = (t(this, C), t(this, T, null)), this.#i = (t(this, E), t(this, O, "horizontal")), this.#a = (t(this, k), t(this, j, `sbb-radio-button-group-${++f}`)), t(this, M), this.addController(new u(this, {
+				config: {
+					childList: !0,
+					subtree: !0
+				},
+				callback: () => this.toggleState("has-panel", !!this.querySelector?.("sbb-radio-button-panel"))
+			})), this.addEventListener?.("change", (e) => this._onRadioChange(e));
+		}
+		willUpdate(e) {
+			super.willUpdate(e), e.has("disabled") && this.radioButtons.forEach((e) => e.requestUpdate?.("disabled")), e.has("required") && this.radioButtons.forEach((e) => e.requestUpdate?.("required")), e.has("size") && this.radioButtons.forEach((e) => e.requestUpdate?.("size")), e.has("name") && this._updateRadiosName();
+		}
+		firstUpdated(e) {
+			super.firstUpdated(e), this.updateComplete.then(() => this._updateRadioState());
+		}
+		_onRadioChange(e) {
+			let t = e.target;
+			t.localName !== "sbb-radio-button" && t.localName !== "sbb-radio-button-panel" || t.group !== this || (this._fallbackValue = null, this.dispatchEvent(new Event("didChange", { bubbles: !0 })));
+		}
+		_updateRadiosName() {
+			this.radioButtons.forEach((e) => e.name = this.name);
+		}
+		_updateRadioState() {
+			this._fallbackValue != null && (this.value = this.value);
+		}
+		render() {
+			return r`
+      <div class="sbb-radio-group">
+        <slot
+          @slotchange=${() => {
+				this._updateRadiosName(), this._updateRadioState();
+			}}
+        ></slot>
+      </div>
+      <slot name="error"></slot>
+    `;
+		}
+	};
+})();
+//#endregion
+export { p as t };

package/radio-button-group.js

@@ -1,5 +1,6 @@
-import { SbbRadioButtonGroupElement as o } from "./radio-button-group/radio-button-group.component.js";
-o.define();
-export {
-  o as SbbRadioButtonGroupElement
-};
+import { t as e } from "./radio-button-group.component-Cf8r6Whf.js";
+import "./radio-button-group.pure.js";
+//#region src/elements/radio-button-group.ts
+e.define();
+//#endregion
+export { e as SbbRadioButtonGroupElement };

package/radio-button-group.pure.js

@@ -1,4 +1,2 @@
-import { SbbRadioButtonGroupElement as e } from "./radio-button-group/radio-button-group.component.js";
-export {
-  e as SbbRadioButtonGroupElement
-};
+import { t as e } from "./radio-button-group.component-Cf8r6Whf.js";
+export { e as SbbRadioButtonGroupElement };

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

@@ -1,54 +1,77 @@
-var c = (e) => {
-  throw TypeError(e);
-};
-var b = (e, t, a) => t.has(e) || c("Cannot " + a);
-var u = (e, t, a) => (b(e, t, "read from private field"), a ? a.call(e) : t.get(e)), m = (e, t, a) => t.has(e) ? c("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), r = (e, t, a, n) => (b(e, t, "write to private field"), n ? n.call(e, a) : t.set(e, a), a);
-import { __runInitializers as d, __esDecorate as f } from "tslib";
-import { nothing as v, html as p } from "lit";
-import { property as y } from "lit/decorators.js";
-import { SbbElement as S } from "../core/base-elements.js";
-import { SbbPanelMixin as _, SbbUpdateSchedulerMixin as g, panelCommonStyle as x } from "../core/mixins.js";
-import { boxSizingStyles as k } from "../core/styles.js";
-import { SbbRadioButtonCommonElementMixin as C, radioButtonCommonStyle as w } from "../radio-button/common/radio-button-common.js";
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, nothing as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbElement as a } from "../core/base-elements.js";
+import { SbbPanelMixin as o, SbbUpdateSchedulerMixin as s, panelCommonStyle as c } from "../core/mixins.js";
+import { boxSizingStyles as l } from "../core/styles.js";
 import "../screen-reader-only.js";
-let P = (() => {
-  var o, i;
-  let e = _(C(g(S))), t, a = [], n = [];
-  return i = class extends e {
-    constructor() {
-      super(...arguments);
-      m(this, o);
-      r(this, o, d(this, a, null)), this._hasSelectionPanelElement = (d(this, n), !1);
-    }
-    /**
-     * The value of the form element
-     */
-    get value() {
-      return u(this, o);
-    }
-    set value(s) {
-      r(this, o, s);
-    }
-    connectedCallback() {
-      super.connectedCallback(), this._hasSelectionPanelElement = !!this.closest?.("sbb-selection-expansion-panel, sbb-selection-action-panel");
-    }
-    willUpdate(s) {
-      super.willUpdate(s), s.has("checked") && this.toggleState("checked", this.checked);
-    }
-    /**
-     * As an exception, panels with a selection-panel attached are always focusable
-     */
-    updateFocusableRadios() {
-      super.updateFocusableRadios(), Array.from(this.associatedRadioButtons ?? []).filter((l) => !l.disabled && l._hasSelectionPanelElement).forEach((l) => l.tabIndex = 0);
-    }
-    /**
-     * As an exception, radio-panels with a selection-panel attached are not checked automatically when navigating by keyboard
-     */
-    async navigateByKeyboard(s) {
-      this._hasSelectionPanelElement ? s.focus() : await super.navigateByKeyboard(s);
-    }
-    render() {
-      return p`
+import { SbbRadioButtonCommonElementMixin as u, radioButtonCommonStyle as d } from "../radio-button/common/radio-button-common.js";
+//#region src/elements/radio-button-panel/radio-button-panel.component.ts
+var f = (() => {
+	let f = o(u(s(a))), p, m = [], h = [];
+	return class extends f {
+		constructor() {
+			super(...arguments), this.#e = t(this, m, null), this._hasSelectionPanelElement = (t(this, h), !1);
+		}
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+			p = [i()], e(this, null, p, {
+				kind: "accessor",
+				name: "value",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "value" in e,
+					get: (e) => e.value,
+					set: (e, t) => {
+						e.value = t;
+					}
+				},
+				metadata: t
+			}, m, h), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-radio-button-panel";
+		}
+		static {
+			this.styles = [
+				l,
+				d,
+				c
+			];
+		}
+		static {
+			this.events = {
+				change: "change",
+				input: "input"
+			};
+		}
+		#e;
+		get value() {
+			return this.#e;
+		}
+		set value(e) {
+			this.#e = e;
+		}
+		connectedCallback() {
+			super.connectedCallback(), this._hasSelectionPanelElement = !!this.closest?.("sbb-selection-expansion-panel, sbb-selection-action-panel");
+		}
+		willUpdate(e) {
+			super.willUpdate(e), e.has("checked") && this.toggleState("checked", this.checked);
+		}
+		updateFocusableRadios() {
+			super.updateFocusableRadios(), Array.from(this.associatedRadioButtons ?? []).filter((e) => !e.disabled && e._hasSelectionPanelElement).forEach((e) => e.tabIndex = 0);
+		}
+		async navigateByKeyboard(e) {
+			this._hasSelectionPanelElement ? e.focus() : await super.navigateByKeyboard(e);
+		}
+		render() {
+			return n`
       <div class="sbb-selection-panel">
         <div class="sbb-selection-panel__badge">
           <slot name="badge"></slot>
@@ -59,25 +82,12 @@ let P = (() => {
             <slot name="suffix"></slot>
           </span>
           <slot name="subtext"></slot>
-          ${this.expansionState ? p`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : v}
+          ${this.expansionState ? n`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : r}
         </span>
       </div>
     `;
-    }
-  }, o = new WeakMap(), (() => {
-    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
-    t = [y()], f(i, null, t, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (l) => "value" in l, get: (l) => l.value, set: (l, h) => {
-      l.value = h;
-    } }, metadata: s }, a, n), s && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
-  })(), i.elementName = "sbb-radio-button-panel", i.styles = [
-    k,
-    w,
-    x
-  ], i.events = {
-    change: "change",
-    input: "input"
-  }, i;
+		}
+	};
 })();
-export {
-  P as SbbRadioButtonPanelElement
-};
+//#endregion
+export { f as SbbRadioButtonPanelElement };

package/radio-button-panel.js

@@ -1,5 +1,6 @@
 import { SbbRadioButtonPanelElement as e } from "./radio-button-panel/radio-button-panel.component.js";
+import "./radio-button-panel.pure.js";
+//#region src/elements/radio-button-panel.ts
 e.define();
-export {
-  e as SbbRadioButtonPanelElement
-};
+//#endregion
+export { e as SbbRadioButtonPanelElement };

package/radio-button-panel.pure.js

@@ -1,4 +1,2 @@
-import { SbbRadioButtonPanelElement as t } from "./radio-button-panel/radio-button-panel.component.js";
-export {
-  t as SbbRadioButtonPanelElement
-};
+import { SbbRadioButtonPanelElement as e } from "./radio-button-panel/radio-button-panel.component.js";
+export { e as SbbRadioButtonPanelElement };