@urbicon-ui/blocks 6.2.0 → 6.3.3

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { CollapsibleVariants } from './collapsible.variants';
+import type { CollapsibleSlots, CollapsibleVariants } from './collapsible.variants.js';
 /**
  * Props interface for the Collapsible component
  *
@@ -60,8 +60,8 @@ export interface CollapsibleProps extends CollapsibleVariants, Omit<HTMLAttribut
     class?: string;
     /** Remove default styles */
     unstyled?: boolean;
-    /** Per-slot class overrides */
-    slotClasses?: Partial<Record<'base' | 'trigger' | 'chevron' | 'content' | 'contentInner', string>>;
+    /** Per-slot class overrides. Slots: base | trigger | chevron | content | contentInner */
+    slotClasses?: Partial<Record<CollapsibleSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Collapsible: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the
@@ -71,4 +71,4 @@ export interface CollapsibleProps extends CollapsibleVariants, Omit<HTMLAttribut
     preset?: string;
 }
 export { default as Collapsible } from './Collapsible.svelte';
-export { type CollapsibleVariants, collapsibleVariants } from './collapsible.variants';
+export { type CollapsibleVariants, collapsibleVariants } from './collapsible.variants.js';

package/dist/primitives/Collapsible/index.js

@@ -1,2 +1,2 @@
 export { default as Collapsible } from './Collapsible.svelte';
-export { collapsibleVariants } from './collapsible.variants';
+export { collapsibleVariants } from './collapsible.variants.js';

package/dist/primitives/Combobox/Combobox.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" generics="T extends string | number | boolean = string">
   import { useBlocksI18n, mintRegistry } from '../..';
   import { tick } from 'svelte';
-  import { comboboxVariants } from './combobox.variants';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { comboboxVariants, type ComboboxVariants } from './combobox.variants';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { resolveIcon } from '../../icons';
   import CloseIconDefault from '../../icons/CloseIcon.svelte';
   import ChevronDownIconDefault from '../../icons/ChevronDownIcon.svelte';
@@ -64,13 +64,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Combobox?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Combobox', preset),
-      slotClassesProp
-    )
-  );
 
   let inputEl = $state<HTMLInputElement>();
   let listboxEl = $state<HTMLElement>();
@@ -95,25 +88,11 @@
     return options.filter((o) => filterFn(o, query.trim()));
   });
 
-  const styles = $derived(
-    unstyled
-      ? {
-          base: () => '',
-          label: () => '',
-          requiredMark: () => '',
-          inputWrapper: () => '',
-          input: () => '',
-          message: () => '',
-          hint: () => '',
-          listbox: () => '',
-          option: () => '',
-          optionActive: () => '',
-          optionSelected: () => '',
-          noResults: () => '',
-          clear: () => '',
-          chevron: () => ''
-        }
-      : comboboxVariants({ tier: effectiveTier, size, open, disabled })
+  const variantProps: ComboboxVariants = $derived({ tier: effectiveTier, size, open, disabled });
+  const styles = $derived(comboboxVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Combobox', preset, variantProps, slotClassesProp)
   );
 
   // Focus-restoration policy follows the ARIA Combobox pattern:
@@ -384,12 +363,22 @@
               data-active={isActive}
               disabled={opt.disabled}
               class={unstyled
-                ? (slotClasses?.option ?? '')
+                ? [
+                    slotClasses?.option,
+                    isActive ? slotClasses?.optionActive : undefined,
+                    isSelected ? slotClasses?.optionSelected : undefined
+                  ]
+                    .filter(Boolean)
+                    .join(' ')
                 : styles.option({
                     class: [
                       slotClasses?.option,
-                      isActive ? styles.optionActive() : undefined,
-                      isSelected ? styles.optionSelected() : undefined
+                      isActive
+                        ? styles.optionActive({ class: slotClasses?.optionActive })
+                        : undefined,
+                      isSelected
+                        ? styles.optionSelected({ class: slotClasses?.optionSelected })
+                        : undefined
                     ].filter(Boolean)
                   })}
               onclick={() => select(opt)}

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

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

package/dist/primitives/Combobox/combobox.variants.d.ts

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

package/dist/primitives/Combobox/combobox.variants.js

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

package/dist/primitives/Combobox/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 { SelectValue } from '../Select/index';
-import type { ComboboxVariants } from './combobox.variants';
+import type { MintProp } from '../../mint/index.js';
+import type { SelectValue } from '../Select/index.js';
+import type { ComboboxSlots, ComboboxVariants } from './combobox.variants.js';
 /** A single combobox option with label, value, and optional disabled state. */
 export interface ComboboxOption<T extends SelectValue = string> {
     label: string;
@@ -114,8 +114,10 @@ export interface ComboboxProps<T extends SelectValue = string> extends ComboboxV
     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<'base' | 'label' | 'requiredMark' | 'inputWrapper' | 'input' | 'message' | 'hint' | 'listbox' | 'option' | 'optionActive' | 'optionSelected' | 'noResults' | 'clear' | 'chevron', string>>;
+    /** Per-slot class overrides merged with tv() styles. Slots: base | label | requiredMark |
+     *  inputWrapper | input | message | hint | listbox | option | optionActive | optionSelected |
+     *  noResults | clear | chevron */
+    slotClasses?: Partial<Record<ComboboxSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Combobox: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the
@@ -129,4 +131,4 @@ export interface ComboboxProps<T extends SelectValue = string> extends ComboboxV
 /** Backwards-compatible alias for {@link ComboboxOption} (legacy name). */
 export type ComboboxOptionType<T extends SelectValue = string> = ComboboxOption<T>;
 export { default as Combobox } from './Combobox.svelte';
-export { type ComboboxVariants, comboboxVariants } from './combobox.variants';
+export { type ComboboxVariants, comboboxVariants } from './combobox.variants.js';

package/dist/primitives/Combobox/index.js

@@ -1,2 +1,2 @@
 export { default as Combobox } from './Combobox.svelte';
-export { comboboxVariants } from './combobox.variants';
+export { comboboxVariants } from './combobox.variants.js';

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

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

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

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { DialogIntent } from '../Dialog';
+import type { DialogIntent } from '../Dialog/index.js';
 /**
  * Intent applied to the confirm button. Reuses the standard intent palette
  * via {@link DialogIntent} (with `neutral` mapped to `primary` for visual

package/dist/primitives/Dialog/Dialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { useBlocksI18n } from '../..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { resolveIcon } from '../../icons';
   import CloseIconDefault from '../../icons/CloseIcon.svelte';
   import { onDestroy } from 'svelte';
@@ -14,7 +14,7 @@
   import { overlayStack, getOverlayMotion } from '../../utils';
   import Button from '../Button/Button.svelte';
   import type { DialogProps } from './index';
-  import { dialogVariants } from './dialog.variants';
+  import { dialogVariants, type DialogVariants } from './dialog.variants';
 
   const bt = useBlocksI18n();
 
@@ -62,13 +62,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Dialog?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Dialog', preset),
-      slotClassesProp
-    )
-  );
 
   let dialogEl = $state<HTMLDialogElement>();
   let panelEl = $state<HTMLElement>();
@@ -82,7 +75,11 @@
   const bodyId = `dialog-body-${uid}`;
   const overlayId = `dialog-${uid}`;
 
-  const styles = $derived(dialogVariants({ size, placement, intent }));
+  const variantProps: DialogVariants = $derived({ size, placement, intent });
+  const styles = $derived(dialogVariants(variantProps));
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Dialog', preset, variantProps, slotClassesProp)
+  );
 
   function requestClose() {
     if (!isVisible || !open) return;

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

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

package/dist/primitives/Dialog/dialog.variants.d.ts

@@ -1,5 +1,5 @@
-import { type VariantProps } from '../../utils/variants';
-export declare const dialogVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const dialogVariants: (props?: import("../../utils/variants.js").TVProps<{
     size: {
         sm: {
             panel: string;
@@ -103,3 +103,5 @@ export declare const dialogVariants: (props?: import("../../utils/variants").TVP
     }) | undefined) => string;
 };
 export type DialogVariants = VariantProps<typeof dialogVariants>;
+/** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */
+export type DialogSlots = SlotNames<typeof dialogVariants>;

package/dist/primitives/Dialog/dialog.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const dialogVariants = tv({
     slots: {
         dialog: [

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLDialogAttributes } from 'svelte/elements';
-import type { DialogVariants } from './dialog.variants';
+import type { DialogSlots, DialogVariants } from './dialog.variants.js';
 /**
  * @description Overlay dialog built on native dialog element. Can be used as a simple
  * content-agnostic overlay or as a structured dialog with title, footer, and intent accent.
@@ -76,7 +76,7 @@ export interface DialogProps extends Omit<HTMLDialogAttributes, 'children' | 'op
     /** Strip all default styles. Combine with slotClasses for fully custom appearance. */
     unstyled?: boolean;
     /** Per-slot class overrides merged with variant styles. */
-    slotClasses?: Partial<Record<'dialog' | 'backdrop' | 'panel' | 'content' | 'header' | 'title' | 'body' | 'footer', string>>;
+    slotClasses?: Partial<Record<DialogSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Dialog: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the
@@ -99,4 +99,4 @@ export type DialogPlacement = NonNullable<DialogVariants['placement']>;
  */
 export type DialogIntent = NonNullable<DialogVariants['intent']>;
 export { default as Dialog } from './Dialog.svelte';
-export { type DialogVariants, dialogVariants } from './dialog.variants';
+export { type DialogVariants, dialogVariants } from './dialog.variants.js';

package/dist/primitives/Dialog/index.js

@@ -1,2 +1,2 @@
 export { default as Dialog } from './Dialog.svelte';
-export { dialogVariants } from './dialog.variants';
+export { dialogVariants } from './dialog.variants.js';

package/dist/primitives/Drawer/Drawer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { useBlocksI18n } from '../..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { resolveIcon } from '../../icons';
   import CloseIconDefault from '../../icons/CloseIcon.svelte';
   import { onDestroy } from 'svelte';
@@ -14,7 +14,7 @@
   import { overlayStack, getOverlayMotion } from '../../utils';
   import Button from '../Button/Button.svelte';
   import type { DrawerProps } from './index';
-  import { drawerVariants } from './drawer.variants';
+  import { drawerVariants, type DrawerVariants } from './drawer.variants';
 
   const bt = useBlocksI18n();
 
@@ -54,13 +54,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Drawer?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Drawer', preset),
-      slotClassesProp
-    )
-  );
 
   let dialogElement = $state<HTMLDialogElement>();
   let panelElement = $state<HTMLElement>();
@@ -72,7 +65,11 @@
   const bodyId = `drawer-body-${uid}`;
   const overlayId = `drawer-${uid}`;
 
-  const styles = $derived(drawerVariants({ placement, size, intent }));
+  const variantProps: DrawerVariants = $derived({ placement, size, intent });
+  const styles = $derived(drawerVariants(variantProps));
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Drawer', preset, variantProps, slotClassesProp)
+  );
 
   const motion = $derived(
     getOverlayMotion({

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

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

package/dist/primitives/Drawer/drawer.variants.d.ts

@@ -1,5 +1,5 @@
-import { type VariantProps } from '../../utils/variants';
-export declare const drawerVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const drawerVariants: (props?: import("../../utils/variants.js").TVProps<{
     placement: {
         left: {
             dialog: string;
@@ -92,3 +92,5 @@ export declare const drawerVariants: (props?: import("../../utils/variants").TVP
     }) | undefined) => string;
 };
 export type DrawerVariants = VariantProps<typeof drawerVariants>;
+/** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */
+export type DrawerSlots = SlotNames<typeof drawerVariants>;

package/dist/primitives/Drawer/drawer.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const drawerVariants = tv({
     slots: {
         dialog: [

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLDialogAttributes } from 'svelte/elements';
-import type { DrawerVariants } from './drawer.variants';
+import type { DrawerSlots, DrawerVariants } from './drawer.variants.js';
 /**
  * @description Slide-in panel overlay from any edge of the viewport.
  * Uses native dialog with focus trap, backdrop click dismiss, and Escape key support.
@@ -66,7 +66,7 @@ export interface DrawerProps extends Omit<HTMLDialogAttributes, 'children' | 'op
     /** Strip all default styles. Combine with slotClasses for fully custom appearance. */
     unstyled?: boolean;
     /** Per-slot class overrides merged with variant styles. */
-    slotClasses?: Partial<Record<'dialog' | 'backdrop' | 'panel' | 'header' | 'title' | 'body' | 'footer', string>>;
+    slotClasses?: Partial<Record<DrawerSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Drawer: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the
@@ -76,4 +76,4 @@ export interface DrawerProps extends Omit<HTMLDialogAttributes, 'children' | 'op
     preset?: string;
 }
 export { default as Drawer } from './Drawer.svelte';
-export { type DrawerVariants, drawerVariants } from './drawer.variants';
+export { type DrawerVariants, drawerVariants } from './drawer.variants.js';

package/dist/primitives/Drawer/index.js

@@ -1,2 +1,2 @@
 export { default as Drawer } from './Drawer.svelte';
-export { drawerVariants } from './drawer.variants';
+export { drawerVariants } from './drawer.variants.js';

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

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

package/dist/primitives/Input/Input.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { useBlocksI18n, mintRegistry, createPersistentState } from '../..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { useFormField, getTierContext } from '../../utils';
   import type { InputProps } from '.';
-  import { inputVariants } from './input.variants';
+  import { inputVariants, type InputVariants } from './input.variants';
   import { resolveIcon } from '../../icons';
   import CloseIconDefault from '../../icons/CloseIcon.svelte';
 
@@ -50,13 +50,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Input?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Input', preset),
-      slotClassesProp
-    )
-  );
 
   let inputRef = $state<HTMLInputElement>();
 
@@ -99,20 +92,27 @@
   const hasLeftIcon = $derived(!!leftIcon);
   const hasRightIcon = $derived(!!(effectiveRightIcon || shouldShowClear));
 
-  const styles = $derived(
-    inputVariants({
-      tier: effectiveTier,
-      variant,
-      size,
-      intent,
-      disabled: disabled || undefined,
-      readonly: readonly || undefined,
-      error: !!error || undefined,
-      required: required || undefined,
-      hasLeftIcon: hasLeftIcon || undefined,
-      hasRightIcon: hasRightIcon || undefined,
-      messageType: error ? 'error' : 'helper'
-    })
+  // Variant props feed both the tv() style computation and the slot-class
+  // cascade — extracted into one derived so `resolveSlotClasses` can match
+  // conditional `overrides` against the input's active variants.
+  const variantProps: InputVariants = $derived({
+    tier: effectiveTier,
+    variant,
+    size,
+    intent,
+    disabled: disabled || undefined,
+    readonly: readonly || undefined,
+    error: !!error || undefined,
+    required: required || undefined,
+    hasLeftIcon: hasLeftIcon || undefined,
+    hasRightIcon: hasRightIcon || undefined,
+    messageType: error ? 'error' : 'helper'
+  });
+
+  const styles = $derived(inputVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Input', preset, variantProps, slotClassesProp)
   );
 
   // ARIA wiring is shared with every form primitive — see XC-2.
@@ -179,11 +179,17 @@
       : styles.container({ class: slotClasses?.container })}
   >
     {#if leftIcon}
-      <div class={styles.iconContainer({ iconPosition: 'left' })}>
+      <div
+        class={unstyled
+          ? (slotClasses?.iconContainer ?? '')
+          : styles.iconContainer({ iconPosition: 'left', class: slotClasses?.iconContainer })}
+      >
         {#if onLeftIconClick}
           <button
             type="button"
-            class={styles.iconButton()}
+            class={unstyled
+              ? (slotClasses?.iconButton ?? '')
+              : styles.iconButton({ class: slotClasses?.iconButton })}
             onclick={handleLeftIconClick}
             {disabled}
             aria-label={leftIconAriaLabel}
@@ -191,7 +197,11 @@
             {@render leftIcon()}
           </button>
         {:else}
-          <span class={styles.iconDecoration()}>
+          <span
+            class={unstyled
+              ? (slotClasses?.iconDecoration ?? '')
+              : styles.iconDecoration({ class: slotClasses?.iconDecoration })}
+          >
             {@render leftIcon()}
           </span>
         {/if}
@@ -220,7 +230,9 @@
       >
         <button
           type="button"
-          class={styles.iconButton()}
+          class={unstyled
+            ? (slotClasses?.iconButton ?? '')
+            : styles.iconButton({ class: slotClasses?.iconButton })}
           onclick={handleClear}
           aria-label={bt('accessibility.clearInput')}
         >
@@ -236,7 +248,9 @@
         {#if onRightIconClick}
           <button
             type="button"
-            class={styles.iconButton()}
+            class={unstyled
+              ? (slotClasses?.iconButton ?? '')
+              : styles.iconButton({ class: slotClasses?.iconButton })}
             onclick={handleRightIconClick}
             {disabled}
             aria-label={rightIconAriaLabel}
@@ -244,7 +258,11 @@
             {@render effectiveRightIcon()}
           </button>
         {:else}
-          <span class={styles.iconDecoration()}>
+          <span
+            class={unstyled
+              ? (slotClasses?.iconDecoration ?? '')
+              : styles.iconDecoration({ class: slotClasses?.iconDecoration })}
+          >
             {@render effectiveRightIcon()}
           </span>
         {/if}
@@ -253,7 +271,13 @@
   </div>
 
   {#if ff.errorId}
-    <div id={ff.errorId} class={styles.message()} role="alert">
+    <div
+      id={ff.errorId}
+      class={unstyled
+        ? (slotClasses?.message ?? '')
+        : styles.message({ class: slotClasses?.message })}
+      role="alert"
+    >
       {error}
     </div>
   {:else if ff.hintId}

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

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

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
-import type { MintProp } from '../../mint';
-import type { InputVariants } from './input.variants';
+import type { MintProp } from '../../mint/index.js';
+import type { InputSlots, InputVariants } from './input.variants.js';
 /**
  * @description Text input with labels, validation states, icons, and clearable functionality.
  * Supports outlined, filled, and ghost visual variants with automatic ARIA linking.
@@ -68,8 +68,12 @@ export interface InputProps extends Omit<InputVariants, 'error'>, Omit<HTMLInput
     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' | 'container' | 'base' | 'label' | 'message' | 'iconContainer', string>>;
+    /**
+     * Per-slot class overrides merged with tv() styles. Slots: wrapper (root —
+     * what `class` also targets) | container | base (the `<input>` element) |
+     * label | message | iconContainer | iconButton | iconDecoration.
+     */
+    slotClasses?: Partial<Record<InputSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Input: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the
@@ -91,4 +95,4 @@ export interface InputProps extends Omit<InputVariants, 'error'>, Omit<HTMLInput
     persistNamespace?: string;
 }
 export { default as Input } from './Input.svelte';
-export { type InputVariants, inputVariants } from './input.variants';
+export { type InputVariants, inputVariants } from './input.variants.js';

package/dist/primitives/Input/index.js

@@ -1,2 +1,2 @@
 export { default as Input } from './Input.svelte';
-export { inputVariants } from './input.variants';
+export { inputVariants } from './input.variants.js';

package/dist/primitives/Input/input.variants.d.ts

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

package/dist/primitives/Input/input.variants.js

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