@urbicon-ui/blocks 6.2.0 → 6.3.3

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

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

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

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

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

@@ -1,3 +1,3 @@
-import type { AccordionContext } from './index';
+import type { AccordionContext } from './index.js';
 declare const getAccordionContext: () => AccordionContext, setAccordionContext: (context: AccordionContext) => AccordionContext;
 export { getAccordionContext, setAccordionContext };

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

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

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const accordionVariants = tv({
     slots: {
         // divide-border-hairline instead of subtle — a quieter divider.

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.js';
 /** 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
@@ -119,4 +119,4 @@ export interface AccordionItemProps extends Omit<HTMLAttributes<HTMLDivElement>,
 }
 export { default as Accordion } from './Accordion.svelte';
 export { default as AccordionItem } from './AccordionItem.svelte';
-export { type AccordionVariants, accordionVariants } from './accordion.variants';
+export { type AccordionVariants, accordionVariants } from './accordion.variants.js';

package/dist/primitives/Accordion/index.js

@@ -1,3 +1,3 @@
 export { default as Accordion } from './Accordion.svelte';
 export { default as AccordionItem } from './AccordionItem.svelte';
-export { accordionVariants } from './accordion.variants';
+export { accordionVariants } from './accordion.variants.js';

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

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

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

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

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

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.js';
 /**
  * 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
@@ -61,4 +61,4 @@ export interface AlertProps extends AlertVariants, Omit<HTMLAttributes<HTMLDivEl
     preset?: string;
 }
 export { default as Alert } from './Alert.svelte';
-export { type AlertVariants, alertVariants } from './alert.variants';
+export { type AlertVariants, alertVariants } from './alert.variants.js';

package/dist/primitives/Alert/index.js

@@ -1,2 +1,2 @@
 export { default as Alert } from './Alert.svelte';
-export { alertVariants } from './alert.variants';
+export { alertVariants } from './alert.variants.js';

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

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

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

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

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

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 { MintProp } from '../../mint/index.js';
+import type { AvatarSlots, AvatarVariants } from './avatar.variants.js';
 /**
  * @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
@@ -54,4 +54,4 @@ export interface AvatarProps extends AvatarVariants, Omit<HTMLAttributes<HTMLDiv
     preset?: string;
 }
 export { default as Avatar } from './Avatar.svelte';
-export { type AvatarVariants, avatarVariants } from './avatar.variants';
+export { type AvatarVariants, avatarVariants } from './avatar.variants.js';

package/dist/primitives/Avatar/index.js

@@ -1,2 +1,2 @@
 export { default as Avatar } from './Avatar.svelte';
-export { avatarVariants } from './avatar.variants';
+export { avatarVariants } from './avatar.variants.js';

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

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

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

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

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const PLACEMENT_VALUES = [
     'top',
     'top-start',

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 { MintProp } from '../../mint/index.js';
+import type { BadgePlacement, BadgeSlots, BadgeVariants } from './badge.variants.js';
 /**
  * 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
@@ -96,4 +96,4 @@ interface BadgeStandardProps extends BadgeBaseProps {
  */
 export type BadgeProps = BadgeDotProps | BadgeStandardProps;
 export { default as Badge } from './Badge.svelte';
-export { type BadgePlacement, type BadgeVariants, badgeVariants, PLACEMENT_VALUES } from './badge.variants';
+export { type BadgePlacement, type BadgeVariants, badgeVariants, PLACEMENT_VALUES } from './badge.variants.js';

package/dist/primitives/Badge/index.js

@@ -1,2 +1,2 @@
 export { default as Badge } from './Badge.svelte';
-export { badgeVariants, PLACEMENT_VALUES } from './badge.variants';
+export { badgeVariants, PLACEMENT_VALUES } from './badge.variants.js';

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

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

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

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

package/dist/primitives/Breadcrumb/breadcrumb.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const breadcrumbVariants = tv({
     slots: {
         nav: 'flex items-center',

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.js';
 /** 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
@@ -66,6 +66,6 @@ export interface BreadcrumbProps extends BreadcrumbVariants, Omit<HTMLAttributes
     preset?: string;
 }
 export { default as Breadcrumb } from './Breadcrumb.svelte';
-export { type BreadcrumbVariants, breadcrumbVariants } from './breadcrumb.variants';
+export { type BreadcrumbVariants, breadcrumbVariants } from './breadcrumb.variants.js';
 /** Re-export as BreadcrumbItemType for barrel-level consumption */
 export type { BreadcrumbItem as BreadcrumbItemType };

package/dist/primitives/Breadcrumb/index.js

@@ -1,2 +1,2 @@
 export { default as Breadcrumb } from './Breadcrumb.svelte';
-export { breadcrumbVariants } from './breadcrumb.variants';
+export { breadcrumbVariants } from './breadcrumb.variants.js';