@nomideusz/svelte-calendar 1.4.3 → 1.6.0

package/README.md

@@ -470,6 +470,8 @@ Component fallbacks use system fonts and a neutral blue accent, so the package s
 | `--dt-text-3` | Tertiary text |
 | `--dt-accent` | Accent color |
 | `--dt-accent-dim` | Accent at ~12% opacity (selection, highlights) |
+| `--dt-ev-fill` | Event wash, as a percentage of the event's colour (default `0%`; the `eventFill` prop sets it) |
+| `--dt-ev-bar` | Width of an event's colour bar (default `3px`; the `eventBar` prop sets it) |
 | `--dt-event` | Bar color of an event without its own `color` (the presets set it to the text color, so such events draw in ink) |
 | `--dt-accent-fg` | Text on the planner's today-number badge (default `#fff`; not set by the presets) |
 | `--dt-btn-text` | Text on accent-filled buttons and badges |
@@ -535,6 +537,14 @@ const palette = generatePalette('#e11d48'); // (accent?, count = 15)
 const adapter = createMemoryAdapter(events, { palette });
 ```
 
+Events are transparent by default: a bar in the event's colour, ink text on the paper. To give them a background, or change the bar:
+
+```svelte
+<Calendar {adapter} eventFill={0.15} />            <!-- a light wash in each event's colour -->
+<Calendar {adapter} eventFill={0.15} eventBar={0} /> <!-- wash only, no bar -->
+<Calendar {adapter} eventBar={5} />                <!-- a heavier bar -->
+```
+
 Related exports: `VIVID_PALETTE` (the vivid palette, the default before 1.4) and `extractAccent(themeString)` (the accent color of a `--dt-*` theme string).
 
 ### Multi-day & All-day
@@ -1053,6 +1063,7 @@ The widget renders inside shadow DOM: host-page CSS cannot affect the calendar a
 | `days` | `7` | Days in week views, `1`–`7` |
 | `compact` | `false` | `"true"` for compact agenda rows |
 | `timezone` | viewer's zone | IANA zone, e.g. `Europe/Warsaw` (read when the element mounts) |
+| `mincolumnwidth` | `110` | Minimum day-column width in px for the week grid; a container narrower than the days need scrolls sideways |
 
 Each event in `api` responses and `events` needs `start` and `end` as date strings (ISO 8601) and may carry `id`, `title`, `color`, `allDay`, `subtitle` and `location`; other fields are ignored, as are events with an invalid or empty range. Changing an attribute updates the calendar in place.
 
@@ -1106,6 +1117,8 @@ Every `<Calendar>` prop (`CalendarProps`), grouped by what it controls.
 | `theme` | `string` | `auto` | CSS theme string of `--dt-*` properties. `auto` probes the host page. |
 | `autoTheme` | `AutoThemeOptions \| false` | `undefined` (probe) | Fine-tune auto-detection: `{ mode, accent, font }`. `false` disables probing. |
 | `borderRadius` | `number` | `0` | Corner radius in px (square by default) |
+| `eventFill` | `number` | `0` | Wash each event in its own colour, 0–1 (`0.15` = a light tint). Sets `--dt-ev-fill` |
+| `eventBar` | `number` | `3` | Width in px of the colour bar on an event's leading edge; `0` removes it. Sets `--dt-ev-bar` |
 
 ### Locale and timezone
 

package/dist/calendar/Calendar.svelte

@@ -95,7 +95,7 @@ import { wrapAdapterWithTimezone, toZonedTime, fromZonedTime } from "../core/tim
 import { isReadOnlyError, isNotFoundError } from "../adapters/errors.js";
 /** Breakpoint (px) at which auto-mobile activates */
 const MOBILE_BREAKPOINT = 768;
-let { adapter, views = defaultViews, view: activeViewId, theme = auto, autoTheme, mondayStart = true, height: heightProp = 600, borderRadius = 0, dir, locale, labels: labelsProp, readOnly = false, visibleHours, initialDate, snapInterval = 15, minColumnWidth = 110, showModePills = true, showNavigation = true, equalDays = false, showDates = true, hideDays, currentDate, blockedSlots, days, minDuration, maxDuration, disabledDates, compact = false, columns = false, mobile: mobileProp = "auto", event: eventSnippet, empty: emptySnippet, dayHeader: dayHeaderSnippet, header: headerSnippet, navigation: navigationSnippet, oneventclick, oneventcreate, onexternaldrop, oneventmove, onviewchange, ondatechange, oneventhover, ondayclick, onerror, timezone } = $props();
+let { adapter, views = defaultViews, view: activeViewId, theme = auto, autoTheme, mondayStart = true, height: heightProp = 600, borderRadius = 0, eventFill, eventBar, dir, locale, labels: labelsProp, readOnly = false, visibleHours, initialDate, snapInterval = 15, minColumnWidth = 110, showModePills = true, showNavigation = true, equalDays = false, showDates = true, hideDays, currentDate, blockedSlots, days, minDuration, maxDuration, disabledDates, compact = false, columns = false, mobile: mobileProp = "auto", event: eventSnippet, empty: emptySnippet, dayHeader: dayHeaderSnippet, header: headerSnippet, navigation: navigationSnippet, oneventclick, oneventcreate, onexternaldrop, oneventmove, onviewchange, ondatechange, oneventhover, ondayclick, onerror, timezone } = $props();
 // In readOnly mode, suppress mutation callbacks. With a timezone, the
 // drag plane is zoned wall-clock — hosts always receive real instants.
 const unzone = (d) => timezone ? fromZonedTime(d, timezone) : d;
@@ -672,7 +672,7 @@ const navCtx = $derived({
 <div
 	class="cal"
 	bind:this={calEl}
-	style="{effectiveTheme}; {heightProp === 'auto' ? '' : `--cal-h: ${heightProp}px;`} --cal-r: {borderRadius}px"
+	style="{effectiveTheme}; {heightProp === 'auto' ? '' : `--cal-h: ${heightProp}px;`} --cal-r: {borderRadius}px;{eventFill == null ? '' : ` --dt-ev-fill: ${eventFill * 100}%;`}{eventBar == null ? '' : ` --dt-ev-bar: ${eventBar}px;`}"
 	class:cal--auto={heightProp === 'auto'}
 	role="region"
 	aria-label={L.calendar}

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

@@ -71,6 +71,13 @@ export interface CalendarProps {
     height?: number | 'auto';
     /** Border radius in px (default: 0, square-cut). */
     borderRadius?: number;
+    /**
+     * Wash each event in its own colour, 0–1 (default 0: transparent). Text
+     * stays the theme's ink, so a light tint (0.1–0.2) reads best.
+     */
+    eventFill?: number;
+    /** Width in px of the colour bar on an event's leading edge (default 3). 0 removes it. */
+    eventBar?: number;
     /** Text direction: 'ltr' (default), 'rtl', or 'auto' */
     dir?: 'ltr' | 'rtl' | 'auto';
     /** BCP 47 locale tag (e.g. 'en-US', 'ar-SA') — sets lang and locale for formatting */

package/dist/views/agenda/AgendaDay.svelte

@@ -600,6 +600,9 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		align-items: stretch;
 		border-radius: 0;
 		background: transparent;
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		border: none;
 		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));
 		overflow: hidden;
@@ -612,12 +615,12 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		left: 0;
 		top: 0;
 		bottom: 0;
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		background: var(--ev-color);
 	}
 	.ag-card:hover,
 	.ag-card:active {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.ag-card:focus-visible {
 		outline: none;
@@ -859,6 +862,9 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		margin-bottom: 8px;
 		border-radius: 0;
 		background: var(--dt-accent-dim, color-mix(in srgb, var(--dt-accent, #1d4fd7) 12%, transparent));
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		border: none;
 		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));
 		cursor: pointer;
@@ -870,12 +876,13 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		left: 0;
 		top: 0;
 		bottom: 0;
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		background: var(--ev-color, var(--dt-accent));
 	}
 	.ag-q-now:hover,
 	.ag-q-now:active {
 		background:
+			linear-gradient(var(--_fill), var(--_fill)),
 			linear-gradient(var(--dt-hover, rgba(15, 15, 15, 0.04)), var(--dt-hover, rgba(15, 15, 15, 0.04))),
 			var(--dt-accent-dim, color-mix(in srgb, var(--dt-accent, #1d4fd7) 12%, transparent));
 	}
@@ -998,6 +1005,9 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		display: none;
 	}
 	.ag-log-row {
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		display: flex;
 		align-items: baseline;
 		gap: 10px;
@@ -1016,7 +1026,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	}
 	.ag-log-row:hover,
 	.ag-log-row:active {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.ag-log-row:focus-visible {
 		outline: none;
@@ -1042,7 +1052,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	/* The colour dot of a past row becomes its 3px start bar (dimmed: it is over). */
 	.ag-log-dot {
 		align-self: stretch;
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		border-radius: 0;
 		flex-shrink: 0;
 		opacity: 0.45;
@@ -1080,6 +1090,9 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag-compact-list::-webkit-scrollbar { display: none; }
 	/* A compact row: 3px start bar, hairline beneath, ink text. */
 	.ag-compact-row {
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		position: relative;
 		display: flex;
 		align-items: baseline;
@@ -1096,7 +1109,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		left: 0;
 		top: 0;
 		bottom: 0;
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		background: var(--ev-color, var(--dt-accent));
 	}
 	.ag-compact-row--selected {
@@ -1106,7 +1119,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag-compact-row:active .ag-compact-row-title { color: var(--dt-text); }
 	.ag-compact-row:hover,
 	.ag-compact-row:active {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.ag-compact-row:focus-visible {
 		outline: none;

package/dist/views/agenda/AgendaWeek.svelte

@@ -639,6 +639,9 @@ const weekDays = $derived.by(() => {
 		align-items: stretch;
 		border-radius: 0;
 		background: transparent;
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		border: none;
 		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));
 		overflow: hidden;
@@ -651,12 +654,12 @@ const weekDays = $derived.by(() => {
 		left: 0;
 		top: 0;
 		bottom: 0;
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		background: var(--ev-color);
 	}
 	.ag-card:hover,
 	.ag-card:active {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.ag-card:focus-visible {
 		outline: none;
@@ -939,6 +942,9 @@ const weekDays = $derived.by(() => {
 	}
 	/* A compact row: 3px start bar, hairline beneath, ink text. */
 	.ag-compact {
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		position: relative;
 		display: flex;
 		align-items: baseline;
@@ -955,7 +961,7 @@ const weekDays = $derived.by(() => {
 		left: 0;
 		top: 0;
 		bottom: 0;
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		background: var(--ev-color, var(--dt-accent));
 	}
 	.ag-compact--selected {
@@ -967,7 +973,7 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-compact:hover,
 	.ag-compact:active {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.ag-compact:focus-visible {
 		outline: none;

package/dist/views/mobile/MobileDay.svelte

@@ -968,6 +968,9 @@ $effect(() => {
 		border-radius: 0;
 		cursor: pointer;
 		background: transparent;
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		border: none;
 		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));
 		box-sizing: border-box;
@@ -982,7 +985,7 @@ $effect(() => {
 	}
 	.mb-event:hover,
 	.mb-event:active {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	/* Short blocks keep their duration-proportional height, but get a 44px
 	   transparent hit-slop so taps still land. */
@@ -1009,6 +1012,7 @@ $effect(() => {
 	   laid over the paper, opaque, so the line runs beneath its text. */
 	.mb-event.mb-event--current {
 		background:
+			linear-gradient(var(--_fill), var(--_fill)),
 			linear-gradient(var(--dt-accent-dim, rgba(29, 79, 215, 0.12)), var(--dt-accent-dim, rgba(29, 79, 215, 0.12))),
 			var(--dt-paper, none),
 			var(--dt-bg, #efebe9);
@@ -1016,6 +1020,7 @@ $effect(() => {
 	.mb-event.mb-event--current:hover,
 	.mb-event.mb-event--current:active {
 		background:
+			linear-gradient(var(--_fill), var(--_fill)),
 			linear-gradient(var(--dt-hover, rgba(15, 15, 15, 0.04)), var(--dt-hover, rgba(15, 15, 15, 0.04))),
 			var(--dt-paper, none),
 			var(--dt-bg, #efebe9);
@@ -1127,7 +1132,7 @@ $effect(() => {
 	}
 
 	.mb-ev-stripe {
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		background: var(--ev-color);
 		flex-shrink: 0;
 		border-radius: 0;

package/dist/views/mobile/MobileWeek.svelte

@@ -422,6 +422,9 @@ function handleDayKeydown(e, dayMs) {
 		min-height: 44px;
 		border-radius: 0;
 		background: transparent;
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		overflow: hidden;
 		cursor: pointer;
 		transition: background 120ms;
@@ -434,13 +437,13 @@ function handleDayKeydown(e, dayMs) {
 	}
 	.mw-ev:hover,
 	.mw-ev:active {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.mw-ev--selected {
 		box-shadow: inset 0 0 0 1px var(--ev-color);
 	}
 	.mw-ev--current {
-		background: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
+		background-color: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
 	}
 	/* All day: a solid band on the event colour, no tint. */
 	.mw-ev--allday {
@@ -486,7 +489,7 @@ function handleDayKeydown(e, dayMs) {
 	}
 
 	.mw-ev-stripe {
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		align-self: stretch;
 		background: var(--ev-color, var(--dt-accent));
 		flex-shrink: 0;

package/dist/views/month/MonthGrid.svelte

@@ -456,6 +456,9 @@ function chipTime(e) {
 		gap: 5px;
 		border: none;
 		background: none;
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--mg-chip-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		padding: 1px 4px;
 		border-radius: 0;
 		font: 400 12.5px/1.3 var(--dt-sans, system-ui, sans-serif);
@@ -465,14 +468,14 @@ function chipTime(e) {
 		text-align: left;
 	}
 	.mg-chip:hover {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.mg-chip:focus-visible {
 		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 		outline: none;
 	}
 	.mg-chip--selected {
-		background: var(--dt-accent-dim);
+		background-color: var(--dt-accent-dim);
 	}
 	.mg-chip--cancelled {
 		text-decoration: line-through;
@@ -486,7 +489,7 @@ function chipTime(e) {
 	.mg-chip-dot {
 		flex: none;
 		align-self: stretch;
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		border-radius: 0;
 		background: var(--mg-chip-color);
 	}
@@ -558,6 +561,7 @@ function chipTime(e) {
 	}
 	.mg--dots .mg-chip {
 		padding: 3px;
+		background-image: none; /* a mark, not a chip: no eventFill wash */
 		min-height: 0;
 	}
 	.mg--dots .mg-chip-title,

package/dist/views/planner/PlannerScroll.svelte

@@ -1372,6 +1372,9 @@ function onCellKeydown(e, ms) {
 		padding: 0 3px 0 9px;
 		border-radius: 0;
 		background: transparent;
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		cursor: pointer;
 		overflow: hidden;
 		transition: background 0.12s, box-shadow 0.12s;
@@ -1381,12 +1384,12 @@ function onCellKeydown(e, ms) {
 		content: '';
 		position: absolute;
 		inset: 0 auto 0 0;
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		background: var(--ev-color);
 	}
 
 	.wg-ev:hover {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 
 	.wg-ev--drag-preview {
@@ -1396,7 +1399,7 @@ function onCellKeydown(e, ms) {
 		z-index: 8;
 		opacity: 0.95;
 		pointer-events: none;
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 		box-shadow: inset 0 0 0 1px var(--ev-color);
 		cursor: grabbing;
 	}
@@ -1406,7 +1409,7 @@ function onCellKeydown(e, ms) {
 	}
 
 	.wg-ev--current {
-		background: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
+		background-color: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
 	}
 
 	/* Printed states: struck through, grey, or a dashed bar — never a tint */
@@ -1497,7 +1500,7 @@ function onCellKeydown(e, ms) {
 
 	.wg-ev--dragging {
 		cursor: grabbing;
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 		box-shadow: inset 0 0 0 1px var(--ev-color);
 	}
 </style>

package/dist/views/planner/PlannerWeek.svelte

@@ -1656,6 +1656,9 @@ function onWindowKeydown(e) {
 		z-index: 6;
 		border-radius: 0;
 		background: transparent;
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		display: flex;
 		align-items: stretch;
 		overflow: hidden;
@@ -1668,7 +1671,7 @@ function onWindowKeydown(e) {
 		-webkit-tap-highlight-color: transparent;
 	}
 	.tw-ev:hover {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 		z-index: 8;
 	}
 	/* Short blocks keep duration-proportional height, but get a 44px
@@ -1688,12 +1691,13 @@ function onWindowKeydown(e) {
 		z-index: 9;
 	}
 	.tw-ev--current {
-		background: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
+		background-color: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
 	}
 	/* An event the now line crosses lays its column's ground (and its own
 	   wash) over the paper, so the line passes beneath its text. */
 	.tw-ev.tw-ev--on-now {
 		background:
+			linear-gradient(var(--_fill), var(--_fill)),
 			linear-gradient(var(--tw-ev-wash, transparent), var(--tw-ev-wash, transparent)),
 			linear-gradient(var(--tw-col-wash, transparent), var(--tw-col-wash, transparent)),
 			var(--dt-paper, none),
@@ -1737,7 +1741,7 @@ function onWindowKeydown(e) {
 	.tw-ev--readonly { cursor: default; }
 
 	.tw-ev-stripe {
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		background: var(--ev-color);
 		flex-shrink: 0;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nomideusz/svelte-calendar",
-  "version": "1.4.3",
+  "version": "1.6.0",
   "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": [