@florid-kit/components 0.10.13 → 0.10.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/index.js +98 -99
  2. package/index.mjs +98 -99
  3. package/package.json +1 -1
package/index.js CHANGED
@@ -1095,21 +1095,6 @@
1095
1095
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1096
1096
  }
1097
1097
 
1098
- :host([endIcon]) a {
1099
- &:hover {
1100
- o-icon-button {
1101
- transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1102
- :host(:not([reverseEndIcon])) & {
1103
- transform: translateX(4px);
1104
- }
1105
-
1106
- :host([reverseEndIcon]) & {
1107
- transform: translateX(-4px);
1108
- }
1109
- }
1110
- }
1111
- }
1112
-
1113
1098
  :host a {
1114
1099
  position: relative;
1115
1100
  text-decoration: none;
@@ -1134,11 +1119,21 @@
1134
1119
  pointer-events: none;
1135
1120
  }
1136
1121
 
1137
- :host a:hover .link-text::after {
1138
- opacity: 0;
1139
- height: 1px;
1122
+ @media (hover: hover) and (pointer: fine) {
1123
+ :host a:hover .link-text::after {
1124
+ opacity: 0;
1125
+ height: 1px;
1126
+ }
1127
+
1128
+ :host([endIcon]) a:hover o-icon-button {
1129
+ transform: translateX(4px);
1130
+ transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1131
+ }
1132
+
1133
+ :host([endIcon][reverseEndIcon]) a:hover o-icon-button {
1134
+ transform: translateX(-4px);
1135
+ }
1140
1136
  }
1141
- /* End of underline effect */
1142
1137
  `;lt([a({type:String})],K.prototype,"href",2);lt([a({type:String})],K.prototype,"target",2);lt([a({type:String,reflect:!0})],K.prototype,"template",2);lt([a({type:Boolean,reflect:!0})],K.prototype,"inverse",2);lt([a({type:Boolean,reflect:!0})],K.prototype,"endIcon",2);lt([a({type:Boolean,reflect:!0})],K.prototype,"reverseEndIcon",2);K=lt([g("o-link")],K);var Xo=Object.defineProperty,Yo=Object.getOwnPropertyDescriptor,Dt=(o,t,e,r)=>{for(var i=r>1?void 0:r?Yo(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&&Xo(t,e,i),i};let pt=class extends p{constructor(){super(...arguments),this.rating=0}getStarKeys(){const o=[];for(let t=0;t<5;t++){const e=this.rating-t;let r;e>=1?r=100:e<=0?r=0:r=Math.round(e*100/25)*25,o.push(`star-${r}`)}return o}render(){const o=this.getStarKeys();return l`
1143
1138
  <div class="rating">
1144
1139
  <div class="stars">
@@ -1659,57 +1654,48 @@
1659
1654
  display: none;
1660
1655
  }
1661
1656
  `;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`
1662
- :host {
1663
- display: flex;
1664
- align-items: center;
1665
- justify-content: center;
1666
- height: 20px;
1667
- width: 20px;
1668
- .dots {
1669
- display: inline-block;
1670
- width: 6px;
1671
- height: 6px;
1672
- border-radius: 50%;
1673
- cursor: pointer;
1674
- border: 1px solid var(--color-border-primary);
1675
- box-sizing: border-box;
1676
- background-color: var(--color-container-action-secondary-default);
1677
- }
1678
- }
1657
+ :host {
1658
+ display: flex;
1659
+ align-items: center;
1660
+ justify-content: center;
1661
+ height: 20px;
1662
+ width: 20px;
1663
+ }
1679
1664
 
1680
- :host(:hover) {
1681
- .dots {
1682
- background-color: var(--color-container-action-secondary-hover);
1683
- }
1684
- }
1665
+ .dots {
1666
+ display: inline-block;
1667
+ width: 6px;
1668
+ height: 6px;
1669
+ border-radius: 50%;
1670
+ cursor: pointer;
1671
+ border: 1px solid var(--color-border-primary);
1672
+ box-sizing: border-box;
1673
+ background-color: var(--color-container-action-secondary-default);
1674
+ }
1685
1675
 
1686
- :host(:active) {
1687
- .dots {
1688
- background-color: var(--color-container-action-secondary-pressed);
1689
- }
1690
- }
1676
+ :host(:hover) .dots {
1677
+ background-color: var(--color-container-action-secondary-hover);
1678
+ }
1691
1679
 
1692
- :host([aria-current="true"]) {
1693
- .dots {
1694
- background-color: var(--color-container-action-primary-default);
1695
- border: 0.5px solid var(--color-border-white);
1696
- width: 8px;
1697
- height: 8px;
1698
- }
1699
- }
1680
+ :host(:active) .dots {
1681
+ background-color: var(--color-container-action-secondary-pressed);
1682
+ }
1700
1683
 
1701
- :host([aria-current="true"]:hover) {
1702
- .dots {
1703
- background-color: var(--color-container-action-primary-hover);
1704
- }
1705
- }
1684
+ :host([aria-current="true"]) .dots {
1685
+ background-color: var(--color-container-action-primary-default);
1686
+ border: 0.5px solid var(--color-border-white);
1687
+ width: 8px;
1688
+ height: 8px;
1689
+ }
1706
1690
 
1707
- :host([aria-current="true"]:active) {
1708
- .dots {
1709
- background-color: var(--color-container-action-primary-pressed);
1710
- }
1711
- }
1712
- `;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`
1691
+ :host([aria-current="true"]:hover) .dots {
1692
+ background-color: var(--color-container-action-primary-hover);
1693
+ }
1694
+
1695
+ :host([aria-current="true"]:active) .dots {
1696
+ background-color: var(--color-container-action-primary-pressed);
1697
+ }
1698
+ `;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`
1713
1699
  <button
1714
1700
  role="combobox"
1715
1701
  aria-haspopup="listbox"
@@ -2878,53 +2864,66 @@
2878
2864
  --overlay-bg: rgba(0,0,0,0.56);
2879
2865
  --overlay-opacity: 1;
2880
2866
  --card-filter: none;
2867
+ display: block;
2868
+ }
2881
2869
 
2870
+ .card {
2871
+ position: relative;
2872
+ width: var(--card-width);
2873
+ height: var(--card-height);
2874
+ overflow: hidden;
2875
+ background-color: var(--colors-noir-des-terres-500);
2876
+ clip-path: url(#arch-gift-finder);
2877
+ -webkit-clip-path: url(#arch-gift-finder);
2878
+ filter: var(--card-filter, none);
2879
+ -webkit-tap-highlight-color: transparent;
2880
+ }
2881
+
2882
+ @media (max-width: 1024px) {
2882
2883
  .card {
2883
- position: relative;
2884
- width: var(--card-width);
2885
- height: var(--card-height);
2886
- overflow: hidden;
2887
- background-color: var(--colors-noir-des-terres-500);
2888
- clip-path: url(#arch-gift-finder);
2889
- -webkit-clip-path: url(#arch-gift-finder);
2890
- filter: var(--card-filter, none);
2891
-
2892
- @media (max-width: 1024px) {
2893
- width: var(--card-width-mobile);
2894
- height: var(--card-height-mobile);
2895
- }
2884
+ width: var(--card-width-mobile);
2885
+ height: var(--card-height-mobile);
2896
2886
  }
2887
+ }
2897
2888
 
2898
- .card-img {
2899
- position: absolute;
2900
- top: 0;
2901
- left: 0;
2902
- width: 100%;
2903
- height: 100%;
2904
- object-fit: cover;
2905
- transition: opacity 0.3s ease-in-out;
2906
- background: linear-gradient(180deg, #f9f4ed 0%, #f3f0eb 81.41%, #edeae5 100%);
2889
+ .card-img {
2890
+ position: absolute;
2891
+ top: 0;
2892
+ left: 0;
2893
+ width: 100%;
2894
+ height: 100%;
2895
+ object-fit: cover;
2896
+ transition: opacity 0.3s ease-in-out;
2897
+ background: linear-gradient(180deg, #f9f4ed 0%, #f3f0eb 81.41%, #edeae5 100%);
2898
+ }
2907
2899
 
2908
- &.hover {
2909
- opacity: 0;
2910
- z-index: 2;
2911
- }
2912
- }
2900
+ .card-img.hover {
2901
+ opacity: 0;
2902
+ z-index: 2;
2903
+ }
2913
2904
 
2905
+ @media (hover: hover) and (pointer: fine) {
2914
2906
  .card:hover .card-img.hover {
2915
2907
  opacity: 1;
2916
2908
  }
2909
+ }
2917
2910
 
2918
- .overlay {
2919
- position: absolute; inset: 0;
2920
- background: var(--overlay-bg);
2921
- opacity: 0;
2922
- transition: opacity .2s ease;
2923
- pointer-events: none;
2924
- z-index: 3;
2911
+ @media (hover: none) and (pointer: coarse) {
2912
+ .card:active .card-img.hover {
2913
+ opacity: 1;
2925
2914
  }
2926
2915
  }
2927
2916
 
2917
+ .overlay {
2918
+ position: absolute; inset: 0;
2919
+ background: var(--overlay-bg);
2920
+ opacity: 0;
2921
+ transition: opacity .2s ease;
2922
+ pointer-events: none;
2923
+ z-index: 3;
2924
+ }
2925
+
2926
+
2928
2927
  :host([dimmed]) .overlay {
2929
2928
  opacity: var(--overlay-opacity, 1);
2930
2929
  }
package/index.mjs CHANGED
@@ -2454,21 +2454,6 @@ K.styles = f`
2454
2454
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
2455
2455
  }
2456
2456
 
2457
- :host([endIcon]) a {
2458
- &:hover {
2459
- o-icon-button {
2460
- transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
2461
- :host(:not([reverseEndIcon])) & {
2462
- transform: translateX(4px);
2463
- }
2464
-
2465
- :host([reverseEndIcon]) & {
2466
- transform: translateX(-4px);
2467
- }
2468
- }
2469
- }
2470
- }
2471
-
2472
2457
  :host a {
2473
2458
  position: relative;
2474
2459
  text-decoration: none;
@@ -2493,11 +2478,21 @@ K.styles = f`
2493
2478
  pointer-events: none;
2494
2479
  }
2495
2480
 
2496
- :host a:hover .link-text::after {
2497
- opacity: 0;
2498
- height: 1px;
2481
+ @media (hover: hover) and (pointer: fine) {
2482
+ :host a:hover .link-text::after {
2483
+ opacity: 0;
2484
+ height: 1px;
2485
+ }
2486
+
2487
+ :host([endIcon]) a:hover o-icon-button {
2488
+ transform: translateX(4px);
2489
+ transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
2490
+ }
2491
+
2492
+ :host([endIcon][reverseEndIcon]) a:hover o-icon-button {
2493
+ transform: translateX(-4px);
2494
+ }
2499
2495
  }
2500
- /* End of underline effect */
2501
2496
  `;
2502
2497
  lt([
2503
2498
  a({ type: String })
@@ -3334,57 +3329,48 @@ let Nt = class extends p {
3334
3329
  }
3335
3330
  };
3336
3331
  Nt.styles = f`
3337
- :host {
3338
- display: flex;
3339
- align-items: center;
3340
- justify-content: center;
3341
- height: 20px;
3342
- width: 20px;
3343
- .dots {
3344
- display: inline-block;
3345
- width: 6px;
3346
- height: 6px;
3347
- border-radius: 50%;
3348
- cursor: pointer;
3349
- border: 1px solid var(--color-border-primary);
3350
- box-sizing: border-box;
3351
- background-color: var(--color-container-action-secondary-default);
3352
- }
3353
- }
3332
+ :host {
3333
+ display: flex;
3334
+ align-items: center;
3335
+ justify-content: center;
3336
+ height: 20px;
3337
+ width: 20px;
3338
+ }
3354
3339
 
3355
- :host(:hover) {
3356
- .dots {
3357
- background-color: var(--color-container-action-secondary-hover);
3358
- }
3359
- }
3340
+ .dots {
3341
+ display: inline-block;
3342
+ width: 6px;
3343
+ height: 6px;
3344
+ border-radius: 50%;
3345
+ cursor: pointer;
3346
+ border: 1px solid var(--color-border-primary);
3347
+ box-sizing: border-box;
3348
+ background-color: var(--color-container-action-secondary-default);
3349
+ }
3360
3350
 
3361
- :host(:active) {
3362
- .dots {
3363
- background-color: var(--color-container-action-secondary-pressed);
3364
- }
3365
- }
3351
+ :host(:hover) .dots {
3352
+ background-color: var(--color-container-action-secondary-hover);
3353
+ }
3366
3354
 
3367
- :host([aria-current="true"]) {
3368
- .dots {
3369
- background-color: var(--color-container-action-primary-default);
3370
- border: 0.5px solid var(--color-border-white);
3371
- width: 8px;
3372
- height: 8px;
3373
- }
3374
- }
3355
+ :host(:active) .dots {
3356
+ background-color: var(--color-container-action-secondary-pressed);
3357
+ }
3375
3358
 
3376
- :host([aria-current="true"]:hover) {
3377
- .dots {
3378
- background-color: var(--color-container-action-primary-hover);
3379
- }
3380
- }
3359
+ :host([aria-current="true"]) .dots {
3360
+ background-color: var(--color-container-action-primary-default);
3361
+ border: 0.5px solid var(--color-border-white);
3362
+ width: 8px;
3363
+ height: 8px;
3364
+ }
3381
3365
 
3382
- :host([aria-current="true"]:active) {
3383
- .dots {
3384
- background-color: var(--color-container-action-primary-pressed);
3385
- }
3386
- }
3387
- `;
3366
+ :host([aria-current="true"]:hover) .dots {
3367
+ background-color: var(--color-container-action-primary-hover);
3368
+ }
3369
+
3370
+ :host([aria-current="true"]:active) .dots {
3371
+ background-color: var(--color-container-action-primary-pressed);
3372
+ }
3373
+ `;
3388
3374
  Nt = ai([
3389
3375
  g("o-dots")
3390
3376
  ], Nt);
@@ -5225,53 +5211,66 @@ et.styles = f`
5225
5211
  --overlay-bg: rgba(0,0,0,0.56);
5226
5212
  --overlay-opacity: 1;
5227
5213
  --card-filter: none;
5214
+ display: block;
5215
+ }
5216
+
5217
+ .card {
5218
+ position: relative;
5219
+ width: var(--card-width);
5220
+ height: var(--card-height);
5221
+ overflow: hidden;
5222
+ background-color: var(--colors-noir-des-terres-500);
5223
+ clip-path: url(#arch-gift-finder);
5224
+ -webkit-clip-path: url(#arch-gift-finder);
5225
+ filter: var(--card-filter, none);
5226
+ -webkit-tap-highlight-color: transparent;
5227
+ }
5228
5228
 
5229
+ @media (max-width: 1024px) {
5229
5230
  .card {
5230
- position: relative;
5231
- width: var(--card-width);
5232
- height: var(--card-height);
5233
- overflow: hidden;
5234
- background-color: var(--colors-noir-des-terres-500);
5235
- clip-path: url(#arch-gift-finder);
5236
- -webkit-clip-path: url(#arch-gift-finder);
5237
- filter: var(--card-filter, none);
5238
-
5239
- @media (max-width: 1024px) {
5240
- width: var(--card-width-mobile);
5241
- height: var(--card-height-mobile);
5242
- }
5231
+ width: var(--card-width-mobile);
5232
+ height: var(--card-height-mobile);
5243
5233
  }
5234
+ }
5244
5235
 
5245
- .card-img {
5246
- position: absolute;
5247
- top: 0;
5248
- left: 0;
5249
- width: 100%;
5250
- height: 100%;
5251
- object-fit: cover;
5252
- transition: opacity 0.3s ease-in-out;
5253
- background: linear-gradient(180deg, #f9f4ed 0%, #f3f0eb 81.41%, #edeae5 100%);
5236
+ .card-img {
5237
+ position: absolute;
5238
+ top: 0;
5239
+ left: 0;
5240
+ width: 100%;
5241
+ height: 100%;
5242
+ object-fit: cover;
5243
+ transition: opacity 0.3s ease-in-out;
5244
+ background: linear-gradient(180deg, #f9f4ed 0%, #f3f0eb 81.41%, #edeae5 100%);
5245
+ }
5254
5246
 
5255
- &.hover {
5256
- opacity: 0;
5257
- z-index: 2;
5258
- }
5259
- }
5247
+ .card-img.hover {
5248
+ opacity: 0;
5249
+ z-index: 2;
5250
+ }
5260
5251
 
5252
+ @media (hover: hover) and (pointer: fine) {
5261
5253
  .card:hover .card-img.hover {
5262
5254
  opacity: 1;
5263
5255
  }
5256
+ }
5264
5257
 
5265
- .overlay {
5266
- position: absolute; inset: 0;
5267
- background: var(--overlay-bg);
5268
- opacity: 0;
5269
- transition: opacity .2s ease;
5270
- pointer-events: none;
5271
- z-index: 3;
5258
+ @media (hover: none) and (pointer: coarse) {
5259
+ .card:active .card-img.hover {
5260
+ opacity: 1;
5272
5261
  }
5273
5262
  }
5274
5263
 
5264
+ .overlay {
5265
+ position: absolute; inset: 0;
5266
+ background: var(--overlay-bg);
5267
+ opacity: 0;
5268
+ transition: opacity .2s ease;
5269
+ pointer-events: none;
5270
+ z-index: 3;
5271
+ }
5272
+
5273
+
5275
5274
  :host([dimmed]) .overlay {
5276
5275
  opacity: var(--overlay-opacity, 1);
5277
5276
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@florid-kit/components",
3
- "version": "0.10.13",
3
+ "version": "0.10.15",
4
4
  "main": "index.js",
5
5
  "module": "index.mjs",
6
6
  "typings": "index.d.ts",