@urbicon-ui/blocks 6.2.0 → 6.3.1

package/dist/components/SidebarLayout/index.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { SidebarLayoutVariants } from './sidebar-layout.variants';
+import type { SidebarLayoutSlots, SidebarLayoutVariants } from './sidebar-layout.variants';
 /**
  * Snippet payload for the `mobileHeader` slot. Receives an opener for the
  * sidebar overlay so the consumer can wire a hamburger button without
@@ -12,7 +12,13 @@ export interface MobileHeaderContext {
     /** Current open state of the sidebar. */
     sidebarOpen: boolean;
 }
-type SidebarLayoutSlot = 'root' | 'mobileHeader' | 'main' | 'inner' | 'sidebar' | 'sidebarBackdrop' | 'sidebarHeader' | 'sidebarContent' | 'sidebarFooter';
+/**
+ * Slot keys for `slotClasses`. The tv-driven slots (`SidebarLayoutSlots`:
+ * root | mobileHeader | main | inner) are the layout's own; the `sidebar*`
+ * keys are forwarded to the embedded `<Sidebar>` (mapped to its
+ * `slotClasses.panel`/`backdrop`/`header`/`content`/`footer`).
+ */
+type SidebarLayoutSlot = SidebarLayoutSlots | 'sidebar' | 'sidebarBackdrop' | 'sidebarHeader' | 'sidebarContent' | 'sidebarFooter';
 /**
  * @description App-shell layout that wires a `<Sidebar>` to a main content
  * region and an optional mobile header. Use this whenever you want a

package/dist/components/SidebarLayout/sidebar-layout.variants.d.ts

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

package/dist/components/ThemeSwitcher/ThemeSwitcher.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import type { ThemeSwitcherProps, Theme } from './index';
-  import { themeSwitcherVariants } from './themeSwitcher.variants';
+  import { themeSwitcherVariants, type ThemeSwitcherVariants } from './themeSwitcher.variants';
   import { onMount } from 'svelte';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { MediaQuery } from 'svelte/reactivity';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { resolveIcon } from '../../icons';
   import SunIconDefault from '../../icons/SunIcon.svelte';
   import MoonIconDefault from '../../icons/MoonIcon.svelte';
@@ -31,31 +32,22 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.ThemeSwitcher?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'ThemeSwitcher', preset),
-      slotClassesProp
-    )
-  );
 
-  let mounted = $state(false);
+  // Reactive, SSR-safe `prefers-color-scheme` reader (svelte/reactivity) —
+  // re-evaluates `resolvedTheme` on OS changes without a manual listener.
+  const prefersDark = new MediaQuery('(prefers-color-scheme: dark)');
 
-  const styles = $derived(
-    unstyled ? undefined : themeSwitcherVariants({ variant, size, disabled })
-  );
+  const variantProps: ThemeSwitcherVariants = $derived({ variant, size, disabled });
 
-  function slot(name: 'button' | 'icon') {
-    const base = styles?.[name]?.() ?? '';
-    const override = slotClasses?.[name] ?? '';
-    return override ? `${base} ${override}` : base;
-  }
+  const styles = $derived(themeSwitcherVariants(variantProps));
 
-  const resolvedTheme: Theme = $derived.by(() => {
-    if (theme !== 'system' || typeof window === 'undefined') return theme;
-    if (!mounted) return 'light';
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-  });
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'ThemeSwitcher', preset, variantProps, slotClassesProp)
+  );
+
+  const resolvedTheme: Theme = $derived(
+    theme === 'system' ? (prefersDark.current ? 'dark' : 'light') : theme
+  );
 
   const label = $derived(
     theme === 'light'
@@ -93,16 +85,15 @@
       root.classList.add('dark');
       if (storageKey) localStorage.setItem(storageKey, 'dark');
     } else {
+      // System: drop both overrides and let `:root { color-scheme: light dark }`
+      // resolve `light-dark()` against the OS preference natively — this keeps
+      // following OS changes live, on every page, without a JS listener.
       root.classList.remove('light', 'dark');
       if (storageKey) localStorage.removeItem(storageKey);
-      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      root.classList.toggle('dark', prefersDark);
     }
   }
 
   onMount(() => {
-    mounted = true;
-
     if (storageKey) {
       const saved = localStorage.getItem(storageKey);
       if (saved === 'light' || saved === 'dark') {
@@ -110,13 +101,6 @@
       }
     }
     applyTheme();
-
-    const mq = window.matchMedia('(prefers-color-scheme: dark)');
-    const handler = () => {
-      if (theme === 'system') applyTheme();
-    };
-    mq.addEventListener('change', handler);
-    return () => mq.removeEventListener('change', handler);
   });
 
   export function getTheme(): Theme {
@@ -131,16 +115,24 @@
 <button
   type="button"
   onclick={cycle}
-  class="{slot('button')} {className}"
+  class={unstyled
+    ? [slotClasses?.button, className].filter(Boolean).join(' ')
+    : styles.button({ class: [slotClasses?.button, className] })}
   aria-label={label}
   title={label}
   {disabled}
 >
   {#if theme === 'light'}
-    <SunIcon class={slot('icon')} />
+    <SunIcon
+      class={unstyled ? (slotClasses?.icon ?? '') : styles.icon({ class: slotClasses?.icon })}
+    />
   {:else if theme === 'dark'}
-    <MoonIcon class={slot('icon')} />
+    <MoonIcon
+      class={unstyled ? (slotClasses?.icon ?? '') : styles.icon({ class: slotClasses?.icon })}
+    />
   {:else}
-    <MonitorIcon class={slot('icon')} />
+    <MonitorIcon
+      class={unstyled ? (slotClasses?.icon ?? '') : styles.icon({ class: slotClasses?.icon })}
+    />
   {/if}
 </button>

package/dist/components/ThemeSwitcher/index.d.ts

@@ -1,10 +1,12 @@
-import type { ThemeSwitcherVariants } from './themeSwitcher.variants';
+import type { ThemeSwitcherSlots, ThemeSwitcherVariants } from './themeSwitcher.variants';
 export type Theme = 'light' | 'dark' | 'system';
 /**
  * Props for the ThemeSwitcher component.
  *
- * @description Cycles between light, dark, and system color schemes.
- * Applies light/dark classes on the html element and persists to localStorage.
+ * @description Cycles between light, dark, and system color schemes. Sets a
+ * `light`/`dark` class on the `<html>` element for explicit choices and clears
+ * it in system mode (so the CSS `light-dark()` function follows the OS natively).
+ * Persists the choice to localStorage.
  *
  * @tag action
  * @related LocaleSwitcher
@@ -42,7 +44,7 @@ export interface ThemeSwitcherProps {
     /** Strip all default styles. @default false */
     unstyled?: boolean;
     /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<'button' | 'icon', string>>;
+    slotClasses?: Partial<Record<ThemeSwitcherSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ ThemeSwitcher: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/components/ThemeSwitcher/themeSwitcher.variants.d.ts

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

package/dist/primitives/Accordion/Accordion.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
-  import { accordionVariants } from './accordion.variants';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import { accordionVariants, type AccordionVariants } from './accordion.variants';
   import { setAccordionContext } from './accordion.context';
   import type { AccordionProps, AccordionContext } from './index';
 
@@ -23,16 +23,14 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  const variantProps: AccordionVariants = $derived({ variant, size });
+  const styles = $derived(accordionVariants(variantProps));
+
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Accordion?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Accordion', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'Accordion', preset, variantProps, slotClassesProp)
   );
 
-  const styles = $derived(unstyled ? { base: () => '' } : accordionVariants({ variant, size }));
-
   function normalise(v: string | string[] | undefined): string[] {
     if (v === undefined) return [];
     return Array.isArray(v) ? v : [v];

package/dist/primitives/Accordion/AccordionItem.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
-  import { accordionVariants } from './accordion.variants';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import { accordionVariants, type AccordionVariants } from './accordion.variants';
   import { getAccordionContext } from './accordion.context';
   import { resolveIcon } from '../../icons';
   import ChevronDownIconDefault from '../../icons/ChevronDownIcon.svelte';
@@ -24,31 +24,19 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.AccordionItem?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'AccordionItem', preset),
-      slotClassesProp
-    )
-  );
 
   const ctx = getAccordionContext();
   const open = $derived(ctx.isOpen(value));
   const isDisabled = $derived(itemDisabled || ctx.disabled);
 
-  const styles = $derived(
-    unstyled
-      ? {
-          item: () => '',
-          trigger: () => '',
-          chevron: () => '',
-          content: () => '',
-          contentInner: () => ''
-        }
-      : accordionVariants({ variant: ctx.variant, size: ctx.size })
+  const variantProps: AccordionVariants = $derived({ variant: ctx.variant, size: ctx.size });
+  const styles = $derived(accordionVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'AccordionItem', preset, variantProps, slotClassesProp)
   );
 
-  function slot(key: keyof typeof styles, extra?: string) {
+  function slot(key: Exclude<keyof typeof styles, 'base'>, extra?: string) {
     const overrides = [slotClasses?.[key], extra].filter(Boolean).join(' ');
     if (unstyled) return overrides;
     return styles[key]({ class: overrides });

package/dist/primitives/Accordion/accordion.variants.d.ts

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

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { AccordionVariants } from './accordion.variants';
+import type { AccordionSlots, AccordionVariants } from './accordion.variants';
 /** Context for Accordion ↔ AccordionItem communication */
 export interface AccordionContext {
     toggle: (value: string) => void;
@@ -26,7 +26,7 @@ export interface AccordionContext {
  *     A Svelte 5 component library with built-in i18n and design tokens.
  *   </AccordionItem>
  *   <AccordionItem value="faq-2" title="How does dark mode work?">
- *     Semantic tokens automatically handle light/dark via prefers-color-scheme.
+ *     Semantic tokens automatically handle light/dark via the CSS light-dark() function.
  *   </AccordionItem>
  * </Accordion>
  * ```
@@ -62,8 +62,8 @@ export interface AccordionProps extends AccordionVariants, Omit<HTMLAttributes<H
     class?: string;
     /** Remove default styles */
     unstyled?: boolean;
-    /** Per-slot class overrides */
-    slotClasses?: Partial<Record<'base' | 'item' | 'trigger' | 'chevron' | 'content' | 'contentInner', string>>;
+    /** Per-slot class overrides. Slots: base | item | trigger | chevron | content | contentInner */
+    slotClasses?: Partial<Record<AccordionSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Accordion: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the
@@ -107,8 +107,8 @@ export interface AccordionItemProps extends Omit<HTMLAttributes<HTMLDivElement>,
     class?: string;
     /** Remove default styles */
     unstyled?: boolean;
-    /** Per-slot class overrides */
-    slotClasses?: Partial<Record<'item' | 'trigger' | 'chevron' | 'content' | 'contentInner', string>>;
+    /** Per-slot class overrides. Slots: item | trigger | chevron | content | contentInner */
+    slotClasses?: Partial<Record<Exclude<AccordionSlots, 'base'>, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ AccordionItem: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Alert/Alert.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { useBlocksI18n } from '../..';
-  import { alertVariants } from './alert.variants';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { alertVariants, type AlertVariants } from './alert.variants';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { resolveIcon } from '../../icons';
   import CloseIconDefault from '../../icons/CloseIcon.svelte';
   import type { AlertProps } from './index';
@@ -29,26 +29,12 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Alert?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Alert', preset),
-      slotClassesProp
-    )
-  );
 
-  const styles = $derived(
-    unstyled
-      ? {
-          base: () => '',
-          icon: () => '',
-          content: () => '',
-          title: () => '',
-          description: () => '',
-          actions: () => '',
-          dismissButton: () => ''
-        }
-      : alertVariants({ intent, variant, size })
+  const variantProps: AlertVariants = $derived({ intent, variant, size });
+  const styles = $derived(alertVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Alert', preset, variantProps, slotClassesProp)
   );
 </script>
 

package/dist/primitives/Alert/alert.variants.d.ts

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

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { AlertVariants } from './alert.variants';
+import type { AlertSlots, AlertVariants } from './alert.variants';
 /**
  * Props interface for Alert component
  *
@@ -50,8 +50,8 @@ export interface AlertProps extends AlertVariants, Omit<HTMLAttributes<HTMLDivEl
     class?: string;
     /** Remove default styles */
     unstyled?: boolean;
-    /** Per-slot class overrides */
-    slotClasses?: Partial<Record<'base' | 'icon' | 'content' | 'title' | 'description' | 'actions' | 'dismissButton', string>>;
+    /** Per-slot class overrides. Slots: base | icon | content | title | description | actions | dismissButton */
+    slotClasses?: Partial<Record<AlertSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Alert: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Avatar/Avatar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { mintRegistry } from '../..';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
-  import { avatarVariants } from '..';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import { avatarVariants, type AvatarVariants } from '..';
   import { useBlocksI18n } from '../..';
   import type { AvatarProps } from './index';
 
@@ -35,13 +35,6 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Avatar?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Avatar', preset),
-      slotClassesProp
-    )
-  );
 
   let avatarElement = $state<HTMLElement>();
   let imageError = $state(false);
@@ -92,17 +85,21 @@
 
   const randomBg = $derived(randomColor ? getRandomColor(name) : undefined);
 
-  const styles = $derived(
-    avatarVariants({
-      size,
-      variant,
-      intent: randomColor ? undefined : intent,
-      status,
-      statusPosition,
-      ring,
-      ringIntent: ringColor ? undefined : ringIntent,
-      interactive: isInteractive
-    })
+  const variantProps: AvatarVariants = $derived({
+    size,
+    variant,
+    intent: randomColor ? undefined : intent,
+    status,
+    statusPosition,
+    ring,
+    ringIntent: ringColor ? undefined : ringIntent,
+    interactive: isInteractive
+  });
+
+  const styles = $derived(avatarVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Avatar', preset, variantProps, slotClassesProp)
   );
 
   const dynamicStyles = $derived.by(() => {

package/dist/primitives/Avatar/avatar.variants.d.ts

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

package/dist/primitives/Avatar/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 { AvatarVariants } from './avatar.variants';
+import type { AvatarSlots, AvatarVariants } from './avatar.variants';
 /**
  * @description User profile image component with fallback initials, multiple sizes, and interactive states.
  *
@@ -43,8 +43,8 @@ export interface AvatarProps extends AvatarVariants, Omit<HTMLAttributes<HTMLDiv
     class?: string;
     /** Remove all default tv classes. */
     unstyled?: boolean;
-    /** Per-slot class overrides merged with tv styles. */
-    slotClasses?: Partial<Record<'base' | 'image' | 'fallback' | 'status', string>>;
+    /** Per-slot class overrides merged with tv styles. Slots: base | image | fallback | status */
+    slotClasses?: Partial<Record<AvatarSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Avatar: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Badge/Badge.svelte

@@ -6,7 +6,7 @@
   import { useBlocksI18n } from '../..';
 
   const CloseIcon = resolveIcon('close', CloseIconDefault);
-  import { badgeVariants } from '..';
+  import { badgeVariants, type BadgeVariants } from '..';
   import { getTierContext } from '../../utils/tier-context';
   import type { BadgeProps } from './index';
 
@@ -50,7 +50,7 @@
   const isInteractive = $derived(interactive || !!onclick);
   const isRemovable = $derived(removable && !isDot);
 
-  const variantProps = $derived({
+  const variantProps: BadgeVariants = $derived({
     tier: effectiveTier,
     intent,
     variant,

package/dist/primitives/Badge/badge.variants.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/variants';
+import { type SlotNames, type VariantProps } from '../../utils/variants';
 export declare const PLACEMENT_VALUES: readonly ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "right"];
 export declare const badgeVariants: (props?: import("../../utils/variants").TVProps<{
     tier: {
@@ -151,4 +151,6 @@ export declare const badgeVariants: (props?: import("../../utils/variants").TVPr
     }) | undefined) => string;
 };
 export type BadgeVariants = VariantProps<typeof badgeVariants>;
+/** Slot names derived from the tv() config — single source of truth for slotClasses. */
+export type BadgeSlots = SlotNames<typeof badgeVariants>;
 export type BadgePlacement = (typeof PLACEMENT_VALUES)[number];

package/dist/primitives/Badge/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 { BadgePlacement, BadgeVariants } from './badge.variants';
+import type { BadgePlacement, BadgeSlots, BadgeVariants } from './badge.variants';
 /**
  * Shared fields that apply to every Badge variant — `dot` and the
  * label-style variants both accept these.
@@ -24,7 +24,7 @@ interface BadgeBaseProps extends Omit<BadgeVariants, 'variant'>, Omit<HTMLAttrib
     /** Remove all default tv classes. */
     unstyled?: boolean;
     /** Per-slot class overrides merged with tv styles. */
-    slotClasses?: Partial<Record<'base' | 'content' | 'removeButton' | 'removeIcon', string>>;
+    slotClasses?: Partial<Record<BadgeSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Badge: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the

package/dist/primitives/Breadcrumb/Breadcrumb.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
-  import { breadcrumbVariants } from './breadcrumb.variants';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import { breadcrumbVariants, type BreadcrumbVariants } from './breadcrumb.variants';
   import type { BreadcrumbProps } from './index';
 
   let {
@@ -17,52 +17,50 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Breadcrumb?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Breadcrumb', preset),
-      slotClassesProp
-    )
-  );
 
-  const styles = $derived(
-    unstyled
-      ? {
-          nav: () => '',
-          list: () => '',
-          item: () => '',
-          link: () => '',
-          currentPage: () => '',
-          separator: () => ''
-        }
-      : breadcrumbVariants({ size })
-  );
+  const variantProps: BreadcrumbVariants = $derived({ size });
+
+  const styles = $derived(breadcrumbVariants(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, 'Breadcrumb', preset, variantProps, slotClassesProp)
+  );
 </script>
 
-<nav class={slot('nav', className)} aria-label={ariaLabel} {...restProps}>
-  <ol class={slot('list')}>
+<nav
+  class={unstyled
+    ? [slotClasses?.nav, className].filter(Boolean).join(' ')
+    : styles.nav({ class: [slotClasses?.nav, className] })}
+  aria-label={ariaLabel}
+  {...restProps}
+>
+  <ol class={unstyled ? (slotClasses?.list ?? '') : styles.list({ class: slotClasses?.list })}>
     {#each items as item, i (`${item.label}-${i}`)}
-      <li class={slot('item')}>
+      <li class={unstyled ? (slotClasses?.item ?? '') : styles.item({ class: slotClasses?.item })}>
         {#if i === items.length - 1}
-          <span class={slot('currentPage')} aria-current="page">{item.label}</span>
+          <span
+            class={unstyled
+              ? (slotClasses?.currentPage ?? '')
+              : styles.currentPage({ class: slotClasses?.currentPage })}
+            aria-current="page">{item.label}</span
+          >
         {:else}
           <!-- eslint-disable svelte/no-navigation-without-resolve -- BreadcrumbItem.href is opaque to the library -->
           <a
             href={item.href}
-            class={slot('link')}
+            class={unstyled ? (slotClasses?.link ?? '') : styles.link({ class: slotClasses?.link })}
             aria-label={item['aria-label']}
             onclick={item.onclick}
           >
             {item.label}
           </a>
           <!-- eslint-enable svelte/no-navigation-without-resolve -->
-          <span class={slot('separator')} aria-hidden="true">
+          <span
+            class={unstyled
+              ? (slotClasses?.separator ?? '')
+              : styles.separator({ class: slotClasses?.separator })}
+            aria-hidden="true"
+          >
             {#if separator}
               {@render separator()}
             {:else}

package/dist/primitives/Breadcrumb/breadcrumb.variants.d.ts

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