@phcdevworks/spectre-ui 1.2.0 → 1.4.0

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 (12) hide show
  1. package/README.md +6 -0
  2. package/dist/base.css +23 -28
  3. package/dist/components.css +208 -72
  4. package/dist/index.cjs +73 -17
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.css +212 -75
  7. package/dist/index.d.cts +25 -1
  8. package/dist/index.d.ts +25 -1
  9. package/dist/index.js +73 -18
  10. package/dist/index.js.map +1 -1
  11. package/dist/utilities.css +19 -25
  12. package/package.json +18 -15
package/dist/components.css CHANGED
@@ -3,15 +3,18 @@
3
3
  --sp-surface-card: #ffffff;
4
4
  --sp-surface-input: #ffffff;
5
5
  --sp-surface-overlay: rgba(20, 27, 36, 0.6);
6
+ --sp-surface-alternate: #eef1f6;
6
7
  --sp-surface-hero: linear-gradient(135deg, #5b6ee1 0%, #6f3fd7 100%);
7
8
  --sp-text-on-page-default: #141b24;
8
9
  --sp-text-on-page-muted: #4b576a;
9
10
  --sp-text-on-page-subtle: #657287;
10
11
  --sp-text-on-page-meta: #657287;
12
+ --sp-text-on-page-brand: #1f57db;
11
13
  --sp-text-on-surface-default: #141b24;
12
14
  --sp-text-on-surface-muted: #4b576a;
13
15
  --sp-text-on-surface-subtle: #657287;
14
16
  --sp-text-on-surface-meta: #657287;
17
+ --sp-text-on-surface-brand: #1f57db;
15
18
  --sp-component-card-text: #141b24;
16
19
  --sp-component-card-text-muted: #4b576a;
17
20
  --sp-component-input-text: #141b24;
@@ -110,20 +113,8 @@
110
113
  --sp-color-focus-primary: #336df4;
111
114
  --sp-color-focus-error: #ef4444;
112
115
  --sp-color-focus-info: #0369a1;
113
- --sp-color-white-0: #;
114
- --sp-color-white-1: f;
115
- --sp-color-white-2: f;
116
- --sp-color-white-3: f;
117
- --sp-color-white-4: f;
118
- --sp-color-white-5: f;
119
- --sp-color-white-6: f;
120
- --sp-color-black-0: #;
121
- --sp-color-black-1: 0;
122
- --sp-color-black-2: 0;
123
- --sp-color-black-3: 0;
124
- --sp-color-black-4: 0;
125
- --sp-color-black-5: 0;
126
- --sp-color-black-6: 0;
116
+ --sp-color-white: #ffffff;
117
+ --sp-color-black: #000000;
127
118
  --sp-space-0: 0rem;
128
119
  --sp-space-4: 0.25rem;
129
120
  --sp-space-8: 0.5rem;
@@ -217,9 +208,9 @@
217
208
  --sp-icon-box-icon-warning: #d48806;
218
209
  --sp-icon-box-icon-danger: #dc2626;
219
210
  --sp-shadow-none: none;
220
- --sp-shadow-sm: 0 1px 2px 0 rgba(34, 43, 56, 0.06);
221
- --sp-shadow-md: 0 2px 6px -1px rgba(34, 43, 56, 0.08);
222
- --sp-shadow-lg: 0 6px 16px -4px rgba(34, 43, 56, 0.12);
211
+ --sp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
212
+ --sp-shadow-md: 0 2px 6px -1px rgba(0, 0, 0, 0.08);
213
+ --sp-shadow-lg: 0 6px 16px -4px rgba(0, 0, 0, 0.12);
223
214
  --sp-breakpoint-sm: 640px;
224
215
  --sp-breakpoint-md: 768px;
225
216
  --sp-breakpoint-lg: 1024px;
@@ -262,7 +253,7 @@
262
253
  --sp-button-primary-text: #ffffff;
263
254
  --sp-button-primary-textdisabled: #8a96ad;
264
255
  --sp-button-primary-focusring: rgba(14, 165, 233, 0.4);
265
- --sp-button-primary-focusvisible: {colors.info.500} / 0.4;
256
+ --sp-button-primary-focusvisible: rgba(14, 165, 233, 0.4);
266
257
  --sp-button-secondary-bg: #ffffff;
267
258
  --sp-button-secondary-bghover: #f7f8fb;
268
259
  --sp-button-secondary-bgactive: #eef1f6;
@@ -272,7 +263,7 @@
272
263
  --sp-button-secondary-border: #075985;
273
264
  --sp-button-secondary-borderdisabled: #d9dfeb;
274
265
  --sp-button-secondary-focusring: rgba(14, 165, 233, 0.4);
275
- --sp-button-secondary-focusvisible: {colors.info.500} / 0.4;
266
+ --sp-button-secondary-focusvisible: rgba(14, 165, 233, 0.4);
276
267
  --sp-button-ghost-bg: transparent;
277
268
  --sp-button-ghost-bghover: #f0f9ff;
278
269
  --sp-button-ghost-bgactive: #e0f2fe;
@@ -280,7 +271,7 @@
280
271
  --sp-button-ghost-text: #075985;
281
272
  --sp-button-ghost-textdisabled: #8a96ad;
282
273
  --sp-button-ghost-focusring: rgba(14, 165, 233, 0.4);
283
- --sp-button-ghost-focusvisible: {colors.info.500} / 0.4;
274
+ --sp-button-ghost-focusvisible: rgba(14, 165, 233, 0.4);
284
275
  --sp-button-danger-bg: #dc2626;
285
276
  --sp-button-danger-bghover: #b91c1c;
286
277
  --sp-button-danger-bgactive: #991b1b;
@@ -310,7 +301,7 @@
310
301
  --sp-button-accent-text: #ffffff;
311
302
  --sp-button-accent-textdisabled: #8a96ad;
312
303
  --sp-button-accent-focusring: rgba(133, 79, 247, 0.4);
313
- --sp-button-accent-focusvisible: {colors.accent.500} / 0.4;
304
+ --sp-button-accent-focusvisible: rgba(133, 79, 247, 0.4);
314
305
  --sp-form-default-bg: #ffffff;
315
306
  --sp-form-default-border: #b7c1d4;
316
307
  --sp-form-default-text: #141b24;
@@ -318,8 +309,8 @@
318
309
  --sp-form-hover-border: #0ea5e9;
319
310
  --sp-form-focus-border: #0ea5e9;
320
311
  --sp-form-focus-ring: #0ea5e9;
321
- --sp-form-focusvisible-border: {colors.info.500};
322
- --sp-form-focusvisible-ring: {colors.info.500};
312
+ --sp-form-focusvisible-border: #0ea5e9;
313
+ --sp-form-focusvisible-ring: #0ea5e9;
323
314
  --sp-form-valid-border: #22c55e;
324
315
  --sp-form-valid-bg: #f0fdf4;
325
316
  --sp-form-valid-text: #15803d;
@@ -358,16 +349,19 @@
358
349
  --sp-surface-page: #141b24;
359
350
  --sp-surface-card: #222b38;
360
351
  --sp-surface-input: #374253;
361
- --sp-surface-overlay: #222b38;
362
- --sp-surface-hero: linear-gradient(135deg, #401f75 0%, #5d28b8 100%);
352
+ --sp-surface-overlay: rgba(0, 0, 0, 0.6);
353
+ --sp-surface-alternate: #222b38;
354
+ --sp-surface-hero: linear-gradient(135deg, #5d28b8 0%, #401f75 100%);
363
355
  --sp-text-on-page-default: #f7f8fb;
364
356
  --sp-text-on-page-muted: #b7c1d4;
365
357
  --sp-text-on-page-subtle: #8a96ad;
366
358
  --sp-text-on-page-meta: #8a96ad;
359
+ --sp-text-on-page-brand: #5a92ff;
367
360
  --sp-text-on-surface-default: #eef1f6;
368
361
  --sp-text-on-surface-muted: #b7c1d4;
369
362
  --sp-text-on-surface-subtle: #8a96ad;
370
363
  --sp-text-on-surface-meta: #8a96ad;
364
+ --sp-text-on-surface-brand: #5a92ff;
371
365
  --sp-component-card-text: #eef1f6;
372
366
  --sp-component-card-text-muted: #b7c1d4;
373
367
  --sp-component-input-text: #eef1f6;
@@ -393,7 +387,7 @@
393
387
  }
394
388
  @layer components {
395
389
 
396
- :root {
390
+ :where(:root) {
397
391
  /* structural border width */
398
392
  --sp-component-border-width: var(--sp-border-width-base);
399
393
 
@@ -449,8 +443,7 @@
449
443
 
450
444
  /* card roles */
451
445
  --sp-component-card-bg: var(--sp-surface-card);
452
- --sp-component-card-text: var(--sp-text-on-surface-default);
453
- --sp-component-card-text-muted: var(--sp-text-on-surface-muted);
446
+ /* --sp-component-card-text and --sp-component-card-text-muted are now provided directly by the token package */
454
447
  --sp-component-card-border: var(--sp-color-neutral-200);
455
448
  --sp-component-card-border-base: var(--sp-component-card-ghost-border);
456
449
  --sp-component-card-shadow: var(--sp-shadow-sm);
@@ -466,8 +459,8 @@
466
459
  /* input roles */
467
460
  --sp-component-input-role-border: var(--sp-form-default-border);
468
461
  --sp-component-input-role-bg: var(--sp-form-default-bg);
469
- --sp-component-input-role-text: var(--sp-form-default-text);
470
- --sp-component-input-role-placeholder: var(--sp-form-default-placeholder);
462
+ --sp-component-input-role-text: var(--sp-component-input-text);
463
+ --sp-component-input-role-placeholder: var(--sp-component-input-placeholder);
471
464
  --sp-component-input-role-border-hover: var(--sp-form-hover-border);
472
465
  --sp-component-input-role-border-focus: var(--sp-form-focus-border);
473
466
  --sp-component-input-role-ring: var(--sp-form-focus-ring);
@@ -501,6 +494,8 @@
501
494
  --sp-component-badge-neutral-text: var(--sp-badge-neutral-text);
502
495
  --sp-component-badge-info-bg: var(--sp-badge-info-bg);
503
496
  --sp-component-badge-info-text: var(--sp-badge-info-text);
497
+ --sp-component-badge-ghost-bg: var(--sp-button-ghost-bg);
498
+ --sp-component-badge-ghost-text: var(--sp-button-ghost-text);
504
499
 
505
500
  /* badge hover states derived from Spectre token semantics */
506
501
  --sp-component-badge-primary-bg-hover: var(--sp-button-primary-bghover);
@@ -510,6 +505,7 @@
510
505
  --sp-component-badge-danger-bg-hover: var(--sp-color-error-200);
511
506
  --sp-component-badge-neutral-bg-hover: var(--sp-color-neutral-200);
512
507
  --sp-component-badge-info-bg-hover: var(--sp-color-info-200);
508
+ --sp-component-badge-ghost-bg-hover: var(--sp-button-ghost-bghover);
513
509
 
514
510
  --sp-component-badge-padding-x-sm: var(--sp-space-8);
515
511
  --sp-component-badge-padding-x-md: var(--sp-space-12);
@@ -533,6 +529,13 @@
533
529
  --sp-component-iconbox-danger-text: var(--sp-icon-box-icon-danger);
534
530
  --sp-component-iconbox-info-bg: var(--sp-color-info-50);
535
531
  --sp-component-iconbox-info-text: var(--sp-badge-info-text);
532
+ --sp-component-iconbox-secondary-bg: var(--sp-button-secondary-bg);
533
+ --sp-component-iconbox-secondary-text: var(--sp-button-secondary-text);
534
+ --sp-component-iconbox-secondary-border: var(--sp-button-secondary-border);
535
+ --sp-component-iconbox-neutral-bg: var(--sp-color-neutral-50);
536
+ --sp-component-iconbox-neutral-text: var(--sp-badge-neutral-text);
537
+ --sp-component-iconbox-ghost-bg: var(--sp-button-ghost-bg);
538
+ --sp-component-iconbox-ghost-text: var(--sp-button-ghost-text);
536
539
 
537
540
  /* testimonial roles */
538
541
  --sp-component-testimonial-bg: var(--sp-surface-card);
@@ -540,7 +543,7 @@
540
543
  --sp-component-testimonial-text: var(--sp-color-neutral-700);
541
544
  --sp-component-testimonial-author-name: var(--sp-color-neutral-900);
542
545
  --sp-component-testimonial-author-title: var(--sp-color-neutral-500);
543
- --sp-component-testimonial-quote-mark: var(--sp-color-neutral-300);
546
+ --sp-component-testimonial-quote-mark: var(--sp-color-neutral-500);
544
547
 
545
548
  /* pricing card roles */
546
549
  --sp-component-pricing-card-bg: var(--sp-surface-card);
@@ -550,7 +553,7 @@
550
553
  --sp-component-pricing-card-featured-badge-bg: var(--sp-color-warning-500);
551
554
  --sp-component-pricing-card-featured-badge-text: var(--sp-color-neutral-900);
552
555
  --sp-component-pricing-card-price: var(--sp-color-neutral-900);
553
- --sp-component-pricing-card-featured-price: var(--sp-color-neutral-50);
556
+ --sp-component-pricing-card-featured-price: var(--sp-color-white);
554
557
  --sp-component-pricing-card-price-description: var(--sp-color-neutral-500);
555
558
 
556
559
  /* rating roles */
@@ -563,45 +566,22 @@
563
566
  }
564
567
 
565
568
  /* dark mode overrides mapped from Spectre token mode definitions */
566
- :root[data-spectre-theme="dark"] {
569
+ :where(:root[data-spectre-theme="dark"]) {
567
570
  --sp-component-testimonial-bg: var(--sp-color-neutral-800);
568
571
  --sp-component-testimonial-border: var(--sp-color-neutral-700);
569
572
  --sp-component-testimonial-text: var(--sp-color-neutral-200);
570
573
  --sp-component-testimonial-author-name: var(--sp-color-neutral-100);
571
- --sp-component-testimonial-author-title: var(--sp-color-neutral-300);
572
- --sp-component-testimonial-quote-mark: var(--sp-color-neutral-600);
574
+ --sp-component-testimonial-author-title: var(--sp-color-neutral-400);
575
+ --sp-component-testimonial-quote-mark: var(--sp-color-neutral-400);
573
576
 
574
577
  --sp-component-pricing-card-bg: var(--sp-color-neutral-800);
575
578
  --sp-component-pricing-card-border: var(--sp-color-neutral-700);
576
579
  --sp-component-pricing-card-price: var(--sp-color-neutral-100);
577
- --sp-component-pricing-card-price-description: var(--sp-color-neutral-300);
580
+ --sp-component-pricing-card-price-description: var(--sp-color-neutral-400);
578
581
 
579
582
  --sp-component-rating-star-filled: var(--sp-color-warning-400);
580
583
  --sp-component-rating-star-empty: var(--sp-color-neutral-700);
581
584
  --sp-component-rating-text: var(--sp-color-neutral-400);
582
-
583
- --sp-component-badge-success-bg: var(--sp-color-success-800);
584
- --sp-component-badge-success-text: var(--sp-color-success-100);
585
- --sp-component-badge-warning-bg: var(--sp-color-warning-800);
586
- --sp-component-badge-warning-text: var(--sp-color-warning-100);
587
- --sp-component-badge-danger-bg: var(--sp-color-error-800);
588
- --sp-component-badge-danger-text: var(--sp-color-error-100);
589
- --sp-component-badge-neutral-bg: var(--sp-color-neutral-700);
590
- --sp-component-badge-neutral-text: var(--sp-color-neutral-100);
591
- --sp-component-badge-info-bg: var(--sp-color-info-900);
592
- --sp-component-badge-info-text: var(--sp-color-info-100);
593
-
594
- --sp-component-badge-success-bg-hover: var(--sp-color-success-700);
595
- --sp-component-badge-warning-bg-hover: var(--sp-color-warning-800);
596
- --sp-component-badge-danger-bg-hover: var(--sp-color-error-700);
597
- --sp-component-badge-neutral-bg-hover: var(--sp-color-neutral-600);
598
- --sp-component-badge-info-bg-hover: var(--sp-color-info-700);
599
-
600
- --sp-component-iconbox-primary-bg: var(--sp-color-brand-900);
601
- --sp-component-iconbox-success-bg: var(--sp-color-success-900);
602
- --sp-component-iconbox-warning-bg: var(--sp-color-warning-900);
603
- --sp-component-iconbox-danger-bg: var(--sp-color-error-900);
604
- --sp-component-iconbox-info-bg: var(--sp-color-info-900);
605
585
  }
606
586
 
607
587
  /* BUTTONS -------------------------------------------------------------- */
@@ -615,7 +595,7 @@
615
595
  border: var(--sp-component-border-width) solid var(--sp-component-button-border-base);
616
596
  font-family: var(--sp-font-family-sans);
617
597
  font-size: var(--sp-font-md-size);
618
- line-height: 1;
598
+ line-height: var(--sp-font-md-line-height);
619
599
  font-weight: var(--sp-font-md-weight);
620
600
  text-decoration: none;
621
601
  appearance: none;
@@ -933,10 +913,17 @@
933
913
  }
934
914
 
935
915
  .sp-input:hover,
936
- .sp-input--hover {
916
+ .sp-input--hover,
917
+ .sp-input.is-hover {
937
918
  border-color: var(--sp-component-input-role-border-hover);
938
919
  }
939
920
 
921
+ .sp-input:active,
922
+ .sp-input--active,
923
+ .sp-input.is-active {
924
+ opacity: var(--sp-opacity-active);
925
+ }
926
+
940
927
  .sp-input:focus,
941
928
  .sp-input--focus,
942
929
  .sp-input.is-focus {
@@ -964,6 +951,7 @@
964
951
  background-color: var(--sp-component-input-role-bg-disabled);
965
952
  color: var(--sp-component-input-role-text-disabled);
966
953
  border-color: var(--sp-component-input-role-border-disabled);
954
+ box-shadow: none;
967
955
  cursor: not-allowed;
968
956
  pointer-events: none;
969
957
  }
@@ -972,12 +960,12 @@
972
960
  color: var(--sp-component-input-role-text-disabled);
973
961
  }
974
962
 
975
- .sp-input--disabled,
976
963
  .sp-input--disabled:focus {
977
964
  box-shadow: none;
978
965
  }
979
966
 
980
- .sp-input--loading {
967
+ .sp-input--loading,
968
+ .sp-input[aria-busy="true"] {
981
969
  pointer-events: none;
982
970
  opacity: var(--sp-opacity-active);
983
971
  }
@@ -1045,7 +1033,8 @@
1045
1033
  cursor: pointer;
1046
1034
  transition:
1047
1035
  transform var(--sp-duration-fast) var(--sp-easing-out),
1048
- box-shadow var(--sp-duration-fast) var(--sp-easing-out);
1036
+ box-shadow var(--sp-duration-fast) var(--sp-easing-out),
1037
+ opacity var(--sp-duration-fast) var(--sp-easing-out);
1049
1038
  }
1050
1039
 
1051
1040
  .sp-card--interactive:hover,
@@ -1059,6 +1048,13 @@
1059
1048
  box-shadow: var(--sp-component-card-shadow-elevated);
1060
1049
  }
1061
1050
 
1051
+ .sp-card--interactive:active,
1052
+ .sp-card--interactive.sp-card--active,
1053
+ .sp-card--interactive.is-active {
1054
+ opacity: var(--sp-opacity-active);
1055
+ transform: translateY(0);
1056
+ }
1057
+
1062
1058
  /* BADGES --------------------------------------------------------------- */
1063
1059
 
1064
1060
  .sp-badge {
@@ -1172,6 +1168,17 @@
1172
1168
  background-color: var(--sp-component-badge-info-bg-hover);
1173
1169
  }
1174
1170
 
1171
+ .sp-badge--ghost {
1172
+ background-color: var(--sp-component-badge-ghost-bg);
1173
+ color: var(--sp-component-badge-ghost-text);
1174
+ }
1175
+
1176
+ .sp-badge--ghost.sp-badge--interactive:hover,
1177
+ .sp-badge--ghost.sp-badge--interactive.sp-badge--hover,
1178
+ .sp-badge--ghost.sp-badge--interactive.is-hover {
1179
+ background-color: var(--sp-component-badge-ghost-bg-hover);
1180
+ }
1181
+
1175
1182
  .sp-badge--interactive {
1176
1183
  cursor: pointer;
1177
1184
  transition:
@@ -1214,9 +1221,9 @@
1214
1221
  border-radius: var(--sp-component-iconbox-radius);
1215
1222
  color: var(--sp-component-iconbox-primary-text);
1216
1223
  background-color: var(--sp-component-iconbox-primary-bg);
1224
+ border: var(--sp-component-border-width) solid transparent;
1217
1225
  font-family: var(--sp-font-family-sans);
1218
1226
  font-weight: var(--sp-font-md-weight);
1219
- line-height: 0;
1220
1227
  transition:
1221
1228
  background-color var(--sp-duration-fast) var(--sp-easing-out),
1222
1229
  color var(--sp-duration-fast) var(--sp-easing-out),
@@ -1230,11 +1237,6 @@
1230
1237
  - force currentColor for common svg shapes
1231
1238
  - preserve stroke-only icons (fill="none")
1232
1239
  */
1233
- .sp-iconbox,
1234
- .sp-iconbox>i {
1235
- line-height: 0;
1236
- }
1237
-
1238
1240
  .sp-iconbox>i {
1239
1241
  display: inline-flex;
1240
1242
  align-items: center;
@@ -1253,7 +1255,6 @@
1253
1255
  }
1254
1256
 
1255
1257
  /* default to inheriting via currentColor */
1256
- .sp-iconbox svg,
1257
1258
  .sp-iconbox svg path,
1258
1259
  .sp-iconbox svg circle,
1259
1260
  .sp-iconbox svg rect,
@@ -1291,11 +1292,21 @@
1291
1292
  font-size: var(--sp-font-lg-size);
1292
1293
  }
1293
1294
 
1295
+ .sp-iconbox--pill {
1296
+ border-radius: var(--sp-radius-pill);
1297
+ }
1298
+
1294
1299
  .sp-iconbox--primary {
1295
1300
  background-color: var(--sp-component-iconbox-primary-bg);
1296
1301
  color: var(--sp-component-iconbox-primary-text);
1297
1302
  }
1298
1303
 
1304
+ .sp-iconbox--secondary {
1305
+ background-color: var(--sp-component-iconbox-secondary-bg);
1306
+ color: var(--sp-component-iconbox-secondary-text);
1307
+ border-color: var(--sp-component-iconbox-secondary-border);
1308
+ }
1309
+
1299
1310
  .sp-iconbox--success {
1300
1311
  background-color: var(--sp-component-iconbox-success-bg);
1301
1312
  color: var(--sp-component-iconbox-success-text);
@@ -1316,6 +1327,16 @@
1316
1327
  color: var(--sp-component-iconbox-info-text);
1317
1328
  }
1318
1329
 
1330
+ .sp-iconbox--neutral {
1331
+ background-color: var(--sp-component-iconbox-neutral-bg);
1332
+ color: var(--sp-component-iconbox-neutral-text);
1333
+ }
1334
+
1335
+ .sp-iconbox--ghost {
1336
+ background-color: var(--sp-component-iconbox-ghost-bg);
1337
+ color: var(--sp-component-iconbox-ghost-text);
1338
+ }
1339
+
1319
1340
  .sp-iconbox--interactive {
1320
1341
  cursor: pointer;
1321
1342
  }
@@ -1374,6 +1395,41 @@
1374
1395
  pointer-events: none;
1375
1396
  }
1376
1397
 
1398
+ .sp-testimonial--full {
1399
+ height: 100%;
1400
+ }
1401
+
1402
+ .sp-testimonial--interactive {
1403
+ cursor: pointer;
1404
+ transition:
1405
+ transform var(--sp-duration-fast) var(--sp-easing-out),
1406
+ box-shadow var(--sp-duration-fast) var(--sp-easing-out),
1407
+ opacity var(--sp-duration-fast) var(--sp-easing-out);
1408
+ }
1409
+
1410
+ .sp-testimonial--interactive:hover,
1411
+ .sp-testimonial--interactive:focus-within,
1412
+ .sp-testimonial--interactive.sp-testimonial--hover,
1413
+ .sp-testimonial--interactive.is-hover {
1414
+ transform: translateY(calc(var(--sp-component-border-width) * -1));
1415
+ box-shadow: var(--sp-shadow-lg);
1416
+ }
1417
+
1418
+ .sp-testimonial--interactive:active,
1419
+ .sp-testimonial--interactive.sp-testimonial--active,
1420
+ .sp-testimonial--interactive.is-active {
1421
+ opacity: var(--sp-opacity-active);
1422
+ transform: translateY(0);
1423
+ }
1424
+
1425
+ .sp-testimonial--interactive:focus-visible,
1426
+ .sp-testimonial--interactive.sp-testimonial--focus,
1427
+ .sp-testimonial--interactive.is-focus {
1428
+ outline: none;
1429
+ transform: translateY(calc(var(--sp-component-border-width) * -1));
1430
+ box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
1431
+ }
1432
+
1377
1433
  .sp-testimonial-quote {
1378
1434
  color: var(--sp-component-testimonial-text);
1379
1435
  font-size: var(--sp-font-lg-size);
@@ -1425,7 +1481,10 @@
1425
1481
  flex-direction: column;
1426
1482
  gap: var(--sp-space-24);
1427
1483
  position: relative;
1428
- transition: transform var(--sp-duration-fast) var(--sp-easing-out);
1484
+ transition:
1485
+ transform var(--sp-duration-fast) var(--sp-easing-out),
1486
+ box-shadow var(--sp-duration-fast) var(--sp-easing-out),
1487
+ opacity var(--sp-duration-fast) var(--sp-easing-out);
1429
1488
  }
1430
1489
 
1431
1490
  .sp-pricing-card--featured {
@@ -1446,6 +1505,53 @@
1446
1505
  pointer-events: none;
1447
1506
  }
1448
1507
 
1508
+ .sp-pricing-card--full {
1509
+ height: 100%;
1510
+ }
1511
+
1512
+ .sp-pricing-card--interactive {
1513
+ cursor: pointer;
1514
+ }
1515
+
1516
+ .sp-pricing-card--interactive:hover,
1517
+ .sp-pricing-card--interactive:focus-within,
1518
+ .sp-pricing-card--interactive.sp-pricing-card--hover,
1519
+ .sp-pricing-card--interactive.is-hover {
1520
+ transform: translateY(calc(var(--sp-component-border-width) * -1));
1521
+ box-shadow: var(--sp-shadow-lg);
1522
+ }
1523
+
1524
+ .sp-pricing-card--featured.sp-pricing-card--interactive:hover,
1525
+ .sp-pricing-card--featured.sp-pricing-card--interactive:focus-visible,
1526
+ .sp-pricing-card--featured.sp-pricing-card--interactive:focus-within,
1527
+ .sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--hover,
1528
+ .sp-pricing-card--featured.sp-pricing-card--interactive.is-hover,
1529
+ .sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--focus,
1530
+ .sp-pricing-card--featured.sp-pricing-card--interactive.is-focus {
1531
+ transform: scale(1.05) translateY(calc(var(--sp-component-border-width) * -1));
1532
+ }
1533
+
1534
+ .sp-pricing-card--interactive:active,
1535
+ .sp-pricing-card--interactive.sp-pricing-card--active,
1536
+ .sp-pricing-card--interactive.is-active {
1537
+ opacity: var(--sp-opacity-active);
1538
+ transform: translateY(0);
1539
+ }
1540
+
1541
+ .sp-pricing-card--featured.sp-pricing-card--interactive:active,
1542
+ .sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--active,
1543
+ .sp-pricing-card--featured.sp-pricing-card--interactive.is-active {
1544
+ transform: scale(1.05) translateY(0);
1545
+ }
1546
+
1547
+ .sp-pricing-card--interactive:focus-visible,
1548
+ .sp-pricing-card--interactive.sp-pricing-card--focus,
1549
+ .sp-pricing-card--interactive.is-focus {
1550
+ outline: none;
1551
+ transform: translateY(calc(var(--sp-component-border-width) * -1));
1552
+ box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
1553
+ }
1554
+
1449
1555
  .sp-pricing-card-badge {
1450
1556
  position: absolute;
1451
1557
  top: var(--sp-space-16);
@@ -1491,6 +1597,10 @@
1491
1597
  align-items: center;
1492
1598
  gap: var(--sp-space-8);
1493
1599
  font-size: var(--sp-component-rating-size-md);
1600
+ border-radius: var(--sp-radius-md);
1601
+ transition:
1602
+ opacity var(--sp-duration-fast) var(--sp-easing-out),
1603
+ box-shadow var(--sp-duration-fast) var(--sp-easing-out);
1494
1604
  }
1495
1605
 
1496
1606
  .sp-rating--sm {
@@ -1505,9 +1615,12 @@
1505
1615
  font-size: var(--sp-component-rating-size-lg);
1506
1616
  }
1507
1617
 
1618
+ .sp-rating:disabled,
1619
+ .sp-rating[aria-disabled="true"],
1508
1620
  .sp-rating--disabled {
1509
1621
  opacity: var(--sp-opacity-disabled);
1510
1622
  pointer-events: none;
1623
+ cursor: not-allowed;
1511
1624
  }
1512
1625
 
1513
1626
  .sp-rating--loading {
@@ -1515,6 +1628,29 @@
1515
1628
  pointer-events: none;
1516
1629
  }
1517
1630
 
1631
+ .sp-rating--interactive {
1632
+ cursor: pointer;
1633
+ }
1634
+
1635
+ .sp-rating--interactive:hover,
1636
+ .sp-rating--interactive.sp-rating--hover,
1637
+ .sp-rating--interactive.is-hover {
1638
+ opacity: var(--sp-opacity-hover);
1639
+ }
1640
+
1641
+ .sp-rating--interactive:active,
1642
+ .sp-rating--interactive.sp-rating--active,
1643
+ .sp-rating--interactive.is-active {
1644
+ opacity: var(--sp-opacity-active);
1645
+ }
1646
+
1647
+ .sp-rating--interactive:focus-visible,
1648
+ .sp-rating--interactive.sp-rating--focus,
1649
+ .sp-rating--interactive.is-focus {
1650
+ outline: none;
1651
+ box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
1652
+ }
1653
+
1518
1654
  .sp-rating-stars {
1519
1655
  display: flex;
1520
1656
  gap: var(--sp-space-4);