@politiet/sheriff-web-components 1.3.5 → 1.3.7

package/dist/sheriff-web-components.js

@@ -1,10 +1,21 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var _a;
+const t$4 = (t2) => (e2, o2) => {
+  void 0 !== o2 ? o2.addInitializer(() => {
+    customElements.define(t2, e2);
+  }) : customElements.define(t2, e2);
+};
 /**
  * @license
  * 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$2 = Symbol(), o$6 = /* @__PURE__ */ new WeakMap();
-let n$3 = class n {
+const t$3 = globalThis, e$7 = t$3.ShadowRoot && (void 0 === t$3.ShadyCSS || t$3.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$2 = Symbol(), o$7 = /* @__PURE__ */ new WeakMap();
+let n$4 = class n {
   constructor(t2, e2, o2) {
     if (this._$cssResult$ = true, o2 !== s$2) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = t2, this.t = e2;
@@ -14,7 +25,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$6.get(s2)), void 0 === t2 && ((this.o = t2 = new CSSStyleSheet()).replaceSync(this.cssText), e2 && o$6.set(s2, t2));
+      e2 && (t2 = o$7.get(s2)), void 0 === t2 && ((this.o = t2 = new CSSStyleSheet()).replaceSync(this.cssText), e2 && o$7.set(s2, t2));
     }
     return t2;
   }
@@ -22,17 +33,17 @@ let n$3 = class n {
     return this.cssText;
   }
 };
-const r$4 = (t2) => new n$3("string" == typeof t2 ? t2 : t2 + "", void 0, s$2), i$4 = (t2, ...e2) => {
+const r$4 = (t2) => new n$4("string" == typeof t2 ? t2 : t2 + "", void 0, s$2), i$5 = (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$2);
+  return new n$4(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) {
-    const o3 = document.createElement("style"), n3 = t$4.litNonce;
+    const o3 = document.createElement("style"), n3 = t$3.litNonce;
     void 0 !== n3 && o3.setAttribute("nonce", n3), o3.textContent = e2.cssText, s2.appendChild(o3);
   }
 }, c$2 = e$7 ? (t2) => t2 : (t2) => t2 instanceof CSSStyleSheet ? ((t3) => {
@@ -45,10 +56,10 @@ const r$4 = (t2) => new n$3("string" == typeof t2 ? t2 : t2 + "", void 0, s$2),
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-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) {
+const { is: i$4, defineProperty: e$6, getOwnPropertyDescriptor: h$1, getOwnPropertyNames: r$3, getOwnPropertySymbols: o$6, getPrototypeOf: n$3 } = Object, a$2 = globalThis, c$1 = a$2.trustedTypes, l$2 = c$1 ? c$1.emptyScript : "", p$1 = a$2.reactiveElementPolyfillSupport, d$1 = (t2, s2) => t2, u$2 = { toAttribute(t2, s2) {
   switch (s2) {
     case Boolean:
-      t2 = t2 ? l$1 : null;
+      t2 = t2 ? l$2 : null;
       break;
     case Object:
     case Array:
@@ -56,25 +67,25 @@ const { is: i$3, defineProperty: e$6, getOwnPropertyDescriptor: h$1, getOwnPrope
   }
   return t2;
 }, fromAttribute(t2, s2) {
-  let i3 = t2;
+  let i4 = t2;
   switch (s2) {
     case Boolean:
-      i3 = null !== t2;
+      i4 = null !== t2;
       break;
     case Number:
-      i3 = null === t2 ? null : Number(t2);
+      i4 = null === t2 ? null : Number(t2);
       break;
     case Object:
     case Array:
       try {
-        i3 = JSON.parse(t2);
+        i4 = JSON.parse(t2);
       } catch (t3) {
-        i3 = null;
+        i4 = null;
       }
   }
-  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();
+  return i4;
+} }, f$1 = (t2, s2) => !i$4(t2, s2), b = { attribute: true, type: String, converter: u$2, reflect: false, useDefault: false, hasChanged: f$1 };
+Symbol.metadata ??= Symbol("metadata"), a$2.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
 let y$1 = class y extends HTMLElement {
   static addInitializer(t2) {
     this._$Ei(), (this.l ??= []).push(t2);
@@ -84,11 +95,11 @@ let y$1 = class y extends HTMLElement {
   }
   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);
+      const i4 = Symbol(), h2 = this.getPropertyDescriptor(t2, i4, s2);
       void 0 !== h2 && e$6(this.prototype, t2, h2);
     }
   }
-  static getPropertyDescriptor(t2, s2, i3) {
+  static getPropertyDescriptor(t2, s2, i4) {
     const { get: e2, set: r2 } = h$1(this.prototype, t2) ?? { get() {
       return this[s2];
     }, set(t3) {
@@ -96,7 +107,7 @@ let y$1 = class y extends HTMLElement {
     } };
     return { get: e2, set(s3) {
       const h2 = e2?.call(this);
-      r2?.call(this, s3), this.requestUpdate(t2, h2, i3);
+      r2?.call(this, s3), this.requestUpdate(t2, h2, i4);
     }, configurable: true, enumerable: true };
   }
   static getPropertyOptions(t2) {
@@ -104,38 +115,38 @@ let y$1 = class y extends HTMLElement {
   }
   static _$Ei() {
     if (this.hasOwnProperty(d$1("elementProperties"))) return;
-    const t2 = n$2(this);
+    const t2 = n$3(this);
     t2.finalize(), void 0 !== t2.l && (this.l = [...t2.l]), this.elementProperties = new Map(t2.elementProperties);
   }
   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 = [...r$3(t3), ...o$5(t3)];
-      for (const i3 of s2) this.createProperty(i3, t3[i3]);
+      const t3 = this.properties, s2 = [...r$3(t3), ...o$6(t3)];
+      for (const i4 of s2) this.createProperty(i4, t3[i4]);
     }
     const t2 = this[Symbol.metadata];
     if (null !== t2) {
       const s2 = litPropertyMetadata.get(t2);
-      if (void 0 !== s2) for (const [t3, i3] of s2) this.elementProperties.set(t3, i3);
+      if (void 0 !== s2) for (const [t3, i4] of s2) this.elementProperties.set(t3, i4);
     }
     this._$Eh = /* @__PURE__ */ new Map();
     for (const [t3, s2] of this.elementProperties) {
-      const i3 = this._$Eu(t3, s2);
-      void 0 !== i3 && this._$Eh.set(i3, t3);
+      const i4 = this._$Eu(t3, s2);
+      void 0 !== i4 && this._$Eh.set(i4, t3);
     }
     this.elementStyles = this.finalizeStyles(this.styles);
   }
   static finalizeStyles(s2) {
-    const i3 = [];
+    const i4 = [];
     if (Array.isArray(s2)) {
       const e2 = new Set(s2.flat(1 / 0).reverse());
-      for (const s3 of e2) i3.unshift(c$2(s3));
-    } else void 0 !== s2 && i3.push(c$2(s2));
-    return i3;
+      for (const s3 of e2) i4.unshift(c$2(s3));
+    } else void 0 !== s2 && i4.push(c$2(s2));
+    return i4;
   }
   static _$Eu(t2, s2) {
-    const i3 = s2.attribute;
-    return false === i3 ? void 0 : "string" == typeof i3 ? i3 : "string" == typeof t2 ? t2.toLowerCase() : void 0;
+    const i4 = s2.attribute;
+    return false === i4 ? void 0 : "string" == typeof i4 ? i4 : "string" == typeof t2 ? t2.toLowerCase() : void 0;
   }
   constructor() {
     super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
@@ -151,7 +162,7 @@ let y$1 = class y extends HTMLElement {
   }
   _$E_() {
     const t2 = /* @__PURE__ */ new Map(), s2 = this.constructor.elementProperties;
-    for (const i3 of s2.keys()) this.hasOwnProperty(i3) && (t2.set(i3, this[i3]), delete this[i3]);
+    for (const i4 of s2.keys()) this.hasOwnProperty(i4) && (t2.set(i4, this[i4]), delete this[i4]);
     t2.size > 0 && (this._$Ep = t2);
   }
   createRenderRoot() {
@@ -166,33 +177,33 @@ let y$1 = class y extends HTMLElement {
   disconnectedCallback() {
     this._$EO?.forEach((t2) => t2.hostDisconnected?.());
   }
-  attributeChangedCallback(t2, s2, i3) {
-    this._$AK(t2, i3);
+  attributeChangedCallback(t2, s2, i4) {
+    this._$AK(t2, i4);
   }
   _$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);
+    const i4 = this.constructor.elementProperties.get(t2), e2 = this.constructor._$Eu(t2, i4);
+    if (void 0 !== e2 && true === i4.reflect) {
+      const h2 = (void 0 !== i4.converter?.toAttribute ? i4.converter : u$2).toAttribute(s2, i4.type);
       this._$Em = t2, null == h2 ? this.removeAttribute(e2) : this.setAttribute(e2, h2), this._$Em = null;
     }
   }
   _$AK(t2, s2) {
-    const i3 = this.constructor, e2 = i3._$Eh.get(t2);
+    const i4 = this.constructor, e2 = i4._$Eh.get(t2);
     if (void 0 !== e2 && this._$Em !== e2) {
-      const t3 = i3.getPropertyOptions(e2), h2 = "function" == typeof t3.converter ? { fromAttribute: t3.converter } : void 0 !== t3.converter?.fromAttribute ? t3.converter : u$1;
+      const t3 = i4.getPropertyOptions(e2), h2 = "function" == typeof t3.converter ? { fromAttribute: t3.converter } : void 0 !== t3.converter?.fromAttribute ? t3.converter : u$2;
       this._$Em = e2, this[e2] = h2.fromAttribute(s2, t3.type) ?? this._$Ej?.get(e2) ?? null, this._$Em = null;
     }
   }
-  requestUpdate(t2, s2, i3) {
+  requestUpdate(t2, s2, i4) {
     if (void 0 !== t2) {
       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);
+      if (i4 ??= e2.getPropertyOptions(t2), !((i4.hasChanged ?? f$1)(h2, s2) || i4.useDefault && i4.reflect && h2 === this._$Ej?.get(t2) && !this.hasAttribute(e2._$Eu(t2, i4)))) return;
+      this.C(t2, s2, i4);
     }
     false === this.isUpdatePending && (this._$ES = this._$EP());
   }
-  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));
+  C(t2, s2, { useDefault: i4, reflect: e2, wrapped: h2 }, r2) {
+    i4 && !(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 || i4 || (s2 = void 0), this._$AL.set(t2, s2)), true === e2 && this._$Em !== t2 && (this._$Eq ??= /* @__PURE__ */ new Set()).add(t2));
   }
   async _$EP() {
     this.isUpdatePending = true;
@@ -215,9 +226,9 @@ let y$1 = class y extends HTMLElement {
         this._$Ep = void 0;
       }
       const t3 = this.constructor.elementProperties;
-      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);
+      if (t3.size > 0) for (const [s3, i4] of t3) {
+        const { wrapped: t4 } = i4, e2 = this[s3];
+        true !== t4 || this._$AL.has(s3) || void 0 === e2 || this.C(s3, void 0, i4, e2);
       }
     }
     let t2 = false;
@@ -254,29 +265,95 @@ let y$1 = class y extends HTMLElement {
   firstUpdated(t2) {
   }
 };
-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");
+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$2.reactiveElementVersions ??= []).push("2.1.0");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const o$5 = { attribute: true, type: String, converter: u$2, reflect: false, hasChanged: f$1 }, r$2 = (t2 = o$5, e2, r2) => {
+  const { kind: n3, metadata: i4 } = r2;
+  let s2 = globalThis.litPropertyMetadata.get(i4);
+  if (void 0 === s2 && globalThis.litPropertyMetadata.set(i4, 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, r3), this.requestUpdate(o2, n4, t2);
+    }, init(e3) {
+      return void 0 !== e3 && this.C(o2, void 0, t2, e3), e3;
+    } };
+  }
+  if ("setter" === n3) {
+    const { name: o2 } = r2;
+    return function(r3) {
+      const n4 = this[o2];
+      e2.call(this, r3), this.requestUpdate(o2, n4, t2);
+    };
+  }
+  throw Error("Unsupported decorator location: " + n3);
+};
+function n$2(t2) {
+  return (e2, o2) => "object" == typeof o2 ? r$2(t2, e2, o2) : ((t3, e3, o3) => {
+    const r2 = e3.hasOwnProperty(o3);
+    return e3.constructor.createProperty(o3, t3), r2 ? Object.getOwnPropertyDescriptor(e3, o3) : void 0;
+  })(t2, e2, o2);
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function r$1(r2) {
+  return n$2({ ...r2, state: true, attribute: false });
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e$5 = (e2, t2, c2) => (c2.configurable = true, c2.enumerable = true, Reflect.decorate && "object" != typeof t2 && Object.defineProperty(e2, t2, c2), c2);
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function e$4(e2, r2) {
+  return (n3, s2, i4) => {
+    const o2 = (t2) => t2.renderRoot?.querySelector(e2) ?? null;
+    return e$5(n3, s2, { get() {
+      return o2(this);
+    } });
+  };
+}
+function guardedCustomElement(tagName) {
+  return (cls) => {
+    if (!customElements.get(tagName)) {
+      t$4(tagName)(cls);
+    }
+  };
+}
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-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$1 ? s$1.createHTML(i3) : i3;
+const t$2 = globalThis, i$3 = t$2.trustedTypes, s$1 = i$3 ? i$3.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, e$3 = "$lit$", h = `lit$${Math.random().toFixed(9).slice(2)}$`, o$4 = "?" + h, n$1 = `<${o$4}>`, r = document, l$1 = () => r.createComment(""), c = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, a$1 = Array.isArray, u$1 = (t2) => a$1(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) => (i4, ...s2) => ({ _$litType$: t2, strings: i4, values: s2 }), x = y2(1), T = Symbol.for("lit-noChange"), E = Symbol.for("lit-nothing"), A = /* @__PURE__ */ new WeakMap(), C = r.createTreeWalker(r, 129);
+function P(t2, i4) {
+  if (!a$1(t2) || !t2.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return void 0 !== s$1 ? s$1.createHTML(i4) : i4;
 }
-const V = (t2, i3) => {
+const V = (t2, i4) => {
   const s2 = t2.length - 1, o2 = [];
-  let r2, l2 = 2 === i3 ? "<svg>" : 3 === i3 ? "<math>" : "", c2 = f;
-  for (let i4 = 0; i4 < s2; i4++) {
-    const s3 = t2[i4];
+  let r2, l2 = 2 === i4 ? "<svg>" : 3 === i4 ? "<math>" : "", c2 = f;
+  for (let i5 = 0; i5 < s2; i5++) {
+    const s3 = t2[i5];
     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);
+    const x2 = c2 === m && t2[i5 + 1].startsWith("/>") ? " " : "";
+    l2 += c2 === f ? s3 + n$1 : d2 >= 0 ? (o2.push(a2), s3.slice(0, d2) + e$3 + s3.slice(d2) + h + x2) : s3 + h + (-2 === d2 ? i5 : x2);
   }
-  return [P(t2, l2 + (t2[s2] || "<?>") + (2 === i3 ? "</svg>" : 3 === i3 ? "</math>" : "")), o2];
+  return [P(t2, l2 + (t2[s2] || "<?>") + (2 === i4 ? "</svg>" : 3 === i4 ? "</math>" : "")), o2];
 };
 class N {
   constructor({ strings: t2, _$litType$: s2 }, n3) {
@@ -290,16 +367,16 @@ class N {
     }
     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);
+        if (r2.hasAttributes()) for (const t3 of r2.getAttributeNames()) if (t3.endsWith(e$3)) {
+          const i4 = v2[a2++], s3 = r2.getAttribute(t3).split(h), e2 = /([.?@])?(.*)/.exec(i4);
           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) {
-            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());
+            r2.textContent = i$3 ? i$3.emptyScript : "";
+            for (let i4 = 0; i4 < s3; i4++) r2.append(t3[i4], l$1()), C.nextNode(), d2.push({ type: 2, index: ++c2 });
+            r2.append(t3[s3], l$1());
           }
         }
       } else if (8 === r2.nodeType) if (r2.data === o$4) d2.push({ type: 2, index: c2 });
@@ -310,20 +387,20 @@ class N {
       c2++;
     }
   }
-  static createElement(t2, i3) {
-    const s2 = r$2.createElement("template");
+  static createElement(t2, i4) {
+    const s2 = r.createElement("template");
     return s2.innerHTML = t2, s2;
   }
 }
-function S(t2, i3, s2 = t2, e2) {
-  if (i3 === T) return i3;
+function S(t2, i4, s2 = t2, e2) {
+  if (i4 === T) return i4;
   let h2 = void 0 !== e2 ? s2._$Co?.[e2] : s2._$Cl;
-  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;
+  const o2 = c(i4) ? void 0 : i4._$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 && (i4 = S(t2, h2._$AS(t2, i4.values), h2, e2)), i4;
 }
 class M {
-  constructor(t2, i3) {
-    this._$AV = [], this._$AN = void 0, this._$AD = t2, this._$AM = i3;
+  constructor(t2, i4) {
+    this._$AV = [], this._$AN = void 0, this._$AD = t2, this._$AM = i4;
   }
   get parentNode() {
     return this._$AM.parentNode;
@@ -332,34 +409,34 @@ class M {
     return this._$AM._$AU;
   }
   u(t2) {
-    const { el: { content: i3 }, parts: s2 } = this._$AD, e2 = (t2?.creationScope ?? r$2).importNode(i3, true);
+    const { el: { content: i4 }, parts: s2 } = this._$AD, e2 = (t2?.creationScope ?? r).importNode(i4, true);
     C.currentNode = e2;
     let h2 = C.nextNode(), o2 = 0, n3 = 0, l2 = s2[0];
     for (; void 0 !== l2; ) {
       if (o2 === l2.index) {
-        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];
+        let i5;
+        2 === l2.type ? i5 = new R(h2, h2.nextSibling, this, t2) : 1 === l2.type ? i5 = new l2.ctor(h2, l2.name, l2.strings, this, t2) : 6 === l2.type && (i5 = new z(h2, this, t2)), this._$AV.push(i5), l2 = s2[++n3];
       }
       o2 !== l2?.index && (h2 = C.nextNode(), o2++);
     }
-    return C.currentNode = r$2, e2;
+    return C.currentNode = r, e2;
   }
   p(t2) {
-    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++;
+    let i4 = 0;
+    for (const s2 of this._$AV) void 0 !== s2 && (void 0 !== s2.strings ? (s2._$AI(t2, s2, i4), i4 += s2.strings.length - 2) : s2._$AI(t2[i4])), i4++;
   }
 }
 class R {
   get _$AU() {
     return this._$AM?._$AU ?? this._$Cv;
   }
-  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;
+  constructor(t2, i4, s2, e2) {
+    this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t2, this._$AB = i4, this._$AM = s2, this.options = e2, this._$Cv = e2?.isConnected ?? true;
   }
   get parentNode() {
     let t2 = this._$AA.parentNode;
-    const i3 = this._$AM;
-    return void 0 !== i3 && 11 === t2?.nodeType && (t2 = i3.parentNode), t2;
+    const i4 = this._$AM;
+    return void 0 !== i4 && 11 === t2?.nodeType && (t2 = i4.parentNode), t2;
   }
   get startNode() {
     return this._$AA;
@@ -367,8 +444,8 @@ class R {
   get endNode() {
     return this._$AB;
   }
-  _$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);
+  _$AI(t2, i4 = this) {
+    t2 = S(this, t2, i4), 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$1(t2) ? this.k(t2) : this._(t2);
   }
   O(t2) {
     return this._$AA.parentNode.insertBefore(t2, this._$AB);
@@ -377,31 +454,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$2.createTextNode(t2)), this._$AH = t2;
+    this._$AH !== E && c(this._$AH) ? this._$AA.nextSibling.data = t2 : this.T(r.createTextNode(t2)), this._$AH = t2;
   }
   $(t2) {
-    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);
+    const { values: i4, _$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(i4);
     else {
       const t3 = new M(e2, this), s3 = t3.u(this.options);
-      t3.p(i3), this.T(s3), this._$AH = t3;
+      t3.p(i4), this.T(s3), this._$AH = t3;
     }
   }
   _$AC(t2) {
-    let i3 = A.get(t2.strings);
-    return void 0 === i3 && A.set(t2.strings, i3 = new N(t2)), i3;
+    let i4 = A.get(t2.strings);
+    return void 0 === i4 && A.set(t2.strings, i4 = new N(t2)), i4;
   }
   k(t2) {
-    a(this._$AH) || (this._$AH = [], this._$AR());
-    const i3 = this._$AH;
+    a$1(this._$AH) || (this._$AH = [], this._$AR());
+    const i4 = this._$AH;
     let s2, e2 = 0;
-    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);
+    for (const h2 of t2) e2 === i4.length ? i4.push(s2 = new R(this.O(l$1()), this.O(l$1()), this, this.options)) : s2 = i4[e2], s2._$AI(h2), e2++;
+    e2 < i4.length && (this._$AR(s2 && s2._$AB.nextSibling, e2), i4.length = e2);
   }
-  _$AR(t2 = this._$AA.nextSibling, i3) {
-    for (this._$AP?.(false, true, i3); t2 && t2 !== this._$AB; ) {
-      const i4 = t2.nextSibling;
-      t2.remove(), t2 = i4;
+  _$AR(t2 = this._$AA.nextSibling, i4) {
+    for (this._$AP?.(false, true, i4); t2 && t2 !== this._$AB; ) {
+      const i5 = t2.nextSibling;
+      t2.remove(), t2 = i5;
     }
   }
   setConnected(t2) {
@@ -415,17 +492,17 @@ class k {
   get _$AU() {
     return this._$AM._$AU;
   }
-  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;
+  constructor(t2, i4, s2, e2, h2) {
+    this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t2, this.name = i4, 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, i3 = this, s2, e2) {
+  _$AI(t2, i4 = this, s2, e2) {
     const h2 = this.strings;
     let o2 = false;
-    if (void 0 === h2) t2 = S(this, t2, i3, 0), o2 = !c(t2) || t2 !== this._$AH && t2 !== T, o2 && (this._$AH = t2);
+    if (void 0 === h2) t2 = S(this, t2, i4, 0), o2 = !c(t2) || t2 !== this._$AH && t2 !== T, o2 && (this._$AH = t2);
     else {
       const e3 = t2;
       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;
+      for (t2 = h2[0], n3 = 0; n3 < h2.length - 1; n3++) r2 = S(this, e3[s2 + n3], i4, 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);
   }
@@ -450,11 +527,11 @@ class I extends k {
   }
 }
 class L extends k {
-  constructor(t2, i3, s2, e2, h2) {
-    super(t2, i3, s2, e2, h2), this.type = 5;
+  constructor(t2, i4, s2, e2, h2) {
+    super(t2, i4, s2, e2, h2), this.type = 5;
   }
-  _$AI(t2, i3 = this) {
-    if ((t2 = S(this, t2, i3, 0) ?? E) === T) return;
+  _$AI(t2, i4 = this) {
+    if ((t2 = S(this, t2, i4, 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;
   }
@@ -463,8 +540,8 @@ class L extends k {
   }
 }
 class z {
-  constructor(t2, i3, s2) {
-    this.element = t2, this.type = 6, this._$AN = void 0, this._$AM = i3, this.options = s2;
+  constructor(t2, i4, s2) {
+    this.element = t2, this.type = 6, this._$AN = void 0, this._$AM = i4, this.options = s2;
   }
   get _$AU() {
     return this._$AM._$AU;
@@ -473,14 +550,14 @@ class z {
     S(this, t2);
   }
 }
-const j = t$3.litHtmlPolyfillSupport;
-j?.(N, R), (t$3.litHtmlVersions ??= []).push("3.3.0");
-const B = (t2, i3, s2) => {
-  const e2 = s2?.renderBefore ?? i3;
+const j = t$2.litHtmlPolyfillSupport;
+j?.(N, R), (t$2.litHtmlVersions ??= []).push("3.3.0");
+const B = (t2, i4, s2) => {
+  const e2 = s2?.renderBefore ?? i4;
   let h2 = e2._$litPart$;
   if (void 0 === h2) {
     const t3 = s2?.renderBefore ?? null;
-    e2._$litPart$ = h2 = new R(i3.insertBefore(l(), t3), t3, void 0, s2 ?? {});
+    e2._$litPart$ = h2 = new R(i4.insertBefore(l$1(), t3), t3, void 0, s2 ?? {});
   }
   return h2._$AI(t2), h2;
 };
@@ -490,7 +567,7 @@ const B = (t2, i3, s2) => {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const s = globalThis;
-let i$1 = class i extends y$1 {
+let i$2 = class i extends y$1 {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -512,93 +589,24 @@ let i$1 = class i extends y$1 {
     return T;
   }
 };
-i$1._$litElement$ = true, i$1["finalized"] = true, s.litElementHydrateSupport?.({ LitElement: i$1 });
+i$2._$litElement$ = true, i$2["finalized"] = true, s.litElementHydrateSupport?.({ LitElement: i$2 });
 const o$3 = s.litElementPolyfillSupport;
-o$3?.({ LitElement: i$1 });
+o$3?.({ LitElement: i$2 });
 (s.litElementVersions ??= []).push("4.2.0");
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t$2 = (t2) => (e2, o2) => {
-  void 0 !== o2 ? o2.addInitializer(() => {
-    customElements.define(t2, e2);
-  }) : customElements.define(t2, e2);
-};
-/**
- * @license
- * 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, 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, r3), this.requestUpdate(o2, n4, t2);
-    }, init(e3) {
-      return void 0 !== e3 && this.C(o2, void 0, t2, e3), e3;
-    } };
-  }
-  if ("setter" === n3) {
-    const { name: o2 } = r2;
-    return function(r3) {
-      const n4 = this[o2];
-      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 r2 = e3.hasOwnProperty(o3);
-    return e3.constructor.createProperty(o3, t3), r2 ? Object.getOwnPropertyDescriptor(e3, o3) : void 0;
-  })(t2, e2, o2);
-}
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-function r(r2) {
-  return n2({ ...r2, state: true, attribute: false });
-}
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const e$4 = (e2, t2, c2) => (c2.configurable = true, c2.enumerable = true, Reflect.decorate && "object" != typeof t2 && Object.defineProperty(e2, t2, c2), c2);
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-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);
-    } });
-  };
-}
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const t$1 = { ATTRIBUTE: 1, CHILD: 2 }, e$2 = (t2) => (...e2) => ({ _$litDirective$: t2, values: e2 });
-class i2 {
+let i$1 = class i2 {
   constructor(t2) {
   }
   get _$AU() {
     return this._$AM._$AU;
   }
-  _$AT(t2, e2, i3) {
-    this._$Ct = t2, this._$AM = e2, this._$Ci = i3;
+  _$AT(t2, e2, i4) {
+    this._$Ct = t2, this._$AM = e2, this._$Ci = i4;
   }
   _$AS(t2, e2) {
     return this.update(t2, e2);
@@ -606,29 +614,29 @@ class i2 {
   update(t2, e2) {
     return this.render(...e2);
   }
-}
+};
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const e$1 = e$2(class extends i2 {
+const e$1 = e$2(class extends i$1 {
   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, [i3]) {
+  update(s2, [i4]) {
     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 i3) i3[t2] && !this.nt?.has(t2) && this.st.add(t2);
-      return this.render(i3);
+      for (const t2 in i4) i4[t2] && !this.nt?.has(t2) && this.st.add(t2);
+      return this.render(i4);
     }
     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];
+    for (const t2 of this.st) t2 in i4 || (r2.remove(t2), this.st.delete(t2));
+    for (const t2 in i4) {
+      const s3 = !!i4[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;
@@ -639,15 +647,8 @@ const e$1 = e$2(class extends i2 {
  * Copyright 2018 Google LLC
  * 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$i = i$4`
+const o$2 = (o2) => o2 ?? E;
+const styles$i = i$5`
 	:host {
 		--_color-semantic-surface-critical-hover: #b32a23;
 		display: inline-block;
@@ -799,16 +800,15 @@ const styles$i = i$4`
 	}
 `;
 var __defProp$i = Object.defineProperty;
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$i = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
-  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$i(target, key, result);
+var __decorateClass$n = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp$i(target, key, result);
   return result;
 };
-let SDSButton = class extends i$1 {
+const _SDSButtonComponent = class _SDSButtonComponent extends i$2 {
   constructor() {
     super();
     this.type = "button";
@@ -894,7 +894,7 @@ let SDSButton = class extends i$1 {
 				id="link"
 				class="${e$1(buttonClasses)}"
 				href="${this.href}"
-				target="${o$1(this.target)}"
+				target="${o$2(this.target)}"
 			>
 				<slot name="before"></slot>
 				<slot></slot>
@@ -904,11 +904,11 @@ let SDSButton = class extends i$1 {
     return x`
 			<button
 				id="control"
-				form="${o$1(this.form)}"
+				form="${o$2(this.form)}"
 				class="${e$1(buttonClasses)}"
 				type="${this.type}"
-				name="${o$1(this.name)}"
-				value="${o$1(this.value)}"
+				name="${o$2(this.name)}"
+				value="${o$2(this.value)}"
 				?disabled="${this.disabled}"
 				@click="${this._handleClick}"
 			>
@@ -919,39 +919,50 @@ let SDSButton = class extends i$1 {
 		`;
   }
 };
-SDSButton.styles = [styles$i];
-SDSButton.formAssociated = true;
-__decorateClass$i([
-  n2({ type: String, reflect: true })
-], SDSButton.prototype, "type", 2);
-__decorateClass$i([
-  n2({ type: String, reflect: true })
-], SDSButton.prototype, "variant", 2);
-__decorateClass$i([
-  n2({ type: String, reflect: true })
-], SDSButton.prototype, "size", 2);
-__decorateClass$i([
-  n2({ type: Boolean, reflect: true })
-], SDSButton.prototype, "disabled", 2);
-__decorateClass$i([
-  n2({ type: String, reflect: true })
-], SDSButton.prototype, "name", 2);
-__decorateClass$i([
-  n2({ type: String, reflect: true })
-], SDSButton.prototype, "value", 2);
-__decorateClass$i([
-  n2({ type: String, reflect: true })
-], SDSButton.prototype, "form", 2);
-__decorateClass$i([
-  n2({ type: String, reflect: true })
-], SDSButton.prototype, "href", 2);
-__decorateClass$i([
-  n2({ type: String, reflect: true })
-], SDSButton.prototype, "target", 2);
-SDSButton = __decorateClass$i([
+_SDSButtonComponent.styles = [styles$i];
+_SDSButtonComponent.formAssociated = true;
+let SDSButtonComponent = _SDSButtonComponent;
+__decorateClass$n([
+  n$2({ type: String, reflect: true })
+], SDSButtonComponent.prototype, "type");
+__decorateClass$n([
+  n$2({ type: String, reflect: true })
+], SDSButtonComponent.prototype, "variant");
+__decorateClass$n([
+  n$2({ type: String, reflect: true })
+], SDSButtonComponent.prototype, "size");
+__decorateClass$n([
+  n$2({ type: Boolean, reflect: true })
+], SDSButtonComponent.prototype, "disabled");
+__decorateClass$n([
+  n$2({ type: String, reflect: true })
+], SDSButtonComponent.prototype, "name");
+__decorateClass$n([
+  n$2({ type: String, reflect: true })
+], SDSButtonComponent.prototype, "value");
+__decorateClass$n([
+  n$2({ type: String, reflect: true })
+], SDSButtonComponent.prototype, "form");
+__decorateClass$n([
+  n$2({ type: String, reflect: true })
+], SDSButtonComponent.prototype, "href");
+__decorateClass$n([
+  n$2({ type: String, reflect: true })
+], SDSButtonComponent.prototype, "target");
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __decorateClass$m = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
+      result = decorator(result) || result;
+  return result;
+};
+let SDSButton = class extends SDSButtonComponent {
+};
+SDSButton = __decorateClass$m([
   guardedCustomElement("sds-button")
 ], SDSButton);
-const styles$h = i$4`
+const styles$h = i$5`
 	:host {
 		flex: 0 0 auto;
 	}
@@ -1062,15 +1073,15 @@ const styles$h = i$4`
 `;
 var __defProp$h = Object.defineProperty;
 var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
+var __decorateClass$l = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
-  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$h(target, key, result);
   return result;
 };
-let SDSCheckbox = class extends i$1 {
+let SDSCheckbox = class extends i$2 {
   constructor() {
     super();
     this.checked = false;
@@ -1187,8 +1198,8 @@ let SDSCheckbox = class extends i$1 {
 					<input
 						id="control"
 						type="checkbox"
-						name="${o$1(this.name)}"
-						value="${o$1(this.value)}"
+						name="${o$2(this.name)}"
+						value="${o$2(this.value)}"
 						.checked="${this.checked}"
 						?checked="${this.checked}"
 						?disabled="${this.disabled}"
@@ -1206,34 +1217,34 @@ let SDSCheckbox = class extends i$1 {
 };
 SDSCheckbox.styles = [styles$h];
 SDSCheckbox.formAssociated = true;
-__decorateClass$h([
-  n2({ type: String, reflect: true })
+__decorateClass$l([
+  n$2({ type: String, reflect: true })
 ], SDSCheckbox.prototype, "name", 2);
-__decorateClass$h([
-  n2({ type: String, reflect: true })
+__decorateClass$l([
+  n$2({ type: String, reflect: true })
 ], SDSCheckbox.prototype, "label", 2);
-__decorateClass$h([
-  n2({ type: String })
+__decorateClass$l([
+  n$2({ type: String })
 ], SDSCheckbox.prototype, "value", 2);
-__decorateClass$h([
-  n2({ type: Boolean, reflect: true })
+__decorateClass$l([
+  n$2({ type: Boolean, reflect: true })
 ], SDSCheckbox.prototype, "checked", 2);
-__decorateClass$h([
-  n2({ type: Boolean, reflect: true })
+__decorateClass$l([
+  n$2({ type: Boolean, reflect: true })
 ], SDSCheckbox.prototype, "disabled", 2);
-__decorateClass$h([
-  n2({ type: Boolean, reflect: true })
+__decorateClass$l([
+  n$2({ type: Boolean, reflect: true })
 ], SDSCheckbox.prototype, "error", 2);
-__decorateClass$h([
-  n2({ type: Boolean, reflect: true })
+__decorateClass$l([
+  n$2({ type: Boolean, reflect: true })
 ], SDSCheckbox.prototype, "required", 2);
-__decorateClass$h([
-  e$3("#control")
+__decorateClass$l([
+  e$4("#control")
 ], SDSCheckbox.prototype, "control", 2);
-SDSCheckbox = __decorateClass$h([
+SDSCheckbox = __decorateClass$l([
   guardedCustomElement("sds-checkbox")
 ], SDSCheckbox);
-const styles$g = i$4`
+const styles$g = i$5`
 	:host {
 		display: block;
 		contain: layout style;
@@ -1288,9 +1299,9 @@ const styles$g = i$4`
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-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");
+class e extends i$1 {
+  constructor(i4) {
+    if (super(i4), this.it = E, i4.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;
@@ -1311,7 +1322,7 @@ e.directiveName = "unsafeHTML", e.resultType = 1;
 class t extends e {
 }
 t.directiveName = "unsafeSVG", t.resultType = 2;
-const o = e$2(t);
+const o$1 = e$2(t);
 const loadLocalIcons = (name) => import(`@politiet/sheriff-icons/dist/assets/${name}.js`).then(({ default: svg }) => {
   return svg;
 }).catch((error) => {
@@ -1358,7 +1369,7 @@ class SDSIconLoader {
     return this.resolver;
   }
 }
-const styles$f = i$4`
+const styles$f = i$5`
 	:host {
 		--icon-size: var(--sds-icon-size-m);
 		display: inline-block;
@@ -1372,16 +1383,15 @@ const styles$f = i$4`
 	}
 `;
 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 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);
+var __decorateClass$k = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp$g(target, key, result);
   return result;
 };
-let SDSIcon = class extends i$1 {
+const _SDSIconComponent = (_a = class extends i$2 {
   constructor() {
     super(...arguments);
     this.name = "";
@@ -1400,11 +1410,11 @@ let SDSIcon = class extends i$1 {
     return x`
 			<div
 				class="sds-icon"
-				role="${o$1(this.label ? "img" : void 0)}"
-				style="${o$1(this.color ? `color:${this.color}` : void 0)}"
-				aria-label="${o$1(this.label)}"
+				role="${o$2(this.label ? "img" : void 0)}"
+				style="${o$2(this.color ? `color:${this.color}` : void 0)}"
+				aria-label="${o$2(this.label)}"
 			>
-				${this.name ? x`<slot aria-hidden="true">${o(this.svg)}</slot>` : x`<slot aria-hidden="true"></slot>`}
+				${this.name ? x`<slot aria-hidden="true">${o$1(this.svg)}</slot>` : x`<slot aria-hidden="true"></slot>`}
 			</div>
 		`;
   }
@@ -1419,7 +1429,7 @@ let SDSIcon = class extends i$1 {
       return;
     }
     const svg = await new Promise((resolve) => {
-      SDSIcon.iconLoader.resolve(this.name, resolve);
+      _a.iconLoader.resolve(this.name, resolve);
     });
     this.svg = svg;
   }
@@ -1429,25 +1439,34 @@ let SDSIcon = class extends i$1 {
       void this.fetchIcon();
     }
   }
+}, _a.styles = [styles$f], _a.iconLoader = new SDSIconLoader(), _a);
+__decorateClass$k([
+  n$2({ type: String, reflect: true })
+], _SDSIconComponent.prototype, "name");
+__decorateClass$k([
+  n$2({ type: String, reflect: true })
+], _SDSIconComponent.prototype, "size");
+__decorateClass$k([
+  n$2({ type: String, reflect: true })
+], _SDSIconComponent.prototype, "color");
+__decorateClass$k([
+  n$2({ type: String, reflect: true })
+], _SDSIconComponent.prototype, "label");
+__decorateClass$k([
+  r$1()
+], _SDSIconComponent.prototype, "svg");
+let SDSIconComponent = _SDSIconComponent;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __decorateClass$j = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
+      result = decorator(result) || result;
+  return result;
 };
-SDSIcon.styles = [styles$f];
-SDSIcon.iconLoader = new SDSIconLoader();
-__decorateClass$g([
-  n2({ type: String, reflect: true })
-], SDSIcon.prototype, "name", 2);
-__decorateClass$g([
-  n2({ type: String, reflect: true })
-], SDSIcon.prototype, "size", 2);
-__decorateClass$g([
-  n2({ type: String, reflect: true })
-], SDSIcon.prototype, "color", 2);
-__decorateClass$g([
-  n2({ type: String, reflect: true })
-], SDSIcon.prototype, "label", 2);
-__decorateClass$g([
-  r()
-], SDSIcon.prototype, "svg", 2);
-SDSIcon = __decorateClass$g([
+let SDSIcon = class extends SDSIconComponent {
+};
+SDSIcon = __decorateClass$j([
   guardedCustomElement("sds-icon")
 ], SDSIcon);
 const renderErrorMessage = (errorMessage, className, disabled = false) => {
@@ -1459,15 +1478,15 @@ const renderErrorMessage = (errorMessage, className, disabled = false) => {
 };
 var __defProp$f = Object.defineProperty;
 var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$f = (decorators, target, key, kind) => {
+var __decorateClass$i = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
-  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$f(target, key, result);
   return result;
 };
-let SDSCheckboxGroup = class extends i$1 {
+let SDSCheckboxGroup = class extends i$2 {
   constructor() {
     super(...arguments);
     this._selectedValues = [];
@@ -1505,22 +1524,22 @@ let SDSCheckboxGroup = class extends i$1 {
   }
 };
 SDSCheckboxGroup.styles = [styles$g];
-__decorateClass$f([
-  n2({ type: String, reflect: true })
+__decorateClass$i([
+  n$2({ type: String, reflect: true })
 ], SDSCheckboxGroup.prototype, "legend", 2);
-__decorateClass$f([
-  n2({ type: String, attribute: "help-text", reflect: true })
+__decorateClass$i([
+  n$2({ type: String, attribute: "help-text", reflect: true })
 ], SDSCheckboxGroup.prototype, "helpText", 2);
-__decorateClass$f([
-  n2({ type: String, attribute: "error-message", reflect: true })
+__decorateClass$i([
+  n$2({ type: String, attribute: "error-message", reflect: true })
 ], SDSCheckboxGroup.prototype, "errorMessage", 2);
-__decorateClass$f([
-  r()
+__decorateClass$i([
+  r$1()
 ], SDSCheckboxGroup.prototype, "_selectedValues", 2);
-SDSCheckboxGroup = __decorateClass$f([
+SDSCheckboxGroup = __decorateClass$i([
   guardedCustomElement("sds-checkbox-group")
 ], SDSCheckboxGroup);
-const styles$e = i$4`
+const styles$e = i$5`
 	.sds-chip {
 		align-items: center;
 		display: inline-flex;
@@ -1597,15 +1616,15 @@ const styles$e = i$4`
 `;
 var __defProp$e = Object.defineProperty;
 var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$e = (decorators, target, key, kind) => {
+var __decorateClass$h = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
-  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$e(target, key, result);
   return result;
 };
-let SDSChip = class extends i$1 {
+let SDSChip = class extends i$2 {
   constructor() {
     super();
     this.variant = "selectable";
@@ -1614,12 +1633,24 @@ let SDSChip = class extends i$1 {
     this.disabled = false;
     this.readonly = false;
     this._initialChecked = false;
+    this._keyup = (event) => {
+      if (event.key !== " " && event.code !== "Space") {
+        return;
+      }
+      this._toggle(event);
+    };
+    this._click = (event) => {
+      this._toggle(event);
+    };
     this._toggle = (event) => {
       event.preventDefault();
       event.stopImmediatePropagation();
-      if (this.disabled || this.readonly) return;
+      if (this.disabled || this.readonly) {
+        return;
+      }
       this.checked = !this.checked;
-      this.internals.setFormValue(this.checked && this.value ? this.value : "");
+      const newFormValue = this.checked ? this.value ?? "" : null;
+      this.internals.setFormValue(newFormValue);
       this.dispatchEvent(
         new CustomEvent("change", {
           bubbles: true,
@@ -1672,12 +1703,12 @@ let SDSChip = class extends i$1 {
 				<sds-icon name="close-material-outlined" size="s"></sds-icon>
 			</button>`;
     }
-    return x`<label class="${e$1(chipClasses)}" @click="${this._toggle}">
+    return x`<label class="${e$1(chipClasses)}" @click="${this._click}" @keyup="${this._keyup}">
 			<input
 				id="control"
 				type="checkbox"
-				name="${o$1(this.name)}"
-				value="${o$1(this.value)}"
+				name="${o$2(this.name)}"
+				value="${o$2(this.value)}"
 				?checked="${this.checked}"
 				.checked="${this.checked}"
 				?disabled="${this.disabled}"
@@ -1689,34 +1720,34 @@ let SDSChip = class extends i$1 {
 };
 SDSChip.styles = [styles$e];
 SDSChip.formAssociated = true;
-__decorateClass$e([
-  n2({ type: String, reflect: true })
+__decorateClass$h([
+  n$2({ type: String, reflect: true })
 ], SDSChip.prototype, "variant", 2);
-__decorateClass$e([
-  n2({ type: String, reflect: true })
+__decorateClass$h([
+  n$2({ type: String, reflect: true })
 ], SDSChip.prototype, "size", 2);
-__decorateClass$e([
-  n2({ type: Boolean, reflect: true })
+__decorateClass$h([
+  n$2({ type: Boolean, reflect: true })
 ], SDSChip.prototype, "checked", 2);
-__decorateClass$e([
-  n2({ type: String, reflect: true })
+__decorateClass$h([
+  n$2({ type: String, reflect: true })
 ], SDSChip.prototype, "name", 2);
-__decorateClass$e([
-  n2({ type: String })
+__decorateClass$h([
+  n$2({ type: String })
 ], SDSChip.prototype, "value", 2);
-__decorateClass$e([
-  n2({ type: Boolean, reflect: true })
+__decorateClass$h([
+  n$2({ type: Boolean, reflect: true })
 ], SDSChip.prototype, "disabled", 2);
-__decorateClass$e([
-  n2({ type: Boolean, reflect: true })
+__decorateClass$h([
+  n$2({ type: Boolean, reflect: true })
 ], SDSChip.prototype, "readonly", 2);
-__decorateClass$e([
-  e$3("#control")
+__decorateClass$h([
+  e$4("#control")
 ], SDSChip.prototype, "control", 2);
-SDSChip = __decorateClass$e([
+SDSChip = __decorateClass$h([
   guardedCustomElement("sds-chip")
 ], SDSChip);
-const styles$d = i$4`
+const styles$d = i$5`
 	:host {
 		display: block;
 	}
@@ -1741,15 +1772,15 @@ const styles$d = i$4`
 `;
 var __defProp$d = Object.defineProperty;
 var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (decorators, target, key, kind) => {
+var __decorateClass$g = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
-  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$d(target, key, result);
   return result;
 };
-let SDSDetail = class extends i$1 {
+let SDSDetail = class extends i$2 {
   constructor() {
     super(...arguments);
     this.variation = "text";
@@ -1765,13 +1796,13 @@ let SDSDetail = class extends i$1 {
   }
 };
 SDSDetail.styles = [styles$d];
-__decorateClass$d([
-  n2({ type: String })
+__decorateClass$g([
+  n$2({ type: String })
 ], SDSDetail.prototype, "variation", 2);
-SDSDetail = __decorateClass$d([
+SDSDetail = __decorateClass$g([
   guardedCustomElement("sds-detail")
 ], SDSDetail);
-const styles$c = i$4`
+const styles$c = i$5`
 	:host {
 		--_heading-text-align: left;
 		display: inline-block;
@@ -1875,16 +1906,15 @@ const styles$c = i$4`
 	}
 `;
 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 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);
+var __decorateClass$f = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp$c(target, key, result);
   return result;
 };
-let SDSHeading = class extends i$1 {
+const _SDSHeadingComponent = class _SDSHeadingComponent extends i$2 {
   constructor() {
     super(...arguments);
     this.level = "h1";
@@ -1917,17 +1947,28 @@ let SDSHeading = class extends i$1 {
     }
   }
 };
-SDSHeading.styles = [styles$c];
-__decorateClass$c([
-  n2({ type: String })
-], SDSHeading.prototype, "level", 2);
-__decorateClass$c([
-  n2({ type: String })
-], SDSHeading.prototype, "as", 2);
-SDSHeading = __decorateClass$c([
+_SDSHeadingComponent.styles = [styles$c];
+let SDSHeadingComponent = _SDSHeadingComponent;
+__decorateClass$f([
+  n$2({ type: String })
+], SDSHeadingComponent.prototype, "level");
+__decorateClass$f([
+  n$2({ type: String })
+], SDSHeadingComponent.prototype, "as");
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __decorateClass$e = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
+      result = decorator(result) || result;
+  return result;
+};
+let SDSHeading = class extends SDSHeadingComponent {
+};
+SDSHeading = __decorateClass$e([
   guardedCustomElement("sds-heading")
 ], SDSHeading);
-const styles$b = i$4`
+const styles$b = i$5`
 	:host {
 		display: block;
 	}
@@ -1958,15 +1999,15 @@ const styles$b = i$4`
 `;
 var __defProp$b = Object.defineProperty;
 var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __decorateClass$b = (decorators, target, key, kind) => {
+var __decorateClass$d = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
-  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$b(target, key, result);
   return result;
 };
-let SDSLabel = class extends i$1 {
+let SDSLabel = class extends i$2 {
   constructor() {
     super(...arguments);
     this.size = "l";
@@ -1979,20 +2020,20 @@ let SDSLabel = class extends i$1 {
       "sds-label--s": this.size === "s"
     };
     const classes = e$1(styleClasses);
-    return x`<label for="${o$1(this.for)}" class=${classes}><slot></slot></label>`;
+    return x`<label for="${o$2(this.for)}" class=${classes}><slot></slot></label>`;
   }
 };
 SDSLabel.styles = [styles$b];
-__decorateClass$b([
-  n2({ type: String })
+__decorateClass$d([
+  n$2({ type: String })
 ], SDSLabel.prototype, "size", 2);
-__decorateClass$b([
-  n2({ type: String })
+__decorateClass$d([
+  n$2({ type: String })
 ], SDSLabel.prototype, "for", 2);
-SDSLabel = __decorateClass$b([
+SDSLabel = __decorateClass$d([
   guardedCustomElement("sds-label")
 ], SDSLabel);
-const styles$a = i$4`
+const styles$a = i$5`
 	:host {
 		display: inline;
 	}
@@ -2066,15 +2107,15 @@ const styles$a = i$4`
 `;
 var __defProp$a = Object.defineProperty;
 var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
+var __decorateClass$c = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
-  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$a(target, key, result);
   return result;
 };
-let SDSLink = class extends i$1 {
+let SDSLink = class extends i$2 {
   constructor() {
     super(...arguments);
     this.size = "m";
@@ -2087,25 +2128,25 @@ let SDSLink = class extends i$1 {
       "sds-link--s": this.size === "s"
     };
     const classes = e$1(styleClasses);
-    return x`<a href="${o$1(this.href)}" target="${o$1(this.target)}" class=${classes}
+    return x`<a href="${o$2(this.href)}" target="${o$2(this.target)}" class=${classes}
 			><slot></slot
 		></a>`;
   }
 };
 SDSLink.styles = [styles$a];
-__decorateClass$a([
-  n2({ type: String })
+__decorateClass$c([
+  n$2({ type: String })
 ], SDSLink.prototype, "href", 2);
-__decorateClass$a([
-  n2({ type: String })
+__decorateClass$c([
+  n$2({ type: String })
 ], SDSLink.prototype, "size", 2);
-__decorateClass$a([
-  n2({ type: String })
+__decorateClass$c([
+  n$2({ type: String })
 ], SDSLink.prototype, "target", 2);
-SDSLink = __decorateClass$a([
+SDSLink = __decorateClass$c([
   guardedCustomElement("sds-link")
 ], SDSLink);
-const styles$9 = i$4`
+const styles$9 = i$5`
 	:host {
 		line-height: 0;
 	}
@@ -2144,15 +2185,15 @@ const styles$9 = i$4`
 `;
 var __defProp$9 = Object.defineProperty;
 var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
+var __decorateClass$b = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
-  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$9(target, key, result);
   return result;
 };
-let SDSLoader = class extends i$1 {
+let SDSLoader = class extends i$2 {
   constructor() {
     super(...arguments);
     this.size = "large";
@@ -2168,16 +2209,16 @@ let SDSLoader = class extends i$1 {
   }
 };
 SDSLoader.styles = [styles$9];
-__decorateClass$9([
-  n2({ type: String, reflect: true })
+__decorateClass$b([
+  n$2({ type: String, reflect: true })
 ], SDSLoader.prototype, "size", 2);
-__decorateClass$9([
-  n2({ type: String, reflect: true })
+__decorateClass$b([
+  n$2({ type: String, reflect: true })
 ], SDSLoader.prototype, "color", 2);
-SDSLoader = __decorateClass$9([
+SDSLoader = __decorateClass$b([
   guardedCustomElement("sds-loader")
 ], SDSLoader);
-const styles$8 = i$4`
+const styles$8 = i$5`
 	:host {
 		display: block;
 		box-sizing: border-box;
@@ -2327,15 +2368,15 @@ const styles$8 = i$4`
 `;
 var __defProp$8 = Object.defineProperty;
 var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
+var __decorateClass$a = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
-  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$8(target, key, result);
   return result;
 };
-let SDSNavCard = class extends i$1 {
+let SDSNavCard = class extends i$2 {
   constructor() {
     super(...arguments);
     this.size = "large";
@@ -2399,28 +2440,54 @@ let SDSNavCard = class extends i$1 {
   }
 };
 SDSNavCard.styles = [styles$8];
-__decorateClass$8([
-  n2({ type: String, reflect: true })
+__decorateClass$a([
+  n$2({ type: String, reflect: true })
 ], SDSNavCard.prototype, "size", 2);
-__decorateClass$8([
-  n2({ type: String, reflect: true })
+__decorateClass$a([
+  n$2({ type: String, reflect: true })
 ], SDSNavCard.prototype, "heading", 2);
-__decorateClass$8([
-  n2({ type: String, reflect: true })
+__decorateClass$a([
+  n$2({ type: String, reflect: true })
 ], SDSNavCard.prototype, "level", 2);
-__decorateClass$8([
-  n2({ type: String, reflect: true })
+__decorateClass$a([
+  n$2({ type: String, reflect: true })
 ], SDSNavCard.prototype, "link", 2);
-__decorateClass$8([
-  r()
+__decorateClass$a([
+  r$1()
 ], SDSNavCard.prototype, "hasIcon", 2);
-__decorateClass$8([
-  e$3("slot")
+__decorateClass$a([
+  e$4("slot")
 ], SDSNavCard.prototype, "iconSlot", 2);
-SDSNavCard = __decorateClass$8([
+SDSNavCard = __decorateClass$a([
   guardedCustomElement("sds-nav-card")
 ], SDSNavCard);
-const styles$7 = i$4`
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const a = Symbol.for(""), o = (t2) => {
+  if (t2?.r === a) return t2?._$litStatic$;
+}, i3 = (t2, ...r2) => ({ _$litStatic$: r2.reduce((r3, e2, a2) => r3 + ((t3) => {
+  if (void 0 !== t3._$litStatic$) return t3._$litStatic$;
+  throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t3}. Use 'unsafeStatic' to pass non-literal values, but
+            take care to ensure page security.`);
+})(e2) + t2[a2 + 1], t2[0]), r: a }), l = /* @__PURE__ */ new Map(), n2 = (t2) => (r2, ...e2) => {
+  const a2 = e2.length;
+  let s2, i4;
+  const n3 = [], u2 = [];
+  let c2, $2 = 0, f2 = false;
+  for (; $2 < a2; ) {
+    for (c2 = r2[$2]; $2 < a2 && void 0 !== (i4 = e2[$2], s2 = o(i4)); ) c2 += s2 + r2[++$2], f2 = true;
+    $2 !== a2 && u2.push(i4), n3.push(c2), $2++;
+  }
+  if ($2 === a2 && n3.push(r2[a2]), f2) {
+    const t3 = n3.join("$$lit$$");
+    void 0 === (r2 = l.get(t3)) && (n3.raw = n3, l.set(t3, r2 = n3)), e2 = u2;
+  }
+  return t2(r2, ...e2);
+}, u = n2(x);
+const styles$7 = i$5`
 	:host {
 		display: block;
 		box-sizing: border-box;
@@ -2579,13 +2646,12 @@ const styles$7 = i$4`
 	}
 `;
 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 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);
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp$7(target, key, result);
   return result;
 };
 const notificationIcons = {
@@ -2595,9 +2661,10 @@ const notificationIcons = {
   warning: "warning-material-filled",
   critical: "dangerous-material-filled"
 };
-let SDSNotification = class extends i$1 {
+const _SDSNotificationComponent = class _SDSNotificationComponent extends i$2 {
   constructor() {
     super(...arguments);
+    this.iconTag = i3`sds-icon`;
     this.variant = "info";
     this._remove = () => {
       this.dispatchEvent(
@@ -2607,6 +2674,9 @@ let SDSNotification = class extends i$1 {
         })
       );
     };
+    this._renderIcon = (iconName, size, cls) => {
+      return u`<${this.iconTag} ${cls ? `class=${cls}` : ""} name="${iconName}" size=${size}></${this.iconTag}>`;
+    };
   }
   render() {
     const notificationClasses = {
@@ -2615,7 +2685,8 @@ let SDSNotification = class extends i$1 {
     };
     return x`<div class="${e$1(notificationClasses)}">
 			<div class="sds-notification__type">
-				<sds-icon class="sds-notification__icon" name="${notificationIcons[this.variant]}" size="m"></sds-icon>
+				<!-- ${u`<${this.iconTag}>Wow</${this.iconTag}>`} -->
+				${this._renderIcon(notificationIcons[this.variant], "m", "sds-notification__icon")}
 			</div>
 			<div class="sds-notification__content">
 				<div class="sds-notification__content-text">
@@ -2627,23 +2698,34 @@ let SDSNotification = class extends i$1 {
 							@click=${this._remove}
 							aria-label="${this.removableLabel}"
 						>
-							<sds-icon name="close-material-outlined" size="s"></sds-icon>
+							${this._renderIcon("close-material-outlined", "s")}
 						</button>` : E}
 			</div>
 		</div>`;
   }
 };
-SDSNotification.styles = [styles$7];
-__decorateClass$7([
-  n2({ type: String, reflect: true })
-], SDSNotification.prototype, "variant", 2);
-__decorateClass$7([
-  n2({ type: String, attribute: "removable-label", reflect: true })
-], SDSNotification.prototype, "removableLabel", 2);
-SDSNotification = __decorateClass$7([
+_SDSNotificationComponent.styles = [styles$7];
+let SDSNotificationComponent = _SDSNotificationComponent;
+__decorateClass$9([
+  n$2({ type: String, reflect: true })
+], SDSNotificationComponent.prototype, "variant");
+__decorateClass$9([
+  n$2({ type: String, attribute: "removable-label", reflect: true })
+], SDSNotificationComponent.prototype, "removableLabel");
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
+      result = decorator(result) || result;
+  return result;
+};
+let SDSNotification = class extends SDSNotificationComponent {
+};
+SDSNotification = __decorateClass$8([
   guardedCustomElement("sds-notification")
 ], SDSNotification);
-const styles$6 = i$4`
+const styles$6 = i$5`
 	:host {
 		display: block;
 	}
@@ -2679,16 +2761,15 @@ const styles$6 = i$4`
 	}
 `;
 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 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);
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp$6(target, key, result);
   return result;
 };
-let SDSParagraph = class extends i$1 {
+const _SDSParagraphComponent = class _SDSParagraphComponent extends i$2 {
   constructor() {
     super(...arguments);
     this.size = "xl";
@@ -2704,14 +2785,25 @@ let SDSParagraph = class extends i$1 {
     return x`<p class=${classes}><slot></slot></p>`;
   }
 };
-SDSParagraph.styles = [styles$6];
-__decorateClass$6([
-  n2({ type: String })
-], SDSParagraph.prototype, "size", 2);
+_SDSParagraphComponent.styles = [styles$6];
+let SDSParagraphComponent = _SDSParagraphComponent;
+__decorateClass$7([
+  n$2({ type: String })
+], SDSParagraphComponent.prototype, "size");
+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 i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
+      result = decorator(result) || result;
+  return result;
+};
+let SDSParagraph = class extends SDSParagraphComponent {
+};
 SDSParagraph = __decorateClass$6([
   guardedCustomElement("sds-paragraph")
 ], SDSParagraph);
-const styles$5 = i$4`
+const styles$5 = i$5`
 	:host {
 		flex: 0 0 auto;
 	}
@@ -2823,13 +2915,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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$5(target, key, result);
   return result;
 };
-let SDSRadio = class extends i$1 {
+let SDSRadio = class extends i$2 {
   constructor() {
     super();
     this.disabled = false;
@@ -3024,8 +3116,8 @@ let SDSRadio = class extends i$1 {
 					<input
 						id="control"
 						type="radio"
-						name="${o$1(this.name)}"
-						value="${o$1(this.value)}"
+						name="${o$2(this.name)}"
+						value="${o$2(this.value)}"
 						.checked="${this.checked}"
 						?checked="${this.checked}"
 						?disabled="${this.disabled}"
@@ -3044,36 +3136,36 @@ let SDSRadio = class extends i$1 {
 SDSRadio.styles = [styles$5];
 SDSRadio.formAssociated = true;
 __decorateClass$5([
-  n2({ type: Boolean, reflect: true })
+  n$2({ type: Boolean, reflect: true })
 ], SDSRadio.prototype, "disabled", 2);
 __decorateClass$5([
-  n2({ type: Boolean, reflect: true })
+  n$2({ type: Boolean, reflect: true })
 ], SDSRadio.prototype, "required", 2);
 __decorateClass$5([
-  n2({ type: String, reflect: true })
+  n$2({ type: String, reflect: true })
 ], SDSRadio.prototype, "label", 2);
 __decorateClass$5([
-  n2({ type: Boolean, reflect: true, attribute: "hide-label" })
+  n$2({ type: Boolean, reflect: true, attribute: "hide-label" })
 ], SDSRadio.prototype, "hideLabel", 2);
 __decorateClass$5([
-  n2({ type: String, reflect: true })
+  n$2({ type: String, reflect: true })
 ], SDSRadio.prototype, "name", 2);
 __decorateClass$5([
-  n2({ type: String })
+  n$2({ type: String })
 ], SDSRadio.prototype, "value", 2);
 __decorateClass$5([
-  n2({ type: Boolean, reflect: true })
+  n$2({ type: Boolean, reflect: true })
 ], SDSRadio.prototype, "checked", 2);
 __decorateClass$5([
-  n2({ type: Boolean, reflect: true })
+  n$2({ type: Boolean, reflect: true })
 ], SDSRadio.prototype, "error", 2);
 __decorateClass$5([
-  e$3("#control")
+  e$4("#control")
 ], SDSRadio.prototype, "control", 2);
 SDSRadio = __decorateClass$5([
   guardedCustomElement("sds-radio")
 ], SDSRadio);
-const styles$4 = i$4`
+const styles$4 = i$5`
 	.sds-radio-group {
 		border: 0;
 		margin: 0;
@@ -3122,13 +3214,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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$4(target, key, result);
   return result;
 };
-let SDSRadioGroup = class extends i$1 {
+let SDSRadioGroup = class extends i$2 {
   constructor() {
     super(...arguments);
     this._selectedValue = null;
@@ -3163,21 +3255,21 @@ let SDSRadioGroup = class extends i$1 {
 };
 SDSRadioGroup.styles = [styles$4];
 __decorateClass$4([
-  n2({ type: String })
+  n$2({ type: String })
 ], SDSRadioGroup.prototype, "legend", 2);
 __decorateClass$4([
-  n2({ type: String, attribute: "help-text" })
+  n$2({ type: String, attribute: "help-text" })
 ], SDSRadioGroup.prototype, "helpText", 2);
 __decorateClass$4([
-  n2({ type: String, attribute: "error-message" })
+  n$2({ type: String, attribute: "error-message" })
 ], SDSRadioGroup.prototype, "errorMessage", 2);
 __decorateClass$4([
-  r()
+  r$1()
 ], SDSRadioGroup.prototype, "_selectedValue", 2);
 SDSRadioGroup = __decorateClass$4([
   guardedCustomElement("sds-radio-group")
 ], SDSRadioGroup);
-const styles$3 = i$4`
+const styles$3 = i$5`
 	:host {
 		display: inline-flex;
 		contain: layout style;
@@ -3304,13 +3396,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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$3(target, key, result);
   return result;
 };
-let SDSSwitch = class extends i$1 {
+let SDSSwitch = class extends i$2 {
   constructor() {
     super();
     this.disabled = false;
@@ -3397,7 +3489,7 @@ let SDSSwitch = class extends i$1 {
 			role="switch"
 			?checked="${this.checked}"
 			.checked="${this.checked}"
-			name="${o$1(this.name)}"
+			name="${o$2(this.name)}"
 			@change="${this._handleChange}"
 			@focus="${this._handleFocus}"
 			@blur="${this._handleBlur}"
@@ -3411,33 +3503,33 @@ let SDSSwitch = class extends i$1 {
 SDSSwitch.styles = [styles$3];
 SDSSwitch.formAssociated = true;
 __decorateClass$3([
-  n2({ type: Boolean, reflect: true })
+  n$2({ type: Boolean, reflect: true })
 ], SDSSwitch.prototype, "disabled", 2);
 __decorateClass$3([
-  n2({ type: String, reflect: true })
+  n$2({ type: String, reflect: true })
 ], SDSSwitch.prototype, "label", 2);
 __decorateClass$3([
-  n2({ type: Boolean, reflect: true, attribute: "hide-label" })
+  n$2({ type: Boolean, reflect: true, attribute: "hide-label" })
 ], SDSSwitch.prototype, "hideLabel", 2);
 __decorateClass$3([
-  n2({ type: String, reflect: true })
+  n$2({ type: String, reflect: true })
 ], SDSSwitch.prototype, "name", 2);
 __decorateClass$3([
-  n2({ type: Boolean, reflect: true })
+  n$2({ type: Boolean, reflect: true })
 ], SDSSwitch.prototype, "reverse", 2);
 __decorateClass$3([
-  n2({ type: Boolean, reflect: true })
+  n$2({ type: Boolean, reflect: true })
 ], SDSSwitch.prototype, "checked", 2);
 __decorateClass$3([
-  n2({ type: String, reflect: true })
+  n$2({ type: String, reflect: true })
 ], SDSSwitch.prototype, "size", 2);
 __decorateClass$3([
-  e$3("#control")
+  e$4("#control")
 ], SDSSwitch.prototype, "control", 2);
 SDSSwitch = __decorateClass$3([
   guardedCustomElement("sds-switch")
 ], SDSSwitch);
-const styles$2 = i$4`
+const styles$2 = i$5`
 	:host {
 		display: block;
 	}
@@ -3470,13 +3562,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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$2(target, key, result);
   return result;
 };
-let SDSText = class extends i$1 {
+let SDSText = class extends i$2 {
   constructor() {
     super(...arguments);
     this.size = "l";
@@ -3494,12 +3586,12 @@ let SDSText = class extends i$1 {
 };
 SDSText.styles = [styles$2];
 __decorateClass$2([
-  n2({ type: String })
+  n$2({ type: String })
 ], SDSText.prototype, "size", 2);
 SDSText = __decorateClass$2([
   guardedCustomElement("sds-text")
 ], SDSText);
-const styles$1 = i$4`
+const styles$1 = i$5`
 	:host {
 		all: unset;
 		display: block;
@@ -3619,13 +3711,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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp$1(target, key, result);
   return result;
 };
-let SDSTextArea = class extends i$1 {
+let SDSTextArea = class extends i$2 {
   constructor() {
     super();
     this.disabled = false;
@@ -3751,16 +3843,16 @@ let SDSTextArea = class extends i$1 {
 						id="sds-textarea"
 						?disabled="${this.disabled}"
 						?readonly="${this.readOnly}"
-						placeholder="${o$1(this.placeholder)}"
+						placeholder="${o$2(this.placeholder)}"
 						.value="${this.value ?? ""}"
 						.autocomplete="${this.autocomplete}"
-						name="${o$1(this.name)}"
+						name="${o$2(this.name)}"
 						?required="${this.required}"
-						rows="${o$1(this.rows)}"
-						cols="${o$1(this.cols)}"
-						wrap="${o$1(this.wrap)}"
-						minlength="${o$1(this.minlength)}"
-						maxlength="${o$1(this.maxlength)}"
+						rows="${o$2(this.rows)}"
+						cols="${o$2(this.cols)}"
+						wrap="${o$2(this.wrap)}"
+						minlength="${o$2(this.minlength)}"
+						maxlength="${o$2(this.maxlength)}"
 						@input="${this._handleInputChange}"
 						@change="${this._handleInputChange}"
 						@select="${this._handleSelect}"
@@ -3784,60 +3876,60 @@ let SDSTextArea = class extends i$1 {
 SDSTextArea.styles = [styles$1];
 SDSTextArea.formAssociated = true;
 __decorateClass$1([
-  n2({ type: String })
+  n$2({ type: String })
 ], SDSTextArea.prototype, "value", 2);
 __decorateClass$1([
-  n2({ type: String, reflect: true })
+  n$2({ type: String, reflect: true })
 ], SDSTextArea.prototype, "name", 2);
 __decorateClass$1([
-  n2({ type: String, reflect: true })
+  n$2({ type: String, reflect: true })
 ], SDSTextArea.prototype, "label", 2);
 __decorateClass$1([
-  n2({ type: String, reflect: true })
+  n$2({ type: String, reflect: true })
 ], SDSTextArea.prototype, "placeholder", 2);
 __decorateClass$1([
-  n2({ type: String, attribute: "help-text", reflect: true })
+  n$2({ type: String, attribute: "help-text", reflect: true })
 ], SDSTextArea.prototype, "helpText", 2);
 __decorateClass$1([
-  n2({ type: String, attribute: "error-message", reflect: true })
+  n$2({ type: String, attribute: "error-message", reflect: true })
 ], SDSTextArea.prototype, "errorMessage", 2);
 __decorateClass$1([
-  n2({ type: Boolean, reflect: true })
+  n$2({ type: Boolean, reflect: true })
 ], SDSTextArea.prototype, "disabled", 2);
 __decorateClass$1([
-  n2({ type: Boolean, attribute: "readonly", reflect: true })
+  n$2({ type: Boolean, attribute: "readonly", reflect: true })
 ], SDSTextArea.prototype, "readOnly", 2);
 __decorateClass$1([
-  n2({ type: String, reflect: true })
+  n$2({ type: String, reflect: true })
 ], SDSTextArea.prototype, "autocomplete", 2);
 __decorateClass$1([
-  n2({ type: Boolean, reflect: true })
+  n$2({ type: Boolean, reflect: true })
 ], SDSTextArea.prototype, "required", 2);
 __decorateClass$1([
-  n2({ type: Number, reflect: true })
+  n$2({ type: Number, reflect: true })
 ], SDSTextArea.prototype, "rows", 2);
 __decorateClass$1([
-  n2({ type: Number, reflect: true })
+  n$2({ type: Number, reflect: true })
 ], SDSTextArea.prototype, "cols", 2);
 __decorateClass$1([
-  n2({ type: String, reflect: true })
+  n$2({ type: String, reflect: true })
 ], SDSTextArea.prototype, "wrap", 2);
 __decorateClass$1([
-  n2({ type: Number, reflect: true })
+  n$2({ type: Number, reflect: true })
 ], SDSTextArea.prototype, "minlength", 2);
 __decorateClass$1([
-  n2({ type: Number, reflect: true })
+  n$2({ type: Number, reflect: true })
 ], SDSTextArea.prototype, "maxlength", 2);
 __decorateClass$1([
-  n2({ type: Number, reflect: true })
+  n$2({ type: Number, reflect: true })
 ], SDSTextArea.prototype, "counter", 2);
 __decorateClass$1([
-  e$3("#sds-textarea")
+  e$4("#sds-textarea")
 ], SDSTextArea.prototype, "control", 2);
 SDSTextArea = __decorateClass$1([
   guardedCustomElement("sds-textarea")
 ], SDSTextArea);
-const styles = i$4`
+const styles = i$5`
 	:host {
 		all: unset;
 		display: block;
@@ -3955,13 +4047,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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
-    if (decorator = decorators[i3])
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let SDSTextField = class extends i$1 {
+let SDSTextField = class extends i$2 {
   constructor() {
     super();
     this.type = "text";
@@ -4081,14 +4173,14 @@ let SDSTextField = class extends i$1 {
 						id="sds-textfield"
 						?disabled="${this.disabled}"
 						?readonly="${this.readOnly}"
-						placeholder="${o$1(this.placeholder)}"
+						placeholder="${o$2(this.placeholder)}"
 						.value="${this.value ?? ""}"
-						name="${o$1(this.name)}"
-						autocomplete="${o$1(this.autocomplete)}"
+						name="${o$2(this.name)}"
+						autocomplete="${o$2(this.autocomplete)}"
 						?required="${this.required}"
-						pattern="${o$1(this.pattern)}"
-						minlength="${o$1(this.minlength)}"
-						maxlength="${o$1(this.maxlength)}"
+						pattern="${o$2(this.pattern)}"
+						minlength="${o$2(this.minlength)}"
+						maxlength="${o$2(this.maxlength)}"
 						@input="${this._handleInputChange}"
 						@change="${this._handleInputChange}"
 						@select="${this._handleSelect}"
@@ -4105,52 +4197,52 @@ let SDSTextField = class extends i$1 {
 SDSTextField.styles = [styles];
 SDSTextField.formAssociated = true;
 __decorateClass([
-  n2({ type: String, reflect: true })
+  n$2({ type: String, reflect: true })
 ], SDSTextField.prototype, "type", 2);
 __decorateClass([
-  n2({ type: String })
+  n$2({ type: String })
 ], SDSTextField.prototype, "value", 2);
 __decorateClass([
-  n2({ type: String, reflect: true })
+  n$2({ type: String, reflect: true })
 ], SDSTextField.prototype, "name", 2);
 __decorateClass([
-  n2({ type: String, reflect: true })
+  n$2({ type: String, reflect: true })
 ], SDSTextField.prototype, "label", 2);
 __decorateClass([
-  n2({ type: String, reflect: true })
+  n$2({ type: String, reflect: true })
 ], SDSTextField.prototype, "placeholder", 2);
 __decorateClass([
-  n2({ type: String, attribute: "help-text", reflect: true })
+  n$2({ type: String, attribute: "help-text", reflect: true })
 ], SDSTextField.prototype, "helpText", 2);
 __decorateClass([
-  n2({ type: String, attribute: "error-message", reflect: true })
+  n$2({ type: String, attribute: "error-message", reflect: true })
 ], SDSTextField.prototype, "errorMessage", 2);
 __decorateClass([
-  n2({ type: Boolean, reflect: true })
+  n$2({ type: Boolean, reflect: true })
 ], SDSTextField.prototype, "disabled", 2);
 __decorateClass([
-  n2({ type: Boolean, attribute: "readonly", reflect: true })
+  n$2({ type: Boolean, attribute: "readonly", reflect: true })
 ], SDSTextField.prototype, "readOnly", 2);
 __decorateClass([
-  n2({ type: String, reflect: true })
+  n$2({ type: String, reflect: true })
 ], SDSTextField.prototype, "autocomplete", 2);
 __decorateClass([
-  n2({ type: Boolean, reflect: true })
+  n$2({ type: Boolean, reflect: true })
 ], SDSTextField.prototype, "required", 2);
 __decorateClass([
-  n2({ type: String, reflect: true })
+  n$2({ type: String, reflect: true })
 ], SDSTextField.prototype, "pattern", 2);
 __decorateClass([
-  n2({ type: Number, reflect: true })
+  n$2({ type: Number, reflect: true })
 ], SDSTextField.prototype, "minlength", 2);
 __decorateClass([
-  n2({ type: Number, reflect: true })
+  n$2({ type: Number, reflect: true })
 ], SDSTextField.prototype, "maxlength", 2);
 __decorateClass([
-  r()
+  r$1()
 ], SDSTextField.prototype, "hasIcon", 2);
 __decorateClass([
-  e$3("#sds-textfield")
+  e$4("#sds-textfield")
 ], SDSTextField.prototype, "control", 2);
 SDSTextField = __decorateClass([
   guardedCustomElement("sds-textfield")