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

package/fesm2022/slotted-angular-calendar.mjs

@@ -0,0 +1,916 @@
+import { isSameDate, compareDate, plainDate, createDateFormat, yearPage, visibleMonths, stepMonth, todayIn, monthGrid, isDateInRange, stepYear, endOfWeek, startOfWeek, addDays, clampDate } from '@slotted/core/date';
+import { createControllable } from '@slotted/core/state';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, numberAttribute, booleanAttribute, output, ElementRef, Injector, signal, computed, effect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectLocale, injectMessages } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { calendarMessages } from '@slotted/core/i18n';
+
+const FALLBACK = {
+    calendar: 'gregory',
+    firstDayOfWeek: undefined,
+    fixedWeeks: false,
+    months: 1,
+    outsideDays: undefined,
+    timeZone: undefined,
+    weekNumbers: false,
+};
+const CALENDAR_DEFAULTS = new InjectionToken('slotted calendar defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once which day its weeks start on, which zone answers
+ * "today" and whether its calendars keep a fixed six-row grid — rather than
+ * repeating the same inputs on every instance. Its words and the locale that
+ * writes its months come from the language in force (`provideSlotted`).
+ *
+ * `fixedWeeks` is the one worth setting where calendars live in popovers: a
+ * surface that grows a row between one press of "next" and the next moves the
+ * target the reader was aiming at.
+ */
+function provideCalendarDefaults(defaults) {
+    return {
+        provide: CALENDAR_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a calendar renders as here, before it states anything of its own. */
+function injectCalendarDefaults() {
+    return inject(CALENDAR_DEFAULTS);
+}
+
+/**
+ * What choosing a date does to a value, in the three modes the family ships.
+ *
+ * It is separate from the component because none of it touches the DOM: a
+ * range that is completed, a range that is restarted, and a set that a second
+ * press takes a date back out of are all arithmetic over `PlainDate`, and the
+ * two bindings must not each decide them.
+ */
+function isRange(value) {
+    return value !== null && !Array.isArray(value) && 'start' in value;
+}
+function asDates(value) {
+    if (value === null)
+        return [];
+    if (Array.isArray(value))
+        return value;
+    if (isRange(value))
+        return [value.start, value.end].filter((date) => date !== null);
+    return [value];
+}
+/**
+ * Whether a date is one of the two ends of a run, inside it, or none of the
+ * three. A range with one end open has a start and no run, which is what the
+ * calendar draws while the reader is choosing the second date.
+ */
+function rangeStateOf(date, value) {
+    if (!isRange(value))
+        return null;
+    const { start, end } = value;
+    if (start !== null && isSameDate(date, start))
+        return 'start';
+    if (end !== null && isSameDate(date, end))
+        return 'end';
+    if (start === null || end === null)
+        return null;
+    return compareDate(date, start) > 0 && compareDate(date, end) < 0 ? 'inside' : null;
+}
+function isSelected(date, value) {
+    if (isRange(value)) {
+        const state = rangeStateOf(date, value);
+        return state === 'start' || state === 'end';
+    }
+    return asDates(value).some((candidate) => isSameDate(candidate, date));
+}
+/**
+ * The value a press produces.
+ *
+ * A range takes two presses and the second one may come first: a reader who
+ * chooses the 11th and then the 7th means the 7th to the 11th, not a range
+ * that runs backwards. A third press starts again, because a range that grew
+ * on every press could never be narrowed.
+ *
+ * A set removes a date a second press lands on, which is the only way to take
+ * one back out without a second control.
+ */
+function nextValue(date, value, mode) {
+    if (mode === 'single') {
+        return isSelected(date, value) ? null : date;
+    }
+    if (mode === 'multiple') {
+        const held = asDates(value);
+        const without = held.filter((candidate) => !isSameDate(candidate, date));
+        if (without.length !== held.length)
+            return without;
+        return [...held, date].sort(compareDate);
+    }
+    const run = isRange(value) ? value : { start: null, end: null };
+    if (run.start === null || run.end !== null)
+        return { start: date, end: null };
+    return compareDate(date, run.start) < 0
+        ? { start: date, end: run.start }
+        : { start: run.start, end: date };
+}
+/**
+ * The run the grid draws while the reader is choosing the second end: from
+ * the chosen start to the pending end — the day under the pointer, or the
+ * focused day — ordered the way the second press will order it. `null` while
+ * there is no open run, so a whole range and a single date preview nothing.
+ */
+function previewRun(value, pending) {
+    if (pending === null || !isRange(value) || value.start === null || value.end !== null)
+        return null;
+    return compareDate(pending, value.start) < 0
+        ? { start: pending, end: value.start }
+        : { start: value.start, end: pending };
+}
+/** Value equality, which `Object.is` cannot give for a run or a set. */
+function isSameValue(a, b) {
+    if (isRange(a) || isRange(b)) {
+        if (!isRange(a) || !isRange(b))
+            return false;
+        return isSameDate(a.start, b.start) && isSameDate(a.end, b.end);
+    }
+    const left = asDates(a);
+    const right = asDates(b);
+    if (left.length !== right.length)
+        return false;
+    return left.every((date, index) => isSameDate(date, right[index] ?? null));
+}
+
+/** How many years one page of the year view holds. */
+const YEAR_PAGE = 12;
+/** The heading needs an identifier every grid can point `aria-labelledby` at. */
+let sequence = 0;
+/**
+ * A month grid, and the two pages above it.
+ *
+ * **It is a real `table` with the `grid` role on it.** The APG's own note is
+ * why nothing here writes `row`, `columnheader` or `gridcell`: those are
+ * implied by `tr`, `th` and `td`, and writing them again would duplicate
+ * semantics the platform already gives.
+ *
+ * **The date the reader is on and the date the reader has chosen are two
+ * values**, and each has a model of its own — a product that pages a calendar
+ * from outside it has nowhere else to say so.
+ *
+ * **A date the predicate refuses stays reachable.** It carries `aria-disabled`
+ * rather than being taken out of the grid, so a reader can arrow onto it, hear
+ * why it is out, and arrow past it.
+ */
+class SlCalendar {
+    /** Present means the consumer owns the value. */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    defaultValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    /** The date the reader is on. Present means the consumer owns it. */
+    focusedDate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
+    defaultFocusedDate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultFocusedDate" }] : /* istanbul ignore next */ []));
+    min = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    isDateUnavailable = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDateUnavailable" }] : /* istanbul ignore next */ []));
+    selectionMode = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    months = input(undefined, { ...(ngDevMode ? { debugName: "months" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null ? undefined : numberAttribute(value) });
+    /** Present means the consumer owns which grid is showing. */
+    view = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    defaultView = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultView" }] : /* istanbul ignore next */ []));
+    weekNumbers = input(undefined, { ...(ngDevMode ? { debugName: "weekNumbers" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    fixedWeeks = input(undefined, { ...(ngDevMode ? { debugName: "fixedWeeks" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    outsideDays = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outsideDays" }] : /* istanbul ignore next */ []));
+    /** The locale that writes months and days. Unset, the language in force decides. */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    timeZone = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input(undefined, { ...(ngDevMode ? { debugName: "firstDayOfWeek" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null ? undefined : numberAttribute(value) });
+    calendar = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []));
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    readOnly = input(undefined, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    invalid = input(undefined, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * names of the previous and next triggers.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    focusedDateChange = output();
+    viewChange = output();
+    /**
+     * The pending end of an open run: the day under the pointer, or the focused
+     * day when no pointer is over the grid, and `null` while no run is open. A
+     * fact the grid states rather than a value the consumer owns, which is why
+     * it is an output and not a model — `date-range-picker` reads it to say how
+     * long the run would be.
+     */
+    previewChange = output();
+    element = inject(ElementRef).nativeElement;
+    injector = inject(Injector);
+    defaults = injectCalendarDefaults();
+    appLocale = injectLocale();
+    /** The family's words in the language in force, with this calendar's `messages` laid over them. */
+    t = injectMessages(calendarMessages, this.messages);
+    headingId = `sl-calendar-${String((sequence += 1))}`;
+    ownValue = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownValue" }] : /* istanbul ignore next */ []));
+    ownFocused = signal(plainDate(2026, 1, 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownFocused" }] : /* istanbul ignore next */ []));
+    ownView = signal('day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownView" }] : /* istanbul ignore next */ []));
+    /**
+     * The first month on screen, which is **not** the month the reader is on.
+     *
+     * Drawing two months from the focused date meant that choosing a day in the
+     * second one scrolled the pair: a reader looking at June and July who chose
+     * 9 June was shown July and August, with half of what they had just chosen
+     * off screen. The page moves only when the reader leaves it.
+     */
+    page = signal({ year: 2026, month: 1 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    today = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
+    /** Focus is only moved into the DOM after a key, never on a render. */
+    restoreFocus = false;
+    held = computed(() => this.value() ?? this.ownValue(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "held" }] : /* istanbul ignore next */ []));
+    focused = computed(() => this.focusedDate() ?? this.ownFocused(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    /** Which grid is showing. Public, so a template reaches it through `exportAs`. */
+    currentView = computed(() => this.view() ?? this.ownView(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentView" }] : /* istanbul ignore next */ []));
+    resolvedMonths = computed(() => Math.max(1, this.months() ?? this.defaults.months), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMonths" }] : /* istanbul ignore next */ []));
+    resolvedWeekNumbers = computed(() => this.weekNumbers() ?? this.defaults.weekNumbers, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedWeekNumbers" }] : /* istanbul ignore next */ []));
+    resolvedFixedWeeks = computed(() => this.fixedWeeks() ?? this.defaults.fixedWeeks, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFixedWeeks" }] : /* istanbul ignore next */ []));
+    /**
+     * One month draws the days either side of it, because a week that starts on
+     * the 30th of the month before has to say what that cell is. Two months
+     * cannot: September's grid ends with the first three days of October and
+     * October's begins with the last four of September, so a range across the
+     * boundary is painted twice and a reader sees an interval twice as long as
+     * the one chosen. Every surveyed multi-month calendar hides them, and so
+     * does this one — until the consumer says otherwise, on the instance or on
+     * the provider.
+     */
+    resolvedOutsideDays = computed(() => this.outsideDays() ??
+        this.defaults.outsideDays ??
+        (this.resolvedMonths() > 1 ? 'hidden' : 'shown'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOutsideDays" }] : /* istanbul ignore next */ []));
+    resolvedCalendar = computed(() => this.calendar() ?? this.defaults.calendar, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCalendar" }] : /* istanbul ignore next */ []));
+    editable = computed(() => this.disabled() !== true && this.readOnly() !== true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+    format = computed(() => createDateFormat({
+        locale: this.locale() ?? this.appLocale(),
+        firstDayOfWeek: this.firstDayOfWeek() ?? this.defaults.firstDayOfWeek,
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    weekdayLong = computed(() => this.format().weekdayNames('long'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdayLong" }] : /* istanbul ignore next */ []));
+    weekdayNarrow = computed(() => this.format().weekdayNames('narrow'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdayNarrow" }] : /* istanbul ignore next */ []));
+    monthNames = computed(() => this.format().monthNames('short'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthNames" }] : /* istanbul ignore next */ []));
+    years = computed(() => yearPage(this.focused().year, YEAR_PAGE), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "years" }] : /* istanbul ignore next */ []));
+    shownMonths = computed(() => visibleMonths(this.page(), this.resolvedMonths()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shownMonths" }] : /* istanbul ignore next */ []));
+    heading = computed(() => {
+        const focused = this.focused();
+        const format = this.format();
+        if (this.currentView() === 'year') {
+            const years = this.years();
+            return `${String(years[0] ?? focused.year)} – ${String(years.at(-1) ?? focused.year)}`;
+        }
+        if (this.currentView() === 'month')
+            return String(focused.year);
+        const page = this.page();
+        const start = plainDate(page.year, page.month, 1);
+        if (this.resolvedMonths() === 1)
+            return format.monthYear(start);
+        const last = stepMonth(start, this.resolvedMonths() - 1).date;
+        return `${format.monthYear(start, 'short')} – ${format.monthYear(last, 'short')}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /**
+         * The page follows the reader, and only when the reader has left it.
+         * Written as an effect rather than inside the request, so a consumer who
+         * owns `focusedDate` and moves it from outside is followed too.
+         */
+        /* The pending end, reported once per change and never while it is the
+           same day: a pointer crossing a cell twice is one fact, not two. */
+        let reported = null;
+        effect(() => {
+            const end = this.previewEnd();
+            if (isSameDate(reported, end))
+                return;
+            reported = end;
+            this.previewChange.emit(end);
+        });
+        effect(() => {
+            const focused = this.focused();
+            const held = this.page();
+            const span = this.resolvedMonths();
+            const start = held.year * 12 + (held.month - 1);
+            const wanted = focused.year * 12 + (focused.month - 1);
+            if (wanted >= start && wanted < start + span)
+                return;
+            /* Outside the span: the page moves by whole pages, so a reader stepping
+               past the edge lands where the arrows would have taken them. */
+            const moved = start + Math.floor((wanted - start) / span) * span;
+            this.page.set({ year: Math.floor(moved / 12), month: (moved % 12) + 1 });
+        });
+    }
+    ngOnInit() {
+        this.ownValue.set(this.defaultValue() ?? null);
+        this.ownView.set(this.defaultView() ?? 'day');
+        this.today.set(todayIn(this.timeZone() ?? this.defaults.timeZone));
+        const start = this.startingDate();
+        this.ownFocused.set(start);
+        this.page.set({ year: start.year, month: start.month });
+    }
+    /** Puts focus on the cell holding the roving tab stop. */
+    focus() {
+        this.element.querySelector('[data-part="day"][tabindex="0"]')?.focus();
+    }
+    /** Moves the reader to a date, paging the grid to reach it. */
+    focusDate(date) {
+        this.requestFocused(date, 'programmatic', undefined);
+    }
+    /** The date, the run or the set the calendar holds. */
+    selection = computed(() => this.held(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    captionOf(month) {
+        return this.format().monthYear(plainDate(month.year, month.month, 1));
+    }
+    weeksOf(month) {
+        return monthGrid({
+            ...month,
+            firstDayOfWeek: this.format().firstDayOfWeek,
+            fixedWeeks: this.resolvedFixedWeeks(),
+        });
+    }
+    unavailable(date) {
+        if (!isDateInRange(date, this.min(), this.max()))
+            return true;
+        return this.isDateUnavailable()?.(date) === true;
+    }
+    /** Unavailable, or an outside day the axis says may not be chosen. */
+    /** Whether the cell carries a day at all, or stands empty to fill the row. */
+    drawn(day) {
+        return !(day.outsideMonth && this.resolvedOutsideDays() === 'hidden');
+    }
+    /**
+     * The grid already knows which month a day belongs to, and asking the first
+     * shown month instead refused every day of the second one in a pair.
+     */
+    refused(day) {
+        if (this.unavailable(day.date))
+            return true;
+        return day.outsideMonth && this.resolvedOutsideDays() === 'shown';
+    }
+    chosen(date) {
+        return isSelected(date, this.held());
+    }
+    /**
+     * The day under the pointer, held only to name the pending end of an open
+     * run. It never moves the roving focus: a pointer crossing the grid is not
+     * the reader choosing where they are.
+     */
+    hovered = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []));
+    /** The run as it would close on the pending end; `null` while no run is open. */
+    pending = computed(() => this.selectionMode() === 'range' && this.editable()
+        ? previewRun(this.held(), this.hovered() ?? this.focused())
+        : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
+    previewEnd = computed(() => {
+        const pending = this.pending();
+        const held = this.held();
+        if (pending === null)
+            return null;
+        return isRange(held) && held.start !== null && isSameDate(pending.start, held.start)
+            ? pending.end
+            : pending.start;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewEnd" }] : /* istanbul ignore next */ []));
+    rangeState(date) {
+        return rangeStateOf(date, this.pending() ?? this.held());
+    }
+    /** Every cell of the pending band is a proposal except the start the reader chose. */
+    proposed(date) {
+        return this.pending() !== null && this.rangeState(date) !== null && !this.chosen(date);
+    }
+    isToday(date) {
+        const today = this.today();
+        return today !== null && isSameDate(date, today);
+    }
+    tabIndexOf(date) {
+        return isSameDate(date, this.focused()) && this.editable() ? 0 : -1;
+    }
+    select(date, reason, source) {
+        if (!this.editable() || this.unavailable(date))
+            return;
+        this.requestValue(nextValue(date, this.held(), this.selectionMode()), reason, source);
+        this.requestFocused(date, reason, source);
+    }
+    /** The reader moves with the page rather than staying behind it. */
+    turnPage(direction, source) {
+        const focused = this.focused();
+        if (this.currentView() === 'day') {
+            this.requestFocused(stepMonth(focused, direction * this.resolvedMonths()).date, 'pointer', source);
+            return;
+        }
+        const step = this.currentView() === 'month' ? direction : direction * YEAR_PAGE;
+        this.requestFocused(stepYear(focused, step).date, 'pointer', source);
+    }
+    walkUp() {
+        this.setView(this.currentView() === 'day' ? 'month' : 'year');
+    }
+    pickMonth(month, source) {
+        this.requestFocused({ ...this.focused(), month, day: 1 }, 'pointer', source);
+        this.setView('day');
+    }
+    pickYear(year, source) {
+        this.requestFocused({ ...this.focused(), year, day: 1 }, 'pointer', source);
+        this.setView('month');
+    }
+    onKeyDown(event) {
+        const rtl = getComputedStyle(this.element).direction === 'rtl';
+        const forward = rtl ? 'ArrowLeft' : 'ArrowRight';
+        const backward = rtl ? 'ArrowRight' : 'ArrowLeft';
+        const focused = this.focused();
+        const first = this.format().firstDayOfWeek;
+        /**
+         * A key the grid acted on is the grid's, and nothing above it sees it.
+         * An application that binds a bare key guards it with "is the target an
+         * editable element", and a `td` is not one — so the arrows a reader walks
+         * a month with would fire every shortcut on the page.
+         */
+        const consume = () => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        const move = (next) => {
+            consume();
+            this.requestFocused(next, 'keyboard', event);
+        };
+        switch (event.key) {
+            case forward:
+                return move(addDays(focused, 1));
+            case backward:
+                return move(addDays(focused, -1));
+            case 'ArrowUp':
+                return move(addDays(focused, -7));
+            case 'ArrowDown':
+                return move(addDays(focused, 7));
+            case 'Home':
+                return move(startOfWeek(focused, first));
+            case 'End':
+                return move(endOfWeek(focused, first));
+            case 'PageUp':
+                return move(event.shiftKey ? stepYear(focused, -1).date : stepMonth(focused, -1).date);
+            case 'PageDown':
+                return move(event.shiftKey ? stepYear(focused, 1).date : stepMonth(focused, 1).date);
+            case 'Enter':
+            case ' ':
+                consume();
+                this.select(focused, 'keyboard', event);
+                return;
+            case 'Escape':
+                /* The view closes before the surface does, which is the staging
+                   `dismissable-layer` asks a family to do: the key is simply not
+                   passed on, and no layer is asked to close. */
+                /* In the day view the key is left alone, so a surface above the
+                   calendar may still close on it. */
+                if (this.currentView() === 'day')
+                    return;
+                consume();
+                this.setView(this.currentView() === 'year' ? 'month' : 'day');
+                return;
+            default:
+                return;
+        }
+    }
+    /**
+     * The first date the reader is put on: what a consumer said, then the value
+     * it holds, then today. A calendar that opened on an arbitrary month would
+     * make the reader page to now before doing anything at all.
+     */
+    startingDate() {
+        const stated = this.defaultFocusedDate() ?? this.focusedDate();
+        if (stated !== undefined)
+            return stated;
+        const held = this.defaultValue() ?? this.value() ?? null;
+        if (held !== null) {
+            if (Array.isArray(held)) {
+                const first = held[0];
+                if (first !== undefined)
+                    return first;
+            }
+            else if ('start' in held) {
+                if (held.start !== null)
+                    return held.start;
+            }
+            else {
+                return held;
+            }
+        }
+        return clampDate(this.today() ?? plainDate(2026, 1, 1), this.min(), this.max());
+    }
+    setView(next) {
+        if (this.view() === undefined)
+            this.ownView.set(next);
+        this.viewChange.emit(next);
+    }
+    requestValue(next, reason, source) {
+        const state = createControllable({
+            controlled: this.value(),
+            initial: this.held(),
+            equals: isSameValue,
+            onRequest: (request) => this.valueChange.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.ownValue.set(next);
+    }
+    requestFocused(next, reason, source) {
+        const bounded = clampDate(next, this.min(), this.max());
+        const state = createControllable({
+            controlled: this.focusedDate(),
+            initial: this.focused(),
+            equals: (a, b) => isSameDate(a, b),
+            onRequest: (request) => this.focusedDateChange.emit(request),
+        });
+        this.restoreFocus = reason === 'keyboard';
+        if (state.request(bounded, reason, source))
+            this.ownFocused.set(bounded);
+        if (this.restoreFocus)
+            this.followFocus();
+    }
+    /**
+     * Focus follows a key onto the cell that holds the roving tab stop, once the
+     * page holding it is rendered.
+     *
+     * A key that crosses the month edge lands on the old page's trailing day
+     * first, and the page follows one render later. Focused before that, the
+     * cell was replaced under the reader and focus fell to the document — which
+     * a consumer owning `focusedDate` met on every crossing. Focus is moved only
+     * while it is still in the calendar or was lost to the document, so a
+     * consumer that refused the move never has focus taken from elsewhere.
+     */
+    followFocus() {
+        afterNextRender(() => {
+            if (!this.restoreFocus)
+                return;
+            const active = this.element.ownerDocument.activeElement;
+            const lost = active === null || active === this.element.ownerDocument.body;
+            if (!lost && !this.element.contains(active)) {
+                this.restoreFocus = false;
+                return;
+            }
+            const stop = this.element.querySelector('[data-part="cell"]:not([data-outside-month]) [data-part="day"][tabindex="0"]');
+            if (stop !== null) {
+                this.restoreFocus = false;
+                stop.focus();
+                return;
+            }
+            if (this.element.querySelector('[data-part="day"][tabindex="0"]') === null) {
+                this.restoreFocus = false;
+                return;
+            }
+            this.followFocus();
+        }, { injector: this.injector });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlCalendar, isStandalone: true, selector: "[slCalendar]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, isDateUnavailable: { classPropertyName: "isDateUnavailable", publicName: "isDateUnavailable", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", 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 }, weekNumbers: { classPropertyName: "weekNumbers", publicName: "weekNumbers", isSignal: true, isRequired: false, transformFunction: null }, fixedWeeks: { classPropertyName: "fixedWeeks", publicName: "fixedWeeks", isSignal: true, isRequired: false, transformFunction: null }, outsideDays: { classPropertyName: "outsideDays", publicName: "outsideDays", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", focusedDateChange: "focusedDateChange", viewChange: "viewChange", previewChange: "previewChange" }, host: { attributes: { "data-ui": "calendar", "data-part": "root" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-view": "currentView()", "attr.data-calendar": "resolvedCalendar()", "attr.data-months": "resolvedMonths() > 1 ? resolvedMonths() : null", "attr.data-week-numbers": "resolvedWeekNumbers() ? '' : null", "attr.data-disabled": "disabled() === true ? '' : null", "attr.data-readonly": "readOnly() === true ? '' : null", "attr.data-invalid": "invalid() === true ? '' : null" } }, exportAs: ["slCalendar"], ngImport: i0, template: `<div data-part="header">
+      <button
+        data-part="previous"
+        type="button"
+        [attr.aria-label]="t('previous')"
+        [disabled]="!editable()"
+        (click)="turnPage(-1, $event)"
+      >
+        <span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
+      </button>
+      <!--
+        The heading is a live region: paging with a key changes nothing that
+        focus lands on, so without this nothing announces the new month.
+      -->
+      <button
+        data-part="heading"
+        type="button"
+        aria-live="polite"
+        [attr.id]="headingId"
+        [disabled]="!editable() || currentView() === 'year'"
+        (click)="walkUp()"
+      >
+        {{ heading() }}
+        @if (currentView() !== 'year') {
+          <span slIcon><svg slGlyph name="chevron-down"></svg></span>
+        }
+      </button>
+      <button
+        data-part="next"
+        type="button"
+        [attr.aria-label]="t('next')"
+        [disabled]="!editable()"
+        (click)="turnPage(1, $event)"
+      >
+        <span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
+      </button>
+    </div>
+
+    @switch (currentView()) {
+      @case ('day') {
+        <div data-part="grids">
+          @for (month of shownMonths(); track month.year * 12 + month.month) {
+            <table data-part="grid" role="grid" [attr.aria-labelledby]="headingId">
+              <caption data-part="grid-caption">
+                {{
+                  captionOf(month)
+                }}
+              </caption>
+              <thead>
+                <tr data-part="week-headers">
+                  @if (resolvedWeekNumbers()) {
+                    <th data-part="week-number" aria-hidden="true"></th>
+                  }
+                  @for (name of weekdayNarrow(); track $index) {
+                    <th data-part="week-header" scope="col" [attr.abbr]="weekdayLong()[$index]">
+                      {{ name }}
+                    </th>
+                  }
+                </tr>
+              </thead>
+              <tbody>
+                @for (week of weeksOf(month); track week.weekNumber) {
+                  <tr data-part="week">
+                    @if (resolvedWeekNumbers()) {
+                      <th data-part="week-number" scope="row">{{ week.weekNumber }}</th>
+                    }
+                    @for (
+                      day of week.days;
+                      track day.date.year * 400 + day.date.month * 32 + day.date.day
+                    ) {
+                      <!-- A hidden day is an empty cell and nothing else. It
+                           carried the marks of the date it stood for, so a
+                           range across a month boundary painted a band with no
+                           digits under it. -->
+                      <td
+                        data-part="cell"
+                        [attr.data-outside-month]="day.outsideMonth ? '' : null"
+                        [attr.data-unavailable]="
+                          !drawn(day) ? null : unavailable(day.date) ? '' : null
+                        "
+                        [attr.data-selected]="!drawn(day) ? null : chosen(day.date) ? '' : null"
+                        [attr.data-range-start]="
+                          drawn(day) && rangeState(day.date) === 'start' ? '' : null
+                        "
+                        [attr.data-range-end]="
+                          drawn(day) && rangeState(day.date) === 'end' ? '' : null
+                        "
+                        [attr.data-in-range]="
+                          drawn(day) && rangeState(day.date) === 'inside' ? '' : null
+                        "
+                        [attr.data-preview]="drawn(day) && proposed(day.date) ? '' : null"
+                      >
+                        @if (drawn(day)) {
+                          <span
+                            data-part="day"
+                            role="button"
+                            [attr.data-today]="isToday(day.date) ? '' : null"
+                            [attr.aria-selected]="chosen(day.date) ? 'true' : null"
+                            [attr.aria-disabled]="refused(day) ? 'true' : null"
+                            [tabindex]="tabIndexOf(day.date)"
+                            (click)="!refused(day) && select(day.date, 'pointer', $event)"
+                            (pointerenter)="hovered.set(day.date)"
+                            (pointerleave)="hovered.set(null)"
+                          >
+                            {{ day.date.day }}
+                          </span>
+                        }
+                      </td>
+                    }
+                  </tr>
+                }
+              </tbody>
+            </table>
+          }
+        </div>
+      }
+      @case ('month') {
+        <div data-part="months">
+          @for (name of monthNames(); track $index) {
+            <button
+              data-part="period"
+              type="button"
+              [attr.data-selected]="focused().month === $index + 1 ? '' : null"
+              [attr.aria-selected]="focused().month === $index + 1 ? 'true' : null"
+              (click)="pickMonth($index + 1, $event)"
+            >
+              {{ name }}
+            </button>
+          }
+        </div>
+      }
+      @default {
+        <div data-part="years">
+          @for (year of years(); track year) {
+            <button
+              data-part="period"
+              type="button"
+              [attr.data-selected]="focused().year === year ? '' : null"
+              [attr.aria-selected]="focused().year === year ? 'true' : null"
+              (click)="pickYear(year, $event)"
+            >
+              {{ year }}
+            </button>
+          }
+        </div>
+      }
+    }`, isInline: true, styles: ["@layer slotted.components{[data-ui=calendar][data-part=root]{container-type:inline-size;container-name:slotted-calendar;--_font-size: var(--slotted-control-font-size-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_cell-size: var(--slotted-calendar-cell-size, var(--slotted-control-height-md, 34px));--_columns: 7;--_months: 1;--_month-gap: var(--slotted-space-6, 1rem);--_week-number-columns: 0;--_grid-size: calc(var(--_cell-size) * (var(--_columns) + var(--_week-number-columns)));background-color:var(--slotted-calendar-background, transparent);box-sizing:border-box;color:var(--slotted-calendar-color, var(--slotted-text, CanvasText));display:flex;flex-direction:column;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);--_heading-floor: calc(20ch + 3 * var(--_icon-size) + 4 * var(--_gap));inline-size:max(calc(var(--_grid-size) * var(--_months) + var(--_month-gap) * (var(--_months) - 1)),var(--_heading-floor));max-inline-size:100%}[data-ui=calendar][data-part=root][data-week-numbers]{--_week-number-columns: .75}[data-ui=calendar][data-part=root][data-months=\"2\"]{--_months: 2}[data-ui=calendar][data-part=root][data-months=\"3\"]{--_months: 3}[data-ui=calendar] [data-part=header],[data-ui=calendar] [data-part=grids],[data-ui=calendar] [data-part=months],[data-ui=calendar] [data-part=years]{--_cell-size: clamp( var(--slotted-target-min, 24px), calc(100cqi / (var(--_columns) + var(--_week-number-columns)) / var(--_months)), var(--slotted-calendar-cell-size, var(--slotted-control-height-md, 34px)) )}[data-ui=calendar] [data-part=header]{align-items:center;display:flex;gap:var(--slotted-space-2, .25rem);inline-size:100%;justify-content:space-between}[data-ui=calendar] [data-part=heading]{--slotted-icon-size: var(--_icon-size);appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-calendar-radius, var(--slotted-control-radius, 4px));color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:var(--slotted-space-2, .25rem);font:inherit;font-weight:var(--slotted-font-weight-semibold, 600);flex:1 1 auto;justify-content:safe center;min-inline-size:0;padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--slotted-space-2, .25rem);overflow:hidden;white-space:nowrap;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=calendar] [data-part=previous],[data-ui=calendar] [data-part=next]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_cell-size);border:0;border-radius:var(--slotted-calendar-radius, var(--slotted-control-radius, 4px));color:var(--slotted-calendar-trigger-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var(--_cell-size);justify-content:center;padding:0;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=calendar] [data-part=previous]>[data-ui=icon]{rotate:180deg}[data-ui=calendar] [data-part=grids]{display:flex;flex-wrap:wrap;gap:var(--_month-gap);justify-content:center}[data-ui=calendar] [data-part=grid]{border-collapse:collapse;table-layout:fixed}[data-ui=calendar] [data-part=grid-caption]{block-size:1px;clip-path:inset(50%);inline-size:1px;overflow:hidden;position:absolute;white-space:nowrap}[data-ui=calendar][data-part=root]:is([data-months=\"2\"],[data-months=\"3\"]) [data-part=grid-caption]{block-size:auto;clip-path:none;color:var(--slotted-calendar-weekday-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-semibold, 600);inline-size:auto;overflow:visible;padding-block-end:var(--slotted-space-2, .25rem);position:static}[data-ui=calendar] [data-part=week-header]{block-size:var(--_cell-size);color:var(--slotted-calendar-weekday-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-medium, 500);inline-size:var(--_cell-size);padding:0;text-overflow:clip}[data-ui=calendar] [data-part=week-number]{color:var(--slotted-calendar-week-number-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-font-size-xs, .75rem);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-regular, 400);inline-size:calc(var(--_cell-size) * .75);padding:0;border-inline-end:var(--slotted-border-width-thin, 1px) solid var(--slotted-calendar-week-number-border-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=calendar] [data-part=cell]{padding:0;position:relative}[data-ui=calendar] [data-part=day]{--_inset: var(--slotted-border-width-thin, 1px);align-items:center;block-size:calc(var(--_cell-size) - var(--_inset) * 2);inline-size:calc(var(--_cell-size) - var(--_inset) * 2);margin:var(--_inset);border-radius:var(--slotted-calendar-day-radius, var(--slotted-radius-sm, 4px));box-sizing:border-box;color:inherit;cursor:pointer;display:flex;font-variant-numeric:tabular-nums;flex-direction:column;gap:var(--slotted-space-1, .125rem);justify-content:center;line-height:1;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}[data-ui=calendar] [data-part=day]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui=calendar] [data-part=months],[data-ui=calendar] [data-part=years]{display:grid;gap:var(--slotted-space-2, .25rem);grid-template-columns:repeat(4,1fr);inline-size:calc(var(--_cell-size) * var(--_columns))}[data-ui=calendar] [data-part=period]{align-items:center;appearance:none;background-color:transparent;block-size:var(--_cell-size);border:0;border-radius:var(--slotted-calendar-day-radius, var(--slotted-radius-sm, 4px));color:inherit;cursor:pointer;display:flex;font:inherit;justify-content:center;padding-inline:var(--slotted-space-2, .25rem);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=calendar] [data-part=day][data-today]{color:var(--slotted-calendar-today-color, var(--slotted-tone-accent-text));font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=calendar] [data-part=day]:before{background-color:transparent;block-size:var(--slotted-space-2, .25rem);border-radius:var(--slotted-radius-full, 9999px);content:\"\";flex:0 0 auto;inline-size:var(--slotted-space-2, .25rem);order:1}[data-ui=calendar] [data-part=day][data-today]:before{background-color:currentcolor}[data-ui=calendar] [data-part=cell][data-outside-month] [data-part=day]{color:var(--slotted-calendar-outside-color, var(--slotted-text-muted, GrayText))}[data-ui=calendar] [data-part=cell][data-unavailable] [data-part=day]{color:var(--slotted-calendar-unavailable-color, var(--slotted-disabled-foreground));cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:var(--slotted-border-width-thin, 1px)}[data-ui=calendar] [data-part=cell][data-in-range]:before,[data-ui=calendar] [data-part=cell][data-range-start]:before,[data-ui=calendar] [data-part=cell][data-range-end]:before{background-color:var( --slotted-calendar-range-background, color-mix( in oklab, var(--slotted-tone-accent-text) calc(var(--slotted-highlight-tint-opacity, .075) * 100%), transparent ) );content:\"\";inset:0;position:absolute}[data-ui=calendar] [data-part=cell][data-range-start]:before{border-end-start-radius:var(--slotted-calendar-day-radius, var(--slotted-radius-sm, 4px));border-start-start-radius:var(--slotted-calendar-day-radius, var(--slotted-radius-sm, 4px))}[data-ui=calendar] [data-part=cell][data-range-end]:before{border-end-end-radius:var(--slotted-calendar-day-radius, var(--slotted-radius-sm, 4px));border-start-end-radius:var(--slotted-calendar-day-radius, var(--slotted-radius-sm, 4px))}[data-ui=calendar] [data-part=cell][data-range-start]:not([data-range-end]) [data-part=day]{border-end-end-radius:0;border-start-end-radius:0}[data-ui=calendar] [data-part=cell][data-range-end]:not([data-range-start]) [data-part=day]{border-end-start-radius:0;border-start-start-radius:0}[data-ui=calendar] [data-part=cell]:is([data-in-range],[data-range-start],[data-range-end]) [data-part=day]{--_inset: 0px}[data-ui=calendar] [data-part=cell][data-in-range] [data-part=day]{border-radius:0;color:var(--slotted-calendar-in-range-color, var(--slotted-tone-accent-text))}[data-ui=calendar] [data-part=cell][data-preview]:before{background-color:var( --slotted-calendar-preview-background, color-mix( in oklab, var(--slotted-tone-accent-text) calc(var(--slotted-highlight-tint-opacity, .075) * 50%), transparent ) )}[data-ui=calendar] [data-part=cell][data-preview]:is([data-range-start],[data-range-end]):not([data-selected]) [data-part=day]{box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-calendar-preview-border-color, var(--slotted-tone-accent-border));color:var(--slotted-calendar-in-range-color, var(--slotted-tone-accent-text))}[data-ui=calendar] [data-part=day]:hover:not([data-disabled]),[data-ui=calendar] [data-part=period]:hover:not(:disabled):not([data-disabled]),[data-ui=calendar] [data-part=heading]:hover:not(:disabled):not([data-disabled]),[data-ui=calendar] [data-part=previous]:hover:not(:disabled):not([data-disabled]),[data-ui=calendar] [data-part=next]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-calendar-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=calendar] [data-part=day]:active:not([data-disabled]),[data-ui=calendar] [data-part=period]:active:not(:disabled):not([data-disabled]),[data-ui=calendar] [data-part=previous]:active:not(:disabled):not([data-disabled]),[data-ui=calendar] [data-part=next]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-calendar-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=calendar] [data-part=cell][data-in-range] [data-part=day]:hover:not([data-disabled]){background-color:var( --slotted-calendar-range-hover-background, var(--slotted-tone-accent-subtle-hover) )}[data-ui=calendar] [data-part=cell][data-in-range] [data-part=day]:active:not([data-disabled]){background-color:var( --slotted-calendar-range-active-background, var(--slotted-tone-accent-subtle-active) )}[data-ui=calendar] [data-part=cell][data-unavailable] [data-part=day]:hover:not([data-disabled]),[data-ui=calendar] [data-part=cell][data-unavailable] [data-part=day]:active:not([data-disabled]){background-color:transparent}[data-ui=calendar] [data-part=cell][data-selected] [data-part=day],[data-ui=calendar] [data-part=period][data-selected]{background-color:var(--slotted-calendar-selected-background, var(--slotted-tone-accent-solid));color:var(--slotted-calendar-selected-color, var(--slotted-tone-accent-on-solid));font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=calendar] [data-part=day]:focus-visible,[data-ui=calendar] [data-part=period]:focus-visible,[data-ui=calendar] [data-part=heading]:focus-visible,[data-ui=calendar] [data-part=previous]:focus-visible,[data-ui=calendar] [data-part=next]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=calendar][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-calendar-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=calendar][data-part=root][data-invalid] [data-part=day]:focus-visible,[data-ui=calendar][data-part=root][data-invalid] [data-part=period]:focus-visible,[data-ui=calendar][data-part=root][data-invalid] [data-part=heading]:focus-visible,[data-ui=calendar][data-part=root][data-invalid] [data-part=previous]:focus-visible,[data-ui=calendar][data-part=root][data-invalid] [data-part=next]:focus-visible{--_invalid-ring: calc( var(--slotted-focus-ring-width, 2px) + var(--slotted-calendar-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px)) );outline-offset:calc(var(--_invalid-ring) * -1);outline-width:var(--_invalid-ring)}[data-ui=calendar][data-part=root][data-readonly] [data-part=day],[data-ui=calendar][data-part=root][data-readonly] [data-part=period]{cursor:default}[data-ui=calendar][data-part=root][data-disabled]{color:var(--slotted-calendar-disabled-color, var(--slotted-disabled-foreground))}[data-ui=calendar][data-part=root][data-disabled] [data-part=day][data-today]{color:var(--slotted-disabled-foreground)}[data-ui=calendar][data-part=root][data-disabled] [data-part=cell][data-selected] [data-part=day]{background-color:var(--slotted-disabled-background);color:var(--slotted-disabled-foreground)}[data-ui=calendar][data-part=root][data-disabled] [data-part=day],[data-ui=calendar][data-part=root][data-disabled] [data-part=period],[data-ui=calendar][data-part=root][data-disabled] [data-part=previous],[data-ui=calendar][data-part=root][data-disabled] [data-part=next],[data-ui=calendar][data-part=root][data-disabled] [data-part=heading]{cursor:not-allowed}[data-ui=calendar] [data-part=previous]:disabled,[data-ui=calendar] [data-part=next]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}@container slotted-calendar (max-width: 320px){[data-ui=calendar] [data-part=grids]{--_month-gap: var(--slotted-space-4, .5rem)}}@media(forced-colors:active){[data-ui=calendar] [data-part=cell][data-in-range]:before,[data-ui=calendar] [data-part=cell][data-range-start]:before,[data-ui=calendar] [data-part=cell][data-range-end]:before{border-block:var(--slotted-border-width-thin, 1px) solid var(--slotted-calendar-range-border-color, var(--slotted-tone-accent-border))}[data-ui=calendar] [data-part=cell][data-preview]:before{border-block-style:dashed}}}\n"], dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCalendar, decorators: [{
+            type: Component,
+            args: [{ selector: '[slCalendar]', standalone: true, exportAs: 'slCalendar', imports: [SlGlyph, SlIcon], template: `<div data-part="header">
+      <button
+        data-part="previous"
+        type="button"
+        [attr.aria-label]="t('previous')"
+        [disabled]="!editable()"
+        (click)="turnPage(-1, $event)"
+      >
+        <span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
+      </button>
+      <!--
+        The heading is a live region: paging with a key changes nothing that
+        focus lands on, so without this nothing announces the new month.
+      -->
+      <button
+        data-part="heading"
+        type="button"
+        aria-live="polite"
+        [attr.id]="headingId"
+        [disabled]="!editable() || currentView() === 'year'"
+        (click)="walkUp()"
+      >
+        {{ heading() }}
+        @if (currentView() !== 'year') {
+          <span slIcon><svg slGlyph name="chevron-down"></svg></span>
+        }
+      </button>
+      <button
+        data-part="next"
+        type="button"
+        [attr.aria-label]="t('next')"
+        [disabled]="!editable()"
+        (click)="turnPage(1, $event)"
+      >
+        <span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
+      </button>
+    </div>
+
+    @switch (currentView()) {
+      @case ('day') {
+        <div data-part="grids">
+          @for (month of shownMonths(); track month.year * 12 + month.month) {
+            <table data-part="grid" role="grid" [attr.aria-labelledby]="headingId">
+              <caption data-part="grid-caption">
+                {{
+                  captionOf(month)
+                }}
+              </caption>
+              <thead>
+                <tr data-part="week-headers">
+                  @if (resolvedWeekNumbers()) {
+                    <th data-part="week-number" aria-hidden="true"></th>
+                  }
+                  @for (name of weekdayNarrow(); track $index) {
+                    <th data-part="week-header" scope="col" [attr.abbr]="weekdayLong()[$index]">
+                      {{ name }}
+                    </th>
+                  }
+                </tr>
+              </thead>
+              <tbody>
+                @for (week of weeksOf(month); track week.weekNumber) {
+                  <tr data-part="week">
+                    @if (resolvedWeekNumbers()) {
+                      <th data-part="week-number" scope="row">{{ week.weekNumber }}</th>
+                    }
+                    @for (
+                      day of week.days;
+                      track day.date.year * 400 + day.date.month * 32 + day.date.day
+                    ) {
+                      <!-- A hidden day is an empty cell and nothing else. It
+                           carried the marks of the date it stood for, so a
+                           range across a month boundary painted a band with no
+                           digits under it. -->
+                      <td
+                        data-part="cell"
+                        [attr.data-outside-month]="day.outsideMonth ? '' : null"
+                        [attr.data-unavailable]="
+                          !drawn(day) ? null : unavailable(day.date) ? '' : null
+                        "
+                        [attr.data-selected]="!drawn(day) ? null : chosen(day.date) ? '' : null"
+                        [attr.data-range-start]="
+                          drawn(day) && rangeState(day.date) === 'start' ? '' : null
+                        "
+                        [attr.data-range-end]="
+                          drawn(day) && rangeState(day.date) === 'end' ? '' : null
+                        "
+                        [attr.data-in-range]="
+                          drawn(day) && rangeState(day.date) === 'inside' ? '' : null
+                        "
+                        [attr.data-preview]="drawn(day) && proposed(day.date) ? '' : null"
+                      >
+                        @if (drawn(day)) {
+                          <span
+                            data-part="day"
+                            role="button"
+                            [attr.data-today]="isToday(day.date) ? '' : null"
+                            [attr.aria-selected]="chosen(day.date) ? 'true' : null"
+                            [attr.aria-disabled]="refused(day) ? 'true' : null"
+                            [tabindex]="tabIndexOf(day.date)"
+                            (click)="!refused(day) && select(day.date, 'pointer', $event)"
+                            (pointerenter)="hovered.set(day.date)"
+                            (pointerleave)="hovered.set(null)"
+                          >
+                            {{ day.date.day }}
+                          </span>
+                        }
+                      </td>
+                    }
+                  </tr>
+                }
+              </tbody>
+            </table>
+          }
+        </div>
+      }
+      @case ('month') {
+        <div data-part="months">
+          @for (name of monthNames(); track $index) {
+            <button
+              data-part="period"
+              type="button"
+              [attr.data-selected]="focused().month === $index + 1 ? '' : null"
+              [attr.aria-selected]="focused().month === $index + 1 ? 'true' : null"
+              (click)="pickMonth($index + 1, $event)"
+            >
+              {{ name }}
+            </button>
+          }
+        </div>
+      }
+      @default {
+        <div data-part="years">
+          @for (year of years(); track year) {
+            <button
+              data-part="period"
+              type="button"
+              [attr.data-selected]="focused().year === year ? '' : null"
+              [attr.aria-selected]="focused().year === year ? 'true' : null"
+              (click)="pickYear(year, $event)"
+            >
+              {{ year }}
+            </button>
+          }
+        </div>
+      }
+    }`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'calendar',
+                        'data-part': 'root',
+                        '[attr.data-view]': 'currentView()',
+                        '[attr.data-calendar]': 'resolvedCalendar()',
+                        '[attr.data-months]': 'resolvedMonths() > 1 ? resolvedMonths() : null',
+                        '[attr.data-week-numbers]': "resolvedWeekNumbers() ? '' : null",
+                        '[attr.data-disabled]': "disabled() === true ? '' : null",
+                        '[attr.data-readonly]': "readOnly() === true ? '' : null",
+                        '[attr.data-invalid]': "invalid() === true ? '' : null",
+                        '(keydown)': 'onKeyDown($event)',
+                    }, styles: ["@layer slotted.components{[data-ui=calendar][data-part=root]{container-type:inline-size;container-name:slotted-calendar;--_font-size: var(--slotted-control-font-size-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_cell-size: var(--slotted-calendar-cell-size, var(--slotted-control-height-md, 34px));--_columns: 7;--_months: 1;--_month-gap: var(--slotted-space-6, 1rem);--_week-number-columns: 0;--_grid-size: calc(var(--_cell-size) * (var(--_columns) + var(--_week-number-columns)));background-color:var(--slotted-calendar-background, transparent);box-sizing:border-box;color:var(--slotted-calendar-color, var(--slotted-text, CanvasText));display:flex;flex-direction:column;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);--_heading-floor: calc(20ch + 3 * var(--_icon-size) + 4 * var(--_gap));inline-size:max(calc(var(--_grid-size) * var(--_months) + var(--_month-gap) * (var(--_months) - 1)),var(--_heading-floor));max-inline-size:100%}[data-ui=calendar][data-part=root][data-week-numbers]{--_week-number-columns: .75}[data-ui=calendar][data-part=root][data-months=\"2\"]{--_months: 2}[data-ui=calendar][data-part=root][data-months=\"3\"]{--_months: 3}[data-ui=calendar] [data-part=header],[data-ui=calendar] [data-part=grids],[data-ui=calendar] [data-part=months],[data-ui=calendar] [data-part=years]{--_cell-size: clamp( var(--slotted-target-min, 24px), calc(100cqi / (var(--_columns) + var(--_week-number-columns)) / var(--_months)), var(--slotted-calendar-cell-size, var(--slotted-control-height-md, 34px)) )}[data-ui=calendar] [data-part=header]{align-items:center;display:flex;gap:var(--slotted-space-2, .25rem);inline-size:100%;justify-content:space-between}[data-ui=calendar] [data-part=heading]{--slotted-icon-size: var(--_icon-size);appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-calendar-radius, var(--slotted-control-radius, 4px));color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:var(--slotted-space-2, .25rem);font:inherit;font-weight:var(--slotted-font-weight-semibold, 600);flex:1 1 auto;justify-content:safe center;min-inline-size:0;padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--slotted-space-2, .25rem);overflow:hidden;white-space:nowrap;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=calendar] [data-part=previous],[data-ui=calendar] [data-part=next]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_cell-size);border:0;border-radius:var(--slotted-calendar-radius, var(--slotted-control-radius, 4px));color:var(--slotted-calendar-trigger-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var(--_cell-size);justify-content:center;padding:0;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=calendar] [data-part=previous]>[data-ui=icon]{rotate:180deg}[data-ui=calendar] [data-part=grids]{display:flex;flex-wrap:wrap;gap:var(--_month-gap);justify-content:center}[data-ui=calendar] [data-part=grid]{border-collapse:collapse;table-layout:fixed}[data-ui=calendar] [data-part=grid-caption]{block-size:1px;clip-path:inset(50%);inline-size:1px;overflow:hidden;position:absolute;white-space:nowrap}[data-ui=calendar][data-part=root]:is([data-months=\"2\"],[data-months=\"3\"]) [data-part=grid-caption]{block-size:auto;clip-path:none;color:var(--slotted-calendar-weekday-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-semibold, 600);inline-size:auto;overflow:visible;padding-block-end:var(--slotted-space-2, .25rem);position:static}[data-ui=calendar] [data-part=week-header]{block-size:var(--_cell-size);color:var(--slotted-calendar-weekday-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-medium, 500);inline-size:var(--_cell-size);padding:0;text-overflow:clip}[data-ui=calendar] [data-part=week-number]{color:var(--slotted-calendar-week-number-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-font-size-xs, .75rem);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-regular, 400);inline-size:calc(var(--_cell-size) * .75);padding:0;border-inline-end:var(--slotted-border-width-thin, 1px) solid var(--slotted-calendar-week-number-border-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=calendar] [data-part=cell]{padding:0;position:relative}[data-ui=calendar] [data-part=day]{--_inset: var(--slotted-border-width-thin, 1px);align-items:center;block-size:calc(var(--_cell-size) - var(--_inset) * 2);inline-size:calc(var(--_cell-size) - var(--_inset) * 2);margin:var(--_inset);border-radius:var(--slotted-calendar-day-radius, var(--slotted-radius-sm, 4px));box-sizing:border-box;color:inherit;cursor:pointer;display:flex;font-variant-numeric:tabular-nums;flex-direction:column;gap:var(--slotted-space-1, .125rem);justify-content:center;line-height:1;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}[data-ui=calendar] [data-part=day]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui=calendar] [data-part=months],[data-ui=calendar] [data-part=years]{display:grid;gap:var(--slotted-space-2, .25rem);grid-template-columns:repeat(4,1fr);inline-size:calc(var(--_cell-size) * var(--_columns))}[data-ui=calendar] [data-part=period]{align-items:center;appearance:none;background-color:transparent;block-size:var(--_cell-size);border:0;border-radius:var(--slotted-calendar-day-radius, var(--slotted-radius-sm, 4px));color:inherit;cursor:pointer;display:flex;font:inherit;justify-content:center;padding-inline:var(--slotted-space-2, .25rem);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=calendar] [data-part=day][data-today]{color:var(--slotted-calendar-today-color, var(--slotted-tone-accent-text));font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=calendar] [data-part=day]:before{background-color:transparent;block-size:var(--slotted-space-2, .25rem);border-radius:var(--slotted-radius-full, 9999px);content:\"\";flex:0 0 auto;inline-size:var(--slotted-space-2, .25rem);order:1}[data-ui=calendar] [data-part=day][data-today]:before{background-color:currentcolor}[data-ui=calendar] [data-part=cell][data-outside-month] [data-part=day]{color:var(--slotted-calendar-outside-color, var(--slotted-text-muted, GrayText))}[data-ui=calendar] [data-part=cell][data-unavailable] [data-part=day]{color:var(--slotted-calendar-unavailable-color, var(--slotted-disabled-foreground));cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:var(--slotted-border-width-thin, 1px)}[data-ui=calendar] [data-part=cell][data-in-range]:before,[data-ui=calendar] [data-part=cell][data-range-start]:before,[data-ui=calendar] [data-part=cell][data-range-end]:before{background-color:var( --slotted-calendar-range-background, color-mix( in oklab, var(--slotted-tone-accent-text) calc(var(--slotted-highlight-tint-opacity, .075) * 100%), transparent ) );content:\"\";inset:0;position:absolute}[data-ui=calendar] [data-part=cell][data-range-start]:before{border-end-start-radius:var(--slotted-calendar-day-radius, var(--slotted-radius-sm, 4px));border-start-start-radius:var(--slotted-calendar-day-radius, var(--slotted-radius-sm, 4px))}[data-ui=calendar] [data-part=cell][data-range-end]:before{border-end-end-radius:var(--slotted-calendar-day-radius, var(--slotted-radius-sm, 4px));border-start-end-radius:var(--slotted-calendar-day-radius, var(--slotted-radius-sm, 4px))}[data-ui=calendar] [data-part=cell][data-range-start]:not([data-range-end]) [data-part=day]{border-end-end-radius:0;border-start-end-radius:0}[data-ui=calendar] [data-part=cell][data-range-end]:not([data-range-start]) [data-part=day]{border-end-start-radius:0;border-start-start-radius:0}[data-ui=calendar] [data-part=cell]:is([data-in-range],[data-range-start],[data-range-end]) [data-part=day]{--_inset: 0px}[data-ui=calendar] [data-part=cell][data-in-range] [data-part=day]{border-radius:0;color:var(--slotted-calendar-in-range-color, var(--slotted-tone-accent-text))}[data-ui=calendar] [data-part=cell][data-preview]:before{background-color:var( --slotted-calendar-preview-background, color-mix( in oklab, var(--slotted-tone-accent-text) calc(var(--slotted-highlight-tint-opacity, .075) * 50%), transparent ) )}[data-ui=calendar] [data-part=cell][data-preview]:is([data-range-start],[data-range-end]):not([data-selected]) [data-part=day]{box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-calendar-preview-border-color, var(--slotted-tone-accent-border));color:var(--slotted-calendar-in-range-color, var(--slotted-tone-accent-text))}[data-ui=calendar] [data-part=day]:hover:not([data-disabled]),[data-ui=calendar] [data-part=period]:hover:not(:disabled):not([data-disabled]),[data-ui=calendar] [data-part=heading]:hover:not(:disabled):not([data-disabled]),[data-ui=calendar] [data-part=previous]:hover:not(:disabled):not([data-disabled]),[data-ui=calendar] [data-part=next]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-calendar-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=calendar] [data-part=day]:active:not([data-disabled]),[data-ui=calendar] [data-part=period]:active:not(:disabled):not([data-disabled]),[data-ui=calendar] [data-part=previous]:active:not(:disabled):not([data-disabled]),[data-ui=calendar] [data-part=next]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-calendar-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=calendar] [data-part=cell][data-in-range] [data-part=day]:hover:not([data-disabled]){background-color:var( --slotted-calendar-range-hover-background, var(--slotted-tone-accent-subtle-hover) )}[data-ui=calendar] [data-part=cell][data-in-range] [data-part=day]:active:not([data-disabled]){background-color:var( --slotted-calendar-range-active-background, var(--slotted-tone-accent-subtle-active) )}[data-ui=calendar] [data-part=cell][data-unavailable] [data-part=day]:hover:not([data-disabled]),[data-ui=calendar] [data-part=cell][data-unavailable] [data-part=day]:active:not([data-disabled]){background-color:transparent}[data-ui=calendar] [data-part=cell][data-selected] [data-part=day],[data-ui=calendar] [data-part=period][data-selected]{background-color:var(--slotted-calendar-selected-background, var(--slotted-tone-accent-solid));color:var(--slotted-calendar-selected-color, var(--slotted-tone-accent-on-solid));font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=calendar] [data-part=day]:focus-visible,[data-ui=calendar] [data-part=period]:focus-visible,[data-ui=calendar] [data-part=heading]:focus-visible,[data-ui=calendar] [data-part=previous]:focus-visible,[data-ui=calendar] [data-part=next]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=calendar][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-calendar-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=calendar][data-part=root][data-invalid] [data-part=day]:focus-visible,[data-ui=calendar][data-part=root][data-invalid] [data-part=period]:focus-visible,[data-ui=calendar][data-part=root][data-invalid] [data-part=heading]:focus-visible,[data-ui=calendar][data-part=root][data-invalid] [data-part=previous]:focus-visible,[data-ui=calendar][data-part=root][data-invalid] [data-part=next]:focus-visible{--_invalid-ring: calc( var(--slotted-focus-ring-width, 2px) + var(--slotted-calendar-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px)) );outline-offset:calc(var(--_invalid-ring) * -1);outline-width:var(--_invalid-ring)}[data-ui=calendar][data-part=root][data-readonly] [data-part=day],[data-ui=calendar][data-part=root][data-readonly] [data-part=period]{cursor:default}[data-ui=calendar][data-part=root][data-disabled]{color:var(--slotted-calendar-disabled-color, var(--slotted-disabled-foreground))}[data-ui=calendar][data-part=root][data-disabled] [data-part=day][data-today]{color:var(--slotted-disabled-foreground)}[data-ui=calendar][data-part=root][data-disabled] [data-part=cell][data-selected] [data-part=day]{background-color:var(--slotted-disabled-background);color:var(--slotted-disabled-foreground)}[data-ui=calendar][data-part=root][data-disabled] [data-part=day],[data-ui=calendar][data-part=root][data-disabled] [data-part=period],[data-ui=calendar][data-part=root][data-disabled] [data-part=previous],[data-ui=calendar][data-part=root][data-disabled] [data-part=next],[data-ui=calendar][data-part=root][data-disabled] [data-part=heading]{cursor:not-allowed}[data-ui=calendar] [data-part=previous]:disabled,[data-ui=calendar] [data-part=next]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}@container slotted-calendar (max-width: 320px){[data-ui=calendar] [data-part=grids]{--_month-gap: var(--slotted-space-4, .5rem)}}@media(forced-colors:active){[data-ui=calendar] [data-part=cell][data-in-range]:before,[data-ui=calendar] [data-part=cell][data-range-start]:before,[data-ui=calendar] [data-part=cell][data-range-end]:before{border-block:var(--slotted-border-width-thin, 1px) solid var(--slotted-calendar-range-border-color, var(--slotted-tone-accent-border))}[data-ui=calendar] [data-part=cell][data-preview]:before{border-block-style:dashed}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], focusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedDate", required: false }] }], defaultFocusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFocusedDate", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], isDateUnavailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDateUnavailable", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], defaultView: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultView", required: false }] }], weekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumbers", required: false }] }], fixedWeeks: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedWeeks", required: false }] }], outsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "outsideDays", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], focusedDateChange: [{ type: i0.Output, args: ["focusedDateChange"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }], previewChange: [{ type: i0.Output, args: ["previewChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CALENDAR_DEFAULTS, SlCalendar, asDates, injectCalendarDefaults, isRange, isSameValue, isSelected, nextValue, provideCalendarDefaults, rangeStateOf };
+//# sourceMappingURL=slotted-angular-calendar.mjs.map