@florid-kit/components 0.9.15 → 0.9.17

package/index.js

@@ -158,967 +158,970 @@
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */class Dt extends Bt{}Dt.directiveName="unsafeSVG",Dt.resultType=2;const C=Vt(Dt);var mo=Object.defineProperty,xo=Object.getOwnPropertyDescriptor,x=(o,t,e,n)=>{for(var i=n>1?void 0:n?xo(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&mo(t,e,i),i};const wo=Ft(u);let b=class extends wo{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[Nt].form}handleClick(o){if(!(o instanceof KeyboardEvent&&!["Enter"," "].includes(o.key))&&this.panelTarget){const t=document.getElementById(this.panelTarget);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=N[t].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return l`<span class="${o==="start"?"icon-start":"icon-end"}">${C(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`
-                ${this.text?l`<span class="text">${this.text}</span>`:d}
-                ${this.textsecond?l`<span class="text">${this.textsecond}</span>`:d}
-                ${this.withbadge?l`<slot></slot>`:d}
-              `:l`<slot></slot>`}
-          ${this.endIcon?this.renderIcon("end"):d}
-      </button>
-    `}renderLink(){const o=this.text||this.textsecond;return l`
-      <a
-        href=${this.href}
-        target=${this.target||d}
-        class="button"
-        ?disabled=${this.disabled}
-        role="button"
-        @click=${this.handleClick}
-        @keydown=${this.handleClick}
-        aria-describedby=${this.getAttribute("aria-describedby")||d}
-      >
-          ${this.startIcon?this.renderIcon("start"):d}
-          ${o?l`
-                ${this.text?l`<span>${this.text}</span>`:d}
-                ${this.textsecond?l`<span>${this.textsecond}</span>`:d}
-              `:l`<slot></slot>`}
-          ${this.endIcon?this.renderIcon("end"):d}
-      </a>
-    `}};Re(b);b.formAssociated=!0;b.styles=f`
-    :host {
-      --button-border: transparent;
-      --badge-outer-width: 19px;
-      cursor: pointer;
-      display: inline-flex;
-    }
+ */class Dt extends Bt{}Dt.directiveName="unsafeSVG",Dt.resultType=2;const C=Vt(Dt);/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const mo=o=>o.strings===void 0;/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const dt=(o,t)=>{var n;const e=o._$AN;if(e===void 0)return!1;for(const i of e)(n=i._$AO)==null||n.call(i,t,!1),dt(i,t);return!0},kt=o=>{let t,e;do{if((t=o._$AM)===void 0)break;e=t._$AN,e.delete(o),o=t}while((e==null?void 0:e.size)===0)},be=o=>{for(let t;t=o._$AM;o=t){let e=t._$AN;if(e===void 0)t._$AN=e=new Set;else if(e.has(o))break;e.add(o),$o(t)}};function xo(o){this._$AN!==void 0?(kt(this),this._$AM=o,be(this)):this._$AM=o}function wo(o,t=!1,e=0){const n=this._$AH,i=this._$AN;if(i!==void 0&&i.size!==0)if(t)if(Array.isArray(n))for(let r=e;r<n.length;r++)dt(n[r],!1),kt(n[r]);else n!=null&&(dt(n,!1),kt(n));else dt(this,o)}const $o=o=>{o.type==Ut.CHILD&&(o._$AP??(o._$AP=wo),o._$AQ??(o._$AQ=xo))};class Co extends qt{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,e,n){super._$AT(t,e,n),be(this),this.isConnected=t._$AU}_$AO(t,e=!0){var n,i;t!==this.isConnected&&(this.isConnected=t,t?(n=this.reconnected)==null||n.call(this):(i=this.disconnected)==null||i.call(this)),e&&(dt(this,t),kt(this))}setValue(t){if(mo(this._$Ct))this._$Ct._$AI(t,this);else{const e=[...this._$Ct._$AH];e[this._$Ci]=t,this._$Ct._$AI(e,this,0)}}disconnected(){}reconnected(){}}class _o extends Co{constructor(){super(...arguments),this.prevData={}}render(t){return d}update(t,[e]){var n;this.element!==t.element&&(this.element=t.element),this.host=((n=t.options)===null||n===void 0?void 0:n.host)||this.element,this.apply(e),this.groom(e),this.prevData={...e}}apply(t){if(!t)return;const{prevData:e,element:n}=this;for(const i in t){const r=t[i];r!==e[i]&&(n[i]=r)}}groom(t){const{prevData:e,element:n}=this;if(e)for(const i in e)(!t||!(i in t)&&n[i]===e[i])&&(n[i]=void 0)}}class ko extends _o{constructor(){super(...arguments),this.eventData={}}apply(t){if(t)for(const e in t){const n=t[e];n!==this.eventData[e]&&this.applyEvent(e,n)}}applyEvent(t,e){const{prevData:n,element:i}=this;this.eventData[t]=e,n[t]&&i.removeEventListener(t,this,e),i.addEventListener(t,this,e)}groom(t){const{prevData:e,element:n}=this;if(e)for(const i in e)(!t||!(i in t)&&n[i]===e[i])&&this.groomEvent(i,e[i])}groomEvent(t,e){const{element:n}=this;delete this.eventData[t],n.removeEventListener(t,this,e)}handleEvent(t){const e=this.eventData[t.type];typeof e=="function"?e.call(this.host,t):e.handleEvent(t)}disconnected(){const{eventData:t,element:e}=this;for(const n in t){const i=n.slice(1),r=t[n];e.removeEventListener(i,this,r)}}reconnected(){const{eventData:t,element:e}=this;for(const n in t){const i=n.slice(1),r=t[n];e.addEventListener(i,this,r)}}}class So extends ko{apply(t){if(!t)return;const{prevData:e,element:n}=this;for(const i in t){const r=t[i];if(r===e[i])continue;const s=i.slice(1);switch(i[0]){case"@":this.eventData[s]=r,this.applyEvent(s,r);break;case".":n[s]=r;break;case"?":r?n.setAttribute(s,""):n.removeAttribute(s);break;default:r!=null?n.setAttribute(i,String(r)):n.removeAttribute(i);break}}}groom(t){const{prevData:e,element:n}=this;if(e)for(const i in e){const r=i.slice(1);if(!t||!(i in t)&&n[r]===e[i])switch(i[0]){case"@":this.groomEvent(r,e[i]);break;case".":n[r]=void 0;break;case"?":n.removeAttribute(r);break;default:n.removeAttribute(i);break}}}}const le=Vt(So);/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const k=o=>o??d;var Ao=Object.defineProperty,Eo=Object.getOwnPropertyDescriptor,H=(o,t,e,n)=>{for(var i=n>1?void 0:n?Eo(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&Ao(t,e,i),i};let S=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=N[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"'),n=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}">	
+					${C(e)}
+				</span>
+			`:l`
+				<button
+					type="button"
+					aria-label=${k(i)}
+					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
+					?disabled="${this.disabled}"
+				>
+					${C(e)}
+					${n}
+				</button>
+			`}
+		`}};S.styles=f`
+		:host {
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+            outline: none !important;
+		}
 
-    :host(.a--tabfocus) {
-      outline: none !important;
-    }
+		.icon-button {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 32px;
+			height: 32px;
+			border: transparent;
+			border-radius: var(--radius-full);
+			cursor: pointer;
+			position: relative;
 
-    :host([fullwidth]) {
-      width: 100%;
-    }
+			&.icon-wishlist {
+				svg {
+					path {
+						stroke: var(--color-content-action-secondary);
+						stroke-width: var(--icon-stroke-width, 1);
+					}
+				}
+			}
+		}
 
-    :host([variant="primary"]) {
-      --button-bg: var(--color-container-action-primary-default);
-      --button-bg-hover: var(--color-container-action-primary-hover);
-      --button-bg-pressed: var(--color-container-action-primary-pressed);
-      --button-text: var(--color-content-action-primary);
-      --button-text-hover: var(--color-content-action-primary);
-      --button-border: transparent;
-      --button-border-width: var(--border-m);
-      --button-padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px);
-      --button-starticon-svg-width: 0px; /* No starticon SVG for primary button */
-      --button-endicon-svg-width: 0px; /* No endicon SVG for primary button */
-    }
+		.icon-button.filled svg {
+			fill: var(--color-content-action-secondary);
+		}
 
-    :host([variant="secondary"]) {
-      --button-bg: var(--color-container-action-secondary-default);
-      --button-bg-hover: var(--color-container-action-secondary-hover);
-      --button-bg-pressed: var(--color-container-action-secondary-pressed);
-      --button-text: var(--color-content-action-secondary);
-      --button-text-hover: var(--color-content-action-secondary);
-      --button-border: var(--color-border-secondary);
-      --button-border-width: var(--border-m);
-      --button-padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px);
-      --button-starticon-svg-width: 16px;
-      --button-endicon-svg-width: 0px; /* No endicon SVG for secondary button */
-    }
+		.icon-button.xsmall {
+			width: 20px;
+			height: 20px;
 
-    :host([variant="ghost"]) {
-      --button-bg: transparent;
-      --button-bg-hover: var(--color-alpha-dark-lightest);
-      --button-bg-pressed: var(--color-alpha-dark-lighter);
-      --button-text: var(--color-content-action-secondary);
-      --button-text-hover: var(--color-content-action-secondary);
-      --button-border-width: 0;
-      --button-padding: var(--spacing-m, 10px) var(--spacing-xl, 16px);   
-      --button-starticon-svg-width: 16px;
-      --button-endicon-svg-width: 12px;
-    }
+			&:not(.icon-wishlist) {
+				svg {
+					width: 8px;
+					height: 8px;
+				}
+			}
+		}
 
-    :host([variant="tertiary"]) {
-      --button-bg: var(--color-container-action-tertiary-default);
-      --button-bg-hover: var(--color-container-action-tertiary-hover);
-      --button-bg-pressed: var(--color-container-action-tertiary-pressed);
-      --button-text: var(--color-content-body);
-      --button-text-hover: var(--color-content-action-tertiary);
-      --button-border-width: 0;
-      --button-padding: var(--spacing-m, 10px) var(--spacing-l, 12px); 
-      --button-starticon-svg-width: 0px; /* No starticon SVG for tertiary button */
-      --button-endicon-svg-width: 8px; 
-    }
+		.icon-button.small {
+			width: 32px;
+			height: 32px;
 
-    :host([disabled]),
-    :host([aria-disabled="true"]),
-    :host([aria-disabled="true"]:hover) {
-      --button-bg: var(--color-container-disabled);
-      --button-text: var(--color-content-disabled);
-      --button-border: transparent;
-    }
+			&:not(.icon-wishlist) {
+				svg {
+					width: 16px;
+					height: 16px;
+				}
+			}
+		}
 
-    :host([disabled][variant="secondary"]) {
-      --button-border: var(--color-border-secondary);
-    }
+		.icon-button.medium {
+			width: 40px;
+			height: 40px;
 
-    .button {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      gap: var(--spacing-s, 8px);
-      height: 100%;
-      background-color: var(--button-bg);
-      color: var(--button-text);
-      border: var(--button-border-width, var(--border-m)) solid var(--button-border);
-      border-radius: var(--radius-m);
-      font-family: var(--font-family-loccitane-sans);
-      font-size: var(--font-size-150);
-      font-weight: var(--font-weight-400);
-      line-height: var(--line-height-200);
-      min-width: 64px;
-      padding: var(--button-padding);
-      text-decoration: none;
-      cursor: inherit;
-      box-sizing: border-box;
+			&:not(.icon-wishlist) {
+				svg {
+					width: 16px;
+					height: 16px;
+				}
+			}
+		}
 
-      span {
-        font-family: var(--font-family-loccitane-sans);
-        font-size: var(--font-size-150);
-        font-weight: var(--font-weight-400);
-        line-height: var(--line-height-200);
-      }
-    }
+		.icon-button.large {
+			width: 40px;
+			height: 40px;
 
-    .button:hover:not([disabled]) {
-      background-color: var(--button-bg-hover);
-      color: var(--button-text-hover);
-    }
+			&:not(.icon-wishlist) {
+				svg {
+					width: 24px;
+					height: 24px;
+				}
+			}
+		}
 
-    .button:active:not([disabled]) {
-      background-color: var(--button-bg-pressed);
-    }
+		.icon-button.none-light, .icon-button.none-contrast {
+			background-color: transparent;
+			width: auto;
+			height: auto;
 
-    .button:focus-visible {
-      ${at};
-    }
+			&.xsmall {
+				svg {
+					width: 8px;
+					height: 8px;
+				}
+			}
 
-    span.text + span.text::before {
-      content: "•";
-      margin-right: 8px;
-    }
+			&.small {
+				svg {
+					width: 16px;
+					height: 16px;
+				}
+			}
 
-    .icon-start,
-    .icon-end {
-      display: inline-flex;
-      align-items: center;
+			&.medium {
+				svg {
+					width: 16px;
+					height: 16px;
+				}
+			}
 
-      svg {
-        max-height: 20px;
-      }
-      svg[x] {
-        width: 15px;
-      }
-      path[fill],
-      path[class] {
-        fill: var(--button-text) !important;
-      }
-      path[stroke] {
-        stroke: var(--button-text) !important;
-      }
-    }
-
-    :host([variant="tertiary"][fullwidth][endIcon]) .button {
-      justify-content: space-between;
-    }
-
-    .button span {
-      display: inline-flex;
-      align-items: center;
-    }
-
-    .button slot {
-      display: inline-flex;
-      align-items: center;
-    }
-      
-    :host([variant="tertiary"][endIcon]) .button .icon-end {
-      width: var(--button-endicon-svg-width, 8px);
-    }
-
-    :host([underlined]) span:not([class*="icon-"]),
-    :host([underlined]) .text,
-    :host([underlined]:not([text])) .button slot {
-      position: relative;
-
-      &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        border-bottom: var(--border-M, 1px) solid var(--button-text);
-      }
-    }
-
-    :host([underlined]:not([text])) .button slot {
-      display: inline-flex;
-      gap: 8px;
-    }
-
-    :host([underlined][withbadge]:not([text])) .button slot {
-      &::after {
-        width: calc(100% - var(--badge-outer-width, 19px) - var(--spacing-s, 8px))
-      }
-    }
-
-    //Icon movement on hover
-    :host([variant="tertiary"][endIcon]) .icon-end {
-      display: inline-flex;
-      align-items: center;
-    }
+			&.large {
+				svg {
+					width: 24px;
+					height: 24px;
+				}
+			}
 
-    :host([variant="tertiary"][endIcon]:hover) .icon-end {
-      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-      transform: translateX(4px);
-    }
-    //End icon movment on hover
-  `;x([a()],b.prototype,"type",2);x([a({reflect:!0})],b.prototype,"value",2);x([a({type:String,reflect:!0})],b.prototype,"variant",2);x([a({type:String})],b.prototype,"text",2);x([a({type:String})],b.prototype,"textsecond",2);x([a({type:Boolean,reflect:!0})],b.prototype,"fullwidth",2);x([a({type:Boolean,reflect:!0})],b.prototype,"disabled",2);x([a({type:String,reflect:!0})],b.prototype,"startIconModel",2);x([a({type:String,reflect:!0})],b.prototype,"endIconModel",2);x([a({type:Boolean,reflect:!0,attribute:"starticon"})],b.prototype,"startIcon",2);x([a({type:Boolean,reflect:!0,attribute:"endicon"})],b.prototype,"endIcon",2);x([a({type:String,attribute:"paneltarget",reflect:!0})],b.prototype,"panelTarget",2);x([a({type:String})],b.prototype,"href",2);x([a({type:String})],b.prototype,"target",2);x([a({type:Boolean,reflect:!0})],b.prototype,"underlined",2);x([a({type:Boolean,reflect:!0})],b.prototype,"withbadge",2);b=x([y("o-button")],b);var $o=Object.defineProperty,Co=Object.getOwnPropertyDescriptor,At=(o,t,e,n)=>{for(var i=n>1?void 0:n?Co(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&$o(t,e,i),i};let rt=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=N.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>
-				${C(o)}
-			</button>
-		`}setStatus(o){this.status=o,this.setAttribute("aria-pressed",String(this.status==="filled")),this.requestUpdate()}setAriaDescribedBy(o){this.ariaDescribedBy=o,this.requestUpdate()}setLabel(o){this.label=o,this.requestUpdate()}};rt.styles=f`
-		:host {
-			display: inline-flex;
-			justify-content: center;
-			align-items: center;
-			outline: none !important;
+			&:disabled {
+				background-color: transparent;	
+			}
 		}
 
-		.wishlist-button {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			width: 40px;
-			height: 40px;
-			border: transparent;
-			border-radius: var(--radius-full);
-			background-color: var(--color-alpha-light-strong);
-			position: relative;
-			cursor: pointer;
+		.icon-button.none-light {
+			svg {
+				path {
+					stroke: var(--color-content-action-primary);
+					fill: var(--color-content-action-primary);
+				}
+			}
 		}
 
-		.wishlist-button:hover {
-			background-color: var(--color-alpha-light-stronger);
+		.icon-button.none-light.icon-wishlist svg path {
+			fill: none;
 		}
 
-		.wishlist-button:active {
-			background-color: var(--color-alpha-light-strongest);
+		:host([status="filled"]) .icon-button.none-light.icon-wishlist svg path {
+			fill: var(--color-content-action-primary);
 		}
 
-		.wishlist-button:focus-visible {
-			${at};
-		}
+		.icon-button.background-light {
+			background-color: var(--color-alpha-light-strong);
 
-		.wishlist-button:hover svg path {
-			fill: var(--color-content-action-secondary);
-		}
+			&:hover:not(:disabled) {
+				background-color: var(--color-alpha-light-stronger);
+			}
 
-		:host([status="filled"]) .wishlist-button svg path {
-			fill: var(--color-content-action-secondary);
+			&:active:not(:disabled) {
+				background-color: var(--color-alpha-light-strongest);
+			}
 		}
 
-		:host([status="empty"]) .wishlist-button svg path {
-			fill: var(--color-alpha-light-strong);
-		}
+		.icon-button.background-contrast {
+			background-color: var(--color-container-action-tertiary-default);
 
-		@media (hover: hover) and (pointer: fine) {
-			:host([status="empty"]) .wishlist-button:hover svg path {
-				fill: var(--color-content-action-secondary);
+			&:hover:not(:disabled) {
+				background-color: var(--color-container-action-tertiary-hover);
 			}
-		}
 
-		.sr-only {
-			border: 0 !important;
-			clip: rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;
-			-webkit-clip-path: inset(50%) !important;
-			clip-path: inset(50%) !important;
-			height: 0.1rem !important;
-			margin: -0.1rem !important;
-			overflow: hidden !important;
-			padding: 0 !important;
-			position: absolute !important;
-			width: 0.1rem !important;
-			white-space: nowrap !important;
-		}
-	`;At([a({type:String,reflect:!0})],rt.prototype,"status",2);At([a({type:String,reflect:!0})],rt.prototype,"ariaDescribedBy",2);At([a({type:String,reflect:!0})],rt.prototype,"label",2);rt=At([y("o-wishlist-button")],rt);/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const k=o=>o??d;var _o=Object.defineProperty,ko=Object.getOwnPropertyDescriptor,H=(o,t,e,n)=>{for(var i=n>1?void 0:n?ko(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&_o(t,e,i),i};let S=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=N[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"'),n=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}">	
-					${C(e)}
-				</span>
-			`:l`
-				<button
-					type="button"
-					aria-label=${k(i)}
-					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
-					?disabled="${this.disabled}"
-				>
-					${C(e)}
-					${n}
-				</button>
-			`}
-		`}};S.styles=f`
-		:host {
-			display: inline-flex;
-			justify-content: center;
-			align-items: center;
-            outline: none !important;
+			&:active:not(:disabled) {
+				background-color: var(--color-container-action-tertiary-pressed);
+			}
 		}
 
-		.icon-button {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			width: 32px;
-			height: 32px;
-			border: transparent;
-			border-radius: var(--radius-full);
-			cursor: pointer;
-			position: relative;
+		.icon-button.ghost-light {
+			background-color: transparent;
 
-			&.icon-wishlist {
-				svg {
-					path {
-						stroke: var(--color-content-action-secondary);
-						stroke-width: var(--icon-stroke-width, 1);
-					}
+			svg {
+				path {
+					stroke: var(--color-content-action-primary);
+					fill: var(--color-content-action-primary);
 				}
 			}
-		}
-
-		.icon-button.filled svg {
-			fill: var(--color-content-action-secondary);
-		}
 
-		.icon-button.xsmall {
-			width: 20px;
-			height: 20px;
+			&:hover:not(:disabled) {
+				background-color: var(--color-alpha-light-lightest);
+			}
 
-			&:not(.icon-wishlist) {
-				svg {
-					width: 8px;
-					height: 8px;
-				}
+			&:active:not(:disabled) {
+				background-color: var(--color-alpha-light-light);
 			}
 		}
 
-		.icon-button.small {
-			width: 32px;
-			height: 32px;
+		.icon-button.ghost-contrast {
+			background-color: transparent;
 
-			&:not(.icon-wishlist) {
-				svg {
-					width: 16px;
-					height: 16px;
-				}
+			&:hover:not(:disabled) {
+				background-color: var(--color-alpha-light-medium);
+			}
+
+			&:active:not(:disabled) {
+				background-color: var(--color-alpha-light-strongest);
 			}
 		}
 
-		.icon-button.medium {
-			width: 40px;
-			height: 40px;
+		.icon-button:disabled {
+			background-color: var(--color-container-disabled);
+			cursor: default;
 
-			&:not(.icon-wishlist) {
-				svg {
-					width: 16px;
-					height: 16px;
+			svg {
+				fill: var(--color-content-disabled);
+
+				path {
+					fill: var(--color-content-disabled);
 				}
 			}
 		}
 
-		.icon-button.large {
-			width: 40px;
-			height: 40px;
-
-			&:not(.icon-wishlist) {
-				svg {
-					width: 24px;
-					height: 24px;
-				}
-			}
+		.icon-button:focus-visible {
+			${at}
 		}
 
-		.icon-button.none-light, .icon-button.none-contrast {
-			background-color: transparent;
-			width: auto;
-			height: auto;
-
-			&.xsmall {
-				svg {
-					width: 8px;
-					height: 8px;
-				}
-			}
-
-			&.small {
-				svg {
-					width: 16px;
-					height: 16px;
-				}
-			}
+		.sr-only {
+			display: none;
+		}
+	`;H([a({type:String,reflect:!0})],S.prototype,"bgstyle",2);H([a({type:String,reflect:!0})],S.prototype,"size",2);H([a({type:String,reflect:!0})],S.prototype,"status",2);H([a({type:String,reflect:!0})],S.prototype,"type",2);H([a({type:String})],S.prototype,"strokewidth",2);H([a({type:String})],S.prototype,"icon",2);H([a({type:Boolean,reflect:!0})],S.prototype,"disabled",2);H([a({type:Boolean})],S.prototype,"showSrLabel",2);H([a({type:String})],S.prototype,"srLabel",2);S=H([y("o-icon-button")],S);var Lo=Object.defineProperty,Po=Object.getOwnPropertyDescriptor,g=(o,t,e,n)=>{for(var i=n>1?void 0:n?Po(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&Lo(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.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,n;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=(n=this.shadowRoot)==null?void 0:n.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 n=this.renderRoot.querySelector(".content"),i=async()=>{this.showDetail=!1,this.isHidingDetail=!1,this.showHeaderStartIcon=!1,await this.updateComplete,this._restoreFocusToOrigin()};if(n){this.showHeaderStartIcon=!1;const r=()=>{this.showDetail=!1,this.isHidingDetail=!1,n.removeEventListener("animationend",r),i()};n.addEventListener("animationend",r)}else this.showDetail=!1,this.isHidingDetail=!1,this.showHeaderStartIcon=!1;return}this.closePanel()},this._onDetailSlotChange=o=>{const n=o.target.assignedElements({flatten:!0}).flatMap(i=>Array.from(i.querySelectorAll("img")))[0];n==null||n.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 n,i,r,s;await this.updateComplete;const o=this.getDeepActiveElement(document);if(o&&o!==document.body)try{o.blur()}catch{}await new Promise(requestAnimationFrame);const t=(n=this.shadowRoot)==null?void 0:n.querySelector(".detail-view .return-btn");if(!t)return;t.updateComplete&&await t.updateComplete,(s=(r=((i=t.shadowRoot)==null?void 0:i.querySelector("button"))??t)==null?void 0:r.focus)==null||s.call(r,{preventScroll:!0})}_setPriceTabindex(){var n;const o=(n=this.shadowRoot)==null?void 0:n.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 n=this.renderRoot.querySelector(".o-whats-inside--content p");n==null||n.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 r=[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);r.push(...h,...c)}return r.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,n,i;if(this.showHeader){const r=((t=this.shadowRoot)==null?void 0:t.querySelector(".panel .close-btn"))||null,s=((e=r==null?void 0:r.shadowRoot)==null?void 0:e.querySelector("button"))||null;s&&((n=s.focus)==null||n.call(s))}else{const r=this.getFocusableElements()[0];(i=r==null?void 0:r.focus)==null||i.call(r)}}),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0}))}closePanel(){var t,e,n,i,r;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=(n=(e=this.previousFocusedElement.shadowRoot)==null?void 0:e.querySelector(".button"))==null?void 0:n.focus)==null||i.call(n):(r=this.previousFocusedElement)==null||r.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"
+				size="small"
+				class="close-btn"
+				bgstyle="background-light"
+				@click=${this.handleClosePanel}
+				@keydown=${this.handleClosePanel}
+				aria-label="${this.closeButtonLabel}"
+				aria-describedby="panel-title"
+				srlabel="${this.closeButtonLabel}"
+        		showsrlabel="true"
+				></o-icon-button>
+			</div>
+			`:null;return l`
+			<div class="overlay" style="z-index: ${this.zIndex}" @click=${this.handleClosePanel}></div>
+			<div
+				class="panel"
+				role="dialog"
+				aria-modal="true"
+				aria-labelledby="panel-title"
+				style="z-index: ${this.zIndex+1}"
+				tabindex="-1"
+			>
+				<div role="document">
+					${o}
 
-			&.medium {
-				svg {
-					width: 16px;
-					height: 16px;
-				}
-			}
+					<div class="content ${this.isHidingDetail?"slide-out-right":""} ${this.showDetail?"with-detail":""}">
+					
+					${this.showDetail?l`
+							<div class="detail-view">
+								${o}
+								<div class="detail-content">
+									<slot name="detail" @slotchange=${this._onDetailSlotChange}></slot>
+								</div>
+							</div>
+						`:l`<slot></slot>`}
+					</div>
 
-			&.large {
-				svg {
-					width: 24px;
-					height: 24px;
-				}
-			}
+					${this.showFooter?l`
+								<div class="footer">
+									${this.firstButtonVariant&&this.firstButtonLabel?l`
+								<o-button
+									variant="${this.firstButtonVariant}"
+									@click=${this.handleFirstClick}
+									@keydown=${this.handleFirstClick}
+									${le(this.firstButtonProps)}
+								>
+									${this.firstButtonLabel}
+								</o-button>
+							`:null}
 
-			&:disabled {
-				background-color: transparent;	
-			}
+									${this.secondButtonVariant&&this.secondButtonLabel?l`
+								<o-button
+									variant="${this.secondButtonVariant}"
+									@click=${this.handleSecondClick}
+									@keydown=${this.handleSecondClick}
+									${le(this.secondButtonProps)}
+								>
+									${this.secondButtonLabel}
+								</o-button>
+							`:null}
+								</div>
+						`:null}
+				</div>
+			</div>
+		`}};p.styles=f`
+		:host {
+			--z-overlay: 99;
+			--z-panel: 100;
+			position: fixed;
+			top: 0;
+			right: 0;
+			height: 100%;
+			width: 100%;
+			pointer-events: none;
+			z-index: var(--z-overlay);
+			--side-panel-width: 100%;
+			--side-panel-max-width: 416px;
+			--font-size: var(--font-size-300);
+			--line-height: var(--line-height-240);
 		}
 
-		.icon-button.none-light {
-			svg {
-				path {
-					stroke: var(--color-content-action-primary);
-					fill: var(--color-content-action-primary);
-				}
-			}
+		/* Hide content until it is initialized */
+		:host(:not([initialized])) .content {
+			display: none;
 		}
 
-		.icon-button.none-light.icon-wishlist svg path {
-			fill: none;
+		/* hide the host completely until its initialized */
+		:host(:not([initialized])) {
+			display: none !important;
 		}
 
-		:host([status="filled"]) .icon-button.none-light.icon-wishlist svg path {
-			fill: var(--color-content-action-primary);
+		.overlay {
+			position: absolute;
+			inset: 0;
+			backdrop-filter: blur(4px);
+			background-color: rgba(0, 0, 0, 0.3);
+			opacity: 0;
+			transition: opacity 0.3s ease;
+			pointer-events: none;
+			z-index: var(--z-overlay);
 		}
 
-		.icon-button.background-light {
-			background-color: var(--color-alpha-light-strong);
-
-			&:hover:not(:disabled) {
-				background-color: var(--color-alpha-light-stronger);
-			}
-
-			&:active:not(:disabled) {
-				background-color: var(--color-alpha-light-strongest);
-			}
+		:host([open]) .overlay {
+			opacity: 1;
+			pointer-events: auto;
 		}
 
-		.icon-button.background-contrast {
-			background-color: var(--color-container-action-tertiary-default);
-
-			&:hover:not(:disabled) {
-				background-color: var(--color-container-action-tertiary-hover);
-			}
+		.panel {
+			position: absolute;
+			top: 0;
+			right: 0;
+			width: var(--side-panel-width);
+			max-width: var(--side-panel-max-width);
+			height: 100%;
+			background: white;
+			box-shadow: var(--colors-alpha-dark-60);
+			transform: translateX(100%);
+			transition: transform 0.3s ease;
+			display: flex;
+			flex-direction: column;
+			pointer-events: auto;
+			z-index: var(--z-panel);
+		}
 
-			&:active:not(:disabled) {
-				background-color: var(--color-container-action-tertiary-pressed);
-			}
+		:host([open]) .panel {
+			transform: translateX(0%);
 		}
 
-		.icon-button.ghost-light {
-			background-color: transparent;
+		.header {
+			flex: 0 0 auto;
+			display: flex;
+			justify-content: space-between;
+			padding: 20px 16px;
+			border-bottom: var(--border-050) solid var(--color-border-tertiary);
 
-			svg {
-				path {
-					stroke: var(--color-content-action-primary);
-					fill: var(--color-content-action-primary);
-				}
+			.panel-title {
+				font-family: var(--font-family-loccitane-serif);
+				font-size: var(--font-size);
+				font-weight: var(--font-weight-400);
+				line-height: var(--line-height);
+				font-style: italic;
+				display: -webkit-box;
+				-webkit-line-clamp: 2;
+				-webkit-box-orient: vertical;
+				height: auto;
+				margin-top: auto;
+				margin-bottom: auto;
+				overflow: hidden;
+				width: 100%;
+				color: var(--color-content-heading);
 			}
 
-			&:hover:not(:disabled) {
-				background-color: var(--color-alpha-light-lightest);
+			.close-btn {
+				margin-left: 8px;
+				margin-top: 0;
+				flex-direction: column;
+				justify-content: start;
 			}
 
-			&:active:not(:disabled) {
-				background-color: var(--color-alpha-light-light);
+			.return-btn {
+				margin-right: 8px;
 			}
 		}
 
-		.icon-button.ghost-contrast {
-			background-color: transparent;
-
-			&:hover:not(:disabled) {
-				background-color: var(--color-alpha-light-medium);
-			}
+		.panel:focus-visible,
+		.close-btn:focus-visible {
+			${at}
+		}
 
-			&:active:not(:disabled) {
-				background-color: var(--color-alpha-light-strongest);
-			}
+		[role="document"] {
+			overflow-y: auto;
+			overflow-x: hidden;
 		}
 
-		.icon-button:disabled {
-			background-color: var(--color-container-disabled);
-			cursor: default;
-
-			svg {
-				fill: var(--color-content-disabled);
+		.content {
+			flex: 1 1 auto;
+			padding: var(--spacing-xl);
 
-				path {
-					fill: var(--color-content-disabled);
-				}
+			&.with-detail {
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				top: 0;
+				left: 0;
+				background: var(--color-container-bg-white);
+				z-index: 3;
+				padding: var(--spacing-4-xs);
 			}
 		}
 
-		.icon-button:focus-visible {
-			${at}
+		.footer {
+			flex: 0 0 auto;
+			padding: var(--spacing-xl);
+			border-top: var(--border-050) solid var(--color-border-tertiary);
+			display: flex;
+    		flex-direction: column;
+			gap: var(--spacing-l);
+			justify-content: flex-start;
 		}
 
-		.sr-only {
-			display: none;
+		/* Mobile */
+		@media (max-width: 767px) {
+			:host {
+				--side-panel-width: 100%;
+				--side-panel-max-width: none;
+			}
 		}
-	`;H([a({type:String,reflect:!0})],S.prototype,"bgstyle",2);H([a({type:String,reflect:!0})],S.prototype,"size",2);H([a({type:String,reflect:!0})],S.prototype,"status",2);H([a({type:String,reflect:!0})],S.prototype,"type",2);H([a({type:String})],S.prototype,"strokewidth",2);H([a({type:String})],S.prototype,"icon",2);H([a({type:Boolean,reflect:!0})],S.prototype,"disabled",2);H([a({type:Boolean})],S.prototype,"showSrLabel",2);H([a({type:String})],S.prototype,"srLabel",2);S=H([y("o-icon-button")],S);var So=Object.defineProperty,Ao=Object.getOwnPropertyDescriptor,ot=(o,t,e,n)=>{for(var i=n>1?void 0:n?Ao(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&So(t,e,i),i};let F=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="${k(this.target||void 0)}"
-                @click="${this._handleClick}"
-            >
-                ${this.endIcon&&this.reverseEndIcon?l`
-                            <o-icon-button
-                                icon="chevronLeft"
-                                bgstyle="${this.inverse?"none-light":"none-contrast"}"
-                                size="xsmall"
-                                aria-hidden="true"
-                                type="span"
-                            ></o-icon-button>
-                    `:null}
-                <span class="link-text"><slot></slot></span>
-                ${this.endIcon&&!this.reverseEndIcon?l`
-                            <o-icon-button
-                                icon="chevronRight"
-                                bgstyle="${this.inverse?"none-light":"none-contrast"}"
-                                size="xsmall"
-                                aria-hidden="true"
-                                type="span"
-                            ></o-icon-button>
-                    `:null}
-            </a>
-        `}};F.styles=f`
-        :host([template="standard"]) a {
-            color: var(--color-content-action-secondary);
-            font-size: var(--font-size-200);
-            font-weight: var(--font-weight-400);
-            line-height: var(--line-height-240);
-            letter-spacing: var(--letter-spacing-400);
-            font-family: var(--font-family-loccitane-serif);
-        }
 
-        :host([template="discret"]) a {
-            color: var(--color-content-action-secondary);
-            font-size: var(--font-size-100);
-            font-weight: var(--font-weight-400);
-            line-height: var(--line-height-160);
-            letter-spacing: var(--letter-spacing-400);
-            font-family: var(--font-family-loccitane-sans);
-        }
+		/* Tablet */
+		@media (min-width: 768px) and (max-width: 1024px) {
+			:host {
+				--side-panel-width: 375px;
+				--side-panel-max-width: 375px;
+			}
+		}
 
-        :host([template="review"]) a {
-            color: var(--color-content-action-secondary);
-            font-size: var(--font-size-100);
-            font-weight: var(--font-weight-500);
-            line-height: var(--line-height-160);
-            letter-spacing: var(--letter-spacing-400);
-            font-family: var(--font-family-loccitane-sans);
-            text-transform: uppercase;
-        }
+		@media (min-width: 1025px) {
+			:host {
+				--side-panel-width: 100%;
+				--side-panel-max-width: 416px;
+				--font-size: var(--font-size-400);
+				--line-height: var(--line-height-280);
+			}
+		}
+		
+		@keyframes slideInRight {
+			from {
+				transform: translateX(100%);
+			}
+			to {
+				transform: translateX(0%);
+			}
+		}
+		
+		@keyframes slideOutRight {
+			from {
+				transform: translateX(0%);
+			}
+			to {
+				transform: translateX(100%);
+			}
+		}
 
-        :host([inverse]) a {
-            color: var(--color-container-action-tertiary-default);
-        }
+		.slide-out-right {
+			animation: slideOutRight 0.3s ease-in forwards;
+		}
+		
+		.detail-view {
+			animation: slideInRight 0.3s ease-out both;
+		}
+		.detail-content {
+			padding: var(--spacing-xl);
+		}
+	`;p.focusablesSelector='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';p.focusablesCustomElementsSelector="o-icon-button, o-button";g([a({type:Boolean,reflect:!0})],p.prototype,"open",2);g([a({type:Boolean,reflect:!0})],p.prototype,"showHeader",2);g([a({type:Boolean,reflect:!0})],p.prototype,"showFooter",2);g([a({type:Boolean,reflect:!0})],p.prototype,"showHeaderStartIcon",2);g([a({type:String,reflect:!0})],p.prototype,"headerTitle",2);g([a({type:String,reflect:!0})],p.prototype,"headerTitleClassName",2);g([a({type:String,reflect:!0})],p.prototype,"closeButtonLabel",2);g([a({type:String,reflect:!0})],p.prototype,"firstButtonLabel",2);g([a({type:String,reflect:!0})],p.prototype,"firstButtonVariant",2);g([a({type:Object,reflect:!0})],p.prototype,"firstButtonProps",2);g([a({type:Boolean,reflect:!0})],p.prototype,"onFirstButtonClickClose",2);g([a({type:String,reflect:!0})],p.prototype,"secondButtonLabel",2);g([a({type:String,reflect:!0})],p.prototype,"secondButtonVariant",2);g([a({type:Object,reflect:!0})],p.prototype,"secondButtonProps",2);g([a({type:Boolean,reflect:!0})],p.prototype,"onSecondButtonClickClose",2);g([a({type:Boolean,reflect:!0})],p.prototype,"disablePortal",2);g([a({type:Number,reflect:!0})],p.prototype,"zIndex",2);g([a({type:Boolean,reflect:!0})],p.prototype,"initialized",2);g([a({type:Boolean})],p.prototype,"showDetail",2);g([a({type:Boolean})],p.prototype,"isHidingDetail",2);p=g([y("o-side-panel")],p);var Io=Object.defineProperty,Oo=Object.getOwnPropertyDescriptor,x=(o,t,e,n)=>{for(var i=n>1?void 0:n?Oo(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&Io(t,e,i),i};const zo=Ft(u);let b=class extends zo{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[Nt].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=N[t].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return l`<span class="${o==="start"?"icon-start":"icon-end"}">${C(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`
+                ${this.text?l`<span class="text">${this.text}</span>`:d}
+                ${this.textsecond?l`<span class="text">${this.textsecond}</span>`:d}
+                ${this.withbadge?l`<slot></slot>`:d}
+              `:l`<slot></slot>`}
+          ${this.endIcon?this.renderIcon("end"):d}
+      </button>
+    `}renderLink(){const o=this.text||this.textsecond;return l`
+      <a
+        href=${this.href}
+        target=${this.target||d}
+        class="button"
+        ?disabled=${this.disabled}
+        role="button"
+        @click=${this.handleClick}
+        @keydown=${this.handleClick}
+        aria-describedby=${this.getAttribute("aria-describedby")||d}
+      >
+          ${this.startIcon?this.renderIcon("start"):d}
+          ${o?l`
+                ${this.text?l`<span>${this.text}</span>`:d}
+                ${this.textsecond?l`<span>${this.textsecond}</span>`:d}
+              `:l`<slot></slot>`}
+          ${this.endIcon?this.renderIcon("end"):d}
+      </a>
+    `}};Re(b);b.formAssociated=!0;b.styles=f`
+    :host {
+      --button-border: transparent;
+      --badge-outer-width: 19px;
+      cursor: pointer;
+      display: inline-flex;
+    }
 
-        :host([endIcon]) a o-icon-button {
-            margin-left: 2px;
-            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-        }
+    :host(.a--tabfocus) {
+      outline: none !important;
+    }
 
-        :host([endIcon][reverseEndIcon]) a o-icon-button {
-            margin-right: 2px;
-            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-        }
+    :host([fullwidth]) {
+      width: 100%;
+    }
 
-        :host([endIcon]) a {
-            &:hover {
-                o-icon-button {
-                    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-                    :host(:not([reverseEndIcon])) & {
-                        transform: translateX(4px);
-                    }
+    :host([variant="primary"]) {
+      --button-bg: var(--color-container-action-primary-default);
+      --button-bg-hover: var(--color-container-action-primary-hover);
+      --button-bg-pressed: var(--color-container-action-primary-pressed);
+      --button-text: var(--color-content-action-primary);
+      --button-text-hover: var(--color-content-action-primary);
+      --button-border: transparent;
+      --button-border-width: var(--border-m);
+      --button-padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px);
+      --button-starticon-svg-width: 0px; /* No starticon SVG for primary button */
+      --button-endicon-svg-width: 0px; /* No endicon SVG for primary button */
+    }
 
-                    :host([reverseEndIcon]) & {
-                        transform: translateX(-4px);
-                    }
-                }
-            }
-        }
+    :host([variant="secondary"]) {
+      --button-bg: var(--color-container-action-secondary-default);
+      --button-bg-hover: var(--color-container-action-secondary-hover);
+      --button-bg-pressed: var(--color-container-action-secondary-pressed);
+      --button-text: var(--color-content-action-secondary);
+      --button-text-hover: var(--color-content-action-secondary);
+      --button-border: var(--color-border-secondary);
+      --button-border-width: var(--border-m);
+      --button-padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px);
+      --button-starticon-svg-width: 16px;
+      --button-endicon-svg-width: 0px; /* No endicon SVG for secondary button */
+    }
 
-        :host a {
-            position: relative;
-            text-decoration: none;
-            color: inherit;
-        }
+    :host([variant="ghost"]) {
+      --button-bg: transparent;
+      --button-bg-hover: var(--color-alpha-dark-lightest);
+      --button-bg-pressed: var(--color-alpha-dark-lighter);
+      --button-text: var(--color-content-action-secondary);
+      --button-text-hover: var(--color-content-action-secondary);
+      --button-border-width: 0;
+      --button-padding: var(--spacing-m, 10px) var(--spacing-xl, 16px);   
+      --button-starticon-svg-width: 16px;
+      --button-endicon-svg-width: 12px;
+    }
 
-        .link-text {
-            position: relative;
-            display: inline-block;
-        }
+    :host([variant="tertiary"]) {
+      --button-bg: var(--color-container-action-tertiary-default);
+      --button-bg-hover: var(--color-container-action-tertiary-hover);
+      --button-bg-pressed: var(--color-container-action-tertiary-pressed);
+      --button-text: var(--color-content-body);
+      --button-text-hover: var(--color-content-action-tertiary);
+      --button-border-width: 0;
+      --button-padding: var(--spacing-m, 10px) var(--spacing-l, 12px); 
+      --button-starticon-svg-width: 0px; /* No starticon SVG for tertiary button */
+      --button-endicon-svg-width: 8px; 
+    }
 
-        .link-text::after {
-            content: "";
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            width: 100%;
-            opacity: 1;
-            height: 1px;
-            background-color: currentColor;
-            transition: opacity 0.3s ease, height 0.3s ease;
-            pointer-events: none;
-        }
+    :host([disabled]),
+    :host([aria-disabled="true"]),
+    :host([aria-disabled="true"]:hover) {
+      --button-bg: var(--color-container-disabled);
+      --button-text: var(--color-content-disabled);
+      --button-border: transparent;
+    }
 
-        :host a:hover .link-text::after {
-            opacity: 0;
-            height: 1px;
-        }
-        /* End of underline effect */
-    `;ot([a({type:String})],F.prototype,"href",2);ot([a({type:String})],F.prototype,"target",2);ot([a({type:String,reflect:!0})],F.prototype,"template",2);ot([a({type:Boolean,reflect:!0})],F.prototype,"inverse",2);ot([a({type:Boolean,reflect:!0})],F.prototype,"endIcon",2);ot([a({type:Boolean,reflect:!0})],F.prototype,"reverseEndIcon",2);F=ot([y("o-link")],F);var Eo=Object.defineProperty,Lo=Object.getOwnPropertyDescriptor,Et=(o,t,e,n)=>{for(var i=n>1?void 0:n?Lo(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&Eo(t,e,i),i};let st=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 n;e>=1?n=100:e<=0?n=0:n=Math.round(e*100/25)*25,o.push(`star-${n}`)}return o}render(){const o=this.getStarKeys();return l`
-			<div class="rating">
-			<div class="stars">
-				${o.map(t=>l`<span class="star">${C(N[t]??"")}</span>`)}
-			</div>
-			${this.reviewCount!=null&&this.href!=null?l`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>`:null}
-			</div>
-		`}};st.styles=f`
-		svg {
-			width: 12px;
-			height: 12px;
-		}
-		.rating {
-			display: flex;
-			align-items: center;
-		}
+    :host([disabled][variant="secondary"]) {
+      --button-border: var(--color-border-secondary);
+    }
 
-		.stars {
-			display: flex;
-			gap: 2px;
-		}
+    .button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      gap: var(--spacing-s, 8px);
+      height: 100%;
+      background-color: var(--button-bg);
+      color: var(--button-text);
+      border: var(--button-border-width, var(--border-m)) solid var(--button-border);
+      border-radius: var(--radius-m);
+      font-family: var(--font-family-loccitane-sans);
+      font-size: var(--font-size-150);
+      font-weight: var(--font-weight-400);
+      line-height: var(--line-height-200);
+      min-width: 64px;
+      padding: var(--button-padding);
+      text-decoration: none;
+      cursor: inherit;
+      box-sizing: border-box;
 
-		.star {
-			display: block;
-		}
+      span {
+        font-family: var(--font-family-loccitane-sans);
+        font-size: var(--font-size-150);
+        font-weight: var(--font-weight-400);
+        line-height: var(--line-height-200);
+      }
+    }
 
-		o-link {
-			margin-left: 6px;
-			font-family: var(--font-family-loccitane-sans);
-			font-weight: var(--font-weight-500);
-			font-size: var(--font-size-100);
-			line-height: var(--line-height-160);
-			letter-spacing: var(--letter-spacing-400);
-			color: var(--color-content-action-secondary);
-		}
+    .button:hover:not([disabled]) {
+      background-color: var(--button-bg-hover);
+      color: var(--button-text-hover);
+    }
 
-		.review-link {
-			text-decoration: underline;
-			cursor: pointer;
-		}
-	`;Et([a({type:Number})],st.prototype,"rating",2);Et([a({type:String})],st.prototype,"reviewCount",2);Et([a({type:String})],st.prototype,"href",2);st=Et([y("o-rating")],st);/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const Po=o=>o.strings===void 0;/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const dt=(o,t)=>{var n;const e=o._$AN;if(e===void 0)return!1;for(const i of e)(n=i._$AO)==null||n.call(i,t,!1),dt(i,t);return!0},kt=o=>{let t,e;do{if((t=o._$AM)===void 0)break;e=t._$AN,e.delete(o),o=t}while((e==null?void 0:e.size)===0)},be=o=>{for(let t;t=o._$AM;o=t){let e=t._$AN;if(e===void 0)t._$AN=e=new Set;else if(e.has(o))break;e.add(o),zo(t)}};function Io(o){this._$AN!==void 0?(kt(this),this._$AM=o,be(this)):this._$AM=o}function Oo(o,t=!1,e=0){const n=this._$AH,i=this._$AN;if(i!==void 0&&i.size!==0)if(t)if(Array.isArray(n))for(let r=e;r<n.length;r++)dt(n[r],!1),kt(n[r]);else n!=null&&(dt(n,!1),kt(n));else dt(this,o)}const zo=o=>{o.type==Ut.CHILD&&(o._$AP??(o._$AP=Oo),o._$AQ??(o._$AQ=Io))};class Bo extends qt{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,e,n){super._$AT(t,e,n),be(this),this.isConnected=t._$AU}_$AO(t,e=!0){var n,i;t!==this.isConnected&&(this.isConnected=t,t?(n=this.reconnected)==null||n.call(this):(i=this.disconnected)==null||i.call(this)),e&&(dt(this,t),kt(this))}setValue(t){if(Po(this._$Ct))this._$Ct._$AI(t,this);else{const e=[...this._$Ct._$AH];e[this._$Ci]=t,this._$Ct._$AI(e,this,0)}}disconnected(){}reconnected(){}}class Do extends Bo{constructor(){super(...arguments),this.prevData={}}render(t){return d}update(t,[e]){var n;this.element!==t.element&&(this.element=t.element),this.host=((n=t.options)===null||n===void 0?void 0:n.host)||this.element,this.apply(e),this.groom(e),this.prevData={...e}}apply(t){if(!t)return;const{prevData:e,element:n}=this;for(const i in t){const r=t[i];r!==e[i]&&(n[i]=r)}}groom(t){const{prevData:e,element:n}=this;if(e)for(const i in e)(!t||!(i in t)&&n[i]===e[i])&&(n[i]=void 0)}}class Ho extends Do{constructor(){super(...arguments),this.eventData={}}apply(t){if(t)for(const e in t){const n=t[e];n!==this.eventData[e]&&this.applyEvent(e,n)}}applyEvent(t,e){const{prevData:n,element:i}=this;this.eventData[t]=e,n[t]&&i.removeEventListener(t,this,e),i.addEventListener(t,this,e)}groom(t){const{prevData:e,element:n}=this;if(e)for(const i in e)(!t||!(i in t)&&n[i]===e[i])&&this.groomEvent(i,e[i])}groomEvent(t,e){const{element:n}=this;delete this.eventData[t],n.removeEventListener(t,this,e)}handleEvent(t){const e=this.eventData[t.type];typeof e=="function"?e.call(this.host,t):e.handleEvent(t)}disconnected(){const{eventData:t,element:e}=this;for(const n in t){const i=n.slice(1),r=t[n];e.removeEventListener(i,this,r)}}reconnected(){const{eventData:t,element:e}=this;for(const n in t){const i=n.slice(1),r=t[n];e.addEventListener(i,this,r)}}}class Mo extends Ho{apply(t){if(!t)return;const{prevData:e,element:n}=this;for(const i in t){const r=t[i];if(r===e[i])continue;const s=i.slice(1);switch(i[0]){case"@":this.eventData[s]=r,this.applyEvent(s,r);break;case".":n[s]=r;break;case"?":r?n.setAttribute(s,""):n.removeAttribute(s);break;default:r!=null?n.setAttribute(i,String(r)):n.removeAttribute(i);break}}}groom(t){const{prevData:e,element:n}=this;if(e)for(const i in e){const r=i.slice(1);if(!t||!(i in t)&&n[r]===e[i])switch(i[0]){case"@":this.groomEvent(r,e[i]);break;case".":n[r]=void 0;break;case"?":n.removeAttribute(r);break;default:n.removeAttribute(i);break}}}}const le=Vt(Mo);var To=Object.defineProperty,jo=Object.getOwnPropertyDescriptor,g=(o,t,e,n)=>{for(var i=n>1?void 0:n?jo(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&To(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.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,n;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=(n=this.shadowRoot)==null?void 0:n.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 n=this.renderRoot.querySelector(".content"),i=async()=>{this.showDetail=!1,this.isHidingDetail=!1,this.showHeaderStartIcon=!1,await this.updateComplete,this._restoreFocusToOrigin()};if(n){this.showHeaderStartIcon=!1;const r=()=>{this.showDetail=!1,this.isHidingDetail=!1,n.removeEventListener("animationend",r),i()};n.addEventListener("animationend",r)}else this.showDetail=!1,this.isHidingDetail=!1,this.showHeaderStartIcon=!1;return}this.closePanel()},this._onDetailSlotChange=o=>{const n=o.target.assignedElements({flatten:!0}).flatMap(i=>Array.from(i.querySelectorAll("img")))[0];n==null||n.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 n,i,r,s;await this.updateComplete;const o=this.getDeepActiveElement(document);if(o&&o!==document.body)try{o.blur()}catch{}await new Promise(requestAnimationFrame);const t=(n=this.shadowRoot)==null?void 0:n.querySelector(".detail-view .return-btn");if(!t)return;t.updateComplete&&await t.updateComplete,(s=(r=((i=t.shadowRoot)==null?void 0:i.querySelector("button"))??t)==null?void 0:r.focus)==null||s.call(r,{preventScroll:!0})}_setPriceTabindex(){var n;const o=(n=this.shadowRoot)==null?void 0:n.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 n=this.renderRoot.querySelector(".o-whats-inside--content p");n==null||n.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 r=[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);r.push(...h,...c)}return r.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,n,i;if(this.showHeader){const r=((t=this.shadowRoot)==null?void 0:t.querySelector(".panel .close-btn"))||null,s=((e=r==null?void 0:r.shadowRoot)==null?void 0:e.querySelector("button"))||null;s&&((n=s.focus)==null||n.call(s))}else{const r=this.getFocusableElements()[0];(i=r==null?void 0:r.focus)==null||i.call(r)}}),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0}))}closePanel(){var t,e,n,i,r;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=(n=(e=this.previousFocusedElement.shadowRoot)==null?void 0:e.querySelector(".button"))==null?void 0:n.focus)==null||i.call(n):(r=this.previousFocusedElement)==null||r.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"
-				size="small"
-				class="close-btn"
-				bgstyle="background-light"
-				@click=${this.handleClosePanel}
-				@keydown=${this.handleClosePanel}
-				aria-label="${this.closeButtonLabel}"
-				aria-describedby="panel-title"
-				srlabel="${this.closeButtonLabel}"
-        		showsrlabel="true"
-				></o-icon-button>
-			</div>
-			`:null;return l`
-			<div class="overlay" style="z-index: ${this.zIndex}" @click=${this.handleClosePanel}></div>
-			<div
-				class="panel"
-				role="dialog"
-				aria-modal="true"
-				aria-labelledby="panel-title"
-				style="z-index: ${this.zIndex+1}"
-				tabindex="-1"
-			>
-				<div role="document">
-					${o}
+    .button:active:not([disabled]) {
+      background-color: var(--button-bg-pressed);
+    }
 
-					<div class="content ${this.isHidingDetail?"slide-out-right":""} ${this.showDetail?"with-detail":""}">
-					
-					${this.showDetail?l`
-							<div class="detail-view">
-								${o}
-								<div class="detail-content">
-									<slot name="detail" @slotchange=${this._onDetailSlotChange}></slot>
-								</div>
-							</div>
-						`:l`<slot></slot>`}
-					</div>
+    .button:focus-visible {
+      ${at};
+    }
 
-					${this.showFooter?l`
-								<div class="footer">
-									${this.firstButtonVariant&&this.firstButtonLabel?l`
-								<o-button
-									variant="${this.firstButtonVariant}"
-									@click=${this.handleFirstClick}
-									@keydown=${this.handleFirstClick}
-									${le(this.firstButtonProps)}
-								>
-									${this.firstButtonLabel}
-								</o-button>
-							`:null}
+    span.text + span.text::before {
+      content: "•";
+      margin-right: 8px;
+    }
 
-									${this.secondButtonVariant&&this.secondButtonLabel?l`
-								<o-button
-									variant="${this.secondButtonVariant}"
-									@click=${this.handleSecondClick}
-									@keydown=${this.handleSecondClick}
-									${le(this.secondButtonProps)}
-								>
-									${this.secondButtonLabel}
-								</o-button>
-							`:null}
-								</div>
-						`:null}
-				</div>
-			</div>
-		`}};p.styles=f`
-		:host {
-			--z-overlay: 99;
-			--z-panel: 100;
-			position: fixed;
-			top: 0;
-			right: 0;
-			height: 100%;
-			width: 100%;
-			pointer-events: none;
-			z-index: var(--z-overlay);
-			--side-panel-width: 100%;
-			--side-panel-max-width: 416px;
-			--font-size: var(--font-size-300);
-			--line-height: var(--line-height-240);
-		}
+    .icon-start,
+    .icon-end {
+      display: inline-flex;
+      align-items: center;
 
-		/* Hide content until it is initialized */
-		:host(:not([initialized])) .content {
-			display: none;
-		}
+      svg {
+        max-height: 20px;
+      }
+      svg[x] {
+        width: 15px;
+      }
+      path[fill],
+      path[class] {
+        fill: var(--button-text) !important;
+      }
+      path[stroke] {
+        stroke: var(--button-text) !important;
+      }
+    }
 
-		/* hide the host completely until its initialized */
-		:host(:not([initialized])) {
-			display: none !important;
-		}
+    :host([variant="tertiary"][fullwidth][endIcon]) .button {
+      justify-content: space-between;
+    }
 
-		.overlay {
-			position: absolute;
-			inset: 0;
-			backdrop-filter: blur(4px);
-			background-color: rgba(0, 0, 0, 0.3);
-			opacity: 0;
-			transition: opacity 0.3s ease;
-			pointer-events: none;
-			z-index: var(--z-overlay);
-		}
+    .button span {
+      display: inline-flex;
+      align-items: center;
+    }
 
-		:host([open]) .overlay {
-			opacity: 1;
-			pointer-events: auto;
-		}
+    .button slot {
+      display: inline-flex;
+      align-items: center;
+    }
+      
+    :host([variant="tertiary"][endIcon]) .button .icon-end {
+      width: var(--button-endicon-svg-width, 8px);
+    }
 
-		.panel {
-			position: absolute;
-			top: 0;
-			right: 0;
-			width: var(--side-panel-width);
-			max-width: var(--side-panel-max-width);
-			height: 100%;
-			background: white;
-			box-shadow: var(--colors-alpha-dark-60);
-			transform: translateX(100%);
-			transition: transform 0.3s ease;
-			display: flex;
-			flex-direction: column;
-			pointer-events: auto;
-			z-index: var(--z-panel);
-		}
+    :host([underlined]) span:not([class*="icon-"]),
+    :host([underlined]) .text,
+    :host([underlined]:not([text])) .button slot {
+      position: relative;
 
-		:host([open]) .panel {
-			transform: translateX(0%);
+      &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        border-bottom: var(--border-M, 1px) solid var(--button-text);
+      }
+    }
+
+    :host([underlined]:not([text])) .button slot {
+      display: inline-flex;
+      gap: 8px;
+    }
+
+    :host([underlined][withbadge]:not([text])) .button slot {
+      &::after {
+        width: calc(100% - var(--badge-outer-width, 19px) - var(--spacing-s, 8px))
+      }
+    }
+
+    //Icon movement on hover
+    :host([variant="tertiary"][endIcon]) .icon-end {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    :host([variant="tertiary"][endIcon]:hover) .icon-end {
+      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      transform: translateX(4px);
+    }
+    //End icon movment on hover
+  `;x([a()],b.prototype,"type",2);x([a()],b.prototype,"value",2);x([a({type:String,reflect:!0})],b.prototype,"variant",2);x([a({type:String})],b.prototype,"text",2);x([a({type:String})],b.prototype,"textsecond",2);x([a({type:Boolean,reflect:!0})],b.prototype,"fullwidth",2);x([a({type:Boolean,reflect:!0})],b.prototype,"disabled",2);x([a({type:String})],b.prototype,"startIconModel",2);x([a({type:String})],b.prototype,"endIconModel",2);x([a({type:Boolean,reflect:!0,attribute:"starticon"})],b.prototype,"startIcon",2);x([a({type:Boolean,reflect:!0,attribute:"endicon"})],b.prototype,"endIcon",2);x([a({type:String,attribute:"paneltarget"})],b.prototype,"panelTarget",2);x([a({type:String})],b.prototype,"href",2);x([a({type:String})],b.prototype,"target",2);x([a({type:Boolean,reflect:!0})],b.prototype,"underlined",2);x([a({type:Boolean,reflect:!0})],b.prototype,"withbadge",2);b=x([y("o-button")],b);var Bo=Object.defineProperty,Do=Object.getOwnPropertyDescriptor,At=(o,t,e,n)=>{for(var i=n>1?void 0:n?Do(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&Bo(t,e,i),i};let rt=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=N.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>
+				${C(o)}
+			</button>
+		`}setStatus(o){this.status=o,this.setAttribute("aria-pressed",String(this.status==="filled")),this.requestUpdate()}setAriaDescribedBy(o){this.ariaDescribedBy=o,this.requestUpdate()}setLabel(o){this.label=o,this.requestUpdate()}};rt.styles=f`
+		:host {
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+			outline: none !important;
 		}
 
-		.header {
-			flex: 0 0 auto;
+		.wishlist-button {
 			display: flex;
-			justify-content: space-between;
-			padding: 20px 16px;
-			border-bottom: var(--border-050) solid var(--color-border-tertiary);
-
-			.panel-title {
-				font-family: var(--font-family-loccitane-serif);
-				font-size: var(--font-size);
-				font-weight: var(--font-weight-400);
-				line-height: var(--line-height);
-				font-style: italic;
-				display: -webkit-box;
-				-webkit-line-clamp: 2;
-				-webkit-box-orient: vertical;
-				height: auto;
-				margin-top: auto;
-				margin-bottom: auto;
-				overflow: hidden;
-				width: 100%;
-				color: var(--color-content-heading);
-			}
+			justify-content: center;
+			align-items: center;
+			width: 40px;
+			height: 40px;
+			border: transparent;
+			border-radius: var(--radius-full);
+			background-color: var(--color-alpha-light-strong);
+			position: relative;
+			cursor: pointer;
+		}
 
-			.close-btn {
-				margin-left: 8px;
-				margin-top: 0;
-				flex-direction: column;
-				justify-content: start;
-			}
+		.wishlist-button:hover {
+			background-color: var(--color-alpha-light-stronger);
+		}
 
-			.return-btn {
-				margin-right: 8px;
-			}
+		.wishlist-button:active {
+			background-color: var(--color-alpha-light-strongest);
 		}
 
-		.panel:focus-visible,
-		.close-btn:focus-visible {
-			${at}
+		.wishlist-button:focus-visible {
+			${at};
 		}
 
-		.content {
-			flex: 1 1 auto;
-			overflow-y: auto;
-			overflow-x: hidden;
-			padding: var(--spacing-xl);
+		.wishlist-button:hover svg path {
+			fill: var(--color-content-action-secondary);
+		}
 
-			&.with-detail {
-				width: 100%;
-				height: 100%;
-				position: absolute;
-				top: 0;
-				left: 0;
-				background: var(--color-container-bg-white);
-				z-index: 3;
-				padding: var(--spacing-4-xs);
-			}
+		:host([status="filled"]) .wishlist-button svg path {
+			fill: var(--color-content-action-secondary);
 		}
 
-		.footer {
-			flex: 0 0 auto;
-			padding: var(--spacing-xl);
-			border-top: var(--border-050) solid var(--color-border-tertiary);
-			display: flex;
-    		flex-direction: column;
-			gap: var(--spacing-l);
-			justify-content: flex-start;
+		:host([status="empty"]) .wishlist-button svg path {
+			fill: var(--color-alpha-light-strong);
 		}
 
-		/* Mobile */
-		@media (max-width: 767px) {
-			:host {
-				--side-panel-width: 100%;
-				--side-panel-max-width: none;
+		@media (hover: hover) and (pointer: fine) {
+			:host([status="empty"]) .wishlist-button:hover svg path {
+				fill: var(--color-content-action-secondary);
 			}
 		}
 
-		/* Tablet */
-		@media (min-width: 768px) and (max-width: 1024px) {
-			:host {
-				--side-panel-width: 375px;
-				--side-panel-max-width: 375px;
-			}
+		.sr-only {
+			border: 0 !important;
+			clip: rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;
+			-webkit-clip-path: inset(50%) !important;
+			clip-path: inset(50%) !important;
+			height: 0.1rem !important;
+			margin: -0.1rem !important;
+			overflow: hidden !important;
+			padding: 0 !important;
+			position: absolute !important;
+			width: 0.1rem !important;
+			white-space: nowrap !important;
 		}
+	`;At([a({type:String,reflect:!0})],rt.prototype,"status",2);At([a({type:String,reflect:!0})],rt.prototype,"ariaDescribedBy",2);At([a({type:String,reflect:!0})],rt.prototype,"label",2);rt=At([y("o-wishlist-button")],rt);var Ho=Object.defineProperty,Mo=Object.getOwnPropertyDescriptor,ot=(o,t,e,n)=>{for(var i=n>1?void 0:n?Mo(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&Ho(t,e,i),i};let F=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="${k(this.target||void 0)}"
+                @click="${this._handleClick}"
+            >
+                ${this.endIcon&&this.reverseEndIcon?l`
+                            <o-icon-button
+                                icon="chevronLeft"
+                                bgstyle="${this.inverse?"none-light":"none-contrast"}"
+                                size="xsmall"
+                                aria-hidden="true"
+                                type="span"
+                            ></o-icon-button>
+                    `:null}
+                <span class="link-text"><slot></slot></span>
+                ${this.endIcon&&!this.reverseEndIcon?l`
+                            <o-icon-button
+                                icon="chevronRight"
+                                bgstyle="${this.inverse?"none-light":"none-contrast"}"
+                                size="xsmall"
+                                aria-hidden="true"
+                                type="span"
+                            ></o-icon-button>
+                    `:null}
+            </a>
+        `}};F.styles=f`
+        :host([template="standard"]) a {
+            color: var(--color-content-action-secondary);
+            font-size: var(--font-size-200);
+            font-weight: var(--font-weight-400);
+            line-height: var(--line-height-240);
+            letter-spacing: var(--letter-spacing-400);
+            font-family: var(--font-family-loccitane-serif);
+        }
 
-		@media (min-width: 1025px) {
-			:host {
-				--side-panel-width: 100%;
-				--side-panel-max-width: 416px;
-				--font-size: var(--font-size-400);
-				--line-height: var(--line-height-280);
-			}
+        :host([template="discret"]) a {
+            color: var(--color-content-action-secondary);
+            font-size: var(--font-size-100);
+            font-weight: var(--font-weight-400);
+            line-height: var(--line-height-160);
+            letter-spacing: var(--letter-spacing-400);
+            font-family: var(--font-family-loccitane-sans);
+        }
+
+        :host([template="review"]) a {
+            color: var(--color-content-action-secondary);
+            font-size: var(--font-size-100);
+            font-weight: var(--font-weight-500);
+            line-height: var(--line-height-160);
+            letter-spacing: var(--letter-spacing-400);
+            font-family: var(--font-family-loccitane-sans);
+            text-transform: uppercase;
+        }
+
+        :host([inverse]) a {
+            color: var(--color-container-action-tertiary-default);
+        }
+
+        :host([endIcon]) a o-icon-button {
+            margin-left: 2px;
+            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        :host([endIcon][reverseEndIcon]) a o-icon-button {
+            margin-right: 2px;
+            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        :host([endIcon]) a {
+            &:hover {
+                o-icon-button {
+                    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+                    :host(:not([reverseEndIcon])) & {
+                        transform: translateX(4px);
+                    }
+
+                    :host([reverseEndIcon]) & {
+                        transform: translateX(-4px);
+                    }
+                }
+            }
+        }
+
+        :host a {
+            position: relative;
+            text-decoration: none;
+            color: inherit;
+        }
+
+        .link-text {
+            position: relative;
+            display: inline-block;
+        }
+
+        .link-text::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            opacity: 1;
+            height: 1px;
+            background-color: currentColor;
+            transition: opacity 0.3s ease, height 0.3s ease;
+            pointer-events: none;
+        }
+
+        :host a:hover .link-text::after {
+            opacity: 0;
+            height: 1px;
+        }
+        /* End of underline effect */
+    `;ot([a({type:String})],F.prototype,"href",2);ot([a({type:String})],F.prototype,"target",2);ot([a({type:String,reflect:!0})],F.prototype,"template",2);ot([a({type:Boolean,reflect:!0})],F.prototype,"inverse",2);ot([a({type:Boolean,reflect:!0})],F.prototype,"endIcon",2);ot([a({type:Boolean,reflect:!0})],F.prototype,"reverseEndIcon",2);F=ot([y("o-link")],F);var To=Object.defineProperty,jo=Object.getOwnPropertyDescriptor,Et=(o,t,e,n)=>{for(var i=n>1?void 0:n?jo(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&To(t,e,i),i};let st=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 n;e>=1?n=100:e<=0?n=0:n=Math.round(e*100/25)*25,o.push(`star-${n}`)}return o}render(){const o=this.getStarKeys();return l`
+			<div class="rating">
+			<div class="stars">
+				${o.map(t=>l`<span class="star">${C(N[t]??"")}</span>`)}
+			</div>
+			${this.reviewCount!=null&&this.href!=null?l`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>`:null}
+			</div>
+		`}};st.styles=f`
+		svg {
+			width: 12px;
+			height: 12px;
 		}
-		
-		@keyframes slideInRight {
-			from {
-				transform: translateX(100%);
-			}
-			to {
-				transform: translateX(0%);
-			}
+		.rating {
+			display: flex;
+			align-items: center;
 		}
-		
-		@keyframes slideOutRight {
-			from {
-				transform: translateX(0%);
-			}
-			to {
-				transform: translateX(100%);
-			}
+
+		.stars {
+			display: flex;
+			gap: 2px;
 		}
 
-		.slide-out-right {
-			animation: slideOutRight 0.3s ease-in forwards;
+		.star {
+			display: block;
 		}
-		
-		.detail-view {
-			animation: slideInRight 0.3s ease-out both;
+
+		o-link {
+			margin-left: 6px;
+			font-family: var(--font-family-loccitane-sans);
+			font-weight: var(--font-weight-500);
+			font-size: var(--font-size-100);
+			line-height: var(--line-height-160);
+			letter-spacing: var(--letter-spacing-400);
+			color: var(--color-content-action-secondary);
 		}
-		.detail-content {
-			padding: var(--spacing-xl);
+
+		.review-link {
+			text-decoration: underline;
+			cursor: pointer;
 		}
-	`;p.focusablesSelector='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';p.focusablesCustomElementsSelector="o-icon-button, o-button";g([a({type:Boolean,reflect:!0})],p.prototype,"open",2);g([a({type:Boolean,reflect:!0})],p.prototype,"showHeader",2);g([a({type:Boolean,reflect:!0})],p.prototype,"showFooter",2);g([a({type:Boolean,reflect:!0})],p.prototype,"showHeaderStartIcon",2);g([a({type:String,reflect:!0})],p.prototype,"headerTitle",2);g([a({type:String,reflect:!0})],p.prototype,"headerTitleClassName",2);g([a({type:String,reflect:!0})],p.prototype,"closeButtonLabel",2);g([a({type:String,reflect:!0})],p.prototype,"firstButtonLabel",2);g([a({type:String,reflect:!0})],p.prototype,"firstButtonVariant",2);g([a({type:Object,reflect:!0})],p.prototype,"firstButtonProps",2);g([a({type:Boolean,reflect:!0})],p.prototype,"onFirstButtonClickClose",2);g([a({type:String,reflect:!0})],p.prototype,"secondButtonLabel",2);g([a({type:String,reflect:!0})],p.prototype,"secondButtonVariant",2);g([a({type:Object,reflect:!0})],p.prototype,"secondButtonProps",2);g([a({type:Boolean,reflect:!0})],p.prototype,"onSecondButtonClickClose",2);g([a({type:Boolean,reflect:!0})],p.prototype,"disablePortal",2);g([a({type:Number,reflect:!0})],p.prototype,"zIndex",2);g([a({type:Boolean,reflect:!0})],p.prototype,"initialized",2);g([a({type:Boolean})],p.prototype,"showDetail",2);g([a({type:Boolean})],p.prototype,"isHidingDetail",2);p=g([y("o-side-panel")],p);var Ro=Object.defineProperty,No=Object.getOwnPropertyDescriptor,X=(o,t,e,n)=>{for(var i=n>1?void 0:n?No(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&Ro(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`
+	`;Et([a({type:Number})],st.prototype,"rating",2);Et([a({type:String})],st.prototype,"reviewCount",2);Et([a({type:String})],st.prototype,"href",2);st=Et([y("o-rating")],st);var Ro=Object.defineProperty,No=Object.getOwnPropertyDescriptor,X=(o,t,e,n)=>{for(var i=n>1?void 0:n?No(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&Ro(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"