@urbicon-ui/blocks 6.2.0 → 6.3.1

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

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { MintProp } from '../../mint';
-import type { SliderVariants } from './slider.variants';
+import type { SliderSlots, SliderVariants } from './slider.variants';
 /** A labelled tick mark on the slider track. */
 export interface SliderMark {
     value: number;
@@ -114,8 +114,13 @@ export interface SliderProps extends Omit<SliderVariants, 'error' | 'rangeStatus
     class?: string;
     /** Remove all default tv() classes. */
     unstyled?: boolean;
-    /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<'wrapper' | 'header' | 'label' | 'valueText' | 'base' | 'track' | 'range' | 'thumb' | 'mark' | 'boundaryTick' | 'rangeStatus' | 'rangeStatusIcon' | 'message', string>>;
+    /**
+     * Per-slot class overrides merged with tv() styles. Slots: wrapper (root —
+     * what `class` also targets) | header | label | valueText | base (the
+     * interactive track container) | track | range | thumb | mark | boundaryTick
+     * | rangeStatus | rangeStatusIcon | message.
+     */
+    slotClasses?: Partial<Record<SliderSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Slider: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Slider/slider.variants.d.ts

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

package/dist/primitives/Spinner/Spinner.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
-  import { spinnerVariants } from './spinner.variants';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import { spinnerVariants, type SpinnerVariants } from './spinner.variants';
   import type { SpinnerProps } from './index';
 
   let {
@@ -20,15 +20,13 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  const variantProps: SpinnerVariants = $derived({ variant, size, intent, speed });
+  const styles = $derived(spinnerVariants(variantProps));
+
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Spinner?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Spinner', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'Spinner', preset, variantProps, slotClassesProp)
   );
-
-  const styles = $derived(spinnerVariants({ variant, size, intent, speed }));
 </script>
 
 {#if visible}

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { SpinnerVariants } from './spinner.variants';
+import type { SpinnerSlots, SpinnerVariants } from './spinner.variants';
 /**
  * @description Animated loading indicator with multiple animation styles and semantic intents.
  *
@@ -39,8 +39,10 @@ export interface SpinnerProps extends SpinnerVariants, Omit<HTMLAttributes<HTMLD
     class?: string;
     /** Strip all default tv() classes. Combine with `slotClasses` for full control. */
     unstyled?: boolean;
-    /** Per-slot class overrides merged with (or replacing, when `unstyled`) tv() output. */
-    slotClasses?: Partial<Record<'base' | 'svg' | 'svgCircle' | 'svgPath' | 'dots' | 'dot' | 'pulse' | 'pulseCenter' | 'pulseRing' | 'ring' | 'ringElement' | 'bars' | 'bar' | 'content' | 'srOnly', string>>;
+    /** Per-slot class overrides merged with (or replacing, when `unstyled`) tv() output.
+     *  Slots: base | svg | svgCircle | svgPath | dots | dot | pulse | pulseCenter |
+     *  pulseRing | ring | ringElement | bars | bar | content | srOnly */
+    slotClasses?: Partial<Record<SpinnerSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Spinner: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Spinner/spinner.variants.d.ts

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

package/dist/primitives/Stepper/Stepper.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { useBlocksI18n } from '../..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getTierContext } from '../../utils';
-  import { stepperVariants } from './stepper.variants';
+  import { stepperVariants, type StepperVariants } from './stepper.variants';
   import { setStepperContext } from './stepper.context';
   import type { StepperProps, StepperContext } from './index';
 
@@ -35,13 +35,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Stepper?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Stepper', preset),
-      slotClassesProp
-    )
-  );
 
   const responsiveBreakpoint = $derived(
     responsive === true ? 640 : typeof responsive === 'object' ? (responsive.breakpoint ?? 640) : 0
@@ -66,15 +59,17 @@
   const effectiveOrientation = $derived(isCompact ? 'vertical' : orientation);
   const effectiveVariant = $derived(isCompact ? 'minimal' : variant);
 
-  const styles = $derived(
-    unstyled
-      ? { base: () => '' }
-      : stepperVariants({
-          orientation: effectiveOrientation,
-          size,
-          variant: effectiveVariant,
-          tier: effectiveTier
-        })
+  const variantProps: StepperVariants = $derived({
+    orientation: effectiveOrientation,
+    size,
+    variant: effectiveVariant,
+    tier: effectiveTier
+  });
+
+  const styles = $derived(unstyled ? { base: () => '' } : stepperVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Stepper', preset, variantProps, slotClassesProp)
   );
 
   let nextIdx = 0;

package/dist/primitives/Stepper/StepperStep.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
-  import { stepperVariants } from './stepper.variants';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import { stepperVariants, type StepperVariants } from './stepper.variants';
   import { getStepperContext } from './stepper.context';
   import { resolveIcon } from '../../icons';
   import CheckIconDefault from '../../icons/CheckIcon.svelte';
@@ -29,13 +29,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.StepperStep?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'StepperStep', preset),
-      slotClassesProp
-    )
-  );
 
   const ctx = getStepperContext();
   const stepIndex = ctx.registerStep();
@@ -60,6 +53,17 @@
   const isSeparatorComplete = $derived(stepIndex < ctx.activeStep);
   const isActive = $derived(stepIndex === ctx.activeStep);
 
+  const variantProps: StepperVariants = $derived({
+    orientation: ctx.orientation,
+    size: ctx.size,
+    variant: ctx.variant,
+    tier: ctx.tier,
+    stepState: derivedState,
+    clickable: isClickable || undefined,
+    stepDisabled: isDisabled || undefined,
+    separatorComplete: isSeparatorComplete || undefined
+  });
+
   const styles = $derived(
     unstyled
       ? {
@@ -73,16 +77,11 @@
           separator: () => '',
           content: () => ''
         }
-      : stepperVariants({
-          orientation: ctx.orientation,
-          size: ctx.size,
-          variant: ctx.variant,
-          tier: ctx.tier,
-          stepState: derivedState,
-          clickable: isClickable || undefined,
-          stepDisabled: isDisabled || undefined,
-          separatorComplete: isSeparatorComplete || undefined
-        })
+      : stepperVariants(variantProps)
+  );
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'StepperStep', preset, variantProps, slotClassesProp)
   );
 
   function slot(key: keyof typeof styles, extra?: string) {

package/dist/primitives/Stepper/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 { StepperVariants } from './stepper.variants';
+import type { StepperSlots, StepperVariants } from './stepper.variants';
 /** Context for Stepper ↔ StepperStep communication */
 export interface StepperContext {
     readonly activeStep: number;
@@ -91,8 +91,8 @@ export interface StepperProps extends Omit<StepperVariants, 'stepState' | 'click
     class?: string;
     /** Remove all default tv() classes. */
     unstyled?: boolean;
-    /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<'base' | 'stepItem' | 'step' | 'indicatorColumn' | 'indicator' | 'labelGroup' | 'label' | 'description' | 'separator' | 'content', string>>;
+    /** Per-slot class overrides. Slots: base | stepItem | step | indicatorColumn | indicator | labelGroup | label | description | separator | content */
+    slotClasses?: Partial<Record<StepperSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Stepper: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the
@@ -138,8 +138,8 @@ export interface StepperStepProps extends Omit<HTMLAttributes<HTMLLIElement>, 'c
     class?: string;
     /** Remove all default tv() classes. */
     unstyled?: boolean;
-    /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<'stepItem' | 'step' | 'indicatorColumn' | 'indicator' | 'labelGroup' | 'label' | 'description' | 'separator' | 'content', string>>;
+    /** Per-slot class overrides (subset of Stepper's, minus the root `base`). */
+    slotClasses?: Partial<Record<Exclude<StepperSlots, 'base'>, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ StepperStep: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Stepper/stepper.variants.d.ts

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

package/dist/primitives/Tab/Tab.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { SvelteMap } from 'svelte/reactivity';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getTierContext } from '../../utils';
-  import { tabVariants } from './tab.variants';
+  import { tabVariants, type TabVariants } from './tab.variants';
   import { setTabContext } from './tab.context';
   import type { TabContext, TabProps } from './index';
 
@@ -34,13 +34,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Tab?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Tab', preset),
-      slotClassesProp
-    )
-  );
 
   let tabListElement = $state<HTMLDivElement>();
   let indicatorStyle = $state('');
@@ -51,14 +44,18 @@
 
   const registeredTabs = new SvelteMap<string, HTMLElement>();
 
-  const styles = $derived(
-    tabVariants({
-      variant,
-      orientation,
-      size,
-      tier: effectiveTier,
-      fullWidth
-    })
+  const variantProps: TabVariants = $derived({
+    variant,
+    orientation,
+    size,
+    tier: effectiveTier,
+    fullWidth
+  });
+
+  const styles = $derived(tabVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Tab', preset, variantProps, slotClassesProp)
   );
 
   function updateIndicator() {

package/dist/primitives/Tab/TabItem.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { mintRegistry } from '../..';
   import type { TabItemProps } from './index';
   import { getTabContext } from './tab.context';
-  import { tabVariants } from './tab.variants';
+  import { tabVariants, type TabVariants } from './tab.variants';
 
   let {
     value,
@@ -21,13 +21,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.TabItem?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'TabItem', preset),
-      slotClassesProp
-    )
-  );
 
   let tabItemElement = $state<HTMLButtonElement>();
   const tabContext = getTabContext();
@@ -39,13 +32,17 @@
   const isActive = $derived(tabContext.isActive(value));
   const isDisabled = $derived(disabled || tabContext.disabled);
 
-  const styles = $derived(
-    tabVariants({
-      variant: tabContext.variant,
-      orientation: tabContext.orientation,
-      size: tabContext.size,
-      tier: tabContext.tier
-    })
+  const variantProps: TabVariants = $derived({
+    variant: tabContext.variant,
+    orientation: tabContext.orientation,
+    size: tabContext.size,
+    tier: tabContext.tier
+  });
+
+  const styles = $derived(tabVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'TabItem', preset, variantProps, slotClassesProp)
   );
 
   onMount(() => {
@@ -85,17 +82,19 @@
   {...restProps}
 >
   {#if icon}
-    <span class={unstyled ? '' : styles.icon()}>
+    <span class={unstyled ? (slotClasses?.icon ?? '') : styles.icon({ class: slotClasses?.icon })}>
       {@render icon()}
     </span>
   {/if}
 
-  <span class={unstyled ? '' : styles.label()}>
+  <span class={unstyled ? (slotClasses?.label ?? '') : styles.label({ class: slotClasses?.label })}>
     {@render children()}
   </span>
 
   {#if badge}
-    <span class={unstyled ? '' : styles.badge()}>
+    <span
+      class={unstyled ? (slotClasses?.badge ?? '') : styles.badge({ class: slotClasses?.badge })}
+    >
       {@render badge()}
     </span>
   {/if}

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/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 { InteractiveTier } from '../../utils';
-import type { TabVariants } from './tab.variants';
+import type { TabSlots, TabVariants } from './tab.variants';
 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

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/variants';
+import { type SlotNames, type VariantProps } from '../../utils/variants';
 export declare const tabVariants: (props?: import("../../utils/variants").TVProps<{
     variant: {
         line: {
@@ -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/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/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 { TextareaSlots, TextareaVariants } from './textarea.variants';
 /**
  * @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

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/variants';
+import { type SlotNames, type VariantProps } from '../../utils/variants';
 export declare const textareaVariants: (props?: import("../../utils/variants").TVProps<{
     tier: {
         modify: {
@@ -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/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/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';
 /**
  * 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

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/variants';
+import { type SlotNames, type VariantProps } from '../../utils/variants';
 export declare const toastVariants: (props?: import("../../utils/variants").TVProps<{
     intent: {
         primary: {
@@ -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';