@florid-kit/components 0.10.45 → 0.10.46

package/index.mjs

@@ -45,7 +45,7 @@ const P2 = (e) => new $2(typeof e == "string" ? e : e + "", void 0, X1), g = (e,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: z2, defineProperty: I2, getOwnPropertyDescriptor: D2, getOwnPropertyNames: T2, getOwnPropertySymbols: j2, getPrototypeOf: R2 } = Object, t1 = globalThis, u2 = t1.trustedTypes, U2 = u2 ? u2.emptyScript : "", I1 = t1.reactiveElementPolyfillSupport, w1 = (e, t) => e, _1 = { toAttribute(e, t) {
+const { is: z2, defineProperty: I2, getOwnPropertyDescriptor: D2, getOwnPropertyNames: T2, getOwnPropertySymbols: j2, getPrototypeOf: R2 } = Object, t1 = globalThis, u2 = t1.trustedTypes, U2 = u2 ? u2.emptyScript : "", I1 = t1.reactiveElementPolyfillSupport, f1 = (e, t) => e, _1 = { toAttribute(e, t) {
   switch (t) {
     case Boolean:
       e = e ? U2 : null;
@@ -75,7 +75,7 @@ const { is: z2, defineProperty: I2, getOwnPropertyDescriptor: D2, getOwnProperty
   return i;
 } }, Y1 = (e, t) => !z2(e, t), v2 = { attribute: !0, type: String, converter: _1, reflect: !1, useDefault: !1, hasChanged: Y1 };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), t1.litPropertyMetadata ?? (t1.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-let p1 = class extends HTMLElement {
+let d1 = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ?? (this.l = [])).push(t);
   }
@@ -103,13 +103,13 @@ let p1 = class extends HTMLElement {
     return this.elementProperties.get(t) ?? v2;
   }
   static _$Ei() {
-    if (this.hasOwnProperty(w1("elementProperties"))) return;
+    if (this.hasOwnProperty(f1("elementProperties"))) return;
     const t = R2(this);
     t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(w1("finalized"))) return;
-    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(w1("properties"))) {
+    if (this.hasOwnProperty(f1("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(f1("properties"))) {
       const i = this.properties, n = [...T2(i), ...j2(i)];
       for (const o of n) this.createProperty(o, i[o]);
     }
@@ -276,42 +276,42 @@ let p1 = class extends HTMLElement {
   firstUpdated(t) {
   }
 };
-p1.elementStyles = [], p1.shadowRootOptions = { mode: "open" }, p1[w1("elementProperties")] = /* @__PURE__ */ new Map(), p1[w1("finalized")] = /* @__PURE__ */ new Map(), I1 == null || I1({ ReactiveElement: p1 }), (t1.reactiveElementVersions ?? (t1.reactiveElementVersions = [])).push("2.1.0");
+d1.elementStyles = [], d1.shadowRootOptions = { mode: "open" }, d1[f1("elementProperties")] = /* @__PURE__ */ new Map(), d1[f1("finalized")] = /* @__PURE__ */ new Map(), I1 == null || I1({ ReactiveElement: d1 }), (t1.reactiveElementVersions ?? (t1.reactiveElementVersions = [])).push("2.1.0");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const b1 = globalThis, F1 = b1.trustedTypes, f2 = F1 ? F1.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, E2 = "$lit$", Q = `lit$${Math.random().toFixed(9).slice(2)}$`, M2 = "?" + Q, q2 = `<${M2}>`, a1 = document, L1 = () => a1.createComment(""), y1 = (e) => e === null || typeof e != "object" && typeof e != "function", J1 = Array.isArray, N2 = (e) => J1(e) || typeof (e == null ? void 0 : e[Symbol.iterator]) == "function", D1 = `[ 	
-\f\r]`, f1 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, w2 = /-->/g, b2 = />/g, s1 = RegExp(`>|${D1}(?:([^\\s"'>=/]+)(${D1}*=${D1}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), m2 = /'/g, L2 = /"/g, k2 = /^(?:script|style|textarea|title)$/i, K2 = (e) => (t, ...i) => ({ _$litType$: e, strings: t, values: i }), a = K2(1), e1 = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), y2 = /* @__PURE__ */ new WeakMap(), r1 = a1.createTreeWalker(a1, 129);
+const w1 = globalThis, F1 = w1.trustedTypes, f2 = F1 ? F1.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, E2 = "$lit$", Q = `lit$${Math.random().toFixed(9).slice(2)}$`, M2 = "?" + Q, q2 = `<${M2}>`, l1 = document, m1 = () => l1.createComment(""), L1 = (e) => e === null || typeof e != "object" && typeof e != "function", J1 = Array.isArray, N2 = (e) => J1(e) || typeof (e == null ? void 0 : e[Symbol.iterator]) == "function", D1 = `[ 	
+\f\r]`, v1 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, w2 = /-->/g, b2 = />/g, n1 = RegExp(`>|${D1}(?:([^\\s"'>=/]+)(${D1}*=${D1}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), m2 = /'/g, L2 = /"/g, k2 = /^(?:script|style|textarea|title)$/i, K2 = (e) => (t, ...i) => ({ _$litType$: e, strings: t, values: i }), a = K2(1), e1 = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), y2 = /* @__PURE__ */ new WeakMap(), s1 = l1.createTreeWalker(l1, 129);
 function Z2(e, t) {
   if (!J1(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return f2 !== void 0 ? f2.createHTML(t) : t;
 }
 const W2 = (e, t) => {
   const i = e.length - 1, n = [];
-  let o, s = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", r = f1;
+  let o, s = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", r = v1;
   for (let c = 0; c < i; c++) {
     const h = e[c];
     let u, L, v = -1, q = 0;
-    for (; q < h.length && (r.lastIndex = q, L = r.exec(h), L !== null); ) q = r.lastIndex, r === f1 ? L[1] === "!--" ? r = w2 : L[1] !== void 0 ? r = b2 : L[2] !== void 0 ? (k2.test(L[2]) && (o = RegExp("</" + L[2], "g")), r = s1) : L[3] !== void 0 && (r = s1) : r === s1 ? L[0] === ">" ? (r = o ?? f1, v = -1) : L[1] === void 0 ? v = -2 : (v = r.lastIndex - L[2].length, u = L[1], r = L[3] === void 0 ? s1 : L[3] === '"' ? L2 : m2) : r === L2 || r === m2 ? r = s1 : r === w2 || r === b2 ? r = f1 : (r = s1, o = void 0);
-    const J = r === s1 && e[c + 1].startsWith("/>") ? " " : "";
-    s += r === f1 ? h + q2 : v >= 0 ? (n.push(u), h.slice(0, v) + E2 + h.slice(v) + Q + J) : h + Q + (v === -2 ? c : J);
+    for (; q < h.length && (r.lastIndex = q, L = r.exec(h), L !== null); ) q = r.lastIndex, r === v1 ? L[1] === "!--" ? r = w2 : L[1] !== void 0 ? r = b2 : L[2] !== void 0 ? (k2.test(L[2]) && (o = RegExp("</" + L[2], "g")), r = n1) : L[3] !== void 0 && (r = n1) : r === n1 ? L[0] === ">" ? (r = o ?? v1, v = -1) : L[1] === void 0 ? v = -2 : (v = r.lastIndex - L[2].length, u = L[1], r = L[3] === void 0 ? n1 : L[3] === '"' ? L2 : m2) : r === L2 || r === m2 ? r = n1 : r === w2 || r === b2 ? r = v1 : (r = n1, o = void 0);
+    const J = r === n1 && e[c + 1].startsWith("/>") ? " " : "";
+    s += r === v1 ? h + q2 : v >= 0 ? (n.push(u), h.slice(0, v) + E2 + h.slice(v) + Q + J) : h + Q + (v === -2 ? c : J);
   }
   return [Z2(e, s + (e[i] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), n];
 };
-class x1 {
+class y1 {
   constructor({ strings: t, _$litType$: i }, n) {
     let o;
     this.parts = [];
     let s = 0, r = 0;
     const c = t.length - 1, h = this.parts, [u, L] = W2(t, i);
-    if (this.el = x1.createElement(u, n), r1.currentNode = this.el.content, i === 2 || i === 3) {
+    if (this.el = y1.createElement(u, n), s1.currentNode = this.el.content, i === 2 || i === 3) {
       const v = this.el.content.firstChild;
       v.replaceWith(...v.childNodes);
     }
-    for (; (o = r1.nextNode()) !== null && h.length < c; ) {
+    for (; (o = s1.nextNode()) !== null && h.length < c; ) {
       if (o.nodeType === 1) {
         if (o.hasAttributes()) for (const v of o.getAttributeNames()) if (v.endsWith(E2)) {
           const q = L[r++], J = o.getAttribute(v).split(Q), k1 = /([.?@])?(.*)/.exec(q);
@@ -321,8 +321,8 @@ class x1 {
           const v = o.textContent.split(Q), q = v.length - 1;
           if (q > 0) {
             o.textContent = F1 ? F1.emptyScript : "";
-            for (let J = 0; J < q; J++) o.append(v[J], L1()), r1.nextNode(), h.push({ type: 2, index: ++s });
-            o.append(v[q], L1());
+            for (let J = 0; J < q; J++) o.append(v[J], m1()), s1.nextNode(), h.push({ type: 2, index: ++s });
+            o.append(v[q], m1());
           }
         }
       } else if (o.nodeType === 8) if (o.data === M2) h.push({ type: 2, index: s });
@@ -334,16 +334,16 @@ class x1 {
     }
   }
   static createElement(t, i) {
-    const n = a1.createElement("template");
+    const n = l1.createElement("template");
     return n.innerHTML = t, n;
   }
 }
-function C1(e, t, i = e, n) {
+function p1(e, t, i = e, n) {
   var r, c;
   if (t === e1) return t;
   let o = n !== void 0 ? (r = i._$Co) == null ? void 0 : r[n] : i._$Cl;
-  const s = y1(t) ? void 0 : t._$litDirective$;
-  return (o == null ? void 0 : o.constructor) !== s && ((c = o == null ? void 0 : o._$AO) == null || c.call(o, !1), s === void 0 ? o = void 0 : (o = new s(e), o._$AT(e, i, n)), n !== void 0 ? (i._$Co ?? (i._$Co = []))[n] = o : i._$Cl = o), o !== void 0 && (t = C1(e, o._$AS(e, t.values), o, n)), t;
+  const s = L1(t) ? void 0 : t._$litDirective$;
+  return (o == null ? void 0 : o.constructor) !== s && ((c = o == null ? void 0 : o._$AO) == null || c.call(o, !1), s === void 0 ? o = void 0 : (o = new s(e), o._$AT(e, i, n)), n !== void 0 ? (i._$Co ?? (i._$Co = []))[n] = o : i._$Cl = o), o !== void 0 && (t = p1(e, o._$AS(e, t.values), o, n)), t;
 }
 class G2 {
   constructor(t, i) {
@@ -356,24 +356,24 @@ class G2 {
     return this._$AM._$AU;
   }
   u(t) {
-    const { el: { content: i }, parts: n } = this._$AD, o = ((t == null ? void 0 : t.creationScope) ?? a1).importNode(i, !0);
-    r1.currentNode = o;
-    let s = r1.nextNode(), r = 0, c = 0, h = n[0];
+    const { el: { content: i }, parts: n } = this._$AD, o = ((t == null ? void 0 : t.creationScope) ?? l1).importNode(i, !0);
+    s1.currentNode = o;
+    let s = s1.nextNode(), r = 0, c = 0, h = n[0];
     for (; h !== void 0; ) {
       if (r === h.index) {
         let u;
-        h.type === 2 ? u = new M1(s, s.nextSibling, this, t) : h.type === 1 ? u = new h.ctor(s, h.name, h.strings, this, t) : h.type === 6 && (u = new Q2(s, this, t)), this._$AV.push(u), h = n[++c];
+        h.type === 2 ? u = new E1(s, s.nextSibling, this, t) : h.type === 1 ? u = new h.ctor(s, h.name, h.strings, this, t) : h.type === 6 && (u = new Q2(s, this, t)), this._$AV.push(u), h = n[++c];
       }
-      r !== (h == null ? void 0 : h.index) && (s = r1.nextNode(), r++);
+      r !== (h == null ? void 0 : h.index) && (s = s1.nextNode(), r++);
     }
-    return r1.currentNode = a1, o;
+    return s1.currentNode = l1, o;
   }
   p(t) {
     let i = 0;
     for (const n of this._$AV) n !== void 0 && (n.strings !== void 0 ? (n._$AI(t, n, i), i += n.strings.length - 2) : n._$AI(t[i])), i++;
   }
 }
-class M1 {
+class E1 {
   get _$AU() {
     var t;
     return ((t = this._$AM) == null ? void 0 : t._$AU) ?? this._$Cv;
@@ -393,7 +393,7 @@ class M1 {
     return this._$AB;
   }
   _$AI(t, i = this) {
-    t = C1(this, t, i), y1(t) ? t === d || t == null || t === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : t !== this._$AH && t !== e1 && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : N2(t) ? this.k(t) : this._(t);
+    t = p1(this, t, i), L1(t) ? t === d || t == null || t === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : t !== this._$AH && t !== e1 && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : N2(t) ? this.k(t) : this._(t);
   }
   O(t) {
     return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -402,11 +402,11 @@ class M1 {
     this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
   }
   _(t) {
-    this._$AH !== d && y1(this._$AH) ? this._$AA.nextSibling.data = t : this.T(a1.createTextNode(t)), this._$AH = t;
+    this._$AH !== d && L1(this._$AH) ? this._$AA.nextSibling.data = t : this.T(l1.createTextNode(t)), this._$AH = t;
   }
   $(t) {
     var s;
-    const { values: i, _$litType$: n } = t, o = typeof n == "number" ? this._$AC(t) : (n.el === void 0 && (n.el = x1.createElement(Z2(n.h, n.h[0]), this.options)), n);
+    const { values: i, _$litType$: n } = t, o = typeof n == "number" ? this._$AC(t) : (n.el === void 0 && (n.el = y1.createElement(Z2(n.h, n.h[0]), this.options)), n);
     if (((s = this._$AH) == null ? void 0 : s._$AD) === o) this._$AH.p(i);
     else {
       const r = new G2(o, this), c = r.u(this.options);
@@ -415,13 +415,13 @@ class M1 {
   }
   _$AC(t) {
     let i = y2.get(t.strings);
-    return i === void 0 && y2.set(t.strings, i = new x1(t)), i;
+    return i === void 0 && y2.set(t.strings, i = new y1(t)), i;
   }
   k(t) {
     J1(this._$AH) || (this._$AH = [], this._$AR());
     const i = this._$AH;
     let n, o = 0;
-    for (const s of t) o === i.length ? i.push(n = new M1(this.O(L1()), this.O(L1()), this, this.options)) : n = i[o], n._$AI(s), o++;
+    for (const s of t) o === i.length ? i.push(n = new E1(this.O(m1()), this.O(m1()), this, this.options)) : n = i[o], n._$AI(s), o++;
     o < i.length && (this._$AR(n && n._$AB.nextSibling, o), i.length = o);
   }
   _$AR(t = this._$AA.nextSibling, i) {
@@ -449,11 +449,11 @@ class A1 {
   _$AI(t, i = this, n, o) {
     const s = this.strings;
     let r = !1;
-    if (s === void 0) t = C1(this, t, i, 0), r = !y1(t) || t !== this._$AH && t !== e1, r && (this._$AH = t);
+    if (s === void 0) t = p1(this, t, i, 0), r = !L1(t) || t !== this._$AH && t !== e1, r && (this._$AH = t);
     else {
       const c = t;
       let h, u;
-      for (t = s[0], h = 0; h < s.length - 1; h++) u = C1(this, c[n + h], i, h), u === e1 && (u = this._$AH[h]), r || (r = !y1(u) || u !== this._$AH[h]), u === d ? t = d : t !== d && (t += (u ?? "") + s[h + 1]), this._$AH[h] = u;
+      for (t = s[0], h = 0; h < s.length - 1; h++) u = p1(this, c[n + h], i, h), u === e1 && (u = this._$AH[h]), r || (r = !L1(u) || u !== this._$AH[h]), u === d ? t = d : t !== d && (t += (u ?? "") + s[h + 1]), this._$AH[h] = u;
     }
     r && !o && this.j(t);
   }
@@ -482,7 +482,7 @@ class J2 extends A1 {
     super(t, i, n, o, s), this.type = 5;
   }
   _$AI(t, i = this) {
-    if ((t = C1(this, t, i, 0) ?? d) === e1) return;
+    if ((t = p1(this, t, i, 0) ?? d) === e1) return;
     const n = this._$AH, o = t === d && n !== d || t.capture !== n.capture || t.once !== n.once || t.passive !== n.passive, s = t !== d && (n === d || o);
     o && this.element.removeEventListener(this.name, this, n), s && this.element.addEventListener(this.name, this, t), this._$AH = t;
   }
@@ -499,17 +499,17 @@ class Q2 {
     return this._$AM._$AU;
   }
   _$AI(t) {
-    C1(this, t);
+    p1(this, t);
   }
 }
-const T1 = b1.litHtmlPolyfillSupport;
-T1 == null || T1(x1, M1), (b1.litHtmlVersions ?? (b1.litHtmlVersions = [])).push("3.3.0");
+const T1 = w1.litHtmlPolyfillSupport;
+T1 == null || T1(y1, E1), (w1.litHtmlVersions ?? (w1.litHtmlVersions = [])).push("3.3.0");
 const t3 = (e, t, i) => {
   const n = (i == null ? void 0 : i.renderBefore) ?? t;
   let o = n._$litPart$;
   if (o === void 0) {
     const s = (i == null ? void 0 : i.renderBefore) ?? null;
-    n._$litPart$ = o = new M1(t.insertBefore(L1(), s), s, void 0, i ?? {});
+    n._$litPart$ = o = new E1(t.insertBefore(m1(), s), s, void 0, i ?? {});
   }
   return o._$AI(e), o;
 };
@@ -518,8 +518,8 @@ const t3 = (e, t, i) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const l1 = globalThis;
-let p = class extends p1 {
+const r1 = globalThis;
+let p = class extends d1 {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -545,10 +545,10 @@ let p = class extends p1 {
   }
 };
 var B2;
-p._$litElement$ = !0, p.finalized = !0, (B2 = l1.litElementHydrateSupport) == null || B2.call(l1, { LitElement: p });
-const j1 = l1.litElementPolyfillSupport;
+p._$litElement$ = !0, p.finalized = !0, (B2 = r1.litElementHydrateSupport) == null || B2.call(r1, { LitElement: p });
+const j1 = r1.litElementPolyfillSupport;
 j1 == null || j1({ LitElement: p });
-(l1.litElementVersions ?? (l1.litElementVersions = [])).push("4.2.0");
+(r1.litElementVersions ?? (r1.litElementVersions = [])).push("4.2.0");
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -621,7 +621,7 @@ function _2(e, t) {
     } });
   };
 }
-const o1 = g`
+const i1 = g`
 	outline: 1px dashed var(--color-border-primary);
 	outline-offset: 2px;
 `;
@@ -1542,7 +1542,7 @@ const s3 = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
     pixelSize: n,
     shouldApplyLogicalSize: o
   };
-}, i1 = F2, It = {
+}, M1 = F2, It = {
   strikeDiagonal: $3
 }, Dt = {
   success: M3,
@@ -1599,7 +1599,7 @@ U1.directiveName = "unsafeHTML", U1.resultType = 1;
 class q1 extends U1 {
 }
 q1.directiveName = "unsafeSVG", q1.resultType = 2;
-const $ = n2(q1);
+const O = n2(q1);
 /**
  * @license
  * Copyright 2020 Google LLC
@@ -1611,11 +1611,11 @@ const Tt = (e) => e.strings === void 0;
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const m1 = (e, t) => {
+const b1 = (e, t) => {
   var n;
   const i = e._$AN;
   if (i === void 0) return !1;
-  for (const o of i) (n = o._$AO) == null || n.call(o, t, !1), m1(o, t);
+  for (const o of i) (n = o._$AO) == null || n.call(o, t, !1), b1(o, t);
   return !0;
 }, S1 = (e) => {
   let t, i;
@@ -1636,9 +1636,9 @@ function jt(e) {
 }
 function Rt(e, t = !1, i = 0) {
   const n = this._$AH, o = this._$AN;
-  if (o !== void 0 && o.size !== 0) if (t) if (Array.isArray(n)) for (let s = i; s < n.length; s++) m1(n[s], !1), S1(n[s]);
-  else n != null && (m1(n, !1), S1(n));
-  else m1(this, e);
+  if (o !== void 0 && o.size !== 0) if (t) if (Array.isArray(n)) for (let s = i; s < n.length; s++) b1(n[s], !1), S1(n[s]);
+  else n != null && (b1(n, !1), S1(n));
+  else b1(this, e);
 }
 const Ut = (e) => {
   e.type == o2.CHILD && (e._$AP ?? (e._$AP = Rt), e._$AQ ?? (e._$AQ = jt));
@@ -1652,7 +1652,7 @@ class qt extends s2 {
   }
   _$AO(t, i = !0) {
     var n, o;
-    t !== this.isConnected && (this.isConnected = t, t ? (n = this.reconnected) == null || n.call(this) : (o = this.disconnected) == null || o.call(this)), i && (m1(this, t), S1(this));
+    t !== this.isConnected && (this.isConnected = t, t ? (n = this.reconnected) == null || n.call(this) : (o = this.disconnected) == null || o.call(this)), i && (b1(this, t), S1(this));
   }
   setValue(t) {
     if (Tt(this._$Ct)) this._$Ct._$AI(t, this);
@@ -1792,13 +1792,13 @@ const V2 = n2(Wt);
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const k = (e) => e ?? d;
+const M = (e) => e ?? d;
 var Gt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, T = (e, t, i, n) => {
   for (var o = n > 1 ? void 0 : n ? Xt(t, i) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
   return n && o && Gt(t, i, o), o;
 };
-let Z = class extends p {
+let k = class extends p {
   constructor() {
     super(...arguments), this.bgstyle = "background-light", this.size = "medium", this.status = "empty", this.type = "button", this.strokewidth = "1", this.icon = "", this.disabled = !1, this.showSrLabel = !1, this.srLabel = "";
   }
@@ -1815,24 +1815,24 @@ let Z = class extends p {
     return a`
 			${this.type === "span" ? a`
 				<span class="icon icon-button ${this.size} ${this.bgstyle} ${this.status} ${n}" ?disabled="${this.disabled}">	
-					${$(r)}
+					${O(r)}
 				</span>
 			` : a`
 				<button
 					type="button"
-					aria-label=${k(h)}
+					aria-label=${M(h)}
 					aria-describedby=${this.getAttribute("aria-describedby") || d}
 					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${n}"
 					?disabled="${this.disabled}"
 				>
-					${$(r)}
+					${O(r)}
 					${c}
 				</button>
 			`}
 		`;
   }
 };
-Z.styles = g`
+k.styles = g`
 		:host {
 			display: inline-flex;
 			justify-content: center;
@@ -2008,7 +2008,7 @@ Z.styles = g`
 		}
 
 		.icon-button:focus-visible {
-			${o1}
+			${i1}
 		}
 
 		.sr-only {
@@ -2017,34 +2017,34 @@ Z.styles = g`
 	`;
 T([
   l({ type: String, reflect: !0 })
-], Z.prototype, "bgstyle", 2);
+], k.prototype, "bgstyle", 2);
 T([
   l({ type: String, reflect: !0 })
-], Z.prototype, "size", 2);
+], k.prototype, "size", 2);
 T([
   l({ type: String, reflect: !0 })
-], Z.prototype, "status", 2);
+], k.prototype, "status", 2);
 T([
   l({ type: String, reflect: !0 })
-], Z.prototype, "type", 2);
+], k.prototype, "type", 2);
 T([
   l({ type: String })
-], Z.prototype, "strokewidth", 2);
+], k.prototype, "strokewidth", 2);
 T([
   l({ type: String })
-], Z.prototype, "icon", 2);
+], k.prototype, "icon", 2);
 T([
   l({ type: Boolean, reflect: !0 })
-], Z.prototype, "disabled", 2);
+], k.prototype, "disabled", 2);
 T([
   l({ type: Boolean })
-], Z.prototype, "showSrLabel", 2);
+], k.prototype, "showSrLabel", 2);
 T([
   l({ type: String })
-], Z.prototype, "srLabel", 2);
-Z = T([
+], k.prototype, "srLabel", 2);
+k = T([
   f("o-icon-button")
-], Z);
+], k);
 var Yt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, w = (e, t, i, n) => {
   for (var o = n > 1 ? void 0 : n ? Jt(t, i) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
@@ -2271,7 +2271,7 @@ let C = class extends p {
 				${this.addToBagProductCount ? a`<span class="a-quantity">${this.addToBagProductCount}</span>` : null}
 			</div>
 			<o-icon-button
-				icon="cross"
+				icon="occ-close-outlined"
 				size="small"
 				class="close-btn"
 				bgstyle="background-light"
@@ -2482,7 +2482,7 @@ C.styles = g`
 
 		.panel:focus-visible,
 		.close-btn:focus-visible {
-			${o1}
+			${i1}
 		}
 
 		[role="document"] {
@@ -2689,11 +2689,11 @@ let b = class extends e5 {
   renderIcon(e) {
     const t = e === "start" ? this.startIconModel : this.endIconModel;
     if (!t) return d;
-    const i = i1[t].replace(
+    const i = M1[t].replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     );
-    return a`<span class="${e === "start" ? "icon-start" : "icon-end"}">${$(i)}</span>`;
+    return a`<span class="${e === "start" ? "icon-start" : "icon-end"}">${O(i)}</span>`;
   }
   renderButton() {
     const e = this.text || this.textsecond;
@@ -2851,7 +2851,7 @@ b.styles = g`
     }
 
     .button:focus-visible {
-      ${o1};
+      ${i1};
     }
 
     span.text + span.text::before {
@@ -3001,7 +3001,7 @@ var i5 = Object.defineProperty, o5 = Object.getOwnPropertyDescriptor, P1 = (e, t
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
   return n && o && i5(t, i, o), o;
 };
-let g1 = class extends p {
+let C1 = class extends p {
   constructor() {
     super(...arguments), this.status = "empty", this.ariaDescribedBy = "a-product-name", this.label = "Add to wishlist", this.toggleStatus = () => {
       this.status = this.status === "empty" ? "filled" : "empty", this.setAttribute("aria-pressed", String(this.status === "filled")), this.dispatchEvent(new CustomEvent("wishlist-toggle", {
@@ -3021,14 +3021,14 @@ let g1 = class extends p {
     (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.toggleStatus());
   }
   render() {
-    const e = i1.wishlist.replace(
+    const e = M1.wishlist.replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     );
     return a`
 			<button type="button" aria-describedby="${this.ariaDescribedBy}" class="wishlist-button">
 				<span class="sr-only">${this.label}</span>
-				${$(e)}
+				${O(e)}
 			</button>
 		`;
   }
@@ -3042,7 +3042,7 @@ let g1 = class extends p {
     this.label = e, this.requestUpdate();
   }
 };
-g1.styles = g`
+C1.styles = g`
 		:host {
 			display: inline-flex;
 			justify-content: center;
@@ -3072,7 +3072,7 @@ g1.styles = g`
 		}
 
 		.wishlist-button:focus-visible {
-			${o1};
+			${i1};
 		}
 
 		.wishlist-button:hover svg path {
@@ -3099,17 +3099,17 @@ g1.styles = g`
 	`;
 P1([
   l({ type: String, reflect: !0 })
-], g1.prototype, "status", 2);
+], C1.prototype, "status", 2);
 P1([
   l({ type: String, reflect: !0 })
-], g1.prototype, "ariaDescribedBy", 2);
+], C1.prototype, "ariaDescribedBy", 2);
 P1([
   l({ type: String, reflect: !0 })
-], g1.prototype, "label", 2);
-g1 = P1([
+], C1.prototype, "label", 2);
+C1 = P1([
   f("o-wishlist-button")
-], g1);
-var n5 = Object.defineProperty, s5 = Object.getOwnPropertyDescriptor, c1 = (e, t, i, n) => {
+], C1);
+var n5 = Object.defineProperty, s5 = Object.getOwnPropertyDescriptor, a1 = (e, t, i, n) => {
   for (var o = n > 1 ? void 0 : n ? s5(t, i) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
   return n && o && n5(t, i, o), o;
@@ -3147,7 +3147,7 @@ let N = class extends p {
                     <a
                         class="link-wrapper"
                         href="${this.href}"
-                        target="${k(this.target || void 0)}"
+                        target="${M(this.target || void 0)}"
                         @click="${this._handleClick}"
                     >
                         ${t}
@@ -3242,25 +3242,25 @@ N.styles = g`
             }
         }
     `;
-c1([
+a1([
   l({ type: String })
 ], N.prototype, "href", 2);
-c1([
+a1([
   l({ type: String })
 ], N.prototype, "target", 2);
-c1([
+a1([
   l({ type: String, reflect: !0 })
 ], N.prototype, "template", 2);
-c1([
+a1([
   l({ type: Boolean, reflect: !0 })
 ], N.prototype, "inverse", 2);
-c1([
+a1([
   l({ type: Boolean, reflect: !0 })
 ], N.prototype, "endIcon", 2);
-c1([
+a1([
   l({ type: Boolean, reflect: !0 })
 ], N.prototype, "reverseEndIcon", 2);
-N = c1([
+N = a1([
   f("o-link")
 ], N);
 var r5 = Object.defineProperty, l5 = Object.getOwnPropertyDescriptor, O1 = (e, t, i, n) => {
@@ -3268,7 +3268,7 @@ var r5 = Object.defineProperty, l5 = Object.getOwnPropertyDescriptor, O1 = (e, t
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
   return n && o && r5(t, i, o), o;
 };
-let u1 = class extends p {
+let g1 = class extends p {
   constructor() {
     super(...arguments), this.rating = 0;
   }
@@ -3287,7 +3287,7 @@ let u1 = class extends p {
 			<div class="rating">
 			<div class="stars">
 				${e.map(
-      (t) => a`<span class="star">${$(i1[t] ?? "")}</span>`
+      (t) => a`<span class="star">${O(M1[t] ?? "")}</span>`
     )}
 			</div>
 			${this.reviewCount != null && this.href != null ? a`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>` : null}
@@ -3295,7 +3295,7 @@ let u1 = class extends p {
 		`;
   }
 };
-u1.styles = g`
+g1.styles = g`
 		svg {
 			width: 12px;
 			height: 12px;
@@ -3331,17 +3331,17 @@ u1.styles = g`
 	`;
 O1([
   l({ type: Number })
-], u1.prototype, "rating", 2);
+], g1.prototype, "rating", 2);
 O1([
   l({ type: String })
-], u1.prototype, "reviewCount", 2);
+], g1.prototype, "reviewCount", 2);
 O1([
   l({ type: String })
-], u1.prototype, "href", 2);
-u1 = O1([
+], g1.prototype, "href", 2);
+g1 = O1([
   f("o-rating")
-], u1);
-var a5 = Object.defineProperty, c5 = Object.getOwnPropertyDescriptor, n1 = (e, t, i, n) => {
+], g1);
+var a5 = Object.defineProperty, c5 = Object.getOwnPropertyDescriptor, o1 = (e, t, i, n) => {
   for (var o = n > 1 ? void 0 : n ? c5(t, i) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
   return n && o && a5(t, i, o), o;
@@ -3542,28 +3542,28 @@ D.styles = g`
       width: 0;
     }
   `;
-n1([
+o1([
   l({ type: Array })
 ], D.prototype, "thumbnails", 2);
-n1([
+o1([
   l({ type: Number })
 ], D.prototype, "activeIndex", 2);
-n1([
+o1([
   l({ type: Array })
 ], D.prototype, "disabledIndexes", 2);
-n1([
+o1([
   l({ type: String })
 ], D.prototype, "maxWidth", 2);
-n1([
+o1([
   l({ type: String })
 ], D.prototype, "altressource", 2);
-n1([
+o1([
   l({ type: Object })
 ], D.prototype, "swiperInstance", 2);
-n1([
+o1([
   G()
 ], D.prototype, "focusedIndex", 2);
-D = n1([
+D = o1([
   f("thumbnail-navigation")
 ], D);
 var h5 = Object.defineProperty, d5 = Object.getOwnPropertyDescriptor, r2 = (e, t, i, n) => {
@@ -3571,7 +3571,7 @@ var h5 = Object.defineProperty, d5 = Object.getOwnPropertyDescriptor, r2 = (e, t
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
   return n && o && h5(t, i, o), o;
 };
-let H1 = class extends p {
+let x1 = class extends p {
   constructor() {
     super(...arguments), this.type = "", this.bgstyle = "background-white";
   }
@@ -3581,7 +3581,7 @@ let H1 = class extends p {
     `;
   }
 };
-H1.styles = g`
+x1.styles = g`
     .tag {
       display: inline-block;
       padding: var(--spacing-2-xs) var(--spacing-s);
@@ -3640,19 +3640,19 @@ H1.styles = g`
   `;
 r2([
   l({ type: String, reflect: !0 })
-], H1.prototype, "type", 2);
+], x1.prototype, "type", 2);
 r2([
   l({ type: String, reflect: !0 })
-], H1.prototype, "bgstyle", 2);
-H1 = r2([
+], x1.prototype, "bgstyle", 2);
+x1 = r2([
   f("o-tag")
-], H1);
+], x1);
 var p5 = Object.defineProperty, C5 = Object.getOwnPropertyDescriptor, l2 = (e, t, i, n) => {
   for (var o = n > 1 ? void 0 : n ? C5(t, i) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
   return n && o && p5(t, i, o), o;
 };
-let V1 = class extends p {
+let H1 = class extends p {
   constructor() {
     super(...arguments), this.type = "top", this.text = "";
   }
@@ -3665,7 +3665,7 @@ let V1 = class extends p {
     `;
   }
 };
-V1.styles = g`
+H1.styles = g`
     .tooltip {
         position: relative;
         display: inline-block;
@@ -3760,13 +3760,13 @@ V1.styles = g`
   `;
 l2([
   l({ type: String, reflect: !0 })
-], V1.prototype, "type", 2);
+], H1.prototype, "type", 2);
 l2([
   l({ type: String, reflect: !0 })
-], V1.prototype, "text", 2);
-V1 = l2([
+], H1.prototype, "text", 2);
+H1 = l2([
   f("o-tooltip")
-], V1);
+], H1);
 var g5 = Object.defineProperty, u5 = Object.getOwnPropertyDescriptor, X = (e, t, i, n) => {
   for (var o = n > 1 ? void 0 : n ? u5(t, i) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
@@ -3838,7 +3838,7 @@ let z = class extends p {
     this.options.length > 0 && (this.options.some((i) => i.value === this.value) || (this.value = this.options[0].value));
   }
   render() {
-    const e = i1.checkstroke.replace(
+    const e = M1["occ-check-outlined"].replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     ), t = this.options.find((i) => i.value === this.value);
@@ -3883,10 +3883,10 @@ let z = class extends p {
                   ${i.url ? a`
                   <a href="${i.url}">
                     <span>${i.label}</span>
-                    ${i.value === this.value ? a`<span class="check">${$(e)}</span>` : null}
+                    ${i.value === this.value ? a`<span class="check">${O(e)}</span>` : null}  
                   </a>` : a`
                     <span>${i.label}</span>
-                    ${i.value === this.value ? a`<span class="check">${$(e)}</span>` : null}`}
+                    ${i.value === this.value ? a`<span class="check">${O(e)}</span>` : null}`}
                 </li>`
     )}
           </ul>` : null}
@@ -4122,7 +4122,7 @@ var w5 = Object.defineProperty, b5 = Object.getOwnPropertyDescriptor, j = (e, t,
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
   return n && o && w5(t, i, o), o;
 };
-let _ = class extends p {
+let Z = class extends p {
   constructor() {
     super(...arguments), this.options = [], this.value = "", this.name = "", this.additionaltext = "+X variant(s)", this.disabled = !1, this.width = "100%", this.open = !1, this.activeIndex = -1, this.menuWidth = "", this._handleOutsideClick = (e) => {
       this.contains(e.target) || (this.open = !1, this.activeIndex = -1);
@@ -4188,7 +4188,7 @@ let _ = class extends p {
     this.options.length > 0 && (this.options.some((t) => t.value === this.value) || (this.value = this.options[0].value));
   }
   render() {
-    const e = i1.checkstroke.replace(
+    const e = M1["occ-check-outlined"].replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     ), t = this.options.find((i) => i.value === this.value);
@@ -4206,7 +4206,7 @@ let _ = class extends p {
 				?disabled=${this.disabled}
 				class="btn-dropdown"
 			>
-				<img alt="${k(t == null ? void 0 : t.label)}" src="${k(t == null ? void 0 : t.imgurl)}" />
+				<img alt="${M(t == null ? void 0 : t.label)}" src="${M(t == null ? void 0 : t.imgurl)}" />
 				<span id="dropdown-label" class="label">
 					${t ? t.label : "Select an option"}
 				</span>
@@ -4241,13 +4241,13 @@ let _ = class extends p {
 									class="${n === this.activeIndex ? "active" : ""} ${i.disabled ? "disabled" : ""}"
 									@click=${() => this.selectOption(i)}
 								>
-									<a href="${k(i.url)}">
-										<img alt="${k(i.label)}" src="${k(i.imgurl)}" />
+									<a href="${M(i.url)}">
+										<img alt="${M(i.label)}" src="${M(i.imgurl)}" />
 										<span class="label">${i.label}</span>
 										<div class="right">
-											<span class="additional-text">${k(i.additionaltext)}</span>
+											<span class="additional-text">${M(i.additionaltext)}</span>
 											${i.value === this.value && !i.additionaltext ? a`
-												<span class="check">${$(e)}</span>` : null}
+												<span class="check">${O(e)}</span>` : null}
 										</div>
 									</a>
 								</li>
@@ -4259,7 +4259,7 @@ let _ = class extends p {
 		`;
   }
 };
-_.styles = g`
+Z.styles = g`
 	:host {
 		display: inline-block;
 		position: relative;
@@ -4438,34 +4438,34 @@ _.styles = g`
 	`;
 j([
   l({ type: Array, reflect: !0 })
-], _.prototype, "options", 2);
+], Z.prototype, "options", 2);
 j([
   l({ type: String, reflect: !0 })
-], _.prototype, "value", 2);
+], Z.prototype, "value", 2);
 j([
   l({ type: String, reflect: !0 })
-], _.prototype, "name", 2);
+], Z.prototype, "name", 2);
 j([
   l({ type: String, reflect: !0 })
-], _.prototype, "additionaltext", 2);
+], Z.prototype, "additionaltext", 2);
 j([
   l({ type: Boolean, reflect: !0 })
-], _.prototype, "disabled", 2);
+], Z.prototype, "disabled", 2);
 j([
   l({ type: String, reflect: !0 })
-], _.prototype, "width", 2);
+], Z.prototype, "width", 2);
 j([
   G()
-], _.prototype, "open", 2);
+], Z.prototype, "open", 2);
 j([
   G()
-], _.prototype, "activeIndex", 2);
+], Z.prototype, "activeIndex", 2);
 j([
   G()
-], _.prototype, "menuWidth", 2);
-_ = j([
+], Z.prototype, "menuWidth", 2);
+Z = j([
   f("o-dropdown-variant")
-], _);
+], Z);
 /**
  * @license
  * Copyright 2018 Google LLC
@@ -4502,7 +4502,7 @@ var y5 = Object.defineProperty, x5 = Object.getOwnPropertyDescriptor, a2 = (e, t
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
   return n && o && y5(t, i, o), o;
 };
-let B1 = class extends p {
+let V1 = class extends p {
   constructor() {
     super(...arguments), this.option = {}, this.imageSize = 64;
   }
@@ -4514,16 +4514,16 @@ let B1 = class extends p {
       width: `${this.imageSize}px`,
       height: `${this.imageSize}px`
     }, n = this.option && this.option.title ? e(this.option.title) : "", o = this.option && this.option.description ? e(this.option.description) : "", s = a`
-      ${this.option.imgurl ? a`<img src="${this.option.imgurl}" alt="${k(n)}" aria-hidden="true" style=${L5(i)} />` : ""}
+      ${this.option.imgurl ? a`<img src="${this.option.imgurl}" alt="${M(n)}" aria-hidden="true" style=${L5(i)} />` : ""}
       <div class="m-reassurance-content">
-        <h3 class="a-reassurance-text">${k(n)}</h3>
-        <p class="a-reassurance-description">${k(o)}</p>
+        <h3 class="a-reassurance-text">${M(n)}</h3>
+        <p class="a-reassurance-description">${M(o)}</p>
       </div>
     `;
-    return t ? a`<a href="${k(this.option.url)}" class="reassurance-item clickable">${s}</a>` : a`<div class="reassurance-item">${s}</div>`;
+    return t ? a`<a href="${M(this.option.url)}" class="reassurance-item clickable">${s}</a>` : a`<div class="reassurance-item">${s}</div>`;
   }
 };
-B1.styles = g`
+V1.styles = g`
     :host {
       display: inline-block;
       position: relative;
@@ -4607,20 +4607,20 @@ B1.styles = g`
   `;
 a2([
   l({ type: Object, reflect: !0 })
-], B1.prototype, "option", 2);
+], V1.prototype, "option", 2);
 a2([
   l({ type: Number, reflect: !0 })
-], B1.prototype, "imageSize", 2);
-B1 = a2([
+], V1.prototype, "imageSize", 2);
+V1 = a2([
   f("o-reassurance")
-], B1);
+], V1);
 var H5 = Object.defineProperty, V5 = Object.getOwnPropertyDescriptor, Y = (e, t, i, n) => {
   for (var o = n > 1 ? void 0 : n ? V5(t, i) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
   return n && o && H5(t, i, o), o;
 };
 const B5 = e2(p);
-let F = class extends B5 {
+let _ = class extends B5 {
   constructor() {
     super(...arguments), this.link = "", this.name = "", this.value = "", this.text = "", this.size = "standard", this.selected = !1, this.fullwidth = !1, this.inactive = !1;
   }
@@ -4644,7 +4644,7 @@ let F = class extends B5 {
     `;
   }
 };
-F.styles = g`
+_.styles = g`
     :host {
       cursor: pointer;
       display: inline-flex;
@@ -4725,7 +4725,7 @@ F.styles = g`
 
     .o-chip:focus-visible,
     .button:focus-visible {
-      ${o1};
+      ${i1};
     }
 
     span.text + span.text::before {
@@ -4740,42 +4740,42 @@ F.styles = g`
   `;
 Y([
   l({ type: String, reflect: !0 })
-], F.prototype, "link", 2);
+], _.prototype, "link", 2);
 Y([
   l({ reflect: !0 })
-], F.prototype, "name", 2);
+], _.prototype, "name", 2);
 Y([
   l({ reflect: !0 })
-], F.prototype, "value", 2);
+], _.prototype, "value", 2);
 Y([
   l({ type: String })
-], F.prototype, "text", 2);
+], _.prototype, "text", 2);
 Y([
   l({ type: String, reflect: !0 })
-], F.prototype, "size", 2);
+], _.prototype, "size", 2);
 Y([
   l({ type: Boolean, reflect: !0 })
-], F.prototype, "selected", 2);
+], _.prototype, "selected", 2);
 Y([
   l({ type: Boolean, reflect: !0 })
-], F.prototype, "fullwidth", 2);
+], _.prototype, "fullwidth", 2);
 Y([
   l({ type: Boolean, reflect: !0 })
-], F.prototype, "inactive", 2);
-F = Y([
+], _.prototype, "inactive", 2);
+_ = Y([
   f("o-chip")
-], F);
+], _);
 var $5 = Object.defineProperty, E5 = Object.getOwnPropertyDescriptor, c2 = (e, t, i, n) => {
   for (var o = n > 1 ? void 0 : n ? E5(t, i) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
   return n && o && $5(t, i, o), o;
 };
-let $1 = class extends p {
+let B1 = class extends p {
   constructor() {
     super(), this.name = "", this.value = "", this.addEventListener("selected", this.onChipSelected);
   }
   onChipSelected(e) {
-    const t = e.target instanceof F ? e.target : null;
+    const t = e.target instanceof _ ? e.target : null;
     t != null && t.link || (this.name = (t == null ? void 0 : t.name) || "", this.value = (t == null ? void 0 : t.value) || "", this.querySelectorAll("o-chip").forEach((i) => {
       i !== t && (i.selected = !1);
     }));
@@ -4786,7 +4786,7 @@ let $1 = class extends p {
     `;
   }
 };
-$1.styles = g`
+B1.styles = g`
     :host {
       display: flex;
       flex-direction: row;
@@ -4796,20 +4796,20 @@ $1.styles = g`
   `;
 c2([
   l({ reflect: !0 })
-], $1.prototype, "name", 2);
+], B1.prototype, "name", 2);
 c2([
   l({ reflect: !0 })
-], $1.prototype, "value", 2);
-$1 = c2([
+], B1.prototype, "value", 2);
+B1 = c2([
   f("o-chipset")
-], $1);
+], B1);
 var M5 = Object.defineProperty, k5 = Object.getOwnPropertyDescriptor, R = (e, t, i, n) => {
   for (var o = n > 1 ? void 0 : n ? k5(t, i) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
   return n && o && M5(t, i, o), o;
 };
 const Z5 = e2(p);
-let S = class extends Z5 {
+let F = class extends Z5 {
   constructor() {
     super(...arguments), this.name = "", this.value = "", this.type = "", this.text = "", this.selected = !1, this.disabled = !1, this.fullwidth = !1, this.crossIconName = "cross", this.strikethroughImgName = "strikeDiagonal";
   }
@@ -4821,18 +4821,14 @@ let S = class extends Z5 {
     this.dispatchEvent(i), i.defaultPrevented && e.preventDefault(), this.selected = t.selected;
   }
   crossIcon() {
-    const e = i1[this.crossIconName].replace(
-      "<svg",
-      '<svg aria-hidden="true" focusable="false" part="svg"'
-    ).replace(/stroke=[#"'a-z1-9]*/gi, "");
-    return a`<span class="cross-icon">${$(e)}</span>`;
+    return a`<o-icon-button size="xsmall" icon="occ-close-outlined" bgstyle="none-light"></o-icon-button>`;
   }
   strikeThroughImg() {
     const e = It[this.strikethroughImgName].replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="strikethrough"'
     ).replace(/stroke=[#"'a-z1-9]*/gi, "");
-    return $(e);
+    return O(e);
   }
   render() {
     const e = this.text;
@@ -4859,7 +4855,7 @@ let S = class extends Z5 {
     `;
   }
 };
-S.styles = g`
+F.styles = g`
     :host {
       cursor: pointer;
       display: inline-flex;
@@ -4941,7 +4937,7 @@ S.styles = g`
     }
 
     .button:focus-visible {
-      ${o1};
+      ${i1};
     }
 
     span.text + span.text::before {
@@ -4984,35 +4980,35 @@ S.styles = g`
   `;
 R([
   l({ reflect: !0 })
-], S.prototype, "name", 2);
+], F.prototype, "name", 2);
 R([
   l({ reflect: !0 })
-], S.prototype, "value", 2);
+], F.prototype, "value", 2);
 R([
   l({ type: String, reflect: !0 })
-], S.prototype, "type", 2);
+], F.prototype, "type", 2);
 R([
   l({ type: String, reflect: !0 })
-], S.prototype, "href", 2);
+], F.prototype, "href", 2);
 R([
   l({ type: String, reflect: !0, attribute: "data-href" })
-], S.prototype, "dataHref", 2);
+], F.prototype, "dataHref", 2);
 R([
   l({ type: String })
-], S.prototype, "text", 2);
+], F.prototype, "text", 2);
 R([
   l({ type: Boolean, reflect: !0 })
-], S.prototype, "selected", 2);
+], F.prototype, "selected", 2);
 R([
   l({ type: Boolean, reflect: !0 })
-], S.prototype, "disabled", 2);
+], F.prototype, "disabled", 2);
 R([
   l({ type: Boolean, reflect: !0 })
-], S.prototype, "fullwidth", 2);
-S = R([
+], F.prototype, "fullwidth", 2);
+F = R([
   f("o-filter-chip")
-], S);
-var _5 = Object.defineProperty, P = (e, t, i, n) => {
+], F);
+var _5 = Object.defineProperty, A = (e, t, i, n) => {
   for (var o = void 0, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (o = r(t, i, o) || o);
   return o && _5(t, i, o), o;
@@ -5199,40 +5195,40 @@ d2.styles = g`
     }
   `;
 let B = d2;
-P([
+A([
   l({ type: String })
 ], B.prototype, "type");
-P([
+A([
   l({ type: String })
 ], B.prototype, "titleProduct");
-P([
+A([
   l({ type: String })
 ], B.prototype, "volume");
-P([
+A([
   l({ type: String })
 ], B.prototype, "perLiter");
-P([
+A([
   l({ type: String })
 ], B.prototype, "mainPrice");
-P([
+A([
   l({ type: String })
 ], B.prototype, "imageUrl");
-P([
+A([
   l({ type: String })
 ], B.prototype, "altImage");
-P([
+A([
   l({ type: Boolean })
 ], B.prototype, "fullwidth");
-P([
+A([
   l({ type: String })
 ], B.prototype, "tagText");
-P([
+A([
   l({ type: Boolean })
 ], B.prototype, "outOfStock");
-P([
+A([
   l({ attribute: !1 })
 ], B.prototype, "onClickTile");
-P([
+A([
   l({ attribute: !1 })
 ], B.prototype, "onClickIcon");
 customElements.define("mini-tile", B);
@@ -5241,7 +5237,7 @@ var F5 = Object.defineProperty, S5 = Object.getOwnPropertyDescriptor, z1 = (e, t
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
   return n && o && F5(t, i, o), o;
 };
-let v1 = class extends p {
+let u1 = class extends p {
   constructor() {
     super(...arguments), this.variant = "cart", this.text = 0, this.srlabel = "";
   }
@@ -5253,7 +5249,7 @@ let v1 = class extends p {
     `;
   }
 };
-v1.styles = g`
+u1.styles = g`
     :host([variant]) {
       --badge-width: 19px;
       display: inline-block;
@@ -5293,22 +5289,22 @@ v1.styles = g`
   `;
 z1([
   l({ type: String, reflect: !0 })
-], v1.prototype, "variant", 2);
+], u1.prototype, "variant", 2);
 z1([
   l({ type: Number })
-], v1.prototype, "text", 2);
+], u1.prototype, "text", 2);
 z1([
   l({ type: String })
-], v1.prototype, "srlabel", 2);
-v1 = z1([
+], u1.prototype, "srlabel", 2);
+u1 = z1([
   f("o-badge")
-], v1);
-var A5 = Object.defineProperty, P5 = Object.getOwnPropertyDescriptor, O = (e, t, i, n) => {
+], u1);
+var A5 = Object.defineProperty, P5 = Object.getOwnPropertyDescriptor, P = (e, t, i, n) => {
   for (var o = n > 1 ? void 0 : n ? P5(t, i) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
   return n && o && A5(t, i, o), o;
 };
-let E = class extends p {
+let $ = class extends p {
   constructor() {
     super(...arguments), this.icon = "info", this.text = "Sample text", this.verticalanchor = "top", this.horizontalanchor = "right", this.verticaloffset = 24, this.horizontaloffset = 24, this.animationduration = 500, this.animationaxis = "horizontal", this.animated = !0, this.lifeduration = 5e3, this.multiline = !1;
   }
@@ -5356,7 +5352,7 @@ let E = class extends p {
     return a`
             <div class="o-toast">
                 <div class="o-toast-icon">
-                    ${$(t)}
+                    ${O(t)}
                 </div>
                 <div class="o-toast-text">
                     ${this.text}
@@ -5364,7 +5360,7 @@ let E = class extends p {
                 <div class="o-toast-close">
                     <o-icon-button
                         size="xsmall"
-                        icon="cross"
+                        icon="occ-close-outlined"
                     >
                     </o-icon-button>
                 </div>
@@ -5372,7 +5368,7 @@ let E = class extends p {
         `;
   }
 };
-E.styles = g`
+$.styles = g`
         :host {
             --vertical-offset: 24px;
             --horizontal-offset: 24px;
@@ -5450,48 +5446,48 @@ E.styles = g`
             height: 16px;
         }
     `;
-O([
+P([
   l({ type: String, reflect: !0 })
-], E.prototype, "icon", 2);
-O([
+], $.prototype, "icon", 2);
+P([
   l({ type: String, reflect: !0 })
-], E.prototype, "text", 2);
-O([
+], $.prototype, "text", 2);
+P([
   l({ type: String, reflect: !0 })
-], E.prototype, "verticalanchor", 2);
-O([
+], $.prototype, "verticalanchor", 2);
+P([
   l({ type: String, reflect: !0 })
-], E.prototype, "horizontalanchor", 2);
-O([
+], $.prototype, "horizontalanchor", 2);
+P([
   l({ type: Number, reflect: !0 })
-], E.prototype, "verticaloffset", 2);
-O([
+], $.prototype, "verticaloffset", 2);
+P([
   l({ type: Number, reflect: !0 })
-], E.prototype, "horizontaloffset", 2);
-O([
+], $.prototype, "horizontaloffset", 2);
+P([
   l({ type: Number, reflect: !0 })
-], E.prototype, "animationduration", 2);
-O([
+], $.prototype, "animationduration", 2);
+P([
   l({ type: String, reflect: !0 })
-], E.prototype, "animationaxis", 2);
-O([
+], $.prototype, "animationaxis", 2);
+P([
   l({ type: Boolean, reflect: !0 })
-], E.prototype, "animated", 2);
-O([
+], $.prototype, "animated", 2);
+P([
   l({ type: Number, reflect: !0 })
-], E.prototype, "lifeduration", 2);
-O([
+], $.prototype, "lifeduration", 2);
+P([
   l({ type: Boolean, reflect: !0 })
-], E.prototype, "multiline", 2);
-E = O([
+], $.prototype, "multiline", 2);
+$ = P([
   f("o-toast")
-], E);
+], $);
 var O5 = Object.defineProperty, z5 = Object.getOwnPropertyDescriptor, I = (e, t, i, n) => {
   for (var o = n > 1 ? void 0 : n ? z5(t, i) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
   return n && o && O5(t, i, o), o;
 };
-let I5 = 0, M = class extends p {
+let I5 = 0, E = class extends p {
   constructor() {
     super(), this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.size = "S", this.showLabel = !0, this.label = "Checkbox", this.name = "", this.value = "on", this.inputId = "", this.inputId || (this.inputId = `o-checkbox-${++I5}`);
   }
@@ -5508,7 +5504,7 @@ let I5 = 0, M = class extends p {
     this.disabled || (e.key === " " || e.key === "Enter") && (e.preventDefault(), this.toggle());
   }
   render() {
-    const e = $(i1.checkbox.replace("<svg", '<svg aria-hidden="true" focusable="false" part="svg"')), t = $(i1.icoMinus.replace("<svg", '<svg class="indeterminate" aria-hidden="true" focusable="false" part="svg"'));
+    const e = a`<o-icon-button size="${this.size === "L" ? "small" : "xsmall"}" icon="occ-check-outlined" bgstyle="none-light"></o-icon-button>`, t = a`<o-icon-button size="${this.size === "L" ? "small" : "xsmall"}" icon="occ-minus" bgstyle="none-light"></o-icon-button>`;
     return a`
       <input
         type="checkbox"
@@ -5531,7 +5527,7 @@ let I5 = 0, M = class extends p {
     `;
   }
 };
-M.styles = g`
+E.styles = g`
     :host {
       display: inline-flex;
       align-items: center;
@@ -5579,7 +5575,7 @@ M.styles = g`
       border-color: var(--color-border-primary);
 
       svg {
-        width: 80%;
+        width: 100%;
         height: 100%;
       }
     }
@@ -5636,43 +5632,43 @@ M.styles = g`
   `;
 I([
   l({ type: Boolean, reflect: !0 })
-], M.prototype, "checked", 2);
+], E.prototype, "checked", 2);
 I([
   l({ type: Boolean, reflect: !0 })
-], M.prototype, "indeterminate", 2);
+], E.prototype, "indeterminate", 2);
 I([
   l({ type: Boolean, reflect: !0 })
-], M.prototype, "disabled", 2);
+], E.prototype, "disabled", 2);
 I([
   l({ type: String, reflect: !0 })
-], M.prototype, "size", 2);
+], E.prototype, "size", 2);
 I([
   l({ type: Boolean })
-], M.prototype, "showLabel", 2);
+], E.prototype, "showLabel", 2);
 I([
   l({ type: String })
-], M.prototype, "label", 2);
+], E.prototype, "label", 2);
 I([
   l({ type: String })
-], M.prototype, "name", 2);
+], E.prototype, "name", 2);
 I([
   l({ type: String })
-], M.prototype, "value", 2);
+], E.prototype, "value", 2);
 I([
   l({ type: String, reflect: !0 })
-], M.prototype, "inputId", 2);
+], E.prototype, "inputId", 2);
 I([
   _2("input")
-], M.prototype, "inputEl", 2);
-M = I([
+], E.prototype, "inputEl", 2);
+E = I([
   f("o-checkbox")
-], M);
+], E);
 var D5 = Object.defineProperty, T5 = Object.getOwnPropertyDescriptor, U = (e, t, i, n) => {
   for (var o = n > 1 ? void 0 : n ? T5(t, i) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
   return n && o && D5(t, i, o), o;
 };
-let j5 = 0, A = class extends p {
+let j5 = 0, S = class extends p {
   constructor() {
     super(), this.checked = !1, this.disabled = !1, this.size = "S", this.showLabel = !0, this.label = "Radio button", this.name = "", this.value = "on", this.inputId = "", this.inputId || (this.inputId = `o-radio-${++j5}`);
   }
@@ -5706,7 +5702,7 @@ let j5 = 0, A = class extends p {
     `;
   }
 };
-A.styles = g`
+S.styles = g`
     :host {
       display: inline-flex;
       align-items: center;
@@ -5798,34 +5794,34 @@ A.styles = g`
   `;
 U([
   l({ type: Boolean, reflect: !0 })
-], A.prototype, "checked", 2);
+], S.prototype, "checked", 2);
 U([
   l({ type: Boolean, reflect: !0 })
-], A.prototype, "disabled", 2);
+], S.prototype, "disabled", 2);
 U([
   l({ type: String, reflect: !0 })
-], A.prototype, "size", 2);
+], S.prototype, "size", 2);
 U([
   l({ type: Boolean })
-], A.prototype, "showLabel", 2);
+], S.prototype, "showLabel", 2);
 U([
   l({ type: String })
-], A.prototype, "label", 2);
+], S.prototype, "label", 2);
 U([
   l({ type: String })
-], A.prototype, "name", 2);
+], S.prototype, "name", 2);
 U([
   l({ type: String })
-], A.prototype, "value", 2);
+], S.prototype, "value", 2);
 U([
   l({ type: String, reflect: !0 })
-], A.prototype, "inputId", 2);
+], S.prototype, "inputId", 2);
 U([
   _2("input")
-], A.prototype, "inputEl", 2);
-A = U([
+], S.prototype, "inputEl", 2);
+S = U([
   f("o-radio")
-], A);
+], S);
 var R5 = Object.getOwnPropertyDescriptor, U5 = (e, t, i, n) => {
   for (var o = n > 1 ? void 0 : n ? R5(t, i) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (o = r(o) || o);
@@ -5862,7 +5858,7 @@ var q5 = Object.defineProperty, N5 = Object.getOwnPropertyDescriptor, h2 = (e, t
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
   return n && o && q5(t, i, o), o;
 };
-let E1 = class extends p {
+let $1 = class extends p {
   constructor() {
     super(...arguments), this.href = "", this.active = !1;
   }
@@ -5883,7 +5879,7 @@ let E1 = class extends p {
         `;
   }
 };
-E1.styles = g`
+$1.styles = g`
         :host(:not([active]))::after {
             content: "/";
             margin: 0 0.5rem;
@@ -5918,7 +5914,7 @@ E1.styles = g`
         }
 
         a:focus-visible {
-            ${o1};
+            ${i1};
         }
 
         :host(.a--tabfocus) {
@@ -5927,14 +5923,14 @@ E1.styles = g`
     `;
 h2([
   l({ type: String })
-], E1.prototype, "href", 2);
+], $1.prototype, "href", 2);
 h2([
   l({ type: Boolean, reflect: !0 })
-], E1.prototype, "active", 2);
-E1 = h2([
+], $1.prototype, "active", 2);
+$1 = h2([
   f("o-breadcrumb")
-], E1);
-var K5 = Object.defineProperty, W5 = Object.getOwnPropertyDescriptor, h1 = (e, t, i, n) => {
+], $1);
+var K5 = Object.defineProperty, W5 = Object.getOwnPropertyDescriptor, c1 = (e, t, i, n) => {
   for (var o = n > 1 ? void 0 : n ? W5(t, i) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
   return n && o && K5(t, i, o), o;
@@ -6043,25 +6039,25 @@ K.styles = g`
       opacity: var(--overlay-opacity, 1);
     }
   `;
-h1([
+c1([
   l({ type: String })
 ], K.prototype, "imageUrl", 2);
-h1([
+c1([
   l({ type: String })
 ], K.prototype, "imageAlt", 2);
-h1([
+c1([
   l({ type: String })
 ], K.prototype, "hoverUrl", 2);
-h1([
+c1([
   l({ type: String })
 ], K.prototype, "hoverAlt", 2);
-h1([
+c1([
   l({ type: Boolean, reflect: !0 })
 ], K.prototype, "dimmed", 2);
-h1([
+c1([
   l({ type: Boolean, reflect: !0, attribute: "showhover" })
 ], K.prototype, "showHover", 2);
-K = h1([
+K = c1([
   f("o-arch-image")
 ], K);
 const G5 = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
@@ -6223,7 +6219,7 @@ const p2 = class p2 extends p {
     return customElements.get("o-icon-button") ? a`
         <o-icon-button
           data-close-btn
-          icon="cross"
+          icon="occ-close-outlined"
           size="${this._resolvedIconSize()}"
           bgstyle="none-${this.contrast ? "contrast" : "light"}"
           status="empty"
@@ -6270,7 +6266,7 @@ const p2 = class p2 extends p {
           <header part="header" class="${i}">
             ${this.showBackButton ? this._renderBackButton() : null}
             <div class="brand">
-              <span slot="logo${this.contrast ? "-contrast" : ""}">${$(G5)}</span>
+              <span slot="logo${this.contrast ? "-contrast" : ""}">${O(G5)}</span>
             </div>
             <div part="close${this.contrast ? "-contrast" : ""}">${this._renderCloseButton()}</div>
           </header>
@@ -6768,7 +6764,7 @@ x([
 m = x([
   f("o-medium-tile")
 ], m);
-var t8 = Object.defineProperty, e8 = Object.getOwnPropertyDescriptor, d1 = (e, t, i, n) => {
+var t8 = Object.defineProperty, e8 = Object.getOwnPropertyDescriptor, h1 = (e, t, i, n) => {
   for (var o = n > 1 ? void 0 : n ? e8(t, i) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (o = (n ? r(t, i, o) : r(o)) || o);
   return n && o && t8(t, i, o), o;
@@ -6878,28 +6874,28 @@ W.styles = g`
     }
 
     .o-tab:focus-visible {
-      ${o1};
+      ${i1};
     }
   `;
-d1([
+h1([
   l({ type: String })
 ], W.prototype, "text", 2);
-d1([
+h1([
   l({ type: String })
 ], W.prototype, "class", 2);
-d1([
+h1([
   l({ type: String })
 ], W.prototype, "data", 2);
-d1([
+h1([
   l({ type: String, reflect: !0 })
 ], W.prototype, "link", 2);
-d1([
+h1([
   l({ type: Boolean, reflect: !0 })
 ], W.prototype, "selected", 2);
-d1([
+h1([
   l({ type: Boolean, reflect: !0 })
 ], W.prototype, "inactive", 2);
-W = d1([
+W = h1([
   f("o-tab")
 ], W);
 var i8 = Object.getOwnPropertyDescriptor, o8 = (e, t, i, n) => {