@urbicon-ui/blocks 6.2.0 → 6.3.3

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

@@ -1,4 +1,4 @@
-import type { ButtonProps } from './index';
+import type { ButtonProps } from './index.js';
 declare const Button: import("svelte").Component<ButtonProps, {
     getElement: () => HTMLButtonElement | undefined;
 }, "">;

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

@@ -1,5 +1,5 @@
-import { type VariantProps } from '../../utils/variants';
-export declare const buttonVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const buttonVariants: (props?: import("../../utils/variants.js").TVProps<{
     tier: {
         commit: {
             base: string;
@@ -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/button.variants.js

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

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 { MintProp } from '../../mint/index.js';
+import type { ButtonSlots, ButtonVariants } from './button.variants.js';
 /**
  * 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
@@ -112,4 +112,4 @@ export interface ButtonProps extends ButtonVariants, Omit<HTMLButtonAttributes,
     mint?: MintProp;
 }
 export { default as Button } from './Button.svelte';
-export { type ButtonVariants, buttonVariants } from './button.variants';
+export { type ButtonVariants, buttonVariants } from './button.variants.js';

package/dist/primitives/Button/index.js

@@ -1,3 +1,3 @@
 export { default as Button } from './Button.svelte';
 // Export variants and component
-export { buttonVariants } from './button.variants';
+export { buttonVariants } from './button.variants.js';

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

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

package/dist/primitives/ButtonGroup/buttonGroup.context.d.ts

@@ -1,3 +1,3 @@
-import type { ButtonGroupContext } from './index';
+import type { ButtonGroupContext } from './index.js';
 declare const getButtonGroupContext: () => ButtonGroupContext | undefined, setButtonGroupContext: (value: ButtonGroupContext | undefined) => ButtonGroupContext | undefined;
 export { getButtonGroupContext, setButtonGroupContext };

package/dist/primitives/ButtonGroup/buttonGroup.context.js

@@ -1,4 +1,4 @@
-import { createOptionalContext } from '../../utils/optional-context';
+import { createOptionalContext } from '../../utils/optional-context.js';
 // Button reads this optionally — it works both inside and outside a ButtonGroup.
 const [getButtonGroupContext, setButtonGroupContext] = createOptionalContext();
 export { getButtonGroupContext, setButtonGroupContext };

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

@@ -1,5 +1,5 @@
-import { type VariantProps } from '../../utils/variants';
-export declare const buttonGroupVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const buttonGroupVariants: (props?: import("../../utils/variants.js").TVProps<{
     orientation: {
         horizontal: {
             base: string;
@@ -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/buttongroup.variants.js

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

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

@@ -1,8 +1,9 @@
 import type { Snippet } from 'svelte';
 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 { MintProp } from '../../mint/index.js';
+import type { ComponentIntent, ComponentSize, ComponentVariant, InteractiveTier } from '../../utils/index.js';
+import type { ButtonVariants } from '../Button/button.variants.js';
+import type { ButtonGroupSlots } from './buttongroup.variants.js';
 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
@@ -105,4 +106,4 @@ export interface ButtonGroupContext {
     };
 }
 export { default as ButtonGroup } from './ButtonGroup.svelte';
-export { type ButtonGroupVariants, buttonGroupVariants } from './buttongroup.variants';
+export { type ButtonGroupVariants, buttonGroupVariants } from './buttongroup.variants.js';

package/dist/primitives/ButtonGroup/index.js

@@ -1,2 +1,2 @@
 export { default as ButtonGroup } from './ButtonGroup.svelte';
-export { buttonGroupVariants } from './buttongroup.variants';
+export { buttonGroupVariants } from './buttongroup.variants.js';

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

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

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

@@ -1,5 +1,5 @@
-import { type VariantProps } from '../../utils/variants';
-export declare const cardVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const cardVariants: (props?: import("../../utils/variants.js").TVProps<{
     variant: {
         quiet: {
             base: string[];
@@ -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/card.variants.js

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

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 { MintProp } from '../../mint/index.js';
+import type { CardSlots, CardVariants } from './card.variants.js';
 /**
  * @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
@@ -79,4 +79,4 @@ export interface CardProps extends Omit<CardVariants, 'elementType' | 'interacti
     mint?: MintProp;
 }
 export { default as Card } from './Card.svelte';
-export { type CardVariants, cardVariants } from './card.variants';
+export { type CardVariants, cardVariants } from './card.variants.js';

package/dist/primitives/Card/index.js

@@ -1,2 +1,2 @@
 export { default as Card } from './Card.svelte';
-export { cardVariants } from './card.variants';
+export { cardVariants } from './card.variants.js';

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

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

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

@@ -1,5 +1,5 @@
-import { type VariantProps } from '../../utils/variants';
-export declare const checkboxVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const checkboxVariants: (props?: import("../../utils/variants.js").TVProps<{
     tier: {
         commit: {
             box: string;
@@ -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/checkbox.variants.js

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

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 { MintProp } from '../../mint/index.js';
+import type { InteractiveTier } from '../../utils/index.js';
+import type { CheckboxSlots, CheckboxVariants } from './checkbox.variants.js';
 /**
  * @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
@@ -70,4 +74,4 @@ export interface CheckboxProps extends Omit<CheckboxVariants, 'error' | 'checked
     tier?: InteractiveTier;
 }
 export { default as Checkbox } from './Checkbox.svelte';
-export { type CheckboxVariants, checkboxVariants } from './checkbox.variants';
+export { type CheckboxVariants, checkboxVariants } from './checkbox.variants.js';

package/dist/primitives/Checkbox/index.js

@@ -1,2 +1,2 @@
 export { default as Checkbox } from './Checkbox.svelte';
-export { checkboxVariants } from './checkbox.variants';
+export { checkboxVariants } from './checkbox.variants.js';

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

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

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

@@ -1,5 +1,5 @@
-import { type VariantProps } from '../../utils/variants';
-export declare const collapsibleVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const collapsibleVariants: (props?: import("../../utils/variants.js").TVProps<{
     variant: {
         default: {};
         card: {
@@ -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/collapsible.variants.js

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