ngwr 7.3.0 → 9.0.0

package/types/ngwr-select.d.ts

@@ -2,7 +2,7 @@ import * as ngwr_i18n from 'ngwr/i18n';
 import * as _angular_core from '@angular/core';
 import { InjectionToken, Signal, TemplateRef, ElementRef } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { ControlValueAccessor } from '@angular/forms';
+import { FormValueControl } from '@angular/forms/signals';
 import { Observable } from 'rxjs';
 
 /**
@@ -37,6 +37,8 @@ type WrSelectTagValidator = (value: string, existing: readonly string[]) => bool
  * so stale responses can't clobber fresh ones.
  */
 type WrSelectSearchLoader<T> = (query: string) => Observable<readonly T[]> | Promise<readonly T[]> | readonly T[];
+/** Control size for `<wr-select>` — shares the `--wr-control-*` contract. */
+type WrSelectSize = 'sm' | 'md' | 'lg';
 
 /**
  * @license
@@ -118,20 +120,22 @@ interface SelectedChip {
  * - `'tag'` — free-text + chips with `[separators]` / `[validate]` /
  *   `[allowDuplicates]`. Replaces `<wr-chips-input>`.
  *
- * Implements `ControlValueAccessor` — usable with `[(ngModel)]`,
- * `formControl`, or `formControlName`.
+ * A signal-forms native control: it implements `FormValueControl<unknown>`, 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.
  *
  * @example
  * ```html
- * <!-- Single -->
- * <wr-select placeholder="Pick a size" [(ngModel)]="size">
+ * <!-- Single (signal forms) -->
+ * <wr-select placeholder="Pick a size" [formField]="form.size">
  *   <wr-option value="sm">Small</wr-option>
  *   <wr-option value="md">Medium</wr-option>
  *   <wr-option value="lg">Large</wr-option>
  * </wr-select>
  *
- * <!-- Multi -->
- * <wr-select mode="multi" placeholder="Pick tags" [(ngModel)]="tags">
+ * <!-- Multi (standalone two-way binding) -->
+ * <wr-select mode="multi" placeholder="Pick tags" [(value)]="tags">
  *   <wr-option value="ts">TypeScript</wr-option>
  *   <wr-option value="ng">Angular</wr-option>
  * </wr-select>
@@ -140,9 +144,9 @@ interface SelectedChip {
  * The legacy `[multi]="true"` boolean is still accepted but is now an
  * alias for `[mode]="'multi'"` — prefer the explicit mode.
  *
- * @see https://ngwr.dev/components/select
+ * @see https://ngwr.dev/reference/components/select
  */
-declare class WrSelect implements ControlValueAccessor, WrSelectContext {
+declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     /** Placeholder shown when no option is selected. Falls back to `select.placeholder`. */
     readonly placeholder: _angular_core.InputSignal<string | null>;
     /** Clear-selection (×) button aria-label. Falls back to `select.clearSelection`. */
@@ -151,10 +155,17 @@ declare class WrSelect implements ControlValueAccessor, WrSelectContext {
     protected readonly resolvedClear: _angular_core.Signal<string>;
     /** Per-chip ARIA label — interpolates `{{label}}`. @internal */
     protected readonly chipRemoveLabel: (params?: ngwr_i18n.WrI18nParams) => string;
-    /** Disable the select. Also set by Angular forms via `setDisabledState`. */
+    /**
+     * Disable the select. Bound automatically from the field's disabled state
+     * when used with `[formField]`.
+     *
+     * @default false
+     */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Pill-shaped corners on the trigger. @default false */
     readonly rounded: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Control size — shares the `--wr-control-*` contract. @default 'md' */
+    readonly size: _angular_core.InputSignal<WrSelectSize>;
     /**
      * Present the option panel as a full-width bottom-sheet on small
      * viewports instead of an anchored dropdown. `undefined` follows the
@@ -214,6 +225,28 @@ declare class WrSelect implements ControlValueAccessor, WrSelectContext {
      * unmatched query commits the raw text as the form value. @default false
      */
     readonly freeText: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Search mode: window the option panel so thousands of `[options]` keep only
+     * ~one viewport of rows in the DOM. Opt-in and OFF by default. Engages ONLY on
+     * the pure data-array search tier — it silently falls back to the full render
+     * when static `<wr-option>` children are projected or the filtered list is
+     * empty. While on, rows are plain `role="option"` elements (no `<wr-option>`),
+     * navigated via `aria-activedescendant`, selected by value. @default false
+     */
+    readonly virtualScroll: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Search mode: uniform option-row height in px for the virtual window. `0`
+     * (default) measures the first rendered row once and reuses it, so it adapts
+     * to the control size. Read only when `virtualScroll` engages. @default 0
+     */
+    readonly rowHeight: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Search mode: height of the virtual scroll viewport — a number (px) or any
+     * CSS length. @default 256
+     */
+    readonly viewportHeight: _angular_core.InputSignal<string | number>;
+    /** Search mode: extra rows kept above/below the virtual viewport. @default 6 */
+    readonly overscan: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Search mode: text shown when the filter / loader returns nothing. Falls back to `select.noResults`. */
     readonly noResultsText: _angular_core.InputSignal<string | null>;
     /** Search mode: text shown while the async loader is in flight. Falls back to `select.loading`. */
@@ -255,18 +288,19 @@ declare class WrSelect implements ControlValueAccessor, WrSelectContext {
      */
     readonly maxTagCount: _angular_core.InputSignalWithTransform<number, unknown>;
     /**
-     * Unified value signal. Single mode holds `T | null`; multi mode
-     * holds `readonly T[]`. Internal — consumers go through `[(ngModel)]`
-     * or `[formControl]` via CVA.
-     * @internal
+     * Unified value. Single mode holds a scalar (or `null`); multi / tag
+     * mode holds `readonly unknown[]`. Bound by `[formField]`, or two-way
+     * via `[(value)]`.
      */
-    readonly value: _angular_core.WritableSignal<unknown>;
+    readonly value: _angular_core.ModelSignal<unknown>;
+    /** Emitted on blur / commit so a bound field can mark itself touched. */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
     /** Listbox id used by the trigger's `aria-controls`. */
     protected readonly listboxId: string;
     /** Registered options (insertion order). Internal — distinct from the public `[options]` input. */
     private readonly registry;
     /** Keyboard cursor index into `options`. -1 = none. */
-    private readonly activeIndex;
+    protected readonly activeIndex: _angular_core.WritableSignal<number>;
     /** Id of the active option (for `aria-activedescendant`). */
     readonly activeOptionId: _angular_core.Signal<string | null>;
     protected readonly open: _angular_core.WritableSignal<boolean>;
@@ -280,8 +314,7 @@ declare class WrSelect implements ControlValueAccessor, WrSelectContext {
     protected readonly visibleChips: _angular_core.Signal<readonly SelectedChip[]>;
     protected readonly hiddenChipCount: _angular_core.Signal<number>;
     protected readonly hasSelection: _angular_core.Signal<boolean>;
-    private readonly disabledFromCva;
-    /** Effective disabled state — input wins, CVA second. */
+    /** Effective disabled state. Part of {@link WrSelectContext} for child options. */
     readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
     /**
@@ -290,6 +323,49 @@ declare class WrSelect implements ControlValueAccessor, WrSelectContext {
      * as an internal `<wr-option>` in the panel.
      */
     protected readonly dynamicOptions: _angular_core.Signal<readonly unknown[]>;
+    private static readonly FALLBACK_ROW_PX;
+    private static readonly FALLBACK_VIEWPORT_PX;
+    /** Consumer-projected `<wr-option>` children only (NOT the `@for`-rendered ones). */
+    private readonly projectedOptions;
+    /**
+     * `dynamicOptions()` narrowed to the current search query. `dynamicOptions()`
+     * is intentionally UNFILTERED (projected `<wr-option>` self-hide via CSS), so
+     * the virtual path — which renders plain rows that can't self-hide — filters
+     * here. Loader results are already query-scoped upstream.
+     */
+    protected readonly filteredDynamicOptions: _angular_core.Signal<readonly unknown[]>;
+    /**
+     * Virtualization engaged: opt-in, search mode, a non-empty filtered array, and
+     * NO projected `<wr-option>` children (those keep the full-render registry path
+     * so their DOM-derived labels / selection still work).
+     */
+    protected readonly virtualActive: _angular_core.Signal<boolean>;
+    private readonly scrollTop;
+    private readonly viewportPx;
+    private readonly measuredRowPx;
+    /** Effective uniform row height (px). */
+    protected readonly effRowH: _angular_core.Signal<number>;
+    private readonly fallbackViewportPx;
+    /** `viewportHeight` as a CSS length for the inline max-height (bare number → px). */
+    protected readonly resolvedViewportHeight: _angular_core.Signal<string>;
+    /** Rendered window [start,end) + spacer pads (px). */
+    protected readonly virtualWindow: _angular_core.Signal<{
+        start: number;
+        end: number;
+        padTop: number;
+        padBottom: number;
+    }>;
+    /** The windowed slice of options, each carrying its absolute index. */
+    protected readonly windowOptions: _angular_core.Signal<readonly {
+        item: unknown;
+        index: number;
+    }[]>;
+    /** Stable id for a virtual option row at filtered index `i`. */
+    protected virtualRowId(i: number): string;
+    /** The virtual scroll container inside the overlay panel, if attached. */
+    private get vlistElement();
+    /** Scroll filtered index `i` just into view (sets the `scrollTop` signal synchronously). */
+    private ensureVisible;
     /**
      * Count of registered options that pass the current search filter.
      * Hides the noResults state when the panel has at least one visible row.
@@ -321,9 +397,8 @@ declare class WrSelect implements ControlValueAccessor, WrSelectContext {
     private readonly vcr;
     private readonly scrollStrategies;
     private readonly destroyRef;
+    private readonly platformId;
     private overlayRef;
-    private onChange;
-    protected onTouched: () => void;
     constructor();
     isSelected(value: unknown): boolean;
     selectOption(value: unknown): void;
@@ -340,22 +415,18 @@ declare class WrSelect implements ControlValueAccessor, WrSelectContext {
     protected onTagBlur(): void;
     private commitDraft;
     private tryAddTag;
-    writeValue(value: unknown): void;
-    registerOnChange(fn: (value: unknown) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
     protected onTriggerClick(): void;
     protected onTriggerKey(event: KeyboardEvent): void;
     private seedActiveIndex;
     private moveActive;
     private firstEnabled;
     private lastEnabled;
-    /** Coerce the multi-mode value signal into an array (handles writeValue from non-array). */
+    /** Coerce the multi-mode value into an array (tolerates a scalar or null write). */
     private asArray;
     private openOverlay;
     private closeOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSelect, "wr-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "loader": { "alias": "loader"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; "freeText": { "alias": "freeText"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "separators": { "alias": "separators"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxItems": { "alias": "maxItems"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSelect, "wr-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "loader": { "alias": "loader"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; "freeText": { "alias": "freeText"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "separators": { "alias": "separators"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxItems": { "alias": "maxItems"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, ["projectedOptions"], ["*"], true, never>;
 }
 
 /**
@@ -419,4 +490,4 @@ declare class WrOptionGroup {
 }
 
 export { WR_SELECT, WrOption, WrOptionGroup, WrSelect };
-export type { WrSelectContext, WrSelectMode, WrSelectSearchLoader, WrSelectTagValidator };
+export type { WrSelectContext, WrSelectMode, WrSelectSearchLoader, WrSelectSize, WrSelectTagValidator };

package/types/ngwr-sidebar.d.ts

@@ -51,7 +51,7 @@ declare function isGroup(entry: WrSidebarEntry): entry is WrSidebarGroup;
  * ]" />
  * ```
  *
- * @see https://ngwr.dev/components/sidebar
+ * @see https://ngwr.dev/reference/components/sidebar
  */
 declare class WrSidebar {
     readonly entries: _angular_core.InputSignal<readonly WrSidebarEntry[]>;

package/types/ngwr-skeleton.d.ts

@@ -13,7 +13,7 @@ import * as _angular_core from '@angular/core';
  * <wr-skeleton color="primary" [animated]="false" />
  * ```
  *
- * @see https://ngwr.dev/components/skeleton
+ * @see https://ngwr.dev/reference/components/skeleton
  */
 declare class WrSkeleton {
     /**
@@ -26,7 +26,7 @@ declare class WrSkeleton {
      *
      * @default 'light'
      */
-    readonly color: _angular_core.InputSignal<"primary" | "secondary" | "success" | "warning" | "danger" | "light" | "medium" | "dark">;
+    readonly color: _angular_core.InputSignal<"primary" | "secondary" | "success" | "warning" | "danger" | "info" | "light" | "medium" | "dark">;
     /**
      * Whether the shimmer animation runs.
      *

package/types/ngwr-slider.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
@@ -14,7 +14,7 @@ import { ControlValueAccessor } from '@angular/forms';
  * - `[number, number]` (`[low, high]`) for range sliders (`range="true"`)
  *
  * The component reads `range` at runtime and writes back the matching shape
- * through `ControlValueAccessor`.
+ * through its `value` model.
  */
 type WrSliderValue = number | readonly [number, number];
 
@@ -22,38 +22,57 @@ type WrSliderValue = number | readonly [number, number];
 /**
  * Numeric slider with optional dual-thumb range mode.
  *
- * Implements `ControlValueAccessor` — works with `[(ngModel)]`,
- * `formControl`, `formControlName`. The value shape depends on `range`:
- * `number` (default) or `[number, number]` when `range="true"`.
+ * A signal-forms native control: it implements `FormValueControl<WrSliderValue>`,
+ * so `[formField]` binds straight to its `value` model — no
+ * `ControlValueAccessor` in between. `[(value)]` works standalone. The value
+ * shape depends on `range`: `number` (default) or `[number, number]` when
+ * `range="true"`.
  *
  * Keyboard: ← / → adjust by `step`; ↑ / ↓ same; Shift+arrow by `step × 10`;
  * Home / End jump to min / max; PageUp / PageDown by `step × 10`.
  *
  * @example
  * ```html
- * <wr-slider [(ngModel)]="volume" min="0" max="100" step="5" />
- * <wr-slider [(ngModel)]="range" range min="0" max="1000" step="10" />
+ * <!-- signal forms -->
+ * <wr-slider [formField]="form.volume" min="0" max="100" step="5" />
+ *
+ * <!-- standalone two-way binding -->
+ * <wr-slider [(value)]="range" range min="0" max="1000" step="10" />
  * ```
  *
- * @see https://ngwr.dev/components/slider
+ * @see https://ngwr.dev/reference/components/slider
  */
-declare class WrSlider implements ControlValueAccessor {
+declare class WrSlider implements FormValueControl<WrSliderValue> {
     /** Lower bound. @default 0 */
-    readonly min: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly min: _angular_core.InputSignalWithTransform<WrSliderValue | undefined, unknown>;
     /** Upper bound. @default 100 */
-    readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly max: _angular_core.InputSignalWithTransform<WrSliderValue | undefined, unknown>;
+    /** Resolved numeric lower bound for internal arithmetic. */
+    private readonly minValue;
+    /** Resolved numeric upper bound for internal arithmetic. */
+    private readonly maxValue;
     /** Step size for keyboard and drag. @default 1 */
     readonly step: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Render two thumbs and emit `[low, high]`. @default false */
     readonly range: _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>;
     /** Render the current value below the track. @default true */
     readonly showLabel: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Current value. Bound by `[formField]`, or two-way via `[(value)]`. Shape
+     * follows `range`: a plain `number`, or `[low, high]` in range mode.
+     */
+    readonly value: _angular_core.ModelSignal<WrSliderValue>;
+    /** Emitted on blur so a bound field can mark itself touched. */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
     protected readonly low: _angular_core.WritableSignal<number>;
     protected readonly high: _angular_core.WritableSignal<number>;
-    private readonly disabledFromCva;
-    protected readonly effectiveDisabled: _angular_core.Signal<boolean>;
     protected readonly track: _angular_core.Signal<ElementRef<HTMLElement>>;
     protected readonly classes: _angular_core.Signal<string>;
     protected readonly lowPercent: _angular_core.Signal<number>;
@@ -61,12 +80,7 @@ declare class WrSlider implements ControlValueAccessor {
     protected readonly fillLeft: _angular_core.Signal<number>;
     protected readonly fillWidth: _angular_core.Signal<number>;
     protected readonly label: _angular_core.Signal<string>;
-    private onChange;
-    private onTouched;
-    writeValue(v: WrSliderValue | null): void;
-    registerOnChange(fn: (v: WrSliderValue) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
+    constructor();
     protected onPointerDown(event: PointerEvent, thumb: 'low' | 'high'): void;
     protected onTrackPointerDown(event: PointerEvent): void;
     protected onKey(event: KeyboardEvent, thumb: 'low' | 'high'): void;
@@ -79,7 +93,7 @@ declare class WrSlider implements ControlValueAccessor {
     private percentOf;
     private emitChange;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSlider, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSlider, "wr-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSlider, "wr-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrSlider };

package/types/ngwr-sparkline.d.ts

@@ -10,7 +10,7 @@ import * as _angular_core from '@angular/core';
  * <wr-sparkline [data]="prices" [showArea]="true" color="var(--wr-color-success)" />
  * ```
  *
- * @see https://ngwr.dev/components/sparkline
+ * @see https://ngwr.dev/reference/components/sparkline
  */
 declare class WrSparkline {
     readonly data: _angular_core.InputSignal<readonly number[]>;

package/types/ngwr-speed-dial.d.ts

@@ -26,7 +26,7 @@ type WrSpeedDialDirection = 'up' | 'down' | 'left' | 'right';
  * />
  * ```
  *
- * @see https://ngwr.dev/components/speed-dial
+ * @see https://ngwr.dev/reference/components/speed-dial
  */
 declare class WrSpeedDial {
     readonly actions: _angular_core.InputSignal<readonly WrSpeedDialAction[]>;
@@ -38,13 +38,19 @@ declare class WrSpeedDial {
     readonly icon: _angular_core.InputSignal<string>;
     /** Disable interaction. @default false */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Pad the host toward the dial `direction` with `env(safe-area-inset-*)`.
+     * Only matters when the consumer pins the dial to that edge of the
+     * viewport; otherwise it has no effect. @default false
+     */
+    readonly safeArea: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Fires when the user picks one of the actions. */
     readonly pick: _angular_core.OutputEmitterRef<WrSpeedDialAction>;
     protected readonly classes: _angular_core.Signal<string>;
     protected onTrigger(): void;
     protected onPick(action: WrSpeedDialAction): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSpeedDial, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSpeedDial, "wr-speed-dial", never, { "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "pick": "pick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSpeedDial, "wr-speed-dial", never, { "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "safeArea": { "alias": "safeArea"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "pick": "pick"; }, never, never, true, never>;
 }
 
 export { WrSpeedDial };

package/types/ngwr-spinner.d.ts

@@ -23,7 +23,7 @@ type WrSpinnerSize = 'sm' | 'md' | 'lg';
  * <wr-spinner size="lg" />
  * ```
  *
- * @see https://ngwr.dev/components/spinner
+ * @see https://ngwr.dev/reference/components/spinner
  */
 declare class WrSpinner {
     /**

package/types/ngwr-splitter.d.ts

@@ -18,7 +18,7 @@ import * as _angular_core from '@angular/core';
  * </wr-splitter>
  * ```
  *
- * @see https://ngwr.dev/components/splitter
+ * @see https://ngwr.dev/reference/components/splitter
  */
 declare class WrSplitter {
     /** Position of the divider as a percentage (0–100). Two-way bindable. @default 50 */

package/types/ngwr-spotlight-card.d.ts

@@ -20,7 +20,7 @@ import * as _angular_core from '@angular/core';
 declare class WrSpotlightCard {
     /**
      * Highlight colour (any CSS colour). When unset, the theme decides:
-     * a soft dark tint on light surfaces, white-alpha on dark.
+     * a dark-ish glow on light surfaces, a light glow on dark.
      */
     readonly spotlightColor: _angular_core.InputSignal<string | null>;
     /** Where the spotlight fades out, as a percentage of the gradient. @default 80 */

package/types/ngwr-squircle.d.ts

@@ -121,7 +121,7 @@ declare class WrSquircle {
  * </wr-squircle>
  * ```
  *
- * @see https://ngwr.dev/components/squircle
+ * @see https://ngwr.dev/reference/components/squircle
  */
 declare class WrSquircleHost {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSquircleHost, never>;

package/types/ngwr-statistic.d.ts

@@ -2,17 +2,24 @@ import * as _angular_core from '@angular/core';
 
 /**
  * KPI card — label + big number + optional prefix/suffix + delta. Pair
- * with a layout grid for dashboards.
+ * with `<wr-statistic-group>` for a responsive dashboard grid.
+ *
+ * When `value` is numeric the number counts up (eased) from its previous
+ * value to the new one on every change — see `animate`. String values and
+ * `prefers-reduced-motion` render instantly.
  *
  * @example
  * ```html
  * <wr-statistic label="Active users" [value]="12345" suffix="users" />
  * <wr-statistic label="Revenue" [value]="9512" prefix="$" [delta]="12.4" />
+ * <wr-statistic label="Churn" [value]="1.8" suffix="%" [precision]="1" />
  * ```
  *
- * @see https://ngwr.dev/components/statistic
+ * @see https://ngwr.dev/reference/components/statistic
  */
 declare class WrStatistic {
+    private readonly platform;
+    private readonly locale;
     readonly label: _angular_core.InputSignal<string>;
     /** The number (or string) to display in the main slot. */
     readonly value: _angular_core.InputSignal<string | number | null>;
@@ -20,18 +27,45 @@ declare class WrStatistic {
     readonly prefix: _angular_core.InputSignal<string>;
     /** Suffix glyph / unit (e.g. `'%'`, `'kg'`). */
     readonly suffix: _angular_core.InputSignal<string>;
+    /** Fixed number of decimals applied to numeric values. @default 0 */
+    readonly precision: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Count up to a new numeric `value` instead of swapping instantly. Always
+     * off for string values or under `prefers-reduced-motion`. @default true
+     */
+    readonly animate: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Count-up duration (ms). @default 700 */
+    readonly duration: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * The current value coerced to a finite number, or `null` when `value` is
+     * a non-numeric string / empty / nullish (rendered as-is).
+     */
+    protected readonly numericValue: _angular_core.Signal<number | null>;
+    /** Whether the value should count up (browser, numeric, opted-in, motion allowed). */
+    protected readonly animated: _angular_core.Signal<boolean>;
+    /** Animation start — the previously-rendered numeric value (0 on first paint). */
+    protected readonly animateFrom: _angular_core.WritableSignal<number>;
+    /** Bookkeeping: the last numeric value seen, fed back as the next `from`. */
+    private readonly lastNumeric;
+    constructor();
+    /**
+     * Static (non-animated) display string. Numeric values honour `precision`
+     * and locale grouping so they match the count-up output; everything else
+     * renders verbatim with an em-dash fallback.
+     */
+    protected readonly displayValue: _angular_core.Signal<string>;
     /**
      * Optional delta vs previous period — shown as `+x.x%` (or `-x.x%`).
      * Use `deltaSuffix` to change the trailing unit.
      */
-    readonly delta: _angular_core.InputSignalWithTransform<number | null, number | null>;
+    readonly delta: _angular_core.InputSignalWithTransform<number | null, unknown>;
     /** Unit appended to the delta value. @default '%' */
     readonly deltaSuffix: _angular_core.InputSignal<string>;
     protected readonly hasDelta: _angular_core.Signal<boolean>;
     protected readonly deltaDirection: _angular_core.Signal<"up" | "down" | "flat">;
     protected readonly deltaText: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrStatistic, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrStatistic, "wr-statistic", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "delta": { "alias": "delta"; "required": false; "isSignal": true; }; "deltaSuffix": { "alias": "deltaSuffix"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrStatistic, "wr-statistic", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "precision": { "alias": "precision"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "duration": { "alias": "duration"; "required": false; "isSignal": true; }; "delta": { "alias": "delta"; "required": false; "isSignal": true; }; "deltaSuffix": { "alias": "deltaSuffix"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -50,7 +84,7 @@ declare class WrStatistic {
  * />
  * ```
  *
- * @see https://ngwr.dev/components/statistic
+ * @see https://ngwr.dev/reference/components/statistic
  */
 declare class WrStatisticCountdown {
     /** Target date / timestamp the countdown is running down to. */
@@ -85,4 +119,39 @@ declare class WrStatisticCountdown {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrStatisticCountdown, "wr-statistic-countdown", never, { "target": { "alias": "target"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "endText": { "alias": "endText"; "required": false; "isSignal": true; }; "tickMs": { "alias": "tickMs"; "required": false; "isSignal": true; }; }, { "countdownEnd": "countdownEnd"; }, never, never, true, never>;
 }
 
-export { WrStatistic, WrStatisticCountdown };
+/**
+ * Dashboard grid for `<wr-statistic>` cards. The column count follows the
+ * group's OWN width — an intrinsic container-query grid sized by its box, not
+ * a viewport media query — so it reflows correctly inside any column, card, or
+ * split pane. Columns are never narrower than `min`; `columns` optionally caps
+ * how many ever sit side by side on a wide container.
+ *
+ * @example
+ * ```html
+ * <wr-statistic-group [columns]="4" min="11rem">
+ *   <wr-statistic label="Active users" [value]="12345" />
+ *   <wr-statistic label="Revenue" [value]="9512" prefix="$" [delta]="12.4" />
+ *   <wr-statistic label="Churn" [value]="1.8" suffix="%" [delta]="-0.4" />
+ *   <wr-statistic label="Sessions" [value]="48210" />
+ * </wr-statistic-group>
+ * ```
+ *
+ * @see https://ngwr.dev/reference/components/statistic
+ */
+declare class WrStatisticGroup {
+    /**
+     * Minimum width of each column before the grid reflows to fewer columns.
+     * Any CSS length — smaller packs more cards per row. @default '12rem'
+     */
+    readonly min: _angular_core.InputSignal<string>;
+    /**
+     * Cap on how many columns ever sit side by side on a wide container. `0`
+     * (default) leaves it uncapped — fit as many `min`-wide columns as the
+     * width allows. @default 0
+     */
+    readonly columns: _angular_core.InputSignalWithTransform<number, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrStatisticGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrStatisticGroup, "wr-statistic-group", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { WrStatistic, WrStatisticCountdown, WrStatisticGroup };

package/types/ngwr-stepper.d.ts

@@ -14,7 +14,7 @@ import { InjectionToken, Signal } from '@angular/core';
  * The stepper hides every step except the active one via a host class —
  * each step still mounts once, so component state survives navigation.
  *
- * @see https://ngwr.dev/components/stepper
+ * @see https://ngwr.dev/reference/components/stepper
  */
 declare class WrStep {
     /** Header label. */
@@ -71,7 +71,7 @@ declare const WR_STEPPER: InjectionToken<WrStepperContext>;
  * </wr-stepper>
  * ```
  *
- * @see https://ngwr.dev/components/stepper
+ * @see https://ngwr.dev/reference/components/stepper
  */
 declare class WrStepper implements WrStepperContext {
     /** Index of the currently visible step. */

package/types/ngwr-storage.d.ts

@@ -31,7 +31,7 @@ import * as ngwr_storage from 'ngwr/storage';
  * effect(() => console.log('theme is', theme()));
  * ```
  *
- * @see https://ngwr.dev/services/storage
+ * @see https://ngwr.dev/reference/services/storage
  */
 declare class WrStorage {
     private readonly engine;