@urbicon-ui/blocks 6.12.0 → 6.19.1

package/README.md

@@ -14,13 +14,13 @@ Peer dependencies: `svelte` (^5), `@sveltejs/kit`, `@urbicon-ui/i18n`.
 
 ## Components
 
-### Primitives (35)
+### Primitives (36)
 
-Accordion, Alert, Avatar, Badge, Breadcrumb, Button, ButtonGroup, Card, Checkbox, Collapsible, Combobox, ConfirmDialog, Dialog, Drawer, FormField, Input, Menu, Pagination, Popover, Progress, RadioGroup, SegmentGroup, Select, Separator, Sidebar, Skeleton, Slider, Spinner, Stepper, Tab, Textarea, Toast, Toggle, Toolbar, Tooltip
+Accordion, Alert, Avatar, Badge, Breadcrumb, Button, ButtonGroup, Card, Checkbox, Collapsible, Combobox, ConfirmDialog, Dialog, Drawer, FormField, Input, JourneyTimeline, Menu, Pagination, Popover, Progress, RadioGroup, SegmentGroup, Select, Separator, Sidebar, Skeleton, Slider, Spinner, Stepper, Tab, Textarea, Toast, Toggle, Toolbar, Tooltip
 
-### Components (10)
+### Components (19)
 
-Calendar, CommandPalette, CompositionBar, CurrencyInput, DatePicker, EmptyState, FileUpload, LocaleSwitcher, Sankey, ThemeSwitcher
+AreaChart, BarChart, Calendar, ChartFrame, CommandPalette, CompositionBar, CurrencyInput, DatePicker, DonutChart, EmptyState, FileUpload, Guide, LineChart, LocaleSwitcher, Planner, Sankey, SidebarLayout, Sparkline, ThemeSwitcher
 
 ### System
 
@@ -73,7 +73,7 @@ Use `overrides` for **prop-conditional** rules an unconditional `slotClasses` ca
 
 ## Icons
 
-156 hand-rolled SVG icons in `src/lib/icons/`, registered via `IconProvider`. Metadata (`ICON_METADATA`) enables search by name, keyword, or category. See the icon-design rules in [AGENTS.md → Icon Design Rules](../../AGENTS.md#icon-design-rules).
+315 hand-rolled SVG icons in `src/lib/icons/`, registered via `IconProvider`. Metadata (`ICON_METADATA`) enables search by name, keyword, or category. See the icon-design rules in [AGENTS.md → Icon Design Rules](../../AGENTS.md#icon-design-rules).
 
 ## i18n
 

package/dist/components/AreaChart/AreaChart.svelte

@@ -14,6 +14,7 @@
   } from '../../internal/charts/utils';
   import type { ChartPoint } from '../../internal/charts/utils';
   import ChartFrame from '../ChartFrame/ChartFrame.svelte';
+  import { useBlocksI18n } from '../..';
 
   let {
     data,
@@ -36,6 +37,7 @@
   }: AreaChartProps = $props();
 
   const blocksConfig = getBlocksConfig();
+  const bt = useBlocksI18n();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
   const slotClasses = $derived(
     resolveSlotClasses(blocksConfig, 'AreaChart', preset, {}, slotClassesProp)
@@ -48,7 +50,9 @@
   const resolvedSeries = $derived<ChartSeries[]>(
     seriesProp && seriesProp.length > 0
       ? seriesProp
-      : Array.from({ length: seriesCount }, (_, i) => ({ label: `Series ${i + 1}` }))
+      : Array.from({ length: seriesCount }, (_, i) => ({
+          label: bt('chart.series', { index: i + 1 })
+        }))
   );
 
   const fmt = $derived(formatValue ?? numberFormatter(locale));
@@ -213,9 +217,9 @@
       <caption>{resolvedAriaLabel}</caption>
       <thead>
         <tr>
-          <th scope="col">Category</th>
+          <th scope="col">{bt('chart.category')}</th>
           {#each resolvedSeries as s, i (s.label + ' ' + i)}
-            <th scope="col">{s.label || `Series ${i + 1}`}</th>
+            <th scope="col">{s.label || bt('chart.series', { index: i + 1 })}</th>
           {/each}
         </tr>
       </thead>

package/dist/components/BarChart/BarChart.svelte

@@ -12,6 +12,7 @@
     extent
   } from '../../internal/charts/utils';
   import ChartFrame from '../ChartFrame/ChartFrame.svelte';
+  import { useBlocksI18n } from '../..';
 
   let {
     data,
@@ -33,6 +34,7 @@
   }: BarChartProps = $props();
 
   const blocksConfig = getBlocksConfig();
+  const bt = useBlocksI18n();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
   const slotClasses = $derived(
     resolveSlotClasses(blocksConfig, 'BarChart', preset, {}, slotClassesProp)
@@ -47,7 +49,9 @@
   const resolvedSeries = $derived<ChartSeries[]>(
     seriesProp && seriesProp.length > 0
       ? seriesProp
-      : Array.from({ length: seriesCount }, (_, i) => ({ label: `Series ${i + 1}` }))
+      : Array.from({ length: seriesCount }, (_, i) => ({
+          label: bt('chart.series', { index: i + 1 })
+        }))
   );
 
   const fmt = $derived(formatValue ?? numberFormatter(locale));
@@ -239,9 +243,9 @@
       <caption>{resolvedAriaLabel}</caption>
       <thead>
         <tr>
-          <th scope="col">Category</th>
+          <th scope="col">{bt('chart.category')}</th>
           {#each resolvedSeries as s, i (s.label + ' ' + i)}
-            <th scope="col">{s.label || `Series ${i + 1}`}</th>
+            <th scope="col">{s.label || bt('chart.series', { index: i + 1 })}</th>
           {/each}
         </tr>
       </thead>

package/dist/components/Calendar/Calendar.svelte

@@ -11,6 +11,7 @@
     stripTime,
     addDays,
     clampMonth,
+    clampDate,
     daysInMonth
   } from '../../date';
   import { DateGridController } from '../../internal/date-grid';
@@ -238,13 +239,17 @@
   function handleSelect(selection: DateGridSelection, date: Date) {
     // Date-picker behaviour: clicking an outside (spill) day in the month grid
     // navigates to that month. Confined to month view — week/day anchors must
-    // not jump when a cell from an adjacent month is picked.
+    // not jump when a cell from an adjacent month is picked. The anchor is
+    // clamped to [minDate, maxDate] (a spill day at the edge of a partially
+    // out-of-range month must not push referenceDate past the bound), and
+    // onMonthChange reports the landed month so it stays consistent with it.
     if (
       view === 'month' &&
       (date.getMonth() !== displayedMonth || date.getFullYear() !== displayedYear)
     ) {
-      referenceDate = new Date(date.getFullYear(), date.getMonth(), 1);
-      onMonthChange?.(date.getMonth(), date.getFullYear());
+      const anchor = clampDate(new Date(date.getFullYear(), date.getMonth(), 1), minDate, maxDate);
+      referenceDate = anchor;
+      onMonthChange?.(anchor.getMonth(), anchor.getFullYear());
     }
     onDateClick?.(date);
     const next = selection as CalendarProps['value'];
@@ -260,8 +265,8 @@
   $effect(() => {
     const _current = controller.today;
     if (typeof window === 'undefined') return;
-    const now = new Date(); // eslint-disable-line svelte/prefer-svelte-reactivity
-    const midnight = new Date(now); // eslint-disable-line svelte/prefer-svelte-reactivity
+    const now = new Date();
+    const midnight = new Date(now);
     midnight.setHours(24, 0, 0, 0);
     const msUntilMidnight = midnight.getTime() - now.getTime();
     const timeout = setTimeout(() => controller.refreshToday(), msUntilMidnight);
@@ -286,12 +291,11 @@
   // --- Derived: visible range for recurrence expansion ---
   const visibleRange = $derived.by(() => {
     if (view === 'year') {
-      // eslint-disable-next-line svelte/prefer-svelte-reactivity
       return { start: new Date(displayedYear, 0, 1), end: new Date(displayedYear, 11, 31) };
     }
     if (view === 'agenda') {
-      const start = new Date(displayedYear, displayedMonth, 1); // eslint-disable-line svelte/prefer-svelte-reactivity
-      const end = new Date(start); // eslint-disable-line svelte/prefer-svelte-reactivity
+      const start = new Date(displayedYear, displayedMonth, 1);
+      const end = new Date(start);
       end.setDate(end.getDate() + agendaDays);
       return { start, end };
     }
@@ -378,51 +382,60 @@
     }
   }
 
+  // Move `referenceDate` to a bounded month/year and return the clamped result.
+  // clampMonth keeps the month within [minDate, maxDate]; the day-of-month is
+  // preserved (so a later switch to week/day view anchors on a real in-month
+  // day, not the 1st's possibly-prior-month week) and then `clampDate` keeps a
+  // boundary month from landing before minDate / after maxDate. Shared by every
+  // programmatic month/year jump so none can escape the navigable range.
+  function setReferenceMonth(month: number, year: number): { month: number; year: number } {
+    const clamped = clampMonth(month, year, minDate, maxDate);
+    const day = Math.min(referenceDate.getDate(), daysInMonth(clamped.year, clamped.month));
+    referenceDate = clampDate(new Date(clamped.year, clamped.month, day), minDate, maxDate);
+    return clamped;
+  }
+
   function navigateMonth(delta: number) {
     const total = displayedYear * 12 + displayedMonth + delta;
     const targetYear = Math.floor(total / 12);
     const targetMonth = ((total % 12) + 12) % 12;
-    const clamped = clampMonth(targetMonth, targetYear, minDate, maxDate);
     controller.navDirection = delta > 0 ? 'forward' : 'backward';
-    // Preserve the day-of-month (clamped) so a later switch to week/day view
-    // anchors on a real in-month day, not the 1st's (possibly prior-month) week.
-    const day = Math.min(referenceDate.getDate(), daysInMonth(clamped.year, clamped.month));
-    let next = new Date(clamped.year, clamped.month, day);
-    // clampMonth bounds the month; clamp the day too so it never lands before
-    // minDate / after maxDate within that boundary month.
-    if (minDate && next < stripTime(minDate)) next = stripTime(minDate);
-    if (maxDate && next > stripTime(maxDate)) next = stripTime(maxDate);
-    referenceDate = next;
+    const clamped = setReferenceMonth(targetMonth, targetYear);
     onMonthChange?.(clamped.month, clamped.year);
   }
 
+  // These named navigators mutate referenceDate directly (the custom-header /
+  // mini-calendar surface), bypassing controller.navigate — so they clamp to
+  // [minDate, maxDate] themselves, mirroring the clamp the controller now applies
+  // to the main swipe / keyboard / header-arrow path.
   function navigateWeek(delta: number) {
     controller.navDirection = delta > 0 ? 'forward' : 'backward';
-    referenceDate = addDays(referenceDate, delta * 7);
+    referenceDate = clampDate(addDays(referenceDate, delta * 7), minDate, maxDate);
     onWeekChange?.(referenceDate);
   }
 
   function navigateDay(delta: number) {
     controller.navDirection = delta > 0 ? 'forward' : 'backward';
-    referenceDate = addDays(referenceDate, delta);
+    referenceDate = clampDate(addDays(referenceDate, delta), minDate, maxDate);
     onDayChange?.(referenceDate);
   }
 
   function navigateYear(delta: number) {
     controller.navDirection = delta > 0 ? 'forward' : 'backward';
-    const targetYear = displayedYear + delta;
-    const day = Math.min(referenceDate.getDate(), daysInMonth(targetYear, displayedMonth));
-    referenceDate = new Date(targetYear, displayedMonth, day);
-    onMonthChange?.(displayedMonth, targetYear);
+    const clamped = setReferenceMonth(displayedMonth, displayedYear + delta);
+    onMonthChange?.(clamped.month, clamped.year);
   }
 
   function goToToday() {
     controller.goToToday();
   }
 
+  // A programmatic month jump (header month/year picker, year-grid month tap,
+  // mini-calendar) reports the landed month like the arrow navigators do — the
+  // clamped result, so a bounds-corrected pick still notifies the consumer.
   function goToMonth(month: number, year: number) {
-    const day = Math.min(referenceDate.getDate(), daysInMonth(year, month));
-    referenceDate = new Date(year, month, day);
+    const clamped = setReferenceMonth(month, year);
+    onMonthChange?.(clamped.month, clamped.year);
   }
 
   function setView(v: CalendarViewMode) {
@@ -521,6 +534,9 @@
     get canGoForward() {
       return controller.canGoForward;
     },
+    get canGoToToday() {
+      return controller.canGoToToday;
+    },
     get grid() {
       return controller.cells;
     },
@@ -654,7 +670,8 @@
         navigateMonth,
         goToToday,
         canGoBack: controller.canGoBack,
-        canGoForward: controller.canGoForward
+        canGoForward: controller.canGoForward,
+        canGoToToday: controller.canGoToToday
       })}
     {:else}
       <CalendarHeader {showViewSwitcher} />
@@ -667,7 +684,7 @@
           {#if view === 'week'}
             <CalendarWeekGrid {onEventClick} />
           {:else if view === 'day'}
-            <CalendarDayView {eventItem} {onEventClick} />
+            <CalendarDayView {onEventClick} />
           {:else if view === 'agenda'}
             <CalendarAgendaView {eventItem} {onEventClick} {agendaDays} />
           {/if}
@@ -680,7 +697,7 @@
     {:else if view === 'week'}
       <CalendarWeekGrid {onEventClick} />
     {:else if view === 'day'}
-      <CalendarDayView {eventItem} {onEventClick} />
+      <CalendarDayView {onEventClick} />
     {:else if view === 'agenda'}
       <CalendarAgendaView {eventItem} {onEventClick} {agendaDays} />
     {/if}

package/dist/components/Calendar/CalendarAgendaView.svelte

@@ -38,7 +38,7 @@
     }> = [];
 
     for (let i = 0; i < agendaDays; i++) {
-      const d = new Date(start); // eslint-disable-line svelte/prefer-svelte-reactivity
+      const d = new Date(start);
       d.setDate(start.getDate() + i);
       const dayEvents = ctx.getEventsWithDayInfo(d);
       if (dayEvents.length === 0) continue;

package/dist/components/Calendar/CalendarDayView.svelte

@@ -1,24 +1,22 @@
 <script lang="ts">
   import { useBlocksI18n } from '../..';
-  import type { Snippet } from 'svelte';
   import { fly } from 'svelte/transition';
   import { Badge } from '../../primitives/Badge';
   import { getCalendarContext, createSlotHelper } from './calendar.context';
   import { formatDateFull, toIso } from '../../date';
   import { swipeable } from '../../utils/swipeable';
-  import type { CalendarEvent, EventItemContext } from './calendar.types';
+  import type { CalendarEvent } from './calendar.types';
   import CalendarEventRenderer from './CalendarEventRenderer.svelte';
   import CalendarTimeGrid from './CalendarTimeGrid.svelte';
 
   const bt = useBlocksI18n();
 
   interface CalendarDayViewInternalProps {
-    eventItem?: Snippet<[EventItemContext]>;
     onEventClick?: (event: CalendarEvent) => void;
     class?: string;
   }
 
-  let { eventItem, onEventClick, class: className = '' }: CalendarDayViewInternalProps = $props();
+  let { onEventClick, class: className = '' }: CalendarDayViewInternalProps = $props();
 
   const ctx = getCalendarContext();
   const slot = createSlotHelper(ctx);
@@ -28,13 +26,10 @@
   const dateLabel = $derived(formatDateFull(displayedDate, ctx.locale));
   const dayKey = $derived(toIso(displayedDate));
 
-  // Separate all-day vs timed events for time grid mode
-  const allDayEvents = $derived(
-    ctx.showTimeGrid ? eventsWithInfo.filter((info) => info.event.allDay !== false) : []
-  );
-  const timedEventCount = $derived(
-    ctx.showTimeGrid ? eventsWithInfo.filter((info) => info.event.allDay === false).length : 0
-  );
+  // The day view always renders as an hour grid (showTimeGrid is always true
+  // for day). All-day events show in a band above the grid; timed events flow
+  // through CalendarTimeGrid — no custom `eventItem` here, matching WeekGrid.
+  const allDayEvents = $derived(eventsWithInfo.filter((info) => info.event.allDay !== false));
   const totalEventCount = $derived(eventsWithInfo.length);
 
   function handleKeydown(e: KeyboardEvent) {
@@ -83,37 +78,22 @@
           {/if}
         </div>
 
-        {#if ctx.showTimeGrid}
-          <!-- Time grid mode -->
-
-          <!-- All-day events -->
-          {#if allDayEvents.length > 0}
-            <div class={slot('allDayArea')}>
-              <div class="flex flex-col gap-1">
-                {#each allDayEvents as info (info.event.id)}
-                  <CalendarEventRenderer {info} {eventItem} {onEventClick} />
-                {/each}
-              </div>
+        <!-- All-day events -->
+        {#if allDayEvents.length > 0}
+          <div class={slot('allDayArea')}>
+            <div class="flex flex-col gap-1">
+              {#each allDayEvents as info (info.event.id)}
+                <CalendarEventRenderer {info} {onEventClick} />
+              {/each}
             </div>
-          {/if}
+          </div>
+        {/if}
 
-          <!-- Time grid -->
-          <CalendarTimeGrid dates={[displayedDate]} {onEventClick} />
+        <!-- Time grid -->
+        <CalendarTimeGrid dates={[displayedDate]} {onEventClick} />
 
-          {#if totalEventCount === 0}
-            <div class={slot('empty')}>{bt('calendar.noEvents')}</div>
-          {/if}
-        {:else}
-          <!-- Original list mode -->
-          <div class={slot('dayEventList')} aria-live="polite" aria-label={bt('calendar.events')}>
-            {#if eventsWithInfo.length === 0}
-              <div class={slot('empty')}>{bt('calendar.noEvents')}</div>
-            {:else}
-              {#each eventsWithInfo as info (info.event.id)}
-                <CalendarEventRenderer {info} {eventItem} {onEventClick} />
-              {/each}
-            {/if}
-          </div>
+        {#if totalEventCount === 0}
+          <div class={slot('empty')}>{bt('calendar.noEvents')}</div>
         {/if}
       </div>
     {/key}

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

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

package/dist/components/Calendar/CalendarEventItem.svelte

@@ -46,7 +46,6 @@
     if (!targetDate || !ctx.onEventMove) return;
     const eventDuration = event.end ? event.end.getTime() - event.start.getTime() : 0;
     // Local computation — Date mutation is confined to this scope, not $state.
-    // eslint-disable-next-line svelte/prefer-svelte-reactivity
     const newStart = new Date(targetDate);
     newStart.setHours(event.start.getHours(), event.start.getMinutes(), event.start.getSeconds());
     const newEnd =

package/dist/components/Calendar/CalendarGrid.svelte

@@ -31,7 +31,7 @@
 
   // Map event IDs to events for quick lookup
   const eventById = $derived.by(() => {
-    const map = new Map<string, CalendarEvent>(); // eslint-disable-line svelte/prefer-svelte-reactivity
+    const map = new Map<string, CalendarEvent>();
     for (const e of ctx.events) {
       map.set(e.id, e);
     }
@@ -42,7 +42,7 @@
   const barGap = 2;
 
   // Keyboard navigation handler
-  /* eslint-disable svelte/prefer-svelte-reactivity -- local Date copies for keyboard nav */
+  // Local Date copies for keyboard nav — not reactive state.
   function handleKeydown(e: KeyboardEvent) {
     const current = new Date(ctx.focusedDate);
     let newDate: Date | null = null;
@@ -103,18 +103,22 @@
 
     if (newDate) {
       e.preventDefault();
+      // Capture the grid while the event is still dispatching: `e.currentTarget` is
+      // null inside the rAF callback a frame later (the browser clears it after
+      // dispatch). CalendarDay uses pure roving tabindex with no isFocused-driven
+      // .focus(), so this rAF is the only thing that moves real DOM focus onto the
+      // landed day — mirrors DateGridScaffold's bound-ref approach.
+      const grid = e.currentTarget as HTMLElement;
       ctx.setFocusedDate(newDate);
 
       requestAnimationFrame(() => {
-        const dateStr = `${newDate!.getFullYear()}-${String(newDate!.getMonth() + 1).padStart(2, '0')}-${String(newDate!.getDate()).padStart(2, '0')}`;
-        const button = (e.currentTarget as HTMLElement)?.querySelector(
-          `[data-date="${dateStr}"]`
-        ) as HTMLElement;
-        button?.focus();
+        // setFocusedDate clamps to [minDate, maxDate], so focus the *landed* day (the
+        // one that took roving tabindex), not the raw requested newDate.
+        const dateStr = toIso(ctx.focusedDate);
+        grid.querySelector<HTMLElement>(`[data-date="${dateStr}"]`)?.focus();
       });
     }
   }
-  /* eslint-enable svelte/prefer-svelte-reactivity */
 </script>
 
 <div

package/dist/components/Calendar/CalendarHeader.svelte

@@ -92,7 +92,7 @@
 
   // Month/Year Quick-Pick
   let monthPickerOpen = $state(false);
-  // eslint-disable-next-line svelte/prefer-writable-derived -- needs both external sync and local mutation
+  // Writable state (not $derived): needs both external sync and local mutation.
   let pickerYear = $state(ctx.displayedYear);
 
   // Keep pickerYear in sync when navigation changes
@@ -226,7 +226,7 @@
             mint="none"
             class="{slot('navButton')} ml-1"
             onclick={() => ctx.goToToday()}
-            disabled={ctx.disabled}
+            disabled={!ctx.canGoToToday || ctx.disabled}
             aria-label={bt('calendar.today')}
           >
             <CalendarIcon size={navIconSize} />

package/dist/components/Calendar/CalendarMiniMonth.svelte

@@ -71,7 +71,6 @@
 
     let newDate: Date | null = null;
 
-    /* eslint-disable svelte/prefer-svelte-reactivity */
     switch (e.key) {
       case 'ArrowRight':
         newDate = new Date(focusedMiniDate);
@@ -97,7 +96,6 @@
       default:
         return;
     }
-    /* eslint-enable svelte/prefer-svelte-reactivity */
 
     if (newDate) {
       e.preventDefault();

package/dist/components/Calendar/CalendarTimeEvent.svelte

@@ -90,7 +90,7 @@
   function handleDragEnd(targetDate: Date | null) {
     if (!targetDate || !ctx.onEventMove) return;
     const eventDuration = event.end ? event.end.getTime() - event.start.getTime() : 60 * 60 * 1000;
-    const newStart = new Date(targetDate); // eslint-disable-line svelte/prefer-svelte-reactivity
+    const newStart = new Date(targetDate);
     newStart.setHours(event.start.getHours(), event.start.getMinutes(), event.start.getSeconds());
     const newEnd = new Date(newStart.getTime() + eventDuration);
     ctx.onEventMove(event, newStart, newEnd);

package/dist/components/Calendar/CalendarTimeGrid.svelte

@@ -28,7 +28,6 @@
   const positionedByDate = $derived.by(() => {
     // Local computation inside $derived — the returned Map is read-only
     // downstream, so SvelteMap's reactive wrapping is unnecessary.
-    // eslint-disable-next-line svelte/prefer-svelte-reactivity
     const map = new Map<string, PositionedEvent[]>();
     for (const date of dates) {
       const key = toIso(date);
@@ -72,12 +71,10 @@
   function handleSlotClick(date: Date, slotHour: number, slotMinute: number) {
     if (!ctx.onTimeSlotCreate) return;
     // Local Date math handed straight to a callback — not reactive state.
-    /* eslint-disable svelte/prefer-svelte-reactivity */
     const start = new Date(date);
     start.setHours(slotHour, slotMinute, 0, 0);
     const end = new Date(start);
     end.setHours(start.getHours() + 1);
-    /* eslint-enable svelte/prefer-svelte-reactivity */
     ctx.onTimeSlotCreate(start, end);
   }
 </script>

package/dist/components/Calendar/CalendarWeekGrid.svelte

@@ -27,7 +27,7 @@
 
   // All-day events per date, drawn in the band above the hour grid.
   const allDayByDate = $derived.by(() => {
-    const map = new Map<string, Array<{ event: CalendarEvent; color: string }>>(); // eslint-disable-line svelte/prefer-svelte-reactivity
+    const map = new Map<string, Array<{ event: CalendarEvent; color: string }>>();
     for (const date of ctx.weekDates) {
       const key = toIso(date);
       const allDay = ctx

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

@@ -26,6 +26,7 @@ export interface CalendarContext {
     readonly disabled: boolean;
     readonly canGoBack: boolean;
     readonly canGoForward: boolean;
+    readonly canGoToToday: boolean;
     readonly grid: Date[][];
     readonly weekdays: string[];
     readonly headerTitle: string;

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

@@ -138,4 +138,6 @@ export interface HeaderContext {
     goToToday: () => void;
     canGoBack: boolean;
     canGoForward: boolean;
+    /** Whether today is within `[minDate, maxDate]`; gate a custom Today control on it. */
+    canGoToToday: boolean;
 }

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

@@ -58,7 +58,6 @@ export declare const calendarVariants: (props?: import("../../utils/variants.js"
             multiDayBar: string;
             dayView: string;
             dayViewHeader: string;
-            dayEventList: string;
             agendaView: string;
             agendaDayGroup: string;
             agendaDayHeader: string;
@@ -112,7 +111,6 @@ export declare const calendarVariants: (props?: import("../../utils/variants.js"
             multiDayBar: string;
             dayView: string;
             dayViewHeader: string;
-            dayEventList: string;
             agendaView: string;
             agendaDayGroup: string;
             agendaDayHeader: string;
@@ -166,7 +164,6 @@ export declare const calendarVariants: (props?: import("../../utils/variants.js"
             multiDayBar: string;
             dayView: string;
             dayViewHeader: string;
-            dayEventList: string;
             agendaView: string;
             agendaDayGroup: string;
             agendaDayHeader: string;
@@ -613,15 +610,6 @@ export declare const calendarVariants: (props?: import("../../utils/variants.js"
         class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
         className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
     }) | undefined) => string;
-    dayEventList: (props?: ({
-        variant?: "default" | "bordered" | "ghost" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
-        dayState?: "default" | "today" | "selected" | "todaySelected" | "rangeStart" | "rangeEnd" | "inRange" | "previewRange" | "previewRangeEnd" | "outsideMonth" | "disabled" | undefined;
-        hasEvents?: boolean | undefined;
-    } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-    }) | undefined) => string;
     agendaView: (props?: ({
         variant?: "default" | "bordered" | "ghost" | undefined;
         size?: "sm" | "md" | "lg" | undefined;

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

@@ -92,7 +92,6 @@ export const calendarVariants = tv({
         // Day view
         dayView: 'flex flex-col',
         dayViewHeader: 'font-semibold text-text-primary',
-        dayEventList: 'flex flex-col',
         // Agenda view
         agendaView: 'flex flex-col',
         agendaDayGroup: 'flex flex-col',
@@ -204,7 +203,6 @@ export const calendarVariants = tv({
                 multiDayBar: 'text-2xs',
                 dayView: 'gap-2 mt-2',
                 dayViewHeader: 'text-sm mb-1',
-                dayEventList: 'gap-1.5',
                 agendaView: 'gap-2 mt-2',
                 agendaDayGroup: 'gap-1',
                 agendaDayHeader: 'text-xs py-1 px-2',
@@ -258,7 +256,6 @@ export const calendarVariants = tv({
                 multiDayBar: 'text-xs',
                 dayView: 'gap-3 mt-3',
                 dayViewHeader: 'text-base mb-1.5',
-                dayEventList: 'gap-2',
                 agendaView: 'gap-3 mt-3',
                 agendaDayGroup: 'gap-1.5',
                 agendaDayHeader: 'text-sm py-1.5 px-3',
@@ -312,7 +309,6 @@ export const calendarVariants = tv({
                 multiDayBar: 'text-sm',
                 dayView: 'gap-4 mt-4',
                 dayViewHeader: 'text-lg mb-2',
-                dayEventList: 'gap-3',
                 agendaView: 'gap-4 mt-4',
                 agendaDayGroup: 'gap-2',
                 agendaDayHeader: 'text-base py-2 px-4',

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

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 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';
+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' | '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.
  * Renders timed appointments, multi-day spans and recurrence on a time grid, with
@@ -118,7 +118,11 @@ export interface CalendarProps extends Omit<CalendarVariants, 'dayState' | 'hasE
     onTimeSlotCreate?: (start: Date, end: Date) => void;
     /** Custom snippet for rendering a day cell. */
     dayCell?: Snippet<[DayCellContext]>;
-    /** Custom snippet for rendering an event item in the detail list. */
+    /**
+     * Custom snippet for rendering an event item in the list-based views (agenda
+     * and the month event list). Time-grid views (week/day) render events through
+     * their hour grid and ignore this snippet.
+     */
     eventItem?: Snippet<[EventItemContext]>;
     /** Custom snippet for the header area. */
     header?: Snippet<[HeaderContext]>;