@nomideusz/svelte-calendar 0.2.1 → 0.2.3

package/README.md

@@ -175,6 +175,79 @@ const custom = `
 
 </details>
 
+## Accessibility
+
+All interactive elements include proper ARIA attributes and keyboard support:
+
+- **EventBlock** — `role="button"`, `aria-label` (title + time + duration + status), `tabindex="0"`, Enter/Space activates
+- **EmptySlot** — `role="button"`, `aria-label` (time range + duration), keyboard-accessible for event creation
+- **NowIndicator** — `role="status"`, `aria-live="polite"` announces the current time
+- **Calendar** — `role="region"`, `aria-label="Calendar"`
+- **Toolbar** — `aria-label="Calendar navigation"`
+- Focus-visible outlines on all interactive primitives
+
+## Locale & i18n
+
+The calendar uses `Intl.DateTimeFormat` for all date/time formatting. Pass a BCP 47 locale tag to the `Calendar` shell:
+
+```svelte
+<Calendar {views} {adapter} locale="pl-PL" dir="rtl" />
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `locale` | `string` | `'en-US'` | BCP 47 tag — controls weekday names, month names, date formats |
+| `dir` | `'ltr' \| 'rtl' \| 'auto'` | — | Text direction (for Arabic, Hebrew, etc.) |
+
+The `locale` prop automatically switches between 12-hour and 24-hour time display based on the locale's hour cycle.
+
+### Programmatic locale control
+
+```ts
+import { setDefaultLocale, getDefaultLocale, is24HourLocale } from '@nomideusz/svelte-calendar';
+
+setDefaultLocale('de-DE');       // All formatting functions now use German
+is24HourLocale('en-US');         // false (12h)
+is24HourLocale('de-DE');         // true  (24h)
+```
+
+All formatting functions (`weekdayShort`, `monthLong`, `fmtDay`, `fmtWeekRange`, etc.) accept an optional `locale` parameter to override per-call.
+
+## Timezones
+
+Timezone utilities are included via `date-fns-tz`:
+
+```ts
+import {
+  toZonedTime,
+  fromZonedTime,
+  nowInZone,
+  formatInTimeZone,
+} from '@nomideusz/svelte-calendar';
+
+// Display a UTC date in a specific timezone
+const nyTime = toZonedTime(utcDate, 'America/New_York');
+
+// Convert back to UTC for storage
+const utc = fromZonedTime(displayDate, 'America/New_York');
+
+// Current time in Tokyo
+const tokyoNow = nowInZone('Asia/Tokyo');
+
+// Locale-aware formatting in a timezone
+formatInTimeZone(date, 'Europe/Warsaw', { hour: 'numeric', minute: '2-digit' }, 'pl-PL');
+// → "14:30"
+```
+
+The engine's `createViewState` also accepts a `timezone` option:
+
+```ts
+const viewState = createViewState({
+  defaultView: 'week-grid',
+  timezone: 'America/New_York',  // stored on viewState.timezone
+});
+```
+
 ## Architecture
 
 ```

package/dist/primitives/EmptySlot.svelte

@@ -32,7 +32,7 @@
 		return m === 0 ? `${h12}${suffix}` : `${h12}:${String(m).padStart(2, '0')}${suffix}`;
 	}
 
-	const dur = $derived(() => {
+	const dur = $derived.by(() => {
 		const mins = Math.round((end.getTime() - start.getTime()) / 60_000);
 		if (mins < 60) return `${mins}m free`;
 		const h = Math.floor(mins / 60);
@@ -54,7 +54,7 @@
 	class:es-h={orientation === 'horizontal'}
 	role="button"
 	tabindex="0"
-	aria-label="Create event, {fmtTime(start)} to {fmtTime(end)}, {dur()}"
+	aria-label="Create event, {fmtTime(start)} to {fmtTime(end)}, {dur}"
 	onclick={() => onclick?.({ start, end })}
 	onkeydown={handleKeydown}
 >

package/dist/primitives/EventBlock.svelte

@@ -62,7 +62,7 @@
 
 	const accentColor = $derived(event.color || 'var(--dt-accent, #ef4444)');
 
-	const ariaLabel = $derived(() => {
+	const ariaLabel = $derived.by(() => {
 		const t = event.title;
 		const time = `${fmtTime(event.start)} to ${fmtTime(event.end)}`;
 		const dur = fmtDuration(event.start, event.end);
@@ -78,19 +78,7 @@
 	}
 </script>
 
-<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}
->
+{#snippet content()}
 	{#if children}
 		{@render children(event)}
 	{:else if variant === 'chip'}
@@ -119,7 +107,38 @@
 		{/if}
 		{#if active}<span class="eb-live-badge">now</span>{/if}
 	{/if}
+{/snippet}
+
+{#if onclick}
+<div
+	class="eb eb-{variant}"
+	class:eb-active={active}
+	class:eb-past={past}
+	class:eb-editable={editable}
+	style="--eb-color: {accentColor}"
+	role="button"
+	tabindex="0"
+	aria-label={ariaLabel}
+	aria-current={active ? 'true' : undefined}
+	onclick={() => onclick?.(event)}
+	onkeydown={handleKeydown}
+>
+	{@render content()}
+</div>
+{:else}
+<div
+	class="eb eb-{variant}"
+	class:eb-active={active}
+	class:eb-past={past}
+	class:eb-editable={editable}
+	style="--eb-color: {accentColor}"
+	role="article"
+	aria-label={ariaLabel}
+	aria-current={active ? 'true' : undefined}
+>
+	{@render content()}
 </div>
+{/if}
 
 <style>
 	.eb {

package/dist/views/agenda/Agenda.svelte

@@ -754,7 +754,7 @@
 		transition: width 1s linear;
 	}
 
-	.ag-empty {
+	:global(.ag-empty) {
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -880,7 +880,7 @@
 		color: var(--dt-text-3, rgba(255, 255, 255, 0.25));
 		margin-bottom: 2px;
 	}
-	.ag-q-free-next {
+	:global(.ag-q-free-next) {
 		font-size: 10px;
 		font-weight: 500;
 		line-height: 1.2;
@@ -890,7 +890,7 @@
 		text-overflow: ellipsis;
 		margin-bottom: 2px;
 	}
-	.ag-q-free-until {
+	:global(.ag-q-free-until) {
 		font-size: 9px;
 		font-family: var(--dt-mono, monospace);
 		color: var(--dt-accent, #ff6b4a);

package/dist/views/settings/Settings.svelte

@@ -30,16 +30,20 @@
 
 	let { fields, values = $bindable(), theme = $bindable() }: Props = $props();
 
-	const themeKeys: PresetName[] = ['midnight', 'parchment', 'indigo'];
+	const themeKeys: PresetName[] = ['midnight', 'parchment', 'indigo', 'neutral', 'bare'];
 	const themeLabels: Record<PresetName, string> = {
 		midnight: 'Midnight',
 		parchment: 'Parchment',
 		indigo: 'Indigo',
+		neutral: 'Neutral',
+		bare: 'Bare',
 	};
 	const themeAccents: Record<PresetName, string> = {
 		midnight: '#ef4444',
 		parchment: '#b85c2f',
 		indigo: '#6366f1',
+		neutral: '#94a0b4',
+		bare: '#94a0b4',
 	};
 
 	let open = $state(true);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nomideusz/svelte-calendar",
-	"version": "0.2.1",
+	"version": "0.2.3",
 	"description": "A themeable, pluggable Svelte 5 calendar with Day and Week views — Grid, Timeline, Agenda, Heatmap.",
 	"type": "module",
 	"license": "MIT",