@urbicon-ui/blocks 6.1.8 → 6.3.1

package/dist/primitives/Combobox/Combobox.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" generics="T extends string | number | boolean = string">
   import { useBlocksI18n, mintRegistry } from '../..';
   import { tick } from 'svelte';
-  import { comboboxVariants } from './combobox.variants';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { comboboxVariants, type ComboboxVariants } from './combobox.variants';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { resolveIcon } from '../../icons';
   import CloseIconDefault from '../../icons/CloseIcon.svelte';
   import ChevronDownIconDefault from '../../icons/ChevronDownIcon.svelte';
@@ -64,13 +64,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Combobox?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Combobox', preset),
-      slotClassesProp
-    )
-  );
 
   let inputEl = $state<HTMLInputElement>();
   let listboxEl = $state<HTMLElement>();
@@ -95,25 +88,11 @@
     return options.filter((o) => filterFn(o, query.trim()));
   });
 
-  const styles = $derived(
-    unstyled
-      ? {
-          base: () => '',
-          label: () => '',
-          requiredMark: () => '',
-          inputWrapper: () => '',
-          input: () => '',
-          message: () => '',
-          hint: () => '',
-          listbox: () => '',
-          option: () => '',
-          optionActive: () => '',
-          optionSelected: () => '',
-          noResults: () => '',
-          clear: () => '',
-          chevron: () => ''
-        }
-      : comboboxVariants({ tier: effectiveTier, size, open, disabled })
+  const variantProps: ComboboxVariants = $derived({ tier: effectiveTier, size, open, disabled });
+  const styles = $derived(comboboxVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Combobox', preset, variantProps, slotClassesProp)
   );
 
   // Focus-restoration policy follows the ARIA Combobox pattern:
@@ -384,12 +363,22 @@
               data-active={isActive}
               disabled={opt.disabled}
               class={unstyled
-                ? (slotClasses?.option ?? '')
+                ? [
+                    slotClasses?.option,
+                    isActive ? slotClasses?.optionActive : undefined,
+                    isSelected ? slotClasses?.optionSelected : undefined
+                  ]
+                    .filter(Boolean)
+                    .join(' ')
                 : styles.option({
                     class: [
                       slotClasses?.option,
-                      isActive ? styles.optionActive() : undefined,
-                      isSelected ? styles.optionSelected() : undefined
+                      isActive
+                        ? styles.optionActive({ class: slotClasses?.optionActive })
+                        : undefined,
+                      isSelected
+                        ? styles.optionSelected({ class: slotClasses?.optionSelected })
+                        : undefined
                     ].filter(Boolean)
                   })}
               onclick={() => select(opt)}

package/dist/primitives/Combobox/combobox.variants.d.ts

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

package/dist/primitives/Combobox/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 { SelectValue } from '../Select/index';
-import type { ComboboxVariants } from './combobox.variants';
+import type { ComboboxSlots, ComboboxVariants } from './combobox.variants';
 /** A single combobox option with label, value, and optional disabled state. */
 export interface ComboboxOption<T extends SelectValue = string> {
     label: string;
@@ -114,8 +114,10 @@ export interface ComboboxProps<T extends SelectValue = string> extends ComboboxV
     class?: string;
     /** Remove all default tv() classes — only user-provided classes apply. @default false */
     unstyled?: boolean;
-    /** Per-slot class overrides merged with tv() styles. */
-    slotClasses?: Partial<Record<'base' | 'label' | 'requiredMark' | 'inputWrapper' | 'input' | 'message' | 'hint' | 'listbox' | 'option' | 'optionActive' | 'optionSelected' | 'noResults' | 'clear' | 'chevron', string>>;
+    /** Per-slot class overrides merged with tv() styles. Slots: base | label | requiredMark |
+     *  inputWrapper | input | message | hint | listbox | option | optionActive | optionSelected |
+     *  noResults | clear | chevron */
+    slotClasses?: Partial<Record<ComboboxSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Combobox: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

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>;