@nomideusz/svelte-calendar 1.2.0 → 1.4.0

package/dist/views/month/MonthGrid.svelte

@@ -28,6 +28,39 @@ const todayMs = $derived(clock.today);
 // cell tap (day drill-down) carry the interaction.
 const dotsMode = $derived(isMobile);
 const MAX_CHIPS = 3;
+// How many chips a cell has room for, measured, never more than MAX_CHIPS.
+// A cell that overflows must also show its "+N more", so it gets one row
+// fewer when that row would not fit beside its chips: a hidden event is
+// always counted, never clipped away. Auto height and dots grow instead.
+let fitAll = $state(MAX_CHIPS);
+let fitMore = $state(MAX_CHIPS);
+function measureFit() {
+	const cell = bodyEl?.querySelector(".mg-cell");
+	const chip = bodyEl?.querySelector(".mg-chip");
+	if (!cell || !chip) return;
+	const num = cell.querySelector(".mg-daynum");
+	const chips = cell.querySelector(".mg-chips");
+	const cs = getComputedStyle(cell);
+	const gap = chips ? parseFloat(getComputedStyle(chips).rowGap) || 0 : 0;
+	const room = cell.clientHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom) - (num?.offsetHeight ?? 0) - (parseFloat(cs.rowGap) || 0);
+	const chipH = chip.offsetHeight;
+	const moreH = bodyEl?.querySelector(".mg-more")?.offsetHeight ?? chipH;
+	if (!chipH) return;
+	fitAll = Math.min(MAX_CHIPS, Math.floor((room + gap) / (chipH + gap)));
+	fitMore = Math.max(0, Math.min(MAX_CHIPS, Math.floor((room - moreH) / (chipH + gap))));
+}
+$effect(() => {
+	if (!bodyEl || autoHeight || dotsMode) {
+		fitAll = fitMore = MAX_CHIPS;
+		return;
+	}
+	void events;
+	measureFit();
+	const ro = new ResizeObserver(measureFit);
+	ro.observe(bodyEl);
+	document.fonts?.ready.then(measureFit);
+	return () => ro.disconnect();
+});
 const range = $derived(viewState?.range);
 const focusMonth = $derived((focusDate ?? new Date()).getMonth());
 $effect(() => {
@@ -106,11 +139,18 @@ function cellKeydown(e, cell) {
 		case " ":
 			if (!cell.isDisabled) {
 				e.preventDefault();
-				ondayclick?.(cell.date);
+				activateCell(cell);
 			}
 			break;
 	}
 }
+/** The cell's own action: drill into the day; on phones (dots, no
+*  ondayclick) the whole cell opens its overflow instead of a tiny "+N". */
+function activateCell(cell) {
+	if (cell.isDisabled) return;
+	if (ondayclick) ondayclick(cell.date);
+	else if (dotsMode && cell.overflow > 0) expandedMs = expandedMs === cell.ms ? null : cell.ms;
+}
 function overflowClick(e, cell) {
 	e.stopPropagation();
 	if (ondayclick) ondayclick(cell.date);
@@ -143,6 +183,7 @@ const weeks = $derived.by(() => {
 			const date = new Date(cellMs);
 			const jsDay = date.getDay();
 			const dayEvents = eventsForDay(cellMs);
+			const shown = dayEvents.length <= fitAll ? dayEvents.length : fitMore;
 			row.push({
 				ms: cellMs,
 				date,
@@ -151,9 +192,9 @@ const weeks = $derived.by(() => {
 				isToday: cellMs === todayMs,
 				isWeekend: jsDay === 0 || jsDay === 6,
 				isDisabled: disabledSet.has(cellMs),
-				chips: dayEvents.slice(0, MAX_CHIPS),
+				chips: dayEvents.slice(0, shown),
 				all: dayEvents,
-				overflow: Math.max(0, dayEvents.length - MAX_CHIPS)
+				overflow: dayEvents.length - shown
 			});
 		}
 		rows.push(row);
@@ -202,18 +243,25 @@ function chipTime(e) {
 					aria-current={cell.isToday ? 'date' : undefined}
 					data-ms={cell.ms}
 					tabindex={isFocusable(cell) ? (cell.ms === rovingMs ? 0 : -1) : undefined}
-					onclick={() => {
-						if (!cell.isDisabled) ondayclick?.(cell.date);
-					}}
+					onclick={() => activateCell(cell)}
 					onfocusin={() => (focusMs = cell.ms)}
 					onkeydown={(e) => cellKeydown(e, cell)}
 				>
 					<span class="mg-daynum" class:mg-daynum--today={cell.isToday}>
 						{cell.dayNum}
 					</span>
-					<div class="mg-chips">
+					<!-- Phones: dots are a picture of the day; the cell (its label counts
+					     the events) is the one tap and tab target. -->
+					<div class="mg-chips" aria-hidden={dotsMode || undefined}>
 						{#each expandedMs === cell.ms ? cell.all : cell.chips as ev (ev.id + cell.ms)}
-							{#if eventSnippet}
+							{#if dotsMode}
+								<span
+									class="mg-chip"
+									class:mg-chip--selected={ev.id === selectedEventId}
+									class:mg-chip--cancelled={ev.status === 'cancelled'}
+									style:--mg-chip-color={ev.color ?? (isAllDay(ev) ? 'var(--dt-accent)' : 'var(--dt-event, var(--dt-accent))')}
+								><span class="mg-chip-dot"></span></span>
+							{:else if eventSnippet}
 								<button
 									type="button"
 									class="mg-chip mg-chip--custom"
@@ -232,7 +280,7 @@ function chipTime(e) {
 									class="mg-chip"
 									class:mg-chip--selected={ev.id === selectedEventId}
 									class:mg-chip--cancelled={ev.status === 'cancelled'}
-									style:--mg-chip-color={ev.color ?? 'var(--dt-accent)'}
+									style:--mg-chip-color={ev.color ?? (isAllDay(ev) ? 'var(--dt-accent)' : 'var(--dt-event, var(--dt-accent))')}
 									title={ev.title}
 									aria-label="{ev.title}{chipTime(ev) ? `, ${chipTime(ev)}` : ''}"
 									onclick={(e) => {
@@ -247,7 +295,11 @@ function chipTime(e) {
 								</button>
 							{/if}
 						{/each}
-						{#if cell.overflow > 0 && expandedMs !== cell.ms}
+						{#if dotsMode}
+							{#if cell.overflow > 0 && expandedMs !== cell.ms}
+								<span class="mg-more">+{cell.overflow}</span>
+							{/if}
+						{:else if cell.overflow > 0 && expandedMs !== cell.ms}
 							<button
 								type="button"
 								class="mg-more"
@@ -255,7 +307,7 @@ function chipTime(e) {
 								aria-label={L.nMore(cell.overflow)}
 								onclick={(e) => overflowClick(e, cell)}
 							>
-								{dotsMode ? `+${cell.overflow}` : L.nMore(cell.overflow)}
+								{L.nMore(cell.overflow)}
 							</button>
 						{:else if expandedMs === cell.ms}
 							<button
@@ -300,13 +352,11 @@ function chipTime(e) {
 	}
 	.mg-head-cell {
 		padding: 6px 8px;
-		font-family: var(--dt-sans, system-ui, sans-serif);
+		font: 500 12px/1.2 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		font-size: 11px;
-		font-weight: 600;
 		text-transform: uppercase;
-		letter-spacing: 0.06em;
-		color: var(--dt-text-3);
+		letter-spacing: 0.08em;
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
 
 	.mg-body {
@@ -340,14 +390,15 @@ function chipTime(e) {
 		border-right: none;
 	}
 	.mg-cell--weekend {
-		background: var(--dt-weekend-bg, rgba(0, 0, 0, 0.02));
+		background: var(--dt-weekend-bg, rgba(15, 15, 15, 0.02));
 	}
-	/* Dim only the day number for adjacent-month cells — their events stay legible */
+	/* Dim only the day number for adjacent-month cells — their events stay
+	   legible. text-2, not text-3: a 22px numeral still needs 4.5:1. */
 	.mg-cell--out {
 		background: var(--dt-surface, transparent);
 	}
 	.mg-cell--out .mg-daynum {
-		color: var(--dt-text-3);
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
 	.mg-cell--today {
 		background: var(--dt-today-bg);
@@ -363,10 +414,10 @@ function chipTime(e) {
 		cursor: pointer;
 	}
 	.mg-cell--clickable:hover {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.mg-cell:focus-visible {
-		outline: 2px solid var(--dt-accent, #2563eb);
+		outline: 2px solid var(--dt-accent, #1d4fd7);
 		outline-offset: -2px;
 	}
 
@@ -406,19 +457,17 @@ function chipTime(e) {
 		background: none;
 		padding: 2px 4px;
 		border-radius: 0;
-		font-family: var(--dt-sans);
-		font-size: 12px;
-		line-height: 1.3;
+		font: 400 12.5px/1.3 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text);
 		cursor: pointer;
 		min-width: 0;
 		text-align: left;
 	}
 	.mg-chip:hover {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.mg-chip:focus-visible {
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 		outline: none;
 	}
 	.mg-chip--selected {
@@ -442,9 +491,7 @@ function chipTime(e) {
 	}
 	.mg-chip-time {
 		flex: none;
-		font-family: var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		font-size: 11px;
 		color: var(--dt-text-2);
 	}
 	.mg-chip-title {
@@ -458,18 +505,17 @@ function chipTime(e) {
 		background: none;
 		padding: 1px 4px;
 		border-radius: 0;
-		font-family: var(--dt-sans, system-ui, sans-serif);
+		font: 400 12.5px/1.3 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		font-size: 11px;
 		color: var(--dt-text-2);
 		cursor: pointer;
 	}
 	.mg-more:hover {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 		color: var(--dt-text);
 	}
 	.mg-more:focus-visible {
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 		outline: none;
 	}
 
@@ -490,13 +536,20 @@ function chipTime(e) {
 	/* ── Dots mode (mobile) ─────────────────────────────
 	   Cells are too narrow for text chips, so events render as colored
 	   dots in a wrapping row. The cell itself stays the tap target
-	   (day drill-down); dots keep their title/aria-label for a11y. */
+	   (day drill-down) and its label counts the events; dots are aria-hidden. */
 	.mg--dots .mg-chips {
 		flex-direction: row;
 		flex-wrap: wrap;
 		align-items: center;
 		gap: 3px;
 	}
+	/* The cell is the target: at least a 44px tap, dots never take the hit. */
+	.mg--dots .mg-cell {
+		min-height: 44px;
+	}
+	.mg--dots .mg-chips {
+		pointer-events: none;
+	}
 	.mg--dots .mg-chip {
 		padding: 3px;
 		min-height: 0;
@@ -505,14 +558,17 @@ function chipTime(e) {
 	.mg--dots .mg-chip-time {
 		display: none;
 	}
+	/* Marks are circles, like every dot in the calendar */
 	.mg--dots .mg-chip-dot {
-		width: 8px;
-		height: 8px;
+		align-self: center;
+		width: 7px;
+		height: 7px;
+		border-radius: 50%;
 	}
 	.mg--dots .mg-more {
 		padding: 0 3px;
 		min-height: 0;
 		align-self: center;
-		font-size: 10px;
+		font-size: 11px;
 	}
 </style>