@florid-kit/components 0.9.20 → 0.9.21

package/aria.d.ts

@@ -15,7 +15,7 @@ export type ARIAAttribute = ARIAPropertyToAttribute<ARIAProperty>;
 /**
  * Accessibility Object Model aria attributes.
  */
-export declare const ARIA_ATTRIBUTES: ("aria-modal" | "aria-pressed" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-description" | "aria-disabled" | "aria-expanded" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-level" | "aria-live" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-placeholder" | "aria-posinset" | "aria-readonly" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext")[];
+export declare const ARIA_ATTRIBUTES: ("aria-label" | "aria-modal" | "aria-pressed" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-description" | "aria-disabled" | "aria-expanded" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-placeholder" | "aria-posinset" | "aria-readonly" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext")[];
 /**
  * Checks if an attribute is one of the AOM aria attributes.
  *

package/components/side-panel.d.ts

@@ -15,7 +15,9 @@ export declare class OccitaneSidePanel extends LitElement {
     showHeaderStartIcon: boolean;
     headerTitle: string;
     headerTitleClassName: string;
+    labelDialog: string;
     closeButtonLabel: string;
+    goBackButtonLabel: string;
     firstButtonLabel: string;
     firstButtonVariant: string;
     firstButtonProps: {};

package/index.js

@@ -16,11 +16,11 @@
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const Y=globalThis;let p=class extends rt{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var e;const t=super.createRenderRoot();return(e=this.renderOptions).renderBefore??(e.renderBefore=t.firstChild),t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=je(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),(t=this._$Do)==null||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._$Do)==null||t.setConnected(!1)}render(){return G}};var pe;p._$litElement$=!0,p.finalized=!0,(pe=Y.litElementHydrateSupport)==null||pe.call(Y,{LitElement:p});const zt=Y.litElementPolyfillSupport;zt==null||zt({LitElement:p});(Y.litElementVersions??(Y.litElementVersions=[])).push("4.2.0");/**
+ */const Y=globalThis;let u=class extends rt{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var e;const t=super.createRenderRoot();return(e=this.renderOptions).renderBefore??(e.renderBefore=t.firstChild),t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=je(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),(t=this._$Do)==null||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._$Do)==null||t.setConnected(!1)}render(){return G}};var pe;u._$litElement$=!0,u.finalized=!0,(pe=Y.litElementHydrateSupport)==null||pe.call(Y,{LitElement:u});const zt=Y.litElementPolyfillSupport;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)=>{e!==void 0?e.addInitializer(()=>{customElements.define(o,t)}):customElements.define(o,t)};/**
+ */const g=o=>(t,e)=>{e!==void 0?e.addInitializer(()=>{customElements.define(o,t)}):customElements.define(o,t)};/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
@@ -170,7 +170,7 @@
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const S=o=>o??d;var Po=Object.defineProperty,Oo=Object.getOwnPropertyDescriptor,H=(o,t,e,r)=>{for(var i=r>1?void 0:r?Oo(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&&Po(t,e,i),i};let A=class extends p{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=""}updated(o){super.updated(o),this.style.setProperty("--icon-stroke-width",this.strokewidth)}render(){const o=F[this.icon]??"",t=`icon-${this.icon}`,e=o.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"').replace(/<path\b/g,'<path part="icon-path"').replace(/<g\b/g,'<g part="icon-group"').replace(/<circle\b/g,'<circle part="icon-circle"'),r=this.showSrLabel?l`<span class="sr-only">${this.srLabel}</span>`:null,i=this.showSrLabel?null:"icon";return l`
+ */const S=o=>o??d;var Po=Object.defineProperty,Oo=Object.getOwnPropertyDescriptor,H=(o,t,e,r)=>{for(var i=r>1?void 0:r?Oo(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&&Po(t,e,i),i};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=""}updated(o){super.updated(o),this.style.setProperty("--icon-stroke-width",this.strokewidth)}render(){const o=F[this.icon]??"",t=`icon-${this.icon}`,e=o.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"').replace(/<path\b/g,'<path part="icon-path"').replace(/<g\b/g,'<g part="icon-group"').replace(/<circle\b/g,'<circle part="icon-circle"'),r=this.showSrLabel?l`<span class="sr-only">${this.srLabel}</span>`:null,i=this.showSrLabel?null:"icon";return l`
 			${this.type==="span"?l`
 				<span class="icon icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}" ?disabled="${this.disabled}">	
 					${_(e)}
@@ -397,37 +397,35 @@
 		.sr-only {
 			display: none;
 		}
-	`;H([a({type:String,reflect:!0})],A.prototype,"bgstyle",2);H([a({type:String,reflect:!0})],A.prototype,"size",2);H([a({type:String,reflect:!0})],A.prototype,"status",2);H([a({type:String,reflect:!0})],A.prototype,"type",2);H([a({type:String})],A.prototype,"strokewidth",2);H([a({type:String})],A.prototype,"icon",2);H([a({type:Boolean,reflect:!0})],A.prototype,"disabled",2);H([a({type:Boolean})],A.prototype,"showSrLabel",2);H([a({type:String})],A.prototype,"srLabel",2);A=H([b("o-icon-button")],A);var Io=Object.defineProperty,zo=Object.getOwnPropertyDescriptor,y=(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{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=>{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){const i=(r=this.shadowRoot)==null?void 0:r.querySelector(".detail-view");i&&i.setAttribute("fromelement",this._detailOriginClass)}this._setPriceTabindex(),await this.focusDetailReturnBtn()},this._detailOriginEl=null,this._detailOriginClass="",this.handleKeyDown=o=>{this.open&&(o.key==="Escape"?this.closePanel():o.key==="Tab"&&this.trapFocus(o))},this.handleClosePanel=o=>{if(o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" ")return;o.preventDefault(),o.stopPropagation();const t=o.currentTarget,e=(t==null?void 0:t.getAttribute("data-role"))==="back";if(this.showDetail&&e){this.isHidingDetail=!0;const r=this.renderRoot.querySelector(".content"),i=async()=>{this.showDetail=!1,this.isHidingDetail=!1,this.showHeaderStartIcon=!1,await this.updateComplete,this._restoreFocusToOrigin()};if(r){this.showHeaderStartIcon=!1;const n=()=>{this.showDetail=!1,this.isHidingDetail=!1,r.removeEventListener("animationend",n),i()};r.addEventListener("animationend",n)}else this.showDetail=!1,this.isHidingDetail=!1,this.showHeaderStartIcon=!1;return}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")}}connectedCallback(){super.connectedCallback(),!this.disablePortal&&this.parentElement!==document.body&&document.body.appendChild(this),this.addEventListener("keydown",this.handleKeyDown),this.updateComplete.then(()=>{this.initialized=!0}),this.addEventListener("open-detail",this._onOpenDetail)}disconnectedCallback(){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;await this.updateComplete;const o=this.getDeepActiveElement(document);if(o&&o!==document.body)try{o.blur()}catch{}await new Promise(requestAnimationFrame);const t=(r=this.shadowRoot)==null?void 0:r.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})}_setPriceTabindex(){var r;const o=(r=this.shadowRoot)==null?void 0:r.querySelector('slot[name="detail"]');if(!o)return;const e=o.assignedElements({flatten:!0}).flatMap(i=>Array.from(i.querySelectorAll(".m-product-price-standard")));for(const i of e)i.hasAttribute("tabindex")||i.setAttribute("tabindex","0")}_restoreFocusToOrigin(){var t,e;const o=this._detailOriginEl;!o||!document.contains(o)||((e=(t=document.activeElement)==null?void 0:t.blur)==null||e.call(t),requestAnimationFrame(()=>{var i;o.classList.add("a--tabfocus"),(((i=o.shadowRoot)==null?void 0:i.querySelector('button, .button, [tabindex]:not([tabindex="-1"])'))??null??o).focus({preventScroll:!0})}))}getDeepActiveElement(o=this.shadowRoot){let t=o.activeElement;for(;t&&t.shadowRoot&&t.shadowRoot.activeElement;)t=t.shadowRoot.activeElement;return t}trapFocus(o){if(o.key!=="Tab")return;const t=this.getDeepActiveElement(),e=this.renderRoot.querySelector(".close-btn");if(!o.shiftKey&&e&&e.contains(t)){o.preventDefault();const r=this.renderRoot.querySelector(".o-whats-inside--content p");r==null||r.focus()}}getFocusableElements(){const o=this.renderRoot.querySelector(".panel");if(!o)return[];function t(i){return!(i.disabled||i.hasAttribute("disabled")||i.hasAttribute("tabindex")&&i.getAttribute("tabindex")==="-1")}function e(i){var s;const n=[i.matches(u.focusablesSelector)?i:[]];if(!["o-icon-button","o-button"].includes(i.tagName.toLowerCase())){const h=Array.from(i instanceof HTMLSlotElement?i.assignedElements({flatten:!0}):[]).filter(t).flatMap(e),c=Array.from(((s=i.shadowRoot)==null?void 0:s.querySelectorAll("*"))||[]).filter(t).flatMap(e);n.push(...h,...c)}return n.flat()}return Array.from(o.querySelectorAll("*")).filter(t).flatMap(e)}openPanel(){this.removeAttribute("hidden"),this.getBoundingClientRect(),this.previousFocusedElement=document.activeElement,this.open=!0,document.body.style.overflow="hidden",document.body.setAttribute("data-side-panel","open");const o=this.renderRoot.querySelector(".panel");o&&o.setAttribute("aria-modal","true"),this.updateComplete.then(()=>{var t,e,r,i;if(this.showHeader){const n=((t=this.shadowRoot)==null?void 0:t.querySelector(".panel .close-btn"))||null,s=((e=n==null?void 0:n.shadowRoot)==null?void 0:e.querySelector("button"))||null;s&&((r=s.focus)==null||r.call(s))}else{const n=this.getFocusableElements()[0];(i=n==null?void 0:n.focus)==null||i.call(n)}}),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0}))}closePanel(){var t,e,r,i,n;this.open=!1,this.showDetail=!1,document.body.style.overflow="",document.body.removeAttribute("data-side-panel"),((t=this.previousFocusedElement)==null?void 0:t.tagName.toLowerCase())==="o-button"?(i=(r=(e=this.previousFocusedElement.shadowRoot)==null?void 0:e.querySelector(".button"))==null?void 0:r.focus)==null||i.call(r):(n=this.previousFocusedElement)==null||n.focus();const o=this.renderRoot.querySelector(".panel");o&&o.removeAttribute("aria-modal"),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}handleFirstClick(o){o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" "||(o.preventDefault(),o.stopPropagation(),this.onFirstButtonClickClose&&this.closePanel(),this.dispatchEvent(new CustomEvent("firstbuttonclick",{bubbles:!0,composed:!0,cancelable:!0,detail:{button:"first",target:o.target}})))}handleSecondClick(o){o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" "||(o.preventDefault(),o.stopPropagation(),this.onSecondButtonClickClose&&this.closePanel(),this.dispatchEvent(new CustomEvent("secondbuttonclick",{bubbles:!0,composed:!0,cancelable:!0,detail:{button:"second",target:o.target}})))}updated(){this.style.setProperty("--z-overlay",`${this.zIndex||99}`),this.style.setProperty("--z-panel",`${this.zIndex?this.zIndex+1:99}`),this.open||setTimeout(()=>{this.setAttribute("hidden","hidden")},500)}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"
+	`;H([a({type:String,reflect:!0})],A.prototype,"bgstyle",2);H([a({type:String,reflect:!0})],A.prototype,"size",2);H([a({type:String,reflect:!0})],A.prototype,"status",2);H([a({type:String,reflect:!0})],A.prototype,"type",2);H([a({type:String})],A.prototype,"strokewidth",2);H([a({type:String})],A.prototype,"icon",2);H([a({type:Boolean,reflect:!0})],A.prototype,"disabled",2);H([a({type:Boolean})],A.prototype,"showSrLabel",2);H([a({type:String})],A.prototype,"srLabel",2);A=H([g("o-icon-button")],A);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 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.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){const i=(r=this.shadowRoot)==null?void 0:r.querySelector(".detail-view");i&&i.setAttribute("fromelement",this._detailOriginClass)}this._setPriceTabindex(),await this.focusDetailReturnBtn()},this._detailOriginEl=null,this._detailOriginClass="",this.handleKeyDown=o=>{this.open&&(o.key==="Escape"?this.closePanel():o.key==="Tab"&&this.trapFocus(o))},this.handleClosePanel=o=>{if(o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" ")return;o.preventDefault(),o.stopPropagation();const t=o.currentTarget,e=(t==null?void 0:t.getAttribute("data-role"))==="back";if(this.showDetail&&e){this.isHidingDetail=!0;const r=this.renderRoot.querySelector(".content"),i=async()=>{this.showDetail=!1,this.isHidingDetail=!1,this.showHeaderStartIcon=!1,await this.updateComplete,this._restoreFocusToOrigin()};if(r){this.showHeaderStartIcon=!1;const n=()=>{this.showDetail=!1,this.isHidingDetail=!1,r.removeEventListener("animationend",n),i()};r.addEventListener("animationend",n)}else this.showDetail=!1,this.isHidingDetail=!1,this.showHeaderStartIcon=!1;return}this.closePanel()},this._onDetailSlotChange=o=>{const r=o.target.assignedElements({flatten:!0}).flatMap(i=>Array.from(i.querySelectorAll("img")))[0];r&&(r.setAttribute("role","img"),r.hasAttribute("tabindex")||r.setAttribute("tabindex","-1"))}}connectedCallback(){super.connectedCallback(),!this.disablePortal&&this.parentElement!==document.body&&document.body.appendChild(this),this.addEventListener("keydown",this.handleKeyDown),this.updateComplete.then(()=>{this.initialized=!0}),this.addEventListener("open-detail",this._onOpenDetail)}disconnectedCallback(){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 i,n,s,h,c;await this.updateComplete;const o=this.getDeepActiveElement(document);if(o&&o!==document.body)try{o.blur()}catch{}await new Promise(requestAnimationFrame);const t=(i=this.shadowRoot)==null?void 0:i.querySelector(".detail-view .return-btn");if(!t)return;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;const o=(r=this.shadowRoot)==null?void 0:r.querySelector('slot[name="detail"]');if(!o)return;const e=o.assignedElements({flatten:!0}).flatMap(i=>Array.from(i.querySelectorAll(".m-product-price-standard")));for(const i of e)i.hasAttribute("tabindex")||i.setAttribute("tabindex","0")}_restoreFocusToOrigin(){var t,e;const o=this._detailOriginEl;!o||!document.contains(o)||((e=(t=document.activeElement)==null?void 0:t.blur)==null||e.call(t),requestAnimationFrame(()=>{var i;o.classList.add("a--tabfocus"),(((i=o.shadowRoot)==null?void 0:i.querySelector('button, .button, [tabindex]:not([tabindex="-1"])'))??null??o).focus({preventScroll:!0})}))}getDeepActiveElement(o=this.shadowRoot){let t=o.activeElement;for(;t&&t.shadowRoot&&t.shadowRoot.activeElement;)t=t.shadowRoot.activeElement;return t}trapFocus(o){if(o.key!=="Tab")return;const t=this.getDeepActiveElement(),e=this.renderRoot.querySelector(".close-btn");if(!o.shiftKey&&e&&e.contains(t)){o.preventDefault();const r=this.renderRoot.querySelector(".o-whats-inside--content p");r==null||r.focus()}}getFocusableElements(){const o=this.renderRoot.querySelector(".panel");if(!o)return[];function t(i){return!(i.disabled||i.hasAttribute("disabled")||i.hasAttribute("tabindex")&&i.getAttribute("tabindex")==="-1")}function e(i){var s;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}):[]).filter(t).flatMap(e),c=Array.from(((s=i.shadowRoot)==null?void 0:s.querySelectorAll("*"))||[]).filter(t).flatMap(e);n.push(...h,...c)}return n.flat()}return Array.from(o.querySelectorAll("*")).filter(t).flatMap(e)}openPanel(){this.removeAttribute("hidden"),this.getBoundingClientRect(),this.previousFocusedElement=document.activeElement,this.open=!0,document.body.style.overflow="hidden",document.body.setAttribute("data-side-panel","open");const o=this.renderRoot.querySelector(".panel");o&&o.setAttribute("aria-modal","true"),this.updateComplete.then(()=>{var t,e,r,i;if(this.showHeader){const n=((t=this.shadowRoot)==null?void 0:t.querySelector(".panel .close-btn"))||null,s=((e=n==null?void 0:n.shadowRoot)==null?void 0:e.querySelector("button"))||null;s&&((r=s.focus)==null||r.call(s))}else{const n=this.getFocusableElements()[0];(i=n==null?void 0:n.focus)==null||i.call(n)}}),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0}))}closePanel(){var t,e,r,i,n;this.open=!1,this.showDetail=!1,document.body.style.overflow="",document.body.removeAttribute("data-side-panel"),((t=this.previousFocusedElement)==null?void 0:t.tagName.toLowerCase())==="o-button"?(i=(r=(e=this.previousFocusedElement.shadowRoot)==null?void 0:e.querySelector(".button"))==null?void 0:r.focus)==null||i.call(r):(n=this.previousFocusedElement)==null||n.focus();const o=this.renderRoot.querySelector(".panel");o&&o.removeAttribute("aria-modal"),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}handleFirstClick(o){o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" "||(o.preventDefault(),o.stopPropagation(),this.onFirstButtonClickClose&&this.closePanel(),this.dispatchEvent(new CustomEvent("firstbuttonclick",{bubbles:!0,composed:!0,cancelable:!0,detail:{button:"first",target:o.target}})))}handleSecondClick(o){o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" "||(o.preventDefault(),o.stopPropagation(),this.onSecondButtonClickClose&&this.closePanel(),this.dispatchEvent(new CustomEvent("secondbuttonclick",{bubbles:!0,composed:!0,cancelable:!0,detail:{button:"second",target:o.target}})))}updated(){this.style.setProperty("--z-overlay",`${this.zIndex||99}`),this.style.setProperty("--z-panel",`${this.zIndex?this.zIndex+1:99}`),this.open||setTimeout(()=>{this.setAttribute("hidden","hidden")},500)}render(){const o=this.showHeader?l`
+			<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`
 			<div class="overlay" style="z-index: ${this.zIndex}" @click=${this.handleClosePanel}></div>
@@ -435,7 +433,7 @@
 				class="panel"
 				role="dialog"
 				aria-modal="true"
-				aria-labelledby="panel-title"
+				aria-labelledby="${this.labelDialog}"
 				style="z-index: ${this.zIndex+1}"
 				tabindex="-1"
 			>
@@ -481,7 +479,7 @@
 						`:null}
 				</div>
 			</div>
-		`}};u.styles=v`
+		`}};p.styles=v`
 		:host {
 			--z-overlay: 99;
 			--z-panel: 100;
@@ -579,6 +577,18 @@
 			.return-btn {
 				margin-right: 8px;
 			}
+
+			&.detail-view-header {
+				display: none;
+			}
+		}
+
+		.detail-view {
+			.header {
+				&.detail-view-header {
+					display: flex;
+				}
+			}
 		}
 
 		.panel:focus-visible,
@@ -670,7 +680,7 @@
 		.detail-content {
 			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([a({type:Boolean,reflect:!0})],u.prototype,"open",2);y([a({type:Boolean,reflect:!0})],u.prototype,"showHeader",2);y([a({type:Boolean,reflect:!0})],u.prototype,"showFooter",2);y([a({type:Boolean,reflect:!0})],u.prototype,"showHeaderStartIcon",2);y([a({type:String,reflect:!0})],u.prototype,"headerTitle",2);y([a({type:String,reflect:!0})],u.prototype,"headerTitleClassName",2);y([a({type:String,reflect:!0})],u.prototype,"closeButtonLabel",2);y([a({type:String,reflect:!0})],u.prototype,"firstButtonLabel",2);y([a({type:String,reflect:!0})],u.prototype,"firstButtonVariant",2);y([a({type:Object,reflect:!0})],u.prototype,"firstButtonProps",2);y([a({type:Boolean,reflect:!0})],u.prototype,"onFirstButtonClickClose",2);y([a({type:String,reflect:!0})],u.prototype,"secondButtonLabel",2);y([a({type:String,reflect:!0})],u.prototype,"secondButtonVariant",2);y([a({type:Object,reflect:!0})],u.prototype,"secondButtonProps",2);y([a({type:Boolean,reflect:!0})],u.prototype,"onSecondButtonClickClose",2);y([a({type:Boolean,reflect:!0})],u.prototype,"disablePortal",2);y([a({type:Number,reflect:!0})],u.prototype,"zIndex",2);y([a({type:Boolean,reflect:!0})],u.prototype,"initialized",2);y([a({type:Boolean})],u.prototype,"showDetail",2);y([a({type:Boolean})],u.prototype,"isHidingDetail",2);u=y([b("o-side-panel")],u);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{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}get name(){return this.getAttribute("name")??""}set name(o){this.setAttribute("name",o)}get form(){return this[Ut].form}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.`)}}render(){return this.href?this.renderLink():this.renderButton()}renderIcon(o){const t=o==="start"?this.startIconModel:this.endIconModel;if(!t)return d;const e=F[t].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return l`<span class="${o==="start"?"icon-start":"icon-end"}">${_(e)}</span>`}renderButton(){const o=this.text||this.textsecond;return l`
+	`;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})],p.prototype,"open",2);b([a({type:Boolean,reflect:!0})],p.prototype,"showHeader",2);b([a({type:Boolean,reflect:!0})],p.prototype,"showFooter",2);b([a({type:Boolean,reflect:!0})],p.prototype,"showHeaderStartIcon",2);b([a({type:String,reflect:!0})],p.prototype,"headerTitle",2);b([a({type:String,reflect:!0})],p.prototype,"headerTitleClassName",2);b([a({type:String,reflect:!0})],p.prototype,"labelDialog",2);b([a({type:String,reflect:!0})],p.prototype,"closeButtonLabel",2);b([a({type:String,reflect:!0})],p.prototype,"goBackButtonLabel",2);b([a({type:String,reflect:!0})],p.prototype,"firstButtonLabel",2);b([a({type:String,reflect:!0})],p.prototype,"firstButtonVariant",2);b([a({type:Object,reflect:!0})],p.prototype,"firstButtonProps",2);b([a({type:Boolean,reflect:!0})],p.prototype,"onFirstButtonClickClose",2);b([a({type:String,reflect:!0})],p.prototype,"secondButtonLabel",2);b([a({type:String,reflect:!0})],p.prototype,"secondButtonVariant",2);b([a({type:Object,reflect:!0})],p.prototype,"secondButtonProps",2);b([a({type:Boolean,reflect:!0})],p.prototype,"onSecondButtonClickClose",2);b([a({type:Boolean,reflect:!0})],p.prototype,"disablePortal",2);b([a({type:Number,reflect:!0})],p.prototype,"zIndex",2);b([a({type:Boolean,reflect:!0})],p.prototype,"initialized",2);b([a({type:Boolean})],p.prototype,"showDetail",2);b([a({type:Boolean})],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(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}get name(){return this.getAttribute("name")??""}set name(o){this.setAttribute("name",o)}get form(){return this[Ut].form}handleClick(o){if(!(o instanceof KeyboardEvent&&!["Enter"," "].includes(o.key))&&this.panelTarget){const t=document.getElementById(this.panelTarget);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(){return this.href?this.renderLink():this.renderButton()}renderIcon(o){const t=o==="start"?this.startIconModel:this.endIconModel;if(!t)return d;const e=F[t].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return l`<span class="${o==="start"?"icon-start":"icon-end"}">${_(e)}</span>`}renderButton(){const o=this.text||this.textsecond;return l`
       <button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick} @keydown=${this.handleClick}>
           ${this.startIcon?this.renderIcon("start"):d}
           ${o?l`
@@ -698,7 +708,7 @@
               `:l`<slot></slot>`}
           ${this.endIcon?this.renderIcon("end"):d}
       </a>
-    `}};Ue(g);g.formAssociated=!0;g.styles=v`
+    `}};Ue(y);y.formAssociated=!0;y.styles=v`
     :host {
       --button-border: transparent;
       --badge-outer-width: 19px;
@@ -899,7 +909,7 @@
       transform: translateX(4px);
     }
     //End icon movment on hover
-  `;x([a()],g.prototype,"type",2);x([a()],g.prototype,"value",2);x([a({type:String,reflect:!0})],g.prototype,"variant",2);x([a({type:String})],g.prototype,"text",2);x([a({type:String})],g.prototype,"textsecond",2);x([a({type:Boolean,reflect:!0})],g.prototype,"fullwidth",2);x([a({type:Boolean,reflect:!0})],g.prototype,"disabled",2);x([a({type:String})],g.prototype,"startIconModel",2);x([a({type:String})],g.prototype,"endIconModel",2);x([a({type:Boolean,reflect:!0,attribute:"starticon"})],g.prototype,"startIcon",2);x([a({type:Boolean,reflect:!0,attribute:"endicon"})],g.prototype,"endIcon",2);x([a({type:String,attribute:"paneltarget"})],g.prototype,"panelTarget",2);x([a({type:String})],g.prototype,"href",2);x([a({type:String})],g.prototype,"target",2);x([a({type:Boolean,reflect:!0})],g.prototype,"underlined",2);x([a({type:Boolean,reflect:!0})],g.prototype,"withbadge",2);g=x([b("o-button")],g);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{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",{detail:{status:this.status},bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","button"),this.setAttribute("aria-pressed",String(this.status==="filled"))}firstUpdated(){this.addEventListener("click",this.toggleStatus),this.addEventListener("keydown",this.handleKeydown)}handleKeydown(o){(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),this.toggleStatus())}render(){const o=F.wishlist.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return l`
+  `;x([a()],y.prototype,"type",2);x([a()],y.prototype,"value",2);x([a({type:String,reflect:!0})],y.prototype,"variant",2);x([a({type:String})],y.prototype,"text",2);x([a({type:String})],y.prototype,"textsecond",2);x([a({type:Boolean,reflect:!0})],y.prototype,"fullwidth",2);x([a({type:Boolean,reflect:!0})],y.prototype,"disabled",2);x([a({type:String})],y.prototype,"startIconModel",2);x([a({type:String})],y.prototype,"endIconModel",2);x([a({type:Boolean,reflect:!0,attribute:"starticon"})],y.prototype,"startIcon",2);x([a({type:Boolean,reflect:!0,attribute:"endicon"})],y.prototype,"endIcon",2);x([a({type:String,attribute:"paneltarget"})],y.prototype,"panelTarget",2);x([a({type:String})],y.prototype,"href",2);x([a({type:String})],y.prototype,"target",2);x([a({type:Boolean,reflect:!0})],y.prototype,"underlined",2);x([a({type:Boolean,reflect:!0})],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 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",{detail:{status:this.status},bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","button"),this.setAttribute("aria-pressed",String(this.status==="filled"))}firstUpdated(){this.addEventListener("click",this.toggleStatus),this.addEventListener("keydown",this.handleKeydown)}handleKeydown(o){(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),this.toggleStatus())}render(){const o=F.wishlist.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return l`
 			<button type="button" aria-describedby="${this.ariaDescribedBy}" class="wishlist-button">
 				<span class="sr-only">${this.label}</span>
 				${_(o)}
@@ -968,7 +978,7 @@
 			width: 0.1rem !important;
 			white-space: nowrap !important;
 		}
-	`;Et([a({type:String,reflect:!0})],st.prototype,"status",2);Et([a({type:String,reflect:!0})],st.prototype,"ariaDescribedBy",2);Et([a({type:String,reflect:!0})],st.prototype,"label",2);st=Et([b("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{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()}render(){const o=this.href||"#";return l`
+	`;Et([a({type:String,reflect:!0})],st.prototype,"status",2);Et([a({type:String,reflect:!0})],st.prototype,"ariaDescribedBy",2);Et([a({type:String,reflect:!0})],st.prototype,"label",2);st=Et([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 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()}render(){const o=this.href||"#";return l`
             <a 
                 href="${o}" 
                 target="${S(this.target||void 0)}"
@@ -1081,7 +1091,7 @@
             height: 1px;
         }
         /* End of underline effect */
-    `;it([a({type:String})],U.prototype,"href",2);it([a({type:String})],U.prototype,"target",2);it([a({type:String,reflect:!0})],U.prototype,"template",2);it([a({type:Boolean,reflect:!0})],U.prototype,"inverse",2);it([a({type:Boolean,reflect:!0})],U.prototype,"endIcon",2);it([a({type:Boolean,reflect:!0})],U.prototype,"reverseEndIcon",2);U=it([b("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{constructor(){super(...arguments),this.rating=0}getStarKeys(){const o=[];for(let t=0;t<5;t++){const e=this.rating-t;let r;e>=1?r=100:e<=0?r=0:r=Math.round(e*100/25)*25,o.push(`star-${r}`)}return o}render(){const o=this.getStarKeys();return l`
+    `;it([a({type:String})],U.prototype,"href",2);it([a({type:String})],U.prototype,"target",2);it([a({type:String,reflect:!0})],U.prototype,"template",2);it([a({type:Boolean,reflect:!0})],U.prototype,"inverse",2);it([a({type:Boolean,reflect:!0})],U.prototype,"endIcon",2);it([a({type:Boolean,reflect:!0})],U.prototype,"reverseEndIcon",2);U=it([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 u{constructor(){super(...arguments),this.rating=0}getStarKeys(){const o=[];for(let t=0;t<5;t++){const e=this.rating-t;let r;e>=1?r=100:e<=0?r=0:r=Math.round(e*100/25)*25,o.push(`star-${r}`)}return o}render(){const o=this.getStarKeys();return l`
 			<div class="rating">
 			<div class="stars">
 				${o.map(t=>l`<span class="star">${_(F[t]??"")}</span>`)}
@@ -1121,7 +1131,7 @@
 			text-decoration: underline;
 			cursor: pointer;
 		}
-	`;Lt([a({type:Number})],at.prototype,"rating",2);Lt([a({type:String})],at.prototype,"reviewCount",2);Lt([a({type:String})],at.prototype,"href",2);at=Lt([b("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{constructor(){super(...arguments),this.thumbnails=[],this.activeIndex=0,this.disabledIndexes=[],this.maxWidth="100%",this.altressource="visual",this.focusedIndex=0,this.playerIconTemplate=l`
+	`;Lt([a({type:Number})],at.prototype,"rating",2);Lt([a({type:String})],at.prototype,"reviewCount",2);Lt([a({type:String})],at.prototype,"href",2);at=Lt([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 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
       icon="playerv"
       size="xsmall"
@@ -1255,7 +1265,7 @@
       height: 0;
       width: 0;
     }
-  `;X([a({type:Array})],D.prototype,"thumbnails",2);X([a({type:Number})],D.prototype,"activeIndex",2);X([a({type:Array})],D.prototype,"disabledIndexes",2);X([a({type:String})],D.prototype,"maxWidth",2);X([a({type:String})],D.prototype,"altressource",2);X([a({type:Object})],D.prototype,"swiperInstance",2);X([et()],D.prototype,"focusedIndex",2);D=X([b("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{constructor(){super(...arguments),this.type="",this.bgstyle="background-white"}render(){return l`
+  `;X([a({type:Array})],D.prototype,"thumbnails",2);X([a({type:Number})],D.prototype,"activeIndex",2);X([a({type:Array})],D.prototype,"disabledIndexes",2);X([a({type:String})],D.prototype,"maxWidth",2);X([a({type:String})],D.prototype,"altressource",2);X([a({type:Object})],D.prototype,"swiperInstance",2);X([et()],D.prototype,"focusedIndex",2);D=X([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 u{constructor(){super(...arguments),this.type="",this.bgstyle="background-white"}render(){return l`
       <span class="tag ${this.bgstyle}"><slot></slot></span>
     `}};ft.styles=v`
     .tag {
@@ -1314,7 +1324,7 @@
       }
     }
 
-  `;Wt([a({type:String,reflect:!0})],ft.prototype,"type",2);Wt([a({type:String,reflect:!0})],ft.prototype,"bgstyle",2);ft=Wt([b("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{constructor(){super(...arguments),this.type="top",this.text=""}render(){return l`
+  `;Wt([a({type:String,reflect:!0})],ft.prototype,"type",2);Wt([a({type:String,reflect:!0})],ft.prototype,"bgstyle",2);ft=Wt([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 u{constructor(){super(...arguments),this.type="top",this.text=""}render(){return l`
       <div class="tooltip">
         <span class="tooltiptext">${this.text}</span>
         <slot></slot>
@@ -1411,7 +1421,7 @@
     border-color: transparent var(--color-alpha-dark-strongest) transparent transparent;
   }
       
-  `;Gt([a({type:String,reflect:!0})],bt.prototype,"type",2);Gt([a({type:String,reflect:!0})],bt.prototype,"text",2);bt=Gt([b("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{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)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){document.removeEventListener("click",this._handleOutsideClick),super.disconnectedCallback()}toggle(){var o;if(!this.disabled){if(this.open=!this.open,this.activeIndex=this.open?this.options.findIndex(t=>t.value===this.value):-1,this.open&&this.width==="auto"){const t=(o=this.renderRoot)==null?void 0:o.querySelector("button");t&&(this.menuWidth=`${t.getBoundingClientRect().width}px`)}this.open&&this.updateComplete.then(()=>{this._focusActiveOption()})}}_focusActiveOption(){var t;const o=(t=this.renderRoot)==null?void 0:t.querySelector(`#option-${this.activeIndex}`);o==null||o.focus()}selectOption(o){this.value=o.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,url:o.url}})),this.open=!1,this.activeIndex=-1}handleKeydown(o){if(this.disabled){o.preventDefault();return}if(!this.open){(o.key==="ArrowDown"||o.key==="ArrowUp")&&(o.preventDefault(),this.open=!0,this.activeIndex=this.options.findIndex(t=>t.value===this.value),this.updateComplete.then(()=>this._focusActiveOption()));return}switch(o.key){case"ArrowDown":o.preventDefault(),this.activeIndex=(this.activeIndex+1)%this.options.length,this.updateComplete.then(()=>this._focusActiveOption());break;case"ArrowUp":o.preventDefault(),this.activeIndex=(this.activeIndex-1+this.options.length)%this.options.length,this.updateComplete.then(()=>this._focusActiveOption());break;case"Home":o.preventDefault(),this.activeIndex=0,this.updateComplete.then(()=>this._focusActiveOption());break;case"End":o.preventDefault(),this.activeIndex=this.options.length-1,this.updateComplete.then(()=>this._focusActiveOption());break;case"Enter":o.preventDefault(),this.activeIndex>=0&&this.selectOption(this.options[this.activeIndex]);break;case"Escape":o.preventDefault(),this.open=!1,this.activeIndex=-1;break}}updated(o){this.options.length>0&&(this.options.some(e=>e.value===this.value)||(this.value=this.options[0].value))}render(){const o=F.checkstroke.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"'),t=this.options.find(e=>e.value===this.value);return l`
+  `;Gt([a({type:String,reflect:!0})],bt.prototype,"type",2);Gt([a({type:String,reflect:!0})],bt.prototype,"text",2);bt=Gt([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 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)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){document.removeEventListener("click",this._handleOutsideClick),super.disconnectedCallback()}toggle(){var o;if(!this.disabled){if(this.open=!this.open,this.activeIndex=this.open?this.options.findIndex(t=>t.value===this.value):-1,this.open&&this.width==="auto"){const t=(o=this.renderRoot)==null?void 0:o.querySelector("button");t&&(this.menuWidth=`${t.getBoundingClientRect().width}px`)}this.open&&this.updateComplete.then(()=>{this._focusActiveOption()})}}_focusActiveOption(){var t;const o=(t=this.renderRoot)==null?void 0:t.querySelector(`#option-${this.activeIndex}`);o==null||o.focus()}selectOption(o){this.value=o.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,url:o.url}})),this.open=!1,this.activeIndex=-1}handleKeydown(o){if(this.disabled){o.preventDefault();return}if(!this.open){(o.key==="ArrowDown"||o.key==="ArrowUp")&&(o.preventDefault(),this.open=!0,this.activeIndex=this.options.findIndex(t=>t.value===this.value),this.updateComplete.then(()=>this._focusActiveOption()));return}switch(o.key){case"ArrowDown":o.preventDefault(),this.activeIndex=(this.activeIndex+1)%this.options.length,this.updateComplete.then(()=>this._focusActiveOption());break;case"ArrowUp":o.preventDefault(),this.activeIndex=(this.activeIndex-1+this.options.length)%this.options.length,this.updateComplete.then(()=>this._focusActiveOption());break;case"Home":o.preventDefault(),this.activeIndex=0,this.updateComplete.then(()=>this._focusActiveOption());break;case"End":o.preventDefault(),this.activeIndex=this.options.length-1,this.updateComplete.then(()=>this._focusActiveOption());break;case"Enter":o.preventDefault(),this.activeIndex>=0&&this.selectOption(this.options[this.activeIndex]);break;case"Escape":o.preventDefault(),this.open=!1,this.activeIndex=-1;break}}updated(o){this.options.length>0&&(this.options.some(e=>e.value===this.value)||(this.value=this.options[0].value))}render(){const o=F.checkstroke.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"'),t=this.options.find(e=>e.value===this.value);return l`
       <button
         role="combobox"
         aria-haspopup="listbox"
@@ -1598,7 +1608,7 @@
 		input[type="hidden"] {
 			display: none;
 		}
-	`;V([a({type:Array,reflect:!0})],z.prototype,"options",2);V([a({type:String,reflect:!0})],z.prototype,"value",2);V([a({type:String,reflect:!0})],z.prototype,"name",2);V([a({type:Boolean,reflect:!0})],z.prototype,"disabled",2);V([a({type:String,reflect:!0})],z.prototype,"width",2);V([et()],z.prototype,"open",2);V([et()],z.prototype,"activeIndex",2);V([et()],z.prototype,"menuWidth",2);z=V([b("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{render(){return l` <span class="dots"></span> `}};Tt.styles=v`
+	`;V([a({type:Array,reflect:!0})],z.prototype,"options",2);V([a({type:String,reflect:!0})],z.prototype,"value",2);V([a({type:String,reflect:!0})],z.prototype,"name",2);V([a({type:Boolean,reflect:!0})],z.prototype,"disabled",2);V([a({type:String,reflect:!0})],z.prototype,"width",2);V([et()],z.prototype,"open",2);V([et()],z.prototype,"activeIndex",2);V([et()],z.prototype,"menuWidth",2);z=V([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 u{render(){return l` <span class="dots"></span> `}};Tt.styles=v`
     :host {
       display: flex;
       align-items: center;
@@ -1649,7 +1659,7 @@
         background-color: var(--color-container-action-primary-pressed);
       }
     }
-  `;Tt=Qo([b("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{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)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){document.removeEventListener("click",this._handleOutsideClick),super.disconnectedCallback()}toggle(){var o;if(!this.disabled){if(this.open=!this.open,this.activeIndex=this.open?this.options.findIndex(t=>t.value===this.value):-1,this.open&&this.width==="auto"){const t=(o=this.renderRoot)==null?void 0:o.querySelector("button");t&&(this.menuWidth=`${t.getBoundingClientRect().width}px`)}this.open&&this.updateComplete.then(()=>this._focusActiveOption())}}_focusActiveOption(){var t;const o=(t=this.renderRoot)==null?void 0:t.querySelector(`#option-${this.activeIndex}`);o==null||o.focus()}selectOption(o){this.value=o.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,url:o.url}})),this.open=!1,this.activeIndex=-1}handleKeydown(o){if(this.disabled){o.preventDefault();return}if(!this.open){(o.key==="ArrowDown"||o.key==="ArrowUp")&&(o.preventDefault(),this.open=!0,this.activeIndex=this.options.findIndex(t=>t.value===this.value),this.updateComplete.then(()=>this._focusActiveOption()));return}switch(o.key){case"ArrowDown":o.preventDefault(),this.activeIndex=(this.activeIndex+1)%this.options.length,this.updateComplete.then(()=>this._focusActiveOption());break;case"ArrowUp":o.preventDefault(),this.activeIndex=(this.activeIndex-1+this.options.length)%this.options.length,this.updateComplete.then(()=>this._focusActiveOption());break;case"Home":o.preventDefault(),this.activeIndex=0,this.updateComplete.then(()=>this._focusActiveOption());break;case"End":o.preventDefault(),this.activeIndex=this.options.length-1,this.updateComplete.then(()=>this._focusActiveOption());break;case"Enter":o.preventDefault(),this.activeIndex>=0&&this.selectOption(this.options[this.activeIndex]);break;case"Escape":o.preventDefault(),this.open=!1,this.activeIndex=-1;break}}updated(){this.options.length>0&&(this.options.some(t=>t.value===this.value)||(this.value=this.options[0].value))}render(){const o=F.checkstroke.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"'),t=this.options.find(e=>e.value===this.value);return l`
+  `;Tt=Qo([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 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)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){document.removeEventListener("click",this._handleOutsideClick),super.disconnectedCallback()}toggle(){var o;if(!this.disabled){if(this.open=!this.open,this.activeIndex=this.open?this.options.findIndex(t=>t.value===this.value):-1,this.open&&this.width==="auto"){const t=(o=this.renderRoot)==null?void 0:o.querySelector("button");t&&(this.menuWidth=`${t.getBoundingClientRect().width}px`)}this.open&&this.updateComplete.then(()=>this._focusActiveOption())}}_focusActiveOption(){var t;const o=(t=this.renderRoot)==null?void 0:t.querySelector(`#option-${this.activeIndex}`);o==null||o.focus()}selectOption(o){this.value=o.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,url:o.url}})),this.open=!1,this.activeIndex=-1}handleKeydown(o){if(this.disabled){o.preventDefault();return}if(!this.open){(o.key==="ArrowDown"||o.key==="ArrowUp")&&(o.preventDefault(),this.open=!0,this.activeIndex=this.options.findIndex(t=>t.value===this.value),this.updateComplete.then(()=>this._focusActiveOption()));return}switch(o.key){case"ArrowDown":o.preventDefault(),this.activeIndex=(this.activeIndex+1)%this.options.length,this.updateComplete.then(()=>this._focusActiveOption());break;case"ArrowUp":o.preventDefault(),this.activeIndex=(this.activeIndex-1+this.options.length)%this.options.length,this.updateComplete.then(()=>this._focusActiveOption());break;case"Home":o.preventDefault(),this.activeIndex=0,this.updateComplete.then(()=>this._focusActiveOption());break;case"End":o.preventDefault(),this.activeIndex=this.options.length-1,this.updateComplete.then(()=>this._focusActiveOption());break;case"Enter":o.preventDefault(),this.activeIndex>=0&&this.selectOption(this.options[this.activeIndex]);break;case"Escape":o.preventDefault(),this.open=!1,this.activeIndex=-1;break}}updated(){this.options.length>0&&(this.options.some(t=>t.value===this.value)||(this.value=this.options[0].value))}render(){const o=F.checkstroke.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"'),t=this.options.find(e=>e.value===this.value);return l`
 			<button
 				role="combobox"
 				aria-haspopup="listbox"
@@ -1886,11 +1896,11 @@
 		input[type="hidden"] {
 			display: none;
 		}
-	`;T([a({type:Array,reflect:!0})],E.prototype,"options",2);T([a({type:String,reflect:!0})],E.prototype,"value",2);T([a({type:String,reflect:!0})],E.prototype,"name",2);T([a({type:String,reflect:!0})],E.prototype,"additionaltext",2);T([a({type:Boolean,reflect:!0})],E.prototype,"disabled",2);T([a({type:String,reflect:!0})],E.prototype,"width",2);T([et()],E.prototype,"open",2);T([et()],E.prototype,"activeIndex",2);T([et()],E.prototype,"menuWidth",2);E=T([b("o-dropdown-variant")],E);/**
+	`;T([a({type:Array,reflect:!0})],E.prototype,"options",2);T([a({type:String,reflect:!0})],E.prototype,"value",2);T([a({type:String,reflect:!0})],E.prototype,"name",2);T([a({type:String,reflect:!0})],E.prototype,"additionaltext",2);T([a({type:Boolean,reflect:!0})],E.prototype,"disabled",2);T([a({type:String,reflect:!0})],E.prototype,"width",2);T([et()],E.prototype,"open",2);T([et()],E.prototype,"activeIndex",2);T([et()],E.prototype,"menuWidth",2);E=T([g("o-dropdown-variant")],E);/**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const xe="important",ei=" !"+xe,oi=Zt(class extends Kt{constructor(o){var t;if(super(o),o.type!==qt.ATTRIBUTE||o.name!=="style"||((t=o.strings)==null?void 0:t.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(o){return Object.keys(o).reduce((t,e)=>{const r=o[e];return r==null?t:t+`${e=e.includes("-")?e:e.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${r};`},"")}update(o,[t]){const{style:e}=o.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(t)),this.render(t);for(const r of this.ft)t[r]==null&&(this.ft.delete(r),r.includes("-")?e.removeProperty(r):e[r]=null);for(const r in t){const i=t[r];if(i!=null){this.ft.add(r);const n=typeof i=="string"&&i.endsWith(ei);r.includes("-")||n?e.setProperty(r,n?i.slice(0,-11):i,n?xe:""):e[r]=i}}return G}});var ii=Object.defineProperty,ri=Object.getOwnPropertyDescriptor,Xt=(o,t,e,r)=>{for(var i=r>1?void 0:r?ri(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&&ii(t,e,i),i};let gt=class extends p{constructor(){super(...arguments),this.option={},this.imageSize=64}render(){const o=this.option.clickable,t={width:`${this.imageSize}px`,height:`${this.imageSize}px`},e=l`
+ */const xe="important",ei=" !"+xe,oi=Zt(class extends Kt{constructor(o){var t;if(super(o),o.type!==qt.ATTRIBUTE||o.name!=="style"||((t=o.strings)==null?void 0:t.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(o){return Object.keys(o).reduce((t,e)=>{const r=o[e];return r==null?t:t+`${e=e.includes("-")?e:e.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${r};`},"")}update(o,[t]){const{style:e}=o.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(t)),this.render(t);for(const r of this.ft)t[r]==null&&(this.ft.delete(r),r.includes("-")?e.removeProperty(r):e[r]=null);for(const r in t){const i=t[r];if(i!=null){this.ft.add(r);const n=typeof i=="string"&&i.endsWith(ei);r.includes("-")||n?e.setProperty(r,n?i.slice(0,-11):i,n?xe:""):e[r]=i}}return G}});var ii=Object.defineProperty,ri=Object.getOwnPropertyDescriptor,Xt=(o,t,e,r)=>{for(var i=r>1?void 0:r?ri(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&&ii(t,e,i),i};let gt=class extends u{constructor(){super(...arguments),this.option={},this.imageSize=64}render(){const o=this.option.clickable,t={width:`${this.imageSize}px`,height:`${this.imageSize}px`},e=l`
       ${this.option.imgurl?l`<img src="${this.option.imgurl}" alt="${S(this.option.title)}" aria-hidden="true" style=${oi(t)} />`:""}
       <div class="m-reassurance-content">
         <h3 class="a-reassurance-text">${S(this.option.title)}</h3>
@@ -1977,7 +1987,7 @@
         overflow: hidden;
       }
     }
-  `;Xt([a({type:Object,reflect:!0})],gt.prototype,"option",2);Xt([a({type:Number,reflect:!0})],gt.prototype,"imageSize",2);gt=Xt([b("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);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}handleClick(o){this.selected||(this.selected=!0);const t={selected:this.selected},e=new CustomEvent("selected",{detail:t,bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e),e.defaultPrevented&&o.preventDefault(),this.selected=t.selected}render(){const o=this.text;return this.link?l`
+  `;Xt([a({type:Object,reflect:!0})],gt.prototype,"option",2);Xt([a({type:Number,reflect:!0})],gt.prototype,"imageSize",2);gt=Xt([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(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}handleClick(o){this.selected||(this.selected=!0);const t={selected:this.selected},e=new CustomEvent("selected",{detail:t,bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e),e.defaultPrevented&&o.preventDefault(),this.selected=t.selected}render(){const o=this.text;return this.link?l`
       <a href="${this.link}" class="o-chip" tabindex="${this.inactive?"-1":"0"}" aria-hidden="${this.inactive?"true":"false"}">
         ${o?this.text:l`<slot></slot>`}
       </a>
@@ -2075,7 +2085,7 @@
       display: inline-flex;
       align-items: center;
     }
-  `;q([a({type:String,reflect:!0})],L.prototype,"link",2);q([a({reflect:!0})],L.prototype,"name",2);q([a({reflect:!0})],L.prototype,"value",2);q([a({type:String})],L.prototype,"text",2);q([a({type:String,reflect:!0})],L.prototype,"size",2);q([a({type:Boolean,reflect:!0})],L.prototype,"selected",2);q([a({type:Boolean,reflect:!0})],L.prototype,"fullwidth",2);q([a({type:Boolean,reflect:!0})],L.prototype,"inactive",2);L=q([b("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{constructor(){super(),this.name="",this.value="",this.addEventListener("selected",this.onChipSelected)}onChipSelected(o){const t=o.target instanceof L?o.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(e=>{e!==t&&(e.selected=!1)}))}render(){return l`
+  `;q([a({type:String,reflect:!0})],L.prototype,"link",2);q([a({reflect:!0})],L.prototype,"name",2);q([a({reflect:!0})],L.prototype,"value",2);q([a({type:String})],L.prototype,"text",2);q([a({type:String,reflect:!0})],L.prototype,"size",2);q([a({type:Boolean,reflect:!0})],L.prototype,"selected",2);q([a({type:Boolean,reflect:!0})],L.prototype,"fullwidth",2);q([a({type:Boolean,reflect:!0})],L.prototype,"inactive",2);L=q([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 u{constructor(){super(),this.name="",this.value="",this.addEventListener("selected",this.onChipSelected)}onChipSelected(o){const t=o.target instanceof L?o.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(e=>{e!==t&&(e.selected=!1)}))}render(){return l`
       <slot></slot>
     `}};yt.styles=v`
     :host {
@@ -2084,7 +2094,7 @@
       flex-wrap: wrap;
       gap: var(--spacing-s);
     }
-  `;Jt([a({reflect:!0})],yt.prototype,"name",2);Jt([a({reflect:!0})],yt.prototype,"value",2);yt=Jt([b("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);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"}handleClick(o){if(o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" ")return;this.selected=!this.selected;const t={selected:this.selected},e=new CustomEvent("selected",{detail:t,bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e),e.defaultPrevented&&o.preventDefault(),this.selected=t.selected}crossIcon(){const o=F[this.crossIconName].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"').replace(/stroke=[#"'a-z1-9]*/gi,"");return l`<span class="cross-icon">${_(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)}render(){const o=this.text;return l`${this.type==="link"?l`
+  `;Jt([a({reflect:!0})],yt.prototype,"name",2);Jt([a({reflect:!0})],yt.prototype,"value",2);yt=Jt([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(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"}handleClick(o){if(o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" ")return;this.selected=!this.selected;const t={selected:this.selected},e=new CustomEvent("selected",{detail:t,bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e),e.defaultPrevented&&o.preventDefault(),this.selected=t.selected}crossIcon(){const o=F[this.crossIconName].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"').replace(/stroke=[#"'a-z1-9]*/gi,"");return l`<span class="cross-icon">${_(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)}render(){const o=this.text;return l`${this.type==="link"?l`
       <a role="button" tabindex="0" class="button" href=${this.href} ?disabled=${this.disabled} @click=${this.handleClick} @keydown=${this.handleClick}
         aria-label=${this.ariaLabel} aria-pressed=${this.selected}>
         ${o?l`
@@ -2229,7 +2239,7 @@
         stroke-linecap: round;
       }
     }
-  `;M([a({reflect:!0})],P.prototype,"name",2);M([a({reflect:!0})],P.prototype,"value",2);M([a({type:String,reflect:!0})],P.prototype,"type",2);M([a({type:String,reflect:!0})],P.prototype,"href",2);M([a({type:String,reflect:!0,attribute:"data-href"})],P.prototype,"dataHref",2);M([a({type:String})],P.prototype,"text",2);M([a({type:Boolean,reflect:!0})],P.prototype,"selected",2);M([a({type:Boolean,reflect:!0})],P.prototype,"disabled",2);M([a({type:Boolean,reflect:!0})],P.prototype,"fullwidth",2);P=M([b("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{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=""}onClick(){typeof this.onClickTile=="function"&&this.onClickTile()}get icons(){return this.type==="chevron"?l`
+  `;M([a({reflect:!0})],P.prototype,"name",2);M([a({reflect:!0})],P.prototype,"value",2);M([a({type:String,reflect:!0})],P.prototype,"type",2);M([a({type:String,reflect:!0})],P.prototype,"href",2);M([a({type:String,reflect:!0,attribute:"data-href"})],P.prototype,"dataHref",2);M([a({type:String})],P.prototype,"text",2);M([a({type:Boolean,reflect:!0})],P.prototype,"selected",2);M([a({type:Boolean,reflect:!0})],P.prototype,"disabled",2);M([a({type:Boolean,reflect:!0})],P.prototype,"fullwidth",2);P=M([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 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=""}onClick(){typeof this.onClickTile=="function"&&this.onClickTile()}get icons(){return this.type==="chevron"?l`
                 <o-icon-button
                     @click=${this.onClick}
                     icon="chevronRight"
@@ -2361,7 +2371,7 @@
         .fullpointer {
             cursor: pointer;
         }
-  `;let C=te;j([a({type:String})],C.prototype,"type");j([a({type:String})],C.prototype,"titleProduct");j([a({type:String})],C.prototype,"volume");j([a({type:String})],C.prototype,"perLiter");j([a({type:String})],C.prototype,"mainPrice");j([a({type:String})],C.prototype,"imageUrl");j([a({type:String})],C.prototype,"altImage");j([a({type:Boolean})],C.prototype,"fullwidth");j([a({type:String})],C.prototype,"tagText");j([a({type:Function})],C.prototype,"onClickTile");customElements.define("mini-tile",C);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{constructor(){super(...arguments),this.variant="cart",this.text=""}render(){return l`
+  `;let C=te;j([a({type:String})],C.prototype,"type");j([a({type:String})],C.prototype,"titleProduct");j([a({type:String})],C.prototype,"volume");j([a({type:String})],C.prototype,"perLiter");j([a({type:String})],C.prototype,"mainPrice");j([a({type:String})],C.prototype,"imageUrl");j([a({type:String})],C.prototype,"altImage");j([a({type:Boolean})],C.prototype,"fullwidth");j([a({type:String})],C.prototype,"tagText");j([a({type:Function})],C.prototype,"onClickTile");customElements.define("mini-tile",C);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 u{constructor(){super(...arguments),this.variant="cart",this.text=""}render(){return l`
       <span class="badge">
         ${this.text?this.text:l`<slot></slot>`}
       </span>
@@ -2399,7 +2409,7 @@
       color: var(--text-color);
     }
 
-  `;Qt([a({type:String,reflect:!0})],mt.prototype,"variant",2);Qt([a({type:String})],mt.prototype,"text",2);mt=Qt([b("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{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}attributeChangedCallback(o,t,e){super.attributeChangedCallback(o,t,e),o=="verticaloffset"&&this.style.setProperty("--vertical-offset",e+"px"),o=="horizontaloffset"&&this.style.setProperty("--horizontal-offset",e+"px"),o=="animationduration"&&this.style.setProperty("--animation-duration",e+"ms")}selfCloseAfterDelay(){var o=this;setTimeout(function(){o.animated=!0,o.selfClose()},this.lifeduration)}selfClose(){var o=this;setTimeout(function(){o.remove()},this.animationduration+200)}connectedCallback(){var o=this;super.connectedCallback(),setTimeout(()=>{o.animated=!1,this.selfCloseAfterDelay()},600)}firstUpdated(){var r,i;var o=this;const t=(r=this.renderRoot)==null?void 0:r.querySelector("o-icon-button"),e=(i=this.renderRoot)==null?void 0:i.querySelector(".o-toast-text");if(e!=null){const n=window.getComputedStyle(e),s=parseInt(n.getPropertyValue("line-height").replace("px","")),h=parseInt(n.getPropertyValue("height").replace("px",""));!isNaN(s)&&!isNaN(h)&&h>s&&(this.multiline=!0)}t!=null&&t.addEventListener("click",function(){o.remove()})}render(){const t=wo[this.icon].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"').replace(/<path\b/g,'<path part="icon-path"').replace(/<g\b/g,'<g part="icon-group"').replace(/<circle\b/g,'<circle part="icon-circle"');return l`
+  `;Qt([a({type:String,reflect:!0})],mt.prototype,"variant",2);Qt([a({type:String})],mt.prototype,"text",2);mt=Qt([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 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}attributeChangedCallback(o,t,e){super.attributeChangedCallback(o,t,e),o=="verticaloffset"&&this.style.setProperty("--vertical-offset",e+"px"),o=="horizontaloffset"&&this.style.setProperty("--horizontal-offset",e+"px"),o=="animationduration"&&this.style.setProperty("--animation-duration",e+"ms")}selfCloseAfterDelay(){var o=this;setTimeout(function(){o.animated=!0,o.selfClose()},this.lifeduration)}selfClose(){var o=this;setTimeout(function(){o.remove()},this.animationduration+200)}connectedCallback(){var o=this;super.connectedCallback(),setTimeout(()=>{o.animated=!1,this.selfCloseAfterDelay()},600)}firstUpdated(){var r,i;var o=this;const t=(r=this.renderRoot)==null?void 0:r.querySelector("o-icon-button"),e=(i=this.renderRoot)==null?void 0:i.querySelector(".o-toast-text");if(e!=null){const n=window.getComputedStyle(e),s=parseInt(n.getPropertyValue("line-height").replace("px","")),h=parseInt(n.getPropertyValue("height").replace("px",""));!isNaN(s)&&!isNaN(h)&&h>s&&(this.multiline=!0)}t!=null&&t.addEventListener("click",function(){o.remove()})}render(){const t=wo[this.icon].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"').replace(/<path\b/g,'<path part="icon-path"').replace(/<g\b/g,'<g part="icon-group"').replace(/<circle\b/g,'<circle part="icon-circle"');return l`
             <div class="o-toast">
                 <div class="o-toast-icon">
                     ${_(t)}
@@ -2492,7 +2502,7 @@
         .o-toast-icon {
             height: 16px;
         }
-    `;I([a({type:String,reflect:!0})],$.prototype,"icon",2);I([a({type:String,reflect:!0})],$.prototype,"text",2);I([a({type:String,reflect:!0})],$.prototype,"verticalanchor",2);I([a({type:String,reflect:!0})],$.prototype,"horizontalanchor",2);I([a({type:Number,reflect:!0})],$.prototype,"verticaloffset",2);I([a({type:Number,reflect:!0})],$.prototype,"horizontaloffset",2);I([a({type:Number,reflect:!0})],$.prototype,"animationduration",2);I([a({type:String,reflect:!0})],$.prototype,"animationaxis",2);I([a({type:Boolean,reflect:!0})],$.prototype,"animated",2);I([a({type:Number,reflect:!0})],$.prototype,"lifeduration",2);I([a({type:Boolean,reflect:!0})],$.prototype,"multiline",2);$=I([b("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{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}`)}toggle(){this.disabled||(this.indeterminate?(this.indeterminate=!1,this.checked=!0):this.checked=!this.checked,this.syncInput(),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}syncInput(){this.inputEl&&(this.inputEl.checked=this.checked,this.inputEl.indeterminate=this.indeterminate)}updated(o){this.syncInput()}handleKeyDown(o){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"'));return l`
+    `;I([a({type:String,reflect:!0})],$.prototype,"icon",2);I([a({type:String,reflect:!0})],$.prototype,"text",2);I([a({type:String,reflect:!0})],$.prototype,"verticalanchor",2);I([a({type:String,reflect:!0})],$.prototype,"horizontalanchor",2);I([a({type:Number,reflect:!0})],$.prototype,"verticaloffset",2);I([a({type:Number,reflect:!0})],$.prototype,"horizontaloffset",2);I([a({type:Number,reflect:!0})],$.prototype,"animationduration",2);I([a({type:String,reflect:!0})],$.prototype,"animationaxis",2);I([a({type:Boolean,reflect:!0})],$.prototype,"animated",2);I([a({type:Number,reflect:!0})],$.prototype,"lifeduration",2);I([a({type:Boolean,reflect:!0})],$.prototype,"multiline",2);$=I([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 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}`)}toggle(){this.disabled||(this.indeterminate?(this.indeterminate=!1,this.checked=!0):this.checked=!this.checked,this.syncInput(),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}syncInput(){this.inputEl&&(this.inputEl.checked=this.checked,this.inputEl.indeterminate=this.indeterminate)}updated(o){this.syncInput()}handleKeyDown(o){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"'));return l`
       <input
         type="checkbox"
         id=${this.inputId}
@@ -2611,7 +2621,7 @@
     svg path {
       stroke: var(--color-border-white);
     }
-  `;B([a({type:Boolean,reflect:!0})],k.prototype,"checked",2);B([a({type:Boolean,reflect:!0})],k.prototype,"indeterminate",2);B([a({type:Boolean,reflect:!0})],k.prototype,"disabled",2);B([a({type:String,reflect:!0})],k.prototype,"size",2);B([a({type:Boolean})],k.prototype,"showLabel",2);B([a({type:String})],k.prototype,"label",2);B([a({type:String})],k.prototype,"name",2);B([a({type:String})],k.prototype,"value",2);B([a({type:String,reflect:!0})],k.prototype,"inputId",2);B([ye("input")],k.prototype,"inputEl",2);k=B([b("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{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}`)}handleClick(){this.disabled||this.checked||(this.checked=!0,this.syncInput(),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}syncInput(){this.inputEl&&(this.inputEl.checked=this.checked)}updated(o){if(o.has("checked")&&this.checked){const t=this.parentElement;t&&Array.from(t.querySelectorAll(`o-radio[name="${this.name}"]`)).forEach(r=>{r!==this&&(r.checked=!1)})}this.syncInput()}handleKeyDown(o){this.disabled||(o.key===" "||o.key==="Enter")&&(o.preventDefault(),this.handleClick())}render(){return l`
+  `;B([a({type:Boolean,reflect:!0})],k.prototype,"checked",2);B([a({type:Boolean,reflect:!0})],k.prototype,"indeterminate",2);B([a({type:Boolean,reflect:!0})],k.prototype,"disabled",2);B([a({type:String,reflect:!0})],k.prototype,"size",2);B([a({type:Boolean})],k.prototype,"showLabel",2);B([a({type:String})],k.prototype,"label",2);B([a({type:String})],k.prototype,"name",2);B([a({type:String})],k.prototype,"value",2);B([a({type:String,reflect:!0})],k.prototype,"inputId",2);B([ye("input")],k.prototype,"inputEl",2);k=B([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 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}`)}handleClick(){this.disabled||this.checked||(this.checked=!0,this.syncInput(),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}syncInput(){this.inputEl&&(this.inputEl.checked=this.checked)}updated(o){if(o.has("checked")&&this.checked){const t=this.parentElement;t&&Array.from(t.querySelectorAll(`o-radio[name="${this.name}"]`)).forEach(r=>{r!==this&&(r.checked=!1)})}this.syncInput()}handleKeyDown(o){this.disabled||(o.key===" "||o.key==="Enter")&&(o.preventDefault(),this.handleClick())}render(){return l`
       <input type="radio" id=${this.inputId} ?checked=${this.checked} ?disabled=${this.disabled} name=${this.name} value=${this.value} />
 
       <div class="box" role="radio" tabindex=${this.disabled?-1:0} aria-checked=${String(this.checked)} aria-disabled=${String(this.disabled)} @click=${this.handleClick} @keydown=${this.handleKeyDown}>
@@ -2708,7 +2718,7 @@
       width: 0;
       height: 0;
     }
-  `;R([a({type:Boolean,reflect:!0})],O.prototype,"checked",2);R([a({type:Boolean,reflect:!0})],O.prototype,"disabled",2);R([a({type:String,reflect:!0})],O.prototype,"size",2);R([a({type:Boolean})],O.prototype,"showLabel",2);R([a({type:String})],O.prototype,"label",2);R([a({type:String})],O.prototype,"name",2);R([a({type:String})],O.prototype,"value",2);R([a({type:String,reflect:!0})],O.prototype,"inputId",2);R([ye("input")],O.prototype,"inputEl",2);O=R([b("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--)(s=o[n])&&(i=s(i)||i);return i};let Mt=class extends p{render(){return l`
+  `;R([a({type:Boolean,reflect:!0})],O.prototype,"checked",2);R([a({type:Boolean,reflect:!0})],O.prototype,"disabled",2);R([a({type:String,reflect:!0})],O.prototype,"size",2);R([a({type:Boolean})],O.prototype,"showLabel",2);R([a({type:String})],O.prototype,"label",2);R([a({type:String})],O.prototype,"name",2);R([a({type:String})],O.prototype,"value",2);R([a({type:String,reflect:!0})],O.prototype,"inputId",2);R([ye("input")],O.prototype,"inputEl",2);O=R([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--)(s=o[n])&&(i=s(i)||i);return i};let Mt=class extends u{render(){return l`
             <nav aria-label="Breadcrumbs">
                 <ul>
                     <slot></slot>
@@ -2725,7 +2735,7 @@
             margin: var(--spacing-4-xs);
             padding: var(--spacing-4-xs);
         }
-    `;Mt=ki([b("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{constructor(){super(...arguments),this.href="",this.active=!1}_handleClick(o){(!this.href||this.href==="#")&&o.preventDefault()}render(){return this.active?l`<span aria-current="page"><slot></slot></span>`:l`
+    `;Mt=ki([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 u{constructor(){super(...arguments),this.href="",this.active=!1}_handleClick(o){(!this.href||this.href==="#")&&o.preventDefault()}render(){return this.active?l`<span aria-current="page"><slot></slot></span>`:l`
             <li>
                 <a
                     href="${this.href}"
@@ -2778,4 +2788,4 @@
                 content: "";
             }
         }
-    `;Yt([a({type:String})],xt.prototype,"href",2);Yt([a({type:Boolean,reflect:!0})],xt.prototype,"active",2);xt=Yt([b("o-breadcrumb")],xt);
+    `;Yt([a({type:String})],xt.prototype,"href",2);Yt([a({type:Boolean,reflect:!0})],xt.prototype,"active",2);xt=Yt([g("o-breadcrumb")],xt);

package/index.mjs

@@ -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);
@@ -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 = "";
   }
@@ -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 })
+], p.prototype, "headerTitleClassName", 2);
+b([
   a({ type: String, reflect: !0 })
-], u.prototype, "headerTitle", 2);
-y([
+], p.prototype, "labelDialog", 2);
+b([
   a({ type: String, reflect: !0 })
-], u.prototype, "headerTitleClassName", 2);
-y([
+], p.prototype, "closeButtonLabel", 2);
+b([
   a({ type: String, reflect: !0 })
-], u.prototype, "closeButtonLabel", 2);
-y([
+], p.prototype, "goBackButtonLabel", 2);
+b([
   a({ type: String, reflect: !0 })
-], u.prototype, "firstButtonLabel", 2);
-y([
+], p.prototype, "firstButtonLabel", 2);
+b([
   a({ type: String, reflect: !0 })
-], u.prototype, "firstButtonVariant", 2);
-y([
+], 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() {
@@ -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", {
@@ -2294,14 +2312,14 @@ 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;
   }
@@ -2446,14 +2464,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;
   }
@@ -2524,14 +2542,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 +2768,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 +2850,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 +2970,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);
@@ -3247,14 +3265,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 +3330,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);
@@ -3660,7 +3678,7 @@ T([
   et()
 ], E.prototype, "menuWidth", 2);
 E = T([
-  b("o-dropdown-variant")
+  g("o-dropdown-variant")
 ], E);
 /**
  * @license
@@ -3698,7 +3716,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 +3823,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 +3969,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 +4007,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";
@@ -4201,14 +4219,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 = "";
   }
@@ -4392,7 +4410,7 @@ var vi = Object.defineProperty, fi = Object.getOwnPropertyDescriptor, Qt = (o, t
     (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 +4464,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;
   }
@@ -4629,14 +4647,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}`);
   }
@@ -4811,14 +4829,14 @@ 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 _i = 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}`);
   }
@@ -4970,14 +4988,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--)
     (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 +5019,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 +5098,5 @@ Yt([
   a({ type: Boolean, reflect: !0 })
 ], xt.prototype, "active", 2);
 xt = Yt([
-  b("o-breadcrumb")
+  g("o-breadcrumb")
 ], xt);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@florid-kit/components",
-  "version": "0.9.20",
+  "version": "0.9.21",
   "main": "index.js",
   "module": "index.mjs",
   "typings": "index.d.ts",