@urbicon-ui/blocks 6.1.4

package/dist/components/Calendar/CalendarAgendaView.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import { useBlocksI18n } from '../..';
+  import type { Snippet } from 'svelte';
+  import { fly } from 'svelte/transition';
+  import { getCalendarContext, createSlotHelper } from './calendar.context';
+  import { formatDate, toIso, stripTime } from '../../date';
+  import { swipeable } from '../../utils/swipeable';
+  import type { CalendarEvent, EventDayInfo, EventItemContext } from './calendar.types';
+  import CalendarEventRenderer from './CalendarEventRenderer.svelte';
+
+  const bt = useBlocksI18n();
+
+  interface CalendarAgendaViewInternalProps {
+    eventItem?: Snippet<[EventItemContext]>;
+    onEventClick?: (event: CalendarEvent) => void;
+    agendaDays?: number;
+    class?: string;
+  }
+
+  let {
+    eventItem,
+    onEventClick,
+    agendaDays = 30,
+    class: className = ''
+  }: CalendarAgendaViewInternalProps = $props();
+
+  const ctx = getCalendarContext();
+  const slot = createSlotHelper(ctx);
+
+  // Generate days with events for the agenda period
+  const agendaEntries = $derived.by(() => {
+    const start = stripTime(new Date(ctx.displayedYear, ctx.displayedMonth, 1));
+    const entries: Array<{
+      date: Date;
+      dateLabel: string;
+      isToday: boolean;
+      events: EventDayInfo[];
+    }> = [];
+
+    for (let i = 0; i < agendaDays; i++) {
+      const d = new Date(start); // eslint-disable-line svelte/prefer-svelte-reactivity
+      d.setDate(start.getDate() + i);
+      const dayEvents = ctx.getEventsWithDayInfo(d);
+      if (dayEvents.length === 0) continue;
+
+      entries.push({
+        date: d,
+        dateLabel: formatDate(d, ctx.locale, {
+          weekday: 'long',
+          day: 'numeric',
+          month: 'long',
+          year: 'numeric'
+        }),
+        isToday: ctx.isDateToday(d),
+        events: dayEvents
+      });
+    }
+
+    return entries;
+  });
+
+  const agendaKey = $derived(`${ctx.displayedYear}-${ctx.displayedMonth}`);
+
+  function handleKeydown(e: KeyboardEvent) {
+    switch (e.key) {
+      case 'ArrowLeft':
+        e.preventDefault();
+        ctx.navigate(-1);
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        ctx.navigate(1);
+        break;
+    }
+  }
+</script>
+
+<div
+  class={slot('agendaView', className)}
+  role="region"
+  tabindex={0}
+  aria-label={bt('calendar.agendaView')}
+  onkeydown={handleKeydown}
+  {@attach swipeable({
+    onSwipeLeft: () => ctx.navigate(1),
+    onSwipeRight: () => ctx.navigate(-1),
+    enabled: ctx.swipeable
+  })}
+  style="overflow: hidden;"
+>
+  <div class="grid [&>*]:col-start-1 [&>*]:row-start-1">
+    {#key agendaKey}
+      <div
+        in:fly={ctx.shouldAnimate && ctx.navDirection
+          ? { x: ctx.navDirection === 'forward' ? 40 : -40, duration: 200 }
+          : { duration: 0 }}
+        out:fly={ctx.shouldAnimate && ctx.navDirection
+          ? { x: ctx.navDirection === 'forward' ? -40 : 40, duration: 150 }
+          : { duration: 0 }}
+      >
+        {#if agendaEntries.length === 0}
+          <div class={slot('empty')}>{bt('calendar.noEvents')}</div>
+        {:else}
+          {#each agendaEntries as entry (toIso(entry.date))}
+            <section class={slot('agendaDayGroup')}>
+              <div
+                class="{slot('agendaDayHeader')} {entry.isToday ? 'text-primary font-bold' : ''}"
+              >
+                {entry.dateLabel}
+              </div>
+              <div class={slot('agendaEventList')}>
+                {#each entry.events as info (info.event.id)}
+                  <CalendarEventRenderer {info} {eventItem} {onEventClick} />
+                {/each}
+              </div>
+            </section>
+          {/each}
+        {/if}
+      </div>
+    {/key}
+  </div>
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { CalendarEvent, EventItemContext } from './calendar.types';
+interface CalendarAgendaViewInternalProps {
+    eventItem?: Snippet<[EventItemContext]>;
+    onEventClick?: (event: CalendarEvent) => void;
+    agendaDays?: number;
+    class?: string;
+}
+declare const CalendarAgendaView: import("svelte").Component<CalendarAgendaViewInternalProps, {}, "">;
+type CalendarAgendaView = ReturnType<typeof CalendarAgendaView>;
+export default CalendarAgendaView;

package/dist/components/Calendar/CalendarDay.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { onDestroy } from 'svelte';
+  import { Popover } from '../../primitives/Popover';
+  import { getCalendarContext } from './calendar.context';
+  import { calendarVariants } from './calendar.variants';
+  import { isSameDay, formatDateFull } from '../../date';
+  import type { CalendarEvent, DayCellContext } from './calendar.types';
+  import CalendarEventPopover from './CalendarEventPopover.svelte';
+
+  interface CalendarDayInternalProps {
+    date: Date;
+    dayCell?: Snippet<[DayCellContext]>;
+    onEventClick?: (event: CalendarEvent) => void;
+  }
+
+  let { date, dayCell, onEventClick }: CalendarDayInternalProps = $props();
+
+  const ctx = getCalendarContext();
+
+  const isToday = $derived(ctx.isDateToday(date));
+  const isSelected = $derived(ctx.isDateSelected(date));
+  const isDisabled = $derived(ctx.isDateDisabled(date));
+  const isOutsideMonth = $derived(!ctx.isDateInMonth(date));
+  const isInRange = $derived(ctx.isDateInRange(date));
+  const isRangeStart = $derived(ctx.isDateRangeStart(date));
+  const isRangeEnd = $derived(ctx.isDateRangeEnd(date));
+  const isInPreviewRange = $derived(ctx.isDateInPreviewRange(date));
+  const isPreviewRangeEnd = $derived(
+    ctx.hoveredDate != null && isInPreviewRange && isSameDay(date, ctx.hoveredDate)
+  );
+  const isFocused = $derived(isSameDay(date, ctx.focusedDate));
+  const events = $derived(ctx.getEventsForDate(date));
+  const hasEvents = $derived(events.length > 0);
+
+  const dayState = $derived.by(() => {
+    if (isDisabled) return 'disabled' as const;
+    if (isOutsideMonth) return 'outsideMonth' as const;
+    if (isRangeStart) return 'rangeStart' as const;
+    if (isRangeEnd) return 'rangeEnd' as const;
+    if (isInRange) return 'inRange' as const;
+    if (isPreviewRangeEnd) return 'previewRangeEnd' as const;
+    if (isInPreviewRange) return 'previewRange' as const;
+    if (isToday && isSelected) return 'todaySelected' as const;
+    if (isSelected) return 'selected' as const;
+    if (isToday) return 'today' as const;
+    return 'default' as const;
+  });
+
+  // Compute per-cell styles via tv() with dayState and hasEvents variants
+  const dayStyles = $derived(
+    calendarVariants({ variant: ctx.variant, size: ctx.size, dayState, hasEvents })
+  );
+
+  const ariaLabel = $derived(formatDateFull(date, ctx.locale));
+  const maxDots = 3;
+  const visibleDots = $derived(events.slice(0, maxDots));
+
+  // Native tooltip for days with events
+  const eventTooltip = $derived.by(() => {
+    if (!hasEvents || isOutsideMonth) return undefined;
+    const maxShow = 3;
+    const titles = events.slice(0, maxShow).map((e) => e.title);
+    if (events.length > maxShow) titles.push(`+${events.length - maxShow}`);
+    return titles.join('\n');
+  });
+
+  function daySlot(key: string, extra?: string) {
+    const slotKey = key as keyof typeof ctx.slotClasses;
+    const overrides = [ctx.slotClasses?.[slotKey], extra].filter(Boolean).join(' ');
+    if (ctx.unstyled) return overrides;
+    return (
+      (dayStyles as Record<string, (opts: { class: string }) => string>)[key]?.({
+        class: overrides
+      }) ?? overrides
+    );
+  }
+
+  // --- Event popover state ---
+  const showPopoverEnabled = $derived(ctx.eventPopover && hasEvents && !isOutsideMonth);
+  let buttonEl: HTMLButtonElement | undefined = $state();
+  let popoverOpen = $state(false);
+  let hoverTimer: ReturnType<typeof setTimeout> | undefined;
+  let closeTimer: ReturnType<typeof setTimeout> | undefined;
+
+  function openPopover() {
+    clearTimeout(closeTimer);
+    hoverTimer = setTimeout(() => {
+      popoverOpen = true;
+    }, 300);
+  }
+
+  function scheduleClosePopover() {
+    clearTimeout(hoverTimer);
+    closeTimer = setTimeout(() => {
+      popoverOpen = false;
+    }, 150);
+  }
+
+  function cancelClosePopover() {
+    clearTimeout(closeTimer);
+  }
+
+  function handleClick() {
+    ctx.selectDate(date);
+  }
+
+  function handleDblClick() {
+    if (isDisabled) return;
+    ctx.onDateCreate?.(date, ctx.view);
+  }
+
+  function handleMouseEnter() {
+    ctx.setHoveredDate(date);
+    if (showPopoverEnabled) openPopover();
+  }
+
+  function handleMouseLeave() {
+    if (showPopoverEnabled) scheduleClosePopover();
+  }
+
+  function handleFocus() {
+    ctx.setFocusedDate(date);
+    if (showPopoverEnabled) {
+      clearTimeout(closeTimer);
+      popoverOpen = true;
+    }
+  }
+
+  function handleBlur() {
+    if (showPopoverEnabled) scheduleClosePopover();
+  }
+
+  onDestroy(() => {
+    clearTimeout(hoverTimer);
+    clearTimeout(closeTimer);
+  });
+</script>
+
+{#if dayCell}
+  {@render dayCell({
+    date,
+    events,
+    isToday,
+    isSelected,
+    isDisabled,
+    isOutsideMonth,
+    isFocused
+  })}
+{:else if isOutsideMonth && !ctx.showOutsideDays}
+  <div class={daySlot('day')} role="gridcell" aria-hidden="true"></div>
+{:else}
+  <button
+    bind:this={buttonEl}
+    type="button"
+    class={daySlot('day')}
+    role="gridcell"
+    tabindex={isFocused ? 0 : -1}
+    aria-label={ariaLabel}
+    aria-selected={isSelected || undefined}
+    aria-disabled={isDisabled || undefined}
+    aria-current={isToday ? 'date' : undefined}
+    data-state={dayState}
+    data-date={`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`}
+    data-drop-target={ctx.draggable ? '' : undefined}
+    title={showPopoverEnabled ? undefined : eventTooltip}
+    disabled={isDisabled}
+    onclick={handleClick}
+    ondblclick={handleDblClick}
+    onmouseenter={handleMouseEnter}
+    onmouseleave={handleMouseLeave}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+  >
+    <span class={daySlot('dayNumber')}>
+      {date.getDate()}
+    </span>
+    {#if hasEvents && dayState !== 'outsideMonth'}
+      <div class={daySlot('dotContainer')}>
+        {#each visibleDots as event (event.id)}
+          {@const category = event.categoryId ? ctx.getCategoryById(event.categoryId) : undefined}
+          <span
+            class={daySlot('dot')}
+            style={category?.color
+              ? `background-color: ${category.color}`
+              : 'background-color: var(--color-text-tertiary)'}
+          ></span>
+        {/each}
+      </div>
+    {/if}
+  </button>
+
+  {#if showPopoverEnabled && popoverOpen && buttonEl}
+    <Popover
+      triggerElement={buttonEl}
+      bind:open={popoverOpen}
+      autoTrigger={false}
+      placement="top"
+      offsetDistance={8}
+      size="sm"
+      onmouseenter={cancelClosePopover}
+      onmouseleave={scheduleClosePopover}
+    >
+      <CalendarEventPopover {events} {onEventClick} />
+    </Popover>
+  {/if}
+{/if}

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { CalendarEvent, DayCellContext } from './calendar.types';
+interface CalendarDayInternalProps {
+    date: Date;
+    dayCell?: Snippet<[DayCellContext]>;
+    onEventClick?: (event: CalendarEvent) => void;
+}
+declare const CalendarDay: import("svelte").Component<CalendarDayInternalProps, {}, "">;
+type CalendarDay = ReturnType<typeof CalendarDay>;
+export default CalendarDay;

package/dist/components/Calendar/CalendarDayView.svelte

@@ -0,0 +1,121 @@
+<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 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();
+
+  const ctx = getCalendarContext();
+  const slot = createSlotHelper(ctx);
+
+  const displayedDate = $derived(ctx.displayedDate);
+  const eventsWithInfo = $derived(ctx.getEventsWithDayInfo(displayedDate));
+  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
+  );
+  const totalEventCount = $derived(eventsWithInfo.length);
+
+  function handleKeydown(e: KeyboardEvent) {
+    switch (e.key) {
+      case 'ArrowLeft':
+        e.preventDefault();
+        ctx.navigate(-1);
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        ctx.navigate(1);
+        break;
+    }
+  }
+</script>
+
+<div
+  class={slot('dayView', className)}
+  style="overflow: hidden;"
+  role="region"
+  tabindex={0}
+  aria-label={dateLabel}
+  onkeydown={handleKeydown}
+  {@attach swipeable({
+    onSwipeLeft: () => ctx.navigate(1),
+    onSwipeRight: () => ctx.navigate(-1),
+    enabled: ctx.swipeable
+  })}
+>
+  <div class="grid [&>*]:col-start-1 [&>*]:row-start-1">
+    {#key dayKey}
+      <div
+        in:fly={ctx.shouldAnimate && ctx.navDirection
+          ? { x: ctx.navDirection === 'forward' ? 40 : -40, duration: 200 }
+          : { duration: 0 }}
+        out:fly={ctx.shouldAnimate && ctx.navDirection
+          ? { x: ctx.navDirection === 'forward' ? -40 : 40, duration: 150 }
+          : { duration: 0 }}
+      >
+        <div class="{slot('dayViewHeader')} flex items-center gap-2">
+          {dateLabel}
+          {#if totalEventCount > 0}
+            <Badge variant="soft" intent="primary" size="xs" counter>
+              {totalEventCount}
+            </Badge>
+          {/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>
+            </div>
+          {/if}
+
+          <!-- 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}
+      </div>
+    {/key}
+  </div>
+</div>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { CalendarEvent, EventItemContext } from './calendar.types';
+interface CalendarDayViewInternalProps {
+    eventItem?: Snippet<[EventItemContext]>;
+    onEventClick?: (event: CalendarEvent) => void;
+    class?: string;
+}
+declare const CalendarDayView: import("svelte").Component<CalendarDayViewInternalProps, {}, "">;
+type CalendarDayView = ReturnType<typeof CalendarDayView>;
+export default CalendarDayView;

package/dist/components/Calendar/CalendarEventItem.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import { useBlocksI18n } from '../..';
+  import { Badge } from '../../primitives/Badge';
+  import { getCalendarContext, createSlotHelper } from './calendar.context';
+  import { draggableEvent } from './calendar.drag';
+  import { stripTime } from '../../date';
+  import type { CalendarEvent, CalendarEventCategory } from './calendar.types';
+
+  const bt = useBlocksI18n();
+
+  interface CalendarEventItemInternalProps {
+    event: CalendarEvent;
+    category?: CalendarEventCategory;
+    onEventClick?: (event: CalendarEvent) => void;
+    dayIndex?: number;
+    totalDays?: number;
+    isStart?: boolean;
+    isEnd?: boolean;
+    class?: string;
+  }
+
+  let {
+    event,
+    category,
+    onEventClick,
+    dayIndex,
+    totalDays,
+    isStart,
+    isEnd,
+    class: className = ''
+  }: CalendarEventItemInternalProps = $props();
+
+  const ctx = getCalendarContext();
+  const slot = createSlotHelper(ctx);
+
+  const isClickable = $derived(!!onEventClick);
+  const isDraggable = $derived(ctx.draggable);
+  const isMultiDay = $derived((totalDays ?? 1) > 1);
+  const multiDayLabel = $derived(
+    isMultiDay
+      ? bt('calendar.multiDayLabel', { current: (dayIndex ?? 0) + 1, total: totalDays ?? 1 })
+      : ''
+  );
+
+  function handleDragEnd(targetDate: Date | null) {
+    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 =
+      eventDuration > 0 ? new Date(newStart.getTime() + eventDuration) : new Date(newStart);
+    ctx.onEventMove(event, newStart, newEnd);
+  }
+</script>
+
+{#snippet eventContent()}
+  <div
+    class={slot('colorBar')}
+    style={category?.color
+      ? `background-color: ${category.color}`
+      : 'background-color: var(--color-border-default)'}
+    aria-hidden="true"
+  ></div>
+  <div class="min-w-0 flex-1">
+    <div class="flex items-center gap-1.5">
+      {#if event.recurrence}
+        <span
+          class="text-text-tertiary shrink-0"
+          aria-label={bt('calendar.recurring')}
+          title={bt('calendar.recurring')}>↻</span
+        >
+      {/if}
+      <span class={slot('eventTitle')}>{event.title}</span>
+      {#if isMultiDay}
+        <Badge variant="soft" intent="secondary" size="xs">
+          {multiDayLabel}
+        </Badge>
+      {/if}
+    </div>
+    {#if event.description}
+      <div class={slot('eventDescription')}>{event.description}</div>
+    {/if}
+    {#if event.helperText}
+      <div class={slot('eventHelper')}>{event.helperText}</div>
+    {/if}
+  </div>
+{/snippet}
+
+{#if isClickable}
+  <button
+    type="button"
+    class="{slot('item', className)} w-full appearance-none text-left {isDraggable
+      ? 'cursor-grab'
+      : ''}"
+    aria-label={event.title}
+    onclick={() => onEventClick?.(event)}
+    {@attach draggableEvent({ event, disabled: !isDraggable, onDragEnd: handleDragEnd })}
+  >
+    {@render eventContent()}
+  </button>
+{:else}
+  <div class={slot('item', className)}>
+    {@render eventContent()}
+  </div>
+{/if}

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

@@ -0,0 +1,14 @@
+import type { CalendarEvent, CalendarEventCategory } from './calendar.types';
+interface CalendarEventItemInternalProps {
+    event: CalendarEvent;
+    category?: CalendarEventCategory;
+    onEventClick?: (event: CalendarEvent) => void;
+    dayIndex?: number;
+    totalDays?: number;
+    isStart?: boolean;
+    isEnd?: boolean;
+    class?: string;
+}
+declare const CalendarEventItem: import("svelte").Component<CalendarEventItemInternalProps, {}, "">;
+type CalendarEventItem = ReturnType<typeof CalendarEventItem>;
+export default CalendarEventItem;

package/dist/components/Calendar/CalendarEventList.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { useBlocksI18n } from '../..';
+  import type { Snippet } from 'svelte';
+  import { Button } from '../../primitives/Button';
+  import { getCalendarContext, createSlotHelper } from './calendar.context';
+  import { formatDate } from '../../date';
+  import type { CalendarEvent, EventItemContext } from './calendar.types';
+  import CalendarEventRenderer from './CalendarEventRenderer.svelte';
+
+  const bt = useBlocksI18n();
+
+  interface CalendarEventListInternalProps {
+    eventItem?: Snippet<[EventItemContext]>;
+    onEventClick?: (event: CalendarEvent) => void;
+    maxVisible?: number;
+    class?: string;
+  }
+
+  let {
+    eventItem,
+    onEventClick,
+    maxVisible,
+    class: className = ''
+  }: CalendarEventListInternalProps = $props();
+
+  const ctx = getCalendarContext();
+
+  const selectedDate = $derived(ctx.selectedDate);
+  const eventsWithInfo = $derived(selectedDate ? ctx.getEventsWithDayInfo(selectedDate) : []);
+  const dateLabel = $derived(selectedDate ? formatDate(selectedDate, ctx.locale) : '');
+
+  const visibleEvents = $derived(
+    maxVisible && maxVisible < eventsWithInfo.length
+      ? eventsWithInfo.slice(0, maxVisible)
+      : eventsWithInfo
+  );
+  const hiddenCount = $derived(
+    maxVisible && maxVisible < eventsWithInfo.length ? eventsWithInfo.length - maxVisible : 0
+  );
+
+  let showAll = $state(false);
+  const displayedEvents = $derived(showAll ? eventsWithInfo : visibleEvents);
+
+  const slot = createSlotHelper(ctx);
+</script>
+
+{#if selectedDate}
+  <div class={slot('list', className)} aria-live="polite" aria-label={bt('calendar.events')}>
+    <div class={slot('dateHeader')}>{dateLabel}</div>
+
+    {#if eventsWithInfo.length === 0}
+      <div class={slot('empty')}>{bt('calendar.noEvents')}</div>
+    {:else}
+      {#each displayedEvents as info (info.event.id)}
+        <CalendarEventRenderer {info} {eventItem} {onEventClick} />
+      {/each}
+
+      {#if hiddenCount > 0 && !showAll}
+        <Button
+          variant="text"
+          intent="primary"
+          size="sm"
+          mint="none"
+          class="w-full"
+          onclick={() => (showAll = true)}
+        >
+          {bt('calendar.showMore', { count: hiddenCount })}
+        </Button>
+      {/if}
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { CalendarEvent, EventItemContext } from './calendar.types';
+interface CalendarEventListInternalProps {
+    eventItem?: Snippet<[EventItemContext]>;
+    onEventClick?: (event: CalendarEvent) => void;
+    maxVisible?: number;
+    class?: string;
+}
+declare const CalendarEventList: import("svelte").Component<CalendarEventListInternalProps, {}, "">;
+type CalendarEventList = ReturnType<typeof CalendarEventList>;
+export default CalendarEventList;