ngwr 8.0.0 → 9.0.0

package/types/ngwr-checkbox.d.ts

@@ -1,32 +1,39 @@
 import * as _angular_core from '@angular/core';
 import { InjectionToken, Signal } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { FormCheckboxControl, FormValueControl } from '@angular/forms/signals';
 
 /**
  * Two-state checkbox.
  *
- * **Standalone mode** — boolean value, works as a `ControlValueAccessor`:
+ * A signal-forms native control: it implements `FormCheckboxControl`, so
+ * `[formField]` binds straight to its `checked` model — no
+ * `ControlValueAccessor` in between. `[(checked)]` works standalone, and
+ * classic `[(ngModel)]` / reactive forms keep working through Angular's bridge.
  *
  * @example
  * ```html
- * <wr-checkbox [(ngModel)]="agree">I agree</wr-checkbox>
+ * <wr-checkbox [(checked)]="agree">I agree</wr-checkbox>
+ * <wr-checkbox [formField]="form.agree">I agree</wr-checkbox>
  * ```
  *
- * **Inside `<wr-checkbox-group>`** — the checkbox's `value` is added to
- * or removed from the group's array. The standalone CVA is ignored.
+ * **Inside `<wr-checkbox-group>`** — the checkbox's `checkboxValue` is added to
+ * or removed from the group's array, and the group is the native form control.
+ * (The identity input is `checkboxValue`, not `value`, because
+ * `FormCheckboxControl` reserves `value` — its form state is the boolean
+ * `checked`.)
  *
  * @example
  * ```html
- * <wr-checkbox-group [(ngModel)]="features">
- *   <wr-checkbox value="autosave">Autosave</wr-checkbox>
- *   <wr-checkbox value="notifications">Notifications</wr-checkbox>
+ * <wr-checkbox-group [formField]="form.features">
+ *   <wr-checkbox checkboxValue="autosave">Autosave</wr-checkbox>
+ *   <wr-checkbox checkboxValue="notifications">Notifications</wr-checkbox>
  * </wr-checkbox-group>
  * ```
  *
- * @see https://ngwr.dev/components/checkbox
+ * @see https://ngwr.dev/reference/components/checkbox
  */
 type WrCheckboxSize = 'sm' | 'md' | 'lg';
-declare class WrCheckbox implements ControlValueAccessor {
+declare class WrCheckbox implements FormCheckboxControl {
     /**
      * Stable id used to associate the native input with its label.
      *
@@ -34,12 +41,23 @@ declare class WrCheckbox implements ControlValueAccessor {
      */
     readonly id: _angular_core.InputSignal<string>;
     /**
-     * Per-checkbox value used only when inside a `<wr-checkbox-group>`.
-     * Ignored in standalone mode.
+     * This checkbox's identity when inside a `<wr-checkbox-group>` — the value
+     * added to / removed from the group's array. Ignored in standalone mode.
+     * (Named `checkboxValue`, not `value`, because `FormCheckboxControl` reserves
+     * `value`.)
      */
-    readonly value: _angular_core.InputSignal<unknown>;
+    readonly checkboxValue: _angular_core.InputSignal<unknown>;
     /**
-     * Disable the checkbox. Also set automatically by Angular forms.
+     * Checked state — the form value. Bound by `[formField]`, two-way via
+     * `[(checked)]`, or `[(ngModel)]`. Ignored inside a `<wr-checkbox-group>`,
+     * where the group's array is the source of truth.
+     */
+    readonly checked: _angular_core.ModelSignal<boolean>;
+    /** Emitted on blur so a bound field can mark itself touched. */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Disable the checkbox. Bound automatically from the field's disabled state
+     * when used with `[formField]`.
      *
      * @default false
      */
@@ -51,24 +69,25 @@ declare class WrCheckbox implements ControlValueAccessor {
      * default checkmark. Use any registered NGWR icon.
      */
     readonly icon: _angular_core.InputSignal<string | null>;
+    /**
+     * Show the indeterminate ("mixed") state — a dash instead of a check. Visual
+     * only and controlled: set it yourself for a parent "select all" whose
+     * children are partly checked, and clear it on the next toggle. Takes visual
+     * precedence over `checked`; the native input reports `aria-checked="mixed"`.
+     *
+     * @default false
+     */
+    readonly indeterminate: _angular_core.InputSignalWithTransform<boolean, any>;
     private readonly group;
-    protected readonly standaloneChecked: _angular_core.WritableSignal<boolean>;
-    protected readonly standaloneDisabledFromCva: _angular_core.WritableSignal<boolean>;
-    /** Derived "is checked". Reads from group when grouped, else local state. */
-    protected readonly checked: _angular_core.Signal<boolean>;
-    /** Effective disabled — input wins, then group, then CVA. */
+    /** Rendered "is checked" — reads the group when grouped, else the `checked` model. */
+    protected readonly isChecked: _angular_core.Signal<boolean>;
+    /** Effective disabled — the `disabled` input wins, then the group. */
     protected readonly effectiveDisabled: _angular_core.Signal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
-    private onChange;
-    private onTouched;
-    writeValue(value: boolean | null): void;
-    registerOnChange(fn: (value: boolean) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
     protected onInputChange(event: Event): void;
     protected onInputBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCheckbox, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCheckbox, "wr-checkbox", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCheckbox, "wr-checkbox", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "checkboxValue": { "alias": "checkboxValue"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "touch": "touch"; }, never, ["*"], true, never>;
 }
 
 /**
@@ -103,39 +122,40 @@ declare const WR_CHECKBOX_GROUP: InjectionToken<WrCheckboxGroupContext>;
  * Manages a group of `<wr-checkbox>` children as a single form value
  * (an array of the checked items' `value` inputs).
  *
+ * A signal-forms native control: it implements `FormValueControl<unknown[]>`,
+ * so `[formField]` binds to its `value` model. `[(value)]` works standalone,
+ * and classic `[(ngModel)]` / reactive forms keep working through the bridge.
+ *
  * @example
  * ```html
- * <wr-checkbox-group [(ngModel)]="features">
- *   <wr-checkbox value="autosave">Autosave</wr-checkbox>
- *   <wr-checkbox value="notifications">Notifications</wr-checkbox>
- *   <wr-checkbox value="darkmode">Dark mode</wr-checkbox>
+ * <wr-checkbox-group [formField]="form.features">
+ *   <wr-checkbox checkboxValue="autosave">Autosave</wr-checkbox>
+ *   <wr-checkbox checkboxValue="notifications">Notifications</wr-checkbox>
+ *   <wr-checkbox checkboxValue="darkmode">Dark mode</wr-checkbox>
  * </wr-checkbox-group>
  * ```
  *
- * @see https://ngwr.dev/components/checkbox
+ * @see https://ngwr.dev/reference/components/checkbox
  */
-declare class WrCheckboxGroup implements ControlValueAccessor, WrCheckboxGroupContext {
+declare class WrCheckboxGroup implements FormValueControl<unknown[]>, WrCheckboxGroupContext {
     /**
-     * Disable every child checkbox. Also set by Angular forms via
-     * `setDisabledState`.
+     * Disable every child checkbox. Bound automatically from the field's
+     * disabled state when used with `[formField]`.
      *
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** The checked items' values. Bound by `[formField]`, or two-way via `[(value)]`. */
+    readonly value: _angular_core.ModelSignal<unknown[]>;
+    /** Emitted when a child toggles so a bound field can mark itself touched. */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
     private readonly selected;
-    private readonly disabledFromCva;
-    /** Effective disabled state — input wins, CVA second. */
+    /** Effective disabled state (WrCheckboxGroupContext). */
     readonly isDisabled: _angular_core.Signal<boolean>;
-    private onChange;
-    private onTouched;
     isSelected(value: unknown): boolean;
     toggle(value: unknown): void;
-    writeValue(value: unknown): void;
-    registerOnChange(fn: (value: unknown[]) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCheckboxGroup, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCheckboxGroup, "wr-checkbox-group", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCheckboxGroup, "wr-checkbox-group", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, ["*"], true, never>;
 }
 
 export { WR_CHECKBOX_GROUP, WrCheckbox, WrCheckboxGroup };

package/types/ngwr-clipboard.d.ts

@@ -25,7 +25,7 @@ type WrClipboardPermission = 'granted' | 'denied' | 'prompt' | 'unsupported';
  * await clip.permission('write');      // 'granted' | 'denied' | 'prompt' | 'unsupported'
  * ```
  *
- * @see https://ngwr.dev/services/clipboard
+ * @see https://ngwr.dev/reference/services/clipboard
  */
 declare class WrClipboard {
     private readonly doc;

package/types/ngwr-collapse.d.ts

@@ -18,7 +18,7 @@ import { InjectionToken, Signal } from '@angular/core';
  * </wr-collapse-group>
  * ```
  *
- * @see https://ngwr.dev/components/collapse
+ * @see https://ngwr.dev/reference/components/collapse
  */
 declare class WrCollapse {
     /** Header text. */
@@ -89,7 +89,7 @@ interface Member$1 {
  * Visual + behavioral grouping of `<wr-collapse>` children. When
  * `accordion` is true, opening one child closes the others.
  *
- * @see https://ngwr.dev/components/collapse
+ * @see https://ngwr.dev/reference/components/collapse
  */
 declare class WrCollapseGroup implements WrCollapseGroupContext {
     /** When true, only one child may be open at a time. @default false */
@@ -122,7 +122,7 @@ interface Member {
  * </wr-accordion>
  * ```
  *
- * @see https://ngwr.dev/components/collapse
+ * @see https://ngwr.dev/reference/components/collapse
  */
 declare class WrAccordion implements WrCollapseGroupContext {
     /** Always behaves as an accordion. Provided for context-interface symmetry. */

package/types/ngwr-color-picker.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { FormValueControl } from '@angular/forms/signals';
 import { WrSegmentedOption } from 'ngwr/segmented';
 
 /**
@@ -169,33 +169,41 @@ type Tab = 'hex' | 'rgb' | 'hsl';
 type Edges = 'sv' | 'hue' | 'alpha';
 /**
  * Inline colour picker — HSV canvas, hue slider, optional alpha slider, HEX
- * input. Implements `ControlValueAccessor`, so it binds with `[(ngModel)]`,
- * `[formControl]`, or `formControlName`. Output is always a string in the
- * format chosen via `[format]`.
+ * input.
+ *
+ * A signal-forms native control: it implements `FormValueControl<string>`, so
+ * `[formField]` binds straight to its `value` model — no
+ * `ControlValueAccessor` in between. `[(value)]` works standalone. Output is
+ * always a hex string.
  *
  * @example
  * ```html
- * <wr-color-picker [(ngModel)]="brandColor" />
- * <wr-color-picker [(ngModel)]="brandColor" [alpha]="false" />
+ * <!-- signal forms -->
+ * <wr-color-picker [formField]="form.brandColor" />
+ *
+ * <!-- standalone two-way binding -->
+ * <wr-color-picker [(value)]="brandColor" [alpha]="false" />
  * ```
  *
- * @see https://ngwr.dev/components/color-picker
+ * @see https://ngwr.dev/reference/components/color-picker
  */
-declare class WrColorPicker implements ControlValueAccessor {
+declare class WrColorPicker implements FormValueControl<string> {
     /** Render the alpha slider and emit 8-digit hex / `rgba()`. @default true */
     readonly alpha: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Disable interaction. @default false */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
-    /** Output format produced through the CVA. @default 'hex' */
+    /** Output format produced by the control. @default 'hex' */
     readonly format: _angular_core.InputSignal<WrColorFormat>;
     /** Preset hex colours rendered as a clickable row beneath the inputs. Empty = no row. @default [] */
     readonly swatches: _angular_core.InputSignal<readonly string[]>;
+    /** The selected colour as a string. Bound by `[formField]`, or two-way via `[(value)]`. */
+    readonly value: _angular_core.ModelSignal<string>;
+    /** Emitted on blur so a bound field can mark itself touched. */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
     protected readonly h: _angular_core.WritableSignal<number>;
     protected readonly s: _angular_core.WritableSignal<number>;
     protected readonly v: _angular_core.WritableSignal<number>;
     protected readonly a: _angular_core.WritableSignal<number>;
-    private readonly disabledFromCva;
-    protected readonly effectiveDisabled: _angular_core.Signal<boolean>;
     /** RGB view of the current colour, computed lazily. */
     protected readonly rgb: _angular_core.Signal<WrRgb>;
     /** Canonical hex (used by the input field and by drag emits). */
@@ -219,12 +227,9 @@ declare class WrColorPicker implements ControlValueAccessor {
     protected readonly alphaPercent: _angular_core.Signal<number>;
     protected readonly tabOptions: readonly WrSegmentedOption<Tab>[];
     protected readonly classes: _angular_core.Signal<string>;
-    private onChange;
-    private onTouched;
-    writeValue(value: string | null): void;
-    registerOnChange(fn: (value: string) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
+    /** Last hex we pushed into `value`; lets the sync effect ignore our own writes. */
+    private lastEmittedHex;
+    constructor();
     protected onPointerDown(event: PointerEvent, surface: Edges): void;
     private updateFromEvent;
     protected onHexInput(event: Event): void;
@@ -239,7 +244,7 @@ declare class WrColorPicker implements ControlValueAccessor {
     /** Push an RGB triple into the HSV source of truth (preserving the current alpha if the swap removes it). */
     private applyRgb;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrColorPicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrColorPicker, "wr-color-picker", never, { "alpha": { "alias": "alpha"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "swatches": { "alias": "swatches"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrColorPicker, "wr-color-picker", never, { "alpha": { "alias": "alpha"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "swatches": { "alias": "swatches"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 /**
@@ -262,7 +267,7 @@ declare class WrColorPicker implements ControlValueAccessor {
  * </button>
  * ```
  *
- * @see https://ngwr.dev/components/color-picker
+ * @see https://ngwr.dev/reference/components/color-picker
  */
 declare class WrColorPickerTrigger {
     /** Two-way bindable colour value (hex string). */

package/types/ngwr-command-palette.d.ts

@@ -53,7 +53,7 @@ interface Bucket {
  * <wr-command-palette [items]="commands" trigger="mod+k" (picked)="onPicked($event)" />
  * ```
  *
- * @see https://ngwr.dev/components/command-palette
+ * @see https://ngwr.dev/reference/components/command-palette
  */
 declare class WrCommandPalette {
     /** Items shown in the palette. */

package/types/ngwr-compare.d.ts

@@ -19,7 +19,7 @@ import * as _angular_core from '@angular/core';
  * </wr-compare>
  * ```
  *
- * @see https://ngwr.dev/components/compare
+ * @see https://ngwr.dev/reference/components/compare
  */
 declare class WrCompare {
     /** Divider position as a percentage (0–100). Two-way bindable. @default 50 */

package/types/ngwr-context-menu.d.ts

@@ -37,7 +37,7 @@ declare class WrContextMenuPanel {
  * </wr-context-menu>
  * ```
  *
- * @see https://ngwr.dev/components/context-menu
+ * @see https://ngwr.dev/reference/components/context-menu
  */
 declare class WrContextMenu {
     /** Menu to open. Pass a `<wr-context-menu>` template reference. */
@@ -50,6 +50,13 @@ declare class WrContextMenu {
     private overlayRef;
     private closingTimer;
     private leaveTimer;
+    private pressTimer;
+    private pressX;
+    private pressY;
+    private pressPageX;
+    private pressPageY;
+    private lastLongPressAt;
+    private cancelPressScroll;
     /**
      * Single open root menu at a time. Submenu items use this to signal
      * chain-level hover state: when the cursor enters ANY pane in the
@@ -86,9 +93,26 @@ declare class WrContextMenu {
      * on a deliberate hover-out.
      */
     private static readonly LEAVE_DELAY;
+    /** Hold duration before a touch long-press opens the menu. */
+    private static readonly LONG_PRESS_MS;
+    /** Finger travel (px) that turns a pending long-press into a scroll/drag. */
+    private static readonly PRESS_MOVE_TOLERANCE;
     constructor();
     /** @internal Right-click handler — opens at the pointer (or re-positions if already open). */
     protected onContextMenu(event: MouseEvent): void;
+    /**
+     * @internal Touch/pen long-press → open the menu at the press point. Desktop
+     * right-click stays on `(contextmenu)`; this path is filtered to non-mouse
+     * pointers. Deliberately does NOT `preventDefault`/`setPointerCapture` or set
+     * `touch-action` — a press that turns into a scroll must still scroll, so the
+     * open is cancelled on movement (> tolerance), on scroll, and on early lift.
+     */
+    protected onPointerDown(event: PointerEvent): void;
+    /** @internal Finger moved too far before the hold fired — it's a scroll/drag. */
+    protected onPointerMove(event: PointerEvent): void;
+    /** @internal Lifted (or the browser claimed the gesture) before the hold fired. */
+    protected onPointerUp(): void;
+    private cancelPress;
     /** Close the menu. */
     close(): void;
     private openOverlay;

package/types/ngwr-cookie.d.ts

@@ -36,10 +36,16 @@ interface WrCookieOptions {
  * cookies.keys();                                                // readonly string[]
  * ```
  *
- * @see https://ngwr.dev/services/cookie
+ * @see https://ngwr.dev/reference/services/cookie
  */
 declare class WrCookie {
     private readonly doc;
+    /**
+     * `document.cookie`, or `''` when it cannot be read. Mirrors the guard on
+     * `set()`: under SSR the server DOM has no cookie support and throws on the
+     * getter, and sandboxed iframes reject access too.
+     */
+    private read;
     /** Is `key` present (regardless of value)? */
     has(key: string): boolean;
     /** Read `key`. Returns `fallback` (default `null`) when the key is missing. */

package/types/ngwr-counter.d.ts

@@ -46,7 +46,7 @@ type Cell = {
  * <wr-counter [value]="9.99" mode="tween" [decimals]="2" prefix="$" />
  * ```
  *
- * @see https://ngwr.dev/components/counter
+ * @see https://ngwr.dev/reference/components/counter
  */
 declare class WrCounter {
     /** Target value. */
@@ -71,6 +71,13 @@ declare class WrCounter {
     private rafId;
     /** Tween-mode formatted output. */
     protected readonly tweenText: _angular_core.Signal<string>;
+    /**
+     * Odometer-mode text for assistive tech and prerendered output. The strip
+     * renders every digit 0-9 per column and picks one with a transform, so its
+     * markup carries no usable text — screen readers would announce all ten, and
+     * static HTML would ship the same noise. This node holds the real value.
+     */
+    protected readonly odoText: _angular_core.Signal<string>;
     /** Odometer cells — one per character in the formatted target string. */
     protected readonly cells: _angular_core.Signal<readonly Cell[]>;
     constructor();
@@ -106,7 +113,7 @@ declare class WrCounter {
  * <wr-count-up [from]="60" [to]="0" direction="down" />
  * ```
  *
- * @see https://ngwr.dev/components/counter
+ * @see https://ngwr.dev/reference/components/counter
  */
 declare class WrCountUp {
     /** Starting value. @default 0 */

package/types/ngwr-date-picker.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { ElementRef } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { FormValueControl } from '@angular/forms/signals';
 import { WrDateFormat } from 'ngwr/date-adapter';
 
 /**
@@ -14,8 +14,11 @@ import { WrDateFormat } from 'ngwr/date-adapter';
  * - `'datetime'` — popover stacks calendar + time stepper. Picking a date
  *   does NOT close (the user typically wants to set the time next).
  *
- * Implements `ControlValueAccessor` — bind via `[(ngModel)]`, `[formControl]`,
- * or `formControlName`. Value type is `Date | null` for every mode.
+ * A signal-forms native control: it implements `FormValueControl<Date | null>`,
+ * so `[formField]` binds straight to its `value` model — no
+ * `ControlValueAccessor` in between. `[(value)]` works standalone, and classic
+ * `[(ngModel)]` / reactive forms keep working through Angular's bridge. Value
+ * type is `Date | null` for every mode.
  *
  * Parses the input on every keystroke (silently — only emits when valid) and
  * re-formats canonical on blur. Format is driven by {@link WrDateAdapter}: it
@@ -27,19 +30,22 @@ import { WrDateFormat } from 'ngwr/date-adapter';
  *
  * @example
  * ```html
- * <!-- Date only -->
- * <wr-date-picker [(ngModel)]="picked" format="dd.MM.yyyy" [min]="minDate" />
+ * <!-- signal forms -->
+ * <wr-date-picker [formField]="form.picked" format="dd.MM.yyyy" [min]="minDate" />
+ *
+ * <!-- standalone two-way binding, date only -->
+ * <wr-date-picker [(value)]="picked" format="dd.MM.yyyy" [min]="minDate" />
  *
  * <!-- Time only -->
- * <wr-date-picker mode="time" [(ngModel)]="picked" timeFormat="24h" />
+ * <wr-date-picker mode="time" [(value)]="picked" timeFormat="24h" />
  *
  * <!-- Date + time -->
- * <wr-date-picker mode="datetime" [(ngModel)]="when" [showSeconds]="true" [step]="5" />
+ * <wr-date-picker mode="datetime" [(value)]="when" [showSeconds]="true" [step]="5" />
  * ```
  *
- * @see https://ngwr.dev/components/date-picker
+ * @see https://ngwr.dev/reference/components/date-picker
  */
-declare class WrDatePicker implements ControlValueAccessor {
+declare class WrDatePicker implements FormValueControl<Date | null> {
     /** Picker behavior — see class doc. @default 'date' */
     readonly mode: _angular_core.InputSignal<"time" | "date" | "datetime">;
     /**
@@ -51,9 +57,9 @@ declare class WrDatePicker implements ControlValueAccessor {
     /** Placeholder shown when the input is empty. */
     readonly placeholder: _angular_core.InputSignal<string>;
     /** Min selectable date (forwarded to the calendar). Ignored in `time` mode. */
-    readonly min: _angular_core.InputSignal<Date | null>;
+    readonly min: _angular_core.InputSignal<Date | undefined>;
     /** Max selectable date (forwarded to the calendar). Ignored in `time` mode. */
-    readonly max: _angular_core.InputSignal<Date | null>;
+    readonly max: _angular_core.InputSignal<Date | undefined>;
     /** Predicate to disable specific dates (forwarded to the calendar). Ignored in `time` mode. */
     readonly dateFilter: _angular_core.InputSignal<((date: Date) => boolean) | null>;
     /** Time-panel 12 / 24-hour format. Applies in `time` + `datetime` modes. @default 'auto' */
@@ -62,7 +68,12 @@ declare class WrDatePicker implements ControlValueAccessor {
     readonly showSeconds: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Minute / second step for the time panel. @default 1 */
     readonly step: _angular_core.InputSignalWithTransform<number, unknown>;
-    /** Disable interaction. @default false */
+    /**
+     * Disable interaction. Bound automatically from the field's disabled state
+     * when used with `[formField]`.
+     *
+     * @default false
+     */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Read-only — input not typeable, but the trigger icon still opens the overlay. @default false */
     readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
@@ -72,12 +83,12 @@ declare class WrDatePicker implements ControlValueAccessor {
     private readonly host;
     private readonly destroyRef;
     protected readonly inputEl: _angular_core.Signal<ElementRef<HTMLInputElement>>;
-    /** The picked Date. Mirrored from the CVA. */
-    protected readonly value: _angular_core.WritableSignal<Date | null>;
+    /** The picked Date. Bound by `[formField]`, or two-way via `[(value)]`. */
+    readonly value: _angular_core.ModelSignal<Date | null>;
+    /** Emitted on blur so a bound field can mark itself touched. */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
     /** Text currently in the input (may be partial / invalid mid-type). */
     protected readonly text: _angular_core.WritableSignal<string>;
-    private readonly disabledFromCva;
-    protected readonly effectiveDisabled: _angular_core.Signal<boolean>;
     /** Whether the popover is currently open. */
     protected readonly overlayOpen: _angular_core.WritableSignal<boolean>;
     /** Resolved format — falls back to a mode-appropriate default. */
@@ -93,13 +104,11 @@ declare class WrDatePicker implements ControlValueAccessor {
     /** Live calendar ref while the date popover is open — lets the panel track
      * the typed value in real time (not just on reopen). */
     private readonly dateRef;
+    /** Last value we pushed into the model ourselves — lets the sync effect
+     * skip the echo of our own edits (so a live keystroke's raw text is never
+     * reformatted mid-type). */
+    private lastValue;
     constructor();
-    private onChange;
-    private onTouched;
-    writeValue(value: Date | null): void;
-    registerOnChange(fn: (value: Date | null) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
     protected onInput(event: Event): void;
     protected onBlur(): void;
     /** Called by the input's click — opens the overlay if it isn't open already. */
@@ -110,11 +119,15 @@ declare class WrDatePicker implements ControlValueAccessor {
     private attachTime;
     private attachDateTime;
     private commit;
+    /** Push a value to the model while remembering it, so the sync effect treats
+     * the resulting change as an echo and leaves the display text alone. */
+    private commitValue;
     private closeOverlay;
     private dispose;
     private isOutOfBounds;
+    private sameDate;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrDatePicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrDatePicker, "wr-date-picker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrDatePicker, "wr-date-picker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrDatePicker };

package/types/ngwr-density.d.ts

@@ -40,7 +40,7 @@ declare const WR_DENSITY_CONFIG: InjectionToken<WrDensityConfig>;
  * density.current();   // 'sm'
  * ```
  *
- * @see https://ngwr.dev/services/density
+ * @see https://ngwr.dev/reference/services/density
  */
 declare class WrDensity {
     private readonly doc;

package/types/ngwr-descriptions.d.ts

@@ -14,7 +14,7 @@ import * as _angular_core from '@angular/core';
  * </wr-descriptions>
  * ```
  *
- * @see https://ngwr.dev/components/descriptions
+ * @see https://ngwr.dev/reference/components/descriptions
  */
 declare class WrDescriptions {
     /** Optional title shown above the list. */

package/types/ngwr-dialog.d.ts

@@ -94,7 +94,7 @@ interface WrDialogOptions<D = unknown> {
  * if (ok) remove();
  * ```
  *
- * @see https://ngwr.dev/components/dialog
+ * @see https://ngwr.dev/reference/components/dialog
  */
 declare class WrDialog {
     private readonly overlay;

package/types/ngwr-directives.d.ts

@@ -32,6 +32,7 @@ declare class WrAutosize {
     readonly minRows: i0.InputSignalWithTransform<number, unknown>;
     readonly maxRows: i0.InputSignalWithTransform<number, unknown>;
     private readonly el;
+    private readonly isBrowser;
     private lastValue;
     constructor();
     /** @internal */

package/types/ngwr-divider.d.ts

@@ -35,7 +35,7 @@ type WrDividerType = 'solid' | 'dashed' | 'dotted';
  * <wr-divider align="start">Section</wr-divider>
  * ```
  *
- * @see https://ngwr.dev/components/divider
+ * @see https://ngwr.dev/reference/components/divider
  */
 declare class WrDivider {
     /**
@@ -43,7 +43,7 @@ declare class WrDivider {
      *
      * @default null
      */
-    readonly color: _angular_core.InputSignal<"primary" | "secondary" | "success" | "warning" | "danger" | "light" | "medium" | "dark" | null>;
+    readonly color: _angular_core.InputSignal<"primary" | "secondary" | "success" | "warning" | "danger" | "info" | "light" | "medium" | "dark" | null>;
     /**
      * Line style.
      *

package/types/ngwr-donut-chart.d.ts

@@ -18,7 +18,7 @@ interface WrDonutSegment {
  * ]" centerLabel="Disk" centerValue="60%" />
  * ```
  *
- * @see https://ngwr.dev/components/donut-chart
+ * @see https://ngwr.dev/reference/components/donut-chart
  */
 declare class WrDonutChart {
     readonly segments: _angular_core.InputSignal<readonly WrDonutSegment[]>;

package/types/ngwr-drag-drop.d.ts

@@ -36,7 +36,7 @@ interface WrSortableReorderEvent<T> {
  * </wr-sortable-list>
  * ```
  *
- * @see https://ngwr.dev/components/drag-drop
+ * @see https://ngwr.dev/reference/components/drag-drop
  */
 declare class WrSortableList<T = unknown> {
     /** Items to render. Two-way — emits the reordered array on drop. */