@sbb-esta/lyne-elements 1.13.0 → 1.14.0

package/core/mixins.js

@@ -1,23 +1,29 @@
-import { property as l, state as y } from "lit/decorators.js";
-import { defaultConverter as v, html as b, nothing as c, css as C } from "lit";
-import { hostAttributes as k } from "./decorators.js";
-import { preventScrollOnSpacebarPress as f, EventEmitter as w } from "./eventing.js";
-import "../screen-reader-only.js";
-var S = Object.defineProperty, E = Object.getOwnPropertyDescriptor, x = (n, s, r, t) => {
-  for (var e = t > 1 ? void 0 : t ? E(s, r) : s, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = (t ? a(s, r, e) : a(e)) || e);
-  return t && e && S(s, r, e), e;
+var A = (r) => {
+  throw TypeError(r);
 };
-const p = (n) => {
-  class s extends n {
+var R = (r, c, l) => c.has(r) || A("Cannot " + l);
+var x = (r, c, l) => (R(r, c, "read from private field"), l ? l.call(r) : c.get(r)), k = (r, c, l) => c.has(r) ? A("Cannot add the same private member more than once") : c instanceof WeakSet ? c.add(r) : c.set(r, l), _ = (r, c, l, a) => (R(r, c, "write to private field"), a ? a.call(r, l) : c.set(r, l), l);
+import { __esDecorate as g, __runInitializers as v } from "tslib";
+import { property as S, state as L } from "lit/decorators.js";
+import { forceType as w, getOverride as $, hostAttributes as j } from "./decorators.js";
+import { defaultConverter as z, html as E, nothing as I, css as N } from "lit";
+import { preventScrollOnSpacebarPress as O, EventEmitter as B } from "./eventing.js";
+import "../screen-reader-only.js";
+const D = (r) => (() => {
+  var o, s;
+  let l = r, a, u = [], n = [];
+  return s = class extends l {
     constructor() {
-      super(...arguments), this._disabled = !1;
-    }
-    set disabled(t) {
-      this._disabled = !!t;
+      super(...arguments);
+      k(this, o, v(this, u, !1));
+      v(this, n);
     }
+    /** Whether the component is disabled. */
     get disabled() {
-      return this._disabled || this.isDisabledExternally();
+      return x(this, o);
+    }
+    set disabled(t) {
+      _(this, o, t);
     }
     /**
      * Will be used as 'or' check to the current disabled state.
@@ -26,43 +32,56 @@ const p = (n) => {
     isDisabledExternally() {
       return !1;
     }
-  }
-  return x([
-    l({ reflect: !0, type: Boolean })
-  ], s.prototype, "disabled", 1), s;
-}, $ = (n) => {
-  class s extends n {
+  }, o = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    a = [w(), S({ reflect: !0, type: Boolean }), $((e, i) => i || e.isDisabledExternally())], g(s, null, a, { kind: "accessor", name: "disabled", static: !1, private: !1, access: { has: (e) => "disabled" in e, get: (e) => e.disabled, set: (e, i) => {
+      e.disabled = i;
+    } }, metadata: t }, u, n), t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), s;
+})(), P = (r) => (() => {
+  var o, s;
+  let l = r, a, u = [], n = [];
+  return s = class extends l {
     constructor() {
-      super(...arguments), this.disabledInteractive = !1;
+      super(...arguments);
+      k(this, o, v(this, u, !1));
+      v(this, n);
+    }
+    /** Whether disabled buttons should be interactive. */
+    get disabledInteractive() {
+      return x(this, o);
+    }
+    set disabledInteractive(t) {
+      _(this, o, t);
+    }
+  }, o = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    a = [w(), S({ attribute: "disabled-interactive", type: Boolean })], g(s, null, a, { kind: "accessor", name: "disabledInteractive", static: !1, private: !1, access: { has: (e) => "disabledInteractive" in e, get: (e) => e.disabledInteractive, set: (e, i) => {
+      e.disabledInteractive = i;
+    } }, metadata: t }, u, n), t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), s;
+})(), Z = (r) => {
+  class c extends P(D(r)) {
+    willUpdate(a) {
+      super.willUpdate(a), !(!a.has("disabled") && !a.has("disabledInteractive")) && (!this.disabled || this.disabledInteractive ? this.setAttribute("tabindex", "0") : this.removeAttribute("tabindex"), this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"));
     }
   }
-  return x([
-    l({ attribute: "disabled-interactive", type: Boolean })
-  ], s.prototype, "disabledInteractive", 2), s;
-}, G = (n) => {
-  class s extends $(p(n)) {
-    willUpdate(t) {
-      super.willUpdate(t), !(!t.has("disabled") && !t.has("disabledInteractive")) && (!this.disabled || this.disabledInteractive ? this.setAttribute("tabindex", "0") : this.removeAttribute("tabindex"), this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"));
+  return c;
+}, ee = (r) => {
+  class c extends D(r) {
+    willUpdate(a) {
+      super.willUpdate(a), a.has("disabled") && (this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"));
     }
   }
-  return s;
-}, J = (n) => {
-  class s extends p(n) {
-    willUpdate(t) {
-      super.willUpdate(t), t.has("disabled") && (this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"));
-    }
-  }
-  return s;
-};
-var P = Object.defineProperty, O = Object.getOwnPropertyDescriptor, h = (n, s, r, t) => {
-  for (var e = t > 1 ? void 0 : t ? O(s, r) : s, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = (t ? a(s, r, e) : a(e)) || e);
-  return t && e && P(s, r, e), e;
-};
-const R = (n) => {
-  const r = class r extends n {
+  return c;
+}, V = (r) => (() => {
+  var h, t;
+  let l = r, a = [], u, n, o, s = [], m = [];
+  return t = class extends l {
     constructor() {
-      super(...arguments), this._value = null, this.internals = this.attachInternals(), this.formDisabled = !1;
+      super(...arguments);
+      k(this, h);
+      this._value = (v(this, a), null), this.internals = this.attachInternals(), _(this, h, v(this, s, !1)), v(this, m);
     }
     /**
      * Returns the form owner of the internals of the target element.
@@ -70,8 +89,14 @@ const R = (n) => {
     get form() {
       return this.internals.form;
     }
-    set name(e) {
-      this.setAttribute("name", `${e}`), this.updateFormValue();
+    /**
+     * Name of the form element. Will be read from name attribute.
+     *
+     * @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(d) {
+      this.setAttribute("name", `${d}`), this.updateFormValue();
     }
     get name() {
       return this.getAttribute("name") ?? "";
@@ -80,8 +105,9 @@ const R = (n) => {
     get type() {
       return this.localName;
     }
-    set value(e) {
-      this._value = e, this.updateFormValue();
+    /** Value of the form element. */
+    set value(d) {
+      this._value = d, this.updateFormValue();
     }
     get value() {
       return this._value;
@@ -112,8 +138,15 @@ const R = (n) => {
     get willValidate() {
       return this.internals.willValidate;
     }
-    attributeChangedCallback(e, i, a) {
-      (e !== "name" || i !== a) && super.attributeChangedCallback(e, i, a);
+    /** Whenever a surrounding form or fieldset is changing its disabled state. */
+    get formDisabled() {
+      return x(this, h);
+    }
+    set formDisabled(d) {
+      _(this, h, d);
+    }
+    attributeChangedCallback(d, b, p) {
+      (d !== "name" || b !== p) && super.attributeChangedCallback(d, b, p);
     }
     /**
      * Returns true if internals target element has no validity problems; false otherwise.
@@ -140,40 +173,37 @@ const R = (n) => {
      *
      * @internal
      */
-    formDisabledCallback(e) {
+    formDisabledCallback(d) {
       Promise.resolve().then(() => {
-        this.formDisabled = e;
+        this.formDisabled = d;
       });
     }
-  };
-  r.formAssociated = !0;
-  let s = r;
-  return h([
-    l()
-  ], s.prototype, "name", 1), h([
-    l()
-  ], s.prototype, "value", 1), h([
-    y()
-  ], s.prototype, "formDisabled", 2), s;
-};
-var A = Object.defineProperty, D = Object.getOwnPropertyDescriptor, q = (n, s, r, t) => {
-  for (var e = D(s, r), i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(s, r, e) || e);
-  return e && A(s, r, e), e;
-};
-const M = (n) => {
-  class s extends n {
+  }, h = new WeakMap(), (() => {
+    const d = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    u = [S()], n = [S()], o = [L()], g(t, null, u, { kind: "setter", name: "name", static: !1, private: !1, access: { has: (b) => "name" in b, set: (b, p) => {
+      b.name = p;
+    } }, metadata: d }, null, a), g(t, null, n, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (b) => "value" in b, set: (b, p) => {
+      b.value = p;
+    } }, metadata: d }, null, a), g(t, null, o, { kind: "accessor", name: "formDisabled", static: !1, private: !1, access: { has: (b) => "formDisabled" in b, get: (b) => b.formDisabled, set: (b, p) => {
+      b.formDisabled = p;
+    } }, metadata: d }, s, m), d && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: d });
+  })(), t.formAssociated = !0, t;
+})(), H = (r) => (() => {
+  var n;
+  let l = r, a = [], u;
+  return n = class extends l {
     constructor() {
-      super(...arguments), this._required = !1;
+      super(...arguments), this._required = (v(this, a), !1);
     }
-    set required(t) {
-      this._required = !!t;
+    /** Whether the component is required. */
+    set required(s) {
+      this._required = !!s;
     }
     get required() {
       return this._required || this.isRequiredExternally();
     }
-    async willUpdate(t) {
-      super.willUpdate(t), t.has("required") && (this.internals.ariaRequired = `${this.required}`);
+    async willUpdate(s) {
+      super.willUpdate(s), s.has("required") && (this.internals.ariaRequired = `${this.required}`);
     }
     /**
      * Will be used as 'or' check to the current required state.
@@ -182,41 +212,42 @@ const M = (n) => {
     isRequiredExternally() {
       return !1;
     }
-  }
-  return q([
-    l({ reflect: !0, type: Boolean })
-  ], s.prototype, "required"), s;
-};
-var U = Object.defineProperty, L = Object.getOwnPropertyDescriptor, m = (n, s, r, t) => {
-  for (var e = t > 1 ? void 0 : t ? L(s, r) : s, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = (t ? a(s, r, e) : a(e)) || e);
-  return t && e && U(s, r, e), e;
-};
-const Q = (n) => {
-  let s = class extends p(M(R(n))) {
-    constructor() {
-      super(), this._attributeMutationBlocked = !1, this._checked = !1, this._handleKeyboardInteraction = (r) => {
-        r.key === " " && this._handleUserInteraction();
-      }, this._handleUserInteraction = () => {
-        var r;
-        this.disabled || ((r = this.withUserInteraction) == null || r.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.dispatchEvent(new CustomEvent("didChange", { bubbles: !0 })));
-      }, this.internals.role = "checkbox";
-    }
-    set checked(r) {
-      const t = typeof r == "object" ? r.attribute : !1;
-      t && (r = r.value), this.hasUpdated && !t && (this._attributeMutationBlocked = !0), this._checked = !!r, this.updateFormValue();
+  }, (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    u = [S({ reflect: !0, type: Boolean })], g(n, null, u, { kind: "setter", name: "required", static: !1, private: !1, access: { has: (m) => "required" in m, set: (m, h) => {
+      m.required = h;
+    } }, metadata: s }, null, a), s && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
+  })(), n;
+})(), te = (r) => (() => {
+  var h;
+  let l = [j({
+    tabindex: "0"
+  })], a, u = [], n, o = D(H(V(r))), s = [], m;
+  return h = class extends o {
+    /** Whether the checkbox is checked. */
+    set checked(e) {
+      const i = typeof e == "object" ? e.attribute : !1;
+      i && (e = e.value), this.hasUpdated && !i && (this._attributeMutationBlocked = !0), this._checked = !!e, this.updateFormValue();
     }
     get checked() {
       return this._checked;
     }
+    constructor() {
+      super(), this._attributeMutationBlocked = (v(this, s), !1), this._checked = !1, this._handleKeyboardInteraction = (e) => {
+        e.key === " " && this._handleUserInteraction();
+      }, this._handleUserInteraction = () => {
+        var e;
+        this.disabled || ((e = this.withUserInteraction) == null || e.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.dispatchEvent(new CustomEvent("didChange", { bubbles: !0 })));
+      }, this.internals.role = "checkbox";
+    }
     connectedCallback() {
-      super.connectedCallback(), this.addEventListener("click", this._handleUserInteraction), this.addEventListener("keydown", f), this.addEventListener("keyup", this._handleKeyboardInteraction);
+      super.connectedCallback(), this.addEventListener("click", this._handleUserInteraction), this.addEventListener("keydown", O), this.addEventListener("keyup", this._handleKeyboardInteraction);
     }
     disconnectedCallback() {
-      super.disconnectedCallback(), this.removeEventListener("click", this._handleUserInteraction), this.removeEventListener("keydown", f), this.removeEventListener("keyup", this._handleKeyboardInteraction);
+      super.disconnectedCallback(), this.removeEventListener("click", this._handleUserInteraction), this.removeEventListener("keydown", O), this.removeEventListener("keyup", this._handleKeyboardInteraction);
     }
-    attributeChangedCallback(r, t, e) {
-      (r !== "checked" || !this._attributeMutationBlocked) && super.attributeChangedCallback(r, t, e);
+    attributeChangedCallback(e, i, d) {
+      (e !== "checked" || !this._attributeMutationBlocked) && super.attributeChangedCallback(e, i, d);
     }
     /**
      * Is called whenever the form is being reset.
@@ -235,51 +266,30 @@ const Q = (n) => {
      *
      * @internal
      */
-    formStateRestoreCallback(r, t) {
-      r && (this.checked = r === "true");
+    formStateRestoreCallback(e, i) {
+      e && (this.checked = e === "true");
     }
     updateFormValue() {
       this.checked ? this.internals.setFormValue(this.value, `${this.checked}`) : this.internals.setFormValue(null);
     }
-  };
-  return m([
-    l({
+  }, n = h, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    m = [S({
       type: Boolean,
       converter: {
-        ...v,
+        ...z,
         // We need to pass information to the setter so that we know it was called by attribute change.
-        fromAttribute: (r, t) => {
-          var i, a;
-          return { value: (a = (i = v).fromAttribute) == null ? void 0 : a.call(i, r, t), attribute: !0 };
+        fromAttribute: (i, d) => {
+          var p, q;
+          return { value: (q = (p = z).fromAttribute) == null ? void 0 : q.call(p, i, d), attribute: !0 };
         }
       }
-    })
-  ], s.prototype, "checked", 1), s = m([
-    k({
-      tabindex: "0"
-    })
-  ], s), s;
-}, I = (n) => {
-  class s extends n {
-    constructor(...t) {
-      var e;
-      if (super(...t), this._hydrationComplete = new Promise(
-        (i) => this._resolveHydration = i
-      ), this._hydrationRequired = !!this.shadowRoot, !this._hydrationRequired)
-        this._resolveHydration(!1);
-      else {
-        const i = (d) => {
-          this._hydrationRequired && d.stopImmediatePropagation();
-        }, a = { capture: !0 }, o = (e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("slot");
-        o != null && o.length && (o.forEach(
-          (d) => d.addEventListener("slotchange", i, a)
-        ), this.hydrationComplete.then(
-          () => o.forEach((d) => {
-            d.removeEventListener("slotchange", i, a), d.assignedNodes().length && d.dispatchEvent(new Event("slotchange", { bubbles: !0 }));
-          })
-        ));
-      }
-    }
+    })], g(h, null, m, { kind: "setter", name: "checked", static: !1, private: !1, access: { has: (i) => "checked" in i, set: (i, d) => {
+      i.checked = d;
+    } }, metadata: e }, null, s), g(null, a = { value: n }, l, { kind: "class", name: n.name, metadata: e }, null, u), n = a.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e }), v(n, u);
+  })(), n;
+})(), F = (r) => {
+  class c extends r {
     /**
      * 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
@@ -295,28 +305,46 @@ const Q = (n) => {
     get hydrationRequired() {
       return this._hydrationRequired;
     }
-    update(t) {
-      super.update(t), this._hydrationRequired && (this._hydrationRequired = !1, this._resolveHydration(!0));
+    constructor(...a) {
+      var u;
+      if (super(...a), this._hydrationComplete = new Promise((n) => this._resolveHydration = n), this._hydrationRequired = !!this.shadowRoot, !this._hydrationRequired)
+        this._resolveHydration(!1);
+      else {
+        const n = (m) => {
+          this._hydrationRequired && m.stopImmediatePropagation();
+        }, o = { capture: !0 }, s = (u = this.shadowRoot) == null ? void 0 : u.querySelectorAll("slot");
+        s != null && s.length && (s.forEach((m) => m.addEventListener("slotchange", n, o)), this.hydrationComplete.then(() => s.forEach((m) => {
+          m.removeEventListener("slotchange", n, o), m.assignedNodes().length && m.dispatchEvent(new Event("slotchange", { bubbles: !0 }));
+        })));
+      }
+    }
+    update(a) {
+      super.update(a), this._hydrationRequired && (this._hydrationRequired = !1, this._resolveHydration(!0));
     }
   }
-  return s;
-};
-var B = Object.defineProperty, N = (n, s, r, t) => {
-  for (var e = void 0, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(s, r, e) || e);
-  return e && B(s, r, e), e;
-};
-const _ = "data-ssr-child-count", g = "li", W = (n) => {
-  class s extends I(n) {
+  return c;
+}, M = "data-ssr-child-count", U = "li", se = (r) => (() => {
+  var o, s;
+  let l = F(r), a, u = [], n = [];
+  return s = class extends l {
     constructor() {
-      super(...arguments), this.listChildren = [], this._handleSlotchange = () => {
-        const t = Array.from(this.children ?? []).filter(
-          (e) => this.listChildLocalNames.includes(e.localName)
-        );
-        t.length === this.listChildren.length && this.listChildren.every((e, i) => t[i] === e) || (this.listChildren.filter((e) => !t.includes(e)).forEach((e) => e.removeAttribute("slot")), this.listChildren = t, this.listChildren.forEach(
-          (e, i) => e.setAttribute("slot", `${g}-${i}`)
-        ), this.removeAttribute(_));
-      };
+      super(...arguments);
+      k(this, o);
+      _(this, o, v(this, u, [])), this._handleSlotchange = (v(this, n), () => {
+        const t = Array.from(this.children ?? []).filter((e) => this.listChildLocalNames.includes(e.localName));
+        t.length === this.listChildren.length && this.listChildren.every((e, i) => t[i] === e) || (this.listChildren.filter((e) => !t.includes(e)).forEach((e) => e.removeAttribute("slot")), this.listChildren = t, this.listChildren.forEach((e, i) => e.setAttribute("slot", `${U}-${i}`)), this.removeAttribute(M));
+      });
+    }
+    /**
+     * A list of children with the defined tag names.
+     * This array is only updated if there is an actual change
+     * to the child elements.
+     */
+    get listChildren() {
+      return x(this, o);
+    }
+    set listChildren(t) {
+      _(this, o, t);
     }
     connectedCallback() {
       var t;
@@ -337,22 +365,20 @@ const _ = "data-ssr-child-count", g = "li", W = (n) => {
      */
     renderList(t = {}, e = {}) {
       const i = this.listSlotEntries(e);
-      return i.length >= 2 ? b`
+      return i.length >= 2 ? E`
           <ul
             class=${t.class || this.localName}
-            aria-label=${t.ariaLabel || c}
-            aria-labelledby=${t.ariaLabelledby || c}
+            aria-label=${t.ariaLabel || I}
+            aria-labelledby=${t.ariaLabelledby || I}
           >
-            ${i.map(
-        (a) => b`
-                <li aria-hidden=${a.ariaHidden || c}>
-                  <slot name=${a.name}></slot>
+            ${i.map((d) => E`
+                <li aria-hidden=${d.ariaHidden || I}>
+                  <slot name=${d.name}></slot>
                 </li>
-              `
-      )}
+              `)}
           </ul>
           ${this.renderHiddenSlot()}
-        ` : i.length === 1 ? b`<sbb-screen-reader-only>${t.ariaLabel}</sbb-screen-reader-only>
+        ` : i.length === 1 ? E`<sbb-screen-reader-only>${t.ariaLabel}</sbb-screen-reader-only>
           <span class=${t.class || this.localName}>
             <span><slot name=${i[0].name}></slot></span>
           </span>
@@ -368,11 +394,11 @@ const _ = "data-ssr-child-count", g = "li", W = (n) => {
      * 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(_) ?? 0) })).map((i, a) => {
-        var o;
+      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(M) ?? 0) })).map((i, d) => {
+        var b;
         return {
-          name: `${g}-${a}`,
-          ariaHidden: ((o = t == null ? void 0 : t.localNameVisualOnly) == null ? void 0 : o.includes(i.localName)) ?? !1
+          name: `${U}-${d}`,
+          ariaHidden: ((b = t == null ? void 0 : t.localNameVisualOnly) == null ? void 0 : b.includes(i.localName)) ?? !1
         };
       });
     }
@@ -382,87 +408,114 @@ const _ = "data-ssr-child-count", g = "li", W = (n) => {
      * the slotchange event, which can be used to assign it to the appropriate named slot.
      */
     renderHiddenSlot() {
-      return b`<span hidden><slot></slot></span>`;
-    }
-  }
-  return N([
-    y()
-  ], s.prototype, "listChildren"), s;
-};
-var V = Object.defineProperty, j = (n, s, r, t) => {
-  for (var e = void 0, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(s, r, e) || e);
-  return e && V(s, r, e), e;
-};
-const Y = (n) => {
-  class s extends n {
+      return E`<span hidden><slot></slot></span>`;
+    }
+  }, o = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    a = [L()], g(s, null, a, { kind: "accessor", name: "listChildren", static: !1, private: !1, access: { has: (e) => "listChildren" in e, get: (e) => e.listChildren, set: (e, i) => {
+      e.listChildren = i;
+    } }, metadata: t }, u, n), t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), s;
+})(), ae = (r) => (() => {
+  var o, s;
+  let l = r, a, u = [], n = [];
+  return s = class extends l {
     constructor() {
-      super(...arguments), this.negative = !1;
-    }
-  }
-  return j([
-    l({ reflect: !0, type: Boolean })
-  ], s.prototype, "negative"), s;
-};
-var H = Object.defineProperty, u = (n, s, r, t) => {
-  for (var e = void 0, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(s, r, e) || e);
-  return e && H(s, r, e), e;
-};
-const Z = (n) => {
-  var t;
-  const s = (t = class extends n {
+      super(...arguments);
+      k(this, o, v(this, u, !1));
+      v(this, n);
+    }
+    /** Negative coloring variant flag. */
+    get negative() {
+      return x(this, o);
+    }
+    set negative(t) {
+      _(this, o, t);
+    }
+  }, o = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    a = [w(), S({ reflect: !0, type: Boolean })], g(s, null, a, { kind: "accessor", name: "negative", static: !1, private: !1, access: { has: (e) => "negative" in e, get: (e) => e.negative, set: (e, i) => {
+      e.negative = i;
+    } }, metadata: t }, u, n), t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), s;
+})(), ie = (r) => (() => {
+  var i, d, b, p;
+  let l = r, a, u = [], n = [], o, s = [], m = [], h, t = [], e = [];
+  return p = class extends l {
     constructor() {
-      super(...arguments), this.color = "white", this.borderless = !1, this._panelConnected = new w(
-        this,
-        t.events.panelConnected,
-        { bubbles: !0 }
-      );
+      super(...arguments);
+      k(this, i);
+      k(this, d);
+      k(this, b);
+      _(this, i, v(this, u, "white")), _(this, d, (v(this, n), v(this, s, !1))), _(this, b, (v(this, m), v(this, t, ""))), this._panelConnected = (v(this, e), new B(this, p.events.panelConnected, { bubbles: !0 }));
+    }
+    /** The background color of the panel. */
+    get color() {
+      return x(this, i);
+    }
+    set color(y) {
+      _(this, i, y);
+    }
+    /** Whether the unselected panel has a border. */
+    get borderless() {
+      return x(this, d);
+    }
+    set borderless(y) {
+      _(this, d, y);
+    }
+    /** @internal used for accessibility label when in expansion panel */
+    get expansionState() {
+      return x(this, b);
+    }
+    set expansionState(y) {
+      _(this, b, y);
     }
     connectedCallback() {
       super.connectedCallback(), this._panelConnected.emit();
     }
-  }, t.events = {
+  }, i = new WeakMap(), d = new WeakMap(), b = new WeakMap(), (() => {
+    const y = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    a = [S()], o = [w(), S({ reflect: !0, type: Boolean })], h = [w(), S()], g(p, null, a, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (f) => "color" in f, get: (f) => f.color, set: (f, C) => {
+      f.color = C;
+    } }, metadata: y }, u, n), g(p, null, o, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (f) => "borderless" in f, get: (f) => f.borderless, set: (f, C) => {
+      f.borderless = C;
+    } }, metadata: y }, s, m), g(p, null, h, { kind: "accessor", name: "expansionState", static: !1, private: !1, access: { has: (f) => "expansionState" in f, get: (f) => f.expansionState, set: (f, C) => {
+      f.expansionState = C;
+    } }, metadata: y }, t, e), y && Object.defineProperty(p, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: y });
+  })(), p.events = {
     panelConnected: "panelConnected"
-  }, t);
-  return u([
-    l()
-  ], s.prototype, "color"), u([
-    l({ reflect: !0, type: Boolean })
-  ], s.prototype, "borderless"), u([
-    l()
-  ], s.prototype, "expansionState"), s;
-}, ee = (n) => {
-  class s extends n {
+  }, p;
+})(), re = (r) => {
+  class c extends r {
     constructor() {
       super(...arguments), this._updatePromise = Promise.resolve(), this._updateResolve = () => {
       };
     }
     startUpdate() {
-      this._updatePromise = new Promise((t) => this._updateResolve = t);
+      this._updatePromise = new Promise((a) => this._updateResolve = a);
     }
     completeUpdate() {
       this._updateResolve();
     }
     async getUpdateComplete() {
-      const t = await super.getUpdateComplete();
-      return await this._updatePromise, t;
+      const a = await super.getUpdateComplete();
+      return await this._updatePromise, a;
     }
   }
-  return s;
-}, te = C`: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-zero-time, 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 c;
+}, ne = N`: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-zero-time, 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 {
-  $ as SbbDisabledInteractiveMixin,
-  p as SbbDisabledMixin,
-  G as SbbDisabledTabIndexActionMixin,
-  J as SbbFocusableDisabledActionMixin,
-  Q as SbbFormAssociatedCheckboxMixin,
-  R as SbbFormAssociatedMixin,
-  I as SbbHydrationMixin,
-  W as SbbNamedSlotListMixin,
-  Y as SbbNegativeMixin,
-  Z as SbbPanelMixin,
-  M as SbbRequiredMixin,
-  ee as SbbUpdateSchedulerMixin,
-  te as panelCommonStyle
+  P as SbbDisabledInteractiveMixin,
+  D as SbbDisabledMixin,
+  Z as SbbDisabledTabIndexActionMixin,
+  ee as SbbFocusableDisabledActionMixin,
+  te as SbbFormAssociatedCheckboxMixin,
+  V as SbbFormAssociatedMixin,
+  F as SbbHydrationMixin,
+  se as SbbNamedSlotListMixin,
+  ae as SbbNegativeMixin,
+  ie as SbbPanelMixin,
+  H as SbbRequiredMixin,
+  re as SbbUpdateSchedulerMixin,
+  ne as panelCommonStyle
 };