@nomideusz/svelte-calendar 1.1.1 → 1.3.0

package/dist/views/mobile/MobileDay.svelte

@@ -12,6 +12,7 @@ import { createClock } from "../../core/clock.svelte.js";
 import { HOUR_MS, sod, addDaysMs, diffDays, isAllDay, segmentForDay } from "../../core/time.js";
 import { fmtHParts, fmtTime } from "../../core/locale.js";
 import { createSwipe } from "./swipe.js";
+import { dateLong } from "../shared/format.js";
 let { height = null, events = [], style = "", locale, focusDate, oneventclick, oneventcreate, selectedEventId = null, readOnly = false, visibleHours } = $props();
 // ── Context ────────────────────────────────────────
 const ctx = useCalendarContext();
@@ -475,7 +476,7 @@ $effect(() => {
 	style={style || undefined}
 	style:height={autoHeight ? undefined : (height ? `${height}px` : '100%')}
 	role="region"
-	aria-label={L.dayPlanner}
+	aria-label="{L.dayPlanner}, {dateLong(dayMs, locale)}"
 	ontouchstart={swipe.ontouchstart}
 	ontouchmove={swipe.ontouchmove}
 	ontouchend={swipe.ontouchend}
@@ -588,11 +589,11 @@ $effect(() => {
 						<div class="mb-ev-stripe"></div>
 						<div class="mb-ev-body">
 							<EventContent event={p.ev}>
-							<!-- Line thresholds must track real content height (title 18 +
-							     time 13 + sub 14 + loc 12 + tags 19 + padding 8) — showing
+							<!-- Line thresholds must track real content height (title 19 +
+							     time 14 + sub 14 + loc 13 + tags 19 + padding 8) — showing
 							     a line the block can't hold clips text at both ends. -->
 							<span class="mb-ev-title">{p.ev.title}</span>
-							{#if p.height > 32}
+							{#if p.height > 36}
 								<span class="mb-ev-time">{fmtTime(p.ev.start, locale)} – {fmtTime(p.ev.end, locale)}</span>
 							{/if}
 							{#if p.ev.subtitle && p.height > 56}
@@ -753,7 +754,7 @@ $effect(() => {
 	}
 
 	.mb-allday-title {
-		font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 500 13.5px/1 var(--dt-sans, system-ui, sans-serif);
 		color: inherit;
 		white-space: nowrap;
 		max-width: 100px;
@@ -762,14 +763,14 @@ $effect(() => {
 	}
 
 	.mb-allday-span {
-		font: 400 11px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
 		color: inherit;
 		opacity: 0.75;
 	}
 
 	.mb-allday-more {
-		font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		white-space: nowrap;
 		flex-shrink: 0;
@@ -846,8 +847,8 @@ $effect(() => {
 		visibility: hidden;
 	}
 	.mb-hour-label small {
-		font-size: 9px;
-		font-weight: 600;
+		font-size: 10px;
+		font-weight: 500;
 		vertical-align: top;
 		margin-left: 1px;
 		letter-spacing: 0;
@@ -859,7 +860,7 @@ $effect(() => {
 		   start at — content-box pushed digits flush under the event edge */
 		box-sizing: border-box;
 		flex-shrink: 0;
-		font: 700 15px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 15px/1 var(--dt-sans, system-ui, sans-serif);
 		font-stretch: 90%;
 		font-variant-numeric: tabular-nums;
 		letter-spacing: -0.02em;
@@ -892,18 +893,20 @@ $effect(() => {
 		left: 44px;
 		top: 50%;
 		transform: translateY(-50%);
-		font: 500 10px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 500 11px/1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
 	}
 
 	/* ─── Now line ───────────────────────────────────── */
+	/* No stacking context of its own: the plate and the dot sit above the
+	   events, the line under them (the event it crosses is opaque), so the
+	   line never strikes through a title. */
 	.mb-now {
 		position: absolute;
 		left: 0;
 		right: 0;
-		z-index: 10;
 		display: flex;
 		align-items: center;
 		pointer-events: none;
@@ -911,18 +914,32 @@ $effect(() => {
 
 	/* The clock is a reversed plate on the accent, as in the desktop gutter. */
 	.mb-now-label {
+		position: relative;
+		z-index: 10;
 		width: 40px;
 		box-sizing: border-box;
 		flex-shrink: 0;
 		padding: 0 4px 0 0;
 		text-align: right;
+		white-space: nowrap;
+	}
+	.mb-now-label::after {
+		content: '';
+		position: absolute;
+		right: -4px;
+		top: 50%;
+		width: 8px;
+		height: 8px;
+		margin-top: -4px;
+		border-radius: 50%;
+		background: var(--dt-accent, #2563eb);
 	}
 	.mb-now-label span {
 		display: inline-block;
 		padding: 2px 3px;
 		border-radius: 0;
 		background: var(--dt-accent, #2563eb);
-		font: 700 10px/1.2 var(--dt-sans, system-ui, sans-serif);
+		font: 500 11px/1.2 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
 		color: var(--dt-btn-text, #ffffff);
 	}
@@ -933,17 +950,7 @@ $effect(() => {
 		border-top: 2px solid var(--dt-accent, #2563eb);
 		box-shadow: none;
 		position: relative;
-	}
-
-	.mb-now-line::before {
-		content: '';
-		position: absolute;
-		left: -4px;
-		top: -4px;
-		width: 10px;
-		height: 10px;
-		border-radius: 50%;
-		background: var(--dt-accent, #2563eb);
+		z-index: 4;
 	}
 
 	/* ─── Events ─────────────────────────────────────── */
@@ -990,8 +997,20 @@ $effect(() => {
 	.mb-event--selected {
 		box-shadow: inset 0 0 0 1px var(--ev-color);
 	}
-	.mb-event--current {
-		background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
+	/* The event in progress is the one the now line crosses: its wash is
+	   laid over the paper, opaque, so the line runs beneath its text. */
+	.mb-event.mb-event--current {
+		background:
+			linear-gradient(var(--dt-accent-dim, rgba(37, 99, 235, 0.12)), var(--dt-accent-dim, rgba(37, 99, 235, 0.12))),
+			var(--dt-paper, none),
+			var(--dt-bg, #ffffff);
+	}
+	.mb-event.mb-event--current:hover,
+	.mb-event.mb-event--current:active {
+		background:
+			linear-gradient(var(--dt-hover, rgba(0, 0, 0, 0.04)), var(--dt-hover, rgba(0, 0, 0, 0.04))),
+			var(--dt-paper, none),
+			var(--dt-bg, #ffffff);
 	}
 	/* Printed states: a cancelled class is struck through; a tentative or
 	   limited one is set in grey with a dashed bar — never a bare opacity. */
@@ -1092,7 +1111,7 @@ $effect(() => {
 		pointer-events: none;
 	}
 	.mb-create-ghost-time {
-		font: 700 11px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 500 11px/1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
 		color: var(--dt-accent, #2563eb);
 		padding: 4px 8px;
@@ -1125,13 +1144,13 @@ $effect(() => {
 	}
 
 	.mb-ev-time {
-		font: 400 12px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 14px/1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 
 	.mb-ev-sub {
-		font: 400 12px/1.1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 12.5px/1.1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		white-space: nowrap;
 		overflow: hidden;
@@ -1139,7 +1158,7 @@ $effect(() => {
 	}
 
 	.mb-ev-loc {
-		font: 400 11px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		white-space: nowrap;
 		overflow: hidden;
@@ -1178,7 +1197,7 @@ $effect(() => {
 		position: absolute;
 		top: 4px;
 		right: 4px;
-		font: 600 11px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 500 11px/1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--ev-color, var(--dt-accent));
 		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, transparent);
 		padding: 2px 5px;

package/dist/views/mobile/MobileWeek.svelte

@@ -10,7 +10,8 @@ import EventContent from "../shared/EventContent.svelte";
 import { createClock } from "../../core/clock.svelte.js";
 import { sod, addDaysMs, isAllDay } from "../../core/time.js";
 import { startOfWeek as sowFn } from "../../core/time.js";
-import { fmtTime as _fmtTime, weekdayShort } from "../../core/locale.js";
+import { fmtTime as _fmtTime, fmtWeekRange, weekdayShort } from "../../core/locale.js";
+import { dateLong } from "../shared/format.js";
 import { createSwipe } from "./swipe.js";
 let { mondayStart = true, locale, height = null, events = [], style = "", focusDate, oneventclick, selectedEventId = null } = $props();
 // ── Context ────────────────────────────────────────
@@ -165,7 +166,9 @@ function handleDayKeydown(e, dayMs) {
 	style={style || undefined}
 	style:height={autoHeight ? undefined : (height ? `${height}px` : '100%')}
 	role="region"
-	aria-label={L.weekAhead}
+	aria-label="{L.weekAhead}{dayCells.length
+		? `, ${fmtWeekRange(dayCells[0].ms, locale, dayCells[dayCells.length - 1].ms)}`
+		: ''}"
 	ontouchstart={swipe.ontouchstart}
 	ontouchmove={swipe.ontouchmove}
 	ontouchend={swipe.ontouchend}
@@ -195,7 +198,7 @@ function handleDayKeydown(e, dayMs) {
 					disabled={cell.isDisabled}
 					onclick={() => handleDayTap(cell.ms)}
 					onkeydown={(e) => handleDayKeydown(e, cell.ms)}
-					aria-label="{cell.dayName} {cell.dayNum}{cell.isToday ? `, ${L.today}` : ''}"
+					aria-label="{dateLong(cell.ms, locale)}{cell.isToday ? `, ${L.today}` : ''}"
 				></button>
 				<!-- Date column -->
 				<div class="mw-date">
@@ -322,6 +325,7 @@ function handleDayKeydown(e, dayMs) {
 		background: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 3%, transparent);
 	}
 	.mw-row--past :global(.mw-ev-title),
+	.mw-row--past :global(.mw-ev-time),
 	.mw-row--past .mw-day-num {
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
@@ -366,8 +370,8 @@ function handleDayKeydown(e, dayMs) {
 	}
 
 	.mw-day-name {
-		font: 600 11px/1 var(--dt-sans, system-ui, sans-serif);
-		letter-spacing: 0.06em;
+		font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
+		letter-spacing: 0.08em;
 		text-transform: uppercase;
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
@@ -375,13 +379,16 @@ function handleDayKeydown(e, dayMs) {
 		color: var(--dt-accent, #2563eb);
 	}
 
+	/* The date is the typography: large and regular, narrowed like the planner's */
 	.mw-day-num {
-		font: 700 18px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 22px/1 var(--dt-sans, system-ui, sans-serif);
+		font-stretch: 90%;
+		font-variant-numeric: tabular-nums;
+		letter-spacing: -0.02em;
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 	.mw-day-num--today {
 		color: var(--dt-accent, #2563eb);
-		font-weight: 500;
 	}
 
 	/* ─── Events column ──────────────────────────────── */
@@ -502,15 +509,15 @@ function handleDayKeydown(e, dayMs) {
 	}
 
 	.mw-ev-time {
-		font: 400 12px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 14px/1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		white-space: nowrap;
 		flex-shrink: 0;
 	}
 
 	.mw-ev-more {
-		font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		padding: 2px 4px;
 		min-height: 32px;

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(() => {
@@ -143,6 +176,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 +185,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);
@@ -300,13 +334,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(0, 0, 0, 0.66));
 	}
 
 	.mg-body {
@@ -342,12 +374,13 @@ function chipTime(e) {
 	.mg-cell--weekend {
 		background: var(--dt-weekend-bg, rgba(0, 0, 0, 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(0, 0, 0, 0.66));
 	}
 	.mg-cell--today {
 		background: var(--dt-today-bg);
@@ -370,18 +403,20 @@ function chipTime(e) {
 		outline-offset: -2px;
 	}
 
+	/* Starts where the weekday name above it starts (6px cell + 2px = the
+	   header's 8px), and is only as wide as its digits, so today's rule is too. */
 	.mg-daynum {
 		flex: none;
+		align-self: flex-start;
+		padding: 0 2px;
 		font-family: var(--dt-sans, system-ui, sans-serif);
 		font-size: 22px;
 		font-weight: 400;
 		font-variant-numeric: tabular-nums;
 		color: var(--dt-text);
-		min-width: 26px;
 		height: 26px;
 		display: inline-flex;
 		align-items: center;
-		justify-content: center;
 	}
 	/* Today: accent numeral on a 2px rule — the same mark in every view. */
 	.mg-daynum--today {
@@ -404,9 +439,7 @@ 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;
@@ -440,9 +473,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 {
@@ -456,9 +487,8 @@ 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;
 	}
@@ -503,14 +533,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>

package/dist/views/planner/PlannerScroll.svelte

@@ -64,6 +64,7 @@ const MAX_EVENTS_SHOWN = 5;
 // mount re-centres once the events have landed.
 const CHIP_H = 22;
 const CHIP_GAP = 3;
+const NOW_H = 18;
 /** The day's hours at their floor height — a quiet week is short, a busy
 *  day grows its row. Chips sit on this axis by start time. */
 const TIME_H = 120;
@@ -122,26 +123,31 @@ function timeTop(hoursIntoDay) {
 	return Math.min(Math.max(f, 0), 1) * (TIME_H - CHIP_H);
 }
 /** Each chip at its start time, or just under the chip before it when that
-*  one is in the way: the order is time, the height is time, nothing overlaps. */
-function chipTops(list, dayMs) {
+*  one is in the way: the order is time, the height is time, nothing overlaps.
+*  On today the now line is one more item on the axis: at the clock's
+*  height, under every chip that has started (pushed-down chips would read
+*  as still to come), and it pushes the chips to come down by its plate,
+*  so the plate never covers a chip's text. `end` is where the last item ends. */
+function chipTops(list, dayMs, withNow = false) {
 	const tops = [];
 	let min = 0;
+	let nowY = null;
+	const placeNow = () => {
+		nowY = Math.max(timeTop(hourOf(clock.tick, dayMs)), min - CHIP_GAP + NOW_H / 2);
+		min = nowY + NOW_H / 2 + CHIP_GAP;
+	};
 	for (const ev of list) {
+		if (withNow && nowY === null && ev.start.getTime() > clock.tick) placeNow();
 		const top = Math.max(timeTop(hourOf(ev.start.getTime(), dayMs)), min);
 		tops.push(top);
 		min = top + CHIP_H + CHIP_GAP;
 	}
-	return tops;
-}
-/** The now-line: at the clock's height (pinned to the axis ends outside
-*  it), but never above a chip that has already started — pushed-down
-*  chips would read as still to come. */
-function nowTop(list, tops, dayMs) {
-	let y = timeTop(hourOf(clock.tick, dayMs));
-	list.forEach((ev, i) => {
-		if (ev.start.getTime() <= clock.tick) y = Math.max(y, tops[i] + CHIP_H + CHIP_GAP / 2);
-	});
-	return y;
+	if (withNow && nowY === null) placeNow();
+	return {
+		tops,
+		nowY,
+		end: Math.max(0, min - CHIP_GAP)
+	};
 }
 const _initMs = untrack(() => sod(focusDate?.getTime() ?? Date.now()));
 let internalFocusMs = $state(_initMs);
@@ -836,8 +842,9 @@ function onCellKeydown(e, ms) {
 							{@const previewTimedEvent = dragPreviewTimedForDay(day.ms)}
 							{@const previewSegment = dragPreviewSegmentForDay(day.ms)}
 							{@const shownTimed = visibleTimedEvents.slice(0, isExpanded ? visibleTimedEvents.length : timedCap)}
-							{@const tops = chipTops(shownTimed, day.ms)}
-							{@const nowY = day.isToday ? nowTop(shownTimed, tops, day.ms) : null}
+							{@const axis = chipTops(shownTimed, day.ms, day.isToday)}
+							{@const tops = axis.tops}
+							{@const nowY = axis.nowY}
 							{@const inset = day.monthLabel ? MONTH_INSET : 0}
 							<div
 								class="wg-cell"
@@ -935,6 +942,7 @@ function onCellKeydown(e, ms) {
 										<button
 											type="button"
 											class="wg-ev-more"
+											style:margin-top="{axis.end - (tops.length ? tops[tops.length - 1] + CHIP_H : 0) + 2}px"
 											aria-expanded={isExpanded}
 											onclick={(e) => { e.stopPropagation(); expandedCells[day.ms] = !isExpanded; }}
 										>{isExpanded ? L.showLess : L.nMore(hiddenCount)}</button>
@@ -1112,7 +1120,7 @@ function onCellKeydown(e, ms) {
 		transform: rotate(180deg);
 		text-align: end; /* the rotation puts the end at the top */
 		padding: 6px 0;
-		font: 700 11px / 22px var(--dt-sans, system-ui, sans-serif);
+		font: 500 12px / 22px var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.08em;
 		white-space: nowrap;
 		overflow: hidden;
@@ -1184,8 +1192,8 @@ function onCellKeydown(e, ms) {
 	}
 
 	.wg-blocked-label {
-		font: 500 10px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		font: 500 11px/1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
 		white-space: nowrap;
@@ -1208,8 +1216,8 @@ function onCellKeydown(e, ms) {
 	}
 
 	.wg-day-wd {
-		font: 400 11px / 1 var(--dt-sans, system-ui, sans-serif);
-		letter-spacing: 0.04em;
+		font: 500 12px / 1 var(--dt-sans, system-ui, sans-serif);
+		letter-spacing: 0.08em;
 		text-transform: uppercase;
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 	}
@@ -1219,7 +1227,8 @@ function onCellKeydown(e, ms) {
 	}
 
 	.wg-day-num {
-		font: 700 14px / 1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 15px / 1 var(--dt-sans, system-ui, sans-serif);
+		font-variant-numeric: tabular-nums;
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 
@@ -1286,7 +1295,7 @@ function onCellKeydown(e, ms) {
 	}
 
 	.wg-ad-title {
-		font: 500 11px / 1.1 var(--dt-sans, system-ui, sans-serif);
+		font: 500 13.5px / 1.1 var(--dt-sans, system-ui, sans-serif);
 		color: inherit;
 		white-space: nowrap;
 		overflow: hidden;
@@ -1335,7 +1344,8 @@ function onCellKeydown(e, ms) {
 		border-top: 2px solid var(--dt-accent, #2563eb);
 	}
 	.wg-now-time {
-		font: 500 10px / 1 var(--dt-sans, system-ui, sans-serif);
+		font: 500 11px / 1.2 var(--dt-sans, system-ui, sans-serif);
+		font-variant-numeric: tabular-nums;
 		padding: 2px 4px;
 		border-radius: 0;
 		background: var(--dt-accent, #2563eb);
@@ -1348,9 +1358,6 @@ function onCellKeydown(e, ms) {
 	.wg-drop::after {
 		border-top-style: dashed;
 	}
-	.wg-drop .wg-now-time {
-		font-weight: 600;
-	}
 
 	.wg-ev {
 		position: relative; /* above the blocked bands */
@@ -1456,12 +1463,11 @@ function onCellKeydown(e, ms) {
 		border-radius: 0;
 		text-align: left;
 		align-self: flex-start;
-		font: 500 10px / 1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 12.5px / 1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		padding: 2px 8px;
 		cursor: pointer;
 		flex-shrink: 0;
-		margin-top: 2px;
 	}
 
 	.wg-ev-more:hover {