@sbb-esta/lyne-elements 2.3.0 → 2.4.1

package/core/mixins.js

@@ -1,33 +1,33 @@
-var V = (c) => {
-  throw TypeError(c);
+var F = (d) => {
+  throw TypeError(d);
 };
-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";
+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 M = (c) => (() => {
-  var h, e;
-  let u = c, o, p = [], r = [];
-  return e = class extends u {
+const A = (d) => (() => {
+  var b, t;
+  let c = d, o, m = [], l = [];
+  return t = class extends c {
     constructor() {
       super(...arguments);
-      C(this, h, f(this, p, !1));
-      f(this, r);
+      E(this, b, _(this, m, !1));
+      _(this, l);
     }
     /** Whether the component is disabled. */
     get disabled() {
-      return x(this, h);
+      return C(this, b);
     }
-    set disabled(t) {
-      y(this, h, t);
+    set disabled(e) {
+      S(this, b, e);
     }
     /**
      * Will be used as 'or' check to the current disabled state.
@@ -36,42 +36,42 @@ const M = (c) => (() => {
     isDisabledExternally() {
       return !1;
     }
-  }, 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;
-})(), ee = (c) => (() => {
-  var h, e;
-  let u = c, o, p = [], r = [];
-  return e = class extends u {
+  }, 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);
-      C(this, h, f(this, p, !1));
-      f(this, r);
+      E(this, b, _(this, m, !1));
+      _(this, l);
     }
     /** Whether the button should be aria-disabled but stay interactive. */
     get disabledInteractive() {
-      return x(this, h);
-    }
-    set disabledInteractive(t) {
-      y(this, h, 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;
-})(), pe = (c) => {
-  class m extends ee(M(c)) {
+      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 m;
-}, te = {
+  return v;
+}, $ = {
   badInput: !1,
   customError: !1,
   patternMismatch: !1,
@@ -82,15 +82,31 @@ const M = (c) => (() => {
   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());
+};
+if (typeof ValidityState > "u") {
+  const d = class {
+    get valid() {
+      return !0;
+    }
+    constructor() {
+      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 this element.
@@ -104,8 +120,8 @@ const M = (c) => (() => {
      * @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(a) {
-      this.setAttribute("name", `${a}`), this.updateFormValue();
+    set name(i) {
+      this.setAttribute("name", `${i}`), this.updateFormValue();
     }
     get name() {
       return this.getAttribute("name") ?? "";
@@ -115,8 +131,8 @@ const M = (c) => (() => {
       return this.localName;
     }
     /** Value of the form element. */
-    set value(a) {
-      this._value = a, this.updateFormValue();
+    set value(i) {
+      this._value = i, this.updateFormValue();
     }
     get value() {
       return this._value;
@@ -148,13 +164,13 @@ const M = (c) => (() => {
     }
     /** Whenever a surrounding form or fieldset is changing its disabled state. */
     get formDisabled() {
-      return x(this, n);
+      return C(this, u);
     }
-    set formDisabled(a) {
-      y(this, n, a);
+    set formDisabled(i) {
+      S(this, u, i);
     }
-    attributeChangedCallback(a, d, b) {
-      (a !== "name" || d !== b) && super.attributeChangedCallback(a, d, b);
+    attributeChangedCallback(i, n, p) {
+      (i !== "name" || n !== p) && super.attributeChangedCallback(i, n, p);
     }
     /**
      * Returns true if this element has no validity problems; false otherwise.
@@ -175,8 +191,8 @@ const M = (c) => (() => {
      * 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");
+    setCustomValidity(i) {
+      i ? this.setValidityFlag("customError", i) : this.removeValidityFlag("customError");
     }
     /**
      * Is called whenever a surrounding form / fieldset changes disabled state.
@@ -184,11 +200,17 @@ const M = (c) => (() => {
      *
      * @internal
      */
-    formDisabledCallback(a) {
+    formDisabledCallback(i) {
       Promise.resolve().then(() => {
-        this.formDisabled = a;
+        this.formDisabled = i;
       });
     }
+    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.
@@ -196,8 +218,7 @@ const M = (c) => (() => {
      * 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.
+     * ValidityState prototype (and the CustomValidityState interface).
      *
      * @example
      *
@@ -209,66 +230,70 @@ const M = (c) => (() => {
      *   });
      *
      *   declare global {
-     *     interface ValidityState {
+     *     interface CustomValidityState {
      *       myError: boolean;
      *     }
-     *     interface ValidityState {
-     *       myError?: boolean;
-     *     }
      *   }
      */
-    setValidityFlag(a, d, b) {
-      b ?? (b = !0), this._validityStates.set(a, { flagValue: b, message: d }), this._setInternalValidity();
+    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());
     }
-    removeValidityFlag(a) {
-      this._validityStates.delete(a), 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 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;
-})(), j = (c) => (() => {
-  var r;
-  let u = c, o = [], p;
-  return r = class extends u {
+      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, o), !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.
@@ -278,21 +303,21 @@ const M = (c) => (() => {
       return !1;
     }
   }, (() => {
-    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({
+    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"
-  })], o, p = [], r, h = M(j(L(c))), e = [], i;
-  return n = class extends h {
+  })], o, m = [], l, b = A(D(V(d))), t = [], r;
+  return u = class extends b {
     /** Whether the checkbox is checked. */
     set checked(s) {
-      const l = typeof s == "object" ? s.attribute : !1;
-      l && (s = s.value), this.hasUpdated && !l && (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;
@@ -305,16 +330,16 @@ const M = (c) => (() => {
       return "checkbox";
     }
     constructor() {
-      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();
+      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 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);
+        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, l, a) {
-      (s !== "checked" || !this._attributeMutationBlocked) && super.attributeChangedCallback(s, l, a);
+    attributeChangedCallback(s, a, i) {
+      (s !== "checked" || !this._attributeMutationBlocked) && super.attributeChangedCallback(s, a, i);
     }
     /**
      * Is called whenever the form is being reset.
@@ -326,59 +351,217 @@ const M = (c) => (() => {
     }
     /**
      *  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, l) {
+    formStateRestoreCallback(s, a) {
       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);
     }
-    _setValidity() {
-      this.required && !this.checked ? this.setValidityFlag("valueMissing", W[this._languageController.current]) : this.removeValidityFlag("valueMissing");
+    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");
     }
-  }, r = n, (() => {
-    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
-    i = [S({
+  }, l = u, (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+    r = [k({
       type: Boolean,
       converter: {
-        ...D,
+        ...z,
         // We need to pass information to the setter so that we know it was called by attribute change.
-        fromAttribute: (l, a) => {
-          var b, E;
-          return { value: (E = (b = D).fromAttribute) == null ? void 0 : E.call(b, l, a), attribute: !0 };
+        fromAttribute: (a, i) => {
+          var p, x;
+          return { value: (x = (p = z).fromAttribute) == null ? void 0 : x.call(p, a, i), attribute: !0 };
         }
       }
-    })], 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) => (() => {
+    })], 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 u = M(j(L(c))), o = [], p;
-  return r = class extends u {
+  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);
+      }
+    }
+    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;
@@ -391,8 +574,8 @@ const M = (c) => (() => {
       return "radio";
     }
     constructor() {
-      var e;
-      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));
+      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();
@@ -409,21 +592,18 @@ const M = (c) => (() => {
     }
     /**
      *  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, 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();
+    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(), this._setValidity();
+    firstUpdated(t) {
+      super.firstUpdated(t), this._didLoad = !0, this.updateFocusableRadios();
     }
     /**
      * Called on `value` change
@@ -432,6 +612,21 @@ const M = (c) => (() => {
     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;
@@ -440,11 +635,11 @@ const M = (c) => (() => {
     updateFocusableRadios() {
       if (!this._didLoad)
         return;
-      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"));
+      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 }));
@@ -456,61 +651,49 @@ const M = (c) => (() => {
      * 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 i = 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 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();
+      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, 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"));
+      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) => Q.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 (!Y(e))
+    async _handleArrowKeyDown(t) {
+      if (!ie(t))
         return;
-      e.preventDefault();
-      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]);
+      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(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 {
+    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
@@ -527,15 +710,15 @@ const M = (c) => (() => {
       return this._hydrationRequired;
     }
     constructor(...o) {
-      var p;
-      if (super(...o), this._hydrationComplete = new Promise((r) => this._resolveHydration = r), this._hydrationRequired = !!this.shadowRoot, !this._hydrationRequired)
+      var m;
+      if (super(...o), this._hydrationComplete = new Promise((l) => this._resolveHydration = l), this._hydrationRequired = !!this.shadowRoot, !this._hydrationRequired)
         this._resolveHydration(!1);
       else {
-        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 }));
+        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 }));
         })));
       }
     }
@@ -543,17 +726,17 @@ const M = (c) => (() => {
       super.update(o), this._hydrationRequired && (this._hydrationRequired = !1, this._resolveHydration(!0));
     }
   }
-  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 {
+  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);
-      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, 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));
+      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));
       });
     }
     /**
@@ -562,18 +745,18 @@ const M = (c) => (() => {
      * to the child elements.
      */
     get listChildren() {
-      return x(this, h);
+      return C(this, b);
     }
-    set listChildren(t) {
-      y(this, h, 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
@@ -584,24 +767,24 @@ const M = (c) => (() => {
      * 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 l = this.listSlotEntries(s);
-      return l.length >= 2 ? I`
+    renderList(e = {}, s = {}) {
+      const a = this.listSlotEntries(s);
+      return a.length >= 2 ? R`
           <ul
-            class=${t.class || this.localName}
-            aria-label=${t.ariaLabel || B}
-            aria-labelledby=${t.ariaLabelledby || B}
+            class=${e.class || this.localName}
+            aria-label=${e.ariaLabel || O}
+            aria-labelledby=${e.ariaLabelledby || O}
           >
-            ${l.map((a) => I`
-                <li aria-hidden=${a.ariaHidden || B}>
-                  <slot name=${a.name}></slot>
+            ${a.map((i) => R`
+                <li aria-hidden=${i.ariaHidden || O}>
+                  <slot name=${i.name}></slot>
                 </li>
               `)}
           </ul>
           ${this.renderHiddenSlot()}
-        ` : l.length === 1 ? I`<sbb-screen-reader-only>${t.ariaLabel}</sbb-screen-reader-only>
-          <span class=${t.class || this.localName}>
-            <span><slot name=${l[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();
     }
@@ -614,12 +797,12 @@ const M = (c) => (() => {
      * 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(F) ?? 0) })).map((l, a) => {
-        var d;
+    listSlotEntries(e) {
+      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(U) ?? 0) })).map((a, i) => {
+        var n;
         return {
-          name: `${U}-${a}`,
-          ariaHidden: ((d = t == null ? void 0 : t.localNameVisualOnly) == null ? void 0 : d.includes(l.localName)) ?? !1
+          name: `${j}-${i}`,
+          ariaHidden: ((n = e == null ? void 0 : e.localNameVisualOnly) == null ? void 0 : n.includes(a.localName)) ?? !1
         };
       });
     }
@@ -629,85 +812,86 @@ const M = (c) => (() => {
      * the slotchange event, which can be used to assign it to the appropriate named slot.
      */
     renderHiddenSlot() {
-      return I`<span hidden><slot></slot></span>`;
-    }
-  }, 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;
-})(), _e = (c) => (() => {
-  var h, e;
-  let u = c, o, p = [], r = [];
-  return e = class extends u {
+      return R`<span hidden><slot></slot></span>`;
+    }
+  }, 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);
-      C(this, h, f(this, p, !1));
-      f(this, r);
+      E(this, b, _(this, m, !1));
+      _(this, l);
     }
     /** Negative coloring variant flag. */
     get negative() {
-      return x(this, h);
-    }
-    set negative(t) {
-      y(this, h, 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;
-})(), ye = (c) => (() => {
-  var l, a, d, b;
-  let u = c, o, p = [], r = [], h, e = [], i = [], n, t = [], s = [];
-  return b = class extends u {
+      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);
-      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 }));
+      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 x(this, l);
+      return C(this, a);
     }
-    set color(_) {
-      y(this, l, _);
+    set color(g) {
+      S(this, a, g);
     }
     /** Whether the unselected panel has a border. */
     get borderless() {
-      return x(this, a);
+      return C(this, i);
     }
-    set borderless(_) {
-      y(this, a, _);
+    set borderless(g) {
+      S(this, i, g);
     }
     /** @internal used for accessibility label when in expansion panel */
     get expansionState() {
-      return x(this, d);
+      return C(this, n);
     }
-    set expansionState(_) {
-      y(this, d, _);
+    set expansionState(g) {
+      S(this, n, g);
     }
     connectedCallback() {
-      super.connectedCallback(), this._panelConnected.emit();
-    }
-  }, 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 = {
+      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"
-  }, b;
-})(), ge = (c) => {
-  class m extends c {
+  }, p;
+})(), Re = (d) => {
+  class v extends d {
     constructor() {
       super(...arguments), this._updatePromise = Promise.resolve(), this._updateResolve = () => {
       };
@@ -723,21 +907,22 @@ const M = (c) => (() => {
       return await this._updatePromise, o;
     }
   }
-  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}`;
+  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 {
-  ee as SbbDisabledInteractiveMixin,
-  M as SbbDisabledMixin,
-  pe as SbbDisabledTabIndexActionMixin,
-  me as SbbFormAssociatedCheckboxMixin,
-  L as SbbFormAssociatedMixin,
-  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
+  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
 };