ngwr 9.1.0 → 10.1.0

package/types/ngwr-pagination.d.ts

@@ -1,3 +1,4 @@
+import * as ngwr_i18n from 'ngwr/i18n';
 import * as _angular_core from '@angular/core';
 
 /**
@@ -91,11 +92,23 @@ declare class WrPagination {
     readonly nextLabel: _angular_core.InputSignal<string | null>;
     /** "Items per page" label. Falls back to `pagination.itemsPerPage`. */
     readonly itemsPerPageLabel: _angular_core.InputSignal<string | null>;
+    /** Accessible name for the `role="navigation"` host. Falls back to `pagination.label`. */
+    readonly label: _angular_core.InputSignal<string | null>;
     /** Resolved labels. */
     protected readonly resolvedOf: _angular_core.Signal<string>;
     protected readonly resolvedPrev: _angular_core.Signal<string>;
     protected readonly resolvedNext: _angular_core.Signal<string>;
     protected readonly resolvedItemsPerPage: _angular_core.Signal<string>;
+    /**
+     * Page-size option text — interpolates `{{size}}`. Was the template literal
+     * `{{ option }} / page`, which no catalog could reach, so a Russian UI read
+     * "25 / page".
+     */
+    protected readonly perPage: (params?: ngwr_i18n.WrI18nParams) => string;
+    /** Per-page-button aria-label — interpolates `{{page}}`. */
+    protected readonly goToPage: (params?: ngwr_i18n.WrI18nParams) => string;
+    /** The nav landmark's own accessible name — was a hardcoded English literal. */
+    protected readonly navLabel: _angular_core.Signal<string>;
     /** Internal: total page count. */
     protected readonly totalPages: _angular_core.Signal<number>;
     /** Internal: "X–Y of Z" string. */
@@ -112,8 +125,8 @@ declare class WrPagination {
     protected goTo(page: number | typeof ELLIPSIS): void;
     protected onSizeChange(size: number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrPagination, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrPagination, "wr-pagination", never, { "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "showSizeChanger": { "alias": "showSizeChanger"; "required": false; "isSignal": true; }; "showTotal": { "alias": "showTotal"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "ofLabel": { "alias": "ofLabel"; "required": false; "isSignal": true; }; "prevLabel": { "alias": "prevLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "itemsPerPageLabel": { "alias": "itemsPerPageLabel"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "pageSize": "pageSizeChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrPagination, "wr-pagination", never, { "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "showSizeChanger": { "alias": "showSizeChanger"; "required": false; "isSignal": true; }; "showTotal": { "alias": "showTotal"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "ofLabel": { "alias": "ofLabel"; "required": false; "isSignal": true; }; "prevLabel": { "alias": "prevLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "itemsPerPageLabel": { "alias": "itemsPerPageLabel"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "pageSize": "pageSizeChange"; }, never, never, true, never>;
 }
 
 export { WrPagination };
-export type { WrPaginationAlign };
+export type { WrPaginationAlign, WrPaginationShape, WrPaginationSize };

package/types/ngwr-popconfirm.d.ts

@@ -43,6 +43,7 @@ declare class WrPopconfirm {
     readonly cancelled: _angular_core.OutputEmitterRef<void>;
     private readonly host;
     private readonly overlay;
+    private readonly outsideClick;
     private readonly vcr;
     private readonly scrollStrategies;
     private readonly destroyRef;

package/types/ngwr-popover.d.ts

@@ -51,6 +51,7 @@ declare class WrPopover {
     readonly closed: _angular_core.OutputEmitterRef<void>;
     private readonly host;
     private readonly overlay;
+    private readonly outsideClick;
     private readonly responsiveConfig;
     private readonly vcr;
     private readonly scrollStrategies;

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

package/types/ngwr-result.d.ts

@@ -10,11 +10,11 @@ type WrResultStatus = 'success' | 'warning' | 'error' | 'info' | 'empty';
  * @example
  * ```html
  * <wr-result status="success" title="Submitted!" description="We'll be in touch.">
- *   <button wrButton color="primary" wrResultExtra>Continue</button>
+ *   <button wr-btn color="primary" wrResultExtra>Continue</button>
  * </wr-result>
  *
  * <wr-result status="empty" title="No projects yet">
- *   <button wrButton wrResultExtra>Create one</button>
+ *   <button wr-btn wrResultExtra>Create one</button>
  * </wr-result>
  * ```
  *
@@ -35,27 +35,33 @@ declare class WrResult {
  * @example
  * ```html
  * <wr-result-404>
- *   <button wrButton wrResultExtra>Back home</button>
+ *   <button wr-btn wrResultExtra>Back home</button>
  * </wr-result-404>
  * ```
  */
 declare class WrResult404 {
     readonly title: _angular_core.InputSignal<string>;
-    readonly description: _angular_core.InputSignal<string>;
+    /** Body text. Falls back to `result.notFound` from WrI18n. */
+    readonly description: _angular_core.InputSignal<string | null>;
+    protected readonly desc: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrResult404, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrResult404, "wr-result-404", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 /** Pre-set 403 result — forbidden / no access. */
 declare class WrResult403 {
     readonly title: _angular_core.InputSignal<string>;
-    readonly description: _angular_core.InputSignal<string>;
+    /** Body text. Falls back to `result.forbidden` from WrI18n. */
+    readonly description: _angular_core.InputSignal<string | null>;
+    protected readonly desc: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrResult403, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrResult403, "wr-result-403", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 /** Pre-set 500 result — internal server error. */
 declare class WrResult500 {
     readonly title: _angular_core.InputSignal<string>;
-    readonly description: _angular_core.InputSignal<string>;
+    /** Body text. Falls back to `result.serverError` from WrI18n. */
+    readonly description: _angular_core.InputSignal<string | null>;
+    protected readonly desc: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrResult500, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrResult500, "wr-result-500", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/types/ngwr-segmented.d.ts

@@ -18,6 +18,12 @@ interface WrSegmentedOption<T = unknown> {
     readonly value: T;
     readonly label?: string;
     readonly icon?: WrIconName;
+    /**
+     * Accessible name for an icon-only option. Without a `label` the button has
+     * no text at all, so assistive tech announced nothing; when this is omitted
+     * the option's `value` is used as a last resort.
+     */
+    readonly ariaLabel?: string;
     readonly disabled?: boolean;
 }
 

package/types/ngwr-select.d.ts

@@ -21,8 +21,8 @@ import { Observable } from 'rxjs';
  * - `'multi'`  — array value, chips on the trigger, options toggle on click.
  * - `'search'` — type-ahead with sync filter or async loader (replaces
  *   the standalone `<wr-autocomplete>`).
- * - `'tag'`    — free-text + chips, with optional `allowCreate` /
- *   `createValidator` for typed lists (replaces `<wr-chips-input>`).
+ * - `'tag'`    — free-text + chips, with `separators` / `validate` /
+ *   `allowDuplicates` (replaces `<wr-chips-input>`).
  */
 type WrSelectMode = 'single' | 'multi' | 'search' | 'tag';
 /**
@@ -166,8 +166,6 @@ 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/reference/components/select
  */
@@ -178,6 +176,14 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     readonly clearLabel: _angular_core.InputSignal<string | null>;
     protected readonly resolvedPlaceholder: _angular_core.Signal<string>;
     protected readonly resolvedClear: _angular_core.Signal<string>;
+    /**
+     * Accessible name of the trigger. Falls back to the placeholder, then to
+     * `select.label` — `role="combobox"` on an empty trigger otherwise has no name
+     * at all, which is the common case before anything is selected.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    private readonly labelText;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
     /** Per-chip ARIA label — interpolates `{{label}}`. @internal */
     protected readonly chipRemoveLabel: (params?: ngwr_i18n.WrI18nParams) => string;
     /**
@@ -204,8 +210,8 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
      *
      * - `'single'` (default) — one value, no input. Classic dropdown.
      * - `'multi'` — array value, chips on the trigger.
-     * - `'search'` *(planned)* — type-ahead with sync filter or async loader.
-     * - `'tag'` *(planned)* — free-text + chips with optional `allowCreate`.
+     * - `'search'` — type-ahead with sync filter or async loader.
+     * - `'tag'` — free-text + chips.
      *
      */
     readonly mode: _angular_core.InputSignal<WrSelectMode | null>;
@@ -499,6 +505,7 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     protected readonly searchDisplay: _angular_core.Signal<string>;
     private readonly host;
     private readonly overlay;
+    private readonly outsideClick;
     private readonly responsiveConfig;
     private readonly vcr;
     private readonly scrollStrategies;
@@ -532,7 +539,7 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     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; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchQuery": { "alias": "searchQuery"; "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; }; "serverSearch": { "alias": "serverSearch"; "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; }; "loading": { "alias": "loading"; "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; }; }, { "searchQuery": "searchQueryChange"; "searchChange": "searchChange"; "value": "valueChange"; "touch": "touch"; }, ["projectedOptions"], ["*"], 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; }; "ariaLabel": { "alias": "ariaLabel"; "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; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchQuery": { "alias": "searchQuery"; "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; }; "serverSearch": { "alias": "serverSearch"; "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; }; "loading": { "alias": "loading"; "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; }; }, { "searchQuery": "searchQueryChange"; "searchChange": "searchChange"; "value": "valueChange"; "touch": "touch"; }, ["projectedOptions"], ["*"], true, never>;
 }
 
 /**
@@ -591,6 +598,11 @@ declare class WrOption {
 declare class WrOptionGroup {
     /** Section heading shown above the options. */
     readonly label: _angular_core.InputSignal<string>;
+    /**
+     * `role="group"` alone announces an unnamed group — the visible heading has to
+     * be wired to it for the name to reach a screen reader.
+     */
+    protected readonly labelId: string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrOptionGroup, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrOptionGroup, "wr-option-group", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

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

@@ -27,11 +27,9 @@ declare class WrShinyText {
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Time for the bright stripe to traverse the text, in seconds. @default 2 */
     readonly speed: _angular_core.InputSignalWithTransform<number, unknown>;
-    /** Base text colour (outside the bright stripe). @default '#b5b5b5' */
-    /** Base text colour. When unset, the theme decides. */
+    /** Base text colour outside the bright stripe. Unset falls back to `--wr-shiny-text-base`. */
     readonly color: _angular_core.InputSignal<string | null>;
-    /** Bright stripe colour. @default '#ffffff' */
-    /** Sweep highlight colour. When unset, the theme decides. */
+    /** Sweep highlight colour. Unset falls back to the theme token. */
     readonly shineColor: _angular_core.InputSignal<string | null>;
     /** Gradient angle in degrees. @default 120 */
     readonly spread: _angular_core.InputSignalWithTransform<number, unknown>;

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

@@ -30,6 +30,12 @@ type WrSpeedDialDirection = 'up' | 'down' | 'left' | 'right';
  */
 declare class WrSpeedDial {
     readonly actions: _angular_core.InputSignal<readonly WrSpeedDialAction[]>;
+    /**
+     * Accessible name of the trigger. Falls back to `speedDial.label`, then
+     * `'Actions'` — the trigger is icon-only, so without this it has no name at all.
+     */
+    readonly triggerLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedTriggerLabel: _angular_core.Signal<string>;
     /** Direction the actions fan out. @default 'up' */
     readonly direction: _angular_core.InputSignal<WrSpeedDialDirection>;
     /** Two-way bindable open state. @default false */
@@ -50,7 +56,7 @@ declare class WrSpeedDial {
     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; }; "safeArea": { "alias": "safeArea"; "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; }; "triggerLabel": { "alias": "triggerLabel"; "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-squircle.d.ts

@@ -49,7 +49,7 @@ type WrSquircleCornerMask = 'all' | 'left' | 'right' | 'top' | 'bottom' | 'none'
  *
  * @example
  * ```html
- * <button wrButton wrSquircle [radius]="16">Save</button>
+ * <button wr-btn wrSquircle [radius]="16">Save</button>
  * <wr-tag wrSquircle>v2.0</wr-tag>
  * <div wrSquircle [radius]="32" [smoothing]="0.8">…</div>
  * <div wrSquircle [borderWidth]="2" borderColor="var(--wr-color-primary)">…</div>

package/types/ngwr-switch.d.ts

@@ -21,6 +21,12 @@ import { FormCheckboxControl } from '@angular/forms/signals';
  */
 type WrSwitchSize = 'sm' | 'md' | 'lg';
 declare class WrSwitch implements FormCheckboxControl {
+    /**
+     * Accessible name for a switch used WITHOUT projected text. The wrapping
+     * `<label>` names the control whenever content is projected; with none, the
+     * label is empty and the input has no name at all.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
     /** Stable id used to associate the native input with its label. */
     readonly id: _angular_core.InputSignal<string>;
     /**
@@ -40,7 +46,7 @@ declare class WrSwitch implements FormCheckboxControl {
     protected onInputChange(event: Event): void;
     protected onInputBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSwitch, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSwitch, "wr-switch", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "touch": "touch"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSwitch, "wr-switch", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "touch": "touch"; }, never, ["*"], true, never>;
 }
 
 export { WrSwitch };

package/types/ngwr-table.d.ts

@@ -207,6 +207,16 @@ type RenderRow = {
     readonly kind: 'row';
     readonly id: string;
     readonly row: Record<string, unknown>;
+    /** 0 for a flat table and for every root; +1 per level in tree mode. */
+    readonly depth: number;
+    /** Whether this row owns a child array — drives the toggle vs the spacer. */
+    readonly parent: boolean;
+    /** Open state, `null` for a leaf (so `aria-expanded` is omitted entirely). */
+    readonly open: boolean | null;
+    /** 1-based position among its siblings, for `aria-posinset`. */
+    readonly posinset: number;
+    /** Sibling count, for `aria-setsize`. */
+    readonly setsize: number;
 } | {
     readonly kind: 'group-foot';
     readonly id: string;
@@ -238,7 +248,7 @@ type RenderRow = {
 declare class WrTable {
     /** Column definitions, keyed by row property name. */
     readonly columns: _angular_core.InputSignal<WrTableColumns>;
-    /** Row items. `null`/`undefined` → loading skeleton. */
+    /** Row items. `null`/`undefined` renders the empty state; use `[loading]` for the spinner. */
     readonly items: _angular_core.InputSignal<readonly Record<string, unknown>[] | null | undefined>;
     /** Show the loading spinner overlay. @default false */
     readonly loading: _angular_core.InputSignalWithTransform<boolean, any>;
@@ -287,6 +297,44 @@ declare class WrTable {
      * @default null
      */
     readonly groupBy: _angular_core.InputSignal<string | ((row: Record<string, unknown>) => unknown) | null>;
+    /**
+     * Render the rows as a hierarchy: names the property (or computes the array)
+     * holding each row's children. `items` then means the ROOTS, and the forest is
+     * flattened depth-first into the same `<tbody>` — child rows are ordinary
+     * `<tr>`s going through the same cell loop, so column pin / resize /
+     * drag-reorder and `[wrTableCell]` templates keep working at every depth.
+     *
+     * Open state reuses the `expanded` model and row identity reuses `rowKey`, so
+     * a tree needs no second key space. Everything collapsed is the default.
+     *
+     * **Mutually exclusive with `groupBy`** — a forest has no flat list to bucket,
+     * so grouping wins and the hierarchy is ignored while it is set. Also
+     * mutually exclusive with `[wrTableExpand]` detail rows: both own the row's
+     * disclosure affordance.
+     *
+     * `pageSize` pages the ROOTS; a root brings its open descendants with it.
+     *
+     * @example
+     * ```html
+     * <wr-table
+     *   rowKey="id"
+     *   childrenKey="reports"
+     *   treeColumn="name"
+     *   [columns]="columns"
+     *   [items]="org"
+     *   [(expanded)]="open"
+     * />
+     * ```
+     */
+    readonly childrenKey: _angular_core.InputSignal<string | ((row: Record<string, unknown>) => readonly Record<string, unknown>[] | null | undefined) | null>;
+    /**
+     * Which column carries the indent and the expand toggle. Keyed, not
+     * positional, so it survives a `columnOrder` drag. Defaults to whichever
+     * column renders first.
+     */
+    readonly treeColumn: _angular_core.InputSignal<string | null>;
+    /** Accessible name of a parent row's expand toggle. Falls back to `table.toggleRow`. */
+    readonly toggleRowLabel: _angular_core.InputSignal<string | null>;
     /**
      * Two-way bindable collapsed group values (the values `groupBy` returns).
      * Keyed by value, so a collapsed group stays collapsed across page changes and
@@ -306,6 +354,28 @@ declare class WrTable {
     readonly showGroupCount: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Two-way bindable sort array. Order in array = application order. */
     readonly sort: _angular_core.ModelSignal<readonly WrTableSortState[]>;
+    /** Text shown when there are no rows. Falls back to `table.empty`. */
+    readonly emptyLabel: _angular_core.InputSignal<string | null>;
+    /** Accessible name of a column's sort button. Falls back to `table.sort`. */
+    readonly sortLabel: _angular_core.InputSignal<string | null>;
+    /** Accessible name of the select-all checkbox. Falls back to `table.selectAll`. */
+    readonly selectAllLabel: _angular_core.InputSignal<string | null>;
+    /** Accessible name of a row's select checkbox. Falls back to `table.selectRow`. */
+    readonly selectRowLabel: _angular_core.InputSignal<string | null>;
+    /** Accessible name of a row's expand toggle. Falls back to `table.expandRow`. */
+    readonly expandRowLabel: _angular_core.InputSignal<string | null>;
+    /** Accessible name of a group band's select checkbox. Falls back to `table.selectGroup`. */
+    readonly selectGroupLabel: _angular_core.InputSignal<string | null>;
+    /** Accessible name of a group band's collapse toggle. Falls back to `table.toggleGroup`. */
+    readonly toggleGroupLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedEmptyLabel: _angular_core.Signal<string>;
+    protected readonly resolvedSortLabel: _angular_core.Signal<string>;
+    protected readonly resolvedSelectAllLabel: _angular_core.Signal<string>;
+    protected readonly resolvedSelectRowLabel: _angular_core.Signal<string>;
+    protected readonly resolvedExpandRowLabel: _angular_core.Signal<string>;
+    protected readonly resolvedToggleRowLabel: _angular_core.Signal<string>;
+    protected readonly resolvedSelectGroupLabel: _angular_core.Signal<string>;
+    protected readonly resolvedToggleGroupLabel: _angular_core.Signal<string>;
     /** Fires whenever a column's filter selection changes. */
     readonly filterChange: _angular_core.OutputEmitterRef<WrTableFilterChange>;
     /**
@@ -453,6 +523,11 @@ declare class WrTable {
     protected readonly sortPredicate: (index: number) => boolean;
     private rowKeyOf;
     /** Keys of the rows on the current page — the select-all scope. */
+    /**
+     * Scope of the header select-all: the rows currently ON SCREEN. In tree mode
+     * that is every VISIBLE node — a collapsed subtree is not on screen and is not
+     * swept in, which keeps the checkbox honest about what it just did.
+     */
     private readonly pageRowKeys;
     protected isRowSelected(row: Record<string, unknown>): boolean;
     /** Every current-page row selected (drives the header checkbox). */
@@ -465,7 +540,33 @@ declare class WrTable {
     protected toggleAll(checked: boolean): void;
     private readonly expandTpl;
     /** Whether the expand column shows (a `[wrTableExpand]` template was projected). */
+    /**
+     * Tree mode is on when `childrenKey` is set AND grouping is not. Grouping wins
+     * deliberately: `groupBy` buckets a flat list and a forest has none, so rather
+     * than half-support the pair the hierarchy is ignored while a group is set.
+     */
+    protected readonly treeMode: _angular_core.Signal<boolean>;
+    /** Detail rows and tree rows both own the row's disclosure — tree mode wins. */
     protected readonly expandable: _angular_core.Signal<boolean>;
+    /** The column that carries the indent + toggle — named, else whichever renders first. */
+    protected readonly treeColumnKey: _angular_core.Signal<string | null>;
+    /** This row's children, whatever shape `childrenKey` names. */
+    private childrenOf;
+    /**
+     * Depth-first flatten of the forest, descending only into open parents.
+     * `seen` is path-scoped rather than global: the same row legitimately appearing
+     * under two parents is fine, a row appearing under itself is a cycle and would
+     * otherwise hang the walk.
+     */
+    private flattenForest;
+    /** Every node in the forest, depth-first — what selection and CSV must see. */
+    private allTreeRows;
+    /** Open / close one parent row. */
+    protected toggleTreeRow(row: Record<string, unknown>): void;
+    /** Open every parent in the forest. */
+    expandAllRows(): void;
+    /** Close every parent. */
+    collapseAllRows(): void;
     /** Leading control columns — selection + expand. */
     protected readonly leadingCols: _angular_core.Signal<number>;
     /** Total rendered columns (data + leading), for detail-row / empty colspans. */
@@ -517,25 +618,38 @@ declare class WrTable {
      * Covers the current `items`, so in server-side mode (`totalItems` set) it
      * exports the current page, while client-side pagination exports every page.
      *
+     * Returns the string; use `exportCsv()` when you want it downloaded as a file.
+     *
      * @example
-     * ```html
-     * <wr-table #table [columns]="columns" [items]="rows" />
-     * <wr-btn (click)="table.exportCsv({ filename: 'users.csv' })">Export</wr-btn>
+     * ```ts
+     * const csv = this.table().toCsv({ delimiter: ';' });
      * ```
      */
     toCsv(options?: WrTableCsvOptions): string;
     /** Download the table as a CSV file. No-op on the server. */
     exportCsv(options?: WrTableCsvOptions): void;
+    /**
+     * Every row of the dataset. Flat that is `items`; in tree mode it is the whole
+     * forest depth-first, so selection, CSV and the grand summary count children
+     * instead of silently reporting roots only.
+     */
+    private datasetRows;
     private selectedRows;
     private computeSummary;
     protected directionFor(key: string): WrTableSortDirection;
+    /**
+     * `aria-sort` for a column header, per the WAI-ARIA table pattern. Only a
+     * sortable column gets the attribute at all: on a plain column it would claim
+     * the header is sortable when it is not.
+     */
+    protected ariaSortFor(key: string, sortable: boolean | undefined): 'ascending' | 'descending' | 'none' | null;
     protected cycleSort(key: string): void;
     protected onFilter(key: string, items: readonly WrTableFilterItem[]): void;
     protected cellContext(item: Record<string, unknown>, key: string, column: unknown): WrTableCellContext;
     protected getValue(item: Record<string, unknown>, key: unknown): unknown;
     protected templateFor(key: unknown): TemplateRef<WrTableCellContext> | undefined;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTable, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTable, "wr-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "columnOrder": { "alias": "columnOrder"; "required": false; "isSignal": true; }; "rowSelection": { "alias": "rowSelection"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "collapsedGroups": { "alias": "collapsedGroups"; "required": false; "isSignal": true; }; "groupSummary": { "alias": "groupSummary"; "required": false; "isSignal": true; }; "showGroupCount": { "alias": "showGroupCount"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "totalItems": { "alias": "totalItems"; "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; }; }, { "columnOrder": "columnOrderChange"; "selection": "selectionChange"; "expanded": "expandedChange"; "collapsedGroups": "collapsedGroupsChange"; "sort": "sortChange"; "filterChange": "filterChange"; "page": "pageChange"; }, ["cellTemplates", "expandTpl", "groupTpl"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTable, "wr-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "columnOrder": { "alias": "columnOrder"; "required": false; "isSignal": true; }; "rowSelection": { "alias": "rowSelection"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "childrenKey": { "alias": "childrenKey"; "required": false; "isSignal": true; }; "treeColumn": { "alias": "treeColumn"; "required": false; "isSignal": true; }; "toggleRowLabel": { "alias": "toggleRowLabel"; "required": false; "isSignal": true; }; "collapsedGroups": { "alias": "collapsedGroups"; "required": false; "isSignal": true; }; "groupSummary": { "alias": "groupSummary"; "required": false; "isSignal": true; }; "showGroupCount": { "alias": "showGroupCount"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "sortLabel": { "alias": "sortLabel"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "selectRowLabel": { "alias": "selectRowLabel"; "required": false; "isSignal": true; }; "expandRowLabel": { "alias": "expandRowLabel"; "required": false; "isSignal": true; }; "selectGroupLabel": { "alias": "selectGroupLabel"; "required": false; "isSignal": true; }; "toggleGroupLabel": { "alias": "toggleGroupLabel"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "totalItems": { "alias": "totalItems"; "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; }; }, { "columnOrder": "columnOrderChange"; "selection": "selectionChange"; "expanded": "expandedChange"; "collapsedGroups": "collapsedGroupsChange"; "sort": "sortChange"; "filterChange": "filterChange"; "page": "pageChange"; }, ["cellTemplates", "expandTpl", "groupTpl"], never, true, never>;
 }
 
 /**
@@ -634,6 +748,12 @@ declare class WrTableSort {
  */
 declare class WrTableFilter {
     /** Available filter options. */
+    /** Accessible name of the filter trigger. Falls back to `table.filter`. */
+    readonly filterLabel: _angular_core.InputSignal<string | null>;
+    /** Text shown when the search finds nothing. Falls back to `table.noMatches`. */
+    readonly noMatchesLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedFilterLabel: _angular_core.Signal<string>;
+    protected readonly resolvedNoMatchesLabel: _angular_core.Signal<string>;
     readonly items: _angular_core.InputSignal<readonly WrTableFilterItem<unknown>[]>;
     /** Fires whenever the selection changes. */
     readonly selectionChange: _angular_core.OutputEmitterRef<readonly WrTableFilterItem<unknown>[]>;
@@ -647,7 +767,7 @@ declare class WrTableFilter {
     protected onReset(): void;
     private emitSelected;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTableFilter, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTableFilter, "wr-table-filter", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTableFilter, "wr-table-filter", never, { "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "noMatchesLabel": { "alias": "noMatchesLabel"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": true; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
 }
 
 export { WrTable, WrTableCell, WrTableExpand, WrTableFilter, WrTableGroupHeader, WrTableSort };

package/types/ngwr-tabs.d.ts

@@ -104,10 +104,7 @@ declare class WrTabs implements WrTabsContext {
     /** Content-mode: the tab whose key matches `active()` (or the first tab if none yet). */
     protected readonly activeTab: _angular_core.Signal<WrTab | null>;
     activate(key: string): void;
-    register({ key }: {
-        key: string;
-        routerLink: unknown;
-    }): void;
+    register(): void;
     unregister(): void;
     protected readonly stripRef: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
     /** Whether the strip is scrolled away from its start / end — drives the edge fades. */

package/types/ngwr-textarea.d.ts

@@ -28,6 +28,13 @@ type WrTextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
 declare class WrTextarea implements FormValueControl<string> {
     /** Native placeholder text. @default '' */
     readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Accessible name for the field. Falls back to the placeholder — the native
+     * `<textarea>` lives inside the component, so a `<label for>` outside cannot
+     * reach it.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string | null>;
     /** Control size — shares the `--wr-control-*` contract. @default 'md' */
     readonly size: _angular_core.InputSignal<WrTextareaSize>;
     /** Visible row count. @default 3 */
@@ -78,7 +85,7 @@ declare class WrTextarea implements FormValueControl<string> {
     protected endResize(event: PointerEvent): void;
     private autofit;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTextarea, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTextarea, "wr-textarea", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "autosize": { "alias": "autosize"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "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<WrTextarea, "wr-textarea", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "autosize": { "alias": "autosize"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "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 { WrTextarea };

package/types/ngwr-theme.d.ts

@@ -116,7 +116,14 @@ declare class WrTheme {
  */
 
 /**
- * Configure {@link WrTheme}. Partial — merged with defaults.
+ * Configure and activate {@link WrTheme}. Config is partial — merged with
+ * defaults.
+ *
+ * Calling this is all it takes: the initializer instantiates {@link WrTheme},
+ * whose constructor effect mirrors the resolved theme onto `<html>`. Without
+ * that, the service (a tree-shakable `@Service()`) would only be created once
+ * something injected it, so `[data-theme]` was never written and an app that
+ * followed the docs silently ignored `defaultMode: 'auto'`.
  *
  * @example
  * ```ts