@cdevhub/ngx-tw 0.2.1 → 0.3.0

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

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { Injectable, input, booleanAttribute, model, output, inject, ElementRef, DestroyRef, viewChild, signal, linkedSignal, computed, effect, untracked, afterNextRender, isDevMode, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgControl, NgForm, FormGroupDirective, Validators } from '@angular/forms';
+import { Injectable, input, booleanAttribute, model, output, inject, ElementRef, DestroyRef, Injector, viewChild, signal, linkedSignal, computed, effect, untracked, afterNextRender, isDevMode, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgForm, FormGroupDirective, Validators, NgControl, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { FocusMonitor, LiveAnnouncer } from '@angular/cdk/a11y';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { merge } from 'rxjs';
 import { tv } from 'tailwind-variants';
 import { TW_ERROR_STATE_MATCHER, fieldMin, fieldMax, parseField, padTwo, to12h, appendDigit, isTerminalDigit, stepWithWrap, from12h, timeOfDaySeconds, clamp } from '@cdevhub/ngx-tw/core';
-import { FormFieldControl, FormFieldComponent, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
+import { FormFieldControl, TW_FORM_FIELD, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
 import { DATE_ADAPTER } from '@cdevhub/ngx-tw/calendar';
 
 /**
@@ -61,10 +61,10 @@ class TimePickerIntl {
     }
     /** Spoken text for an empty hour/minute/second field — used as `aria-valuetext` when the field is blank. */
     emptyValueText = 'Empty';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimePickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimePickerIntl });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimePickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimePickerIntl });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimePickerIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimePickerIntl, decorators: [{
             type: Injectable
         }] });
 /**
@@ -96,8 +96,21 @@ const timePickerVariants = tv({
         fieldGroup: 'inline-flex items-center tabular-nums font-medium',
         field: 'bg-transparent text-center outline-none border-0 p-0 m-0 text-fg placeholder:text-fg-subtle rounded-md caret-transparent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
         separator: 'text-fg-subtle select-none px-0.5',
-        stepperGroup: 'flex flex-col ml-0.5',
-        stepper: 'inline-flex items-center justify-center text-fg-muted hover:text-fg hover:bg-surface-muted rounded-md transition-colors duration-normal motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 disabled:opacity-40 disabled:pointer-events-none',
+        // Column stretches to the field height; the two buttons split it via
+        // `flex-1`. Codified departure from CLAUDE.md "Square interactive targets"
+        // (size-6/7/8): stacking two square buttons made the column 2× a button
+        // tall — far taller than the digit row — which bloated the field height.
+        // So the buttons carry a fixed WIDTH only (per-size below); the chevron
+        // glyph's min-content (size-3 = 12px) is the natural floor.
+        //
+        // WCAG 2.5.8 (target-size, 24px — which slider.ts / badge.ts codify):
+        // two stacked buttons cannot each be ≥24px tall inside a compact field
+        // without re-bloating it, so each spinner ends up < 24px tall. Accepted
+        // as the equivalent-control exception applies — the time is fully editable
+        // by typing into the spinbutton fields (and via ↑/↓), so the spinner is a
+        // pointer enhancement, never the only path.
+        stepperGroup: 'flex flex-col self-stretch ml-0.5',
+        stepper: 'flex-1 inline-flex items-center justify-center text-fg-muted hover:text-fg hover:bg-surface-muted rounded-md transition-colors duration-normal motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 disabled:opacity-40 disabled:pointer-events-none',
         stepperIcon: '',
         meridiem: 'inline-flex items-center rounded-md border border-border overflow-hidden ml-2 shrink-0',
         meridiemButton: 'font-medium text-fg-muted hover:bg-surface-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 transition-colors duration-normal motion-reduce:transition-none disabled:opacity-40 disabled:pointer-events-none',
@@ -111,7 +124,7 @@ const timePickerVariants = tv({
                 // the standard width scale because the field is content-driven, not a layout primitive
                 // — see CLAUDE.md spacing scale rationale.
                 field: 'w-5 text-xs',
-                stepper: 'size-6',
+                stepper: 'w-6',
                 stepperIcon: 'size-3',
                 meridiemButton: 'px-1.5 py-1 text-2xs',
             },
@@ -119,7 +132,7 @@ const timePickerVariants = tv({
                 root: 'gap-1 text-sm',
                 // sm-density numeric field — sized to fit a 2-digit value at text-sm; see CLAUDE.md spacing scale rationale.
                 field: 'w-6 text-sm',
-                stepper: 'size-7',
+                stepper: 'w-7',
                 stepperIcon: 'size-3',
                 meridiemButton: 'px-2 py-1 text-xs',
             },
@@ -127,7 +140,7 @@ const timePickerVariants = tv({
                 root: 'gap-1.5 text-sm',
                 // md-density numeric field — sized to fit a 2-digit value at text-sm; see CLAUDE.md spacing scale rationale.
                 field: 'w-7 text-sm',
-                stepper: 'size-7',
+                stepper: 'w-7',
                 stepperIcon: 'size-3',
                 meridiemButton: 'px-2 py-1 text-xs',
             },
@@ -135,7 +148,7 @@ const timePickerVariants = tv({
                 root: 'gap-1.5 text-base',
                 // lg-density numeric field — sized to fit a 2-digit value at text-base; see CLAUDE.md spacing scale rationale.
                 field: 'w-8 text-base',
-                stepper: 'size-8',
+                stepper: 'w-8',
                 stepperIcon: 'size-4',
                 meridiemButton: 'px-2.5 py-1.5 text-sm',
             },
@@ -143,7 +156,7 @@ const timePickerVariants = tv({
                 root: 'gap-2 text-base',
                 // xl-density numeric field — sized to fit a 2-digit value at text-base; see CLAUDE.md spacing scale rationale.
                 field: 'w-9 text-base',
-                stepper: 'size-8',
+                stepper: 'w-8',
                 stepperIcon: 'size-4',
                 meridiemButton: 'px-3 py-1.5 text-sm',
             },
@@ -207,16 +220,6 @@ const MERIDIEM_ACTIVE_COLOR = {
     error: 'bg-error-500 text-on-error hover:bg-error-600',
 };
 let nextTimePickerId = 0;
-/**
- * Segmented time editor. Renders `HH : MM` (with an optional `: SS` and/or
- * `AM/PM` toggle) and integrates with all three Angular form strategies via
- * `ControlValueAccessor`. Also participates in `<tw-form-field>` through
- * `FormFieldControl` — wrapping is optional.
- *
- * Value type is `D | null`. Every time operation flows through the injected
- * `DateAdapter<D>`, so the component works with the default native adapter
- * (`provideNativeDateAdapter()`) or any custom adapter a consumer ships.
- */
 class TimePickerComponent extends FormFieldControl {
     // ── Inputs ──
     /** Id on the time-picker's host element. Auto-generated when not provided. Used by the form-field's `<label for>` attribute. */
@@ -231,39 +234,55 @@ class TimePickerComponent extends FormFieldControl {
     readonlyInput = input(false, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), alias: 'readonly',
         transform: booleanAttribute });
     /** Controls field height, font size, and stepper 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 used for the focused border and focus ring. 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 chrome. `'default'` draws its own border; `'naked'` strips chrome. Auto-resolves to `'naked'` inside `<tw-form-field>`. */
-    variant = input(undefined, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     /** `'12h'` renders 1–12 hours with an AM/PM toggle; `'24h'` renders 00–23. Defaults to `'24h'`. */
-    format = input('24h', ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    format = input('24h', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
     /** When true, renders a seconds field after minutes. Defaults to `false`. */
-    showSeconds = input(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+    showSeconds = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
     /** Amount to add/subtract when stepping hours. Defaults to `1`. */
-    hourStep = input(1, ...(ngDevMode ? [{ debugName: "hourStep" }] : /* istanbul ignore next */ []));
+    hourStep = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourStep" }] : /* istanbul ignore next */ []));
     /** Amount to add/subtract when stepping minutes. Defaults to `1`. */
-    minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+    minuteStep = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
     /** Amount to add/subtract when stepping seconds. Defaults to `1`. */
-    secondStep = input(1, ...(ngDevMode ? [{ debugName: "secondStep" }] : /* istanbul ignore next */ []));
-    /** Earliest accepted time-of-day. Values earlier than this set `errorState`. Defaults to `null`. Note: when `showSeconds` is `false`, the seconds component of any value still participates in the range comparison — supply `minTime` with zeroed seconds to match the 2-field display. */
-    minTime = input(null, ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
-    /** Latest accepted time-of-day. Values later than this set `errorState`. Defaults to `null`. Note: when `showSeconds` is `false`, the seconds component of any value still participates in the range comparison — supply `maxTime` with zeroed seconds to match the 2-field display. */
-    maxTime = input(null, ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
+    secondStep = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondStep" }] : /* istanbul ignore next */ []));
+    /** Earliest accepted time-of-day. Values earlier than this set `errorState` and mark the bound control invalid with `timePickerMin`. Defaults to `null`. Note: when `showSeconds` is `false`, the seconds component of any value still participates in the range comparison — supply `minTime` with zeroed seconds to match the 2-field display. */
+    minTime = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
+    /** Latest accepted time-of-day. Values later than this set `errorState` and mark the bound control invalid with `timePickerMax`. Defaults to `null`. Note: when `showSeconds` is `false`, the seconds component of any value still participates in the range comparison — supply `maxTime` with zeroed seconds to match the 2-field display. */
+    maxTime = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
     /** Date portion used when the user types a time while `value` is `null`. Defaults to today. */
-    referenceDate = input(null, ...(ngDevMode ? [{ debugName: "referenceDate" }] : /* istanbul ignore next */ []));
+    referenceDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "referenceDate" }] : /* istanbul ignore next */ []));
     /** Placeholder shown in each field when empty. Defaults to `'--'`. */
-    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    placeholder = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /** Whether to render the up/down stepper column. Defaults to `true`. */
     // TRUE-default: pointer users expect inline up/down chevrons next to a numeric editor — without them the picker reads as a static display, and consumers must rebuild stepping for every instance.
-    showSteppers = input(true, ...(ngDevMode ? [{ debugName: "showSteppers" }] : /* istanbul ignore next */ []));
+    showSteppers = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSteppers" }] : /* istanbul ignore next */ []));
     /** Whether to render the clear affordance when a value is set. Defaults to `true`. */
     // TRUE-default: matches `<tw-date-picker>` and `<tw-input>` clear behaviour; without the inline clear, every form has to wire its own reset surface for an obvious affordance.
-    showClear = input(true, ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    showClear = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
     /** Accessible label for the clear button. Defaults to `'Clear time'`. */
-    clearLabel = input('Clear time', ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    clearLabel = input('Clear time', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* 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 fields group. 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 group. Alias: `aria-labelledby`. */
@@ -272,7 +291,8 @@ class TimePickerComponent extends FormFieldControl {
     userAriaDescribedByInput = input(undefined, { ...(ngDevMode ? { debugName: "userAriaDescribedByInput" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
     // ── Models ──
     /** Two-way bound current time. `null` when empty. Setting programmatically updates the fields without firing `onChange`. */
-    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     // ── Outputs ──
     /** Fires on every keystroke, stepper press, or AM/PM toggle — before the new value is committed. */
     timeInput = output();
@@ -284,39 +304,58 @@ class TimePickerComponent extends FormFieldControl {
     liveAnnouncer = inject(LiveAnnouncer);
     elementRef = inject((ElementRef));
     destroyRef = inject(DestroyRef);
-    formField = inject(FormFieldComponent, { optional: true });
-    ngControl = inject(NgControl, { optional: true, self: true });
+    injector = inject(Injector);
+    formField = inject(TW_FORM_FIELD, { optional: true });
+    // Resolved lazily in `ngOnInit`: this component self-provides NG_VALIDATORS
+    // via `useExisting`, so an eager `inject(NgControl, { self })` would deadlock
+    // against its own validator during construction. Mirrors `date-picker.ts`,
+    // `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);
     /** @internal — exposed for the template; consumers configure via `provideTimePickerIntl()`. */
     intl = inject(TimePickerIntl, { optional: true }) ?? new TimePickerIntl();
     // ── View refs ──
-    hourInputRef = viewChild.required('hourInput');
-    minuteInputRef = viewChild.required('minuteInput');
-    secondInputRef = viewChild('secondInput', ...(ngDevMode ? [{ debugName: "secondInputRef" }] : /* istanbul ignore next */ []));
+    hourInputRef = viewChild.required('hourInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourInputRef" }] : /* istanbul ignore next */ []));
+    minuteInputRef = viewChild.required('minuteInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteInputRef" }] : /* istanbul ignore next */ []));
+    secondInputRef = viewChild('secondInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondInputRef" }] : /* istanbul ignore next */ []));
     // ── Identity ──
     uid = nextTimePickerId++;
     /** @internal */
     hostId = `tw-time-picker-${this.uid}`;
     // ── Internal state ──
     /** @internal raw display text per field — always the numerals the user sees. */
-    hourText = signal('', ...(ngDevMode ? [{ debugName: "hourText" }] : /* istanbul ignore next */ []));
+    hourText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourText" }] : /* istanbul ignore next */ []));
     /** @internal */
-    minuteText = signal('', ...(ngDevMode ? [{ debugName: "minuteText" }] : /* istanbul ignore next */ []));
+    minuteText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteText" }] : /* istanbul ignore next */ []));
     /** @internal */
-    secondText = signal('', ...(ngDevMode ? [{ debugName: "secondText" }] : /* istanbul ignore next */ []));
+    secondText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondText" }] : /* istanbul ignore next */ []));
     /** @internal */
-    meridiem = signal('AM', ...(ngDevMode ? [{ debugName: "meridiem" }] : /* istanbul ignore next */ []));
+    meridiem = signal('AM', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "meridiem" }] : /* istanbul ignore next */ []));
     /** @internal */
-    focusedField = signal(null, ...(ngDevMode ? [{ debugName: "focusedField" }] : /* istanbul ignore next */ []));
+    focusedField = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedField" }] : /* istanbul ignore next */ []));
     /** @internal */
-    internalValue = linkedSignal(() => this.value(), ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
-    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
-    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
-    focusedSignal = signal(false, ...(ngDevMode ? [{ debugName: "focusedSignal" }] : /* istanbul ignore next */ []));
-    _ngControlRev = signal(0, ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
-    _formSubmitRev = signal(0, ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
+    internalValue = linkedSignal(() => this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    describedByIdsSignal = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    focusedSignal = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedSignal" }] : /* 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 */ []));
     /** When true, an effect should not rewrite field text from the external value. */
     editing = false;
     onChange = () => { };
@@ -326,22 +365,29 @@ class TimePickerComponent 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 */
-    isEmpty = computed(() => this.internalValue() === null, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    isEmpty = computed(() => this.internalValue() === null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* 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 */
-    hourMin = computed(() => fieldMin('hour', this.format()), ...(ngDevMode ? [{ debugName: "hourMin" }] : /* istanbul ignore next */ []));
+    hourMin = computed(() => fieldMin('hour', this.format()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourMin" }] : /* istanbul ignore next */ []));
     /** @internal */
-    hourMax = computed(() => fieldMax('hour', this.format()), ...(ngDevMode ? [{ debugName: "hourMax" }] : /* istanbul ignore next */ []));
+    hourMax = computed(() => fieldMax('hour', this.format()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourMax" }] : /* istanbul ignore next */ []));
     /** @internal */
-    hourDisplay = computed(() => this.hourText(), ...(ngDevMode ? [{ debugName: "hourDisplay" }] : /* istanbul ignore next */ []));
+    hourDisplay = computed(() => this.hourText(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourDisplay" }] : /* istanbul ignore next */ []));
     /** @internal */
     hourValueNow = computed(() => {
         const n = parseField(this.hourText());
         return n === null ? null : n;
-    }, ...(ngDevMode ? [{ debugName: "hourValueNow" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourValueNow" }] : /* istanbul ignore next */ []));
     /** @internal */
     hourValueText = computed(() => {
         const n = this.hourValueNow();
@@ -350,23 +396,29 @@ class TimePickerComponent extends FormFieldControl {
         const meridiemLabel = this.meridiem() === 'AM' ? this.intl.amLabel : this.intl.pmLabel;
         const suffix = this.format() === '12h' ? ` ${meridiemLabel}` : '';
         return `${padTwo(n)}${suffix}`;
-    }, ...(ngDevMode ? [{ debugName: "hourValueText" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourValueText" }] : /* istanbul ignore next */ []));
     /** @internal */
-    minuteValueNow = computed(() => parseField(this.minuteText()), ...(ngDevMode ? [{ debugName: "minuteValueNow" }] : /* istanbul ignore next */ []));
+    minuteValueNow = computed(() => parseField(this.minuteText()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteValueNow" }] : /* istanbul ignore next */ []));
     /** @internal */
     minuteValueText = computed(() => {
         const n = this.minuteValueNow();
         return n === null ? this.intl.emptyValueText : padTwo(n);
-    }, ...(ngDevMode ? [{ debugName: "minuteValueText" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteValueText" }] : /* istanbul ignore next */ []));
     /** @internal */
-    secondValueNow = computed(() => parseField(this.secondText()), ...(ngDevMode ? [{ debugName: "secondValueNow" }] : /* istanbul ignore next */ []));
+    secondValueNow = computed(() => parseField(this.secondText()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondValueNow" }] : /* istanbul ignore next */ []));
     /** @internal */
     secondValueText = computed(() => {
         const n = this.secondValueNow();
         return n === null ? this.intl.emptyValueText : padTwo(n);
-    }, ...(ngDevMode ? [{ debugName: "secondValueText" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondValueText" }] : /* istanbul ignore next */ []));
     /** @internal */
-    groupAriaLabel = computed(() => this.ariaLabel() ?? this.intl.groupLabel, ...(ngDevMode ? [{ debugName: "groupAriaLabel" }] : /* istanbul ignore next */ []));
+    groupAriaLabel = computed(() => this.ariaLabel() ?? this.intl.groupLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupAriaLabel" }] : /* istanbul ignore next */ []));
     /** @internal Label of the currently focused field, used by stepper aria-labels. */
     focusedFieldLabel = computed(() => {
         const f = this.focusedField();
@@ -375,7 +427,8 @@ class TimePickerComponent extends FormFieldControl {
         if (f === 'second')
             return this.intl.secondsLabel.toLowerCase();
         return this.intl.hoursLabel.toLowerCase();
-    }, ...(ngDevMode ? [{ debugName: "focusedFieldLabel" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedFieldLabel" }] : /* istanbul ignore next */ []));
     /** @internal */
     describedBy = computed(() => {
         const extra = this.describedByIdsSignal();
@@ -387,9 +440,11 @@ class TimePickerComponent extends FormFieldControl {
                     merged.push(id);
         }
         return merged.length ? merged.join(' ') : '';
-    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
     // ── Range / error state ──
-    rangeError = signal(false, ...(ngDevMode ? [{ debugName: "rangeError" }] : /* istanbul ignore next */ []));
+    rangeError = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeError" }] : /* istanbul ignore next */ []));
     // ── tv() output ──
     variantResult = computed(() => timePickerVariants({
         size: this.size(),
@@ -398,16 +453,26 @@ class TimePickerComponent extends FormFieldControl {
         errorState: this.errorState(),
         focused: this.focusedSignal(),
         color: this.color(),
-    }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
-    /** @internal */ rootClasses = computed(() => this.variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
-    /** @internal */ fieldGroupClasses = computed(() => this.variantResult().fieldGroup(), ...(ngDevMode ? [{ debugName: "fieldGroupClasses" }] : /* istanbul ignore next */ []));
-    /** @internal */ fieldClasses = computed(() => this.variantResult().field(), ...(ngDevMode ? [{ debugName: "fieldClasses" }] : /* istanbul ignore next */ []));
-    /** @internal */ separatorClasses = computed(() => this.variantResult().separator(), ...(ngDevMode ? [{ debugName: "separatorClasses" }] : /* istanbul ignore next */ []));
-    /** @internal */ stepperGroupClasses = computed(() => this.variantResult().stepperGroup(), ...(ngDevMode ? [{ debugName: "stepperGroupClasses" }] : /* istanbul ignore next */ []));
-    /** @internal */ stepperClasses = computed(() => this.variantResult().stepper(), ...(ngDevMode ? [{ debugName: "stepperClasses" }] : /* istanbul ignore next */ []));
-    /** @internal */ stepperIconClasses = computed(() => this.variantResult().stepperIcon(), ...(ngDevMode ? [{ debugName: "stepperIconClasses" }] : /* istanbul ignore next */ []));
-    /** @internal */ meridiemClasses = computed(() => this.variantResult().meridiem(), ...(ngDevMode ? [{ debugName: "meridiemClasses" }] : /* istanbul ignore next */ []));
-    /** @internal */ clearButtonClasses = computed(() => this.variantResult().clearButton(), ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    /** @internal */ rootClasses = computed(() => this.variantResult().root(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */ fieldGroupClasses = computed(() => this.variantResult().fieldGroup(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldGroupClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */ fieldClasses = computed(() => this.variantResult().field(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */ separatorClasses = computed(() => this.variantResult().separator(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separatorClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */ stepperGroupClasses = computed(() => this.variantResult().stepperGroup(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepperGroupClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */ stepperClasses = computed(() => this.variantResult().stepper(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepperClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */ stepperIconClasses = computed(() => this.variantResult().stepperIcon(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepperIconClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */ meridiemClasses = computed(() => this.variantResult().meridiem(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "meridiemClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */ clearButtonClasses = computed(() => this.variantResult().clearButton(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
     meridiemButtonClasses(which) {
         const base = this.variantResult().meridiemButton();
@@ -415,7 +480,8 @@ class TimePickerComponent extends FormFieldControl {
         return active ? `${base} ${MERIDIEM_ACTIVE_COLOR[this.color()]}` : base;
     }
     // ── FormFieldControl impl ──
-    /** @internal */ id = computed(() => this.idInput() ?? this.hostId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** @internal */ id = computed(() => this.idInput() ?? this.hostId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     /** @internal */ focused = this.focusedSignal.asReadonly();
     /** @internal */ empty = this.isEmpty;
     /** @internal */ disabled = this.isDisabled;
@@ -424,7 +490,8 @@ class TimePickerComponent 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();
@@ -436,16 +503,24 @@ class TimePickerComponent 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 = 'time-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();
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
+        // Re-run validation when a constraint moves, so `control.errors` reflects
+        // the new bound instead of the verdict from when the value was committed.
+        // `validatorOnChange` is a plain callback into Angular's validator
+        // plumbing, not a signal write, so this cannot cycle.
+        effect(() => {
+            this.minTime();
+            this.maxTime();
+            untracked(() => this.validatorOnChange());
+        });
         // Sync the field text whenever the underlying value changes (programmatic).
         effect(() => {
             const v = this.internalValue();
@@ -503,7 +578,7 @@ class TimePickerComponent extends FormFieldControl {
                 return;
             const hasLabel = !!this.ariaLabel() ||
                 !!this.ariaLabelledby() ||
-                !!this.formField?.labelChild();
+                !!this.formField?.hasLabel();
             if (!hasLabel) {
                 console.warn('[tw-time-picker] The time-picker has no accessible name. Set aria-label, aria-labelledby, or wrap the component in a <tw-form-field> with a <label twLabel>.');
             }
@@ -542,6 +617,12 @@ class TimePickerComponent extends FormFieldControl {
         });
     }
     ngOnInit() {
+        // Deferred NgControl resolution (see the field declaration). The value
+        // accessor itself is registered statically via NG_VALUE_ACCESSOR.
+        this.ngControl = this.injector.get(NgControl, null, { self: true, optional: true });
+        // `isDisabled` / `required` / `errorState` read `ngControl` and saw `null`
+        // until now; bump the revision so they recompute.
+        this._ngControlRev.update((n) => n + 1);
         const ctrl = this.ngControl?.control;
         if (ctrl) {
             const streams = [ctrl.statusChanges, ctrl.valueChanges].filter((s) => !!s);
@@ -925,6 +1006,35 @@ class TimePickerComponent extends FormFieldControl {
             return fieldMax('hour', this.format());
         return 59;
     }
+    // ── Validator ──
+    validatorOnChange = () => { };
+    /** @internal */
+    validate(control) {
+        const value = control.value;
+        if (value === null || value === undefined)
+            return null;
+        if (!this.adapter.isValid(value))
+            return null;
+        const errors = {};
+        const actualSecs = this.secondsOf(value);
+        const min = this.minTime();
+        if (min && this.adapter.isValid(min) && actualSecs < this.secondsOf(min)) {
+            errors.timePickerMin = { min, actual: value };
+        }
+        const max = this.maxTime();
+        if (max && this.adapter.isValid(max) && actualSecs > this.secondsOf(max)) {
+            errors.timePickerMax = { max, actual: value };
+        }
+        return Object.keys(errors).length ? errors : null;
+    }
+    /** @internal */
+    registerOnValidatorChange(fn) {
+        this.validatorOnChange = fn;
+    }
+    /** Time-of-day in seconds, ignoring the date part — the same basis `isInRange` uses. */
+    secondsOf(v) {
+        return timeOfDaySeconds(this.adapter.getHours(v), this.adapter.getMinutes(v), this.adapter.getSeconds(v));
+    }
     // ── ControlValueAccessor ──
     writeValue(value) {
         if (value === null || value === undefined || value === '') {
@@ -978,12 +1088,31 @@ class TimePickerComponent extends FormFieldControl {
             return;
         this.hourInputRef().nativeElement.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TimePickerComponent, isStandalone: true, selector: "tw-time-picker", inputs: { idInput: { classPropertyName: "idInput", publicName: "id", 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 }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, referenceDate: { classPropertyName: "referenceDate", publicName: "referenceDate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showSteppers: { classPropertyName: "showSteppers", publicName: "showSteppers", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", 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 } }, outputs: { value: "valueChange", timeInput: "timeInput", timeChange: "timeChange" }, host: { properties: { "class": "rootClasses()", "id": "hostId", "attr.aria-disabled": "isDisabled() || null", "attr.aria-invalid": "errorState() || null", "attr.data-variant": "resolvedVariant()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TimePickerComponent, isStandalone: true, selector: "tw-time-picker", inputs: { idInput: { classPropertyName: "idInput", publicName: "id", 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 }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, referenceDate: { classPropertyName: "referenceDate", publicName: "referenceDate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showSteppers: { classPropertyName: "showSteppers", publicName: "showSteppers", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", 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 } }, outputs: { value: "valueChange", timeInput: "timeInput", timeChange: "timeChange" }, host: { properties: { "class": "rootClasses()", "id": "hostId", "attr.aria-disabled": "isDisabled() || null", "attr.aria-invalid": "errorState() || null", "attr.data-variant": "resolvedVariant()" } }, providers: [
             {
                 provide: TW_FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => TimePickerComponent),
             },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => TimePickerComponent),
+                multi: true,
+            },
+            // Required, not optional. Angular v22 compiles any component exposing a
+            // `value` model() as a signal-forms custom control; `FormControlDirective`
+            // only takes the classic CVA path — the one that runs `setUpValidators` and
+            // composes the NG_VALIDATORS above — when a value accessor is already
+            // visible at directive-creation time. Assigning `ngControl.valueAccessor`
+            // in a lifecycle hook is too late, and the failure is silent: value and
+            // disabled still round-trip, so only a spec asserting an error code on a
+            // bound FormControl catches it. See CLAUDE.md's ControlValueAccessor
+            // section.
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TimePickerComponent),
+                multi: true,
+            },
         ], viewQueries: [{ propertyName: "hourInputRef", first: true, predicate: ["hourInput"], descendants: true, isSignal: true }, { propertyName: "minuteInputRef", first: true, predicate: ["minuteInput"], descendants: true, isSignal: true }, { propertyName: "secondInputRef", first: true, predicate: ["secondInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <div [class]="fieldGroupClasses()" role="group" [attr.aria-label]="groupAriaLabel()">
       <input
@@ -1150,7 +1279,7 @@ class TimePickerComponent extends FormFieldControl {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-time-picker',
@@ -1160,6 +1289,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                             provide: TW_FORM_FIELD_CONTROL,
                             useExisting: forwardRef(() => TimePickerComponent),
                         },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => TimePickerComponent),
+                            multi: true,
+                        },
+                        // Required, not optional. Angular v22 compiles any component exposing a
+                        // `value` model() as a signal-forms custom control; `FormControlDirective`
+                        // only takes the classic CVA path — the one that runs `setUpValidators` and
+                        // composes the NG_VALIDATORS above — when a value accessor is already
+                        // visible at directive-creation time. Assigning `ngControl.valueAccessor`
+                        // in a lifecycle hook is too late, and the failure is silent: value and
+                        // disabled still round-trip, so only a spec asserting an error code on a
+                        // bound FormControl catches it. See CLAUDE.md's ControlValueAccessor
+                        // section.
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TimePickerComponent),
+                            multi: true,
+                        },
                     ],
                     template: `
     <div [class]="fieldGroupClasses()" role="group" [attr.aria-label]="groupAriaLabel()">