@nomideusz/svelte-calendar 0.9.0 → 0.11.0

package/README.md

@@ -657,19 +657,25 @@ The `locale` prop controls date/time formatting (BCP 47):
 
 `setDefaultLocale('de-DE')` sets the locale globally instead of per component (`getDefaultLocale()` reads it back, `is24HourLocale(tag)` tells you how times will format).
 
-Override UI labels for full translation:
+Override UI labels per calendar with the `labels` prop — it's reactive (swap it to switch language live) and instance-scoped (two calendars on one page can carry different languages):
 
-```ts
-import { setLabels } from '@nomideusz/svelte-calendar';
-
-setLabels({
+```svelte
+<Calendar {adapter} locale="de-DE" labels={{
   today: 'Heute', day: 'Tag', week: 'Woche',
   noEvents: 'Keine Termine',
   nMore: (n) => `+${n} weitere`,
-});
+}} />
+```
+
+Or set labels globally before mount:
+
+```ts
+import { setLabels } from '@nomideusz/svelte-calendar';
+
+setLabels({ today: 'Heute', day: 'Tag', week: 'Woche' });
 ```
 
-Call `resetLabels()` to restore English defaults (`defaultLabels` exports them; `getLabels()` reads the active set).
+The `labels` prop merges over the global set. Call `resetLabels()` to restore English defaults (`defaultLabels` exports them; `getLabels()` reads the active set). Note: global `setLabels()` calls after mount don't re-render already-mounted calendars — use the `labels` prop for dynamic language switching. Standalone primitives (`DayHeader`, `EventBlock`, …) always read the global set.
 
 <details>
 <summary>All label keys</summary>
@@ -784,6 +790,8 @@ Drop into any HTML page — no build tools needed. Registers a `<day-calendar>`
 ></day-calendar>
 ```
 
+The widget renders inside shadow DOM: host-page CSS (resets, theme stylesheets) cannot affect the calendar and calendar styles never leak out, while the `auto` theme still probes the host page's colors and fonts across the shadow boundary.
+
 | Attribute | Description |
 |-----------|-------------|
 | `api` | REST endpoint — fetched as `GET {api}?start=...&end=...` |

package/dist/calendar/Calendar.svelte

@@ -23,7 +23,7 @@ import { createViewState } from "../engine/view-state.svelte.js";
 import { createSelection } from "../engine/selection.svelte.js";
 import { createDragState } from "../engine/drag.svelte.js";
 import { onMount } from "svelte";
-import { getLabels } from "../core/locale.js";
+import { getLabels, fmtWeekRange } from "../core/locale.js";
 import { auto } from "../theme/presets.js";
 import { probeHostTheme, observeHostTheme } from "../theme/auto.js";
 import Planner from "../views/planner/Planner.svelte";
@@ -52,6 +52,7 @@ let {
   borderRadius = 12,
   dir,
   locale,
+  labels: labelsProp,
   readOnly = false,
   visibleHours,
   initialDate,
@@ -95,11 +96,17 @@ function handleEventClick(ev) {
   selection.select(ev.id);
   oneventclick?.(ev);
 }
-let containerWidth = $state(0);
+let containerWidth = $state(
+  typeof window !== "undefined" && window.matchMedia?.(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`).matches ? window.innerWidth : 0
+);
 const isMobileContainer = $derived(containerWidth > 0 && containerWidth < MOBILE_BREAKPOINT);
 const useMobile = $derived(
   mobileProp === "auto" ? isMobileContainer : Boolean(mobileProp)
 );
+const HEADER_STACK_BREAKPOINT = 520;
+const stackHeader = $derived(
+  useMobile && containerWidth > 0 && containerWidth < HEADER_STACK_BREAKPOINT
+);
 let calEl = $state();
 let probedTheme = $state("");
 const needsProbe = $derived(theme === auto && autoTheme !== false);
@@ -233,7 +240,7 @@ setContext("calendar", {
     return oneventhover;
   },
   get ondayclick() {
-    return ondayclick;
+    return ondayclick ?? defaultDayClick;
   },
   get timezone() {
     return timezone;
@@ -287,6 +294,9 @@ setContext("calendar", {
   get compact() {
     return compact;
   },
+  get labels() {
+    return mergedLabels;
+  },
   // Load range (read/write)
   get loadRange() {
     return viewLoadRange;
@@ -347,6 +357,13 @@ const dateLabel = $derived.by(() => {
       day: "numeric"
     });
   }
+  if (viewState.mode === "week") {
+    return fmtWeekRange(
+      viewState.range.start.getTime(),
+      locale,
+      viewState.range.end.getTime() - 1
+    );
+  }
   return viewState.focusDate.toLocaleDateString(locale, {
     month: "long",
     year: "numeric"
@@ -356,19 +373,77 @@ const modes = $derived.by(() => {
   const g = new Set(desktopViews.map((v) => v.mode));
   return ["day", "week", "month"].filter((key) => g.has(key));
 });
-const L = $derived(getLabels());
+const mergedLabels = $derived(
+  labelsProp ? { ...getLabels(), ...labelsProp } : getLabels()
+);
+const L = $derived(mergedLabels);
+let lastViewLabel = $state(void 0);
+$effect(() => {
+  const current = views.find((v) => v.id === viewState.view);
+  if (current && current.mode !== "month") lastViewLabel = current.label;
+});
 function switchMode(g) {
-  const currentLabel = desktopViews.find((v) => v.id === viewState.view)?.label ?? activeView?.label;
-  const match = desktopViews.find((v) => v.mode === g && v.label === currentLabel);
+  const currentView = desktopViews.find((v) => v.id === viewState.view) ?? activeView;
+  const preferredLabel = currentView?.mode === "month" ? lastViewLabel ?? currentView?.label : currentView?.label;
+  const match = desktopViews.find((v) => v.mode === g && v.label === preferredLabel);
   const fallback = desktopViews.find((v) => v.mode === g);
   const target = match ?? fallback;
   if (target) viewState.setView(target.id);
 }
+const labelsForMode = $derived.by(() => {
+  const seen = [];
+  for (const v of desktopViews) {
+    if (v.mode === viewState.mode && !seen.includes(v.label)) seen.push(v.label);
+  }
+  return seen;
+});
+function switchLabel(label) {
+  const target = desktopViews.find((v) => v.mode === viewState.mode && v.label === label);
+  if (target) viewState.setView(target.id);
+}
+const defaultDayClick = $derived.by(() => {
+  const target = desktopViews.find((v) => v.mode === "day" && v.label === lastViewLabel) ?? desktopViews.find((v) => v.mode === "day");
+  if (!target) return void 0;
+  return (date) => {
+    viewState.setFocusDate(date);
+    viewState.setView(target.id);
+  };
+});
 const viewIncludesToday = $derived.by(() => {
-  const now = Date.now();
+  const now = /* @__PURE__ */ new Date();
+  if (viewState.mode === "month") {
+    const f = viewState.focusDate;
+    return f.getMonth() === now.getMonth() && f.getFullYear() === now.getFullYear();
+  }
   const { start, end } = viewState.range;
-  return now >= start.getTime() && now < end.getTime();
+  return now.getTime() >= start.getTime() && now.getTime() < end.getTime();
+});
+const resolvedDir = $derived.by(() => {
+  if (dir) return dir;
+  if (!locale) return void 0;
+  try {
+    const info = new Intl.Locale(locale);
+    const direction = info.textInfo?.direction ?? info.getTextInfo?.().direction;
+    return direction === "rtl" ? "rtl" : void 0;
+  } catch {
+    return void 0;
+  }
 });
+function handleShortcuts(e) {
+  if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey) return;
+  const t = e.target;
+  if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
+  if (e.key === "t" || e.key === "T") {
+    e.preventDefault();
+    viewState.goToday();
+  } else if (e.key === "ArrowLeft") {
+    e.preventDefault();
+    viewState.prev();
+  } else if (e.key === "ArrowRight") {
+    e.preventDefault();
+    viewState.next();
+  }
+}
 const headerCtx = $derived({
   dateLabel,
   mode: viewState.mode,
@@ -390,6 +465,7 @@ const navCtx = $derived({
 });
 </script>
 
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -- shortcut keys (t/←/→) act on events bubbling from the calendar's focusable controls; the region itself is not a tab stop -->
 <div
 	class="cal"
 	bind:this={calEl}
@@ -397,8 +473,10 @@ const navCtx = $derived({
 	class:cal--auto={heightProp === 'auto'}
 	role="region"
 	aria-label={L.calendar}
-	dir={dir}
+	aria-busy={store.loading || undefined}
+	dir={resolvedDir}
 	lang={locale}
+	onkeydown={handleShortcuts}
 >
 	<!-- ─── Custom header snippet (replaces all chrome) ─── -->
 	{#if headerSnippet}
@@ -406,23 +484,18 @@ const navCtx = $derived({
 
 	<!-- ─── Mobile header (flow layout, no absolute) ─── -->
 	{:else if useMobile && (showNavigation || (showModePills && modes.length > 1) || dateLabel)}
-		<div class="cal-m-hd">
+		{@const titleBelow = stackHeader && !!dateLabel}
+		<div class="cal-m-hd" class:cal-m-hd--stack={stackHeader} class:cal-m-hd--titled={titleBelow}>
 			<div class="cal-m-left">
-				{#if navigationSnippet}
-					{@render navigationSnippet(navCtx)}
-				{:else if showNavigation}
-					<button class="cal-m-nav" onclick={() => viewState.prev()} aria-label={viewState.mode === 'day' ? L.previousDay : viewState.mode === 'month' ? L.previousMonth : L.previousWeek}>
-						<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="16" height="16" aria-hidden="true"><path d="M10 3 5 8l5 5"/></svg>
-					</button>
-				{/if}
-
 				{#if showModePills && modes.length > 1}
-					<div class="cal-m-pills" role="group" aria-label={L.viewMode}>
-						{#each modes as g}
+					<div class="cal-m-pills" role="radiogroup" aria-label={L.viewMode}>
+						{#each modes as g (g)}
 							<button
+								type="button"
 								class="cal-m-pill"
 								class:cal-m-pill--active={viewState.mode === g}
-								aria-pressed={viewState.mode === g}
+								role="radio"
+								aria-checked={viewState.mode === g}
 								onclick={() => switchMode(g)}
 							>
 								{g === 'day' ? L.day : g === 'week' ? L.week : L.month}
@@ -432,23 +505,36 @@ const navCtx = $derived({
 				{/if}
 			</div>
 
-			<span class="cal-m-title">{dateLabel}</span>
+			{#if !titleBelow}
+				<span class="cal-m-title" role="status" aria-live="polite" aria-atomic="true">{dateLabel}</span>
+			{/if}
 
 			<div class="cal-m-right">
-				{#if !navigationSnippet && showNavigation}
-					<button class="cal-m-nav" onclick={() => viewState.next()} aria-label={viewState.mode === 'day' ? L.nextDay : viewState.mode === 'month' ? L.nextMonth : L.nextWeek}>
+				{#if navigationSnippet}
+					{@render navigationSnippet(navCtx)}
+				{:else if showNavigation}
+					<!-- Always rendered (disabled on today) so navigating never shifts layout -->
+					<button
+						type="button"
+						class="cal-m-today"
+						onclick={() => viewState.goToday()}
+						disabled={viewIncludesToday}
+						title={L.goToToday}
+					>
+						{L.today}
+					</button>
+					<button type="button" class="cal-m-nav" onclick={() => viewState.prev()} aria-label={viewState.mode === 'day' ? L.previousDay : viewState.mode === 'month' ? L.previousMonth : L.previousWeek}>
+						<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="16" height="16" aria-hidden="true"><path d="M10 3 5 8l5 5"/></svg>
+					</button>
+					<button type="button" class="cal-m-nav" onclick={() => viewState.next()} aria-label={viewState.mode === 'day' ? L.nextDay : viewState.mode === 'month' ? L.nextMonth : L.nextWeek}>
 						<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="16" height="16" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg>
 					</button>
 				{/if}
 			</div>
 		</div>
-
-		<!-- Today pill — floats below header, doesn't affect header flow -->
-		{#if !navigationSnippet && showNavigation && !viewIncludesToday}
-			<div class="cal-m-today-bar">
-				<button class="cal-m-today" onclick={() => viewState.goToday()}>
-					{L.today}
-				</button>
+		{#if titleBelow}
+			<div class="cal-m-titlebar">
+				<span class="cal-m-title" role="status" aria-live="polite" aria-atomic="true">{dateLabel}</span>
 			</div>
 		{/if}
 
@@ -459,28 +545,52 @@ const navCtx = $derived({
 				{#if navigationSnippet}
 					{@render navigationSnippet(navCtx)}
 				{:else if showNavigation}
-					{#if !viewIncludesToday}
-						<button class="cal-hd-today" onclick={() => viewState.goToday()} title={L.goToToday}>
-							{L.today}
-						</button>
-					{/if}
-					<button class="cal-hd-btn" onclick={() => viewState.prev()} aria-label={viewState.mode === 'day' ? L.previousDay : viewState.mode === 'month' ? L.previousMonth : L.previousWeek}>
+					<!-- Always rendered (disabled on today) so navigating never shifts the centered title -->
+					<button
+						type="button"
+						class="cal-hd-today"
+						onclick={() => viewState.goToday()}
+						disabled={viewIncludesToday}
+						title={L.goToToday}
+					>
+						{L.today}
+					</button>
+					<button type="button" class="cal-hd-btn" onclick={() => viewState.prev()} aria-label={viewState.mode === 'day' ? L.previousDay : viewState.mode === 'month' ? L.previousMonth : L.previousWeek}>
 						<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16" aria-hidden="true"><path d="M10 3 5 8l5 5"/></svg>
 					</button>
-					<button class="cal-hd-btn" onclick={() => viewState.next()} aria-label={viewState.mode === 'day' ? L.nextDay : viewState.mode === 'month' ? L.nextMonth : L.nextWeek}>
+					<button type="button" class="cal-hd-btn" onclick={() => viewState.next()} aria-label={viewState.mode === 'day' ? L.nextDay : viewState.mode === 'month' ? L.nextMonth : L.nextWeek}>
 						<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg>
 					</button>
 				{/if}
 			</div>
-			<span class="cal-hd-title">{dateLabel}</span>
+			<span class="cal-hd-title" role="status" aria-live="polite" aria-atomic="true">{dateLabel}</span>
 			<div class="cal-hd-side cal-hd-side--end">
+				{#if showModePills && 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}>
+						{#each labelsForMode as label (label)}
+							<button
+								type="button"
+								class="cal-pill"
+								class:cal-pill--active={activeView?.label === label}
+								role="radio"
+								aria-checked={activeView?.label === label}
+								onclick={() => switchLabel(label)}
+							>
+								{label}
+							</button>
+						{/each}
+					</div>
+				{/if}
 				{#if showModePills && modes.length > 1}
-					<div class="cal-pills" role="group" aria-label={L.viewMode}>
-						{#each modes as g}
+					<div class="cal-pills" role="radiogroup" aria-label={L.viewMode}>
+						{#each modes as g (g)}
 							<button
+								type="button"
 								class="cal-pill"
 								class:cal-pill--active={viewState.mode === g}
-								aria-pressed={viewState.mode === g}
+								role="radio"
+								aria-checked={viewState.mode === g}
 								onclick={() => switchMode(g)}
 							>
 								{g === 'day' ? L.day : g === 'week' ? L.week : L.month}
@@ -543,6 +653,7 @@ const navCtx = $derived({
 	/* ── Desktop header ── */
 	.cal-hd {
 		display: flex;
+		flex-wrap: wrap;
 		align-items: center;
 		gap: 8px;
 		padding: 8px 12px;
@@ -611,10 +722,14 @@ const navCtx = $derived({
 		transition: background 120ms, color 120ms, border-color 120ms;
 	}
 
-	.cal-hd-today:hover {
+	.cal-hd-today:hover:not(:disabled) {
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		border-color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
+	.cal-hd-today:disabled {
+		opacity: 0.45;
+		cursor: default;
+	}
 
 	.cal-pills {
 		display: flex;
@@ -637,7 +752,9 @@ const navCtx = $derived({
 		transition: background 100ms, color 100ms;
 	}
 
-	.cal-pill:hover {
+	/* :not(--active) — the hover rule otherwise outranks the active color,
+	   and iOS keeps :hover stuck after a tap (dark text on the accent). */
+	.cal-pill:hover:not(.cal-pill--active) {
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 
@@ -685,6 +802,13 @@ const navCtx = $derived({
 		100% { transform: translateX(100%); }
 	}
 
+	@media (prefers-reduced-motion: reduce) {
+		.cal-loading {
+			animation: none;
+			background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
+		}
+	}
+
 	/* ── Mobile header (flow layout) ── */
 	.cal-m-hd {
 		display: flex;
@@ -696,6 +820,26 @@ const navCtx = $derived({
 		min-height: 44px;
 	}
 
+	/* Narrow containers: the date label moves to its own row (.cal-m-titlebar),
+	   so the controls row spreads pills and nav to the edges. */
+	.cal-m-hd--stack {
+		justify-content: space-between;
+	}
+	.cal-m-hd--titled {
+		border-bottom: none;
+		padding-bottom: 2px;
+	}
+	.cal-m-titlebar {
+		display: flex;
+		justify-content: center;
+		padding: 0 8px 8px;
+		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		flex-shrink: 0;
+	}
+	.cal-m-titlebar .cal-m-title {
+		flex: 0 1 auto;
+	}
+
 	.cal-m-left,
 	.cal-m-right {
 		display: flex;
@@ -712,8 +856,8 @@ const navCtx = $derived({
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 32px;
-		height: 32px;
+		width: 40px;
+		height: 40px;
 		border: none;
 		background: transparent;
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
@@ -749,15 +893,15 @@ const navCtx = $derived({
 		background: transparent;
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		cursor: pointer;
-		font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
-		padding: 5px 10px;
+		font: 600 12px / 1 var(--dt-sans, system-ui, sans-serif);
+		padding: 9px 12px;
 		border-radius: 6px;
 		letter-spacing: 0.04em;
 		text-transform: uppercase;
 		transition: background 100ms, color 100ms;
 		-webkit-tap-highlight-color: transparent;
 	}
-	.cal-m-pill:hover {
+	.cal-m-pill:hover:not(.cal-m-pill--active) {
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 	.cal-m-pill--active {
@@ -776,19 +920,13 @@ const navCtx = $derived({
 		min-width: 0;
 	}
 
-	.cal-m-today-bar {
-		display: flex;
-		justify-content: center;
-		padding: 12px 8px 6px;
-		flex-shrink: 0;
-	}
-
 	.cal-m-today {
-		font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
+		font: 600 12px / 1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-accent, #2563eb);
 		background: color-mix(in srgb, var(--dt-accent, #2563eb) 10%, transparent);
 		border: none;
-		padding: 5px 10px;
+		min-height: 40px;
+		padding: 5px 12px;
 		border-radius: 6px;
 		cursor: pointer;
 		white-space: nowrap;
@@ -798,12 +936,16 @@ const navCtx = $derived({
 		-webkit-tap-highlight-color: transparent;
 		flex-shrink: 0;
 	}
-	.cal-m-today:hover {
+	.cal-m-today:hover:not(:disabled) {
 		background: color-mix(in srgb, var(--dt-accent, #2563eb) 18%, transparent);
 	}
-	.cal-m-today:active {
+	.cal-m-today:active:not(:disabled) {
 		background: color-mix(in srgb, var(--dt-accent, #2563eb) 25%, transparent);
 	}
+	.cal-m-today:disabled {
+		opacity: 0.45;
+		cursor: default;
+	}
 	.cal-m-today:focus-visible {
 		outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
 		outline-offset: 2px;

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

@@ -2,6 +2,7 @@ import { type Component, type Snippet } from 'svelte';
 import type { CalendarAdapter } from '../adapters/types.js';
 import type { CalendarViewId } from '../engine/view-state.svelte.js';
 import type { TimelineEvent, BlockedSlot } from '../core/types.js';
+import { type CalendarLabels } from '../core/locale.js';
 import type { AutoThemeOptions } from '../theme/auto.js';
 /** One view registration */
 export interface CalendarView {
@@ -42,6 +43,12 @@ interface Props {
     dir?: 'ltr' | 'rtl' | 'auto';
     /** BCP 47 locale tag (e.g. 'en-US', 'ar-SA') — sets lang and locale for formatting */
     locale?: string;
+    /**
+     * Per-instance UI label overrides (merged over the global `setLabels()` set).
+     * Reactive: changing the prop re-renders all label text, and two calendars
+     * on one page can carry different languages.
+     */
+    labels?: Partial<CalendarLabels>;
     /** Read-only mode: disables drag, resize, empty-slot creation */
     readOnly?: boolean;
     /** Visible hour range: [startHour, endHour). Crops the grid to these hours. */

package/dist/core/locale.d.ts

@@ -40,6 +40,14 @@ export interface CalendarLabels {
     nextMonth: string;
     calendar: string;
     viewMode: string;
+    /** Event status: cancelled */
+    cancelled: string;
+    /** Event status: tentative */
+    tentative: string;
+    /** Event status: fully booked */
+    full: string;
+    /** Event status: limited availability */
+    limited: string;
     dayNavigation: string;
     weekNavigation: string;
     dayPlanner: string;
@@ -64,6 +72,12 @@ export interface CalendarLabels {
     dayNOfTotal: (current: number, total: number) => string;
     /** e.g. "75% complete" */
     percentComplete: (pct: number) => string;
+    /** Relative countdown, e.g. "in 45m" */
+    inMinutes: (mins: number) => string;
+    /** Relative countdown, e.g. "in 2h 15m" / "in 2h" */
+    inHours: (hours: number, mins: number) => string;
+    /** Relative countdown, e.g. "in 3d" */
+    inDays: (days: number) => string;
 }
 /** English defaults — used unless overridden via `setLabels()`. */
 export declare const defaultLabels: CalendarLabels;
@@ -102,7 +116,7 @@ export declare function fmtDay(ms: number, todayMs: number, opts?: {
 /**
  * Format a week range label: "Feb 17 – 23, 2026" or "Jan 27 – Feb 2, 2026"
  */
-export declare function fmtWeekRange(weekStartMs: number, locale?: string): string;
+export declare function fmtWeekRange(weekStartMs: number, locale?: string, weekEndMs?: number): string;
 /**
  * Format a Date as a compact time string.
  *

package/dist/core/locale.js

@@ -38,6 +38,10 @@ export const defaultLabels = {
     nextMonth: 'Next month',
     calendar: 'Calendar',
     viewMode: 'View mode',
+    cancelled: 'cancelled',
+    tentative: 'tentative',
+    full: 'full',
+    limited: 'limited',
     dayNavigation: 'Day navigation',
     weekNavigation: 'Week navigation',
     dayPlanner: 'Day planner',
@@ -57,6 +61,9 @@ export const defaultLabels = {
     showLess: 'Show less',
     dayNOfTotal: (current, total) => `day ${current} of ${total}`,
     percentComplete: (pct) => `${pct}% complete`,
+    inMinutes: (mins) => `in ${mins}m`,
+    inHours: (hours, mins) => (mins > 0 ? `in ${hours}h ${mins}m` : `in ${hours}h`),
+    inDays: (days) => `in ${days}d`,
 };
 let _labels = { ...defaultLabels };
 /** Replace one or more UI labels. Merges with current labels. */
@@ -160,10 +167,10 @@ export function fmtDay(ms, todayMs, opts, locale) {
 /**
  * Format a week range label: "Feb 17 – 23, 2026" or "Jan 27 – Feb 2, 2026"
  */
-export function fmtWeekRange(weekStartMs, locale) {
+export function fmtWeekRange(weekStartMs, locale, weekEndMs) {
     const loc = locale ?? defaultLocale;
     const s = new Date(weekStartMs);
-    const e = new Date(weekStartMs + 6 * DAY_MS);
+    const e = new Date(weekEndMs ?? weekStartMs + 6 * DAY_MS);
     const sm = s.toLocaleDateString(loc, { month: 'short' });
     const em = e.toLocaleDateString(loc, { month: 'short' });
     const sy = s.getFullYear();

package/dist/theme/auto.js

@@ -99,6 +99,23 @@ function mix(c1, c2, t) {
         Math.round(c1[2] + (c2[2] - c1[2]) * t),
     ];
 }
+// ── Shadow-aware DOM walking ────────────────────────────
+/**
+ * Parent element that hops shadow boundaries. When a node is a direct child
+ * of a ShadowRoot, `parentElement` is null — continue the walk from the
+ * shadow host so probes can still see the host page (the embeddable widget
+ * mounts the calendar inside a shadow root).
+ */
+function parentAcrossShadow(node) {
+    if (node.parentElement)
+        return node.parentElement;
+    const root = node.getRootNode();
+    return typeof ShadowRoot !== 'undefined' &&
+        root instanceof ShadowRoot &&
+        root.host instanceof HTMLElement
+        ? root.host
+        : null;
+}
 // ── Text color detection ────────────────────────────────
 /**
  * Common CSS variable names for text / foreground color used by popular frameworks.
@@ -164,7 +181,7 @@ function probeTextColor(el, bg) {
                 break;
             }
         }
-        node = node.parentElement;
+        node = parentAcrossShadow(node);
     }
     // 3. Walk up the DOM reading *computed* color
     node = el;
@@ -178,7 +195,7 @@ function probeTextColor(el, bg) {
             }
         }
         catch { /* ignore */ }
-        node = node.parentElement;
+        node = parentAcrossShadow(node);
     }
     // Pick the first candidate with adequate contrast against the background.
     // WCAG AA large-text minimum is 3:1.
@@ -367,7 +384,7 @@ function probeBackground(el) {
             if (rgb)
                 return result(rgb);
         }
-        node = node.parentElement;
+        node = parentAcrossShadow(node);
     }
     // 3. Fall back to computed backgroundColor (may be mid-transition, but
     //    still correct when no transition is active).
@@ -382,7 +399,7 @@ function probeBackground(el) {
         catch {
             // getComputedStyle may fail in test environments
         }
-        node = node.parentElement;
+        node = parentAcrossShadow(node);
     }
     // 4. Ultimate fallback: check color-scheme preference
     if (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
@@ -400,7 +417,9 @@ function probeBackground(el) {
 export function probeHostTheme(el, options = {}) {
     // Start probing from the parent — `el` itself is the calendar root, which
     // has its own --dt-bg fallback in CSS. We need the *host page's* context.
-    const host = el.parentElement ?? el;
+    // (Shadow-aware: inside a shadow root the parent hop lands on the shadow
+    // host, i.e. the <day-calendar> element in the light DOM.)
+    const host = parentAcrossShadow(el) ?? el;
     const htmlRoot = (host.closest('body') ?? host) instanceof HTMLElement
         ? (host.closest('body') ?? host)
         : document.body;
@@ -445,7 +464,7 @@ export function probeHostTheme(el, options = {}) {
     // ── Accent derivatives ──
     const accentDim = isDark ? 0.15 : 0.12;
     const glow = isDark ? 0.30 : 0.25;
-    const todayBg = isDark ? 0.03 : 0.04;
+    const todayBg = isDark ? 0.07 : 0.07;
     // Ensure accent is readable on the background — adjust lightness if needed
     const accentL = isDark
         ? Math.max(aL, 0.45) // bright enough on dark
@@ -475,6 +494,8 @@ export function probeHostTheme(el, options = {}) {
         `--dt-btn-text: ${btnText}`,
         `--dt-scrollbar: ${rgba(...borderRgb, scrollAlpha)}`,
         `--dt-success: ${rgba(...successRgb, 0.7)}`,
+        `--dt-weekend-bg: ${rgba(...borderRgb, isDark ? 0.03 : 0.02)}`,
+        `--dt-hover: ${rgba(...borderRgb, isDark ? 0.06 : 0.04)}`,
         `--dt-sans: ${fonts.sans}`,
         `--dt-mono: ${fonts.mono}`,
     ];