@sbb-esta/lyne-elements 3.12.0 → 4.0.0-next

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"radio-button-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button-panel/radio-button-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,6BAA6B,CAAC;AAErC,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAC7C,cAAc,EACd,sBAAsB,GAAG,qBAAqB,CAC/C,CAAC;;AAEF;;;;;;;;;;;GAWG;AACH,qBAGM,0BAA0B,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,+BAEpD;IACC,OAAuB,MAAM,EAAE,cAAc,CAA8C;IAG3F,gBAAuB,MAAM;;;MAGlB;IAEX;;;OAGG;IACH,SAEgB,IAAI,EAAE,YAAY,CAAwB;IAE1D;;OAEG;IACH,SACgB,KAAK,EAAE,CAAC,GAAG,IAAI,CAAQ;IAEvC,OAAO,CAAC,yBAAyB,CAAkB;IAEnC,iBAAiB,IAAI,IAAI;cAOtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAkB5E;;OAEG;cACgB,qBAAqB,IAAI,IAAI;IAShD;;OAEG;cACsB,kBAAkB,CAAC,IAAI,EAAE,0BAA0B,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ5F,OAAO,CAAC,oBAAoB;cAST,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;IAED,UAAU,2BAA2B;QACnC,WAAW,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;KAC1C;CACF"}
+{"version":3,"file":"radio-button-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button-panel/radio-button-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,sBAAsB,CAAC;AAI9B,OAAO,6BAA6B,CAAC;AAErC,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAC7C,cAAc,EACd,sBAAsB,GAAG,qBAAqB,CAC/C,CAAC;;AAEF;;;;;;;;;;;GAWG;AACH,qBAEM,0BAA0B,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,+BAEpD;IACC,OAAuB,MAAM,EAAE,cAAc,CAI3C;IAGF,gBAAuB,MAAM;;;MAGlB;IAEX;;;OAGG;IACH,SAEgB,IAAI,EAAE,YAAY,CAAwB;IAE1D;;OAEG;IACH,SACgB,KAAK,EAAE,CAAC,GAAG,IAAI,CAAQ;IAEvC,OAAO,CAAC,yBAAyB,CAAkB;IAEnC,iBAAiB,IAAI,IAAI;cAOtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAkB5E;;OAEG;cACgB,qBAAqB,IAAI,IAAI;IAShD;;OAEG;cACsB,kBAAkB,CAAC,IAAI,EAAE,0BAA0B,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ5F,OAAO,CAAC,oBAAoB;cAST,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;IAED,UAAU,2BAA2B;QACnC,WAAW,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;KAC1C;CACF"}

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

@@ -1,25 +1,26 @@
 var S = (s) => {
   throw TypeError(s);
 };
-var E = (s, a, i) => a.has(s) || S("Cannot " + i);
-var b = (s, a, i) => (E(s, a, "read from private field"), i ? i.call(s) : a.get(s)), h = (s, a, i) => a.has(s) ? S("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, i), d = (s, a, i, l) => (E(s, a, "write to private field"), l ? l.call(s, i) : a.set(s, i), i);
+var x = (s, a, i) => a.has(s) || S("Cannot " + i);
+var b = (s, a, i) => (x(s, a, "read from private field"), i ? i.call(s) : a.get(s)), h = (s, a, i) => a.has(s) ? S("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, i), d = (s, a, i, l) => (x(s, a, "write to private field"), l ? l.call(s, i) : a.set(s, i), i);
 import { __runInitializers as u, __esDecorate as m } from "tslib";
-import { LitElement as C, nothing as B, html as x } from "lit";
+import { LitElement as C, nothing as B, html as E } from "lit";
 import { customElement as w, property as k } from "lit/decorators.js";
-import { slotState as I, getOverride as R } from "../../core/decorators.js";
-import { isLean as D } from "../../core/dom.js";
-import { SbbPanelMixin as M, SbbUpdateSchedulerMixin as O, panelCommonStyle as P } from "../../core/mixins.js";
+import { getOverride as I } from "../../core/decorators.js";
+import { isLean as R } from "../../core/dom.js";
+import { SbbPanelMixin as D, SbbUpdateSchedulerMixin as M, panelCommonStyle as O } from "../../core/mixins.js";
+import { boxSizingStyles as P } from "../../core/styles.js";
 import { SbbRadioButtonCommonElementMixin as U, radioButtonCommonStyle as j } from "../common.js";
 import "../../screen-reader-only.js";
-let N = (() => {
+let Q = (() => {
   var o, r, n;
-  let s = [w("sbb-radio-button-panel"), I()], a, i = [], l, p = M(U(O(C))), _, f = [], v = [], g, y = [], z = [];
+  let s = [w("sbb-radio-button-panel")], a, i = [], l, p = D(U(M(C))), _, f = [], v = [], g, y = [], z = [];
   return n = class extends p {
     constructor() {
       super(...arguments);
       h(this, o);
       h(this, r);
-      d(this, o, u(this, f, D() ? "s" : "m")), d(this, r, (u(this, v), u(this, y, null))), this._hasSelectionPanelElement = (u(this, z), !1);
+      d(this, o, u(this, f, R() ? "s" : "m")), d(this, r, (u(this, v), u(this, y, null))), this._hasSelectionPanelElement = (u(this, z), !1);
     }
     /**
      * Size variant, either s or m.
@@ -62,7 +63,7 @@ let N = (() => {
       this.dispatchEvent(new CustomEvent("statechange", { bubbles: !0, detail: e }));
     }
     render() {
-      return x`
+      return E`
       <div class="sbb-selection-panel">
         <div class="sbb-selection-panel__badge">
           <slot name="badge"></slot>
@@ -73,23 +74,27 @@ let N = (() => {
             <slot name="suffix"></slot>
           </span>
           <slot name="subtext"></slot>
-          ${this.expansionState ? x`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : B}
+          ${this.expansionState ? E`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : B}
         </span>
       </div>
     `;
     }
   }, o = new WeakMap(), r = new WeakMap(), l = n, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
-    _ = [k({ reflect: !0 }), R((t, c) => t.group?.size ? t.group.size === "xs" ? "s" : t.group.size : c)], g = [k()], m(n, null, _, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, c) => {
+    _ = [k({ reflect: !0 }), I((t, c) => t.group?.size ? t.group.size === "xs" ? "s" : t.group.size : c)], g = [k()], m(n, null, _, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, c) => {
       t.size = c;
     } }, metadata: e }, f, v), m(n, null, g, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, get: (t) => t.value, set: (t, c) => {
       t.value = c;
     } }, metadata: e }, y, z), m(null, a = { value: l }, s, { kind: "class", name: l.name, metadata: e }, null, i), l = a.value, e && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), n.styles = [j, P], n.events = {
+  })(), n.styles = [
+    P,
+    j,
+    O
+  ], n.events = {
     change: "change",
     input: "input"
   }, u(l, i), l;
 })();
 export {
-  N as SbbRadioButtonPanelElement
+  Q as SbbRadioButtonPanelElement
 };

package/radio-button-common-BT3VkZLM.js

@@ -0,0 +1,5 @@
+import { css as o } from "lit";
+const t = o`:host{--sbb-radio-button-label-color: var(--sbb-color-3);--sbb-radio-button-background-color: var(--sbb-background-color-1);--sbb-radio-button-inner-circle-color: var(--sbb-radio-button-background-color);--sbb-radio-button-border-width: var(--sbb-border-width-1x);--sbb-radio-button-border-style: solid;--sbb-radio-button-border-color: var(--sbb-border-color-5);--sbb-radio-button-dimension: var(--sbb-size-icon-ui-small);--sbb-radio-button-inner-circle-dimension: .625rem;--sbb-radio-button-cursor: var(--sbb-cursor-pointer);--sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align: calc( (1em * var(--sbb-typo-line-height-body-text) - var(--sbb-radio-button-dimension)) / 2 )}@media(forced-colors:active){:host{--sbb-radio-button-background-color: Canvas !important;--sbb-radio-button-border-width: var(--sbb-border-width-2x);--sbb-radio-button-border-color: ButtonBorder}}:host([data-checked]){--sbb-radio-button-inner-circle-color: var(--sbb-color-primary);--sbb-radio-button-background-fake-border-width: calc( (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2 )}@media(forced-colors:active){:host([data-checked]){--sbb-radio-button-inner-circle-color: Highlight;--sbb-radio-button-border-color: Highlight}}:host(:disabled){--sbb-radio-button-label-color: var(--sbb-color-granite);--sbb-radio-button-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));--sbb-radio-button-background-color: var(--sbb-background-color-3);--sbb-radio-button-border-style: dashed;--sbb-radio-button-inner-circle-color: var(--sbb-radio-button-background-color);--sbb-radio-button-cursor: var(--sbb-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(:disabled[data-checked]){--sbb-radio-button-inner-circle-color: var(--sbb-background-color-2-inverted)}:host([size=xs]){--sbb-radio-button-dimension: 1.25rem}.sbb-screen-reader-only{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-radio-button{display:block;cursor:var(--sbb-radio-button-cursor);-webkit-user-select:none;user-select:none;position:relative;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent;--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([size=s]) .sbb-radio-button{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([size=xs]) .sbb-radio-button{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-radio-button__label-slot{display:flex;align-items:flex-start;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";flex-shrink:0;width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);border-radius:50%;margin-block-start:var(--sbb-radio-button-icon-align);transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-4x));transition-timing-function:ease;transition-property:background-color,border}@media(forced-colors:active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-radio-button__label-slot:after{position:absolute;border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color)}`;
+export {
+  t as r
+};

package/radio-button.js

@@ -2,7 +2,7 @@ import { SbbRadioButtonElement as e } from "./radio-button/radio-button/radio-bu
 import { SbbRadioButtonGroupElement as n } from "./radio-button/radio-button-group/radio-button-group.component.js";
 import { SbbRadioButtonPanelElement as b } from "./radio-button/radio-button-panel/radio-button-panel.component.js";
 import { SbbRadioButtonCommonElementMixin as i } from "./radio-button/common/radio-button-common.js";
-import { r as p } from "./radio-button-common-Bw2t3Sxz.js";
+import { r as p } from "./radio-button-common-BT3VkZLM.js";
 export {
   i as SbbRadioButtonCommonElementMixin,
   e as SbbRadioButtonElement,