@florid-kit/components 0.8.36 → 0.8.38

package/index.mjs

@@ -3,7 +3,7 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const pt = globalThis, St = pt.ShadowRoot && (pt.ShadyCSS === void 0 || pt.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Lt = Symbol(), Nt = /* @__PURE__ */ new WeakMap();
+const pt = globalThis, St = pt.ShadowRoot && (pt.ShadyCSS === void 0 || pt.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Lt = Symbol(), Ut = /* @__PURE__ */ new WeakMap();
 let Yt = class {
   constructor(t, e, n) {
     if (this._$cssResult$ = !0, n !== Lt) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -14,7 +14,7 @@ let Yt = class {
     const e = this.t;
     if (St && t === void 0) {
       const n = e !== void 0 && e.length === 1;
-      n && (t = Nt.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), n && Nt.set(e, t));
+      n && (t = Ut.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), n && Ut.set(e, t));
     }
     return t;
   }
@@ -22,7 +22,7 @@ let Yt = class {
     return this.cssText;
   }
 };
-const se = (o) => new Yt(typeof o == "string" ? o : o + "", void 0, Lt), g = (o, ...t) => {
+const se = (o) => new Yt(typeof o == "string" ? o : o + "", void 0, Lt), y = (o, ...t) => {
   const e = o.length === 1 ? o[0] : t.reduce((n, i, r) => n + ((s) => {
     if (s._$cssResult$ === !0) return s.cssText;
     if (typeof s == "number") return s;
@@ -284,7 +284,7 @@ G.elementStyles = [], G.shadowRootOptions = { mode: "open" }, G[tt("elementPrope
  */
 const et = globalThis, vt = et.trustedTypes, Zt = vt ? vt.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, te = "$lit$", T = `lit$${Math.random().toFixed(9).slice(2)}$`, ee = "?" + T, be = `<${ee}>`, Z = document, it = () => Z.createComment(""), nt = (o) => o === null || typeof o != "object" && typeof o != "function", It = Array.isArray, fe = (o) => It(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", wt = `[ 	
 \f\r]`, Y = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, qt = /-->/g, Wt = />/g, R = RegExp(`>|${wt}(?:([^\\s"'>=/]+)(${wt}*=${wt}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Kt = /'/g, Gt = /"/g, oe = /^(?:script|style|textarea|title)$/i, ge = (o) => (t, ...e) => ({ _$litType$: o, strings: t, values: e }), l = ge(1), U = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), Xt = /* @__PURE__ */ new WeakMap(), F = Z.createTreeWalker(Z, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), Kt = /'/g, Gt = /"/g, oe = /^(?:script|style|textarea|title)$/i, ge = (o) => (t, ...e) => ({ _$litType$: o, strings: t, values: e }), l = ge(1), N = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), Xt = /* @__PURE__ */ new WeakMap(), F = Z.createTreeWalker(Z, 129);
 function ie(o, t) {
   if (!It(o) || !o.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return Zt !== void 0 ? Zt.createHTML(t) : t;
@@ -294,10 +294,10 @@ const ye = (o, t) => {
   let i, r = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", s = Y;
   for (let h = 0; h < e; h++) {
     const c = o[h];
-    let f, m, p = -1, O = 0;
-    for (; O < c.length && (s.lastIndex = O, m = s.exec(c), m !== null); ) O = s.lastIndex, s === Y ? m[1] === "!--" ? s = qt : m[1] !== void 0 ? s = Wt : m[2] !== void 0 ? (oe.test(m[2]) && (i = RegExp("</" + m[2], "g")), s = R) : m[3] !== void 0 && (s = R) : s === R ? m[0] === ">" ? (s = i ?? Y, p = -1) : m[1] === void 0 ? p = -2 : (p = s.lastIndex - m[2].length, f = m[1], s = m[3] === void 0 ? R : m[3] === '"' ? Gt : Kt) : s === Gt || s === Kt ? s = R : s === qt || s === Wt ? s = Y : (s = R, i = void 0);
+    let g, m, p = -1, O = 0;
+    for (; O < c.length && (s.lastIndex = O, m = s.exec(c), m !== null); ) O = s.lastIndex, s === Y ? m[1] === "!--" ? s = qt : m[1] !== void 0 ? s = Wt : m[2] !== void 0 ? (oe.test(m[2]) && (i = RegExp("</" + m[2], "g")), s = R) : m[3] !== void 0 && (s = R) : s === R ? m[0] === ">" ? (s = i ?? Y, p = -1) : m[1] === void 0 ? p = -2 : (p = s.lastIndex - m[2].length, g = m[1], s = m[3] === void 0 ? R : m[3] === '"' ? Gt : Kt) : s === Gt || s === Kt ? s = R : s === qt || s === Wt ? s = Y : (s = R, i = void 0);
     const M = s === R && o[h + 1].startsWith("/>") ? " " : "";
-    r += s === Y ? c + be : p >= 0 ? (n.push(f), c.slice(0, p) + te + c.slice(p) + T + M) : c + T + (p === -2 ? h : M);
+    r += s === Y ? c + be : p >= 0 ? (n.push(g), c.slice(0, p) + te + c.slice(p) + T + M) : c + T + (p === -2 ? h : M);
   }
   return [ie(o, r + (o[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), n];
 };
@@ -306,8 +306,8 @@ class rt {
     let i;
     this.parts = [];
     let r = 0, s = 0;
-    const h = t.length - 1, c = this.parts, [f, m] = ye(t, e);
-    if (this.el = rt.createElement(f, n), F.currentNode = this.el.content, e === 2 || e === 3) {
+    const h = t.length - 1, c = this.parts, [g, m] = ye(t, e);
+    if (this.el = rt.createElement(g, n), F.currentNode = this.el.content, e === 2 || e === 3) {
       const p = this.el.content.firstChild;
       p.replaceWith(...p.childNodes);
     }
@@ -340,7 +340,7 @@ class rt {
 }
 function X(o, t, e = o, n) {
   var s, h;
-  if (t === U) return t;
+  if (t === N) return t;
   let i = n !== void 0 ? (s = e._$Co) == null ? void 0 : s[n] : e._$Cl;
   const r = nt(t) ? void 0 : t._$litDirective$;
   return (i == null ? void 0 : i.constructor) !== r && ((h = i == null ? void 0 : i._$AO) == null || h.call(i, !1), r === void 0 ? i = void 0 : (i = new r(o), i._$AT(o, e, n)), n !== void 0 ? (e._$Co ?? (e._$Co = []))[n] = i : e._$Cl = i), i !== void 0 && (t = X(o, i._$AS(o, t.values), i, n)), t;
@@ -361,8 +361,8 @@ class me {
     let r = F.nextNode(), s = 0, h = 0, c = n[0];
     for (; c !== void 0; ) {
       if (s === c.index) {
-        let f;
-        c.type === 2 ? f = new ht(r, r.nextSibling, this, t) : c.type === 1 ? f = new c.ctor(r, c.name, c.strings, this, t) : c.type === 6 && (f = new _e(r, this, t)), this._$AV.push(f), c = n[++h];
+        let g;
+        c.type === 2 ? g = new ht(r, r.nextSibling, this, t) : c.type === 1 ? g = new c.ctor(r, c.name, c.strings, this, t) : c.type === 6 && (g = new _e(r, this, t)), this._$AV.push(g), c = n[++h];
       }
       s !== (c == null ? void 0 : c.index) && (r = F.nextNode(), s++);
     }
@@ -393,7 +393,7 @@ class ht {
     return this._$AB;
   }
   _$AI(t, e = this) {
-    t = X(this, t, e), nt(t) ? t === d || t == null || t === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : t !== this._$AH && t !== U && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : fe(t) ? this.k(t) : this._(t);
+    t = X(this, t, e), nt(t) ? t === d || t == null || t === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : t !== this._$AH && t !== N && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : fe(t) ? this.k(t) : this._(t);
   }
   O(t) {
     return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -449,11 +449,11 @@ class ft {
   _$AI(t, e = this, n, i) {
     const r = this.strings;
     let s = !1;
-    if (r === void 0) t = X(this, t, e, 0), s = !nt(t) || t !== this._$AH && t !== U, s && (this._$AH = t);
+    if (r === void 0) t = X(this, t, e, 0), s = !nt(t) || t !== this._$AH && t !== N, s && (this._$AH = t);
     else {
       const h = t;
-      let c, f;
-      for (t = r[0], c = 0; c < r.length - 1; c++) f = X(this, h[n + c], e, c), f === U && (f = this._$AH[c]), s || (s = !nt(f) || f !== this._$AH[c]), f === d ? t = d : t !== d && (t += (f ?? "") + r[c + 1]), this._$AH[c] = f;
+      let c, g;
+      for (t = r[0], c = 0; c < r.length - 1; c++) g = X(this, h[n + c], e, c), g === N && (g = this._$AH[c]), s || (s = !nt(g) || g !== this._$AH[c]), g === d ? t = d : t !== d && (t += (g ?? "") + r[c + 1]), this._$AH[c] = g;
     }
     s && !i && this.j(t);
   }
@@ -482,7 +482,7 @@ class $e extends ft {
     super(t, e, n, i, r), this.type = 5;
   }
   _$AI(t, e = this) {
-    if ((t = X(this, t, e, 0) ?? d) === U) return;
+    if ((t = X(this, t, e, 0) ?? d) === N) return;
     const n = this._$AH, i = t === d && n !== d || t.capture !== n.capture || t.once !== n.once || t.passive !== n.passive, r = t !== d && (n === d || i);
     i && this.element.removeEventListener(this.name, this, n), r && this.element.addEventListener(this.name, this, t), this._$AH = t;
   }
@@ -519,7 +519,7 @@ const Ce = (o, t, e) => {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const V = globalThis;
-let u = class extends G {
+let v = class extends G {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -541,13 +541,13 @@ let u = class extends G {
     super.disconnectedCallback(), (t = this._$Do) == null || t.setConnected(!1);
   }
   render() {
-    return U;
+    return N;
   }
 };
 var Qt;
-u._$litElement$ = !0, u.finalized = !0, (Qt = V.litElementHydrateSupport) == null || Qt.call(V, { LitElement: u });
+v._$litElement$ = !0, v.finalized = !0, (Qt = V.litElementHydrateSupport) == null || Qt.call(V, { LitElement: v });
 const _t = V.litElementPolyfillSupport;
-_t == null || _t({ LitElement: u });
+_t == null || _t({ LitElement: v });
 (V.litElementVersions ?? (V.litElementVersions = [])).push("4.2.0");
 /**
  * @license
@@ -599,12 +599,12 @@ function a(o) {
 function q(o) {
   return a({ ...o, state: !0, attribute: !1 });
 }
-const gt = g`
+const gt = y`
 	outline: 1px dashed var(--button-border-color);
 	outline-offset: 2px;
 	outline: dashed black;
 `;
-g`
+y`
 	:host * {
 		box-sizing: border-box;
 	}
@@ -700,7 +700,7 @@ const Se = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
 <path class="st0" d="M40,20c0,0.7-0.6,1.2-1.2,1.2H21.2v17.5c0,0.7-0.6,1.2-1.2,1.2s-1.2-0.6-1.2-1.2V21.2H1.2C0.6,21.2,0,20.7,0,20
 	s0.6-1.2,1.2-1.2h17.5V1.2C18.8,0.6,19.3,0,20,0s1.2,0.6,1.2,1.2v17.5h17.5C39.4,18.8,40,19.3,40,20z"/>
 </svg>
-`, Ue = `<?xml version="1.0" encoding="utf-8"?>
+`, Ne = `<?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
@@ -709,7 +709,7 @@ const Se = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
 </style>
 <path class="st0" d="M38.8,20.5H1.2c-0.7,0-1.2-0.6-1.2-1.2S0.6,18,1.2,18h37.5c0.7,0,1.2,0.6,1.2,1.2S39.4,20.5,38.8,20.5z"/>
 </svg>
-`, Ne = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Ue = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M15.0009 8.12175C15.0009 8.36347 14.805 8.55943 14.5634 8.55943H2.49495L7.43502 13.5017C7.60609 13.6726 7.60628 13.9499 7.43546 14.1211C7.26464 14.2922 6.98749 14.2924 6.81642 14.1215L1.13 8.43163C1.04685 8.34998 1 8.23831 1 8.12175C1 8.00518 1.04685 7.89351 1.13 7.81187L6.81642 2.12286C6.98808 1.95699 7.26094 1.95937 7.4297 2.12819C7.59845 2.29702 7.60082 2.57001 7.43502 2.74175L2.49495 7.68406H14.5634C14.805 7.68406 15.0009 7.88002 15.0009 8.12175Z" fill="#3F2B2E"/>
 </svg>
 `, Re = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -745,7 +745,7 @@ const Se = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
   chevronRight: Pe,
   chevronLeft: Ie,
   icoPlus: je,
-  icoMinus: Ue,
+  icoMinus: Ne,
   "star-0": Oe,
   "star-25": Be,
   "star-50": ze,
@@ -753,7 +753,7 @@ const Se = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
   "star-100": He,
   cross: Me,
   search: Te,
-  arrowLeft: Ne,
+  arrowLeft: Ue,
   arrowTop: Re,
   cart: Fe,
   notifyme: Ve,
@@ -798,7 +798,7 @@ class kt extends Ht {
   }
   render(t) {
     if (t === d || t == null) return this._t = void 0, this.it = t;
-    if (t === U) return t;
+    if (t === N) return t;
     if (typeof t != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
     if (t === this.it) return this._t;
     this.it = t;
@@ -821,8 +821,8 @@ var Qe = Object.defineProperty, Ye = Object.getOwnPropertyDescriptor, w = (o, t,
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && Qe(t, e, i), i;
 };
-const to = Bt(u);
-let v = class extends to {
+const to = Bt(v);
+let b = class extends to {
   constructor() {
     super(...arguments), this.type = "submit", this.value = "", this.variant = "primary", this.text = "", this.textsecond = "", this.fullwidth = !1, this.disabled = !1, this.startIconModel = "", this.endIconModel = "", this.startIcon = !1, this.endIcon = !1, this.panelTarget = "", this.href = "", this.target = "", this.underlined = !1;
   }
@@ -885,9 +885,9 @@ let v = class extends to {
     `;
   }
 };
-Ee(v);
-v.formAssociated = !0;
-v.styles = g`
+Ee(b);
+b.formAssociated = !0;
+b.styles = y`
     :host {
       --button-border: transparent;
       cursor: pointer;
@@ -1074,58 +1074,58 @@ v.styles = g`
   `;
 w([
   a()
-], v.prototype, "type", 2);
+], b.prototype, "type", 2);
 w([
   a({ reflect: !0 })
-], v.prototype, "value", 2);
+], b.prototype, "value", 2);
 w([
   a({ type: String, reflect: !0 })
-], v.prototype, "variant", 2);
+], b.prototype, "variant", 2);
 w([
   a({ type: String })
-], v.prototype, "text", 2);
+], b.prototype, "text", 2);
 w([
   a({ type: String })
-], v.prototype, "textsecond", 2);
+], b.prototype, "textsecond", 2);
 w([
   a({ type: Boolean, reflect: !0 })
-], v.prototype, "fullwidth", 2);
+], b.prototype, "fullwidth", 2);
 w([
   a({ type: Boolean, reflect: !0 })
-], v.prototype, "disabled", 2);
+], b.prototype, "disabled", 2);
 w([
   a({ type: String, reflect: !0 })
-], v.prototype, "startIconModel", 2);
+], b.prototype, "startIconModel", 2);
 w([
   a({ type: String, reflect: !0 })
-], v.prototype, "endIconModel", 2);
+], b.prototype, "endIconModel", 2);
 w([
   a({ type: Boolean, reflect: !0, attribute: "starticon" })
-], v.prototype, "startIcon", 2);
+], b.prototype, "startIcon", 2);
 w([
   a({ type: Boolean, reflect: !0, attribute: "endicon" })
-], v.prototype, "endIcon", 2);
+], b.prototype, "endIcon", 2);
 w([
   a({ type: String, attribute: "paneltarget", reflect: !0 })
-], v.prototype, "panelTarget", 2);
+], b.prototype, "panelTarget", 2);
 w([
   a({ type: String })
-], v.prototype, "href", 2);
+], b.prototype, "href", 2);
 w([
   a({ type: String })
-], v.prototype, "target", 2);
+], b.prototype, "target", 2);
 w([
   a({ type: Boolean, reflect: !0 })
-], v.prototype, "underlined", 2);
-v = w([
+], b.prototype, "underlined", 2);
+b = w([
   x("o-button")
-], v);
+], b);
 var eo = Object.defineProperty, oo = Object.getOwnPropertyDescriptor, yt = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? oo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && eo(t, e, i), i;
 };
-let J = class extends u {
+let J = class extends v {
   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", {
@@ -1166,7 +1166,7 @@ let J = class extends u {
     this.label = o, this.requestUpdate();
   }
 };
-J.styles = g`
+J.styles = y`
 		:host {
 			display: inline-flex;
 			justify-content: center;
@@ -1255,7 +1255,7 @@ var io = Object.defineProperty, no = Object.getOwnPropertyDescriptor, P = (o, t,
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && io(t, e, i), i;
 };
-let _ = class extends u {
+let _ = class extends v {
   constructor() {
     super(...arguments), this.bgstyle = "background-light", this.size = "medium", this.status = "empty", this.type = "button", this.strokewidth = "1", this.icon = "wishlist", this.disabled = !1, this.showSrLabel = !1, this.srLabel = "";
   }
@@ -1286,7 +1286,7 @@ let _ = class extends u {
 		`;
   }
 };
-_.styles = g`
+_.styles = y`
 		:host {
 			display: inline-flex;
 			justify-content: center;
@@ -1489,6 +1489,10 @@ _.styles = g`
 			}
 		}
 
+		.icon-button:focus-visible {
+			outline: none;
+		}
+
 		.sr-only {
 			display: none;
 		}
@@ -1528,7 +1532,7 @@ var ro = Object.defineProperty, so = Object.getOwnPropertyDescriptor, K = (o, t,
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && ro(t, e, i), i;
 };
-let B = class extends u {
+let B = class extends v {
   constructor() {
     super(...arguments), this.href = "", this.target = "", this.template = "standard", this.inverse = !1, this.endIcon = !1, this.reverseEndIcon = !1;
   }
@@ -1566,7 +1570,7 @@ let B = class extends u {
         `;
   }
 };
-B.styles = g`
+B.styles = y`
         :host([template="standard"]) a {
             color: var(--color-content-action-secondary);
             font-size: var(--font-size-200);
@@ -1680,7 +1684,7 @@ var ao = Object.defineProperty, lo = Object.getOwnPropertyDescriptor, mt = (o, t
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && ao(t, e, i), i;
 };
-let Q = class extends u {
+let Q = class extends v {
   constructor() {
     super(...arguments), this.rating = 0;
   }
@@ -1707,7 +1711,7 @@ let Q = class extends u {
 		`;
   }
 };
-Q.styles = g`
+Q.styles = y`
 		svg {
 			width: 12px;
 			height: 12px;
@@ -1940,14 +1944,14 @@ class go extends fo {
   }
 }
 const Jt = Dt(go);
-var yo = Object.defineProperty, mo = Object.getOwnPropertyDescriptor, y = (o, t, e, n) => {
+var yo = Object.defineProperty, mo = Object.getOwnPropertyDescriptor, f = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? mo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && yo(t, e, i), i;
 };
-let b = class extends u {
+let u = class extends v {
   constructor() {
-    super(...arguments), this.open = !1, this.showHeader = !0, this.showFooter = !1, this.showHeaderStartIcon = !1, this.headerTitle = "", this.closeButtonLabel = "Close the modal", this.firstButtonLabel = "Close", this.firstButtonVariant = "primary", this.firstButtonProps = {}, this.onFirstButtonClickClose = !1, this.secondButtonLabel = "", this.secondButtonVariant = "secondary", this.secondButtonProps = {}, this.onSecondButtonClickClose = !1, this.disablePortal = !1, this.zIndex = 99, this.initialized = !1, this.previousFocusedElement = null, this.handleKeyDown = (o) => {
+    super(...arguments), this.open = !1, this.showHeader = !0, this.showFooter = !1, this.showHeaderStartIcon = !1, this.headerTitle = "", this.headerTitleClassName = "panel-title", this.closeButtonLabel = "Close the modal", this.firstButtonLabel = "Close", this.firstButtonVariant = "primary", this.firstButtonProps = {}, this.onFirstButtonClickClose = !1, this.secondButtonLabel = "", this.secondButtonVariant = "secondary", this.secondButtonProps = {}, this.onSecondButtonClickClose = !1, this.disablePortal = !1, this.zIndex = 99, this.initialized = !1, this.previousFocusedElement = null, this.handleKeyDown = (o) => {
       this.open && (o.key === "Escape" ? this.closePanel() : o.key === "Tab" && this.trapFocus(o));
     }, this.handleClosePanel = (o) => {
       o instanceof KeyboardEvent && o.key !== "Enter" && o.key !== " " || (o.preventDefault(), o.stopPropagation(), this.closePanel());
@@ -1977,12 +1981,13 @@ let b = class extends u {
   }
   openPanel() {
     this.previousFocusedElement = document.activeElement, this.open = !0, document.body.style.overflow = "hidden", document.body.setAttribute("data-side-panel", "open"), this.updateComplete.then(() => {
-      var o, t;
-      if (this.showHeader)
-        (t = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".panel")) == null || t.focus();
-      else {
-        const e = this.getFocusableElements()[0];
-        e == null || e.focus();
+      var o, t, e;
+      if (this.showHeader) {
+        const n = ((o = this.shadowRoot) == null ? void 0 : o.querySelector(".panel .close-btn")) || null, i = ((t = n == null ? void 0 : n.shadowRoot) == null ? void 0 : t.querySelector("button")) || null;
+        i && ((e = i.focus) == null || e.call(i));
+      } else {
+        const n = this.getFocusableElements()[0];
+        n == null || n.focus();
       }
     }), this.dispatchEvent(
       new CustomEvent("open", { bubbles: !0, composed: !0 })
@@ -1996,7 +2001,7 @@ let b = class extends u {
   }
   handleFirstClick(o) {
     o instanceof KeyboardEvent && o.key !== "Enter" && o.key !== " " || (o.preventDefault(), o.stopPropagation(), this.onFirstButtonClickClose && this.closePanel(), this.dispatchEvent(
-      new CustomEvent("click", {
+      new CustomEvent("firstbuttonclick", {
         bubbles: !0,
         composed: !0,
         cancelable: !0,
@@ -2009,7 +2014,7 @@ let b = class extends u {
   }
   handleSecondClick(o) {
     o instanceof KeyboardEvent && o.key !== "Enter" && o.key !== " " || (o.preventDefault(), o.stopPropagation(), this.onSecondButtonClickClose && this.closePanel(), this.dispatchEvent(
-      new CustomEvent("click", {
+      new CustomEvent("secondbuttonclick", {
         bubbles: !0,
         composed: !0,
         cancelable: !0,
@@ -2040,7 +2045,7 @@ let b = class extends u {
 						${this.showHeaderStartIcon ? l`
 							<o-icon-button icon="arrowLeft" size="small" class="return-btn" bgstyle="background-light" @click=${this.handleClosePanel} @keydown=${this.handleClosePanel} aria-label="${this.closeButtonLabel}"></o-icon-button>
 						` : null}
-						<h2 id="panel-title" class="panel-title">${this.headerTitle}</h2>
+						<h2 id="panel-title" class="${this.headerTitleClassName}">${this.headerTitle}</h2>
 						<o-icon-button icon="cross" size="small" class="close-btn" bgstyle="background-light" @click=${this.handleClosePanel} @keydown=${this.handleClosePanel} aria-label="${this.closeButtonLabel}"></o-icon-button>
 					</div>
 					` : null}
@@ -2078,7 +2083,7 @@ let b = class extends u {
 		`;
   }
 };
-b.styles = g`
+u.styles = y`
 		:host {
 			--z-overlay: 99;
 			--z-panel: 100;
@@ -2227,66 +2232,69 @@ b.styles = g`
 			}
 		}
 	`;
-y([
+f([
   a({ type: Boolean, reflect: !0 })
-], b.prototype, "open", 2);
-y([
+], u.prototype, "open", 2);
+f([
   a({ type: Boolean, reflect: !0 })
-], b.prototype, "showHeader", 2);
-y([
+], u.prototype, "showHeader", 2);
+f([
   a({ type: Boolean, reflect: !0 })
-], b.prototype, "showFooter", 2);
-y([
+], u.prototype, "showFooter", 2);
+f([
   a({ type: Boolean, reflect: !0 })
-], b.prototype, "showHeaderStartIcon", 2);
-y([
+], u.prototype, "showHeaderStartIcon", 2);
+f([
+  a({ type: String, reflect: !0 })
+], u.prototype, "headerTitle", 2);
+f([
   a({ type: String, reflect: !0 })
-], b.prototype, "headerTitle", 2);
-y([
+], u.prototype, "headerTitleClassName", 2);
+f([
   a({ type: String, reflect: !0 })
-], b.prototype, "closeButtonLabel", 2);
-y([
+], u.prototype, "closeButtonLabel", 2);
+f([
   a({ type: String, reflect: !0 })
-], b.prototype, "firstButtonLabel", 2);
-y([
+], u.prototype, "firstButtonLabel", 2);
+f([
   a({ type: String, reflect: !0 })
-], b.prototype, "firstButtonVariant", 2);
-y([
+], u.prototype, "firstButtonVariant", 2);
+f([
   a({ type: Object, reflect: !0 })
-], b.prototype, "firstButtonProps", 2);
-y([
+], u.prototype, "firstButtonProps", 2);
+f([
   a({ type: Boolean, reflect: !0 })
-], b.prototype, "onFirstButtonClickClose", 2);
-y([
+], u.prototype, "onFirstButtonClickClose", 2);
+f([
   a({ type: String, reflect: !0 })
-], b.prototype, "secondButtonLabel", 2);
-y([
+], u.prototype, "secondButtonLabel", 2);
+f([
   a({ type: String, reflect: !0 })
-], b.prototype, "secondButtonVariant", 2);
-y([
+], u.prototype, "secondButtonVariant", 2);
+f([
   a({ type: Object, reflect: !0 })
-], b.prototype, "secondButtonProps", 2);
-y([
+], u.prototype, "secondButtonProps", 2);
+f([
   a({ type: Boolean, reflect: !0 })
-], b.prototype, "onSecondButtonClickClose", 2);
-y([
+], u.prototype, "onSecondButtonClickClose", 2);
+f([
   a({ type: Boolean, reflect: !0 })
-], b.prototype, "disablePortal", 2);
-y([
+], u.prototype, "disablePortal", 2);
+f([
   a({ type: Number, reflect: !0 })
-], b.prototype, "zIndex", 2);
-y([
+], u.prototype, "zIndex", 2);
+f([
   a({ type: Boolean, reflect: !0 })
-], b.prototype, "initialized", 2);
-b = y([
+], u.prototype, "initialized", 2);
+u = f([
   x("o-side-panel")
-], b);
-var xo = Object.defineProperty, wo = Object.getOwnPropertyDescriptor, N = (o, t, e, n) => {
+], u);
+var xo = Object.defineProperty, wo = Object.getOwnPropertyDescriptor, U = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? wo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && xo(t, e, i), i;
 };
-let L = class extends u {
+let L = class extends v {
   constructor() {
     super(...arguments), this.thumbnails = [], this.activeIndex = 0, this.disabledIndexes = [], this.maxWidth = "100%", this.altressource = "visual", this.focusedIndex = 0, this.playerIconTemplate = l`
     <o-icon-button
@@ -2363,7 +2371,7 @@ let L = class extends u {
     `;
   }
 };
-L.styles = g`
+L.styles = y`
     :host {
       display: flex;
       gap: 5px;
@@ -2469,28 +2477,28 @@ L.styles = g`
       width: 0;
     }
   `;
-N([
+U([
   a({ type: Array })
 ], L.prototype, "thumbnails", 2);
-N([
+U([
   a({ type: Number })
 ], L.prototype, "activeIndex", 2);
-N([
+U([
   a({ type: Array })
 ], L.prototype, "disabledIndexes", 2);
-N([
+U([
   a({ type: String })
 ], L.prototype, "maxWidth", 2);
-N([
+U([
   a({ type: String })
 ], L.prototype, "altressource", 2);
-N([
+U([
   a({ type: Object })
 ], L.prototype, "swiperInstance", 2);
-N([
+U([
   q()
 ], L.prototype, "focusedIndex", 2);
-L = N([
+L = U([
   x("thumbnail-navigation")
 ], L);
 var $o = Object.defineProperty, _o = Object.getOwnPropertyDescriptor, Mt = (o, t, e, n) => {
@@ -2498,7 +2506,7 @@ var $o = Object.defineProperty, _o = Object.getOwnPropertyDescriptor, Mt = (o, t
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && $o(t, e, i), i;
 };
-let st = class extends u {
+let st = class extends v {
   constructor() {
     super(...arguments), this.type = "", this.bgstyle = "background-white";
   }
@@ -2508,7 +2516,7 @@ let st = class extends u {
     `;
   }
 };
-st.styles = g`
+st.styles = y`
     .tag {
       display: inline-block;
       padding: var(--spacing-2-xs) var(--spacing-s);
@@ -2578,7 +2586,7 @@ var Co = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, Tt = (o, t
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && Co(t, e, i), i;
 };
-let at = class extends u {
+let at = class extends v {
   constructor() {
     super(...arguments), this.type = "top", this.text = "";
   }
@@ -2591,7 +2599,7 @@ let at = class extends u {
     `;
   }
 };
-at.styles = g`
+at.styles = y`
     .tooltip {
         position: relative;
         display: inline-block;
@@ -2698,7 +2706,7 @@ var Ao = Object.defineProperty, Eo = Object.getOwnPropertyDescriptor, z = (o, t,
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && Ao(t, e, i), i;
 };
-let A = class extends u {
+let A = class extends v {
   constructor() {
     super(...arguments), this.options = [], this.value = "", this.name = "", this.disabled = !1, this.width = "100%", this.open = !1, this.activeIndex = -1, this.menuWidth = "", this._handleOutsideClick = (o) => {
       this.contains(o.target) || (this.open = !1, this.activeIndex = -1);
@@ -2821,7 +2829,7 @@ let A = class extends u {
     `;
   }
 };
-A.styles = g`
+A.styles = y`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -2993,12 +3001,12 @@ var So = Object.getOwnPropertyDescriptor, Lo = (o, t, e, n) => {
     (s = o[r]) && (i = s(i) || i);
   return i;
 };
-let Et = class extends u {
+let Et = class extends v {
   render() {
     return l` <span class="dots"></span> `;
   }
 };
-Et.styles = g`
+Et.styles = y`
     :host {
       display: flex;
       align-items: center;
@@ -3058,7 +3066,7 @@ var Po = Object.defineProperty, Io = Object.getOwnPropertyDescriptor, I = (o, t,
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && Po(t, e, i), i;
 };
-let C = class extends u {
+let C = class extends v {
   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 = (o) => {
       this.contains(o.target) || (this.open = !1, this.activeIndex = -1);
@@ -3195,7 +3203,7 @@ let C = class extends u {
 		`;
   }
 };
-C.styles = g`
+C.styles = y`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -3429,7 +3437,7 @@ const re = "important", Oo = " !" + re, Bo = Dt(class extends Ht {
         n.includes("-") || r ? e.setProperty(n, r ? i.slice(0, -11) : i, r ? re : "") : e[n] = i;
       }
     }
-    return U;
+    return N;
   }
 });
 var zo = Object.defineProperty, Do = Object.getOwnPropertyDescriptor, jt = (o, t, e, n) => {
@@ -3437,7 +3445,7 @@ var zo = Object.defineProperty, Do = Object.getOwnPropertyDescriptor, jt = (o, t
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && zo(t, e, i), i;
 };
-let lt = class extends u {
+let lt = class extends v {
   constructor() {
     super(...arguments), this.option = {}, this.imageSize = 64;
   }
@@ -3455,7 +3463,7 @@ let lt = class extends u {
     return o ? l`<a href="${$(this.option.url)}" class="reassurance-item clickable">${e}</a>` : l`<div class="reassurance-item">${e}</div>`;
   }
 };
-lt.styles = g`
+lt.styles = y`
     :host {
       display: inline-block;
       position: relative;
@@ -3551,7 +3559,7 @@ var Ho = Object.defineProperty, Mo = Object.getOwnPropertyDescriptor, D = (o, t,
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && Ho(t, e, i), i;
 };
-const To = Bt(u);
+const To = Bt(v);
 let k = class extends To {
   constructor() {
     super(...arguments), this.link = "", this.name = "", this.value = "", this.text = "", this.size = "standard", this.selected = !1, this.fullwidth = !1, this.inactive = !1;
@@ -3575,7 +3583,7 @@ let k = class extends To {
     `;
   }
 };
-k.styles = g`
+k.styles = y`
     :host {
       cursor: pointer;
       display: inline-flex;
@@ -3688,12 +3696,12 @@ D([
 k = D([
   x("o-chip")
 ], k);
-var jo = Object.defineProperty, Uo = Object.getOwnPropertyDescriptor, Ut = (o, t, e, n) => {
-  for (var i = n > 1 ? void 0 : n ? Uo(t, e) : t, r = o.length - 1, s; r >= 0; r--)
+var jo = Object.defineProperty, No = Object.getOwnPropertyDescriptor, Nt = (o, t, e, n) => {
+  for (var i = n > 1 ? void 0 : n ? No(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && jo(t, e, i), i;
 };
-let ct = class extends u {
+let ct = class extends v {
   constructor() {
     super(), this.name = "", this.value = "", this.addEventListener("selected", this.onChipSelected);
   }
@@ -3709,7 +3717,7 @@ let ct = class extends u {
     `;
   }
 };
-ct.styles = g`
+ct.styles = y`
     :host {
       display: flex;
       flex-direction: row;
@@ -3717,21 +3725,21 @@ ct.styles = g`
       gap: var(--spacing-s);
     }
   `;
-Ut([
+Nt([
   a({ reflect: !0 })
 ], ct.prototype, "name", 2);
-Ut([
+Nt([
   a({ reflect: !0 })
 ], ct.prototype, "value", 2);
-ct = Ut([
+ct = Nt([
   x("o-chipset")
 ], ct);
-var No = Object.defineProperty, Ro = Object.getOwnPropertyDescriptor, H = (o, t, e, n) => {
+var Uo = Object.defineProperty, Ro = Object.getOwnPropertyDescriptor, H = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Ro(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
-  return n && i && No(t, e, i), i;
+  return n && i && Uo(t, e, i), i;
 };
-const Fo = Bt(u);
+const Fo = Bt(v);
 let E = class extends Fo {
   constructor() {
     super(...arguments), this.name = "", this.value = "", this.type = "", this.dataHref = "", this.text = "", this.selected = !1, this.disabled = !1, this.fullwidth = !1, this.crossIconName = "cross", this.strikethroughImgName = "strikeDiagonal";
@@ -3782,7 +3790,7 @@ let E = class extends Fo {
     `;
   }
 };
-E.styles = g`
+E.styles = y`
     :host {
       cursor: pointer;
       display: inline-flex;