@sbb-esta/lyne-elements 2.1.0 → 2.3.0

package/core/mixins.js

@@ -1,31 +1,33 @@
-var D = (l) => {
-  throw TypeError(l);
+var V = (c) => {
+  throw TypeError(c);
 };
-var M = (l, p, o) => p.has(l) || D("Cannot " + o);
-var k = (l, p, o) => (M(l, p, "read from private field"), o ? o.call(l) : p.get(l)), x = (l, p, o) => p.has(l) ? D("Cannot add the same private member more than once") : p instanceof WeakSet ? p.add(l) : p.set(l, o), v = (l, p, o, r) => (M(l, p, "write to private field"), r ? r.call(l, o) : p.set(l, o), o);
-import { __esDecorate as y, __runInitializers as f } from "tslib";
-import { property as S, state as F } from "lit/decorators.js";
-import { forceType as w, getOverride as N, hostAttributes as j } from "./decorators.js";
-import { defaultConverter as A, isServer as G, html as R, nothing as E, css as V } from "lit";
-import { preventScrollOnSpacebarPress as $, EventEmitter as P } from "./eventing.js";
-import { interactivityChecker as T, isArrowKeyPressed as H, getNextElementIndex as K } from "./a11y.js";
-import { SbbConnectedAbortController as W } from "./controllers.js";
+var q = (c, m, u) => m.has(c) || V("Cannot " + u);
+var x = (c, m, u) => (q(c, m, "read from private field"), u ? u.call(c) : m.get(c)), C = (c, m, u) => m.has(c) ? V("Cannot add the same private member more than once") : m instanceof WeakSet ? m.add(c) : m.set(c, u), y = (c, m, u, o) => (q(c, m, "write to private field"), o ? o.call(c, u) : m.set(c, u), u);
+import { __esDecorate as g, __runInitializers as f } from "tslib";
+import { property as S, state as A } from "lit/decorators.js";
+import { forceType as R, getOverride as N, hostAttributes as P } from "./decorators.js";
+import { defaultConverter as D, isServer as G, nothing as B, html as I, css as $ } from "lit";
+import { SbbLanguageController as z, SbbConnectedAbortController as T } from "./controllers.js";
+import { preventScrollOnSpacebarPress as H, EventEmitter as K } from "./eventing.js";
+import { i18nCheckboxRequired as W, i18nSelectionRequired as X } from "./i18n.js";
+import { isWebkit as J } from "./dom.js";
+import { interactivityChecker as Q, isArrowKeyPressed as Y, getNextElementIndex as Z } from "./a11y.js";
 import "../screen-reader-only.js";
-const I = (l) => (() => {
-  var u, e;
-  let o = l, r, h = [], a = [];
-  return e = class extends o {
+const M = (c) => (() => {
+  var h, e;
+  let u = c, o, p = [], r = [];
+  return e = class extends u {
     constructor() {
       super(...arguments);
-      x(this, u, f(this, h, !1));
-      f(this, a);
+      C(this, h, f(this, p, !1));
+      f(this, r);
     }
     /** Whether the component is disabled. */
     get disabled() {
-      return k(this, u);
+      return x(this, h);
     }
     set disabled(t) {
-      v(this, u, t);
+      y(this, h, t);
     }
     /**
      * Will be used as 'or' check to the current disabled state.
@@ -34,52 +36,64 @@ const I = (l) => (() => {
     isDisabledExternally() {
       return !1;
     }
-  }, u = new WeakMap(), (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    r = [w(), S({ reflect: !0, type: Boolean }), N((s, i) => i || s.isDisabledExternally())], y(e, null, r, { kind: "accessor", name: "disabled", static: !1, private: !1, access: { has: (s) => "disabled" in s, get: (s) => s.disabled, set: (s, i) => {
-      s.disabled = i;
-    } }, metadata: t }, h, a), t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  }, h = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+    o = [R(), S({ reflect: !0, type: Boolean }), N((s, l) => l || s.isDisabledExternally())], g(e, null, o, { kind: "accessor", name: "disabled", static: !1, private: !1, access: { has: (s) => "disabled" in s, get: (s) => s.disabled, set: (s, l) => {
+      s.disabled = l;
+    } }, metadata: t }, p, r), t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), e;
-})(), X = (l) => (() => {
-  var u, e;
-  let o = l, r, h = [], a = [];
-  return e = class extends o {
+})(), ee = (c) => (() => {
+  var h, e;
+  let u = c, o, p = [], r = [];
+  return e = class extends u {
     constructor() {
       super(...arguments);
-      x(this, u, f(this, h, !1));
-      f(this, a);
+      C(this, h, f(this, p, !1));
+      f(this, r);
     }
     /** Whether the button should be aria-disabled but stay interactive. */
     get disabledInteractive() {
-      return k(this, u);
+      return x(this, h);
     }
     set disabledInteractive(t) {
-      v(this, u, t);
+      y(this, h, t);
     }
-  }, u = new WeakMap(), (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    r = [w(), S({ attribute: "disabled-interactive", type: Boolean, reflect: !0 })], y(e, null, r, { kind: "accessor", name: "disabledInteractive", static: !1, private: !1, access: { has: (s) => "disabledInteractive" in s, get: (s) => s.disabledInteractive, set: (s, i) => {
-      s.disabledInteractive = i;
-    } }, metadata: t }, h, a), t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  }, h = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+    o = [R(), S({ attribute: "disabled-interactive", type: Boolean, reflect: !0 })], g(e, null, o, { kind: "accessor", name: "disabledInteractive", static: !1, private: !1, access: { has: (s) => "disabledInteractive" in s, get: (s) => s.disabledInteractive, set: (s, l) => {
+      s.disabledInteractive = l;
+    } }, metadata: t }, p, r), t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), e;
-})(), le = (l) => {
-  class p extends X(I(l)) {
-    willUpdate(r) {
-      super.willUpdate(r), r.has("disabledInteractive") && (this.internals.ariaDisabled = this.disabledInteractive ? "true" : null), r.has("disabled") && (this.disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "0"));
+})(), pe = (c) => {
+  class m extends ee(M(c)) {
+    willUpdate(o) {
+      super.willUpdate(o), o.has("disabledInteractive") && (this.internals.ariaDisabled = this.disabledInteractive ? "true" : null), o.has("disabled") && (this.disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "0"));
     }
   }
-  return p;
-}, L = (l) => (() => {
-  var d, t;
-  let o = l, r = [], h, a, u, e = [], n = [];
-  return t = class extends o {
-    constructor() {
-      super(...arguments);
-      x(this, d);
-      this._value = (f(this, r), null), this.internals = this.attachInternals(), v(this, d, f(this, e, !1)), f(this, n);
+  return m;
+}, te = {
+  badInput: !1,
+  customError: !1,
+  patternMismatch: !1,
+  rangeOverflow: !1,
+  rangeUnderflow: !1,
+  stepMismatch: !1,
+  tooLong: !1,
+  tooShort: !1,
+  typeMismatch: !1,
+  valueMissing: !1
+}, L = (c) => (() => {
+  var n, t;
+  let u = c, o = [], p, r, h, e = [], i = [];
+  return t = class extends u {
+    constructor(...a) {
+      var d;
+      super(...a);
+      C(this, n);
+      this._value = (f(this, o), null), this.internals = this.attachInternals(), this._validityStates = /* @__PURE__ */ new Map(), y(this, n, f(this, e, !1)), f(this, i), (d = this.addEventListener) == null || d.call(this, "invalid", (b) => b.preventDefault());
     }
     /**
-     * Returns the form owner of the internals of the target element.
+     * Returns the form owner of this element.
      */
     get form() {
       return this.internals.form;
@@ -90,8 +104,8 @@ const I = (l) => (() => {
      * @description Developer note: In this case updating the attribute must be synchronous.
      * Due to this it is implemented as a getter/setter and the attributeChangedCallback() handles the diff check.
      */
-    set name(c) {
-      this.setAttribute("name", `${c}`), this.updateFormValue();
+    set name(a) {
+      this.setAttribute("name", `${a}`), this.updateFormValue();
     }
     get name() {
       return this.getAttribute("name") ?? "";
@@ -101,94 +115,150 @@ const I = (l) => (() => {
       return this.localName;
     }
     /** Value of the form element. */
-    set value(c) {
-      this._value = c, this.updateFormValue();
+    set value(a) {
+      this._value = a, this.updateFormValue();
     }
     get value() {
       return this._value;
     }
     /**
-     * Returns the ValidityState object for internals target element.
-     *
-     * @internal
+     * Returns the ValidityState object for this element.
      */
     get validity() {
       return this.internals.validity;
     }
     /**
-     * Returns the error message that would be shown to the user
-     * if internals target element was to be checked for validity.
-     *
-     * @internal
+     * Returns the current error message, if available, which corresponds
+     * to the current validation state.
+     * Please note that only one message is returned at a time (e.g. if
+     * multiple validity states are invalid, only the chronologically first one
+     * is returned until it is fixed, at which point the next message might be
+     * returned, if it is still applicable). Also a custom validity message
+     * (see below) has precedence over native validation messages.
      */
     get validationMessage() {
       return this.internals.validationMessage;
     }
     /**
-     * Returns true if internals target element will be validated
+     * Returns true if this element will be validated
      * when the form is submitted; false otherwise.
-     *
-     * @internal
      */
     get willValidate() {
       return this.internals.willValidate;
     }
     /** Whenever a surrounding form or fieldset is changing its disabled state. */
     get formDisabled() {
-      return k(this, d);
+      return x(this, n);
     }
-    set formDisabled(c) {
-      v(this, d, c);
+    set formDisabled(a) {
+      y(this, n, a);
     }
-    attributeChangedCallback(c, b, m) {
-      (c !== "name" || b !== m) && super.attributeChangedCallback(c, b, m);
+    attributeChangedCallback(a, d, b) {
+      (a !== "name" || d !== b) && super.attributeChangedCallback(a, d, b);
     }
     /**
-     * Returns true if internals target element has no validity problems; false otherwise.
+     * Returns true if this element has no validity problems; false otherwise.
      * Fires an invalid event at the element in the latter case.
-     *
-     * @internal
      */
     checkValidity() {
       return this.internals.checkValidity();
     }
     /**
-     * Returns true if internals target element has no validity problems; otherwise,
+     * Returns true if this element has no validity problems; otherwise,
      * returns false, fires an invalid event at the element,
      * and (if the event isn't canceled) reports the problem to the user.
-     *
-     * @internal
      */
     reportValidity() {
       return this.internals.reportValidity();
     }
+    /**
+     * Sets the custom validity message for this element. Use the empty string
+     * to indicate that the element does not have a custom validity error.
+     */
+    setCustomValidity(a) {
+      a ? this.setValidityFlag("customError", a) : this.removeValidityFlag("customError");
+    }
     /**
      * Is called whenever a surrounding form / fieldset changes disabled state.
      * @param disabled
      *
      * @internal
      */
-    formDisabledCallback(c) {
+    formDisabledCallback(a) {
       Promise.resolve().then(() => {
-        this.formDisabled = c;
+        this.formDisabled = a;
       });
     }
-  }, d = new WeakMap(), (() => {
-    const c = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    h = [S()], a = [S()], u = [F()], y(t, null, h, { kind: "setter", name: "name", static: !1, private: !1, access: { has: (b) => "name" in b, set: (b, m) => {
-      b.name = m;
-    } }, metadata: c }, null, r), y(t, null, a, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (b) => "value" in b, set: (b, m) => {
-      b.value = m;
-    } }, metadata: c }, null, r), y(t, null, u, { kind: "accessor", name: "formDisabled", static: !1, private: !1, access: { has: (b) => "formDisabled" in b, get: (b) => b.formDisabled, set: (b, m) => {
-      b.formDisabled = m;
-    } }, metadata: c }, e, n), c && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: c });
+    /**
+     * Marks this element as suffering from the constraint indicated by the
+     * flag argument and associates the given message to it.
+     * Note that only one message is displayed at a time and custom messages by
+     * consumers are always displayed before internal messages and internal
+     * messages are displayed in the order they were added.
+     * To set/define custom validity state flags, you need to extend the
+     * ValidityState prototype and both the ValidityState and the
+     * ValidityStateFlags interface.
+     *
+     * @example
+     *
+     *   // The type of the custom validity state does not need to be boolean.
+     *   Object.assign(ValidityState.prototype, {
+     *     get myError(): boolean {
+     *       return false;
+     *     },
+     *   });
+     *
+     *   declare global {
+     *     interface ValidityState {
+     *       myError: boolean;
+     *     }
+     *     interface ValidityState {
+     *       myError?: boolean;
+     *     }
+     *   }
+     */
+    setValidityFlag(a, d, b) {
+      b ?? (b = !0), this._validityStates.set(a, { flagValue: b, message: d }), this._setInternalValidity();
+    }
+    removeValidityFlag(a) {
+      this._validityStates.delete(a), this._setInternalValidity();
+    }
+    _setInternalValidity() {
+      var a;
+      if (this._validityStates.size) {
+        let d = (a = this._validityStates.get("customError")) == null ? void 0 : a.message;
+        const b = {};
+        this._validityStates.forEach(({ flagValue: k, message: _ }, v) => {
+          b[v] = k, d || (d = _);
+        });
+        const E = Object.keys(ValidityState.prototype).filter((k) => !(k in te) && k !== "valid");
+        for (const k of E) {
+          const _ = k in b ? b[k] : !1;
+          Object.defineProperty(this.internals.validity, k, { value: _, configurable: !0 }), _ && (b.customError = !0);
+        }
+        this.internals.setValidity(b, d), J && Object.defineProperty(this.internals.validity, "customError", {
+          value: this._validityStates.has("customError") || !!b.customError,
+          configurable: !0
+        });
+      } else
+        this.internals.setValidity({});
+    }
+  }, n = new WeakMap(), (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+    p = [S()], r = [S()], h = [A()], g(t, null, p, { kind: "setter", name: "name", static: !1, private: !1, access: { has: (d) => "name" in d, set: (d, b) => {
+      d.name = b;
+    } }, metadata: a }, null, o), g(t, null, r, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (d) => "value" in d, set: (d, b) => {
+      d.value = b;
+    } }, metadata: a }, null, o), g(t, null, h, { kind: "accessor", name: "formDisabled", static: !1, private: !1, access: { has: (d) => "formDisabled" in d, get: (d) => d.formDisabled, set: (d, b) => {
+      d.formDisabled = b;
+    } }, metadata: a }, e, i), a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
   })(), t.formAssociated = !0, t;
-})(), U = (l) => (() => {
-  var a;
-  let o = l, r = [], h;
-  return a = class extends o {
+})(), j = (c) => (() => {
+  var r;
+  let u = c, o = [], p;
+  return r = class extends u {
     constructor() {
-      super(...arguments), this._required = (f(this, r), !1);
+      super(...arguments), this._required = (f(this, o), !1);
     }
     /** Whether the component is required. */
     set required(e) {
@@ -208,21 +278,21 @@ const I = (l) => (() => {
       return !1;
     }
   }, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    h = [S({ reflect: !0, type: Boolean })], y(a, null, h, { kind: "setter", name: "required", static: !1, private: !1, access: { has: (n) => "required" in n, set: (n, d) => {
-      n.required = d;
-    } }, metadata: e }, null, r), e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), a;
-})(), oe = (l) => (() => {
-  var d;
-  let o = [j({
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+    p = [S({ reflect: !0, type: Boolean })], g(r, null, p, { kind: "setter", name: "required", static: !1, private: !1, access: { has: (i) => "required" in i, set: (i, n) => {
+      i.required = n;
+    } }, metadata: e }, null, o), e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), r;
+})(), me = (c) => (() => {
+  var n;
+  let u = [P({
     tabindex: "0"
-  })], r, h = [], a, u = I(U(L(l))), e = [], n;
-  return d = class extends u {
+  })], o, p = [], r, h = M(j(L(c))), e = [], i;
+  return n = class extends h {
     /** Whether the checkbox is checked. */
     set checked(s) {
-      const i = typeof s == "object" ? s.attribute : !1;
-      i && (s = s.value), this.hasUpdated && !i && (this._attributeMutationBlocked = !0), this._checked = !!s, this.updateFormValue();
+      const l = typeof s == "object" ? s.attribute : !1;
+      l && (s = s.value), this.hasUpdated && !l && (this._attributeMutationBlocked = !0), this._checked = !!s, this.updateFormValue();
     }
     get checked() {
       return this._checked;
@@ -235,16 +305,16 @@ const I = (l) => (() => {
       return "checkbox";
     }
     constructor() {
-      var s, i, c;
-      super(), this._attributeMutationBlocked = (f(this, e), !1), this._checked = !1, this._handleKeyboardInteraction = (b) => {
-        b.key === " " && this._handleUserInteraction();
+      var s, l, a;
+      super(), this._attributeMutationBlocked = (f(this, e), !1), this._languageController = new z(this), this._checked = !1, this._handleKeyboardInteraction = (d) => {
+        d.key === " " && this._handleUserInteraction();
       }, this._handleUserInteraction = () => {
-        var b;
-        this.disabled || ((b = this.withUserInteraction) == null || b.call(this), this.checked = !this.checked, this._attributeMutationBlocked = !0, this.dispatchEvent(new InputEvent("input", { composed: !0, bubbles: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 })));
-      }, this.internals.role = "checkbox", (s = this.addEventListener) == null || s.call(this, "click", this._handleUserInteraction), (i = this.addEventListener) == null || i.call(this, "keydown", $), (c = this.addEventListener) == null || c.call(this, "keyup", this._handleKeyboardInteraction);
+        var d;
+        this.disabled || ((d = this.withUserInteraction) == null || d.call(this), this.checked = !this.checked, this._attributeMutationBlocked = !0, this.dispatchEvent(new InputEvent("input", { composed: !0, bubbles: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 })));
+      }, this.internals.role = "checkbox", (s = this.addEventListener) == null || s.call(this, "click", this._handleUserInteraction), (l = this.addEventListener) == null || l.call(this, "keydown", H), (a = this.addEventListener) == null || a.call(this, "keyup", this._handleKeyboardInteraction);
     }
-    attributeChangedCallback(s, i, c) {
-      (s !== "checked" || !this._attributeMutationBlocked) && super.attributeChangedCallback(s, i, c);
+    attributeChangedCallback(s, l, a) {
+      (s !== "checked" || !this._attributeMutationBlocked) && super.attributeChangedCallback(s, l, a);
     }
     /**
      * Is called whenever the form is being reset.
@@ -263,32 +333,41 @@ const I = (l) => (() => {
      *
      * @internal
      */
-    formStateRestoreCallback(s, i) {
+    formStateRestoreCallback(s, l) {
       s && (this.checked = s === "true");
     }
+    requestUpdate(s, l, a) {
+      super.requestUpdate(s, l, a), this.hasUpdated && (s === "checked" || s === "required" || !s) && this._setValidity();
+    }
+    firstUpdated(s) {
+      super.firstUpdated(s), this._setValidity();
+    }
     updateFormValue() {
       this.checked ? this.internals.setFormValue(this.value, `${this.checked}`) : this.internals.setFormValue(null);
     }
-  }, a = d, (() => {
-    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    n = [S({
+    _setValidity() {
+      this.required && !this.checked ? this.setValidityFlag("valueMissing", W[this._languageController.current]) : this.removeValidityFlag("valueMissing");
+    }
+  }, r = n, (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
+    i = [S({
       type: Boolean,
       converter: {
-        ...A,
+        ...D,
         // We need to pass information to the setter so that we know it was called by attribute change.
-        fromAttribute: (i, c) => {
-          var m, B;
-          return { value: (B = (m = A).fromAttribute) == null ? void 0 : B.call(m, i, c), attribute: !0 };
+        fromAttribute: (l, a) => {
+          var b, E;
+          return { value: (E = (b = D).fromAttribute) == null ? void 0 : E.call(b, l, a), attribute: !0 };
         }
       }
-    })], y(d, null, n, { kind: "setter", name: "checked", static: !1, private: !1, access: { has: (i) => "checked" in i, set: (i, c) => {
-      i.checked = c;
-    } }, metadata: s }, null, e), y(null, r = { value: a }, o, { kind: "class", name: a.name, metadata: s }, null, h), a = r.value, s && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s }), f(a, h);
-  })(), a;
-})(), O = /* @__PURE__ */ new WeakMap(), de = (l) => (() => {
-  var a;
-  let o = I(U(L(l))), r = [], h;
-  return a = class extends o {
+    })], g(n, null, i, { kind: "setter", name: "checked", static: !1, private: !1, access: { has: (l) => "checked" in l, set: (l, a) => {
+      l.checked = a;
+    } }, metadata: s }, null, e), g(null, o = { value: r }, u, { kind: "class", name: r.name, metadata: s }, null, p), r = o.value, s && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s }), f(r, p);
+  })(), r;
+})(), O = /* @__PURE__ */ new WeakMap(), fe = (c) => (() => {
+  var r;
+  let u = M(j(L(c))), o = [], p;
+  return r = class extends u {
     /**
      * Whether the radio button is checked.
      */
@@ -313,7 +392,7 @@ const I = (l) => (() => {
     }
     constructor() {
       var e;
-      super(), this._checked = (f(this, r), !1), this.abort = new W(this), this._didLoad = !1, this.internals.role = "radio", (e = this.addEventListener) == null || e.call(this, "keydown", (n) => this._handleArrowKeyDown(n));
+      super(), this._checked = (f(this, o), !1), this.abort = new T(this), this._didLoad = !1, this._languageController = new z(this), this.internals.role = "radio", (e = this.addEventListener) == null || e.call(this, "keydown", (i) => this._handleArrowKeyDown(i));
     }
     connectedCallback() {
       super.connectedCallback(), this._connectToRegistry(), this._synchronizeGroupState();
@@ -334,14 +413,17 @@ const I = (l) => (() => {
      *  user in which case reason is “autocomplete”.
      * @internal
      */
-    formStateRestoreCallback(e, n) {
+    formStateRestoreCallback(e, i) {
       e && (this.checked = e === this.value);
     }
+    requestUpdate(e, i, n) {
+      super.requestUpdate(e, i, n), this.hasUpdated && (e === "checked" || e === "required" || !e) && this._setValidity();
+    }
     willUpdate(e) {
       super.willUpdate(e), e.has("disabled") && this.updateFocusableRadios();
     }
     firstUpdated(e) {
-      super.firstUpdated(e), this._didLoad = !0, this.updateFocusableRadios();
+      super.firstUpdated(e), this._didLoad = !0, this.updateFocusableRadios(), this._setValidity();
     }
     /**
      * Called on `value` change
@@ -358,8 +440,8 @@ const I = (l) => (() => {
     updateFocusableRadios() {
       if (!this._didLoad)
         return;
-      const e = this._interactableGroupedRadios(), n = e.findIndex((t) => t.checked && !t.disabled && !t.formDisabled), d = n !== -1 ? n : e.findIndex((t) => !t.disabled && !t.formDisabled);
-      d !== -1 && (e[d].tabIndex = 0, e.splice(d, 1)), e.forEach((t) => t.removeAttribute("tabindex"));
+      const e = this._interactableGroupedRadios(), i = e.findIndex((t) => t.checked && !t.disabled && !t.formDisabled), n = i !== -1 ? i : e.findIndex((t) => !t.disabled && !t.formDisabled);
+      n !== -1 && (e[n].tabIndex = 0, e.splice(n, 1)), e.forEach((t) => t.removeAttribute("tabindex"));
     }
     async navigateByKeyboard(e) {
       e.checked = !0, this.emitChangeEvents(), await e.updateComplete, e.focus();
@@ -378,23 +460,35 @@ const I = (l) => (() => {
         return;
       const e = this.form ?? this.getRootNode();
       this._radioButtonGroupsMap = O.get(e), this._radioButtonGroupsMap || (this._radioButtonGroupsMap = /* @__PURE__ */ new Map(), O.set(e, this._radioButtonGroupsMap)), this.associatedRadioButtons = this._radioButtonGroupsMap.get(this.name), this.associatedRadioButtons || (this.associatedRadioButtons = /* @__PURE__ */ new Set(), this._radioButtonGroupsMap.set(this.name, this.associatedRadioButtons));
-      const n = Array.from(this.associatedRadioButtons);
+      const i = Array.from(this.associatedRadioButtons);
       this.associatedRadioButtons.clear();
-      const d = n.findIndex((t) => this.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_FOLLOWING);
-      d !== -1 ? n.splice(d, 0, this) : n.push(this), n.forEach((t) => this.associatedRadioButtons.add(t));
+      const n = i.findIndex((t) => this.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_FOLLOWING);
+      n !== -1 ? i.splice(n, 0, this) : i.push(this), i.forEach((t) => this.associatedRadioButtons.add(t)), this._setValidity();
     }
     /**
      * Remove `this` from the radioButton registry and, if the group is empty, delete the entry from the groups Map
      */
     _disconnectFromRegistry() {
-      var e, n, d;
-      (e = this.associatedRadioButtons) == null || e.delete(this), ((n = this.associatedRadioButtons) == null ? void 0 : n.size) === 0 && ((d = this._radioButtonGroupsMap) == null || d.delete(this.name)), this.associatedRadioButtons = void 0, this._radioButtonGroupsMap = void 0;
+      var e, i, n;
+      (e = this.associatedRadioButtons) == null || e.delete(this), ((i = this.associatedRadioButtons) == null ? void 0 : i.size) === 0 ? (n = this._radioButtonGroupsMap) == null || n.delete(this.name) : this._setValidity(), this.associatedRadioButtons = void 0, this._radioButtonGroupsMap = void 0;
+    }
+    /**
+     * Sets the validity of all associated radio buttons.
+     * If any radio button is required, all associated are required as well.
+     */
+    _setValidity() {
+      if (!this.associatedRadioButtons)
+        return;
+      let e = !1, i = !1;
+      for (const n of this.associatedRadioButtons)
+        e || (e = n.required), i || (i = n.checked);
+      e && !i ? this.associatedRadioButtons.forEach((n) => n.setValidityFlag("valueMissing", X[this._languageController.current])) : this.associatedRadioButtons.forEach((n) => n.removeValidityFlag("valueMissing"));
     }
     /**
      * Return a list of 'interactable' grouped radios, ordered in DOM order
      */
     _interactableGroupedRadios() {
-      return Array.from(this.associatedRadioButtons ?? []).filter((e) => T.isVisible(e));
+      return Array.from(this.associatedRadioButtons ?? []).filter((e) => Q.isVisible(e));
     }
     /**
      * Deselect other radio of the same group
@@ -403,20 +497,20 @@ const I = (l) => (() => {
       Array.from(this.associatedRadioButtons ?? []).filter((e) => e !== this).forEach((e) => e.checked = !1);
     }
     async _handleArrowKeyDown(e) {
-      if (!H(e))
+      if (!Y(e))
         return;
       e.preventDefault();
-      const n = this._interactableGroupedRadios().filter((s) => !s.disabled && !s.formDisabled), d = n.indexOf(this), t = K(e, d, n.length);
-      await this.navigateByKeyboard(n[t]);
+      const i = this._interactableGroupedRadios().filter((s) => !s.disabled && !s.formDisabled), n = i.indexOf(this), t = Z(e, n, i.length);
+      await this.navigateByKeyboard(i[t]);
     }
   }, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    h = [S({ type: Boolean })], y(a, null, h, { kind: "setter", name: "checked", static: !1, private: !1, access: { has: (n) => "checked" in n, set: (n, d) => {
-      n.checked = d;
-    } }, metadata: e }, null, r), e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), a;
-})(), J = (l) => {
-  class p extends l {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+    p = [S({ type: Boolean })], g(r, null, p, { kind: "setter", name: "checked", static: !1, private: !1, access: { has: (i) => "checked" in i, set: (i, n) => {
+      i.checked = n;
+    } }, metadata: e }, null, o), e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), r;
+})(), se = (c) => {
+  class m extends c {
     /**
      * Returns a Promise that resolves when the element has completed hydration.
      * The Promise value is a boolean that is `true` if the element required hydration
@@ -432,34 +526,34 @@ const I = (l) => (() => {
     get hydrationRequired() {
       return this._hydrationRequired;
     }
-    constructor(...r) {
-      var h;
-      if (super(...r), this._hydrationComplete = new Promise((a) => this._resolveHydration = a), this._hydrationRequired = !!this.shadowRoot, !this._hydrationRequired)
+    constructor(...o) {
+      var p;
+      if (super(...o), this._hydrationComplete = new Promise((r) => this._resolveHydration = r), this._hydrationRequired = !!this.shadowRoot, !this._hydrationRequired)
         this._resolveHydration(!1);
       else {
-        const a = (n) => {
-          this._hydrationRequired && n.stopImmediatePropagation();
-        }, u = { capture: !0 }, e = (h = this.shadowRoot) == null ? void 0 : h.querySelectorAll("slot");
-        e != null && e.length && (e.forEach((n) => n.addEventListener("slotchange", a, u)), this.hydrationComplete.then(() => e.forEach((n) => {
-          n.removeEventListener("slotchange", a, u), n.assignedNodes().length && n.dispatchEvent(new Event("slotchange", { bubbles: !0 }));
+        const r = (i) => {
+          this._hydrationRequired && i.stopImmediatePropagation();
+        }, h = { capture: !0 }, e = (p = this.shadowRoot) == null ? void 0 : p.querySelectorAll("slot");
+        e != null && e.length && (e.forEach((i) => i.addEventListener("slotchange", r, h)), this.hydrationComplete.then(() => e.forEach((i) => {
+          i.removeEventListener("slotchange", r, h), i.assignedNodes().length && i.dispatchEvent(new Event("slotchange", { bubbles: !0 }));
         })));
       }
     }
-    update(r) {
-      super.update(r), this._hydrationRequired && (this._hydrationRequired = !1, this._resolveHydration(!0));
+    update(o) {
+      super.update(o), this._hydrationRequired && (this._hydrationRequired = !1, this._resolveHydration(!0));
     }
   }
-  return p;
-}, z = "data-ssr-child-count", q = "li", ce = (l) => (() => {
-  var u, e;
-  let o = J(l), r, h = [], a = [];
-  return e = class extends o {
+  return m;
+}, F = "data-ssr-child-count", U = "li", ve = (c) => (() => {
+  var h, e;
+  let u = se(c), o, p = [], r = [];
+  return e = class extends u {
     constructor() {
       super(...arguments);
-      x(this, u);
-      v(this, u, f(this, h, [])), this._handleSlotchange = (f(this, a), () => {
+      C(this, h);
+      y(this, h, f(this, p, [])), this._handleSlotchange = (f(this, r), () => {
         const t = Array.from(this.children ?? []).filter((s) => this.listChildLocalNames.includes(s.localName));
-        t.length === this.listChildren.length && this.listChildren.every((s, i) => t[i] === s) || (this.listChildren.filter((s) => !t.includes(s)).forEach((s) => s.removeAttribute("slot")), this.listChildren = t, this.listChildren.forEach((s, i) => s.setAttribute("slot", `${q}-${i}`)), this.removeAttribute(z));
+        t.length === this.listChildren.length && this.listChildren.every((s, l) => t[l] === s) || (this.listChildren.filter((s) => !t.includes(s)).forEach((s) => s.removeAttribute("slot")), this.listChildren = t, this.listChildren.forEach((s, l) => s.setAttribute("slot", `${U}-${l}`)), this.removeAttribute(F));
       });
     }
     /**
@@ -468,10 +562,10 @@ const I = (l) => (() => {
      * to the child elements.
      */
     get listChildren() {
-      return k(this, u);
+      return x(this, h);
     }
     set listChildren(t) {
-      v(this, u, t);
+      y(this, h, t);
     }
     connectedCallback() {
       var t;
@@ -491,23 +585,23 @@ const I = (l) => (() => {
      * children to be passed via the `data-ssr-child-count` attribute value.
      */
     renderList(t = {}, s = {}) {
-      const i = this.listSlotEntries(s);
-      return i.length >= 2 ? R`
+      const l = this.listSlotEntries(s);
+      return l.length >= 2 ? I`
           <ul
             class=${t.class || this.localName}
-            aria-label=${t.ariaLabel || E}
-            aria-labelledby=${t.ariaLabelledby || E}
+            aria-label=${t.ariaLabel || B}
+            aria-labelledby=${t.ariaLabelledby || B}
           >
-            ${i.map((c) => R`
-                <li aria-hidden=${c.ariaHidden || E}>
-                  <slot name=${c.name}></slot>
+            ${l.map((a) => I`
+                <li aria-hidden=${a.ariaHidden || B}>
+                  <slot name=${a.name}></slot>
                 </li>
               `)}
           </ul>
           ${this.renderHiddenSlot()}
-        ` : i.length === 1 ? R`<sbb-screen-reader-only>${t.ariaLabel}</sbb-screen-reader-only>
+        ` : l.length === 1 ? I`<sbb-screen-reader-only>${t.ariaLabel}</sbb-screen-reader-only>
           <span class=${t.class || this.localName}>
-            <span><slot name=${i[0].name}></slot></span>
+            <span><slot name=${l[0].name}></slot></span>
           </span>
           ${this.renderHiddenSlot()} ` : this.renderHiddenSlot();
     }
@@ -521,11 +615,11 @@ const I = (l) => (() => {
      * children to be passed via the `data-ssr-child-count` attribute value.
      */
     listSlotEntries(t) {
-      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(z) ?? 0) })).map((i, c) => {
-        var b;
+      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(F) ?? 0) })).map((l, a) => {
+        var d;
         return {
-          name: `${q}-${c}`,
-          ariaHidden: ((b = t == null ? void 0 : t.localNameVisualOnly) == null ? void 0 : b.includes(i.localName)) ?? !1
+          name: `${U}-${a}`,
+          ariaHidden: ((d = t == null ? void 0 : t.localNameVisualOnly) == null ? void 0 : d.includes(l.localName)) ?? !1
         };
       });
     }
@@ -535,115 +629,115 @@ const I = (l) => (() => {
      * the slotchange event, which can be used to assign it to the appropriate named slot.
      */
     renderHiddenSlot() {
-      return R`<span hidden><slot></slot></span>`;
+      return I`<span hidden><slot></slot></span>`;
     }
-  }, u = new WeakMap(), (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    r = [F()], y(e, null, r, { kind: "accessor", name: "listChildren", static: !1, private: !1, access: { has: (s) => "listChildren" in s, get: (s) => s.listChildren, set: (s, i) => {
-      s.listChildren = i;
-    } }, metadata: t }, h, a), t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  }, h = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+    o = [A()], g(e, null, o, { kind: "accessor", name: "listChildren", static: !1, private: !1, access: { has: (s) => "listChildren" in s, get: (s) => s.listChildren, set: (s, l) => {
+      s.listChildren = l;
+    } }, metadata: t }, p, r), t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), e;
-})(), ue = (l) => (() => {
-  var u, e;
-  let o = l, r, h = [], a = [];
-  return e = class extends o {
+})(), _e = (c) => (() => {
+  var h, e;
+  let u = c, o, p = [], r = [];
+  return e = class extends u {
     constructor() {
       super(...arguments);
-      x(this, u, f(this, h, !1));
-      f(this, a);
+      C(this, h, f(this, p, !1));
+      f(this, r);
     }
     /** Negative coloring variant flag. */
     get negative() {
-      return k(this, u);
+      return x(this, h);
     }
     set negative(t) {
-      v(this, u, t);
+      y(this, h, t);
     }
-  }, u = new WeakMap(), (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    r = [w(), S({ reflect: !0, type: Boolean })], y(e, null, r, { kind: "accessor", name: "negative", static: !1, private: !1, access: { has: (s) => "negative" in s, get: (s) => s.negative, set: (s, i) => {
-      s.negative = i;
-    } }, metadata: t }, h, a), t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  }, h = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+    o = [R(), S({ reflect: !0, type: Boolean })], g(e, null, o, { kind: "accessor", name: "negative", static: !1, private: !1, access: { has: (s) => "negative" in s, get: (s) => s.negative, set: (s, l) => {
+      s.negative = l;
+    } }, metadata: t }, p, r), t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), e;
-})(), be = (l) => (() => {
-  var i, c, b, m;
-  let o = l, r, h = [], a = [], u, e = [], n = [], d, t = [], s = [];
-  return m = class extends o {
+})(), ye = (c) => (() => {
+  var l, a, d, b;
+  let u = c, o, p = [], r = [], h, e = [], i = [], n, t = [], s = [];
+  return b = class extends u {
     constructor() {
       super(...arguments);
-      x(this, i);
-      x(this, c);
-      x(this, b);
-      v(this, i, f(this, h, "white")), v(this, c, (f(this, a), f(this, e, !1))), v(this, b, (f(this, n), f(this, t, ""))), this._panelConnected = (f(this, s), new P(this, m.events.panelConnected, { bubbles: !0 }));
+      C(this, l);
+      C(this, a);
+      C(this, d);
+      y(this, l, f(this, p, "white")), y(this, a, (f(this, r), f(this, e, !1))), y(this, d, (f(this, i), f(this, t, ""))), this._panelConnected = (f(this, s), new K(this, b.events.panelConnected, { bubbles: !0 }));
     }
     /** The background color of the panel. */
     get color() {
-      return k(this, i);
+      return x(this, l);
     }
-    set color(g) {
-      v(this, i, g);
+    set color(_) {
+      y(this, l, _);
     }
     /** Whether the unselected panel has a border. */
     get borderless() {
-      return k(this, c);
+      return x(this, a);
     }
-    set borderless(g) {
-      v(this, c, g);
+    set borderless(_) {
+      y(this, a, _);
     }
     /** @internal used for accessibility label when in expansion panel */
     get expansionState() {
-      return k(this, b);
+      return x(this, d);
     }
-    set expansionState(g) {
-      v(this, b, g);
+    set expansionState(_) {
+      y(this, d, _);
     }
     connectedCallback() {
       super.connectedCallback(), this._panelConnected.emit();
     }
-  }, i = new WeakMap(), c = new WeakMap(), b = new WeakMap(), (() => {
-    const g = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    r = [S()], u = [w(), S({ reflect: !0, type: Boolean })], d = [w(), S()], y(m, null, r, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (_) => "color" in _, get: (_) => _.color, set: (_, C) => {
-      _.color = C;
-    } }, metadata: g }, h, a), y(m, null, u, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (_) => "borderless" in _, get: (_) => _.borderless, set: (_, C) => {
-      _.borderless = C;
-    } }, metadata: g }, e, n), y(m, null, d, { kind: "accessor", name: "expansionState", static: !1, private: !1, access: { has: (_) => "expansionState" in _, get: (_) => _.expansionState, set: (_, C) => {
-      _.expansionState = C;
-    } }, metadata: g }, t, s), g && Object.defineProperty(m, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: g });
-  })(), m.events = {
+  }, l = new WeakMap(), a = new WeakMap(), d = new WeakMap(), (() => {
+    const _ = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+    o = [S()], h = [R(), S({ reflect: !0, type: Boolean })], n = [R(), S()], g(b, null, o, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (v) => "color" in v, get: (v) => v.color, set: (v, w) => {
+      v.color = w;
+    } }, metadata: _ }, p, r), g(b, null, h, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (v) => "borderless" in v, get: (v) => v.borderless, set: (v, w) => {
+      v.borderless = w;
+    } }, metadata: _ }, e, i), g(b, null, n, { kind: "accessor", name: "expansionState", static: !1, private: !1, access: { has: (v) => "expansionState" in v, get: (v) => v.expansionState, set: (v, w) => {
+      v.expansionState = w;
+    } }, metadata: _ }, t, s), _ && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: _ });
+  })(), b.events = {
     panelConnected: "panelConnected"
-  }, m;
-})(), he = (l) => {
-  class p extends l {
+  }, b;
+})(), ge = (c) => {
+  class m extends c {
     constructor() {
       super(...arguments), this._updatePromise = Promise.resolve(), this._updateResolve = () => {
       };
     }
     startUpdate() {
-      this._updatePromise = new Promise((r) => this._updateResolve = r);
+      this._updatePromise = new Promise((o) => this._updateResolve = o);
     }
     completeUpdate() {
       this._updateResolve();
     }
     async getUpdateComplete() {
-      const r = await super.getUpdateComplete();
-      return await this._updatePromise, r;
+      const o = await super.getUpdateComplete();
+      return await this._updatePromise, o;
     }
   }
-  return p;
-}, pe = V`:host{--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-white) );--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-charcoal);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);display:block;outline:none!important}:host([size=s]){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-milk) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
+  return m;
+}, Se = $`:host{--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-white) );--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-charcoal);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);display:block;outline:none!important}:host([size=s]){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-milk) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
 export {
-  X as SbbDisabledInteractiveMixin,
-  I as SbbDisabledMixin,
-  le as SbbDisabledTabIndexActionMixin,
-  oe as SbbFormAssociatedCheckboxMixin,
+  ee as SbbDisabledInteractiveMixin,
+  M as SbbDisabledMixin,
+  pe as SbbDisabledTabIndexActionMixin,
+  me as SbbFormAssociatedCheckboxMixin,
   L as SbbFormAssociatedMixin,
-  de as SbbFormAssociatedRadioButtonMixin,
-  J as SbbHydrationMixin,
-  ce as SbbNamedSlotListMixin,
-  ue as SbbNegativeMixin,
-  be as SbbPanelMixin,
-  U as SbbRequiredMixin,
-  he as SbbUpdateSchedulerMixin,
-  pe as panelCommonStyle,
+  fe as SbbFormAssociatedRadioButtonMixin,
+  se as SbbHydrationMixin,
+  ve as SbbNamedSlotListMixin,
+  _e as SbbNegativeMixin,
+  ye as SbbPanelMixin,
+  j as SbbRequiredMixin,
+  ge as SbbUpdateSchedulerMixin,
+  Se as panelCommonStyle,
   O as radioButtonRegistry
 };