@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/fesm2022/slotted-angular-event-calendar.mjs

@@ -0,0 +1,2934 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, TemplateRef, Directive, input, model, booleanAttribute, numberAttribute, output, contentChild, viewChild, ElementRef, Injector, HostAttributeToken, computed, signal, DestroyRef, afterNextRender, effect, untracked, afterRenderEffect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { secondsOfDay, compareDateTime, isPlainDateTime, compareDate, isSameDate, toISODate, isoWeekNumber, plainDateTime, addDays, timeOfSeconds, createDateFormat, todayIn, nowDateTimeIn, daysBetween } from '@slotted/core/date';
+import { occurrenceTimes, formatTimeRange, formatTime, formatOccurrence, calendarColor, layoutRow, overflowByDay, isMultiDay, isWorkingDay, occurrencesOn, layoutColumn, offsetChangeOn, offHoursOn, formatHour, zoneLabel, listDays, listDayParts, slotMinutes, viewRange, occurrencesIn, withPlacement, viewTitle, placeOccurrence, placementOf, occurrenceWhen, stepView, contextSlot, movePlacement, resizePlacement, nextAllowedPlacement, moveDate } from '@slotted/core/event-calendar';
+import { eventCalendarMessages } from '@slotted/core/i18n';
+import { getLiveAnnouncer } from '@slotted/core/live-announcer';
+import { createWidthGate, COMPACT_BELOW } from '@slotted/core/measure';
+import { SlDrawer, SlDrawerBody, SlDrawerClose, SlDrawerDescription, SlDrawerHeader, SlDrawerResizer, SlDrawerTitle } from '@slotted/angular/drawer';
+import { injectLocale, injectMessages } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlContextMenuTrigger } from '@slotted/angular/context-menu';
+import { SlMenu, SlMenuItem, SlMenuTrigger } from '@slotted/angular/menu';
+import { SlPopover, SlPopoverBody, SlPopoverClose, SlPopoverContent, SlPopoverDescription, SlPopoverHeader, SlPopoverLayer, SlPopoverTitle } from '@slotted/angular/popover';
+import { SlProgressBar } from '@slotted/angular/progress-indicator';
+import { SlSegment, SlSegmentedControl } from '@slotted/angular/segmented-control';
+
+const EVENT_CALENDAR_FALLBACK = {
+    compact: 'list',
+    dayHours: [0, 24],
+    firstDayOfWeek: undefined,
+    fixedWeeks: false,
+    hourCycle: undefined,
+    listRange: 'week',
+    loadingDelay: 200,
+    loadingMinDuration: 400,
+    maxColumns: 6,
+    maxEvents: 3,
+    scrollTime: { hour: 7, minute: 0, second: 0 },
+    slotDuration: 30,
+    timeZone: undefined,
+    weekends: 'shown',
+    weekNumbers: false,
+};
+const EVENT_CALENDAR_DEFAULTS = new InjectionToken('slotted event calendar defaults', { providedIn: 'root', factory: () => EVENT_CALENDAR_FALLBACK });
+/**
+ * An application decides once which zone answers "today", when its working
+ * day starts and how tall an hour is. The locale and the words come from the
+ * language in force (`provideSlotted`).
+ */
+function provideEventCalendarDefaults(defaults) {
+    return {
+        provide: EVENT_CALENDAR_DEFAULTS,
+        useFactory: () => ({ ...EVENT_CALENDAR_FALLBACK, ...defaults }),
+    };
+}
+function injectEventCalendarDefaults() {
+    return inject(EVENT_CALENDAR_DEFAULTS);
+}
+
+/**
+ * The content of every event, in all four places it is drawn. The family keeps
+ * the element — a link or a button — its name, its focus and its geometry;
+ * the template writes what is inside it.
+ */
+class SlEventCalendarEvent {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlEventCalendarEvent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlEventCalendarEvent, isStandalone: true, selector: "ng-template[slEventCalendarEvent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlEventCalendarEvent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slEventCalendarEvent]', standalone: true }]
+        }] });
+/** Given, the family opens its own popover with this content, anchored to the event. */
+class SlEventCalendarDetail {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlEventCalendarDetail, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlEventCalendarDetail, isStandalone: true, selector: "ng-template[slEventCalendarDetail]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlEventCalendarDetail, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slEventCalendarDetail]', standalone: true }]
+        }] });
+/** The consumer's content for a day: a price, a count of free slots, a holiday. */
+/**
+ * The items of the menu a secondary click, a long press or `Shift+F10` opens on
+ * the grid — `slMenuItem`, `sl-menu-separator`, a nested menu — for the
+ * target. `slEventCalendarContextMenuFor` narrows the targets that have a
+ * menu; the others keep the browser's own.
+ */
+class SlEventCalendarContextMenu {
+    template = inject(TemplateRef);
+    for = input(() => true, { ...(ngDevMode ? { debugName: "for" } : /* istanbul ignore next */ {}), alias: 'slEventCalendarContextMenuFor' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlEventCalendarContextMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlEventCalendarContextMenu, isStandalone: true, selector: "ng-template[slEventCalendarContextMenu]", inputs: { for: { classPropertyName: "for", publicName: "slEventCalendarContextMenuFor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlEventCalendarContextMenu, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slEventCalendarContextMenu]', standalone: true }]
+        }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "slEventCalendarContextMenuFor", required: false }] }] } });
+class SlEventCalendarDayContent {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlEventCalendarDayContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlEventCalendarDayContent, isStandalone: true, selector: "ng-template[slEventCalendarDayContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlEventCalendarDayContent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slEventCalendarDayContent]', standalone: true }]
+        }] });
+/** The consumer's controls, at the end of the header. */
+class SlEventCalendarActions {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlEventCalendarActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlEventCalendarActions, isStandalone: true, selector: "[slEventCalendarActions]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlEventCalendarActions, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slEventCalendarActions]', standalone: true }]
+        }] });
+/** The action under the list's empty sentence — the one that creates an event. */
+class SlEventCalendarEmpty {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlEventCalendarEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlEventCalendarEmpty, isStandalone: true, selector: "[slEventCalendarEmpty]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlEventCalendarEmpty, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slEventCalendarEmpty]', standalone: true }]
+        }] });
+/** A message and a retry, above the grid. The grid stays usable. */
+class SlEventCalendarError {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlEventCalendarError, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlEventCalendarError, isStandalone: true, selector: "[slEventCalendarError]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlEventCalendarError, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slEventCalendarError]', standalone: true }]
+        }] });
+
+/** A block shorter than this puts its time beside its title, on one line. */
+const SHORT_MINUTES = 45;
+/** The shortest block drawn, in minutes, which decides whether two short events touch. */
+const MIN_BLOCK_MINUTES = 20;
+const fullDate = (locale, date) => new Intl.DateTimeFormat(locale, {
+    timeZone: 'UTC',
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+}).format(new Date(Date.UTC(date.year, date.month - 1, date.day)));
+const weekday = (locale, date, style) => new Intl.DateTimeFormat(locale, { timeZone: 'UTC', weekday: style }).format(new Date(Date.UTC(date.year, date.month - 1, date.day)));
+const minutesOf = (value) => secondsOfDay(value.time) / 60;
+/** The time an occurrence shows on one day. */
+function timeLabel(input, occurrence, date) {
+    if (occurrence.allDay)
+        return input.t('allDay');
+    const options = { locale: input.locale, hourCycle: input.hourCycle };
+    const { start, end } = occurrenceTimes(occurrence, date);
+    if (start !== null && end !== null)
+        return formatTimeRange(start, end, options);
+    if (start !== null)
+        return input.t('from', { time: formatTime(start, options) });
+    if (end !== null)
+        return input.t('until', { time: formatTime(end, options) });
+    return input.t('allDay');
+}
+function metaText(input, occurrence, continued) {
+    const parts = [
+        formatOccurrence(occurrence, { locale: input.locale, hourCycle: input.hourCycle }),
+        occurrence.allDay ? input.t('allDay') : undefined,
+        input.calendars.find((entry) => entry.key === occurrence.event.calendar)?.label,
+        occurrence.event.status === 'tentative' ? input.t('tentative') : undefined,
+        occurrence.event.status === 'cancelled' ? input.t('cancelled') : undefined,
+        occurrence.recurring ? input.t('recurring') : undefined,
+        continued ? input.t('continues') : undefined,
+    ].filter((part) => part !== undefined && part !== '');
+    /* A list of descriptors, written the way the locale in force lists them. */
+    return `, ${new Intl.ListFormat(input.locale, { type: 'unit' }).format(parts)}`;
+}
+function eventView(input, occurrence, date, layout, flags = {}) {
+    const { event } = occurrence;
+    const color = calendarColor(event.calendar, input.calendars);
+    const bar = layout === 'bar';
+    const options = { locale: input.locale, hourCycle: input.hourCycle };
+    const time = bar && occurrence.allDay
+        ? null
+        : layout === 'lane' || bar
+            ? formatTime(occurrence.start.time, options)
+            : timeLabel(input, occurrence, date);
+    const editable = layout !== 'list' && input.canEdit(occurrence);
+    const resizable = editable &&
+        (layout === 'block'
+            ? flags.clippedEnd !== true && flags.continuesAfter !== true
+            : bar && flags.continuesAfter !== true);
+    return {
+        key: occurrence.key,
+        occurrence,
+        layout,
+        date,
+        href: event.href ?? null,
+        color: color === null ? null : String(color),
+        status: event.status === undefined || event.status === 'confirmed' ? null : event.status,
+        allDay: occurrence.allDay,
+        bar,
+        open: input.openKey === occurrence.key,
+        continuesBefore: flags.continuesBefore === true,
+        continuesAfter: flags.continuesAfter === true,
+        clippedStart: flags.clippedStart === true,
+        clippedEnd: flags.clippedEnd === true,
+        short: flags.short === true,
+        past: input.now !== null && compareDateTime(occurrence.end, input.now) <= 0,
+        editable,
+        dragging: input.draggingKey === occurrence.key,
+        dropInvalid: input.draggingKey === occurrence.key && input.dropInvalid,
+        context: input.contextKey === occurrence.key,
+        resizable,
+        time,
+        title: event.title,
+        location: flags.withLocation === true ? (event.location ?? null) : null,
+        meta: metaText(input, occurrence, flags.continuesBefore === true),
+        style: flags.style ?? {},
+    };
+}
+function holdsDay(selection, date) {
+    if (selection === null || isPlainDateTime(selection.start))
+        return false;
+    const { start, end } = selection;
+    return compareDate(date, start) >= 0 && compareDate(date, end) <= 0;
+}
+function drawMonth(input, weeks, occurrences) {
+    const first = weeks[0] ?? [];
+    return {
+        weekdays: first.map((date) => ({
+            key: toISODate(date),
+            short: weekday(input.locale, date, 'short'),
+            long: weekday(input.locale, date, 'long'),
+        })),
+        rows: weeks.map((week) => {
+            const { segments } = layoutRow(occurrences, week, {});
+            const hidden = overflowByDay(segments, week.length, input.maxEvents);
+            return {
+                key: toISODate(week[0]),
+                weekNumber: isoWeekNumber(week[0]),
+                cells: week.map((date, index) => {
+                    const shown = segments.filter((segment) => segment.start === index && segment.lane < input.maxEvents);
+                    const continuing = segments.filter((segment) => segment.start < index &&
+                        segment.start + segment.span > index &&
+                        segment.lane < input.maxEvents);
+                    const more = hidden[index] ?? 0;
+                    return {
+                        iso: toISODate(date),
+                        date,
+                        label: fullDate(input.locale, date),
+                        count: input.t('events', { count: occurrencesOn(occurrences, date).length }),
+                        tabIndex: isSameDate(date, input.date) ? 0 : -1,
+                        today: input.today !== null && isSameDate(date, input.today),
+                        outside: date.month !== input.date.month,
+                        nonWorking: !isWorkingDay(date, input.workingHours),
+                        selected: holdsDay(input.selection, date),
+                        events: shown.map((segment) => {
+                            const bar = segment.occurrence.allDay || isMultiDay(segment.occurrence);
+                            return eventView(input, segment.occurrence, date, bar ? 'bar' : 'lane', {
+                                continuesBefore: segment.continuesBefore,
+                                continuesAfter: segment.continuesAfter,
+                                style: bar
+                                    ? {
+                                        '--slotted-event-lane': segment.lane + 1,
+                                        '--slotted-event-span': segment.span,
+                                    }
+                                    : { '--slotted-event-lane': segment.lane + 1 },
+                            });
+                        }),
+                        continuations: continuing.map((segment) => input.t('titleContinues', { title: segment.occurrence.event.title })),
+                        more,
+                        moreLabel: input.t('moreEvents', { count: more }),
+                    };
+                }),
+            };
+        }),
+    };
+}
+function drawTimeGrid(input, days, occurrences) {
+    const [startHour, endHour] = input.dayHours;
+    const options = { locale: input.locale, hourCycle: input.hourCycle };
+    const { segments, lanes } = layoutRow(occurrences, days, { allDayOnly: true });
+    const isToday = (date) => input.today !== null && isSameDate(date, input.today);
+    const tabDay = (date) => isSameDate(date, input.date);
+    const selection = input.selection;
+    return {
+        days: days.length,
+        zone: zoneLabel(days[0], input.timeZone, input.locale),
+        lanes: Math.max(1, lanes),
+        hours: Array.from({ length: Math.max(0, endHour - startHour) }, (_, index) => ({
+            hour: startHour + index,
+            label: formatHour(startHour + index, options),
+        })),
+        headers: days.map((date) => {
+            const change = offsetChangeOn(date, input.timeZone);
+            const slots = change === null
+                ? null
+                : {
+                    direction: change.minutes > 0 ? 'forward' : 'back',
+                    hours: Math.abs(change.minutes) / 60,
+                    at: formatTime(change.at, options),
+                };
+            return {
+                iso: toISODate(date),
+                date,
+                weekday: weekday(input.locale, date, 'short'),
+                label: fullDate(input.locale, date),
+                tabIndex: input.row === 'header' && tabDay(date) ? 0 : -1,
+                today: isToday(date),
+                offsetShort: slots === null ? null : input.t('offsetChangeShort', slots),
+                offsetLong: slots === null ? null : input.t('offsetChange', slots),
+            };
+        }),
+        allDay: days.map((date, index) => ({
+            iso: toISODate(date),
+            date,
+            tabIndex: input.row === 'all-day' && tabDay(date) ? 0 : -1,
+            today: isToday(date),
+            nonWorking: !isWorkingDay(date, input.workingHours),
+            selected: holdsDay(selection, date),
+            events: segments
+                .filter((segment) => segment.start === index)
+                .map((segment) => eventView(input, segment.occurrence, date, 'bar', {
+                continuesBefore: segment.continuesBefore,
+                continuesAfter: segment.continuesAfter,
+                style: {
+                    '--slotted-event-lane': segment.lane + 1,
+                    '--slotted-event-span': segment.span,
+                },
+            })),
+            continuations: segments
+                .filter((segment) => segment.start < index && segment.start + segment.span > index)
+                .map((segment) => input.t('titleContinues', { title: segment.occurrence.event.title })),
+        })),
+        columns: days.map((date) => {
+            const { items, more } = layoutColumn(occurrences, date, {
+                startHour,
+                endHour,
+                maxColumns: input.maxColumns,
+                minLength: MIN_BLOCK_MINUTES,
+            });
+            const change = offsetChangeOn(date, input.timeZone);
+            const now = input.now !== null && isSameDate(input.now.date, date) ? minutesOf(input.now) : null;
+            const timed = selection !== null &&
+                isPlainDateTime(selection.start) &&
+                isSameDate(selection.start.date, date)
+                ? selection
+                : null;
+            return {
+                iso: toISODate(date),
+                date,
+                tabIndex: input.row === 'timed' && tabDay(date) ? 0 : -1,
+                today: isToday(date),
+                nonWorking: !isWorkingDay(date, input.workingHours),
+                offHours: offHoursOn(date, input.workingHours, { startHour, endHour }).map((entry) => ({
+                    '--slotted-event-start': entry.start,
+                    '--slotted-event-length': entry.length,
+                })),
+                offsetLine: change === null
+                    ? null
+                    : { '--slotted-event-start': change.at.hour * 60 + change.at.minute - startHour * 60 },
+                selection: timed === null
+                    ? null
+                    : {
+                        style: {
+                            '--slotted-event-start': minutesOf(timed.start) - startHour * 60,
+                            '--slotted-event-length': (isSameDate(timed.end.date, date) ? minutesOf(timed.end) : 1440) -
+                                minutesOf(timed.start),
+                        },
+                        text: formatTimeRange(timed.start.time, timed.end.time, options),
+                    },
+                items: items.map((item) => eventView(input, item.occurrence, date, 'block', {
+                    continuesBefore: item.continuesBefore,
+                    continuesAfter: item.continuesAfter,
+                    clippedStart: item.clippedStart,
+                    clippedEnd: item.clippedEnd,
+                    short: item.length < SHORT_MINUTES,
+                    withLocation: item.length >= SHORT_MINUTES,
+                    style: {
+                        '--slotted-event-start': item.start,
+                        '--slotted-event-length': item.length,
+                        '--slotted-event-column': item.column,
+                        '--slotted-event-columns': item.columns,
+                        '--slotted-event-span': item.span,
+                    },
+                })),
+                more: more.map((entry) => ({
+                    count: entry.occurrences.length,
+                    overlay: entry.overlay,
+                    label: input.t('moreEvents', { count: entry.occurrences.length }),
+                    style: {
+                        '--slotted-event-start': entry.start,
+                        '--slotted-event-length': entry.length,
+                        '--slotted-event-column': entry.column,
+                        '--slotted-event-columns': entry.columns,
+                        '--slotted-event-span': 1,
+                    },
+                })),
+                now: now === null || now < startHour * 60 || now > endHour * 60
+                    ? null
+                    : { '--slotted-event-start': now - startHour * 60 },
+            };
+        }),
+    };
+}
+function drawList(input, days, occurrences) {
+    return listDays(occurrences, days).map((day) => ({
+        iso: toISODate(day.date),
+        headingId: `${input.id}-list-${toISODate(day.date)}`,
+        heading: listDayParts(day.date, input.locale),
+        today: input.today !== null && isSameDate(day.date, input.today),
+        events: day.occurrences.map((occurrence) => eventView(input, occurrence, day.date, 'list', { withLocation: true })),
+    }));
+}
+
+const ALL_VIEWS = ['month', 'week', 'day', 'list'];
+const WIDGETS = "[data-part='day-number'], [data-part='event'], [data-part='more']";
+let sequence = 0;
+const sameKeys = (a, b) => a.length === b.length && a.every((key, index) => key === b[index]);
+function sameSelection(a, b) {
+    if (a === null || b === null)
+        return a === b;
+    if (isPlainDateTime(a.start) !== isPlainDateTime(b.start))
+        return false;
+    if (isPlainDateTime(a.start)) {
+        return (compareDateTime(a.start, b.start) === 0 &&
+            compareDateTime(a.end, b.end) === 0);
+    }
+    return (compareDate(a.start, b.start) === 0 &&
+        compareDate(a.end, b.end) === 0);
+}
+const orderedDays = (a, b) => compareDate(a, b) <= 0 ? { start: a, end: b } : { start: b, end: a };
+/** A minute of `date`; 1440 is 00:00 of the day after, where an exclusive end lands. */
+const atMinutes = (date, minutes) => minutes >= 1440
+    ? plainDateTime(addDays(date, 1), timeOfSeconds(0))
+    : plainDateTime(date, timeOfSeconds(Math.max(0, minutes) * 60));
+/**
+ * The day under a point, in one row of the grid, found by the cells' boxes.
+ * The day of the cell that holds an event is not it: a bar lives in its first
+ * day's cell, so a bar picked up by its middle measured every move from its
+ * start and travelled the days in between twice. Columns and the all-day row
+ * are vertical strips and answer by the horizontal position alone, so a hand
+ * that drifts off the row keeps its day; a month cell answers by both.
+ */
+function dayUnder(root, row, x, y) {
+    for (const cell of root.querySelectorAll(`[data-row='${row}'][data-date]`)) {
+        const box = cell.getBoundingClientRect();
+        const across = x >= box.left && x < box.right;
+        if (across && (row !== 'day' || (y >= box.top && y < box.bottom))) {
+            return parseIso(cell.dataset['date'] ?? '');
+        }
+    }
+    return null;
+}
+const sameChange = (a, b) => JSON.stringify([a.start, a.end]) === JSON.stringify([b.start, b.end]);
+const parseIso = (iso) => {
+    const [year, month, day] = iso.split('-').map(Number);
+    return { year, month, day };
+};
+/** One request: value, previous, reason, source, cancellable, not emitted for an equal value. */
+function ask(current, next, equals, reason, source, emit) {
+    if (equals(current, next))
+        return false;
+    let cancelled = false;
+    emit({
+        value: next,
+        previous: current,
+        reason,
+        source,
+        get cancelled() {
+            return cancelled;
+        },
+        cancel() {
+            cancelled = true;
+        },
+    });
+    return !cancelled;
+}
+const pressReason = (event) => (event.detail === 0 ? 'keyboard' : 'pointer');
+/**
+ * A calendar of events: month, week, day and list, over wall-clock values.
+ *
+ * **The events are the consumer's.** The family expands their recurrence, lays
+ * them out and asks, with a reason, to move the date, the view, the calendars
+ * in view, the chosen stretch of time and the open event. Each is a `model()`
+ * with a `…Request` output carrying the `ChangeRequest`, which the consumer can
+ * cancel before anything commits.
+ *
+ * **The grid is a layout grid from the APG with the day as its cell.** One cell
+ * holds the tab stop; arrows move the day; Enter goes into the day's events and
+ * Escape comes back out. The list is not a grid: every event is in the tab
+ * order, under a heading per day.
+ *
+ * **Below the compact size class the month and the week are a list** of the
+ * same days, without the view changing.
+ *
+ * It is not a form control: nothing it holds is a submitted value, so it
+ * implements no `ControlValueAccessor`.
+ */
+class SlEventCalendar {
+    events = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
+    calendars = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendars" }] : /* istanbul ignore next */ []));
+    /** The views the switcher offers, in order. */
+    views = input(ALL_VIEWS, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "views" }] : /* istanbul ignore next */ []));
+    /** The day the calendar is on. Two-way. */
+    date = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
+    defaultDate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultDate" }] : /* istanbul ignore next */ []));
+    view = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    defaultView = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultView" }] : /* istanbul ignore next */ []));
+    /** Keys of the calendars drawn. Unbound starts with all of them. */
+    visibleCalendars = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleCalendars" }] : /* istanbul ignore next */ []));
+    defaultVisibleCalendars = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultVisibleCalendars" }] : /* istanbul ignore next */ []));
+    selectionMode = input('none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    selection = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    defaultSelection = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultSelection" }] : /* istanbul ignore next */ []));
+    /** The key of the occurrence whose detail is open. */
+    openEvent = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openEvent" }] : /* istanbul ignore next */ []));
+    defaultOpenEvent = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultOpenEvent" }] : /* istanbul ignore next */ []));
+    /** Keeps an occurrence when it returns true — a search, a `filter-bar` predicate. */
+    filter = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    /** Events move and resize, by dragging or by Alt and the arrows; a predicate decides per occurrence. */
+    editable = input(false, { ...(ngDevMode ? { debugName: "editable" } : /* istanbul ignore next */ {}), transform: (value) => typeof value === 'function'
+            ? value
+            : booleanAttribute(value) });
+    workingHours = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "workingHours" }] : /* istanbul ignore next */ []));
+    header = input(true, { ...(ngDevMode ? { debugName: "header" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    level = input(2, { ...(ngDevMode ? { debugName: "level" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    compact = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    dayHours = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dayHours" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input(undefined, { ...(ngDevMode ? { debugName: "firstDayOfWeek" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null ? undefined : numberAttribute(value) });
+    fixedWeeks = input(undefined, { ...(ngDevMode ? { debugName: "fixedWeeks" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    hourCycle = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourCycle" }] : /* istanbul ignore next */ []));
+    listRange = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listRange" }] : /* istanbul ignore next */ []));
+    loadingDelay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingDelay" }] : /* istanbul ignore next */ []));
+    loadingMinDuration = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingMinDuration" }] : /* istanbul ignore next */ []));
+    /** BCP 47. Unset, the language in force (`provideSlotted`) decides. */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * toolbar, the views, the empty and loading states, the counts and the
+     * sentences said aloud.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    maxColumns = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxColumns" }] : /* istanbul ignore next */ []));
+    maxEvents = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxEvents" }] : /* istanbul ignore next */ []));
+    scrollTime = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollTime" }] : /* istanbul ignore next */ []));
+    /** Minutes, 5 to 120: the lighter rules and the step of a selection or a drag. */
+    slotDuration = input(undefined, { ...(ngDevMode ? { debugName: "slotDuration" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null ? undefined : numberAttribute(value) });
+    timeZone = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
+    weekends = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekends" }] : /* istanbul ignore next */ []));
+    weekNumbers = input(undefined, { ...(ngDevMode ? { debugName: "weekNumbers" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    dateRequest = output();
+    viewRequest = output();
+    visibleCalendarsRequest = output();
+    selectionRequest = output();
+    openEventRequest = output();
+    /**
+     * Before an event moves or its end does. Not a model: the family holds no
+     * event, and the application answers by changing `events`.
+     */
+    eventChangeRequest = output();
+    /**
+     * Whether an event may land where it is being moved, asked with the change
+     * `eventChangeRequest` would carry: at every step of a drag, and at every
+     * step Alt and an arrow try. A refused destination is drawn as refused, and
+     * letting go there puts the event back and asks for nothing.
+     */
+    canDrop = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canDrop" }] : /* istanbul ignore next */ []));
+    /** A fact, after the period in view changes: fetch it. */
+    rangeChange = output();
+    eventContentTemplate = contentChild(SlEventCalendarEvent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "eventContentTemplate" }] : /* istanbul ignore next */ []));
+    detail = contentChild(SlEventCalendarDetail, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "detail" }] : /* istanbul ignore next */ []));
+    dayContent = contentChild(SlEventCalendarDayContent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dayContent" }] : /* istanbul ignore next */ []));
+    actions = contentChild(SlEventCalendarActions, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    empty = contentChild(SlEventCalendarEmpty, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+    errorContent = contentChild(SlEventCalendarError, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorContent" }] : /* istanbul ignore next */ []));
+    /* Read as the element: with a context menu the trigger component stands on it. */
+    body = viewChild('body', { ...(ngDevMode ? { debugName: "body" } : /* istanbul ignore next */ {}), read: ElementRef });
+    scroller = viewChild('scroller', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scroller" }] : /* istanbul ignore next */ []));
+    filterButton = viewChild('filterButton', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterButton" }] : /* istanbul ignore next */ []));
+    morePopover = viewChild('morePopover', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "morePopover" }] : /* istanbul ignore next */ []));
+    detailPopover = viewChild('detailPopover', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "detailPopover" }] : /* istanbul ignore next */ []));
+    defaults = injectEventCalendarDefaults();
+    host = inject(ElementRef).nativeElement;
+    injector = inject(Injector);
+    writtenLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    id = `sl-event-calendar-${String((sequence += 1))}`;
+    titleId = `${this.id}-title`;
+    /* ── Resolved options ──────────────────────────────────────────────── */
+    appLocale = injectLocale();
+    /** The family's words in the language in force, with this calendar's `messages` laid over them. */
+    t = injectMessages(eventCalendarMessages, this.messages);
+    localeValue = computed(() => this.locale() ?? this.appLocale(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "localeValue" }] : /* istanbul ignore next */ []));
+    zoneValue = computed(() => this.timeZone() ?? this.defaults.timeZone, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoneValue" }] : /* istanbul ignore next */ []));
+    cycleValue = computed(() => this.hourCycle() ?? this.defaults.hourCycle, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cycleValue" }] : /* istanbul ignore next */ []));
+    hoursValue = computed(() => this.dayHours() ?? this.defaults.dayHours, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoursValue" }] : /* istanbul ignore next */ []));
+    slotDurationValue = computed(() => slotMinutes(this.slotDuration() ?? this.defaults.slotDuration), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slotDurationValue" }] : /* istanbul ignore next */ []));
+    scrollValue = computed(() => this.scrollTime() ?? this.defaults.scrollTime, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollValue" }] : /* istanbul ignore next */ []));
+    maxEventsValue = computed(() => Math.max(1, this.maxEvents() ?? this.defaults.maxEvents), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxEventsValue" }] : /* istanbul ignore next */ []));
+    maxColumnsValue = computed(() => Math.max(2, this.maxColumns() ?? this.defaults.maxColumns), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxColumnsValue" }] : /* istanbul ignore next */ []));
+    /**
+     * As many columns as blocks of 64 pixels — a word of a wrapped title and its
+     * padding — fit in a day's column, never more than `maxColumns`; with one,
+     * the first column's events are drawn whole and the rest is a count laid
+     * over them. The event's container query has already hidden the time at
+     * this width.
+     */
+    columnsThatFit = computed(() => {
+        const width = this.columnWidth();
+        const most = this.maxColumnsValue();
+        return width === null ? most : Math.max(1, Math.min(most, Math.floor(width / 64)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnsThatFit" }] : /* istanbul ignore next */ []));
+    weekNumbersValue = computed(() => this.weekNumbers() ?? this.defaults.weekNumbers, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekNumbersValue" }] : /* istanbul ignore next */ []));
+    loadingDelayValue = computed(() => this.loadingDelay() ?? this.defaults.loadingDelay, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingDelayValue" }] : /* istanbul ignore next */ []));
+    loadingMinDurationValue = computed(() => this.loadingMinDuration() ?? this.defaults.loadingMinDuration, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingMinDurationValue" }] : /* istanbul ignore next */ []));
+    viewOptions = computed(() => ({
+        firstDayOfWeek: createDateFormat({
+            locale: this.localeValue(),
+            firstDayOfWeek: this.firstDayOfWeek() ?? this.defaults.firstDayOfWeek,
+        }).firstDayOfWeek,
+        weekends: this.weekends() ?? this.defaults.weekends,
+        fixedWeeks: this.fixedWeeks() ?? this.defaults.fixedWeeks,
+        listRange: this.listRange() ?? this.defaults.listRange,
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewOptions" }] : /* istanbul ignore next */ []));
+    /* ── The five models ───────────────────────────────────────────────── */
+    firstDate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstDate" }] : /* istanbul ignore next */ []));
+    currentDate = computed(() => this.date() ?? this.firstDate() ?? todayIn(this.zoneValue()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentDate" }] : /* istanbul ignore next */ []));
+    /** Which view is showing. Public, so a template reaches it through `exportAs`. */
+    currentView = computed(() => this.view() ?? this.defaultView() ?? this.views()[0] ?? 'month', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentView" }] : /* istanbul ignore next */ []));
+    shown = computed(() => this.visibleCalendars() ??
+        this.defaultVisibleCalendars() ??
+        this.calendars().map((entry) => entry.key), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    currentSelection = computed(() => {
+        const held = this.selection();
+        return held === undefined ? (this.defaultSelection() ?? null) : held;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentSelection" }] : /* istanbul ignore next */ []));
+    currentOpen = computed(() => {
+        const held = this.openEvent();
+        return held === undefined ? (this.defaultOpenEvent() ?? null) : held;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentOpen" }] : /* istanbul ignore next */ []));
+    /* ── Time ──────────────────────────────────────────────────────────── */
+    now = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "now" }] : /* istanbul ignore next */ []));
+    today = computed(() => this.now()?.date ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
+    narrow = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
+    row = signal('timed', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    pending = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
+    moreDate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moreDate" }] : /* istanbul ignore next */ []));
+    moreIso = computed(() => {
+        const date = this.moreDate();
+        return date === null ? null : toISODate(date);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moreIso" }] : /* istanbul ignore next */ []));
+    detailAnchor = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "detailAnchor" }] : /* istanbul ignore next */ []));
+    /** The "+N" or the day number a day's sheet returns focus to. */
+    moreAnchor = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moreAnchor" }] : /* istanbul ignore next */ []));
+    layout = computed(() => {
+        const view = this.currentView();
+        const compact = this.compact() ?? this.defaults.compact;
+        return view === 'list' ||
+            (this.narrow() && compact === 'list' && (view === 'month' || view === 'week'))
+            ? 'list'
+            : 'grid';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    range = computed(() => {
+        const view = this.currentView();
+        const date = this.currentDate();
+        const options = this.viewOptions();
+        return this.layout() === 'list' && view !== 'list'
+            ? viewRange('list', date, { ...options, listRange: view === 'month' ? 'month' : 'week' })
+            : viewRange(view, date, options);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    collator = computed(() => new Intl.Collator(this.localeValue()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collator" }] : /* istanbul ignore next */ []));
+    occurrences = computed(() => {
+        const range = this.range();
+        const keys = this.calendars().map((entry) => entry.key);
+        const shown = this.shown();
+        const filter = this.filter();
+        return occurrencesIn(this.events(), range.start, range.end, {
+            collator: this.collator(),
+        }).filter((occurrence) => (occurrence.event.calendar === undefined ||
+            !keys.includes(occurrence.event.calendar) ||
+            shown.includes(occurrence.event.calendar)) &&
+            (filter === undefined || filter(occurrence)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "occurrences" }] : /* istanbul ignore next */ []));
+    canEdit = computed(() => {
+        const editable = this.editable();
+        return typeof editable === 'function' ? editable : () => editable;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+    /**
+     * The occurrence a pointer is moving, drawn where it would land: the views
+     * lay the proposal out like any other placement, so a moved block takes its
+     * columns and pushes its neighbours as it will once the application agrees.
+     */
+    editing = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
+    laidOut = computed(() => {
+        const editing = this.editing();
+        const occurrences = this.occurrences();
+        return editing === null
+            ? occurrences
+            : withPlacement(occurrences, editing.key, editing.placement);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "laidOut" }] : /* istanbul ignore next */ []));
+    title = computed(() => viewTitle(this.currentView(), this.range(), this.currentDate(), {
+        locale: this.localeValue(),
+        listRange: this.currentView() === 'list' ? this.viewOptions().listRange : undefined,
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    drawingInput = computed(() => ({
+        id: this.id,
+        t: this.t,
+        locale: this.localeValue(),
+        hourCycle: this.cycleValue(),
+        timeZone: this.zoneValue(),
+        view: this.currentView(),
+        date: this.currentDate(),
+        today: this.today(),
+        now: this.now(),
+        calendars: this.calendars(),
+        openKey: this.currentOpen(),
+        selection: this.pending() ?? this.contextSlot() ?? this.currentSelection(),
+        narrow: this.narrow(),
+        maxEvents: this.maxEventsValue(),
+        maxColumns: this.columnsThatFit(),
+        dayHours: this.hoursValue(),
+        workingHours: this.workingHours(),
+        row: this.row(),
+        canEdit: this.canEdit(),
+        draggingKey: this.editing()?.key ?? null,
+        dropInvalid: this.editing()?.invalid ?? false,
+        contextKey: this.contextKey(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawingInput" }] : /* istanbul ignore next */ []));
+    monthDrawing = computed(() => drawMonth(this.drawingInput(), this.range().weeks, this.laidOut()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthDrawing" }] : /* istanbul ignore next */ []));
+    timeDrawing = computed(() => drawTimeGrid(this.drawingInput(), this.range().days, this.laidOut()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeDrawing" }] : /* istanbul ignore next */ []));
+    listDrawing = computed(() => drawList(this.drawingInput(), this.range().days, this.laidOut()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listDrawing" }] : /* istanbul ignore next */ []));
+    moreViews = computed(() => {
+        const date = this.moreDate();
+        if (date === null)
+            return [];
+        return (drawList(this.drawingInput(), [date], occurrencesOn(this.occurrences(), date))[0]?.events ??
+            []);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moreViews" }] : /* istanbul ignore next */ []));
+    openOccurrence = computed(() => {
+        const key = this.currentOpen();
+        return key === null ? null : (this.occurrences().find((entry) => entry.key === key) ?? null);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openOccurrence" }] : /* istanbul ignore next */ []));
+    hostsDetail = computed(() => this.detail() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostsDetail" }] : /* istanbul ignore next */ []));
+    emptyKey = computed(() => this.currentView() === 'month' ? 'month' : this.currentView() === 'day' ? 'day' : 'week', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyKey" }] : /* istanbul ignore next */ []));
+    /** The empty state's sentence for the period in view. */
+    emptyText = computed(() => this.t(`empty.${this.emptyKey()}`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    /** The names of the two steps, which say how far each one moves. */
+    previousLabel = computed(() => this.t(`previous.${this.currentView()}`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previousLabel" }] : /* istanbul ignore next */ []));
+    nextLabel = computed(() => this.t(`next.${this.currentView()}`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
+    /** A view's name in the switcher. */
+    viewLabel(view) {
+        return this.t(`view.${view}`);
+    }
+    /**
+     * The indicator exists while there is a wait, and a little after: through
+     * the delay it may still be withheld in, and the hold it keeps once shown.
+     * Mounted with nothing to report it was an element that is only `hidden`,
+     * and a `hidden` progress bar is still painted in its linear shape.
+     */
+    loaderMounted = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loaderMounted" }] : /* istanbul ignore next */ []));
+    /** One day's column, measured: a cluster never draws blocks too narrow for a word. */
+    columnWidth = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnWidth" }] : /* istanbul ignore next */ []));
+    selectionAnchor = null;
+    drag = null;
+    edit = null;
+    /** A drag ends in a click on the event it moved; that click opens nothing. */
+    swallowClick = false;
+    closeDetail = () => this.requestOpen(null, 'programmatic');
+    /* ── Context menu ──────────────────────────────────────────────────── */
+    contextMenu = contentChild(SlEventCalendarContextMenu, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contextMenu" }] : /* istanbul ignore next */ []));
+    contextMenuRef = viewChild('contextMenuRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contextMenuRef" }] : /* istanbul ignore next */ []));
+    /* The items are the application's template, declared outside the menu: an
+       embedded view injects from where it was declared, so the menu is given
+       to them. */
+    contextInjector = computed(() => {
+        const menu = this.contextMenuRef();
+        return menu === undefined
+            ? null
+            : Injector.create({
+                providers: [{ provide: SlMenu, useValue: menu }],
+                parent: this.injector,
+            });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contextInjector" }] : /* istanbul ignore next */ []));
+    /**
+     * The target of the menu that shows, and the element it stands on. Its event
+     * carries `data-context`; its stretch is drawn as the selection being made,
+     * so the reader sees what "New event" will cover before choosing it.
+     */
+    contextOn = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contextOn" }] : /* istanbul ignore next */ []));
+    /* What the press that is opening the menu pointed at, resolved before the
+       family asks to open; the request is refused when it pointed at nothing. */
+    aimed = null;
+    contextKey = computed(() => {
+        const on = this.contextOn();
+        return on?.target.kind === 'event' ? on.target.occurrence.key : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contextKey" }] : /* istanbul ignore next */ []));
+    contextSlot = computed(() => {
+        const on = this.contextOn();
+        return on?.target.kind === 'slot' ? on.target.slot : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contextSlot" }] : /* istanbul ignore next */ []));
+    contextLabel = computed(() => {
+        const on = this.contextOn();
+        if (on === null)
+            return undefined;
+        return on.target.kind === 'event'
+            ? on.target.occurrence.event.title
+            : this.stretchWords(on.target.slot);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contextLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        /* Now, ticked on the minute after the first paint. */
+        afterNextRender(() => {
+            let timer;
+            const tick = () => {
+                this.now.set(nowDateTimeIn(this.zoneValue()));
+                timer = setTimeout(tick, 60_000 - (Date.now() % 60_000));
+            };
+            tick();
+            const gate = createWidthGate(this.host, {
+                at: COMPACT_BELOW,
+                onChange: (narrow) => this.narrow.set(narrow),
+            });
+            this.narrow.set(gate.narrow());
+            destroyRef.onDestroy(() => {
+                clearTimeout(timer);
+                gate.destroy();
+            });
+        });
+        /* The period in view, reported after it changes. */
+        let reported = null;
+        effect(() => {
+            const range = this.range();
+            const view = this.currentView();
+            const key = `${toISODate(range.start)}/${toISODate(range.end)}/${view}`;
+            if (key === reported)
+                return;
+            reported = key;
+            untracked(() => this.rangeChange.emit({ start: range.start, end: range.end, view }));
+        });
+        /* `slMenuTriggerFor` binds `data-part` to null on its own element, which
+           erases the part this family wrote; the expression is a constant, so the
+           part written back after the first render stays. */
+        afterRenderEffect(() => {
+            const button = this.filterButton()?.nativeElement;
+            if (button !== undefined && button.getAttribute('data-part') !== 'filter') {
+                button.setAttribute('data-part', 'filter');
+            }
+        });
+        /* The detail stands on the event that opened it, or on the "+N" it came from. */
+        afterRenderEffect(() => {
+            const popover = this.detailPopover();
+            const key = this.currentOpen();
+            if (popover === undefined || key === null)
+                return;
+            const drawn = this.eventElement(key);
+            popover.anchorNode.set(drawn ?? this.detailAnchor());
+        });
+        /* Entering the hours scrolls to the working morning; paging keeps the place. */
+        let enteredHours = false;
+        afterRenderEffect(() => {
+            const inHours = this.layout() === 'grid' && (this.currentView() === 'week' || this.currentView() === 'day');
+            if (inHours && !enteredHours)
+                untracked(() => this.scrollToTime(this.scrollValue()));
+            enteredHours = inHours;
+        });
+        effect((onCleanup) => {
+            if (this.loading()) {
+                this.loaderMounted.set(true);
+                return;
+            }
+            const timer = setTimeout(() => this.loaderMounted.set(false), untracked(() => this.loadingDelayValue() + this.loadingMinDurationValue()));
+            onCleanup(() => clearTimeout(timer));
+        });
+        let observer = null;
+        let observed = null;
+        afterRenderEffect(() => {
+            this.currentView();
+            const column = this.scroller()?.nativeElement.querySelector("[data-part='column']") ?? null;
+            if (column === observed)
+                return;
+            observer?.disconnect();
+            observed = column;
+            if (column === null || typeof ResizeObserver === 'undefined') {
+                untracked(() => this.columnWidth.set(null));
+                return;
+            }
+            const measure = () => this.columnWidth.set(column.getBoundingClientRect().width || null);
+            observer = new ResizeObserver(measure);
+            observer.observe(column);
+            untracked(measure);
+        });
+        destroyRef.onDestroy(() => observer?.disconnect());
+        /* A template binds no capture phase; the click a drag ends in is stopped here. */
+        this.host.addEventListener('click', this.onClickCapture, true);
+        this.host.addEventListener('contextmenu', this.onContextCapture, true);
+        this.host.addEventListener('keydown', this.onContextKeyCapture, true);
+        this.host.addEventListener('pointerdown', this.onPressCapture, true);
+        destroyRef.onDestroy(() => {
+            this.host.removeEventListener('click', this.onClickCapture, true);
+            this.host.removeEventListener('contextmenu', this.onContextCapture, true);
+            this.host.removeEventListener('keydown', this.onContextKeyCapture, true);
+            this.host.removeEventListener('pointerdown', this.onPressCapture, true);
+        });
+        /* One polite announcement per wait, after the delay the indicator waits. */
+        effect((onCleanup) => {
+            if (!this.loading())
+                return;
+            const words = untracked(() => this.t('loading'));
+            const timer = setTimeout(() => getLiveAnnouncer().announce(words), untracked(() => this.loadingDelayValue()));
+            onCleanup(() => clearTimeout(timer));
+        });
+    }
+    ngOnInit() {
+        this.firstDate.set(this.defaultDate() ?? todayIn(this.zoneValue()));
+        if (this.writtenLabel !== null)
+            this.host.setAttribute('aria-label', this.writtenLabel);
+    }
+    /* ── Requests ──────────────────────────────────────────────────────── */
+    requestDate(next, reason, source) {
+        const accepted = ask(this.currentDate(), next, isSameDate, reason, source, (request) => this.dateRequest.emit(request));
+        if (accepted)
+            this.date.set(next);
+        return accepted;
+    }
+    requestView(next, reason, source) {
+        const accepted = ask(this.currentView(), next, Object.is, reason, source, (request) => this.viewRequest.emit(request));
+        if (accepted)
+            this.view.set(next);
+        return accepted;
+    }
+    requestVisible(next, reason, source) {
+        const accepted = ask(this.shown(), next, sameKeys, reason, source, (request) => this.visibleCalendarsRequest.emit(request));
+        if (accepted)
+            this.visibleCalendars.set(next);
+        return accepted;
+    }
+    requestSelection(next, reason, source) {
+        const accepted = ask(this.currentSelection(), next, sameSelection, reason, source, (request) => this.selectionRequest.emit(request));
+        if (accepted)
+            this.selection.set(next);
+        return accepted;
+    }
+    requestOpen(next, reason, source) {
+        const accepted = ask(this.currentOpen(), next, Object.is, reason, source, (request) => this.openEventRequest.emit(request));
+        if (accepted)
+            this.openEvent.set(next);
+        return accepted;
+    }
+    /** The change the family would ask for: `canDrop` and `eventChangeRequest` read the same one. */
+    changeFor(occurrence, placement, kind) {
+        return {
+            key: occurrence.key,
+            event: occurrence.event,
+            occurrence: occurrence.start.date,
+            recurring: occurrence.recurring,
+            kind,
+            ...placeOccurrence(placement),
+        };
+    }
+    allows(occurrence, placement, kind) {
+        const canDrop = this.canDrop();
+        return canDrop === undefined || canDrop(this.changeFor(occurrence, placement, kind));
+    }
+    /** Asks the application to put an occurrence somewhere else; the family holds no event. */
+    requestEventChange(occurrence, placement, kind, reason, source) {
+        const change = (value) => this.changeFor(occurrence, value, kind);
+        const accepted = ask(change(placementOf(occurrence)), change(placement), sameChange, reason, source, (request) => this.eventChangeRequest.emit(request));
+        if (accepted) {
+            getLiveAnnouncer().announce(`${occurrence.event.title}, ${formatOccurrence({ ...occurrence, start: placement.start, end: placement.end }, { locale: this.localeValue(), hourCycle: this.cycleValue() })}`);
+        }
+        return accepted;
+    }
+    /* ── The imperative actions ────────────────────────────────────────── */
+    /** Puts focus on the cell holding the grid's tab stop, or the first event of a list. */
+    focus() {
+        const body = this.body()?.nativeElement;
+        (body?.querySelector("[data-row][tabindex='0']") ??
+            body?.querySelector("[data-part='event']"))?.focus();
+    }
+    /** Moves the calendar to a date and focuses its cell. */
+    focusDate(next) {
+        const row = this.currentView() === 'month' ? 'day' : this.row();
+        this.requestDate(next, 'programmatic');
+        this.focusCell(next, row);
+    }
+    /** Focuses an occurrence that is drawn, by key; returns whether one was. */
+    focusEvent(key) {
+        const element = this.eventElement(key);
+        element?.focus();
+        return element !== null;
+    }
+    /** Scrolls the hours so `time` is at the top. */
+    scrollToTime(time) {
+        const scroller = this.scroller()?.nativeElement;
+        const column = scroller?.querySelector("[data-part='column']");
+        if (scroller === undefined || column === null || column === undefined)
+            return;
+        const [startHour, endHour] = this.hoursValue();
+        const hourSize = column.getBoundingClientRect().height / Math.max(1, endHour - startHour);
+        /* Half a label above the hour: the label is centred on its rule, and a
+           scroll that stopped on the rule cut the first visible one in half. */
+        /* Half a line of the label's own type: its box is the whole hour. */
+        const label = scroller.querySelector("[data-part='hour']");
+        const lead = label === null ? 0 : parseFloat(getComputedStyle(label).lineHeight) / 2 || 0;
+        scroller.scrollTop = Math.max(0, (secondsOfDay(time) / 3600 - startHour) * hourSize - lead);
+    }
+    /* ── Template handlers ─────────────────────────────────────────────── */
+    swatch(key) {
+        const color = calendarColor(key, this.calendars());
+        return color === null ? 'currentColor' : `var(--slotted-data-${color})`;
+    }
+    /** When the open occurrence happens, as the two parts the detail writes. */
+    whenOf(occurrence) {
+        return occurrenceWhen(occurrence, { locale: this.localeValue(), hourCycle: this.cycleValue() });
+    }
+    dateLabel(date) {
+        return fullDate(this.localeValue(), date);
+    }
+    step(direction, event) {
+        this.requestDate(stepView(this.currentView(), this.currentDate(), direction, this.viewOptions()), pressReason(event), event);
+    }
+    goToday(event) {
+        this.requestDate(this.today() ?? todayIn(this.zoneValue()), pressReason(event), event);
+    }
+    onViewRequest(request) {
+        if (request.value === undefined)
+            return;
+        if (!this.requestView(request.value, request.reason, request.source)) {
+            request.cancel();
+        }
+    }
+    onCalendarRequest(key, request) {
+        const shown = this.shown();
+        const next = request.value
+            ? this.calendars()
+                .map((entry) => entry.key)
+                .filter((candidate) => candidate === key || shown.includes(candidate))
+            : shown.filter((candidate) => candidate !== key);
+        if (!this.requestVisible(next, request.reason, request.source))
+            request.cancel();
+    }
+    drill(date, event) {
+        /* A month of marks on a phone opens the day's events where the finger is,
+           as a sheet; the day view there is a list of one day. */
+        if (this.narrow() && this.currentView() === 'month' && this.layout() === 'grid') {
+            this.openMore(date, event);
+            return;
+        }
+        const reason = pressReason(event);
+        this.requestView('day', reason, event);
+        this.requestDate(date, reason, event);
+    }
+    activate(view, event) {
+        this.detailAnchor.set(event.currentTarget);
+        this.moreDate.set(null);
+        this.requestOpen(this.currentOpen() === view.key ? null : view.key, pressReason(event), event);
+    }
+    openMore(date, event) {
+        const held = this.moreDate();
+        if (held !== null && isSameDate(held, date)) {
+            this.moreDate.set(null);
+            return;
+        }
+        this.moreAnchor.set(event.currentTarget);
+        this.morePopover()?.anchorNode.set(event.currentTarget);
+        this.moreDate.set(date);
+    }
+    onMoreOpen(open) {
+        if (!open)
+            this.moreDate.set(null);
+    }
+    onDetailRequest(request) {
+        if (request.value)
+            return;
+        if (!this.requestOpen(null, request.reason, request.source))
+            request.cancel();
+    }
+    eventElement(key) {
+        return this.host.querySelector(`[data-part='event'][data-key='${CSS.escape(key)}']`);
+    }
+    focusCell(date, row) {
+        afterNextRender(() => {
+            this.body()
+                ?.nativeElement.querySelector(`[data-row='${row}'][data-date='${toISODate(date)}']`)
+                ?.focus();
+        }, { injector: this.injector });
+    }
+    /** A stretch in words: the day, its hours, or the first and the last day. */
+    stretchWords(next) {
+        const locale = this.localeValue();
+        return isPlainDateTime(next.start)
+            ? `${fullDate(locale, next.start.date)}, ${formatTimeRange(next.start.time, next.end.time, { locale, hourCycle: this.cycleValue() })}`
+            : isSameDate(next.start, next.end)
+                ? fullDate(locale, next.start)
+                : `${fullDate(locale, next.start)} – ${fullDate(locale, next.end)}`;
+    }
+    announce(next) {
+        getLiveAnnouncer().announce(this.t('selected', { text: this.stretchWords(next) }));
+    }
+    /* ── Selection by pointer ──────────────────────────────────────────── */
+    minuteAt(column, clientY) {
+        const [startHour, endHour] = this.hoursValue();
+        const slot = this.slotDurationValue();
+        const rect = column.getBoundingClientRect();
+        const raw = startHour * 60 +
+            ((clientY - rect.top) / Math.max(1, rect.height)) * (endHour - startHour) * 60;
+        return Math.min(endHour * 60, Math.max(startHour * 60, Math.floor(raw / slot) * slot));
+    }
+    /**
+     * The press is aimed before the `context-menu` family sees it — at an event,
+     * or at the stretch under the pointer. A press at nothing, or at a target
+     * the application gives no menu, is stopped here, so the family never
+     * prevents it and the browser's own menu opens.
+     */
+    aimAt(target, clientY) {
+        this.aimed = null;
+        const items = this.contextMenu();
+        const body = this.body()?.nativeElement;
+        /* Containment rather than `instanceof`: the node may carry another
+           window's constructors. */
+        if (items === undefined || body === undefined || target === null)
+            return null;
+        if (!body.contains(target))
+            return null;
+        const from = target;
+        const drawn = from.closest("[data-part='event'][data-key]");
+        const occurrence = drawn === null
+            ? undefined
+            : this.occurrences().find((entry) => entry.key === drawn.dataset['key']);
+        let found;
+        if (drawn !== null && occurrence !== undefined) {
+            found = { target: { kind: 'event', occurrence }, element: drawn };
+        }
+        else {
+            const cell = from.closest('[data-date]');
+            const iso = cell?.dataset['date'];
+            if (cell === null || cell === undefined || iso === undefined)
+                return null;
+            const [year, month, day] = iso.split('-').map(Number);
+            const timed = cell.dataset['row'] === 'timed';
+            const slot = contextSlot({
+                date: { year, month, day },
+                minute: timed && clientY !== null ? this.minuteAt(cell, clientY) : null,
+                timed,
+                held: this.pending() ?? this.currentSelection(),
+                slot: this.slotDurationValue(),
+                endMinute: this.hoursValue()[1] * 60,
+            });
+            /* From the keyboard a column is the height of the day: the menu hangs
+               from the selection drawn in it, or from the day's header. */
+            const element = timed && clientY === null
+                ? (cell.querySelector("[data-part='selection']") ??
+                    body.querySelector(`[data-part='column-header'][data-date='${iso}']`) ??
+                    cell)
+                : cell;
+            found = { target: { kind: 'slot', slot }, element };
+        }
+        if (!items.for()(found.target))
+            return null;
+        this.aimed = found;
+        return found;
+    }
+    onContextCapture = (event) => {
+        if (this.contextMenu() === undefined)
+            return;
+        if (this.aimAt(event.target, event.clientY) === null)
+            event.stopPropagation();
+    };
+    onContextKeyCapture = (event) => {
+        if (this.contextMenu() === undefined)
+            return;
+        if (event.key !== 'ContextMenu' && !(event.key === 'F10' && event.shiftKey))
+            return;
+        if (this.aimAt(event.target, null) === null)
+            event.stopPropagation();
+    };
+    onPressCapture = (event) => {
+        if (this.contextMenu() === undefined || event.pointerType === 'mouse')
+            return;
+        this.aimAt(event.target, event.clientY);
+    };
+    onContextRequest(request) {
+        if (!request.value) {
+            this.contextOn.set(null);
+            return;
+        }
+        const found = this.aimed;
+        if (found === null) {
+            request.cancel();
+            return;
+        }
+        this.contextOn.set(found);
+        /* From the keyboard the menu hangs from what it acts on, not the grid. */
+        if (request.reason === 'keyboard')
+            this.contextMenuRef()?.anchor.set(found.element);
+    }
+    onClickCapture = (event) => {
+        if (!this.swallowClick)
+            return;
+        this.swallowClick = false;
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    /**
+     * A press on an editable event picks it up once it travels four pixels;
+     * short of that it is a click. The resize handle moves the end only.
+     */
+    startEdit(event) {
+        const target = event.target;
+        const element = target.closest("[data-part='event'][data-editable]");
+        const cell = element?.closest('[data-row]');
+        const key = element?.dataset['key'];
+        const iso = cell?.dataset['date'];
+        if (element === null || element === undefined || cell === null || cell === undefined)
+            return false;
+        const occurrence = this.occurrences().find((entry) => entry.key === key);
+        if (occurrence === undefined || iso === undefined)
+            return false;
+        const [startHour, endHour] = this.hoursValue();
+        const slot = this.slotDurationValue();
+        this.edit = {
+            occurrence,
+            kind: target.closest("[data-part='resize-handle']") ? 'resize' : 'move',
+            row: cell.dataset['row'] ?? '',
+            date: dayUnder(this.host, cell.dataset['row'] ?? '', event.clientX, event.clientY) ??
+                parseIso(iso),
+            x: event.clientX,
+            y: event.clientY,
+            started: false,
+            placement: placementOf(occurrence),
+            invalid: false,
+        };
+        const hourSize = () => Math.max(1, cell.getBoundingClientRect().height / Math.max(1, endHour - startHour));
+        const move = (moved) => {
+            const state = this.edit;
+            if (state === null)
+                return;
+            if (!state.started && Math.hypot(moved.clientX - state.x, moved.clientY - state.y) < 4)
+                return;
+            state.started = true;
+            const over = dayUnder(this.host, state.row, moved.clientX, moved.clientY);
+            const shift = {
+                days: over === null ? 0 : daysBetween(state.date, over),
+                minutes: state.row === 'timed'
+                    ? Math.round(((moved.clientY - state.y) / hourSize()) * (60 / slot)) * slot
+                    : 0,
+            };
+            state.placement =
+                state.kind === 'move'
+                    ? movePlacement(placementOf(state.occurrence), shift)
+                    : resizePlacement(placementOf(state.occurrence), shift, slot);
+            state.invalid = !this.allows(state.occurrence, state.placement, state.kind);
+            this.editing.set({
+                key: state.occurrence.key,
+                placement: state.placement,
+                invalid: state.invalid,
+            });
+        };
+        const finish = (ended, commit) => {
+            const state = this.edit;
+            this.edit = null;
+            document.removeEventListener('pointermove', move);
+            document.removeEventListener('pointerup', up);
+            document.removeEventListener('keydown', cancel, true);
+            this.editing.set(null);
+            if (state === null || !state.started)
+                return;
+            this.swallowClick = true;
+            /* Let go over a refused destination: the event goes back, and nothing is asked. */
+            if (commit && !state.invalid) {
+                this.requestEventChange(state.occurrence, state.placement, state.kind, 'pointer', ended);
+            }
+        };
+        const up = (ended) => finish(ended, true);
+        const cancel = (pressed) => {
+            if (pressed.key !== 'Escape' || this.edit?.started !== true)
+                return;
+            pressed.stopPropagation();
+            finish(pressed, false);
+        };
+        document.addEventListener('pointermove', move);
+        document.addEventListener('pointerup', up);
+        document.addEventListener('keydown', cancel, true);
+        return true;
+    }
+    onPointerDown(event) {
+        if (event.button !== 0)
+            return;
+        if (this.startEdit(event))
+            return;
+        if (this.selectionMode() !== 'range')
+            return;
+        const target = event.target;
+        if (target.closest('button, a, input'))
+            return;
+        const cell = target.closest('[data-row]');
+        const iso = cell?.dataset['date'];
+        if (cell === null || cell === undefined || iso === undefined)
+            return;
+        const date = parseIso(iso);
+        const slot = this.slotDurationValue();
+        const endHour = this.hoursValue()[1];
+        if (cell.dataset['row'] === 'timed') {
+            const anchor = this.minuteAt(cell, event.clientY);
+            this.drag = { kind: 'hours', date, anchor, column: cell };
+            this.pending.set({
+                start: atMinutes(date, anchor),
+                end: atMinutes(date, Math.min(anchor + slot, endHour * 60)),
+            });
+        }
+        else if (cell.dataset['row'] === 'day' || cell.dataset['row'] === 'all-day') {
+            this.drag = { kind: 'days', anchor: date };
+            this.pending.set({ start: date, end: date });
+        }
+        else
+            return;
+        event.preventDefault();
+        const move = (moved) => {
+            const state = this.drag;
+            if (state === null)
+                return;
+            if (state.kind === 'hours') {
+                const here = this.minuteAt(state.column, moved.clientY);
+                this.pending.set({
+                    start: atMinutes(state.date, Math.min(state.anchor, here)),
+                    end: atMinutes(state.date, Math.min(Math.max(state.anchor, here) + slot, endHour * 60)),
+                });
+                return;
+            }
+            const over = dayUnder(this.host, 'day', moved.clientX, moved.clientY) ??
+                dayUnder(this.host, 'all-day', moved.clientX, moved.clientY);
+            if (over !== null)
+                this.pending.set(orderedDays(state.anchor, over));
+        };
+        const finish = (ended, commit) => {
+            const chosen = this.pending();
+            this.drag = null;
+            this.pending.set(null);
+            document.removeEventListener('pointermove', move);
+            document.removeEventListener('pointerup', up);
+            document.removeEventListener('keydown', cancel, true);
+            if (commit && chosen !== null && this.requestSelection(chosen, 'pointer', ended)) {
+                this.announce(chosen);
+            }
+        };
+        const up = (ended) => finish(ended, true);
+        const cancel = (pressed) => {
+            if (pressed.key === 'Escape')
+                finish(pressed, false);
+        };
+        document.addEventListener('pointermove', move);
+        document.addEventListener('pointerup', up);
+        document.addEventListener('keydown', cancel, true);
+    }
+    /* ── Keyboard ──────────────────────────────────────────────────────── */
+    /** Alt and an arrow move the event a slot or a day; with Shift, its end. */
+    editByKey(event, element, cell, row) {
+        const occurrence = this.occurrences().find((entry) => entry.key === element.dataset['key']);
+        if (occurrence === undefined)
+            return;
+        event.preventDefault();
+        const rtl = getComputedStyle(cell).direction === 'rtl';
+        const slot = this.slotDurationValue();
+        const sideways = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
+        const forward = event.key === 'ArrowRight'
+            ? !rtl
+            : event.key === 'ArrowLeft'
+                ? rtl
+                : event.key === 'ArrowDown';
+        const step = forward ? 1 : -1;
+        const shift = sideways
+            ? { days: step, minutes: 0 }
+            : row === 'timed'
+                ? { days: 0, minutes: step * slot }
+                : { days: row === 'day' ? step * 7 : 0, minutes: 0 };
+        if (shift.days === 0 && shift.minutes === 0)
+            return;
+        const kind = event.shiftKey ? 'resize' : 'move';
+        /* A refused destination is passed over for the next one allowed; with
+           none in reach the event stays, and the reader is told why. */
+        const placement = nextAllowedPlacement(placementOf(occurrence), shift, kind, {
+            slot,
+            hours: this.hoursValue(),
+            allowed: (candidate) => this.allows(occurrence, candidate, kind),
+        });
+        if (placement === null) {
+            getLiveAnnouncer().announce(this.t('dropInvalid', { title: occurrence.event.title }));
+            return;
+        }
+        if (!this.requestEventChange(occurrence, placement, kind, 'keyboard', event))
+            return;
+        /* Focus stays on the event where it lands, once the application has moved it. */
+        afterNextRender(() => this.eventElement(occurrence.key)?.focus(), {
+            injector: this.injector,
+        });
+    }
+    onKeyDown(event) {
+        const target = event.target;
+        const cell = target.closest('[data-row]');
+        const row = cell?.dataset['row'];
+        if (cell === null || cell === undefined || row === undefined)
+            return;
+        if (target !== cell) {
+            const element = target.closest("[data-part='event'][data-editable]");
+            if (element !== null && event.altKey && event.key.startsWith('Arrow')) {
+                this.editByKey(event, element, cell, row);
+                return;
+            }
+            if (event.key === 'Escape' || event.key === 'F2') {
+                event.preventDefault();
+                cell.focus();
+                return;
+            }
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                const widgets = [...cell.querySelectorAll(WIDGETS)];
+                const index = widgets.indexOf(target.closest(WIDGETS) ?? target);
+                event.preventDefault();
+                widgets[index + (event.key === 'ArrowDown' ? 1 : -1)]?.focus();
+            }
+            return;
+        }
+        const date = this.currentDate();
+        const view = this.currentView();
+        const options = this.viewOptions();
+        const rtl = getComputedStyle(cell).direction === 'rtl';
+        const month = row === 'day';
+        const range = this.selectionMode() === 'range';
+        const slot = this.slotDurationValue();
+        const [startHour, endHour] = this.hoursValue();
+        if (row === 'timed' &&
+            event.shiftKey &&
+            range &&
+            (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            event.preventDefault();
+            const held = this.currentSelection();
+            if (held === null || !isPlainDateTime(held.start) || !isSameDate(held.start.date, date))
+                return;
+            const from = secondsOfDay(held.start.time) / 60;
+            const endValue = held.end;
+            const to = isSameDate(endValue.date, date) ? secondsOfDay(endValue.time) / 60 : 1440;
+            const nextEnd = Math.min(endHour * 60, Math.max(from + slot, to + (event.key === 'ArrowDown' ? slot : -slot)));
+            const next = { start: held.start, end: atMinutes(date, nextEnd) };
+            if (this.requestSelection(next, 'keyboard', event))
+                this.announce(next);
+            return;
+        }
+        if (!month && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+            event.preventDefault();
+            const order = ['header', 'all-day', 'timed'];
+            const nextRow = order[order.indexOf(row) + (event.key === 'ArrowDown' ? 1 : -1)];
+            if (nextRow === undefined)
+                return;
+            this.row.set(nextRow);
+            this.focusCell(date, nextRow);
+            return;
+        }
+        const moves = {
+            ArrowLeft: rtl ? 'next' : 'previous',
+            ArrowRight: rtl ? 'previous' : 'next',
+            Home: event.ctrlKey || event.metaKey ? 'periodStart' : 'rowStart',
+            End: event.ctrlKey || event.metaKey ? 'periodEnd' : 'rowEnd',
+            PageUp: event.shiftKey && month ? 'yearBack' : 'pageBack',
+            PageDown: event.shiftKey && month ? 'yearForward' : 'pageForward',
+            ArrowUp: month ? 'up' : undefined,
+            ArrowDown: month ? 'down' : undefined,
+        };
+        const move = moves[event.key];
+        if (move !== undefined) {
+            event.preventDefault();
+            const next = moveDate(view, date, move, options);
+            if (event.shiftKey && range && event.key.startsWith('Arrow') && row !== 'timed') {
+                const anchor = this.selectionAnchor ?? date;
+                this.selectionAnchor = anchor;
+                const chosen = orderedDays(anchor, next);
+                if (this.requestSelection(chosen, 'keyboard', event))
+                    this.announce(chosen);
+            }
+            else if (!event.shiftKey) {
+                this.selectionAnchor = null;
+            }
+            if (!isSameDate(next, date))
+                this.requestDate(next, 'keyboard', event);
+            this.focusCell(next, row);
+            return;
+        }
+        if (event.key === 'Enter' || event.key === 'F2') {
+            const first = cell.querySelector(WIDGETS);
+            if (first === null)
+                return;
+            event.preventDefault();
+            first.focus();
+            return;
+        }
+        if (event.key === ' ' && range) {
+            event.preventDefault();
+            this.selectionAnchor = date;
+            const next = row === 'timed'
+                ? (() => {
+                    const from = Math.min(Math.max(secondsOfDay(this.scrollValue()) / 60, startHour * 60), endHour * 60 - slot);
+                    return { start: atMinutes(date, from), end: atMinutes(date, from + slot) };
+                })()
+                : { start: date, end: date };
+            if (this.requestSelection(next, 'keyboard', event))
+                this.announce(next);
+            return;
+        }
+        if (event.key === 'Escape' && this.currentSelection() !== null) {
+            event.preventDefault();
+            this.requestSelection(null, 'escape', event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlEventCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlEventCalendar, isStandalone: true, selector: "[slEventCalendar]", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, calendars: { classPropertyName: "calendars", publicName: "calendars", isSignal: true, isRequired: false, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, defaultDate: { classPropertyName: "defaultDate", publicName: "defaultDate", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, defaultView: { classPropertyName: "defaultView", publicName: "defaultView", isSignal: true, isRequired: false, transformFunction: null }, visibleCalendars: { classPropertyName: "visibleCalendars", publicName: "visibleCalendars", isSignal: true, isRequired: false, transformFunction: null }, defaultVisibleCalendars: { classPropertyName: "defaultVisibleCalendars", publicName: "defaultVisibleCalendars", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, defaultSelection: { classPropertyName: "defaultSelection", publicName: "defaultSelection", isSignal: true, isRequired: false, transformFunction: null }, openEvent: { classPropertyName: "openEvent", publicName: "openEvent", isSignal: true, isRequired: false, transformFunction: null }, defaultOpenEvent: { classPropertyName: "defaultOpenEvent", publicName: "defaultOpenEvent", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, workingHours: { classPropertyName: "workingHours", publicName: "workingHours", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, dayHours: { classPropertyName: "dayHours", publicName: "dayHours", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, fixedWeeks: { classPropertyName: "fixedWeeks", publicName: "fixedWeeks", isSignal: true, isRequired: false, transformFunction: null }, hourCycle: { classPropertyName: "hourCycle", publicName: "hourCycle", isSignal: true, isRequired: false, transformFunction: null }, listRange: { classPropertyName: "listRange", publicName: "listRange", isSignal: true, isRequired: false, transformFunction: null }, loadingDelay: { classPropertyName: "loadingDelay", publicName: "loadingDelay", isSignal: true, isRequired: false, transformFunction: null }, loadingMinDuration: { classPropertyName: "loadingMinDuration", publicName: "loadingMinDuration", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, maxColumns: { classPropertyName: "maxColumns", publicName: "maxColumns", isSignal: true, isRequired: false, transformFunction: null }, maxEvents: { classPropertyName: "maxEvents", publicName: "maxEvents", isSignal: true, isRequired: false, transformFunction: null }, scrollTime: { classPropertyName: "scrollTime", publicName: "scrollTime", isSignal: true, isRequired: false, transformFunction: null }, slotDuration: { classPropertyName: "slotDuration", publicName: "slotDuration", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, weekends: { classPropertyName: "weekends", publicName: "weekends", isSignal: true, isRequired: false, transformFunction: null }, weekNumbers: { classPropertyName: "weekNumbers", publicName: "weekNumbers", isSignal: true, isRequired: false, transformFunction: null }, canDrop: { classPropertyName: "canDrop", publicName: "canDrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange", view: "viewChange", visibleCalendars: "visibleCalendarsChange", selection: "selectionChange", openEvent: "openEventChange", dateRequest: "dateRequest", viewRequest: "viewRequest", visibleCalendarsRequest: "visibleCalendarsRequest", selectionRequest: "selectionRequest", openEventRequest: "openEventRequest", eventChangeRequest: "eventChangeRequest", rangeChange: "rangeChange" }, host: { attributes: { "data-ui": "event-calendar", "data-part": "root" }, properties: { "attr.data-view": "currentView()", "attr.data-layout": "layout()", "attr.data-loading": "loading() ? '' : null", "attr.data-slot-duration": "slotDurationValue()" } }, queries: [{ propertyName: "eventContentTemplate", first: true, predicate: SlEventCalendarEvent, descendants: true, isSignal: true }, { propertyName: "detail", first: true, predicate: SlEventCalendarDetail, descendants: true, isSignal: true }, { propertyName: "dayContent", first: true, predicate: SlEventCalendarDayContent, descendants: true, isSignal: true }, { propertyName: "actions", first: true, predicate: SlEventCalendarActions, descendants: true, isSignal: true }, { propertyName: "empty", first: true, predicate: SlEventCalendarEmpty, descendants: true, isSignal: true }, { propertyName: "errorContent", first: true, predicate: SlEventCalendarError, descendants: true, isSignal: true }, { propertyName: "contextMenu", first: true, predicate: SlEventCalendarContextMenu, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "body", first: true, predicate: ["body"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "filterButton", first: true, predicate: ["filterButton"], descendants: true, isSignal: true }, { propertyName: "morePopover", first: true, predicate: ["morePopover"], descendants: true, isSignal: true }, { propertyName: "detailPopover", first: true, predicate: ["detailPopover"], descendants: true, isSignal: true }, { propertyName: "contextMenuRef", first: true, predicate: ["contextMenuRef"], descendants: true, isSignal: true }], exportAs: ["slEventCalendar"], ngImport: i0, template: `
+    @if (header()) {
+      <div data-part="header">
+        <div
+          data-part="title"
+          role="heading"
+          aria-live="polite"
+          [attr.aria-level]="level()"
+          [attr.id]="titleId"
+        >
+          {{ title() }}
+        </div>
+        <div data-part="navigation" role="group" [attr.aria-label]="t('navigation')">
+          <button
+            data-part="previous"
+            type="button"
+            [attr.aria-label]="previousLabel()"
+            (click)="step(-1, $event)"
+          >
+            <span slIcon><svg slGlyph name="chevron-right"></svg></span>
+          </button>
+          <button data-part="today" type="button" (click)="goToday($event)">
+            {{ t('today') }}
+          </button>
+          <button
+            data-part="next"
+            type="button"
+            [attr.aria-label]="nextLabel()"
+            (click)="step(1, $event)"
+          >
+            <span slIcon><svg slGlyph name="chevron-right"></svg></span>
+          </button>
+        </div>
+        @if (views().length > 1) {
+          <div data-part="views">
+            <div
+              slSegmentedControl
+              fullWidth
+              [attr.aria-label]="t('views')"
+              [value]="currentView()"
+              (valueChange)="onViewRequest($event)"
+            >
+              @for (name of views(); track name) {
+                <label slSegment [value]="name">{{ viewLabel(name) }}</label>
+              }
+            </div>
+          </div>
+        }
+        @if (calendars().length > 1) {
+          <button #filterButton data-part="filter" type="button" [slMenuTriggerFor]="filterMenu">
+            <span slIcon><svg slGlyph name="funnel"></svg></span>
+            <span>{{ t('calendars') }}</span>
+            <span slIcon><svg slGlyph name="chevron-down"></svg></span>
+          </button>
+          <sl-menu #filterMenu>
+            @for (entry of calendars(); track entry.key) {
+              <button
+                slMenuCheckboxItem
+                [checked]="shown().includes(entry.key)"
+                (checkedChangeRequest)="onCalendarRequest(entry.key, $event)"
+              >
+                <!-- The calendar's colour opens the label; the column before it is the
+                     check's, and a dot there drew the check over itself. -->
+                <svg aria-hidden="true" width="14" height="10" viewBox="0 0 14 10">
+                  <circle cx="5" cy="5" r="4" [style.fill]="swatch(entry.key)" />
+                </svg>
+                {{ entry.label }}
+              </button>
+            }
+          </sl-menu>
+        }
+        @if (actions()) {
+          <div data-part="actions"><ng-content select="[slEventCalendarActions]" /></div>
+        }
+      </div>
+    }
+
+    <!-- With a context menu the body is that family's target: one region for
+         every day, hour and event. -->
+    @if (contextMenu(); as items) {
+      <div
+        #body
+        data-part="body"
+        [slContextMenuTriggerFor]="contextMenuRef"
+        [attr.aria-busy]="loading() ? true : null"
+        (keydown)="onKeyDown($event)"
+        (pointerdown)="onPointerDown($event)"
+      >
+        <ng-container *ngTemplateOutlet="bodyContent" />
+      </div>
+      <sl-menu
+        #contextMenuRef
+        [aria-label]="contextLabel()"
+        (openChangeRequest)="onContextRequest($event)"
+      >
+        @if (contextOn(); as on) {
+          <ng-container
+            *ngTemplateOutlet="
+              items.template;
+              context: { $implicit: on.target };
+              injector: contextInjector()
+            "
+          />
+        }
+      </sl-menu>
+    } @else {
+      <div
+        #body
+        data-part="body"
+        [attr.aria-busy]="loading() ? true : null"
+        (keydown)="onKeyDown($event)"
+        (pointerdown)="onPointerDown($event)"
+      >
+        <ng-container *ngTemplateOutlet="bodyContent" />
+      </div>
+    }
+
+    <ng-template #bodyContent>
+      <div data-part="loader">
+        @if (loaderMounted()) {
+          <div
+            slProgressBar
+            hideLabel
+            size="sm"
+            [loading]="loading()"
+            [label]="t('loading')"
+            [delay]="loadingDelayValue()"
+            [minDuration]="loadingMinDurationValue()"
+          ></div>
+        }
+      </div>
+      @if (errorContent()) {
+        <div data-part="error"><ng-content select="[slEventCalendarError]" /></div>
+      }
+
+      @if (layout() === 'list') {
+        <div data-part="list">
+          @for (day of listDrawing(); track day.iso) {
+            <section
+              data-part="list-day"
+              [attr.aria-labelledby]="day.headingId"
+              [attr.data-date]="day.iso"
+              [attr.data-today]="day.today ? '' : null"
+            >
+              <div
+                data-part="list-day-heading"
+                role="heading"
+                [attr.aria-level]="level() + 1"
+                [attr.id]="day.headingId"
+                [attr.aria-label]="day.heading.label"
+              >
+                <span data-part="list-weekday">{{ day.heading.weekday }}</span>
+                <span data-part="list-date">{{ day.heading.date }}</span>
+              </div>
+              <ul data-part="list-events" role="list">
+                @for (view of day.events; track view.key) {
+                  <li>
+                    <ng-container
+                      *ngTemplateOutlet="eventTemplate; context: { $implicit: view, inGrid: false }"
+                    />
+                  </li>
+                }
+              </ul>
+            </section>
+          } @empty {
+            <div data-part="empty">
+              <p>{{ emptyText() }}</p>
+              <ng-content select="[slEventCalendarEmpty]" />
+            </div>
+          }
+        </div>
+      } @else if (currentView() === 'month') {
+        <table data-part="month" role="grid" [attr.aria-labelledby]="titleId">
+          <thead>
+            <tr data-part="weekdays">
+              @if (weekNumbersValue()) {
+                <th data-part="week-number-header" scope="col">
+                  <span data-ui="visually-hidden">{{ t('weekNumber') }}</span>
+                </th>
+              }
+              @for (name of monthDrawing().weekdays; track name.key) {
+                <th data-part="weekday" scope="col" [attr.abbr]="name.long">{{ name.short }}</th>
+              }
+            </tr>
+          </thead>
+          <tbody>
+            @for (row of monthDrawing().rows; track row.key) {
+              <tr data-part="week" [style.--slotted-event-calendar-lanes]="maxEventsValue()">
+                @if (weekNumbersValue()) {
+                  <th data-part="week-number" scope="row">{{ row.weekNumber }}</th>
+                }
+                @for (cell of row.cells; track cell.iso) {
+                  <td
+                    data-part="day"
+                    data-row="day"
+                    role="gridcell"
+                    [attr.data-date]="cell.iso"
+                    [attr.tabindex]="cell.tabIndex"
+                    [attr.aria-labelledby]="
+                      id + '-day-' + cell.iso + ' ' + id + '-day-' + cell.iso + '-count'
+                    "
+                    [attr.aria-selected]="selectionMode() === 'range' ? cell.selected : null"
+                    [attr.data-today]="cell.today ? '' : null"
+                    [attr.data-outside-month]="cell.outside ? '' : null"
+                    [attr.data-non-working]="cell.nonWorking ? '' : null"
+                    [attr.data-selected]="cell.selected ? '' : null"
+                  >
+                    <div data-part="day-header">
+                      <button
+                        data-part="day-number"
+                        type="button"
+                        tabindex="-1"
+                        [attr.id]="id + '-day-' + cell.iso"
+                        [attr.aria-label]="cell.label"
+                        [attr.aria-haspopup]="narrow() ? 'dialog' : null"
+                        (click)="drill(cell.date, $event)"
+                      >
+                        {{ cell.date.day }}
+                      </button>
+                      @if (dayContent(); as content) {
+                        <div data-part="day-content">
+                          <ng-container
+                            *ngTemplateOutlet="
+                              content.template;
+                              context: { $implicit: cell.date, view: currentView() }
+                            "
+                          />
+                        </div>
+                      }
+                      <span
+                        data-ui="visually-hidden"
+                        [attr.id]="id + '-day-' + cell.iso + '-count'"
+                        >{{ cell.count }}</span
+                      >
+                    </div>
+                    <div data-part="day-events">
+                      @for (view of cell.events; track view.key) {
+                        <ng-container
+                          *ngTemplateOutlet="
+                            eventTemplate;
+                            context: { $implicit: view, inGrid: true }
+                          "
+                        />
+                      }
+                      @for (text of cell.continuations; track $index) {
+                        <span data-part="continuation">{{ text }}</span>
+                      }
+                      @if (cell.more > 0) {
+                        <button
+                          data-part="more"
+                          type="button"
+                          tabindex="-1"
+                          aria-haspopup="dialog"
+                          [attr.aria-expanded]="moreIso() === cell.iso"
+                          [attr.aria-label]="cell.moreLabel"
+                          (click)="openMore(cell.date, $event)"
+                        >
+                          +{{ cell.more }}<span>{{ t('more') }}</span>
+                        </button>
+                      }
+                    </div>
+                  </td>
+                }
+              </tr>
+            }
+          </tbody>
+        </table>
+      } @else {
+        <div
+          data-part="time-grid"
+          role="grid"
+          [attr.aria-labelledby]="titleId"
+          [style.--slotted-event-calendar-days]="timeDrawing().days"
+          [style.--slotted-event-calendar-slot]="slotDurationValue()"
+        >
+          <div data-part="time-head" role="rowgroup">
+            <div data-part="columns" role="row">
+              <div data-part="zone" role="columnheader">{{ timeDrawing().zone }}</div>
+              @for (column of timeDrawing().headers; track column.iso) {
+                <div
+                  data-part="column-header"
+                  data-row="header"
+                  role="columnheader"
+                  [attr.data-date]="column.iso"
+                  [attr.tabindex]="column.tabIndex"
+                  [attr.data-today]="column.today ? '' : null"
+                  [attr.data-offset-change]="column.offsetShort === null ? null : ''"
+                >
+                  <span data-part="weekday" aria-hidden="true">{{ column.weekday }}</span>
+                  <button
+                    data-part="day-number"
+                    type="button"
+                    tabindex="-1"
+                    [attr.aria-label]="column.label"
+                    (click)="drill(column.date, $event)"
+                  >
+                    {{ column.date.day }}
+                  </button>
+                  @if (dayContent(); as content) {
+                    <div data-part="day-content">
+                      <ng-container
+                        *ngTemplateOutlet="
+                          content.template;
+                          context: { $implicit: column.date, view: currentView() }
+                        "
+                      />
+                    </div>
+                  }
+                  @if (column.offsetShort !== null) {
+                    <span
+                      data-part="offset-change"
+                      role="note"
+                      [attr.aria-label]="column.offsetLong"
+                      >{{ column.offsetShort }}</span
+                    >
+                  }
+                </div>
+              }
+            </div>
+            <div
+              data-part="all-day-row"
+              role="row"
+              [style.--slotted-event-calendar-lanes]="timeDrawing().lanes"
+            >
+              <div data-part="all-day-label" role="rowheader">{{ t('allDay') }}</div>
+              @for (cell of timeDrawing().allDay; track cell.iso) {
+                <div
+                  data-part="all-day-cell"
+                  data-row="all-day"
+                  role="gridcell"
+                  [attr.data-date]="cell.iso"
+                  [attr.tabindex]="cell.tabIndex"
+                  [attr.aria-selected]="selectionMode() === 'range' ? cell.selected : null"
+                  [attr.data-today]="cell.today ? '' : null"
+                  [attr.data-non-working]="cell.nonWorking ? '' : null"
+                  [attr.data-selected]="cell.selected ? '' : null"
+                >
+                  @for (view of cell.events; track view.key) {
+                    <ng-container
+                      *ngTemplateOutlet="eventTemplate; context: { $implicit: view, inGrid: true }"
+                    />
+                  }
+                  @for (text of cell.continuations; track $index) {
+                    <span data-part="continuation">{{ text }}</span>
+                  }
+                </div>
+              }
+            </div>
+          </div>
+          <div #scroller data-part="scroller" role="rowgroup">
+            <div data-part="time-row" role="row">
+              <div data-part="gutter" role="rowheader">
+                <span data-ui="visually-hidden">{{ t('timed') }}</span>
+                @for (hour of timeDrawing().hours; track hour.hour) {
+                  <span data-part="hour" aria-hidden="true">{{ hour.label }}</span>
+                }
+              </div>
+              @for (column of timeDrawing().columns; track column.iso) {
+                <div
+                  data-part="column"
+                  data-row="timed"
+                  role="gridcell"
+                  [attr.data-date]="column.iso"
+                  [attr.tabindex]="column.tabIndex"
+                  [attr.data-today]="column.today ? '' : null"
+                  [attr.data-non-working]="column.nonWorking ? '' : null"
+                >
+                  @for (off of column.offHours; track $index) {
+                    <div data-part="off-hours" aria-hidden="true" [style]="off"></div>
+                  }
+                  @if (column.offsetLine; as line) {
+                    <div data-part="offset-line" aria-hidden="true" [style]="line"></div>
+                  }
+                  @if (column.selection; as chosen) {
+                    <div data-part="selection" aria-hidden="true" [style]="chosen.style">
+                      {{ chosen.text }}
+                    </div>
+                  }
+                  @for (view of column.items; track view.key) {
+                    <ng-container
+                      *ngTemplateOutlet="eventTemplate; context: { $implicit: view, inGrid: true }"
+                    />
+                  }
+                  @for (entry of column.more; track $index) {
+                    <button
+                      data-part="more"
+                      type="button"
+                      tabindex="-1"
+                      aria-haspopup="dialog"
+                      [attr.aria-expanded]="moreIso() === column.iso"
+                      [attr.aria-label]="entry.label"
+                      [attr.data-overlay]="entry.overlay ? '' : null"
+                      [style]="entry.style"
+                      (click)="openMore(column.date, $event)"
+                    >
+                      +{{ entry.count }}<span>{{ t('more') }}</span>
+                    </button>
+                  }
+                  @if (column.now; as now) {
+                    <div data-part="now" aria-hidden="true" [style]="now"></div>
+                  }
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+      }
+    </ng-template>
+
+    <!-- Below the compact size class the "+N" panel and the detail are sheets
+         from the bottom edge, inside the root: a region that contains its fixed
+         layers (a phone frame, a pane) keeps them. -->
+    @if (narrow()) {
+      <sl-drawer
+        side="bottom"
+        [container]="host"
+        [finalFocus]="moreAnchor() ?? undefined"
+        [open]="moreIso() !== null"
+        (openChange)="onMoreOpen($event)"
+      >
+        @if (moreDate(); as date) {
+          <div slDrawerResizer></div>
+          <div slDrawerHeader>
+            <h2 slDrawerTitle>{{ dateLabel(date) }}</h2>
+            <button slDrawerClose></button>
+          </div>
+          <div slDrawerBody>
+            <ul
+              data-part="list-events"
+              data-layout="stacked"
+              role="list"
+              [attr.aria-label]="t('dayEvents', { day: dateLabel(date) })"
+            >
+              @for (view of moreViews(); track view.key) {
+                <li>
+                  <ng-container
+                    *ngTemplateOutlet="eventTemplate; context: { $implicit: view, inGrid: false }"
+                  />
+                </li>
+              }
+            </ul>
+          </div>
+        }
+      </sl-drawer>
+      @if (detail(); as template) {
+        <sl-drawer
+          side="bottom"
+          [container]="host"
+          [finalFocus]="detailAnchor() ?? undefined"
+          [open]="openOccurrence() !== null"
+          (openChangeRequest)="onDetailRequest($event)"
+        >
+          @if (openOccurrence(); as occurrence) {
+            <div slDrawerResizer></div>
+            <div slDrawerHeader>
+              <h2 slDrawerTitle>{{ occurrence.event.title }}</h2>
+              <p slDrawerDescription>
+                @if (whenOf(occurrence); as when) {
+                  @if (when.day !== null) {
+                    <span data-part="detail-day">{{ when.day }},</span>{{ ' ' }}
+                  }
+                  <span data-part="detail-range">{{ when.range }}</span>
+                }
+              </p>
+              <button slDrawerClose></button>
+            </div>
+            <div slDrawerBody>
+              <ng-container
+                *ngTemplateOutlet="
+                  template.template;
+                  context: { $implicit: occurrence, close: closeDetail }
+                "
+              />
+            </div>
+          }
+        </sl-drawer>
+      }
+    } @else {
+      <ng-container
+        slPopover
+        #morePopover="slPopover"
+        [portal]="false"
+        [open]="moreIso() !== null"
+        (openChange)="onMoreOpen($event)"
+      >
+        <ng-template slPopoverLayer>
+          <div slPopoverContent>
+            @if (moreDate(); as date) {
+              <div slPopoverHeader>
+                <div slPopoverTitle>{{ dateLabel(date) }}</div>
+                <button slPopoverClose></button>
+              </div>
+              <div slPopoverBody>
+                <ul
+                  data-part="list-events"
+                  data-layout="stacked"
+                  role="list"
+                  [attr.aria-label]="t('dayEvents', { day: dateLabel(date) })"
+                >
+                  @for (view of moreViews(); track view.key) {
+                    <li>
+                      <ng-container
+                        *ngTemplateOutlet="
+                          eventTemplate;
+                          context: { $implicit: view, inGrid: false }
+                        "
+                      />
+                    </li>
+                  }
+                </ul>
+              </div>
+            }
+          </div>
+        </ng-template>
+      </ng-container>
+
+      @if (detail(); as template) {
+        <ng-container
+          slPopover
+          #detailPopover="slPopover"
+          size="lg"
+          [portal]="false"
+          [open]="openOccurrence() !== null"
+          (openChangeRequest)="onDetailRequest($event)"
+        >
+          <ng-template slPopoverLayer>
+            <div slPopoverContent>
+              @if (openOccurrence(); as occurrence) {
+                <div slPopoverHeader>
+                  <div slPopoverTitle>{{ occurrence.event.title }}</div>
+                  <div slPopoverDescription>
+                    @if (whenOf(occurrence); as when) {
+                      @if (when.day !== null) {
+                        <span data-part="detail-day">{{ when.day }},</span>{{ ' ' }}
+                      }
+                      <span data-part="detail-range">{{ when.range }}</span>
+                    }
+                  </div>
+                  <button slPopoverClose></button>
+                </div>
+                <div slPopoverBody>
+                  <ng-container
+                    *ngTemplateOutlet="
+                      template.template;
+                      context: { $implicit: occurrence, close: closeDetail }
+                    "
+                  />
+                </div>
+              }
+            </div>
+          </ng-template>
+        </ng-container>
+      }
+    }
+
+    <ng-template #eventTemplate let-view let-inGrid="inGrid">
+      @if (view.href !== null) {
+        <a
+          data-part="event"
+          [attr.href]="view.href"
+          [attr.tabindex]="inGrid ? -1 : null"
+          [attr.data-key]="view.key"
+          [attr.data-all-day]="view.allDay ? '' : null"
+          [attr.data-bar]="view.bar ? '' : null"
+          [attr.data-color]="view.color"
+          [attr.data-status]="view.status"
+          [attr.data-open]="view.open ? '' : null"
+          [attr.data-continues-before]="view.continuesBefore ? '' : null"
+          [attr.data-continues-after]="view.continuesAfter ? '' : null"
+          [attr.data-clipped-start]="view.clippedStart ? '' : null"
+          [attr.data-clipped-end]="view.clippedEnd ? '' : null"
+          [attr.data-short]="view.short ? '' : null"
+          [attr.data-editable]="view.editable ? '' : null"
+          [attr.data-past]="view.past ? '' : null"
+          [attr.data-dragging]="view.dragging ? '' : null"
+          [attr.data-drop-invalid]="view.dropInvalid ? '' : null"
+          [attr.data-context]="view.context ? '' : null"
+          [style]="view.style"
+          ><ng-container *ngTemplateOutlet="eventContent; context: { $implicit: view }"
+        /></a>
+      } @else {
+        <button
+          data-part="event"
+          type="button"
+          [attr.tabindex]="inGrid ? -1 : null"
+          [attr.data-key]="view.key"
+          [attr.data-all-day]="view.allDay ? '' : null"
+          [attr.data-bar]="view.bar ? '' : null"
+          [attr.data-color]="view.color"
+          [attr.data-status]="view.status"
+          [attr.data-open]="view.open ? '' : null"
+          [attr.data-continues-before]="view.continuesBefore ? '' : null"
+          [attr.data-continues-after]="view.continuesAfter ? '' : null"
+          [attr.data-clipped-start]="view.clippedStart ? '' : null"
+          [attr.data-clipped-end]="view.clippedEnd ? '' : null"
+          [attr.data-short]="view.short ? '' : null"
+          [attr.data-editable]="view.editable ? '' : null"
+          [attr.data-past]="view.past ? '' : null"
+          [attr.data-dragging]="view.dragging ? '' : null"
+          [attr.data-drop-invalid]="view.dropInvalid ? '' : null"
+          [attr.data-context]="view.context ? '' : null"
+          [attr.aria-expanded]="hostsDetail() || currentOpen() !== null ? view.open : null"
+          [attr.aria-haspopup]="hostsDetail() ? 'dialog' : null"
+          [style]="view.style"
+          (click)="activate(view, $event)"
+        >
+          <ng-container *ngTemplateOutlet="eventContent; context: { $implicit: view }" />
+        </button>
+      }
+    </ng-template>
+
+    <ng-template #eventContent let-view>
+      @if (view.bar && view.continuesBefore) {
+        <span slIcon size="sm" data-edge="start"><svg slGlyph name="chevron-right"></svg></span>
+      }
+      @if (eventContentTemplate(); as custom) {
+        <ng-container
+          *ngTemplateOutlet="
+            custom.template;
+            context: {
+              $implicit: view.occurrence,
+              layout: view.layout,
+              date: view.date,
+              time: view.time,
+            }
+          "
+        />
+      } @else {
+        @if (view.time !== null) {
+          <span data-part="event-time">{{ view.time }}</span>
+        }
+        <span data-part="event-title">{{ view.title }}</span>
+        @if (view.location) {
+          <span data-part="event-location">{{ view.location }}</span>
+        }
+      }
+      <span data-part="event-meta">{{ view.meta }}</span>
+      @if (view.bar && view.continuesAfter) {
+        <span slIcon size="sm" data-edge="end"><svg slGlyph name="chevron-right"></svg></span>
+      }
+      @if (view.resizable) {
+        <span aria-hidden="true" data-part="resize-handle"></span>
+      }
+    </ng-template>
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=event-calendar][data-part=root]{container:slotted-event-calendar / inline-size;--_rule: var(--slotted-event-calendar-rule-color, var(--slotted-border-subtle, #d8dee6));--_rule-width: var(--slotted-border-width-thin, 1px);--_air: var(--slotted-space-2, .25rem);--_hour: var( --slotted-event-calendar-hour-size, calc(var(--slotted-control-height-sm, 30px) * 2) );--_event-size: max( var(--slotted-control-inner-size-sm, 22px), calc(var(--slotted-target-min, 24px) - var(--_air)) );--_event-font-size: var(--slotted-control-font-size-sm, 12px);--_event-radius: var(--slotted-event-calendar-event-radius, var(--slotted-radius-sm, 4px));--_tint: 14%;--_tint-hover: 21%;--_tint-active: 27%;--_edge: 34%;--_edge-hover: 50%;--_tint-dark: 24%;--_tint-hover-dark: 32%;--_tint-active-dark: 38%;--_edge-dark: 44%;--_edge-hover-dark: 60%;--_ink-mix: 58%;--_hue: var(--slotted-text-muted, #5b6b7f);--_off: color-mix(in oklab, var(--slotted-text-muted, #5b6b7f) 7%, transparent);--_gutter: calc(var(--slotted-space-11, 3rem) + var(--slotted-space-4, .5rem));--_gap: var(--slotted-control-gap-md, 8px);--_line-xs: round(nearest, calc(1em * var(--slotted-line-height-xs, 1.4)), 1px);--_line-sm: round(nearest, calc(1em * var(--slotted-line-height-sm, 1.45)), 1px);--_base: var(--slotted-event-calendar-background, var(--slotted-surface, #ffffff));background-color:var(--slotted-event-calendar-background, transparent);box-sizing:border-box;color:var(--slotted-text, #0f172a);display:flex;flex-direction:column;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-control-font-size-md, 13px);gap:var(--slotted-space-5, .75rem);min-block-size:0;min-inline-size:0}[data-ui=event-calendar] *,[data-ui=event-calendar] *:before,[data-ui=event-calendar] *:after{box-sizing:border-box}[data-ui=event-calendar]>[data-part=header]{align-items:center;display:grid;grid-template-areas:\"title navigation views filter actions\";grid-template-columns:minmax(0,1fr) auto auto auto auto;row-gap:var(--slotted-space-4, .5rem)}[data-ui=event-calendar]>[data-part=header]>[data-part=title]{font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--slotted-font-size-lg, 1rem);font-weight:var(--slotted-font-weight-semibold, 600);grid-area:title;line-height:var(--slotted-line-height-lg, 1.5);margin:0;min-inline-size:0;overflow-wrap:anywhere}[data-ui=event-calendar] [data-part=navigation]{align-items:center;display:inline-flex;gap:var(--slotted-space-2, .25rem);grid-area:navigation;margin-inline-start:var(--slotted-space-6, 1rem)}[data-ui=event-calendar] [data-part=views]{display:flex;grid-area:views;margin-inline-start:var(--slotted-space-5, .75rem);min-inline-size:0}[data-ui=event-calendar] [data-part=filter]{grid-area:filter;margin-inline-start:var(--_gap)}[data-ui=event-calendar]>[data-part=header]>[data-part=actions]{align-items:center;display:inline-flex;gap:var(--_gap);grid-area:actions;margin-inline-start:var(--_gap)}[data-ui=event-calendar] [data-part=today],[data-ui=event-calendar] [data-part=filter],[data-ui=event-calendar] [data-part=previous],[data-ui=event-calendar] [data-part=next]{align-items:center;appearance:none;background-color:var(--slotted-control-surface, #ffffff);block-size:var(--slotted-control-height-md, 34px);border:var(--slotted-border-width-thin, 1px) solid var(--slotted-control-border-color, #bfc7d1);border-radius:var(--slotted-control-radius, 4px);box-shadow:var(--slotted-control-shadow, none);color:var(--slotted-text, #0f172a);cursor:pointer;display:inline-flex;font:inherit;font-weight:var(--slotted-font-weight-medium, 500);gap:var(--slotted-control-gap-md, 8px);justify-content:center;padding-block:0;padding-inline:var(--slotted-control-padding-inline-md, 13px);touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);white-space:nowrap;-webkit-tap-highlight-color:transparent}[data-ui=event-calendar] [data-part=previous],[data-ui=event-calendar] [data-part=next]{inline-size:var(--slotted-control-height-md, 34px);padding-inline:0}[data-ui=event-calendar] [data-part=today]:hover:not([data-disabled]),[data-ui=event-calendar] [data-part=filter]:hover:not([data-disabled]),[data-ui=event-calendar] [data-part=previous]:hover:not([data-disabled]),[data-ui=event-calendar] [data-part=next]:hover:not([data-disabled]){background-color:var(--slotted-tone-secondary-subtle-hover, #eef1f5)}[data-ui=event-calendar] [data-part=today]:active:not([data-disabled]),[data-ui=event-calendar] [data-part=filter]:active:not([data-disabled]),[data-ui=event-calendar] [data-part=previous]:active:not([data-disabled]),[data-ui=event-calendar] [data-part=next]:active:not([data-disabled]),[data-ui=event-calendar] [data-part=filter][aria-expanded=true]{background-color:var(--slotted-tone-secondary-subtle-active, #e2e8f0);transition-duration:var(--slotted-duration-instant)}[data-ui=event-calendar] [data-part=previous]>[data-ui=icon],[data-ui=event-calendar] [data-part=next]>[data-ui=icon],[data-ui=event-calendar] [data-part=filter]>[data-ui=icon]{--slotted-icon-size: var(--slotted-control-icon-size-md, 16px)}[data-ui=event-calendar] [data-part=previous]>[data-ui=icon]{rotate:180deg}[data-ui=event-calendar]:dir(rtl) [data-part=previous]>[data-ui=icon]{rotate:0deg}[data-ui=event-calendar]:dir(rtl) [data-part=next]>[data-ui=icon]{rotate:180deg}[data-ui=event-calendar] [data-part=filter]>[data-ui=icon]{color:var(--slotted-text-muted, #5b6b7f)}[data-ui=event-calendar] [data-part=today]:focus-visible,[data-ui=event-calendar] [data-part=filter]:focus-visible,[data-ui=event-calendar] [data-part=previous]:focus-visible,[data-ui=event-calendar] [data-part=next]:focus-visible,[data-ui=event-calendar] [data-part=day-number]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=event-calendar] [data-part=day]:focus-visible,[data-ui=event-calendar] [data-part=column-header]:focus-visible,[data-ui=event-calendar] [data-part=all-day-cell]:focus-visible,[data-ui=event-calendar] [data-part=column]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-width, 2px) * -1)}[data-ui=event-calendar] [data-part=event]:focus-visible,[data-ui=event-calendar] [data-part=more]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:1px;z-index:3}[data-ui=event-calendar]>[data-part=body]{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;position:relative}[data-ui=event-calendar]>[data-part=body][data-ui=context-menu]{--slotted-context-menu-mark-width: 0px}[data-ui=event-calendar][data-layout=list]>[data-part=body]{overflow-y:auto;overscroll-behavior:contain}[data-ui=event-calendar]>[data-part=body]>[data-part=loader]{inset-block-start:0;inset-inline:0;pointer-events:none;position:absolute;z-index:4}[data-ui=event-calendar]>[data-part=body]>[data-part=error]{margin-block-end:var(--slotted-space-5, .75rem)}[data-ui=event-calendar]>[data-part=body][aria-busy=true] [data-part=event]{opacity:.6}[data-ui=event-calendar] [data-part=month]{flex:1 0 auto;border-block-start:var(--_rule-width) solid var(--_rule);border-collapse:separate;border-inline-start:var(--_rule-width) solid var(--_rule);border-spacing:0;inline-size:100%;table-layout:fixed}[data-ui=event-calendar] [data-part=weekday],[data-ui=event-calendar] [data-part=week-number-header]{color:var(--slotted-text-muted, #5b6b7f);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--_line-xs);overflow:hidden;padding-block:var(--slotted-space-3, .375rem);padding-inline:var(--slotted-space-3, .375rem);text-align:start;text-overflow:ellipsis;white-space:nowrap}[data-ui=event-calendar] [data-part=month] [data-part=weekday],[data-ui=event-calendar] [data-part=month] [data-part=week-number-header]{border-block-end:var(--_rule-width) solid var(--_rule);border-inline-end:var(--_rule-width) solid var(--_rule)}[data-ui=event-calendar] [data-part=week-number-header],[data-ui=event-calendar] [data-part=week-number]{inline-size:calc(var(--slotted-space-9, 2rem) + var(--slotted-space-2, .25rem))}[data-ui=event-calendar] [data-part=week-number]{border-block-end:var(--_rule-width) solid var(--_rule);border-inline-end:var(--_rule-width) solid var(--_rule);color:var(--slotted-text-muted, #5b6b7f);font-size:var(--slotted-font-size-xs, .75rem);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-regular, 400);padding-block-start:var(--slotted-space-4, .5rem);text-align:center;vertical-align:top}[data-ui=event-calendar] [data-part=day]{--_pad: var(--_air);border-block-end:var(--_rule-width) solid var(--_rule);border-inline-end:var(--_rule-width) solid var(--_rule);padding:var(--_pad);position:relative;vertical-align:top}[data-ui=event-calendar] [data-part=day][data-non-working],[data-ui=event-calendar] [data-part=column][data-non-working],[data-ui=event-calendar] [data-part=all-day-cell][data-non-working]{background-color:var(--slotted-event-calendar-off-background, var(--_off))}[data-ui=event-calendar] [data-part=day][data-selected],[data-ui=event-calendar] [data-part=all-day-cell][data-selected]{--_run-edge: var(--slotted-border-width-thin, 1px);--_run-color: var( --slotted-event-calendar-selection-border-color, var(--slotted-tone-accent-border, #2563eb) );--_run-start: 0px;--_run-end: 0px;--_run-direction: 1;background-color:var( --slotted-event-calendar-selection-background, var(--slotted-tone-accent-surface, #eff6ff) );box-shadow:inset 0 var(--_run-edge) 0 0 var(--_run-color),inset 0 calc(var(--_run-edge) * -1) 0 0 var(--_run-color),inset calc(var(--_run-start) * var(--_run-direction)) 0 0 0 var(--_run-color),inset calc(var(--_run-end) * var(--_run-direction) * -1) 0 0 0 var(--_run-color)}[data-ui=event-calendar]:dir(rtl) [data-part=day][data-selected],[data-ui=event-calendar]:dir(rtl) [data-part=all-day-cell][data-selected]{--_run-direction: -1}[data-ui=event-calendar] [data-part=day][data-selected]:not([data-selected]+*),[data-ui=event-calendar] [data-part=all-day-cell][data-selected]:not([data-selected]+*){--_run-start: var(--_run-edge)}[data-ui=event-calendar] [data-part=day][data-selected]:not(:has(+[data-selected])),[data-ui=event-calendar] [data-part=all-day-cell][data-selected]:not(:has(+[data-selected])){--_run-end: var(--_run-edge)}[data-ui=event-calendar] [data-part=day-header]{align-items:center;display:flex;gap:var(--slotted-space-2, .25rem);justify-content:space-between;margin-block-end:var(--_air);min-inline-size:0}[data-ui=event-calendar] [data-part=day-content]{color:var(--slotted-text-muted, #5b6b7f);font-size:var(--slotted-font-size-xs, .75rem);line-height:var(--_line-xs);min-inline-size:0;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;white-space:nowrap}[data-ui=event-calendar] [data-part=day-number]{align-items:center;appearance:none;background-color:transparent;block-size:var(--_event-size);border:0;border-radius:var(--slotted-radius-full, 9999px);color:inherit;cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;font-size:var(--_event-font-size);font-variant-numeric:tabular-nums;justify-content:center;min-inline-size:var(--_event-size);padding-block:0;padding-inline:var(--slotted-space-2, .25rem);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=event-calendar] [data-part=day-number]:hover:not([data-disabled]){background-color:var(--slotted-tone-secondary-subtle-hover, #eef1f5)}[data-ui=event-calendar] [data-part=day-number]:active:not([data-disabled]){background-color:var(--slotted-tone-secondary-subtle-active, #e2e8f0);transition-duration:var(--slotted-duration-instant)}[data-ui=event-calendar] [data-part=day][data-outside-month] [data-part=day-number]{color:var(--slotted-text-muted, #5b6b7f)}[data-ui=event-calendar] [data-today]>[data-part=day-header] [data-part=day-number],[data-ui=event-calendar] [data-part=column-header][data-today] [data-part=day-number]{background-color:var( --slotted-event-calendar-today-background, var(--slotted-tone-accent-solid, #2563eb) );color:var(--slotted-event-calendar-today-color, var(--slotted-tone-accent-on-solid, #ffffff));font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=event-calendar] [data-part=day-events],[data-ui=event-calendar] [data-part=all-day-cell]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(var(--slotted-event-calendar-lanes, 3),var(--_event-size));row-gap:var(--_air)}[data-ui=event-calendar] [data-part=day-events]{container:slotted-event-calendar-day / inline-size;grid-template-rows:repeat(var(--slotted-event-calendar-lanes, 3),var(--_event-size)) var(--_event-size);position:relative}[data-ui=event-calendar] [data-part=day-events]>[data-part=event],[data-ui=event-calendar] [data-part=all-day-cell]>[data-part=event]{grid-column:1;grid-row:var(--slotted-event-lane, 1);justify-self:start}[data-ui=event-calendar] [data-part=day-events]>[data-part=more]{grid-column:1;grid-row:-2 / -1;justify-self:start}[data-ui=event-calendar] [data-part=event]{align-items:center;appearance:none;background-color:transparent;border:var(--slotted-border-width-thin, 1px) solid transparent;border-radius:var(--_event-radius);color:var(--slotted-text, #0f172a);cursor:pointer;display:flex;font:inherit;font-size:var(--_event-font-size);gap:var(--slotted-space-2, .25rem);line-height:var(--_line-xs);margin:0;min-inline-size:0;overflow:hidden;padding-block:0;padding-inline:var(--slotted-space-3, .375rem);text-align:start;text-decoration:none;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=event-calendar] [data-part=event][data-color=\"1\"]{--_hue: var(--slotted-data-1, #2563eb)}[data-ui=event-calendar] [data-part=event][data-color=\"2\"]{--_hue: var(--slotted-data-2, #ea580c)}[data-ui=event-calendar] [data-part=event][data-color=\"3\"]{--_hue: var(--slotted-data-3, #0891b2)}[data-ui=event-calendar] [data-part=event][data-color=\"4\"]{--_hue: var(--slotted-data-4, #dc2626)}[data-ui=event-calendar] [data-part=event][data-color=\"5\"]{--_hue: var(--slotted-data-5, #7c3aed)}[data-ui=event-calendar] [data-part=event][data-color=\"6\"]{--_hue: var(--slotted-data-6, #a16207)}[data-ui=event-calendar] [data-part=event][data-color=\"7\"]{--_hue: var(--slotted-data-7, #c026d3)}[data-ui=event-calendar] [data-part=event][data-color=\"8\"]{--_hue: var(--slotted-data-8, #16a34a)}[data-ui=event-calendar] [data-part=event-time],[data-ui=event-calendar] [data-part=event-title],[data-ui=event-calendar] [data-part=event-location],[data-ui=event-calendar] [data-part=more],[data-ui=event-calendar] [data-part=hour],[data-ui=event-calendar] [data-part=zone],[data-ui=event-calendar] [data-part=selection],[data-ui=event-calendar] [data-part=offset-change]{unicode-bidi:plaintext}[data-ui=event-calendar] [data-part=event-time]{color:var(--slotted-text-muted, #5b6b7f);flex:0 0 auto;font-variant-numeric:tabular-nums;white-space:nowrap}[data-ui=event-calendar] [data-part=event-title]{flex:0 1 auto;font-weight:var(--slotted-font-weight-medium, 500);min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=event-calendar] [data-part=event-location]{color:var(--slotted-text-muted, #5b6b7f);min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=event-calendar] [data-part=event-meta],[data-ui=event-calendar] [data-part=continuation]{block-size:1px;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui=event-calendar] [data-part=day-events]>[data-part=event]:not([data-bar]){position:relative;block-size:var(--_event-size);inline-size:100%;padding-inline:var(--slotted-space-2, .25rem)}[data-ui=event-calendar] [data-part=day-events]>[data-part=event]:not([data-bar]):before,[data-ui=event-calendar] [data-part=list-events] [data-part=event]:before{background-color:var(--_hue);block-size:var(--slotted-space-4, .5rem);border-radius:var(--slotted-radius-full, 9999px);content:\"\";flex:0 0 auto;inline-size:var(--slotted-space-4, .5rem)}[data-ui=event-calendar] [data-part=day-events]>[data-part=event]:not([data-bar]):hover:not([data-disabled]){background-color:var(--slotted-tone-secondary-subtle-hover, #eef1f5)}[data-ui=event-calendar] [data-part=day-events]>[data-part=event]:not([data-bar]):active:not([data-disabled],[data-open]){background-color:var(--slotted-tone-secondary-subtle-active, #e2e8f0);transition-duration:var(--slotted-duration-instant)}[data-ui=event-calendar] [data-part=day-events]>[data-part=event]:not([data-bar])[data-open]{background-color:light-dark(color-mix(in oklab,var(--_hue) var(--_tint),var(--_base)),color-mix(in oklab,var(--_hue) var(--_tint-dark),var(--_base)))}[data-ui=event-calendar] [data-part=event][data-bar],[data-ui=event-calendar] [data-part=column]>[data-part=event]{--_ground: light-dark( color-mix(in oklab, var(--_hue) var(--_tint), var(--_base)), color-mix(in oklab, var(--_hue) var(--_tint-dark), var(--_base)) );--_ink: color-mix(in oklab, var(--_hue) var(--_ink-mix), var(--slotted-text, #0f172a));background-color:var(--_ground);border-color:light-dark(color-mix(in oklab,var(--_hue) var(--_edge),var(--_base)),color-mix(in oklab,var(--_hue) var(--_edge-dark),var(--_base)));color:var(--_ink)}[data-ui=event-calendar] [data-part=event][data-bar] [data-part=event-time],[data-ui=event-calendar] [data-part=event][data-bar] [data-part=event-location],[data-ui=event-calendar] [data-part=column]>[data-part=event]>[data-part=event-time],[data-ui=event-calendar] [data-part=column]>[data-part=event]>[data-part=event-location]{color:color-mix(in oklab,var(--_ink) 72%,var(--_ground))}[data-ui=event-calendar] [data-part=event][data-bar]:hover:not([data-disabled],[data-open],[data-dragging],[data-context]),[data-ui=event-calendar] [data-part=column]>[data-part=event]:hover:not([data-disabled],[data-open],[data-dragging],[data-context]){--_ground: light-dark( color-mix(in oklab, var(--_hue) var(--_tint-hover), var(--_base)), color-mix(in oklab, var(--_hue) var(--_tint-hover-dark), var(--_base)) );border-color:light-dark(color-mix(in oklab,var(--_hue) var(--_edge-hover),var(--_base)),color-mix(in oklab,var(--_hue) var(--_edge-hover-dark),var(--_base)))}[data-ui=event-calendar] [data-part=event][data-bar]:active:not([data-disabled],[data-open],[data-dragging],[data-context]),[data-ui=event-calendar] [data-part=column]>[data-part=event]:active:not([data-disabled],[data-open],[data-dragging],[data-context]){--_ground: light-dark( color-mix(in oklab, var(--_hue) var(--_tint-active), var(--_base)), color-mix(in oklab, var(--_hue) var(--_tint-active-dark), var(--_base)) );transition-duration:var(--slotted-duration-instant)}[data-ui=event-calendar] [data-part=event][data-bar][data-open],[data-ui=event-calendar] [data-part=column]>[data-part=event][data-open],[data-ui=event-calendar] [data-part=event][data-bar][data-context],[data-ui=event-calendar] [data-part=column]>[data-part=event][data-context],[data-ui=event-calendar] [data-part=event][data-bar][data-dragging],[data-ui=event-calendar] [data-part=column]>[data-part=event][data-dragging]{--_ground: color-mix(in oklab, var(--_hue) 80%, #000000);--_ink: #ffffff;border-color:var(--_ground)}[data-ui=event-calendar] [data-part=event][data-bar][data-dragging][data-drop-invalid],[data-ui=event-calendar] [data-part=column]>[data-part=event][data-dragging][data-drop-invalid]{--_ground: light-dark( color-mix(in oklab, var(--_hue) var(--_tint), var(--_base)), color-mix(in oklab, var(--_hue) var(--_tint-dark), var(--_base)) );--_ink: color-mix(in oklab, var(--_hue) var(--_ink-mix), var(--slotted-text, #0f172a));border-color:var(--slotted-tone-danger-border, #dc2626);border-style:dashed}[data-ui=event-calendar]:has([data-part=event][data-drop-invalid]),[data-ui=event-calendar]:has([data-part=event][data-drop-invalid]) *{cursor:not-allowed}[data-ui=event-calendar] [data-part=event][data-bar][data-open]:hover:not([data-disabled]),[data-ui=event-calendar] [data-part=column]>[data-part=event][data-open]:hover:not([data-disabled]){--_ground: color-mix(in oklab, var(--_hue) 70%, #000000)}[data-ui=event-calendar] [data-part=event][data-bar][data-open]:active:not([data-disabled]),[data-ui=event-calendar] [data-part=column]>[data-part=event][data-open]:active:not([data-disabled]){--_ground: color-mix(in oklab, var(--_hue) 60%, #000000);transition-duration:var(--slotted-duration-instant)}[data-ui=event-calendar] [data-part=column]>[data-part=event]:not([data-short]):after{background-image:linear-gradient(to bottom,transparent,var(--_ground));block-size:min(var(--slotted-space-6, 1rem),45%);border-end-end-radius:inherit;border-end-start-radius:inherit;content:\"\";inset-block-end:0;inset-inline:0;pointer-events:none;position:absolute}[data-ui=event-calendar] [data-part=event][data-past]:not([data-open],[data-dragging]){--_tint: 7%;--_tint-hover: 13%;--_edge: 20%;--_tint-dark: 12%;--_tint-hover-dark: 19%;--_edge-dark: 26%;--_ink-mix: 30%}[data-ui=event-calendar] [data-part=day-events]>[data-part=event][data-past]:not([data-bar]):before{opacity:.55}[data-ui=event-calendar] [data-part=day-events]>[data-part=event][data-past]:not([data-bar]){color:var(--slotted-text-muted, #5b6b7f)}[data-ui=event-calendar] [data-part=list-events] [data-part=event][data-past]:before{opacity:.55}[data-ui=event-calendar] [data-part=list-events] [data-part=event][data-past]{color:var(--slotted-text-muted, #5b6b7f)}[data-ui=event-calendar] [data-part=event][data-bar]{block-size:var(--_event-size);inline-size:calc(var(--slotted-event-span, 1) * (100% + 2 * var(--_pad, 0px) + var(--_rule-width)) - 2 * var(--_pad, 0px) - var(--_rule-width));inset-block-start:0;inset-inline-start:0;position:absolute;z-index:1}[data-ui=event-calendar] [data-part=event][data-bar][data-continues-before]{border-end-start-radius:0;border-start-start-radius:0;padding-inline-start:var(--slotted-space-1, .125rem)}[data-ui=event-calendar] [data-part=event][data-bar][data-continues-after]{border-end-end-radius:0;border-start-end-radius:0;padding-inline-end:var(--slotted-space-1, .125rem)}[data-ui=event-calendar] [data-part=event][data-bar]>[data-ui=icon][data-edge]{color:color-mix(in oklab,var(--_hue) 70%,var(--slotted-text, #0f172a))}[data-ui=event-calendar] [data-part=event][data-bar]>[data-ui=icon][data-edge=start]{rotate:180deg}[data-ui=event-calendar] [data-part=event][data-bar]>[data-ui=icon][data-edge=end]{margin-inline-start:auto}[data-ui=event-calendar]:dir(rtl) [data-part=event][data-bar]>[data-ui=icon][data-edge=start]{rotate:0deg}[data-ui=event-calendar]:dir(rtl) [data-part=event][data-bar]>[data-ui=icon][data-edge=end]{rotate:180deg}[data-ui=event-calendar] [data-part=event][data-status=tentative][data-bar]:not([data-open],[data-dragging]),[data-ui=event-calendar] [data-part=column]>[data-part=event][data-status=tentative]:not([data-open],[data-dragging]){--_tint: 0%;--_tint-hover: 7%;--_tint-active: 12%;--_tint-dark: 0%;--_tint-hover-dark: 12%;--_tint-active-dark: 18%;border-color:var(--_hue);border-style:dashed}[data-ui=event-calendar] [data-part=event][data-status=cancelled]{color:var(--slotted-text-muted, #5b6b7f)}[data-ui=event-calendar] [data-part=event][data-status=cancelled] [data-part=event-title]{text-decoration:line-through}[data-ui=event-calendar] [data-part=event][data-editable]{cursor:grab;touch-action:none}[data-ui=event-calendar] [data-part=event][data-dragging]{box-shadow:var(--slotted-shadow-md, none);cursor:grabbing;pointer-events:none;z-index:5}[data-ui=event-calendar] [data-part=resize-handle]{display:flex;inset-block-end:0;inset-inline:0;align-items:center;block-size:var(--slotted-space-4, .5rem);cursor:ns-resize;justify-content:center;position:absolute;touch-action:none;z-index:1}[data-ui=event-calendar] [data-part=event][data-bar]>[data-part=resize-handle]{block-size:auto;cursor:ew-resize;inline-size:var(--slotted-space-4, .5rem);inset-block:0;inset-inline:auto 0}[data-ui=event-calendar] [data-part=resize-handle]:before{background-color:var(--_ink, var(--_hue));block-size:var(--slotted-border-width-thick, 2px);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inline-size:var(--slotted-space-6, 1rem);opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=event-calendar] [data-part=event][data-bar]>[data-part=resize-handle]:before{block-size:var(--slotted-space-4, .5rem);inline-size:var(--slotted-border-width-thick, 2px)}[data-ui=event-calendar] [data-part=event]:hover:not([data-disabled])>[data-part=resize-handle]:before,[data-ui=event-calendar] [data-part=event]:focus-visible>[data-part=resize-handle]:before,[data-ui=event-calendar] [data-part=event][data-dragging]>[data-part=resize-handle]:before{opacity:1;transition-timing-function:var(--slotted-easing-enter)}[data-ui=event-calendar] [data-part=more]{align-items:center;appearance:none;background-color:transparent;block-size:var(--_event-size);border:var(--slotted-border-width-thin, 1px) solid transparent;border-radius:var(--_event-radius);color:var(--slotted-text-muted, #5b6b7f);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--_event-font-size);font-weight:var(--slotted-font-weight-medium, 500);gap:.3em;max-inline-size:100%;overflow:hidden;padding-block:0;padding-inline:var(--slotted-space-2, .25rem);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);white-space:nowrap}[data-ui=event-calendar] [data-part=more]:hover:not([data-disabled]),[data-ui=event-calendar] [data-part=more][aria-expanded=true]{background-color:var(--slotted-tone-secondary-subtle-hover, #eef1f5);color:var(--slotted-text, #0f172a)}[data-ui=event-calendar] [data-part=more]:active:not([data-disabled]){background-color:var(--slotted-tone-secondary-subtle-active, #e2e8f0);transition-duration:var(--slotted-duration-instant)}@container slotted-event-calendar-day (max-width: 7.5rem){[data-ui=event-calendar] [data-part=day-events]>[data-part=event]:not([data-bar])>[data-part=event-time]{display:none}}@container slotted-event-calendar-event (max-width: 4.5rem){[data-ui=event-calendar] [data-part=column]>[data-part=event]>[data-part=event-time],[data-ui=event-calendar] [data-part=column]>[data-part=event]>[data-part=event-location]{display:none}[data-ui=event-calendar] [data-part=column]>[data-part=event]{padding-inline:var(--slotted-space-2, .25rem)}}@container slotted-event-calendar-event (max-width: 2rem){[data-ui=event-calendar] [data-part=column]>[data-part=event]>[data-part=event-title]{block-size:1px;clip-path:inset(50%);inline-size:1px;overflow:hidden;position:absolute;white-space:nowrap}}@container slotted-event-calendar-event (max-width: 4.5rem){[data-ui=event-calendar] [data-part=column]>[data-part=more]>span{display:none}}[data-ui=event-calendar] [data-part=time-grid]{border-block-start:var(--_rule-width) solid var(--_rule);display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0}[data-ui=event-calendar] [data-part=time-head]{border-block-end:var(--_rule-width) solid var(--_rule);overflow:hidden;scrollbar-gutter:stable}[data-ui=event-calendar] [data-part=columns],[data-ui=event-calendar] [data-part=all-day-row],[data-ui=event-calendar] [data-part=time-row]{display:grid;grid-template-columns:var(--_gutter) repeat(var(--slotted-event-calendar-days, 7),minmax(0,1fr))}[data-ui=event-calendar] [data-part=columns]{border-block-end:var(--_rule-width) solid var(--_rule)}[data-ui=event-calendar] [data-part=zone]{align-self:end;color:var(--slotted-text-muted, #5b6b7f);font-size:var(--slotted-font-size-xs, .75rem);font-variant-numeric:tabular-nums;line-height:var(--_line-xs);overflow:hidden;padding-block:var(--slotted-space-3, .375rem);padding-inline:var(--slotted-space-2, .25rem) var(--slotted-space-3, .375rem);text-align:end;text-overflow:ellipsis;white-space:nowrap}[data-ui=event-calendar] [data-part=column-header]{align-items:center;border-inline-start:var(--_rule-width) solid var(--_rule);display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);min-inline-size:0;padding-block:var(--slotted-space-3, .375rem);padding-inline:var(--_air)}[data-ui=event-calendar] [data-part=column-header] [data-part=weekday]{max-inline-size:100%;padding:0}[data-ui=event-calendar] [data-part=column-header][data-today] [data-part=weekday]{color:var(--slotted-tone-accent-text, #1d4ed8)}[data-ui=event-calendar] [data-part=column-header] [data-part=day-number]{block-size:var(--slotted-control-inner-size-lg, 28px);font-size:var(--slotted-font-size-lg, 1rem);font-weight:var(--slotted-font-weight-medium, 500);min-inline-size:var(--slotted-control-inner-size-lg, 28px)}[data-ui=event-calendar] [data-part=column-header] [data-part=day-content],[data-ui=event-calendar] [data-part=offset-change]{color:var(--slotted-text-muted, #5b6b7f);font-size:var(--slotted-font-size-xs, .75rem);line-height:var(--_line-xs);max-inline-size:100%;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}[data-ui=event-calendar] [data-part=all-day-label]{color:var(--slotted-text-muted, #5b6b7f);font-size:var(--slotted-font-size-xs, .75rem);hyphens:auto;line-height:var(--_line-xs);overflow-wrap:break-word;padding-block:calc(var(--_air) + (var(--_event-size) - 1lh) / 2);padding-inline:var(--slotted-space-2, .25rem) var(--slotted-space-3, .375rem);text-align:end}[data-ui=event-calendar] [data-part=all-day-cell]{--_pad: var(--_air);border-inline-start:var(--_rule-width) solid var(--_rule);min-inline-size:0;padding:var(--_pad);position:relative}[data-ui=event-calendar] [data-part=scroller]{flex:1 1 40rem;max-block-size:max-content;min-block-size:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}[data-ui=event-calendar] [data-part=gutter]{display:flex;flex-direction:column;min-inline-size:0}[data-ui=event-calendar] [data-part=hour]{block-size:var(--_hour);color:var(--slotted-text-muted, #5b6b7f);flex:0 0 auto;font-size:var(--slotted-font-size-xs, .75rem);font-variant-numeric:tabular-nums;line-height:var(--_line-xs);overflow:hidden;padding-inline-end:var(--slotted-space-3, .375rem);text-align:end;text-overflow:ellipsis;translate:0 calc(var(--_line-xs) / -2);white-space:nowrap}[data-ui=event-calendar] [data-part=hour]:nth-child(1 of[data-part=hour]){visibility:hidden}[data-ui=event-calendar] [data-part=column]{background-image:linear-gradient(to bottom,var(--_rule) var(--_rule-width),transparent var(--_rule-width)),linear-gradient(to bottom,color-mix(in oklab,var(--_rule) 45%,transparent) var(--_rule-width),transparent var(--_rule-width));background-size:100% var(--_hour),100% calc(var(--_hour) * var(--slotted-event-calendar-slot, 30) / 60);border-inline-start:var(--_rule-width) solid var(--_rule);min-inline-size:0;position:relative}[data-ui=event-calendar] [data-part=column][data-today]{background-color:color-mix(in oklab,var(--slotted-tone-accent-surface, #eff6ff) 50%,transparent)}[data-ui=event-calendar] [data-part=column]>[data-part=event],[data-ui=event-calendar] [data-part=column]>[data-part=more],[data-ui=event-calendar] [data-part=column]>[data-part=selection]{--_room: calc(100% - var(--slotted-space-5, .75rem));--_share: calc(var(--_room) / var(--slotted-event-columns, 1));block-size:max(calc(var(--slotted-event-length, 30) * var(--_hour) / 60 - var(--_air)),var(--_event-size));inline-size:calc(var(--_share) * var(--slotted-event-span, 1) - var(--_air));inset-block-start:calc(var(--slotted-event-start, 0) * var(--_hour) / 60 + var(--_air) / 2);inset-inline-start:calc(var(--_share) * var(--slotted-event-column, 0) + var(--_air));position:absolute}[data-ui=event-calendar] [data-part=column]>[data-part=event]{align-content:start;align-items:start;container:slotted-event-calendar-event / inline-size;flex-direction:column;gap:0;padding-block:var(--slotted-space-1, .125rem);z-index:1}[data-ui=event-calendar] [data-part=column]>[data-part=event]>*{flex-shrink:0}[data-ui=event-calendar] [data-part=column]>[data-part=event]>[data-part=event-title]{max-inline-size:100%;order:-1}[data-ui=event-calendar] [data-part=column]>[data-part=event]:not([data-short])>[data-part=event-title]{-webkit-box-orient:vertical;display:-webkit-box;hyphens:auto;-webkit-line-clamp:3;line-clamp:3;overflow-wrap:break-word;white-space:normal}[data-ui=event-calendar] [data-part=column]>[data-part=event]>[data-part=event-location],[data-ui=event-calendar] [data-part=column]>[data-part=event]>[data-part=event-time]{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis}[data-ui=event-calendar] [data-part=column]>[data-part=event][data-short]{align-items:center;flex-direction:row;gap:var(--slotted-space-2, .25rem);padding-block:0}[data-ui=event-calendar] [data-part=column]>[data-part=event][data-short]>[data-part=event-title]{flex:0 0 auto;max-inline-size:100%}[data-ui=event-calendar] [data-part=column]>[data-part=event][data-short]>[data-part=event-time]{flex:1 1 0;min-inline-size:0}[data-ui=event-calendar] [data-part=column]>[data-part=event][data-clipped-start],[data-ui=event-calendar] [data-part=column]>[data-part=event][data-continues-before]{border-block-start-style:dashed;border-start-end-radius:0;border-start-start-radius:0}[data-ui=event-calendar] [data-part=column]>[data-part=event][data-clipped-end],[data-ui=event-calendar] [data-part=column]>[data-part=event][data-continues-after]{border-block-end-style:dashed;border-end-end-radius:0;border-end-start-radius:0}[data-ui=event-calendar] [data-part=column]>[data-part=more]{align-items:start;container:slotted-event-calendar-event / inline-size;background-color:color-mix(in oklab,var(--slotted-text-muted, #5b6b7f) 9%,var(--_base));border-color:color-mix(in oklab,var(--slotted-text-muted, #5b6b7f) 24%,var(--_base));padding-block:var(--slotted-space-1, .125rem);z-index:1}[data-ui=event-calendar] [data-part=column]>[data-part=more]:hover:not([data-disabled]),[data-ui=event-calendar] [data-part=column]>[data-part=more][aria-expanded=true]{background-color:color-mix(in oklab,var(--slotted-text-muted, #5b6b7f) 15%,var(--_base))}[data-ui=event-calendar] [data-part=column]>[data-part=more]:active:not([data-disabled]){background-color:color-mix(in oklab,var(--slotted-text-muted, #5b6b7f) 21%,var(--_base))}[data-ui=event-calendar] [data-part=column]>[data-part=more][data-overlay]{align-items:center;background-color:var(--_base);block-size:auto;border-radius:var(--slotted-radius-full, 9999px);box-shadow:var(--slotted-shadow-sm, none);container-type:normal;inline-size:auto;inset-block-start:calc((var(--slotted-event-start, 0) + var(--slotted-event-length, 30)) * var(--_hour) / 60 - var(--_air));inset-inline:auto var(--slotted-space-4, .5rem);line-height:var(--_line-xs);translate:0 -100%;padding-block:0;padding-inline:var(--slotted-space-3, .375rem);z-index:3}[data-ui=event-calendar] [data-part=column]>[data-part=more][data-overlay]>span{display:none}[data-ui=event-calendar] [data-part=column]>[data-part=selection]{background-color:var( --slotted-event-calendar-selection-background, var(--slotted-tone-accent-surface, #eff6ff) );border:var(--slotted-border-width-thin, 1px) solid var( --slotted-event-calendar-selection-border-color, var(--slotted-tone-accent-border, #2563eb) );border-radius:var(--_event-radius);color:var(--slotted-tone-accent-text, #1d4ed8);font-size:var(--_event-font-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-medium, 500);inline-size:calc(var(--_room) - var(--_air));inset-inline-start:var(--_air);line-height:var(--_line-xs);overflow:hidden;padding-block:var(--slotted-space-1, .125rem);padding-inline:var(--slotted-space-3, .375rem);pointer-events:none;text-overflow:ellipsis;white-space:nowrap;z-index:2}[data-ui=event-calendar] [data-part=off-hours]{background-color:var(--slotted-event-calendar-off-background, var(--_off));block-size:calc(var(--slotted-event-length, 0) * var(--_hour) / 60);inset-block-start:calc(var(--slotted-event-start, 0) * var(--_hour) / 60);inset-inline:0;pointer-events:none;position:absolute}[data-ui=event-calendar] [data-part=now],[data-ui=event-calendar] [data-part=offset-line]{inset-block-start:calc(var(--slotted-event-start, 0) * var(--_hour) / 60);inset-inline:0;pointer-events:none;position:absolute}[data-ui=event-calendar] [data-part=now]{border-block-start:var(--slotted-border-width-thick, 2px) solid var(--slotted-event-calendar-now-color, var(--slotted-tone-accent-solid, #2563eb));translate:0 -50%;z-index:2}[data-ui=event-calendar] [data-part=now]:before{background-color:var( --slotted-event-calendar-now-color, var(--slotted-tone-accent-solid, #2563eb) );block-size:var(--slotted-space-4, .5rem);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inline-size:var(--slotted-space-4, .5rem);inset-block-start:calc(var(--slotted-space-4, .5rem) / -2 - var(--slotted-border-width-thick, 2px) / 2);inset-inline-start:calc(var(--slotted-space-4, .5rem) / -2);position:absolute}[data-ui=event-calendar] [data-part=offset-line]{border-block-start:var(--slotted-border-width-thin, 1px) dashed var(--slotted-border-strong, #78899c);z-index:1}[data-ui=event-calendar]>[data-part=body]>[data-part=list]{border-block-start:var(--_rule-width) solid var(--_rule);display:flex;flex-direction:column}[data-ui=event-calendar] [data-part=list-day]{border-block-end:var(--_rule-width) solid var(--_rule);column-gap:var(--slotted-space-6, 1rem);display:grid;grid-template-columns:calc(var(--slotted-space-12, 4rem) * 2) minmax(0,1fr);padding-block:var(--slotted-space-4, .5rem)}[data-ui=event-calendar] [data-part=list-day-heading]{display:flex;flex-direction:column;margin:0;padding-block:var(--slotted-space-3, .375rem)}[data-ui=event-calendar] [data-part=list-weekday]{color:var(--slotted-text-muted, #5b6b7f);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--_line-xs)}[data-ui=event-calendar] [data-part=list-date]{font-size:var(--slotted-font-size-sm, .8125rem);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--_line-sm)}[data-ui=event-calendar] [data-part=list-day][data-today] [data-part=list-day-heading],[data-ui=event-calendar] [data-part=list-day][data-today] [data-part=list-weekday]{color:var(--slotted-tone-accent-text, #1d4ed8)}[data-ui=event-calendar] [data-part=list-events]{display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);list-style:none;margin:0;padding:0}[data-ui=event-calendar] [data-part=list-events] [data-part=event]{align-items:start;column-gap:var(--slotted-space-4, .5rem);display:grid;font-size:var(--slotted-font-size-sm, .8125rem);grid-template-columns:calc(var(--slotted-space-12, 4rem) * 2.5) auto minmax(0,1fr);inline-size:100%;line-height:var(--_line-sm);min-block-size:var(--slotted-control-height-md, 34px);padding-block:var(--slotted-space-3, .375rem);padding-inline:var(--slotted-space-3, .375rem)}[data-ui=event-calendar] [data-part=list-events] [data-part=event]:before{grid-column:2;grid-row:1;margin-block-start:calc((1lh - var(--slotted-space-4, .5rem)) / 2)}[data-ui=event-calendar] [data-part=list-events] [data-part=event-time]{grid-column:1;grid-row:1;white-space:normal}[data-ui=event-calendar] [data-part=list-events] [data-part=event-title]{grid-column:3;grid-row:1;overflow-wrap:break-word;white-space:normal}[data-ui=event-calendar] [data-part=list-events] [data-part=event-location]{font-size:var(--slotted-font-size-xs, .75rem);grid-column:3;line-height:var(--_line-xs);grid-row:2;overflow-wrap:break-word;white-space:normal}[data-ui=event-calendar] [data-part=list-events] [data-part=event]:hover:not([data-disabled]){background-color:var(--slotted-tone-secondary-subtle-hover, #eef1f5)}[data-ui=event-calendar] [data-part=list-events] [data-part=event]:active:not([data-disabled],[data-open],[data-context]){background-color:var(--slotted-tone-secondary-subtle-active, #e2e8f0);transition-duration:var(--slotted-duration-instant)}[data-ui=event-calendar] [data-part=list-events] [data-part=event][data-open],[data-ui=event-calendar] [data-part=list-events] [data-part=event][data-context]{background-color:light-dark(color-mix(in oklab,var(--_hue) var(--_tint),var(--_base)),color-mix(in oklab,var(--_hue) var(--_tint-dark),var(--_base)))}[data-ui=event-calendar] [data-part=list-events] [data-part=event][data-status=tentative]:before{background-color:transparent;border:var(--slotted-border-width-medium, 1.5px) solid var(--_hue)}[data-ui=event-calendar] [data-part=detail-day],[data-ui=event-calendar] [data-part=detail-range]{display:inline-block}[data-ui=event-calendar] [data-ui=popover]>[data-part=content]>[data-part=body],[data-ui=event-calendar] [data-ui=drawer] [data-part=panel]>[data-part=body]{display:grid;gap:var(--slotted-space-5, .75rem)}[data-ui=event-calendar] [data-part=list-events][data-layout=stacked] [data-part=event]{grid-template-columns:auto minmax(0,1fr)}[data-ui=event-calendar] [data-part=list-events][data-layout=stacked] [data-part=event]:before{grid-column:1}[data-ui=event-calendar] [data-part=list-events][data-layout=stacked] [data-part=event-title]{grid-column:2;grid-row:1}[data-ui=event-calendar] [data-part=list-events][data-layout=stacked] [data-part=event-time]{font-size:var(--slotted-font-size-xs, .75rem);grid-column:2;grid-row:2;line-height:var(--_line-xs)}[data-ui=event-calendar] [data-part=list-events][data-layout=stacked] [data-part=event-location]{grid-column:2;grid-row:3}[data-ui=event-calendar] [data-part=empty]{align-items:center;color:var(--slotted-text-muted, #5b6b7f);display:flex;flex-direction:column;gap:var(--slotted-space-5, .75rem);padding-block:var(--slotted-space-10, 2.5rem);padding-inline:var(--slotted-space-6, 1rem);text-align:center}@container slotted-event-calendar (max-width: 959px){[data-ui=event-calendar]>[data-part=header]{grid-template-areas:\"title title navigation navigation\" \"views . filter actions\";grid-template-columns:auto minmax(0,1fr) auto auto}[data-ui=event-calendar] [data-part=navigation]{justify-self:end}[data-ui=event-calendar] [data-part=views]{margin-inline-start:0}}@container slotted-event-calendar (max-width: 599px){[data-ui=event-calendar][data-part=root]{--_gutter: calc(var(--slotted-space-10, 2.5rem) + var(--slotted-space-2, .25rem))}[data-ui=event-calendar] [data-part=list-day]{grid-template-columns:minmax(0,1fr);row-gap:var(--slotted-space-1, .125rem)}[data-ui=event-calendar] [data-part=list-day-heading]{align-items:baseline;column-gap:var(--slotted-space-3, .375rem);flex-direction:row;flex-wrap:wrap}[data-ui=event-calendar] [data-part=list-events] [data-part=event]{grid-template-columns:auto minmax(0,1fr)}[data-ui=event-calendar] [data-part=list-events] [data-part=event]:before{grid-column:1}[data-ui=event-calendar] [data-part=list-events] [data-part=event-title]{grid-column:2;grid-row:1}[data-ui=event-calendar] [data-part=list-events] [data-part=event-time]{font-size:var(--slotted-font-size-xs, .75rem);grid-column:2;grid-row:2;line-height:var(--_line-xs)}[data-ui=event-calendar] [data-part=list-events] [data-part=event-location]{grid-column:2;grid-row:3}[data-ui=event-calendar] [data-part=month] [data-part=day]{--_event-size: var(--slotted-space-3, .375rem);--_air: var(--slotted-space-1, .125rem)}[data-ui=event-calendar] [data-part=month] [data-part=day-header]{margin-block-end:var(--slotted-space-2, .25rem)}[data-ui=event-calendar] [data-part=month] [data-part=day-number]{block-size:var(--slotted-control-inner-size-sm, 22px);min-inline-size:var(--slotted-control-inner-size-sm, 22px)}[data-ui=event-calendar] [data-part=month] [data-part=day-number]:after{content:\"\";inset:0;position:absolute}[data-ui=event-calendar] [data-part=month] [data-part=event]{padding:0;pointer-events:none}[data-ui=event-calendar] [data-part=column]>[data-part=event]{background-color:light-dark(color-mix(in oklab,var(--_hue) var(--_tint-active),var(--_base)),color-mix(in oklab,var(--_hue) var(--_tint-active-dark),var(--_base)));border-color:var(--_hue);padding:0}[data-ui=event-calendar] [data-part=column]>[data-part=more]{justify-content:center;padding-inline:0}[data-ui=event-calendar] [data-part=month] [data-part=event][data-bar]{background-color:var(--_hue);border-color:var(--_hue);border-radius:var(--slotted-radius-full, 9999px)}[data-ui=event-calendar] [data-part=month] [data-part=event]:not([data-bar]){inline-size:var(--slotted-space-4, .5rem)}[data-ui=event-calendar] [data-part=month] [data-part=event]:before{block-size:var(--slotted-space-3, .375rem);inline-size:var(--slotted-space-3, .375rem)}[data-ui=event-calendar] [data-part=month] [data-part=event][data-bar]:before,[data-ui=event-calendar] [data-part=month] [data-part=event][data-bar]:after{display:none}[data-ui=event-calendar] [data-part=month] [data-part=event]>*,[data-ui=event-calendar] [data-part=column]>[data-part=event]>*,[data-ui=event-calendar] [data-part=month] [data-part=day-content],[data-ui=event-calendar] [data-part=month] [data-part=more]>*,[data-ui=event-calendar] [data-part=column-header] [data-part=day-content],[data-ui=event-calendar] [data-part=offset-change]{block-size:1px;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui=event-calendar] [data-part=month] [data-part=more]{block-size:auto;font-size:var(--slotted-font-size-xs, .75rem);line-height:var(--_line-xs);padding:0;pointer-events:none}[data-ui=event-calendar] [data-part=month] [data-part=day-events]{grid-template-rows:repeat(var(--slotted-event-calendar-lanes, 3),var(--_event-size)) auto}[data-ui=event-calendar] [data-part=column-header] [data-part=day-number]{block-size:var(--slotted-control-inner-size-md, 24px);font-size:var(--slotted-font-size-md, .875rem);min-inline-size:var(--slotted-control-inner-size-md, 24px)}[data-ui=event-calendar] [data-part=column]>[data-part=event],[data-ui=event-calendar] [data-part=column]>[data-part=more]{--_room: 100%}}@container slotted-event-calendar (max-width: 479px){[data-ui=event-calendar]>[data-part=header]{grid-template-areas:\"title title title title\" \"navigation . filter actions\" \"views views views views\";grid-template-columns:auto minmax(0,1fr) auto auto}[data-ui=event-calendar] [data-part=navigation]{justify-self:start;margin-inline-start:0}[data-ui=event-calendar] [data-part=views]>*{flex:1 1 auto;min-inline-size:0}[data-ui=event-calendar] [data-part=filter]{inline-size:var(--slotted-control-height-md, 34px);padding-inline:0}[data-ui=event-calendar] [data-part=filter]>[data-ui=icon]:last-child{display:none}[data-ui=event-calendar] [data-part=filter]>:not([data-ui=icon]){block-size:1px;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;position:absolute;white-space:nowrap}}@media(forced-colors:active){[data-ui=event-calendar] [data-part=event]:before,[data-ui=event-calendar] [data-part=now]:before{forced-color-adjust:none}[data-ui=event-calendar] [data-part=event][data-bar],[data-ui=event-calendar] [data-part=column]>[data-part=event]{border-color:currentcolor}[data-ui=event-calendar] [data-part=day-events]>[data-part=event]:not([data-bar]),[data-ui=event-calendar] [data-part=list-events] [data-part=event]{border-color:Canvas}[data-ui=event-calendar] [data-today]>[data-part=day-header] [data-part=day-number],[data-ui=event-calendar] [data-part=column-header][data-today] [data-part=day-number]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}}}\n", "@layer slotted.components{[data-ui=visually-hidden]:not([data-focusable]:focus-within){block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;inset-block-start:0;inset-inline-start:0;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlContextMenuTrigger, selector: "[slContextMenuTriggerFor]", inputs: ["slContextMenuTriggerFor", "longPress", "longPressDelay"], exportAs: ["slContextMenuTrigger"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlMenu, selector: "sl-menu", inputs: ["value", "aria-label", "aria-describedby", "open", "align", "side", "size", "mount", "strategy", "sideOffset", "alignOffset", "collisionPadding", "submenuOpenDelay", "submenuCloseDelay", "typeaheadTimeout", "disabled", "loop", "typeahead", "openOnHover", "closeOnSelect", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "loading"], outputs: ["openChange", "openChangeRequest"], exportAs: ["slMenu"] }, { kind: "component", type: SlMenuItem, selector: "button[slMenuItem], a[slMenuItem], button[slMenuCheckboxItem], button[slMenuRadioItem]", inputs: ["disabled", "textValue", "tone", "shortcut", "closeOnSelect", "value", "checked"], outputs: ["checkedChange", "checkedChangeRequest", "select"], exportAs: ["slMenuItem"] }, { kind: "directive", type: SlMenuTrigger, selector: "[slMenuTriggerFor]", inputs: ["slMenuTriggerFor"], exportAs: ["slMenuTrigger"] }, { kind: "component", type: SlDrawer, selector: "sl-drawer", inputs: ["open", "extent", "mode", "side", "size", "mount", "escape", "outsidePress", "back", "modal", "loading", "messages", "drag", "scrimFrom", "minExtent", "maxExtent", "snapPoints", "container", "initialFocus", "finalFocus"], outputs: ["openChange", "extentChange", "openChangeRequest", "extentChangeRequest", "closed"], exportAs: ["slDrawer"] }, { kind: "directive", type: SlDrawerBody, selector: "[slDrawerBody]", inputs: ["inset"], exportAs: ["slDrawerBody"] }, { kind: "component", type: SlDrawerClose, selector: "[slDrawerClose]", inputs: ["value"], exportAs: ["slDrawerClose"] }, { kind: "directive", type: SlDrawerDescription, selector: "[slDrawerDescription]", exportAs: ["slDrawerDescription"] }, { kind: "directive", type: SlDrawerHeader, selector: "[slDrawerHeader]", exportAs: ["slDrawerHeader"] }, { kind: "component", type: SlDrawerResizer, selector: "[slDrawerResizer]", inputs: ["step", "largeStep"], exportAs: ["slDrawerResizer"] }, { kind: "directive", type: SlDrawerTitle, selector: "[slDrawerTitle]", exportAs: ["slDrawerTitle"] }, { kind: "directive", type: SlPopover, selector: "[slPopover]", inputs: ["open", "defaultOpen", "disabled", "size", "width", "side", "align", "mount", "strategy", "messages", "initialFocus", "finalFocus", "arrow", "autoFocus", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "sideOffset", "alignOffset", "collisionPadding", "arrowPadding"], outputs: ["openChange", "openChangeRequest"], exportAs: ["slPopover"] }, { kind: "directive", type: SlPopoverBody, selector: "[slPopoverBody]", exportAs: ["slPopoverBody"] }, { kind: "component", type: SlPopoverClose, selector: "button[slPopoverClose]", exportAs: ["slPopoverClose"] }, { kind: "component", type: SlPopoverContent, selector: "[slPopoverContent]", exportAs: ["slPopoverContent"] }, { kind: "directive", type: SlPopoverDescription, selector: "[slPopoverDescription]", exportAs: ["slPopoverDescription"] }, { kind: "directive", type: SlPopoverHeader, selector: "[slPopoverHeader]", exportAs: ["slPopoverHeader"] }, { kind: "directive", type: SlPopoverLayer, selector: "ng-template[slPopoverLayer]", exportAs: ["slPopoverLayer"] }, { kind: "directive", type: SlPopoverTitle, selector: "[slPopoverTitle]", exportAs: ["slPopoverTitle"] }, { kind: "component", type: SlProgressBar, selector: "[slProgressBar]", inputs: ["value", "min", "max", "buffer", "showValue", "valueText", "format", "locale", "wave", "placement"], exportAs: ["slProgressBar"] }, { kind: "component", type: SlSegment, selector: "[slSegment]", inputs: ["value", "disabled"], exportAs: ["slSegment"] }, { kind: "component", type: SlSegmentedControl, selector: "[slSegmentedControl]", inputs: ["value", "defaultValue", "name", "size", "orientation", "condense", "fullWidth", "disabled", "readOnly", "invalid", "required"], outputs: ["valueChange"], exportAs: ["slSegmentedControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlEventCalendar, decorators: [{
+            type: Component,
+            args: [{ selector: '[slEventCalendar]', standalone: true, exportAs: 'slEventCalendar', imports: [
+                        NgTemplateOutlet,
+                        SlContextMenuTrigger,
+                        SlGlyph,
+                        SlIcon,
+                        SlMenu,
+                        SlMenuItem,
+                        SlMenuTrigger,
+                        SlDrawer,
+                        SlDrawerBody,
+                        SlDrawerClose,
+                        SlDrawerDescription,
+                        SlDrawerHeader,
+                        SlDrawerResizer,
+                        SlDrawerTitle,
+                        SlPopover,
+                        SlPopoverBody,
+                        SlPopoverClose,
+                        SlPopoverContent,
+                        SlPopoverDescription,
+                        SlPopoverHeader,
+                        SlPopoverLayer,
+                        SlPopoverTitle,
+                        SlProgressBar,
+                        SlSegment,
+                        SlSegmentedControl,
+                    ], template: `
+    @if (header()) {
+      <div data-part="header">
+        <div
+          data-part="title"
+          role="heading"
+          aria-live="polite"
+          [attr.aria-level]="level()"
+          [attr.id]="titleId"
+        >
+          {{ title() }}
+        </div>
+        <div data-part="navigation" role="group" [attr.aria-label]="t('navigation')">
+          <button
+            data-part="previous"
+            type="button"
+            [attr.aria-label]="previousLabel()"
+            (click)="step(-1, $event)"
+          >
+            <span slIcon><svg slGlyph name="chevron-right"></svg></span>
+          </button>
+          <button data-part="today" type="button" (click)="goToday($event)">
+            {{ t('today') }}
+          </button>
+          <button
+            data-part="next"
+            type="button"
+            [attr.aria-label]="nextLabel()"
+            (click)="step(1, $event)"
+          >
+            <span slIcon><svg slGlyph name="chevron-right"></svg></span>
+          </button>
+        </div>
+        @if (views().length > 1) {
+          <div data-part="views">
+            <div
+              slSegmentedControl
+              fullWidth
+              [attr.aria-label]="t('views')"
+              [value]="currentView()"
+              (valueChange)="onViewRequest($event)"
+            >
+              @for (name of views(); track name) {
+                <label slSegment [value]="name">{{ viewLabel(name) }}</label>
+              }
+            </div>
+          </div>
+        }
+        @if (calendars().length > 1) {
+          <button #filterButton data-part="filter" type="button" [slMenuTriggerFor]="filterMenu">
+            <span slIcon><svg slGlyph name="funnel"></svg></span>
+            <span>{{ t('calendars') }}</span>
+            <span slIcon><svg slGlyph name="chevron-down"></svg></span>
+          </button>
+          <sl-menu #filterMenu>
+            @for (entry of calendars(); track entry.key) {
+              <button
+                slMenuCheckboxItem
+                [checked]="shown().includes(entry.key)"
+                (checkedChangeRequest)="onCalendarRequest(entry.key, $event)"
+              >
+                <!-- The calendar's colour opens the label; the column before it is the
+                     check's, and a dot there drew the check over itself. -->
+                <svg aria-hidden="true" width="14" height="10" viewBox="0 0 14 10">
+                  <circle cx="5" cy="5" r="4" [style.fill]="swatch(entry.key)" />
+                </svg>
+                {{ entry.label }}
+              </button>
+            }
+          </sl-menu>
+        }
+        @if (actions()) {
+          <div data-part="actions"><ng-content select="[slEventCalendarActions]" /></div>
+        }
+      </div>
+    }
+
+    <!-- With a context menu the body is that family's target: one region for
+         every day, hour and event. -->
+    @if (contextMenu(); as items) {
+      <div
+        #body
+        data-part="body"
+        [slContextMenuTriggerFor]="contextMenuRef"
+        [attr.aria-busy]="loading() ? true : null"
+        (keydown)="onKeyDown($event)"
+        (pointerdown)="onPointerDown($event)"
+      >
+        <ng-container *ngTemplateOutlet="bodyContent" />
+      </div>
+      <sl-menu
+        #contextMenuRef
+        [aria-label]="contextLabel()"
+        (openChangeRequest)="onContextRequest($event)"
+      >
+        @if (contextOn(); as on) {
+          <ng-container
+            *ngTemplateOutlet="
+              items.template;
+              context: { $implicit: on.target };
+              injector: contextInjector()
+            "
+          />
+        }
+      </sl-menu>
+    } @else {
+      <div
+        #body
+        data-part="body"
+        [attr.aria-busy]="loading() ? true : null"
+        (keydown)="onKeyDown($event)"
+        (pointerdown)="onPointerDown($event)"
+      >
+        <ng-container *ngTemplateOutlet="bodyContent" />
+      </div>
+    }
+
+    <ng-template #bodyContent>
+      <div data-part="loader">
+        @if (loaderMounted()) {
+          <div
+            slProgressBar
+            hideLabel
+            size="sm"
+            [loading]="loading()"
+            [label]="t('loading')"
+            [delay]="loadingDelayValue()"
+            [minDuration]="loadingMinDurationValue()"
+          ></div>
+        }
+      </div>
+      @if (errorContent()) {
+        <div data-part="error"><ng-content select="[slEventCalendarError]" /></div>
+      }
+
+      @if (layout() === 'list') {
+        <div data-part="list">
+          @for (day of listDrawing(); track day.iso) {
+            <section
+              data-part="list-day"
+              [attr.aria-labelledby]="day.headingId"
+              [attr.data-date]="day.iso"
+              [attr.data-today]="day.today ? '' : null"
+            >
+              <div
+                data-part="list-day-heading"
+                role="heading"
+                [attr.aria-level]="level() + 1"
+                [attr.id]="day.headingId"
+                [attr.aria-label]="day.heading.label"
+              >
+                <span data-part="list-weekday">{{ day.heading.weekday }}</span>
+                <span data-part="list-date">{{ day.heading.date }}</span>
+              </div>
+              <ul data-part="list-events" role="list">
+                @for (view of day.events; track view.key) {
+                  <li>
+                    <ng-container
+                      *ngTemplateOutlet="eventTemplate; context: { $implicit: view, inGrid: false }"
+                    />
+                  </li>
+                }
+              </ul>
+            </section>
+          } @empty {
+            <div data-part="empty">
+              <p>{{ emptyText() }}</p>
+              <ng-content select="[slEventCalendarEmpty]" />
+            </div>
+          }
+        </div>
+      } @else if (currentView() === 'month') {
+        <table data-part="month" role="grid" [attr.aria-labelledby]="titleId">
+          <thead>
+            <tr data-part="weekdays">
+              @if (weekNumbersValue()) {
+                <th data-part="week-number-header" scope="col">
+                  <span data-ui="visually-hidden">{{ t('weekNumber') }}</span>
+                </th>
+              }
+              @for (name of monthDrawing().weekdays; track name.key) {
+                <th data-part="weekday" scope="col" [attr.abbr]="name.long">{{ name.short }}</th>
+              }
+            </tr>
+          </thead>
+          <tbody>
+            @for (row of monthDrawing().rows; track row.key) {
+              <tr data-part="week" [style.--slotted-event-calendar-lanes]="maxEventsValue()">
+                @if (weekNumbersValue()) {
+                  <th data-part="week-number" scope="row">{{ row.weekNumber }}</th>
+                }
+                @for (cell of row.cells; track cell.iso) {
+                  <td
+                    data-part="day"
+                    data-row="day"
+                    role="gridcell"
+                    [attr.data-date]="cell.iso"
+                    [attr.tabindex]="cell.tabIndex"
+                    [attr.aria-labelledby]="
+                      id + '-day-' + cell.iso + ' ' + id + '-day-' + cell.iso + '-count'
+                    "
+                    [attr.aria-selected]="selectionMode() === 'range' ? cell.selected : null"
+                    [attr.data-today]="cell.today ? '' : null"
+                    [attr.data-outside-month]="cell.outside ? '' : null"
+                    [attr.data-non-working]="cell.nonWorking ? '' : null"
+                    [attr.data-selected]="cell.selected ? '' : null"
+                  >
+                    <div data-part="day-header">
+                      <button
+                        data-part="day-number"
+                        type="button"
+                        tabindex="-1"
+                        [attr.id]="id + '-day-' + cell.iso"
+                        [attr.aria-label]="cell.label"
+                        [attr.aria-haspopup]="narrow() ? 'dialog' : null"
+                        (click)="drill(cell.date, $event)"
+                      >
+                        {{ cell.date.day }}
+                      </button>
+                      @if (dayContent(); as content) {
+                        <div data-part="day-content">
+                          <ng-container
+                            *ngTemplateOutlet="
+                              content.template;
+                              context: { $implicit: cell.date, view: currentView() }
+                            "
+                          />
+                        </div>
+                      }
+                      <span
+                        data-ui="visually-hidden"
+                        [attr.id]="id + '-day-' + cell.iso + '-count'"
+                        >{{ cell.count }}</span
+                      >
+                    </div>
+                    <div data-part="day-events">
+                      @for (view of cell.events; track view.key) {
+                        <ng-container
+                          *ngTemplateOutlet="
+                            eventTemplate;
+                            context: { $implicit: view, inGrid: true }
+                          "
+                        />
+                      }
+                      @for (text of cell.continuations; track $index) {
+                        <span data-part="continuation">{{ text }}</span>
+                      }
+                      @if (cell.more > 0) {
+                        <button
+                          data-part="more"
+                          type="button"
+                          tabindex="-1"
+                          aria-haspopup="dialog"
+                          [attr.aria-expanded]="moreIso() === cell.iso"
+                          [attr.aria-label]="cell.moreLabel"
+                          (click)="openMore(cell.date, $event)"
+                        >
+                          +{{ cell.more }}<span>{{ t('more') }}</span>
+                        </button>
+                      }
+                    </div>
+                  </td>
+                }
+              </tr>
+            }
+          </tbody>
+        </table>
+      } @else {
+        <div
+          data-part="time-grid"
+          role="grid"
+          [attr.aria-labelledby]="titleId"
+          [style.--slotted-event-calendar-days]="timeDrawing().days"
+          [style.--slotted-event-calendar-slot]="slotDurationValue()"
+        >
+          <div data-part="time-head" role="rowgroup">
+            <div data-part="columns" role="row">
+              <div data-part="zone" role="columnheader">{{ timeDrawing().zone }}</div>
+              @for (column of timeDrawing().headers; track column.iso) {
+                <div
+                  data-part="column-header"
+                  data-row="header"
+                  role="columnheader"
+                  [attr.data-date]="column.iso"
+                  [attr.tabindex]="column.tabIndex"
+                  [attr.data-today]="column.today ? '' : null"
+                  [attr.data-offset-change]="column.offsetShort === null ? null : ''"
+                >
+                  <span data-part="weekday" aria-hidden="true">{{ column.weekday }}</span>
+                  <button
+                    data-part="day-number"
+                    type="button"
+                    tabindex="-1"
+                    [attr.aria-label]="column.label"
+                    (click)="drill(column.date, $event)"
+                  >
+                    {{ column.date.day }}
+                  </button>
+                  @if (dayContent(); as content) {
+                    <div data-part="day-content">
+                      <ng-container
+                        *ngTemplateOutlet="
+                          content.template;
+                          context: { $implicit: column.date, view: currentView() }
+                        "
+                      />
+                    </div>
+                  }
+                  @if (column.offsetShort !== null) {
+                    <span
+                      data-part="offset-change"
+                      role="note"
+                      [attr.aria-label]="column.offsetLong"
+                      >{{ column.offsetShort }}</span
+                    >
+                  }
+                </div>
+              }
+            </div>
+            <div
+              data-part="all-day-row"
+              role="row"
+              [style.--slotted-event-calendar-lanes]="timeDrawing().lanes"
+            >
+              <div data-part="all-day-label" role="rowheader">{{ t('allDay') }}</div>
+              @for (cell of timeDrawing().allDay; track cell.iso) {
+                <div
+                  data-part="all-day-cell"
+                  data-row="all-day"
+                  role="gridcell"
+                  [attr.data-date]="cell.iso"
+                  [attr.tabindex]="cell.tabIndex"
+                  [attr.aria-selected]="selectionMode() === 'range' ? cell.selected : null"
+                  [attr.data-today]="cell.today ? '' : null"
+                  [attr.data-non-working]="cell.nonWorking ? '' : null"
+                  [attr.data-selected]="cell.selected ? '' : null"
+                >
+                  @for (view of cell.events; track view.key) {
+                    <ng-container
+                      *ngTemplateOutlet="eventTemplate; context: { $implicit: view, inGrid: true }"
+                    />
+                  }
+                  @for (text of cell.continuations; track $index) {
+                    <span data-part="continuation">{{ text }}</span>
+                  }
+                </div>
+              }
+            </div>
+          </div>
+          <div #scroller data-part="scroller" role="rowgroup">
+            <div data-part="time-row" role="row">
+              <div data-part="gutter" role="rowheader">
+                <span data-ui="visually-hidden">{{ t('timed') }}</span>
+                @for (hour of timeDrawing().hours; track hour.hour) {
+                  <span data-part="hour" aria-hidden="true">{{ hour.label }}</span>
+                }
+              </div>
+              @for (column of timeDrawing().columns; track column.iso) {
+                <div
+                  data-part="column"
+                  data-row="timed"
+                  role="gridcell"
+                  [attr.data-date]="column.iso"
+                  [attr.tabindex]="column.tabIndex"
+                  [attr.data-today]="column.today ? '' : null"
+                  [attr.data-non-working]="column.nonWorking ? '' : null"
+                >
+                  @for (off of column.offHours; track $index) {
+                    <div data-part="off-hours" aria-hidden="true" [style]="off"></div>
+                  }
+                  @if (column.offsetLine; as line) {
+                    <div data-part="offset-line" aria-hidden="true" [style]="line"></div>
+                  }
+                  @if (column.selection; as chosen) {
+                    <div data-part="selection" aria-hidden="true" [style]="chosen.style">
+                      {{ chosen.text }}
+                    </div>
+                  }
+                  @for (view of column.items; track view.key) {
+                    <ng-container
+                      *ngTemplateOutlet="eventTemplate; context: { $implicit: view, inGrid: true }"
+                    />
+                  }
+                  @for (entry of column.more; track $index) {
+                    <button
+                      data-part="more"
+                      type="button"
+                      tabindex="-1"
+                      aria-haspopup="dialog"
+                      [attr.aria-expanded]="moreIso() === column.iso"
+                      [attr.aria-label]="entry.label"
+                      [attr.data-overlay]="entry.overlay ? '' : null"
+                      [style]="entry.style"
+                      (click)="openMore(column.date, $event)"
+                    >
+                      +{{ entry.count }}<span>{{ t('more') }}</span>
+                    </button>
+                  }
+                  @if (column.now; as now) {
+                    <div data-part="now" aria-hidden="true" [style]="now"></div>
+                  }
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+      }
+    </ng-template>
+
+    <!-- Below the compact size class the "+N" panel and the detail are sheets
+         from the bottom edge, inside the root: a region that contains its fixed
+         layers (a phone frame, a pane) keeps them. -->
+    @if (narrow()) {
+      <sl-drawer
+        side="bottom"
+        [container]="host"
+        [finalFocus]="moreAnchor() ?? undefined"
+        [open]="moreIso() !== null"
+        (openChange)="onMoreOpen($event)"
+      >
+        @if (moreDate(); as date) {
+          <div slDrawerResizer></div>
+          <div slDrawerHeader>
+            <h2 slDrawerTitle>{{ dateLabel(date) }}</h2>
+            <button slDrawerClose></button>
+          </div>
+          <div slDrawerBody>
+            <ul
+              data-part="list-events"
+              data-layout="stacked"
+              role="list"
+              [attr.aria-label]="t('dayEvents', { day: dateLabel(date) })"
+            >
+              @for (view of moreViews(); track view.key) {
+                <li>
+                  <ng-container
+                    *ngTemplateOutlet="eventTemplate; context: { $implicit: view, inGrid: false }"
+                  />
+                </li>
+              }
+            </ul>
+          </div>
+        }
+      </sl-drawer>
+      @if (detail(); as template) {
+        <sl-drawer
+          side="bottom"
+          [container]="host"
+          [finalFocus]="detailAnchor() ?? undefined"
+          [open]="openOccurrence() !== null"
+          (openChangeRequest)="onDetailRequest($event)"
+        >
+          @if (openOccurrence(); as occurrence) {
+            <div slDrawerResizer></div>
+            <div slDrawerHeader>
+              <h2 slDrawerTitle>{{ occurrence.event.title }}</h2>
+              <p slDrawerDescription>
+                @if (whenOf(occurrence); as when) {
+                  @if (when.day !== null) {
+                    <span data-part="detail-day">{{ when.day }},</span>{{ ' ' }}
+                  }
+                  <span data-part="detail-range">{{ when.range }}</span>
+                }
+              </p>
+              <button slDrawerClose></button>
+            </div>
+            <div slDrawerBody>
+              <ng-container
+                *ngTemplateOutlet="
+                  template.template;
+                  context: { $implicit: occurrence, close: closeDetail }
+                "
+              />
+            </div>
+          }
+        </sl-drawer>
+      }
+    } @else {
+      <ng-container
+        slPopover
+        #morePopover="slPopover"
+        [portal]="false"
+        [open]="moreIso() !== null"
+        (openChange)="onMoreOpen($event)"
+      >
+        <ng-template slPopoverLayer>
+          <div slPopoverContent>
+            @if (moreDate(); as date) {
+              <div slPopoverHeader>
+                <div slPopoverTitle>{{ dateLabel(date) }}</div>
+                <button slPopoverClose></button>
+              </div>
+              <div slPopoverBody>
+                <ul
+                  data-part="list-events"
+                  data-layout="stacked"
+                  role="list"
+                  [attr.aria-label]="t('dayEvents', { day: dateLabel(date) })"
+                >
+                  @for (view of moreViews(); track view.key) {
+                    <li>
+                      <ng-container
+                        *ngTemplateOutlet="
+                          eventTemplate;
+                          context: { $implicit: view, inGrid: false }
+                        "
+                      />
+                    </li>
+                  }
+                </ul>
+              </div>
+            }
+          </div>
+        </ng-template>
+      </ng-container>
+
+      @if (detail(); as template) {
+        <ng-container
+          slPopover
+          #detailPopover="slPopover"
+          size="lg"
+          [portal]="false"
+          [open]="openOccurrence() !== null"
+          (openChangeRequest)="onDetailRequest($event)"
+        >
+          <ng-template slPopoverLayer>
+            <div slPopoverContent>
+              @if (openOccurrence(); as occurrence) {
+                <div slPopoverHeader>
+                  <div slPopoverTitle>{{ occurrence.event.title }}</div>
+                  <div slPopoverDescription>
+                    @if (whenOf(occurrence); as when) {
+                      @if (when.day !== null) {
+                        <span data-part="detail-day">{{ when.day }},</span>{{ ' ' }}
+                      }
+                      <span data-part="detail-range">{{ when.range }}</span>
+                    }
+                  </div>
+                  <button slPopoverClose></button>
+                </div>
+                <div slPopoverBody>
+                  <ng-container
+                    *ngTemplateOutlet="
+                      template.template;
+                      context: { $implicit: occurrence, close: closeDetail }
+                    "
+                  />
+                </div>
+              }
+            </div>
+          </ng-template>
+        </ng-container>
+      }
+    }
+
+    <ng-template #eventTemplate let-view let-inGrid="inGrid">
+      @if (view.href !== null) {
+        <a
+          data-part="event"
+          [attr.href]="view.href"
+          [attr.tabindex]="inGrid ? -1 : null"
+          [attr.data-key]="view.key"
+          [attr.data-all-day]="view.allDay ? '' : null"
+          [attr.data-bar]="view.bar ? '' : null"
+          [attr.data-color]="view.color"
+          [attr.data-status]="view.status"
+          [attr.data-open]="view.open ? '' : null"
+          [attr.data-continues-before]="view.continuesBefore ? '' : null"
+          [attr.data-continues-after]="view.continuesAfter ? '' : null"
+          [attr.data-clipped-start]="view.clippedStart ? '' : null"
+          [attr.data-clipped-end]="view.clippedEnd ? '' : null"
+          [attr.data-short]="view.short ? '' : null"
+          [attr.data-editable]="view.editable ? '' : null"
+          [attr.data-past]="view.past ? '' : null"
+          [attr.data-dragging]="view.dragging ? '' : null"
+          [attr.data-drop-invalid]="view.dropInvalid ? '' : null"
+          [attr.data-context]="view.context ? '' : null"
+          [style]="view.style"
+          ><ng-container *ngTemplateOutlet="eventContent; context: { $implicit: view }"
+        /></a>
+      } @else {
+        <button
+          data-part="event"
+          type="button"
+          [attr.tabindex]="inGrid ? -1 : null"
+          [attr.data-key]="view.key"
+          [attr.data-all-day]="view.allDay ? '' : null"
+          [attr.data-bar]="view.bar ? '' : null"
+          [attr.data-color]="view.color"
+          [attr.data-status]="view.status"
+          [attr.data-open]="view.open ? '' : null"
+          [attr.data-continues-before]="view.continuesBefore ? '' : null"
+          [attr.data-continues-after]="view.continuesAfter ? '' : null"
+          [attr.data-clipped-start]="view.clippedStart ? '' : null"
+          [attr.data-clipped-end]="view.clippedEnd ? '' : null"
+          [attr.data-short]="view.short ? '' : null"
+          [attr.data-editable]="view.editable ? '' : null"
+          [attr.data-past]="view.past ? '' : null"
+          [attr.data-dragging]="view.dragging ? '' : null"
+          [attr.data-drop-invalid]="view.dropInvalid ? '' : null"
+          [attr.data-context]="view.context ? '' : null"
+          [attr.aria-expanded]="hostsDetail() || currentOpen() !== null ? view.open : null"
+          [attr.aria-haspopup]="hostsDetail() ? 'dialog' : null"
+          [style]="view.style"
+          (click)="activate(view, $event)"
+        >
+          <ng-container *ngTemplateOutlet="eventContent; context: { $implicit: view }" />
+        </button>
+      }
+    </ng-template>
+
+    <ng-template #eventContent let-view>
+      @if (view.bar && view.continuesBefore) {
+        <span slIcon size="sm" data-edge="start"><svg slGlyph name="chevron-right"></svg></span>
+      }
+      @if (eventContentTemplate(); as custom) {
+        <ng-container
+          *ngTemplateOutlet="
+            custom.template;
+            context: {
+              $implicit: view.occurrence,
+              layout: view.layout,
+              date: view.date,
+              time: view.time,
+            }
+          "
+        />
+      } @else {
+        @if (view.time !== null) {
+          <span data-part="event-time">{{ view.time }}</span>
+        }
+        <span data-part="event-title">{{ view.title }}</span>
+        @if (view.location) {
+          <span data-part="event-location">{{ view.location }}</span>
+        }
+      }
+      <span data-part="event-meta">{{ view.meta }}</span>
+      @if (view.bar && view.continuesAfter) {
+        <span slIcon size="sm" data-edge="end"><svg slGlyph name="chevron-right"></svg></span>
+      }
+      @if (view.resizable) {
+        <span aria-hidden="true" data-part="resize-handle"></span>
+      }
+    </ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'event-calendar',
+                        'data-part': 'root',
+                        '[attr.data-view]': 'currentView()',
+                        '[attr.data-layout]': 'layout()',
+                        '[attr.data-loading]': "loading() ? '' : null",
+                        '[attr.data-slot-duration]': 'slotDurationValue()',
+                    }, styles: ["@layer slotted.components{[data-ui=event-calendar][data-part=root]{container:slotted-event-calendar / inline-size;--_rule: var(--slotted-event-calendar-rule-color, var(--slotted-border-subtle, #d8dee6));--_rule-width: var(--slotted-border-width-thin, 1px);--_air: var(--slotted-space-2, .25rem);--_hour: var( --slotted-event-calendar-hour-size, calc(var(--slotted-control-height-sm, 30px) * 2) );--_event-size: max( var(--slotted-control-inner-size-sm, 22px), calc(var(--slotted-target-min, 24px) - var(--_air)) );--_event-font-size: var(--slotted-control-font-size-sm, 12px);--_event-radius: var(--slotted-event-calendar-event-radius, var(--slotted-radius-sm, 4px));--_tint: 14%;--_tint-hover: 21%;--_tint-active: 27%;--_edge: 34%;--_edge-hover: 50%;--_tint-dark: 24%;--_tint-hover-dark: 32%;--_tint-active-dark: 38%;--_edge-dark: 44%;--_edge-hover-dark: 60%;--_ink-mix: 58%;--_hue: var(--slotted-text-muted, #5b6b7f);--_off: color-mix(in oklab, var(--slotted-text-muted, #5b6b7f) 7%, transparent);--_gutter: calc(var(--slotted-space-11, 3rem) + var(--slotted-space-4, .5rem));--_gap: var(--slotted-control-gap-md, 8px);--_line-xs: round(nearest, calc(1em * var(--slotted-line-height-xs, 1.4)), 1px);--_line-sm: round(nearest, calc(1em * var(--slotted-line-height-sm, 1.45)), 1px);--_base: var(--slotted-event-calendar-background, var(--slotted-surface, #ffffff));background-color:var(--slotted-event-calendar-background, transparent);box-sizing:border-box;color:var(--slotted-text, #0f172a);display:flex;flex-direction:column;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-control-font-size-md, 13px);gap:var(--slotted-space-5, .75rem);min-block-size:0;min-inline-size:0}[data-ui=event-calendar] *,[data-ui=event-calendar] *:before,[data-ui=event-calendar] *:after{box-sizing:border-box}[data-ui=event-calendar]>[data-part=header]{align-items:center;display:grid;grid-template-areas:\"title navigation views filter actions\";grid-template-columns:minmax(0,1fr) auto auto auto auto;row-gap:var(--slotted-space-4, .5rem)}[data-ui=event-calendar]>[data-part=header]>[data-part=title]{font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--slotted-font-size-lg, 1rem);font-weight:var(--slotted-font-weight-semibold, 600);grid-area:title;line-height:var(--slotted-line-height-lg, 1.5);margin:0;min-inline-size:0;overflow-wrap:anywhere}[data-ui=event-calendar] [data-part=navigation]{align-items:center;display:inline-flex;gap:var(--slotted-space-2, .25rem);grid-area:navigation;margin-inline-start:var(--slotted-space-6, 1rem)}[data-ui=event-calendar] [data-part=views]{display:flex;grid-area:views;margin-inline-start:var(--slotted-space-5, .75rem);min-inline-size:0}[data-ui=event-calendar] [data-part=filter]{grid-area:filter;margin-inline-start:var(--_gap)}[data-ui=event-calendar]>[data-part=header]>[data-part=actions]{align-items:center;display:inline-flex;gap:var(--_gap);grid-area:actions;margin-inline-start:var(--_gap)}[data-ui=event-calendar] [data-part=today],[data-ui=event-calendar] [data-part=filter],[data-ui=event-calendar] [data-part=previous],[data-ui=event-calendar] [data-part=next]{align-items:center;appearance:none;background-color:var(--slotted-control-surface, #ffffff);block-size:var(--slotted-control-height-md, 34px);border:var(--slotted-border-width-thin, 1px) solid var(--slotted-control-border-color, #bfc7d1);border-radius:var(--slotted-control-radius, 4px);box-shadow:var(--slotted-control-shadow, none);color:var(--slotted-text, #0f172a);cursor:pointer;display:inline-flex;font:inherit;font-weight:var(--slotted-font-weight-medium, 500);gap:var(--slotted-control-gap-md, 8px);justify-content:center;padding-block:0;padding-inline:var(--slotted-control-padding-inline-md, 13px);touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);white-space:nowrap;-webkit-tap-highlight-color:transparent}[data-ui=event-calendar] [data-part=previous],[data-ui=event-calendar] [data-part=next]{inline-size:var(--slotted-control-height-md, 34px);padding-inline:0}[data-ui=event-calendar] [data-part=today]:hover:not([data-disabled]),[data-ui=event-calendar] [data-part=filter]:hover:not([data-disabled]),[data-ui=event-calendar] [data-part=previous]:hover:not([data-disabled]),[data-ui=event-calendar] [data-part=next]:hover:not([data-disabled]){background-color:var(--slotted-tone-secondary-subtle-hover, #eef1f5)}[data-ui=event-calendar] [data-part=today]:active:not([data-disabled]),[data-ui=event-calendar] [data-part=filter]:active:not([data-disabled]),[data-ui=event-calendar] [data-part=previous]:active:not([data-disabled]),[data-ui=event-calendar] [data-part=next]:active:not([data-disabled]),[data-ui=event-calendar] [data-part=filter][aria-expanded=true]{background-color:var(--slotted-tone-secondary-subtle-active, #e2e8f0);transition-duration:var(--slotted-duration-instant)}[data-ui=event-calendar] [data-part=previous]>[data-ui=icon],[data-ui=event-calendar] [data-part=next]>[data-ui=icon],[data-ui=event-calendar] [data-part=filter]>[data-ui=icon]{--slotted-icon-size: var(--slotted-control-icon-size-md, 16px)}[data-ui=event-calendar] [data-part=previous]>[data-ui=icon]{rotate:180deg}[data-ui=event-calendar]:dir(rtl) [data-part=previous]>[data-ui=icon]{rotate:0deg}[data-ui=event-calendar]:dir(rtl) [data-part=next]>[data-ui=icon]{rotate:180deg}[data-ui=event-calendar] [data-part=filter]>[data-ui=icon]{color:var(--slotted-text-muted, #5b6b7f)}[data-ui=event-calendar] [data-part=today]:focus-visible,[data-ui=event-calendar] [data-part=filter]:focus-visible,[data-ui=event-calendar] [data-part=previous]:focus-visible,[data-ui=event-calendar] [data-part=next]:focus-visible,[data-ui=event-calendar] [data-part=day-number]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=event-calendar] [data-part=day]:focus-visible,[data-ui=event-calendar] [data-part=column-header]:focus-visible,[data-ui=event-calendar] [data-part=all-day-cell]:focus-visible,[data-ui=event-calendar] [data-part=column]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-width, 2px) * -1)}[data-ui=event-calendar] [data-part=event]:focus-visible,[data-ui=event-calendar] [data-part=more]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:1px;z-index:3}[data-ui=event-calendar]>[data-part=body]{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;position:relative}[data-ui=event-calendar]>[data-part=body][data-ui=context-menu]{--slotted-context-menu-mark-width: 0px}[data-ui=event-calendar][data-layout=list]>[data-part=body]{overflow-y:auto;overscroll-behavior:contain}[data-ui=event-calendar]>[data-part=body]>[data-part=loader]{inset-block-start:0;inset-inline:0;pointer-events:none;position:absolute;z-index:4}[data-ui=event-calendar]>[data-part=body]>[data-part=error]{margin-block-end:var(--slotted-space-5, .75rem)}[data-ui=event-calendar]>[data-part=body][aria-busy=true] [data-part=event]{opacity:.6}[data-ui=event-calendar] [data-part=month]{flex:1 0 auto;border-block-start:var(--_rule-width) solid var(--_rule);border-collapse:separate;border-inline-start:var(--_rule-width) solid var(--_rule);border-spacing:0;inline-size:100%;table-layout:fixed}[data-ui=event-calendar] [data-part=weekday],[data-ui=event-calendar] [data-part=week-number-header]{color:var(--slotted-text-muted, #5b6b7f);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--_line-xs);overflow:hidden;padding-block:var(--slotted-space-3, .375rem);padding-inline:var(--slotted-space-3, .375rem);text-align:start;text-overflow:ellipsis;white-space:nowrap}[data-ui=event-calendar] [data-part=month] [data-part=weekday],[data-ui=event-calendar] [data-part=month] [data-part=week-number-header]{border-block-end:var(--_rule-width) solid var(--_rule);border-inline-end:var(--_rule-width) solid var(--_rule)}[data-ui=event-calendar] [data-part=week-number-header],[data-ui=event-calendar] [data-part=week-number]{inline-size:calc(var(--slotted-space-9, 2rem) + var(--slotted-space-2, .25rem))}[data-ui=event-calendar] [data-part=week-number]{border-block-end:var(--_rule-width) solid var(--_rule);border-inline-end:var(--_rule-width) solid var(--_rule);color:var(--slotted-text-muted, #5b6b7f);font-size:var(--slotted-font-size-xs, .75rem);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-regular, 400);padding-block-start:var(--slotted-space-4, .5rem);text-align:center;vertical-align:top}[data-ui=event-calendar] [data-part=day]{--_pad: var(--_air);border-block-end:var(--_rule-width) solid var(--_rule);border-inline-end:var(--_rule-width) solid var(--_rule);padding:var(--_pad);position:relative;vertical-align:top}[data-ui=event-calendar] [data-part=day][data-non-working],[data-ui=event-calendar] [data-part=column][data-non-working],[data-ui=event-calendar] [data-part=all-day-cell][data-non-working]{background-color:var(--slotted-event-calendar-off-background, var(--_off))}[data-ui=event-calendar] [data-part=day][data-selected],[data-ui=event-calendar] [data-part=all-day-cell][data-selected]{--_run-edge: var(--slotted-border-width-thin, 1px);--_run-color: var( --slotted-event-calendar-selection-border-color, var(--slotted-tone-accent-border, #2563eb) );--_run-start: 0px;--_run-end: 0px;--_run-direction: 1;background-color:var( --slotted-event-calendar-selection-background, var(--slotted-tone-accent-surface, #eff6ff) );box-shadow:inset 0 var(--_run-edge) 0 0 var(--_run-color),inset 0 calc(var(--_run-edge) * -1) 0 0 var(--_run-color),inset calc(var(--_run-start) * var(--_run-direction)) 0 0 0 var(--_run-color),inset calc(var(--_run-end) * var(--_run-direction) * -1) 0 0 0 var(--_run-color)}[data-ui=event-calendar]:dir(rtl) [data-part=day][data-selected],[data-ui=event-calendar]:dir(rtl) [data-part=all-day-cell][data-selected]{--_run-direction: -1}[data-ui=event-calendar] [data-part=day][data-selected]:not([data-selected]+*),[data-ui=event-calendar] [data-part=all-day-cell][data-selected]:not([data-selected]+*){--_run-start: var(--_run-edge)}[data-ui=event-calendar] [data-part=day][data-selected]:not(:has(+[data-selected])),[data-ui=event-calendar] [data-part=all-day-cell][data-selected]:not(:has(+[data-selected])){--_run-end: var(--_run-edge)}[data-ui=event-calendar] [data-part=day-header]{align-items:center;display:flex;gap:var(--slotted-space-2, .25rem);justify-content:space-between;margin-block-end:var(--_air);min-inline-size:0}[data-ui=event-calendar] [data-part=day-content]{color:var(--slotted-text-muted, #5b6b7f);font-size:var(--slotted-font-size-xs, .75rem);line-height:var(--_line-xs);min-inline-size:0;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;white-space:nowrap}[data-ui=event-calendar] [data-part=day-number]{align-items:center;appearance:none;background-color:transparent;block-size:var(--_event-size);border:0;border-radius:var(--slotted-radius-full, 9999px);color:inherit;cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;font-size:var(--_event-font-size);font-variant-numeric:tabular-nums;justify-content:center;min-inline-size:var(--_event-size);padding-block:0;padding-inline:var(--slotted-space-2, .25rem);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=event-calendar] [data-part=day-number]:hover:not([data-disabled]){background-color:var(--slotted-tone-secondary-subtle-hover, #eef1f5)}[data-ui=event-calendar] [data-part=day-number]:active:not([data-disabled]){background-color:var(--slotted-tone-secondary-subtle-active, #e2e8f0);transition-duration:var(--slotted-duration-instant)}[data-ui=event-calendar] [data-part=day][data-outside-month] [data-part=day-number]{color:var(--slotted-text-muted, #5b6b7f)}[data-ui=event-calendar] [data-today]>[data-part=day-header] [data-part=day-number],[data-ui=event-calendar] [data-part=column-header][data-today] [data-part=day-number]{background-color:var( --slotted-event-calendar-today-background, var(--slotted-tone-accent-solid, #2563eb) );color:var(--slotted-event-calendar-today-color, var(--slotted-tone-accent-on-solid, #ffffff));font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=event-calendar] [data-part=day-events],[data-ui=event-calendar] [data-part=all-day-cell]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(var(--slotted-event-calendar-lanes, 3),var(--_event-size));row-gap:var(--_air)}[data-ui=event-calendar] [data-part=day-events]{container:slotted-event-calendar-day / inline-size;grid-template-rows:repeat(var(--slotted-event-calendar-lanes, 3),var(--_event-size)) var(--_event-size);position:relative}[data-ui=event-calendar] [data-part=day-events]>[data-part=event],[data-ui=event-calendar] [data-part=all-day-cell]>[data-part=event]{grid-column:1;grid-row:var(--slotted-event-lane, 1);justify-self:start}[data-ui=event-calendar] [data-part=day-events]>[data-part=more]{grid-column:1;grid-row:-2 / -1;justify-self:start}[data-ui=event-calendar] [data-part=event]{align-items:center;appearance:none;background-color:transparent;border:var(--slotted-border-width-thin, 1px) solid transparent;border-radius:var(--_event-radius);color:var(--slotted-text, #0f172a);cursor:pointer;display:flex;font:inherit;font-size:var(--_event-font-size);gap:var(--slotted-space-2, .25rem);line-height:var(--_line-xs);margin:0;min-inline-size:0;overflow:hidden;padding-block:0;padding-inline:var(--slotted-space-3, .375rem);text-align:start;text-decoration:none;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=event-calendar] [data-part=event][data-color=\"1\"]{--_hue: var(--slotted-data-1, #2563eb)}[data-ui=event-calendar] [data-part=event][data-color=\"2\"]{--_hue: var(--slotted-data-2, #ea580c)}[data-ui=event-calendar] [data-part=event][data-color=\"3\"]{--_hue: var(--slotted-data-3, #0891b2)}[data-ui=event-calendar] [data-part=event][data-color=\"4\"]{--_hue: var(--slotted-data-4, #dc2626)}[data-ui=event-calendar] [data-part=event][data-color=\"5\"]{--_hue: var(--slotted-data-5, #7c3aed)}[data-ui=event-calendar] [data-part=event][data-color=\"6\"]{--_hue: var(--slotted-data-6, #a16207)}[data-ui=event-calendar] [data-part=event][data-color=\"7\"]{--_hue: var(--slotted-data-7, #c026d3)}[data-ui=event-calendar] [data-part=event][data-color=\"8\"]{--_hue: var(--slotted-data-8, #16a34a)}[data-ui=event-calendar] [data-part=event-time],[data-ui=event-calendar] [data-part=event-title],[data-ui=event-calendar] [data-part=event-location],[data-ui=event-calendar] [data-part=more],[data-ui=event-calendar] [data-part=hour],[data-ui=event-calendar] [data-part=zone],[data-ui=event-calendar] [data-part=selection],[data-ui=event-calendar] [data-part=offset-change]{unicode-bidi:plaintext}[data-ui=event-calendar] [data-part=event-time]{color:var(--slotted-text-muted, #5b6b7f);flex:0 0 auto;font-variant-numeric:tabular-nums;white-space:nowrap}[data-ui=event-calendar] [data-part=event-title]{flex:0 1 auto;font-weight:var(--slotted-font-weight-medium, 500);min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=event-calendar] [data-part=event-location]{color:var(--slotted-text-muted, #5b6b7f);min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=event-calendar] [data-part=event-meta],[data-ui=event-calendar] [data-part=continuation]{block-size:1px;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui=event-calendar] [data-part=day-events]>[data-part=event]:not([data-bar]){position:relative;block-size:var(--_event-size);inline-size:100%;padding-inline:var(--slotted-space-2, .25rem)}[data-ui=event-calendar] [data-part=day-events]>[data-part=event]:not([data-bar]):before,[data-ui=event-calendar] [data-part=list-events] [data-part=event]:before{background-color:var(--_hue);block-size:var(--slotted-space-4, .5rem);border-radius:var(--slotted-radius-full, 9999px);content:\"\";flex:0 0 auto;inline-size:var(--slotted-space-4, .5rem)}[data-ui=event-calendar] [data-part=day-events]>[data-part=event]:not([data-bar]):hover:not([data-disabled]){background-color:var(--slotted-tone-secondary-subtle-hover, #eef1f5)}[data-ui=event-calendar] [data-part=day-events]>[data-part=event]:not([data-bar]):active:not([data-disabled],[data-open]){background-color:var(--slotted-tone-secondary-subtle-active, #e2e8f0);transition-duration:var(--slotted-duration-instant)}[data-ui=event-calendar] [data-part=day-events]>[data-part=event]:not([data-bar])[data-open]{background-color:light-dark(color-mix(in oklab,var(--_hue) var(--_tint),var(--_base)),color-mix(in oklab,var(--_hue) var(--_tint-dark),var(--_base)))}[data-ui=event-calendar] [data-part=event][data-bar],[data-ui=event-calendar] [data-part=column]>[data-part=event]{--_ground: light-dark( color-mix(in oklab, var(--_hue) var(--_tint), var(--_base)), color-mix(in oklab, var(--_hue) var(--_tint-dark), var(--_base)) );--_ink: color-mix(in oklab, var(--_hue) var(--_ink-mix), var(--slotted-text, #0f172a));background-color:var(--_ground);border-color:light-dark(color-mix(in oklab,var(--_hue) var(--_edge),var(--_base)),color-mix(in oklab,var(--_hue) var(--_edge-dark),var(--_base)));color:var(--_ink)}[data-ui=event-calendar] [data-part=event][data-bar] [data-part=event-time],[data-ui=event-calendar] [data-part=event][data-bar] [data-part=event-location],[data-ui=event-calendar] [data-part=column]>[data-part=event]>[data-part=event-time],[data-ui=event-calendar] [data-part=column]>[data-part=event]>[data-part=event-location]{color:color-mix(in oklab,var(--_ink) 72%,var(--_ground))}[data-ui=event-calendar] [data-part=event][data-bar]:hover:not([data-disabled],[data-open],[data-dragging],[data-context]),[data-ui=event-calendar] [data-part=column]>[data-part=event]:hover:not([data-disabled],[data-open],[data-dragging],[data-context]){--_ground: light-dark( color-mix(in oklab, var(--_hue) var(--_tint-hover), var(--_base)), color-mix(in oklab, var(--_hue) var(--_tint-hover-dark), var(--_base)) );border-color:light-dark(color-mix(in oklab,var(--_hue) var(--_edge-hover),var(--_base)),color-mix(in oklab,var(--_hue) var(--_edge-hover-dark),var(--_base)))}[data-ui=event-calendar] [data-part=event][data-bar]:active:not([data-disabled],[data-open],[data-dragging],[data-context]),[data-ui=event-calendar] [data-part=column]>[data-part=event]:active:not([data-disabled],[data-open],[data-dragging],[data-context]){--_ground: light-dark( color-mix(in oklab, var(--_hue) var(--_tint-active), var(--_base)), color-mix(in oklab, var(--_hue) var(--_tint-active-dark), var(--_base)) );transition-duration:var(--slotted-duration-instant)}[data-ui=event-calendar] [data-part=event][data-bar][data-open],[data-ui=event-calendar] [data-part=column]>[data-part=event][data-open],[data-ui=event-calendar] [data-part=event][data-bar][data-context],[data-ui=event-calendar] [data-part=column]>[data-part=event][data-context],[data-ui=event-calendar] [data-part=event][data-bar][data-dragging],[data-ui=event-calendar] [data-part=column]>[data-part=event][data-dragging]{--_ground: color-mix(in oklab, var(--_hue) 80%, #000000);--_ink: #ffffff;border-color:var(--_ground)}[data-ui=event-calendar] [data-part=event][data-bar][data-dragging][data-drop-invalid],[data-ui=event-calendar] [data-part=column]>[data-part=event][data-dragging][data-drop-invalid]{--_ground: light-dark( color-mix(in oklab, var(--_hue) var(--_tint), var(--_base)), color-mix(in oklab, var(--_hue) var(--_tint-dark), var(--_base)) );--_ink: color-mix(in oklab, var(--_hue) var(--_ink-mix), var(--slotted-text, #0f172a));border-color:var(--slotted-tone-danger-border, #dc2626);border-style:dashed}[data-ui=event-calendar]:has([data-part=event][data-drop-invalid]),[data-ui=event-calendar]:has([data-part=event][data-drop-invalid]) *{cursor:not-allowed}[data-ui=event-calendar] [data-part=event][data-bar][data-open]:hover:not([data-disabled]),[data-ui=event-calendar] [data-part=column]>[data-part=event][data-open]:hover:not([data-disabled]){--_ground: color-mix(in oklab, var(--_hue) 70%, #000000)}[data-ui=event-calendar] [data-part=event][data-bar][data-open]:active:not([data-disabled]),[data-ui=event-calendar] [data-part=column]>[data-part=event][data-open]:active:not([data-disabled]){--_ground: color-mix(in oklab, var(--_hue) 60%, #000000);transition-duration:var(--slotted-duration-instant)}[data-ui=event-calendar] [data-part=column]>[data-part=event]:not([data-short]):after{background-image:linear-gradient(to bottom,transparent,var(--_ground));block-size:min(var(--slotted-space-6, 1rem),45%);border-end-end-radius:inherit;border-end-start-radius:inherit;content:\"\";inset-block-end:0;inset-inline:0;pointer-events:none;position:absolute}[data-ui=event-calendar] [data-part=event][data-past]:not([data-open],[data-dragging]){--_tint: 7%;--_tint-hover: 13%;--_edge: 20%;--_tint-dark: 12%;--_tint-hover-dark: 19%;--_edge-dark: 26%;--_ink-mix: 30%}[data-ui=event-calendar] [data-part=day-events]>[data-part=event][data-past]:not([data-bar]):before{opacity:.55}[data-ui=event-calendar] [data-part=day-events]>[data-part=event][data-past]:not([data-bar]){color:var(--slotted-text-muted, #5b6b7f)}[data-ui=event-calendar] [data-part=list-events] [data-part=event][data-past]:before{opacity:.55}[data-ui=event-calendar] [data-part=list-events] [data-part=event][data-past]{color:var(--slotted-text-muted, #5b6b7f)}[data-ui=event-calendar] [data-part=event][data-bar]{block-size:var(--_event-size);inline-size:calc(var(--slotted-event-span, 1) * (100% + 2 * var(--_pad, 0px) + var(--_rule-width)) - 2 * var(--_pad, 0px) - var(--_rule-width));inset-block-start:0;inset-inline-start:0;position:absolute;z-index:1}[data-ui=event-calendar] [data-part=event][data-bar][data-continues-before]{border-end-start-radius:0;border-start-start-radius:0;padding-inline-start:var(--slotted-space-1, .125rem)}[data-ui=event-calendar] [data-part=event][data-bar][data-continues-after]{border-end-end-radius:0;border-start-end-radius:0;padding-inline-end:var(--slotted-space-1, .125rem)}[data-ui=event-calendar] [data-part=event][data-bar]>[data-ui=icon][data-edge]{color:color-mix(in oklab,var(--_hue) 70%,var(--slotted-text, #0f172a))}[data-ui=event-calendar] [data-part=event][data-bar]>[data-ui=icon][data-edge=start]{rotate:180deg}[data-ui=event-calendar] [data-part=event][data-bar]>[data-ui=icon][data-edge=end]{margin-inline-start:auto}[data-ui=event-calendar]:dir(rtl) [data-part=event][data-bar]>[data-ui=icon][data-edge=start]{rotate:0deg}[data-ui=event-calendar]:dir(rtl) [data-part=event][data-bar]>[data-ui=icon][data-edge=end]{rotate:180deg}[data-ui=event-calendar] [data-part=event][data-status=tentative][data-bar]:not([data-open],[data-dragging]),[data-ui=event-calendar] [data-part=column]>[data-part=event][data-status=tentative]:not([data-open],[data-dragging]){--_tint: 0%;--_tint-hover: 7%;--_tint-active: 12%;--_tint-dark: 0%;--_tint-hover-dark: 12%;--_tint-active-dark: 18%;border-color:var(--_hue);border-style:dashed}[data-ui=event-calendar] [data-part=event][data-status=cancelled]{color:var(--slotted-text-muted, #5b6b7f)}[data-ui=event-calendar] [data-part=event][data-status=cancelled] [data-part=event-title]{text-decoration:line-through}[data-ui=event-calendar] [data-part=event][data-editable]{cursor:grab;touch-action:none}[data-ui=event-calendar] [data-part=event][data-dragging]{box-shadow:var(--slotted-shadow-md, none);cursor:grabbing;pointer-events:none;z-index:5}[data-ui=event-calendar] [data-part=resize-handle]{display:flex;inset-block-end:0;inset-inline:0;align-items:center;block-size:var(--slotted-space-4, .5rem);cursor:ns-resize;justify-content:center;position:absolute;touch-action:none;z-index:1}[data-ui=event-calendar] [data-part=event][data-bar]>[data-part=resize-handle]{block-size:auto;cursor:ew-resize;inline-size:var(--slotted-space-4, .5rem);inset-block:0;inset-inline:auto 0}[data-ui=event-calendar] [data-part=resize-handle]:before{background-color:var(--_ink, var(--_hue));block-size:var(--slotted-border-width-thick, 2px);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inline-size:var(--slotted-space-6, 1rem);opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=event-calendar] [data-part=event][data-bar]>[data-part=resize-handle]:before{block-size:var(--slotted-space-4, .5rem);inline-size:var(--slotted-border-width-thick, 2px)}[data-ui=event-calendar] [data-part=event]:hover:not([data-disabled])>[data-part=resize-handle]:before,[data-ui=event-calendar] [data-part=event]:focus-visible>[data-part=resize-handle]:before,[data-ui=event-calendar] [data-part=event][data-dragging]>[data-part=resize-handle]:before{opacity:1;transition-timing-function:var(--slotted-easing-enter)}[data-ui=event-calendar] [data-part=more]{align-items:center;appearance:none;background-color:transparent;block-size:var(--_event-size);border:var(--slotted-border-width-thin, 1px) solid transparent;border-radius:var(--_event-radius);color:var(--slotted-text-muted, #5b6b7f);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--_event-font-size);font-weight:var(--slotted-font-weight-medium, 500);gap:.3em;max-inline-size:100%;overflow:hidden;padding-block:0;padding-inline:var(--slotted-space-2, .25rem);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);white-space:nowrap}[data-ui=event-calendar] [data-part=more]:hover:not([data-disabled]),[data-ui=event-calendar] [data-part=more][aria-expanded=true]{background-color:var(--slotted-tone-secondary-subtle-hover, #eef1f5);color:var(--slotted-text, #0f172a)}[data-ui=event-calendar] [data-part=more]:active:not([data-disabled]){background-color:var(--slotted-tone-secondary-subtle-active, #e2e8f0);transition-duration:var(--slotted-duration-instant)}@container slotted-event-calendar-day (max-width: 7.5rem){[data-ui=event-calendar] [data-part=day-events]>[data-part=event]:not([data-bar])>[data-part=event-time]{display:none}}@container slotted-event-calendar-event (max-width: 4.5rem){[data-ui=event-calendar] [data-part=column]>[data-part=event]>[data-part=event-time],[data-ui=event-calendar] [data-part=column]>[data-part=event]>[data-part=event-location]{display:none}[data-ui=event-calendar] [data-part=column]>[data-part=event]{padding-inline:var(--slotted-space-2, .25rem)}}@container slotted-event-calendar-event (max-width: 2rem){[data-ui=event-calendar] [data-part=column]>[data-part=event]>[data-part=event-title]{block-size:1px;clip-path:inset(50%);inline-size:1px;overflow:hidden;position:absolute;white-space:nowrap}}@container slotted-event-calendar-event (max-width: 4.5rem){[data-ui=event-calendar] [data-part=column]>[data-part=more]>span{display:none}}[data-ui=event-calendar] [data-part=time-grid]{border-block-start:var(--_rule-width) solid var(--_rule);display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0}[data-ui=event-calendar] [data-part=time-head]{border-block-end:var(--_rule-width) solid var(--_rule);overflow:hidden;scrollbar-gutter:stable}[data-ui=event-calendar] [data-part=columns],[data-ui=event-calendar] [data-part=all-day-row],[data-ui=event-calendar] [data-part=time-row]{display:grid;grid-template-columns:var(--_gutter) repeat(var(--slotted-event-calendar-days, 7),minmax(0,1fr))}[data-ui=event-calendar] [data-part=columns]{border-block-end:var(--_rule-width) solid var(--_rule)}[data-ui=event-calendar] [data-part=zone]{align-self:end;color:var(--slotted-text-muted, #5b6b7f);font-size:var(--slotted-font-size-xs, .75rem);font-variant-numeric:tabular-nums;line-height:var(--_line-xs);overflow:hidden;padding-block:var(--slotted-space-3, .375rem);padding-inline:var(--slotted-space-2, .25rem) var(--slotted-space-3, .375rem);text-align:end;text-overflow:ellipsis;white-space:nowrap}[data-ui=event-calendar] [data-part=column-header]{align-items:center;border-inline-start:var(--_rule-width) solid var(--_rule);display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);min-inline-size:0;padding-block:var(--slotted-space-3, .375rem);padding-inline:var(--_air)}[data-ui=event-calendar] [data-part=column-header] [data-part=weekday]{max-inline-size:100%;padding:0}[data-ui=event-calendar] [data-part=column-header][data-today] [data-part=weekday]{color:var(--slotted-tone-accent-text, #1d4ed8)}[data-ui=event-calendar] [data-part=column-header] [data-part=day-number]{block-size:var(--slotted-control-inner-size-lg, 28px);font-size:var(--slotted-font-size-lg, 1rem);font-weight:var(--slotted-font-weight-medium, 500);min-inline-size:var(--slotted-control-inner-size-lg, 28px)}[data-ui=event-calendar] [data-part=column-header] [data-part=day-content],[data-ui=event-calendar] [data-part=offset-change]{color:var(--slotted-text-muted, #5b6b7f);font-size:var(--slotted-font-size-xs, .75rem);line-height:var(--_line-xs);max-inline-size:100%;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}[data-ui=event-calendar] [data-part=all-day-label]{color:var(--slotted-text-muted, #5b6b7f);font-size:var(--slotted-font-size-xs, .75rem);hyphens:auto;line-height:var(--_line-xs);overflow-wrap:break-word;padding-block:calc(var(--_air) + (var(--_event-size) - 1lh) / 2);padding-inline:var(--slotted-space-2, .25rem) var(--slotted-space-3, .375rem);text-align:end}[data-ui=event-calendar] [data-part=all-day-cell]{--_pad: var(--_air);border-inline-start:var(--_rule-width) solid var(--_rule);min-inline-size:0;padding:var(--_pad);position:relative}[data-ui=event-calendar] [data-part=scroller]{flex:1 1 40rem;max-block-size:max-content;min-block-size:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}[data-ui=event-calendar] [data-part=gutter]{display:flex;flex-direction:column;min-inline-size:0}[data-ui=event-calendar] [data-part=hour]{block-size:var(--_hour);color:var(--slotted-text-muted, #5b6b7f);flex:0 0 auto;font-size:var(--slotted-font-size-xs, .75rem);font-variant-numeric:tabular-nums;line-height:var(--_line-xs);overflow:hidden;padding-inline-end:var(--slotted-space-3, .375rem);text-align:end;text-overflow:ellipsis;translate:0 calc(var(--_line-xs) / -2);white-space:nowrap}[data-ui=event-calendar] [data-part=hour]:nth-child(1 of[data-part=hour]){visibility:hidden}[data-ui=event-calendar] [data-part=column]{background-image:linear-gradient(to bottom,var(--_rule) var(--_rule-width),transparent var(--_rule-width)),linear-gradient(to bottom,color-mix(in oklab,var(--_rule) 45%,transparent) var(--_rule-width),transparent var(--_rule-width));background-size:100% var(--_hour),100% calc(var(--_hour) * var(--slotted-event-calendar-slot, 30) / 60);border-inline-start:var(--_rule-width) solid var(--_rule);min-inline-size:0;position:relative}[data-ui=event-calendar] [data-part=column][data-today]{background-color:color-mix(in oklab,var(--slotted-tone-accent-surface, #eff6ff) 50%,transparent)}[data-ui=event-calendar] [data-part=column]>[data-part=event],[data-ui=event-calendar] [data-part=column]>[data-part=more],[data-ui=event-calendar] [data-part=column]>[data-part=selection]{--_room: calc(100% - var(--slotted-space-5, .75rem));--_share: calc(var(--_room) / var(--slotted-event-columns, 1));block-size:max(calc(var(--slotted-event-length, 30) * var(--_hour) / 60 - var(--_air)),var(--_event-size));inline-size:calc(var(--_share) * var(--slotted-event-span, 1) - var(--_air));inset-block-start:calc(var(--slotted-event-start, 0) * var(--_hour) / 60 + var(--_air) / 2);inset-inline-start:calc(var(--_share) * var(--slotted-event-column, 0) + var(--_air));position:absolute}[data-ui=event-calendar] [data-part=column]>[data-part=event]{align-content:start;align-items:start;container:slotted-event-calendar-event / inline-size;flex-direction:column;gap:0;padding-block:var(--slotted-space-1, .125rem);z-index:1}[data-ui=event-calendar] [data-part=column]>[data-part=event]>*{flex-shrink:0}[data-ui=event-calendar] [data-part=column]>[data-part=event]>[data-part=event-title]{max-inline-size:100%;order:-1}[data-ui=event-calendar] [data-part=column]>[data-part=event]:not([data-short])>[data-part=event-title]{-webkit-box-orient:vertical;display:-webkit-box;hyphens:auto;-webkit-line-clamp:3;line-clamp:3;overflow-wrap:break-word;white-space:normal}[data-ui=event-calendar] [data-part=column]>[data-part=event]>[data-part=event-location],[data-ui=event-calendar] [data-part=column]>[data-part=event]>[data-part=event-time]{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis}[data-ui=event-calendar] [data-part=column]>[data-part=event][data-short]{align-items:center;flex-direction:row;gap:var(--slotted-space-2, .25rem);padding-block:0}[data-ui=event-calendar] [data-part=column]>[data-part=event][data-short]>[data-part=event-title]{flex:0 0 auto;max-inline-size:100%}[data-ui=event-calendar] [data-part=column]>[data-part=event][data-short]>[data-part=event-time]{flex:1 1 0;min-inline-size:0}[data-ui=event-calendar] [data-part=column]>[data-part=event][data-clipped-start],[data-ui=event-calendar] [data-part=column]>[data-part=event][data-continues-before]{border-block-start-style:dashed;border-start-end-radius:0;border-start-start-radius:0}[data-ui=event-calendar] [data-part=column]>[data-part=event][data-clipped-end],[data-ui=event-calendar] [data-part=column]>[data-part=event][data-continues-after]{border-block-end-style:dashed;border-end-end-radius:0;border-end-start-radius:0}[data-ui=event-calendar] [data-part=column]>[data-part=more]{align-items:start;container:slotted-event-calendar-event / inline-size;background-color:color-mix(in oklab,var(--slotted-text-muted, #5b6b7f) 9%,var(--_base));border-color:color-mix(in oklab,var(--slotted-text-muted, #5b6b7f) 24%,var(--_base));padding-block:var(--slotted-space-1, .125rem);z-index:1}[data-ui=event-calendar] [data-part=column]>[data-part=more]:hover:not([data-disabled]),[data-ui=event-calendar] [data-part=column]>[data-part=more][aria-expanded=true]{background-color:color-mix(in oklab,var(--slotted-text-muted, #5b6b7f) 15%,var(--_base))}[data-ui=event-calendar] [data-part=column]>[data-part=more]:active:not([data-disabled]){background-color:color-mix(in oklab,var(--slotted-text-muted, #5b6b7f) 21%,var(--_base))}[data-ui=event-calendar] [data-part=column]>[data-part=more][data-overlay]{align-items:center;background-color:var(--_base);block-size:auto;border-radius:var(--slotted-radius-full, 9999px);box-shadow:var(--slotted-shadow-sm, none);container-type:normal;inline-size:auto;inset-block-start:calc((var(--slotted-event-start, 0) + var(--slotted-event-length, 30)) * var(--_hour) / 60 - var(--_air));inset-inline:auto var(--slotted-space-4, .5rem);line-height:var(--_line-xs);translate:0 -100%;padding-block:0;padding-inline:var(--slotted-space-3, .375rem);z-index:3}[data-ui=event-calendar] [data-part=column]>[data-part=more][data-overlay]>span{display:none}[data-ui=event-calendar] [data-part=column]>[data-part=selection]{background-color:var( --slotted-event-calendar-selection-background, var(--slotted-tone-accent-surface, #eff6ff) );border:var(--slotted-border-width-thin, 1px) solid var( --slotted-event-calendar-selection-border-color, var(--slotted-tone-accent-border, #2563eb) );border-radius:var(--_event-radius);color:var(--slotted-tone-accent-text, #1d4ed8);font-size:var(--_event-font-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-medium, 500);inline-size:calc(var(--_room) - var(--_air));inset-inline-start:var(--_air);line-height:var(--_line-xs);overflow:hidden;padding-block:var(--slotted-space-1, .125rem);padding-inline:var(--slotted-space-3, .375rem);pointer-events:none;text-overflow:ellipsis;white-space:nowrap;z-index:2}[data-ui=event-calendar] [data-part=off-hours]{background-color:var(--slotted-event-calendar-off-background, var(--_off));block-size:calc(var(--slotted-event-length, 0) * var(--_hour) / 60);inset-block-start:calc(var(--slotted-event-start, 0) * var(--_hour) / 60);inset-inline:0;pointer-events:none;position:absolute}[data-ui=event-calendar] [data-part=now],[data-ui=event-calendar] [data-part=offset-line]{inset-block-start:calc(var(--slotted-event-start, 0) * var(--_hour) / 60);inset-inline:0;pointer-events:none;position:absolute}[data-ui=event-calendar] [data-part=now]{border-block-start:var(--slotted-border-width-thick, 2px) solid var(--slotted-event-calendar-now-color, var(--slotted-tone-accent-solid, #2563eb));translate:0 -50%;z-index:2}[data-ui=event-calendar] [data-part=now]:before{background-color:var( --slotted-event-calendar-now-color, var(--slotted-tone-accent-solid, #2563eb) );block-size:var(--slotted-space-4, .5rem);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inline-size:var(--slotted-space-4, .5rem);inset-block-start:calc(var(--slotted-space-4, .5rem) / -2 - var(--slotted-border-width-thick, 2px) / 2);inset-inline-start:calc(var(--slotted-space-4, .5rem) / -2);position:absolute}[data-ui=event-calendar] [data-part=offset-line]{border-block-start:var(--slotted-border-width-thin, 1px) dashed var(--slotted-border-strong, #78899c);z-index:1}[data-ui=event-calendar]>[data-part=body]>[data-part=list]{border-block-start:var(--_rule-width) solid var(--_rule);display:flex;flex-direction:column}[data-ui=event-calendar] [data-part=list-day]{border-block-end:var(--_rule-width) solid var(--_rule);column-gap:var(--slotted-space-6, 1rem);display:grid;grid-template-columns:calc(var(--slotted-space-12, 4rem) * 2) minmax(0,1fr);padding-block:var(--slotted-space-4, .5rem)}[data-ui=event-calendar] [data-part=list-day-heading]{display:flex;flex-direction:column;margin:0;padding-block:var(--slotted-space-3, .375rem)}[data-ui=event-calendar] [data-part=list-weekday]{color:var(--slotted-text-muted, #5b6b7f);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--_line-xs)}[data-ui=event-calendar] [data-part=list-date]{font-size:var(--slotted-font-size-sm, .8125rem);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--_line-sm)}[data-ui=event-calendar] [data-part=list-day][data-today] [data-part=list-day-heading],[data-ui=event-calendar] [data-part=list-day][data-today] [data-part=list-weekday]{color:var(--slotted-tone-accent-text, #1d4ed8)}[data-ui=event-calendar] [data-part=list-events]{display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);list-style:none;margin:0;padding:0}[data-ui=event-calendar] [data-part=list-events] [data-part=event]{align-items:start;column-gap:var(--slotted-space-4, .5rem);display:grid;font-size:var(--slotted-font-size-sm, .8125rem);grid-template-columns:calc(var(--slotted-space-12, 4rem) * 2.5) auto minmax(0,1fr);inline-size:100%;line-height:var(--_line-sm);min-block-size:var(--slotted-control-height-md, 34px);padding-block:var(--slotted-space-3, .375rem);padding-inline:var(--slotted-space-3, .375rem)}[data-ui=event-calendar] [data-part=list-events] [data-part=event]:before{grid-column:2;grid-row:1;margin-block-start:calc((1lh - var(--slotted-space-4, .5rem)) / 2)}[data-ui=event-calendar] [data-part=list-events] [data-part=event-time]{grid-column:1;grid-row:1;white-space:normal}[data-ui=event-calendar] [data-part=list-events] [data-part=event-title]{grid-column:3;grid-row:1;overflow-wrap:break-word;white-space:normal}[data-ui=event-calendar] [data-part=list-events] [data-part=event-location]{font-size:var(--slotted-font-size-xs, .75rem);grid-column:3;line-height:var(--_line-xs);grid-row:2;overflow-wrap:break-word;white-space:normal}[data-ui=event-calendar] [data-part=list-events] [data-part=event]:hover:not([data-disabled]){background-color:var(--slotted-tone-secondary-subtle-hover, #eef1f5)}[data-ui=event-calendar] [data-part=list-events] [data-part=event]:active:not([data-disabled],[data-open],[data-context]){background-color:var(--slotted-tone-secondary-subtle-active, #e2e8f0);transition-duration:var(--slotted-duration-instant)}[data-ui=event-calendar] [data-part=list-events] [data-part=event][data-open],[data-ui=event-calendar] [data-part=list-events] [data-part=event][data-context]{background-color:light-dark(color-mix(in oklab,var(--_hue) var(--_tint),var(--_base)),color-mix(in oklab,var(--_hue) var(--_tint-dark),var(--_base)))}[data-ui=event-calendar] [data-part=list-events] [data-part=event][data-status=tentative]:before{background-color:transparent;border:var(--slotted-border-width-medium, 1.5px) solid var(--_hue)}[data-ui=event-calendar] [data-part=detail-day],[data-ui=event-calendar] [data-part=detail-range]{display:inline-block}[data-ui=event-calendar] [data-ui=popover]>[data-part=content]>[data-part=body],[data-ui=event-calendar] [data-ui=drawer] [data-part=panel]>[data-part=body]{display:grid;gap:var(--slotted-space-5, .75rem)}[data-ui=event-calendar] [data-part=list-events][data-layout=stacked] [data-part=event]{grid-template-columns:auto minmax(0,1fr)}[data-ui=event-calendar] [data-part=list-events][data-layout=stacked] [data-part=event]:before{grid-column:1}[data-ui=event-calendar] [data-part=list-events][data-layout=stacked] [data-part=event-title]{grid-column:2;grid-row:1}[data-ui=event-calendar] [data-part=list-events][data-layout=stacked] [data-part=event-time]{font-size:var(--slotted-font-size-xs, .75rem);grid-column:2;grid-row:2;line-height:var(--_line-xs)}[data-ui=event-calendar] [data-part=list-events][data-layout=stacked] [data-part=event-location]{grid-column:2;grid-row:3}[data-ui=event-calendar] [data-part=empty]{align-items:center;color:var(--slotted-text-muted, #5b6b7f);display:flex;flex-direction:column;gap:var(--slotted-space-5, .75rem);padding-block:var(--slotted-space-10, 2.5rem);padding-inline:var(--slotted-space-6, 1rem);text-align:center}@container slotted-event-calendar (max-width: 959px){[data-ui=event-calendar]>[data-part=header]{grid-template-areas:\"title title navigation navigation\" \"views . filter actions\";grid-template-columns:auto minmax(0,1fr) auto auto}[data-ui=event-calendar] [data-part=navigation]{justify-self:end}[data-ui=event-calendar] [data-part=views]{margin-inline-start:0}}@container slotted-event-calendar (max-width: 599px){[data-ui=event-calendar][data-part=root]{--_gutter: calc(var(--slotted-space-10, 2.5rem) + var(--slotted-space-2, .25rem))}[data-ui=event-calendar] [data-part=list-day]{grid-template-columns:minmax(0,1fr);row-gap:var(--slotted-space-1, .125rem)}[data-ui=event-calendar] [data-part=list-day-heading]{align-items:baseline;column-gap:var(--slotted-space-3, .375rem);flex-direction:row;flex-wrap:wrap}[data-ui=event-calendar] [data-part=list-events] [data-part=event]{grid-template-columns:auto minmax(0,1fr)}[data-ui=event-calendar] [data-part=list-events] [data-part=event]:before{grid-column:1}[data-ui=event-calendar] [data-part=list-events] [data-part=event-title]{grid-column:2;grid-row:1}[data-ui=event-calendar] [data-part=list-events] [data-part=event-time]{font-size:var(--slotted-font-size-xs, .75rem);grid-column:2;grid-row:2;line-height:var(--_line-xs)}[data-ui=event-calendar] [data-part=list-events] [data-part=event-location]{grid-column:2;grid-row:3}[data-ui=event-calendar] [data-part=month] [data-part=day]{--_event-size: var(--slotted-space-3, .375rem);--_air: var(--slotted-space-1, .125rem)}[data-ui=event-calendar] [data-part=month] [data-part=day-header]{margin-block-end:var(--slotted-space-2, .25rem)}[data-ui=event-calendar] [data-part=month] [data-part=day-number]{block-size:var(--slotted-control-inner-size-sm, 22px);min-inline-size:var(--slotted-control-inner-size-sm, 22px)}[data-ui=event-calendar] [data-part=month] [data-part=day-number]:after{content:\"\";inset:0;position:absolute}[data-ui=event-calendar] [data-part=month] [data-part=event]{padding:0;pointer-events:none}[data-ui=event-calendar] [data-part=column]>[data-part=event]{background-color:light-dark(color-mix(in oklab,var(--_hue) var(--_tint-active),var(--_base)),color-mix(in oklab,var(--_hue) var(--_tint-active-dark),var(--_base)));border-color:var(--_hue);padding:0}[data-ui=event-calendar] [data-part=column]>[data-part=more]{justify-content:center;padding-inline:0}[data-ui=event-calendar] [data-part=month] [data-part=event][data-bar]{background-color:var(--_hue);border-color:var(--_hue);border-radius:var(--slotted-radius-full, 9999px)}[data-ui=event-calendar] [data-part=month] [data-part=event]:not([data-bar]){inline-size:var(--slotted-space-4, .5rem)}[data-ui=event-calendar] [data-part=month] [data-part=event]:before{block-size:var(--slotted-space-3, .375rem);inline-size:var(--slotted-space-3, .375rem)}[data-ui=event-calendar] [data-part=month] [data-part=event][data-bar]:before,[data-ui=event-calendar] [data-part=month] [data-part=event][data-bar]:after{display:none}[data-ui=event-calendar] [data-part=month] [data-part=event]>*,[data-ui=event-calendar] [data-part=column]>[data-part=event]>*,[data-ui=event-calendar] [data-part=month] [data-part=day-content],[data-ui=event-calendar] [data-part=month] [data-part=more]>*,[data-ui=event-calendar] [data-part=column-header] [data-part=day-content],[data-ui=event-calendar] [data-part=offset-change]{block-size:1px;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui=event-calendar] [data-part=month] [data-part=more]{block-size:auto;font-size:var(--slotted-font-size-xs, .75rem);line-height:var(--_line-xs);padding:0;pointer-events:none}[data-ui=event-calendar] [data-part=month] [data-part=day-events]{grid-template-rows:repeat(var(--slotted-event-calendar-lanes, 3),var(--_event-size)) auto}[data-ui=event-calendar] [data-part=column-header] [data-part=day-number]{block-size:var(--slotted-control-inner-size-md, 24px);font-size:var(--slotted-font-size-md, .875rem);min-inline-size:var(--slotted-control-inner-size-md, 24px)}[data-ui=event-calendar] [data-part=column]>[data-part=event],[data-ui=event-calendar] [data-part=column]>[data-part=more]{--_room: 100%}}@container slotted-event-calendar (max-width: 479px){[data-ui=event-calendar]>[data-part=header]{grid-template-areas:\"title title title title\" \"navigation . filter actions\" \"views views views views\";grid-template-columns:auto minmax(0,1fr) auto auto}[data-ui=event-calendar] [data-part=navigation]{justify-self:start;margin-inline-start:0}[data-ui=event-calendar] [data-part=views]>*{flex:1 1 auto;min-inline-size:0}[data-ui=event-calendar] [data-part=filter]{inline-size:var(--slotted-control-height-md, 34px);padding-inline:0}[data-ui=event-calendar] [data-part=filter]>[data-ui=icon]:last-child{display:none}[data-ui=event-calendar] [data-part=filter]>:not([data-ui=icon]){block-size:1px;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;position:absolute;white-space:nowrap}}@media(forced-colors:active){[data-ui=event-calendar] [data-part=event]:before,[data-ui=event-calendar] [data-part=now]:before{forced-color-adjust:none}[data-ui=event-calendar] [data-part=event][data-bar],[data-ui=event-calendar] [data-part=column]>[data-part=event]{border-color:currentcolor}[data-ui=event-calendar] [data-part=day-events]>[data-part=event]:not([data-bar]),[data-ui=event-calendar] [data-part=list-events] [data-part=event]{border-color:Canvas}[data-ui=event-calendar] [data-today]>[data-part=day-header] [data-part=day-number],[data-ui=event-calendar] [data-part=column-header][data-today] [data-part=day-number]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}}}\n", "@layer slotted.components{[data-ui=visually-hidden]:not([data-focusable]:focus-within){block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;inset-block-start:0;inset-inline-start:0;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], calendars: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendars", required: false }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], defaultDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultDate", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], defaultView: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultView", required: false }] }], visibleCalendars: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleCalendars", required: false }] }, { type: i0.Output, args: ["visibleCalendarsChange"] }], defaultVisibleCalendars: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultVisibleCalendars", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], defaultSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSelection", required: false }] }], openEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "openEvent", required: false }] }, { type: i0.Output, args: ["openEventChange"] }], defaultOpenEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpenEvent", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], workingHours: [{ type: i0.Input, args: [{ isSignal: true, alias: "workingHours", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], dayHours: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayHours", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], fixedWeeks: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedWeeks", required: false }] }], hourCycle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourCycle", required: false }] }], listRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "listRange", required: false }] }], loadingDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingDelay", required: false }] }], loadingMinDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMinDuration", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], maxColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxColumns", required: false }] }], maxEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxEvents", required: false }] }], scrollTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollTime", required: false }] }], slotDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "slotDuration", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], weekends: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekends", required: false }] }], weekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumbers", required: false }] }], dateRequest: [{ type: i0.Output, args: ["dateRequest"] }], viewRequest: [{ type: i0.Output, args: ["viewRequest"] }], visibleCalendarsRequest: [{ type: i0.Output, args: ["visibleCalendarsRequest"] }], selectionRequest: [{ type: i0.Output, args: ["selectionRequest"] }], openEventRequest: [{ type: i0.Output, args: ["openEventRequest"] }], eventChangeRequest: [{ type: i0.Output, args: ["eventChangeRequest"] }], canDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDrop", required: false }] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }], eventContentTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlEventCalendarEvent), { isSignal: true }] }], detail: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlEventCalendarDetail), { isSignal: true }] }], dayContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlEventCalendarDayContent), { isSignal: true }] }], actions: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlEventCalendarActions), { isSignal: true }] }], empty: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlEventCalendarEmpty), { isSignal: true }] }], errorContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlEventCalendarError), { isSignal: true }] }], body: [{ type: i0.ViewChild, args: ['body', { ...{ read: ElementRef }, isSignal: true }] }], scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }], filterButton: [{ type: i0.ViewChild, args: ['filterButton', { isSignal: true }] }], morePopover: [{ type: i0.ViewChild, args: ['morePopover', { isSignal: true }] }], detailPopover: [{ type: i0.ViewChild, args: ['detailPopover', { isSignal: true }] }], contextMenu: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlEventCalendarContextMenu), { isSignal: true }] }], contextMenuRef: [{ type: i0.ViewChild, args: ['contextMenuRef', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EVENT_CALENDAR_DEFAULTS, EVENT_CALENDAR_FALLBACK, SlEventCalendar, SlEventCalendarActions, SlEventCalendarContextMenu, SlEventCalendarDayContent, SlEventCalendarDetail, SlEventCalendarEmpty, SlEventCalendarError, SlEventCalendarEvent, injectEventCalendarDefaults, provideEventCalendarDefaults };
+//# sourceMappingURL=slotted-angular-event-calendar.mjs.map