@phcdevworks/spectre-ui 1.1.2 → 1.3.0

package/dist/index.css

@@ -7,17 +7,20 @@
   --sp-surface-card: #ffffff;
   --sp-surface-input: #ffffff;
   --sp-surface-overlay: rgba(20, 27, 36, 0.6);
+  --sp-surface-alternate: #eef1f6;
   --sp-surface-hero: linear-gradient(135deg, #5b6ee1 0%, #6f3fd7 100%);
   --sp-text-on-page-default: #141b24;
   --sp-text-on-page-muted: #4b576a;
   --sp-text-on-page-subtle: #657287;
   --sp-text-on-page-meta: #657287;
+  --sp-text-on-page-brand: #1f57db;
   --sp-text-on-surface-default: #141b24;
   --sp-text-on-surface-muted: #4b576a;
   --sp-text-on-surface-subtle: #657287;
   --sp-text-on-surface-meta: #657287;
+  --sp-text-on-surface-brand: #1f57db;
   --sp-component-card-text: #141b24;
-  --sp-component-card-text-muted: #657287;
+  --sp-component-card-text-muted: #4b576a;
   --sp-component-input-text: #141b24;
   --sp-component-input-placeholder: #657287;
   --sp-button-text-default: #141b24;
@@ -114,20 +117,8 @@
   --sp-color-focus-primary: #336df4;
   --sp-color-focus-error: #ef4444;
   --sp-color-focus-info: #0369a1;
-  --sp-color-white-0: #;
-  --sp-color-white-1: f;
-  --sp-color-white-2: f;
-  --sp-color-white-3: f;
-  --sp-color-white-4: f;
-  --sp-color-white-5: f;
-  --sp-color-white-6: f;
-  --sp-color-black-0: #;
-  --sp-color-black-1: 0;
-  --sp-color-black-2: 0;
-  --sp-color-black-3: 0;
-  --sp-color-black-4: 0;
-  --sp-color-black-5: 0;
-  --sp-color-black-6: 0;
+  --sp-color-white: #ffffff;
+  --sp-color-black: #000000;
   --sp-space-0: 0rem;
   --sp-space-4: 0.25rem;
   --sp-space-8: 0.5rem;
@@ -176,13 +167,25 @@
   --sp-font-md-weight: 500;
   --sp-font-lg-size: 1.25rem;
   --sp-font-lg-line-height: 2rem;
-  --sp-font-lg-weight: 500;
+  --sp-font-lg-weight: 600;
   --sp-font-xl-size: 1.5rem;
   --sp-font-xl-line-height: 2.125rem;
   --sp-font-xl-weight: 600;
   --sp-font-2xl-size: 1.875rem;
   --sp-font-2xl-line-height: 2.5rem;
-  --sp-font-2xl-weight: 600;
+  --sp-font-2xl-weight: 700;
+  --sp-font-3xl-size: 2.25rem;
+  --sp-font-3xl-line-height: 2.75rem;
+  --sp-font-3xl-weight: 700;
+  --sp-font-4xl-size: 3rem;
+  --sp-font-4xl-line-height: 3.5rem;
+  --sp-font-4xl-weight: 800;
+  --sp-font-5xl-size: 3.75rem;
+  --sp-font-5xl-line-height: 4.25rem;
+  --sp-font-5xl-weight: 800;
+  --sp-font-6xl-size: 4.5rem;
+  --sp-font-6xl-line-height: 5rem;
+  --sp-font-6xl-weight: 900;
   --sp-font-xs-letter-spacing: 0.02em;
   --sp-text-on-page-default: #141b24;
   --sp-text-on-page-muted: #4b576a;
@@ -254,6 +257,7 @@
   --sp-button-primary-text: #ffffff;
   --sp-button-primary-textdisabled: #8a96ad;
   --sp-button-primary-focusring: rgba(14, 165, 233, 0.4);
+  --sp-button-primary-focusvisible: rgba(14, 165, 233, 0.4);
   --sp-button-secondary-bg: #ffffff;
   --sp-button-secondary-bghover: #f7f8fb;
   --sp-button-secondary-bgactive: #eef1f6;
@@ -263,6 +267,7 @@
   --sp-button-secondary-border: #075985;
   --sp-button-secondary-borderdisabled: #d9dfeb;
   --sp-button-secondary-focusring: rgba(14, 165, 233, 0.4);
+  --sp-button-secondary-focusvisible: rgba(14, 165, 233, 0.4);
   --sp-button-ghost-bg: transparent;
   --sp-button-ghost-bghover: #f0f9ff;
   --sp-button-ghost-bgactive: #e0f2fe;
@@ -270,6 +275,7 @@
   --sp-button-ghost-text: #075985;
   --sp-button-ghost-textdisabled: #8a96ad;
   --sp-button-ghost-focusring: rgba(14, 165, 233, 0.4);
+  --sp-button-ghost-focusvisible: rgba(14, 165, 233, 0.4);
   --sp-button-danger-bg: #dc2626;
   --sp-button-danger-bghover: #b91c1c;
   --sp-button-danger-bgactive: #991b1b;
@@ -299,6 +305,7 @@
   --sp-button-accent-text: #ffffff;
   --sp-button-accent-textdisabled: #8a96ad;
   --sp-button-accent-focusring: rgba(133, 79, 247, 0.4);
+  --sp-button-accent-focusvisible: rgba(133, 79, 247, 0.4);
   --sp-form-default-bg: #ffffff;
   --sp-form-default-border: #b7c1d4;
   --sp-form-default-text: #141b24;
@@ -306,6 +313,8 @@
   --sp-form-hover-border: #0ea5e9;
   --sp-form-focus-border: #0ea5e9;
   --sp-form-focus-ring: #0ea5e9;
+  --sp-form-focusvisible-border: #0ea5e9;
+  --sp-form-focusvisible-ring: #0ea5e9;
   --sp-form-valid-border: #22c55e;
   --sp-form-valid-bg: #f0fdf4;
   --sp-form-valid-text: #15803d;
@@ -345,15 +354,18 @@
   --sp-surface-card: #222b38;
   --sp-surface-input: #374253;
   --sp-surface-overlay: #222b38;
-  --sp-surface-hero: linear-gradient(135deg, #401f75 0%, #5d28b8 100%);
+  --sp-surface-alternate: #222b38;
+  --sp-surface-hero: linear-gradient(135deg, #5d28b8 0%, #401f75 100%);
   --sp-text-on-page-default: #f7f8fb;
   --sp-text-on-page-muted: #b7c1d4;
   --sp-text-on-page-subtle: #8a96ad;
   --sp-text-on-page-meta: #8a96ad;
+  --sp-text-on-page-brand: #5a92ff;
   --sp-text-on-surface-default: #eef1f6;
   --sp-text-on-surface-muted: #b7c1d4;
   --sp-text-on-surface-subtle: #8a96ad;
   --sp-text-on-surface-meta: #8a96ad;
+  --sp-text-on-surface-brand: #5a92ff;
   --sp-component-card-text: #eef1f6;
   --sp-component-card-text-muted: #b7c1d4;
   --sp-component-input-text: #eef1f6;
@@ -372,7 +384,7 @@
   --sp-badge-danger-text: #fee2e2;
   --sp-icon-box-bg: #222b38;
   --sp-icon-box-border: #374253;
-  --sp-icon-box-icon-default: #7dd3fc;
+  --sp-icon-box-icon-default: #38bdf8;
   --sp-icon-box-icon-success: #4ade80;
   --sp-icon-box-icon-warning: #ffc21a;
   --sp-icon-box-icon-danger: #f87171;
@@ -385,13 +397,14 @@
     box-sizing: border-box;
   }
 
-  html,
-  body {
+  html {
     margin: 0;
     padding: 0;
   }
 
   body {
+    margin: 0;
+    padding: 0;
     min-height: 100vh;
     font-family: var(--sp-font-family-sans);
     font-size: var(--sp-font-md-size);
@@ -410,13 +423,13 @@
   }
 
   input,
-  button,
   textarea,
   select {
     font: inherit;
   }
 
   button {
+    font: inherit;
     border: none;
     background: none;
     padding: 0;
@@ -444,7 +457,7 @@
 }
 @layer components {
 
-  :root {
+  :where(:root) {
     /* structural border width */
     --sp-component-border-width: var(--sp-border-width-base);
 
@@ -500,8 +513,7 @@
 
     /* card roles */
     --sp-component-card-bg: var(--sp-surface-card);
-    --sp-component-card-text: var(--sp-text-on-surface-default);
-    --sp-component-card-text-muted: var(--sp-text-on-surface-muted);
+    /* --sp-component-card-text and --sp-component-card-text-muted are now provided directly by the token package */
     --sp-component-card-border: var(--sp-color-neutral-200);
     --sp-component-card-border-base: var(--sp-component-card-ghost-border);
     --sp-component-card-shadow: var(--sp-shadow-sm);
@@ -517,8 +529,8 @@
     /* input roles */
     --sp-component-input-role-border: var(--sp-form-default-border);
     --sp-component-input-role-bg: var(--sp-form-default-bg);
-    --sp-component-input-role-text: var(--sp-form-default-text);
-    --sp-component-input-role-placeholder: var(--sp-form-default-placeholder);
+    --sp-component-input-role-text: var(--sp-component-input-text);
+    --sp-component-input-role-placeholder: var(--sp-component-input-placeholder);
     --sp-component-input-role-border-hover: var(--sp-form-hover-border);
     --sp-component-input-role-border-focus: var(--sp-form-focus-border);
     --sp-component-input-role-ring: var(--sp-form-focus-ring);
@@ -579,7 +591,7 @@
     --sp-component-iconbox-success-bg: var(--sp-color-success-50);
     --sp-component-iconbox-success-text: var(--sp-icon-box-icon-success);
     --sp-component-iconbox-warning-bg: var(--sp-color-warning-50);
-    --sp-component-iconbox-warning-text: var(--sp-icon-box-icon-warning);
+    --sp-component-iconbox-warning-text: var(--sp-color-warning-800);
     --sp-component-iconbox-danger-bg: var(--sp-color-error-50);
     --sp-component-iconbox-danger-text: var(--sp-icon-box-icon-danger);
     --sp-component-iconbox-info-bg: var(--sp-color-info-50);
@@ -608,10 +620,13 @@
     --sp-component-rating-star-filled: var(--sp-color-warning-500);
     --sp-component-rating-star-empty: var(--sp-color-neutral-200);
     --sp-component-rating-text: var(--sp-color-neutral-500);
+    --sp-component-rating-size-sm: var(--sp-font-sm-size);
+    --sp-component-rating-size-md: var(--sp-font-md-size);
+    --sp-component-rating-size-lg: var(--sp-font-lg-size);
   }
 
   /* dark mode overrides mapped from Spectre token mode definitions */
-  :root[data-spectre-theme="dark"] {
+  :where(:root[data-spectre-theme="dark"]) {
     --sp-component-testimonial-bg: var(--sp-color-neutral-800);
     --sp-component-testimonial-border: var(--sp-color-neutral-700);
     --sp-component-testimonial-text: var(--sp-color-neutral-200);
@@ -627,23 +642,6 @@
     --sp-component-rating-star-filled: var(--sp-color-warning-400);
     --sp-component-rating-star-empty: var(--sp-color-neutral-700);
     --sp-component-rating-text: var(--sp-color-neutral-400);
-
-    --sp-component-badge-success-bg: var(--sp-color-success-800);
-    --sp-component-badge-success-text: var(--sp-color-success-100);
-    --sp-component-badge-warning-bg: var(--sp-color-warning-800);
-    --sp-component-badge-warning-text: var(--sp-color-warning-100);
-    --sp-component-badge-danger-bg: var(--sp-color-error-800);
-    --sp-component-badge-danger-text: var(--sp-color-error-100);
-    --sp-component-badge-neutral-bg: var(--sp-color-neutral-700);
-    --sp-component-badge-neutral-text: var(--sp-color-neutral-100);
-    --sp-component-badge-info-bg: var(--sp-color-info-900);
-    --sp-component-badge-info-text: var(--sp-color-info-100);
-
-    --sp-component-badge-success-bg-hover: var(--sp-color-success-700);
-    --sp-component-badge-warning-bg-hover: var(--sp-color-warning-800);
-    --sp-component-badge-danger-bg-hover: var(--sp-color-error-700);
-    --sp-component-badge-neutral-bg-hover: var(--sp-color-neutral-600);
-    --sp-component-badge-info-bg-hover: var(--sp-color-info-700);
   }
 
   /* BUTTONS -------------------------------------------------------------- */
@@ -657,7 +655,7 @@
     border: var(--sp-component-border-width) solid var(--sp-component-button-border-base);
     font-family: var(--sp-font-family-sans);
     font-size: var(--sp-font-md-size);
-    line-height: 1;
+    line-height: var(--sp-font-md-line-height);
     font-weight: var(--sp-font-md-weight);
     text-decoration: none;
     appearance: none;
@@ -683,6 +681,13 @@
     opacity: var(--sp-opacity-active);
   }
 
+  .sp-btn:focus-visible,
+  .sp-btn--focus,
+  .sp-btn.is-focus {
+    outline: none;
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
+  }
+
   .sp-btn--full {
     width: 100%;
   }
@@ -968,10 +973,17 @@
   }
 
   .sp-input:hover,
-  .sp-input--hover {
+  .sp-input--hover,
+  .sp-input.is-hover {
     border-color: var(--sp-component-input-role-border-hover);
   }
 
+  .sp-input:active,
+  .sp-input--active,
+  .sp-input.is-active {
+    opacity: var(--sp-opacity-active);
+  }
+
   .sp-input:focus,
   .sp-input--focus,
   .sp-input.is-focus {
@@ -999,6 +1011,7 @@
     background-color: var(--sp-component-input-role-bg-disabled);
     color: var(--sp-component-input-role-text-disabled);
     border-color: var(--sp-component-input-role-border-disabled);
+    box-shadow: none;
     cursor: not-allowed;
     pointer-events: none;
   }
@@ -1007,7 +1020,6 @@
     color: var(--sp-component-input-role-text-disabled);
   }
 
-  .sp-input--disabled,
   .sp-input--disabled:focus {
     box-shadow: none;
   }
@@ -1080,7 +1092,8 @@
     cursor: pointer;
     transition:
       transform var(--sp-duration-fast) var(--sp-easing-out),
-      box-shadow var(--sp-duration-fast) var(--sp-easing-out);
+      box-shadow var(--sp-duration-fast) var(--sp-easing-out),
+      opacity var(--sp-duration-fast) var(--sp-easing-out);
   }
 
   .sp-card--interactive:hover,
@@ -1094,6 +1107,13 @@
     box-shadow: var(--sp-component-card-shadow-elevated);
   }
 
+  .sp-card--interactive:active,
+  .sp-card--interactive.sp-card--active,
+  .sp-card--interactive.is-active {
+    opacity: var(--sp-opacity-active);
+    transform: translateY(0);
+  }
+
   /* BADGES --------------------------------------------------------------- */
 
   .sp-badge {
@@ -1135,7 +1155,8 @@
   }
 
   .sp-badge--primary.sp-badge--interactive:hover,
-  .sp-badge--primary.sp-badge--interactive.sp-badge--hover {
+  .sp-badge--primary.sp-badge--interactive.sp-badge--hover,
+  .sp-badge--primary.sp-badge--interactive.is-hover {
     background-color: var(--sp-component-badge-primary-bg-hover);
   }
 
@@ -1146,7 +1167,8 @@
   }
 
   .sp-badge--secondary.sp-badge--interactive:hover,
-  .sp-badge--secondary.sp-badge--interactive.sp-badge--hover {
+  .sp-badge--secondary.sp-badge--interactive.sp-badge--hover,
+  .sp-badge--secondary.sp-badge--interactive.is-hover {
     background-color: var(--sp-component-badge-secondary-bg-hover);
   }
 
@@ -1156,7 +1178,8 @@
   }
 
   .sp-badge--success.sp-badge--interactive:hover,
-  .sp-badge--success.sp-badge--interactive.sp-badge--hover {
+  .sp-badge--success.sp-badge--interactive.sp-badge--hover,
+  .sp-badge--success.sp-badge--interactive.is-hover {
     background-color: var(--sp-component-badge-success-bg-hover);
   }
 
@@ -1166,7 +1189,8 @@
   }
 
   .sp-badge--warning.sp-badge--interactive:hover,
-  .sp-badge--warning.sp-badge--interactive.sp-badge--hover {
+  .sp-badge--warning.sp-badge--interactive.sp-badge--hover,
+  .sp-badge--warning.sp-badge--interactive.is-hover {
     background-color: var(--sp-component-badge-warning-bg-hover);
   }
 
@@ -1176,7 +1200,8 @@
   }
 
   .sp-badge--danger.sp-badge--interactive:hover,
-  .sp-badge--danger.sp-badge--interactive.sp-badge--hover {
+  .sp-badge--danger.sp-badge--interactive.sp-badge--hover,
+  .sp-badge--danger.sp-badge--interactive.is-hover {
     background-color: var(--sp-component-badge-danger-bg-hover);
   }
 
@@ -1186,7 +1211,8 @@
   }
 
   .sp-badge--neutral.sp-badge--interactive:hover,
-  .sp-badge--neutral.sp-badge--interactive.sp-badge--hover {
+  .sp-badge--neutral.sp-badge--interactive.sp-badge--hover,
+  .sp-badge--neutral.sp-badge--interactive.is-hover {
     background-color: var(--sp-component-badge-neutral-bg-hover);
   }
 
@@ -1196,13 +1222,32 @@
   }
 
   .sp-badge--info.sp-badge--interactive:hover,
-  .sp-badge--info.sp-badge--interactive.sp-badge--hover {
+  .sp-badge--info.sp-badge--interactive.sp-badge--hover,
+  .sp-badge--info.sp-badge--interactive.is-hover {
     background-color: var(--sp-component-badge-info-bg-hover);
   }
 
   .sp-badge--interactive {
     cursor: pointer;
-    transition: background-color var(--sp-duration-fast) var(--sp-easing-out);
+    transition:
+      background-color var(--sp-duration-fast) var(--sp-easing-out),
+      color var(--sp-duration-fast) var(--sp-easing-out),
+      box-shadow var(--sp-duration-fast) var(--sp-easing-out),
+      border-color var(--sp-duration-fast) var(--sp-easing-out),
+      opacity var(--sp-duration-fast) var(--sp-easing-out);
+  }
+
+  .sp-badge--interactive:active,
+  .sp-badge--interactive.sp-badge--active,
+  .sp-badge--interactive.is-active {
+    opacity: var(--sp-opacity-active);
+  }
+
+  .sp-badge--interactive:focus-visible,
+  .sp-badge--interactive.sp-badge--focus,
+  .sp-badge--interactive.is-focus {
+    outline: none;
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
   }
 
   .sp-badge--disabled {
@@ -1226,7 +1271,12 @@
     background-color: var(--sp-component-iconbox-primary-bg);
     font-family: var(--sp-font-family-sans);
     font-weight: var(--sp-font-md-weight);
-    line-height: 0;
+    transition:
+      background-color var(--sp-duration-fast) var(--sp-easing-out),
+      color var(--sp-duration-fast) var(--sp-easing-out),
+      box-shadow var(--sp-duration-fast) var(--sp-easing-out),
+      border-color var(--sp-duration-fast) var(--sp-easing-out),
+      opacity var(--sp-duration-fast) var(--sp-easing-out);
   }
 
   /* Harden icon rendering:
@@ -1234,11 +1284,6 @@
      - force currentColor for common svg shapes
      - preserve stroke-only icons (fill="none")
   */
-  .sp-iconbox,
-  .sp-iconbox>i {
-    line-height: 0;
-  }
-
   .sp-iconbox>i {
     display: inline-flex;
     align-items: center;
@@ -1257,7 +1302,6 @@
   }
 
   /* default to inheriting via currentColor */
-  .sp-iconbox svg,
   .sp-iconbox svg path,
   .sp-iconbox svg circle,
   .sp-iconbox svg rect,
@@ -1295,6 +1339,10 @@
     font-size: var(--sp-font-lg-size);
   }
 
+  .sp-iconbox--pill {
+    border-radius: var(--sp-radius-pill);
+  }
+
   .sp-iconbox--primary {
     background-color: var(--sp-component-iconbox-primary-bg);
     color: var(--sp-component-iconbox-primary-text);
@@ -1320,9 +1368,35 @@
     color: var(--sp-component-iconbox-info-text);
   }
 
+  .sp-iconbox--interactive {
+    cursor: pointer;
+  }
+
+  .sp-iconbox--interactive:hover,
+  .sp-iconbox--interactive.sp-iconbox--hover,
+  .sp-iconbox--interactive.is-hover {
+    opacity: var(--sp-opacity-hover);
+  }
+
+  .sp-iconbox--interactive:active,
+  .sp-iconbox--interactive.sp-iconbox--active,
+  .sp-iconbox--interactive.is-active {
+    opacity: var(--sp-opacity-active);
+  }
+
+  .sp-iconbox--interactive:focus-visible,
+  .sp-iconbox--interactive.sp-iconbox--focus,
+  .sp-iconbox--interactive.is-focus {
+    outline: none;
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
+  }
+
+  .sp-iconbox:disabled,
+  .sp-iconbox[aria-disabled="true"],
   .sp-iconbox--disabled {
     opacity: var(--sp-opacity-disabled);
     pointer-events: none;
+    cursor: not-allowed;
   }
 
   .sp-iconbox--loading {
@@ -1352,6 +1426,37 @@
     pointer-events: none;
   }
 
+  .sp-testimonial--interactive {
+    cursor: pointer;
+    transition:
+      transform var(--sp-duration-fast) var(--sp-easing-out),
+      box-shadow var(--sp-duration-fast) var(--sp-easing-out),
+      opacity var(--sp-duration-fast) var(--sp-easing-out);
+  }
+
+  .sp-testimonial--interactive:hover,
+  .sp-testimonial--interactive:focus-within,
+  .sp-testimonial--interactive.sp-testimonial--hover,
+  .sp-testimonial--interactive.is-hover {
+    transform: translateY(calc(var(--sp-component-border-width) * -1));
+    box-shadow: var(--sp-shadow-lg);
+  }
+
+  .sp-testimonial--interactive:active,
+  .sp-testimonial--interactive.sp-testimonial--active,
+  .sp-testimonial--interactive.is-active {
+    opacity: var(--sp-opacity-active);
+    transform: translateY(0);
+  }
+
+  .sp-testimonial--interactive:focus-visible,
+  .sp-testimonial--interactive.sp-testimonial--focus,
+  .sp-testimonial--interactive.is-focus {
+    outline: none;
+    transform: translateY(calc(var(--sp-component-border-width) * -1));
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
+  }
+
   .sp-testimonial-quote {
     color: var(--sp-component-testimonial-text);
     font-size: var(--sp-font-lg-size);
@@ -1403,7 +1508,10 @@
     flex-direction: column;
     gap: var(--sp-space-24);
     position: relative;
-    transition: transform var(--sp-duration-fast) var(--sp-easing-out);
+    transition:
+      transform var(--sp-duration-fast) var(--sp-easing-out),
+      box-shadow var(--sp-duration-fast) var(--sp-easing-out),
+      opacity var(--sp-duration-fast) var(--sp-easing-out);
   }
 
   .sp-pricing-card--featured {
@@ -1424,6 +1532,49 @@
     pointer-events: none;
   }
 
+  .sp-pricing-card--interactive {
+    cursor: pointer;
+  }
+
+  .sp-pricing-card--interactive:hover,
+  .sp-pricing-card--interactive:focus-within,
+  .sp-pricing-card--interactive.sp-pricing-card--hover,
+  .sp-pricing-card--interactive.is-hover {
+    transform: translateY(calc(var(--sp-component-border-width) * -1));
+    box-shadow: var(--sp-shadow-lg);
+  }
+
+  .sp-pricing-card--featured.sp-pricing-card--interactive:hover,
+  .sp-pricing-card--featured.sp-pricing-card--interactive:focus-visible,
+  .sp-pricing-card--featured.sp-pricing-card--interactive:focus-within,
+  .sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--hover,
+  .sp-pricing-card--featured.sp-pricing-card--interactive.is-hover,
+  .sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--focus,
+  .sp-pricing-card--featured.sp-pricing-card--interactive.is-focus {
+    transform: scale(1.05) translateY(calc(var(--sp-component-border-width) * -1));
+  }
+
+  .sp-pricing-card--interactive:active,
+  .sp-pricing-card--interactive.sp-pricing-card--active,
+  .sp-pricing-card--interactive.is-active {
+    opacity: var(--sp-opacity-active);
+    transform: translateY(0);
+  }
+
+  .sp-pricing-card--featured.sp-pricing-card--interactive:active,
+  .sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--active,
+  .sp-pricing-card--featured.sp-pricing-card--interactive.is-active {
+    transform: scale(1.05) translateY(0);
+  }
+
+  .sp-pricing-card--interactive:focus-visible,
+  .sp-pricing-card--interactive.sp-pricing-card--focus,
+  .sp-pricing-card--interactive.is-focus {
+    outline: none;
+    transform: translateY(calc(var(--sp-component-border-width) * -1));
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
+  }
+
   .sp-pricing-card-badge {
     position: absolute;
     top: var(--sp-space-16);
@@ -1468,11 +1619,31 @@
     display: inline-flex;
     align-items: center;
     gap: var(--sp-space-8);
+    font-size: var(--sp-component-rating-size-md);
+    border-radius: var(--sp-radius-md);
+    transition:
+      opacity var(--sp-duration-fast) var(--sp-easing-out),
+      box-shadow var(--sp-duration-fast) var(--sp-easing-out);
+  }
+
+  .sp-rating--sm {
+    font-size: var(--sp-component-rating-size-sm);
+  }
+
+  .sp-rating--md {
+    font-size: var(--sp-component-rating-size-md);
   }
 
+  .sp-rating--lg {
+    font-size: var(--sp-component-rating-size-lg);
+  }
+
+  .sp-rating:disabled,
+  .sp-rating[aria-disabled="true"],
   .sp-rating--disabled {
     opacity: var(--sp-opacity-disabled);
     pointer-events: none;
+    cursor: not-allowed;
   }
 
   .sp-rating--loading {
@@ -1480,6 +1651,29 @@
     pointer-events: none;
   }
 
+  .sp-rating--interactive {
+    cursor: pointer;
+  }
+
+  .sp-rating--interactive:hover,
+  .sp-rating--interactive.sp-rating--hover,
+  .sp-rating--interactive.is-hover {
+    opacity: var(--sp-opacity-hover);
+  }
+
+  .sp-rating--interactive:active,
+  .sp-rating--interactive.sp-rating--active,
+  .sp-rating--interactive.is-active {
+    opacity: var(--sp-opacity-active);
+  }
+
+  .sp-rating--interactive:focus-visible,
+  .sp-rating--interactive.sp-rating--focus,
+  .sp-rating--interactive.is-focus {
+    outline: none;
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
+  }
+
   .sp-rating-stars {
     display: flex;
     gap: var(--sp-space-4);