@makolabs/ripple 3.4.0 → 3.4.1

package/dist/forms/calendar/Calendar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tick } from 'svelte';
 	import { cn } from '../../helper/cls.js';
 	import { buildTestId } from '../../helper/testid.js';
 	import { Size } from '../../variants.js';
@@ -17,6 +18,7 @@
 		hideHeader = false,
 		disabled = false,
 		size = Size.MD,
+		scrollFlourish = 0.5,
 		class: className = '',
 		onselect,
 		testId
@@ -30,81 +32,96 @@
 		panel: string;
 		padding: string;
 		cell: string;
-		navBtn: string;
-		navIcon: string;
 		monthText: string;
 		dayHeaderText: string;
 		cellText: string;
+		// Height of the scrollable list — sized to exactly fit one
+		// month block (sticky month header + 6-row × 7-col day grid).
+		// All months pad to 42 slots so block height is constant, which
+		// means a single month fits perfectly at rest and scroll-snap
+		// can align month boundaries cleanly.
+		scrollH: string;
 	};
 	const calendarSize: Record<VariantSizes, CalendarDensity> = {
 		[Size.XS]: {
 			panel: 'w-48',
 			padding: 'p-2',
 			cell: 'size-6',
-			navBtn: 'size-5',
-			navIcon: 'size-3',
 			monthText: 'text-xs',
 			dayHeaderText: 'text-[9px]',
-			cellText: 'text-[10px]'
+			cellText: 'text-[10px]',
+			scrollH: 'h-[12rem]'
 		},
 		[Size.SM]: {
 			panel: 'w-56',
 			padding: 'p-2.5',
 			cell: 'size-7',
-			navBtn: 'size-6',
-			navIcon: 'size-3.5',
 			monthText: 'text-xs',
 			dayHeaderText: 'text-[10px]',
-			cellText: 'text-xs'
+			cellText: 'text-xs',
+			scrollH: 'h-[13.5rem]'
 		},
 		[Size.MD]: {
 			panel: 'w-64',
 			padding: 'p-3',
 			cell: 'size-8',
-			navBtn: 'size-7',
-			navIcon: 'size-4',
 			monthText: 'text-sm',
 			dayHeaderText: 'text-[10px]',
-			cellText: 'text-xs'
+			cellText: 'text-xs',
+			scrollH: 'h-[15rem]'
 		},
 		[Size.LG]: {
 			panel: 'w-72',
 			padding: 'p-3.5',
 			cell: 'size-9',
-			navBtn: 'size-8',
-			navIcon: 'size-4',
 			monthText: 'text-base',
 			dayHeaderText: 'text-xs',
-			cellText: 'text-sm'
+			cellText: 'text-sm',
+			scrollH: 'h-[17rem]'
 		},
 		[Size.XL]: {
 			panel: 'w-80',
 			padding: 'p-4',
 			cell: 'size-10',
-			navBtn: 'size-9',
-			navIcon: 'size-5',
 			monthText: 'text-lg',
 			dayHeaderText: 'text-xs',
-			cellText: 'text-sm'
+			cellText: 'text-sm',
+			scrollH: 'h-[19rem]'
 		},
 		// Form controls cap at xl — see `form-size.ts`.
 		[Size.XXL]: {
 			panel: 'w-80',
 			padding: 'p-4',
 			cell: 'size-10',
-			navBtn: 'size-9',
-			navIcon: 'size-5',
 			monthText: 'text-lg',
 			dayHeaderText: 'text-xs',
-			cellText: 'text-sm'
+			cellText: 'text-sm',
+			scrollH: 'h-[19rem]'
 		}
 	};
 	const density = $derived(calendarSize[size]);
 
-	const anchor = $derived(initialMonth ?? value ?? valueStart ?? new Date());
+	const MONTH_NAMES = [
+		'January',
+		'February',
+		'March',
+		'April',
+		'May',
+		'June',
+		'July',
+		'August',
+		'September',
+		'October',
+		'November',
+		'December'
+	] as const;
 
-	let viewYear = $state(anchor.getFullYear());
-	let viewMonth = $state(anchor.getMonth());
+	function atStartOfDay(d: Date): Date {
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const x = new Date(d);
+		x.setHours(0, 0, 0, 0);
+		return x;
+	}
 
 	function sameDay(a: Date | null | undefined, b: Date | null | undefined): boolean {
 		if (!a || !b) return false;
@@ -115,115 +132,296 @@
 		);
 	}
 
-	function atStartOfDay(d: Date): Date {
-		// Pure function over plain Date — no reactivity needed.
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const x = new Date(d);
-		x.setHours(0, 0, 0, 0);
-		return x;
-	}
-
-	function isOutOfBounds(date: Date): boolean {
-		if (minDate && date < atStartOfDay(minDate)) return true;
-		if (maxDate && date > atStartOfDay(maxDate)) return true;
+	function isOutOfBounds(d: Date): boolean {
+		if (minDate && d < atStartOfDay(minDate)) return true;
+		if (maxDate && d > atStartOfDay(maxDate)) return true;
 		return false;
 	}
 
-	function isInRange(date: Date): boolean {
+	function isInRange(d: Date): boolean {
 		if (mode !== 'range' || !valueStart) return false;
-		if (!valueEnd) return sameDay(date, valueStart);
-		return date >= atStartOfDay(valueStart) && date <= atStartOfDay(valueEnd);
+		if (!valueEnd) return sameDay(d, valueStart);
+		return d >= atStartOfDay(valueStart) && d <= atStartOfDay(valueEnd);
 	}
 
-	function isRangeEdge(date: Date): boolean {
+	function isRangeEdge(d: Date): boolean {
 		if (mode !== 'range') return false;
-		return sameDay(date, valueStart) || sameDay(date, valueEnd);
+		return sameDay(d, valueStart) || sameDay(d, valueEnd);
 	}
 
 	const today = $derived(atStartOfDay(new Date()));
 
-	const dayHeaders = $derived(() => {
+	const dayHeaders = $derived.by<readonly string[]>(() => {
 		const all = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 		return weekStartsOn === 1 ? [...all.slice(1), all[0]] : all;
 	});
 
-	type Cell = {
+	// Year-month index — flattens (year, month) into a single int so
+	// bound checks and lazy extension are arithmetic, not Date math.
+	function ym(d: Date): number {
+		return d.getFullYear() * 12 + d.getMonth();
+	}
+
+	const minYM = $derived(minDate ? ym(minDate) : null);
+	const maxYM = $derived(maxDate ? ym(maxDate) : null);
+
+	// Initial pad is 0 — we render only the anchor month synchronously.
+	// The IntersectionObserver below extends in both directions on first
+	// paint (sentinels are within rootMargin) so users see a populated
+	// list almost immediately. Test environments without IO see exactly
+	// one month, which keeps assertions like "42 day cells" meaningful.
+	const EXTEND_BY = 6;
+
+	// Compute the starting window synchronously from initial prop values
+	// so the first render shows the correct anchor month — using $effect
+	// for this would leave the first frame at year 0.
+	//
+	// scrollFlourish is a fractional month distance for the scroll-in
+	// animation, so we pre-render `ceil(flourish)` months back to give
+	// the partial-month travel something to scroll *from*. The exact
+	// scroll start position is computed in pixels in the mount effect.
+	function computeInitialRange(): { f: number; l: number } {
+		const a = initialMonth ?? value ?? valueStart ?? new Date();
+		const aYM = a.getFullYear() * 12 + a.getMonth();
+		const lo = minDate ? minDate.getFullYear() * 12 + minDate.getMonth() : null;
+		const hi = maxDate ? maxDate.getFullYear() * 12 + maxDate.getMonth() : null;
+		let f = aYM - Math.ceil(Math.max(0, scrollFlourish));
+		let l = aYM;
+		if (lo !== null) f = Math.max(f, lo);
+		if (hi !== null) l = Math.min(l, hi);
+		if (f > l) {
+			f = l = aYM;
+		}
+		return { f, l };
+	}
+	const _init = computeInitialRange();
+	let firstYM = $state<number>(_init.f);
+	let lastYM = $state<number>(_init.l);
+	let extending = false;
+
+	type DayCell = {
 		date: Date;
-		inMonth: boolean;
 		disabled: boolean;
 		isToday: boolean;
 		isSelected: boolean;
 		isRangeEdge: boolean;
 		isInRange: boolean;
 	};
+	// Slots are either real days or non-clickable blanks. Padding to
+	// 42 slots keeps every month the same physical height (6 rows × 7
+	// cols), which is what lets the scroll container fit exactly one
+	// month at rest. Spillover days from adjacent months are not
+	// rendered, so each calendar day appears exactly once across the
+	// whole list.
+	type GridSlot = { kind: 'day'; cell: DayCell } | { kind: 'blank' };
+	type MonthBlock = {
+		year: number;
+		month: number;
+		key: number;
+		label: string;
+		slots: GridSlot[];
+	};
 
-	const cells = $derived.by<Cell[]>(() => {
-		const first = new Date(viewYear, viewMonth, 1);
+	function buildMonth(year: number, month: number): MonthBlock {
+		const first = new Date(year, month, 1);
 		const offset = (first.getDay() - weekStartsOn + 7) % 7;
-		const start = new Date(viewYear, viewMonth, 1 - offset);
-		const out: Cell[] = [];
-		for (let i = 0; i < 42; i++) {
-			const d = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i);
-			out.push({
-				date: d,
-				inMonth: d.getMonth() === viewMonth,
-				disabled: disabled || isOutOfBounds(d),
-				isToday: sameDay(d, today),
-				isSelected: mode === 'single' ? sameDay(d, value ?? undefined) : isRangeEdge(d),
-				isRangeEdge: isRangeEdge(d),
-				isInRange: isInRange(d)
+		const daysInMonth = new Date(year, month + 1, 0).getDate();
+		const slots: GridSlot[] = [];
+		for (let i = 0; i < offset; i++) slots.push({ kind: 'blank' });
+		for (let day = 1; day <= daysInMonth; day++) {
+			const d = new Date(year, month, day);
+			slots.push({
+				kind: 'day',
+				cell: {
+					date: d,
+					disabled: disabled || isOutOfBounds(d),
+					isToday: sameDay(d, today),
+					isSelected: mode === 'single' ? sameDay(d, value) : isRangeEdge(d),
+					isRangeEdge: isRangeEdge(d),
+					isInRange: isInRange(d)
+				}
 			});
 		}
-		return out;
-	});
-
-	const monthLabel = $derived(
-		new Date(viewYear, viewMonth, 1).toLocaleDateString(undefined, {
-			month: 'long',
-			year: 'numeric'
-		})
-	);
-
-	function prevMonth() {
-		if (viewMonth === 0) {
-			viewMonth = 11;
-			viewYear -= 1;
-		} else {
-			viewMonth -= 1;
-		}
+		while (slots.length < 42) slots.push({ kind: 'blank' });
+		return {
+			year,
+			month,
+			key: year * 12 + month,
+			label: `${MONTH_NAMES[month]} ${year}`,
+			slots
+		};
 	}
 
-	function nextMonth() {
-		if (viewMonth === 11) {
-			viewMonth = 0;
-			viewYear += 1;
-		} else {
-			viewMonth += 1;
+	const months = $derived.by<MonthBlock[]>(() => {
+		const out: MonthBlock[] = [];
+		for (let i = firstYM; i <= lastYM; i++) {
+			const y = Math.floor(i / 12);
+			const m = ((i % 12) + 12) % 12;
+			out.push(buildMonth(y, m));
 		}
-	}
+		return out;
+	});
 
-	function pick(date: Date, cellDisabled: boolean) {
-		if (cellDisabled) return;
+	function pick(cell: DayCell) {
+		if (cell.disabled) return;
 		if (mode === 'single') {
-			value = date;
-			onselect?.(date);
+			value = cell.date;
+			onselect?.(cell.date);
 			return;
 		}
-		// range
 		if (!valueStart || (valueStart && valueEnd)) {
-			valueStart = date;
+			valueStart = cell.date;
 			valueEnd = null;
-			onselect?.({ from: date, to: null });
+			onselect?.({ from: cell.date, to: null });
 		} else {
-			if (date < valueStart) {
+			if (cell.date < valueStart) {
 				valueEnd = valueStart;
-				valueStart = date;
+				valueStart = cell.date;
 			} else {
-				valueEnd = date;
+				valueEnd = cell.date;
 			}
 			onselect?.({ from: valueStart, to: valueEnd });
 		}
 	}
+
+	let listEl = $state<HTMLDivElement | undefined>();
+	let topSentinelEl = $state<HTMLDivElement | undefined>();
+	let bottomSentinelEl = $state<HTMLDivElement | undefined>();
+
+	// Duration of the open-time scroll-in flourish. Slow enough to read
+	// as a deliberate UI flourish rather than a snap.
+	const FLOURISH_DURATION_MS = 750;
+
+	// Cubic ease-out — fast at the start, eases into the resting frame.
+	function easeOutCubic(t: number): number {
+		return 1 - Math.pow(1 - t, 3);
+	}
+
+	// Manual rAF-driven scroll animation. We don't use scrollIntoView +
+	// CSS scroll-smooth because that ties duration to browser defaults
+	// (typically too quick). `behavior: 'auto'` per frame bypasses any
+	// inherited scroll-smooth so the rAF cadence is what drives motion.
+	function smoothScrollTo(el: HTMLElement, targetTop: number, duration: number): void {
+		const startTop = el.scrollTop;
+		const distance = targetTop - startTop;
+		if (Math.abs(distance) < 1) return;
+		const startTime = performance.now();
+		function frame(now: number) {
+			const elapsed = now - startTime;
+			const t = Math.min(elapsed / duration, 1);
+			el.scrollTo({ top: startTop + distance * easeOutCubic(t), behavior: 'auto' });
+			if (t < 1) requestAnimationFrame(frame);
+		}
+		requestAnimationFrame(frame);
+	}
+
+	async function extendBackward() {
+		if (extending) return;
+		if (minYM !== null && firstYM <= minYM) return;
+		const el = listEl;
+		if (!el) return;
+		extending = true;
+		const prevHeight = el.scrollHeight;
+		const prevTop = el.scrollTop;
+		let next = firstYM - EXTEND_BY;
+		if (minYM !== null && next < minYM) next = minYM;
+		firstYM = next;
+		// Wait for the new month grids to render, then preserve the
+		// user's visual scroll position by adding the height delta.
+		// `behavior: 'auto'` is explicit so this restoration is instant
+		// even when CSS scroll-smooth is in play.
+		await tick();
+		const newHeight = el.scrollHeight;
+		el.scrollTo({ top: prevTop + (newHeight - prevHeight), behavior: 'auto' });
+		extending = false;
+	}
+
+	async function extendForward() {
+		if (extending) return;
+		if (maxYM !== null && lastYM >= maxYM) return;
+		extending = true;
+		let next = lastYM + EXTEND_BY;
+		if (maxYM !== null && next > maxYM) next = maxYM;
+		lastYM = next;
+		await tick();
+		extending = false;
+	}
+
+	// Wire IntersectionObserver to the sentinels. Skipped where IO isn't
+	// available (SSR / jsdom tests) — the anchor month still renders,
+	// just without lazy extension.
+	//
+	// When scrollFlourish > 0 we delay IO attachment slightly past the
+	// scroll-in animation duration. Otherwise the top sentinel — which
+	// starts visible at scrollTop=0 — would fire extendBackward as the
+	// flourish animation runs, mutating scrollTop mid-animation and
+	// causing visible jitter.
+	$effect(() => {
+		if (typeof IntersectionObserver === 'undefined') return;
+		const root = listEl;
+		const top = topSentinelEl;
+		const bottom = bottomSentinelEl;
+		if (!root || !top || !bottom) return;
+		let io: IntersectionObserver | undefined;
+		const setup = () => {
+			io = new IntersectionObserver(
+				(entries) => {
+					for (const entry of entries) {
+						if (!entry.isIntersecting) continue;
+						if (entry.target === top) extendBackward();
+						else if (entry.target === bottom) extendForward();
+					}
+				},
+				{ root, rootMargin: '200px 0px' }
+			);
+			io.observe(top);
+			io.observe(bottom);
+		};
+		const delayMs = scrollFlourish > 0 ? FLOURISH_DURATION_MS + 50 : 0;
+		const timer = setTimeout(setup, delayMs);
+		return () => {
+			clearTimeout(timer);
+			io?.disconnect();
+		};
+	});
+
+	// Animate the selected (or today) month into view on first paint.
+	// Runs once per mount — Calendar is re-mounted each time DatePicker's
+	// popover opens because popover content is conditionally rendered.
+	let didInitialScroll = false;
+	$effect(() => {
+		if (didInitialScroll) return;
+		if (!listEl) return;
+		didInitialScroll = true;
+		requestAnimationFrame(() => {
+			const root = listEl;
+			if (!root) return;
+			const target =
+				root.querySelector('[data-selected="true"]') ?? root.querySelector('[data-today="true"]');
+			if (!target) return;
+			// Scroll the containing month block — not the day cell — so
+			// the sticky month header lands at the top of the viewport
+			// and the full month is visible at rest.
+			const monthBlock = (target as HTMLElement).closest('[data-month-key]') as HTMLElement | null;
+			if (!monthBlock) return;
+			const targetTop = monthBlock.offsetTop;
+			// jsdom doesn't implement scrollTo — guard so unit tests don't
+			// surface unhandled errors.
+			if (typeof root.scrollTo !== 'function') return;
+			if (scrollFlourish > 0) {
+				// Position the scroll partway into the back-padded months
+				// (fractional distance) and animate from there into the
+				// anchor — gives a 1.5-month-style flourish without
+				// requiring a whole extra month of pre-render.
+				const monthH = monthBlock.offsetHeight;
+				const startTop = Math.max(0, targetTop - scrollFlourish * monthH);
+				root.scrollTo({ top: startTop, behavior: 'auto' });
+				smoothScrollTo(root, targetTop, FLOURISH_DURATION_MS);
+			} else {
+				root.scrollTo({ top: targetTop, behavior: 'auto' });
+			}
+		});
+	});
 </script>
 
 <div
@@ -237,87 +435,94 @@
 	data-testid={buildTestId('calendar', undefined, testId)}
 >
 	{#if !hideHeader}
-		<div class="mb-2 flex items-center justify-between">
-			<button
-				type="button"
-				onclick={prevMonth}
-				class={cn(
-					'text-default-500 hover:bg-default-100 hover:text-default-800 flex cursor-pointer items-center justify-center rounded',
-					density.navBtn
-				)}
-				aria-label="Previous month"
-				data-testid={buildTestId('calendar', 'prev-month', testId)}
-				{disabled}
-			>
-				<svg class={density.navIcon} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-					<path
-						fill-rule="evenodd"
-						d="M12.78 5.22a.75.75 0 0 1 0 1.06L9.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0z"
-						clip-rule="evenodd"
-					/>
-				</svg>
-			</button>
-			<span
-				class={cn('text-default-800 font-semibold', density.monthText)}
-				data-testid={buildTestId('calendar', 'month-label', testId)}>{monthLabel}</span
-			>
-			<button
-				type="button"
-				onclick={nextMonth}
-				class={cn(
-					'text-default-500 hover:bg-default-100 hover:text-default-800 flex cursor-pointer items-center justify-center rounded',
-					density.navBtn
-				)}
-				aria-label="Next month"
-				data-testid={buildTestId('calendar', 'next-month', testId)}
-				{disabled}
-			>
-				<svg class={density.navIcon} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-					<path
-						fill-rule="evenodd"
-						d="M7.22 14.78a.75.75 0 0 1 0-1.06L10.94 10 7.22 6.28a.75.75 0 0 1 1.06-1.06l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0z"
-						clip-rule="evenodd"
-					/>
-				</svg>
-			</button>
+		<div
+			class={cn(
+				'text-default-400 mb-1 grid grid-cols-7 gap-0.5 text-center font-medium',
+				density.dayHeaderText
+			)}
+			data-testid={buildTestId('calendar', 'day-headers', testId)}
+		>
+			{#each dayHeaders as d (d)}
+				<div>{d}</div>
+			{/each}
 		</div>
 	{/if}
 
 	<div
+		bind:this={listEl}
 		class={cn(
-			'text-default-400 mb-1 grid grid-cols-7 gap-0.5 text-center font-medium',
-			density.dayHeaderText
+			// No scroll-snap: once the user starts scrolling, they should
+			// glide smoothly across month boundaries. The open-time
+			// flourish still lands cleanly because that's a programmatic
+			// scroll to a specific offset, not a snap.
+			'overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+			density.scrollH
 		)}
-		data-testid={buildTestId('calendar', 'day-headers', testId)}
+		data-testid={buildTestId('calendar', 'scroll', testId)}
 	>
-		{#each dayHeaders() as d (d)}
-			<div>{d}</div>
-		{/each}
-	</div>
-
-	<div class="grid grid-cols-7 gap-0.5" role="grid">
-		{#each cells as cell (cell.date.toISOString())}
-			<button
-				type="button"
-				onclick={() => pick(cell.date, cell.disabled)}
-				disabled={cell.disabled}
-				aria-pressed={cell.isSelected}
-				aria-label={cell.date.toLocaleDateString()}
-				data-testid={buildTestId('calendar', 'day', testId, cell.date.getDate())}
-				class={cn(
-					'relative flex items-center justify-center rounded transition-colors',
-					density.cell,
-					density.cellText,
-					!cell.inMonth && 'text-default-300',
-					cell.inMonth && !cell.disabled && 'text-default-700 hover:bg-default-100 cursor-pointer',
-					cell.disabled && 'text-default-200 cursor-not-allowed',
-					cell.isToday && !cell.isSelected && 'ring-default-300 font-semibold ring-1',
-					cell.isInRange && !cell.isRangeEdge && 'bg-primary-50 text-primary-700 rounded-none',
-					cell.isSelected && 'bg-primary-500 hover:bg-primary-600 text-white'
-				)}
-			>
-				{cell.date.getDate()}
-			</button>
+		<div bind:this={topSentinelEl} aria-hidden="true" class="h-px"></div>
+		{#each months as block (block.key)}
+			{@const monthSelected =
+				(mode === 'single' &&
+					!!value &&
+					value.getFullYear() === block.year &&
+					value.getMonth() === block.month) ||
+				(mode === 'range' &&
+					((valueStart &&
+						valueStart.getFullYear() === block.year &&
+						valueStart.getMonth() === block.month) ||
+						(valueEnd &&
+							valueEnd.getFullYear() === block.year &&
+							valueEnd.getMonth() === block.month)))}
+			<!-- One wrapper per month so the open-time auto-scroll can
+			     resolve the target via closest('[data-month-key]') and
+			     scroll the full month — header + grid — into view. -->
+			<div data-month-key={block.key}>
+				<div
+					class={cn(
+						'border-default-200 sticky top-0 z-10 border-b px-2 py-1 font-semibold',
+						density.monthText,
+						monthSelected ? 'bg-primary-50 text-primary-700' : 'bg-default-50 text-default-800'
+					)}
+					data-testid={buildTestId('calendar', 'month-label', testId, block.key)}
+				>
+					{block.label}
+				</div>
+				<div class="grid grid-cols-7 gap-0.5 py-1" role="grid">
+					{#each block.slots as slot, i (block.key * 100 + i)}
+						{#if slot.kind === 'day'}
+							{@const cell = slot.cell}
+							<button
+								type="button"
+								onclick={() => pick(cell)}
+								disabled={cell.disabled}
+								aria-pressed={cell.isSelected}
+								aria-label={cell.date.toLocaleDateString()}
+								data-testid={buildTestId('calendar', 'day', testId, cell.date.getDate())}
+								data-selected={cell.isSelected || undefined}
+								data-today={cell.isToday || undefined}
+								class={cn(
+									'relative flex items-center justify-center rounded transition-colors',
+									density.cell,
+									density.cellText,
+									!cell.disabled && 'text-default-700 hover:bg-default-100 cursor-pointer',
+									cell.disabled && 'text-default-200 cursor-not-allowed',
+									cell.isToday && !cell.isSelected && 'ring-default-300 font-semibold ring-1',
+									cell.isInRange &&
+										!cell.isRangeEdge &&
+										'bg-primary-50 text-primary-700 rounded-none',
+									cell.isSelected && 'bg-primary-500 hover:bg-primary-600 text-white'
+								)}
+							>
+								{cell.date.getDate()}
+							</button>
+						{:else}
+							<div class={density.cell} aria-hidden="true"></div>
+						{/if}
+					{/each}
+				</div>
+			</div>
 		{/each}
+		<div bind:this={bottomSentinelEl} aria-hidden="true" class="h-px"></div>
 	</div>
 </div>