@nomideusz/svelte-calendar 0.6.4 → 0.6.5

package/dist/views/agenda/AgendaWeek.svelte

@@ -484,7 +484,7 @@
 		z-index: 20;
 		display: flex;
 		gap: 2px;
-		background: color-mix(in srgb, var(--dt-surface, #10141c) 85%, transparent);
+		background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
 		backdrop-filter: blur(6px);
 		-webkit-backdrop-filter: blur(6px);
 		border-radius: 8px;
@@ -496,7 +496,7 @@
 		background: transparent;
 		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
 		cursor: pointer;
-		font: 600 11px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
 		padding: 6px 12px;
 		border-radius: 6px;
 		letter-spacing: 0.04em;
@@ -523,7 +523,7 @@
 		pointer-events: none;
 	}
 	.ag-nav-pill:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--dt-accent, #ef4444) 55%, transparent);
+		outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
 		outline-offset: 2px;
 	}
 
@@ -552,6 +552,8 @@
 		min-width: 0;
 		overflow-y: auto;
 		overflow-x: hidden;
+		box-sizing: border-box;
+		padding-top: 44px;
 		scrollbar-width: thin;
 		scrollbar-color: var(--dt-border) transparent;
 	}
@@ -579,22 +581,22 @@
 		gap: 4px;
 		padding: 2px 8px;
 		border-radius: 5px;
-		background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border: 1px solid color-mix(in srgb, var(--ev-color) 18%, transparent);
 		cursor: pointer;
 		transition: background 0.15s, border-color 0.15s;
 	}
 	.ag-allday-chip:hover {
-		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border-color: color-mix(in srgb, var(--ev-color) 30%, transparent);
 	}
 	.ag-allday-chip:focus-visible {
-		outline: 2px solid var(--dt-accent, #ff6b4a);
+		outline: 2px solid var(--dt-accent, #2563eb);
 		outline-offset: 2px;
 	}
 	.ag-allday-chip--selected {
 		border-color: var(--ev-color);
-		background: color-mix(in srgb, var(--ev-color) 18%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 18%, var(--dt-surface, var(--dt-bg, #ffffff)));
 	}
 	.ag-allday-dot {
 		width: 5px;
@@ -614,23 +616,23 @@
 		display: flex;
 		align-items: stretch;
 		border-radius: 6px;
-		background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, #191919));
+		background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border: 1px solid color-mix(in srgb, var(--ev-color) 8%, var(--dt-border, rgba(255, 255, 255, 0.06)));
 		overflow: hidden;
 		cursor: pointer;
 		transition: background 150ms, border-color 150ms;
 	}
 	.ag-card:hover {
-		background: color-mix(in srgb, var(--ev-color) 20%, var(--dt-surface, #191919));
+		background: color-mix(in srgb, var(--ev-color) 20%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border-color: color-mix(in srgb, var(--ev-color) 30%, transparent);
 	}
 	.ag-card:focus-visible {
-		outline: 2px solid var(--dt-accent, #ff6b4a);
+		outline: 2px solid var(--dt-accent, #2563eb);
 		outline-offset: 2px;
 	}
 	.ag-card--selected {
 		border-color: var(--ev-color);
-		background: color-mix(in srgb, var(--ev-color) 20%, var(--dt-surface, #191919));
+		background: color-mix(in srgb, var(--ev-color) 20%, var(--dt-surface, var(--dt-bg, #ffffff)));
 	}
 	.ag-card--cancelled {
 		opacity: 0.5;
@@ -727,7 +729,7 @@
 		border-bottom: 1px solid var(--dt-border, rgba(255, 255, 255, 0.06));
 	}
 	.ag-wday--today {
-		background: color-mix(in srgb, var(--dt-accent, #ff6b4a) 2%, transparent);
+		background: color-mix(in srgb, var(--dt-accent, #2563eb) 2%, transparent);
 	}
 	.ag-wday--tomorrow .ag-card {
 		opacity: 0.82;
@@ -739,8 +741,6 @@
 		padding: 8px 20px;
 	}
 	.ag-wday--disabled {
-		opacity: 0.35;
-		pointer-events: none;
 		position: relative;
 	}
 	.ag-wday--disabled::after {
@@ -776,8 +776,8 @@
 		font-weight: 600;
 		letter-spacing: 0.08em;
 		text-transform: uppercase;
-		color: var(--dt-accent, #ff6b4a);
-		background: color-mix(in srgb, var(--dt-accent, #ff6b4a) 12%, transparent);
+		color: var(--dt-accent, #2563eb);
+		background: color-mix(in srgb, var(--dt-accent, #2563eb) 12%, transparent);
 		padding: 2px 7px;
 		border-radius: 3px;
 	}
@@ -824,7 +824,7 @@
 		font-weight: 700;
 		letter-spacing: 0.08em;
 		text-transform: uppercase;
-		color: var(--dt-accent, #ff6b4a);
+		color: var(--dt-accent, #2563eb);
 	}
 	.ag-wslot-cards {
 		display: flex;
@@ -866,7 +866,7 @@
 		color: var(--dt-text);
 	}
 	.ag-compact:focus-visible {
-		outline: 2px solid var(--dt-accent, #ff6b4a);
+		outline: 2px solid var(--dt-accent, #2563eb);
 		outline-offset: 2px;
 	}
 	.ag-compact-dot {

package/dist/views/mobile/MobileDay.svelte

@@ -6,12 +6,10 @@
   Events positioned absolutely within hour lanes.
 -->
 <script lang="ts">
-	import { onMount, tick, untrack } from 'svelte';
+	import { onMount } from 'svelte';
 	import { useCalendarContext } from '../shared/context.svelte.js';
 	import { createClock } from '../../core/clock.svelte.js';
 	import type { TimelineEvent, BlockedSlot } from '../../core/types.js';
-	import type { DragState } from '../../engine/drag.svelte.js';
-	import type { ViewState } from '../../engine/view-state.svelte.js';
 	import { DAY_MS, HOUR_MS, sod, isAllDay, isMultiDay, segmentForDay } from '../../core/time.js';
 	import type { DaySegment } from '../../core/time.js';
 	import { fmtH, fmtTime, getLabels } from '../../core/locale.js';
@@ -181,8 +179,8 @@
 			ev: info.ev,
 			top: info.top,
 			height: info.height,
-			left: `calc(${GUTTER_W}px + ${(info.col / info.totalCols) * 100}% * (1 - ${GUTTER_W} / var(--mb-grid-w, 300)))`,
-			width: `calc((100% - ${GUTTER_W}px) / ${info.totalCols} - 2px)`,
+			left: `calc(${GUTTER_W}px + ${(info.col / info.totalCols) * 100}% - ${(GUTTER_W * info.col) / info.totalCols}px)`,
+			width: `calc(${100 / info.totalCols}% - ${GUTTER_W / info.totalCols + 2}px)`,
 			isCurrent: info.isCurrent,
 			isNext: info.isNext,
 			col: info.col,
@@ -316,7 +314,6 @@
 		onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleGridClick(e as unknown as MouseEvent); }}
 		role="grid"
 		tabindex="-1"
-		style:--mb-grid-w="300"
 	>
 		<div class="mb-grid-inner" style:height="{gridHeight}px">
 			<!-- Hour lanes -->

package/dist/views/mobile/MobileWeek.svelte

@@ -9,7 +9,6 @@
 	import { useCalendarContext } from '../shared/context.svelte.js';
 	import { createClock } from '../../core/clock.svelte.js';
 	import type { TimelineEvent } from '../../core/types.js';
-	import type { ViewState } from '../../engine/view-state.svelte.js';
 	import { DAY_MS, sod, isAllDay, isMultiDay } from '../../core/time.js';
 	import { startOfWeek as sowFn } from '../../core/time.js';
 	import { fmtTime as _fmtTime, weekdayShort, getLabels } from '../../core/locale.js';
@@ -186,6 +185,12 @@
 			viewState.setView(dayView);
 		}
 	}
+
+	function handleDayKeydown(e: KeyboardEvent, dayMs: number) {
+		if (e.key !== 'Enter' && e.key !== ' ') return;
+		e.preventDefault();
+		handleDayTap(dayMs);
+	}
 </script>
 
 <div
@@ -202,15 +207,21 @@
 	<!-- Vertical day list -->
 	<div class="mw-list" role="list">
 		{#each dayCells as cell (cell.ms)}
-			<button
+			<div
 				class="mw-row"
 				class:mw-row--today={cell.isToday}
 				class:mw-row--past={cell.isPast}
 				class:mw-row--weekend={cell.isWeekend}
 				class:mw-row--disabled={cell.isDisabled}
-				onclick={() => handleDayTap(cell.ms)}
-				aria-label="{cell.dayName} {cell.dayNum}"
+				role="listitem"
 			>
+				<button
+					class="mw-row-target"
+					disabled={cell.isDisabled}
+					onclick={() => handleDayTap(cell.ms)}
+					onkeydown={(e) => handleDayKeydown(e, cell.ms)}
+					aria-label="{cell.dayName} {cell.dayNum}"
+				></button>
 				<!-- Date column -->
 				<div class="mw-date">
 					<span class="mw-day-name" class:mw-day-name--today={cell.isToday}>{cell.dayName}</span>
@@ -225,7 +236,8 @@
 						<span class="mw-empty">{L.noEvents}</span>
 					{:else}
 						{#each cell.events.slice(0, MAX_EVENTS) as ev (ev.id)}
-							<div
+							<button
+								type="button"
 								class="mw-ev"
 								class:mw-ev--selected={selectedEventId === ev.id}
 								class:mw-ev--allday={isAllDay(ev) || isMultiDay(ev)}
@@ -235,8 +247,6 @@
 								class:mw-ev--full={ev.status === 'full'}
 								class:mw-ev--limited={ev.status === 'limited'}
 								style:--ev-color={ev.color ?? 'var(--dt-accent)'}
-								role="button"
-								tabindex="0"
 								onclick={(e) => { e.stopPropagation(); oneventclick?.(ev); }}
 								onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); oneventclick?.(ev); } }}
 								onpointerenter={() => oneventhover?.(ev)}
@@ -250,7 +260,7 @@
 										<span class="mw-ev-time">{fmtTime(ev.start)}</span>
 									{/if}
 								</div>
-							</div>
+							</button>
 						{/each}
 						{#if cell.totalCount > MAX_EVENTS}
 							<span class="mw-ev-more">{L.nMore(cell.totalCount - MAX_EVENTS)}</span>
@@ -260,7 +270,7 @@
 
 				<!-- Chevron -->
 				<svg class="mw-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg>
-			</button>
+			</div>
 		{/each}
 	</div>
 </div>
@@ -294,10 +304,9 @@
 		display: flex;
 		align-items: center;
 		gap: 12px;
+		position: relative;
 		padding: 10px 12px;
-		border: none;
 		background: transparent;
-		cursor: pointer;
 		transition: background 120ms;
 		text-align: left;
 		width: 100%;
@@ -308,7 +317,7 @@
 	.mw-row:last-child {
 		border-bottom: none;
 	}
-	.mw-row:active {
+	.mw-row:has(.mw-row-target:active) {
 		background: color-mix(in srgb, var(--dt-accent, #2563eb) 6%, transparent);
 	}
 	.mw-row--today {
@@ -318,8 +327,30 @@
 		opacity: 0.5;
 	}
 	.mw-row--disabled {
-		opacity: 0.3;
-		pointer-events: none;
+		background-image: repeating-linear-gradient(
+			135deg,
+			transparent,
+			transparent 6px,
+			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 6px,
+			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 12px
+		);
+	}
+	.mw-row-target {
+		position: absolute;
+		inset: 0;
+		z-index: 0;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		padding: 0;
+		-webkit-tap-highlight-color: transparent;
+	}
+	.mw-row-target:disabled {
+		cursor: default;
+	}
+	.mw-row-target:focus-visible {
+		outline: 2px solid var(--dt-accent, #2563eb);
+		outline-offset: -2px;
 	}
 
 	/* ─── Date column ────────────────────────────────── */
@@ -330,6 +361,9 @@
 		width: 40px;
 		flex-shrink: 0;
 		gap: 2px;
+		position: relative;
+		z-index: 1;
+		pointer-events: none;
 	}
 
 	.mw-day-name {
@@ -365,6 +399,8 @@
 		display: flex;
 		flex-direction: column;
 		gap: 4px;
+		position: relative;
+		z-index: 2;
 	}
 
 	.mw-empty {
@@ -462,13 +498,12 @@
 	.mw-chevron {
 		flex-shrink: 0;
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.2));
+		position: relative;
+		z-index: 1;
+		pointer-events: none;
 	}
 
 	/* ─── Focus ──────────────────────────────────────── */
-	.mw-row:focus-visible {
-		outline: 2px solid var(--dt-accent, #2563eb);
-		outline-offset: -2px;
-	}
 	.mw-ev:focus-visible {
 		outline: 2px solid var(--ev-color, var(--dt-accent));
 		outline-offset: 1px;

package/dist/views/planner/PlannerDay.svelte

@@ -297,15 +297,14 @@
 		const result: PositionedEvent[] = infos.map(({ startMs: _s, endMs: _e, ...info }) => {
 			const laneH = Math.max(MIN_EVENT_H, availH / info.groupMaxRow - EVENT_GAP);
 			const topPx = contentTop + info.row * (availH / info.groupMaxRow);
-			// Vertical text: text "width" = heightPx, content "height" = width
 			const fit = measure.fitContent({
 				title: info.ev.title,
 				subtitle: info.ev.subtitle,
 				location: info.ev.location,
 				time: `${fmtTime(info.ev.start, locale)} – ${fmtTime(info.ev.end, locale)}`,
 				tags: info.ev.tags,
-				maxWidth: laneH - 16, // vertical: heightPx minus padding
-				maxHeight: info.width - 16, // vertical: width minus padding
+				maxWidth: info.width - 16,
+				maxHeight: laneH - 16,
 			});
 			return { ...info, topPx, heightPx: laneH, isNext: info.isNext, fit };
 		});
@@ -328,8 +327,8 @@
 					subtitle: draggedEv.subtitle,
 					location: draggedEv.location,
 					tags: draggedEv.tags,
-					maxWidth: dragH - 16,
-					maxHeight: dragW - 16,
+					maxWidth: dragW - 16,
+					maxHeight: dragH - 16,
 				}),
 			});
 		}
@@ -894,7 +893,7 @@
 		bottom: 0;
 		left: 0;
 		width: 2px;
-		background: var(--dt-accent, #ef4444);
+		background: var(--dt-accent, #2563eb);
 		box-shadow: 0 0 8px var(--dt-glow, rgba(239, 68, 68, 0.35));
 	}
 	.fs-now-tag {
@@ -902,8 +901,8 @@
 		top: 8px;
 		left: 8px;
 		font: 700 11px/1 var(--dt-mono, ui-monospace, monospace);
-		color: var(--dt-accent, #ef4444);
-		background: color-mix(in srgb, var(--dt-bg, #0b0e14) 92%, var(--dt-accent, #ef4444));
+		color: var(--dt-accent, #2563eb);
+		background: color-mix(in srgb, var(--dt-bg, #ffffff) 92%, var(--dt-accent, #2563eb));
 		border: 1px solid var(--dt-accent-dim, rgba(239, 68, 68, 0.18));
 		padding: 3px 6px;
 		border-radius: 4px;
@@ -927,7 +926,7 @@
 		letter-spacing: 0.04em;
 		text-transform: uppercase;
 		color: var(--dt-text, rgba(226, 232, 240, 0.85));
-		background: color-mix(in srgb, var(--dt-surface, #10141c) 85%, transparent);
+		background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
 		backdrop-filter: blur(6px);
 		-webkit-backdrop-filter: blur(6px);
 		padding: 8px 16px;
@@ -945,7 +944,7 @@
 		z-index: 20;
 		display: flex;
 		gap: 2px;
-		background: color-mix(in srgb, var(--dt-surface, #10141c) 85%, transparent);
+		background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
 		backdrop-filter: blur(6px);
 		-webkit-backdrop-filter: blur(6px);
 		border-radius: 8px;
@@ -957,7 +956,7 @@
 		background: transparent;
 		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
 		cursor: pointer;
-		font: 600 11px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
 		padding: 6px 12px;
 		border-radius: 6px;
 		letter-spacing: 0.04em;
@@ -984,7 +983,7 @@
 		pointer-events: none;
 	}
 	.fs-nav-pill:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--dt-accent, #ef4444) 55%, transparent);
+		outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
 		outline-offset: 2px;
 	}
 
@@ -1009,7 +1008,7 @@
 		gap: 4px;
 		padding: 2px 8px;
 		border-radius: 4px;
-		background: color-mix(in srgb, var(--ev-color) 18%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 18%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border-left: 3px solid var(--ev-color);
 		white-space: nowrap;
 		flex-shrink: 0;
@@ -1017,14 +1016,14 @@
 		transition: background 0.15s;
 	}
 	.fs-ad:hover {
-		background: color-mix(in srgb, var(--ev-color) 28%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 28%, var(--dt-surface, var(--dt-bg, #ffffff)));
 	}
 	.fs-ad:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--dt-accent, #ef4444) 55%, transparent);
+		outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
 		outline-offset: 2px;
 	}
 	.fs-ad--selected {
-		background: color-mix(in srgb, var(--ev-color) 30%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 30%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border-left-width: 4px;
 	}
 
@@ -1057,7 +1056,7 @@
 		z-index: 6;
 		border-radius: 6px;
 		cursor: pointer;
-		background: color-mix(in srgb, var(--ev-color) 15%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 15%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		overflow: hidden;
 		display: flex;
 		align-items: center;
@@ -1065,18 +1064,18 @@
 		transition: box-shadow 120ms, background 120ms;
 	}
 	.fs-event:hover {
-		background: color-mix(in srgb, var(--ev-color) 25%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 25%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		box-shadow: 0 2px 12px color-mix(in srgb, var(--ev-color) 25%, transparent);
 	}
 	.fs-event--selected {
 		box-shadow: 0 0 0 2px var(--ev-color), 0 2px 14px color-mix(in srgb, var(--ev-color) 35%, transparent);
 	}
 	.fs-event--current {
-		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ev-color) 20%, transparent);
 	}
 	.fs-event--next {
-		background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border: 1px dashed color-mix(in srgb, var(--ev-color) 35%, transparent);
 	}
 	.fs-event--dragging {
@@ -1107,16 +1106,18 @@
 		cursor: default;
 	}
 
-	/* Event inner (vertical text, bottom-to-top reading) */
+	/* Event inner */
 	.fs-ev-inner {
-		writing-mode: vertical-rl;
-		transform: rotate(180deg);
 		display: flex;
-		align-items: center;
-		gap: 6px;
-		max-height: 100%;
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: center;
+		gap: 3px;
+		width: 100%;
+		height: 100%;
 		overflow: hidden;
-		padding: 8px 4px;
+		box-sizing: border-box;
+		padding: 6px 8px;
 	}
 	.fs-ev-live {
 		flex-shrink: 0;
@@ -1164,7 +1165,7 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
-	.fs-ev-tags { display: flex; gap: 4px; }
+	.fs-ev-tags { display: flex; gap: 4px; flex-wrap: wrap; }
 	.fs-ev-tag {
 		font: 500 8px/1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--ev-color, var(--dt-accent));
@@ -1176,7 +1177,7 @@
 
 	/* ─── Focus-visible ──────────────────────────────── */
 	.fs-event:focus-visible {
-		outline: 2px solid var(--dt-accent, #ef4444);
+		outline: 2px solid var(--dt-accent, #2563eb);
 		outline-offset: 2px;
 	}
 </style>