@nomideusz/svelte-calendar 0.20.1 → 1.0.0

package/dist/primitives/EventBlock.svelte

@@ -9,7 +9,10 @@
   Emits: onclick, ondragstart, onresize (for future interaction wiring)
 -->
 <script lang="ts">import { fmtTime, fmtDuration, getLabels } from "../core/locale.js";
-const L = $derived(getLabels());
+import { getContext } from "svelte";
+// Inside a Calendar: its per-instance labels; standalone: the global ones.
+const calendarCtx = getContext("calendar");
+const L = $derived(calendarCtx?.labels ?? getLabels());
 let { event, variant = "chip", active = false, past = false, showTime = false, showDuration = false, editable = false, onclick, children } = $props();
 const accentColor = $derived(event.color || "var(--dt-accent, #2563eb)");
 const isCancelled = $derived(event.status === "cancelled");
@@ -18,10 +21,11 @@ const isFull = $derived(event.status === "full");
 const isLimited = $derived(event.status === "limited");
 const ariaLabel = $derived.by(() => {
 	const t = event.title;
-	const time = `${fmtTime(event.start)} to ${fmtTime(event.end)}`;
+	const time = `${fmtTime(event.start)} – ${fmtTime(event.end)}`;
 	const dur = fmtDuration(event.start, event.end);
 	const loc = event.location ? `, ${event.location}` : "";
-	const statusStr = isCancelled ? ", cancelled" : isTentative ? ", tentative" : isFull ? ", full" : isLimited ? ", limited" : "";
+	const status = isCancelled ? L.cancelled : isTentative ? L.tentative : isFull ? L.full : isLimited ? L.limited : "";
+	const statusStr = status ? `, ${status}` : "";
 	const activeStr = active ? `, ${L.happeningNow}` : past ? `, ${L.past}` : "";
 	return `${t}${loc}, ${time}, ${dur}${statusStr}${activeStr}`;
 });
@@ -63,11 +67,7 @@ function handleKeydown(e) {
 					{/each}
 				</div>
 			{/if}
-			{#if isCancelled}<span class="eb-status-badge eb-cancelled-badge">Cancelled</span>{/if}
-			{#if isTentative}<span class="eb-status-badge eb-tentative-badge">Tentative</span>{/if}
-			{#if isFull}<span class="eb-status-badge eb-full-badge">Full</span>{/if}
-			{#if isLimited}<span class="eb-status-badge eb-limited-badge">Limited</span>{/if}
-			{#if active}<span class="eb-live-badge">{L.now}</span>{/if}
+			{@render badges()}
 		</div>
 	{:else}
 		<!-- row -->
@@ -90,13 +90,20 @@ function handleKeydown(e) {
 				{/each}
 			</span>
 		{/if}
-		{#if isCancelled}<span class="eb-status-badge eb-cancelled-badge">Cancelled</span>{/if}
-		{#if isFull}<span class="eb-status-badge eb-full-badge">Full</span>{/if}
-		{#if isLimited}<span class="eb-status-badge eb-limited-badge">Limited</span>{/if}
-		{#if active}<span class="eb-live-badge">{L.now}</span>{/if}
+		{@render badges()}
 	{/if}
 {/snippet}
 
+<!-- Status badges: the same set in card and row. The badge CSS uppercases
+     the (lower-case) status labels. -->
+{#snippet badges()}
+	{#if isCancelled}<span class="eb-status-badge eb-cancelled-badge">{L.cancelled}</span>{/if}
+	{#if isTentative}<span class="eb-status-badge eb-tentative-badge">{L.tentative}</span>{/if}
+	{#if isFull}<span class="eb-status-badge eb-full-badge">{L.full}</span>{/if}
+	{#if isLimited}<span class="eb-status-badge eb-limited-badge">{L.limited}</span>{/if}
+	{#if active}<span class="eb-live-badge">{L.now}</span>{/if}
+{/snippet}
+
 {#if onclick}
 <div
 	class="eb eb-{variant}"
@@ -331,8 +338,8 @@ function handleKeydown(e) {
 		background: color-mix(in srgb, var(--_color) 12%, transparent);
 	}
 	.eb-full-badge {
-		color: #2563eb;
-		background: color-mix(in srgb, #2563eb 15%, transparent);
+		color: var(--dt-accent, #2563eb);
+		background: color-mix(in srgb, var(--dt-accent, #2563eb) 15%, transparent);
 	}
 	.eb-limited-badge {
 		color: var(--_color);

package/dist/primitives/FloatingPanel.svelte

@@ -1,9 +1,48 @@
 <script module lang="ts">// Phone sheet scroll-lock: nested panels each take a lock; the page behind
 // unlocks when the last one closes.
 let sheetLocks = 0;
+// Open panels, oldest first. Escape and the outside tap belong to the
+// topmost one only, so a nested panel closes without its parent.
+const openPanels = [];
+// Events a panel already acted on — the next panel down must not act on
+// the same keydown/pointerdown once the top one unmounts mid-dispatch.
+const handled = new WeakSet();
+/**
+* Spend the click a closing tap synthesizes. `onclose` usually unmounts the
+* panel before that click arrives, so the listener lives on `window`,
+* outside the component: it eats the next click (capture phase, before any
+* calendar handler) and removes itself then, on the next pointerdown, on a
+* pointercancel (no click follows), or after a timeout.
+*/
+function swallowNextClick() {
+	const eat = (e) => {
+		e.stopPropagation();
+		e.preventDefault();
+		done();
+	};
+	const done = () => {
+		clearTimeout(timer);
+		window.removeEventListener("click", eat, true);
+		window.removeEventListener("pointerdown", done, true);
+		window.removeEventListener("pointercancel", done, true);
+	};
+	const timer = setTimeout(done, 1500);
+	window.addEventListener("click", eat, true);
+	window.addEventListener("pointercancel", done, true);
+	// Armed after this pointerdown has finished dispatching.
+	setTimeout(() => window.addEventListener("pointerdown", done, true), 0);
+}
+export {};
 </script>
 
-<script lang="ts">let { title = "", anchor = {
+<script lang="ts">// A non-modal window that floats over the calendar: opened beside the
+// block that was clicked (right of it, left when the right edge is near,
+// clamped to the viewport), dragged by its header, closed by Escape, its
+// own button, or a click anywhere outside — that outside click is spent on
+// closing, so a block under it is not opened by the same tap. Below 640px
+// it is a bottom sheet instead.
+import { untrack } from "svelte";
+let { title = "", anchor = {
 	x: 24,
 	y: 24
 }, width = 440, theme = "", closeLabel = "Close", closeOnOutside = true, onclose, children } = $props();
@@ -28,11 +67,66 @@ function beside(a) {
 	const px = right + w + EDGE <= window.innerWidth ? right : a.x - GAP - w >= EDGE ? a.x - GAP - w : a.x;
 	place(px, a.y);
 }
+// Where focus goes back to when the panel closes: whatever held it when
+// the panel opened (or when a new anchor re-focused it).
+let returnFocus = null;
+// Set once the user drags the panel: from then on a size change re-clamps
+// it where it is instead of jumping back beside the anchor.
+let dragged = false;
 // A new anchor (the next click) re-places the panel; each run focuses it.
 $effect(() => {
+	dragged = false;
 	beside(anchor);
+	const active = document.activeElement;
+	if (active instanceof HTMLElement && active !== document.body && !el?.contains(active)) {
+		returnFocus = active;
+	}
 	el?.focus({ preventScroll: true });
 });
+// Content that grows (or shrinks) after opening — a form section, loaded
+// data — must stay inside the viewport; so must a resized window.
+$effect(() => {
+	if (!el) return;
+	const reclamp = () => {
+		if (dragged) place(left, top);
+		else beside(anchor);
+	};
+	const ro = new ResizeObserver(reclamp);
+	ro.observe(el);
+	window.addEventListener("resize", reclamp);
+	return () => {
+		ro.disconnect();
+		window.removeEventListener("resize", reclamp);
+	};
+});
+// Topmost-panel stack + focus restore on close.
+const myId = Symbol("floating-panel");
+const isTopmost = () => openPanels[openPanels.length - 1] === myId;
+$effect(() => {
+	const id = myId;
+	openPanels.push(id);
+	const panel = untrack(() => el);
+	return () => {
+		const i = openPanels.indexOf(id);
+		if (i !== -1) openPanels.splice(i, 1);
+		// Only pull focus back when it would otherwise be lost (inside the
+		// closing panel, or dropped to <body>) — not from where the user
+		// has since moved it.
+		const active = document.activeElement;
+		const lost = !active || active === document.body || !!panel && panel.contains(active);
+		const target = returnFocus;
+		if (lost && target && target.isConnected) {
+			target.focus({ preventScroll: true });
+		} else if (lost && target) {
+			// The opener may be re-rendered by the close (a view refresh);
+			// try once more after the DOM settles.
+			queueMicrotask(() => {
+				const a = document.activeElement;
+				if ((!a || a === document.body) && target.isConnected) target.focus({ preventScroll: true });
+			});
+		}
+	};
+});
 // In sheet mode the page behind must not scroll — drags on the sheet
 // chrome, or reaching the end of the sheet body, would otherwise reach it.
 $effect(() => {
@@ -59,35 +153,36 @@ function down(e) {
 	e.currentTarget.setPointerCapture(e.pointerId);
 }
 function move(e) {
-	if (grab) place(e.clientX - grab.dx, e.clientY - grab.dy);
+	if (!grab) return;
+	dragged = true;
+	place(e.clientX - grab.dx, e.clientY - grab.dy);
 }
 function up() {
 	grab = null;
 }
 // The outside pointerdown is swallowed here, before any calendar handler,
 // and so is the click it would synthesize — one tap closes, the next acts.
-let swallowClick = false;
+// With nested panels only the topmost reacts: a tap outside it (even on
+// the panel beneath) closes it alone.
 function outsideDown(e) {
 	if (!closeOnOutside || !el || el.contains(e.target)) return;
+	if (handled.has(e) || !isTopmost()) return;
+	handled.add(e);
 	e.stopPropagation();
 	e.preventDefault();
-	swallowClick = true;
+	swallowNextClick();
 	onclose?.();
 }
-function outsideClick(e) {
-	if (!swallowClick) return;
-	swallowClick = false;
-	e.stopPropagation();
-	e.preventDefault();
+function onKeydown(e) {
+	// defaultPrevented: a control inside the panel (a combobox, a menu)
+	// already used this Escape to close itself.
+	if (e.key !== "Escape" || e.defaultPrevented || handled.has(e) || !isTopmost()) return;
+	handled.add(e);
+	onclose?.();
 }
-export {};
 </script>
 
-<svelte:window
-	onkeydown={(e) => e.key === 'Escape' && onclose?.()}
-	onpointerdowncapture={outsideDown}
-	onclickcapture={outsideClick}
-/>
+<svelte:window onkeydown={onKeydown} onpointerdowncapture={outsideDown} />
 
 <div
 	class="fp"

package/dist/primitives/FloatingPanel.svelte.d.ts

@@ -1,14 +1,16 @@
 import type { Snippet } from 'svelte';
-type Anchor = {
+/** What a FloatingPanel opens beside: a viewport rect (a clicked block's `getBoundingClientRect()`), or a bare point. */
+export type FloatingPanelAnchor = {
     x: number;
     y: number;
     width?: number;
     height?: number;
 };
-type $$ComponentProps = {
+export interface FloatingPanelProps {
     title?: string;
     /** What to open beside: the clicked block's viewport rect, or a bare point. */
-    anchor?: Anchor;
+    anchor?: FloatingPanelAnchor;
+    /** Panel width in px (default 440). Below 640px viewport width it is a bottom sheet. */
     width?: number;
     /** The same `--dt-*` theme string a Calendar takes. */
     theme?: string;
@@ -17,7 +19,7 @@ type $$ComponentProps = {
     closeOnOutside?: boolean;
     onclose?: () => void;
     children: Snippet;
-};
-declare const FloatingPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+}
+declare const FloatingPanel: import("svelte").Component<FloatingPanelProps, {}, "">;
 type FloatingPanel = ReturnType<typeof FloatingPanel>;
 export default FloatingPanel;

package/dist/primitives/NowIndicator.svelte

@@ -12,14 +12,19 @@
     <NowIndicator mode="badge" />
 -->
 <script lang="ts">import { getLabels } from "../core/locale.js";
-const L = $derived(getLabels());
+import { getContext } from "svelte";
+// Inside a Calendar: its per-instance labels; standalone: the global ones.
+const calendarCtx = getContext("calendar");
+const L = $derived(calendarCtx?.labels ?? getLabels());
 let { mode = "line", position = 0, orientation = "vertical", time = "", seconds = "", showLabel = true, color, children } = $props();
 const posStyle = $derived(orientation === "vertical" ? `left: ${position}px` : `top: ${position}px`);
 const colorVar = $derived(color ? `--ni-color: ${color}` : "");
 </script>
 
 {#if mode === 'badge'}
-	<span class="ni-badge" style={colorVar} role="status" aria-live="polite" aria-label="{L.currentTime}: {time}">
+	<!-- Plain text, not a live region: the time it carries changes every
+	     second, and a status role would read each change aloud. -->
+	<span class="ni-badge" style={colorVar}>
 		{#if children}
 			{@render children()}
 		{:else}
@@ -27,7 +32,9 @@ const colorVar = $derived(color ? `--ni-color: ${color}` : "");
 		{/if}
 	</span>
 {:else if mode === 'dot'}
-	<div class="ni ni-dot {orientation}" style="{posStyle}; {colorVar}" role="status" aria-label="{L.currentTime}: {time}">
+	<!-- Decorative: the visible time is the grid's own; hidden from AT so a
+	     ticking label is never announced. -->
+	<div class="ni ni-dot {orientation}" style="{posStyle}; {colorVar}" aria-hidden="true">
 		<div class="ni-dot-circle"></div>
 		{#if showLabel && time}
 			<div class="ni-label">
@@ -37,7 +44,7 @@ const colorVar = $derived(color ? `--ni-color: ${color}` : "");
 		{/if}
 	</div>
 {:else}
-	<div class="ni ni-line {orientation}" style="{posStyle}; {colorVar}" role="status" aria-label="{L.currentTime}: {time}">
+	<div class="ni ni-line {orientation}" style="{posStyle}; {colorVar}" aria-hidden="true">
 		<div class="ni-line-bar"></div>
 		{#if showLabel && time}
 			<div class="ni-label">

package/dist/primitives/TimeGutter.svelte

@@ -8,23 +8,26 @@
 <script lang="ts">import { HOURS } from "../core/time.js";
 import { fmtH } from "../core/locale.js";
 let { orientation = "horizontal", hourSize = 120, halfHour = true, hours = HOURS, formatHour = fmtH } = $props();
+// Labels sit relative to the first hour shown: hours [6…21] start at 0px,
+// not 6 hours down.
+const firstHour = $derived(hours[0] ?? 0);
 </script>
 
 {#if orientation === 'horizontal'}
-	<div class="tg tg-h" style="--tg-hour: {hourSize}px">
+	<div class="tg tg-h" style="--tg-hour: {hourSize}px; --tg-count: {hours.length}">
 		{#each hours as h}
-			<div class="tg-tick" style="left: {h * hourSize}px">
+			<div class="tg-tick" style="left: {(h - firstHour) * hourSize}px">
 				<span class="tg-label">{formatHour(h)}</span>
 			</div>
 			{#if halfHour}
-				<div class="tg-tick tg-tick-half" style="left: {(h + 0.5) * hourSize}px"></div>
+				<div class="tg-tick tg-tick-half" style="left: {(h - firstHour + 0.5) * hourSize}px"></div>
 			{/if}
 		{/each}
 	</div>
 {:else}
-	<div class="tg tg-v" style="--tg-hour: {hourSize}px">
+	<div class="tg tg-v" style="--tg-hour: {hourSize}px; --tg-count: {hours.length}">
 		{#each hours as h}
-			<div class="tg-row" style="top: {h * hourSize}px; height: {hourSize}px">
+			<div class="tg-row" style="top: {(h - firstHour) * hourSize}px; height: {hourSize}px">
 				<span class="tg-label">{formatHour(h)}</span>
 			</div>
 		{/each}
@@ -41,7 +44,7 @@ let { orientation = "horizontal", hourSize = 120, halfHour = true, hours = HOURS
 	/* ── Horizontal ── */
 	.tg-h {
 		height: 100%;
-		width: calc(24 * var(--tg-hour));
+		width: calc(var(--tg-count, 24) * var(--tg-hour));
 	}
 	.tg-tick {
 		position: absolute;
@@ -66,6 +69,7 @@ let { orientation = "horizontal", hourSize = 120, halfHour = true, hours = HOURS
 	/* ── Vertical ── */
 	.tg-v {
 		width: 48px;
+		height: calc(var(--tg-count, 24) * var(--tg-hour));
 		flex-shrink: 0;
 	}
 	.tg-row {

package/dist/primitives/index.d.ts

@@ -4,3 +4,4 @@ export { default as TimeGutter } from './TimeGutter.svelte';
 export { default as DayHeader } from './DayHeader.svelte';
 export { default as EmptySlot } from './EmptySlot.svelte';
 export { default as FloatingPanel } from './FloatingPanel.svelte';
+export type { FloatingPanelAnchor, FloatingPanelProps } from './FloatingPanel.svelte';

package/dist/text-fit.d.ts

@@ -1,6 +1,12 @@
-import { type PrepareOptions } from '@chenglou/pretext';
 import type { Attachment } from 'svelte/attachments';
-export declare function lineCount(text: string, font: string, width: number, options?: PrepareOptions): number;
+/** How text wraps when measured — the CSS properties of the same names. */
+export interface TextLayoutOptions {
+    whiteSpace?: 'normal' | 'pre-wrap';
+    wordBreak?: 'normal' | 'keep-all';
+    /** Extra px between characters */
+    letterSpacing?: number;
+}
+export declare function lineCount(text: string, font: string, width: number, options?: TextLayoutOptions): number;
 export declare function fits(text: string, font: string, width: number, lines?: number): boolean;
 /** Height the text will take at `width`, before it is in the DOM. */
 export declare function textHeight(text: string, font: string, width: number, lineHeight: number): number;

package/dist/views/agenda/AgendaDay.svelte

@@ -12,11 +12,12 @@
 *   Clean numbered schedule list.
 */
 import { createClock } from "../../core/clock.svelte.js";
-import { sod, DAY_MS, dayNum, isAllDay, isMultiDay } from "../../core/time.js";
+import { sod, addDaysMs, dayNum, isAllDay } from "../../core/time.js";
 import { weekdayLong, monthLong } from "../../core/locale.js";
 import { useCalendarContext } from "../shared/context.svelte.js";
 import EventContent from "../shared/EventContent.svelte";
 import { fmtTime, duration, timeUntilMs, progress, groupIntoSlots } from "../shared/format.js";
+import { createSwipe } from "../mobile/swipe.js";
 const ctx = useCalendarContext();
 const L = $derived(ctx.labels);
 const emptySnippet = $derived(ctx.emptySnippet);
@@ -36,28 +37,28 @@ const compact = $derived(ctx.compact);
 const oneventhover = $derived(ctx.oneventhover);
 const disabledSet = $derived(ctx.disabledSet);
 // ── Swipe navigation (mobile, touch only) ──────────
-let swipeStartX = 0;
-let swipeStartY = 0;
-let swipeActive = false;
-const SWIPE_THRESHOLD = 50;
-function onPointerDown(e) {
-	if (!isMobile || e.pointerType !== "touch") return;
-	swipeActive = true;
-	swipeStartX = e.clientX;
-	swipeStartY = e.clientY;
-}
-function onPointerUp(e) {
-	if (!swipeActive || e.pointerType !== "touch") return;
-	swipeActive = false;
-	const dx = e.clientX - swipeStartX;
-	const dy = e.clientY - swipeStartY;
-	if (Math.abs(dx) > SWIPE_THRESHOLD && Math.abs(dx) > Math.abs(dy) * 1.4) {
-		if (dx > 0) viewState?.prev();
-		else viewState?.next();
+// Touch events, not pointer events: once the browser claims a touch for
+// panning it sends pointercancel and the pointerup never arrives.
+const swipe = createSwipe({
+	disabled: () => !isMobile,
+	onmove: () => {},
+	onend: (dir) => {
+		if (dir > 0) viewState?.prev();
+		else if (dir < 0) viewState?.next();
 	}
+});
+// ── Status suffix (aria) ────────────────────────────
+function statusText(ev) {
+	if (ev.status === "cancelled") return ` (${L.cancelled})`;
+	if (ev.status === "tentative") return ` (${L.tentative})`;
+	if (ev.status === "full") return ` (${L.full})`;
+	if (ev.status === "limited") return ` (${L.limited})`;
+	return "";
 }
-function onPointerCancel() {
-	swipeActive = false;
+/** All-day events and timed ones at least a (wall-clock) day long go to
+*  the all-day strip; a shorter overnight event is listed with its time. */
+function inAllDayStrip(ev) {
+	return isAllDay(ev) || ev.end.getTime() >= addDaysMs(ev.start.getTime(), 1);
 }
 // ── Format helpers (delegated to shared/format.ts) ──
 const fmt = (d) => fmtTime(d, locale);
@@ -69,18 +70,18 @@ function handleClick(ev) {
 }
 // ── Day derivations ─────────────────────────────────
 const dayMs = $derived(focusDate ? sod(focusDate.getTime()) : clock.today);
-const dayEnd = $derived(dayMs + DAY_MS);
+const dayEnd = $derived(addDaysMs(dayMs, 1));
 const isToday = $derived(dayMs === clock.today);
-const isTomorrow = $derived(dayMs === clock.today + DAY_MS);
+const isTomorrow = $derived(dayMs === addDaysMs(clock.today, 1));
 const isPastDay = $derived(equalDays ? false : dayMs < clock.today);
 /** All events for this day, sorted chronologically */
 const dayEvents = $derived.by(() => {
 	return events.filter((ev) => ev.start.getTime() < dayEnd && ev.end.getTime() > dayMs).sort((a, b) => a.start.getTime() - b.start.getTime());
 });
 /** All-day / multi-day events shown in a separate strip */
-const allDayBanner = $derived(dayEvents.filter((ev) => isAllDay(ev) || isMultiDay(ev)));
+const allDayBanner = $derived(dayEvents.filter(inAllDayStrip));
 /** Timed events (non-all-day) for normal slot rendering */
-const timedDayEvents = $derived(dayEvents.filter((ev) => !isAllDay(ev) && !isMultiDay(ev)));
+const timedDayEvents = $derived(dayEvents.filter((ev) => !inAllDayStrip(ev)));
 const dayCat = $derived.by(() => {
 	const now = clock.tick;
 	const past = [];
@@ -118,7 +119,7 @@ const visibleDone = $derived(showAllDone ? dayCat.past : dayCat.past.slice(-DONE
 const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.length - DONE_VISIBLE));
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions (touch swipe only; no pointer/keyboard role) -->
 <div
 	class="ag ag--day"
 	class:ag--disabled={disabledSet.has(dayMs)}
@@ -126,9 +127,10 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	class:ag--auto={autoHeight}
 	style={style || undefined}
 	style:height={height ? `${height}px` : undefined}
-	onpointerdown={onPointerDown}
-	onpointerup={onPointerUp}
-	onpointercancel={onPointerCancel}
+	ontouchstart={swipe.ontouchstart}
+	ontouchmove={swipe.ontouchmove}
+	ontouchend={swipe.ontouchend}
+	ontouchcancel={swipe.ontouchcancel}
 >
 	<div class="ag-body" role="group" aria-label={L.todaysLineup}>
 		<!-- ─── In-view date header (only when the chrome doesn't label the day) ─── -->
@@ -154,7 +156,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 							class="ag-allday-chip"
 							class:ag-allday-chip--selected={selectedEventId === ev.id}
 							style:--ev-color={ev.color || 'var(--dt-accent)'}
-							aria-label="{ev.title}, {L.allDay}"
+							aria-label="{ev.title}{statusText(ev)}, {L.allDay}"
 							onclick={() => handleClick(ev)}
 							onpointerenter={() => oneventhover?.(ev)}
 						>
@@ -182,7 +184,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 							class:ag-compact-row--cancelled={ev.status === 'cancelled'}
 							class:ag-compact-row--tentative={ev.status === 'tentative'}
 							style:--ev-color={ev.color || 'var(--dt-accent)'}
-							aria-label="{ev.title}, {fmt(ev.start)}, {duration(ev)}"
+							aria-label="{ev.title}{statusText(ev)}, {fmt(ev.start)}, {duration(ev)}"
 							onclick={() => handleClick(ev)}
 							onpointerenter={() => oneventhover?.(ev)}
 						>
@@ -277,7 +279,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 									class="ag-compact-row ag-compact-row--queue"
 									class:ag-compact-row--selected={selectedEventId === ev.id}
 									style:--ev-color={ev.color || 'var(--dt-accent)'}
-									aria-label="{ev.title}, {fmt(ev.start)}, {duration(ev)}"
+									aria-label="{ev.title}{statusText(ev)}, {fmt(ev.start)}, {duration(ev)}"
 									onclick={() => handleClick(ev)}
 									onpointerenter={() => oneventhover?.(ev)}
 								>
@@ -298,7 +300,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 								class:ag-card--hero={i === 0}
 								class:ag-card--selected={selectedEventId === ev.id}
 								style:--ev-color={ev.color || 'var(--dt-accent)'}
-								aria-label="{ev.title}, {fmt(ev.start)}, {duration(ev)}"
+								aria-label="{ev.title}{statusText(ev)}, {fmt(ev.start)}, {duration(ev)}"
 								onclick={() => handleClick(ev)}
 								onpointerenter={() => oneventhover?.(ev)}
 							>
@@ -345,7 +347,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 							class="ag-log-row"
 							class:ag-log-row--selected={selectedEventId === ev.id}
 							style:--ev-color={ev.color || 'var(--dt-accent)'}
-							aria-label="{ev.title}, {fmt(ev.start)} to {fmt(ev.end)}"
+							aria-label="{ev.title}{statusText(ev)}, {fmt(ev.start)} – {fmt(ev.end)}"
 							onclick={() => handleClick(ev)}
 							onpointerenter={() => oneventhover?.(ev)}
 						>
@@ -378,7 +380,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 							class:ag-card--full={ev.status === 'full'}
 							class:ag-card--limited={ev.status === 'limited'}
 							style:--ev-color={ev.color || 'var(--dt-accent)'}
-							aria-label="{ev.title}{ev.status === 'cancelled' ? ' (cancelled)' : ''}{ev.status === 'tentative' ? ' (tentative)' : ''}{ev.status === 'full' ? ' (full)' : ''}{ev.status === 'limited' ? ' (limited)' : ''}, {fmt(ev.start)} to {fmt(ev.end)}, {duration(ev)}"
+							aria-label="{ev.title}{statusText(ev)}, {fmt(ev.start)} – {fmt(ev.end)}, {duration(ev)}"
 							onclick={() => handleClick(ev)}
 							onpointerenter={() => oneventhover?.(ev)}
 						>
@@ -767,6 +769,12 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	}
 	/* Mobile: stack queue columns vertically — "Up next" (hero) first,
 	   Now/Done status column second */
+	/* Horizontal swipes are ours (day navigation); the browser keeps
+	   vertical scrolling and pinch-zoom. */
+	.ag--mobile,
+	.ag--mobile .ag-body {
+		touch-action: pan-y pinch-zoom;
+	}
 	.ag--mobile .ag-q {
 		grid-template-columns: 1fr;
 		min-height: auto;