@nomideusz/svelte-calendar 0.6.0 → 0.6.3

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

@@ -34,8 +34,8 @@ interface Props {
     autoTheme?: AutoThemeOptions | false;
     /** Start week on Monday */
     mondayStart?: boolean;
-    /** Total height */
-    height?: number;
+    /** 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. */
     borderRadius?: number;
     /** Text direction: 'ltr' (default), 'rtl', or 'auto' */

package/dist/primitives/DayHeader.svelte

@@ -1,103 +1,103 @@
-<!--
-  DayHeader — shared day label primitive.
-
-  Handles both:
-    - 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';
-
-	interface Props {
-		/** Timestamp (ms) of the day to label */
-		dayMs: number;
-		/** Timestamp (ms) of today (for relative labels) */
-		todayMs?: number;
-		/** Display format */
-		format?: 'relative' | 'short' | 'long';
-		/** Whether this day is "today" */
-		isToday?: boolean;
-		/** Whether this day is in the past */
-		isPast?: boolean;
-	}
-
-	let {
-		dayMs,
-		todayMs = Date.now(),
-		format = 'short',
-		isToday = false,
-		isPast = false,
-	}: Props = $props();
-
-	const dayNum = $derived(new Date(dayMs).getDate());
-</script>
-
-<div
-	class="dh"
-	class:dh-today={isToday}
-	class:dh-past={isPast}
->
-	{#if format === 'relative'}
-		<span class="dh-rel">{fmtDay(dayMs, todayMs)}</span>
-	{:else if format === 'long'}
-		<span class="dh-name dh-name-long">{weekdayLong(dayMs)}</span>
-		<span class="dh-date">{monthShort(dayMs)} {dayNum}</span>
-	{:else}
-		<span class="dh-name">{weekdayShort(dayMs)}</span>
-		<span class="dh-num" class:dh-num-today={isToday}>{dayNum}</span>
-	{/if}
-</div>
-
-<style>
-	.dh {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 2px;
-		user-select: none;
-	}
-	.dh-past {
-		opacity: 0.45;
-	}
-
-	.dh-name {
-		font: 500 10px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
-		letter-spacing: 0.04em;
-		text-transform: uppercase;
-		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
-	}
-	.dh-name-long {
-		font-size: 12px;
-		text-transform: none;
-		letter-spacing: 0.01em;
-		color: var(--dt-text, rgba(226, 232, 240, 0.85));
-	}
-
-	.dh-num {
-		font: 600 14px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
-		color: var(--dt-text, rgba(226, 232, 240, 0.85));
-		width: 28px;
-		height: 28px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 50%;
-	}
-	.dh-num-today {
-		background: var(--dt-accent, #ef4444);
-		color: var(--dt-btn-text, #fff);
-	}
-
-	.dh-date {
-		font: 400 10px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
-	}
-
-	.dh-rel {
-		font: 500 12px / 1.3 var(--dt-sans, 'Outfit', system-ui, sans-serif);
-		color: var(--dt-text, rgba(226, 232, 240, 0.85));
-	}
-	.dh-today .dh-rel {
-		color: var(--dt-accent, #ef4444);
-	}
-</style>
+<!--
+  DayHeader — shared day label primitive.
+
+  Handles both:
+    - 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';
+
+	interface Props {
+		/** Timestamp (ms) of the day to label */
+		dayMs: number;
+		/** Timestamp (ms) of today (for relative labels) */
+		todayMs?: number;
+		/** Display format */
+		format?: 'relative' | 'short' | 'long';
+		/** Whether this day is "today" */
+		isToday?: boolean;
+		/** Whether this day is in the past */
+		isPast?: boolean;
+	}
+
+	let {
+		dayMs,
+		todayMs = Date.now(),
+		format = 'short',
+		isToday = false,
+		isPast = false,
+	}: Props = $props();
+
+	const dayNum = $derived(new Date(dayMs).getDate());
+</script>
+
+<div
+	class="dh"
+	class:dh-today={isToday}
+	class:dh-past={isPast}
+>
+	{#if format === 'relative'}
+		<span class="dh-rel">{fmtDay(dayMs, todayMs)}</span>
+	{:else if format === 'long'}
+		<span class="dh-name dh-name-long">{weekdayLong(dayMs)}</span>
+		<span class="dh-date">{monthShort(dayMs)} {dayNum}</span>
+	{:else}
+		<span class="dh-name">{weekdayShort(dayMs)}</span>
+		<span class="dh-num" class:dh-num-today={isToday}>{dayNum}</span>
+	{/if}
+</div>
+
+<style>
+	.dh {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 2px;
+		user-select: none;
+	}
+	.dh-past {
+		opacity: 0.45;
+	}
+
+	.dh-name {
+		font: 500 10px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+	}
+	.dh-name-long {
+		font-size: 12px;
+		text-transform: none;
+		letter-spacing: 0.01em;
+		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+	}
+
+	.dh-num {
+		font: 600 14px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+		width: 28px;
+		height: 28px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+	}
+	.dh-num-today {
+		background: var(--dt-accent, #ef4444);
+		color: var(--dt-btn-text, #fff);
+	}
+
+	.dh-date {
+		font: 400 10px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+	}
+
+	.dh-rel {
+		font: 500 12px / 1.3 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+	}
+	.dh-today .dh-rel {
+		color: var(--dt-accent, #ef4444);
+	}
+</style>

package/dist/primitives/EmptySlot.svelte

@@ -1,105 +1,105 @@
-<!--
-  EmptySlot — clickable empty time slot for "click to create" interactions.
-
-  Renders a transparent hit-target that highlights on hover and emits
-  the time range when clicked. View components place these in gaps
-  between events.
--->
-<script lang="ts">
-	import { fmtTime, fmtDuration, getLabels } from '../core/locale.js';
-
-	const L = $derived(getLabels());
-
-	interface Props {
-		/** Start time of the empty slot */
-		start: Date;
-		/** End time of the empty slot */
-		end: Date;
-		/** Click handler — create event in this range */
-		onclick?: (range: { start: Date; end: Date }) => void;
-		/** Orientation for cursor hint */
-		orientation?: 'horizontal' | 'vertical';
-	}
-
-	let {
-		start,
-		end,
-		onclick,
-		orientation = 'vertical',
-	}: Props = $props();
-
-	const dur = $derived(`${fmtDuration(start, end)} ${L.free}`);
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Enter' || e.key === ' ') {
-			e.preventDefault();
-			onclick?.({ start, end });
-		}
-	}
-</script>
-
-<div
-	class="es"
-	class:es-v={orientation === 'vertical'}
-	class:es-h={orientation === 'horizontal'}
-	role="button"
-	tabindex="0"
-	aria-label="{L.createEvent}, {fmtTime(start)} to {fmtTime(end)}, {dur}"
-	onclick={() => onclick?.({ start, end })}
-	onkeydown={handleKeydown}
->
-	<div class="es-hint" aria-hidden="true">
-		<span class="es-plus">+</span>
-		<span class="es-range">{fmtTime(start)} – {fmtTime(end)}</span>
-	</div>
-</div>
-
-<style>
-	.es {
-		position: relative;
-		cursor: pointer;
-		border: 1px dashed transparent;
-		border-radius: 6px;
-		transition: border-color 150ms, background 150ms;
-		min-height: 24px;
-	}
-	.es:hover {
-		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;
-		inset: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 6px;
-		opacity: 0;
-		transition: opacity 150ms;
-	}
-	.es:hover .es-hint {
-		opacity: 1;
-	}
-
-	.es-plus {
-		font: 500 14px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
-		color: var(--dt-accent, #ef4444);
-	}
-	.es-range {
-		font: 400 10px / 1 var(--dt-mono, 'SF Mono', monospace);
-		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
-	}
-
-	.es-v {
-		width: 100%;
-	}
-	.es-h {
-		height: 100%;
-	}
-</style>
+<!--
+  EmptySlot — clickable empty time slot for "click to create" interactions.
+
+  Renders a transparent hit-target that highlights on hover and emits
+  the time range when clicked. View components place these in gaps
+  between events.
+-->
+<script lang="ts">
+	import { fmtTime, fmtDuration, getLabels } from '../core/locale.js';
+
+	const L = $derived(getLabels());
+
+	interface Props {
+		/** Start time of the empty slot */
+		start: Date;
+		/** End time of the empty slot */
+		end: Date;
+		/** Click handler — create event in this range */
+		onclick?: (range: { start: Date; end: Date }) => void;
+		/** Orientation for cursor hint */
+		orientation?: 'horizontal' | 'vertical';
+	}
+
+	let {
+		start,
+		end,
+		onclick,
+		orientation = 'vertical',
+	}: Props = $props();
+
+	const dur = $derived(`${fmtDuration(start, end)} ${L.free}`);
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			onclick?.({ start, end });
+		}
+	}
+</script>
+
+<div
+	class="es"
+	class:es-v={orientation === 'vertical'}
+	class:es-h={orientation === 'horizontal'}
+	role="button"
+	tabindex="0"
+	aria-label="{L.createEvent}, {fmtTime(start)} to {fmtTime(end)}, {dur}"
+	onclick={() => onclick?.({ start, end })}
+	onkeydown={handleKeydown}
+>
+	<div class="es-hint" aria-hidden="true">
+		<span class="es-plus">+</span>
+		<span class="es-range">{fmtTime(start)} – {fmtTime(end)}</span>
+	</div>
+</div>
+
+<style>
+	.es {
+		position: relative;
+		cursor: pointer;
+		border: 1px dashed transparent;
+		border-radius: 6px;
+		transition: border-color 150ms, background 150ms;
+		min-height: 24px;
+	}
+	.es:hover {
+		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;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 6px;
+		opacity: 0;
+		transition: opacity 150ms;
+	}
+	.es:hover .es-hint {
+		opacity: 1;
+	}
+
+	.es-plus {
+		font: 500 14px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-accent, #ef4444);
+	}
+	.es-range {
+		font: 400 10px / 1 var(--dt-mono, 'SF Mono', monospace);
+		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+	}
+
+	.es-v {
+		width: 100%;
+	}
+	.es-h {
+		height: 100%;
+	}
+</style>