@nomideusz/svelte-calendar 0.6.8 → 0.7.0

package/dist/views/mobile/MobileDay.svelte

@@ -417,7 +417,7 @@
 		padding: 4px 8px;
 		overflow-x: auto;
 		scrollbar-width: none;
-		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.06));
+		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
 		flex-shrink: 0;
 		align-items: center;
 	}
@@ -481,7 +481,7 @@
 		overflow-x: hidden;
 		-webkit-overflow-scrolling: touch;
 		scrollbar-width: thin;
-		scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.08)) transparent;
+		scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
 		position: relative;
 		padding-top: 8px;
 	}
@@ -668,7 +668,7 @@
 
 	.mb-ev-loc {
 		font: 400 10px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.3));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;

package/dist/views/mobile/MobileWeek.svelte

@@ -295,7 +295,7 @@
 		overflow-y: auto;
 		-webkit-overflow-scrolling: touch;
 		scrollbar-width: thin;
-		scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.08)) transparent;
+		scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
 	}
 	.mw--auto .mw-list { overflow-y: visible; }
 
@@ -311,7 +311,7 @@
 		text-align: left;
 		width: 100%;
 		-webkit-tap-highlight-color: transparent;
-		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.06));
+		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
 		min-height: 56px;
 	}
 	.mw-row:last-child {
@@ -405,7 +405,7 @@
 
 	.mw-empty {
 		font: 400 12px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.25));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		font-style: italic;
 	}
 
@@ -497,7 +497,7 @@
 	/* ─── Chevron ────────────────────────────────────── */
 	.mw-chevron {
 		flex-shrink: 0;
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.2));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		position: relative;
 		z-index: 1;
 		pointer-events: none;

package/dist/views/planner/PlannerDay.svelte

@@ -66,8 +66,6 @@
 	const commitDragCtx = $derived(ctx.commitDrag);
 	const viewState = $derived(ctx.viewState);
 	const loadRangeCtx = $derived(ctx.loadRange);
-	const showNav = $derived(ctx.showNav);
-	const showDates = $derived(ctx.showDates);
 	const blockedSlots = $derived(ctx.blockedSlots);
 	const dayHeaderSnippet = $derived(ctx.dayHeaderSnippet);
 	const minDuration = $derived(ctx.minDuration);
@@ -105,18 +103,6 @@
 	const hourCount = $derived(Math.max(1, endHour - startHour));
 	const DAY_GAP = 2;
 
-	const dateLabel = $derived(
-		showDates
-			? new Date(visibleDayMs).toLocaleDateString(locale ?? 'en-US', {
-				weekday: 'long',
-				month: 'long',
-				day: 'numeric',
-			})
-			: new Date(visibleDayMs).toLocaleDateString(locale ?? 'en-US', {
-				weekday: 'long',
-			})
-	);
-
 	const count = 1 + 2 * BUFFER_DAYS;
 	const origin = $derived(internalCenterMs - BUFFER_DAYS * DAY_MS);
 
@@ -346,7 +332,8 @@
 			lastExternalMs = ext;
 			internalCenterMs = ext;
 			visibleDayMs = ext;
-			following = false;
+			// Landing on today (e.g. header "Today" button) resumes auto-follow.
+			following = ext === clock.today;
 			// After DOM update, recenter scroll on focus day.
 			tick().then(() => {
 				if (el) {
@@ -716,35 +703,6 @@
 		</div>
 	{/if}
 
-	<div class="fs-date-label">{dateLabel}</div>
-
-	{#if showNav}
-	<nav class="fs-nav" aria-label={L.dayNavigation}>
-		<button
-			class="fs-nav-pill fs-nav-today"
-			class:fs-nav-today--hidden={following}
-			onclick={() => { internalCenterMs = clock.today; lastExternalMs = clock.today; viewState?.goToday(); following = true; }}
-			aria-label={L.goToToday}
-			tabindex={following ? -1 : 0}
-		>
-			{L.today}
-		</button>
-		<button
-			class="fs-nav-pill"
-			onclick={() => { const prev = internalCenterMs - DAY_MS; internalCenterMs = prev; lastExternalMs = prev; viewState?.prev(); following = false; }}
-			aria-label={L.previousDay}
-		>
-			<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><path d="M10 3 5 8l5 5"/></svg>
-		</button>
-		<button
-			class="fs-nav-pill"
-			onclick={() => { const next = internalCenterMs + DAY_MS; internalCenterMs = next; lastExternalMs = next; viewState?.next(); following = false; }}
-			aria-label={L.nextDay}
-		>
-			<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg>
-		</button>
-	</nav>
-	{/if}
 </div>
 
 <style>
@@ -766,12 +724,12 @@
 		touch-action: pan-x;
 		cursor: default;
 		scrollbar-width: thin;
-		scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.08)) transparent;
+		scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
 	}
 	.fs--auto .fs-scroll { height: auto; overflow: visible; }
 	.fs-scroll::-webkit-scrollbar { height: 5px; }
 	.fs-scroll::-webkit-scrollbar-thumb {
-		background: var(--dt-scrollbar, rgba(0, 0, 0, 0.08));
+		background: var(--dt-scrollbar, rgba(0, 0, 0, 0.1));
 		border-radius: 4px;
 	}
 	.fs-scroll::-webkit-scrollbar-track { background: transparent; }
@@ -788,11 +746,11 @@
 		position: absolute;
 		top: 0;
 		height: 100%;
-		border-left: 1px solid var(--dt-border-day, rgba(148, 163, 184, 0.14));
+		border-left: 1px solid var(--dt-border-day, rgba(0, 0, 0, 0.14));
 		box-sizing: border-box;
 	}
 	.fs-day:first-of-type { border-left: none; }
-	.fs-today { background: var(--dt-today-bg, rgba(239, 68, 68, 0.025)); }
+	.fs-today { background: var(--dt-today-bg, rgba(37, 99, 235, 0.04)); }
 	.fs-past { opacity: 0.7; }
 
 	/* ─── Disabled day ───────────────────────────────── */
@@ -802,8 +760,8 @@
 			45deg,
 			transparent,
 			transparent 6px,
-			var(--dt-border, rgba(148, 163, 184, 0.07)) 6px,
-			var(--dt-border, rgba(148, 163, 184, 0.07)) 7px
+			var(--dt-border, rgba(0, 0, 0, 0.08)) 6px,
+			var(--dt-border, rgba(0, 0, 0, 0.08)) 7px
 		) !important;
 	}
 
@@ -815,8 +773,8 @@
 		z-index: 3;
 		background: repeating-linear-gradient(
 			-45deg,
-			color-mix(in srgb, var(--dt-text, rgba(148, 163, 184, 0.85)) 4%, transparent),
-			color-mix(in srgb, var(--dt-text, rgba(148, 163, 184, 0.85)) 4%, transparent) 4px,
+			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent),
+			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 4px,
 			transparent 4px,
 			transparent 8px
 		);
@@ -830,7 +788,7 @@
 
 	.fs-blocked-label {
 		font: 500 9px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
 		white-space: nowrap;
@@ -860,14 +818,14 @@
 		top: 18px;
 		bottom: 0;
 		width: 1px;
-		background: var(--dt-border, rgba(148, 163, 184, 0.07));
+		background: var(--dt-border, rgba(0, 0, 0, 0.08));
 	}
 	.fs-tick-lb {
 		position: absolute;
 		top: 2px;
 		left: 5px;
 		font: 500 10px/1 var(--dt-mono, ui-monospace, monospace);
-		color: var(--dt-text-3, rgba(100, 116, 139, 0.7));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		white-space: nowrap;
 		pointer-events: none;
 	}
@@ -895,7 +853,7 @@
 		left: 0;
 		width: 2px;
 		background: var(--dt-accent, #2563eb);
-		box-shadow: 0 0 8px var(--dt-glow, rgba(239, 68, 68, 0.35));
+		box-shadow: 0 0 8px var(--dt-glow, rgba(37, 99, 235, 0.25));
 	}
 	.fs-now-tag {
 		position: absolute;
@@ -904,7 +862,7 @@
 		font: 700 11px/1 var(--dt-mono, ui-monospace, monospace);
 		color: var(--dt-accent, #2563eb);
 		background: color-mix(in srgb, var(--dt-bg, #ffffff) 92%, var(--dt-accent, #2563eb));
-		border: 1px solid var(--dt-accent-dim, rgba(239, 68, 68, 0.18));
+		border: 1px solid var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
 		padding: 3px 6px;
 		border-radius: 4px;
 		white-space: nowrap;
@@ -916,78 +874,6 @@
 		font-size: 10px;
 	}
 
-	/* ─── Floating date label ────────────────────────── */
-	.fs-date-label {
-		position: absolute;
-		top: 22px;
-		left: 50%;
-		transform: translateX(-50%);
-		z-index: 20;
-		font: 600 11px/1 var(--dt-sans, system-ui, sans-serif);
-		letter-spacing: 0.04em;
-		text-transform: uppercase;
-		color: var(--dt-text, rgba(226, 232, 240, 0.85));
-		background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
-		backdrop-filter: blur(6px);
-		-webkit-backdrop-filter: blur(6px);
-		padding: 8px 16px;
-		border-radius: 8px;
-		border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
-		pointer-events: none;
-		white-space: nowrap;
-	}
-
-	/* ─── Navigation pills ────────────────────────────── */
-	.fs-nav {
-		position: absolute;
-		top: 22px;
-		right: 14px;
-		z-index: 20;
-		display: flex;
-		gap: 2px;
-		background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
-		backdrop-filter: blur(6px);
-		-webkit-backdrop-filter: blur(6px);
-		border-radius: 8px;
-		padding: 2px;
-		border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
-	}
-	.fs-nav-pill {
-		border: none;
-		background: transparent;
-		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
-		cursor: pointer;
-		font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
-		padding: 6px 12px;
-		border-radius: 6px;
-		letter-spacing: 0.04em;
-		text-transform: uppercase;
-		transition: background 100ms, color 100ms;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-	}
-	.fs-nav-pill:hover {
-		color: var(--dt-text, rgba(226, 232, 240, 0.85));
-	}
-	.fs-nav-today {
-		max-width: 60px;
-		overflow: hidden;
-		white-space: nowrap;
-		transition: max-width 250ms ease, padding 250ms ease, opacity 200ms ease;
-	}
-	.fs-nav-today--hidden {
-		max-width: 0;
-		padding-left: 0;
-		padding-right: 0;
-		opacity: 0;
-		pointer-events: none;
-	}
-	.fs-nav-pill:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
-		outline-offset: 2px;
-	}
-
 	/* ─── All-day strip ─────────────────────────────── */
 	.fs-allday {
 		position: absolute;
@@ -1039,7 +925,7 @@
 	.fs-ad-title {
 		font-size: 0.7rem;
 		font-weight: 500;
-		color: var(--dt-text, #e2e8f0);
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		max-width: 120px;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1047,7 +933,7 @@
 
 	.fs-ad-span {
 		font-size: 0.6rem;
-		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		flex-shrink: 0;
 	}
 
@@ -1143,7 +1029,7 @@
 	}
 	.fs-ev-title {
 		font: 600 13px/1.15 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(226, 232, 240, 0.92));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -1152,14 +1038,14 @@
 	}
 	.fs-ev-time {
 		font: 400 10px/1 var(--dt-mono, ui-monospace, monospace);
-		color: var(--dt-text-2, rgba(148, 163, 184, 0.72));
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		opacity: 0.7;
 		white-space: nowrap;
 		flex-shrink: 0;
 	}
 	.fs-ev-sub {
 		font: 400 11px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(148, 163, 184, 0.72));
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		opacity: 0.6;
 		white-space: nowrap;
 		overflow: hidden;
@@ -1169,7 +1055,7 @@
 	}
 	.fs-ev-loc {
 		font: 400 10px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(148, 163, 184, 0.5));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;

package/dist/views/planner/PlannerWeek.svelte

@@ -55,7 +55,6 @@
 	const commitDragCtx = $derived(ctx.commitDrag);
 	const viewState = $derived(ctx.viewState);
 	const loadRangeCtx = $derived(ctx.loadRange);
-	const showNav = $derived(ctx.showNav);
 	const equalDays = $derived(ctx.equalDays);
 	const showDates = $derived(ctx.showDates);
 	const hideDays = $derived(ctx.hideDays);
@@ -79,7 +78,6 @@
 	let lastExternalMs = _initMs;
 
 	let el: HTMLDivElement;
-	let scrolled = $state(false);
 
 	function scrollWeekIntoContainer(targetMs?: number, behavior: ScrollBehavior = 'auto') {
 		if (!el) return;
@@ -231,24 +229,31 @@
 		if (ext !== lastExternalMs) {
 			lastExternalMs = ext;
 			internalFocusMs = ext;
-			tick().then(() => scrollWeekIntoContainer(ext, 'smooth'));
+			tick().then(() => scrollWeekIntoContainer(ext));
 		}
 	});
 
-	// ─── Scroll state ─────────────────────────────────────
-	function isCurrentWeekVisible(): boolean {
-		if (!el) return false;
-		const current = el.querySelector<HTMLElement>('.wg-week--current');
-		if (!current) return false;
-		const top = current.offsetTop - el.scrollTop;
-		const bottom = top + current.offsetHeight;
-		return bottom > 0 && top < el.clientHeight;
+	/** Push the week at the viewport centre to viewState (drives the header label + Today button). */
+	function syncFocusFromScroll() {
+		if (!el || !viewState) return;
+		const centerY = el.scrollTop + el.clientHeight / 2;
+		const rows = el.querySelectorAll<HTMLElement>('[data-week]');
+		for (const row of rows) {
+			if (row.offsetTop + row.offsetHeight >= centerY) {
+				const ms = Number(row.dataset.week);
+				if (Number.isFinite(ms) && ms !== lastExternalMs) {
+					lastExternalMs = ms;
+					viewState.setFocusDate(new Date(ms));
+				}
+				return;
+			}
+		}
 	}
 
 	let extending = false;
 
 	function handleUserScroll() {
-		scrolled = !isCurrentWeekVisible();
+		syncFocusFromScroll();
 		if (!el || extending) return;
 		// Extend buffer when user scrolls near the edge
 		if (el.scrollTop < EDGE_PX) {
@@ -268,16 +273,6 @@
 		}
 	}
 
-	function jumpToday() {
-		internalFocusMs = clock.today;
-		lastExternalMs = clock.today;
-		viewState?.goToday();
-		scrolled = false;
-		tick().then(() => {
-			scrollWeekIntoContainer(clock.today, 'smooth');
-		});
-	}
-
 	function handleDayCellClick(ms: number, e: Event) {
 		const target = e.target as HTMLElement;
 		if (target.closest('.wg-ev')) return;
@@ -570,17 +565,6 @@
 		{/each}
 	</div>
 
-	{#if showNav && scrolled}
-		<nav class="wg-nav" aria-label={L.weekNavigation}>
-			<button
-				class="wg-nav-pill"
-				onclick={jumpToday}
-				aria-label={L.goToToday}
-			>
-				{L.today}
-			</button>
-		</nav>
-	{/if}
 </div>
 
 <style>
@@ -601,9 +585,8 @@
 		overflow-y: auto;
 		overflow-x: hidden;
 		box-sizing: border-box;
-		padding-top: 48px;
 		scrollbar-width: thin;
-		scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.08)) transparent;
+		scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
 	}
 	.wg--auto .wg-body { overflow-y: visible; }
 
@@ -624,7 +607,7 @@
 	}
 
 	.wg-week--current {
-		background: var(--dt-today-bg, rgba(239, 68, 68, 0.02));
+		background: var(--dt-today-bg, rgba(37, 99, 235, 0.04));
 		border: 2.5px solid var(--dt-accent, #2563eb);
 		box-shadow: 0 0 0 1px color-mix(in srgb, var(--dt-accent, #2563eb) 15%, transparent);
 	}
@@ -648,7 +631,7 @@
 		position: relative;
 		min-height: 170px;
 		padding: 4px 4px 8px;
-		border-right: 1px solid var(--dt-border, rgba(0, 0, 0, 0.06));
+		border-right: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
 		cursor: pointer;
 		transition: background 0.15s;
 	}
@@ -656,8 +639,8 @@
 	.wg-cell:last-child { border-right: none; }
 	.wg-cell:hover { background: var(--dt-hover, rgba(0, 0, 0, 0.015)); }
 
-	.wg-cell--today { background: var(--dt-today-bg, rgba(239, 68, 68, 0.03)); }
-	.wg-cell--today:hover { background: rgba(239, 68, 68, 0.05); }
+	.wg-cell--today { background: var(--dt-today-bg, rgba(37, 99, 235, 0.04)); }
+	.wg-cell--today:hover { background: color-mix(in srgb, var(--dt-accent, #2563eb) 6%, transparent); }
 
 	/* Dim all cells by default; current week overrides to full brightness */
 	.wg-cell { opacity: 0.55; }
@@ -676,8 +659,8 @@
 			45deg,
 			transparent,
 			transparent 6px,
-			var(--dt-border, rgba(0, 0, 0, 0.06)) 6px,
-			var(--dt-border, rgba(0, 0, 0, 0.06)) 7px
+			var(--dt-border, rgba(0, 0, 0, 0.08)) 6px,
+			var(--dt-border, rgba(0, 0, 0, 0.08)) 7px
 		) !important;
 	}
 
@@ -690,8 +673,8 @@
 		border-radius: 3px;
 		background: repeating-linear-gradient(
 			-45deg,
-			color-mix(in srgb, var(--dt-text, rgba(0,0,0,0.85)) 4%, transparent),
-			color-mix(in srgb, var(--dt-text, rgba(0,0,0,0.85)) 4%, transparent) 3px,
+			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent),
+			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 3px,
 			transparent 3px,
 			transparent 6px
 		);
@@ -701,7 +684,7 @@
 
 	.wg-blocked-label {
 		font: 500 8px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.3));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
 		white-space: nowrap;
@@ -726,11 +709,11 @@
 		font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.04em;
 		text-transform: uppercase;
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.3));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 	}
 
 	.wg-week--current .wg-day-wd {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.5));
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
 
 	.wg-cell-hd--today .wg-day-wd {
@@ -740,11 +723,11 @@
 
 	.wg-day-num {
 		font: 700 14px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.85));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 
 	.wg-week--current .wg-day-num {
-		color: var(--dt-text, rgba(0, 0, 0, 0.95));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 
 	.wg-day-num--today {
@@ -762,13 +745,13 @@
 		font: 800 22px / 1 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.02em;
 		text-transform: uppercase;
-		color: color-mix(in srgb, var(--dt-text, rgba(255,255,255,0.85)) 4%, transparent);
+		color: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent);
 		pointer-events: none;
 		white-space: nowrap;
 	}
 
 	.wg-week--current .wg-cell-month {
-		color: color-mix(in srgb, var(--dt-text, rgba(255,255,255,0.85)) 8%, transparent);
+		color: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 8%, transparent);
 	}
 
 	/* ─── All-day / multi-day events ─────────────────── */
@@ -826,7 +809,7 @@
 
 	.wg-ad-title {
 		font: 500 10px / 1.1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.85));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -915,14 +898,14 @@
 
 	.wg-ev-time {
 		font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.4));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		flex-shrink: 0;
 		white-space: nowrap;
 	}
 
 	.wg-ev-title {
 		font: 500 12px / 1.1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.85));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -930,7 +913,7 @@
 
 	.wg-ev-loc {
 		font: 400 9px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.35));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -939,56 +922,13 @@
 
 	.wg-ev-more {
 		font: 500 10px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.35));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		padding: 2px 8px;
 		cursor: pointer;
 	}
 
 	.wg-ev-more:hover {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.55));
-	}
-
-	/* ─── Navigation pill ────────────────────────────── */
-	.wg-nav {
-		position: absolute;
-		top: 22px;
-		right: 14px;
-		z-index: 20;
-		display: flex;
-		gap: 2px;
-		background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
-		backdrop-filter: blur(6px);
-		-webkit-backdrop-filter: blur(6px);
-		border-radius: 8px;
-		padding: 2px;
-		border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
-		animation: wg-nav-in 200ms ease both;
-	}
-	@keyframes wg-nav-in {
-		from { opacity: 0; transform: translateY(-6px); }
-		to   { opacity: 1; transform: translateY(0); }
-	}
-	.wg-nav-pill {
-		border: none;
-		background: transparent;
-		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
-		cursor: pointer;
-		font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
-		padding: 6px 12px;
-		border-radius: 6px;
-		letter-spacing: 0.04em;
-		text-transform: uppercase;
-		transition: background 100ms, color 100ms;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-	}
-	.wg-nav-pill:hover {
-		color: var(--dt-text, rgba(226, 232, 240, 0.85));
-	}
-	.wg-nav-pill:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
-		outline-offset: 2px;
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
 
 	/* ─── Focus-visible ──────────────────────────────── */

package/dist/views/shared/context.svelte.d.ts

@@ -7,7 +7,6 @@ export interface CalendarContext {
     readonly drag: DragState | undefined;
     readonly commitDrag: (() => void) | undefined;
     readonly snapInterval: number;
-    readonly showNav: boolean;
     readonly equalDays: boolean;
     readonly showDates: boolean;
     readonly hideDays: number[] | undefined;

package/dist/views/shared/context.svelte.js

@@ -18,7 +18,6 @@ export function useCalendarContext() {
         get drag() { return raw?.drag; },
         get commitDrag() { return raw?.commitDrag; },
         get snapInterval() { return raw?.snapInterval ?? 15; },
-        get showNav() { return raw?.showNavigation ?? true; },
         get equalDays() { return raw?.equalDays ?? false; },
         get showDates() { return raw?.showDates ?? true; },
         get hideDays() { return raw?.hideDays; },