@cupra/ui-kit 1.0.0-canary.4 → 1.0.0-canary.6

package/dist/index.js

@@ -191,7 +191,7 @@ class se {
       theme: s
     }) => {
       if (!s || !e) return;
-      const i = `https://ds-assets.cupra.com/1.0.0-canary.4/styles/${s}/components/${e}.css`, o = this.getCachedStyleSheetPromise({ url: i });
+      const i = `https://ds-assets.cupra.com/1.0.0-canary.6/styles/${s}/components/${e}.css`, o = this.getCachedStyleSheetPromise({ url: i });
       if (o) return o;
       const n = this.fetchStyle({ url: i }).then((h) => (h || this.stylePromises.delete(i), h));
       return this.stylePromises.set(i, n), this.stylePromises.get(i);
@@ -260,7 +260,7 @@ const vi = (t) => new bi(typeof t == "string" ? t : t + "", void 0, zs), u = (t,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: ji, defineProperty: Fi, getOwnPropertyDescriptor: Ri, getOwnPropertyNames: Ui, getOwnPropertySymbols: Vi, getPrototypeOf: Hi } = Object, kt = globalThis, Qs = kt.trustedTypes, Wi = Qs ? Qs.emptyScript : "", vs = kt.reactiveElementPolyfillSupport, ze = (t, e) => t, Xe = { toAttribute(t, e) {
+const { is: ji, defineProperty: Fi, getOwnPropertyDescriptor: Ri, getOwnPropertyNames: Ui, getOwnPropertySymbols: Vi, getPrototypeOf: Hi } = Object, Et = globalThis, Qs = Et.trustedTypes, Wi = Qs ? Qs.emptyScript : "", vs = Et.reactiveElementPolyfillSupport, ze = (t, e) => t, Xe = { toAttribute(t, e) {
   switch (e) {
     case Boolean:
       t = t ? Wi : null;
@@ -289,7 +289,7 @@ const { is: ji, defineProperty: Fi, getOwnPropertyDescriptor: Ri, getOwnProperty
   }
   return s;
 } }, As = (t, e) => !ji(t, e), ti = { attribute: !0, type: String, converter: Xe, reflect: !1, useDefault: !1, hasChanged: As };
-Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), kt.litPropertyMetadata ?? (kt.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), Et.litPropertyMetadata ?? (Et.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 let te = class extends HTMLElement {
   static addInitializer(e) {
     this._$Ei(), (this.l ?? (this.l = [])).push(e);
@@ -493,15 +493,15 @@ let te = class extends HTMLElement {
   firstUpdated(e) {
   }
 };
-te.elementStyles = [], te.shadowRootOptions = { mode: "open" }, te[ze("elementProperties")] = /* @__PURE__ */ new Map(), te[ze("finalized")] = /* @__PURE__ */ new Map(), vs == null || vs({ ReactiveElement: te }), (kt.reactiveElementVersions ?? (kt.reactiveElementVersions = [])).push("2.1.1");
+te.elementStyles = [], te.shadowRootOptions = { mode: "open" }, te[ze("elementProperties")] = /* @__PURE__ */ new Map(), te[ze("finalized")] = /* @__PURE__ */ new Map(), vs == null || vs({ ReactiveElement: te }), (Et.reactiveElementVersions ?? (Et.reactiveElementVersions = [])).push("2.1.1");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Ie = globalThis, Je = Ie.trustedTypes, ei = Je ? Je.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, yi = "$lit$", Ct = `lit$${Math.random().toFixed(9).slice(2)}$`, gi = "?" + Ct, qi = `<${gi}>`, Rt = document, De = () => Rt.createComment(""), Ne = (t) => t === null || typeof t != "object" && typeof t != "function", Ds = Array.isArray, Ki = (t) => Ds(t) || typeof (t == null ? void 0 : t[Symbol.iterator]) == "function", ys = `[ 	
+const Ie = globalThis, Je = Ie.trustedTypes, ei = Je ? Je.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, yi = "$lit$", kt = `lit$${Math.random().toFixed(9).slice(2)}$`, gi = "?" + kt, qi = `<${gi}>`, Rt = document, De = () => Rt.createComment(""), Ne = (t) => t === null || typeof t != "object" && typeof t != "function", Ds = Array.isArray, Ki = (t) => Ds(t) || typeof (t == null ? void 0 : t[Symbol.iterator]) == "function", ys = `[ 	
 \f\r]`, ke = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, si = /-->/g, ii = />/g, Bt = RegExp(`>|${ys}(?:([^\\s"'>=/]+)(${ys}*=${ys}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), ri = /'/g, oi = /"/g, $i = /^(?:script|style|textarea|title)$/i, Gi = (t) => (e, ...s) => ({ _$litType$: t, strings: e, values: s }), l = Gi(1), pt = Symbol.for("lit-noChange"), c = Symbol.for("lit-nothing"), ni = /* @__PURE__ */ new WeakMap(), jt = Rt.createTreeWalker(Rt, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), ri = /'/g, oi = /"/g, $i = /^(?:script|style|textarea|title)$/i, Gi = (t) => (e, ...s) => ({ _$litType$: t, strings: e, values: s }), l = Gi(1), mt = Symbol.for("lit-noChange"), c = Symbol.for("lit-nothing"), ni = /* @__PURE__ */ new WeakMap(), jt = Rt.createTreeWalker(Rt, 129);
 function xi(t, e) {
   if (!Ds(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return ei !== void 0 ? ei.createHTML(e) : e;
@@ -514,7 +514,7 @@ const Yi = (t, e) => {
     let f, x, b = -1, $ = 0;
     for (; $ < d.length && (n.lastIndex = $, x = n.exec(d), x !== null); ) $ = n.lastIndex, n === ke ? x[1] === "!--" ? n = si : x[1] !== void 0 ? n = ii : x[2] !== void 0 ? ($i.test(x[2]) && (i = RegExp("</" + x[2], "g")), n = Bt) : x[3] !== void 0 && (n = Bt) : n === Bt ? x[0] === ">" ? (n = i ?? ke, b = -1) : x[1] === void 0 ? b = -2 : (b = n.lastIndex - x[2].length, f = x[1], n = x[3] === void 0 ? Bt : x[3] === '"' ? oi : ri) : n === oi || n === ri ? n = Bt : n === si || n === ii ? n = ke : (n = Bt, i = void 0);
     const S = n === Bt && t[h + 1].startsWith("/>") ? " " : "";
-    o += n === ke ? d + qi : b >= 0 ? (r.push(f), d.slice(0, b) + yi + d.slice(b) + Ct + S) : d + Ct + (b === -2 ? h : S);
+    o += n === ke ? d + qi : b >= 0 ? (r.push(f), d.slice(0, b) + yi + d.slice(b) + kt + S) : d + kt + (b === -2 ? h : S);
   }
   return [xi(t, o + (t[s] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), r];
 };
@@ -531,11 +531,11 @@ class Be {
     for (; (i = jt.nextNode()) !== null && d.length < h; ) {
       if (i.nodeType === 1) {
         if (i.hasAttributes()) for (const b of i.getAttributeNames()) if (b.endsWith(yi)) {
-          const $ = x[n++], S = i.getAttribute(b).split(Ct), T = /([.?@])?(.*)/.exec($);
+          const $ = x[n++], S = i.getAttribute(b).split(kt), T = /([.?@])?(.*)/.exec($);
           d.push({ type: 1, index: o, name: T[2], strings: S, ctor: T[1] === "." ? Ji : T[1] === "?" ? Zi : T[1] === "@" ? Qi : rs }), i.removeAttribute(b);
-        } else b.startsWith(Ct) && (d.push({ type: 6, index: o }), i.removeAttribute(b));
+        } else b.startsWith(kt) && (d.push({ type: 6, index: o }), i.removeAttribute(b));
         if ($i.test(i.tagName)) {
-          const b = i.textContent.split(Ct), $ = b.length - 1;
+          const b = i.textContent.split(kt), $ = b.length - 1;
           if ($ > 0) {
             i.textContent = Je ? Je.emptyScript : "";
             for (let S = 0; S < $; S++) i.append(b[S], De()), jt.nextNode(), d.push({ type: 2, index: ++o });
@@ -545,7 +545,7 @@ class Be {
       } else if (i.nodeType === 8) if (i.data === gi) d.push({ type: 2, index: o });
       else {
         let b = -1;
-        for (; (b = i.data.indexOf(Ct, b + 1)) !== -1; ) d.push({ type: 7, index: o }), b += Ct.length - 1;
+        for (; (b = i.data.indexOf(kt, b + 1)) !== -1; ) d.push({ type: 7, index: o }), b += kt.length - 1;
       }
       o++;
     }
@@ -557,7 +557,7 @@ class Be {
 }
 function ae(t, e, s = t, r) {
   var n, h;
-  if (e === pt) return e;
+  if (e === mt) return e;
   let i = r !== void 0 ? (n = s._$Co) == null ? void 0 : n[r] : s._$Cl;
   const o = Ne(e) ? void 0 : e._$litDirective$;
   return (i == null ? void 0 : i.constructor) !== o && ((h = i == null ? void 0 : i._$AO) == null || h.call(i, !1), o === void 0 ? i = void 0 : (i = new o(t), i._$AT(t, s, r)), r !== void 0 ? (s._$Co ?? (s._$Co = []))[r] = i : s._$Cl = i), i !== void 0 && (e = ae(t, i._$AS(t, e.values), i, r)), e;
@@ -610,7 +610,7 @@ class ge {
     return this._$AB;
   }
   _$AI(e, s = this) {
-    e = ae(this, e, s), Ne(e) ? e === c || e == null || e === "" ? (this._$AH !== c && this._$AR(), this._$AH = c) : e !== this._$AH && e !== pt && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Ki(e) ? this.k(e) : this._(e);
+    e = ae(this, e, s), Ne(e) ? e === c || e == null || e === "" ? (this._$AH !== c && this._$AR(), this._$AH = c) : e !== this._$AH && e !== mt && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Ki(e) ? this.k(e) : this._(e);
   }
   O(e) {
     return this._$AA.parentNode.insertBefore(e, this._$AB);
@@ -666,11 +666,11 @@ class rs {
   _$AI(e, s = this, r, i) {
     const o = this.strings;
     let n = !1;
-    if (o === void 0) e = ae(this, e, s, 0), n = !Ne(e) || e !== this._$AH && e !== pt, n && (this._$AH = e);
+    if (o === void 0) e = ae(this, e, s, 0), n = !Ne(e) || e !== this._$AH && e !== mt, n && (this._$AH = e);
     else {
       const h = e;
       let d, f;
-      for (e = o[0], d = 0; d < o.length - 1; d++) f = ae(this, h[r + d], s, d), f === pt && (f = this._$AH[d]), n || (n = !Ne(f) || f !== this._$AH[d]), f === c ? e = c : e !== c && (e += (f ?? "") + o[d + 1]), this._$AH[d] = f;
+      for (e = o[0], d = 0; d < o.length - 1; d++) f = ae(this, h[r + d], s, d), f === mt && (f = this._$AH[d]), n || (n = !Ne(f) || f !== this._$AH[d]), f === c ? e = c : e !== c && (e += (f ?? "") + o[d + 1]), this._$AH[d] = f;
     }
     n && !i && this.j(e);
   }
@@ -699,7 +699,7 @@ class Qi extends rs {
     super(e, s, r, i, o), this.type = 5;
   }
   _$AI(e, s = this) {
-    if ((e = ae(this, e, s, 0) ?? c) === pt) return;
+    if ((e = ae(this, e, s, 0) ?? c) === mt) return;
     const r = this._$AH, i = e === c && r !== c || e.capture !== r.capture || e.once !== r.once || e.passive !== r.passive, o = e !== c && (r === c || i);
     i && this.element.removeEventListener(this.name, this, r), o && this.element.addEventListener(this.name, this, e), this._$AH = e;
   }
@@ -736,7 +736,7 @@ const sr = (t, e, s) => {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const Ft = globalThis;
-let ut = class extends te {
+let pt = class extends te {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -758,13 +758,13 @@ let ut = class extends te {
     super.disconnectedCallback(), (e = this._$Do) == null || e.setConnected(!1);
   }
   render() {
-    return pt;
+    return mt;
   }
 };
 var pi;
-ut._$litElement$ = !0, ut.finalized = !0, (pi = Ft.litElementHydrateSupport) == null || pi.call(Ft, { LitElement: ut });
+pt._$litElement$ = !0, pt.finalized = !0, (pi = Ft.litElementHydrateSupport) == null || pi.call(Ft, { LitElement: pt });
 const $s = Ft.litElementPolyfillSupport;
-$s == null || $s({ LitElement: ut });
+$s == null || $s({ LitElement: pt });
 (Ft.litElementVersions ?? (Ft.litElementVersions = [])).push("4.2.1");
 /**
  * @license
@@ -817,7 +817,7 @@ const Ns = (t, e, s) => (s.configurable = !0, s.enumerable = !0, Reflect.decorat
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function ct(t, e) {
+function ht(t, e) {
   return (s, r, i) => {
     const o = (n) => {
       var h;
@@ -833,7 +833,7 @@ function ct(t, e) {
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function et(t) {
+function st(t) {
   return (e, s) => {
     const { slot: r, selector: i } = t ?? {}, o = "slot" + (r ? `[name=${r}]` : ":not([name])");
     return Ns(e, s, { get() {
@@ -863,7 +863,7 @@ var or = Object.defineProperty, wi = (t, e, s, r) => {
     (n = t[o]) && (i = n(e, s, i) || i);
   return i && or(e, s, i), i;
 };
-const nr = u`:host([unresolved]){visibility:hidden}`, Ls = class Si extends ut {
+const nr = u`:host([unresolved]){visibility:hidden}`, Ls = class Si extends pt {
   constructor() {
     super(), this.appliedConstructables = [], this.appliedStyleTags = [], this.handleChangeTheme = (e) => {
       this.pubSubTheme = e;
@@ -1009,20 +1009,21 @@ const ar = u`
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Et = (t) => t ?? c, lr = {
+const C = (t) => t ?? c, lr = {
   createIcon: (t) => l`
             <ds-icon
-                class=${t == null ? void 0 : t.class}
-                data-testid=${t == null ? void 0 : t["data-testid"]}
+                class=${C(t == null ? void 0 : t.class)}
+                data-testid=${C(t == null ? void 0 : t["data-testid"])}
                 @click=${t == null ? void 0 : t["@click"]}
                 @keydown=${t == null ? void 0 : t["@keydown"]}
                 icon-name=${t == null ? void 0 : t["icon-name"]}
-                color=${t == null ? void 0 : t.color}
-                background-color=${t == null ? void 0 : t["background-color"]}
-                size=${Et(t == null ? void 0 : t.size)}
-                aria-label=${t == null ? void 0 : t["aria-label"]}
-                role=${t == null ? void 0 : t.role}
-                tabindex=${t == null ? void 0 : t.tabindex}
+                color=${C(t == null ? void 0 : t.color)}
+                background-color=${C(t == null ? void 0 : t["background-color"])}
+                size=${C(t == null ? void 0 : t.size)}
+                aria-label=${C(t == null ? void 0 : t["aria-label"])}
+                aria-hidden=${C(t == null ? void 0 : t["aria-hidden"])}
+                role=${C(t == null ? void 0 : t.role)}
+                tabindex=${C(t == null ? void 0 : t.tabindex)}
             >
                 ${t.children}
             </ds-icon>
@@ -1031,7 +1032,7 @@ const Et = (t) => t ?? c, lr = {
             <ds-button
                 class=${t == null ? void 0 : t.class}
                 @click=${t == null ? void 0 : t["@click"]}
-                .size=${Et(t == null ? void 0 : t.size)}
+                .size=${C(t == null ? void 0 : t.size)}
                 type=${t == null ? void 0 : t.type}
                 icon-position=${t == null ? void 0 : t["icon-position"]}
                 .rounded=${t == null ? void 0 : t.rounded}
@@ -1053,7 +1054,7 @@ const Et = (t) => t ?? c, lr = {
             <ds-icon-button
                 class=${t == null ? void 0 : t.class}
                 @click=${t == null ? void 0 : t["@click"]}
-                size=${Et(t == null ? void 0 : t.size)}
+                size=${C(t == null ? void 0 : t.size)}
                 variant=${(t == null ? void 0 : t.variant) ?? "primary"}
                 mode=${(t == null ? void 0 : t.mode) ?? "light"}
                 .disabled=${t == null ? void 0 : t.disabled}
@@ -1087,17 +1088,18 @@ const Et = (t) => t ?? c, lr = {
 }, cr = {
   createIcon: (t) => l`
             <ds-icon-react
-                class=${t == null ? void 0 : t.class}
-                data-testid=${t == null ? void 0 : t["data-testid"]}
+                class=${C(t == null ? void 0 : t.class)}
+                data-testid=${C(t == null ? void 0 : t["data-testid"])}
                 @click=${t == null ? void 0 : t["@click"]}
                 @keydown=${t == null ? void 0 : t["@keydown"]}
                 icon-name=${t == null ? void 0 : t["icon-name"]}
-                color=${t == null ? void 0 : t.color}
-                background-color=${t == null ? void 0 : t["background-color"]}
-                size=${Et(t == null ? void 0 : t.size)}
-                aria-label=${t == null ? void 0 : t["aria-label"]}
-                role=${t == null ? void 0 : t.role}
-                tabindex=${t == null ? void 0 : t.tabindex}
+                color=${C(t == null ? void 0 : t.color)}
+                background-color=${C(t == null ? void 0 : t["background-color"])}
+                size=${C(t == null ? void 0 : t.size)}
+                aria-label=${C(t == null ? void 0 : t["aria-label"])}
+                aria-hidden=${C(t == null ? void 0 : t["aria-hidden"])}
+                role=${C(t == null ? void 0 : t.role)}
+                tabindex=${C(t == null ? void 0 : t.tabindex)}
             >
                 ${t.children}
             </ds-icon-react>
@@ -1106,7 +1108,7 @@ const Et = (t) => t ?? c, lr = {
             <ds-button-react
                 class=${t == null ? void 0 : t.class}
                 @click=${t == null ? void 0 : t["@click"]}
-                .size=${Et(t == null ? void 0 : t.size)}
+                .size=${C(t == null ? void 0 : t.size)}
                 type=${t == null ? void 0 : t.type}
                 icon-position=${t == null ? void 0 : t["icon-position"]}
                 .rounded=${t == null ? void 0 : t.rounded}
@@ -1128,7 +1130,7 @@ const Et = (t) => t ?? c, lr = {
             <ds-icon-button-react
                 class=${t == null ? void 0 : t.class}
                 @click=${t == null ? void 0 : t["@click"]}
-                size=${Et(t == null ? void 0 : t.size)}
+                size=${C(t == null ? void 0 : t.size)}
                 variant=${(t == null ? void 0 : t.variant) ?? "primary"}
                 mode=${(t == null ? void 0 : t.mode) ?? "light"}
                 .disabled=${t == null ? void 0 : t.disabled}
@@ -1213,7 +1215,7 @@ let Ts = class extends Fs {
   }
   render(e) {
     if (e === c || e == null) return this._t = void 0, this.it = e;
-    if (e === pt) return e;
+    if (e === mt) return e;
     if (typeof e != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
     if (e === this.it) return this._t;
     this.it = e;
@@ -1223,8 +1225,8 @@ let Ts = class extends Fs {
 };
 Ts.directiveName = "unsafeHTML", Ts.resultType = 1;
 const os = js(Ts);
-function C(t, ...e) {
-  const r = String.raw({ raw: t }, ...e).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-4"), i = os(r);
+function k(t, ...e) {
+  const r = String.raw({ raw: t }, ...e).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-6"), i = os(r);
   return l`${i}`;
 }
 /**
@@ -1253,7 +1255,7 @@ const p = js(class extends Fs {
       const n = !!e[o];
       n === this.st.has(o) || (i = this.nt) != null && i.has(o) || (n ? (s.add(o), this.st.add(o)) : (s.remove(o), this.st.delete(o)));
     }
-    return pt;
+    return mt;
   }
 });
 var hr = Object.defineProperty, dr = Object.getOwnPropertyDescriptor, Kt = (t, e, s, r) => {
@@ -1261,7 +1263,7 @@ var hr = Object.defineProperty, dr = Object.getOwnPropertyDescriptor, Kt = (t, e
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && hr(e, s, i), i;
 };
-let mt = class extends g {
+let ft = class extends g {
   constructor() {
     super(...arguments), this.maxHeight = 300, this.open = !1, this.mode = "light", this.size = "medium", this.disabled = !1, this._open = !1;
   }
@@ -1289,6 +1291,8 @@ let mt = class extends g {
     const t = (e = ai[this.theme]) == null ? void 0 : e["icon-names"];
     return this.componentFactory.createIcon({
       class: "icon open-icon",
+      role: "image",
+      "aria-hidden": "true",
       "icon-name": (t == null ? void 0 : t.open) || "minus"
     });
   }
@@ -1298,11 +1302,13 @@ let mt = class extends g {
     const t = (e = ai[this.theme]) == null ? void 0 : e["icon-names"];
     return this.componentFactory.createIcon({
       class: "icon close-icon",
+      role: "image",
+      "aria-hidden": "true",
       "icon-name": (t == null ? void 0 : t.close) || "plus"
     });
   }
   get styleTokens() {
-    return C`
+    return k`
                 <style>
                     :host{
                         color-scheme: ${this.mode};
@@ -1339,28 +1345,28 @@ let mt = class extends g {
         `;
   }
 };
-mt.styles = [ar];
+ft.styles = [ar];
 Kt([
   a({ type: Number, attribute: "max-height" })
-], mt.prototype, "maxHeight", 2);
+], ft.prototype, "maxHeight", 2);
 Kt([
   a({ type: Boolean, converter: m, reflect: !0 })
-], mt.prototype, "open", 2);
+], ft.prototype, "open", 2);
 Kt([
   a({ type: String, reflect: !0 })
-], mt.prototype, "mode", 2);
+], ft.prototype, "mode", 2);
 Kt([
   a({ type: String })
-], mt.prototype, "size", 2);
+], ft.prototype, "size", 2);
 Kt([
   a({ type: Boolean, converter: m })
-], mt.prototype, "disabled", 2);
+], ft.prototype, "disabled", 2);
 Kt([
   y()
-], mt.prototype, "_open", 2);
-mt = Kt([
+], ft.prototype, "_open", 2);
+ft = Kt([
   v("ds-accordion")
-], mt);
+], ft);
 const ur = u`
     :host {
         display: block;
@@ -1419,7 +1425,7 @@ let le = class extends g {
     };
   }
   get styleTokens() {
-    return C`
+    return k`
                 <style>
                     :host{
                         color-scheme: ${this.mode};
@@ -1495,7 +1501,7 @@ const Ve = (t, e, s) => {
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function nt(t, e, s) {
+function at(t, e, s) {
   return t ? e(t) : s == null ? void 0 : s(t);
 }
 const fr = u`
@@ -1605,12 +1611,12 @@ const fr = u`
         }
     }
 `;
-var yr = Object.defineProperty, gr = Object.getOwnPropertyDescriptor, I = (t, e, s, r) => {
+var yr = Object.defineProperty, gr = Object.getOwnPropertyDescriptor, A = (t, e, s, r) => {
   for (var i = r > 1 ? void 0 : r ? gr(e, s) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && yr(e, s, i), i;
 };
-let E = class extends Dt(g) {
+let O = class extends Dt(g) {
   constructor() {
     super(...arguments), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.destructive = !1, this.htmlTagName = "button", this.type = "button", this.iconPosition = "left", this.rounded = !1, this.fullWidth = !1, this.loading = !1;
   }
@@ -1657,7 +1663,7 @@ let E = class extends Dt(g) {
         ` : c;
   }
   get cssTokens() {
-    return C`
+    return k`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -1685,12 +1691,12 @@ let E = class extends Dt(g) {
                             @click=${this.handleClick}
                             ?disabled=${this.disabled}
                         >
-                            ${nt(this.iconPosition === "left", () => l` ${this.iconTemplate} `)}
+                            ${at(this.iconPosition === "left", () => l` ${this.iconTemplate} `)}
                             <span class="container">
                                 <slot></slot>
                                 ${this.loadingTemplate}
                             </span>
-                            ${nt(this.iconPosition === "right", () => l` ${this.iconTemplate} `)}
+                            ${at(this.iconPosition === "right", () => l` ${this.iconTemplate} `)}
                         </button>
                     `;
         }
@@ -1709,12 +1715,12 @@ let E = class extends Dt(g) {
                             @click=${this.handleClick}
                             ?disabled=${this.disabled}
                         >
-                            ${nt(this.iconPosition === "left", () => l`${this.iconTemplate}`)}
+                            ${at(this.iconPosition === "left", () => l`${this.iconTemplate}`)}
                             <span class="container">
                                 <slot></slot>
                                 ${this.loadingTemplate}
                             </span>
-                            ${nt(this.iconPosition === "right", () => l`${this.iconTemplate}`)}
+                            ${at(this.iconPosition === "right", () => l`${this.iconTemplate}`)}
                         </a>
                     `;
         }
@@ -1731,58 +1737,58 @@ let E = class extends Dt(g) {
         `;
   }
 };
-E.styles = [fr, br, vr];
-I([
+O.styles = [fr, br, vr];
+A([
   a({ type: String })
-], E.prototype, "variant", 2);
-I([
+], O.prototype, "variant", 2);
+A([
   a({ type: String, reflect: !0 })
-], E.prototype, "mode", 2);
-I([
+], O.prototype, "mode", 2);
+A([
   a({ type: String, converter: Ue })
-], E.prototype, "size", 2);
-I([
+], O.prototype, "size", 2);
+A([
   a({ type: Boolean, converter: m })
-], E.prototype, "disabled", 2);
-I([
+], O.prototype, "disabled", 2);
+A([
   a({ type: Boolean, converter: m })
-], E.prototype, "destructive", 2);
-I([
+], O.prototype, "destructive", 2);
+A([
   a({ type: String, attribute: "icon-name" })
-], E.prototype, "iconName", 2);
-I([
+], O.prototype, "iconName", 2);
+A([
   a({ type: String, attribute: "html-tag-name" })
-], E.prototype, "htmlTagName", 2);
-I([
+], O.prototype, "htmlTagName", 2);
+A([
   a({ type: String, reflect: !0 })
-], E.prototype, "href", 2);
-I([
+], O.prototype, "href", 2);
+A([
   a({ type: String, reflect: !0 })
-], E.prototype, "rel", 2);
-I([
+], O.prototype, "rel", 2);
+A([
   a({ type: String, reflect: !0 })
-], E.prototype, "target", 2);
-I([
+], O.prototype, "target", 2);
+A([
   a({ type: String })
-], E.prototype, "type", 2);
-I([
+], O.prototype, "type", 2);
+A([
   a({ type: String, attribute: "icon-position" })
-], E.prototype, "iconPosition", 2);
-I([
+], O.prototype, "iconPosition", 2);
+A([
   a({ type: Boolean, converter: m })
-], E.prototype, "rounded", 2);
-I([
+], O.prototype, "rounded", 2);
+A([
   a({ type: Boolean, converter: m, attribute: "full-width" })
-], E.prototype, "fullWidth", 2);
-I([
+], O.prototype, "fullWidth", 2);
+A([
   a({ type: Boolean, converter: m })
-], E.prototype, "loading", 2);
-I([
+], O.prototype, "loading", 2);
+A([
   y()
-], E.prototype, "closestForm", 2);
-E = I([
+], O.prototype, "closestForm", 2);
+O = A([
   v("ds-button")
-], E);
+], O);
 const $r = u`
     :host {
         display: flex;
@@ -1909,12 +1915,12 @@ const ls = (t) => {
         display: none;
     }
 `;
-var _r = Object.defineProperty, Tr = Object.getOwnPropertyDescriptor, j = (t, e, s, r) => {
+var _r = Object.defineProperty, Tr = Object.getOwnPropertyDescriptor, F = (t, e, s, r) => {
   for (var i = r > 1 ? void 0 : r ? Tr(e, s) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && _r(e, s, i), i;
 };
-let A = class extends ls(g) {
+let D = class extends ls(g) {
   constructor() {
     super(...arguments), this.inputPlacement = "left", this.checked = !1, this.required = !1, this.disabled = !1, this.mode = "light", this.size = "medium", this.helperText = "", this.infoText = "", this.forcedError = "", this.invalidError = "", this.indeterminate = !1;
   }
@@ -1951,7 +1957,7 @@ let A = class extends ls(g) {
     });
   }
   get styleTokens() {
-    return C`
+    return k`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -1994,49 +2000,49 @@ let A = class extends ls(g) {
         `;
   }
 };
-A.styles = [Sr];
-j([
+D.styles = [Sr];
+F([
   a({ type: String })
-], A.prototype, "name", 2);
-j([
+], D.prototype, "name", 2);
+F([
   a({ type: String })
-], A.prototype, "value", 2);
-j([
+], D.prototype, "value", 2);
+F([
   a({ type: String, attribute: "input-placement" })
-], A.prototype, "inputPlacement", 2);
-j([
+], D.prototype, "inputPlacement", 2);
+F([
   a({ type: Boolean, converter: m, reflect: !0 })
-], A.prototype, "checked", 2);
-j([
+], D.prototype, "checked", 2);
+F([
   a({ type: Boolean, converter: m })
-], A.prototype, "required", 2);
-j([
+], D.prototype, "required", 2);
+F([
   a({ type: Boolean, converter: m })
-], A.prototype, "disabled", 2);
-j([
+], D.prototype, "disabled", 2);
+F([
   a({ type: String, reflect: !0 })
-], A.prototype, "mode", 2);
-j([
+], D.prototype, "mode", 2);
+F([
   a({ type: String })
-], A.prototype, "size", 2);
-j([
+], D.prototype, "size", 2);
+F([
   a({ type: String, attribute: "helper-text" })
-], A.prototype, "helperText", 2);
-j([
+], D.prototype, "helperText", 2);
+F([
   a({ type: String, attribute: "info-text" })
-], A.prototype, "infoText", 2);
-j([
+], D.prototype, "infoText", 2);
+F([
   a({ type: String, attribute: "forced-error" })
-], A.prototype, "forcedError", 2);
-j([
+], D.prototype, "forcedError", 2);
+F([
   a({ type: String, attribute: "invalid-error" })
-], A.prototype, "invalidError", 2);
-j([
+], D.prototype, "invalidError", 2);
+F([
   a({ type: Boolean, converter: m })
-], A.prototype, "indeterminate", 2);
-A = j([
+], D.prototype, "indeterminate", 2);
+D = F([
   v("ds-checkbox")
-], A);
+], D);
 const Cr = u`
     :host {
         display: inline-block;
@@ -2060,7 +2066,7 @@ var kr = Object.defineProperty, Er = Object.getOwnPropertyDescriptor, Gt = (t, e
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && kr(e, s, i), i;
 };
-let ft = class extends g {
+let bt = class extends g {
   constructor() {
     super(...arguments), this.mode = "light", this.size = "large", this.selected = !1, this.deselectable = !1, this.slottedText = "";
   }
@@ -2079,7 +2085,7 @@ let ft = class extends g {
     };
   }
   get styleTokens() {
-    return C`
+    return k`
                 <style>
                     :host{
                         color-scheme: ${this.mode};
@@ -2149,28 +2155,28 @@ let ft = class extends g {
         `;
   }
 };
-ft.styles = [Cr];
+bt.styles = [Cr];
 Gt([
   a({ type: String })
-], ft.prototype, "value", 2);
+], bt.prototype, "value", 2);
 Gt([
   a({ type: String, reflect: !0 })
-], ft.prototype, "mode", 2);
+], bt.prototype, "mode", 2);
 Gt([
   a({ type: String, reflect: !0 })
-], ft.prototype, "size", 2);
+], bt.prototype, "size", 2);
 Gt([
   a({ type: Boolean, converter: m, reflect: !0 })
-], ft.prototype, "selected", 2);
+], bt.prototype, "selected", 2);
 Gt([
   a({ type: Boolean, converter: m })
-], ft.prototype, "deselectable", 2);
+], bt.prototype, "deselectable", 2);
 Gt([
   y()
-], ft.prototype, "slottedText", 2);
-ft = Gt([
+], bt.prototype, "slottedText", 2);
+bt = Gt([
   v("ds-chip")
-], ft);
+], bt);
 const Or = {
   fromAttribute(t) {
     if (!t) return [];
@@ -2257,12 +2263,12 @@ const Or = {
         right: 0;
     }
 `;
-var zr = Object.defineProperty, Ir = Object.getOwnPropertyDescriptor, xt = (t, e, s, r) => {
+var zr = Object.defineProperty, Ir = Object.getOwnPropertyDescriptor, wt = (t, e, s, r) => {
   for (var i = r > 1 ? void 0 : r ? Ir(e, s) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && zr(e, s, i), i;
 };
-let Z = class extends g {
+let Q = class extends g {
   constructor() {
     super(...arguments), this.multiChoice = null, this.size = "medium", this.mode = "light", this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
       this.handleScrollNav();
@@ -2356,34 +2362,34 @@ let Z = class extends g {
         `;
   }
 };
-Z.styles = [Pr];
-xt([
+Q.styles = [Pr];
+wt([
   a({ type: Array, attribute: "selected-chips", converter: Or, reflect: !0 })
-], Z.prototype, "selectedChips", 2);
-xt([
+], Q.prototype, "selectedChips", 2);
+wt([
   a({ type: Boolean, attribute: "multi-choice", converter: m })
-], Z.prototype, "multiChoice", 2);
-xt([
+], Q.prototype, "multiChoice", 2);
+wt([
   a({ type: String })
-], Z.prototype, "size", 2);
-xt([
+], Q.prototype, "size", 2);
+wt([
   a({ type: String, reflect: !0 })
-], Z.prototype, "mode", 2);
-xt([
+], Q.prototype, "mode", 2);
+wt([
   y()
-], Z.prototype, "hasScrollLeft", 2);
-xt([
+], Q.prototype, "hasScrollLeft", 2);
+wt([
   y()
-], Z.prototype, "hasScrollRight", 2);
-xt([
-  et({ slot: "" })
-], Z.prototype, "chips", 2);
-xt([
-  ct(".chips-container")
-], Z.prototype, "chipsContainer", 2);
-Z = xt([
+], Q.prototype, "hasScrollRight", 2);
+wt([
+  st({ slot: "" })
+], Q.prototype, "chips", 2);
+wt([
+  ht(".chips-container")
+], Q.prototype, "chipsContainer", 2);
+Q = wt([
   v("ds-chips")
-], Z);
+], Q);
 function _i({
   value: t,
   locale: e,
@@ -2399,7 +2405,7 @@ function _i({
   useGrouping: b = "auto"
 }) {
   let $ = "", S, T;
-  const U = new Intl.NumberFormat(e, {
+  const V = new Intl.NumberFormat(e, {
     ...s && { style: s },
     ...r && { unit: r },
     ...i && { currency: i },
@@ -2409,24 +2415,24 @@ function _i({
     maximumFractionDigits: d,
     useGrouping: b
   }).formatToParts(t ?? 0);
-  return U.forEach((Tt, Ys) => {
-    switch (Tt.type) {
+  return V.forEach((Ct, Ys) => {
+    switch (Ct.type) {
       case "unit":
       case "currency":
       case "percentSign":
-        S = Tt.value, T = Ys === 0 || (U[0].type === "minusSign" || U[0].type === "plusSign") && Ys === 1 ? "left" : "right";
+        S = Ct.value, T = Ys === 0 || (V[0].type === "minusSign" || V[0].type === "plusSign") && Ys === 1 ? "left" : "right";
         break;
       case "group":
-        $ += f ?? Tt.value;
+        $ += f ?? Ct.value;
         break;
       case "decimal":
-        $ += x ?? Tt.value;
+        $ += x ?? Ct.value;
         break;
       case "integer":
       case "fraction":
       case "plusSign":
       case "minusSign":
-        $ += Tt.value;
+        $ += Ct.value;
         break;
     }
   }), {
@@ -2445,12 +2451,12 @@ const Ar = u`
         align-items: flex-end;
     }
 `;
-var Dr = Object.defineProperty, Nr = Object.getOwnPropertyDescriptor, P = (t, e, s, r) => {
+var Dr = Object.defineProperty, Nr = Object.getOwnPropertyDescriptor, z = (t, e, s, r) => {
   for (var i = r > 1 ? void 0 : r ? Nr(e, s) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && Dr(e, s, i), i;
 };
-let k = class extends g {
+let E = class extends g {
   constructor() {
     super(...arguments), this.minimumFractionDigits = 0, this.maximumFractionDigits = 20, this.amountSize = "medium", this.amountWeight = "medium", this.currencySize = "medium", this.currencyWeight = "medium", this.periodSize = "medium", this.periodWeight = "medium", this.noteSize = "medium", this.noteWeight = "medium";
   }
@@ -2514,64 +2520,64 @@ let k = class extends g {
         `;
   }
 };
-k.styles = [Ar];
-P([
+E.styles = [Ar];
+z([
   a({ type: String })
-], k.prototype, "locale", 2);
-P([
+], E.prototype, "locale", 2);
+z([
   a({ type: String, attribute: "currency-code" })
-], k.prototype, "currencyCode", 2);
-P([
+], E.prototype, "currencyCode", 2);
+z([
   a({ type: String, attribute: "amount-text" })
-], k.prototype, "amountText", 2);
-P([
+], E.prototype, "amountText", 2);
+z([
   a({ type: Number, attribute: "amount-number" })
-], k.prototype, "amountNumber", 2);
-P([
+], E.prototype, "amountNumber", 2);
+z([
   a({ type: Number, attribute: "minimum-fraction-digits" })
-], k.prototype, "minimumFractionDigits", 2);
-P([
+], E.prototype, "minimumFractionDigits", 2);
+z([
   a({ type: Number, attribute: "maximum-fraction-digits" })
-], k.prototype, "maximumFractionDigits", 2);
-P([
+], E.prototype, "maximumFractionDigits", 2);
+z([
   a({ type: String })
-], k.prototype, "period", 2);
-P([
+], E.prototype, "period", 2);
+z([
   a({ type: String })
-], k.prototype, "note", 2);
-P([
+], E.prototype, "note", 2);
+z([
   a({ type: String, attribute: "thousand-separator" })
-], k.prototype, "thousandSeparator", 2);
-P([
+], E.prototype, "thousandSeparator", 2);
+z([
   a({ type: String, attribute: "fraction-separator" })
-], k.prototype, "fractionSeparator", 2);
-P([
+], E.prototype, "fractionSeparator", 2);
+z([
   a({ type: String, attribute: "amount-size" })
-], k.prototype, "amountSize", 2);
-P([
+], E.prototype, "amountSize", 2);
+z([
   a({ type: String, attribute: "amount-weight" })
-], k.prototype, "amountWeight", 2);
-P([
+], E.prototype, "amountWeight", 2);
+z([
   a({ type: String, attribute: "currency-size" })
-], k.prototype, "currencySize", 2);
-P([
+], E.prototype, "currencySize", 2);
+z([
   a({ type: String, attribute: "currency-weight" })
-], k.prototype, "currencyWeight", 2);
-P([
+], E.prototype, "currencyWeight", 2);
+z([
   a({ type: String, attribute: "period-size" })
-], k.prototype, "periodSize", 2);
-P([
+], E.prototype, "periodSize", 2);
+z([
   a({ type: String, attribute: "period-weight" })
-], k.prototype, "periodWeight", 2);
-P([
+], E.prototype, "periodWeight", 2);
+z([
   a({ type: String, attribute: "note-size" })
-], k.prototype, "noteSize", 2);
-P([
+], E.prototype, "noteSize", 2);
+z([
   a({ type: String, attribute: "note-weight" })
-], k.prototype, "noteWeight", 2);
-k = P([
+], E.prototype, "noteWeight", 2);
+E = z([
   v("ds-currency")
-], k);
+], E);
 const Br = u`
     :host {
         display: inline-block;
@@ -2589,7 +2595,7 @@ let Cs = class extends g {
     };
   }
   get styleTokens() {
-    return C`
+    return k`
                 <style>
                     :host{
                         grid-area: body;
@@ -2676,7 +2682,7 @@ let he = class extends g {
     };
   }
   get styleTokens() {
-    return C`
+    return k`
                 <style>
                     :host{
                         grid-area: header;
@@ -2717,7 +2723,7 @@ cs([
 he = cs([
   v("ds-dialog-header")
 ], he);
-const V = {
+const H = {
   xs: u`@media(min-width: ${Mt.xs}px)`,
   s: u`@media(min-width: ${Mt.s}px)`,
   m: u`@media(min-width: ${Mt.m}px)`,
@@ -2782,7 +2788,7 @@ const V = {
         background-color: transparent;
     }
 
-    ${V.xs} {
+    ${H.xs} {
         .ds-scroll::-webkit-scrollbar,
         .ds-scroll-global *::-webkit-scrollbar {
             height: 4px;
@@ -2790,7 +2796,7 @@ const V = {
         }
     }
 
-    ${V.m} {
+    ${H.m} {
         .ds-scroll::-webkit-scrollbar,
         .ds-scroll-global *::-webkit-scrollbar {
             height: 8px;
@@ -2885,7 +2891,7 @@ $e([
   y()
 ], Ot.prototype, "hasScroll", 2);
 $e([
-  ct(".content")
+  ht(".content")
 ], Ot.prototype, "content", 2);
 Ot = $e([
   v("ds-dialog")
@@ -2914,7 +2920,7 @@ let de = class extends g {
     };
   }
   get styleTokens() {
-    return C`
+    return k`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -2962,7 +2968,7 @@ var Zr = Object.defineProperty, Qr = Object.getOwnPropertyDescriptor, Yt = (t, e
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && Zr(e, s, i), i;
 };
-let bt = class extends g {
+let vt = class extends g {
   constructor() {
     super(...arguments), this.htmlTagName = "a", this.mode = "light", this.size = "large";
   }
@@ -2970,7 +2976,7 @@ let bt = class extends g {
     this.href || t.preventDefault();
   }
   get styleTokens() {
-    return C`
+    return k`
             <style>
                 :host {
                     color-scheme: ${this.mode};
@@ -3015,28 +3021,28 @@ let bt = class extends g {
         `;
   }
 };
-bt.styles = [Jr];
+vt.styles = [Jr];
 Yt([
   a({ type: String, attribute: "html-tag-name" })
-], bt.prototype, "htmlTagName", 2);
+], vt.prototype, "htmlTagName", 2);
 Yt([
   a({ type: String, reflect: !0 })
-], bt.prototype, "href", 2);
+], vt.prototype, "href", 2);
 Yt([
   a({ type: String, reflect: !0 })
-], bt.prototype, "rel", 2);
+], vt.prototype, "rel", 2);
 Yt([
   a({ type: String, reflect: !0 })
-], bt.prototype, "target", 2);
+], vt.prototype, "target", 2);
 Yt([
   a({ type: String, reflect: !0 })
-], bt.prototype, "mode", 2);
+], vt.prototype, "mode", 2);
 Yt([
   a({ type: String })
-], bt.prototype, "size", 2);
-bt = Yt([
+], vt.prototype, "size", 2);
+vt = Yt([
   v("ds-hyperlink")
-], bt);
+], vt);
 const to = u`
     :host {
         display: inline-flex;
@@ -3054,12 +3060,12 @@ const to = u`
         padding: 0;
     }
 `;
-var eo = Object.defineProperty, so = Object.getOwnPropertyDescriptor, st = (t, e, s, r) => {
+var eo = Object.defineProperty, so = Object.getOwnPropertyDescriptor, it = (t, e, s, r) => {
   for (var i = r > 1 ? void 0 : r ? so(e, s) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && eo(e, s, i), i;
 };
-let H = class extends Dt(g) {
+let W = class extends Dt(g) {
   constructor() {
     super(...arguments), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.htmlTagName = "button";
   }
@@ -3084,7 +3090,7 @@ let H = class extends Dt(g) {
     };
   }
   get variantColorTokens() {
-    return C`
+    return k`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -3142,40 +3148,40 @@ let H = class extends Dt(g) {
         `;
   }
 };
-H.styles = [to];
-st([
+W.styles = [to];
+it([
   a({ type: String })
-], H.prototype, "variant", 2);
-st([
+], W.prototype, "variant", 2);
+it([
   a({ type: String, reflect: !0 })
-], H.prototype, "mode", 2);
-st([
+], W.prototype, "mode", 2);
+it([
   a({ type: String, converter: Ue })
-], H.prototype, "size", 2);
-st([
+], W.prototype, "size", 2);
+it([
   a({ type: Boolean, converter: m })
-], H.prototype, "disabled", 2);
-st([
+], W.prototype, "disabled", 2);
+it([
   a({ type: String, attribute: "icon-name" })
-], H.prototype, "iconName", 2);
-st([
+], W.prototype, "iconName", 2);
+it([
   a({ type: String, attribute: "html-tag-name" })
-], H.prototype, "htmlTagName", 2);
-st([
+], W.prototype, "htmlTagName", 2);
+it([
   a({ type: String, attribute: "data-aria-label" })
-], H.prototype, "dataAriaLabel", 2);
-st([
+], W.prototype, "dataAriaLabel", 2);
+it([
   a({ type: String, reflect: !0 })
-], H.prototype, "href", 2);
-st([
+], W.prototype, "href", 2);
+it([
   a({ type: String, reflect: !0 })
-], H.prototype, "rel", 2);
-st([
+], W.prototype, "rel", 2);
+it([
   a({ type: String, reflect: !0 })
-], H.prototype, "target", 2);
-H = st([
+], W.prototype, "target", 2);
+W = it([
   v("ds-icon-button")
-], H);
+], W);
 class ie {
   constructor() {
     this.icons = {}, this.handleChangeTheme = (e) => {
@@ -3209,7 +3215,7 @@ var io = Object.defineProperty, ro = Object.getOwnPropertyDescriptor, Ci = (t) =
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && io(e, s, i), i;
 }, ki = (t, e, s) => e.has(t) || Ci("Cannot " + s), li = (t, e, s) => (ki(t, e, "read from private field"), e.get(t)), oo = (t, e, s) => e.has(t) ? Ci("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), no = (t, e, s, r) => (ki(t, e, "write to private field"), e.set(t, s), s), Pe;
-let vt = class extends g {
+let yt = class extends g {
   constructor() {
     super(), this.iconHtml = "", oo(this, Pe), this.getIcon = async () => {
       var e, s;
@@ -3234,7 +3240,7 @@ let vt = class extends g {
       this.width,
       "var(--private-ds-icon-height, var(--ds-icon-height, 20px))"
     );
-    return C`
+    return k`
             <style>
                 .ds-icon {
                     display: inline-block;
@@ -3260,7 +3266,7 @@ let vt = class extends g {
   }
 };
 Pe = /* @__PURE__ */ new WeakMap();
-vt.styles = u`
+yt.styles = u`
         :host {
             line-height: 0;
             display: inline-block;
@@ -3268,31 +3274,31 @@ vt.styles = u`
     `;
 Xt([
   a({ type: String, attribute: "icon-name" })
-], vt.prototype, "iconName", 2);
+], yt.prototype, "iconName", 2);
 Xt([
   a({ type: String, attribute: "color" })
-], vt.prototype, "color", 2);
+], yt.prototype, "color", 2);
 Xt([
   a({ type: Number })
-], vt.prototype, "width", 2);
+], yt.prototype, "width", 2);
 Xt([
   a({ type: Number })
-], vt.prototype, "height", 2);
+], yt.prototype, "height", 2);
 Xt([
   a({ type: Number, attribute: "size" })
-], vt.prototype, "size", 2);
+], yt.prototype, "size", 2);
 Xt([
   y()
-], vt.prototype, "iconHtml", 2);
-vt = Xt([
+], yt.prototype, "iconHtml", 2);
+yt = Xt([
   v("ds-icon")
-], vt);
+], yt);
 var ao = Object.defineProperty, Rs = (t, e, s, r) => {
   for (var i = void 0, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = n(e, s, i) || i);
   return i && ao(e, s, i), i;
 };
-class He extends ut {
+class He extends pt {
   constructor() {
     super(), this.handleChangeTheme = (e) => {
       this.pubSubTheme = e;
@@ -3493,7 +3499,7 @@ const lo = u`
         --ds-icon-color: var(--ds-color-dark-grey);
     }
 `, uo = [ho];
-var po = Object.defineProperty, it = (t, e, s, r) => {
+var po = Object.defineProperty, rt = (t, e, s, r) => {
   for (var i = void 0, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = n(e, s, i) || i);
   return i && po(e, s, i), i;
@@ -3527,7 +3533,7 @@ const es = class es extends ls(He) {
     };
   }
   get styleTokens() {
-    return C`
+    return k`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -3555,46 +3561,46 @@ const es = class es extends ls(He) {
 es.styles = [lo, co], es.themesStyles = {
   cupra: uo
 };
-let L = es;
-it([
+let M = es;
+rt([
   a({ type: String, reflect: !0, attribute: "initial-value" })
-], L.prototype, "initialValue");
-it([
+], M.prototype, "initialValue");
+rt([
   a({ type: String })
-], L.prototype, "label");
-it([
+], M.prototype, "label");
+rt([
   a({ type: String, attribute: "helper-text" })
-], L.prototype, "helperText");
-it([
+], M.prototype, "helperText");
+rt([
   a({ type: String, attribute: "error-text" })
-], L.prototype, "errorText");
-it([
+], M.prototype, "errorText");
+rt([
   a({ type: Boolean, converter: m })
-], L.prototype, "disabled");
-it([
+], M.prototype, "disabled");
+rt([
   a({ type: Boolean, converter: m })
-], L.prototype, "success");
-it([
+], M.prototype, "success");
+rt([
   a({ type: String, reflect: !0 })
-], L.prototype, "mode");
-it([
+], M.prototype, "mode");
+rt([
   a({ type: String })
-], L.prototype, "size");
-it([
+], M.prototype, "size");
+rt([
   y()
-], L.prototype, "_value");
-it([
+], M.prototype, "_value");
+rt([
   y()
-], L.prototype, "focused");
-it([
-  ct(".input-field")
-], L.prototype, "inputField");
-var mo = Object.defineProperty, fo = Object.getOwnPropertyDescriptor, wt = (t, e, s, r) => {
+], M.prototype, "focused");
+rt([
+  ht(".input-field")
+], M.prototype, "inputField");
+var mo = Object.defineProperty, fo = Object.getOwnPropertyDescriptor, St = (t, e, s, r) => {
   for (var i = r > 1 ? void 0 : r ? fo(e, s) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && mo(e, s, i), i;
 };
-let at = class extends L {
+let lt = class extends M {
   constructor() {
     super(...arguments), this.name = "", this.placeholder = "", this.type = "text", this.min = 0, this.max = 100, this.step = 1, this._hasPicker = !1, this.handleClickIcon = () => {
       var t, e;
@@ -3689,33 +3695,33 @@ let at = class extends L {
     return c;
   }
 };
-wt([
+St([
   a({ type: String })
-], at.prototype, "name", 2);
-wt([
+], lt.prototype, "name", 2);
+St([
   a({ type: String })
-], at.prototype, "placeholder", 2);
-wt([
+], lt.prototype, "placeholder", 2);
+St([
   a({ type: String, attribute: "max-length" })
-], at.prototype, "maxLength", 2);
-wt([
+], lt.prototype, "maxLength", 2);
+St([
   a({ type: String })
-], at.prototype, "type", 2);
-wt([
+], lt.prototype, "type", 2);
+St([
   a({ type: Number })
-], at.prototype, "min", 2);
-wt([
+], lt.prototype, "min", 2);
+St([
   a({ type: Number })
-], at.prototype, "max", 2);
-wt([
+], lt.prototype, "max", 2);
+St([
   a({ type: Number })
-], at.prototype, "step", 2);
-wt([
+], lt.prototype, "step", 2);
+St([
   y()
-], at.prototype, "_hasPicker", 2);
-at = wt([
+], lt.prototype, "_hasPicker", 2);
+lt = St([
   v("ds-input", { skipTagAsComponentName: !0 })
-], at);
+], lt);
 const bo = u`
     :host {
         display: inline-flex;
@@ -3733,12 +3739,12 @@ const bo = u`
         cursor: pointer;
     }
 `;
-var vo = Object.defineProperty, yo = Object.getOwnPropertyDescriptor, rt = (t, e, s, r) => {
+var vo = Object.defineProperty, yo = Object.getOwnPropertyDescriptor, ot = (t, e, s, r) => {
   for (var i = r > 1 ? void 0 : r ? yo(e, s) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && vo(e, s, i), i;
 };
-let W = class extends g {
+let q = class extends g {
   constructor() {
     super(...arguments), this.mode = "light", this.size = "large", this.underline = !1, this.disabled = !1, this.iconName = "arrow-right", this.iconPosition = "right";
   }
@@ -3761,7 +3767,7 @@ let W = class extends g {
     this.href || t.preventDefault();
   }
   get styleTokens() {
-    return C`
+    return k`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -3805,40 +3811,40 @@ let W = class extends g {
         `;
   }
 };
-W.styles = [bo];
-rt([
+q.styles = [bo];
+ot([
   a({ type: String, reflect: !0 })
-], W.prototype, "mode", 2);
-rt([
+], q.prototype, "mode", 2);
+ot([
   a({ type: String })
-], W.prototype, "size", 2);
-rt([
+], q.prototype, "size", 2);
+ot([
   a({ type: Boolean, converter: m })
-], W.prototype, "underline", 2);
-rt([
+], q.prototype, "underline", 2);
+ot([
   a({ type: Boolean, converter: m })
-], W.prototype, "disabled", 2);
-rt([
+], q.prototype, "disabled", 2);
+ot([
   a({ type: String, attribute: "html-tag-name" })
-], W.prototype, "htmlTagName", 2);
-rt([
+], q.prototype, "htmlTagName", 2);
+ot([
   a({ type: String, reflect: !0 })
-], W.prototype, "href", 2);
-rt([
+], q.prototype, "href", 2);
+ot([
   a({ type: String, reflect: !0 })
-], W.prototype, "rel", 2);
-rt([
+], q.prototype, "rel", 2);
+ot([
   a({ type: String, reflect: !0 })
-], W.prototype, "target", 2);
-rt([
+], q.prototype, "target", 2);
+ot([
   a({ type: String, attribute: "icon-name" })
-], W.prototype, "iconName", 2);
-rt([
+], q.prototype, "iconName", 2);
+ot([
   a({ type: String, attribute: "icon-position" })
-], W.prototype, "iconPosition", 2);
-W = rt([
+], q.prototype, "iconPosition", 2);
+q = ot([
   v("ds-link-button")
-], W);
+], q);
 const go = u`
     .track {
         width: 100%;
@@ -3909,7 +3915,7 @@ const ss = class ss extends He {
     };
   }
   get styleTokens() {
-    return C`
+    return k`
             <style>
                 :host {
                     color-scheme: ${this.mode};
@@ -3972,7 +3978,7 @@ Ae = zo([
   v("ds-loader-bar", { skipTagAsComponentName: !0 })
 ], Ae);
 function Jt(t, ...e) {
-  const r = String.raw({ raw: t }, ...e).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-4"), i = vi(r);
+  const r = String.raw({ raw: t }, ...e).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-6"), i = vi(r);
   return u`${i}`;
 }
 const Ao = Jt`
@@ -4023,7 +4029,7 @@ let ue = class extends g {
     };
   }
   get styleTokens() {
-    return C`
+    return k`
                 <style>
                     :host {
                         color-scheme: ${this.mode};
@@ -4298,7 +4304,7 @@ let Le = class extends g {
     };
   }
   get styleTokens() {
-    return C`
+    return k`
                 <style>
                     :host {
                         color-scheme: ${this.mode};
@@ -4367,7 +4373,7 @@ var Yo = Object.defineProperty, Xo = Object.getOwnPropertyDescriptor, Nt = (t, e
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && Yo(e, s, i), i;
 };
-let lt = class extends g {
+let ct = class extends g {
   constructor() {
     super(...arguments), this.width = 48, this.height = 48, this.checked = !1, this.iconSize = 24, this.iconTop = 8;
   }
@@ -4441,31 +4447,31 @@ let lt = class extends g {
         `;
   }
 };
-lt.styles = [Go];
+ct.styles = [Go];
 Nt([
   a({ type: Number, attribute: "width" })
-], lt.prototype, "width", 2);
+], ct.prototype, "width", 2);
 Nt([
   a({ type: Number, attribute: "height" })
-], lt.prototype, "height", 2);
+], ct.prototype, "height", 2);
 Nt([
   a({ type: Boolean, converter: m, reflect: !0 })
-], lt.prototype, "checked", 2);
+], ct.prototype, "checked", 2);
 Nt([
   a({ type: String, attribute: "icon-name" })
-], lt.prototype, "iconName", 2);
+], ct.prototype, "iconName", 2);
 Nt([
   a({ type: Number, attribute: "icon-size" })
-], lt.prototype, "iconSize", 2);
+], ct.prototype, "iconSize", 2);
 Nt([
   a({ type: Number, attribute: "icon-top" })
-], lt.prototype, "iconTop", 2);
+], ct.prototype, "iconTop", 2);
 Nt([
   a({ type: Number, attribute: "cluster-count" })
-], lt.prototype, "clusterCount", 2);
-lt = Nt([
+], ct.prototype, "clusterCount", 2);
+ct = Nt([
   v("ds-map-pin")
-], lt);
+], ct);
 const Jo = u`
     :host {
         transition: display 300ms ease allow-discrete;
@@ -4536,7 +4542,7 @@ const Jo = u`
         grid-area: confirmButton;
     }
 
-    ${V.m} {
+    ${H.m} {
         .content-container.full-width {
             max-width: 700px;
         }
@@ -4567,7 +4573,7 @@ const Jo = u`
         }
     }
 
-    ${V.l} {
+    ${H.l} {
         .content-container.full-width {
             max-width: 952px;
         }
@@ -4585,7 +4591,7 @@ const Jo = u`
         }
     }
 
-    ${V.xl} {
+    ${H.xl} {
         .content-container.full-width {
             max-width: 1138px;
         }
@@ -4647,7 +4653,7 @@ const Jo = u`
         width: calc(100dvw - 32px);
     }
 
-    ${V.m} {
+    ${H.m} {
         .container.dialog .content-container {
             max-height: calc(100dvh - 112px);
             padding: 48px;
@@ -4663,7 +4669,7 @@ const Jo = u`
         padding-top: 24px;
     }
 
-    ${V.m} {
+    ${H.m} {
         .container.full-screen.v-align-default {
             justify-content: center;
             padding-top: 0;
@@ -4680,19 +4686,19 @@ const Jo = u`
         padding-top: 24px;
     }
 
-    ${V.m} {
+    ${H.m} {
         .container.full-screen.v-align-start {
             padding-top: 32px;
         }
     }
 
-    ${V.l} {
+    ${H.l} {
         .container.full-screen.v-align-start {
             padding-top: 32px;
         }
     }
 
-    ${V.xl} {
+    ${H.xl} {
         .container.full-screen.v-align-start {
             padding-top: 64px;
         }
@@ -4719,19 +4725,19 @@ const Jo = u`
         padding-bottom: 24px;
     }
 
-    ${V.m} {
+    ${H.m} {
         .container.full-screen.v-align-end {
             padding-bottom: 32px;
         }
     }
 
-    ${V.l} {
+    ${H.l} {
         .container.full-screen.v-align-end {
             padding-bottom: 32px;
         }
     }
 
-    ${V.xl} {
+    ${H.xl} {
         .container.full-screen.v-align-end {
             padding-bottom: 64px;
         }
@@ -4743,12 +4749,12 @@ const Jo = u`
         margin-bottom: 24px;
     }
 `;
-var sn = Object.defineProperty, rn = Object.getOwnPropertyDescriptor, ot = (t, e, s, r) => {
+var sn = Object.defineProperty, rn = Object.getOwnPropertyDescriptor, nt = (t, e, s, r) => {
   for (var i = r > 1 ? void 0 : r ? rn(e, s) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && sn(e, s, i), i;
 };
-let q = class extends Dt(g) {
+let K = class extends Dt(g) {
   constructor() {
     super(...arguments), this.withCloseButton = !0, this.variant = "fullScreen", this.zIndex = 2e3, this.disableScrollLock = !1, this.fullWidth = !1, this.vAlign = "default";
   }
@@ -4899,52 +4905,52 @@ let q = class extends Dt(g) {
     ));
   }
 };
-q.styles = [Zo, Qo, tn, Jo, en];
-ot([
+K.styles = [Zo, Qo, tn, Jo, en];
+nt([
   a({ type: Boolean, reflect: !0, converter: m })
-], q.prototype, "open", 2);
-ot([
+], K.prototype, "open", 2);
+nt([
   a({
     type: Boolean,
     attribute: "with-close-button",
     converter: m
   })
-], q.prototype, "withCloseButton", 2);
-ot([
+], K.prototype, "withCloseButton", 2);
+nt([
   a({ type: String, attribute: "cancel-button-text" })
-], q.prototype, "cancelButtonText", 2);
-ot([
+], K.prototype, "cancelButtonText", 2);
+nt([
   a({ type: String, attribute: "confirm-button-text" })
-], q.prototype, "confirmButtonText", 2);
-ot([
+], K.prototype, "confirmButtonText", 2);
+nt([
   a({ type: String })
-], q.prototype, "variant", 2);
-ot([
+], K.prototype, "variant", 2);
+nt([
   a({ type: Number, attribute: "z-index" })
-], q.prototype, "zIndex", 2);
-ot([
+], K.prototype, "zIndex", 2);
+nt([
   a({
     type: Boolean,
     converter: m,
     attribute: "disable-scroll-lock"
   })
-], q.prototype, "disableScrollLock", 2);
-ot([
+], K.prototype, "disableScrollLock", 2);
+nt([
   a({ type: String, attribute: "icon-name" })
-], q.prototype, "iconName", 2);
-ot([
+], K.prototype, "iconName", 2);
+nt([
   a({
     type: Boolean,
     converter: m,
     attribute: "full-width"
   })
-], q.prototype, "fullWidth", 2);
-ot([
+], K.prototype, "fullWidth", 2);
+nt([
   a({ type: String, attribute: "v-align" })
-], q.prototype, "vAlign", 2);
-q = ot([
+], K.prototype, "vAlign", 2);
+K = nt([
   v("ds-modal")
-], q);
+], K);
 const Hs = (t) => class extends t {
   constructor() {
     super(...arguments), this.inputStates = {
@@ -5001,7 +5007,7 @@ var nn = Object.defineProperty, an = Object.getOwnPropertyDescriptor, xe = (t, e
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && nn(e, s, i), i;
 };
-let yt = class extends Hs(g) {
+let gt = class extends Hs(g) {
   constructor() {
     super(...arguments), this.keyboardMode = !1, this.size = "medium", this.helperText = "", this.forcedError = "", this.invalidError = "", this.dataAriaLabelRemoveButton = "", this.handleClickIcon = () => {
       this.nativeInput.value = "", this.nativeInput.focus(), ["input", "change"].forEach(
@@ -5064,31 +5070,31 @@ let yt = class extends Hs(g) {
     return this.forcedError || !this.inputStates.invalid || !this.invalidError ? c : l`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
   }
 };
-yt.styles = [on];
+gt.styles = [on];
 xe([
   a({ type: String })
-], yt.prototype, "size", 2);
+], gt.prototype, "size", 2);
 xe([
   a({ type: String, attribute: "helper-text" })
-], yt.prototype, "helperText", 2);
+], gt.prototype, "helperText", 2);
 xe([
   a({ type: String, attribute: "forced-error" })
-], yt.prototype, "forcedError", 2);
+], gt.prototype, "forcedError", 2);
 xe([
   a({ type: String, attribute: "invalid-error" })
-], yt.prototype, "invalidError", 2);
+], gt.prototype, "invalidError", 2);
 xe([
   a({ type: String, attribute: "data-aria-label-remove-button" })
-], yt.prototype, "dataAriaLabelRemoveButton", 2);
-yt = xe([
+], gt.prototype, "dataAriaLabelRemoveButton", 2);
+gt = xe([
   v("ds-text-input")
-], yt);
+], gt);
 var ln = Object.defineProperty, cn = Object.getOwnPropertyDescriptor, ps = (t, e, s, r) => {
   for (var i = r > 1 ? void 0 : r ? cn(e, s) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && ln(e, s, i), i;
 };
-let Me = class extends yt {
+let Me = class extends gt {
   constructor() {
     super(...arguments), this.dataAriaLabelHideButton = "", this.dataAriaLabelShowButton = "", this.visible = !1, this.handleClickIcon = () => {
       this.visible ? (this.nativeInput.setAttribute("type", "password"), this.visible = !1) : (this.nativeInput.setAttribute("type", "text"), this.visible = !0);
@@ -5204,7 +5210,7 @@ var pn = Object.defineProperty, mn = Object.getOwnPropertyDescriptor, Ei = (t, e
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && pn(e, s, i), i;
 };
-let ks = class extends ut {
+let ks = class extends pt {
   constructor() {
     super(...arguments), this.nodes = [], this.querySelectorText = "body";
   }
@@ -5285,7 +5291,7 @@ var wn = Object.defineProperty, Sn = Object.getOwnPropertyDescriptor, Zt = (t, e
   return r && i && wn(e, s, i), i;
 };
 const Pi = Symbol("ds-radio-button-group:disabled"), zi = Symbol("ds-radio-button-group:error"), Ii = Symbol("ds-radio-button-group:error-text"), Ai = Symbol("ds-radio-button-group:helper-text"), Di = Symbol("ds-radio-button-group:size");
-let gt = class extends g {
+let $t = class extends g {
   constructor() {
     super(...arguments), this.error = !1, this.errorText = "", this.helperText = "", this.disabled = !1, this.size = "medium", this.orientation = "vertical";
   }
@@ -5316,33 +5322,33 @@ let gt = class extends g {
         `;
   }
 };
-gt.styles = [xn];
+$t.styles = [xn];
 Zt([
   ye({ context: zi }),
   a({ type: Boolean, converter: m })
-], gt.prototype, "error", 2);
+], $t.prototype, "error", 2);
 Zt([
   ye({ context: Ii }),
   a({ type: String, attribute: "error-text" })
-], gt.prototype, "errorText", 2);
+], $t.prototype, "errorText", 2);
 Zt([
   ye({ context: Ai }),
   a({ type: String, attribute: "helper-text" })
-], gt.prototype, "helperText", 2);
+], $t.prototype, "helperText", 2);
 Zt([
   ye({ context: Pi }),
   a({ type: Boolean, converter: m })
-], gt.prototype, "disabled", 2);
+], $t.prototype, "disabled", 2);
 Zt([
   ye({ context: Di }),
   a({ type: String })
-], gt.prototype, "size", 2);
+], $t.prototype, "size", 2);
 Zt([
   a({ type: String, reflect: !0 })
-], gt.prototype, "orientation", 2);
-gt = Zt([
+], $t.prototype, "orientation", 2);
+$t = Zt([
   v("ds-radio-button-group")
-], gt);
+], $t);
 const _n = u`
     :host {
         display: block;
@@ -5388,12 +5394,12 @@ const _n = u`
         cursor: pointer;
     }
 `;
-var Tn = Object.defineProperty, Cn = Object.getOwnPropertyDescriptor, F = (t, e, s, r) => {
+var Tn = Object.defineProperty, Cn = Object.getOwnPropertyDescriptor, R = (t, e, s, r) => {
   for (var i = r > 1 ? void 0 : r ? Cn(e, s) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && Tn(e, s, i), i;
 };
-let D = class extends g {
+let N = class extends g {
   constructor() {
     super(...arguments), this.inputPlacement = "left", this._size = "medium", this.errorText = "", this.helperText = "", this._disabled = !1, this.handleChange = (t) => {
       this.checkInputState(t.target);
@@ -5514,49 +5520,49 @@ let D = class extends g {
         `;
   }
 };
-D.styles = [_n];
-F([
+N.styles = [_n];
+R([
   a({ type: String, attribute: "input-placement" })
-], D.prototype, "inputPlacement", 2);
-F([
+], N.prototype, "inputPlacement", 2);
+R([
   a({ type: String, attribute: "size" })
-], D.prototype, "_size", 2);
-F([
+], N.prototype, "_size", 2);
+R([
   a({ type: Boolean, attribute: "error", converter: m })
-], D.prototype, "_error", 2);
-F([
+], N.prototype, "_error", 2);
+R([
   a({ type: String, attribute: "error-text" })
-], D.prototype, "errorText", 2);
-F([
+], N.prototype, "errorText", 2);
+R([
   a({ type: String, attribute: "helper-text" })
-], D.prototype, "helperText", 2);
-F([
+], N.prototype, "helperText", 2);
+R([
   y()
-], D.prototype, "errorGroup", 2);
-F([
+], N.prototype, "errorGroup", 2);
+R([
   y()
-], D.prototype, "errorTextGroup", 2);
-F([
+], N.prototype, "errorTextGroup", 2);
+R([
   y()
-], D.prototype, "disabledGroup", 2);
-F([
+], N.prototype, "disabledGroup", 2);
+R([
   y()
-], D.prototype, "helperTextGroup", 2);
-F([
+], N.prototype, "helperTextGroup", 2);
+R([
   y()
-], D.prototype, "sizeGroup", 2);
-F([
+], N.prototype, "sizeGroup", 2);
+R([
   y()
-], D.prototype, "_disabled", 2);
-F([
+], N.prototype, "_disabled", 2);
+R([
   y()
-], D.prototype, "inputMutationObserver", 2);
-F([
-  et({ slot: "input", selector: "input" })
-], D.prototype, "input", 2);
-D = F([
+], N.prototype, "inputMutationObserver", 2);
+R([
+  st({ slot: "input", selector: "input" })
+], N.prototype, "input", 2);
+N = R([
   v("ds-radio-button")
-], D);
+], N);
 const kn = u`
     :host {
         display: flex;
@@ -5576,7 +5582,7 @@ var En = Object.defineProperty, On = Object.getOwnPropertyDescriptor, we = (t, e
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && En(e, s, i), i;
 };
-let Pt = class extends ls(ut) {
+let Pt = class extends ls(pt) {
   constructor() {
     super(...arguments), this.mode = "light", this.size = "large";
   }
@@ -5633,7 +5639,7 @@ we([
   a({ type: String })
 ], Pt.prototype, "size", 2);
 we([
-  et({ selector: "ds-radio" })
+  st({ selector: "ds-radio" })
 ], Pt.prototype, "radioElements", 2);
 Pt = we([
   v("ds-radio-group", { skipTagAsComponentName: !0 })
@@ -5675,12 +5681,12 @@ const Pn = u`
         transform: scale(1);
     }
 `;
-var zn = Object.defineProperty, In = Object.getOwnPropertyDescriptor, St = (t, e, s, r) => {
+var zn = Object.defineProperty, In = Object.getOwnPropertyDescriptor, _t = (t, e, s, r) => {
   for (var i = r > 1 ? void 0 : r ? In(e, s) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && zn(e, s, i), i;
 };
-let Q = class extends g {
+let tt = class extends g {
   constructor() {
     super(...arguments), this.readonly = !1, this.checked = !1, this.disabled = !1, this.mode = "light", this.size = "large", this.handleClickInput = (t) => {
       this.readonly && t.preventDefault();
@@ -5725,7 +5731,7 @@ let Q = class extends g {
     };
   }
   get styleTokens() {
-    return C`
+    return k`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -5744,45 +5750,45 @@ let Q = class extends g {
         `;
   }
 };
-Q.styles = [Pn];
-St([
+tt.styles = [Pn];
+_t([
   a({ type: Boolean, converter: m, reflect: !0 })
-], Q.prototype, "readonly", 2);
-St([
+], tt.prototype, "readonly", 2);
+_t([
   a({ type: String, reflect: !0 })
-], Q.prototype, "name", 2);
-St([
+], tt.prototype, "name", 2);
+_t([
   a({ type: String })
-], Q.prototype, "value", 2);
-St([
+], tt.prototype, "value", 2);
+_t([
   a({ type: Boolean, converter: m, reflect: !0 })
-], Q.prototype, "checked", 2);
-St([
+], tt.prototype, "checked", 2);
+_t([
   a({ type: Boolean, converter: m, reflect: !0 })
-], Q.prototype, "disabled", 2);
-St([
+], tt.prototype, "disabled", 2);
+_t([
   a({ type: String, reflect: !0 })
-], Q.prototype, "mode", 2);
-St([
+], tt.prototype, "mode", 2);
+_t([
   a({ type: String })
-], Q.prototype, "size", 2);
-St([
+], tt.prototype, "size", 2);
+_t([
   Bs({ slot: "", flatten: !0 })
-], Q.prototype, "_defaultSlotNodes", 2);
-Q = St([
+], tt.prototype, "_defaultSlotNodes", 2);
+tt = _t([
   v("ds-radio")
-], Q);
+], tt);
 const An = u`
     :host {
         display: contents;
     }
 `;
-var Dn = Object.defineProperty, Nn = Object.getOwnPropertyDescriptor, ht = (t, e, s, r) => {
+var Dn = Object.defineProperty, Nn = Object.getOwnPropertyDescriptor, dt = (t, e, s, r) => {
   for (var i = r > 1 ? void 0 : r ? Nn(e, s) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && Dn(e, s, i), i;
 };
-let Y = class extends Hs(g) {
+let X = class extends Hs(g) {
   constructor() {
     super(...arguments), this.size = "medium", this.variant = "primary", this.loading = !1, this.helperText = "", this.forcedError = "", this.invalidError = "", this.dataAriaLabelRemoveButton = "", this.dataAriaLabelPositionButton = "", this.withPositionButton = !0, this.handleRemove = () => {
       this.nativeInput.value = "", this.nativeInput.focus(), ["input", "change"].forEach(
@@ -5890,37 +5896,37 @@ let Y = class extends Hs(g) {
     return Ws(t) ? l`<span class="char-counter">${((r = this.inputStates.currentValue) == null ? void 0 : r.length) || 0}/${t}</span>` : c;
   }
 };
-Y.styles = [An];
-ht([
+X.styles = [An];
+dt([
   a({ type: String })
-], Y.prototype, "size", 2);
-ht([
+], X.prototype, "size", 2);
+dt([
   a({ type: String })
-], Y.prototype, "variant", 2);
-ht([
+], X.prototype, "variant", 2);
+dt([
   a({ type: Boolean, converter: m })
-], Y.prototype, "loading", 2);
-ht([
+], X.prototype, "loading", 2);
+dt([
   a({ type: String, attribute: "helper-text" })
-], Y.prototype, "helperText", 2);
-ht([
+], X.prototype, "helperText", 2);
+dt([
   a({ type: String, attribute: "forced-error" })
-], Y.prototype, "forcedError", 2);
-ht([
+], X.prototype, "forcedError", 2);
+dt([
   a({ type: String, attribute: "invalid-error" })
-], Y.prototype, "invalidError", 2);
-ht([
+], X.prototype, "invalidError", 2);
+dt([
   a({ type: String, attribute: "data-aria-label-remove-button" })
-], Y.prototype, "dataAriaLabelRemoveButton", 2);
-ht([
+], X.prototype, "dataAriaLabelRemoveButton", 2);
+dt([
   a({ type: String, attribute: "data-aria-label-position-button" })
-], Y.prototype, "dataAriaLabelPositionButton", 2);
-ht([
+], X.prototype, "dataAriaLabelPositionButton", 2);
+dt([
   a({ type: Boolean, converter: m, attribute: "with-position-button" })
-], Y.prototype, "withPositionButton", 2);
-Y = ht([
+], X.prototype, "withPositionButton", 2);
+X = dt([
   v("ds-search-input")
-], Y);
+], X);
 const Bn = u`
     :host {
         display: block;
@@ -5971,12 +5977,12 @@ const Bn = u`
         position: relative;
     }
 `;
-var Rn = Object.defineProperty, Un = Object.getOwnPropertyDescriptor, N = (t, e, s, r) => {
+var Rn = Object.defineProperty, Un = Object.getOwnPropertyDescriptor, B = (t, e, s, r) => {
   for (var i = r > 1 ? void 0 : r ? Un(e, s) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && Rn(e, s, i), i;
 };
-let z = class extends ls(g) {
+let I = class extends ls(g) {
   constructor() {
     super(...arguments), this.initialValue = "", this.label = "", this.helperText = "", this.errorText = "", this.disabled = !1, this.success = !1, this.mode = "light", this.size = "large", this.name = "", this.placeholder = "", this.type = "text", this.focused = !1, this.handleFocus = () => {
       this.focused = !0;
@@ -6089,7 +6095,7 @@ let z = class extends ls(g) {
     return this.errorText ? l`<div class="error-text">${this.errorText}</div>` : c;
   }
   get styleTokens() {
-    return C`
+    return k`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -6116,66 +6122,66 @@ let z = class extends ls(g) {
         `;
   }
 };
-z.styles = [Bn, Ln, jn, Mn, Fn];
-N([
+I.styles = [Bn, Ln, jn, Mn, Fn];
+B([
   a({ type: String, reflect: !0, attribute: "initial-value" })
-], z.prototype, "initialValue", 2);
-N([
+], I.prototype, "initialValue", 2);
+B([
   a({ type: String })
-], z.prototype, "label", 2);
-N([
+], I.prototype, "label", 2);
+B([
   a({ type: String, attribute: "helper-text" })
-], z.prototype, "helperText", 2);
-N([
+], I.prototype, "helperText", 2);
+B([
   a({ type: String, attribute: "error-text" })
-], z.prototype, "errorText", 2);
-N([
+], I.prototype, "errorText", 2);
+B([
   a({ type: Boolean, converter: m })
-], z.prototype, "disabled", 2);
-N([
+], I.prototype, "disabled", 2);
+B([
   a({ type: Boolean, converter: m })
-], z.prototype, "success", 2);
-N([
+], I.prototype, "success", 2);
+B([
   a({ type: String, reflect: !0 })
-], z.prototype, "mode", 2);
-N([
+], I.prototype, "mode", 2);
+B([
   a({ type: String })
-], z.prototype, "size", 2);
-N([
+], I.prototype, "size", 2);
+B([
   a({ type: String })
-], z.prototype, "name", 2);
-N([
+], I.prototype, "name", 2);
+B([
   a({ type: String })
-], z.prototype, "placeholder", 2);
-N([
+], I.prototype, "placeholder", 2);
+B([
   a({ type: String, attribute: "max-length" })
-], z.prototype, "maxLength", 2);
-N([
+], I.prototype, "maxLength", 2);
+B([
   a({ type: String })
-], z.prototype, "type", 2);
-N([
+], I.prototype, "type", 2);
+B([
   y()
-], z.prototype, "_value", 2);
-N([
+], I.prototype, "_value", 2);
+B([
   y()
-], z.prototype, "focused", 2);
-N([
-  ct(".input-field")
-], z.prototype, "inputField", 2);
-z = N([
+], I.prototype, "focused", 2);
+B([
+  ht(".input-field")
+], I.prototype, "inputField", 2);
+I = B([
   v("ds-search")
-], z);
+], I);
 const Vn = u`
     :host {
         display: contents;
     }
 `;
-var Hn = Object.defineProperty, Wn = Object.getOwnPropertyDescriptor, dt = (t, e, s, r) => {
+var Hn = Object.defineProperty, Wn = Object.getOwnPropertyDescriptor, ut = (t, e, s, r) => {
   for (var i = r > 1 ? void 0 : r ? Wn(e, s) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && Hn(e, s, i), i;
 };
-let X = class extends Dt(g) {
+let J = class extends Dt(g) {
   constructor() {
     super(...arguments), this.dropdownButtonText = "Menu", this.openItems = !1, this.openCtas = !1, this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
       this.handleScroll();
@@ -6357,37 +6363,37 @@ let X = class extends Dt(g) {
     return !this.openItems && !this.openCtas ? c : l`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`;
   }
 };
-X.styles = [Vn];
-dt([
+J.styles = [Vn];
+ut([
   a({ type: String, attribute: "dropdown-button-text" })
-], X.prototype, "dropdownButtonText", 2);
-dt([
+], J.prototype, "dropdownButtonText", 2);
+ut([
   a({ type: Number, attribute: "selected-index" })
-], X.prototype, "selectedIndex", 2);
-dt([
+], J.prototype, "selectedIndex", 2);
+ut([
   y()
-], X.prototype, "openItems", 2);
-dt([
+], J.prototype, "openItems", 2);
+ut([
   y()
-], X.prototype, "openCtas", 2);
-dt([
+], J.prototype, "openCtas", 2);
+ut([
   y()
-], X.prototype, "hasScrollLeft", 2);
-dt([
+], J.prototype, "hasScrollLeft", 2);
+ut([
   y()
-], X.prototype, "hasScrollRight", 2);
-dt([
-  et({ slot: "items" })
-], X.prototype, "items", 2);
-dt([
-  et({ slot: "actions" })
-], X.prototype, "ctas", 2);
-dt([
-  ct(".items-container")
-], X.prototype, "itemsContainer", 2);
-X = dt([
+], J.prototype, "hasScrollRight", 2);
+ut([
+  st({ slot: "items" })
+], J.prototype, "items", 2);
+ut([
+  st({ slot: "actions" })
+], J.prototype, "ctas", 2);
+ut([
+  ht(".items-container")
+], J.prototype, "itemsContainer", 2);
+J = ut([
   v("ds-secondary-navigation")
-], X);
+], J);
 const qn = u`
     :host {
         display: flex;
@@ -6490,7 +6496,7 @@ ms([
   })
 ], me.prototype, "fullWidth", 2);
 ms([
-  et({ slot: "", flatten: !0 })
+  st({ slot: "", flatten: !0 })
 ], me.prototype, "slottedElements", 2);
 me = ms([
   v("ds-segmented-control")
@@ -6547,12 +6553,12 @@ const Yn = u`
         pointer-events: none;
     }
 `;
-var Xn = Object.defineProperty, Jn = Object.getOwnPropertyDescriptor, R = (t, e, s, r) => {
+var Xn = Object.defineProperty, Jn = Object.getOwnPropertyDescriptor, U = (t, e, s, r) => {
   for (var i = r > 1 ? void 0 : r ? Jn(e, s) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && Xn(e, s, i), i;
 };
-let O = class extends g {
+let P = class extends g {
   constructor() {
     super(...arguments), this.mode = "light", this.size = "medium", this.variant = "primary", this._open = !1, this.nativeSelect = null, this.nativeLabel = null, this.nativeOptions = [], this.activeIndex = -1, this.hasForcedError = !1, this.handleMutations = (t) => {
       t.forEach((e) => {
@@ -6729,7 +6735,7 @@ let O = class extends g {
         `;
   }
   get activeDescendantId() {
-    return this._open && this.activeIndex >= 0 ? `${O.ARIA_OPTION_PREFIX}${this.nativeOptions[this.activeIndex].value}` : "";
+    return this._open && this.activeIndex >= 0 ? `${P.ARIA_OPTION_PREFIX}${this.nativeOptions[this.activeIndex].value}` : "";
   }
   get optionsContainerTemplate() {
     return l`
@@ -6744,7 +6750,7 @@ let O = class extends g {
     const s = Array.from(t.childNodes).map((r) => r.cloneNode(!0));
     return l`
             <div
-                id="${O.ARIA_OPTION_PREFIX}${t.value}"
+                id="${P.ARIA_OPTION_PREFIX}${t.value}"
                 class=${p({
       option: !0,
       active: e === this.activeIndex,
@@ -6762,50 +6768,50 @@ let O = class extends g {
         `;
   }
 };
-O.styles = [Yn];
-O.ARIA_OPTION_PREFIX = "option-";
-R([
+P.styles = [Yn];
+P.ARIA_OPTION_PREFIX = "option-";
+U([
   a({ type: String })
-], O.prototype, "mode", 2);
-R([
+], P.prototype, "mode", 2);
+U([
   a({ type: String })
-], O.prototype, "size", 2);
-R([
+], P.prototype, "size", 2);
+U([
   a({ type: String })
-], O.prototype, "variant", 2);
-R([
+], P.prototype, "variant", 2);
+U([
   y()
-], O.prototype, "_open", 2);
-R([
+], P.prototype, "_open", 2);
+U([
   y()
-], O.prototype, "nativeSelect", 2);
-R([
+], P.prototype, "nativeSelect", 2);
+U([
   y()
-], O.prototype, "nativeLabel", 2);
-R([
+], P.prototype, "nativeLabel", 2);
+U([
   y()
-], O.prototype, "nativeOptions", 2);
-R([
+], P.prototype, "nativeOptions", 2);
+U([
   y()
-], O.prototype, "activeIndex", 2);
-R([
+], P.prototype, "activeIndex", 2);
+U([
   y()
-], O.prototype, "hasForcedError", 2);
-R([
-  et({ slot: "", selector: "select", flatten: !0 })
-], O.prototype, "nativeSelects", 2);
-R([
-  et({ slot: "", selector: "label", flatten: !0 })
-], O.prototype, "nativeLabels", 2);
-R([
-  et({ slot: "forced-error", flatten: !0 })
-], O.prototype, "forcedError", 2);
-R([
-  ct(".select")
-], O.prototype, "displaySelect", 2);
-O = R([
+], P.prototype, "hasForcedError", 2);
+U([
+  st({ slot: "", selector: "select", flatten: !0 })
+], P.prototype, "nativeSelects", 2);
+U([
+  st({ slot: "", selector: "label", flatten: !0 })
+], P.prototype, "nativeLabels", 2);
+U([
+  st({ slot: "forced-error", flatten: !0 })
+], P.prototype, "forcedError", 2);
+U([
+  ht(".select")
+], P.prototype, "displaySelect", 2);
+P = U([
   v("ds-select")
-], O);
+], P);
 const Zn = u`
     :host {
         display: inline-block;
@@ -7159,7 +7165,7 @@ let w = class extends Dt(g) {
       formattedValue: i,
       unitSymbol: o,
       unitSymbolPosition: n
-    } = this.formatNumber(r), h = this.unitSymbolPosition ?? n, d = this.unitSymbol ?? o, f = d ? h === "left" ? `${d} ${i}` : `${i} ${d}` : `${i}`, x = s ? "number" : "text", b = s ? String(r ?? "") : f, $ = t === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, T = typeof this.initialValueMax == "number" ? t === 1 ? "Start value" : "End value" : "Value", G = $ ?? T;
+    } = this.formatNumber(r), h = this.unitSymbolPosition ?? n, d = this.unitSymbol ?? o, f = d ? h === "left" ? `${d} ${i}` : `${i} ${d}` : `${i}`, x = s ? "number" : "text", b = s ? String(r ?? "") : f, $ = t === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, T = typeof this.initialValueMax == "number" ? t === 1 ? "Start value" : "End value" : "Value", Y = $ ?? T;
     return l`
             <div class="input-wrapper">
                 <input
@@ -7170,12 +7176,12 @@ let w = class extends Dt(g) {
                     ?disabled=${this.disabled}
                     tabindex=${this.disabled ? -1 : 0}
                     aria-disabled=${String(!!this.disabled)}
-                    aria-label=${G}
+                    aria-label=${Y}
                     ?readonly=${this.disabled}
-                    @focus=${(U) => this.onInputFocus(U, t)}
+                    @focus=${(V) => this.onInputFocus(V, t)}
                     @blur=${this.onInputBlur}
-                    @change=${(U) => this.commitInputValue(U, t)}
-                    @keydown=${(U) => this.onInputKeyDown(U, t)}
+                    @change=${(V) => this.commitInputValue(V, t)}
+                    @keydown=${(V) => this.onInputKeyDown(V, t)}
                     title=${b}
                 />
             </div>
@@ -7200,7 +7206,7 @@ let w = class extends Dt(g) {
     };
   }
   get styleTokens() {
-    return C`
+    return k`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -7303,7 +7309,7 @@ _([
   a({ type: String, attribute: "input-max-aria-label" })
 ], w.prototype, "inputMaxAriaLabel", 2);
 _([
-  ct(".track")
+  ht(".track")
 ], w.prototype, "track", 2);
 _([
   y()
@@ -7423,12 +7429,12 @@ const ca = u`
     "icon-button-variant": "primary"
   }
 };
-var ma = Object.defineProperty, fa = Object.getOwnPropertyDescriptor, J = (t, e, s, r) => {
+var ma = Object.defineProperty, fa = Object.getOwnPropertyDescriptor, Z = (t, e, s, r) => {
   for (var i = r > 1 ? void 0 : r ? fa(e, s) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && ma(e, s, i), i;
 };
-let M = class extends g {
+let j = class extends g {
   constructor() {
     super(...arguments), this.selectedTab = 0, this.mode = "light", this.variant = "primary", this.size = "large", this.disabled = !1, this.focusedTabIndex = -1, this.handleKeyDown = (t) => {
       var e, s, r, i;
@@ -7574,43 +7580,43 @@ let M = class extends g {
         `;
   }
 };
-M.styles = [ca, ha, da, ua];
-J([
+j.styles = [ca, ha, da, ua];
+Z([
   a({ type: Number, attribute: "selected-tab", reflect: !0 })
-], M.prototype, "selectedTab", 2);
-J([
+], j.prototype, "selectedTab", 2);
+Z([
   a({ type: String, reflect: !0 })
-], M.prototype, "mode", 2);
-J([
+], j.prototype, "mode", 2);
+Z([
   a({ type: String, reflect: !0 })
-], M.prototype, "variant", 2);
-J([
+], j.prototype, "variant", 2);
+Z([
   a({ type: String })
-], M.prototype, "size", 2);
-J([
+], j.prototype, "size", 2);
+Z([
   a({ type: Boolean, converter: m })
-], M.prototype, "disabled", 2);
-J([
+], j.prototype, "disabled", 2);
+Z([
   y()
-], M.prototype, "focusedTabIndex", 2);
-J([
-  ct("nav")
-], M.prototype, "nav", 2);
-J([
+], j.prototype, "focusedTabIndex", 2);
+Z([
+  ht("nav")
+], j.prototype, "nav", 2);
+Z([
   y()
-], M.prototype, "tabs", 2);
-J([
+], j.prototype, "tabs", 2);
+Z([
   y()
-], M.prototype, "panels", 2);
-J([
+], j.prototype, "panels", 2);
+Z([
   y()
-], M.prototype, "hasScrollLeft", 2);
-J([
+], j.prototype, "hasScrollLeft", 2);
+Z([
   y()
-], M.prototype, "hasScrollRight", 2);
-M = J([
+], j.prototype, "hasScrollRight", 2);
+j = Z([
   v("ds-tabs")
-], M);
+], j);
 const ba = Jt`
     :host {
         display: inline-block;
@@ -7631,7 +7637,7 @@ var ya = Object.defineProperty, ga = Object.getOwnPropertyDescriptor, Qt = (t, e
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && ya(e, s, i), i;
 };
-let $t = class extends g {
+let xt = class extends g {
   constructor() {
     super(...arguments), this.show = !0, this.clickableIcon = !1, this.iconPosition = "left", this.color = "black";
   }
@@ -7666,39 +7672,39 @@ let $t = class extends g {
   render() {
     return this.show ? l`
                   <div class=${p(this.classes)}>
-                      ${nt(this.iconPosition === "left", () => l`${this.iconTemplate}`)}
+                      ${at(this.iconPosition === "left", () => l`${this.iconTemplate}`)}
                       <slot></slot>
-                      ${nt(this.iconPosition === "right", () => l`${this.iconTemplate}`)}
+                      ${at(this.iconPosition === "right", () => l`${this.iconTemplate}`)}
                   </div>
               ` : c;
   }
 };
-$t.styles = [ba, va];
+xt.styles = [ba, va];
 Qt([
   a({ type: Boolean, converter: m })
-], $t.prototype, "show", 2);
+], xt.prototype, "show", 2);
 Qt([
   a({
     type: Boolean,
     converter: m,
     attribute: "clickable-icon"
   })
-], $t.prototype, "clickableIcon", 2);
+], xt.prototype, "clickableIcon", 2);
 Qt([
   a({ type: String, attribute: "icon-name" })
-], $t.prototype, "iconName", 2);
+], xt.prototype, "iconName", 2);
 Qt([
   a({ type: String, attribute: "icon-position" })
-], $t.prototype, "iconPosition", 2);
+], xt.prototype, "iconPosition", 2);
 Qt([
   a({ type: String, attribute: "color" })
-], $t.prototype, "color", 2);
+], xt.prototype, "color", 2);
 Qt([
   y()
-], $t.prototype, "onClickHandler", 2);
-$t = Qt([
+], xt.prototype, "onClickHandler", 2);
+xt = Qt([
   v("ds-tag")
-], $t);
+], xt);
 const $a = u`
     :host {
         display: contents;
@@ -7721,12 +7727,12 @@ const $a = u`
         text-transform: uppercase;
     }
 `;
-var xa = Object.defineProperty, wa = Object.getOwnPropertyDescriptor, _t = (t, e, s, r) => {
+var xa = Object.defineProperty, wa = Object.getOwnPropertyDescriptor, Tt = (t, e, s, r) => {
   for (var i = r > 1 ? void 0 : r ? wa(e, s) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && xa(e, s, i), i;
 };
-let tt = class extends g {
+let et = class extends g {
   constructor() {
     super(...arguments), this.size = "medium", this.weight = "regular", this.variant = "body", this.mode = "light";
   }
@@ -7744,7 +7750,7 @@ let tt = class extends g {
     return !this.htmlTagName || !this.value ? c : l`${os(`<${this.htmlTagName} class="text">${this.value}</${this.htmlTagName}>`)}`;
   }
   get styles() {
-    return C`
+    return k`
                 <style>
                     .container {
                         color: ${this.color || "var(--ds-text-color)"}
@@ -7762,34 +7768,34 @@ let tt = class extends g {
         `;
   }
 };
-tt.styles = [$a];
-_t([
+et.styles = [$a];
+Tt([
   a({ type: String })
-], tt.prototype, "size", 2);
-_t([
+], et.prototype, "size", 2);
+Tt([
   a({ type: String })
-], tt.prototype, "weight", 2);
-_t([
+], et.prototype, "weight", 2);
+Tt([
   a({ type: String })
-], tt.prototype, "variant", 2);
-_t([
+], et.prototype, "variant", 2);
+Tt([
   a({ type: String, attribute: "html-tag-name" })
-], tt.prototype, "htmlTagName", 2);
-_t([
+], et.prototype, "htmlTagName", 2);
+Tt([
   a({ type: String })
-], tt.prototype, "value", 2);
-_t([
+], et.prototype, "value", 2);
+Tt([
   a({ type: String, reflect: !0 })
-], tt.prototype, "mode", 2);
-_t([
+], et.prototype, "mode", 2);
+Tt([
   a({ type: String, reflect: !0 })
-], tt.prototype, "color", 2);
-_t([
+], et.prototype, "color", 2);
+Tt([
   a({ type: Boolean, converter: m, reflect: !0 })
-], tt.prototype, "uppercase", 2);
-tt = _t([
+], et.prototype, "uppercase", 2);
+et = Tt([
   v("ds-text")
-], tt);
+], et);
 const Sa = u`
     :host {
         display: contents;
@@ -7899,7 +7905,7 @@ var ka = Object.defineProperty, Ea = Object.getOwnPropertyDescriptor, _e = (t, e
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && ka(e, s, i), i;
 };
-let Wt = class extends ut {
+let Wt = class extends pt {
   constructor() {
     super(...arguments), this.loadFonts = !0, this.loadStyles = !0, this.cssLoaded = !1, this.loadedFonts = /* @__PURE__ */ new Set();
   }
@@ -7938,7 +7944,7 @@ let Wt = class extends ut {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, e) => {
-      const s = "/1.0.0-canary.4", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/1.0.0-canary.6", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
       if (document.head.querySelector(`link[href="${r}"]`)) t();
       else {
         const i = `ui-kit-theme-${s}`, o = document.getElementById(i), n = document.createElement("link");
@@ -8035,8 +8041,8 @@ let It = class extends g {
                 ${this.iconTemplate}
                 <div class="content">
                     <div class="header">
-                        ${nt(this.title, () => l`<div class="title">${this.title}</div>`)}
-                        ${nt(this.text, () => l`<div class="message">${this.text}</div>`)}
+                        ${at(this.title, () => l`<div class="title">${this.title}</div>`)}
+                        ${at(this.text, () => l`<div class="message">${this.text}</div>`)}
                     </div>
                     <slot></slot>
                 </div>
@@ -8173,23 +8179,23 @@ const ui = (t, e, s) => {
     else if (h[b] === n[T]) d[T] = Lt(i[b], o[T]), Oe(t, d[T + 1], i[b]), b++, T--;
     else if (h[$] === n[S]) d[S] = Lt(i[$], o[S]), Oe(t, i[b], i[$]), $--, S++;
     else if (f === void 0 && (f = ui(n, S, T), x = ui(h, b, $)), f.has(h[b])) if (f.has(h[$])) {
-      const G = x.get(n[S]), U = G !== void 0 ? i[G] : null;
-      if (U === null) {
-        const Tt = Oe(t, i[b]);
-        Lt(Tt, o[S]), d[S] = Tt;
-      } else d[S] = Lt(U, o[S]), Oe(t, i[b], U), i[G] = null;
+      const Y = x.get(n[S]), V = Y !== void 0 ? i[Y] : null;
+      if (V === null) {
+        const Ct = Oe(t, i[b]);
+        Lt(Ct, o[S]), d[S] = Ct;
+      } else d[S] = Lt(V, o[S]), Oe(t, i[b], V), i[Y] = null;
       S++;
     } else Ss(i[$]), $--;
     else Ss(i[b]), b++;
     for (; S <= T; ) {
-      const G = Oe(t, d[T + 1]);
-      Lt(G, o[S]), d[S++] = G;
+      const Y = Oe(t, d[T + 1]);
+      Lt(Y, o[S]), d[S++] = Y;
     }
     for (; b <= $; ) {
-      const G = i[b++];
-      G !== null && Ss(G);
+      const Y = i[b++];
+      Y !== null && Ss(Y);
     }
-    return this.ut = n, Ba(t, d), pt;
+    return this.ut = n, Ba(t, d), mt;
   }
 }), ja = u`
     :host {
@@ -8380,7 +8386,7 @@ var Va = Object.defineProperty, Ha = Object.getOwnPropertyDescriptor, Ke = (t, e
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && Va(e, s, i), i;
 };
-let fe = class extends E {
+let fe = class extends O {
   constructor() {
     super(...arguments), this.checked = !1, this.checkedText = "", this.uncheckedText = "", this.rounded = !0;
   }
@@ -8414,9 +8420,9 @@ let fe = class extends E {
                 type=${this.type}
                 @click=${this.handleClick}
             >
-                ${nt(this.iconPosition === "left", () => l`${this.iconTemplate}`)}
+                ${at(this.iconPosition === "left", () => l`${this.iconTemplate}`)}
                 ${this.checked ? this.checkedText : this.uncheckedText}
-                ${nt(this.iconPosition === "right", () => l`${this.iconTemplate}`)}
+                ${at(this.iconPosition === "right", () => l`${this.iconTemplate}`)}
             </button>
         `;
   }
@@ -8503,7 +8509,7 @@ let At = class extends g {
     this.checked || this.handleClick();
   }
   get styleTokens() {
-    return C`
+    return k`
             <style>
                 :host {
                     color-scheme: ${this.mode};
@@ -8717,12 +8723,12 @@ const Ga = u`
         transform: none;
     }
 `;
-var Ja = Object.defineProperty, Za = Object.getOwnPropertyDescriptor, K = (t, e, s, r) => {
+var Ja = Object.defineProperty, Za = Object.getOwnPropertyDescriptor, G = (t, e, s, r) => {
   for (var i = r > 1 ? void 0 : r ? Za(e, s) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (i = (r ? n(e, s, i) : n(i)) || i);
   return r && i && Ja(e, s, i), i;
 };
-let B = class extends Dt(g) {
+let L = class extends Dt(g) {
   constructor() {
     super(...arguments), this.mode = "light", this.titleText = "", this.bodyText = "", this.position = "bottom", this.align = "center", this.show = !1, this.zIndex = 2e3, this.bodyWidth = "unset", this.handleResize = Es({ func: () => this.requestUpdate() }), this.handleClickOutside = (t) => {
       var s;
@@ -8798,7 +8804,7 @@ let B = class extends Dt(g) {
     return this.position === "left" ? o = r - 13 : this.position === "right" ? o = i - 13 : this.align === "center" ? o = (r < i ? r : i) * 2 + this.clientWidth : this.align === "start" ? o = document.body.clientWidth - r : this.align === "end" && (o = r + this.clientWidth), `${o - 16 - 32}px`;
   }
   get styleTokens() {
-    return C`
+    return k`
             <style>
                 :host {
                     color-scheme: ${this.mode};
@@ -8859,46 +8865,46 @@ let B = class extends Dt(g) {
     );
   }
 };
-B.styles = [Ga, Ya, Xa];
-K([
+L.styles = [Ga, Ya, Xa];
+G([
   a({ type: String, reflect: !0 })
-], B.prototype, "mode", 2);
-K([
+], L.prototype, "mode", 2);
+G([
   a({ type: String, attribute: "title-text" })
-], B.prototype, "titleText", 2);
-K([
+], L.prototype, "titleText", 2);
+G([
   a({ type: String, attribute: "body-text" })
-], B.prototype, "bodyText", 2);
-K([
+], L.prototype, "bodyText", 2);
+G([
   a({ type: String })
-], B.prototype, "position", 2);
-K([
+], L.prototype, "position", 2);
+G([
   a({ type: String })
-], B.prototype, "align", 2);
-K([
+], L.prototype, "align", 2);
+G([
   a({ type: String, attribute: "cancel-button-text" })
-], B.prototype, "cancelButtonText", 2);
-K([
+], L.prototype, "cancelButtonText", 2);
+G([
   a({ type: String, attribute: "confirm-button-text" })
-], B.prototype, "confirmButtonText", 2);
-K([
+], L.prototype, "confirmButtonText", 2);
+G([
   a({ type: Boolean, reflect: !0, converter: m })
-], B.prototype, "show", 2);
-K([
+], L.prototype, "show", 2);
+G([
   a({ type: Number, attribute: "z-index" })
-], B.prototype, "zIndex", 2);
-K([
+], L.prototype, "zIndex", 2);
+G([
   a({ type: String, attribute: "body-width" })
-], B.prototype, "bodyWidth", 2);
-K([
-  ct(".tooltip")
-], B.prototype, "tooltip", 2);
-K([
-  ct(".arrow")
-], B.prototype, "arrow", 2);
-B = K([
+], L.prototype, "bodyWidth", 2);
+G([
+  ht(".tooltip")
+], L.prototype, "tooltip", 2);
+G([
+  ht(".arrow")
+], L.prototype, "arrow", 2);
+L = G([
   v("ds-tooltip")
-], B);
+], L);
 const Qa = u`
     :host {
         display: contents;
@@ -8945,7 +8951,7 @@ let qt = class extends g {
     this.requestUpdate();
   }
   get styleTokens() {
-    return C`
+    return k`
             <style>
                 :host{
                     pointer-events: ${this.disabled ? "none" : "auto"};
@@ -8961,9 +8967,9 @@ let qt = class extends g {
             ${this.styleTokens}
             <div
                 class=${p(this.classes)}
-                title=${Et(this.name)}
+                title=${C(this.name)}
                 aria-label=${`Open ${this.name ? this.name + "'s " : ""}profile menu`}
-                aria-disabled=${Et(this.disabled ? "true" : void 0)}
+                aria-disabled=${C(this.disabled ? "true" : void 0)}
                 role="button"
                 tabindex=${this.disabled ? -1 : 0}
                 @keydown=${this.handleKeyDown}
@@ -8986,7 +8992,7 @@ Ge([
   a({ type: Boolean, converter: m, reflect: !0 })
 ], qt.prototype, "disabled", 2);
 Ge([
-  et({ slot: "media", selector: "img" })
+  st({ slot: "media", selector: "img" })
 ], qt.prototype, "assignedImages", 2);
 qt = Ge([
   v("ds-avatar")
@@ -9065,7 +9071,7 @@ let be = class extends Dt(g) {
   }
   get styleTokens() {
     var t, e;
-    return C`
+    return k`
             <style>
                 .header {
                     display: ${((t = this.headerItems) == null ? void 0 : t.length) > 0 ? "block" : "none"};
@@ -9295,7 +9301,7 @@ Gs([
   y()
 ], Re.prototype, "open", 2);
 Gs([
-  et({ slot: "main-cta", selector: "ds-button", flatten: !0 })
+  st({ slot: "main-cta", selector: "ds-button", flatten: !0 })
 ], Re.prototype, "mainCtas", 2);
 Re = Gs([
   v("ds-sidebar-navigation")