@urbicon-ui/blocks 6.2.0 → 6.3.3

package/dist/components/AreaChart/AreaChart.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import type { AreaChartProps } from './index';
   import type { ChartSeries } from '../../internal/charts/types';
   import { chartSlotResolver } from '../../internal/charts/variants';
@@ -38,11 +38,7 @@
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.AreaChart?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'AreaChart', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'AreaChart', preset, {}, slotClassesProp)
   );
   const slot = $derived(chartSlotResolver(unstyled, slotClasses));
 

package/dist/components/AreaChart/AreaChart.svelte.d.ts

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

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

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { CartesianDatum, ChartMargin, ChartSeries, ChartSlotClasses } from '../../internal/charts/types';
+import type { CartesianDatum, ChartMargin, ChartSeries, ChartSlotClasses } from '../../internal/charts/types.js';
 /**
  * @description Area chart for trends with volume emphasis — filled regions
  * under each series, optionally stacked. Zero-dependency SVG on the design-

package/dist/components/BarChart/BarChart.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import type { BarChartProps } from './index';
   import type { ChartSeries } from '../../internal/charts/types';
   import { chartSlotResolver } from '../../internal/charts/variants';
@@ -35,11 +35,7 @@
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.BarChart?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'BarChart', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'BarChart', preset, {}, slotClassesProp)
   );
   const slot = $derived(chartSlotResolver(unstyled, slotClasses));
 

package/dist/components/BarChart/BarChart.svelte.d.ts

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

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

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { CartesianDatum, ChartMargin, ChartSeries, ChartSlotClasses } from '../../internal/charts/types';
+import type { CartesianDatum, ChartMargin, ChartSeries, ChartSlotClasses } from '../../internal/charts/types.js';
 /** One category (x-axis tick) with one value per series. @see CartesianDatum */
 export type BarChartDatum = CartesianDatum;
 /**

package/dist/components/Calendar/Calendar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { SvelteMap, MediaQuery } from 'svelte/reactivity';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
-  import { calendarVariants } from './calendar.variants';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import { calendarVariants, type CalendarVariants } from './calendar.variants';
   import { setCalendarContext, type CalendarContext } from './calendar.context';
   import {
     getYearMonths,
@@ -114,17 +114,19 @@
   // --- BlocksConfig integration ---
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  // --- Variant styles + slot-class cascade ---
+  // `variantProps` feeds both the tv() style computation and the slot-class
+  // cascade (so provider `overrides` can match the active variant/size).
+  // Annotation is mandatory: without it the string literals widen to `string`
+  // and tsc rejects the call. The root only drives `variant`/`size`; the
+  // per-cell `dayState`/`hasEvents` axes are applied by sub-components.
+  const variantProps: CalendarVariants = $derived({ variant, size });
+  const styles = $derived(calendarVariants(variantProps));
   const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.Calendar?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'Calendar', preset),
-      slotClassesProp
-    )
+    resolveSlotClasses(blocksConfig, 'Calendar', preset, variantProps, slotClassesProp)
   );
 
-  // --- Variant styles ---
-  const styles = $derived(calendarVariants({ variant, size }));
-
   // --- Animation state ---
   const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)');
   const shouldAnimate = $derived(animated && !reducedMotion.current);

package/dist/components/Calendar/Calendar.svelte.d.ts

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

package/dist/components/Calendar/CalendarAgendaView.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { CalendarEvent, EventItemContext } from './calendar.types';
+import type { CalendarEvent, EventItemContext } from './calendar.types.js';
 interface CalendarAgendaViewInternalProps {
     eventItem?: Snippet<[EventItemContext]>;
     onEventClick?: (event: CalendarEvent) => void;

package/dist/components/Calendar/CalendarDay.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { CalendarEvent, DayCellContext } from './calendar.types';
+import type { CalendarEvent, DayCellContext } from './calendar.types.js';
 interface CalendarDayInternalProps {
     date: Date;
     dayCell?: Snippet<[DayCellContext]>;

package/dist/components/Calendar/CalendarDayView.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { CalendarEvent, EventItemContext } from './calendar.types';
+import type { CalendarEvent, EventItemContext } from './calendar.types.js';
 interface CalendarDayViewInternalProps {
     eventItem?: Snippet<[EventItemContext]>;
     onEventClick?: (event: CalendarEvent) => void;

package/dist/components/Calendar/CalendarEventItem.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CalendarEvent, CalendarEventCategory } from './calendar.types';
+import type { CalendarEvent, CalendarEventCategory } from './calendar.types.js';
 interface CalendarEventItemInternalProps {
     event: CalendarEvent;
     category?: CalendarEventCategory;

package/dist/components/Calendar/CalendarEventList.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { CalendarEvent, EventItemContext } from './calendar.types';
+import type { CalendarEvent, EventItemContext } from './calendar.types.js';
 interface CalendarEventListInternalProps {
     eventItem?: Snippet<[EventItemContext]>;
     onEventClick?: (event: CalendarEvent) => void;

package/dist/components/Calendar/CalendarEventPopover.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CalendarEvent } from './calendar.types';
+import type { CalendarEvent } from './calendar.types.js';
 interface CalendarEventPopoverInternalProps {
     events: CalendarEvent[];
     onEventClick?: (event: CalendarEvent) => void;

package/dist/components/Calendar/CalendarEventRenderer.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { CalendarEvent, EventDayInfo, EventItemContext } from './calendar.types';
+import type { CalendarEvent, EventDayInfo, EventItemContext } from './calendar.types.js';
 interface CalendarEventRendererInternalProps {
     info: EventDayInfo;
     eventItem?: Snippet<[EventItemContext]>;

package/dist/components/Calendar/CalendarGrid.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { CalendarEvent, DayCellContext } from './calendar.types';
+import type { CalendarEvent, DayCellContext } from './calendar.types.js';
 interface CalendarGridInternalProps {
     dayCell?: Snippet<[DayCellContext]>;
     onEventClick?: (event: CalendarEvent) => void;

package/dist/components/Calendar/CalendarHeader.svelte.d.ts

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

package/dist/components/Calendar/CalendarMultiDayBar.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CalendarEvent } from './calendar.types';
+import type { CalendarEvent } from './calendar.types.js';
 interface CalendarMultiDayBarProps {
     event: CalendarEvent;
     startCol: number;

package/dist/components/Calendar/CalendarTimeEvent.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CalendarEvent, CalendarEventCategory } from './calendar.types';
+import type { CalendarEvent, CalendarEventCategory } from './calendar.types.js';
 interface CalendarTimeEventInternalProps {
     event: CalendarEvent;
     category?: CalendarEventCategory;

package/dist/components/Calendar/CalendarTimeGrid.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CalendarEvent } from './calendar.types';
+import type { CalendarEvent } from './calendar.types.js';
 interface CalendarTimeGridInternalProps {
     dates: Date[];
     onEventClick?: (event: CalendarEvent) => void;

package/dist/components/Calendar/CalendarWeekGrid.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CalendarEvent } from './calendar.types';
+import type { CalendarEvent } from './calendar.types.js';
 interface CalendarWeekGridInternalProps {
     onEventClick?: (event: CalendarEvent) => void;
     class?: string;

package/dist/components/Calendar/calendar.context.d.ts

@@ -1,5 +1,5 @@
-import type { CalendarEvent, CalendarEventCategory, CalendarViewMode, DateRange, EventDayInfo } from './calendar.types';
-import type { CalendarSlotName } from './index';
+import type { CalendarEvent, CalendarEventCategory, CalendarViewMode, DateRange, EventDayInfo } from './calendar.types.js';
+import type { CalendarSlotName } from './index.js';
 export interface CalendarContext {
     readonly displayedMonth: number;
     readonly displayedYear: number;
@@ -74,7 +74,7 @@ export interface CalendarContext {
     onEventResize?: (event: CalendarEvent, newEnd: Date) => void;
     readonly unstyled: boolean;
     readonly slotClasses: Partial<Record<CalendarSlotName, string>>;
-    readonly styles: ReturnType<typeof import('./calendar.variants').calendarVariants>;
+    readonly styles: ReturnType<typeof import('./calendar.variants.js').calendarVariants>;
 }
 declare const setCalendarContext: (value: CalendarContext | undefined) => CalendarContext | undefined;
 export { setCalendarContext };

package/dist/components/Calendar/calendar.context.js

@@ -1,4 +1,4 @@
-import { createOptionalContext } from '../../utils/optional-context';
+import { createOptionalContext } from '../../utils/optional-context.js';
 // Use the optional helper so the wrapper below can throw its own
 // descriptive error instead of Svelte's generic missing_context.
 const [getCalendarContextRaw, setCalendarContext] = createOptionalContext();

package/dist/components/Calendar/calendar.drag.d.ts

@@ -3,7 +3,7 @@
  * Uses native Pointer Events API — no external DnD library needed.
  */
 import type { Attachment } from 'svelte/attachments';
-import type { CalendarEvent } from './calendar.types';
+import type { CalendarEvent } from './calendar.types.js';
 export interface DragState {
     active: boolean;
     event: CalendarEvent | null;

package/dist/components/Calendar/calendar.engine.d.ts

@@ -7,7 +7,7 @@
  * multi-day events, expanding recurrence rules and time-slot generation.
  * No Svelte dependencies — fully testable in isolation.
  */
-import type { CalendarEvent, PositionedEvent, TimeSlot } from './calendar.types';
+import type { CalendarEvent, PositionedEvent, TimeSlot } from './calendar.types.js';
 /**
  * Get day info for a multi-day event on a specific date.
  * Returns the 0-based day index, total days, and start/end flags.

package/dist/components/Calendar/calendar.engine.js

@@ -7,7 +7,7 @@
  * multi-day events, expanding recurrence rules and time-slot generation.
  * No Svelte dependencies — fully testable in isolation.
  */
-import { daysBetween, stripTime, toIso } from '../../date';
+import { daysBetween, stripTime, toIso } from '../../date/index.js';
 /**
  * Get day info for a multi-day event on a specific date.
  * Returns the 0-based day index, total days, and start/end flags.

package/dist/components/Calendar/calendar.variants.d.ts

@@ -1,5 +1,5 @@
-import { type VariantProps } from '../../utils/variants';
-export declare const calendarVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const calendarVariants: (props?: import("../../utils/variants.js").TVProps<{
     variant: {
         default: {};
         bordered: {
@@ -804,3 +804,4 @@ export declare const calendarVariants: (props?: import("../../utils/variants").T
     }) | undefined) => string;
 };
 export type CalendarVariants = VariantProps<typeof calendarVariants>;
+export type CalendarSlots = SlotNames<typeof calendarVariants>;

package/dist/components/Calendar/calendar.variants.js

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

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

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { MintProp } from '../../mint';
-import type { CalendarEvent, CalendarEventCategory, CalendarSelection, CalendarViewMode, DayCellContext, EventItemContext, HeaderContext } from './calendar.types';
-import type { CalendarVariants } from './calendar.variants';
+import type { MintProp } from '../../mint/index.js';
+import type { CalendarEvent, CalendarEventCategory, CalendarSelection, CalendarViewMode, DayCellContext, EventItemContext, HeaderContext } from './calendar.types.js';
+import type { CalendarSlots, CalendarVariants } from './calendar.variants.js';
 export type CalendarSlotName = 'base' | 'header' | 'title' | 'nav' | 'navButton' | 'grid' | 'weekdayHeader' | 'weekday' | 'weekRow' | 'weekNumber' | 'day' | 'dayNumber' | 'dotContainer' | 'dot' | 'list' | 'dateHeader' | 'empty' | 'item' | 'colorBar' | 'eventTitle' | 'eventDescription' | 'eventHelper' | 'legend' | 'legendItem' | 'legendDot' | 'legendLabel' | 'yearGrid' | 'yearMonth' | 'yearMonthTitle' | 'yearMiniDay' | 'yearMiniDot' | 'weekGrid' | 'weekColumn' | 'weekColumnHeader' | 'weekColumnDayName' | 'weekColumnDayNumber' | 'weekEventList' | 'weekAllDayEvent' | 'multiDayBar' | 'multiDayBarContainer' | 'agendaView' | 'agendaDayGroup' | 'agendaDayHeader' | 'agendaEventList' | 'dayView' | 'dayViewHeader' | 'dayEventList' | 'timeGrid' | 'timeLabel' | 'timeSlotRow' | 'timeDayColumn' | 'timeEvent' | 'allDayArea' | 'currentTimeLine' | 'weekTimeLayout' | 'eventPopover' | 'eventPopoverItem' | 'miniCalendar' | 'miniCalendarHeader' | 'miniCalendarTitle' | 'miniCalendarNavButton' | 'miniCalendarWeekday' | 'miniCalendarDay';
 /**
  * @description Flexible calendar component with month, year, week, and day views.
@@ -165,7 +165,7 @@ export interface CalendarProps extends Omit<CalendarVariants, 'dayState' | 'hasE
     /** Strip all default tv() classes. */
     unstyled?: boolean;
     /** Per-slot class overrides. */
-    slotClasses?: Partial<Record<CalendarSlotName, string>>;
+    slotClasses?: Partial<Record<CalendarSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Calendar: {...} }}>`.
      * Prefer this over `class` overrides when the requested look falls outside the
@@ -204,7 +204,7 @@ export { default as CalendarTimeGrid } from './CalendarTimeGrid.svelte';
 export { default as CalendarWeekdayHeader } from './CalendarWeekdayHeader.svelte';
 export { default as CalendarWeekGrid } from './CalendarWeekGrid.svelte';
 export { default as CalendarYearGrid } from './CalendarYearGrid.svelte';
-export type { CalendarContext } from './calendar.context';
-export { createSlotHelper } from './calendar.context';
-export type { CalendarEvent, CalendarEventCategory, CalendarSelection, CalendarViewMode, DateRange, DayCellContext, EventDayInfo, EventItemContext, HeaderContext, MultiDayBarSegment, PositionedEvent, RecurrenceRule, TimeSlot } from './calendar.types';
-export { type CalendarVariants, calendarVariants } from './calendar.variants';
+export type { CalendarContext } from './calendar.context.js';
+export { createSlotHelper } from './calendar.context.js';
+export type { CalendarEvent, CalendarEventCategory, CalendarSelection, CalendarViewMode, DateRange, DayCellContext, EventDayInfo, EventItemContext, HeaderContext, MultiDayBarSegment, PositionedEvent, RecurrenceRule, TimeSlot } from './calendar.types.js';
+export { type CalendarVariants, calendarVariants } from './calendar.variants.js';

package/dist/components/Calendar/index.js

@@ -16,5 +16,5 @@ export { default as CalendarTimeGrid } from './CalendarTimeGrid.svelte';
 export { default as CalendarWeekdayHeader } from './CalendarWeekdayHeader.svelte';
 export { default as CalendarWeekGrid } from './CalendarWeekGrid.svelte';
 export { default as CalendarYearGrid } from './CalendarYearGrid.svelte';
-export { createSlotHelper } from './calendar.context';
-export { calendarVariants } from './calendar.variants';
+export { createSlotHelper } from './calendar.context.js';
+export { calendarVariants } from './calendar.variants.js';

package/dist/components/ChartFrame/ChartFrame.svelte.d.ts

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

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { ChartMargin, ChartPlot, ChartSlotClasses } from '../../internal/charts/types';
+import type { ChartMargin, ChartPlot, ChartSlotClasses } from '../../internal/charts/types.js';
 /**
  * @description Responsive SVG chart shell: measures its width via
  * ResizeObserver, applies plot margins, and hands the drawable plot geometry

package/dist/components/CommandPalette/CommandPalette.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { useBlocksI18n } from '../..';
   import { Dialog, Separator } from '../../primitives';
-  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import type { CommandPaletteProps, CommandPaletteItem } from './index';
-  import { commandPaletteVariants } from './commandPalette.variants';
+  import { commandPaletteVariants, type CommandPaletteVariants } from './commandPalette.variants';
 
   const bt = useBlocksI18n();
 
@@ -31,25 +31,18 @@
 
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
-  const slotClasses = $derived(
-    mergeSlotClasses(
-      blocksConfig?.defaults?.CommandPalette?.slotClasses,
-      resolvePresetSlotClasses(blocksConfig?.presets, 'CommandPalette', preset),
-      slotClassesProp
-    )
-  );
 
   let query = $state('');
   let selectedIndex = $state(0);
   let inputEl: HTMLInputElement | undefined = $state();
 
-  const styles = $derived(unstyled ? undefined : commandPaletteVariants({ size }));
+  const variantProps: CommandPaletteVariants = $derived({ size });
 
-  function slot(name: keyof NonNullable<typeof styles>) {
-    const base = styles?.[name]?.() ?? '';
-    const override = slotClasses?.[name as keyof typeof slotClasses] ?? '';
-    return override ? `${base} ${override}` : base;
-  }
+  const styles = $derived(commandPaletteVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'CommandPalette', preset, variantProps, slotClassesProp)
+  );
 
   const defaultFilter = (item: CommandPaletteItem, q: string) => {
     const lower = q.toLowerCase();
@@ -156,11 +149,21 @@
 <svelte:window onkeydown={handleGlobalKeydown} />
 
 <Dialog bind:open size="md" placement="top" class="mt-[15vh]" onClose={() => setOpen(false)}>
-  <div class="{slot('wrapper')} {className}">
+  <div
+    class={unstyled
+      ? [slotClasses?.wrapper, className].filter(Boolean).join(' ')
+      : styles.wrapper({ class: [slotClasses?.wrapper, className] })}
+  >
     <!-- Search input -->
-    <div class={slot('inputWrapper')}>
+    <div
+      class={unstyled
+        ? (slotClasses?.inputWrapper ?? '')
+        : styles.inputWrapper({ class: slotClasses?.inputWrapper })}
+    >
       <svg
-        class={slot('inputIcon')}
+        class={unstyled
+          ? (slotClasses?.inputIcon ?? '')
+          : styles.inputIcon({ class: slotClasses?.inputIcon })}
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor"
@@ -178,7 +181,7 @@
         bind:value={query}
         onkeydown={handleKeydown}
         {placeholder}
-        class={slot('input')}
+        class={unstyled ? (slotClasses?.input ?? '') : styles.input({ class: slotClasses?.input })}
         role="combobox"
         aria-expanded={filtered.length > 0}
         aria-controls="command-palette-list"
@@ -189,7 +192,9 @@
       />
       {#if query}
         <button
-          class={slot('clearButton')}
+          class={unstyled
+            ? (slotClasses?.clearButton ?? '')
+            : styles.clearButton({ class: slotClasses?.clearButton })}
           aria-label={bt('accessibility.clearSearch')}
           onclick={() => {
             query = '';
@@ -210,22 +215,39 @@
     </div>
 
     <!-- Results -->
-    <div id="command-palette-list" role="listbox" class={slot('list')}>
+    <div
+      id="command-palette-list"
+      role="listbox"
+      class={unstyled ? (slotClasses?.list ?? '') : styles.list({ class: slotClasses?.list })}
+    >
       {#if filtered.length === 0}
         {#if customEmpty}
           {@render customEmpty(query)}
         {:else}
-          <div class={slot('empty')}>
+          <div
+            class={unstyled
+              ? (slotClasses?.empty ?? '')
+              : styles.empty({ class: slotClasses?.empty })}
+          >
             {emptyText}{#if query}&nbsp;"{query}"{/if}
           </div>
         {/if}
       {:else}
         {#each grouped as group, groupIdx (group.category)}
           {#if groupIdx > 0}
-            <Separator class={slot('separator')} />
+            <Separator
+              class={unstyled
+                ? (slotClasses?.separator ?? '')
+                : styles.separator({ class: slotClasses?.separator })}
+            />
           {/if}
           {#if group.category}
-            <div class={slot('groupLabel')} role="presentation">
+            <div
+              class={unstyled
+                ? (slotClasses?.groupLabel ?? '')
+                : styles.groupLabel({ class: slotClasses?.groupLabel })}
+              role="presentation"
+            >
               {group.category}
             </div>
           {/if}
@@ -243,6 +265,17 @@
                 (Enter/Space handled in handleKeydown) plus pointer clicks
                 here. tabindex="-1" keeps the items out of the tab sequence.
               -->
+              {@const itemStateClass = isDisabled
+                ? unstyled
+                  ? (slotClasses?.itemDisabled ?? '')
+                  : styles.itemDisabled({ class: slotClasses?.itemDisabled })
+                : isHighlighted
+                  ? unstyled
+                    ? (slotClasses?.itemHighlighted ?? '')
+                    : styles.itemHighlighted({ class: slotClasses?.itemHighlighted })
+                  : unstyled
+                    ? (slotClasses?.itemDefault ?? '')
+                    : styles.itemDefault({ class: slotClasses?.itemDefault })}
               <!-- svelte-ignore a11y_click_events_have_key_events -->
               <div
                 id="command-palette-item-{flatIdx}"
@@ -251,11 +284,12 @@
                 aria-selected={isHighlighted}
                 aria-disabled={isDisabled}
                 data-command-palette-selected={isHighlighted}
-                class="{slot('item')} {isDisabled
-                  ? slot('itemDisabled')
-                  : isHighlighted
-                    ? slot('itemHighlighted')
-                    : slot('itemDefault')}"
+                class={[
+                  unstyled ? (slotClasses?.item ?? '') : styles.item({ class: slotClasses?.item }),
+                  itemStateClass
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
                 onclick={() => {
                   if (!isDisabled) selectItem(item);
                 }}
@@ -265,7 +299,9 @@
               >
                 {#if item.icon}
                   <svg
-                    class={slot('itemIcon')}
+                    class={unstyled
+                      ? (slotClasses?.itemIcon ?? '')
+                      : styles.itemIcon({ class: slotClasses?.itemIcon })}
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
@@ -274,9 +310,18 @@
                     <path stroke-linecap="round" stroke-linejoin="round" d={item.icon} />
                   </svg>
                 {/if}
-                <span class={slot('itemLabel')}>{item.label}</span>
+                <span
+                  class={unstyled
+                    ? (slotClasses?.itemLabel ?? '')
+                    : styles.itemLabel({ class: slotClasses?.itemLabel })}>{item.label}</span
+                >
                 {#if item.shortcut}
-                  <kbd class={slot('itemShortcut')}>{item.shortcut}</kbd>
+                  <kbd
+                    class={unstyled
+                      ? (slotClasses?.itemShortcut ?? '')
+                      : styles.itemShortcut({ class: slotClasses?.itemShortcut })}
+                    >{item.shortcut}</kbd
+                  >
                 {/if}
               </div>
             {/if}
@@ -287,17 +332,39 @@
 
     <!-- Footer -->
     {#if showFooter}
-      <div class={slot('footer')}>
-        <span class={slot('footerHint')}>
-          <kbd class={slot('kbd')}>&#8593;&#8595;</kbd>
+      <div
+        class={unstyled
+          ? (slotClasses?.footer ?? '')
+          : styles.footer({ class: slotClasses?.footer })}
+      >
+        <span
+          class={unstyled
+            ? (slotClasses?.footerHint ?? '')
+            : styles.footerHint({ class: slotClasses?.footerHint })}
+        >
+          <kbd class={unstyled ? (slotClasses?.kbd ?? '') : styles.kbd({ class: slotClasses?.kbd })}
+            >&#8593;&#8595;</kbd
+          >
           {bt('commandPalette.hints.navigate', {})}
         </span>
-        <span class={slot('footerHint')}>
-          <kbd class={slot('kbd')}>&#8629;</kbd>
+        <span
+          class={unstyled
+            ? (slotClasses?.footerHint ?? '')
+            : styles.footerHint({ class: slotClasses?.footerHint })}
+        >
+          <kbd class={unstyled ? (slotClasses?.kbd ?? '') : styles.kbd({ class: slotClasses?.kbd })}
+            >&#8629;</kbd
+          >
           {bt('commandPalette.hints.select', {})}
         </span>
-        <span class={slot('footerHint')}>
-          <kbd class={slot('kbd')}>esc</kbd>
+        <span
+          class={unstyled
+            ? (slotClasses?.footerHint ?? '')
+            : styles.footerHint({ class: slotClasses?.footerHint })}
+        >
+          <kbd class={unstyled ? (slotClasses?.kbd ?? '') : styles.kbd({ class: slotClasses?.kbd })}
+            >esc</kbd
+          >
           {bt('commandPalette.hints.close', {})}
         </span>
       </div>

package/dist/components/CommandPalette/CommandPalette.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CommandPaletteProps } from './index';
+import type { CommandPaletteProps } from './index.js';
 declare const CommandPalette: import("svelte").Component<CommandPaletteProps, {
     toggle: () => void;
     show: () => void;