@cdevhub/ngx-tw 0.5.0 → 0.6.1

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

@@ -32,16 +32,13 @@ class CalendarHeaderComponent {
     /** Accessible label for the next button. */
     nextAriaLabel = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "nextAriaLabel" }] : /* istanbul ignore next */ []));
-    /** Disables the previous button. */
+    /** Disables the previous button — set by the orchestrator when `minDate` blocks backward navigation. Defaults to `false`. */
     prevDisabled = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "prevDisabled" }] : /* istanbul ignore next */ []));
-    /** Disables the next button. */
+    /** Disables the next button — set by the orchestrator when `maxDate` blocks forward navigation. Defaults to `false`. */
     nextDisabled = input(false, /* @ts-ignore */
     ...(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.
+    /** When false, the period button is disabled (e.g. when already at the top view). Defaults to `true` — the period button is the header's primary drill-up affordance; the special case is the top view, where there is nowhere to drill up to. */
     canSwitchView = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "canSwitchView" }] : /* istanbul ignore next */ []));
     /** Fires on previous button click. */
@@ -396,11 +393,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * 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).
+ *
+ * Keys explicitly set to `undefined` are dropped before merging. Root
+ * `tsconfig.json` does not set `exactOptionalPropertyTypes`, so
+ * `provideCalendarIntl({ monthViewLabel: bundle['calendar.monthView'] })`
+ * type-checks even when the lookup misses — and a plain `Object.assign` would
+ * then copy that `undefined` over a field `CalendarIntl` types as `string`.
+ * Because this is a bootstrap-level provider, one missing key in an i18n
+ * bundle broke *every* calendar in the app, and the failure surfaced far from
+ * the call site: `viewSwitched()` calls `.replace()` on the label directly, so
+ * the first drill-up threw `Cannot read properties of undefined (reading
+ * 'replace')`. Filtering here makes a missing key fall back to the English
+ * default instead.
  */
 function provideCalendarIntl(custom) {
     return {
         provide: CalendarIntl,
-        useFactory: () => Object.assign(new CalendarIntl(), custom),
+        useFactory: () => {
+            const overrides = Object.fromEntries(Object.entries(custom ?? {}).filter(([, value]) => value !== undefined));
+            return Object.assign(new CalendarIntl(), overrides);
+        },
     };
 }
 
@@ -819,16 +831,37 @@ function calendarRequiredValidator(mode) {
  * 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');
+const TW_TZ_OVERRIDE = new InjectionToken('tw-calendar/TZ_OVERRIDE');
+/**
+ * @deprecated Renamed to {@link TW_TZ_OVERRIDE} for consistency with every other
+ * ngx-tw injection token. This is the *same token instance*, not a copy —
+ * providing under either name and injecting under the other resolves — so the
+ * rename is safe to adopt incrementally. Removed in the next major.
+ */
+const TZ_OVERRIDE = TW_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');
+const TW_DATE_SERIALIZATION = new InjectionToken('tw-calendar/DATE_SERIALIZATION');
+/**
+ * @deprecated Renamed to {@link TW_DATE_SERIALIZATION} for consistency with
+ * every other ngx-tw injection token. This is the *same token instance*, not a
+ * copy — providing under either name and injecting under the other resolves —
+ * so the rename is safe to adopt incrementally. Removed in the next major.
+ */
+const DATE_SERIALIZATION = TW_DATE_SERIALIZATION;
 /** DI token carrying the default `DateFormats`. The calendar's `dateFormats` input overrides. */
-const DATE_FORMATS = new InjectionToken('tw-calendar/DateFormats');
+const TW_DATE_FORMATS = new InjectionToken('tw-calendar/DateFormats');
+/**
+ * @deprecated Renamed to {@link TW_DATE_FORMATS} for consistency with every
+ * other ngx-tw injection token. This is the *same token instance*, not a copy —
+ * providing under either name and injecting under the other resolves — so the
+ * rename is safe to adopt incrementally. Removed in the next major.
+ */
+const DATE_FORMATS = TW_DATE_FORMATS;
 /**
  * Abstract date adapter. Ship a subclass to swap the underlying date library
  * (Luxon, date-fns, Temporal). The calendar consumes only the methods defined
@@ -911,18 +944,50 @@ class DateAdapter {
  * 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 TW_DATE_ADAPTER = new InjectionToken('tw-calendar/DateAdapter');
+/**
+ * @deprecated Renamed to {@link TW_DATE_ADAPTER} for consistency with every
+ * other ngx-tw injection token. This is the *same token instance*, not a copy —
+ * providing under either name and injecting under the other resolves, so an app
+ * that provides `DATE_ADAPTER` keeps working against a library that injects
+ * `TW_DATE_ADAPTER`. Removed in the next major.
+ */
+const DATE_ADAPTER = TW_DATE_ADAPTER;
 
 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',
+        // `aria-disabled:` rather than `disabled:` — the button never carries the
+        // native `disabled` attribute (see the host template), so the `disabled:`
+        // variant would never match.
+        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 aria-disabled:cursor-not-allowed',
     },
     variants: {
+        // Every view's cell is `h-9` — the 36px `md` control height from
+        // docs/vertical-rhythm.md. Month and year cells were `h-10`, which made a
+        // month-picker row 4px taller than a day row for no reason and put the
+        // value off the height scale. Only the width differs per view (a day is
+        // one or two digits in a circle; a month/year is a 3–4 char label in a
+        // rounded rect). The panel's height is pinned separately — see the
+        // view-region wrapper in `calendar.ts`.
+        //
+        // Widths are chosen so all three grids compute to the SAME 252px intrinsic
+        // width, which is what stops the panel shifting horizontally on a view
+        // switch. The day grid is `grid-cols-7 gap-0`: 7 x 36 = 252. The month and
+        // year grids are `grid-cols-4 gap-1`: 4 x 60 + 3 x 4 = 252. Month cells were
+        // `w-16` (4 x 64 + 12 = 268) and year cells `w-14` (4 x 56 + 12 = 236), which
+        // is where the 270 / 286 / 254 panel spread came from.
+        //
+        // The day cell is deliberately untouched: its `w-9` button has to coincide
+        // exactly with its grid column so the range wrapper's `rounded-l-full` /
+        // `rounded-r-full` cap lands on the selected endpoint pill instead of ~1px
+        // past it. Equalising via the month and year cells keeps that coincidence
+        // intact by construction, where a `min-w` on the shared view region would
+        // have broken it — see the note in `calendar.ts`.
         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' },
+            month: { button: 'h-9 w-15 text-sm rounded-md' },
+            year: { button: 'h-9 w-15 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`)
@@ -987,16 +1052,16 @@ class CalendarCellComponent {
     /** The cell data object to render. */
     cell = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cell" }] : /* istanbul ignore next */ []));
-    /** The active calendar view — drives cell dimensions and radius. */
+    /** The active calendar view — drives cell width and radius. Defaults to `'day'`. */
     view = input('day', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
-    /** `true` when the cell's date is outside the currently displayed month. */
+    /** `true` when the cell's date is outside the currently displayed month, which mutes its text. Defaults to `false`. */
     outside = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "outside" }] : /* istanbul ignore next */ []));
-    /** Tab index for roving focus (`0` for the active cell, `-1` otherwise). */
+    /** Tab index for roving focus (`0` for the active cell, `-1` otherwise). Defaults to `-1`. */
     tabindex = input(-1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
-    /** Optional template rendered inside the button — receives `{ $implicit: CalendarCell<D> }`. */
+    /** Optional template rendered inside the button — receives `{ $implicit: CalendarCell<D> }`. Defaults to `null` (the cell renders its own display value). */
     cellTemplate = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
     /** Emitted when the user activates the cell (click, Enter, or Space). */
@@ -1088,6 +1153,12 @@ class CalendarCellComponent {
         }
     }
     onMouseEnter() {
+        // Browsers do not dispatch mouse events on a natively disabled button, so
+        // before the switch to `aria-disabled` a disabled cell never previewed.
+        // Guard explicitly to keep range preview from extending over dates the user
+        // cannot pick.
+        if (!this.cell().enabled)
+            return;
         this.previewed.emit(this.cell());
     }
     onFocus() {
@@ -1098,18 +1169,25 @@ class CalendarCellComponent {
         this.buttonRef()?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CalendarCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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.aria-selected": "cell().isSelected || null", "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()">
+      <!--
+        No native disabled attribute. A disabled button cannot take DOM focus,
+        so focusButton was a silent no-op on any out-of-range cell and the
+        roving tabindex drifted out of sync with the real activeElement -
+        pressing Tab into a grid whose cursor sat on a bounded date focused
+        nothing at all. APG uses aria-disabled for grid cells for exactly this
+        reason: the cell stays focusable and announceable, while activation is
+        refused in onClick and onKeydown.
+      -->
       <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()"
@@ -1135,6 +1213,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         role: 'gridcell',
+                        // `aria-selected` belongs HERE, not on the inner <button>. A button's
+                        // implicit role does not support `aria-selected`, so the previous binding
+                        // exposed nothing: the selected day's state was invisible to assistive tech
+                        // (SC 4.1.2). `gridcell` is the role that carries selection state, and it is
+                        // the element the grid/row structure actually addresses.
+                        '[attr.aria-selected]': "cell().isSelected || null",
                         // 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.
@@ -1155,16 +1239,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     },
                     template: `
     <div [class]="wrapperClasses()">
+      <!--
+        No native disabled attribute. A disabled button cannot take DOM focus,
+        so focusButton was a silent no-op on any out-of-range cell and the
+        roving tabindex drifted out of sync with the real activeElement -
+        pressing Tab into a grid whose cursor sat on a bounded date focused
+        nothing at all. APG uses aria-disabled for grid cells for exactly this
+        reason: the cell stays focusable and announceable, while activation is
+        refused in onClick and onKeydown.
+      -->
       <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()"
@@ -1191,47 +1282,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * `getActiveCompareValue`.
  */
 class CalendarViewBase {
-    dateAdapter = inject(DATE_ADAPTER);
+    dateAdapter = inject(TW_DATE_ADAPTER);
     /** The date that anchors the grid being rendered. */
     activeDate = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
-    /** Current selection — scalar, array (multi), or range. */
+    /** Current selection — scalar, array (multi), or range. Defaults to `null` (nothing selected). */
     selected = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
-    /** Minimum selectable date. */
+    /** Minimum selectable date. Defaults to `null` (no lower bound). */
     minDate = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
-    /** Maximum selectable date. */
+    /** Maximum selectable date. Defaults to `null` (no upper bound). */
     maxDate = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
-    /** Per-date predicate — return `false` to disable. */
+    /** Per-date predicate — return `false` to disable. Defaults to `null` (every date passes). */
     dateFilter = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
-    /** Explicitly disabled dates — array (compared via `adapter.sameDate`) or predicate (returns `true` for disabled). */
+    /** Explicitly disabled dates — array (compared via `adapter.sameDate`) or predicate (returns `true` for disabled). Defaults to `null` (none). */
     disabledDates = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
-    /** Days of the week to disable (0=Sun … 6=Sat). Empty array = no day-of-week disabling. */
+    /** Days of the week to disable (0=Sun … 6=Sat). Defaults to `[]` — no day-of-week disabling. */
     disabledDaysOfWeek = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledDaysOfWeek" }] : /* istanbul ignore next */ []));
-    /** Per-cell class override. */
+    /** Per-cell class override — returns extra classes appended to the cell button. Defaults to `null` (no extra classes). */
     dateClass = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
-    /** Hover-preview start (set while user is mid-range pick). */
+    /** Hover-preview start (set while user is mid-range pick). Defaults to `null` (no preview). */
     previewStart = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "previewStart" }] : /* istanbul ignore next */ []));
-    /** Hover-preview end. */
+    /** Hover-preview end. Defaults to `null` (no preview). */
     previewEnd = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "previewEnd" }] : /* istanbul ignore next */ []));
-    /** Phase 6 — date that briefly flashes as invalid (rejected commit). Cleared by the orchestrator. */
+    /** Phase 6 — date that briefly flashes as invalid (rejected commit). Cleared by the orchestrator. Defaults to `null` (no flash). */
     invalidFlashDate = input(null, /* @ts-ignore */
     ...(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. */
+    /** `true` when the parent calendar allows more than one cell to be selected at once. Drives `aria-multiselectable` on the grid host. Defaults to `false`. */
     multiSelectable = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "multiSelectable" }] : /* istanbul ignore next */ []));
-    /** `true` when the parent calendar is in read-only mode. Drives `aria-readonly` on the grid host. */
+    /** `true` when the parent calendar is in read-only mode. Drives `aria-readonly` on the grid host. Defaults to `false`. */
     readonlyGrid = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "readonlyGrid" }] : /* istanbul ignore next */ []));
-    /** Optional cell-content override. */
+    /**
+     * `true` when the parent calendar is disabled (the `disabled` input, or a
+     * bound form control's `setDisabledState`). Every cell then reports
+     * `aria-disabled` and refuses activation. Defaults to `false`.
+     *
+     * Distinct from `readonlyGrid`: read-only keeps cells *selectable-looking*
+     * and only blocks the commit in the orchestrator, whereas disabled removes
+     * the affordance itself. Both leave the grid focusable and arrow-navigable —
+     * per WAI-ARIA APG, a focusable disabled element stays "operable to the
+     * extent of allowing the user to read its state", and `rovingCellValue`
+     * guarantees exactly one tabbable cell so the grid never drops out of the
+     * tab order.
+     */
+    disabledGrid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledGrid" }] : /* istanbul ignore next */ []));
+    /** Optional cell-content override, rendered inside each cell button with `{ $implicit: CalendarCell<D> }`. Defaults to `null` (the cell renders its own display value). */
     cellTemplate = input(null, /* @ts-ignore */
     ...(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. */
@@ -1332,12 +1438,52 @@ class CalendarViewBase {
     onGridMouseLeave() {
         this.previewChange.emit(null);
     }
+    /**
+     * `compareValue` of the cell that owns the roving tabindex, resolved against
+     * the cells actually rendered right now.
+     *
+     * `focusedCellValue` is written only by `focusCell()` and nothing ever resets
+     * it, so it goes stale the moment the displayed period changes by any route
+     * that does not itself call `focusCell()` — the header's prev/next buttons,
+     * a programmatic `activeDate` assignment, a view switch. A stale value
+     * matches no rendered cell, `isActiveCell` then answered `false` for every
+     * one of them, and the grid left the tab order entirely: zero cells with
+     * `tabindex="0"`, nothing to Tab into, keyboard users locked out (SC 2.1.1).
+     *
+     * Resolving here rather than resetting the signal keeps this a pure read —
+     * no effect, no write, no cycle — and the three fallbacks guarantee the
+     * invariant the defect broke: a non-empty grid always has exactly one
+     * tabbable cell.
+     */
+    rovingCellValue = computed(() => {
+        const grid = this.cells();
+        const focused = this.focusedCellValue();
+        if (focused !== null && this.gridHasValue(grid, focused))
+            return focused;
+        const active = this.getActiveCompareValue();
+        if (this.gridHasValue(grid, active))
+            return active;
+        // Neither anchor is on screen. Rather than strand the grid, hand the cursor
+        // to the first selectable cell — or, if every cell is disabled, the first
+        // cell, which is still focusable now that cells use `aria-disabled`.
+        for (const row of grid) {
+            const enabled = row.find((c) => c.enabled);
+            if (enabled)
+                return enabled.compareValue;
+        }
+        for (const row of grid) {
+            if (row.length > 0)
+                return row[0].compareValue;
+        }
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rovingCellValue" }] : /* istanbul ignore next */ []));
+    gridHasValue(grid, value) {
+        return grid.some((row) => row.some((c) => c.compareValue === value));
+    }
     /** 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;
+        return cell.compareValue === this.rovingCellValue();
     }
     /** Imperatively focuses the cell matching `compareValue` after the next render. */
     focusCell(compareValue) {
@@ -1346,15 +1492,20 @@ class CalendarViewBase {
     }
     /** Focuses the cell that currently owns the roving cursor. */
     focusActiveCell() {
-        const target = this.focusedCellValue() ?? this.getActiveCompareValue();
+        // Read through `rovingCellValue` so a stale `focusedCellValue` cannot aim
+        // focus at a cell that is no longer rendered — the same staleness that used
+        // to empty the tab order also made this a silent no-op.
+        const target = this.rovingCellValue();
+        if (target === null)
+            return;
         this.focusCell(target);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CalendarViewBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", 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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", 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 }, disabledGrid: { classPropertyName: "disabledGrid", publicName: "disabledGrid", 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: "22.0.7", 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"] }] } });
+        }], 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 }] }], disabledGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledGrid", 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;
 /**
@@ -1365,10 +1516,10 @@ class MonthViewComponent extends CalendarViewBase {
     view = 'day';
     cellComponents = viewChildren(CalendarCellComponent, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cellComponents" }] : /* istanbul ignore next */ []));
-    /** Override first day of week (0=Sun, 1=Mon). */
+    /** Override first day of week (0=Sun, 1=Mon). Defaults to `0` (Sunday). */
     firstDayOfWeek = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
-    /** Index within a multi-month row (0=left, 1+=right) — used by the orchestrator to disambiguate focus. */
+    /** Index within a multi-month row (0=left, 1+=right) — used by the orchestrator to disambiguate focus. Defaults to `0`. */
     gridIndex = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "gridIndex" }] : /* istanbul ignore next */ []));
     weekdayHeaders = computed(() => getWeekdayHeaders(this.dateAdapter, 'long', this.firstDayOfWeek()), /* @ts-ignore */
@@ -1392,6 +1543,7 @@ class MonthViewComponent extends CalendarViewBase {
         const disabledDaysOfWeek = this.disabledDaysOfWeek();
         const dateClass = this.dateClass();
         const displayedMonth = this.displayMonth();
+        const gridDisabled = this.disabledGrid();
         const days = [];
         for (let i = 0; i < TOTAL_CELLS; i++) {
             const date = this.dateAdapter.addDays(startDate, i);
@@ -1403,7 +1555,8 @@ class MonthViewComponent extends CalendarViewBase {
                 value: date,
                 displayValue: String(dayOfMonth),
                 ariaLabel: this.dateAdapter.format(date, { dateTimeFormat: { dateStyle: 'full' } }),
-                enabled: !isDateDisabled(date, minDate, maxDate, dateFilter, this.dateAdapter, disabledDates, disabledDaysOfWeek),
+                enabled: !gridDisabled &&
+                    !isDateDisabled(date, minDate, maxDate, dateFilter, this.dateAdapter, disabledDates, disabledDaysOfWeek),
                 cssClasses: dateClass ? dateClass(date, this.view) : '',
                 compareValue,
             });
@@ -1600,6 +1753,7 @@ class YearViewComponent extends CalendarViewBase {
         const minDate = this.minDate();
         const maxDate = this.maxDate();
         const dateClass = this.dateClass();
+        const gridDisabled = this.disabledGrid();
         const months = [];
         for (let m = 0; m < MONTHS_PER_YEAR; m++) {
             const date = this.dateAdapter.create(year, m + 1, 1);
@@ -1608,7 +1762,7 @@ class YearViewComponent extends CalendarViewBase {
                 value: date,
                 displayValue: name,
                 ariaLabel: `${name} ${year}`,
-                enabled: !isMonthDisabled(year, m, minDate, maxDate, this.dateAdapter),
+                enabled: !gridDisabled && !isMonthDisabled(year, m, minDate, maxDate, this.dateAdapter),
                 cssClasses: dateClass ? dateClass(date, this.view) : '',
                 compareValue: m,
             });
@@ -1827,6 +1981,7 @@ class YearsViewComponent extends CalendarViewBase {
         const minDate = this.minDate();
         const maxDate = this.maxDate();
         const dateClass = this.dateClass();
+        const gridDisabled = this.disabledGrid();
         const years = [];
         for (let i = 0; i < YEARS_PER_PAGE; i++) {
             const year = start + i;
@@ -1836,7 +1991,7 @@ class YearsViewComponent extends CalendarViewBase {
                 value: date,
                 displayValue: label,
                 ariaLabel: label,
-                enabled: !isYearDisabled(year, minDate, maxDate, this.dateAdapter),
+                enabled: !gridDisabled && !isYearDisabled(year, minDate, maxDate, this.dateAdapter),
                 cssClasses: dateClass ? dateClass(date, this.view) : '',
                 compareValue: year,
             });
@@ -2024,7 +2179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         }], propDecorators: { cellComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => CalendarCellComponent), { isSignal: true }] }] } });
 
 /**
- * Pluggable selection behaviour. Provide via `CALENDAR_SELECTION_STRATEGY` to
+ * Pluggable selection behaviour. Provide via `TW_CALENDAR_SELECTION_STRATEGY` to
  * customise how clicks mutate the calendar's `selected` value.
  *
  * `D` is the date type understood by the active `DateAdapter`.
@@ -2034,14 +2189,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 class CalendarSelectionStrategy {
 }
 /** Injection token for the active selection strategy. */
-const CALENDAR_SELECTION_STRATEGY = new InjectionToken('tw-calendar/SelectionStrategy');
+const TW_CALENDAR_SELECTION_STRATEGY = new InjectionToken('tw-calendar/SelectionStrategy');
+/**
+ * @deprecated Renamed to {@link TW_CALENDAR_SELECTION_STRATEGY} for consistency
+ * with every other ngx-tw injection token. This is the *same token instance*,
+ * not a copy — providing under either name and injecting under the other
+ * resolves — so the rename is safe to adopt incrementally. Removed in the next
+ * major.
+ */
+const CALENDAR_SELECTION_STRATEGY = TW_CALENDAR_SELECTION_STRATEGY;
 
 /**
  * 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);
+    dateAdapter = inject(TW_DATE_ADAPTER);
     select(date, _current) {
         return { selection: date, isComplete: true };
     }
@@ -2080,7 +2243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * `selected` has shape `DateRange<D> | null`.
  */
 class RangeSelectionStrategy extends CalendarSelectionStrategy {
-    dateAdapter = inject(DATE_ADAPTER);
+    dateAdapter = inject(TW_DATE_ADAPTER);
     select(date, current) {
         // No start yet, or the previous range is already complete — start over.
         if (!current || (current.start && current.end)) {
@@ -2149,7 +2312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * - `selected` has shape `D[]`.
  */
 class MultiSelectionStrategy extends CalendarSelectionStrategy {
-    dateAdapter = inject(DATE_ADAPTER);
+    dateAdapter = inject(TW_DATE_ADAPTER);
     select(date, current) {
         const existing = current ?? [];
         const index = existing.findIndex((d) => this.dateAdapter.sameDate(d, date));
@@ -2191,7 +2354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * `selected` has shape `DateRange<D> | null`.
  */
 class WeekSelectionStrategy extends CalendarSelectionStrategy {
-    dateAdapter = inject(DATE_ADAPTER);
+    dateAdapter = inject(TW_DATE_ADAPTER);
     select(date, _current) {
         return { selection: this.weekRange(date), isComplete: true };
     }
@@ -2239,23 +2402,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 /** Provides single-date selection (default behaviour). */
 function provideSingleSelectionStrategy() {
-    return { provide: CALENDAR_SELECTION_STRATEGY, useClass: SingleSelectionStrategy };
+    return { provide: TW_CALENDAR_SELECTION_STRATEGY, useClass: SingleSelectionStrategy };
 }
 /** Provides two-click date-range selection. */
 function provideRangeSelectionStrategy() {
-    return { provide: CALENDAR_SELECTION_STRATEGY, useClass: RangeSelectionStrategy };
+    return { provide: TW_CALENDAR_SELECTION_STRATEGY, useClass: RangeSelectionStrategy };
 }
 /** Provides toggle-based multi-date selection. */
 function provideMultiSelectionStrategy() {
-    return { provide: CALENDAR_SELECTION_STRATEGY, useClass: MultiSelectionStrategy };
+    return { provide: TW_CALENDAR_SELECTION_STRATEGY, useClass: MultiSelectionStrategy };
 }
 /** Provides week-at-a-time selection. */
 function provideWeekSelectionStrategy() {
-    return { provide: CALENDAR_SELECTION_STRATEGY, useClass: WeekSelectionStrategy };
+    return { provide: TW_CALENDAR_SELECTION_STRATEGY, useClass: WeekSelectionStrategy };
 }
 /** Provides an arbitrary custom selection strategy. */
 function provideCalendarSelectionStrategy(strategy) {
-    return { provide: CALENDAR_SELECTION_STRATEGY, useClass: strategy };
+    return { provide: TW_CALENDAR_SELECTION_STRATEGY, useClass: strategy };
 }
 
 const calendarVariants = tv({
@@ -2272,8 +2435,22 @@ const calendarVariants = tv({
             1: { months: '' },
             2: { months: 'flex gap-3' },
         },
+        // Deliberately `opacity-50` WITHOUT `pointer-events-none`, which is the
+        // pairing CLAUDE.md's disabled table otherwise prefers. Cells must keep
+        // receiving mouse events: `calendar-cell.ts` dropped the native
+        // `disabled` attribute precisely because browsers do not dispatch mouse
+        // events on a natively-disabled button, which silently killed range
+        // preview and made `focusButton()` a no-op. `pointer-events-none` here
+        // reintroduces exactly that class of bug one level up. Activation is
+        // already refused at three layers (the cell's `enabled` flag, the view
+        // base's `onCellSelected`, and `onDateSelected`'s early return), so the
+        // container needs no pointer suppression.
+        disabled: {
+            true: { root: 'opacity-50' },
+            false: {},
+        },
     },
-    defaultVariants: { bordered: true, columns: 1 },
+    defaultVariants: { bordered: true, columns: 1, disabled: false },
 }, { twMerge: true });
 /**
  * Main calendar orchestrator. Composes the header and view components
@@ -2289,7 +2466,7 @@ const calendarVariants = tv({
  *   it defaults to `CalendarValue<M, D>` so forms see raw adapter values).
  */
 class CalendarComponent {
-    dateAdapter = inject(DATE_ADAPTER);
+    dateAdapter = inject(TW_DATE_ADAPTER);
     elementRef = inject((ElementRef));
     injector = inject(Injector);
     destroyRef = inject(DestroyRef);
@@ -2310,14 +2487,14 @@ class CalendarComponent {
      * via `effectiveIntl()` (§19.4 per-field merge).
      */
     injectedIntl = inject(CalendarIntl, { optional: true }) ?? new CalendarIntl();
-    injectedStrategy = inject(CALENDAR_SELECTION_STRATEGY, {
+    injectedStrategy = inject(TW_CALENDAR_SELECTION_STRATEGY, {
         optional: true,
     });
     monthViews = viewChildren(MonthViewComponent, /* @ts-ignore */
     ...(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
+     * `inject(TW_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.
      */
@@ -2329,13 +2506,14 @@ class CalendarComponent {
     // ---------------------------------------------------------------------------
     // Public inputs (§33.1)
     // ---------------------------------------------------------------------------
-    /** Selection mode (§5). Changing this at runtime clears the value and emits `modeChange`. */
+    /** Selection mode (§5), bound as `mode`. Changing this at runtime clears the value and emits `modeChange`. Defaults to `'single'`. */
     modeInput = input('single', { ...(ngDevMode ? { debugName: "modeInput" } : /* istanbul ignore next */ {}), alias: 'mode' });
     mode = linkedSignal(this.modeInput, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     /**
-     * Consumer-bound value. Shape narrows by `M`: `D | null` for single,
-     * `D[]` for multiple, `{ start; end }` for range.
+     * Consumer-bound value, bound as `value`. Shape narrows by `M`: `D | null` for
+     * single, `D[]` for multiple, `{ start; end }` for range. Defaults to `null`,
+     * which reads as the empty selection in every mode.
      */
     valueInput = input(null, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
     value = linkedSignal(this.valueInput, /* @ts-ignore */
@@ -2343,23 +2521,24 @@ class CalendarComponent {
     /** Anchor date for the displayed view. Defaults to today on mount. */
     startAt = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
-    /** Minimum selectable date. */
+    /** Minimum selectable date. Defaults to `null` (no lower bound). */
     minDate = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
-    /** Maximum selectable date. */
+    /** Maximum selectable date. Defaults to `null` (no upper bound). */
     maxDate = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
-    /** Per-date predicate — return `false` to disable. */
+    /** Per-date predicate — return `false` to disable. Defaults to `null` (every date passes). */
     dateFilter = input(null, /* @ts-ignore */
     ...(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]`.
+     * Defaults to `null` (no explicitly disabled dates).
      */
     disabledDates = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
-    /** Days of the week to disable (0=Sun … 6=Sat). Empty array = no day-of-week disabling. */
+    /** Days of the week to disable (0=Sun … 6=Sat). Defaults to `[]` — no day-of-week disabling. */
     disabledDaysOfWeek = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledDaysOfWeek" }] : /* istanbul ignore next */ []));
     /**
@@ -2368,17 +2547,17 @@ class CalendarComponent {
      * 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.
+     * are set non-null. Defaults to `null` (no bundle; use the individual inputs).
      */
     constraints = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "constraints" }] : /* istanbul ignore next */ []));
-    /** Minimum range length in days, inclusive (`mode: 'range'` only). `null` = no minimum. */
+    /** Minimum range length in days, inclusive (`mode: 'range'` only). Defaults to `null` — no minimum. */
     minRangeLength = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "minRangeLength" }] : /* istanbul ignore next */ []));
-    /** Maximum range length in days, inclusive (`mode: 'range'` only). `null` = no maximum. */
+    /** Maximum range length in days, inclusive (`mode: 'range'` only). Defaults to `null` — no maximum. */
     maxRangeLength = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "maxRangeLength" }] : /* istanbul ignore next */ []));
-    /** Maximum number of selections in `mode: 'multiple'`. `null` = unlimited. */
+    /** Maximum number of selections in `mode: 'multiple'`. Defaults to `null` — unlimited. */
     maxSelections = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "maxSelections" }] : /* istanbul ignore next */ []));
     /**
@@ -2391,10 +2570,41 @@ class CalendarComponent {
     /**
      * 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.
+     * rendered error messages alongside the focused cell announcement. Defaults to
+     * `null` (no error ids are contributed).
+     *
+     * @deprecated Superseded by the plain `aria-describedby` attribute, which now
+     * feeds {@link ariaDescribedby}. Both are merged — error ids first — so an
+     * existing `[errorAriaDescribedBy]` binding keeps working; it will be removed
+     * in a future major.
      */
     errorAriaDescribedBy = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errorAriaDescribedBy" }] : /* istanbul ignore next */ []));
+    /**
+     * ID of an external element that describes the calendar, supplied as the plain
+     * `aria-describedby` attribute. Merged with {@link errorAriaDescribedBy} —
+     * error ids are listed first so assistive tech announces them before the
+     * general description. Defaults to `null`.
+     */
+    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    /**
+     * Merged `aria-describedby` IDREF list: error ids from
+     * {@link errorAriaDescribedBy} first, then the consumer's `aria-describedby`.
+     * Mirrors `checkbox`'s `effectiveAriaDescribedby()`.
+     *
+     * @internal
+     */
+    effectiveAriaDescribedby = computed(() => {
+        const merged = [];
+        for (const source of [this.errorAriaDescribedBy(), this.ariaDescribedby()]) {
+            if (!source)
+                continue;
+            for (const id of source.split(/\s+/).filter(Boolean))
+                merged.push(id);
+        }
+        return merged.length ? merged.join(' ') : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveAriaDescribedby" }] : /* 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`.
@@ -2410,37 +2620,37 @@ class CalendarComponent {
      */
     rangeBehavior = input({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rangeBehavior" }] : /* istanbul ignore next */ []));
-    /** Function producing per-cell CSS classes. */
+    /** Function producing per-cell CSS classes, appended to the cell button. Defaults to `null` (no extra classes). */
     dateClass = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
-    /** When `true`, the calendar renders with a border and a soft shadow. */
+    /** When `true`, the calendar renders with a border and a soft shadow. Defaults to `true` — an embedded calendar reads as a bordered panel; the special case is the borderless variant. */
     bordered = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
     /** Which view opens first. Defaults to `'day'`. Phase 8 will derive the default from `rangeGranularity`. */
     startView = input('day', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
-    /** Override first day of week (0=Sun, 1=Mon). Falls back to the adapter's default. */
+    /** Override first day of week (0=Sun, 1=Mon). Defaults to `null` — falls back to the adapter's locale default. */
     firstDayOfWeek = input(null, /* @ts-ignore */
     ...(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).
+     * full `numberOfMonths: 1..12+` surface (§23). Defaults to `1`.
      */
     monthColumns = input(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "monthColumns" }] : /* istanbul ignore next */ []));
-    /** Disabled state. Merged with any `setDisabledState` call from a bound form control via `effectiveDisabled`. */
+    /** Disabled state. Merged with any `setDisabledState` call from a bound form control via `effectiveDisabled`. Defaults to `false`. */
     disabled = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    /** Read-only state (§33.1). When `true`, focus and keyboard navigation still work but selections cannot be committed. */
+    /** Read-only state (§33.1). When `true`, focus and keyboard navigation still work but selections cannot be committed. Defaults to `false`. */
     readonly = input(false, /* @ts-ignore */
     ...(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', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resetBehavior" }] : /* istanbul ignore next */ []));
-    /** Optional cell-content template. */
+    /** Optional cell-content template, rendered inside each cell button with `{ $implicit: CalendarCell<D> }`. Defaults to `null` (cells render their own display value). */
     cellTemplate = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
-    /** Per-instance locale override. Falls back to Angular `LOCALE_ID` when `null` (§19.1). */
+    /** Per-instance locale override. Defaults to `null` — falls back to Angular's `LOCALE_ID` (§19.1). */
     locale = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
     /**
@@ -2794,7 +3004,8 @@ class CalendarComponent {
     /**
      * 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.
+     * fields. Unspecified fields fall through to English defaults — and so do
+     * fields the consumer set explicitly to `undefined`.
      */
     effectiveIntl = computed(() => {
         const override = this.intl();
@@ -2803,7 +3014,14 @@ class CalendarComponent {
         // 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);
+        // Drop explicitly-`undefined` keys first. `Object.assign` copies own
+        // enumerable properties *including* ones whose value is `undefined`, so
+        // `[intl]="{ monthViewLabel: bundle['x'] }"` with a missing key would blank
+        // the default rather than fall through to it — and `viewSwitched()` calls
+        // `.replace()` on that field directly, throwing on the next view switch.
+        // Same guard as `provideCalendarIntl`.
+        const overrides = Object.fromEntries(Object.entries(override).filter(([, value]) => value !== undefined));
+        Object.assign(merged, this.injectedIntl, overrides);
         return merged;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveIntl" }] : /* istanbul ignore next */ []));
@@ -2903,6 +3121,7 @@ class CalendarComponent {
     variantResult = computed(() => calendarVariants({
         bordered: this.bordered(),
         columns: (this.effectiveMonthColumns() >= 2 ? 2 : 1),
+        disabled: this.effectiveDisabled(),
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
     /** @internal */
@@ -3670,7 +3889,7 @@ class CalendarComponent {
         return this.dateAdapter.format(date, { dateTimeFormat: { dateStyle: 'full' } });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: CalendarComponent, isStandalone: true, selector: "tw-calendar", inputs: { modeInput: { classPropertyName: "modeInput", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", 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: { 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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: CalendarComponent, isStandalone: true, selector: "tw-calendar", inputs: { modeInput: { classPropertyName: "modeInput", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", 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 }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", 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: { 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": "effectiveAriaDescribedby() || null" }, classAttribute: "block" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CalendarComponent),
@@ -3692,9 +3911,9 @@ class CalendarComponent {
         [periodAriaLabel]="periodAriaLabel()"
         [prevAriaLabel]="prevAriaLabel()"
         [nextAriaLabel]="nextAriaLabel()"
-        [prevDisabled]="prevDisabled()"
-        [nextDisabled]="nextDisabled()"
-        [canSwitchView]="viewState() !== 'year'"
+        [prevDisabled]="prevDisabled() || effectiveDisabled()"
+        [nextDisabled]="nextDisabled() || effectiveDisabled()"
+        [canSwitchView]="viewState() !== 'year' && !effectiveDisabled()"
         (prevClicked)="onPrevClicked()"
         (nextClicked)="onNextClicked()"
         (periodClicked)="onPeriodClicked()"
@@ -3702,6 +3921,44 @@ class CalendarComponent {
 
       <ng-content select="[twCalendarPresets]" />
 
+      <!--
+        View region — height-pinned so day → month → year switching never
+        resizes the panel vertically. The root is inline-block, so without this
+        the three views rendered 252 / 108 / 216 tall and the popup jumped on
+        every view switch.
+
+        min-h-63 = 252px = the day grid, the tallest view, which always renders
+        a fixed 6 weeks: one h-9 weekday header row + 6 h-9 week rows. It is a
+        min-*, never h-*, so a taller consumer cell template can still grow.
+        The number is derived from the cell geometry in calendar-cell.ts —
+        change a cell's h-* and this has to be recomputed, or the tallest view
+        starts overflowing it.
+
+        Stock spacing utility on purpose: a --width-calendar-* theme token was
+        tried and deleted, because tailwind-merge cannot collapse custom-token
+        classes and consumer overrides silently stop winning
+        (docs/vertical-rhythm.md section 1).
+
+        Width is NOT pinned either, and no longer needs to be. All three views
+        compute to the same 252px intrinsic width, so the panel holds one width
+        across view switches on its own: the day grid is grid-cols-7 gap-0 at
+        7 x 36, and the month and year grids are grid-cols-4 gap-1 at 4 x 60
+        plus 3 x 4. The cell widths that produce this live in the view variant
+        in calendar-cell.ts. They used to measure 252 / 268 / 236.
+
+        A min-w on this wrapper was the rejected alternative: it redistributes
+        the day grid's grid-cols-7 into fractional columns (268/7 = 38.28px)
+        while the day button stays 36px, which pushes the range wrapper's
+        rounded-l-full / rounded-r-full cap ~1px past the selected endpoint pill
+        at every range boundary. Equalizing through the month and year cell
+        widths instead leaves the day view untouched, so the pill and its
+        wrapper still coincide exactly.
+
+        Still unequal in 2-column mode: the day case renders two month grids
+        side by side, 2 x 252 plus a gap-3, while the month and year views
+        render a single grid. Cell widths cannot express that.
+      -->
+      <div class="min-h-63">
       @switch (viewState()) {
         @case ('day') {
           <div [class]="monthsClasses()">
@@ -3722,6 +3979,7 @@ class CalendarComponent {
               [gridIndex]="0"
               [multiSelectable]="multiSelectable()"
               [readonlyGrid]="effectiveReadonly()"
+              [disabledGrid]="effectiveDisabled()"
               (selectedChange)="onDateSelected($event)"
               (activeDateChange)="onActiveDateChange($event, 0)"
               (previewChange)="onPreviewChange($event)"
@@ -3744,6 +4002,7 @@ class CalendarComponent {
                 [gridIndex]="1"
                 [multiSelectable]="multiSelectable()"
                 [readonlyGrid]="effectiveReadonly()"
+                [disabledGrid]="effectiveDisabled()"
                 (selectedChange)="onDateSelected($event)"
                 (activeDateChange)="onActiveDateChange($event, 1)"
                 (previewChange)="onPreviewChange($event)"
@@ -3763,6 +4022,7 @@ class CalendarComponent {
             [previewEnd]="previewRange()?.end ?? null"
             [multiSelectable]="multiSelectable()"
             [readonlyGrid]="effectiveReadonly()"
+            [disabledGrid]="effectiveDisabled()"
             (selectedChange)="onMonthSelected($event)"
             (activeDateChange)="onActiveDateChange($event)"
             (previewChange)="onPreviewChange($event)"
@@ -3780,12 +4040,14 @@ class CalendarComponent {
             [previewEnd]="previewRange()?.end ?? null"
             [multiSelectable]="multiSelectable()"
             [readonlyGrid]="effectiveReadonly()"
+            [disabledGrid]="effectiveDisabled()"
             (selectedChange)="onYearSelected($event)"
             (activeDateChange)="onActiveDateChange($event)"
             (previewChange)="onPreviewChange($event)"
           />
         }
       }
+      </div>
     </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 });
 }
@@ -3816,7 +4078,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         class: 'block',
                         '[attr.aria-disabled]': 'effectiveDisabled() || null',
                         '[attr.aria-readonly]': 'effectiveReadonly() || null',
-                        '[attr.aria-describedby]': 'errorAriaDescribedBy() || null',
+                        '[attr.aria-describedby]': 'effectiveAriaDescribedby() || null',
                         '(focusout)': 'onBlur($event)',
                     },
                     template: `
@@ -3830,9 +4092,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         [periodAriaLabel]="periodAriaLabel()"
         [prevAriaLabel]="prevAriaLabel()"
         [nextAriaLabel]="nextAriaLabel()"
-        [prevDisabled]="prevDisabled()"
-        [nextDisabled]="nextDisabled()"
-        [canSwitchView]="viewState() !== 'year'"
+        [prevDisabled]="prevDisabled() || effectiveDisabled()"
+        [nextDisabled]="nextDisabled() || effectiveDisabled()"
+        [canSwitchView]="viewState() !== 'year' && !effectiveDisabled()"
         (prevClicked)="onPrevClicked()"
         (nextClicked)="onNextClicked()"
         (periodClicked)="onPeriodClicked()"
@@ -3840,6 +4102,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
       <ng-content select="[twCalendarPresets]" />
 
+      <!--
+        View region — height-pinned so day → month → year switching never
+        resizes the panel vertically. The root is inline-block, so without this
+        the three views rendered 252 / 108 / 216 tall and the popup jumped on
+        every view switch.
+
+        min-h-63 = 252px = the day grid, the tallest view, which always renders
+        a fixed 6 weeks: one h-9 weekday header row + 6 h-9 week rows. It is a
+        min-*, never h-*, so a taller consumer cell template can still grow.
+        The number is derived from the cell geometry in calendar-cell.ts —
+        change a cell's h-* and this has to be recomputed, or the tallest view
+        starts overflowing it.
+
+        Stock spacing utility on purpose: a --width-calendar-* theme token was
+        tried and deleted, because tailwind-merge cannot collapse custom-token
+        classes and consumer overrides silently stop winning
+        (docs/vertical-rhythm.md section 1).
+
+        Width is NOT pinned either, and no longer needs to be. All three views
+        compute to the same 252px intrinsic width, so the panel holds one width
+        across view switches on its own: the day grid is grid-cols-7 gap-0 at
+        7 x 36, and the month and year grids are grid-cols-4 gap-1 at 4 x 60
+        plus 3 x 4. The cell widths that produce this live in the view variant
+        in calendar-cell.ts. They used to measure 252 / 268 / 236.
+
+        A min-w on this wrapper was the rejected alternative: it redistributes
+        the day grid's grid-cols-7 into fractional columns (268/7 = 38.28px)
+        while the day button stays 36px, which pushes the range wrapper's
+        rounded-l-full / rounded-r-full cap ~1px past the selected endpoint pill
+        at every range boundary. Equalizing through the month and year cell
+        widths instead leaves the day view untouched, so the pill and its
+        wrapper still coincide exactly.
+
+        Still unequal in 2-column mode: the day case renders two month grids
+        side by side, 2 x 252 plus a gap-3, while the month and year views
+        render a single grid. Cell widths cannot express that.
+      -->
+      <div class="min-h-63">
       @switch (viewState()) {
         @case ('day') {
           <div [class]="monthsClasses()">
@@ -3860,6 +4160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
               [gridIndex]="0"
               [multiSelectable]="multiSelectable()"
               [readonlyGrid]="effectiveReadonly()"
+              [disabledGrid]="effectiveDisabled()"
               (selectedChange)="onDateSelected($event)"
               (activeDateChange)="onActiveDateChange($event, 0)"
               (previewChange)="onPreviewChange($event)"
@@ -3882,6 +4183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 [gridIndex]="1"
                 [multiSelectable]="multiSelectable()"
                 [readonlyGrid]="effectiveReadonly()"
+                [disabledGrid]="effectiveDisabled()"
                 (selectedChange)="onDateSelected($event)"
                 (activeDateChange)="onActiveDateChange($event, 1)"
                 (previewChange)="onPreviewChange($event)"
@@ -3901,6 +4203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             [previewEnd]="previewRange()?.end ?? null"
             [multiSelectable]="multiSelectable()"
             [readonlyGrid]="effectiveReadonly()"
+            [disabledGrid]="effectiveDisabled()"
             (selectedChange)="onMonthSelected($event)"
             (activeDateChange)="onActiveDateChange($event)"
             (previewChange)="onPreviewChange($event)"
@@ -3918,16 +4221,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             [previewEnd]="previewRange()?.end ?? null"
             [multiSelectable]="multiSelectable()"
             [readonlyGrid]="effectiveReadonly()"
+            [disabledGrid]="effectiveDisabled()"
             (selectedChange)="onYearSelected($event)"
             (activeDateChange)="onActiveDateChange($event)"
             (previewChange)="onPreviewChange($event)"
           />
         }
       }
+      </div>
     </div>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { monthViews: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MonthViewComponent), { isSignal: true }] }], modeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], 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"] }] } });
+        }], ctorParameters: () => [], propDecorators: { monthViews: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MonthViewComponent), { isSignal: true }] }], modeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], 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 }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", 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
@@ -3956,28 +4261,28 @@ 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. */
+    /** Mirrors the bound field's disabled flag; Signal Forms writes it, and the host calendar disables itself when it is `true`. Defaults to `false`. */
     disabled = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    /** Mirrors the bound field's readonly flag. */
+    /** Mirrors the bound field's readonly flag; the host calendar renders its grids read-only when it is `true`. Defaults to `false`. */
     readonly = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-    /** Mirrors the bound field's required flag. */
+    /** Mirrors the bound field's required flag. Defaults to `false`. */
     required = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-    /** Mirrors the bound field's invalid flag. */
+    /** Mirrors the bound field's invalid flag. Defaults to `false`. */
     invalid = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-    /** Mirrors the bound field's hidden flag. */
+    /** Mirrors the bound field's hidden flag. Defaults to `false`. */
     hidden = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
-    /** Mirrors the bound field's errors. */
+    /** Mirrors the bound field's errors. Defaults to `[]` (no errors). */
     errors = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
-    /** Mirrors the bound field's disablement reasons. */
+    /** Mirrors the bound field's disablement reasons. Defaults to `[]` (none). */
     disabledReasons = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
-    /** Two-way `touched` flag — drives and reflects the field's touched state. */
+    /** Two-way `touched` flag — drives and reflects the field's touched state, flipping to `true` when the calendar loses focus after an interaction. Defaults to `false`. */
     touched = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -4003,28 +4308,28 @@ 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. */
+    /** Mirrors the bound field's disabled flag; Signal Forms writes it, and the host calendar disables itself when it is `true`. Defaults to `false`. */
     disabled = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    /** Mirrors the bound field's readonly flag. */
+    /** Mirrors the bound field's readonly flag; the host calendar renders its grids read-only when it is `true`. Defaults to `false`. */
     readonly = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-    /** Mirrors the bound field's required flag. */
+    /** Mirrors the bound field's required flag. Defaults to `false`. */
     required = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-    /** Mirrors the bound field's invalid flag. */
+    /** Mirrors the bound field's invalid flag. Defaults to `false`. */
     invalid = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-    /** Mirrors the bound field's hidden flag. */
+    /** Mirrors the bound field's hidden flag. Defaults to `false`. */
     hidden = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
-    /** Mirrors the bound field's errors. */
+    /** Mirrors the bound field's errors. Defaults to `[]` (no errors). */
     errors = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
-    /** Mirrors the bound field's disablement reasons. */
+    /** Mirrors the bound field's disablement reasons. Defaults to `[]` (none). */
     disabledReasons = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
-    /** Two-way `touched` flag — drives and reflects the field's touched state. */
+    /** Two-way `touched` flag — drives and reflects the field's touched state, flipping to `true` when the calendar loses focus after an interaction. Defaults to `false`. */
     touched = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -4050,28 +4355,28 @@ 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. */
+    /** Mirrors the bound field's disabled flag; Signal Forms writes it, and the host calendar disables itself when it is `true`. Defaults to `false`. */
     disabled = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    /** Mirrors the bound field's readonly flag. */
+    /** Mirrors the bound field's readonly flag; the host calendar renders its grids read-only when it is `true`. Defaults to `false`. */
     readonly = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-    /** Mirrors the bound field's required flag. */
+    /** Mirrors the bound field's required flag. Defaults to `false`. */
     required = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-    /** Mirrors the bound field's invalid flag. */
+    /** Mirrors the bound field's invalid flag. Defaults to `false`. */
     invalid = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-    /** Mirrors the bound field's hidden flag. */
+    /** Mirrors the bound field's hidden flag. Defaults to `false`. */
     hidden = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
-    /** Mirrors the bound field's errors. */
+    /** Mirrors the bound field's errors. Defaults to `[]` (no errors). */
     errors = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
-    /** Mirrors the bound field's disablement reasons. */
+    /** Mirrors the bound field's disablement reasons. Defaults to `[]` (none). */
     disabledReasons = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
-    /** Two-way `touched` flag — drives and reflects the field's touched state. */
+    /** Two-way `touched` flag — drives and reflects the field's touched state, flipping to `true` when the calendar loses focus after an interaction. Defaults to `false`. */
     touched = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -4632,14 +4937,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 function provideNativeDateAdapter() {
     return makeEnvironmentProviders([
         NativeDateAdapter,
-        { provide: DATE_ADAPTER, useExisting: NativeDateAdapter },
+        { provide: TW_DATE_ADAPTER, useExisting: NativeDateAdapter },
     ]);
 }
 /** Provides a custom `DateAdapter` implementation. */
 function provideTwCalendar(config) {
     return makeEnvironmentProviders([
         config.adapter,
-        { provide: DATE_ADAPTER, useExisting: config.adapter },
+        { provide: TW_DATE_ADAPTER, useExisting: config.adapter },
         ...(config.extraProviders ?? []),
     ]);
 }
@@ -4678,5 +4983,5 @@ function toTwDateRange(value) {
  * 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 };
+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, TW_CALENDAR_SELECTION_STRATEGY, TW_DATE_ADAPTER, TW_DATE_FORMATS, TW_DATE_SERIALIZATION, TW_TZ_OVERRIDE, 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