@florid-kit/components 0.10.14 → 0.10.15

package/index.js

@@ -1654,57 +1654,48 @@
 			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([g("o-dropdown")],T);var si=Object.getOwnPropertyDescriptor,ai=(o,t,e,r)=>{for(var i=r>1?void 0:r?si(t,e):t,n=o.length-1,s;n>=0;n--)(s=o[n])&&(i=s(i)||i);return i};let Nt=class extends p{render(){return l` <span class="dots"></span> `}};Nt.styles=f`
-    :host {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 20px;
-      width: 20px;
-      .dots {
-        display: inline-block;
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        cursor: pointer;
-        border: 1px solid var(--color-border-primary);
-        box-sizing: border-box;
-        background-color: var(--color-container-action-secondary-default);
-      }
-    }
+  :host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 20px;
+    width: 20px;
+  }
 
-    :host(:hover) {
-      .dots {
-        background-color: var(--color-container-action-secondary-hover);
-      }
-    }
+  .dots {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    cursor: pointer;
+    border: 1px solid var(--color-border-primary);
+    box-sizing: border-box;
+    background-color: var(--color-container-action-secondary-default);
+  }
 
-    :host(:active) {
-      .dots {
-        background-color: var(--color-container-action-secondary-pressed);
-      }
-    }
+  :host(:hover) .dots {
+    background-color: var(--color-container-action-secondary-hover);
+  }
 
-    :host([aria-current="true"]) {
-      .dots {
-        background-color: var(--color-container-action-primary-default);
-        border: 0.5px solid var(--color-border-white);
-        width: 8px;
-        height: 8px;
-      }
-    }
+  :host(:active) .dots {
+    background-color: var(--color-container-action-secondary-pressed);
+  }
 
-    :host([aria-current="true"]:hover) {
-      .dots {
-        background-color: var(--color-container-action-primary-hover);
-      }
-    }
+  :host([aria-current="true"]) .dots {
+    background-color: var(--color-container-action-primary-default);
+    border: 0.5px solid var(--color-border-white);
+    width: 8px;
+    height: 8px;
+  }
 
-    :host([aria-current="true"]:active) {
-      .dots {
-        background-color: var(--color-container-action-primary-pressed);
-      }
-    }
-  `;Nt=ai([g("o-dots")],Nt);var li=Object.defineProperty,ci=Object.getOwnPropertyDescriptor,U=(o,t,e,r)=>{for(var i=r>1?void 0:r?ci(t,e):t,n=o.length-1,s;n>=0;n--)(s=o[n])&&(i=(r?s(t,e,i):s(i))||i);return r&&i&&li(t,e,i),i};let z=class extends p{constructor(){super(...arguments),this.options=[],this.value="",this.name="",this.additionaltext="+X variant(s)",this.disabled=!1,this.width="100%",this.open=!1,this.activeIndex=-1,this.menuWidth="",this._handleOutsideClick=o=>{this.contains(o.target)||(this.open=!1,this.activeIndex=-1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){document.removeEventListener("click",this._handleOutsideClick),super.disconnectedCallback()}toggle(){var o;if(!this.disabled){if(this.open=!this.open,this.activeIndex=this.open?this.options.findIndex(t=>t.value===this.value):-1,this.open&&this.width==="auto"){const t=(o=this.renderRoot)==null?void 0:o.querySelector("button");t&&(this.menuWidth=`${t.getBoundingClientRect().width}px`)}this.open&&this.updateComplete.then(()=>this._focusActiveOption())}}_focusActiveOption(){var t;const o=(t=this.renderRoot)==null?void 0:t.querySelector(`#option-${this.activeIndex}`);o==null||o.focus()}selectOption(o){this.value=o.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,url:o.url}})),this.open=!1,this.activeIndex=-1}handleKeydown(o){if(this.disabled){o.preventDefault();return}if(!this.open){(o.key==="ArrowDown"||o.key==="ArrowUp")&&(o.preventDefault(),this.open=!0,this.activeIndex=this.options.findIndex(t=>t.value===this.value),this.updateComplete.then(()=>this._focusActiveOption()));return}switch(o.key){case"ArrowDown":o.preventDefault(),this.activeIndex=(this.activeIndex+1)%this.options.length,this.updateComplete.then(()=>this._focusActiveOption());break;case"ArrowUp":o.preventDefault(),this.activeIndex=(this.activeIndex-1+this.options.length)%this.options.length,this.updateComplete.then(()=>this._focusActiveOption());break;case"Home":o.preventDefault(),this.activeIndex=0,this.updateComplete.then(()=>this._focusActiveOption());break;case"End":o.preventDefault(),this.activeIndex=this.options.length-1,this.updateComplete.then(()=>this._focusActiveOption());break;case"Enter":o.preventDefault(),this.activeIndex>=0&&this.selectOption(this.options[this.activeIndex]);break;case"Escape":o.preventDefault(),this.open=!1,this.activeIndex=-1;break}}updated(){this.options.length>0&&(this.options.some(t=>t.value===this.value)||(this.value=this.options[0].value))}render(){const o=Z.checkstroke.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"'),t=this.options.find(e=>e.value===this.value);return l`
+  :host([aria-current="true"]:hover) .dots {
+    background-color: var(--color-container-action-primary-hover);
+  }
+
+  :host([aria-current="true"]:active) .dots {
+    background-color: var(--color-container-action-primary-pressed);
+  }
+`;Nt=ai([g("o-dots")],Nt);var li=Object.defineProperty,ci=Object.getOwnPropertyDescriptor,U=(o,t,e,r)=>{for(var i=r>1?void 0:r?ci(t,e):t,n=o.length-1,s;n>=0;n--)(s=o[n])&&(i=(r?s(t,e,i):s(i))||i);return r&&i&&li(t,e,i),i};let z=class extends p{constructor(){super(...arguments),this.options=[],this.value="",this.name="",this.additionaltext="+X variant(s)",this.disabled=!1,this.width="100%",this.open=!1,this.activeIndex=-1,this.menuWidth="",this._handleOutsideClick=o=>{this.contains(o.target)||(this.open=!1,this.activeIndex=-1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){document.removeEventListener("click",this._handleOutsideClick),super.disconnectedCallback()}toggle(){var o;if(!this.disabled){if(this.open=!this.open,this.activeIndex=this.open?this.options.findIndex(t=>t.value===this.value):-1,this.open&&this.width==="auto"){const t=(o=this.renderRoot)==null?void 0:o.querySelector("button");t&&(this.menuWidth=`${t.getBoundingClientRect().width}px`)}this.open&&this.updateComplete.then(()=>this._focusActiveOption())}}_focusActiveOption(){var t;const o=(t=this.renderRoot)==null?void 0:t.querySelector(`#option-${this.activeIndex}`);o==null||o.focus()}selectOption(o){this.value=o.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,url:o.url}})),this.open=!1,this.activeIndex=-1}handleKeydown(o){if(this.disabled){o.preventDefault();return}if(!this.open){(o.key==="ArrowDown"||o.key==="ArrowUp")&&(o.preventDefault(),this.open=!0,this.activeIndex=this.options.findIndex(t=>t.value===this.value),this.updateComplete.then(()=>this._focusActiveOption()));return}switch(o.key){case"ArrowDown":o.preventDefault(),this.activeIndex=(this.activeIndex+1)%this.options.length,this.updateComplete.then(()=>this._focusActiveOption());break;case"ArrowUp":o.preventDefault(),this.activeIndex=(this.activeIndex-1+this.options.length)%this.options.length,this.updateComplete.then(()=>this._focusActiveOption());break;case"Home":o.preventDefault(),this.activeIndex=0,this.updateComplete.then(()=>this._focusActiveOption());break;case"End":o.preventDefault(),this.activeIndex=this.options.length-1,this.updateComplete.then(()=>this._focusActiveOption());break;case"Enter":o.preventDefault(),this.activeIndex>=0&&this.selectOption(this.options[this.activeIndex]);break;case"Escape":o.preventDefault(),this.open=!1,this.activeIndex=-1;break}}updated(){this.options.length>0&&(this.options.some(t=>t.value===this.value)||(this.value=this.options[0].value))}render(){const o=Z.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"
@@ -2873,53 +2864,66 @@
       --overlay-bg: rgba(0,0,0,0.56);
       --overlay-opacity: 1;    
       --card-filter: none;
+      display: block;
+    }
+
+    .card {
+      position: relative;
+      width: var(--card-width);
+      height: var(--card-height);
+      overflow: hidden;
+      background-color: var(--colors-noir-des-terres-500);
+      clip-path: url(#arch-gift-finder);
+      -webkit-clip-path: url(#arch-gift-finder);
+      filter: var(--card-filter, none);
+      -webkit-tap-highlight-color: transparent;
+    }
 
+    @media (max-width: 1024px) {
       .card {
-        position: relative;
-        width: var(--card-width);
-        height: var(--card-height);
-        overflow: hidden;
-        background-color: var(--colors-noir-des-terres-500);
-        clip-path: url(#arch-gift-finder);
-        -webkit-clip-path: url(#arch-gift-finder);
-        filter: var(--card-filter, none);
-
-        @media (max-width: 1024px) {
-          width: var(--card-width-mobile);
-          height: var(--card-height-mobile);
-        }
+        width: var(--card-width-mobile);
+        height: var(--card-height-mobile);
       }
+    }
 
-      .card-img {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        transition: opacity 0.3s ease-in-out;
-        background: linear-gradient(180deg, #f9f4ed 0%, #f3f0eb 81.41%, #edeae5 100%);
+    .card-img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: opacity 0.3s ease-in-out;
+      background: linear-gradient(180deg, #f9f4ed 0%, #f3f0eb 81.41%, #edeae5 100%);
+    }
 
-        &.hover {
-          opacity: 0;
-          z-index: 2;
-        }
-      }
+    .card-img.hover {
+      opacity: 0;
+      z-index: 2;
+    }
 
+    @media (hover: hover) and (pointer: fine) {
       .card:hover .card-img.hover {
         opacity: 1;
       }
+    }
 
-      .overlay {
-        position: absolute; inset: 0;
-        background: var(--overlay-bg);
-        opacity: 0;
-        transition: opacity .2s ease;
-        pointer-events: none;
-        z-index: 3;
+    @media (hover: none) and (pointer: coarse) {
+      .card:active .card-img.hover {
+        opacity: 1;
       }
     }
 
+    .overlay {
+      position: absolute; inset: 0;
+      background: var(--overlay-bg);
+      opacity: 0;
+      transition: opacity .2s ease;
+      pointer-events: none;
+      z-index: 3;
+    }
+    
+
     :host([dimmed]) .overlay {
       opacity: var(--overlay-opacity, 1);
     }

package/index.mjs

@@ -3329,57 +3329,48 @@ let Nt = class extends p {
   }
 };
 Nt.styles = f`
-    :host {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 20px;
-      width: 20px;
-      .dots {
-        display: inline-block;
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        cursor: pointer;
-        border: 1px solid var(--color-border-primary);
-        box-sizing: border-box;
-        background-color: var(--color-container-action-secondary-default);
-      }
-    }
+  :host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 20px;
+    width: 20px;
+  }
 
-    :host(:hover) {
-      .dots {
-        background-color: var(--color-container-action-secondary-hover);
-      }
-    }
+  .dots {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    cursor: pointer;
+    border: 1px solid var(--color-border-primary);
+    box-sizing: border-box;
+    background-color: var(--color-container-action-secondary-default);
+  }
 
-    :host(:active) {
-      .dots {
-        background-color: var(--color-container-action-secondary-pressed);
-      }
-    }
+  :host(:hover) .dots {
+    background-color: var(--color-container-action-secondary-hover);
+  }
 
-    :host([aria-current="true"]) {
-      .dots {
-        background-color: var(--color-container-action-primary-default);
-        border: 0.5px solid var(--color-border-white);
-        width: 8px;
-        height: 8px;
-      }
-    }
+  :host(:active) .dots {
+    background-color: var(--color-container-action-secondary-pressed);
+  }
 
-    :host([aria-current="true"]:hover) {
-      .dots {
-        background-color: var(--color-container-action-primary-hover);
-      }
-    }
+  :host([aria-current="true"]) .dots {
+    background-color: var(--color-container-action-primary-default);
+    border: 0.5px solid var(--color-border-white);
+    width: 8px;
+    height: 8px;
+  }
 
-    :host([aria-current="true"]:active) {
-      .dots {
-        background-color: var(--color-container-action-primary-pressed);
-      }
-    }
-  `;
+  :host([aria-current="true"]:hover) .dots {
+    background-color: var(--color-container-action-primary-hover);
+  }
+
+  :host([aria-current="true"]:active) .dots {
+    background-color: var(--color-container-action-primary-pressed);
+  }
+`;
 Nt = ai([
   g("o-dots")
 ], Nt);
@@ -5220,53 +5211,66 @@ et.styles = f`
       --overlay-bg: rgba(0,0,0,0.56);
       --overlay-opacity: 1;    
       --card-filter: none;
+      display: block;
+    }
 
+    .card {
+      position: relative;
+      width: var(--card-width);
+      height: var(--card-height);
+      overflow: hidden;
+      background-color: var(--colors-noir-des-terres-500);
+      clip-path: url(#arch-gift-finder);
+      -webkit-clip-path: url(#arch-gift-finder);
+      filter: var(--card-filter, none);
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    @media (max-width: 1024px) {
       .card {
-        position: relative;
-        width: var(--card-width);
-        height: var(--card-height);
-        overflow: hidden;
-        background-color: var(--colors-noir-des-terres-500);
-        clip-path: url(#arch-gift-finder);
-        -webkit-clip-path: url(#arch-gift-finder);
-        filter: var(--card-filter, none);
-
-        @media (max-width: 1024px) {
-          width: var(--card-width-mobile);
-          height: var(--card-height-mobile);
-        }
+        width: var(--card-width-mobile);
+        height: var(--card-height-mobile);
       }
+    }
 
-      .card-img {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        transition: opacity 0.3s ease-in-out;
-        background: linear-gradient(180deg, #f9f4ed 0%, #f3f0eb 81.41%, #edeae5 100%);
+    .card-img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: opacity 0.3s ease-in-out;
+      background: linear-gradient(180deg, #f9f4ed 0%, #f3f0eb 81.41%, #edeae5 100%);
+    }
 
-        &.hover {
-          opacity: 0;
-          z-index: 2;
-        }
-      }
+    .card-img.hover {
+      opacity: 0;
+      z-index: 2;
+    }
 
+    @media (hover: hover) and (pointer: fine) {
       .card:hover .card-img.hover {
         opacity: 1;
       }
+    }
 
-      .overlay {
-        position: absolute; inset: 0;
-        background: var(--overlay-bg);
-        opacity: 0;
-        transition: opacity .2s ease;
-        pointer-events: none;
-        z-index: 3;
+    @media (hover: none) and (pointer: coarse) {
+      .card:active .card-img.hover {
+        opacity: 1;
       }
     }
 
+    .overlay {
+      position: absolute; inset: 0;
+      background: var(--overlay-bg);
+      opacity: 0;
+      transition: opacity .2s ease;
+      pointer-events: none;
+      z-index: 3;
+    }
+    
+
     :host([dimmed]) .overlay {
       opacity: var(--overlay-opacity, 1);
     }

package/package.json

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