@cdevhub/ngx-tw 0.2.1 → 0.3.0

package/fesm2022/cdevhub-ngx-tw-date-picker.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
 import { inject, ElementRef, viewChild, signal, computed, ChangeDetectionStrategy, Component, input, booleanAttribute, model, output, ViewContainerRef, Injector, DestroyRef, linkedSignal, effect, untracked, afterNextRender, isDevMode, forwardRef } from '@angular/core';
-import { NgControl, NgForm, FormGroupDirective, Validators } from '@angular/forms';
+import { NgForm, FormGroupDirective, Validators, NgControl, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Overlay } from '@angular/cdk/overlay';
 import { FocusMonitor, LiveAnnouncer } from '@angular/cdk/a11y';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { merge } from 'rxjs';
 import { tv } from 'tailwind-variants';
 import { PickerOverlayCoordinator, TW_ERROR_STATE_MATCHER, timeOfDaySeconds, resolveSelectScrollStrategy, buildSelectLikePositions } from '@cdevhub/ngx-tw/core';
-import { FormFieldControl, FormFieldComponent, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
-import { CalendarComponent, provideSingleSelectionStrategy, DATE_ADAPTER } from '@cdevhub/ngx-tw/calendar';
+import { FormFieldControl, TW_FORM_FIELD, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
+import { CalendarComponent, provideSingleSelectionStrategy, DATE_ADAPTER, calendarValidator } from '@cdevhub/ngx-tw/calendar';
 import { ButtonDirective } from '@cdevhub/ngx-tw/button';
 import { TimePickerComponent } from '@cdevhub/ngx-tw/time-picker';
 
@@ -20,89 +20,127 @@ import { TimePickerComponent } from '@cdevhub/ngx-tw/time-picker';
  */
 class DatePickerOverlayComponent {
     elementRef = inject((ElementRef));
-    calendarRef = viewChild('calendar', ...(ngDevMode ? [{ debugName: "calendarRef" }] : /* istanbul ignore next */ []));
+    calendarRef = viewChild('calendar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarRef" }] : /* istanbul ignore next */ []));
     // ── Config signals set by the parent component ──
     /** @internal */
-    size = signal('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    size = signal('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** @internal */
-    color = signal('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    color = signal('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     /** @internal */
-    minDate = signal(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    minDate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
     /** @internal */
-    maxDate = signal(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    maxDate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
     /** @internal */
-    dateFilter = signal(null, ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    dateFilter = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
     /** @internal */
-    startView = signal('day', ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
+    startView = signal('day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
     /** @internal */
-    startAt = signal(null, ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+    startAt = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
     /** @internal Current committed-or-pending value shown as selected in the calendar. */
-    pendingValue = signal(null, ...(ngDevMode ? [{ debugName: "pendingValue" }] : /* istanbul ignore next */ []));
+    pendingValue = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingValue" }] : /* istanbul ignore next */ []));
     /** @internal */
-    showActions = signal(false, ...(ngDevMode ? [{ debugName: "showActions" }] : /* istanbul ignore next */ []));
+    showActions = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showActions" }] : /* istanbul ignore next */ []));
     /** @internal */
-    todayLabel = signal('Today', ...(ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []));
+    todayLabel = signal('Today', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []));
     /** @internal */
-    clearLabel = signal('Clear', ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    clearLabel = signal('Clear', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
     /** @internal */
-    cancelLabel = signal('Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+    cancelLabel = signal('Cancel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
     /** @internal */
-    applyLabel = signal('Apply', ...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
+    applyLabel = signal('Apply', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
     /** @internal */
-    dialogId = signal('', ...(ngDevMode ? [{ debugName: "dialogId" }] : /* istanbul ignore next */ []));
+    dialogId = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialogId" }] : /* istanbul ignore next */ []));
     /** @internal */
-    dialogAriaLabel = signal('Choose a date', ...(ngDevMode ? [{ debugName: "dialogAriaLabel" }] : /* istanbul ignore next */ []));
+    dialogAriaLabel = signal('Choose a date', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialogAriaLabel" }] : /* istanbul ignore next */ []));
     /** @internal */
-    panelClassValue = signal('', ...(ngDevMode ? [{ debugName: "panelClassValue" }] : /* istanbul ignore next */ []));
+    panelClassValue = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClassValue" }] : /* istanbul ignore next */ []));
     /** @internal */
-    leaving = signal(false, ...(ngDevMode ? [{ debugName: "leaving" }] : /* istanbul ignore next */ []));
+    leaving = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leaving" }] : /* istanbul ignore next */ []));
     /** @internal Forwarded to the calendar — per-cell CSS classes. */
-    dateClass = signal(null, ...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
+    dateClass = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
     /** @internal Forwarded to the calendar — cell-content template. */
-    cellTemplate = signal(null, ...(ngDevMode ? [{ debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
+    cellTemplate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
     /** @internal Forwarded to the calendar — per-instance locale override. */
-    locale = signal(null, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    locale = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
     /** @internal Quick-select presets rendered above the calendar. */
-    presets = signal([], ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    presets = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
     // ── Time-picker config ──
     /** @internal */
-    withTime = signal(false, ...(ngDevMode ? [{ debugName: "withTime" }] : /* istanbul ignore next */ []));
+    withTime = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "withTime" }] : /* istanbul ignore next */ []));
     /** @internal */
-    timeFormat = signal('24h', ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
+    timeFormat = signal('24h', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
     /** @internal */
-    showSeconds = signal(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+    showSeconds = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
     /** @internal */
-    hourStep = signal(1, ...(ngDevMode ? [{ debugName: "hourStep" }] : /* istanbul ignore next */ []));
+    hourStep = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourStep" }] : /* istanbul ignore next */ []));
     /** @internal */
-    minuteStep = signal(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+    minuteStep = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
     /** @internal */
-    secondStep = signal(1, ...(ngDevMode ? [{ debugName: "secondStep" }] : /* istanbul ignore next */ []));
+    secondStep = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondStep" }] : /* istanbul ignore next */ []));
     /** @internal */
-    minTime = signal(null, ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
+    minTime = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
     /** @internal */
-    maxTime = signal(null, ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
+    maxTime = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
     // ── Callbacks set by the parent component ──
     /** @internal */
-    onCalendarSelect = signal(() => { }, ...(ngDevMode ? [{ debugName: "onCalendarSelect" }] : /* istanbul ignore next */ []));
+    onCalendarSelect = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onCalendarSelect" }] : /* istanbul ignore next */ []));
     /** @internal Fires whenever the embedded time-picker commits a new time. */
-    onTimeInput = signal(() => { }, ...(ngDevMode ? [{ debugName: "onTimeInput" }] : /* istanbul ignore next */ []));
+    onTimeInput = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onTimeInput" }] : /* istanbul ignore next */ []));
     /** @internal */
-    onToday = signal(() => { }, ...(ngDevMode ? [{ debugName: "onToday" }] : /* istanbul ignore next */ []));
+    onToday = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onToday" }] : /* istanbul ignore next */ []));
     /** @internal */
-    onClear = signal(() => { }, ...(ngDevMode ? [{ debugName: "onClear" }] : /* istanbul ignore next */ []));
+    onClear = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onClear" }] : /* istanbul ignore next */ []));
     /** @internal */
-    onCancel = signal(() => { }, ...(ngDevMode ? [{ debugName: "onCancel" }] : /* istanbul ignore next */ []));
+    onCancel = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onCancel" }] : /* istanbul ignore next */ []));
     /** @internal */
-    onApply = signal(() => { }, ...(ngDevMode ? [{ debugName: "onApply" }] : /* istanbul ignore next */ []));
+    onApply = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onApply" }] : /* istanbul ignore next */ []));
     /** @internal */
-    onPresetSelect = signal(() => { }, ...(ngDevMode ? [{ debugName: "onPresetSelect" }] : /* istanbul ignore next */ []));
+    onPresetSelect = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onPresetSelect" }] : /* istanbul ignore next */ []));
     // ── Classes ──
     /** @internal */
     panelClasses = computed(() => {
         const base = 'block bg-surface-overlay border border-border rounded-lg shadow-md overflow-hidden flex flex-col';
         const custom = this.panelClassValue();
         return custom ? `${base} ${custom}` : base;
-    }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
     // ── Template callbacks ──
     /** @internal */
     onCalendarDateSelected(value) {
@@ -151,7 +189,8 @@ class DatePickerOverlayComponent {
         return !!preset.id && this.activePresetId() === preset.id;
     }
     /** @internal Tracks the most recently picked preset for visual state. Set by the parent. */
-    activePresetId = signal(undefined, ...(ngDevMode ? [{ debugName: "activePresetId" }] : /* istanbul ignore next */ []));
+    activePresetId = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePresetId" }] : /* istanbul ignore next */ []));
     /** @internal Moves focus to the active calendar cell. Called by the parent after open. */
     focusCalendar() {
         this.calendarRef()?.focusActiveCell();
@@ -160,8 +199,8 @@ class DatePickerOverlayComponent {
     getElement() {
         return this.elementRef.nativeElement;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DatePickerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DatePickerOverlayComponent, isStandalone: true, selector: "tw-date-picker-overlay", host: { properties: { "class": "panelClasses()", "id": "dialogId()", "attr.role": "\"dialog\"", "attr.aria-modal": "\"true\"", "attr.aria-label": "dialogAriaLabel()", "animate.enter": "\"scale-in\"", "animate.leave": "leaving() ? \"scale-out\" : \"\"" } }, providers: [provideSingleSelectionStrategy()], viewQueries: [{ propertyName: "calendarRef", first: true, predicate: ["calendar"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DatePickerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DatePickerOverlayComponent, isStandalone: true, selector: "tw-date-picker-overlay", host: { properties: { "class": "panelClasses()", "id": "dialogId()", "attr.role": "\"dialog\"", "attr.aria-modal": "\"true\"", "attr.aria-label": "dialogAriaLabel()", "animate.enter": "\"scale-in\"", "animate.leave": "leaving() ? \"scale-out\" : \"\"" } }, providers: [provideSingleSelectionStrategy()], viewQueries: [{ propertyName: "calendarRef", first: true, predicate: ["calendar"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (presets().length) {
       <div
         class="flex flex-col gap-1 p-2 border-b border-border bg-surface-muted"
@@ -246,9 +285,9 @@ class DatePickerOverlayComponent {
         </div>
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: CalendarComponent, selector: "tw-calendar", inputs: ["mode", "value", "startAt", "minDate", "maxDate", "dateFilter", "disabledDates", "disabledDaysOfWeek", "constraints", "minRangeLength", "maxRangeLength", "maxSelections", "maxSelectionBehavior", "errorAriaDescribedBy", "rangeClickBehavior", "rangeBehavior", "dateClass", "bordered", "startView", "firstDayOfWeek", "monthColumns", "disabled", "readonly", "resetBehavior", "cellTemplate", "locale", "intl"], outputs: ["modeChange", "valueChange", "selectionStart", "rangePreview", "selectionComplete", "selectionRestart", "selectionCleared", "selectionLimitReached", "presetChange", "viewChange", "activeDateChange", "monthChange", "yearChange", "cellClick", "cellHover"] }, { kind: "component", type: TimePickerComponent, selector: "tw-time-picker", inputs: ["id", "disabled", "required", "readonly", "size", "color", "variant", "format", "showSeconds", "hourStep", "minuteStep", "secondStep", "minTime", "maxTime", "referenceDate", "placeholder", "showSteppers", "showClear", "clearLabel", "errorStateMatcher", "aria-label", "aria-labelledby", "aria-describedby", "value"], outputs: ["valueChange", "timeInput", "timeChange"] }, { kind: "directive", type: ButtonDirective, selector: "[twButton]", inputs: ["variant", "color", "size", "disabled", "loading"], exportAs: ["twButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: CalendarComponent, selector: "tw-calendar", inputs: ["mode", "value", "startAt", "minDate", "maxDate", "dateFilter", "disabledDates", "disabledDaysOfWeek", "constraints", "minRangeLength", "maxRangeLength", "maxSelections", "maxSelectionBehavior", "errorAriaDescribedBy", "rangeClickBehavior", "rangeBehavior", "dateClass", "bordered", "startView", "firstDayOfWeek", "monthColumns", "disabled", "readonly", "resetBehavior", "cellTemplate", "locale", "intl"], outputs: ["valueChange", "selectionStart", "rangePreview", "selectionComplete", "selectionRestart", "selectionCleared", "selectionLimitReached", "presetChange", "viewChange", "activeDateChange", "monthChange", "yearChange", "cellClick", "cellHover", "modeChange"] }, { kind: "component", type: TimePickerComponent, selector: "tw-time-picker", inputs: ["id", "disabled", "required", "readonly", "size", "color", "variant", "format", "showSeconds", "hourStep", "minuteStep", "secondStep", "minTime", "maxTime", "referenceDate", "placeholder", "showSteppers", "showClear", "clearLabel", "errorStateMatcher", "aria-label", "aria-labelledby", "aria-describedby", "value"], outputs: ["valueChange", "timeInput", "timeChange"] }, { kind: "directive", type: ButtonDirective, selector: "[twButton]", inputs: ["variant", "color", "size", "disabled", "loading"], exportAs: ["twButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DatePickerOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DatePickerOverlayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-date-picker-overlay',
@@ -466,22 +505,30 @@ class DatePickerComponent extends FormFieldControl {
     // ── Inputs ──
     /** Id on the date-picker's input element. Auto-generated when not provided. Used by the form-field's `<label for>` attribute. */
     idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
-    /** Minimum selectable date. Typed input earlier than this sets `errorState` and the calendar disables the cell. Defaults to `null`. */
-    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
-    /** Maximum selectable date. Typed input later than this sets `errorState` and the calendar disables the cell. Defaults to `null`. */
-    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
-    /** Per-date predicate — return `false` to disable. Applied in both the calendar and the text-parse path. */
-    dateFilter = input(null, ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    /** Minimum selectable date. Typed input earlier than this commits the value and marks the bound control invalid with `calendarMinDate`; the calendar disables the cell. Defaults to `null`. */
+    minDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    /** Maximum selectable date. Typed input later than this commits the value and marks the bound control invalid with `calendarMaxDate`; the calendar disables the cell. Defaults to `null`. */
+    maxDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /** Per-date predicate — return `false` to disable. Applied in the calendar, the text-parse path, and the `calendarDisabledDate` validation error. */
+    dateFilter = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
     /** Which calendar view opens first — `'day'`, `'month'`, or `'year'`. Defaults to `'day'`. */
-    startView = input('day', ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
+    startView = input('day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
     /** Date to focus when the calendar opens with no selection. Falls back to today. */
-    startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+    startAt = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
     /** Display format passed to `DateAdapter.format()`. With the default adapter, accepts `{ dateTimeFormat: Intl.DateTimeFormatOptions }`. When `withTime` is true and this is left at the default, hour/minute (and optional seconds) are folded in automatically. */
-    format = input(DEFAULT_DISPLAY_FORMAT, ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    format = input(DEFAULT_DISPLAY_FORMAT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
     /** Optional format hint passed to `DateAdapter.parse()`. Ignored by the native adapter. */
-    parseFormat = input(undefined, ...(ngDevMode ? [{ debugName: "parseFormat" }] : /* istanbul ignore next */ []));
+    parseFormat = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parseFormat" }] : /* istanbul ignore next */ []));
     /** Placeholder text shown in the input when no value is entered. */
-    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    placeholder = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /** When true, the input is disabled, the trigger cannot open the calendar, and `aria-disabled="true"` is set. Defaults to `false`. */
     disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
         transform: booleanAttribute });
@@ -492,50 +539,70 @@ class DatePickerComponent extends FormFieldControl {
     readonlyInput = input(false, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), alias: 'readonly',
         transform: booleanAttribute });
     /** Trigger padding, font size, and calendar cell density. Defaults to `'md'`. */
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Semantic color for focused border, calendar selection ring, and today marker. Defaults to `'primary'`. */
-    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    color = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     /** Visual style of the trigger. `'default'` draws its own border; `'naked'` strips chrome. Auto-resolves to `'naked'` when inside `<tw-form-field>`. */
-    variant = input(undefined, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     /** Whether to show a clear-button affordance inside the trigger when a value is set. Defaults to `true`. */
     // TRUE-default: a picker without a clear affordance forces consumers to wire one — most form pickers expect the inline clear, matching `<tw-input>`'s clear button.
-    showClear = input(true, ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    showClear = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
     /** When true, renders a `Today / Clear / Cancel / Apply` action bar at the bottom of the overlay. Defaults to `false`. */
-    showActions = input(false, ...(ngDevMode ? [{ debugName: "showActions" }] : /* istanbul ignore next */ []));
+    showActions = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showActions" }] : /* istanbul ignore next */ []));
     /** Label for the `Today` action in the overlay's action bar. */
-    todayLabel = input('Today', ...(ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []));
+    todayLabel = input('Today', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []));
     /** Label for the `Clear` action in the overlay's action bar. */
-    clearLabel = input('Clear', ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    clearLabel = input('Clear', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
     /** Label for the `Cancel` action in the overlay's action bar. */
-    cancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+    cancelLabel = input('Cancel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
     /** Label for the `Apply` action in the overlay's action bar. */
-    applyLabel = input('Apply', ...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
+    applyLabel = input('Apply', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
     /** When true, focusing the text input opens the overlay. Defaults to `false`. */
-    openOnFocus = input(false, ...(ngDevMode ? [{ debugName: "openOnFocus" }] : /* istanbul ignore next */ []));
+    openOnFocus = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openOnFocus" }] : /* istanbul ignore next */ []));
     /** Extra class(es) applied to the overlay panel element. */
-    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    panelClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     /** CDK scroll strategy for the overlay. Defaults to `'reposition'`. */
-    scrollStrategy = input('reposition', ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
+    scrollStrategy = input('reposition', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
     /** Pixel distance between trigger and overlay. Defaults to `4`. */
-    offset = input(4, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    offset = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
     /** Accessible name for the calendar trigger button. Defaults to `'Open calendar'`. */
-    triggerAriaLabel = input('Open calendar', ...(ngDevMode ? [{ debugName: "triggerAriaLabel" }] : /* istanbul ignore next */ []));
+    triggerAriaLabel = input('Open calendar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerAriaLabel" }] : /* istanbul ignore next */ []));
     /**
      * Bundles the time-of-day configuration. Passing a non-null object turns on the embedded `<tw-time-picker>` and forwards each field.
      *
      * Defaults to `null` (no time field). Pass an empty object `{}` to enable the time picker with all defaults.
      */
-    timeConfig = input(null, ...(ngDevMode ? [{ debugName: "timeConfig" }] : /* istanbul ignore next */ []));
+    timeConfig = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeConfig" }] : /* istanbul ignore next */ []));
     /** Per-instance locale override. Forwarded to the embedded calendar and the underlying `DateAdapter` for parse/format. Falls back to Angular `LOCALE_ID` when `null`. */
-    locale = input(null, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    locale = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
     /** Function producing per-cell CSS classes, forwarded to the embedded calendar. Useful for visually marking special dates (holidays, billing cycles). */
-    dateClass = input(null, ...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
+    dateClass = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
     /** Optional cell-content template, forwarded to the embedded calendar. Use to customize cell visuals beyond `dateClass`. */
-    cellTemplate = input(null, ...(ngDevMode ? [{ debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
+    cellTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
     /** Optional quick-select presets rendered as a vertical list before the calendar. Each preset provides a `label` and a `date` factory. An empty array hides the preset panel. */
-    presets = input([], ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    presets = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
     /** Per-instance override of the `ErrorStateMatcher`. */
-    errorStateMatcher = input(undefined, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+    errorStateMatcher = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
     /** Accessible name for the input. Required when no visible label is supplied. Alias: `aria-label`. */
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     /** ID of an external element that labels the input. Alias: `aria-labelledby`. */
@@ -544,9 +611,11 @@ class DatePickerComponent extends FormFieldControl {
     userAriaDescribedByInput = input(undefined, { ...(ngDevMode ? { debugName: "userAriaDescribedByInput" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
     // ── Models (two-way) ──
     /** Two-way bound selected date. `null` when no selection. Setting programmatically updates the display; does NOT trigger `onChange`. */
-    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /** Two-way bound open state of the calendar overlay. */
-    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     // ── Outputs ──
     /** Fires after the overlay's enter animation completes. Payload is the trigger element. */
     opened = output();
@@ -568,16 +637,24 @@ class DatePickerComponent extends FormFieldControl {
     viewContainerRef = inject(ViewContainerRef);
     injector = inject(Injector);
     destroyRef = inject(DestroyRef);
-    formField = inject(FormFieldComponent, { optional: true });
-    ngControl = inject(NgControl, { optional: true, self: true });
+    formField = inject(TW_FORM_FIELD, { optional: true });
+    // Resolved lazily in `ngOnInit`, not via eager `inject(NgControl, { self })`:
+    // this component provides NG_VALIDATORS with `useExisting`, so NgModel /
+    // FormControlName pulling the validator set during construction would resolve
+    // back into this instance while it is still being created. Mirrors
+    // `date-range-picker.ts` and `calendar.ts`.
+    ngControl = null;
     parentForm = inject(NgForm, { optional: true });
     parentFormGroup = inject(FormGroupDirective, { optional: true });
     defaultMatcher = inject(TW_ERROR_STATE_MATCHER);
     // ── View refs ──
-    inputRef = viewChild.required('dateInput');
-    triggerRef = viewChild('triggerBtn', ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    inputRef = viewChild.required('dateInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    triggerRef = viewChild('triggerBtn', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
     /** @internal Whether a `[slot=trigger]` is projected. Detected post-mount via DOM query so we can drop the default chrome. */
-    hasCustomTrigger = signal(false, ...(ngDevMode ? [{ debugName: "hasCustomTrigger" }] : /* istanbul ignore next */ []));
+    hasCustomTrigger = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasCustomTrigger" }] : /* istanbul ignore next */ []));
     // ── Identity ──
     uid = nextDatePickerId++;
     /** @internal */
@@ -586,26 +663,65 @@ class DatePickerComponent extends FormFieldControl {
     dialogId = `${this.hostId}-dialog`;
     // ── Internal state ──
     /** @internal Decouples programmatic writes from user commits so `writeValue` doesn't re-trigger parent effects. */
-    internalValue = linkedSignal(() => this.value(), ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    internalValue = linkedSignal(() => this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
     /** @internal */
-    rawInputText = signal('', ...(ngDevMode ? [{ debugName: "rawInputText" }] : /* istanbul ignore next */ []));
-    /** @internal */
-    parseError = signal(false, ...(ngDevMode ? [{ debugName: "parseError" }] : /* istanbul ignore next */ []));
-    /** @internal */
-    rangeError = signal(false, ...(ngDevMode ? [{ debugName: "rangeError" }] : /* istanbul ignore next */ []));
-    /** @internal */
-    focusedSignal = signal(false, ...(ngDevMode ? [{ debugName: "focusedSignal" }] : /* istanbul ignore next */ []));
-    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
-    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
-    closingSignal = signal(false, ...(ngDevMode ? [{ debugName: "closingSignal" }] : /* istanbul ignore next */ []));
-    lastValueBeforeOpen = signal(null, ...(ngDevMode ? [{ debugName: "lastValueBeforeOpen" }] : /* istanbul ignore next */ []));
-    pendingCalendarValue = signal(null, ...(ngDevMode ? [{ debugName: "pendingCalendarValue" }] : /* istanbul ignore next */ []));
-    activePresetIdSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "activePresetIdSignal" }] : /* istanbul ignore next */ []));
-    _ngControlRev = signal(0, ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
-    _formSubmitRev = signal(0, ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
+    rawInputText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rawInputText" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal The text the user typed that could not be parsed into a date,
+     * or `null` when the current entry parsed cleanly.
+     *
+     * This is the single source of truth for "the typed text is bad". It drives
+     * both the visual error state (via `parseError` below) and the form error
+     * (via `validate()`, which feeds it to `calendarValidator` as
+     * `lastInvalidFormValue`). Keeping one field instead of a boolean flag plus a
+     * separate string is what stops the two from disagreeing.
+     */
+    unparseableText = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unparseableText" }] : /* istanbul ignore next */ []));
+    /** @internal Whether the current input text failed to parse. */
+    parseError = computed(() => this.unparseableText() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parseError" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Whether the committed value violates `minDate` / `maxDate` /
+     * `dateFilter`.
+     *
+     * Derived, not a flag. An out-of-range entry is committed to the form (so the
+     * control holds what the user typed and is *invalid*, rather than silently
+     * keeping an older value), which means the value-sync effect below runs and
+     * would immediately clear any manually-set flag. Deriving it also keeps the
+     * error correct when the consumer moves a constraint after the fact, which a
+     * flag set once at commit time cannot do.
+     */
+    rangeError = computed(() => {
+        const v = this.internalValue();
+        return v !== null && !this.isInRange(v);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeError" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    focusedSignal = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedSignal" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    describedByIdsSignal = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    closingSignal = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closingSignal" }] : /* istanbul ignore next */ []));
+    lastValueBeforeOpen = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastValueBeforeOpen" }] : /* istanbul ignore next */ []));
+    pendingCalendarValue = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingCalendarValue" }] : /* istanbul ignore next */ []));
+    activePresetIdSignal = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePresetIdSignal" }] : /* istanbul ignore next */ []));
+    _ngControlRev = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
+    _formSubmitRev = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
-    overlayInstanceSignal = signal(null, ...(ngDevMode ? [{ debugName: "overlayInstanceSignal" }] : /* istanbul ignore next */ []));
+    overlayInstanceSignal = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayInstanceSignal" }] : /* istanbul ignore next */ []));
     returnFocusTo = null;
     get overlayInstance() {
         return this.overlayInstanceSignal();
@@ -615,13 +731,17 @@ class DatePickerComponent extends FormFieldControl {
     isDisabled = computed(() => {
         this._ngControlRev();
         return this.disabledInput() || this.cvaDisabled() || !!this.ngControl?.disabled;
-    }, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     /** @internal Effective variant — auto-naked when wrapped in tw-form-field. */
-    resolvedVariant = computed(() => this.variant() ?? (this.formField ? 'naked' : 'default'), ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => this.variant() ?? (this.formField ? 'naked' : 'default'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
     /** @internal */
-    isEmpty = computed(() => this.internalValue() === null && !this.rawInputText(), ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    isEmpty = computed(() => this.internalValue() === null && !this.rawInputText(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
     /** Whether the time picker is rendered inside the overlay. True iff `timeConfig` is non-null. */
-    withTime = computed(() => this.timeConfig() !== null, ...(ngDevMode ? [{ debugName: "withTime" }] : /* istanbul ignore next */ []));
+    withTime = computed(() => this.timeConfig() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "withTime" }] : /* istanbul ignore next */ []));
     /** @internal Effective time-of-day configuration — merges `timeConfig` over the documented per-field defaults. */
     effectiveTimeConfig = computed(() => {
         const cfg = this.timeConfig();
@@ -634,7 +754,8 @@ class DatePickerComponent extends FormFieldControl {
             minTime: cfg?.minTime ?? null,
             maxTime: cfg?.maxTime ?? null,
         };
-    }, ...(ngDevMode ? [{ debugName: "effectiveTimeConfig" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveTimeConfig" }] : /* istanbul ignore next */ []));
     /** @internal Effective display format — folds hour/minute (and optional seconds) into the default when `withTime` is on and the user hasn't overridden `format`. */
     effectiveFormat = computed(() => {
         const fmt = this.format();
@@ -653,7 +774,8 @@ class DatePickerComponent extends FormFieldControl {
         if (time.showSeconds)
             base.second = '2-digit';
         return { dateTimeFormat: base };
-    }, ...(ngDevMode ? [{ debugName: "effectiveFormat" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveFormat" }] : /* istanbul ignore next */ []));
     /** @internal */
     describedBy = computed(() => {
         const extra = this.describedByIdsSignal();
@@ -666,7 +788,8 @@ class DatePickerComponent extends FormFieldControl {
             }
         }
         return merged.length ? merged.join(' ') : '';
-    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
     // ── tv() output ──
     variantResult = computed(() => datePickerVariants({
         size: this.size(),
@@ -676,20 +799,27 @@ class DatePickerComponent extends FormFieldControl {
         errorState: this.errorState(),
         focused: this.focusedSignal(),
         color: this.color(),
-    }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
     /** @internal */
-    rootClasses = computed(() => this.variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => this.variantResult().root(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    inputClasses = computed(() => this.variantResult().input(), ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
+    inputClasses = computed(() => this.variantResult().input(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    triggerButtonClasses = computed(() => this.variantResult().triggerButton(), ...(ngDevMode ? [{ debugName: "triggerButtonClasses" }] : /* istanbul ignore next */ []));
+    triggerButtonClasses = computed(() => this.variantResult().triggerButton(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerButtonClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    triggerIconClasses = computed(() => this.variantResult().triggerIcon(), ...(ngDevMode ? [{ debugName: "triggerIconClasses" }] : /* istanbul ignore next */ []));
+    triggerIconClasses = computed(() => this.variantResult().triggerIcon(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerIconClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    clearButtonClasses = computed(() => this.variantResult().clearButton(), ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : /* istanbul ignore next */ []));
+    clearButtonClasses = computed(() => this.variantResult().clearButton(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : /* istanbul ignore next */ []));
     // ── FormFieldControl impl ──
     /** @internal */
-    id = computed(() => this.idInput() ?? this.hostId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    id = computed(() => this.idInput() ?? this.hostId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     /** @internal */
     focused = this.focusedSignal.asReadonly();
     /** @internal */
@@ -702,7 +832,8 @@ class DatePickerComponent extends FormFieldControl {
         if (this.requiredInput())
             return true;
         return !!this.ngControl?.control?.hasValidator(Validators.required);
-    }, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     /** @internal */
     errorState = computed(() => {
         this._ngControlRev();
@@ -714,29 +845,45 @@ class DatePickerComponent extends FormFieldControl {
         const form = this.parentFormGroup ??
             this.parentForm;
         return matcher.isErrorState(this.ngControl?.control ?? null, form);
-    }, ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
     /** @internal */
     controlType = 'date-picker';
     /** @internal */
-    userAriaDescribedBy = computed(() => this.userAriaDescribedByInput(), ...(ngDevMode ? [{ debugName: "userAriaDescribedBy" }] : /* istanbul ignore next */ []));
+    userAriaDescribedBy = computed(() => this.userAriaDescribedByInput(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userAriaDescribedBy" }] : /* istanbul ignore next */ []));
     // ── Constructor ──
     constructor() {
         super();
-        // Wire this component as the NgControl's value accessor without registering
-        // NG_VALUE_ACCESSOR in providers, which would create a circular DI with the
-        // `inject(NgControl, { self: true })` above.
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
+        // Re-run validation whenever a constraint input changes, so a consumer
+        // moving `minDate` after a value was committed updates `control.errors`
+        // instead of leaving a stale verdict. `validatorOnChange` is a plain
+        // callback into Angular's validator plumbing, not a signal write, so the
+        // effect cannot cycle; `untracked` keeps it that way regardless.
+        // Mirrors `date-range-picker.ts` and `calendar.ts`.
+        effect(() => {
+            this.minDate();
+            this.maxDate();
+            this.dateFilter();
+            untracked(() => this.validatorOnChange());
+        });
         // Sync rawInputText whenever the underlying value changes (programmatic or user).
         effect(() => {
             const v = this.internalValue();
             const fmt = this.effectiveFormat();
             untracked(() => {
+                // An unparseable entry commits `null` precisely *because* it failed to
+                // parse, and this effect runs asynchronously afterwards. Syncing here
+                // would undo both halves of that: it would clear the error state a
+                // moment after it was set, and — because the input is bound to
+                // `rawInputText` — blank the very text the user needs to correct,
+                // leaving an error border over an empty box. Bail out and let the
+                // parse-failure path own the display.
+                if (v === null && this.unparseableText() !== null)
+                    return;
                 const display = v === null ? '' : this.adapter.format(v, fmt);
                 this.rawInputText.set(display);
-                this.parseError.set(false);
-                this.rangeError.set(false);
+                this.unparseableText.set(null);
             });
         });
         // Mirror the `open` model into the overlay lifecycle.
@@ -836,7 +983,7 @@ class DatePickerComponent extends FormFieldControl {
                 return;
             const hasLabel = !!this.ariaLabel() ||
                 !!this.ariaLabelledby() ||
-                !!this.formField?.labelChild();
+                !!this.formField?.hasLabel();
             if (!hasLabel) {
                 console.warn('[tw-date-picker] The date-picker has no accessible name. Set aria-label, aria-labelledby, or wrap the component in a <tw-form-field> with a <label twLabel>.');
             }
@@ -861,6 +1008,14 @@ class DatePickerComponent extends FormFieldControl {
         });
     }
     ngOnInit() {
+        // Resolve the bound NgControl now that the host's FormControlName / NgModel
+        // is fully constructed (see the field declaration for why this is deferred).
+        // The value accessor itself is registered statically via NG_VALUE_ACCESSOR,
+        // which is what keeps `validate()` on the classic CVA path under v22.
+        this.ngControl = this.injector.get(NgControl, null, { self: true, optional: true });
+        // Anything read off `ngControl` before this point saw `null`; bump the
+        // revision so `isDisabled`, `required` and `errorState` recompute.
+        this._ngControlRev.update((n) => n + 1);
         const ctrl = this.ngControl?.control;
         if (ctrl) {
             const streams = [ctrl.statusChanges, ctrl.valueChanges].filter((s) => !!s);
@@ -907,8 +1062,7 @@ class DatePickerComponent extends FormFieldControl {
         const target = event.target;
         const rawText = target.value;
         this.rawInputText.set(rawText);
-        this.parseError.set(false);
-        this.rangeError.set(false);
+        this.unparseableText.set(null);
         // Non-committing parse so the payload's `parsed` field reflects success when achievable.
         let parsed = null;
         if (rawText.trim()) {
@@ -1036,34 +1190,63 @@ class DatePickerComponent extends FormFieldControl {
     commitFromInput() {
         const raw = this.rawInputText().trim();
         if (!raw) {
+            this.unparseableText.set(null);
             if (this.internalValue() !== null || this.parseError() || this.rangeError()) {
                 this.commit(null, 'input');
             }
             else {
-                this.parseError.set(false);
-                this.rangeError.set(false);
+                this.unparseableText.set(null);
             }
+            this.validatorOnChange();
             return;
         }
         const parsed = this.adapter.parse(raw, this.parseFormat());
         if (!parsed || !this.adapter.isValid(parsed)) {
-            this.parseError.set(true);
-            this.rangeError.set(false);
+            // Unparseable. Both halves matter: the previously committed date must not
+            // survive in the form behind an error border (that stale value would be
+            // submitted), and the parse failure must be carried into `validate()`
+            // because the `null` we commit is otherwise indistinguishable from an
+            // empty optional field.
+            // Deliberately not routed through `commit()`: that formats the committed
+            // value into the input, which would erase the text the user just typed.
+            // Clear the *form* value so a stale date cannot be submitted behind an
+            // error border, while leaving the raw text on screen to be corrected.
+            //
+            // Keeping that text visible also depends on the bail-out in the
+            // value-sync effect above — without it, this `internalValue.set(null)`
+            // asynchronously blanks the input. Both halves are pinned by the
+            // "keeps unparseable text visible" specs; changing one without the other
+            // reintroduces an error border over an empty box.
+            const previous = this.internalValue();
+            this.internalValue.set(null);
+            this.value.set(null);
+            this.unparseableText.set(raw);
+            this.onChange(null);
+            this.onTouched();
+            this.validatorOnChange();
+            this.dateChange.emit({ value: null, previousValue: previous, source: 'input' });
             return;
         }
         if (!this.isInRange(parsed)) {
-            this.parseError.set(false);
-            this.rangeError.set(true);
+            // Out of range still commits: the form should hold what the user actually
+            // entered and be *invalid*, not silently keep an older value. The range
+            // codes come from `validate()` reading `control.value`, so no extra state
+            // needs carrying here.
+            this.unparseableText.set(null);
+            this.commit(parsed, 'input');
+            this.unparseableText.set(null);
+            this.validatorOnChange();
             return;
         }
+        this.unparseableText.set(null);
         this.commit(parsed, 'input');
+        this.validatorOnChange();
     }
     commit(next, source) {
         const previous = this.internalValue();
         this.internalValue.set(next);
         this.value.set(next);
-        this.parseError.set(false);
-        this.rangeError.set(false);
+        this.unparseableText.set(null);
         const display = next === null ? '' : this.adapter.format(next, this.effectiveFormat());
         this.rawInputText.set(display);
         const el = this.inputRef().nativeElement;
@@ -1173,8 +1356,7 @@ class DatePickerComponent extends FormFieldControl {
                 this.value.set(previous);
                 const display = previous === null ? '' : this.adapter.format(previous, this.effectiveFormat());
                 this.rawInputText.set(display);
-                this.parseError.set(false);
-                this.rangeError.set(false);
+                this.unparseableText.set(null);
             }
         }
         // Fallback chain ensures focus always returns to a visible element even when
@@ -1282,8 +1464,7 @@ class DatePickerComponent extends FormFieldControl {
         if (value === null || value === undefined || value === '') {
             this.internalValue.set(null);
             this.value.set(null);
-            this.parseError.set(false);
-            this.rangeError.set(false);
+            this.unparseableText.set(null);
             this.rawInputText.set('');
             this.dateChange.emit({
                 value: null,
@@ -1297,20 +1478,18 @@ class DatePickerComponent extends FormFieldControl {
             this.internalValue.set(null);
             this.value.set(null);
             this.rawInputText.set('');
-            this.parseError.set(false);
-            this.rangeError.set(false);
+            this.unparseableText.set(null);
             return;
         }
         if (!this.adapter.isValid(coerced)) {
-            this.parseError.set(true);
+            this.unparseableText.set(String(value));
             this.rawInputText.set(String(value));
             return;
         }
         const previous = this.internalValue();
         this.internalValue.set(coerced);
         this.value.set(coerced);
-        this.parseError.set(false);
-        this.rangeError.set(false);
+        this.unparseableText.set(null);
         this.rawInputText.set(this.adapter.format(coerced, this.effectiveFormat()));
         this.dateChange.emit({ value: coerced, previousValue: previous, source: 'programmatic' });
     }
@@ -1323,6 +1502,33 @@ class DatePickerComponent extends FormFieldControl {
     setDisabledState(isDisabled) {
         this.cvaDisabled.set(isDisabled);
     }
+    // ── Validator ──
+    validatorOnChange = () => { };
+    /** @internal */
+    validate(control) {
+        // Delegate to the shared calendar validator so a `tw-date-picker` reports
+        // the same CalendarErrorCode set as `tw-calendar` and `tw-date-range-picker`
+        // for the same constraint violation.
+        const validator = calendarValidator({
+            mode: 'single',
+            // Carried explicitly rather than inferred from `control.value`: an
+            // unparseable entry commits `null`, and `null` is perfectly valid for a
+            // non-required control, so reading the value alone would report the field
+            // valid while the UI shows an error — the exact bug this fixes.
+            lastInvalidFormValue: this.unparseableText(),
+            constraints: {
+                minDate: this.minDate(),
+                maxDate: this.maxDate(),
+                dateFilter: this.dateFilter(),
+            },
+            adapter: this.adapter,
+        });
+        return validator(control);
+    }
+    /** @internal */
+    registerOnValidatorChange(fn) {
+        this.validatorOnChange = fn;
+    }
     // ── FormFieldControl methods ──
     /** @internal */
     setDescribedByIds(ids) {
@@ -1342,12 +1548,31 @@ class DatePickerComponent extends FormFieldControl {
             inputEl.focus();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DatePickerComponent, isStandalone: true, selector: "tw-date-picker", inputs: { idInput: { classPropertyName: "idInput", publicName: "id", 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 }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, parseFormat: { classPropertyName: "parseFormat", publicName: "parseFormat", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, triggerAriaLabel: { classPropertyName: "triggerAriaLabel", publicName: "triggerAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, timeConfig: { classPropertyName: "timeConfig", publicName: "timeConfig", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, userAriaDescribedByInput: { classPropertyName: "userAriaDescribedByInput", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", open: "openChange", opened: "opened", closed: "closed", dateInput: "dateInput", dateChange: "dateChange", presetSelected: "presetSelected" }, host: { properties: { "class": "rootClasses()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DatePickerComponent, isStandalone: true, selector: "tw-date-picker", inputs: { idInput: { classPropertyName: "idInput", publicName: "id", 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 }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, parseFormat: { classPropertyName: "parseFormat", publicName: "parseFormat", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, triggerAriaLabel: { classPropertyName: "triggerAriaLabel", publicName: "triggerAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, timeConfig: { classPropertyName: "timeConfig", publicName: "timeConfig", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, userAriaDescribedByInput: { classPropertyName: "userAriaDescribedByInput", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", open: "openChange", opened: "opened", closed: "closed", dateInput: "dateInput", dateChange: "dateChange", presetSelected: "presetSelected" }, host: { properties: { "class": "rootClasses()" } }, providers: [
             {
                 provide: TW_FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => DatePickerComponent),
             },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => DatePickerComponent),
+                multi: true,
+            },
+            // Angular v22 compiles any component exposing a `value` model() as a
+            // signal-forms custom control, and `FormControlDirective` takes the classic
+            // CVA path — the one that runs `setUpValidators` and composes the
+            // NG_VALIDATORS above onto the control — only if a value accessor is
+            // already visible at directive-creation time. Assigning
+            // `ngControl.valueAccessor` later is too late, so without this static
+            // provider `validate()` is never called and every error code below
+            // disappears silently. See the CVA section of CLAUDE.md; `calendar.ts` and
+            // `date-range-picker.ts` carry the same pair for the same reason.
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DatePickerComponent),
+                multi: true,
+            },
             PickerOverlayCoordinator,
         ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <!-- Optional rich-label trigger. When projected (a child carries [slot=trigger]), the default input/clear/trigger chrome is hidden. Clicks anywhere in the projected content open the overlay. -->
@@ -1442,7 +1667,7 @@ class DatePickerComponent extends FormFieldControl {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DatePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-date-picker',
@@ -1452,6 +1677,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                             provide: TW_FORM_FIELD_CONTROL,
                             useExisting: forwardRef(() => DatePickerComponent),
                         },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => DatePickerComponent),
+                            multi: true,
+                        },
+                        // Angular v22 compiles any component exposing a `value` model() as a
+                        // signal-forms custom control, and `FormControlDirective` takes the classic
+                        // CVA path — the one that runs `setUpValidators` and composes the
+                        // NG_VALIDATORS above onto the control — only if a value accessor is
+                        // already visible at directive-creation time. Assigning
+                        // `ngControl.valueAccessor` later is too late, so without this static
+                        // provider `validate()` is never called and every error code below
+                        // disappears silently. See the CVA section of CLAUDE.md; `calendar.ts` and
+                        // `date-range-picker.ts` carry the same pair for the same reason.
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DatePickerComponent),
+                            multi: true,
+                        },
                         PickerOverlayCoordinator,
                     ],
                     template: `