@florid-kit/components 0.10.34 → 0.10.35

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 +40 -37
  2. package/index.mjs +40 -37
  3. package/package.json +1 -1
package/index.js CHANGED
@@ -1003,34 +1003,37 @@
1003
1003
  .sr-only {
1004
1004
  ${Se}
1005
1005
  }
1006
- `;It([a({type:String,reflect:!0})],dt.prototype,"status",2);It([a({type:String,reflect:!0})],dt.prototype,"ariaDescribedBy",2);It([a({type:String,reflect:!0})],dt.prototype,"label",2);dt=It([y("o-wishlist-button")],dt);var Go=Object.defineProperty,Xo=Object.getOwnPropertyDescriptor,lt=(o,t,e,n)=>{for(var i=n>1?void 0:n?Xo(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&Go(t,e,i),i};let K=class extends u{constructor(){super(...arguments),this.href="",this.target="",this.template="standard",this.inverse=!1,this.endIcon=!1,this.reverseEndIcon=!1}_handleClick(o){(!this.href||this.href==="#")&&o.preventDefault()}render(){const o=this.href||"#";return l`
1007
- <a
1008
- href="${o}"
1009
- target="${P(this.target||void 0)}"
1010
- @click="${this._handleClick}"
1011
- >
1012
- ${this.endIcon&&this.reverseEndIcon?l`
1013
- <o-icon-button
1014
- icon="chevronLeft"
1015
- bgstyle="${this.inverse?"none-light":"none-contrast"}"
1016
- size="xsmall"
1017
- aria-hidden="true"
1018
- type="span"
1019
- ></o-icon-button>
1020
- `:null}
1021
- <span class="link-text"><slot></slot></span>
1022
- ${this.endIcon&&!this.reverseEndIcon?l`
1023
- <o-icon-button
1024
- icon="chevronRight"
1025
- bgstyle="${this.inverse?"none-light":"none-contrast"}"
1026
- size="xsmall"
1027
- aria-hidden="true"
1028
- type="span"
1029
- ></o-icon-button>
1030
- `:null}
1031
- </a>
1032
- `}};K.styles=f`
1033
- :host([template="standard"]) a {
1006
+ `;It([a({type:String,reflect:!0})],dt.prototype,"status",2);It([a({type:String,reflect:!0})],dt.prototype,"ariaDescribedBy",2);It([a({type:String,reflect:!0})],dt.prototype,"label",2);dt=It([y("o-wishlist-button")],dt);var Go=Object.defineProperty,Xo=Object.getOwnPropertyDescriptor,lt=(o,t,e,n)=>{for(var i=n>1?void 0:n?Xo(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&Go(t,e,i),i};let K=class extends u{constructor(){super(...arguments),this.href="",this.target="",this.template="standard",this.inverse=!1,this.endIcon=!1,this.reverseEndIcon=!1}_handleClick(o){(!this.href||this.href==="#")&&o.preventDefault()}render(){const o=!!this.href,t=l`
1007
+ ${this.endIcon&&this.reverseEndIcon?l`
1008
+ <o-icon-button
1009
+ icon="chevronLeft"
1010
+ bgstyle="${this.inverse?"none-light":"none-contrast"}"
1011
+ size="xsmall"
1012
+ aria-hidden="true"
1013
+ type="span"
1014
+ ></o-icon-button>
1015
+ `:null}
1016
+ <span class="link-text"><slot></slot></span>
1017
+ ${this.endIcon&&!this.reverseEndIcon?l`
1018
+ <o-icon-button
1019
+ icon="chevronRight"
1020
+ bgstyle="${this.inverse?"none-light":"none-contrast"}"
1021
+ size="xsmall"
1022
+ aria-hidden="true"
1023
+ type="span"
1024
+ ></o-icon-button>
1025
+ `:null}
1026
+ `;return o?l`
1027
+ <a
1028
+ class="link-wrapper"
1029
+ href="${this.href}"
1030
+ target="${P(this.target||void 0)}"
1031
+ @click="${this._handleClick}"
1032
+ >
1033
+ ${t}
1034
+ </a>
1035
+ `:l`<span class="link-wrapper">${t}</span>`}};K.styles=f`
1036
+ :host([template="standard"]) .link-wrapper {
1034
1037
  color: var(--color-content-action-secondary);
1035
1038
  font-size: var(--font-size-200);
1036
1039
  font-weight: var(--font-weight-400);
@@ -1039,7 +1042,7 @@
1039
1042
  font-family: var(--font-family-loccitane-serif);
1040
1043
  }
1041
1044
 
1042
- :host([template="discret"]) a {
1045
+ :host([template="discret"]) .link-wrapper {
1043
1046
  color: var(--color-content-action-secondary);
1044
1047
  font-size: var(--font-size-100);
1045
1048
  font-weight: var(--font-weight-400);
@@ -1048,7 +1051,7 @@
1048
1051
  font-family: var(--font-family-loccitane-sans);
1049
1052
  }
1050
1053
 
1051
- :host([template="review"]) a {
1054
+ :host([template="review"]) .link-wrapper {
1052
1055
  color: var(--color-content-action-secondary);
1053
1056
  font-size: var(--font-size-100);
1054
1057
  font-weight: var(--font-weight-500);
@@ -1058,21 +1061,21 @@
1058
1061
  text-transform: uppercase;
1059
1062
  }
1060
1063
 
1061
- :host([inverse]) a {
1064
+ :host([inverse]) .link-wrapper {
1062
1065
  color: var(--color-container-action-tertiary-default);
1063
1066
  }
1064
1067
 
1065
- :host([endIcon]) a o-icon-button {
1068
+ :host([endIcon]) .link-wrapper o-icon-button {
1066
1069
  margin-left: 2px;
1067
1070
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1068
1071
  }
1069
1072
 
1070
- :host([endIcon][reverseEndIcon]) a o-icon-button {
1073
+ :host([endIcon][reverseEndIcon]) .link-wrapper o-icon-button {
1071
1074
  margin-right: 2px;
1072
1075
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1073
1076
  }
1074
1077
 
1075
- :host a {
1078
+ :host .link-wrapper {
1076
1079
  position: relative;
1077
1080
  text-decoration: none;
1078
1081
  color: inherit;
@@ -1097,17 +1100,17 @@
1097
1100
  }
1098
1101
 
1099
1102
  @media (hover: hover) and (pointer: fine) {
1100
- :host a:hover .link-text::after {
1103
+ :host .link-wrapper:hover .link-text::after {
1101
1104
  opacity: 0;
1102
1105
  height: 1px;
1103
1106
  }
1104
1107
 
1105
- :host([endIcon]) a:hover o-icon-button {
1108
+ :host([endIcon]) .link-wrapper:hover o-icon-button {
1106
1109
  transform: translateX(4px);
1107
1110
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1108
1111
  }
1109
1112
 
1110
- :host([endIcon][reverseEndIcon]) a:hover o-icon-button {
1113
+ :host([endIcon][reverseEndIcon]) .link-wrapper:hover o-icon-button {
1111
1114
  transform: translateX(-4px);
1112
1115
  }
1113
1116
  }
package/index.mjs CHANGED
@@ -2394,38 +2394,41 @@ let K = class extends u {
2394
2394
  (!this.href || this.href === "#") && o.preventDefault();
2395
2395
  }
2396
2396
  render() {
2397
- const o = this.href || "#";
2398
- return l`
2399
- <a
2400
- href="${o}"
2401
- target="${P(this.target || void 0)}"
2402
- @click="${this._handleClick}"
2403
- >
2404
- ${this.endIcon && this.reverseEndIcon ? l`
2405
- <o-icon-button
2406
- icon="chevronLeft"
2407
- bgstyle="${this.inverse ? "none-light" : "none-contrast"}"
2408
- size="xsmall"
2409
- aria-hidden="true"
2410
- type="span"
2411
- ></o-icon-button>
2412
- ` : null}
2413
- <span class="link-text"><slot></slot></span>
2414
- ${this.endIcon && !this.reverseEndIcon ? l`
2415
- <o-icon-button
2416
- icon="chevronRight"
2417
- bgstyle="${this.inverse ? "none-light" : "none-contrast"}"
2418
- size="xsmall"
2419
- aria-hidden="true"
2420
- type="span"
2421
- ></o-icon-button>
2422
- ` : null}
2423
- </a>
2397
+ const o = !!this.href, t = l`
2398
+ ${this.endIcon && this.reverseEndIcon ? l`
2399
+ <o-icon-button
2400
+ icon="chevronLeft"
2401
+ bgstyle="${this.inverse ? "none-light" : "none-contrast"}"
2402
+ size="xsmall"
2403
+ aria-hidden="true"
2404
+ type="span"
2405
+ ></o-icon-button>
2406
+ ` : null}
2407
+ <span class="link-text"><slot></slot></span>
2408
+ ${this.endIcon && !this.reverseEndIcon ? l`
2409
+ <o-icon-button
2410
+ icon="chevronRight"
2411
+ bgstyle="${this.inverse ? "none-light" : "none-contrast"}"
2412
+ size="xsmall"
2413
+ aria-hidden="true"
2414
+ type="span"
2415
+ ></o-icon-button>
2416
+ ` : null}
2424
2417
  `;
2418
+ return o ? l`
2419
+ <a
2420
+ class="link-wrapper"
2421
+ href="${this.href}"
2422
+ target="${P(this.target || void 0)}"
2423
+ @click="${this._handleClick}"
2424
+ >
2425
+ ${t}
2426
+ </a>
2427
+ ` : l`<span class="link-wrapper">${t}</span>`;
2425
2428
  }
2426
2429
  };
2427
2430
  K.styles = f`
2428
- :host([template="standard"]) a {
2431
+ :host([template="standard"]) .link-wrapper {
2429
2432
  color: var(--color-content-action-secondary);
2430
2433
  font-size: var(--font-size-200);
2431
2434
  font-weight: var(--font-weight-400);
@@ -2434,7 +2437,7 @@ K.styles = f`
2434
2437
  font-family: var(--font-family-loccitane-serif);
2435
2438
  }
2436
2439
 
2437
- :host([template="discret"]) a {
2440
+ :host([template="discret"]) .link-wrapper {
2438
2441
  color: var(--color-content-action-secondary);
2439
2442
  font-size: var(--font-size-100);
2440
2443
  font-weight: var(--font-weight-400);
@@ -2443,7 +2446,7 @@ K.styles = f`
2443
2446
  font-family: var(--font-family-loccitane-sans);
2444
2447
  }
2445
2448
 
2446
- :host([template="review"]) a {
2449
+ :host([template="review"]) .link-wrapper {
2447
2450
  color: var(--color-content-action-secondary);
2448
2451
  font-size: var(--font-size-100);
2449
2452
  font-weight: var(--font-weight-500);
@@ -2453,21 +2456,21 @@ K.styles = f`
2453
2456
  text-transform: uppercase;
2454
2457
  }
2455
2458
 
2456
- :host([inverse]) a {
2459
+ :host([inverse]) .link-wrapper {
2457
2460
  color: var(--color-container-action-tertiary-default);
2458
2461
  }
2459
2462
 
2460
- :host([endIcon]) a o-icon-button {
2463
+ :host([endIcon]) .link-wrapper o-icon-button {
2461
2464
  margin-left: 2px;
2462
2465
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
2463
2466
  }
2464
2467
 
2465
- :host([endIcon][reverseEndIcon]) a o-icon-button {
2468
+ :host([endIcon][reverseEndIcon]) .link-wrapper o-icon-button {
2466
2469
  margin-right: 2px;
2467
2470
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
2468
2471
  }
2469
2472
 
2470
- :host a {
2473
+ :host .link-wrapper {
2471
2474
  position: relative;
2472
2475
  text-decoration: none;
2473
2476
  color: inherit;
@@ -2492,17 +2495,17 @@ K.styles = f`
2492
2495
  }
2493
2496
 
2494
2497
  @media (hover: hover) and (pointer: fine) {
2495
- :host a:hover .link-text::after {
2498
+ :host .link-wrapper:hover .link-text::after {
2496
2499
  opacity: 0;
2497
2500
  height: 1px;
2498
2501
  }
2499
2502
 
2500
- :host([endIcon]) a:hover o-icon-button {
2503
+ :host([endIcon]) .link-wrapper:hover o-icon-button {
2501
2504
  transform: translateX(4px);
2502
2505
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
2503
2506
  }
2504
2507
 
2505
- :host([endIcon][reverseEndIcon]) a:hover o-icon-button {
2508
+ :host([endIcon][reverseEndIcon]) .link-wrapper:hover o-icon-button {
2506
2509
  transform: translateX(-4px);
2507
2510
  }
2508
2511
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@florid-kit/components",
3
- "version": "0.10.34",
3
+ "version": "0.10.35",
4
4
  "main": "index.js",
5
5
  "module": "index.mjs",
6
6
  "typings": "index.d.ts",