@nomideusz/svelte-calendar 1.0.0 → 1.1.0

package/dist/views/planner/PlannerScroll.svelte

@@ -784,11 +784,11 @@ function onCellKeydown(e, ms) {
 	{#if seg.isStart}
 		<span class="wg-ad-title">{seg.ev.title}</span>
 	{:else}
-		<span class="wg-ad-cont" aria-hidden="true">◂</span>
+		<span class="wg-ad-cont" aria-hidden="true"><svg viewBox="0 0 8 8" width="8" height="8"><path d="M5.5 1.5 2.5 4l3 2.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg></span>
 		<span class="wg-ad-title">{seg.ev.title}</span>
 	{/if}
 	{#if !seg.isEnd && seg.totalDays > 1}
-		<span class="wg-ad-arrow" aria-hidden="true">▸</span>
+		<span class="wg-ad-arrow" aria-hidden="true"><svg viewBox="0 0 8 8" width="8" height="8"><path d="M2.5 1.5 5.5 4l-3 2.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg></span>
 	{/if}
 {/snippet}
 
@@ -1045,7 +1045,7 @@ function onCellKeydown(e, ms) {
 	.wg-body::-webkit-scrollbar { width: 4px; }
 	.wg-body::-webkit-scrollbar-thumb {
 		background: var(--dt-scrollbar, rgba(0, 0, 0, 0.1));
-		border-radius: 4px;
+		border-radius: 0;
 	}
 	.wg-body::-webkit-scrollbar-track { background: transparent; }
 
@@ -1060,17 +1060,16 @@ function onCellKeydown(e, ms) {
 	/* ─── Week row ───────────────────────────────────── */
 	.wg-week {
 		display: flex;
-		border-radius: 10px;
+		border-radius: 0;
 		margin: var(--wg-row-margin, 12px) 8px;
-		border: 1.5px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
 		overflow: hidden;
 	}
 
 	.wg-week--current {
 		background: var(--dt-today-bg, rgba(37, 99, 235, 0.04));
-		/* Border width stays constant (no layout shift); emphasis via box-shadow */
-		border-color: var(--dt-accent, #2563eb);
-		box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
+		/* The current row's frame is a day rule, not the accent */
+		border-color: var(--dt-border-day, rgba(0, 0, 0, 0.3));
 	}
 
 	/* ─── Week body ──────────────────────────────────── */
@@ -1133,21 +1132,18 @@ function onCellKeydown(e, ms) {
 
 	.wg-cell--today { background: var(--dt-today-bg, rgba(37, 99, 235, 0.04)); }
 	.wg-cell--drop {
-		background: color-mix(in srgb, var(--dt-accent, #2563eb) 12%, transparent) !important;
+		background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12)) !important;
 		box-shadow: inset 0 0 0 2px var(--dt-accent, #2563eb);
 	}
-	.wg-cell--today:hover { background: color-mix(in srgb, var(--dt-accent, #2563eb) 6%, transparent); }
+	.wg-cell--today:hover { background: var(--dt-hover, rgba(0, 0, 0, 0.04)); }
 
-	/* Dim non-current weeks with a subtle wash + softer header text instead of
-	   a subtree opacity, so event content keeps full contrast everywhere. */
-	.wg-week:not(.wg-week--current) .wg-cell {
-		background: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 2.5%, transparent);
-	}
+	/* Non-current weeks sit on the same paper; only the header ink softens,
+	   and past events print a shade lighter. */
 	.wg-week:not(.wg-week--current) .wg-day-num {
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
-	.wg-week--current .wg-cell--past {
-		background: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 2.5%, transparent);
+	.wg-cell--past .wg-ev:not(.wg-ev--cancelled) {
+		opacity: 0.78;
 	}
 
 	/* equalDays: when no cells are marked past, all are full brightness */
@@ -1177,7 +1173,7 @@ function onCellKeydown(e, ms) {
 		align-items: flex-start;
 		gap: 3px;
 		padding: 2px 4px;
-		border-radius: 3px;
+		border-radius: 0;
 		background: repeating-linear-gradient(
 			-45deg,
 			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent),
@@ -1208,11 +1204,11 @@ function onCellKeydown(e, ms) {
 		gap: 4px;
 		padding: 3px 7px;
 		margin: 1px 0 2px;
-		border-radius: 999px;
+		border-radius: 0;
 	}
 
 	.wg-day-wd {
-		font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 11px / 1 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.04em;
 		text-transform: uppercase;
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
@@ -1232,12 +1228,13 @@ function onCellKeydown(e, ms) {
 	}
 
 	/* Today's pill — after the week rules above, which it must beat */
-	.wg-cell-hd--today {
-		background: var(--dt-accent, #2563eb);
-	}
 	.wg-cell-hd--today .wg-day-wd,
 	.wg-cell-hd--today .wg-day-num {
-		color: var(--dt-btn-text, #fff);
+		color: var(--dt-accent, #2563eb);
+	}
+	.wg-cell-hd--today .wg-day-num {
+		box-shadow: inset 0 -2px 0 var(--dt-accent, #2563eb);
+		padding-bottom: 2px;
 	}
 
 	/* ─── All-day / multi-day events ─────────────────── */
@@ -1257,11 +1254,13 @@ function onCellKeydown(e, ms) {
 		height: var(--wg-chip-h, 22px);
 		box-sizing: border-box;
 		flex-shrink: 0;
-		border-radius: 3px;
-		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
+		border-radius: 0;
+		border: none;
+		background: var(--ev-color);
+		color: var(--dt-btn-text, #fff);
 		cursor: pointer;
 		overflow: hidden;
-		transition: background 0.12s;
+		transition: filter 0.12s;
 		min-height: 18px;
 	}
 
@@ -1270,36 +1269,25 @@ function onCellKeydown(e, ms) {
 		z-index: 8;
 		opacity: 0.95;
 		pointer-events: none;
-		box-shadow: 0 6px 18px color-mix(in srgb, var(--ev-color) 26%, rgba(0, 0, 0, 0.22));
-		outline: 1px solid color-mix(in srgb, var(--ev-color) 42%, transparent);
 		cursor: grabbing;
 	}
 
 	.wg-ad:hover {
-		background: color-mix(in srgb, var(--ev-color) 32%, var(--dt-surface, var(--dt-bg, #ffffff)));
-	}
-
-	.wg-ad--start {
-		border-left: 2.5px solid var(--ev-color);
+		filter: brightness(1.08);
 	}
 
-	.wg-ad--mid {
-		border-radius: 0;
-		border-left: 1px dashed color-mix(in srgb, var(--ev-color) 40%, transparent);
-	}
-
-	.wg-ad--end:not(.wg-ad--start) {
-		border-radius: 0 3px 3px 0;
-		border-left: 1px dashed color-mix(in srgb, var(--ev-color) 40%, transparent);
+	.wg-ad--selected {
+		box-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff);
 	}
 
-	.wg-ad--selected {
-		box-shadow: 0 0 0 1.5px var(--ev-color);
+	.wg-ad:focus-visible {
+		outline: none;
+		box-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #2563eb);
 	}
 
 	.wg-ad-title {
-		font: 500 10px / 1.1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		font: 500 11px / 1.1 var(--dt-sans, system-ui, sans-serif);
+		color: inherit;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1307,18 +1295,16 @@ function onCellKeydown(e, ms) {
 	}
 
 	.wg-ad-cont {
-		font-size: 10px;
-		color: var(--ev-color);
+		display: flex;
+		color: inherit;
 		flex-shrink: 0;
-		line-height: 1;
 	}
 
 	.wg-ad-arrow {
-		font-size: 10px;
-		color: var(--ev-color);
+		display: flex;
+		color: inherit;
 		flex-shrink: 0;
 		margin-left: auto;
-		line-height: 1;
 	}
 
 	/* ─── Events ─────────────────────────────────────── */
@@ -1346,18 +1332,21 @@ function onCellKeydown(e, ms) {
 	.wg-now::after {
 		content: '';
 		flex: 1;
-		border-top: 1px dashed var(--dt-accent, #2563eb);
+		border-top: 2px solid var(--dt-accent, #2563eb);
 	}
 	.wg-now-time {
-		font: 500 9px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-accent, #2563eb);
+		font: 500 10px / 1 var(--dt-sans, system-ui, sans-serif);
+		padding: 2px 4px;
+		border-radius: 0;
+		background: var(--dt-accent, #2563eb);
+		color: var(--dt-btn-text, #fff);
 	}
-	/* Where a dragged-in class would land: the now-line's shape, solid */
+	/* Where a dragged-in class would land: the now-line's shape, dashed */
 	.wg-drop {
 		z-index: 3;
 	}
 	.wg-drop::after {
-		border-top-style: solid;
+		border-top-style: dashed;
 	}
 	.wg-drop .wg-now-time {
 		font-weight: 600;
@@ -1372,16 +1361,25 @@ function onCellKeydown(e, ms) {
 		height: var(--wg-chip-h, 22px);
 		box-sizing: border-box;
 		flex-shrink: 0;
-		padding: 0 6px;
-		border-radius: 4px;
-		background: color-mix(in srgb, var(--ev-color) 15%, var(--dt-surface, var(--dt-bg, #ffffff)));
+		/* 3px bar + 6px, and 3px on the right: 12px in all (CHIP_PAD_X) */
+		padding: 0 3px 0 9px;
+		border-radius: 0;
+		background: transparent;
 		cursor: pointer;
 		overflow: hidden;
-		transition: background 0.12s;
+		transition: background 0.12s, box-shadow 0.12s;
+	}
+	/* The start bar on the leading edge */
+	.wg-ev::before {
+		content: '';
+		position: absolute;
+		inset: 0 auto 0 0;
+		width: 3px;
+		background: var(--ev-color);
 	}
 
 	.wg-ev:hover {
-		background: color-mix(in srgb, var(--ev-color) 25%, var(--dt-surface, var(--dt-bg, #ffffff)));
+		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
 	}
 
 	.wg-ev--drag-preview {
@@ -1391,50 +1389,50 @@ function onCellKeydown(e, ms) {
 		z-index: 8;
 		opacity: 0.95;
 		pointer-events: none;
-		background: color-mix(in srgb, var(--ev-color) 28%, var(--dt-surface, var(--dt-bg, #ffffff)));
-		box-shadow: 0 6px 18px color-mix(in srgb, var(--ev-color) 24%, rgba(0, 0, 0, 0.22));
-		outline: 1px solid color-mix(in srgb, var(--ev-color) 42%, transparent);
+		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		box-shadow: inset 0 0 0 1px var(--ev-color);
 		cursor: grabbing;
 	}
 
 	.wg-ev--selected {
-		box-shadow: 0 0 0 1.5px var(--ev-color);
+		box-shadow: inset 0 0 0 1px var(--ev-color);
 	}
 
 	.wg-ev--current {
-		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
+		background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
 	}
 
-	.wg-ev--cancelled {
-		opacity: 0.5;
-	}
+	/* Printed states: struck through, grey, or a dashed bar — never a tint */
 	.wg-ev--cancelled .wg-ev-title {
 		text-decoration: line-through;
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
-	.wg-ev--tentative {
-		opacity: 0.65;
-		border: 1px dashed color-mix(in srgb, var(--ev-color) 40%, transparent);
+	.wg-ev--cancelled::before,
+	.wg-ev--full::before {
+		opacity: 0.45;
 	}
-	.wg-ev--full {
-		opacity: 0.55;
+	.wg-ev--tentative .wg-ev-title,
+	.wg-ev--full .wg-ev-title {
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
-	.wg-ev--limited {
-		opacity: 0.65;
-		border: 1px dashed color-mix(in srgb, var(--ev-color) 40%, transparent);
+	.wg-ev--tentative::before,
+	.wg-ev--limited::before {
+		background: repeating-linear-gradient(180deg, var(--ev-color) 0 4px, transparent 4px 7px);
 	}
 	.wg-ev--readonly {
 		cursor: default;
 	}
 
 	.wg-ev-time {
-		font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		font: 400 14px / 1 var(--dt-sans, system-ui, sans-serif);
+		font-variant-numeric: tabular-nums;
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		flex-shrink: 0;
 		white-space: nowrap;
 	}
 
 	.wg-ev-title {
-		font: 500 12px / 1.1 var(--dt-sans, system-ui, sans-serif);
+		font: 500 15px / 1.25 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		white-space: nowrap;
 		overflow: hidden;
@@ -1444,8 +1442,8 @@ function onCellKeydown(e, ms) {
 	}
 
 	.wg-ev-loc {
-		font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		font: 400 12.5px / 1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		white-space: nowrap;
 		flex-shrink: 0; /* shown only when measured to fit — never squeezed */
 	}
@@ -1455,7 +1453,7 @@ function onCellKeydown(e, ms) {
 		appearance: none;
 		background: none;
 		border: none;
-		border-radius: 3px;
+		border-radius: 0;
 		text-align: left;
 		align-self: flex-start;
 		font: 500 10px / 1 var(--dt-sans, system-ui, sans-serif);
@@ -1482,13 +1480,14 @@ function onCellKeydown(e, ms) {
 	}
 
 	.wg-ev:focus-visible {
-		outline: 2px solid var(--ev-color, var(--dt-accent, #2563eb));
-		outline-offset: 1px;
+		outline: none;
+		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
 	}
 
 	.wg-ev--dragging {
 		cursor: grabbing;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		box-shadow: inset 0 0 0 1px var(--ev-color);
 	}
 </style>