@nomideusz/svelte-calendar 1.3.0 → 1.4.1

package/dist/views/mobile/MobileWeek.svelte

@@ -10,7 +10,7 @@ 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, fmtWeekRange, weekdayShort } from "../../core/locale.js";
+import { fmtTime as _fmtTime, fmtDayNum, 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();
@@ -53,7 +53,8 @@ const dayCells = $derived.by(() => {
 		const jsDay = d.getDay();
 		const isoDay = jsDay === 0 ? 7 : jsDay;
 		if (hideSet.has(isoDay)) continue;
-		const isToday = ms === todayMs;
+		// A dateless weekly template (showDates=false) has no today to mark.
+		const isToday = showDates && ms === todayMs;
 		const isPast = equalDays ? false : ms < todayMs;
 		const isWeekend = jsDay === 0 || jsDay === 6;
 		const isDisabled = disabledSet.has(ms);
@@ -99,7 +100,9 @@ function evTimeLabel(ev) {
 /** Visible time on a day row: the start, or "until 01:00" on the day an
 *  overnight event runs into. */
 function evRowTime(ev, dayMs) {
-	if (inAllDayStrip(ev)) return L.allDay;
+	// A multi-day band says "All day" once, on its first row this week;
+	// every row's aria-label still says it.
+	if (inAllDayStrip(ev)) return dayCells.find((c) => c.events.includes(ev))?.ms === dayMs ? L.allDay : "";
 	if (ev.start.getTime() < dayMs) return `${L.until} ${fmtTime(ev.end)}`;
 	return fmtTime(ev.start);
 }
@@ -204,7 +207,7 @@ function handleDayKeydown(e, dayMs) {
 				<div class="mw-date">
 					<span class="mw-day-name" class:mw-day-name--today={cell.isToday}>{cell.dayName}</span>
 					{#if showDates}
-						<span class="mw-day-num" class:mw-day-num--today={cell.isToday}>{cell.dayNum}</span>
+						<span class="mw-day-num" class:mw-day-num--today={cell.isToday}>{fmtDayNum(cell.ms, locale)}</span>
 					{/if}
 				</div>
 
@@ -224,11 +227,11 @@ function handleDayKeydown(e, dayMs) {
 								class:mw-ev--tentative={ev.status === 'tentative'}
 								class:mw-ev--full={ev.status === 'full'}
 								class:mw-ev--limited={ev.status === 'limited'}
-								style:--ev-color={ev.color ?? 'var(--dt-accent)'}
+								style:--ev-color={ev.color ?? (inAllDayStrip(ev) ? 'var(--dt-accent)' : 'var(--dt-event, var(--dt-accent))')}
 								onclick={(e) => { e.stopPropagation(); oneventclick?.(ev); }}
 								onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); oneventclick?.(ev); } }}
 								onpointerenter={() => oneventhover?.(ev)}
-								aria-label="{ev.title}{statusText(ev)}, {evTimeLabel(ev)}"
+								aria-label="{ev.title}{statusText(ev)}, {dateLong(cell.ms, locale)}, {evTimeLabel(ev)}"
 							>
 								<span class="mw-ev-stripe"></span>
 								<div class="mw-ev-body">
@@ -244,6 +247,7 @@ function handleDayKeydown(e, dayMs) {
 								type="button"
 								class="mw-ev-more"
 								aria-expanded={expandedDays.has(cell.ms)}
+								aria-label="{expandedDays.has(cell.ms) ? L.showLess : L.nMore(cell.totalCount - MAX_EVENTS)}, {dateLong(cell.ms, locale)}"
 								onclick={() => toggleExpand(cell.ms)}
 							>
 								{expandedDays.has(cell.ms) ? L.showLess : L.nMore(cell.totalCount - MAX_EVENTS)}
@@ -268,7 +272,7 @@ function handleDayKeydown(e, dayMs) {
 		user-select: none;
 		font-variant-numeric: tabular-nums;
 		overflow: hidden;
-		background: var(--dt-bg, #fff);
+		background: var(--dt-bg, #efebe9);
 		-webkit-tap-highlight-color: transparent;
 		touch-action: pan-y pinch-zoom;
 	}
@@ -282,7 +286,7 @@ function handleDayKeydown(e, dayMs) {
 		overscroll-behavior: contain;
 		-webkit-overflow-scrolling: touch;
 		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;
 	}
 	.mw--auto .mw-list { overflow-y: visible; }
 	.mw-list--animate {
@@ -308,34 +312,34 @@ function handleDayKeydown(e, dayMs) {
 		text-align: left;
 		width: 100%;
 		-webkit-tap-highlight-color: transparent;
-		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 		min-height: 56px;
 	}
 	.mw-row:last-child {
 		border-bottom: none;
 	}
 	.mw-row:has(.mw-row-target:active) {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.mw-row--today {
-		background: color-mix(in srgb, var(--dt-accent, #2563eb) 4%, transparent);
+		background: color-mix(in srgb, var(--dt-accent, #1d4fd7) 4%, transparent);
 	}
 	/* Token-based dim (not subtree opacity) so past rows stay legible/tappable */
 	.mw-row--past {
-		background: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 3%, transparent);
+		background: color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 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));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.mw-row--disabled {
 		background-image: repeating-linear-gradient(
 			135deg,
 			transparent,
 			transparent 6px,
-			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 6px,
-			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 12px
+			color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 6px,
+			color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 12px
 		);
 	}
 	.mw-row-target {
@@ -353,7 +357,7 @@ function handleDayKeydown(e, dayMs) {
 	}
 	.mw-row-target:focus-visible {
 		outline: none;
-		box-shadow: inset 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: inset 0 0 0 2px var(--dt-text, #0f0f0f);
 	}
 
 	/* ─── Date column ────────────────────────────────── */
@@ -373,10 +377,10 @@ function handleDayKeydown(e, dayMs) {
 		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));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.mw-day-name--today {
-		color: var(--dt-accent, #2563eb);
+		color: var(--dt-accent, #1d4fd7);
 	}
 
 	/* The date is the typography: large and regular, narrowed like the planner's */
@@ -385,10 +389,10 @@ function handleDayKeydown(e, dayMs) {
 		font-stretch: 90%;
 		font-variant-numeric: tabular-nums;
 		letter-spacing: -0.02em;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 	}
 	.mw-day-num--today {
-		color: var(--dt-accent, #2563eb);
+		color: var(--dt-accent, #1d4fd7);
 	}
 
 	/* ─── Events column ──────────────────────────────── */
@@ -407,7 +411,7 @@ function handleDayKeydown(e, dayMs) {
 
 	.mw-empty {
 		font: 400 13px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 
 	/* ─── Event chip ─────────────────────────────────── */
@@ -423,20 +427,20 @@ function handleDayKeydown(e, dayMs) {
 		transition: background 120ms;
 		-webkit-tap-highlight-color: transparent;
 		border: none;
-		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.3));
+		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));
 		text-align: left;
 		padding: 0;
 		pointer-events: auto;
 	}
 	.mw-ev:hover,
 	.mw-ev:active {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.mw-ev--selected {
 		box-shadow: inset 0 0 0 1px var(--ev-color);
 	}
 	.mw-ev--current {
-		background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
+		background: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
 	}
 	/* All day: a solid band on the event colour, no tint. */
 	.mw-ev--allday {
@@ -460,14 +464,14 @@ function handleDayKeydown(e, dayMs) {
 	   limited one is set in grey with a dashed bar — never a bare opacity. */
 	.mw-ev--cancelled .mw-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));
 	}
 	.mw-ev--cancelled .mw-ev-stripe {
 		opacity: 0.45; /* decorative bar only */
 	}
 	.mw-ev--tentative .mw-ev-title,
 	.mw-ev--full .mw-ev-title {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.mw-ev--tentative .mw-ev-stripe,
 	.mw-ev--limited .mw-ev-stripe {
@@ -500,7 +504,7 @@ function handleDayKeydown(e, dayMs) {
 
 	.mw-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;
@@ -511,14 +515,14 @@ function handleDayKeydown(e, dayMs) {
 	.mw-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));
 		white-space: nowrap;
 		flex-shrink: 0;
 	}
 
 	.mw-ev-more {
 		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 		padding: 2px 4px;
 		min-height: 32px;
 		border: none;
@@ -530,25 +534,21 @@ function handleDayKeydown(e, dayMs) {
 		pointer-events: auto;
 		-webkit-tap-highlight-color: transparent;
 	}
-	/* Hit-slop: 44px effective touch target */
-	.mw-ev-more::before {
-		content: '';
-		position: absolute;
-		left: 0;
-		right: 0;
-		top: 50%;
-		transform: translateY(-50%);
-		height: 44px;
+	@media (pointer: coarse) {
+		.mw-ev-more {
+			min-height: 44px;
+			min-width: 44px;
+		}
 	}
 	.mw-ev-more:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);
 	}
 
 	/* ─── Chevron ────────────────────────────────────── */
 	.mw-chevron {
 		flex-shrink: 0;
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		color: var(--dt-text-3, rgba(15, 15, 15, 0.38));
 		position: relative;
 		z-index: 1;
 		pointer-events: none;
@@ -557,6 +557,6 @@ function handleDayKeydown(e, dayMs) {
 	/* ─── Focus ──────────────────────────────────────── */
 	.mw-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);
 	}
 </style>

package/dist/views/month/MonthGrid.svelte

@@ -9,7 +9,8 @@
 <script lang="ts">import { useCalendarContext } from "../shared/context.svelte.js";
 import { createClock } from "../../core/clock.svelte.js";
 import { DAY_MS, sod, addDaysMs, isAllDay } from "../../core/time.js";
-import { fmtTime, weekdayShort } from "../../core/locale.js";
+import { fmtTime, fmtDayNum, weekdayShort } from "../../core/locale.js";
+import { dateLong } from "../shared/format.js";
 let { events = [], style = "", height = null, locale, focusDate, oneventclick, selectedEventId = null } = $props();
 const ctx = useCalendarContext();
 const L = $derived(ctx.labels);
@@ -139,11 +140,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);
@@ -236,18 +244,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}
+						{fmtDayNum(cell.ms, locale)}
 					</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"
@@ -266,9 +281,9 @@ 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)}` : ''}"
+									aria-label="{ev.title}, {dateLong(cell.ms, locale)}{chipTime(ev) ? `, ${chipTime(ev)}` : ''}"
 									onclick={(e) => {
 										e.stopPropagation();
 										oneventclick?.(ev, e.currentTarget.getBoundingClientRect());
@@ -281,15 +296,19 @@ 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"
 								aria-expanded={ondayclick ? undefined : false}
-								aria-label={L.nMore(cell.overflow)}
+								aria-label="{L.nMore(cell.overflow)}, {dateLong(cell.ms, locale)}"
 								onclick={(e) => overflowClick(e, cell)}
 							>
-								{dotsMode ? `+${cell.overflow}` : L.nMore(cell.overflow)}
+								{L.nMore(cell.overflow)}
 							</button>
 						{:else if expandedMs === cell.ms}
 							<button
@@ -338,7 +357,7 @@ function chipTime(e) {
 		font-variant-numeric: tabular-nums;
 		text-transform: uppercase;
 		letter-spacing: 0.08em;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
 
 	.mg-body {
@@ -372,7 +391,7 @@ 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. text-2, not text-3: a 22px numeral still needs 4.5:1. */
@@ -380,7 +399,7 @@ function chipTime(e) {
 		background: var(--dt-surface, transparent);
 	}
 	.mg-cell--out .mg-daynum {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
 	.mg-cell--today {
 		background: var(--dt-today-bg);
@@ -396,10 +415,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-text, #0f0f0f);
 		outline-offset: -2px;
 	}
 
@@ -446,10 +465,10 @@ function chipTime(e) {
 		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 {
@@ -493,11 +512,11 @@ function chipTime(e) {
 		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-text, #0f0f0f);
 		outline: none;
 	}
 
@@ -518,13 +537,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;