@phcdevworks/spectre-ui 1.8.0 → 1.9.0

package/dist/index.css

@@ -41,6 +41,41 @@
   --sp-icon-box-icon-success: #16a34a;
   --sp-icon-box-icon-warning: #d48806;
   --sp-icon-box-icon-danger: #dc2626;
+  --sp-nav-bg: #ffffff;
+  --sp-nav-text: #141b24;
+  --sp-nav-link: #374253;
+  --sp-nav-link-hover: #1f57db;
+  --sp-nav-link-active: #1946b4;
+  --sp-nav-border: #d9dfeb;
+  --sp-modal-bg: #ffffff;
+  --sp-modal-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.20);
+  --sp-modal-border: #d9dfeb;
+  --sp-modal-overlay: rgba(0, 0, 0, 0.6);
+  --sp-toast-success-bg: #f0fdf4;
+  --sp-toast-success-text: #166534;
+  --sp-toast-success-border: #bbf7d0;
+  --sp-toast-success-icon: #16a34a;
+  --sp-toast-warning-bg: #fffbea;
+  --sp-toast-warning-text: #8f5200;
+  --sp-toast-warning-border: #ffe08a;
+  --sp-toast-warning-icon: #d48806;
+  --sp-toast-danger-bg: #fef2f2;
+  --sp-toast-danger-text: #991b1b;
+  --sp-toast-danger-border: #fecaca;
+  --sp-toast-danger-icon: #dc2626;
+  --sp-toast-info-bg: #f0f9ff;
+  --sp-toast-info-text: #0c4a6e;
+  --sp-toast-info-border: #bae6fd;
+  --sp-toast-info-icon: #0369a1;
+  --sp-tooltip-bg: #141b24;
+  --sp-tooltip-text: #ffffff;
+  --sp-tooltip-border: #374253;
+  --sp-dropdown-bg: #ffffff;
+  --sp-dropdown-border: #d9dfeb;
+  --sp-dropdown-item-default: transparent;
+  --sp-dropdown-item-hover: #eef1f6;
+  --sp-dropdown-item-active: #f0f9ff;
+  --sp-dropdown-item-text: #141b24;
   --sp-color-brand-50: #eef4ff;
   --sp-color-brand-100: #d9e7ff;
   --sp-color-brand-200: #b9d2ff;
@@ -232,6 +267,7 @@
   --sp-z-index-popover: 1500;
   --sp-z-index-tooltip: 1600;
   --sp-z-index-toast: 1700;
+  --sp-duration-reduced: 0.01ms;
   --sp-duration-instant: 75ms;
   --sp-duration-fast: 150ms;
   --sp-duration-base: 200ms;
@@ -259,6 +295,7 @@
   --sp-focus-ring-style: solid;
   --sp-min-touch-target: 44px;
   --sp-min-text-size: 16px;
+  --sp-reduced-motion: 0.01ms;
   --sp-button-primary-bg: #0369a1;
   --sp-button-primary-bghover: #075985;
   --sp-button-primary-bgactive: #0c4a6e;
@@ -359,6 +396,30 @@
   --sp-animation-pulse-duration: 1200ms;
   --sp-animation-pulse-easing: cubic-bezier(0.4, 0, 0.2, 1);
   --sp-animation-pulse-keyframes: pulse;
+  --sp-animation-reduced-motion-fadein-duration: 0.01ms;
+  --sp-animation-reduced-motion-fadein-easing: linear;
+  --sp-animation-reduced-motion-fadein-keyframes: fade-in;
+  --sp-animation-reduced-motion-fadeout-duration: 0.01ms;
+  --sp-animation-reduced-motion-fadeout-easing: linear;
+  --sp-animation-reduced-motion-fadeout-keyframes: fade-out;
+  --sp-animation-reduced-motion-slideup-duration: 0.01ms;
+  --sp-animation-reduced-motion-slideup-easing: linear;
+  --sp-animation-reduced-motion-slideup-keyframes: slide-up;
+  --sp-animation-reduced-motion-slidedown-duration: 0.01ms;
+  --sp-animation-reduced-motion-slidedown-easing: linear;
+  --sp-animation-reduced-motion-slidedown-keyframes: slide-down;
+  --sp-animation-reduced-motion-scalein-duration: 0.01ms;
+  --sp-animation-reduced-motion-scalein-easing: linear;
+  --sp-animation-reduced-motion-scalein-keyframes: scale-in;
+  --sp-animation-reduced-motion-bounce-duration: 0.01ms;
+  --sp-animation-reduced-motion-bounce-easing: linear;
+  --sp-animation-reduced-motion-bounce-keyframes: bounce;
+  --sp-animation-reduced-motion-shake-duration: 0.01ms;
+  --sp-animation-reduced-motion-shake-easing: linear;
+  --sp-animation-reduced-motion-shake-keyframes: shake;
+  --sp-animation-reduced-motion-pulse-duration: 0.01ms;
+  --sp-animation-reduced-motion-pulse-easing: linear;
+  --sp-animation-reduced-motion-pulse-keyframes: pulse;
 }
 :root[data-spectre-theme="dark"] {
   --sp-surface-page: #141b24;
@@ -399,6 +460,41 @@
   --sp-icon-box-icon-success: #4ade80;
   --sp-icon-box-icon-warning: #ffc21a;
   --sp-icon-box-icon-danger: #f87171;
+  --sp-nav-bg: #141b24;
+  --sp-nav-text: #f7f8fb;
+  --sp-nav-link: #b7c1d4;
+  --sp-nav-link-hover: #5a92ff;
+  --sp-nav-link-active: #8ab6ff;
+  --sp-nav-border: #374253;
+  --sp-modal-bg: #222b38;
+  --sp-modal-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.20);
+  --sp-modal-border: #374253;
+  --sp-modal-overlay: rgba(0, 0, 0, 0.6);
+  --sp-toast-success-bg: #14532d;
+  --sp-toast-success-text: #dcfce7;
+  --sp-toast-success-border: #15803d;
+  --sp-toast-success-icon: #4ade80;
+  --sp-toast-warning-bg: #734000;
+  --sp-toast-warning-text: #fff1c2;
+  --sp-toast-warning-border: #ad6800;
+  --sp-toast-warning-icon: #ffc21a;
+  --sp-toast-danger-bg: #7f1d1d;
+  --sp-toast-danger-text: #fee2e2;
+  --sp-toast-danger-border: #b91c1c;
+  --sp-toast-danger-icon: #f87171;
+  --sp-toast-info-bg: #082f49;
+  --sp-toast-info-text: #e0f2fe;
+  --sp-toast-info-border: #075985;
+  --sp-toast-info-icon: #38bdf8;
+  --sp-tooltip-bg: #f7f8fb;
+  --sp-tooltip-text: #141b24;
+  --sp-tooltip-border: #b7c1d4;
+  --sp-dropdown-bg: #222b38;
+  --sp-dropdown-border: #374253;
+  --sp-dropdown-item-default: transparent;
+  --sp-dropdown-item-hover: #374253;
+  --sp-dropdown-item-active: #082f49;
+  --sp-dropdown-item-text: #eef1f6;
 }
 @layer base {
 
@@ -481,6 +577,7 @@
     --sp-component-button-primary-bg-disabled: var(--sp-button-primary-bgdisabled);
     --sp-component-button-primary-text: var(--sp-button-primary-text);
     --sp-component-button-primary-text-disabled: var(--sp-button-primary-textdisabled);
+    --sp-component-button-primary-focus-visible: var(--sp-button-primary-focusvisible);
     --sp-component-button-secondary-bg: var(--sp-button-secondary-bg);
     --sp-component-button-secondary-bg-hover: var(--sp-button-secondary-bghover);
     --sp-component-button-secondary-bg-active: var(--sp-button-secondary-bgactive);
@@ -489,12 +586,14 @@
     --sp-component-button-secondary-text-disabled: var(--sp-button-secondary-textdisabled);
     --sp-component-button-secondary-border: var(--sp-button-secondary-border);
     --sp-component-button-secondary-border-disabled: var(--sp-button-secondary-borderdisabled);
+    --sp-component-button-secondary-focus-visible: var(--sp-button-secondary-focusvisible);
     --sp-component-button-ghost-bg: var(--sp-button-ghost-bg);
     --sp-component-button-ghost-bg-hover: var(--sp-button-ghost-bghover);
     --sp-component-button-ghost-bg-active: var(--sp-button-ghost-bgactive);
     --sp-component-button-ghost-bg-disabled: var(--sp-button-ghost-bgdisabled);
     --sp-component-button-ghost-text: var(--sp-button-ghost-text);
     --sp-component-button-ghost-text-disabled: var(--sp-button-ghost-textdisabled);
+    --sp-component-button-ghost-focus-visible: var(--sp-button-ghost-focusvisible);
     --sp-component-button-danger-bg: var(--sp-button-danger-bg);
     --sp-component-button-danger-bg-hover: var(--sp-button-danger-bghover);
     --sp-component-button-danger-bg-active: var(--sp-button-danger-bgactive);
@@ -517,12 +616,14 @@
     --sp-component-button-cta-text: var(--sp-button-cta-text);
     --sp-component-button-cta-text-disabled: var(--sp-button-cta-textdisabled);
     --sp-component-button-cta-shadow: var(--sp-button-cta-shadow);
+    --sp-component-button-cta-focus-visible: var(--sp-button-cta-focusring);
     --sp-component-button-accent-bg: var(--sp-button-accent-bg);
     --sp-component-button-accent-bg-hover: var(--sp-button-accent-bghover);
     --sp-component-button-accent-bg-active: var(--sp-button-accent-bgactive);
     --sp-component-button-accent-bg-disabled: var(--sp-button-accent-bgdisabled);
     --sp-component-button-accent-text: var(--sp-button-accent-text);
     --sp-component-button-accent-text-disabled: var(--sp-button-accent-textdisabled);
+    --sp-component-button-accent-focus-visible: var(--sp-button-accent-focusvisible);
 
     /* card roles */
     --sp-component-card-bg: var(--sp-surface-card);
@@ -608,10 +709,12 @@
 
     /* icon box roles */
     --sp-component-iconbox-radius: var(--sp-radius-lg);
+    --sp-component-iconbox-size-xs: var(--sp-space-24);
     --sp-component-iconbox-size-sm: var(--sp-space-32);
     --sp-component-iconbox-size-md: var(--sp-space-48);
     --sp-component-iconbox-size-lg: var(--sp-space-64);
-    --sp-component-iconbox-primary-bg: var(--sp-color-brand-50);
+    --sp-component-iconbox-primary-bg: var(--sp-icon-box-bg);
+    --sp-component-iconbox-border-color: var(--sp-icon-box-border);
     --sp-component-iconbox-primary-text: var(--sp-icon-box-icon-default);
     --sp-component-iconbox-success-bg: var(--sp-color-success-50);
     --sp-component-iconbox-success-text: var(--sp-icon-box-icon-success);
@@ -767,6 +870,75 @@
     --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);
+
+    /* nav roles */
+    --sp-component-nav-bg: var(--sp-nav-bg);
+    --sp-component-nav-text: var(--sp-nav-text);
+    --sp-component-nav-link: var(--sp-nav-link);
+    --sp-component-nav-link-hover: var(--sp-nav-link-hover);
+    --sp-component-nav-link-active: var(--sp-nav-link-active);
+    --sp-component-nav-border: var(--sp-nav-border);
+
+    /* toast roles */
+    --sp-component-toast-radius: var(--sp-radius-lg);
+    --sp-component-toast-padding-x: var(--sp-space-16);
+    --sp-component-toast-padding-y: var(--sp-space-12);
+    --sp-component-toast-gap: var(--sp-space-12);
+    --sp-component-toast-z-index: var(--sp-z-index-toast);
+    --sp-component-toast-info-bg: var(--sp-toast-info-bg);
+    --sp-component-toast-info-text: var(--sp-toast-info-text);
+    --sp-component-toast-info-border: var(--sp-toast-info-border);
+    --sp-component-toast-info-icon: var(--sp-toast-info-icon);
+    --sp-component-toast-success-bg: var(--sp-toast-success-bg);
+    --sp-component-toast-success-text: var(--sp-toast-success-text);
+    --sp-component-toast-success-border: var(--sp-toast-success-border);
+    --sp-component-toast-success-icon: var(--sp-toast-success-icon);
+    --sp-component-toast-warning-bg: var(--sp-toast-warning-bg);
+    --sp-component-toast-warning-text: var(--sp-toast-warning-text);
+    --sp-component-toast-warning-border: var(--sp-toast-warning-border);
+    --sp-component-toast-warning-icon: var(--sp-toast-warning-icon);
+    --sp-component-toast-danger-bg: var(--sp-toast-danger-bg);
+    --sp-component-toast-danger-text: var(--sp-toast-danger-text);
+    --sp-component-toast-danger-border: var(--sp-toast-danger-border);
+    --sp-component-toast-danger-icon: var(--sp-toast-danger-icon);
+
+    /* tooltip roles */
+    --sp-component-tooltip-bg: var(--sp-tooltip-bg);
+    --sp-component-tooltip-text: var(--sp-tooltip-text);
+    --sp-component-tooltip-border: var(--sp-tooltip-border);
+    --sp-component-tooltip-radius: var(--sp-radius-md);
+    --sp-component-tooltip-padding-x: var(--sp-space-8);
+    --sp-component-tooltip-padding-y: var(--sp-space-4);
+    --sp-component-tooltip-offset: var(--sp-space-8);
+    --sp-component-tooltip-opacity: var(--sp-opacity-tooltip);
+    --sp-component-tooltip-z-index: var(--sp-z-index-tooltip);
+
+    /* dropdown roles */
+    --sp-component-dropdown-bg: var(--sp-dropdown-bg);
+    --sp-component-dropdown-border: var(--sp-dropdown-border);
+    --sp-component-dropdown-item-default: var(--sp-dropdown-item-default);
+    --sp-component-dropdown-item-hover: var(--sp-dropdown-item-hover);
+    --sp-component-dropdown-item-active: var(--sp-dropdown-item-active);
+    --sp-component-dropdown-item-text: var(--sp-dropdown-item-text);
+    --sp-component-dropdown-radius: var(--sp-radius-lg);
+    --sp-component-dropdown-item-radius: var(--sp-radius-sm);
+    --sp-component-dropdown-shadow: var(--sp-shadow-md);
+    --sp-component-dropdown-padding: var(--sp-space-4);
+    --sp-component-dropdown-offset: var(--sp-space-4);
+    --sp-component-dropdown-item-padding-x: var(--sp-space-12);
+    --sp-component-dropdown-item-padding-y: var(--sp-space-8);
+    --sp-component-dropdown-item-gap: var(--sp-space-8);
+    --sp-component-dropdown-z-index: var(--sp-z-index-dropdown);
+
+    /* modal roles */
+    --sp-component-modal-bg: var(--sp-modal-bg);
+    --sp-component-modal-border: var(--sp-modal-border);
+    --sp-component-modal-shadow: var(--sp-modal-shadow);
+    --sp-component-modal-overlay: var(--sp-modal-overlay);
+    --sp-component-modal-radius: var(--sp-radius-lg);
+    --sp-component-modal-padding: var(--sp-space-24);
+    --sp-component-modal-gap: var(--sp-space-16);
+    --sp-component-modal-z-index: var(--sp-z-index-modal);
   }
 
   /* dark mode overrides mapped from Spectre token mode definitions */
@@ -778,7 +950,8 @@
     --sp-component-badge-neutral-bg-hover: var(--sp-color-neutral-600);
     --sp-component-badge-info-bg-hover: var(--sp-color-info-700);
 
-    --sp-component-iconbox-primary-bg: var(--sp-color-neutral-800);
+    --sp-component-iconbox-primary-bg: var(--sp-icon-box-bg);
+    --sp-component-iconbox-border-color: var(--sp-icon-box-border);
     --sp-component-iconbox-primary-text: var(--sp-color-brand-400);
     --sp-component-iconbox-success-bg: var(--sp-color-neutral-800);
     --sp-component-iconbox-success-text: var(--sp-color-success-400);
@@ -923,6 +1096,12 @@
     box-shadow: var(--sp-component-button-shadow);
   }
 
+  .sp-btn--primary:focus-visible,
+  .sp-btn--primary.sp-btn--focus,
+  .sp-btn--primary.is-focus {
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-component-button-primary-focus-visible);
+  }
+
   .sp-btn--primary.sp-btn--hover,
   .sp-btn--primary.is-hover,
   .sp-btn--primary:hover {
@@ -950,6 +1129,12 @@
     border-color: var(--sp-component-button-secondary-border);
   }
 
+  .sp-btn--secondary:focus-visible,
+  .sp-btn--secondary.sp-btn--focus,
+  .sp-btn--secondary.is-focus {
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-component-button-secondary-focus-visible);
+  }
+
   .sp-btn--secondary.sp-btn--hover,
   .sp-btn--secondary.is-hover,
   .sp-btn--secondary:hover {
@@ -976,6 +1161,12 @@
     color: var(--sp-component-button-ghost-text);
   }
 
+  .sp-btn--ghost:focus-visible,
+  .sp-btn--ghost.sp-btn--focus,
+  .sp-btn--ghost.is-focus {
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-component-button-ghost-focus-visible);
+  }
+
   .sp-btn--ghost.sp-btn--hover,
   .sp-btn--ghost.is-hover,
   .sp-btn--ghost:hover {
@@ -1064,6 +1255,12 @@
     box-shadow: var(--sp-component-button-cta-shadow);
   }
 
+  .sp-btn--cta:focus-visible,
+  .sp-btn--cta.sp-btn--focus,
+  .sp-btn--cta.is-focus {
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-component-button-cta-focus-visible);
+  }
+
   .sp-btn--cta.sp-btn--hover,
   .sp-btn--cta.is-hover,
   .sp-btn--cta:hover {
@@ -1090,6 +1287,12 @@
     color: var(--sp-component-button-accent-text);
   }
 
+  .sp-btn--accent:focus-visible,
+  .sp-btn--accent.sp-btn--focus,
+  .sp-btn--accent.is-focus {
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-component-button-accent-focus-visible);
+  }
+
   .sp-btn--accent.sp-btn--hover,
   .sp-btn--accent.is-hover,
   .sp-btn--accent:hover {
@@ -1213,7 +1416,8 @@
   }
 
   /* State styling should not force typed text to be red/green by default */
-  .sp-input--error {
+  .sp-input--error,
+  .sp-input[aria-invalid="true"] {
     border-color: var(--sp-component-input-role-border-error);
     background-color: var(--sp-component-input-role-bg-error);
     color: var(--sp-component-input-role-text);
@@ -1546,7 +1750,7 @@
     border-radius: var(--sp-component-iconbox-radius);
     color: var(--sp-component-iconbox-primary-text);
     background-color: var(--sp-component-iconbox-primary-bg);
-    border: var(--sp-component-border-width) solid transparent;
+    border: var(--sp-component-border-width) solid var(--sp-component-iconbox-border-color);
     font-family: var(--sp-font-family-sans);
     font-weight: var(--sp-font-md-weight);
     transition:
@@ -1599,6 +1803,12 @@
     fill: currentColor;
   }
 
+  .sp-iconbox--xs {
+    width: var(--sp-component-iconbox-size-xs);
+    height: var(--sp-component-iconbox-size-xs);
+    font-size: var(--sp-font-xs-size);
+  }
+
   .sp-iconbox--sm {
     width: var(--sp-component-iconbox-size-sm);
     height: var(--sp-component-iconbox-size-sm);
@@ -2022,19 +2232,19 @@
 
   .sp-rating--interactive:hover,
   .sp-rating--hover,
-  .is-hover {
+  .sp-rating.is-hover {
     opacity: var(--sp-opacity-hover);
   }
 
   .sp-rating--interactive:active,
   .sp-rating--active,
-  .is-active {
+  .sp-rating.is-active {
     opacity: var(--sp-opacity-active);
   }
 
   .sp-rating--interactive:focus-visible,
   .sp-rating--focus,
-  .is-focus {
+  .sp-rating.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);
   }
@@ -2512,6 +2722,337 @@
     width: var(--sp-component-spinner-size-lg);
     height: var(--sp-component-spinner-size-lg);
   }
+
+  /* nav */
+  .sp-nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--sp-space-16);
+    padding: var(--sp-space-12) var(--sp-space-16);
+    background-color: var(--sp-component-nav-bg);
+    color: var(--sp-component-nav-text);
+    font-family: var(--sp-font-family-sans);
+    transition:
+      background-color var(--sp-duration-fast) var(--sp-easing-out),
+      color var(--sp-duration-fast) var(--sp-easing-out),
+      border-color var(--sp-duration-fast) var(--sp-easing-out);
+  }
+
+  .sp-nav--bordered {
+    border-bottom: var(--sp-component-border-width) solid var(--sp-component-nav-border);
+  }
+
+  .sp-nav--sticky {
+    position: sticky;
+    top: 0;
+    z-index: var(--sp-z-index-sticky);
+  }
+
+  .sp-nav--full {
+    width: 100%;
+  }
+
+  .sp-nav__links {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-space-16);
+  }
+
+  .sp-nav__link {
+    color: var(--sp-component-nav-link);
+    font-size: var(--sp-font-sm-size);
+    line-height: var(--sp-font-sm-line-height);
+    font-weight: var(--sp-font-sm-weight);
+    text-decoration: none;
+    transition: color var(--sp-duration-fast) var(--sp-easing-out);
+  }
+
+  .sp-nav__link:hover,
+  .sp-nav__link--hover,
+  .sp-nav__link.is-hover {
+    color: var(--sp-component-nav-link-hover);
+  }
+
+  .sp-nav__link:focus-visible,
+  .sp-nav__link--focus,
+  .sp-nav__link.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-nav__link--active,
+  .sp-nav__link.is-active {
+    color: var(--sp-component-nav-link-active);
+  }
+
+  .sp-nav__link--disabled,
+  .sp-nav__link[aria-disabled="true"] {
+    pointer-events: none;
+    opacity: var(--sp-opacity-disabled);
+  }
+
+  /* TOASTS ----------------------------------------------------------------- */
+  .sp-toast {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--sp-component-toast-gap);
+    border-radius: var(--sp-component-toast-radius);
+    border: var(--sp-component-border-width) solid transparent;
+    padding: var(--sp-component-toast-padding-y) var(--sp-component-toast-padding-x);
+    font-family: var(--sp-font-family-sans);
+    font-size: var(--sp-font-sm-size);
+    line-height: var(--sp-font-sm-line-height);
+    z-index: var(--sp-component-toast-z-index);
+    transition:
+      background-color var(--sp-duration-fast) var(--sp-easing-out),
+      color var(--sp-duration-fast) var(--sp-easing-out),
+      border-color var(--sp-duration-fast) var(--sp-easing-out);
+  }
+
+  .sp-toast--dismissed {
+    display: none;
+  }
+
+  .sp-toast--full {
+    width: 100%;
+  }
+
+  .sp-toast--info {
+    background-color: var(--sp-component-toast-info-bg);
+    color: var(--sp-component-toast-info-text);
+    border-color: var(--sp-component-toast-info-border);
+  }
+
+  .sp-toast--success {
+    background-color: var(--sp-component-toast-success-bg);
+    color: var(--sp-component-toast-success-text);
+    border-color: var(--sp-component-toast-success-border);
+  }
+
+  .sp-toast--warning {
+    background-color: var(--sp-component-toast-warning-bg);
+    color: var(--sp-component-toast-warning-text);
+    border-color: var(--sp-component-toast-warning-border);
+  }
+
+  .sp-toast--danger {
+    background-color: var(--sp-component-toast-danger-bg);
+    color: var(--sp-component-toast-danger-text);
+    border-color: var(--sp-component-toast-danger-border);
+  }
+
+  .sp-toast__icon {
+    flex-shrink: 0;
+    line-height: var(--sp-font-sm-line-height);
+  }
+
+  .sp-toast__icon--info {
+    color: var(--sp-component-toast-info-icon);
+  }
+
+  .sp-toast__icon--success {
+    color: var(--sp-component-toast-success-icon);
+  }
+
+  .sp-toast__icon--warning {
+    color: var(--sp-component-toast-warning-icon);
+  }
+
+  .sp-toast__icon--danger {
+    color: var(--sp-component-toast-danger-icon);
+  }
+
+  /* TOOLTIPS --------------------------------------------------------------- */
+  .sp-tooltip {
+    position: absolute;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--sp-component-tooltip-radius);
+    border: var(--sp-component-border-width) solid var(--sp-component-tooltip-border);
+    background-color: var(--sp-component-tooltip-bg);
+    color: var(--sp-component-tooltip-text);
+    padding: var(--sp-component-tooltip-padding-y) var(--sp-component-tooltip-padding-x);
+    font-family: var(--sp-font-family-sans);
+    font-size: var(--sp-font-xs-size);
+    line-height: var(--sp-font-xs-line-height);
+    white-space: nowrap;
+    opacity: var(--sp-component-tooltip-opacity);
+    z-index: var(--sp-component-tooltip-z-index);
+    pointer-events: none;
+    visibility: hidden;
+    transition:
+      opacity var(--sp-duration-fast) var(--sp-easing-out),
+      visibility var(--sp-duration-fast) var(--sp-easing-out);
+  }
+
+  .sp-tooltip--visible {
+    visibility: visible;
+  }
+
+  .sp-tooltip--top {
+    bottom: 100%;
+    left: 50%;
+    transform: translate(-50%, calc(-1 * var(--sp-component-tooltip-offset)));
+  }
+
+  .sp-tooltip--bottom {
+    top: 100%;
+    left: 50%;
+    transform: translate(-50%, var(--sp-component-tooltip-offset));
+  }
+
+  .sp-tooltip--left {
+    right: 100%;
+    top: 50%;
+    transform: translate(calc(-1 * var(--sp-component-tooltip-offset)), -50%);
+  }
+
+  .sp-tooltip--right {
+    left: 100%;
+    top: 50%;
+    transform: translate(var(--sp-component-tooltip-offset), -50%);
+  }
+
+  /* DROPDOWNS ---------------------------------------------------------------- */
+  .sp-dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .sp-dropdown--full {
+    display: block;
+    width: 100%;
+  }
+
+  .sp-dropdown__menu {
+    position: absolute;
+    display: none;
+    flex-direction: column;
+    min-width: 100%;
+    padding: var(--sp-component-dropdown-padding);
+    background-color: var(--sp-component-dropdown-bg);
+    border: var(--sp-component-border-width) solid var(--sp-component-dropdown-border);
+    border-radius: var(--sp-component-dropdown-radius);
+    box-shadow: var(--sp-component-dropdown-shadow);
+    z-index: var(--sp-component-dropdown-z-index);
+    font-family: var(--sp-font-family-sans);
+  }
+
+  .sp-dropdown__menu--open {
+    display: flex;
+  }
+
+  .sp-dropdown__menu--bottom-start {
+    top: 100%;
+    left: 0;
+    margin-top: var(--sp-component-dropdown-offset);
+  }
+
+  .sp-dropdown__menu--bottom-end {
+    top: 100%;
+    right: 0;
+    margin-top: var(--sp-component-dropdown-offset);
+  }
+
+  .sp-dropdown__menu--top-start {
+    bottom: 100%;
+    left: 0;
+    margin-bottom: var(--sp-component-dropdown-offset);
+  }
+
+  .sp-dropdown__menu--top-end {
+    bottom: 100%;
+    right: 0;
+    margin-bottom: var(--sp-component-dropdown-offset);
+  }
+
+  .sp-dropdown__item {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-component-dropdown-item-gap);
+    padding: var(--sp-component-dropdown-item-padding-y) var(--sp-component-dropdown-item-padding-x);
+    border-radius: var(--sp-component-dropdown-item-radius);
+    background-color: var(--sp-component-dropdown-item-default);
+    color: var(--sp-component-dropdown-item-text);
+    font-size: var(--sp-font-sm-size);
+    line-height: var(--sp-font-sm-line-height);
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      background-color var(--sp-duration-fast) var(--sp-easing-out),
+      color var(--sp-duration-fast) var(--sp-easing-out),
+      opacity var(--sp-duration-fast) var(--sp-easing-out);
+  }
+
+  .sp-dropdown__item:hover,
+  .sp-dropdown__item--hover,
+  .sp-dropdown__item.is-hover {
+    background-color: var(--sp-component-dropdown-item-hover);
+  }
+
+  .sp-dropdown__item:focus-visible,
+  .sp-dropdown__item--focus,
+  .sp-dropdown__item.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-dropdown__item--active,
+  .sp-dropdown__item.is-active {
+    background-color: var(--sp-component-dropdown-item-active);
+  }
+
+  .sp-dropdown__item--disabled,
+  .sp-dropdown__item[aria-disabled="true"] {
+    pointer-events: none;
+    opacity: var(--sp-opacity-disabled);
+  }
+
+  /* MODALS ------------------------------------------------------------------- */
+  .sp-modal-overlay {
+    position: fixed;
+    inset: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--sp-component-modal-overlay);
+    z-index: var(--sp-component-modal-z-index);
+  }
+
+  .sp-modal-overlay--open {
+    display: flex;
+  }
+
+  .sp-modal {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-component-modal-gap);
+    max-width: 100%;
+    max-height: 100%;
+    overflow: auto;
+    padding: var(--sp-component-modal-padding);
+    background-color: var(--sp-component-modal-bg);
+    border: var(--sp-component-border-width) solid var(--sp-component-modal-border);
+    border-radius: var(--sp-component-modal-radius);
+    box-shadow: var(--sp-component-modal-shadow);
+    font-family: var(--sp-font-family-sans);
+    opacity: 0;
+    transform: scale(0.95);
+    transition:
+      opacity var(--sp-duration-fast) var(--sp-easing-out),
+      transform var(--sp-duration-fast) var(--sp-easing-out);
+  }
+
+  .sp-modal--open {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .sp-modal--full {
+    width: 100%;
+  }
 }
 @layer utilities {
   .sp-stack {