ngwr 7.3.0 → 9.0.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. */
@@ -90,13 +101,14 @@ declare class WrDatePicker implements ControlValueAccessor {
     protected readonly triggerLabel: _angular_core.Signal<string>;
     protected readonly classes: _angular_core.Signal<string>;
     private overlayRef;
+    /** 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. */
@@ -107,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

@@ -2,10 +2,10 @@ import * as i0 from '@angular/core';
 import { InjectionToken, Signal, EnvironmentProviders } from '@angular/core';
 
 /** Density scale. Components multiply their paddings by the matching multiplier. */
-type WrDensityValue = 'compact' | 'default' | 'comfortable' | 'touch';
+type WrDensityValue = 'sm' | 'md' | 'lg' | 'touch';
 /** Configuration for {@link WrDensityValueService}. */
 interface WrDensityConfig {
-    /** Initial density used when no persisted value is present. @default 'default' */
+    /** Initial density used when no persisted value is present. @default 'md' */
     readonly defaultDensity: WrDensityValue;
     /** Storage key for persistence (via `WrStorage`). Set to `null` to disable. @default 'wr-density' */
     readonly storageKey: string | null;
@@ -36,11 +36,11 @@ declare const WR_DENSITY_CONFIG: InjectionToken<WrDensityConfig>;
  * @example
  * ```ts
  * const density = inject(WrDensity);
- * density.set('compact');
- * density.current();   // 'compact'
+ * density.set('sm');
+ * density.current();   // 'sm'
  * ```
  *
- * @see https://ngwr.dev/services/density
+ * @see https://ngwr.dev/reference/services/density
  */
 declare class WrDensity {
     private readonly doc;
@@ -52,7 +52,7 @@ declare class WrDensity {
     constructor();
     /** Switch the active density. Ignores unknown values. */
     set(density: WrDensityValue): void;
-    /** Cycle compact → default → comfortable → touch → compact … */
+    /** Cycle sm → md → lg → touch → sm … */
     cycle(): void;
     private readPersisted;
     private persist;
@@ -67,8 +67,8 @@ declare class WrDensity {
  *
  * @example
  * ```html
- * <!-- The whole sidebar is compact, the rest of the app keeps its global density. -->
- * <aside wrDensity="compact">
+ * <!-- The whole sidebar is sm, the rest of the app keeps its global density. -->
+ * <aside wrDensity="sm">
  *   <wr-list ...></wr-list>
  * </aside>
  * ```

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

@@ -1,4 +1,4 @@
-import * as _angular_core from '@angular/core';
+import * as i0 from '@angular/core';
 
 /**
  * Focus the host element after the first render — or whenever the bound
@@ -12,11 +12,11 @@ import * as _angular_core from '@angular/core';
  */
 declare class WrAutofocus {
     /** Truthy = focus. Defaults to `true` so bare `wrAutofocus` works. */
-    readonly wrAutofocus: _angular_core.InputSignalWithTransform<boolean, any>;
+    readonly wrAutofocus: i0.InputSignalWithTransform<boolean, any>;
     private readonly el;
     constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrAutofocus, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrAutofocus, "[wrAutofocus]", never, { "wrAutofocus": { "alias": "wrAutofocus"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrAutofocus, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrAutofocus, "[wrAutofocus]", never, { "wrAutofocus": { "alias": "wrAutofocus"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -29,17 +29,18 @@ declare class WrAutofocus {
  * ```
  */
 declare class WrAutosize {
-    readonly minRows: _angular_core.InputSignalWithTransform<number, unknown>;
-    readonly maxRows: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly minRows: i0.InputSignalWithTransform<number, unknown>;
+    readonly maxRows: i0.InputSignalWithTransform<number, unknown>;
     private readonly el;
+    private readonly isBrowser;
     private lastValue;
     constructor();
     /** @internal */
     protected onInput(): void;
     /** Recompute height from `scrollHeight`, clamped to min/max rows. */
     private resize;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrAutosize, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrAutosize, "textarea[wrAutosize]", never, { "minRows": { "alias": "minRows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrAutosize, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrAutosize, "textarea[wrAutosize]", never, { "minRows": { "alias": "minRows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -52,14 +53,14 @@ declare class WrAutosize {
  * ```
  */
 declare class WrClickOutside {
-    readonly wrClickOutside: _angular_core.OutputEmitterRef<MouseEvent>;
+    readonly wrClickOutside: i0.OutputEmitterRef<MouseEvent>;
     private readonly host;
     private readonly doc;
     private readonly zone;
     private readonly destroyRef;
     constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrClickOutside, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrClickOutside, "[wrClickOutside]", never, {}, { "wrClickOutside": "wrClickOutside"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrClickOutside, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrClickOutside, "[wrClickOutside]", never, {}, { "wrClickOutside": "wrClickOutside"; }, never, never, true, never>;
 }
 
 /**
@@ -76,50 +77,18 @@ declare class WrClickOutside {
  */
 declare class WrCopyToClipboard {
     /** The text to copy. */
-    readonly wrCopyToClipboard: _angular_core.InputSignal<string>;
+    readonly wrCopyToClipboard: i0.InputSignal<string>;
     /** Emitted with the copied text once the write succeeds. */
-    readonly copied: _angular_core.OutputEmitterRef<string>;
+    readonly copied: i0.OutputEmitterRef<string>;
     /** Emitted if the copy fails (denied permission, no clipboard, …). */
-    readonly copyFailed: _angular_core.OutputEmitterRef<unknown>;
+    readonly copyFailed: i0.OutputEmitterRef<unknown>;
     private readonly doc;
     /** @internal */
     protected onClick(): Promise<void>;
     /** Legacy clipboard write — hidden textarea + execCommand('copy'). */
     private fallback;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCopyToClipboard, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrCopyToClipboard, "[wrCopyToClipboard]", never, { "wrCopyToClipboard": { "alias": "wrCopyToClipboard"; "required": true; "isSignal": true; }; }, { "copied": "copied"; "copyFailed": "copyFailed"; }, never, never, true, never>;
-}
-
-/**
- * Reveal-on-scroll directive. Adds the `wr-reveal` host class
- * immediately and flips it to `wr-reveal--visible` once the element
- * enters the viewport — pair with the `.wr-reveal` styles in
- * `ngwr/animations` for a fade-and-slide-up enter.
- *
- * SSR-safe: on the server, the host renders in the visible state so
- * the page isn't blank.
- *
- * @example
- * ```html
- * <h2 wrReveal>Animates in once visible</h2>
- * <div wrReveal threshold="0.5" rootMargin="-100px 0px">…</div>
- * <p wrReveal [once]="false">Re-runs every time it enters the viewport</p>
- * ```
- */
-declare class WrReveal {
-    /** Visibility threshold passed to IntersectionObserver. @default 0.1 */
-    readonly threshold: _angular_core.InputSignalWithTransform<number, unknown>;
-    /** `rootMargin` passed to IntersectionObserver. @default '0px' */
-    readonly rootMargin: _angular_core.InputSignal<string>;
-    /** Stop observing after the first reveal. @default true */
-    readonly once: _angular_core.InputSignalWithTransform<boolean, any>;
-    protected readonly visible: _angular_core.WritableSignal<boolean>;
-    private readonly el;
-    private readonly destroyRef;
-    private readonly isBrowser;
-    constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrReveal, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrReveal, "[wrReveal]", never, { "threshold": { "alias": "threshold"; "required": false; "isSignal": true; }; "rootMargin": { "alias": "rootMargin"; "required": false; "isSignal": true; }; "once": { "alias": "once"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrCopyToClipboard, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrCopyToClipboard, "[wrCopyToClipboard]", never, { "wrCopyToClipboard": { "alias": "wrCopyToClipboard"; "required": true; "isSignal": true; }; }, { "copied": "copied"; "copyFailed": "copyFailed"; }, never, never, true, never>;
 }
 
-export { WrAutofocus, WrAutosize, WrClickOutside, WrCopyToClipboard, WrReveal };
+export { WrAutofocus, WrAutosize, WrClickOutside, WrCopyToClipboard };

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. */

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-fuzzy-text.d.ts

@@ -31,7 +31,7 @@ declare class WrFuzzyText {
     readonly fontWeight: _angular_core.InputSignal<string | number>;
     /** Font family. `'inherit'` reads the canvas's computed style. @default 'inherit' */
     readonly fontFamily: _angular_core.InputSignal<string>;
-    /** Text colour. Ignored if `[gradient]` is set. @default '#fff' */
+    /** Text colour. `'inherit'` reads the canvas's computed style. Ignored if `[gradient]` is set. @default 'inherit' */
     readonly color: _angular_core.InputSignal<string>;
     /** Optional horizontal gradient stops. */
     readonly gradient: _angular_core.InputSignal<readonly string[] | null>;

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-glitch-text.d.ts

@@ -22,10 +22,16 @@ declare class WrGlitchText {
     readonly enableShadows: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Only glitch on hover (idle until then). @default true */
     readonly enableOnHover: _angular_core.InputSignalWithTransform<boolean, any>;
-    protected readonly beforeShadow: _angular_core.Signal<"5px 0 cyan" | "none">;
-    protected readonly afterShadow: _angular_core.Signal<"none" | "-5px 0 red">;
+    /**
+     * Surface colour for the clone slices. Pass the colour of the surface the
+     * component sits on so the slicing illusion masks cleanly; leave unset
+     * (transparent) on the page canvas. @default '' (transparent)
+     */
+    readonly background: _angular_core.InputSignal<string>;
+    protected readonly beforeShadow: _angular_core.Signal<"5px 0 var(--wr-color-info)" | "none">;
+    protected readonly afterShadow: _angular_core.Signal<"none" | "-5px 0 var(--wr-color-danger)">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrGlitchText, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrGlitchText, "wr-glitch-text", never, { "text": { "alias": "text"; "required": true; "isSignal": true; }; "speed": { "alias": "speed"; "required": false; "isSignal": true; }; "enableShadows": { "alias": "enableShadows"; "required": false; "isSignal": true; }; "enableOnHover": { "alias": "enableOnHover"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrGlitchText, "wr-glitch-text", never, { "text": { "alias": "text"; "required": true; "isSignal": true; }; "speed": { "alias": "speed"; "required": false; "isSignal": true; }; "enableShadows": { "alias": "enableShadows"; "required": false; "isSignal": true; }; "enableOnHover": { "alias": "enableOnHover"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrGlitchText };

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`. */