@politiet/sheriff-web-components 1.0.2 → 1.1.0

package/dist/sheriff-web-components.js

@@ -3,10 +3,10 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$4 = globalThis, e$7 = t$4.ShadowRoot && (void 0 === t$4.ShadyCSS || t$4.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$1 = Symbol(), o$5 = /* @__PURE__ */ new WeakMap();
+const t$4 = globalThis, e$7 = t$4.ShadowRoot && (void 0 === t$4.ShadyCSS || t$4.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$2 = Symbol(), o$6 = /* @__PURE__ */ new WeakMap();
 let n$3 = class n {
   constructor(t2, e2, o2) {
-    if (this._$cssResult$ = true, o2 !== s$1) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = true, o2 !== s$2) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = t2, this.t = e2;
   }
   get styleSheet() {
@@ -14,7 +14,7 @@ let n$3 = class n {
     const s2 = this.t;
     if (e$7 && void 0 === t2) {
       const e2 = void 0 !== s2 && 1 === s2.length;
-      e2 && (t2 = o$5.get(s2)), void 0 === t2 && ((this.o = t2 = new CSSStyleSheet()).replaceSync(this.cssText), e2 && o$5.set(s2, t2));
+      e2 && (t2 = o$6.get(s2)), void 0 === t2 && ((this.o = t2 = new CSSStyleSheet()).replaceSync(this.cssText), e2 && o$6.set(s2, t2));
     }
     return t2;
   }
@@ -22,13 +22,13 @@ let n$3 = class n {
     return this.cssText;
   }
 };
-const r$5 = (t2) => new n$3("string" == typeof t2 ? t2 : t2 + "", void 0, s$1), i$4 = (t2, ...e2) => {
+const r$4 = (t2) => new n$3("string" == typeof t2 ? t2 : t2 + "", void 0, s$2), i$4 = (t2, ...e2) => {
   const o2 = 1 === t2.length ? t2[0] : e2.reduce((e3, s2, o3) => e3 + ((t3) => {
     if (true === t3._$cssResult$) return t3.cssText;
     if ("number" == typeof t3) return t3;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + t3 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
   })(s2) + t2[o3 + 1], t2[0]);
-  return new n$3(o2, t2, s$1);
+  return new n$3(o2, t2, s$2);
 }, S$1 = (s2, o2) => {
   if (e$7) s2.adoptedStyleSheets = o2.map((t2) => t2 instanceof CSSStyleSheet ? t2 : t2.styleSheet);
   else for (const e2 of o2) {
@@ -38,14 +38,14 @@ const r$5 = (t2) => new n$3("string" == typeof t2 ? t2 : t2 + "", void 0, s$1),
 }, c$2 = e$7 ? (t2) => t2 : (t2) => t2 instanceof CSSStyleSheet ? ((t3) => {
   let e2 = "";
   for (const s2 of t3.cssRules) e2 += s2.cssText;
-  return r$5(e2);
+  return r$4(e2);
 })(t2) : t2;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: i$3, defineProperty: e$6, getOwnPropertyDescriptor: r$4, getOwnPropertyNames: h$1, getOwnPropertySymbols: o$4, getPrototypeOf: n$2 } = Object, a$1 = globalThis, c$1 = a$1.trustedTypes, l$1 = c$1 ? c$1.emptyScript : "", p$1 = a$1.reactiveElementPolyfillSupport, d$1 = (t2, s2) => t2, u$1 = { toAttribute(t2, s2) {
+const { is: i$3, defineProperty: e$6, getOwnPropertyDescriptor: h$1, getOwnPropertyNames: r$3, getOwnPropertySymbols: o$5, getPrototypeOf: n$2 } = Object, a$1 = globalThis, c$1 = a$1.trustedTypes, l$1 = c$1 ? c$1.emptyScript : "", p$1 = a$1.reactiveElementPolyfillSupport, d$1 = (t2, s2) => t2, u$1 = { toAttribute(t2, s2) {
   switch (s2) {
     case Boolean:
       t2 = t2 ? l$1 : null;
@@ -56,53 +56,51 @@ const { is: i$3, defineProperty: e$6, getOwnPropertyDescriptor: r$4, getOwnPrope
   }
   return t2;
 }, fromAttribute(t2, s2) {
-  let i2 = t2;
+  let i3 = t2;
   switch (s2) {
     case Boolean:
-      i2 = null !== t2;
+      i3 = null !== t2;
       break;
     case Number:
-      i2 = null === t2 ? null : Number(t2);
+      i3 = null === t2 ? null : Number(t2);
       break;
     case Object:
     case Array:
       try {
-        i2 = JSON.parse(t2);
+        i3 = JSON.parse(t2);
       } catch (t3) {
-        i2 = null;
+        i3 = null;
       }
   }
-  return i2;
-} }, f$1 = (t2, s2) => !i$3(t2, s2), y$1 = { attribute: true, type: String, converter: u$1, reflect: false, hasChanged: f$1 };
+  return i3;
+} }, f$1 = (t2, s2) => !i$3(t2, s2), b = { attribute: true, type: String, converter: u$1, reflect: false, useDefault: false, hasChanged: f$1 };
 Symbol.metadata ??= Symbol("metadata"), a$1.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
-class b extends HTMLElement {
+let y$1 = class y extends HTMLElement {
   static addInitializer(t2) {
     this._$Ei(), (this.l ??= []).push(t2);
   }
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(t2, s2 = y$1) {
-    if (s2.state && (s2.attribute = false), this._$Ei(), this.elementProperties.set(t2, s2), !s2.noAccessor) {
-      const i2 = Symbol(), r3 = this.getPropertyDescriptor(t2, i2, s2);
-      void 0 !== r3 && e$6(this.prototype, t2, r3);
+  static createProperty(t2, s2 = b) {
+    if (s2.state && (s2.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t2) && ((s2 = Object.create(s2)).wrapped = true), this.elementProperties.set(t2, s2), !s2.noAccessor) {
+      const i3 = Symbol(), h2 = this.getPropertyDescriptor(t2, i3, s2);
+      void 0 !== h2 && e$6(this.prototype, t2, h2);
     }
   }
-  static getPropertyDescriptor(t2, s2, i2) {
-    const { get: e2, set: h2 } = r$4(this.prototype, t2) ?? { get() {
+  static getPropertyDescriptor(t2, s2, i3) {
+    const { get: e2, set: r2 } = h$1(this.prototype, t2) ?? { get() {
       return this[s2];
     }, set(t3) {
       this[s2] = t3;
     } };
-    return { get() {
-      return e2?.call(this);
-    }, set(s3) {
-      const r3 = e2?.call(this);
-      h2.call(this, s3), this.requestUpdate(t2, r3, i2);
+    return { get: e2, set(s3) {
+      const h2 = e2?.call(this);
+      r2?.call(this, s3), this.requestUpdate(t2, h2, i3);
     }, configurable: true, enumerable: true };
   }
   static getPropertyOptions(t2) {
-    return this.elementProperties.get(t2) ?? y$1;
+    return this.elementProperties.get(t2) ?? b;
   }
   static _$Ei() {
     if (this.hasOwnProperty(d$1("elementProperties"))) return;
@@ -112,32 +110,32 @@ class b extends HTMLElement {
   static finalize() {
     if (this.hasOwnProperty(d$1("finalized"))) return;
     if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d$1("properties"))) {
-      const t3 = this.properties, s2 = [...h$1(t3), ...o$4(t3)];
-      for (const i2 of s2) this.createProperty(i2, t3[i2]);
+      const t3 = this.properties, s2 = [...r$3(t3), ...o$5(t3)];
+      for (const i3 of s2) this.createProperty(i3, t3[i3]);
     }
     const t2 = this[Symbol.metadata];
     if (null !== t2) {
       const s2 = litPropertyMetadata.get(t2);
-      if (void 0 !== s2) for (const [t3, i2] of s2) this.elementProperties.set(t3, i2);
+      if (void 0 !== s2) for (const [t3, i3] of s2) this.elementProperties.set(t3, i3);
     }
     this._$Eh = /* @__PURE__ */ new Map();
     for (const [t3, s2] of this.elementProperties) {
-      const i2 = this._$Eu(t3, s2);
-      void 0 !== i2 && this._$Eh.set(i2, t3);
+      const i3 = this._$Eu(t3, s2);
+      void 0 !== i3 && this._$Eh.set(i3, t3);
     }
     this.elementStyles = this.finalizeStyles(this.styles);
   }
   static finalizeStyles(s2) {
-    const i2 = [];
+    const i3 = [];
     if (Array.isArray(s2)) {
       const e2 = new Set(s2.flat(1 / 0).reverse());
-      for (const s3 of e2) i2.unshift(c$2(s3));
-    } else void 0 !== s2 && i2.push(c$2(s2));
-    return i2;
+      for (const s3 of e2) i3.unshift(c$2(s3));
+    } else void 0 !== s2 && i3.push(c$2(s2));
+    return i3;
   }
   static _$Eu(t2, s2) {
-    const i2 = s2.attribute;
-    return false === i2 ? void 0 : "string" == typeof i2 ? i2 : "string" == typeof t2 ? t2.toLowerCase() : void 0;
+    const i3 = s2.attribute;
+    return false === i3 ? void 0 : "string" == typeof i3 ? i3 : "string" == typeof t2 ? t2.toLowerCase() : void 0;
   }
   constructor() {
     super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
@@ -153,7 +151,7 @@ class b extends HTMLElement {
   }
   _$E_() {
     const t2 = /* @__PURE__ */ new Map(), s2 = this.constructor.elementProperties;
-    for (const i2 of s2.keys()) this.hasOwnProperty(i2) && (t2.set(i2, this[i2]), delete this[i2]);
+    for (const i3 of s2.keys()) this.hasOwnProperty(i3) && (t2.set(i3, this[i3]), delete this[i3]);
     t2.size > 0 && (this._$Ep = t2);
   }
   createRenderRoot() {
@@ -168,34 +166,35 @@ class b extends HTMLElement {
   disconnectedCallback() {
     this._$EO?.forEach((t2) => t2.hostDisconnected?.());
   }
-  attributeChangedCallback(t2, s2, i2) {
-    this._$AK(t2, i2);
+  attributeChangedCallback(t2, s2, i3) {
+    this._$AK(t2, i3);
   }
-  _$EC(t2, s2) {
-    const i2 = this.constructor.elementProperties.get(t2), e2 = this.constructor._$Eu(t2, i2);
-    if (void 0 !== e2 && true === i2.reflect) {
-      const r3 = (void 0 !== i2.converter?.toAttribute ? i2.converter : u$1).toAttribute(s2, i2.type);
-      this._$Em = t2, null == r3 ? this.removeAttribute(e2) : this.setAttribute(e2, r3), this._$Em = null;
+  _$ET(t2, s2) {
+    const i3 = this.constructor.elementProperties.get(t2), e2 = this.constructor._$Eu(t2, i3);
+    if (void 0 !== e2 && true === i3.reflect) {
+      const h2 = (void 0 !== i3.converter?.toAttribute ? i3.converter : u$1).toAttribute(s2, i3.type);
+      this._$Em = t2, null == h2 ? this.removeAttribute(e2) : this.setAttribute(e2, h2), this._$Em = null;
     }
   }
   _$AK(t2, s2) {
-    const i2 = this.constructor, e2 = i2._$Eh.get(t2);
+    const i3 = this.constructor, e2 = i3._$Eh.get(t2);
     if (void 0 !== e2 && this._$Em !== e2) {
-      const t3 = i2.getPropertyOptions(e2), r3 = "function" == typeof t3.converter ? { fromAttribute: t3.converter } : void 0 !== t3.converter?.fromAttribute ? t3.converter : u$1;
-      this._$Em = e2, this[e2] = r3.fromAttribute(s2, t3.type), this._$Em = null;
+      const t3 = i3.getPropertyOptions(e2), h2 = "function" == typeof t3.converter ? { fromAttribute: t3.converter } : void 0 !== t3.converter?.fromAttribute ? t3.converter : u$1;
+      this._$Em = e2, this[e2] = h2.fromAttribute(s2, t3.type) ?? this._$Ej?.get(e2) ?? null, this._$Em = null;
     }
   }
-  requestUpdate(t2, s2, i2) {
+  requestUpdate(t2, s2, i3) {
     if (void 0 !== t2) {
-      if (i2 ??= this.constructor.getPropertyOptions(t2), !(i2.hasChanged ?? f$1)(this[t2], s2)) return;
-      this.P(t2, s2, i2);
+      const e2 = this.constructor, h2 = this[t2];
+      if (i3 ??= e2.getPropertyOptions(t2), !((i3.hasChanged ?? f$1)(h2, s2) || i3.useDefault && i3.reflect && h2 === this._$Ej?.get(t2) && !this.hasAttribute(e2._$Eu(t2, i3)))) return;
+      this.C(t2, s2, i3);
     }
-    false === this.isUpdatePending && (this._$ES = this._$ET());
+    false === this.isUpdatePending && (this._$ES = this._$EP());
   }
-  P(t2, s2, i2) {
-    this._$AL.has(t2) || this._$AL.set(t2, s2), true === i2.reflect && this._$Em !== t2 && (this._$Ej ??= /* @__PURE__ */ new Set()).add(t2);
+  C(t2, s2, { useDefault: i3, reflect: e2, wrapped: h2 }, r2) {
+    i3 && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(t2) && (this._$Ej.set(t2, r2 ?? s2 ?? this[t2]), true !== h2 || void 0 !== r2) || (this._$AL.has(t2) || (this.hasUpdated || i3 || (s2 = void 0), this._$AL.set(t2, s2)), true === e2 && this._$Em !== t2 && (this._$Eq ??= /* @__PURE__ */ new Set()).add(t2));
   }
-  async _$ET() {
+  async _$EP() {
     this.isUpdatePending = true;
     try {
       await this._$ES;
@@ -216,14 +215,17 @@ class b extends HTMLElement {
         this._$Ep = void 0;
       }
       const t3 = this.constructor.elementProperties;
-      if (t3.size > 0) for (const [s3, i2] of t3) true !== i2.wrapped || this._$AL.has(s3) || void 0 === this[s3] || this.P(s3, this[s3], i2);
+      if (t3.size > 0) for (const [s3, i3] of t3) {
+        const { wrapped: t4 } = i3, e2 = this[s3];
+        true !== t4 || this._$AL.has(s3) || void 0 === e2 || this.C(s3, void 0, i3, e2);
+      }
     }
     let t2 = false;
     const s2 = this._$AL;
     try {
-      t2 = this.shouldUpdate(s2), t2 ? (this.willUpdate(s2), this._$EO?.forEach((t3) => t3.hostUpdate?.()), this.update(s2)) : this._$EU();
+      t2 = this.shouldUpdate(s2), t2 ? (this.willUpdate(s2), this._$EO?.forEach((t3) => t3.hostUpdate?.()), this.update(s2)) : this._$EM();
     } catch (s3) {
-      throw t2 = false, this._$EU(), s3;
+      throw t2 = false, this._$EM(), s3;
     }
     t2 && this._$AE(s2);
   }
@@ -232,7 +234,7 @@ class b extends HTMLElement {
   _$AE(t2) {
     this._$EO?.forEach((t3) => t3.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t2)), this.updated(t2);
   }
-  _$EU() {
+  _$EM() {
     this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = false;
   }
   get updateComplete() {
@@ -245,40 +247,40 @@ class b extends HTMLElement {
     return true;
   }
   update(t2) {
-    this._$Ej &&= this._$Ej.forEach((t3) => this._$EC(t3, this[t3])), this._$EU();
+    this._$Eq &&= this._$Eq.forEach((t3) => this._$ET(t3, this[t3])), this._$EM();
   }
   updated(t2) {
   }
   firstUpdated(t2) {
   }
-}
-b.elementStyles = [], b.shadowRootOptions = { mode: "open" }, b[d$1("elementProperties")] = /* @__PURE__ */ new Map(), b[d$1("finalized")] = /* @__PURE__ */ new Map(), p$1?.({ ReactiveElement: b }), (a$1.reactiveElementVersions ??= []).push("2.0.4");
+};
+y$1.elementStyles = [], y$1.shadowRootOptions = { mode: "open" }, y$1[d$1("elementProperties")] = /* @__PURE__ */ new Map(), y$1[d$1("finalized")] = /* @__PURE__ */ new Map(), p$1?.({ ReactiveElement: y$1 }), (a$1.reactiveElementVersions ??= []).push("2.1.0");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$3 = globalThis, i$2 = t$3.trustedTypes, s = i$2 ? i$2.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, e$5 = "$lit$", h = `lit$${Math.random().toFixed(9).slice(2)}$`, o$3 = "?" + h, n$1 = `<${o$3}>`, r$3 = document, l = () => r$3.createComment(""), c = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, a = Array.isArray, u = (t2) => a(t2) || "function" == typeof t2?.[Symbol.iterator], d = "[ 	\n\f\r]", f = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v = /-->/g, _ = />/g, m = RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), p = /'/g, g = /"/g, $ = /^(?:script|style|textarea|title)$/i, y = (t2) => (i2, ...s2) => ({ _$litType$: t2, strings: i2, values: s2 }), x = y(1), T = Symbol.for("lit-noChange"), E = Symbol.for("lit-nothing"), A = /* @__PURE__ */ new WeakMap(), C = r$3.createTreeWalker(r$3, 129);
-function P(t2, i2) {
+const t$3 = globalThis, i$2 = t$3.trustedTypes, s$1 = i$2 ? i$2.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, e$5 = "$lit$", h = `lit$${Math.random().toFixed(9).slice(2)}$`, o$4 = "?" + h, n$1 = `<${o$4}>`, r$2 = document, l = () => r$2.createComment(""), c = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, a = Array.isArray, u = (t2) => a(t2) || "function" == typeof t2?.[Symbol.iterator], d = "[ 	\n\f\r]", f = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v = /-->/g, _ = />/g, m = RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), p = /'/g, g = /"/g, $ = /^(?:script|style|textarea|title)$/i, y2 = (t2) => (i3, ...s2) => ({ _$litType$: t2, strings: i3, values: s2 }), x = y2(1), T = Symbol.for("lit-noChange"), E = Symbol.for("lit-nothing"), A = /* @__PURE__ */ new WeakMap(), C = r$2.createTreeWalker(r$2, 129);
+function P(t2, i3) {
   if (!a(t2) || !t2.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return void 0 !== s ? s.createHTML(i2) : i2;
+  return void 0 !== s$1 ? s$1.createHTML(i3) : i3;
 }
-const V = (t2, i2) => {
+const V = (t2, i3) => {
   const s2 = t2.length - 1, o2 = [];
-  let r3, l2 = 2 === i2 ? "<svg>" : 3 === i2 ? "<math>" : "", c2 = f;
-  for (let i3 = 0; i3 < s2; i3++) {
-    const s3 = t2[i3];
-    let a2, u2, d2 = -1, y2 = 0;
-    for (; y2 < s3.length && (c2.lastIndex = y2, u2 = c2.exec(s3), null !== u2); ) y2 = c2.lastIndex, c2 === f ? "!--" === u2[1] ? c2 = v : void 0 !== u2[1] ? c2 = _ : void 0 !== u2[2] ? ($.test(u2[2]) && (r3 = RegExp("</" + u2[2], "g")), c2 = m) : void 0 !== u2[3] && (c2 = m) : c2 === m ? ">" === u2[0] ? (c2 = r3 ?? f, d2 = -1) : void 0 === u2[1] ? d2 = -2 : (d2 = c2.lastIndex - u2[2].length, a2 = u2[1], c2 = void 0 === u2[3] ? m : '"' === u2[3] ? g : p) : c2 === g || c2 === p ? c2 = m : c2 === v || c2 === _ ? c2 = f : (c2 = m, r3 = void 0);
-    const x2 = c2 === m && t2[i3 + 1].startsWith("/>") ? " " : "";
-    l2 += c2 === f ? s3 + n$1 : d2 >= 0 ? (o2.push(a2), s3.slice(0, d2) + e$5 + s3.slice(d2) + h + x2) : s3 + h + (-2 === d2 ? i3 : x2);
-  }
-  return [P(t2, l2 + (t2[s2] || "<?>") + (2 === i2 ? "</svg>" : 3 === i2 ? "</math>" : "")), o2];
+  let r2, l2 = 2 === i3 ? "<svg>" : 3 === i3 ? "<math>" : "", c2 = f;
+  for (let i4 = 0; i4 < s2; i4++) {
+    const s3 = t2[i4];
+    let a2, u2, d2 = -1, y3 = 0;
+    for (; y3 < s3.length && (c2.lastIndex = y3, u2 = c2.exec(s3), null !== u2); ) y3 = c2.lastIndex, c2 === f ? "!--" === u2[1] ? c2 = v : void 0 !== u2[1] ? c2 = _ : void 0 !== u2[2] ? ($.test(u2[2]) && (r2 = RegExp("</" + u2[2], "g")), c2 = m) : void 0 !== u2[3] && (c2 = m) : c2 === m ? ">" === u2[0] ? (c2 = r2 ?? f, d2 = -1) : void 0 === u2[1] ? d2 = -2 : (d2 = c2.lastIndex - u2[2].length, a2 = u2[1], c2 = void 0 === u2[3] ? m : '"' === u2[3] ? g : p) : c2 === g || c2 === p ? c2 = m : c2 === v || c2 === _ ? c2 = f : (c2 = m, r2 = void 0);
+    const x2 = c2 === m && t2[i4 + 1].startsWith("/>") ? " " : "";
+    l2 += c2 === f ? s3 + n$1 : d2 >= 0 ? (o2.push(a2), s3.slice(0, d2) + e$5 + s3.slice(d2) + h + x2) : s3 + h + (-2 === d2 ? i4 : x2);
+  }
+  return [P(t2, l2 + (t2[s2] || "<?>") + (2 === i3 ? "</svg>" : 3 === i3 ? "</math>" : "")), o2];
 };
 class N {
   constructor({ strings: t2, _$litType$: s2 }, n3) {
-    let r3;
+    let r2;
     this.parts = [];
     let c2 = 0, a2 = 0;
     const u2 = t2.length - 1, d2 = this.parts, [f2, v2] = V(t2, s2);
@@ -286,42 +288,42 @@ class N {
       const t3 = this.el.content.firstChild;
       t3.replaceWith(...t3.childNodes);
     }
-    for (; null !== (r3 = C.nextNode()) && d2.length < u2; ) {
-      if (1 === r3.nodeType) {
-        if (r3.hasAttributes()) for (const t3 of r3.getAttributeNames()) if (t3.endsWith(e$5)) {
-          const i2 = v2[a2++], s3 = r3.getAttribute(t3).split(h), e2 = /([.?@])?(.*)/.exec(i2);
-          d2.push({ type: 1, index: c2, name: e2[2], strings: s3, ctor: "." === e2[1] ? H : "?" === e2[1] ? I : "@" === e2[1] ? L : k }), r3.removeAttribute(t3);
-        } else t3.startsWith(h) && (d2.push({ type: 6, index: c2 }), r3.removeAttribute(t3));
-        if ($.test(r3.tagName)) {
-          const t3 = r3.textContent.split(h), s3 = t3.length - 1;
+    for (; null !== (r2 = C.nextNode()) && d2.length < u2; ) {
+      if (1 === r2.nodeType) {
+        if (r2.hasAttributes()) for (const t3 of r2.getAttributeNames()) if (t3.endsWith(e$5)) {
+          const i3 = v2[a2++], s3 = r2.getAttribute(t3).split(h), e2 = /([.?@])?(.*)/.exec(i3);
+          d2.push({ type: 1, index: c2, name: e2[2], strings: s3, ctor: "." === e2[1] ? H : "?" === e2[1] ? I : "@" === e2[1] ? L : k }), r2.removeAttribute(t3);
+        } else t3.startsWith(h) && (d2.push({ type: 6, index: c2 }), r2.removeAttribute(t3));
+        if ($.test(r2.tagName)) {
+          const t3 = r2.textContent.split(h), s3 = t3.length - 1;
           if (s3 > 0) {
-            r3.textContent = i$2 ? i$2.emptyScript : "";
-            for (let i2 = 0; i2 < s3; i2++) r3.append(t3[i2], l()), C.nextNode(), d2.push({ type: 2, index: ++c2 });
-            r3.append(t3[s3], l());
+            r2.textContent = i$2 ? i$2.emptyScript : "";
+            for (let i3 = 0; i3 < s3; i3++) r2.append(t3[i3], l()), C.nextNode(), d2.push({ type: 2, index: ++c2 });
+            r2.append(t3[s3], l());
           }
         }
-      } else if (8 === r3.nodeType) if (r3.data === o$3) d2.push({ type: 2, index: c2 });
+      } else if (8 === r2.nodeType) if (r2.data === o$4) d2.push({ type: 2, index: c2 });
       else {
         let t3 = -1;
-        for (; -1 !== (t3 = r3.data.indexOf(h, t3 + 1)); ) d2.push({ type: 7, index: c2 }), t3 += h.length - 1;
+        for (; -1 !== (t3 = r2.data.indexOf(h, t3 + 1)); ) d2.push({ type: 7, index: c2 }), t3 += h.length - 1;
       }
       c2++;
     }
   }
-  static createElement(t2, i2) {
-    const s2 = r$3.createElement("template");
+  static createElement(t2, i3) {
+    const s2 = r$2.createElement("template");
     return s2.innerHTML = t2, s2;
   }
 }
-function S(t2, i2, s2 = t2, e2) {
-  if (i2 === T) return i2;
+function S(t2, i3, s2 = t2, e2) {
+  if (i3 === T) return i3;
   let h2 = void 0 !== e2 ? s2._$Co?.[e2] : s2._$Cl;
-  const o2 = c(i2) ? void 0 : i2._$litDirective$;
-  return h2?.constructor !== o2 && (h2?._$AO?.(false), void 0 === o2 ? h2 = void 0 : (h2 = new o2(t2), h2._$AT(t2, s2, e2)), void 0 !== e2 ? (s2._$Co ??= [])[e2] = h2 : s2._$Cl = h2), void 0 !== h2 && (i2 = S(t2, h2._$AS(t2, i2.values), h2, e2)), i2;
+  const o2 = c(i3) ? void 0 : i3._$litDirective$;
+  return h2?.constructor !== o2 && (h2?._$AO?.(false), void 0 === o2 ? h2 = void 0 : (h2 = new o2(t2), h2._$AT(t2, s2, e2)), void 0 !== e2 ? (s2._$Co ??= [])[e2] = h2 : s2._$Cl = h2), void 0 !== h2 && (i3 = S(t2, h2._$AS(t2, i3.values), h2, e2)), i3;
 }
 class M {
-  constructor(t2, i2) {
-    this._$AV = [], this._$AN = void 0, this._$AD = t2, this._$AM = i2;
+  constructor(t2, i3) {
+    this._$AV = [], this._$AN = void 0, this._$AD = t2, this._$AM = i3;
   }
   get parentNode() {
     return this._$AM.parentNode;
@@ -330,34 +332,34 @@ class M {
     return this._$AM._$AU;
   }
   u(t2) {
-    const { el: { content: i2 }, parts: s2 } = this._$AD, e2 = (t2?.creationScope ?? r$3).importNode(i2, true);
+    const { el: { content: i3 }, parts: s2 } = this._$AD, e2 = (t2?.creationScope ?? r$2).importNode(i3, true);
     C.currentNode = e2;
     let h2 = C.nextNode(), o2 = 0, n3 = 0, l2 = s2[0];
     for (; void 0 !== l2; ) {
       if (o2 === l2.index) {
-        let i3;
-        2 === l2.type ? i3 = new R(h2, h2.nextSibling, this, t2) : 1 === l2.type ? i3 = new l2.ctor(h2, l2.name, l2.strings, this, t2) : 6 === l2.type && (i3 = new z(h2, this, t2)), this._$AV.push(i3), l2 = s2[++n3];
+        let i4;
+        2 === l2.type ? i4 = new R(h2, h2.nextSibling, this, t2) : 1 === l2.type ? i4 = new l2.ctor(h2, l2.name, l2.strings, this, t2) : 6 === l2.type && (i4 = new z(h2, this, t2)), this._$AV.push(i4), l2 = s2[++n3];
       }
       o2 !== l2?.index && (h2 = C.nextNode(), o2++);
     }
-    return C.currentNode = r$3, e2;
+    return C.currentNode = r$2, e2;
   }
   p(t2) {
-    let i2 = 0;
-    for (const s2 of this._$AV) void 0 !== s2 && (void 0 !== s2.strings ? (s2._$AI(t2, s2, i2), i2 += s2.strings.length - 2) : s2._$AI(t2[i2])), i2++;
+    let i3 = 0;
+    for (const s2 of this._$AV) void 0 !== s2 && (void 0 !== s2.strings ? (s2._$AI(t2, s2, i3), i3 += s2.strings.length - 2) : s2._$AI(t2[i3])), i3++;
   }
 }
 class R {
   get _$AU() {
     return this._$AM?._$AU ?? this._$Cv;
   }
-  constructor(t2, i2, s2, e2) {
-    this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t2, this._$AB = i2, this._$AM = s2, this.options = e2, this._$Cv = e2?.isConnected ?? true;
+  constructor(t2, i3, s2, e2) {
+    this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t2, this._$AB = i3, this._$AM = s2, this.options = e2, this._$Cv = e2?.isConnected ?? true;
   }
   get parentNode() {
     let t2 = this._$AA.parentNode;
-    const i2 = this._$AM;
-    return void 0 !== i2 && 11 === t2?.nodeType && (t2 = i2.parentNode), t2;
+    const i3 = this._$AM;
+    return void 0 !== i3 && 11 === t2?.nodeType && (t2 = i3.parentNode), t2;
   }
   get startNode() {
     return this._$AA;
@@ -365,8 +367,8 @@ class R {
   get endNode() {
     return this._$AB;
   }
-  _$AI(t2, i2 = this) {
-    t2 = S(this, t2, i2), c(t2) ? t2 === E || null == t2 || "" === t2 ? (this._$AH !== E && this._$AR(), this._$AH = E) : t2 !== this._$AH && t2 !== T && this._(t2) : void 0 !== t2._$litType$ ? this.$(t2) : void 0 !== t2.nodeType ? this.T(t2) : u(t2) ? this.k(t2) : this._(t2);
+  _$AI(t2, i3 = this) {
+    t2 = S(this, t2, i3), c(t2) ? t2 === E || null == t2 || "" === t2 ? (this._$AH !== E && this._$AR(), this._$AH = E) : t2 !== this._$AH && t2 !== T && this._(t2) : void 0 !== t2._$litType$ ? this.$(t2) : void 0 !== t2.nodeType ? this.T(t2) : u(t2) ? this.k(t2) : this._(t2);
   }
   O(t2) {
     return this._$AA.parentNode.insertBefore(t2, this._$AB);
@@ -375,31 +377,31 @@ class R {
     this._$AH !== t2 && (this._$AR(), this._$AH = this.O(t2));
   }
   _(t2) {
-    this._$AH !== E && c(this._$AH) ? this._$AA.nextSibling.data = t2 : this.T(r$3.createTextNode(t2)), this._$AH = t2;
+    this._$AH !== E && c(this._$AH) ? this._$AA.nextSibling.data = t2 : this.T(r$2.createTextNode(t2)), this._$AH = t2;
   }
   $(t2) {
-    const { values: i2, _$litType$: s2 } = t2, e2 = "number" == typeof s2 ? this._$AC(t2) : (void 0 === s2.el && (s2.el = N.createElement(P(s2.h, s2.h[0]), this.options)), s2);
-    if (this._$AH?._$AD === e2) this._$AH.p(i2);
+    const { values: i3, _$litType$: s2 } = t2, e2 = "number" == typeof s2 ? this._$AC(t2) : (void 0 === s2.el && (s2.el = N.createElement(P(s2.h, s2.h[0]), this.options)), s2);
+    if (this._$AH?._$AD === e2) this._$AH.p(i3);
     else {
       const t3 = new M(e2, this), s3 = t3.u(this.options);
-      t3.p(i2), this.T(s3), this._$AH = t3;
+      t3.p(i3), this.T(s3), this._$AH = t3;
     }
   }
   _$AC(t2) {
-    let i2 = A.get(t2.strings);
-    return void 0 === i2 && A.set(t2.strings, i2 = new N(t2)), i2;
+    let i3 = A.get(t2.strings);
+    return void 0 === i3 && A.set(t2.strings, i3 = new N(t2)), i3;
   }
   k(t2) {
     a(this._$AH) || (this._$AH = [], this._$AR());
-    const i2 = this._$AH;
+    const i3 = this._$AH;
     let s2, e2 = 0;
-    for (const h2 of t2) e2 === i2.length ? i2.push(s2 = new R(this.O(l()), this.O(l()), this, this.options)) : s2 = i2[e2], s2._$AI(h2), e2++;
-    e2 < i2.length && (this._$AR(s2 && s2._$AB.nextSibling, e2), i2.length = e2);
+    for (const h2 of t2) e2 === i3.length ? i3.push(s2 = new R(this.O(l()), this.O(l()), this, this.options)) : s2 = i3[e2], s2._$AI(h2), e2++;
+    e2 < i3.length && (this._$AR(s2 && s2._$AB.nextSibling, e2), i3.length = e2);
   }
-  _$AR(t2 = this._$AA.nextSibling, i2) {
-    for (this._$AP?.(false, true, i2); t2 && t2 !== this._$AB; ) {
-      const i3 = t2.nextSibling;
-      t2.remove(), t2 = i3;
+  _$AR(t2 = this._$AA.nextSibling, i3) {
+    for (this._$AP?.(false, true, i3); t2 && t2 !== this._$AB; ) {
+      const i4 = t2.nextSibling;
+      t2.remove(), t2 = i4;
     }
   }
   setConnected(t2) {
@@ -413,17 +415,17 @@ class k {
   get _$AU() {
     return this._$AM._$AU;
   }
-  constructor(t2, i2, s2, e2, h2) {
-    this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t2, this.name = i2, this._$AM = e2, this.options = h2, s2.length > 2 || "" !== s2[0] || "" !== s2[1] ? (this._$AH = Array(s2.length - 1).fill(new String()), this.strings = s2) : this._$AH = E;
+  constructor(t2, i3, s2, e2, h2) {
+    this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t2, this.name = i3, this._$AM = e2, this.options = h2, s2.length > 2 || "" !== s2[0] || "" !== s2[1] ? (this._$AH = Array(s2.length - 1).fill(new String()), this.strings = s2) : this._$AH = E;
   }
-  _$AI(t2, i2 = this, s2, e2) {
+  _$AI(t2, i3 = this, s2, e2) {
     const h2 = this.strings;
     let o2 = false;
-    if (void 0 === h2) t2 = S(this, t2, i2, 0), o2 = !c(t2) || t2 !== this._$AH && t2 !== T, o2 && (this._$AH = t2);
+    if (void 0 === h2) t2 = S(this, t2, i3, 0), o2 = !c(t2) || t2 !== this._$AH && t2 !== T, o2 && (this._$AH = t2);
     else {
       const e3 = t2;
-      let n3, r3;
-      for (t2 = h2[0], n3 = 0; n3 < h2.length - 1; n3++) r3 = S(this, e3[s2 + n3], i2, n3), r3 === T && (r3 = this._$AH[n3]), o2 ||= !c(r3) || r3 !== this._$AH[n3], r3 === E ? t2 = E : t2 !== E && (t2 += (r3 ?? "") + h2[n3 + 1]), this._$AH[n3] = r3;
+      let n3, r2;
+      for (t2 = h2[0], n3 = 0; n3 < h2.length - 1; n3++) r2 = S(this, e3[s2 + n3], i3, n3), r2 === T && (r2 = this._$AH[n3]), o2 ||= !c(r2) || r2 !== this._$AH[n3], r2 === E ? t2 = E : t2 !== E && (t2 += (r2 ?? "") + h2[n3 + 1]), this._$AH[n3] = r2;
     }
     o2 && !e2 && this.j(t2);
   }
@@ -448,11 +450,11 @@ class I extends k {
   }
 }
 class L extends k {
-  constructor(t2, i2, s2, e2, h2) {
-    super(t2, i2, s2, e2, h2), this.type = 5;
+  constructor(t2, i3, s2, e2, h2) {
+    super(t2, i3, s2, e2, h2), this.type = 5;
   }
-  _$AI(t2, i2 = this) {
-    if ((t2 = S(this, t2, i2, 0) ?? E) === T) return;
+  _$AI(t2, i3 = this) {
+    if ((t2 = S(this, t2, i3, 0) ?? E) === T) return;
     const s2 = this._$AH, e2 = t2 === E && s2 !== E || t2.capture !== s2.capture || t2.once !== s2.once || t2.passive !== s2.passive, h2 = t2 !== E && (s2 === E || e2);
     e2 && this.element.removeEventListener(this.name, this, s2), h2 && this.element.addEventListener(this.name, this, t2), this._$AH = t2;
   }
@@ -461,8 +463,8 @@ class L extends k {
   }
 }
 class z {
-  constructor(t2, i2, s2) {
-    this.element = t2, this.type = 6, this._$AN = void 0, this._$AM = i2, this.options = s2;
+  constructor(t2, i3, s2) {
+    this.element = t2, this.type = 6, this._$AN = void 0, this._$AM = i3, this.options = s2;
   }
   get _$AU() {
     return this._$AM._$AU;
@@ -472,13 +474,13 @@ class z {
   }
 }
 const j = t$3.litHtmlPolyfillSupport;
-j?.(N, R), (t$3.litHtmlVersions ??= []).push("3.2.1");
-const B = (t2, i2, s2) => {
-  const e2 = s2?.renderBefore ?? i2;
+j?.(N, R), (t$3.litHtmlVersions ??= []).push("3.3.0");
+const B = (t2, i3, s2) => {
+  const e2 = s2?.renderBefore ?? i3;
   let h2 = e2._$litPart$;
   if (void 0 === h2) {
     const t3 = s2?.renderBefore ?? null;
-    e2._$litPart$ = h2 = new R(i2.insertBefore(l(), t3), t3, void 0, s2 ?? {});
+    e2._$litPart$ = h2 = new R(i3.insertBefore(l(), t3), t3, void 0, s2 ?? {});
   }
   return h2._$AI(t2), h2;
 };
@@ -487,7 +489,8 @@ const B = (t2, i2, s2) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-let r$2 = class r extends b {
+const s = globalThis;
+let i$1 = class i extends y$1 {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -496,8 +499,8 @@ let r$2 = class r extends b {
     return this.renderOptions.renderBefore ??= t2.firstChild, t2;
   }
   update(t2) {
-    const s2 = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t2), this._$Do = B(s2, this.renderRoot, this.renderOptions);
+    const r2 = this.render();
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t2), this._$Do = B(r2, this.renderRoot, this.renderOptions);
   }
   connectedCallback() {
     super.connectedCallback(), this._$Do?.setConnected(true);
@@ -509,10 +512,10 @@ let r$2 = class r extends b {
     return T;
   }
 };
-r$2._$litElement$ = true, r$2["finalized"] = true, globalThis.litElementHydrateSupport?.({ LitElement: r$2 });
-const i$1 = globalThis.litElementPolyfillSupport;
-i$1?.({ LitElement: r$2 });
-(globalThis.litElementVersions ??= []).push("4.1.1");
+i$1._$litElement$ = true, i$1["finalized"] = true, s.litElementHydrateSupport?.({ LitElement: i$1 });
+const o$3 = s.litElementPolyfillSupport;
+o$3?.({ LitElement: i$1 });
+(s.litElementVersions ??= []).push("4.2.0");
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -528,31 +531,31 @@ const t$2 = (t2) => (e2, o2) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const o$2 = { attribute: true, type: String, converter: u$1, reflect: false, hasChanged: f$1 }, r$1 = (t2 = o$2, e2, r3) => {
-  const { kind: n3, metadata: i2 } = r3;
-  let s2 = globalThis.litPropertyMetadata.get(i2);
-  if (void 0 === s2 && globalThis.litPropertyMetadata.set(i2, s2 = /* @__PURE__ */ new Map()), s2.set(r3.name, t2), "accessor" === n3) {
-    const { name: o2 } = r3;
-    return { set(r4) {
+const o$2 = { attribute: true, type: String, converter: u$1, reflect: false, hasChanged: f$1 }, r$1 = (t2 = o$2, e2, r2) => {
+  const { kind: n3, metadata: i3 } = r2;
+  let s2 = globalThis.litPropertyMetadata.get(i3);
+  if (void 0 === s2 && globalThis.litPropertyMetadata.set(i3, s2 = /* @__PURE__ */ new Map()), "setter" === n3 && ((t2 = Object.create(t2)).wrapped = true), s2.set(r2.name, t2), "accessor" === n3) {
+    const { name: o2 } = r2;
+    return { set(r3) {
       const n4 = e2.get.call(this);
-      e2.set.call(this, r4), this.requestUpdate(o2, n4, t2);
+      e2.set.call(this, r3), this.requestUpdate(o2, n4, t2);
     }, init(e3) {
-      return void 0 !== e3 && this.P(o2, void 0, t2), e3;
+      return void 0 !== e3 && this.C(o2, void 0, t2, e3), e3;
     } };
   }
   if ("setter" === n3) {
-    const { name: o2 } = r3;
-    return function(r4) {
+    const { name: o2 } = r2;
+    return function(r3) {
       const n4 = this[o2];
-      e2.call(this, r4), this.requestUpdate(o2, n4, t2);
+      e2.call(this, r3), this.requestUpdate(o2, n4, t2);
     };
   }
   throw Error("Unsupported decorator location: " + n3);
 };
 function n2(t2) {
   return (e2, o2) => "object" == typeof o2 ? r$1(t2, e2, o2) : ((t3, e3, o3) => {
-    const r3 = e3.hasOwnProperty(o3);
-    return e3.constructor.createProperty(o3, r3 ? { ...t3, wrapped: true } : t3), r3 ? Object.getOwnPropertyDescriptor(e3, o3) : void 0;
+    const r2 = e3.hasOwnProperty(o3);
+    return e3.constructor.createProperty(o3, t3), r2 ? Object.getOwnPropertyDescriptor(e3, o3) : void 0;
   })(t2, e2, o2);
 }
 /**
@@ -560,8 +563,8 @@ function n2(t2) {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function r2(r3) {
-  return n2({ ...r3, state: true, attribute: false });
+function r(r2) {
+  return n2({ ...r2, state: true, attribute: false });
 }
 /**
  * @license
@@ -574,8 +577,8 @@ const e$4 = (e2, t2, c2) => (c2.configurable = true, c2.enumerable = true, Refle
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function e$3(e2, r3) {
-  return (n3, s2, i2) => {
+function e$3(e2, r2) {
+  return (n3, s2, i3) => {
     const o2 = (t2) => t2.renderRoot?.querySelector(e2) ?? null;
     return e$4(n3, s2, { get() {
       return o2(this);
@@ -588,14 +591,14 @@ function e$3(e2, r3) {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const t$1 = { ATTRIBUTE: 1, CHILD: 2 }, e$2 = (t2) => (...e2) => ({ _$litDirective$: t2, values: e2 });
-class i {
+class i2 {
   constructor(t2) {
   }
   get _$AU() {
     return this._$AM._$AU;
   }
-  _$AT(t2, e2, i2) {
-    this._$Ct = t2, this._$AM = e2, this._$Ci = i2;
+  _$AT(t2, e2, i3) {
+    this._$Ct = t2, this._$AM = e2, this._$Ci = i3;
   }
   _$AS(t2, e2) {
     return this.update(t2, e2);
@@ -609,24 +612,24 @@ class i {
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const e$1 = e$2(class extends i {
+const e$1 = e$2(class extends i2 {
   constructor(t2) {
     if (super(t2), t2.type !== t$1.ATTRIBUTE || "class" !== t2.name || t2.strings?.length > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
   }
   render(t2) {
     return " " + Object.keys(t2).filter((s2) => t2[s2]).join(" ") + " ";
   }
-  update(s2, [i2]) {
+  update(s2, [i3]) {
     if (void 0 === this.st) {
       this.st = /* @__PURE__ */ new Set(), void 0 !== s2.strings && (this.nt = new Set(s2.strings.join(" ").split(/\s/).filter((t2) => "" !== t2)));
-      for (const t2 in i2) i2[t2] && !this.nt?.has(t2) && this.st.add(t2);
-      return this.render(i2);
+      for (const t2 in i3) i3[t2] && !this.nt?.has(t2) && this.st.add(t2);
+      return this.render(i3);
     }
-    const r3 = s2.element.classList;
-    for (const t2 of this.st) t2 in i2 || (r3.remove(t2), this.st.delete(t2));
-    for (const t2 in i2) {
-      const s3 = !!i2[t2];
-      s3 === this.st.has(t2) || this.nt?.has(t2) || (s3 ? (r3.add(t2), this.st.add(t2)) : (r3.remove(t2), this.st.delete(t2)));
+    const r2 = s2.element.classList;
+    for (const t2 of this.st) t2 in i3 || (r2.remove(t2), this.st.delete(t2));
+    for (const t2 in i3) {
+      const s3 = !!i3[t2];
+      s3 === this.st.has(t2) || this.nt?.has(t2) || (s3 ? (r2.add(t2), this.st.add(t2)) : (r2.remove(t2), this.st.delete(t2)));
     }
     return T;
   }
@@ -637,6 +640,13 @@ const e$1 = e$2(class extends i {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const o$1 = (o2) => o2 ?? E;
+function guardedCustomElement(tagName) {
+  return (cls) => {
+    if (!customElements.get(tagName)) {
+      t$2(tagName)(cls);
+    }
+  };
+}
 const styles$h = i$4`
 	:host {
 		--_color-semantic-surface-critical-hover: #b32a23;
@@ -788,13 +798,13 @@ var __defProp$h = Object.defineProperty;
 var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
 var __decorateClass$h = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$h(target, key, result);
   return result;
 };
-let SDSButton = class extends r$2 {
+let SDSButton = class extends i$1 {
   constructor() {
     super();
     this.type = "button";
@@ -916,7 +926,7 @@ __decorateClass$h([
   n2({ type: String, reflect: true })
 ], SDSButton.prototype, "form", 2);
 SDSButton = __decorateClass$h([
-  t$2("sds-button")
+  guardedCustomElement("sds-button")
 ], SDSButton);
 const styles$g = i$4`
 	:host {
@@ -1031,13 +1041,13 @@ var __defProp$g = Object.defineProperty;
 var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
 var __decorateClass$g = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$g(target, key, result);
   return result;
 };
-let SDSCheckbox = class extends r$2 {
+let SDSCheckbox = class extends i$1 {
   constructor() {
     super();
     this.checked = false;
@@ -1050,7 +1060,7 @@ let SDSCheckbox = class extends r$2 {
       if (!this.disabled) {
         const elem = event.target;
         this.checked = elem.checked;
-        this.internals.setFormValue(elem.checked ? elem.value : "");
+        this.internals.setFormValue(elem.checked ? elem.value : null);
         this._validate();
         this.dispatchEvent(
           new CustomEvent("change", {
@@ -1091,16 +1101,8 @@ let SDSCheckbox = class extends r$2 {
     super.connectedCallback();
     this._initialChecked = this.checked;
     this.internals.role = "checkbox";
-    if ("FormDataEvent" in window) {
-      this.internals.form?.addEventListener("formdata", (event) => {
-        if (this.disabled || !this.name || !this.checked) {
-          return;
-        }
-        event.formData.set(this.name, this.value ?? "on");
-      });
-    }
     if (this.checked) {
-      this.internals.setFormValue(this.value ? this.value : "");
+      this.internals.setFormValue(this.value ?? "on");
     }
   }
   firstUpdated(_changedProperties) {
@@ -1115,7 +1117,7 @@ let SDSCheckbox = class extends r$2 {
     if (this.control) {
       this.control.checked = this._initialChecked;
     }
-    const resetValue = this.checked && this.value ? this.value : "";
+    const resetValue = this.checked ? this.value ?? "on" : null;
     this.internals.setFormValue(resetValue);
     this._validate();
   }
@@ -1144,6 +1146,9 @@ let SDSCheckbox = class extends r$2 {
       this._validate();
     }
   }
+  get type() {
+    return "checkbox";
+  }
   render() {
     const checkboxClasses = {
       "sds-checkbox": true,
@@ -1202,7 +1207,7 @@ __decorateClass$g([
   e$3("#control")
 ], SDSCheckbox.prototype, "control", 2);
 SDSCheckbox = __decorateClass$g([
-  t$2("sds-checkbox")
+  guardedCustomElement("sds-checkbox")
 ], SDSCheckbox);
 const styles$f = i$4`
 	:host {
@@ -1259,17 +1264,17 @@ const styles$f = i$4`
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class e extends i {
-  constructor(i2) {
-    if (super(i2), this.it = E, i2.type !== t$1.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
-  }
-  render(r3) {
-    if (r3 === E || null == r3) return this._t = void 0, this.it = r3;
-    if (r3 === T) return r3;
-    if ("string" != typeof r3) throw Error(this.constructor.directiveName + "() called with a non-string value");
-    if (r3 === this.it) return this._t;
-    this.it = r3;
-    const s2 = [r3];
+class e extends i2 {
+  constructor(i3) {
+    if (super(i3), this.it = E, i3.type !== t$1.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+  }
+  render(r2) {
+    if (r2 === E || null == r2) return this._t = void 0, this.it = r2;
+    if (r2 === T) return r2;
+    if ("string" != typeof r2) throw Error(this.constructor.directiveName + "() called with a non-string value");
+    if (r2 === this.it) return this._t;
+    this.it = r2;
+    const s2 = [r2];
     return s2.raw = s2, this._t = { _$litType$: this.constructor.resultType, strings: s2, values: [] };
   }
 }
@@ -1346,13 +1351,13 @@ var __defProp$f = Object.defineProperty;
 var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
 var __decorateClass$f = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$f(target, key, result);
   return result;
 };
-let SDSIcon = class extends r$2 {
+let SDSIcon = class extends i$1 {
   constructor() {
     super(...arguments);
     this.name = "";
@@ -1416,22 +1421,22 @@ __decorateClass$f([
   n2({ type: String, reflect: true })
 ], SDSIcon.prototype, "label", 2);
 __decorateClass$f([
-  r2()
+  r()
 ], SDSIcon.prototype, "svg", 2);
 SDSIcon = __decorateClass$f([
-  t$2("sds-icon")
+  guardedCustomElement("sds-icon")
 ], SDSIcon);
 var __defProp$e = Object.defineProperty;
 var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
 var __decorateClass$e = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$e(target, key, result);
   return result;
 };
-let SDSCheckboxGroup = class extends r$2 {
+let SDSCheckboxGroup = class extends i$1 {
   constructor() {
     super(...arguments);
     this._selectedValues = [];
@@ -1486,10 +1491,10 @@ __decorateClass$e([
   n2({ type: String, attribute: "error-message", reflect: true })
 ], SDSCheckboxGroup.prototype, "errorMessage", 2);
 __decorateClass$e([
-  r2()
+  r()
 ], SDSCheckboxGroup.prototype, "_selectedValues", 2);
 SDSCheckboxGroup = __decorateClass$e([
-  t$2("sds-checkbox-group")
+  guardedCustomElement("sds-checkbox-group")
 ], SDSCheckboxGroup);
 const styles$d = i$4`
 	.sds-chip {
@@ -1509,32 +1514,29 @@ const styles$d = i$4`
 		line-height: 1.25;
 		text-align: center;
 
-		user-select: none;
+		user-select: text;
 		cursor: pointer;
 
-		&:has(input[type='checkbox']:checked) {
+		&:has(:checked) {
 			background-color: var(--sds-color-semantic-surface-action-default);
 			border-color: var(--sds-color-semantic-surface-action-default);
 			color: var(--sds-color-semantic-text-on-action);
 		}
 
-		&:has(
-				input[type='checkbox'][disabled],
-				input[type='checkbox']:checked[disabled]
-			) {
+		&:has(input[type='checkbox'][disabled], input[type='checkbox']:checked[disabled]) {
 			background-color: var(--sds-color-semantic-surface-disabled);
 			border: 2px solid var(--sds-color-semantic-surface-disabled);
 			color: var(--sds-color-semantic-text-disabled);
 			cursor: not-allowed;
 		}
 
-		&:hover {
+		&:not(:has([readonly])):hover {
 			background-color: var(--sds-color-semantic-surface-action-hover);
 			border-color: var(--sds-color-semantic-surface-action-hover);
 			color: var(--sds-color-semantic-text-on-action);
 		}
 
-		&:active {
+		&:not(:has([readonly])):active {
 			background-color: var(--sds-color-semantic-surface-action-active);
 			border: 2px solid var(--sds-color-semantic-surface-action-active);
 		}
@@ -1545,6 +1547,10 @@ const styles$d = i$4`
 			outline-offset: 2px;
 		}
 
+		&:has([readonly]) {
+			cursor: default;
+		}
+
 		&.sds-chip--small {
 			font-size: 0.875rem;
 			line-height: 1.125rem;
@@ -1569,23 +1575,25 @@ var __defProp$d = Object.defineProperty;
 var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
 var __decorateClass$d = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$d(target, key, result);
   return result;
 };
-let SDSChip = class extends r$2 {
+let SDSChip = class extends i$1 {
   constructor() {
     super();
     this.variant = "selectable";
     this.size = "large";
     this.checked = false;
     this.disabled = false;
+    this.readonly = false;
     this._initialChecked = false;
     this._toggle = (event) => {
       event.preventDefault();
       event.stopImmediatePropagation();
+      if (this.disabled || this.readonly) return;
       this.checked = !this.checked;
       this.internals.setFormValue(this.checked && this.value ? this.value : "");
       this.dispatchEvent(
@@ -1596,6 +1604,7 @@ let SDSChip = class extends r$2 {
       );
     };
     this._remove = () => {
+      if (this.disabled || this.readonly) return;
       this.dispatchEvent(
         new CustomEvent("sds-remove", {
           bubbles: true,
@@ -1633,7 +1642,7 @@ let SDSChip = class extends r$2 {
       "sds-chip": true,
       "sds-chip--small": this.size === "small"
     };
-    if (this.variant === "removable") {
+    if (this.variant === "removable" && !this.readonly) {
       return x`<button class="${e$1(chipClasses)}" @click=${this._remove}>
 				<slot></slot>
 				<sds-icon name="close-material-outlined" size="s"></sds-icon>
@@ -1647,6 +1656,7 @@ let SDSChip = class extends r$2 {
 				value="${o$1(this.value)}"
 				?checked="${this.checked}"
 				?disabled="${this.disabled}"
+				?readonly="${this.readonly}"
 			/>
 			<slot></slot>
 		</label>`;
@@ -1672,11 +1682,14 @@ __decorateClass$d([
 __decorateClass$d([
   n2({ type: Boolean, reflect: true })
 ], SDSChip.prototype, "disabled", 2);
+__decorateClass$d([
+  n2({ type: Boolean, reflect: true })
+], SDSChip.prototype, "readonly", 2);
 __decorateClass$d([
   e$3("#control")
 ], SDSChip.prototype, "control", 2);
 SDSChip = __decorateClass$d([
-  t$2("sds-chip")
+  guardedCustomElement("sds-chip")
 ], SDSChip);
 const styles$c = i$4`
 	:host {
@@ -1705,13 +1718,13 @@ var __defProp$c = Object.defineProperty;
 var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
 var __decorateClass$c = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$c(target, key, result);
   return result;
 };
-let SDSDetail = class extends r$2 {
+let SDSDetail = class extends i$1 {
   constructor() {
     super(...arguments);
     this.variation = "text";
@@ -1731,7 +1744,7 @@ __decorateClass$c([
   n2({ type: String })
 ], SDSDetail.prototype, "variation", 2);
 SDSDetail = __decorateClass$c([
-  t$2("sds-detail")
+  guardedCustomElement("sds-detail")
 ], SDSDetail);
 const styles$b = i$4`
 	:host {
@@ -1840,13 +1853,13 @@ var __defProp$b = Object.defineProperty;
 var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
 var __decorateClass$b = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$b(target, key, result);
   return result;
 };
-let SDSHeading = class extends r$2 {
+let SDSHeading = class extends i$1 {
   constructor() {
     super(...arguments);
     this.level = "h1";
@@ -1887,7 +1900,7 @@ __decorateClass$b([
   n2({ type: String })
 ], SDSHeading.prototype, "as", 2);
 SDSHeading = __decorateClass$b([
-  t$2("sds-heading")
+  guardedCustomElement("sds-heading")
 ], SDSHeading);
 const styles$a = i$4`
 	:host {
@@ -1922,13 +1935,13 @@ var __defProp$a = Object.defineProperty;
 var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
 var __decorateClass$a = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$a(target, key, result);
   return result;
 };
-let SDSLabel = class extends r$2 {
+let SDSLabel = class extends i$1 {
   constructor() {
     super(...arguments);
     this.size = "l";
@@ -1952,7 +1965,7 @@ __decorateClass$a([
   n2({ type: String })
 ], SDSLabel.prototype, "for", 2);
 SDSLabel = __decorateClass$a([
-  t$2("sds-label")
+  guardedCustomElement("sds-label")
 ], SDSLabel);
 const styles$9 = i$4`
 	:host {
@@ -2030,13 +2043,13 @@ var __defProp$9 = Object.defineProperty;
 var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
 var __decorateClass$9 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$9(target, key, result);
   return result;
 };
-let SDSLink = class extends r$2 {
+let SDSLink = class extends i$1 {
   constructor() {
     super(...arguments);
     this.size = "m";
@@ -2065,7 +2078,7 @@ __decorateClass$9([
   n2({ type: String })
 ], SDSLink.prototype, "target", 2);
 SDSLink = __decorateClass$9([
-  t$2("sds-link")
+  guardedCustomElement("sds-link")
 ], SDSLink);
 const styles$8 = i$4`
 	:host {
@@ -2108,13 +2121,13 @@ var __defProp$8 = Object.defineProperty;
 var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
 var __decorateClass$8 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$8(target, key, result);
   return result;
 };
-let SDSLoader = class extends r$2 {
+let SDSLoader = class extends i$1 {
   constructor() {
     super(...arguments);
     this.size = "large";
@@ -2137,7 +2150,7 @@ __decorateClass$8([
   n2({ type: String, reflect: true })
 ], SDSLoader.prototype, "color", 2);
 SDSLoader = __decorateClass$8([
-  t$2("sds-loader")
+  guardedCustomElement("sds-loader")
 ], SDSLoader);
 const styles$7 = i$4`
 	:host {
@@ -2291,13 +2304,13 @@ var __defProp$7 = Object.defineProperty;
 var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
 var __decorateClass$7 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$7(target, key, result);
   return result;
 };
-let SDSNavCard = class extends r$2 {
+let SDSNavCard = class extends i$1 {
   constructor() {
     super(...arguments);
     this.size = "large";
@@ -2374,13 +2387,13 @@ __decorateClass$7([
   n2({ type: String, reflect: true })
 ], SDSNavCard.prototype, "link", 2);
 __decorateClass$7([
-  r2()
+  r()
 ], SDSNavCard.prototype, "hasIcon", 2);
 __decorateClass$7([
   e$3("slot")
 ], SDSNavCard.prototype, "iconSlot", 2);
 SDSNavCard = __decorateClass$7([
-  t$2("sds-nav-card")
+  guardedCustomElement("sds-nav-card")
 ], SDSNavCard);
 const styles$6 = i$4`
 	:host {
@@ -2544,8 +2557,8 @@ var __defProp$6 = Object.defineProperty;
 var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
 var __decorateClass$6 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$6(target, key, result);
   return result;
@@ -2557,7 +2570,7 @@ const notificationIcons = {
   warning: "warning-material-filled",
   critical: "dangerous-material-filled"
 };
-let SDSNotification = class extends r$2 {
+let SDSNotification = class extends i$1 {
   constructor() {
     super(...arguments);
     this.variant = "info";
@@ -2603,7 +2616,7 @@ __decorateClass$6([
   n2({ type: String, attribute: "removable-label", reflect: true })
 ], SDSNotification.prototype, "removableLabel", 2);
 SDSNotification = __decorateClass$6([
-  t$2("sds-notification")
+  guardedCustomElement("sds-notification")
 ], SDSNotification);
 const styles$5 = i$4`
 	:host {
@@ -2644,13 +2657,13 @@ var __defProp$5 = Object.defineProperty;
 var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
 var __decorateClass$5 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$5(target, key, result);
   return result;
 };
-let SDSParagraph = class extends r$2 {
+let SDSParagraph = class extends i$1 {
   constructor() {
     super(...arguments);
     this.size = "xl";
@@ -2671,7 +2684,7 @@ __decorateClass$5([
   n2({ type: String })
 ], SDSParagraph.prototype, "size", 2);
 SDSParagraph = __decorateClass$5([
-  t$2("sds-paragraph")
+  guardedCustomElement("sds-paragraph")
 ], SDSParagraph);
 const styles$4 = i$4`
 	:host {
@@ -2682,7 +2695,7 @@ const styles$4 = i$4`
 		align-items: flex-start;
 		cursor: pointer;
 		color: var(--sds-color-semantic-text-default);
-		display: inline-flex;
+		display: flex;
 		font-family: var(--sds-typography-font-family);
 		font-size: 1rem;
 		font-weight: 400;
@@ -2785,13 +2798,13 @@ var __defProp$4 = Object.defineProperty;
 var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
 var __decorateClass$4 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$4(target, key, result);
   return result;
 };
-let SDSRadio = class extends r$2 {
+let SDSRadio = class extends i$1 {
   constructor() {
     super();
     this.disabled = false;
@@ -2845,6 +2858,12 @@ let SDSRadio = class extends r$2 {
       event.stopImmediatePropagation();
       this.dispatchEvent(new CustomEvent("blur", { bubbles: true, composed: true }));
     };
+    this._handleClick = (event) => {
+      event.stopImmediatePropagation();
+      if (event.currentTarget === event.target && !this.disabled) {
+        this.shadowRoot?.querySelector("input")?.click();
+      }
+    };
     this.internals = this.attachInternals();
     this.attachShadow({ mode: "open", delegatesFocus: true });
   }
@@ -2895,7 +2914,7 @@ let SDSRadio = class extends r$2 {
   formResetCallback() {
     this.checked = this._initialChecked;
     this.control.checked = this._initialChecked;
-    this.internals.setFormValue(this.checked ? this.value ?? "on" : "on");
+    this.internals.setFormValue(this.checked ? this.value ?? "on" : null);
     this._updateGroupValidation();
   }
   updated(changedProperties) {
@@ -2932,7 +2951,7 @@ let SDSRadio = class extends r$2 {
     return this.internals.form;
   }
   get type() {
-    return this.localName;
+    return "radio";
   }
   get validity() {
     return this.internals.validity;
@@ -2975,7 +2994,7 @@ let SDSRadio = class extends r$2 {
       "sds-radio__input--error": Boolean(this.error)
     };
     return x`
-			<div class="${e$1(radioClasses)}">
+			<div class="${e$1(radioClasses)}" @click="${this._handleClick}">
 				<label class="sds-radio__label">
 					<input
 						id="control"
@@ -3026,7 +3045,7 @@ __decorateClass$4([
   e$3("#control")
 ], SDSRadio.prototype, "control", 2);
 SDSRadio = __decorateClass$4([
-  t$2("sds-radio")
+  guardedCustomElement("sds-radio")
 ], SDSRadio);
 const styles$3 = i$4`
 	.sds-radio-group {
@@ -3077,13 +3096,13 @@ var __defProp$3 = Object.defineProperty;
 var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
 var __decorateClass$3 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$3(target, key, result);
   return result;
 };
-let SDSRadioGroup = class extends r$2 {
+let SDSRadioGroup = class extends i$1 {
   constructor() {
     super(...arguments);
     this._selectedValue = null;
@@ -3134,10 +3153,10 @@ __decorateClass$3([
   n2({ type: String, attribute: "error-message" })
 ], SDSRadioGroup.prototype, "errorMessage", 2);
 __decorateClass$3([
-  r2()
+  r()
 ], SDSRadioGroup.prototype, "_selectedValue", 2);
 SDSRadioGroup = __decorateClass$3([
-  t$2("sds-radio-group")
+  guardedCustomElement("sds-radio-group")
 ], SDSRadioGroup);
 const styles$2 = i$4`
 	:host {
@@ -3266,13 +3285,13 @@ var __defProp$2 = Object.defineProperty;
 var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
 var __decorateClass$2 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$2(target, key, result);
   return result;
 };
-let SDSSwitch = class extends r$2 {
+let SDSSwitch = class extends i$1 {
   constructor() {
     super();
     this.disabled = false;
@@ -3396,7 +3415,7 @@ __decorateClass$2([
   e$3("#control")
 ], SDSSwitch.prototype, "control", 2);
 SDSSwitch = __decorateClass$2([
-  t$2("sds-switch")
+  guardedCustomElement("sds-switch")
 ], SDSSwitch);
 const styles$1 = i$4`
 	:host {
@@ -3431,13 +3450,13 @@ var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
 var __decorateClass$1 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$1(target, key, result);
   return result;
 };
-let SDSText = class extends r$2 {
+let SDSText = class extends i$1 {
   constructor() {
     super(...arguments);
     this.size = "l";
@@ -3458,7 +3477,7 @@ __decorateClass$1([
   n2({ type: String })
 ], SDSText.prototype, "size", 2);
 SDSText = __decorateClass$1([
-  t$2("sds-text")
+  guardedCustomElement("sds-text")
 ], SDSText);
 const styles = i$4`
 	:host {
@@ -3578,13 +3597,13 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let SDSTextField = class extends r$2 {
+let SDSTextField = class extends i$1 {
   constructor() {
     super();
     this.type = "text";
@@ -3777,13 +3796,13 @@ __decorateClass([
   n2({ type: Number, reflect: true })
 ], SDSTextField.prototype, "maxlength", 2);
 __decorateClass([
-  r2()
+  r()
 ], SDSTextField.prototype, "hasIcon", 2);
 __decorateClass([
   e$3("#sds-textfield")
 ], SDSTextField.prototype, "control", 2);
 SDSTextField = __decorateClass([
-  t$2("sds-textfield")
+  guardedCustomElement("sds-textfield")
 ], SDSTextField);
 export {
   SDSButton,