@nanahoshi/mona-ui 0.24.4 → 0.24.6

package/fesm2022/nanahoshi-mona-ui-calendar.mjs

@@ -1,9 +1,9 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, computed, input, output, DestroyRef, ElementRef, signal, contentChild, linkedSignal, model, afterNextRender, effect, untracked, Component } from '@angular/core';
+import { inject, TemplateRef, Directive, computed, input, output, DestroyRef, ElementRef, signal, contentChild, linkedSignal, booleanAttribute, model, afterNextRender, effect, untracked, Component } from '@angular/core';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
-import { any, exactly, Dictionary, lastOrDefault, range, index, select } from '@mirei/ts-collections';
+import { Dictionary, lastOrDefault, range, index, select } from '@mirei/ts-collections';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { PreventableEvent, TakeFirstPipe } from '@nanahoshi/mona-ui/common';
 import { CalendarService } from '@nanahoshi/mona-ui/date-input';
@@ -11,7 +11,7 @@ import { themeRaisedBackdropClasses, createElementControlId, rxTimeout } from '@
 import { DateTime } from 'luxon';
 import { skip, fromEvent } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
-import { formatNumber, MonaI18nService, injectComponentDirection, gregorianDateTime, formatGregorianDateToLocaleString, getLocaleFirstDayOfWeek, gregorianDateTimeFromObject } from '@nanahoshi/mona-ui/i18n';
+import { formatNumber, MonaI18nService, formatGregorianDateToLocaleString, injectComponentDirection, gregorianDateTime, getLocaleFirstDayOfWeek, gregorianDateTimeFromObject } from '@nanahoshi/mona-ui/i18n';
 import { cva } from 'class-variance-authority';
 
 // Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
@@ -212,10 +212,10 @@ const calendarDecadeViewCellThemeVariants = cva(`
     }
 });
 
+/** One year of the decade view: a grid cell. */
 class DecadeYearDirective {
     constructor() {
         this.#i18n = inject(MonaI18nService);
-        this.messages = this.#i18n.componentMessages("calendar", CALENDAR_DEFAULT_MESSAGES);
         this.ariaLabel = computed(() => this.messages().yearCellLabel(this.year()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
@@ -233,6 +233,7 @@ class DecadeYearDirective {
             return this.year() === DateTime.now().year;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isCurrent" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("calendar", CALENDAR_DEFAULT_MESSAGES);
         this.selected = computed(() => {
             const selectedDate = this.selectedDate();
             if (!selectedDate) {
@@ -241,6 +242,9 @@ class DecadeYearDirective {
             return this.year() === DateTime.fromJSDate(selectedDate).year;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        /** Whether the whole calendar is disabled. */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.navigatedDate = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "navigatedDate" }] : /* istanbul ignore next */ []));
         this.rounded = input.required(/* @ts-ignore */
@@ -252,22 +256,23 @@ class DecadeYearDirective {
     }
     #i18n;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DecadeYearDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: DecadeYearDirective, isStandalone: true, selector: "[monaDecadeYear]", inputs: { navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-current": "isCurrent() ? 'true' : null", "attr.aria-label": "ariaLabel()", "attr.aria-selected": "selected() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: DecadeYearDirective, isStandalone: true, selector: "[monaDecadeYear]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, properties: { "attr.tabindex": "focused() && !disabled() ? 0 : -1", "attr.aria-current": "isCurrent() ? 'true' : null", "attr.aria-disabled": "disabled() ? 'true' : null", "attr.aria-label": "ariaLabel()", "attr.aria-selected": "selected() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DecadeYearDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[monaDecadeYear]",
                     host: {
-                        "[attr.tabindex]": "focused() ? 0 : -1",
+                        "[attr.tabindex]": "focused() && !disabled() ? 0 : -1",
                         "[attr.aria-current]": "isCurrent() ? 'true' : null",
+                        "[attr.aria-disabled]": "disabled() ? 'true' : null",
                         "[attr.aria-label]": "ariaLabel()",
                         "[attr.aria-selected]": "selected() ? 'true' : null",
                         "[class]": "baseClass()",
                         role: "gridcell"
                     }
                 }]
-        }], propDecorators: { navigatedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigatedDate", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], year: [{ type: i0.Input, args: [{ isSignal: true, alias: "year", required: true }] }] } });
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], navigatedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigatedDate", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], year: [{ type: i0.Input, args: [{ isSignal: true, alias: "year", required: true }] }] } });
 
 const compareDates = (date1, date2, operator) => {
     if (!date1 || !date2) {
@@ -309,9 +314,25 @@ const compareDates = (date1, date2, operator) => {
     }
     return operator === "==";
 };
+/** A key that is equal for two dates on the same local calendar day, whatever their time. */
+const toDayKey = (date) => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
 
+/**
+ * One day of the month view: a grid cell named by its full date ("Tuesday, November 4, 2026"). The calendar passes
+ * the selection and the range preview as sets of day keys, so each cell answers in constant time.
+ */
 class MonthDayDirective {
     constructor() {
+        this.#i18n = inject(MonaI18nService);
+        this.#key = computed(() => toDayKey(this.entry().key), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#key" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = computed(() => formatGregorianDateToLocaleString(this.entry().key, this.#i18n.localeId(), {
+            weekday: "long",
+            year: "numeric",
+            month: "long",
+            day: "numeric"
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
             const disabled = this.dayDisabled();
             const focused = this.focused();
@@ -331,33 +352,11 @@ class MonthDayDirective {
             });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
-        this.dayDisabled = computed(() => {
-            const disabled = this.disabled();
-            const entry = this.entry();
-            const disabledDates = this.disabledDates();
-            const max = this.max();
-            const min = this.min();
-            let isDisabledByInput = false;
-            if (typeof disabledDates === "function") {
-                isDisabledByInput = disabledDates(entry.key);
-            }
-            else if (disabledDates) {
-                isDisabledByInput = any(disabledDates, d => compareDates(entry.key, d, "=="));
-            }
-            return disabled || isDisabledByInput || compareDates(entry.key, max, ">") || compareDates(entry.key, min, "<");
-        }, /* @ts-ignore */
+        this.dayDisabled = computed(() => this.disabled() || this.isDayUnavailable()(this.entry().key), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dayDisabled" }] : /* istanbul ignore next */ []));
-        this.focused = computed(() => {
-            const entry = this.entry();
-            const navigatedDate = this.navigatedDate();
-            return compareDates(entry.key, navigatedDate, "==");
-        }, /* @ts-ignore */
+        this.focused = computed(() => compareDates(this.entry().key, this.navigatedDate(), "=="), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
-        this.isToday = computed(() => {
-            const entry = this.entry();
-            const today = new Date();
-            return compareDates(entry.key, today, "==");
-        }, /* @ts-ignore */
+        this.isToday = computed(() => compareDates(this.entry().key, this.today(), "=="), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isToday" }] : /* istanbul ignore next */ []));
         this.outside = computed(() => {
             const entry = this.entry();
@@ -366,43 +365,35 @@ class MonthDayDirective {
             return compareDates(entry.key, monthStart, "<") || compareDates(entry.key, monthEnd, ">");
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "outside" }] : /* istanbul ignore next */ []));
-        this.rangePreviewed = computed(() => {
-            const entry = this.entry();
-            return !this.selected() && exactly(this.rangePreview(), 1, d => compareDates(entry.key, d, "=="));
-        }, /* @ts-ignore */
+        this.rangePreviewed = computed(() => !this.selected() && this.rangePreviewKeys().has(this.#key()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rangePreviewed" }] : /* istanbul ignore next */ []));
-        this.selected = computed(() => {
-            const entry = this.entry();
-            const value = this.value();
-            if (Array.isArray(value)) {
-                return exactly(value, 1, d => compareDates(entry.key, d, "=="));
-            }
-            return compareDates(entry.key, value, "==");
-        }, /* @ts-ignore */
+        this.selected = computed(() => this.selectedKeys().has(this.#key()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
         this.dayPointerEnter = output();
         this.daySelect = output();
+        /** Whether the whole calendar is disabled. */
         this.disabled = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        this.disabledDates = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
         this.entry = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "entry" }] : /* istanbul ignore next */ []));
-        this.max = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
-        this.min = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        /** Whether a day can't be picked: out of range or in `disabledDates`. */
+        this.isDayUnavailable = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDayUnavailable" }] : /* istanbul ignore next */ []));
         this.monthBounds = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthBounds" }] : /* istanbul ignore next */ []));
         this.navigatedDate = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "navigatedDate" }] : /* istanbul ignore next */ []));
-        this.rangePreview = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rangePreview" }] : /* istanbul ignore next */ []));
+        this.rangePreviewKeys = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rangePreviewKeys" }] : /* istanbul ignore next */ []));
         this.rounded = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
-        this.value = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.selectedKeys = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+        this.today = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
     }
+    #i18n;
+    #key;
     onClick(event) {
         if (this.dayDisabled()) {
             return;
@@ -417,31 +408,34 @@ class MonthDayDirective {
         this.dayPointerEnter.emit(this.entry().key);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MonthDayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: MonthDayDirective, isStandalone: true, selector: "[monaMonthDay]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: true, transformFunction: null }, entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, monthBounds: { classPropertyName: "monthBounds", publicName: "monthBounds", isSignal: true, isRequired: true, transformFunction: null }, navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rangePreview: { classPropertyName: "rangePreview", publicName: "rangePreview", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dayPointerEnter: "dayPointerEnter", daySelect: "daySelect" }, host: { attributes: { "role": "button" }, listeners: { "click": "onClick($event)", "pointerenter": "onPointerEnter()" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-pressed": "selected() ? 'true' : 'false'", "attr.aria-current": "isToday() ? 'date' : null", "attr.aria-disabled": "dayDisabled() ? 'true' : null", "attr.data-range-preview": "rangePreviewed() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: MonthDayDirective, isStandalone: true, selector: "[monaMonthDay]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null }, isDayUnavailable: { classPropertyName: "isDayUnavailable", publicName: "isDayUnavailable", isSignal: true, isRequired: true, transformFunction: null }, monthBounds: { classPropertyName: "monthBounds", publicName: "monthBounds", isSignal: true, isRequired: true, transformFunction: null }, navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rangePreviewKeys: { classPropertyName: "rangePreviewKeys", publicName: "rangePreviewKeys", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, selectedKeys: { classPropertyName: "selectedKeys", publicName: "selectedKeys", isSignal: true, isRequired: true, transformFunction: null }, today: { classPropertyName: "today", publicName: "today", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dayPointerEnter: "dayPointerEnter", daySelect: "daySelect" }, host: { attributes: { "role": "gridcell" }, listeners: { "click": "onClick($event)", "pointerenter": "onPointerEnter()" }, properties: { "attr.tabindex": "focused() && !disabled() ? 0 : -1", "attr.aria-current": "isToday() ? 'date' : null", "attr.aria-disabled": "dayDisabled() ? 'true' : null", "attr.aria-label": "ariaLabel()", "attr.aria-selected": "selected() ? 'true' : null", "attr.data-range-preview": "rangePreviewed() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MonthDayDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[monaMonthDay]",
                     host: {
-                        "[attr.tabindex]": "focused() ? 0 : -1",
-                        "[attr.aria-pressed]": "selected() ? 'true' : 'false'",
+                        "[attr.tabindex]": "focused() && !disabled() ? 0 : -1",
                         "[attr.aria-current]": "isToday() ? 'date' : null",
                         "[attr.aria-disabled]": "dayDisabled() ? 'true' : null",
+                        "[attr.aria-label]": "ariaLabel()",
+                        "[attr.aria-selected]": "selected() ? 'true' : null",
                         "[attr.data-range-preview]": "rangePreviewed() ? 'true' : null",
                         "[class]": "baseClass()",
                         "(click)": "onClick($event)",
                         "(pointerenter)": "onPointerEnter()",
-                        role: "button"
+                        role: "gridcell"
                     }
                 }]
-        }], propDecorators: { dayPointerEnter: [{ type: i0.Output, args: ["dayPointerEnter"] }], daySelect: [{ type: i0.Output, args: ["daySelect"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: true }] }], entry: [{ type: i0.Input, args: [{ isSignal: true, alias: "entry", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: true }] }], monthBounds: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthBounds", required: true }] }], navigatedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigatedDate", required: true }] }], rangePreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangePreview", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+        }], propDecorators: { dayPointerEnter: [{ type: i0.Output, args: ["dayPointerEnter"] }], daySelect: [{ type: i0.Output, args: ["daySelect"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }], entry: [{ type: i0.Input, args: [{ isSignal: true, alias: "entry", required: true }] }], isDayUnavailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDayUnavailable", required: true }] }], monthBounds: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthBounds", required: true }] }], navigatedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigatedDate", required: true }] }], rangePreviewKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangePreviewKeys", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }], selectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedKeys", required: true }] }], today: [{ type: i0.Input, args: [{ isSignal: true, alias: "today", required: true }] }] } });
 
+/** One month of the year view: a grid cell named by the long month and the year ("November 2026"). */
 class YearMonthDirective {
     constructor() {
+        this.#i18n = inject(MonaI18nService);
         this.ariaLabel = computed(() => {
-            const monthName = this.monthName();
-            return `${monthName} ${this.navigatedDate().getFullYear()}`;
+            const date = new Date(this.navigatedDate().getFullYear(), this.month() - 1, 1);
+            return formatGregorianDateToLocaleString(date, this.#i18n.localeId(), { year: "numeric", month: "long" });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
@@ -471,10 +465,11 @@ class YearMonthDirective {
             return this.month() === selDate.month && navDate.year === selDate.year;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        /** Whether the whole calendar is disabled. */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.month = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "month" }] : /* istanbul ignore next */ []));
-        this.monthName = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "monthName" }] : /* istanbul ignore next */ []));
         this.navigatedDate = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "navigatedDate" }] : /* istanbul ignore next */ []));
         this.rounded = input.required(/* @ts-ignore */
@@ -482,24 +477,34 @@ class YearMonthDirective {
         this.selectedDate = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "selectedDate" }] : /* istanbul ignore next */ []));
     }
+    #i18n;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: YearMonthDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: YearMonthDirective, isStandalone: true, selector: "[monaYearMonth]", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, monthName: { classPropertyName: "monthName", publicName: "monthName", isSignal: true, isRequired: true, transformFunction: null }, navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-current": "isCurrent() ? 'date' : null", "attr.aria-label": "ariaLabel()", "attr.aria-selected": "selected() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: YearMonthDirective, isStandalone: true, selector: "[monaYearMonth]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, properties: { "attr.tabindex": "focused() && !disabled() ? 0 : -1", "attr.aria-current": "isCurrent() ? 'date' : null", "attr.aria-disabled": "disabled() ? 'true' : null", "attr.aria-label": "ariaLabel()", "attr.aria-selected": "selected() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: YearMonthDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[monaYearMonth]",
                     host: {
-                        "[attr.tabindex]": "focused() ? 0 : -1",
+                        "[attr.tabindex]": "focused() && !disabled() ? 0 : -1",
                         "[attr.aria-current]": "isCurrent() ? 'date' : null",
+                        "[attr.aria-disabled]": "disabled() ? 'true' : null",
                         "[attr.aria-label]": "ariaLabel()",
                         "[attr.aria-selected]": "selected() ? 'true' : null",
                         "[class]": "baseClass()",
                         role: "gridcell"
                     }
                 }]
-        }], propDecorators: { month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: true }] }], monthName: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthName", required: true }] }], navigatedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigatedDate", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }] } });
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: true }] }], navigatedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigatedDate", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }] } });
 
+/** Midnight at the start of the local day `date` falls on. */
+function startOfDay(date) {
+    return DateTime.fromJSDate(date).startOf("day").toJSDate();
+}
+/** Whole calendar days from `start` to `end`, whatever their times and across DST changes. */
+function calendarDaysBetween(start, end) {
+    return Math.round(end.startOf("day").diff(start.startOf("day"), "days").days);
+}
 const FIRST_DAY_OF_WEEK_TO_ISO = {
     monday: 1,
     tuesday: 2,
@@ -638,6 +643,25 @@ class CalendarComponent {
         ...(ngDevMode ? [{ debugName: "headerYear" }] : /* istanbul ignore next */ []));
         this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && this.isEmptyValue())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether a day can't be picked: outside `minDate`/`maxDate` or in `disabledDates`. An iterable of disabled
+         * dates is turned into a set of day keys once, so each of the 42 cells answers in constant time.
+         */
+        this.isDayUnavailable = computed(() => {
+            const disabledDates = this.disabledDates();
+            const min = this.minDate();
+            const max = this.maxDate();
+            const isOutOfRange = (date) => compareDates(date, max, ">") || compareDates(date, min, "<");
+            if (typeof disabledDates === "function") {
+                return date => isOutOfRange(date) || disabledDates(date);
+            }
+            const keys = new Set();
+            for (const disabledDate of disabledDates ?? []) {
+                keys.add(toDayKey(disabledDate));
+            }
+            return date => isOutOfRange(date) || keys.has(toDayKey(date));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDayUnavailable" }] : /* istanbul ignore next */ []));
         this.messages = this.#i18n.componentMessages("calendar", CALENDAR_DEFAULT_MESSAGES);
         this.monthBounds = computed(() => {
             const navigatedDate = this.navigatedDate();
@@ -675,7 +699,8 @@ class CalendarComponent {
                 .toImmutableSet();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
-        this.navigatedDate = signal(new Date(), /* @ts-ignore */
+        // Midnight, so a date picked with the keyboard before any value exists carries no clock time.
+        this.navigatedDate = signal(startOfDay(new Date()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "navigatedDate" }] : /* istanbul ignore next */ []));
         this.nextButtonLabel = computed(() => {
             const view = this.calendarView();
@@ -718,6 +743,8 @@ class CalendarComponent {
             return this.getInclusiveDateRange(pendingRangeStart, this.rangePreviewDate() ?? this.navigatedDate());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rangePreviewDates" }] : /* istanbul ignore next */ []));
+        this.rangePreviewKeys = computed(() => new Set(this.rangePreviewDates().map(toDayKey)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rangePreviewKeys" }] : /* istanbul ignore next */ []));
         this.selectedDates = linkedSignal(() => {
             const v = this.value();
             const selection = this.selection();
@@ -729,7 +756,7 @@ class CalendarComponent {
                 const date2 = DateTime.fromJSDate(v[v.length - 1]);
                 const startDate = date1 <= date2 ? date1 : date2;
                 const endDate = date1 <= date2 ? date2 : date1;
-                const totalDays = endDate.diff(startDate, "days").days + 1;
+                const totalDays = calendarDaysBetween(startDate, endDate) + 1;
                 return range(0, totalDays)
                     .select(i => startDate.plus({ days: i }).toJSDate())
                     .toArray();
@@ -737,10 +764,14 @@ class CalendarComponent {
             return Array.isArray(v) ? v : [v];
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedDates" }] : /* istanbul ignore next */ []));
-        this.timezone = DateTime.local().zoneName ?? undefined;
+        this.selectedKeys = computed(() => new Set(this.selectedDates().map(toDayKey)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+        /** Today at midnight. Refreshed when focus enters the calendar, so a page left open overnight moves on. */
+        this.today = signal(startOfDay(new Date()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
         this.todayButtonLabel = computed(() => {
             const locale = this.#i18n.localeId();
-            const todayStr = formatGregorianDateToLocaleString(new Date(), locale, {
+            const todayStr = formatGregorianDateToLocaleString(this.today(), locale, {
                 year: "numeric",
                 month: "long",
                 day: "numeric"
@@ -748,6 +779,8 @@ class CalendarComponent {
             return this.messages().goToToday(todayStr);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "todayButtonLabel" }] : /* istanbul ignore next */ []));
+        this.todayUnavailable = computed(() => this.isDayUnavailable()(this.today()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "todayUnavailable" }] : /* istanbul ignore next */ []));
         this.viewSwitchButtonLabel = computed(() => {
             const view = this.calendarView();
             const locale = this.#i18n.localeId();
@@ -795,8 +828,7 @@ class CalendarComponent {
         /**
          * @description Sets the disabled state of the calendar.
          */
-        this.disabled = model(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Sets the disabled dates of the calendar.
          * Accepts either an iterable of Date objects or a predicate function.
@@ -809,13 +841,18 @@ class CalendarComponent {
          */
         this.firstDay = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "firstDay" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Moves focus to the active day when the calendar first renders. An inline calendar on a page
+         * should leave focus where it is; a calendar that opens in a popup sets this so focus moves into it.
+         * @default false
+         */
+        this.focusOnMount = input(false, { ...(ngDevMode ? { debugName: "focusOnMount" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Marks the calendar as invalid. When bound to a signal form field via `[formField]`,
          * this is written by the `FormField` directive.
          * @default false
          */
-        this.invalid = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Sets the maximum date that can be selected.
          */
@@ -830,15 +867,13 @@ class CalendarComponent {
          * @description Sets the readonly state of the calendar.
          * @default false
          */
-        this.readonly = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Sets whether the calendar is required. When bound to a signal form field via `[formField]`,
          * this is written by the `FormField` directive.
          * @default false
          */
-        this.required = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Sets the border radius of the calendar.
          * @default "medium"
@@ -852,8 +887,8 @@ class CalendarComponent {
         this.selection = input("single", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
         /**
-         * @description Emitted when the calendar value is changed by user interaction.
-         * The `FormField` directive listens to this to mark the field as touched.
+         * @description Emitted when focus leaves the calendar, as a native input is touched on blur. Moving between
+         * its buttons and days doesn't count. The `FormField` directive listens to this to mark the field as touched.
          */
         this.touch = output();
         /**
@@ -861,14 +896,14 @@ class CalendarComponent {
          * this is written by the `FormField` directive.
          * @default false
          */
-        this.touched = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        this.touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Adds custom CSS classes to the calendar host element.
          */
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
         /**
-         * @description The current value of the calendar.
+         * @description The current value of the calendar: a `Date` in single selection, the selected dates in multiple
+         * selection, and `[start, end]` in range selection. A range is written once both ends are picked.
          * @default null
          */
         this.value = model(null, /* @ts-ignore */
@@ -877,33 +912,36 @@ class CalendarComponent {
          * @description Enables the display of week numbers in the calendar.
          * @default false
          */
-        this.weekNumber = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "weekNumber" }] : /* istanbul ignore next */ []));
+        this.weekNumber = input(false, { ...(ngDevMode ? { debugName: "weekNumber" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         afterNextRender({
             read: () => {
                 this.setupKeyboardNavigation();
-                this.focusActiveCell();
+                if (this.focusOnMount()) {
+                    this.focusActiveCell();
+                }
             }
         });
         effect(() => {
             const min = this.minDate();
             const max = this.maxDate();
-            this.disabledDates();
             untracked(() => {
+                // Keep the active day within the range. A day disabled through disabledDates can stay active: it is
+                // focusable and announced as unavailable, so the keyboard can move past it.
                 const navigationDate = this.navigatedDate();
-                if (this.isDateDisabled(navigationDate)) {
-                    const newDate = min ?? max;
-                    if (newDate) {
-                        this.navigatedDate.set(newDate);
-                    }
+                if (compareDates(navigationDate, min, "<") && min) {
+                    this.navigatedDate.set(min);
+                }
+                else if (compareDates(navigationDate, max, ">") && max) {
+                    this.navigatedDate.set(max);
                 }
             });
         });
         effect(() => {
             const v = this.value();
             untracked(() => {
-                if (v != null) {
-                    const lastDate = Array.isArray(v) ? (lastOrDefault(v) ?? DateTime.now().toJSDate()) : v;
+                // Show the last selected date. Clearing the selection leaves the view where it is.
+                const lastDate = Array.isArray(v) ? lastOrDefault(v) : v;
+                if (lastDate) {
                     this.navigatedDate.set(lastDate);
                 }
             });
@@ -957,6 +995,17 @@ class CalendarComponent {
         }
         this.rangePreviewDate.set(date);
     }
+    onFocusOut(event) {
+        // Removing a focused calendar from the page fires focusout after it is destroyed.
+        if (this.#destroyRef.destroyed) {
+            return;
+        }
+        const nextTarget = event.relatedTarget;
+        if (nextTarget instanceof Node && this.#hostElementRef.nativeElement.contains(nextTarget)) {
+            return;
+        }
+        this.touch.emit();
+    }
     onMonthClick(month) {
         this.navigatedDate.set(DateTime.fromJSDate(this.navigatedDate()).set({ month }).toJSDate());
         this.calendarView.set("month");
@@ -982,18 +1031,19 @@ class CalendarComponent {
         this.navigatedDate.set(direction === "prev" ? date.minus(unit).toJSDate() : date.plus(unit).toJSDate());
     }
     onTodayButtonClick() {
-        if (this.disabled() || this.readonly()) {
+        this.refreshToday();
+        if (this.disabled() || this.readonly() || this.todayUnavailable()) {
             return;
         }
-        const currentDate = DateTime.now();
-        const navigatedDate = DateTime.fromJSDate(this.navigatedDate()).set({
-            year: currentDate.year,
-            month: currentDate.month,
-            day: currentDate.day
-        });
-        this.clearPendingRange();
-        this.navigatedDate.set(navigatedDate.toJSDate());
-        this.setCurrentDate(navigatedDate.toJSDate());
+        // Today is picked as a click on its day would pick it, so the same rules apply.
+        const today = this.today();
+        if (this.selection() === "range") {
+            this.handleRangeSelection(today);
+            this.navigatedDate.set(today);
+        }
+        else {
+            this.handleSingleSelection(today);
+        }
         this.calendarView.set("month");
         this.commitUserSelection();
     }
@@ -1004,13 +1054,22 @@ class CalendarComponent {
         this.navigatedDate.set(DateTime.fromJSDate(this.navigatedDate()).set({ year }).toJSDate());
         this.calendarView.set("year");
     }
+    refreshToday() {
+        const today = startOfDay(new Date());
+        if (!compareDates(today, this.today(), "==")) {
+            this.today.set(today);
+        }
+    }
     clearPendingRange() {
         this.pendingRangeStart.set(null);
         this.rangePreviewDate.set(null);
     }
     commitUserSelection() {
+        // A range is written once both ends are picked; the first click only starts it.
+        if (this.selection() === "range" && this.pendingRangeStart() != null) {
+            return;
+        }
         this.value.set(this.#outputValue());
-        this.touch.emit();
     }
     extendSelection(offset) {
         const currentDate = this.navigatedDate();
@@ -1048,7 +1107,7 @@ class CalendarComponent {
         const lastSelectedDate = lastOrDefault(this.selectedDates()) ?? this.navigatedDate();
         const startDate = lastSelectedDate < date ? lastSelectedDate : date;
         const endDate = this.navigatedDate() > date ? this.navigatedDate() : date;
-        const totalDays = DateTime.fromJSDate(endDate).diff(DateTime.fromJSDate(startDate), "days").days + 1;
+        const totalDays = calendarDaysBetween(DateTime.fromJSDate(startDate), DateTime.fromJSDate(endDate)) + 1;
         return range(0, totalDays)
             .select(i => DateTime.fromJSDate(startDate).plus({ days: i }).toJSDate())
             .toArray();
@@ -1058,7 +1117,7 @@ class CalendarComponent {
         const dateTime2 = DateTime.fromJSDate(date2);
         const startDate = dateTime1 <= dateTime2 ? dateTime1 : dateTime2;
         const endDate = dateTime1 <= dateTime2 ? dateTime2 : dateTime1;
-        const totalDays = endDate.diff(startDate, "days").days + 1;
+        const totalDays = calendarDaysBetween(startDate, endDate) + 1;
         return range(0, totalDays)
             .select(i => startDate.plus({ days: i }).toJSDate())
             .toArray();
@@ -1072,6 +1131,10 @@ class CalendarComponent {
         if (preventableEvent.isDefaultPrevented()) {
             return;
         }
+        // Keys pressed on the header buttons belong to the buttons: the arrows don't move the active day.
+        if (event.target.closest("button")) {
+            return;
+        }
         const view = this.calendarView();
         const isCtrlOrCmd = event.ctrlKey || event.metaKey;
         const isShift = event.shiftKey;
@@ -1127,10 +1190,6 @@ class CalendarComponent {
                 break;
             case "Enter":
             case " ": {
-                const target = event.target;
-                if (target.tagName === "BUTTON" || target.closest("button")) {
-                    return;
-                }
                 event.preventDefault();
                 const previousView = this.calendarView();
                 if (this.readonly() && previousView === "month") {
@@ -1164,12 +1223,13 @@ class CalendarComponent {
                 break;
             case "PageUp":
                 event.preventDefault();
-                this.navigateByPeriod(-1, view);
+                // Shift+PageUp moves a year in the month view, as in the WAI-ARIA date picker pattern.
+                this.navigateByPeriod(isShift && view === "month" ? -12 : -1, view);
                 shouldFocusCell = true;
                 break;
             case "PageDown":
                 event.preventDefault();
-                this.navigateByPeriod(1, view);
+                this.navigateByPeriod(isShift && view === "month" ? 12 : 1, view);
                 shouldFocusCell = true;
                 break;
             case "t":
@@ -1200,10 +1260,11 @@ class CalendarComponent {
             const date1 = DateTime.fromJSDate(date);
             const valueList = this.getDateArray(value);
             const selectedDates = select(valueList, e => DateTime.fromJSDate(e));
-            const alreadySelected = selectedDates.any(e => e.equals(date1));
+            // Compare by day: a selected value carries a time, the clicked day is midnight.
+            const alreadySelected = selectedDates.any(e => e.hasSame(date1, "day"));
             if (alreadySelected) {
                 const newDates = selectedDates
-                    .where(e => !e.equals(date1))
+                    .where(e => !e.hasSame(date1, "day"))
                     .select(e => e.toJSDate())
                     .toArray();
                 this.setCurrentDate(newDates);
@@ -1288,22 +1349,15 @@ class CalendarComponent {
         return isRtl ? "prev" : "next";
     }
     isDateDisabled(date) {
-        const disabledDates = this.disabledDates();
-        const max = this.maxDate();
-        const min = this.minDate();
-        let isDisabledByInput = false;
-        if (typeof disabledDates === "function") {
-            isDisabledByInput = disabledDates(date);
-        }
-        else if (disabledDates) {
-            isDisabledByInput = any(disabledDates, d => compareDates(date, d, "=="));
-        }
-        return isDisabledByInput || compareDates(date, max, ">") || compareDates(date, min, "<");
+        return this.isDayUnavailable()(date);
     }
     isEmptyValue() {
         const value = this.value();
         return value == null || (Array.isArray(value) && value.length === 0);
     }
+    isOutOfRange(date) {
+        return compareDates(date, this.maxDate(), ">") || compareDates(date, this.minDate(), "<");
+    }
     navigateByDaysOrCells(offset, view) {
         const currentDate = this.navigatedDate();
         const dateTime = DateTime.fromJSDate(currentDate);
@@ -1319,7 +1373,8 @@ class CalendarComponent {
                 newDate = dateTime.plus({ years: offset }).toJSDate();
                 break;
         }
-        if (view === "month" && this.isDateDisabled(newDate)) {
+        // A disabled day can be focused (it is announced as unavailable); only the range bounds stop the arrows.
+        if (view === "month" && this.isOutOfRange(newDate)) {
             return;
         }
         this.rangePreviewDate.set(null);
@@ -1371,7 +1426,8 @@ class CalendarComponent {
                 newDate = dateTime.plus({ years: offset * 4 }).toJSDate();
                 break;
         }
-        if (view === "month" && this.isDateDisabled(newDate)) {
+        // A disabled day can be focused (it is announced as unavailable); only the range bounds stop the arrows.
+        if (view === "month" && this.isOutOfRange(newDate)) {
             return;
         }
         this.rangePreviewDate.set(null);
@@ -1447,7 +1503,8 @@ class CalendarComponent {
         this.navigatedDate.set(newDate);
     }
     navigateToToday() {
-        const today = DateTime.now().toJSDate();
+        this.refreshToday();
+        const today = this.today();
         if (this.isDateDisabled(today)) {
             return;
         }
@@ -1536,7 +1593,7 @@ class CalendarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CalendarComponent, isStandalone: true, selector: "mona-calendar", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, firstDay: { classPropertyName: "firstDay", publicName: "firstDay", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, weekNumber: { classPropertyName: "weekNumber", publicName: "weekNumber", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", touch: "touch", value: "valueChange" }, host: { attributes: { "role": "application" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.data-invalid": "invalidState() || null", "attr.data-required": "required() || null", "attr.tabindex": "disabled() ? -1 : 0", "class": "baseClass()" } }, queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [size]=\"'small'\"\n        (click)=\"onTodayButtonClick()\"\n        [attr.aria-label]=\"todayButtonLabel()\">\n        <span>{{ messages().today }}</span>\n    </button>\n    @switch (calendarView()) {\n        @case (\"month\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                (click)=\"onViewChangeClick('year')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    headerMonthYear()\n                }}</span>\n            </button>\n        }\n        @case (\"year\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                (click)=\"onViewChangeClick('decade')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    headerYear()\n                }}</span>\n            </button>\n        }\n        @case (\"decade\") {\n            <button monaButton look=\"ghost\" [rounded]=\"rounded()\" [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\"\n                    >{{ formatInteger(decadeStart()) }} - {{ formatInteger(decadeEnd()) }}</span\n                >\n            </button>\n        }\n    }\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        (click)=\"onNavigationClick('prev')\"\n        [attr.aria-label]=\"prevButtonLabel()\">\n        <svg lucideChevronLeft class=\"rtl:rotate-180\"></svg>\n    </button>\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        (click)=\"onNavigationClick('next')\"\n        [attr.aria-label]=\"nextButtonLabel()\">\n        <svg lucideChevronRight class=\"rtl:rotate-180\"></svg>\n    </button>\n</div>\n\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{ ariaLabel() }}</div>\n\n@if (calendarView() === \"month\") {\n    @let columnCount = weekNumber() ? 8 : 7;\n    <div [class]=\"monthGridHeaderClass()\" [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n        @if (weekNumber()) {\n            <div></div>\n        }\n        @for (day of weekdays(); track day.full) {\n            <div>\n                <span aria-hidden=\"true\">{{ day.display }}</span>\n                <span class=\"sr-only\">{{ day.full }}</span>\n            </div>\n        }\n    </div>\n    <div\n        [class]=\"monthGridClass()\"\n        [attr.aria-labelledby]=\"gridId + '-heading'\"\n        (pointerleave)=\"onMonthGridPointerLeave()\"\n        [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n        @for (row of monthDictChunked(); track $index) {\n            @if (weekNumber()) {\n                @let firstEntry = row | monaTakeFirst;\n                @if (firstEntry) {\n                    @let week = getWeekNumber(firstEntry.key);\n                    <div>{{ formatInteger(week) }}</div>\n                }\n            }\n            @for (entry of row; track entry.key) {\n                <div\n                    (dayPointerEnter)=\"onDayPointerEnter($event)\"\n                    (daySelect)=\"onDayClick($event.date, $event.event)\"\n                    monaMonthDay\n                    [disabled]=\"disabled()\"\n                    [disabledDates]=\"disabledDates()\"\n                    [min]=\"minDate()\"\n                    [max]=\"maxDate()\"\n                    [monthBounds]=\"[monthBounds().start, monthBounds().end]\"\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rangePreview]=\"rangePreviewDates()\"\n                    [rounded]=\"rounded()\"\n                    [value]=\"selectedDates()\"\n                    [entry]=\"entry\">\n                    @if (monthCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: entry.value, date: entry.key }\"></ng-container>\n                    } @else {\n                        <span>{{ formatInteger(entry.value) }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n} @else if (calendarView() === \"year\") {\n    <div [class]=\"yearGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of months(); track $index) {\n            @for (monthItem of row; track monthItem) {\n                <div\n                    (click)=\"onMonthClick(monthItem[0])\"\n                    monaYearMonth\n                    [month]=\"monthItem[0]\"\n                    [monthName]=\"monthItem[1]\"\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rounded]=\"rounded()\"\n                    [selectedDate]=\"selectedDates()[0]\">\n                    @if (yearCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: monthItem[0], text: monthItem[1] }\">\n                        </ng-container>\n                    } @else {\n                        <span>{{ monthItem[1] }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n} @else if (calendarView() === \"decade\") {\n    <div [class]=\"decadeGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of decadeYears(); track $index) {\n            @for (year of row; track year) {\n                <div\n                    (click)=\"onYearClick(year)\"\n                    monaDecadeYear\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rounded]=\"rounded()\"\n                    [year]=\"year\"\n                    [selectedDate]=\"selectedDates()[0]\">\n                    @if (decadeCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: year }\">\n                        </ng-container>\n                    } @else {\n                        <span>{{ formatInteger(year) }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "directive", type: MonthDayDirective, selector: "[monaMonthDay]", inputs: ["disabled", "disabledDates", "entry", "max", "min", "monthBounds", "navigatedDate", "rangePreview", "rounded", "value"], outputs: ["dayPointerEnter", "daySelect"] }, { kind: "directive", type: DecadeYearDirective, selector: "[monaDecadeYear]", inputs: ["navigatedDate", "rounded", "selectedDate", "year"] }, { kind: "directive", type: YearMonthDirective, selector: "[monaYearMonth]", inputs: ["month", "monthName", "navigatedDate", "rounded", "selectedDate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "pipe", type: TakeFirstPipe, name: "monaTakeFirst" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CalendarComponent, isStandalone: true, selector: "mona-calendar", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, firstDay: { classPropertyName: "firstDay", publicName: "firstDay", isSignal: true, isRequired: false, transformFunction: null }, focusOnMount: { classPropertyName: "focusOnMount", publicName: "focusOnMount", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, weekNumber: { classPropertyName: "weekNumber", publicName: "weekNumber", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange" }, host: { listeners: { "focusin": "refreshToday()", "focusout": "onFocusOut($event)" }, properties: { "attr.aria-label": "null", "attr.data-disabled": "disabled() || null", "attr.data-invalid": "invalidState() || null", "attr.data-required": "required() || null", "class": "baseClass()" } }, queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [size]=\"'small'\"\n        [disabled]=\"disabled() || todayUnavailable()\"\n        (click)=\"onTodayButtonClick()\"\n        [attr.aria-label]=\"todayButtonLabel()\">\n        <span>{{ messages().today }}</span>\n    </button>\n    @switch (calendarView()) {\n        @case (\"month\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [disabled]=\"disabled()\"\n                (click)=\"onViewChangeClick('year')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    headerMonthYear()\n                }}</span>\n            </button>\n        }\n        @case (\"year\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [disabled]=\"disabled()\"\n                (click)=\"onViewChangeClick('decade')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    headerYear()\n                }}</span>\n            </button>\n        }\n        @case (\"decade\") {\n            <!-- The decade is the top view, so its heading isn't a button. It names the grid with the locale's\n                 wording of the range, and shows the digits. -->\n            <span\n                class=\"text-primary inline-flex h-9 items-center px-4 text-sm font-semibold\"\n                [id]=\"gridId + '-heading'\"\n                ><span aria-hidden=\"true\">{{ formatInteger(decadeStart()) }} - {{ formatInteger(decadeEnd()) }}</span\n                ><span class=\"sr-only\">{{ viewSwitchButtonLabel() }}</span></span\n            >\n        }\n    }\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        [disabled]=\"disabled()\"\n        (click)=\"onNavigationClick('prev')\"\n        [attr.aria-label]=\"prevButtonLabel()\">\n        <svg lucideChevronLeft class=\"rtl:rotate-180\"></svg>\n    </button>\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        [disabled]=\"disabled()\"\n        (click)=\"onNavigationClick('next')\"\n        [attr.aria-label]=\"nextButtonLabel()\">\n        <svg lucideChevronRight class=\"rtl:rotate-180\"></svg>\n    </button>\n</div>\n\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{ ariaLabel() }}</div>\n\n@if (calendarView() === \"month\") {\n    @let columnCount = weekNumber() ? 8 : 7;\n    <div\n        role=\"grid\"\n        class=\"flex flex-col gap-0.5\"\n        [attr.aria-labelledby]=\"gridId + '-heading'\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-required]=\"required() || null\"\n        (pointerleave)=\"onMonthGridPointerLeave()\">\n        <div role=\"row\" [class]=\"monthGridHeaderClass()\" [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n            @if (weekNumber()) {\n                <!-- Week numbers are visual only: every day is already named by its full date. -->\n                <div aria-hidden=\"true\"></div>\n            }\n            @for (day of weekdays(); track day.full) {\n                <div role=\"columnheader\">\n                    <span aria-hidden=\"true\">{{ day.display }}</span>\n                    <span class=\"sr-only\">{{ day.full }}</span>\n                </div>\n            }\n        </div>\n        @for (row of monthDictChunked(); track $index) {\n            <div role=\"row\" [class]=\"monthGridClass()\" [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n                @if (weekNumber()) {\n                    @let firstEntry = row | monaTakeFirst;\n                    @if (firstEntry) {\n                        @let week = getWeekNumber(firstEntry.key);\n                        <div aria-hidden=\"true\">{{ formatInteger(week) }}</div>\n                    }\n                }\n                <!-- Track by time: the month is rebuilt with new Date objects on every navigation. -->\n                @for (entry of row; track entry.key.getTime()) {\n                    <div\n                        (dayPointerEnter)=\"onDayPointerEnter($event)\"\n                        (daySelect)=\"onDayClick($event.date, $event.event)\"\n                        monaMonthDay\n                        [disabled]=\"disabled()\"\n                        [isDayUnavailable]=\"isDayUnavailable()\"\n                        [monthBounds]=\"[monthBounds().start, monthBounds().end]\"\n                        [navigatedDate]=\"navigatedDate()\"\n                        [rangePreviewKeys]=\"rangePreviewKeys()\"\n                        [rounded]=\"rounded()\"\n                        [selectedKeys]=\"selectedKeys()\"\n                        [today]=\"today()\"\n                        [entry]=\"entry\">\n                        @if (monthCellTemplate()) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                                [ngTemplateOutletContext]=\"{ $implicit: entry.value, date: entry.key }\"></ng-container>\n                        } @else {\n                            <span>{{ formatInteger(entry.value) }}</span>\n                        }\n                    </div>\n                }\n            </div>\n        }\n    </div>\n} @else if (calendarView() === \"year\") {\n    <div role=\"grid\" class=\"flex flex-col gap-0.5\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of months(); track $index) {\n            <div role=\"row\" [class]=\"yearGridClass()\">\n                @for (monthItem of row; track monthItem) {\n                    <div\n                        (click)=\"!disabled() && onMonthClick(monthItem[0])\"\n                        monaYearMonth\n                        [disabled]=\"disabled()\"\n                        [month]=\"monthItem[0]\"\n                        [navigatedDate]=\"navigatedDate()\"\n                        [rounded]=\"rounded()\"\n                        [selectedDate]=\"selectedDates()[0]\">\n                        @if (yearCellTemplate()) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                                [ngTemplateOutletContext]=\"{ $implicit: monthItem[0], text: monthItem[1] }\">\n                            </ng-container>\n                        } @else {\n                            <span>{{ monthItem[1] }}</span>\n                        }\n                    </div>\n                }\n            </div>\n        }\n    </div>\n} @else if (calendarView() === \"decade\") {\n    <div role=\"grid\" class=\"flex flex-col gap-0.5\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of decadeYears(); track $index) {\n            <div role=\"row\" [class]=\"decadeGridClass()\">\n                @for (year of row; track year) {\n                    <div\n                        (click)=\"!disabled() && onYearClick(year)\"\n                        monaDecadeYear\n                        [disabled]=\"disabled()\"\n                        [navigatedDate]=\"navigatedDate()\"\n                        [rounded]=\"rounded()\"\n                        [year]=\"year\"\n                        [selectedDate]=\"selectedDates()[0]\">\n                        @if (decadeCellTemplate()) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                                [ngTemplateOutletContext]=\"{ $implicit: year }\">\n                            </ng-container>\n                        } @else {\n                            <span>{{ formatInteger(year) }}</span>\n                        }\n                    </div>\n                }\n            </div>\n        }\n    </div>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "directive", type: MonthDayDirective, selector: "[monaMonthDay]", inputs: ["disabled", "entry", "isDayUnavailable", "monthBounds", "navigatedDate", "rangePreviewKeys", "rounded", "selectedKeys", "today"], outputs: ["dayPointerEnter", "daySelect"] }, { kind: "directive", type: DecadeYearDirective, selector: "[monaDecadeYear]", inputs: ["disabled", "navigatedDate", "rounded", "selectedDate", "year"] }, { kind: "directive", type: YearMonthDirective, selector: "[monaYearMonth]", inputs: ["disabled", "month", "navigatedDate", "rounded", "selectedDate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "pipe", type: TakeFirstPipe, name: "monaTakeFirst" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
@@ -1550,15 +1607,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         LucideChevronLeft,
                         LucideChevronRight
                     ], host: {
-                        role: "application",
-                        "[attr.aria-label]": "ariaLabel()",
-                        "[attr.aria-invalid]": "invalidState() ? 'true' : null",
+                        // The host is a plain container: the grid inside it is the widget, and focus moves through its cells. A
+                        // static aria-label written on <mona-calendar> would otherwise stay on the role-less host.
+                        "[attr.aria-label]": "null",
+                        "[attr.data-disabled]": "disabled() || null",
                         "[attr.data-invalid]": "invalidState() || null",
                         "[attr.data-required]": "required() || null",
-                        "[attr.tabindex]": "disabled() ? -1 : 0",
-                        "[class]": "baseClass()"
-                    }, template: "<div [class]=\"headerClass()\">\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [size]=\"'small'\"\n        (click)=\"onTodayButtonClick()\"\n        [attr.aria-label]=\"todayButtonLabel()\">\n        <span>{{ messages().today }}</span>\n    </button>\n    @switch (calendarView()) {\n        @case (\"month\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                (click)=\"onViewChangeClick('year')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    headerMonthYear()\n                }}</span>\n            </button>\n        }\n        @case (\"year\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                (click)=\"onViewChangeClick('decade')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    headerYear()\n                }}</span>\n            </button>\n        }\n        @case (\"decade\") {\n            <button monaButton look=\"ghost\" [rounded]=\"rounded()\" [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\"\n                    >{{ formatInteger(decadeStart()) }} - {{ formatInteger(decadeEnd()) }}</span\n                >\n            </button>\n        }\n    }\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        (click)=\"onNavigationClick('prev')\"\n        [attr.aria-label]=\"prevButtonLabel()\">\n        <svg lucideChevronLeft class=\"rtl:rotate-180\"></svg>\n    </button>\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        (click)=\"onNavigationClick('next')\"\n        [attr.aria-label]=\"nextButtonLabel()\">\n        <svg lucideChevronRight class=\"rtl:rotate-180\"></svg>\n    </button>\n</div>\n\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{ ariaLabel() }}</div>\n\n@if (calendarView() === \"month\") {\n    @let columnCount = weekNumber() ? 8 : 7;\n    <div [class]=\"monthGridHeaderClass()\" [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n        @if (weekNumber()) {\n            <div></div>\n        }\n        @for (day of weekdays(); track day.full) {\n            <div>\n                <span aria-hidden=\"true\">{{ day.display }}</span>\n                <span class=\"sr-only\">{{ day.full }}</span>\n            </div>\n        }\n    </div>\n    <div\n        [class]=\"monthGridClass()\"\n        [attr.aria-labelledby]=\"gridId + '-heading'\"\n        (pointerleave)=\"onMonthGridPointerLeave()\"\n        [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n        @for (row of monthDictChunked(); track $index) {\n            @if (weekNumber()) {\n                @let firstEntry = row | monaTakeFirst;\n                @if (firstEntry) {\n                    @let week = getWeekNumber(firstEntry.key);\n                    <div>{{ formatInteger(week) }}</div>\n                }\n            }\n            @for (entry of row; track entry.key) {\n                <div\n                    (dayPointerEnter)=\"onDayPointerEnter($event)\"\n                    (daySelect)=\"onDayClick($event.date, $event.event)\"\n                    monaMonthDay\n                    [disabled]=\"disabled()\"\n                    [disabledDates]=\"disabledDates()\"\n                    [min]=\"minDate()\"\n                    [max]=\"maxDate()\"\n                    [monthBounds]=\"[monthBounds().start, monthBounds().end]\"\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rangePreview]=\"rangePreviewDates()\"\n                    [rounded]=\"rounded()\"\n                    [value]=\"selectedDates()\"\n                    [entry]=\"entry\">\n                    @if (monthCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: entry.value, date: entry.key }\"></ng-container>\n                    } @else {\n                        <span>{{ formatInteger(entry.value) }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n} @else if (calendarView() === \"year\") {\n    <div [class]=\"yearGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of months(); track $index) {\n            @for (monthItem of row; track monthItem) {\n                <div\n                    (click)=\"onMonthClick(monthItem[0])\"\n                    monaYearMonth\n                    [month]=\"monthItem[0]\"\n                    [monthName]=\"monthItem[1]\"\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rounded]=\"rounded()\"\n                    [selectedDate]=\"selectedDates()[0]\">\n                    @if (yearCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: monthItem[0], text: monthItem[1] }\">\n                        </ng-container>\n                    } @else {\n                        <span>{{ monthItem[1] }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n} @else if (calendarView() === \"decade\") {\n    <div [class]=\"decadeGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of decadeYears(); track $index) {\n            @for (year of row; track year) {\n                <div\n                    (click)=\"onYearClick(year)\"\n                    monaDecadeYear\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rounded]=\"rounded()\"\n                    [year]=\"year\"\n                    [selectedDate]=\"selectedDates()[0]\">\n                    @if (decadeCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: year }\">\n                        </ng-container>\n                    } @else {\n                        <span>{{ formatInteger(year) }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { decadeCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarDecadeCellTemplateDirective), { isSignal: true }] }], monthCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarMonthCellTemplateDirective), { isSignal: true }] }], yearCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarYearCellTemplateDirective), { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], firstDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDay", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], weekNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumber", required: false }] }] } });
+                        "[class]": "baseClass()",
+                        "(focusin)": "refreshToday()",
+                        "(focusout)": "onFocusOut($event)"
+                    }, template: "<div [class]=\"headerClass()\">\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [size]=\"'small'\"\n        [disabled]=\"disabled() || todayUnavailable()\"\n        (click)=\"onTodayButtonClick()\"\n        [attr.aria-label]=\"todayButtonLabel()\">\n        <span>{{ messages().today }}</span>\n    </button>\n    @switch (calendarView()) {\n        @case (\"month\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [disabled]=\"disabled()\"\n                (click)=\"onViewChangeClick('year')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    headerMonthYear()\n                }}</span>\n            </button>\n        }\n        @case (\"year\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [disabled]=\"disabled()\"\n                (click)=\"onViewChangeClick('decade')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    headerYear()\n                }}</span>\n            </button>\n        }\n        @case (\"decade\") {\n            <!-- The decade is the top view, so its heading isn't a button. It names the grid with the locale's\n                 wording of the range, and shows the digits. -->\n            <span\n                class=\"text-primary inline-flex h-9 items-center px-4 text-sm font-semibold\"\n                [id]=\"gridId + '-heading'\"\n                ><span aria-hidden=\"true\">{{ formatInteger(decadeStart()) }} - {{ formatInteger(decadeEnd()) }}</span\n                ><span class=\"sr-only\">{{ viewSwitchButtonLabel() }}</span></span\n            >\n        }\n    }\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        [disabled]=\"disabled()\"\n        (click)=\"onNavigationClick('prev')\"\n        [attr.aria-label]=\"prevButtonLabel()\">\n        <svg lucideChevronLeft class=\"rtl:rotate-180\"></svg>\n    </button>\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        [disabled]=\"disabled()\"\n        (click)=\"onNavigationClick('next')\"\n        [attr.aria-label]=\"nextButtonLabel()\">\n        <svg lucideChevronRight class=\"rtl:rotate-180\"></svg>\n    </button>\n</div>\n\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{ ariaLabel() }}</div>\n\n@if (calendarView() === \"month\") {\n    @let columnCount = weekNumber() ? 8 : 7;\n    <div\n        role=\"grid\"\n        class=\"flex flex-col gap-0.5\"\n        [attr.aria-labelledby]=\"gridId + '-heading'\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-required]=\"required() || null\"\n        (pointerleave)=\"onMonthGridPointerLeave()\">\n        <div role=\"row\" [class]=\"monthGridHeaderClass()\" [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n            @if (weekNumber()) {\n                <!-- Week numbers are visual only: every day is already named by its full date. -->\n                <div aria-hidden=\"true\"></div>\n            }\n            @for (day of weekdays(); track day.full) {\n                <div role=\"columnheader\">\n                    <span aria-hidden=\"true\">{{ day.display }}</span>\n                    <span class=\"sr-only\">{{ day.full }}</span>\n                </div>\n            }\n        </div>\n        @for (row of monthDictChunked(); track $index) {\n            <div role=\"row\" [class]=\"monthGridClass()\" [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n                @if (weekNumber()) {\n                    @let firstEntry = row | monaTakeFirst;\n                    @if (firstEntry) {\n                        @let week = getWeekNumber(firstEntry.key);\n                        <div aria-hidden=\"true\">{{ formatInteger(week) }}</div>\n                    }\n                }\n                <!-- Track by time: the month is rebuilt with new Date objects on every navigation. -->\n                @for (entry of row; track entry.key.getTime()) {\n                    <div\n                        (dayPointerEnter)=\"onDayPointerEnter($event)\"\n                        (daySelect)=\"onDayClick($event.date, $event.event)\"\n                        monaMonthDay\n                        [disabled]=\"disabled()\"\n                        [isDayUnavailable]=\"isDayUnavailable()\"\n                        [monthBounds]=\"[monthBounds().start, monthBounds().end]\"\n                        [navigatedDate]=\"navigatedDate()\"\n                        [rangePreviewKeys]=\"rangePreviewKeys()\"\n                        [rounded]=\"rounded()\"\n                        [selectedKeys]=\"selectedKeys()\"\n                        [today]=\"today()\"\n                        [entry]=\"entry\">\n                        @if (monthCellTemplate()) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                                [ngTemplateOutletContext]=\"{ $implicit: entry.value, date: entry.key }\"></ng-container>\n                        } @else {\n                            <span>{{ formatInteger(entry.value) }}</span>\n                        }\n                    </div>\n                }\n            </div>\n        }\n    </div>\n} @else if (calendarView() === \"year\") {\n    <div role=\"grid\" class=\"flex flex-col gap-0.5\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of months(); track $index) {\n            <div role=\"row\" [class]=\"yearGridClass()\">\n                @for (monthItem of row; track monthItem) {\n                    <div\n                        (click)=\"!disabled() && onMonthClick(monthItem[0])\"\n                        monaYearMonth\n                        [disabled]=\"disabled()\"\n                        [month]=\"monthItem[0]\"\n                        [navigatedDate]=\"navigatedDate()\"\n                        [rounded]=\"rounded()\"\n                        [selectedDate]=\"selectedDates()[0]\">\n                        @if (yearCellTemplate()) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                                [ngTemplateOutletContext]=\"{ $implicit: monthItem[0], text: monthItem[1] }\">\n                            </ng-container>\n                        } @else {\n                            <span>{{ monthItem[1] }}</span>\n                        }\n                    </div>\n                }\n            </div>\n        }\n    </div>\n} @else if (calendarView() === \"decade\") {\n    <div role=\"grid\" class=\"flex flex-col gap-0.5\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of decadeYears(); track $index) {\n            <div role=\"row\" [class]=\"decadeGridClass()\">\n                @for (year of row; track year) {\n                    <div\n                        (click)=\"!disabled() && onYearClick(year)\"\n                        monaDecadeYear\n                        [disabled]=\"disabled()\"\n                        [navigatedDate]=\"navigatedDate()\"\n                        [rounded]=\"rounded()\"\n                        [year]=\"year\"\n                        [selectedDate]=\"selectedDates()[0]\">\n                        @if (decadeCellTemplate()) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                                [ngTemplateOutletContext]=\"{ $implicit: year }\">\n                            </ng-container>\n                        } @else {\n                            <span>{{ formatInteger(year) }}</span>\n                        }\n                    </div>\n                }\n            </div>\n        }\n    </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { decadeCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarDecadeCellTemplateDirective), { isSignal: true }] }], monthCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarMonthCellTemplateDirective), { isSignal: true }] }], yearCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarYearCellTemplateDirective), { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], firstDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDay", required: false }] }], focusOnMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnMount", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], weekNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumber", required: false }] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/calendar