@politiet/sheriff-web-components 0.6.4 → 0.6.5

package/dist/sheriff-web-components.js

@@ -0,0 +1,3626 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+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$1 = Symbol(), o$5 = /* @__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.");
+    this.cssText = t2, this.t = e2;
+  }
+  get styleSheet() {
+    let t2 = this.o;
+    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));
+    }
+    return t2;
+  }
+  toString() {
+    return this.cssText;
+  }
+};
+const r$5 = (t2) => new n$3("string" == typeof t2 ? t2 : t2 + "", void 0, s$1), 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);
+}, 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$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) => {
+  let e2 = "";
+  for (const s2 of t3.cssRules) e2 += s2.cssText;
+  return r$5(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) {
+  switch (s2) {
+    case Boolean:
+      t2 = t2 ? l$1 : null;
+      break;
+    case Object:
+    case Array:
+      t2 = null == t2 ? t2 : JSON.stringify(t2);
+  }
+  return t2;
+}, fromAttribute(t2, s2) {
+  let i2 = t2;
+  switch (s2) {
+    case Boolean:
+      i2 = null !== t2;
+      break;
+    case Number:
+      i2 = null === t2 ? null : Number(t2);
+      break;
+    case Object:
+    case Array:
+      try {
+        i2 = JSON.parse(t2);
+      } catch (t3) {
+        i2 = 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 };
+Symbol.metadata ??= Symbol("metadata"), a$1.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
+class b 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 getPropertyDescriptor(t2, s2, i2) {
+    const { get: e2, set: h2 } = r$4(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);
+    }, configurable: true, enumerable: true };
+  }
+  static getPropertyOptions(t2) {
+    return this.elementProperties.get(t2) ?? y$1;
+  }
+  static _$Ei() {
+    if (this.hasOwnProperty(d$1("elementProperties"))) return;
+    const t2 = n$2(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 = [...h$1(t3), ...o$4(t3)];
+      for (const i2 of s2) this.createProperty(i2, t3[i2]);
+    }
+    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);
+    }
+    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);
+    }
+    this.elementStyles = this.finalizeStyles(this.styles);
+  }
+  static finalizeStyles(s2) {
+    const i2 = [];
+    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;
+  }
+  static _$Eu(t2, s2) {
+    const i2 = s2.attribute;
+    return false === i2 ? void 0 : "string" == typeof i2 ? i2 : "string" == typeof t2 ? t2.toLowerCase() : void 0;
+  }
+  constructor() {
+    super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
+  }
+  _$Ev() {
+    this._$ES = new Promise((t2) => this.enableUpdating = t2), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach((t2) => t2(this));
+  }
+  addController(t2) {
+    (this._$EO ??= /* @__PURE__ */ new Set()).add(t2), void 0 !== this.renderRoot && this.isConnected && t2.hostConnected?.();
+  }
+  removeController(t2) {
+    this._$EO?.delete(t2);
+  }
+  _$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]);
+    t2.size > 0 && (this._$Ep = t2);
+  }
+  createRenderRoot() {
+    const t2 = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    return S$1(t2, this.constructor.elementStyles), t2;
+  }
+  connectedCallback() {
+    this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(true), this._$EO?.forEach((t2) => t2.hostConnected?.());
+  }
+  enableUpdating(t2) {
+  }
+  disconnectedCallback() {
+    this._$EO?.forEach((t2) => t2.hostDisconnected?.());
+  }
+  attributeChangedCallback(t2, s2, i2) {
+    this._$AK(t2, i2);
+  }
+  _$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;
+    }
+  }
+  _$AK(t2, s2) {
+    const i2 = this.constructor, e2 = i2._$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;
+    }
+  }
+  requestUpdate(t2, s2, i2) {
+    if (void 0 !== t2) {
+      if (i2 ??= this.constructor.getPropertyOptions(t2), !(i2.hasChanged ?? f$1)(this[t2], s2)) return;
+      this.P(t2, s2, i2);
+    }
+    false === this.isUpdatePending && (this._$ES = this._$ET());
+  }
+  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);
+  }
+  async _$ET() {
+    this.isUpdatePending = true;
+    try {
+      await this._$ES;
+    } catch (t3) {
+      Promise.reject(t3);
+    }
+    const t2 = this.scheduleUpdate();
+    return null != t2 && await t2, !this.isUpdatePending;
+  }
+  scheduleUpdate() {
+    return this.performUpdate();
+  }
+  performUpdate() {
+    if (!this.isUpdatePending) return;
+    if (!this.hasUpdated) {
+      if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
+        for (const [t4, s3] of this._$Ep) this[t4] = s3;
+        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);
+    }
+    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();
+    } catch (s3) {
+      throw t2 = false, this._$EU(), s3;
+    }
+    t2 && this._$AE(s2);
+  }
+  willUpdate(t2) {
+  }
+  _$AE(t2) {
+    this._$EO?.forEach((t3) => t3.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t2)), this.updated(t2);
+  }
+  _$EU() {
+    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = false;
+  }
+  get updateComplete() {
+    return this.getUpdateComplete();
+  }
+  getUpdateComplete() {
+    return this._$ES;
+  }
+  shouldUpdate(t2) {
+    return true;
+  }
+  update(t2) {
+    this._$Ej &&= this._$Ej.forEach((t3) => this._$EC(t3, this[t3])), this._$EU();
+  }
+  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");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$2 = globalThis, i$2 = t$2.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) {
+  if (!a(t2) || !t2.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return void 0 !== s ? s.createHTML(i2) : i2;
+}
+const V = (t2, i2) => {
+  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];
+};
+class N {
+  constructor({ strings: t2, _$litType$: s2 }, n3) {
+    let r3;
+    this.parts = [];
+    let c2 = 0, a2 = 0;
+    const u2 = t2.length - 1, d2 = this.parts, [f2, v2] = V(t2, s2);
+    if (this.el = N.createElement(f2, n3), C.currentNode = this.el.content, 2 === s2 || 3 === s2) {
+      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;
+          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());
+          }
+        }
+      } else if (8 === r3.nodeType) if (r3.data === o$3) 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;
+      }
+      c2++;
+    }
+  }
+  static createElement(t2, i2) {
+    const s2 = r$3.createElement("template");
+    return s2.innerHTML = t2, s2;
+  }
+}
+function S(t2, i2, s2 = t2, e2) {
+  if (i2 === T) return i2;
+  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;
+}
+class M {
+  constructor(t2, i2) {
+    this._$AV = [], this._$AN = void 0, this._$AD = t2, this._$AM = i2;
+  }
+  get parentNode() {
+    return this._$AM.parentNode;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  u(t2) {
+    const { el: { content: i2 }, parts: s2 } = this._$AD, e2 = (t2?.creationScope ?? r$3).importNode(i2, 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];
+      }
+      o2 !== l2?.index && (h2 = C.nextNode(), o2++);
+    }
+    return C.currentNode = r$3, 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++;
+  }
+}
+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;
+  }
+  get parentNode() {
+    let t2 = this._$AA.parentNode;
+    const i2 = this._$AM;
+    return void 0 !== i2 && 11 === t2?.nodeType && (t2 = i2.parentNode), t2;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  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);
+  }
+  O(t2) {
+    return this._$AA.parentNode.insertBefore(t2, this._$AB);
+  }
+  T(t2) {
+    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;
+  }
+  $(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);
+    else {
+      const t3 = new M(e2, this), s3 = t3.u(this.options);
+      t3.p(i2), 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;
+  }
+  k(t2) {
+    a(this._$AH) || (this._$AH = [], this._$AR());
+    const i2 = 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);
+  }
+  _$AR(t2 = this._$AA.nextSibling, i2) {
+    for (this._$AP?.(false, true, i2); t2 && t2 !== this._$AB; ) {
+      const i3 = t2.nextSibling;
+      t2.remove(), t2 = i3;
+    }
+  }
+  setConnected(t2) {
+    void 0 === this._$AM && (this._$Cv = t2, this._$AP?.(t2));
+  }
+}
+class k {
+  get tagName() {
+    return this.element.tagName;
+  }
+  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;
+  }
+  _$AI(t2, i2 = 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);
+    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;
+    }
+    o2 && !e2 && this.j(t2);
+  }
+  j(t2) {
+    t2 === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t2 ?? "");
+  }
+}
+class H extends k {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  j(t2) {
+    this.element[this.name] = t2 === E ? void 0 : t2;
+  }
+}
+class I extends k {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  j(t2) {
+    this.element.toggleAttribute(this.name, !!t2 && t2 !== E);
+  }
+}
+class L extends k {
+  constructor(t2, i2, s2, e2, h2) {
+    super(t2, i2, s2, e2, h2), this.type = 5;
+  }
+  _$AI(t2, i2 = this) {
+    if ((t2 = S(this, t2, i2, 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;
+  }
+  handleEvent(t2) {
+    "function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t2) : this._$AH.handleEvent(t2);
+  }
+}
+class z {
+  constructor(t2, i2, s2) {
+    this.element = t2, this.type = 6, this._$AN = void 0, this._$AM = i2, this.options = s2;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(t2) {
+    S(this, t2);
+  }
+}
+const j = t$2.litHtmlPolyfillSupport;
+j?.(N, R), (t$2.litHtmlVersions ??= []).push("3.2.1");
+const B = (t2, i2, s2) => {
+  const e2 = s2?.renderBefore ?? i2;
+  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 ?? {});
+  }
+  return h2._$AI(t2), h2;
+};
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let r$2 = class r extends b {
+  constructor() {
+    super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
+  }
+  createRenderRoot() {
+    const t2 = super.createRenderRoot();
+    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);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._$Do?.setConnected(true);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._$Do?.setConnected(false);
+  }
+  render() {
+    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");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$1 = (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, 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 n4 = e2.get.call(this);
+      e2.set.call(this, r4), this.requestUpdate(o2, n4, t2);
+    }, init(e3) {
+      return void 0 !== e3 && this.P(o2, void 0, t2), e3;
+    } };
+  }
+  if ("setter" === n3) {
+    const { name: o2 } = r3;
+    return function(r4) {
+      const n4 = this[o2];
+      e2.call(this, r4), 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;
+  })(t2, e2, o2);
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function r2(r3) {
+  return n2({ ...r3, 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, r3) {
+  return (n3, s2, i2) => {
+    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 = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 }, e$2 = (t2) => (...e2) => ({ _$litDirective$: t2, values: e2 });
+class i {
+  constructor(t2) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(t2, e2, i2) {
+    this._$Ct = t2, this._$AM = e2, this._$Ci = i2;
+  }
+  _$AS(t2, e2) {
+    return this.update(t2, e2);
+  }
+  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 i {
+  constructor(t$12) {
+    if (super(t$12), t$12.type !== t.ATTRIBUTE || "class" !== t$12.name || t$12.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]) {
+    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);
+    }
+    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)));
+    }
+    return T;
+  }
+});
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const o$1 = (o2) => o2 ?? E;
+const styles$h = i$4`
+	:host {
+		--_color-semantic-surface-critical-hover: #b32a23;
+		display: inline-block;
+		box-sizing: border-box;
+	}
+
+	.sds-button {
+		align-items: center;
+		display: inline-flex;
+		gap: var(--sds-spacing-3, 8px);
+		justify-content: center;
+		padding: var(--sds-spacing-3) var(--sds-spacing-4);
+
+		background-color: var(--sds-color-semantic-surface-action-default);
+		border: 2px solid var(--sds-color-semantic-border-action);
+		border-radius: var(--sds-radius-4);
+		cursor: pointer;
+
+		color: var(--sds-color-semantic-text-on-action);
+		font-family: var(--sds-typography-font-family);
+		font-size: 1rem;
+		font-weight: 500;
+		line-height: 1.5;
+		text-align: center;
+
+		&:hover {
+			background-color: var(--sds-color-semantic-surface-action-hover);
+			border: 2px solid var(--sds-color-semantic-surface-action-hover);
+		}
+
+		&:active {
+			background-color: var(--sds-color-semantic-surface-action-active);
+			border: 2px solid var(--sds-color-semantic-surface-action-active);
+			outline: 0;
+		}
+
+		&:disabled {
+			background-color: var(--sds-color-semantic-surface-disabled);
+			border: 2px solid var(--sds-color-semantic-surface-disabled);
+			color: var(--sds-color-semantic-text-subtle);
+			cursor: not-allowed;
+		}
+	}
+
+	.sds-button:focus,
+	:host(:focus) .give-focus {
+		background-color: var(--sds-color-semantic-surface-action-default);
+		outline: 2px solid var(--sds-color-semantic-surface-action-default);
+		outline-offset: 1px;
+	}
+
+	.sds-button--secondary {
+		background-color: var(--sds-color-semantic-surface-action-inverted);
+		border: 2px solid var(--sds-color-semantic-border-action);
+		color: var(--sds-color-semantic-text-default);
+
+		&:focus {
+			background-color: var(--sds-color-semantic-surface-action-inverted);
+			border: 2px solid var(--sds-color-semantic-border-action);
+		}
+
+		&:hover {
+			background-color: var(--sds-color-semantic-surface-action-subtle);
+		}
+
+		&:active {
+			background-color: var(--sds-color-semantic-surface-action-active);
+			border: 2px solid var(--sds-color-semantic-surface-action-active);
+			color: var(--sds-color-semantic-text-on-action);
+			outline: 0;
+		}
+
+		&:disabled {
+			border: 2px solid var(--sds-color-semantic-border-disabled);
+			background: var(--sds-color-semantic-surface-action-inverted);
+			color: var(--sds-color-semantic-text-disabled);
+		}
+	}
+
+	.sds-button--tertiary {
+		background-color: transparent;
+		border: 2px solid transparent;
+		color: var(--sds-color-semantic-text-action-default);
+
+		&:focus {
+			background-color: transparent;
+			border: 2px solid transparent;
+		}
+
+		&:hover {
+			background-color: var(--sds-color-semantic-surface-action-subtle);
+		}
+
+		&:active {
+			background-color: var(--sds-color-semantic-surface-action-active);
+			border: 2px solid var(--sds-color-semantic-surface-action-active);
+			color: var(--sds-color-semantic-text-on-action);
+			outline: 0;
+			position: relative;
+		}
+
+		&:disabled {
+			border: 2px solid transparent;
+			background: transparent;
+			color: var(--sds-color-semantic-text-disabled);
+		}
+	}
+
+	.sds-button--critical {
+		background-color: var(--sds-color-semantic-surface-critical-xtreme);
+		border: 2px solid var(--sds-color-semantic-border-critical);
+		color: var(--sds-color-semantic-text-on-critical);
+
+		&:focus {
+			background-color: var(--sds-color-semantic-surface-critical-xtreme);
+			border: 2px solid var(--sds-color-semantic-border-critical);
+		}
+
+		&:hover {
+			background-color: var(--_color-semantic-surface-critical-hover);
+			border: 2px solid var(--_color-semantic-surface-critical-hover);
+		}
+
+		&:active {
+			background-color: var(--sds-color-semantic-surface-action-active);
+			border: 2px solid var(--sds-color-semantic-surface-action-active);
+		}
+
+		&:disabled {
+			background-color: var(--sds-color-semantic-surface-disabled);
+			border: 2px solid var(--sds-color-semantic-surface-disabled);
+			color: var(--sds-color-semantic-text-subtle);
+		}
+	}
+
+	.sds-button--medium {
+		padding: var(--sds-spacing-1) var(--sds-spacing-3);
+	}
+
+	.sds-button--small {
+		font-size: 0.875rem;
+		padding: 0 var(--sds-spacing-3);
+	}
+`;
+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])
+      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 {
+  constructor() {
+    super();
+    this.type = "button";
+    this.variant = "primary";
+    this.size = "large";
+    this.disabled = false;
+    this.value = "";
+    this._handleClick = (event) => {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      if (!this.disabled) {
+        switch (this.type) {
+          case "submit": {
+            const submitEvent = new CustomEvent("submit", {
+              bubbles: true,
+              composed: true,
+              cancelable: true
+            });
+            const shouldSubmit = this.dispatchEvent(submitEvent);
+            if (shouldSubmit) {
+              if (this.form) {
+                const root = this.getRootNode();
+                const formElement = root.querySelector(`form#${this.form}`);
+                formElement?.submit();
+              } else if (this.internals.form) {
+                this.internals.form.submit();
+              }
+            }
+            break;
+          }
+          case "reset": {
+            const resetEvent = new CustomEvent("reset", {
+              bubbles: true,
+              composed: true,
+              cancelable: true
+            });
+            const shouldReset = this.dispatchEvent(resetEvent);
+            if (shouldReset) {
+              if (this.form) {
+                const root = this.getRootNode();
+                const formElement = root.querySelector(`form#${this.form}`);
+                formElement?.reset();
+              } else if (this.internals.form) {
+                this.internals.form.reset();
+              }
+            }
+            break;
+          }
+          default:
+            this.dispatchEvent(
+              new CustomEvent("click", {
+                bubbles: true,
+                composed: true
+              })
+            );
+        }
+      }
+    };
+    this.internals = this.attachInternals();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+  }
+  focus() {
+    if (!this.disabled) this.shadowRoot?.querySelector("button")?.focus();
+  }
+  blur() {
+    if (!this.disabled) this.shadowRoot?.querySelector("button")?.blur();
+  }
+  click() {
+    if (!this.disabled) this.shadowRoot?.querySelector("button")?.click();
+  }
+  render() {
+    const buttonClasses = {
+      "sds-button": true,
+      "sds-button--secondary": this.variant === "secondary",
+      "sds-button--tertiary": this.variant === "tertiary",
+      "sds-button--critical": this.variant === "critical",
+      "sds-button--medium": this.size === "medium",
+      "sds-button--small": this.size === "small"
+    };
+    return x`
+			<button
+				id="control"
+				form="${o$1(this.form)}"
+				class="${e$1(buttonClasses)}"
+				type="${this.type}"
+				name="${o$1(this.name)}"
+				value="${o$1(this.value)}"
+				?disabled="${this.disabled}"
+				@click="${this._handleClick}"
+			>
+				<slot name="before"></slot>
+				<slot></slot>
+				<slot name="after"></slot>
+			</button>
+		`;
+  }
+};
+SDSButton.styles = [styles$h];
+SDSButton.formAssociated = true;
+__decorateClass$h([
+  n2({ type: String, reflect: true })
+], SDSButton.prototype, "type", 2);
+__decorateClass$h([
+  n2({ type: String, reflect: true })
+], SDSButton.prototype, "variant", 2);
+__decorateClass$h([
+  n2({ type: String, reflect: true })
+], SDSButton.prototype, "size", 2);
+__decorateClass$h([
+  n2({ type: Boolean, reflect: true })
+], SDSButton.prototype, "disabled", 2);
+__decorateClass$h([
+  n2({ type: String, reflect: true })
+], SDSButton.prototype, "name", 2);
+__decorateClass$h([
+  n2({ type: String, reflect: true })
+], SDSButton.prototype, "value", 2);
+__decorateClass$h([
+  n2({ type: String, reflect: true })
+], SDSButton.prototype, "form", 2);
+SDSButton = __decorateClass$h([
+  t$1("sds-button")
+], SDSButton);
+const styles$g = i$4`
+	:host {
+		flex: 0 0 auto;
+	}
+
+	.sds-checkbox__label {
+		align-items: flex-start;
+		cursor: pointer;
+		color: var(--sds-color-semantic-text-default);
+		display: inline-flex;
+		font-family: var(--sds-typography-font-family);
+		font-size: 1rem;
+		font-weight: 400;
+		gap: var(--sds-spacing-3);
+		line-height: 1.25;
+
+		&:has(:disabled) {
+			cursor: default;
+			pointer-events: none;
+		}
+	}
+
+	.sds-checkbox__input {
+		appearance: none;
+		background-color: transparent;
+		color: currentColor;
+		cursor: pointer;
+		width: 24px;
+		height: 24px;
+		border: 1px solid var(--sds-color-semantic-border-default);
+		border-radius: var(--sds-radius-2);
+		margin: 0;
+		/*transition:
+			background-color 0.3s ease,
+			box-shadow 0.3s ease;*/
+
+		&:checked {
+			background-color: var(--sds-color-semantic-surface-action-selected);
+			border-color: var(--sds-color-semantic-surface-action-selected);
+
+			&::after {
+				content: '';
+				position: absolute;
+				width: 24px;
+				height: 24px;
+				background-color: white;
+				transform-origin: bottom left;
+				clip-path: path(
+					'M9.54998 18L3.84998 12.3L5.27498 10.875L9.54998 15.15L18.725 5.97501L20.15 7.40001L9.54998 18Z'
+				);
+				transform: translate(-1px, -1px);
+				/*transition:
+					background-color 0.3s ease,
+					box-shadow 0.3s ease;*/
+			}
+		}
+
+		&:hover {
+			border-width: 2px;
+
+			&:checked {
+				&::after {
+					transform: translate(-2px, -2px);
+				}
+			}
+		}
+
+		&:focus {
+			outline: 2px solid var(--sds-color-semantic-border-focus);
+			outline-offset: 2px;
+		}
+
+		&.sds-checkbox__input--error {
+			border: 2px solid var(--sds-color-semantic-surface-critical-xtreme);
+
+			&:checked {
+				// TODO: Decide if checked checkbox with error should be fully red
+				//background-color: var(--sds-color-semantic-border-critical);
+
+				&::after {
+					transform: translate(-2px, -2px);
+				}
+			}
+		}
+
+		&:disabled {
+			border: 2px solid var(--sds-color-semantic-border-disabled);
+
+			&:checked {
+				background-color: var(--sds-color-semantic-border-disabled);
+
+				&::after {
+					transform: translate(-2px, -2px);
+				}
+			}
+
+			& + .sds-checkbox__text {
+				color: var(--sds-color-semantic-border-disabled);
+			}
+		}
+	}
+
+	.sds-checkbox__text {
+		display: inline-block;
+		max-width: var(--sds-typography-max-line-width);
+		padding-top: 2px;
+	}
+`;
+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])
+      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 {
+  constructor() {
+    super();
+    this.checked = false;
+    this.disabled = false;
+    this.error = false;
+    this._handleChange = (event) => {
+      event.stopImmediatePropagation();
+      if (!this.disabled) {
+        const elem = event.target;
+        this.checked = elem.checked;
+        this.dispatchEvent(
+          new CustomEvent("change", {
+            detail: { checked: this.checked, value: elem.value },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    };
+    this._handleFocus = (event) => {
+      event.stopImmediatePropagation();
+      this.dispatchEvent(
+        new CustomEvent("focus", {
+          detail: { checked: this.checked },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+    this._handleBlur = (event) => {
+      event.stopImmediatePropagation();
+      this.dispatchEvent(
+        new CustomEvent("blur", {
+          detail: { checked: this.checked },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+    this.internals = this.attachInternals();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+  }
+  focus() {
+    if (!this.disabled) this.shadowRoot?.querySelector("input")?.focus();
+  }
+  blur() {
+    if (!this.disabled) this.shadowRoot?.querySelector("input")?.blur();
+  }
+  click() {
+    if (!this.disabled) this.shadowRoot?.querySelector("input")?.click();
+  }
+  render() {
+    const checkboxClasses = {
+      "sds-checkbox": true,
+      "sds-checkbox--error": Boolean(this.error)
+    };
+    const inputClasses = {
+      "sds-checkbox__input": true,
+      "sds-checkbox__input--error": Boolean(this.error)
+    };
+    return x`
+			<div class="${e$1(checkboxClasses)}">
+				<label class="sds-checkbox__label">
+					<input
+						type="checkbox"
+						name="${o$1(this.name)}"
+						value="${o$1(this.value)}"
+						?checked="${this.checked}"
+						?disabled="${this.disabled}"
+						@change="${this._handleChange}"
+						@focus="${this._handleFocus}"
+						@blur="${this._handleBlur}"
+						class="${e$1(inputClasses)}"
+					/>
+					${this.label ? x`<span class="sds-checkbox__text">${this.label}</span>` : E}
+				</label>
+			</div>
+		`;
+  }
+};
+SDSCheckbox.styles = [styles$g];
+SDSCheckbox.formAssociated = true;
+__decorateClass$g([
+  n2({ type: String, reflect: true })
+], SDSCheckbox.prototype, "name", 2);
+__decorateClass$g([
+  n2({ type: String, reflect: true })
+], SDSCheckbox.prototype, "label", 2);
+__decorateClass$g([
+  n2({ type: String })
+], SDSCheckbox.prototype, "value", 2);
+__decorateClass$g([
+  n2({ type: Boolean, reflect: true })
+], SDSCheckbox.prototype, "checked", 2);
+__decorateClass$g([
+  n2({ type: Boolean, reflect: true })
+], SDSCheckbox.prototype, "disabled", 2);
+__decorateClass$g([
+  n2({ type: Boolean, reflect: true })
+], SDSCheckbox.prototype, "error", 2);
+SDSCheckbox = __decorateClass$g([
+  t$1("sds-checkbox")
+], SDSCheckbox);
+const styles$f = i$4`
+	:host {
+		display: block;
+		contain: layout style;
+		box-sizing: border-box;
+	}
+
+	.sds-checkbox-group {
+		border: 0;
+		font-family: var(--sds-typography-font-family);
+		margin: 0;
+		padding: 0;
+	}
+
+	.sds-checkbox-group__legend {
+		color: var(--sds-color-semantic-text-default);
+		font-size: 1rem;
+		font-weight: 700;
+		line-height: 1.5;
+		margin: 0 0 var(--sds-spacing-2) 0;
+		max-width: var(--sds-typography-max-line-width);
+		padding: 0;
+	}
+
+	.sds-checkbox-group__help-text {
+		color: var(--sds-color-semantic-text-subtle);
+		font-size: 1rem;
+		font-weight: 400;
+		line-height: 1.25rem;
+		margin: 0;
+		max-width: var(--sds-typography-max-line-width);
+	}
+
+	.sds-checkbox-group__checkboxes {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sds-spacing-5);
+		margin-top: var(--sds-spacing-3);
+	}
+
+	.sds-checkbox-group__error-message {
+		margin: var(--sds-spacing-5) 0 0;
+		max-width: var(--sds-typography-max-line-width);
+		align-items: flex-start;
+		color: var(--sds-color-semantic-text-default);
+		display: flex;
+		line-height: 1.5rem;
+		gap: var(--sds-spacing-2);
+	}
+`;
+/**
+ * @license
+ * 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.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];
+    return s2.raw = s2, this._t = { _$litType$: this.constructor.resultType, strings: s2, values: [] };
+  }
+}
+e.directiveName = "unsafeHTML", e.resultType = 1;
+const o = e$2(e);
+const loadIcon = async (name) => await import(`@politiet/sheriff-icons/dist/${name}.js`).then(({ default: svg }) => svg);
+class SDSIconLoader {
+  constructor() {
+    this.cache = /* @__PURE__ */ new Map();
+    this.resolver = loadIcon;
+  }
+  resolve(name, onResolved) {
+    const cached = this.cache.get(name);
+    if (cached != null) {
+      onResolved(cached);
+      return;
+    }
+    const fetchIcon = this.resolver(name).catch((error) => {
+      console.error(`Failed to fetch icon '${name}':`, error);
+      return "";
+    }).then((svg) => {
+      this.cache.set(name, svg);
+      return svg;
+    });
+    void fetchIcon.then(onResolved);
+  }
+}
+const styles$e = i$4`
+	:host {
+		--icon-size: var(--sds-icon-size-m);
+		display: inline-block;
+		block-size: var(--icon-size);
+		inline-size: var(--icon-size);
+		min-inline-size: var(--icon-size);
+	}
+
+	:host([size='s']) {
+		--icon-size: var(--sds-icon-size-s);
+	}
+`;
+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])
+      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 {
+  constructor() {
+    super(...arguments);
+    this.name = "";
+    this.size = "m";
+    this.color = "";
+    this.label = "";
+    this.svg = "";
+  }
+  static registerResolver(resolver) {
+    this.iconLoader.resolver = resolver;
+  }
+  async fetchIcon() {
+    if (!this.name) {
+      this.svg = "";
+      return;
+    }
+    try {
+      const svg = await new Promise((resolve) => {
+        SDSIcon.iconLoader.resolve(this.name, resolve);
+      });
+      this.svg = svg;
+    } catch (error) {
+      console.error(`Failed to fetch SVG for icon '${this.name}':`, error);
+      this.svg = "";
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("name") && this.name) {
+      void this.fetchIcon();
+    }
+  }
+  render() {
+    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)}"
+		>
+			${this.name ? x`<slot aria-hidden="true">${o(this.svg)}</slot>` : x`<slot aria-hidden="true"></slot>`}
+		</div>`;
+  }
+};
+SDSIcon.styles = [styles$e];
+SDSIcon.iconLoader = new SDSIconLoader();
+__decorateClass$f([
+  n2({ type: String, reflect: true })
+], SDSIcon.prototype, "name", 2);
+__decorateClass$f([
+  n2({ type: String, reflect: true })
+], SDSIcon.prototype, "size", 2);
+__decorateClass$f([
+  n2({ type: String, reflect: true })
+], SDSIcon.prototype, "color", 2);
+__decorateClass$f([
+  n2({ type: String, reflect: true })
+], SDSIcon.prototype, "label", 2);
+__decorateClass$f([
+  r2()
+], SDSIcon.prototype, "svg", 2);
+SDSIcon = __decorateClass$f([
+  t$1("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])
+      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 {
+  constructor() {
+    super(...arguments);
+    this.selectedValues = [];
+    this._handleCheckboxChange = (event) => {
+      const checkbox = event.target;
+      const value = checkbox.value;
+      const isChecked = checkbox.checked;
+      this.selectedValues = isChecked ? [...this.selectedValues, value] : this.selectedValues.filter((v2) => v2 !== value);
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { selectedValues: this.selectedValues },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+  }
+  render() {
+    const groupClasses = {
+      "sds-checkbox-group": true,
+      "sds-checkbox-group--error": Boolean(this.errorMessage)
+    };
+    return x`
+			<fieldset class="${e$1(groupClasses)}">
+				${this.legend ? x`<legend class="sds-checkbox-group__legend">${this.legend}</legend>` : E}
+				${this.helpText ? x`<p class="sds-checkbox-group__help-text">${this.helpText}</p>` : E}
+				<div class="sds-checkbox-group__checkboxes">
+					<slot @change=${this._handleCheckboxChange}></slot>
+				</div>
+				${this.errorMessage ? x`<p class="sds-checkbox-group__error-message">
+							<sds-icon
+								name="warning-material-filled"
+								size="m"
+								color="var(--sds-color-semantic-icon-critical)"
+							></sds-icon>
+							${this.errorMessage}
+						</p>` : E}
+			</fieldset>
+		`;
+  }
+};
+SDSCheckboxGroup.styles = [styles$f];
+__decorateClass$e([
+  n2({ type: String, reflect: true })
+], SDSCheckboxGroup.prototype, "legend", 2);
+__decorateClass$e([
+  n2({ type: String, attribute: "help-text", reflect: true })
+], SDSCheckboxGroup.prototype, "helpText", 2);
+__decorateClass$e([
+  n2({ type: String, attribute: "error-message", reflect: true })
+], SDSCheckboxGroup.prototype, "errorMessage", 2);
+__decorateClass$e([
+  r2()
+], SDSCheckboxGroup.prototype, "selectedValues", 2);
+SDSCheckboxGroup = __decorateClass$e([
+  t$1("sds-checkbox-group")
+], SDSCheckboxGroup);
+const styles$d = i$4`
+	.sds-chip {
+		align-items: center;
+		display: inline-flex;
+		gap: var(--sds-spacing-3);
+		justify-content: center;
+		padding: 6px var(--sds-spacing-4);
+
+		background-color: var(--sds-color-semantic-surface-action-inverted);
+		border: 2px solid var(--sds-color-semantic-border-action);
+		border-radius: 2rem;
+
+		font-family: var(--sds-typography-font-family);
+		font-size: 1rem;
+		font-weight: 400;
+		line-height: 1.25;
+		text-align: center;
+
+		user-select: none;
+		cursor: pointer;
+
+		&:has(input[type='checkbox']: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]
+			) {
+			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 {
+			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 {
+			background-color: var(--sds-color-semantic-surface-action-active);
+			border: 2px solid var(--sds-color-semantic-surface-action-active);
+		}
+
+		&:focus-within,
+		&:focus {
+			outline: 2px solid var(--sds-color-semantic-border-focus);
+			outline-offset: 2px;
+		}
+
+		&.sds-chip--small {
+			font-size: 0.875rem;
+			line-height: 1.125rem;
+			padding: var(--sds-spacing-1) var(--sds-spacing-3);
+			gap: var(--sds-spacing-2);
+		}
+
+		& input[type='checkbox'] {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			padding: 0;
+			margin: -1px;
+			overflow: hidden;
+			clip-path: inset(50%);
+			border: 0;
+			white-space: nowrap;
+		}
+	}
+`;
+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])
+      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 {
+  constructor() {
+    super(...arguments);
+    this.variant = "selectable";
+    this.size = "large";
+    this.checked = false;
+    this.disabled = false;
+    this._toggle = (event) => {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      this.checked = !this.checked;
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: this.value, isChecked: this.checked },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+    this._remove = () => {
+      this.dispatchEvent(
+        new CustomEvent("sds-remove", {
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+  }
+  focus() {
+    if (!this.disabled) this.shadowRoot?.querySelector("input")?.focus();
+  }
+  blur() {
+    if (!this.disabled) this.shadowRoot?.querySelector("input")?.blur();
+  }
+  click() {
+    if (!this.disabled) this.shadowRoot?.querySelector("input")?.click();
+  }
+  render() {
+    const chipClasses = {
+      "sds-chip": true,
+      "sds-chip--small": this.size === "small"
+    };
+    if (this.variant === "removable") {
+      return x`<button class="${e$1(chipClasses)}" @click=${this._remove}>
+				<slot></slot>
+				<sds-icon name="close-material-outlined" size="s"></sds-icon>
+			</button>`;
+    }
+    return x`<label class="${e$1(chipClasses)}" @click="${this._toggle}">
+			<input
+				type="checkbox"
+				name="${o$1(this.name)}"
+				value="${o$1(this.value)}"
+				?checked="${this.checked}"
+				?disabled="${this.disabled}"
+			/>
+			<slot></slot>
+		</label>`;
+  }
+};
+SDSChip.styles = [styles$d];
+__decorateClass$d([
+  n2({ type: String, reflect: true })
+], SDSChip.prototype, "variant", 2);
+__decorateClass$d([
+  n2({ type: String, reflect: true })
+], SDSChip.prototype, "size", 2);
+__decorateClass$d([
+  n2({ type: Boolean, reflect: true })
+], SDSChip.prototype, "checked", 2);
+__decorateClass$d([
+  n2({ type: String, reflect: true })
+], SDSChip.prototype, "name", 2);
+__decorateClass$d([
+  n2({ type: String })
+], SDSChip.prototype, "value", 2);
+__decorateClass$d([
+  n2({ type: Boolean, reflect: true })
+], SDSChip.prototype, "disabled", 2);
+SDSChip = __decorateClass$d([
+  t$1("sds-chip")
+], SDSChip);
+const styles$c = i$4`
+	:host {
+		display: block;
+	}
+
+	.sds-detail {
+		font-family: var(--sds-typography-font-family);
+		font-size: 0.75rem;
+		line-height: 1.333;
+		color: var(--sds-color-semantic-text-default);
+		margin: 0;
+		max-width: var(--sds-typography-max-line-width);
+		padding: 0;
+	}
+
+	.sds-detail--text {
+		font-weight: 400;
+	}
+
+	.sds-detail--label {
+		font-weight: 500;
+	}
+`;
+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])
+      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 {
+  constructor() {
+    super(...arguments);
+    this.variation = "text";
+  }
+  render() {
+    const styleClasses = {
+      "sds-detail": true,
+      "sds-detail--text": this.variation === "text",
+      "sds-detail--label": this.variation === "label"
+    };
+    const classes = e$1(styleClasses);
+    return x`<p class=${classes}><slot></slot></p>`;
+  }
+};
+SDSDetail.styles = [styles$c];
+__decorateClass$c([
+  n2({ type: String })
+], SDSDetail.prototype, "variation", 2);
+SDSDetail = __decorateClass$c([
+  t$1("sds-detail")
+], SDSDetail);
+const styles$b = i$4`
+	:host {
+		--_heading-text-align: left;
+		display: inline-block;
+	}
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	.sds-heading {
+		font-family: var(--sds-typography-font-family);
+		color: var(--sds-color-semantic-text-default);
+		display: inline-block;
+		margin: 0;
+		max-width: var(--sds-typography-max-line-width);
+		padding: 0;
+		text-align: var(--_heading-text-align);
+	}
+
+	h1,
+	.sds-heading--xl {
+		font-size: 2rem;
+		font-weight: 700;
+		line-height: 1.24;
+	}
+
+	@media (min-width: 640px) {
+		h1,
+		.sds-heading--xl {
+			font-size: 2.5rem;
+			font-weight: 700;
+			line-height: 1.4;
+		}
+	}
+
+	h2,
+	.sds-heading--l {
+		font-size: 1.5rem;
+		font-weight: 500;
+		line-height: 1.333;
+	}
+
+	@media (min-width: 640px) {
+		h2,
+		.sds-heading--l {
+			font-size: 2rem;
+			font-weight: 700;
+			line-height: 1.24;
+		}
+	}
+
+	h3,
+	.sds-heading--m {
+		font-size: 1.25rem;
+		font-weight: 500;
+		line-height: 1.4;
+	}
+
+	@media (min-width: 640px) {
+		h3,
+		.sds-heading--m {
+			font-size: 1.5rem;
+			font-weight: 500;
+			line-height: 1.333;
+		}
+	}
+
+	h4,
+	.sds-heading--s {
+		font-size: 1.125rem;
+		font-weight: 500;
+		line-height: 1.333;
+	}
+
+	@media (min-width: 640px) {
+		h4,
+		.sds-heading--s {
+			font-size: 1.25rem;
+			font-weight: 500;
+			line-height: 1.4;
+		}
+	}
+
+	h5,
+	h6,
+	.sds-heading--xs {
+		font-size: 1.063rem;
+		line-height: 1.3529;
+	}
+
+	@media (min-width: 640px) {
+		h5,
+		h6,
+		.sds-heading--xs {
+			font-size: 1.125rem;
+			font-weight: 500;
+			line-height: 1.333;
+		}
+	}
+`;
+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])
+      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 {
+  constructor() {
+    super(...arguments);
+    this.level = "h1";
+  }
+  render() {
+    const headingClasses = {
+      "sds-heading": true,
+      "sds-heading--xl": this.as === "xl",
+      "sds-heading--l": this.as === "l",
+      "sds-heading--m": this.as === "m",
+      "sds-heading--s": this.as === "s",
+      "sds-heading--xs": this.as === "xs"
+    };
+    const classes = e$1(headingClasses);
+    switch (this.level.toLowerCase()) {
+      case "h1":
+        return x`<h1 class=${classes}><slot></slot></h1>`;
+      case "h2":
+        return x`<h2 class=${classes}><slot></slot></h2>`;
+      case "h3":
+        return x`<h3 class=${classes}><slot></slot></h3>`;
+      case "h4":
+        return x`<h4 class=${classes}><slot></slot></h4>`;
+      case "h5":
+        return x`<h5 class=${classes}><slot></slot></h5>`;
+      case "h6":
+        return x`<h6 class=${classes}><slot></slot></h6>`;
+      default:
+        return x`<h1 class=${classes}><slot></slot></h1>`;
+    }
+  }
+};
+SDSHeading.styles = [styles$b];
+__decorateClass$b([
+  n2({ type: String })
+], SDSHeading.prototype, "level", 2);
+__decorateClass$b([
+  n2({ type: String })
+], SDSHeading.prototype, "as", 2);
+SDSHeading = __decorateClass$b([
+  t$1("sds-heading")
+], SDSHeading);
+const styles$a = i$4`
+	:host {
+		display: block;
+	}
+
+	.sds-label {
+		font-family: var(--sds-typography-font-family);
+		font-weight: 500;
+		color: var(--sds-color-semantic-text-default);
+		margin: 0;
+		max-width: var(--sds-typography-max-line-width);
+		padding: 0;
+	}
+
+	.sds-label--l {
+		font-size: 1.125rem;
+		line-height: 1.333;
+	}
+
+	.sds-label--m {
+		font-size: 1rem;
+		line-height: 1.5;
+	}
+
+	.sds-label--s {
+		font-size: 0.875rem;
+		line-height: 1.428;
+	}
+`;
+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])
+      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 {
+  constructor() {
+    super(...arguments);
+    this.size = "l";
+  }
+  render() {
+    const styleClasses = {
+      "sds-label": true,
+      "sds-label--l": this.size === "l",
+      "sds-label--m": this.size === "m",
+      "sds-label--s": this.size === "s"
+    };
+    const classes = e$1(styleClasses);
+    return x`<label for="${o$1(this.for)}" class=${classes}><slot></slot></label>`;
+  }
+};
+SDSLabel.styles = [styles$a];
+__decorateClass$a([
+  n2({ type: String })
+], SDSLabel.prototype, "size", 2);
+__decorateClass$a([
+  n2({ type: String })
+], SDSLabel.prototype, "for", 2);
+SDSLabel = __decorateClass$a([
+  t$1("sds-label")
+], SDSLabel);
+const styles$9 = i$4`
+	:host {
+		display: inline;
+	}
+
+	:host([display-type='block']) {
+		display: block;
+		max-width: var(--sds-typography-max-line-width);
+
+		.sds-link {
+			display: block;
+			max-width: var(--sds-typography-max-line-width);
+		}
+	}
+
+	:host([display-type='inline-block']) {
+		display: inline-block;
+
+		.sds-link {
+			display: inline-block;
+			max-width: var(--sds-typography-max-line-width);
+		}
+	}
+
+	:host([display-type='inline']) {
+		display: inline;
+	}
+
+	.sds-link {
+		color: var(--sds-color-semantic-text-default);
+		display: inline;
+		font-family: var(--sds-typography-font-family);
+		font-weight: 400;
+		line-height: 1.333;
+		margin: 0;
+		padding: 0;
+
+		&:link,
+		&:visited {
+			color: var(--sds-color-semantic-text-action-default);
+			text-decoration: underline;
+			text-decoration-thickness: 1px;
+			text-underline-offset: 2px;
+		}
+
+		&:active {
+			color: var(--sds-color-semantic-text-action-active);
+		}
+
+		&:hover {
+			color: var(--sds-color-semantic-text-action-hover);
+		}
+
+		&:focus {
+			border-radius: 4px;
+			outline: 2px solid var(--sds-color-semantic-border-focus);
+			outline-offset: 2px;
+		}
+	}
+
+	.sds-link--l {
+		font-size: 1.125rem;
+	}
+
+	.sds-link--m {
+		font-size: 1rem;
+	}
+
+	.sds-link--s {
+		font-size: 0.875rem;
+	}
+`;
+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])
+      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 {
+  constructor() {
+    super(...arguments);
+    this.size = "m";
+  }
+  render() {
+    const styleClasses = {
+      "sds-link": true,
+      "sds-link--l": this.size === "l",
+      "sds-link--m": this.size === "m",
+      "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}
+			><slot></slot
+		></a>`;
+  }
+};
+SDSLink.styles = [styles$9];
+__decorateClass$9([
+  n2({ type: String })
+], SDSLink.prototype, "href", 2);
+__decorateClass$9([
+  n2({ type: String })
+], SDSLink.prototype, "size", 2);
+__decorateClass$9([
+  n2({ type: String })
+], SDSLink.prototype, "target", 2);
+SDSLink = __decorateClass$9([
+  t$1("sds-link")
+], SDSLink);
+const styles$8 = i$4`
+	:host {
+		line-height: 0;
+	}
+
+	.sds-loader {
+		width: 24px;
+		height: 24px;
+		border: 3px solid currentColor;
+		border-bottom-color: transparent;
+		border-radius: 50%;
+		display: inline-block;
+		box-sizing: border-box;
+		animation: rotation 1s linear infinite;
+
+		&.sds-loader--medium {
+			width: 18px;
+			height: 18px;
+			border-width: 2px;
+		}
+
+		&.sds-loader--small {
+			width: 14px;
+			height: 14px;
+			border-width: 2px;
+		}
+	}
+
+	@keyframes rotation {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+`;
+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])
+      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 {
+  constructor() {
+    super(...arguments);
+    this.size = "large";
+    this.color = "currentColor";
+  }
+  render() {
+    const loaderClasses = {
+      "sds-loader": true,
+      "sds-loader--medium": this.size === "medium",
+      "sds-loader--small": this.size === "small"
+    };
+    return x`<span class="${e$1(loaderClasses)}" style="${`color:${this.color}`}"></span>`;
+  }
+};
+SDSLoader.styles = [styles$8];
+__decorateClass$8([
+  n2({ type: String, reflect: true })
+], SDSLoader.prototype, "size", 2);
+__decorateClass$8([
+  n2({ type: String, reflect: true })
+], SDSLoader.prototype, "color", 2);
+SDSLoader = __decorateClass$8([
+  t$1("sds-loader")
+], SDSLoader);
+const styles$7 = i$4`
+	.sds-nav-card {
+		color: var(--sds-color-semantic-text-default);
+		background-color: var(
+			--sds-color-global-lightblue-100
+		); // TODO: Global variable used, should be replaced by a more spesific one
+
+		font-size: var(--sds-typography-base-font-size);
+		line-height: var(--sds-typography-base-line-height);
+		font-weight: var(--sds-typography-base-font-weight);
+		font-family: var(--sds-typography-font-family);
+
+		display: flex;
+		min-height: 10.25rem;
+		height: 100%;
+		width: 100%;
+		max-width: 50rem;
+
+		box-sizing: border-box;
+		padding: var(--sds-spacing-7) var(--sds-spacing-9) var(--sds-spacing-8);
+		gap: var(--sds-spacing-5);
+		text-align: left;
+
+		border-radius: var(--sds-radius-card);
+		border: 1px solid transparent;
+
+		cursor: pointer;
+
+		& p {
+			padding: 0;
+			margin: 0;
+			hyphens: auto;
+		}
+
+		&:link {
+			text-decoration: none;
+		}
+
+		&:hover {
+			background-color: var(
+				--sds-color-global-lightblue-300
+			); // TODO: Global variable used, should be replaced by a more spesific one
+
+			.sds-nav-card__heading {
+				text-decoration: none;
+			}
+		}
+
+		&:active,
+		&:focus:active {
+			background-color: var(--sds-color-semantic-surface-action-selected);
+			color: var(--sds-color-semantic-text-on-action);
+
+			.sds-nav-card__heading {
+				text-decoration: underline;
+				text-decoration-thickness: 0.075rem;
+			}
+
+			::slotted(*) {
+				stroke: var(--sds-color-semantic-icon-on-action);
+			}
+		}
+
+		&:focus {
+			border: 1px solid var(--sds-color-semantic-border-focus);
+			background: var(
+				--sds-color-global-lightblue-100
+			); // TODO: Global variable used, should be replaced by a more spesific one
+		}
+
+		&:disabled {
+			background-color: var(--sds-color-semantic-surface-disabled);
+			pointer-events: none;
+		}
+	}
+
+	.sds-nav-card--hasIcon {
+		padding: var(--sds-spacing-7) var(--sds-spacing-7) var(--sds-spacing-8);
+	}
+
+	.sds-nav-card__content {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		gap: var(--sds-spacing-3);
+	}
+
+	.sds-nav-card__text {
+		display: -webkit-box;
+		-webkit-line-clamp: 3;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	::slotted(*) {
+		height: 4.5rem;
+		min-width: 4.5rem;
+		width: 4.5rem;
+		align-self: center;
+		stroke: var(
+			--sds-color-global-black
+		); // TODO: Global variable used, should be replaced by a more spesific one
+	}
+
+	.sds-nav-card__heading {
+		font-weight: 700;
+		font-size: 1.5rem;
+		margin: 0;
+		text-decoration: underline;
+		text-decoration-thickness: 0.075rem;
+		text-underline-offset: 0.146rem;
+	}
+
+	.sds-nav-card--medium {
+		min-height: 7rem;
+
+		.sds-nav-card__text {
+			display: -webkit-box;
+			display: flex;
+
+			-webkit-line-clamp: 1;
+			-webkit-box-orient: vertical;
+
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		::slotted(*) {
+			height: 3rem;
+			min-width: 3rem;
+			width: 3rem;
+		}
+	}
+
+	.sds-nav-card--small {
+		min-height: 4.5rem;
+		padding: var(--sds-spacing-5) var(--sds-spacing-8) var(--sds-spacing-6);
+
+		.sds-nav-card--hasIcon {
+			padding: var(--sds-spacing-5) var(--sds-spacing-7)
+				var(--sds-spacing-6);
+		}
+
+		.sds-nav-card__content {
+			gap: 0;
+			align-self: center;
+		}
+
+		::slotted(*) {
+			height: 2.5rem;
+			min-width: 2.5rem;
+			width: 2.5rem;
+		}
+	}
+`;
+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])
+      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 {
+  constructor() {
+    super(...arguments);
+    this.size = "large";
+    this.level = "h2";
+    this.hasIcon = false;
+  }
+  firstUpdated() {
+    this._checkSlotContent();
+  }
+  _handleSlotChange() {
+    this._checkSlotContent();
+  }
+  _filterToMeaningfulNodes(nodes) {
+    return nodes.filter((node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        const textContent = node.textContent;
+        return textContent !== null && textContent.trim().length > 0;
+      }
+      return true;
+    });
+  }
+  _checkSlotContent() {
+    const assignedNodes = this.iconSlot.assignedNodes({ flatten: true });
+    const meaningfulNodes = this._filterToMeaningfulNodes(assignedNodes);
+    this.hasIcon = meaningfulNodes.length !== 0;
+  }
+  _renderHeading() {
+    const headingClass = "sds-nav-card__heading";
+    switch (this.level) {
+      case "h2":
+        return x`<h2 class="${headingClass}">${this.heading}</h2>`;
+      case "h3":
+        return x`<h3 class="${headingClass}">${this.heading}</h3>`;
+      case "h4":
+        return x`<h4 class="${headingClass}">${this.heading}</h4>`;
+      case "h5":
+        return x`<h5 class="${headingClass}">${this.heading}</h5>`;
+      case "h6":
+        return x`<h6 class="${headingClass}">${this.heading}</h6>`;
+      default:
+        return x`<h2 class="${headingClass}">${this.heading}</h2>`;
+    }
+  }
+  render() {
+    const navCardClasses = {
+      "sds-nav-card": true,
+      "sds-nav-card--hasIcon": this.hasIcon,
+      "sds-nav-card--small": this.size === "small",
+      "sds-nav-card--medium": this.size === "medium",
+      "sds-nav-card--large": this.size === "large"
+    };
+    return x`
+			<a class="${e$1(navCardClasses)}" href="${this.link}">
+				<slot name="before" @slotchange=${this._handleSlotChange}></slot>
+				<div class="sds-nav-card__content">
+					${this._renderHeading()}
+					<slot></slot>
+				</div>
+			</a>
+		`;
+  }
+};
+SDSNavCard.styles = [styles$7];
+__decorateClass$7([
+  n2({ type: String, reflect: true })
+], SDSNavCard.prototype, "size", 2);
+__decorateClass$7([
+  n2({ type: String, reflect: true })
+], SDSNavCard.prototype, "heading", 2);
+__decorateClass$7([
+  n2({ type: String, reflect: true })
+], SDSNavCard.prototype, "level", 2);
+__decorateClass$7([
+  n2({ type: String, reflect: true })
+], SDSNavCard.prototype, "link", 2);
+__decorateClass$7([
+  r2()
+], SDSNavCard.prototype, "hasIcon", 2);
+__decorateClass$7([
+  e$3("slot")
+], SDSNavCard.prototype, "iconSlot", 2);
+SDSNavCard = __decorateClass$7([
+  t$1("sds-nav-card")
+], SDSNavCard);
+const styles$6 = i$4`
+	:host {
+		display: block;
+		box-sizing: border-box;
+	}
+
+	.sds-notification {
+		font-family: var(--sds-typography-font-family);
+		font-size: 1rem;
+		font-weight: 400;
+		line-height: 1.25;
+
+		display: flex;
+		gap: 0.5rem;
+
+		background-color: var(--sds-color-semantic-surface-info-subtle);
+		border: 1px solid var(--sds-color-semantic-surface-info-xtreme);
+		color: var(--sds-color-semantic-text-default);
+
+		text-align: left;
+	}
+
+	.sds-notification--success {
+		background-color: var(--sds-color-semantic-surface-ok-subtle);
+		border-color: var(--sds-color-semantic-surface-ok-xtreme);
+
+		.sds-notification__type {
+			background-color: var(--sds-color-semantic-surface-ok-xtreme);
+		}
+	}
+
+	.sds-notification--attention {
+		background-color: var(--sds-color-semantic-surface-attention-subtle);
+		border-color: var(--sds-color-semantic-surface-attention-xtreme);
+
+		.sds-notification__type {
+			background-color: var(--sds-color-semantic-surface-attention-xtreme);
+		}
+	}
+
+	.sds-notification--warning {
+		background-color: var(--sds-color-semantic-surface-warning-subtle);
+		border-color: var(--sds-color-semantic-surface-warning-xtreme);
+
+		.sds-notification__type {
+			background-color: var(--sds-color-semantic-surface-warning-xtreme);
+		}
+
+		.sds-notification__icon::before {
+			width: 4px;
+			height: 14px;
+		}
+	}
+
+	.sds-notification--critical {
+		background-color: var(--sds-color-semantic-surface-critical-subtle);
+		border-color: var(--sds-color-semantic-surface-critical-xtreme);
+
+		.sds-notification__type {
+			background-color: var(--sds-color-semantic-surface-critical-xtreme);
+		}
+
+		.sds-notification__icon::before {
+			width: 10px;
+			height: 10px;
+		}
+	}
+
+	.sds-notification__type {
+		background-color: var(--sds-color-semantic-surface-info-xtreme);
+		color: white;
+		padding: 1rem 0.5rem;
+	}
+
+	.sds-notification__content {
+		display: flex;
+		flex: 1;
+		gap: 1rem;
+		padding: 1rem 0.5rem;
+	}
+
+	.sds-notification__content-text {
+		flex: 1;
+	}
+
+	::slotted([slot='title']),
+	::slotted(:is(h1, h2, h3, h4, h5, h6)) {
+		color: var(--sds-color-semantic-text-default) !important;
+		font-size: 1rem !important;
+		font-style: normal !important;
+		font-weight: 700 !important;
+		line-height: 1.5 !important;
+		margin: 0 !important;
+		max-width: var(--sds-typography-max-line-width) !important;
+	}
+
+	::slotted([slot='message']),
+	::slotted(:is(p)) {
+		color: var(--sds-color-semantic-text-default) !important;
+		font-size: 1rem !important;
+		font-style: normal !important;
+		font-weight: 400 !important;
+		line-height: 1.5 !important;
+		margin: 0 !important;
+		max-width: var(--sds-typography-max-line-width) !important;
+	}
+
+	.sds-notification__icon {
+		display: block;
+		position: relative;
+		z-index: 1;
+
+		&::before {
+			content: '';
+			display: block;
+			width: 14px;
+			height: 14px;
+			background-color: black;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			z-index: -1;
+		}
+	}
+
+	.sds-notification__remove-btn {
+		border: 0;
+		border-radius: var(--sds-radius-4);
+		background: transparent;
+		cursor: pointer;
+		flex: 0 1 auto;
+		padding: 0;
+		width: 24px;
+		height: 24px;
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		&:focus {
+			outline: 2px solid var(--sds-color-semantic-surface-action-default);
+			outline-offset: 1px;
+		}
+
+		&:hover {
+			background-color: var(--sds-color-semantic-surface-action-subtle);
+			border: 2px solid var(--sds-color-semantic-surface-action-hover);
+		}
+
+		&:active {
+			background-color: var(--sds-color-semantic-surface-action-active);
+			border: 2px solid var(--sds-color-semantic-surface-action-active);
+			color: var(--sds-color-semantic-text-on-action);
+			outline: 0;
+		}
+	}
+`;
+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])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$6(target, key, result);
+  return result;
+};
+const notificationIcons = {
+  info: "info-material-filled",
+  success: "check_circle-material-filled",
+  attention: "error-material-filled",
+  warning: "warning-material-filled",
+  critical: "dangerous-material-filled"
+};
+let SDSNotification = class extends r$2 {
+  constructor() {
+    super(...arguments);
+    this.variant = "info";
+    this._remove = () => {
+      this.dispatchEvent(
+        new CustomEvent("sds-remove", {
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+  }
+  render() {
+    const notificationClasses = {
+      "sds-notification": true,
+      [`sds-notification--${this.variant}`]: true
+    };
+    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>
+			</div>
+			<div class="sds-notification__content">
+				<div class="sds-notification__content-text">
+					<slot name="title"></slot>
+					<slot name="message"></slot>
+				</div>
+				${this.removableLabel ? x`<button
+							class="sds-notification__remove-btn"
+							@click=${this._remove}
+							aria-label="${this.removableLabel}"
+						>
+							<sds-icon name="close-material-outlined" size="s"></sds-icon>
+						</button>` : E}
+			</div>
+		</div>`;
+  }
+};
+SDSNotification.styles = [styles$6];
+__decorateClass$6([
+  n2({ type: String, reflect: true })
+], SDSNotification.prototype, "variant", 2);
+__decorateClass$6([
+  n2({ type: String, attribute: "removable-label", reflect: true })
+], SDSNotification.prototype, "removableLabel", 2);
+SDSNotification = __decorateClass$6([
+  t$1("sds-notification")
+], SDSNotification);
+const styles$5 = i$4`
+	:host {
+		display: block;
+	}
+
+	.sds-paragraph {
+		font-family: var(--sds-typography-font-family);
+		font-weight: 400;
+		color: var(--sds-color-semantic-text-default);
+		margin: 0;
+		max-width: var(--sds-typography-max-line-width);
+		padding: 0;
+	}
+
+	.sds-paragraph--xl {
+		font-size: 1.25rem;
+		line-height: 1.4;
+	}
+
+	.sds-paragraph--l {
+		font-size: 1.125rem;
+		line-height: 1.333;
+	}
+
+	.sds-paragraph--m {
+		font-size: 1rem;
+		line-height: 1.5;
+	}
+
+	@media (max-width: 640px) {
+		.sds-paragraph--m {
+			line-height: 1.375;
+		}
+	}
+`;
+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])
+      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 {
+  constructor() {
+    super(...arguments);
+    this.size = "xl";
+  }
+  render() {
+    const styleClasses = {
+      "sds-paragraph": true,
+      "sds-paragraph--xl": this.size === "xl",
+      "sds-paragraph--l": this.size === "l",
+      "sds-paragraph--m": this.size === "m"
+    };
+    const classes = e$1(styleClasses);
+    return x`<p class=${classes}><slot></slot></p>`;
+  }
+};
+SDSParagraph.styles = [styles$5];
+__decorateClass$5([
+  n2({ type: String })
+], SDSParagraph.prototype, "size", 2);
+SDSParagraph = __decorateClass$5([
+  t$1("sds-paragraph")
+], SDSParagraph);
+const styles$4 = i$4`
+	:host {
+		flex: 0 0 auto;
+	}
+
+	.sds-radio__label {
+		align-items: flex-start;
+		cursor: pointer;
+		color: var(--sds-color-semantic-text-default);
+		display: inline-flex;
+		font-family: var(--sds-typography-font-family);
+		font-size: 1rem;
+		font-weight: 400;
+		gap: var(--sds-spacing-3);
+		line-height: 1.25;
+
+		&:has(:disabled) {
+			cursor: default;
+			pointer-events: none;
+		}
+	}
+
+	.sds-radio__input {
+		appearance: none;
+		background-color: transparent;
+		color: currentColor;
+		cursor: pointer;
+		width: 24px;
+		height: 24px;
+		border: 2px solid var(--sds-color-semantic-border-default);
+		border-radius: 50%;
+		margin: 0;
+		position: relative;
+
+		&:checked {
+			background-color: white;
+			border-color: var(--sds-color-semantic-surface-action-selected);
+			border-width: 3px;
+
+			&::after {
+				content: '';
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				width: 12px;
+				height: 12px;
+				background-color: var(--sds-color-semantic-icon-action-default);
+				border-radius: 50%;
+				transform: translate(-50%, -50%);
+			}
+		}
+
+		&:hover {
+			border-width: 3px;
+
+			&:checked {
+				&::after {
+					width: 12px;
+					height: 12px;
+					transform: translate(-50%, -50%);
+				}
+			}
+		}
+
+		&:focus {
+			outline: 2px solid var(--sds-color-semantic-border-focus);
+			outline-offset: 1px;
+		}
+
+		&.sds-radio__input--error {
+			border: 2px solid var(--sds-color-semantic-surface-critical-xtreme);
+
+			&:checked {
+				&::after {
+					width: 12px;
+					height: 12px;
+					transform: translate(-50%, -50%);
+				}
+			}
+		}
+
+		&:disabled {
+			border: 2px solid var(--sds-color-semantic-border-disabled);
+
+			&:checked {
+				border-width: 3px;
+				background-color: white;
+
+				&::after {
+					background-color: var(--sds-color-semantic-border-disabled);
+					width: 12px;
+					height: 12px;
+				}
+			}
+
+			& + .sds-radio__text {
+				color: var(--sds-color-semantic-border-disabled);
+			}
+		}
+	}
+
+	.sds-radio__text {
+		display: inline-block;
+		max-width: var(--sds-typography-max-line-width);
+		padding-top: 2px;
+	}
+`;
+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])
+      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 {
+  constructor() {
+    super();
+    this.disabled = false;
+    this.required = false;
+    this.label = "";
+    this.hideLabel = false;
+    this.checked = false;
+    this.error = false;
+    this._initialChecked = false;
+    this._handleKeydown = (event) => {
+      if (!this.name || this.disabled) return;
+      const root = this.getRootNode();
+      const radios = Array.from(root.querySelectorAll(`sds-radio[name="${this.name}"]`));
+      const currentIndex = radios.indexOf(this);
+      if (currentIndex === -1) return;
+      let targetIndex = null;
+      switch (event.key) {
+        case "ArrowUp":
+        case "ArrowLeft":
+          targetIndex = currentIndex > 0 ? currentIndex - 1 : radios.length - 1;
+          break;
+        case "ArrowDown":
+        case "ArrowRight":
+          targetIndex = currentIndex < radios.length - 1 ? currentIndex + 1 : 0;
+          break;
+        default:
+          return;
+      }
+      const targetRadio = radios[targetIndex];
+      targetRadio?.focus();
+      event.preventDefault();
+    };
+    this._handleChange = (event) => {
+      if (!this.disabled) {
+        const elem = event.target;
+        this.checked = elem.checked;
+        this._validate();
+        this.dispatchEvent(
+          new CustomEvent("change", {
+            detail: { checked: this.checked, value: this.value },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    };
+    this._handleFocus = (event) => {
+      event.stopImmediatePropagation();
+      this.dispatchEvent(new CustomEvent("focus", { bubbles: true, composed: true }));
+    };
+    this._handleBlur = (event) => {
+      event.stopImmediatePropagation();
+      this.dispatchEvent(new CustomEvent("blur", { bubbles: true, composed: true }));
+    };
+    this.internals = this.attachInternals();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.internals.role = "radio";
+    if (!this._initialChecked) {
+      this._initialChecked = this.checked;
+    }
+    this._validate();
+    this.addEventListener("keydown", this._handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this._handleKeydown);
+  }
+  formResetCallback() {
+    this.checked = this._initialChecked;
+    this.control.checked = this._initialChecked;
+    this.internals.setFormValue(this.checked ? this.value ?? null : null);
+    this._validate();
+  }
+  _validate() {
+    if (this.required && !this.checked) {
+      this.setCustomValidity("This field is required.");
+    } else {
+      this.setCustomValidity("");
+    }
+  }
+  updated(changedProperties) {
+    super.updated?.(changedProperties);
+    if (changedProperties.has("checked")) {
+      this._validate();
+      if (this.checked) {
+        this._uncheckSiblings();
+        this.internals.setFormValue(this.value ?? null);
+      } else {
+        this.internals.setFormValue(null);
+      }
+    }
+    if (changedProperties.has("required") && this.control) {
+      this.control.required = this.required;
+    }
+  }
+  _uncheckSiblings() {
+    if (!this.name) return;
+    const root = this.getRootNode();
+    const radios = root.querySelectorAll(`sds-radio[name="${this.name}"]`);
+    radios.forEach((radio) => {
+      if (radio !== this) {
+        radio.checked = false;
+        radio.internals.setFormValue(null);
+        const input = radio.shadowRoot?.querySelector("#control");
+        if (input) {
+          input.checked = false;
+        }
+      }
+    });
+  }
+  get form() {
+    return this.internals.form;
+  }
+  get type() {
+    return this.localName;
+  }
+  get validity() {
+    return this.internals.validity;
+  }
+  get validationMessage() {
+    return this.internals.validationMessage;
+  }
+  get willValidate() {
+    return this.internals.willValidate;
+  }
+  checkValidity() {
+    return this.internals.checkValidity();
+  }
+  reportValidity() {
+    return this.internals.reportValidity();
+  }
+  setCustomValidity(message) {
+    this.internals.setValidity({ customError: !!message }, message);
+  }
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+    if (this.control) this.control.disabled = disabled;
+  }
+  focus() {
+    if (!this.disabled) this.shadowRoot?.querySelector("input")?.focus();
+  }
+  blur() {
+    if (!this.disabled) this.shadowRoot?.querySelector("input")?.blur();
+  }
+  click() {
+    if (!this.disabled) this.shadowRoot?.querySelector("input")?.click();
+  }
+  render() {
+    const radioClasses = {
+      "sds-radio": true,
+      "sds-radio--error": Boolean(this.error)
+    };
+    const inputClasses = {
+      "sds-radio__input": true,
+      "sds-radio__input--error": Boolean(this.error)
+    };
+    return x`
+			<div class="${e$1(radioClasses)}">
+				<label class="sds-radio__label">
+					<input
+						id="control"
+						type="radio"
+						name="${o$1(this.name)}"
+						value="${o$1(this.value)}"
+						?checked="${this.checked}"
+						?disabled="${this.disabled}"
+						@change="${this._handleChange}"
+						@focus="${this._handleFocus}"
+						@blur="${this._handleBlur}"
+						class="${e$1(inputClasses)}"
+					/>
+					${this.label ? x`<span class="sds-radio__text">${this.label}</span>` : E}
+				</label>
+			</div>
+		`;
+  }
+};
+SDSRadio.styles = [styles$4];
+SDSRadio.formAssociated = true;
+__decorateClass$4([
+  n2({ type: Boolean, reflect: true })
+], SDSRadio.prototype, "disabled", 2);
+__decorateClass$4([
+  n2({ type: Boolean, reflect: true })
+], SDSRadio.prototype, "required", 2);
+__decorateClass$4([
+  n2({ type: String, reflect: true })
+], SDSRadio.prototype, "label", 2);
+__decorateClass$4([
+  n2({ type: Boolean, reflect: true, attribute: "hide-label" })
+], SDSRadio.prototype, "hideLabel", 2);
+__decorateClass$4([
+  n2({ type: String, reflect: true })
+], SDSRadio.prototype, "name", 2);
+__decorateClass$4([
+  n2({ type: String })
+], SDSRadio.prototype, "value", 2);
+__decorateClass$4([
+  n2({ type: Boolean, reflect: true })
+], SDSRadio.prototype, "checked", 2);
+__decorateClass$4([
+  n2({ type: Boolean, reflect: true })
+], SDSRadio.prototype, "error", 2);
+__decorateClass$4([
+  e$3("#control")
+], SDSRadio.prototype, "control", 2);
+SDSRadio = __decorateClass$4([
+  t$1("sds-radio")
+], SDSRadio);
+const styles$3 = i$4`
+	.sds-radio-group {
+		border: 0;
+		margin: 0;
+		padding: 0;
+	}
+
+	.sds-radio-group__legend {
+		color: var(--sds-color-semantic-text-default);
+		font-family: var(--sds-typography-font-family);
+		font-size: 1rem;
+		font-weight: 600;
+		line-height: 1.5;
+		margin: 0 0 var(--sds-spacing-2) 0;
+		max-width: var(--sds-typography-max-line-width);
+		padding: 0;
+	}
+
+	.sds-radio-group__help-text {
+		color: var(--sds-color-semantic-text-subtle);
+		font-family: var(--sds-typography-font-family);
+		font-size: 1rem;
+		font-weight: 400;
+		line-height: 1.25rem;
+		margin: 0;
+		max-width: var(--sds-typography-max-line-width);
+	}
+
+	.sds-radio-group__radios {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sds-spacing-5);
+		margin-top: var(--sds-spacing-3);
+	}
+
+	.sds-radio-group__error-message {
+		margin: var(--sds-spacing-5) 0 0;
+		max-width: var(--sds-typography-max-line-width);
+		align-items: flex-start;
+		color: var(--sds-color-semantic-text-default);
+		display: flex;
+		line-height: 1.5rem;
+		gap: var(--sds-spacing-2);
+	}
+`;
+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])
+      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 {
+  constructor() {
+    super(...arguments);
+    this.selectedValue = null;
+    this._handleRadioChange = (event) => {
+      const target = event.composedPath().find((el) => el instanceof HTMLElement && el.tagName === "SDS-RADIO");
+      if (target) {
+        this.selectedValue = target.getAttribute("value") || null;
+        this.dispatchEvent(
+          new CustomEvent("change", {
+            detail: { selectedValue: this.selectedValue },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    };
+  }
+  render() {
+    return x`
+			<fieldset class="sds-radio-group">
+				${this.legend ? x`<legend class="sds-radio-group__legend">${this.legend}</legend>` : E}
+				${this.helpText ? x`<p class="sds-radio-group__help-text">${this.helpText}</p>` : E}
+				<div class="sds-radio-group__radios" @change=${this._handleRadioChange}>
+					<slot></slot>
+				</div>
+				${this.errorMessage ? x`<p class="sds-radio-group__error-message">
+							<sds-icon
+								name="warning-material-filled"
+								size="m"
+								color="var(--sds-color-semantic-icon-critical)"
+							></sds-icon>
+							${this.errorMessage}
+						</p>` : E}
+			</fieldset>
+		`;
+  }
+};
+SDSRadioGroup.styles = [styles$3];
+__decorateClass$3([
+  n2({ type: String })
+], SDSRadioGroup.prototype, "legend", 2);
+__decorateClass$3([
+  n2({ type: String, attribute: "help-text" })
+], SDSRadioGroup.prototype, "helpText", 2);
+__decorateClass$3([
+  n2({ type: String, attribute: "error-message" })
+], SDSRadioGroup.prototype, "errorMessage", 2);
+__decorateClass$3([
+  r2()
+], SDSRadioGroup.prototype, "selectedValue", 2);
+SDSRadioGroup = __decorateClass$3([
+  t$1("sds-radio-group")
+], SDSRadioGroup);
+const styles$2 = i$4`
+	:host {
+		display: inline-flex;
+		contain: layout style;
+		box-sizing: border-box;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host(:disabled),
+	:host(:disabled) * {
+		pointer-events: none;
+	}
+
+	:host(:disabled) .sds-switch__input:checked::before {
+		content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23C4C6C7' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'></path></svg>");
+	}
+
+	:host(:disabled) .sds-switch__input:not(:checked)::before {
+		display: none;
+	}
+
+	:host(:disabled) .sds-switch__label {
+		color: var(--sds-color-semantic-text-disabled);
+	}
+
+	.sds-switch {
+		--_switch-motion-duration: 200ms;
+		--_switch-height: 32px;
+		--_switch-width: 60px;
+		--_switch-padding: 8px;
+		--_switch-icon-size: calc(var(--_switch-height) - (2 * var(--_switch-padding)));
+
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.sds-switch--small {
+		--_switch-height: 24px;
+		--_switch-width: 48px;
+		--_switch-padding: 6px;
+	}
+
+	.sds-switch:has(.sds-switch__input:checked) {
+		--_switch-padding: 6px;
+	}
+
+	.sds-switch--small:has(.sds-switch__input:checked) {
+		--_switch-padding: 4px;
+	}
+
+	.sds-switch__label {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		user-select: none;
+		color: var(--sds-color-semantic-text-default);
+		font-family: var(--sds-typography-font-family);
+		font-size: 1rem;
+		font-weight: 400;
+		line-height: 1.25;
+	}
+
+	.sds-switch__label--hidden:not(:focus):not(:active):not(:focus-within) {
+		clip-path: inset(50%);
+		height: 1px;
+		overflow: hidden;
+		position: absolute;
+		white-space: nowrap;
+		width: 1px;
+	}
+
+	.sds-switch__input {
+		--_switch-icon-position: var(--_switch-padding);
+
+		appearance: none;
+		cursor: pointer;
+		user-select: none;
+
+		inline-size: var(--_switch-width);
+		block-size: var(--_switch-height);
+		margin: 0;
+
+		flex-shrink: 0;
+		display: grid;
+		align-items: center;
+		grid: [track] 1fr / [track] 1fr;
+
+		transition: background-color var(--_switch-motion-duration);
+		border-radius: 1rem;
+		background-color: var(--sds-color-global-gray-300);
+	}
+
+	.sds-switch__input::before {
+		content: '';
+		grid-area: track;
+		inline-size: var(--_switch-icon-size);
+		block-size: var(--_switch-icon-size);
+
+		background-color: var(--sds-color-semantic-border-default);
+		transition: transform var(--_switch-motion-duration);
+		border-radius: 50%;
+		transform: translateX(var(--_switch-icon-position));
+	}
+
+	.sds-switch__input:focus-visible {
+		outline: 2px solid var(--sds-color-semantic-border-focus);
+		outline-offset: 2px;
+	}
+
+	.sds-switch__input:checked {
+		--_switch-icon-position: calc(var(--_switch-width) - var(--_switch-icon-size) - var(--_switch-padding));
+	}
+
+	.sds-switch__input:checked::before {
+		content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%230072ce' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'></path></svg>");
+		background-color: var(--sds-color-semantic-surface-default);
+	}
+`;
+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])
+      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 {
+  constructor() {
+    super();
+    this.disabled = false;
+    this.label = "";
+    this.hideLabel = false;
+    this.value = "";
+    this.reverse = false;
+    this.checked = false;
+    this.size = "l";
+    this._initialChecked = false;
+    this._handleChange = (event) => {
+      event.stopImmediatePropagation();
+      if (!this.disabled) {
+        const elem = event.target;
+        this.checked = elem.checked;
+        this.dispatchEvent(
+          new CustomEvent("change", {
+            detail: { checked: this.checked, value: this.value },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    };
+    this._handleFocus = (event) => {
+      event.stopImmediatePropagation();
+      if (!this.disabled) {
+        this.dispatchEvent(
+          new CustomEvent("focus", {
+            detail: { checked: this.checked, value: this.value },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    };
+    this._handleBlur = (event) => {
+      event.stopImmediatePropagation();
+      if (!this.disabled) {
+        this.dispatchEvent(
+          new CustomEvent("blur", {
+            detail: { checked: this.checked, value: this.value },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    };
+    this.internals = this.attachInternals();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this._initialChecked) {
+      this._initialChecked = this.checked;
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("checked")) {
+      this.control.checked = this.checked;
+      this.internals.setFormValue(this.checked ? this.value : null);
+    }
+  }
+  formResetCallback() {
+    this.checked = this._initialChecked;
+    this.control.checked = this._initialChecked;
+    this.internals.setFormValue(this._initialChecked ? this.value : null);
+  }
+  formStateRestoreCallback(state) {
+    this.checked = state;
+  }
+  render() {
+    const switchClasses = {
+      "sds-switch": true,
+      "sds-switch--small": this.size === "s"
+    };
+    const labelClasses = {
+      "sds-switch__label": true,
+      "sds-switch__label--hidden": this.hideLabel
+    };
+    const inputTemplate = x`<input
+			class="sds-switch__input"
+			id="control"
+			type="checkbox"
+			role="switch"
+			?checked="${this.checked}"
+			value="${o$1(this.value)}"
+			name="${o$1(this.name)}"
+			@change="${this._handleChange}"
+			@focus="${this._handleFocus}"
+			@blur="${this._handleBlur}"
+		/>`;
+    const labelTemplate = x`<label class="${e$1(labelClasses)}" for="control">${this.label}</label>`;
+    return x`<div class="${e$1(switchClasses)}">
+			${this.reverse ? [labelTemplate, inputTemplate] : [inputTemplate, labelTemplate]}
+		</div>`;
+  }
+};
+SDSSwitch.styles = [styles$2];
+SDSSwitch.formAssociated = true;
+__decorateClass$2([
+  n2({ type: Boolean, reflect: true })
+], SDSSwitch.prototype, "disabled", 2);
+__decorateClass$2([
+  n2({ type: String, reflect: true })
+], SDSSwitch.prototype, "label", 2);
+__decorateClass$2([
+  n2({ type: Boolean, reflect: true, attribute: "hide-label" })
+], SDSSwitch.prototype, "hideLabel", 2);
+__decorateClass$2([
+  n2({ type: String, reflect: false })
+], SDSSwitch.prototype, "name", 2);
+__decorateClass$2([
+  n2({ type: String, reflect: false })
+], SDSSwitch.prototype, "value", 2);
+__decorateClass$2([
+  n2({ type: Boolean, reflect: true })
+], SDSSwitch.prototype, "reverse", 2);
+__decorateClass$2([
+  n2({ type: Boolean, reflect: true })
+], SDSSwitch.prototype, "checked", 2);
+__decorateClass$2([
+  n2({ type: String, reflect: true })
+], SDSSwitch.prototype, "size", 2);
+__decorateClass$2([
+  e$3("#control")
+], SDSSwitch.prototype, "control", 2);
+SDSSwitch = __decorateClass$2([
+  t$1("sds-switch")
+], SDSSwitch);
+const styles$1 = i$4`
+	:host {
+		display: block;
+	}
+
+	.sds-text {
+		font-family: var(--sds-typography-font-family);
+		font-weight: 400;
+		color: var(--sds-color-semantic-text-default);
+		margin: 0;
+		max-width: var(--sds-typography-max-line-width);
+		padding: 0;
+	}
+
+	.sds-text--l {
+		font-size: 1.125rem;
+		line-height: 1.222;
+	}
+
+	.sds-text--m {
+		font-size: 1rem;
+		line-height: 1.25;
+	}
+
+	.sds-text--s {
+		font-size: 0.875rem;
+		line-height: 1.285;
+	}
+`;
+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])
+      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 {
+  constructor() {
+    super(...arguments);
+    this.size = "l";
+  }
+  render() {
+    const styleClasses = {
+      "sds-text": true,
+      "sds-text--l": this.size === "l",
+      "sds-text--m": this.size === "m",
+      "sds-text--s": this.size === "s"
+    };
+    const classes = e$1(styleClasses);
+    return x`<p class=${classes}><slot></slot></p>`;
+  }
+};
+SDSText.styles = [styles$1];
+__decorateClass$1([
+  n2({ type: String })
+], SDSText.prototype, "size", 2);
+SDSText = __decorateClass$1([
+  t$1("sds-text")
+], SDSText);
+const styles = i$4`
+	:host {
+		all: unset;
+		display: block;
+		text-align: start;
+	}
+
+	.sds-textfield {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		font-family: var(--sds-typography-font-family);
+
+		.sds-textfield__input-container {
+			max-width: var(--sds-typography-max-line-width);
+			position: relative;
+		}
+
+		.sds-textfield__input {
+			box-sizing: border-box;
+			color: var(--sds-color-semantic-text-default);
+			padding: 0.75rem 1rem;
+			line-height: 1.25rem;
+			font-size: 1rem;
+			justify-content: flex-end;
+			border-radius: var(--sds-radius-4);
+			border: 1px solid var(--sds-color-semantic-border-default);
+			background: var(--sds-color-semantic-surface-default);
+			max-width: var(--sds-typography-max-line-width);
+			width: 100%;
+
+			&:hover {
+				border-color: var(--sds-color-semantic-border-strong);
+			}
+
+			&:focus {
+				outline: 2px solid var(--sds-color-semantic-border-focus);
+				outline-offset: 1px;
+			}
+
+			&:active {
+				border-color: var(--sds-color-semantic-border-action);
+				outline: none;
+			}
+		}
+
+		.sds-textfield__label {
+			color: var(--sds-color-semantic-text-default);
+			display: block;
+			font-size: 1rem;
+			font-weight: 500;
+			line-height: 1.5rem;
+			max-width: var(--sds-typography-max-line-width);
+		}
+
+		.sds-textfield__help-text {
+			color: var(--sds-color-semantic-text-subtle);
+			font-size: 1rem;
+			font-weight: 400;
+			line-height: 1.25rem;
+			margin: 0;
+			max-width: var(--sds-typography-max-line-width);
+		}
+
+		.sds-textfield__error-message {
+			margin: 0;
+			max-width: var(--sds-typography-max-line-width);
+			align-items: flex-start;
+			color: var(--sds-color-semantic-text-default);
+			display: flex;
+			line-height: 1.5rem;
+			gap: 0.25rem;
+		}
+	}
+
+	.sds-textfield--error {
+		color: var(--sds-color-semantic-text-default);
+		line-height: 1.5rem;
+
+		.sds-textfield__input,
+		.sds-textfield__input:hover {
+			border-color: var(--sds-color-semantic-border-critical);
+		}
+	}
+
+	.sds-textfield--disabled {
+		pointer-events: none;
+
+		.sds-textfield__label,
+		.sds-textfield__help-text,
+		.sds-textfield__error-message,
+		.sds-textfield__input {
+			color: var(--sds-color-semantic-text-disabled);
+		}
+
+		.sds-textfield__input {
+			border: 1px solid var(--sds-color-semantic-border-disabled);
+		}
+	}
+
+	.sds-textfield--has-icon {
+		.sds-textfield__input {
+			padding-right: 3.5rem;
+		}
+	}
+
+	::slotted([slot='after']) {
+		position: absolute;
+		top: 50%;
+		right: 1rem;
+		transform: translateY(-50%);
+		pointer-events: none;
+	}
+`;
+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])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let SDSTextField = class extends r$2 {
+  constructor() {
+    super(...arguments);
+    this.type = "text";
+    this.disabled = false;
+    this.readOnly = false;
+    this.autocomplete = false;
+    this.hasIcon = false;
+    this.handleSlotChange = (e2) => {
+      const slot = e2.target;
+      this.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;
+    };
+    this._handleInput = (event) => {
+      event.stopImmediatePropagation();
+      if (!this.disabled) {
+        this.dispatchEvent(
+          new CustomEvent("input", {
+            detail: { value: event.target.value },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    };
+    this._handleChange = (event) => {
+      event.stopImmediatePropagation();
+      if (!this.disabled) {
+        this.dispatchEvent(
+          new CustomEvent("change", {
+            detail: { value: event.target.value },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    };
+    this._handleSelect = (event) => {
+      event.stopImmediatePropagation();
+      if (!this.disabled) {
+        const target = event.target;
+        const selectedText = target.value.substring(target.selectionStart ?? 0, target.selectionEnd ?? 0);
+        this.dispatchEvent(
+          new CustomEvent("select", {
+            detail: { selectedText },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    };
+    this._handleFocus = (event) => {
+      event.stopImmediatePropagation();
+      this.dispatchEvent(
+        new CustomEvent("focus", {
+          detail: { value: event.target.value },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+    this._handleBlur = (event) => {
+      event.stopImmediatePropagation();
+      this.dispatchEvent(
+        new CustomEvent("blur", {
+          detail: { value: event.target.value },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+  }
+  select() {
+    if (!this.disabled) this.shadowRoot?.querySelector("input")?.select();
+  }
+  focus() {
+    if (!this.disabled) this.shadowRoot?.querySelector("input")?.focus();
+  }
+  blur() {
+    if (!this.disabled) this.shadowRoot?.querySelector("input")?.blur();
+  }
+  click() {
+    if (!this.disabled) this.shadowRoot?.querySelector("input")?.click();
+  }
+  render() {
+    const textfieldClasses = {
+      "sds-textfield": true,
+      "sds-textfield--error": Boolean(this.errorMessage),
+      "sds-textfield--disabled": Boolean(this.disabled),
+      "sds-textfield--readonly": Boolean(this.readOnly),
+      "sds-textfield--has-icon": this.hasIcon
+    };
+    return x` <div class="${e$1(textfieldClasses)}">
+			${this.label ? x`<label for="sds-textfield" class="sds-textfield__label">${this.label}</label>` : E}
+			${this.helpText ? x`<p class="sds-textfield__help-text">${this.helpText}</p>` : E}
+			<div class="sds-textfield__input-container">
+				<input
+					class="sds-textfield__input"
+					type="${this.type}"
+					id="sds-textfield"
+					?disabled="${this.disabled}"
+					?readonly="${this.readOnly}"
+					placeholder="${o$1(this.placeholder)}"
+					value="${o$1(this.value)}"
+					name="${o$1(this.name)}"
+					autocomplete="${this.autocomplete ? "on" : "off"}"
+					@input="${this._handleInput}"
+					@change="${this._handleChange}"
+					@select="${this._handleSelect}"
+					@focus="${this._handleFocus}"
+					@blur="${this._handleBlur}"
+				/>
+				<slot name="after" @slotchange="${this.handleSlotChange}" aria-hidden="true"></slot>
+			</div>
+			${this.errorMessage ? x`<p class="sds-textfield__error-message">
+						<sds-icon
+							name="warning-material-filled"
+							size="m"
+							color="${!this.disabled ? `var(--sds-color-semantic-icon-critical)` : `var(--sds-color-semantic-icon-disabled)`}"
+						></sds-icon
+						>${this.errorMessage}
+					</p>` : E}
+		</div>`;
+  }
+};
+SDSTextField.styles = [styles];
+__decorateClass([
+  n2({ type: String })
+], SDSTextField.prototype, "type", 2);
+__decorateClass([
+  n2({ type: String })
+], SDSTextField.prototype, "value", 2);
+__decorateClass([
+  n2({ type: String })
+], SDSTextField.prototype, "name", 2);
+__decorateClass([
+  n2({ type: String })
+], SDSTextField.prototype, "label", 2);
+__decorateClass([
+  n2({ type: String })
+], SDSTextField.prototype, "placeholder", 2);
+__decorateClass([
+  n2({ type: String, attribute: "help-text" })
+], SDSTextField.prototype, "helpText", 2);
+__decorateClass([
+  n2({ type: String, attribute: "error-message" })
+], SDSTextField.prototype, "errorMessage", 2);
+__decorateClass([
+  n2({ type: Boolean })
+], SDSTextField.prototype, "disabled", 2);
+__decorateClass([
+  n2({ type: Boolean, attribute: "readonly" })
+], SDSTextField.prototype, "readOnly", 2);
+__decorateClass([
+  n2({ type: Boolean })
+], SDSTextField.prototype, "autocomplete", 2);
+__decorateClass([
+  r2()
+], SDSTextField.prototype, "hasIcon", 2);
+SDSTextField = __decorateClass([
+  t$1("sds-textfield")
+], SDSTextField);
+export {
+  SDSButton,
+  SDSCheckbox,
+  SDSCheckboxGroup,
+  SDSChip,
+  SDSDetail,
+  SDSHeading,
+  SDSIcon,
+  SDSLabel,
+  SDSLink,
+  SDSLoader,
+  SDSNavCard,
+  SDSNotification,
+  SDSParagraph,
+  SDSRadio,
+  SDSRadioGroup,
+  SDSSwitch,
+  SDSText,
+  SDSTextField
+};