@cdevhub/ngx-tw 0.2.0

package/fesm2022/cdevhub-ngx-tw-calendar.mjs

@@ -0,0 +1,4482 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, ChangeDetectionStrategy, Component, Injectable, InjectionToken, viewChild, inject, signal, afterEveryRender, Directive, viewChildren, ElementRef, Injector, DestroyRef, LOCALE_ID, runInInjectionContext, model, linkedSignal, untracked, effect, isDevMode, forwardRef, makeEnvironmentProviders } from '@angular/core';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Validators, NgControl, FormResetEvent, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { tv } from 'tailwind-variants';
+import { NgTemplateOutlet } from '@angular/common';
+
+const headerVariants = tv({
+    slots: {
+        root: 'flex items-center justify-between px-2 py-1 mb-2',
+        navButton: 'inline-flex items-center justify-center select-none h-9 w-9 rounded-full text-fg hover:bg-surface-muted transition-colors duration-normal motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 disabled:cursor-not-allowed disabled:text-fg-subtle disabled:hover:bg-transparent',
+        periodButton: 'inline-flex items-center justify-center select-none px-3 py-1.5 text-sm font-semibold rounded-md text-fg hover:bg-surface-muted transition-colors duration-normal motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 disabled:cursor-not-allowed disabled:text-fg-subtle disabled:hover:bg-transparent',
+    },
+    variants: {},
+    defaultVariants: {},
+}, { twMerge: true });
+/**
+ * Calendar navigation header — previous / period / next button row.
+ * The period label button toggles between views (month → year → multi-year).
+ */
+class CalendarHeaderComponent {
+    /** Display text for the period button (e.g. "January 2026"). */
+    periodLabel = input.required(...(ngDevMode ? [{ debugName: "periodLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the period button. */
+    periodAriaLabel = input.required(...(ngDevMode ? [{ debugName: "periodAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the previous button. */
+    prevAriaLabel = input.required(...(ngDevMode ? [{ debugName: "prevAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the next button. */
+    nextAriaLabel = input.required(...(ngDevMode ? [{ debugName: "nextAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Disables the previous button. */
+    prevDisabled = input(false, ...(ngDevMode ? [{ debugName: "prevDisabled" }] : /* istanbul ignore next */ []));
+    /** Disables the next button. */
+    nextDisabled = input(false, ...(ngDevMode ? [{ debugName: "nextDisabled" }] : /* istanbul ignore next */ []));
+    /** When false, the period button is disabled (e.g. when already at the top view). */
+    // TRUE-default: the period button is the calendar header's primary drill-up
+    // affordance; disabling it is reserved for the top view where there's nowhere
+    // to drill up to.
+    canSwitchView = input(true, ...(ngDevMode ? [{ debugName: "canSwitchView" }] : /* istanbul ignore next */ []));
+    /** Fires on previous button click. */
+    prevClicked = output();
+    /** Fires on next button click. */
+    nextClicked = output();
+    /** Fires on period button click (switch to the next higher view). */
+    periodClicked = output();
+    classes = computed(() => {
+        const v = headerVariants();
+        return { root: v.root(), navButton: v.navButton(), periodButton: v.periodButton() };
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    onPeriodClick() {
+        if (this.canSwitchView())
+            this.periodClicked.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: CalendarHeaderComponent, isStandalone: true, selector: "tw-calendar-header", inputs: { periodLabel: { classPropertyName: "periodLabel", publicName: "periodLabel", isSignal: true, isRequired: true, transformFunction: null }, periodAriaLabel: { classPropertyName: "periodAriaLabel", publicName: "periodAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, prevAriaLabel: { classPropertyName: "prevAriaLabel", publicName: "prevAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, nextAriaLabel: { classPropertyName: "nextAriaLabel", publicName: "nextAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, prevDisabled: { classPropertyName: "prevDisabled", publicName: "prevDisabled", isSignal: true, isRequired: false, transformFunction: null }, nextDisabled: { classPropertyName: "nextDisabled", publicName: "nextDisabled", isSignal: true, isRequired: false, transformFunction: null }, canSwitchView: { classPropertyName: "canSwitchView", publicName: "canSwitchView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevClicked: "prevClicked", nextClicked: "nextClicked", periodClicked: "periodClicked" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div [class]="classes().root">
+      <button
+        type="button"
+        [class]="classes().navButton"
+        [disabled]="prevDisabled()"
+        [attr.aria-label]="prevAriaLabel()"
+        (click)="prevClicked.emit()"
+      >
+        <svg
+          class="size-5"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            d="M15 18l-6-6 6-6"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+
+      <button
+        type="button"
+        [class]="classes().periodButton"
+        [attr.aria-label]="periodAriaLabel()"
+        [disabled]="!canSwitchView()"
+        (click)="onPeriodClick()"
+      >
+        {{ periodLabel() }}
+      </button>
+
+      <button
+        type="button"
+        [class]="classes().navButton"
+        [disabled]="nextDisabled()"
+        [attr.aria-label]="nextAriaLabel()"
+        (click)="nextClicked.emit()"
+      >
+        <svg
+          class="size-5"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            d="M9 18l6-6-6-6"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-calendar-header',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                    template: `
+    <div [class]="classes().root">
+      <button
+        type="button"
+        [class]="classes().navButton"
+        [disabled]="prevDisabled()"
+        [attr.aria-label]="prevAriaLabel()"
+        (click)="prevClicked.emit()"
+      >
+        <svg
+          class="size-5"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            d="M15 18l-6-6 6-6"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+
+      <button
+        type="button"
+        [class]="classes().periodButton"
+        [attr.aria-label]="periodAriaLabel()"
+        [disabled]="!canSwitchView()"
+        (click)="onPeriodClick()"
+      >
+        {{ periodLabel() }}
+      </button>
+
+      <button
+        type="button"
+        [class]="classes().navButton"
+        [disabled]="nextDisabled()"
+        [attr.aria-label]="nextAriaLabel()"
+        (click)="nextClicked.emit()"
+      >
+        <svg
+          class="size-5"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            d="M9 18l6-6-6-6"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+    </div>
+  `,
+                }]
+        }], propDecorators: { periodLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "periodLabel", required: true }] }], periodAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "periodAriaLabel", required: true }] }], prevAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevAriaLabel", required: true }] }], nextAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextAriaLabel", required: true }] }], prevDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevDisabled", required: false }] }], nextDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextDisabled", required: false }] }], canSwitchView: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSwitchView", required: false }] }], prevClicked: [{ type: i0.Output, args: ["prevClicked"] }], nextClicked: [{ type: i0.Output, args: ["nextClicked"] }], periodClicked: [{ type: i0.Output, args: ["periodClicked"] }] } });
+
+/**
+ * Localized strings + ARIA announcements consumed by the calendar (§19.4).
+ *
+ * Override per-field via Angular DI — provide a custom instance, or pass a
+ * `Partial<CalendarIntl>` into the calendar component's `intl` input. Unset
+ * fields fall through to the English defaults shipped here.
+ *
+ * All members take primitives so consumers can write straight string
+ * literals or template helpers without depending on internal types.
+ */
+class CalendarIntl {
+    /**
+     * Plural rules used for the four plural-marked keys in §19.4: range length,
+     * "X dates selected", "Skipped {N} periods", and the year-range button label.
+     * Resolved lazily so SSR / non-`Intl` environments don't crash at construction.
+     */
+    _plural = null;
+    getPlural() {
+        if (this._plural !== null)
+            return this._plural;
+        this._plural =
+            typeof Intl !== 'undefined' && typeof Intl.PluralRules === 'function'
+                ? new Intl.PluralRules('en')
+                : { select: (n) => (n === 1 ? 'one' : 'other') };
+        return this._plural;
+    }
+    // ---------------------------------------------------------------------------
+    // Button labels (§19.4)
+    // ---------------------------------------------------------------------------
+    /** Aria label for the "previous month" navigation button (day view). */
+    previousMonthLabel = 'Previous month';
+    /** Aria label for the "next month" navigation button (day view). */
+    nextMonthLabel = 'Next month';
+    /** Aria label for the "previous year" navigation button (month view). */
+    previousYearLabel = 'Previous year';
+    /** Aria label for the "next year" navigation button (month view). */
+    nextYearLabel = 'Next year';
+    /** Aria label for the "previous N years" navigation button (year view). */
+    previousYearsLabel(yearsPerPage) {
+        const cat = this.getPlural().select(yearsPerPage);
+        return cat === 'one' ? `Previous ${yearsPerPage} year` : `Previous ${yearsPerPage} years`;
+    }
+    /** Aria label for the "next N years" navigation button (year view). */
+    nextYearsLabel(yearsPerPage) {
+        const cat = this.getPlural().select(yearsPerPage);
+        return cat === 'one' ? `Next ${yearsPerPage} year` : `Next ${yearsPerPage} years`;
+    }
+    /** Aria label for the "today" shortcut button (footer). */
+    todayLabel = 'Today';
+    /** Aria label for the "clear" button (footer). */
+    clearLabel = 'Clear';
+    /** Aria label for the "apply" button (footer). */
+    applyLabel = 'Apply';
+    /** Aria label for the trigger/open-calendar button. */
+    openCalendarLabel = 'Open calendar';
+    /** Aria label for the "choose date" trigger. */
+    chooseDateLabel = 'Choose date';
+    // ---------------------------------------------------------------------------
+    // View labels (§19.4)
+    // ---------------------------------------------------------------------------
+    /** Aria label applied to the calendar root element. */
+    calendarLabel = 'Calendar';
+    /** Aria label appended to the period button while in the day view. */
+    monthViewLabel = 'month view';
+    /** Aria label appended to the period button while in the month view. */
+    yearViewLabel = 'year view';
+    /** Aria label for the year (decade) view. */
+    decadeViewLabel = 'decade view';
+    /** Tooltip / aria text for the "switch to month view" affordance. */
+    switchToMonthViewLabel(period) {
+        return `${period}, click to switch to month view`;
+    }
+    /** Tooltip / aria text for the "switch to year view" affordance. */
+    switchToYearViewLabel(period) {
+        return `${period}, click to switch to year view`;
+    }
+    // ---------------------------------------------------------------------------
+    // Cell accessible names (§15.6, §19.4)
+    // ---------------------------------------------------------------------------
+    /**
+     * Returns the accessible name a screen reader announces for any cell.
+     * Default implementation appends "today" / "selected" / "disabled" suffixes
+     * to the supplied `display` string.
+     */
+    cellAccessibleName(ctx) {
+        const base = ctx.display ?? '';
+        const tags = [];
+        if (ctx.today)
+            tags.push('today');
+        if (ctx.selected)
+            tags.push('selected');
+        if (ctx.disabled)
+            tags.push('disabled');
+        return tags.length === 0 ? base : `${base}, ${tags.join(', ')}`;
+    }
+    // ---------------------------------------------------------------------------
+    // ARIA announcements (§15.7, §19.4)
+    // ---------------------------------------------------------------------------
+    /** Live-region message after navigating the displayed period. */
+    navigatedTo(direction, period) {
+        return `Navigated to ${direction} ${period}`;
+    }
+    /** Live-region message after a single-mode selection commits. */
+    selectedAnnouncement(value) {
+        return `Selected ${value}`;
+    }
+    /** Live-region message after the start of a range is picked. */
+    rangeStartAnnouncement(start) {
+        return `Start date selected: ${start}. Now select end date.`;
+    }
+    /** Live-region message after a range commits. Plural-marked on `lengthDays`. */
+    rangeUpdateAnnouncement(start, end, lengthDays) {
+        const cat = this.getPlural().select(lengthDays);
+        const noun = cat === 'one' ? 'day' : 'days';
+        return `Range selected: ${start} to ${end}, ${lengthDays} ${noun}`;
+    }
+    /** Live-region message after a `mode: 'multiple'` selection commits. Plural-marked. */
+    multipleSelectionAnnouncement(count) {
+        const cat = this.getPlural().select(count);
+        const noun = cat === 'one' ? 'date' : 'dates';
+        return `${count} ${noun} selected`;
+    }
+    /** Live-region message after the active view changes. */
+    viewSwitched(view, period) {
+        const label = view === 'day' ? this.monthViewLabel.replace(/ view$/, '') : view === 'month' ? this.yearViewLabel.replace(/ view$/, '') : this.decadeViewLabel.replace(/ view$/, '');
+        return `${label} view, ${period}`;
+    }
+    /** Live-region template used while a range pick is in progress. */
+    inProgressTemplate(state) {
+        return `Selecting: ${state}, now select end date`;
+    }
+    /** Live-region message announcing how many empty periods auto-skip jumped over. Plural-marked. */
+    skippedPeriods(count, destination) {
+        const cat = this.getPlural().select(count);
+        const noun = cat === 'one' ? 'period' : 'periods';
+        return `Skipped ${count} ${noun} to ${destination}`;
+    }
+    /** Live-region message announced when a click is rejected and the cell flashes (e.g. `'require-clear'` rejection, disabled-cross range commit). */
+    selectionRejectedAnnouncement = 'Selection rejected';
+    /**
+     * When `true`, the calendar suppresses live-region announcements for the
+     * affected user actions. Override in tests or low-noise environments.
+     */
+    skipAnnouncement = false;
+    // ---------------------------------------------------------------------------
+    // Error messages (§10.2, §19.4)
+    // ---------------------------------------------------------------------------
+    /** Message for the `calendarRequired` validation error. */
+    requiredError = 'Please select a date';
+    /** Message for the `calendarMinDate` validation error. */
+    minDateError(date) {
+        return `Date must be on or after ${date}`;
+    }
+    /** Message for the `calendarMaxDate` validation error. */
+    maxDateError(date) {
+        return `Date must be on or before ${date}`;
+    }
+    /** Message for the `calendarInvalidValue` validation error. */
+    invalidValueError = 'Invalid date value';
+    /** Message for the `calendarRangeTooShort` validation error. Plural-marked on `min`. */
+    rangeTooShortError(min) {
+        const cat = this.getPlural().select(min);
+        const noun = cat === 'one' ? 'day' : 'days';
+        return `Range must be at least ${min} ${noun}`;
+    }
+    /** Message for the `calendarRangeTooLong` validation error. Plural-marked on `max`. */
+    rangeTooLongError(max) {
+        const cat = this.getPlural().select(max);
+        const noun = cat === 'one' ? 'day' : 'days';
+        return `Range must be at most ${max} ${noun}`;
+    }
+    /** Message for the `calendarInvalidRange` validation error. */
+    invalidRangeError = 'Invalid date range';
+    /** Message for the `calendarDisabledDate` validation error. */
+    dateFilterError = 'This date is not available';
+    /** Message for the `calendarMaxSelections` validation error. */
+    maxSelectionsError(limit) {
+        const cat = this.getPlural().select(limit);
+        const noun = cat === 'one' ? 'date' : 'dates';
+        return `You may select at most ${limit} ${noun}`;
+    }
+    // ---------------------------------------------------------------------------
+    // Parse-error label (§10.2, §19.4)
+    // ---------------------------------------------------------------------------
+    /** Label announced when a typed date fails to parse. */
+    parseErrorLabel = 'Invalid date format';
+    // ---------------------------------------------------------------------------
+    // Keyboard help (§16.4, §19.4)
+    // ---------------------------------------------------------------------------
+    /** Multi-line description of the keyboard contract for screen readers / help dialogs. */
+    keyboardHelpText = [
+        'Use arrow keys to move between dates.',
+        'Press Enter or Space to select the focused date.',
+        'Use Page Up and Page Down to move between months.',
+        'Use Shift + Page Up and Shift + Page Down to move between years.',
+        'Use Home and End to jump to the start or end of the week.',
+        'Press Escape to close the calendar.',
+    ].join(' ');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarIntl });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarIntl, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * Provides a custom `CalendarIntl` instance. Place at any injector level —
+ * the calendar resolves the closest one and merges any per-instance `intl`
+ * input on top of it (§19.4 per-field merge semantics).
+ */
+function provideCalendarIntl(custom) {
+    return {
+        provide: CalendarIntl,
+        useFactory: () => Object.assign(new CalendarIntl(), custom),
+    };
+}
+
+/**
+ * Calendar shared types. Aligned with `docs/requirements/calendar-component-requirements.md` v2.6
+ * (§7.1, §7.4, §8, §10.2, §22.5, §33).
+ */
+/** Mode-agnostic empty value — `null` for single, `[]` for multiple, `{ start: null, end: null }` for range. */
+function emptyCalendarValue(mode) {
+    if (mode === 'single')
+        return null;
+    if (mode === 'multiple')
+        return [];
+    return { start: null, end: null };
+}
+/** Factory for a plain `DateRange<D>`. */
+function createDateRange(start, end) {
+    return { start, end };
+}
+/** Factory for a `CalendarCell` with boolean state fields zeroed out. */
+function createCalendarCell(config) {
+    return {
+        value: config.value,
+        displayValue: config.displayValue,
+        ariaLabel: config.ariaLabel,
+        enabled: config.enabled ?? true,
+        cssClasses: config.cssClasses ?? '',
+        compareValue: config.compareValue,
+        isToday: false,
+        isSelected: false,
+        isRangeStart: false,
+        isRangeMiddle: false,
+        isRangeEnd: false,
+        isPreviewStart: false,
+        isPreviewMiddle: false,
+        isPreviewEnd: false,
+        isOutOfMonth: false,
+        isWeekend: false,
+        isInvalidPreview: false,
+        isInvalidFlash: false,
+    };
+}
+/** Days in a week. */
+const DAYS_PER_WEEK = 7;
+/** Rows in a month grid. */
+const WEEKS_PER_MONTH = 6;
+/** Default years shown per page in the year view. Phase 7 replaces this constant with the `yearsPerPage` input (default 20 per §33.1). */
+const YEARS_PER_PAGE = 24;
+/** Years per row in the year view. */
+const YEARS_PER_ROW = 4;
+/** Months per row in the month (of year) view. */
+const MONTHS_PER_ROW = 4;
+
+/** Pure helpers for CalendarComponent's ControlValueAccessor implementation. Extracted to keep `calendar.ts` focused on the class wiring; behavior is unchanged. */
+/**
+ * `true` when the incoming value's shape matches the shape required by `mode`.
+ * `null` / `undefined` is handled upstream by callers and is NOT considered here.
+ *
+ * - `single`: anything that is not an array and not a `{ start, end }` object.
+ * - `multiple`: any array.
+ * - `range`: a non-array object with both `start` and `end` keys.
+ */
+function matchesModeShape(mode, value) {
+    if (mode === 'single') {
+        if (Array.isArray(value))
+            return false;
+        if (typeof value === 'object' && value !== null) {
+            const r = value;
+            if ('start' in r && 'end' in r)
+                return false;
+        }
+        return true;
+    }
+    if (mode === 'multiple') {
+        return Array.isArray(value);
+    }
+    // range
+    if (typeof value !== 'object' || value === null)
+        return false;
+    if (Array.isArray(value))
+        return false;
+    const range = value;
+    return 'start' in range && 'end' in range;
+}
+/**
+ * `true` when the incoming value is a partial range (`{ start: D, end: null }`).
+ * Per §7.2, only EMPTY or COMPLETE shapes are valid form values for `mode: 'range'`,
+ * so partial ranges arriving via `writeValue` are rejected.
+ *
+ * Caller must already have confirmed `mode === 'range'` and `matchesModeShape` passed.
+ */
+function isPartialRangeValue(value) {
+    if (typeof value !== 'object' || value === null)
+        return false;
+    const r = value;
+    return r.start != null && r.end == null;
+}
+/** `true` when `value` is the mode-agnostic empty value (null, `[]`, or `{ start: null, end: null }`). */
+function isEmptyCalendarValue(value) {
+    if (value == null)
+        return true;
+    if (Array.isArray(value))
+        return value.length === 0;
+    if (typeof value === 'object' && 'start' in value && 'end' in value) {
+        const r = value;
+        return r.start == null && r.end == null;
+    }
+    return false;
+}
+/** Derives selection state from a value shape. Used by `writeValue` to reconcile post-write state. */
+function deriveSelectionStateFromValue(value) {
+    return isEmptyCalendarValue(value) ? 'EMPTY' : 'COMPLETE';
+}
+
+/** Arranges a flat array of items into a 2D grid with `columns` items per row. */
+function createGrid(items, columns) {
+    const grid = [];
+    for (let i = 0; i < items.length; i += columns) {
+        grid.push(items.slice(i, i + columns));
+    }
+    return grid;
+}
+/** Returns the new flat index after an arrow-key navigation step, or `null` on out of bounds. */
+function navigateGrid(currentIndex, direction, totalItems, columns) {
+    let next;
+    switch (direction) {
+        case 'left':
+            next = currentIndex - 1;
+            break;
+        case 'right':
+            next = currentIndex + 1;
+            break;
+        case 'up':
+            next = currentIndex - columns;
+            break;
+        case 'down':
+            next = currentIndex + columns;
+            break;
+    }
+    if (next < 0 || next >= totalItems)
+        return null;
+    return next;
+}
+/** Builds seven weekday headers rotated to start at `firstDayOfWeek` (or adapter default). */
+function getWeekdayHeaders(adapter, style = 'long', firstDayOfWeek) {
+    const start = firstDayOfWeek ?? adapter.getFirstDayOfWeek();
+    const longNames = adapter.getDayOfWeekNames(style);
+    const narrowNames = adapter.getDayOfWeekNames('narrow');
+    const out = [];
+    for (let i = 0; i < 7; i++) {
+        const idx = (start + i) % 7;
+        out.push({ label: longNames[idx] ?? '', narrow: narrowNames[idx] ?? '' });
+    }
+    return out;
+}
+/**
+ * True when `date` falls outside `[minDate, maxDate]` or fails the filter.
+ *
+ * Phase 4 superset: also OR-checks `disabledDates` (array OR predicate) and
+ * `disabledDaysOfWeek`. Legacy callers passing only the first four arguments
+ * keep working — the new sources default to neutral values.
+ */
+function isDateDisabled(date, minDate, maxDate, dateFilter, adapter, disabledDates = null, disabledDaysOfWeek = []) {
+    if (minDate && adapter.compare(date, minDate) < 0)
+        return true;
+    if (maxDate && adapter.compare(date, maxDate) > 0)
+        return true;
+    if (dateFilter && !dateFilter(date))
+        return true;
+    if (disabledDaysOfWeek.length > 0) {
+        if (disabledDaysOfWeek.includes(adapter.getDayOfWeek(date)))
+            return true;
+    }
+    if (disabledDates) {
+        if (typeof disabledDates === 'function') {
+            if (disabledDates(date))
+                return true;
+        }
+        else {
+            for (const d of disabledDates) {
+                if (adapter.sameDate(date, d))
+                    return true;
+            }
+        }
+    }
+    return false;
+}
+/**
+ * Phase 4 single-call constraint resolver — `true` when ANY source disables `date`.
+ * Equivalent to `isDateDisabled(date, c.minDate, c.maxDate, c.dateFilter, adapter, c.disabledDates, c.disabledDaysOfWeek)`
+ * but accepts the spec-shaped `CalendarConstraints<D>` aggregate.
+ */
+function resolveDateDisabled(date, constraints, adapter) {
+    return isDateDisabled(date, constraints.minDate ?? null, constraints.maxDate ?? null, constraints.dateFilter ?? null, adapter, constraints.disabledDates ?? null, constraints.disabledDaysOfWeek ?? []);
+}
+/**
+ * True when `date` is a weekend day (Saturday or Sunday by default — `adapter.getDayOfWeek`
+ * returns `0` for Sunday and `6` for Saturday in the Gregorian contract). The optional
+ * `weekendDays` parameter lets a consumer override per locale (e.g. `[5, 6]` for ar-SA).
+ */
+function isWeekend(date, adapter, weekendDays = [0, 6]) {
+    return weekendDays.includes(adapter.getDayOfWeek(date));
+}
+/**
+ * Inclusive day-count between `start` and `end` — used for `minRangeLength` /
+ * `maxRangeLength` validation and the `rangeUpdateAnnouncement` length argument.
+ * Assumes `start <= end` (call-sites normalize first).
+ */
+function rangeLengthDays(start, end, adapter) {
+    let n = 1;
+    let cursor = start;
+    // Walk day-by-day to keep the math adapter-agnostic and DST-safe.
+    // For ranges over a few months this is still microseconds.
+    while (adapter.compare(cursor, end) < 0) {
+        cursor = adapter.addDays(cursor, 1);
+        n++;
+    }
+    return n;
+}
+/**
+ * `true` when ANY date strictly between `start` and `end` (exclusive of the
+ * endpoints when `includeEndpoints` is `false`) is disabled by `constraints`.
+ * Used by `disableRangesCrossingDisabledDates` and the `invalidPreview` flag.
+ */
+function rangeCrossesDisabled(start, end, constraints, adapter, includeEndpoints = true) {
+    let cursor = includeEndpoints ? start : adapter.addDays(start, 1);
+    const limit = includeEndpoints ? end : adapter.addDays(end, -1);
+    while (adapter.compare(cursor, limit) <= 0) {
+        if (resolveDateDisabled(cursor, constraints, adapter))
+            return true;
+        cursor = adapter.addDays(cursor, 1);
+    }
+    return false;
+}
+/** True when the whole month falls outside `[minDate, maxDate]`. `month` is 0-based (matches `adapter.getMonth`). */
+function isMonthDisabled(year, month, minDate, maxDate, adapter) {
+    const firstOfMonth = adapter.create(year, month + 1, 1);
+    const lastOfMonth = adapter.create(year, month + 1, adapter.getNumDaysInMonth(firstOfMonth));
+    if (minDate && adapter.compare(lastOfMonth, minDate) < 0)
+        return true;
+    if (maxDate && adapter.compare(firstOfMonth, maxDate) > 0)
+        return true;
+    return false;
+}
+/** True when the whole year falls outside `[minDate, maxDate]`. */
+function isYearDisabled(year, minDate, maxDate, adapter) {
+    const firstOfYear = adapter.create(year, 1, 1);
+    const lastOfYear = adapter.create(year, 12, 31);
+    if (minDate && adapter.compare(lastOfYear, minDate) < 0)
+        return true;
+    if (maxDate && adapter.compare(firstOfYear, maxDate) > 0)
+        return true;
+    return false;
+}
+/** Aligns `activeYear` to the start of its `yearsPerPage`-block. */
+function getMultiYearStartingYear(activeYear, yearsPerPage = 24) {
+    return Math.floor(activeYear / yearsPerPage) * yearsPerPage;
+}
+/** True when `date` sits inside `[start, end]` (inclusive). */
+function isDateInRange(date, start, end, adapter) {
+    if (!start || !end)
+        return false;
+    return adapter.compare(date, start) >= 0 && adapter.compare(date, end) <= 0;
+}
+/** Returns the first day of the month for `date`. */
+function getFirstDayOfMonth(date, adapter) {
+    return adapter.create(adapter.getYear(date), adapter.getMonth(date) + 1, 1);
+}
+
+/** `true` when `value` matches the mode-specific empty state (§7.1, §6.4). */
+function isCalendarValueEmpty(mode, value) {
+    if (mode === 'single')
+        return value == null;
+    if (mode === 'multiple')
+        return !Array.isArray(value) || value.length === 0;
+    // range
+    if (value == null)
+        return true;
+    const range = value;
+    return range.start == null && range.end == null;
+}
+/**
+ * Built-in synchronous validator (§6.1, §10.2). Emits the full v1 error code set:
+ *
+ * Phase 3 codes:
+ * - `calendarRequired` when the hosting control carries `Validators.required`
+ *   and the calendar value is mode-specific empty.
+ * - `calendarInvalidValue` when the most recent `writeValue` was rejected as
+ *   wrong-shape (§7.2) — the raw value is held on the component's
+ *   `lastInvalidFormValue` until a valid write clears it.
+ *
+ * Phase 4 codes (active when `ctx.constraints` + `ctx.adapter` are supplied):
+ * - `calendarMinDate` / `calendarMaxDate` — value (or any range endpoint /
+ *   array entry) falls outside `[minDate, maxDate]`.
+ * - `calendarDisabledDate` — value matches `dateFilter` / `disabledDates` /
+ *   `disabledDaysOfWeek` (constraint resolver).
+ * - `calendarRangeTooShort` / `calendarRangeTooLong` — `mode: 'range'` length
+ *   violates `minRangeLength` / `maxRangeLength`.
+ * - `calendarMaxSelections` — `mode: 'multiple'` array exceeds `maxSelections`.
+ * - `calendarInvalidRange` — committed range has `start > end` (the orchestrator
+ *   normalizes via auto-swap; this only triggers on programmatic writeValue).
+ *
+ * Each code's payload mirrors §10.2 — `{ min, actual }`, `{ max, actual }`,
+ * `{ length, min }`, etc.
+ */
+function calendarValidator(ctx) {
+    return (control) => {
+        const errors = {};
+        if (ctx.lastInvalidFormValue !== null && ctx.lastInvalidFormValue !== undefined) {
+            errors.calendarInvalidValue = {
+                expected: ctx.mode,
+                actual: ctx.lastInvalidFormValue,
+                reason: 'shape',
+            };
+        }
+        if (control.hasValidator(Validators.required)) {
+            const value = control.value;
+            if (isCalendarValueEmpty(ctx.mode, value)) {
+                errors.calendarRequired = true;
+            }
+        }
+        // Phase 4 — constraint codes (only when the host wires constraints + adapter).
+        if (ctx.constraints && ctx.adapter) {
+            const value = control.value;
+            if (value !== null &&
+                value !== undefined &&
+                !isCalendarValueEmpty(ctx.mode, value)) {
+                applyConstraintCodes(ctx, value, errors);
+            }
+        }
+        return Object.keys(errors).length > 0 ? errors : null;
+    };
+}
+/**
+ * Mode-aware constraint validator. Mutates `errors` in place — the caller
+ * decides whether the resulting object is `null` (no codes) or non-null.
+ *
+ * @internal
+ */
+function applyConstraintCodes(ctx, value, errors) {
+    const adapter = ctx.adapter;
+    const constraints = ctx.constraints;
+    const min = constraints.minDate;
+    const max = constraints.maxDate;
+    const checkSingle = (date) => {
+        if (min && adapter.compare(date, min) < 0) {
+            errors.calendarMinDate = { min, actual: date };
+        }
+        if (max && adapter.compare(date, max) > 0) {
+            errors.calendarMaxDate = { max, actual: date };
+        }
+        if (resolveDateDisabled(date, constraints, adapter)) {
+            // Suppress when min/max already flagged the same date — `calendarDisabledDate`
+            // is the catch-all for the non-range constraint sources.
+            if (!errors.calendarMinDate && !errors.calendarMaxDate) {
+                errors.calendarDisabledDate = { actual: date };
+            }
+        }
+    };
+    if (ctx.mode === 'single') {
+        checkSingle(value);
+        return;
+    }
+    if (ctx.mode === 'multiple') {
+        const arr = value;
+        for (const d of arr) {
+            checkSingle(d);
+            if (errors.calendarMinDate || errors.calendarMaxDate || errors.calendarDisabledDate)
+                break;
+        }
+        const limit = ctx.maxSelections;
+        if (limit !== null && limit !== undefined && arr.length > limit) {
+            errors.calendarMaxSelections = { limit, actual: arr.length };
+        }
+        return;
+    }
+    // range
+    const range = value;
+    if (range.start)
+        checkSingle(range.start);
+    if (range.end)
+        checkSingle(range.end);
+    if (range.start && range.end) {
+        if (adapter.compare(range.start, range.end) > 0) {
+            errors.calendarInvalidRange = { start: range.start, end: range.end };
+            return;
+        }
+        if (rangeCrossesDisabled(range.start, range.end, constraints, adapter, false)) {
+            errors.calendarDisabledDate = { actual: range };
+        }
+        const length = rangeLengthDays(range.start, range.end, adapter);
+        const minLen = ctx.minRangeLength;
+        const maxLen = ctx.maxRangeLength;
+        if (minLen !== null && minLen !== undefined && length < minLen) {
+            errors.calendarRangeTooShort = { length, min: minLen };
+        }
+        if (maxLen !== null && maxLen !== undefined && length > maxLen) {
+            errors.calendarRangeTooLong = { length, max: maxLen };
+        }
+    }
+}
+/**
+ * Standalone required-validator helper for consumers who want to compose
+ * calendar-required on a control that is **not** bound directly to a
+ * `CalendarComponent`. The rule is identical: mode-specific empty ⇒ error.
+ */
+function calendarRequiredValidator(mode) {
+    return (control) => {
+        const value = control.value;
+        return isCalendarValueEmpty(mode, value) ? { calendarRequired: true } : null;
+    };
+}
+
+/**
+ * Injection token for a per-instance timezone override (§7.4, §4.3).
+ * When set, TZ-aware adapters resolve `today()` and date-range math against
+ * the supplied IANA timezone. Floating (naive) adapters ignore the token.
+ */
+const TZ_OVERRIDE = new InjectionToken('tw-calendar/TZ_OVERRIDE');
+/**
+ * Injection token for the default value transformer (§7.4, §7.6). Phase 14 wires
+ * the component-level `valueTransformer` input to override this DI default.
+ * Shipped as a token shell now so later phases can bind against it without a
+ * breaking change.
+ */
+const DATE_SERIALIZATION = new InjectionToken('tw-calendar/DATE_SERIALIZATION');
+/** DI token carrying the default `DateFormats`. The calendar's `dateFormats` input overrides. */
+const DATE_FORMATS = new InjectionToken('tw-calendar/DateFormats');
+/**
+ * Abstract date adapter. Ship a subclass to swap the underlying date library
+ * (Luxon, date-fns, Temporal). The calendar consumes only the methods defined
+ * here — nothing else.
+ *
+ * `D` is the native date type understood by the underlying library.
+ *
+ * Method contract aligned with spec §20.1 / §20.2: `addYears`/`addMonths`/
+ * `addDays`, `compare`, 1-based-month `create`, `toIso`/`fromIso`, and
+ * optional TZ virtuals.
+ */
+class DateAdapter {
+    /** Days per week. Override only for non-Gregorian adapters (WONT v1). */
+    getDaysInWeek() {
+        return 7;
+    }
+    /** Returns 1-based day-of-month names (`["1", "2", ..., "31"]`) for locales that localize numerals. Default implementation returns Latin digits. */
+    getDateNames(_style = 'short') {
+        return Array.from({ length: 31 }, (_, i) => String(i + 1));
+    }
+    /** Time arithmetic. Default implementation derives hours/minutes from day arithmetic via `addDays` — adapters with better precision should override. */
+    addHours(date, hours) {
+        const minutes = hours * 60;
+        return this.addMinutes(date, minutes);
+    }
+    /** ISO 8601 (`YYYY-MM-DD`) deserialization counterpart to `toIso`. */
+    fromIso(iso) {
+        return this.parse(iso);
+    }
+    /** First day of the week containing `date`. `firstDayOfWeek` defaults to `getFirstDayOfWeek()`. */
+    startOfWeek(date, firstDayOfWeek) {
+        const first = firstDayOfWeek ?? this.getFirstDayOfWeek();
+        const dow = this.getDayOfWeek(date);
+        const diff = (dow - first + this.getDaysInWeek()) % this.getDaysInWeek();
+        return this.addDays(date, -diff);
+    }
+    /** Last day of the week containing `date`. */
+    endOfWeek(date, firstDayOfWeek) {
+        return this.addDays(this.startOfWeek(date, firstDayOfWeek), this.getDaysInWeek() - 1);
+    }
+    /** Equality on year + month. */
+    sameMonth(first, second) {
+        return (this.getYear(first) === this.getYear(second) &&
+            this.getMonth(first) === this.getMonth(second));
+    }
+    /** Equality on year only. */
+    sameYear(first, second) {
+        return this.getYear(first) === this.getYear(second);
+    }
+    /** Clamp a date into the [min, max] window. */
+    clampDate(date, min, max) {
+        if (min && this.compare(date, min) < 0)
+            return min;
+        if (max && this.compare(date, max) > 0)
+            return max;
+        return date;
+    }
+    // ---------------------------------------------------------------------------
+    // Optional TZ-aware virtuals (§4.2). Floating adapters implement as
+    // pass-through; TZ-aware adapters (Luxon, Temporal) override.
+    // ---------------------------------------------------------------------------
+    /** Returns the adapter's configured timezone, or `null` for floating adapters. */
+    getTimezone() {
+        return null;
+    }
+    /** Returns a copy of `date` reinterpreted in `tz`. Floating adapters pass through. */
+    withTimezone(date, _tz) {
+        return date;
+    }
+    /** Returns `true` when `date` sits inside a DST-transition. Floating adapters return `false`. */
+    isDST(_date) {
+        return false;
+    }
+    /** Resolves an ambiguous wall-clock time (DST fall-back) to one of the two candidates. Floating adapters pass through. */
+    resolveAmbiguous(date, _prefer) {
+        return date;
+    }
+}
+/**
+ * Injection token for the calendar's `DateAdapter`. Prefer `provideNativeDateAdapter()`
+ * or `provideTwCalendar({ adapter })` over binding this token directly.
+ */
+const DATE_ADAPTER = new InjectionToken('tw-calendar/DateAdapter');
+
+const cellVariants = tv({
+    slots: {
+        wrapper: 'relative flex items-center justify-center',
+        button: 'relative flex items-center justify-center cursor-pointer select-none transition-colors duration-normal motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 disabled:cursor-not-allowed',
+    },
+    variants: {
+        view: {
+            day: { button: 'h-9 w-9 text-sm rounded-full' },
+            month: { button: 'h-10 w-16 text-sm rounded-md' },
+            year: { button: 'h-10 w-14 text-sm rounded-md' },
+        },
+        // Slot tokens own light/dark contrast — no `dark:`, no shade picks.
+        // The range wash uses `primary-soft-hover` (one step deeper than `-soft`)
+        // so the in-range band reads slightly stronger than the popover surface
+        // without competing with the selected endpoints.
+        state: {
+            default: { button: 'text-fg hover:bg-surface-muted' },
+            today: {
+                button: 'text-primary-fg font-semibold ring-1 ring-primary-border-strong hover:bg-primary-soft',
+            },
+            selected: {
+                button: 'bg-primary-solid text-primary-solid-fg font-semibold hover:bg-primary-solid-hover',
+            },
+            'range-start': {
+                button: 'bg-primary-solid text-primary-solid-fg font-semibold rounded-l-full rounded-r-none hover:bg-primary-solid-hover',
+            },
+            'range-middle': {
+                button: 'bg-primary-soft-hover text-primary-soft-fg rounded-none hover:bg-primary-soft',
+            },
+            'range-end': {
+                button: 'bg-primary-solid text-primary-solid-fg font-semibold rounded-r-full rounded-l-none hover:bg-primary-solid-hover',
+            },
+            'preview-start': {
+                button: 'bg-primary-soft-hover text-primary-soft-fg rounded-l-full rounded-r-none ring-1 ring-primary-border-strong opacity-70',
+            },
+            'preview-middle': {
+                button: 'bg-primary-soft-hover text-primary-soft-fg rounded-none opacity-70',
+            },
+            'preview-end': {
+                button: 'bg-primary-soft-hover text-primary-soft-fg rounded-r-full rounded-l-none ring-1 ring-primary-border-strong opacity-70',
+            },
+            disabled: { button: 'text-fg-subtle cursor-not-allowed hover:bg-transparent' },
+        },
+        outside: {
+            true: { button: 'text-fg-muted' },
+            false: {},
+        },
+        range: {
+            none: {},
+            start: { wrapper: 'bg-primary-soft-hover rounded-l-full' },
+            middle: { wrapper: 'bg-primary-soft-hover' },
+            end: { wrapper: 'bg-primary-soft-hover rounded-r-full' },
+            single: {},
+        },
+    },
+    compoundVariants: [
+        { state: 'disabled', outside: true, class: { button: 'text-fg-subtle' } },
+        { state: 'selected', class: { button: 'ring-0' } },
+    ],
+    defaultVariants: { view: 'day', state: 'default', outside: false, range: 'none' },
+}, { twMerge: true });
+/**
+ * Renders a single cell in any calendar view.
+ *
+ * The cell is a stateless presentation component — selection / preview /
+ * today state is all derived from the `CalendarCell<D>` data object. It
+ * emits events for clicks, keyboard navigation, mouse hover, and focus.
+ */
+class CalendarCellComponent {
+    buttonRef = viewChild('cellButton', ...(ngDevMode ? [{ debugName: "buttonRef" }] : /* istanbul ignore next */ []));
+    /** The cell data object to render. */
+    cell = input.required(...(ngDevMode ? [{ debugName: "cell" }] : /* istanbul ignore next */ []));
+    /** The active calendar view — drives cell dimensions and radius. */
+    view = input('day', ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    /** `true` when the cell's date is outside the currently displayed month. */
+    outside = input(false, ...(ngDevMode ? [{ debugName: "outside" }] : /* istanbul ignore next */ []));
+    /** Tab index for roving focus (`0` for the active cell, `-1` otherwise). */
+    tabindex = input(-1, ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
+    /** Optional template rendered inside the button — receives `{ $implicit: CalendarCell<D> }`. */
+    cellTemplate = input(null, ...(ngDevMode ? [{ debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
+    /** Emitted when the user activates the cell (click, Enter, or Space). */
+    selected = output();
+    /** Emitted when the cell gains focus. */
+    focused = output();
+    /** Emitted on pointer hover — parent uses this to drive range preview. */
+    previewed = output();
+    /** Emitted on navigation keys (arrows, Home/End, PageUp/PageDown). */
+    keyNav = output();
+    cellState = computed(() => {
+        const c = this.cell();
+        if (!c.enabled)
+            return 'disabled';
+        if (c.isRangeStart)
+            return 'range-start';
+        if (c.isRangeEnd)
+            return 'range-end';
+        if (c.isRangeMiddle)
+            return 'range-middle';
+        if (c.isPreviewStart)
+            return 'preview-start';
+        if (c.isPreviewEnd)
+            return 'preview-end';
+        if (c.isPreviewMiddle)
+            return 'preview-middle';
+        if (c.isSelected)
+            return 'selected';
+        if (c.isToday)
+            return 'today';
+        return 'default';
+    }, ...(ngDevMode ? [{ debugName: "cellState" }] : /* istanbul ignore next */ []));
+    wrapperRange = computed(() => {
+        const c = this.cell();
+        if (c.isRangeStart && c.isRangeEnd)
+            return 'single';
+        if (c.isRangeStart)
+            return 'start';
+        if (c.isRangeEnd)
+            return 'end';
+        if (c.isRangeMiddle)
+            return 'middle';
+        return 'none';
+    }, ...(ngDevMode ? [{ debugName: "wrapperRange" }] : /* istanbul ignore next */ []));
+    variantResult = computed(() => cellVariants({
+        view: this.view(),
+        state: this.cellState(),
+        outside: this.outside(),
+        range: this.wrapperRange(),
+    }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    wrapperClasses = computed(() => this.variantResult().wrapper(), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
+    buttonClasses = computed(() => {
+        const base = this.variantResult().button();
+        const extra = this.cell().cssClasses;
+        return extra ? `${base} ${extra}` : base;
+    }, ...(ngDevMode ? [{ debugName: "buttonClasses" }] : /* istanbul ignore next */ []));
+    onClick() {
+        const c = this.cell();
+        if (c.enabled)
+            this.selected.emit(c);
+    }
+    onKeydown(event) {
+        const navKeys = {
+            ArrowLeft: 'left',
+            ArrowRight: 'right',
+            ArrowUp: 'up',
+            ArrowDown: 'down',
+            Home: 'home',
+            End: 'end',
+            PageUp: 'pageUp',
+            PageDown: 'pageDown',
+        };
+        const direction = navKeys[event.key];
+        if (direction) {
+            event.preventDefault();
+            this.keyNav.emit({ direction, shiftKey: event.shiftKey, cell: this.cell() });
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            const c = this.cell();
+            if (c.enabled)
+                this.selected.emit(c);
+        }
+    }
+    onMouseEnter() {
+        this.previewed.emit(this.cell());
+    }
+    onFocus() {
+        this.focused.emit(this.cell());
+    }
+    /** Imperatively focuses this cell's button. */
+    focusButton() {
+        this.buttonRef()?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CalendarCellComponent, isStandalone: true, selector: "tw-calendar-cell", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, outside: { classPropertyName: "outside", publicName: "outside", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", focused: "focused", previewed: "previewed", keyNav: "keyNav" }, host: { attributes: { "role": "gridcell" }, properties: { "attr.data-state-today": "cell().isToday ? '' : null", "attr.data-state-selected": "cell().isSelected && !cell().isRangeStart && !cell().isRangeEnd && !cell().isRangeMiddle ? '' : null", "attr.data-state-range-start": "cell().isRangeStart ? '' : null", "attr.data-state-range-end": "cell().isRangeEnd ? '' : null", "attr.data-state-in-range": "cell().isRangeMiddle ? '' : null", "attr.data-state-range-preview-start": "cell().isPreviewStart ? '' : null", "attr.data-state-range-preview-end": "cell().isPreviewEnd ? '' : null", "attr.data-state-in-range-preview": "cell().isPreviewMiddle ? '' : null", "attr.data-state-invalid-preview": "cell().isInvalidPreview ? '' : null", "attr.data-state-invalid-flash": "cell().isInvalidFlash ? '' : null", "attr.data-state-disabled": "!cell().enabled ? '' : null", "attr.data-state-out-of-month": "outside() ? '' : null", "attr.data-state-weekend": "cell().isWeekend ? '' : null", "attr.data-state-focused": "tabindex() === 0 ? '' : null" } }, viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["cellButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div [class]="wrapperClasses()">
+      <button
+        #cellButton
+        type="button"
+        [class]="buttonClasses()"
+        [attr.aria-label]="cell().ariaLabel"
+        [attr.aria-selected]="cell().isSelected || null"
+        [attr.aria-disabled]="!cell().enabled || null"
+        [attr.aria-current]="cell().isToday ? 'date' : null"
+        [attr.tabindex]="tabindex()"
+        [disabled]="!cell().enabled"
+        (click)="onClick()"
+        (keydown)="onKeydown($event)"
+        (mouseenter)="onMouseEnter()"
+        (focus)="onFocus()"
+      >
+        @if (cellTemplate()) {
+          <ng-container
+            [ngTemplateOutlet]="cellTemplate()!"
+            [ngTemplateOutletContext]="{ $implicit: cell() }"
+          />
+        } @else {
+          {{ cell().displayValue }}
+        }
+      </button>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-calendar-cell',
+                    imports: [NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        role: 'gridcell',
+                        // Phase 4 — `data-state-*` styling contract (§34.5). Each attribute is `''`
+                        // when its boolean state is true and absent (`null`) otherwise so consumers
+                        // can target via `tw-calendar-cell[data-state-today]` selectors.
+                        '[attr.data-state-today]': "cell().isToday ? '' : null",
+                        '[attr.data-state-selected]': "cell().isSelected && !cell().isRangeStart && !cell().isRangeEnd && !cell().isRangeMiddle ? '' : null",
+                        '[attr.data-state-range-start]': "cell().isRangeStart ? '' : null",
+                        '[attr.data-state-range-end]': "cell().isRangeEnd ? '' : null",
+                        '[attr.data-state-in-range]': "cell().isRangeMiddle ? '' : null",
+                        '[attr.data-state-range-preview-start]': "cell().isPreviewStart ? '' : null",
+                        '[attr.data-state-range-preview-end]': "cell().isPreviewEnd ? '' : null",
+                        '[attr.data-state-in-range-preview]': "cell().isPreviewMiddle ? '' : null",
+                        '[attr.data-state-invalid-preview]': "cell().isInvalidPreview ? '' : null",
+                        '[attr.data-state-invalid-flash]': "cell().isInvalidFlash ? '' : null",
+                        '[attr.data-state-disabled]': "!cell().enabled ? '' : null",
+                        '[attr.data-state-out-of-month]': "outside() ? '' : null",
+                        '[attr.data-state-weekend]': "cell().isWeekend ? '' : null",
+                        '[attr.data-state-focused]': "tabindex() === 0 ? '' : null",
+                    },
+                    template: `
+    <div [class]="wrapperClasses()">
+      <button
+        #cellButton
+        type="button"
+        [class]="buttonClasses()"
+        [attr.aria-label]="cell().ariaLabel"
+        [attr.aria-selected]="cell().isSelected || null"
+        [attr.aria-disabled]="!cell().enabled || null"
+        [attr.aria-current]="cell().isToday ? 'date' : null"
+        [attr.tabindex]="tabindex()"
+        [disabled]="!cell().enabled"
+        (click)="onClick()"
+        (keydown)="onKeydown($event)"
+        (mouseenter)="onMouseEnter()"
+        (focus)="onFocus()"
+      >
+        @if (cellTemplate()) {
+          <ng-container
+            [ngTemplateOutlet]="cellTemplate()!"
+            [ngTemplateOutletContext]="{ $implicit: cell() }"
+          />
+        } @else {
+          {{ cell().displayValue }}
+        }
+      </button>
+    </div>
+  `,
+                }]
+        }], propDecorators: { buttonRef: [{ type: i0.ViewChild, args: ['cellButton', { isSignal: true }] }], cell: [{ type: i0.Input, args: [{ isSignal: true, alias: "cell", required: true }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], outside: [{ type: i0.Input, args: [{ isSignal: true, alias: "outside", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], focused: [{ type: i0.Output, args: ["focused"] }], previewed: [{ type: i0.Output, args: ["previewed"] }], keyNav: [{ type: i0.Output, args: ["keyNav"] }] } });
+
+/**
+ * Abstract base for the three calendar views. Holds shared inputs/outputs
+ * (selection, preview, min/max, filters), cell-hit helpers, and roving-focus
+ * machinery. Subclasses implement `cells`, `gridLabel`, `onKeyNav`, and
+ * `getActiveCompareValue`.
+ */
+class CalendarViewBase {
+    dateAdapter = inject(DATE_ADAPTER);
+    /** The date that anchors the grid being rendered. */
+    activeDate = input.required(...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
+    /** Current selection — scalar, array (multi), or range. */
+    selected = input(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /** Minimum selectable date. */
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    /** Maximum selectable date. */
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /** Per-date predicate — return `false` to disable. */
+    dateFilter = input(null, ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    /** Explicitly disabled dates — array (compared via `adapter.sameDate`) or predicate (returns `true` for disabled). */
+    disabledDates = input(null, ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
+    /** Days of the week to disable (0=Sun … 6=Sat). Empty array = no day-of-week disabling. */
+    disabledDaysOfWeek = input([], ...(ngDevMode ? [{ debugName: "disabledDaysOfWeek" }] : /* istanbul ignore next */ []));
+    /** Per-cell class override. */
+    dateClass = input(null, ...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
+    /** Hover-preview start (set while user is mid-range pick). */
+    previewStart = input(null, ...(ngDevMode ? [{ debugName: "previewStart" }] : /* istanbul ignore next */ []));
+    /** Hover-preview end. */
+    previewEnd = input(null, ...(ngDevMode ? [{ debugName: "previewEnd" }] : /* istanbul ignore next */ []));
+    /** Phase 6 — date that briefly flashes as invalid (rejected commit). Cleared by the orchestrator. */
+    invalidFlashDate = input(null, ...(ngDevMode ? [{ debugName: "invalidFlashDate" }] : /* istanbul ignore next */ []));
+    /** `true` when the parent calendar allows more than one cell to be selected at once. Drives `aria-multiselectable` on the grid host. */
+    multiSelectable = input(false, ...(ngDevMode ? [{ debugName: "multiSelectable" }] : /* istanbul ignore next */ []));
+    /** `true` when the parent calendar is in read-only mode. Drives `aria-readonly` on the grid host. */
+    readonlyGrid = input(false, ...(ngDevMode ? [{ debugName: "readonlyGrid" }] : /* istanbul ignore next */ []));
+    /** Optional cell-content override. */
+    cellTemplate = input(null, ...(ngDevMode ? [{ debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
+    /** Fires when the user activates an enabled cell (click, Enter, or Space). Payload is the activated cell's date. */
+    selectedChange = output();
+    /** Fires when keyboard navigation or programmatic focus moves the roving cursor to a new cell. Payload is the new active date. */
+    activeDateChange = output();
+    /** Fires on pointer hover with the hovered date, and again with `null` when the pointer leaves the grid. The parent orchestrator drives any range-preview state from this stream. */
+    previewChange = output();
+    /** Cell that should own the roving-tabindex cursor. `null` means "use `activeDate`". */
+    focusedCellValue = signal(null, ...(ngDevMode ? [{ debugName: "focusedCellValue" }] : /* istanbul ignore next */ []));
+    /** Pending focus target — drained after the next render. */
+    focusPending = signal(null, ...(ngDevMode ? [{ debugName: "focusPending" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterEveryRender(() => {
+            const pending = this.focusPending();
+            if (pending !== null) {
+                const target = this.cellComponents().find((c) => c.cell().compareValue === pending);
+                target?.focusButton();
+                this.focusPending.set(null);
+            }
+        });
+    }
+    /** Today's date — memoized per view instance. */
+    today = computed(() => this.dateAdapter.today(), ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
+    /** True when `date` is part of the committed selection. */
+    isSelected(date) {
+        const sel = this.selected();
+        if (!sel)
+            return false;
+        if (Array.isArray(sel)) {
+            return sel.some((d) => this.dateAdapter.sameDate(date, d));
+        }
+        if (this.isDateRange(sel)) {
+            const r = sel;
+            if (r.start && this.dateAdapter.sameDate(date, r.start))
+                return true;
+            if (r.end && this.dateAdapter.sameDate(date, r.end))
+                return true;
+            return false;
+        }
+        return this.dateAdapter.sameDate(date, sel);
+    }
+    isRangeStart(date) {
+        const sel = this.selected();
+        if (!sel || !this.isDateRange(sel))
+            return false;
+        return sel.start !== null && this.dateAdapter.sameDate(date, sel.start);
+    }
+    isRangeEnd(date) {
+        const sel = this.selected();
+        if (!sel || !this.isDateRange(sel))
+            return false;
+        return sel.end !== null && this.dateAdapter.sameDate(date, sel.end);
+    }
+    isRangeMiddle(date) {
+        const sel = this.selected();
+        if (!sel || !this.isDateRange(sel))
+            return false;
+        if (!sel.start || !sel.end)
+            return false;
+        return (isDateInRange(date, sel.start, sel.end, this.dateAdapter) &&
+            !this.isRangeStart(date) &&
+            !this.isRangeEnd(date));
+    }
+    isPreviewStart(date) {
+        const s = this.previewStart();
+        return s !== null && this.dateAdapter.sameDate(date, s);
+    }
+    isPreviewEnd(date) {
+        const e = this.previewEnd();
+        return e !== null && this.dateAdapter.sameDate(date, e);
+    }
+    isPreviewMiddle(date) {
+        const s = this.previewStart();
+        const e = this.previewEnd();
+        if (!s || !e)
+            return false;
+        return (isDateInRange(date, s, e, this.dateAdapter) &&
+            !this.isPreviewStart(date) &&
+            !this.isPreviewEnd(date));
+    }
+    isDateRange(value) {
+        return value !== null && typeof value === 'object' && 'start' in value && 'end' in value;
+    }
+    /** Routes a cell activation up to the parent. */
+    onCellSelected(cell) {
+        if (cell.enabled)
+            this.selectedChange.emit(cell.value);
+    }
+    /** Routes hover events up to the parent (parent drives preview state). */
+    onCellPreviewed(cell) {
+        this.previewChange.emit(cell.value);
+    }
+    /** Clears the preview when the pointer leaves the grid. */
+    onGridMouseLeave() {
+        this.previewChange.emit(null);
+    }
+    /** Returns `true` when the cell owns the roving cursor. */
+    isActiveCell(cell) {
+        const focused = this.focusedCellValue();
+        if (focused !== null)
+            return cell.compareValue === focused;
+        return this.getActiveCompareValue() === cell.compareValue;
+    }
+    /** Imperatively focuses the cell matching `compareValue` after the next render. */
+    focusCell(compareValue) {
+        this.focusedCellValue.set(compareValue);
+        this.focusPending.set(compareValue);
+    }
+    /** Focuses the cell that currently owns the roving cursor. */
+    focusActiveCell() {
+        const target = this.focusedCellValue() ?? this.getActiveCompareValue();
+        this.focusCell(target);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarViewBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: CalendarViewBase, isStandalone: true, inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, disabledDaysOfWeek: { classPropertyName: "disabledDaysOfWeek", publicName: "disabledDaysOfWeek", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, previewStart: { classPropertyName: "previewStart", publicName: "previewStart", isSignal: true, isRequired: false, transformFunction: null }, previewEnd: { classPropertyName: "previewEnd", publicName: "previewEnd", isSignal: true, isRequired: false, transformFunction: null }, invalidFlashDate: { classPropertyName: "invalidFlashDate", publicName: "invalidFlashDate", isSignal: true, isRequired: false, transformFunction: null }, multiSelectable: { classPropertyName: "multiSelectable", publicName: "multiSelectable", isSignal: true, isRequired: false, transformFunction: null }, readonlyGrid: { classPropertyName: "readonlyGrid", publicName: "readonlyGrid", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", previewChange: "previewChange" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarViewBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], disabledDaysOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDaysOfWeek", required: false }] }], dateClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateClass", required: false }] }], previewStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewStart", required: false }] }], previewEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewEnd", required: false }] }], invalidFlashDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidFlashDate", required: false }] }], multiSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelectable", required: false }] }], readonlyGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyGrid", required: false }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }], previewChange: [{ type: i0.Output, args: ["previewChange"] }] } });
+
+const TOTAL_CELLS = DAYS_PER_WEEK * WEEKS_PER_MONTH;
+/**
+ * Month view — renders a 7×6 grid of day cells, with leading/trailing days
+ * from adjacent months marked as "outside".
+ */
+class MonthViewComponent extends CalendarViewBase {
+    view = 'day';
+    cellComponents = viewChildren(CalendarCellComponent, ...(ngDevMode ? [{ debugName: "cellComponents" }] : /* istanbul ignore next */ []));
+    /** Override first day of week (0=Sun, 1=Mon). */
+    firstDayOfWeek = input(0, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    /** Index within a multi-month row (0=left, 1+=right) — used by the orchestrator to disambiguate focus. */
+    gridIndex = input(0, ...(ngDevMode ? [{ debugName: "gridIndex" }] : /* istanbul ignore next */ []));
+    weekdayHeaders = computed(() => getWeekdayHeaders(this.dateAdapter, 'long', this.firstDayOfWeek()), ...(ngDevMode ? [{ debugName: "weekdayHeaders" }] : /* istanbul ignore next */ []));
+    displayMonth = computed(() => this.dateAdapter.getMonth(this.activeDate()), ...(ngDevMode ? [{ debugName: "displayMonth" }] : /* istanbul ignore next */ []));
+    displayYear = computed(() => this.dateAdapter.getYear(this.activeDate()), ...(ngDevMode ? [{ debugName: "displayYear" }] : /* istanbul ignore next */ []));
+    cells = computed(() => {
+        const active = this.activeDate();
+        const firstOfMonth = getFirstDayOfMonth(active, this.dateAdapter);
+        const firstDayOfWeek = this.firstDayOfWeek();
+        const firstDayOfMonthWeekday = this.dateAdapter.getDayOfWeek(firstOfMonth);
+        const offset = (firstDayOfMonthWeekday - firstDayOfWeek + DAYS_PER_WEEK) % DAYS_PER_WEEK;
+        const startDate = this.dateAdapter.addDays(firstOfMonth, -offset);
+        const today = this.today();
+        const minDate = this.minDate();
+        const maxDate = this.maxDate();
+        const dateFilter = this.dateFilter();
+        const disabledDates = this.disabledDates();
+        const disabledDaysOfWeek = this.disabledDaysOfWeek();
+        const dateClass = this.dateClass();
+        const displayedMonth = this.displayMonth();
+        const days = [];
+        for (let i = 0; i < TOTAL_CELLS; i++) {
+            const date = this.dateAdapter.addDays(startDate, i);
+            const dayOfMonth = this.dateAdapter.getDate(date);
+            const cellMonth = this.dateAdapter.getMonth(date);
+            const cellYear = this.dateAdapter.getYear(date);
+            const compareValue = cellYear * 10000 + cellMonth * 100 + dayOfMonth;
+            const cell = createCalendarCell({
+                value: date,
+                displayValue: String(dayOfMonth),
+                ariaLabel: this.dateAdapter.format(date, { dateTimeFormat: { dateStyle: 'full' } }),
+                enabled: !isDateDisabled(date, minDate, maxDate, dateFilter, this.dateAdapter, disabledDates, disabledDaysOfWeek),
+                cssClasses: dateClass ? dateClass(date, this.view) : '',
+                compareValue,
+            });
+            cell.isToday = this.dateAdapter.sameDate(date, today);
+            cell.isSelected = this.isSelected(date);
+            cell.isRangeStart = this.isRangeStart(date);
+            cell.isRangeEnd = this.isRangeEnd(date);
+            cell.isRangeMiddle = this.isRangeMiddle(date);
+            cell.isPreviewStart = this.isPreviewStart(date);
+            cell.isPreviewEnd = this.isPreviewEnd(date);
+            cell.isPreviewMiddle = this.isPreviewMiddle(date);
+            cell.isOutOfMonth = cellMonth !== displayedMonth;
+            cell.isWeekend = isWeekend(date, this.dateAdapter);
+            const flashDate = this.invalidFlashDate();
+            cell.isInvalidFlash = flashDate !== null && this.dateAdapter.sameDate(date, flashDate);
+            days.push(cell);
+        }
+        return createGrid(days, DAYS_PER_WEEK);
+    }, ...(ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []));
+    gridLabel = computed(() => {
+        const months = this.dateAdapter.getMonthNames('long');
+        return `${months[this.displayMonth()]} ${this.displayYear()}`;
+    }, ...(ngDevMode ? [{ debugName: "gridLabel" }] : /* istanbul ignore next */ []));
+    getActiveCompareValue() {
+        const d = this.activeDate();
+        return (this.dateAdapter.getYear(d) * 10000 +
+            this.dateAdapter.getMonth(d) * 100 +
+            this.dateAdapter.getDate(d));
+    }
+    /** True when the cell's date sits in a neighbouring month (leading/trailing). */
+    isOutsideMonth(cell) {
+        return this.dateAdapter.getMonth(cell.value) !== this.displayMonth();
+    }
+    onKeyNav(event) {
+        const currentDate = event.cell.value;
+        let newDate = null;
+        switch (event.direction) {
+            case 'left':
+                newDate = this.dateAdapter.addDays(currentDate, -1);
+                break;
+            case 'right':
+                newDate = this.dateAdapter.addDays(currentDate, 1);
+                break;
+            case 'up':
+                newDate = this.dateAdapter.addDays(currentDate, -DAYS_PER_WEEK);
+                break;
+            case 'down':
+                newDate = this.dateAdapter.addDays(currentDate, DAYS_PER_WEEK);
+                break;
+            case 'home': {
+                const dow = this.dateAdapter.getDayOfWeek(currentDate);
+                const first = this.firstDayOfWeek();
+                const diff = (dow - first + DAYS_PER_WEEK) % DAYS_PER_WEEK;
+                newDate = this.dateAdapter.addDays(currentDate, -diff);
+                break;
+            }
+            case 'end': {
+                const dow = this.dateAdapter.getDayOfWeek(currentDate);
+                const first = this.firstDayOfWeek();
+                const daysUntilEnd = (6 - dow + first + DAYS_PER_WEEK) % DAYS_PER_WEEK;
+                newDate = this.dateAdapter.addDays(currentDate, daysUntilEnd);
+                break;
+            }
+            case 'pageUp':
+                newDate = event.shiftKey
+                    ? this.dateAdapter.addYears(currentDate, -1)
+                    : this.dateAdapter.addMonths(currentDate, -1);
+                break;
+            case 'pageDown':
+                newDate = event.shiftKey
+                    ? this.dateAdapter.addYears(currentDate, 1)
+                    : this.dateAdapter.addMonths(currentDate, 1);
+                break;
+        }
+        if (newDate) {
+            const year = this.dateAdapter.getYear(newDate);
+            const month = this.dateAdapter.getMonth(newDate);
+            const day = this.dateAdapter.getDate(newDate);
+            const compareValue = year * 10000 + month * 100 + day;
+            this.focusCell(compareValue);
+            this.activeDateChange.emit(newDate);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: MonthViewComponent, isStandalone: true, selector: "tw-calendar-month-view", inputs: { firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, gridIndex: { classPropertyName: "gridIndex", publicName: "gridIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "cellComponents", predicate: CalendarCellComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <div
+      role="grid"
+      [attr.aria-label]="gridLabel()"
+      [attr.aria-multiselectable]="multiSelectable() || null"
+      [attr.aria-readonly]="readonlyGrid() || null"
+      (mouseleave)="onGridMouseLeave()"
+    >
+      <!-- gap-0: weekday headers align column-by-column with the day grid below, which itself must be gap-0 for contiguous range backgrounds. -->
+      <div role="row" class="grid grid-cols-7 gap-0">
+        @for (header of weekdayHeaders(); track $index) {
+          <div
+            role="columnheader"
+            class="flex items-center justify-center h-9 text-2xs font-medium text-fg-muted"
+            [attr.aria-label]="header.label"
+          >
+            {{ header.narrow }}
+          </div>
+        }
+      </div>
+      @for (row of cells(); track $index) {
+        <!-- gap-0: cells must touch so range-selection wrapper backgrounds (bg-primary-100 + rounded-l/r-full) form a continuous bar across adjacent days. -->
+        <div role="row" class="grid grid-cols-7 gap-0">
+          @for (cell of row; track cell.compareValue) {
+            <tw-calendar-cell
+              [cell]="cell"
+              [view]="view"
+              [outside]="isOutsideMonth(cell)"
+              [tabindex]="isActiveCell(cell) ? 0 : -1"
+              [cellTemplate]="cellTemplate()"
+              [attr.data-compare-value]="cell.compareValue"
+              (selected)="onCellSelected($event)"
+              (previewed)="onCellPreviewed($event)"
+              (keyNav)="onKeyNav($event)"
+            />
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: CalendarCellComponent, selector: "tw-calendar-cell", inputs: ["cell", "view", "outside", "tabindex", "cellTemplate"], outputs: ["selected", "focused", "previewed", "keyNav"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MonthViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-calendar-month-view',
+                    imports: [CalendarCellComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                    template: `
+    <div
+      role="grid"
+      [attr.aria-label]="gridLabel()"
+      [attr.aria-multiselectable]="multiSelectable() || null"
+      [attr.aria-readonly]="readonlyGrid() || null"
+      (mouseleave)="onGridMouseLeave()"
+    >
+      <!-- gap-0: weekday headers align column-by-column with the day grid below, which itself must be gap-0 for contiguous range backgrounds. -->
+      <div role="row" class="grid grid-cols-7 gap-0">
+        @for (header of weekdayHeaders(); track $index) {
+          <div
+            role="columnheader"
+            class="flex items-center justify-center h-9 text-2xs font-medium text-fg-muted"
+            [attr.aria-label]="header.label"
+          >
+            {{ header.narrow }}
+          </div>
+        }
+      </div>
+      @for (row of cells(); track $index) {
+        <!-- gap-0: cells must touch so range-selection wrapper backgrounds (bg-primary-100 + rounded-l/r-full) form a continuous bar across adjacent days. -->
+        <div role="row" class="grid grid-cols-7 gap-0">
+          @for (cell of row; track cell.compareValue) {
+            <tw-calendar-cell
+              [cell]="cell"
+              [view]="view"
+              [outside]="isOutsideMonth(cell)"
+              [tabindex]="isActiveCell(cell) ? 0 : -1"
+              [cellTemplate]="cellTemplate()"
+              [attr.data-compare-value]="cell.compareValue"
+              (selected)="onCellSelected($event)"
+              (previewed)="onCellPreviewed($event)"
+              (keyNav)="onKeyNav($event)"
+            />
+          }
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { cellComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => CalendarCellComponent), { isSignal: true }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], gridIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridIndex", required: false }] }] } });
+
+const MONTHS_PER_YEAR = 12;
+/**
+ * Year view — 4×3 grid of month cells inside the active year.
+ */
+class YearViewComponent extends CalendarViewBase {
+    view = 'month';
+    cellComponents = viewChildren(CalendarCellComponent, ...(ngDevMode ? [{ debugName: "cellComponents" }] : /* istanbul ignore next */ []));
+    displayYear = computed(() => this.dateAdapter.getYear(this.activeDate()), ...(ngDevMode ? [{ debugName: "displayYear" }] : /* istanbul ignore next */ []));
+    cells = computed(() => {
+        const year = this.displayYear();
+        const monthNames = this.dateAdapter.getMonthNames('short');
+        const today = this.today();
+        const todayYear = this.dateAdapter.getYear(today);
+        const todayMonth = this.dateAdapter.getMonth(today);
+        const minDate = this.minDate();
+        const maxDate = this.maxDate();
+        const dateClass = this.dateClass();
+        const months = [];
+        for (let m = 0; m < MONTHS_PER_YEAR; m++) {
+            const date = this.dateAdapter.create(year, m + 1, 1);
+            const name = monthNames[m] ?? '';
+            const cell = createCalendarCell({
+                value: date,
+                displayValue: name,
+                ariaLabel: `${name} ${year}`,
+                enabled: !isMonthDisabled(year, m, minDate, maxDate, this.dateAdapter),
+                cssClasses: dateClass ? dateClass(date, this.view) : '',
+                compareValue: m,
+            });
+            cell.isToday = year === todayYear && m === todayMonth;
+            cell.isSelected = this.isMonthSelected(year, m);
+            cell.isRangeStart = this.isMonthRangeStart(year, m);
+            cell.isRangeEnd = this.isMonthRangeEnd(year, m);
+            cell.isRangeMiddle = this.isMonthRangeMiddle(year, m);
+            cell.isPreviewStart = this.isMonthPreviewStart(year, m);
+            cell.isPreviewEnd = this.isMonthPreviewEnd(year, m);
+            cell.isPreviewMiddle = this.isMonthPreviewMiddle(year, m);
+            months.push(cell);
+        }
+        return createGrid(months, MONTHS_PER_ROW);
+    }, ...(ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []));
+    gridLabel = computed(() => `${this.displayYear()}`, ...(ngDevMode ? [{ debugName: "gridLabel" }] : /* istanbul ignore next */ []));
+    getActiveCompareValue() {
+        return this.dateAdapter.getMonth(this.activeDate());
+    }
+    onKeyNav(event) {
+        const currentMonth = this.dateAdapter.getMonth(event.cell.value);
+        const year = this.displayYear();
+        let newDate = null;
+        switch (event.direction) {
+            case 'left':
+                if (currentMonth > 0) {
+                    newDate = this.dateAdapter.addMonths(event.cell.value, -1);
+                    this.focusCell(currentMonth - 1);
+                }
+                break;
+            case 'right':
+                if (currentMonth < 11) {
+                    newDate = this.dateAdapter.addMonths(event.cell.value, 1);
+                    this.focusCell(currentMonth + 1);
+                }
+                break;
+            case 'up':
+                if (currentMonth >= MONTHS_PER_ROW) {
+                    newDate = this.dateAdapter.addMonths(event.cell.value, -MONTHS_PER_ROW);
+                    this.focusCell(currentMonth - MONTHS_PER_ROW);
+                }
+                break;
+            case 'down':
+                if (currentMonth < MONTHS_PER_YEAR - MONTHS_PER_ROW) {
+                    newDate = this.dateAdapter.addMonths(event.cell.value, MONTHS_PER_ROW);
+                    this.focusCell(currentMonth + MONTHS_PER_ROW);
+                }
+                break;
+            case 'home':
+                newDate = this.dateAdapter.create(year, 1, 1);
+                this.focusCell(0);
+                break;
+            case 'end':
+                newDate = this.dateAdapter.create(year, 12, 1);
+                this.focusCell(11);
+                break;
+            case 'pageUp':
+                newDate = this.dateAdapter.addYears(event.cell.value, event.shiftKey ? -10 : -1);
+                break;
+            case 'pageDown':
+                newDate = this.dateAdapter.addYears(event.cell.value, event.shiftKey ? 10 : 1);
+                break;
+        }
+        if (newDate)
+            this.activeDateChange.emit(newDate);
+    }
+    isMonthSelected(year, month) {
+        const sel = this.selected();
+        if (!sel)
+            return false;
+        if (Array.isArray(sel)) {
+            return sel.some((d) => this.dateAdapter.getYear(d) === year && this.dateAdapter.getMonth(d) === month);
+        }
+        if (!this.isDateRange(sel)) {
+            return this.dateAdapter.getYear(sel) === year && this.dateAdapter.getMonth(sel) === month;
+        }
+        const r = sel;
+        if (r.start && this.dateAdapter.getYear(r.start) === year && this.dateAdapter.getMonth(r.start) === month) {
+            return true;
+        }
+        if (r.end && this.dateAdapter.getYear(r.end) === year && this.dateAdapter.getMonth(r.end) === month) {
+            return true;
+        }
+        return false;
+    }
+    isMonthRangeStart(year, month) {
+        const sel = this.selected();
+        if (!sel || !this.isDateRange(sel) || !sel.start)
+            return false;
+        return this.dateAdapter.getYear(sel.start) === year && this.dateAdapter.getMonth(sel.start) === month;
+    }
+    isMonthRangeEnd(year, month) {
+        const sel = this.selected();
+        if (!sel || !this.isDateRange(sel) || !sel.end)
+            return false;
+        return this.dateAdapter.getYear(sel.end) === year && this.dateAdapter.getMonth(sel.end) === month;
+    }
+    isMonthRangeMiddle(year, month) {
+        const sel = this.selected();
+        if (!sel || !this.isDateRange(sel) || !sel.start || !sel.end)
+            return false;
+        const monthDate = this.dateAdapter.create(year, month + 1, 1);
+        const startMonth = this.dateAdapter.create(this.dateAdapter.getYear(sel.start), this.dateAdapter.getMonth(sel.start) + 1, 1);
+        const endMonth = this.dateAdapter.create(this.dateAdapter.getYear(sel.end), this.dateAdapter.getMonth(sel.end) + 1, 1);
+        return (this.dateAdapter.compare(monthDate, startMonth) > 0 &&
+            this.dateAdapter.compare(monthDate, endMonth) < 0);
+    }
+    isMonthPreviewStart(year, month) {
+        const s = this.previewStart();
+        if (!s)
+            return false;
+        return this.dateAdapter.getYear(s) === year && this.dateAdapter.getMonth(s) === month;
+    }
+    isMonthPreviewEnd(year, month) {
+        const e = this.previewEnd();
+        if (!e)
+            return false;
+        return this.dateAdapter.getYear(e) === year && this.dateAdapter.getMonth(e) === month;
+    }
+    isMonthPreviewMiddle(year, month) {
+        const s = this.previewStart();
+        const e = this.previewEnd();
+        if (!s || !e)
+            return false;
+        const monthDate = this.dateAdapter.create(year, month + 1, 1);
+        const startMonth = this.dateAdapter.create(this.dateAdapter.getYear(s), this.dateAdapter.getMonth(s) + 1, 1);
+        const endMonth = this.dateAdapter.create(this.dateAdapter.getYear(e), this.dateAdapter.getMonth(e) + 1, 1);
+        return (this.dateAdapter.compare(monthDate, startMonth) > 0 &&
+            this.dateAdapter.compare(monthDate, endMonth) < 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YearViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: YearViewComponent, isStandalone: true, selector: "tw-calendar-year-view", host: { classAttribute: "block" }, viewQueries: [{ propertyName: "cellComponents", predicate: CalendarCellComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <div
+      role="grid"
+      [attr.aria-label]="gridLabel()"
+      [attr.aria-multiselectable]="multiSelectable() || null"
+      [attr.aria-readonly]="readonlyGrid() || null"
+      (mouseleave)="onGridMouseLeave()"
+    >
+      @for (row of cells(); track $index) {
+        <div role="row" class="grid grid-cols-4 gap-1">
+          @for (cell of row; track cell.compareValue) {
+            <tw-calendar-cell
+              [cell]="cell"
+              [view]="view"
+              [tabindex]="isActiveCell(cell) ? 0 : -1"
+              [cellTemplate]="cellTemplate()"
+              [attr.data-compare-value]="cell.compareValue"
+              (selected)="onCellSelected($event)"
+              (previewed)="onCellPreviewed($event)"
+              (keyNav)="onKeyNav($event)"
+            />
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: CalendarCellComponent, selector: "tw-calendar-cell", inputs: ["cell", "view", "outside", "tabindex", "cellTemplate"], outputs: ["selected", "focused", "previewed", "keyNav"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YearViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-calendar-year-view',
+                    imports: [CalendarCellComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                    template: `
+    <div
+      role="grid"
+      [attr.aria-label]="gridLabel()"
+      [attr.aria-multiselectable]="multiSelectable() || null"
+      [attr.aria-readonly]="readonlyGrid() || null"
+      (mouseleave)="onGridMouseLeave()"
+    >
+      @for (row of cells(); track $index) {
+        <div role="row" class="grid grid-cols-4 gap-1">
+          @for (cell of row; track cell.compareValue) {
+            <tw-calendar-cell
+              [cell]="cell"
+              [view]="view"
+              [tabindex]="isActiveCell(cell) ? 0 : -1"
+              [cellTemplate]="cellTemplate()"
+              [attr.data-compare-value]="cell.compareValue"
+              (selected)="onCellSelected($event)"
+              (previewed)="onCellPreviewed($event)"
+              (keyNav)="onKeyNav($event)"
+            />
+          }
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { cellComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => CalendarCellComponent), { isSignal: true }] }] } });
+
+/** Default years per page — kept until Phase 7 introduces the `yearsPerPage` input. */
+const yearsPerPage = YEARS_PER_PAGE;
+/**
+ * Year view — 4×6 grid (24 years by default). A user clicks a year to drill
+ * down to the month-of-year view. In the spec vocabulary this is the
+ * `'year'` view state (§7.4, §22).
+ */
+class YearsViewComponent extends CalendarViewBase {
+    view = 'year';
+    cellComponents = viewChildren(CalendarCellComponent, ...(ngDevMode ? [{ debugName: "cellComponents" }] : /* istanbul ignore next */ []));
+    startYear = computed(() => getMultiYearStartingYear(this.dateAdapter.getYear(this.activeDate()), YEARS_PER_PAGE), ...(ngDevMode ? [{ debugName: "startYear" }] : /* istanbul ignore next */ []));
+    endYear = computed(() => this.startYear() + YEARS_PER_PAGE - 1, ...(ngDevMode ? [{ debugName: "endYear" }] : /* istanbul ignore next */ []));
+    cells = computed(() => {
+        const start = this.startYear();
+        const today = this.today();
+        const todayYear = this.dateAdapter.getYear(today);
+        const minDate = this.minDate();
+        const maxDate = this.maxDate();
+        const dateClass = this.dateClass();
+        const years = [];
+        for (let i = 0; i < YEARS_PER_PAGE; i++) {
+            const year = start + i;
+            const date = this.dateAdapter.create(year, 1, 1);
+            const label = this.dateAdapter.getYearName(date);
+            const cell = createCalendarCell({
+                value: date,
+                displayValue: label,
+                ariaLabel: label,
+                enabled: !isYearDisabled(year, minDate, maxDate, this.dateAdapter),
+                cssClasses: dateClass ? dateClass(date, this.view) : '',
+                compareValue: year,
+            });
+            cell.isToday = year === todayYear;
+            cell.isSelected = this.isYearSelected(year);
+            cell.isRangeStart = this.isYearRangeStart(year);
+            cell.isRangeEnd = this.isYearRangeEnd(year);
+            cell.isRangeMiddle = this.isYearRangeMiddle(year);
+            cell.isPreviewStart = this.isYearPreviewStart(year);
+            cell.isPreviewEnd = this.isYearPreviewEnd(year);
+            cell.isPreviewMiddle = this.isYearPreviewMiddle(year);
+            years.push(cell);
+        }
+        return createGrid(years, YEARS_PER_ROW);
+    }, ...(ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []));
+    gridLabel = computed(() => `${this.startYear()} – ${this.endYear()}`, ...(ngDevMode ? [{ debugName: "gridLabel" }] : /* istanbul ignore next */ []));
+    getActiveCompareValue() {
+        return this.dateAdapter.getYear(this.activeDate());
+    }
+    onKeyNav(event) {
+        const currentYear = this.dateAdapter.getYear(event.cell.value);
+        const start = this.startYear();
+        const end = this.endYear();
+        const indexInPage = currentYear - start;
+        let newDate = null;
+        switch (event.direction) {
+            case 'left':
+                if (currentYear > start) {
+                    newDate = this.dateAdapter.addYears(event.cell.value, -1);
+                    this.focusCell(currentYear - 1);
+                }
+                break;
+            case 'right':
+                if (currentYear < end) {
+                    newDate = this.dateAdapter.addYears(event.cell.value, 1);
+                    this.focusCell(currentYear + 1);
+                }
+                break;
+            case 'up':
+                if (indexInPage >= YEARS_PER_ROW) {
+                    newDate = this.dateAdapter.addYears(event.cell.value, -YEARS_PER_ROW);
+                    this.focusCell(currentYear - YEARS_PER_ROW);
+                }
+                break;
+            case 'down':
+                if (indexInPage < YEARS_PER_PAGE - YEARS_PER_ROW) {
+                    newDate = this.dateAdapter.addYears(event.cell.value, YEARS_PER_ROW);
+                    this.focusCell(currentYear + YEARS_PER_ROW);
+                }
+                break;
+            case 'home':
+                newDate = this.dateAdapter.create(start, 1, 1);
+                this.focusCell(start);
+                break;
+            case 'end':
+                newDate = this.dateAdapter.create(end, 1, 1);
+                this.focusCell(end);
+                break;
+            case 'pageUp':
+                newDate = this.dateAdapter.addYears(event.cell.value, event.shiftKey ? -YEARS_PER_PAGE * 10 : -YEARS_PER_PAGE);
+                break;
+            case 'pageDown':
+                newDate = this.dateAdapter.addYears(event.cell.value, event.shiftKey ? YEARS_PER_PAGE * 10 : YEARS_PER_PAGE);
+                break;
+        }
+        if (newDate)
+            this.activeDateChange.emit(newDate);
+    }
+    isYearSelected(year) {
+        const sel = this.selected();
+        if (!sel)
+            return false;
+        if (Array.isArray(sel)) {
+            return sel.some((d) => this.dateAdapter.getYear(d) === year);
+        }
+        if (!this.isDateRange(sel)) {
+            return this.dateAdapter.getYear(sel) === year;
+        }
+        const r = sel;
+        if (r.start && this.dateAdapter.getYear(r.start) === year)
+            return true;
+        if (r.end && this.dateAdapter.getYear(r.end) === year)
+            return true;
+        return false;
+    }
+    isYearRangeStart(year) {
+        const sel = this.selected();
+        if (!sel || !this.isDateRange(sel) || !sel.start)
+            return false;
+        return this.dateAdapter.getYear(sel.start) === year;
+    }
+    isYearRangeEnd(year) {
+        const sel = this.selected();
+        if (!sel || !this.isDateRange(sel) || !sel.end)
+            return false;
+        return this.dateAdapter.getYear(sel.end) === year;
+    }
+    isYearRangeMiddle(year) {
+        const sel = this.selected();
+        if (!sel || !this.isDateRange(sel) || !sel.start || !sel.end)
+            return false;
+        const startYear = this.dateAdapter.getYear(sel.start);
+        const endYear = this.dateAdapter.getYear(sel.end);
+        return year > startYear && year < endYear;
+    }
+    isYearPreviewStart(year) {
+        const s = this.previewStart();
+        return s !== null && this.dateAdapter.getYear(s) === year;
+    }
+    isYearPreviewEnd(year) {
+        const e = this.previewEnd();
+        return e !== null && this.dateAdapter.getYear(e) === year;
+    }
+    isYearPreviewMiddle(year) {
+        const s = this.previewStart();
+        const e = this.previewEnd();
+        if (!s || !e)
+            return false;
+        return year > this.dateAdapter.getYear(s) && year < this.dateAdapter.getYear(e);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YearsViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: YearsViewComponent, isStandalone: true, selector: "tw-calendar-years-view", host: { classAttribute: "block" }, viewQueries: [{ propertyName: "cellComponents", predicate: CalendarCellComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <div
+      role="grid"
+      [attr.aria-label]="gridLabel()"
+      [attr.aria-multiselectable]="multiSelectable() || null"
+      [attr.aria-readonly]="readonlyGrid() || null"
+      (mouseleave)="onGridMouseLeave()"
+    >
+      @for (row of cells(); track $index) {
+        <div role="row" class="grid grid-cols-4 gap-1">
+          @for (cell of row; track cell.compareValue) {
+            <tw-calendar-cell
+              [cell]="cell"
+              [view]="view"
+              [tabindex]="isActiveCell(cell) ? 0 : -1"
+              [cellTemplate]="cellTemplate()"
+              [attr.data-compare-value]="cell.compareValue"
+              (selected)="onCellSelected($event)"
+              (previewed)="onCellPreviewed($event)"
+              (keyNav)="onKeyNav($event)"
+            />
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: CalendarCellComponent, selector: "tw-calendar-cell", inputs: ["cell", "view", "outside", "tabindex", "cellTemplate"], outputs: ["selected", "focused", "previewed", "keyNav"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YearsViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-calendar-years-view',
+                    imports: [CalendarCellComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                    template: `
+    <div
+      role="grid"
+      [attr.aria-label]="gridLabel()"
+      [attr.aria-multiselectable]="multiSelectable() || null"
+      [attr.aria-readonly]="readonlyGrid() || null"
+      (mouseleave)="onGridMouseLeave()"
+    >
+      @for (row of cells(); track $index) {
+        <div role="row" class="grid grid-cols-4 gap-1">
+          @for (cell of row; track cell.compareValue) {
+            <tw-calendar-cell
+              [cell]="cell"
+              [view]="view"
+              [tabindex]="isActiveCell(cell) ? 0 : -1"
+              [cellTemplate]="cellTemplate()"
+              [attr.data-compare-value]="cell.compareValue"
+              (selected)="onCellSelected($event)"
+              (previewed)="onCellPreviewed($event)"
+              (keyNav)="onKeyNav($event)"
+            />
+          }
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { cellComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => CalendarCellComponent), { isSignal: true }] }] } });
+
+/**
+ * Pluggable selection behaviour. Provide via `CALENDAR_SELECTION_STRATEGY` to
+ * customise how clicks mutate the calendar's `selected` value.
+ *
+ * `D` is the date type understood by the active `DateAdapter`.
+ * `S` is the shape of the `selected` value — `D | null` for single,
+ * `DateRange<D> | null` for range / week, `readonly D[]` for multi.
+ */
+class CalendarSelectionStrategy {
+}
+/** Injection token for the active selection strategy. */
+const CALENDAR_SELECTION_STRATEGY = new InjectionToken('tw-calendar/SelectionStrategy');
+
+/**
+ * Single-date selection. Every click commits a new selection immediately.
+ * No preview range. `selected` has shape `D | null`.
+ */
+class SingleSelectionStrategy extends CalendarSelectionStrategy {
+    dateAdapter = inject(DATE_ADAPTER);
+    select(date, _current) {
+        return { selection: date, isComplete: true };
+    }
+    createPreview(_active, _current) {
+        return null;
+    }
+    isSelected(date, current) {
+        if (!current)
+            return false;
+        return this.dateAdapter.sameDate(date, current);
+    }
+    isRangeStart(_date, _current) {
+        return false;
+    }
+    isRangeEnd(_date, _current) {
+        return false;
+    }
+    isRangeMiddle(_date, _current) {
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SingleSelectionStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SingleSelectionStrategy });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SingleSelectionStrategy, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Date-range selection.
+ *
+ * - First click sets the start (selection incomplete).
+ * - Second click sets the end (selection complete).
+ * - If the second date is before the first, endpoints are swapped.
+ * - Hovering after the first click produces a preview range.
+ *
+ * `selected` has shape `DateRange<D> | null`.
+ */
+class RangeSelectionStrategy extends CalendarSelectionStrategy {
+    dateAdapter = inject(DATE_ADAPTER);
+    select(date, current) {
+        // No start yet, or the previous range is already complete — start over.
+        if (!current || (current.start && current.end)) {
+            return { selection: { start: date, end: null }, isComplete: false };
+        }
+        const start = current.start;
+        let rangeStart;
+        let rangeEnd;
+        if (this.dateAdapter.compare(date, start) < 0) {
+            rangeStart = date;
+            rangeEnd = start;
+        }
+        else {
+            rangeStart = start;
+            rangeEnd = date;
+        }
+        return { selection: { start: rangeStart, end: rangeEnd }, isComplete: true };
+    }
+    createPreview(active, current) {
+        if (!active || !current?.start || current.end)
+            return null;
+        const s = current.start;
+        if (this.dateAdapter.compare(active, s) < 0) {
+            return { start: active, end: s };
+        }
+        return { start: s, end: active };
+    }
+    isSelected(date, current) {
+        if (!current)
+            return false;
+        if (current.start && this.dateAdapter.sameDate(date, current.start))
+            return true;
+        if (current.end && this.dateAdapter.sameDate(date, current.end))
+            return true;
+        return false;
+    }
+    isRangeStart(date, current) {
+        if (!current?.start)
+            return false;
+        return this.dateAdapter.sameDate(date, current.start);
+    }
+    isRangeEnd(date, current) {
+        if (!current?.end)
+            return false;
+        return this.dateAdapter.sameDate(date, current.end);
+    }
+    isRangeMiddle(date, current) {
+        if (!current?.start || !current?.end)
+            return false;
+        return (isDateInRange(date, current.start, current.end, this.dateAdapter) &&
+            !this.isRangeStart(date, current) &&
+            !this.isRangeEnd(date, current));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RangeSelectionStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RangeSelectionStrategy });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RangeSelectionStrategy, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Multi-date selection.
+ *
+ * - Each click toggles the date in/out of the selection array.
+ * - Each click commits immediately (no intermediate preview).
+ * - `selected` has shape `D[]`.
+ */
+class MultiSelectionStrategy extends CalendarSelectionStrategy {
+    dateAdapter = inject(DATE_ADAPTER);
+    select(date, current) {
+        const existing = current ?? [];
+        const index = existing.findIndex((d) => this.dateAdapter.sameDate(d, date));
+        const next = index >= 0
+            ? [...existing.slice(0, index), ...existing.slice(index + 1)]
+            : [...existing, date];
+        return { selection: next, isComplete: true };
+    }
+    createPreview(_active, _current) {
+        return null;
+    }
+    isSelected(date, current) {
+        return (current ?? []).some((d) => this.dateAdapter.sameDate(d, date));
+    }
+    isRangeStart(_date, _current) {
+        return false;
+    }
+    isRangeEnd(_date, _current) {
+        return false;
+    }
+    isRangeMiddle(_date, _current) {
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MultiSelectionStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MultiSelectionStrategy });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MultiSelectionStrategy, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Week selection.
+ *
+ * - Any click selects the entire week containing that day.
+ * - Week bounds use `DateAdapter.getFirstDayOfWeek()`.
+ * - Each click commits immediately.
+ * - Hovering previews the week the cursor is in.
+ *
+ * `selected` has shape `DateRange<D> | null`.
+ */
+class WeekSelectionStrategy extends CalendarSelectionStrategy {
+    dateAdapter = inject(DATE_ADAPTER);
+    select(date, _current) {
+        return { selection: this.weekRange(date), isComplete: true };
+    }
+    createPreview(active, _current) {
+        if (!active)
+            return null;
+        return this.weekRange(active);
+    }
+    isSelected(date, current) {
+        if (!current?.start || !current?.end)
+            return false;
+        return isDateInRange(date, current.start, current.end, this.dateAdapter);
+    }
+    isRangeStart(date, current) {
+        if (!current?.start)
+            return false;
+        return this.dateAdapter.sameDate(date, current.start);
+    }
+    isRangeEnd(date, current) {
+        if (!current?.end)
+            return false;
+        return this.dateAdapter.sameDate(date, current.end);
+    }
+    isRangeMiddle(date, current) {
+        if (!current?.start || !current?.end)
+            return false;
+        return (this.isSelected(date, current) &&
+            !this.isRangeStart(date, current) &&
+            !this.isRangeEnd(date, current));
+    }
+    weekRange(date) {
+        const dow = this.dateAdapter.getDayOfWeek(date);
+        const first = this.dateAdapter.getFirstDayOfWeek();
+        const daysToSubtract = (dow - first + 7) % 7;
+        const start = this.dateAdapter.addDays(date, -daysToSubtract);
+        const end = this.dateAdapter.addDays(start, 6);
+        return { start, end };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: WeekSelectionStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: WeekSelectionStrategy });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: WeekSelectionStrategy, decorators: [{
+            type: Injectable
+        }] });
+
+/** Provides single-date selection (default behaviour). */
+function provideSingleSelectionStrategy() {
+    return { provide: CALENDAR_SELECTION_STRATEGY, useClass: SingleSelectionStrategy };
+}
+/** Provides two-click date-range selection. */
+function provideRangeSelectionStrategy() {
+    return { provide: CALENDAR_SELECTION_STRATEGY, useClass: RangeSelectionStrategy };
+}
+/** Provides toggle-based multi-date selection. */
+function provideMultiSelectionStrategy() {
+    return { provide: CALENDAR_SELECTION_STRATEGY, useClass: MultiSelectionStrategy };
+}
+/** Provides week-at-a-time selection. */
+function provideWeekSelectionStrategy() {
+    return { provide: CALENDAR_SELECTION_STRATEGY, useClass: WeekSelectionStrategy };
+}
+/** Provides an arbitrary custom selection strategy. */
+function provideCalendarSelectionStrategy(strategy) {
+    return { provide: CALENDAR_SELECTION_STRATEGY, useClass: strategy };
+}
+
+const calendarVariants = tv({
+    slots: {
+        root: 'inline-block p-2 bg-surface text-fg',
+        months: '',
+    },
+    variants: {
+        bordered: {
+            true: { root: 'rounded-lg shadow-sm border border-border' },
+            false: {},
+        },
+        columns: {
+            1: { months: '' },
+            2: { months: 'flex gap-3' },
+        },
+    },
+    defaultVariants: { bordered: true, columns: 1 },
+}, { twMerge: true });
+/**
+ * Main calendar orchestrator. Composes the header and view components
+ * (day, month, year) with view switching, navigation, focus management,
+ * and the §8 internal state model. Every date operation is delegated to
+ * an injected `DateAdapter` — call `provideNativeDateAdapter()` in your
+ * app to bootstrap the default one.
+ *
+ * Generic parameters (§7.3):
+ * - `M` — selection mode. Narrows `value` to the mode-specific shape.
+ * - `D` — adapter date type.
+ * - `TOut` — post-transformer form value type (Phase 14 wires it; until then
+ *   it defaults to `CalendarValue<M, D>` so forms see raw adapter values).
+ */
+class CalendarComponent {
+    dateAdapter = inject(DATE_ADAPTER);
+    elementRef = inject((ElementRef));
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    liveAnnouncer = inject(LiveAnnouncer);
+    /**
+     * Resolved lazily in `ngOnInit` — eager construction-time injection creates a
+     * circular dependency (NG0200): the component registers itself as both
+     * `NG_VALUE_ACCESSOR` and `NG_VALIDATORS`, and `FormControlName` resolves
+     * those eagerly while constructing on the same element. Looking up
+     * `NgControl` after construction breaks the cycle.
+     */
+    ngControl = null;
+    /** Angular's `LOCALE_ID` — used as the fallback when no `locale` input is supplied (§19.1). */
+    platformLocale = inject(LOCALE_ID);
+    /**
+     * DI-provided default `CalendarIntl`. New'd up locally when the consumer hasn't
+     * supplied one — DI defaults are merged with the per-instance `intl` input
+     * via `effectiveIntl()` (§19.4 per-field merge).
+     */
+    injectedIntl = inject(CalendarIntl, { optional: true }) ?? new CalendarIntl();
+    injectedStrategy = inject(CALENDAR_SELECTION_STRATEGY, {
+        optional: true,
+    });
+    monthViews = viewChildren(MonthViewComponent, ...(ngDevMode ? [{ debugName: "monthViews" }] : /* istanbul ignore next */ []));
+    /**
+     * Built-in strategies instantiated lazily in the host's injection context so
+     * `inject(DATE_ADAPTER)` calls inside each strategy resolve. Range state will
+     * migrate into the orchestrator in Phase 6; single / multiple stay here as
+     * internals (not exported) via the spec's mode union.
+     */
+    localStrategies = runInInjectionContext(this.injector, () => ({
+        single: new SingleSelectionStrategy(),
+        range: new RangeSelectionStrategy(),
+        multiple: new MultiSelectionStrategy(),
+    }));
+    // ---------------------------------------------------------------------------
+    // Public inputs (§33.1)
+    // ---------------------------------------------------------------------------
+    /** Selection mode (§5). Changing this at runtime clears the value and emits `modeChange`. */
+    mode = model('single', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /**
+     * Consumer-bound value. Shape narrows by `M`: `D | null` for single,
+     * `D[]` for multiple, `{ start; end }` for range.
+     */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Anchor date for the displayed view. Defaults to today on mount. */
+    startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+    /** Minimum selectable date. */
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    /** Maximum selectable date. */
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /** Per-date predicate — return `false` to disable. */
+    dateFilter = input(null, ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    /**
+     * Explicitly disabled dates (§10.1). Either an array (each entry compared via
+     * `adapter.sameDate`) or a predicate returning `true` for disabled dates.
+     * OR-combined with `dateFilter`, `disabledDaysOfWeek`, and `[minDate, maxDate]`.
+     */
+    disabledDates = input(null, ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
+    /** Days of the week to disable (0=Sun … 6=Sat). Empty array = no day-of-week disabling. */
+    disabledDaysOfWeek = input([], ...(ngDevMode ? [{ debugName: "disabledDaysOfWeek" }] : /* istanbul ignore next */ []));
+    /**
+     * Bundle of date constraints (§10.1). Lets a consumer pass `minDate`, `maxDate`,
+     * `disabledDates`, `disabledDaysOfWeek`, and `dateFilter` as a single object —
+     * useful for sharing a constraint preset across multiple calendars. Each field is
+     * optional. Individual inputs (`minDate`, `maxDate`, `disabledDates`,
+     * `disabledDaysOfWeek`, `dateFilter`) take precedence over fields here when both
+     * are set non-null.
+     */
+    constraints = input(null, ...(ngDevMode ? [{ debugName: "constraints" }] : /* istanbul ignore next */ []));
+    /** Minimum range length in days, inclusive (`mode: 'range'` only). `null` = no minimum. */
+    minRangeLength = input(null, ...(ngDevMode ? [{ debugName: "minRangeLength" }] : /* istanbul ignore next */ []));
+    /** Maximum range length in days, inclusive (`mode: 'range'` only). `null` = no maximum. */
+    maxRangeLength = input(null, ...(ngDevMode ? [{ debugName: "maxRangeLength" }] : /* istanbul ignore next */ []));
+    /** Maximum number of selections in `mode: 'multiple'`. `null` = unlimited. */
+    maxSelections = input(null, ...(ngDevMode ? [{ debugName: "maxSelections" }] : /* istanbul ignore next */ []));
+    /**
+     * What happens when the user tries to select past `maxSelections` (§10.1).
+     * `'emit-limit-reached'` (default) emits `selectionLimitReached` and ignores
+     * the click; `'replace-oldest'` drops the first entry; `'ignore'` is silent.
+     */
+    maxSelectionBehavior = input('emit-limit-reached', ...(ngDevMode ? [{ debugName: "maxSelectionBehavior" }] : /* istanbul ignore next */ []));
+    /**
+     * IDREF list for the form-error live region (§28.3). When set, the calendar
+     * root carries `aria-describedby="<value>"` so screen readers read consumer-
+     * rendered error messages alongside the focused cell announcement.
+     */
+    errorAriaDescribedBy = input(null, ...(ngDevMode ? [{ debugName: "errorAriaDescribedBy" }] : /* istanbul ignore next */ []));
+    /**
+     * How `mode: 'range'` reacts to a click after a complete range (§21.2):
+     * - `'restart'` (default): start a new range with the clicked cell, emit `selectionRestart`.
+     * - `'nearest-edge'`: move the closer endpoint (start vs end) to the clicked date and re-commit (§21.3); emits `selectionComplete({reason: 'nearest-edge'})`.
+     * - `'require-clear'`: ignore the click + flash the cell as invalid (`data-state-invalid-flash`); user must call `clear()` first.
+     */
+    rangeClickBehavior = input('restart', ...(ngDevMode ? [{ debugName: "rangeClickBehavior" }] : /* istanbul ignore next */ []));
+    /**
+     * Range-mode behavior knobs. Accepts a partial object — unset fields use the
+     * defaults documented on each property of `RangeBehaviorConfig`. Defaults:
+     * `{ allowSingleDayRange: true, persistPartialRange: true, allowBackwardRange: false, disableRangesCrossingDisabledDates: false }`.
+     */
+    rangeBehavior = input({}, ...(ngDevMode ? [{ debugName: "rangeBehavior" }] : /* istanbul ignore next */ []));
+    /** Function producing per-cell CSS classes. */
+    dateClass = input(null, ...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
+    /** When `true`, the calendar renders with a border and a soft shadow. */
+    bordered = input(true, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    /** Which view opens first. Defaults to `'day'`. Phase 8 will derive the default from `rangeGranularity`. */
+    startView = input('day', ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
+    /** Override first day of week (0=Sun, 1=Mon). Falls back to the adapter's default. */
+    firstDayOfWeek = input(null, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    /**
+     * Number of months to display side-by-side (1 or 2). Phase 9 replaces this with a
+     * full `numberOfMonths: 1..12+` surface (§23).
+     */
+    monthColumns = input(1, ...(ngDevMode ? [{ debugName: "monthColumns" }] : /* istanbul ignore next */ []));
+    /** Disabled state. Merged with any `setDisabledState` call from a bound form control via `effectiveDisabled`. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Read-only state (§33.1). When `true`, focus and keyboard navigation still work but selections cannot be committed. */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /** How a form reset restores internal state (§6.5). `'full'` (default) also restores view + active-date; `'value-only'` clears the draft but leaves navigation where the user left it. */
+    resetBehavior = input('full', ...(ngDevMode ? [{ debugName: "resetBehavior" }] : /* istanbul ignore next */ []));
+    /** Optional cell-content template. */
+    cellTemplate = input(null, ...(ngDevMode ? [{ debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
+    /** Per-instance locale override. Falls back to Angular `LOCALE_ID` when `null` (§19.1). */
+    locale = input(null, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-instance `CalendarIntl` override (§19.4). Per-field merge — unspecified
+     * fields inherit the DI-provided default. Pass a partial bag (e.g. one of the
+     * shipped locale packs `de`, `fr`, `es`, `pt`, `ja`) or a full custom instance.
+     */
+    intl = input(null, ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
+    // ---------------------------------------------------------------------------
+    // Public outputs (§33.2). Outputs reachable only in overlay mode (opened/closed)
+    // or through constraint-aware preview (rangePreview `invalidPreview`) are declared
+    // here but wired in later phases per the plan.
+    // ---------------------------------------------------------------------------
+    /** Fires whenever the committed value changes (cell click, keyboard select, preset, mode change, programmatic clear). Payload is the untransformed mode-shaped `CalendarValue<M, D>` — `D | null` for single, `D[]` for multiple, `{ start, end }` for range (§7.6). */
+    valueChange = output();
+    /** Fires on the first click of a range selection (transitions selection state to SELECTING). Payload carries the chosen `start` date. */
+    selectionStart = output();
+    /** Fires as the hover / keyboard cursor moves during range SELECTING. Payload carries the `tentativeRange` and an `invalidPreview` flag set when the range crosses a disabled date or violates `min`/`maxRangeLength`. */
+    rangePreview = output();
+    /** Fires after `valueChange` once the selection commits. Payload carries the committed `value` and a `reason` flagging the commit path (`'commit' | 'auto-swap' | 'nearest-edge' | 'preset'`). */
+    selectionComplete = output();
+    /** Fires when a range selection restarts after a complete range (e.g. third click with `rangeClickBehavior='restart'`). Payload carries the new draft `start` date. */
+    selectionRestart = output();
+    /** Fires whenever the value clears. Payload carries a `reason` distinguishing user clear, programmatic, mode change, form reset, or a disabled flip. */
+    selectionCleared = output();
+    /** Fires in `mode: 'multiple'` when the user attempts to select past `maxSelections` (only with `maxSelectionBehavior: 'emit-limit-reached'`). Payload carries the configured `limit` and the rejected `attempted` date. */
+    selectionLimitReached = output();
+    /** Fires when the selected preset changes (user click on a preset chip, or programmatic clear). Payload is the new preset id, or `null` when no preset is active. Phase 12 wires it. */
+    presetChange = output();
+    /** Fires on every view transition (day ↔ month ↔ year). Payload carries `from`, `to`, and a `reason` distinguishing drill-down, drill-up, user header click, and programmatic changes. */
+    viewChange = output();
+    /** Fires when keyboard navigation, mouse hover, or programmatic action moves the focused (active) cell. Payload is the new active date. */
+    activeDateChange = output();
+    /** Fires when the displayed primary month changes (page-nav, drill-up, or programmatic). Payload carries the new `year` and zero-based `month`. */
+    monthChange = output();
+    /** Fires when the displayed year changes (month/year-view nav or year-page scroll). Payload carries the new `year`. */
+    yearChange = output();
+    /** Fires on every pointer click of any cell, including disabled ones — analytics only. Payload carries the clicked `date` and the underlying `PointerEvent`. Does NOT indicate a selection; subscribe to `valueChange` for that. */
+    cellClick = output();
+    /** Fires on every pointer hover of any cell — analytics only. Payload carries the hovered `date`. Does NOT indicate a preview; subscribe to `rangePreview` for range-mode hover state. */
+    cellHover = output();
+    /** Fires when `mode` changes at runtime, in canonical order `selectionCleared` → `modeChange` → `valueChange` (§11.2). Payload carries `{ from, to }` modes. */
+    modeChange = output();
+    // ---------------------------------------------------------------------------
+    // Internal writable state (§8.1)
+    // ---------------------------------------------------------------------------
+    /** In-flight draft during range SELECTING. `null` in other states (§8.1). */
+    internalDraftValue = signal(null, ...(ngDevMode ? [{ debugName: "internalDraftValue" }] : /* istanbul ignore next */ []));
+    /** Current selection lifecycle state. */
+    _selectionState = signal('EMPTY', ...(ngDevMode ? [{ debugName: "_selectionState" }] : /* istanbul ignore next */ []));
+    /** Current view (writable for drill). Tracks `startView` until the user drills. */
+    _viewState = linkedSignal(() => this.startView(), ...(ngDevMode ? [{ debugName: "_viewState" }] : /* istanbul ignore next */ []));
+    /**
+     * Active (focused) date. `linkedSignal` so changes to `startAt` at runtime update
+     * the anchor, but internal navigation can still write it independently.
+     */
+    _activeDate = linkedSignal(() => this.startAt() ?? this.dateAdapter.today(), ...(ngDevMode ? [{ debugName: "_activeDate" }] : /* istanbul ignore next */ []));
+    /** Pointer-hover date (desktop only). */
+    _hoveredDate = signal(null, ...(ngDevMode ? [{ debugName: "_hoveredDate" }] : /* istanbul ignore next */ []));
+    /** Overlay state. Always `'closed'` in inline mode until Phase 10 wires the lifecycle. */
+    _overlayState = signal('closed', ...(ngDevMode ? [{ debugName: "_overlayState" }] : /* istanbul ignore next */ []));
+    /** Preset selection id. Phase 12 writes this. */
+    _selectedPresetId = signal(null, ...(ngDevMode ? [{ debugName: "_selectedPresetId" }] : /* istanbul ignore next */ []));
+    /** Raw `TOut` retained when `fromForm` throws (§7.6, Phase 14). `null` otherwise. */
+    _lastInvalidFormValue = signal(null, ...(ngDevMode ? [{ debugName: "_lastInvalidFormValue" }] : /* istanbul ignore next */ []));
+    // ---------------------------------------------------------------------------
+    // Public readonly signals (§33.3)
+    // ---------------------------------------------------------------------------
+    /** Overlay lifecycle. `null` until `interaction: 'overlay'` lands in Phase 10; until then the implementation signal is exposed as `'closed'`. */
+    overlayState = computed(() => this._overlayState(), ...(ngDevMode ? [{ debugName: "overlayState" }] : /* istanbul ignore next */ []));
+    /** Selection lifecycle per §8. */
+    selectionState = computed(() => this._selectionState(), ...(ngDevMode ? [{ debugName: "selectionState" }] : /* istanbul ignore next */ []));
+    /** Active (focused) cell. `null` when the overlay is closed and no inline focus is established; in inline mode this is always the current anchor. */
+    activeDate = computed(() => this._activeDate(), ...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
+    /** Currently selected preset id. */
+    selectedPresetId = computed(() => this._selectedPresetId(), ...(ngDevMode ? [{ debugName: "selectedPresetId" }] : /* istanbul ignore next */ []));
+    /** Current view state (day / month / year). */
+    viewState = computed(() => this._viewState(), ...(ngDevMode ? [{ debugName: "viewState" }] : /* istanbul ignore next */ []));
+    /** Months currently rendered. Phase 9 extends this to the full responsive count. */
+    displayedMonths = computed(() => {
+        const active = this._activeDate();
+        const primary = {
+            year: this.dateAdapter.getYear(active),
+            month: this.dateAdapter.getMonth(active),
+        };
+        if (this.effectiveMonthColumns() < 2)
+            return [primary];
+        const secondary = this.dateAdapter.addMonths(active, 1);
+        return [
+            primary,
+            {
+                year: this.dateAdapter.getYear(secondary),
+                month: this.dateAdapter.getMonth(secondary),
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "displayedMonths" }] : /* istanbul ignore next */ []));
+    /** Raw form value rejected by the transformer's `fromForm` (§7.6, §33.3). */
+    lastInvalidFormValue = computed(() => this._lastInvalidFormValue(), ...(ngDevMode ? [{ debugName: "lastInvalidFormValue" }] : /* istanbul ignore next */ []));
+    // ---------------------------------------------------------------------------
+    // ControlValueAccessor + Validator (Phase 3)
+    // ---------------------------------------------------------------------------
+    cvaOnChange = () => { };
+    cvaOnTouched = () => { };
+    validatorOnChange = () => { };
+    /**
+     * @internal Disabled state set by `ControlValueAccessor.setDisabledState` and
+     * by the Signal Forms mode directives. OR-merged with the public `disabled`
+     * input into `effectiveDisabled`.
+     */
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Read-only state set by the Signal Forms mode directives. OR-merged
+     * with the public `readonly` input into `effectiveReadonly`.
+     */
+    cvaReadonly = signal(false, ...(ngDevMode ? [{ debugName: "cvaReadonly" }] : /* istanbul ignore next */ []));
+    /** Effective disabled state — public `disabled` input OR any form-bound disabled flip. Drives `aria-disabled`. */
+    effectiveDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    /** Effective read-only state — public `readonly` input OR any form-bound readonly flip. Drives `aria-readonly`. */
+    effectiveReadonly = computed(() => this.readonly() || this.cvaReadonly(), ...(ngDevMode ? [{ debugName: "effectiveReadonly" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Resolved range-behavior config. Merges the consumer-supplied
+     * `Partial<RangeBehaviorConfig>` over the documented defaults so internal
+     * call sites read each field directly without re-applying fallbacks.
+     */
+    _resolvedRangeBehavior = computed(() => ({
+        allowBackwardRange: false,
+        allowSingleDayRange: true,
+        persistPartialRange: true,
+        disableRangesCrossingDisabledDates: false,
+        ...this.rangeBehavior(),
+    }), ...(ngDevMode ? [{ debugName: "_resolvedRangeBehavior" }] : /* istanbul ignore next */ []));
+    /** @internal Dev-mode warning guard so each mismatched write warns only once per instance. */
+    _warnedShapeMismatch = false;
+    /** @internal Set by `writeValue`; read by the `FormResetEvent` handler so it can emit `selectionCleared({reason: 'reset'})` only when a non-empty value was on the control before the reset cleared it. */
+    _hadValueBeforeLastWrite = false;
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            if (this._invalidFlashTimer !== null) {
+                clearTimeout(this._invalidFlashTimer);
+                this._invalidFlashTimer = null;
+            }
+        });
+        // Runtime `mode` changes clear state and emit the canonical event order
+        // per §11.2: selectionCleared({reason: 'mode-change'}) → modeChange → valueChange.
+        // We read `mode()` via `linkedSignal` in a tracked effect so the prior value
+        // can be observed via the captured closure.
+        let previousMode = untracked(() => this.mode());
+        effect(() => {
+            const current = this.mode();
+            if (current === previousMode)
+                return;
+            const from = previousMode;
+            previousMode = current;
+            untracked(() => this.onModeChanged(from, current));
+        });
+        // Re-run validation whenever mode, constraints, or the rejected-write
+        // marker changes so the §10.2 codes stay in sync. Constraint change
+        // revalidation per §11.4.
+        effect(() => {
+            this.mode();
+            this._lastInvalidFormValue();
+            // `resolvedConstraints` transitively tracks `minDate`, `maxDate`, `dateFilter`,
+            // `disabledDates`, `disabledDaysOfWeek`, and the shorthand `constraints` input.
+            this.resolvedConstraints();
+            this.minRangeLength();
+            this.maxRangeLength();
+            this.maxSelections();
+            untracked(() => this.validatorOnChange());
+        });
+        // Push the resolved locale into the date adapter so `Intl.DateTimeFormat`
+        // calls (month/weekday names, format()) align with `LOCALE_ID` or the
+        // per-instance `locale` override (§19.1).
+        effect(() => {
+            const locale = this.effectiveLocale();
+            untracked(() => this.dateAdapter.setLocale(locale));
+        });
+        // Phase 6 — keyboard-driven `rangePreview` emission. While SELECTING, any
+        // change to `previewRange` (which now reacts to `activeDate` via
+        // `previewCursor`) emits the same `rangePreview` payload as a hover (§21.1).
+        // The hover path keeps emitting from `onPreviewChange` directly; this
+        // effect covers arrow-key + Home/End/PageUp/PageDown navigation.
+        let lastEmittedPreviewKey = null;
+        effect(() => {
+            // Skip when no draft is in-flight (only meaningful during SELECTING).
+            if (this._selectionState() !== 'SELECTING') {
+                lastEmittedPreviewKey = null;
+                return;
+            }
+            const pr = this.previewRange();
+            if (!pr?.start || !pr?.end)
+                return;
+            // Pointer-hover already emits via `onPreviewChange`; only fire here for
+            // keyboard navigation (no hover anchor present).
+            if (this._hoveredDate())
+                return;
+            const key = this.dateAdapter.toIso(pr.start) + '|' + this.dateAdapter.toIso(pr.end);
+            if (key === lastEmittedPreviewKey)
+                return;
+            lastEmittedPreviewKey = key;
+            const start = pr.start;
+            const end = pr.end;
+            untracked(() => this.rangePreview.emit({
+                tentativeRange: { start, end },
+                invalidPreview: this.isPreviewInvalid(start, end),
+            }));
+        });
+    }
+    ngOnInit() {
+        // Lazy NgControl lookup avoids the construction-time cycle (see field
+        // declaration). By `ngOnInit` the host's `FormControlName`/`NgModel` is
+        // fully constructed, so resolving it here is safe.
+        this.ngControl = this.injector.get(NgControl, null, {
+            self: true,
+            optional: true,
+        });
+        // Reset detection per §6.5 — `FormControl.reset()` emits a dedicated
+        // `FormResetEvent` on its events stream (and parent `FormGroup.reset()`
+        // cascades via each child's `reset()`). Only Reactive / Template-driven
+        // forms expose an `AbstractControl.events` Observable; Signal Forms'
+        // `FormField` provides an `InteropNgControl` shim whose `.control`
+        // re-points to itself and has no `events` stream, so we feature-detect
+        // before subscribing. Signal Forms reset is handled via the field's
+        // value-signal flow, not this event.
+        const ctrl = this.ngControl?.control;
+        if (ctrl?.events) {
+            ctrl.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+                if (event instanceof FormResetEvent) {
+                    this.handleFormReset();
+                }
+            });
+        }
+    }
+    /** @internal `ControlValueAccessor` — writes a value from a reactive / template-driven form. Wrong-shape writes preserve the prior value per §7.2. Programmatic writes during SELECTING discard the draft per §11.1. */
+    writeValue(incoming) {
+        this._hadValueBeforeLastWrite = !isEmptyCalendarValue(this.value());
+        const mode = this.mode();
+        // Phase 6 — programmatic write during SELECTING discards the in-flight draft.
+        // Detect BEFORE we touch state so we can fire `selectionCleared` exactly once
+        // when the draft existed, regardless of which branch below handles the write.
+        const wasSelecting = this._selectionState() === 'SELECTING' && this.internalDraftValue() !== null;
+        if (incoming === null || incoming === undefined) {
+            const empty = emptyCalendarValue(mode);
+            this.value.set(empty);
+            this._selectionState.set('EMPTY');
+            this.internalDraftValue.set(null);
+            if (wasSelecting)
+                this.selectionCleared.emit({ reason: 'programmatic' });
+            if (this._lastInvalidFormValue() !== null) {
+                this._lastInvalidFormValue.set(null);
+                this.validatorOnChange();
+            }
+            return;
+        }
+        if (!matchesModeShape(mode, incoming)) {
+            if (isDevMode() && !this._warnedShapeMismatch) {
+                this._warnedShapeMismatch = true;
+                console.warn(`[tw-calendar] writeValue received a value whose shape does not match mode="${mode}". ` +
+                    `Preserving the prior value; the form control will report calendarInvalidValue. ` +
+                    `Received:`, incoming);
+            }
+            this._lastInvalidFormValue.set(incoming);
+            this.validatorOnChange();
+            return;
+        }
+        // Phase 6 — reject SELECTING-shaped programmatic writes (`{ start: D, end: null }`)
+        // for `mode: 'range'`; only EMPTY or COMPLETE shapes are valid form values.
+        if (mode === 'range' && isPartialRangeValue(incoming)) {
+            if (isDevMode() && !this._warnedShapeMismatch) {
+                this._warnedShapeMismatch = true;
+                console.warn('[tw-calendar] writeValue received a partial range `{start, end: null}` — only fully committed ranges are valid form values. Preserving the prior value; the form control will report calendarInvalidValue.', incoming);
+            }
+            this._lastInvalidFormValue.set(incoming);
+            this.validatorOnChange();
+            return;
+        }
+        const normalized = incoming;
+        this.value.set(normalized);
+        this._selectionState.set(deriveSelectionStateFromValue(normalized));
+        this.internalDraftValue.set(null);
+        if (wasSelecting)
+            this.selectionCleared.emit({ reason: 'programmatic' });
+        if (this._lastInvalidFormValue() !== null) {
+            this._lastInvalidFormValue.set(null);
+            this.validatorOnChange();
+        }
+    }
+    /** @internal `ControlValueAccessor` — registers the on-change callback. */
+    registerOnChange(fn) {
+        this.cvaOnChange = fn;
+    }
+    /** @internal `ControlValueAccessor` — registers the touched callback. */
+    registerOnTouched(fn) {
+        this.cvaOnTouched = fn;
+    }
+    /** @internal `ControlValueAccessor` — reflects the form control's disabled state through `effectiveDisabled` / `aria-disabled`. */
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    /** @internal `Validator` — runs the §10.2 validator. Phase 3 codes (`calendarRequired`, `calendarInvalidValue`) plus Phase 4 constraint codes (`calendarMinDate`, `calendarMaxDate`, `calendarDisabledDate`, `calendarRangeTooShort`, `calendarRangeTooLong`, `calendarMaxSelections`, `calendarInvalidRange`). */
+    validate(control) {
+        const ctx = {
+            mode: this.mode(),
+            lastInvalidFormValue: this._lastInvalidFormValue(),
+            constraints: this.resolvedConstraints(),
+            adapter: this.dateAdapter,
+            minRangeLength: this.minRangeLength(),
+            maxRangeLength: this.maxRangeLength(),
+            maxSelections: this.maxSelections(),
+        };
+        return calendarValidator(ctx)(control);
+    }
+    /** @internal `Validator` — registers the change callback so the form re-runs validation when internal state changes. */
+    registerOnValidatorChange(fn) {
+        this.validatorOnChange = fn;
+    }
+    /** @internal Host `(focusout)` handler — fires `onTouched` when focus leaves the component (§13.6 inline path). Overlay-mode wiring is Phase 10. */
+    onBlur(event) {
+        const host = this.elementRef.nativeElement;
+        const related = event.relatedTarget;
+        // Only fire when focus actually leaves the component tree. Focus moves
+        // between cells (roving tabindex) stay inside the host and must not mark
+        // the control touched.
+        if (related && host.contains(related))
+            return;
+        this.cvaOnTouched();
+    }
+    // ---------------------------------------------------------------------------
+    // Derived state (kept from the prior implementation; some refined per Phase 1)
+    // ---------------------------------------------------------------------------
+    /**
+     * Effective `CalendarIntl` resolved per-field over the DI default (§19.4).
+     * The injected default is the base; the `intl` input overrides individual
+     * fields. Unspecified fields fall through to English defaults.
+     */
+    effectiveIntl = computed(() => {
+        const override = this.intl();
+        if (!override)
+            return this.injectedIntl;
+        // Prototype copy preserves bound methods; shallow per-field overlay matches
+        // the spec's per-field merge semantics.
+        const merged = Object.create(Object.getPrototypeOf(this.injectedIntl));
+        Object.assign(merged, this.injectedIntl, override);
+        return merged;
+    }, ...(ngDevMode ? [{ debugName: "effectiveIntl" }] : /* istanbul ignore next */ []));
+    /** Effective locale — `locale` input wins, otherwise Angular `LOCALE_ID`. */
+    effectiveLocale = computed(() => this.locale() ?? this.platformLocale, ...(ngDevMode ? [{ debugName: "effectiveLocale" }] : /* istanbul ignore next */ []));
+    /**
+     * Active strategy for single/multiple/range. Injected strategies (custom) win.
+     * Range state will migrate into this component in Phase 6; for now we reuse
+     * the strategy for its `select` / `createPreview` / `isSelected` helpers.
+     */
+    selectionStrategy = computed(() => {
+        if (this.injectedStrategy)
+            return this.injectedStrategy;
+        const m = this.mode();
+        if (m === 'range')
+            return this.localStrategies.range;
+        if (m === 'multiple')
+            return this.localStrategies.multiple;
+        return this.localStrategies.single;
+    }, ...(ngDevMode ? [{ debugName: "selectionStrategy" }] : /* istanbul ignore next */ []));
+    /** Computed first-day-of-week (input override wins over adapter default). */
+    computedFirstDayOfWeek = computed(() => {
+        const override = this.firstDayOfWeek();
+        if (override !== null && override >= 0 && override <= 6)
+            return override;
+        return this.dateAdapter.getFirstDayOfWeek();
+    }, ...(ngDevMode ? [{ debugName: "computedFirstDayOfWeek" }] : /* istanbul ignore next */ []));
+    /** Resolves the configured `monthColumns` value. Range-mode consumers pass `2` explicitly. */
+    effectiveMonthColumns = computed(() => this.monthColumns(), ...(ngDevMode ? [{ debugName: "effectiveMonthColumns" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Drives `aria-multiselectable` on every view grid. `true` when the
+     * current `mode` allows more than one cell to be selected at a time
+     * (`'multiple'` or `'range'`); `false` for `'single'`.
+     */
+    multiSelectable = computed(() => this.mode() !== 'single', ...(ngDevMode ? [{ debugName: "multiSelectable" }] : /* istanbul ignore next */ []));
+    /** Secondary anchor for the right-hand grid in multi-column mode. */
+    secondaryActiveDate = computed(() => {
+        if (this.effectiveMonthColumns() < 2)
+            return null;
+        return this.dateAdapter.addMonths(this._activeDate(), 1);
+    }, ...(ngDevMode ? [{ debugName: "secondaryActiveDate" }] : /* istanbul ignore next */ []));
+    /**
+     * Phase 6 — preview cursor. Pointer hover wins; falls back to `activeDate`
+     * when SELECTING so keyboard arrow-key moves drive the same preview path
+     * (§21.1, §16.1). `null` when no SELECTING draft is in-flight and pointer
+     * is off-grid.
+     */
+    previewCursor = computed(() => {
+        const hovered = this._hoveredDate();
+        if (hovered)
+            return hovered;
+        if (this._selectionState() === 'SELECTING')
+            return this._activeDate();
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "previewCursor" }] : /* istanbul ignore next */ []));
+    /**
+     * Preview range. Driven by the strategy and the `previewCursor` (hover or
+     * keyboard active-date during SELECTING).
+     */
+    previewRange = computed(() => {
+        const strategy = this.selectionStrategy();
+        const cursor = this.previewCursor();
+        const source = this.strategySelection();
+        return strategy.createPreview(cursor, source);
+    }, ...(ngDevMode ? [{ debugName: "previewRange" }] : /* istanbul ignore next */ []));
+    /**
+     * Adapter-compatible view of the current selection.
+     * For range: a `{ start, end }` view of either the committed value or the in-flight draft.
+     * For single: the raw `D | null`.
+     * For multiple: the raw `D[]`.
+     *
+     * Used internally to feed the legacy strategy surface while Phase 6 migrates range state.
+     */
+    strategySelection = computed(() => {
+        const m = this.mode();
+        const v = this.value();
+        if (m === 'range') {
+            const draft = this.internalDraftValue();
+            if (draft)
+                return { start: draft.start, end: null };
+            return v ?? null;
+        }
+        return v;
+    }, ...(ngDevMode ? [{ debugName: "strategySelection" }] : /* istanbul ignore next */ []));
+    /** Adapter-compatible view exposed to the view components. */
+    legacySelected = computed(() => this.strategySelection(), ...(ngDevMode ? [{ debugName: "legacySelected" }] : /* istanbul ignore next */ []));
+    variantResult = computed(() => calendarVariants({
+        bordered: this.bordered(),
+        columns: (this.effectiveMonthColumns() >= 2 ? 2 : 1),
+    }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    rootClasses = computed(() => this.variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    monthsClasses = computed(() => this.variantResult().months(), ...(ngDevMode ? [{ debugName: "monthsClasses" }] : /* istanbul ignore next */ []));
+    monthNames = computed(() => this.dateAdapter.getMonthNames('long'), ...(ngDevMode ? [{ debugName: "monthNames" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    periodLabel = computed(() => {
+        const date = this._activeDate();
+        const view = this._viewState();
+        const year = this.dateAdapter.getYear(date);
+        const month = this.dateAdapter.getMonth(date);
+        switch (view) {
+            case 'day': {
+                const name = this.monthNames()[month];
+                if (this.effectiveMonthColumns() >= 2) {
+                    const secondDate = this.secondaryActiveDate();
+                    const secondMonth = this.dateAdapter.getMonth(secondDate);
+                    const secondYear = this.dateAdapter.getYear(secondDate);
+                    const secondName = this.monthNames()[secondMonth];
+                    if (year === secondYear)
+                        return `${name} – ${secondName} ${year}`;
+                    return `${name} ${year} – ${secondName} ${secondYear}`;
+                }
+                return `${name} ${year}`;
+            }
+            case 'month':
+                return `${year}`;
+            case 'year': {
+                const startYear = getMultiYearStartingYear(year, YEARS_PER_PAGE);
+                return `${startYear} – ${startYear + YEARS_PER_PAGE - 1}`;
+            }
+        }
+    }, ...(ngDevMode ? [{ debugName: "periodLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    periodAriaLabel = computed(() => {
+        const view = this._viewState();
+        const label = this.periodLabel();
+        const intl = this.effectiveIntl();
+        switch (view) {
+            case 'day':
+                return intl.switchToMonthViewLabel(label);
+            case 'month':
+                return intl.switchToYearViewLabel(label);
+            case 'year':
+                return label;
+        }
+    }, ...(ngDevMode ? [{ debugName: "periodAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    prevAriaLabel = computed(() => {
+        const intl = this.effectiveIntl();
+        switch (this._viewState()) {
+            case 'day':
+                return intl.previousMonthLabel;
+            case 'month':
+                return intl.previousYearLabel;
+            case 'year':
+                return intl.previousYearsLabel(YEARS_PER_PAGE);
+        }
+    }, ...(ngDevMode ? [{ debugName: "prevAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    nextAriaLabel = computed(() => {
+        const intl = this.effectiveIntl();
+        switch (this._viewState()) {
+            case 'day':
+                return intl.nextMonthLabel;
+            case 'month':
+                return intl.nextYearLabel;
+            case 'year':
+                return intl.nextYearsLabel(YEARS_PER_PAGE);
+        }
+    }, ...(ngDevMode ? [{ debugName: "nextAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    prevDisabled = computed(() => {
+        const date = this._activeDate();
+        const minDate = this.resolvedMinDate();
+        if (!minDate)
+            return false;
+        const view = this._viewState();
+        const year = this.dateAdapter.getYear(date);
+        const month = this.dateAdapter.getMonth(date);
+        switch (view) {
+            case 'day': {
+                const prevMonth = month === 0 ? 11 : month - 1;
+                const prevYear = month === 0 ? year - 1 : year;
+                return isMonthDisabled(prevYear, prevMonth, minDate, null, this.dateAdapter);
+            }
+            case 'month':
+                return isYearDisabled(year - 1, minDate, null, this.dateAdapter);
+            case 'year': {
+                const startYear = getMultiYearStartingYear(year, YEARS_PER_PAGE);
+                return isYearDisabled(startYear - 1, minDate, null, this.dateAdapter);
+            }
+        }
+    }, ...(ngDevMode ? [{ debugName: "prevDisabled" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    nextDisabled = computed(() => {
+        const date = this._activeDate();
+        const maxDate = this.resolvedMaxDate();
+        if (!maxDate)
+            return false;
+        const view = this._viewState();
+        const year = this.dateAdapter.getYear(date);
+        const month = this.dateAdapter.getMonth(date);
+        switch (view) {
+            case 'day': {
+                const nextMonth = month === 11 ? 0 : month + 1;
+                const nextYear = month === 11 ? year + 1 : year;
+                return isMonthDisabled(nextYear, nextMonth, null, maxDate, this.dateAdapter);
+            }
+            case 'month':
+                return isYearDisabled(year + 1, null, maxDate, this.dateAdapter);
+            case 'year': {
+                const startYear = getMultiYearStartingYear(year, YEARS_PER_PAGE);
+                return isYearDisabled(startYear + YEARS_PER_PAGE, null, maxDate, this.dateAdapter);
+            }
+        }
+    }, ...(ngDevMode ? [{ debugName: "nextDisabled" }] : /* istanbul ignore next */ []));
+    // ---------------------------------------------------------------------------
+    // Public methods (§33.4)
+    // ---------------------------------------------------------------------------
+    /** Focuses `date` and optionally navigates the view to render it. */
+    focusDate(date, opts) {
+        const clamped = this.dateAdapter.clampDate(date, this.resolvedMinDate(), this.resolvedMaxDate());
+        if (opts?.navigate)
+            this._activeDate.set(clamped);
+        this.activeDateChange.emit(clamped);
+        this.focusActiveCell();
+    }
+    /** Sets the current view state and emits a `viewChange` event. */
+    setView(view) {
+        const from = this._viewState();
+        if (from === view)
+            return;
+        this._viewState.set(view);
+        this.viewChange.emit({ from, to: view, reason: 'programmatic' });
+    }
+    /** Navigates to a specific date (anchor). Does not emit a selection event. */
+    goToDate(date) {
+        const clamped = this.dateAdapter.clampDate(date, this.resolvedMinDate(), this.resolvedMaxDate());
+        this._activeDate.set(clamped);
+        this.activeDateChange.emit(clamped);
+    }
+    /** Navigates to today. */
+    goToToday() {
+        this.goToDate(this.dateAdapter.today());
+    }
+    /** Clears the current selection. Alias: `clearSelection`. */
+    clear() {
+        if (this.effectiveReadonly())
+            return;
+        const had = !isEmptyCalendarValue(this.value());
+        const empty = emptyCalendarValue(this.mode());
+        const hadPreset = this._selectedPresetId() !== null;
+        this.value.set(empty);
+        this.internalDraftValue.set(null);
+        this._selectionState.set('EMPTY');
+        if (had)
+            this.selectionCleared.emit({ reason: 'user' });
+        this.cvaOnChange(empty);
+        this.valueChange.emit(empty);
+        if (hadPreset) {
+            this._selectedPresetId.set(null);
+            this.presetChange.emit(null);
+        }
+    }
+    /** Alias of `clear()` exported per §33.4 for discoverability. */
+    clearSelection() {
+        this.clear();
+    }
+    /** Resets to initial state — value + view + active date per `resetBehavior`. Phase 3 extends this with form-reset integration. */
+    reset() {
+        this.clear();
+        this._viewState.set(this.startView());
+        this._activeDate.set(this.startAt() ?? this.dateAdapter.today());
+    }
+    /** Revalidates constraints + cell filters (Phase 4 wires it). */
+    revalidate() {
+        // No-op until Phase 4 introduces the validator.
+    }
+    /** Opens the overlay. Phase 10 wires the CDK overlay; inline mode is a no-op. */
+    open() {
+        // Phase 10.
+    }
+    /** Closes the overlay. */
+    close() {
+        // Phase 10.
+    }
+    /** Toggles the overlay. */
+    toggle() {
+        // Phase 10.
+    }
+    /** Imperatively focuses the currently active cell. */
+    focusActiveCell() {
+        const views = this.monthViews();
+        if (views.length > 0) {
+            views[0].focusActiveCell();
+            return;
+        }
+        const host = this.elementRef.nativeElement;
+        host.querySelector('button[tabindex="0"]')?.focus();
+    }
+    // ---------------------------------------------------------------------------
+    // Event handlers (day grid)
+    // ---------------------------------------------------------------------------
+    /** @internal */
+    onPrevClicked() {
+        const view = this._viewState();
+        const date = this._activeDate();
+        const previousYear = this.dateAdapter.getYear(date);
+        const previousMonth = this.dateAdapter.getMonth(date);
+        let next;
+        switch (view) {
+            case 'day':
+                next = this.dateAdapter.addMonths(date, -1);
+                break;
+            case 'month':
+                next = this.dateAdapter.addYears(date, -1);
+                break;
+            case 'year':
+                next = this.dateAdapter.addYears(date, -YEARS_PER_PAGE);
+                break;
+        }
+        this._activeDate.set(next);
+        this.activeDateChange.emit(next);
+        this.emitPeriodChange(previousYear, previousMonth, view);
+        this.announceNavigation('previous');
+    }
+    /** @internal */
+    onNextClicked() {
+        const view = this._viewState();
+        const date = this._activeDate();
+        const previousYear = this.dateAdapter.getYear(date);
+        const previousMonth = this.dateAdapter.getMonth(date);
+        let next;
+        switch (view) {
+            case 'day':
+                next = this.dateAdapter.addMonths(date, 1);
+                break;
+            case 'month':
+                next = this.dateAdapter.addYears(date, 1);
+                break;
+            case 'year':
+                next = this.dateAdapter.addYears(date, YEARS_PER_PAGE);
+                break;
+        }
+        this._activeDate.set(next);
+        this.activeDateChange.emit(next);
+        this.emitPeriodChange(previousYear, previousMonth, view);
+        this.announceNavigation('next');
+    }
+    /** @internal — period-button click: drill up (day → month → year). */
+    onPeriodClicked() {
+        const current = this._viewState();
+        if (current === 'day') {
+            this._viewState.set('month');
+            this.viewChange.emit({ from: current, to: 'month', reason: 'drill-up' });
+        }
+        else if (current === 'month') {
+            this._viewState.set('year');
+            this.viewChange.emit({ from: current, to: 'year', reason: 'drill-up' });
+        }
+        this.announceViewChange();
+    }
+    /** @internal — day-grid cell activation. */
+    onDateSelected(date) {
+        if (this.effectiveDisabled())
+            return;
+        // Read-only: keep focus + navigation but skip every commit path.
+        if (this.effectiveReadonly()) {
+            this._activeDate.set(date);
+            this.activeDateChange.emit(date);
+            return;
+        }
+        this._activeDate.set(date);
+        this.activeDateChange.emit(date);
+        const mode = this.mode();
+        if (mode === 'range') {
+            this.commitRangeClick(date);
+            return;
+        }
+        if (mode === 'multiple') {
+            // Phase 4 — enforce maxSelections per maxSelectionBehavior (§10.1, §33.1).
+            const limit = this.maxSelections();
+            const currentArr = this.value() ?? [];
+            const isAlreadySelected = currentArr.some((d) => this.dateAdapter.sameDate(d, date));
+            if (limit !== null && !isAlreadySelected && currentArr.length >= limit) {
+                const behavior = this.maxSelectionBehavior();
+                if (behavior === 'emit-limit-reached') {
+                    this.selectionLimitReached.emit({ limit, attempted: date });
+                    return;
+                }
+                if (behavior === 'replace-oldest') {
+                    const next = [...currentArr.slice(1), date];
+                    this.commitValue(next, 'commit');
+                    return;
+                }
+                // 'ignore' — silently drop the click.
+                return;
+            }
+        }
+        const strategy = this.selectionStrategy();
+        const current = mode === 'multiple' ? (this.value() ?? []) : this.value();
+        const result = strategy.select(date, current);
+        if (result.isComplete) {
+            this.commitValue(result.selection, 'commit');
+        }
+    }
+    /** @internal — preview sync from pointer hover. */
+    onPreviewChange(date) {
+        this._hoveredDate.set(date);
+        if (date)
+            this.cellHover.emit({ date });
+        const draft = this.internalDraftValue();
+        const pr = this.previewRange();
+        if (draft && pr?.start && pr.end) {
+            this.rangePreview.emit({
+                tentativeRange: { start: pr.start, end: pr.end },
+                invalidPreview: this.isPreviewInvalid(pr.start, pr.end),
+            });
+        }
+    }
+    /**
+     * Phase 4 — `true` when a tentative range hover would commit an invalid value.
+     * Reasons: crosses a disabled date, or length violates `min`/`maxRangeLength`.
+     * The flag is informational — does NOT block the commit on its own (§4 default
+     * is permissive). Subscribe to `rangePreview.invalidPreview` together with the
+     * `calendarRangeTooShort` / `calendarRangeTooLong` validator codes to react.
+     */
+    isPreviewInvalid(start, end) {
+        const constraints = this.resolvedConstraints();
+        // Endpoints already pass `enabled` check (you can't hover a disabled cell
+        // and produce a preview), so we only need to look at the interior.
+        if (rangeCrossesDisabled(start, end, constraints, this.dateAdapter, false))
+            return true;
+        const length = rangeLengthDays(start, end, this.dateAdapter);
+        const min = this.minRangeLength();
+        if (min !== null && length < min)
+            return true;
+        const max = this.maxRangeLength();
+        if (max !== null && length > max)
+            return true;
+        return false;
+    }
+    /**
+     * Resolved `minDate` — individual `minDate` input wins, then `constraints.minDate`,
+     * else `null`. Used by every internal min-date reader so the shorthand input is
+     * transparent to the rest of the component.
+     */
+    resolvedMinDate = computed(() => this.minDate() ?? this.constraints()?.minDate ?? null, ...(ngDevMode ? [{ debugName: "resolvedMinDate" }] : /* istanbul ignore next */ []));
+    /** Resolved `maxDate` — individual input wins, then `constraints.maxDate`, else `null`. */
+    resolvedMaxDate = computed(() => this.maxDate() ?? this.constraints()?.maxDate ?? null, ...(ngDevMode ? [{ debugName: "resolvedMaxDate" }] : /* istanbul ignore next */ []));
+    /** Resolved `disabledDates` — individual input wins, then `constraints.disabledDates`, else `null`. */
+    resolvedDisabledDates = computed(() => this.disabledDates() ?? this.constraints()?.disabledDates ?? null, ...(ngDevMode ? [{ debugName: "resolvedDisabledDates" }] : /* istanbul ignore next */ []));
+    /** Resolved `disabledDaysOfWeek` — individual input wins (when non-empty), then `constraints.disabledDaysOfWeek`, else `[]`. */
+    resolvedDisabledDaysOfWeek = computed(() => {
+        const own = this.disabledDaysOfWeek();
+        if (own.length > 0)
+            return own;
+        return this.constraints()?.disabledDaysOfWeek ?? [];
+    }, ...(ngDevMode ? [{ debugName: "resolvedDisabledDaysOfWeek" }] : /* istanbul ignore next */ []));
+    /** Resolved `dateFilter` — individual input wins, then `constraints.dateFilter`, else `null`. */
+    resolvedDateFilter = computed(() => this.dateFilter() ?? this.constraints()?.dateFilter ?? null, ...(ngDevMode ? [{ debugName: "resolvedDateFilter" }] : /* istanbul ignore next */ []));
+    /** Aggregated, resolved constraint inputs — passed to the resolver and validator. */
+    resolvedConstraints = computed(() => ({
+        minDate: this.resolvedMinDate(),
+        maxDate: this.resolvedMaxDate(),
+        disabledDates: this.resolvedDisabledDates(),
+        disabledDaysOfWeek: this.resolvedDisabledDaysOfWeek(),
+        dateFilter: this.resolvedDateFilter(),
+    }), ...(ngDevMode ? [{ debugName: "resolvedConstraints" }] : /* istanbul ignore next */ []));
+    /** @internal — month-view cell activation (drill-down to day). */
+    onMonthSelected(date) {
+        this._activeDate.set(date);
+        const from = this._viewState();
+        this._viewState.set('day');
+        this.activeDateChange.emit(date);
+        this.viewChange.emit({ from, to: 'day', reason: 'drill-down' });
+        this.announceViewChange();
+    }
+    /** @internal — years-view cell activation (drill-down to month). */
+    onYearSelected(date) {
+        this._activeDate.set(date);
+        const from = this._viewState();
+        this._viewState.set('month');
+        this.activeDateChange.emit(date);
+        this.viewChange.emit({ from, to: 'month', reason: 'drill-down' });
+        this.announceViewChange();
+    }
+    /** @internal — keyboard / programmatic active-date change from a view. */
+    onActiveDateChange(date, gridIndex) {
+        const views = this.monthViews();
+        if (this.effectiveMonthColumns() >= 2 && views.length === 2 && gridIndex !== undefined) {
+            const primaryMonth = this.dateAdapter.getMonth(this._activeDate());
+            const secondaryMonth = this.dateAdapter.getMonth(this.secondaryActiveDate());
+            const targetMonth = this.dateAdapter.getMonth(date);
+            if (gridIndex === 0 && targetMonth === secondaryMonth) {
+                const rightView = views[1];
+                if (rightView) {
+                    rightView.focusCell(this.computeCompareValue(date));
+                    return;
+                }
+            }
+            if (gridIndex === 1 && targetMonth === primaryMonth) {
+                const leftView = views[0];
+                if (leftView) {
+                    leftView.focusCell(this.computeCompareValue(date));
+                    return;
+                }
+            }
+        }
+        this._activeDate.set(date);
+        this.activeDateChange.emit(date);
+    }
+    // ---------------------------------------------------------------------------
+    // Range state machine (§21) — orchestrator-owned. Click matrix:
+    //   EMPTY    + click → SELECTING (selectionStart)
+    //   SELECTING+ click → COMPLETE  (selectionComplete; auto-swap unless allowBackwardRange)
+    //   COMPLETE + click → branches on rangeClickBehavior:
+    //                       'restart'        → SELECTING (selectionRestart)
+    //                       'nearest-edge'   → COMPLETE  (selectionComplete reason='nearest-edge')
+    //                       'require-clear'  → no-op + invalid-flash on the clicked cell
+    // ---------------------------------------------------------------------------
+    /** @internal Last invalidly-clicked date, cleared after ~200ms — drives `data-state-invalid-flash`. */
+    _invalidFlashDate = signal(null, ...(ngDevMode ? [{ debugName: "_invalidFlashDate" }] : /* istanbul ignore next */ []));
+    /** Public read of the transient invalid-flash anchor. Views consume this and tag the matching cell. */
+    invalidFlashDate = computed(() => this._invalidFlashDate(), ...(ngDevMode ? [{ debugName: "invalidFlashDate" }] : /* istanbul ignore next */ []));
+    commitRangeClick(date) {
+        const draft = this.internalDraftValue();
+        const state = this._selectionState();
+        // ─── COMPLETE state branch — third click after a committed range. ────────
+        if (state === 'COMPLETE') {
+            const behavior = this.rangeClickBehavior();
+            if (behavior === 'require-clear') {
+                this.flashInvalid(date);
+                return;
+            }
+            if (behavior === 'nearest-edge') {
+                this.commitNearestEdge(date);
+                return;
+            }
+            // 'restart' (default) → fall through to SELECTING entry.
+            this.enterSelecting(date, /* fromComplete */ true);
+            return;
+        }
+        // ─── EMPTY → SELECTING ──────────────────────────────────────────────────
+        if (state !== 'SELECTING' || !draft) {
+            this.enterSelecting(date, /* fromComplete */ false);
+            return;
+        }
+        // ─── SELECTING → COMPLETE: commit the range. ────────────────────────────
+        const start = draft.start;
+        const cmp = this.dateAdapter.compare(date, start);
+        const behavior = this._resolvedRangeBehavior();
+        // `allowSingleDayRange = false` rejects clicking the same cell twice.
+        if (cmp === 0 && !behavior.allowSingleDayRange) {
+            this.flashInvalid(date);
+            return;
+        }
+        let rangeStart;
+        let rangeEnd;
+        let reason = 'commit';
+        if (cmp < 0) {
+            if (behavior.allowBackwardRange) {
+                // Preserve user-clicked order; do not normalize.
+                rangeStart = start;
+                rangeEnd = date;
+            }
+            else {
+                // §21.5 silent auto-swap — DO NOT emit selectionRestart.
+                rangeStart = date;
+                rangeEnd = start;
+                reason = 'auto-swap';
+            }
+        }
+        else {
+            rangeStart = start;
+            rangeEnd = date;
+        }
+        // §21.4 disable-crossing guard: if any interior date is disabled, reject.
+        if (behavior.disableRangesCrossingDisabledDates &&
+            rangeCrossesDisabled(rangeStart, rangeEnd, this.resolvedConstraints(), this.dateAdapter, 
+            /* includeEndpoints */ false)) {
+            this.flashInvalid(date);
+            return;
+        }
+        const committed = { start: rangeStart, end: rangeEnd };
+        this.internalDraftValue.set(null);
+        this.commitValue(committed, reason);
+    }
+    /** Enters SELECTING with `date` as draft.start. Emits selectionStart or selectionRestart. */
+    enterSelecting(date, fromComplete) {
+        this.internalDraftValue.set({ start: date });
+        this._selectionState.set('SELECTING');
+        if (fromComplete) {
+            this.selectionRestart.emit({ start: date });
+        }
+        else {
+            this.selectionStart.emit({ start: date });
+        }
+        this.announceRangeStart(date);
+    }
+    /**
+     * `'nearest-edge'` move (§21.3) — drag the closer endpoint of the committed
+     * range to `date`. Emits `selectionComplete({reason: 'nearest-edge'})`.
+     */
+    commitNearestEdge(date) {
+        const current = this.value();
+        if (!current?.start || !current?.end) {
+            // Defensive — shouldn't reach here in COMPLETE without both endpoints.
+            this.enterSelecting(date, true);
+            return;
+        }
+        const distStart = Math.abs(this.dateAdapter.compare(date, current.start));
+        const distEnd = Math.abs(this.dateAdapter.compare(date, current.end));
+        let nextStart;
+        let nextEnd;
+        if (distStart <= distEnd) {
+            // Move start; if it crosses the existing end, swap.
+            if (this.dateAdapter.compare(date, current.end) > 0) {
+                nextStart = current.end;
+                nextEnd = date;
+            }
+            else {
+                nextStart = date;
+                nextEnd = current.end;
+            }
+        }
+        else {
+            // Move end; if it crosses the existing start, swap.
+            if (this.dateAdapter.compare(date, current.start) < 0) {
+                nextStart = date;
+                nextEnd = current.start;
+            }
+            else {
+                nextStart = current.start;
+                nextEnd = date;
+            }
+        }
+        if (this._resolvedRangeBehavior().disableRangesCrossingDisabledDates &&
+            rangeCrossesDisabled(nextStart, nextEnd, this.resolvedConstraints(), this.dateAdapter, 
+            /* includeEndpoints */ false)) {
+            this.flashInvalid(date);
+            return;
+        }
+        const committed = { start: nextStart, end: nextEnd };
+        this.commitValue(committed, 'nearest-edge');
+    }
+    /** Pending invalid-flash clear timer; tracked so we can cancel on destroy. */
+    _invalidFlashTimer = null;
+    /** Sets the invalid-flash anchor and schedules a clear after 200ms. */
+    flashInvalid(date) {
+        this._invalidFlashDate.set(date);
+        this.announceRejection();
+        if (this._invalidFlashTimer !== null)
+            clearTimeout(this._invalidFlashTimer);
+        this._invalidFlashTimer = setTimeout(() => {
+            this._invalidFlashTimer = null;
+            // Only clear if we're still flashing this exact date (a new flash may have superseded).
+            if (this._invalidFlashDate() === date) {
+                this._invalidFlashDate.set(null);
+            }
+        }, 200);
+    }
+    /** Commits a value into the form + outputs with spec-ordered event emission. */
+    commitValue(newValue, reason) {
+        this.value.set(newValue);
+        this._selectionState.set('COMPLETE');
+        // §8.5: at most one `valueChange` + one `selectionComplete` per user action.
+        this.cvaOnChange(newValue);
+        this.cvaOnTouched();
+        this.valueChange.emit(newValue);
+        this.selectionComplete.emit({ value: newValue, reason });
+        this.announceSelectionComplete(newValue);
+    }
+    // ---------------------------------------------------------------------------
+    // Form reset handling (§6.5)
+    // ---------------------------------------------------------------------------
+    /**
+     * Handles a form-owned reset. Triggered when the bound `NgControl` flips
+     * `pristine` back to `true` (via `FormControl.reset()` / `FormGroup.reset()`).
+     * Per §6.5 the form owns the value write, so this path does NOT emit
+     * `valueChange` and does NOT call `onTouched`. It emits `selectionCleared`
+     * when a value was previously committed and restores UI state per
+     * `resetBehavior`.
+     */
+    handleFormReset() {
+        // `writeValue` fires before `FormResetEvent`, so by the time we reach this
+        // handler `this.value()` is already the reset value (typically empty).
+        // `_hadValueBeforeLastWrite` is the snapshot captured at the start of
+        // the preceding `writeValue` and is the correct signal for "was there
+        // anything to clear?" per §6.5.
+        const hadValue = this._hadValueBeforeLastWrite;
+        this._hadValueBeforeLastWrite = false;
+        const hadPreset = this._selectedPresetId() !== null;
+        // Always clear draft / hovered / preset regardless of resetBehavior.
+        this.internalDraftValue.set(null);
+        this._hoveredDate.set(null);
+        if (isEmptyCalendarValue(this.value())) {
+            this._selectionState.set('EMPTY');
+        }
+        if (this.resetBehavior() === 'full') {
+            this._viewState.set(this.startView());
+            this._activeDate.set(this.startAt() ?? this.dateAdapter.today());
+        }
+        if (hadPreset) {
+            this._selectedPresetId.set(null);
+            this.presetChange.emit(null);
+        }
+        if (hadValue) {
+            this.selectionCleared.emit({ reason: 'reset' });
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Mode change handling (§11.2)
+    // ---------------------------------------------------------------------------
+    onModeChanged(from, to) {
+        const hadValue = !isEmptyCalendarValue(this.value());
+        const hadPreset = this._selectedPresetId() !== null;
+        // Canonical emit order per §11.2:
+        // 1. selectionCleared({reason: 'mode-change'}) — only if a value was previously held
+        // 2. presetChange(null) — only if a preset id was set
+        // 3. modeChange
+        // 4. valueChange (empty for new mode)
+        this.internalDraftValue.set(null);
+        this._selectionState.set('EMPTY');
+        const empty = emptyCalendarValue(to);
+        this.value.set(empty);
+        if (hadValue) {
+            this.selectionCleared.emit({ reason: 'mode-change' });
+        }
+        if (hadPreset) {
+            this._selectedPresetId.set(null);
+            this.presetChange.emit(null);
+        }
+        this.modeChange.emit({ from, to });
+        this.cvaOnChange(empty);
+        this.valueChange.emit(empty);
+    }
+    // ---------------------------------------------------------------------------
+    // Utility helpers
+    // ---------------------------------------------------------------------------
+    computeCompareValue(date) {
+        return (this.dateAdapter.getYear(date) * 10000 +
+            this.dateAdapter.getMonth(date) * 100 +
+            this.dateAdapter.getDate(date));
+    }
+    emitPeriodChange(previousYear, previousMonth, view) {
+        const now = this._activeDate();
+        const year = this.dateAdapter.getYear(now);
+        const month = this.dateAdapter.getMonth(now);
+        if (view === 'day' && (year !== previousYear || month !== previousMonth)) {
+            this.monthChange.emit({ year, month });
+        }
+        if (year !== previousYear)
+            this.yearChange.emit({ year });
+    }
+    announceViewChange() {
+        const intl = this.effectiveIntl();
+        if (intl.skipAnnouncement)
+            return;
+        this.liveAnnouncer.announce(intl.viewSwitched(this._viewState(), this.periodLabel()), 'polite');
+    }
+    announceNavigation(direction) {
+        const intl = this.effectiveIntl();
+        if (intl.skipAnnouncement)
+            return;
+        this.liveAnnouncer.announce(intl.navigatedTo(direction, this.periodLabel()), 'polite');
+    }
+    /** Announces a committed selection for AT users. Branches on mode so the message matches the §19.4 intl strings. */
+    announceSelectionComplete(value) {
+        const intl = this.effectiveIntl();
+        if (intl.skipAnnouncement)
+            return;
+        const mode = this.mode();
+        if (mode === 'single') {
+            const single = value;
+            if (!single)
+                return;
+            this.liveAnnouncer.announce(intl.selectedAnnouncement(this.formatDate(single)), 'polite');
+            return;
+        }
+        if (mode === 'multiple') {
+            const arr = value ?? [];
+            this.liveAnnouncer.announce(intl.multipleSelectionAnnouncement(arr.length), 'polite');
+            return;
+        }
+        const range = value;
+        if (!range?.start || !range?.end)
+            return;
+        const length = rangeLengthDays(range.start, range.end, this.dateAdapter);
+        this.liveAnnouncer.announce(intl.rangeUpdateAnnouncement(this.formatDate(range.start), this.formatDate(range.end), length), 'polite');
+    }
+    /** Announces the start of a range pick for AT users. */
+    announceRangeStart(date) {
+        const intl = this.effectiveIntl();
+        if (intl.skipAnnouncement)
+            return;
+        this.liveAnnouncer.announce(intl.rangeStartAnnouncement(this.formatDate(date)), 'polite');
+    }
+    /** Announces that a click was rejected (require-clear, disable-cross commit, single-day disallowed). */
+    announceRejection() {
+        const intl = this.effectiveIntl();
+        if (intl.skipAnnouncement)
+            return;
+        this.liveAnnouncer.announce(intl.selectionRejectedAnnouncement, 'polite');
+    }
+    /** Locale-aware long-form date format used in announcements (e.g. "Wednesday, April 15, 2026"). */
+    formatDate(date) {
+        return this.dateAdapter.format(date, { dateTimeFormat: { dateStyle: 'full' } });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CalendarComponent, isStandalone: true, selector: "tw-calendar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, disabledDaysOfWeek: { classPropertyName: "disabledDaysOfWeek", publicName: "disabledDaysOfWeek", isSignal: true, isRequired: false, transformFunction: null }, constraints: { classPropertyName: "constraints", publicName: "constraints", 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 }, maxSelections: { classPropertyName: "maxSelections", publicName: "maxSelections", isSignal: true, isRequired: false, transformFunction: null }, maxSelectionBehavior: { classPropertyName: "maxSelectionBehavior", publicName: "maxSelectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, errorAriaDescribedBy: { classPropertyName: "errorAriaDescribedBy", publicName: "errorAriaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, rangeClickBehavior: { classPropertyName: "rangeClickBehavior", publicName: "rangeClickBehavior", isSignal: true, isRequired: false, transformFunction: null }, rangeBehavior: { classPropertyName: "rangeBehavior", publicName: "rangeBehavior", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, monthColumns: { classPropertyName: "monthColumns", publicName: "monthColumns", 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 }, resetBehavior: { classPropertyName: "resetBehavior", publicName: "resetBehavior", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange", value: "valueChange", valueChange: "valueChange", selectionStart: "selectionStart", rangePreview: "rangePreview", selectionComplete: "selectionComplete", selectionRestart: "selectionRestart", selectionCleared: "selectionCleared", selectionLimitReached: "selectionLimitReached", presetChange: "presetChange", viewChange: "viewChange", activeDateChange: "activeDateChange", monthChange: "monthChange", yearChange: "yearChange", cellClick: "cellClick", cellHover: "cellHover", modeChange: "modeChange" }, host: { listeners: { "focusout": "onBlur($event)" }, properties: { "attr.aria-disabled": "effectiveDisabled() || null", "attr.aria-readonly": "effectiveReadonly() || null", "attr.aria-describedby": "errorAriaDescribedBy() || null" }, classAttribute: "block" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CalendarComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => CalendarComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "monthViews", predicate: MonthViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      [class]="rootClasses()"
+      role="group"
+      [attr.aria-label]="effectiveIntl().calendarLabel"
+    >
+      <tw-calendar-header
+        [periodLabel]="periodLabel()"
+        [periodAriaLabel]="periodAriaLabel()"
+        [prevAriaLabel]="prevAriaLabel()"
+        [nextAriaLabel]="nextAriaLabel()"
+        [prevDisabled]="prevDisabled()"
+        [nextDisabled]="nextDisabled()"
+        [canSwitchView]="viewState() !== 'year'"
+        (prevClicked)="onPrevClicked()"
+        (nextClicked)="onNextClicked()"
+        (periodClicked)="onPeriodClicked()"
+      />
+
+      <ng-content select="[twCalendarPresets]" />
+
+      @switch (viewState()) {
+        @case ('day') {
+          <div [class]="monthsClasses()">
+            <tw-calendar-month-view
+              [activeDate]="activeDate()!"
+              [selected]="legacySelected()"
+              [minDate]="resolvedMinDate()"
+              [maxDate]="resolvedMaxDate()"
+              [dateFilter]="resolvedDateFilter()"
+              [disabledDates]="resolvedDisabledDates()"
+              [disabledDaysOfWeek]="resolvedDisabledDaysOfWeek()"
+              [dateClass]="dateClass()"
+              [cellTemplate]="cellTemplate()"
+              [firstDayOfWeek]="computedFirstDayOfWeek()"
+              [previewStart]="previewRange()?.start ?? null"
+              [previewEnd]="previewRange()?.end ?? null"
+              [invalidFlashDate]="invalidFlashDate()"
+              [gridIndex]="0"
+              [multiSelectable]="multiSelectable()"
+              [readonlyGrid]="effectiveReadonly()"
+              (selectedChange)="onDateSelected($event)"
+              (activeDateChange)="onActiveDateChange($event, 0)"
+              (previewChange)="onPreviewChange($event)"
+            />
+            @if (effectiveMonthColumns() >= 2 && secondaryActiveDate()) {
+              <tw-calendar-month-view
+                [activeDate]="secondaryActiveDate()!"
+                [selected]="legacySelected()"
+                [minDate]="resolvedMinDate()"
+                [maxDate]="resolvedMaxDate()"
+                [dateFilter]="resolvedDateFilter()"
+                [disabledDates]="resolvedDisabledDates()"
+                [disabledDaysOfWeek]="resolvedDisabledDaysOfWeek()"
+                [dateClass]="dateClass()"
+                [cellTemplate]="cellTemplate()"
+                [firstDayOfWeek]="computedFirstDayOfWeek()"
+                [previewStart]="previewRange()?.start ?? null"
+                [previewEnd]="previewRange()?.end ?? null"
+                [invalidFlashDate]="invalidFlashDate()"
+                [gridIndex]="1"
+                [multiSelectable]="multiSelectable()"
+                [readonlyGrid]="effectiveReadonly()"
+                (selectedChange)="onDateSelected($event)"
+                (activeDateChange)="onActiveDateChange($event, 1)"
+                (previewChange)="onPreviewChange($event)"
+              />
+            }
+          </div>
+        }
+        @case ('month') {
+          <tw-calendar-year-view
+            [activeDate]="activeDate()!"
+            [selected]="legacySelected()"
+            [minDate]="resolvedMinDate()"
+            [maxDate]="resolvedMaxDate()"
+            [dateClass]="dateClass()"
+            [cellTemplate]="cellTemplate()"
+            [previewStart]="previewRange()?.start ?? null"
+            [previewEnd]="previewRange()?.end ?? null"
+            [multiSelectable]="multiSelectable()"
+            [readonlyGrid]="effectiveReadonly()"
+            (selectedChange)="onMonthSelected($event)"
+            (activeDateChange)="onActiveDateChange($event)"
+            (previewChange)="onPreviewChange($event)"
+          />
+        }
+        @case ('year') {
+          <tw-calendar-years-view
+            [activeDate]="activeDate()!"
+            [selected]="legacySelected()"
+            [minDate]="resolvedMinDate()"
+            [maxDate]="resolvedMaxDate()"
+            [dateClass]="dateClass()"
+            [cellTemplate]="cellTemplate()"
+            [previewStart]="previewRange()?.start ?? null"
+            [previewEnd]="previewRange()?.end ?? null"
+            [multiSelectable]="multiSelectable()"
+            [readonlyGrid]="effectiveReadonly()"
+            (selectedChange)="onYearSelected($event)"
+            (activeDateChange)="onActiveDateChange($event)"
+            (previewChange)="onPreviewChange($event)"
+          />
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: CalendarHeaderComponent, selector: "tw-calendar-header", inputs: ["periodLabel", "periodAriaLabel", "prevAriaLabel", "nextAriaLabel", "prevDisabled", "nextDisabled", "canSwitchView"], outputs: ["prevClicked", "nextClicked", "periodClicked"] }, { kind: "component", type: MonthViewComponent, selector: "tw-calendar-month-view", inputs: ["firstDayOfWeek", "gridIndex"] }, { kind: "component", type: YearViewComponent, selector: "tw-calendar-year-view" }, { kind: "component", type: YearsViewComponent, selector: "tw-calendar-years-view" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-calendar',
+                    imports: [
+                        CalendarHeaderComponent,
+                        MonthViewComponent,
+                        YearViewComponent,
+                        YearsViewComponent,
+                    ],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CalendarComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => CalendarComponent),
+                            multi: true,
+                        },
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'block',
+                        '[attr.aria-disabled]': 'effectiveDisabled() || null',
+                        '[attr.aria-readonly]': 'effectiveReadonly() || null',
+                        '[attr.aria-describedby]': 'errorAriaDescribedBy() || null',
+                        '(focusout)': 'onBlur($event)',
+                    },
+                    template: `
+    <div
+      [class]="rootClasses()"
+      role="group"
+      [attr.aria-label]="effectiveIntl().calendarLabel"
+    >
+      <tw-calendar-header
+        [periodLabel]="periodLabel()"
+        [periodAriaLabel]="periodAriaLabel()"
+        [prevAriaLabel]="prevAriaLabel()"
+        [nextAriaLabel]="nextAriaLabel()"
+        [prevDisabled]="prevDisabled()"
+        [nextDisabled]="nextDisabled()"
+        [canSwitchView]="viewState() !== 'year'"
+        (prevClicked)="onPrevClicked()"
+        (nextClicked)="onNextClicked()"
+        (periodClicked)="onPeriodClicked()"
+      />
+
+      <ng-content select="[twCalendarPresets]" />
+
+      @switch (viewState()) {
+        @case ('day') {
+          <div [class]="monthsClasses()">
+            <tw-calendar-month-view
+              [activeDate]="activeDate()!"
+              [selected]="legacySelected()"
+              [minDate]="resolvedMinDate()"
+              [maxDate]="resolvedMaxDate()"
+              [dateFilter]="resolvedDateFilter()"
+              [disabledDates]="resolvedDisabledDates()"
+              [disabledDaysOfWeek]="resolvedDisabledDaysOfWeek()"
+              [dateClass]="dateClass()"
+              [cellTemplate]="cellTemplate()"
+              [firstDayOfWeek]="computedFirstDayOfWeek()"
+              [previewStart]="previewRange()?.start ?? null"
+              [previewEnd]="previewRange()?.end ?? null"
+              [invalidFlashDate]="invalidFlashDate()"
+              [gridIndex]="0"
+              [multiSelectable]="multiSelectable()"
+              [readonlyGrid]="effectiveReadonly()"
+              (selectedChange)="onDateSelected($event)"
+              (activeDateChange)="onActiveDateChange($event, 0)"
+              (previewChange)="onPreviewChange($event)"
+            />
+            @if (effectiveMonthColumns() >= 2 && secondaryActiveDate()) {
+              <tw-calendar-month-view
+                [activeDate]="secondaryActiveDate()!"
+                [selected]="legacySelected()"
+                [minDate]="resolvedMinDate()"
+                [maxDate]="resolvedMaxDate()"
+                [dateFilter]="resolvedDateFilter()"
+                [disabledDates]="resolvedDisabledDates()"
+                [disabledDaysOfWeek]="resolvedDisabledDaysOfWeek()"
+                [dateClass]="dateClass()"
+                [cellTemplate]="cellTemplate()"
+                [firstDayOfWeek]="computedFirstDayOfWeek()"
+                [previewStart]="previewRange()?.start ?? null"
+                [previewEnd]="previewRange()?.end ?? null"
+                [invalidFlashDate]="invalidFlashDate()"
+                [gridIndex]="1"
+                [multiSelectable]="multiSelectable()"
+                [readonlyGrid]="effectiveReadonly()"
+                (selectedChange)="onDateSelected($event)"
+                (activeDateChange)="onActiveDateChange($event, 1)"
+                (previewChange)="onPreviewChange($event)"
+              />
+            }
+          </div>
+        }
+        @case ('month') {
+          <tw-calendar-year-view
+            [activeDate]="activeDate()!"
+            [selected]="legacySelected()"
+            [minDate]="resolvedMinDate()"
+            [maxDate]="resolvedMaxDate()"
+            [dateClass]="dateClass()"
+            [cellTemplate]="cellTemplate()"
+            [previewStart]="previewRange()?.start ?? null"
+            [previewEnd]="previewRange()?.end ?? null"
+            [multiSelectable]="multiSelectable()"
+            [readonlyGrid]="effectiveReadonly()"
+            (selectedChange)="onMonthSelected($event)"
+            (activeDateChange)="onActiveDateChange($event)"
+            (previewChange)="onPreviewChange($event)"
+          />
+        }
+        @case ('year') {
+          <tw-calendar-years-view
+            [activeDate]="activeDate()!"
+            [selected]="legacySelected()"
+            [minDate]="resolvedMinDate()"
+            [maxDate]="resolvedMaxDate()"
+            [dateClass]="dateClass()"
+            [cellTemplate]="cellTemplate()"
+            [previewStart]="previewRange()?.start ?? null"
+            [previewEnd]="previewRange()?.end ?? null"
+            [multiSelectable]="multiSelectable()"
+            [readonlyGrid]="effectiveReadonly()"
+            (selectedChange)="onYearSelected($event)"
+            (activeDateChange)="onActiveDateChange($event)"
+            (previewChange)="onPreviewChange($event)"
+          />
+        }
+      }
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { monthViews: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MonthViewComponent), { isSignal: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], disabledDaysOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDaysOfWeek", required: false }] }], constraints: [{ type: i0.Input, args: [{ isSignal: true, alias: "constraints", required: false }] }], minRangeLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRangeLength", required: false }] }], maxRangeLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRangeLength", required: false }] }], maxSelections: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelections", required: false }] }], maxSelectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectionBehavior", required: false }] }], errorAriaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorAriaDescribedBy", required: false }] }], rangeClickBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeClickBehavior", required: false }] }], rangeBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeBehavior", required: false }] }], dateClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateClass", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], monthColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthColumns", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], resetBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetBehavior", required: false }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionStart: [{ type: i0.Output, args: ["selectionStart"] }], rangePreview: [{ type: i0.Output, args: ["rangePreview"] }], selectionComplete: [{ type: i0.Output, args: ["selectionComplete"] }], selectionRestart: [{ type: i0.Output, args: ["selectionRestart"] }], selectionCleared: [{ type: i0.Output, args: ["selectionCleared"] }], selectionLimitReached: [{ type: i0.Output, args: ["selectionLimitReached"] }], presetChange: [{ type: i0.Output, args: ["presetChange"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }], monthChange: [{ type: i0.Output, args: ["monthChange"] }], yearChange: [{ type: i0.Output, args: ["yearChange"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], cellHover: [{ type: i0.Output, args: ["cellHover"] }], modeChange: [{ type: i0.Output, args: ["modeChange"] }] } });
+
+function wireSignalFormsInputs(host, api) {
+    // Mirror Signal Forms flags onto the component. Effects run in the
+    // directive's injection context (constructor-created), so cleanup is
+    // automatic on destroy.
+    effect(() => {
+        host.cvaDisabled.set(api.disabled());
+    });
+    effect(() => {
+        host.cvaReadonly.set(api.readonly());
+    });
+}
+/**
+ * Signal Forms strict binding for `CalendarComponent` in `single` mode.
+ * Implements `FormValueControl<D | null>` so `[field]="form.someDate"`
+ * infers `FieldTree<D | null>` with no casts.
+ *
+ * Applies automatically when `<tw-calendar mode="single">` appears in the
+ * template. When the mode attribute is omitted, consumers bind the component
+ * directly — the CVA path handles reactive / template-driven forms.
+ */
+class CalendarSingleDirective {
+    host = inject(CalendarComponent, { self: true });
+    /** Two-way value, forwarded to the hosting `CalendarComponent`. Signal Forms `Field` binds against this. */
+    value = this.host.value;
+    /** Mirrors the bound field's disabled flag. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Mirrors the bound field's readonly flag. */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /** Mirrors the bound field's required flag. */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Mirrors the bound field's invalid flag. */
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    /** Mirrors the bound field's hidden flag. */
+    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    /** Mirrors the bound field's errors. */
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    /** Mirrors the bound field's disablement reasons. */
+    disabledReasons = input([], ...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
+    /** Two-way `touched` flag — drives and reflects the field's touched state. */
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    constructor() {
+        wireSignalFormsInputs(this.host, this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarSingleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: CalendarSingleDirective, isStandalone: true, selector: "tw-calendar[mode=\"single\"]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange" }, exportAs: ["twCalendarSingle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarSingleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tw-calendar[mode="single"]',
+                    exportAs: 'twCalendarSingle',
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disabledReasons: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledReasons", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }] } });
+/**
+ * Signal Forms strict binding for `CalendarComponent` in `multiple` mode.
+ * Implements `FormValueControl<D[]>`.
+ */
+class CalendarMultipleDirective {
+    host = inject(CalendarComponent, { self: true });
+    /** Two-way value, forwarded to the hosting `CalendarComponent`. Signal Forms `Field` binds against this. */
+    value = this.host.value;
+    /** Mirrors the bound field's disabled flag. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Mirrors the bound field's readonly flag. */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /** Mirrors the bound field's required flag. */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Mirrors the bound field's invalid flag. */
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    /** Mirrors the bound field's hidden flag. */
+    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    /** Mirrors the bound field's errors. */
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    /** Mirrors the bound field's disablement reasons. */
+    disabledReasons = input([], ...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
+    /** Two-way `touched` flag — drives and reflects the field's touched state. */
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    constructor() {
+        wireSignalFormsInputs(this.host, this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarMultipleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: CalendarMultipleDirective, isStandalone: true, selector: "tw-calendar[mode=\"multiple\"]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange" }, exportAs: ["twCalendarMultiple"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarMultipleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tw-calendar[mode="multiple"]',
+                    exportAs: 'twCalendarMultiple',
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disabledReasons: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledReasons", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }] } });
+/**
+ * Signal Forms strict binding for `CalendarComponent` in `range` mode.
+ * Implements `FormValueControl<{ start: D | null; end: D | null }>`.
+ */
+class CalendarRangeDirective {
+    host = inject(CalendarComponent, { self: true });
+    /** Two-way value, forwarded to the hosting `CalendarComponent`. Signal Forms `Field` binds against this. */
+    value = this.host.value;
+    /** Mirrors the bound field's disabled flag. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Mirrors the bound field's readonly flag. */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /** Mirrors the bound field's required flag. */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Mirrors the bound field's invalid flag. */
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    /** Mirrors the bound field's hidden flag. */
+    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    /** Mirrors the bound field's errors. */
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    /** Mirrors the bound field's disablement reasons. */
+    disabledReasons = input([], ...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
+    /** Two-way `touched` flag — drives and reflects the field's touched state. */
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    constructor() {
+        wireSignalFormsInputs(this.host, this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarRangeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: CalendarRangeDirective, isStandalone: true, selector: "tw-calendar[mode=\"range\"]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange" }, exportAs: ["twCalendarRange"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarRangeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tw-calendar[mode="range"]',
+                    exportAs: 'twCalendarRange',
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disabledReasons: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledReasons", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }] } });
+
+/**
+ * Marker directive for a slot positioned above the calendar grid. Used to
+ * style an external preset rail; the calendar renders projected content
+ * with `<ng-content select="[twCalendarPresets]">`.
+ */
+class CalendarPresetsDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarPresetsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: CalendarPresetsDirective, isStandalone: true, selector: "[twCalendarPresets]", host: { classAttribute: "flex flex-wrap items-center gap-1.5 px-2 pb-2" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarPresetsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twCalendarPresets]',
+                    host: {
+                        class: 'flex flex-wrap items-center gap-1.5 px-2 pb-2',
+                    },
+                }]
+        }] });
+
+/**
+ * German (de) locale pack for the calendar's user-visible strings.
+ * Pass into the `intl` input or via {@link provideCalendarIntl}. Per-field
+ * merge semantics (§19.4) — unspecified fields fall back to English defaults.
+ */
+const de = {
+    previousMonthLabel: 'Vorheriger Monat',
+    nextMonthLabel: 'Naechster Monat',
+    previousYearLabel: 'Vorheriges Jahr',
+    nextYearLabel: 'Naechstes Jahr',
+    previousYearsLabel(yearsPerPage) {
+        return yearsPerPage === 1 ? 'Vorheriges Jahr' : `Vorherige ${yearsPerPage} Jahre`;
+    },
+    nextYearsLabel(yearsPerPage) {
+        return yearsPerPage === 1 ? 'Naechstes Jahr' : `Naechste ${yearsPerPage} Jahre`;
+    },
+    todayLabel: 'Heute',
+    clearLabel: 'Loeschen',
+    applyLabel: 'Uebernehmen',
+    openCalendarLabel: 'Kalender oeffnen',
+    chooseDateLabel: 'Datum auswaehlen',
+    calendarLabel: 'Kalender',
+    monthViewLabel: 'Monatsansicht',
+    yearViewLabel: 'Jahresansicht',
+    decadeViewLabel: 'Jahrzehntansicht',
+    switchToMonthViewLabel(period) {
+        return `${period}, klicken um zur Monatsansicht zu wechseln`;
+    },
+    switchToYearViewLabel(period) {
+        return `${period}, klicken um zur Jahresansicht zu wechseln`;
+    },
+    navigatedTo(direction, period) {
+        const word = direction === 'previous' ? 'vorigen' : 'naechsten';
+        return `Zu ${word} ${period} navigiert`;
+    },
+    selectedAnnouncement(value) {
+        return `Ausgewaehlt: ${value}`;
+    },
+    rangeStartAnnouncement(start) {
+        return `Startdatum ausgewaehlt: ${start}. Bitte Enddatum auswaehlen.`;
+    },
+    rangeUpdateAnnouncement(start, end, lengthDays) {
+        const noun = lengthDays === 1 ? 'Tag' : 'Tage';
+        return `Zeitraum ausgewaehlt: ${start} bis ${end}, ${lengthDays} ${noun}`;
+    },
+    requiredError: 'Bitte ein Datum auswaehlen',
+    minDateError(date) {
+        return `Datum muss am oder nach dem ${date} liegen`;
+    },
+    maxDateError(date) {
+        return `Datum muss am oder vor dem ${date} liegen`;
+    },
+    invalidValueError: 'Ungueltiger Datumswert',
+    invalidRangeError: 'Ungueltiger Zeitraum',
+    dateFilterError: 'Dieses Datum ist nicht verfuegbar',
+    parseErrorLabel: 'Ungueltiges Datumsformat',
+};
+
+/**
+ * French (fr) locale pack for the calendar's user-visible strings.
+ * Pass into the `intl` input or via {@link provideCalendarIntl}. Per-field
+ * merge semantics (§19.4) — unspecified fields fall back to English defaults.
+ */
+const fr = {
+    previousMonthLabel: 'Mois precedent',
+    nextMonthLabel: 'Mois suivant',
+    previousYearLabel: 'Annee precedente',
+    nextYearLabel: 'Annee suivante',
+    previousYearsLabel(yearsPerPage) {
+        return yearsPerPage === 1 ? 'Annee precedente' : `${yearsPerPage} annees precedentes`;
+    },
+    nextYearsLabel(yearsPerPage) {
+        return yearsPerPage === 1 ? 'Annee suivante' : `${yearsPerPage} annees suivantes`;
+    },
+    todayLabel: "Aujourd'hui",
+    clearLabel: 'Effacer',
+    applyLabel: 'Appliquer',
+    openCalendarLabel: 'Ouvrir le calendrier',
+    chooseDateLabel: 'Choisir une date',
+    calendarLabel: 'Calendrier',
+    monthViewLabel: 'vue mensuelle',
+    yearViewLabel: 'vue annuelle',
+    decadeViewLabel: 'vue par decennie',
+    switchToMonthViewLabel(period) {
+        return `${period}, cliquer pour passer a la vue mensuelle`;
+    },
+    switchToYearViewLabel(period) {
+        return `${period}, cliquer pour passer a la vue annuelle`;
+    },
+    navigatedTo(direction, period) {
+        const word = direction === 'previous' ? 'precedent' : 'suivant';
+        return `Navigation vers ${period} ${word}`;
+    },
+    selectedAnnouncement(value) {
+        return `Selectionne : ${value}`;
+    },
+    rangeStartAnnouncement(start) {
+        return `Date de debut selectionnee : ${start}. Selectionnez la date de fin.`;
+    },
+    rangeUpdateAnnouncement(start, end, lengthDays) {
+        const noun = lengthDays === 1 ? 'jour' : 'jours';
+        return `Plage selectionnee : ${start} au ${end}, ${lengthDays} ${noun}`;
+    },
+    requiredError: 'Veuillez selectionner une date',
+    minDateError(date) {
+        return `La date doit etre le ${date} ou apres`;
+    },
+    maxDateError(date) {
+        return `La date doit etre le ${date} ou avant`;
+    },
+    invalidValueError: 'Valeur de date invalide',
+    invalidRangeError: 'Plage de dates invalide',
+    dateFilterError: 'Cette date n\'est pas disponible',
+    parseErrorLabel: 'Format de date invalide',
+};
+
+/**
+ * Spanish (es) locale pack for the calendar's user-visible strings.
+ * Pass into the `intl` input or via {@link provideCalendarIntl}. Per-field
+ * merge semantics (§19.4) — unspecified fields fall back to English defaults.
+ */
+const es = {
+    previousMonthLabel: 'Mes anterior',
+    nextMonthLabel: 'Mes siguiente',
+    previousYearLabel: 'Ano anterior',
+    nextYearLabel: 'Ano siguiente',
+    previousYearsLabel(yearsPerPage) {
+        return yearsPerPage === 1 ? 'Ano anterior' : `${yearsPerPage} anos anteriores`;
+    },
+    nextYearsLabel(yearsPerPage) {
+        return yearsPerPage === 1 ? 'Ano siguiente' : `${yearsPerPage} anos siguientes`;
+    },
+    todayLabel: 'Hoy',
+    clearLabel: 'Borrar',
+    applyLabel: 'Aplicar',
+    openCalendarLabel: 'Abrir calendario',
+    chooseDateLabel: 'Elegir fecha',
+    calendarLabel: 'Calendario',
+    monthViewLabel: 'vista de mes',
+    yearViewLabel: 'vista de ano',
+    decadeViewLabel: 'vista de decada',
+    switchToMonthViewLabel(period) {
+        return `${period}, haga clic para cambiar a la vista de mes`;
+    },
+    switchToYearViewLabel(period) {
+        return `${period}, haga clic para cambiar a la vista de ano`;
+    },
+    navigatedTo(direction, period) {
+        const word = direction === 'previous' ? 'anterior' : 'siguiente';
+        return `Navegado al ${period} ${word}`;
+    },
+    selectedAnnouncement(value) {
+        return `Seleccionado: ${value}`;
+    },
+    rangeStartAnnouncement(start) {
+        return `Fecha de inicio seleccionada: ${start}. Ahora seleccione la fecha de fin.`;
+    },
+    rangeUpdateAnnouncement(start, end, lengthDays) {
+        const noun = lengthDays === 1 ? 'dia' : 'dias';
+        return `Rango seleccionado: ${start} al ${end}, ${lengthDays} ${noun}`;
+    },
+    requiredError: 'Por favor seleccione una fecha',
+    minDateError(date) {
+        return `La fecha debe ser el ${date} o posterior`;
+    },
+    maxDateError(date) {
+        return `La fecha debe ser el ${date} o anterior`;
+    },
+    invalidValueError: 'Valor de fecha invalido',
+    invalidRangeError: 'Rango de fechas invalido',
+    dateFilterError: 'Esta fecha no esta disponible',
+    parseErrorLabel: 'Formato de fecha invalido',
+};
+
+/**
+ * Portuguese (pt) locale pack for the calendar's user-visible strings.
+ * Pass into the `intl` input or via {@link provideCalendarIntl}. Per-field
+ * merge semantics (§19.4) — unspecified fields fall back to English defaults.
+ */
+const pt = {
+    previousMonthLabel: 'Mes anterior',
+    nextMonthLabel: 'Proximo mes',
+    previousYearLabel: 'Ano anterior',
+    nextYearLabel: 'Proximo ano',
+    previousYearsLabel(yearsPerPage) {
+        return yearsPerPage === 1 ? 'Ano anterior' : `${yearsPerPage} anos anteriores`;
+    },
+    nextYearsLabel(yearsPerPage) {
+        return yearsPerPage === 1 ? 'Proximo ano' : `Proximos ${yearsPerPage} anos`;
+    },
+    todayLabel: 'Hoje',
+    clearLabel: 'Limpar',
+    applyLabel: 'Aplicar',
+    openCalendarLabel: 'Abrir calendario',
+    chooseDateLabel: 'Escolher data',
+    calendarLabel: 'Calendario',
+    monthViewLabel: 'visao de mes',
+    yearViewLabel: 'visao de ano',
+    decadeViewLabel: 'visao de decada',
+    switchToMonthViewLabel(period) {
+        return `${period}, clique para alternar para a visao de mes`;
+    },
+    switchToYearViewLabel(period) {
+        return `${period}, clique para alternar para a visao de ano`;
+    },
+    navigatedTo(direction, period) {
+        const word = direction === 'previous' ? 'anterior' : 'proximo';
+        return `Navegou para ${period} ${word}`;
+    },
+    selectedAnnouncement(value) {
+        return `Selecionado: ${value}`;
+    },
+    rangeStartAnnouncement(start) {
+        return `Data inicial selecionada: ${start}. Selecione a data final.`;
+    },
+    rangeUpdateAnnouncement(start, end, lengthDays) {
+        const noun = lengthDays === 1 ? 'dia' : 'dias';
+        return `Intervalo selecionado: ${start} a ${end}, ${lengthDays} ${noun}`;
+    },
+    requiredError: 'Por favor selecione uma data',
+    minDateError(date) {
+        return `A data deve ser ${date} ou posterior`;
+    },
+    maxDateError(date) {
+        return `A data deve ser ${date} ou anterior`;
+    },
+    invalidValueError: 'Valor de data invalido',
+    invalidRangeError: 'Intervalo de datas invalido',
+    dateFilterError: 'Esta data nao esta disponivel',
+    parseErrorLabel: 'Formato de data invalido',
+};
+
+/**
+ * Japanese (ja) locale pack for the calendar's user-visible strings.
+ * Pass into the `intl` input or via {@link provideCalendarIntl}. Per-field
+ * merge semantics (§19.4) — unspecified fields fall back to English defaults.
+ *
+ * Note: Japanese has no grammatical plural form, so plural-marked methods
+ * collapse to a single form.
+ */
+const ja = {
+    previousMonthLabel: '前月',
+    nextMonthLabel: '翌月',
+    previousYearLabel: '前年',
+    nextYearLabel: '翌年',
+    previousYearsLabel(yearsPerPage) {
+        return `前の${yearsPerPage}年`;
+    },
+    nextYearsLabel(yearsPerPage) {
+        return `次の${yearsPerPage}年`;
+    },
+    todayLabel: '今日',
+    clearLabel: 'クリア',
+    applyLabel: '適用',
+    openCalendarLabel: 'カレンダーを開く',
+    chooseDateLabel: '日付を選択',
+    calendarLabel: 'カレンダー',
+    monthViewLabel: '月表示',
+    yearViewLabel: '年表示',
+    decadeViewLabel: '10年表示',
+    switchToMonthViewLabel(period) {
+        return `${period}、クリックして月表示に切り替え`;
+    },
+    switchToYearViewLabel(period) {
+        return `${period}、クリックして年表示に切り替え`;
+    },
+    navigatedTo(direction, period) {
+        const word = direction === 'previous' ? '前の' : '次の';
+        return `${word}${period}に移動しました`;
+    },
+    selectedAnnouncement(value) {
+        return `選択済み: ${value}`;
+    },
+    rangeStartAnnouncement(start) {
+        return `開始日が選択されました: ${start}。終了日を選択してください。`;
+    },
+    rangeUpdateAnnouncement(start, end, lengthDays) {
+        return `期間が選択されました: ${start} から ${end}、${lengthDays}日間`;
+    },
+    requiredError: '日付を選択してください',
+    minDateError(date) {
+        return `日付は${date}以降である必要があります`;
+    },
+    maxDateError(date) {
+        return `日付は${date}以前である必要があります`;
+    },
+    invalidValueError: '無効な日付値',
+    invalidRangeError: '無効な日付範囲',
+    dateFilterError: 'この日付は利用できません',
+    parseErrorLabel: '無効な日付形式',
+};
+
+function serializeCalendarValue(value, adapter) {
+    if (value === null || value === undefined)
+        return null;
+    if (Array.isArray(value)) {
+        return value.map((d) => adapter.toIso(adapter.startOfDay(d)));
+    }
+    if (typeof value === 'object' && value !== null && 'start' in value && 'end' in value) {
+        const r = value;
+        return {
+            start: r.start ? adapter.toIso(adapter.startOfDay(r.start)) : null,
+            end: r.end ? adapter.toIso(adapter.startOfDay(r.end)) : null,
+        };
+    }
+    return adapter.toIso(adapter.startOfDay(value));
+}
+
+const MS_PER_MINUTE = 60_000;
+const warnedLocales = new Set();
+function warnUnresolvableLocaleOnce(locale) {
+    if (!isDevMode() || warnedLocales.has(locale))
+        return;
+    warnedLocales.add(locale);
+    // eslint-disable-next-line no-console
+    console.warn(`[ngx-tw/calendar] Locale "${locale}" is unknown to Intl.Locale.getWeekInfo(); falling back to Monday (1) as the first day of week (§19.2).`);
+}
+/** `Intl`-driven `Date` adapter. Zero runtime dependencies. */
+class NativeDateAdapter extends DateAdapter {
+    /**
+     * Locale is resolved lazily on first read so the constructor stays
+     * SSR-safe (no `navigator` access at class-construction time — §31.1).
+     */
+    _locale = null;
+    get locale() {
+        if (this._locale !== null)
+            return this._locale;
+        this._locale =
+            typeof navigator !== 'undefined' && typeof navigator.language === 'string'
+                ? navigator.language
+                : 'en-US';
+        return this._locale;
+    }
+    today() {
+        const now = new Date();
+        return new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    }
+    /**
+     * Constructs a `Date`. **`month` is 1-based** — `create(2026, 1, 1)` yields
+     * January 1, 2026.
+     */
+    create(year, month, day) {
+        const d = new Date(year, month - 1, day);
+        // `new Date(year, ...)` on two-digit years maps to 19xx by convention;
+        // re-anchor explicitly so consumers can construct years < 100.
+        if (year >= 0 && year < 100) {
+            d.setFullYear(year);
+        }
+        return d;
+    }
+    clone(date) {
+        return new Date(date.getTime());
+    }
+    setLocale(locale) {
+        this._locale = locale;
+    }
+    getLocale() {
+        return this.locale;
+    }
+    getYear(date) {
+        return date.getFullYear();
+    }
+    getMonth(date) {
+        return date.getMonth();
+    }
+    getDate(date) {
+        return date.getDate();
+    }
+    getDayOfWeek(date) {
+        return date.getDay();
+    }
+    getNumDaysInMonth(date) {
+        return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+    }
+    getHours(date) {
+        return date.getHours();
+    }
+    getMinutes(date) {
+        return date.getMinutes();
+    }
+    getSeconds(date) {
+        return date.getSeconds();
+    }
+    withTime(date, hours, minutes, seconds) {
+        const d = new Date(date.getTime());
+        d.setHours(hours, minutes, seconds, 0);
+        return d;
+    }
+    getFirstDayOfWeek() {
+        // §19.2: derive from `Intl.Locale.getWeekInfo()` when available; fallback to
+        // Monday (1) and emit a single dev-mode warning when the locale is unknown
+        // to `Intl.Locale`. ICU/CLDR returns 1=Monday … 7=Sunday — we normalize to
+        // the project's 0=Sunday … 6=Saturday convention.
+        if (typeof Intl !== 'undefined' && typeof Intl.Locale === 'function') {
+            try {
+                const l = new Intl.Locale(this.locale);
+                const info = (l.getWeekInfo?.() ?? l.weekInfo);
+                if (info && typeof info.firstDay === 'number') {
+                    return info.firstDay === 7 ? 0 : info.firstDay;
+                }
+            }
+            catch {
+                warnUnresolvableLocaleOnce(this.locale);
+                return 1;
+            }
+        }
+        warnUnresolvableLocaleOnce(this.locale);
+        return 1;
+    }
+    getMonthNames(style) {
+        const fmt = new Intl.DateTimeFormat(this.locale, { month: style, timeZone: 'UTC' });
+        return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(Date.UTC(2017, i, 1))));
+    }
+    getDayOfWeekNames(style) {
+        const fmt = new Intl.DateTimeFormat(this.locale, { weekday: style, timeZone: 'UTC' });
+        return Array.from({ length: 7 }, (_, i) => fmt.format(new Date(Date.UTC(2017, 0, i + 1))));
+    }
+    getDateNames(style = 'short') {
+        const fmt = new Intl.DateTimeFormat(this.locale, { day: style === 'narrow' ? 'numeric' : 'numeric', timeZone: 'UTC' });
+        return Array.from({ length: 31 }, (_, i) => fmt.format(new Date(Date.UTC(2017, 0, i + 1))));
+    }
+    getYearName(date) {
+        return new Intl.DateTimeFormat(this.locale, { year: 'numeric', timeZone: 'UTC' }).format(new Date(Date.UTC(date.getFullYear(), 0, 1)));
+    }
+    format(date, displayFormat) {
+        if (!this.isValid(date))
+            return '';
+        const fmt = displayFormat?.dateTimeFormat ?? {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        };
+        return new Intl.DateTimeFormat(this.locale, fmt).format(date);
+    }
+    addYears(date, years) {
+        return this.addMonths(date, years * 12);
+    }
+    addMonths(date, months) {
+        const d = new Date(date.getFullYear(), date.getMonth() + months, 1);
+        const targetDay = Math.min(date.getDate(), new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate());
+        return new Date(d.getFullYear(), d.getMonth(), targetDay);
+    }
+    addDays(date, days) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+    }
+    addMinutes(date, minutes) {
+        return new Date(date.getTime() + minutes * MS_PER_MINUTE);
+    }
+    addHours(date, hours) {
+        return new Date(date.getTime() + hours * 60 * MS_PER_MINUTE);
+    }
+    compare(first, second) {
+        return (this.getYear(first) - this.getYear(second) ||
+            this.getMonth(first) - this.getMonth(second) ||
+            this.getDate(first) - this.getDate(second));
+    }
+    sameDate(first, second) {
+        if (first && second) {
+            const f = this.isValid(first);
+            const s = this.isValid(second);
+            if (f && s)
+                return this.compare(first, second) === 0;
+            return f === s;
+        }
+        return first === second;
+    }
+    /**
+     * Start-of-day normalization. Rebuilds the date at `00:00:00.000` local time.
+     * On DST spring-forward days where midnight is valid, this is a no-op beyond
+     * zeroing h/m/s/ms. On DST fall-back days the repeated-01:00 hour does not
+     * affect `00:00`, so this is also safe.
+     *
+     * The edge case of an entire DST-skipped midnight (rare — exists in some
+     * historical zones) is resolved by `new Date(year, month, day)` selecting the
+     * next valid instant forward.
+     */
+    startOfDay(date) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    }
+    isValid(date) {
+        return date instanceof Date && !isNaN(date.getTime());
+    }
+    invalid() {
+        return new Date(NaN);
+    }
+    parse(value) {
+        if (typeof value === 'number')
+            return new Date(value);
+        if (value instanceof Date)
+            return this.clone(value);
+        if (typeof value === 'string') {
+            if (!value.trim())
+                return null;
+            const parsed = new Date(value);
+            return this.isValid(parsed) ? parsed : null;
+        }
+        return null;
+    }
+    deserialize(value) {
+        if (value == null || value === '')
+            return null;
+        if (value instanceof Date)
+            return this.isValid(value) ? this.clone(value) : this.invalid();
+        const parsed = this.parse(value);
+        if (parsed && this.isValid(parsed))
+            return parsed;
+        return this.invalid();
+    }
+    toIso(date) {
+        return [
+            String(date.getFullYear()).padStart(4, '0'),
+            String(date.getMonth() + 1).padStart(2, '0'),
+            String(date.getDate()).padStart(2, '0'),
+        ].join('-');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NativeDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NativeDateAdapter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NativeDateAdapter, decorators: [{
+            type: Injectable
+        }] });
+/** Provides the default `Date`-based adapter. */
+function provideNativeDateAdapter() {
+    return makeEnvironmentProviders([
+        NativeDateAdapter,
+        { provide: DATE_ADAPTER, useExisting: NativeDateAdapter },
+    ]);
+}
+/** Provides a custom `DateAdapter` implementation. */
+function provideTwCalendar(config) {
+    return makeEnvironmentProviders([
+        config.adapter,
+        { provide: DATE_ADAPTER, useExisting: config.adapter },
+        ...(config.extraProviders ?? []),
+    ]);
+}
+
+/**
+ * Convenience class that satisfies the `DateRange<D>` interface and carries
+ * `complete` / `empty` getters. Interchangeable with a plain
+ * `{ start, end }` object anywhere a `DateRange<D>` is expected.
+ */
+class TwDateRange {
+    start;
+    end;
+    constructor(start, end) {
+        this.start = start;
+        this.end = end;
+    }
+    /** True when both endpoints are set. */
+    get complete() {
+        return this.start !== null && this.end !== null;
+    }
+    /** True when neither endpoint is set. */
+    get empty() {
+        return this.start === null && this.end === null;
+    }
+}
+/** @internal Normalises any range-shaped value into a `TwDateRange` instance. */
+function toTwDateRange(value) {
+    if (value === null || value === undefined)
+        return null;
+    if (value instanceof TwDateRange)
+        return value;
+    return new TwDateRange(value.start ?? null, value.end ?? null);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CALENDAR_SELECTION_STRATEGY, CalendarCellComponent, CalendarComponent, CalendarHeaderComponent, CalendarIntl, CalendarMultipleDirective, CalendarPresetsDirective, CalendarRangeDirective, CalendarSelectionStrategy, CalendarSingleDirective, CalendarViewBase, DATE_ADAPTER, DATE_FORMATS, DATE_SERIALIZATION, DAYS_PER_WEEK, DateAdapter, MONTHS_PER_ROW, MonthViewComponent, MultiSelectionStrategy, NativeDateAdapter, RangeSelectionStrategy, SingleSelectionStrategy, TZ_OVERRIDE, TwDateRange, WEEKS_PER_MONTH, WeekSelectionStrategy, YEARS_PER_PAGE, YEARS_PER_ROW, YearViewComponent, YearsViewComponent, calendarRequiredValidator, calendarValidator, createCalendarCell, createDateRange, createGrid, de, emptyCalendarValue, es, fr, getFirstDayOfMonth, getMultiYearStartingYear, getWeekdayHeaders, isCalendarValueEmpty, isDateDisabled, isDateInRange, isMonthDisabled, isYearDisabled, ja, navigateGrid, provideCalendarIntl, provideCalendarSelectionStrategy, provideMultiSelectionStrategy, provideNativeDateAdapter, provideRangeSelectionStrategy, provideSingleSelectionStrategy, provideTwCalendar, provideWeekSelectionStrategy, pt, serializeCalendarValue, toTwDateRange, yearsPerPage };
+//# sourceMappingURL=cdevhub-ngx-tw-calendar.mjs.map