@nomideusz/svelte-calendar 1.4.0 → 1.4.1

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm](https://badgen.net/npm/v/@nomideusz/svelte-calendar)](https://www.npmjs.com/package/@nomideusz/svelte-calendar) [![license](https://badgen.net/badge/license/MIT/blue)](https://github.com/nomideusz/svelte-calendar/blob/main/LICENSE)
 
-A themeable **Svelte 5** calendar: day and week **Planner** time grids, a multi-week **Scroll** view, **Agenda** lists, a **Month** grid and touch-first **Mobile** layouts, with drag-and-drop, timezones, a headless API, an embeddable web component, and a smart auto-theme that adapts to any page.
+A themeable **Svelte 5** calendar: day and week **Planner** time grids, a multi-week **Scroll** view, **Agenda** lists, a **Month** grid and touch-first **Mobile** layouts, with drag to move, resize and create events, timezones, a headless API, an embeddable web component, and a smart auto-theme that adapts to any page.
 
 **[Live demo → svelte-calendar.xyz](https://svelte-calendar.xyz/)**
 
@@ -28,24 +28,37 @@ Requirements:
   const today = new Date();
   const at = (hour) => new Date(today.getFullYear(), today.getMonth(), today.getDate(), hour);
 
-  const adapter = createMemoryAdapter([
+  let events = $state([
     { id: '1', title: 'Team Sync', start: at(9),  end: at(10) },
     { id: '2', title: 'Lunch',     start: at(12), end: at(13) },
   ]);
+  // A new adapter whenever the events change; the calendar reloads without blanking
+  const adapter = $derived(createMemoryAdapter(events));
+
+  // Drag on empty time (or press Enter on a day column) to create
+  function create({ start, end }) {
+    events = [...events, { id: crypto.randomUUID(), title: 'New event', start, end }];
+  }
+  // Drag an event to move it, or its edge to resize it
+  function move(event, start, end) {
+    events = events.map((e) => (e.id === event.id ? { ...e, start, end } : e));
+  }
 </script>
 
-<Calendar {adapter} view="week-planner" />
+<Calendar {adapter} view="week-planner" oneventcreate={create} oneventmove={move} />
 ```
 
-That's it: eight built-in views and drag-and-drop with live previews, out of the box. The default `auto` theme probes your page's background, accent color and fonts, so the calendar adapts to any design. Events without a `color` draw in ink; to color them automatically, give the adapter a [`palette`](#event-colors).
+That's a working, editable calendar. The calendar stores nothing on create: without `oneventcreate`, dragging on empty time does nothing. Moves and resizes write to the adapter by themselves, and `oneventmove` keeps your own data in step, so a move survives the next new adapter. The default `auto` theme probes your page's background, accent color and fonts, so the calendar adapts to any design. Events without a `color` draw in ink; to color them automatically, give the adapter a [`palette`](#event-colors).
 
 ## Views
 
+Without `view` the calendar opens on `day-planner`, the first registered view. The Quick Start, the demo, the widget and `createCalendar` open on `week-planner`, so pass `view="week-planner"` for the week grid.
+
 The default registry (`defaultViews`) holds eight views. Six are the ones you choose with `view`; the two `*-mobile` views are what the others swap to in a narrow container (see [Mobile](#mobile)), so the demo's view list shows six.
 
 | View ID | Mode | What it is |
 |---------|------|------------|
-| `day-planner` | day | Vertical time grid, one column. Opens when `view` is unset (the first registered view). The examples here, the demo, the widget and `createCalendar` open on `week-planner`. |
+| `day-planner` | day | Vertical time grid, one column. The default when `view` is unset. |
 | `week-planner` | week | The same time grid, one column per day (`days`, default 7). |
 | `week-scroll` | week | Weeks stacked in one infinite vertical scroller (Hey-Calendar style): each chip sits at the height of its start time, month names run down the side. Drag to move, drop onto a day; it scrolls under a drag. |
 | `day-agenda` | day | Live list for one day: now / up next / done. |
@@ -112,7 +125,7 @@ The component receives `CalendarViewProps` (plus your `props`); declare only the
 |------|------|-------|
 | `events` | `TimelineEvent[]` | Everything loaded for the current range |
 | `style` | `string` | The active `--dt-*` theme string |
-| `height` | `number \| null` | Currently always `null`: size to the container |
+| `height` | `number \| null` | Always `null`: the view fills its container, sized by the Calendar's own [`height`](#display) (default `600`) |
 | `mode` | `'day' \| 'week' \| 'month'` | |
 | `mondayStart` | `boolean` | |
 | `locale` | `string \| undefined` | |
@@ -320,7 +333,7 @@ Disable specific dates:
 />
 ```
 
-Disabled dates refuse creating or moving events into those days. Existing events stay visible and clickable, which suits holidays or fully booked days.
+Disabled dates refuse creating or moving events into those days, which suits holidays or fully booked days. In the planner, agenda and mobile views their existing events stay visible and clickable; `month-grid` dims a disabled day, and its chips ignore clicks.
 
 Custom day headers and hover previews:
 
@@ -1057,7 +1070,7 @@ Every `<Calendar>` prop (`CalendarProps`), grouped by what it controls.
 | `minDuration` | `number` | — | Minimum duration in minutes; clamps creates and resizes |
 | `maxDuration` | `number` | — | Maximum duration in minutes; clamps creates and resizes |
 | `blockedSlots` | `BlockedSlot[]` | — | `{ day?, start, end, label? }` hour ranges that can't be booked (hatched in planner views) |
-| `disabledDates` | `Date[]` | — | Dates that refuse creates/moves; existing events stay visible and clickable |
+| `disabledDates` | `Date[]` | — | Dates that refuse creates/moves; existing events stay visible and clickable (dimmed and inert in `month-grid`) |
 
 ### View and navigation
 
@@ -1127,6 +1140,16 @@ Every `<Calendar>` prop (`CalendarProps`), grouped by what it controls.
 | `oneventhover` | `(event) => void` | — | Pointer enters an event |
 | `onerror` | `(error: Error) => void` | — | Load and commit failures |
 
+## Troubleshooting
+
+- **Dragging on empty time does nothing.** Creating needs an `oneventcreate` handler (and no `readOnly`); see the [Quick Start](#quick-start).
+- **A created event doesn't appear.** The calendar stores nothing on create: add the event to your data and hand the Calendar a new adapter (`$derived(createMemoryAdapter(events))`).
+- **Moved events jump back after the next change.** A new adapter is built from your array, so write each move into it in `oneventmove`.
+- **The `auto` theme picked the wrong colours.** It probes the host page around the calendar, and probes again when `<html>`/`<body>` change class, style or `data-theme`, when the system scheme flips and when a background transition ends. Steer it with [`autoTheme`](#smart-auto-theme), or set `theme` to a preset or your own tokens to opt out.
+- **Events are all one colour.** Since 1.4 events without a `color` draw in ink; give the adapter a [`palette`](#event-colors).
+- **The calendar stops at 600px.** That's the default `height`; pass a number, or `'auto'` to grow with the content.
+- **The phone layout shows on a wide page (or the desktop one in a narrow column).** The switch reads the calendar's container, not the window; force it with `mobile={false}` or `mobile={true}`.
+
 ## Versioning
 
 The package follows [semver](https://semver.org/) from 1.0:

package/dist/calendar/Calendar.svelte

@@ -623,6 +623,28 @@ function handleShortcuts(e) {
 		else viewState.prev();
 	}
 }
+// Each pill group is one tab stop (radio-group pattern): arrows (reading
+// direction), Home and End move the selection and focus with it.
+function pillKeys(e) {
+	const radios = [...e.currentTarget.querySelectorAll("[role=\"radio\"]")];
+	const i = radios.indexOf(e.target);
+	if (i < 0) return;
+	const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+	const step = {
+		ArrowRight: rtl ? -1 : 1,
+		ArrowLeft: rtl ? 1 : -1,
+		ArrowDown: 1,
+		ArrowUp: -1
+	};
+	let n;
+	if (e.key === "Home") n = 0;
+	else if (e.key === "End") n = radios.length - 1;
+	else if (e.key in step) n = (i + step[e.key] + radios.length) % radios.length;
+	else return;
+	e.preventDefault();
+	radios[n].focus();
+	radios[n].click();
+}
 /** Header context for custom header snippet */
 const headerCtx = $derived({
 	dateLabel,
@@ -671,7 +693,9 @@ const navCtx = $derived({
 			<span class="cal-sr" role="status" aria-live="polite" aria-atomic="true">{noteText || dateLabel}</span>
 			{#if showModePills && !useMobile && labelsForMode.length > 1}
 				<!-- View-type switcher (e.g. Planner ↔ Agenda) for the current mode -->
-				<div class="cal-pills cal-pills--labels" role="radiogroup" aria-label={L.viewMode}>
+				{@const activeLabel = labelsForMode.includes(activeView?.label ?? '') ? activeView?.label : labelsForMode[0]}
+				<!-- svelte-ignore a11y_interactive_supports_focus -- the checked radio is the tab stop; the group only routes its arrow keys -->
+				<div class="cal-pills cal-pills--labels" role="radiogroup" aria-label={L.viewMode} onkeydown={pillKeys}>
 					{#each labelsForMode as label (label)}
 						<button
 							type="button"
@@ -679,6 +703,7 @@ const navCtx = $derived({
 							class:cal-pill--active={activeView?.label === label}
 							role="radio"
 							aria-checked={activeView?.label === label}
+							tabindex={label === activeLabel ? 0 : -1}
 							onclick={() => switchLabel(label)}
 						>
 							{viewLabel(label)}
@@ -687,7 +712,9 @@ const navCtx = $derived({
 				</div>
 			{/if}
 			{#if showModePills && modes.length > 1}
-				<div class="cal-pills" role="radiogroup" aria-label={L.viewMode}>
+				{@const activeMode = modes.includes(viewState.mode) ? viewState.mode : modes[0]}
+				<!-- svelte-ignore a11y_interactive_supports_focus -- the checked radio is the tab stop; the group only routes its arrow keys -->
+				<div class="cal-pills" role="radiogroup" aria-label={L.viewMode} onkeydown={pillKeys}>
 					{#each modes as g (g)}
 						<button
 							type="button"
@@ -695,6 +722,7 @@ const navCtx = $derived({
 							class:cal-pill--active={viewState.mode === g}
 							role="radio"
 							aria-checked={viewState.mode === g}
+							tabindex={g === activeMode ? 0 : -1}
 							onclick={() => switchMode(g)}
 						>
 							{g === 'day' ? L.day : g === 'week' ? L.week : L.month}
@@ -952,6 +980,9 @@ const navCtx = $derived({
 		.cal-hd {
 			--cal-ctl-h: 44px;
 		}
+		.cal-pill {
+			min-width: 44px;
+		}
 	}
 
 	@media (prefers-reduced-motion: reduce) {

package/dist/core/locale.d.ts

@@ -98,6 +98,10 @@ export declare function setDefaultLocale(tag: string): void;
 /** Get the current default locale */
 export declare function getDefaultLocale(): string;
 export declare function is24HourLocale(locale?: string): boolean;
+/** A number in the locale's own digits ("٧" in ar-SA), optionally zero-padded. */
+export declare function fmtNum(n: number, locale?: string, minDigits?: number): string;
+/** Day-of-month in the locale's digits: "19", "١٩". */
+export declare function fmtDayNum(ms: number, locale?: string): string;
 /** Format hour index (0-23) as compact label: 12h ("12a", "1p") or 24h ("0", "13") */
 export declare function fmtH(h: number, locale?: string): string;
 /**
@@ -137,6 +141,7 @@ export declare function fmtWeekRange(weekStartMs: number, locale?: string, weekE
  *
  * 12-hour locales → "9a", "12:30p"
  * 24-hour locales → "9:00", "14:30"
+ * other 12-hour locales → Intl's own, in the locale's digits ("٧:٠٠ ص")
  */
 export declare function fmtTime(d: Date, locale?: string): string;
 /**

package/dist/core/locale.js

@@ -106,16 +106,61 @@ export function is24HourLocale(locale) {
     hourCycleCache.set(loc, is24);
     return is24;
 }
+// ─── Numerals ───────────────────────────────────────────
+const numCache = new Map();
+/** A number in the locale's own digits ("٧" in ar-SA), optionally zero-padded. */
+export function fmtNum(n, locale, minDigits = 1) {
+    const loc = locale ?? defaultLocale;
+    const key = `${loc}|${minDigits}`;
+    let f = numCache.get(key);
+    if (!f) {
+        f = new Intl.NumberFormat(loc, { useGrouping: false, minimumIntegerDigits: minDigits });
+        numCache.set(key, f);
+    }
+    return f.format(n);
+}
+/** Day-of-month in the locale's digits: "19", "١٩". */
+export function fmtDayNum(ms, locale) {
+    return fmtNum(new Date(ms).getDate(), locale);
+}
+/**
+ * Whether the compact "9a" / "12:30p" style fits the locale: a 12-hour clock
+ * whose day periods are Latin AM/PM. Other 12-hour locales (ar "ص"/"م")
+ * get Intl's own day period instead.
+ */
+const compactCache = new Map();
+function isCompact12h(locale) {
+    const loc = locale ?? defaultLocale;
+    if (is24HourLocale(loc))
+        return false;
+    let c = compactCache.get(loc);
+    if (c === undefined) {
+        const period = new Intl.DateTimeFormat(loc, { hour: 'numeric', hour12: true })
+            .formatToParts(new Date(2000, 0, 1, 9))
+            .find((p) => p.type === 'dayPeriod')?.value ?? '';
+        c = /^a\W*m\W*$/i.test(period);
+        compactCache.set(loc, c);
+    }
+    return c;
+}
+const dtfCache = new Map();
+function dtf(locale, withMinutes) {
+    const loc = locale ?? defaultLocale;
+    const key = `${loc}|${withMinutes}`;
+    let f = dtfCache.get(key);
+    if (!f) {
+        f = new Intl.DateTimeFormat(loc, withMinutes ? { hour: 'numeric', minute: '2-digit' } : { hour: 'numeric' });
+        dtfCache.set(key, f);
+    }
+    return f;
+}
 /** Format hour index (0-23) as compact label: 12h ("12a", "1p") or 24h ("0", "13") */
 export function fmtH(h, locale) {
-    if (is24HourLocale(locale)) {
-        return String(h);
-    }
-    if (h === 0)
-        return '12a';
-    if (h === 12)
-        return '12p';
-    return h < 12 ? h + 'a' : h - 12 + 'p';
+    if (is24HourLocale(locale))
+        return fmtNum(h, locale);
+    if (!isCompact12h(locale))
+        return dtf(locale, false).format(new Date(2000, 0, 1, h));
+    return fmtNum(h % 12 || 12, locale) + (h < 12 ? 'a' : 'p');
 }
 /**
  * Hour index (0-23) split for a timetable gutter: the numeral and the small
@@ -123,8 +168,15 @@ export function fmtH(h, locale) {
  */
 export function fmtHParts(h, locale) {
     if (is24HourLocale(locale))
-        return [String(h), '00'];
-    return [String(h % 12 || 12), h < 12 ? 'am' : 'pm'];
+        return [fmtNum(h, locale), fmtNum(0, locale, 2)];
+    if (!isCompact12h(locale)) {
+        const parts = dtf(locale, false).formatToParts(new Date(2000, 0, 1, h));
+        return [
+            parts.find((p) => p.type === 'hour')?.value ?? fmtNum(h % 12 || 12, locale),
+            parts.find((p) => p.type === 'dayPeriod')?.value ?? '',
+        ];
+    }
+    return [fmtNum(h % 12 || 12, locale), h < 12 ? 'am' : 'pm'];
 }
 /** Short weekday name for a timestamp: "Mon", "Tue", etc. */
 export function weekdayShort(ms, locale) {
@@ -198,18 +250,17 @@ export function fmtWeekRange(weekStartMs, locale, weekEndMs) {
  *
  * 12-hour locales → "9a", "12:30p"
  * 24-hour locales → "9:00", "14:30"
+ * other 12-hour locales → Intl's own, in the locale's digits ("٧:٠٠ ص")
  */
 export function fmtTime(d, locale) {
-    if (is24HourLocale(locale)) {
-        const h = d.getHours();
-        const m = d.getMinutes();
-        return `${h}:${String(m).padStart(2, '0')}`;
-    }
     const h = d.getHours();
     const m = d.getMinutes();
+    if (is24HourLocale(locale))
+        return `${fmtNum(h, locale)}:${fmtNum(m, locale, 2)}`;
+    if (!isCompact12h(locale))
+        return dtf(locale, true).format(d);
     const suffix = h >= 12 ? 'p' : 'a';
-    const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
-    return `${h12}:${String(m).padStart(2, '0')}${suffix}`;
+    return `${fmtNum(h % 12 || 12, locale)}:${fmtNum(m, locale, 2)}${suffix}`;
 }
 /**
  * Format the duration between two Dates as a compact string.

package/dist/primitives/DayHeader.svelte

@@ -5,10 +5,10 @@
     - Relative labels ("Today", "Tomorrow") for day views via fmtDay
     - Short/long weekday + date number for week views
 -->
-<script lang="ts">import { weekdayShort, weekdayLong, monthShort, fmtDay } from "../core/locale.js";
+<script lang="ts">import { weekdayShort, weekdayLong, monthShort, fmtDay, fmtDayNum } from "../core/locale.js";
 import { sod } from "../core/time.js";
 let { dayMs, todayMs = sod(Date.now()), format = "short", isToday = false, isPast = false } = $props();
-const dayNum = $derived(new Date(dayMs).getDate());
+const dayNum = $derived(fmtDayNum(dayMs));
 </script>
 
 <div

package/dist/primitives/EmptySlot.svelte

@@ -53,7 +53,7 @@ function handleKeydown(e) {
 		background: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
 	}
 	.es:focus-visible {
-		outline: 2px solid var(--dt-accent, #1d4fd7);
+		outline: 2px solid var(--dt-text, #0f0f0f);
 		outline-offset: 2px;
 		border-color: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
 	}

package/dist/theme/auto.js

@@ -588,7 +588,20 @@ export function observeHostTheme(el, callback, options = {}) {
         attributes: true,
         attributeFilter: ['class', 'style', 'data-theme', 'data-mode', 'color-scheme'],
     });
-    // 3. Re-probe once the document settles. A probe during initial load can
+    // 3. Hosts often crossfade their ground (`body { transition: background 300ms }`),
+    //    so the rAF probe above reads a mid-transition colour and keeps the old
+    //    host's light/dark. Re-probe when a colour transition on <html>/<body> ends.
+    const onTransitionEnd = (e) => {
+        const t = e.target;
+        if (t !== document.documentElement && t !== document.body)
+            return;
+        const prop = e.propertyName;
+        if (prop === undefined || /^(background|color)/.test(prop))
+            scheduleUpdate();
+    };
+    document.addEventListener('transitionend', onTransitionEnd);
+    document.addEventListener('animationend', onTransitionEnd);
+    // 4. Re-probe once the document settles. A probe during initial load can
     //    read pre-stylesheet values (wrong background → wrong light/dark call);
     //    late webfonts change computed font stacks. Both are one-shot events.
     if (document.readyState !== 'complete') {
@@ -602,5 +615,7 @@ export function observeHostTheme(el, callback, options = {}) {
         mql?.removeEventListener('change', onScheme);
         window.removeEventListener('load', scheduleUpdate);
         observer.disconnect();
+        document.removeEventListener('transitionend', onTransitionEnd);
+        document.removeEventListener('animationend', onTransitionEnd);
     };
 }

package/dist/views/agenda/AgendaDay.svelte

@@ -12,8 +12,8 @@
 *   Clean numbered schedule list.
 */
 import { createClock } from "../../core/clock.svelte.js";
-import { sod, addDaysMs, dayNum, isAllDay } from "../../core/time.js";
-import { weekdayLong, monthLong } from "../../core/locale.js";
+import { sod, addDaysMs, isAllDay } from "../../core/time.js";
+import { weekdayLong, monthLong, fmtDayNum } 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";
@@ -136,7 +136,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		<!-- ─── In-view date header (only when the chrome doesn't label the day) ─── -->
 		{#if !hideDayHead}
 		<div class="ag-day-head" class:ag-day-head--today={!equalDays && isToday}>
-			<span class="ag-day-head-num">{dayNum(dayMs)}</span>
+			<span class="ag-day-head-num">{fmtDayNum(dayMs, locale)}</span>
 			{#if !equalDays && isToday}
 				<span class="ag-day-head-badge">{L.today}</span>
 			{:else if !equalDays && isTomorrow}
@@ -562,6 +562,15 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		color: var(--dt-btn-text, #fff);
 		cursor: pointer;
 	}
+	@media (pointer: coarse) {
+		.ag-allday-chip {
+			min-height: 44px;
+		}
+		.ag-q-done-item {
+			min-height: 44px;
+			align-items: center;
+		}
+	}
 	.ag-allday-chip:hover,
 	.ag-allday-chip:active {
 		filter: brightness(1.08);
@@ -820,7 +829,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	}
 	.ag-q-done-toggle:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
+		box-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);
 	}
 	.ag-q-now-sub {
 		font: 400 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);

package/dist/views/agenda/AgendaWeek.svelte

@@ -9,8 +9,8 @@
 * Answers: "What's coming up and when do I need to be ready?"
 */
 import { createClock } from "../../core/clock.svelte.js";
-import { sod, addDaysMs, startOfWeek, dayNum, isAllDay, isMultiDay, segmentForDay } from "../../core/time.js";
-import { weekdayLong, monthLong } from "../../core/locale.js";
+import { sod, addDaysMs, startOfWeek, isAllDay, isMultiDay, segmentForDay } from "../../core/time.js";
+import { weekdayLong, monthLong, fmtDayNum } 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";
@@ -165,7 +165,7 @@ const weekDays = $derived.by(() => {
 			ms,
 			dayName: weekdayLong(ms, locale),
 			month: monthLong(ms, locale),
-			num: dayNum(ms),
+			num: fmtDayNum(ms, locale),
 			tier,
 			// A dateless weekly template (showDates=false) has no today to mark.
 			isToday: showDates && ms === todayMs,
@@ -796,9 +796,9 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-wday-head--click:focus-visible,
 	.ag-wday-empty--click:focus-visible {
-		outline: 2px solid var(--dt-accent, #1d4fd7);
+		outline: 2px solid var(--dt-text, #0f0f0f);
 		outline-offset: -2px;
-		border-radius: 4px;
+		border-radius: 0;
 	}
 	.ag-wday-head {
 		display: flex;
@@ -908,8 +908,8 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-past-toggle:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
-		border-radius: 4px;
+		box-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);
+		border-radius: 0;
 	}
 	.ag-past-chevron {
 		transition: transform 120ms;
@@ -1081,7 +1081,7 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-compact-more:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
+		box-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);
 		border-radius: 0;
 	}
 

package/dist/views/mobile/MobileDay.svelte

@@ -793,7 +793,7 @@ $effect(() => {
 	}
 	.mb-allday-more:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
+		box-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);
 	}
 
 	/* ─── Grid ───────────────────────────────────────── */
@@ -811,7 +811,7 @@ $effect(() => {
 	.mb--auto .mb-grid { overflow-y: visible; }
 	.mb-grid:focus-visible {
 		outline: none;
-		box-shadow: inset 0 0 0 2px var(--dt-accent, #1d4fd7);
+		box-shadow: inset 0 0 0 2px var(--dt-text, #0f0f0f);
 	}
 
 	.mb-grid-inner {

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();
@@ -207,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>
 
@@ -231,7 +231,7 @@ function handleDayKeydown(e, dayMs) {
 								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">
@@ -247,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)}
@@ -356,7 +357,7 @@ function handleDayKeydown(e, dayMs) {
 	}
 	.mw-row-target:focus-visible {
 		outline: none;
-		box-shadow: inset 0 0 0 2px var(--dt-accent, #1d4fd7);
+		box-shadow: inset 0 0 0 2px var(--dt-text, #0f0f0f);
 	}
 
 	/* ─── Date column ────────────────────────────────── */
@@ -533,19 +534,15 @@ 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, #1d4fd7);
+		box-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);
 	}
 
 	/* ─── Chevron ────────────────────────────────────── */

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);
@@ -248,7 +249,7 @@ function chipTime(e) {
 					onkeydown={(e) => cellKeydown(e, cell)}
 				>
 					<span class="mg-daynum" class:mg-daynum--today={cell.isToday}>
-						{cell.dayNum}
+						{fmtDayNum(cell.ms, locale)}
 					</span>
 					<!-- Phones: dots are a picture of the day; the cell (its label counts
 					     the events) is the one tap and tab target. -->
@@ -282,7 +283,7 @@ function chipTime(e) {
 									class:mg-chip--cancelled={ev.status === 'cancelled'}
 									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());
@@ -304,7 +305,7 @@ function chipTime(e) {
 								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)}
 							>
 								{L.nMore(cell.overflow)}
@@ -417,7 +418,7 @@ function chipTime(e) {
 		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.mg-cell:focus-visible {
-		outline: 2px solid var(--dt-accent, #1d4fd7);
+		outline: 2px solid var(--dt-text, #0f0f0f);
 		outline-offset: -2px;
 	}
 
@@ -515,7 +516,7 @@ function chipTime(e) {
 		color: var(--dt-text);
 	}
 	.mg-more:focus-visible {
-		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
+		box-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);
 		outline: none;
 	}
 

package/dist/views/planner/PlannerScroll.svelte

@@ -22,7 +22,7 @@ import EventContent from "../shared/EventContent.svelte";
 import { createClock } from "../../core/clock.svelte.js";
 import { HOUR_MS, sod, addDaysMs, diffDays } from "../../core/time.js";
 import { startOfWeek as sowFn, isAllDay, segmentForDay } from "../../core/time.js";
-import { weekdayShort, monthLong, fmtTime as _fmtTime } from "../../core/locale.js";
+import { weekdayShort, monthLong, fmtDayNum, fmtTime as _fmtTime } from "../../core/locale.js";
 import { createChipFit } from "../shared/chip-fit.svelte.js";
 let { mondayStart = true, locale, height = 520, events = [], style = "", focusDate, oneventclick, oneventcreate, onexternaldrop, selectedEventId = null, readOnly = false, visibleHours } = $props();
 const ctx = useCalendarContext();
@@ -873,7 +873,7 @@ function onCellKeydown(e, ms) {
 								<div class="wg-cell-hd" class:wg-cell-hd--today={day.isToday}>
 									<span class="wg-day-wd">{weekdayShort(day.ms, locale)}</span>
 									{#if showDates}
-										<span class="wg-day-num">{day.dayNum}</span>
+										<span class="wg-day-num">{fmtDayNum(day.ms, locale)}</span>
 									{/if}
 								</div>
 
@@ -1476,12 +1476,12 @@ function onCellKeydown(e, ms) {
 
 	.wg-ev-more:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
+		box-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);
 	}
 
 	/* ─── Focus-visible ──────────────────────────────── */
 	.wg-cell:focus-visible {
-		outline: 2px solid var(--dt-accent, #1d4fd7);
+		outline: 2px solid var(--dt-text, #0f0f0f);
 		outline-offset: -2px;
 	}