@phcdevworks/spectre-ui 1.4.0 → 1.6.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;
@@ -294,9 +294,9 @@
   --sp-button-cta-textdisabled: #8a96ad;
   --sp-button-cta-shadow: 0 4px 14px 0 rgba(51, 109, 244, 0.39);
   --sp-button-cta-focusring: rgba(51, 109, 244, 0.4);
-  --sp-button-accent-bg: #7135dd;
-  --sp-button-accent-bghover: #5d28b8;
-  --sp-button-accent-bgactive: #4d2393;
+  --sp-button-accent-bg: #5d28b8;
+  --sp-button-accent-bghover: #4d2393;
+  --sp-button-accent-bgactive: #401f75;
   --sp-button-accent-bgdisabled: #ddccff;
   --sp-button-accent-text: #ffffff;
   --sp-button-accent-textdisabled: #8a96ad;
@@ -496,6 +496,10 @@
     --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-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);
@@ -506,6 +510,8 @@
     --sp-component-badge-neutral-bg-hover: var(--sp-color-neutral-200);
     --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);
@@ -536,17 +542,33 @@
     --sp-component-iconbox-neutral-text: var(--sp-badge-neutral-text);
     --sp-component-iconbox-ghost-bg: var(--sp-button-ghost-bg);
     --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-500);
-    --sp-component-testimonial-quote-mark: var(--sp-color-neutral-500);
+    --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);
+    --sp-component-pricing-card-bg-hover: var(--sp-color-neutral-50);
     --sp-component-pricing-card-border: var(--sp-color-neutral-200);
     --sp-component-pricing-card-featured-bg: var(--sp-color-info-600);
     --sp-component-pricing-card-featured-text: var(--sp-button-text-on-primary);
@@ -554,7 +576,7 @@
     --sp-component-pricing-card-featured-badge-text: var(--sp-color-neutral-900);
     --sp-component-pricing-card-price: var(--sp-color-neutral-900);
     --sp-component-pricing-card-featured-price: var(--sp-color-white);
-    --sp-component-pricing-card-price-description: var(--sp-color-neutral-500);
+    --sp-component-pricing-card-price-description: var(--sp-color-neutral-600);
 
     /* rating roles */
     --sp-component-rating-star-filled: var(--sp-color-warning-500);
@@ -567,17 +589,37 @@
 
   /* 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-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);
+
+    --sp-component-iconbox-primary-bg: var(--sp-color-neutral-800);
+    --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);
+    --sp-component-iconbox-warning-bg: var(--sp-color-neutral-800);
+    --sp-component-iconbox-warning-text: var(--sp-color-warning-400);
+    --sp-component-iconbox-danger-bg: var(--sp-color-neutral-800);
+    --sp-component-iconbox-danger-text: var(--sp-color-error-400);
+    --sp-component-iconbox-info-bg: var(--sp-color-neutral-800);
+    --sp-component-iconbox-info-text: var(--sp-color-info-400);
+
     --sp-component-testimonial-bg: var(--sp-color-neutral-800);
+    --sp-component-testimonial-bg-hover: var(--sp-color-neutral-700);
     --sp-component-testimonial-border: var(--sp-color-neutral-700);
     --sp-component-testimonial-text: var(--sp-color-neutral-200);
     --sp-component-testimonial-author-name: var(--sp-color-neutral-100);
-    --sp-component-testimonial-author-title: var(--sp-color-neutral-400);
-    --sp-component-testimonial-quote-mark: var(--sp-color-neutral-400);
+    --sp-component-testimonial-author-title: var(--sp-color-neutral-300);
+    --sp-component-testimonial-quote-mark: var(--sp-color-neutral-300);
 
     --sp-component-pricing-card-bg: var(--sp-color-neutral-800);
+    --sp-component-pricing-card-bg-hover: var(--sp-color-neutral-700);
     --sp-component-pricing-card-border: var(--sp-color-neutral-700);
     --sp-component-pricing-card-price: var(--sp-color-neutral-100);
-    --sp-component-pricing-card-price-description: var(--sp-color-neutral-400);
+    --sp-component-pricing-card-price-description: var(--sp-color-neutral-300);
 
     --sp-component-rating-star-filled: var(--sp-color-warning-400);
     --sp-component-rating-star-empty: var(--sp-color-neutral-700);
@@ -852,12 +894,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);
@@ -1019,11 +1069,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;
@@ -1038,14 +1092,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,
@@ -1072,6 +1132,10 @@
     white-space: nowrap;
   }
 
+  .sp-badge--full {
+    width: 100%;
+  }
+
   .sp-badge--sm {
     padding: var(--sp-component-badge-padding-y-sm) var(--sp-component-badge-padding-x-sm);
     font-size: var(--sp-font-xs-size);
@@ -1096,8 +1160,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);
   }
 
@@ -1108,8 +1172,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);
   }
 
@@ -1119,8 +1183,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);
   }
 
@@ -1130,8 +1194,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);
   }
 
@@ -1141,8 +1205,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);
   }
 
@@ -1152,8 +1216,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);
   }
 
@@ -1163,8 +1227,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);
   }
 
@@ -1174,11 +1238,33 @@
   }
 
   .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);
   }
 
+  .sp-badge--accent {
+    background-color: var(--sp-component-badge-accent-bg);
+    color: var(--sp-component-badge-accent-text);
+  }
+
+  .sp-badge--accent.sp-badge--interactive: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:
@@ -1190,24 +1276,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;
   }
@@ -1292,6 +1381,10 @@
     font-size: var(--sp-font-lg-size);
   }
 
+  .sp-iconbox--full {
+    width: 100%;
+  }
+
   .sp-iconbox--pill {
     border-radius: var(--sp-radius-pill);
   }
@@ -1337,25 +1430,35 @@
     color: var(--sp-component-iconbox-ghost-text);
   }
 
+  .sp-iconbox--accent {
+    background-color: var(--sp-component-iconbox-accent-bg);
+    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);
   }
@@ -1368,7 +1471,8 @@
     cursor: not-allowed;
   }
 
-  .sp-iconbox--loading {
+  .sp-iconbox--loading,
+  .sp-iconbox[aria-busy="true"] {
     opacity: var(--sp-opacity-active);
     pointer-events: none;
   }
@@ -1377,20 +1481,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;
   }
@@ -1412,7 +1542,8 @@
   .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);
   }
 
   .sp-testimonial--interactive:active,
@@ -1495,12 +1626,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;
   }
@@ -1516,37 +1650,38 @@
   .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);
   }
 
   .sp-pricing-card--featured.sp-pricing-card--interactive:hover,
   .sp-pricing-card--featured.sp-pricing-card--interactive:focus-visible,
   .sp-pricing-card--featured.sp-pricing-card--interactive:focus-within,
   .sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--hover,
-  .sp-pricing-card--featured.sp-pricing-card--interactive.is-hover,
+  .sp-pricing-card--featured.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);
@@ -1615,6 +1750,14 @@
     font-size: var(--sp-component-rating-size-lg);
   }
 
+  .sp-rating--full {
+    width: 100%;
+  }
+
+  .sp-rating--pill {
+    border-radius: var(--sp-radius-pill);
+  }
+
   .sp-rating:disabled,
   .sp-rating[aria-disabled="true"],
   .sp-rating--disabled {