@urbicon-ui/blocks 6.2.0 → 6.3.1

package/dist/primitives/Dialog/Dialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { useBlocksI18n } from '../..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { resolveIcon } from '../../icons';
   import CloseIconDefault from '../../icons/CloseIcon.svelte';
   import { onDestroy } from 'svelte';
@@ -14,7 +14,7 @@
   import { overlayStack, getOverlayMotion } from '../../utils';
   import Button from '../Button/Button.svelte';
   import type { DialogProps } from './index';
-  import { dialogVariants } from './dialog.variants';
+  import { dialogVariants, type DialogVariants } from './dialog.variants';
 
   const bt = useBlocksI18n();
 
@@ -62,13 +62,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Dialog?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Dialog', preset),
-      slotClassesProp
-    )
-  );
 
   let dialogEl = $state<HTMLDialogElement>();
   let panelEl = $state<HTMLElement>();
@@ -82,7 +75,11 @@
   const bodyId = `dialog-body-${uid}`;
   const overlayId = `dialog-${uid}`;
 
-  const styles = $derived(dialogVariants({ size, placement, intent }));
+  const variantProps: DialogVariants = $derived({ size, placement, intent });
+  const styles = $derived(dialogVariants(variantProps));
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Dialog', preset, variantProps, slotClassesProp)
+  );
 
   function requestClose() {
     if (!isVisible || !open) return;

package/dist/primitives/Dialog/dialog.variants.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/variants';
+import { type SlotNames, type VariantProps } from '../../utils/variants';
 export declare const dialogVariants: (props?: import("../../utils/variants").TVProps<{
     size: {
         sm: {
@@ -103,3 +103,5 @@ export declare const dialogVariants: (props?: import("../../utils/variants").TVP
     }) | undefined) => string;
 };
 export type DialogVariants = VariantProps<typeof dialogVariants>;
+/** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */
+export type DialogSlots = SlotNames<typeof dialogVariants>;

package/dist/primitives/Dialog/index.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLDialogAttributes } from 'svelte/elements';
-import type { DialogVariants } from './dialog.variants';
+import type { DialogSlots, DialogVariants } from './dialog.variants';
 /**
  * @description Overlay dialog built on native dialog element. Can be used as a simple
  * content-agnostic overlay or as a structured dialog with title, footer, and intent accent.
@@ -76,7 +76,7 @@ export interface DialogProps extends Omit<HTMLDialogAttributes, 'children' | 'op
     /** Strip all default styles. Combine with slotClasses for fully custom appearance. */
     unstyled?: boolean;
     /** Per-slot class overrides merged with variant styles. */
-    slotClasses?: Partial<Record<'dialog' | 'backdrop' | 'panel' | 'content' | 'header' | 'title' | 'body' | 'footer', string>>;
+    slotClasses?: Partial<Record<DialogSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Dialog: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Drawer/Drawer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { useBlocksI18n } from '../..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { resolveIcon } from '../../icons';
   import CloseIconDefault from '../../icons/CloseIcon.svelte';
   import { onDestroy } from 'svelte';
@@ -14,7 +14,7 @@
   import { overlayStack, getOverlayMotion } from '../../utils';
   import Button from '../Button/Button.svelte';
   import type { DrawerProps } from './index';
-  import { drawerVariants } from './drawer.variants';
+  import { drawerVariants, type DrawerVariants } from './drawer.variants';
 
   const bt = useBlocksI18n();
 
@@ -54,13 +54,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Drawer?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Drawer', preset),
-      slotClassesProp
-    )
-  );
 
   let dialogElement = $state<HTMLDialogElement>();
   let panelElement = $state<HTMLElement>();
@@ -72,7 +65,11 @@
   const bodyId = `drawer-body-${uid}`;
   const overlayId = `drawer-${uid}`;
 
-  const styles = $derived(drawerVariants({ placement, size, intent }));
+  const variantProps: DrawerVariants = $derived({ placement, size, intent });
+  const styles = $derived(drawerVariants(variantProps));
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Drawer', preset, variantProps, slotClassesProp)
+  );
 
   const motion = $derived(
     getOverlayMotion({

package/dist/primitives/Drawer/drawer.variants.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/variants';
+import { type SlotNames, type VariantProps } from '../../utils/variants';
 export declare const drawerVariants: (props?: import("../../utils/variants").TVProps<{
     placement: {
         left: {
@@ -92,3 +92,5 @@ export declare const drawerVariants: (props?: import("../../utils/variants").TVP
     }) | undefined) => string;
 };
 export type DrawerVariants = VariantProps<typeof drawerVariants>;
+/** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */
+export type DrawerSlots = SlotNames<typeof drawerVariants>;

package/dist/primitives/Drawer/index.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLDialogAttributes } from 'svelte/elements';
-import type { DrawerVariants } from './drawer.variants';
+import type { DrawerSlots, DrawerVariants } from './drawer.variants';
 /**
  * @description Slide-in panel overlay from any edge of the viewport.
  * Uses native dialog with focus trap, backdrop click dismiss, and Escape key support.
@@ -66,7 +66,7 @@ export interface DrawerProps extends Omit<HTMLDialogAttributes, 'children' | 'op
     /** Strip all default styles. Combine with slotClasses for fully custom appearance. */
     unstyled?: boolean;
     /** Per-slot class overrides merged with variant styles. */
-    slotClasses?: Partial<Record<'dialog' | 'backdrop' | 'panel' | 'header' | 'title' | 'body' | 'footer', string>>;
+    slotClasses?: Partial<Record<DrawerSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Drawer: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Input/Input.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { useBlocksI18n, mintRegistry, createPersistentState } from '../..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { useFormField, getTierContext } from '../../utils';
   import type { InputProps } from '.';
-  import { inputVariants } from './input.variants';
+  import { inputVariants, type InputVariants } from './input.variants';
   import { resolveIcon } from '../../icons';
   import CloseIconDefault from '../../icons/CloseIcon.svelte';
 
@@ -50,13 +50,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Input?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Input', preset),
-      slotClassesProp
-    )
-  );
 
   let inputRef = $state<HTMLInputElement>();
 
@@ -99,20 +92,27 @@
   const hasLeftIcon = $derived(!!leftIcon);
   const hasRightIcon = $derived(!!(effectiveRightIcon || shouldShowClear));
 
-  const styles = $derived(
-    inputVariants({
-      tier: effectiveTier,
-      variant,
-      size,
-      intent,
-      disabled: disabled || undefined,
-      readonly: readonly || undefined,
-      error: !!error || undefined,
-      required: required || undefined,
-      hasLeftIcon: hasLeftIcon || undefined,
-      hasRightIcon: hasRightIcon || undefined,
-      messageType: error ? 'error' : 'helper'
-    })
+  // Variant props feed both the tv() style computation and the slot-class
+  // cascade — extracted into one derived so `resolveSlotClasses` can match
+  // conditional `overrides` against the input's active variants.
+  const variantProps: InputVariants = $derived({
+    tier: effectiveTier,
+    variant,
+    size,
+    intent,
+    disabled: disabled || undefined,
+    readonly: readonly || undefined,
+    error: !!error || undefined,
+    required: required || undefined,
+    hasLeftIcon: hasLeftIcon || undefined,
+    hasRightIcon: hasRightIcon || undefined,
+    messageType: error ? 'error' : 'helper'
+  });
+
+  const styles = $derived(inputVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Input', preset, variantProps, slotClassesProp)
   );
 
   // ARIA wiring is shared with every form primitive — see XC-2.
@@ -179,11 +179,17 @@
       : styles.container({ class: slotClasses?.container })}
   >
     {#if leftIcon}
-      <div class={styles.iconContainer({ iconPosition: 'left' })}>
+      <div
+        class={unstyled
+          ? (slotClasses?.iconContainer ?? '')
+          : styles.iconContainer({ iconPosition: 'left', class: slotClasses?.iconContainer })}
+      >
         {#if onLeftIconClick}
           <button
             type="button"
-            class={styles.iconButton()}
+            class={unstyled
+              ? (slotClasses?.iconButton ?? '')
+              : styles.iconButton({ class: slotClasses?.iconButton })}
             onclick={handleLeftIconClick}
             {disabled}
             aria-label={leftIconAriaLabel}
@@ -191,7 +197,11 @@
             {@render leftIcon()}
           </button>
         {:else}
-          <span class={styles.iconDecoration()}>
+          <span
+            class={unstyled
+              ? (slotClasses?.iconDecoration ?? '')
+              : styles.iconDecoration({ class: slotClasses?.iconDecoration })}
+          >
             {@render leftIcon()}
           </span>
         {/if}
@@ -220,7 +230,9 @@
       >
         <button
           type="button"
-          class={styles.iconButton()}
+          class={unstyled
+            ? (slotClasses?.iconButton ?? '')
+            : styles.iconButton({ class: slotClasses?.iconButton })}
           onclick={handleClear}
           aria-label={bt('accessibility.clearInput')}
         >
@@ -236,7 +248,9 @@
         {#if onRightIconClick}
           <button
             type="button"
-            class={styles.iconButton()}
+            class={unstyled
+              ? (slotClasses?.iconButton ?? '')
+              : styles.iconButton({ class: slotClasses?.iconButton })}
             onclick={handleRightIconClick}
             {disabled}
             aria-label={rightIconAriaLabel}
@@ -244,7 +258,11 @@
             {@render effectiveRightIcon()}
           </button>
         {:else}
-          <span class={styles.iconDecoration()}>
+          <span
+            class={unstyled
+              ? (slotClasses?.iconDecoration ?? '')
+              : styles.iconDecoration({ class: slotClasses?.iconDecoration })}
+          >
             {@render effectiveRightIcon()}
           </span>
         {/if}
@@ -253,7 +271,13 @@
   </div>
 
   {#if ff.errorId}
-    <div id={ff.errorId} class={styles.message()} role="alert">
+    <div
+      id={ff.errorId}
+      class={unstyled
+        ? (slotClasses?.message ?? '')
+        : styles.message({ class: slotClasses?.message })}
+      role="alert"
+    >
       {error}
     </div>
   {:else if ff.hintId}

package/dist/primitives/Input/index.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 import type { MintProp } from '../../mint';
-import type { InputVariants } from './input.variants';
+import type { InputSlots, InputVariants } from './input.variants';
 /**
  * @description Text input with labels, validation states, icons, and clearable functionality.
  * Supports outlined, filled, and ghost visual variants with automatic ARIA linking.
@@ -68,8 +68,12 @@ export interface InputProps extends Omit<InputVariants, 'error'>, Omit<HTMLInput
     class?: string;
     /** Remove all default tv() classes — only user-provided classes apply. */
     unstyled?: boolean;
-    /** Per-slot class overrides merged with tv() styles. */
-    slotClasses?: Partial<Record<'wrapper' | 'container' | 'base' | 'label' | 'message' | 'iconContainer', string>>;
+    /**
+     * Per-slot class overrides merged with tv() styles. Slots: wrapper (root —
+     * what `class` also targets) | container | base (the `<input>` element) |
+     * label | message | iconContainer | iconButton | iconDecoration.
+     */
+    slotClasses?: Partial<Record<InputSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Input: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Input/input.variants.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/variants';
+import { type SlotNames, type VariantProps } from '../../utils/variants';
 export declare const inputVariants: (props?: import("../../utils/variants").TVProps<{
     tier: {
         modify: {
@@ -252,3 +252,5 @@ export declare const inputVariants: (props?: import("../../utils/variants").TVPr
     }) | undefined) => string;
 };
 export type InputVariants = VariantProps<typeof inputVariants>;
+/** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */
+export type InputSlots = SlotNames<typeof inputVariants>;

package/dist/primitives/Menu/Menu.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="TItem extends MenuItemType = MenuItemType">
   import { useBlocksI18n } from '../..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
-  import { Button, menuVariants } from '..';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import { Button, menuVariants, type MenuVariants } from '..';
   import { resolveIcon } from '../../icons';
   import ChevronDownIconDefault from '../../icons/ChevronDownIcon.svelte';
   import { getTierContext } from '../../utils/tier-context';
@@ -52,13 +52,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Menu?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Menu', preset),
-      slotClassesProp
-    )
-  );
 
   const propsId = $props.id();
   const rootId = $derived(idProp ?? `menu-${propsId}`);
@@ -230,20 +223,27 @@
     return 'md';
   }
 
-  const styles = $derived(
-    menuVariants({
-      open,
-      itemSize: itemSizeForDepth(0),
-      syncWidth,
-      placement,
-      chevronAnimation,
-      usePortal,
-      // Drives the floating panel's corner radius via the `tier` axis on
-      // menuVariants — keeps the panel visually attached to its trigger
-      // (e.g. pill trigger → rounded-lg panel instead of near-flat
-      // rounded-contain).
-      tier: effectiveTier
-    })
+  // Variant props feed both the tv() style computation and the slot-class
+  // cascade — extracted into one derived so `resolveSlotClasses` can match
+  // conditional `overrides` against the menu's active variants.
+  const variantProps: MenuVariants = $derived({
+    open,
+    itemSize: itemSizeForDepth(0),
+    syncWidth,
+    placement,
+    chevronAnimation,
+    usePortal,
+    // Drives the floating panel's corner radius via the `tier` axis on
+    // menuVariants — keeps the panel visually attached to its trigger
+    // (e.g. pill trigger → rounded-lg panel instead of near-flat
+    // rounded-contain).
+    tier: effectiveTier
+  });
+
+  const styles = $derived(menuVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Menu', preset, variantProps, slotClassesProp)
   );
 
   const ctx: MenuContext = {

package/dist/primitives/Menu/index.d.ts

@@ -5,6 +5,7 @@ import type { ButtonVariants, MenuVariants } from '..';
 import type { AnimationProps } from '../../utils';
 import type { Placement } from '../../utils/floating';
 import type { InteractiveTier } from '../../utils/tier-context';
+import type { MenuSlots } from './menu.variants';
 /**
  * @description Action menu (`role="menu"`) triggered by a button. Items are
  * verbs the user can invoke — Edit, Delete, Share, Export — and dispatch an
@@ -69,8 +70,10 @@ export interface MenuSpecificProps<TItem extends MenuItemType = MenuItemType> {
     unstyled?: boolean;
     /**
      * Per-slot class overrides merged with tailwind-variants styles.
+     * Slots: base | trigger | triggerText | chevron | content | header | section |
+     * divider | items | item | indicator | submenu | footer
      */
-    slotClasses?: Partial<Record<'base' | 'trigger' | 'triggerText' | 'chevron' | 'content' | 'header' | 'section' | 'divider' | 'items' | 'item' | 'indicator' | 'submenu' | 'footer', string>>;
+    slotClasses?: Partial<Record<MenuSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Menu: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Menu/menu.variants.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/variants';
+import { type SlotNames, type VariantProps } from '../../utils/variants';
 export declare const menuVariants: (props?: import("../../utils/variants").TVProps<{
     open: {
         true: {
@@ -242,3 +242,5 @@ export declare const menuIconVariants: (props?: import("../../utils/variants").T
 }> | undefined) => string;
 export type MenuVariants = VariantProps<typeof menuVariants>;
 export type MenuIconVariants = VariantProps<typeof menuIconVariants>;
+/** Slot names derived from the tv() config — single source of truth for slotClasses. */
+export type MenuSlots = SlotNames<typeof menuVariants>;

package/dist/primitives/Pagination/Pagination.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import PaginationItem from './PaginationItem.svelte';
   import { useBlocksI18n } from '../..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { paginationVariants } from '..';
+  import type { PaginationVariants } from './pagination.variants';
   import { MediaQuery } from 'svelte/reactivity';
   import { computeEllipsisState, computeVisiblePageNumbers } from './pagination.engine';
   import type { PaginationProps } from '.';
@@ -49,21 +50,18 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Pagination?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Pagination', preset),
-      slotClassesProp
-    )
-  );
 
-  const styles = $derived(
-    paginationVariants({
-      layout,
-      size,
-      disabled,
-      loading
-    })
+  const variantProps: PaginationVariants = $derived({
+    layout,
+    size,
+    disabled,
+    loading
+  });
+
+  const styles = $derived(paginationVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Pagination', preset, variantProps, slotClassesProp)
   );
 
   // Calculate pagination info for table layout
@@ -264,7 +262,11 @@
     </div>
   {:else}
     <!-- Default Layout: Full pagination -->
-    <div class={styles.controls()}>
+    <div
+      class={unstyled
+        ? (slotClasses?.controls ?? '')
+        : styles.controls({ class: slotClasses?.controls })}
+    >
       {#if showFirstLast && !isFirstPage && showStartEllipsis}
         <PaginationItem
           {size}

package/dist/primitives/Pagination/index.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { MintProp } from '../../mint';
 import type { InteractiveTier } from '../../utils/tier-context';
-import type { PaginationVariants } from './pagination.variants';
+import type { PaginationSlots, PaginationVariants } from './pagination.variants';
 export interface PaginationPageItem {
     label: string;
     value: number;
@@ -90,7 +90,7 @@ export interface PaginationProps extends Omit<PaginationVariants, 'disabled' | '
     /** Strip all default tailwind-variants classes for a fully custom build. */
     unstyled?: boolean;
     /** Per-slot class overrides merged with (or replacing, when unstyled) tv styles. Slots: base, info, controls, ellipsis. */
-    slotClasses?: Partial<Record<'base' | 'info' | 'controls' | 'ellipsis', string>>;
+    slotClasses?: Partial<Record<PaginationSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Pagination: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Pagination/pagination.variants.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/variants';
+import { type SlotNames, type VariantProps } from '../../utils/variants';
 export declare const paginationVariants: (props?: import("../../utils/variants").TVProps<{
     layout: {
         default: {
@@ -79,3 +79,5 @@ export declare const paginationVariants: (props?: import("../../utils/variants")
     }) | undefined) => string;
 };
 export type PaginationVariants = VariantProps<typeof paginationVariants>;
+/** Slot names derived from the tv() config — single source of truth for slotClasses. */
+export type PaginationSlots = SlotNames<typeof paginationVariants>;

package/dist/primitives/Popover/Popover.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { untrack } from 'svelte';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import {
     autoUpdate,
     computePosition,
@@ -51,11 +51,7 @@
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Popover?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Popover', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'Popover', preset, { size }, slotClassesProp)
   );
 
   let internalTriggerElement = $state<HTMLElement | null>(null);

package/dist/primitives/Progress/Progress.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { useBlocksI18n } from '../..';
   import type { ProgressProps } from './index';
-  import { progressVariants } from './progress.variants';
+  import { progressVariants, type ProgressVariants } from './progress.variants';
 
   const bt = useBlocksI18n();
 
@@ -30,13 +30,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Progress?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Progress', preset),
-      slotClassesProp
-    )
-  );
 
   const isIndeterminate = $derived(indeterminateProp || value === undefined);
   const clampedValue = $derived(value !== undefined ? Math.min(Math.max(value, min), max) : 0);
@@ -47,14 +40,21 @@
     formatValue ? formatValue(clampedValue, max) : defaultFormat(clampedValue, max)
   );
 
-  const styles = $derived(
-    progressVariants({
-      intent,
-      size,
-      indeterminate: isIndeterminate || undefined,
-      striped: striped || undefined,
-      animated: animated || undefined
-    })
+  // Variant props feed both the tv() style computation and the slot-class
+  // cascade — extracted into one derived so `resolveSlotClasses` can match
+  // conditional `overrides` against the progress bar's active variants.
+  const variantProps: ProgressVariants = $derived({
+    intent,
+    size,
+    indeterminate: isIndeterminate || undefined,
+    striped: striped || undefined,
+    animated: animated || undefined
+  });
+
+  const styles = $derived(progressVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Progress', preset, variantProps, slotClassesProp)
   );
 
   const circularRadius = $derived((circularSize - strokeWidth) / 2);

package/dist/primitives/Progress/index.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { ProgressVariants } from './progress.variants';
+import type { ProgressSlots, ProgressVariants } from './progress.variants';
 /**
  * @description Progress indicator for determinate and indeterminate loading states.
  * Supports linear bar and circular ring variants with semantic intents and animation.
@@ -45,8 +45,13 @@ export interface ProgressProps extends ProgressVariants, Omit<HTMLAttributes<HTM
     class?: string;
     /** Remove all default tv() classes. */
     unstyled?: boolean;
-    /** Per-slot class overrides merged with tv() styles. */
-    slotClasses?: Partial<Record<'wrapper' | 'header' | 'label' | 'valueText' | 'track' | 'fill' | 'circularWrapper' | 'circularTrack' | 'circularFill' | 'circularLabel', string>>;
+    /**
+     * Per-slot class overrides merged with tv() styles. Slots: wrapper (linear
+     * root — what `class` targets in linear shape) | header | label | valueText |
+     * track | fill | circularWrapper (circular root — what `class` targets in
+     * circular shape) | circularTrack | circularFill | circularLabel.
+     */
+    slotClasses?: Partial<Record<ProgressSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Progress: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Progress/progress.variants.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/variants';
+import { type SlotNames, type VariantProps } from '../../utils/variants';
 export declare const progressVariants: (props?: import("../../utils/variants").TVProps<{
     intent: {
         primary: {
@@ -164,3 +164,5 @@ export declare const progressVariants: (props?: import("../../utils/variants").T
     }) | undefined) => string;
 };
 export type ProgressVariants = VariantProps<typeof progressVariants>;
+/** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */
+export type ProgressSlots = SlotNames<typeof progressVariants>;