ngwr 13.0.1 → 14.0.0

package/types/ngwr-pagination.d.ts

@@ -42,13 +42,13 @@ type PageEntry = number | typeof ELLIPSIS;
 /**
  * Numbered page navigator with optional total / page-size controls.
  *
- * Two-way binds `currentPage` and `pageSize` via signal `model()` inputs.
+ * Two-way binds `page` and `pageSize` via signal `model()` inputs.
  *
  * @example
  * ```html
  * <wr-pagination
  *   [total]="120"
- *   [(currentPage)]="page"
+ *   [(page)]="page"
  *   [(pageSize)]="size"
  *   showTotal
  *   showSizeChanger
@@ -58,8 +58,16 @@ type PageEntry = number | typeof ELLIPSIS;
  * @see https://ngwr.dev/reference/components/pagination
  */
 declare class WrPagination {
-    /** Currently displayed page (1-based). Two-way bindable. */
-    readonly currentPage: _angular_core.ModelSignal<number>;
+    /**
+     * Currently displayed page (1-based). Two-way bindable.
+     *
+     * `page` rather than `currentPage` since v14, so this and `<wr-table>` — which
+     * renders one of these in its own footer — spell the two concepts they share
+     * one way each. It also names the output: a `model()` called `X` forces
+     * `(XChange)`, so the old name produced `(currentPageChange)` against the
+     * table's `(pageChange)`.
+     */
+    readonly page: _angular_core.ModelSignal<number>;
     /** Items per page. Two-way bindable. */
     readonly pageSize: _angular_core.ModelSignal<number>;
     /** Total item count across all pages. */
@@ -84,8 +92,6 @@ declare class WrPagination {
      * width, not the viewport). @default false
      */
     readonly responsive: _angular_core.InputSignalWithTransform<boolean, any>;
-    /** Localised text between range and total ("X–Y of Z"). Falls back to `pagination.of` then `'of'`. */
-    readonly ofLabel: _angular_core.InputSignal<string | null>;
     /** Previous-page button aria-label. Falls back to `pagination.prev`. */
     readonly prevLabel: _angular_core.InputSignal<string | null>;
     /** Next-page button aria-label. Falls back to `pagination.next`. */
@@ -95,7 +101,6 @@ declare class WrPagination {
     /** 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>;
@@ -113,7 +118,7 @@ declare class WrPagination {
     protected readonly totalPages: _angular_core.Signal<number>;
     /**
      * Internal: where the previous arrow goes. Clamped to the end of the valid
-     * range rather than being a plain `currentPage() - 1`, because the page can
+     * range rather than being a plain `page() - 1`, because the page can
      * legitimately sit past that end while `total` is 0 (see the guard effect).
      * From page 5 of one page, `goTo(4)` is refused as out of range, so the arrow
      * was enabled and did nothing — and under `responsive` on a narrow box the
@@ -122,8 +127,32 @@ declare class WrPagination {
      * past-the-end refusal keeps working as the backstop it is.
      */
     protected readonly prevPage: _angular_core.Signal<number>;
-    /** Internal: "X–Y of Z" string. */
+    /**
+     * Internal: the "1–10 of 235" line, as ONE catalog template.
+     *
+     * It used to be `` `${start}-${end} ${of} ${total}` ``, which localised the
+     * word in the middle and nothing else: the ASCII hyphen between the bounds and
+     * the operand order were both frozen in TypeScript, so ja-JP and ar-SA got
+     * English word order and no language could change the range separator. The
+     * three numbers go through `Intl.NumberFormat` for the same reason the total
+     * beside them does — a five-figure total needs the locale's grouping, and
+     * ar-SA needs its own digits.
+     *
+     * The `ofLabel` input is gone with it: an input for the middle word is the
+     * concatenation, re-offered as API.
+     */
     protected readonly rangeLabel: _angular_core.Signal<string>;
+    /** Internal: the compact pager's `1 / 24`, likewise a catalog template. */
+    protected readonly compactLabel: _angular_core.Signal<string>;
+    private readonly rangeText;
+    private readonly compactText;
+    private readonly locale;
+    /**
+     * Grouped per `LOCALE_ID`. Only the range and the compact pager go through
+     * this — a page NUMBER on a button is an identifier, and `1,024` on a button
+     * reads as two things.
+     */
+    private number;
     /**
      * Internal: page list with ellipses. Window of 7 visible page slots.
      *
@@ -142,7 +171,7 @@ declare class WrPagination {
     constructor();
     protected onSizeChange(size: unknown): 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; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "pageSize": "pageSizeChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrPagination, "wr-pagination", never, { "page": { "alias": "page"; "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; }; "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; }; }, { "page": "pageChange"; "pageSize": "pageSizeChange"; }, never, never, true, never>;
 }
 
 export { WrPagination };

package/types/ngwr-popconfirm.d.ts

@@ -64,7 +64,7 @@ declare class WrPopconfirm {
      */
     private isRtl;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrPopconfirm, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrPopconfirm, "[wrPopconfirm]", never, { "message": { "alias": "wrPopconfirm"; "required": true; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "confirmText": { "alias": "confirmText"; "required": false; "isSignal": true; }; "cancelText": { "alias": "cancelText"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "confirmColor": { "alias": "confirmColor"; "required": false; "isSignal": true; }; }, { "confirmed": "confirmed"; "cancelled": "cancelled"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrPopconfirm, "[wrPopconfirm]", ["wrPopconfirm"], { "message": { "alias": "wrPopconfirm"; "required": true; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "confirmText": { "alias": "confirmText"; "required": false; "isSignal": true; }; "cancelText": { "alias": "cancelText"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "confirmColor": { "alias": "confirmColor"; "required": false; "isSignal": true; }; }, { "confirmed": "confirmed"; "cancelled": "cancelled"; }, never, never, true, never>;
 }
 
 /**

package/types/ngwr-popover.d.ts

@@ -111,7 +111,7 @@ declare class WrPopover {
      */
     private isRtl;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrPopover, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrPopover, "[wrPopover]", never, { "content": { "alias": "wrPopover"; "required": true; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "showDelay": { "alias": "showDelay"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "hideDelay"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrPopover, "[wrPopover]", ["wrPopover"], { "content": { "alias": "wrPopover"; "required": true; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "showDelay": { "alias": "showDelay"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "hideDelay"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
 }
 
 export { WrPopover };

package/types/ngwr-select.d.ts

@@ -53,10 +53,12 @@ interface WrSelectOptionRegistration {
     readonly value: unknown;
     readonly disabled: boolean;
     /**
-     * Lazy label reader. Options render text via `<ng-content>`, so we
-     * read it at call time once Angular has settled the projected content.
+     * The option's text, as a signal. Options render it via `<ng-content>`, so it
+     * is read back off the DOM — and it has to be reactive, because the ordinary
+     * way it changes is a translation catalog landing after the first pass. A
+     * plain reader let the trigger cache the English fallback forever.
      */
-    readonly getLabel: () => string;
+    readonly label: Signal<string>;
     /**
      * The option's own element, when it has one. The keyboard cursor walks the
      * registry, and registration order is CREATION order — projected children are
@@ -104,8 +106,8 @@ interface WrSelectContext {
     /** Is the given option value currently selected? Handles both single and multi. */
     isSelected(value: unknown): boolean;
     /**
-     * Called when a child option is clicked. The label is read lazily
-     * via {@link WrSelectOptionRegistration.getLabel}, so callers don't
+     * Called when a child option is clicked. The label rides along on the
+     * registration ({@link WrSelectOptionRegistration.label}), so callers don't
      * need to thread it through.
      */
     selectOption(value: unknown): void;
@@ -510,7 +512,19 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     /** Id of the active option (for `aria-activedescendant`). */
     readonly activeOptionId: _angular_core.Signal<string | null>;
     protected readonly open: _angular_core.WritableSignal<boolean>;
-    protected readonly selectedLabel: _angular_core.WritableSignal<string | null>;
+    /**
+     * Trigger label for single mode. Multi reads `selectedChips` instead.
+     *
+     * A `computed`, and that is the whole point. It used to be a `signal` written
+     * from an effect keyed on `value` / `registry` / `isMulti` / `displayWith` —
+     * not one of which moves when the OPTION'S OWN TEXT does, and that text is
+     * projected content whose ordinary way of changing is a translation catalog
+     * landing a microtask after the first pass. The trigger kept the English
+     * fallback while the open panel beside it showed the translation. The
+     * registration now carries the label as a signal, so a late catalog and a
+     * runtime locale switch both repaint the trigger with the panel.
+     */
+    protected readonly selectedLabel: _angular_core.Signal<string | null>;
     /**
      * Selected chips (multi + tag modes). Multi reads labels from the
      * registered `<wr-option>` children; tag uses each raw string as
@@ -619,6 +633,17 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     protected focusSearchInput(): void;
     protected onChipsInput(event: Event): void;
     protected onChipsKeydown(event: KeyboardEvent): void;
+    /**
+     * True when the key belongs to an open IME conversion — and, when it does,
+     * stops the event on its way out.
+     *
+     * Not acting is not enough here. The panel closes on Escape from CDK's overlay
+     * keyboard dispatcher, one listener on `<body>` in the bubble phase, so a
+     * handler that merely returns still loses the panel: the Japanese user meant
+     * to cancel a reading and lost the query with it. Stopping the event at the
+     * field that owns the composition is the only place that reaches both.
+     */
+    private imeOwnsKey;
     protected onChipsFocus(): void;
     protected onChipsPaste(event: ClipboardEvent): void;
     protected onChipsBlur(): void;
@@ -724,22 +749,52 @@ declare class WrOption {
     readonly id: string;
     private readonly host;
     private readonly parent;
+    /**
+     * The option's own text, as a signal — the parent's trigger label and the
+     * client-side filter both read it from here.
+     *
+     * It has to be a signal, and a plain `textContent` read cannot be one. The
+     * label is PROJECTED content: the host template decides it, and the ordinary
+     * way it changes is that a `WrI18n` catalog lands a microtask after the first
+     * change-detection pass (`i18n/i18n.ts` writes every loader-backed catalog
+     * from `firstValueFrom(...).then(...)`). Read once and cached, a trigger sat
+     * on the English fallback while the open panel beside it showed the
+     * translation — visible in `wr-pagination`'s size changer, which prints
+     * `pagination.perPage` into each `<wr-option>`.
+     *
+     * Kept in step the way `wr-divider` keeps its own projected label: an
+     * `effect` and an `afterEveryRender`, and both are needed. The render hook is
+     * a hard no-op under SSR, so on its own the server would emit a trigger with
+     * no label at all; the effect is not gated that way and runs after the
+     * content has been projected. The effect on its own cannot follow text that
+     * moves later, because it reads nothing reactive to be re-run by.
+     *
+     * @internal
+     */
+    private readonly labelText;
+    private readonly label;
     /**
      * @internal — true when this option is currently selected. Works for
      * both single and multi-select parents via `WrSelectContext.isSelected`.
      */
-    protected readonly selected: _angular_core.Signal<boolean>;
+    protected readonly selected: Signal<boolean>;
     /** @internal — true when this option is the keyboard cursor target. */
-    protected readonly active: _angular_core.Signal<boolean>;
+    protected readonly active: Signal<boolean>;
     /**
      * @internal — searchable selects only. True when the parent has a query that
      * the option's text content does not match (case-insensitive substring).
      * Hidden options stay in the DOM so registration order survives but
      * collapse via CSS.
      */
-    protected readonly hidden: _angular_core.Signal<boolean>;
-    protected readonly classes: _angular_core.Signal<string>;
+    protected readonly hidden: Signal<boolean>;
+    protected readonly classes: Signal<string>;
     constructor();
+    /**
+     * Read the projected text back off the DOM. Setting the same string again is
+     * a signal no-op, so the render hook costs a `textContent` read and nothing
+     * else on the passes where nothing moved.
+     */
+    private syncLabel;
     protected onClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrOption, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrOption, "wr-option", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;

package/types/ngwr-splitter-testing.d.ts

@@ -7,6 +7,13 @@ import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 
+/**
+ * An arrow key, by the direction a user would say out loud — the parameter type
+ * of `WrSplitterHarness.pressArrow`, exported so a consumer's own test helper can
+ * name what it forwards. Arrows follow the VISUAL axis, so `left` shrinks the
+ * position in LTR and grows it in RTL.
+ */
+type WrSplitterArrowKey = 'left' | 'right' | 'up' | 'down';
 /** Narrows which `<wr-splitter>` a harness query matches. */
 interface WrSplitterHarnessFilters extends BaseHarnessFilters {
     /**
@@ -35,8 +42,6 @@ interface WrSplitterPaneSizes {
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 
-/** The four arrow keys, by the direction a user would say out loud. */
-type Arrow = 'left' | 'right' | 'up' | 'down';
 /**
  * Test harness for `<wr-splitter>` — two panes and the divider between them.
  *
@@ -135,7 +140,7 @@ declare class WrSplitterHarness extends ComponentHarness {
      *
      * `shift` is the coarse step: 10 instead of 1.
      */
-    pressArrow(arrow: Arrow, options?: {
+    pressArrow(arrow: WrSplitterArrowKey, options?: {
         shift?: boolean;
     }): Promise<void>;
     /** Press Home — jumping to `minPosition`, whatever the reading direction. */
@@ -171,4 +176,4 @@ declare class WrSplitterHarness extends ComponentHarness {
 }
 
 export { WrSplitterHarness };
-export type { WrSplitterHarnessFilters, WrSplitterPaneSizes };
+export type { WrSplitterArrowKey, WrSplitterHarnessFilters, WrSplitterPaneSizes };

package/types/ngwr-squircle.d.ts

@@ -107,7 +107,7 @@ declare class WrSquircle {
     private apply;
     private clear;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSquircle, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrSquircle, "[wrSquircle]", never, { "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "smoothing": { "alias": "smoothing"; "required": false; "isSignal": true; }; "enabled": { "alias": "enabled"; "required": false; "isSignal": true; }; "borderWidth": { "alias": "borderWidth"; "required": false; "isSignal": true; }; "borderColor": { "alias": "borderColor"; "required": false; "isSignal": true; }; "corners": { "alias": "corners"; "required": false; "isSignal": true; }; }, { "enabled": "enabledChange"; "borderWidth": "borderWidthChange"; "borderColor": "borderColorChange"; "corners": "cornersChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrSquircle, "[wrSquircle]", ["wrSquircle"], { "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "smoothing": { "alias": "smoothing"; "required": false; "isSignal": true; }; "enabled": { "alias": "enabled"; "required": false; "isSignal": true; }; "borderWidth": { "alias": "borderWidth"; "required": false; "isSignal": true; }; "borderColor": { "alias": "borderColor"; "required": false; "isSignal": true; }; "corners": { "alias": "corners"; "required": false; "isSignal": true; }; }, { "enabled": "enabledChange"; "borderWidth": "borderWidthChange"; "borderColor": "borderColorChange"; "corners": "cornersChange"; }, never, never, true, never>;
 }
 
 /**

package/types/ngwr-statistic.d.ts

@@ -59,10 +59,30 @@ declare class WrStatistic {
      * Use `deltaSuffix` to change the trailing unit.
      */
     readonly delta: _angular_core.InputSignalWithTransform<number | null, unknown>;
-    /** Unit appended to the delta value. @default '%' */
-    readonly deltaSuffix: _angular_core.InputSignal<string>;
+    /** Unit appended to the delta value. Falls back to `statistic.deltaSuffix`, then `'%'`. */
+    readonly deltaSuffix: _angular_core.InputSignal<string | null>;
     protected readonly hasDelta: _angular_core.Signal<boolean>;
     protected readonly deltaDirection: _angular_core.Signal<"up" | "down" | "flat">;
+    protected readonly resolvedDeltaSuffix: _angular_core.Signal<string>;
+    /** `{{value}}{{suffix}}` — the join, so a locale owns the space before the unit. */
+    private readonly deltaFormat;
+    /**
+     * The delta chip, e.g. `+12.4%`.
+     *
+     * It was `` `${sign}${d}${suffix}` ``, printed one line under a value that
+     * goes through `Intl.NumberFormat` — so the two disagreed inside one
+     * component: ar-SA showed `١٬٢٣٤٬٥٦٧٫٨٩` above a Latin `12.4%`, and de-DE
+     * `1.234.567,89` above `+12.4%`. The sign comes from `signDisplay`, which also
+     * fixes the RTL half of it: `+` written by hand is a neutral character that
+     * the BiDi algorithm moves to the other end of the number.
+     *
+     * The digit count is taken from the number rather than from `precision()`,
+     * which describes the VALUE and not the delta — so what renders is the same
+     * digits as before, in the locale's own numerals. One exception, and it is an
+     * improvement rather than a regression: a magnitude JavaScript prints in
+     * exponent notation (`1e-7`, `1e+21`) used to reach the DOM that way and is
+     * now formatted as a number.
+     */
     protected readonly deltaText: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrStatistic, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrStatistic, "wr-statistic", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "precision": { "alias": "precision"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "duration": { "alias": "duration"; "required": false; "isSignal": true; }; "delta": { "alias": "delta"; "required": false; "isSignal": true; }; "deltaSuffix": { "alias": "deltaSuffix"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;

package/types/ngwr-table.d.ts

@@ -145,7 +145,7 @@ interface WrTableColumn {
     /**
      * Footer aggregate for this column — renders a summary row when any column
      * sets it. Computed over the current `items`, so in server-side mode
-     * (`totalItems` set) it reflects the current page, not the whole dataset.
+     * (`total` set) it reflects the current page, not the whole dataset.
      */
     readonly summary?: WrTableSummary;
 }
@@ -471,8 +471,16 @@ declare class WrTable {
      * Total row count for server-side pagination — when set, the table
      * shows the pager but does NOT slice `items` (you provide the current
      * page's slice yourself and react to `(page)` changes).
+     *
+     * Spelled `total` / `page` to match `<wr-pagination>`, which is the control
+     * this input renders. The two used to disagree about both words — `totalItems`
+     * / `page` here against `total` / `currentPage` there — which is a real cost
+     * for two components designed to sit on one screen. `null` rather than `0` is
+     * the difference that remains, and it carries meaning: it is the OFF switch
+     * for server mode, where the pager's own `total` is a count and `0` means an
+     * empty list.
      */
-    readonly totalItems: _angular_core.InputSignal<number | null>;
+    readonly total: _angular_core.InputSignal<number | null>;
     /**
      * Window the `<tbody>` so a table of thousands of rows keeps only ~one
      * viewport of `<tr>`s in the DOM. Opt-in and OFF by default — a table
@@ -481,7 +489,7 @@ declare class WrTable {
      * Engages ONLY on the flat, fixed-height tier: it silently falls back to the
      * full render whenever a variable-height layout is active — `groupBy`, a
      * `[wrTableExpand]` template, `responsive` card mode, or a visible pager
-     * (`pageSize > 0` / `totalItems`). While on, it forces fixed layout for
+     * (`pageSize > 0` / `total`). While on, it forces fixed layout for
      * stable column widths and assumes a uniform row height (see `rowHeight`).
      *
      * Intended as static config. Give columns an explicit `width` so the frozen
@@ -737,7 +745,7 @@ declare class WrTable {
      * titles, then one row per item in the current column order. Values are taken
      * from the row data, not from custom `[wrTableCell]` templates.
      *
-     * Covers the current `items`, so in server-side mode (`totalItems` set) it
+     * Covers the current `items`, so in server-side mode (`total` 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.
@@ -771,7 +779,7 @@ declare class WrTable {
     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; }; "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; }; "loadingLabel": { "alias": "loadingLabel"; "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; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "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>;
 }
 
 /**
@@ -907,6 +915,17 @@ declare class WrTableFilter {
     protected readonly selectedCount: _angular_core.Signal<number>;
     protected readonly classes: _angular_core.Signal<string>;
     protected onSearchInput(event: Event): void;
+    /**
+     * Hands every key back to the input method while a conversion is open.
+     *
+     * The dropdown this panel lives in closes on Escape, and it hears the key from
+     * CDK's overlay keyboard dispatcher — one listener on `<body>`, in the bubble
+     * phase. So not acting is not enough: the event has to be stopped here, at the
+     * field that owns the composition, or Escape cancels the reading AND takes the
+     * whole filter panel with it. Nothing else in this component reads a key, so
+     * stopping all of them during a conversion costs nothing.
+     */
+    protected onSearchKeydown(event: KeyboardEvent): void;
     protected onToggle(item: WrTableFilterItem): void;
     protected onReset(): void;
     private emitSelected;

package/types/ngwr-tabs-router.d.ts

@@ -0,0 +1,67 @@
+import { WrTabsRoutingAdapter } from 'ngwr/tabs';
+import * as i0 from '@angular/core';
+
+/**
+ * Router support for `<wr-tabs>`. Add it to the `imports` of the component that
+ * declares a strip whose `<wr-tab>`s carry a `routerLink`:
+ *
+ * @example
+ * ```ts
+ * import { WrTab, WrTabs } from 'ngwr/tabs';
+ * import { WrTabsRouting } from 'ngwr/tabs/router';
+ *
+ * @Component({ imports: [WrTabs, WrTab, WrTabsRouting], template: `
+ *   <wr-tabs wrTabsRouting>
+ *     <wr-tab title="Overview" routerLink="overview" />
+ *     <wr-tab title="Details" routerLink="details" />
+ *   </wr-tabs>
+ *   <router-outlet />
+ * ` })
+ * export class SettingsPage {}
+ * ```
+ *
+ * Two mechanical edits per strip, both codemoddable: the symbol in `imports`,
+ * and `wrTabsRouting` on the element. An attribute rather than a selector on
+ * `wr-tabs` itself, for two reasons — where the router enters a template should
+ * be visible in that template, and the sandbox's selector map keys a `wr-` tag
+ * even when it is qualified, so `wr-tabs[wrTabsRouting]` would be a second claim
+ * on the `wr-tabs` tag. Putting it on an ANCESTOR of the strip also works: the
+ * token is read through the element injector, which walks up.
+ *
+ * **Why it is a separate entry point.** A directive listed in `imports: []`
+ * lands in the compiled component's `dependencies` whether or not the branch of
+ * the template that matches it ever runs, so `RouterLink` + `RouterLinkActive`
+ * on the strip charged every CONTENT tab strip 73.9 kB of `@angular/router` —
+ * 51% of what `ngwr/tabs` cost in an app that declares no routes. Measured with
+ * source-map attribution against a routerless baseline. `@angular/router` is
+ * already an optional peer dependency of the package; this is what makes that
+ * true in bytes.
+ *
+ * **Why a directive rather than a provider function.** A relative `routerLink`
+ * (`routerLink="overview"`) resolves against the `ActivatedRoute` of the
+ * component that declares the strip. A root-level provider would resolve every
+ * one of them against the root route instead, and quietly build the wrong
+ * hrefs; a directive on the element reads the same `ActivatedRoute` the old
+ * `RouterLink` inside the strip's template did.
+ */
+declare class WrTabsRouting implements WrTabsRoutingAdapter {
+    private readonly router;
+    private readonly locationStrategy;
+    private readonly route;
+    /**
+     * The current URL, as a signal, so `href()` and `isActive()` are reactive to
+     * navigation when read from a computed. `isActive` obviously has to be; so
+     * does `href`, because a RELATIVE link is resolved against the active route
+     * and its target moves when the route does — which is why `RouterLink`
+     * recomputes its own href on every navigation too.
+     */
+    private readonly url;
+    href(commands: string | readonly string[]): string;
+    isActive(commands: string | readonly string[]): boolean;
+    navigate(commands: string | readonly string[], event: MouseEvent): void;
+    private tree;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrTabsRouting, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrTabsRouting, "[wrTabsRouting]", ["wrTabsRouting"], {}, {}, never, never, true, never>;
+}
+
+export { WrTabsRouting };

package/types/ngwr-tabs-testing.d.ts

@@ -112,7 +112,7 @@ declare class WrTabHarness extends ContentContainerComponentHarness {
      *
      * `aria-selected` first, because that is the state a screen reader acts on and
      * the `--active` class is only what it looks like. Both shapes carry it now — a
-     * router tab publishes it off the same `routerLinkActive` that paints the class —
+     * router tab publishes it off the same `routerActive()` that paints the class —
      * so the class is a fallback for a tab that has neither yet, not a second reading
      * of the same thing. The order is not interchangeable: reading the class first
      * would report a tab as selected while `aria-selected="false"` told assistive tech
@@ -193,11 +193,11 @@ declare class WrTabHarness extends ContentContainerComponentHarness {
      * Activate this tab the way a pointer does.
      *
      * A disabled CONTENT tab is left alone: it is a real `<button disabled>`, which
-     * fires no click at all. A disabled ROUTER tab is NOT — the anchor carries
-     * `aria-disabled="true"` and `tabindex="-1"`, and nothing cancels its
-     * `routerLink`, so a click on it still navigates. That is a gap in the component
-     * rather than in this harness, and it is why a router strip's expectations belong
-     * on the resolved route rather than on the click.
+     * fires no click at all. A disabled ROUTER tab is an `<a>`, where `disabled` is
+     * not a thing — it carries `aria-disabled="true"` and `tabindex="-1"` to stay off
+     * the keyboard path, renders NO href, and the component drops the click rather
+     * than routing it. So the click lands and nothing moves, which is why a router
+     * strip's expectations belong on the resolved route rather than on the click.
      */
     click(): Promise<void>;
     /** Move keyboard focus onto this header. */
@@ -244,7 +244,7 @@ declare class WrTabHarness extends ContentContainerComponentHarness {
  *   renders exactly one panel: the selected tab's.
  * - **Router** — one `routerLink` on any child switches the whole strip over. The
  *   tabs become `<a role="tab">`s whose `aria-selected` follows the resolved route
- *   (the same `routerLinkActive` that paints `--active`), the strip renders NO
+ *   (the same `routerActive()` that paints `--active`), the strip renders NO
  *   panel, and it stops being one tab stop — every enabled tab is a Tab stop of its
  *   own. The arrow keys still move focus, but they select nothing: the route does
  *   that.
@@ -348,9 +348,11 @@ declare class WrTabsHarness extends ComponentHarness {
      *
      * A router strip is otherwise fine here: the click starts a route change, the
      * harness stabilizes the pending navigation before it re-reads the strip, and
-     * `routerLinkActive` has painted the selection by then — so this resolves. It is a
-     * guard, a redirect or an unmatched path that leaves the tab unselected. Note that
-     * `disabled` does not stop a router tab at all; see {@link WrTabHarness.click}.
+     * `routerActive()` has painted the selection by then — so this resolves. It is a
+     * guard, a redirect or an unmatched path that leaves the tab unselected. A
+     * DISABLED router tab is a different shape and no longer navigates: it renders
+     * no href and the component drops the click, so the click lands and nothing
+     * moves — see {@link WrTabHarness.click}.
      */
     select(filters: WrTabHarnessFilters): Promise<void>;
     /**