@florid-kit/components 0.9.14 → 0.9.16

package/index.js

@@ -10,9 +10,9 @@
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const ht=globalThis,_t=ht.trustedTypes,oe=_t?_t.createPolicy("lit-html",{createHTML:o=>o}):void 0,de="$lit$",K=`lit$${Math.random().toFixed(9).slice(2)}$`,pe="?"+K,Ee=`<${pe}>`,tt=document,pt=()=>tt.createComment(""),ut=o=>o===null||typeof o!="object"&&typeof o!="function",Rt=Array.isArray,Ae=o=>Rt(o)||typeof(o==null?void 0:o[Symbol.iterator])=="function",Pt=`[ 	
+ */const ht=globalThis,_t=ht.trustedTypes,oe=_t?_t.createPolicy("lit-html",{createHTML:o=>o}):void 0,de="$lit$",K=`lit$${Math.random().toFixed(9).slice(2)}$`,pe="?"+K,Ae=`<${pe}>`,tt=document,pt=()=>tt.createComment(""),ut=o=>o===null||typeof o!="object"&&typeof o!="function",Rt=Array.isArray,Ee=o=>Rt(o)||typeof(o==null?void 0:o[Symbol.iterator])=="function",Pt=`[ 	
 \f\r]`,lt=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,ie=/-->/g,ne=/>/g,J=RegExp(`>|${Pt}(?:([^\\s"'>=/]+)(${Pt}*=${Pt}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`,"g"),re=/'/g,se=/"/g,ue=/^(?:script|style|textarea|title)$/i,Le=o=>(t,...e)=>({_$litType$:o,strings:t,values:e}),l=Le(1),G=Symbol.for("lit-noChange"),d=Symbol.for("lit-nothing"),ae=new WeakMap,Q=tt.createTreeWalker(tt,129);function ve(o,t){if(!Rt(o)||!o.hasOwnProperty("raw"))throw Error("invalid template strings array");return oe!==void 0?oe.createHTML(t):t}const Pe=(o,t)=>{const e=o.length-1,n=[];let i,r=t===2?"<svg>":t===3?"<math>":"",s=lt;for(let h=0;h<e;h++){const c=o[h];let m,w,v=-1,R=0;for(;R<c.length&&(s.lastIndex=R,w=s.exec(c),w!==null);)R=s.lastIndex,s===lt?w[1]==="!--"?s=ie:w[1]!==void 0?s=ne:w[2]!==void 0?(ue.test(w[2])&&(i=RegExp("</"+w[2],"g")),s=J):w[3]!==void 0&&(s=J):s===J?w[0]===">"?(s=i??lt,v=-1):w[1]===void 0?v=-2:(v=s.lastIndex-w[2].length,m=w[1],s=w[3]===void 0?J:w[3]==='"'?se:re):s===se||s===re?s=J:s===ie||s===ne?s=lt:(s=J,i=void 0);const Z=s===J&&o[h+1].startsWith("/>")?" ":"";r+=s===lt?c+Ee:v>=0?(n.push(m),c.slice(0,v)+de+c.slice(v)+K+Z):c+K+(v===-2?h:Z)}return[ve(o,r+(o[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),n]};class vt{constructor({strings:t,_$litType$:e},n){let i;this.parts=[];let r=0,s=0;const h=t.length-1,c=this.parts,[m,w]=Pe(t,e);if(this.el=vt.createElement(m,n),Q.currentNode=this.el.content,e===2||e===3){const v=this.el.content.firstChild;v.replaceWith(...v.childNodes)}for(;(i=Q.nextNode())!==null&&c.length<h;){if(i.nodeType===1){if(i.hasAttributes())for(const v of i.getAttributeNames())if(v.endsWith(de)){const R=w[s++],Z=i.getAttribute(v).split(K),wt=/([.?@])?(.*)/.exec(R);c.push({type:1,index:r,name:wt[2],strings:Z,ctor:wt[1]==="."?Oe:wt[1]==="?"?ze:wt[1]==="@"?Be:St}),i.removeAttribute(v)}else v.startsWith(K)&&(c.push({type:6,index:r}),i.removeAttribute(v));if(ue.test(i.tagName)){const v=i.textContent.split(K),R=v.length-1;if(R>0){i.textContent=_t?_t.emptyScript:"";for(let Z=0;Z<R;Z++)i.append(v[Z],pt()),Q.nextNode(),c.push({type:2,index:++r});i.append(v[R],pt())}}}else if(i.nodeType===8)if(i.data===pe)c.push({type:2,index:r});else{let v=-1;for(;(v=i.data.indexOf(K,v+1))!==-1;)c.push({type:7,index:r}),v+=K.length-1}r++}}static createElement(t,e){const n=tt.createElement("template");return n.innerHTML=t,n}}function nt(o,t,e=o,n){var s,h;if(t===G)return t;let i=n!==void 0?(s=e._$Co)==null?void 0:s[n]:e._$Cl;const r=ut(t)?void 0:t._$litDirective$;return(i==null?void 0:i.constructor)!==r&&((h=i==null?void 0:i._$AO)==null||h.call(i,!1),r===void 0?i=void 0:(i=new r(o),i._$AT(o,e,n)),n!==void 0?(e._$Co??(e._$Co=[]))[n]=i:e._$Cl=i),i!==void 0&&(t=nt(o,i._$AS(o,t.values),i,n)),t}class Ie{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:n}=this._$AD,i=((t==null?void 0:t.creationScope)??tt).importNode(e,!0);Q.currentNode=i;let r=Q.nextNode(),s=0,h=0,c=n[0];for(;c!==void 0;){if(s===c.index){let m;c.type===2?m=new xt(r,r.nextSibling,this,t):c.type===1?m=new c.ctor(r,c.name,c.strings,this,t):c.type===6&&(m=new De(r,this,t)),this._$AV.push(m),c=n[++h]}s!==(c==null?void 0:c.index)&&(r=Q.nextNode(),s++)}return Q.currentNode=tt,i}p(t){let e=0;for(const n of this._$AV)n!==void 0&&(n.strings!==void 0?(n._$AI(t,n,e),e+=n.strings.length-2):n._$AI(t[e])),e++}}class xt{get _$AU(){var t;return((t=this._$AM)==null?void 0:t._$AU)??this._$Cv}constructor(t,e,n,i){this.type=2,this._$AH=d,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=n,this.options=i,this._$Cv=(i==null?void 0:i.isConnected)??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&(t==null?void 0:t.nodeType)===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=nt(this,t,e),ut(t)?t===d||t==null||t===""?(this._$AH!==d&&this._$AR(),this._$AH=d):t!==this._$AH&&t!==G&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):Ae(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==d&&ut(this._$AH)?this._$AA.nextSibling.data=t:this.T(tt.createTextNode(t)),this._$AH=t}$(t){var r;const{values:e,_$litType$:n}=t,i=typeof n=="number"?this._$AC(t):(n.el===void 0&&(n.el=vt.createElement(ve(n.h,n.h[0]),this.options)),n);if(((r=this._$AH)==null?void 0:r._$AD)===i)this._$AH.p(e);else{const s=new Ie(i,this),h=s.u(this.options);s.p(e),this.T(h),this._$AH=s}}_$AC(t){let e=ae.get(t.strings);return e===void 0&&ae.set(t.strings,e=new vt(t)),e}k(t){Rt(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let n,i=0;for(const r of t)i===e.length?e.push(n=new xt(this.O(pt()),this.O(pt()),this,this.options)):n=e[i],n._$AI(r),i++;i<e.length&&(this._$AR(n&&n._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var n;for((n=this._$AP)==null?void 0:n.call(this,!1,!0,e);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var e;this._$AM===void 0&&(this._$Cv=t,(e=this._$AP)==null||e.call(this,t))}}class St{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,n,i,r){this.type=1,this._$AH=d,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=r,n.length>2||n[0]!==""||n[1]!==""?(this._$AH=Array(n.length-1).fill(new String),this.strings=n):this._$AH=d}_$AI(t,e=this,n,i){const r=this.strings;let s=!1;if(r===void 0)t=nt(this,t,e,0),s=!ut(t)||t!==this._$AH&&t!==G,s&&(this._$AH=t);else{const h=t;let c,m;for(t=r[0],c=0;c<r.length-1;c++)m=nt(this,h[n+c],e,c),m===G&&(m=this._$AH[c]),s||(s=!ut(m)||m!==this._$AH[c]),m===d?t=d:t!==d&&(t+=(m??"")+r[c+1]),this._$AH[c]=m}s&&!i&&this.j(t)}j(t){t===d?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class Oe extends St{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===d?void 0:t}}class ze extends St{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==d)}}class Be extends St{constructor(t,e,n,i,r){super(t,e,n,i,r),this.type=5}_$AI(t,e=this){if((t=nt(this,t,e,0)??d)===G)return;const n=this._$AH,i=t===d&&n!==d||t.capture!==n.capture||t.once!==n.once||t.passive!==n.passive,r=t!==d&&(n===d||i);i&&this.element.removeEventListener(this.name,this,n),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e;typeof this._$AH=="function"?this._$AH.call(((e=this.options)==null?void 0:e.host)??this.element,t):this._$AH.handleEvent(t)}}class De{constructor(t,e,n){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=n}get _$AU(){return this._$AM._$AU}_$AI(t){nt(this,t)}}const It=ht.litHtmlPolyfillSupport;It==null||It(vt,xt),(ht.litHtmlVersions??(ht.litHtmlVersions=[])).push("3.3.0");const He=(o,t,e)=>{const n=(e==null?void 0:e.renderBefore)??t;let i=n._$litPart$;if(i===void 0){const r=(e==null?void 0:e.renderBefore)??null;n._$litPart$=i=new xt(t.insertBefore(pt(),r),r,void 0,e??{})}return i._$AI(o),i};/**
+\f\r"'\`<>=]|("|')|))|$)`,"g"),re=/'/g,se=/"/g,ue=/^(?:script|style|textarea|title)$/i,Le=o=>(t,...e)=>({_$litType$:o,strings:t,values:e}),l=Le(1),G=Symbol.for("lit-noChange"),d=Symbol.for("lit-nothing"),ae=new WeakMap,Q=tt.createTreeWalker(tt,129);function ve(o,t){if(!Rt(o)||!o.hasOwnProperty("raw"))throw Error("invalid template strings array");return oe!==void 0?oe.createHTML(t):t}const Pe=(o,t)=>{const e=o.length-1,n=[];let i,r=t===2?"<svg>":t===3?"<math>":"",s=lt;for(let h=0;h<e;h++){const c=o[h];let m,w,v=-1,R=0;for(;R<c.length&&(s.lastIndex=R,w=s.exec(c),w!==null);)R=s.lastIndex,s===lt?w[1]==="!--"?s=ie:w[1]!==void 0?s=ne:w[2]!==void 0?(ue.test(w[2])&&(i=RegExp("</"+w[2],"g")),s=J):w[3]!==void 0&&(s=J):s===J?w[0]===">"?(s=i??lt,v=-1):w[1]===void 0?v=-2:(v=s.lastIndex-w[2].length,m=w[1],s=w[3]===void 0?J:w[3]==='"'?se:re):s===se||s===re?s=J:s===ie||s===ne?s=lt:(s=J,i=void 0);const Z=s===J&&o[h+1].startsWith("/>")?" ":"";r+=s===lt?c+Ae:v>=0?(n.push(m),c.slice(0,v)+de+c.slice(v)+K+Z):c+K+(v===-2?h:Z)}return[ve(o,r+(o[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),n]};class vt{constructor({strings:t,_$litType$:e},n){let i;this.parts=[];let r=0,s=0;const h=t.length-1,c=this.parts,[m,w]=Pe(t,e);if(this.el=vt.createElement(m,n),Q.currentNode=this.el.content,e===2||e===3){const v=this.el.content.firstChild;v.replaceWith(...v.childNodes)}for(;(i=Q.nextNode())!==null&&c.length<h;){if(i.nodeType===1){if(i.hasAttributes())for(const v of i.getAttributeNames())if(v.endsWith(de)){const R=w[s++],Z=i.getAttribute(v).split(K),wt=/([.?@])?(.*)/.exec(R);c.push({type:1,index:r,name:wt[2],strings:Z,ctor:wt[1]==="."?Oe:wt[1]==="?"?ze:wt[1]==="@"?Be:St}),i.removeAttribute(v)}else v.startsWith(K)&&(c.push({type:6,index:r}),i.removeAttribute(v));if(ue.test(i.tagName)){const v=i.textContent.split(K),R=v.length-1;if(R>0){i.textContent=_t?_t.emptyScript:"";for(let Z=0;Z<R;Z++)i.append(v[Z],pt()),Q.nextNode(),c.push({type:2,index:++r});i.append(v[R],pt())}}}else if(i.nodeType===8)if(i.data===pe)c.push({type:2,index:r});else{let v=-1;for(;(v=i.data.indexOf(K,v+1))!==-1;)c.push({type:7,index:r}),v+=K.length-1}r++}}static createElement(t,e){const n=tt.createElement("template");return n.innerHTML=t,n}}function nt(o,t,e=o,n){var s,h;if(t===G)return t;let i=n!==void 0?(s=e._$Co)==null?void 0:s[n]:e._$Cl;const r=ut(t)?void 0:t._$litDirective$;return(i==null?void 0:i.constructor)!==r&&((h=i==null?void 0:i._$AO)==null||h.call(i,!1),r===void 0?i=void 0:(i=new r(o),i._$AT(o,e,n)),n!==void 0?(e._$Co??(e._$Co=[]))[n]=i:e._$Cl=i),i!==void 0&&(t=nt(o,i._$AS(o,t.values),i,n)),t}class Ie{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:n}=this._$AD,i=((t==null?void 0:t.creationScope)??tt).importNode(e,!0);Q.currentNode=i;let r=Q.nextNode(),s=0,h=0,c=n[0];for(;c!==void 0;){if(s===c.index){let m;c.type===2?m=new xt(r,r.nextSibling,this,t):c.type===1?m=new c.ctor(r,c.name,c.strings,this,t):c.type===6&&(m=new De(r,this,t)),this._$AV.push(m),c=n[++h]}s!==(c==null?void 0:c.index)&&(r=Q.nextNode(),s++)}return Q.currentNode=tt,i}p(t){let e=0;for(const n of this._$AV)n!==void 0&&(n.strings!==void 0?(n._$AI(t,n,e),e+=n.strings.length-2):n._$AI(t[e])),e++}}class xt{get _$AU(){var t;return((t=this._$AM)==null?void 0:t._$AU)??this._$Cv}constructor(t,e,n,i){this.type=2,this._$AH=d,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=n,this.options=i,this._$Cv=(i==null?void 0:i.isConnected)??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&(t==null?void 0:t.nodeType)===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=nt(this,t,e),ut(t)?t===d||t==null||t===""?(this._$AH!==d&&this._$AR(),this._$AH=d):t!==this._$AH&&t!==G&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):Ee(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==d&&ut(this._$AH)?this._$AA.nextSibling.data=t:this.T(tt.createTextNode(t)),this._$AH=t}$(t){var r;const{values:e,_$litType$:n}=t,i=typeof n=="number"?this._$AC(t):(n.el===void 0&&(n.el=vt.createElement(ve(n.h,n.h[0]),this.options)),n);if(((r=this._$AH)==null?void 0:r._$AD)===i)this._$AH.p(e);else{const s=new Ie(i,this),h=s.u(this.options);s.p(e),this.T(h),this._$AH=s}}_$AC(t){let e=ae.get(t.strings);return e===void 0&&ae.set(t.strings,e=new vt(t)),e}k(t){Rt(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let n,i=0;for(const r of t)i===e.length?e.push(n=new xt(this.O(pt()),this.O(pt()),this,this.options)):n=e[i],n._$AI(r),i++;i<e.length&&(this._$AR(n&&n._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var n;for((n=this._$AP)==null?void 0:n.call(this,!1,!0,e);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var e;this._$AM===void 0&&(this._$Cv=t,(e=this._$AP)==null||e.call(this,t))}}class St{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,n,i,r){this.type=1,this._$AH=d,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=r,n.length>2||n[0]!==""||n[1]!==""?(this._$AH=Array(n.length-1).fill(new String),this.strings=n):this._$AH=d}_$AI(t,e=this,n,i){const r=this.strings;let s=!1;if(r===void 0)t=nt(this,t,e,0),s=!ut(t)||t!==this._$AH&&t!==G,s&&(this._$AH=t);else{const h=t;let c,m;for(t=r[0],c=0;c<r.length-1;c++)m=nt(this,h[n+c],e,c),m===G&&(m=this._$AH[c]),s||(s=!ut(m)||m!==this._$AH[c]),m===d?t=d:t!==d&&(t+=(m??"")+r[c+1]),this._$AH[c]=m}s&&!i&&this.j(t)}j(t){t===d?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class Oe extends St{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===d?void 0:t}}class ze extends St{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==d)}}class Be extends St{constructor(t,e,n,i,r){super(t,e,n,i,r),this.type=5}_$AI(t,e=this){if((t=nt(this,t,e,0)??d)===G)return;const n=this._$AH,i=t===d&&n!==d||t.capture!==n.capture||t.once!==n.once||t.passive!==n.passive,r=t!==d&&(n===d||i);i&&this.element.removeEventListener(this.name,this,n),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e;typeof this._$AH=="function"?this._$AH.call(((e=this.options)==null?void 0:e.host)??this.element,t):this._$AH.handleEvent(t)}}class De{constructor(t,e,n){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=n}get _$AU(){return this._$AM._$AU}_$AI(t){nt(this,t)}}const It=ht.litHtmlPolyfillSupport;It==null||It(vt,xt),(ht.litHtmlVersions??(ht.litHtmlVersions=[])).push("3.3.0");const He=(o,t,e)=>{const n=(e==null?void 0:e.renderBefore)??t;let i=n._$litPart$;if(i===void 0){const r=(e==null?void 0:e.renderBefore)??null;n._$litPart$=i=new xt(t.insertBefore(pt(),r),r,void 0,e??{})}return i._$AI(o),i};/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
@@ -158,966 +158,967 @@
  * @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}
-      >
-          ${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,Et=(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;
-		}
-	`;Et([a({type:String,reflect:!0})],rt.prototype,"status",2);Et([a({type:String,reflect:!0})],rt.prototype,"ariaDescribedBy",2);Et([a({type:String,reflect:!0})],rt.prototype,"label",2);rt=Et([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);
+		.content {
+			flex: 1 1 auto;
+			overflow-y: auto;
+			overflow-x: hidden;
+			padding: var(--spacing-xl);
+
+			&.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:disabled {
-			background-color: var(--color-container-disabled);
-			cursor: default;
-
-			svg {
-				fill: var(--color-content-disabled);
+		.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;
+		}
 
-				path {
-					fill: var(--color-content-disabled);
-				}
+		/* Mobile */
+		@media (max-width: 767px) {
+			:host {
+				--side-panel-width: 100%;
+				--side-panel-max-width: none;
 			}
 		}
 
-		.icon-button:focus-visible {
-			${at}
+		/* Tablet */
+		@media (min-width: 768px) and (max-width: 1024px) {
+			:host {
+				--side-panel-width: 375px;
+				--side-panel-max-width: 375px;
+			}
 		}
 
-		.sr-only {
-			display: none;
+		@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%);
+			}
 		}
-	`;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,Eo=Object.getOwnPropertyDescriptor,ot=(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&&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);
-        }
+		.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([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(.a--tabfocus) {
+      outline: none !important;
+    }
 
-        :host([inverse]) a {
-            color: var(--color-container-action-tertiary-default);
-        }
+    :host([fullwidth]) {
+      width: 100%;
+    }
 
-        :host([endIcon]) a o-icon-button {
-            margin-left: 2px;
-            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 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 */
+    }
 
-        :host([endIcon][reverseEndIcon]) a o-icon-button {
-            margin-right: 2px;
-            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-        }
+    :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([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="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;
+    }
 
-                    :host([reverseEndIcon]) & {
-                        transform: translateX(-4px);
-                    }
-                }
-            }
-        }
+    :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; 
+    }
 
-        :host a {
-            position: relative;
-            text-decoration: none;
-            color: inherit;
-        }
+    :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;
+    }
 
-        .link-text {
-            position: relative;
-            display: inline-block;
-        }
+    :host([disabled][variant="secondary"]) {
+      --button-border: var(--color-border-secondary);
+    }
 
-        .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;
-        }
+    .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;
 
-        :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 Ao=Object.defineProperty,Lo=Object.getOwnPropertyDescriptor,At=(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&&Ao(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;
-		}
+      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);
+      }
+    }
 
-		.stars {
-			display: flex;
-			gap: 2px;
-		}
+    .button:hover:not([disabled]) {
+      background-color: var(--button-bg-hover);
+      color: var(--button-text-hover);
+    }
 
-		.star {
-			display: block;
-		}
+    .button:active:not([disabled]) {
+      background-color: var(--button-bg-pressed);
+    }
 
-		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:focus-visible {
+      ${at};
+    }
 
-		.review-link {
-			text-decoration: underline;
-			cursor: pointer;
-		}
-	`;At([a({type:Number})],st.prototype,"rating",2);At([a({type:String})],st.prototype,"reviewCount",2);At([a({type:String})],st.prototype,"href",2);st=At([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}
+    span.text + span.text::before {
+      content: "•";
+      margin-right: 8px;
+    }
 
-					<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>
+    .icon-start,
+    .icon-end {
+      display: inline-flex;
+      align-items: center;
 
-					${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}
+      svg {
+        max-height: 20px;
+      }
+      svg[x] {
+        width: 15px;
+      }
+      path[fill],
+      path[class] {
+        fill: var(--button-text) !important;
+      }
+      path[stroke] {
+        stroke: var(--button-text) !important;
+      }
+    }
 
-									${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);
-		}
+    :host([variant="tertiary"][fullwidth][endIcon]) .button {
+      justify-content: space-between;
+    }
 
-		/* Hide content until it is initialized */
-		:host(:not([initialized])) .content {
-			display: none;
-		}
+    .button span {
+      display: inline-flex;
+      align-items: center;
+    }
 
-		/* hide the host completely until its initialized */
-		:host(:not([initialized])) {
-			display: none !important;
-		}
+    .button slot {
+      display: inline-flex;
+      align-items: center;
+    }
+      
+    :host([variant="tertiary"][endIcon]) .button .icon-end {
+      width: var(--button-endicon-svg-width, 8px);
+    }
 
-		.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);
-		}
+    :host([underlined]) span:not([class*="icon-"]),
+    :host([underlined]) .text,
+    :host([underlined]:not([text])) .button slot {
+      position: relative;
 
-		:host([open]) .overlay {
-			opacity: 1;
-			pointer-events: auto;
-		}
+      &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        border-bottom: var(--border-M, 1px) solid var(--button-text);
+      }
+    }
 
-		.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]:not([text])) .button slot {
+      display: inline-flex;
+      gap: 8px;
+    }
 
-		:host([open]) .panel {
-			transform: translateX(0%);
+    :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"
@@ -1645,7 +1646,7 @@
         background-color: var(--color-container-action-primary-pressed);
       }
     }
-  `;Ht=Go([y("o-dots")],Ht);var Xo=Object.defineProperty,Jo=Object.getOwnPropertyDescriptor,M=(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&&Xo(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=N.checkstroke.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"'),t=this.options.find(e=>e.value===this.value);return l`
+  `;Ht=Go([y("o-dots")],Ht);var Xo=Object.defineProperty,Jo=Object.getOwnPropertyDescriptor,M=(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&&Xo(t,e,i),i};let A=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=N.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"
@@ -1707,7 +1708,7 @@
 					</ul>`:null}
 
 			<input type="hidden" name="${this.name}" .value="${this.value}" />
-		`}};E.styles=f`
+		`}};A.styles=f`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -1882,7 +1883,7 @@
 		input[type="hidden"] {
 			display: none;
 		}
-	`;M([a({type:Array,reflect:!0})],E.prototype,"options",2);M([a({type:String,reflect:!0})],E.prototype,"value",2);M([a({type:String,reflect:!0})],E.prototype,"name",2);M([a({type:String,reflect:!0})],E.prototype,"additionaltext",2);M([a({type:Boolean,reflect:!0})],E.prototype,"disabled",2);M([a({type:String,reflect:!0})],E.prototype,"width",2);M([et()],E.prototype,"open",2);M([et()],E.prototype,"activeIndex",2);M([et()],E.prototype,"menuWidth",2);E=M([y("o-dropdown-variant")],E);/**
+	`;M([a({type:Array,reflect:!0})],A.prototype,"options",2);M([a({type:String,reflect:!0})],A.prototype,"value",2);M([a({type:String,reflect:!0})],A.prototype,"name",2);M([a({type:String,reflect:!0})],A.prototype,"additionaltext",2);M([a({type:Boolean,reflect:!0})],A.prototype,"disabled",2);M([a({type:String,reflect:!0})],A.prototype,"width",2);M([et()],A.prototype,"open",2);M([et()],A.prototype,"activeIndex",2);M([et()],A.prototype,"menuWidth",2);A=M([y("o-dropdown-variant")],A);/**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
@@ -1973,7 +1974,7 @@
         overflow: hidden;
       }
     }
-  `;Wt([a({type:Object,reflect:!0})],gt.prototype,"option",2);Wt([a({type:Number,reflect:!0})],gt.prototype,"imageSize",2);gt=Wt([y("o-reassurance")],gt);var oi=Object.defineProperty,ii=Object.getOwnPropertyDescriptor,V=(o,t,e,n)=>{for(var i=n>1?void 0:n?ii(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&&oi(t,e,i),i};const ni=Ft(u);let A=class extends ni{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`
+  `;Wt([a({type:Object,reflect:!0})],gt.prototype,"option",2);Wt([a({type:Number,reflect:!0})],gt.prototype,"imageSize",2);gt=Wt([y("o-reassurance")],gt);var oi=Object.defineProperty,ii=Object.getOwnPropertyDescriptor,V=(o,t,e,n)=>{for(var i=n>1?void 0:n?ii(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&&oi(t,e,i),i};const ni=Ft(u);let E=class extends ni{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>
@@ -1982,7 +1983,7 @@
         aria-label=${this.ariaLabel} aria-pressed=${this.selected}>
         ${o?this.text:l`<slot></slot>`}
       </button>
-    `}};A.styles=f`
+    `}};E.styles=f`
     :host {
       cursor: pointer;
       display: inline-flex;
@@ -2071,7 +2072,7 @@
       display: inline-flex;
       align-items: center;
     }
-  `;V([a({type:String,reflect:!0})],A.prototype,"link",2);V([a({reflect:!0})],A.prototype,"name",2);V([a({reflect:!0})],A.prototype,"value",2);V([a({type:String})],A.prototype,"text",2);V([a({type:String,reflect:!0})],A.prototype,"size",2);V([a({type:Boolean,reflect:!0})],A.prototype,"selected",2);V([a({type:Boolean,reflect:!0})],A.prototype,"fullwidth",2);V([a({type:Boolean,reflect:!0})],A.prototype,"inactive",2);A=V([y("o-chip")],A);var ri=Object.defineProperty,si=Object.getOwnPropertyDescriptor,Gt=(o,t,e,n)=>{for(var i=n>1?void 0:n?si(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&&ri(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 A?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`
+  `;V([a({type:String,reflect:!0})],E.prototype,"link",2);V([a({reflect:!0})],E.prototype,"name",2);V([a({reflect:!0})],E.prototype,"value",2);V([a({type:String})],E.prototype,"text",2);V([a({type:String,reflect:!0})],E.prototype,"size",2);V([a({type:Boolean,reflect:!0})],E.prototype,"selected",2);V([a({type:Boolean,reflect:!0})],E.prototype,"fullwidth",2);V([a({type:Boolean,reflect:!0})],E.prototype,"inactive",2);E=V([y("o-chip")],E);var ri=Object.defineProperty,si=Object.getOwnPropertyDescriptor,Gt=(o,t,e,n)=>{for(var i=n>1?void 0:n?si(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&&ri(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 E?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=f`
     :host {