forty-cdk 0.2.0 → 0.3.0

package/fesm2022/forty-cdk-calendar.mjs

@@ -0,0 +1,2034 @@
+import * as i0 from '@angular/core';
+import { computed, InjectionToken, inject, signal, Injector, model, input, booleanAttribute, numberAttribute, linkedSignal, effect, afterNextRender, Directive, ElementRef, Injectable } from '@angular/core';
+import { compareDateOf, clampToBounds, Collection, createDefaults, IdGenerator, LiveAnnouncer, injectDateAdapter, injectTextDirection, adoptHostId, registerHandle, reflectDisabled, FOR_DATE_ADAPTER } from 'forty-cdk/core';
+export { FOR_DATE_ADAPTER, assertTimeCapable, injectDateAdapter } from 'forty-cdk/core';
+
+/**
+ * Owns every `[min, max]` bounds question a `ForCalendar` asks: whole-month /
+ * whole-year out-of-bounds checks, the prev / next-month disabled predicates,
+ * per-date availability, and the navigation clamp. Shared by the root and the
+ * day / month / year sub-grids so the bounds math lives in one place.
+ *
+ * Constructed directly (`new CalendarBounds(host)`); it holds no injection
+ * context, mirroring how `SegmentEditor` is lifted out of the date / time
+ * fields.
+ *
+ * @typeParam D The adapter's immutable date type.
+ */
+class CalendarBounds {
+    #host;
+    /** Whether the previous-month button should be disabled (bounded by `min`). */
+    isPreviousMonthDisabled = computed(() => {
+        const min = this.#host.min();
+        if (min === null) {
+            return false;
+        }
+        const adapter = this.#host.adapter;
+        const previousMonthLastDay = adapter.addDays(this.#host.visibleMonth(), -1);
+        return compareDateOf(adapter, previousMonthLastDay, min) < 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPreviousMonthDisabled" }] : /* istanbul ignore next */ []));
+    /** Whether the next-month button should be disabled (bounded by `max`). */
+    isNextMonthDisabled = computed(() => {
+        const max = this.#host.max();
+        if (max === null) {
+            return false;
+        }
+        const adapter = this.#host.adapter;
+        const nextMonthFirstDay = adapter.addMonths(this.#host.visibleMonth(), 1);
+        return compareDateOf(adapter, nextMonthFirstDay, max) > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isNextMonthDisabled" }] : /* istanbul ignore next */ []));
+    constructor(host) {
+        this.#host = host;
+    }
+    /** Whether every day of `month` (**1-12**) in `year` falls outside `[min, max]`. */
+    isMonthOutOfBounds(year, month) {
+        const adapter = this.#host.adapter;
+        const firstDay = adapter.createDate(year, month, 1);
+        const lastDay = adapter.createDate(year, month, adapter.getDaysInMonth(firstDay));
+        return this.#outOfBounds(firstDay, lastDay);
+    }
+    /** Whether every day of `year` falls outside `[min, max]`. */
+    isYearDisabled(year) {
+        const adapter = this.#host.adapter;
+        return this.#outOfBounds(adapter.createDate(year, 1, 1), adapter.createDate(year, 12, 31));
+    }
+    /** Whether `date` cannot be selected (`disabled`, out of `[min, max]`, or unavailable). */
+    isUnavailable(date) {
+        if (this.#host.disabled()) {
+            return true;
+        }
+        const adapter = this.#host.adapter;
+        const min = this.#host.min();
+        if (min !== null && compareDateOf(adapter, date, min) < 0) {
+            return true;
+        }
+        const max = this.#host.max();
+        if (max !== null && compareDateOf(adapter, date, max) > 0) {
+            return true;
+        }
+        return this.#host.isDateUnavailable()(date);
+    }
+    /** Clamp `date` into `[min, max]`, returning the nearer bound when outside. */
+    clamp(date) {
+        const adapter = this.#host.adapter;
+        return clampToBounds(adapter, date, this.#host.min(), this.#host.max(), (a, b) => compareDateOf(adapter, a, b));
+    }
+    #outOfBounds(firstDay, lastDay) {
+        const adapter = this.#host.adapter;
+        const min = this.#host.min();
+        if (min !== null && compareDateOf(adapter, lastDay, min) < 0) {
+            return true;
+        }
+        const max = this.#host.max();
+        if (max !== null && compareDateOf(adapter, firstDay, max) > 0) {
+            return true;
+        }
+        return false;
+    }
+}
+
+/** Injection token for {@link ForCalendarContext}, provided by `ForCalendar`. */
+const FOR_CALENDAR_CONTEXT = new InjectionToken('FOR_CALENDAR_CONTEXT');
+/**
+ * Injects the nearest {@link ForCalendarContext}, throwing a descriptive
+ * error when used outside a `[forCalendar]` element.
+ *
+ * @param piece Name of the calling directive, used in the error message.
+ */
+function injectCalendarContext(piece) {
+    const ctx = inject(FOR_CALENDAR_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/calendar] ${piece} must be used inside a [forCalendar] element.`);
+    }
+    return ctx;
+}
+
+/**
+ * Builds the day grid for the month containing `monthAnchor`.
+ *
+ * Returns rows of 7 dates each, starting at `firstDayOfWeek`. Leading and
+ * trailing days from the adjacent months are included so every row is full;
+ * callers mark them with `data-outside-month`. The number of rows is the
+ * minimum needed to cover the month (4-6), so there is no empty trailing week.
+ *
+ * Pure and adapter-driven: the same `(adapter, anchor, firstDayOfWeek)` always
+ * yields the same matrix, and two adapters over the same calendar system
+ * produce day-identical grids.
+ *
+ * @param adapter The date adapter to compute with.
+ * @param monthAnchor Any date within the target month.
+ * @param firstDayOfWeek First column's day of week, **0-6** (`0` = Sunday).
+ */
+function buildMonthMatrix(adapter, monthAnchor, firstDayOfWeek) {
+    const firstOfMonth = adapter.createDate(adapter.getYear(monthAnchor), adapter.getMonth(monthAnchor), 1);
+    const daysInMonth = adapter.getDaysInMonth(firstOfMonth);
+    const leading = (adapter.getDayOfWeek(firstOfMonth) - firstDayOfWeek + 7) % 7;
+    const numWeeks = Math.ceil((leading + daysInMonth) / 7);
+    const gridStart = adapter.addDays(firstOfMonth, -leading);
+    const weeks = [];
+    for (let week = 0; week < numWeeks; week++) {
+        const row = [];
+        for (let day = 0; day < 7; day++) {
+            row.push(adapter.addDays(gridStart, week * 7 + day));
+        }
+        weeks.push(row);
+    }
+    return weeks;
+}
+
+/**
+ * Resolve a calendar grid keydown into the target the move lands on, or `null`
+ * when the key is not a navigation key. `rtl` mirrors the horizontal arrows.
+ * Shared by all three sub-grids via their {@link CalendarGridMoves} mapping.
+ */
+function resolveCalendarGridMove(event, rtl, moves) {
+    switch (event.key) {
+        case 'ArrowLeft':
+            return moves.horizontal(rtl ? 1 : -1);
+        case 'ArrowRight':
+            return moves.horizontal(rtl ? -1 : 1);
+        case 'ArrowUp':
+            return moves.vertical(-1);
+        case 'ArrowDown':
+            return moves.vertical(1);
+        case 'Home':
+            return moves.lineStart();
+        case 'End':
+            return moves.lineEnd();
+        case 'PageUp':
+            return moves.pageBackward(event.shiftKey);
+        case 'PageDown':
+            return moves.pageForward(event.shiftKey);
+        default:
+            return null;
+    }
+}
+/** Whether a keydown is the activation key (`Enter` / `Space`) every sub-grid selects on. */
+function isCalendarActivationKey(event) {
+    return event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar';
+}
+
+/**
+ * The day grid view's state machine (`view="day"`): the 7-column date table.
+ * Owns its cell registry, the rendered `weekDays` / `weeks` data, its
+ * table-driven keyboard mover (the date-math counterpart to the month / year
+ * movers), the start-of-week helper, and the per-view label / disabled / paging
+ * / focus the root composes as a {@link CalendarViewStrategy}.
+ *
+ * Constructed directly by the root (`new CalendarDayNavigator(host)`); it holds
+ * no injection context, mirroring how `SegmentEditor` is lifted out of the date
+ * / time fields. The intended-day, clamp, and announce machinery stays a single
+ * source of truth on the root, reached through {@link CalendarDayNavigatorHost}.
+ *
+ * @typeParam D The adapter's immutable date type.
+ */
+class CalendarDayNavigator {
+    #host;
+    #cells = new Collection();
+    #matrix = computed(() => buildMonthMatrix(this.#host.adapter, this.#host.visibleMonth(), this.#host.firstDayOfWeek()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#matrix" }] : /* istanbul ignore next */ []));
+    /** Weekday column headers for the visible month, starting at `firstDayOfWeek`. */
+    weekDays = computed(() => {
+        const adapter = this.#host.adapter;
+        const firstDay = this.#host.firstDayOfWeek();
+        return this.#matrix()[0].map((date, index) => ({
+            key: String((firstDay + index) % 7),
+            narrow: adapter.format(date, { weekday: 'narrow' }),
+            short: adapter.format(date, { weekday: 'short' }),
+            long: adapter.format(date, { weekday: 'long' }),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekDays" }] : /* istanbul ignore next */ []));
+    /** Week rows of the visible month, including outside-month padding days. */
+    weeks = computed(() => {
+        const adapter = this.#host.adapter;
+        return this.#matrix().map((row) => ({
+            key: this.#dateKey(row[0]),
+            days: row.map((date) => ({
+                key: this.#dateKey(date),
+                date,
+                label: String(adapter.getDate(date)),
+                dateLabel: this.#host.getDateLabel(date),
+            })),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
+    constructor(host) {
+        this.#host = host;
+    }
+    triggerLabel() {
+        return this.#host.visibleMonthLabel();
+    }
+    isPreviousDisabled() {
+        return this.#host.isPreviousMonthDisabled();
+    }
+    isNextDisabled() {
+        return this.#host.isNextMonthDisabled();
+    }
+    page(direction) {
+        this.#host.pageMonths(direction);
+    }
+    focusActive() {
+        return this.focusCell(this.#host.focusedDate());
+    }
+    handleKeydown(event, fromDate) {
+        if (isCalendarActivationKey(event)) {
+            event.preventDefault();
+            this.#host.selectDate(fromDate);
+            return;
+        }
+        const target = this.#resolveMove(event, fromDate);
+        if (target === null) {
+            return;
+        }
+        event.preventDefault();
+        const isPaging = event.key === 'PageUp' || event.key === 'PageDown';
+        this.#host.applyDayKeyMove(target, isPaging);
+    }
+    register(handle) {
+        this.#cells.register(handle);
+    }
+    unregister(handle) {
+        this.#cells.unregister(handle);
+    }
+    focusCell(target) {
+        const adapter = this.#host.adapter;
+        const handle = this.#cells.items().find((cell) => adapter.isSameDay(cell.date(), target));
+        if (!handle) {
+            return false;
+        }
+        handle.host.focus();
+        return true;
+    }
+    #resolveMove(event, fromDate) {
+        const adapter = this.#host.adapter;
+        return resolveCalendarGridMove(event, this.#host.dir() === 'rtl', {
+            horizontal: (step) => adapter.addDays(fromDate, step),
+            vertical: (step) => adapter.addDays(fromDate, step * 7),
+            lineStart: () => this.#startOfWeek(fromDate),
+            lineEnd: () => adapter.addDays(this.#startOfWeek(fromDate), 6),
+            pageBackward: (shiftKey) => shiftKey ? adapter.addYears(fromDate, -1) : adapter.addMonths(fromDate, -1),
+            pageForward: (shiftKey) => shiftKey ? adapter.addYears(fromDate, 1) : adapter.addMonths(fromDate, 1),
+        });
+    }
+    #startOfWeek(date) {
+        const adapter = this.#host.adapter;
+        const offset = (adapter.getDayOfWeek(date) - this.#host.firstDayOfWeek() + 7) % 7;
+        return adapter.addDays(date, -offset);
+    }
+    #dateKey(date) {
+        const adapter = this.#host.adapter;
+        return `${adapter.getYear(date)}-${adapter.getMonth(date)}-${adapter.getDate(date)}`;
+    }
+}
+
+/**
+ * Library fallback for calendar defaults, read at the root injector when no
+ * consumer has called `provideForCalendarDefaults`. Exported for the shared
+ * defaults contract spec; not re-exported from the primitive's public entry.
+ */
+const FOR_CALENDAR_FALLBACK_DEFAULTS = {
+    firstDayOfWeek: null,
+};
+const { token, provideDefaults } = createDefaults('FOR_CALENDAR_DEFAULTS', FOR_CALENDAR_FALLBACK_DEFAULTS);
+/** Token holding the resolved calendar defaults for the current scope. */
+const FOR_CALENDAR_DEFAULTS = token;
+/**
+ * Configures forty-cdk calendar defaults for this injector scope. Partial
+ * overrides inherit unspecified keys from the parent scope (or library
+ * defaults at the root).
+ */
+function provideForCalendarDefaults(defaults = {}) {
+    return provideDefaults(defaults);
+}
+
+const GRID_COLUMNS$1 = 3;
+/**
+ * The month picker view's state machine (`view="month"`): a 3-column grid of the
+ * twelve months of the visible year. Owns its cell registry, its `is*` quartet
+ * (selected / today / focused / disabled), its table-driven keyboard mover, and
+ * the per-view paging / focus the root composes as a {@link CalendarViewStrategy}.
+ *
+ * Constructed directly by the root (`new CalendarMonthNavigator(host, today)`);
+ * it holds no injection context, mirroring how `SegmentEditor` is lifted out of
+ * the date / time fields.
+ *
+ * @typeParam D The adapter's immutable date type.
+ */
+class CalendarMonthNavigator {
+    #host;
+    #today;
+    #cells = new Collection();
+    constructor(host, today) {
+        this.#host = host;
+        this.#today = today;
+    }
+    /** Twelve localized, bounds-aware month options for the visible year. */
+    options() {
+        const adapter = this.#host.adapter;
+        const year = this.#host.visibleYear();
+        const options = [];
+        for (let month = 1; month <= 12; month++) {
+            options.push({
+                value: month,
+                label: adapter.format(adapter.createDate(year, month, 1), { month: 'long' }),
+                disabled: this.#host.isMonthOutOfBounds(year, month),
+            });
+        }
+        return options;
+    }
+    /** Rows of the month picker grid (3 columns) for the visible year. */
+    rows() {
+        const options = this.options();
+        const rows = [];
+        for (let i = 0; i < options.length; i += GRID_COLUMNS$1) {
+            rows.push({ key: `m-${i}`, months: options.slice(i, i + GRID_COLUMNS$1) });
+        }
+        return rows;
+    }
+    triggerLabel() {
+        return String(this.#host.visibleYear());
+    }
+    isPreviousDisabled() {
+        return this.#host.isYearDisabled(this.#host.visibleYear() - 1);
+    }
+    isNextDisabled() {
+        return this.#host.isYearDisabled(this.#host.visibleYear() + 1);
+    }
+    page(direction) {
+        this.#host.pageByYears(direction);
+    }
+    focusActive() {
+        return this.focusCell(this.#host.visibleMonthNumber());
+    }
+    isSelected(month) {
+        const adapter = this.#host.adapter;
+        const value = this.#host.value();
+        return (value !== null &&
+            adapter.getYear(value) === this.#host.visibleYear() &&
+            adapter.getMonth(value) === month);
+    }
+    isToday(month) {
+        const adapter = this.#host.adapter;
+        return (adapter.getYear(this.#today) === this.#host.visibleYear() &&
+            adapter.getMonth(this.#today) === month);
+    }
+    isFocused(month) {
+        return month === this.#host.visibleMonthNumber();
+    }
+    handleKeydown(event, fromMonth) {
+        if (isCalendarActivationKey(event)) {
+            event.preventDefault();
+            this.#host.selectMonth(fromMonth);
+            return;
+        }
+        const target = this.#resolveMove(event, fromMonth);
+        if (target === null) {
+            return;
+        }
+        event.preventDefault();
+        this.#host.setFocusedDate(this.#host.dateInMonth(target.year, target.month));
+        this.#host.scheduleFocus(() => this.focusCell(this.#host.visibleMonthNumber()));
+    }
+    register(handle) {
+        this.#cells.register(handle);
+    }
+    unregister(handle) {
+        this.#cells.unregister(handle);
+    }
+    focusCell(month) {
+        const handle = this.#cells.items().find((cell) => cell.month() === month);
+        if (!handle) {
+            return false;
+        }
+        handle.host.focus();
+        return true;
+    }
+    #resolveMove(event, fromMonth) {
+        const year = this.#host.visibleYear();
+        const base = year * 12 + (fromMonth - 1);
+        const index = resolveCalendarGridMove(event, this.#host.dir() === 'rtl', {
+            horizontal: (step) => base + step,
+            vertical: (step) => base + step * GRID_COLUMNS$1,
+            lineStart: () => year * 12,
+            lineEnd: () => year * 12 + 11,
+            pageBackward: () => base - 12,
+            pageForward: () => base + 12,
+        });
+        if (index === null) {
+            return null;
+        }
+        return { year: Math.floor(index / 12), month: (index % 12) + 1 };
+    }
+}
+
+/**
+ * Tracks the day-of-month the user is conceptually navigating with so paging
+ * across months restores the original day when landing on a longer month,
+ * instead of cumulatively drifting back through a chain of short months.
+ *
+ * It also records the focused date each paging operation produced, letting the
+ * root detect a focus that moved for any other reason (explicit day move,
+ * selection, an external `value` write driving the `focusedDate` linkedSignal)
+ * and reset the intended day to the new day — all without an `effect`.
+ *
+ * Constructed directly (`new IntendedDayCursor(adapter, seed)`); it holds no
+ * injection context, mirroring how `SegmentEditor` is lifted out of the date /
+ * time fields.
+ *
+ * @typeParam D The adapter's immutable date type.
+ */
+class IntendedDayCursor {
+    #adapter;
+    #intendedDay;
+    #pagedFocus = null;
+    constructor(adapter, seed) {
+        this.#adapter = adapter;
+        this.#intendedDay = adapter.getDate(seed);
+    }
+    /** Record `date` as the focus origin for a non-paging move and reset the intended day. */
+    setFocusedDay(date) {
+        this.#intendedDay = this.#adapter.getDate(date);
+        this.#pagedFocus = null;
+    }
+    /**
+     * Re-sync the intended day to `focused`'s actual day unless the focus is still
+     * where the last paging operation left it. Anything that moved the focus for
+     * another reason resets the intended day so a fresh paging run starts from the
+     * day the user can see.
+     */
+    sync(focused) {
+        if (this.#pagedFocus === null || !this.#adapter.isSameDay(this.#pagedFocus, focused)) {
+            this.#intendedDay = this.#adapter.getDate(focused);
+        }
+    }
+    /**
+     * Re-derive `date` so its day-of-month matches the user's intended day,
+     * clamped to the target month's length. Restores e.g. the 31st when a paging
+     * chain lands back on a 31-day month, instead of carrying forward the day a
+     * shorter intermediate month clamped it to.
+     */
+    apply(date) {
+        const adapter = this.#adapter;
+        const daysInMonth = adapter.getDaysInMonth(date);
+        const day = this.#intendedDay < daysInMonth ? this.#intendedDay : daysInMonth;
+        return adapter.createDate(adapter.getYear(date), adapter.getMonth(date), day);
+    }
+    /** Mark `date` as the focused date the last paging operation produced. */
+    markPaged(date) {
+        this.#pagedFocus = date;
+    }
+}
+
+/**
+ * The shared navigation / selection engine for `ForCalendar`: it owns the
+ * {@link IntendedDayCursor} and every focused-date move — single / range
+ * selection, month / year paging, direct `goTo`, and the resolved day keyboard
+ * move — keeping the intended-day, clamp, and announce machinery in one place
+ * instead of scattered across the root and the sub-grids.
+ *
+ * Constructed directly (`new CalendarNavigation(host, seed)`); it holds no
+ * injection context, mirroring how `SegmentEditor` is lifted out of the date /
+ * time fields.
+ *
+ * @typeParam D The adapter's immutable date type.
+ */
+class CalendarNavigation {
+    #host;
+    #cursor;
+    constructor(host, seed) {
+        this.#host = host;
+        this.#cursor = new IntendedDayCursor(host.adapter, seed);
+    }
+    /** Select `date`, unless the calendar is disabled / read-only or the date is unavailable. */
+    selectDate(date) {
+        if (this.#host.disabled() || this.#host.readonly() || this.#host.bounds.isUnavailable(date)) {
+            return;
+        }
+        if (this.#host.selectionMode() === 'range') {
+            if (this.#host.range.select(date)) {
+                this.#cursor.setFocusedDay(date);
+                this.#host.focusedDate.set(date);
+                this.#host.focusDayCell(date);
+            }
+            return;
+        }
+        this.#cursor.setFocusedDay(date);
+        this.#host.value.set(this.#withPreservedTime(date));
+        this.#host.focusDayCell(date);
+    }
+    /** Page the visible month by `delta` (signed month count). Keeps DOM focus on the caller. */
+    pageMonths(delta) {
+        if (this.#host.disabled()) {
+            return;
+        }
+        this.#pageTo(this.#host.adapter.addMonths(this.#host.focusedDate(), delta));
+    }
+    /**
+     * Page the visible year by `step` (signed) — the shared month / year-view
+     * paging path. Reached only from the disabled-guarded `pagePrevious` /
+     * `pageNext`, so it carries no guard of its own. Keeps DOM focus on the caller.
+     */
+    pageByYears(step) {
+        this.#pageTo(this.#host.adapter.addYears(this.#host.focusedDate(), step));
+    }
+    /**
+     * Set the visible month to (`year`, `month`, **1-12**) without selecting,
+     * re-applying the intended day, clamping, and announcing a month change. A
+     * no-op while disabled.
+     */
+    goTo(year, month) {
+        if (this.#host.disabled()) {
+            return;
+        }
+        this.#pageTo(this.#host.adapter.createDate(year, month, 1));
+    }
+    /** Apply a resolved day keyboard move: paging re-applies the intended day; a plain move records the origin. */
+    applyDayKeyMove(target, isPaging) {
+        const previousMonth = this.#host.visibleMonth();
+        let next;
+        if (isPaging) {
+            this.#cursor.sync(this.#host.focusedDate());
+            next = this.#host.bounds.clamp(this.#cursor.apply(target));
+            this.#cursor.markPaged(next);
+        }
+        else {
+            next = target;
+            this.#cursor.setFocusedDay(next);
+        }
+        this.#host.focusedDate.set(next);
+        this.#host.focusDayCell(next);
+        this.#announceMonthChange(previousMonth);
+    }
+    /** A date in (`year`, `month`) keeping the focused day clamped to the month length. */
+    dateInMonth(year, month) {
+        const adapter = this.#host.adapter;
+        const daysInMonth = adapter.getDaysInMonth(adapter.createDate(year, month, 1));
+        const day = Math.min(adapter.getDate(this.#host.focusedDate()), daysInMonth);
+        return adapter.createDate(year, month, day);
+    }
+    #pageTo(target) {
+        const previousMonth = this.#host.visibleMonth();
+        this.#cursor.sync(this.#host.focusedDate());
+        const next = this.#host.bounds.clamp(this.#cursor.apply(target));
+        this.#host.focusedDate.set(next);
+        this.#cursor.markPaged(next);
+        this.#announceMonthChange(previousMonth);
+    }
+    #announceMonthChange(previousMonth) {
+        if (!this.#host.adapter.isSameDay(previousMonth, this.#host.visibleMonth())) {
+            this.#host.announce(this.#host.visibleMonthLabel());
+        }
+    }
+    #withPreservedTime(date) {
+        const adapter = this.#host.adapter;
+        const current = this.#host.value();
+        if (current === null ||
+            adapter.supportsTime?.() !== true ||
+            !adapter.getHours ||
+            !adapter.getMinutes ||
+            !adapter.getSeconds ||
+            !adapter.setTime) {
+            return date;
+        }
+        return adapter.setTime(date, adapter.getHours(current), adapter.getMinutes(current), adapter.getSeconds(current));
+    }
+}
+
+/**
+ * Owns the two-click anchor → commit range-selection state machine for
+ * `ForCalendar` in `selectionMode="range"`: the pending `anchor`, the pointer
+ * `hovered` cursor, the derived `effectiveRange` (committed when idle, preview
+ * while selecting), and the `isRangeStart` / `isRangeEnd` / `isInRange` /
+ * `isRangePreview` predicates the day cells reflect as `data-*`.
+ *
+ * Constructed directly (`new CalendarRangeSelection(host)`); it holds no
+ * injection context, mirroring how `SegmentEditor` is lifted out of the date /
+ * time fields. The root keeps the focus orchestration around a click and only
+ * delegates the range bookkeeping here.
+ *
+ * @typeParam D The adapter's immutable date type.
+ */
+class CalendarRangeSelection {
+    #host;
+    #anchor = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#anchor" }] : /* istanbul ignore next */ []));
+    #hovered = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#hovered" }] : /* istanbul ignore next */ []));
+    #effectiveRange = computed(() => {
+        const adapter = this.#host.adapter;
+        const anchor = this.#anchor();
+        if (anchor !== null) {
+            const cursor = this.#hovered() ?? this.#host.focusedDate();
+            const cmp = compareDateOf(adapter, cursor, anchor);
+            const [start, end] = cmp < 0 ? [cursor, anchor] : [anchor, cursor];
+            return { start, end, preview: true };
+        }
+        const committed = this.#host.range();
+        return committed === null
+            ? null
+            : { start: committed.start, end: committed.end, preview: false };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#effectiveRange" }] : /* istanbul ignore next */ []));
+    constructor(host) {
+        this.#host = host;
+    }
+    isRangeStart(date) {
+        const er = this.#effectiveRange();
+        return er !== null && this.#host.adapter.isSameDay(date, er.start);
+    }
+    isRangeEnd(date) {
+        const er = this.#effectiveRange();
+        return er !== null && this.#host.adapter.isSameDay(date, er.end);
+    }
+    isInRange(date) {
+        const er = this.#effectiveRange();
+        return er !== null && !er.preview && this.#withinInclusive(date, er);
+    }
+    isRangePreview(date) {
+        const er = this.#effectiveRange();
+        return er !== null && er.preview && this.#withinInclusive(date, er);
+    }
+    /** Whether `date` is within the effective range, used by the day cell's `isSelected`. */
+    contains(date) {
+        const er = this.#effectiveRange();
+        return er !== null && !er.preview && this.#withinInclusive(date, er);
+    }
+    setHovered(date) {
+        if (!this.#host.active()) {
+            return;
+        }
+        this.#hovered.set(date);
+    }
+    /**
+     * Apply a click on `date` to the anchor → commit flow. Returns `true` when the
+     * click moved the selection (so the root should move focus to `date`), `false`
+     * when it was rejected by the min / max length guard (anchor preserved, no
+     * focus move).
+     */
+    select(date) {
+        const adapter = this.#host.adapter;
+        const anchor = this.#anchor();
+        if (anchor === null) {
+            this.#host.range.set(null);
+            this.#anchor.set(date);
+        }
+        else if (compareDateOf(adapter, date, anchor) < 0) {
+            this.#anchor.set(date);
+        }
+        else {
+            if (!this.#rangeLengthSatisfied(anchor, date)) {
+                return false;
+            }
+            this.#host.range.set({ start: anchor, end: date });
+            this.#anchor.set(null);
+        }
+        return true;
+    }
+    #rangeLengthSatisfied(anchor, end) {
+        const adapter = this.#host.adapter;
+        const minLen = this.#host.minRangeLength();
+        const maxLen = this.#host.maxRangeLength();
+        if (minLen === null && maxLen === null) {
+            return true;
+        }
+        let len = 1;
+        let cursor = anchor;
+        while (compareDateOf(adapter, cursor, end) < 0) {
+            cursor = adapter.addDays(cursor, 1);
+            len++;
+            if (maxLen !== null && len > maxLen) {
+                return false;
+            }
+        }
+        if (minLen !== null && len < minLen) {
+            return false;
+        }
+        return true;
+    }
+    #withinInclusive(date, range) {
+        const adapter = this.#host.adapter;
+        return (compareDateOf(adapter, date, range.start) >= 0 && compareDateOf(adapter, date, range.end) <= 0);
+    }
+}
+
+const GRID_COLUMNS = 3;
+/**
+ * The year picker view's state machine (`view="year"`): a 3-column grid of an
+ * aligned block of `yearBlockSize` years. Owns its cell registry, its `is*`
+ * quartet (selected / today / focused / disabled), its table-driven keyboard
+ * mover, and the per-view paging / focus the root composes as a
+ * {@link CalendarViewStrategy}.
+ *
+ * Constructed directly by the root (`new CalendarYearNavigator(host, today)`);
+ * it holds no injection context, mirroring how `SegmentEditor` is lifted out of
+ * the date / time fields.
+ *
+ * @typeParam D The adapter's immutable date type.
+ */
+class CalendarYearNavigator {
+    #host;
+    #today;
+    #cells = new Collection();
+    constructor(host, today) {
+        this.#host = host;
+        this.#today = today;
+    }
+    /** Rows of the year picker grid (3 columns) for the aligned block containing the visible year. */
+    rows() {
+        const start = this.#host.yearBlockStart();
+        const size = this.#host.yearBlockSize();
+        const years = [];
+        for (let i = 0; i < size; i++) {
+            const value = start + i;
+            years.push({ value, disabled: this.#host.isYearDisabled(value) });
+        }
+        const rows = [];
+        for (let i = 0; i < years.length; i += GRID_COLUMNS) {
+            rows.push({ key: `y-${i}`, years: years.slice(i, i + GRID_COLUMNS) });
+        }
+        return rows;
+    }
+    triggerLabel() {
+        const start = this.#host.yearBlockStart();
+        return `${start} – ${start + this.#host.yearBlockSize() - 1}`;
+    }
+    isPreviousDisabled() {
+        return this.#host.isYearDisabled(this.#host.yearBlockStart() - 1);
+    }
+    isNextDisabled() {
+        return this.#host.isYearDisabled(this.#host.yearBlockStart() + this.#host.yearBlockSize());
+    }
+    page(direction) {
+        this.#host.pageByYears(direction * this.#host.yearBlockSize());
+    }
+    focusActive() {
+        return this.focusCell(this.#host.visibleYear());
+    }
+    isSelected(year) {
+        const value = this.#host.value();
+        return value !== null && this.#host.adapter.getYear(value) === year;
+    }
+    isToday(year) {
+        return this.#host.adapter.getYear(this.#today) === year;
+    }
+    isFocused(year) {
+        return year === this.#host.visibleYear();
+    }
+    handleKeydown(event, fromYear) {
+        if (isCalendarActivationKey(event)) {
+            event.preventDefault();
+            this.#host.selectYear(fromYear);
+            return;
+        }
+        const target = this.#resolveMove(event, fromYear);
+        if (target === null) {
+            return;
+        }
+        event.preventDefault();
+        this.#host.setFocusedDate(this.#host.dateInMonth(target, this.#host.visibleMonthNumber()));
+        this.#host.scheduleFocus(() => this.focusCell(this.#host.visibleYear()));
+    }
+    register(handle) {
+        this.#cells.register(handle);
+    }
+    unregister(handle) {
+        this.#cells.unregister(handle);
+    }
+    focusCell(year) {
+        const handle = this.#cells.items().find((cell) => cell.year() === year);
+        if (!handle) {
+            return false;
+        }
+        handle.host.focus();
+        return true;
+    }
+    #resolveMove(event, fromYear) {
+        const size = this.#host.yearBlockSize();
+        const start = this.#host.yearBlockStart();
+        return resolveCalendarGridMove(event, this.#host.dir() === 'rtl', {
+            horizontal: (step) => fromYear + step,
+            vertical: (step) => fromYear + step * GRID_COLUMNS,
+            lineStart: () => start,
+            lineEnd: () => start + size - 1,
+            pageBackward: () => fromYear - size,
+            pageForward: () => fromYear + size,
+        });
+    }
+}
+
+/**
+ * Headless implementation of a single-date calendar grid following the
+ * [WAI-ARIA Grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/), the
+ * date table at the heart of the APG
+ * [Date Picker Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/)
+ * example.
+ *
+ * `ForCalendar` is the root: it owns the selected value, the focused date, and
+ * the visible month, and exposes them to the grid / header / cell / heading /
+ * navigation pieces through `FOR_CALENDAR_CONTEXT`. All date math goes through
+ * a pluggable {@link DateAdapter} (`provideInternationalizedDateAdapter()` or
+ * `provideNativeDateAdapter()`), so the library hard-depends on no date
+ * library.
+ *
+ * The grid uses roving tabindex: exactly one cell (the focused date) carries
+ * `tabindex="0"`. Arrow / `Home` / `End` / `PageUp` / `PageDown` /
+ * `Shift+PageUp` / `Shift+PageDown` move the focused date, re-paging the grid
+ * when crossing a month boundary; `Enter` / `Space` select.
+ *
+ * The day / month / year views are each backed by a sub-grid collaborator
+ * ({@link CalendarDayNavigator} / {@link CalendarMonthNavigator} /
+ * {@link CalendarYearNavigator}), and range selection by
+ * {@link CalendarRangeSelection}; the root wires them together and exposes the
+ * `[(value)]` / `[(view)]` / `[(range)]` models.
+ *
+ * `ForCalendar` is the grid widget, not a form value — it exposes `[(value)]`
+ * as a `model<D | null>` in `selectionMode="single"` (default), and
+ * `[(range)]` as a `model<CalendarDateRange<D> | null>` in
+ * `selectionMode="range"`. The `FormValueControl<D>` contract arrives with the
+ * follow-up `ForDatePicker` / `ForDateField`. See the primitive's README for a
+ * complete styleless usage example.
+ *
+ * @typeParam D The adapter's immutable date type.
+ */
+class ForCalendar {
+    #defaults = inject(FOR_CALENDAR_DEFAULTS);
+    #idGen = inject(IdGenerator);
+    #injector = inject(Injector);
+    #announcer = inject(LiveAnnouncer);
+    /** The active date adapter, resolved from `FOR_DATE_ADAPTER`. */
+    adapter = injectDateAdapter('ForCalendar');
+    /**
+     * Two-way bindable selected date, or `null`. The `model()` change emitter
+     * (`(valueChange)`) fires only when the calendar itself updates the value
+     * (cell activation), never on consumer writes via `[(value)]`.
+     */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Minimum selectable date (inclusive). Dates before it are unavailable. */
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Maximum selectable date (inclusive). Dates after it are unavailable. */
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-date predicate marking a date as unavailable (present in the grid but
+     * not selectable, reflected as `aria-disabled` / `data-disabled`).
+     */
+    isDateUnavailable = input(() => false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDateUnavailable" }] : /* istanbul ignore next */ []));
+    /**
+     * Formats the full accessible date string each gridcell exposes as its
+     * `aria-label` (the visible content stays the bare day number). Defaults to
+     * the localized full date (e.g. `"Monday, June 15, 2026"`), with
+     * outside-month padding days suffixed (`" (outside month)"`) so assistive
+     * tech can tell them apart from the visible month. Override to localize that
+     * suffix or change the format entirely.
+     */
+    dateLabel = input((date, { adapter, outsideMonth }) => {
+        const formatted = adapter.format(date, {
+            weekday: 'long',
+            day: 'numeric',
+            month: 'long',
+            year: 'numeric',
+        });
+        return outsideMonth ? `${formatted} (outside month)` : formatted;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateLabel" }] : /* istanbul ignore next */ []));
+    /** Disables the whole calendar: no focus movement, no selection. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Makes the calendar read-only: dates stay focusable but selection is blocked. */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Selection mode. `'single'` (default) keeps the single-date `[(value)]`
+     * behaviour unchanged. `'range'` switches to the two-click anchor → commit
+     * flow and exposes the result through `[(range)]`.
+     */
+    selectionMode = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Active calendar view. `'day'` (default) shows the date grid; `'month'` and
+     * `'year'` show the month / year picker grids. Two-way bindable; the `model()`
+     * change emitter (`(viewChange)`) fires only when the calendar itself cycles
+     * or drills the view, never on consumer writes via `[(view)]`.
+     */
+    view = model('day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    /**
+     * Number of years the year view shows, as an aligned block containing the
+     * visible year. Default `12`.
+     */
+    yearBlockSize = input(12, { ...(ngDevMode ? { debugName: "yearBlockSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Two-way bindable committed date range, or `null`. Only used when
+     * `selectionMode="range"`. The `model()` change emitter (`(rangeChange)`)
+     * fires only when the calendar internally commits or clears a range, never
+     * on consumer writes via `[(range)]`.
+     */
+    range = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimum inclusive day count for a range selection. A click that would
+     * commit a range shorter than this is a no-op (anchor is preserved).
+     * `null` (default) means no minimum. Only honoured in `selectionMode="range"`.
+     */
+    minRangeLength = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minRangeLength" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum inclusive day count for a range selection. A click that would
+     * commit a range longer than this is a no-op (anchor is preserved).
+     * `null` (default) means no maximum. Only honoured in `selectionMode="range"`.
+     */
+    maxRangeLength = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxRangeLength" }] : /* istanbul ignore next */ []));
+    /**
+     * First day of the week as a **0-6** index (`0` = Sunday). When `null`
+     * (default, overridable via `provideForCalendarDefaults`), the adapter's
+     * `getFirstDayOfWeek()` is used.
+     */
+    firstDayOfWeek = input(this.#defaults.firstDayOfWeek, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    /**
+     * Writing direction. When unset (default `null`), the inherited ambient
+     * direction is resolved from the nearest ancestor carrying a `dir` attribute
+     * (or `<html dir>`), defaulting to `'ltr'`. An explicit `[dir]` always wins.
+     * The resolved value is reflected to the host `dir` attribute and swaps the
+     * `ArrowLeft` / `ArrowRight` semantics in RTL.
+     */
+    _dirInput = input(null, { ...(ngDevMode ? { debugName: "_dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+    dir = injectTextDirection(this._dirInput);
+    #today = this.adapter.today();
+    /** Internal focused date (the roving entry point), seeded from `value ?? range.start ?? today`. */
+    focusedDate = linkedSignal(() => this.value() ?? this.range()?.start ?? this.#today, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
+    #bounds = new CalendarBounds({
+        adapter: this.adapter,
+        min: this.min,
+        max: this.max,
+        visibleMonth: () => this.visibleMonth(),
+        isDateUnavailable: this.isDateUnavailable,
+        disabled: this.disabled,
+    });
+    #range = new CalendarRangeSelection({
+        adapter: this.adapter,
+        focusedDate: this.focusedDate,
+        range: this.range,
+        active: computed(() => this.selectionMode() === 'range'),
+        minRangeLength: this.minRangeLength,
+        maxRangeLength: this.maxRangeLength,
+    });
+    #nav = new CalendarNavigation({
+        adapter: this.adapter,
+        disabled: this.disabled,
+        readonly: this.readonly,
+        selectionMode: this.selectionMode,
+        focusedDate: this.focusedDate,
+        value: this.value,
+        visibleMonth: () => this.visibleMonth(),
+        visibleMonthLabel: () => this.visibleMonthLabel(),
+        visibleYear: () => this.visibleYear(),
+        visibleMonthNumber: () => this.visibleMonthNumber(),
+        bounds: this.#bounds,
+        range: this.#range,
+        announce: (label) => this.#announcer.announce(label, 'polite'),
+        scheduleFocus: (fn) => this.#scheduleFocus(fn),
+        focusDayCell: (target) => this.#focusDayCell(target),
+    }, this.value() ?? this.range()?.start ?? this.#today);
+    #dayNav = new CalendarDayNavigator({
+        ...this.#subGridHost(),
+        visibleMonth: () => this.visibleMonth(),
+        firstDayOfWeek: () => this.#resolvedFirstDayOfWeek(),
+        getDateLabel: (date) => this.getDateLabel(date),
+        selectDate: (date) => this.#nav.selectDate(date),
+        pageMonths: (delta) => this.#nav.pageMonths(delta),
+        applyDayKeyMove: (target, isPaging) => this.#nav.applyDayKeyMove(target, isPaging),
+    });
+    #monthNav = new CalendarMonthNavigator({
+        ...this.#subGridHost(),
+        ...this.#pickerViewHost(),
+        isMonthOutOfBounds: (year, month) => this.#bounds.isMonthOutOfBounds(year, month),
+        selectMonth: (month) => this.selectMonth(month),
+    }, this.#today);
+    #yearNav = new CalendarYearNavigator({
+        ...this.#subGridHost(),
+        ...this.#pickerViewHost(),
+        selectYear: (year) => this.selectYear(year),
+    }, this.#today);
+    #strategies = {
+        day: this.#dayNav,
+        month: this.#monthNav,
+        year: this.#yearNav,
+    };
+    #strategyFor(view) {
+        return this.#strategies[view];
+    }
+    /** The reactive root surface shared by all three sub-grid navigators. */
+    #subGridHost() {
+        return {
+            adapter: this.adapter,
+            dir: this.dir,
+            yearBlockSize: () => this.yearBlockSize(),
+            yearBlockStart: () => this.#yearBlockStart(),
+            visibleMonthLabel: () => this.visibleMonthLabel(),
+            visibleYear: () => this.visibleYear(),
+            visibleMonthNumber: () => this.visibleMonthNumber(),
+            focusedDate: this.focusedDate,
+            isPreviousMonthDisabled: this.#bounds.isPreviousMonthDisabled,
+            isNextMonthDisabled: this.#bounds.isNextMonthDisabled,
+            isYearDisabled: (year) => this.#bounds.isYearDisabled(year),
+        };
+    }
+    /** The navigation / focus surface shared by the month and year picker navigators. */
+    #pickerViewHost() {
+        return {
+            value: () => this.value(),
+            pageByYears: (step) => this.#nav.pageByYears(step),
+            setFocusedDate: (date) => this.focusedDate.set(date),
+            dateInMonth: (year, month) => this.#nav.dateInMonth(year, month),
+            scheduleFocus: (fn) => this.#scheduleFocus(fn),
+        };
+    }
+    #viewSwitched = false;
+    #viewFocusEffect = effect(() => {
+        const view = this.view();
+        if (!this.#viewSwitched) {
+            this.#viewSwitched = true;
+            return;
+        }
+        afterNextRender(() => this.#strategyFor(view).focusActive(), { injector: this.#injector });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#viewFocusEffect" }] : /* istanbul ignore next */ []));
+    #resolvedFirstDayOfWeek = computed(() => this.firstDayOfWeek() ?? this.adapter.getFirstDayOfWeek(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#resolvedFirstDayOfWeek" }] : /* istanbul ignore next */ []));
+    /** First day of the visible month, derived from {@link focusedDate}. */
+    visibleMonth = computed(() => {
+        const focused = this.focusedDate();
+        return this.adapter.createDate(this.adapter.getYear(focused), this.adapter.getMonth(focused), 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleMonth" }] : /* istanbul ignore next */ []));
+    #headingId = signal(this.#idGen.next('for-calendar-heading'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#headingId" }] : /* istanbul ignore next */ []));
+    headingId = this.#headingId.asReadonly();
+    /**
+     * Adopts a consumer-set static `id` on the `[forCalendarHeading]` host into
+     * `headingId` (the grid's `aria-labelledby` resolves to it) instead of
+     * letting the `[id]` host binding clobber it.
+     */
+    adoptHeadingId(el) {
+        adoptHostId(el, this.#headingId);
+    }
+    visibleMonthLabel = computed(() => this.adapter.format(this.visibleMonth(), { month: 'long', year: 'numeric' }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleMonthLabel" }] : /* istanbul ignore next */ []));
+    /** The visible month's full year (e.g. `2026`). */
+    visibleYear = computed(() => this.adapter.getYear(this.visibleMonth()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleYear" }] : /* istanbul ignore next */ []));
+    /** The visible month, **1-12**. */
+    visibleMonthNumber = computed(() => this.adapter.getMonth(this.visibleMonth()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleMonthNumber" }] : /* istanbul ignore next */ []));
+    /**
+     * Twelve entries for the visible year — each a localized month name plus
+     * whether the whole month falls outside `[min, max]`. Tracks {@link visibleYear}.
+     * Build native `<select>` month dropdowns from it.
+     */
+    monthOptions = computed(() => this.#monthNav.options(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthOptions" }] : /* istanbul ignore next */ []));
+    #yearBlockStart = computed(() => {
+        const size = this.yearBlockSize();
+        return Math.floor(this.visibleYear() / size) * size;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#yearBlockStart" }] : /* istanbul ignore next */ []));
+    /** Rows of the month picker grid (3 columns) for the visible year. */
+    monthRows = computed(() => this.#monthNav.rows(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthRows" }] : /* istanbul ignore next */ []));
+    /** Rows of the year picker grid (3 columns) for the aligned block containing the visible year. */
+    yearRows = computed(() => this.#yearNav.rows(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearRows" }] : /* istanbul ignore next */ []));
+    /** Label for the view trigger / heading, reflecting the active view. */
+    viewTriggerLabel = computed(() => this.#strategyFor(this.view()).triggerLabel(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewTriggerLabel" }] : /* istanbul ignore next */ []));
+    isPreviousDisabled = computed(() => this.#strategyFor(this.view()).isPreviousDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPreviousDisabled" }] : /* istanbul ignore next */ []));
+    isNextDisabled = computed(() => this.#strategyFor(this.view()).isNextDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isNextDisabled" }] : /* istanbul ignore next */ []));
+    /** Weekday column headers for the visible month, starting at `firstDayOfWeek`. */
+    weekDays = this.#dayNav.weekDays;
+    /** Week rows of the visible month, including outside-month padding days. */
+    weeks = this.#dayNav.weeks;
+    /** Whether the previous-month button should be disabled (bounded by `min`). */
+    isPreviousMonthDisabled = this.#bounds.isPreviousMonthDisabled;
+    /** Whether the next-month button should be disabled (bounded by `max`). */
+    isNextMonthDisabled = this.#bounds.isNextMonthDisabled;
+    /**
+     * Whether every day of `month` (**1-12**) in the visible year falls outside
+     * `[min, max]`. Use it to disable a month in a custom dropdown.
+     */
+    isMonthDisabled(month) {
+        return this.#bounds.isMonthOutOfBounds(this.visibleYear(), month);
+    }
+    /**
+     * Whether every day of `year` falls outside `[min, max]`. Use it to disable a
+     * year in a custom dropdown.
+     */
+    isYearDisabled(year) {
+        return this.#bounds.isYearDisabled(year);
+    }
+    isMonthSelected(month) {
+        return this.#monthNav.isSelected(month);
+    }
+    isMonthToday(month) {
+        return this.#monthNav.isToday(month);
+    }
+    isMonthFocused(month) {
+        return this.#monthNav.isFocused(month);
+    }
+    isYearSelected(year) {
+        return this.#yearNav.isSelected(year);
+    }
+    isYearToday(year) {
+        return this.#yearNav.isToday(year);
+    }
+    isYearFocused(year) {
+        return this.#yearNav.isFocused(year);
+    }
+    isSelected(date) {
+        if (this.selectionMode() === 'range') {
+            return this.#range.contains(date);
+        }
+        const value = this.value();
+        return value !== null && this.adapter.isSameDay(date, value);
+    }
+    isRangeStart(date) {
+        return this.#range.isRangeStart(date);
+    }
+    isRangeEnd(date) {
+        return this.#range.isRangeEnd(date);
+    }
+    isInRange(date) {
+        return this.#range.isInRange(date);
+    }
+    isRangePreview(date) {
+        return this.#range.isRangePreview(date);
+    }
+    setHovered(date) {
+        this.#range.setHovered(date);
+    }
+    isToday(date) {
+        return this.adapter.isSameDay(date, this.#today);
+    }
+    isFocused(date) {
+        return this.adapter.isSameDay(date, this.focusedDate());
+    }
+    isOutsideMonth(date) {
+        const visible = this.visibleMonth();
+        return (this.adapter.getMonth(date) !== this.adapter.getMonth(visible) ||
+            this.adapter.getYear(date) !== this.adapter.getYear(visible));
+    }
+    isUnavailable(date) {
+        return this.#bounds.isUnavailable(date);
+    }
+    getDateLabel(date) {
+        return this.dateLabel()(date, {
+            adapter: this.adapter,
+            outsideMonth: this.isOutsideMonth(date),
+        });
+    }
+    selectDate(date) {
+        this.#nav.selectDate(date);
+    }
+    pageMonths(delta) {
+        this.#nav.pageMonths(delta);
+    }
+    /**
+     * Set the visible month to (`year`, `month`) without selecting a date.
+     * `month` is **1-12**. Re-applies the user's intended day-of-month (clamped to
+     * the target month's length), clamps the result into `[min, max]`, and
+     * announces the new period politely when the visible month changes. Keeps DOM
+     * focus on the caller — it does not move focus into the grid. A no-op while the
+     * calendar is disabled.
+     */
+    goTo(year, month) {
+        this.#nav.goTo(year, month);
+    }
+    /** Set the visible month within the current visible year. `month` is **1-12**. */
+    goToMonth(month) {
+        this.goTo(this.visibleYear(), month);
+    }
+    /** Set the visible year, keeping the current visible month. */
+    goToYear(year) {
+        this.goTo(year, this.visibleMonthNumber());
+    }
+    handleCellKeydown(event, fromDate) {
+        if (this.disabled()) {
+            return;
+        }
+        this.#dayNav.handleKeydown(event, fromDate);
+    }
+    /**
+     * Cycle the view one step coarser: `day → month → year`, clamped at `'year'`.
+     * No-op when the whole calendar is disabled.
+     */
+    cycleView() {
+        if (this.disabled()) {
+            return;
+        }
+        const order = ['day', 'month', 'year'];
+        const next = order[order.indexOf(this.view()) + 1];
+        if (next) {
+            this.view.set(next);
+        }
+    }
+    /**
+     * Select a whole month (1-12): navigate to it within the current visible year
+     * and switch the view to `'day'`. No-op when the calendar is disabled /
+     * read-only or the month is out of `[min, max]`.
+     */
+    selectMonth(month) {
+        if (this.disabled() || this.readonly() || this.isMonthDisabled(month)) {
+            return;
+        }
+        this.goToMonth(month);
+        this.view.set('day');
+    }
+    /**
+     * Select a whole year: navigate to it and switch the view to `'month'`. No-op
+     * when the calendar is disabled / read-only or the year is out of `[min, max]`.
+     */
+    selectYear(year) {
+        if (this.disabled() || this.readonly() || this.isYearDisabled(year)) {
+            return;
+        }
+        this.goToYear(year);
+        this.view.set('month');
+    }
+    /** Page backward by one month / year / block depending on the active view. */
+    pagePrevious() {
+        this.#page(-1);
+    }
+    /** Page forward by one month / year / block depending on the active view. */
+    pageNext() {
+        this.#page(1);
+    }
+    #page(direction) {
+        if (this.disabled()) {
+            return;
+        }
+        this.#strategyFor(this.view()).page(direction);
+    }
+    /**
+     * Move DOM focus to the roving cell — the gridcell carrying the tab stop,
+     * i.e. the one matching {@link focusedDate} (day view) or the highlighted
+     * month / year cell (month / year view). Returns `false` when no matching
+     * cell is currently rendered, so an overlay host wrapping the calendar can
+     * fall back to its own focus logic.
+     */
+    focusActiveCell() {
+        return this.#strategyFor(this.view()).focusActive();
+    }
+    registerCell(handle) {
+        this.#dayNav.register(handle);
+    }
+    unregisterCell(handle) {
+        this.#dayNav.unregister(handle);
+    }
+    handleMonthCellKeydown(event, fromMonth) {
+        if (this.disabled()) {
+            return;
+        }
+        this.#monthNav.handleKeydown(event, fromMonth);
+    }
+    handleYearCellKeydown(event, fromYear) {
+        if (this.disabled()) {
+            return;
+        }
+        this.#yearNav.handleKeydown(event, fromYear);
+    }
+    registerMonthCell(handle) {
+        this.#monthNav.register(handle);
+    }
+    unregisterMonthCell(handle) {
+        this.#monthNav.unregister(handle);
+    }
+    registerYearCell(handle) {
+        this.#yearNav.register(handle);
+    }
+    unregisterYearCell(handle) {
+        this.#yearNav.unregister(handle);
+    }
+    #scheduleFocus(fn) {
+        afterNextRender(fn, { injector: this.#injector });
+    }
+    #focusDayCell(target) {
+        afterNextRender(() => this.#dayNav.focusCell(target), { injector: this.#injector });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForCalendar, isStandalone: true, selector: "[forCalendar]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, isDateUnavailable: { classPropertyName: "isDateUnavailable", publicName: "isDateUnavailable", isSignal: true, isRequired: false, transformFunction: null }, dateLabel: { classPropertyName: "dateLabel", publicName: "dateLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, yearBlockSize: { classPropertyName: "yearBlockSize", publicName: "yearBlockSize", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, minRangeLength: { classPropertyName: "minRangeLength", publicName: "minRangeLength", isSignal: true, isRequired: false, transformFunction: null }, maxRangeLength: { classPropertyName: "maxRangeLength", publicName: "maxRangeLength", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, _dirInput: { classPropertyName: "_dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", view: "viewChange", range: "rangeChange" }, host: { properties: { "attr.dir": "dir()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-readonly": "readonly() ? \"\" : null", "attr.data-view": "view()" } }, providers: [{ provide: FOR_CALENDAR_CONTEXT, useExisting: ForCalendar }], exportAs: ["forCalendar"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forCalendar]',
+                    exportAs: 'forCalendar',
+                    host: {
+                        '[attr.dir]': 'dir()',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.data-readonly]': 'readonly() ? "" : null',
+                        '[attr.data-view]': 'view()',
+                    },
+                    providers: [{ provide: FOR_CALENDAR_CONTEXT, useExisting: ForCalendar }],
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], isDateUnavailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDateUnavailable", required: false }] }], dateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], yearBlockSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearBlockSize", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], minRangeLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRangeLength", required: false }] }], maxRangeLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRangeLength", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], _dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }] } });
+
+/**
+ * The calendar's date table (`role="grid"`). Apply on a `<table>`. Labelled by
+ * the `[forCalendarHeading]` via `aria-labelledby`, and reflects `aria-disabled`
+ * / `aria-readonly` from the root.
+ *
+ * Exposes the month's `weekDays()` (column headers) and `weeks()` (day rows)
+ * for the consumer to iterate — bind `cell.date` to each `[forCalendarCell]`.
+ */
+class ForCalendarGrid {
+    ctx = injectCalendarContext('ForCalendarGrid');
+    /** Weekday column headers for the visible month, starting at `firstDayOfWeek`. */
+    weekDays = this.ctx.weekDays;
+    /** Week rows of the visible month, including outside-month padding days. */
+    weeks = this.ctx.weeks;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarGrid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForCalendarGrid, isStandalone: true, selector: "[forCalendarGrid]", host: { attributes: { "role": "grid" }, properties: { "attr.aria-labelledby": "ctx.headingId()", "attr.aria-disabled": "ctx.disabled() ? \"true\" : null", "attr.aria-readonly": "ctx.readonly() ? \"true\" : null" } }, exportAs: ["forCalendarGrid"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarGrid, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forCalendarGrid]',
+                    exportAs: 'forCalendarGrid',
+                    host: {
+                        role: 'grid',
+                        '[attr.aria-labelledby]': 'ctx.headingId()',
+                        '[attr.aria-disabled]': 'ctx.disabled() ? "true" : null',
+                        '[attr.aria-readonly]': 'ctx.readonly() ? "true" : null',
+                    },
+                }]
+        }] });
+
+/**
+ * Marks the calendar grid's header rowgroup. Apply on a `<thead>` holding a
+ * single row of `<th scope="col">` weekday headers.
+ *
+ * Reflects `role="rowgroup"` so the weekday header is exposed as a distinct
+ * rowgroup inside the `role="grid"` table — assistive tech announces the
+ * column headers as their own group rather than folding them into the day
+ * rows. (A bare `<thead>` carries the implicit role, but the grid's explicit
+ * `role="grid"` suppresses the table's native row/rowgroup semantics, so the
+ * header must restate it.)
+ *
+ * Also exposes `weekDays()` so the header row can be iterated from this piece,
+ * as an alternative to reading it off `[forCalendarGrid]`.
+ */
+class ForCalendarGridHeader {
+    ctx = injectCalendarContext('ForCalendarGridHeader');
+    /** Weekday column headers for the visible month, starting at `firstDayOfWeek`. */
+    weekDays = this.ctx.weekDays;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarGridHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForCalendarGridHeader, isStandalone: true, selector: "[forCalendarGridHeader]", host: { attributes: { "role": "rowgroup" } }, exportAs: ["forCalendarGridHeader"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarGridHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forCalendarGridHeader]',
+                    exportAs: 'forCalendarGridHeader',
+                    host: {
+                        role: 'rowgroup',
+                    },
+                }]
+        }] });
+
+/**
+ * A single day cell (`role="gridcell"`). Apply on the `<td>` for each day in
+ * the grid and bind `[date]` to the cell's date from `weeks()`.
+ *
+ * Carries the roving tab stop (`tabindex="0"` only on the focused date), the
+ * full accessible date as `aria-label` (the bare day number stays the visible
+ * content), `aria-selected` (always emitted), `aria-current="date"` on today,
+ * `aria-disabled` on unavailable dates, and the boolean `data-*` styling hooks
+ * (`data-selected`, `data-today`, `data-highlighted`, `data-disabled`,
+ * `data-outside-month`). In `selectionMode="range"`, also emits
+ * `data-range-start`, `data-range-end`, `data-in-range`, and
+ * `data-range-preview` (all boolean present/absent). Click and `Enter` /
+ * `Space` select; arrow / paging keys move the focused date.
+ *
+ * @typeParam D The adapter's date type (inferred from the bound `[date]`).
+ */
+class ForCalendarCell {
+    ctx = injectCalendarContext('ForCalendarCell');
+    #host = inject(ElementRef);
+    /** The date this cell represents. */
+    date = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
+    selected = computed(() => this.ctx.isSelected(this.date()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    isToday = computed(() => this.ctx.isToday(this.date()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isToday" }] : /* istanbul ignore next */ []));
+    focused = computed(() => this.ctx.isFocused(this.date()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    unavailable = computed(() => this.ctx.isUnavailable(this.date()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unavailable" }] : /* istanbul ignore next */ []));
+    outsideMonth = computed(() => this.ctx.isOutsideMonth(this.date()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outsideMonth" }] : /* istanbul ignore next */ []));
+    dateLabel = computed(() => this.ctx.getDateLabel(this.date()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateLabel" }] : /* istanbul ignore next */ []));
+    rangeStart = computed(() => this.ctx.isRangeStart(this.date()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeStart" }] : /* istanbul ignore next */ []));
+    rangeEnd = computed(() => this.ctx.isRangeEnd(this.date()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeEnd" }] : /* istanbul ignore next */ []));
+    inRange = computed(() => this.ctx.isInRange(this.date()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inRange" }] : /* istanbul ignore next */ []));
+    rangePreview = computed(() => this.ctx.isRangePreview(this.date()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangePreview" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const handle = {
+            host: this.#host.nativeElement,
+            date: this.date,
+        };
+        registerHandle(handle, (h) => this.ctx.registerCell(h), (h) => this.ctx.unregisterCell(h));
+    }
+    onClick() {
+        this.ctx.selectDate(this.date());
+    }
+    onKeyDown(event) {
+        this.ctx.handleCellKeydown(event, this.date());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForCalendarCell, isStandalone: true, selector: "[forCalendarCell]", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, listeners: { "click": "onClick()", "keydown": "onKeyDown($event)", "pointerenter": "ctx.setHovered(date())", "pointerleave": "ctx.setHovered(null)" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-label": "dateLabel()", "attr.aria-selected": "selected() ? \"true\" : \"false\"", "attr.aria-current": "isToday() ? \"date\" : null", "attr.aria-disabled": "unavailable() ? \"true\" : null", "attr.data-selected": "selected() ? \"\" : null", "attr.data-today": "isToday() ? \"\" : null", "attr.data-highlighted": "focused() ? \"\" : null", "attr.data-disabled": "unavailable() ? \"\" : null", "attr.data-outside-month": "outsideMonth() ? \"\" : null", "attr.data-range-start": "rangeStart() ? \"\" : null", "attr.data-range-end": "rangeEnd() ? \"\" : null", "attr.data-in-range": "inRange() ? \"\" : null", "attr.data-range-preview": "rangePreview() ? \"\" : null" } }, exportAs: ["forCalendarCell"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forCalendarCell]',
+                    exportAs: 'forCalendarCell',
+                    host: {
+                        role: 'gridcell',
+                        '[attr.tabindex]': 'focused() ? 0 : -1',
+                        '[attr.aria-label]': 'dateLabel()',
+                        '[attr.aria-selected]': 'selected() ? "true" : "false"',
+                        '[attr.aria-current]': 'isToday() ? "date" : null',
+                        '[attr.aria-disabled]': 'unavailable() ? "true" : null',
+                        '[attr.data-selected]': 'selected() ? "" : null',
+                        '[attr.data-today]': 'isToday() ? "" : null',
+                        '[attr.data-highlighted]': 'focused() ? "" : null',
+                        '[attr.data-disabled]': 'unavailable() ? "" : null',
+                        '[attr.data-outside-month]': 'outsideMonth() ? "" : null',
+                        '[attr.data-range-start]': 'rangeStart() ? "" : null',
+                        '[attr.data-range-end]': 'rangeEnd() ? "" : null',
+                        '[attr.data-in-range]': 'inRange() ? "" : null',
+                        '[attr.data-range-preview]': 'rangePreview() ? "" : null',
+                        '(click)': 'onClick()',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(pointerenter)': 'ctx.setHovered(date())',
+                        '(pointerleave)': 'ctx.setHovered(null)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }] } });
+
+/**
+ * The month/year heading. Apply on a heading element (e.g. `<h2>`) and render
+ * its `label()` as the content: `<h2 forCalendarHeading #h="forCalendarHeading">{{ h.label() }}</h2>`.
+ * The grid is `aria-labelledby` this element, so it names the visible period.
+ *
+ * It is **not** an `aria-live` region: paging the month announces the new
+ * period through a dedicated off-screen live region owned by `[forCalendar]`,
+ * so the grid's accessible name is re-read on demand without the heading
+ * itself double-announcing on every render.
+ */
+class ForCalendarHeading {
+    ctx = injectCalendarContext('ForCalendarHeading');
+    /** The visible month's accessible label, e.g. `"June 2026"`. */
+    label = this.ctx.visibleMonthLabel;
+    constructor() {
+        this.ctx.adoptHeadingId(inject(ElementRef).nativeElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarHeading, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForCalendarHeading, isStandalone: true, selector: "[forCalendarHeading]", host: { properties: { "id": "ctx.headingId()" } }, exportAs: ["forCalendarHeading"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarHeading, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forCalendarHeading]',
+                    exportAs: 'forCalendarHeading',
+                    host: {
+                        '[id]': 'ctx.headingId()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Pages the calendar backward. In `day` view pages by one month; in `month` view
+ * pages by one year; in `year` view pages by one block. Apply on a `<button>`.
+ * Keeps DOM focus on itself while paging; the `aria-live` heading announces the
+ * new period. Auto-disabled at the view's bound, or when the whole calendar is
+ * disabled.
+ *
+ * Provide an accessible name via the `[ariaLabel]` input (e.g.
+ * `[ariaLabel]="'Previous'"`).
+ */
+class ForCalendarPrevButton {
+    ctx = injectCalendarContext('ForCalendarPrevButton');
+    /** Accessible name for the button. A `null` (default) or empty value emits no attribute. */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.ctx.disabled() || this.ctx.isPreviousDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        reflectDisabled(this.disabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarPrevButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForCalendarPrevButton, isStandalone: true, selector: "[forCalendarPrevButton]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "ctx.pagePrevious()" }, properties: { "attr.aria-label": "ariaLabel() || null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"\" : null" } }, exportAs: ["forCalendarPrevButton"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarPrevButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forCalendarPrevButton]',
+                    exportAs: 'forCalendarPrevButton',
+                    host: {
+                        type: 'button',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '(click)': 'ctx.pagePrevious()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Pages the calendar forward. In `day` view pages by one month; in `month` view
+ * pages by one year; in `year` view pages by one block. Apply on a `<button>`.
+ * Keeps DOM focus on itself while paging; the `aria-live` heading announces the
+ * new period. Auto-disabled at the view's bound, or when the whole calendar is
+ * disabled.
+ *
+ * Provide an accessible name via the `[ariaLabel]` input (e.g.
+ * `[ariaLabel]="'Next'"`).
+ */
+class ForCalendarNextButton {
+    ctx = injectCalendarContext('ForCalendarNextButton');
+    /** Accessible name for the button. A `null` (default) or empty value emits no attribute. */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.ctx.disabled() || this.ctx.isNextDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        reflectDisabled(this.disabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarNextButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForCalendarNextButton, isStandalone: true, selector: "[forCalendarNextButton]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "ctx.pageNext()" }, properties: { "attr.aria-label": "ariaLabel() || null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"\" : null" } }, exportAs: ["forCalendarNextButton"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarNextButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forCalendarNextButton]',
+                    exportAs: 'forCalendarNextButton',
+                    host: {
+                        type: 'button',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '(click)': 'ctx.pageNext()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * The month picker grid (`role="grid"`). Apply on a `<table>`. Labelled by the
+ * `[forCalendarHeading]` via `aria-labelledby`. Exposes `rows()` — iterate
+ * rows then cells, binding each cell's `month` to `[forCalendarMonthCell]`.
+ *
+ * Shows the 12 months of the visible year in 3-column rows. Used when
+ * `view === 'month'`.
+ */
+class ForCalendarMonthGrid {
+    ctx = injectCalendarContext('ForCalendarMonthGrid');
+    /** Rows of the month picker grid (3 columns) for the visible year. */
+    rows = this.ctx.monthRows;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarMonthGrid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForCalendarMonthGrid, isStandalone: true, selector: "[forCalendarMonthGrid]", host: { attributes: { "role": "grid" }, properties: { "attr.aria-labelledby": "ctx.headingId()", "attr.aria-disabled": "ctx.disabled() ? \"true\" : null", "attr.aria-readonly": "ctx.readonly() ? \"true\" : null", "attr.data-view": "\"month\"" } }, exportAs: ["forCalendarMonthGrid"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarMonthGrid, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forCalendarMonthGrid]',
+                    exportAs: 'forCalendarMonthGrid',
+                    host: {
+                        role: 'grid',
+                        '[attr.aria-labelledby]': 'ctx.headingId()',
+                        '[attr.aria-disabled]': 'ctx.disabled() ? "true" : null',
+                        '[attr.aria-readonly]': 'ctx.readonly() ? "true" : null',
+                        '[attr.data-view]': '"month"',
+                    },
+                }]
+        }] });
+
+/**
+ * A single month cell (`role="gridcell"`) in the month picker grid. Apply on
+ * the `<td>` for each month and bind `[month]` to the month number (1-12) from
+ * `rows()`.
+ *
+ * Carries the roving tab stop (`tabindex="0"` on the focused month), reflects
+ * `aria-selected` (always emitted), `data-today`, `data-selected`,
+ * `data-highlighted`, `data-disabled`. Click and `Enter` / `Space` drill down
+ * to the day view for that month; arrow / paging keys move the roving cell.
+ */
+class ForCalendarMonthCell {
+    ctx = injectCalendarContext('ForCalendarMonthCell');
+    #host = inject(ElementRef);
+    /** The month this cell represents, **1-12**. */
+    month = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "month" }] : /* istanbul ignore next */ []));
+    selected = computed(() => this.ctx.isMonthSelected(this.month()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    today = computed(() => this.ctx.isMonthToday(this.month()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
+    focused = computed(() => this.ctx.isMonthFocused(this.month()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.ctx.isMonthDisabled(this.month()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const handle = {
+            host: this.#host.nativeElement,
+            month: this.month,
+        };
+        registerHandle(handle, (h) => this.ctx.registerMonthCell(h), (h) => this.ctx.unregisterMonthCell(h));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarMonthCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForCalendarMonthCell, isStandalone: true, selector: "[forCalendarMonthCell]", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, listeners: { "click": "ctx.selectMonth(month())", "keydown": "ctx.handleMonthCellKeydown($event, month())" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-selected": "selected() ? \"true\" : \"false\"", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.data-selected": "selected() ? \"\" : null", "attr.data-today": "today() ? \"\" : null", "attr.data-highlighted": "focused() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null" } }, exportAs: ["forCalendarMonthCell"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarMonthCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forCalendarMonthCell]',
+                    exportAs: 'forCalendarMonthCell',
+                    host: {
+                        role: 'gridcell',
+                        '[attr.tabindex]': 'focused() ? 0 : -1',
+                        '[attr.aria-selected]': 'selected() ? "true" : "false"',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.data-selected]': 'selected() ? "" : null',
+                        '[attr.data-today]': 'today() ? "" : null',
+                        '[attr.data-highlighted]': 'focused() ? "" : null',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '(click)': 'ctx.selectMonth(month())',
+                        '(keydown)': 'ctx.handleMonthCellKeydown($event, month())',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: true }] }] } });
+
+/**
+ * The year picker grid (`role="grid"`). Apply on a `<table>`. Labelled by the
+ * `[forCalendarHeading]` via `aria-labelledby`. Exposes `rows()` — iterate
+ * rows then cells, binding each cell's `year` to `[forCalendarYearCell]`.
+ *
+ * Shows an aligned block of `yearBlockSize` years in 3-column rows. Used when
+ * `view === 'year'`.
+ */
+class ForCalendarYearGrid {
+    ctx = injectCalendarContext('ForCalendarYearGrid');
+    /** Rows of the year picker grid (3 columns) for the aligned block containing the visible year. */
+    rows = this.ctx.yearRows;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarYearGrid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForCalendarYearGrid, isStandalone: true, selector: "[forCalendarYearGrid]", host: { attributes: { "role": "grid" }, properties: { "attr.aria-labelledby": "ctx.headingId()", "attr.aria-disabled": "ctx.disabled() ? \"true\" : null", "attr.aria-readonly": "ctx.readonly() ? \"true\" : null", "attr.data-view": "\"year\"" } }, exportAs: ["forCalendarYearGrid"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarYearGrid, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forCalendarYearGrid]',
+                    exportAs: 'forCalendarYearGrid',
+                    host: {
+                        role: 'grid',
+                        '[attr.aria-labelledby]': 'ctx.headingId()',
+                        '[attr.aria-disabled]': 'ctx.disabled() ? "true" : null',
+                        '[attr.aria-readonly]': 'ctx.readonly() ? "true" : null',
+                        '[attr.data-view]': '"year"',
+                    },
+                }]
+        }] });
+
+/**
+ * A single year cell (`role="gridcell"`) in the year picker grid. Apply on the
+ * `<td>` for each year and bind `[year]` to the year number from `rows()`.
+ *
+ * Carries the roving tab stop (`tabindex="0"` on the focused year), reflects
+ * `aria-selected` (always emitted), `data-today`, `data-selected`,
+ * `data-highlighted`, `data-disabled`. Click and `Enter` / `Space` drill down
+ * to the month view for that year; arrow / paging keys move the roving cell.
+ */
+class ForCalendarYearCell {
+    ctx = injectCalendarContext('ForCalendarYearCell');
+    #host = inject(ElementRef);
+    /** The year this cell represents. */
+    year = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "year" }] : /* istanbul ignore next */ []));
+    selected = computed(() => this.ctx.isYearSelected(this.year()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    today = computed(() => this.ctx.isYearToday(this.year()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
+    focused = computed(() => this.ctx.isYearFocused(this.year()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.ctx.isYearDisabled(this.year()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const handle = {
+            host: this.#host.nativeElement,
+            year: this.year,
+        };
+        registerHandle(handle, (h) => this.ctx.registerYearCell(h), (h) => this.ctx.unregisterYearCell(h));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarYearCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForCalendarYearCell, isStandalone: true, selector: "[forCalendarYearCell]", inputs: { year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, listeners: { "click": "ctx.selectYear(year())", "keydown": "ctx.handleYearCellKeydown($event, year())" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-selected": "selected() ? \"true\" : \"false\"", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.data-selected": "selected() ? \"\" : null", "attr.data-today": "today() ? \"\" : null", "attr.data-highlighted": "focused() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null" } }, exportAs: ["forCalendarYearCell"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarYearCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forCalendarYearCell]',
+                    exportAs: 'forCalendarYearCell',
+                    host: {
+                        role: 'gridcell',
+                        '[attr.tabindex]': 'focused() ? 0 : -1',
+                        '[attr.aria-selected]': 'selected() ? "true" : "false"',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.data-selected]': 'selected() ? "" : null',
+                        '[attr.data-today]': 'today() ? "" : null',
+                        '[attr.data-highlighted]': 'focused() ? "" : null',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '(click)': 'ctx.selectYear(year())',
+                        '(keydown)': 'ctx.handleYearCellKeydown($event, year())',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { year: [{ type: i0.Input, args: [{ isSignal: true, alias: "year", required: true }] }] } });
+
+/**
+ * The view-cycle button in the calendar header. Apply on a `<button>`. Each
+ * click advances the view one step coarser (`day → month → year`), clamped at
+ * `'year'`. Reflects `data-view` so consumers can style it per view. Disabled
+ * when the whole calendar is disabled.
+ *
+ * Bind the `label` signal to the button text to show the active view label
+ * (e.g. `"June 2026"` in day view, `"2026"` in month view, `"2024 – 2035"` in
+ * year view).
+ */
+class ForCalendarViewTrigger {
+    ctx = injectCalendarContext('ForCalendarViewTrigger');
+    /** Label for the active view, e.g. `"June 2026"` / `"2026"` / `"2016 – 2027"`. */
+    label = this.ctx.viewTriggerLabel;
+    constructor() {
+        reflectDisabled(this.ctx.disabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarViewTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForCalendarViewTrigger, isStandalone: true, selector: "[forCalendarViewTrigger]", host: { attributes: { "type": "button" }, listeners: { "click": "ctx.cycleView()" }, properties: { "attr.data-view": "ctx.view()", "attr.aria-disabled": "ctx.disabled() ? \"true\" : null" } }, exportAs: ["forCalendarViewTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarViewTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forCalendarViewTrigger]',
+                    exportAs: 'forCalendarViewTrigger',
+                    host: {
+                        type: 'button',
+                        '[attr.data-view]': 'ctx.view()',
+                        '[attr.aria-disabled]': 'ctx.disabled() ? "true" : null',
+                        '(click)': 'ctx.cycleView()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Wires a native `<select>` to a `ForCalendar`'s month navigation. Apply on a
+ * `<select>` element inside `[forCalendar]`: the directive keeps the select
+ * showing the visible month and navigates the calendar when the user picks a
+ * different one, without mutating the selected date.
+ *
+ * Render the `<option>` elements yourself from {@link options} so you keep full
+ * control over their markup, labels, and any placeholder:
+ *
+ * ```html
+ * <select forCalendarMonthSelect #m="forCalendarMonthSelect">
+ *   @for (opt of m.options(); track opt.value) {
+ *     <option [value]="opt.value" [disabled]="opt.disabled">{{ opt.label }}</option>
+ *   }
+ * </select>
+ * ```
+ */
+class ForCalendarMonthSelect {
+    ctx = injectCalendarContext('ForCalendarMonthSelect');
+    /** The twelve localized, bounds-aware month options for the visible year. */
+    options = this.ctx.monthOptions;
+    onChange(event) {
+        this.ctx.goToMonth(Number(event.target.value));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarMonthSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForCalendarMonthSelect, isStandalone: true, selector: "select[forCalendarMonthSelect]", host: { listeners: { "change": "onChange($event)" }, properties: { "value": "ctx.visibleMonthNumber()", "disabled": "ctx.disabled()" } }, exportAs: ["forCalendarMonthSelect"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarMonthSelect, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'select[forCalendarMonthSelect]',
+                    exportAs: 'forCalendarMonthSelect',
+                    host: {
+                        '[value]': 'ctx.visibleMonthNumber()',
+                        '[disabled]': 'ctx.disabled()',
+                        '(change)': 'onChange($event)',
+                    },
+                }]
+        }] });
+
+/**
+ * Wires a native `<select>` to a `ForCalendar`'s year navigation. Apply on a
+ * `<select>` element inside `[forCalendar]`: the directive keeps the select
+ * showing the visible year and navigates the calendar when the user picks a
+ * different one, without mutating the selected date.
+ *
+ * Render the `<option>` elements yourself from {@link years} so you keep full
+ * control over their markup:
+ *
+ * ```html
+ * <select forCalendarYearSelect #y="forCalendarYearSelect" [minYear]="1900" [maxYear]="2100">
+ *   @for (opt of y.years(); track opt.value) {
+ *     <option [value]="opt.value" [disabled]="opt.disabled">{{ opt.value }}</option>
+ *   }
+ * </select>
+ * ```
+ */
+class ForCalendarYearSelect {
+    ctx = injectCalendarContext('ForCalendarYearSelect');
+    /**
+     * Lowest year listed in {@link years}. Defaults to 100 years before the
+     * current year when `null`.
+     */
+    minYear = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minYear" }] : /* istanbul ignore next */ []));
+    /**
+     * Highest year listed in {@link years}. Defaults to 10 years after the
+     * current year when `null`.
+     */
+    maxYear = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxYear" }] : /* istanbul ignore next */ []));
+    /**
+     * The selectable years, from {@link minYear} to {@link maxYear} inclusive.
+     * Each entry is `disabled` when the whole year falls outside the calendar's
+     * `[min, max]`. The default window is anchored to the current year (not the
+     * visible year), so navigating far away never drops the current year off the
+     * list.
+     */
+    years = computed(() => {
+        const currentYear = this.ctx.adapter.getYear(this.ctx.adapter.today());
+        const min = this.minYear() ?? currentYear - 100;
+        const max = this.maxYear() ?? currentYear + 10;
+        const out = [];
+        for (let year = min; year <= max; year++) {
+            out.push({ value: year, disabled: this.ctx.isYearDisabled(year) });
+        }
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "years" }] : /* istanbul ignore next */ []));
+    onChange(event) {
+        this.ctx.goToYear(Number(event.target.value));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarYearSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForCalendarYearSelect, isStandalone: true, selector: "select[forCalendarYearSelect]", inputs: { minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "change": "onChange($event)" }, properties: { "value": "ctx.visibleYear()", "disabled": "ctx.disabled()" } }, exportAs: ["forCalendarYearSelect"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCalendarYearSelect, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'select[forCalendarYearSelect]',
+                    exportAs: 'forCalendarYearSelect',
+                    host: {
+                        '[value]': 'ctx.visibleYear()',
+                        '[disabled]': 'ctx.disabled()',
+                        '(change)': 'onChange($event)',
+                    },
+                }]
+        }], propDecorators: { minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }] } });
+
+function daysInMonth(year, month) {
+    return new Date(year, month, 0).getDate();
+}
+function clampDay(year, month, day) {
+    return new Date(year, month - 1, Math.min(day, daysInMonth(year, month)));
+}
+/**
+ * Zero-dependency {@link DateAdapter} over the built-in `Date`. `today` and
+ * `createDate` produce days at local midnight, and the calendar grid stays
+ * day-granular. It is also **time-capable** — `Date` natively carries a
+ * wall-clock time, so the optional `getHours` / `getMinutes` / `getSeconds` /
+ * `setTime` accessors are implemented, letting `ForTimeField` use this adapter
+ * directly. Consistently with that, `compare` orders by the full instant
+ * (day *and* time), matching `InternationalizedDateTimeAdapter`, so a date-time
+ * `minDate`/`maxDate` clamps identically on both.
+ *
+ * This is the fallback adapter. Prefer `provideInternationalizedDateAdapter()`
+ * for correct date-math and locale-aware formatting (or
+ * `provideInternationalizedDateTimeAdapter()` for a time-capable one); reach
+ * for this one when adding a date library to the bundle is not worthwhile. Both
+ * `Date` and the `@internationalized/date` adapters operate on the Gregorian
+ * calendar today; non-Gregorian calendar systems are deferred to #354.
+ */
+class NativeDateAdapter {
+    /**
+     * Today at local midnight in the runtime time zone. Subject to the
+     * SSR/hydration caveat on {@link DateAdapter.today}.
+     */
+    today() {
+        const now = new Date();
+        return new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    }
+    createDate(year, month, day) {
+        return clampDay(year, month, day);
+    }
+    getYear(date) {
+        return date.getFullYear();
+    }
+    getMonth(date) {
+        return date.getMonth() + 1;
+    }
+    getDate(date) {
+        return date.getDate();
+    }
+    getDayOfWeek(date) {
+        return date.getDay();
+    }
+    getDaysInMonth(date) {
+        return daysInMonth(date.getFullYear(), date.getMonth() + 1);
+    }
+    getFirstDayOfWeek() {
+        return 0;
+    }
+    addDays(date, n) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate() + n);
+    }
+    addMonths(date, n) {
+        const total = date.getMonth() + n;
+        const year = date.getFullYear() + Math.floor(total / 12);
+        const month = ((total % 12) + 12) % 12;
+        return clampDay(year, month + 1, date.getDate());
+    }
+    addYears(date, n) {
+        return clampDay(date.getFullYear() + n, date.getMonth() + 1, date.getDate());
+    }
+    compare(a, b) {
+        return a.getTime() - b.getTime();
+    }
+    isSameDay(a, b) {
+        return (a.getFullYear() === b.getFullYear() &&
+            a.getMonth() === b.getMonth() &&
+            a.getDate() === b.getDate());
+    }
+    isValid(date) {
+        return date instanceof Date && !Number.isNaN(date.getTime());
+    }
+    /**
+     * Formats through the runtime's default locale. Subject to the SSR/hydration
+     * caveat on {@link DateAdapter.format}.
+     */
+    format(date, options) {
+        return new Intl.DateTimeFormat(undefined, options).format(date);
+    }
+    supportsTime() {
+        return true;
+    }
+    getHours(date) {
+        return date.getHours();
+    }
+    getMinutes(date) {
+        return date.getMinutes();
+    }
+    getSeconds(date) {
+        return date.getSeconds();
+    }
+    setTime(date, hours, minutes, seconds) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate(), hours, minutes, seconds);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NativeDateAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NativeDateAdapter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NativeDateAdapter, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * Provides the zero-dependency {@link NativeDateAdapter} as the active
+ * {@link DateAdapter}. Add to your application or component providers when
+ * `ForCalendar` should operate on native `Date` values.
+ *
+ * @example
+ * ```ts
+ * bootstrapApplication(App, {
+ *   providers: [provideNativeDateAdapter()],
+ * });
+ * ```
+ */
+function provideNativeDateAdapter() {
+    return [{ provide: FOR_DATE_ADAPTER, useClass: NativeDateAdapter }];
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FOR_CALENDAR_CONTEXT, FOR_CALENDAR_DEFAULTS, ForCalendar, ForCalendarCell, ForCalendarGrid, ForCalendarGridHeader, ForCalendarHeading, ForCalendarMonthCell, ForCalendarMonthGrid, ForCalendarMonthSelect, ForCalendarNextButton, ForCalendarPrevButton, ForCalendarViewTrigger, ForCalendarYearCell, ForCalendarYearGrid, ForCalendarYearSelect, NativeDateAdapter, provideForCalendarDefaults, provideNativeDateAdapter };
+//# sourceMappingURL=forty-cdk-calendar.mjs.map