ngwr 10.0.0 → 10.2.0

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>;

package/types/ngwr-gauge.d.ts

@@ -13,6 +13,9 @@ import * as _angular_core from '@angular/core';
  * @see https://ngwr.dev/reference/components/gauge
  */
 declare class WrGauge {
+    /** Accessible name — the role needs one. Falls back to `gauge.label`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
     readonly value: _angular_core.InputSignal<number>;
     readonly min: _angular_core.InputSignalWithTransform<number, unknown>;
     readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
@@ -33,7 +36,7 @@ declare class WrGauge {
     protected readonly valuePath: _angular_core.Signal<string>;
     protected readonly viewBox = "0 0 100 56";
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrGauge, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrGauge, "wr-gauge", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "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; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrGauge, "wr-gauge", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "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; }; }, {}, never, never, true, never>;
 }
 
 export { WrGauge };

package/types/ngwr-i18n.d.ts

@@ -190,6 +190,21 @@ declare class WrTDirective {
 interface WrI18nLoader {
     load(locale: string, scope: string | null): Observable<WrI18nCatalog>;
 }
+/**
+ * The active loader.
+ *
+ * Defaults to one that serves an empty catalog, which is what makes
+ * `provideWrI18n()` genuinely optional: every ngwr component routes its
+ * built-in strings through `useI18nText` / `readI18nText`, those inject
+ * `WrI18n` optionally — and because `WrI18n` is `providedIn: 'root'`, an
+ * optional inject still CONSTRUCTS it. Without a default here that construction
+ * threw `NG0201: No provider found for WR_I18N_LOADER`, so an app that had
+ * simply not configured i18n could not render `<wr-alert>` at all.
+ *
+ * With the empty catalog, every lookup misses, `t()` hands back the key, and
+ * the helpers fall through to the component's own English default — the
+ * documented no-i18n behaviour.
+ */
 declare const WR_I18N_LOADER: InjectionToken<WrI18nLoader>;
 
 /**

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

@@ -44,6 +44,13 @@ declare class WrInputNumber implements FormValueControl<number | null> {
     readonly suffix: _angular_core.InputSignal<string>;
     /** Placeholder shown when the input is empty. */
     readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Accessible name for the field. Falls back to the placeholder — inside a
+     * `<wr-form-field>` the projected `wrInput` picks up the label's id and needs
+     * neither, but standalone the text field has no name at all.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string | null>;
     /** Disable interaction. @default false */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Read-only — values cannot be changed (steppers + typing disabled). @default false */
@@ -77,7 +84,7 @@ declare class WrInputNumber implements FormValueControl<number | null> {
     /** 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; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, 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; }; "ariaLabel": { "alias": "ariaLabel"; "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.d.ts

@@ -1,4 +1,4 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 
 /**
  * @license
@@ -7,7 +7,7 @@ import * as i0 from '@angular/core';
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 /**
- * Native input `type` values supported by `<wr-input>`.
+ * Native input `type` values supported by ``input[wrInput]``.
  */
 type WrInputType = 'text' | 'number' | 'password' | 'email' | 'search' | 'tel' | 'url';
 
@@ -42,16 +42,40 @@ type WrInputSize = 'sm' | 'md' | 'lg';
  * @see https://ngwr.dev/reference/components/input
  */
 declare class WrInput {
+    private readonly host;
+    private readonly field;
+    /**
+     * Read once, at construction: a static `id=""` in the template is already on
+     * the element by the time a directive is instantiated, and it must win over
+     * the field's generated one.
+     */
+    private readonly ownId;
+    /**
+     * Adopts the surrounding `<wr-form-field>`'s `controlId`, so the label it
+     * already rendered actually points at this element. Without this the `for`
+     * referenced an id that existed nowhere and the input had no label at all.
+     */
+    protected readonly resolvedId: _angular_core.Signal<string | null>;
+    /**
+     * Announced state, taken from the surrounding `<wr-form-field>`.
+     *
+     * The field renders the message but cannot reach the projected control, so
+     * the control reads back: without this the error is visible on screen and
+     * invisible to a screen reader, which never learns the field is invalid or
+     * what the message says.
+     */
+    protected readonly ariaInvalid: _angular_core.Signal<"true" | null>;
+    protected readonly describedBy: _angular_core.Signal<string | null>;
     /**
      * Control size. Named `wrSize` (not `size`) so it never clashes with the
      * native `<input size>` attribute. @default 'md'
      */
-    readonly wrSize: i0.InputSignal<WrInputSize>;
+    readonly wrSize: _angular_core.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, { "wrSize": { "alias": "wrSize"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    readonly rounded: _angular_core.InputSignalWithTransform<boolean, any>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrInput, never>;
+    static ɵdir: _angular_core.ɵɵ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>;
 }
 
 /**
@@ -68,8 +92,8 @@ declare class WrInput {
  * ```
  */
 declare class WrInputPrefix {
-    static ɵfac: i0.ɵɵFactoryDeclaration<WrInputPrefix, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<WrInputPrefix, "[wrInputPrefix]", never, {}, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrInputPrefix, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrInputPrefix, "[wrInputPrefix]", never, {}, {}, never, never, true, never>;
 }
 
 /**
@@ -86,8 +110,8 @@ declare class WrInputPrefix {
  * ```
  */
 declare class WrInputSuffix {
-    static ɵfac: i0.ɵɵFactoryDeclaration<WrInputSuffix, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<WrInputSuffix, "[wrInputSuffix]", never, {}, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrInputSuffix, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrInputSuffix, "[wrInputSuffix]", never, {}, {}, never, never, true, never>;
 }
 
 /**
@@ -112,10 +136,10 @@ declare class WrInputSuffix {
  */
 declare class WrInputGroup {
     /** Pill-shaped corners. @default false */
-    readonly rounded: i0.InputSignalWithTransform<boolean, any>;
-    protected readonly classes: i0.Signal<string>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<WrInputGroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WrInputGroup, "wr-input-group", never, { "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    readonly rounded: _angular_core.InputSignalWithTransform<boolean, any>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrInputGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrInputGroup, "wr-input-group", never, { "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
@@ -133,12 +157,18 @@ declare class WrInputGroup {
  */
 declare class WrPasswordToggle {
     /** Reference to the linked password input. */
-    readonly for: i0.InputSignal<HTMLInputElement>;
-    protected readonly revealed: i0.WritableSignal<boolean>;
-    protected readonly ariaLabel: i0.Signal<"Hide password" | "Show password">;
+    readonly for: _angular_core.InputSignal<HTMLInputElement>;
+    protected readonly revealed: _angular_core.WritableSignal<boolean>;
+    /** Accessible name while the password is hidden. Falls back to `input.showPassword`. */
+    readonly showLabel: _angular_core.InputSignal<string | null>;
+    /** Accessible name while the password is revealed. Falls back to `input.hidePassword`. */
+    readonly hideLabel: _angular_core.InputSignal<string | null>;
+    private readonly resolvedShowLabel;
+    private readonly resolvedHideLabel;
+    protected readonly ariaLabel: _angular_core.Signal<string>;
     protected toggle(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<WrPasswordToggle, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WrPasswordToggle, "wr-password-toggle", never, { "for": { "alias": "for"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrPasswordToggle, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrPasswordToggle, "wr-password-toggle", never, { "for": { "alias": "for"; "required": true; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrInput, WrInputGroup, WrInputPrefix, WrInputSuffix, WrPasswordToggle };

package/types/ngwr-knob.d.ts

@@ -21,6 +21,9 @@ import { FormValueControl } from '@angular/forms/signals';
  * @see https://ngwr.dev/reference/components/knob
  */
 declare class WrKnob implements FormValueControl<number> {
+    /** Accessible name — the role needs one. Falls back to `knob.label`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
     /** Minimum allowed value. @default 0 */
     readonly min: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
     /** Maximum allowed value. @default 100 */
@@ -76,7 +79,7 @@ declare class WrKnob implements FormValueControl<number> {
     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; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrKnob, "wr-knob", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "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-lightbox.d.ts

@@ -19,6 +19,9 @@ import { TemplateRef } from '@angular/core';
  * @see https://ngwr.dev/reference/components/lightbox
  */
 declare class WrLightbox {
+    /** Accessible name. Falls back to `image.close`, then `'Close preview'`. */
+    readonly closeLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedCloseLabel: _angular_core.Signal<string>;
     /** Image source. */
     readonly src: _angular_core.InputSignal<string>;
     /** Alt text. Required for a11y; falls back to an empty string. @default '' */
@@ -44,6 +47,9 @@ declare class WrLightbox {
     private readonly overlay;
     private readonly vcr;
     private readonly destroyRef;
+    private readonly focusTrapFactory;
+    private focusTrap;
+    private previouslyFocused;
     private overlayRef;
     constructor();
     protected onClick(): void;
@@ -57,7 +63,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; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrLightbox, "wr-lightbox", never, { "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "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

@@ -12,7 +12,7 @@ interface WrLineSeries {
  *
  * @example
  * ```html
- * <wr-lineChart
+ * <wr-line-chart
  *   [series]="[
  *     { label: 'Visits', data: [12, 18, 9, 22, 30, 27, 35] },
  *     { label: 'Signups', data: [3, 5, 4, 8, 11, 9, 14], color: 'var(--wr-color-success)' }

package/types/ngwr-media.d.ts

@@ -3,7 +3,7 @@ import { InjectionToken, Signal, EnvironmentProviders } from '@angular/core';
 import * as ngwr_media from 'ngwr/media';
 
 /** Named breakpoint identifiers — match the SCSS `_breakpoints.scss` keys. */
-type WrBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+type WrBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xga' | 'fhd' | 'rt';
 /** Map of breakpoint → minimum viewport width in pixels. */
 type WrBreakpointMap = Readonly<Record<WrBreakpoint, number>>;
 

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

@@ -35,6 +35,9 @@ interface WrMeterSegment {
  * @see https://ngwr.dev/reference/components/meter-group
  */
 declare class WrMeterGroup {
+    /** Accessible name — the role needs one. Falls back to `meterGroup.label`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
     readonly segments: _angular_core.InputSignal<readonly WrMeterSegment[]>;
     /** Explicit total. When `0` (default), `max = sum(values)`. @default 0 */
     readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
@@ -43,6 +46,11 @@ declare class WrMeterGroup {
     /** Show each segment's percent value in the legend. @default true */
     readonly showValues: _angular_core.InputSignalWithTransform<boolean, any>;
     protected readonly resolvedMax: _angular_core.Signal<number>;
+    /**
+     * Sum of the segments, for `aria-valuenow`. `role="progressbar"` without it
+     * announces no value at all, so the bar was invisible to assistive tech.
+     */
+    protected readonly totalValue: _angular_core.Signal<number>;
     protected readonly slices: _angular_core.Signal<{
         label: string;
         value: number;
@@ -50,7 +58,7 @@ declare class WrMeterGroup {
         percent: number;
     }[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrMeterGroup, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrMeterGroup, "wr-meter-group", never, { "segments": { "alias": "segments"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrMeterGroup, "wr-meter-group", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "segments": { "alias": "segments"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrMeterGroup };

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

@@ -11,8 +11,8 @@ import * as _angular_core from '@angular/core';
  * <wr-page-header title="Settings" subtitle="Manage your workspace">
  *   <nav wrPageHeaderBreadcrumbs>…</nav>
  *   <div wrPageHeaderActions>
- *     <button wrButton>Invite</button>
- *     <button wrButton color="primary">Save</button>
+ *     <button wr-btn>Invite</button>
+ *     <button wr-btn color="primary">Save</button>
  *   </div>
  *   <div wrPageHeaderExtra>
  *     <wr-tag>v2.4</wr-tag>

package/types/ngwr-pagination.d.ts

@@ -129,4 +129,4 @@ declare class WrPagination {
 }
 
 export { WrPagination };
-export type { WrPaginationAlign };
+export type { WrPaginationAlign, WrPaginationShape, WrPaginationSize };

package/types/ngwr-progress.d.ts

@@ -12,6 +12,9 @@ import * as _angular_core from '@angular/core';
  * @see https://ngwr.dev/reference/components/progress
  */
 declare class WrProgress {
+    /** Accessible name — `role="progressbar"` needs one. Falls back to `progress.label`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
     /**
      * Bar color.
      *
@@ -27,7 +30,7 @@ declare class WrProgress {
     protected readonly clamped: _angular_core.Signal<number>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrProgress, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrProgress, "wr-progress", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrProgress, "wr-progress", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrProgress };

package/types/ngwr-rating.d.ts

@@ -42,8 +42,9 @@ declare class WrRating implements FormValueControl<number | null> {
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Control size — scales the icons + gaps. @default 'md' */
     readonly size: _angular_core.InputSignal<WrRatingSize>;
-    /** Accessible label. @default 'Rating' */
-    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Accessible label. Falls back to `rating.label`, then `'Rating'`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
     /** The rating. 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. */