@phcdevworks/spectre-ui 1.2.0 → 1.3.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 +5 -0
  2. package/dist/base.css +19 -24
  3. package/dist/components.css +152 -63
  4. package/dist/index.cjs +52 -11
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.css +156 -66
  7. package/dist/index.d.cts +15 -0
  8. package/dist/index.d.ts +15 -0
  9. package/dist/index.js +52 -11
  10. package/dist/index.js.map +1 -1
  11. package/dist/utilities.css +15 -21
  12. package/package.json +10 -10
package/README.md CHANGED
@@ -183,6 +183,11 @@ Install dependencies, then run the package verification flow:
183
183
 
184
184
  npm run ci:verify
185
185
 
186
+ Planning artifacts for contract hardening live in:
187
+
188
+ - [`ROADMAP.md`](ROADMAP.md)
189
+ - [`TODO.md`](TODO.md)
190
+
186
191
  Key source areas:
187
192
 
188
193
  - `src/styles/` for source CSS
package/dist/base.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;
@@ -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;
@@ -359,15 +350,18 @@
359
350
  --sp-surface-card: #222b38;
360
351
  --sp-surface-input: #374253;
361
352
  --sp-surface-overlay: #222b38;
362
- --sp-surface-hero: linear-gradient(135deg, #401f75 0%, #5d28b8 100%);
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;
@@ -399,13 +393,14 @@
399
393
  box-sizing: border-box;
400
394
  }
401
395
 
402
- html,
403
- body {
396
+ html {
404
397
  margin: 0;
405
398
  padding: 0;
406
399
  }
407
400
 
408
401
  body {
402
+ margin: 0;
403
+ padding: 0;
409
404
  min-height: 100vh;
410
405
  font-family: var(--sp-font-family-sans);
411
406
  font-size: var(--sp-font-md-size);
@@ -424,13 +419,13 @@
424
419
  }
425
420
 
426
421
  input,
427
- button,
428
422
  textarea,
429
423
  select {
430
424
  font: inherit;
431
425
  }
432
426
 
433
427
  button {
428
+ font: inherit;
434
429
  border: none;
435
430
  background: none;
436
431
  padding: 0;
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;
@@ -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;
@@ -359,15 +350,18 @@
359
350
  --sp-surface-card: #222b38;
360
351
  --sp-surface-input: #374253;
361
352
  --sp-surface-overlay: #222b38;
362
- --sp-surface-hero: linear-gradient(135deg, #401f75 0%, #5d28b8 100%);
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);
@@ -528,7 +521,7 @@
528
521
  --sp-component-iconbox-success-bg: var(--sp-color-success-50);
529
522
  --sp-component-iconbox-success-text: var(--sp-icon-box-icon-success);
530
523
  --sp-component-iconbox-warning-bg: var(--sp-color-warning-50);
531
- --sp-component-iconbox-warning-text: var(--sp-icon-box-icon-warning);
524
+ --sp-component-iconbox-warning-text: var(--sp-color-warning-800);
532
525
  --sp-component-iconbox-danger-bg: var(--sp-color-error-50);
533
526
  --sp-component-iconbox-danger-text: var(--sp-icon-box-icon-danger);
534
527
  --sp-component-iconbox-info-bg: var(--sp-color-info-50);
@@ -563,7 +556,7 @@
563
556
  }
564
557
 
565
558
  /* dark mode overrides mapped from Spectre token mode definitions */
566
- :root[data-spectre-theme="dark"] {
559
+ :where(:root[data-spectre-theme="dark"]) {
567
560
  --sp-component-testimonial-bg: var(--sp-color-neutral-800);
568
561
  --sp-component-testimonial-border: var(--sp-color-neutral-700);
569
562
  --sp-component-testimonial-text: var(--sp-color-neutral-200);
@@ -579,29 +572,6 @@
579
572
  --sp-component-rating-star-filled: var(--sp-color-warning-400);
580
573
  --sp-component-rating-star-empty: var(--sp-color-neutral-700);
581
574
  --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
575
  }
606
576
 
607
577
  /* BUTTONS -------------------------------------------------------------- */
@@ -615,7 +585,7 @@
615
585
  border: var(--sp-component-border-width) solid var(--sp-component-button-border-base);
616
586
  font-family: var(--sp-font-family-sans);
617
587
  font-size: var(--sp-font-md-size);
618
- line-height: 1;
588
+ line-height: var(--sp-font-md-line-height);
619
589
  font-weight: var(--sp-font-md-weight);
620
590
  text-decoration: none;
621
591
  appearance: none;
@@ -933,10 +903,17 @@
933
903
  }
934
904
 
935
905
  .sp-input:hover,
936
- .sp-input--hover {
906
+ .sp-input--hover,
907
+ .sp-input.is-hover {
937
908
  border-color: var(--sp-component-input-role-border-hover);
938
909
  }
939
910
 
911
+ .sp-input:active,
912
+ .sp-input--active,
913
+ .sp-input.is-active {
914
+ opacity: var(--sp-opacity-active);
915
+ }
916
+
940
917
  .sp-input:focus,
941
918
  .sp-input--focus,
942
919
  .sp-input.is-focus {
@@ -964,6 +941,7 @@
964
941
  background-color: var(--sp-component-input-role-bg-disabled);
965
942
  color: var(--sp-component-input-role-text-disabled);
966
943
  border-color: var(--sp-component-input-role-border-disabled);
944
+ box-shadow: none;
967
945
  cursor: not-allowed;
968
946
  pointer-events: none;
969
947
  }
@@ -972,7 +950,6 @@
972
950
  color: var(--sp-component-input-role-text-disabled);
973
951
  }
974
952
 
975
- .sp-input--disabled,
976
953
  .sp-input--disabled:focus {
977
954
  box-shadow: none;
978
955
  }
@@ -1045,7 +1022,8 @@
1045
1022
  cursor: pointer;
1046
1023
  transition:
1047
1024
  transform var(--sp-duration-fast) var(--sp-easing-out),
1048
- box-shadow var(--sp-duration-fast) var(--sp-easing-out);
1025
+ box-shadow var(--sp-duration-fast) var(--sp-easing-out),
1026
+ opacity var(--sp-duration-fast) var(--sp-easing-out);
1049
1027
  }
1050
1028
 
1051
1029
  .sp-card--interactive:hover,
@@ -1059,6 +1037,13 @@
1059
1037
  box-shadow: var(--sp-component-card-shadow-elevated);
1060
1038
  }
1061
1039
 
1040
+ .sp-card--interactive:active,
1041
+ .sp-card--interactive.sp-card--active,
1042
+ .sp-card--interactive.is-active {
1043
+ opacity: var(--sp-opacity-active);
1044
+ transform: translateY(0);
1045
+ }
1046
+
1062
1047
  /* BADGES --------------------------------------------------------------- */
1063
1048
 
1064
1049
  .sp-badge {
@@ -1216,7 +1201,6 @@
1216
1201
  background-color: var(--sp-component-iconbox-primary-bg);
1217
1202
  font-family: var(--sp-font-family-sans);
1218
1203
  font-weight: var(--sp-font-md-weight);
1219
- line-height: 0;
1220
1204
  transition:
1221
1205
  background-color var(--sp-duration-fast) var(--sp-easing-out),
1222
1206
  color var(--sp-duration-fast) var(--sp-easing-out),
@@ -1230,11 +1214,6 @@
1230
1214
  - force currentColor for common svg shapes
1231
1215
  - preserve stroke-only icons (fill="none")
1232
1216
  */
1233
- .sp-iconbox,
1234
- .sp-iconbox>i {
1235
- line-height: 0;
1236
- }
1237
-
1238
1217
  .sp-iconbox>i {
1239
1218
  display: inline-flex;
1240
1219
  align-items: center;
@@ -1253,7 +1232,6 @@
1253
1232
  }
1254
1233
 
1255
1234
  /* default to inheriting via currentColor */
1256
- .sp-iconbox svg,
1257
1235
  .sp-iconbox svg path,
1258
1236
  .sp-iconbox svg circle,
1259
1237
  .sp-iconbox svg rect,
@@ -1291,6 +1269,10 @@
1291
1269
  font-size: var(--sp-font-lg-size);
1292
1270
  }
1293
1271
 
1272
+ .sp-iconbox--pill {
1273
+ border-radius: var(--sp-radius-pill);
1274
+ }
1275
+
1294
1276
  .sp-iconbox--primary {
1295
1277
  background-color: var(--sp-component-iconbox-primary-bg);
1296
1278
  color: var(--sp-component-iconbox-primary-text);
@@ -1374,6 +1356,37 @@
1374
1356
  pointer-events: none;
1375
1357
  }
1376
1358
 
1359
+ .sp-testimonial--interactive {
1360
+ cursor: pointer;
1361
+ transition:
1362
+ transform var(--sp-duration-fast) var(--sp-easing-out),
1363
+ box-shadow var(--sp-duration-fast) var(--sp-easing-out),
1364
+ opacity var(--sp-duration-fast) var(--sp-easing-out);
1365
+ }
1366
+
1367
+ .sp-testimonial--interactive:hover,
1368
+ .sp-testimonial--interactive:focus-within,
1369
+ .sp-testimonial--interactive.sp-testimonial--hover,
1370
+ .sp-testimonial--interactive.is-hover {
1371
+ transform: translateY(calc(var(--sp-component-border-width) * -1));
1372
+ box-shadow: var(--sp-shadow-lg);
1373
+ }
1374
+
1375
+ .sp-testimonial--interactive:active,
1376
+ .sp-testimonial--interactive.sp-testimonial--active,
1377
+ .sp-testimonial--interactive.is-active {
1378
+ opacity: var(--sp-opacity-active);
1379
+ transform: translateY(0);
1380
+ }
1381
+
1382
+ .sp-testimonial--interactive:focus-visible,
1383
+ .sp-testimonial--interactive.sp-testimonial--focus,
1384
+ .sp-testimonial--interactive.is-focus {
1385
+ outline: none;
1386
+ transform: translateY(calc(var(--sp-component-border-width) * -1));
1387
+ box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
1388
+ }
1389
+
1377
1390
  .sp-testimonial-quote {
1378
1391
  color: var(--sp-component-testimonial-text);
1379
1392
  font-size: var(--sp-font-lg-size);
@@ -1425,7 +1438,10 @@
1425
1438
  flex-direction: column;
1426
1439
  gap: var(--sp-space-24);
1427
1440
  position: relative;
1428
- transition: transform var(--sp-duration-fast) var(--sp-easing-out);
1441
+ transition:
1442
+ transform var(--sp-duration-fast) var(--sp-easing-out),
1443
+ box-shadow var(--sp-duration-fast) var(--sp-easing-out),
1444
+ opacity var(--sp-duration-fast) var(--sp-easing-out);
1429
1445
  }
1430
1446
 
1431
1447
  .sp-pricing-card--featured {
@@ -1446,6 +1462,49 @@
1446
1462
  pointer-events: none;
1447
1463
  }
1448
1464
 
1465
+ .sp-pricing-card--interactive {
1466
+ cursor: pointer;
1467
+ }
1468
+
1469
+ .sp-pricing-card--interactive:hover,
1470
+ .sp-pricing-card--interactive:focus-within,
1471
+ .sp-pricing-card--interactive.sp-pricing-card--hover,
1472
+ .sp-pricing-card--interactive.is-hover {
1473
+ transform: translateY(calc(var(--sp-component-border-width) * -1));
1474
+ box-shadow: var(--sp-shadow-lg);
1475
+ }
1476
+
1477
+ .sp-pricing-card--featured.sp-pricing-card--interactive:hover,
1478
+ .sp-pricing-card--featured.sp-pricing-card--interactive:focus-visible,
1479
+ .sp-pricing-card--featured.sp-pricing-card--interactive:focus-within,
1480
+ .sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--hover,
1481
+ .sp-pricing-card--featured.sp-pricing-card--interactive.is-hover,
1482
+ .sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--focus,
1483
+ .sp-pricing-card--featured.sp-pricing-card--interactive.is-focus {
1484
+ transform: scale(1.05) translateY(calc(var(--sp-component-border-width) * -1));
1485
+ }
1486
+
1487
+ .sp-pricing-card--interactive:active,
1488
+ .sp-pricing-card--interactive.sp-pricing-card--active,
1489
+ .sp-pricing-card--interactive.is-active {
1490
+ opacity: var(--sp-opacity-active);
1491
+ transform: translateY(0);
1492
+ }
1493
+
1494
+ .sp-pricing-card--featured.sp-pricing-card--interactive:active,
1495
+ .sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--active,
1496
+ .sp-pricing-card--featured.sp-pricing-card--interactive.is-active {
1497
+ transform: scale(1.05) translateY(0);
1498
+ }
1499
+
1500
+ .sp-pricing-card--interactive:focus-visible,
1501
+ .sp-pricing-card--interactive.sp-pricing-card--focus,
1502
+ .sp-pricing-card--interactive.is-focus {
1503
+ outline: none;
1504
+ transform: translateY(calc(var(--sp-component-border-width) * -1));
1505
+ box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
1506
+ }
1507
+
1449
1508
  .sp-pricing-card-badge {
1450
1509
  position: absolute;
1451
1510
  top: var(--sp-space-16);
@@ -1491,6 +1550,10 @@
1491
1550
  align-items: center;
1492
1551
  gap: var(--sp-space-8);
1493
1552
  font-size: var(--sp-component-rating-size-md);
1553
+ border-radius: var(--sp-radius-md);
1554
+ transition:
1555
+ opacity var(--sp-duration-fast) var(--sp-easing-out),
1556
+ box-shadow var(--sp-duration-fast) var(--sp-easing-out);
1494
1557
  }
1495
1558
 
1496
1559
  .sp-rating--sm {
@@ -1505,9 +1568,12 @@
1505
1568
  font-size: var(--sp-component-rating-size-lg);
1506
1569
  }
1507
1570
 
1571
+ .sp-rating:disabled,
1572
+ .sp-rating[aria-disabled="true"],
1508
1573
  .sp-rating--disabled {
1509
1574
  opacity: var(--sp-opacity-disabled);
1510
1575
  pointer-events: none;
1576
+ cursor: not-allowed;
1511
1577
  }
1512
1578
 
1513
1579
  .sp-rating--loading {
@@ -1515,6 +1581,29 @@
1515
1581
  pointer-events: none;
1516
1582
  }
1517
1583
 
1584
+ .sp-rating--interactive {
1585
+ cursor: pointer;
1586
+ }
1587
+
1588
+ .sp-rating--interactive:hover,
1589
+ .sp-rating--interactive.sp-rating--hover,
1590
+ .sp-rating--interactive.is-hover {
1591
+ opacity: var(--sp-opacity-hover);
1592
+ }
1593
+
1594
+ .sp-rating--interactive:active,
1595
+ .sp-rating--interactive.sp-rating--active,
1596
+ .sp-rating--interactive.is-active {
1597
+ opacity: var(--sp-opacity-active);
1598
+ }
1599
+
1600
+ .sp-rating--interactive:focus-visible,
1601
+ .sp-rating--interactive.sp-rating--focus,
1602
+ .sp-rating--interactive.is-focus {
1603
+ outline: none;
1604
+ box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
1605
+ }
1606
+
1518
1607
  .sp-rating-stars {
1519
1608
  display: flex;
1520
1609
  gap: var(--sp-space-4);