@nomideusz/svelte-calendar 1.3.0 → 1.4.1

package/dist/adapters/mapped.d.ts

@@ -95,16 +95,16 @@ export interface MappedAdapterOptions<T = Record<string, unknown>> {
      */
     includeData?: string[] | '*';
     /**
-     * When true (default), ignore source colors and auto-assign from
-     * the palette grouped by category / title.  This keeps the calendar
-     * visually consistent regardless of the upstream source.
-     * Set to `false` to preserve the original colors from the data.
-     * @default true
+     * When true, ignore source colors and auto-assign from the palette
+     * (`VIVID_PALETTE` unless `palette` is given) grouped by category / title.
+     * By default source colors are kept, and events without one draw in
+     * `--dt-event` (ink) unless a `palette` is given to fill them.
+     * @default false (since 1.4; was true)
      */
     autoColor?: boolean;
     /**
-     * Color palette used for auto-coloring.
-     * Defaults to VIVID_PALETTE.
+     * Color palette used to fill events without a source color
+     * (or every event when `autoColor: true`). Off by default.
      */
     palette?: readonly string[];
     /**

package/dist/adapters/mapped.js

@@ -139,15 +139,18 @@ function collectData(raw, mappedKeys, include) {
  * ```
  */
 export function createMappedAdapter(sourceData, options = {}) {
-    const { fields, mapEvent: customMapper, includeData = '*', autoColor = true, palette = VIVID_PALETTE, readOnly = true, } = options;
+    const { fields, mapEvent: customMapper, includeData = '*', autoColor = false, palette = autoColor ? VIVID_PALETTE : undefined, readOnly = true, } = options;
     // Build the internal event list
     const events = [];
     const colorAssignments = new Map();
     let colorIndex = 0;
     function resolveColor(ev) {
-        // When autoColor is on, always assign from palette (ignore source color)
+        // autoColor: always assign from the palette (ignore source color).
+        // Otherwise keep the source color; fill only when a palette is given.
         if (!autoColor && ev.color)
             return ev.color;
+        if (!palette?.length)
+            return ev.color;
         const key = ev.category ?? ev.title;
         if (!colorAssignments.has(key)) {
             colorAssignments.set(key, palette[colorIndex % palette.length]);

package/dist/adapters/memory.d.ts

@@ -2,21 +2,22 @@
  * In-memory adapter — the default for demos and testing.
  *
  * Events are stored in a plain array. No persistence across page loads.
- * Events without a `color` are auto-assigned one from a palette,
- * grouped by `category` or `title` so related events share a color.
+ * Events without a `color` stay uncoloured and draw in `--dt-event` (ink).
+ * Pass `palette` to auto-assign colours instead, grouped by `category` or
+ * `title` so related events share one.
  *
  * Usage:
  *   import { createMemoryAdapter } from './';
  *   const adapter = createMemoryAdapter(initialEvents);
- *   const adapter = createMemoryAdapter(initialEvents, { palette: myColors });
+ *   const adapter = createMemoryAdapter(initialEvents, { palette: VIVID_PALETTE });
  */
 import type { TimelineEvent } from '../core/types.js';
 import type { CalendarAdapter } from './types.js';
 export interface MemoryAdapterOptions {
     /**
-     * Custom color palette for auto-coloring events.
-     * Defaults to VIVID_PALETTE. Pass `generatePalette(accent)` to
-     * make event colors adapt to your theme.
+     * Colour palette for auto-colouring events that have no `color`.
+     * Off by default (events draw in `--dt-event`). Pass `VIVID_PALETTE`
+     * for the pre-1.4 look, or `generatePalette(accent)` for theme-harmonious colours.
      */
     palette?: readonly string[];
 }

package/dist/adapters/memory.js

@@ -1,4 +1,3 @@
-import { VIVID_PALETTE } from '../core/palette.js';
 import { overlapsRange } from '../core/time.js';
 import { EventNotFoundError } from './errors.js';
 let counter = 0;
@@ -7,12 +6,12 @@ function uid() {
 }
 export function createMemoryAdapter(initial = [], options) {
     const events = [...initial];
-    const palette = options?.palette ?? VIVID_PALETTE;
-    // Auto-color: assign from vivid palette by category/title
+    const palette = options?.palette;
+    // Opt-in auto-color: assign from the palette by category/title
     const colorAssignments = new Map();
     let colorIndex = 0;
     function resolveColor(ev) {
-        if (ev.color)
+        if (ev.color || !palette?.length)
             return ev.color;
         const key = ev.category ?? ev.title;
         if (!colorAssignments.has(key)) {

package/dist/adapters/recurring.d.ts

@@ -74,10 +74,10 @@ export interface RecurringAdapterOptions {
     /** Start weeks on Monday (default: true) */
     mondayStart?: boolean;
     /**
-     * Custom color palette for auto-coloring events.
-     * Pass `generatePalette('#yourAccent')` to get theme-harmonious colors,
-     * or provide your own array of hex strings.
-     * Defaults to the built-in vivid palette.
+     * Colour palette for auto-colouring events that have no `color`.
+     * Off by default (events draw in `--dt-event`). Pass `VIVID_PALETTE`
+     * for the pre-1.4 look, `generatePalette('#yourAccent')` for
+     * theme-harmonious colours, or your own array of colours.
      */
     palette?: readonly string[];
     /**
@@ -95,8 +95,8 @@ export interface RecurringAdapterOptions {
  * Create a CalendarAdapter that projects recurring events onto concrete
  * dates for whatever range the calendar requests.
  *
- * Events without a `color` are auto-assigned one from a vivid palette,
- * grouped by `category` or `title` so related events share a color.
+ * Events without a `color` draw in `--dt-event` (ink) unless `palette` is
+ * given; then they are auto-assigned one, grouped by `category` or `title`.
  *
  * Read-only by default — create/update/delete throw.
  */

package/dist/adapters/recurring.js

@@ -1,5 +1,4 @@
 import { startOfWeek, addDaysMs, diffDays, DAY_MS, overlapsRange } from '../core/time.js';
-import { VIVID_PALETTE } from '../core/palette.js';
 import { CalendarReadOnlyError, EventNotFoundError } from './errors.js';
 // ── Helpers ─────────────────────────────────────────────
 /** Parse "HH:MM" into [hours, minutes] */
@@ -234,32 +233,31 @@ function projectMonthly(rec, range, startDate, effectiveUntil, out) {
     }
 }
 // ── Adapter factory ─────────────────────────────────────
-/** Default palette for auto-coloring */
-const PALETTE = VIVID_PALETTE;
 /**
  * Create a CalendarAdapter that projects recurring events onto concrete
  * dates for whatever range the calendar requests.
  *
- * Events without a `color` are auto-assigned one from a vivid palette,
- * grouped by `category` or `title` so related events share a color.
+ * Events without a `color` draw in `--dt-event` (ink) unless `palette` is
+ * given; then they are auto-assigned one, grouped by `category` or `title`.
  *
  * Read-only by default — create/update/delete throw.
  */
 export function createRecurringAdapter(schedule, options = {}) {
     const { mondayStart = true, palette, movable = false } = options;
-    const colors = palette?.length ? palette : PALETTE;
+    const colors = palette?.length ? palette : undefined;
     // Auto-color: assign from palette by category/title
     const colorAssignments = new Map();
     let colorIndex = 0;
-    for (const rec of schedule) {
-        if (rec.color)
-            continue;
-        const key = rec.category ?? rec.title;
-        if (!colorAssignments.has(key)) {
-            colorAssignments.set(key, colors[colorIndex % colors.length]);
-            colorIndex++;
+    if (colors)
+        for (const rec of schedule) {
+            if (rec.color)
+                continue;
+            const key = rec.category ?? rec.title;
+            if (!colorAssignments.has(key)) {
+                colorAssignments.set(key, colors[colorIndex % colors.length]);
+                colorIndex++;
+            }
         }
-    }
     function resolveColor(rec) {
         if (rec.color)
             return rec.color;

package/dist/calendar/Calendar.svelte

@@ -376,6 +376,7 @@ setContext("calendar", {
 	get labels() {
 		return mergedLabels;
 	},
+	announce,
 	// Load range (read/write)
 	get loadRange() {
 		return viewLoadRange;
@@ -479,6 +480,17 @@ const dateLabel = $derived.by(() => {
 		year: "numeric"
 	});
 });
+// ── Polite announcements (views say why an action did nothing) ──
+// Shares the header's status line; a note lasts until the range changes.
+let note = $state(null);
+function announce(text) {
+	// A repeated message must change the text node to be read again.
+	note = {
+		text: note?.text === text ? `${text}\u00a0` : text,
+		label: dateLabel
+	};
+}
+const noteText = $derived(note && note.label === dateLabel ? note.text : "");
 // ── Period title (the built-in header's big line) ──
 // Names the month the user is looking at: "October 2026"; a week across two
 // months reads "Oct – Nov 2026"; a day gives its date. `dateLabel` keeps the
@@ -611,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,
@@ -656,10 +690,12 @@ const navCtx = $derived({
 		<div class="cal-hd" class:cal-hd--mobile={useMobile} class:cal-hd--stack={stackHeader}>
 			<!-- The visible title names the month; the status line announces the exact range -->
 			<span class="cal-hd-title" aria-hidden="true">{periodTitle}</span>
-			<span class="cal-sr" role="status" aria-live="polite" aria-atomic="true">{dateLabel}</span>
+			<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"
@@ -667,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)}
@@ -675,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"
@@ -683,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}
@@ -715,6 +755,10 @@ const navCtx = $derived({
 		</div>
 	{/if}
 
+	{#if headerSnippet || !(showNavigation || (showModePills && modes.length > 1) || dateLabel)}
+		<span class="cal-sr" role="status" aria-live="polite" aria-atomic="true">{noteText}</span>
+	{/if}
+
 	<div class="cal-body">
 		{#if activeView}
 			{@const Comp = activeView.component}
@@ -755,7 +799,7 @@ const navCtx = $derived({
 		overflow: clip;
 		display: flex;
 		flex-direction: column;
-		border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		border: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 		box-sizing: border-box;
 	}
 	.cal--auto {
@@ -775,11 +819,11 @@ const navCtx = $derived({
 		align-items: center;
 		gap: 10px 24px;
 		padding: 14px 16px 12px;
-		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));
 		flex-shrink: 0;
 		box-sizing: border-box;
 		font-family: 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));
 	}
 
 	.cal-hd-title {
@@ -819,10 +863,10 @@ const navCtx = $derived({
 	.cal-hd-btn {
 		box-sizing: border-box;
 		height: var(--cal-ctl-h);
-		border: 2px solid var(--dt-text, rgba(0, 0, 0, 0.87));
+		border: 2px solid var(--dt-text, rgba(15, 15, 15, 0.87));
 		border-radius: var(--cal-ctl-r);
 		background: transparent;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		cursor: pointer;
 		transition: background-color 120ms, opacity 120ms;
 		-webkit-tap-highlight-color: transparent;
@@ -848,7 +892,7 @@ const navCtx = $derived({
 	}
 	.cal-hd-today:active:not(:disabled),
 	.cal-hd-btn:active {
-		background: color-mix(in srgb, var(--dt-text, #000) 12%, transparent);
+		background: color-mix(in srgb, var(--dt-text, #0f0f0f) 12%, transparent);
 	}
 	/* Today is already in view: the frame stays, quietly */
 	.cal-hd-today:disabled {
@@ -859,7 +903,7 @@ const navCtx = $derived({
 	.cal-hd-today:focus-visible,
 	.cal-hd-btn:focus-visible,
 	.cal-pill:focus-visible {
-		outline: 2px solid var(--dt-text, rgba(0, 0, 0, 0.87));
+		outline: 2px solid var(--dt-text, rgba(15, 15, 15, 0.87));
 		outline-offset: 2px;
 	}
 
@@ -875,12 +919,12 @@ const navCtx = $derived({
 		align-self: stretch;
 		align-items: center;
 		padding-inline-start: 24px;
-		border-inline-start: 1px solid var(--dt-border, rgba(0, 0, 0, 0.12));
+		border-inline-start: 1px solid var(--dt-border, rgba(15, 15, 15, 0.12));
 	}
 	.cal-pill {
 		border: none;
 		background: transparent;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 		cursor: pointer;
 		font: 400 15px/1 var(--dt-sans, system-ui, sans-serif);
 		min-height: var(--cal-ctl-h);
@@ -896,11 +940,11 @@ const navCtx = $derived({
 	}
 	/* :not(--active) — iOS keeps :hover stuck after a tap */
 	.cal-pill:hover:not(.cal-pill--active) {
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
-		text-decoration-color: var(--dt-border-day, var(--dt-border, rgba(0, 0, 0, 0.3)));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
+		text-decoration-color: var(--dt-border-day, var(--dt-border, rgba(15, 15, 15, 0.3)));
 	}
 	.cal-pill--active {
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		text-decoration-color: currentColor;
 	}
 
@@ -936,6 +980,9 @@ const navCtx = $derived({
 		.cal-hd {
 			--cal-ctl-h: 44px;
 		}
+		.cal-pill {
+			min-width: 44px;
+		}
 	}
 
 	@media (prefers-reduced-motion: reduce) {
@@ -962,7 +1009,7 @@ const navCtx = $derived({
 		justify-content: center;
 		height: 100%;
 		font: 400 13px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		color: var(--dt-text-3, rgba(15, 15, 15, 0.38));
 	}
 
 	.cal-loading {
@@ -974,7 +1021,7 @@ const navCtx = $derived({
 		background: linear-gradient(
 			90deg,
 			transparent 0%,
-			var(--dt-accent, #2563eb) 50%,
+			var(--dt-accent, #1d4fd7) 50%,
 			transparent 100%
 		);
 		animation: cal-slide 1.2s ease-in-out infinite;
@@ -988,7 +1035,7 @@ const navCtx = $derived({
 	@media (prefers-reduced-motion: reduce) {
 		.cal-loading {
 			animation: none;
-			background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
+			background: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
 		}
 	}
 

package/dist/calendar/Calendar.svelte.d.ts

@@ -69,7 +69,7 @@ export interface CalendarProps {
     mondayStart?: boolean;
     /** Total height. Use `'auto'` to let content determine height (ideal for Agenda views). */
     height?: number | 'auto';
-    /** Border radius in px (default: 12). Set to 0 for no rounding. */
+    /** Border radius in px (default: 0, square-cut). */
     borderRadius?: number;
     /** Text direction: 'ltr' (default), 'rtl', or 'auto' */
     dir?: 'ltr' | 'rtl' | 'auto';

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
@@ -43,18 +43,18 @@ const dayNum = $derived(new Date(dayMs).getDate());
 		font: 500 10px / 1 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.04em;
 		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));
 	}
 	.dh-name-long {
 		font-size: 12px;
 		text-transform: none;
 		letter-spacing: 0.01em;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 	}
 
 	.dh-num {
 		font: 600 14px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		width: 28px;
 		height: 28px;
 		display: flex;
@@ -63,20 +63,20 @@ const dayNum = $derived(new Date(dayMs).getDate());
 		border-radius: 50%;
 	}
 	.dh-num-today {
-		background: var(--dt-accent, #2563eb);
+		background: var(--dt-accent, #1d4fd7);
 		color: var(--dt-btn-text, #fff);
 	}
 
 	.dh-date {
 		font: 400 10px / 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));
 	}
 
 	.dh-rel {
 		font: 500 12px / 1.3 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));
 	}
 	.dh-today .dh-rel {
-		color: var(--dt-accent, #2563eb);
+		color: var(--dt-accent, #1d4fd7);
 	}
 </style>

package/dist/primitives/EmptySlot.svelte

@@ -49,13 +49,13 @@ function handleKeydown(e) {
 		min-height: 24px;
 	}
 	.es:hover {
-		border-color: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
-		background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
+		border-color: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
+		background: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
 	}
 	.es:focus-visible {
-		outline: 2px solid var(--dt-accent, #2563eb);
+		outline: 2px solid var(--dt-text, #0f0f0f);
 		outline-offset: 2px;
-		border-color: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
+		border-color: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
 	}
 
 	.es-hint {
@@ -74,12 +74,12 @@ function handleKeydown(e) {
 
 	.es-plus {
 		font: 500 14px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-accent, #2563eb);
+		color: var(--dt-accent, #1d4fd7);
 	}
 	.es-range {
 		font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 
 	.es-v {