@nomideusz/svelte-calendar 1.4.0 → 1.4.2

package/dist/views/mobile/MobileWeek.svelte

@@ -10,7 +10,7 @@ import EventContent from "../shared/EventContent.svelte";
 import { createClock } from "../../core/clock.svelte.js";
 import { sod, addDaysMs, isAllDay } from "../../core/time.js";
 import { startOfWeek as sowFn } from "../../core/time.js";
-import { fmtTime as _fmtTime, fmtWeekRange, weekdayShort } from "../../core/locale.js";
+import { fmtTime as _fmtTime, fmtDayNum, fmtWeekRange, weekdayShort } from "../../core/locale.js";
 import { dateLong } from "../shared/format.js";
 import { createSwipe } from "./swipe.js";
 let { mondayStart = true, locale, height = null, events = [], style = "", focusDate, oneventclick, selectedEventId = null } = $props();
@@ -207,7 +207,7 @@ function handleDayKeydown(e, dayMs) {
 				<div class="mw-date">
 					<span class="mw-day-name" class:mw-day-name--today={cell.isToday}>{cell.dayName}</span>
 					{#if showDates}
-						<span class="mw-day-num" class:mw-day-num--today={cell.isToday}>{cell.dayNum}</span>
+						<span class="mw-day-num" class:mw-day-num--today={cell.isToday}>{fmtDayNum(cell.ms, locale)}</span>
 					{/if}
 				</div>
 
@@ -231,7 +231,7 @@ function handleDayKeydown(e, dayMs) {
 								onclick={(e) => { e.stopPropagation(); oneventclick?.(ev); }}
 								onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); oneventclick?.(ev); } }}
 								onpointerenter={() => oneventhover?.(ev)}
-								aria-label="{ev.title}{statusText(ev)}, {evTimeLabel(ev)}"
+								aria-label="{ev.title}{statusText(ev)}, {dateLong(cell.ms, locale)}, {evTimeLabel(ev)}"
 							>
 								<span class="mw-ev-stripe"></span>
 								<div class="mw-ev-body">
@@ -247,6 +247,7 @@ function handleDayKeydown(e, dayMs) {
 								type="button"
 								class="mw-ev-more"
 								aria-expanded={expandedDays.has(cell.ms)}
+								aria-label="{expandedDays.has(cell.ms) ? L.showLess : L.nMore(cell.totalCount - MAX_EVENTS)}, {dateLong(cell.ms, locale)}"
 								onclick={() => toggleExpand(cell.ms)}
 							>
 								{expandedDays.has(cell.ms) ? L.showLess : L.nMore(cell.totalCount - MAX_EVENTS)}
@@ -356,7 +357,7 @@ function handleDayKeydown(e, dayMs) {
 	}
 	.mw-row-target:focus-visible {
 		outline: none;
-		box-shadow: inset 0 0 0 2px var(--dt-accent, #1d4fd7);
+		box-shadow: inset 0 0 0 2px var(--dt-text, #0f0f0f);
 	}
 
 	/* ─── Date column ────────────────────────────────── */
@@ -533,19 +534,15 @@ function handleDayKeydown(e, dayMs) {
 		pointer-events: auto;
 		-webkit-tap-highlight-color: transparent;
 	}
-	/* Hit-slop: 44px effective touch target */
-	.mw-ev-more::before {
-		content: '';
-		position: absolute;
-		left: 0;
-		right: 0;
-		top: 50%;
-		transform: translateY(-50%);
-		height: 44px;
+	@media (pointer: coarse) {
+		.mw-ev-more {
+			min-height: 44px;
+			min-width: 44px;
+		}
 	}
 	.mw-ev-more:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
+		box-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);
 	}
 
 	/* ─── Chevron ────────────────────────────────────── */

package/dist/views/month/MonthGrid.svelte

@@ -9,7 +9,8 @@
 <script lang="ts">import { useCalendarContext } from "../shared/context.svelte.js";
 import { createClock } from "../../core/clock.svelte.js";
 import { DAY_MS, sod, addDaysMs, isAllDay } from "../../core/time.js";
-import { fmtTime, weekdayShort } from "../../core/locale.js";
+import { fmtTime, fmtDayNum, weekdayShort } from "../../core/locale.js";
+import { dateLong } from "../shared/format.js";
 let { events = [], style = "", height = null, locale, focusDate, oneventclick, selectedEventId = null } = $props();
 const ctx = useCalendarContext();
 const L = $derived(ctx.labels);
@@ -248,7 +249,7 @@ function chipTime(e) {
 					onkeydown={(e) => cellKeydown(e, cell)}
 				>
 					<span class="mg-daynum" class:mg-daynum--today={cell.isToday}>
-						{cell.dayNum}
+						{fmtDayNum(cell.ms, locale)}
 					</span>
 					<!-- Phones: dots are a picture of the day; the cell (its label counts
 					     the events) is the one tap and tab target. -->
@@ -282,7 +283,7 @@ function chipTime(e) {
 									class:mg-chip--cancelled={ev.status === 'cancelled'}
 									style:--mg-chip-color={ev.color ?? (isAllDay(ev) ? 'var(--dt-accent)' : 'var(--dt-event, var(--dt-accent))')}
 									title={ev.title}
-									aria-label="{ev.title}{chipTime(ev) ? `, ${chipTime(ev)}` : ''}"
+									aria-label="{ev.title}, {dateLong(cell.ms, locale)}{chipTime(ev) ? `, ${chipTime(ev)}` : ''}"
 									onclick={(e) => {
 										e.stopPropagation();
 										oneventclick?.(ev, e.currentTarget.getBoundingClientRect());
@@ -304,7 +305,7 @@ function chipTime(e) {
 								type="button"
 								class="mg-more"
 								aria-expanded={ondayclick ? undefined : false}
-								aria-label={L.nMore(cell.overflow)}
+								aria-label="{L.nMore(cell.overflow)}, {dateLong(cell.ms, locale)}"
 								onclick={(e) => overflowClick(e, cell)}
 							>
 								{L.nMore(cell.overflow)}
@@ -417,7 +418,7 @@ function chipTime(e) {
 		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.mg-cell:focus-visible {
-		outline: 2px solid var(--dt-accent, #1d4fd7);
+		outline: 2px solid var(--dt-text, #0f0f0f);
 		outline-offset: -2px;
 	}
 
@@ -498,7 +499,12 @@ function chipTime(e) {
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
+		/* A Latin title in RTL keeps its own direction: the ellipsis cuts its end */
+		unicode-bidi: plaintext;
+		text-align: left;
 	}
+	/* …but it sits on the calendar's side, by the bar */
+	.mg-chip-title:dir(rtl) { text-align: right; }
 	.mg-more {
 		align-self: flex-start;
 		border: none;
@@ -515,7 +521,7 @@ function chipTime(e) {
 		color: var(--dt-text);
 	}
 	.mg-more:focus-visible {
-		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
+		box-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);
 		outline: none;
 	}
 

package/dist/views/planner/PlannerScroll.svelte

@@ -22,7 +22,7 @@ import EventContent from "../shared/EventContent.svelte";
 import { createClock } from "../../core/clock.svelte.js";
 import { HOUR_MS, sod, addDaysMs, diffDays } from "../../core/time.js";
 import { startOfWeek as sowFn, isAllDay, segmentForDay } from "../../core/time.js";
-import { weekdayShort, monthLong, fmtTime as _fmtTime } from "../../core/locale.js";
+import { weekdayShort, monthLong, fmtDayNum, fmtTime as _fmtTime } from "../../core/locale.js";
 import { createChipFit } from "../shared/chip-fit.svelte.js";
 let { mondayStart = true, locale, height = 520, events = [], style = "", focusDate, oneventclick, oneventcreate, onexternaldrop, selectedEventId = null, readOnly = false, visibleHours } = $props();
 const ctx = useCalendarContext();
@@ -873,7 +873,7 @@ function onCellKeydown(e, ms) {
 								<div class="wg-cell-hd" class:wg-cell-hd--today={day.isToday}>
 									<span class="wg-day-wd">{weekdayShort(day.ms, locale)}</span>
 									{#if showDates}
-										<span class="wg-day-num">{day.dayNum}</span>
+										<span class="wg-day-num">{fmtDayNum(day.ms, locale)}</span>
 									{/if}
 								</div>
 
@@ -1446,7 +1446,12 @@ function onCellKeydown(e, ms) {
 		text-overflow: ellipsis;
 		min-width: 0;
 		flex: 1 1 auto;
+		/* A Latin title in RTL keeps its own direction: the ellipsis cuts its end */
+		unicode-bidi: plaintext;
+		text-align: left;
 	}
+	/* …but it sits on the calendar's side, by the bar */
+	.wg-ev-title:dir(rtl) { text-align: right; }
 
 	.wg-ev-loc {
 		font: 400 12.5px / 1 var(--dt-sans, system-ui, sans-serif);
@@ -1476,12 +1481,12 @@ function onCellKeydown(e, ms) {
 
 	.wg-ev-more:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
+		box-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);
 	}
 
 	/* ─── Focus-visible ──────────────────────────────── */
 	.wg-cell:focus-visible {
-		outline: 2px solid var(--dt-accent, #1d4fd7);
+		outline: 2px solid var(--dt-text, #0f0f0f);
 		outline-offset: -2px;
 	}
 

package/dist/views/planner/PlannerWeek.svelte

@@ -21,7 +21,7 @@ import { createClock } from "../../core/clock.svelte.js";
 import { fitParts } from "../../text-fit.js";
 import { HOUR_MS, sod, addDaysMs, diffDays } from "../../core/time.js";
 import { startOfWeek as sowFn, isAllDay, segmentForDay } from "../../core/time.js";
-import { fmtHParts, fmtTime, fmtDuration, fmtWeekRange, weekdayShort, weekdayLong } from "../../core/locale.js";
+import { fmtHParts, fmtTime, fmtDayNum, fmtDuration, fmtWeekRange, weekdayShort, weekdayLong } from "../../core/locale.js";
 import { dateLong } from "../shared/format.js";
 let { mode = "week", mondayStart = true, locale, height = 520, events = [], style = "", focusDate, oneventclick, oneventcreate, onexternaldrop, selectedEventId = null, readOnly = false, visibleHours } = $props();
 // ── Context ────────────────────────────────────────
@@ -305,6 +305,9 @@ const weekIsEmpty = $derived(!events.some((ev) => ev.start.getTime() < weekEndMs
 // with room for its label (centred on the line) below the sticky top.
 // An event running across that hour line would be sliced under the sticky
 // top, so the scroll starts at that event's hour instead.
+// A server-rendered grid sits at midnight until this runs: it stays
+// hidden until placed (.tw-body--unplaced), and shows anyway after 1.5s.
+let placed = $state(false);
 $effect(() => {
 	void weekStartMs;
 	void startHour;
@@ -339,6 +342,7 @@ $effect(() => {
 			}
 		}
 		el.scrollTop = Math.max(0, (hour - startHour) * HOUR_H - LABEL_ROOM);
+		placed = true;
 	});
 });
 // ── Pointer coalescing ─────────────────────────────
@@ -442,6 +446,9 @@ const TIME_LINE = 11 * 1.1;
 const TITLE_LINE = 12 * 1.2;
 const ROOM_LINE = 10 * 1.2;
 const ROOM_AIR = 9;
+/** Tall enough for two title lines over the time (.tw-ev--tall), in the
+*  CSS's own line boxes: title 15px/1.25, time 14px/1.2. */
+const TWO_LINE_H = BODY_PAD_Y + 2 * 15 * 1.25 + LINE_GAP + 14 * 1.2;
 function blockParts(ev, height) {
 	return fitParts([
 		{
@@ -661,6 +668,20 @@ function handleColsClick(e) {
 let focusedColMs = $state(null);
 const tabbableColMs = $derived((dayCols.find((d) => d.ms === focusedColMs) ?? dayCols.find((d) => d.isToday) ?? dayCols[0])?.ms);
 const colsCreate = $derived(!!oneventcreate && !readOnly);
+// After Enter creates, the keyboard follows the new block once the host
+// adds it: the first unseen event at that start, within two updates.
+let createFocus = null;
+$effect(() => {
+	const list = events;
+	untrack(() => {
+		if (!createFocus) return;
+		const { startMs, known } = createFocus;
+		const ev = list.find((e) => !known.has(e.id) && e.start.getTime() === startMs);
+		const block = ev && colsEl?.querySelector(`.tw-ev[data-event-id="${CSS.escape(ev.id)}"]`);
+		if (block) block.focus();
+		if (block || --createFocus.tries <= 0) createFocus = null;
+	});
+});
 function onColKeydown(e, i) {
 	if (e.target !== e.currentTarget) return;
 	const day = dayCols[i];
@@ -675,6 +696,11 @@ function onColKeydown(e, i) {
 		const slot = isBlockedAt(day.ms, hour);
 		if (slot) return ctx.announce(`${slot.label || L.unavailable}, ${blockedRangeLabel(day.ms, slot.start, slot.end)}`);
 		const startMs = atHour(day.ms, hour);
+		createFocus = {
+			startMs,
+			known: new Set(events.map((ev) => ev.id)),
+			tries: 2
+		};
 		oneventcreate({
 			start: new Date(startMs),
 			end: new Date(startMs + Math.max(60, minDuration ?? 0) * 6e4)
@@ -948,7 +974,7 @@ function onWindowKeydown(e) {
 						>
 							<span class="tw-hd-wd">{singleDay ? weekdayLong(day.ms, locale) : weekdayShort(day.ms, locale)}</span>
 							{#if showDates}
-								<span class="tw-hd-num" class:tw-hd-num--today={day.markToday}>{day.dayNum}</span>
+								<span class="tw-hd-num" class:tw-hd-num--today={day.markToday}>{fmtDayNum(day.ms, locale)}</span>
 							{/if}
 							{#if dayHeaderSnippet}
 								<div class="tw-hd-custom">
@@ -989,18 +1015,16 @@ function onWindowKeydown(e) {
 			{/if}
 
 			<!-- Grid body -->
-			<div class="tw-body" style:height="{gridHeight}px">
+			<div class="tw-body" class:tw-body--unplaced={!placed} style:height="{gridHeight}px">
 				<!-- Time gutter -->
 				<div class="tw-gutter" style:width="{GUTTER_W}px" aria-hidden="true">
 					{#each { length: hourCount } as _, i}
-						{#if i > 0}
-							{@const [hNum, hSuf] = fmtHParts(startHour + i, locale)}
-							<!-- an hour the now plate would half-cover gives way to it -->
-							<span
-								class="tw-gutter-lb"
-								class:tw-gutter-lb--under={nowY !== null && weekHasToday && Math.abs(i * HOUR_H - nowY) < 18}
-								style:top="{i * HOUR_H}px">{hNum}<small>{hSuf}</small></span>
-						{/if}
+						{@const [hNum, hSuf] = fmtHParts(startHour + i, locale)}
+						<!-- an hour the now plate would half-cover gives way to it -->
+						<span
+							class="tw-gutter-lb"
+							class:tw-gutter-lb--under={nowY !== null && weekHasToday && Math.abs(i * HOUR_H - nowY) < 18}
+							style:top="{i * HOUR_H}px">{hNum}<small>{hSuf}</small></span>
 					{/each}
 					{#if axisGhost}
 						<!-- The axis reads the drag to the minute, at both edges. -->
@@ -1095,6 +1119,7 @@ function onWindowKeydown(e) {
 									class:tw-ev--past={p.ev.end.getTime() < clock.tick}
 									class:tw-ev--short={p.height < 44}
 									class:tw-ev--compact={p.height < 34}
+									class:tw-ev--tall={p.height >= TWO_LINE_H}
 									class:tw-ev--on-now={weekHasToday && nowY !== null && p.top < nowY && p.top + p.height > nowY}
 									style:top="{p.top}px"
 									style:height="{p.height}px"
@@ -1378,9 +1403,13 @@ function onWindowKeydown(e) {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		unicode-bidi: plaintext;
+		text-align: left;
 		flex: 1;
 		min-width: 0;
 	}
+	/* …but it sits on the calendar's side, by the bar */
+	.tw-ad-title:dir(rtl) { text-align: right; }
 	.tw-ad-span {
 		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
@@ -1424,7 +1453,7 @@ function onWindowKeydown(e) {
 	.tw-ad-more:hover { color: var(--dt-text, rgba(15, 15, 15, 0.87)); }
 	.tw-ad-more:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
+		box-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);
 	}
 
 	/* ─── Grid body ──────────────────────────────────── */
@@ -1432,6 +1461,11 @@ function onWindowKeydown(e) {
 		display: flex;
 		position: relative;
 	}
+	.tw-body--unplaced {
+		visibility: hidden;
+		animation: tw-reveal 0s 1.5s forwards;
+	}
+	@keyframes tw-reveal { to { visibility: visible; } }
 
 	/* ─── Time gutter ────────────────────────────────── */
 	.tw-gutter {
@@ -1469,6 +1503,10 @@ function onWindowKeydown(e) {
 		align-self: center;
 		background: var(--dt-border-day, rgba(15, 15, 15, 0.3));
 	}
+	/* The first hour has no room above its line: it hangs below it, the
+	   tick still on the line. */
+	.tw-gutter-lb:first-child { transform: none; }
+	.tw-gutter-lb:first-child::after { align-self: flex-start; }
 	.tw-gutter-lb--under {
 		visibility: hidden;
 	}
@@ -1545,7 +1583,7 @@ function onWindowKeydown(e) {
 		box-sizing: border-box;
 	}
 	.tw-col:focus-visible {
-		outline: 2px solid var(--dt-accent, #1d4fd7);
+		outline: 2px solid var(--dt-text, #0f0f0f);
 		outline-offset: -2px;
 	}
 	/* The gutter's right border already bounds the first column */
@@ -1767,6 +1805,30 @@ function onWindowKeydown(e) {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		/* A Latin title in an RTL calendar keeps its own direction, so the
+		   ellipsis cuts its end, not its start. */
+		unicode-bidi: plaintext;
+		text-align: left;
+	}
+	/* …but it sits on the calendar's side, by the bar */
+	:is(.tw-ev-title, .tw-ev-loc):dir(rtl) { text-align: right; }
+	/* A block tall enough for two title lines over the time wraps the title
+	   to two. The parts flow in a wrapping column, so a room that no longer
+	   fits under them moves into a second column the block clips: it gives
+	   way whole, before the title is cut, instead of being sliced. */
+	.tw-ev--tall .tw-ev-body {
+		flex-wrap: wrap;
+		column-gap: 16px;
+	}
+	.tw-ev--tall :is(.tw-ev-title, .tw-ev-time, .tw-ev-loc) { width: 100%; }
+	.tw-ev--tall .tw-ev-title {
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		white-space: normal;
+		overflow-wrap: break-word; /* a word wider than an overlap lane breaks, not clips */
+		hyphens: auto; /* …and hyphenates where the host page declares a lang */
 	}
 
 	.tw-ev-loc {
@@ -1776,6 +1838,8 @@ function onWindowKeydown(e) {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		unicode-bidi: plaintext;
+		text-align: left;
 	}
 
 	.tw-ev-live {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nomideusz/svelte-calendar",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "A themeable Svelte 5 calendar: day, week, scrolling-week and month views, agenda lists, touch-first mobile layouts, drag-and-drop, timezones, a headless API and an embeddable web component.",
   "type": "module",
   "sideEffects": [