@sbb-esta/lyne-elements 2.2.0 → 2.4.1

package/core/mixins.js

@@ -1,31 +1,33 @@
-var D = (l) => {
-  throw TypeError(l);
+var F = (d) => {
+  throw TypeError(d);
 };
-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 L = (d, v, c) => v.has(d) || F("Cannot " + c);
+var C = (d, v, c) => (L(d, v, "read from private field"), c ? c.call(d) : v.get(d)), E = (d, v, c) => v.has(d) ? F("Cannot add the same private member more than once") : v instanceof WeakSet ? v.add(d) : v.set(d, c), S = (d, v, c, o) => (L(d, v, "write to private field"), o ? o.call(d, c) : v.set(d, c), c);
+import { __esDecorate as y, __runInitializers as _ } from "tslib";
+import { property as k, state as N, eventOptions as G } from "lit/decorators.js";
+import { forceType as I, getOverride as H, hostAttributes as K } from "./decorators.js";
+import { defaultConverter as z, isServer as M, html as R, nothing as O, css as W } from "lit";
+import { SbbLanguageController as B, SbbConnectedAbortController as X } from "./controllers.js";
+import { preventScrollOnSpacebarPress as J, EventEmitter as Q } from "./eventing.js";
+import { i18nCheckboxRequired as Y, i18nInputRequired as Z, i18nSelectionRequired as ee } from "./i18n.js";
+import { isWebkit as P, isFirefox as te } from "./dom.js";
+import { sbbInputModalityDetector as se, interactivityChecker as ae, isArrowKeyPressed as ie, getNextElementIndex as re } 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 A = (d) => (() => {
+  var b, t;
+  let c = d, o, m = [], l = [];
+  return t = class extends c {
     constructor() {
       super(...arguments);
-      x(this, u, f(this, h, !1));
-      f(this, a);
+      E(this, b, _(this, m, !1));
+      _(this, l);
     }
     /** Whether the component is disabled. */
     get disabled() {
-      return k(this, u);
+      return C(this, b);
     }
-    set disabled(t) {
-      v(this, u, t);
+    set disabled(e) {
+      S(this, b, e);
     }
     /**
      * Will be used as 'or' check to the current disabled state.
@@ -34,52 +36,80 @@ 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 });
-  })(), e;
-})(), X = (l) => (() => {
-  var u, e;
-  let o = l, r, h = [], a = [];
-  return e = class extends o {
+  }, b = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    o = [I(), k({ reflect: !0, type: Boolean }), H((s, a) => a || s.isDisabledExternally())], y(t, null, o, { kind: "accessor", name: "disabled", static: !1, private: !1, access: { has: (s) => "disabled" in s, get: (s) => s.disabled, set: (s, a) => {
+      s.disabled = a;
+    } }, metadata: e }, m, l), e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), t;
+})(), ne = (d) => (() => {
+  var b, t;
+  let c = d, o, m = [], l = [];
+  return t = class extends c {
     constructor() {
       super(...arguments);
-      x(this, u, f(this, h, !1));
-      f(this, a);
+      E(this, b, _(this, m, !1));
+      _(this, l);
     }
     /** Whether the button should be aria-disabled but stay interactive. */
     get disabledInteractive() {
-      return k(this, u);
-    }
-    set disabledInteractive(t) {
-      v(this, u, 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 });
-  })(), 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"));
+      return C(this, b);
+    }
+    set disabledInteractive(e) {
+      S(this, b, e);
+    }
+  }, b = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    o = [I(), k({ attribute: "disabled-interactive", type: Boolean, reflect: !0 })], y(t, null, o, { kind: "accessor", name: "disabledInteractive", static: !1, private: !1, access: { has: (s) => "disabledInteractive" in s, get: (s) => s.disabledInteractive, set: (s, a) => {
+      s.disabledInteractive = a;
+    } }, metadata: e }, m, l), e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), t;
+})(), _e = (d) => {
+  class v extends ne(A(d)) {
+    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 {
+  return v;
+}, $ = {
+  badInput: !1,
+  customError: !1,
+  patternMismatch: !1,
+  rangeOverflow: !1,
+  rangeUnderflow: !1,
+  stepMismatch: !1,
+  tooLong: !1,
+  tooShort: !1,
+  typeMismatch: !1,
+  valueMissing: !1
+};
+if (typeof ValidityState > "u") {
+  const d = class {
+    get valid() {
+      return !0;
+    }
     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);
+      throw new TypeError("Illegal constructor");
+    }
+  };
+  Object.entries($).forEach(([v, c]) => Object.assign(d.prototype, {
+    get [v]() {
+      return c;
+    }
+  })), globalThis.ValidityState = d;
+}
+const V = (d) => (() => {
+  var u, e;
+  let c = d, o = [], m, l, b, t = [], r = [];
+  return e = class extends c {
+    constructor(...i) {
+      var n;
+      super(...i);
+      E(this, u);
+      this._value = (_(this, o), null), this.internals = this.attachInternals(), this._validityStates = /* @__PURE__ */ new Map(), S(this, u, _(this, t, !1)), _(this, r), (n = this.addEventListener) == null || n.call(this, "invalid", (p) => p.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 +120,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(i) {
+      this.setAttribute("name", `${i}`), this.updateFormValue();
     }
     get name() {
       return this.getAttribute("name") ?? "";
@@ -101,104 +131,169 @@ const I = (l) => (() => {
       return this.localName;
     }
     /** Value of the form element. */
-    set value(c) {
-      this._value = c, this.updateFormValue();
+    set value(i) {
+      this._value = i, 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 C(this, u);
     }
-    set formDisabled(c) {
-      v(this, d, c);
+    set formDisabled(i) {
+      S(this, u, i);
     }
-    attributeChangedCallback(c, b, m) {
-      (c !== "name" || b !== m) && super.attributeChangedCallback(c, b, m);
+    attributeChangedCallback(i, n, p) {
+      (i !== "name" || n !== p) && super.attributeChangedCallback(i, n, p);
     }
     /**
-     * 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(i) {
+      i ? this.setValidityFlag("customError", i) : this.removeValidityFlag("customError");
+    }
     /**
      * Is called whenever a surrounding form / fieldset changes disabled state.
      * @param disabled
      *
      * @internal
      */
-    formDisabledCallback(c) {
+    formDisabledCallback(i) {
       Promise.resolve().then(() => {
-        this.formDisabled = c;
+        this.formDisabled = i;
       });
     }
-  }, 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 });
-  })(), t.formAssociated = !0, t;
-})(), U = (l) => (() => {
-  var a;
-  let o = l, r = [], h;
-  return a = class extends o {
+    requestUpdate(i, n, p) {
+      super.requestUpdate(i, n, p), this.hasUpdated && this.shouldValidate(i) && this.validate();
+    }
+    firstUpdated(i) {
+      super.firstUpdated(i), this.validate();
+    }
+    /**
+     * 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 the CustomValidityState 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 CustomValidityState {
+     *       myError: boolean;
+     *     }
+     *   }
+     */
+    setValidityFlag(i, n, p) {
+      p ?? (p = !0);
+      const x = this._validityStates.get(i);
+      (!x || x.message !== n || x.flagValue !== p) && (this._validityStates.set(i, { flagValue: p, message: n }), this._setInternalValidity());
+    }
+    /** Removes the validity state flag entry and updates validity state. */
+    removeValidityFlag(i) {
+      this._validityStates.has(i) && (this._validityStates.delete(i), this._setInternalValidity());
+    }
+    /** To be called whenever the current element needs to be validated. */
+    validate() {
+    }
+    /** Whether validation should be run on a property change with the given name. */
+    shouldValidate(i) {
+      return !i;
+    }
+    _setInternalValidity() {
+      var x;
+      let i = (x = this._validityStates.get("customError")) == null ? void 0 : x.message;
+      const n = {};
+      this._validityStates.forEach(({ flagValue: f, message: g }, h) => {
+        n[h] = f, i || (i = g);
+      });
+      const p = Object.keys(ValidityState.prototype).filter((f) => !(f in $) && f !== "valid");
+      for (const f of p) {
+        const g = f in n ? n[f] : !1;
+        Object.defineProperty(this.internals.validity, f, { value: g, configurable: !0 }), g && (n.customError = !0);
+      }
+      this.internals.setValidity(n, i), P && Object.defineProperty(this.internals.validity, "customError", {
+        value: this._validityStates.has("customError") || !!n.customError,
+        configurable: !0
+      });
+    }
+  }, u = new WeakMap(), (() => {
+    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    m = [k()], l = [k()], b = [N()], y(e, null, m, { kind: "setter", name: "name", static: !1, private: !1, access: { has: (n) => "name" in n, set: (n, p) => {
+      n.name = p;
+    } }, metadata: i }, null, o), y(e, null, l, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (n) => "value" in n, set: (n, p) => {
+      n.value = p;
+    } }, metadata: i }, null, o), y(e, null, b, { kind: "accessor", name: "formDisabled", static: !1, private: !1, access: { has: (n) => "formDisabled" in n, get: (n) => n.formDisabled, set: (n, p) => {
+      n.formDisabled = p;
+    } }, metadata: i }, t, r), i && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+  })(), e.formAssociated = !0, e;
+})(), D = (d) => (() => {
+  var l;
+  let c = d, o = [], m;
+  return l = class extends c {
     constructor() {
-      super(...arguments), this._required = (f(this, r), !1);
+      super(...arguments), this._required = (_(this, o), !1);
     }
     /** Whether the component is required. */
-    set required(e) {
-      this._required = !!e;
+    set required(t) {
+      this._required = !!t;
     }
     get required() {
       return this._required || this.isRequiredExternally();
     }
-    willUpdate(e) {
-      super.willUpdate(e), e.has("required") && (this.internals.ariaRequired = `${this.required}`);
+    willUpdate(t) {
+      super.willUpdate(t), t.has("required") && (this.internals.ariaRequired = `${this.required}`);
     }
     /**
      * Will be used as 'or' check to the current required state.
@@ -208,21 +303,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 t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    m = [k({ reflect: !0, type: Boolean })], y(l, null, m, { kind: "setter", name: "required", static: !1, private: !1, access: { has: (r) => "required" in r, set: (r, u) => {
+      r.required = u;
+    } }, metadata: t }, null, o), t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), l;
+})(), Se = (d) => (() => {
+  var u;
+  let c = [K({
     tabindex: "0"
-  })], r, h = [], a, u = I(U(L(l))), e = [], n;
-  return d = class extends u {
+  })], o, m = [], l, b = A(D(V(d))), t = [], r;
+  return u = class extends b {
     /** 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 a = typeof s == "object" ? s.attribute : !1;
+      a && (s = s.value), this.hasUpdated && !a && (this._attributeMutationBlocked = !0), this._checked = !!s, this.updateFormValue();
     }
     get checked() {
       return this._checked;
@@ -235,16 +330,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, a, i;
+      super(), this._attributeMutationBlocked = (_(this, t), !1), this._languageController = new B(this), this._checked = !1, this._handleKeyboardInteraction = (n) => {
+        n.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 n;
+        this.disabled || ((n = this.withUserInteraction) == null || n.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), (a = this.addEventListener) == null || a.call(this, "keydown", J), (i = this.addEventListener) == null || i.call(this, "keyup", this._handleKeyboardInteraction);
     }
-    attributeChangedCallback(s, i, c) {
-      (s !== "checked" || !this._attributeMutationBlocked) && super.attributeChangedCallback(s, i, c);
+    attributeChangedCallback(s, a, i) {
+      (s !== "checked" || !this._attributeMutationBlocked) && super.attributeChangedCallback(s, a, i);
     }
     /**
      * Is called whenever the form is being reset.
@@ -256,50 +351,217 @@ const I = (l) => (() => {
     }
     /**
      *  Called when the browser is trying to restore element’s state to state in which case
-     *  reason is “restore”, or when the browser is trying to fulfill autofill on behalf of
-     *  user in which case reason is “autocomplete”.
-     *  In the case of “restore”, state is a string, File, or FormData object
+     *  reason is "restore", or when the browser is trying to fulfill autofill on behalf of
+     *  user in which case reason is "autocomplete".
+     *  In the case of "restore", state is a string, File, or FormData object
      *  previously set as the second argument to setFormValue.
      *
      * @internal
      */
-    formStateRestoreCallback(s, i) {
+    formStateRestoreCallback(s, a) {
       s && (this.checked = s === "true");
     }
     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({
+    shouldValidate(s) {
+      return super.shouldValidate(s) || s === "checked" || s === "required";
+    }
+    validate() {
+      super.validate(), this.required && !this.checked ? this.setValidityFlag("valueMissing", Y[this._languageController.current]) : this.removeValidityFlag("valueMissing");
+    }
+  }, l = u, (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+    r = [k({
       type: Boolean,
       converter: {
-        ...A,
+        ...z,
         // 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: (a, i) => {
+          var p, x;
+          return { value: (x = (p = z).fromAttribute) == null ? void 0 : x.call(p, a, i), attribute: !0 };
+        }
+      }
+    })], y(u, null, r, { kind: "setter", name: "checked", static: !1, private: !1, access: { has: (a) => "checked" in a, set: (a, i) => {
+      a.checked = i;
+    } }, metadata: s }, null, t), y(null, o = { value: l }, c, { kind: "class", name: l.name, metadata: s }, null, m), l = o.value, s && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s }), _(l, m);
+  })(), l;
+})(), ke = (d) => (() => {
+  var r;
+  let c = D(V(d)), o = [], m, l, b, t;
+  return r = class extends c {
+    /**
+     * Form type of element.
+     * @default 'text'
+     */
+    get type() {
+      return "text";
+    }
+    /**
+     * The text value of the input element.
+     */
+    set value(e) {
+      super.value = this._cleanText(e), this.hasUpdated && (this.innerHTML = super.value);
+    }
+    get value() {
+      return super.value ?? "";
+    }
+    /**
+     * Whether the component is readonly.
+     * @attr readonly
+     * @default false
+     */
+    set readOnly(e) {
+      this.toggleAttribute("readonly", !!e), this.internals.ariaReadOnly = e ? "true" : null, this._updateContenteditable();
+    }
+    get readOnly() {
+      return this.hasAttribute("readonly");
+    }
+    /**
+     * Whether the component is disabled.
+     * @attr disabled
+     * @default false
+     */
+    set disabled(e) {
+      this.toggleAttribute("disabled", !!e), this.internals.ariaDisabled = e ? "true" : null, this._updateContenteditable();
+    }
+    get disabled() {
+      return this.hasAttribute("disabled");
+    }
+    set placeholder(e) {
+      e ? this.setAttribute("placeholder", e) : this.removeAttribute("placeholder"), this.internals.ariaPlaceholder = e || null;
+    }
+    get placeholder() {
+      return this.getAttribute("placeholder") ?? "";
+    }
+    constructor() {
+      var e, s, a, i, n, p, x;
+      super(), this._interacted = (_(this, o), !1), this._shouldEmitChange = !1, this._shouldTriggerSubmit = !1, this.language = new B(this), this.internals.role = "textbox", (e = this.addEventListener) == null || e.call(this, "input", () => {
+        super.value = this._cleanText(this.textContent ?? ""), this._interacted = !0, this._shouldEmitChange = !0;
+      }, { capture: !0 }), (s = this.addEventListener) == null || s.call(this, "change", () => this._shouldEmitChange = !1, { capture: !0 }), (a = this.addEventListener) == null || a.call(this, "keydown", (f) => {
+        var g;
+        if ((f.key === "Enter" || f.key === `
+`) && f.isTrusted)
+          f.preventDefault(), f.stopImmediatePropagation(), this._shouldTriggerSubmit = this.dispatchEvent(new KeyboardEvent("keydown", f));
+        else if (P && this.value && (f.key === "Backspace" || f.key === "Delete") && f.isTrusted) {
+          if (f.preventDefault(), f.stopImmediatePropagation(), !this.dispatchEvent(new KeyboardEvent("keydown", f)))
+            return;
+          const h = (g = window.getSelection()) == null ? void 0 : g.getRangeAt(0);
+          if (!h)
+            return;
+          h.startOffset !== h.endOffset ? (h.deleteContents(), this._dispatchInputEvent()) : f.key === "Backspace" && h.startOffset > 0 ? (h.setStart(h.startContainer, h.startOffset - 1), h.deleteContents(), this._dispatchInputEvent()) : f.key === "Delete" && h.endOffset < this.value.length && (h.setEnd(h.endContainer, h.endOffset + 1), h.deleteContents(), this._dispatchInputEvent());
         }
+      }, { capture: !0 }), (i = this.addEventListener) == null || i.call(this, "keyup", (f) => {
+        var g;
+        (f.key === "Enter" || f.key === `
+`) && (this._emitChangeIfNecessary(), this._shouldTriggerSubmit && (this._shouldTriggerSubmit = !1, (g = this.form) == null || g.requestSubmit()));
+      }, { capture: !0 }), (n = this.addEventListener) == null || n.call(this, "paste", (f) => {
+        var w, q;
+        f.preventDefault();
+        const g = this._cleanText(((w = f.clipboardData) == null ? void 0 : w.getData("text/plain")) ?? ""), h = (q = window.getSelection()) == null ? void 0 : q.getRangeAt(0);
+        !h || !g || (h.deleteContents(), h.insertNode(document.createTextNode(g)), h.setStart(h.endContainer, h.endOffset), this._dispatchInputEvent());
+      }), (p = this.addEventListener) == null || p.call(this, "focus", () => {
+        var f;
+        se.mostRecentModality === "keyboard" && ((f = window.getSelection()) == null || f.selectAllChildren(this));
+      }), (x = this.addEventListener) == null || x.call(this, "blur", () => {
+        var f;
+        (f = window.getSelection()) == null || f.removeAllRanges(), this._emitChangeIfNecessary(), this.scrollLeft = 0;
+      }, { capture: !0 });
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.internals.ariaMultiLine = "false", this._updateContenteditable(), this.innerHTML = this.value;
+    }
+    focus(e) {
+      if (super.focus(e), !M && !this.disabled && !this.readOnly && this.value) {
+        const s = window.getSelection();
+        if (!s)
+          return;
+        let a = s.rangeCount > 0 ? s.getRangeAt(0) : null;
+        if (a && a.startOffset !== 0)
+          return;
+        a = document.createRange(), a.setStart(this.firstChild, this.textContent.length), a.collapse(!0), s.removeAllRanges(), s.addRange(a);
       }
-    })], 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 {
+    }
+    attributeChangedCallback(e, s, a) {
+      (e !== "value" || !this._interacted) && super.attributeChangedCallback(e, s, a);
+    }
+    /**
+     * Is called whenever the form is being reset.
+     *
+     * @internal
+     */
+    formResetCallback() {
+      this._interacted = !1, this.value = this.getAttribute("value") ?? "";
+    }
+    /**
+     *  Called when the browser is trying to restore element’s state to state in which case
+     *  reason is "restore", or when the browser is trying to fulfill autofill on behalf of
+     *  user in which case reason is "autocomplete".
+     *  In the case of "restore", state is a string, File, or FormData object
+     *  previously set as the second argument to setFormValue.
+     *
+     * @internal
+     */
+    formStateRestoreCallback(e, s) {
+      e && typeof e == "string" && (this.value = e);
+    }
+    updateFormValue() {
+      this.internals.setFormValue(this.value, this.value);
+    }
+    shouldValidate(e) {
+      return super.shouldValidate(e) || e === "value" || e === "required";
+    }
+    validate() {
+      super.validate(), this.required && !this.value ? this.setValidityFlag("valueMissing", Z[this.language.current]) : this.removeValidityFlag("valueMissing");
+    }
+    _cleanText(e) {
+      return `${e}`.replace(/[\n\r]+/g, "");
+    }
+    _dispatchInputEvent() {
+      this.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 }));
+    }
+    _cleanChildren() {
+      if (this.childElementCount)
+        for (const e of this.children)
+          e.remove();
+    }
+    _updateContenteditable() {
+      if (!M && this.isConnected) {
+        const e = this.disabled || this.readOnly ? "false" : te ? "true" : "plaintext-only";
+        this.setAttribute("contenteditable", e), this.readOnly ? this.setAttribute("tabindex", "0") : this.removeAttribute("tabindex");
+      }
+    }
+    _emitChangeIfNecessary() {
+      this._shouldEmitChange && (this._shouldEmitChange = !1, this.dispatchEvent(new Event("change", { bubbles: !0 })));
+    }
+    render() {
+      return R`<slot @slotchange=${this._cleanChildren}></slot>`;
+    }
+  }, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    m = [k({ type: Boolean })], l = [k({ type: Boolean })], b = [k({ attribute: !1 })], t = [G({ passive: !0 })], y(r, null, m, { kind: "setter", name: "readOnly", static: !1, private: !1, access: { has: (s) => "readOnly" in s, set: (s, a) => {
+      s.readOnly = a;
+    } }, metadata: e }, null, o), y(r, null, l, { kind: "setter", name: "disabled", static: !1, private: !1, access: { has: (s) => "disabled" in s, set: (s, a) => {
+      s.disabled = a;
+    } }, metadata: e }, null, o), y(r, null, b, { kind: "setter", name: "placeholder", static: !1, private: !1, access: { has: (s) => "placeholder" in s, set: (s, a) => {
+      s.placeholder = a;
+    } }, metadata: e }, null, o), y(r, null, t, { kind: "method", name: "_cleanChildren", static: !1, private: !1, access: { has: (s) => "_cleanChildren" in s, get: (s) => s._cleanChildren }, metadata: e }, null, o), e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), r;
+})(), T = /* @__PURE__ */ new WeakMap(), xe = (d) => (() => {
+  var l;
+  let c = A(D(V(d))), o = [], m;
+  return l = class extends c {
     /**
      * Whether the radio button is checked.
      */
-    set checked(e) {
-      this._checked = !!e, this.toggleAttribute("data-checked", this.checked), this.internals.ariaChecked = this.checked.toString(), this.updateFormValue(), this._synchronizeGroupState();
+    set checked(t) {
+      this._checked = !!t, this.toggleAttribute("data-checked", this.checked), this.internals.ariaChecked = this.checked.toString(), this.updateFormValue(), this._synchronizeGroupState();
     }
     get checked() {
       return this._checked;
     }
-    set name(e) {
-      super.name = e, this._disconnectFromRegistry(), this._connectToRegistry(), this._synchronizeGroupState();
+    set name(t) {
+      super.name = t, this._disconnectFromRegistry(), this._connectToRegistry(), this._synchronizeGroupState();
     }
     get name() {
       return super.name;
@@ -312,8 +574,8 @@ const I = (l) => (() => {
       return "radio";
     }
     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));
+      var t;
+      super(), this._checked = (_(this, o), !1), this.abort = new X(this), this._didLoad = !1, this._languageController = new B(this), this.internals.role = "radio", (t = this.addEventListener) == null || t.call(this, "keydown", (r) => this._handleArrowKeyDown(r));
     }
     connectedCallback() {
       super.connectedCallback(), this._connectToRegistry(), this._synchronizeGroupState();
@@ -330,18 +592,18 @@ const I = (l) => (() => {
     }
     /**
      *  Called when the browser is trying to restore element’s state to state in which case
-     *  reason is “restore”, or when the browser is trying to fulfill autofill on behalf of
-     *  user in which case reason is “autocomplete”.
+     *  reason is "restore", or when the browser is trying to fulfill autofill on behalf of
+     *  user in which case reason is "autocomplete".
      * @internal
      */
-    formStateRestoreCallback(e, n) {
-      e && (this.checked = e === this.value);
+    formStateRestoreCallback(t, r) {
+      t && (this.checked = t === this.value);
     }
-    willUpdate(e) {
-      super.willUpdate(e), e.has("disabled") && this.updateFocusableRadios();
+    willUpdate(t) {
+      super.willUpdate(t), t.has("disabled") && this.updateFocusableRadios();
     }
-    firstUpdated(e) {
-      super.firstUpdated(e), this._didLoad = !0, this.updateFocusableRadios();
+    firstUpdated(t) {
+      super.firstUpdated(t), this._didLoad = !0, this.updateFocusableRadios();
     }
     /**
      * Called on `value` change
@@ -350,6 +612,21 @@ const I = (l) => (() => {
     updateFormValue() {
       this.checked ? this.internals.setFormValue(this.value, this.value) : this.internals.setFormValue(null);
     }
+    shouldValidate(t) {
+      return super.shouldValidate(t) || t === "checked" || t === "required";
+    }
+    /**
+     * Sets the validity of all associated radio buttons.
+     * If any radio button is required, all associated are required as well.
+     */
+    validate() {
+      if (super.validate(), !this.associatedRadioButtons)
+        return;
+      let t = !1, r = !1;
+      for (const u of this.associatedRadioButtons)
+        t || (t = u.required), r || (r = u.checked);
+      t && !r ? this.associatedRadioButtons.forEach((u) => u.setValidityFlag("valueMissing", ee[this._languageController.current])) : this.associatedRadioButtons.forEach((u) => u.removeValidityFlag("valueMissing"));
+    }
     /**
      * Only a single radio should be focusable in the group. Defined as:
      * - the checked radio;
@@ -358,11 +635,11 @@ 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 t = this._interactableGroupedRadios(), r = t.findIndex((e) => e.checked && !e.disabled && !e.formDisabled), u = r !== -1 ? r : t.findIndex((e) => !e.disabled && !e.formDisabled);
+      u !== -1 && (t[u].tabIndex = 0, t.splice(u, 1)), t.forEach((e) => e.removeAttribute("tabindex"));
     }
-    async navigateByKeyboard(e) {
-      e.checked = !0, this.emitChangeEvents(), await e.updateComplete, e.focus();
+    async navigateByKeyboard(t) {
+      t.checked = !0, this.emitChangeEvents(), await t.updateComplete, t.focus();
     }
     emitChangeEvents() {
       this.dispatchEvent(new InputEvent("input", { bubbles: !0, cancelable: !0, composed: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 }));
@@ -374,49 +651,49 @@ const I = (l) => (() => {
      * Add `this` to the radioButton registry
      */
     _connectToRegistry() {
-      if (!this.name || G)
+      if (!this.name || M)
         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 t = this.form ?? this.getRootNode();
+      this._radioButtonGroupsMap = T.get(t), this._radioButtonGroupsMap || (this._radioButtonGroupsMap = /* @__PURE__ */ new Map(), T.set(t, this._radioButtonGroupsMap)), this.associatedRadioButtons = this._radioButtonGroupsMap.get(this.name), this.associatedRadioButtons || (this.associatedRadioButtons = /* @__PURE__ */ new Set(), this._radioButtonGroupsMap.set(this.name, this.associatedRadioButtons));
+      const r = 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 u = r.findIndex((e) => this.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_FOLLOWING);
+      u !== -1 ? r.splice(u, 0, this) : r.push(this), r.forEach((e) => this.associatedRadioButtons.add(e)), this.validate();
     }
     /**
      * 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 t, r, u;
+      (t = this.associatedRadioButtons) == null || t.delete(this), ((r = this.associatedRadioButtons) == null ? void 0 : r.size) === 0 ? (u = this._radioButtonGroupsMap) == null || u.delete(this.name) : this.validate(), this.associatedRadioButtons = void 0, this._radioButtonGroupsMap = void 0;
     }
     /**
      * 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((t) => ae.isVisible(t));
     }
     /**
      * Deselect other radio of the same group
      */
     _deselectGroupedRadios() {
-      Array.from(this.associatedRadioButtons ?? []).filter((e) => e !== this).forEach((e) => e.checked = !1);
+      Array.from(this.associatedRadioButtons ?? []).filter((t) => t !== this).forEach((t) => t.checked = !1);
     }
-    async _handleArrowKeyDown(e) {
-      if (!H(e))
+    async _handleArrowKeyDown(t) {
+      if (!ie(t))
         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]);
+      t.preventDefault();
+      const r = this._interactableGroupedRadios().filter((s) => !s.disabled && !s.formDisabled), u = r.indexOf(this), e = re(t, u, r.length);
+      await this.navigateByKeyboard(r[e]);
     }
   }, (() => {
-    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 t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    m = [k({ type: Boolean })], y(l, null, m, { kind: "setter", name: "checked", static: !1, private: !1, access: { has: (r) => "checked" in r, set: (r, u) => {
+      r.checked = u;
+    } }, metadata: t }, null, o), t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), l;
+})(), le = (d) => {
+  class v extends d {
     /**
      * 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 +709,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 m;
+      if (super(...o), this._hydrationComplete = new Promise((l) => this._resolveHydration = l), 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 l = (r) => {
+          this._hydrationRequired && r.stopImmediatePropagation();
+        }, b = { capture: !0 }, t = (m = this.shadowRoot) == null ? void 0 : m.querySelectorAll("slot");
+        t != null && t.length && (t.forEach((r) => r.addEventListener("slotchange", l, b)), this.hydrationComplete.then(() => t.forEach((r) => {
+          r.removeEventListener("slotchange", l, b), r.assignedNodes().length && r.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 v;
+}, U = "data-ssr-child-count", j = "li", Ce = (d) => (() => {
+  var b, t;
+  let c = le(d), o, m = [], l = [];
+  return t = class extends c {
     constructor() {
       super(...arguments);
-      x(this, u);
-      v(this, u, f(this, h, [])), this._handleSlotchange = (f(this, a), () => {
-        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));
+      E(this, b);
+      S(this, b, _(this, m, [])), this._handleSlotchange = (_(this, l), () => {
+        const e = Array.from(this.children ?? []).filter((s) => this.listChildLocalNames.includes(s.localName));
+        e.length === this.listChildren.length && this.listChildren.every((s, a) => e[a] === s) || (this.listChildren.filter((s) => !e.includes(s)).forEach((s) => s.removeAttribute("slot")), this.listChildren = e, this.listChildren.forEach((s, a) => s.setAttribute("slot", `${j}-${a}`)), this.removeAttribute(U));
       });
     }
     /**
@@ -468,18 +745,18 @@ const I = (l) => (() => {
      * to the child elements.
      */
     get listChildren() {
-      return k(this, u);
+      return C(this, b);
     }
-    set listChildren(t) {
-      v(this, u, t);
+    set listChildren(e) {
+      S(this, b, e);
     }
     connectedCallback() {
-      var t;
-      super.connectedCallback(), (t = this.shadowRoot) == null || t.addEventListener("slotchange", this._handleSlotchange, { passive: !0 });
+      var e;
+      super.connectedCallback(), (e = this.shadowRoot) == null || e.addEventListener("slotchange", this._handleSlotchange, { passive: !0 });
     }
     disconnectedCallback() {
-      var t;
-      super.disconnectedCallback(), (t = this.shadowRoot) == null || t.removeEventListener("slotchange", this._handleSlotchange);
+      var e;
+      super.disconnectedCallback(), (e = this.shadowRoot) == null || e.removeEventListener("slotchange", this._handleSlotchange);
     }
     /**
      * Renders list and list slots for slotted children or a number of list slots
@@ -490,24 +767,24 @@ const I = (l) => (() => {
      * framework wrapper (like e.g. React). This allows to provide the number of
      * 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`
+    renderList(e = {}, s = {}) {
+      const a = this.listSlotEntries(s);
+      return a.length >= 2 ? R`
           <ul
-            class=${t.class || this.localName}
-            aria-label=${t.ariaLabel || E}
-            aria-labelledby=${t.ariaLabelledby || E}
+            class=${e.class || this.localName}
+            aria-label=${e.ariaLabel || O}
+            aria-labelledby=${e.ariaLabelledby || O}
           >
-            ${i.map((c) => R`
-                <li aria-hidden=${c.ariaHidden || E}>
-                  <slot name=${c.name}></slot>
+            ${a.map((i) => R`
+                <li aria-hidden=${i.ariaHidden || O}>
+                  <slot name=${i.name}></slot>
                 </li>
               `)}
           </ul>
           ${this.renderHiddenSlot()}
-        ` : i.length === 1 ? R`<sbb-screen-reader-only>${t.ariaLabel}</sbb-screen-reader-only>
-          <span class=${t.class || this.localName}>
-            <span><slot name=${i[0].name}></slot></span>
+        ` : a.length === 1 ? R`<sbb-screen-reader-only>${e.ariaLabel}</sbb-screen-reader-only>
+          <span class=${e.class || this.localName}>
+            <span><slot name=${a[0].name}></slot></span>
           </span>
           ${this.renderHiddenSlot()} ` : this.renderHiddenSlot();
     }
@@ -520,12 +797,12 @@ const I = (l) => (() => {
      * framework wrapper (like e.g. React). This allows to provide the number of
      * 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;
+    listSlotEntries(e) {
+      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(U) ?? 0) })).map((a, i) => {
+        var n;
         return {
-          name: `${q}-${c}`,
-          ariaHidden: ((b = t == null ? void 0 : t.localNameVisualOnly) == null ? void 0 : b.includes(i.localName)) ?? !1
+          name: `${j}-${i}`,
+          ariaHidden: ((n = e == null ? void 0 : e.localNameVisualOnly) == null ? void 0 : n.includes(a.localName)) ?? !1
         };
       });
     }
@@ -537,113 +814,115 @@ const I = (l) => (() => {
     renderHiddenSlot() {
       return R`<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 });
-  })(), e;
-})(), ue = (l) => (() => {
-  var u, e;
-  let o = l, r, h = [], a = [];
-  return e = class extends o {
+  }, b = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    o = [N()], y(t, null, o, { kind: "accessor", name: "listChildren", static: !1, private: !1, access: { has: (s) => "listChildren" in s, get: (s) => s.listChildren, set: (s, a) => {
+      s.listChildren = a;
+    } }, metadata: e }, m, l), e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), t;
+})(), Ee = (d) => (() => {
+  var b, t;
+  let c = d, o, m = [], l = [];
+  return t = class extends c {
     constructor() {
       super(...arguments);
-      x(this, u, f(this, h, !1));
-      f(this, a);
+      E(this, b, _(this, m, !1));
+      _(this, l);
     }
     /** Negative coloring variant flag. */
     get negative() {
-      return k(this, u);
-    }
-    set negative(t) {
-      v(this, u, 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 });
-  })(), 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 {
+      return C(this, b);
+    }
+    set negative(e) {
+      S(this, b, e);
+    }
+  }, b = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    o = [I(), k({ reflect: !0, type: Boolean })], y(t, null, o, { kind: "accessor", name: "negative", static: !1, private: !1, access: { has: (s) => "negative" in s, get: (s) => s.negative, set: (s, a) => {
+      s.negative = a;
+    } }, metadata: e }, m, l), e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), t;
+})(), we = (d) => (() => {
+  var a, i, n, p;
+  let c = d, o, m = [], l = [], b, t = [], r = [], u, e = [], s = [];
+  return p = class extends c {
     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 }));
+      E(this, a);
+      E(this, i);
+      E(this, n);
+      S(this, a, _(this, m, "white")), S(this, i, (_(this, l), _(this, t, !1))), S(this, n, (_(this, r), _(this, e, ""))), this._panelConnected = (_(this, s), new Q(this, p.events.panelConnected, { bubbles: !0 }));
     }
     /** The background color of the panel. */
     get color() {
-      return k(this, i);
+      return C(this, a);
     }
     set color(g) {
-      v(this, i, g);
+      S(this, a, g);
     }
     /** Whether the unselected panel has a border. */
     get borderless() {
-      return k(this, c);
+      return C(this, i);
     }
     set borderless(g) {
-      v(this, c, g);
+      S(this, i, g);
     }
     /** @internal used for accessibility label when in expansion panel */
     get expansionState() {
-      return k(this, b);
+      return C(this, n);
     }
     set expansionState(g) {
-      v(this, b, g);
+      S(this, n, g);
     }
     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 = {
+      var g, h;
+      super.connectedCallback(), this._panelConnected.emit(), (h = (g = this.closest) == null ? void 0 : g.call(this, "sbb-radio-button-group, sbb-checkbox-group")) == null || h.toggleAttribute("data-has-panel", !0);
+    }
+  }, a = new WeakMap(), i = new WeakMap(), n = new WeakMap(), (() => {
+    const g = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    o = [k({ reflect: !0 })], b = [I(), k({ reflect: !0, type: Boolean })], u = [I(), k()], y(p, null, o, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (h) => "color" in h, get: (h) => h.color, set: (h, w) => {
+      h.color = w;
+    } }, metadata: g }, m, l), y(p, null, b, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (h) => "borderless" in h, get: (h) => h.borderless, set: (h, w) => {
+      h.borderless = w;
+    } }, metadata: g }, t, r), y(p, null, u, { kind: "accessor", name: "expansionState", static: !1, private: !1, access: { has: (h) => "expansionState" in h, get: (h) => h.expansionState, set: (h, w) => {
+      h.expansionState = w;
+    } }, metadata: g }, e, s), g && Object.defineProperty(p, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: g });
+  })(), p.events = {
     panelConnected: "panelConnected"
-  }, m;
-})(), he = (l) => {
-  class p extends l {
+  }, p;
+})(), Re = (d) => {
+  class v extends d {
     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 v;
+}, Ie = W`: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,
-  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,
-  O as radioButtonRegistry
+  ne as SbbDisabledInteractiveMixin,
+  A as SbbDisabledMixin,
+  _e as SbbDisabledTabIndexActionMixin,
+  Se as SbbFormAssociatedCheckboxMixin,
+  ke as SbbFormAssociatedInputMixin,
+  V as SbbFormAssociatedMixin,
+  xe as SbbFormAssociatedRadioButtonMixin,
+  le as SbbHydrationMixin,
+  Ce as SbbNamedSlotListMixin,
+  Ee as SbbNegativeMixin,
+  we as SbbPanelMixin,
+  D as SbbRequiredMixin,
+  Re as SbbUpdateSchedulerMixin,
+  Ie as panelCommonStyle,
+  T as radioButtonRegistry
 };