ngwr 7.3.0 → 9.0.0

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
@@ -17,49 +17,59 @@ import { ControlValueAccessor } from '@angular/forms';
  */
 type WrInputOtpMode = 'numeric' | 'alphanumeric' | 'text';
 
+type WrInputOtpSize = 'sm' | 'md' | 'lg';
+
 /**
  * Fixed-length one-time-code input. Renders one `<input>` per character,
  * 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' */
     readonly mode: _angular_core.InputSignal<WrInputOtpMode>;
+    /** Control size — shares the `--wr-control-*` contract. @default 'md' */
+    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;
@@ -71,8 +81,8 @@ 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; }; "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 };
-export type { WrInputOtpMode };
+export type { WrInputOtpMode, WrInputOtpSize };

package/types/ngwr-input.d.ts

@@ -1,5 +1,25 @@
 import * as i0 from '@angular/core';
 
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Native input `type` values supported by `<wr-input>`.
+ */
+type WrInputType = 'text' | 'number' | 'password' | 'email' | 'search' | 'tel' | 'url';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/** Control size for `[wrInput]` — shares the `--wr-control-*` contract. */
+type WrInputSize = 'sm' | 'md' | 'lg';
+
 /**
  * Applies NGWR input styling to a native `<input>` element.
  *
@@ -19,14 +39,19 @@ import * as i0 from '@angular/core';
  * 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 {
+    /**
+     * Control size. Named `wrSize` (not `size`) so it never clashes with the
+     * native `<input size>` attribute. @default 'md'
+     */
+    readonly wrSize: i0.InputSignal<WrInputSize>;
     /** Pill-shaped corners. @default false */
     readonly rounded: i0.InputSignalWithTransform<boolean, any>;
     protected readonly classes: i0.Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrInput, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<WrInput, "input[wrInput], textarea[wrInput]", never, { "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrInput, "input[wrInput], textarea[wrInput]", never, { "wrSize": { "alias": "wrSize"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -83,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 */
@@ -116,16 +141,5 @@ declare class WrPasswordToggle {
     static ɵcmp: i0.ɵɵComponentDeclaration<WrPasswordToggle, "wr-password-toggle", never, { "for": { "alias": "for"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/**
- * @license
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
- */
-/**
- * Native input `type` values supported by `<wr-input>`.
- */
-type WrInputType = 'text' | 'number' | 'password' | 'email' | 'search' | 'tel' | 'url';
-
 export { WrInput, WrInputGroup, WrInputPrefix, WrInputSuffix, WrPasswordToggle };
-export type { WrInputType };
+export type { WrInputSize, WrInputType };

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. */
@@ -29,6 +29,14 @@ declare class WrLightbox {
     readonly disablePreview: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Caption shown under the full image in the lightbox. */
     readonly caption: _angular_core.InputSignal<string>;
+    /**
+     * Reserve space before the image resolves by fixing the thumbnail's
+     * `aspect-ratio` (e.g. `'16 / 9'`, `'4 / 3'`, or a number like `1.5`).
+     * Prevents the layout jump when the intrinsic image size isn't known up
+     * front — pair it with a `width` and the box keeps its height from first
+     * paint. @default null
+     */
+    readonly aspectRatio: _angular_core.InputSignal<string | number | null>;
     protected readonly open: _angular_core.WritableSignal<boolean>;
     protected readonly loaded: _angular_core.WritableSignal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
@@ -49,7 +57,7 @@ declare class WrLightbox {
     private openOverlay;
     private closeOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrLightbox, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrLightbox, "wr-lightbox", never, { "src": { "alias": "src"; "required": true; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "preview": { "alias": "preview"; "required": false; "isSignal": true; }; "disablePreview": { "alias": "disablePreview"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrLightbox, "wr-lightbox", never, { "src": { "alias": "src"; "required": true; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "preview": { "alias": "preview"; "required": false; "isSignal": true; }; "disablePreview": { "alias": "disablePreview"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrLightbox };

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

package/types/ngwr-pagination.d.ts

@@ -1,5 +1,4 @@
 import * as _angular_core from '@angular/core';
-import { WrButtonSize } from 'ngwr/button';
 
 /**
  * @license
@@ -33,12 +32,9 @@ type WrPaginationShape = 'rounded' | 'square';
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 /**
- * Size variant. The middle three (`sm` / `md` / `lg`) cascade the
- * matching `<wr-btn>` size directly; `xs` and `xl` reuse the closest
- * button size and overlay tighter / chunkier padding + font tokens so
- * the cells read smaller / bigger than the button's own scale.
+ * Size variant. Cascades the matching `<wr-btn>` size to every cell.
  */
-type WrPaginationSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type WrPaginationSize = 'sm' | 'md' | 'lg';
 
 declare const ELLIPSIS: "\u2026";
 type PageEntry = number | typeof ELLIPSIS;
@@ -58,7 +54,7 @@ type PageEntry = number | typeof ELLIPSIS;
  * />
  * ```
  *
- * @see https://ngwr.dev/components/pagination
+ * @see https://ngwr.dev/reference/components/pagination
  */
 declare class WrPagination {
     /** Currently displayed page (1-based). Two-way bindable. */
@@ -75,10 +71,8 @@ declare class WrPagination {
     readonly showTotal: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Horizontal alignment. @default 'start' */
     readonly align: _angular_core.InputSignal<WrPaginationAlign>;
-    /** Size variant — cascades to every internal button. @default 'md' */
+    /** Size variant — cascades to every internal button. @default 'sm' */
     readonly size: _angular_core.InputSignal<WrPaginationSize>;
-    /** Resolved button size — clamps xs/xl to the closest button size. @internal */
-    protected readonly buttonSize: _angular_core.Signal<WrButtonSize>;
     /** Cell corner treatment. @default 'rounded' */
     readonly shape: _angular_core.InputSignal<WrPaginationShape>;
     /** Disable interaction. @default false */

package/types/ngwr-platform.d.ts

@@ -20,7 +20,7 @@ import { Signal } from '@angular/core';
  * protected readonly dark = this.platform.prefersDark;
  * ```
  *
- * @see https://ngwr.dev/services/platform
+ * @see https://ngwr.dev/reference/services/platform
  */
 declare class WrPlatform {
     private readonly destroyRef;
@@ -35,4 +35,95 @@ declare class WrPlatform {
     static ɵprov: i0.ɵɵInjectableDeclaration<WrPlatform>;
 }
 
-export { WrPlatform };
+/**
+ * SSR-safe view onto `window.visualViewport` — the part of the layout viewport
+ * actually visible once the on-screen keyboard (or other browser chrome) is
+ * accounted for.
+ *
+ * - `bottomInset` — px hidden at the bottom of the layout viewport (the
+ *   keyboard height); `0` when nothing covers it, on the server, or in browsers
+ *   without the API.
+ * - `offsetTop` — how far the visual viewport is pushed/scrolled down.
+ *
+ * While active it also mirrors `bottomInset` onto `--wr-keyboard-inset` on the
+ * document root, so purely presentational surfaces (the responsive overlay
+ * sheet, the command-palette sheet) can lift above the keyboard with CSS alone.
+ *
+ * @see https://ngwr.dev/reference/services/platform
+ */
+declare class WrVisualViewport {
+    private readonly destroyRef;
+    private readonly doc;
+    private readonly isBrowser;
+    private readonly _bottomInset;
+    private readonly _offsetTop;
+    /** Height (px) the keyboard / browser chrome hides at the viewport bottom. */
+    readonly bottomInset: Signal<number>;
+    /** The visual viewport's top offset (px). */
+    readonly offsetTop: Signal<number>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrVisualViewport, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WrVisualViewport>;
+}
+
+/** Impact weight for {@link WrHaptics.impact}. */
+type WrHapticImpact = 'light' | 'medium' | 'heavy';
+/**
+ * SSR-safe wrapper around the Vibration API for tactile feedback on touch
+ * devices. Semantic presets (`impact`, `selection`, `success`, `warning`,
+ * `error`) map to sensible vibration patterns so call sites stay readable.
+ *
+ * Every method is a no-op — returning `false` — when there is no support:
+ * on the server, in browsers without `navigator.vibrate`, and notably on
+ * **iOS Safari**, which does not expose the Vibration API at all (its
+ * haptics are native-only). Check {@link supported} to branch UI on it.
+ *
+ * Haptics are best paired with a real user gesture (tap) — some browsers
+ * ignore `vibrate()` calls that aren't triggered by one. This service does
+ * not gate on `prefers-reduced-motion`; read {@link WrPlatform.prefersReducedMotion}
+ * at the call site if you want to suppress feedback for those users.
+ *
+ * @example
+ * ```ts
+ * private readonly haptics = inject(WrHaptics);
+ *
+ * onDelete(): void {
+ *   this.haptics.warning();       // buzz before a destructive confirm
+ * }
+ *
+ * onToggle(): void {
+ *   this.haptics.selection();     // subtle tick on a switch / segmented change
+ * }
+ * ```
+ *
+ * @see https://ngwr.dev/reference/services/platform
+ */
+declare class WrHaptics {
+    private readonly isBrowser;
+    private readonly nav;
+    /** Whether the Vibration API is available (browser + `navigator.vibrate`). */
+    readonly supported: boolean;
+    /**
+     * Fire a raw vibration pattern — a single duration in ms, or an alternating
+     * `[buzz, pause, buzz, …]` array. Returns whether it was dispatched; passing
+     * `0` / `[]` cancels any ongoing vibration.
+     */
+    vibrate(pattern: number | readonly number[]): boolean;
+    /** A physical "tap" — `light`, `medium` (default), or `heavy`. */
+    impact(strength?: WrHapticImpact): boolean;
+    /** A subtle tick for a discrete change (switch, segmented, stepper). */
+    selection(): boolean;
+    /** A confirming pulse for a completed action. */
+    success(): boolean;
+    /** A cautioning pulse before a risky or destructive action. */
+    warning(): boolean;
+    /** A buzzing pulse for a failure or rejected action. */
+    error(): boolean;
+    /** Cancel any in-progress vibration. */
+    stop(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrHaptics, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WrHaptics>;
+}
+
+export { WrHaptics, WrPlatform, WrVisualViewport };
+export type { WrHapticImpact };