@florid-kit/components 0.10.41 → 0.10.43

package/components/minitile.d.ts

@@ -10,6 +10,7 @@ export declare class MiniTile extends LitElement {
     altImage: string;
     fullwidth: boolean;
     tagText: string;
+    outOfStock: boolean;
     onClickTile?: () => void;
     onClickIcon?: () => void;
     private onClick;

package/components/popin.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { IconLogicalSize } from '../assets/icons/icons';
 
 export declare class OPopin extends LitElement {
     ispagedesigner: boolean;
@@ -15,7 +16,7 @@ export declare class OPopin extends LitElement {
     maxWidth: string;
     showBackButton: boolean;
     contrast: boolean;
-    iconSize: "xsmall" | "small" | "medium" | "large";
+    iconSize: IconLogicalSize;
     hideHeaderOnScroll: boolean;
     private _labelId;
     private _headerHidden;
@@ -28,6 +29,7 @@ export declare class OPopin extends LitElement {
     private _setupScrollListener;
     private _removeScrollListener;
     private _onBackClick;
+    private _resolvedIconSize;
     private _requestClose;
     private _renderCloseButton;
     private _renderBackButton;

package/index.js

@@ -176,7 +176,7 @@
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */class Nt extends Ut{}Nt.directiveName="unsafeSVG",Nt.resultType=2;const S=te(Nt);/**
+ */class Nt extends Ut{}Nt.directiveName="unsafeSVG",Nt.resultType=2;const E=te(Nt);/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
@@ -191,7 +191,7 @@
  */const P=o=>o??d;var No=Object.defineProperty,qo=Object.getOwnPropertyDescriptor,R=(o,t,e,n)=>{for(var i=n>1?void 0:n?qo(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&No(t,e,i),i};let B=class extends u{constructor(){super(...arguments),this.bgstyle="background-light",this.size="medium",this.status="empty",this.type="button",this.strokewidth="1",this.icon="",this.disabled=!1,this.showSrLabel=!1,this.srLabel=""}updated(o){super.updated(o),this.style.setProperty("--icon-stroke-width",this.strokewidth)}render(){if(!this.icon)return d;const{svg:o,pixelSize:t,shouldApplyLogicalSize:e}=zo(this.icon,{size:this.size,bgstyle:this.bgstyle}),n=`icon-${this.icon}`,i=e?` width="${t}" height="${t}"`:"",r=o.replace("<svg",`<svg aria-hidden="true" focusable="false" part="svg"${i}`).replace(/<path\b/g,'<path part="icon-path"').replace(/<g\b/g,'<g part="icon-group"').replace(/<circle\b/g,'<circle part="icon-circle"'),s=this.showSrLabel?l`<span class="sr-only">${this.srLabel}</span>`:null,c=this.showSrLabel?null:"icon";return l`
 			${this.type==="span"?l`
 				<span class="icon icon-button ${this.size} ${this.bgstyle} ${this.status} ${n}" ?disabled="${this.disabled}">	
-					${S(r)}
+					${E(r)}
 				</span>
 			`:l`
 				<button
@@ -201,7 +201,7 @@
 					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${n}"
 					?disabled="${this.disabled}"
 				>
-					${S(r)}
+					${E(r)}
 					${s}
 				</button>
 			`}
@@ -709,7 +709,7 @@
 			overflow: auto;
 			box-sizing: border-box;
 		}
-	`;p.focusablesSelector='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';p.focusablesCustomElementsSelector="o-icon-button, o-button";p.shadowRootOptions={...u.shadowRootOptions,delegatesFocus:!0};b([a({type:Boolean,reflect:!0})],p.prototype,"open",2);b([a({type:Boolean,reflect:!0})],p.prototype,"showHeader",2);b([a({type:Boolean,reflect:!0})],p.prototype,"showFooter",2);b([a({type:Boolean,reflect:!0})],p.prototype,"showHeaderStartIcon",2);b([a({type:String,reflect:!0})],p.prototype,"headerTitle",2);b([a({type:String,reflect:!0})],p.prototype,"headerTitleClassName",2);b([a({type:String,reflect:!0})],p.prototype,"labelDialog",2);b([a({type:String,reflect:!0})],p.prototype,"labelAriaDialogPanel",2);b([a({type:String,reflect:!0})],p.prototype,"addToBagProductCount",2);b([a({type:String,reflect:!0})],p.prototype,"closeButtonLabel",2);b([a({type:String,reflect:!0})],p.prototype,"goBackButtonLabel",2);b([a({type:String,reflect:!0})],p.prototype,"firstButtonLabel",2);b([a({type:String,reflect:!0})],p.prototype,"firstButtonVariant",2);b([a({type:Object,reflect:!0})],p.prototype,"firstButtonProps",2);b([a({type:Boolean,reflect:!0})],p.prototype,"onFirstButtonClickClose",2);b([a({type:String,reflect:!0})],p.prototype,"secondButtonLabel",2);b([a({type:String,reflect:!0})],p.prototype,"secondButtonVariant",2);b([a({type:Object,reflect:!0})],p.prototype,"secondButtonProps",2);b([a({type:Boolean,reflect:!0})],p.prototype,"onSecondButtonClickClose",2);b([a({type:Boolean,reflect:!0})],p.prototype,"disablePortal",2);b([a({type:Number,reflect:!0})],p.prototype,"zIndex",2);b([a({type:Boolean,reflect:!0})],p.prototype,"initialized",2);b([a({type:Boolean})],p.prototype,"showDetail",2);b([a({type:Boolean})],p.prototype,"isHidingDetail",2);p=b([y("o-side-panel")],p);var Ko=Object.defineProperty,Wo=Object.getOwnPropertyDescriptor,_=(o,t,e,n)=>{for(var i=n>1?void 0:n?Wo(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&Ko(t,e,i),i};const Go=Jt(u);let m=class extends Go{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,this.hideRoleButton=!1}get name(){return this.getAttribute("name")??""}set name(o){this.setAttribute("name",o)}get form(){return this[Yt].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=et[t].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return l`<span class="${o==="start"?"icon-start":"icon-end"}">${S(e)}</span>`}renderButton(){const o=this.text||this.textsecond;return l`
+	`;p.focusablesSelector='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';p.focusablesCustomElementsSelector="o-icon-button, o-button";p.shadowRootOptions={...u.shadowRootOptions,delegatesFocus:!0};b([a({type:Boolean,reflect:!0})],p.prototype,"open",2);b([a({type:Boolean,reflect:!0})],p.prototype,"showHeader",2);b([a({type:Boolean,reflect:!0})],p.prototype,"showFooter",2);b([a({type:Boolean,reflect:!0})],p.prototype,"showHeaderStartIcon",2);b([a({type:String,reflect:!0})],p.prototype,"headerTitle",2);b([a({type:String,reflect:!0})],p.prototype,"headerTitleClassName",2);b([a({type:String,reflect:!0})],p.prototype,"labelDialog",2);b([a({type:String,reflect:!0})],p.prototype,"labelAriaDialogPanel",2);b([a({type:String,reflect:!0})],p.prototype,"addToBagProductCount",2);b([a({type:String,reflect:!0})],p.prototype,"closeButtonLabel",2);b([a({type:String,reflect:!0})],p.prototype,"goBackButtonLabel",2);b([a({type:String,reflect:!0})],p.prototype,"firstButtonLabel",2);b([a({type:String,reflect:!0})],p.prototype,"firstButtonVariant",2);b([a({type:Object,reflect:!0})],p.prototype,"firstButtonProps",2);b([a({type:Boolean,reflect:!0})],p.prototype,"onFirstButtonClickClose",2);b([a({type:String,reflect:!0})],p.prototype,"secondButtonLabel",2);b([a({type:String,reflect:!0})],p.prototype,"secondButtonVariant",2);b([a({type:Object,reflect:!0})],p.prototype,"secondButtonProps",2);b([a({type:Boolean,reflect:!0})],p.prototype,"onSecondButtonClickClose",2);b([a({type:Boolean,reflect:!0})],p.prototype,"disablePortal",2);b([a({type:Number,reflect:!0})],p.prototype,"zIndex",2);b([a({type:Boolean,reflect:!0})],p.prototype,"initialized",2);b([a({type:Boolean})],p.prototype,"showDetail",2);b([a({type:Boolean})],p.prototype,"isHidingDetail",2);p=b([y("o-side-panel")],p);var Ko=Object.defineProperty,Wo=Object.getOwnPropertyDescriptor,_=(o,t,e,n)=>{for(var i=n>1?void 0:n?Wo(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&Ko(t,e,i),i};const Go=Jt(u);let m=class extends Go{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,this.hideRoleButton=!1}get name(){return this.getAttribute("name")??""}set name(o){this.setAttribute("name",o)}get form(){return this[Yt].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=et[t].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return l`<span class="${o==="start"?"icon-start":"icon-end"}">${E(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}
         aria-describedby=${this.getAttribute("aria-describedby")||d} >
           ${this.startIcon?this.renderIcon("start"):d}
@@ -947,7 +947,7 @@
   `;_([a()],m.prototype,"type",2);_([a()],m.prototype,"value",2);_([a({type:String,reflect:!0})],m.prototype,"variant",2);_([a({type:String})],m.prototype,"text",2);_([a({type:String})],m.prototype,"textsecond",2);_([a({type:Boolean,reflect:!0})],m.prototype,"fullwidth",2);_([a({type:Boolean,reflect:!0})],m.prototype,"disabled",2);_([a({type:String})],m.prototype,"startIconModel",2);_([a({type:String})],m.prototype,"endIconModel",2);_([a({type:Boolean,reflect:!0,attribute:"starticon"})],m.prototype,"startIcon",2);_([a({type:Boolean,reflect:!0,attribute:"endicon"})],m.prototype,"endIcon",2);_([a({type:String,attribute:"paneltarget"})],m.prototype,"panelTarget",2);_([a({type:String})],m.prototype,"href",2);_([a({type:String})],m.prototype,"target",2);_([a({type:Boolean,reflect:!0})],m.prototype,"underlined",2);_([a({type:Boolean,reflect:!0})],m.prototype,"withbadge",2);_([a({type:Boolean,reflect:!0})],m.prototype,"hideRoleButton",2);m=_([y("o-button")],m);var Xo=Object.defineProperty,Yo=Object.getOwnPropertyDescriptor,It=(o,t,e,n)=>{for(var i=n>1?void 0:n?Yo(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 pt=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=et.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>
-				${S(o)}
+				${E(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()}};pt.styles=f`
 		:host {
@@ -1121,7 +1121,7 @@
     `;lt([a({type:String})],Z.prototype,"href",2);lt([a({type:String})],Z.prototype,"target",2);lt([a({type:String,reflect:!0})],Z.prototype,"template",2);lt([a({type:Boolean,reflect:!0})],Z.prototype,"inverse",2);lt([a({type:Boolean,reflect:!0})],Z.prototype,"endIcon",2);lt([a({type:Boolean,reflect:!0})],Z.prototype,"reverseEndIcon",2);Z=lt([y("o-link")],Z);var ti=Object.defineProperty,ei=Object.getOwnPropertyDescriptor,Dt=(o,t,e,n)=>{for(var i=n>1?void 0:n?ei(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&&ti(t,e,i),i};let ut=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">${S(et[t]??"")}</span>`)}
+				${o.map(t=>l`<span class="star">${E(et[t]??"")}</span>`)}
 			</div>
 			${this.reviewCount!=null&&this.href!=null?l`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>`:null}
 			</div>
@@ -1446,7 +1446,7 @@
     border-color: transparent var(--color-alpha-dark-strongest) transparent transparent;
   }
       
-  `;ie([a({type:String,reflect:!0})],kt.prototype,"type",2);ie([a({type:String,reflect:!0})],kt.prototype,"text",2);kt=ie([y("o-tooltip")],kt);var li=Object.defineProperty,ci=Object.getOwnPropertyDescriptor,G=(o,t,e,n)=>{for(var i=n>1?void 0:n?ci(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&&li(t,e,i),i};let T=class extends u{constructor(){super(...arguments),this.options=[],this.value="",this.name="",this.disabled=!1,this.width="100%",this.open=!1,this.activeIndex=-1,this.menuWidth="",this._handleOutsideClick=o=>{this.contains(o.target)||(this.open=!1,this.activeIndex=-1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){document.removeEventListener("click",this._handleOutsideClick),super.disconnectedCallback()}toggle(){var o;if(!this.disabled){if(this.open=!this.open,this.activeIndex=this.open?this.options.findIndex(t=>t.value===this.value):-1,this.open&&this.width==="auto"){const t=(o=this.renderRoot)==null?void 0:o.querySelector("button");t&&(this.menuWidth=`${t.getBoundingClientRect().width}px`)}this.open&&this.updateComplete.then(()=>{this._focusActiveOption()})}}_focusActiveOption(){var t;const o=(t=this.renderRoot)==null?void 0:t.querySelector(`#option-${this.activeIndex}`);o==null||o.focus()}selectOption(o){this.value=o.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,url:o.url}})),this.open=!1,this.activeIndex=-1}handleKeydown(o){if(this.disabled){o.preventDefault();return}if(!this.open){(o.key==="ArrowDown"||o.key==="ArrowUp")&&(o.preventDefault(),this.open=!0,this.activeIndex=this.options.findIndex(t=>t.value===this.value),this.updateComplete.then(()=>this._focusActiveOption()));return}switch(o.key){case"ArrowDown":o.preventDefault(),this.activeIndex=(this.activeIndex+1)%this.options.length,this.updateComplete.then(()=>this._focusActiveOption());break;case"ArrowUp":o.preventDefault(),this.activeIndex=(this.activeIndex-1+this.options.length)%this.options.length,this.updateComplete.then(()=>this._focusActiveOption());break;case"Home":o.preventDefault(),this.activeIndex=0,this.updateComplete.then(()=>this._focusActiveOption());break;case"End":o.preventDefault(),this.activeIndex=this.options.length-1,this.updateComplete.then(()=>this._focusActiveOption());break;case"Enter":o.preventDefault(),this.activeIndex>=0&&this.selectOption(this.options[this.activeIndex]);break;case"Escape":o.preventDefault(),this.open=!1,this.activeIndex=-1;break}}updated(o){this.options.length>0&&(this.options.some(e=>e.value===this.value)||(this.value=this.options[0].value))}render(){const o=et.checkstroke.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"'),t=this.options.find(e=>e.value===this.value);return l`
+  `;ie([a({type:String,reflect:!0})],kt.prototype,"type",2);ie([a({type:String,reflect:!0})],kt.prototype,"text",2);kt=ie([y("o-tooltip")],kt);var li=Object.defineProperty,ci=Object.getOwnPropertyDescriptor,G=(o,t,e,n)=>{for(var i=n>1?void 0:n?ci(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&&li(t,e,i),i};let M=class extends u{constructor(){super(...arguments),this.options=[],this.value="",this.name="",this.disabled=!1,this.width="100%",this.open=!1,this.activeIndex=-1,this.menuWidth="",this._handleOutsideClick=o=>{this.contains(o.target)||(this.open=!1,this.activeIndex=-1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){document.removeEventListener("click",this._handleOutsideClick),super.disconnectedCallback()}toggle(){var o;if(!this.disabled){if(this.open=!this.open,this.activeIndex=this.open?this.options.findIndex(t=>t.value===this.value):-1,this.open&&this.width==="auto"){const t=(o=this.renderRoot)==null?void 0:o.querySelector("button");t&&(this.menuWidth=`${t.getBoundingClientRect().width}px`)}this.open&&this.updateComplete.then(()=>{this._focusActiveOption()})}}_focusActiveOption(){var t;const o=(t=this.renderRoot)==null?void 0:t.querySelector(`#option-${this.activeIndex}`);o==null||o.focus()}selectOption(o){this.value=o.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,url:o.url}})),this.open=!1,this.activeIndex=-1}handleKeydown(o){if(this.disabled){o.preventDefault();return}if(!this.open){(o.key==="ArrowDown"||o.key==="ArrowUp")&&(o.preventDefault(),this.open=!0,this.activeIndex=this.options.findIndex(t=>t.value===this.value),this.updateComplete.then(()=>this._focusActiveOption()));return}switch(o.key){case"ArrowDown":o.preventDefault(),this.activeIndex=(this.activeIndex+1)%this.options.length,this.updateComplete.then(()=>this._focusActiveOption());break;case"ArrowUp":o.preventDefault(),this.activeIndex=(this.activeIndex-1+this.options.length)%this.options.length,this.updateComplete.then(()=>this._focusActiveOption());break;case"Home":o.preventDefault(),this.activeIndex=0,this.updateComplete.then(()=>this._focusActiveOption());break;case"End":o.preventDefault(),this.activeIndex=this.options.length-1,this.updateComplete.then(()=>this._focusActiveOption());break;case"Enter":o.preventDefault(),this.activeIndex>=0&&this.selectOption(this.options[this.activeIndex]);break;case"Escape":o.preventDefault(),this.open=!1,this.activeIndex=-1;break}}updated(o){this.options.length>0&&(this.options.some(e=>e.value===this.value)||(this.value=this.options[0].value))}render(){const o=et.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"
@@ -1486,15 +1486,15 @@
                   ${e.url?l`
                   <a href="${e.url}">
                     <span>${e.label}</span>
-                    ${e.value===this.value?l`<span class="check">${S(o)}</span>`:null}
+                    ${e.value===this.value?l`<span class="check">${E(o)}</span>`:null}
                   </a>`:l`
                     <span>${e.label}</span>
-                    ${e.value===this.value?l`<span class="check">${S(o)}</span>`:null}`}
+                    ${e.value===this.value?l`<span class="check">${E(o)}</span>`:null}`}
                 </li>`)}
           </ul>`:null}
 
       <input type="hidden" name="${this.name}" .value="${this.value}" />
-    `}};T.styles=f`
+    `}};M.styles=f`
     :host {
       display: inline-block;
       position: relative;
@@ -1632,7 +1632,7 @@
     input[type="hidden"] {
       display: none;
     }
-  `;G([a({type:Array,reflect:!0})],T.prototype,"options",2);G([a({type:String,reflect:!0})],T.prototype,"value",2);G([a({type:String,reflect:!0})],T.prototype,"name",2);G([a({type:Boolean,reflect:!0})],T.prototype,"disabled",2);G([a({type:String,reflect:!0})],T.prototype,"width",2);G([W()],T.prototype,"open",2);G([W()],T.prototype,"activeIndex",2);G([W()],T.prototype,"menuWidth",2);T=G([y("o-dropdown")],T);var hi=Object.getOwnPropertyDescriptor,di=(o,t,e,n)=>{for(var i=n>1?void 0:n?hi(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=s(i)||i);return i};let qt=class extends u{render(){return l` <span class="dots"></span> `}};qt.styles=f`
+  `;G([a({type:Array,reflect:!0})],M.prototype,"options",2);G([a({type:String,reflect:!0})],M.prototype,"value",2);G([a({type:String,reflect:!0})],M.prototype,"name",2);G([a({type:Boolean,reflect:!0})],M.prototype,"disabled",2);G([a({type:String,reflect:!0})],M.prototype,"width",2);G([W()],M.prototype,"open",2);G([W()],M.prototype,"activeIndex",2);G([W()],M.prototype,"menuWidth",2);M=G([y("o-dropdown")],M);var hi=Object.getOwnPropertyDescriptor,di=(o,t,e,n)=>{for(var i=n>1?void 0:n?hi(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=s(i)||i);return i};let qt=class extends u{render(){return l` <span class="dots"></span> `}};qt.styles=f`
   :host {
     display: flex;
     align-items: center;
@@ -1728,7 +1728,7 @@
 										<div class="right">
 											<span class="additional-text">${P(e.additionaltext)}</span>
 											${e.value===this.value&&!e.additionaltext?l`
-												<span class="check">${S(o)}</span>`:null}
+												<span class="check">${E(o)}</span>`:null}
 										</div>
 									</a>
 								</li>
@@ -2115,7 +2115,7 @@
       flex-wrap: wrap;
       gap: var(--spacing-s);
     }
-  `;re([a({reflect:!0})],Ct.prototype,"name",2);re([a({reflect:!0})],Ct.prototype,"value",2);Ct=re([y("o-chipset")],Ct);var ki=Object.defineProperty,_i=Object.getOwnPropertyDescriptor,N=(o,t,e,n)=>{for(var i=n>1?void 0:n?_i(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&&ki(t,e,i),i};const Ci=Jt(u);let I=class extends Ci{constructor(){super(...arguments),this.name="",this.value="",this.type="",this.text="",this.selected=!1,this.disabled=!1,this.fullwidth=!1,this.crossIconName="cross",this.strikethroughImgName="strikeDiagonal"}handleClick(o){if(o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" ")return;this.selected=!this.selected;const t={selected:this.selected},e=new CustomEvent("selected",{detail:t,bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e),e.defaultPrevented&&o.preventDefault(),this.selected=t.selected}crossIcon(){const o=et[this.crossIconName].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"').replace(/stroke=[#"'a-z1-9]*/gi,"");return l`<span class="cross-icon">${S(o)}</span>`}strikeThroughImg(){const o=Oo[this.strikethroughImgName].replace("<svg",'<svg aria-hidden="true" focusable="false" part="strikethrough"').replace(/stroke=[#"'a-z1-9]*/gi,"");return S(o)}render(){const o=this.text;return l`${this.type==="link"?l`
+  `;re([a({reflect:!0})],Ct.prototype,"name",2);re([a({reflect:!0})],Ct.prototype,"value",2);Ct=re([y("o-chipset")],Ct);var ki=Object.defineProperty,_i=Object.getOwnPropertyDescriptor,N=(o,t,e,n)=>{for(var i=n>1?void 0:n?_i(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&&ki(t,e,i),i};const Ci=Jt(u);let I=class extends Ci{constructor(){super(...arguments),this.name="",this.value="",this.type="",this.text="",this.selected=!1,this.disabled=!1,this.fullwidth=!1,this.crossIconName="cross",this.strikethroughImgName="strikeDiagonal"}handleClick(o){if(o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" ")return;this.selected=!this.selected;const t={selected:this.selected},e=new CustomEvent("selected",{detail:t,bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e),e.defaultPrevented&&o.preventDefault(),this.selected=t.selected}crossIcon(){const o=et[this.crossIconName].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"').replace(/stroke=[#"'a-z1-9]*/gi,"");return l`<span class="cross-icon">${E(o)}</span>`}strikeThroughImg(){const o=Oo[this.strikethroughImgName].replace("<svg",'<svg aria-hidden="true" focusable="false" part="strikethrough"').replace(/stroke=[#"'a-z1-9]*/gi,"");return E(o)}render(){const o=this.text;return l`${this.type==="link"?l`
       <a role="button" tabindex="0" class="button" href=${this.href} ?disabled=${this.disabled} @click=${this.handleClick} @keydown=${this.handleClick}
         aria-label=${this.ariaLabel||d} aria-pressed=${this.selected}>
         ${o?l`
@@ -2257,7 +2257,7 @@
       stroke-width: 4px;
       stroke-linecap: round;
     }
-  `;N([a({reflect:!0})],I.prototype,"name",2);N([a({reflect:!0})],I.prototype,"value",2);N([a({type:String,reflect:!0})],I.prototype,"type",2);N([a({type:String,reflect:!0})],I.prototype,"href",2);N([a({type:String,reflect:!0,attribute:"data-href"})],I.prototype,"dataHref",2);N([a({type:String})],I.prototype,"text",2);N([a({type:Boolean,reflect:!0})],I.prototype,"selected",2);N([a({type:Boolean,reflect:!0})],I.prototype,"disabled",2);N([a({type:Boolean,reflect:!0})],I.prototype,"fullwidth",2);I=N([y("o-filter-chip")],I);var Si=Object.defineProperty,M=(o,t,e,n)=>{for(var i=void 0,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=s(t,e,i)||i);return i&&Si(t,e,i),i};const ae=class ae extends u{constructor(){super(...arguments),this.type="cart | chevron",this.titleProduct="",this.volume="",this.perLiter="",this.mainPrice="",this.imageUrl="https://placehold.co/56x70",this.altImage="",this.fullwidth=!1,this.tagText=""}onClick(t){var n,i;const e=t.target;(n=e==null?void 0:e.classList)!=null&&n.contains("add-to-bag")||((i=this.onClickTile)==null||i.call(this),this.dispatchEvent(new CustomEvent("tile-click",{bubbles:!0,composed:!0})))}onClickIcons(){var t;(t=this.onClickIcon)==null||t.call(this),this.dispatchEvent(new CustomEvent("tile-icon-click",{bubbles:!0,composed:!0}))}get icons(){return this.type==="chevron"?l`
+  `;N([a({reflect:!0})],I.prototype,"name",2);N([a({reflect:!0})],I.prototype,"value",2);N([a({type:String,reflect:!0})],I.prototype,"type",2);N([a({type:String,reflect:!0})],I.prototype,"href",2);N([a({type:String,reflect:!0,attribute:"data-href"})],I.prototype,"dataHref",2);N([a({type:String})],I.prototype,"text",2);N([a({type:Boolean,reflect:!0})],I.prototype,"selected",2);N([a({type:Boolean,reflect:!0})],I.prototype,"disabled",2);N([a({type:Boolean,reflect:!0})],I.prototype,"fullwidth",2);I=N([y("o-filter-chip")],I);var Si=Object.defineProperty,H=(o,t,e,n)=>{for(var i=void 0,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=s(t,e,i)||i);return i&&Si(t,e,i),i};const ae=class ae extends u{constructor(){super(...arguments),this.type="cart | chevron",this.titleProduct="",this.volume="",this.perLiter="",this.mainPrice="",this.imageUrl="https://placehold.co/56x70",this.altImage="",this.fullwidth=!1,this.tagText="",this.outOfStock=!1}onClick(t){var n,i,r;const e=t.target;(n=e==null?void 0:e.classList)!=null&&n.contains("add-to-bag")||(i=e==null?void 0:e.classList)!=null&&i.contains("js-availability-notify-details-cart")||((r=this.onClickTile)==null||r.call(this),this.dispatchEvent(new CustomEvent("tile-click",{bubbles:!0,composed:!0})))}onClickIcons(){var t;(t=this.onClickIcon)==null||t.call(this),this.dispatchEvent(new CustomEvent("tile-icon-click",{bubbles:!0,composed:!0}))}get icons(){return this.type==="chevron"?l`
         <o-icon-button
           @click=${this.onClickIcons}
           icon="chevronRight"
@@ -2273,13 +2273,13 @@
       `:l`
       <o-icon-button
         @click=${this.onClickIcons}
-        icon="cart"
+        icon=${this.outOfStock?"notifyme":"cart"}
         size="small"
         bgstyle="background-contrast"
         type="span"
         status="empty"
         strokewidth="0"
-        class="add-to-bag"
+        class=${this.outOfStock?"js-availability-notify-details-cart":"add-to-bag"}
       ></o-icon-button>
     `}render(){return l`
       <button
@@ -2289,7 +2289,9 @@
       >
         ${this.imageUrl?l`<img src="${this.imageUrl}" alt="${this.altImage||""}" />`:""}
         <div class="info">
-          ${this.tagText?l`<o-tag bgstyle="background-emphasis">${this.tagText}</o-tag>`:""}
+          ${this.outOfStock?l`<o-tag type="nostock" role="status" aria-live="polite"
+              >${this.tagText}</o-tag
+            >`:this.tagText?l`<o-tag bgstyle="background-emphasis">${this.tagText}</o-tag>`:""}
           ${this.titleProduct?l`<div class="title">${this.titleProduct}</div>`:""}
           <div class="details">
             ${this.volume?l`<span class="volume-info">${this.volume}</span>`:""}
@@ -2411,7 +2413,7 @@
     .fullpointer {
       cursor: pointer;
     }
-  `;let E=ae;M([a({type:String})],E.prototype,"type");M([a({type:String})],E.prototype,"titleProduct");M([a({type:String})],E.prototype,"volume");M([a({type:String})],E.prototype,"perLiter");M([a({type:String})],E.prototype,"mainPrice");M([a({type:String})],E.prototype,"imageUrl");M([a({type:String})],E.prototype,"altImage");M([a({type:Boolean})],E.prototype,"fullwidth");M([a({type:String})],E.prototype,"tagText");M([a({attribute:!1})],E.prototype,"onClickTile");M([a({attribute:!1})],E.prototype,"onClickIcon");customElements.define("mini-tile",E);var Ei=Object.defineProperty,Ai=Object.getOwnPropertyDescriptor,Ht=(o,t,e,n)=>{for(var i=n>1?void 0:n?Ai(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&&Ei(t,e,i),i};let ft=class extends u{constructor(){super(...arguments),this.variant="cart",this.text=0,this.srlabel=""}render(){return l`
+  `;let S=ae;H([a({type:String})],S.prototype,"type");H([a({type:String})],S.prototype,"titleProduct");H([a({type:String})],S.prototype,"volume");H([a({type:String})],S.prototype,"perLiter");H([a({type:String})],S.prototype,"mainPrice");H([a({type:String})],S.prototype,"imageUrl");H([a({type:String})],S.prototype,"altImage");H([a({type:Boolean})],S.prototype,"fullwidth");H([a({type:String})],S.prototype,"tagText");H([a({type:Boolean})],S.prototype,"outOfStock");H([a({attribute:!1})],S.prototype,"onClickTile");H([a({attribute:!1})],S.prototype,"onClickIcon");customElements.define("mini-tile",S);var Ei=Object.defineProperty,Ai=Object.getOwnPropertyDescriptor,Ht=(o,t,e,n)=>{for(var i=n>1?void 0:n?Ai(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&&Ei(t,e,i),i};let ft=class extends u{constructor(){super(...arguments),this.variant="cart",this.text=0,this.srlabel=""}render(){return l`
       <span class="badge">
         ${this.text?l`${this.text} <span class="sr-only">${this.srlabel}</span>`:l`<slot></slot>`}
       </span>
@@ -2452,10 +2454,10 @@
     .sr-only {
       ${Xt}
     }
-  `;Ht([a({type:String,reflect:!0})],ft.prototype,"variant",2);Ht([a({type:Number})],ft.prototype,"text",2);Ht([a({type:String})],ft.prototype,"srlabel",2);ft=Ht([y("o-badge")],ft);var Li=Object.defineProperty,Pi=Object.getOwnPropertyDescriptor,H=(o,t,e,n)=>{for(var i=n>1?void 0:n?Pi(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&&Li(t,e,i),i};let A=class extends u{constructor(){super(...arguments),this.icon="info",this.text="Sample text",this.verticalanchor="top",this.horizontalanchor="right",this.verticaloffset=24,this.horizontaloffset=24,this.animationduration=500,this.animationaxis="horizontal",this.animated=!0,this.lifeduration=5e3,this.multiline=!1}attributeChangedCallback(o,t,e){super.attributeChangedCallback(o,t,e),o=="verticaloffset"&&this.style.setProperty("--vertical-offset",e+"px"),o=="horizontaloffset"&&this.style.setProperty("--horizontal-offset",e+"px"),o=="animationduration"&&this.style.setProperty("--animation-duration",e+"ms")}selfCloseAfterDelay(){var o=this;setTimeout(function(){o.animated=!0,o.selfClose()},this.lifeduration)}selfClose(){var o=this;setTimeout(function(){o.remove()},this.animationduration+200)}connectedCallback(){var o=this;super.connectedCallback(),setTimeout(()=>{o.animated=!1,this.selfCloseAfterDelay()},600)}firstUpdated(){var n,i;var o=this;const t=(n=this.renderRoot)==null?void 0:n.querySelector("o-icon-button"),e=(i=this.renderRoot)==null?void 0:i.querySelector(".o-toast-text");if(e!=null){const r=window.getComputedStyle(e),s=parseInt(r.getPropertyValue("line-height").replace("px","")),c=parseInt(r.getPropertyValue("height").replace("px",""));!isNaN(s)&&!isNaN(c)&&c>s&&(this.multiline=!0)}t!=null&&t.addEventListener("click",function(){o.remove()})}render(){const t=Io[this.icon].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"').replace(/<path\b/g,'<path part="icon-path"').replace(/<g\b/g,'<g part="icon-group"').replace(/<circle\b/g,'<circle part="icon-circle"');return l`
+  `;Ht([a({type:String,reflect:!0})],ft.prototype,"variant",2);Ht([a({type:Number})],ft.prototype,"text",2);Ht([a({type:String})],ft.prototype,"srlabel",2);ft=Ht([y("o-badge")],ft);var Li=Object.defineProperty,Pi=Object.getOwnPropertyDescriptor,T=(o,t,e,n)=>{for(var i=n>1?void 0:n?Pi(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&&Li(t,e,i),i};let A=class extends u{constructor(){super(...arguments),this.icon="info",this.text="Sample text",this.verticalanchor="top",this.horizontalanchor="right",this.verticaloffset=24,this.horizontaloffset=24,this.animationduration=500,this.animationaxis="horizontal",this.animated=!0,this.lifeduration=5e3,this.multiline=!1}attributeChangedCallback(o,t,e){super.attributeChangedCallback(o,t,e),o=="verticaloffset"&&this.style.setProperty("--vertical-offset",e+"px"),o=="horizontaloffset"&&this.style.setProperty("--horizontal-offset",e+"px"),o=="animationduration"&&this.style.setProperty("--animation-duration",e+"ms")}selfCloseAfterDelay(){var o=this;setTimeout(function(){o.animated=!0,o.selfClose()},this.lifeduration)}selfClose(){var o=this;setTimeout(function(){o.remove()},this.animationduration+200)}connectedCallback(){var o=this;super.connectedCallback(),setTimeout(()=>{o.animated=!1,this.selfCloseAfterDelay()},600)}firstUpdated(){var n,i;var o=this;const t=(n=this.renderRoot)==null?void 0:n.querySelector("o-icon-button"),e=(i=this.renderRoot)==null?void 0:i.querySelector(".o-toast-text");if(e!=null){const r=window.getComputedStyle(e),s=parseInt(r.getPropertyValue("line-height").replace("px","")),c=parseInt(r.getPropertyValue("height").replace("px",""));!isNaN(s)&&!isNaN(c)&&c>s&&(this.multiline=!0)}t!=null&&t.addEventListener("click",function(){o.remove()})}render(){const t=Io[this.icon].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"').replace(/<path\b/g,'<path part="icon-path"').replace(/<g\b/g,'<g part="icon-group"').replace(/<circle\b/g,'<circle part="icon-circle"');return l`
             <div class="o-toast">
                 <div class="o-toast-icon">
-                    ${S(t)}
+                    ${E(t)}
                 </div>
                 <div class="o-toast-text">
                     ${this.text}
@@ -2545,7 +2547,7 @@
         .o-toast-icon {
             height: 16px;
         }
-    `;H([a({type:String,reflect:!0})],A.prototype,"icon",2);H([a({type:String,reflect:!0})],A.prototype,"text",2);H([a({type:String,reflect:!0})],A.prototype,"verticalanchor",2);H([a({type:String,reflect:!0})],A.prototype,"horizontalanchor",2);H([a({type:Number,reflect:!0})],A.prototype,"verticaloffset",2);H([a({type:Number,reflect:!0})],A.prototype,"horizontaloffset",2);H([a({type:Number,reflect:!0})],A.prototype,"animationduration",2);H([a({type:String,reflect:!0})],A.prototype,"animationaxis",2);H([a({type:Boolean,reflect:!0})],A.prototype,"animated",2);H([a({type:Number,reflect:!0})],A.prototype,"lifeduration",2);H([a({type:Boolean,reflect:!0})],A.prototype,"multiline",2);A=H([y("o-toast")],A);var Bi=Object.defineProperty,zi=Object.getOwnPropertyDescriptor,j=(o,t,e,n)=>{for(var i=n>1?void 0:n?zi(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&&Bi(t,e,i),i};let Oi=0,L=class extends u{constructor(){super(),this.checked=!1,this.indeterminate=!1,this.disabled=!1,this.size="S",this.showLabel=!0,this.label="Checkbox",this.name="",this.value="on",this.inputId="",this.inputId||(this.inputId=`o-checkbox-${++Oi}`)}toggle(){this.disabled||(this.indeterminate?(this.indeterminate=!1,this.checked=!0):this.checked=!this.checked,this.syncInput(),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}syncInput(){this.inputEl&&(this.inputEl.checked=this.checked,this.inputEl.indeterminate=this.indeterminate)}updated(o){this.syncInput()}handleKeyDown(o){this.disabled||(o.key===" "||o.key==="Enter")&&(o.preventDefault(),this.toggle())}render(){const o=S(et.checkbox.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"')),t=S(et.icoMinus.replace("<svg",'<svg class="indeterminate" aria-hidden="true" focusable="false" part="svg"'));return l`
+    `;T([a({type:String,reflect:!0})],A.prototype,"icon",2);T([a({type:String,reflect:!0})],A.prototype,"text",2);T([a({type:String,reflect:!0})],A.prototype,"verticalanchor",2);T([a({type:String,reflect:!0})],A.prototype,"horizontalanchor",2);T([a({type:Number,reflect:!0})],A.prototype,"verticaloffset",2);T([a({type:Number,reflect:!0})],A.prototype,"horizontaloffset",2);T([a({type:Number,reflect:!0})],A.prototype,"animationduration",2);T([a({type:String,reflect:!0})],A.prototype,"animationaxis",2);T([a({type:Boolean,reflect:!0})],A.prototype,"animated",2);T([a({type:Number,reflect:!0})],A.prototype,"lifeduration",2);T([a({type:Boolean,reflect:!0})],A.prototype,"multiline",2);A=T([y("o-toast")],A);var Bi=Object.defineProperty,zi=Object.getOwnPropertyDescriptor,j=(o,t,e,n)=>{for(var i=n>1?void 0:n?zi(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&&Bi(t,e,i),i};let Oi=0,L=class extends u{constructor(){super(),this.checked=!1,this.indeterminate=!1,this.disabled=!1,this.size="S",this.showLabel=!0,this.label="Checkbox",this.name="",this.value="on",this.inputId="",this.inputId||(this.inputId=`o-checkbox-${++Oi}`)}toggle(){this.disabled||(this.indeterminate?(this.indeterminate=!1,this.checked=!0):this.checked=!this.checked,this.syncInput(),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}syncInput(){this.inputEl&&(this.inputEl.checked=this.checked,this.inputEl.indeterminate=this.indeterminate)}updated(o){this.syncInput()}handleKeyDown(o){this.disabled||(o.key===" "||o.key==="Enter")&&(o.preventDefault(),this.toggle())}render(){const o=E(et.checkbox.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"')),t=E(et.icoMinus.replace("<svg",'<svg class="indeterminate" aria-hidden="true" focusable="false" part="svg"'));return l`
       <input
         type="checkbox"
         id=${this.inputId}
@@ -3003,11 +3005,11 @@
          d="m 1237.15,72.3984 c -3.61,1.5625 -7.64,0.6211 -10.76,-1.5898 -3.47,-2.4688 -6.01,-6.207 -8.42,-9.6484 l -2.61,-3.7305 c -3.58,-5.1094 -9.55,-13.6992 -12.29,-16.1094 -5.74,-5.1289 -9.34,-6.6094 -53,-6.6094 -33.15,0 -37.81,0.9883 -43.8,4.1602 -5.52,2.7891 -7.77,10.7773 -7.77,13.6484 0,3.3594 -0.2,14.711 -0.45,28.7422 -0.39,22.6093 -0.93,52.2383 -0.93,66.5083 v 2.082 c 61.53,-0.032 57.15,-0.524 65,-2.762 2.14,-0.75 4.31,-3.918 6.04,-9.07 0,0 1.62,-4.02 1.63,-4.032 1.32,-3.277 2.66,-6.867 5.45,-9.207 3.1,-2.609 8.34,-2.961 11.82,-0.832 2.53,1.551 4.41,4.86 5.34,7.641 1.18,3.469 1.06,7.031 0.47,10.601 -0.42,2.528 -1.65,14.649 -0.88,22.661 0.36,3.359 0.91,7.339 1.4,11.039 0.81,5.937 1.45,11.25 1.45,13.039 0,10.769 -6.83,13.64 -10.87,13.64 -7.45,0 -10.98,-7.148 -12.29,-9.8 -5.17,-10.34 -7.99,-12.258 -8.92,-12.77 -1.75,-1.09 -4.81,-1.93 -26.44,-1.93 h -39.2 v 107.52 c 0,4.422 0.17,7.101 0.34,8.738 15.96,0.774 76.93,0.524 87.71,-1.476 3.62,-0.602 9.08,-1.5 17.68,-21.911 1.36,-3.211 3.03,-6.711 5.7,-9.043 3,-2.609 7.9,-3.558 11.48,-1.648 3.15,1.672 4.77,5.262 5.42,8.621 0.48,2.52 0.57,5.379 0.02,7.899 -1.68,7.71 -2.32,17.339 -2.74,23.718 l -0.42,5.41 c -1.6,9.993 -5.84,15.063 -12.6,15.063 -1.95,0 -3.97,-0.121 -6.59,-0.27 -4.29,-0.261 -10.36,-0.652 -21.14,-0.652 -8.99,0 -29.44,-0.219 -50.5,-0.437 -22.25,-0.231 -45.19,-0.493 -55.89,-0.493 -7.8,0 -14.28,0.411 -20.23,0.77 -5.38,0.32 -10.33,0.621 -15.39,0.621 -8.85,0 -15.02,-4.461 -15.02,-10.859 0,-3.692 1.73,-10.231 13.17,-12.532 11.25,-2.488 15.05,-3.339 15.05,-28.168 0,-97.863 -0.47,-142.242 -2.32,-215.7808 -0.34,-15.5196 -5.21,-19.0821 -18.87,-21.3594 C 1027,30.8984 1016.62,29 1016.62,19.6719 c 0,-1.9727 0.81,-11.80081 16.89,-11.80081 1.95,0 6.58,0.3086 12.45,0.71875 9.5,0.67969 22.45,1.60156 31.94,1.60156 17.71,0 38.65,-0.41015 60.92,-0.83984 25.46,-0.49218 52.62,-1.01172 78.73,-1.01172 4,0 9.62,1.69926 13.67,9.76956 2.26,4.4687 4.54,12.8906 7.15,22.6094 1.18,4.4218 2.39,8.9531 3.55,12.8203 0.89,2.9804 1.73,5.9726 1.57,9.1211 -0.2,3.9804 -2.49,7.9804 -6.34,9.7382" /><path
          id="path52"
          style="fill:#3F2B2E;fill-opacity:1;fill-rule:nonzero;stroke:none"
-         d="m 1647.15,320.5 c -2.07,0 -4.94,-0.199 -8.49,-0.469 -8.68,-0.64 -23.5,-1.062 -37.41,-0.172 -20.4,1.282 -32.01,-0.589 -32.01,-10.687 0,-8.66 8.46,-10.781 15.19,-12.461 11.42,-2.949 17.17,-4.422 17.17,-27.402 l 0.93,-77.731 c 0.5,-38.668 1.03,-80.199 1.26,-103.4296 -51.33,57.4726 -160.86,181.7736 -188.51,217.5116 -6.78,8.68 -10.53,13.449 -17.38,13.449 -9.28,0 -20.13,0.743 -29.55,1.379 -7.55,0.5 -14.21,0.934 -18.55,0.934 -12.43,0 -18.72,-3.953 -18.72,-11.781 0,-10.34 10.9,-11.911 15.93,-12.621 10.36,-1.731 14.33,-3.668 18.82,-7.11 2.1,-1.629 5.01,-3.879 5.01,-26.988 0,-29.461 -3.75,-186.1837 -5.06,-201.8126 -2.12,-24.4688 -4.58,-25.168 -18.72,-29.1485 -6.17,-1.6718 -14.6,-3.9609 -14.6,-12.7421 0,-5.1797 2.84,-11.34771 16.4,-11.34771 1.21,0 3.75,0.23829 7.15,0.61719 11.38,1.22266 33.32,1.64062 46.82,0.3125 25.84,-2.53125 30.46,3.93752 30.46,10.41802 0,9.3593 -9.18,11.8515 -14.53,13.3203 -8.73,2.4922 -15.61,6.5195 -17.27,10.1992 -3.05,6.5234 -4.31,16.8515 -4.31,35.6719 0,10.1093 0.37,54.9488 0.74,98.9808 0.25,28.839 0.47,57.359 0.59,75.558 25.28,-29.508 56.38,-65.5 86.72,-100.609 49.5,-57.2697 96.26,-111.3712 113.23,-132.09 l 1.93,-2.3516 c 3.93,-4.8203 7.75,-9.97652 12.34,-14.19918 3.35,-3.089845 8.47,-4.83985 12.86,-2.871095 3.52,1.570315 5.52,5.300785 6.26,8.941405 0.88,4.26177 0.44,8.69927 0.28,13.01177 -0.59,15.3281 -0.42,31.5898 -0.25,52.0703 0.12,12.1172 0.25,25.7184 0.25,41.4684 0,49.141 1.03,147.141 2.98,161.66 1.58,10.52 2.25,14.879 14.31,18.891 l 2.09,0.75 c 4.07,1.41 11.6,4.027 11.6,12.02 0,4.949 -2.76,10.859 -15.96,10.859" /></g></g></svg>`;var qi=Object.defineProperty,Vi=Object.getOwnPropertyDescriptor,C=(o,t,e,n)=>{for(var i=n>1?void 0:n?Vi(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&&qi(t,e,i),i};const le=class le extends u{constructor(){super(...arguments),this.ispagedesigner=!1,this._classPopin="",this.open=!1,this.background="",this.backgroundUrl="",this.closeOnEsc=!0,this.closeOnBackdrop=!0,this.lockScroll=!0,this.variant="fullscreen",this.maxWidth="640px",this.showBackButton=!1,this.contrast=!1,this.iconSize="large",this.hideHeaderOnScroll=!1,this._labelId=`title-${Math.random().toString(36).slice(2)}`,this._headerHidden=!1,this._onBackdropClick=t=>{var n;if(!this.open||!this.closeOnBackdrop)return;const e=t.composedPath()[0];(n=e==null?void 0:e.classList)!=null&&n.contains("backdrop")&&this._requestClose("backdrop")},this._onScroll=t=>{if(!this.hideHeaderOnScroll||!this.open)return;const i=t.target.scrollTop>50;i!==this._headerHidden&&(this._headerHidden=i,this.requestUpdate())}}get classPopin(){return this.ispagedesigner?"pagedesigner-popin "+this._classPopin:this._classPopin}set classPopin(t){this._classPopin=t}connectedCallback(){super.connectedCallback(),this._onKeydown=this._onKeydown.bind(this),this._onScroll=this._onScroll.bind(this),document.addEventListener("keydown",this._onKeydown)}disconnectedCallback(){document.removeEventListener("keydown",this._onKeydown),this._removeScrollListener(),super.disconnectedCallback()}updated(t){if(t.has("background")||t.has("backgroundUrl")){let e="";this.background&&this.background.trim()?e=this.background.trim():this.backgroundUrl&&this.backgroundUrl.trim()&&(e=`url('${this.backgroundUrl.trim()}') center/cover no-repeat`),this.style.setProperty("--_bg",e)}if(t.has("open")){if(this.lockScroll){const e=document==null?void 0:document.body;e&&(e.style.overflow=this.open&&!this.ispagedesigner?"hidden":"")}this.open?this.updateComplete.then(()=>{var n;(n=this.renderRoot.querySelector("[data-close-btn]")??this.renderRoot.querySelector('[role="dialog"]'))==null||n.focus(),this._setupScrollListener(),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0}))}):(this._removeScrollListener(),this._headerHidden=!1,this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0})))}(t.has("hideHeaderOnScroll")||t.has("open"))&&(this.open?this._setupScrollListener():this._removeScrollListener())}_onKeydown(t){this.open&&this.closeOnEsc&&t.key==="Escape"&&(t.preventDefault(),this._requestClose("esc"))}_setupScrollListener(){this.hideHeaderOnScroll&&(this._removeScrollListener(),this.updateComplete.then(()=>{const t=this.renderRoot.querySelector('main[part="body"]');t&&t.addEventListener("scroll",this._onScroll,{passive:!0})}))}_removeScrollListener(){const t=this.renderRoot.querySelector('main[part="body"]');t&&t.removeEventListener("scroll",this._onScroll)}_onBackClick(){this.dispatchEvent(new CustomEvent("back",{bubbles:!0,composed:!0}))}_requestClose(t){const e=new CustomEvent("request-close",{bubbles:!0,composed:!0,detail:{reason:t}});this.dispatchEvent(e),e.defaultPrevented||(this.open=!1)}_renderCloseButton(){return customElements.get("o-icon-button")?l`
+         d="m 1647.15,320.5 c -2.07,0 -4.94,-0.199 -8.49,-0.469 -8.68,-0.64 -23.5,-1.062 -37.41,-0.172 -20.4,1.282 -32.01,-0.589 -32.01,-10.687 0,-8.66 8.46,-10.781 15.19,-12.461 11.42,-2.949 17.17,-4.422 17.17,-27.402 l 0.93,-77.731 c 0.5,-38.668 1.03,-80.199 1.26,-103.4296 -51.33,57.4726 -160.86,181.7736 -188.51,217.5116 -6.78,8.68 -10.53,13.449 -17.38,13.449 -9.28,0 -20.13,0.743 -29.55,1.379 -7.55,0.5 -14.21,0.934 -18.55,0.934 -12.43,0 -18.72,-3.953 -18.72,-11.781 0,-10.34 10.9,-11.911 15.93,-12.621 10.36,-1.731 14.33,-3.668 18.82,-7.11 2.1,-1.629 5.01,-3.879 5.01,-26.988 0,-29.461 -3.75,-186.1837 -5.06,-201.8126 -2.12,-24.4688 -4.58,-25.168 -18.72,-29.1485 -6.17,-1.6718 -14.6,-3.9609 -14.6,-12.7421 0,-5.1797 2.84,-11.34771 16.4,-11.34771 1.21,0 3.75,0.23829 7.15,0.61719 11.38,1.22266 33.32,1.64062 46.82,0.3125 25.84,-2.53125 30.46,3.93752 30.46,10.41802 0,9.3593 -9.18,11.8515 -14.53,13.3203 -8.73,2.4922 -15.61,6.5195 -17.27,10.1992 -3.05,6.5234 -4.31,16.8515 -4.31,35.6719 0,10.1093 0.37,54.9488 0.74,98.9808 0.25,28.839 0.47,57.359 0.59,75.558 25.28,-29.508 56.38,-65.5 86.72,-100.609 49.5,-57.2697 96.26,-111.3712 113.23,-132.09 l 1.93,-2.3516 c 3.93,-4.8203 7.75,-9.97652 12.34,-14.19918 3.35,-3.089845 8.47,-4.83985 12.86,-2.871095 3.52,1.570315 5.52,5.300785 6.26,8.941405 0.88,4.26177 0.44,8.69927 0.28,13.01177 -0.59,15.3281 -0.42,31.5898 -0.25,52.0703 0.12,12.1172 0.25,25.7184 0.25,41.4684 0,49.141 1.03,147.141 2.98,161.66 1.58,10.52 2.25,14.879 14.31,18.891 l 2.09,0.75 c 4.07,1.41 11.6,4.027 11.6,12.02 0,4.949 -2.76,10.859 -15.96,10.859" /></g></g></svg>`;var qi=Object.defineProperty,Vi=Object.getOwnPropertyDescriptor,C=(o,t,e,n)=>{for(var i=n>1?void 0:n?Vi(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&&qi(t,e,i),i};const le=class le extends u{constructor(){super(...arguments),this.ispagedesigner=!1,this._classPopin="",this.open=!1,this.background="",this.backgroundUrl="",this.closeOnEsc=!0,this.closeOnBackdrop=!0,this.lockScroll=!0,this.variant="fullscreen",this.maxWidth="640px",this.showBackButton=!1,this.contrast=!1,this.iconSize="large",this.hideHeaderOnScroll=!1,this._labelId=`title-${Math.random().toString(36).slice(2)}`,this._headerHidden=!1,this._onBackdropClick=t=>{var n;if(!this.open||!this.closeOnBackdrop)return;const e=t.composedPath()[0];(n=e==null?void 0:e.classList)!=null&&n.contains("backdrop")&&this._requestClose("backdrop")},this._onScroll=t=>{if(!this.hideHeaderOnScroll||!this.open)return;const i=t.target.scrollTop>50;i!==this._headerHidden&&(this._headerHidden=i,this.requestUpdate())}}get classPopin(){return this.ispagedesigner?"pagedesigner-popin "+this._classPopin:this._classPopin}set classPopin(t){this._classPopin=t}connectedCallback(){super.connectedCallback(),this._onKeydown=this._onKeydown.bind(this),this._onScroll=this._onScroll.bind(this),document.addEventListener("keydown",this._onKeydown)}disconnectedCallback(){document.removeEventListener("keydown",this._onKeydown),this._removeScrollListener(),super.disconnectedCallback()}updated(t){if(t.has("background")||t.has("backgroundUrl")){let e="";this.background&&this.background.trim()?e=this.background.trim():this.backgroundUrl&&this.backgroundUrl.trim()&&(e=`url('${this.backgroundUrl.trim()}') center/cover no-repeat`),this.style.setProperty("--_bg",e)}if(t.has("open")){if(this.lockScroll){const e=document==null?void 0:document.body;e&&(e.style.overflow=this.open&&!this.ispagedesigner?"hidden":"")}this.open?this.updateComplete.then(()=>{var n;(n=this.renderRoot.querySelector("[data-close-btn]")??this.renderRoot.querySelector('[role="dialog"]'))==null||n.focus(),this._setupScrollListener(),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0}))}):(this._removeScrollListener(),this._headerHidden=!1,this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0})))}(t.has("hideHeaderOnScroll")||t.has("open"))&&(this.open?this._setupScrollListener():this._removeScrollListener())}_onKeydown(t){this.open&&this.closeOnEsc&&t.key==="Escape"&&(t.preventDefault(),this._requestClose("esc"))}_setupScrollListener(){this.hideHeaderOnScroll&&(this._removeScrollListener(),this.updateComplete.then(()=>{const t=this.renderRoot.querySelector('main[part="body"]');t&&t.addEventListener("scroll",this._onScroll,{passive:!0})}))}_removeScrollListener(){const t=this.renderRoot.querySelector('main[part="body"]');t&&t.removeEventListener("scroll",this._onScroll)}_onBackClick(){this.dispatchEvent(new CustomEvent("back",{bubbles:!0,composed:!0}))}_resolvedIconSize(){return["xsmall","small","medium","large"].includes(this.iconSize)?this.iconSize:"large"}_requestClose(t){const e=new CustomEvent("request-close",{bubbles:!0,composed:!0,detail:{reason:t}});this.dispatchEvent(e),e.defaultPrevented||(this.open=!1)}_renderCloseButton(){return customElements.get("o-icon-button")?l`
         <o-icon-button
           data-close-btn
           icon="cross"
-          size="${this.iconSize}"
+          size="${this._resolvedIconSize()}"
           bgstyle="none-${this.contrast?"contrast":"light"}"
           status="empty"
           type="button"
@@ -3020,7 +3022,7 @@
         <div part="back">
           <o-icon-button
             icon="arrowLeft"
-            size="${this.iconSize}"
+            size="${this._resolvedIconSize()}"
             status="empty"
             class="return-btn"
             bgstyle="none-${this.contrast?"contrast":"light"}"
@@ -3046,7 +3048,7 @@
           <header part="header" class="${e}">
             ${this.showBackButton?this._renderBackButton():null}
             <div class="brand">
-              <span slot="logo${this.contrast?"-contrast":""}">${S(Ni)}</span>
+              <span slot="logo${this.contrast?"-contrast":""}">${E(Ni)}</span>
             </div>
             <div part="close${this.contrast?"-contrast":""}">${this._renderCloseButton()}</div>
           </header>

package/index.mjs

@@ -888,7 +888,7 @@ Ut.directiveName = "unsafeHTML", Ut.resultType = 1;
 class Nt extends Ut {
 }
 Nt.directiveName = "unsafeSVG", Nt.resultType = 2;
-const S = te(Nt);
+const E = te(Nt);
 /**
  * @license
  * Copyright 2020 Google LLC
@@ -1104,7 +1104,7 @@ let B = class extends u {
     return l`
 			${this.type === "span" ? l`
 				<span class="icon icon-button ${this.size} ${this.bgstyle} ${this.status} ${n}" ?disabled="${this.disabled}">	
-					${S(r)}
+					${E(r)}
 				</span>
 			` : l`
 				<button
@@ -1114,7 +1114,7 @@ let B = class extends u {
 					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${n}"
 					?disabled="${this.disabled}"
 				>
-					${S(r)}
+					${E(r)}
 					${s}
 				</button>
 			`}
@@ -1982,7 +1982,7 @@ let m = class extends Go {
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     );
-    return l`<span class="${o === "start" ? "icon-start" : "icon-end"}">${S(e)}</span>`;
+    return l`<span class="${o === "start" ? "icon-start" : "icon-end"}">${E(e)}</span>`;
   }
   renderButton() {
     const o = this.text || this.textsecond;
@@ -2317,7 +2317,7 @@ let pt = class extends u {
     return l`
 			<button type="button" aria-describedby="${this.ariaDescribedBy}" class="wishlist-button">
 				<span class="sr-only">${this.label}</span>
-				${S(o)}
+				${E(o)}
 			</button>
 		`;
   }
@@ -2576,7 +2576,7 @@ let ut = class extends u {
 			<div class="rating">
 			<div class="stars">
 				${o.map(
-      (t) => l`<span class="star">${S(et[t] ?? "")}</span>`
+      (t) => l`<span class="star">${E(et[t] ?? "")}</span>`
     )}
 			</div>
 			${this.reviewCount != null && this.href != null ? l`<o-link template="review" href="${this.href}">${this.reviewCount}</o-link>` : null}
@@ -3061,7 +3061,7 @@ var li = Object.defineProperty, ci = Object.getOwnPropertyDescriptor, G = (o, t,
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && li(t, e, i), i;
 };
-let T = class extends u {
+let M = class extends u {
   constructor() {
     super(...arguments), this.options = [], this.value = "", this.name = "", this.disabled = !1, this.width = "100%", this.open = !1, this.activeIndex = -1, this.menuWidth = "", this._handleOutsideClick = (o) => {
       this.contains(o.target) || (this.open = !1, this.activeIndex = -1);
@@ -3172,10 +3172,10 @@ let T = class extends u {
                   ${e.url ? l`
                   <a href="${e.url}">
                     <span>${e.label}</span>
-                    ${e.value === this.value ? l`<span class="check">${S(o)}</span>` : null}
+                    ${e.value === this.value ? l`<span class="check">${E(o)}</span>` : null}
                   </a>` : l`
                     <span>${e.label}</span>
-                    ${e.value === this.value ? l`<span class="check">${S(o)}</span>` : null}`}
+                    ${e.value === this.value ? l`<span class="check">${E(o)}</span>` : null}`}
                 </li>`
     )}
           </ul>` : null}
@@ -3184,7 +3184,7 @@ let T = class extends u {
     `;
   }
 };
-T.styles = f`
+M.styles = f`
     :host {
       display: inline-block;
       position: relative;
@@ -3325,31 +3325,31 @@ T.styles = f`
   `;
 G([
   a({ type: Array, reflect: !0 })
-], T.prototype, "options", 2);
+], M.prototype, "options", 2);
 G([
   a({ type: String, reflect: !0 })
-], T.prototype, "value", 2);
+], M.prototype, "value", 2);
 G([
   a({ type: String, reflect: !0 })
-], T.prototype, "name", 2);
+], M.prototype, "name", 2);
 G([
   a({ type: Boolean, reflect: !0 })
-], T.prototype, "disabled", 2);
+], M.prototype, "disabled", 2);
 G([
   a({ type: String, reflect: !0 })
-], T.prototype, "width", 2);
+], M.prototype, "width", 2);
 G([
   W()
-], T.prototype, "open", 2);
+], M.prototype, "open", 2);
 G([
   W()
-], T.prototype, "activeIndex", 2);
+], M.prototype, "activeIndex", 2);
 G([
   W()
-], T.prototype, "menuWidth", 2);
-T = G([
+], M.prototype, "menuWidth", 2);
+M = G([
   y("o-dropdown")
-], T);
+], M);
 var hi = Object.getOwnPropertyDescriptor, di = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? hi(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = s(i) || i);
@@ -3536,7 +3536,7 @@ let z = class extends u {
 										<div class="right">
 											<span class="additional-text">${P(e.additionaltext)}</span>
 											${e.value === this.value && !e.additionaltext ? l`
-												<span class="check">${S(o)}</span>` : null}
+												<span class="check">${E(o)}</span>` : null}
 										</div>
 									</a>
 								</li>
@@ -4114,14 +4114,14 @@ let I = class extends Ci {
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="svg"'
     ).replace(/stroke=[#"'a-z1-9]*/gi, "");
-    return l`<span class="cross-icon">${S(o)}</span>`;
+    return l`<span class="cross-icon">${E(o)}</span>`;
   }
   strikeThroughImg() {
     const o = Oo[this.strikethroughImgName].replace(
       "<svg",
       '<svg aria-hidden="true" focusable="false" part="strikethrough"'
     ).replace(/stroke=[#"'a-z1-9]*/gi, "");
-    return S(o);
+    return E(o);
   }
   render() {
     const o = this.text;
@@ -4301,19 +4301,19 @@ N([
 I = N([
   y("o-filter-chip")
 ], I);
-var Si = Object.defineProperty, M = (o, t, e, n) => {
+var Si = Object.defineProperty, H = (o, t, e, n) => {
   for (var i = void 0, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = s(t, e, i) || i);
   return i && Si(t, e, i), i;
 };
 const ae = class ae extends u {
   constructor() {
-    super(...arguments), this.type = "cart | chevron", this.titleProduct = "", this.volume = "", this.perLiter = "", this.mainPrice = "", this.imageUrl = "https://placehold.co/56x70", this.altImage = "", this.fullwidth = !1, this.tagText = "";
+    super(...arguments), this.type = "cart | chevron", this.titleProduct = "", this.volume = "", this.perLiter = "", this.mainPrice = "", this.imageUrl = "https://placehold.co/56x70", this.altImage = "", this.fullwidth = !1, this.tagText = "", this.outOfStock = !1;
   }
   onClick(t) {
-    var n, i;
+    var n, i, r;
     const e = t.target;
-    (n = e == null ? void 0 : e.classList) != null && n.contains("add-to-bag") || ((i = this.onClickTile) == null || i.call(this), this.dispatchEvent(
+    (n = e == null ? void 0 : e.classList) != null && n.contains("add-to-bag") || (i = e == null ? void 0 : e.classList) != null && i.contains("js-availability-notify-details-cart") || ((r = this.onClickTile) == null || r.call(this), this.dispatchEvent(
       new CustomEvent("tile-click", { bubbles: !0, composed: !0 })
     ));
   }
@@ -4340,13 +4340,13 @@ const ae = class ae extends u {
       ` : l`
       <o-icon-button
         @click=${this.onClickIcons}
-        icon="cart"
+        icon=${this.outOfStock ? "notifyme" : "cart"}
         size="small"
         bgstyle="background-contrast"
         type="span"
         status="empty"
         strokewidth="0"
-        class="add-to-bag"
+        class=${this.outOfStock ? "js-availability-notify-details-cart" : "add-to-bag"}
       ></o-icon-button>
     `;
   }
@@ -4359,7 +4359,9 @@ const ae = class ae extends u {
       >
         ${this.imageUrl ? l`<img src="${this.imageUrl}" alt="${this.altImage || ""}" />` : ""}
         <div class="info">
-          ${this.tagText ? l`<o-tag bgstyle="background-emphasis">${this.tagText}</o-tag>` : ""}
+          ${this.outOfStock ? l`<o-tag type="nostock" role="status" aria-live="polite"
+              >${this.tagText}</o-tag
+            >` : this.tagText ? l`<o-tag bgstyle="background-emphasis">${this.tagText}</o-tag>` : ""}
           ${this.titleProduct ? l`<div class="title">${this.titleProduct}</div>` : ""}
           <div class="details">
             ${this.volume ? l`<span class="volume-info">${this.volume}</span>` : ""}
@@ -4485,41 +4487,44 @@ ae.styles = f`
       cursor: pointer;
     }
   `;
-let E = ae;
-M([
+let S = ae;
+H([
   a({ type: String })
-], E.prototype, "type");
-M([
+], S.prototype, "type");
+H([
   a({ type: String })
-], E.prototype, "titleProduct");
-M([
+], S.prototype, "titleProduct");
+H([
   a({ type: String })
-], E.prototype, "volume");
-M([
+], S.prototype, "volume");
+H([
   a({ type: String })
-], E.prototype, "perLiter");
-M([
+], S.prototype, "perLiter");
+H([
   a({ type: String })
-], E.prototype, "mainPrice");
-M([
+], S.prototype, "mainPrice");
+H([
   a({ type: String })
-], E.prototype, "imageUrl");
-M([
+], S.prototype, "imageUrl");
+H([
   a({ type: String })
-], E.prototype, "altImage");
-M([
+], S.prototype, "altImage");
+H([
   a({ type: Boolean })
-], E.prototype, "fullwidth");
-M([
+], S.prototype, "fullwidth");
+H([
   a({ type: String })
-], E.prototype, "tagText");
-M([
+], S.prototype, "tagText");
+H([
+  a({ type: Boolean })
+], S.prototype, "outOfStock");
+H([
   a({ attribute: !1 })
-], E.prototype, "onClickTile");
-M([
+], S.prototype, "onClickTile");
+H([
   a({ attribute: !1 })
-], E.prototype, "onClickIcon");
-customElements.define("mini-tile", E);
+], S.prototype, "onClickIcon");
+customElements.define("mini-tile", S);
 var Ei = Object.defineProperty, Ai = Object.getOwnPropertyDescriptor, Ht = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Ai(t, e) : t, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
@@ -4587,7 +4592,7 @@ Ht([
 ft = Ht([
   y("o-badge")
 ], ft);
-var Li = Object.defineProperty, Pi = Object.getOwnPropertyDescriptor, H = (o, t, e, n) => {
+var Li = Object.defineProperty, Pi = Object.getOwnPropertyDescriptor, T = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Pi(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 && Li(t, e, i), i;
@@ -4640,7 +4645,7 @@ let A = class extends u {
     return l`
             <div class="o-toast">
                 <div class="o-toast-icon">
-                    ${S(t)}
+                    ${E(t)}
                 </div>
                 <div class="o-toast-text">
                     ${this.text}
@@ -4734,40 +4739,40 @@ A.styles = f`
             height: 16px;
         }
     `;
-H([
+T([
   a({ type: String, reflect: !0 })
 ], A.prototype, "icon", 2);
-H([
+T([
   a({ type: String, reflect: !0 })
 ], A.prototype, "text", 2);
-H([
+T([
   a({ type: String, reflect: !0 })
 ], A.prototype, "verticalanchor", 2);
-H([
+T([
   a({ type: String, reflect: !0 })
 ], A.prototype, "horizontalanchor", 2);
-H([
+T([
   a({ type: Number, reflect: !0 })
 ], A.prototype, "verticaloffset", 2);
-H([
+T([
   a({ type: Number, reflect: !0 })
 ], A.prototype, "horizontaloffset", 2);
-H([
+T([
   a({ type: Number, reflect: !0 })
 ], A.prototype, "animationduration", 2);
-H([
+T([
   a({ type: String, reflect: !0 })
 ], A.prototype, "animationaxis", 2);
-H([
+T([
   a({ type: Boolean, reflect: !0 })
 ], A.prototype, "animated", 2);
-H([
+T([
   a({ type: Number, reflect: !0 })
 ], A.prototype, "lifeduration", 2);
-H([
+T([
   a({ type: Boolean, reflect: !0 })
 ], A.prototype, "multiline", 2);
-A = H([
+A = T([
   y("o-toast")
 ], A);
 var Bi = Object.defineProperty, zi = Object.getOwnPropertyDescriptor, j = (o, t, e, n) => {
@@ -4792,7 +4797,7 @@ let Oi = 0, L = class extends u {
     this.disabled || (o.key === " " || o.key === "Enter") && (o.preventDefault(), this.toggle());
   }
   render() {
-    const o = S(et.checkbox.replace("<svg", '<svg aria-hidden="true" focusable="false" part="svg"')), t = S(et.icoMinus.replace("<svg", '<svg class="indeterminate" aria-hidden="true" focusable="false" part="svg"'));
+    const o = E(et.checkbox.replace("<svg", '<svg aria-hidden="true" focusable="false" part="svg"')), t = E(et.icoMinus.replace("<svg", '<svg class="indeterminate" aria-hidden="true" focusable="false" part="svg"'));
     return l`
       <input
         type="checkbox"
@@ -5492,6 +5497,9 @@ const le = class le extends u {
   _onBackClick() {
     this.dispatchEvent(new CustomEvent("back", { bubbles: !0, composed: !0 }));
   }
+  _resolvedIconSize() {
+    return ["xsmall", "small", "medium", "large"].includes(this.iconSize) ? this.iconSize : "large";
+  }
   _requestClose(t) {
     const e = new CustomEvent("request-close", {
       bubbles: !0,
@@ -5505,7 +5513,7 @@ const le = class le extends u {
         <o-icon-button
           data-close-btn
           icon="cross"
-          size="${this.iconSize}"
+          size="${this._resolvedIconSize()}"
           bgstyle="none-${this.contrast ? "contrast" : "light"}"
           status="empty"
           type="button"
@@ -5521,7 +5529,7 @@ const le = class le extends u {
         <div part="back">
           <o-icon-button
             icon="arrowLeft"
-            size="${this.iconSize}"
+            size="${this._resolvedIconSize()}"
             status="empty"
             class="return-btn"
             bgstyle="none-${this.contrast ? "contrast" : "light"}"
@@ -5551,7 +5559,7 @@ const le = class le extends u {
           <header part="header" class="${e}">
             ${this.showBackButton ? this._renderBackButton() : null}
             <div class="brand">
-              <span slot="logo${this.contrast ? "-contrast" : ""}">${S(Ni)}</span>
+              <span slot="logo${this.contrast ? "-contrast" : ""}">${E(Ni)}</span>
             </div>
             <div part="close${this.contrast ? "-contrast" : ""}">${this._renderCloseButton()}</div>
           </header>

package/package.json

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