@urbicon-ui/blocks 6.2.0 → 6.3.1

package/dist/components/AreaChart/AreaChart.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import type { AreaChartProps } from './index';
   import type { ChartSeries } from '../../internal/charts/types';
   import { chartSlotResolver } from '../../internal/charts/variants';
@@ -38,11 +38,7 @@
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.AreaChart?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'AreaChart', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'AreaChart', preset, {}, slotClassesProp)
   );
   const slot = $derived(chartSlotResolver(unstyled, slotClasses));
 

package/dist/components/BarChart/BarChart.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import type { BarChartProps } from './index';
   import type { ChartSeries } from '../../internal/charts/types';
   import { chartSlotResolver } from '../../internal/charts/variants';
@@ -35,11 +35,7 @@
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.BarChart?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'BarChart', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'BarChart', preset, {}, slotClassesProp)
   );
   const slot = $derived(chartSlotResolver(unstyled, slotClasses));
 

package/dist/components/Calendar/Calendar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { SvelteMap, MediaQuery } from 'svelte/reactivity';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
-  import { calendarVariants } from './calendar.variants';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import { calendarVariants, type CalendarVariants } from './calendar.variants';
   import { setCalendarContext, type CalendarContext } from './calendar.context';
   import {
     getYearMonths,
@@ -114,17 +114,19 @@
   // --- BlocksConfig integration ---
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  // --- Variant styles + slot-class cascade ---
+  // `variantProps` feeds both the tv() style computation and the slot-class
+  // cascade (so provider `overrides` can match the active variant/size).
+  // Annotation is mandatory: without it the string literals widen to `string`
+  // and tsc rejects the call. The root only drives `variant`/`size`; the
+  // per-cell `dayState`/`hasEvents` axes are applied by sub-components.
+  const variantProps: CalendarVariants = $derived({ variant, size });
+  const styles = $derived(calendarVariants(variantProps));
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Calendar?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Calendar', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'Calendar', preset, variantProps, slotClassesProp)
   );
 
-  // --- Variant styles ---
-  const styles = $derived(calendarVariants({ variant, size }));
-
   // --- Animation state ---
   const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)');
   const shouldAnimate = $derived(animated && !reducedMotion.current);

package/dist/components/Calendar/calendar.variants.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/variants';
+import { type SlotNames, type VariantProps } from '../../utils/variants';
 export declare const calendarVariants: (props?: import("../../utils/variants").TVProps<{
     variant: {
         default: {};
@@ -804,3 +804,4 @@ export declare const calendarVariants: (props?: import("../../utils/variants").T
     }) | undefined) => string;
 };
 export type CalendarVariants = VariantProps<typeof calendarVariants>;
+export type CalendarSlots = SlotNames<typeof calendarVariants>;

package/dist/components/Calendar/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 { CalendarEvent, CalendarEventCategory, CalendarSelection, CalendarViewMode, DayCellContext, EventItemContext, HeaderContext } from './calendar.types';
-import type { CalendarVariants } from './calendar.variants';
+import type { CalendarSlots, CalendarVariants } from './calendar.variants';
 export type CalendarSlotName = 'base' | 'header' | 'title' | 'nav' | 'navButton' | 'grid' | 'weekdayHeader' | 'weekday' | 'weekRow' | 'weekNumber' | 'day' | 'dayNumber' | 'dotContainer' | 'dot' | 'list' | 'dateHeader' | 'empty' | 'item' | 'colorBar' | 'eventTitle' | 'eventDescription' | 'eventHelper' | 'legend' | 'legendItem' | 'legendDot' | 'legendLabel' | 'yearGrid' | 'yearMonth' | 'yearMonthTitle' | 'yearMiniDay' | 'yearMiniDot' | 'weekGrid' | 'weekColumn' | 'weekColumnHeader' | 'weekColumnDayName' | 'weekColumnDayNumber' | 'weekEventList' | 'weekAllDayEvent' | 'multiDayBar' | 'multiDayBarContainer' | 'agendaView' | 'agendaDayGroup' | 'agendaDayHeader' | 'agendaEventList' | 'dayView' | 'dayViewHeader' | 'dayEventList' | 'timeGrid' | 'timeLabel' | 'timeSlotRow' | 'timeDayColumn' | 'timeEvent' | 'allDayArea' | 'currentTimeLine' | 'weekTimeLayout' | 'eventPopover' | 'eventPopoverItem' | 'miniCalendar' | 'miniCalendarHeader' | 'miniCalendarTitle' | 'miniCalendarNavButton' | 'miniCalendarWeekday' | 'miniCalendarDay';
 /**
  * @description Flexible calendar component with month, year, week, and day views.
@@ -165,7 +165,7 @@ export interface CalendarProps extends Omit<CalendarVariants, 'dayState' | 'hasE
     /** Strip all default tv() classes. */
     unstyled?: boolean;
     /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<CalendarSlotName, string>>;
+    slotClasses?: Partial<Record<CalendarSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Calendar: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/components/CommandPalette/CommandPalette.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { useBlocksI18n } from '../..';
   import { Dialog, Separator } from '../../primitives';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import type { CommandPaletteProps, CommandPaletteItem } from './index';
-  import { commandPaletteVariants } from './commandPalette.variants';
+  import { commandPaletteVariants, type CommandPaletteVariants } from './commandPalette.variants';
 
   const bt = useBlocksI18n();
 
@@ -31,25 +31,18 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.CommandPalette?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'CommandPalette', preset),
-      slotClassesProp
-    )
-  );
 
   let query = $state('');
   let selectedIndex = $state(0);
   let inputEl: HTMLInputElement | undefined = $state();
 
-  const styles = $derived(unstyled ? undefined : commandPaletteVariants({ size }));
+  const variantProps: CommandPaletteVariants = $derived({ size });
 
-  function slot(name: keyof NonNullable<typeof styles>) {
-    const base = styles?.[name]?.() ?? '';
-    const override = slotClasses?.[name as keyof typeof slotClasses] ?? '';
-    return override ? `${base} ${override}` : base;
-  }
+  const styles = $derived(commandPaletteVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'CommandPalette', preset, variantProps, slotClassesProp)
+  );
 
   const defaultFilter = (item: CommandPaletteItem, q: string) => {
     const lower = q.toLowerCase();
@@ -156,11 +149,21 @@
 <svelte:window onkeydown={handleGlobalKeydown} />
 
 <Dialog bind:open size="md" placement="top" class="mt-[15vh]" onClose={() => setOpen(false)}>
-  <div class="{slot('wrapper')} {className}">
+  <div
+    class={unstyled
+      ? [slotClasses?.wrapper, className].filter(Boolean).join(' ')
+      : styles.wrapper({ class: [slotClasses?.wrapper, className] })}
+  >
     <!-- Search input -->
-    <div class={slot('inputWrapper')}>
+    <div
+      class={unstyled
+        ? (slotClasses?.inputWrapper ?? '')
+        : styles.inputWrapper({ class: slotClasses?.inputWrapper })}
+    >
       <svg
-        class={slot('inputIcon')}
+        class={unstyled
+          ? (slotClasses?.inputIcon ?? '')
+          : styles.inputIcon({ class: slotClasses?.inputIcon })}
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor"
@@ -178,7 +181,7 @@
         bind:value={query}
         onkeydown={handleKeydown}
         {placeholder}
-        class={slot('input')}
+        class={unstyled ? (slotClasses?.input ?? '') : styles.input({ class: slotClasses?.input })}
         role="combobox"
         aria-expanded={filtered.length > 0}
         aria-controls="command-palette-list"
@@ -189,7 +192,9 @@
       />
       {#if query}
         <button
-          class={slot('clearButton')}
+          class={unstyled
+            ? (slotClasses?.clearButton ?? '')
+            : styles.clearButton({ class: slotClasses?.clearButton })}
           aria-label={bt('accessibility.clearSearch')}
           onclick={() => {
             query = '';
@@ -210,22 +215,39 @@
     </div>
 
     <!-- Results -->
-    <div id="command-palette-list" role="listbox" class={slot('list')}>
+    <div
+      id="command-palette-list"
+      role="listbox"
+      class={unstyled ? (slotClasses?.list ?? '') : styles.list({ class: slotClasses?.list })}
+    >
       {#if filtered.length === 0}
         {#if customEmpty}
           {@render customEmpty(query)}
         {:else}
-          <div class={slot('empty')}>
+          <div
+            class={unstyled
+              ? (slotClasses?.empty ?? '')
+              : styles.empty({ class: slotClasses?.empty })}
+          >
             {emptyText}{#if query}&nbsp;"{query}"{/if}
           </div>
         {/if}
       {:else}
         {#each grouped as group, groupIdx (group.category)}
           {#if groupIdx > 0}
-            <Separator class={slot('separator')} />
+            <Separator
+              class={unstyled
+                ? (slotClasses?.separator ?? '')
+                : styles.separator({ class: slotClasses?.separator })}
+            />
           {/if}
           {#if group.category}
-            <div class={slot('groupLabel')} role="presentation">
+            <div
+              class={unstyled
+                ? (slotClasses?.groupLabel ?? '')
+                : styles.groupLabel({ class: slotClasses?.groupLabel })}
+              role="presentation"
+            >
               {group.category}
             </div>
           {/if}
@@ -243,6 +265,17 @@
                 (Enter/Space handled in handleKeydown) plus pointer clicks
                 here. tabindex="-1" keeps the items out of the tab sequence.
               -->
+              {@const itemStateClass = isDisabled
+                ? unstyled
+                  ? (slotClasses?.itemDisabled ?? '')
+                  : styles.itemDisabled({ class: slotClasses?.itemDisabled })
+                : isHighlighted
+                  ? unstyled
+                    ? (slotClasses?.itemHighlighted ?? '')
+                    : styles.itemHighlighted({ class: slotClasses?.itemHighlighted })
+                  : unstyled
+                    ? (slotClasses?.itemDefault ?? '')
+                    : styles.itemDefault({ class: slotClasses?.itemDefault })}
               <!-- svelte-ignore a11y_click_events_have_key_events -->
               <div
                 id="command-palette-item-{flatIdx}"
@@ -251,11 +284,12 @@
                 aria-selected={isHighlighted}
                 aria-disabled={isDisabled}
                 data-command-palette-selected={isHighlighted}
-                class="{slot('item')} {isDisabled
-                  ? slot('itemDisabled')
-                  : isHighlighted
-                    ? slot('itemHighlighted')
-                    : slot('itemDefault')}"
+                class={[
+                  unstyled ? (slotClasses?.item ?? '') : styles.item({ class: slotClasses?.item }),
+                  itemStateClass
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
                 onclick={() => {
                   if (!isDisabled) selectItem(item);
                 }}
@@ -265,7 +299,9 @@
               >
                 {#if item.icon}
                   <svg
-                    class={slot('itemIcon')}
+                    class={unstyled
+                      ? (slotClasses?.itemIcon ?? '')
+                      : styles.itemIcon({ class: slotClasses?.itemIcon })}
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
@@ -274,9 +310,18 @@
                     <path stroke-linecap="round" stroke-linejoin="round" d={item.icon} />
                   </svg>
                 {/if}
-                <span class={slot('itemLabel')}>{item.label}</span>
+                <span
+                  class={unstyled
+                    ? (slotClasses?.itemLabel ?? '')
+                    : styles.itemLabel({ class: slotClasses?.itemLabel })}>{item.label}</span
+                >
                 {#if item.shortcut}
-                  <kbd class={slot('itemShortcut')}>{item.shortcut}</kbd>
+                  <kbd
+                    class={unstyled
+                      ? (slotClasses?.itemShortcut ?? '')
+                      : styles.itemShortcut({ class: slotClasses?.itemShortcut })}
+                    >{item.shortcut}</kbd
+                  >
                 {/if}
               </div>
             {/if}
@@ -287,17 +332,39 @@
 
     <!-- Footer -->
     {#if showFooter}
-      <div class={slot('footer')}>
-        <span class={slot('footerHint')}>
-          <kbd class={slot('kbd')}>&#8593;&#8595;</kbd>
+      <div
+        class={unstyled
+          ? (slotClasses?.footer ?? '')
+          : styles.footer({ class: slotClasses?.footer })}
+      >
+        <span
+          class={unstyled
+            ? (slotClasses?.footerHint ?? '')
+            : styles.footerHint({ class: slotClasses?.footerHint })}
+        >
+          <kbd class={unstyled ? (slotClasses?.kbd ?? '') : styles.kbd({ class: slotClasses?.kbd })}
+            >&#8593;&#8595;</kbd
+          >
           {bt('commandPalette.hints.navigate', {})}
         </span>
-        <span class={slot('footerHint')}>
-          <kbd class={slot('kbd')}>&#8629;</kbd>
+        <span
+          class={unstyled
+            ? (slotClasses?.footerHint ?? '')
+            : styles.footerHint({ class: slotClasses?.footerHint })}
+        >
+          <kbd class={unstyled ? (slotClasses?.kbd ?? '') : styles.kbd({ class: slotClasses?.kbd })}
+            >&#8629;</kbd
+          >
           {bt('commandPalette.hints.select', {})}
         </span>
-        <span class={slot('footerHint')}>
-          <kbd class={slot('kbd')}>esc</kbd>
+        <span
+          class={unstyled
+            ? (slotClasses?.footerHint ?? '')
+            : styles.footerHint({ class: slotClasses?.footerHint })}
+        >
+          <kbd class={unstyled ? (slotClasses?.kbd ?? '') : styles.kbd({ class: slotClasses?.kbd })}
+            >esc</kbd
+          >
           {bt('commandPalette.hints.close', {})}
         </span>
       </div>

package/dist/components/CommandPalette/commandPalette.variants.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/variants';
+import { type SlotNames, type VariantProps } from '../../utils/variants';
 export declare const commandPaletteVariants: (props?: import("../../utils/variants").TVProps<{
     size: {
         sm: {
@@ -48,12 +48,6 @@ export declare const commandPaletteVariants: (props?: import("../../utils/varian
         class?: 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;
         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;
-    group: (props?: ({
-        size?: "sm" | "md" | "lg" | undefined;
-    } & {
-        class?: 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;
-        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;
     groupLabel: (props?: ({
         size?: "sm" | "md" | "lg" | undefined;
     } & {
@@ -134,3 +128,5 @@ export declare const commandPaletteVariants: (props?: import("../../utils/varian
     }) | undefined) => string;
 };
 export type CommandPaletteVariants = VariantProps<typeof commandPaletteVariants>;
+/** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */
+export type CommandPaletteSlots = SlotNames<typeof commandPaletteVariants>;

package/dist/components/CommandPalette/commandPalette.variants.js

@@ -14,7 +14,6 @@ export const commandPaletteVariants = tv({
         inputIcon: 'h-4 w-4 shrink-0 text-text-tertiary',
         clearButton: 'text-text-quaternary hover:text-text-secondary',
         list: 'max-h-72 overflow-y-auto p-1.5',
-        group: '',
         groupLabel: [
             'px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-text-quaternary'
         ],

package/dist/components/CommandPalette/index.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { CommandPaletteVariants } from './commandPalette.variants';
+import type { CommandPaletteSlots, CommandPaletteVariants } from './commandPalette.variants';
 /**
  * A single item in the command palette.
  *
@@ -102,7 +102,7 @@ export interface CommandPaletteProps {
     /** Strip all default styles. @default false */
     unstyled?: boolean;
     /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<'wrapper' | 'input' | 'inputIcon' | 'clearButton' | 'list' | 'group' | 'groupLabel' | 'item' | 'itemHighlighted' | 'itemDefault' | 'itemDisabled' | 'itemIcon' | 'itemLabel' | 'itemShortcut' | 'empty' | 'footer' | 'kbd', string>>;
+    slotClasses?: Partial<Record<CommandPaletteSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ CommandPalette: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/components/CompositionBar/CompositionBar.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { useBlocksI18n, mintRegistry } from '../..';
   import { useI18n } from '@urbicon-ui/i18n';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import type { CompositionBarProps, CompositionBarIntent, CompositionItem } from './index';
-  import { compositionBarVariants } from './composition-bar.variants';
+  import { compositionBarVariants, type CompositionBarVariants } from './composition-bar.variants';
 
   const bt = useBlocksI18n();
   const i18n = useI18n();
@@ -36,12 +36,17 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  const variantProps: CompositionBarVariants = $derived({
+    orientation,
+    size,
+    legendPlacement
+  });
+
+  const styles = $derived(compositionBarVariants(variantProps));
+
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.CompositionBar?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'CompositionBar', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'CompositionBar', preset, variantProps, slotClassesProp)
   );
 
   let barRef = $state<HTMLDivElement>();
@@ -167,14 +172,6 @@
     return intentRingClass[item.intent ?? intent];
   }
 
-  const styles = $derived(
-    compositionBarVariants({
-      orientation,
-      size,
-      legendPlacement
-    })
-  );
-
   $effect(() => {
     if (barRef && mint && mint !== 'none') {
       return mintRegistry.apply(barRef, mint);

package/dist/components/CompositionBar/composition-bar.variants.d.ts

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

package/dist/components/CompositionBar/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 { CompositionBarVariants } from './composition-bar.variants';
+import type { CompositionBarSlots, CompositionBarVariants } from './composition-bar.variants';
 export type CompositionBarIntent = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
 /** A single share in the stacked bar. */
 export interface CompositionItem {
@@ -105,7 +105,7 @@ export interface CompositionBarProps extends Omit<CompositionBarVariants, 'isHov
     /** Remove all default classes; only the layout structure remains. */
     unstyled?: boolean;
     /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<'wrapper' | 'barWrapper' | 'bar' | 'segment' | 'segmentRest' | 'tooltip' | 'tooltipLabel' | 'tooltipDetail' | 'legend' | 'legendItem' | 'legendDot' | 'legendLabel' | 'legendValue' | 'total' | 'totalLabel', string>>;
+    slotClasses?: Partial<Record<CompositionBarSlots, string>>;
     /** Preset name (registered via `<BlocksProvider presets={{ CompositionBar: {...} }}>`). */
     preset?: string;
     /**

package/dist/components/DonutChart/DonutChart.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import type { DonutChartProps } from './index';
   import { chartSlotResolver } from '../../internal/charts/variants';
   import { arcPath, seriesColor, numberFormatter } from '../../internal/charts/utils';
@@ -25,11 +25,7 @@
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.DonutChart?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'DonutChart', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'DonutChart', preset, {}, slotClassesProp)
   );
   const slot = $derived(chartSlotResolver(unstyled, slotClasses));
 

package/dist/components/EmptyState/EmptyState.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import type { EmptyStateProps } from './index';
-  import { emptyStateVariants } from './emptyState.variants';
+  import { emptyStateVariants, type EmptyStateVariants } from './emptyState.variants';
 
   let {
     icon: IconComponent,
@@ -19,16 +19,15 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  const variantProps: EmptyStateVariants = $derived({ density });
+
+  const styles = $derived(unstyled ? undefined : emptyStateVariants(variantProps));
+
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.EmptyState?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'EmptyState', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'EmptyState', preset, variantProps, slotClassesProp)
   );
 
-  const styles = $derived(unstyled ? undefined : emptyStateVariants({ density }));
-
   const iconSize = $derived(density === 'compact' ? 32 : 40);
 
   function slot(name: 'base' | 'iconWrapper' | 'title' | 'description' | 'children' | 'cta') {

package/dist/components/EmptyState/emptyState.variants.d.ts

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

package/dist/components/EmptyState/index.d.ts

@@ -1,7 +1,7 @@
 import type { Component, Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { IconProps } from '../../icons';
-type EmptyStateSlot = 'base' | 'iconWrapper' | 'title' | 'description' | 'children' | 'cta';
+import type { EmptyStateSlots } from './emptyState.variants';
 /**
  * @description Centered placeholder block for "no data yet" / "no results"
  * states. Pairs an optional icon with a heading, supporting text, and an
@@ -47,8 +47,8 @@ export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
     class?: string;
     /** Remove all default tv classes. */
     unstyled?: boolean;
-    /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<EmptyStateSlot, string>>;
+    /** Per-slot class overrides. Slots: base | iconWrapper | title | description | children | cta */
+    slotClasses?: Partial<Record<EmptyStateSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ EmptyState: {...} }}>`.
      * Prefer this over `class` overrides when the same look should be reused

package/dist/components/FileUpload/FileUpload.svelte

@@ -7,8 +7,8 @@
     FileUploadError,
     FileUploadSlotName
   } from './index';
-  import { fileUploadVariants } from './fileUpload.variants';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { fileUploadVariants, type FileUploadVariants } from './fileUpload.variants';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { resolveIcon } from '../../icons';
   import UploadCloudIconDefault from '../../icons/UploadCloudIcon.svelte';
   import FileIconDefault from '../../icons/FileIcon.svelte';
@@ -68,13 +68,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.FileUpload?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'FileUpload', preset),
-      slotClassesProp
-    )
-  );
 
   // ── State ──────────────────────────────────────────────────────────────────
 
@@ -90,14 +83,21 @@
   const effectiveMultiple = $derived(multiple || maxFiles > 1);
   const acceptString = $derived(Array.isArray(accept) ? accept.join(',') : (accept ?? ''));
 
-  const styles = $derived(
-    fileUploadVariants({
-      size,
-      intent,
-      dragging,
-      invalid: dragInvalid,
-      disabled
-    })
+  // 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 dropzone's active variants.
+  const variantProps: FileUploadVariants = $derived({
+    size,
+    intent,
+    dragging,
+    invalid: dragInvalid,
+    disabled
+  });
+
+  const styles = $derived(fileUploadVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'FileUpload', preset, variantProps, slotClassesProp)
   );
 
   const iconSize = $derived({ sm: 24, md: 32, lg: 40 }[size ?? 'md']);