@truenas/ui-components 0.4.4 → 0.4.5

package/fesm2022/truenas-ui-components.mjs

@@ -1,19 +1,19 @@
 import { Overlay, OverlayPositionBuilder, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, computed, input, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, Renderer2, ElementRef, effect, Directive, ViewContainerRef, output, viewChild, signal, untracked, isDevMode, forwardRef, model, afterNextRender, Injectable, contentChildren, Pipe, HostListener, linkedSignal, contentChild, TemplateRef, ChangeDetectorRef, DestroyRef, isSignal, IterableDiffers, booleanAttribute, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
+import { InjectionToken, inject, computed, input, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, Renderer2, ElementRef, effect, Directive, ViewContainerRef, output, viewChild, signal, untracked, isDevMode, forwardRef, model, afterNextRender, Injectable, contentChildren, Pipe, HostListener, linkedSignal, contentChild, TemplateRef, ChangeDetectorRef, DestroyRef, isSignal, IterableDiffers, booleanAttribute, LOCALE_ID, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
 import * as i1$3 from '@angular/forms';
 import { NgControl, NG_VALUE_ACCESSOR, FormsModule, Validators } from '@angular/forms';
-import { ComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';
+import { ComponentHarness, HarnessPredicate, TestKey, parallel } from '@angular/cdk/testing';
 import * as i1 from '@angular/cdk/a11y';
-import { A11yModule, FocusMonitor } from '@angular/cdk/a11y';
+import { A11yModule, FocusMonitor, _IdGenerator } from '@angular/cdk/a11y';
 import * as i1$2 from '@angular/common';
 import { DOCUMENT, NgTemplateOutlet, CommonModule, AsyncPipe, isPlatformBrowser } from '@angular/common';
 import { mdiCheckCircle, mdiAlertCircle, mdiAlert, mdiInformation, mdiOpenInNew, mdiHelpCircle, mdiDotsVertical, mdiClose } from '@mdi/js';
 import * as i1$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient } from '@angular/common/http';
-import { firstValueFrom, BehaviorSubject, merge, animationFrameScheduler, asapScheduler, Subject, take } from 'rxjs';
+import { firstValueFrom, BehaviorSubject, merge, animationFrameScheduler, asapScheduler, take, Subject } from 'rxjs';
 import { RouterLink } from '@angular/router';
 import { filesize } from 'filesize';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
@@ -13830,43 +13830,251 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     }, template: "<svg [attr.width]=\"width()\" [attr.height]=\"height()\">\n  <defs>\n    <linearGradient id=\"fadeToPrimary\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n      <stop offset=\"0%\" stop-color=\"transparent\" />\n      <stop stop-color=\"transparent\" [attr.offset]=\"gradientTransitionStart() + '%'\" />\n      <stop offset=\"100%\" [attr.stop-color]=\"progressBarColor()\" />\n    </linearGradient>\n  </defs>\n\n  <!-- Background bar -->\n  <rect x=\"50\" fill=\"rgba(0,0,0,0.1)\" [attr.y]=\"height() / 2 - height() / 4\" [attr.width]=\"width() - 100\" [attr.height]=\"height() / 2\" [attr.rx]=\"height() / 4\" />\n\n  <!-- Fill bar -->\n  <rect\n    x=\"50\"\n    fill=\"url(#fadeToPrimary)\"\n    [attr.y]=\"height() / 2 - height() / 4\"\n    [attr.width]=\"fill()\"\n    [attr.height]=\"height() / 2\"\n    [attr.rx]=\"height() / 4\"\n  />\n\n  <!-- Particle canvas -->\n  <foreignObject x=\"0\" y=\"0\" [attr.width]=\"width()\" [attr.height]=\"height()\">\n    <canvas #canvas style=\"pointer-events: none;\" [attr.width]=\"width()\" [attr.height]=\"height()\"></canvas>\n  </foreignObject>\n</svg>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { speed: [{ type: i0.Input, args: [{ isSignal: true, alias: "speed", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], canvasRef: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }] } });
 
+/**
+ * Day-granularity date helpers shared by the calendar views.
+ *
+ * The calendar deals in calendar days, but the dates a caller binds are ordinary
+ * `Date`s and routinely carry a time of day — `new Date()` for a default, or a value
+ * round-tripped through an API. Comparing those against the midnight dates the grid
+ * builds gives answers that are off by up to a day, so every comparison the calendar
+ * makes goes through here.
+ */
+/**
+ * Orders two dates by calendar day: negative when `a` falls on an earlier day than `b`,
+ * zero on the same day, positive when later. Time of day is ignored on both sides.
+ */
+function compareDays(a, b) {
+    return (a.getFullYear() - b.getFullYear()
+        || a.getMonth() - b.getMonth()
+        || a.getDate() - b.getDate());
+}
+/** Whether two dates fall on the same calendar day, ignoring time of day. */
+function isSameDay(a, b) {
+    return compareDays(a, b) === 0;
+}
+/** Stable per-day key, for lookups and change tracking. */
+function dateKey(date) {
+    return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+}
+/**
+ * `YYYY-MM-DD` for the day this date falls on, built from its local parts.
+ *
+ * Rendered onto each day cell as `data-tn-date`, which gives tests a handle on a day
+ * that survives translation — cell text is formatted for the locale, right down to the
+ * numerals, so matching on it only works in English.
+ *
+ * Deliberately not `toISOString()`: that converts to UTC first, so anywhere east or west
+ * of Greenwich it can name the day before or after the one shown.
+ */
+function isoDateString(date) {
+    const month = `${date.getMonth() + 1}`.padStart(2, '0');
+    const day = `${date.getDate()}`.padStart(2, '0');
+    return `${date.getFullYear()}-${month}-${day}`;
+}
+/**
+ * Adds whole months, clamping to the last day when the target month is shorter, so
+ * navigating never silently lands in the month after the one asked for. `new Date` rolls
+ * 31 January + 1 month over into early March; this returns 28 (or 29) February.
+ */
+function addMonths(date, delta) {
+    return atMonthAndDay(date, date.getFullYear(), date.getMonth() + delta);
+}
+/**
+ * The same month and day in another year, clamped the same way — 29 February in a
+ * non-leap year is 28 February, not 1 March. Without the clamp, paging the year grid off
+ * a leap day quietly changes the month as well as the year.
+ */
+function withYear(date, year) {
+    return atMonthAndDay(date, year, date.getMonth());
+}
+/** Keeps `date`'s day-of-month where the target month is long enough to hold it. */
+function atMonthAndDay(date, year, month) {
+    const lastDay = new Date(year, month + 1, 0).getDate();
+    return new Date(year, month, Math.min(date.getDate(), lastDay));
+}
+/** How many years one page of the year grid shows. */
+const YEARS_PER_PAGE = 24;
+/**
+ * The first year of the page containing `year`.
+ *
+ * Pages are fixed blocks counted from year 0, not windows centred on the year asked
+ * about — 2020 sits near the top of 2016–2039 rather than in the middle of 2008–2031.
+ * The year view and the header both need this answer and must agree on it, or the
+ * header labels a span the grid isn't showing.
+ */
+function yearPageStart(year) {
+    return Math.floor(year / YEARS_PER_PAGE) * YEARS_PER_PAGE;
+}
+/**
+ * The day a week starts on in the given locale, as a `Date.getDay()` index — 0 for
+ * Sunday through 6 for Saturday. Sunday in the US, Monday across most of Europe,
+ * Saturday in much of the Middle East.
+ *
+ * Read from `Intl`, which reports it ISO-style (1 Monday … 7 Sunday). Not every engine
+ * exposes it — Firefox notably lagged — so anything that cannot answer falls back to
+ * Sunday, which is what the grid did for every locale before.
+ */
+function firstDayOfWeek(locale) {
+    try {
+        const info = new Intl.Locale(locale);
+        const firstDay = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay;
+        // ISO counts Sunday as 7; `Date.getDay()` counts it as 0.
+        return firstDay === undefined ? 0 : firstDay % 7;
+    }
+    catch {
+        // A malformed locale tag shouldn't take the calendar down with it.
+        return 0;
+    }
+}
+
+/** The cell holding the grid's roving tabindex — the one cell focus belongs on. */
+const ACTIVE_CELL = '.tn-calendar-body-cell[tabindex="0"]';
+/**
+ * Follows the roving tabindex with real focus, once the grid it names has rendered.
+ *
+ * Two situations need it, and both leave focus somewhere wrong until it runs. Arrowing
+ * within a grid re-renders cells that persist as elements, so the browser keeps focus on
+ * the cell just left. Switching between the day and year grids destroys the cell that
+ * was focused outright, which drops focus to `<body>` and restarts the tab order.
+ *
+ * Tied to the render rather than a zero timeout: the target cell doesn't exist until the
+ * new grid is painted.
+ *
+ * Does nothing when no cell can take focus — a month or page with every day disabled has
+ * nothing worth focusing.
+ */
+function focusActiveCellAfterRender(host, injector) {
+    afterNextRender(() => {
+        host.nativeElement.querySelector(ACTIVE_CELL)?.focus();
+    }, { injector });
+}
+
+/** The wording used when an app provides none of its own. */
+const TN_CALENDAR_INTL_DEFAULTS = {
+    marked: '(marked)',
+    rangeStart: '(range start)',
+    rangeEnd: '(range end)',
+    inRange: '(in range)',
+    currentYear: '(current year)',
+    monthGridLabel: (period) => period,
+    yearGridLabel: (startYear, endYear) => `Years ${startYear} to ${endYear}`,
+    chooseMonthAndYear: 'Choose month and year',
+    previousMonth: 'Previous month',
+    nextMonth: 'Next month',
+    previousYears: `Previous ${YEARS_PER_PAGE} years`,
+    nextYears: `Next ${YEARS_PER_PAGE} years`,
+};
+/**
+ * Injection token for the calendar's wording.
+ *
+ * Because the library ships no localized strings, this is the recommended hook for
+ * wiring a translation service so every `tn-calendar` reads the same way. Anything left
+ * out falls back to {@link TN_CALENDAR_INTL_DEFAULTS}, so an app can translate one
+ * string without restating the rest.
+ *
+ * Dates themselves are not here — they follow `LOCALE_ID`, or the calendar's `locale`
+ * input. See `TnCalendarComponent.locale`.
+ *
+ * @example
+ * ```ts
+ * // Fixed for the lifetime of the app — the language is chosen at build or bootstrap.
+ * providers: [
+ *   {
+ *     provide: TN_CALENDAR_INTL,
+ *     useFactory: (translate: TranslateService): TnCalendarIntlInput => ({
+ *       marked: translate.instant('calendar.marked'),
+ *       previousMonth: translate.instant('calendar.previousMonth'),
+ *       yearGridLabel: (from, to) => translate.instant('calendar.years', { from, to }),
+ *     }),
+ *     deps: [TranslateService],
+ *   },
+ * ];
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Switchable at runtime: a signal, so calendars already on screen follow along.
+ * providers: [
+ *   {
+ *     provide: TN_CALENDAR_INTL,
+ *     useFactory: (): TnCalendarIntlInput => {
+ *       const translate = inject(TranslateService);
+ *       const lang = toSignal(translate.onLangChange, { initialValue: null });
+ *       return computed(() => {
+ *         lang(); // Re-read every string when the language changes.
+ *         return { marked: translate.instant('calendar.marked') };
+ *       });
+ *     },
+ *   },
+ * ];
+ * ```
+ */
+const TN_CALENDAR_INTL = new InjectionToken('TN_CALENDAR_INTL');
+/**
+ * Resolves the wording for a calendar component: whatever the app provided, laid over
+ * the built-in defaults.
+ *
+ * Returns a signal rather than a plain object so a language switch reaches calendars that
+ * are already on screen. Read it inside a `computed` — as every caller here does — and
+ * the labels recompute on their own.
+ */
+function injectTnCalendarIntl() {
+    const provided = inject(TN_CALENDAR_INTL, { optional: true });
+    return computed(() => {
+        // Signals are functions; a plain object of wording is not.
+        const wording = typeof provided === 'function' ? provided() : provided;
+        return { ...TN_CALENDAR_INTL_DEFAULTS, ...(wording ?? {}) };
+    });
+}
+
 class TnCalendarHeaderComponent {
     currentDate = input(new Date(), ...(ngDevMode ? [{ debugName: "currentDate" }] : []));
     currentView = input('month', ...(ngDevMode ? [{ debugName: "currentView" }] : []));
-    monthSelected = output();
-    yearSelected = output();
+    /**
+     * Locale for the month abbreviation. Falls back to the app's `LOCALE_ID`;
+     * `tn-calendar` binds it from its own `locale` input.
+     */
+    locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : []));
     viewChanged = output();
     previousClicked = output();
     nextClicked = output();
-    months = [
-        'JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN',
-        'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'
-    ];
-    periodLabelId = `tn-calendar-period-label-${Math.floor(Math.random() * 10000)}`;
+    appLocale = inject(LOCALE_ID);
+    intl = injectTnCalendarIntl();
+    resolvedLocale = computed(() => this.locale() ?? this.appLocale, ...(ngDevMode ? [{ debugName: "resolvedLocale" }] : []));
+    /**
+     * Ties the period button to its live region through `aria-describedby`. Counted rather
+     * than drawn at random: two calendars on one page — a start and an end picker, say —
+     * had a real chance of minting the same id out of only 10,000, and a duplicate id
+     * silently unhooks the association with nothing to show for it.
+     */
+    periodLabelId = inject(_IdGenerator).getId('tn-calendar-period-label-');
     periodLabel = computed(() => {
         const date = this.currentDate();
         if (!date) {
             return '';
         }
+        const locale = this.resolvedLocale();
         if (this.currentView() === 'month') {
-            const month = this.months[date.getMonth()];
-            const year = date.getFullYear();
-            return `${month} ${year}`;
+            // Formatted as one unit so the locale decides the order and the numerals, not a
+            // template string. Upper-cased after the fact: no locale offers a short month name
+            // already capitalised the way this header wants it.
+            return date.toLocaleDateString(locale, { month: 'short', year: 'numeric' }).toUpperCase();
         }
         else {
-            // For year view, show the year range (24 years like Material)
-            const currentYear = date.getFullYear();
-            const startYear = Math.floor(currentYear / 24) * 24;
-            const endYear = startYear + 23;
-            return `${startYear} – ${endYear}`;
+            // The span the year grid is showing. Shared with the view so the two cannot
+            // disagree about which page is on screen.
+            const startYear = yearPageStart(date.getFullYear());
+            const yearFormat = new Intl.NumberFormat(locale, { useGrouping: false });
+            return `${yearFormat.format(startYear)} – ${yearFormat.format(startYear + YEARS_PER_PAGE - 1)}`;
         }
     }, ...(ngDevMode ? [{ debugName: "periodLabel" }] : []));
     previousLabel = computed(() => {
-        return this.currentView() === 'month' ? 'Previous month' : 'Previous 24 years';
+        return this.currentView() === 'month' ? this.intl().previousMonth : this.intl().previousYears;
     }, ...(ngDevMode ? [{ debugName: "previousLabel" }] : []));
     nextLabel = computed(() => {
-        return this.currentView() === 'month' ? 'Next month' : 'Next 24 years';
+        return this.currentView() === 'month' ? this.intl().nextMonth : this.intl().nextYears;
     }, ...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
+    periodButtonLabel = computed(() => this.intl().chooseMonthAndYear, ...(ngDevMode ? [{ debugName: "periodButtonLabel" }] : []));
     toggleView() {
         const newView = this.currentView() === 'month' ? 'year' : 'month';
         this.viewChanged.emit(newView);
@@ -13878,12 +14086,12 @@ class TnCalendarHeaderComponent {
         this.nextClicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnCalendarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: TnCalendarHeaderComponent, isStandalone: true, selector: "tn-calendar-header", inputs: { currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: false, transformFunction: null }, currentView: { classPropertyName: "currentView", publicName: "currentView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { monthSelected: "monthSelected", yearSelected: "yearSelected", viewChanged: "viewChanged", previousClicked: "previousClicked", nextClicked: "nextClicked" }, ngImport: i0, template: "<div class=\"tn-calendar-header\">\n  <div class=\"tn-calendar-controls\">\n    <!-- Period label (visually hidden for screen readers) -->\n    <span aria-live=\"polite\" class=\"cdk-visually-hidden\" [id]=\"periodLabelId\">\n      {{ periodLabel() }}\n    </span>\n\n    <!-- Period button (month/year selector) -->\n    <button\n      type=\"button\"\n      class=\"tn-calendar-period-button\"\n      [attr.aria-label]=\"'Choose month and year'\"\n      [attr.aria-describedby]=\"periodLabelId\"\n      (click)=\"toggleView()\">\n      <span [attr.aria-hidden]=\"true\">{{ periodLabel() }}</span>\n      <svg viewBox=\"0 0 10 5\" focusable=\"false\" aria-hidden=\"true\" class=\"tn-calendar-arrow\">\n        <polygon points=\"0,0 5,5 10,0\" />\n      </svg>\n    </button>\n\n    <!-- Spacer -->\n    <div class=\"tn-calendar-spacer\"></div>\n\n    <!-- Previous button -->\n    <button\n      type=\"button\"\n      class=\"tn-calendar-previous-button\"\n      [attr.aria-label]=\"previousLabel()\"\n      (click)=\"onPreviousClick()\">\n      <svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n      </svg>\n    </button>\n\n    <!-- Next button -->\n    <button\n      type=\"button\"\n      class=\"tn-calendar-next-button\"\n      [attr.aria-label]=\"nextLabel()\"\n      (click)=\"onNextClick()\">\n      <svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: [".tn-calendar-header{display:flex;padding:16px}.tn-calendar-controls{display:flex;align-items:center;width:100%}.cdk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.tn-calendar-period-button{background:none;border:none;font-weight:600;font-size:1rem;color:var(--tn-fg1, #333);padding:8px 12px;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:background-color .2s ease}.tn-calendar-period-button:hover{background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-period-button:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-arrow{width:10px;height:5px;fill:currentColor}.tn-calendar-spacer{flex:1}.tn-calendar-previous-button,.tn-calendar-next-button{background:none;border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--tn-fg1, #333);transition:background-color .2s ease}.tn-calendar-previous-button svg,.tn-calendar-next-button svg{width:24px;height:24px;fill:currentColor}.tn-calendar-previous-button:hover:not(:disabled),.tn-calendar-next-button:hover:not(:disabled){background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-previous-button:focus,.tn-calendar-next-button:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-previous-button:disabled,.tn-calendar-next-button:disabled{color:var(--tn-fg2, #666);opacity:.5;cursor:not-allowed}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: TnCalendarHeaderComponent, isStandalone: true, selector: "tn-calendar-header", inputs: { currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: false, transformFunction: null }, currentView: { classPropertyName: "currentView", publicName: "currentView", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewChanged: "viewChanged", previousClicked: "previousClicked", nextClicked: "nextClicked" }, ngImport: i0, template: "<div class=\"tn-calendar-header\">\n  <div class=\"tn-calendar-controls\">\n    <!-- Period label (visually hidden for screen readers) -->\n    <span aria-live=\"polite\" class=\"cdk-visually-hidden\" [id]=\"periodLabelId\">\n      {{ periodLabel() }}\n    </span>\n\n    <!-- Period button (month/year selector) -->\n    <button\n      type=\"button\"\n      class=\"tn-calendar-period-button\"\n      [attr.aria-label]=\"periodButtonLabel()\"\n      [attr.aria-describedby]=\"periodLabelId\"\n      (click)=\"toggleView()\">\n      <span [attr.aria-hidden]=\"true\">{{ periodLabel() }}</span>\n      <svg viewBox=\"0 0 10 5\" focusable=\"false\" aria-hidden=\"true\" class=\"tn-calendar-arrow\">\n        <polygon points=\"0,0 5,5 10,0\" />\n      </svg>\n    </button>\n\n    <!-- Spacer -->\n    <div class=\"tn-calendar-spacer\"></div>\n\n    <!-- Previous button -->\n    <button\n      type=\"button\"\n      class=\"tn-calendar-previous-button\"\n      [attr.aria-label]=\"previousLabel()\"\n      (click)=\"onPreviousClick()\">\n      <svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n      </svg>\n    </button>\n\n    <!-- Next button -->\n    <button\n      type=\"button\"\n      class=\"tn-calendar-next-button\"\n      [attr.aria-label]=\"nextLabel()\"\n      (click)=\"onNextClick()\">\n      <svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: [".tn-calendar-header{display:flex;padding:16px}.tn-calendar-controls{display:flex;align-items:center;width:100%}.cdk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.tn-calendar-period-button{background:none;border:none;font-weight:600;font-size:1rem;color:var(--tn-fg1, #333);padding:8px 12px;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:background-color .2s ease}.tn-calendar-period-button:hover{background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-period-button:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-arrow{width:10px;height:5px;fill:currentColor}.tn-calendar-spacer{flex:1}.tn-calendar-previous-button,.tn-calendar-next-button{background:none;border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--tn-fg1, #333);transition:background-color .2s ease}.tn-calendar-previous-button svg,.tn-calendar-next-button svg{width:24px;height:24px;fill:currentColor}.tn-calendar-previous-button:hover:not(:disabled),.tn-calendar-next-button:hover:not(:disabled){background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-previous-button:focus,.tn-calendar-next-button:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-previous-button:disabled,.tn-calendar-next-button:disabled{color:var(--tn-fg2, #666);opacity:.5;cursor:not-allowed}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnCalendarHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tn-calendar-header', standalone: true, imports: [], template: "<div class=\"tn-calendar-header\">\n  <div class=\"tn-calendar-controls\">\n    <!-- Period label (visually hidden for screen readers) -->\n    <span aria-live=\"polite\" class=\"cdk-visually-hidden\" [id]=\"periodLabelId\">\n      {{ periodLabel() }}\n    </span>\n\n    <!-- Period button (month/year selector) -->\n    <button\n      type=\"button\"\n      class=\"tn-calendar-period-button\"\n      [attr.aria-label]=\"'Choose month and year'\"\n      [attr.aria-describedby]=\"periodLabelId\"\n      (click)=\"toggleView()\">\n      <span [attr.aria-hidden]=\"true\">{{ periodLabel() }}</span>\n      <svg viewBox=\"0 0 10 5\" focusable=\"false\" aria-hidden=\"true\" class=\"tn-calendar-arrow\">\n        <polygon points=\"0,0 5,5 10,0\" />\n      </svg>\n    </button>\n\n    <!-- Spacer -->\n    <div class=\"tn-calendar-spacer\"></div>\n\n    <!-- Previous button -->\n    <button\n      type=\"button\"\n      class=\"tn-calendar-previous-button\"\n      [attr.aria-label]=\"previousLabel()\"\n      (click)=\"onPreviousClick()\">\n      <svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n      </svg>\n    </button>\n\n    <!-- Next button -->\n    <button\n      type=\"button\"\n      class=\"tn-calendar-next-button\"\n      [attr.aria-label]=\"nextLabel()\"\n      (click)=\"onNextClick()\">\n      <svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: [".tn-calendar-header{display:flex;padding:16px}.tn-calendar-controls{display:flex;align-items:center;width:100%}.cdk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.tn-calendar-period-button{background:none;border:none;font-weight:600;font-size:1rem;color:var(--tn-fg1, #333);padding:8px 12px;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:background-color .2s ease}.tn-calendar-period-button:hover{background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-period-button:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-arrow{width:10px;height:5px;fill:currentColor}.tn-calendar-spacer{flex:1}.tn-calendar-previous-button,.tn-calendar-next-button{background:none;border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--tn-fg1, #333);transition:background-color .2s ease}.tn-calendar-previous-button svg,.tn-calendar-next-button svg{width:24px;height:24px;fill:currentColor}.tn-calendar-previous-button:hover:not(:disabled),.tn-calendar-next-button:hover:not(:disabled){background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-previous-button:focus,.tn-calendar-next-button:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-previous-button:disabled,.tn-calendar-next-button:disabled{color:var(--tn-fg2, #666);opacity:.5;cursor:not-allowed}\n"] }]
-        }], propDecorators: { currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: false }] }], currentView: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentView", required: false }] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }], yearSelected: [{ type: i0.Output, args: ["yearSelected"] }], viewChanged: [{ type: i0.Output, args: ["viewChanged"] }], previousClicked: [{ type: i0.Output, args: ["previousClicked"] }], nextClicked: [{ type: i0.Output, args: ["nextClicked"] }] } });
+            args: [{ selector: 'tn-calendar-header', standalone: true, imports: [], template: "<div class=\"tn-calendar-header\">\n  <div class=\"tn-calendar-controls\">\n    <!-- Period label (visually hidden for screen readers) -->\n    <span aria-live=\"polite\" class=\"cdk-visually-hidden\" [id]=\"periodLabelId\">\n      {{ periodLabel() }}\n    </span>\n\n    <!-- Period button (month/year selector) -->\n    <button\n      type=\"button\"\n      class=\"tn-calendar-period-button\"\n      [attr.aria-label]=\"periodButtonLabel()\"\n      [attr.aria-describedby]=\"periodLabelId\"\n      (click)=\"toggleView()\">\n      <span [attr.aria-hidden]=\"true\">{{ periodLabel() }}</span>\n      <svg viewBox=\"0 0 10 5\" focusable=\"false\" aria-hidden=\"true\" class=\"tn-calendar-arrow\">\n        <polygon points=\"0,0 5,5 10,0\" />\n      </svg>\n    </button>\n\n    <!-- Spacer -->\n    <div class=\"tn-calendar-spacer\"></div>\n\n    <!-- Previous button -->\n    <button\n      type=\"button\"\n      class=\"tn-calendar-previous-button\"\n      [attr.aria-label]=\"previousLabel()\"\n      (click)=\"onPreviousClick()\">\n      <svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n      </svg>\n    </button>\n\n    <!-- Next button -->\n    <button\n      type=\"button\"\n      class=\"tn-calendar-next-button\"\n      [attr.aria-label]=\"nextLabel()\"\n      (click)=\"onNextClick()\">\n      <svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: [".tn-calendar-header{display:flex;padding:16px}.tn-calendar-controls{display:flex;align-items:center;width:100%}.cdk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.tn-calendar-period-button{background:none;border:none;font-weight:600;font-size:1rem;color:var(--tn-fg1, #333);padding:8px 12px;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:background-color .2s ease}.tn-calendar-period-button:hover{background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-period-button:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-arrow{width:10px;height:5px;fill:currentColor}.tn-calendar-spacer{flex:1}.tn-calendar-previous-button,.tn-calendar-next-button{background:none;border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--tn-fg1, #333);transition:background-color .2s ease}.tn-calendar-previous-button svg,.tn-calendar-next-button svg{width:24px;height:24px;fill:currentColor}.tn-calendar-previous-button:hover:not(:disabled),.tn-calendar-next-button:hover:not(:disabled){background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-previous-button:focus,.tn-calendar-next-button:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-previous-button:disabled,.tn-calendar-next-button:disabled{color:var(--tn-fg2, #666);opacity:.5;cursor:not-allowed}\n"] }]
+        }], propDecorators: { currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: false }] }], currentView: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentView", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], viewChanged: [{ type: i0.Output, args: ["viewChanged"] }], previousClicked: [{ type: i0.Output, args: ["previousClicked"] }], nextClicked: [{ type: i0.Output, args: ["nextClicked"] }] } });
 
 class TnMonthViewComponent {
     activeDate = input(new Date(), ...(ngDevMode ? [{ debugName: "activeDate" }] : []));
@@ -13891,25 +14099,114 @@ class TnMonthViewComponent {
     minDate = input(undefined, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
     maxDate = input(undefined, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
     dateFilter = input(undefined, ...(ngDevMode ? [{ debugName: "dateFilter" }] : []));
+    /**
+     * Dates to flag as noteworthy — days a task runs, days with events, and the like.
+     * Order and time-of-day are ignored; only the calendar day is compared. The
+     * calendar owns how a marked day looks, so callers pass dates rather than styles.
+     */
+    markedDates = input(undefined, ...(ngDevMode ? [{ debugName: "markedDates" }] : []));
     // Range mode inputs
     rangeMode = input(false, ...(ngDevMode ? [{ debugName: "rangeMode" }] : []));
     selectedRange = input(undefined, ...(ngDevMode ? [{ debugName: "selectedRange" }] : []));
     selectedChange = output();
     activeDateChange = output();
-    weekdays = [
-        { long: 'Sunday', short: 'S' },
-        { long: 'Monday', short: 'M' },
-        { long: 'Tuesday', short: 'T' },
-        { long: 'Wednesday', short: 'W' },
-        { long: 'Thursday', short: 'T' },
-        { long: 'Friday', short: 'F' },
-        { long: 'Saturday', short: 'S' },
-    ];
+    /**
+     * Locale for dates, weekday names and the first day of the week. Falls back to the
+     * app's `LOCALE_ID`; `tn-calendar` binds it from its own `locale` input.
+     */
+    locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : []));
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    appLocale = inject(LOCALE_ID);
+    intl = injectTnCalendarIntl();
+    resolvedLocale = computed(() => this.locale() ?? this.appLocale, ...(ngDevMode ? [{ debugName: "resolvedLocale" }] : []));
+    /**
+     * Which day the week starts on in this locale, as a `Date.getDay()` index. Everything
+     * about the grid's shape hangs off it: the order of the headings and how many blank
+     * cells precede the 1st.
+     */
+    weekStart = computed(() => firstDayOfWeek(this.resolvedLocale()), ...(ngDevMode ? [{ debugName: "weekStart" }] : []));
+    /** Day numbers in the locale's own numerals, without a thousands separator. */
+    dayFormat = computed(() => {
+        return new Intl.NumberFormat(this.resolvedLocale(), { useGrouping: false });
+    }, ...(ngDevMode ? [{ debugName: "dayFormat" }] : []));
+    /**
+     * Column headings, named and ordered by the locale — Sunday first in the US, Monday
+     * across most of Europe. The dates are an arbitrary week, used only to name the days.
+     */
+    weekdays = computed(() => {
+        const locale = this.resolvedLocale();
+        const long = new Intl.DateTimeFormat(locale, { weekday: 'long' });
+        const narrow = new Intl.DateTimeFormat(locale, { weekday: 'narrow' });
+        const weekStart = this.weekStart();
+        return Array.from({ length: 7 }, (_, column) => {
+            // 7 Jan 2024 was a Sunday, so adding a getDay() index lands on that weekday.
+            const date = new Date(2024, 0, 7 + ((weekStart + column) % 7));
+            return { long: long.format(date), short: narrow.format(date) };
+        });
+    }, ...(ngDevMode ? [{ debugName: "weekdays" }] : []));
     // Cell sizing now controlled via CSS custom properties in the SCSS file
+    markedDateKeys = computed(() => {
+        return new Set((this.markedDates() ?? []).map((date) => dateKey(date)));
+    }, ...(ngDevMode ? [{ debugName: "markedDateKeys" }] : []));
+    /**
+     * Names the grid after the month it shows. Without it a screen-reader user arrowing
+     * around hears each day but never which month they are in — the period only appears in
+     * the header, outside the grid.
+     */
+    gridLabel = computed(() => {
+        const period = this.activeDate()
+            .toLocaleDateString(this.resolvedLocale(), { month: 'long', year: 'numeric' });
+        return this.intl().monthGridLabel(period);
+    }, ...(ngDevMode ? [{ debugName: "gridLabel" }] : []));
+    /**
+     * The day of the month that carries `tabindex="0"` — the grid's single keyboard entry
+     * point, per the roving tabindex pattern.
+     *
+     * It follows `activeDate`, but falls back to the nearest enabled day when that day
+     * can't take focus. Without the fallback a month whose active day is disabled (say,
+     * anything before `minDate`) would have no tabbable cell at all, leaving the grid
+     * unreachable by keyboard. `null` only when the whole month is disabled, where there
+     * is nothing worth focusing anyway.
+     *
+     * Derived from the month rather than from `calendarRows()`, which would be circular.
+     */
+    activeDay = computed(() => {
+        const activeDate = this.activeDate();
+        if (!activeDate) {
+            return null;
+        }
+        const year = activeDate.getFullYear();
+        const month = activeDate.getMonth();
+        const lastDay = new Date(year, month + 1, 0).getDate();
+        const isEnabled = (day) => this.isDateEnabled(new Date(year, month, day));
+        // Always within the rendered month: both come off the same Date, and `Date` has
+        // already rolled over any overflow the caller handed us.
+        const wanted = activeDate.getDate();
+        if (isEnabled(wanted)) {
+            return wanted;
+        }
+        // Spiral outwards from the day we wanted, forward first.
+        for (let offset = 1; offset < lastDay; offset++) {
+            if (wanted + offset <= lastDay && isEnabled(wanted + offset)) {
+                return wanted + offset;
+            }
+            if (wanted - offset >= 1 && isEnabled(wanted - offset)) {
+                return wanted - offset;
+            }
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "activeDay" }] : []));
+    activeCellDate = computed(() => {
+        const day = this.activeDay();
+        if (day === null) {
+            return null;
+        }
+        const activeDate = this.activeDate();
+        return new Date(activeDate.getFullYear(), activeDate.getMonth(), day);
+    }, ...(ngDevMode ? [{ debugName: "activeCellDate" }] : []));
     calendarRows = computed(() => {
         const activeDate = this.activeDate();
-        // Track selectedRange signal so computed recalculates when range changes
-        this.selectedRange();
         if (!activeDate) {
             return [];
         }
@@ -13917,7 +14214,13 @@ class TnMonthViewComponent {
         const month = activeDate.getMonth();
         const firstDate = new Date(year, month, 1);
         const lastDate = new Date(year, month + 1, 0);
-        const startDayOfWeek = firstDate.getDay(); // 0 = Sunday, 1 = Monday, etc.
+        // How far into the week the 1st falls, counted from wherever this locale's week
+        // begins — that many blanks lead the grid.
+        const startDayOfWeek = (firstDate.getDay() - this.weekStart() + 7) % 7;
+        // Read once for the whole grid rather than per cell, so every day is measured
+        // against the same instant as well as allocating a fortieth as much.
+        const today = new Date();
+        const dayFormat = this.dayFormat();
         const rows = [];
         let currentRow = [];
         // Add empty cells for days before month starts
@@ -13927,7 +14230,7 @@ class TnMonthViewComponent {
         // Add all days of the month
         for (let day = 1; day <= lastDate.getDate(); day++) {
             const date = new Date(year, month, day);
-            currentRow.push(this.createCell(date, day));
+            currentRow.push(this.createCell(date, day, today, dayFormat));
             // If we have 7 cells, complete the row
             if (currentRow.length === 7) {
                 rows.push(currentRow);
@@ -13943,10 +14246,10 @@ class TnMonthViewComponent {
         }
         return rows;
     }, ...(ngDevMode ? [{ debugName: "calendarRows" }] : []));
-    createCell(date, value) {
-        const today = new Date();
-        const isToday = this.isSameDate(date, today);
-        const isSelected = this.selected() ? this.isSameDate(date, this.selected()) : false;
+    createCell(date, value, today, dayFormat) {
+        const isToday = isSameDay(date, today);
+        const isSelected = this.selected() ? isSameDay(date, this.selected()) : false;
+        const isMarked = this.markedDateKeys().has(dateKey(date));
         const enabled = this.isDateEnabled(date);
         // Range mode calculations
         let rangeStart = false;
@@ -13955,24 +14258,36 @@ class TnMonthViewComponent {
         const currentRange = this.selectedRange();
         if (this.rangeMode() && currentRange) {
             const { start, end } = currentRange;
-            if (start && this.isSameDate(date, start)) {
+            if (start && isSameDay(date, start)) {
                 rangeStart = true;
             }
-            if (end && this.isSameDate(date, end)) {
+            if (end && isSameDay(date, end)) {
                 rangeEnd = true;
             }
-            if (start && end && date > start && date < end) {
+            // Strictly between the ends. Compared by day so a start or end carrying a time of
+            // day can't come out as both a cap and an in-between day.
+            if (start && end && compareDays(date, start) > 0 && compareDays(date, end) < 0) {
                 inRange = true;
             }
         }
+        // Selection and the range caps share one solid fill; marking sits below them and
+        // shows only where neither applies. A cap is a selection too, so `today` must not
+        // paint its outline over it.
+        const isPrimary = isSelected || rangeStart || rangeEnd;
+        const fill = isPrimary ? 'primary' : isMarked ? 'marked' : 'none';
         return {
             value,
             date: new Date(date),
-            label: date.getDate().toString(),
-            ariaLabel: this.formatAriaLabel(date, isSelected, isToday, rangeStart, rangeEnd, inRange),
+            isoDate: isoDateString(date),
+            label: dayFormat.format(value),
+            ariaLabel: this.formatAriaLabel(date, isMarked, rangeStart, rangeEnd, inRange),
             enabled,
             selected: isSelected,
             today: isToday,
+            marked: isMarked,
+            inSelection: isSelected || rangeStart || rangeEnd || inRange,
+            fill,
+            todayOutline: isToday && !isPrimary,
             rangeStart,
             rangeEnd,
             inRange,
@@ -13982,21 +14297,28 @@ class TnMonthViewComponent {
         return {
             value: 0,
             date: new Date(),
+            isoDate: '',
             label: '',
             ariaLabel: '',
             enabled: false,
             selected: false,
             today: false,
+            marked: false,
+            inSelection: false,
+            fill: 'none',
+            todayOutline: false,
         };
     }
     isDateEnabled(date) {
         const minDate = this.minDate();
         const maxDate = this.maxDate();
         const dateFilter = this.dateFilter();
-        if (minDate && date < minDate) {
+        // Bounds are inclusive of their own day: a `minDate` of "today, 14:30" means today
+        // is selectable, not that today is half past the deadline.
+        if (minDate && compareDays(date, minDate) < 0) {
             return false;
         }
-        if (maxDate && date > maxDate) {
+        if (maxDate && compareDays(date, maxDate) > 0) {
             return false;
         }
         if (dateFilter && !dateFilter(date)) {
@@ -14004,32 +14326,31 @@ class TnMonthViewComponent {
         }
         return true;
     }
-    isSameDate(date1, date2) {
-        return date1.getFullYear() === date2.getFullYear() &&
-            date1.getMonth() === date2.getMonth() &&
-            date1.getDate() === date2.getDate();
-    }
-    formatAriaLabel(date, isSelected, isToday, rangeStart, rangeEnd, inRange) {
-        let label = date.toLocaleDateString('en', {
+    /**
+     * Spells out the state a day is in, but only the parts no ARIA attribute already
+     * carries. Selection lives on the button's `aria-pressed` and today on `aria-current`,
+     * so repeating them here had screen readers announce each one twice. Marking and the
+     * range positions have no attribute equivalent, and would otherwise be conveyed by
+     * background colour alone.
+     */
+    formatAriaLabel(date, isMarked, rangeStart, rangeEnd, inRange) {
+        let label = date.toLocaleDateString(this.resolvedLocale(), {
             weekday: 'long',
             year: 'numeric',
             month: 'long',
             day: 'numeric'
         });
-        if (isSelected) {
-            label += ' (selected)';
-        }
-        if (isToday) {
-            label += ' (today)';
+        if (isMarked) {
+            label += ` ${this.intl().marked}`;
         }
         if (rangeStart) {
-            label += ' (range start)';
+            label += ` ${this.intl().rangeStart}`;
         }
         if (rangeEnd) {
-            label += ' (range end)';
+            label += ` ${this.intl().rangeEnd}`;
         }
         if (inRange) {
-            label += ' (in range)';
+            label += ` ${this.intl().inRange}`;
         }
         return label;
     }
@@ -14037,23 +14358,107 @@ class TnMonthViewComponent {
         if (cell.value === 0) {
             return `empty-${index}`;
         }
-        return `${cell.date.getFullYear()}-${cell.date.getMonth()}-${cell.date.getDate()}`;
+        return dateKey(cell.date);
     }
     trackByRow(index) {
         return index;
     }
     onCellClicked(cell) {
-        if (cell.enabled && cell.value > 0) {
-            this.selectedChange.emit(cell.date);
+        if (!cell.enabled || cell.value === 0) {
+            return;
+        }
+        // The click already moved browser focus here, so the roving tabindex has to come
+        // along or the two diverge: arrowing on from a clicked day would carry on from
+        // wherever the active day happened to be, jumping the focus somewhere unrelated.
+        this.activeDateChange.emit(cell.date);
+        this.selectedChange.emit(cell.date);
+    }
+    /**
+     * Moves the roving tabindex. Selection stays on click/Enter/Space, which the cells
+     * are already buttons for, so this only ever changes which day is active.
+     *
+     * Moves that leave the displayed month emit an `activeDateChange` like any other
+     * navigation; the grid re-renders on the new month with the target day active.
+     */
+    onKeydown(event) {
+        const from = this.activeCellDate();
+        if (!from) {
+            return;
+        }
+        const move = this.targetForKey(event, from);
+        if (!move) {
+            return;
+        }
+        // Claim the key before the browser scrolls the page with it.
+        event.preventDefault();
+        const landing = this.nearestEnabled(move.date, move.search);
+        if (!landing || isSameDay(landing, from)) {
+            return;
+        }
+        this.activeDateChange.emit(landing);
+        focusActiveCellAfterRender(this.host, this.injector);
+    }
+    /**
+     * The day a key aims at, and which way to look from there when that day is disabled.
+     *
+     * The search direction belongs to the key, not to where the target happens to fall
+     * relative to the current day. Home and End mean "the ends of *this* month", so they
+     * search inward: looking outward would step straight into the neighbouring month over
+     * a single filtered-out boundary day and page the view, which is not what either key
+     * promises. The arrows and the paging keys keep travelling the way they were already
+     * headed, and crossing into the next month is the point of those.
+     */
+    targetForKey(event, from) {
+        const year = from.getFullYear();
+        const month = from.getMonth();
+        const day = from.getDate();
+        // Overshooting a month's length is fine — the Date constructor rolls it over, which
+        // is exactly what arrowing off the end of a month should do.
+        switch (event.key) {
+            case 'ArrowLeft': return { date: new Date(year, month, day - 1), search: -1 };
+            case 'ArrowRight': return { date: new Date(year, month, day + 1), search: 1 };
+            case 'ArrowUp': return { date: new Date(year, month, day - 7), search: -1 };
+            case 'ArrowDown': return { date: new Date(year, month, day + 7), search: 1 };
+            case 'Home': return { date: new Date(year, month, 1), search: 1 };
+            case 'End': return { date: new Date(year, month + 1, 0), search: -1 };
+            // Shift pages by a year, matching Material and the wider grid convention.
+            case 'PageUp': return { date: addMonths(from, event.shiftKey ? -12 : -1), search: -1 };
+            case 'PageDown': return { date: addMonths(from, event.shiftKey ? 12 : 1), search: 1 };
+            default: return null;
+        }
+    }
+    /**
+     * Steps past days the caller has disabled, so a gap in `dateFilter` or the far side of
+     * `minDate`/`maxDate` doesn't park focus somewhere unusable.
+     *
+     * Searches the way the key asked for (see `targetForKey`), then doubles back if that
+     * finds nothing. The fallback is for the ends of the allowed range: arrowing right at
+     * `maxDate` finds nothing ahead, doubles back onto the day we started from, and the
+     * caller reads that as "don't move".
+     */
+    nearestEnabled(target, preferred) {
+        return this.scanForEnabled(target, preferred)
+            ?? this.scanForEnabled(target, preferred === 1 ? -1 : 1);
+    }
+    /** Bounded, so an everything-disabled filter stops the move instead of spinning. */
+    scanForEnabled(from, direction) {
+        const maxSteps = 62;
+        const candidate = new Date(from);
+        for (let step = 0; step <= maxSteps; step++) {
+            if (this.isDateEnabled(candidate)) {
+                return new Date(candidate);
+            }
+            candidate.setDate(candidate.getDate() + direction);
         }
+        return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnMonthViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnMonthViewComponent, isStandalone: true, selector: "tn-month-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, selectedRange: { classPropertyName: "selectedRange", publicName: "selectedRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange" }, ngImport: i0, template: "<table role=\"grid\" class=\"tn-calendar-table\">\n  <!-- Table header with day names -->\n  <thead class=\"tn-calendar-table-header\">\n    <tr>\n      @for (day of weekdays; track day) {\n        <th scope=\"col\">\n          <span class=\"cdk-visually-hidden\">{{ day.long }}</span>\n          <span aria-hidden=\"true\">{{ day.short }}</span>\n        </th>\n      }\n    </tr>\n  </thead>\n\n  <!-- Table body with calendar cells -->\n  <tbody class=\"tn-calendar-body\">\n    <!-- Calendar rows -->\n    @for (row of calendarRows(); track trackByRow($index); let rowIndex = $index) {\n      <tr role=\"row\">\n        @for (cell of row; track trackByDate($index, cell); let colIndex = $index) {\n          <td\n            role=\"gridcell\"\n            class=\"tn-calendar-body-cell-container\"\n            [attr.data-tn-row]=\"rowIndex\"\n            [attr.data-tn-col]=\"colIndex\">\n            @if (cell.value > 0) {\n              <button\n                type=\"button\"\n                class=\"tn-calendar-body-cell\"\n                [class.tn-calendar-body-selected]=\"cell.selected\"\n                [class.tn-calendar-body-today]=\"cell.today\"\n                [class.tn-calendar-body-active]=\"cell.selected\"\n                [class.tn-calendar-body-range-start]=\"cell.rangeStart\"\n                [class.tn-calendar-body-range-end]=\"cell.rangeEnd\"\n                [class.tn-calendar-body-in-range]=\"cell.inRange\"\n                [disabled]=\"!cell.enabled\"\n                [attr.tabindex]=\"cell.selected ? 0 : -1\"\n                [attr.aria-label]=\"cell.ariaLabel\"\n                [attr.aria-pressed]=\"cell.selected\"\n                [attr.aria-current]=\"cell.today ? 'date' : null\"\n                (click)=\"onCellClicked(cell)\">\n                <span class=\"tn-calendar-body-cell-content tn-focus-indicator\"\n                      [class.tn-calendar-body-selected]=\"cell.selected\"\n                      [class.tn-calendar-body-today]=\"cell.today\"\n                      [class.tn-calendar-body-range-start]=\"cell.rangeStart\"\n                      [class.tn-calendar-body-range-end]=\"cell.rangeEnd\"\n                      [class.tn-calendar-body-in-range]=\"cell.inRange\">\n                  {{ cell.value }}\n                </span>\n                <span aria-hidden=\"true\" class=\"tn-calendar-body-cell-preview\"></span>\n              </button>\n            }\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [":host{--calendar-cell-size: 48px;--calendar-header-height: 40px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}.tn-calendar-table{width:calc(7 * var(--calendar-cell-size));border-spacing:0;border-collapse:separate}.tn-calendar-table-header th{text-align:center;height:var(--calendar-header-height);padding:8px 0;font-size:var(--calendar-header-font-size);font-weight:500;color:var(--tn-fg2, #666)}.tn-calendar-table-header-divider{height:1px;border:0}.tn-calendar-body tr{border:0}.tn-calendar-body-cell-container{position:relative;border:0;outline:0;height:var(--calendar-cell-size);width:14.2857142857%}.tn-calendar-body-cell{position:absolute;inset:0;margin:auto;background:transparent;border:0;outline:0;cursor:pointer;color:var(--tn-fg1, #333);width:var(--calendar-cell-size);height:var(--calendar-cell-size)}.tn-calendar-body-cell:not(:disabled):hover:not(.tn-calendar-body-selected):not(.tn-calendar-body-range-start):not(.tn-calendar-body-range-end):not(.tn-calendar-body-in-range){background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-body-cell:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px}.tn-calendar-body-cell:focus .tn-calendar-body-cell-content.tn-focus-indicator{background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-body-cell:disabled{color:var(--tn-fg2, #666);opacity:.5;cursor:default}.tn-calendar-body-cell.tn-calendar-body-today:not(.tn-calendar-body-selected){border:1px solid var(--tn-primary, #007bff);color:var(--tn-primary, #007bff)}.tn-calendar-body-cell.tn-calendar-body-selected,.tn-calendar-body-cell.tn-calendar-body-range-start,.tn-calendar-body-cell.tn-calendar-body-range-end,.tn-calendar-body-cell.tn-calendar-body-in-range{background:var(--tn-primary, #007bff);color:#fff}.tn-calendar-body-cell-content{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%;font-size:var(--calendar-cell-font-size);font-weight:400;transition:background-color .2s cubic-bezier(.25,.8,.25,1)}.tn-calendar-body-cell-preview{position:absolute;inset:0;background:transparent}.cdk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.tn-focus-indicator{position:relative}.tn-focus-indicator:before{content:\"\";position:absolute;inset:0;opacity:0;background:currentColor;transition:opacity .2s cubic-bezier(.25,.8,.25,1)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnMonthViewComponent, isStandalone: true, selector: "tn-month-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, markedDates: { classPropertyName: "markedDates", publicName: "markedDates", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, selectedRange: { classPropertyName: "selectedRange", publicName: "selectedRange", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange" }, ngImport: i0, template: "<table role=\"grid\" class=\"tn-calendar-table\" [attr.aria-label]=\"gridLabel()\">\n  <!-- Table header with day names -->\n  <thead class=\"tn-calendar-table-header\">\n    <tr>\n      @for (day of weekdays(); track day.long) {\n        <th scope=\"col\">\n          <span class=\"cdk-visually-hidden\">{{ day.long }}</span>\n          <span aria-hidden=\"true\">{{ day.short }}</span>\n        </th>\n      }\n    </tr>\n  </thead>\n\n  <!-- Table body with calendar cells -->\n  <tbody class=\"tn-calendar-body\">\n    <!-- Calendar rows -->\n    @for (row of calendarRows(); track trackByRow($index); let rowIndex = $index) {\n      <tr role=\"row\">\n        @for (cell of row; track trackByDate($index, cell); let colIndex = $index) {\n          <td\n            role=\"gridcell\"\n            class=\"tn-calendar-body-cell-container\"\n            [attr.data-tn-row]=\"rowIndex\"\n            [attr.data-tn-col]=\"colIndex\">\n            @if (cell.value > 0) {\n              <button\n                type=\"button\"\n                class=\"tn-calendar-body-cell\"\n                [attr.data-tn-date]=\"cell.isoDate\"\n                [class.tn-calendar-body-selected]=\"cell.selected\"\n                [class.tn-calendar-body-today]=\"cell.today\"\n                [class.tn-calendar-body-marked]=\"cell.marked\"\n                [class.tn-calendar-body-active]=\"cell.value === activeDay()\"\n                [class.tn-calendar-body-range-start]=\"cell.rangeStart\"\n                [class.tn-calendar-body-range-end]=\"cell.rangeEnd\"\n                [class.tn-calendar-body-in-range]=\"cell.inRange\"\n                [disabled]=\"!cell.enabled\"\n                [attr.tabindex]=\"cell.value === activeDay() ? 0 : -1\"\n                [attr.aria-label]=\"cell.ariaLabel\"\n                [attr.aria-pressed]=\"cell.inSelection\"\n                [attr.aria-current]=\"cell.today ? 'date' : null\"\n                (click)=\"onCellClicked(cell)\"\n                (keydown)=\"onKeydown($event)\">\n                <span class=\"tn-calendar-body-cell-content\"\n                      [class.tn-calendar-body-fill-primary]=\"cell.fill === 'primary'\"\n                      [class.tn-calendar-body-fill-marked]=\"cell.fill === 'marked'\"\n                      [class.tn-calendar-body-today-outline]=\"cell.todayOutline\">\n                  {{ cell.label }}\n                </span>\n              </button>\n            }\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [":host{display:block;--calendar-cell-size: 48px;--calendar-header-height: 40px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px;--calendar-indicator-size: var(--calendar-cell-size);--calendar-radius: 4px}.tn-calendar-table{width:100%;min-width:min(100%,7 * var(--calendar-cell-size));table-layout:fixed;border-spacing:0;border-collapse:separate}.tn-calendar-table-header th{text-align:center;height:var(--calendar-header-height);padding:8px 0;font-size:var(--calendar-header-font-size);font-weight:500;color:var(--tn-fg2, #666)}.tn-calendar-table-header th:first-child{border-start-start-radius:var(--calendar-radius);border-end-start-radius:var(--calendar-radius)}.tn-calendar-table-header th:last-child{border-start-end-radius:var(--calendar-radius);border-end-end-radius:var(--calendar-radius)}.tn-calendar-table-header-divider{height:1px;border:0}.tn-calendar-body tr{border:0}.tn-calendar-body-cell-container{position:relative;border:0;outline:0;height:var(--calendar-cell-size);width:14.2857142857%}.tn-calendar-body-cell{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;background:transparent;border:0;outline:0;cursor:pointer;color:var(--tn-fg1, #333)}.tn-calendar-body-cell:focus-visible{outline:none}.tn-calendar-body-cell:focus-visible .tn-calendar-body-cell-content{outline:2px solid var(--tn-primary, #007bff);outline-offset:-2px}.tn-calendar-body-cell:disabled{color:var(--tn-fg2, #666);opacity:.5;cursor:default}.tn-calendar-body-cell.tn-calendar-body-in-range:before,.tn-calendar-body-cell.tn-calendar-body-range-start:before,.tn-calendar-body-cell.tn-calendar-body-range-end:before{content:\"\";position:absolute;top:50%;transform:translateY(-50%);height:var(--calendar-indicator-size);background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-body-cell.tn-calendar-body-in-range:before{inset-inline:0}.tn-calendar-body-cell.tn-calendar-body-range-start:before{inset-inline-start:50%;inset-inline-end:0}.tn-calendar-body-cell.tn-calendar-body-range-end:before{inset-inline-start:0;inset-inline-end:50%}.tn-calendar-body-cell.tn-calendar-body-range-start.tn-calendar-body-range-end:before{content:none}.tn-calendar-body-cell-content{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--calendar-indicator-size);height:var(--calendar-indicator-size);max-width:100%;border-radius:var(--calendar-radius);font-size:var(--calendar-cell-font-size);font-weight:400;transition:background-color .2s cubic-bezier(.25,.8,.25,1)}.tn-calendar-body-cell:not(:disabled):hover .tn-calendar-body-cell-content:not(.tn-calendar-body-fill-primary){background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-body-cell-content.tn-calendar-body-fill-marked{background:var(--tn-alt-bg1, #f0f0f0)}.tn-calendar-body-cell-content.tn-calendar-body-fill-primary{background:var(--tn-primary, #007bff);color:var(--tn-primary-txt, #fff)}.tn-calendar-body-cell-content.tn-calendar-body-today-outline{border:1px solid var(--tn-primary, #007bff);color:var(--tn-primary, #007bff)}.cdk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnMonthViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tn-month-view', standalone: true, imports: [], template: "<table role=\"grid\" class=\"tn-calendar-table\">\n  <!-- Table header with day names -->\n  <thead class=\"tn-calendar-table-header\">\n    <tr>\n      @for (day of weekdays; track day) {\n        <th scope=\"col\">\n          <span class=\"cdk-visually-hidden\">{{ day.long }}</span>\n          <span aria-hidden=\"true\">{{ day.short }}</span>\n        </th>\n      }\n    </tr>\n  </thead>\n\n  <!-- Table body with calendar cells -->\n  <tbody class=\"tn-calendar-body\">\n    <!-- Calendar rows -->\n    @for (row of calendarRows(); track trackByRow($index); let rowIndex = $index) {\n      <tr role=\"row\">\n        @for (cell of row; track trackByDate($index, cell); let colIndex = $index) {\n          <td\n            role=\"gridcell\"\n            class=\"tn-calendar-body-cell-container\"\n            [attr.data-tn-row]=\"rowIndex\"\n            [attr.data-tn-col]=\"colIndex\">\n            @if (cell.value > 0) {\n              <button\n                type=\"button\"\n                class=\"tn-calendar-body-cell\"\n                [class.tn-calendar-body-selected]=\"cell.selected\"\n                [class.tn-calendar-body-today]=\"cell.today\"\n                [class.tn-calendar-body-active]=\"cell.selected\"\n                [class.tn-calendar-body-range-start]=\"cell.rangeStart\"\n                [class.tn-calendar-body-range-end]=\"cell.rangeEnd\"\n                [class.tn-calendar-body-in-range]=\"cell.inRange\"\n                [disabled]=\"!cell.enabled\"\n                [attr.tabindex]=\"cell.selected ? 0 : -1\"\n                [attr.aria-label]=\"cell.ariaLabel\"\n                [attr.aria-pressed]=\"cell.selected\"\n                [attr.aria-current]=\"cell.today ? 'date' : null\"\n                (click)=\"onCellClicked(cell)\">\n                <span class=\"tn-calendar-body-cell-content tn-focus-indicator\"\n                      [class.tn-calendar-body-selected]=\"cell.selected\"\n                      [class.tn-calendar-body-today]=\"cell.today\"\n                      [class.tn-calendar-body-range-start]=\"cell.rangeStart\"\n                      [class.tn-calendar-body-range-end]=\"cell.rangeEnd\"\n                      [class.tn-calendar-body-in-range]=\"cell.inRange\">\n                  {{ cell.value }}\n                </span>\n                <span aria-hidden=\"true\" class=\"tn-calendar-body-cell-preview\"></span>\n              </button>\n            }\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [":host{--calendar-cell-size: 48px;--calendar-header-height: 40px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}.tn-calendar-table{width:calc(7 * var(--calendar-cell-size));border-spacing:0;border-collapse:separate}.tn-calendar-table-header th{text-align:center;height:var(--calendar-header-height);padding:8px 0;font-size:var(--calendar-header-font-size);font-weight:500;color:var(--tn-fg2, #666)}.tn-calendar-table-header-divider{height:1px;border:0}.tn-calendar-body tr{border:0}.tn-calendar-body-cell-container{position:relative;border:0;outline:0;height:var(--calendar-cell-size);width:14.2857142857%}.tn-calendar-body-cell{position:absolute;inset:0;margin:auto;background:transparent;border:0;outline:0;cursor:pointer;color:var(--tn-fg1, #333);width:var(--calendar-cell-size);height:var(--calendar-cell-size)}.tn-calendar-body-cell:not(:disabled):hover:not(.tn-calendar-body-selected):not(.tn-calendar-body-range-start):not(.tn-calendar-body-range-end):not(.tn-calendar-body-in-range){background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-body-cell:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px}.tn-calendar-body-cell:focus .tn-calendar-body-cell-content.tn-focus-indicator{background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-body-cell:disabled{color:var(--tn-fg2, #666);opacity:.5;cursor:default}.tn-calendar-body-cell.tn-calendar-body-today:not(.tn-calendar-body-selected){border:1px solid var(--tn-primary, #007bff);color:var(--tn-primary, #007bff)}.tn-calendar-body-cell.tn-calendar-body-selected,.tn-calendar-body-cell.tn-calendar-body-range-start,.tn-calendar-body-cell.tn-calendar-body-range-end,.tn-calendar-body-cell.tn-calendar-body-in-range{background:var(--tn-primary, #007bff);color:#fff}.tn-calendar-body-cell-content{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%;font-size:var(--calendar-cell-font-size);font-weight:400;transition:background-color .2s cubic-bezier(.25,.8,.25,1)}.tn-calendar-body-cell-preview{position:absolute;inset:0;background:transparent}.cdk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.tn-focus-indicator{position:relative}.tn-focus-indicator:before{content:\"\";position:absolute;inset:0;opacity:0;background:currentColor;transition:opacity .2s cubic-bezier(.25,.8,.25,1)}\n"] }]
-        }], propDecorators: { activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], selectedRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRange", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }] } });
+            args: [{ selector: 'tn-month-view', standalone: true, imports: [], template: "<table role=\"grid\" class=\"tn-calendar-table\" [attr.aria-label]=\"gridLabel()\">\n  <!-- Table header with day names -->\n  <thead class=\"tn-calendar-table-header\">\n    <tr>\n      @for (day of weekdays(); track day.long) {\n        <th scope=\"col\">\n          <span class=\"cdk-visually-hidden\">{{ day.long }}</span>\n          <span aria-hidden=\"true\">{{ day.short }}</span>\n        </th>\n      }\n    </tr>\n  </thead>\n\n  <!-- Table body with calendar cells -->\n  <tbody class=\"tn-calendar-body\">\n    <!-- Calendar rows -->\n    @for (row of calendarRows(); track trackByRow($index); let rowIndex = $index) {\n      <tr role=\"row\">\n        @for (cell of row; track trackByDate($index, cell); let colIndex = $index) {\n          <td\n            role=\"gridcell\"\n            class=\"tn-calendar-body-cell-container\"\n            [attr.data-tn-row]=\"rowIndex\"\n            [attr.data-tn-col]=\"colIndex\">\n            @if (cell.value > 0) {\n              <button\n                type=\"button\"\n                class=\"tn-calendar-body-cell\"\n                [attr.data-tn-date]=\"cell.isoDate\"\n                [class.tn-calendar-body-selected]=\"cell.selected\"\n                [class.tn-calendar-body-today]=\"cell.today\"\n                [class.tn-calendar-body-marked]=\"cell.marked\"\n                [class.tn-calendar-body-active]=\"cell.value === activeDay()\"\n                [class.tn-calendar-body-range-start]=\"cell.rangeStart\"\n                [class.tn-calendar-body-range-end]=\"cell.rangeEnd\"\n                [class.tn-calendar-body-in-range]=\"cell.inRange\"\n                [disabled]=\"!cell.enabled\"\n                [attr.tabindex]=\"cell.value === activeDay() ? 0 : -1\"\n                [attr.aria-label]=\"cell.ariaLabel\"\n                [attr.aria-pressed]=\"cell.inSelection\"\n                [attr.aria-current]=\"cell.today ? 'date' : null\"\n                (click)=\"onCellClicked(cell)\"\n                (keydown)=\"onKeydown($event)\">\n                <span class=\"tn-calendar-body-cell-content\"\n                      [class.tn-calendar-body-fill-primary]=\"cell.fill === 'primary'\"\n                      [class.tn-calendar-body-fill-marked]=\"cell.fill === 'marked'\"\n                      [class.tn-calendar-body-today-outline]=\"cell.todayOutline\">\n                  {{ cell.label }}\n                </span>\n              </button>\n            }\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [":host{display:block;--calendar-cell-size: 48px;--calendar-header-height: 40px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px;--calendar-indicator-size: var(--calendar-cell-size);--calendar-radius: 4px}.tn-calendar-table{width:100%;min-width:min(100%,7 * var(--calendar-cell-size));table-layout:fixed;border-spacing:0;border-collapse:separate}.tn-calendar-table-header th{text-align:center;height:var(--calendar-header-height);padding:8px 0;font-size:var(--calendar-header-font-size);font-weight:500;color:var(--tn-fg2, #666)}.tn-calendar-table-header th:first-child{border-start-start-radius:var(--calendar-radius);border-end-start-radius:var(--calendar-radius)}.tn-calendar-table-header th:last-child{border-start-end-radius:var(--calendar-radius);border-end-end-radius:var(--calendar-radius)}.tn-calendar-table-header-divider{height:1px;border:0}.tn-calendar-body tr{border:0}.tn-calendar-body-cell-container{position:relative;border:0;outline:0;height:var(--calendar-cell-size);width:14.2857142857%}.tn-calendar-body-cell{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;background:transparent;border:0;outline:0;cursor:pointer;color:var(--tn-fg1, #333)}.tn-calendar-body-cell:focus-visible{outline:none}.tn-calendar-body-cell:focus-visible .tn-calendar-body-cell-content{outline:2px solid var(--tn-primary, #007bff);outline-offset:-2px}.tn-calendar-body-cell:disabled{color:var(--tn-fg2, #666);opacity:.5;cursor:default}.tn-calendar-body-cell.tn-calendar-body-in-range:before,.tn-calendar-body-cell.tn-calendar-body-range-start:before,.tn-calendar-body-cell.tn-calendar-body-range-end:before{content:\"\";position:absolute;top:50%;transform:translateY(-50%);height:var(--calendar-indicator-size);background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-body-cell.tn-calendar-body-in-range:before{inset-inline:0}.tn-calendar-body-cell.tn-calendar-body-range-start:before{inset-inline-start:50%;inset-inline-end:0}.tn-calendar-body-cell.tn-calendar-body-range-end:before{inset-inline-start:0;inset-inline-end:50%}.tn-calendar-body-cell.tn-calendar-body-range-start.tn-calendar-body-range-end:before{content:none}.tn-calendar-body-cell-content{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--calendar-indicator-size);height:var(--calendar-indicator-size);max-width:100%;border-radius:var(--calendar-radius);font-size:var(--calendar-cell-font-size);font-weight:400;transition:background-color .2s cubic-bezier(.25,.8,.25,1)}.tn-calendar-body-cell:not(:disabled):hover .tn-calendar-body-cell-content:not(.tn-calendar-body-fill-primary){background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-body-cell-content.tn-calendar-body-fill-marked{background:var(--tn-alt-bg1, #f0f0f0)}.tn-calendar-body-cell-content.tn-calendar-body-fill-primary{background:var(--tn-primary, #007bff);color:var(--tn-primary-txt, #fff)}.tn-calendar-body-cell-content.tn-calendar-body-today-outline{border:1px solid var(--tn-primary, #007bff);color:var(--tn-primary, #007bff)}.cdk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}\n"] }]
+        }], propDecorators: { activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], markedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "markedDates", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], selectedRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRange", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }] } });
 
 class TnMultiYearViewComponent {
     activeDate = input(new Date(), ...(ngDevMode ? [{ debugName: "activeDate" }] : []));
@@ -14061,46 +14466,91 @@ class TnMultiYearViewComponent {
     minDate = input(undefined, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
     maxDate = input(undefined, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
     dateFilter = input(undefined, ...(ngDevMode ? [{ debugName: "dateFilter" }] : []));
+    /**
+     * Locale for the year numerals — Arabic-Indic digits in `ar`, Western in `en`. Falls
+     * back to the app's `LOCALE_ID`; `tn-calendar` binds it from its own `locale` input.
+     */
+    locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : []));
     selectedChange = output();
     activeDateChange = output();
-    cellWidth = 25; // 100/4 for 4 columns
-    cellAspectRatio = 7.14286; // Same as Material
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    appLocale = inject(LOCALE_ID);
+    intl = injectTnCalendarIntl();
+    /** Years read out in the locale's own numerals, without a thousands separator. */
+    yearFormat = computed(() => {
+        return new Intl.NumberFormat(this.locale() ?? this.appLocale, { useGrouping: false });
+    }, ...(ngDevMode ? [{ debugName: "yearFormat" }] : []));
     yearsPerRow = 4;
-    yearRowCount = 6; // Shows 24 years total (6 rows x 4 columns)
-    // Calculate the year range to display
+    yearRowCount = YEARS_PER_PAGE / this.yearsPerRow;
+    /**
+     * The page of years on screen. Pages are fixed blocks, so the active year sits
+     * wherever it falls within one rather than in the middle — see `yearPageStart`.
+     */
     yearRange = computed(() => {
-        const activeDate = this.activeDate();
-        const currentYear = activeDate.getFullYear();
-        // Calculate the starting year for a 24-year range
-        // We want the active year to be roughly in the middle
-        const startYear = Math.floor(currentYear / 24) * 24;
-        return { start: startYear, end: startYear + 23 };
+        const start = yearPageStart(this.activeDate().getFullYear());
+        return { start, end: start + YEARS_PER_PAGE - 1 };
     }, ...(ngDevMode ? [{ debugName: "yearRange" }] : []));
+    /**
+     * Names the grid after the span of years it shows, so a screen-reader user arrowing
+     * around knows which page they are on rather than just hearing bare years.
+     */
+    gridLabel = computed(() => {
+        const range = this.yearRange();
+        return this.intl().yearGridLabel(range.start, range.end);
+    }, ...(ngDevMode ? [{ debugName: "gridLabel" }] : []));
     yearRows = computed(() => {
         const range = this.yearRange();
+        const format = this.yearFormat();
+        const formatYear = (year) => format.format(year);
+        // Read once for the whole grid rather than per cell, matching the month view: every
+        // year is then measured against the same instant, and 24 allocations become one.
+        const thisYear = new Date().getFullYear();
         const rows = [];
         for (let row = 0; row < this.yearRowCount; row++) {
             const yearRow = [];
             for (let col = 0; col < this.yearsPerRow; col++) {
                 const year = range.start + (row * this.yearsPerRow) + col;
-                yearRow.push(this.createYearCell(year));
+                yearRow.push(this.createYearCell(year, formatYear, thisYear));
             }
             rows.push(yearRow);
         }
         return rows;
     }, ...(ngDevMode ? [{ debugName: "yearRows" }] : []));
-    createYearCell(year) {
-        const today = new Date();
-        const currentYear = today.getFullYear();
+    /**
+     * The year that carries `tabindex="0"` — the grid's single keyboard entry point, per
+     * the roving tabindex pattern. Follows `activeDate`, falling back to the nearest
+     * enabled year in the page so a range whose active year is disabled still has a
+     * tabbable cell. `null` only when every year on the page is disabled.
+     */
+    activeYear = computed(() => {
+        const range = this.yearRange();
+        // Always inside the page: the range is derived from this same year.
+        const wanted = this.activeDate().getFullYear();
+        if (this.isYearEnabled(wanted)) {
+            return wanted;
+        }
+        // Spiral outwards from the year we wanted, forward first.
+        const span = range.end - range.start;
+        for (let offset = 1; offset <= span; offset++) {
+            if (wanted + offset <= range.end && this.isYearEnabled(wanted + offset)) {
+                return wanted + offset;
+            }
+            if (wanted - offset >= range.start && this.isYearEnabled(wanted - offset)) {
+                return wanted - offset;
+            }
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "activeYear" }] : []));
+    createYearCell(year, formatYear, thisYear) {
         const selectedYear = this.selected()?.getFullYear();
-        const isToday = year === currentYear;
+        const isToday = year === thisYear;
         const isSelected = year === selectedYear;
         const enabled = this.isYearEnabled(year);
         return {
-            value: year,
-            year: year,
-            label: year.toString(),
-            ariaLabel: this.formatYearAriaLabel(year, isSelected, isToday),
+            year,
+            label: formatYear(year),
+            ariaLabel: this.formatYearAriaLabel(formatYear(year), isToday),
             enabled,
             selected: isSelected,
             today: isToday,
@@ -14116,7 +14566,11 @@ class TnMultiYearViewComponent {
         if (maxDate && year > maxDate.getFullYear()) {
             return false;
         }
-        // If we have a date filter, test January 1st of that year
+        // Deliberately coarse: a year is a single cell, so it gets a single verdict, and
+        // January 1st stands in for the whole year. A filter that rules out January 1st
+        // while allowing the rest of the year therefore disables the year outright. Material
+        // approximates the same way; testing all 365 days per cell is not worth it, and the
+        // month view applies the filter exactly once the user drills in.
         if (dateFilter) {
             const testDate = new Date(year, 0, 1);
             if (!dateFilter(testDate)) {
@@ -14125,13 +14579,15 @@ class TnMultiYearViewComponent {
         }
         return true;
     }
-    formatYearAriaLabel(year, isSelected, isToday) {
-        let label = year.toString();
-        if (isSelected) {
-            label += ' (selected)';
-        }
+    /**
+     * Selection is carried by the button's `aria-pressed`, so it is deliberately not
+     * repeated here. "Current year" stays: `aria-current="date"` on a year cell is vague
+     * enough that spelling it out earns its place.
+     */
+    formatYearAriaLabel(year, isToday) {
+        let label = year;
         if (isToday) {
-            label += ' (current year)';
+            label += ` ${this.intl().currentYear}`;
         }
         return label;
     }
@@ -14143,19 +14599,92 @@ class TnMultiYearViewComponent {
     }
     onYearClicked(cell) {
         if (cell.enabled) {
-            // Create a new date with the selected year, keeping current month and day
-            const currentDate = this.activeDate();
-            const newDate = new Date(cell.year, currentDate.getMonth(), currentDate.getDate());
-            this.selectedChange.emit(newDate);
+            // Keeps the month and day, clamped: moving off 29 February into a non-leap year
+            // would otherwise roll over into March and change the month too.
+            this.selectedChange.emit(withYear(this.activeDate(), cell.year));
+        }
+    }
+    /**
+     * Moves the roving tabindex across the year grid. Picking a year stays on
+     * click/Enter/Space, which the cells are already buttons for.
+     *
+     * Moves past either end of the 24-year page emit an `activeDateChange` like the
+     * header's paging buttons do, and the grid re-renders on the neighbouring page.
+     */
+    onKeydown(event) {
+        const from = this.activeYear();
+        if (from === null) {
+            return;
+        }
+        const move = this.targetForKey(event, from);
+        if (move === null) {
+            return;
+        }
+        // Claim the key before the browser scrolls the page with it.
+        event.preventDefault();
+        const landing = this.nearestEnabledYear(move.year, move.search);
+        if (landing === null || landing === from) {
+            return;
+        }
+        this.activeDateChange.emit(withYear(this.activeDate(), landing));
+        focusActiveCellAfterRender(this.host, this.injector);
+    }
+    /**
+     * The year a key aims at, and which way to look from there when that year is disabled.
+     *
+     * The search direction belongs to the key, not to where the target happens to fall
+     * relative to the current year. Home and End mean "the ends of *this* page", so they
+     * search inward: looking outward would step onto the neighbouring 24-year page over a
+     * single ruled-out boundary year and turn the page, which is not what either key
+     * promises. The arrows and the paging keys keep travelling the way they were already
+     * headed, and moving onto the next page is the point of those.
+     */
+    targetForKey(event, from) {
+        const range = this.yearRange();
+        const yearsPerPage = range.end - range.start + 1;
+        switch (event.key) {
+            case 'ArrowLeft': return { year: from - 1, search: -1 };
+            case 'ArrowRight': return { year: from + 1, search: 1 };
+            case 'ArrowUp': return { year: from - this.yearsPerRow, search: -1 };
+            case 'ArrowDown': return { year: from + this.yearsPerRow, search: 1 };
+            case 'Home': return { year: range.start, search: 1 };
+            case 'End': return { year: range.end, search: -1 };
+            case 'PageUp': return { year: from - yearsPerPage, search: -1 };
+            case 'PageDown': return { year: from + yearsPerPage, search: 1 };
+            default: return null;
+        }
+    }
+    /**
+     * Steps past years the caller has disabled, so `minDate`/`maxDate` don't park focus
+     * somewhere unusable.
+     *
+     * Searches the way the key asked for (see `targetForKey`), then doubles back if that
+     * finds nothing. The fallback is for the ends of the allowed range: arrowing right at
+     * `maxDate` finds nothing ahead, doubles back onto the year we started from, and the
+     * caller reads that as "don't move".
+     */
+    nearestEnabledYear(target, preferred) {
+        return this.scanForEnabledYear(target, preferred)
+            ?? this.scanForEnabledYear(target, preferred === 1 ? -1 : 1);
+    }
+    /** Bounded, so an everything-disabled range stops the move instead of spinning. */
+    scanForEnabledYear(from, direction) {
+        const maxSteps = 48;
+        for (let step = 0; step <= maxSteps; step++) {
+            const candidate = from + (step * direction);
+            if (this.isYearEnabled(candidate)) {
+                return candidate;
+            }
         }
+        return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnMultiYearViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnMultiYearViewComponent, isStandalone: true, selector: "tn-multi-year-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange" }, ngImport: i0, template: "<table role=\"grid\" class=\"tn-calendar-table\">\n  <!-- Table body with year cells -->\n  <tbody class=\"tn-calendar-body\">\n    @for (row of yearRows(); track trackByRow($index, row); let rowIndex = $index) {\n      <tr role=\"row\">\n        @for (cell of row; track trackByYear($index, cell); let colIndex = $index) {\n          <td\n            role=\"gridcell\"\n            class=\"tn-calendar-body-cell-container\"\n            [attr.data-tn-row]=\"rowIndex\"\n            [attr.data-tn-col]=\"colIndex\"\n            [style.width.%]=\"cellWidth\"\n            [style.padding-top.%]=\"cellAspectRatio\"\n            [style.padding-bottom.%]=\"cellAspectRatio\">\n            <button\n              type=\"button\"\n              class=\"tn-calendar-body-cell\"\n              [class.tn-calendar-body-selected]=\"cell.selected\"\n              [class.tn-calendar-body-today]=\"cell.today\"\n              [class.tn-calendar-body-active]=\"cell.selected\"\n              [disabled]=\"!cell.enabled\"\n              [attr.tabindex]=\"cell.selected ? 0 : -1\"\n              [attr.aria-label]=\"cell.ariaLabel\"\n              [attr.aria-pressed]=\"cell.selected\"\n              [attr.aria-current]=\"cell.today ? 'date' : null\"\n              (click)=\"onYearClicked(cell)\">\n              <span class=\"tn-calendar-body-cell-content tn-focus-indicator\"\n                    [class.tn-calendar-body-selected]=\"cell.selected\"\n                    [class.tn-calendar-body-today]=\"cell.today\">\n                {{ cell.value }}\n              </span>\n              <span aria-hidden=\"true\" class=\"tn-calendar-body-cell-preview\"></span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [".tn-calendar-table{width:100%;border-spacing:0;border-collapse:separate}.tn-calendar-table-header-divider{height:16px;border:none}.tn-calendar-body{min-width:224px}.tn-calendar-body-cell-container{position:relative;border:none}.tn-calendar-body-cell{position:absolute;top:5%;left:5%;width:90%;height:90%;border:none;background:transparent;color:var(--tn-fg1, #333);cursor:pointer;font-size:14px;font-weight:500;transition:background-color .2s ease}.tn-calendar-body-cell:hover:not(:disabled){background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-body-cell:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-body-cell:disabled{color:var(--tn-fg2, #666);opacity:.5;cursor:default}.tn-calendar-body-cell.tn-calendar-body-today:not(.tn-calendar-body-selected){border:1px solid var(--tn-primary, #007bff);color:var(--tn-primary, #007bff)}.tn-calendar-body-cell.tn-calendar-body-selected{background:var(--tn-primary, #007bff);color:#fff}.tn-calendar-body-cell-content{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:background-color .2s cubic-bezier(.25,.8,.25,1)}.tn-focus-indicator{position:relative}.tn-focus-indicator:before{content:\"\";position:absolute;inset:0;opacity:0;background:currentColor;transition:opacity .2s cubic-bezier(.25,.8,.25,1)}.tn-calendar-body-cell-preview{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnMultiYearViewComponent, isStandalone: true, selector: "tn-multi-year-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange" }, ngImport: i0, template: "<table role=\"grid\" class=\"tn-calendar-table\" [attr.aria-label]=\"gridLabel()\">\n  <!-- Table body with year cells -->\n  <tbody class=\"tn-calendar-body\">\n    @for (row of yearRows(); track trackByRow($index, row); let rowIndex = $index) {\n      <tr role=\"row\">\n        @for (cell of row; track trackByYear($index, cell); let colIndex = $index) {\n          <td\n            role=\"gridcell\"\n            class=\"tn-calendar-body-cell-container\"\n            [attr.data-tn-row]=\"rowIndex\"\n            [attr.data-tn-col]=\"colIndex\">\n            <button\n              type=\"button\"\n              class=\"tn-calendar-body-cell\"\n              [attr.data-tn-year]=\"cell.year\"\n              [class.tn-calendar-body-selected]=\"cell.selected\"\n              [class.tn-calendar-body-today]=\"cell.today\"\n              [class.tn-calendar-body-active]=\"cell.year === activeYear()\"\n              [disabled]=\"!cell.enabled\"\n              [attr.tabindex]=\"cell.year === activeYear() ? 0 : -1\"\n              [attr.aria-label]=\"cell.ariaLabel\"\n              [attr.aria-pressed]=\"cell.selected\"\n              [attr.aria-current]=\"cell.today ? 'date' : null\"\n              (click)=\"onYearClicked(cell)\"\n              (keydown)=\"onKeydown($event)\">\n              <span class=\"tn-calendar-body-cell-content\">\n                {{ cell.label }}\n              </span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [":host{--calendar-radius: 4px;--calendar-year-row-height: 48px;--calendar-year-indicator-width: 72px;--calendar-year-indicator-height: 36px}.tn-calendar-table{width:100%;min-width:min(100%,224px);table-layout:fixed;border-spacing:0;border-collapse:separate}.tn-calendar-table-header-divider{height:16px;border:none}.tn-calendar-body-cell-container{position:relative;border:none;height:var(--calendar-year-row-height);width:25%}.tn-calendar-body-cell{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;border:none;background:transparent;color:var(--tn-fg1, #333);cursor:pointer;font-size:14px;font-weight:500}.tn-calendar-body-cell:focus-visible{outline:none}.tn-calendar-body-cell:focus-visible .tn-calendar-body-cell-content{outline:2px solid var(--tn-primary, #007bff);outline-offset:-2px}.tn-calendar-body-cell:disabled{color:var(--tn-fg2, #666);opacity:.5;cursor:default}.tn-calendar-body-cell-content{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--calendar-year-indicator-width);height:var(--calendar-year-indicator-height);max-width:100%;border-radius:var(--calendar-radius);transition:background-color .2s cubic-bezier(.25,.8,.25,1)}.tn-calendar-body-cell:not(:disabled):not(.tn-calendar-body-selected):hover .tn-calendar-body-cell-content{background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-body-cell.tn-calendar-body-today:not(.tn-calendar-body-selected) .tn-calendar-body-cell-content{border:1px solid var(--tn-primary, #007bff);color:var(--tn-primary, #007bff)}.tn-calendar-body-cell.tn-calendar-body-selected .tn-calendar-body-cell-content{background:var(--tn-primary, #007bff);color:var(--tn-primary-txt, #fff)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnMultiYearViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tn-multi-year-view', standalone: true, imports: [], template: "<table role=\"grid\" class=\"tn-calendar-table\">\n  <!-- Table body with year cells -->\n  <tbody class=\"tn-calendar-body\">\n    @for (row of yearRows(); track trackByRow($index, row); let rowIndex = $index) {\n      <tr role=\"row\">\n        @for (cell of row; track trackByYear($index, cell); let colIndex = $index) {\n          <td\n            role=\"gridcell\"\n            class=\"tn-calendar-body-cell-container\"\n            [attr.data-tn-row]=\"rowIndex\"\n            [attr.data-tn-col]=\"colIndex\"\n            [style.width.%]=\"cellWidth\"\n            [style.padding-top.%]=\"cellAspectRatio\"\n            [style.padding-bottom.%]=\"cellAspectRatio\">\n            <button\n              type=\"button\"\n              class=\"tn-calendar-body-cell\"\n              [class.tn-calendar-body-selected]=\"cell.selected\"\n              [class.tn-calendar-body-today]=\"cell.today\"\n              [class.tn-calendar-body-active]=\"cell.selected\"\n              [disabled]=\"!cell.enabled\"\n              [attr.tabindex]=\"cell.selected ? 0 : -1\"\n              [attr.aria-label]=\"cell.ariaLabel\"\n              [attr.aria-pressed]=\"cell.selected\"\n              [attr.aria-current]=\"cell.today ? 'date' : null\"\n              (click)=\"onYearClicked(cell)\">\n              <span class=\"tn-calendar-body-cell-content tn-focus-indicator\"\n                    [class.tn-calendar-body-selected]=\"cell.selected\"\n                    [class.tn-calendar-body-today]=\"cell.today\">\n                {{ cell.value }}\n              </span>\n              <span aria-hidden=\"true\" class=\"tn-calendar-body-cell-preview\"></span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [".tn-calendar-table{width:100%;border-spacing:0;border-collapse:separate}.tn-calendar-table-header-divider{height:16px;border:none}.tn-calendar-body{min-width:224px}.tn-calendar-body-cell-container{position:relative;border:none}.tn-calendar-body-cell{position:absolute;top:5%;left:5%;width:90%;height:90%;border:none;background:transparent;color:var(--tn-fg1, #333);cursor:pointer;font-size:14px;font-weight:500;transition:background-color .2s ease}.tn-calendar-body-cell:hover:not(:disabled){background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-body-cell:focus{outline:2px solid var(--tn-primary, #007bff);outline-offset:2px;background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-body-cell:disabled{color:var(--tn-fg2, #666);opacity:.5;cursor:default}.tn-calendar-body-cell.tn-calendar-body-today:not(.tn-calendar-body-selected){border:1px solid var(--tn-primary, #007bff);color:var(--tn-primary, #007bff)}.tn-calendar-body-cell.tn-calendar-body-selected{background:var(--tn-primary, #007bff);color:#fff}.tn-calendar-body-cell-content{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:background-color .2s cubic-bezier(.25,.8,.25,1)}.tn-focus-indicator{position:relative}.tn-focus-indicator:before{content:\"\";position:absolute;inset:0;opacity:0;background:currentColor;transition:opacity .2s cubic-bezier(.25,.8,.25,1)}.tn-calendar-body-cell-preview{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}\n"] }]
-        }], propDecorators: { activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }] } });
+            args: [{ selector: 'tn-multi-year-view', standalone: true, imports: [], template: "<table role=\"grid\" class=\"tn-calendar-table\" [attr.aria-label]=\"gridLabel()\">\n  <!-- Table body with year cells -->\n  <tbody class=\"tn-calendar-body\">\n    @for (row of yearRows(); track trackByRow($index, row); let rowIndex = $index) {\n      <tr role=\"row\">\n        @for (cell of row; track trackByYear($index, cell); let colIndex = $index) {\n          <td\n            role=\"gridcell\"\n            class=\"tn-calendar-body-cell-container\"\n            [attr.data-tn-row]=\"rowIndex\"\n            [attr.data-tn-col]=\"colIndex\">\n            <button\n              type=\"button\"\n              class=\"tn-calendar-body-cell\"\n              [attr.data-tn-year]=\"cell.year\"\n              [class.tn-calendar-body-selected]=\"cell.selected\"\n              [class.tn-calendar-body-today]=\"cell.today\"\n              [class.tn-calendar-body-active]=\"cell.year === activeYear()\"\n              [disabled]=\"!cell.enabled\"\n              [attr.tabindex]=\"cell.year === activeYear() ? 0 : -1\"\n              [attr.aria-label]=\"cell.ariaLabel\"\n              [attr.aria-pressed]=\"cell.selected\"\n              [attr.aria-current]=\"cell.today ? 'date' : null\"\n              (click)=\"onYearClicked(cell)\"\n              (keydown)=\"onKeydown($event)\">\n              <span class=\"tn-calendar-body-cell-content\">\n                {{ cell.label }}\n              </span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [":host{--calendar-radius: 4px;--calendar-year-row-height: 48px;--calendar-year-indicator-width: 72px;--calendar-year-indicator-height: 36px}.tn-calendar-table{width:100%;min-width:min(100%,224px);table-layout:fixed;border-spacing:0;border-collapse:separate}.tn-calendar-table-header-divider{height:16px;border:none}.tn-calendar-body-cell-container{position:relative;border:none;height:var(--calendar-year-row-height);width:25%}.tn-calendar-body-cell{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;border:none;background:transparent;color:var(--tn-fg1, #333);cursor:pointer;font-size:14px;font-weight:500}.tn-calendar-body-cell:focus-visible{outline:none}.tn-calendar-body-cell:focus-visible .tn-calendar-body-cell-content{outline:2px solid var(--tn-primary, #007bff);outline-offset:-2px}.tn-calendar-body-cell:disabled{color:var(--tn-fg2, #666);opacity:.5;cursor:default}.tn-calendar-body-cell-content{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--calendar-year-indicator-width);height:var(--calendar-year-indicator-height);max-width:100%;border-radius:var(--calendar-radius);transition:background-color .2s cubic-bezier(.25,.8,.25,1)}.tn-calendar-body-cell:not(:disabled):not(.tn-calendar-body-selected):hover .tn-calendar-body-cell-content{background:var(--tn-alt-bg2, #e8f4fd)}.tn-calendar-body-cell.tn-calendar-body-today:not(.tn-calendar-body-selected) .tn-calendar-body-cell-content{border:1px solid var(--tn-primary, #007bff);color:var(--tn-primary, #007bff)}.tn-calendar-body-cell.tn-calendar-body-selected .tn-calendar-body-cell-content{background:var(--tn-primary, #007bff);color:var(--tn-primary-txt, #fff)}\n"] }]
+        }], propDecorators: { activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }] } });
 
 class TnCalendarComponent {
     startView = input('month', ...(ngDevMode ? [{ debugName: "startView" }] : []));
@@ -14163,116 +14692,112 @@ class TnCalendarComponent {
     minDate = input(undefined, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
     maxDate = input(undefined, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
     dateFilter = input(undefined, ...(ngDevMode ? [{ debugName: "dateFilter" }] : []));
+    /**
+     * Dates to flag as noteworthy — days a task runs, days with events, and the like.
+     * Order and time-of-day are ignored; only the calendar day is compared. The
+     * calendar owns how a marked day looks, so callers pass dates rather than styles.
+     * Marking is independent of `selected`/`selectedRange`, which stay authoritative
+     * where they overlap.
+     */
+    markedDates = input(undefined, ...(ngDevMode ? [{ debugName: "markedDates" }] : []));
+    /**
+     * Which month — or which page of years, in the year view — is on screen.
+     *
+     * Optional. Left unbound, the calendar opens on the month the bound value lives in and
+     * drives navigation itself. Bind it, alongside `activeDateChange`, to drive the view
+     * from outside: useful for a calendar that stays mounted while its value jumps to
+     * another month, which the open-on-init behaviour alone won't follow.
+     *
+     * Unlike `selected`, this isn't strictly controlled — the calendar still navigates on
+     * its own when the user pages or arrows around, so binding a constant here won't
+     * freeze the view. Changing what you bind always wins.
+     */
+    activeDate = input(undefined, ...(ngDevMode ? [{ debugName: "activeDate" }] : []));
+    /**
+     * Locale for dates, month and weekday names, and which day the week starts on.
+     *
+     * Defaults to the app's `LOCALE_ID`, which is where an Angular app already declares
+     * its locale — so a `ng build --localize` app is right without touching this. Bind it
+     * only when one calendar needs a different locale from the rest of the app.
+     *
+     * Nothing here reads the browser's language on its own: doing so would quietly
+     * disagree with `DatePipe` and every other locale-aware part of the app. An app that
+     * wants that behaviour opts into it once, at bootstrap:
+     * `{ provide: LOCALE_ID, useValue: navigator.language }`.
+     *
+     * Wording that isn't a date — "(marked)", the header button labels — comes from
+     * `TN_CALENDAR_INTL` instead.
+     */
+    locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : []));
+    appLocale = inject(LOCALE_ID);
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    /** The locale actually in force: the input when bound, the app's otherwise. */
+    resolvedLocale = computed(() => this.locale() ?? this.appLocale, ...(ngDevMode ? [{ debugName: "resolvedLocale" }] : []));
     // Range mode inputs
     rangeMode = input(false, ...(ngDevMode ? [{ debugName: "rangeMode" }] : []));
     selectedRange = input(undefined, ...(ngDevMode ? [{ debugName: "selectedRange" }] : []));
     selectedChange = output();
+    /**
+     * The date the calendar is now sitting on — the month it shows, and the day holding
+     * the grid's roving tabindex.
+     *
+     * This is navigation, not selection: it fires on paging, on arrow keys, and on
+     * clicking a day (a click moves the active cell as well as choosing the date, so the
+     * two never drift apart). Treat it as "the view moved", not "the user picked a date" —
+     * `selectedChange` is the one that means a choice was made.
+     */
     activeDateChange = output();
     viewChanged = output();
     // Range mode outputs
     selectedRangeChange = output();
-    currentDate = signal(new Date(), ...(ngDevMode ? [{ debugName: "currentDate" }] : []));
+    /**
+     * Which month/year grid is on screen. Navigation state, not selection state.
+     *
+     * Follows the `activeDate` input whenever the caller changes it, but stays writable so
+     * paging and arrow keys keep working with no echo back from the caller.
+     */
+    currentDate = linkedSignal({ ...(ngDevMode ? { debugName: "currentDate" } : {}), source: () => this.activeDate(),
+        computation: (activeDate, previous) => activeDate ?? previous?.value ?? new Date() });
     currentView = signal('month', ...(ngDevMode ? [{ debugName: "currentView" }] : []));
-    // Range selection state - this is the authoritative source for calendar display
-    rangeState = signal({
-        start: null,
-        end: null,
-        selecting: 'start'
-    }, ...(ngDevMode ? [{ debugName: "rangeState" }] : []));
-    // Track if user has interacted with calendar - once true, ignore external selectedRange
-    userHasInteracted = false;
-    constructor() {
-        // Watch for changes to selectedRange input
-        effect(() => {
-            // Track signals to re-run effect when they change
-            this.selectedRange();
-            const rangeMode = this.rangeMode();
-            // Only update range state from external selectedRange if user hasn't interacted yet
-            if (!this.userHasInteracted && rangeMode) {
-                this.initializeRangeState();
-            }
-        });
-    }
     ngOnInit() {
         this.currentView.set(this.startView());
-        // Initialize range state if in range mode (this also handles currentDate)
-        if (this.rangeMode()) {
-            this.initializeRangeState();
+        // A bound activeDate already says what should be on screen.
+        if (this.activeDate()) {
+            return;
         }
-        else {
-            const selected = this.selected();
-            if (selected) {
-                // For single date mode, navigate to the selected date's month
-                this.currentDate.set(new Date(selected));
-            }
+        // Otherwise open on the month the caller's value lives in.
+        const initialDate = this.rangeMode()
+            ? (this.selectedRange()?.start ?? this.selectedRange()?.end ?? null)
+            : (this.selected() ?? null);
+        if (initialDate) {
+            this.currentDate.set(new Date(initialDate));
         }
     }
-    initializeRangeState() {
-        if (this.rangeMode()) {
-            const selectedRange = this.selectedRange();
-            if (selectedRange) {
-                this.rangeState.set({
-                    start: selectedRange.start,
-                    end: selectedRange.end,
-                    selecting: selectedRange.start && selectedRange.end ? 'start' :
-                        selectedRange.start ? 'end' : 'start'
-                });
-                // Navigate to the month of the selected start date, or end date if no start date
-                const dateToShow = selectedRange.start || selectedRange.end;
-                if (dateToShow) {
-                    this.currentDate.set(new Date(dateToShow));
-                }
-            }
-            else {
-                // No selected range - initialize empty range state
-                this.rangeState.set({
-                    start: null,
-                    end: null,
-                    selecting: 'start'
-                });
-            }
-        }
-    }
-    onMonthSelected(month) {
-        const newDate = new Date(this.currentDate());
-        newDate.setMonth(month);
-        this.currentDate.set(newDate);
-        this.currentView.set('month');
-        this.viewChanged.emit('month');
-    }
-    onYearSelected(year) {
-        const newDate = new Date(this.currentDate());
-        newDate.setFullYear(year);
-        this.currentDate.set(newDate);
-        this.activeDateChange.emit(newDate);
-    }
     onViewChanged(view) {
         this.currentView.set(view);
         this.viewChanged.emit(view);
     }
     onPreviousClicked() {
-        const current = this.currentDate();
-        let newDate;
-        if (this.currentView() === 'month') {
-            newDate = new Date(current.getFullYear(), current.getMonth() - 1, 1);
-        }
-        else {
-            // For year view, navigate by 24-year ranges (like Material)
-            newDate = new Date(current.getFullYear() - 24, current.getMonth(), 1);
-        }
-        this.currentDate.set(newDate);
-        this.activeDateChange.emit(newDate);
+        this.page(-1);
     }
     onNextClicked() {
+        this.page(1);
+    }
+    /**
+     * Steps the view one page in `direction`: a month in the day view, a page of years in
+     * the year view — the same spans `PageUp`/`PageDown` move, and the same the header
+     * labels.
+     *
+     * Carries the day across, clamped, rather than dropping to the 1st. The keyboard has
+     * always done this, so resetting here left the roving tabindex somewhere different
+     * depending on whether the user clicked the arrow or pressed the key.
+     */
+    page(direction) {
         const current = this.currentDate();
-        let newDate;
-        if (this.currentView() === 'month') {
-            newDate = new Date(current.getFullYear(), current.getMonth() + 1, 1);
-        }
-        else {
-            // For year view, navigate by 24-year ranges (like Material)
-            newDate = new Date(current.getFullYear() + 24, current.getMonth(), 1);
-        }
+        const newDate = this.currentView() === 'month'
+            ? addMonths(current, direction)
+            : withYear(current, current.getFullYear() + (direction * YEARS_PER_PAGE));
         this.currentDate.set(newDate);
         this.activeDateChange.emit(newDate);
     }
@@ -14284,83 +14809,346 @@ class TnCalendarComponent {
             this.selectedChange.emit(date);
         }
     }
+    /**
+     * Works out the next range from the one the caller currently owns and emits it. The
+     * calendar keeps no copy — what it renders next is whatever the caller binds back.
+     */
     handleRangeSelection(date) {
-        // Mark that user has interacted - calendar is now authoritative
-        this.userHasInteracted = true;
-        const currentRange = this.rangeState();
-        // If we already have a complete range (both start and end), clear and start fresh
-        if (currentRange.start && currentRange.end && currentRange.selecting === 'start') {
-            const newRangeState = {
-                start: date,
-                end: null,
-                selecting: 'end'
-            };
-            this.rangeState.set(newRangeState);
+        const current = this.selectedRange();
+        const start = current?.start ?? null;
+        const end = current?.end ?? null;
+        // Nothing pending, or the range is already complete: begin a new one.
+        if (!start || end) {
             this.selectedRangeChange.emit({ start: date, end: null });
             return;
         }
-        if (currentRange.selecting === 'start' || !currentRange.start) {
-            // First click or selecting start date - clear any previous range immediately
-            const newRangeState = {
-                start: date,
-                end: null,
-                selecting: 'end'
-            };
-            this.rangeState.set(newRangeState);
+        // A second pick before the first restarts the range rather than inverting it.
+        // Compared by day: the clicked date is midnight, but the caller's start may carry a
+        // time of day, which would otherwise make re-picking the same day restart the range.
+        if (compareDays(date, start) < 0) {
             this.selectedRangeChange.emit({ start: date, end: null });
+            return;
         }
-        else {
-            // Setting end date
-            const start = currentRange.start;
-            // If second date is earlier than first, treat it as new start date
-            if (date < start) {
-                const newRangeState = {
-                    start: date,
-                    end: null,
-                    selecting: 'end'
-                };
-                this.rangeState.set(newRangeState);
-                this.selectedRangeChange.emit({ start: date, end: null });
-            }
-            else {
-                // Valid end date - complete the range
-                const newRangeState = {
-                    start: start,
-                    end: date,
-                    selecting: 'start'
-                };
-                this.rangeState.set(newRangeState);
-                this.selectedRangeChange.emit({ start: start, end: date });
-            }
-        }
+        this.selectedRangeChange.emit({ start, end: date });
     }
     onActiveDateChange(date) {
         this.currentDate.set(date);
         this.activeDateChange.emit(date);
     }
+    /**
+     * A year picked in the year grid moves the view to that year and returns to the day
+     * grid. It is navigation, not selection — no `selectedChange` — so the user lands on
+     * the month they asked for and picks a day from there.
+     */
     onYearSelectedFromView(date) {
-        // When a year is selected from the multi-year view, update the current date
-        // and switch back to month view
         this.currentDate.set(date);
         this.currentView.set('month');
         this.viewChanged.emit('month');
         this.activeDateChange.emit(date);
-    }
-    /**
-     * Reset the calendar to accept external range values - called when calendar reopens
-     */
-    resetInteractionState() {
-        this.userHasInteracted = false;
-        // Reinitialize range state from selectedRange if provided
-        this.initializeRangeState();
+        // Switching grids destroys the year cell the user just activated, which drops focus
+        // to `<body>` and restarts the tab order. Carry it over to the day now active.
+        focusActiveCellAfterRender(this.host, this.injector);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnCalendarComponent, isStandalone: true, selector: "tn-calendar", inputs: { startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, selectedRange: { classPropertyName: "selectedRange", publicName: "selectedRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", viewChanged: "viewChanged", selectedRangeChange: "selectedRangeChange" }, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<tn-calendar-header\n  [currentDate]=\"currentDate()\"\n  [currentView]=\"currentView()\"\n  (monthSelected)=\"onMonthSelected($event)\"\n  (yearSelected)=\"onYearSelected($event)\"\n  (viewChanged)=\"onViewChanged($event)\"\n  (previousClicked)=\"onPreviousClicked()\"\n  (nextClicked)=\"onNextClicked()\" />\n\n<div class=\"tn-calendar-content\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n  @if (currentView() === 'month') {\n    <tn-month-view\n      [activeDate]=\"currentDate()\"\n      [selected]=\"selected()\"\n      [dateFilter]=\"dateFilter()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [rangeMode]=\"rangeMode()\"\n      [selectedRange]=\"rangeMode() ? rangeState() : undefined\"\n      (selectedChange)=\"onSelectedChange($event)\"\n      (activeDateChange)=\"onActiveDateChange($event)\" />\n  }\n\n  <!-- Multi-year view -->\n  @if (currentView() === 'year') {\n    <tn-multi-year-view\n      [activeDate]=\"currentDate()\"\n      [selected]=\"selected()\"\n      [dateFilter]=\"dateFilter()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      (selectedChange)=\"onYearSelectedFromView($event)\"\n      (activeDateChange)=\"onActiveDateChange($event)\" />\n  }\n</div>\n", styles: [":host{display:block;background:var(--tn-bg2, #f5f5f5);color:var(--tn-fg1, #333);padding:0 8px 8px;box-shadow:0 4px 16px #0000001f,0 1px 4px #00000014}.tn-calendar-content{padding:8px;outline:none}.tn-year-view{text-align:center;padding:20px;color:var(--tn-fg2, #666)}\n"], dependencies: [{ kind: "component", type: TnCalendarHeaderComponent, selector: "tn-calendar-header", inputs: ["currentDate", "currentView"], outputs: ["monthSelected", "yearSelected", "viewChanged", "previousClicked", "nextClicked"] }, { kind: "component", type: TnMonthViewComponent, selector: "tn-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "rangeMode", "selectedRange"], outputs: ["selectedChange", "activeDateChange"] }, { kind: "component", type: TnMultiYearViewComponent, selector: "tn-multi-year-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter"], outputs: ["selectedChange", "activeDateChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnCalendarComponent, isStandalone: true, selector: "tn-calendar", inputs: { startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, markedDates: { classPropertyName: "markedDates", publicName: "markedDates", isSignal: true, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, selectedRange: { classPropertyName: "selectedRange", publicName: "selectedRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", viewChanged: "viewChanged", selectedRangeChange: "selectedRangeChange" }, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<tn-calendar-header\n  [currentDate]=\"currentDate()\"\n  [locale]=\"resolvedLocale()\"\n  [currentView]=\"currentView()\"\n  (viewChanged)=\"onViewChanged($event)\"\n  (previousClicked)=\"onPreviousClicked()\"\n  (nextClicked)=\"onNextClicked()\" />\n\n<div class=\"tn-calendar-content\">\n  @if (currentView() === 'month') {\n    <tn-month-view\n      [activeDate]=\"currentDate()\"\n      [locale]=\"resolvedLocale()\"\n      [selected]=\"selected()\"\n      [dateFilter]=\"dateFilter()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [markedDates]=\"markedDates()\"\n      [rangeMode]=\"rangeMode()\"\n      [selectedRange]=\"rangeMode() ? selectedRange() : undefined\"\n      (selectedChange)=\"onSelectedChange($event)\"\n      (activeDateChange)=\"onActiveDateChange($event)\" />\n  }\n\n  <!-- Multi-year view -->\n  @if (currentView() === 'year') {\n    <tn-multi-year-view\n      [activeDate]=\"currentDate()\"\n      [locale]=\"resolvedLocale()\"\n      [selected]=\"selected()\"\n      [dateFilter]=\"dateFilter()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      (selectedChange)=\"onYearSelectedFromView($event)\"\n      (activeDateChange)=\"onActiveDateChange($event)\" />\n  }\n</div>\n", styles: [":host{display:block;background:var(--tn-bg2, #f5f5f5);color:var(--tn-fg1, #333);padding:0 8px 8px;box-shadow:0 4px 16px #0000001f,0 1px 4px #00000014}.tn-calendar-content{padding:8px;outline:none}.tn-year-view{text-align:center;padding:20px;color:var(--tn-fg2, #666)}\n"], dependencies: [{ kind: "component", type: TnCalendarHeaderComponent, selector: "tn-calendar-header", inputs: ["currentDate", "currentView", "locale"], outputs: ["viewChanged", "previousClicked", "nextClicked"] }, { kind: "component", type: TnMonthViewComponent, selector: "tn-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "markedDates", "rangeMode", "selectedRange", "locale"], outputs: ["selectedChange", "activeDateChange"] }, { kind: "component", type: TnMultiYearViewComponent, selector: "tn-multi-year-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "locale"], outputs: ["selectedChange", "activeDateChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tn-calendar', standalone: true, imports: [TnCalendarHeaderComponent, TnMonthViewComponent, TnMultiYearViewComponent], hostDirectives: [{ directive: TnTestIdDirective, inputs: ['tnTestId: testId'] }], template: "<tn-calendar-header\n  [currentDate]=\"currentDate()\"\n  [currentView]=\"currentView()\"\n  (monthSelected)=\"onMonthSelected($event)\"\n  (yearSelected)=\"onYearSelected($event)\"\n  (viewChanged)=\"onViewChanged($event)\"\n  (previousClicked)=\"onPreviousClicked()\"\n  (nextClicked)=\"onNextClicked()\" />\n\n<div class=\"tn-calendar-content\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n  @if (currentView() === 'month') {\n    <tn-month-view\n      [activeDate]=\"currentDate()\"\n      [selected]=\"selected()\"\n      [dateFilter]=\"dateFilter()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [rangeMode]=\"rangeMode()\"\n      [selectedRange]=\"rangeMode() ? rangeState() : undefined\"\n      (selectedChange)=\"onSelectedChange($event)\"\n      (activeDateChange)=\"onActiveDateChange($event)\" />\n  }\n\n  <!-- Multi-year view -->\n  @if (currentView() === 'year') {\n    <tn-multi-year-view\n      [activeDate]=\"currentDate()\"\n      [selected]=\"selected()\"\n      [dateFilter]=\"dateFilter()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      (selectedChange)=\"onYearSelectedFromView($event)\"\n      (activeDateChange)=\"onActiveDateChange($event)\" />\n  }\n</div>\n", styles: [":host{display:block;background:var(--tn-bg2, #f5f5f5);color:var(--tn-fg1, #333);padding:0 8px 8px;box-shadow:0 4px 16px #0000001f,0 1px 4px #00000014}.tn-calendar-content{padding:8px;outline:none}.tn-year-view{text-align:center;padding:20px;color:var(--tn-fg2, #666)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], selectedRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRange", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }], viewChanged: [{ type: i0.Output, args: ["viewChanged"] }], selectedRangeChange: [{ type: i0.Output, args: ["selectedRangeChange"] }] } });
+            args: [{ selector: 'tn-calendar', standalone: true, imports: [TnCalendarHeaderComponent, TnMonthViewComponent, TnMultiYearViewComponent], hostDirectives: [{ directive: TnTestIdDirective, inputs: ['tnTestId: testId'] }], template: "<tn-calendar-header\n  [currentDate]=\"currentDate()\"\n  [locale]=\"resolvedLocale()\"\n  [currentView]=\"currentView()\"\n  (viewChanged)=\"onViewChanged($event)\"\n  (previousClicked)=\"onPreviousClicked()\"\n  (nextClicked)=\"onNextClicked()\" />\n\n<div class=\"tn-calendar-content\">\n  @if (currentView() === 'month') {\n    <tn-month-view\n      [activeDate]=\"currentDate()\"\n      [locale]=\"resolvedLocale()\"\n      [selected]=\"selected()\"\n      [dateFilter]=\"dateFilter()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [markedDates]=\"markedDates()\"\n      [rangeMode]=\"rangeMode()\"\n      [selectedRange]=\"rangeMode() ? selectedRange() : undefined\"\n      (selectedChange)=\"onSelectedChange($event)\"\n      (activeDateChange)=\"onActiveDateChange($event)\" />\n  }\n\n  <!-- Multi-year view -->\n  @if (currentView() === 'year') {\n    <tn-multi-year-view\n      [activeDate]=\"currentDate()\"\n      [locale]=\"resolvedLocale()\"\n      [selected]=\"selected()\"\n      [dateFilter]=\"dateFilter()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      (selectedChange)=\"onYearSelectedFromView($event)\"\n      (activeDateChange)=\"onActiveDateChange($event)\" />\n  }\n</div>\n", styles: [":host{display:block;background:var(--tn-bg2, #f5f5f5);color:var(--tn-fg1, #333);padding:0 8px 8px;box-shadow:0 4px 16px #0000001f,0 1px 4px #00000014}.tn-calendar-content{padding:8px;outline:none}.tn-year-view{text-align:center;padding:20px;color:var(--tn-fg2, #666)}\n"] }]
+        }], propDecorators: { startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], markedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "markedDates", required: false }] }], activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], selectedRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRange", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }], viewChanged: [{ type: i0.Output, args: ["viewChanged"] }], selectedRangeChange: [{ type: i0.Output, args: ["selectedRangeChange"] }] } });
+
+/**
+ * Harness for interacting with a single day (or year) cell inside `tn-calendar`.
+ *
+ * Modelled on Angular Material's `MatCalendarCellHarness` so specs can move across
+ * with the method names intact. Three differences worth knowing:
+ *
+ * - `isMarked()` is new — it reports the `markedDates` state, which Material has no
+ *   equivalent for.
+ * - `getDate()` and the `date` filter are new, and are the reliable way to name a cell:
+ *   the text is formatted for the app's locale, so `'14'` misses a calendar rendering
+ *   `١٤`.
+ * - There are no comparison-range or preview-range methods (`isComparisonRangeStart()`
+ *   and friends); `tn-calendar` has no comparison range to report.
+ *
+ * @example
+ * ```typescript
+ * const calendar = await loader.getHarness(TnCalendarHarness);
+ * const [first] = await calendar.getCells({ date: new Date(2031, 4, 14) });
+ * await first.select();
+ * expect(await first.isSelected()).toBe(true);
+ * ```
+ */
+class TnCalendarCellHarness extends ComponentHarness {
+    /** The selector for a calendar cell. Padding cells render no button, so only real days match. */
+    static hostSelector = '.tn-calendar-body-cell';
+    _content = this.locatorFor('.tn-calendar-body-cell-content');
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a cell with specific attributes.
+     *
+     * @param options Options for filtering which cell instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * // Every day the schedule runs on
+     * const runDays = await calendar.getCells({ marked: true });
+     *
+     * // The disabled days before minDate
+     * const blocked = await calendar.getCells({ disabled: true });
+     * ```
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnCalendarCellHarness, options)
+            .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text))
+            .addOption('date', options.date, async (harness, date) => (await harness.getDateStamp()) === isoDateString(date))
+            .addOption('year', options.year, async (harness, year) => (await harness.getYear()) === year)
+            .addOption('selected', options.selected, async (harness, selected) => (await harness.isSelected()) === selected)
+            .addOption('active', options.active, async (harness, active) => (await harness.isActive()) === active)
+            .addOption('disabled', options.disabled, async (harness, disabled) => (await harness.isDisabled()) === disabled)
+            .addOption('today', options.today, async (harness, today) => (await harness.isToday()) === today)
+            .addOption('inRange', options.inRange, async (harness, inRange) => (await harness.isInRange()) === inRange)
+            .addOption('marked', options.marked, async (harness, marked) => (await harness.isMarked()) === marked);
+    }
+    /** Gets the text of the calendar cell. */
+    async getText() {
+        return (await this._content()).text();
+    }
+    /** Gets the aria-label of the calendar cell. */
+    async getAriaLabel() {
+        return (await this.host()).getAttribute('aria-label').then((label) => label ?? '');
+    }
+    /**
+     * Gets the calendar day this cell represents, independent of how it is rendered —
+     * `getText()` is formatted for the locale, so it reads `١٤` in Arabic while this still
+     * answers the 14th. Midnight local time. `null` on a year cell, which has no day.
+     */
+    async getDate() {
+        const stamp = await this.getDateStamp();
+        if (!stamp) {
+            return null;
+        }
+        const [year, month, day] = stamp.split('-').map(Number);
+        return new Date(year, month - 1, day);
+    }
+    /**
+     * Gets the year this cell represents, independent of how it is rendered. Works on year
+     * cells; `null` on a day cell.
+     */
+    async getYear() {
+        const year = await (await this.host()).getAttribute('data-tn-year');
+        return year === null ? null : Number(year);
+    }
+    /** The raw `YYYY-MM-DD` stamp, for comparing without rebuilding a `Date`. */
+    async getDateStamp() {
+        return (await this.host()).getAttribute('data-tn-date');
+    }
+    /** Whether the cell is selected. */
+    async isSelected() {
+        return (await this.host()).hasClass('tn-calendar-body-selected');
+    }
+    /** Whether the cell is disabled. */
+    async isDisabled() {
+        return (await this.host()).getProperty('disabled');
+    }
+    /**
+     * Whether the cell holds the grid's roving tabindex — the one cell reachable with Tab,
+     * which the arrow keys move. Independent of selection: arrowing around changes which
+     * cell is active without selecting anything.
+     */
+    async isActive() {
+        return (await this.host()).hasClass('tn-calendar-body-active');
+    }
+    /** Whether the cell represents today's date. */
+    async isToday() {
+        return (await this.host()).hasClass('tn-calendar-body-today');
+    }
+    /** Whether the cell was flagged through the calendar's `markedDates` input. */
+    async isMarked() {
+        return (await this.host()).hasClass('tn-calendar-body-marked');
+    }
+    /** Whether the cell is the start of the selected range. */
+    async isRangeStart() {
+        return (await this.host()).hasClass('tn-calendar-body-range-start');
+    }
+    /** Whether the cell is the end of the selected range. */
+    async isRangeEnd() {
+        return (await this.host()).hasClass('tn-calendar-body-range-end');
+    }
+    /**
+     * Whether the cell is part of the selected range, ends included — matching Material's
+     * `isInRange()`. Use `isRangeStart()`/`isRangeEnd()` to single out the ends.
+     */
+    async isInRange() {
+        const host = await this.host();
+        const [between, start, end] = await parallel(() => [
+            host.hasClass('tn-calendar-body-in-range'),
+            host.hasClass('tn-calendar-body-range-start'),
+            host.hasClass('tn-calendar-body-range-end'),
+        ]);
+        return between || start || end;
+    }
+    /** Selects the calendar cell. Won't do anything if the cell is disabled. */
+    async select() {
+        return (await this.host()).click();
+    }
+    /**
+     * Presses a key on the cell. The grid handles its keys on the cells themselves, so
+     * this is how the roving tabindex is driven — arrows, Home/End and PageUp/PageDown
+     * move the active cell, while Enter and Space select.
+     *
+     * @param key The key to press, e.g. `TestKey.RIGHT_ARROW`.
+     * @param modifiers Modifier keys held while pressing, e.g. `{ shift: true }`.
+     *
+     * @example
+     * ```typescript
+     * const [cell] = await calendar.getCells({ active: true });
+     * await cell.press(TestKey.PAGE_DOWN, { shift: true }); // a year on
+     * ```
+     */
+    async press(key, modifiers) {
+        const host = await this.host();
+        return modifiers ? host.sendKeys(modifiers, key) : host.sendKeys(key);
+    }
+    /** Hovers over the calendar cell. */
+    async hover() {
+        return (await this.host()).hover();
+    }
+    /** Moves the mouse away from the calendar cell. */
+    async mouseAway() {
+        return (await this.host()).mouseAway();
+    }
+    /** Focuses the calendar cell. */
+    async focus() {
+        return (await this.host()).focus();
+    }
+    /** Removes focus from the calendar cell. */
+    async blur() {
+        return (await this.host()).blur();
+    }
+}
+/**
+ * Harness for interacting with `tn-calendar` in tests.
+ *
+ * The method names mirror Angular Material's `MatCalendarHarness`, so a spec written
+ * against the Material calendar moves over unchanged. Differences to know:
+ *
+ * - `getCurrentView()` resolves to `'month' | 'year'`. `tn-calendar` has no separate
+ *   multi-year view — its year view *is* the multi-year grid.
+ * - Cell filters gain `marked` for the `markedDates` state and `date`/`year` for naming
+ *   a cell without going through its rendered text, and drop Material's
+ *   `inComparisonRange`, which has no equivalent here.
+ *
+ * @example
+ * ```typescript
+ * const calendar = await loader.getHarness(TnCalendarHarness);
+ *
+ * // Which days does the schedule run on this month?
+ * const marked = await calendar.getCells({ marked: true });
+ * expect(await parallel(() => marked.map((cell) => cell.getText()))).toEqual(['24', '25']);
+ *
+ * // Page forward a month
+ * await calendar.next();
+ * expect(await calendar.getCurrentViewLabel()).toBe('MAR 2022');
+ *
+ * // Pick a day
+ * await calendar.selectCell({ date: new Date(2022, 2, 14) });
+ * ```
+ */
+class TnCalendarHarness extends ComponentHarness {
+    /** The selector for the host element of a `TnCalendarComponent` instance. */
+    static hostSelector = 'tn-calendar';
+    _periodButton = this.locatorFor('.tn-calendar-period-button');
+    _previousButton = this.locatorFor('.tn-calendar-previous-button');
+    _nextButton = this.locatorFor('.tn-calendar-next-button');
+    _monthView = this.locatorForOptional('tn-month-view');
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a calendar with specific
+     * attributes.
+     *
+     * @param options Options for filtering which calendar instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnCalendarHarness, options);
+    }
+    /**
+     * Gets a list of cells inside the calendar. Padding cells for days outside the month
+     * are not included.
+     *
+     * @param filter Optionally filters which cells are included.
+     */
+    async getCells(filter = {}) {
+        return this.locatorForAll(TnCalendarCellHarness.with(filter))();
+    }
+    /** Gets the current view that is being shown inside the calendar. */
+    async getCurrentView() {
+        return (await this._monthView()) ? 'month' : 'year';
+    }
+    /** Gets the label of the current calendar view, e.g. `'MAR 2022'`. */
+    async getCurrentViewLabel() {
+        return (await this._periodButton()).text();
+    }
+    /** Changes the calendar view by clicking on the view toggle button. */
+    async changeView() {
+        return (await this._periodButton()).click();
+    }
+    /** Goes to the next page of the current view (e.g. next month when inside the month view). */
+    async next() {
+        return (await this._nextButton()).click();
+    }
+    /** Goes to the previous page of the current view (e.g. previous month in the month view). */
+    async previous() {
+        return (await this._previousButton()).click();
+    }
+    /**
+     * Selects a cell in the current calendar view.
+     *
+     * @param filter An optional filter to apply to the cells. The first cell matching the
+     *     filter will be selected.
+     */
+    async selectCell(filter = {}) {
+        const cells = await this.getCells(filter);
+        if (!cells.length) {
+            throw Error(`Cannot find calendar cell matching filter ${JSON.stringify(filter)}`);
+        }
+        await cells[0].select();
+    }
+    /**
+     * Gets the cell holding the grid's roving tabindex — the one cell Tab reaches, and the
+     * one the arrow keys move.
+     *
+     * `null` only when every cell in the view is disabled, where there is nothing to focus.
+     */
+    async getActiveCell() {
+        const [active] = await this.getCells({ active: true });
+        return active ?? null;
+    }
+    /**
+     * Moves the grid's roving tabindex with the keyboard, without going through the DOM.
+     *
+     * Arrows move by a day or a week (a year or a row of years); Home and End reach the
+     * ends of the month or year page; PageUp and PageDown page, shifted by a year. Moving
+     * never changes the selection — use `selectCell()` or `TnCalendarCellHarness.select()`
+     * for that.
+     *
+     * @param key The key to press, e.g. `TestKey.RIGHT_ARROW`.
+     * @param modifiers Modifier keys held while pressing, e.g. `{ shift: true }`.
+     *
+     * @example
+     * ```typescript
+     * await calendar.moveActiveCell(TestKey.DOWN_ARROW);
+     * expect(await (await calendar.getActiveCell())!.getText()).toBe('17');
+     * ```
+     */
+    async moveActiveCell(key, modifiers) {
+        const active = await this.getActiveCell();
+        if (!active) {
+            throw Error('Cannot move the active cell: the calendar has no cell able to take focus.');
+        }
+        await active.press(key, modifiers);
+    }
+}
 
 class TnDateInputComponent {
     overlay = inject(Overlay);
@@ -14381,9 +15169,7 @@ class TnDateInputComponent {
     dayRef = viewChild.required('dayInput');
     yearRef = viewChild.required('yearInput');
     calendarTemplate = viewChild.required('calendarTemplate');
-    calendar = viewChild.required(TnCalendarComponent);
     wrapperEl = viewChild.required('wrapper');
-    destroy$ = new Subject();
     overlayRef;
     portal;
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
@@ -14399,8 +15185,6 @@ class TnDateInputComponent {
         this.updateDisplayValues();
     }
     ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
         this.close();
     }
     // ControlValueAccessor implementation
@@ -14543,11 +15327,8 @@ class TnDateInputComponent {
         }
         this.createOverlay();
         this.isOpen.set(true);
-        // Reset calendar interaction state when opening
-        const cal = this.calendar();
-        if (cal) {
-            setTimeout(() => cal.resetInteractionState(), 0);
-        }
+        // No calendar state to reset — the calendar renders whatever date this component
+        // binds to it, so reopening already shows the current value.
     }
     close() {
         if (this.overlayRef) {
@@ -14604,6 +15385,8 @@ class TnDateInputComponent {
             panelClass: 'tn-datepicker-overlay'
         });
         // Close datepicker when backdrop is clicked
+        // No teardown to track: `dispose()` in close() ends this subscription with the
+        // overlay, and ngOnDestroy closes.
         this.overlayRef.backdropClick().subscribe(() => {
             this.close();
         });
@@ -14617,7 +15400,7 @@ class TnDateInputComponent {
                 useExisting: forwardRef(() => TnDateInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "monthRef", first: true, predicate: ["monthInput"], descendants: true, isSignal: true }, { propertyName: "dayRef", first: true, predicate: ["dayInput"], descendants: true, isSignal: true }, { propertyName: "yearRef", first: true, predicate: ["yearInput"], descendants: true, isSignal: true }, { propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }, { propertyName: "calendar", first: true, predicate: TnCalendarComponent, descendants: true, isSignal: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-date-input-container\" tnTestIdType=\"date-input\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-input-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Date segments MM/DD/YYYY -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #monthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('month')\"\n        (blur)=\"onSegmentBlur('month')\"\n        (keydown)=\"onSegmentKeydown($event, 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #dayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('day')\"\n        (blur)=\"onSegmentBlur('day')\"\n        (keydown)=\"onSegmentKeydown($event, 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #yearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('year')\"\n        (blur)=\"onSegmentBlur('year')\"\n        (keydown)=\"onSegmentKeydown($event, 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-input-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"false\"\n      [selected]=\"value()\"\n      (selectedChange)=\"onDateSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-input-container{position:relative;display:flex;align-items:center}.tn-date-input-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-input-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-input-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-input-toggle:disabled{cursor:not-allowed;opacity:.5}:host ::ng-deep .tn-datepicker-overlay .tn-calendar{background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;min-width:380px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}:host ::ng-deep .tn-datepicker-overlay .tn-calendar .tn-calendar-content{padding:0}\n"], dependencies: [{ kind: "component", type: TnCalendarComponent, selector: "tn-calendar", inputs: ["startView", "selected", "minDate", "maxDate", "dateFilter", "rangeMode", "selectedRange"], outputs: ["selectedChange", "activeDateChange", "viewChanged", "selectedRangeChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
+        ], viewQueries: [{ propertyName: "monthRef", first: true, predicate: ["monthInput"], descendants: true, isSignal: true }, { propertyName: "dayRef", first: true, predicate: ["dayInput"], descendants: true, isSignal: true }, { propertyName: "yearRef", first: true, predicate: ["yearInput"], descendants: true, isSignal: true }, { propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-date-input-container\" tnTestIdType=\"date-input\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-input-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Date segments MM/DD/YYYY -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #monthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('month')\"\n        (blur)=\"onSegmentBlur('month')\"\n        (keydown)=\"onSegmentKeydown($event, 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #dayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('day')\"\n        (blur)=\"onSegmentBlur('day')\"\n        (keydown)=\"onSegmentKeydown($event, 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #yearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('year')\"\n        (blur)=\"onSegmentBlur('year')\"\n        (keydown)=\"onSegmentKeydown($event, 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-input-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"false\"\n      [selected]=\"value()\"\n      (selectedChange)=\"onDateSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-input-container{position:relative;display:flex;align-items:center}.tn-date-input-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-input-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-input-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-input-toggle:disabled{cursor:not-allowed;opacity:.5}:host ::ng-deep .tn-datepicker-overlay .tn-calendar{background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;min-width:380px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}:host ::ng-deep .tn-datepicker-overlay .tn-calendar .tn-calendar-content{padding:0}\n"], dependencies: [{ kind: "component", type: TnCalendarComponent, selector: "tn-calendar", inputs: ["startView", "selected", "minDate", "maxDate", "dateFilter", "markedDates", "activeDate", "locale", "rangeMode", "selectedRange"], outputs: ["selectedChange", "activeDateChange", "viewChanged", "selectedRangeChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnDateInputComponent, decorators: [{
             type: Component,
@@ -14630,7 +15413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     ], host: {
                         'class': 'tn-date-input'
                     }, template: "<div class=\"tn-date-input-container\" tnTestIdType=\"date-input\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-input-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Date segments MM/DD/YYYY -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #monthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('month')\"\n        (blur)=\"onSegmentBlur('month')\"\n        (keydown)=\"onSegmentKeydown($event, 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #dayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('day')\"\n        (blur)=\"onSegmentBlur('day')\"\n        (keydown)=\"onSegmentKeydown($event, 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #yearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('year')\"\n        (blur)=\"onSegmentBlur('year')\"\n        (keydown)=\"onSegmentKeydown($event, 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-input-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"false\"\n      [selected]=\"value()\"\n      (selectedChange)=\"onDateSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-input-container{position:relative;display:flex;align-items:center}.tn-date-input-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-input-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-input-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-input-toggle:disabled{cursor:not-allowed;opacity:.5}:host ::ng-deep .tn-datepicker-overlay .tn-calendar{background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;min-width:380px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}:host ::ng-deep .tn-datepicker-overlay .tn-calendar .tn-calendar-content{padding:0}\n"] }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], monthRef: [{ type: i0.ViewChild, args: ['monthInput', { isSignal: true }] }], dayRef: [{ type: i0.ViewChild, args: ['dayInput', { isSignal: true }] }], yearRef: [{ type: i0.ViewChild, args: ['yearInput', { isSignal: true }] }], calendarTemplate: [{ type: i0.ViewChild, args: ['calendarTemplate', { isSignal: true }] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TnCalendarComponent), { isSignal: true }] }], wrapperEl: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }] } });
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], monthRef: [{ type: i0.ViewChild, args: ['monthInput', { isSignal: true }] }], dayRef: [{ type: i0.ViewChild, args: ['dayInput', { isSignal: true }] }], yearRef: [{ type: i0.ViewChild, args: ['yearInput', { isSignal: true }] }], calendarTemplate: [{ type: i0.ViewChild, args: ['calendarTemplate', { isSignal: true }] }], wrapperEl: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }] } });
 
 /**
  * Formats a Date into zero-padded month, day, and year strings.
@@ -14667,12 +15450,8 @@ async function setInputValue(el, value) {
     }
     await el.blur();
 }
-const MONTHS = [
-    'JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN',
-    'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC',
-];
 /**
- * Navigates the calendar overlay to the target month/year, then clicks the day cell.
+ * Navigates the calendar overlay to the target month, then clicks that day.
  * Assumes the calendar popup is already open.
  *
  * @param rootLocator The document root locator factory (for finding overlay elements).
@@ -14680,45 +15459,48 @@ const MONTHS = [
  */
 async function selectCalendarDate(rootLocator, date) {
     await navigateCalendarTo(rootLocator, date);
-    const dayStr = date.getDate().toString();
-    const cells = await rootLocator.locatorForAll('.tn-calendar-body-cell:not([disabled])')();
-    for (const cell of cells) {
-        if ((await cell.text()).trim() === dayStr) {
-            await cell.click();
-            return;
-        }
-    }
-    throw new Error(`Could not find enabled calendar cell for day ${dayStr}`);
+    // Matched on `data-tn-date` rather than the cell's text: the text is formatted for the
+    // locale, right down to the numerals, so "15" finds nothing in an Arabic calendar.
+    const target = isoDateString(date);
+    const cell = await rootLocator.locatorForOptional(`.tn-calendar-body-cell[data-tn-date="${target}"]:not([disabled])`)();
+    if (!cell) {
+        throw new Error(`Could not find an enabled calendar cell for ${target}`);
+    }
+    await cell.click();
 }
 /**
- * Navigates the calendar to show the month/year of the target date by
- * clicking previous/next buttons as needed.
+ * Pages the calendar to the month the target date falls in.
+ *
+ * Reads where the calendar currently sits from the days it is rendering rather than from
+ * the header, which is written in the app's language and numerals. Every day cell in the
+ * grid belongs to the displayed month, so the first one answers the question.
  */
 async function navigateCalendarTo(rootLocator, date) {
-    const targetLabel = `${MONTHS[date.getMonth()]} ${date.getFullYear()}`;
-    // Safety limit to prevent infinite loops
-    for (let i = 0; i < 120; i++) {
-        const periodButton = await rootLocator.locatorFor('.tn-calendar-period-button')();
-        const currentLabel = (await periodButton.text()).trim();
-        if (currentLabel === targetLabel) {
+    const monthsFrom = (from) => {
+        return (date.getFullYear() * 12 + date.getMonth()) - (from.year * 12 + from.month);
+    };
+    // A generous bound on the paging loop: a decade either way, and far more than the
+    // handful of clicks any real navigation needs.
+    for (let step = 0; step < 240; step++) {
+        const shown = await displayedMonth(rootLocator);
+        const delta = monthsFrom(shown);
+        if (delta === 0) {
             return;
         }
-        const currentDate = parseCalendarLabel(currentLabel);
-        const targetTime = date.getFullYear() * 12 + date.getMonth();
-        const currentTime = currentDate.year * 12 + currentDate.month;
-        const navSelector = targetTime > currentTime
-            ? '.tn-calendar-next-button'
-            : '.tn-calendar-previous-button';
-        const navButton = await rootLocator.locatorFor(navSelector)();
-        await navButton.click();
+        const button = await rootLocator.locatorFor(delta > 0 ? '.tn-calendar-next-button' : '.tn-calendar-previous-button')();
+        await button.click();
     }
-    throw new Error(`Could not navigate calendar to ${targetLabel}`);
+    throw new Error(`Could not navigate the calendar to ${isoDateString(date)}`);
 }
-function parseCalendarLabel(label) {
-    const parts = label.split(' ');
-    const monthIndex = MONTHS.indexOf(parts[0]);
-    const year = parseInt(parts[1], 10);
-    return { year, month: monthIndex >= 0 ? monthIndex : 0 };
+/** The month on screen, read off the first day cell the grid rendered. */
+async function displayedMonth(rootLocator) {
+    const cell = await rootLocator.locatorForOptional('.tn-calendar-body-cell[data-tn-date]')();
+    const stamp = await cell?.getAttribute('data-tn-date');
+    if (!stamp) {
+        throw new Error('Could not read the displayed month: the calendar rendered no day cells.');
+    }
+    const [year, month] = stamp.split('-').map(Number);
+    return { year, month: month - 1 };
 }
 
 /**
@@ -14850,9 +15632,7 @@ class TnDateRangeInputComponent {
     endDayRef = viewChild.required('endDayInput');
     endYearRef = viewChild.required('endYearInput');
     calendarTemplate = viewChild.required('calendarTemplate');
-    calendar = viewChild.required(TnCalendarComponent);
     wrapperEl = viewChild.required('wrapper');
-    destroy$ = new Subject();
     overlayRef;
     portal;
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
@@ -14867,19 +15647,14 @@ class TnDateRangeInputComponent {
     endDay = signal('', ...(ngDevMode ? [{ debugName: "endDay" }] : []));
     endYear = signal('', ...(ngDevMode ? [{ debugName: "endYear" }] : []));
     currentFocus = 'start';
-    // Always provide current range to calendar for initial display
-    initialRange = computed(() => {
-        return this.value();
-    }, ...(ngDevMode ? [{ debugName: "initialRange" }] : []));
     overlay = inject(Overlay);
     viewContainerRef = inject(ViewContainerRef);
+    injector = inject(Injector);
     ngOnInit() {
         // Initialize display values
         this.updateDisplayValues();
     }
     ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
         this.close();
     }
     // ControlValueAccessor implementation
@@ -14947,8 +15722,9 @@ class TnDateRangeInputComponent {
             if (this.endYearRef()?.nativeElement) {
                 this.endYearRef().nativeElement.value = '';
             }
-            // Focus end month for next selection
-            setTimeout(() => this.endMonthRef()?.nativeElement?.focus(), 0);
+            // Move to the end date once the cleared segments have been painted. Tied to the
+            // render rather than to a zero timeout, as the calendar's own focus handling is.
+            afterNextRender(() => this.endMonthRef()?.nativeElement?.focus(), { injector: this.injector });
         }
         else if (range.start && range.end) {
             // Both dates selected - close calendar
@@ -15108,11 +15884,8 @@ class TnDateRangeInputComponent {
         }
         this.createOverlay();
         this.isOpen.set(true);
-        // Reset calendar interaction state when opening
-        const cal = this.calendar();
-        if (cal) {
-            setTimeout(() => cal.resetInteractionState(), 0);
-        }
+        // No calendar state to reset — the calendar renders whatever range this component
+        // binds to it, so reopening already shows the current value.
     }
     close() {
         if (this.overlayRef) {
@@ -15169,6 +15942,8 @@ class TnDateRangeInputComponent {
             panelClass: 'tn-datepicker-overlay'
         });
         // Close datepicker when backdrop is clicked
+        // No teardown to track: `dispose()` in close() ends this subscription with the
+        // overlay, and ngOnDestroy closes.
         this.overlayRef.backdropClick().subscribe(() => {
             this.close();
         });
@@ -15182,7 +15957,7 @@ class TnDateRangeInputComponent {
                 useExisting: forwardRef(() => TnDateRangeInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "startMonthRef", first: true, predicate: ["startMonthInput"], descendants: true, isSignal: true }, { propertyName: "startDayRef", first: true, predicate: ["startDayInput"], descendants: true, isSignal: true }, { propertyName: "startYearRef", first: true, predicate: ["startYearInput"], descendants: true, isSignal: true }, { propertyName: "endMonthRef", first: true, predicate: ["endMonthInput"], descendants: true, isSignal: true }, { propertyName: "endDayRef", first: true, predicate: ["endDayInput"], descendants: true, isSignal: true }, { propertyName: "endYearRef", first: true, predicate: ["endYearInput"], descendants: true, isSignal: true }, { propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }, { propertyName: "calendar", first: true, predicate: TnCalendarComponent, descendants: true, isSignal: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-date-range-container\" tnTestIdType=\"date-range\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-range-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Start date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #startMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'month')\"\n        (blur)=\"onSegmentBlur('start', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'day')\"\n        (blur)=\"onSegmentBlur('start', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'year')\"\n        (blur)=\"onSegmentBlur('start', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'year')\">\n    </div>\n\n    <span class=\"tn-date-range-separator\">\u2013</span>\n\n    <!-- End date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #endMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'month')\"\n        (blur)=\"onSegmentBlur('end', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'day')\"\n        (blur)=\"onSegmentBlur('end', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'year')\"\n        (blur)=\"onSegmentBlur('end', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-range-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"true\"\n      [selectedRange]=\"initialRange()\"\n      (selectedRangeChange)=\"onRangeSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-range-container{position:relative;display:flex;align-items:center}.tn-date-range-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-range-separator{padding:0 .25em;-webkit-user-select:none;user-select:none;color:var(--tn-fg2, #666);flex-shrink:0}.tn-date-range-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-range-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-range-toggle:disabled{cursor:not-allowed;opacity:.5}:host ::ng-deep .tn-datepicker-overlay .tn-calendar{background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;min-width:380px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}:host ::ng-deep .tn-datepicker-overlay .tn-calendar .tn-calendar-content{padding:0}\n"], dependencies: [{ kind: "component", type: TnCalendarComponent, selector: "tn-calendar", inputs: ["startView", "selected", "minDate", "maxDate", "dateFilter", "rangeMode", "selectedRange"], outputs: ["selectedChange", "activeDateChange", "viewChanged", "selectedRangeChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
+        ], viewQueries: [{ propertyName: "startMonthRef", first: true, predicate: ["startMonthInput"], descendants: true, isSignal: true }, { propertyName: "startDayRef", first: true, predicate: ["startDayInput"], descendants: true, isSignal: true }, { propertyName: "startYearRef", first: true, predicate: ["startYearInput"], descendants: true, isSignal: true }, { propertyName: "endMonthRef", first: true, predicate: ["endMonthInput"], descendants: true, isSignal: true }, { propertyName: "endDayRef", first: true, predicate: ["endDayInput"], descendants: true, isSignal: true }, { propertyName: "endYearRef", first: true, predicate: ["endYearInput"], descendants: true, isSignal: true }, { propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-date-range-container\" tnTestIdType=\"date-range\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-range-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Start date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #startMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'month')\"\n        (blur)=\"onSegmentBlur('start', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'day')\"\n        (blur)=\"onSegmentBlur('start', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'year')\"\n        (blur)=\"onSegmentBlur('start', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'year')\">\n    </div>\n\n    <span class=\"tn-date-range-separator\">\u2013</span>\n\n    <!-- End date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #endMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'month')\"\n        (blur)=\"onSegmentBlur('end', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'day')\"\n        (blur)=\"onSegmentBlur('end', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'year')\"\n        (blur)=\"onSegmentBlur('end', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-range-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"true\"\n      [selectedRange]=\"value()\"\n      (selectedRangeChange)=\"onRangeSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-range-container{position:relative;display:flex;align-items:center}.tn-date-range-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-range-separator{padding:0 .25em;-webkit-user-select:none;user-select:none;color:var(--tn-fg2, #666);flex-shrink:0}.tn-date-range-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-range-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-range-toggle:disabled{cursor:not-allowed;opacity:.5}:host ::ng-deep .tn-datepicker-overlay .tn-calendar{background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;min-width:380px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}:host ::ng-deep .tn-datepicker-overlay .tn-calendar .tn-calendar-content{padding:0}\n"], dependencies: [{ kind: "component", type: TnCalendarComponent, selector: "tn-calendar", inputs: ["startView", "selected", "minDate", "maxDate", "dateFilter", "markedDates", "activeDate", "locale", "rangeMode", "selectedRange"], outputs: ["selectedChange", "activeDateChange", "viewChanged", "selectedRangeChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnDateRangeInputComponent, decorators: [{
             type: Component,
@@ -15194,8 +15969,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         }
                     ], host: {
                         'class': 'tn-date-range-input'
-                    }, template: "<div class=\"tn-date-range-container\" tnTestIdType=\"date-range\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-range-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Start date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #startMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'month')\"\n        (blur)=\"onSegmentBlur('start', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'day')\"\n        (blur)=\"onSegmentBlur('start', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'year')\"\n        (blur)=\"onSegmentBlur('start', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'year')\">\n    </div>\n\n    <span class=\"tn-date-range-separator\">\u2013</span>\n\n    <!-- End date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #endMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'month')\"\n        (blur)=\"onSegmentBlur('end', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'day')\"\n        (blur)=\"onSegmentBlur('end', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'year')\"\n        (blur)=\"onSegmentBlur('end', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-range-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"true\"\n      [selectedRange]=\"initialRange()\"\n      (selectedRangeChange)=\"onRangeSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-range-container{position:relative;display:flex;align-items:center}.tn-date-range-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-range-separator{padding:0 .25em;-webkit-user-select:none;user-select:none;color:var(--tn-fg2, #666);flex-shrink:0}.tn-date-range-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-range-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-range-toggle:disabled{cursor:not-allowed;opacity:.5}:host ::ng-deep .tn-datepicker-overlay .tn-calendar{background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;min-width:380px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}:host ::ng-deep .tn-datepicker-overlay .tn-calendar .tn-calendar-content{padding:0}\n"] }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], startMonthRef: [{ type: i0.ViewChild, args: ['startMonthInput', { isSignal: true }] }], startDayRef: [{ type: i0.ViewChild, args: ['startDayInput', { isSignal: true }] }], startYearRef: [{ type: i0.ViewChild, args: ['startYearInput', { isSignal: true }] }], endMonthRef: [{ type: i0.ViewChild, args: ['endMonthInput', { isSignal: true }] }], endDayRef: [{ type: i0.ViewChild, args: ['endDayInput', { isSignal: true }] }], endYearRef: [{ type: i0.ViewChild, args: ['endYearInput', { isSignal: true }] }], calendarTemplate: [{ type: i0.ViewChild, args: ['calendarTemplate', { isSignal: true }] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TnCalendarComponent), { isSignal: true }] }], wrapperEl: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }] } });
+                    }, template: "<div class=\"tn-date-range-container\" tnTestIdType=\"date-range\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-range-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Start date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #startMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'month')\"\n        (blur)=\"onSegmentBlur('start', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'day')\"\n        (blur)=\"onSegmentBlur('start', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'year')\"\n        (blur)=\"onSegmentBlur('start', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'year')\">\n    </div>\n\n    <span class=\"tn-date-range-separator\">\u2013</span>\n\n    <!-- End date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #endMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'month')\"\n        (blur)=\"onSegmentBlur('end', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'day')\"\n        (blur)=\"onSegmentBlur('end', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'year')\"\n        (blur)=\"onSegmentBlur('end', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-range-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"true\"\n      [selectedRange]=\"value()\"\n      (selectedRangeChange)=\"onRangeSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-range-container{position:relative;display:flex;align-items:center}.tn-date-range-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-range-separator{padding:0 .25em;-webkit-user-select:none;user-select:none;color:var(--tn-fg2, #666);flex-shrink:0}.tn-date-range-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-range-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-range-toggle:disabled{cursor:not-allowed;opacity:.5}:host ::ng-deep .tn-datepicker-overlay .tn-calendar{background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;min-width:380px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}:host ::ng-deep .tn-datepicker-overlay .tn-calendar .tn-calendar-content{padding:0}\n"] }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], startMonthRef: [{ type: i0.ViewChild, args: ['startMonthInput', { isSignal: true }] }], startDayRef: [{ type: i0.ViewChild, args: ['startDayInput', { isSignal: true }] }], startYearRef: [{ type: i0.ViewChild, args: ['startYearInput', { isSignal: true }] }], endMonthRef: [{ type: i0.ViewChild, args: ['endMonthInput', { isSignal: true }] }], endDayRef: [{ type: i0.ViewChild, args: ['endDayInput', { isSignal: true }] }], endYearRef: [{ type: i0.ViewChild, args: ['endYearInput', { isSignal: true }] }], calendarTemplate: [{ type: i0.ViewChild, args: ['calendarTemplate', { isSignal: true }] }], wrapperEl: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }] } });
 
 /**
  * Harness for interacting with `tn-date-range-input` in tests.
@@ -18948,14 +19723,15 @@ var TnToastPosition;
     TnToastPosition["Bottom"] = "bottom";
 })(TnToastPosition || (TnToastPosition = {}));
 
-// Material icons render via the `material-icons` CSS font (see icon.component.ts),
-// so they don't need sprite scanning — the literal `mat-` prefix matches what
-// the runtime icon resolver would produce from a Material library name.
+// The sprite generator only sees icon names in templates and in `tnIconMarker()` calls.
+// These live in a map, so without the marker they'd be dropped from the sprite on the
+// next regeneration — and there is no `material-icons` font in this library to fall
+// back to, so the toast would render an empty icon.
 const TOAST_ICONS = {
-    [TnToastType.Info]: 'mat-info',
-    [TnToastType.Success]: 'mat-check_circle',
-    [TnToastType.Warning]: 'mat-warning',
-    [TnToastType.Error]: 'mat-error',
+    [TnToastType.Info]: tnIconMarker('info', 'material'),
+    [TnToastType.Success]: tnIconMarker('check_circle', 'material'),
+    [TnToastType.Warning]: tnIconMarker('warning', 'material'),
+    [TnToastType.Error]: tnIconMarker('error', 'material'),
 };
 class TnToastComponent {
     message = signal('', ...(ngDevMode ? [{ debugName: "message" }] : []));
@@ -19792,5 +20568,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, THEME_MAP, THEME_STORAGE_KEY, TN_FORM_FIELD_CONTEXT, TN_FORM_FIELD_ERRORS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerHarness, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeDataSource, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeHarness, TnTreeNodeComponent, TnTreeNodeHarness, TnTreeNodeOutletDirective, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, allowsCurrentDirectorySelection, composeTestId, controlTestId, createFlatTreeControl, createLucideLibrary, createNestedTreeControl, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, getSelectableTypes, injectTnFormFieldAria, isPathWithinRoot, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, normalizeRootPath, optionTestId, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, THEME_MAP, THEME_STORAGE_KEY, TN_CALENDAR_INTL, TN_CALENDAR_INTL_DEFAULTS, TN_FORM_FIELD_CONTEXT, TN_FORM_FIELD_ERRORS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarCellHarness, TnCalendarComponent, TnCalendarHarness, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerHarness, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeDataSource, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeHarness, TnTreeNodeComponent, TnTreeNodeHarness, TnTreeNodeOutletDirective, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, allowsCurrentDirectorySelection, composeTestId, controlTestId, createFlatTreeControl, createLucideLibrary, createNestedTreeControl, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, getSelectableTypes, injectTnCalendarIntl, injectTnFormFieldAria, isPathWithinRoot, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, normalizeRootPath, optionTestId, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
 //# sourceMappingURL=truenas-ui-components.mjs.map