@phcdevworks/spectre-ui 1.6.0 → 1.8.0

package/dist/components.css

@@ -116,17 +116,24 @@
   --sp-color-white: #ffffff;
   --sp-color-black: #000000;
   --sp-space-0: 0rem;
+  --sp-space-1: 0.0625rem;
+  --sp-space-2: 0.125rem;
   --sp-space-4: 0.25rem;
+  --sp-space-6: 0.375rem;
   --sp-space-8: 0.5rem;
+  --sp-space-10: 0.625rem;
   --sp-space-12: 0.75rem;
+  --sp-space-14: 0.875rem;
   --sp-space-16: 1rem;
   --sp-space-20: 1.25rem;
   --sp-space-24: 1.5rem;
+  --sp-space-28: 1.75rem;
   --sp-space-32: 2rem;
   --sp-space-40: 2.5rem;
   --sp-space-48: 3rem;
   --sp-space-56: 3.5rem;
   --sp-space-64: 4rem;
+  --sp-space-72: 4.5rem;
   --sp-space-80: 5rem;
   --sp-space-96: 6rem;
   --sp-layout-section-padding-sm: 1.5rem;
@@ -142,12 +149,21 @@
   --sp-layout-container-padding-inline-md: 1.5rem;
   --sp-layout-container-padding-inline-lg: 2rem;
   --sp-layout-container-max-width: 72rem;
+  --sp-border-width-none: 0;
   --sp-border-width-base: 1px;
   --sp-border-width-thick: 2px;
+  --sp-border-style-none: none;
+  --sp-border-style-solid: solid;
+  --sp-border-style-dashed: dashed;
+  --sp-border-style-dotted: dotted;
   --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-3xl: 24px;
+  --sp-radius-4xl: 32px;
   --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 +199,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 +227,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;
@@ -279,6 +288,7 @@
   --sp-button-danger-text: #ffffff;
   --sp-button-danger-textdisabled: #8a96ad;
   --sp-button-danger-focusring: rgba(239, 68, 68, 0.4);
+  --sp-button-danger-focusvisible: rgba(239, 68, 68, 0.4);
   --sp-button-success-bg: #15803d;
   --sp-button-success-bghover: #166534;
   --sp-button-success-bgactive: #14532d;
@@ -286,6 +296,7 @@
   --sp-button-success-text: #ffffff;
   --sp-button-success-textdisabled: #8a96ad;
   --sp-button-success-focusring: rgba(34, 197, 94, 0.4);
+  --sp-button-success-focusvisible: rgba(34, 197, 94, 0.4);
   --sp-button-cta-bg: #1f57db;
   --sp-button-cta-bghover: #1946b4;
   --sp-button-cta-bgactive: #173b8f;
@@ -369,7 +380,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;
@@ -420,12 +431,14 @@
     --sp-component-button-danger-bg-disabled: var(--sp-button-danger-bgdisabled);
     --sp-component-button-danger-text: var(--sp-button-danger-text);
     --sp-component-button-danger-text-disabled: var(--sp-button-danger-textdisabled);
+    --sp-component-button-danger-focus-visible: var(--sp-button-danger-focusvisible);
     --sp-component-button-success-bg: var(--sp-button-success-bg);
     --sp-component-button-success-bg-hover: var(--sp-button-success-bghover);
     --sp-component-button-success-bg-active: var(--sp-button-success-bgactive);
     --sp-component-button-success-bg-disabled: var(--sp-button-success-bgdisabled);
     --sp-component-button-success-text: var(--sp-button-success-text);
     --sp-component-button-success-text-disabled: var(--sp-button-success-textdisabled);
+    --sp-component-button-success-focus-visible: var(--sp-button-success-focusvisible);
     /* CTA button alignment restored to official tokens as they now use the brand palette (Blue). */
     --sp-component-button-cta-bg: var(--sp-button-cta-bg);
     --sp-component-button-cta-bg-hover: var(--sp-button-cta-bghover);
@@ -496,6 +509,9 @@
     --sp-component-badge-info-text: var(--sp-badge-info-text);
     --sp-component-badge-ghost-bg: var(--sp-button-ghost-bg);
     --sp-component-badge-ghost-text: var(--sp-button-ghost-text);
+    --sp-component-badge-outline-bg: transparent;
+    --sp-component-badge-outline-text: var(--sp-badge-neutral-text);
+    --sp-component-badge-outline-border: var(--sp-button-secondary-border);
     --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);
@@ -546,6 +562,9 @@
     --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);
+    --sp-component-iconbox-outline-bg: transparent;
+    --sp-component-iconbox-outline-text: var(--sp-badge-neutral-text);
+    --sp-component-iconbox-outline-border: var(--sp-button-secondary-border);
 
     /* testimonial roles */
     --sp-component-testimonial-bg: var(--sp-surface-card);
@@ -585,6 +604,99 @@
     --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-primary-arc: var(--sp-button-primary-bg);
+    --sp-component-spinner-secondary-arc: var(--sp-button-secondary-border);
+    --sp-component-spinner-success-arc: var(--sp-color-success-500);
+    --sp-component-spinner-warning-arc: var(--sp-color-warning-500);
+    --sp-component-spinner-danger-arc: var(--sp-color-error-500);
+    --sp-component-spinner-info-arc: var(--sp-color-info-500);
+    --sp-component-spinner-neutral-arc: var(--sp-color-neutral-500);
+    --sp-component-spinner-accent-arc: var(--sp-button-accent-bg);
+    --sp-component-spinner-cta-arc: var(--sp-button-cta-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 */
@@ -624,6 +736,34 @@
     --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);
+    --sp-component-spinner-primary-arc: var(--sp-color-brand-400);
+    --sp-component-spinner-secondary-arc: var(--sp-color-neutral-400);
+    --sp-component-spinner-success-arc: var(--sp-color-success-400);
+    --sp-component-spinner-warning-arc: var(--sp-color-warning-400);
+    --sp-component-spinner-danger-arc: var(--sp-color-error-400);
+    --sp-component-spinner-info-arc: var(--sp-color-info-400);
+    --sp-component-spinner-neutral-arc: var(--sp-color-neutral-400);
+    --sp-component-spinner-accent-arc: var(--sp-color-brand-400);
+    --sp-component-spinner-cta-arc: var(--sp-color-brand-400);
   }
 
   /* BUTTONS -------------------------------------------------------------- */
@@ -658,7 +798,8 @@
     pointer-events: none;
   }
 
-  .sp-btn--loading {
+  .sp-btn--loading,
+  .sp-btn[aria-busy="true"] {
     pointer-events: none;
     opacity: var(--sp-opacity-active);
   }
@@ -725,6 +866,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);
@@ -751,6 +893,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);
@@ -776,6 +919,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);
@@ -800,11 +944,18 @@
   }
 
   .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);
   }
 
+  .sp-btn--danger:focus-visible,
+  .sp-btn--danger.sp-btn--focus,
+  .sp-btn--danger.is-focus {
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-component-button-danger-focus-visible);
+  }
+
   /* success */
   .sp-btn--success {
     background-color: var(--sp-component-button-success-bg);
@@ -824,11 +975,18 @@
   }
 
   .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);
   }
 
+  .sp-btn--success:focus-visible,
+  .sp-btn--success.sp-btn--focus,
+  .sp-btn--success.is-focus {
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-component-button-success-focus-visible);
+  }
+
   /* cta */
   .sp-btn--cta {
     background-color: var(--sp-component-button-cta-bg);
@@ -849,6 +1007,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);
@@ -874,6 +1033,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);
@@ -1243,6 +1403,12 @@
     background-color: var(--sp-component-badge-ghost-bg-hover);
   }
 
+  .sp-badge--outline {
+    background-color: var(--sp-component-badge-outline-bg);
+    color: var(--sp-component-badge-outline-text);
+    border-color: var(--sp-component-badge-outline-border);
+  }
+
   .sp-badge--accent {
     background-color: var(--sp-component-badge-accent-bg);
     color: var(--sp-component-badge-accent-text);
@@ -1440,6 +1606,12 @@
     color: var(--sp-component-iconbox-cta-text);
   }
 
+  .sp-iconbox--outline {
+    background-color: var(--sp-component-iconbox-outline-bg);
+    color: var(--sp-component-iconbox-outline-text);
+    border-color: var(--sp-component-iconbox-outline-border);
+  }
+
   .sp-iconbox--interactive {
     cursor: pointer;
   }
@@ -1733,9 +1905,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 {
@@ -1766,7 +1940,8 @@
     cursor: not-allowed;
   }
 
-  .sp-rating--loading {
+  .sp-rating--loading,
+  .sp-rating[aria-busy="true"] {
     opacity: var(--sp-opacity-active);
     pointer-events: none;
   }
@@ -1776,20 +1951,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);
   }
@@ -1814,4 +1989,457 @@
     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;
+    transition: opacity var(--sp-duration-fast) var(--sp-easing-out);
+  }
+
+  .sp-spinner--primary {
+    border-top-color: var(--sp-component-spinner-primary-arc);
+  }
+
+  .sp-spinner--secondary {
+    border-top-color: var(--sp-component-spinner-secondary-arc);
+  }
+
+  .sp-spinner--success {
+    border-top-color: var(--sp-component-spinner-success-arc);
+  }
+
+  .sp-spinner--warning {
+    border-top-color: var(--sp-component-spinner-warning-arc);
+  }
+
+  .sp-spinner--danger {
+    border-top-color: var(--sp-component-spinner-danger-arc);
+  }
+
+  .sp-spinner--info {
+    border-top-color: var(--sp-component-spinner-info-arc);
+  }
+
+  .sp-spinner--neutral {
+    border-top-color: var(--sp-component-spinner-neutral-arc);
+  }
+
+  .sp-spinner--accent {
+    border-top-color: var(--sp-component-spinner-accent-arc);
+  }
+
+  .sp-spinner--cta {
+    border-top-color: var(--sp-component-spinner-cta-arc);
+  }
+
+  .sp-spinner--disabled {
+    opacity: var(--sp-opacity-disabled);
+  }
+
+  .sp-spinner--loading,
+  .sp-spinner[aria-busy="true"] {
+    opacity: var(--sp-opacity-active);
+  }
+
+  .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);
+  }
 }