@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/calendar/MonthSwitcher/MonthSwitcher.spec.js

@@ -0,0 +1,420 @@
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import { expect, describe, test, vi, beforeEach } from 'vitest';
+import MonthSwitcher from './MonthSwitcher.svelte';
+
+describe('MonthSwitcher Component', () => {
+  test('renders a header element', () => {
+    const { container } = render(MonthSwitcher);
+    expect(container.querySelector('header')).toBeInTheDocument();
+  });
+
+  test('renders the month name', () => {
+    const { container } = render(MonthSwitcher, {
+      props: { currentMonth: 0, currentYear: 2024 }
+    });
+    expect(screen.getByText('January')).toBeInTheDocument();
+  });
+
+  test('renders three navigation buttons', () => {
+    const { container } = render(MonthSwitcher);
+    const buttons = container.querySelectorAll('button');
+    expect(buttons.length).toBe(3);
+  });
+
+  test('has Today button', () => {
+    render(MonthSwitcher);
+    expect(screen.getByText('Today')).toBeInTheDocument();
+  });
+});
+
+describe('MonthSwitcher Accessibility', () => {
+  test('prev button has aria-label', () => {
+    const { container } = render(MonthSwitcher);
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    expect(prevButton).toBeInTheDocument();
+  });
+
+  test('next button has aria-label', () => {
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    expect(nextButton).toBeInTheDocument();
+  });
+
+  test('today button has aria-label', () => {
+    const { container } = render(MonthSwitcher);
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    expect(todayButton).toBeInTheDocument();
+  });
+});
+
+describe('MonthSwitcher Month Display', () => {
+  test('displays February correctly', () => {
+    render(MonthSwitcher, {
+      props: { currentMonth: 1, currentYear: 2024 }
+    });
+    expect(screen.getByText('February')).toBeInTheDocument();
+  });
+
+  test('displays December correctly', () => {
+    render(MonthSwitcher, {
+      props: { currentMonth: 11, currentYear: 2024 }
+    });
+    expect(screen.getByText('December')).toBeInTheDocument();
+  });
+
+  test('displays June correctly', () => {
+    render(MonthSwitcher, {
+      props: { currentMonth: 5, currentYear: 2024 }
+    });
+    expect(screen.getByText('June')).toBeInTheDocument();
+  });
+});
+
+describe('MonthSwitcher Navigation Callbacks', () => {
+  test('calls handleNext when next button clicked', async () => {
+    const handleNext = vi.fn();
+    const { container } = render(MonthSwitcher, {
+      props: { handleNext }
+    });
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.click(nextButton);
+    expect(handleNext).toHaveBeenCalled();
+  });
+
+  test('calls handlePrev when prev button clicked', async () => {
+    const handlePrev = vi.fn();
+    const { container } = render(MonthSwitcher, {
+      props: {
+        handlePrev,
+        disablePastNavigation: false
+      }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    await fireEvent.click(prevButton);
+    expect(handlePrev).toHaveBeenCalled();
+  });
+
+  test('calls handleToday when today button clicked', async () => {
+    const handleToday = vi.fn();
+    const { container } = render(MonthSwitcher, {
+      props: {
+        handleToday,
+        currentMonth: 0,
+        currentYear: 2020
+      }
+    });
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    await fireEvent.click(todayButton);
+    expect(handleToday).toHaveBeenCalled();
+  });
+});
+
+describe('MonthSwitcher Disable Past Navigation', () => {
+  test('prev button disabled at current month by default', () => {
+    const today = new Date();
+    const { container } = render(MonthSwitcher, {
+      props: {
+        currentMonth: today.getMonth(),
+        currentYear: today.getFullYear(),
+        disablePastNavigation: true
+      }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    expect(prevButton).toBeDisabled();
+  });
+
+  test('prev button enabled when not at current month', () => {
+    const today = new Date();
+    const futureMonth = (today.getMonth() + 3) % 12;
+    const futureYear = today.getMonth() + 3 > 11 ? today.getFullYear() + 1 : today.getFullYear();
+    const { container } = render(MonthSwitcher, {
+      props: {
+        currentMonth: futureMonth,
+        currentYear: futureYear,
+        disablePastNavigation: true
+      }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    expect(prevButton).not.toBeDisabled();
+  });
+
+  test('prev button enabled when disablePastNavigation is false', () => {
+    const today = new Date();
+    const { container } = render(MonthSwitcher, {
+      props: {
+        currentMonth: today.getMonth(),
+        currentYear: today.getFullYear(),
+        disablePastNavigation: false
+      }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    expect(prevButton).not.toBeDisabled();
+  });
+
+  test('does not call handlePrev when disabled', async () => {
+    const handlePrev = vi.fn();
+    const today = new Date();
+    const { container } = render(MonthSwitcher, {
+      props: {
+        handlePrev,
+        currentMonth: today.getMonth(),
+        currentYear: today.getFullYear(),
+        disablePastNavigation: true
+      }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    await fireEvent.click(prevButton);
+    expect(handlePrev).not.toHaveBeenCalled();
+  });
+});
+
+describe('MonthSwitcher Today Button State', () => {
+  test('today button disabled at current month', () => {
+    const today = new Date();
+    const { container } = render(MonthSwitcher, {
+      props: {
+        currentMonth: today.getMonth(),
+        currentYear: today.getFullYear()
+      }
+    });
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    expect(todayButton).toBeDisabled();
+  });
+
+  test('today button enabled when not at current month', () => {
+    const { container } = render(MonthSwitcher, {
+      props: {
+        currentMonth: 0,
+        currentYear: 2020
+      }
+    });
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    expect(todayButton).not.toBeDisabled();
+  });
+});
+
+describe('MonthSwitcher Styling', () => {
+  test('header has flex layout', () => {
+    const { container } = render(MonthSwitcher);
+    const header = container.querySelector('header');
+    expect(header).toHaveClass('flex');
+    expect(header).toHaveClass('items-center');
+    expect(header).toHaveClass('justify-between');
+  });
+
+  test('navigation buttons container has flex and gap', () => {
+    const { container } = render(MonthSwitcher);
+    const buttonContainer = container.querySelector('.flex.items-center.gap-2');
+    expect(buttonContainer).toBeInTheDocument();
+  });
+});
+
+describe('MonthSwitcher Mouse Events', () => {
+  test('prev button responds to mousedown', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { disablePastNavigation: false }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    await fireEvent.mouseDown(prevButton);
+    // Button should have scale-90 class when pressed
+    expect(prevButton.className).toContain('scale-90');
+  });
+
+  test('prev button responds to mouseup', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { disablePastNavigation: false }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    await fireEvent.mouseDown(prevButton);
+    await fireEvent.mouseUp(prevButton);
+    // Button should not have scale-90 class after mouseup
+    expect(prevButton.className).not.toContain('scale-90');
+  });
+
+  test('prev button responds to mouseleave', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { disablePastNavigation: false }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    await fireEvent.mouseDown(prevButton);
+    await fireEvent.mouseLeave(prevButton);
+    expect(prevButton.className).not.toContain('scale-90');
+  });
+
+  test('next button responds to mousedown', async () => {
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.mouseDown(nextButton);
+    expect(nextButton.className).toContain('scale-90');
+  });
+
+  test('next button responds to mouseup', async () => {
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.mouseDown(nextButton);
+    await fireEvent.mouseUp(nextButton);
+    expect(nextButton.className).not.toContain('scale-90');
+  });
+
+  test('next button responds to mouseleave', async () => {
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.mouseDown(nextButton);
+    await fireEvent.mouseLeave(nextButton);
+    expect(nextButton.className).not.toContain('scale-90');
+  });
+
+  test('today button responds to mousedown', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { currentMonth: 0, currentYear: 2020 }
+    });
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    await fireEvent.mouseDown(todayButton);
+    expect(todayButton.className).toContain('scale-95');
+  });
+
+  test('today button responds to mouseup', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { currentMonth: 0, currentYear: 2020 }
+    });
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    await fireEvent.mouseDown(todayButton);
+    await fireEvent.mouseUp(todayButton);
+    expect(todayButton.className).not.toContain('scale-95');
+  });
+
+  test('today button responds to mouseleave', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { currentMonth: 0, currentYear: 2020 }
+    });
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    await fireEvent.mouseDown(todayButton);
+    await fireEvent.mouseLeave(todayButton);
+    expect(todayButton.className).not.toContain('scale-95');
+  });
+});
+
+describe('MonthSwitcher Touch Events', () => {
+  test('prev button responds to touchstart', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { disablePastNavigation: false }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    await fireEvent.touchStart(prevButton);
+    expect(prevButton.className).toContain('scale-90');
+  });
+
+  test('prev button responds to touchend', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { disablePastNavigation: false }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    await fireEvent.touchStart(prevButton);
+    await fireEvent.touchEnd(prevButton);
+    expect(prevButton.className).not.toContain('scale-90');
+  });
+
+  test('prev button responds to touchcancel', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { disablePastNavigation: false }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    await fireEvent.touchStart(prevButton);
+    await fireEvent.touchCancel(prevButton);
+    expect(prevButton.className).not.toContain('scale-90');
+  });
+
+  test('next button responds to touchstart', async () => {
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.touchStart(nextButton);
+    expect(nextButton.className).toContain('scale-90');
+  });
+
+  test('next button responds to touchend', async () => {
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.touchStart(nextButton);
+    await fireEvent.touchEnd(nextButton);
+    expect(nextButton.className).not.toContain('scale-90');
+  });
+
+  test('next button responds to touchcancel', async () => {
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.touchStart(nextButton);
+    await fireEvent.touchCancel(nextButton);
+    expect(nextButton.className).not.toContain('scale-90');
+  });
+
+  test('today button responds to touchstart', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { currentMonth: 0, currentYear: 2020 }
+    });
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    await fireEvent.touchStart(todayButton);
+    expect(todayButton.className).toContain('scale-95');
+  });
+
+  test('today button responds to touchend', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { currentMonth: 0, currentYear: 2020 }
+    });
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    await fireEvent.touchStart(todayButton);
+    await fireEvent.touchEnd(todayButton);
+    expect(todayButton.className).not.toContain('scale-95');
+  });
+
+  test('today button responds to touchcancel', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { currentMonth: 0, currentYear: 2020 }
+    });
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    await fireEvent.touchStart(todayButton);
+    await fireEvent.touchCancel(todayButton);
+    expect(todayButton.className).not.toContain('scale-95');
+  });
+});
+
+describe('MonthSwitcher Haptic Feedback', () => {
+  beforeEach(() => {
+    // Clean up window mocks
+    delete window.webkit;
+    delete window.TapticEngine;
+    if (navigator.vibrate) {
+      vi.spyOn(navigator, 'vibrate').mockImplementation(() => true);
+    }
+  });
+
+  test('triggers webkit haptic when available', async () => {
+    const postMessage = vi.fn();
+    window.webkit = {
+      messageHandlers: {
+        haptic: { postMessage }
+      }
+    };
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.click(nextButton);
+    expect(postMessage).toHaveBeenCalledWith('light');
+  });
+
+  test('triggers TapticEngine when available', async () => {
+    const impact = vi.fn();
+    window.TapticEngine = { impact };
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.click(nextButton);
+    expect(impact).toHaveBeenCalledWith({ style: 'light' });
+  });
+
+  test('triggers navigator.vibrate as fallback', async () => {
+    // Add vibrate to navigator if it doesn't exist
+    navigator.vibrate = vi.fn().mockReturnValue(true);
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.click(nextButton);
+    expect(navigator.vibrate).toHaveBeenCalledWith(10);
+  });
+});

package/dist/calendar/MonthSwitcher/MonthSwitcher.svelte

@@ -1,126 +1,126 @@
-<script>
-  import { ChevronLeftOutline, ChevronRightOutline } from '../../primitives/Icons';
-  import { typography } from '../../tokens/typography';
-
-  const today = new Date();
-  const todayLocalMonth = today.getMonth();
-  const todayLocalYear = today.getFullYear();
-
-  let {
-    currentYear = todayLocalYear,
-    currentMonth = todayLocalMonth,
-    handleNext = () => {},
-    handlePrev = () => {},
-    handleToday = () => {},
-    disablePastNavigation = true,
-  } = $props();
-
-  let isAtCurrentMonth = $derived(
-    currentYear === todayLocalYear && currentMonth === todayLocalMonth
-  );
-
-  let canGoPrev = $derived(!disablePastNavigation || !isAtCurrentMonth);
-
-  let prevPressed = $state(false);
-  let nextPressed = $state(false);
-  let todayPressed = $state(false);
-
-  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 handlePrevClick() {
-    if (canGoPrev) {
-      triggerHaptic('light');
-      handlePrev();
-    }
-  }
-
-  function handleNextClick() {
-    triggerHaptic('light');
-    handleNext();
-  }
-
-  function handleTodayClick() {
-    triggerHaptic('light');
-    handleToday();
-  }
-</script>
-
-<header class="w-full flex items-center justify-between select-none">
-  <h2 class="{typography.h1} text-3xl">
-    {new Intl.DateTimeFormat("en", {
-      month: "long",
-    }).format(new Date(currentYear, currentMonth, 1))}
-  </h2>
-  <div class="flex items-center gap-2">
-    <button
-      class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none 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}
-      class:text-gray-900={prevPressed}
-      class:dark:text-white={prevPressed}
-      onclick={handlePrevClick}
-      ontouchstart={() => prevPressed = true}
-      ontouchend={() => prevPressed = false}
-      ontouchcancel={() => prevPressed = false}
-      onmousedown={() => prevPressed = true}
-      onmouseup={() => prevPressed = false}
-      onmouseleave={() => prevPressed = false}
-      disabled={!canGoPrev}
-      aria-label="Previous month"
-    >
-      <ChevronLeftOutline class="w-5 h-5" />
-    </button>
-    <button
-      class="{`${typography.label} px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-transparent cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-blue-700 hover:text-white hover:border-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed disabled:text-gray-500 dark:disabled:text-gray-400`}"
-      class:scale-95={todayPressed}
-      class:bg-blue-700={todayPressed}
-      class:text-white={todayPressed}
-      onclick={handleTodayClick}
-      ontouchstart={() => todayPressed = true}
-      ontouchend={() => todayPressed = false}
-      ontouchcancel={() => todayPressed = false}
-      onmousedown={() => todayPressed = true}
-      onmouseup={() => todayPressed = false}
-      onmouseleave={() => todayPressed = false}
-      disabled={isAtCurrentMonth}
-      aria-label="Go to current month"
-    >
-      Today
-    </button>
-    <button
-      class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none 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}
-      class:text-gray-900={nextPressed}
-      class:dark:text-white={nextPressed}
-      onclick={handleNextClick}
-      ontouchstart={() => nextPressed = true}
-      ontouchend={() => nextPressed = false}
-      ontouchcancel={() => nextPressed = false}
-      onmousedown={() => nextPressed = true}
-      onmouseup={() => nextPressed = false}
-      onmouseleave={() => nextPressed = false}
-      aria-label="Next month"
-    >
-      <ChevronRightOutline class="w-5 h-5" />
-    </button>
-  </div>
-</header>
+<script>
+  import { ChevronLeftOutline, ChevronRightOutline } from '../../primitives/Icons';
+  import { typography } from '../../tokens/typography';
+
+  const today = new Date();
+  const todayLocalMonth = today.getMonth();
+  const todayLocalYear = today.getFullYear();
+
+  let {
+    currentYear = todayLocalYear,
+    currentMonth = todayLocalMonth,
+    handleNext = () => {},
+    handlePrev = () => {},
+    handleToday = () => {},
+    disablePastNavigation = true,
+  } = $props();
+
+  let isAtCurrentMonth = $derived(
+    currentYear === todayLocalYear && currentMonth === todayLocalMonth
+  );
+
+  let canGoPrev = $derived(!disablePastNavigation || !isAtCurrentMonth);
+
+  let prevPressed = $state(false);
+  let nextPressed = $state(false);
+  let todayPressed = $state(false);
+
+  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 handlePrevClick() {
+    if (canGoPrev) {
+      triggerHaptic('light');
+      handlePrev();
+    }
+  }
+
+  function handleNextClick() {
+    triggerHaptic('light');
+    handleNext();
+  }
+
+  function handleTodayClick() {
+    triggerHaptic('light');
+    handleToday();
+  }
+</script>
+
+<header class="w-full flex items-center justify-between select-none">
+  <h2 class="{typography.h1} text-3xl">
+    {new Intl.DateTimeFormat("en", {
+      month: "long",
+    }).format(new Date(currentYear, currentMonth, 1))}
+  </h2>
+  <div class="flex items-center gap-2">
+    <button
+      class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none 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}
+      class:text-gray-900={prevPressed}
+      class:dark:text-white={prevPressed}
+      onclick={handlePrevClick}
+      ontouchstart={() => prevPressed = true}
+      ontouchend={() => prevPressed = false}
+      ontouchcancel={() => prevPressed = false}
+      onmousedown={() => prevPressed = true}
+      onmouseup={() => prevPressed = false}
+      onmouseleave={() => prevPressed = false}
+      disabled={!canGoPrev}
+      aria-label="Previous month"
+    >
+      <ChevronLeftOutline class="w-5 h-5" />
+    </button>
+    <button
+      class="{`${typography.label} px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-transparent cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-blue-700 hover:text-white hover:border-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed disabled:text-gray-500 dark:disabled:text-gray-400`}"
+      class:scale-95={todayPressed}
+      class:bg-blue-700={todayPressed}
+      class:text-white={todayPressed}
+      onclick={handleTodayClick}
+      ontouchstart={() => todayPressed = true}
+      ontouchend={() => todayPressed = false}
+      ontouchcancel={() => todayPressed = false}
+      onmousedown={() => todayPressed = true}
+      onmouseup={() => todayPressed = false}
+      onmouseleave={() => todayPressed = false}
+      disabled={isAtCurrentMonth}
+      aria-label="Go to current month"
+    >
+      Today
+    </button>
+    <button
+      class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none 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}
+      class:text-gray-900={nextPressed}
+      class:dark:text-white={nextPressed}
+      onclick={handleNextClick}
+      ontouchstart={() => nextPressed = true}
+      ontouchend={() => nextPressed = false}
+      ontouchcancel={() => nextPressed = false}
+      onmousedown={() => nextPressed = true}
+      onmouseup={() => nextPressed = false}
+      onmouseleave={() => nextPressed = false}
+      aria-label="Next month"
+    >
+      <ChevronRightOutline class="w-5 h-5" />
+    </button>
+  </div>
+</header>

package/dist/calendar/OrderSummary/OrderSummary.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=OrderSummary.spec.d.ts.map

package/dist/calendar/OrderSummary/OrderSummary.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderSummary.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/OrderSummary/OrderSummary.spec.js"],"names":[],"mappings":""}