@urbicon-ui/blocks 6.2.0 → 6.3.3

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

@@ -1,8 +1,8 @@
 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 { MintProp } from '../../mint/index.js';
+import type { InteractiveTier } from '../../utils/index.js';
+import type { RadioGroupSlots, RadioItemSlots, RadioItemVariants } from './radioGroup.variants.js';
 /**
  * @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
@@ -123,4 +123,4 @@ export interface RadioItemProps extends Omit<HTMLInputAttributes, 'type' | 'size
 }
 export { default as RadioGroup } from './RadioGroup.svelte';
 export { default as RadioItem } from './RadioItem.svelte';
-export { type RadioGroupVariants, type RadioItemVariants, radioGroupVariants, radioItemVariants } from './radioGroup.variants';
+export { type RadioGroupVariants, type RadioItemVariants, radioGroupVariants, radioItemVariants } from './radioGroup.variants.js';

package/dist/primitives/RadioGroup/index.js

@@ -1,3 +1,3 @@
 export { default as RadioGroup } from './RadioGroup.svelte';
 export { default as RadioItem } from './RadioItem.svelte';
-export { radioGroupVariants, radioItemVariants } from './radioGroup.variants';
+export { radioGroupVariants, radioItemVariants } from './radioGroup.variants.js';

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

@@ -1,3 +1,3 @@
-import type { RadioGroupContext } from './index';
+import type { RadioGroupContext } from './index.js';
 declare const getRadioGroupContext: () => RadioGroupContext, setRadioGroupContext: (context: RadioGroupContext) => RadioGroupContext;
 export { getRadioGroupContext, setRadioGroupContext };

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

@@ -1,5 +1,5 @@
-import { type VariantProps } from '../../utils/variants';
-export declare const radioGroupVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const radioGroupVariants: (props?: import("../../utils/variants.js").TVProps<{
     orientation: {
         horizontal: {
             group: string;
@@ -59,7 +59,7 @@ export declare const radioGroupVariants: (props?: import("../../utils/variants")
         className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
     }) | undefined) => string;
 };
-export declare const radioItemVariants: (props?: import("../../utils/variants").TVProps<{
+export declare const radioItemVariants: (props?: import("../../utils/variants.js").TVProps<{
     tier: {
         commit: {
             indicator: string;
@@ -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/RadioGroup/radioGroup.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const radioGroupVariants = tv({
     slots: {
         root: ['flex flex-col gap-1.5'],

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/SegmentGroup.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SegmentGroupProps } from './index';
+import type { SegmentGroupProps } from './index.js';
 declare const SegmentGroup: import("svelte").Component<SegmentGroupProps, {}, "value">;
 type SegmentGroup = ReturnType<typeof SegmentGroup>;
 export default SegmentGroup;

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/SegmentItem.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SegmentItemProps } from './index';
+import type { SegmentItemProps } from './index.js';
 declare const SegmentItem: import("svelte").Component<SegmentItemProps, {}, "">;
 type SegmentItem = ReturnType<typeof SegmentItem>;
 export default SegmentItem;

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

@@ -1,8 +1,8 @@
 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 { MintProp } from '../../mint/index.js';
+import type { InteractiveTier } from '../../utils/index.js';
+import type { SegmentGroupSlots, SegmentGroupVariants } from './segmentgroup.variants.js';
 /**
  * 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
@@ -104,4 +104,4 @@ export interface SegmentItemProps extends Omit<HTMLButtonAttributes, 'children'>
 }
 export { default as SegmentGroup } from './SegmentGroup.svelte';
 export { default as SegmentItem } from './SegmentItem.svelte';
-export { type SegmentGroupVariants, segmentGroupVariants } from './segmentgroup.variants';
+export { type SegmentGroupVariants, segmentGroupVariants } from './segmentgroup.variants.js';

package/dist/primitives/SegmentGroup/index.js

@@ -1,3 +1,3 @@
 export { default as SegmentGroup } from './SegmentGroup.svelte';
 export { default as SegmentItem } from './SegmentItem.svelte';
-export { segmentGroupVariants } from './segmentgroup.variants';
+export { segmentGroupVariants } from './segmentgroup.variants.js';

package/dist/primitives/SegmentGroup/segmentGroup.context.d.ts

@@ -1,3 +1,3 @@
-import type { SegmentGroupContext } from './index';
+import type { SegmentGroupContext } from './index.js';
 declare const getSegmentGroupContext: () => SegmentGroupContext, setSegmentGroupContext: (context: SegmentGroupContext) => SegmentGroupContext;
 export { getSegmentGroupContext, setSegmentGroupContext };

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

@@ -1,5 +1,5 @@
-import { type VariantProps } from '../../utils/variants';
-export declare const segmentGroupVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const segmentGroupVariants: (props?: import("../../utils/variants.js").TVProps<{
     tier: {
         commit: {
             base: string;
@@ -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/SegmentGroup/segmentgroup.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const segmentGroupVariants = tv({
     slots: {
         // Geometry tier moves to the `tier` variant below. The SegmentGroup is

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/Select.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SelectProps } from './index';
+import type { SelectProps } from './index.js';
 declare function $$render<T extends string | number | boolean = string>(): {
     props: SelectProps<T>;
     exports: {};

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 { MintProp } from '../../mint/index.js';
+import type { SelectSlots, SelectVariants } from './select.variants.js';
 /**
  * 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
@@ -318,4 +323,4 @@ export interface SelectMultipleProps<T extends SelectValue = string> extends Sel
  */
 export type SelectProps<T extends SelectValue = string> = SelectSingleProps<T> | SelectMultipleProps<T>;
 export { default as Select } from './Select.svelte';
-export { type SelectVariants, selectVariants } from './select.variants';
+export { type SelectVariants, selectVariants } from './select.variants.js';

package/dist/primitives/Select/index.js

@@ -1,2 +1,2 @@
 export { default as Select } from './Select.svelte';
-export { selectVariants } from './select.variants';
+export { selectVariants } from './select.variants.js';

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

@@ -1,5 +1,5 @@
-import { type VariantProps } from '../../utils/variants';
-export declare const selectVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const selectVariants: (props?: import("../../utils/variants.js").TVProps<{
     tier: {
         modify: {
             trigger: string;
@@ -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/Select/select.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const selectVariants = tv({
     slots: {
         wrapper: ['flex flex-col w-full gap-1.5'],

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/Separator/Separator.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SeparatorProps } from './index';
+import type { SeparatorProps } from './index.js';
 declare const Separator: import("svelte").Component<SeparatorProps, {}, "">;
 type Separator = ReturnType<typeof Separator>;
 export default Separator;

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

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { SeparatorVariants } from './separator.variants';
+import type { SeparatorVariants } from './separator.variants.js';
 /**
  * @description Visual divider for separating content sections. Supports horizontal and
  * vertical orientations with proper ARIA semantics.
@@ -42,4 +42,4 @@ export interface SeparatorProps extends SeparatorVariants, Omit<HTMLAttributes<H
     preset?: string;
 }
 export { default as Separator } from './Separator.svelte';
-export { type SeparatorVariants, separatorVariants } from './separator.variants';
+export { type SeparatorVariants, separatorVariants } from './separator.variants.js';

package/dist/primitives/Separator/index.js

@@ -1,2 +1,2 @@
 export { default as Separator } from './Separator.svelte';
-export { separatorVariants } from './separator.variants';
+export { separatorVariants } from './separator.variants.js';

package/dist/primitives/Separator/separator.variants.d.ts

@@ -1,5 +1,5 @@
-import { type VariantProps } from '../../utils/variants';
-export declare const separatorVariants: (props?: import("../../utils/variants").TVProps<{
+import { type VariantProps } from '../../utils/variants.js';
+export declare const separatorVariants: (props?: import("../../utils/variants.js").TVProps<{
     orientation: {
         horizontal: string;
         vertical: string;

package/dist/primitives/Separator/separator.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 // Separator is a purely visual primitive. Spacing belongs to the surrounding
 // layout (flex/grid gap, `space-y-*`, `space-x-*`) — not to the separator
 // itself. Pre-v1.0 we dropped the built-in margins that forced consumers to

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/Sidebar.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SidebarProps } from './index';
+import type { SidebarProps } from './index.js';
 declare const Sidebar: import("svelte").Component<SidebarProps, {}, "open">;
 type Sidebar = ReturnType<typeof Sidebar>;
 export default Sidebar;

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.js';
 /**
  * @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
@@ -98,4 +98,4 @@ export interface SidebarProps extends Omit<HTMLAttributes<HTMLElement>, 'childre
     preset?: string;
 }
 export { default as Sidebar } from './Sidebar.svelte';
-export { type SidebarVariants, sidebarVariants } from './sidebar.variants';
+export { type SidebarVariants, sidebarVariants } from './sidebar.variants.js';

package/dist/primitives/Sidebar/index.js

@@ -1,2 +1,2 @@
 export { default as Sidebar } from './Sidebar.svelte';
-export { sidebarVariants } from './sidebar.variants';
+export { sidebarVariants } from './sidebar.variants.js';

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

@@ -1,5 +1,5 @@
-import { type VariantProps } from '../../utils/variants';
-export declare const sidebarVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const sidebarVariants: (props?: import("../../utils/variants.js").TVProps<{
     side: {
         left: {
             panel: string;
@@ -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/Sidebar/sidebar.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const sidebarVariants = tv({
     slots: {
         backdrop: ['fixed inset-0 z-[var(--z-overlay)]', 'bg-surface-inverted/50 backdrop-blur-sm'],

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/Skeleton.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SkeletonProps } from './index';
+import type { SkeletonProps } from './index.js';
 declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "">;
 type Skeleton = ReturnType<typeof Skeleton>;
 export default Skeleton;