@nomideusz/svelte-calendar 0.1.0 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
-# @svelte-calendar/core
+# @nomideusz/svelte-calendar
 
-A themeable, pluggable **Svelte 5** calendar component library with **Day** and **Week** views  ready for yoga studios, tour bookings, concerts, language schools, and more.
+A themeable, pluggable **Svelte 5** calendar component library with **Day** and **Week** views — ready for yoga studios, tour bookings, concerts, language schools, and more.
 
 ## Views — Concept-Paired
 
@@ -9,14 +9,15 @@ Switching between Day and Week preserves the active concept.
 
 | Concept | Day View | Week View | Description |
 |---------|----------|-----------|-------------|
-| **Grid** | DayTimeline (horizontal) | WeekGrid (vertical) | The primary planner — time blocks on a scrollable grid. |
-| **Agenda** | DayAgenda | WeekAgenda | List / feed — Done, Now, Next (day) or grouped-by-day scroll (week). |
+| **Grid** | DayGrid | WeekGrid | The primary planner — time blocks on a scrollable grid. |
+| **Timeline** | DayTimeline | — | Horizontal day timeline. Day-only. |
+| **Agenda** | Agenda `mode="day"` | Agenda `mode="week"` | List / feed — Done, Now, Next (day) or grouped-by-day scroll (week). |
 | **Heatmap** | — | WeekHeatmap | Density view — 24 cells per day showing busy/free intensity. Week-only. |
 
 ## Installation
 
 ```bash
-npm install @svelte-calendar/core
+pnpm add @nomideusz/svelte-calendar
 ```
 
 > **Peer dependency:** Svelte 5 (`^5.0.0`)
@@ -27,15 +28,15 @@ npm install @svelte-calendar/core
 <script lang="ts">
   import {
     Calendar,
+    DayGrid,
     DayTimeline,
-    DayAgenda,
+    Agenda,
     WeekGrid,
-    WeekAgenda,
     WeekHeatmap,
     createMemoryAdapter,
     midnight,
-  } from '@svelte-calendar/core';
-  import type { CalendarView, TimelineEvent } from '@svelte-calendar/core';
+  } from '@nomideusz/svelte-calendar';
+  import type { CalendarView, TimelineEvent } from '@nomideusz/svelte-calendar';
 
   const events: TimelineEvent[] = [
     { id: '1', title: 'Yoga Flow', start: new Date('2025-03-01T09:00'), end: new Date('2025-03-01T10:00'), color: '#818cf8' },
@@ -47,10 +48,10 @@ npm install @svelte-calendar/core
 
   // Concepts are paired by label — switching Day↔Week preserves the concept
   const views: CalendarView[] = [
-    { id: 'day-grid',     label: 'Grid',    granularity: 'day',  component: DayTimeline },
+    { id: 'day-grid',     label: 'Grid',    granularity: 'day',  component: DayGrid },
     { id: 'week-grid',    label: 'Grid',    granularity: 'week', component: WeekGrid },
-    { id: 'day-agenda',   label: 'Agenda',  granularity: 'day',  component: DayAgenda },
-    { id: 'week-agenda',  label: 'Agenda',  granularity: 'week', component: WeekAgenda },
+    { id: 'day-agenda',   label: 'Agenda',  granularity: 'day',  component: Agenda, props: { mode: 'day' } },
+    { id: 'week-agenda',  label: 'Agenda',  granularity: 'week', component: Agenda, props: { mode: 'week' } },
     { id: 'week-heatmap', label: 'Heatmap', granularity: 'week', component: WeekHeatmap },
   ];
 </script>
@@ -66,6 +67,27 @@ npm install @svelte-calendar/core
 />
 ```
 
+## Settings Panel
+
+The `Settings` component provides a theme picker and dynamic fields for controlling view parameters:
+
+```svelte
+<script lang="ts">
+  import { Settings } from '@nomideusz/svelte-calendar';
+  import type { SettingsField, PresetName } from '@nomideusz/svelte-calendar';
+
+  let theme: PresetName = $state('midnight');
+  let values = $state({ hourHeight: 60, elastic: true });
+
+  const fields: SettingsField[] = [
+    { key: 'hourHeight', label: 'Hour Height', type: 'range', min: 40, max: 120, step: 5 },
+    { key: 'elastic', label: 'Elastic Compression', type: 'toggle' },
+  ];
+</script>
+
+<Settings {fields} bind:values bind:theme />
+```
+
 ## Themes
 
 Three built-in presets  each view reads from the same `--dt-*` CSS custom property contract:
@@ -78,7 +100,7 @@ Three built-in presets  each view reads from the same `--dt-*` CSS custom proper
 
 ```svelte
 <script>
-  import { midnight, parchment, indigo, presets } from '@svelte-calendar/core';
+  import { midnight, parchment, indigo, presets } from '@nomideusz/svelte-calendar';
 </script>
 
 <!-- Apply directly -->
@@ -107,13 +129,13 @@ const custom = `
 
 ```
 src/lib/
-+-- core/          # Clock, time utils, locale, types
-+-- engine/        # Reactive state: event-store, view-state, selection, drag
-+-- adapters/      # Data layer: memory adapter, REST adapter
-+-- primitives/    # Low-level UI atoms: NowIndicator, EventBlock, TimeGutter...
-+-- calendar/      # Calendar shell, Toolbar
-+-- views/         # The 6 view components (day/ + week/)
-+-- theme/         # Preset themes and token definitions
+├── core/          # Clock, time utils, locale, types
+├── engine/        # Reactive state: event-store, view-state, selection, drag
+├── adapters/      # Data layer: memory adapter, REST adapter
+├── primitives/    # Low-level UI atoms: NowIndicator, EventBlock, TimeGutter...
+├── calendar/      # Calendar shell, Toolbar
+├── views/         # View components (day/, week/, agenda/, settings/)
+└── theme/         # Preset themes and token definitions
 ```
 
 ## Engine
@@ -124,19 +146,19 @@ import {
   createViewState,
   createSelection,
   createDragState,
-} from '@svelte-calendar/core';
+} from '@nomideusz/svelte-calendar';
 ```
 
-- **`createEventStore(adapter)`**  reactive event list with fetch/add/update/remove
-- **`createViewState(options)`**  current view, date range, navigation (prev/next/today)
-- **`createSelection()`**  selected event tracking
-- **`createDragState()`**  drag-to-create and drag-to-move state machine
+- **`createEventStore(adapter)`** — reactive event list with fetch/add/update/remove
+- **`createViewState(options)`** — current view, date range, navigation (prev/next/today)
+- **`createSelection()`** — selected event tracking
+- **`createDragState()`** — drag-to-create and drag-to-move state machine
 
 ## Adapters
 
 | Adapter | Use |
 |---------|-----|
-| `createMemoryAdapter(events)` | In-memory  great for demos and prototyping |
+| `createMemoryAdapter(events)` | In-memory — great for demos and prototyping |
 | `createRestAdapter(options)` | Fetch from a REST API with configurable endpoints |
 
 ## Standalone Views
@@ -150,6 +172,9 @@ Each view works independently without the Calendar shell:
 <!-- Vertical day grid with elastic night compression -->
 <DayGrid style={midnight} events={events} height={600} elastic />
 
+<!-- Agenda in day mode -->
+<Agenda mode="day" events={events} height={520} />
+
 <!-- Week density heatmap -->
 <WeekHeatmap style={parchment} events={events} height={320} />
 ```
@@ -157,10 +182,10 @@ Each view works independently without the Calendar shell:
 ## Development
 
 ```bash
-npm install
-npm run dev          # SvelteKit dev server (demo app)
-npm run check        # Type check
-npm run package      # Build the library into dist/
+pnpm install
+pnpm dev             # SvelteKit dev server (demo app)
+pnpm check           # Type check
+pnpm run package     # Build the library into dist/
 ```
 
 ## License

package/dist/calendar/Calendar.svelte

@@ -59,6 +59,10 @@
 		showToolbar?: boolean;
 		/** Links to display in toolbar */
 		links?: { href: string; label: string }[];
+		/** Text direction: 'ltr' (default), 'rtl', or 'auto' */
+		dir?: 'ltr' | 'rtl' | 'auto';
+		/** BCP 47 locale tag (e.g. 'en-US', 'ar-SA') — sets lang and locale for formatting */
+		locale?: string;
 
 		// ── Callbacks ──
 		oneventclick?: (event: TimelineEvent) => void;
@@ -75,11 +79,20 @@
 		height = 600,
 		showToolbar = true,
 		links = [],
+		dir,
+		locale,
 		oneventclick,
 		oneventcreate,
 		oneventmove,
 	}: Props = $props();
 
+	import { setDefaultLocale } from '../core/locale.js';
+
+	// ── Set locale when provided ──
+	$effect(() => {
+		if (locale) setDefaultLocale(locale);
+	});
+
 	// ── Create reactive state ──
 	const store: EventStore = $derived(createEventStore(adapter));
 	const viewState: ViewState = createViewState(untrack(() => ({
@@ -135,7 +148,14 @@
 	);
 </script>
 
-<div class="cal" style="{theme}; --cal-h: {height}px">
+<div
+	class="cal"
+	style="{theme}; --cal-h: {height}px"
+	role="region"
+	aria-label="Calendar"
+	dir={dir}
+	lang={locale}
+>
 	{#if showToolbar}
 		<Toolbar {viewState} views={toolbarViews} {links} />
 	{/if}

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

@@ -33,6 +33,10 @@ interface Props {
         href: string;
         label: string;
     }[];
+    /** Text direction: 'ltr' (default), 'rtl', or 'auto' */
+    dir?: 'ltr' | 'rtl' | 'auto';
+    /** BCP 47 locale tag (e.g. 'en-US', 'ar-SA') — sets lang and locale for formatting */
+    locale?: string;
     oneventclick?: (event: TimelineEvent) => void;
     oneventcreate?: (range: {
         start: Date;

package/dist/calendar/Toolbar.svelte

@@ -47,7 +47,7 @@
 	);
 </script>
 
-<nav class="tb">
+<nav class="tb" aria-label="Calendar navigation">
 	<!-- Nav: ← Today → -->
 	<div class="tb-nav">
 		<button class="tb-btn" onclick={() => viewState.prev()} aria-label="Previous">

package/dist/core/index.d.ts

@@ -1,6 +1,7 @@
 export { createClock } from './clock.svelte.js';
 export type { Clock } from './clock.svelte.js';
 export { DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, } from './time.js';
-export { setDefaultLocale, getDefaultLocale, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, } from './locale.js';
+export { setDefaultLocale, getDefaultLocale, is24HourLocale, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, } from './locale.js';
+export { toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './timezone.js';
 export type { TimelineEvent, WeekTimelineProps, DayTimelineProps, } from './types.js';
 export { timeToX } from './types.js';

package/dist/core/index.js

@@ -4,5 +4,7 @@ export { createClock } from './clock.svelte.js';
 // Time constants & math
 export { DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, } from './time.js';
 // Locale-aware formatting
-export { setDefaultLocale, getDefaultLocale, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, } from './locale.js';
+export { setDefaultLocale, getDefaultLocale, is24HourLocale, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, } from './locale.js';
+// Timezone utilities
+export { toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './timezone.js';
 export { timeToX } from './types.js';

package/dist/core/locale.d.ts

@@ -11,8 +11,9 @@
 export declare function setDefaultLocale(tag: string): void;
 /** Get the current default locale */
 export declare function getDefaultLocale(): string;
-/** Format hour index (0-23) as compact 12h label: 12a, 1a … 12p, 1p … */
-export declare function fmtH(h: number): string;
+export declare function is24HourLocale(locale?: string): boolean;
+/** Format hour index (0-23) as compact label: 12h ("12a", "1p") or 24h ("0", "13") */
+export declare function fmtH(h: number, locale?: string): string;
 /** Short weekday name for a timestamp: "Mon", "Tue", etc. */
 export declare function weekdayShort(ms: number, locale?: string): string;
 /** Long weekday name for a timestamp: "Monday", "Tuesday", etc. */

package/dist/core/locale.js

@@ -17,8 +17,25 @@ export function setDefaultLocale(tag) {
 export function getDefaultLocale() {
     return defaultLocale;
 }
-/** Format hour index (0-23) as compact 12h label: 12a, 1a … 12p, 1p … */
-export function fmtH(h) {
+/**
+ * Detect whether the current locale uses 12-hour or 24-hour time.
+ * Caches per locale tag for performance.
+ */
+const hourCycleCache = new Map();
+export function is24HourLocale(locale) {
+    const loc = locale ?? defaultLocale;
+    if (hourCycleCache.has(loc))
+        return hourCycleCache.get(loc);
+    const sample = new Intl.DateTimeFormat(loc, { hour: 'numeric' }).resolvedOptions();
+    const is24 = sample.hourCycle === 'h23' || sample.hourCycle === 'h24';
+    hourCycleCache.set(loc, is24);
+    return is24;
+}
+/** 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)

package/dist/core/timezone.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Convert a Date (assumed UTC or local) to a Date representing
+ * the same instant in the target timezone.
+ *
+ * The returned Date's local getters (getHours, getMinutes, etc.)
+ * will return the values as they appear in the target timezone.
+ */
+export declare function toZonedTime(date: Date | number, timezone: string): Date;
+/**
+ * Convert a "zoned" Date (whose local getters represent a specific timezone)
+ * back to a true UTC Date. Use this before persisting to a backend.
+ */
+export declare function fromZonedTime(date: Date | number, timezone: string): Date;
+/**
+ * Get the current time as it appears in the given timezone.
+ */
+export declare function nowInZone(timezone: string): Date;
+/**
+ * Format a Date in a specific timezone using Intl.DateTimeFormat.
+ * Returns a locale-aware string.
+ */
+export declare function formatInTimeZone(date: Date | number, timezone: string, options?: Intl.DateTimeFormatOptions, locale?: string): string;

package/dist/core/timezone.js

@@ -0,0 +1,53 @@
+/**
+ * Timezone utilities — convert between IANA timezones and local time.
+ *
+ * Uses date-fns-tz under the hood. All functions accept an IANA timezone
+ * string (e.g. 'America/New_York', 'Europe/Warsaw', 'Asia/Tokyo').
+ *
+ * Usage:
+ *   import { toZonedTime, fromZonedTime, nowInZone } from '@nomideusz/svelte-calendar';
+ *
+ *   // Convert a UTC date to display in a specific timezone
+ *   const localDate = toZonedTime(utcDate, 'America/New_York');
+ *
+ *   // Convert a "display" date back to UTC for storage
+ *   const utcDate = fromZonedTime(localDate, 'America/New_York');
+ *
+ *   // Get current time in a timezone
+ *   const now = nowInZone('Asia/Tokyo');
+ */
+import { toZonedTime as dfnsToZoned, fromZonedTime as dfnsFromZoned } from 'date-fns-tz';
+/**
+ * Convert a Date (assumed UTC or local) to a Date representing
+ * the same instant in the target timezone.
+ *
+ * The returned Date's local getters (getHours, getMinutes, etc.)
+ * will return the values as they appear in the target timezone.
+ */
+export function toZonedTime(date, timezone) {
+    return dfnsToZoned(date, timezone);
+}
+/**
+ * Convert a "zoned" Date (whose local getters represent a specific timezone)
+ * back to a true UTC Date. Use this before persisting to a backend.
+ */
+export function fromZonedTime(date, timezone) {
+    return dfnsFromZoned(date, timezone);
+}
+/**
+ * Get the current time as it appears in the given timezone.
+ */
+export function nowInZone(timezone) {
+    return dfnsToZoned(new Date(), timezone);
+}
+/**
+ * Format a Date in a specific timezone using Intl.DateTimeFormat.
+ * Returns a locale-aware string.
+ */
+export function formatInTimeZone(date, timezone, options = {}, locale) {
+    const d = typeof date === 'number' ? new Date(date) : date;
+    return new Intl.DateTimeFormat(locale ?? 'en-US', {
+        ...options,
+        timeZone: timezone,
+    }).format(d);
+}

package/dist/engine/index.d.ts

@@ -1,7 +1,7 @@
 export { createEventStore } from './event-store.svelte.js';
 export type { EventStore } from './event-store.svelte.js';
 export { createViewState } from './view-state.svelte.js';
-export type { ViewState, ViewStateOptions, CalendarViewId, ViewGranularity, DateRange as ViewDateRange, } from './view-state.svelte.js';
+export type { ViewState, ViewStateOptions, CalendarViewId, BuiltInViewId, ViewGranularity, DateRange as ViewDateRange, } from './view-state.svelte.js';
 export { createSelection } from './selection.svelte.js';
 export type { Selection } from './selection.svelte.js';
 export { createDragState } from './drag.svelte.js';

package/dist/engine/view-state.svelte.d.ts

@@ -1,9 +1,19 @@
-/** All registered view IDs. Add new ones here as variants are created. */
-export type CalendarViewId = 'day-grid' | 'day-agenda' | 'week-grid' | 'week-agenda' | 'week-heatmap';
+/**
+ * Built-in view IDs. Custom view IDs are also supported — CalendarViewId
+ * is typed as `string` so consumers can register any ID.
+ */
+export type BuiltInViewId = 'day-grid' | 'day-agenda' | 'week-grid' | 'week-agenda' | 'week-heatmap';
+/**
+ * Any view identifier. Use built-in strings like 'day-grid' or your own
+ * custom IDs like 'day-kanban', 'week-resource', etc.
+ */
+export type CalendarViewId = string;
 export type ViewGranularity = 'day' | 'week';
 export interface ViewStateOptions {
     defaultView?: CalendarViewId;
     mondayStart?: boolean;
+    /** IANA timezone string (e.g. 'America/New_York'). Defaults to local timezone. */
+    timezone?: string;
 }
 export interface DateRange {
     start: Date;
@@ -15,6 +25,8 @@ export interface ViewState {
     readonly range: DateRange;
     readonly granularity: ViewGranularity;
     readonly mondayStart: boolean;
+    /** IANA timezone, or undefined for local */
+    readonly timezone: string | undefined;
     setView(id: CalendarViewId): void;
     setFocusDate(date: Date): void;
     next(): void;

package/dist/engine/view-state.svelte.js

@@ -35,6 +35,7 @@ export function createViewState(options = {}) {
     let view = $state(options.defaultView ?? 'week-grid');
     let focusDate = $state(new Date());
     let mondayStart = $state(options.mondayStart ?? true);
+    const timezone = options.timezone;
     const granularity = $derived(granularityFor(view));
     const range = $derived(computeRange(focusDate, granularity, mondayStart));
     return {
@@ -53,6 +54,9 @@ export function createViewState(options = {}) {
         get mondayStart() {
             return mondayStart;
         },
+        get timezone() {
+            return timezone;
+        },
         setView(id) {
             view = id;
         },

package/dist/index.d.ts

@@ -4,10 +4,10 @@ export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, } from './p
 export { Calendar, Toolbar } from './calendar/index.js';
 export type { CalendarView } from './calendar/index.js';
 export { createEventStore, createViewState, createSelection, createDragState, } from './engine/index.js';
-export type { EventStore, ViewState, ViewStateOptions, CalendarViewId, ViewGranularity, ViewDateRange, Selection, DragState, DragMode, DragPayload, } from './engine/index.js';
+export type { EventStore, ViewState, ViewStateOptions, CalendarViewId, BuiltInViewId, ViewGranularity, ViewDateRange, Selection, DragState, DragMode, DragPayload, } from './engine/index.js';
 export { createMemoryAdapter, createRestAdapter } from './adapters/index.js';
 export type { CalendarAdapter, DateRange, RestAdapterOptions } from './adapters/index.js';
-export { createClock, DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, timeToX, } from './core/index.js';
+export { createClock, DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, timeToX, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './core/index.js';
 export type { Clock, TimelineEvent, WeekTimelineProps, DayTimelineProps, } from './core/index.js';
 export { midnight, parchment, indigo, presets, stageBg } from './theme/index.js';
 export type { PresetName } from './theme/index.js';

package/dist/index.js

@@ -9,6 +9,6 @@ export { createEventStore, createViewState, createSelection, createDragState, }
 // ─── Adapters ───────────────────────────────────────────
 export { createMemoryAdapter, createRestAdapter } from './adapters/index.js';
 // ─── Core: clock, time, locale, types ───────────────────
-export { createClock, DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, timeToX, } from './core/index.js';
+export { createClock, DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, timeToX, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './core/index.js';
 // ─── Themes ─────────────────────────────────────────────
 export { midnight, parchment, indigo, presets, stageBg } from './theme/index.js';

package/dist/primitives/EmptySlot.svelte

@@ -39,17 +39,26 @@
 		const m = mins % 60;
 		return m > 0 ? `${h}h ${m}m free` : `${h}h free`;
 	});
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			onclick?.({ start, end });
+		}
+	}
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="es"
 	class:es-v={orientation === 'vertical'}
 	class:es-h={orientation === 'horizontal'}
+	role="button"
+	tabindex="0"
+	aria-label="Create event, {fmtTime(start)} to {fmtTime(end)}, {dur()}"
 	onclick={() => onclick?.({ start, end })}
+	onkeydown={handleKeydown}
 >
-	<div class="es-hint">
+	<div class="es-hint" aria-hidden="true">
 		<span class="es-plus">+</span>
 		<span class="es-range">{fmtTime(start)} – {fmtTime(end)}</span>
 	</div>
@@ -68,6 +77,11 @@
 		border-color: var(--dt-accent-dim, rgba(239, 68, 68, 0.18));
 		background: var(--dt-accent-dim, rgba(239, 68, 68, 0.05));
 	}
+	.es:focus-visible {
+		outline: 2px solid var(--dt-accent, #ef4444);
+		outline-offset: 2px;
+		border-color: var(--dt-accent-dim, rgba(239, 68, 68, 0.18));
+	}
 
 	.es-hint {
 		position: absolute;

package/dist/primitives/EventBlock.svelte

@@ -61,17 +61,35 @@
 	}
 
 	const accentColor = $derived(event.color || 'var(--dt-accent, #ef4444)');
+
+	const ariaLabel = $derived(() => {
+		const t = event.title;
+		const time = `${fmtTime(event.start)} to ${fmtTime(event.end)}`;
+		const dur = fmtDuration(event.start, event.end);
+		const status = active ? ', happening now' : past ? ', past' : '';
+		return `${t}, ${time}, ${dur}${status}`;
+	});
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			onclick?.(event);
+		}
+	}
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="eb eb-{variant}"
 	class:eb-active={active}
 	class:eb-past={past}
 	class:eb-editable={editable}
 	style="--eb-color: {accentColor}"
+	role={onclick ? 'button' : 'article'}
+	tabindex={onclick ? 0 : -1}
+	aria-label={ariaLabel()}
+	aria-current={active ? 'true' : undefined}
 	onclick={() => onclick?.(event)}
+	onkeydown={handleKeydown}
 >
 	{#if children}
 		{@render children(event)}
@@ -115,6 +133,11 @@
 	.eb-editable:hover {
 		transform: translateY(-1px);
 	}
+	.eb:focus-visible {
+		outline: 2px solid var(--dt-accent, #ef4444);
+		outline-offset: 2px;
+		border-radius: 4px;
+	}
 	.eb-past {
 		opacity: 0.5;
 	}

package/dist/primitives/NowIndicator.svelte

@@ -53,7 +53,7 @@
 </script>
 
 {#if mode === 'badge'}
-	<span class="ni-badge" style={colorVar}>
+	<span class="ni-badge" style={colorVar} role="status" aria-live="polite" aria-label="Current time: {time}">
 		{#if children}
 			{@render children()}
 		{:else}
@@ -61,7 +61,7 @@
 		{/if}
 	</span>
 {:else if mode === 'dot'}
-	<div class="ni ni-dot {orientation}" style="{posStyle}; {colorVar}">
+	<div class="ni ni-dot {orientation}" style="{posStyle}; {colorVar}" role="status" aria-label="Current time: {time}">
 		<div class="ni-dot-circle"></div>
 		{#if showLabel && time}
 			<div class="ni-label">
@@ -71,7 +71,7 @@
 		{/if}
 	</div>
 {:else}
-	<div class="ni ni-line {orientation}" style="{posStyle}; {colorVar}">
+	<div class="ni ni-line {orientation}" style="{posStyle}; {colorVar}" role="status" aria-label="Current time: {time}">
 		<div class="ni-line-bar"></div>
 		{#if showLabel && time}
 			<div class="ni-label">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nomideusz/svelte-calendar",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A themeable, pluggable Svelte 5 calendar with Day and Week views — Grid, Timeline, Agenda, Heatmap.",
   "type": "module",
   "license": "MIT",
@@ -33,7 +33,8 @@
     "vitest": "^4.0.18"
   },
   "dependencies": {
-    "date-fns": "^4.1.0"
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0"
   },
   "keywords": [
     "svelte",