@phcdevworks/spectre-ui 1.5.0 → 1.7.0

package/dist/components.css

@@ -2,7 +2,7 @@
   --sp-surface-page: #f7f8fb;
   --sp-surface-card: #ffffff;
   --sp-surface-input: #ffffff;
-  --sp-surface-overlay: rgba(20, 27, 36, 0.6);
+  --sp-surface-overlay: rgba(0, 0, 0, 0.6);
   --sp-surface-alternate: #eef1f6;
   --sp-surface-hero: linear-gradient(135deg, #5b6ee1 0%, #6f3fd7 100%);
   --sp-text-on-page-default: #141b24;
@@ -144,10 +144,14 @@
   --sp-layout-container-max-width: 72rem;
   --sp-border-width-base: 1px;
   --sp-border-width-thick: 2px;
+  --sp-border-style-none: none;
+  --sp-border-style-solid: solid;
   --sp-radius-none: 0;
   --sp-radius-sm: 2px;
   --sp-radius-md: 4px;
   --sp-radius-lg: 8px;
+  --sp-radius-xl: 12px;
+  --sp-radius-2xl: 16px;
   --sp-radius-pill: 999px;
   --sp-font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   --sp-font-family-serif: 'Times New Roman', Times, serif;
@@ -183,34 +187,21 @@
   --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;
-  --sp-text-on-page-subtle: #657287;
-  --sp-text-on-page-meta: #657287;
-  --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-badge-neutral-bg: #eef1f6;
-  --sp-badge-neutral-text: #374253;
-  --sp-badge-info-bg: #e0f2fe;
-  --sp-badge-info-text: #075985;
-  --sp-badge-success-bg: #dcfce7;
-  --sp-badge-success-text: #166534;
-  --sp-badge-warning-bg: #fff1c2;
-  --sp-badge-warning-text: #8f5200;
-  --sp-badge-danger-bg: #fee2e2;
-  --sp-badge-danger-text: #991b1b;
-  --sp-icon-box-bg: #ffffff;
-  --sp-icon-box-border: #d9dfeb;
-  --sp-icon-box-icon-default: #0369a1;
-  --sp-icon-box-icon-success: #16a34a;
-  --sp-icon-box-icon-warning: #d48806;
-  --sp-icon-box-icon-danger: #dc2626;
+  --sp-font-sm-letter-spacing: 0em;
+  --sp-font-md-letter-spacing: 0em;
+  --sp-font-lg-letter-spacing: 0em;
+  --sp-font-xl-letter-spacing: 0em;
+  --sp-font-2xl-letter-spacing: 0em;
+  --sp-font-3xl-letter-spacing: 0em;
+  --sp-font-4xl-letter-spacing: 0em;
+  --sp-font-5xl-letter-spacing: 0em;
+  --sp-font-6xl-letter-spacing: 0em;
   --sp-shadow-none: none;
   --sp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   --sp-shadow-md: 0 2px 6px -1px rgba(0, 0, 0, 0.08);
   --sp-shadow-lg: 0 6px 16px -4px rgba(0, 0, 0, 0.12);
+  --sp-shadow-xl: 0 12px 24px -6px rgba(0, 0, 0, 0.15);
+  --sp-shadow-2xl: 0 20px 48px -12px rgba(0, 0, 0, 0.20);
   --sp-breakpoint-sm: 640px;
   --sp-breakpoint-md: 768px;
   --sp-breakpoint-lg: 1024px;
@@ -224,20 +215,26 @@
   --sp-z-index-modal: 1400;
   --sp-z-index-popover: 1500;
   --sp-z-index-tooltip: 1600;
+  --sp-z-index-toast: 1700;
   --sp-duration-instant: 75ms;
   --sp-duration-fast: 150ms;
   --sp-duration-base: 200ms;
+  --sp-duration-relaxed: 250ms;
   --sp-duration-moderate: 300ms;
   --sp-duration-slow: 500ms;
   --sp-duration-slower: 700ms;
+  --sp-duration-long: 1000ms;
+  --sp-duration-slowest: 1200ms;
   --sp-easing-linear: linear;
   --sp-easing-in: cubic-bezier(0.4, 0, 1, 1);
   --sp-easing-out: cubic-bezier(0, 0, 0.2, 1);
   --sp-easing-inout: cubic-bezier(0.4, 0, 0.2, 1);
   --sp-easing-spring: cubic-bezier(0.4, 0, 0.2, 1);
+  --sp-easing-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
   --sp-opacity-disabled: 0.38;
   --sp-opacity-hover: 0.92;
   --sp-opacity-active: 0.84;
+  --sp-opacity-loading: 0.6;
   --sp-opacity-focus: 1;
   --sp-opacity-overlay: 0.5;
   --sp-opacity-tooltip: 0.95;
@@ -369,7 +366,7 @@
   --sp-button-text-default: #eef1f6;
   --sp-button-text-on-primary: #ffffff;
   --sp-badge-neutral-bg: #374253;
-  --sp-badge-neutral-text: #eef1f6;
+  --sp-badge-neutral-text: #f7f8fb;
   --sp-badge-info-bg: #0c4a6e;
   --sp-badge-info-text: #e0f2fe;
   --sp-badge-success-bg: #166534;
@@ -498,6 +495,8 @@
     --sp-component-badge-ghost-text: var(--sp-button-ghost-text);
     --sp-component-badge-accent-bg: var(--sp-button-accent-bg);
     --sp-component-badge-accent-text: var(--sp-button-accent-text);
+    --sp-component-badge-cta-bg: var(--sp-button-cta-bg);
+    --sp-component-badge-cta-text: var(--sp-button-cta-text);
 
     /* badge hover states derived from Spectre token semantics */
     --sp-component-badge-primary-bg-hover: var(--sp-button-primary-bghover);
@@ -509,6 +508,7 @@
     --sp-component-badge-info-bg-hover: var(--sp-color-info-200);
     --sp-component-badge-ghost-bg-hover: var(--sp-button-ghost-bghover);
     --sp-component-badge-accent-bg-hover: var(--sp-button-accent-bghover);
+    --sp-component-badge-cta-bg-hover: var(--sp-button-cta-bghover);
 
     --sp-component-badge-padding-x-sm: var(--sp-space-8);
     --sp-component-badge-padding-x-md: var(--sp-space-12);
@@ -541,15 +541,27 @@
     --sp-component-iconbox-ghost-text: var(--sp-button-ghost-text);
     --sp-component-iconbox-accent-bg: var(--sp-button-accent-bg);
     --sp-component-iconbox-accent-text: var(--sp-button-accent-text);
+    --sp-component-iconbox-cta-bg: var(--sp-button-cta-bg);
+    --sp-component-iconbox-cta-text: var(--sp-button-cta-text);
 
     /* testimonial roles */
     --sp-component-testimonial-bg: var(--sp-surface-card);
     --sp-component-testimonial-bg-hover: var(--sp-color-neutral-50);
     --sp-component-testimonial-border: var(--sp-color-neutral-200);
+    --sp-component-testimonial-border-base: var(--sp-component-testimonial-ghost-border);
     --sp-component-testimonial-text: var(--sp-color-neutral-700);
     --sp-component-testimonial-author-name: var(--sp-color-neutral-900);
     --sp-component-testimonial-author-title: var(--sp-color-neutral-600);
     --sp-component-testimonial-quote-mark: var(--sp-color-neutral-600);
+    --sp-component-testimonial-shadow: var(--sp-shadow-none);
+    --sp-component-testimonial-shadow-elevated: var(--sp-shadow-lg);
+    --sp-component-testimonial-shadow-flat: var(--sp-shadow-none);
+    --sp-component-testimonial-shadow-outline: var(--sp-shadow-none);
+    --sp-component-testimonial-shadow-ghost: var(--sp-shadow-none);
+    --sp-component-testimonial-outline-bg: var(--sp-component-testimonial-bg);
+    --sp-component-testimonial-outline-border: var(--sp-component-testimonial-border);
+    --sp-component-testimonial-ghost-bg: var(--sp-button-ghost-bg);
+    --sp-component-testimonial-ghost-border: var(--sp-component-testimonial-ghost-bg);
 
     /* pricing card roles */
     --sp-component-pricing-card-bg: var(--sp-surface-card);
@@ -570,13 +582,97 @@
     --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);
+
+    /* alert roles */
+    --sp-component-alert-radius: var(--sp-radius-lg);
+    --sp-component-alert-padding-x: var(--sp-space-16);
+    --sp-component-alert-padding-y-sm: var(--sp-space-8);
+    --sp-component-alert-padding-y-md: var(--sp-space-12);
+    --sp-component-alert-padding-y-lg: var(--sp-space-16);
+    --sp-component-alert-info-bg: var(--sp-badge-info-bg);
+    --sp-component-alert-info-text: var(--sp-badge-info-text);
+    --sp-component-alert-info-border: var(--sp-color-info-200);
+    --sp-component-alert-success-bg: var(--sp-badge-success-bg);
+    --sp-component-alert-success-text: var(--sp-badge-success-text);
+    --sp-component-alert-success-border: var(--sp-color-success-200);
+    --sp-component-alert-warning-bg: var(--sp-badge-warning-bg);
+    --sp-component-alert-warning-text: var(--sp-badge-warning-text);
+    --sp-component-alert-warning-border: var(--sp-color-warning-200);
+    --sp-component-alert-danger-bg: var(--sp-badge-danger-bg);
+    --sp-component-alert-danger-text: var(--sp-badge-danger-text);
+    --sp-component-alert-danger-border: var(--sp-color-error-200);
+    --sp-component-alert-neutral-bg: var(--sp-badge-neutral-bg);
+    --sp-component-alert-neutral-text: var(--sp-badge-neutral-text);
+    --sp-component-alert-neutral-border: var(--sp-color-neutral-200);
+
+    /* avatar roles */
+    --sp-component-avatar-size-xs: var(--sp-space-24);
+    --sp-component-avatar-size-sm: var(--sp-space-32);
+    --sp-component-avatar-size-md: var(--sp-space-48);
+    --sp-component-avatar-size-lg: var(--sp-space-64);
+    --sp-component-avatar-size-xl: var(--sp-space-80);
+    --sp-component-avatar-bg: var(--sp-surface-alternate);
+    --sp-component-avatar-text: var(--sp-text-on-surface-default);
+    --sp-component-avatar-radius-circle: var(--sp-radius-pill);
+    --sp-component-avatar-radius-square: var(--sp-radius-lg);
+    --sp-component-avatar-font: var(--sp-font-family-sans);
+    --sp-component-avatar-weight: var(--sp-font-md-weight);
+
+    /* tag roles */
+    --sp-component-tag-radius: var(--sp-radius-pill);
+    --sp-component-tag-font: var(--sp-font-family-sans);
+    --sp-component-tag-weight: var(--sp-font-sm-weight);
+    --sp-component-tag-padding-x-sm: var(--sp-space-8);
+    --sp-component-tag-padding-x-md: var(--sp-space-12);
+    --sp-component-tag-padding-x-lg: var(--sp-space-16);
+    --sp-component-tag-default-bg: var(--sp-badge-neutral-bg);
+    --sp-component-tag-default-text: var(--sp-badge-neutral-text);
+    --sp-component-tag-primary-bg: var(--sp-button-primary-bg);
+    --sp-component-tag-primary-text: var(--sp-button-text-on-primary);
+    --sp-component-tag-secondary-bg: var(--sp-button-secondary-bg);
+    --sp-component-tag-secondary-text: var(--sp-button-secondary-text);
+    --sp-component-tag-success-bg: var(--sp-badge-success-bg);
+    --sp-component-tag-success-text: var(--sp-badge-success-text);
+    --sp-component-tag-warning-bg: var(--sp-badge-warning-bg);
+    --sp-component-tag-warning-text: var(--sp-badge-warning-text);
+    --sp-component-tag-danger-bg: var(--sp-badge-danger-bg);
+    --sp-component-tag-danger-text: var(--sp-badge-danger-text);
+    --sp-component-tag-info-bg: var(--sp-badge-info-bg);
+    --sp-component-tag-info-text: var(--sp-badge-info-text);
+    --sp-component-tag-neutral-bg: var(--sp-badge-neutral-bg);
+    --sp-component-tag-neutral-text: var(--sp-badge-neutral-text);
+    --sp-component-tag-accent-bg: var(--sp-button-accent-bg);
+    --sp-component-tag-accent-text: var(--sp-button-accent-text);
+    --sp-component-tag-cta-bg: var(--sp-button-cta-bg);
+    --sp-component-tag-cta-text: var(--sp-button-cta-text);
+    --sp-component-tag-outline-bg: transparent;
+    --sp-component-tag-outline-text: var(--sp-badge-neutral-text);
+    --sp-component-tag-outline-border: var(--sp-button-secondary-border);
+    --sp-component-tag-ghost-bg: var(--sp-button-ghost-bg);
+    --sp-component-tag-ghost-text: var(--sp-button-ghost-text);
+    --sp-component-tag-selected-bg: var(--sp-button-primary-bg);
+    --sp-component-tag-selected-text: var(--sp-button-primary-text);
+    --sp-component-tag-gap: var(--sp-space-4);
+    --sp-component-tag-padding-y-sm: var(--sp-space-4);
+    --sp-component-tag-padding-y-md: var(--sp-space-4);
+    --sp-component-tag-padding-y-lg: var(--sp-space-4);
+
+    /* spinner roles */
+    --sp-component-spinner-size-sm: var(--sp-space-16);
+    --sp-component-spinner-size-md: var(--sp-space-24);
+    --sp-component-spinner-size-lg: var(--sp-space-32);
+    --sp-component-spinner-border-width: var(--sp-border-width-thick);
+    --sp-component-spinner-track-color: var(--sp-color-neutral-200);
+    --sp-component-spinner-arc-color: var(--sp-button-primary-bg);
+    --sp-component-spinner-duration: var(--sp-duration-long);
+    --sp-component-spinner-easing: var(--sp-easing-linear);
   }
 
   /* dark mode overrides mapped from Spectre token mode definitions */
   :where(:root[data-spectre-theme="dark"]) {
     /* badge hover states remain manual as they are not currently exported as tokens */
     --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-warning-bg-hover: var(--sp-color-warning-700);
     --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);
@@ -609,6 +705,25 @@
     --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-alert-info-bg: var(--sp-color-info-800);
+    --sp-component-alert-info-text: var(--sp-color-info-100);
+    --sp-component-alert-info-border: var(--sp-color-info-700);
+    --sp-component-alert-success-bg: var(--sp-color-success-800);
+    --sp-component-alert-success-text: var(--sp-color-success-100);
+    --sp-component-alert-success-border: var(--sp-color-success-700);
+    --sp-component-alert-warning-bg: var(--sp-color-warning-800);
+    --sp-component-alert-warning-text: var(--sp-color-warning-100);
+    --sp-component-alert-warning-border: var(--sp-color-warning-700);
+    --sp-component-alert-danger-bg: var(--sp-color-error-800);
+    --sp-component-alert-danger-text: var(--sp-color-error-100);
+    --sp-component-alert-danger-border: var(--sp-color-error-700);
+    --sp-component-alert-neutral-bg: var(--sp-color-neutral-700);
+    --sp-component-alert-neutral-text: var(--sp-color-neutral-100);
+    --sp-component-alert-neutral-border: var(--sp-color-neutral-600);
+
+    --sp-component-spinner-track-color: var(--sp-color-neutral-700);
+    --sp-component-spinner-arc-color: var(--sp-color-brand-400);
   }
 
   /* BUTTONS -------------------------------------------------------------- */
@@ -643,7 +758,8 @@
     pointer-events: none;
   }
 
-  .sp-btn--loading {
+  .sp-btn--loading,
+  .sp-btn[aria-busy="true"] {
     pointer-events: none;
     opacity: var(--sp-opacity-active);
   }
@@ -710,6 +826,7 @@
   }
 
   .sp-btn--primary.sp-btn--disabled,
+  .sp-btn--primary[aria-disabled="true"],
   .sp-btn--primary:disabled {
     background-color: var(--sp-component-button-primary-bg-disabled);
     color: var(--sp-component-button-primary-text-disabled);
@@ -736,6 +853,7 @@
   }
 
   .sp-btn--secondary.sp-btn--disabled,
+  .sp-btn--secondary[aria-disabled="true"],
   .sp-btn--secondary:disabled {
     background-color: var(--sp-component-button-secondary-bg-disabled);
     color: var(--sp-component-button-secondary-text-disabled);
@@ -761,6 +879,7 @@
   }
 
   .sp-btn--ghost.sp-btn--disabled,
+  .sp-btn--ghost[aria-disabled="true"],
   .sp-btn--ghost:disabled {
     color: var(--sp-component-button-ghost-text-disabled);
     background-color: var(--sp-component-button-ghost-bg-disabled);
@@ -785,6 +904,7 @@
   }
 
   .sp-btn--danger.sp-btn--disabled,
+  .sp-btn--danger[aria-disabled="true"],
   .sp-btn--danger:disabled {
     background-color: var(--sp-component-button-danger-bg-disabled);
     color: var(--sp-component-button-danger-text-disabled);
@@ -809,6 +929,7 @@
   }
 
   .sp-btn--success.sp-btn--disabled,
+  .sp-btn--success[aria-disabled="true"],
   .sp-btn--success:disabled {
     background-color: var(--sp-component-button-success-bg-disabled);
     color: var(--sp-component-button-success-text-disabled);
@@ -834,6 +955,7 @@
   }
 
   .sp-btn--cta.sp-btn--disabled,
+  .sp-btn--cta[aria-disabled="true"],
   .sp-btn--cta:disabled {
     background-color: var(--sp-component-button-cta-bg-disabled);
     color: var(--sp-component-button-cta-text-disabled);
@@ -859,6 +981,7 @@
   }
 
   .sp-btn--accent.sp-btn--disabled,
+  .sp-btn--accent[aria-disabled="true"],
   .sp-btn--accent:disabled {
     background-color: var(--sp-component-button-accent-bg-disabled);
     color: var(--sp-component-button-accent-text-disabled);
@@ -879,12 +1002,20 @@
     line-height: var(--sp-font-sm-line-height);
   }
 
+  .sp-label--disabled {
+    color: var(--sp-component-input-role-text-disabled);
+  }
+
   .sp-helper-text {
     color: var(--sp-text-on-surface-meta);
     font-size: var(--sp-font-xs-size);
     line-height: var(--sp-font-xs-line-height);
   }
 
+  .sp-helper-text--disabled {
+    opacity: var(--sp-opacity-disabled);
+  }
+
   .sp-error-message {
     color: var(--sp-component-input-role-text-error);
     font-size: var(--sp-font-xs-size);
@@ -1046,11 +1177,15 @@
     height: 100%;
   }
 
+  .sp-card:disabled,
+  .sp-card[aria-disabled="true"],
   .sp-card--disabled {
     opacity: var(--sp-opacity-disabled);
     pointer-events: none;
+    cursor: not-allowed;
   }
 
+  .sp-card[aria-busy="true"],
   .sp-card--loading {
     opacity: var(--sp-opacity-active);
     pointer-events: none;
@@ -1065,14 +1200,20 @@
   }
 
   .sp-card--interactive:hover,
-  .sp-card--interactive:focus-visible,
   .sp-card--interactive:focus-within,
   .sp-card--interactive.sp-card--hover,
-  .sp-card--interactive.is-hover,
+  .sp-card--interactive.is-hover {
+    outline: none;
+    transform: translateY(calc(var(--sp-component-border-width) * -1));
+    box-shadow: var(--sp-component-card-shadow-elevated);
+  }
+
+  .sp-card--interactive:focus-visible,
   .sp-card--interactive.sp-card--focus,
   .sp-card--interactive.is-focus {
+    outline: none;
     transform: translateY(calc(var(--sp-component-border-width) * -1));
-    box-shadow: var(--sp-component-card-shadow-elevated);
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
   }
 
   .sp-card--interactive:active,
@@ -1127,8 +1268,8 @@
   }
 
   .sp-badge--primary.sp-badge--interactive:hover,
-  .sp-badge--primary.sp-badge--interactive.sp-badge--hover,
-  .sp-badge--primary.sp-badge--interactive.is-hover {
+  .sp-badge--primary.sp-badge--hover,
+  .sp-badge--primary.is-hover {
     background-color: var(--sp-component-badge-primary-bg-hover);
   }
 
@@ -1139,8 +1280,8 @@
   }
 
   .sp-badge--secondary.sp-badge--interactive:hover,
-  .sp-badge--secondary.sp-badge--interactive.sp-badge--hover,
-  .sp-badge--secondary.sp-badge--interactive.is-hover {
+  .sp-badge--secondary.sp-badge--hover,
+  .sp-badge--secondary.is-hover {
     background-color: var(--sp-component-badge-secondary-bg-hover);
   }
 
@@ -1150,8 +1291,8 @@
   }
 
   .sp-badge--success.sp-badge--interactive:hover,
-  .sp-badge--success.sp-badge--interactive.sp-badge--hover,
-  .sp-badge--success.sp-badge--interactive.is-hover {
+  .sp-badge--success.sp-badge--hover,
+  .sp-badge--success.is-hover {
     background-color: var(--sp-component-badge-success-bg-hover);
   }
 
@@ -1161,8 +1302,8 @@
   }
 
   .sp-badge--warning.sp-badge--interactive:hover,
-  .sp-badge--warning.sp-badge--interactive.sp-badge--hover,
-  .sp-badge--warning.sp-badge--interactive.is-hover {
+  .sp-badge--warning.sp-badge--hover,
+  .sp-badge--warning.is-hover {
     background-color: var(--sp-component-badge-warning-bg-hover);
   }
 
@@ -1172,8 +1313,8 @@
   }
 
   .sp-badge--danger.sp-badge--interactive:hover,
-  .sp-badge--danger.sp-badge--interactive.sp-badge--hover,
-  .sp-badge--danger.sp-badge--interactive.is-hover {
+  .sp-badge--danger.sp-badge--hover,
+  .sp-badge--danger.is-hover {
     background-color: var(--sp-component-badge-danger-bg-hover);
   }
 
@@ -1183,8 +1324,8 @@
   }
 
   .sp-badge--neutral.sp-badge--interactive:hover,
-  .sp-badge--neutral.sp-badge--interactive.sp-badge--hover,
-  .sp-badge--neutral.sp-badge--interactive.is-hover {
+  .sp-badge--neutral.sp-badge--hover,
+  .sp-badge--neutral.is-hover {
     background-color: var(--sp-component-badge-neutral-bg-hover);
   }
 
@@ -1194,8 +1335,8 @@
   }
 
   .sp-badge--info.sp-badge--interactive:hover,
-  .sp-badge--info.sp-badge--interactive.sp-badge--hover,
-  .sp-badge--info.sp-badge--interactive.is-hover {
+  .sp-badge--info.sp-badge--hover,
+  .sp-badge--info.is-hover {
     background-color: var(--sp-component-badge-info-bg-hover);
   }
 
@@ -1205,8 +1346,8 @@
   }
 
   .sp-badge--ghost.sp-badge--interactive:hover,
-  .sp-badge--ghost.sp-badge--interactive.sp-badge--hover,
-  .sp-badge--ghost.sp-badge--interactive.is-hover {
+  .sp-badge--ghost.sp-badge--hover,
+  .sp-badge--ghost.is-hover {
     background-color: var(--sp-component-badge-ghost-bg-hover);
   }
 
@@ -1216,11 +1357,22 @@
   }
 
   .sp-badge--accent.sp-badge--interactive:hover,
-  .sp-badge--accent.sp-badge--interactive.sp-badge--hover,
-  .sp-badge--accent.sp-badge--interactive.is-hover {
+  .sp-badge--accent.sp-badge--hover,
+  .sp-badge--accent.is-hover {
     background-color: var(--sp-component-badge-accent-bg-hover);
   }
 
+  .sp-badge--cta {
+    background-color: var(--sp-component-badge-cta-bg);
+    color: var(--sp-component-badge-cta-text);
+  }
+
+  .sp-badge--cta.sp-badge--interactive:hover,
+  .sp-badge--cta.sp-badge--hover,
+  .sp-badge--cta.is-hover {
+    background-color: var(--sp-component-badge-cta-bg-hover);
+  }
+
   .sp-badge--interactive {
     cursor: pointer;
     transition:
@@ -1232,24 +1384,27 @@
   }
 
   .sp-badge--interactive:active,
-  .sp-badge--interactive.sp-badge--active,
-  .sp-badge--interactive.is-active {
+  .sp-badge--active,
+  .sp-badge.is-active {
     opacity: var(--sp-opacity-active);
   }
 
   .sp-badge--interactive:focus-visible,
-  .sp-badge--interactive.sp-badge--focus,
-  .sp-badge--interactive.is-focus {
+  .sp-badge--focus,
+  .sp-badge.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,
+  .sp-badge[aria-disabled="true"],
   .sp-badge--disabled {
     opacity: var(--sp-opacity-disabled);
     pointer-events: none;
   }
 
-  .sp-badge--loading {
+  .sp-badge--loading,
+  .sp-badge[aria-busy="true"] {
     opacity: var(--sp-opacity-active);
     pointer-events: none;
   }
@@ -1334,6 +1489,10 @@
     font-size: var(--sp-font-lg-size);
   }
 
+  .sp-iconbox--full {
+    width: 100%;
+  }
+
   .sp-iconbox--pill {
     border-radius: var(--sp-radius-pill);
   }
@@ -1384,25 +1543,30 @@
     color: var(--sp-component-iconbox-accent-text);
   }
 
+  .sp-iconbox--cta {
+    background-color: var(--sp-component-iconbox-cta-bg);
+    color: var(--sp-component-iconbox-cta-text);
+  }
+
   .sp-iconbox--interactive {
     cursor: pointer;
   }
 
   .sp-iconbox--interactive:hover,
-  .sp-iconbox--interactive.sp-iconbox--hover,
-  .sp-iconbox--interactive.is-hover {
+  .sp-iconbox--hover,
+  .sp-iconbox.is-hover {
     opacity: var(--sp-opacity-hover);
   }
 
   .sp-iconbox--interactive:active,
-  .sp-iconbox--interactive.sp-iconbox--active,
-  .sp-iconbox--interactive.is-active {
+  .sp-iconbox--active,
+  .sp-iconbox.is-active {
     opacity: var(--sp-opacity-active);
   }
 
   .sp-iconbox--interactive:focus-visible,
-  .sp-iconbox--interactive.sp-iconbox--focus,
-  .sp-iconbox--interactive.is-focus {
+  .sp-iconbox--focus,
+  .sp-iconbox.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);
   }
@@ -1415,7 +1579,8 @@
     cursor: not-allowed;
   }
 
-  .sp-iconbox--loading {
+  .sp-iconbox--loading,
+  .sp-iconbox[aria-busy="true"] {
     opacity: var(--sp-opacity-active);
     pointer-events: none;
   }
@@ -1424,20 +1589,46 @@
 
   .sp-testimonial {
     background-color: var(--sp-component-testimonial-bg);
-    border: var(--sp-component-border-width) solid var(--sp-component-testimonial-border);
+    border: var(--sp-component-border-width) solid var(--sp-component-testimonial-border-base);
     border-radius: var(--sp-radius-lg);
     padding: var(--sp-space-32);
     display: flex;
     flex-direction: column;
     gap: var(--sp-space-24);
+    box-shadow: var(--sp-component-testimonial-shadow);
+  }
+
+  .sp-testimonial--elevated {
+    box-shadow: var(--sp-component-testimonial-shadow-elevated);
+  }
+
+  .sp-testimonial--flat {
+    box-shadow: var(--sp-component-testimonial-shadow-flat);
+    border-color: var(--sp-component-testimonial-border);
+  }
+
+  .sp-testimonial--outline {
+    background-color: var(--sp-component-testimonial-outline-bg);
+    border-color: var(--sp-component-testimonial-outline-border);
+    box-shadow: var(--sp-component-testimonial-shadow-outline);
+  }
+
+  .sp-testimonial--ghost {
+    background-color: var(--sp-component-testimonial-ghost-bg);
+    border-color: var(--sp-component-testimonial-ghost-border);
+    box-shadow: var(--sp-component-testimonial-shadow-ghost);
   }
 
+  .sp-testimonial:disabled,
+  .sp-testimonial[aria-disabled="true"],
   .sp-testimonial--disabled {
     opacity: var(--sp-opacity-disabled);
     pointer-events: none;
+    cursor: not-allowed;
   }
 
-  .sp-testimonial--loading {
+  .sp-testimonial--loading,
+  .sp-testimonial[aria-busy="true"] {
     opacity: var(--sp-opacity-active);
     pointer-events: none;
   }
@@ -1459,7 +1650,7 @@
   .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);
+    box-shadow: var(--sp-component-testimonial-shadow-elevated);
     background-color: var(--sp-component-testimonial-bg-hover);
   }
 
@@ -1543,12 +1734,15 @@
     border: none;
   }
 
+  .sp-pricing-card:disabled,
+  .sp-pricing-card[aria-disabled="true"],
   .sp-pricing-card--disabled {
     opacity: var(--sp-opacity-disabled);
     pointer-events: none;
   }
 
-  .sp-pricing-card--loading {
+  .sp-pricing-card--loading,
+  .sp-pricing-card[aria-busy="true"] {
     opacity: var(--sp-opacity-active);
     pointer-events: none;
   }
@@ -1564,7 +1758,7 @@
   .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 {
+  .sp-pricing-card.is-hover {
     transform: translateY(calc(var(--sp-component-border-width) * -1));
     box-shadow: var(--sp-shadow-lg);
     background-color: var(--sp-component-pricing-card-bg-hover);
@@ -1574,28 +1768,28 @@
   .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.is-hover,
   .sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--focus,
-  .sp-pricing-card--featured.sp-pricing-card--interactive.is-focus {
+  .sp-pricing-card--featured.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 {
+  .sp-pricing-card.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 {
+  .sp-pricing-card--featured.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 {
+  .sp-pricing-card.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);
@@ -1647,9 +1841,11 @@
     gap: var(--sp-space-8);
     font-size: var(--sp-component-rating-size-md);
     border-radius: var(--sp-radius-md);
+    border: var(--sp-component-border-width) solid transparent;
     transition:
       opacity 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),
+      border-color var(--sp-duration-fast) var(--sp-easing-out);
   }
 
   .sp-rating--sm {
@@ -1680,7 +1876,8 @@
     cursor: not-allowed;
   }
 
-  .sp-rating--loading {
+  .sp-rating--loading,
+  .sp-rating[aria-busy="true"] {
     opacity: var(--sp-opacity-active);
     pointer-events: none;
   }
@@ -1690,20 +1887,20 @@
   }
 
   .sp-rating--interactive:hover,
-  .sp-rating--interactive.sp-rating--hover,
-  .sp-rating--interactive.is-hover {
+  .sp-rating--hover,
+  .is-hover {
     opacity: var(--sp-opacity-hover);
   }
 
   .sp-rating--interactive:active,
-  .sp-rating--interactive.sp-rating--active,
-  .sp-rating--interactive.is-active {
+  .sp-rating--active,
+  .is-active {
     opacity: var(--sp-opacity-active);
   }
 
   .sp-rating--interactive:focus-visible,
-  .sp-rating--interactive.sp-rating--focus,
-  .sp-rating--interactive.is-focus {
+  .sp-rating--focus,
+  .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);
   }
@@ -1728,4 +1925,411 @@
     color: var(--sp-component-rating-text);
     font-size: var(--sp-font-sm-size);
   }
+
+  .sp-rating-text--disabled {
+    opacity: var(--sp-opacity-disabled);
+  }
+
+  /* ALERTS --------------------------------------------------------------- */
+  .sp-alert {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--sp-space-12);
+    border-radius: var(--sp-component-alert-radius);
+    border: var(--sp-component-border-width) solid transparent;
+    padding: var(--sp-component-alert-padding-y-md) var(--sp-component-alert-padding-x);
+    font-family: var(--sp-font-family-sans);
+    font-size: var(--sp-font-sm-size);
+    line-height: var(--sp-font-sm-line-height);
+    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-alert--dismissed {
+    display: none;
+  }
+
+  .sp-alert--full {
+    width: 100%;
+  }
+
+  .sp-alert--sm {
+    padding: var(--sp-component-alert-padding-y-sm) var(--sp-component-alert-padding-x);
+    font-size: var(--sp-font-xs-size);
+    line-height: var(--sp-font-xs-line-height);
+  }
+
+  .sp-alert--md {
+    padding: var(--sp-component-alert-padding-y-md) var(--sp-component-alert-padding-x);
+    font-size: var(--sp-font-sm-size);
+    line-height: var(--sp-font-sm-line-height);
+  }
+
+  .sp-alert--lg {
+    padding: var(--sp-component-alert-padding-y-lg) var(--sp-component-alert-padding-x);
+    font-size: var(--sp-font-md-size);
+    line-height: var(--sp-font-md-line-height);
+  }
+
+  .sp-alert--info {
+    background-color: var(--sp-component-alert-info-bg);
+    color: var(--sp-component-alert-info-text);
+    border-color: var(--sp-component-alert-info-border);
+  }
+
+  .sp-alert--success {
+    background-color: var(--sp-component-alert-success-bg);
+    color: var(--sp-component-alert-success-text);
+    border-color: var(--sp-component-alert-success-border);
+  }
+
+  .sp-alert--warning {
+    background-color: var(--sp-component-alert-warning-bg);
+    color: var(--sp-component-alert-warning-text);
+    border-color: var(--sp-component-alert-warning-border);
+  }
+
+  .sp-alert--danger {
+    background-color: var(--sp-component-alert-danger-bg);
+    color: var(--sp-component-alert-danger-text);
+    border-color: var(--sp-component-alert-danger-border);
+  }
+
+  .sp-alert--neutral {
+    background-color: var(--sp-component-alert-neutral-bg);
+    color: var(--sp-component-alert-neutral-text);
+    border-color: var(--sp-component-alert-neutral-border);
+  }
+
+  .sp-alert--interactive {
+    cursor: pointer;
+  }
+
+  .sp-alert--interactive:hover,
+  .sp-alert--hover,
+  .sp-alert.is-hover {
+    opacity: var(--sp-opacity-hover);
+  }
+
+  .sp-alert--interactive:active,
+  .sp-alert--active,
+  .sp-alert.is-active {
+    opacity: var(--sp-opacity-active);
+  }
+
+  .sp-alert--interactive:focus-visible,
+  .sp-alert--focus,
+  .sp-alert.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-alert:disabled,
+  .sp-alert[aria-disabled="true"],
+  .sp-alert--disabled {
+    opacity: var(--sp-opacity-disabled);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .sp-alert--loading,
+  .sp-alert[aria-busy="true"] {
+    opacity: var(--sp-opacity-active);
+    pointer-events: none;
+  }
+
+  /* AVATARS -------------------------------------------------------------- */
+  .sp-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    flex-shrink: 0;
+    background-color: var(--sp-component-avatar-bg);
+    color: var(--sp-component-avatar-text);
+    border: var(--sp-component-border-width) solid transparent;
+    font-family: var(--sp-component-avatar-font);
+    font-weight: var(--sp-component-avatar-weight);
+    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-avatar--xs {
+    width: var(--sp-component-avatar-size-xs);
+    height: var(--sp-component-avatar-size-xs);
+    font-size: var(--sp-font-xs-size);
+    line-height: var(--sp-font-xs-line-height);
+  }
+
+  .sp-avatar--sm {
+    width: var(--sp-component-avatar-size-sm);
+    height: var(--sp-component-avatar-size-sm);
+    font-size: var(--sp-font-xs-size);
+    line-height: var(--sp-font-xs-line-height);
+  }
+
+  .sp-avatar--md {
+    width: var(--sp-component-avatar-size-md);
+    height: var(--sp-component-avatar-size-md);
+    font-size: var(--sp-font-sm-size);
+    line-height: var(--sp-font-sm-line-height);
+  }
+
+  .sp-avatar--lg {
+    width: var(--sp-component-avatar-size-lg);
+    height: var(--sp-component-avatar-size-lg);
+    font-size: var(--sp-font-md-size);
+    line-height: var(--sp-font-md-line-height);
+  }
+
+  .sp-avatar--xl {
+    width: var(--sp-component-avatar-size-xl);
+    height: var(--sp-component-avatar-size-xl);
+    font-size: var(--sp-font-lg-size);
+    line-height: var(--sp-font-lg-line-height);
+  }
+
+  .sp-avatar--circle {
+    border-radius: var(--sp-component-avatar-radius-circle);
+  }
+
+  .sp-avatar--square {
+    border-radius: var(--sp-component-avatar-radius-square);
+  }
+
+  .sp-avatar--full {
+    width: 100%;
+  }
+
+  .sp-avatar--interactive {
+    cursor: pointer;
+  }
+
+  .sp-avatar--interactive:hover,
+  .sp-avatar--hover,
+  .sp-avatar.is-hover {
+    opacity: var(--sp-opacity-hover);
+  }
+
+  .sp-avatar--interactive:active,
+  .sp-avatar--active,
+  .sp-avatar.is-active {
+    opacity: var(--sp-opacity-active);
+  }
+
+  .sp-avatar--interactive:focus-visible,
+  .sp-avatar--focus,
+  .sp-avatar.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-avatar:disabled,
+  .sp-avatar[aria-disabled="true"],
+  .sp-avatar--disabled {
+    opacity: var(--sp-opacity-disabled);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .sp-avatar--loading,
+  .sp-avatar[aria-busy="true"] {
+    opacity: var(--sp-opacity-active);
+    pointer-events: none;
+  }
+
+  .sp-avatar--placeholder {
+    background-color: var(--sp-surface-alternate);
+    color: var(--sp-text-on-surface-meta);
+  }
+
+  /* TAGS ----------------------------------------------------------------- */
+  .sp-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sp-component-tag-gap);
+    border-radius: var(--sp-component-tag-radius);
+    font-family: var(--sp-component-tag-font);
+    font-weight: var(--sp-component-tag-weight);
+    padding: var(--sp-component-tag-padding-y-md) var(--sp-component-tag-padding-x-md);
+    font-size: var(--sp-font-sm-size);
+    line-height: var(--sp-font-sm-line-height);
+    border: var(--sp-component-border-width) solid transparent;
+    white-space: nowrap;
+    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-tag--full {
+    width: 100%;
+  }
+
+  .sp-tag--default {
+    background-color: var(--sp-component-tag-default-bg);
+    color: var(--sp-component-tag-default-text);
+  }
+
+  .sp-tag--primary {
+    background-color: var(--sp-component-tag-primary-bg);
+    color: var(--sp-component-tag-primary-text);
+  }
+
+  .sp-tag--secondary {
+    background-color: var(--sp-component-tag-secondary-bg);
+    color: var(--sp-component-tag-secondary-text);
+  }
+
+  .sp-tag--success {
+    background-color: var(--sp-component-tag-success-bg);
+    color: var(--sp-component-tag-success-text);
+  }
+
+  .sp-tag--warning {
+    background-color: var(--sp-component-tag-warning-bg);
+    color: var(--sp-component-tag-warning-text);
+  }
+
+  .sp-tag--danger {
+    background-color: var(--sp-component-tag-danger-bg);
+    color: var(--sp-component-tag-danger-text);
+  }
+
+  .sp-tag--info {
+    background-color: var(--sp-component-tag-info-bg);
+    color: var(--sp-component-tag-info-text);
+  }
+
+  .sp-tag--neutral {
+    background-color: var(--sp-component-tag-neutral-bg);
+    color: var(--sp-component-tag-neutral-text);
+  }
+
+  .sp-tag--accent {
+    background-color: var(--sp-component-tag-accent-bg);
+    color: var(--sp-component-tag-accent-text);
+  }
+
+  .sp-tag--cta {
+    background-color: var(--sp-component-tag-cta-bg);
+    color: var(--sp-component-tag-cta-text);
+  }
+
+  .sp-tag--outline {
+    background-color: var(--sp-component-tag-outline-bg);
+    color: var(--sp-component-tag-outline-text);
+    border-color: var(--sp-component-tag-outline-border);
+  }
+
+  .sp-tag--selected {
+    background-color: var(--sp-component-tag-selected-bg);
+    color: var(--sp-component-tag-selected-text);
+    border-color: transparent;
+  }
+
+  .sp-tag--ghost {
+    background-color: var(--sp-component-tag-ghost-bg);
+    color: var(--sp-component-tag-ghost-text);
+  }
+
+  .sp-tag--interactive {
+    cursor: pointer;
+  }
+
+  .sp-tag--interactive:hover,
+  .sp-tag--hover,
+  .sp-tag.is-hover {
+    opacity: var(--sp-opacity-hover);
+  }
+
+  .sp-tag--interactive:active,
+  .sp-tag--active,
+  .sp-tag.is-active {
+    opacity: var(--sp-opacity-active);
+  }
+
+  .sp-tag--interactive:focus-visible,
+  .sp-tag--focus,
+  .sp-tag.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-tag:disabled,
+  .sp-tag[aria-disabled="true"],
+  .sp-tag--disabled {
+    opacity: var(--sp-opacity-disabled);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .sp-tag--loading,
+  .sp-tag[aria-busy="true"] {
+    opacity: var(--sp-opacity-active);
+    pointer-events: none;
+  }
+
+  .sp-tag--sm {
+    padding: var(--sp-component-tag-padding-y-sm) var(--sp-component-tag-padding-x-sm);
+    font-size: var(--sp-font-xs-size);
+    line-height: var(--sp-font-xs-line-height);
+  }
+
+  .sp-tag--md {
+    padding: var(--sp-component-tag-padding-y-md) var(--sp-component-tag-padding-x-md);
+    font-size: var(--sp-font-sm-size);
+    line-height: var(--sp-font-sm-line-height);
+  }
+
+  .sp-tag--lg {
+    padding: var(--sp-component-tag-padding-y-lg) var(--sp-component-tag-padding-x-lg);
+    font-size: var(--sp-font-md-size);
+    line-height: var(--sp-font-md-line-height);
+  }
+
+  .sp-tag--dismissible {
+    gap: var(--sp-space-8);
+  }
+
+  /* SPINNER -------------------------------------------------------------- */
+
+  @keyframes sp-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .sp-spinner {
+    display: inline-block;
+    border-radius: 50%;
+    border: var(--sp-component-spinner-border-width) solid var(--sp-component-spinner-track-color);
+    border-top-color: var(--sp-component-spinner-arc-color);
+    animation: sp-spin var(--sp-component-spinner-duration) var(--sp-component-spinner-easing) infinite;
+  }
+
+  .sp-spinner--sm {
+    width: var(--sp-component-spinner-size-sm);
+    height: var(--sp-component-spinner-size-sm);
+  }
+
+  .sp-spinner--md {
+    width: var(--sp-component-spinner-size-md);
+    height: var(--sp-component-spinner-size-md);
+  }
+
+  .sp-spinner--lg {
+    width: var(--sp-component-spinner-size-lg);
+    height: var(--sp-component-spinner-size-lg);
+  }
 }