picocrank 1.25.2 → 1.26.0

package/supplemental-themes/dracula-alucard/theme.css

@@ -32,7 +32,7 @@ html[data-theme="dark"] {
 	--dt-warning-fg: var(--dt-surface);
 
 	--body-bg-color: var(--dt-background);
-	--surface-bg-color: var(--dt-surface);
+	--section-bg-color: var(--dt-surface);
 	--standout-bg-color: var(--dt-surface);
 	--section-header-bg-color: var(--dt-surface);
 	--shadow-color: var(--dt-shadow-strong);
@@ -41,8 +41,6 @@ html[data-theme="dark"] {
 	--muted-text-color: var(--dt-muted);
 	--annotation-key-color: var(--dt-muted);
 	--link-color: var(--dt-accent);
-	--nav-grid-accent-fg: var(--link-color);
-	--nav-grid-accent-bg: var(--link-color);
 	--border-color: var(--dt-border);
 
 	--hover-background-color: var(--dt-selection);
@@ -65,6 +63,9 @@ html[data-theme="dark"] {
 	--input-fg-color: var(--dt-foreground);
 	--control-option-bg-color: var(--dt-background);
 	--control-hover-bg-color: var(--dt-overlay);
+	--control-checked-bg: color-mix(in srgb, var(--dt-green) 35%, var(--standout-bg-color));
+	--control-checked-hover-bg: color-mix(in srgb, var(--dt-green) 45%, var(--standout-bg-color));
+	--control-checked-fg: var(--dt-foreground);
 	--menu-hover-bg-color: var(--dt-selection);
 
 	--table-row-hover-bg: var(--dt-selection);
@@ -87,19 +88,11 @@ html[data-theme="dark"] {
 	--karma-bad: var(--dt-red);
 	--karma-warning: var(--dt-yellow);
 	--karma-severe: var(--dt-orange);
-	--karma-important: var(--dt-purple);
 	--karma-note: var(--dt-cyan);
 	--karma-info: var(--dt-overlay);
 	--karma-old: var(--dt-muted);
 
-	--karma-good-fg: var(--dt-green);
-	--karma-bad-fg: var(--dt-red);
-	--karma-warning-fg: var(--dt-yellow);
-	--karma-severe-fg: var(--dt-orange);
-	--karma-important-fg: var(--dt-purple);
-	--karma-note-fg: var(--dt-cyan);
-	--karma-info-fg: var(--dt-muted);
-	--karma-old-fg: var(--dt-muted);
+	--karma-on-bg-fg: var(--dt-good-fg);
 }
 
 html[data-theme="light"] {
@@ -126,7 +119,7 @@ html[data-theme="light"] {
 	--dt-warning-fg: var(--dt-background);
 
 	--body-bg-color: var(--dt-background);
-	--surface-bg-color: var(--dt-surface);
+	--section-bg-color: var(--dt-surface);
 	--standout-bg-color: var(--dt-surface);
 	--section-header-bg-color: var(--dt-surface);
 	--shadow-color: var(--dt-shadow-strong);
@@ -135,8 +128,6 @@ html[data-theme="light"] {
 	--muted-text-color: var(--dt-muted);
 	--annotation-key-color: var(--dt-muted);
 	--link-color: var(--dt-accent);
-	--nav-grid-accent-fg: var(--link-color);
-	--nav-grid-accent-bg: var(--link-color);
 	--border-color: var(--dt-border);
 
 	--hover-background-color: var(--dt-selection);
@@ -159,6 +150,9 @@ html[data-theme="light"] {
 	--input-fg-color: var(--dt-foreground);
 	--control-option-bg-color: var(--dt-overlay);
 	--control-hover-bg-color: var(--dt-selection);
+	--control-checked-bg: color-mix(in srgb, var(--dt-green) 20%, var(--standout-bg-color));
+	--control-checked-hover-bg: color-mix(in srgb, var(--dt-green) 28%, var(--standout-bg-color));
+	--control-checked-fg: var(--dt-foreground);
 	--menu-hover-bg-color: var(--dt-selection);
 
 	--table-row-hover-bg: var(--dt-selection);
@@ -181,17 +175,9 @@ html[data-theme="light"] {
 	--karma-bad: var(--dt-red);
 	--karma-warning: var(--dt-yellow);
 	--karma-severe: var(--dt-orange);
-	--karma-important: var(--dt-purple);
 	--karma-note: var(--dt-cyan);
 	--karma-info: var(--dt-overlay);
 	--karma-old: var(--dt-muted);
 
-	--karma-good-fg: var(--dt-green);
-	--karma-bad-fg: var(--dt-red);
-	--karma-warning-fg: var(--dt-yellow);
-	--karma-severe-fg: var(--dt-orange);
-	--karma-important-fg: var(--dt-purple);
-	--karma-note-fg: var(--dt-cyan);
-	--karma-info-fg: var(--dt-muted);
-	--karma-old-fg: var(--dt-muted);
+	--karma-on-bg-fg: var(--dt-good-fg);
 }

package/supplemental-themes/gruvbox-dark-light/theme.css

@@ -35,7 +35,7 @@ html[data-theme="dark"] {
 	--gb-good-fg: var(--gb-bg0-hard);
 
 	--body-bg-color: var(--gb-bg0);
-	--surface-bg-color: var(--gb-bg1);
+	--section-bg-color: var(--gb-bg1);
 	--standout-bg-color: var(--gb-bg1);
 	--section-header-bg-color: var(--gb-bg1);
 	--shadow-color: var(--gb-shadow-strong);
@@ -44,8 +44,6 @@ html[data-theme="dark"] {
 	--muted-text-color: var(--gb-fg3);
 	--annotation-key-color: var(--gb-fg3);
 	--link-color: var(--gb-accent);
-	--nav-grid-accent-fg: var(--link-color);
-	--nav-grid-accent-bg: var(--link-color);
 	--border-color: var(--gb-bg3);
 
 	--hover-background-color: var(--gb-bg2);
@@ -68,6 +66,9 @@ html[data-theme="dark"] {
 	--input-fg-color: var(--gb-fg0);
 	--control-option-bg-color: var(--gb-bg2);
 	--control-hover-bg-color: var(--gb-bg3);
+	--control-checked-bg: color-mix(in srgb, var(--gb-green) 35%, var(--standout-bg-color));
+	--control-checked-hover-bg: color-mix(in srgb, var(--gb-green) 45%, var(--standout-bg-color));
+	--control-checked-fg: var(--gb-fg0);
 	--menu-hover-bg-color: var(--gb-bg2);
 
 	--table-row-hover-bg: var(--gb-bg2);
@@ -90,19 +91,11 @@ html[data-theme="dark"] {
 	--karma-bad: var(--gb-red);
 	--karma-warning: var(--gb-yellow);
 	--karma-severe: var(--gb-orange);
-	--karma-important: var(--gb-purple);
 	--karma-note: var(--gb-aqua);
 	--karma-info: var(--gb-bg2);
 	--karma-old: var(--gb-gray);
 
-	--karma-good-fg: var(--gb-green);
-	--karma-bad-fg: var(--gb-red);
-	--karma-warning-fg: var(--gb-yellow);
-	--karma-severe-fg: var(--gb-orange);
-	--karma-important-fg: var(--gb-purple);
-	--karma-note-fg: var(--gb-aqua);
-	--karma-info-fg: var(--gb-fg3);
-	--karma-old-fg: var(--gb-fg4);
+	--karma-on-bg-fg: var(--gb-good-fg);
 }
 
 html[data-theme="light"] {
@@ -132,7 +125,7 @@ html[data-theme="light"] {
 	--gb-good-fg: var(--gb-bg0);
 
 	--body-bg-color: var(--gb-bg0);
-	--surface-bg-color: var(--gb-bg1);
+	--section-bg-color: var(--gb-bg1);
 	--standout-bg-color: var(--gb-bg1);
 	--section-header-bg-color: var(--gb-bg1);
 	--shadow-color: var(--gb-shadow-strong);
@@ -141,8 +134,6 @@ html[data-theme="light"] {
 	--muted-text-color: var(--gb-fg3);
 	--annotation-key-color: var(--gb-fg3);
 	--link-color: var(--gb-accent);
-	--nav-grid-accent-fg: var(--link-color);
-	--nav-grid-accent-bg: var(--link-color);
 	--border-color: var(--gb-bg3);
 
 	--hover-background-color: var(--gb-bg2);
@@ -165,6 +156,9 @@ html[data-theme="light"] {
 	--input-fg-color: var(--gb-fg0);
 	--control-option-bg-color: var(--gb-bg2);
 	--control-hover-bg-color: var(--gb-bg3);
+	--control-checked-bg: color-mix(in srgb, var(--gb-green) 20%, var(--standout-bg-color));
+	--control-checked-hover-bg: color-mix(in srgb, var(--gb-green) 28%, var(--standout-bg-color));
+	--control-checked-fg: var(--gb-fg0);
 	--menu-hover-bg-color: var(--gb-bg2);
 
 	--table-row-hover-bg: var(--gb-bg2);
@@ -187,17 +181,9 @@ html[data-theme="light"] {
 	--karma-bad: var(--gb-red);
 	--karma-warning: var(--gb-yellow);
 	--karma-severe: var(--gb-orange);
-	--karma-important: var(--gb-purple);
 	--karma-note: var(--gb-aqua);
 	--karma-info: var(--gb-bg2);
 	--karma-old: var(--gb-gray);
 
-	--karma-good-fg: var(--gb-green);
-	--karma-bad-fg: var(--gb-red);
-	--karma-warning-fg: var(--gb-yellow);
-	--karma-severe-fg: var(--gb-orange);
-	--karma-important-fg: var(--gb-purple);
-	--karma-note-fg: var(--gb-aqua);
-	--karma-info-fg: var(--gb-fg3);
-	--karma-old-fg: var(--gb-fg4);
+	--karma-on-bg-fg: var(--gb-good-fg);
 }

package/supplemental-themes/waffles/theme.css

@@ -18,7 +18,7 @@ html {
 	--waffle-accent: #a05020;
 
 	--body-bg-color: var(--waffle-cream);
-	--surface-bg-color: #fffdf6;
+	--section-bg-color: #fffdf6;
 	--standout-bg-color: var(--waffle-batter);
 	--section-header-bg-color: var(--waffle-batter);
 	--shadow-color: rgba(139, 69, 19, 0.12);
@@ -26,8 +26,6 @@ html {
 	--text-color: var(--waffle-syrup);
 	--muted-text-color: #a88860;
 	--link-color: var(--waffle-accent);
-	--nav-grid-accent-fg: var(--link-color);
-	--nav-grid-accent-bg: var(--link-color);
 	--border-color: #e0c896;
 
 	--hover-background-color: #f0d9a8;
@@ -61,19 +59,9 @@ html {
 	--karma-bad: #f0a0a8;
 	--karma-warning: var(--waffle-butter);
 	--karma-severe: #e08a6a;
-	--karma-important: #ffe8a3;
 	--karma-note: #a8d4e8;
 	--karma-info: var(--waffle-batter);
 	--karma-old: #d4c4a0;
-
-	--karma-good-fg: #4a7a28;
-	--karma-bad-fg: var(--waffle-berry);
-	--karma-warning-fg: #9a6b00;
-	--karma-severe-fg: #a04020;
-	--karma-important-fg: #8a6800;
-	--karma-note-fg: #2a6a88;
-	--karma-info-fg: #7a6540;
-	--karma-old-fg: #6a5840;
 }
 
 body {
@@ -140,8 +128,6 @@ html[data-theme="dark"] {
 	--text-color: var(--waffle-foreground);
 	--muted-text-color: var(--waffle-foreground-muted);
 	--link-color: var(--waffle-accent-dark);
-	--nav-grid-accent-fg: var(--link-color);
-	--nav-grid-accent-bg: var(--link-color);
 	--border-color: #c9a66a;
 	--standout-bg-color: var(--waffle-batter);
 	--hover-background-color: #f0d9a8;
@@ -149,7 +135,7 @@ html[data-theme="dark"] {
 	--disabled-text-color: #7a6548;
 
 	--body-bg-color: var(--waffle-cream);
-	--surface-bg-color: var(--waffle-batter);
+	--section-bg-color: var(--waffle-batter);
 	--section-header-bg-color: var(--waffle-section);
 	--sidebar-bg-color: var(--waffle-sidebar);
 	--sidebar-link-color: var(--waffle-foreground);

package/vue/components/Breadcrumbs.vue

@@ -1,58 +1,205 @@
 <template>
-    <div id = "breadcrumbs">
-        <template v-for="(link, index) in links" :key="link.name">
-            <router-link :to="link.href">{{ link.name }}</router-link>
-            <span v-if="index < links.length - 1" class="separator">
-                &raquo;
-            </span>
-        </template>
-    </div>
+	<nav id="breadcrumbs" class="breadcrumbs" aria-label="Breadcrumb">
+		<div class="breadcrumbs-links flex-row">
+			<template v-for="(link, index) in links" :key="`${link.name}-${index}`">
+				<HugeiconsIcon
+					v-if="index > 0"
+					:icon="ArrowRight01Icon"
+					class="separator"
+					width="0.85em"
+					height="0.85em"
+					aria-hidden="true"
+				/>
+
+				<nav
+					v-if="hasMenu(link)"
+					class="menu breadcrumb-menu"
+					:aria-label="`${link.name} sections`"
+				>
+					<ul>
+						<li>
+							<span class="submenu">
+								<router-link
+									v-if="link.to"
+									:to="link.to"
+									class="button breadcrumb-link"
+									:aria-current="isLast(index) ? 'page' : undefined"
+								>
+									<span>{{ link.name }}</span>
+								</router-link>
+								<span
+									v-else
+									class="button breadcrumb-link"
+									:aria-current="isLast(index) ? 'page' : undefined"
+								>
+									{{ link.name }}
+								</span>
+							</span>
+							<div>
+								<ul>
+									<li v-for="menuItem in link.menu" :key="menuItem.name">
+										<router-link
+											:to="menuItem.to"
+											:class="{ active: isMenuItemActive(link, menuItem) }"
+										>
+											{{ menuItem.name }}
+										</router-link>
+									</li>
+								</ul>
+							</div>
+						</li>
+					</ul>
+				</nav>
+
+				<router-link
+					v-else-if="!isLast(index)"
+					:to="link.to ?? link.href"
+					class="button breadcrumb-link"
+				>
+					<span>{{ link.name }}</span>
+				</router-link>
+
+				<span
+					v-else
+					class="button breadcrumb-link active"
+					aria-current="page"
+				>
+					<span>{{ link.name }}</span>
+				</span>
+			</template>
+		</div>
+	</nav>
 </template>
 
+<script setup>
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { HugeiconsIcon } from '@hugeicons/vue'
+import { ArrowRight01Icon } from '@hugeicons/core-free-icons'
+
+const route = useRoute()
+const links = ref([])
+
+function hasMenu(link) {
+	return Array.isArray(link.menu) && link.menu.length > 0
+}
+
+function isLast(index) {
+	return index === links.value.length - 1
+}
+
+function isMenuItemActive(link, menuItem) {
+	const activeRoute = link.to?.name
+	const itemRoute = menuItem.to?.name
+	return activeRoute != null && activeRoute === itemRoute
+}
+
+watch(() => route.matched, (matched) => {
+	links.value = []
+	matched.forEach((record) => {
+		if (record.meta && record.meta.breadcrumbs) {
+			record.meta.breadcrumbs(route).forEach((item) => {
+				links.value.push({
+					name: item.name,
+					to: item.to,
+					href: item.href || record.path || '/',
+					menu: item.menu,
+				})
+			})
+		} else if (record.name) {
+			links.value.push({
+				name: record.meta?.title || record.name,
+				to: { name: record.name, params: route.params, query: route.query },
+				href: route.fullPath || record.path || '/',
+			})
+		}
+	})
+}, { immediate: true })
+</script>
+
 <style scoped>
-.separator {
-    color: var(--breadcrumbs-separator-fg);
+.breadcrumbs {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.breadcrumbs-links {
+	display: flex;
+	align-items: center;
+	gap: 0.0625rem;
+	flex-wrap: wrap;
+}
+
+.breadcrumb-menu {
+	display: inline-flex;
+	flex-shrink: 0;
+}
+
+.breadcrumb-menu > ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.breadcrumb-link {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.375rem;
+	padding: 0.5em 0.375em;
+	border-radius: 0.25em;
+	text-decoration: none;
+	color: var(--header-fg-color);
+	transition: background-color 0.15s ease, color 0.15s ease;
+	white-space: nowrap;
+	border: 0;
+	font-weight: normal;
+	background-color: transparent;
+	cursor: default;
 }
 
-a {
-    text-decoration: none;
-    padding: 0.4em;
-    border-radius: 0.2em;
+a.breadcrumb-link {
+	cursor: pointer;
 }
 
-a:hover {
-    text-decoration: underline;
-    background-color: var(--breadcrumbs-link-hover-bg);
+.breadcrumb-link.active {
+	text-decoration: underline;
+	font-weight: 500;
 }
 
+.separator {
+	flex-shrink: 0;
+	color: var(--header-fg-color);
+	opacity: 0.4;
+}
 </style>
 
+<style>
+header .breadcrumbs a.breadcrumb-link:hover,
+header .breadcrumbs a.breadcrumb-link:focus-visible,
+header .breadcrumbs .breadcrumb-menu.menu > ul > li:hover,
+header .breadcrumbs .breadcrumb-menu.menu > ul > li:focus-within,
+header .breadcrumbs .breadcrumb-menu.menu > ul > li:hover > span > a,
+header .breadcrumbs .breadcrumb-menu.menu > ul > li:focus-within > span > a,
+header .breadcrumbs .breadcrumb-menu.menu > ul div ul a:hover,
+header .breadcrumbs .breadcrumb-menu.menu > ul div ul a:focus-visible {
+	background-color: var(--header-hover-background-color);
+	color: var(--header-hover-text-color);
+}
 
-<script setup>
-    import { ref } from 'vue';
-    import { watch } from 'vue';
-    import { useRoute } from 'vue-router';
-
-    const route = useRoute();
-    const links = ref([]);
-
-    watch(() => route.matched, (matched) => {
-
-        links.value = [];
-        matched.forEach((record) => {
-            if (record.meta && record.meta.breadcrumbs) {
-                record.meta.breadcrumbs(route).forEach((item) => {
-                    links.value.push({
-                        name: item.name,
-                        href: item.href || record.path || '/'
-                    });
-                });
-            } else if (record.name) {
-                links.value.push({
-                    name: record.name,
-                    href: record.path || '/'
-                });
-            }
-        });
-    }, { immediate: true });
-</script>
+header .breadcrumbs a.breadcrumb-link:focus-visible {
+	outline-color: var(--header-focus-outline-color);
+}
+
+header .breadcrumb-menu.menu > ul > li {
+	border-radius: 0.25em;
+}
+
+header .breadcrumb-menu.menu > ul li span.submenu .breadcrumb-link {
+	text-decoration: inherit;
+}
+
+header .breadcrumb-menu.menu > ul li span.submenu .breadcrumb-link[aria-current="page"] {
+	text-decoration: underline;
+	font-weight: 500;
+}
+</style>

package/vue/components/Calendar.vue

@@ -12,6 +12,8 @@ export interface CalendarEvent {
   icon?: unknown
   /** Optional CSS color overriding the default event background. */
   color?: string
+  /** Optional CSS color for event title/time when using a custom background. */
+  foregroundColor?: string
   [key: string]: any
 }
 
@@ -23,7 +25,7 @@ export interface CalendarEventMoveRequest {
   /** Calendar cell where the event was dropped. */
   targetDate: Date
   /** Invoke exactly once with the outcome. If omitted until timeout, the move is treated as rejected. */
-  respond: (accepted: boolean) => void
+  respond: (_accepted: boolean) => void
 }
 
 export interface CalendarProps {
@@ -41,9 +43,9 @@ export interface CalendarProps {
    */
   eventMoveResponseTimeoutMs?: number
   // Formatter functions
-  getEventDate?: (event: CalendarEvent) => Date | null
-  getEventDateRange?: (event: CalendarEvent) => { start: Date | null; end: Date | null }
-  formatEventTime?: (event: CalendarEvent, date: Date) => string
+  getEventDate?: (_event: CalendarEvent) => Date | null
+  getEventDateRange?: (_event: CalendarEvent) => { start: Date | null; end: Date | null }
+  formatEventTime?: (_event: CalendarEvent, _date: Date) => string
   // Customization
   showNavigation?: boolean
   /** When true, day titles show ordinal + full month name (e.g. "21st July") instead of the day number alone. */
@@ -87,8 +89,8 @@ const currentDate = computed(() => {
   return internalCurrentDate.value
 })
 
-const currentMonth = computed(() => currentDate.value.getMonth())
-const currentYear = computed(() => currentDate.value.getFullYear())
+const viewMonth = computed(() => currentDate.value.getMonth())
+const viewYear = computed(() => currentDate.value.getFullYear())
 
 // Compute the first visible day (Monday) for the current month view
 function getStartOfGrid(date: Date): Date {
@@ -130,7 +132,7 @@ function isPastDay(date: Date): boolean {
 }
 
 // Get event date range
-function getEventDateRange(event: CalendarEvent): { start: Date | null; end: Date | null } {
+function resolveEventDateRange(event: CalendarEvent): { start: Date | null; end: Date | null } {
   if (props.getEventDateRange) {
     return props.getEventDateRange(event)
   }
@@ -158,7 +160,7 @@ function getEventsForDate(date: Date): CalendarEvent[] {
   targetDate.setHours(0, 0, 0, 0)
 
   return props.events.filter(event => {
-    const { start, end } = getEventDateRange(event)
+    const { start, end } = resolveEventDateRange(event)
     
     if (!start) return false
     
@@ -177,7 +179,7 @@ function getEventsForDate(date: Date): CalendarEvent[] {
 
 // Check if an event is a multi-day event
 function isMultiDayEvent(event: CalendarEvent): boolean {
-  const { start, end } = getEventDateRange(event)
+  const { start, end } = resolveEventDateRange(event)
   
   if (!start || !end) return false
 
@@ -192,7 +194,7 @@ function isMultiDayEvent(event: CalendarEvent): boolean {
 
 // Get the position of an event within a multi-day range for a specific date
 function getMultiDayPosition(event: CalendarEvent, date: Date): 'start' | 'middle' | 'end' | 'single' {
-  const { start, end } = getEventDateRange(event)
+  const { start, end } = resolveEventDateRange(event)
   
   if (!start || !end) return 'single'
 
@@ -218,7 +220,7 @@ function formatEventTimeDefault(event: CalendarEvent, date: Date): string {
     return props.formatEventTime(event, date)
   }
   
-  const { start, end } = getEventDateRange(event)
+  const { start, end } = resolveEventDateRange(event)
   const position = getMultiDayPosition(event, date)
 
   if (!start || !end) return 'No time'
@@ -237,8 +239,14 @@ function formatEventTimeDefault(event: CalendarEvent, date: Date): string {
 }
 
 function getEventStyle(event: CalendarEvent): Record<string, string> | undefined {
-  if (!event.color) return undefined
-  return { '--event-color': event.color }
+  const style: Record<string, string> = {}
+  if (event.color) {
+    style['--event-color'] = event.color
+  }
+  if (event.foregroundColor) {
+    style['--event-foreground-color'] = event.foregroundColor
+  }
+  return Object.keys(style).length > 0 ? style : undefined
 }
 
 // Get ordinal suffix for a number (1st, 2nd, 3rd, 4th, etc.)
@@ -275,25 +283,25 @@ const calendarDays = computed(() => {
 // Navigation functions
 function previousMonth() {
   if (props.currentMonth !== undefined && props.currentYear !== undefined) {
-    const newMonth = currentMonth.value === 0 ? 11 : currentMonth.value - 1
-    const newYear = currentMonth.value === 0 ? currentYear.value - 1 : currentYear.value
+    const newMonth = viewMonth.value === 0 ? 11 : viewMonth.value - 1
+    const newYear = viewMonth.value === 0 ? viewYear.value - 1 : viewYear.value
     emit('month-change', newMonth, newYear)
     // Optimistically update grid anchor for smooth transition
     gridStartDate.value = getStartOfGrid(new Date(newYear, newMonth, 1))
   } else {
-    internalCurrentDate.value = new Date(currentYear.value, currentMonth.value - 1, 1)
+    internalCurrentDate.value = new Date(viewYear.value, viewMonth.value - 1, 1)
     gridStartDate.value = getStartOfGrid(internalCurrentDate.value)
   }
 }
 
 function nextMonth() {
   if (props.currentMonth !== undefined && props.currentYear !== undefined) {
-    const newMonth = currentMonth.value === 11 ? 0 : currentMonth.value + 1
-    const newYear = currentMonth.value === 11 ? currentYear.value + 1 : currentYear.value
+    const newMonth = viewMonth.value === 11 ? 0 : viewMonth.value + 1
+    const newYear = viewMonth.value === 11 ? viewYear.value + 1 : viewYear.value
     emit('month-change', newMonth, newYear)
     gridStartDate.value = getStartOfGrid(new Date(newYear, newMonth, 1))
   } else {
-    internalCurrentDate.value = new Date(currentYear.value, currentMonth.value + 1, 1)
+    internalCurrentDate.value = new Date(viewYear.value, viewMonth.value + 1, 1)
     gridStartDate.value = getStartOfGrid(internalCurrentDate.value)
   }
 }
@@ -325,7 +333,7 @@ function adjustByWeeks(weeks: number): void {
 
   if (props.currentMonth !== undefined && props.currentYear !== undefined) {
     const { month, year } = getVisibleMonthYear(newStart)
-    if (month !== currentMonth.value || year !== currentYear.value) {
+    if (month !== viewMonth.value || year !== viewYear.value) {
       emit('month-change', month, year)
       // Set flag to prevent watcher from resetting our scroll position
       isScrolling.value = true
@@ -589,9 +597,9 @@ function onDayDrop(dayDate: Date, ev: DragEvent): void {
 }
 
 // Sync grid start when controlled month/year props change (but not during scrolling)
-watch([currentMonth, currentYear], () => {
+watch([viewMonth, viewYear], () => {
   if (isScrolling.value) return
-  const anchor = new Date(currentYear.value, currentMonth.value, 1)
+  const anchor = new Date(viewYear.value, viewMonth.value, 1)
   gridStartDate.value = getStartOfGrid(anchor)
 })
 
@@ -600,7 +608,7 @@ watch([currentMonth, currentYear], () => {
 <template>
   <div class="calendar-wrapper">
     <div v-if="showNavigation" class="calendar-header-nav">
-      <h2 class="calendar-title">{{ monthNames[currentMonth] }} {{ currentYear }}</h2>
+      <h2 class="calendar-title">{{ monthNames[viewMonth] }} {{ viewYear }}</h2>
       <div class="calendar-nav-buttons">
         <slot name="nav-buttons">
           <button @click="previousMonth" class="button neutral">‹</button>
@@ -638,8 +646,8 @@ watch([currentMonth, currentYear], () => {
           :class="{
             'today': day.date.toDateString() === new Date().toDateString(),
             'weekend': day.date.getDay() === 0 || day.date.getDay() === 6,
-            'prev-month': day.date.getMonth() !== currentMonth && day.date.getMonth() !== (currentMonth + 1) % 12,
-            'next-month': day.date.getMonth() !== currentMonth && day.date.getMonth() === (currentMonth + 1) % 12,
+            'prev-month': day.date.getMonth() !== viewMonth && day.date.getMonth() !== (viewMonth + 1) % 12,
+            'next-month': day.date.getMonth() !== viewMonth && day.date.getMonth() === (viewMonth + 1) % 12,
             'past': isPastDay(day.date),
             'range-single': rangeHighlightForDate(day.date) === 'single',
             'range-start': rangeHighlightForDate(day.date) === 'start',
@@ -980,6 +988,18 @@ watch([currentMonth, currentYear], () => {
   filter: brightness(0.92);
 }
 
+.calendar-event.has-custom-color .event-title {
+  color: var(--event-foreground-color, var(--calendar-event-title-fg));
+}
+
+.calendar-event.has-custom-color .event-time {
+  color: var(--event-foreground-color, var(--calendar-muted-fg));
+}
+
+.calendar-event.has-custom-color .multi-day-indicator {
+  color: var(--event-foreground-color, var(--calendar-accent-fg));
+}
+
 .event-icon {
   flex-shrink: 0;
 }