@phcdevworks/spectre-ui 1.3.0 → 1.5.0

package/dist/index.css

@@ -212,9 +212,9 @@
   --sp-icon-box-icon-warning: #d48806;
   --sp-icon-box-icon-danger: #dc2626;
   --sp-shadow-none: none;
-  --sp-shadow-sm: 0 1px 2px 0 rgba(34, 43, 56, 0.06);
-  --sp-shadow-md: 0 2px 6px -1px rgba(34, 43, 56, 0.08);
-  --sp-shadow-lg: 0 6px 16px -4px rgba(34, 43, 56, 0.12);
+  --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-breakpoint-sm: 640px;
   --sp-breakpoint-md: 768px;
   --sp-breakpoint-lg: 1024px;
@@ -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;
@@ -353,7 +353,7 @@
   --sp-surface-page: #141b24;
   --sp-surface-card: #222b38;
   --sp-surface-input: #374253;
-  --sp-surface-overlay: #222b38;
+  --sp-surface-overlay: rgba(0, 0, 0, 0.6);
   --sp-surface-alternate: #222b38;
   --sp-surface-hero: linear-gradient(135deg, #5d28b8 0%, #401f75 100%);
   --sp-text-on-page-default: #f7f8fb;
@@ -564,6 +564,10 @@
     --sp-component-badge-neutral-text: var(--sp-badge-neutral-text);
     --sp-component-badge-info-bg: var(--sp-badge-info-bg);
     --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);
 
     /* badge hover states derived from Spectre token semantics */
     --sp-component-badge-primary-bg-hover: var(--sp-button-primary-bghover);
@@ -573,6 +577,8 @@
     --sp-component-badge-danger-bg-hover: var(--sp-color-error-200);
     --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-padding-x-sm: var(--sp-space-8);
     --sp-component-badge-padding-x-md: var(--sp-space-12);
@@ -591,30 +597,41 @@
     --sp-component-iconbox-success-bg: var(--sp-color-success-50);
     --sp-component-iconbox-success-text: var(--sp-icon-box-icon-success);
     --sp-component-iconbox-warning-bg: var(--sp-color-warning-50);
-    --sp-component-iconbox-warning-text: var(--sp-color-warning-800);
+    --sp-component-iconbox-warning-text: var(--sp-icon-box-icon-warning);
     --sp-component-iconbox-danger-bg: var(--sp-color-error-50);
     --sp-component-iconbox-danger-text: var(--sp-icon-box-icon-danger);
     --sp-component-iconbox-info-bg: var(--sp-color-info-50);
     --sp-component-iconbox-info-text: var(--sp-badge-info-text);
+    --sp-component-iconbox-secondary-bg: var(--sp-button-secondary-bg);
+    --sp-component-iconbox-secondary-text: var(--sp-button-secondary-text);
+    --sp-component-iconbox-secondary-border: var(--sp-button-secondary-border);
+    --sp-component-iconbox-neutral-bg: var(--sp-color-neutral-50);
+    --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);
 
     /* 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-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-300);
+    --sp-component-testimonial-author-title: var(--sp-color-neutral-600);
+    --sp-component-testimonial-quote-mark: var(--sp-color-neutral-600);
 
     /* 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);
     --sp-component-pricing-card-featured-badge-bg: var(--sp-color-warning-500);
     --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-neutral-50);
-    --sp-component-pricing-card-price-description: var(--sp-color-neutral-500);
+    --sp-component-pricing-card-featured-price: var(--sp-color-white);
+    --sp-component-pricing-card-price-description: var(--sp-color-neutral-600);
 
     /* rating roles */
     --sp-component-rating-star-filled: var(--sp-color-warning-500);
@@ -627,14 +644,34 @@
 
   /* 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-800);
+    --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-300);
-    --sp-component-testimonial-quote-mark: var(--sp-color-neutral-600);
+    --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-300);
@@ -1024,7 +1061,8 @@
     box-shadow: none;
   }
 
-  .sp-input--loading {
+  .sp-input--loading,
+  .sp-input[aria-busy="true"] {
     pointer-events: none;
     opacity: var(--sp-opacity-active);
   }
@@ -1131,6 +1169,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);
@@ -1227,6 +1269,28 @@
     background-color: var(--sp-component-badge-info-bg-hover);
   }
 
+  .sp-badge--ghost {
+    background-color: var(--sp-component-badge-ghost-bg);
+    color: var(--sp-component-badge-ghost-text);
+  }
+
+  .sp-badge--ghost.sp-badge--interactive:hover,
+  .sp-badge--ghost.sp-badge--interactive.sp-badge--hover,
+  .sp-badge--ghost.sp-badge--interactive.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--interactive.sp-badge--hover,
+  .sp-badge--accent.sp-badge--interactive.is-hover {
+    background-color: var(--sp-component-badge-accent-bg-hover);
+  }
+
   .sp-badge--interactive {
     cursor: pointer;
     transition:
@@ -1269,6 +1333,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;
     font-family: var(--sp-font-family-sans);
     font-weight: var(--sp-font-md-weight);
     transition:
@@ -1348,6 +1413,12 @@
     color: var(--sp-component-iconbox-primary-text);
   }
 
+  .sp-iconbox--secondary {
+    background-color: var(--sp-component-iconbox-secondary-bg);
+    color: var(--sp-component-iconbox-secondary-text);
+    border-color: var(--sp-component-iconbox-secondary-border);
+  }
+
   .sp-iconbox--success {
     background-color: var(--sp-component-iconbox-success-bg);
     color: var(--sp-component-iconbox-success-text);
@@ -1368,6 +1439,21 @@
     color: var(--sp-component-iconbox-info-text);
   }
 
+  .sp-iconbox--neutral {
+    background-color: var(--sp-component-iconbox-neutral-bg);
+    color: var(--sp-component-iconbox-neutral-text);
+  }
+
+  .sp-iconbox--ghost {
+    background-color: var(--sp-component-iconbox-ghost-bg);
+    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--interactive {
     cursor: pointer;
   }
@@ -1426,6 +1512,10 @@
     pointer-events: none;
   }
 
+  .sp-testimonial--full {
+    height: 100%;
+  }
+
   .sp-testimonial--interactive {
     cursor: pointer;
     transition:
@@ -1440,6 +1530,7 @@
   .sp-testimonial--interactive.is-hover {
     transform: translateY(calc(var(--sp-component-border-width) * -1));
     box-shadow: var(--sp-shadow-lg);
+    background-color: var(--sp-component-testimonial-bg-hover);
   }
 
   .sp-testimonial--interactive:active,
@@ -1532,6 +1623,10 @@
     pointer-events: none;
   }
 
+  .sp-pricing-card--full {
+    height: 100%;
+  }
+
   .sp-pricing-card--interactive {
     cursor: pointer;
   }
@@ -1542,6 +1637,7 @@
   .sp-pricing-card--interactive.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,
@@ -1638,6 +1734,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

@@ -1,6 +1,7 @@
 declare const spectreBaseStylesPath = "@phcdevworks/spectre-ui/base.css";
 declare const spectreComponentsStylesPath = "@phcdevworks/spectre-ui/components.css";
 declare const spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/utilities.css";
+declare const spectreIndexStylesPath = "@phcdevworks/spectre-ui/index.css";
 declare const spectreStyles: {
     index: string;
     base: string;
@@ -24,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;
@@ -84,6 +81,8 @@ interface InputRecipeOptions {
     focused?: boolean;
     hovered?: boolean;
     active?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
 }
 declare function getInputClasses(opts?: InputRecipeOptions): string;
 
@@ -95,6 +94,8 @@ declare const BADGE_VARIANTS: {
     readonly danger: true;
     readonly neutral: true;
     readonly info: true;
+    readonly ghost: true;
+    readonly accent: true;
 };
 declare const BADGE_SIZES: {
     readonly sm: true;
@@ -103,10 +104,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;
@@ -116,15 +113,20 @@ interface BadgeRecipeOptions {
     active?: boolean;
     disabled?: boolean;
     loading?: boolean;
+    fullWidth?: boolean;
 }
 declare function getBadgeClasses(opts?: BadgeRecipeOptions): string;
 
 declare const ICONBOX_VARIANTS: {
     readonly primary: true;
+    readonly secondary: true;
     readonly success: true;
     readonly warning: true;
     readonly danger: true;
     readonly info: true;
+    readonly neutral: true;
+    readonly ghost: true;
+    readonly accent: true;
 };
 declare const ICONBOX_SIZES: {
     readonly sm: true;
@@ -146,10 +148,6 @@ interface IconBoxRecipeOptions {
 }
 declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
 
-/**
- * Generate classes for the Testimonial component.
- * @sync v2.x - Synced with latest design tokens.
- */
 interface TestimonialRecipeOptions {
     disabled?: boolean;
     loading?: boolean;
@@ -157,6 +155,7 @@ interface TestimonialRecipeOptions {
     hovered?: boolean;
     focused?: boolean;
     active?: boolean;
+    fullHeight?: boolean;
 }
 declare function getTestimonialClasses(opts?: TestimonialRecipeOptions): string;
 declare function getTestimonialQuoteClasses(): string;
@@ -165,10 +164,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;
@@ -177,6 +172,7 @@ interface PricingCardRecipeOptions {
     hovered?: boolean;
     focused?: boolean;
     active?: boolean;
+    fullHeight?: boolean;
 }
 declare function getPricingCardClasses(opts?: PricingCardRecipeOptions): string;
 declare function getPricingCardBadgeClasses(): string;
@@ -190,10 +186,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;
@@ -202,10 +194,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, 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, getPricingCardBadgeClasses, getPricingCardClasses, getPricingCardDescriptionClasses, getPricingCardPriceClasses, getPricingCardPriceContainerClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialAuthorClasses, getTestimonialAuthorInfoClasses, getTestimonialAuthorNameClasses, getTestimonialAuthorTitleClasses, getTestimonialClasses, getTestimonialQuoteClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectreIndexStylesPath, spectreStyles, spectreUtilitiesStylesPath };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 declare const spectreBaseStylesPath = "@phcdevworks/spectre-ui/base.css";
 declare const spectreComponentsStylesPath = "@phcdevworks/spectre-ui/components.css";
 declare const spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/utilities.css";
+declare const spectreIndexStylesPath = "@phcdevworks/spectre-ui/index.css";
 declare const spectreStyles: {
     index: string;
     base: string;
@@ -24,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;
@@ -84,6 +81,8 @@ interface InputRecipeOptions {
     focused?: boolean;
     hovered?: boolean;
     active?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
 }
 declare function getInputClasses(opts?: InputRecipeOptions): string;
 
@@ -95,6 +94,8 @@ declare const BADGE_VARIANTS: {
     readonly danger: true;
     readonly neutral: true;
     readonly info: true;
+    readonly ghost: true;
+    readonly accent: true;
 };
 declare const BADGE_SIZES: {
     readonly sm: true;
@@ -103,10 +104,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;
@@ -116,15 +113,20 @@ interface BadgeRecipeOptions {
     active?: boolean;
     disabled?: boolean;
     loading?: boolean;
+    fullWidth?: boolean;
 }
 declare function getBadgeClasses(opts?: BadgeRecipeOptions): string;
 
 declare const ICONBOX_VARIANTS: {
     readonly primary: true;
+    readonly secondary: true;
     readonly success: true;
     readonly warning: true;
     readonly danger: true;
     readonly info: true;
+    readonly neutral: true;
+    readonly ghost: true;
+    readonly accent: true;
 };
 declare const ICONBOX_SIZES: {
     readonly sm: true;
@@ -146,10 +148,6 @@ interface IconBoxRecipeOptions {
 }
 declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
 
-/**
- * Generate classes for the Testimonial component.
- * @sync v2.x - Synced with latest design tokens.
- */
 interface TestimonialRecipeOptions {
     disabled?: boolean;
     loading?: boolean;
@@ -157,6 +155,7 @@ interface TestimonialRecipeOptions {
     hovered?: boolean;
     focused?: boolean;
     active?: boolean;
+    fullHeight?: boolean;
 }
 declare function getTestimonialClasses(opts?: TestimonialRecipeOptions): string;
 declare function getTestimonialQuoteClasses(): string;
@@ -165,10 +164,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;
@@ -177,6 +172,7 @@ interface PricingCardRecipeOptions {
     hovered?: boolean;
     focused?: boolean;
     active?: boolean;
+    fullHeight?: boolean;
 }
 declare function getPricingCardClasses(opts?: PricingCardRecipeOptions): string;
 declare function getPricingCardBadgeClasses(): string;
@@ -190,10 +186,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;
@@ -202,10 +194,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, 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, getPricingCardBadgeClasses, getPricingCardClasses, getPricingCardDescriptionClasses, getPricingCardPriceClasses, getPricingCardPriceContainerClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialAuthorClasses, getTestimonialAuthorInfoClasses, getTestimonialAuthorNameClasses, getTestimonialAuthorTitleClasses, getTestimonialClasses, getTestimonialQuoteClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectreIndexStylesPath, spectreStyles, spectreUtilitiesStylesPath };