@urbicon-ui/blocks 6.2.0 → 6.3.1

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { BreadcrumbVariants } from './breadcrumb.variants';
+import type { BreadcrumbSlots, BreadcrumbVariants } from './breadcrumb.variants';
 /** Single breadcrumb item definition */
 export interface BreadcrumbItem {
     /** Display label */
@@ -56,7 +56,7 @@ export interface BreadcrumbProps extends BreadcrumbVariants, Omit<HTMLAttributes
     /** Remove default styles */
     unstyled?: boolean;
     /** Per-slot class overrides */
-    slotClasses?: Partial<Record<'nav' | 'list' | 'item' | 'link' | 'currentPage' | 'separator', string>>;
+    slotClasses?: Partial<Record<BreadcrumbSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Breadcrumb: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Button/Button.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { mintRegistry, Spinner } from '../..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getButtonGroupContext } from '../ButtonGroup/buttonGroup.context';
-  import { buttonVariants } from '..';
+  import { buttonVariants, type ButtonVariants } from '..';
   import { getTierContext } from '../../utils/tier-context';
   import type { ButtonProps } from './index';
 
@@ -30,13 +30,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Button?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Button', preset),
-      slotClassesProp
-    )
-  );
 
   let buttonElement = $state<HTMLButtonElement>();
 
@@ -58,18 +51,25 @@
   const effectivePressed = $derived(pressed);
   const ariaProps = $derived(registration?.getButtonProps() ?? {});
 
-  const styles = $derived(
-    buttonVariants({
-      tier: effectiveTier,
-      intent: effectiveIntent,
-      variant: effectiveVariant,
-      size: effectiveSize,
-      loading: loading || undefined,
-      loadingPlacement,
-      pressed: effectivePressed || undefined,
-      active: effectiveActive || undefined,
-      buttonGroupConnected: groupCtx?.connected || undefined
-    })
+  // 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 button's active variants.
+  const variantProps: ButtonVariants = $derived({
+    tier: effectiveTier,
+    intent: effectiveIntent,
+    variant: effectiveVariant,
+    size: effectiveSize,
+    loading: loading || undefined,
+    loadingPlacement,
+    pressed: effectivePressed || undefined,
+    active: effectiveActive || undefined,
+    buttonGroupConnected: groupCtx?.connected || undefined
+  });
+
+  const styles = $derived(buttonVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Button', preset, variantProps, slotClassesProp)
   );
 
   $effect(() => {

package/dist/primitives/Button/button.variants.d.ts

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

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { MintProp } from '../../mint';
-import type { ButtonVariants } from './button.variants';
+import type { ButtonSlots, ButtonVariants } from './button.variants';
 /**
  * Props interface for Button component
  *
@@ -95,8 +95,8 @@ export interface ButtonProps extends ButtonVariants, Omit<HTMLButtonAttributes,
     class?: string;
     /** Remove default tailwind-variants classes. Only user classes apply. */
     unstyled?: boolean;
-    /** Per-slot class overrides merged with tv styles: base | content | spinner */
-    slotClasses?: Partial<Record<'base' | 'content' | 'spinner', string>>;
+    /** Per-slot class overrides merged with tv styles. Slots: base | content | spinner */
+    slotClasses?: Partial<Record<ButtonSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Button: {...} }}>`.
      * Prefer this over `class="bg-…!"` overrides when the requested look is outside the

package/dist/primitives/ButtonGroup/ButtonGroup.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { buttonGroupVariants } from '..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { buttonGroupVariants, type ButtonGroupVariants } from '..';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getTierContext, setTierContext } from '../../utils/tier-context';
   import type { ButtonGroupContext, ButtonGroupProps } from './index';
   import { setButtonGroupContext } from './buttonGroup.context';
@@ -40,12 +40,17 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  const variantProps: ButtonGroupVariants = $derived({
+    orientation,
+    connected,
+    tier: effectiveTier,
+    disabled
+  });
+  const styles = $derived(buttonGroupVariants(variantProps));
+
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.ButtonGroup?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'ButtonGroup', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'ButtonGroup', preset, variantProps, slotClassesProp)
   );
 
   let selectedValues = $state<Set<string>>(new Set());
@@ -60,12 +65,6 @@
     }
   });
 
-  const styles = $derived(
-    unstyled
-      ? { base: ({ class: c }: { class?: string }) => c || '' }
-      : buttonGroupVariants({ orientation, connected, tier: effectiveTier, disabled })
-  );
-
   function registerButton(buttonValue: string | undefined) {
     return {
       get isSelected() {
@@ -138,7 +137,9 @@
 
 <div
   role={ariaRole}
-  class={styles.base({ class: [slotClasses?.base, className].filter(Boolean).join(' ') })}
+  class={unstyled
+    ? [slotClasses?.base, className].filter(Boolean).join(' ')
+    : styles.base({ class: [slotClasses?.base, className] })}
   aria-label={ariaLabel}
   aria-labelledby={ariaLabelledBy}
   aria-disabled={disabled}

package/dist/primitives/ButtonGroup/buttongroup.variants.d.ts

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

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

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 import type { MintProp } from '../../mint';
 import type { ComponentIntent, ComponentSize, ComponentVariant, InteractiveTier } from '../../utils';
 import type { ButtonVariants } from '../Button/button.variants';
+import type { ButtonGroupSlots } from './buttongroup.variants';
 export type ButtonGroupSelection = 'none' | 'single' | 'multiple';
 export type ButtonGroupOrientation = 'horizontal' | 'vertical';
 export type ButtonGroupValue = string | string[] | undefined;
@@ -70,8 +71,8 @@ export interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, '
     class?: string;
     /** Remove all default tv classes. */
     unstyled?: boolean;
-    /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<'base', string>>;
+    /** Per-slot class overrides. Slots: base */
+    slotClasses?: Partial<Record<ButtonGroupSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ ButtonGroup: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Card/Card.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { mintRegistry } from '../..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
-  import { cardVariants } from './card.variants';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import { cardVariants, type CardVariants } from './card.variants';
   import type { CardProps } from './index';
 
   let {
@@ -26,13 +26,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Card?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Card', preset),
-      slotClassesProp
-    )
-  );
 
   let cardElement = $state<HTMLElement>();
 
@@ -48,15 +41,19 @@
   // element would falsely signal interactivity (WCAG 3.2 Predictable).
   const isInteractive = $derived(clickable || !!onclick || !!href);
 
-  const styles = $derived(
-    cardVariants({
-      variant,
-      padding,
-      dividers: dividers || undefined,
-      interactive: isInteractive || undefined,
-      elementType,
-      disabled: disabled || undefined
-    })
+  const variantProps: CardVariants = $derived({
+    variant,
+    padding,
+    dividers: dividers || undefined,
+    interactive: isInteractive || undefined,
+    elementType,
+    disabled: disabled || undefined
+  });
+
+  const styles = $derived(cardVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Card', preset, variantProps, slotClassesProp)
   );
 
   const elementProps = $derived.by(() => {

package/dist/primitives/Card/card.variants.d.ts

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

package/dist/primitives/Card/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 { CardVariants } from './card.variants';
+import type { CardSlots, CardVariants } from './card.variants';
 /**
  * @description Flexible container for grouping related content with optional header, footer,
  * and interactive states. Renders as div, button, or anchor depending on the provided props.
@@ -66,8 +66,8 @@ export interface CardProps extends Omit<CardVariants, 'elementType' | 'interacti
     class?: string;
     /** Remove all default tv classes. */
     unstyled?: boolean;
-    /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<'base' | 'header' | 'content' | 'footer', string>>;
+    /** Per-slot class overrides. Slots: base | header | content | footer */
+    slotClasses?: Partial<Record<CardSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Card: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Checkbox/Checkbox.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { mintRegistry } from '../..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getTierContext, useFormField } from '../../utils';
-  import { checkboxVariants } from '..';
+  import { checkboxVariants, type CheckboxVariants } from '..';
   import { resolveIcon } from '../../icons';
   import CheckIconDefault from '../../icons/CheckIcon.svelte';
   import MinusIconDefault from '../../icons/MinusIcon.svelte';
@@ -53,30 +53,30 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Checkbox?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Checkbox', preset),
-      slotClassesProp
-    )
-  );
 
   let controlElement = $state<HTMLElement>();
   let inputRef = $state<HTMLInputElement>();
 
   const dataState = $derived(indeterminate ? 'indeterminate' : checked ? 'checked' : 'unchecked');
 
-  const styles = $derived(
-    checkboxVariants({
-      tier: effectiveTier,
-      size,
-      intent,
-      variant,
-      checked,
-      indeterminate,
-      disabled,
-      error: !!error
-    })
+  // 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 checkbox's active variants.
+  const variantProps: CheckboxVariants = $derived({
+    tier: effectiveTier,
+    size,
+    intent,
+    variant,
+    checked,
+    indeterminate,
+    disabled,
+    error: !!error
+  });
+
+  const styles = $derived(checkboxVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Checkbox', preset, variantProps, slotClassesProp)
   );
 
   $effect(() => {

package/dist/primitives/Checkbox/checkbox.variants.d.ts

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

package/dist/primitives/Checkbox/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 { CheckboxVariants } from './checkbox.variants';
+import type { CheckboxSlots, CheckboxVariants } from './checkbox.variants';
 /**
  * @description Accessible checkbox with indeterminate support, semantic intents, and form integration.
  * Uses a hidden native input for correct form behavior and ARIA semantics.
@@ -47,8 +47,12 @@ export interface CheckboxProps extends Omit<CheckboxVariants, 'error' | 'checked
     class?: string;
     /** Strip all default tailwind-variants classes. Use with `slotClasses` for a fully custom look. The box 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' | 'box' | 'icon' | 'label' | 'message', string>>;
+    /**
+     * Per-slot class overrides merged with (or replacing, when `unstyled`) the
+     * default styles. Slots: wrapper (root — what `class` also targets) | control |
+     * box | icon | label | message.
+     */
+    slotClasses?: Partial<Record<CheckboxSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Checkbox: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Collapsible/Collapsible.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
-  import { collapsibleVariants } from './collapsible.variants';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import { collapsibleVariants, type CollapsibleVariants } from './collapsible.variants';
   import { resolveIcon } from '../../icons';
   import ChevronDownIconDefault from '../../icons/ChevronDownIcon.svelte';
   import type { CollapsibleProps } from './index';
@@ -27,13 +27,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Collapsible?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Collapsible', preset),
-      slotClassesProp
-    )
-  );
 
   let internalOpen = $state(defaultOpen ?? false);
   const isOpen = $derived(open !== undefined ? open : internalOpen);
@@ -49,23 +42,12 @@
     onOpenChange?.(next);
   }
 
-  const styles = $derived(
-    unstyled
-      ? {
-          base: () => '',
-          trigger: () => '',
-          chevron: () => '',
-          content: () => '',
-          contentInner: () => ''
-        }
-      : collapsibleVariants({ variant, size })
-  );
+  const variantProps: CollapsibleVariants = $derived({ variant, size });
+  const styles = $derived(collapsibleVariants(variantProps));
 
-  function slot(key: keyof typeof styles, extra?: string) {
-    const overrides = [slotClasses?.[key], extra].filter(Boolean).join(' ');
-    if (unstyled) return overrides;
-    return styles[key]({ class: overrides });
-  }
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Collapsible', preset, variantProps, slotClassesProp)
+  );
 
   const propsId = $props.id();
   const fallbackName = `collapsible-${propsId}`;
@@ -74,21 +56,33 @@
   const contentId = $derived(`${uid}-content`);
 </script>
 
-<div class={slot('base', className)} data-state={isOpen ? 'open' : 'closed'} {...restProps}>
+<div
+  class={unstyled
+    ? [slotClasses?.base, className].filter(Boolean).join(' ')
+    : styles.base({ class: [slotClasses?.base, className] })}
+  data-state={isOpen ? 'open' : 'closed'}
+  {...restProps}
+>
   {#if trigger}
     {@render trigger({ open: isOpen, toggle, disabled, triggerId, contentId })}
   {:else}
     <button
       id={triggerId}
       type="button"
-      class={slot('trigger')}
+      class={unstyled
+        ? (slotClasses?.trigger ?? '')
+        : styles.trigger({ class: slotClasses?.trigger })}
       aria-expanded={isOpen}
       aria-controls={contentId}
       {disabled}
       onclick={toggle}
     >
       <span>{title ?? ''}</span>
-      <ChevronDownIcon class={slot('chevron', isOpen ? 'rotate-180' : '')} />
+      <ChevronDownIcon
+        class={unstyled
+          ? [slotClasses?.chevron, isOpen ? 'rotate-180' : ''].filter(Boolean).join(' ')
+          : styles.chevron({ class: [slotClasses?.chevron, isOpen ? 'rotate-180' : ''] })}
+      />
     </button>
   {/if}
 
@@ -96,11 +90,17 @@
     id={contentId}
     role="region"
     aria-labelledby={triggerId}
-    class={slot('content')}
+    class={unstyled
+      ? (slotClasses?.content ?? '')
+      : styles.content({ class: slotClasses?.content })}
     style="display:grid; grid-template-rows: {isOpen ? '1fr' : '0fr'};"
   >
     <div class="overflow-hidden">
-      <div class={slot('contentInner')}>
+      <div
+        class={unstyled
+          ? (slotClasses?.contentInner ?? '')
+          : styles.contentInner({ class: slotClasses?.contentInner })}
+      >
         {@render children()}
       </div>
     </div>

package/dist/primitives/Collapsible/collapsible.variants.d.ts

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

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';
 /**
  * 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

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.variants.d.ts

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