ngwr 10.0.0 → 10.1.0

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

@@ -99,6 +99,14 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
     private readonly labelDate;
     private readonly labelTime;
     private readonly labelDateTime;
+    /**
+     * Accessible name of the text field. Falls back to the placeholder, then to
+     * the same catalog string the calendar button uses — the field is a
+     * `role="combobox"`, and with an empty placeholder it had no name at all.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    private readonly fieldLabel;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
     protected readonly triggerLabel: _angular_core.Signal<string>;
     protected readonly classes: _angular_core.Signal<string>;
     private overlayRef;
@@ -128,7 +136,7 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
     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; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, 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; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 /**

package/types/ngwr-density.d.ts

@@ -3,7 +3,7 @@ import { InjectionToken, Signal, EnvironmentProviders } from '@angular/core';
 
 /** Density scale. Components multiply their paddings by the matching multiplier. */
 type WrDensityValue = 'sm' | 'md' | 'lg' | 'touch';
-/** Configuration for {@link WrDensityValueService}. */
+/** Configuration for {@link WrDensity}. */
 interface WrDensityConfig {
     /** Initial density used when no persisted value is present. @default 'md' */
     readonly defaultDensity: WrDensityValue;

package/types/ngwr-divider.d.ts

@@ -70,4 +70,4 @@ declare class WrDivider {
 }
 
 export { WrDivider };
-export type { WrDividerType };
+export type { WrDividerAlign, WrDividerType };

package/types/ngwr-event-calendar.d.ts

@@ -0,0 +1,358 @@
+import * as ngwr_i18n from 'ngwr/i18n';
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { WrColor } from 'ngwr/theme';
+
+/**
+ * @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
+ */
+
+/** Which span of time the calendar is showing. */
+type WrCalendarView = 'month' | 'week' | 'day';
+/**
+ * One entry on the calendar.
+ *
+ * `end` is EXCLUSIVE — an event from 09:00 to 10:00 does not overlap one that
+ * starts at 10:00, and an all-day event on a single day ends at 00:00 the next
+ * day. Exclusive ends are what make adjacency and overlap the same comparison
+ * in every view, instead of a per-view off-by-one.
+ */
+interface WrCalendarEvent {
+    /** Stable identity. Used for tracking and echoed back on every output. */
+    readonly id: string | number;
+    /** Text shown on the chip and read out as the button's accessible name. */
+    readonly title: string;
+    /** Start instant, inclusive. */
+    readonly start: Date;
+    /** End instant, exclusive. */
+    readonly end: Date;
+    /**
+     * Show in the all-day band rather than against the time grid. Month view
+     * renders every event as a band regardless.
+     */
+    readonly allDay?: boolean;
+    /** Intent color for the chip. Falls back to `primary`. */
+    readonly color?: WrColor | null;
+    /**
+     * Per-event override of the calendar's `editable` input — `false` pins an
+     * event that would otherwise be draggable.
+     */
+    readonly editable?: boolean;
+    /** Anything the host wants to carry along; the calendar never reads it. */
+    readonly data?: unknown;
+}
+/**
+ * A move or a resize, emitted before anything is applied. `events` is an input,
+ * so the calendar cannot mutate it: apply the change in your own state and the
+ * new position renders on the next pass. Ignoring the output cancels the drag.
+ */
+interface WrCalendarEventChange {
+    /** The event as it was, untouched. */
+    readonly event: WrCalendarEvent;
+    /** Where it would start. */
+    readonly start: Date;
+    /** Where it would end, exclusive. */
+    readonly end: Date;
+    /** Whether the pointer changed the duration (`resize`) or only slid it. */
+    readonly kind: 'move' | 'resize';
+}
+/** An empty stretch of the calendar the user activated. */
+interface WrCalendarSlot {
+    /** Start of the slot — midnight in month view, the slot's own time otherwise. */
+    readonly start: Date;
+    /** End of the slot, exclusive. */
+    readonly end: Date;
+    /** `true` in month view and in the all-day band. */
+    readonly allDay: boolean;
+}
+/** Implicit context of the `wrCalendarEvent` template. */
+interface WrCalendarEventContext {
+    readonly $implicit: WrCalendarEvent;
+}
+
+/**
+ * A chip that spans whole days — every month-view event, and the all-day band
+ * of the time views. It lives in the cell where its segment STARTS and reaches
+ * right with a `calc()` width, so it stays inside one `role="gridcell"` however
+ * far it spans.
+ */
+interface BandChip {
+    readonly key: string;
+    readonly event: WrCalendarEvent;
+    /** Index of the day it starts on, within the row it was laid out against. */
+    readonly column: number;
+    readonly span: number;
+    readonly lane: number;
+    readonly continuesBefore: boolean;
+    readonly continuesAfter: boolean;
+}
+/**
+ * A chip positioned against the time grid. Same rule — it belongs to the cell
+ * holding its start — but sized in percentages OF THAT CELL, which works only
+ * because every slot row is the same height.
+ */
+interface TimeChip {
+    readonly key: string;
+    readonly event: WrCalendarEvent;
+    /** Offset into the start cell, 0–100. */
+    readonly top: number;
+    /** Height as a multiple of the cell, ×100. */
+    readonly height: number;
+    /** Horizontal share of the column, both 0–100. */
+    readonly left: number;
+    readonly width: number;
+    readonly continuesBefore: boolean;
+    readonly continuesAfter: boolean;
+}
+interface DayCell {
+    readonly date: Date;
+    readonly key: string;
+    readonly day: string;
+    readonly label: string;
+    readonly inMonth: boolean;
+    readonly isToday: boolean;
+    readonly bands: readonly BandChip[];
+    readonly hidden: number;
+}
+interface MonthWeek {
+    readonly key: string;
+    readonly days: readonly DayCell[];
+}
+interface TimeCell {
+    readonly key: string;
+    readonly date: Date;
+    readonly label: string;
+    readonly chips: readonly TimeChip[];
+}
+interface TimeRow {
+    readonly key: string;
+    readonly label: string;
+    /** Minutes from midnight — also what the drag target reads off the cell. */
+    readonly minutes: number;
+    readonly major: boolean;
+    readonly cells: readonly TimeCell[];
+}
+interface ColumnHeader {
+    readonly key: string;
+    readonly date: Date;
+    readonly weekday: string;
+    readonly day: string;
+    readonly label: string;
+    readonly isToday: boolean;
+}
+/** Live drag state. `null` whenever the pointer is not down on a chip. */
+interface DragState {
+    readonly event: WrCalendarEvent;
+    readonly kind: 'move' | 'resize';
+    readonly originDate: Date;
+    readonly originMinutes: number;
+    readonly pointerId: number;
+}
+/**
+ * Month / week / day event calendar with drag to move and resize.
+ *
+ * `events` is an INPUT, never mutated: a drag emits `eventChange` describing
+ * where the event would land and stops there. Apply it to your own state and
+ * the calendar re-renders — so an unhandled output is a cancelled drag, an
+ * optimistic update is one `set`, and a rejected server write needs no rollback
+ * path inside the component.
+ *
+ * Every chip lives inside the `role="gridcell"` where it starts and reaches out
+ * with `calc()` widths or percentage heights. That is what keeps the ARIA grid
+ * valid — an events layer floating over the grid would leave rows owning
+ * something other than cells — and it means no pixel measurement anywhere.
+ *
+ * **Keyboard.** The grid is one tab stop with a roving cursor: arrows move by
+ * day (left / right) and by week or slot (up / down), `Home` / `End` jump to
+ * the ends of the row, `Enter` on an empty cell emits `slotClick`, and `Enter`
+ * on a cell holding events focuses the first chip (`Escape` returns). On a
+ * focused chip, `Alt` + arrows move the event — the keyboard equivalent of the
+ * drag, emitting the same `eventChange`.
+ *
+ * Date math and formatting go through {@link WrDateAdapter}; register one with
+ * `provideWrDateAdapter(...)` at bootstrap.
+ *
+ * @example
+ * ```html
+ * <wr-event-calendar
+ *   editable
+ *   [events]="events()"
+ *   [(view)]="view"
+ *   [(date)]="anchor"
+ *   (eventChange)="apply($event)"
+ *   (slotClick)="compose($event)"
+ * />
+ * ```
+ *
+ * @see https://ngwr.dev/reference/components/event-calendar
+ */
+declare class WrEventCalendar {
+    /** Everything to render. Never mutated — see `eventChange`. */
+    readonly events: _angular_core.InputSignal<readonly WrCalendarEvent[]>;
+    /** Which span is shown. Two-way bindable. @default 'month' */
+    readonly view: _angular_core.ModelSignal<WrCalendarView>;
+    /** Any date inside the shown span. Two-way bindable. */
+    readonly date: _angular_core.ModelSignal<Date>;
+    /** Which buttons the view switcher offers. Empty hides it. */
+    readonly views: _angular_core.InputSignal<readonly WrCalendarView[]>;
+    /** Allow dragging chips to move and resize them. @default false */
+    readonly editable: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Minutes per row in the time views — also the drag snap. @default 30 */
+    readonly slotMinutes: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** First hour the time views show. @default 0 */
+    readonly dayStartHour: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** First hour they do NOT show, exclusive. @default 24 */
+    readonly dayEndHour: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Lanes a month cell shows before collapsing the rest into “+N more”. @default 3 */
+    readonly maxLanes: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Hide the built-in header — supply your own navigation instead. @default false */
+    readonly hideHeader: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** A chip was activated. */
+    readonly eventClick: _angular_core.OutputEmitterRef<WrCalendarEvent>;
+    /** Empty space was activated — the slot the user pointed at. */
+    readonly slotClick: _angular_core.OutputEmitterRef<WrCalendarSlot>;
+    /** A drag or an `Alt` + arrow finished. Apply it yourself; nothing moves until you do. */
+    readonly eventChange: _angular_core.OutputEmitterRef<WrCalendarEventChange>;
+    private readonly adapter;
+    private readonly document;
+    private readonly chipTpl;
+    protected readonly todayLabel: string;
+    protected readonly previousLabel: string;
+    protected readonly nextLabel: string;
+    protected readonly allDayLabel: string;
+    protected readonly timeLabel: string;
+    protected readonly moreLabel: (params?: ngwr_i18n.WrI18nParams) => string;
+    protected readonly viewLabels: Record<WrCalendarView, string>;
+    /** Accessible name of the grid; overridable for a page with several. */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
+    /**
+     * `[day, minutes]` of the roving cursor — `minutes === -1` means a month cell
+     * or the all-day band. Raw, so it survives a view switch; read
+     * {@link cursorCell}, which clamps it to what the current view actually has.
+     */
+    private readonly cursor;
+    /**
+     * The cursor as the current view can honour it. Exactly one cell may carry
+     * `tabindex="0"`, so a stale coordinate — the 09:30 row after switching to
+     * month, day 34 after switching to week — must fall back to a real cell
+     * rather than leave the grid with no tab stop at all.
+     */
+    protected readonly cursorCell: _angular_core.Signal<readonly [number, number]>;
+    /** Non-null only while a pointer is down on a chip. @internal */
+    protected readonly drag: _angular_core.WritableSignal<DragState | null>;
+    protected readonly dragging: _angular_core.Signal<string | number | null>;
+    protected readonly chipTemplate: _angular_core.Signal<TemplateRef<WrCalendarEventContext> | null>;
+    protected readonly classes: _angular_core.Signal<string>;
+    /** Inclusive-exclusive window the current view covers. */
+    private readonly range;
+    /** Every day the view shows, left to right. */
+    private readonly days;
+    /** Only what overlaps the window — everything downstream works off this. */
+    private readonly visible;
+    protected readonly title: _angular_core.Signal<string>;
+    protected readonly weekdayNames: _angular_core.Signal<string[]>;
+    protected readonly switcher: _angular_core.Signal<{
+        view: WrCalendarView;
+        label: string;
+    }[]>;
+    protected readonly weeks: _angular_core.Signal<readonly MonthWeek[]>;
+    protected readonly columns: _angular_core.Signal<readonly ColumnHeader[]>;
+    /** The all-day band above the time grid — same layout as a month week. */
+    protected readonly allDayBands: _angular_core.Signal<readonly BandChip[]>;
+    protected readonly allDayCells: _angular_core.Signal<readonly {
+        key: string;
+        date: Date;
+        label: string;
+        bands: readonly BandChip[];
+    }[]>;
+    protected readonly hasAllDay: _angular_core.Signal<boolean>;
+    protected readonly rows: _angular_core.Signal<readonly TimeRow[]>;
+    protected step(direction: -1 | 1): void;
+    protected goToday(): void;
+    protected setView(view: WrCalendarView): void;
+    /** “+N more” opens that day — the overflow is only ever a month-view problem. */
+    protected openDay(date: Date): void;
+    protected onChipPointerDown(event: PointerEvent, chipEvent: WrCalendarEvent, kind: 'move' | 'resize'): void;
+    protected onPointerUp(event: PointerEvent): void;
+    protected onChipClick(event: WrCalendarEvent): void;
+    protected onCellClick(date: Date, minutes: number): void;
+    protected onChipKeyDown(event: KeyboardEvent, chipEvent: WrCalendarEvent): void;
+    protected onGridKeyDown(event: KeyboardEvent): void;
+    protected isCursor(day: number, minutes: number): boolean;
+    /**
+     * Greedy lane packing for day-spanning chips. Sorted by start then by length,
+     * each segment takes the first lane its columns are free in — the classic
+     * interval-graph colouring, and the reason a long event keeps one lane across
+     * the whole week instead of stair-stepping.
+     *
+     * `limit` caps the visible lanes; anything past it is reported per column so
+     * the cell can say how much it is hiding.
+     */
+    private bandLayout;
+    /**
+     * Column layout inside one day: events that overlap in time share the width.
+     * Clusters are built by a running high-water mark — a new cluster starts the
+     * moment an event begins after everything before it has ended.
+     */
+    private timeLayout;
+    protected chipLabel(event: WrCalendarEvent): string;
+    protected chipTime(event: WrCalendarEvent): string;
+    protected canDrag(event: WrCalendarEvent): boolean;
+    private slotAt;
+    /** The `[data-cell]` under the pointer, or `null` outside the grid. */
+    private cellUnder;
+    /** Value of a cell's `data-cell-date`. @internal */
+    protected stamp(date: Date): number;
+    private focusCursor;
+    private focusCell;
+    /**
+     * Move one time row, treating the all-day band as the row above the first —
+     * otherwise the band is mouse-only, which is the kind of gap that makes a
+     * keyboard user give up on the whole grid.
+     */
+    private stepRow;
+    private shift;
+    private startOfDay;
+    private startOfWeek;
+    /** Whole days apart — computed on the day floor, so DST cannot round it off. */
+    private daysBetween;
+    private spansWholeDay;
+    private clock;
+    private iso;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrEventCalendar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrEventCalendar, "wr-event-calendar", never, { "events": { "alias": "events"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "date": { "alias": "date"; "required": false; "isSignal": true; }; "views": { "alias": "views"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "slotMinutes": { "alias": "slotMinutes"; "required": false; "isSignal": true; }; "dayStartHour": { "alias": "dayStartHour"; "required": false; "isSignal": true; }; "dayEndHour": { "alias": "dayEndHour"; "required": false; "isSignal": true; }; "maxLanes": { "alias": "maxLanes"; "required": false; "isSignal": true; }; "hideHeader": { "alias": "hideHeader"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "view": "viewChange"; "date": "dateChange"; "eventClick": "eventClick"; "slotClick": "slotClick"; "eventChange": "eventChange"; }, ["chipTpl"], 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
+ */
+
+/**
+ * Replace the chip's contents. The event is the implicit context; the chip
+ * itself — its button, its position and its drag handling — stays with the
+ * calendar, so a custom template cannot break the geometry.
+ *
+ * @example
+ * ```html
+ * <wr-event-calendar [events]="events">
+ *   <ng-template wrCalendarEvent let-event>
+ *     <strong>{{ event.title }}</strong> — {{ event.data.room }}
+ *   </ng-template>
+ * </wr-event-calendar>
+ * ```
+ */
+declare class WrCalendarEventTemplate {
+    readonly template: TemplateRef<WrCalendarEventContext>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCalendarEventTemplate, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrCalendarEventTemplate, "ng-template[wrCalendarEvent]", never, {}, {}, never, never, true, never>;
+}
+
+export { WrCalendarEventTemplate, WrEventCalendar };
+export type { WrCalendarEvent, WrCalendarEventChange, WrCalendarEventContext, WrCalendarSlot, WrCalendarView };

package/types/ngwr-form.d.ts

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import { InjectionToken, Signal, EnvironmentProviders } from '@angular/core';
 import * as _angular_forms from '@angular/forms';
 import { NgControl } from '@angular/forms';
 
@@ -12,7 +13,7 @@ import { NgControl } from '@angular/forms';
  * ```html
  * <wr-form-item [hasError]="form.controls.email.invalid">
  *   <label>Email</label>
- *   <wr-input formControlName="email" />
+ *   <input wrInput formControlName="email" />
  *   <wr-form-error>Invalid email</wr-form-error>
  * </wr-form-item>
  * ```
@@ -31,6 +32,71 @@ declare class WrFormItem {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrFormItem, "wr-form-item", never, { "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; }, {}, 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
+ */
+
+/**
+ * What a projected control can read from its surrounding `<wr-form-field>`.
+ *
+ * The field renders `<label [for]>` before it can see what was projected into
+ * it, so the id has to travel the other way: the control adopts the id the
+ * label already points at. Doing it through DI keeps it a render-time binding,
+ * which is what SSR needs — stamping the id from `afterNextRender` would leave
+ * every prerendered page with a label pointing at nothing.
+ */
+interface WrFormFieldContext {
+    /** Id the field's `<label for>` points at. */
+    readonly controlId: Signal<string>;
+    /**
+     * Validator keys currently in error, once the control is touched or dirty.
+     * Empty when the field is valid or has not been interacted with.
+     */
+    readonly errorKeys: Signal<readonly string[]>;
+    /** Id of the element listing the visible messages, or `null` when there are none. */
+    readonly describedBy: Signal<string | null>;
+}
+/** Present only inside a `<wr-form-field>`; inject with `{ optional: true }`. */
+declare const WR_FORM_FIELD: InjectionToken<WrFormFieldContext>;
+
+/**
+ * One error message tied to a validator key. Renders only when the parent
+ * form-field has a matching error in `control.errors`, and only once the
+ * control is touched or dirty.
+ *
+ * @example
+ * ```html
+ * <wr-form-error key="required">This field is required.</wr-form-error>
+ * <wr-form-error key="email">That doesn't look right.</wr-form-error>
+ * ```
+ */
+declare class WrFormError {
+    /**
+     * Validator key this message corresponds to (e.g. `'required'`).
+     * Optional — without a key the message always renders, which is the
+     * plain inline-error usage inside `<wr-form-item>`.
+     */
+    readonly key: _angular_core.InputSignal<string | undefined>;
+    private readonly field;
+    /**
+     * Whether this message is the one the current error calls for.
+     *
+     * The parent projects every `<wr-form-error>` through a single
+     * `<ng-content select>`, which cannot filter — so each message decides for
+     * itself. Without this, one invalid control rendered "Email is required."
+     * and "That isn't a valid email." side by side, which is what the docs have
+     * always described as gated behaviour.
+     *
+     * A keyless message always shows: that is the plain inline-error usage inside
+     * `<wr-form-item>`, which has no error discovery at all.
+     */
+    protected readonly visible: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrFormError, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrFormError, "wr-form-error", never, { "key": { "alias": "key"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
 /**
  * Wraps a label + control + hint + error messages into a single block —
  * the layout primitive every form ends up reinventing.
@@ -52,7 +118,7 @@ declare class WrFormItem {
  *
  * @see https://ngwr.dev/reference/components/form-field
  */
-declare class WrFormField {
+declare class WrFormField implements WrFormFieldContext {
     /** Label text shown above the control. */
     readonly label: _angular_core.InputSignal<string>;
     /** Hint text shown below the control. Hidden when an error is visible. */
@@ -61,35 +127,126 @@ declare class WrFormField {
     readonly required: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Show `(optional)` next to the label. Mutually exclusive with `required`. @default false */
     readonly optional: _angular_core.InputSignalWithTransform<boolean, any>;
-    /** Force a specific id on the label's `for` attribute. Auto-generated otherwise. */
+    /**
+     * Force a specific id on the label's `for` attribute. Auto-generated
+     * otherwise, and adopted by the projected `wrInput` unless that element
+     * already carries an `id` of its own.
+     */
     readonly controlId: _angular_core.InputSignal<string>;
-    /** Projected `NgControl` — used to read touched / dirty / errors. */
+    /**
+     * Projected `NgControl` — used to read touched / dirty / errors.
+     *
+     * This catches `[formField]` too: Angular's Signal Forms directive provides
+     * `NgControl` via its interop shim, so both forms flavours land here.
+     */
     protected readonly ngControl: _angular_core.Signal<NgControl | undefined>;
+    /**
+     * Bumped on every event the projected control emits.
+     *
+     * `AbstractControl`'s `touched` / `dirty` / `errors` accessors are NOT
+     * reactive under classic forms — Angular reads them inside `untracked()`, and
+     * `errors` is a plain assigned field. A `computed` over them therefore caches
+     * its first value and never recomputes, which in a zoneless app means the
+     * error block never appears at all. `control.events` is the reactive source
+     * Angular does expose, so the computed depends on this counter instead.
+     * Signal Forms needs none of this — its interop getters read live signals —
+     * and harmlessly contributes no events.
+     */
+    private readonly revision;
+    constructor();
     protected readonly errors: _angular_core.Signal<_angular_forms.ValidationErrors | null>;
     protected readonly hasError: _angular_core.Signal<boolean>;
+    /** @internal Read by the projected `<wr-form-error>` children to decide which of them renders. */
+    readonly errorKeys: _angular_core.Signal<readonly string[]>;
+    /** @internal Read by the projected control so a screen reader is pointed at the message. */
+    readonly describedBy: _angular_core.Signal<string | null>;
+    /**
+     * Render a catalog message for any error the markup does not already answer.
+     *
+     * On by default: a field with no `<wr-form-error>` at all is the common case,
+     * and an empty error block helps nobody. Turn it off for a field whose copy is
+     * entirely hand-written. @default true
+     */
+    readonly autoErrors: _angular_core.InputSignalWithTransform<boolean, any>;
+    private readonly projectedErrors;
+    private readonly appMessages;
+    private readonly i18n;
+    /**
+     * Errors with no projected `<wr-form-error key>` to answer them, resolved to
+     * text: the app catalog first, then the `validation.*` i18n keys, then a
+     * built-in English sentence. Per-field markup always wins — it is the most
+     * specific thing the author wrote.
+     */
+    protected readonly autoMessages: _angular_core.Signal<readonly {
+        key: string;
+        text: string;
+    }[]>;
+    private resolve;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrFormField, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrFormField, "wr-form-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; }, {}, ["ngControl"], ["*", "wr-form-error"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrFormField, "wr-form-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "autoErrors": { "alias": "autoErrors"; "required": false; "isSignal": true; }; }, {}, ["ngControl", "projectedErrors"], ["*", "wr-form-error"], true, never>;
 }
+
 /**
- * One error message tied to a validator key. Renders only when the
- * parent form-field has a matching error in `control.errors`.
+ * @license
  *
- * @example
- * ```html
- * <wr-form-error key="required">This field is required.</wr-form-error>
- * <wr-form-error key="email">That doesn't look right.</wr-form-error>
- * ```
+ * 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
  */
-declare class WrFormError {
+
+/** What a message function is handed to build its sentence. */
+interface WrFormErrorContext {
+    /** Validator key (classic forms) or Signal Forms `kind` that produced the error. */
+    readonly key: string;
     /**
-     * Validator key this message corresponds to (e.g. `'required'`).
-     * Optional — without a key the message always renders, which is the
-     * plain inline-error usage inside `<wr-form-item>`.
+     * The validator's own payload — `{ requiredLength, actualLength }` for
+     * `minlength`, `{ min }` for `wrMinDate`, and so on. `true` for the
+     * flag-shaped validators, which carry nothing.
      */
-    readonly key: _angular_core.InputSignal<string | undefined>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrFormError, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrFormError, "wr-form-error", never, { "key": { "alias": "key"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    readonly error: unknown;
+    /** The surrounding field's `label`, so a message can name the field. */
+    readonly label: string;
 }
+/** A message, or a function that builds one from the validator's payload. */
+type WrFormErrorMessage = string | ((ctx: WrFormErrorContext) => string);
+/** Validator key → message. Keys are matched exactly against `control.errors`. */
+type WrFormErrorMessages = Readonly<Record<string, WrFormErrorMessage>>;
+/**
+ * App-wide validation copy. Empty by default; `<wr-form-field>` falls through
+ * to the `ngwr/i18n` catalog and then to a built-in English sentence, so a
+ * form shows a usable message with no configuration at all.
+ */
+declare const WR_FORM_ERRORS: InjectionToken<Readonly<Record<string, WrFormErrorMessage>>>;
+/**
+ * Register validation messages for the whole app.
+ *
+ * Only the keys you name are overridden — everything else keeps resolving
+ * through the i18n catalog, so this composes with `provideWrI18n()` rather than
+ * replacing it. A projected `<wr-form-error key="…">` still wins over both:
+ * per-field copy beats app-wide copy.
+ *
+ * @example
+ * ```ts
+ * bootstrapApplication(App, {
+ *   providers: [
+ *     provideWrFormErrors({
+ *       required: 'Please fill this in.',
+ *       minlength: ({ error }) => `At least ${(error as { requiredLength: number }).requiredLength} characters.`,
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+declare function provideWrFormErrors(messages?: WrFormErrorMessages): EnvironmentProviders;
+/**
+ * Last-resort English, used when no app catalog and no i18n catalog answer.
+ *
+ * These exist so that a form with zero configuration still says something true
+ * rather than rendering an empty error block. Every key here also ships as a
+ * `validation.*` entry in `ngwr/i18n/{en,ru}`, which is what a localized app
+ * actually reads.
+ */
+declare const WR_FORM_ERROR_FALLBACKS: WrFormErrorMessages;
 
-export { WrFormError, WrFormField, WrFormItem };
+export { WR_FORM_ERRORS, WR_FORM_ERROR_FALLBACKS, WR_FORM_FIELD, WrFormError, WrFormField, WrFormItem, provideWrFormErrors };
+export type { WrFormErrorContext, WrFormErrorMessage, WrFormErrorMessages, WrFormFieldContext };

package/types/ngwr-fuzzy-text.d.ts

@@ -64,6 +64,14 @@ declare class WrFuzzyText {
     private readonly isBrowser;
     private readonly platform;
     private teardown;
+    /**
+     * `init()` suspends on font loading, so the component can be destroyed while
+     * it is awaiting. At that moment `teardown` is still undefined, so the
+     * destroy hook has nothing to call — and everything the rest of `init()`
+     * starts (the rAF loop, the glitch timers, canvas listeners) would run for
+     * the life of the page. This flag lets the continuation bail out.
+     */
+    private destroyed;
     constructor();
     private init;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrFuzzyText, never>;