@urbicon-ui/blocks 6.1.8 → 6.3.1

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

package/dist/primitives/RadioGroup/RadioGroup.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getTierContext, useFormField } from '../../utils';
   import type { RadioGroupProps } from './index';
   import { setRadioGroupContext } from './radioGroup.context';
-  import { radioGroupVariants } from './radioGroup.variants';
+  import { radioGroupVariants, type RadioGroupVariants } from './radioGroup.variants';
 
   let {
     children,
@@ -40,13 +40,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.RadioGroup?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'RadioGroup', preset),
-      slotClassesProp
-    )
-  );
 
   const groupId = $derived(id || `radiogroup-${propsId}`);
   const labelId = $derived(label ? `${groupId}-label` : undefined);
@@ -59,13 +52,20 @@
     disabled
   }));
 
-  const styles = $derived(
-    radioGroupVariants({
-      orientation,
-      required: required || undefined,
-      error: !!error || undefined,
-      disabled: disabled || 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 group's active variants.
+  const variantProps: RadioGroupVariants = $derived({
+    orientation,
+    required: required || undefined,
+    error: !!error || undefined,
+    disabled: disabled || undefined
+  });
+
+  const styles = $derived(radioGroupVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'RadioGroup', preset, variantProps, slotClassesProp)
   );
 
   function select(itemValue: string) {

package/dist/primitives/RadioGroup/RadioItem.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { mintRegistry } from '../..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import type { RadioItemProps } from './index';
   import { getRadioGroupContext } from './radioGroup.context';
-  import { radioItemVariants } from './radioGroup.variants';
+  import { radioItemVariants, type RadioItemVariants } from './radioGroup.variants';
 
   let {
     value,
@@ -23,13 +23,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.RadioItem?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'RadioItem', preset),
-      slotClassesProp
-    )
-  );
 
   const ctx = getRadioGroupContext();
 
@@ -37,16 +30,23 @@
   const isDisabled = $derived(ctx.disabled || disabledProp);
   const dataState = $derived(isChecked ? 'checked' : 'unchecked');
 
-  const styles = $derived(
-    radioItemVariants({
-      size: ctx.size,
-      intent: ctx.intent,
-      variant: ctx.variant,
-      tier: ctx.tier,
-      checked: isChecked,
-      disabled: isDisabled || undefined,
-      error: ctx.error || 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 item's active variants.
+  const variantProps: RadioItemVariants = $derived({
+    size: ctx.size,
+    intent: ctx.intent,
+    variant: ctx.variant,
+    tier: ctx.tier,
+    checked: isChecked,
+    disabled: isDisabled || undefined,
+    error: ctx.error || undefined
+  });
+
+  const styles = $derived(radioItemVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'RadioItem', preset, variantProps, slotClassesProp)
   );
 
   let controlElement = $state<HTMLElement>();

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

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 import type { MintProp } from '../../mint';
 import type { InteractiveTier } from '../../utils';
-import type { RadioItemVariants } from './radioGroup.variants';
+import type { RadioGroupSlots, RadioItemSlots, RadioItemVariants } from './radioGroup.variants';
 /**
  * @description Accessible radio group for single-option selection with semantic intents and form integration.
  * Uses native radio inputs for correct form behavior and ARIA semantics with keyboard navigation.
@@ -60,7 +60,7 @@ export interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
     /** Remove all default tv() classes. Only user-provided classes apply. */
     unstyled?: boolean;
     /** Per-slot class overrides merged with tv() styles. */
-    slotClasses?: Partial<Record<'root' | 'group' | 'label' | 'message', string>>;
+    slotClasses?: Partial<Record<RadioGroupSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ RadioGroup: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the
@@ -110,7 +110,7 @@ export interface RadioItemProps extends Omit<HTMLInputAttributes, 'type' | 'size
     /** Remove all default tv() classes for this item. */
     unstyled?: boolean;
     /** Per-slot class overrides for this item. */
-    slotClasses?: Partial<Record<'item' | 'indicator' | 'dot' | 'label' | 'description', string>>;
+    slotClasses?: Partial<Record<RadioItemSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ RadioItem: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/RadioGroup/radioGroup.variants.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/variants';
+import { type SlotNames, type VariantProps } from '../../utils/variants';
 export declare const radioGroupVariants: (props?: import("../../utils/variants").TVProps<{
     orientation: {
         horizontal: {
@@ -190,3 +190,6 @@ export declare const radioItemVariants: (props?: import("../../utils/variants").
 };
 export type RadioGroupVariants = VariantProps<typeof radioGroupVariants>;
 export type RadioItemVariants = VariantProps<typeof radioItemVariants>;
+/** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */
+export type RadioGroupSlots = SlotNames<typeof radioGroupVariants>;
+export type RadioItemSlots = SlotNames<typeof radioItemVariants>;

package/dist/primitives/SegmentGroup/SegmentGroup.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { SvelteMap } from 'svelte/reactivity';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getTierContext } from '../../utils';
-  import { segmentGroupVariants } from './segmentgroup.variants';
+  import { segmentGroupVariants, type SegmentGroupVariants } from './segmentgroup.variants';
   import { setSegmentGroupContext } from './segmentGroup.context';
   import type { SegmentGroupContext, SegmentGroupProps } from './index';
 
@@ -32,13 +32,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.SegmentGroup?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'SegmentGroup', preset),
-      slotClassesProp
-    )
-  );
 
   let containerElement = $state<HTMLDivElement>();
   let indicatorStyle = $state('opacity: 0;');
@@ -46,8 +39,18 @@
   // reactive so the indicator updates when new items register.
   const registeredItems = new SvelteMap<string, HTMLElement>();
 
-  const styles = $derived(
-    segmentGroupVariants({ size, appearance, tier: effectiveTier, fullWidth, disabled })
+  const variantProps: SegmentGroupVariants = $derived({
+    size,
+    appearance,
+    tier: effectiveTier,
+    fullWidth,
+    disabled
+  });
+
+  const styles = $derived(segmentGroupVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'SegmentGroup', preset, variantProps, slotClassesProp)
   );
 
   function updateIndicator() {

package/dist/primitives/SegmentGroup/SegmentItem.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { mintRegistry } from '../..';
-  import { segmentGroupVariants } from './segmentgroup.variants';
+  import { segmentGroupVariants, type SegmentGroupVariants } from './segmentgroup.variants';
   import { getSegmentGroupContext } from './segmentGroup.context';
   import type { SegmentItemProps } from './index';
 
@@ -20,21 +20,22 @@
   const ctx = getSegmentGroupContext();
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || ctx.unstyled || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.SegmentItem?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'SegmentItem', preset),
-      slotClassesProp
-    )
-  );
 
   let itemElement = $state<HTMLButtonElement>();
 
   const isActive = $derived(ctx.isActive(value));
   const isDisabled = $derived(disabled || ctx.disabled);
 
-  const styles = $derived(
-    segmentGroupVariants({ size: ctx.size, appearance: ctx.appearance, tier: ctx.tier })
+  const variantProps: SegmentGroupVariants = $derived({
+    size: ctx.size,
+    appearance: ctx.appearance,
+    tier: ctx.tier
+  });
+
+  const styles = $derived(segmentGroupVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'SegmentItem', preset, variantProps, slotClassesProp)
   );
 
   onMount(() => {

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

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 import type { MintProp } from '../../mint';
 import type { InteractiveTier } from '../../utils';
-import type { SegmentGroupVariants } from './segmentgroup.variants';
+import type { SegmentGroupSlots, SegmentGroupVariants } from './segmentgroup.variants';
 /**
  * Reactive context exposed to child SegmentItem components.
  */
@@ -49,7 +49,7 @@ export interface SegmentGroupProps extends SegmentGroupVariants, Omit<HTMLAttrib
     /** Remove all default tv() classes. */
     unstyled?: boolean;
     /** Per-slot class overrides merged with tv() styles. */
-    slotClasses?: Partial<Record<'base' | 'indicator' | 'item', string>>;
+    slotClasses?: Partial<Record<SegmentGroupSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ SegmentGroup: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the
@@ -93,7 +93,7 @@ export interface SegmentItemProps extends Omit<HTMLButtonAttributes, 'children'>
     /** Remove all default tv() classes. */
     unstyled?: boolean;
     /** Per-slot class overrides merged with tv() styles. */
-    slotClasses?: Partial<Record<'item', string>>;
+    slotClasses?: Partial<Record<Extract<SegmentGroupSlots, 'item'>, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ SegmentItem: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/SegmentGroup/segmentgroup.variants.d.ts

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

package/dist/primitives/Select/Select.svelte

@@ -1,13 +1,13 @@
 <script lang="ts" generics="T extends string | number | boolean = string">
   import { useBlocksI18n, mintRegistry } from '../..';
   import { useFormField, getTierContext, useFloatingListbox } from '../../utils';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { resolveIcon } from '../../icons';
   import ChevronDownIconDefault from '../../icons/ChevronDownIcon.svelte';
   import CheckIconDefault from '../../icons/CheckIcon.svelte';
   import CloseIconDefault from '../../icons/CloseIcon.svelte';
   import type { SelectProps, SelectOption } from './index';
-  import { selectVariants } from './select.variants';
+  import { selectVariants, type SelectVariants } from './select.variants';
 
   const bt = useBlocksI18n();
 
@@ -91,13 +91,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Select?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Select', preset),
-      slotClassesProp
-    )
-  );
 
   // ARIA wiring is shared with every form primitive — see XC-2.
   // All IDs are `$derived` so they react if the consumer changes `idProp`
@@ -186,17 +179,24 @@
   /** Backward-compatible single-mode accessor. */
   const selectedOption = $derived(multiple ? null : (selectedOptions[0] ?? null));
 
-  const styles = $derived(
-    selectVariants({
-      tier: effectiveTier,
-      variant,
-      size,
-      open: open || undefined,
-      disabled: disabled || undefined,
-      error: !!error || undefined,
-      required: required || 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 select's active variants.
+  const variantProps: SelectVariants = $derived({
+    tier: effectiveTier,
+    variant,
+    size,
+    open: open || undefined,
+    disabled: disabled || undefined,
+    error: !!error || undefined,
+    required: required || undefined,
+    messageType: error ? 'error' : 'helper'
+  });
+
+  const styles = $derived(selectVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Select', preset, variantProps, slotClassesProp)
   );
 
   $effect(() => {
@@ -581,7 +581,12 @@
                         <CheckIcon />
                       </span>
                     {/if}
-                    <span class={unstyled ? '' : 'flex-1 truncate text-left'}>{option.label}</span>
+                    <span
+                      class={unstyled
+                        ? (slotClasses?.optionLabel ?? '')
+                        : styles.optionLabel({ class: slotClasses?.optionLabel })}
+                      >{option.label}</span
+                    >
                     {#if effectiveIndicator === 'checkmark'}
                       <CheckIcon
                         class={unstyled
@@ -641,7 +646,11 @@
                     <CheckIcon />
                   </span>
                 {/if}
-                <span class={unstyled ? '' : 'flex-1 truncate text-left'}>{option.label}</span>
+                <span
+                  class={unstyled
+                    ? (slotClasses?.optionLabel ?? '')
+                    : styles.optionLabel({ class: slotClasses?.optionLabel })}>{option.label}</span
+                >
                 {#if effectiveIndicator === 'checkmark'}
                   <CheckIcon
                     class={unstyled

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { MintProp } from '../../mint';
-import type { SelectVariants } from './select.variants';
+import type { SelectSlots, SelectVariants } from './select.variants';
 /**
  * Primitive value types accepted by Select / Combobox options.
  * Strings are the default; numbers and booleans cover form fields
@@ -235,8 +235,13 @@ interface SelectBaseProps<T extends SelectValue = string> extends Omit<SelectVar
     class?: string;
     /** Remove all default tv() classes. */
     unstyled?: boolean;
-    /** Per-slot class overrides merged with tv() styles. */
-    slotClasses?: Partial<Record<'wrapper' | 'base' | 'trigger' | 'triggerText' | 'placeholder' | 'chevron' | 'clear' | 'listbox' | 'option' | 'optionCheck' | 'optionCheckbox' | 'group' | 'groupLabel' | 'label' | 'message', string>>;
+    /**
+     * Per-slot class overrides merged with tv() styles. Slots: wrapper (root —
+     * what `class` also targets) | base | trigger | triggerText | placeholder |
+     * chevron | clear | listbox | option | optionLabel | optionCheck |
+     * optionCheckbox | group | groupLabel | label | message.
+     */
+    slotClasses?: Partial<Record<SelectSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Select: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Select/select.variants.d.ts

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

package/dist/primitives/Separator/Separator.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { separatorVariants } from './separator.variants';
   import type { SeparatorProps } from './index';
 
@@ -17,11 +17,7 @@
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Separator?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Separator', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'Separator', preset, { orientation, size }, slotClassesProp)
   );
 
   const classes = $derived(

package/dist/primitives/Sidebar/Sidebar.svelte

@@ -4,8 +4,8 @@
   import { quintOut } from 'svelte/easing';
   import { fade } from 'svelte/transition';
   import type { SidebarProps } from './index';
-  import { sidebarVariants } from './sidebar.variants';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { sidebarVariants, type SidebarVariants } from './sidebar.variants';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { lockBodyScroll, unlockBodyScroll } from '../../utils/overlay';
   import { overlayStack } from '../../utils';
 
@@ -29,16 +29,13 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  const variantProps: SidebarVariants = $derived({ side, mode });
+  const styles = $derived(sidebarVariants(variantProps));
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Sidebar?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Sidebar', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'Sidebar', preset, variantProps, slotClassesProp)
   );
 
-  const styles = $derived(sidebarVariants({ side, mode }));
-
   const panelTransform = $derived(
     open ? 'translateX(0)' : side === 'left' ? 'translateX(-100%)' : 'translateX(100%)'
   );

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { SidebarVariants } from './sidebar.variants';
+import type { SidebarSlots, SidebarVariants } from './sidebar.variants';
 /**
  * @description Sidebar primitive — fixed-position panel that is permanent on
  * desktop (≥1024px) and slides in as a backdropped overlay on mobile. Use
@@ -88,7 +88,7 @@ export interface SidebarProps extends Omit<HTMLAttributes<HTMLElement>, 'childre
     /** Strip all default styles. Combine with slotClasses for custom appearance. */
     unstyled?: boolean;
     /** Per-slot class overrides merged with variant styles. */
-    slotClasses?: Partial<Record<'backdrop' | 'panel' | 'header' | 'content' | 'footer', string>>;
+    slotClasses?: Partial<Record<SidebarSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Sidebar: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Sidebar/sidebar.variants.d.ts

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

package/dist/primitives/Skeleton/Skeleton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { useBlocksI18n } from '../..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
-  import { skeletonVariants } from './skeleton.variants';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import { skeletonVariants, type SkeletonVariants } from './skeleton.variants';
   import type { SkeletonProps } from './index';
 
   const bt = useBlocksI18n();
@@ -23,16 +23,14 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  const variantProps: SkeletonVariants = $derived({ variant, size, animation });
+  const styles = $derived(skeletonVariants(variantProps));
+
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Skeleton?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Skeleton', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'Skeleton', preset, variantProps, slotClassesProp)
   );
 
-  const styles = $derived(skeletonVariants({ variant, size, animation }));
-
   const inlineStyle = $derived(
     [width ? `width:${width}` : '', height ? `height:${height}` : ''].filter(Boolean).join(';') ||
       undefined