@nomideusz/svelte-calendar 0.6.9 → 0.7.1

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;
 	}
 
@@ -1062,7 +948,10 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		transition: box-shadow 120ms, background 120ms;
+		/* top/height only: lane reflow animates on drop; left/width stay instant so
+		   mount-time width measurement and infinite-scroll rebases don't slide cards */
+		transition: box-shadow 120ms, background 120ms,
+			top 180ms cubic-bezier(0.2, 0.8, 0.2, 1), height 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
 	}
 	.fs-event:hover {
 		background: color-mix(in srgb, var(--ev-color) 25%, var(--dt-surface, var(--dt-bg, #ffffff)));
@@ -1084,7 +973,15 @@
 		z-index: 50;
 		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
 		cursor: grabbing;
-		transition: none;
+		/* fast ease toward the snapped cursor position */
+		transition: left 80ms ease-out, width 80ms ease-out;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.fs-event,
+		.fs-event--dragging {
+			transition: box-shadow 120ms, background 120ms;
+		}
 	}
 	.fs-event--cancelled {
 		opacity: 0.5;
@@ -1143,7 +1040,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 +1049,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 +1066,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;