@nomideusz/svelte-calendar 1.4.0 → 1.4.2

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:
 
@@ -567,55 +580,7 @@ The calendar reads its events through an adapter. Which one:
 | [`createCompositeAdapter(adapters)`](#composite-adapter) | One calendar shows several sources, e.g. a recurring timetable plus one-off events. |
 | [Custom `CalendarAdapter`](#custom-adapter) | None of the above fits: implement `fetchEvents`, plus the writes you need. |
 
-## Recurring Schedules
-
-For fixed repeating events (class timetables, office hours):
-
-```svelte
-<script>
-  import { Calendar, createRecurringAdapter } from '@nomideusz/svelte-calendar';
-
-  const adapter = createRecurringAdapter([
-    { id: '1', title: 'Yoga',    dayOfWeek: 1, startTime: '07:00', endTime: '08:30' },
-    { id: '2', title: 'Standup', frequency: 'daily', startTime: '09:00', endTime: '09:15',
-      startDate: '2026-03-01', until: '2026-03-31' },
-    { id: '3', title: 'Review',  frequency: 'monthly', dayOfMonth: 15,
-      startTime: '10:00', endTime: '11:00' },
-    { id: '4', title: 'Night shift', dayOfWeek: [5, 6], startTime: '22:00', endTime: '02:00' },
-  ]);
-</script>
-
-<Calendar {adapter} view="week-planner" />
-```
-
-<details>
-<summary>RecurringEvent fields</summary>
-
-| Field | Type | Default | Description |
-|-------|------|---------|-------------|
-| `id` | `string` | *required* | Rule identifier |
-| `title` | `string` | *required* | Event title |
-| `startTime` | `string` | *required* | Start time `"HH:MM"`, 24-hour |
-| `endTime` | `string` | *required* | End time `"HH:MM"`. Earlier than `startTime` → ends the next day (overnight). |
-| `frequency` | `'daily' \| 'weekly' \| 'monthly'` | `'weekly'` | Recurrence frequency |
-| `interval` | `number` | `1` | Every N periods (`2` + weekly = biweekly). Needs `startDate` when > 1. |
-| `dayOfWeek` | `number \| number[]` | — | ISO weekday 1=Mon…7=Sun. Required for weekly. |
-| `dayOfMonth` | `number` | `1` | Day of month (1–31) for monthly; clamped to shorter months. |
-| `startDate` | `string` | — | First possible occurrence `"YYYY-MM-DD"` |
-| `until` | `string` | — | Last possible occurrence `"YYYY-MM-DD"` |
-| `count` | `number` | — | Max occurrences from `startDate` (requires it). With `until`, the stricter wins. |
-| `excludeDates` | `string[]` | — | `"YYYY-MM-DD"` dates this rule skips |
-| `color` | `string` | — | Bar color; else from `palette`, else ink (`--dt-event`) |
-| `subtitle` / `tags` / `category` / `location` / `resourceId` | | — | Copied to every occurrence |
-| `data` | `Record<string, unknown>` | — | Copied to every occurrence, plus `recurringId` |
-
-</details>
-
-Options (`RecurringAdapterOptions`): `mondayStart` (default `true`), `palette` (colors rules without a `color`; off by default), `movable` (default `false`).
-
-Occurrences get the id `` `${rule.id}--YYYYMMDD` `` and `data.recurringId`. The adapter projects and stores nothing, so by default every occurrence carries `data.readOnly` and can't be dragged (it can still be clicked). With `movable: true` the views allow the drag and the adapter refuses the write with a read-only error, so `oneventmove` fires and the host stores the move: add the date to the rule's `excludeDates` and keep the moved occurrence with your one-off events (for example the memory side of a [composite adapter](#composite-adapter)).
-
-## REST Adapter
+### REST Adapter
 
 Connect to any REST API:
 
@@ -640,7 +605,7 @@ const adapter = createRestAdapter({
 
 The adapter calls `GET {baseUrl}/events?start=…&end=…` (ISO strings), `POST /events`, `PATCH /events/:id` and `DELETE /events/:id`, sending JSON with your `headers`. By default a list response must be an array of events and a single response one event; `start`/`end` are parsed into `Date`s. Override with `mapEvents(data)` for lists and `mapEvent(data)` for single events. A non-2xx response or invalid JSON throws.
 
-## JMAP Adapter
+### JMAP Adapter
 
 Read events from a [JMAP Calendars](https://jmap.io/) server (Fastmail, Stalwart, Cyrus):
 
@@ -665,7 +630,7 @@ const adapter = createJmapAdapter(client, {
 
 Read-only. Expands recurrences server-side and handles all-day events, ISO-duration ends and per-calendar colors (pass `calendars: [{ id, name, color }]`, or a function returning them).
 
-## Mapped Adapter
+### Mapped Adapter
 
 Wrap any static array of external records (class schedules, appointments, timetables) without writing a custom adapter. Supply a declarative field mapping (or a `mapEvent` function for full control) and the adapter handles parsing, colors, tags and status:
 
@@ -708,7 +673,7 @@ const adapter = createMappedAdapter(rawData, {
 
 Mapped adapters are read-only by default (writes throw a read-only error, so drags reach `oneventmove`). Set `readOnly: false` to allow writes; supply `onMutate: { onCreate, onUpdate, onDelete }` to persist them (each returns the stored source record, which is mapped again), or omit it to keep changes in memory.
 
-## Composite Adapter
+### Composite Adapter
 
 Merge several adapters into one, e.g. a recurring weekly schedule plus one-off events:
 
@@ -733,7 +698,7 @@ const adapter = createCompositeAdapter([recurring, memory], {
 });
 ```
 
-## Custom Adapter
+### Custom Adapter
 
 Implement the `CalendarAdapter` interface to connect any data source. Only `fetchEvents` is required:
 
@@ -765,7 +730,7 @@ const adapter = withInitialEvents(createRestAdapter({ baseUrl: '/api' }), data.e
 
 The first load is answered synchronously from the seed; every later load (navigation, refresh) goes to the wrapped adapter.
 
-### Refusing a write
+#### Refusing a write
 
 The Calendar tells two refusals apart when `updateEvent` throws:
 
@@ -777,6 +742,54 @@ The Calendar tells two refusals apart when `updateEvent` throws:
 
 An adapter without `updateEvent` counts as read-only. Plain `Error`s whose message contains `read-only` (lower case) or `not found` (any case) are read the same way, so older adapters keep working. `isReadOnlyError(e)` and `isNotFoundError(e)` test both forms.
 
+## Recurring Schedules
+
+For fixed repeating events (class timetables, office hours):
+
+```svelte
+<script>
+  import { Calendar, createRecurringAdapter } from '@nomideusz/svelte-calendar';
+
+  const adapter = createRecurringAdapter([
+    { id: '1', title: 'Yoga',    dayOfWeek: 1, startTime: '07:00', endTime: '08:30' },
+    { id: '2', title: 'Standup', frequency: 'daily', startTime: '09:00', endTime: '09:15',
+      startDate: '2026-03-01', until: '2026-03-31' },
+    { id: '3', title: 'Review',  frequency: 'monthly', dayOfMonth: 15,
+      startTime: '10:00', endTime: '11:00' },
+    { id: '4', title: 'Night shift', dayOfWeek: [5, 6], startTime: '22:00', endTime: '02:00' },
+  ]);
+</script>
+
+<Calendar {adapter} view="week-planner" />
+```
+
+<details>
+<summary>RecurringEvent fields</summary>
+
+| Field | Type | Default | Description |
+|-------|------|---------|-------------|
+| `id` | `string` | *required* | Rule identifier |
+| `title` | `string` | *required* | Event title |
+| `startTime` | `string` | *required* | Start time `"HH:MM"`, 24-hour |
+| `endTime` | `string` | *required* | End time `"HH:MM"`. Earlier than `startTime` → ends the next day (overnight). |
+| `frequency` | `'daily' \| 'weekly' \| 'monthly'` | `'weekly'` | Recurrence frequency |
+| `interval` | `number` | `1` | Every N periods (`2` + weekly = biweekly). Needs `startDate` when > 1. |
+| `dayOfWeek` | `number \| number[]` | — | ISO weekday 1=Mon…7=Sun. Required for weekly. |
+| `dayOfMonth` | `number` | `1` | Day of month (1–31) for monthly; clamped to shorter months. |
+| `startDate` | `string` | — | First possible occurrence `"YYYY-MM-DD"` |
+| `until` | `string` | — | Last possible occurrence `"YYYY-MM-DD"` |
+| `count` | `number` | — | Max occurrences from `startDate` (requires it). With `until`, the stricter wins. |
+| `excludeDates` | `string[]` | — | `"YYYY-MM-DD"` dates this rule skips |
+| `color` | `string` | — | Bar color; else from `palette`, else ink (`--dt-event`) |
+| `subtitle` / `tags` / `category` / `location` / `resourceId` | | — | Copied to every occurrence |
+| `data` | `Record<string, unknown>` | — | Copied to every occurrence, plus `recurringId` |
+
+</details>
+
+Options (`RecurringAdapterOptions`): `mondayStart` (default `true`), `palette` (colors rules without a `color`; off by default), `movable` (default `false`).
+
+Occurrences get the id `` `${rule.id}--YYYYMMDD` `` and `data.recurringId`. The adapter projects and stores nothing, so by default every occurrence carries `data.readOnly` and can't be dragged (it can still be clicked). With `movable: true` the views allow the drag and the adapter refuses the write with a read-only error, so `oneventmove` fires and the host stores the move: add the date to the rule's `excludeDates` and keep the moved occurrence with your one-off events (for example the memory side of a [composite adapter](#composite-adapter)).
+
 ## Headless API
 
 For full control over rendering, skip `<Calendar>` and drive everything from reactive state. `createCalendar()` returns computed layouts, navigation actions, drag helpers and the raw engines. Zero DOM: bring your own UI. Call it during component initialisation.
@@ -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;
@@ -844,8 +844,11 @@ const weekDays = $derived.by(() => {
 	.ag-wday .ag-wday-badge--muted {
 		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
+	/* Set like the weekday beside it, so the heading reads in one case */
 	.ag-wday-date {
-		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 12px/1 var(--dt-sans, system-ui, sans-serif);
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
 		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
 
@@ -908,8 +911,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 +1084,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 {
@@ -843,6 +843,8 @@ $effect(() => {
 		align-items: flex-start;
 	}
 
+	/* The first hour has no room above its line: it sits on it, unclipped */
+	.mb-hour:first-child .mb-hour-label { top: 0; }
 	.mb-hour-label--under {
 		visibility: hidden;
 	}