@getmicdrop/svelte-components 5.19.0 → 5.20.0

package/dist/calendar/Calendar/MiniMonthCalendar.svelte

@@ -1,801 +1,803 @@
-<script>
-  import { ChevronLeftOutline, ChevronRightOutline, CheckCircleSolid } from '../../primitives/Icons';
-  import Spinner from '../../primitives/Spinner/Spinner.svelte';
-  import { typography } from '../../tokens/typography';
-  import { formatDayOfWeek, formatMonth } from '../../datetime/format';
-
-  const defaultLabels = {
-    monthNames: ["January", "February", "March", "April", "May", "June",
-      "July", "August", "September", "October", "November", "December"],
-    dayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-    dayLetters: ["S", "M", "T", "W", "T", "F", "S"],
-    fullDayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
-    today: 'Today',
-    previousMonth: 'Previous month',
-    nextMonth: 'Next month',
-    goToCurrentMonth: 'Go to current month',
-    todayLabel: 'Today',
-    available: 'Available',
-    notAvailable: 'Not available',
-    pressEnterToToggle: 'Press Enter to toggle.',
-    pressEnterToView: 'Press Enter to view.',
-    eventSingular: 'event',
-    eventPlural: 'events',
-    legendAvailable: 'Available',
-    legendUnavailable: 'Unavailable',
-  };
-
-  let {
-    variant = 'availability',
-    selectedDates = $bindable([]),
-    events = [],
-    saveStatus = '',
-    showLegend = true,
-    showNavigation = true,
-    showTodayButton = true,
-    readOnly = false,
-    showPartialPreview = true,
-    disablePastNavigation = false,
-    onDateSelect,
-    onDayClick,
-    onMonthChange,
-    locale = 'en-US',
-    labels: userLabels = {},
-  } = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  let currentDate = new Date();
-  let currentYear = $state(currentDate.getFullYear());
-  let currentMonth = $state(currentDate.getMonth());
-
-  let touchStartX = $state(0);
-  let touchStartY = $state(0);
-  let touchStartTime = $state(0);
-  let lastTouchX = $state(0);
-  let lastTouchTime = $state(0);
-  let velocityX = $state(0);
-  let isSwiping = $state(false);
-  let isAnimating = $state(false);
-  let swipeOffset = $state(0);
-  let calendarGridElement = $state();
-  let monthDisplayEl = $state();
-  let prefersReducedMotion = $state(false);
-
-  let prevPressed = $state(false);
-  let nextPressed = $state(false);
-  let todayPressed = $state(false);
-
-  let _momentumAnimationId = null;
-  const _MOMENTUM_FRICTION = 0.92;
-  const _MOMENTUM_MIN_VELOCITY = 0.05;
-
-  const SWIPE_THRESHOLD = 0.15;
-  const VELOCITY_THRESHOLD = 0.3;
-  const DRAG_RESISTANCE = 0.8;
-
-  let MONTH_NAMES = $derived(labels.monthNames);
-  let DAY_NAMES = $derived(labels.dayNames);
-  let DAY_LETTERS = $derived(labels.dayLetters);
-
-  const today = new Date();
-  const todayLocal = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-  const todayLocalMonth = today.getMonth();
-  const todayLocalYear = today.getFullYear();
-
-  let isAtCurrentMonth = $derived(currentYear === todayLocalYear && currentMonth === todayLocalMonth);
-  let canGoPrev = $derived(!disablePastNavigation || !isAtCurrentMonth);
-
-  $effect(() => {
-    if (typeof window !== 'undefined') {
-      const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-      prefersReducedMotion = mediaQuery.matches;
-      const handler = (e) => { prefersReducedMotion = e.matches; };
-      mediaQuery.addEventListener('change', handler);
-      return () => mediaQuery.removeEventListener('change', handler);
-    }
-  });
-
-  function normalizeDate(date) {
-    const d = new Date(date);
-    const year = d.getFullYear();
-    const month = String(d.getMonth() + 1).padStart(2, '0');
-    const day = String(d.getDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
-  }
-
-  function getDaysInMonth(year, month) {
-    return new Date(year, month + 1, 0).getDate();
-  }
-
-  function isToday(year, month, day) {
-    return (
-      year === todayLocal.getFullYear() &&
-      month === todayLocal.getMonth() &&
-      day === todayLocal.getDate()
-    );
-  }
-
-  function isPastDate(year, month, day) {
-    const checkDate = new Date(year, month, day);
-    return checkDate < todayLocal;
-  }
-
-  function _isSelectedDate(dateStr) {
-    return selectedDates.includes(dateStr);
-  }
-
-  function hasEventsOnDate(dateStr) {
-    return events.some(event => event.date === dateStr);
-  }
-
-  function getEventsForDate(dateStr) {
-    return events.filter(event => event.date === dateStr);
-  }
-
-  let daysInMonth = $derived.by(() => {
-    const _ = selectedDates;
-    const days = getDaysInMonth(currentYear, currentMonth);
-    const firstDayOfWeek = new Date(currentYear, currentMonth, 1).getDay();
-    const result = [];
-
-    for (let i = 1; i <= days; i++) {
-      const dateStr = normalizeDate(new Date(currentYear, currentMonth, i));
-      result.push({
-        day: i,
-        dateStr,
-        startDay: firstDayOfWeek + i - 1,
-        isPast: isPastDate(currentYear, currentMonth, i),
-        isToday: isToday(currentYear, currentMonth, i),
-        isSelected: selectedDates.includes(dateStr),
-        hasEvents: hasEventsOnDate(dateStr),
-        events: getEventsForDate(dateStr)
-      });
-    }
-    return result;
-  });
-
-  let prevMonthPreviewDays = $derived.by(() => {
-    if (!showPartialPreview) return [];
-    const firstDayOfWeek = new Date(currentYear, currentMonth, 1).getDay();
-    if (firstDayOfWeek === 0) return [];
-
-    const prevMonth = currentMonth === 0 ? 11 : currentMonth - 1;
-    const prevYear = currentMonth === 0 ? currentYear - 1 : currentYear;
-    const daysInPrevMonth = getDaysInMonth(prevYear, prevMonth);
-
-    return Array.from({ length: firstDayOfWeek }, (_, i) => ({
-      day: daysInPrevMonth - firstDayOfWeek + i + 1,
-      month: prevMonth,
-      year: prevYear
-    }));
-  });
-
-  let nextMonthPreviewDays = $derived.by(() => {
-    if (!showPartialPreview) return [];
-    const days = getDaysInMonth(currentYear, currentMonth);
-    const lastDayOfWeek = new Date(currentYear, currentMonth, days).getDay();
-    if (lastDayOfWeek === 6) return [];
-
-    const daysToShow = 6 - lastDayOfWeek;
-    const nextMonth = currentMonth === 11 ? 0 : currentMonth + 1;
-    const nextYear = currentMonth === 11 ? currentYear + 1 : currentYear;
-
-    return Array.from({ length: daysToShow }, (_, i) => ({
-      day: i + 1,
-      month: nextMonth,
-      year: nextYear
-    }));
-  });
-
-  function triggerHaptic(style = 'light') {
-    if (typeof window === 'undefined') return;
-
-    if (window.webkit?.messageHandlers?.haptic) {
-      window.webkit.messageHandlers.haptic.postMessage(style);
-      return;
-    }
-
-    if (window.TapticEngine) {
-      window.TapticEngine.impact({ style });
-      return;
-    }
-
-    if (navigator.vibrate) {
-      navigator.vibrate(style === 'light' ? 10 : 20);
-    }
-  }
-
-  function handleDayTap(e, day) {
-    if (isSwiping) return;
-    if (readOnly) return;
-    if (variant === 'availability' && day.isPast) return;
-
-    if (variant === 'availability') {
-      const isSelected = selectedDates.includes(day.dateStr);
-
-      if (isSelected) {
-        triggerHaptic('medium');
-        onDateSelect?.({ date: day.dateStr, selected: false });
-      } else {
-        triggerHaptic('light');
-        onDateSelect?.({ date: day.dateStr, selected: true });
-      }
-    } else if (variant === 'display' || variant === 'public') {
-      if (day.hasEvents) {
-        triggerHaptic('light');
-        onDayClick?.({ date: day.dateStr, events: day.events });
-      }
-    }
-  }
-
-  let isDragging = $state(false);
-
-  function handleDayClick(day) {
-    if (isDragging || isSwiping) return;
-    if (readOnly) return;
-    if (variant === 'availability' && day.isPast) return;
-
-    if (variant === 'availability') {
-      const isSelected = selectedDates.includes(day.dateStr);
-
-      if (isSelected) {
-        triggerHaptic('medium');
-        onDateSelect?.({ date: day.dateStr, selected: false });
-      } else {
-        triggerHaptic('light');
-        onDateSelect?.({ date: day.dateStr, selected: true });
-      }
-    } else if (variant === 'display' || variant === 'public') {
-      if (day.hasEvents) {
-        triggerHaptic('light');
-        onDayClick?.({ date: day.dateStr, events: day.events });
-      }
-    }
-  }
-
-  function goToPrevMonth() {
-    if (isAnimating || !canGoPrev) return;
-    triggerHaptic('light');
-    animateMonthChange(-1);
-  }
-
-  function goToNextMonth() {
-    if (isAnimating) return;
-    triggerHaptic('light');
-    animateMonthChange(1);
-  }
-
-  function goToToday() {
-    if (isAnimating || isAtCurrentMonth) return;
-
-    const todayYM = today.getFullYear() * 12 + today.getMonth();
-    const currentYM = currentYear * 12 + currentMonth;
-
-    const direction = todayYM > currentYM ? 1 : -1;
-    triggerHaptic('light');
-    animateMonthChange(direction, () => {
-      currentYear = today.getFullYear();
-      currentMonth = today.getMonth();
-    });
-  }
-
-  function animateMonthChange(direction, customAction = null) {
-    if (isAnimating || !calendarGridElement) return;
-
-    if (prefersReducedMotion) {
-      if (customAction) {
-        customAction();
-      } else if (direction > 0) {
-        if (currentMonth === 11) {
-          currentMonth = 0;
-          currentYear++;
-        } else {
-          currentMonth++;
-        }
-      } else {
-        if (currentMonth === 0) {
-          currentMonth = 11;
-          currentYear--;
-        } else {
-          currentMonth--;
-        }
-      }
-      triggerHaptic('medium');
-      onMonthChange?.({ year: currentYear, month: currentMonth });
-      return;
-    }
-
-    isAnimating = true;
-    const containerWidth = calendarGridElement.offsetWidth || 320;
-
-    const clone = calendarGridElement.cloneNode(true);
-    clone.classList.add('calendar-clone');
-    clone.style.position = 'absolute';
-    clone.style.top = '0';
-    clone.style.left = '0';
-    clone.style.width = '100%';
-    clone.style.transform = swipeOffset ? `translateX(${swipeOffset}px)` : 'translateX(0)';
-    clone.style.transition = 'none';
-    clone.style.pointerEvents = 'none';
-    clone.style.zIndex = '1';
-
-    const slideContainer = calendarGridElement.parentElement;
-    slideContainer.style.position = 'relative';
-    slideContainer.style.overflow = 'hidden';
-    slideContainer.insertBefore(clone, calendarGridElement);
-
-    if (customAction) {
-      customAction();
-    } else if (direction > 0) {
-      if (currentMonth === 11) {
-        currentMonth = 0;
-        currentYear++;
-      } else {
-        currentMonth++;
-      }
-    } else {
-      if (currentMonth === 0) {
-        currentMonth = 11;
-        currentYear--;
-      } else {
-        currentMonth--;
-      }
-    }
-
-    triggerHaptic('medium');
-    onMonthChange?.({ year: currentYear, month: currentMonth });
-
-    const enterFrom = direction > 0 ? containerWidth : -containerWidth;
-    calendarGridElement.style.transition = 'none';
-    calendarGridElement.style.transform = `translateX(${enterFrom}px)`;
-    calendarGridElement.offsetHeight;
-
-    const duration = 0.3;
-    const easing = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
-
-    clone.style.transition = `transform ${duration}s ${easing}`;
-    clone.style.transform = `translateX(${direction > 0 ? -containerWidth : containerWidth}px)`;
-
-    calendarGridElement.style.transition = `transform ${duration}s ${easing}`;
-    calendarGridElement.style.transform = 'translateX(0)';
-
-    if (monthDisplayEl) {
-      monthDisplayEl.style.transition = 'none';
-      monthDisplayEl.style.transform = `translateX(${enterFrom * 0.3}px)`;
-      monthDisplayEl.style.opacity = '0';
-      monthDisplayEl.offsetHeight;
-      monthDisplayEl.style.transition = `transform ${duration}s ${easing}, opacity ${duration}s ${easing}`;
-      monthDisplayEl.style.transform = 'translateX(0)';
-      monthDisplayEl.style.opacity = '1';
-    }
-
-    setTimeout(() => {
-      if (clone.parentElement) clone.remove();
-      if (calendarGridElement) {
-        calendarGridElement.style.transition = '';
-        calendarGridElement.style.transform = '';
-      }
-      if (monthDisplayEl) {
-        monthDisplayEl.style.transition = '';
-        monthDisplayEl.style.transform = '';
-        monthDisplayEl.style.opacity = '';
-      }
-      isAnimating = false;
-      swipeOffset = 0;
-    }, duration * 1000 + 50);
-  }
-
-  function handleTouchStart(e) {
-    if (isAnimating) return;
-
-    touchStartX = e.touches[0].clientX;
-    touchStartY = e.touches[0].clientY;
-    touchStartTime = Date.now();
-    lastTouchX = touchStartX;
-    lastTouchTime = touchStartTime;
-    velocityX = 0;
-    isSwiping = false;
-    isDragging = false;
-    swipeOffset = 0;
-  }
-
-  function handleTouchMove(e) {
-    if (!touchStartX || isAnimating) return;
-
-    const touchCurrentX = e.touches[0].clientX;
-    const touchCurrentY = e.touches[0].clientY;
-    const diffX = touchStartX - touchCurrentX;
-    const diffY = touchStartY - touchCurrentY;
-    const now = Date.now();
-
-    if (!isSwiping && Math.abs(diffX) > 10) {
-      if (Math.abs(diffX) > Math.abs(diffY)) {
-        isSwiping = true;
-      } else {
-        touchStartX = 0;
-        return;
-      }
-    }
-
-    if (isSwiping) {
-      e.preventDefault();
-
-      const dt = now - lastTouchTime;
-      if (dt > 0) {
-        velocityX = (lastTouchX - touchCurrentX) / dt;
-      }
-      lastTouchX = touchCurrentX;
-      lastTouchTime = now;
-
-      swipeOffset = -diffX * DRAG_RESISTANCE;
-
-      if (calendarGridElement) {
-        calendarGridElement.style.transform = `translateX(${swipeOffset}px)`;
-        calendarGridElement.style.transition = 'none';
-
-        const shadowIntensity = Math.min(Math.abs(swipeOffset) / 80, 0.4);
-        const blurRadius = 12 + shadowIntensity * 24;
-        const spreadRadius = shadowIntensity * 4;
-
-        if (diffX > 0) {
-          calendarGridElement.style.boxShadow = `-${spreadRadius}px 0 ${blurRadius}px rgba(0,0,0,${shadowIntensity})`;
-        } else {
-          calendarGridElement.style.boxShadow = `${spreadRadius}px 0 ${blurRadius}px rgba(0,0,0,${shadowIntensity})`;
-        }
-      }
-    }
-  }
-
-  function handleTouchEnd() {
-    if (!touchStartX || !isSwiping || isAnimating) {
-      touchStartX = 0;
-      touchStartY = 0;
-      isSwiping = false;
-      return;
-    }
-
-    const containerWidth = calendarGridElement?.offsetWidth || 320;
-    const swipePercent = Math.abs(swipeOffset) / containerWidth;
-    const shouldChange = swipePercent > SWIPE_THRESHOLD || Math.abs(velocityX) > VELOCITY_THRESHOLD;
-    const direction = swipeOffset > 0 ? -1 : 1;
-
-    if (calendarGridElement) {
-      calendarGridElement.style.boxShadow = '';
-    }
-
-    if (shouldChange) {
-      animateMonthChange(direction);
-    } else {
-      if (calendarGridElement) {
-        calendarGridElement.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
-        calendarGridElement.style.transform = 'translateX(0)';
-
-        setTimeout(() => {
-          if (calendarGridElement) {
-            calendarGridElement.style.transition = '';
-            calendarGridElement.style.transform = '';
-          }
-        }, 300);
-      }
-    }
-
-    touchStartX = 0;
-    touchStartY = 0;
-    isSwiping = false;
-    swipeOffset = 0;
-    velocityX = 0;
-  }
-
-  function handleMouseDown(e) {
-    if (isAnimating || e.button !== 0) return;
-
-    isDragging = false;
-    touchStartX = e.clientX;
-    touchStartY = e.clientY;
-    touchStartTime = Date.now();
-    lastTouchX = touchStartX;
-    lastTouchTime = touchStartTime;
-    velocityX = 0;
-    isSwiping = false;
-    swipeOffset = 0;
-
-    e.preventDefault();
-  }
-
-  function handleMouseMove(e) {
-    if (!touchStartX || isAnimating) return;
-
-    const mouseCurrentX = e.clientX;
-    const mouseCurrentY = e.clientY;
-    const diffX = touchStartX - mouseCurrentX;
-    const diffY = touchStartY - mouseCurrentY;
-    const now = Date.now();
-
-    if (!isDragging && Math.abs(diffX) > 5) {
-      isDragging = true;
-    }
-
-    if (!isSwiping && Math.abs(diffX) > 10) {
-      if (Math.abs(diffX) > Math.abs(diffY)) {
-        isSwiping = true;
-      } else {
-        touchStartX = 0;
-        return;
-      }
-    }
-
-    if (isSwiping) {
-      const dt = now - lastTouchTime;
-      if (dt > 0) {
-        velocityX = (lastTouchX - mouseCurrentX) / dt;
-      }
-      lastTouchX = mouseCurrentX;
-      lastTouchTime = now;
-
-      swipeOffset = -diffX * DRAG_RESISTANCE;
-
-      if (calendarGridElement) {
-        calendarGridElement.style.transform = `translateX(${swipeOffset}px)`;
-        calendarGridElement.style.transition = 'none';
-
-        const shadowIntensity = Math.min(Math.abs(swipeOffset) / 80, 0.4);
-        const blurRadius = 12 + shadowIntensity * 24;
-        const spreadRadius = shadowIntensity * 4;
-
-        if (diffX > 0) {
-          calendarGridElement.style.boxShadow = `-${spreadRadius}px 0 ${blurRadius}px rgba(0,0,0,${shadowIntensity})`;
-        } else {
-          calendarGridElement.style.boxShadow = `${spreadRadius}px 0 ${blurRadius}px rgba(0,0,0,${shadowIntensity})`;
-        }
-      }
-    }
-  }
-
-  function handleMouseUp() {
-    if (!touchStartX || isAnimating) {
-      touchStartX = 0;
-      touchStartY = 0;
-      isDragging = false;
-      return;
-    }
-
-    if (!isSwiping) {
-      touchStartX = 0;
-      touchStartY = 0;
-      isDragging = false;
-      return;
-    }
-
-    const containerWidth = calendarGridElement?.offsetWidth || 320;
-    const swipePercent = Math.abs(swipeOffset) / containerWidth;
-    const shouldChange = swipePercent > SWIPE_THRESHOLD || Math.abs(velocityX) > VELOCITY_THRESHOLD;
-    const direction = swipeOffset > 0 ? -1 : 1;
-
-    if (calendarGridElement) {
-      calendarGridElement.style.boxShadow = '';
-    }
-
-    if (shouldChange) {
-      animateMonthChange(direction);
-    } else {
-      if (calendarGridElement) {
-        calendarGridElement.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
-        calendarGridElement.style.transform = 'translateX(0)';
-
-        setTimeout(() => {
-          if (calendarGridElement) {
-            calendarGridElement.style.transition = '';
-            calendarGridElement.style.transform = '';
-          }
-        }, 300);
-      }
-    }
-
-    touchStartX = 0;
-    touchStartY = 0;
-    isSwiping = false;
-    swipeOffset = 0;
-    velocityX = 0;
-    isDragging = false;
-  }
-
-  function handleMouseLeave() {
-    if (isSwiping) {
-      handleMouseUp();
-    }
-  }
-
-  function handleDayKeydown(event, day) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      handleDayClick(day);
-    }
-  }
-
-  function getDayAriaLabel(day) {
-    const isoStr = new Date(currentYear, currentMonth, day.day).toISOString();
-    const dayOfWeek = formatDayOfWeek(isoStr, 'UTC', false);
-    const month = formatMonth(isoStr, 'UTC', false);
-    const dateStr = `${dayOfWeek}, ${month} ${day.day}, ${currentYear}`;
-
-    let label = dateStr;
-    if (day.isToday) label += `, ${labels.todayLabel}`;
-    if (variant === 'availability') {
-      label += day.isSelected ? `, ${labels.available}` : `, ${labels.notAvailable}`;
-      if (!day.isPast) label += `. ${labels.pressEnterToToggle}`;
-    } else if (day.hasEvents) {
-      const count = day.events.length;
-      label += `, ${count} ${count > 1 ? labels.eventPlural : labels.eventSingular}. ${labels.pressEnterToView}`;
-    }
-    return label;
-  }
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  class="w-full max-w-full mx-auto select-none"
-  class:max-w-xs={variant === 'display'}
-  ontouchstart={handleTouchStart}
-  ontouchmove={handleTouchMove}
-  ontouchend={handleTouchEnd}
-  onmousedown={handleMouseDown}
-  onmousemove={handleMouseMove}
-  onmouseup={handleMouseUp}
-  onmouseleave={handleMouseLeave}
->
-  {#if showNavigation}
-    <header class="flex items-center justify-between mb-4 select-none">
-      <div class="flex items-center gap-2" bind:this={monthDisplayEl}>
-        <h2 class={typography.h2}>{MONTH_NAMES[currentMonth]}</h2>
-        {#if saveStatus && variant === 'availability'}
-          <span class="flex items-center justify-center ml-1">
-            {#if saveStatus === 'saving'}
-              <Spinner size="sm" color="secondary" />
-            {:else if saveStatus === 'saved'}
-              <span class="flex items-center justify-center text-green-600">
-                <CheckCircleSolid class="w-5 h-5" />
-              </span>
-            {/if}
-          </span>
-        {/if}
-      </div>
-
-      <div class="flex items-center gap-2">
-        <button
-          class="p-2 flex items-center justify-center border-0 rounded-lg bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-all duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
-          class:scale-90={prevPressed}
-          class:bg-gray-100={prevPressed}
-          class:dark:bg-gray-700={prevPressed}
-          onclick={goToPrevMonth}
-          ontouchstart={() => prevPressed = true}
-          ontouchend={() => prevPressed = false}
-          ontouchcancel={() => prevPressed = false}
-          onmousedown={() => prevPressed = true}
-          onmouseup={() => prevPressed = false}
-          onmouseleave={() => prevPressed = false}
-          disabled={!canGoPrev}
-          aria-label={labels.previousMonth}
-        >
-          <ChevronLeftOutline class="w-5 h-5" />
-        </button>
-
-        {#if showTodayButton}
-          <button
-            class="text-sm font-medium px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-transparent text-gray-900 dark:text-white cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-blue-700 hover:text-white hover:border-blue-700 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed"
-            class:scale-95={todayPressed}
-            class:bg-blue-700={todayPressed}
-            class:text-white={todayPressed}
-            onclick={goToToday}
-            ontouchstart={() => todayPressed = true}
-            ontouchend={() => todayPressed = false}
-            ontouchcancel={() => todayPressed = false}
-            onmousedown={() => todayPressed = true}
-            onmouseup={() => todayPressed = false}
-            onmouseleave={() => todayPressed = false}
-            disabled={isAtCurrentMonth}
-            aria-label={labels.goToCurrentMonth}
-          >
-            {labels.today}
-          </button>
-        {/if}
-
-        <button
-          class="p-2 flex items-center justify-center border-0 rounded-lg bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-all duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
-          class:scale-90={nextPressed}
-          class:bg-gray-100={nextPressed}
-          class:dark:bg-gray-700={nextPressed}
-          onclick={goToNextMonth}
-          ontouchstart={() => nextPressed = true}
-          ontouchend={() => nextPressed = false}
-          ontouchcancel={() => nextPressed = false}
-          onmousedown={() => nextPressed = true}
-          onmouseup={() => nextPressed = false}
-          onmouseleave={() => nextPressed = false}
-          aria-label={labels.nextMonth}
-        >
-          <ChevronRightOutline class="w-5 h-5" />
-        </button>
-      </div>
-    </header>
-  {/if}
-
-  <div class="relative overflow-hidden">
-    <div
-      bind:this={calendarGridElement}
-      class="grid grid-cols-7 gap-0 bg-white dark:bg-gray-800 select-none min-h-[356px] sm:min-h-[388px] md:min-h-[448px] lg:min-h-[508px]"
-      role="grid"
-      aria-label="{MONTH_NAMES[currentMonth]} {currentYear}"
-    >
-      {#each DAY_NAMES as dayName, i}
-        <div
-          class="flex items-end justify-center pb-1 {typography.xsMuted} overflow-hidden leading-none sm:pb-2 sm:pt-1 sm:justify-end sm:pr-2 sm:text-lg sm:text-gray-900 sm:dark:text-white sm:border-b sm:border-gray-200 sm:dark:border-gray-700"
-          role="columnheader"
-          aria-label={labels.fullDayNames[i]}
-        >
-          <span class="sm:hidden">{DAY_LETTERS[i]}</span>
-          <span class="hidden sm:block">{dayName}</span>
-        </div>
-      {/each}
-
-      {#each prevMonthPreviewDays as previewDay}
-        <div class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] pointer-events-none bg-transparent shadow-[inset_0_-1px_0_0_rgb(229_231_235)] dark:shadow-[inset_0_-1px_0_0_rgb(55_65_81)] sm:shadow-none sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700 last:sm:border-r" role="gridcell" aria-disabled="true">
-          <span class="{typography.sm} text-gray-300 dark:text-gray-600 w-full text-center sm:text-lg sm:font-normal sm:text-right sm:mb-2">{previewDay.day}</span>
-        </div>
-      {/each}
-
-      {#each daysInMonth as day (day.dateStr)}
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div
-          class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] select-none
-            shadow-[inset_0_-1px_0_0_rgb(229_231_235)] dark:shadow-[inset_0_-1px_0_0_rgb(55_65_81)]
-            sm:shadow-none sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700
-            {day.isPast && variant === 'availability' ? 'bg-gray-100 dark:bg-gray-700 cursor-default' : ''}
-            {day.isPast && day.isSelected && variant === 'availability' ? 'bg-blue-100 dark:bg-blue-900/30 cursor-default' : ''}
-            {day.isSelected && !day.isPast && variant === 'availability' ? 'bg-blue-700 dark:bg-blue-600' : ''}
-            {!readOnly && (variant === 'availability' ? !day.isPast : day.hasEvents) ? 'cursor-pointer' : ''}
-            {variant !== 'availability' && day.hasEvents ? 'bg-blue-50 dark:bg-blue-900/20 sm:bg-transparent sm:dark:bg-transparent' : ''}"
-          class:last:border-r={true}
-          role="gridcell"
-          aria-label={getDayAriaLabel(day)}
-          aria-selected={day.isSelected}
-          aria-disabled={variant === 'availability' ? day.isPast : !day.hasEvents}
-          tabindex={(!readOnly && (variant === 'availability' ? !day.isPast : day.hasEvents)) ? 0 : -1}
-          onclick={() => handleDayClick(day)}
-          ontouchend={(e) => { e.preventDefault(); handleDayTap(e, day); }}
-          onkeydown={(e) => handleDayKeydown(e, day)}
-        >
-          <span class="{typography.sm} w-full text-center transition-transform duration-100 ease-out sm:text-lg sm:font-normal sm:text-right sm:mb-2
-            {day.isPast ? 'text-gray-400 dark:text-gray-500' : ''}
-            {day.isSelected && !day.isPast && variant === 'availability' ? 'text-white font-semibold' : ''}">{day.day}</span>
-          {#if variant !== 'availability' && day.hasEvents}
-            <div class="flex gap-0.5 mt-0.5">
-              {#each day.events.slice(0, 3) as _}
-                <span class="w-1.5 h-1.5 rounded-full bg-blue-600 dark:bg-blue-500 transition-transform duration-150 ease-out hover:scale-125"></span>
-              {/each}
-            </div>
-          {/if}
-        </div>
-      {/each}
-
-      {#each nextMonthPreviewDays as previewDay}
-        <div class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] pointer-events-none bg-transparent shadow-[inset_0_-1px_0_0_rgb(229_231_235)] dark:shadow-[inset_0_-1px_0_0_rgb(55_65_81)] sm:shadow-none sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700 sm:border-b last:sm:border-r" role="gridcell" aria-disabled="true">
-          <span class="{typography.sm} text-gray-300 dark:text-gray-600 w-full text-center sm:text-lg sm:font-normal sm:text-right sm:mb-2">{previewDay.day}</span>
-        </div>
-      {/each}
-    </div>
-  </div>
-
-  {#if showLegend && variant === 'availability'}
-    <div class="flex items-center justify-center gap-6 pt-4">
-      <div class="flex items-center gap-2">
-        <span class="w-5 h-5 rounded bg-blue-700 dark:bg-blue-600 border border-blue-700 dark:border-blue-600"></span>
-        <span class="{typography.sm}">{labels.legendAvailable}</span>
-      </div>
-      <div class="flex items-center gap-2">
-        <span class="w-5 h-5 rounded bg-gray-50 dark:bg-gray-700 border-2 border-gray-400 dark:border-gray-500"></span>
-        <span class="{typography.sm}">{labels.legendUnavailable}</span>
-      </div>
-    </div>
-  {/if}
-</div>
+<script>
+  import { ChevronLeftOutline, ChevronRightOutline, CheckCircleSolid } from '../../primitives/Icons';
+  import Spinner from '../../primitives/Spinner/Spinner.svelte';
+  import { typography } from '../../tokens/typography';
+  import { formatDayOfWeek, formatMonth } from '../../datetime/format';
+
+  const defaultLabels = {
+    monthNames: ["January", "February", "March", "April", "May", "June",
+      "July", "August", "September", "October", "November", "December"],
+    dayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    dayLetters: ["S", "M", "T", "W", "T", "F", "S"],
+    fullDayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    today: 'Today',
+    previousMonth: 'Previous month',
+    nextMonth: 'Next month',
+    goToCurrentMonth: 'Go to current month',
+    todayLabel: 'Today',
+    available: 'Available',
+    notAvailable: 'Not available',
+    pressEnterToToggle: 'Press Enter to toggle.',
+    pressEnterToView: 'Press Enter to view.',
+    eventSingular: 'event',
+    eventPlural: 'events',
+    legendAvailable: 'Available',
+    legendUnavailable: 'Unavailable',
+  };
+
+  let {
+    variant = 'availability',
+    selectedDates = $bindable([]),
+    events = [],
+    saveStatus = '',
+    showLegend = true,
+    showNavigation = true,
+    showTodayButton = true,
+    readOnly = false,
+    showPartialPreview = true,
+    disablePastNavigation = false,
+    onDateSelect,
+    onDayClick,
+    onMonthChange,
+    locale = 'en-US',
+    labels: userLabels = {},
+  } = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  let currentDate = new Date();
+  let currentYear = $state(currentDate.getFullYear());
+  let currentMonth = $state(currentDate.getMonth());
+
+  let touchStartX = $state(0);
+  let touchStartY = $state(0);
+  let touchStartTime = $state(0);
+  let lastTouchX = $state(0);
+  let lastTouchTime = $state(0);
+  let velocityX = $state(0);
+  let isSwiping = $state(false);
+  let isAnimating = $state(false);
+  let swipeOffset = $state(0);
+  let calendarGridElement = $state();
+  let monthDisplayEl = $state();
+  let prefersReducedMotion = $state(false);
+
+  let prevPressed = $state(false);
+  let nextPressed = $state(false);
+  let todayPressed = $state(false);
+
+  let _momentumAnimationId = null;
+  const _MOMENTUM_FRICTION = 0.92;
+  const _MOMENTUM_MIN_VELOCITY = 0.05;
+
+  const SWIPE_THRESHOLD = 0.15;
+  const VELOCITY_THRESHOLD = 0.3;
+  const DRAG_RESISTANCE = 0.8;
+  /** Shadow color for swipe drag effect (black with dynamic opacity) */
+  const SWIPE_SHADOW_COLOR = 'rgba(0,0,0,';
+
+  let MONTH_NAMES = $derived(labels.monthNames);
+  let DAY_NAMES = $derived(labels.dayNames);
+  let DAY_LETTERS = $derived(labels.dayLetters);
+
+  const today = new Date();
+  const todayLocal = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+  const todayLocalMonth = today.getMonth();
+  const todayLocalYear = today.getFullYear();
+
+  let isAtCurrentMonth = $derived(currentYear === todayLocalYear && currentMonth === todayLocalMonth);
+  let canGoPrev = $derived(!disablePastNavigation || !isAtCurrentMonth);
+
+  $effect(() => {
+    if (typeof window !== 'undefined') {
+      const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+      prefersReducedMotion = mediaQuery.matches;
+      const handler = (e) => { prefersReducedMotion = e.matches; };
+      mediaQuery.addEventListener('change', handler);
+      return () => mediaQuery.removeEventListener('change', handler);
+    }
+  });
+
+  function normalizeDate(date) {
+    const d = new Date(date);
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  }
+
+  function getDaysInMonth(year, month) {
+    return new Date(year, month + 1, 0).getDate();
+  }
+
+  function isToday(year, month, day) {
+    return (
+      year === todayLocal.getFullYear() &&
+      month === todayLocal.getMonth() &&
+      day === todayLocal.getDate()
+    );
+  }
+
+  function isPastDate(year, month, day) {
+    const checkDate = new Date(year, month, day);
+    return checkDate < todayLocal;
+  }
+
+  function _isSelectedDate(dateStr) {
+    return selectedDates.includes(dateStr);
+  }
+
+  function hasEventsOnDate(dateStr) {
+    return events.some(event => event.date === dateStr);
+  }
+
+  function getEventsForDate(dateStr) {
+    return events.filter(event => event.date === dateStr);
+  }
+
+  let daysInMonth = $derived.by(() => {
+    const _ = selectedDates;
+    const days = getDaysInMonth(currentYear, currentMonth);
+    const firstDayOfWeek = new Date(currentYear, currentMonth, 1).getDay();
+    const result = [];
+
+    for (let i = 1; i <= days; i++) {
+      const dateStr = normalizeDate(new Date(currentYear, currentMonth, i));
+      result.push({
+        day: i,
+        dateStr,
+        startDay: firstDayOfWeek + i - 1,
+        isPast: isPastDate(currentYear, currentMonth, i),
+        isToday: isToday(currentYear, currentMonth, i),
+        isSelected: selectedDates.includes(dateStr),
+        hasEvents: hasEventsOnDate(dateStr),
+        events: getEventsForDate(dateStr)
+      });
+    }
+    return result;
+  });
+
+  let prevMonthPreviewDays = $derived.by(() => {
+    if (!showPartialPreview) return [];
+    const firstDayOfWeek = new Date(currentYear, currentMonth, 1).getDay();
+    if (firstDayOfWeek === 0) return [];
+
+    const prevMonth = currentMonth === 0 ? 11 : currentMonth - 1;
+    const prevYear = currentMonth === 0 ? currentYear - 1 : currentYear;
+    const daysInPrevMonth = getDaysInMonth(prevYear, prevMonth);
+
+    return Array.from({ length: firstDayOfWeek }, (_, i) => ({
+      day: daysInPrevMonth - firstDayOfWeek + i + 1,
+      month: prevMonth,
+      year: prevYear
+    }));
+  });
+
+  let nextMonthPreviewDays = $derived.by(() => {
+    if (!showPartialPreview) return [];
+    const days = getDaysInMonth(currentYear, currentMonth);
+    const lastDayOfWeek = new Date(currentYear, currentMonth, days).getDay();
+    if (lastDayOfWeek === 6) return [];
+
+    const daysToShow = 6 - lastDayOfWeek;
+    const nextMonth = currentMonth === 11 ? 0 : currentMonth + 1;
+    const nextYear = currentMonth === 11 ? currentYear + 1 : currentYear;
+
+    return Array.from({ length: daysToShow }, (_, i) => ({
+      day: i + 1,
+      month: nextMonth,
+      year: nextYear
+    }));
+  });
+
+  function triggerHaptic(style = 'light') {
+    if (typeof window === 'undefined') return;
+
+    if (window.webkit?.messageHandlers?.haptic) {
+      window.webkit.messageHandlers.haptic.postMessage(style);
+      return;
+    }
+
+    if (window.TapticEngine) {
+      window.TapticEngine.impact({ style });
+      return;
+    }
+
+    if (navigator.vibrate) {
+      navigator.vibrate(style === 'light' ? 10 : 20);
+    }
+  }
+
+  function handleDayTap(e, day) {
+    if (isSwiping) return;
+    if (readOnly) return;
+    if (variant === 'availability' && day.isPast) return;
+
+    if (variant === 'availability') {
+      const isSelected = selectedDates.includes(day.dateStr);
+
+      if (isSelected) {
+        triggerHaptic('medium');
+        onDateSelect?.({ date: day.dateStr, selected: false });
+      } else {
+        triggerHaptic('light');
+        onDateSelect?.({ date: day.dateStr, selected: true });
+      }
+    } else if (variant === 'display' || variant === 'public') {
+      if (day.hasEvents) {
+        triggerHaptic('light');
+        onDayClick?.({ date: day.dateStr, events: day.events });
+      }
+    }
+  }
+
+  let isDragging = $state(false);
+
+  function handleDayClick(day) {
+    if (isDragging || isSwiping) return;
+    if (readOnly) return;
+    if (variant === 'availability' && day.isPast) return;
+
+    if (variant === 'availability') {
+      const isSelected = selectedDates.includes(day.dateStr);
+
+      if (isSelected) {
+        triggerHaptic('medium');
+        onDateSelect?.({ date: day.dateStr, selected: false });
+      } else {
+        triggerHaptic('light');
+        onDateSelect?.({ date: day.dateStr, selected: true });
+      }
+    } else if (variant === 'display' || variant === 'public') {
+      if (day.hasEvents) {
+        triggerHaptic('light');
+        onDayClick?.({ date: day.dateStr, events: day.events });
+      }
+    }
+  }
+
+  function goToPrevMonth() {
+    if (isAnimating || !canGoPrev) return;
+    triggerHaptic('light');
+    animateMonthChange(-1);
+  }
+
+  function goToNextMonth() {
+    if (isAnimating) return;
+    triggerHaptic('light');
+    animateMonthChange(1);
+  }
+
+  function goToToday() {
+    if (isAnimating || isAtCurrentMonth) return;
+
+    const todayYM = today.getFullYear() * 12 + today.getMonth();
+    const currentYM = currentYear * 12 + currentMonth;
+
+    const direction = todayYM > currentYM ? 1 : -1;
+    triggerHaptic('light');
+    animateMonthChange(direction, () => {
+      currentYear = today.getFullYear();
+      currentMonth = today.getMonth();
+    });
+  }
+
+  function animateMonthChange(direction, customAction = null) {
+    if (isAnimating || !calendarGridElement) return;
+
+    if (prefersReducedMotion) {
+      if (customAction) {
+        customAction();
+      } else if (direction > 0) {
+        if (currentMonth === 11) {
+          currentMonth = 0;
+          currentYear++;
+        } else {
+          currentMonth++;
+        }
+      } else {
+        if (currentMonth === 0) {
+          currentMonth = 11;
+          currentYear--;
+        } else {
+          currentMonth--;
+        }
+      }
+      triggerHaptic('medium');
+      onMonthChange?.({ year: currentYear, month: currentMonth });
+      return;
+    }
+
+    isAnimating = true;
+    const containerWidth = calendarGridElement.offsetWidth || 320;
+
+    const clone = calendarGridElement.cloneNode(true);
+    clone.classList.add('calendar-clone');
+    clone.style.position = 'absolute';
+    clone.style.top = '0';
+    clone.style.left = '0';
+    clone.style.width = '100%';
+    clone.style.transform = swipeOffset ? `translateX(${swipeOffset}px)` : 'translateX(0)';
+    clone.style.transition = 'none';
+    clone.style.pointerEvents = 'none';
+    clone.style.zIndex = '1';
+
+    const slideContainer = calendarGridElement.parentElement;
+    slideContainer.style.position = 'relative';
+    slideContainer.style.overflow = 'hidden';
+    slideContainer.insertBefore(clone, calendarGridElement);
+
+    if (customAction) {
+      customAction();
+    } else if (direction > 0) {
+      if (currentMonth === 11) {
+        currentMonth = 0;
+        currentYear++;
+      } else {
+        currentMonth++;
+      }
+    } else {
+      if (currentMonth === 0) {
+        currentMonth = 11;
+        currentYear--;
+      } else {
+        currentMonth--;
+      }
+    }
+
+    triggerHaptic('medium');
+    onMonthChange?.({ year: currentYear, month: currentMonth });
+
+    const enterFrom = direction > 0 ? containerWidth : -containerWidth;
+    calendarGridElement.style.transition = 'none';
+    calendarGridElement.style.transform = `translateX(${enterFrom}px)`;
+    calendarGridElement.offsetHeight;
+
+    const duration = 0.3;
+    const easing = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+
+    clone.style.transition = `transform ${duration}s ${easing}`;
+    clone.style.transform = `translateX(${direction > 0 ? -containerWidth : containerWidth}px)`;
+
+    calendarGridElement.style.transition = `transform ${duration}s ${easing}`;
+    calendarGridElement.style.transform = 'translateX(0)';
+
+    if (monthDisplayEl) {
+      monthDisplayEl.style.transition = 'none';
+      monthDisplayEl.style.transform = `translateX(${enterFrom * 0.3}px)`;
+      monthDisplayEl.style.opacity = '0';
+      monthDisplayEl.offsetHeight;
+      monthDisplayEl.style.transition = `transform ${duration}s ${easing}, opacity ${duration}s ${easing}`;
+      monthDisplayEl.style.transform = 'translateX(0)';
+      monthDisplayEl.style.opacity = '1';
+    }
+
+    setTimeout(() => {
+      if (clone.parentElement) clone.remove();
+      if (calendarGridElement) {
+        calendarGridElement.style.transition = '';
+        calendarGridElement.style.transform = '';
+      }
+      if (monthDisplayEl) {
+        monthDisplayEl.style.transition = '';
+        monthDisplayEl.style.transform = '';
+        monthDisplayEl.style.opacity = '';
+      }
+      isAnimating = false;
+      swipeOffset = 0;
+    }, duration * 1000 + 50);
+  }
+
+  function handleTouchStart(e) {
+    if (isAnimating) return;
+
+    touchStartX = e.touches[0].clientX;
+    touchStartY = e.touches[0].clientY;
+    touchStartTime = Date.now();
+    lastTouchX = touchStartX;
+    lastTouchTime = touchStartTime;
+    velocityX = 0;
+    isSwiping = false;
+    isDragging = false;
+    swipeOffset = 0;
+  }
+
+  function handleTouchMove(e) {
+    if (!touchStartX || isAnimating) return;
+
+    const touchCurrentX = e.touches[0].clientX;
+    const touchCurrentY = e.touches[0].clientY;
+    const diffX = touchStartX - touchCurrentX;
+    const diffY = touchStartY - touchCurrentY;
+    const now = Date.now();
+
+    if (!isSwiping && Math.abs(diffX) > 10) {
+      if (Math.abs(diffX) > Math.abs(diffY)) {
+        isSwiping = true;
+      } else {
+        touchStartX = 0;
+        return;
+      }
+    }
+
+    if (isSwiping) {
+      e.preventDefault();
+
+      const dt = now - lastTouchTime;
+      if (dt > 0) {
+        velocityX = (lastTouchX - touchCurrentX) / dt;
+      }
+      lastTouchX = touchCurrentX;
+      lastTouchTime = now;
+
+      swipeOffset = -diffX * DRAG_RESISTANCE;
+
+      if (calendarGridElement) {
+        calendarGridElement.style.transform = `translateX(${swipeOffset}px)`;
+        calendarGridElement.style.transition = 'none';
+
+        const shadowIntensity = Math.min(Math.abs(swipeOffset) / 80, 0.4);
+        const blurRadius = 12 + shadowIntensity * 24;
+        const spreadRadius = shadowIntensity * 4;
+
+        if (diffX > 0) {
+          calendarGridElement.style.boxShadow = `-${spreadRadius}px 0 ${blurRadius}px ${SWIPE_SHADOW_COLOR}${shadowIntensity})`;
+        } else {
+          calendarGridElement.style.boxShadow = `${spreadRadius}px 0 ${blurRadius}px ${SWIPE_SHADOW_COLOR}${shadowIntensity})`;
+        }
+      }
+    }
+  }
+
+  function handleTouchEnd() {
+    if (!touchStartX || !isSwiping || isAnimating) {
+      touchStartX = 0;
+      touchStartY = 0;
+      isSwiping = false;
+      return;
+    }
+
+    const containerWidth = calendarGridElement?.offsetWidth || 320;
+    const swipePercent = Math.abs(swipeOffset) / containerWidth;
+    const shouldChange = swipePercent > SWIPE_THRESHOLD || Math.abs(velocityX) > VELOCITY_THRESHOLD;
+    const direction = swipeOffset > 0 ? -1 : 1;
+
+    if (calendarGridElement) {
+      calendarGridElement.style.boxShadow = '';
+    }
+
+    if (shouldChange) {
+      animateMonthChange(direction);
+    } else {
+      if (calendarGridElement) {
+        calendarGridElement.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+        calendarGridElement.style.transform = 'translateX(0)';
+
+        setTimeout(() => {
+          if (calendarGridElement) {
+            calendarGridElement.style.transition = '';
+            calendarGridElement.style.transform = '';
+          }
+        }, 300);
+      }
+    }
+
+    touchStartX = 0;
+    touchStartY = 0;
+    isSwiping = false;
+    swipeOffset = 0;
+    velocityX = 0;
+  }
+
+  function handleMouseDown(e) {
+    if (isAnimating || e.button !== 0) return;
+
+    isDragging = false;
+    touchStartX = e.clientX;
+    touchStartY = e.clientY;
+    touchStartTime = Date.now();
+    lastTouchX = touchStartX;
+    lastTouchTime = touchStartTime;
+    velocityX = 0;
+    isSwiping = false;
+    swipeOffset = 0;
+
+    e.preventDefault();
+  }
+
+  function handleMouseMove(e) {
+    if (!touchStartX || isAnimating) return;
+
+    const mouseCurrentX = e.clientX;
+    const mouseCurrentY = e.clientY;
+    const diffX = touchStartX - mouseCurrentX;
+    const diffY = touchStartY - mouseCurrentY;
+    const now = Date.now();
+
+    if (!isDragging && Math.abs(diffX) > 5) {
+      isDragging = true;
+    }
+
+    if (!isSwiping && Math.abs(diffX) > 10) {
+      if (Math.abs(diffX) > Math.abs(diffY)) {
+        isSwiping = true;
+      } else {
+        touchStartX = 0;
+        return;
+      }
+    }
+
+    if (isSwiping) {
+      const dt = now - lastTouchTime;
+      if (dt > 0) {
+        velocityX = (lastTouchX - mouseCurrentX) / dt;
+      }
+      lastTouchX = mouseCurrentX;
+      lastTouchTime = now;
+
+      swipeOffset = -diffX * DRAG_RESISTANCE;
+
+      if (calendarGridElement) {
+        calendarGridElement.style.transform = `translateX(${swipeOffset}px)`;
+        calendarGridElement.style.transition = 'none';
+
+        const shadowIntensity = Math.min(Math.abs(swipeOffset) / 80, 0.4);
+        const blurRadius = 12 + shadowIntensity * 24;
+        const spreadRadius = shadowIntensity * 4;
+
+        if (diffX > 0) {
+          calendarGridElement.style.boxShadow = `-${spreadRadius}px 0 ${blurRadius}px ${SWIPE_SHADOW_COLOR}${shadowIntensity})`;
+        } else {
+          calendarGridElement.style.boxShadow = `${spreadRadius}px 0 ${blurRadius}px ${SWIPE_SHADOW_COLOR}${shadowIntensity})`;
+        }
+      }
+    }
+  }
+
+  function handleMouseUp() {
+    if (!touchStartX || isAnimating) {
+      touchStartX = 0;
+      touchStartY = 0;
+      isDragging = false;
+      return;
+    }
+
+    if (!isSwiping) {
+      touchStartX = 0;
+      touchStartY = 0;
+      isDragging = false;
+      return;
+    }
+
+    const containerWidth = calendarGridElement?.offsetWidth || 320;
+    const swipePercent = Math.abs(swipeOffset) / containerWidth;
+    const shouldChange = swipePercent > SWIPE_THRESHOLD || Math.abs(velocityX) > VELOCITY_THRESHOLD;
+    const direction = swipeOffset > 0 ? -1 : 1;
+
+    if (calendarGridElement) {
+      calendarGridElement.style.boxShadow = '';
+    }
+
+    if (shouldChange) {
+      animateMonthChange(direction);
+    } else {
+      if (calendarGridElement) {
+        calendarGridElement.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+        calendarGridElement.style.transform = 'translateX(0)';
+
+        setTimeout(() => {
+          if (calendarGridElement) {
+            calendarGridElement.style.transition = '';
+            calendarGridElement.style.transform = '';
+          }
+        }, 300);
+      }
+    }
+
+    touchStartX = 0;
+    touchStartY = 0;
+    isSwiping = false;
+    swipeOffset = 0;
+    velocityX = 0;
+    isDragging = false;
+  }
+
+  function handleMouseLeave() {
+    if (isSwiping) {
+      handleMouseUp();
+    }
+  }
+
+  function handleDayKeydown(event, day) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleDayClick(day);
+    }
+  }
+
+  function getDayAriaLabel(day) {
+    const isoStr = new Date(currentYear, currentMonth, day.day).toISOString();
+    const dayOfWeek = formatDayOfWeek(isoStr, 'UTC', false);
+    const month = formatMonth(isoStr, 'UTC', false);
+    const dateStr = `${dayOfWeek}, ${month} ${day.day}, ${currentYear}`;
+
+    let label = dateStr;
+    if (day.isToday) label += `, ${labels.todayLabel}`;
+    if (variant === 'availability') {
+      label += day.isSelected ? `, ${labels.available}` : `, ${labels.notAvailable}`;
+      if (!day.isPast) label += `. ${labels.pressEnterToToggle}`;
+    } else if (day.hasEvents) {
+      const count = day.events.length;
+      label += `, ${count} ${count > 1 ? labels.eventPlural : labels.eventSingular}. ${labels.pressEnterToView}`;
+    }
+    return label;
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="w-full max-w-full mx-auto select-none"
+  class:max-w-xs={variant === 'display'}
+  ontouchstart={handleTouchStart}
+  ontouchmove={handleTouchMove}
+  ontouchend={handleTouchEnd}
+  onmousedown={handleMouseDown}
+  onmousemove={handleMouseMove}
+  onmouseup={handleMouseUp}
+  onmouseleave={handleMouseLeave}
+>
+  {#if showNavigation}
+    <header class="flex items-center justify-between mb-4 select-none">
+      <div class="flex items-center gap-2" bind:this={monthDisplayEl}>
+        <h2 class={typography.h2}>{MONTH_NAMES[currentMonth]}</h2>
+        {#if saveStatus && variant === 'availability'}
+          <span class="flex items-center justify-center ml-1">
+            {#if saveStatus === 'saving'}
+              <Spinner size="sm" color="secondary" />
+            {:else if saveStatus === 'saved'}
+              <span class="flex items-center justify-center text-green-600">
+                <CheckCircleSolid class="w-5 h-5" />
+              </span>
+            {/if}
+          </span>
+        {/if}
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          class="p-2 flex items-center justify-center border-0 rounded-lg bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-all duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+          class:scale-90={prevPressed}
+          class:bg-gray-100={prevPressed}
+          class:dark:bg-gray-700={prevPressed}
+          onclick={goToPrevMonth}
+          ontouchstart={() => prevPressed = true}
+          ontouchend={() => prevPressed = false}
+          ontouchcancel={() => prevPressed = false}
+          onmousedown={() => prevPressed = true}
+          onmouseup={() => prevPressed = false}
+          onmouseleave={() => prevPressed = false}
+          disabled={!canGoPrev}
+          aria-label={labels.previousMonth}
+        >
+          <ChevronLeftOutline class="w-5 h-5" />
+        </button>
+
+        {#if showTodayButton}
+          <button
+            class="text-sm font-medium px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-transparent text-gray-900 dark:text-white cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-blue-700 hover:text-white hover:border-blue-700 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed"
+            class:scale-95={todayPressed}
+            class:bg-blue-700={todayPressed}
+            class:text-white={todayPressed}
+            onclick={goToToday}
+            ontouchstart={() => todayPressed = true}
+            ontouchend={() => todayPressed = false}
+            ontouchcancel={() => todayPressed = false}
+            onmousedown={() => todayPressed = true}
+            onmouseup={() => todayPressed = false}
+            onmouseleave={() => todayPressed = false}
+            disabled={isAtCurrentMonth}
+            aria-label={labels.goToCurrentMonth}
+          >
+            {labels.today}
+          </button>
+        {/if}
+
+        <button
+          class="p-2 flex items-center justify-center border-0 rounded-lg bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-all duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
+          class:scale-90={nextPressed}
+          class:bg-gray-100={nextPressed}
+          class:dark:bg-gray-700={nextPressed}
+          onclick={goToNextMonth}
+          ontouchstart={() => nextPressed = true}
+          ontouchend={() => nextPressed = false}
+          ontouchcancel={() => nextPressed = false}
+          onmousedown={() => nextPressed = true}
+          onmouseup={() => nextPressed = false}
+          onmouseleave={() => nextPressed = false}
+          aria-label={labels.nextMonth}
+        >
+          <ChevronRightOutline class="w-5 h-5" />
+        </button>
+      </div>
+    </header>
+  {/if}
+
+  <div class="relative overflow-hidden">
+    <div
+      bind:this={calendarGridElement}
+      class="grid grid-cols-7 gap-0 bg-white dark:bg-gray-800 select-none min-h-[356px] sm:min-h-[388px] md:min-h-[448px] lg:min-h-[508px]"
+      role="grid"
+      aria-label="{MONTH_NAMES[currentMonth]} {currentYear}"
+    >
+      {#each DAY_NAMES as dayName, i}
+        <div
+          class="flex items-end justify-center pb-1 {typography.xsMuted} overflow-hidden leading-none sm:pb-2 sm:pt-1 sm:justify-end sm:pr-2 sm:text-lg sm:text-gray-900 sm:dark:text-white sm:border-b sm:border-gray-200 sm:dark:border-gray-700"
+          role="columnheader"
+          aria-label={labels.fullDayNames[i]}
+        >
+          <span class="sm:hidden">{DAY_LETTERS[i]}</span>
+          <span class="hidden sm:block">{dayName}</span>
+        </div>
+      {/each}
+
+      {#each prevMonthPreviewDays as previewDay}
+        <div class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] pointer-events-none bg-transparent border-b border-gray-200 dark:border-gray-700 sm:border-b-0 sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700 last:sm:border-r" role="gridcell" aria-disabled="true">
+          <span class="{typography.sm} text-gray-300 dark:text-gray-600 w-full text-center sm:text-lg sm:font-normal sm:text-right sm:mb-2">{previewDay.day}</span>
+        </div>
+      {/each}
+
+      {#each daysInMonth as day (day.dateStr)}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] select-none
+            border-b border-gray-200 dark:border-gray-700
+            sm:border-b-0 sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700
+            {day.isPast && variant === 'availability' ? 'bg-gray-100 dark:bg-gray-700 cursor-default' : ''}
+            {day.isPast && day.isSelected && variant === 'availability' ? 'bg-blue-100 dark:bg-blue-900/30 cursor-default' : ''}
+            {day.isSelected && !day.isPast && variant === 'availability' ? 'bg-blue-700 dark:bg-blue-600' : ''}
+            {!readOnly && (variant === 'availability' ? !day.isPast : day.hasEvents) ? 'cursor-pointer' : ''}
+            {variant !== 'availability' && day.hasEvents ? 'bg-blue-50 dark:bg-blue-900/20 sm:bg-transparent sm:dark:bg-transparent' : ''}"
+          class:last:border-r={true}
+          role="gridcell"
+          aria-label={getDayAriaLabel(day)}
+          aria-selected={day.isSelected}
+          aria-disabled={variant === 'availability' ? day.isPast : !day.hasEvents}
+          tabindex={(!readOnly && (variant === 'availability' ? !day.isPast : day.hasEvents)) ? 0 : -1}
+          onclick={() => handleDayClick(day)}
+          ontouchend={(e) => { e.preventDefault(); handleDayTap(e, day); }}
+          onkeydown={(e) => handleDayKeydown(e, day)}
+        >
+          <span class="{typography.sm} w-full text-center transition-transform duration-100 ease-out sm:text-lg sm:font-normal sm:text-right sm:mb-2
+            {day.isPast ? 'text-gray-400 dark:text-gray-500' : ''}
+            {day.isSelected && !day.isPast && variant === 'availability' ? 'text-white font-semibold' : ''}">{day.day}</span>
+          {#if variant !== 'availability' && day.hasEvents}
+            <div class="flex gap-0.5 mt-0.5">
+              {#each day.events.slice(0, 3) as _}
+                <span class="w-1.5 h-1.5 rounded-full bg-blue-600 dark:bg-blue-500 transition-transform duration-150 ease-out hover:scale-125"></span>
+              {/each}
+            </div>
+          {/if}
+        </div>
+      {/each}
+
+      {#each nextMonthPreviewDays as previewDay}
+        <div class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] pointer-events-none bg-transparent border-b border-gray-200 dark:border-gray-700 sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700 last:sm:border-r" role="gridcell" aria-disabled="true">
+          <span class="{typography.sm} text-gray-300 dark:text-gray-600 w-full text-center sm:text-lg sm:font-normal sm:text-right sm:mb-2">{previewDay.day}</span>
+        </div>
+      {/each}
+    </div>
+  </div>
+
+  {#if showLegend && variant === 'availability'}
+    <div class="flex items-center justify-center gap-6 pt-4">
+      <div class="flex items-center gap-2">
+        <span class="w-5 h-5 rounded bg-blue-700 dark:bg-blue-600 border border-blue-700 dark:border-blue-600"></span>
+        <span class="{typography.sm}">{labels.legendAvailable}</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="w-5 h-5 rounded bg-gray-50 dark:bg-gray-700 border-2 border-gray-400 dark:border-gray-500"></span>
+        <span class="{typography.sm}">{labels.legendUnavailable}</span>
+      </div>
+    </div>
+  {/if}
+</div>