@florid-kit/components 0.9.20 → 0.9.22

package/index.mjs

@@ -3,7 +3,7 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const _t = globalThis, jt = _t.ShadowRoot && (_t.ShadyCSS === void 0 || _t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Rt = Symbol(), ee = /* @__PURE__ */ new WeakMap();
+const Ct = globalThis, jt = Ct.ShadowRoot && (Ct.ShadyCSS === void 0 || Ct.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Rt = Symbol(), ee = /* @__PURE__ */ new WeakMap();
 let ue = class {
   constructor(t, e, r) {
     if (this._$cssResult$ = !0, r !== Rt) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -32,7 +32,7 @@ const we = (o) => new ue(typeof o == "string" ? o : o + "", void 0, Rt), v = (o,
 }, $e = (o, t) => {
   if (jt) o.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
   else for (const e of t) {
-    const r = document.createElement("style"), i = _t.litNonce;
+    const r = document.createElement("style"), i = Ct.litNonce;
     i !== void 0 && r.setAttribute("nonce", i), r.textContent = e.cssText, o.appendChild(r);
   }
 }, oe = jt ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
@@ -45,7 +45,7 @@ const we = (o) => new ue(typeof o == "string" ? o : o + "", void 0, Rt), v = (o,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: _e, defineProperty: Ce, getOwnPropertyDescriptor: ke, getOwnPropertyNames: Se, getOwnPropertySymbols: Ae, getPrototypeOf: Ee } = Object, W = globalThis, ie = W.trustedTypes, Le = ie ? ie.emptyScript : "", Pt = W.reactiveElementPolyfillSupport, ct = (o, t) => o, Ct = { toAttribute(o, t) {
+const { is: Ce, defineProperty: _e, getOwnPropertyDescriptor: ke, getOwnPropertyNames: Se, getOwnPropertySymbols: Ae, getPrototypeOf: Ee } = Object, W = globalThis, ie = W.trustedTypes, Le = ie ? ie.emptyScript : "", Pt = W.reactiveElementPolyfillSupport, ct = (o, t) => o, _t = { toAttribute(o, t) {
   switch (t) {
     case Boolean:
       o = o ? Le : null;
@@ -73,7 +73,7 @@ const { is: _e, defineProperty: Ce, getOwnPropertyDescriptor: ke, getOwnProperty
       }
   }
   return e;
-} }, Nt = (o, t) => !_e(o, t), re = { attribute: !0, type: String, converter: Ct, reflect: !1, useDefault: !1, hasChanged: Nt };
+} }, Nt = (o, t) => !Ce(o, t), re = { attribute: !0, type: String, converter: _t, reflect: !1, useDefault: !1, hasChanged: Nt };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), W.litPropertyMetadata ?? (W.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 let rt = class extends HTMLElement {
   static addInitializer(t) {
@@ -85,7 +85,7 @@ let rt = class extends HTMLElement {
   static createProperty(t, e = re) {
     if (e.state && (e.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((e = Object.create(e)).wrapped = !0), this.elementProperties.set(t, e), !e.noAccessor) {
       const r = Symbol(), i = this.getPropertyDescriptor(t, r, e);
-      i !== void 0 && Ce(this.prototype, t, i);
+      i !== void 0 && _e(this.prototype, t, i);
     }
   }
   static getPropertyDescriptor(t, e, r) {
@@ -184,7 +184,7 @@ let rt = class extends HTMLElement {
     var n;
     const r = this.constructor.elementProperties.get(t), i = this.constructor._$Eu(t, r);
     if (i !== void 0 && r.reflect === !0) {
-      const s = (((n = r.converter) == null ? void 0 : n.toAttribute) !== void 0 ? r.converter : Ct).toAttribute(e, r.type);
+      const s = (((n = r.converter) == null ? void 0 : n.toAttribute) !== void 0 ? r.converter : _t).toAttribute(e, r.type);
       this._$Em = t, s == null ? this.removeAttribute(i) : this.setAttribute(i, s), this._$Em = null;
     }
   }
@@ -192,7 +192,7 @@ let rt = class extends HTMLElement {
     var n, s;
     const r = this.constructor, i = r._$Eh.get(t);
     if (i !== void 0 && this._$Em !== i) {
-      const h = r.getPropertyOptions(i), c = typeof h.converter == "function" ? { fromAttribute: h.converter } : ((n = h.converter) == null ? void 0 : n.fromAttribute) !== void 0 ? h.converter : Ct;
+      const h = r.getPropertyOptions(i), c = typeof h.converter == "function" ? { fromAttribute: h.converter } : ((n = h.converter) == null ? void 0 : n.fromAttribute) !== void 0 ? h.converter : _t;
       this._$Em = i, this[i] = c.fromAttribute(e, h.type) ?? ((s = this._$Ej) == null ? void 0 : s.get(i)) ?? null, this._$Em = null;
     }
   }
@@ -519,7 +519,7 @@ const je = (o, t, e) => {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const Y = globalThis;
-let p = class extends rt {
+let u = class extends rt {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -545,16 +545,16 @@ let p = class extends rt {
   }
 };
 var pe;
-p._$litElement$ = !0, p.finalized = !0, (pe = Y.litElementHydrateSupport) == null || pe.call(Y, { LitElement: p });
+u._$litElement$ = !0, u.finalized = !0, (pe = Y.litElementHydrateSupport) == null || pe.call(Y, { LitElement: u });
 const zt = Y.litElementPolyfillSupport;
-zt == null || zt({ LitElement: p });
+zt == null || zt({ LitElement: u });
 (Y.litElementVersions ?? (Y.litElementVersions = [])).push("4.2.0");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const b = (o) => (t, e) => {
+const g = (o) => (t, e) => {
   e !== void 0 ? e.addInitializer(() => {
     customElements.define(o, t);
   }) : customElements.define(o, t);
@@ -564,7 +564,7 @@ const b = (o) => (t, e) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Re = { attribute: !0, type: String, converter: Ct, reflect: !1, hasChanged: Nt }, Ne = (o = Re, t, e) => {
+const Re = { attribute: !0, type: String, converter: _t, reflect: !1, hasChanged: Nt }, Ne = (o = Re, t, e) => {
   const { kind: r, metadata: i } = e;
   let n = globalThis.litPropertyMetadata.get(i);
   if (n === void 0 && globalThis.litPropertyMetadata.set(i, n = /* @__PURE__ */ new Map()), r === "setter" && ((o = Object.create(o)).wrapped = !0), n.set(e.name, o), r === "accessor") {
@@ -855,7 +855,7 @@ Dt.directiveName = "unsafeHTML", Dt.resultType = 1;
 class Ht extends Dt {
 }
 Ht.directiveName = "unsafeSVG", Ht.resultType = 2;
-const _ = Zt(Ht);
+const C = Zt(Ht);
 /**
  * @license
  * Copyright 2020 Google LLC
@@ -887,17 +887,17 @@ const dt = (o, t) => {
     e.add(o), ko(t);
   }
 };
-function _o(o) {
+function Co(o) {
   this._$AN !== void 0 ? (St(this), this._$AM = o, me(this)) : this._$AM = o;
 }
-function Co(o, t = !1, e = 0) {
+function _o(o, t = !1, e = 0) {
   const r = this._$AH, i = this._$AN;
   if (i !== void 0 && i.size !== 0) if (t) if (Array.isArray(r)) for (let n = e; n < r.length; n++) dt(r[n], !1), St(r[n]);
   else r != null && (dt(r, !1), St(r));
   else dt(this, o);
 }
 const ko = (o) => {
-  o.type == qt.CHILD && (o._$AP ?? (o._$AP = Co), o._$AQ ?? (o._$AQ = _o));
+  o.type == qt.CHILD && (o._$AP ?? (o._$AP = _o), o._$AQ ?? (o._$AQ = Co));
 };
 class So extends Kt {
   constructor() {
@@ -1054,7 +1054,7 @@ var Po = Object.defineProperty, Oo = Object.getOwnPropertyDescriptor, H = (o, t,
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && Po(t, e, i), i;
 };
-let A = class extends p {
+let A = class extends u {
   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 = "";
   }
@@ -1066,7 +1066,7 @@ let A = class extends p {
     return l`
 			${this.type === "span" ? l`
 				<span class="icon icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}" ?disabled="${this.disabled}">	
-					${_(e)}
+					${C(e)}
 				</span>
 			` : l`
 				<button
@@ -1075,7 +1075,7 @@ let A = class extends p {
 					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
 					?disabled="${this.disabled}"
 				>
-					${_(e)}
+					${C(e)}
 					${r}
 				</button>
 			`}
@@ -1322,16 +1322,16 @@ H([
   a({ type: String })
 ], A.prototype, "srLabel", 2);
 A = H([
-  b("o-icon-button")
+  g("o-icon-button")
 ], A);
-var Io = Object.defineProperty, zo = Object.getOwnPropertyDescriptor, y = (o, t, e, r) => {
+var Io = Object.defineProperty, zo = Object.getOwnPropertyDescriptor, b = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? zo(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && Io(t, e, i), i;
 };
-let u = class extends p {
+let p = class extends u {
   constructor() {
-    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.showDetail = !1, this.isHidingDetail = !1, this.previousFocusedElement = null, this._onOpenDetail = async (o) => {
+    super(...arguments), this.open = !1, this.showHeader = !0, this.showFooter = !1, this.showHeaderStartIcon = !1, this.headerTitle = "", this.headerTitleClassName = "panel-title", this.labelDialog = "", this.closeButtonLabel = "Close the modal", this.goBackButtonLabel = "Go back to", 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.showDetail = !1, this.isHidingDetail = !1, this.previousFocusedElement = null, this._onOpenDetail = async (o) => {
       var e, r;
       const t = ((e = o.detail) == null ? void 0 : e.origin) ?? document.activeElement;
       if (this._detailOriginEl = t, this._detailOriginClass = (t == null ? void 0 : t.className) ?? "", this.showDetail = !0, this.showHeaderStartIcon = !0, await this.updateComplete, this._detailOriginClass) {
@@ -1364,7 +1364,7 @@ let u = class extends p {
       this.closePanel();
     }, this._onDetailSlotChange = (o) => {
       const r = o.target.assignedElements({ flatten: !0 }).flatMap((i) => Array.from(i.querySelectorAll("img")))[0];
-      r == null || r.setAttribute("tabindex", "0");
+      r && (r.setAttribute("role", "img"), r.hasAttribute("tabindex") || r.setAttribute("tabindex", "-1"));
     };
   }
   connectedCallback() {
@@ -1376,7 +1376,7 @@ let u = class extends p {
     document.body.style.overflow = "", document.body.removeAttribute("data-side-panel"), this.removeEventListener("keydown", this.handleKeyDown), super.disconnectedCallback(), this.removeEventListener("open-detail", this._onOpenDetail);
   }
   async focusDetailReturnBtn() {
-    var r, i, n, s;
+    var i, n, s, h, c;
     await this.updateComplete;
     const o = this.getDeepActiveElement(document);
     if (o && o !== document.body)
@@ -1385,9 +1385,11 @@ let u = class extends p {
       } catch {
       }
     await new Promise(requestAnimationFrame);
-    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".detail-view .return-btn");
+    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".detail-view .return-btn");
     if (!t) return;
-    t.updateComplete && await t.updateComplete, (s = (n = ((i = t.shadowRoot) == null ? void 0 : i.querySelector("button")) ?? t) == null ? void 0 : n.focus) == null || s.call(n, { preventScroll: !0 });
+    t.updateComplete && await t.updateComplete, (h = (s = ((n = t.shadowRoot) == null ? void 0 : n.querySelector("button")) ?? t) == null ? void 0 : s.focus) == null || h.call(s, { preventScroll: !0 });
+    const r = (c = this.shadowRoot) == null ? void 0 : c.querySelector('.panel[role="dialog"]');
+    r && r.setAttribute("aria-label", this.headerTitle);
   }
   _setPriceTabindex() {
     var r;
@@ -1432,7 +1434,7 @@ let u = class extends p {
     }
     function e(i) {
       var s;
-      const n = [i.matches(u.focusablesSelector) ? i : []];
+      const n = [i.matches(p.focusablesSelector) ? i : []];
       if (!["o-icon-button", "o-button"].includes(i.tagName.toLowerCase())) {
         const h = Array.from(
           i instanceof HTMLSlotElement ? i.assignedElements({ flatten: !0 }) : []
@@ -1502,36 +1504,34 @@ let u = class extends p {
   }
   render() {
     const o = this.showHeader ? l`
-			<div tabindex="-1" class="header">
-				${this.showHeaderStartIcon ? l`
-				<o-icon-button
-					icon="arrowLeft"
-					size="small"
-					class="return-btn"
-					bgstyle="background-light"
-					data-role="back"
-					@click=${this.handleClosePanel}
-					@keydown=${this.handleClosePanel}
-					aria-label="${this.closeButtonLabel}"
-					srlabel="${this.closeButtonLabel}"
-        			showsrlabel="true"
-				></o-icon-button>
-				` : null}
-				<p role="heading" aria-level="1" id="panel-title" class="${this.headerTitleClassName}">
-				${this.headerTitle}
-				</p>
-				<o-icon-button
-				icon="cross"
+			<div tabindex="-1" class="header ${this.showDetail ? "detail-view-header" : ""}">
+			${this.showHeaderStartIcon ? l`
+			<o-icon-button
+				icon="arrowLeft"
 				size="small"
-				class="close-btn"
+				class="return-btn"
 				bgstyle="background-light"
+				data-role="back"
 				@click=${this.handleClosePanel}
 				@keydown=${this.handleClosePanel}
-				aria-label="${this.closeButtonLabel}"
-				aria-describedby="panel-title"
-				srlabel="${this.closeButtonLabel}"
-        		showsrlabel="true"
-				></o-icon-button>
+				srlabel="${this.goBackButtonLabel} ${this.labelDialog}"
+				showsrlabel="true"
+				tabindex="-1"
+			></o-icon-button>
+			` : null}
+			<p role="heading" aria-level="1" id="panel-title" class="${this.headerTitleClassName}">
+			${this.headerTitle}
+			</p>
+			<o-icon-button
+			icon="cross"
+			size="small"
+			class="close-btn"
+			bgstyle="background-light"
+			@click=${this.handleClosePanel}
+			@keydown=${this.handleClosePanel}
+			srlabel="${this.closeButtonLabel}"
+			showsrlabel="true"
+			></o-icon-button>
 			</div>
 			` : null;
     return l`
@@ -1540,7 +1540,7 @@ let u = class extends p {
 				class="panel"
 				role="dialog"
 				aria-modal="true"
-				aria-labelledby="panel-title"
+				aria-labelledby="${this.labelDialog}"
 				style="z-index: ${this.zIndex + 1}"
 				tabindex="-1"
 			>
@@ -1589,7 +1589,7 @@ let u = class extends p {
 		`;
   }
 };
-u.styles = v`
+p.styles = v`
 		:host {
 			--z-overlay: 99;
 			--z-panel: 100;
@@ -1687,6 +1687,18 @@ u.styles = v`
 			.return-btn {
 				margin-right: 8px;
 			}
+
+			&.detail-view-header {
+				display: none;
+			}
+		}
+
+		.detail-view {
+			.header {
+				&.detail-view-header {
+					display: flex;
+				}
+			}
 		}
 
 		.panel:focus-visible,
@@ -1779,78 +1791,84 @@ u.styles = v`
 			padding: var(--spacing-xl);
 		}
 	`;
-u.focusablesSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';
-u.focusablesCustomElementsSelector = "o-icon-button, o-button";
-y([
+p.focusablesSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';
+p.focusablesCustomElementsSelector = "o-icon-button, o-button";
+b([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "open", 2);
-y([
+], p.prototype, "open", 2);
+b([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "showHeader", 2);
-y([
+], p.prototype, "showHeader", 2);
+b([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "showFooter", 2);
-y([
+], p.prototype, "showFooter", 2);
+b([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "showHeaderStartIcon", 2);
-y([
+], p.prototype, "showHeaderStartIcon", 2);
+b([
+  a({ type: String, reflect: !0 })
+], p.prototype, "headerTitle", 2);
+b([
   a({ type: String, reflect: !0 })
-], u.prototype, "headerTitle", 2);
-y([
+], p.prototype, "headerTitleClassName", 2);
+b([
   a({ type: String, reflect: !0 })
-], u.prototype, "headerTitleClassName", 2);
-y([
+], p.prototype, "labelDialog", 2);
+b([
   a({ type: String, reflect: !0 })
-], u.prototype, "closeButtonLabel", 2);
-y([
+], p.prototype, "closeButtonLabel", 2);
+b([
   a({ type: String, reflect: !0 })
-], u.prototype, "firstButtonLabel", 2);
-y([
+], p.prototype, "goBackButtonLabel", 2);
+b([
   a({ type: String, reflect: !0 })
-], u.prototype, "firstButtonVariant", 2);
-y([
+], p.prototype, "firstButtonLabel", 2);
+b([
+  a({ type: String, reflect: !0 })
+], p.prototype, "firstButtonVariant", 2);
+b([
   a({ type: Object, reflect: !0 })
-], u.prototype, "firstButtonProps", 2);
-y([
+], p.prototype, "firstButtonProps", 2);
+b([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "onFirstButtonClickClose", 2);
-y([
+], p.prototype, "onFirstButtonClickClose", 2);
+b([
   a({ type: String, reflect: !0 })
-], u.prototype, "secondButtonLabel", 2);
-y([
+], p.prototype, "secondButtonLabel", 2);
+b([
   a({ type: String, reflect: !0 })
-], u.prototype, "secondButtonVariant", 2);
-y([
+], p.prototype, "secondButtonVariant", 2);
+b([
   a({ type: Object, reflect: !0 })
-], u.prototype, "secondButtonProps", 2);
-y([
+], p.prototype, "secondButtonProps", 2);
+b([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "onSecondButtonClickClose", 2);
-y([
+], p.prototype, "onSecondButtonClickClose", 2);
+b([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "disablePortal", 2);
-y([
+], p.prototype, "disablePortal", 2);
+b([
   a({ type: Number, reflect: !0 })
-], u.prototype, "zIndex", 2);
-y([
+], p.prototype, "zIndex", 2);
+b([
   a({ type: Boolean, reflect: !0 })
-], u.prototype, "initialized", 2);
-y([
+], p.prototype, "initialized", 2);
+b([
   a({ type: Boolean })
-], u.prototype, "showDetail", 2);
-y([
+], p.prototype, "showDetail", 2);
+b([
   a({ type: Boolean })
-], u.prototype, "isHidingDetail", 2);
-u = y([
-  b("o-side-panel")
-], u);
+], p.prototype, "isHidingDetail", 2);
+p = b([
+  g("o-side-panel")
+], p);
 var Bo = Object.defineProperty, Do = Object.getOwnPropertyDescriptor, x = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? Do(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && Bo(t, e, i), i;
 };
-const Ho = Vt(p);
-let g = class extends Ho {
+const Ho = Vt(u);
+let y = class extends Ho {
   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, this.withbadge = !1;
   }
@@ -1866,7 +1884,7 @@ let g = class extends Ho {
   handleClick(o) {
     if (!(o instanceof KeyboardEvent && !["Enter", " "].includes(o.key)) && this.panelTarget) {
       const t = document.getElementById(this.panelTarget);
-      t instanceof u && (t != null && t.openPanel) && typeof t.openPanel == "function" ? (o.preventDefault(), t.openPanel()) : console.warn(`[o-button] No side panel with id="${this.panelTarget}" found or it does not have an openPanel method.`);
+      t instanceof p && (t != null && t.openPanel) && typeof t.openPanel == "function" ? (o.preventDefault(), t.openPanel()) : console.warn(`[o-button] No side panel with id="${this.panelTarget}" found or it does not have an openPanel method.`);
     }
   }
   render() {
@@ -1879,7 +1897,7 @@ let g = class extends Ho {
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     );
-    return l`<span class="${o === "start" ? "icon-start" : "icon-end"}">${_(e)}</span>`;
+    return l`<span class="${o === "start" ? "icon-start" : "icon-end"}">${C(e)}</span>`;
   }
   renderButton() {
     const o = this.text || this.textsecond;
@@ -1918,9 +1936,9 @@ let g = class extends Ho {
     `;
   }
 };
-Ue(g);
-g.formAssociated = !0;
-g.styles = v`
+Ue(y);
+y.formAssociated = !0;
+y.styles = v`
     :host {
       --button-border: transparent;
       --badge-outer-width: 19px;
@@ -2124,61 +2142,61 @@ g.styles = v`
   `;
 x([
   a()
-], g.prototype, "type", 2);
+], y.prototype, "type", 2);
 x([
   a()
-], g.prototype, "value", 2);
+], y.prototype, "value", 2);
 x([
   a({ type: String, reflect: !0 })
-], g.prototype, "variant", 2);
+], y.prototype, "variant", 2);
 x([
   a({ type: String })
-], g.prototype, "text", 2);
+], y.prototype, "text", 2);
 x([
   a({ type: String })
-], g.prototype, "textsecond", 2);
+], y.prototype, "textsecond", 2);
 x([
   a({ type: Boolean, reflect: !0 })
-], g.prototype, "fullwidth", 2);
+], y.prototype, "fullwidth", 2);
 x([
   a({ type: Boolean, reflect: !0 })
-], g.prototype, "disabled", 2);
+], y.prototype, "disabled", 2);
 x([
   a({ type: String })
-], g.prototype, "startIconModel", 2);
+], y.prototype, "startIconModel", 2);
 x([
   a({ type: String })
-], g.prototype, "endIconModel", 2);
+], y.prototype, "endIconModel", 2);
 x([
   a({ type: Boolean, reflect: !0, attribute: "starticon" })
-], g.prototype, "startIcon", 2);
+], y.prototype, "startIcon", 2);
 x([
   a({ type: Boolean, reflect: !0, attribute: "endicon" })
-], g.prototype, "endIcon", 2);
+], y.prototype, "endIcon", 2);
 x([
   a({ type: String, attribute: "paneltarget" })
-], g.prototype, "panelTarget", 2);
+], y.prototype, "panelTarget", 2);
 x([
   a({ type: String })
-], g.prototype, "href", 2);
+], y.prototype, "href", 2);
 x([
   a({ type: String })
-], g.prototype, "target", 2);
+], y.prototype, "target", 2);
 x([
   a({ type: Boolean, reflect: !0 })
-], g.prototype, "underlined", 2);
+], y.prototype, "underlined", 2);
 x([
   a({ type: Boolean, reflect: !0 })
-], g.prototype, "withbadge", 2);
-g = x([
-  b("o-button")
-], g);
+], y.prototype, "withbadge", 2);
+y = x([
+  g("o-button")
+], y);
 var To = Object.defineProperty, Mo = Object.getOwnPropertyDescriptor, Et = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? Mo(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && To(t, e, i), i;
 };
-let st = class extends p {
+let st = class extends u {
   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", {
@@ -2205,7 +2223,7 @@ let st = class extends p {
     return l`
 			<button type="button" aria-describedby="${this.ariaDescribedBy}" class="wishlist-button">
 				<span class="sr-only">${this.label}</span>
-				${_(o)}
+				${C(o)}
 			</button>
 		`;
   }
@@ -2294,19 +2312,23 @@ Et([
   a({ type: String, reflect: !0 })
 ], st.prototype, "label", 2);
 st = Et([
-  b("o-wishlist-button")
+  g("o-wishlist-button")
 ], st);
 var jo = Object.defineProperty, Ro = Object.getOwnPropertyDescriptor, it = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? Ro(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && jo(t, e, i), i;
 };
-let U = class extends p {
+let U = class extends u {
   constructor() {
     super(...arguments), this.href = "", this.target = "", this.template = "standard", this.inverse = !1, this.endIcon = !1, this.reverseEndIcon = !1;
   }
   _handleClick(o) {
-    (!this.href || this.href === "#") && o.preventDefault();
+    (!this.href || this.href === "#") && o.preventDefault(), this.dispatchEvent(new CustomEvent("click", {
+      detail: { href: this.href },
+      bubbles: !0,
+      composed: !0
+    }));
   }
   render() {
     const o = this.href || "#";
@@ -2446,14 +2468,14 @@ it([
   a({ type: Boolean, reflect: !0 })
 ], U.prototype, "reverseEndIcon", 2);
 U = it([
-  b("o-link")
+  g("o-link")
 ], U);
 var No = Object.defineProperty, Fo = Object.getOwnPropertyDescriptor, Lt = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? Fo(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && No(t, e, i), i;
 };
-let at = class extends p {
+let at = class extends u {
   constructor() {
     super(...arguments), this.rating = 0;
   }
@@ -2472,7 +2494,7 @@ let at = class extends p {
 			<div class="rating">
 			<div class="stars">
 				${o.map(
-      (t) => l`<span class="star">${_(F[t] ?? "")}</span>`
+      (t) => l`<span class="star">${C(F[t] ?? "")}</span>`
     )}
 			</div>
 			${this.reviewCount != null && this.href != null ? l`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>` : null}
@@ -2524,14 +2546,14 @@ Lt([
   a({ type: String })
 ], at.prototype, "href", 2);
 at = Lt([
-  b("o-rating")
+  g("o-rating")
 ], at);
 var Uo = Object.defineProperty, Vo = Object.getOwnPropertyDescriptor, X = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? Vo(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && Uo(t, e, i), i;
 };
-let D = class extends p {
+let D = class extends u {
   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
@@ -2750,14 +2772,14 @@ X([
   et()
 ], D.prototype, "focusedIndex", 2);
 D = X([
-  b("thumbnail-navigation")
+  g("thumbnail-navigation")
 ], D);
 var qo = Object.defineProperty, Zo = Object.getOwnPropertyDescriptor, Wt = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? Zo(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && qo(t, e, i), i;
 };
-let ft = class extends p {
+let ft = class extends u {
   constructor() {
     super(...arguments), this.type = "", this.bgstyle = "background-white";
   }
@@ -2832,14 +2854,14 @@ Wt([
   a({ type: String, reflect: !0 })
 ], ft.prototype, "bgstyle", 2);
 ft = Wt([
-  b("o-tag")
+  g("o-tag")
 ], ft);
 var Ko = Object.defineProperty, Wo = Object.getOwnPropertyDescriptor, Gt = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? Wo(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && Ko(t, e, i), i;
 };
-let bt = class extends p {
+let bt = class extends u {
   constructor() {
     super(...arguments), this.type = "top", this.text = "";
   }
@@ -2952,14 +2974,14 @@ Gt([
   a({ type: String, reflect: !0 })
 ], bt.prototype, "text", 2);
 bt = Gt([
-  b("o-tooltip")
+  g("o-tooltip")
 ], bt);
 var Go = Object.defineProperty, Xo = Object.getOwnPropertyDescriptor, V = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? Xo(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && Go(t, e, i), i;
 };
-let z = class extends p {
+let z = class extends u {
   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);
@@ -3070,10 +3092,10 @@ let z = class extends p {
                   ${e.url ? l`
                   <a href="${e.url}">
                     <span>${e.label}</span>
-                    ${e.value === this.value ? l`<span class="check">${_(o)}</span>` : null}
+                    ${e.value === this.value ? l`<span class="check">${C(o)}</span>` : null}
                   </a>` : l`
                     <span>${e.label}</span>
-                    ${e.value === this.value ? l`<span class="check">${_(o)}</span>` : null}`}
+                    ${e.value === this.value ? l`<span class="check">${C(o)}</span>` : null}`}
                 </li>`
     )}
           </ul>` : null}
@@ -3247,14 +3269,14 @@ V([
   et()
 ], z.prototype, "menuWidth", 2);
 z = V([
-  b("o-dropdown")
+  g("o-dropdown")
 ], z);
 var Jo = Object.getOwnPropertyDescriptor, Qo = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? Jo(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = s(i) || i);
   return i;
 };
-let Tt = class extends p {
+let Tt = class extends u {
   render() {
     return l` <span class="dots"></span> `;
   }
@@ -3312,14 +3334,14 @@ Tt.styles = v`
     }
   `;
 Tt = Qo([
-  b("o-dots")
+  g("o-dots")
 ], Tt);
 var Yo = Object.defineProperty, ti = Object.getOwnPropertyDescriptor, T = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? ti(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && Yo(t, e, i), i;
 };
-let E = class extends p {
+let E = class extends u {
   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);
@@ -3444,7 +3466,7 @@ let E = class extends p {
 										<div class="right">
 											<span class="additional-text">${S(e.additionaltext)}</span>
 											${e.value === this.value && !e.additionaltext ? l`
-												<span class="check">${_(o)}</span>` : null}
+												<span class="check">${C(o)}</span>` : null}
 										</div>
 									</a>
 								</li>
@@ -3660,7 +3682,7 @@ T([
   et()
 ], E.prototype, "menuWidth", 2);
 E = T([
-  b("o-dropdown-variant")
+  g("o-dropdown-variant")
 ], E);
 /**
  * @license
@@ -3698,7 +3720,7 @@ var ii = Object.defineProperty, ri = Object.getOwnPropertyDescriptor, Xt = (o, t
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && ii(t, e, i), i;
 };
-let gt = class extends p {
+let gt = class extends u {
   constructor() {
     super(...arguments), this.option = {}, this.imageSize = 64;
   }
@@ -3805,14 +3827,14 @@ Xt([
   a({ type: Number, reflect: !0 })
 ], gt.prototype, "imageSize", 2);
 gt = Xt([
-  b("o-reassurance")
+  g("o-reassurance")
 ], gt);
 var ni = Object.defineProperty, si = Object.getOwnPropertyDescriptor, q = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? si(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && ni(t, e, i), i;
 };
-const ai = Vt(p);
+const ai = Vt(u);
 let L = class extends ai {
   constructor() {
     super(...arguments), this.link = "", this.name = "", this.value = "", this.text = "", this.size = "standard", this.selected = !1, this.fullwidth = !1, this.inactive = !1;
@@ -3951,14 +3973,14 @@ q([
   a({ type: Boolean, reflect: !0 })
 ], L.prototype, "inactive", 2);
 L = q([
-  b("o-chip")
+  g("o-chip")
 ], L);
 var li = Object.defineProperty, ci = Object.getOwnPropertyDescriptor, Jt = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? ci(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && li(t, e, i), i;
 };
-let yt = class extends p {
+let yt = class extends u {
   constructor() {
     super(), this.name = "", this.value = "", this.addEventListener("selected", this.onChipSelected);
   }
@@ -3989,14 +4011,14 @@ Jt([
   a({ reflect: !0 })
 ], yt.prototype, "value", 2);
 yt = Jt([
-  b("o-chipset")
+  g("o-chipset")
 ], yt);
 var hi = Object.defineProperty, di = Object.getOwnPropertyDescriptor, M = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? di(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && hi(t, e, i), i;
 };
-const pi = Vt(p);
+const pi = Vt(u);
 let P = class extends pi {
   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";
@@ -4013,14 +4035,14 @@ let P = class extends pi {
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     ).replace(/stroke=[#"'a-z1-9]*/gi, "");
-    return l`<span class="cross-icon">${_(o)}</span>`;
+    return l`<span class="cross-icon">${C(o)}</span>`;
   }
   strikeThroughImg() {
     const o = xo[this.strikethroughImgName].replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="strikethrough"'
     ).replace(/stroke=[#"'a-z1-9]*/gi, "");
-    return _(o);
+    return C(o);
   }
   render() {
     const o = this.text;
@@ -4201,14 +4223,14 @@ M([
   a({ type: Boolean, reflect: !0 })
 ], P.prototype, "fullwidth", 2);
 P = M([
-  b("o-filter-chip")
+  g("o-filter-chip")
 ], P);
 var ui = Object.defineProperty, j = (o, t, e, r) => {
   for (var i = void 0, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = s(t, e, i) || i);
   return i && ui(t, e, i), i;
 };
-const te = class te extends p {
+const te = class te extends u {
   constructor() {
     super(...arguments), this.type = "cart | chevron", this.titleProduct = "", this.volume = "", this.perLiter = "", this.mainPrice = "", this.imageUrl = "https://placehold.co/56x70", this.altImage = "", this.fullwidth = !1, this.tagText = "";
   }
@@ -4355,44 +4377,44 @@ te.styles = v`
             cursor: pointer;
         }
   `;
-let C = te;
+let _ = te;
 j([
   a({ type: String })
-], C.prototype, "type");
+], _.prototype, "type");
 j([
   a({ type: String })
-], C.prototype, "titleProduct");
+], _.prototype, "titleProduct");
 j([
   a({ type: String })
-], C.prototype, "volume");
+], _.prototype, "volume");
 j([
   a({ type: String })
-], C.prototype, "perLiter");
+], _.prototype, "perLiter");
 j([
   a({ type: String })
-], C.prototype, "mainPrice");
+], _.prototype, "mainPrice");
 j([
   a({ type: String })
-], C.prototype, "imageUrl");
+], _.prototype, "imageUrl");
 j([
   a({ type: String })
-], C.prototype, "altImage");
+], _.prototype, "altImage");
 j([
   a({ type: Boolean })
-], C.prototype, "fullwidth");
+], _.prototype, "fullwidth");
 j([
   a({ type: String })
-], C.prototype, "tagText");
+], _.prototype, "tagText");
 j([
   a({ type: Function })
-], C.prototype, "onClickTile");
-customElements.define("mini-tile", C);
+], _.prototype, "onClickTile");
+customElements.define("mini-tile", _);
 var vi = Object.defineProperty, fi = Object.getOwnPropertyDescriptor, Qt = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? fi(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && vi(t, e, i), i;
 };
-let mt = class extends p {
+let mt = class extends u {
   constructor() {
     super(...arguments), this.variant = "cart", this.text = "";
   }
@@ -4446,14 +4468,14 @@ Qt([
   a({ type: String })
 ], mt.prototype, "text", 2);
 mt = Qt([
-  b("o-badge")
+  g("o-badge")
 ], mt);
 var bi = Object.defineProperty, gi = Object.getOwnPropertyDescriptor, I = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? gi(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && bi(t, e, i), i;
 };
-let $ = class extends p {
+let $ = class extends u {
   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;
   }
@@ -4501,7 +4523,7 @@ let $ = class extends p {
     return l`
             <div class="o-toast">
                 <div class="o-toast-icon">
-                    ${_(t)}
+                    ${C(t)}
                 </div>
                 <div class="o-toast-text">
                     ${this.text}
@@ -4629,14 +4651,14 @@ I([
   a({ type: Boolean, reflect: !0 })
 ], $.prototype, "multiline", 2);
 $ = I([
-  b("o-toast")
+  g("o-toast")
 ], $);
 var yi = Object.defineProperty, mi = Object.getOwnPropertyDescriptor, B = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? mi(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && yi(t, e, i), i;
 };
-let xi = 0, k = class extends p {
+let xi = 0, k = class extends u {
   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-${++xi}`);
   }
@@ -4653,7 +4675,7 @@ let xi = 0, k = class extends p {
     this.disabled || (o.key === " " || o.key === "Enter") && (o.preventDefault(), this.toggle());
   }
   render() {
-    const o = _(F.checkbox.replace("<svg", '<svg aria-hidden="true" focusable="false" part="svg"')), t = _(F.icoMinus.replace("<svg", '<svg class="indeterminate" aria-hidden="true" focusable="false" part="svg"'));
+    const o = C(F.checkbox.replace("<svg", '<svg aria-hidden="true" focusable="false" part="svg"')), t = C(F.icoMinus.replace("<svg", '<svg class="indeterminate" aria-hidden="true" focusable="false" part="svg"'));
     return l`
       <input
         type="checkbox"
@@ -4811,16 +4833,16 @@ B([
   ye("input")
 ], k.prototype, "inputEl", 2);
 k = B([
-  b("o-checkbox")
+  g("o-checkbox")
 ], k);
 var wi = Object.defineProperty, $i = Object.getOwnPropertyDescriptor, R = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? $i(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && wi(t, e, i), i;
 };
-let _i = 0, O = class extends p {
+let Ci = 0, O = class extends u {
   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-${++_i}`);
+    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-${++Ci}`);
   }
   handleClick() {
     this.disabled || this.checked || (this.checked = !0, this.syncInput(), this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })));
@@ -4970,14 +4992,14 @@ R([
   ye("input")
 ], O.prototype, "inputEl", 2);
 O = R([
-  b("o-radio")
+  g("o-radio")
 ], O);
-var Ci = Object.getOwnPropertyDescriptor, ki = (o, t, e, r) => {
-  for (var i = r > 1 ? void 0 : r ? Ci(t, e) : t, n = o.length - 1, s; n >= 0; n--)
+var _i = Object.getOwnPropertyDescriptor, ki = (o, t, e, r) => {
+  for (var i = r > 1 ? void 0 : r ? _i(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = s(i) || i);
   return i;
 };
-let Mt = class extends p {
+let Mt = class extends u {
   render() {
     return l`
             <nav aria-label="Breadcrumbs">
@@ -5001,14 +5023,14 @@ Mt.styles = v`
         }
     `;
 Mt = ki([
-  b("o-breadcrumbs")
+  g("o-breadcrumbs")
 ], Mt);
 var Si = Object.defineProperty, Ai = Object.getOwnPropertyDescriptor, Yt = (o, t, e, r) => {
   for (var i = r > 1 ? void 0 : r ? Ai(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (i = (r ? s(t, e, i) : s(i)) || i);
   return r && i && Si(t, e, i), i;
 };
-let xt = class extends p {
+let xt = class extends u {
   constructor() {
     super(...arguments), this.href = "", this.active = !1;
   }
@@ -5080,5 +5102,5 @@ Yt([
   a({ type: Boolean, reflect: !0 })
 ], xt.prototype, "active", 2);
 xt = Yt([
-  b("o-breadcrumb")
+  g("o-breadcrumb")
 ], xt);