@phcdevworks/spectre-ui 1.6.0 → 1.7.0

package/dist/components.css

@@ -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;
@@ -585,6 +582,90 @@
     --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 */
@@ -624,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 -------------------------------------------------------------- */
@@ -658,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);
   }
@@ -725,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);
@@ -751,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);
@@ -776,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);
@@ -800,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);
@@ -824,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);
@@ -849,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);
@@ -874,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);
@@ -1733,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 {
@@ -1766,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;
   }
@@ -1776,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);
   }
@@ -1814,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);
+  }
 }