@nomideusz/svelte-calendar 0.5.2 → 0.6.3

package/dist/primitives/NowIndicator.svelte

@@ -1,178 +1,178 @@
-<!--
-  NowIndicator — shared "now" marker component.
-
-  Three visual modes:
-    "line"  — vertical/horizontal line with time label (default)
-    "dot"   — circular dot with time label
-    "badge" — inline text badge ("now")
-
-  Usage:
-    <NowIndicator position={nowPx} time={clock.hm} seconds={clock.s} />
-    <NowIndicator mode="dot" position={nowPx} time={clock.hm} />
-    <NowIndicator mode="badge" />
--->
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { getLabels } from '../core/locale.js';
-
-	const L = $derived(getLabels());
-
-	interface Props {
-		/** Visual mode */
-		mode?: 'line' | 'dot' | 'badge';
-		/** Pixel offset for positioning (line/dot modes) */
-		position?: number;
-		/** Orientation of the line/dot */
-		orientation?: 'vertical' | 'horizontal';
-		/** Formatted time string (e.g. "14:30") */
-		time?: string;
-		/** Formatted seconds string (e.g. ":05") */
-		seconds?: string;
-		/** Show the time label */
-		showLabel?: boolean;
-		/** Accent color override */
-		color?: string;
-		/** Custom content slot */
-		children?: Snippet;
-	}
-
-	let {
-		mode = 'line',
-		position = 0,
-		orientation = 'vertical',
-		time = '',
-		seconds = '',
-		showLabel = true,
-		color,
-		children,
-	}: Props = $props();
-
-	const posStyle = $derived(
-		orientation === 'vertical'
-			? `left: ${position}px`
-			: `top: ${position}px`,
-	);
-	const colorVar = $derived(color ? `--ni-color: ${color}` : '');
-</script>
-
-{#if mode === 'badge'}
-	<span class="ni-badge" style={colorVar} role="status" aria-live="polite" aria-label="{L.currentTime}: {time}">
-		{#if children}
-			{@render children()}
-		{:else}
-			{L.now}
-		{/if}
-	</span>
-{:else if mode === 'dot'}
-	<div class="ni ni-dot {orientation}" style="{posStyle}; {colorVar}" role="status" aria-label="{L.currentTime}: {time}">
-		<div class="ni-dot-circle"></div>
-		{#if showLabel && time}
-			<div class="ni-label">
-				<span class="ni-time">{time}</span>
-				{#if seconds}<span class="ni-sec">{seconds}</span>{/if}
-			</div>
-		{/if}
-	</div>
-{:else}
-	<div class="ni ni-line {orientation}" style="{posStyle}; {colorVar}" role="status" aria-label="{L.currentTime}: {time}">
-		<div class="ni-line-bar"></div>
-		{#if showLabel && time}
-			<div class="ni-label">
-				<span class="ni-time">{time}</span>
-				{#if seconds}<span class="ni-sec">{seconds}</span>{/if}
-			</div>
-		{/if}
-	</div>
-{/if}
-
-<style>
-	.ni {
-		position: absolute;
-		z-index: 10;
-		pointer-events: none;
-	}
-
-	/* ── Line mode ── */
-	.ni-line.vertical {
-		top: 0;
-		bottom: 0;
-		width: 0;
-	}
-	.ni-line.horizontal {
-		left: 0;
-		right: 0;
-		height: 0;
-	}
-	.ni-line-bar {
-		background: var(--ni-color, var(--dt-accent, #ef4444));
-	}
-	.ni-line.vertical .ni-line-bar {
-		width: 2px;
-		height: 100%;
-		margin-left: -1px;
-	}
-	.ni-line.horizontal .ni-line-bar {
-		height: 2px;
-		width: 100%;
-		margin-top: -1px;
-	}
-
-	/* ── Dot mode ── */
-	.ni-dot-circle {
-		width: 10px;
-		height: 10px;
-		border-radius: 50%;
-		background: var(--ni-color, var(--dt-accent, #ef4444));
-		box-shadow: 0 0 6px var(--ni-color, var(--dt-glow, rgba(239, 68, 68, 0.35)));
-	}
-	.ni-dot.vertical .ni-dot-circle {
-		margin-left: -5px;
-	}
-	.ni-dot.horizontal .ni-dot-circle {
-		margin-top: -5px;
-	}
-
-	/* ── Label ── */
-	.ni-label {
-		position: absolute;
-		white-space: nowrap;
-		font: 600 10px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
-		color: var(--dt-btn-text, #fff);
-		background: var(--ni-color, var(--dt-accent, #ef4444));
-		padding: 3px 6px;
-		border-radius: 4px;
-	}
-	.ni-line.vertical .ni-label,
-	.ni-dot.vertical .ni-label {
-		top: 0;
-		transform: translateX(-50%);
-	}
-	.ni-line.horizontal .ni-label,
-	.ni-dot.horizontal .ni-label {
-		left: 0;
-		transform: translateY(-100%) translateY(-4px);
-	}
-	.ni-sec {
-		opacity: 0.6;
-		font-weight: 400;
-	}
-
-	/* ── Badge mode ── */
-	.ni-badge {
-		display: inline-flex;
-		align-items: center;
-		font: 700 9px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
-		letter-spacing: 0.08em;
-		text-transform: uppercase;
-		color: var(--dt-btn-text, #fff);
-		background: var(--ni-color, var(--dt-accent, #ef4444));
-		padding: 2px 7px;
-		border-radius: 3px;
-		animation: ni-pulse 2s ease-in-out infinite;
-	}
-
-	@keyframes ni-pulse {
-		0%, 100% { opacity: 1; }
-		50% { opacity: 0.7; }
-	}
-</style>
+<!--
+  NowIndicator — shared "now" marker component.
+
+  Three visual modes:
+    "line"  — vertical/horizontal line with time label (default)
+    "dot"   — circular dot with time label
+    "badge" — inline text badge ("now")
+
+  Usage:
+    <NowIndicator position={nowPx} time={clock.hm} seconds={clock.s} />
+    <NowIndicator mode="dot" position={nowPx} time={clock.hm} />
+    <NowIndicator mode="badge" />
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getLabels } from '../core/locale.js';
+
+	const L = $derived(getLabels());
+
+	interface Props {
+		/** Visual mode */
+		mode?: 'line' | 'dot' | 'badge';
+		/** Pixel offset for positioning (line/dot modes) */
+		position?: number;
+		/** Orientation of the line/dot */
+		orientation?: 'vertical' | 'horizontal';
+		/** Formatted time string (e.g. "14:30") */
+		time?: string;
+		/** Formatted seconds string (e.g. ":05") */
+		seconds?: string;
+		/** Show the time label */
+		showLabel?: boolean;
+		/** Accent color override */
+		color?: string;
+		/** Custom content slot */
+		children?: Snippet;
+	}
+
+	let {
+		mode = 'line',
+		position = 0,
+		orientation = 'vertical',
+		time = '',
+		seconds = '',
+		showLabel = true,
+		color,
+		children,
+	}: Props = $props();
+
+	const posStyle = $derived(
+		orientation === 'vertical'
+			? `left: ${position}px`
+			: `top: ${position}px`,
+	);
+	const colorVar = $derived(color ? `--ni-color: ${color}` : '');
+</script>
+
+{#if mode === 'badge'}
+	<span class="ni-badge" style={colorVar} role="status" aria-live="polite" aria-label="{L.currentTime}: {time}">
+		{#if children}
+			{@render children()}
+		{:else}
+			{L.now}
+		{/if}
+	</span>
+{:else if mode === 'dot'}
+	<div class="ni ni-dot {orientation}" style="{posStyle}; {colorVar}" role="status" aria-label="{L.currentTime}: {time}">
+		<div class="ni-dot-circle"></div>
+		{#if showLabel && time}
+			<div class="ni-label">
+				<span class="ni-time">{time}</span>
+				{#if seconds}<span class="ni-sec">{seconds}</span>{/if}
+			</div>
+		{/if}
+	</div>
+{:else}
+	<div class="ni ni-line {orientation}" style="{posStyle}; {colorVar}" role="status" aria-label="{L.currentTime}: {time}">
+		<div class="ni-line-bar"></div>
+		{#if showLabel && time}
+			<div class="ni-label">
+				<span class="ni-time">{time}</span>
+				{#if seconds}<span class="ni-sec">{seconds}</span>{/if}
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.ni {
+		position: absolute;
+		z-index: 10;
+		pointer-events: none;
+	}
+
+	/* ── Line mode ── */
+	.ni-line.vertical {
+		top: 0;
+		bottom: 0;
+		width: 0;
+	}
+	.ni-line.horizontal {
+		left: 0;
+		right: 0;
+		height: 0;
+	}
+	.ni-line-bar {
+		background: var(--ni-color, var(--dt-accent, #ef4444));
+	}
+	.ni-line.vertical .ni-line-bar {
+		width: 2px;
+		height: 100%;
+		margin-left: -1px;
+	}
+	.ni-line.horizontal .ni-line-bar {
+		height: 2px;
+		width: 100%;
+		margin-top: -1px;
+	}
+
+	/* ── Dot mode ── */
+	.ni-dot-circle {
+		width: 10px;
+		height: 10px;
+		border-radius: 50%;
+		background: var(--ni-color, var(--dt-accent, #ef4444));
+		box-shadow: 0 0 6px var(--ni-color, var(--dt-glow, rgba(239, 68, 68, 0.35)));
+	}
+	.ni-dot.vertical .ni-dot-circle {
+		margin-left: -5px;
+	}
+	.ni-dot.horizontal .ni-dot-circle {
+		margin-top: -5px;
+	}
+
+	/* ── Label ── */
+	.ni-label {
+		position: absolute;
+		white-space: nowrap;
+		font: 600 10px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
+		color: var(--dt-btn-text, #fff);
+		background: var(--ni-color, var(--dt-accent, #ef4444));
+		padding: 3px 6px;
+		border-radius: 4px;
+	}
+	.ni-line.vertical .ni-label,
+	.ni-dot.vertical .ni-label {
+		top: 0;
+		transform: translateX(-50%);
+	}
+	.ni-line.horizontal .ni-label,
+	.ni-dot.horizontal .ni-label {
+		left: 0;
+		transform: translateY(-100%) translateY(-4px);
+	}
+	.ni-sec {
+		opacity: 0.6;
+		font-weight: 400;
+	}
+
+	/* ── Badge mode ── */
+	.ni-badge {
+		display: inline-flex;
+		align-items: center;
+		font: 700 9px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		color: var(--dt-btn-text, #fff);
+		background: var(--ni-color, var(--dt-accent, #ef4444));
+		padding: 2px 7px;
+		border-radius: 3px;
+		animation: ni-pulse 2s ease-in-out infinite;
+	}
+
+	@keyframes ni-pulse {
+		0%, 100% { opacity: 1; }
+		50% { opacity: 0.7; }
+	}
+</style>

package/dist/primitives/TimeGutter.svelte

@@ -1,105 +1,105 @@
-<!--
-  TimeGutter — shared hour labels / tick marks.
-
-  Two orientations:
+<!--
+  TimeGutter — shared hour labels / tick marks.
+
+  Two orientations:
     "horizontal" — ticks along a horizontal track (for day timeline-style layouts)
-    "vertical"   — label column along a vertical grid (for WeekTimeline style)
--->
-<script lang="ts">
-	import { HOURS } from '../core/time.js';
-	import { fmtH } from '../core/locale.js';
-
-	interface Props {
-		orientation?: 'horizontal' | 'vertical';
-		/** Pixel size per hour (width for horizontal, height for vertical) */
-		hourSize?: number;
-		/** Show half-hour ticks (horizontal only) */
-		halfHour?: boolean;
-		/** Hours to display (default 0-23) */
-		hours?: readonly number[];
-		/** Custom hour formatter */
-		formatHour?: (h: number) => string;
-	}
-
-	let {
-		orientation = 'horizontal',
-		hourSize = 120,
-		halfHour = true,
-		hours = HOURS,
-		formatHour = fmtH,
-	}: Props = $props();
-</script>
-
-{#if orientation === 'horizontal'}
-	<div class="tg tg-h" style="--tg-hour: {hourSize}px">
-		{#each hours as h}
-			<div class="tg-tick" style="left: {h * hourSize}px">
-				<span class="tg-label">{formatHour(h)}</span>
-			</div>
-			{#if halfHour}
-				<div class="tg-tick tg-tick-half" style="left: {(h + 0.5) * hourSize}px"></div>
-			{/if}
-		{/each}
-	</div>
-{:else}
-	<div class="tg tg-v" style="--tg-hour: {hourSize}px">
-		{#each hours as h}
-			<div class="tg-row" style="top: {h * hourSize}px; height: {hourSize}px">
-				<span class="tg-label">{formatHour(h)}</span>
-			</div>
-		{/each}
-	</div>
-{/if}
-
-<style>
-	.tg {
-		position: relative;
-		pointer-events: none;
-		user-select: none;
-	}
-
-	/* ── Horizontal ── */
-	.tg-h {
-		height: 100%;
-		width: calc(24 * var(--tg-hour));
-	}
-	.tg-tick {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		width: 0;
-		border-left: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
-	}
-	.tg-tick-half {
-		border-left-style: dashed;
-		opacity: 0.4;
-	}
-	.tg-h .tg-label {
-		position: absolute;
-		top: 4px;
-		left: 6px;
-		font: 400 9px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
-		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
-		white-space: nowrap;
-	}
-
-	/* ── Vertical ── */
-	.tg-v {
-		width: 48px;
-		flex-shrink: 0;
-	}
-	.tg-row {
-		position: absolute;
-		left: 0;
-		right: 0;
-		display: flex;
-		align-items: flex-start;
-		justify-content: flex-end;
-		padding: 2px 8px 0 0;
-		border-top: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
-	}
-	.tg-v .tg-label {
-		font: 400 9px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
-		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
-	}
-</style>
+    "vertical"   — label column along a vertical grid (for WeekTimeline style)
+-->
+<script lang="ts">
+	import { HOURS } from '../core/time.js';
+	import { fmtH } from '../core/locale.js';
+
+	interface Props {
+		orientation?: 'horizontal' | 'vertical';
+		/** Pixel size per hour (width for horizontal, height for vertical) */
+		hourSize?: number;
+		/** Show half-hour ticks (horizontal only) */
+		halfHour?: boolean;
+		/** Hours to display (default 0-23) */
+		hours?: readonly number[];
+		/** Custom hour formatter */
+		formatHour?: (h: number) => string;
+	}
+
+	let {
+		orientation = 'horizontal',
+		hourSize = 120,
+		halfHour = true,
+		hours = HOURS,
+		formatHour = fmtH,
+	}: Props = $props();
+</script>
+
+{#if orientation === 'horizontal'}
+	<div class="tg tg-h" style="--tg-hour: {hourSize}px">
+		{#each hours as h}
+			<div class="tg-tick" style="left: {h * hourSize}px">
+				<span class="tg-label">{formatHour(h)}</span>
+			</div>
+			{#if halfHour}
+				<div class="tg-tick tg-tick-half" style="left: {(h + 0.5) * hourSize}px"></div>
+			{/if}
+		{/each}
+	</div>
+{:else}
+	<div class="tg tg-v" style="--tg-hour: {hourSize}px">
+		{#each hours as h}
+			<div class="tg-row" style="top: {h * hourSize}px; height: {hourSize}px">
+				<span class="tg-label">{formatHour(h)}</span>
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.tg {
+		position: relative;
+		pointer-events: none;
+		user-select: none;
+	}
+
+	/* ── Horizontal ── */
+	.tg-h {
+		height: 100%;
+		width: calc(24 * var(--tg-hour));
+	}
+	.tg-tick {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 0;
+		border-left: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
+	}
+	.tg-tick-half {
+		border-left-style: dashed;
+		opacity: 0.4;
+	}
+	.tg-h .tg-label {
+		position: absolute;
+		top: 4px;
+		left: 6px;
+		font: 400 9px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
+		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
+		white-space: nowrap;
+	}
+
+	/* ── Vertical ── */
+	.tg-v {
+		width: 48px;
+		flex-shrink: 0;
+	}
+	.tg-row {
+		position: absolute;
+		left: 0;
+		right: 0;
+		display: flex;
+		align-items: flex-start;
+		justify-content: flex-end;
+		padding: 2px 8px 0 0;
+		border-top: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
+	}
+	.tg-v .tg-label {
+		font: 400 9px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
+		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
+	}
+</style>

package/dist/theme/auto.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Smart Auto Theme — probes the host page and generates --dt-* CSS tokens
+ * that blend the calendar into any design system.
+ *
+ * How it works:
+ *   1. Reads computed styles from the element's ancestors (body, parent)
+ *   2. Detects light/dark mode from background luminance
+ *   3. Extracts fonts, text colors, accent/brand colors
+ *   4. Generates a full --dt-* CSS variable string
+ *
+ * Usage:
+ *   const vars = probeHostTheme(calendarElement);
+ *   // → "--dt-bg: #fff; --dt-text: rgba(0,0,0,0.87); ..."
+ *
+ * The Calendar component calls this automatically when theme is `auto` (empty string).
+ */
+/** Options for fine-tuning auto-detection behavior. */
+export interface AutoThemeOptions {
+    /**
+     * Force light or dark mode instead of auto-detecting.
+     * Useful when the host page has a known color scheme.
+     */
+    mode?: 'light' | 'dark' | 'auto';
+    /**
+     * Override the accent color (hex). Skips accent probing.
+     * Example: '#2563eb'
+     */
+    accent?: string;
+    /**
+     * Override the font stack. Skips font probing.
+     * Example: '"Inter", system-ui, sans-serif'
+     */
+    font?: string;
+}
+/**
+ * Probe the host page surrounding `el` and generate a complete --dt-* CSS string.
+ *
+ * @param el       The calendar's root element (or any element in the host page).
+ * @param options  Optional overrides for mode, accent, font.
+ * @returns        A CSS inline-style string of --dt-* custom properties.
+ */
+export declare function probeHostTheme(el: HTMLElement, options?: AutoThemeOptions): string;
+/**
+ * Observe changes to the host page that might affect theming
+ * (color-scheme toggle, class changes on <html>/<body>, style attribute changes).
+ *
+ * Returns a cleanup function to stop observing.
+ *
+ * @param el        The calendar's root element.
+ * @param callback  Called with the new CSS string whenever the host theme changes.
+ * @param options   Passthrough to probeHostTheme.
+ */
+export declare function observeHostTheme(el: HTMLElement, callback: (vars: string) => void, options?: AutoThemeOptions): () => void;