@truenas/ui-components 0.4.4 → 0.4.6

package/types/truenas-ui-components.d.ts

@@ -2,7 +2,7 @@ import * as _truenas_ui_components from '@truenas/ui-components';
 import * as _angular_core from '@angular/core';
 import { Signal, InjectionToken, Renderer2, OnDestroy, ElementRef, AfterViewInit, OnInit, TemplateRef, AfterContentInit, Provider, ChangeDetectorRef, TrackByFunction, OnChanges, DoCheck, SimpleChanges, PipeTransform, ViewContainerRef, AfterViewChecked, ComponentRef } from '@angular/core';
 import { ControlValueAccessor, NgControl, AbstractControl } from '@angular/forms';
-import { ComponentHarness, BaseHarnessFilters, HarnessPredicate, TestKey, HarnessLoader } from '@angular/cdk/testing';
+import { ComponentHarness, BaseHarnessFilters, HarnessPredicate, TestKey, HarnessLoader, ModifierKeys as ModifierKeys$1 } from '@angular/cdk/testing';
 import { SafeHtml, SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
 import { ComponentFixture } from '@angular/core/testing';
 import { SelectionModel, DataSource, CollectionViewer } from '@angular/cdk/collections';
@@ -1254,6 +1254,11 @@ declare class TnButtonComponent implements AfterViewInit {
      */
     iconPosition: _angular_core.InputSignal<"left" | "right">;
     disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Stretches the button to the full width of its container instead of
+     * shrink-wrapping the label. Use for buttons that head or foot a form column.
+     */
+    fullWidth: _angular_core.InputSignal<boolean>;
     /**
      * Native `type` of the rendered `<button>`. Defaults to `button` so stray
      * clicks never submit an enclosing form. Set to `submit` for a form's save
@@ -1298,7 +1303,7 @@ declare class TnButtonComponent implements AfterViewInit {
     private innerRef;
     ngAfterViewInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnButtonComponent, "tn-button", never, { "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "queryParams": { "alias": "queryParams"; "required": false; "isSignal": true; }; "fragment": { "alias": "fragment"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "rel": { "alias": "rel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnButtonComponent, "tn-button", never, { "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "queryParams": { "alias": "queryParams"; "required": false; "isSignal": true; }; "fragment": { "alias": "fragment"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "rel": { "alias": "rel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, never, true, never>;
 }
 
 /**
@@ -3791,6 +3796,12 @@ declare class TnSlideToggleComponent implements AfterViewInit, OnDestroy, Contro
     toggleEl: _angular_core.Signal<ElementRef<HTMLInputElement>>;
     labelPosition: _angular_core.InputSignal<"before" | "after">;
     label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Stretches the toggle to the full width of its container and pushes the label
+     * and the track to opposite ends of the row, instead of shrink-wrapping them
+     * side by side. Use for settings rows and option lists.
+     */
+    fullWidth: _angular_core.InputSignal<boolean>;
     disabled: _angular_core.InputSignal<boolean>;
     required: _angular_core.InputSignal<boolean>;
     color: _angular_core.InputSignal<SlideToggleColor>;
@@ -3821,7 +3832,7 @@ declare class TnSlideToggleComponent implements AfterViewInit, OnDestroy, Contro
     classes: _angular_core.Signal<string[]>;
     effectiveAriaLabel: _angular_core.Signal<string | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnSlideToggleComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnSlideToggleComponent, "tn-slide-toggle", never, { "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnSlideToggleComponent, "tn-slide-toggle", never, { "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, never, true, never>;
 }
 
 /**
@@ -5728,22 +5739,56 @@ declare class TnListComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnListComponent, "tn-list", never, { "dense": { "alias": "dense"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-declare class TnListItemComponent implements AfterContentInit {
+/**
+ * A single row of a `tn-list`.
+ *
+ * **The content directives must be imported by the component that declares the
+ * row.** Every slot but the primary text is rendered only when a matching
+ * directive *instance* is found, and directives apply only in the template that
+ * declares them — importing `TnListItemComponent` alone does not bring them
+ * into scope. Write `<span tnListIcon>` without `TnListIconDirective` in that
+ * component's `imports` and the attribute is inert: no instance, so the leading
+ * slot never renders and the icon silently disappears. The same holds for
+ * `[tnListAvatar]`, `[tnListItemLine]`, `[tnListItemSecondary]` and
+ * `[tnListItemTrailing]`. Import them alongside the component:
+ *
+ * ```ts
+ * import {
+ *   TnListItemComponent,
+ *   TnListIconDirective,
+ *   TnListItemLineDirective,
+ *   TnListItemTrailingDirective,
+ * } from '@truenas/ui-components';
+ * ```
+ *
+ * The primary-text slot is the deliberate exception — it has no gate, so
+ * `[tnListItemTitle]` and `[tnListItemPrimary]` render either way. See the
+ * comment in `list-item.component.html` for why the asymmetry is there.
+ */
+declare class TnListItemComponent {
     disabled: _angular_core.InputSignal<boolean>;
     clickable: _angular_core.InputSignal<boolean>;
+    /** Compact row: smaller minimum height and tighter vertical padding. */
+    dense: _angular_core.InputSignal<boolean>;
+    /**
+     * Lets the primary and secondary text wrap onto multiple lines instead of
+     * being truncated with an ellipsis. Use for rows whose content is a path, a
+     * sentence, or anything else that should stay fully readable.
+     */
+    wrap: _angular_core.InputSignal<boolean>;
     itemClick: _angular_core.OutputEmitterRef<Event>;
-    protected hasLeadingContent: _angular_core.WritableSignal<boolean>;
-    protected hasSecondaryTextContent: _angular_core.WritableSignal<boolean>;
-    protected hasTrailingContent: _angular_core.WritableSignal<boolean>;
-    protected hasPrimaryTextDirective: _angular_core.WritableSignal<boolean>;
-    private elementRef;
-    ngAfterContentInit(): void;
-    private checkContentProjection;
+    private leadingIcons;
+    private leadingAvatars;
+    private secondaryLines;
+    private secondaryTexts;
+    private trailing;
+    protected hasLeadingContent: _angular_core.Signal<boolean>;
+    protected hasTrailingContent: _angular_core.Signal<boolean>;
     hasSecondaryText: _angular_core.Signal<boolean>;
     hasThirdText: _angular_core.Signal<boolean>;
     onClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnListItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnListItemComponent, "tn-list-item", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, ["[tnListIcon], [tnListAvatar]", "[tnListItemTitle], [tnListItemPrimary]", "*", "[tnListItemLine], [tnListItemSecondary]", "[tnListItemTrailing]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnListItemComponent, "tn-list-item", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "dense": { "alias": "dense"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, ["leadingIcons", "leadingAvatars", "secondaryLines", "secondaryTexts", "trailing"], ["[tnListIcon], [tnListAvatar]", "[tnListItemTitle], [tnListItemPrimary]", "*", "[tnListItemLine], [tnListItemSecondary]", "[tnListItemTrailing]"], true, never>;
 }
 
 declare class TnListSubheaderComponent {
@@ -5752,30 +5797,66 @@ declare class TnListSubheaderComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnListSubheaderComponent, "tn-list-subheader", never, { "inset": { "alias": "inset"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+/**
+ * Leading icon of a list row.
+ *
+ * Requires importing `TnListIconDirective`, or the leading slot never renders.
+ */
 declare class TnListIconDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnListIconDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnListIconDirective, "[tnListIcon]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Leading avatar of a list row.
+ *
+ * Requires importing `TnListAvatarDirective`, or the leading slot never renders.
+ */
 declare class TnListAvatarDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnListAvatarDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnListAvatarDirective, "[tnListAvatar]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Primary text of a list row. Projects whether or not this directive is
+ * imported — the primary slot is ungated — but import it for the styling.
+ */
 declare class TnListItemTitleDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnListItemTitleDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnListItemTitleDirective, "[tnListItemTitle]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Secondary line of a list row. Two or more make the row three-line.
+ *
+ * Requires importing `TnListItemLineDirective`, or the secondary slot never
+ * renders and the row is not marked as multi-line.
+ */
 declare class TnListItemLineDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnListItemLineDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnListItemLineDirective, "[tnListItemLine]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Primary text of a list row. Projects whether or not this directive is
+ * imported — the primary slot is ungated — but import it for the styling.
+ */
 declare class TnListItemPrimaryDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnListItemPrimaryDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnListItemPrimaryDirective, "[tnListItemPrimary]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Secondary text of a list row.
+ *
+ * Requires importing `TnListItemSecondaryDirective`, or the secondary slot
+ * never renders and the row is not marked as multi-line.
+ */
 declare class TnListItemSecondaryDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnListItemSecondaryDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnListItemSecondaryDirective, "[tnListItemSecondary]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Trailing content of a list row — a control, a badge, a chevron.
+ *
+ * Requires importing `TnListItemTrailingDirective`, or the trailing slot never
+ * renders.
+ */
 declare class TnListItemTrailingDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnListItemTrailingDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnListItemTrailingDirective, "[tnListItemTrailing]", never, {}, {}, never, never, true, never>;
@@ -7601,9 +7682,7 @@ declare class TnDateRangeInputComponent implements ControlValueAccessor, OnInit,
     endDayRef: _angular_core.Signal<ElementRef<HTMLInputElement>>;
     endYearRef: _angular_core.Signal<ElementRef<HTMLInputElement>>;
     calendarTemplate: _angular_core.Signal<TemplateRef<unknown>>;
-    calendar: _angular_core.Signal<TnCalendarComponent>;
     wrapperEl: _angular_core.Signal<ElementRef<HTMLDivElement>>;
-    private destroy$;
     private overlayRef?;
     private portal?;
     isOpen: _angular_core.WritableSignal<boolean>;
@@ -7617,9 +7696,9 @@ declare class TnDateRangeInputComponent implements ControlValueAccessor, OnInit,
     endDay: _angular_core.WritableSignal<string>;
     endYear: _angular_core.WritableSignal<string>;
     private currentFocus;
-    initialRange: _angular_core.Signal<DateRange>;
     private overlay;
     private viewContainerRef;
+    private injector;
     ngOnInit(): void;
     ngOnDestroy(): void;
     writeValue(value: DateRange): void;
@@ -7649,60 +7728,473 @@ declare class TnCalendarComponent implements OnInit {
     minDate: _angular_core.InputSignal<Date | undefined>;
     maxDate: _angular_core.InputSignal<Date | undefined>;
     dateFilter: _angular_core.InputSignal<((date: Date) => boolean) | undefined>;
+    /**
+     * 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: _angular_core.InputSignal<Date[] | undefined>;
+    /**
+     * 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: _angular_core.InputSignal<Date | undefined>;
+    /**
+     * 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: _angular_core.InputSignal<string | undefined>;
+    private appLocale;
+    private host;
+    private injector;
+    /** The locale actually in force: the input when bound, the app's otherwise. */
+    protected resolvedLocale: _angular_core.Signal<string>;
     rangeMode: _angular_core.InputSignal<boolean>;
     selectedRange: _angular_core.InputSignal<DateRange | undefined>;
     selectedChange: _angular_core.OutputEmitterRef<Date>;
+    /**
+     * 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: _angular_core.OutputEmitterRef<Date>;
     viewChanged: _angular_core.OutputEmitterRef<"month" | "year">;
     selectedRangeChange: _angular_core.OutputEmitterRef<DateRange>;
+    /**
+     * 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: _angular_core.WritableSignal<Date>;
     currentView: _angular_core.WritableSignal<"month" | "year">;
-    rangeState: _angular_core.WritableSignal<{
-        start: Date | null;
-        end: Date | null;
-        selecting: "start" | "end";
-    }>;
-    private userHasInteracted;
-    constructor();
     ngOnInit(): void;
-    private initializeRangeState;
-    onMonthSelected(month: number): void;
-    onYearSelected(year: number): void;
     onViewChanged(view: 'month' | 'year'): void;
     onPreviousClicked(): void;
     onNextClicked(): void;
+    /**
+     * 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.
+     */
+    private page;
     onSelectedChange(date: Date): void;
+    /**
+     * 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.
+     */
     private handleRangeSelection;
     onActiveDateChange(date: Date): void;
-    onYearSelectedFromView(date: Date): void;
     /**
-     * Reset the calendar to accept external range values - called when calendar reopens
+     * 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.
      */
-    resetInteractionState(): void;
+    onYearSelectedFromView(date: Date): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnCalendarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnCalendarComponent, "tn-calendar", never, { "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "rangeMode": { "alias": "rangeMode"; "required": false; "isSignal": true; }; "selectedRange": { "alias": "selectedRange"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; "viewChanged": "viewChanged"; "selectedRangeChange": "selectedRangeChange"; }, never, never, true, [{ directive: typeof TnTestIdDirective; inputs: { "tnTestId": "testId"; }; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnCalendarComponent, "tn-calendar", never, { "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "markedDates": { "alias": "markedDates"; "required": false; "isSignal": true; }; "activeDate": { "alias": "activeDate"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "rangeMode": { "alias": "rangeMode"; "required": false; "isSignal": true; }; "selectedRange": { "alias": "selectedRange"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; "viewChanged": "viewChanged"; "selectedRangeChange": "selectedRangeChange"; }, never, never, true, [{ directive: typeof TnTestIdDirective; inputs: { "tnTestId": "testId"; }; outputs: {}; }]>;
+}
+
+/** The views `tn-calendar` can show. */
+type TnCalendarView = 'month' | 'year';
+/** A set of criteria that can be used to filter a list of calendar instances. */
+type CalendarHarnessFilters = BaseHarnessFilters;
+/** A set of criteria that can be used to filter a list of calendar cell instances. */
+interface CalendarCellHarnessFilters extends BaseHarnessFilters {
+    /**
+     * Filters based on the text of the cell — as rendered, so formatted for the app's
+     * locale right down to the numerals. `'14'` finds nothing in a calendar showing
+     * `١٤`. Prefer `date` (or `year`) unless the rendered text is what you mean to assert.
+     */
+    text?: string | RegExp;
+    /**
+     * Filters day cells by the calendar day they represent, whatever the locale renders.
+     * Time of day is ignored.
+     */
+    date?: Date;
+    /** Filters year cells by the year they represent, whatever the locale renders. */
+    year?: number;
+    /** Filters based on whether the cell is selected. */
+    selected?: boolean;
+    /** Filters based on whether the cell is activated using keyboard navigation. */
+    active?: boolean;
+    /** Filters based on whether the cell is disabled. */
+    disabled?: boolean;
+    /** Filters based on whether the cell represents today's date. */
+    today?: boolean;
+    /** Filters based on whether the cell is inside of the selected range. */
+    inRange?: boolean;
+    /** Filters based on whether the cell was flagged through `markedDates`. */
+    marked?: boolean;
+}
+/**
+ * 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);
+ * ```
+ */
+declare class TnCalendarCellHarness extends ComponentHarness {
+    /** The selector for a calendar cell. Padding cells render no button, so only real days match. */
+    static hostSelector: string;
+    private _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?: CalendarCellHarnessFilters): HarnessPredicate<TnCalendarCellHarness>;
+    /** Gets the text of the calendar cell. */
+    getText(): Promise<string>;
+    /** Gets the aria-label of the calendar cell. */
+    getAriaLabel(): Promise<string>;
+    /**
+     * 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.
+     */
+    getDate(): Promise<Date | null>;
+    /**
+     * Gets the year this cell represents, independent of how it is rendered. Works on year
+     * cells; `null` on a day cell.
+     */
+    getYear(): Promise<number | null>;
+    /** The raw `YYYY-MM-DD` stamp, for comparing without rebuilding a `Date`. */
+    protected getDateStamp(): Promise<string | null>;
+    /** Whether the cell is selected. */
+    isSelected(): Promise<boolean>;
+    /** Whether the cell is disabled. */
+    isDisabled(): Promise<boolean>;
+    /**
+     * 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.
+     */
+    isActive(): Promise<boolean>;
+    /** Whether the cell represents today's date. */
+    isToday(): Promise<boolean>;
+    /** Whether the cell was flagged through the calendar's `markedDates` input. */
+    isMarked(): Promise<boolean>;
+    /** Whether the cell is the start of the selected range. */
+    isRangeStart(): Promise<boolean>;
+    /** Whether the cell is the end of the selected range. */
+    isRangeEnd(): Promise<boolean>;
+    /**
+     * Whether the cell is part of the selected range, ends included — matching Material's
+     * `isInRange()`. Use `isRangeStart()`/`isRangeEnd()` to single out the ends.
+     */
+    isInRange(): Promise<boolean>;
+    /** Selects the calendar cell. Won't do anything if the cell is disabled. */
+    select(): Promise<void>;
+    /**
+     * 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
+     * ```
+     */
+    press(key: TestKey | string, modifiers?: ModifierKeys$1): Promise<void>;
+    /** Hovers over the calendar cell. */
+    hover(): Promise<void>;
+    /** Moves the mouse away from the calendar cell. */
+    mouseAway(): Promise<void>;
+    /** Focuses the calendar cell. */
+    focus(): Promise<void>;
+    /** Removes focus from the calendar cell. */
+    blur(): Promise<void>;
+}
+/**
+ * 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) });
+ * ```
+ */
+declare class TnCalendarHarness extends ComponentHarness {
+    /** The selector for the host element of a `TnCalendarComponent` instance. */
+    static hostSelector: string;
+    private _periodButton;
+    private _previousButton;
+    private _nextButton;
+    private _monthView;
+    /**
+     * 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?: CalendarHarnessFilters): HarnessPredicate<TnCalendarHarness>;
+    /**
+     * 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.
+     */
+    getCells(filter?: CalendarCellHarnessFilters): Promise<TnCalendarCellHarness[]>;
+    /** Gets the current view that is being shown inside the calendar. */
+    getCurrentView(): Promise<TnCalendarView>;
+    /** Gets the label of the current calendar view, e.g. `'MAR 2022'`. */
+    getCurrentViewLabel(): Promise<string>;
+    /** Changes the calendar view by clicking on the view toggle button. */
+    changeView(): Promise<void>;
+    /** Goes to the next page of the current view (e.g. next month when inside the month view). */
+    next(): Promise<void>;
+    /** Goes to the previous page of the current view (e.g. previous month in the month view). */
+    previous(): Promise<void>;
+    /**
+     * 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.
+     */
+    selectCell(filter?: CalendarCellHarnessFilters): Promise<void>;
+    /**
+     * 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.
+     */
+    getActiveCell(): Promise<TnCalendarCellHarness | 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');
+     * ```
+     */
+    moveActiveCell(key: TestKey | string, modifiers?: ModifierKeys$1): Promise<void>;
 }
 
+/**
+ * The calendar's user-facing wording.
+ *
+ * Dates, month and weekday names and the first day of the week all come from the
+ * locale, so they need no translation here — `Intl` already knows them. What is left is
+ * prose: the state suffixes screen readers read out, and the names of the header
+ * buttons. Those are the strings this carries.
+ */
+interface TnCalendarIntl {
+    /** Appended to a day flagged through `markedDates`. */
+    marked: string;
+    /** Appended to the first day of the selected range. */
+    rangeStart: string;
+    /** Appended to the last day of the selected range. */
+    rangeEnd: string;
+    /** Appended to the days between the ends of the selected range. */
+    inRange: string;
+    /** Appended to the year cell for the current year. */
+    currentYear: string;
+    /** Accessible name for the day grid, given the month and year already formatted. */
+    monthGridLabel: (period: string) => string;
+    /** Accessible name for the year grid, given the span of years it shows. */
+    yearGridLabel: (startYear: number, endYear: number) => string;
+    /** Accessible name for the button that switches between the day and year grids. */
+    chooseMonthAndYear: string;
+    /** Accessible name for the back button in the day grid. */
+    previousMonth: string;
+    /** Accessible name for the forward button in the day grid. */
+    nextMonth: string;
+    /** Accessible name for the back button in the year grid. */
+    previousYears: string;
+    /** Accessible name for the forward button in the year grid. */
+    nextYears: string;
+}
+/** The wording used when an app provides none of its own. */
+declare const TN_CALENDAR_INTL_DEFAULTS: TnCalendarIntl;
+/**
+ * What an app may provide for {@link TN_CALENDAR_INTL}: the wording itself, or a signal
+ * carrying it. Provide the signal form when the language can change while the app is
+ * running — a plain object is read once and never again, so every open calendar would
+ * keep the wording it was built with.
+ */
+type TnCalendarIntlInput = Partial<TnCalendarIntl> | Signal<Partial<TnCalendarIntl>>;
+/**
+ * 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') };
+ *       });
+ *     },
+ *   },
+ * ];
+ * ```
+ */
+declare const TN_CALENDAR_INTL: InjectionToken<TnCalendarIntlInput>;
+/**
+ * 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.
+ */
+declare function injectTnCalendarIntl(): Signal<TnCalendarIntl>;
+
 declare class TnCalendarHeaderComponent {
     currentDate: _angular_core.InputSignal<Date>;
     currentView: _angular_core.InputSignal<"month" | "year">;
-    monthSelected: _angular_core.OutputEmitterRef<number>;
-    yearSelected: _angular_core.OutputEmitterRef<number>;
+    /**
+     * Locale for the month abbreviation. Falls back to the app's `LOCALE_ID`;
+     * `tn-calendar` binds it from its own `locale` input.
+     */
+    locale: _angular_core.InputSignal<string | undefined>;
     viewChanged: _angular_core.OutputEmitterRef<"month" | "year">;
     previousClicked: _angular_core.OutputEmitterRef<void>;
     nextClicked: _angular_core.OutputEmitterRef<void>;
-    private months;
+    private appLocale;
+    private intl;
+    private 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: string;
     periodLabel: _angular_core.Signal<string>;
-    previousLabel: _angular_core.Signal<"Previous month" | "Previous 24 years">;
-    nextLabel: _angular_core.Signal<"Next month" | "Next 24 years">;
+    previousLabel: _angular_core.Signal<string>;
+    nextLabel: _angular_core.Signal<string>;
+    periodButtonLabel: _angular_core.Signal<string>;
     toggleView(): void;
     onPreviousClick(): void;
     onNextClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnCalendarHeaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnCalendarHeaderComponent, "tn-calendar-header", never, { "currentDate": { "alias": "currentDate"; "required": false; "isSignal": true; }; "currentView": { "alias": "currentView"; "required": false; "isSignal": true; }; }, { "monthSelected": "monthSelected"; "yearSelected": "yearSelected"; "viewChanged": "viewChanged"; "previousClicked": "previousClicked"; "nextClicked": "nextClicked"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnCalendarHeaderComponent, "tn-calendar-header", never, { "currentDate": { "alias": "currentDate"; "required": false; "isSignal": true; }; "currentView": { "alias": "currentView"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; }, { "viewChanged": "viewChanged"; "previousClicked": "previousClicked"; "nextClicked": "nextClicked"; }, never, never, true, never>;
 }
 
+/**
+ * Which background the day indicator paints. Resolved to a single value per cell so
+ * the precedence is stated once, in one place, rather than emerging from the relative
+ * specificity of a handful of CSS rules.
+ */
+type CalendarCellFill = 'primary' | 'marked' | 'none';
 interface CalendarCell {
     value: number;
     date: Date;
@@ -7711,8 +8203,26 @@ interface CalendarCell {
     enabled: boolean;
     selected: boolean;
     today: boolean;
-    compareStart?: boolean;
-    compareEnd?: boolean;
+    /**
+     * `YYYY-MM-DD` for this day, rendered as `data-tn-date`. A handle that survives
+     * translation, for tests that would otherwise match on locale-formatted cell text.
+     */
+    isoDate: string;
+    /** Whether the date was listed in `markedDates`. */
+    marked: boolean;
+    /**
+     * Whether the day is part of what the caller has chosen — the selected date in
+     * single-date mode, or anywhere from the start to the end of the range in range mode.
+     * Drives `aria-pressed`, which otherwise had nothing to report in range mode.
+     */
+    inSelection: boolean;
+    /** Background for the day indicator: selection and range caps outrank marking. */
+    fill: CalendarCellFill;
+    /**
+     * Whether the indicator draws the today outline. Suppressed under a primary fill,
+     * where a primary border and primary text would disappear into the fill.
+     */
+    todayOutline: boolean;
     rangeStart?: boolean;
     rangeEnd?: boolean;
     inRange?: boolean;
@@ -7723,33 +8233,114 @@ declare class TnMonthViewComponent {
     minDate: _angular_core.InputSignal<Date | undefined>;
     maxDate: _angular_core.InputSignal<Date | undefined>;
     dateFilter: _angular_core.InputSignal<((date: Date) => boolean) | undefined>;
+    /**
+     * 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: _angular_core.InputSignal<Date[] | undefined>;
     rangeMode: _angular_core.InputSignal<boolean>;
-    selectedRange: _angular_core.InputSignal<{
-        start: Date | null;
-        end: Date | null;
-        selecting: "start" | "end";
-    } | undefined>;
+    selectedRange: _angular_core.InputSignal<DateRange | undefined>;
     selectedChange: _angular_core.OutputEmitterRef<Date>;
     activeDateChange: _angular_core.OutputEmitterRef<Date>;
-    readonly weekdays: {
+    /**
+     * 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: _angular_core.InputSignal<string | undefined>;
+    private host;
+    private injector;
+    private appLocale;
+    private intl;
+    private 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.
+     */
+    private weekStart;
+    /** Day numbers in the locale's own numerals, without a thousands separator. */
+    private 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.
+     */
+    readonly weekdays: _angular_core.Signal<{
         long: string;
         short: string;
-    }[];
+    }[]>;
+    private 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: _angular_core.Signal<string>;
+    /**
+     * 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: _angular_core.Signal<number | null>;
+    private activeCellDate;
     calendarRows: _angular_core.Signal<CalendarCell[][]>;
     private createCell;
     private createEmptyCell;
     private isDateEnabled;
-    private isSameDate;
+    /**
+     * 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.
+     */
     private formatAriaLabel;
     trackByDate(index: number, cell: CalendarCell): string;
     trackByRow(index: number): number;
     onCellClicked(cell: CalendarCell): void;
+    /**
+     * 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: KeyboardEvent): void;
+    /**
+     * 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.
+     */
+    private targetForKey;
+    /**
+     * 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".
+     */
+    private nearestEnabled;
+    /** Bounded, so an everything-disabled filter stops the move instead of spinning. */
+    private scanForEnabled;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnMonthViewComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnMonthViewComponent, "tn-month-view", never, { "activeDate": { "alias": "activeDate"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "rangeMode": { "alias": "rangeMode"; "required": false; "isSignal": true; }; "selectedRange": { "alias": "selectedRange"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnMonthViewComponent, "tn-month-view", never, { "activeDate": { "alias": "activeDate"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "markedDates": { "alias": "markedDates"; "required": false; "isSignal": true; }; "rangeMode": { "alias": "rangeMode"; "required": false; "isSignal": true; }; "selectedRange": { "alias": "selectedRange"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; }, never, never, true, never>;
 }
 
 interface YearCell {
-    value: number;
     year: number;
     label: string;
     ariaLabel: string;
@@ -7763,25 +8354,86 @@ declare class TnMultiYearViewComponent {
     minDate: _angular_core.InputSignal<Date | undefined>;
     maxDate: _angular_core.InputSignal<Date | undefined>;
     dateFilter: _angular_core.InputSignal<((date: Date) => boolean) | undefined>;
+    /**
+     * 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: _angular_core.InputSignal<string | undefined>;
     selectedChange: _angular_core.OutputEmitterRef<Date>;
     activeDateChange: _angular_core.OutputEmitterRef<Date>;
-    readonly cellWidth = 25;
-    readonly cellAspectRatio = 7.14286;
+    private host;
+    private injector;
+    private appLocale;
+    private intl;
+    /** Years read out in the locale's own numerals, without a thousands separator. */
+    private yearFormat;
     readonly yearsPerRow = 4;
-    readonly yearRowCount = 6;
+    readonly yearRowCount: number;
+    /**
+     * 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: _angular_core.Signal<{
         start: number;
         end: number;
     }>;
+    /**
+     * 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: _angular_core.Signal<string>;
     yearRows: _angular_core.Signal<YearCell[][]>;
+    /**
+     * 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: _angular_core.Signal<number | null>;
     private createYearCell;
     private isYearEnabled;
+    /**
+     * 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.
+     */
     private formatYearAriaLabel;
     trackByYear(index: number, cell: YearCell): number;
     trackByRow(index: number, row: YearCell[]): string;
     onYearClicked(cell: YearCell): void;
+    /**
+     * 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: KeyboardEvent): void;
+    /**
+     * 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.
+     */
+    private targetForKey;
+    /**
+     * 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".
+     */
+    private nearestEnabledYear;
+    /** Bounded, so an everything-disabled range stops the move instead of spinning. */
+    private scanForEnabledYear;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnMultiYearViewComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnMultiYearViewComponent, "tn-multi-year-view", never, { "activeDate": { "alias": "activeDate"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnMultiYearViewComponent, "tn-multi-year-view", never, { "activeDate": { "alias": "activeDate"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; }, never, never, true, never>;
 }
 
 declare class TnDateInputComponent implements ControlValueAccessor, OnInit, OnDestroy {
@@ -7803,9 +8455,7 @@ declare class TnDateInputComponent implements ControlValueAccessor, OnInit, OnDe
     dayRef: _angular_core.Signal<ElementRef<HTMLInputElement>>;
     yearRef: _angular_core.Signal<ElementRef<HTMLInputElement>>;
     calendarTemplate: _angular_core.Signal<TemplateRef<unknown>>;
-    calendar: _angular_core.Signal<TnCalendarComponent>;
     wrapperEl: _angular_core.Signal<ElementRef<HTMLDivElement>>;
-    private destroy$;
     private overlayRef?;
     private portal?;
     isOpen: _angular_core.WritableSignal<boolean>;
@@ -10289,5 +10939,5 @@ declare const TN_THEME_DEFINITIONS: readonly TnThemeDefinition[];
  */
 declare const THEME_MAP: Map<TnTheme, TnThemeDefinition>;
 
-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 type { AutocompleteHarnessFilters, BannerHarnessFilters, ButtonHarnessFilters, ButtonToggleHarnessFilters, CalendarCell, CheckboxHarnessFilters, ChipColor, ChipHarnessFilters, DateInputHarnessFilters, DateRange, DateRangeInputHarnessFilters, DialogHarnessFilters, EmptyHarnessFilters, ExpansionPanelHarnessFilters, FileInputHarnessFilters, FilePickerCallbacks, FilePickerCreateAction, FilePickerCreateActionEvent, FilePickerError, FilePickerHarnessFilters, FilePickerMode, FileSystemItem, FileSystemItemType, FlatTreeControlOptions, FormFieldHarnessFilters, FormSectionHarnessFilters, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelMarkupSegment, LabelMarkupSegmentType, LabelType, LucideIconOptions, MenuHarnessFilters, MockIconRegistry, MockSpriteLoader, NestedTreeControlOptions, PathSegment, PlatformType, ProgressBarMode, RadioHarnessFilters, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SizeStandard, SlideToggleColor, SlideToggleHarnessFilters, SpinnerMode, SpriteConfig, StepperHarnessFilters, SubscriptSizing, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnAutocompleteOption, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnChipInputHarnessFilters, TnChipInputOption, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnDrawerMode, TnDrawerPosition, TnEmptySize, TnFlatTreeNode, TnFormFieldAriaBindings, TnFormFieldContext, TnFormFieldErrorMessage, TnFormFieldErrorMessages, TnFormFieldErrorResolver, TnMenuItem, TnOptionTestIdSource, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnSortEvent, TnTableDataProvider, TnTableDataSource, TnTableHarnessFilters, TnTablePagerHarnessFilters, TnTablePagerLabels, TnTablePagination, TnTestAttrName, TnTestIdValue, TnThemeDefinition, TnToastCall, TnToastConfig, TnTreeExpansion, TnTreeHarnessFilters, TnTreeNodeHarnessFilters, TnTreeVirtualNodeData, TnTreeVirtualScrollViewHarnessFilters, TooltipPosition, YearCell };
+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 };
+export type { AutocompleteHarnessFilters, BannerHarnessFilters, ButtonHarnessFilters, ButtonToggleHarnessFilters, CalendarCell, CalendarCellFill, CalendarCellHarnessFilters, CalendarHarnessFilters, CheckboxHarnessFilters, ChipColor, ChipHarnessFilters, DateInputHarnessFilters, DateRange, DateRangeInputHarnessFilters, DialogHarnessFilters, EmptyHarnessFilters, ExpansionPanelHarnessFilters, FileInputHarnessFilters, FilePickerCallbacks, FilePickerCreateAction, FilePickerCreateActionEvent, FilePickerError, FilePickerHarnessFilters, FilePickerMode, FileSystemItem, FileSystemItemType, FlatTreeControlOptions, FormFieldHarnessFilters, FormSectionHarnessFilters, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelMarkupSegment, LabelMarkupSegmentType, LabelType, LucideIconOptions, MenuHarnessFilters, MockIconRegistry, MockSpriteLoader, NestedTreeControlOptions, PathSegment, PlatformType, ProgressBarMode, RadioHarnessFilters, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SizeStandard, SlideToggleColor, SlideToggleHarnessFilters, SpinnerMode, SpriteConfig, StepperHarnessFilters, SubscriptSizing, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnAutocompleteOption, TnBannerType, TnButtonToggleType, TnCalendarIntl, TnCalendarIntlInput, TnCalendarView, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnChipInputHarnessFilters, TnChipInputOption, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnDrawerMode, TnDrawerPosition, TnEmptySize, TnFlatTreeNode, TnFormFieldAriaBindings, TnFormFieldContext, TnFormFieldErrorMessage, TnFormFieldErrorMessages, TnFormFieldErrorResolver, TnMenuItem, TnOptionTestIdSource, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnSortEvent, TnTableDataProvider, TnTableDataSource, TnTableHarnessFilters, TnTablePagerHarnessFilters, TnTablePagerLabels, TnTablePagination, TnTestAttrName, TnTestIdValue, TnThemeDefinition, TnToastCall, TnToastConfig, TnTreeExpansion, TnTreeHarnessFilters, TnTreeNodeHarnessFilters, TnTreeVirtualNodeData, TnTreeVirtualScrollViewHarnessFilters, TooltipPosition, YearCell };