ngwr 8.0.0 → 9.0.1

package/types/ngwr-drawer.d.ts

@@ -28,7 +28,7 @@ type WrDrawerPosition = 'left' | 'right' | 'top' | 'bottom';
  * </wr-drawer>
  * ```
  *
- * @see https://ngwr.dev/components/drawer
+ * @see https://ngwr.dev/reference/components/drawer
  */
 declare class WrDrawer {
     /** Two-way bindable open state. */

package/types/ngwr-dropdown.d.ts

@@ -17,7 +17,7 @@ import { BooleanInput } from '@angular/cdk/coercion';
  * </wr-dropdown-menu>
  * ```
  *
- * @see https://ngwr.dev/components/dropdown
+ * @see https://ngwr.dev/reference/components/dropdown
  */
 declare class WrDropdownMenu {
     /** The internal template the directive portals into the overlay. @internal */

package/types/ngwr-empty.d.ts

@@ -23,7 +23,7 @@ import * as _angular_core from '@angular/core';
  * </wr-empty>
  * ```
  *
- * @see https://ngwr.dev/components/empty
+ * @see https://ngwr.dev/reference/components/empty
  */
 declare class WrEmpty {
     /** Icon name shown above the title. @default 'folder' */

package/types/ngwr-file-upload.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';
 
 /**
  * @license
@@ -22,18 +22,24 @@ declare function formatBytes(bytes: number): string;
  * Drag-and-drop file upload zone. Click to browse, drag-and-drop to add,
  * with an optional file list + remove buttons.
  *
- * Implements `ControlValueAccessor` — value is `File | File[] | null`
- * (single or array, governed by `multiple`).
+ * A signal-forms native control: it implements
+ * `FormValueControl<File | readonly File[] | null>`, so `[formField]` binds
+ * straight to its `value` model — no `ControlValueAccessor` in between.
+ * `[(value)]` works standalone. The value shape follows `multiple`: a single
+ * `File` (or `null`), or a `File[]` array.
  *
  * @example
  * ```html
- * <wr-file-upload [(ngModel)]="files" [multiple]="true" accept="image/*" />
- * <wr-file-upload [(ngModel)]="avatar" accept=".png,.jpg" [maxSize]="2 * 1024 * 1024" />
+ * <!-- signal forms -->
+ * <wr-file-upload [formField]="form.files" [multiple]="true" accept="image/*" />
+ *
+ * <!-- standalone two-way binding -->
+ * <wr-file-upload [(value)]="avatar" accept=".png,.jpg" [maxSize]="2 * 1024 * 1024" />
  * ```
  *
- * @see https://ngwr.dev/components/file-upload
+ * @see https://ngwr.dev/reference/components/file-upload
  */
-declare class WrFileUpload implements ControlValueAccessor {
+declare class WrFileUpload implements FormValueControl<File | readonly File[] | null> {
     /** Allow multiple files. Single mode replaces on each add. @default false */
     readonly multiple: _angular_core.InputSignalWithTransform<boolean, any>;
     /** `accept` attribute — comma-separated MIME types or extensions. @default '' */
@@ -44,7 +50,12 @@ declare class WrFileUpload implements ControlValueAccessor {
     readonly maxFiles: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Render the picked-files list below the zone. @default true */
     readonly showList: _angular_core.InputSignalWithTransform<boolean, any>;
-    /** 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>;
     /** Primary call-to-action label. Falls back to `fileUpload.browse`. */
     readonly pickLabel: _angular_core.InputSignal<string | null>;
@@ -60,21 +71,21 @@ declare class WrFileUpload implements ControlValueAccessor {
     protected readonly resolvedRemove: _angular_core.Signal<string>;
     /** Optional helper text shown below the labels (e.g. accepted formats). */
     readonly helperText: _angular_core.InputSignal<string>;
+    /**
+     * Selected file(s). Bound by `[formField]`, or two-way via `[(value)]`. Shape
+     * follows `multiple`: a single `File` (or `null`), or a `File[]` array.
+     */
+    readonly value: _angular_core.ModelSignal<File | readonly File[] | null>;
     /** Emitted when files are rejected for type / size / count reasons. */
     readonly rejected: _angular_core.OutputEmitterRef<readonly WrFileUploadRejection[]>;
+    /** Emitted on commit so a bound field can mark itself touched. */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
     protected readonly picker: _angular_core.Signal<ElementRef<HTMLInputElement>>;
     protected readonly files: _angular_core.WritableSignal<readonly File[]>;
     protected readonly dragging: _angular_core.WritableSignal<boolean>;
-    private readonly disabledFromCva;
-    protected readonly effectiveDisabled: _angular_core.Signal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
     protected readonly formatBytes: typeof formatBytes;
-    private onChange;
-    private onTouched;
-    writeValue(value: File | readonly File[] | null): void;
-    registerOnChange(fn: (value: File | readonly File[] | null) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
+    constructor();
     protected openPicker(): void;
     protected onZoneKey(event: KeyboardEvent): void;
     protected onPickerChange(event: Event): void;
@@ -87,7 +98,7 @@ declare class WrFileUpload implements ControlValueAccessor {
     private reject;
     private emit;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrFileUpload, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrFileUpload, "wr-file-upload", never, { "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "showList": { "alias": "showList"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "pickLabel": { "alias": "pickLabel"; "required": false; "isSignal": true; }; "dropLabel": { "alias": "dropLabel"; "required": false; "isSignal": true; }; "dropZoneLabel": { "alias": "dropZoneLabel"; "required": false; "isSignal": true; }; "removeFileLabel": { "alias": "removeFileLabel"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; }, { "rejected": "rejected"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrFileUpload, "wr-file-upload", never, { "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "showList": { "alias": "showList"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "pickLabel": { "alias": "pickLabel"; "required": false; "isSignal": true; }; "dropLabel": { "alias": "dropLabel"; "required": false; "isSignal": true; }; "dropZoneLabel": { "alias": "dropZoneLabel"; "required": false; "isSignal": true; }; "removeFileLabel": { "alias": "removeFileLabel"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "rejected": "rejected"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrFileUpload };

package/types/ngwr-form.d.ts

@@ -17,7 +17,7 @@ import { NgControl } from '@angular/forms';
  * </wr-form-item>
  * ```
  *
- * @see https://ngwr.dev/components/form
+ * @see https://ngwr.dev/reference/components/form
  */
 declare class WrFormItem {
     /**
@@ -50,7 +50,7 @@ declare class WrFormItem {
  * </wr-form-field>
  * ```
  *
- * @see https://ngwr.dev/components/form-field
+ * @see https://ngwr.dev/reference/components/form-field
  */
 declare class WrFormField {
     /** Label text shown above the control. */

package/types/ngwr-gauge.d.ts

@@ -10,7 +10,7 @@ import * as _angular_core from '@angular/core';
  * <wr-gauge [value]="9.5" [min]="0" [max]="10" suffix="/10" valueColor="var(--wr-color-warning)" />
  * ```
  *
- * @see https://ngwr.dev/components/gauge
+ * @see https://ngwr.dev/reference/components/gauge
  */
 declare class WrGauge {
     readonly value: _angular_core.InputSignal<number>;

package/types/ngwr-hotkey.d.ts

@@ -62,7 +62,7 @@ interface WrHotkeyOptions {
  * handle.unbind();
  * ```
  *
- * @see https://ngwr.dev/services/hotkey
+ * @see https://ngwr.dev/reference/services/hotkey
  */
 declare class WrHotkey {
     private readonly doc;

package/types/ngwr-i18n.d.ts

@@ -70,7 +70,7 @@ declare const WR_I18N_CONFIG: InjectionToken<WrI18nConfigResolved>;
  * effect(() => console.log(i18n.translate('hi')())); // re-runs on locale change
  * ```
  *
- * @see https://ngwr.dev/services/i18n
+ * @see https://ngwr.dev/reference/services/i18n
  */
 declare class WrI18n {
     private readonly config;

package/types/ngwr-icon-adapters-lucide.d.ts

@@ -29,8 +29,10 @@ type LucideIconNode = readonly (readonly [string, Record<string, string | number
 declare function lucide(name: string, children: LucideIconNode): WrIconDef;
 /**
  * Wrap a bag of Lucide icons in one shot. Keys become the registered
- * names (camelCase → kebab-case), values are the upstream IconNode
- * tuples. The shape mirrors how you'd write `provideWrIcons` anyway.
+ * names **verbatim** — exactly what you pass to `<wr-icon name>` — matching
+ * the singular `lucide()` helper and the other adapters. Kebab-case by
+ * convention, so quote multi-word keys (`'chevron-down'`). Values are the
+ * upstream IconNode tuples.
  *
  * Tree-shaking: every `Plus`, `Trash`, … import lives in *your* file
  * — ngwr ships only this wrapper, not the icon data. Unused icons in
@@ -43,7 +45,7 @@ declare function lucide(name: string, children: LucideIconNode): WrIconDef;
  *
  * bootstrapApplication(AppComponent, {
  *   providers: [
- *     provideWrIcons(lucideIcons({ plus: Plus, trash: Trash, chevronDown: ChevronDown })),
+ *     provideWrIcons(lucideIcons({ plus: Plus, trash: Trash, 'chevron-down': ChevronDown })),
  *   ],
  * });
  * ```

package/types/ngwr-icon.d.ts

@@ -12,7 +12,7 @@ import { Provider } from '@angular/core';
  * <wr-icon name="home" />
  * ```
  *
- * @see https://ngwr.dev/components/icon
+ * @see https://ngwr.dev/reference/components/icon
  */
 declare class WrIcon {
     readonly name: i0.InputSignal<string>;

package/types/ngwr-image-cropper.d.ts

@@ -42,7 +42,7 @@ interface RectPx {
  * />
  * ```
  *
- * @see https://ngwr.dev/components/image-cropper
+ * @see https://ngwr.dev/reference/components/image-cropper
  */
 declare class WrImageCropper {
     /** Image source — URL string, `File`, or `Blob`. */

package/types/ngwr-input-number.d.ts

@@ -1,10 +1,13 @@
 import * as _angular_core from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { FormValueControl } from '@angular/forms/signals';
 
 /**
  * Numeric input with locale-aware formatting + ▲▼ stepper buttons.
  *
- * Implements `ControlValueAccessor` — value type is `number | null`.
+ * A signal-forms native control: it implements `FormValueControl<number | null>`,
+ * so `[formField]` binds straight to its `value` model — no
+ * `ControlValueAccessor` in between. `[(value)]` works standalone.
+ *
  * Parses leniently while typing (allows partial input like `"1."` or `"-"`),
  * re-formats with grouping + fixed decimals on blur.
  *
@@ -13,17 +16,22 @@ import { ControlValueAccessor } from '@angular/forms';
  *
  * @example
  * ```html
- * <wr-input-number [(ngModel)]="qty" [min]="0" [max]="100" />
- * <wr-input-number [(ngModel)]="price" [decimals]="2" suffix="USD" />
+ * <!-- signal forms -->
+ * <wr-input-number [formField]="form.qty" [min]="0" [max]="100" />
+ *
+ * <!-- standalone two-way binding -->
+ * <wr-input-number [(value)]="price" [decimals]="2" suffix="USD" />
  * ```
  *
- * @see https://ngwr.dev/components/input-number
+ * @see https://ngwr.dev/reference/components/input-number
  */
-declare class WrInputNumber implements ControlValueAccessor {
+declare class WrInputNumber implements FormValueControl<number | null> {
     /** Minimum allowed value. @default -Infinity */
-    readonly min: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly min: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
     /** Maximum allowed value. @default Infinity */
-    readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly max: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    private readonly minValue;
+    private readonly maxValue;
     /** Step used by stepper buttons + arrow keys. @default 1 */
     readonly step: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Fixed number of decimals shown on blur. `null` keeps the entered precision. @default null */
@@ -40,25 +48,23 @@ declare class WrInputNumber implements ControlValueAccessor {
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Read-only — values cannot be changed (steppers + typing disabled). @default false */
     readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Numeric value (`null` when empty). Bound by `[formField]`, or two-way via `[(value)]`. */
+    readonly value: _angular_core.ModelSignal<number | null>;
+    /** Emitted on blur so a bound field can mark itself touched. */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
     private readonly locale;
     private readonly separators;
-    /** Current numeric value mirrored from the CVA. */
-    protected readonly value: _angular_core.WritableSignal<number | null>;
     /** 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 input is focused. While true, the input handlers own `text`. */
+    protected readonly focused: _angular_core.WritableSignal<boolean>;
     protected readonly interactive: _angular_core.Signal<boolean>;
     protected readonly atMin: _angular_core.Signal<boolean>;
     protected readonly atMax: _angular_core.Signal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
-    private onChange;
-    private onTouched;
-    writeValue(value: number | null): void;
-    registerOnChange(fn: (value: number | null) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
+    constructor();
     protected onInput(event: Event): void;
+    protected onFocus(): void;
     protected onBlur(): void;
     protected onKeydown(event: KeyboardEvent): void;
     protected stepBy(direction: 1 | -1): void;
@@ -71,7 +77,7 @@ declare class WrInputNumber implements ControlValueAccessor {
     /** Format a value using `Intl.NumberFormat` for the active locale. */
     private format;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrInputNumber, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrInputNumber, "wr-input-number", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "showSteppers": { "alias": "showSteppers"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "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<WrInputNumber, "wr-input-number", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "showSteppers": { "alias": "showSteppers"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "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 { WrInputNumber };

package/types/ngwr-input-otp.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';
 
 /**
  * @license
@@ -24,18 +24,23 @@ type WrInputOtpSize = 'sm' | 'md' | 'lg';
  * auto-advances focus on typing, handles paste of a full code, and supports
  * masking like a password field.
  *
- * Implements `ControlValueAccessor` — emits the joined string through
- * `[(ngModel)]` / `formControl`. Emits `completed` once all cells are
- * filled (useful for auto-submission).
+ * A signal-forms native control: it implements `FormValueControl<string>`, so
+ * `[formField]` binds straight to its `value` model — no
+ * `ControlValueAccessor` in between. `[(value)]` works standalone. Emits
+ * `completed` once all cells are filled (useful for auto-submission).
  *
  * @example
  * ```html
- * <wr-input-otp [(ngModel)]="code" length="6" (completed)="verify($event)" />
+ * <!-- signal forms -->
+ * <wr-input-otp [formField]="form.code" length="6" (completed)="verify($event)" />
+ *
+ * <!-- standalone two-way binding -->
+ * <wr-input-otp [(value)]="code" length="6" (completed)="verify($event)" />
  * ```
  *
- * @see https://ngwr.dev/components/input-otp
+ * @see https://ngwr.dev/reference/components/input-otp
  */
-declare class WrInputOtp implements ControlValueAccessor {
+declare class WrInputOtp implements FormValueControl<string> {
     /** Number of cells to render. Clamped to `[1, 20]`. @default 6 */
     readonly length: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Character set per cell. @default 'numeric' */
@@ -44,26 +49,27 @@ declare class WrInputOtp implements ControlValueAccessor {
     readonly size: _angular_core.InputSignal<WrInputOtpSize>;
     /** Mask the typed characters like a password. @default false */
     readonly mask: _angular_core.InputSignalWithTransform<boolean, any>;
-    /** 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>;
     /** Character shown in empty cells. @default '•' */
     readonly placeholder: _angular_core.InputSignal<string>;
+    /** The entered code. Bound by `[formField]`, or two-way via `[(value)]`. */
+    readonly value: _angular_core.ModelSignal<string>;
     /** Fires once when every cell holds a character. */
     readonly completed: _angular_core.OutputEmitterRef<string>;
+    /** Emitted on blur so a bound field can mark itself touched. */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
     protected readonly cells: _angular_core.WritableSignal<readonly string[]>;
-    private readonly disabledFromCva;
-    protected readonly effectiveDisabled: _angular_core.Signal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
     protected readonly cellType: _angular_core.Signal<"text" | "password">;
     protected readonly cellInputMode: _angular_core.Signal<"numeric" | "text">;
     protected readonly cellRefs: _angular_core.Signal<readonly ElementRef<HTMLInputElement>[]>;
     constructor();
-    private onChange;
-    private onTouched;
-    writeValue(v: string | null): void;
-    registerOnChange(fn: (value: string) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
     protected onInput(event: Event, index: number): void;
     protected onKeyDown(event: KeyboardEvent, index: number): void;
     protected onPaste(event: ClipboardEvent): void;
@@ -75,7 +81,7 @@ declare class WrInputOtp implements ControlValueAccessor {
     /** Drop a character that doesn't match the configured mode. */
     private sanitiseChar;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrInputOtp, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrInputOtp, "wr-input-otp", never, { "length": { "alias": "length"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "completed": "completed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrInputOtp, "wr-input-otp", never, { "length": { "alias": "length"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrInputOtp };

package/types/ngwr-input.d.ts

@@ -39,7 +39,7 @@ type WrInputSize = 'sm' | 'md' | 'lg';
  * For prefix / suffix / password-toggle layouts, wrap the input in
  * `<wr-input-group>`.
  *
- * @see https://ngwr.dev/components/input
+ * @see https://ngwr.dev/reference/components/input
  */
 declare class WrInput {
     /**
@@ -108,7 +108,7 @@ declare class WrInputSuffix {
  * </wr-input-group>
  * ```
  *
- * @see https://ngwr.dev/components/input
+ * @see https://ngwr.dev/reference/components/input
  */
 declare class WrInputGroup {
     /** Pill-shaped corners. @default false */

package/types/ngwr-keyboard.d.ts

@@ -20,7 +20,7 @@ type WrKbdSize = 'sm' | 'md' | 'lg';
  * <wr-kbd size="lg">Esc</wr-kbd>
  * ```
  *
- * @see https://ngwr.dev/components/keyboard
+ * @see https://ngwr.dev/reference/components/keyboard
  */
 declare class WrKbd {
     /** Visual size variant. @default 'md' */

package/types/ngwr-knob.d.ts

@@ -1,23 +1,32 @@
 import * as _angular_core from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { FormValueControl } from '@angular/forms/signals';
 
 /**
- * Radial dial input. CVA-backed `number | null` value clamped to
- * `[min, max]`. Drag the indicator around the dial or use ←→ / ↑↓ to step.
+ * Radial dial input. A signal-forms native control: it implements
+ * `FormValueControl<number>`, so `[formField]` binds straight to its `value`
+ * model — no `ControlValueAccessor` in between. `[(value)]` works standalone.
+ *
+ * The value is clamped to `[min, max]`. Drag the indicator around the dial or
+ * use ←→ / ↑↓ to step.
  *
  * @example
  * ```html
- * <wr-knob [(ngModel)]="value" [min]="0" [max]="100" />
- * <wr-knob [(ngModel)]="vol" suffix="%" valueColor="var(--wr-color-success)" />
+ * <!-- signal forms -->
+ * <wr-knob [formField]="form.volume" [min]="0" [max]="100" />
+ *
+ * <!-- standalone two-way binding -->
+ * <wr-knob [(value)]="vol" suffix="%" valueColor="var(--wr-color-success)" />
  * ```
  *
- * @see https://ngwr.dev/components/knob
+ * @see https://ngwr.dev/reference/components/knob
  */
-declare class WrKnob implements ControlValueAccessor {
+declare class WrKnob implements FormValueControl<number> {
     /** Minimum allowed value. @default 0 */
-    readonly min: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly min: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
     /** Maximum allowed value. @default 100 */
-    readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly max: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    private readonly minValue;
+    private readonly maxValue;
     /** Step granularity. @default 1 */
     readonly step: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Dial diameter in CSS pixels. @default 120 */
@@ -36,10 +45,11 @@ declare class WrKnob implements ControlValueAccessor {
     readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Disable interaction. @default false */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
-    protected readonly value: _angular_core.WritableSignal<number>;
-    private readonly disabledFromCva;
+    /** Bound by `[formField]`, or two-way via `[(value)]`. */
+    readonly value: _angular_core.ModelSignal<number>;
+    /** Emitted on blur so a bound field can mark itself touched. */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
     private dragging;
-    protected readonly effectiveDisabled: _angular_core.Signal<boolean>;
     protected readonly interactive: _angular_core.Signal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
     protected readonly cx = 50;
@@ -57,12 +67,7 @@ declare class WrKnob implements ControlValueAccessor {
         y: number;
     }>;
     private readonly host;
-    private onChange;
-    private onTouched;
-    writeValue(value: number | null): void;
-    registerOnChange(fn: (value: number | null) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
+    constructor();
     protected onPointerDown(event: PointerEvent): void;
     protected onPointerMove(event: PointerEvent): void;
     protected onPointerUp(event: PointerEvent): void;
@@ -71,7 +76,7 @@ declare class WrKnob implements ControlValueAccessor {
     private commit;
     private arcPath;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrKnob, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrKnob, "wr-knob", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "trackColor": { "alias": "trackColor"; "required": false; "isSignal": true; }; "valueColor": { "alias": "valueColor"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrKnob, "wr-knob", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "trackColor": { "alias": "trackColor"; "required": false; "isSignal": true; }; "valueColor": { "alias": "valueColor"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrKnob };

package/types/ngwr-layout.d.ts

@@ -50,7 +50,7 @@ declare class WrLayoutSider {
  * </wr-layout>
  * ```
  *
- * @see https://ngwr.dev/components/layout
+ * @see https://ngwr.dev/reference/components/layout
  */
 declare class WrLayout {
     protected readonly siders: i0.Signal<readonly WrLayoutSider[]>;

package/types/ngwr-lightbox.d.ts

@@ -16,7 +16,7 @@ import { TemplateRef } from '@angular/core';
  * />
  * ```
  *
- * @see https://ngwr.dev/components/lightbox
+ * @see https://ngwr.dev/reference/components/lightbox
  */
 declare class WrLightbox {
     /** Image source. */

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

@@ -21,7 +21,7 @@ interface WrLineSeries {
  * />
  * ```
  *
- * @see https://ngwr.dev/components/line-chart
+ * @see https://ngwr.dev/reference/components/line-chart
  */
 declare class WrLineChart {
     readonly series: _angular_core.InputSignal<readonly WrLineSeries[]>;

package/types/ngwr-list.d.ts

@@ -20,7 +20,7 @@ import * as _angular_core from '@angular/core';
  * </wr-list>
  * ```
  *
- * @see https://ngwr.dev/components/list
+ * @see https://ngwr.dev/reference/components/list
  */
 declare class WrList {
     /** Wrap the list in a card-style border + radius. @default false */

package/types/ngwr-loading-bar.d.ts

@@ -26,7 +26,7 @@ type WrLoadingState = 'idle' | 'running' | 'completing';
  * return next(req).pipe(finalize(() => bar.complete()));
  * ```
  *
- * @see https://ngwr.dev/services/loading-bar
+ * @see https://ngwr.dev/reference/services/loading-bar
  */
 declare class WrLoadingBar {
     private readonly router;

package/types/ngwr-marquee.d.ts

@@ -57,7 +57,7 @@ declare class WrMarquee {
     /** Pause the loop on hover. @default false */
     readonly pauseOnHover: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Custom speed (px/s) when hovered. Overrides `pauseOnHover`. */
-    readonly hoverSpeed: _angular_core.InputSignalWithTransform<number | undefined, number | undefined>;
+    readonly hoverSpeed: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
     /** Apply edge fade-out gradients. @default false */
     readonly fadeOut: _angular_core.InputSignalWithTransform<boolean, any>;
     /** CSS colour for the fade-out gradient. Defaults to the page background. */

package/types/ngwr-media.d.ts

@@ -26,7 +26,7 @@ declare const WR_BREAKPOINTS: InjectionToken<Readonly<Record<ngwr_media.WrBreakp
  * protected readonly isWide = this.media.matches('(min-width: 1200px)');
  * ```
  *
- * @see https://ngwr.dev/services/media
+ * @see https://ngwr.dev/reference/services/media
  */
 declare class WrMedia {
     private readonly breakpoints;

package/types/ngwr-mention.d.ts

@@ -38,7 +38,7 @@ interface WrMentionCommit<T extends WrMentionItem = WrMentionItem> {
  * ></textarea>
  * ```
  *
- * @see https://ngwr.dev/components/mention
+ * @see https://ngwr.dev/reference/components/mention
  */
 declare class WrMention<T extends WrMentionItem = WrMentionItem> {
     /** Items to filter against the typed query. */

package/types/ngwr-meta.d.ts

@@ -66,7 +66,7 @@ interface WrMetaHandle {
  * <div [wrMeta]="{ title: 'Pricing' }">
  * ```
  *
- * @see https://ngwr.dev/services/meta
+ * @see https://ngwr.dev/reference/services/meta
  */
 declare class WrMeta {
     private readonly title;

package/types/ngwr-meter-group.d.ts

@@ -32,7 +32,7 @@ interface WrMeterSegment {
  * />
  * ```
  *
- * @see https://ngwr.dev/components/meter-group
+ * @see https://ngwr.dev/reference/components/meter-group
  */
 declare class WrMeterGroup {
     readonly segments: _angular_core.InputSignal<readonly WrMeterSegment[]>;

package/types/ngwr-page-header.d.ts

@@ -21,7 +21,7 @@ import * as _angular_core from '@angular/core';
  * </wr-page-header>
  * ```
  *
- * @see https://ngwr.dev/components/page-header
+ * @see https://ngwr.dev/reference/components/page-header
  */
 declare class WrPageHeader {
     /** Primary title shown as an h1. */