@nomideusz/svelte-calendar 1.2.0 → 1.4.0

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"
@@ -919,7 +926,7 @@ function onCellKeydown(e, ms) {
 											class:wg-ev--tentative={ev.status === 'tentative'}
 											class:wg-ev--full={ev.status === 'full'}
 											class:wg-ev--limited={ev.status === 'limited'}
-											style:--ev-color={ev.color ?? 'var(--dt-accent)'}
+											style:--ev-color={ev.color ?? 'var(--dt-event, var(--dt-accent))'}
 											style:margin-top="{tops[i] - (i ? tops[i - 1] + CHIP_H : 0)}px"
 											role="button"
 											tabindex="0"
@@ -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>
@@ -943,7 +951,7 @@ function onCellKeydown(e, ms) {
 										<!-- The ghost floats at its own time; it pushes nothing aside -->
 										<div
 											class="wg-ev wg-ev--drag-preview"
-											style:--ev-color={previewTimedEvent.color ?? 'var(--dt-accent)'}
+											style:--ev-color={previewTimedEvent.color ?? 'var(--dt-event, var(--dt-accent))'}
 											style:top="{timeTop(hourOf(previewTimedEvent.start.getTime(), day.ms))}px"
 											aria-hidden="true"
 											in:previewReceive={{ key: previewKeySnapshot.get('timed') ?? '' }}
@@ -1038,13 +1046,13 @@ function onCellKeydown(e, ms) {
 		overflow-x: auto;
 		box-sizing: border-box;
 		scrollbar-width: thin;
-		scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
+		scrollbar-color: var(--dt-scrollbar, rgba(15, 15, 15, 0.1)) transparent;
 	}
 	.wg--auto .wg-body { overflow-y: visible; }
 
 	.wg-body::-webkit-scrollbar { width: 4px; }
 	.wg-body::-webkit-scrollbar-thumb {
-		background: var(--dt-scrollbar, rgba(0, 0, 0, 0.1));
+		background: var(--dt-scrollbar, rgba(15, 15, 15, 0.1));
 		border-radius: 0;
 	}
 	.wg-body::-webkit-scrollbar-track { background: transparent; }
@@ -1062,14 +1070,14 @@ function onCellKeydown(e, ms) {
 		display: flex;
 		border-radius: 0;
 		margin: var(--wg-row-margin, 12px) 8px;
-		border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		border: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 		overflow: hidden;
 	}
 
 	.wg-week--current {
-		background: var(--dt-today-bg, rgba(37, 99, 235, 0.04));
+		background: var(--dt-today-bg, rgba(29, 79, 215, 0.04));
 		/* The current row's frame is a day rule, not the accent */
-		border-color: var(--dt-border-day, rgba(0, 0, 0, 0.3));
+		border-color: var(--dt-border-day, rgba(15, 15, 15, 0.3));
 	}
 
 	/* ─── Week body ──────────────────────────────────── */
@@ -1094,7 +1102,7 @@ function onCellKeydown(e, ms) {
 		min-width: 90px;
 		box-sizing: border-box;
 		padding: 4px 4px 8px;
-		border-right: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		border-right: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 		cursor: pointer;
 		transition: background 0.15s;
 	}
@@ -1112,15 +1120,15 @@ 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;
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		color: var(--dt-text-3, rgba(15, 15, 15, 0.38));
 	}
 	.wg-week--current .wg-month,
 	.wg-month--start {
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 	}
 	.wg-month--inset {
 		position: absolute;
@@ -1128,19 +1136,19 @@ function onCellKeydown(e, ms) {
 		left: 2px;
 		pointer-events: none;
 	}
-	.wg-cell:hover { background: var(--dt-hover, rgba(0, 0, 0, 0.015)); }
+	.wg-cell:hover { background: var(--dt-hover, rgba(15, 15, 15, 0.015)); }
 
-	.wg-cell--today { background: var(--dt-today-bg, rgba(37, 99, 235, 0.04)); }
+	.wg-cell--today { background: var(--dt-today-bg, rgba(29, 79, 215, 0.04)); }
 	.wg-cell--drop {
-		background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12)) !important;
-		box-shadow: inset 0 0 0 2px var(--dt-accent, #2563eb);
+		background: var(--dt-accent-dim, rgba(29, 79, 215, 0.12)) !important;
+		box-shadow: inset 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
-	.wg-cell--today:hover { background: var(--dt-hover, rgba(0, 0, 0, 0.04)); }
+	.wg-cell--today:hover { background: var(--dt-hover, rgba(15, 15, 15, 0.04)); }
 
 	/* Non-current weeks sit on the same paper; only the header ink softens,
 	   and past events print a shade lighter. */
 	.wg-week:not(.wg-week--current) .wg-day-num {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.wg-cell--past .wg-ev:not(.wg-ev--cancelled) {
 		opacity: 0.78;
@@ -1148,7 +1156,7 @@ function onCellKeydown(e, ms) {
 
 	/* equalDays: when no cells are marked past, all are full brightness */
 
-	.wg-cell--weekend { background: var(--dt-weekend-bg, rgba(0, 0, 0, 0.012)); }
+	.wg-cell--weekend { background: var(--dt-weekend-bg, rgba(15, 15, 15, 0.012)); }
 
 	/* ─── Disabled cell ──────────────────────────────── */
 	.wg-cell--disabled {
@@ -1156,8 +1164,8 @@ function onCellKeydown(e, ms) {
 			45deg,
 			transparent,
 			transparent 6px,
-			var(--dt-border, rgba(0, 0, 0, 0.08)) 6px,
-			var(--dt-border, rgba(0, 0, 0, 0.08)) 7px
+			var(--dt-border, rgba(15, 15, 15, 0.08)) 6px,
+			var(--dt-border, rgba(15, 15, 15, 0.08)) 7px
 		) !important;
 	}
 
@@ -1176,16 +1184,16 @@ function onCellKeydown(e, ms) {
 		border-radius: 0;
 		background: repeating-linear-gradient(
 			-45deg,
-			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,
+			color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent),
+			color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 3px,
 			transparent 3px,
 			transparent 6px
 		);
 	}
 
 	.wg-blocked-label {
-		font: 500 10px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		font: 500 11px/1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
 		white-space: nowrap;
@@ -1208,32 +1216,33 @@ 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));
+		color: var(--dt-text-3, rgba(15, 15, 15, 0.38));
 	}
 
 	.wg-week--current .wg-day-wd {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 
 	.wg-day-num {
-		font: 700 14px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		font: 400 15px / 1 var(--dt-sans, system-ui, sans-serif);
+		font-variant-numeric: tabular-nums;
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 	}
 
 	.wg-week--current .wg-day-num {
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 	}
 
 	/* Today's pill — after the week rules above, which it must beat */
 	.wg-cell-hd--today .wg-day-wd,
 	.wg-cell-hd--today .wg-day-num {
-		color: var(--dt-accent, #2563eb);
+		color: var(--dt-accent, #1d4fd7);
 	}
 	.wg-cell-hd--today .wg-day-num {
-		box-shadow: inset 0 -2px 0 var(--dt-accent, #2563eb);
+		box-shadow: inset 0 -2px 0 var(--dt-accent, #1d4fd7);
 		padding-bottom: 2px;
 	}
 
@@ -1282,11 +1291,11 @@ function onCellKeydown(e, ms) {
 
 	.wg-ad:focus-visible {
 		outline: none;
-		box-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 
 	.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;
@@ -1332,13 +1341,14 @@ function onCellKeydown(e, ms) {
 	.wg-now::after {
 		content: '';
 		flex: 1;
-		border-top: 2px solid var(--dt-accent, #2563eb);
+		border-top: 2px solid var(--dt-accent, #1d4fd7);
 	}
 	.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);
+		background: var(--dt-accent, #1d4fd7);
 		color: var(--dt-btn-text, #fff);
 	}
 	/* Where a dragged-in class would land: the now-line's shape, dashed */
@@ -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 */
@@ -1379,7 +1386,7 @@ function onCellKeydown(e, ms) {
 	}
 
 	.wg-ev:hover {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 
 	.wg-ev--drag-preview {
@@ -1389,7 +1396,7 @@ function onCellKeydown(e, ms) {
 		z-index: 8;
 		opacity: 0.95;
 		pointer-events: none;
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 		box-shadow: inset 0 0 0 1px var(--ev-color);
 		cursor: grabbing;
 	}
@@ -1399,13 +1406,13 @@ function onCellKeydown(e, ms) {
 	}
 
 	.wg-ev--current {
-		background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
+		background: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
 	}
 
 	/* Printed states: struck through, grey, or a dashed bar — never a tint */
 	.wg-ev--cancelled .wg-ev-title {
 		text-decoration: line-through;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.wg-ev--cancelled::before,
 	.wg-ev--full::before {
@@ -1413,7 +1420,7 @@ function onCellKeydown(e, ms) {
 	}
 	.wg-ev--tentative .wg-ev-title,
 	.wg-ev--full .wg-ev-title {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.wg-ev--tentative::before,
 	.wg-ev--limited::before {
@@ -1426,14 +1433,14 @@ function onCellKeydown(e, ms) {
 	.wg-ev-time {
 		font: 400 14px / 1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		flex-shrink: 0;
 		white-space: nowrap;
 	}
 
 	.wg-ev-title {
 		font: 500 15px / 1.25 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1443,7 +1450,7 @@ function onCellKeydown(e, ms) {
 
 	.wg-ev-loc {
 		font: 400 12.5px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		white-space: nowrap;
 		flex-shrink: 0; /* shown only when measured to fit — never squeezed */
 	}
@@ -1456,37 +1463,36 @@ 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);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		font: 400 12.5px / 1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 		padding: 2px 8px;
 		cursor: pointer;
 		flex-shrink: 0;
-		margin-top: 2px;
 	}
 
 	.wg-ev-more:hover {
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 	}
 
 	.wg-ev-more:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 
 	/* ─── Focus-visible ──────────────────────────────── */
 	.wg-cell:focus-visible {
-		outline: 2px solid var(--dt-accent, #2563eb);
+		outline: 2px solid var(--dt-accent, #1d4fd7);
 		outline-offset: -2px;
 	}
 
 	.wg-ev:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 
 	.wg-ev--dragging {
 		cursor: grabbing;
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 		box-shadow: inset 0 0 0 1px var(--ev-color);
 	}
 </style>