@urbicon-ui/blocks 6.2.0 → 6.3.1

package/dist/components/FileUpload/fileUpload.variants.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/variants';
+import { type SlotNames, type VariantProps } from '../../utils/variants';
 export declare const fileUploadVariants: (props?: import("../../utils/variants").TVProps<{
     size: {
         sm: {
@@ -182,16 +182,6 @@ export declare const fileUploadVariants: (props?: import("../../utils/variants")
         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;
-    fileItemActions: (props?: ({
-        size?: "sm" | "md" | "lg" | undefined;
-        intent?: "primary" | "neutral" | undefined;
-        dragging?: boolean | undefined;
-        invalid?: boolean | undefined;
-        disabled?: boolean | 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;
     fileItemRemoveButton: (props?: ({
         size?: "sm" | "md" | "lg" | undefined;
         intent?: "primary" | "neutral" | undefined;
@@ -224,3 +214,5 @@ export declare const fileUploadVariants: (props?: import("../../utils/variants")
     }) | undefined) => string;
 };
 export type FileUploadVariants = VariantProps<typeof fileUploadVariants>;
+/** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */
+export type FileUploadSlots = SlotNames<typeof fileUploadVariants>;

package/dist/components/FileUpload/fileUpload.variants.js

@@ -39,11 +39,6 @@ export const fileUploadVariants = tv({
         fileItemName: ['truncate text-text-primary font-medium'],
         fileItemSize: ['text-text-tertiary'],
         fileItemProgress: ['w-full'],
-        fileItemActions: [
-            'flex flex-shrink-0 items-center gap-1',
-            'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100',
-            'transition-opacity duration-[var(--blocks-duration-fast)]'
-        ],
         // tier: modify — small destructive sub-button.
         fileItemRemoveButton: [
             'flex items-center justify-center rounded-modify',

package/dist/components/FileUpload/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 { FileUploadVariants } from './fileUpload.variants';
+import type { FileUploadSlots, FileUploadVariants } from './fileUpload.variants';
 export type FileUploadErrorCode = 'FILE_INVALID_TYPE' | 'FILE_TOO_LARGE' | 'FILE_TOO_SMALL' | 'TOO_MANY_FILES' | 'FILE_EXISTS' | 'CUSTOM';
 export interface FileUploadError {
     /** Machine-readable error code. */
@@ -40,7 +40,8 @@ export interface FileItemContext {
     /** Remove this file from the list. */
     remove: () => void;
 }
-export type FileUploadSlotName = 'root' | 'dropzone' | 'dropzoneIcon' | 'dropzoneTitle' | 'dropzoneDescription' | 'fileList' | 'fileItem' | 'fileItemPreview' | 'fileItemInfo' | 'fileItemName' | 'fileItemSize' | 'fileItemProgress' | 'fileItemActions' | 'fileItemError' | 'fileItemRemoveButton' | 'fileItemStatusIcon';
+/** Slot names for `slotClasses` — derived from the `tv()` config (single source of truth). */
+export type FileUploadSlotName = FileUploadSlots;
 /**
  * @description Drag-and-drop file upload with validation, image previews, progress tracking, and animated file list.
  * @tag form
@@ -142,7 +143,7 @@ export interface FileUploadProps extends Omit<FileUploadVariants, 'dragging' | '
     /** Strip all default styles. */
     unstyled?: boolean;
     /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<FileUploadSlotName, string>>;
+    slotClasses?: Partial<Record<FileUploadSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ FileUpload: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/components/Guide/Guide.svelte

@@ -3,7 +3,7 @@
   import { MediaQuery } from 'svelte/reactivity';
   import { useBlocksI18n } from '../../i18n';
   import { Button } from '../../primitives/Button';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import {
     computePosition,
     autoUpdate,
@@ -14,7 +14,7 @@
   } from '../../utils/floating';
   import { observeTargetResolution } from '../../utils/observe-target';
   import { getGuideContext } from './guide.context';
-  import { guideTourVariants } from './guide.variants';
+  import { guideTourVariants, type GuideTourVariants } from './guide.variants';
   import type { GuideProps } from './index';
 
   const bt = useBlocksI18n();
@@ -44,14 +44,11 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const variantProps: GuideTourVariants = $derived({});
+  const styles = $derived(guideTourVariants(variantProps));
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Guide?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Guide', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'Guide', preset, variantProps, slotClassesProp)
   );
-  const styles = $derived(guideTourVariants());
 
   // ── Controller-driven tour state ───────────────────────────────────────────
   const isTourActive = $derived(guide?.isTourActive ?? false);

package/dist/components/Guide/GuideArticle.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getGuideContext } from './guide.context';
   import { getGuidePanelContext } from './guide-panel.context';
-  import { guideArticleVariants } from './guide.variants';
+  import { guideArticleVariants, type GuideArticleVariants } from './guide.variants';
   import type { GuideArticleProps } from './index';
 
   let {
@@ -28,14 +28,11 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const variantProps: GuideArticleVariants = $derived({});
+  const styles = $derived(guideArticleVariants(variantProps));
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.GuideArticle?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'GuideArticle', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'GuideArticle', preset, variantProps, slotClassesProp)
   );
-  const styles = $derived(guideArticleVariants());
 
   const isActive = $derived(guide?.activeArticle === id);
 </script>

package/dist/components/Guide/GuideBeacon.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { useBlocksI18n } from '../../i18n';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getGuideContext } from './guide.context';
-  import { guideBeaconVariants } from './guide.variants';
+  import { guideBeaconVariants, type GuideBeaconVariants } from './guide.variants';
   import type { GuideBeaconProps } from './index';
 
   const bt = useBlocksI18n();
@@ -30,14 +30,11 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const variantProps: GuideBeaconVariants = $derived({ size });
+  const styles = $derived(guideBeaconVariants(variantProps));
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.GuideBeacon?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'GuideBeacon', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'GuideBeacon', preset, variantProps, slotClassesProp)
   );
-  const styles = $derived(guideBeaconVariants({ size }));
 
   // Hide once the tour has been seen (gentle, never nags) and while it is running (the
   // tour's own scrim takes over). Both reactive: `hasSeen` reads the controller's seen set,

package/dist/components/Guide/GuideHint.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { useBlocksI18n } from '../../i18n';
   import { CloseIcon } from '../../icons';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import {
     computePosition,
     autoUpdate,
@@ -12,7 +12,7 @@
   } from '../../utils/floating';
   import { observeTargetResolution } from '../../utils/observe-target';
   import { getGuideContext } from './guide.context';
-  import { guideHintVariants } from './guide.variants';
+  import { guideHintVariants, type GuideHintVariants } from './guide.variants';
   import type { GuideHintProps } from './index';
 
   const bt = useBlocksI18n();
@@ -45,14 +45,11 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const variantProps: GuideHintVariants = $derived({});
+  const styles = $derived(guideHintVariants(variantProps));
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.GuideHint?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'GuideHint', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'GuideHint', preset, variantProps, slotClassesProp)
   );
-  const styles = $derived(guideHintVariants());
 
   const seenId = $derived(seenIdProp ?? topicId);
 

package/dist/components/Guide/GuideMarker.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { useBlocksI18n } from '../../i18n';
   import { InfoCircleIcon } from '../../icons';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getGuideContext } from './guide.context';
-  import { guideMarkerVariants } from './guide.variants';
+  import { guideMarkerVariants, type GuideMarkerVariants } from './guide.variants';
   import type { GuideMarkerProps } from './index';
 
   const bt = useBlocksI18n();
@@ -32,14 +32,11 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const variantProps: GuideMarkerVariants = $derived({ size });
+  const styles = $derived(guideMarkerVariants(variantProps));
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.GuideMarker?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'GuideMarker', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'GuideMarker', preset, variantProps, slotClassesProp)
   );
-  const styles = $derived(guideMarkerVariants({ size }));
 
   // A Marker is the UI→Guide affordance; it is live unless the resolved direction
   // is 'to-ui' only. With no `for` there is no topic to gate on (the prop wins).

package/dist/components/Guide/GuideMention.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getGuideContext } from './guide.context';
-  import { guideMentionVariants } from './guide.variants';
+  import { guideMentionVariants, type GuideMentionVariants } from './guide.variants';
   import type { GuideMentionProps } from './index';
 
   let {
@@ -26,14 +26,11 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const variantProps: GuideMentionVariants = $derived({});
+  const styles = $derived(guideMentionVariants(variantProps));
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.GuideMention?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'GuideMention', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'GuideMention', preset, variantProps, slotClassesProp)
   );
-  const styles = $derived(guideMentionVariants());
 
   // A Mention is the Guide→UI affordance; it is interactive unless the resolved
   // direction is 'to-guide' only (then it degrades to plain inline text).

package/dist/components/Guide/GuidePanel.svelte

@@ -3,10 +3,10 @@
   import { SvelteMap } from 'svelte/reactivity';
   import { useBlocksI18n } from '../../i18n';
   import { CloseIcon, ChevronLeftIcon, ChevronRightIcon } from '../../icons';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getGuideContext } from './guide.context';
   import { setGuidePanelContext } from './guide-panel.context';
-  import { guidePanelVariants } from './guide.variants';
+  import { guidePanelVariants, type GuidePanelVariants } from './guide.variants';
   import type { GuidePanelProps } from './index';
 
   const bt = useBlocksI18n();
@@ -54,14 +54,11 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const variantProps: GuidePanelVariants = $derived({ placement, size });
+  const styles = $derived(guidePanelVariants(variantProps));
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.GuidePanel?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'GuidePanel', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'GuidePanel', preset, variantProps, slotClassesProp)
   );
-  const styles = $derived(guidePanelVariants({ placement, size }));
 
   const open = $derived(guide?.panelOpen ?? false);
   const activeArticle = $derived(guide?.activeArticle ?? null);

package/dist/components/Guide/guide.variants.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/variants';
+import { type SlotNames, type VariantProps } from '../../utils/variants';
 /**
  * Styling for the non-modal `GuidePanel` (D1). Mirrors the `Drawer` look
  * (surface-overlay, hairline border, lg shadow) but sits at `--z-sidebar`
@@ -276,3 +276,11 @@ export type GuideArticleVariants = VariantProps<typeof guideArticleVariants>;
 export type GuideMarkerVariants = VariantProps<typeof guideMarkerVariants>;
 export type GuideMentionVariants = VariantProps<typeof guideMentionVariants>;
 export type GuideHintVariants = VariantProps<typeof guideHintVariants>;
+/** Slot names derived from each `tv()` config — single source of truth for `slotClasses`. */
+export type GuidePanelSlots = SlotNames<typeof guidePanelVariants>;
+export type GuideTourSlots = SlotNames<typeof guideTourVariants>;
+export type GuideBeaconSlots = SlotNames<typeof guideBeaconVariants>;
+export type GuideArticleSlots = SlotNames<typeof guideArticleVariants>;
+export type GuideMarkerSlots = SlotNames<typeof guideMarkerVariants>;
+export type GuideMentionSlots = SlotNames<typeof guideMentionVariants>;
+export type GuideHintSlots = SlotNames<typeof guideHintVariants>;

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { GuideController, GuideDirection, GuideStorageAdapter, GuideTour, Placement } from '../../utils';
-import type { GuideBeaconVariants, GuideMarkerVariants, GuidePanelVariants } from './guide.variants';
+import type { GuideArticleSlots, GuideBeaconSlots, GuideBeaconVariants, GuideHintSlots, GuideMarkerSlots, GuideMarkerVariants, GuideMentionSlots, GuidePanelSlots, GuidePanelVariants, GuideTourSlots } from './guide.variants';
 /**
  * @description Root provider for the Guide help system. Instantiates a `GuideController`
  * and shares it via context with all Guide surfaces (Panel, Marker, Mention, Hint, Tour).
@@ -85,7 +85,7 @@ export interface GuidePanelProps {
     /** Strip all default styles. @default false */
     unstyled?: boolean;
     /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<'panel' | 'header' | 'backButton' | 'title' | 'closeButton' | 'body' | 'list' | 'listItem' | 'footer', string>>;
+    slotClasses?: Partial<Record<GuidePanelSlots, string>>;
     /** Apply a named preset registered via `<BlocksProvider presets={{ GuidePanel: {...} }}>`. */
     preset?: string;
 }
@@ -118,7 +118,7 @@ export interface GuideArticleProps {
     /** Strip all default styles. @default false */
     unstyled?: boolean;
     /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<'article', string>>;
+    slotClasses?: Partial<Record<GuideArticleSlots, string>>;
     /** Apply a named preset registered via `<BlocksProvider presets={{ GuideArticle: {...} }}>`. */
     preset?: string;
 }
@@ -169,7 +169,7 @@ export interface GuideMarkerProps {
     /** Strip all default styles. @default false */
     unstyled?: boolean;
     /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<'marker' | 'icon', string>>;
+    slotClasses?: Partial<Record<GuideMarkerSlots, string>>;
     /** Apply a named preset registered via `<BlocksProvider presets={{ GuideMarker: {...} }}>`. */
     preset?: string;
 }
@@ -212,7 +212,7 @@ export interface GuideMentionProps {
     /** Strip all default styles. @default false */
     unstyled?: boolean;
     /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<'mention', string>>;
+    slotClasses?: Partial<Record<GuideMentionSlots, string>>;
     /** Apply a named preset registered via `<BlocksProvider presets={{ GuideMention: {...} }}>`. */
     preset?: string;
 }
@@ -283,7 +283,7 @@ export interface GuideHintProps {
     /** Strip all default styles. @default false */
     unstyled?: boolean;
     /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<'hint' | 'title' | 'body' | 'dismiss' | 'arrow', string>>;
+    slotClasses?: Partial<Record<GuideHintSlots, string>>;
     /** Apply a named preset registered via `<BlocksProvider presets={{ GuideHint: {...} }}>`. */
     preset?: string;
 }
@@ -342,8 +342,11 @@ export interface GuideProps {
     class?: string;
     /** Strip all default styles. @default false */
     unstyled?: boolean;
-    /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<'container' | 'scrim' | 'bubble' | 'arrow' | 'title' | 'body' | 'progress' | 'dots' | 'dot' | 'dotActive' | 'stepText' | 'footer' | 'spacer' | 'skip' | 'prev' | 'next', string>>;
+    /**
+     * Per-slot class overrides. Beyond the tour's own `tv()` slots, `skip` / `prev` / `next`
+     * forward to the footer's nested `<Button>`s (which own their internal markup).
+     */
+    slotClasses?: Partial<Record<GuideTourSlots | 'skip' | 'prev' | 'next', string>>;
     /** Apply a named preset registered via `<BlocksProvider presets={{ Guide: {...} }}>`. */
     preset?: string;
 }
@@ -394,7 +397,7 @@ export interface GuideBeaconProps {
     /** Strip all default styles. @default false */
     unstyled?: boolean;
     /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<'beacon' | 'ping' | 'dot', string>>;
+    slotClasses?: Partial<Record<GuideBeaconSlots, string>>;
     /** Apply a named preset registered via `<BlocksProvider presets={{ GuideBeacon: {...} }}>`. */
     preset?: string;
 }

package/dist/components/LineChart/LineChart.svelte

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

package/dist/components/Planner/Planner.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T = unknown">
   import { useBlocksI18n } from '../..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { stripTime } from '../../date';
   import {
     DateGridController,
@@ -14,7 +14,7 @@
   } from '../../internal/date-grid';
   import { bucketItemsByDate } from './planner.bucket';
   import { setPlannerContext } from './planner.context';
-  import { plannerVariants } from './planner.variants';
+  import { plannerVariants, type PlannerVariants } from './planner.variants';
   import type {
     PlannerCellContext,
     PlannerContext,
@@ -70,16 +70,13 @@
   // --- BlocksConfig integration ---
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Planner?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Planner', preset),
-      slotClassesProp
-    )
-  );
 
   // --- Styling: one tv() instance, resolved per slot ---
-  const styles = $derived(plannerVariants({ view, variant, size }));
+  const variantProps: PlannerVariants = $derived({ view, variant, size });
+  const styles = $derived(plannerVariants(variantProps));
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Planner', preset, variantProps, slotClassesProp)
+  );
   function slot(name: PlannerSlotName, extra?: string): string {
     const overrides = [slotClasses?.[name], extra].filter(Boolean).join(' ');
     if (unstyled) return overrides;

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { PlannerCellContext, PlannerDayContext, PlannerHeaderContext, PlannerRange, PlannerSlotName, PlannerView } from './planner.types';
-import type { PlannerVariants } from './planner.variants';
+import type { PlannerCellContext, PlannerDayContext, PlannerHeaderContext, PlannerRange, PlannerView } from './planner.types';
+import type { PlannerSlots, PlannerVariants } from './planner.variants';
 /**
  * @description Date-indexed planning board — a week, month or custom-range grid
  * whose cells hold YOUR domain content (meals, shifts, bookings, content slots)
@@ -98,8 +98,8 @@ export interface PlannerProps<T = unknown> extends Omit<PlannerVariants, 'view'>
     class?: string;
     /** Remove all default tv() classes — only user-provided classes apply. @default false */
     unstyled?: boolean;
-    /** Per-slot class overrides merged with tv() styles. */
-    slotClasses?: Partial<Record<PlannerSlotName, string>>;
+    /** Per-slot class overrides merged with tv() styles. Slots: base | header | headerTitle | nav | navButton | grid | weekdayHeader | weekday | weekNumber | week | cell | cellHeader | cellWeekday | cellDate | cellItems | empty */
+    slotClasses?: Partial<Record<PlannerSlots, string>>;
     /** Apply a named preset registered via `<BlocksProvider presets={{ Planner: {...} }}>`. */
     preset?: string;
 }

package/dist/components/Planner/planner.variants.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/variants';
+import { type SlotNames, type VariantProps } from '../../utils/variants';
 /**
  * Planner styling — the visible chrome layered over the headless `DateGridScaffold`.
  *
@@ -199,3 +199,5 @@ export declare const plannerVariants: (props?: import("../../utils/variants").TV
     }) | undefined) => string;
 };
 export type PlannerVariants = VariantProps<typeof plannerVariants>;
+/** Slot names derived from the tv() config — single source of truth for slotClasses. */
+export type PlannerSlots = SlotNames<typeof plannerVariants>;

package/dist/components/Sankey/Sankey.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { useBlocksI18n } from '../..';
   import { useI18n } from '@urbicon-ui/i18n';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import {
     computeSankeyLayout,
     sankeyLinkPath,
@@ -14,7 +14,7 @@
     SankeyLaidOutLinkWithMeta,
     SankeyLaidOutNodeWithMeta
   } from './index';
-  import { sankeyVariants } from './sankey.variants';
+  import { sankeyVariants, type SankeyVariants } from './sankey.variants';
 
   const bt = useBlocksI18n();
   const i18n = useI18n();
@@ -50,12 +50,13 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  const variantProps: SankeyVariants = $derived({ intent });
+
+  const styles = $derived(sankeyVariants(variantProps));
+
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Sankey?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Sankey', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'Sankey', preset, variantProps, slotClassesProp)
   );
 
   let wrapperRef = $state<HTMLDivElement>();
@@ -195,8 +196,6 @@
     tooltipPos = { ...tooltipPos, visible: false };
   }
 
-  const styles = $derived(sankeyVariants({ intent }));
-
   // Tooltip data based on the hovered state
   const tooltipDatum = $derived.by<
     | { kind: 'node'; node: SankeyLaidOutNodeWithMeta; inputLabel: string }

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { SankeyLaidOutLink, SankeyLaidOutNode } from '../../internal/sankey/layout';
-import type { SankeyVariants } from './sankey.variants';
+import type { SankeySlots, SankeyVariants } from './sankey.variants';
 export type SankeyIntent = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
 /** Input node of the Sankey component. */
 export interface SankeyNode {
@@ -124,7 +124,7 @@ export interface SankeyProps extends Omit<SankeyVariants, never>, Omit<HTMLAttri
     /** Remove default classes. */
     unstyled?: boolean;
     /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<'wrapper' | 'svg' | 'node' | 'nodeRect' | 'nodeLabel' | 'nodeValue' | 'link' | 'tooltip' | 'tooltipLabel' | 'tooltipDetail', string>>;
+    slotClasses?: Partial<Record<SankeySlots, string>>;
     /** Preset name. */
     preset?: string;
     /** Custom snippet for node content (inside the SVG, instead of the label). */

package/dist/components/Sankey/sankey.variants.d.ts

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

package/dist/components/SidebarLayout/SidebarLayout.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { MediaQuery } from 'svelte/reactivity';
   import { Sidebar } from '../../primitives/Sidebar';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import type { SidebarLayoutProps } from './index';
-  import { sidebarLayoutVariants } from './sidebar-layout.variants';
+  import { sidebarLayoutVariants, type SidebarLayoutVariants } from './sidebar-layout.variants';
 
   let {
     open = $bindable(false),
@@ -28,15 +28,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.SidebarLayout?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'SidebarLayout', preset),
-      slotClassesProp
-    )
-  );
-
-  const styles = $derived(sidebarLayoutVariants({ side, contentMaxWidth }));
 
   // Mirror the Sidebar's effective-width logic so the layout root can expose
   // the value to the main content (the Sidebar's own --sidebar-effective-width
@@ -47,6 +38,18 @@
     open || (mode === 'responsive' && !isMobile) ? sidebarWidth : '0px'
   );
 
+  // 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 layout's active variants. Annotated so
+  // the string-literal `side`/`contentMaxWidth` props stay narrowed.
+  const variantProps: SidebarLayoutVariants = $derived({ side, contentMaxWidth });
+
+  const styles = $derived(sidebarLayoutVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'SidebarLayout', preset, variantProps, slotClassesProp)
+  );
+
   // Forward sidebar-related slotClasses to the embedded Sidebar.
   const sidebarSlotClasses = $derived({
     panel: slotClasses?.sidebar,
@@ -56,11 +59,6 @@
     footer: slotClasses?.sidebarFooter
   });
 
-  function rootClass() {
-    if (unstyled) return [slotClasses?.root, className].filter(Boolean).join(' ');
-    return styles.root({ class: [slotClasses?.root, className] });
-  }
-
   function openSidebar() {
     open = true;
     onOpenChange?.(true);
@@ -74,7 +72,9 @@
 
 <div
   {...restProps}
-  class={rootClass()}
+  class={unstyled
+    ? [slotClasses?.root, className].filter(Boolean).join(' ')
+    : styles.root({ class: [slotClasses?.root, className] })}
   style:--sidebar-width={sidebarWidth}
   style:--sidebar-effective-width={effectiveWidth}
   data-side={side}