@phcdevworks/spectre-ui 1.4.0 → 1.6.0

package/dist/index.css

@@ -6,7 +6,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;
@@ -298,9 +298,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;
@@ -566,6 +566,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);
@@ -576,6 +580,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);
@@ -606,17 +612,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);
@@ -624,7 +646,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);
@@ -637,17 +659,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);
@@ -922,12 +964,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);
@@ -1089,11 +1139,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;
@@ -1108,14 +1162,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,
@@ -1142,6 +1202,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);
@@ -1166,8 +1230,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);
   }
 
@@ -1178,8 +1242,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);
   }
 
@@ -1189,8 +1253,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);
   }
 
@@ -1200,8 +1264,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);
   }
 
@@ -1211,8 +1275,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);
   }
 
@@ -1222,8 +1286,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);
   }
 
@@ -1233,8 +1297,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);
   }
 
@@ -1244,11 +1308,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:
@@ -1260,24 +1346,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;
   }
@@ -1362,6 +1451,10 @@
     font-size: var(--sp-font-lg-size);
   }
 
+  .sp-iconbox--full {
+    width: 100%;
+  }
+
   .sp-iconbox--pill {
     border-radius: var(--sp-radius-pill);
   }
@@ -1407,25 +1500,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);
   }
@@ -1438,7 +1541,8 @@
     cursor: not-allowed;
   }
 
-  .sp-iconbox--loading {
+  .sp-iconbox--loading,
+  .sp-iconbox[aria-busy="true"] {
     opacity: var(--sp-opacity-active);
     pointer-events: none;
   }
@@ -1447,20 +1551,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;
   }
@@ -1482,7 +1612,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,
@@ -1565,12 +1696,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;
   }
@@ -1586,37 +1720,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);
@@ -1685,6 +1820,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 {

package/dist/index.d.cts

@@ -25,10 +25,6 @@ declare const BUTTON_SIZES: {
 };
 type ButtonVariant = keyof typeof BUTTON_VARIANTS;
 type ButtonSize = keyof typeof BUTTON_SIZES;
-/**
- * Generate classes for the Button component.
- * @sync v2.x - Synced with latest design tokens, including CTA variants.
- */
 interface ButtonRecipeOptions {
     variant?: ButtonVariant;
     size?: ButtonSize;
@@ -89,6 +85,14 @@ interface InputRecipeOptions {
     loading?: boolean;
 }
 declare function getInputClasses(opts?: InputRecipeOptions): string;
+declare function getInputWrapperClasses(): string;
+declare function getInputLabelClasses(opts?: {
+    disabled?: boolean;
+}): string;
+declare function getInputHelperTextClasses(opts?: {
+    disabled?: boolean;
+}): string;
+declare function getInputErrorMessageClasses(): string;
 
 declare const BADGE_VARIANTS: {
     readonly primary: true;
@@ -99,6 +103,8 @@ declare const BADGE_VARIANTS: {
     readonly neutral: true;
     readonly info: true;
     readonly ghost: true;
+    readonly accent: true;
+    readonly cta: true;
 };
 declare const BADGE_SIZES: {
     readonly sm: true;
@@ -107,10 +113,6 @@ declare const BADGE_SIZES: {
 };
 type BadgeVariant = keyof typeof BADGE_VARIANTS;
 type BadgeSize = keyof typeof BADGE_SIZES;
-/**
- * Generate classes for the Badge component.
- * @sync v2.x - Synced with latest design tokens, including hover states.
- */
 interface BadgeRecipeOptions {
     variant?: BadgeVariant;
     size?: BadgeSize;
@@ -120,6 +122,7 @@ interface BadgeRecipeOptions {
     active?: boolean;
     disabled?: boolean;
     loading?: boolean;
+    fullWidth?: boolean;
 }
 declare function getBadgeClasses(opts?: BadgeRecipeOptions): string;
 
@@ -132,6 +135,8 @@ declare const ICONBOX_VARIANTS: {
     readonly info: true;
     readonly neutral: true;
     readonly ghost: true;
+    readonly accent: true;
+    readonly cta: true;
 };
 declare const ICONBOX_SIZES: {
     readonly sm: true;
@@ -150,14 +155,19 @@ interface IconBoxRecipeOptions {
     focused?: boolean;
     active?: boolean;
     pill?: boolean;
+    fullWidth?: boolean;
 }
 declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
 
-/**
- * Generate classes for the Testimonial component.
- * @sync v2.x - Synced with latest design tokens.
- */
+declare const TESTIMONIAL_VARIANTS: {
+    readonly elevated: true;
+    readonly flat: true;
+    readonly outline: true;
+    readonly ghost: true;
+};
+type TestimonialVariant = keyof typeof TESTIMONIAL_VARIANTS;
 interface TestimonialRecipeOptions {
+    variant?: TestimonialVariant;
     disabled?: boolean;
     loading?: boolean;
     interactive?: boolean;
@@ -173,10 +183,6 @@ declare function getTestimonialAuthorInfoClasses(): string;
 declare function getTestimonialAuthorNameClasses(): string;
 declare function getTestimonialAuthorTitleClasses(): string;
 
-/**
- * Generate classes for the PricingCard component.
- * @sync v2.x - Synced with latest design tokens.
- */
 interface PricingCardRecipeOptions {
     featured?: boolean;
     disabled?: boolean;
@@ -199,10 +205,6 @@ declare const RATING_SIZES: {
     readonly lg: true;
 };
 type RatingSize = keyof typeof RATING_SIZES;
-/**
- * Generate classes for the Rating component.
- * @sync v2.x - Synced with latest design tokens.
- */
 interface RatingRecipeOptions {
     size?: RatingSize;
     disabled?: boolean;
@@ -211,10 +213,12 @@ interface RatingRecipeOptions {
     hovered?: boolean;
     focused?: boolean;
     active?: boolean;
+    pill?: boolean;
+    fullWidth?: boolean;
 }
 declare function getRatingClasses(opts?: RatingRecipeOptions): string;
 declare function getRatingStarsClasses(): string;
 declare function getRatingStarClasses(isFilled?: boolean): string;
 declare function getRatingTextClasses(): string;
 
-export { type BadgeRecipeOptions, type BadgeSize, type BadgeVariant, type ButtonRecipeOptions, type ButtonSize, type ButtonVariant, type CardRecipeOptions, type CardVariant, type IconBoxRecipeOptions, type IconBoxSize, type IconBoxVariant, type InputRecipeOptions, type InputSize, type InputState, type PricingCardRecipeOptions, type RatingRecipeOptions, type TestimonialRecipeOptions, getBadgeClasses, getButtonClasses, getCardClasses, getIconBoxClasses, getInputClasses, getPricingCardBadgeClasses, getPricingCardClasses, getPricingCardDescriptionClasses, getPricingCardPriceClasses, getPricingCardPriceContainerClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialAuthorClasses, getTestimonialAuthorInfoClasses, getTestimonialAuthorNameClasses, getTestimonialAuthorTitleClasses, getTestimonialClasses, getTestimonialQuoteClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectreIndexStylesPath, spectreStyles, spectreUtilitiesStylesPath };
+export { type BadgeRecipeOptions, type BadgeSize, type BadgeVariant, type ButtonRecipeOptions, type ButtonSize, type ButtonVariant, type CardRecipeOptions, type CardVariant, type IconBoxRecipeOptions, type IconBoxSize, type IconBoxVariant, type InputRecipeOptions, type InputSize, type InputState, type PricingCardRecipeOptions, type RatingRecipeOptions, type RatingSize, type TestimonialRecipeOptions, getBadgeClasses, getButtonClasses, getCardClasses, getIconBoxClasses, getInputClasses, getInputErrorMessageClasses, getInputHelperTextClasses, getInputLabelClasses, getInputWrapperClasses, getPricingCardBadgeClasses, getPricingCardClasses, getPricingCardDescriptionClasses, getPricingCardPriceClasses, getPricingCardPriceContainerClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialAuthorClasses, getTestimonialAuthorInfoClasses, getTestimonialAuthorNameClasses, getTestimonialAuthorTitleClasses, getTestimonialClasses, getTestimonialQuoteClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectreIndexStylesPath, spectreStyles, spectreUtilitiesStylesPath };