ngwr 10.0.0 → 10.1.0

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-toolbar.d.ts

@@ -8,14 +8,14 @@ import * as i0 from '@angular/core';
  * ```html
  * <wr-toolbar>
  *   <div wrToolbarStart>
- *     <button wrButton>Back</button>
+ *     <button wr-btn>Back</button>
  *     <strong>Items</strong>
  *   </div>
  *   <div wrToolbarCenter>
  *     <wr-segmented [(value)]="view" [options]="['grid', 'list']" />
  *   </div>
  *   <div wrToolbarEnd>
- *     <button wrButton color="primary">New</button>
+ *     <button wr-btn color="primary">New</button>
  *   </div>
  * </wr-toolbar>
  * ```

package/types/ngwr-tour.d.ts

@@ -0,0 +1,132 @@
+import * as _angular_core from '@angular/core';
+import * as ngwr_i18n from 'ngwr/i18n';
+
+/**
+ * @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
+ */
+/** Where the step popup sits relative to its target. */
+type WrTourPlacement = 'top' | 'bottom' | 'left' | 'right';
+/** One stop on a tour. */
+interface WrTourStep {
+    /**
+     * What to spotlight — a CSS selector resolved when the step opens, or the
+     * element itself. A step whose selector matches nothing is SKIPPED rather than
+     * shown floating: a tour that points at a control the user cannot see is worse
+     * than one that is a step shorter.
+     */
+    readonly target: string | HTMLElement;
+    /** Heading above the copy. */
+    readonly title?: string;
+    /** The step's body text. */
+    readonly content: string;
+    /** Preferred side. The overlay falls back to the opposite side near an edge. @default 'bottom' */
+    readonly placement?: WrTourPlacement;
+}
+
+/**
+ * Guided product tour: a spotlight over one element at a time plus a popup
+ * explaining it.
+ *
+ * Steps are data, not markup — call `start()` with an array and the service owns
+ * the overlay, the cut-out, focus and the keyboard. A step whose target is not
+ * on the page is skipped rather than shown floating, so a tour survives a
+ * feature being hidden behind a flag or a permission.
+ *
+ * @example
+ * ```ts
+ * private readonly tour = inject(WrTour);
+ *
+ * showMeAround(): void {
+ *   this.tour.start([
+ *     { target: '[data-tour="search"]', title: 'Search', content: 'Find anything by name.' },
+ *     { target: '[data-tour="filters"]', content: 'Narrow the list down.', placement: 'right' },
+ *   ]);
+ * }
+ * ```
+ *
+ * @see https://ngwr.dev/reference/services/tour
+ */
+declare class WrTour {
+    private readonly overlay;
+    private readonly scrollStrategies;
+    private readonly injector;
+    private readonly focusTrapFactory;
+    private readonly document;
+    private readonly isBrowser;
+    private readonly steps;
+    private readonly cursor;
+    private overlayRef;
+    private spotlight;
+    private detachKeydown;
+    private detachReposition;
+    private restoreFocus;
+    /** Whether a tour is running. */
+    readonly active: _angular_core.Signal<boolean>;
+    /** Zero-based index of the current step, `-1` when idle. */
+    readonly index: _angular_core.Signal<number>;
+    /** How many steps this tour has. */
+    readonly total: _angular_core.Signal<number>;
+    /** The step being shown, or `null` when idle. */
+    readonly step: _angular_core.Signal<WrTourStep | null>;
+    /**
+     * Begin a tour. Restarts if one is already running. A no-op under SSR — a
+     * tour is a client-side affordance and there is nothing to spotlight on the
+     * server.
+     */
+    start(steps: readonly WrTourStep[]): void;
+    /** Advance; finishes the tour past the last step. */
+    next(): void;
+    /** Go back; stays put on the first step. */
+    prev(): void;
+    /** End the tour and return focus where it was. */
+    stop(): void;
+    /**
+     * Move to `index`, skipping steps whose target is not in the DOM. `direction`
+     * says which way to keep skipping, so a missing step never traps the tour
+     * between two dead ends.
+     */
+    private goTo;
+    private resolve;
+    private openStep;
+    private placeSpotlight;
+    private teardownStep;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTour, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<WrTour>;
+}
+
+/** What the popup needs from the running tour, without importing the service (cycle). */
+interface WrTourController {
+    readonly index: () => number;
+    readonly total: () => number;
+    readonly step: () => WrTourStep | null;
+    next(): void;
+    prev(): void;
+    stop(): void;
+}
+/**
+ * The card a tour shows next to the spotlit element. Rendered by `WrTour` into
+ * a CDK overlay — not something you place yourself.
+ *
+ * @see https://ngwr.dev/reference/services/tour
+ */
+declare class WrTourPopup {
+    protected readonly tour: WrTourController;
+    protected readonly nextLabel: string;
+    protected readonly backLabel: string;
+    protected readonly doneLabel: string;
+    protected readonly skipLabel: string;
+    /** `Step {{current}} of {{total}}` — also the dialog's accessible name. */
+    protected readonly progress: (params?: ngwr_i18n.WrI18nParams) => string;
+    protected readonly isLast: _angular_core.Signal<boolean>;
+    protected readonly isFirst: _angular_core.Signal<boolean>;
+    protected readonly progressText: _angular_core.Signal<string>;
+    protected readonly ariaLabel: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTourPopup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTourPopup, "wr-tour-popup", never, {}, {}, never, never, true, never>;
+}
+
+export { WrTour, WrTourPopup };
+export type { WrTourPlacement, WrTourStep };

package/types/ngwr-transfer.d.ts

@@ -0,0 +1,118 @@
+import * as ngwr_i18n from 'ngwr/i18n';
+import * as _angular_core from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
+
+/**
+ * @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
+ */
+/** One row in either pane of a `<wr-transfer>`. */
+interface WrTransferItem<TValue = unknown> {
+    /** Identity — what `[(value)]` carries, compared with SameValueZero. */
+    readonly value: TValue;
+    /** Text shown in the pane and matched by the search box. */
+    readonly label: string;
+    /** Greyed out and never moved by the bulk buttons. */
+    readonly disabled?: boolean;
+}
+
+/** A pane's rows plus the header state derived from them. */
+interface PaneState {
+    readonly rows: readonly WrTransferItem[];
+    readonly checkedCount: number;
+    readonly allChecked: boolean;
+    readonly someChecked: boolean;
+}
+/**
+ * Dual-listbox picker: two panes and the buttons that move rows between them.
+ *
+ * The full item set is `[items]` and the RIGHT pane is the value — `[(value)]`
+ * holds the chosen `WrTransferItem['value']`s, everything else stays left. The
+ * checked state inside each pane is transient staging, deliberately not part of
+ * the value: what a form cares about is which rows ended up on the right.
+ *
+ * A signal-forms native control (`FormValueControl<readonly unknown[]>`), so
+ * `[formField]` binds straight to `value`; `[(ngModel)]` and reactive forms keep
+ * working through Angular's bridge, and `[(value)]` is the standalone shape.
+ *
+ * @example
+ * ```html
+ * <!-- Standalone -->
+ * <wr-transfer [items]="permissions" [(value)]="granted" />
+ *
+ * <!-- Searchable, with pane titles -->
+ * <wr-transfer
+ *   searchable
+ *   sourceTitle="Available"
+ *   targetTitle="Granted"
+ *   [items]="permissions"
+ *   [formField]="form.granted"
+ * />
+ * ```
+ *
+ * @see https://ngwr.dev/reference/components/transfer
+ */
+declare class WrTransfer implements FormValueControl<readonly unknown[]> {
+    /** Every row, in either pane. Membership of the right pane is `value`. */
+    readonly items: _angular_core.InputSignal<readonly WrTransferItem<unknown>[]>;
+    /**
+     * Values currently in the RIGHT pane. Two-way bindable; bound automatically
+     * by `[formField]` / `[(ngModel)]`.
+     */
+    readonly value: _angular_core.ModelSignal<readonly unknown[]>;
+    /** Emitted on blur / commit so a bound field marks itself touched. */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /** Disable the whole control. @default false */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Show a filter box above each pane. @default false */
+    readonly searchable: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Heading above the left pane. Falls back to `transfer.source`. */
+    readonly sourceTitle: _angular_core.InputSignal<string | null>;
+    /** Heading above the right pane. Falls back to `transfer.target`. */
+    readonly targetTitle: _angular_core.InputSignal<string | null>;
+    /** Placeholder in both filter boxes. Falls back to `transfer.search`. */
+    readonly searchPlaceholder: _angular_core.InputSignal<string | null>;
+    /** Shown in a pane with no rows. Falls back to `transfer.empty`. */
+    readonly emptyText: _angular_core.InputSignal<string | null>;
+    /** Accessible name of the move-right button. Falls back to `transfer.toTarget`. */
+    readonly toTargetLabel: _angular_core.InputSignal<string | null>;
+    /** Accessible name of the move-left button. Falls back to `transfer.toSource`. */
+    readonly toSourceLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedSourceTitle: _angular_core.Signal<string>;
+    protected readonly resolvedTargetTitle: _angular_core.Signal<string>;
+    protected readonly resolvedSearch: _angular_core.Signal<string>;
+    protected readonly resolvedEmpty: _angular_core.Signal<string>;
+    protected readonly resolvedToTarget: _angular_core.Signal<string>;
+    protected readonly resolvedToSource: _angular_core.Signal<string>;
+    /** `{{checked}} / {{total}}` under each heading. @internal */
+    protected readonly countLabel: (params?: ngwr_i18n.WrI18nParams) => string;
+    /** Pane order — the template iterates it so both panes share one block. */
+    protected readonly panes: readonly ["source", "target"];
+    private readonly sourceQuery;
+    private readonly targetQuery;
+    /** Staged rows, per pane. Cleared as soon as a move commits them. */
+    private readonly sourceChecked;
+    private readonly targetChecked;
+    private readonly valueSet;
+    protected readonly source: _angular_core.Signal<PaneState>;
+    protected readonly target: _angular_core.Signal<PaneState>;
+    protected readonly canMoveRight: _angular_core.Signal<boolean>;
+    protected readonly canMoveLeft: _angular_core.Signal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected isChecked(pane: 'source' | 'target', item: WrTransferItem): boolean;
+    protected toggle(pane: 'source' | 'target', item: WrTransferItem, checked: boolean): void;
+    /** Header checkbox — stages or clears every enabled row the filter shows. */
+    protected toggleAll(pane: 'source' | 'target', checked: boolean): void;
+    protected onSearch(pane: 'source' | 'target', event: Event): void;
+    protected moveRight(): void;
+    protected moveLeft(): void;
+    /** Filter, then derive the header state from what survived. */
+    private pane;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTransfer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTransfer, "wr-transfer", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "sourceTitle": { "alias": "sourceTitle"; "required": false; "isSignal": true; }; "targetTitle": { "alias": "targetTitle"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "toTargetLabel": { "alias": "toTargetLabel"; "required": false; "isSignal": true; }; "toSourceLabel": { "alias": "toSourceLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+}
+
+export { WrTransfer };
+export type { WrTransferItem };

package/types/ngwr-tree.d.ts

@@ -93,6 +93,14 @@ declare class WrTree<TId = string> implements FormValueControl<unknown> {
     readonly openOn: _angular_core.InputSignal<"inline" | "overlay">;
     /** Placeholder shown on the trigger when no node is selected. */
     readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Accessible name of the overlay trigger. Falls back to the placeholder, then
+     * to `select.label` — a `role="combobox"` with nothing selected and no
+     * placeholder otherwise has no name at all.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    private readonly labelText;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
     /** Show a clear-all (×) button on the trigger when at least one node is selected. @default true */
     readonly clearable: _angular_core.InputSignalWithTransform<boolean, any>;
     /**
@@ -145,7 +153,7 @@ declare class WrTree<TId = string> implements FormValueControl<unknown> {
     private readonly platformId;
     /** Currently focused row's index in the flattened visible list. */
     protected readonly focusedIndex: _angular_core.WritableSignal<number>;
-    /** Resolved ARIA labels — pick up live locale changes via re-render. */
+    /** Resolved ARIA labels — resolved once at construction, so a runtime locale switch needs a re-create. */
     protected readonly clearLabel: string;
     protected readonly expandLabel: string;
     protected readonly collapseLabel: string;
@@ -225,7 +233,7 @@ declare class WrTree<TId = string> implements FormValueControl<unknown> {
     private openOverlay;
     private closeOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTree<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTree<any>, "wr-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "openOn": { "alias": "openOn"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; "defaultExpandAll": { "alias": "defaultExpandAll"; "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; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "expanded": "expandedChange"; "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTree<any>, "wr-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "openOn": { "alias": "openOn"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; "defaultExpandAll": { "alias": "defaultExpandAll"; "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; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "expanded": "expandedChange"; "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrTree };