@urbicon-ui/blocks 6.2.0 → 6.3.3

package/dist/primitives/Tab/TabPanel.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import type { TabPanelProps } from './index';
   import { getTabContext } from './tab.context';
-  import { tabVariants } from './tab.variants';
+  import { tabVariants, type TabVariants } from './tab.variants';
   import { fade } from 'svelte/transition';
 
   let {
@@ -20,13 +20,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.TabPanel?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'TabPanel', preset),
-      slotClassesProp
-    )
-  );
 
   const tabContext = getTabContext();
 
@@ -48,10 +41,14 @@
     return false;
   });
 
-  const styles = $derived(
-    tabVariants({
-      size: tabContext.size
-    })
+  const variantProps: TabVariants = $derived({
+    size: tabContext.size
+  });
+
+  const styles = $derived(tabVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'TabPanel', preset, variantProps, slotClassesProp)
   );
 </script>
 

package/dist/primitives/Tab/TabPanel.svelte.d.ts

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

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

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { MintProp } from '../../mint';
-import type { InteractiveTier } from '../../utils';
-import type { TabVariants } from './tab.variants';
+import type { MintProp } from '../../mint/index.js';
+import type { InteractiveTier } from '../../utils/index.js';
+import type { TabSlots, TabVariants } from './tab.variants.js';
 export interface TabContext {
     registerTab: (value: string, element: HTMLElement) => () => void;
     selectTab: (value: string) => void;
@@ -53,8 +53,8 @@ interface TabBaseProps extends Omit<TabVariants, 'orientation' | 'fullWidth'>, O
     class?: string;
     /** Strip all default tv() styles from the container and children. */
     unstyled?: boolean;
-    /** Per-slot class overrides merged with (or replacing when unstyled) tv() styles. */
-    slotClasses?: Partial<Record<'base' | 'list' | 'trigger' | 'panel' | 'indicator', string>>;
+    /** Per-slot class overrides merged with (or replacing when unstyled) tv() styles. Slots: base | list | trigger | icon | label | badge | panel | indicator */
+    slotClasses?: Partial<Record<TabSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Tab: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the
@@ -152,8 +152,8 @@ export interface TabItemProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'c
     class?: string;
     /** Strip default tv() styles from this trigger. */
     unstyled?: boolean;
-    /** Per-slot class overrides for the trigger. */
-    slotClasses?: Partial<Record<'trigger', string>>;
+    /** Per-slot class overrides for the trigger. Slots (subset of Tab's): trigger | icon | label | badge */
+    slotClasses?: Partial<Record<Extract<TabSlots, 'trigger' | 'icon' | 'label' | 'badge'>, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ TabItem: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the
@@ -185,8 +185,8 @@ export interface TabPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chi
     class?: string;
     /** Strip default tv() styles from this panel. */
     unstyled?: boolean;
-    /** Per-slot class overrides for the panel. */
-    slotClasses?: Partial<Record<'panel', string>>;
+    /** Per-slot class overrides for the panel. Slot (subset of Tab's): panel */
+    slotClasses?: Partial<Record<Extract<TabSlots, 'panel'>, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ TabPanel: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the
@@ -198,4 +198,4 @@ export interface TabPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chi
 export { default as Tab } from './Tab.svelte';
 export { default as TabItem } from './TabItem.svelte';
 export { default as TabPanel } from './TabPanel.svelte';
-export { type TabVariants, tabVariants } from './tab.variants';
+export { type TabVariants, tabVariants } from './tab.variants.js';

package/dist/primitives/Tab/index.js

@@ -1,4 +1,4 @@
 export { default as Tab } from './Tab.svelte';
 export { default as TabItem } from './TabItem.svelte';
 export { default as TabPanel } from './TabPanel.svelte';
-export { tabVariants } from './tab.variants';
+export { tabVariants } from './tab.variants.js';

package/dist/primitives/Tab/tab.context.d.ts

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

package/dist/primitives/Tab/tab.variants.d.ts

@@ -1,5 +1,5 @@
-import { type VariantProps } from '../../utils/variants';
-export declare const tabVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const tabVariants: (props?: import("../../utils/variants.js").TVProps<{
     variant: {
         line: {
             list: string;
@@ -143,3 +143,5 @@ export declare const tabVariants: (props?: import("../../utils/variants").TVProp
     }) | undefined) => string;
 };
 export type TabVariants = VariantProps<typeof tabVariants>;
+/** Slot names derived from the tv() config — single source of truth for slotClasses. */
+export type TabSlots = SlotNames<typeof tabVariants>;

package/dist/primitives/Tab/tab.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 // Tab represents navigation between panels (switch, don't commit). The
 // default tier is `modify` — soft-rounded rectangles read as tap surfaces.
 // `commit` is available for status-oriented tab strips that want the full

package/dist/primitives/Textarea/Textarea.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { mintRegistry } from '../..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { useFormField, getTierContext } from '../../utils';
   import type { TextareaProps } from './index';
-  import { textareaVariants } from './textarea.variants';
+  import { textareaVariants, type TextareaVariants } from './textarea.variants';
 
   let {
     label,
@@ -36,13 +36,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Textarea?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Textarea', preset),
-      slotClassesProp
-    )
-  );
 
   let textareaRef = $state<HTMLTextAreaElement>();
 
@@ -66,20 +59,27 @@
 
   const showFooter = $derived(!!error || !!helper || (showCounter && maxlength));
 
-  const styles = $derived(
-    textareaVariants({
-      tier: effectiveTier,
-      variant,
-      size,
-      intent,
-      autoResize: autoResize || undefined,
-      disabled: disabled || undefined,
-      readonly: readonly || undefined,
-      error: !!error || undefined,
-      required: required || undefined,
-      messageType: error ? 'error' : 'helper',
-      counterState
-    })
+  // 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 textarea's active variants.
+  const variantProps: TextareaVariants = $derived({
+    tier: effectiveTier,
+    variant,
+    size,
+    intent,
+    autoResize: autoResize || undefined,
+    disabled: disabled || undefined,
+    readonly: readonly || undefined,
+    error: !!error || undefined,
+    required: required || undefined,
+    messageType: error ? 'error' : 'helper',
+    counterState
+  });
+
+  const styles = $derived(textareaVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Textarea', preset, variantProps, slotClassesProp)
   );
 
   const lineHeight = $derived(size === 'sm' ? 20 : size === 'lg' ? 28 : 24);

package/dist/primitives/Textarea/Textarea.svelte.d.ts

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

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

@@ -1,6 +1,6 @@
 import type { HTMLTextareaAttributes } from 'svelte/elements';
-import type { MintProp } from '../../mint';
-import type { TextareaVariants } from './textarea.variants';
+import type { MintProp } from '../../mint/index.js';
+import type { TextareaSlots, TextareaVariants } from './textarea.variants.js';
 /**
  * @description Multi-line text input with auto-resize, character counter, and validation states.
  * Shares the same variant/intent/size system as Input for visual consistency.
@@ -59,8 +59,12 @@ export interface TextareaProps extends Omit<TextareaVariants, 'error' | 'counter
     class?: string;
     /** Remove all default tv() classes. Only user-provided classes apply. */
     unstyled?: boolean;
-    /** Per-slot class overrides merged with tv() styles. */
-    slotClasses?: Partial<Record<'wrapper' | 'base' | 'label' | 'footer' | 'message' | 'counter', string>>;
+    /**
+     * Per-slot class overrides merged with tv() styles. Slots: wrapper (root —
+     * what `class` also targets) | base (the `<textarea>` element) | label |
+     * footer | message | counter.
+     */
+    slotClasses?: Partial<Record<TextareaSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Textarea: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the
@@ -70,4 +74,4 @@ export interface TextareaProps extends Omit<TextareaVariants, 'error' | 'counter
     preset?: string;
 }
 export { default as Textarea } from './Textarea.svelte';
-export { type TextareaVariants, textareaVariants } from './textarea.variants';
+export { type TextareaVariants, textareaVariants } from './textarea.variants.js';

package/dist/primitives/Textarea/index.js

@@ -1,2 +1,2 @@
 export { default as Textarea } from './Textarea.svelte';
-export { textareaVariants } from './textarea.variants';
+export { textareaVariants } from './textarea.variants.js';

package/dist/primitives/Textarea/textarea.variants.d.ts

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

package/dist/primitives/Textarea/textarea.variants.js

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

package/dist/primitives/Toast/Toaster.svelte

@@ -10,7 +10,7 @@
   import SuccessCircleIconDefault from '../../icons/SuccessCircleIcon.svelte';
   import WarningTriangleIconDefault from '../../icons/WarningTriangleIcon.svelte';
   import DangerCircleIconDefault from '../../icons/DangerCircleIcon.svelte';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import type { ToastProps } from './index';
 
   const bt = useBlocksI18n();
@@ -38,12 +38,11 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  // Component-level slot-class cascade. Per-toast `intent` is NOT part of
+  // activeProps — it is applied per row in the `slot(key, intent)` helper via
+  // its own `toastVariants({ placement, intent })` call (see below).
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Toaster?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Toaster', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'Toaster', preset, { placement }, slotClassesProp)
   );
 
   $effect(() => {

package/dist/primitives/Toast/Toaster.svelte.d.ts

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

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

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { ToastPlacement } from './toast.variants';
+import type { ToasterSlots, ToastPlacement } from './toast.variants.js';
 /**
  * Canonical intents accepted by the toaster. Use as a runtime list when
  * building dispatchers (e.g. `toaster[intent]?.(title, opts)`); use
@@ -82,7 +82,7 @@ export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childr
     /** Strip all default tv classes. Use with `slotClasses` for a fully custom look. */
     unstyled?: boolean;
     /** Per-slot class overrides merged with (or replacing, when `unstyled`) the default styles. */
-    slotClasses?: Partial<Record<'container' | 'toast' | 'icon' | 'content' | 'title' | 'description' | 'dismissButton' | 'progress', string>>;
+    slotClasses?: Partial<Record<ToasterSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Toaster: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the
@@ -92,5 +92,5 @@ export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childr
     preset?: string;
 }
 export { default as Toaster } from './Toaster.svelte';
-export { toaster } from './toast.store.svelte';
-export { type ToastPlacement, type ToastVariants, toastVariants } from './toast.variants';
+export { toaster } from './toast.store.svelte.js';
+export { type ToastPlacement, type ToastVariants, toastVariants } from './toast.variants.js';

package/dist/primitives/Toast/index.js

@@ -12,5 +12,5 @@ export const TOAST_INTENTS = [
     'neutral'
 ];
 export { default as Toaster } from './Toaster.svelte';
-export { toaster } from './toast.store.svelte';
-export { toastVariants } from './toast.variants';
+export { toaster } from './toast.store.svelte.js';
+export { toastVariants } from './toast.variants.js';

package/dist/primitives/Toast/toast.store.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { ToastData, ToastInput, ToastShorthandOpts } from './index';
-import type { ToastPlacement } from './toast.variants';
+import type { ToastData, ToastInput, ToastShorthandOpts } from './index.js';
+import type { ToastPlacement } from './toast.variants.js';
 /**
  * Reactive store that manages the global toast queue.
  * Import the singleton `toaster` and call its methods from anywhere in the app.

package/dist/primitives/Toast/toast.variants.d.ts

@@ -1,5 +1,5 @@
-import { type VariantProps } from '../../utils/variants';
-export declare const toastVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const toastVariants: (props?: import("../../utils/variants.js").TVProps<{
     intent: {
         primary: {
             toast: string;
@@ -111,4 +111,6 @@ export declare const toastVariants: (props?: import("../../utils/variants").TVPr
     }) | undefined) => string;
 };
 export type ToastVariants = VariantProps<typeof toastVariants>;
+/** Slot names derived from the tv() config — single source of truth for slotClasses. */
+export type ToasterSlots = SlotNames<typeof toastVariants>;
 export type ToastPlacement = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';

package/dist/primitives/Toast/toast.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const toastVariants = tv({
     slots: {
         container: 'fixed z-[var(--z-tooltip)] flex flex-col pointer-events-none',

package/dist/primitives/Toggle/Toggle.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { useBlocksI18n, mintRegistry } from '../..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getTierContext, useFormField } from '../../utils';
-  import { toggleVariants } from './toggle.variants';
+  import { toggleVariants, type ToggleVariants } from './toggle.variants';
   import type { ToggleProps } from './index';
 
   const bt = useBlocksI18n();
@@ -42,13 +42,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Toggle?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Toggle', preset),
-      slotClassesProp
-    )
-  );
 
   let rootEl = $state<HTMLElement>();
 
@@ -58,16 +51,23 @@
   const tierCtx = getTierContext();
   const effectiveTier = $derived(tier ?? tierCtx?.tier ?? 'commit');
 
-  const styles = $derived(
-    toggleVariants({
-      tier: effectiveTier,
-      size,
-      intent,
-      appearance,
-      checked,
-      disabled,
-      withBorder
-    })
+  // 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 toggle's active variants.
+  const variantProps: ToggleVariants = $derived({
+    tier: effectiveTier,
+    size,
+    intent,
+    appearance,
+    checked,
+    disabled,
+    withBorder
+  });
+
+  const styles = $derived(toggleVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Toggle', preset, variantProps, slotClassesProp)
   );
 
   const dataState = $derived(checked ? 'checked' : 'unchecked');

package/dist/primitives/Toggle/Toggle.svelte.d.ts

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

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

@@ -1,7 +1,7 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
-import type { MintProp } from '../../mint';
-import type { InteractiveTier } from '../../utils';
-import type { ToggleVariants } from './toggle.variants';
+import type { MintProp } from '../../mint/index.js';
+import type { InteractiveTier } from '../../utils/index.js';
+import type { ToggleSlots, ToggleVariants } from './toggle.variants.js';
 /**
  * @description Accessible switch control for boolean on/off states.
  * Built on a hidden native input with semantic intents and Mint micro-interactions.
@@ -43,8 +43,12 @@ export interface ToggleProps extends Omit<ToggleVariants, 'checked'>, Omit<HTMLI
     class?: string;
     /** Strip all default tailwind-variants classes. Use with `slotClasses` for a fully custom look. The track exposes `data-state` for conditional styling. */
     unstyled?: boolean;
-    /** Per-slot class overrides merged with (or replacing, when `unstyled`) the default styles. */
-    slotClasses?: Partial<Record<'wrapper' | 'control' | 'track' | 'thumb' | 'label' | 'message', string>>;
+    /**
+     * Per-slot class overrides merged with (or replacing, when `unstyled`) the
+     * default styles. Slots: wrapper (root — what `class` also targets) | control
+     * (the `<label>` wrapping the input) | track | thumb | label | message.
+     */
+    slotClasses?: Partial<Record<ToggleSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Toggle: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the
@@ -83,4 +87,4 @@ export interface ToggleProps extends Omit<ToggleVariants, 'checked'>, Omit<HTMLI
     appearance?: ToggleVariants['appearance'];
 }
 export { default as Toggle } from './Toggle.svelte';
-export { type ToggleVariants, toggleVariants } from './toggle.variants';
+export { type ToggleVariants, toggleVariants } from './toggle.variants.js';

package/dist/primitives/Toggle/index.js

@@ -1,2 +1,2 @@
 export { default as Toggle } from './Toggle.svelte';
-export { toggleVariants } from './toggle.variants';
+export { toggleVariants } from './toggle.variants.js';

package/dist/primitives/Toggle/toggle.variants.d.ts

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

package/dist/primitives/Toggle/toggle.variants.js

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

package/dist/primitives/Toolbar/Toolbar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { toolbarVariants } from './toolbar.variants';
+  import { toolbarVariants, type ToolbarVariants } from './toolbar.variants';
   import type { ToolbarProps } from './index';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { setTierContext } from '../../utils/tier-context';
 
   let {
@@ -30,15 +30,13 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  const variantProps: ToolbarVariants = $derived({ variant, orientation, gap, padding });
+  const styles = $derived(toolbarVariants(variantProps));
+
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Toolbar?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Toolbar', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'Toolbar', preset, variantProps, slotClassesProp)
   );
-
-  const styles = $derived(toolbarVariants({ variant, orientation, gap, padding }));
 </script>
 
 <div

package/dist/primitives/Toolbar/Toolbar.svelte.d.ts

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

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { InteractiveTier } from '../../utils';
-import type { ToolbarVariants } from './toolbar.variants';
+import type { InteractiveTier } from '../../utils/index.js';
+import type { ToolbarSlots, ToolbarVariants } from './toolbar.variants.js';
 /**
  * Props interface for Toolbar component
  *
@@ -54,8 +54,9 @@ export interface ToolbarProps extends ToolbarVariants, Omit<HTMLAttributes<HTMLD
     tier?: InteractiveTier;
     /** Remove all default tv() classes. Combine with `slotClasses` to restyle from scratch. */
     unstyled?: boolean;
-    /** Per-slot class overrides merged with (or replacing when `unstyled`) the default classes. */
-    slotClasses?: Partial<Record<'base', string>>;
+    /** Per-slot class overrides merged with (or replacing when `unstyled`) the default classes.
+     *  Slots: base */
+    slotClasses?: Partial<Record<ToolbarSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Toolbar: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the
@@ -67,4 +68,4 @@ export interface ToolbarProps extends ToolbarVariants, Omit<HTMLAttributes<HTMLD
     class?: string;
 }
 export { default as Toolbar } from './Toolbar.svelte';
-export { type ToolbarVariants, toolbarVariants } from './toolbar.variants';
+export { type ToolbarVariants, toolbarVariants } from './toolbar.variants.js';

package/dist/primitives/Toolbar/index.js

@@ -1,2 +1,2 @@
 export { default as Toolbar } from './Toolbar.svelte';
-export { toolbarVariants } from './toolbar.variants';
+export { toolbarVariants } from './toolbar.variants.js';

package/dist/primitives/Toolbar/toolbar.variants.d.ts

@@ -1,5 +1,5 @@
-import { type VariantProps } from '../../utils/variants';
-export declare const toolbarVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const toolbarVariants: (props?: import("../../utils/variants.js").TVProps<{
     variant: {
         quiet: {
             base: string;
@@ -68,3 +68,5 @@ export declare const toolbarVariants: (props?: import("../../utils/variants").TV
     }) | undefined) => string;
 };
 export type ToolbarVariants = VariantProps<typeof toolbarVariants>;
+/** Slot names derived from the tv() config — single source of truth for slotClasses. */
+export type ToolbarSlots = SlotNames<typeof toolbarVariants>;

package/dist/primitives/Toolbar/toolbar.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const toolbarVariants = tv({
     slots: {
         // Structure radius — a toolbar is a container/surface, not a CTA.

package/dist/primitives/Tooltip/Tooltip.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { tooltipVariants } from './tooltip.variants';
+  import type { VariantProps } from '../../utils/variants';
   import type { TooltipProps } from './index';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import {
     computePosition,
     autoUpdate,
@@ -31,13 +32,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Tooltip?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Tooltip', preset),
-      slotClassesProp
-    )
-  );
 
   let visible = $state(false);
   let triggerElement = $state<HTMLElement>();
@@ -48,7 +42,11 @@
   const propsId = $props.id();
   const tooltipId = `tooltip-${propsId}`;
 
-  const styles = $derived(tooltipVariants({ visible, intent, size }));
+  const variantProps: VariantProps<typeof tooltipVariants> = $derived({ visible, intent, size });
+  const styles = $derived(tooltipVariants(variantProps));
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Tooltip', preset, variantProps, slotClassesProp)
+  );
 
   let showTimeout: number;
   let hideTimeout: number;

package/dist/primitives/Tooltip/Tooltip.svelte.d.ts

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