@marianmeres/stuic 3.115.0 → 3.116.0

package/dist/components/Pill/README.md

@@ -4,36 +4,36 @@ A small rounded inline element for tags, badges, status indicators, and filter c
 
 ## Props
 
-| Prop            | Type                                                               | Default  | Description                                                          |
-| --------------- | ------------------------------------------------------------------ | -------- | -------------------------------------------------------------------- |
-| `intent`        | `"primary" \| "accent" \| "destructive" \| "warning" \| "success"` | -        | Semantic color intent                                                |
-| `variant`       | `"solid" \| "outline" \| "ghost" \| "soft" \| "link"`              | `"soft"` | Visual variant (how colors are applied)                              |
-| `size`          | `"sm" \| "md" \| "lg"`                                             | `"md"`   | Pill size                                                            |
-| `muted`         | `boolean`                                                          | `false`  | Reduce emphasis (lower opacity)                                      |
-| `active`        | `boolean`                                                          | `false`  | Selected/active state (filter-chip behavior)                         |
+| Prop            | Type                                                               | Default  | Description                                                           |
+| --------------- | ------------------------------------------------------------------ | -------- | --------------------------------------------------------------------- |
+| `intent`        | `"primary" \| "accent" \| "destructive" \| "warning" \| "success"` | -        | Semantic color intent                                                 |
+| `variant`       | `"solid" \| "outline" \| "ghost" \| "soft" \| "link"`              | `"soft"` | Visual variant (how colors are applied)                               |
+| `size`          | `"sm" \| "md" \| "lg"`                                             | `"md"`   | Pill size                                                             |
+| `muted`         | `boolean`                                                          | `false`  | Reduce emphasis (lower opacity)                                       |
+| `active`        | `boolean`                                                          | `false`  | Selected/active state (filter-chip behavior)                          |
 | `roundedFull`   | `boolean`                                                          | `true`   | Fully rounded corners (9999px). Set `false` to use the element radius |
 | `block`         | `boolean`                                                          | `false`  | Render as block-level flex (full width). `inline-flex` by default     |
-| `unstyled`      | `boolean`                                                          | `false`  | Skip all default styling                                             |
-| `href`          | `string`                                                           | -        | Render as `<a>` with this URL                                        |
-| `target`        | `string`                                                           | -        | Link target (only when `href` is set)                                |
-| `onclick`       | `(e: MouseEvent) => void`                                          | -        | Render as `<button>` with this handler (when no `href`)              |
-| `disabled`      | `boolean`                                                          | -        | Disabled state (interactive variants only)                           |
-| `dismissible`   | `boolean`                                                          | `false`  | Show built-in X dismiss button                                       |
-| `ondismiss`     | `(e: MouseEvent) => void`                                          | -        | Called when X is clicked. Stops propagation                          |
-| `dot`           | `boolean`                                                          | `false`  | Status dot rendered before content                                   |
-| `contentBefore` | `THC`                                                              | -        | Content rendered before children                                     |
-| `contentAfter`  | `THC`                                                              | -        | Content rendered after children                                      |
-| `el`            | `HTMLElement`                                                      | -        | Element reference (bindable)                                         |
-| `class`         | `string`                                                           | -        | Additional CSS classes                                               |
+| `unstyled`      | `boolean`                                                          | `false`  | Skip all default styling                                              |
+| `href`          | `string`                                                           | -        | Render as `<a>` with this URL                                         |
+| `target`        | `string`                                                           | -        | Link target (only when `href` is set)                                 |
+| `onclick`       | `(e: MouseEvent) => void`                                          | -        | Render as `<button>` with this handler (when no `href`)               |
+| `disabled`      | `boolean`                                                          | -        | Disabled state (interactive variants only)                            |
+| `dismissible`   | `boolean`                                                          | `false`  | Show built-in X dismiss button                                        |
+| `ondismiss`     | `(e: MouseEvent) => void`                                          | -        | Called when X is clicked. Stops propagation                           |
+| `dot`           | `boolean`                                                          | `false`  | Status dot rendered before content                                    |
+| `contentBefore` | `THC`                                                              | -        | Content rendered before children                                      |
+| `contentAfter`  | `THC`                                                              | -        | Content rendered after children                                       |
+| `el`            | `HTMLElement`                                                      | -        | Element reference (bindable)                                          |
+| `class`         | `string`                                                           | -        | Additional CSS classes                                                |
 
 ## Element Resolution
 
-| Condition                         | Element                                                |
-| --------------------------------- | ------------------------------------------------------ |
-| Default                           | `<span>`                                               |
-| `href` set                        | `<a>`                                                  |
-| `onclick` set (no `href`)         | `<button>`                                             |
-| `dismissible` set                 | `<span>` wrapper containing main element + X sibling   |
+| Condition                 | Element                                              |
+| ------------------------- | ---------------------------------------------------- |
+| Default                   | `<span>`                                             |
+| `href` set                | `<a>`                                                |
+| `onclick` set (no `href`) | `<button>`                                           |
+| `dismissible` set         | `<span>` wrapper containing main element + X sibling |
 
 ## Usage
 
@@ -69,9 +69,7 @@ A small rounded inline element for tags, badges, status indicators, and filter c
 <Pill intent="accent" href="/profile">Profile</Pill>
 
 <!-- Button -->
-<Pill intent="success" onclick={() => console.log("clicked")}>
-	Click me
-</Pill>
+<Pill intent="success" onclick={() => console.log("clicked")}>Click me</Pill>
 ```
 
 ### Status Dot
@@ -150,7 +148,10 @@ A small rounded inline element for tags, badges, status indicators, and filter c
 <Pill intent="primary" roundedFull={false}>Element radius</Pill>
 
 <!-- Unstyled for full control -->
-<Pill unstyled class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-3 py-1 rounded-full">
+<Pill
+	unstyled
+	class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-3 py-1 rounded-full"
+>
 	Custom
 </Pill>
 ```
@@ -159,17 +160,17 @@ A small rounded inline element for tags, badges, status indicators, and filter c
 
 ### Component Tokens
 
-| Variable                      | Default                | Description           |
-| ----------------------------- | ---------------------- | --------------------- |
-| `--stuic-pill-radius`         | `--stuic-radius`       | Border radius (overridden to `9999px` by `roundedFull`) |
-| `--stuic-pill-font-family`    | `--font-sans`          | Font family           |
-| `--stuic-pill-font-weight`    | `--font-weight-medium` | Font weight           |
-| `--stuic-pill-transition`     | `--stuic-transition`   | Transition duration   |
-| `--stuic-pill-border-width`   | `--stuic-border-width` | Border width          |
-| `--stuic-pill-ring-width`     | `2px`                  | Focus ring width      |
-| `--stuic-pill-ring-color`     | `--stuic-color-ring`   | Focus ring color      |
-| `--stuic-pill-gap`            | `0.375rem`             | Gap between dot/before/children/after/dismiss |
-| `--stuic-pill-dot-size`       | `0.5rem`               | Status dot diameter   |
+| Variable                    | Default                | Description                                             |
+| --------------------------- | ---------------------- | ------------------------------------------------------- |
+| `--stuic-pill-radius`       | `--stuic-radius`       | Border radius (overridden to `9999px` by `roundedFull`) |
+| `--stuic-pill-font-family`  | `--font-sans`          | Font family                                             |
+| `--stuic-pill-font-weight`  | `--font-weight-medium` | Font weight                                             |
+| `--stuic-pill-transition`   | `--stuic-transition`   | Transition duration                                     |
+| `--stuic-pill-border-width` | `--stuic-border-width` | Border width                                            |
+| `--stuic-pill-ring-width`   | `2px`                  | Focus ring width                                        |
+| `--stuic-pill-ring-color`   | `--stuic-color-ring`   | Focus ring color                                        |
+| `--stuic-pill-gap`          | `0.375rem`             | Gap between dot/before/children/after/dismiss           |
+| `--stuic-pill-dot-size`     | `0.5rem`               | Status dot diameter                                     |
 
 ### Size Tokens
 

package/dist/components/Pill/index.css

@@ -96,8 +96,7 @@
 	/* Focus styles (interactive variants) */
 	a.stuic-pill:focus-visible,
 	button.stuic-pill:focus-visible {
-		outline: var(--stuic-pill-ring-width) solid
-			var(--_ring, var(--stuic-pill-ring-color));
+		outline: var(--stuic-pill-ring-width) solid var(--_ring, var(--stuic-pill-ring-color));
 		outline-offset: var(--stuic-pill-ring-offset);
 	}
 
@@ -432,8 +431,7 @@
 	}
 
 	.stuic-pill-main:focus-visible {
-		outline: var(--stuic-pill-ring-width) solid
-			var(--_ring, var(--stuic-pill-ring-color));
+		outline: var(--stuic-pill-ring-width) solid var(--_ring, var(--stuic-pill-ring-color));
 		outline-offset: 2px;
 		border-radius: 2px;
 	}
@@ -464,8 +462,7 @@
 	}
 
 	.stuic-pill-dismiss:focus-visible {
-		outline: var(--stuic-pill-ring-width) solid
-			var(--_ring, var(--stuic-pill-ring-color));
+		outline: var(--stuic-pill-ring-width) solid var(--_ring, var(--stuic-pill-ring-color));
 		outline-offset: 1px;
 		border-radius: 9999px;
 	}

package/dist/components/PricingTable/README.md

@@ -64,115 +64,115 @@ A data-driven pricing tiers component for displaying plan comparisons with featu
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `tiers` | `PricingTier[]` | **required** | Array of pricing tier definitions |
-| `billingPeriod` | `BillingPeriod` | `"monthly"` | Currently active billing period (bindable) |
-| `showBillingToggle` | `boolean` | `true` | Show the monthly/annual toggle |
-| `monthlyLabel` | `string` | `"Monthly"` | Label for monthly option in toggle |
-| `annualLabel` | `string` | `"Annual"` | Label for annual option in toggle |
-| `currency` | `string` | `"$"` | Currency symbol applied to all tiers (overridable per-tier) |
-| `periodLabel` | `{ monthly?: string; annual?: string }` | `{ monthly: "/mo", annual: "/yr" }` | Default period labels |
-| `renderToggle` | `Snippet` | - | Override the billing toggle area |
-| `renderTier` | `Snippet` | - | Override each tier card entirely |
-| `renderCta` | `Snippet` | - | Override the CTA button area per tier |
-| `renderFeatures` | `Snippet` | - | Override the feature list area per tier |
-| `renderFeatureIcon` | `Snippet` | - | Override feature icons |
-| `children` | `Snippet` | - | Header area above tiers |
-| `unstyled` | `boolean` | `false` | Skip all default styling |
-| `class` | `string` | - | Additional CSS classes for root |
-| `classTiers` | `string` | - | Additional CSS classes for tiers grid |
-| `classTier` | `string` | - | Additional CSS classes for each tier card |
-| `classToggle` | `string` | - | Additional CSS classes for the billing toggle ButtonGroupRadio |
-| `styleToggle` | `string` | - | Additional inline styles for the billing toggle ButtonGroupRadio |
-| `el` | `HTMLElement` | - | Bindable element reference |
-| `style` | `string` | - | Inline style (useful for CSS variable overrides) |
+| Prop                | Type                                    | Default                             | Description                                                      |
+| ------------------- | --------------------------------------- | ----------------------------------- | ---------------------------------------------------------------- |
+| `tiers`             | `PricingTier[]`                         | **required**                        | Array of pricing tier definitions                                |
+| `billingPeriod`     | `BillingPeriod`                         | `"monthly"`                         | Currently active billing period (bindable)                       |
+| `showBillingToggle` | `boolean`                               | `true`                              | Show the monthly/annual toggle                                   |
+| `monthlyLabel`      | `string`                                | `"Monthly"`                         | Label for monthly option in toggle                               |
+| `annualLabel`       | `string`                                | `"Annual"`                          | Label for annual option in toggle                                |
+| `currency`          | `string`                                | `"$"`                               | Currency symbol applied to all tiers (overridable per-tier)      |
+| `periodLabel`       | `{ monthly?: string; annual?: string }` | `{ monthly: "/mo", annual: "/yr" }` | Default period labels                                            |
+| `renderToggle`      | `Snippet`                               | -                                   | Override the billing toggle area                                 |
+| `renderTier`        | `Snippet`                               | -                                   | Override each tier card entirely                                 |
+| `renderCta`         | `Snippet`                               | -                                   | Override the CTA button area per tier                            |
+| `renderFeatures`    | `Snippet`                               | -                                   | Override the feature list area per tier                          |
+| `renderFeatureIcon` | `Snippet`                               | -                                   | Override feature icons                                           |
+| `children`          | `Snippet`                               | -                                   | Header area above tiers                                          |
+| `unstyled`          | `boolean`                               | `false`                             | Skip all default styling                                         |
+| `class`             | `string`                                | -                                   | Additional CSS classes for root                                  |
+| `classTiers`        | `string`                                | -                                   | Additional CSS classes for tiers grid                            |
+| `classTier`         | `string`                                | -                                   | Additional CSS classes for each tier card                        |
+| `classToggle`       | `string`                                | -                                   | Additional CSS classes for the billing toggle ButtonGroupRadio   |
+| `styleToggle`       | `string`                                | -                                   | Additional inline styles for the billing toggle ButtonGroupRadio |
+| `el`                | `HTMLElement`                           | -                                   | Bindable element reference                                       |
+| `style`             | `string`                                | -                                   | Inline style (useful for CSS variable overrides)                 |
 
 ## PricingTier
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `id` | `string` | **required** | Unique identifier |
-| `name` | `THC` | **required** | Tier display name |
-| `description` | `THC` | - | Short description or tagline |
-| `price` | `{ monthly?: number \| string; annual?: number \| string }` | **required** | Price per billing period. Strings like `"Free"` or `"Custom"` render as-is. |
-| `currency` | `string` | - | Override table-level currency for this tier |
-| `periodLabel` | `{ monthly?: string; annual?: string }` | - | Override period labels for this tier |
-| `annualDiscountBadge` | `THC` | - | Badge text shown when annual is selected (e.g. "Save 20%") |
-| `features` | `PricingFeature[]` | - | Feature list for this tier |
-| `inheritFrom` | `string` | - | Tier id to inherit from ("Everything in X, plus...") |
-| `inheritLabel` | `THC` | - | Custom inheritance text |
-| `ctaLabel` | `THC` | - | CTA button label |
-| `ctaOnClick` | `(tier, period) => void` | - | CTA click handler |
-| `ctaHref` | `string` | - | CTA as anchor link |
-| `ctaIntent` | `IntentColorKey` | `"primary"` (highlighted) | CTA color intent |
-| `ctaVariant` | `ButtonVariant` | `"solid"` (highlighted) / `"outline"` | CTA visual variant |
-| `highlighted` | `boolean` | `false` | Mark as recommended/popular |
-| `highlightedBadge` | `THC` | - | Badge text (e.g. "Most Popular") |
-| `disabled` | `boolean` | `false` | Disabled/sold-out state |
-| `disabledLabel` | `THC` | - | Text shown instead of CTA when disabled |
+| Property              | Type                                                        | Default                               | Description                                                                 |
+| --------------------- | ----------------------------------------------------------- | ------------------------------------- | --------------------------------------------------------------------------- |
+| `id`                  | `string`                                                    | **required**                          | Unique identifier                                                           |
+| `name`                | `THC`                                                       | **required**                          | Tier display name                                                           |
+| `description`         | `THC`                                                       | -                                     | Short description or tagline                                                |
+| `price`               | `{ monthly?: number \| string; annual?: number \| string }` | **required**                          | Price per billing period. Strings like `"Free"` or `"Custom"` render as-is. |
+| `currency`            | `string`                                                    | -                                     | Override table-level currency for this tier                                 |
+| `periodLabel`         | `{ monthly?: string; annual?: string }`                     | -                                     | Override period labels for this tier                                        |
+| `annualDiscountBadge` | `THC`                                                       | -                                     | Badge text shown when annual is selected (e.g. "Save 20%")                  |
+| `features`            | `PricingFeature[]`                                          | -                                     | Feature list for this tier                                                  |
+| `inheritFrom`         | `string`                                                    | -                                     | Tier id to inherit from ("Everything in X, plus...")                        |
+| `inheritLabel`        | `THC`                                                       | -                                     | Custom inheritance text                                                     |
+| `ctaLabel`            | `THC`                                                       | -                                     | CTA button label                                                            |
+| `ctaOnClick`          | `(tier, period) => void`                                    | -                                     | CTA click handler                                                           |
+| `ctaHref`             | `string`                                                    | -                                     | CTA as anchor link                                                          |
+| `ctaIntent`           | `IntentColorKey`                                            | `"primary"` (highlighted)             | CTA color intent                                                            |
+| `ctaVariant`          | `ButtonVariant`                                             | `"solid"` (highlighted) / `"outline"` | CTA visual variant                                                          |
+| `highlighted`         | `boolean`                                                   | `false`                               | Mark as recommended/popular                                                 |
+| `highlightedBadge`    | `THC`                                                       | -                                     | Badge text (e.g. "Most Popular")                                            |
+| `disabled`            | `boolean`                                                   | `false`                               | Disabled/sold-out state                                                     |
+| `disabledLabel`       | `THC`                                                       | -                                     | Text shown instead of CTA when disabled                                     |
 
 ## PricingFeature
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `label` | `THC` | **required** | Feature label |
-| `icon` | `boolean \| THC` | `true` | `true` = checkmark, `false` = dash, or custom THC |
+| Property | Type             | Default      | Description                                       |
+| -------- | ---------------- | ------------ | ------------------------------------------------- |
+| `label`  | `THC`            | **required** | Feature label                                     |
+| `icon`   | `boolean \| THC` | `true`       | `true` = checkmark, `false` = dash, or custom THC |
 
 ## CSS Variables
 
 ### Layout
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--stuic-pricing-table-gap` | `2rem` | Gap between toggle and tiers |
-| `--stuic-pricing-table-tiers-gap` | `1.5rem` | Gap between tier cards |
-| `--stuic-pricing-table-tier-min-width` | `280px` | Minimum tier card width (controls grid breakpoints) |
-| `--stuic-pricing-table-tier-padding` | `1.5rem` | Tier card padding |
-| `--stuic-pricing-table-tier-gap` | `1.5rem` | Gap between sections within a tier |
+| Variable                               | Default  | Description                                         |
+| -------------------------------------- | -------- | --------------------------------------------------- |
+| `--stuic-pricing-table-gap`            | `2rem`   | Gap between toggle and tiers                        |
+| `--stuic-pricing-table-tiers-gap`      | `1.5rem` | Gap between tier cards                              |
+| `--stuic-pricing-table-tier-min-width` | `280px`  | Minimum tier card width (controls grid breakpoints) |
+| `--stuic-pricing-table-tier-padding`   | `1.5rem` | Tier card padding                                   |
+| `--stuic-pricing-table-tier-gap`       | `1.5rem` | Gap between sections within a tier                  |
 
 ### Tier Card
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--stuic-pricing-table-tier-bg` | card/background | Tier background |
-| `--stuic-pricing-table-tier-border-color` | border | Tier border color |
-| `--stuic-pricing-table-tier-border-width` | border-width | Tier border width |
-| `--stuic-pricing-table-tier-radius` | radius-container | Tier border radius |
-| `--stuic-pricing-table-tier-shadow` | shadow | Tier box shadow |
+| Variable                                  | Default          | Description        |
+| ----------------------------------------- | ---------------- | ------------------ |
+| `--stuic-pricing-table-tier-bg`           | card/background  | Tier background    |
+| `--stuic-pricing-table-tier-border-color` | border           | Tier border color  |
+| `--stuic-pricing-table-tier-border-width` | border-width     | Tier border width  |
+| `--stuic-pricing-table-tier-radius`       | radius-container | Tier border radius |
+| `--stuic-pricing-table-tier-shadow`       | shadow           | Tier box shadow    |
 
 ### Highlighted Tier
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--stuic-pricing-table-tier-border-color-highlighted` | primary | Highlighted border color |
-| `--stuic-pricing-table-tier-border-width-highlighted` | `2px` | Highlighted border width |
-| `--stuic-pricing-table-tier-shadow-highlighted` | shadow-hover | Highlighted shadow |
-| `--stuic-pricing-table-tier-scale-highlighted` | `1.02` | Desktop scale transform |
+| Variable                                              | Default      | Description              |
+| ----------------------------------------------------- | ------------ | ------------------------ |
+| `--stuic-pricing-table-tier-border-color-highlighted` | primary      | Highlighted border color |
+| `--stuic-pricing-table-tier-border-width-highlighted` | `2px`        | Highlighted border width |
+| `--stuic-pricing-table-tier-shadow-highlighted`       | shadow-hover | Highlighted shadow       |
+| `--stuic-pricing-table-tier-scale-highlighted`        | `1.02`       | Desktop scale transform  |
 
 ### Badge
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--stuic-pricing-table-badge-bg` | primary | Badge background |
-| `--stuic-pricing-table-badge-color` | primary-foreground | Badge text color |
-| `--stuic-pricing-table-badge-font-size` | text-xs | Badge font size |
-| `--stuic-pricing-table-badge-padding` | `0.25rem 0.75rem` | Badge padding |
+| Variable                                | Default            | Description      |
+| --------------------------------------- | ------------------ | ---------------- |
+| `--stuic-pricing-table-badge-bg`        | primary            | Badge background |
+| `--stuic-pricing-table-badge-color`     | primary-foreground | Badge text color |
+| `--stuic-pricing-table-badge-font-size` | text-xs            | Badge font size  |
+| `--stuic-pricing-table-badge-padding`   | `0.25rem 0.75rem`  | Badge padding    |
 
 ### Toggle
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--stuic-pricing-table-toggle-bg` | muted | Toggle track background |
-| `--stuic-pricing-table-toggle-bg-active` | background | Active option background |
-| `--stuic-pricing-table-toggle-color` | muted-foreground | Option text color |
-| `--stuic-pricing-table-toggle-color-active` | foreground | Active option text color |
+| Variable                                    | Default          | Description              |
+| ------------------------------------------- | ---------------- | ------------------------ |
+| `--stuic-pricing-table-toggle-bg`           | muted            | Toggle track background  |
+| `--stuic-pricing-table-toggle-bg-active`    | background       | Active option background |
+| `--stuic-pricing-table-toggle-color`        | muted-foreground | Option text color        |
+| `--stuic-pricing-table-toggle-color-active` | foreground       | Active option text color |
 
 ### Typography
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--stuic-pricing-table-tier-name-font-size` | text-lg | Tier name size |
-| `--stuic-pricing-table-tier-description-font-size` | text-sm | Description size |
-| `--stuic-pricing-table-price-font-size` | text-4xl | Price size |
-| `--stuic-pricing-table-price-period-font-size` | text-sm | Period label size |
+| Variable                                           | Default  | Description       |
+| -------------------------------------------------- | -------- | ----------------- |
+| `--stuic-pricing-table-tier-name-font-size`        | text-lg  | Tier name size    |
+| `--stuic-pricing-table-tier-description-font-size` | text-sm  | Description size  |
+| `--stuic-pricing-table-price-font-size`            | text-4xl | Price size        |
+| `--stuic-pricing-table-price-period-font-size`     | text-sm  | Period label size |

package/dist/components/PricingTable/index.css

@@ -40,7 +40,10 @@
 		position: relative;
 		display: flex;
 		flex-direction: column;
-		background: var(--stuic-pricing-table-tier-bg, var(--stuic-color-card, var(--stuic-color-background)));
+		background: var(
+			--stuic-pricing-table-tier-bg,
+			var(--stuic-color-card, var(--stuic-color-background))
+		);
 		border: var(--stuic-pricing-table-tier-border-width, var(--stuic-border-width)) solid
 			var(--stuic-pricing-table-tier-border-color, var(--stuic-color-border));
 		border-radius: var(--stuic-pricing-table-tier-radius, var(--stuic-radius-container));
@@ -82,9 +85,7 @@
 
 	@media (min-width: 768px) {
 		.stuic-pricing-table-tier[data-highlighted] {
-			transform: scale(
-				var(--stuic-pricing-table-tier-scale-highlighted, 1.02)
-			);
+			transform: scale(var(--stuic-pricing-table-tier-scale-highlighted, 1.02));
 		}
 	}
 
@@ -108,7 +109,10 @@
 		background: var(--stuic-pricing-table-badge-bg, var(--stuic-color-primary));
 		color: var(--stuic-pricing-table-badge-color, var(--stuic-color-primary-foreground));
 		font-size: var(--stuic-pricing-table-badge-font-size, var(--text-xs));
-		font-weight: var(--stuic-pricing-table-badge-font-weight, var(--font-weight-semibold, 600));
+		font-weight: var(
+			--stuic-pricing-table-badge-font-weight,
+			var(--font-weight-semibold, 600)
+		);
 		padding: var(--stuic-pricing-table-badge-padding, 0.25rem 0.75rem);
 		border-radius: 9999px;
 		white-space: nowrap;
@@ -135,10 +139,7 @@
 	}
 
 	.stuic-pricing-table-tier-description {
-		font-size: var(
-			--stuic-pricing-table-tier-description-font-size,
-			var(--text-sm)
-		);
+		font-size: var(--stuic-pricing-table-tier-description-font-size, var(--text-sm));
 		color: var(
 			--stuic-pricing-table-tier-description-color,
 			var(--stuic-color-muted-foreground)
@@ -167,10 +168,7 @@
 	}
 
 	.stuic-pricing-table-price-period {
-		font-size: var(
-			--stuic-pricing-table-price-period-font-size,
-			var(--text-sm)
-		);
+		font-size: var(--stuic-pricing-table-price-period-font-size, var(--text-sm));
 		color: var(
 			--stuic-pricing-table-price-period-color,
 			var(--stuic-color-muted-foreground)
@@ -182,10 +180,7 @@
 	   ============================================================================ */
 
 	.stuic-pricing-table-discount-badge {
-		font-size: var(
-			--stuic-pricing-table-discount-badge-font-size,
-			var(--text-xs)
-		);
+		font-size: var(--stuic-pricing-table-discount-badge-font-size, var(--text-xs));
 		font-weight: var(--font-weight-medium, 500);
 		background: var(
 			--stuic-pricing-table-discount-badge-bg,
@@ -220,14 +215,8 @@
 	}
 
 	.stuic-pricing-table-inherit {
-		font-size: var(
-			--stuic-pricing-table-inherit-font-size,
-			var(--text-sm)
-		);
-		color: var(
-			--stuic-pricing-table-inherit-color,
-			var(--stuic-color-muted-foreground)
-		);
+		font-size: var(--stuic-pricing-table-inherit-font-size, var(--text-sm));
+		color: var(--stuic-pricing-table-inherit-color, var(--stuic-color-muted-foreground));
 		font-style: italic;
 		padding-bottom: 0.25rem;
 	}
@@ -245,14 +234,8 @@
 		display: flex;
 		align-items: baseline;
 		gap: 0.5rem;
-		font-size: var(
-			--stuic-pricing-table-feature-font-size,
-			var(--text-sm)
-		);
-		color: var(
-			--stuic-pricing-table-feature-color,
-			var(--stuic-color-foreground)
-		);
+		font-size: var(--stuic-pricing-table-feature-font-size, var(--text-sm));
+		color: var(--stuic-pricing-table-feature-color, var(--stuic-color-foreground));
 	}
 
 	.stuic-pricing-table-feature-icon {
@@ -265,14 +248,16 @@
 		);
 	}
 
-	.stuic-pricing-table-feature-item:not([data-included]) .stuic-pricing-table-feature-icon {
+	.stuic-pricing-table-feature-item:not([data-included])
+		.stuic-pricing-table-feature-icon {
 		color: var(
 			--stuic-pricing-table-feature-icon-color-excluded,
 			var(--stuic-color-muted-foreground)
 		);
 	}
 
-	.stuic-pricing-table-feature-item:not([data-included]) .stuic-pricing-table-feature-label {
+	.stuic-pricing-table-feature-item:not([data-included])
+		.stuic-pricing-table-feature-label {
 		color: var(
 			--stuic-pricing-table-feature-color-excluded,
 			var(--stuic-color-muted-foreground)