@florid-kit/components 0.8.40 → 0.8.42

package/index.js

@@ -29,9 +29,8 @@
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */function K(o){return a({...o,state:!0,attribute:!1})}const mt=b`
-	outline: 1px dashed var(--button-border-color);
+	outline: 1px dashed var(--color-border-primary);
 	outline-offset: 2px;
-	outline: dashed black;
 `;b`
 	:host * {
 		box-sizing: border-box;
@@ -78,7 +77,7 @@
 `,Ne=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.12506 1C10.5018 1 13.2509 3.74834 13.251 7.125C13.2511 8.59738 12.7172 10.0206 11.7491 11.1299L14.8731 14.2539C15.0433 14.4253 15.0435 14.7018 14.8731 14.873C14.7913 14.9555 14.6797 15.002 14.5635 15.002C14.4475 15.0019 14.3357 14.9554 14.254 14.873L11.1309 11.749C10.0555 12.6818 8.6564 13.251 7.12506 13.251C3.7484 13.2508 1.00006 10.5017 1.00006 7.125C1.00025 3.74846 3.74852 1.00019 7.12506 1ZM7.12506 1.875C4.22971 1.87522 1.87506 4.23058 1.87506 7.12598C1.87532 10.0212 4.22987 12.3758 7.12506 12.376C10.0204 12.376 12.3758 10.0213 12.376 7.12598C12.376 4.23044 10.0206 1.875 7.12506 1.875Z" fill="#3F2B2E"/>
 </svg>
-`,Re=`<?xml version="1.0" encoding="utf-8"?>
+`,Fe=`<?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
@@ -88,7 +87,7 @@
 <path class="st0" d="M40,20c0,0.7-0.6,1.2-1.2,1.2H21.2v17.5c0,0.7-0.6,1.2-1.2,1.2s-1.2-0.6-1.2-1.2V21.2H1.2C0.6,21.2,0,20.7,0,20
 	s0.6-1.2,1.2-1.2h17.5V1.2C18.8,0.6,19.3,0,20,0s1.2,0.6,1.2,1.2v17.5h17.5C39.4,18.8,40,19.3,40,20z"/>
 </svg>
-`,Fe=`<?xml version="1.0" encoding="utf-8"?>
+`,Re=`<?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
@@ -131,7 +130,7 @@
 <path d="M2.31202e-08 7.85218C0.974855 6.83983 3.01741 4.44477 6.12766 0.666992L6.54545 0.926252C5.54739 3.04971 4.35203 5.40773 2.95938 8.00033C4.35203 10.5929 5.54739 12.9509 6.54545 15.0744L6.12766 15.3337C3.01741 11.5559 0.974855 9.16082 0 8.14847L2.31202e-08 7.85218Z" fill="#3F2B2E"/>
 <path d="M16 8.14847C15.0251 9.16082 12.9826 11.5559 9.87234 15.3337L9.45455 15.0744C10.4526 12.9509 11.648 10.5929 13.0406 8.00033C11.648 5.40773 10.4526 3.04971 9.45455 0.92625L9.87234 0.666992C12.9826 4.44477 15.0251 6.83983 16 7.85218V8.14847Z" fill="#3F2B2E"/>
 </svg>
-`,G={wishlist:Ie,playerv:Oe,chevronRight:Be,chevronLeft:ze,icoPlus:Re,icoMinus:Fe,"star-0":De,"star-25":He,"star-50":Te,"star-75":Me,"star-100":je,cross:Ue,search:Ne,arrowLeft:Ve,arrowTop:Ze,cart:qe,notifyme:We,triangledown:Ke,triangleup:Ge,checkstroke:Xe,pause:Je,mapDualArrow:Qe,swipeDualArrow:to},eo={strikeDiagonal:Ye};/**
+`,G={wishlist:Ie,playerv:Oe,chevronRight:Be,chevronLeft:ze,icoPlus:Fe,icoMinus:Re,"star-0":De,"star-25":He,"star-50":Te,"star-75":Me,"star-100":je,cross:Ue,search:Ne,arrowLeft:Ve,arrowTop:Ze,cart:qe,notifyme:We,triangledown:Ke,triangleup:Ge,checkstroke:Xe,pause:Je,mapDualArrow:Qe,swipeDualArrow:to},eo={strikeDiagonal:Ye};/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
@@ -173,6 +172,10 @@
       display: inline-flex;
     }
 
+    :host(.a--tabfocus) {
+      outline: none !important;
+    }
+
     :host([fullwidth]) {
       width: 100%;
     }
@@ -1010,7 +1013,7 @@
 				--line-height: var(--line-height-280);
 			}
 		}
-	`;g([a({type:Boolean,reflect:!0})],v.prototype,"open",2);g([a({type:Boolean,reflect:!0})],v.prototype,"showHeader",2);g([a({type:Boolean,reflect:!0})],v.prototype,"showFooter",2);g([a({type:Boolean,reflect:!0})],v.prototype,"showHeaderStartIcon",2);g([a({type:String,reflect:!0})],v.prototype,"headerTitle",2);g([a({type:String,reflect:!0})],v.prototype,"headerTitleClassName",2);g([a({type:String,reflect:!0})],v.prototype,"closeButtonLabel",2);g([a({type:String,reflect:!0})],v.prototype,"firstButtonLabel",2);g([a({type:String,reflect:!0})],v.prototype,"firstButtonVariant",2);g([a({type:Object,reflect:!0})],v.prototype,"firstButtonProps",2);g([a({type:Boolean,reflect:!0})],v.prototype,"onFirstButtonClickClose",2);g([a({type:String,reflect:!0})],v.prototype,"secondButtonLabel",2);g([a({type:String,reflect:!0})],v.prototype,"secondButtonVariant",2);g([a({type:Object,reflect:!0})],v.prototype,"secondButtonProps",2);g([a({type:Boolean,reflect:!0})],v.prototype,"onSecondButtonClickClose",2);g([a({type:Boolean,reflect:!0})],v.prototype,"disablePortal",2);g([a({type:Number,reflect:!0})],v.prototype,"zIndex",2);g([a({type:Boolean,reflect:!0})],v.prototype,"initialized",2);v=g([x("o-side-panel")],v);var Co=Object.defineProperty,ko=Object.getOwnPropertyDescriptor,R=(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&&Co(t,e,i),i};let P=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`
+	`;g([a({type:Boolean,reflect:!0})],v.prototype,"open",2);g([a({type:Boolean,reflect:!0})],v.prototype,"showHeader",2);g([a({type:Boolean,reflect:!0})],v.prototype,"showFooter",2);g([a({type:Boolean,reflect:!0})],v.prototype,"showHeaderStartIcon",2);g([a({type:String,reflect:!0})],v.prototype,"headerTitle",2);g([a({type:String,reflect:!0})],v.prototype,"headerTitleClassName",2);g([a({type:String,reflect:!0})],v.prototype,"closeButtonLabel",2);g([a({type:String,reflect:!0})],v.prototype,"firstButtonLabel",2);g([a({type:String,reflect:!0})],v.prototype,"firstButtonVariant",2);g([a({type:Object,reflect:!0})],v.prototype,"firstButtonProps",2);g([a({type:Boolean,reflect:!0})],v.prototype,"onFirstButtonClickClose",2);g([a({type:String,reflect:!0})],v.prototype,"secondButtonLabel",2);g([a({type:String,reflect:!0})],v.prototype,"secondButtonVariant",2);g([a({type:Object,reflect:!0})],v.prototype,"secondButtonProps",2);g([a({type:Boolean,reflect:!0})],v.prototype,"onSecondButtonClickClose",2);g([a({type:Boolean,reflect:!0})],v.prototype,"disablePortal",2);g([a({type:Number,reflect:!0})],v.prototype,"zIndex",2);g([a({type:Boolean,reflect:!0})],v.prototype,"initialized",2);v=g([x("o-side-panel")],v);var Co=Object.defineProperty,ko=Object.getOwnPropertyDescriptor,F=(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&&Co(t,e,i),i};let P=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"
@@ -1146,7 +1149,7 @@
       height: 0;
       width: 0;
     }
-  `;R([a({type:Array})],P.prototype,"thumbnails",2);R([a({type:Number})],P.prototype,"activeIndex",2);R([a({type:Array})],P.prototype,"disabledIndexes",2);R([a({type:String})],P.prototype,"maxWidth",2);R([a({type:String})],P.prototype,"altressource",2);R([a({type:Object})],P.prototype,"swiperInstance",2);R([K()],P.prototype,"focusedIndex",2);P=R([x("thumbnail-navigation")],P);var Ao=Object.defineProperty,Eo=Object.getOwnPropertyDescriptor,jt=(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 lt=class extends u{constructor(){super(...arguments),this.type="",this.bgstyle="background-white"}render(){return l`
+  `;F([a({type:Array})],P.prototype,"thumbnails",2);F([a({type:Number})],P.prototype,"activeIndex",2);F([a({type:Array})],P.prototype,"disabledIndexes",2);F([a({type:String})],P.prototype,"maxWidth",2);F([a({type:String})],P.prototype,"altressource",2);F([a({type:Object})],P.prototype,"swiperInstance",2);F([K()],P.prototype,"focusedIndex",2);P=F([x("thumbnail-navigation")],P);var Ao=Object.defineProperty,Eo=Object.getOwnPropertyDescriptor,jt=(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 lt=class extends u{constructor(){super(...arguments),this.type="",this.bgstyle="background-white"}render(){return l`
       <span class="tag ${this.bgstyle}"><slot></slot></span>
     `}};lt.styles=b`
     .tag {
@@ -1866,7 +1869,7 @@
         overflow: hidden;
       }
     }
-  `;Nt([a({type:Object,reflect:!0})],ht.prototype,"option",2);Nt([a({type:Number,reflect:!0})],ht.prototype,"imageSize",2);ht=Nt([x("o-reassurance")],ht);var Uo=Object.defineProperty,No=Object.getOwnPropertyDescriptor,H=(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&&Uo(t,e,i),i};const Ro=Dt(u);let k=class extends Ro{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`
+  `;Nt([a({type:Object,reflect:!0})],ht.prototype,"option",2);Nt([a({type:Number,reflect:!0})],ht.prototype,"imageSize",2);ht=Nt([x("o-reassurance")],ht);var Uo=Object.defineProperty,No=Object.getOwnPropertyDescriptor,H=(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&&Uo(t,e,i),i};const Fo=Dt(u);let k=class extends Fo{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>
@@ -1890,6 +1893,10 @@
       --button-endicon-svg-width: 0px; /* No endicon SVG for secondary button */
     }
 
+    :host(.a--tabfocus) {
+      outline: none !important;
+    }
+
     :host([fullwidth]) {
       width: 100%;
     }
@@ -1960,7 +1967,7 @@
       display: inline-flex;
       align-items: center;
     }
-  `;H([a({type:String,reflect:!0})],k.prototype,"link",2);H([a({reflect:!0})],k.prototype,"name",2);H([a({reflect:!0})],k.prototype,"value",2);H([a({type:String})],k.prototype,"text",2);H([a({type:String,reflect:!0})],k.prototype,"size",2);H([a({type:Boolean,reflect:!0})],k.prototype,"selected",2);H([a({type:Boolean,reflect:!0})],k.prototype,"fullwidth",2);H([a({type:Boolean,reflect:!0})],k.prototype,"inactive",2);k=H([x("o-chip")],k);var Fo=Object.defineProperty,Vo=Object.getOwnPropertyDescriptor,Rt=(o,t,e,n)=>{for(var i=n>1?void 0:n?Vo(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&&Fo(t,e,i),i};let dt=class extends u{constructor(){super(),this.name="",this.value="",this.addEventListener("selected",this.onChipSelected)}onChipSelected(o){const t=o.target instanceof k?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`
+  `;H([a({type:String,reflect:!0})],k.prototype,"link",2);H([a({reflect:!0})],k.prototype,"name",2);H([a({reflect:!0})],k.prototype,"value",2);H([a({type:String})],k.prototype,"text",2);H([a({type:String,reflect:!0})],k.prototype,"size",2);H([a({type:Boolean,reflect:!0})],k.prototype,"selected",2);H([a({type:Boolean,reflect:!0})],k.prototype,"fullwidth",2);H([a({type:Boolean,reflect:!0})],k.prototype,"inactive",2);k=H([x("o-chip")],k);var Ro=Object.defineProperty,Vo=Object.getOwnPropertyDescriptor,Ft=(o,t,e,n)=>{for(var i=n>1?void 0:n?Vo(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 dt=class extends u{constructor(){super(),this.name="",this.value="",this.addEventListener("selected",this.onChipSelected)}onChipSelected(o){const t=o.target instanceof k?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>
     `}};dt.styles=b`
     :host {
@@ -1969,7 +1976,7 @@
       flex-wrap: wrap;
       gap: var(--spacing-s);
     }
-  `;Rt([a({reflect:!0})],dt.prototype,"name",2);Rt([a({reflect:!0})],dt.prototype,"value",2);dt=Rt([x("o-chipset")],dt);var Zo=Object.defineProperty,qo=Object.getOwnPropertyDescriptor,T=(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&&Zo(t,e,i),i};const Wo=Dt(u);let E=class extends Wo{constructor(){super(...arguments),this.name="",this.value="",this.type="",this.dataHref="",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=G[this.crossIconName].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"').replace(/stroke=[#"'a-z1-9]*/gi,"");return l`<span class="cross-icon">${L(o)}</span>`}strikeThroughImg(){const o=eo[this.strikethroughImgName].replace("<svg",'<svg aria-hidden="true" focusable="false" part="strikethrough"').replace(/stroke=[#"'a-z1-9]*/gi,"");return L(o)}render(){const o=this.text;return l`${this.type==="link"?l`
+  `;Ft([a({reflect:!0})],dt.prototype,"name",2);Ft([a({reflect:!0})],dt.prototype,"value",2);dt=Ft([x("o-chipset")],dt);var Zo=Object.defineProperty,qo=Object.getOwnPropertyDescriptor,T=(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&&Zo(t,e,i),i};const Wo=Dt(u);let E=class extends Wo{constructor(){super(...arguments),this.name="",this.value="",this.type="",this.dataHref="",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=G[this.crossIconName].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"').replace(/stroke=[#"'a-z1-9]*/gi,"");return l`<span class="cross-icon">${L(o)}</span>`}strikeThroughImg(){const o=eo[this.strikethroughImgName].replace("<svg",'<svg aria-hidden="true" focusable="false" part="strikethrough"').replace(/stroke=[#"'a-z1-9]*/gi,"");return L(o)}render(){const o=this.text;return l`${this.type==="link"?l`
       <a role="button" tabindex="0" class="button" href=${this.dataHref} ?disabled=${this.disabled} @click=${this.handleClick} @keydown=${this.handleClick}
         aria-label=${this.ariaLabel} aria-pressed=${this.selected}>
         ${o?l`
@@ -2005,6 +2012,10 @@
       --button-strikethrough-stroke: var(--color-border-secondary);
     }
 
+    :host(.a--tabfocus) {
+      outline: none !important;
+    }
+
     :host([fullwidth]) {
       width: 100%;
     }
@@ -2110,7 +2121,7 @@
         stroke-linecap: round;
       }
     }
-  `;T([a({reflect:!0})],E.prototype,"name",2);T([a({reflect:!0})],E.prototype,"value",2);T([a({type:String,reflect:!0})],E.prototype,"type",2);T([a({type:String,reflect:!0,attribute:"data-href"})],E.prototype,"dataHref",2);T([a({type:String})],E.prototype,"text",2);T([a({type:Boolean,reflect:!0})],E.prototype,"selected",2);T([a({type:Boolean,reflect:!0})],E.prototype,"disabled",2);T([a({type:Boolean,reflect:!0})],E.prototype,"fullwidth",2);E=T([x("o-filter-chip")],E);var Ko=Object.defineProperty,F=(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&&Ko(t,e,i),i};const Ft=class Ft 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=""}onClick(){typeof this.onClickTile=="function"&&this.onClickTile()}get icons(){return this.type==="chevron"?l`
+  `;T([a({reflect:!0})],E.prototype,"name",2);T([a({reflect:!0})],E.prototype,"value",2);T([a({type:String,reflect:!0})],E.prototype,"type",2);T([a({type:String,reflect:!0,attribute:"data-href"})],E.prototype,"dataHref",2);T([a({type:String})],E.prototype,"text",2);T([a({type:Boolean,reflect:!0})],E.prototype,"selected",2);T([a({type:Boolean,reflect:!0})],E.prototype,"disabled",2);T([a({type:Boolean,reflect:!0})],E.prototype,"fullwidth",2);E=T([x("o-filter-chip")],E);var Ko=Object.defineProperty,R=(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&&Ko(t,e,i),i};const Rt=class Rt 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=""}onClick(){typeof this.onClickTile=="function"&&this.onClickTile()}get icons(){return this.type==="chevron"?l`
                 <o-icon-button
                     @click=${this.onClick}
                     icon="chevronRight"
@@ -2134,17 +2145,15 @@
             ${this.imageUrl?l`<img src="${this.imageUrl}" alt="${this.altImage||""}" />`:""}
             <div class="info">
                 ${this.titleProduct?l`<div class="title">${this.titleProduct}</div>`:""}
-                ${this.type==="cart"&&(this.volume||this.mainPrice||this.perLiter)?l`
-                    <div class="details">
-                        ${this.volume?l`<span class="volume-info">${this.volume}</span>`:""}
-                        ${this.mainPrice?l`<span class="main-price">${this.mainPrice}</span>`:""}
-                        ${this.perLiter?l`<span class="per-liter">${this.perLiter}</span>`:""}
-                    </div>
-                `:""}
+                <div class="details">
+                    ${this.volume?l`<span class="volume-info">${this.volume}</span>`:""}
+                    ${this.type==="cart"&&this.mainPrice?l`<span class="main-price">${this.mainPrice}</span>`:""}
+                    ${this.type==="cart"&&this.perLiter?l`<span class="per-liter">${this.perLiter}</span>`:""}
+                </div>
             </div>
             ${this.icons}
         </div>
-    `}};Ft.styles=b`
+    `}};Rt.styles=b`
     .tile {
           display: flex;
           align-items: center;
@@ -2163,6 +2172,7 @@
           object-fit: cover;
           width: 56px;
           height: auto;
+          background: linear-gradient(to bottom, #F9F5F0, #F7F2EA);
         }
 
         .info {
@@ -2216,4 +2226,4 @@
           letter-spacing: var(--letter-spacing-absolute);
           line-height: var(--line-height-160);
         }
-  `;let S=Ft;F([a({type:String})],S.prototype,"type");F([a({type:String})],S.prototype,"titleProduct");F([a({type:String})],S.prototype,"volume");F([a({type:String})],S.prototype,"perLiter");F([a({type:String})],S.prototype,"mainPrice");F([a({type:String})],S.prototype,"imageUrl");F([a({type:String})],S.prototype,"altImage");F([a({type:Function})],S.prototype,"onClickTile");customElements.define("mini-tile",S);
+  `;let S=Rt;R([a({type:String})],S.prototype,"type");R([a({type:String})],S.prototype,"titleProduct");R([a({type:String})],S.prototype,"volume");R([a({type:String})],S.prototype,"perLiter");R([a({type:String})],S.prototype,"mainPrice");R([a({type:String})],S.prototype,"imageUrl");R([a({type:String})],S.prototype,"altImage");R([a({type:Function})],S.prototype,"onClickTile");customElements.define("mini-tile",S);

package/index.mjs

@@ -600,9 +600,8 @@ function K(o) {
   return a({ ...o, state: !0, attribute: !1 });
 }
 const mt = b`
-	outline: 1px dashed var(--button-border-color);
+	outline: 1px dashed var(--color-border-primary);
 	outline-offset: 2px;
-	outline: dashed black;
 `;
 b`
 	:host * {
@@ -690,7 +689,7 @@ const Ie = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
 `, Ne = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.12506 1C10.5018 1 13.2509 3.74834 13.251 7.125C13.2511 8.59738 12.7172 10.0206 11.7491 11.1299L14.8731 14.2539C15.0433 14.4253 15.0435 14.7018 14.8731 14.873C14.7913 14.9555 14.6797 15.002 14.5635 15.002C14.4475 15.0019 14.3357 14.9554 14.254 14.873L11.1309 11.749C10.0555 12.6818 8.6564 13.251 7.12506 13.251C3.7484 13.2508 1.00006 10.5017 1.00006 7.125C1.00025 3.74846 3.74852 1.00019 7.12506 1ZM7.12506 1.875C4.22971 1.87522 1.87506 4.23058 1.87506 7.12598C1.87532 10.0212 4.22987 12.3758 7.12506 12.376C10.0204 12.376 12.3758 10.0213 12.376 7.12598C12.376 4.23044 10.0206 1.875 7.12506 1.875Z" fill="#3F2B2E"/>
 </svg>
-`, Re = `<?xml version="1.0" encoding="utf-8"?>
+`, Fe = `<?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
@@ -700,7 +699,7 @@ const Ie = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
 <path class="st0" d="M40,20c0,0.7-0.6,1.2-1.2,1.2H21.2v17.5c0,0.7-0.6,1.2-1.2,1.2s-1.2-0.6-1.2-1.2V21.2H1.2C0.6,21.2,0,20.7,0,20
 	s0.6-1.2,1.2-1.2h17.5V1.2C18.8,0.6,19.3,0,20,0s1.2,0.6,1.2,1.2v17.5h17.5C39.4,18.8,40,19.3,40,20z"/>
 </svg>
-`, Fe = `<?xml version="1.0" encoding="utf-8"?>
+`, Re = `<?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
@@ -748,8 +747,8 @@ const Ie = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
   playerv: Oe,
   chevronRight: Be,
   chevronLeft: ze,
-  icoPlus: Re,
-  icoMinus: Fe,
+  icoPlus: Fe,
+  icoMinus: Re,
   "star-0": De,
   "star-25": He,
   "star-50": Te,
@@ -899,6 +898,10 @@ f.styles = b`
       display: inline-flex;
     }
 
+    :host(.a--tabfocus) {
+      outline: none !important;
+    }
+
     :host([fullwidth]) {
       width: 100%;
     }
@@ -2294,7 +2297,7 @@ g([
 v = g([
   x("o-side-panel")
 ], v);
-var Co = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, R = (o, t, e, n) => {
+var Co = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, F = (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 && Co(t, e, i), i;
@@ -2482,28 +2485,28 @@ P.styles = b`
       width: 0;
     }
   `;
-R([
+F([
   a({ type: Array })
 ], P.prototype, "thumbnails", 2);
-R([
+F([
   a({ type: Number })
 ], P.prototype, "activeIndex", 2);
-R([
+F([
   a({ type: Array })
 ], P.prototype, "disabledIndexes", 2);
-R([
+F([
   a({ type: String })
 ], P.prototype, "maxWidth", 2);
-R([
+F([
   a({ type: String })
 ], P.prototype, "altressource", 2);
-R([
+F([
   a({ type: Object })
 ], P.prototype, "swiperInstance", 2);
-R([
+F([
   K()
 ], P.prototype, "focusedIndex", 2);
-P = R([
+P = F([
   x("thumbnail-navigation")
 ], P);
 var Ao = Object.defineProperty, Eo = Object.getOwnPropertyDescriptor, jt = (o, t, e, n) => {
@@ -3564,8 +3567,8 @@ var Uo = Object.defineProperty, No = Object.getOwnPropertyDescriptor, H = (o, t,
     (s = o[r]) && (i = (n ? s(t, e, i) : s(i)) || i);
   return n && i && Uo(t, e, i), i;
 };
-const Ro = Dt(u);
-let k = class extends Ro {
+const Fo = Dt(u);
+let k = class extends Fo {
   constructor() {
     super(...arguments), this.link = "", this.name = "", this.value = "", this.text = "", this.size = "standard", this.selected = !1, this.fullwidth = !1, this.inactive = !1;
   }
@@ -3603,6 +3606,10 @@ k.styles = b`
       --button-endicon-svg-width: 0px; /* No endicon SVG for secondary button */
     }
 
+    :host(.a--tabfocus) {
+      outline: none !important;
+    }
+
     :host([fullwidth]) {
       width: 100%;
     }
@@ -3701,10 +3708,10 @@ H([
 k = H([
   x("o-chip")
 ], k);
-var Fo = Object.defineProperty, Vo = Object.getOwnPropertyDescriptor, Rt = (o, t, e, n) => {
+var Ro = Object.defineProperty, Vo = Object.getOwnPropertyDescriptor, Ft = (o, t, e, n) => {
   for (var i = n > 1 ? void 0 : n ? Vo(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 && Fo(t, e, i), i;
+  return n && i && Ro(t, e, i), i;
 };
 let dt = class extends u {
   constructor() {
@@ -3730,13 +3737,13 @@ dt.styles = b`
       gap: var(--spacing-s);
     }
   `;
-Rt([
+Ft([
   a({ reflect: !0 })
 ], dt.prototype, "name", 2);
-Rt([
+Ft([
   a({ reflect: !0 })
 ], dt.prototype, "value", 2);
-dt = Rt([
+dt = Ft([
   x("o-chipset")
 ], dt);
 var Zo = Object.defineProperty, qo = Object.getOwnPropertyDescriptor, T = (o, t, e, n) => {
@@ -3811,6 +3818,10 @@ E.styles = b`
       --button-strikethrough-stroke: var(--color-border-secondary);
     }
 
+    :host(.a--tabfocus) {
+      outline: none !important;
+    }
+
     :host([fullwidth]) {
       width: 100%;
     }
@@ -3944,12 +3955,12 @@ T([
 E = T([
   x("o-filter-chip")
 ], E);
-var Ko = Object.defineProperty, F = (o, t, e, n) => {
+var Ko = Object.defineProperty, R = (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 && Ko(t, e, i), i;
 };
-const Ft = class Ft extends u {
+const Rt = class Rt 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 = "";
   }
@@ -3984,20 +3995,18 @@ const Ft = class Ft extends u {
             ${this.imageUrl ? l`<img src="${this.imageUrl}" alt="${this.altImage || ""}" />` : ""}
             <div class="info">
                 ${this.titleProduct ? l`<div class="title">${this.titleProduct}</div>` : ""}
-                ${this.type === "cart" && (this.volume || this.mainPrice || this.perLiter) ? l`
-                    <div class="details">
-                        ${this.volume ? l`<span class="volume-info">${this.volume}</span>` : ""}
-                        ${this.mainPrice ? l`<span class="main-price">${this.mainPrice}</span>` : ""}
-                        ${this.perLiter ? l`<span class="per-liter">${this.perLiter}</span>` : ""}
-                    </div>
-                ` : ""}
+                <div class="details">
+                    ${this.volume ? l`<span class="volume-info">${this.volume}</span>` : ""}
+                    ${this.type === "cart" && this.mainPrice ? l`<span class="main-price">${this.mainPrice}</span>` : ""}
+                    ${this.type === "cart" && this.perLiter ? l`<span class="per-liter">${this.perLiter}</span>` : ""}
+                </div>
             </div>
             ${this.icons}
         </div>
     `;
   }
 };
-Ft.styles = b`
+Rt.styles = b`
     .tile {
           display: flex;
           align-items: center;
@@ -4016,6 +4025,7 @@ Ft.styles = b`
           object-fit: cover;
           width: 56px;
           height: auto;
+          background: linear-gradient(to bottom, #F9F5F0, #F7F2EA);
         }
 
         .info {
@@ -4070,29 +4080,29 @@ Ft.styles = b`
           line-height: var(--line-height-160);
         }
   `;
-let S = Ft;
-F([
+let S = Rt;
+R([
   a({ type: String })
 ], S.prototype, "type");
-F([
+R([
   a({ type: String })
 ], S.prototype, "titleProduct");
-F([
+R([
   a({ type: String })
 ], S.prototype, "volume");
-F([
+R([
   a({ type: String })
 ], S.prototype, "perLiter");
-F([
+R([
   a({ type: String })
 ], S.prototype, "mainPrice");
-F([
+R([
   a({ type: String })
 ], S.prototype, "imageUrl");
-F([
+R([
   a({ type: String })
 ], S.prototype, "altImage");
-F([
+R([
   a({ type: Function })
 ], S.prototype, "onClickTile");
 customElements.define("mini-tile", S);

package/package.json

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