@urbicon-ui/blocks 6.2.0 → 6.3.1

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

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

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { SkeletonVariants } from './skeleton.variants';
+import type { SkeletonSlots, SkeletonVariants } from './skeleton.variants';
 /**
  * @description Placeholder loading animation that mimics content layout.
  * Use to reduce perceived loading time and prevent layout shift.
@@ -49,8 +49,8 @@ export interface SkeletonProps extends SkeletonVariants, HTMLAttributes<HTMLDivE
     class?: string;
     /** Strip all default tv() classes. Combine with `slotClasses` for full control. */
     unstyled?: boolean;
-    /** Per-slot class overrides merged with (or replacing, when `unstyled`) tv() output. */
-    slotClasses?: Partial<Record<'base' | 'wrapper', string>>;
+    /** Per-slot class overrides merged with (or replacing, when `unstyled`) tv() output. Slots: base | wrapper */
+    slotClasses?: Partial<Record<SkeletonSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Skeleton: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Skeleton/skeleton.variants.d.ts

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

package/dist/primitives/Skeleton/skeleton.variants.js

@@ -27,14 +27,13 @@ export const skeletonVariants = tv({
                 base: 'animate-pulse motion-reduce:animate-none'
             },
             wave: {
-                // `via-surface-hover` resolves to the same neutral-100 as the
-                // base `surface-interactive` in light mode, leaving the shimmer
-                // invisible. We use translucent-white in light and translucent-
-                // light-gray in dark so the highlight reads regardless of theme.
+                // `via-surface-hover` would resolve to the same tone as the base
+                // `surface-interactive`, leaving the shimmer invisible. The
+                // `skeleton-shimmer` token is a translucent-white glint that stays
+                // mode-aware via light-dark() (lower alpha in dark) — no `dark:` needed.
                 base: [
                     'animate-[blocks-shimmer_1.5s_ease-in-out_infinite]',
-                    'bg-linear-to-r from-surface-interactive via-white/50 to-surface-interactive',
-                    'dark:via-white/10',
+                    'bg-linear-to-r from-surface-interactive via-skeleton-shimmer to-surface-interactive',
                     'bg-size-[200%_100%]',
                     'motion-reduce:animate-none'
                 ]

package/dist/primitives/Slider/Slider.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { useBlocksI18n, mintRegistry } from '../..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { useFormField } from '../../utils';
   import type { SliderProps } from './index';
-  import { sliderVariants } from './slider.variants';
+  import { sliderVariants, type SliderVariants } from './slider.variants';
 
   const bt = useBlocksI18n();
 
@@ -39,13 +39,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Slider?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Slider', preset),
-      slotClassesProp
-    )
-  );
 
   // ARIA wiring is shared with every form primitive — see XC-2.
   // Slider additionally injects a `statusId` into describedBy when the
@@ -232,16 +225,23 @@
     return '';
   });
 
-  const styles = $derived(
-    sliderVariants({
-      intent,
-      size,
-      appearance,
-      disabled: disabled || undefined,
-      error: !!error || undefined,
-      messageType: error ? 'error' : 'helper',
-      rangeStatus: currentZoneStatus
-    })
+  // 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 slider's active variants.
+  const variantProps: SliderVariants = $derived({
+    intent,
+    size,
+    appearance,
+    disabled: disabled || undefined,
+    error: !!error || undefined,
+    messageType: error ? 'error' : 'helper',
+    rangeStatus: currentZoneStatus
+  });
+
+  const styles = $derived(sliderVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Slider', preset, variantProps, slotClassesProp)
   );
 
   // aria-describedby chain: error > helper, plus rangeStatus when active.