ngwr 11.2.0 → 12.1.0

package/types/ngwr-select.d.ts

@@ -194,6 +194,48 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
     /** Per-chip ARIA label — interpolates `{{label}}`. @internal */
     protected readonly chipRemoveLabel: (params?: ngwr_i18n.WrI18nParams) => string;
+    /**
+     * The overflow chip past `maxTagCount` — interpolates `{{count}}`. Through the
+     * catalog, like every other string here: printed as a bare `+{{ extra }} more`
+     * it stayed English in a fully localized app, beside an event-calendar cell
+     * reading "ещё 3" from the same string. @internal
+     */
+    protected readonly moreLabel: (params?: ngwr_i18n.WrI18nParams) => string;
+    private readonly field;
+    /**
+     * Id the surrounding `<wr-form-field>`'s `<label for>` points at.
+     *
+     * The field renders its label before it can see what was projected into it, so
+     * the id travels the other way and the control adopts it, exactly as `[wrInput]`
+     * and `wr-slider` do. Without this the `for` named an element that was nowhere in
+     * the document: clicking the label did nothing, and the field's own text reached
+     * the control through no path at all.
+     *
+     * It lands on the ONE focusable element each trigger shape has — the button, the
+     * search input, or the tag input — never on the host, because only a labelable
+     * element can be a label's target and `<wr-select>` is not one.
+     *
+     * What this does NOT change is that element's NAME: `aria-label` outranks a
+     * `<label>` in the accname order, and the trigger keeps `resolvedAriaLabel()`
+     * because the field cannot promise it has a name to give — `<wr-form-field>`
+     * renders a label only when its `label` input is set, and a combobox that traded
+     * a generic name for no name would be the worse bug. `WrFormFieldContext`
+     * publishes no "do I have a visible label" signal to key that on. Until it does,
+     * set `[ariaLabel]` to the field's label where the two should read alike.
+     */
+    protected readonly controlId: _angular_core.Signal<string | null>;
+    /**
+     * The field's error message, wired to the same element.
+     *
+     * Without it the messages `<wr-form-field>` renders are visible and nothing else:
+     * a screen reader on the trigger never learns the field is invalid, nor what the
+     * message says. `aria-invalid` is keyed on the message EXISTING rather than on
+     * `errorKeys()`, because the field only publishes an id once it is showing
+     * something — announcing "invalid" while pointing at nothing is worse than
+     * staying quiet.
+     */
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    protected readonly ariaInvalid: _angular_core.Signal<"true" | null>;
     /**
      * Disable the select. Bound automatically from the field's disabled state
      * when used with `[formField]`.
@@ -465,7 +507,17 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     protected readonly dynamicOptions: _angular_core.Signal<readonly unknown[]>;
     private static readonly FALLBACK_ROW_PX;
     private static readonly FALLBACK_VIEWPORT_PX;
-    /** Consumer-projected `<wr-option>` children only (NOT the `@for`-rendered ones). */
+    /**
+     * Consumer-projected `<wr-option>` children only (NOT the `@for`-rendered ones
+     * — those live in the panel's own view, which a content query never sees).
+     *
+     * `descendants: true` because a projected option is as often wrapped in a
+     * `<wr-option-group>` as it is a direct child, and the signal default is
+     * `false`. A grouped list therefore read as NO projected options: `virtualActive`
+     * engaged over the (empty) data array, so the panel rendered the group's rows
+     * with a virtual window beside them that owned the keyboard — no
+     * `aria-activedescendant`, no active row, and Enter committing nothing.
+     */
     private readonly projectedOptions;
     /**
      * `dynamicOptions()` narrowed to the current search query. `dynamicOptions()`
@@ -475,9 +527,9 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
      */
     protected readonly filteredDynamicOptions: _angular_core.Signal<readonly unknown[]>;
     /**
-     * Virtualization engaged: opt-in, search mode, a non-empty filtered array, and
-     * NO projected `<wr-option>` children (those keep the full-render registry path
-     * so their DOM-derived labels / selection still work).
+     * Virtualization engaged: opt-in, search mode, and NO projected `<wr-option>`
+     * children — grouped ones included (those keep the full-render registry path so
+     * their DOM-derived labels / selection still work).
      *
      * NOT gated on there being matches. It used to also require
      * `filteredDynamicOptions().length > 0`, which meant a query matching nothing
@@ -576,8 +628,18 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     isSelected(value: unknown): boolean;
     selectOption(value: unknown): void;
     registerOption(reg: WrSelectOptionRegistration): () => void;
-    /** Remove one selection (chip × button). Works for multi and tag modes. */
-    protected removeChip(value: unknown, event: Event): void;
+    /**
+     * Remove one selection (chip × button) BY POSITION. Works for multi and tag
+     * modes.
+     *
+     * Positional, not by value: under `allowDuplicates` two chips carry the same
+     * string, and a filter on equality deleted every copy at once — one click on
+     * the second "red" took both reds with it. `visibleChips()` slices the HEAD
+     * of `selectedChips()`, which maps the value array one for one, so the
+     * `$index` a chip was rendered with indexes the value array directly. The
+     * multi-mode toggle in `selectOption` was already positional.
+     */
+    protected removeChip(index: number, event: Event): void;
     /** Clear every selection (× button). Multi/tag → empty array; search → null. */
     protected clearAll(event: Event): void;
     /** Capacity check used by tag mode to refuse the next add. */

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

@@ -52,8 +52,10 @@ declare class WrShinyText {
  * Gradient sweep over text. Applies a `background-clip: text` gradient
  * with a moving highlight — gives any text a subtle shimmer.
  *
- * The directive only adds the `wr-shimmer` host class. Pair with the
- * styles in `ngwr/animations` (which include the `wr-shimmer` keyframes).
+ * The directive only adds the `wr-shimmer` host class. Pair with the styles
+ * in `ngwr/shiny-text` (`@use 'ngwr/shiny-text'`), which carry the
+ * `.wr-shimmer` rule and its keyframes; the umbrella `@use 'ngwr'` forwards
+ * the same sheet.
  *
  * @example
  * ```html

package/types/ngwr-sidebar.d.ts

@@ -75,17 +75,26 @@ declare class WrSidebar {
     private readonly uid;
     private readonly router;
     private readonly currentUrl;
-    /** Last URL we auto-expanded — prevents re-opening a group the user collapsed. */
+    /**
+     * Last URL we resolved to a group — prevents re-opening one the user collapsed.
+     * A URL no entry claims is deliberately NOT recorded: see the effect below.
+     */
     private lastAutoUrl;
     constructor();
     protected isOpen(title: string): boolean;
     /**
      * Stable id for the group body, referenced by the toggle's `aria-controls`.
-     * Scoped to this sidebar and stripped of anything that is not id-safe: a title
-     * like `Data & charts` used to produce `wr-sidebar-group-data-&-charts`, which
-     * no selector can address.
+     *
+     * Keyed by POSITION, not by the title. Slugging the title kept the id readable
+     * but was not injective: it lowercases and collapses every non-`[a-z0-9]` run,
+     * so `Data & charts` and `Data / charts` produced the same string, and a title
+     * with no ASCII alphanumerics at all — `Компоненты`, `数据` — produced the empty
+     * one. A whole Russian or Chinese sidebar therefore emitted N identical ids and
+     * every toggle's `aria-controls` resolved to the FIRST group's body. The toggle
+     * and its body read `$index` from the same `@for` iteration, so the two always
+     * name each other — reordering `entries` renumbers both together.
      */
-    protected groupBodyId(title: string): string;
+    protected groupBodyId(index: number): string;
     protected toggleGroup(title: string): void;
     protected asItem(entry: WrSidebarEntry): WrSidebarItem;
     protected asGroup(entry: WrSidebarEntry): WrSidebarGroup;

package/types/ngwr-slider.d.ts

@@ -69,6 +69,63 @@ declare class WrSlider implements FormValueControl<WrSliderValue> {
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Render the current value below the track. @default true */
     readonly showLabel: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Accessible name of the thumb — the single one, or the LOWER one in range
+     * mode. Falls back to `slider.label` / `slider.lower`.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    /** Accessible name of the upper thumb in range mode. Falls back to `slider.upper`. */
+    readonly upperLabel: _angular_core.InputSignal<string | null>;
+    /**
+     * A thumb projects no text, so these ARE the accessible names — and they were
+     * hard-coded English with no key behind them, so every slider on a page
+     * announced the same untranslated "Value" whatever it controlled.
+     *
+     * Range mode reads `ariaLabel` as the LOWER end rather than as the whole
+     * control: a name given once must land on something, and naming both thumbs
+     * the same thing would read two different values under one name.
+     */
+    private readonly singleLabel;
+    private readonly lowerLabel;
+    protected readonly resolvedUpperLabel: _angular_core.Signal<string>;
+    protected readonly resolvedLowLabel: _angular_core.Signal<string>;
+    private readonly field;
+    /**
+     * Id the surrounding `<wr-form-field>`'s `<label for>` points at, put on the
+     * single thumb — the LOWER one in range mode, the same end `ariaLabel` names.
+     *
+     * The field renders its label before it can see what was projected into it, so
+     * the id travels the other way and the control adopts it, exactly as
+     * `[wrInput]` does. Without this the `for` named an element that was nowhere
+     * in the document: clicking the label did nothing, and the field's own text
+     * reached the thumb through no path at all.
+     *
+     * It lands on the THUMB rather than on the host because only a labelable
+     * element can be a label's target, and `<wr-slider>` is not one — a `for`
+     * pointing at the host would resolve and still name nothing. The thumb is a
+     * real `<button>`, so it is.
+     *
+     * What this does NOT change is the thumb's name: an `aria-label` outranks a
+     * `<label>` in the accname order, and the thumb keeps its own because the
+     * field cannot promise it has one to give — `<wr-form-field>` renders a label
+     * only when `label` is set, and a slider that traded a generic name for no
+     * name would be the worse bug. Set `[ariaLabel]` to the field's label where
+     * the two should read alike.
+     */
+    protected readonly thumbId: _angular_core.Signal<string | null>;
+    /**
+     * The field's error message, wired to the thumb the same way `wrInput` wires it
+     * to its native element.
+     *
+     * Without this the messages `<wr-form-field>` renders are visible and nothing
+     * else: a screen reader on the thumb never learns the field is invalid, nor
+     * what the message says. `aria-invalid` is keyed on the message EXISTING rather
+     * than on `errorKeys()`, because the field only publishes an id once it is
+     * showing something — announcing "invalid" while pointing at nothing is worse
+     * than staying quiet.
+     */
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    protected readonly ariaInvalid: _angular_core.Signal<"true" | null>;
     /**
      * Current value. Bound by `[formField]`, or two-way via `[(value)]`. Shape
      * follows `range`: a plain `number`, or `[low, high]` in range mode.
@@ -116,6 +173,17 @@ declare class WrSlider implements FormValueControl<WrSliderValue> {
     protected onPointerDown(event: PointerEvent, thumb: 'low' | 'high'): void;
     protected onTrackPointerDown(event: PointerEvent): void;
     protected onKey(event: KeyboardEvent, thumb: 'low' | 'high'): void;
+    /**
+     * A bound field learns it may show its validation copy from `touch`, and
+     * pointer-up plus a value-changing keypress cannot be the only sources: a
+     * slider tabbed into and out of without an arrow press left the field
+     * untouched forever — which is exactly the case `touched` exists for, and
+     * what this output has always documented itself as doing. `wr-knob` and
+     * `wr-rating` bind `(blur)` on the one element they own; this component has
+     * two thumbs, so it listens for the bubbling `focusout` on its host instead
+     * — and ignores the one that only moves focus from one thumb to the other.
+     */
+    protected onFocusOut(event: FocusEvent): void;
     private isRtl;
     /**
      * The value under a pointer, measured along the track's INLINE axis.
@@ -142,7 +210,7 @@ declare class WrSlider implements FormValueControl<WrSliderValue> {
     private percentOf;
     private emitChange;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSlider, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSlider, "wr-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSlider, "wr-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "upperLabel": { "alias": "upperLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrSlider };

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

@@ -46,14 +46,12 @@ interface WrSpeedDialActionHarnessFilters extends BaseHarnessFilters {
  * @see https://ngwr.dev/guides/testing
  */
 declare class WrSpeedDialActionHarness extends ComponentHarness {
-    /** The action button. `role="menuitem"` sits on this element too. */
+    /** The action button. */
     static hostSelector: string;
     /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
     static with(options?: WrSpeedDialActionHarnessFilters): HarnessPredicate<WrSpeedDialActionHarness>;
     /** The action's accessible name — what a screen reader reads, and what `title` shows. */
     getLabel(): Promise<string | null>;
-    /** The role the action announces — `menuitem`. */
-    getRole(): Promise<string | null>;
     /** Whether the action draws an icon rather than a letter. */
     hasIcon(): Promise<boolean>;
     /** The icon's registered name, from `wr-icon`'s reflected `data-icon`, or `null`. */
@@ -136,15 +134,22 @@ declare class WrSpeedDialHarness extends ComponentHarness {
     isDisabled(): Promise<boolean>;
     /** Whether the host is padded for the device's safe area (`safeArea`). */
     hasSafeArea(): Promise<boolean>;
-    /** The role the action list announces — `menu`. */
+    /**
+     * The role the action list announces — `list`.
+     *
+     * Worth asking despite being a plain `<ul>`: the list is styled `list-style: none`,
+     * which drops the implicit list semantics in Safari, so the role is written out. It
+     * is deliberately NOT `menu` — that role promises arrows, Home/End and a single tab
+     * stop, none of which this component has.
+     */
     getMenuRole(): Promise<string | null>;
     /**
-     * Whether the trigger's `aria-controls` names THIS dial's menu, and nothing else on
-     * the page.
+     * Whether the trigger's `aria-controls` names THIS dial's action list, and nothing
+     * else on the page.
      *
      * Both halves matter. The id is resolved inside the host first, so a trigger
-     * pointing at a SIBLING dial's menu — which resolves perfectly well from the
-     * document — fails here. Then it is counted across the document, because two menus
+     * pointing at a SIBLING dial's list — which resolves perfectly well from the
+     * document — fails here. Then it is counted across the document, because two lists
      * answering to one id hand every reference to whichever comes first.
      */
     isMenuBound(): Promise<boolean>;
@@ -179,9 +184,8 @@ declare class WrSpeedDialHarness extends ComponentHarness {
      * Press Escape — closing the dial and putting focus back on the trigger.
      *
      * Sent to the host, which is where the component listens. The focus return is the
-     * half worth asserting: `role="menu"` promises a way out, and the actions are
-     * ordinary tab stops, so without it a keyboard user has to walk through every
-     * action to leave.
+     * half worth asserting: the actions are ordinary tab stops, so without it a keyboard
+     * user has to walk through every action to leave.
      */
     sendEscape(): Promise<void>;
     /** Move keyboard focus to the trigger. */

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

@@ -11,6 +11,24 @@ interface WrSpeedDialAction {
 /** Direction the action buttons fan out. */
 type WrSpeedDialDirection = 'up' | 'down' | 'left' | 'right';
 
+/**
+ * Floating action button that expands into a fan of secondary actions on click.
+ * Place inside a positioned container or near `position: fixed` — the component
+ * itself doesn't pin to the viewport.
+ *
+ * @example
+ * ```html
+ * <wr-speed-dial
+ *   [actions]="[
+ *     { id: 'new', label: 'New', icon: 'add' },
+ *     { id: 'edit', label: 'Edit', icon: 'cog' }
+ *   ]"
+ *   (pick)="onPick($event)"
+ * />
+ * ```
+ *
+ * @see https://ngwr.dev/reference/components/speed-dial
+ */
 declare class WrSpeedDial {
     readonly actions: _angular_core.InputSignal<readonly WrSpeedDialAction[]>;
     /**
@@ -38,14 +56,15 @@ declare class WrSpeedDial {
     /** Id the trigger's `aria-controls` points at. */
     protected readonly menuId: string;
     protected readonly triggerEl: _angular_core.Signal<ElementRef<HTMLButtonElement> | undefined>;
+    private readonly host;
     constructor();
     protected readonly classes: _angular_core.Signal<string>;
     protected onTrigger(): void;
     protected onPick(action: WrSpeedDialAction): void;
     /**
-     * `role="menu"` promises a way out, and the actions are ordinary buttons in the tab
-     * order — without this a keyboard user who opened the dial had to tab through every
-     * action to leave it.
+     * Escape closes the dial and hands the caret back. The actions are ordinary buttons
+     * in the tab order, so without this a keyboard user who opened the dial had to tab
+     * through every action to leave it.
      */
     protected onKeydown(event: KeyboardEvent): void;
     /**

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

@@ -84,6 +84,15 @@ declare class WrSplitText {
      * watching the same host and all of them able to fire `animate()`.
      */
     private observer;
+    /**
+     * `startObserver()` builds its observer inside a `document.fonts.ready`
+     * continuation, so the component can be destroyed while it is awaiting. At
+     * that moment `observer` is still null, so the destroy hook below disconnects
+     * nothing — and the continuation then starts an observer on a host Angular
+     * has already detached, which nothing is left to disconnect. Same hazard, and
+     * same flag, as `wr-fuzzy-text`.
+     */
+    private destroyed;
     constructor();
     private startObserver;
     private animate;

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

@@ -248,11 +248,11 @@ declare class WrStepperHarness extends ComponentHarness {
      * The index of the step the wizard is showing, from the header announcing
      * `aria-current="step"`.
      *
-     * Throws when no header does, which is a state a stepper can genuinely be in: the
-     * `active` model is two-way, `WrStepper.goTo()` clamps an out-of-range index but a
-     * host writing `active` directly does not, and an index past the last step leaves
-     * every header un-current and every step body hidden. A `-1` here would be read as
-     * "the first step" by the next line of a spec.
+     * Throws when no header does, which is a state a stepper can genuinely be in: one
+     * with no `<wr-step>` children renders its (empty) header strip and no body. A `-1`
+     * here would be read as "the first step" by the next line of a spec. An
+     * out-of-range `active` is NOT such a state — `WrStepper` clamps the two-way model
+     * back into the step list, not only inside `goTo()`.
      */
     getActiveIndex(): Promise<number>;
     /** The label of the step the wizard is showing. Throws when there is no current step. */

package/types/ngwr-stepper.d.ts

@@ -88,6 +88,14 @@ declare class WrStepper implements WrStepperContext {
      */
     readonly responsive: _angular_core.InputSignalWithTransform<boolean, any>;
     protected readonly steps: _angular_core.Signal<readonly WrStep[]>;
+    /**
+     * The "optional" badge sits INSIDE the header button's label span, so the word
+     * is part of the step's accessible name — a hard-coded literal announced English
+     * to every locale, not just showed it. Catalog-only rather than an input: the
+     * badge is one word shared by every step, and an app that wants other wording
+     * overrides `stepper.optional` once instead of on every `<wr-step>`.
+     */
+    protected readonly optionalLabel: _angular_core.Signal<string>;
     protected readonly classes: _angular_core.Signal<string>;
     constructor();
     /** Is the step at `index` considered completed? */

package/types/ngwr-storage.d.ts

@@ -36,6 +36,7 @@ import * as ngwr_storage from 'ngwr/storage';
 declare class WrStorage {
     private readonly engine;
     private readonly config;
+    private readonly destroyRef;
     private readonly isBrowser;
     /**
      * Per-key watchers. Shared so multiple `watch(k)` calls reuse one signal.

package/types/ngwr-table.d.ts

@@ -2,6 +2,57 @@ import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 
+/**
+ * @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 handed to `wr-table` through `[items]`.
+ *
+ * **`object`, not `Record<string, unknown>`, and the difference is the whole
+ * reason this type exists.** TypeScript withholds the implicit index signature
+ * from an `interface`, because declaration merging can widen one later, so an
+ * interface is NOT assignable to `Record<string, unknown>` while a `type` alias
+ * describing the same shape IS:
+ *
+ * ```ts
+ * interface UserI { id: number }
+ * type UserT = { id: number };
+ *
+ * declare function take(rows: readonly Record<string, unknown>[]): void;
+ * take([] as UserI[]); // Index signature for type 'string' is missing in type 'UserI'
+ * take([] as UserT[]); // fine
+ * ```
+ *
+ * The table used to declare `[items]` as the record form, so `[items]="users"`
+ * compiled for one declaration of `User` and failed for the other — reported as
+ * "the table refuses my data", which is what it looks like from outside. Nothing
+ * about the row is read at bind time; the table reads cells by string key and
+ * hands back `unknown`, so the wider type costs nothing and accepts both.
+ *
+ * The row callbacks (`rowKey`, `groupBy`, `childrenKey`) do NOT take this type:
+ * their parameter is `Record<string, unknown>`, and it stays that way. A
+ * parameter is contravariant, so no signature short of a generic component can
+ * accept `(row: User) => row.id` — and widening it to `object` would reject the
+ * callbacks that do compile today (an explicit
+ * `(row: Record<string, unknown>) => …`) while making the row unindexable.
+ *
+ * Index the row instead — `(row) => row['id']` needs no cast at all — or, to
+ * reach your own type, `(row) => (row as unknown as User).id`. A single
+ * `as User` is not enough for an `interface`: TypeScript refuses that
+ * conversion outright (TS2352, "neither type sufficiently overlaps"), over the
+ * same missing index signature. `rowKey="id"` sidesteps all of it.
+ *
+ * `childrenKey` is the one callback that also RETURNS rows, and there the type
+ * IS this wide one — a return is covariant, so
+ * `(row) => (row as unknown as User).reports` needs no second assertion on the
+ * array. Declared narrow, it accepted a forest through `[items]` and refused to
+ * let the children back out.
+ */
+type WrTableRow = object;
+
 /**
  * @license
  *
@@ -248,8 +299,22 @@ type RenderRow = {
 declare class WrTable {
     /** Column definitions, keyed by row property name. */
     readonly columns: _angular_core.InputSignal<WrTableColumns>;
-    /** Row items. `null`/`undefined` renders the empty state; use `[loading]` for the spinner. */
-    readonly items: _angular_core.InputSignal<readonly Record<string, unknown>[] | null | undefined>;
+    /**
+     * Row items. `null`/`undefined` renders the empty state; use `[loading]` for
+     * the spinner.
+     *
+     * Typed `WrTableRow` (= `object`) rather than `Record<string, unknown>`, so an
+     * array of an `interface` binds as readily as an array of a `type` — see
+     * {@link WrTableRow} for why those two are not the same to TypeScript.
+     */
+    readonly items: _angular_core.InputSignal<readonly object[] | null | undefined>;
+    /**
+     * The rows as records, for everything downstream that reads a cell by key.
+     *
+     * One cast at the boundary: the INPUT is wide so any object shape binds, while
+     * the body keeps indexing rows the way it always has.
+     */
+    private readonly rows;
     /** Show the loading spinner overlay. @default false */
     readonly loading: _angular_core.InputSignalWithTransform<boolean, any>;
     /**
@@ -314,6 +379,14 @@ declare class WrTable {
      *
      * `pageSize` pages the ROOTS; a root brings its open descendants with it.
      *
+     * The function form RETURNS `WrTableRow`s, matching `[items]`: a return is
+     * covariant, so an array of `interface`-typed children satisfies it. Declared
+     * as records it did not, and a forest that bound to `[items]` could not hand
+     * its children back out. The PARAMETER stays `Record<string, unknown>` — that
+     * side is contravariant, and widening it would reject the callbacks that
+     * compile today while leaving `row['reports']` unindexable. See
+     * {@link WrTableRow}.
+     *
      * @example
      * ```html
      * <wr-table
@@ -326,7 +399,7 @@ declare class WrTable {
      * />
      * ```
      */
-    readonly childrenKey: _angular_core.InputSignal<string | ((row: Record<string, unknown>) => readonly Record<string, unknown>[] | null | undefined) | null>;
+    readonly childrenKey: _angular_core.InputSignal<string | ((row: Record<string, unknown>) => readonly WrTableRow[] | null | undefined) | null>;
     /**
      * Which column carries the indent and the expand toggle. Keyed, not
      * positional, so it survives a `columnOrder` drag. Defaults to whichever
@@ -476,9 +549,17 @@ declare class WrTable {
     private readonly pins;
     constructor();
     private measurePins;
-    /** Sticky `left` offset (px) for a left-pinned column, else `null`. */
+    /**
+     * Sticky `inset-inline-start` offset (px) for a `pin: 'left'` column, else `null`.
+     *
+     * The input keeps its physical name — it is public API — but the offset it
+     * produces is LOGICAL. `measurePins()` accumulates in DOM order, which is
+     * start-to-end semantics, and under `dir="rtl"` the column order mirrors: a
+     * `pin: 'left'` column then sits at the physical right, where a `left: 0`
+     * sticky inset can never catch it and the column just scrolls away.
+     */
     protected leftPin(key: string): number | null;
-    /** Sticky `right` offset (px) for a right-pinned column, else `null`. */
+    /** Sticky `inset-inline-end` offset (px) for a `pin: 'right'` column, else `null`. See {@link leftPin}. */
     protected rightPin(key: string): number | null;
     /** Whether `key` is the inner-edge pinned column on `side` (carries the shadow). */
     protected isPinEdge(key: string, side: 'left' | 'right'): boolean;
@@ -569,7 +650,7 @@ declare class WrTable {
      * 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 readonly pageRowKeys: _angular_core.Signal<readonly unknown[]>;
     protected isRowSelected(row: Record<string, unknown>): boolean;
     /** Every current-page row selected (drives the header checkbox). */
     protected readonly allSelected: _angular_core.Signal<boolean>;
@@ -633,9 +714,9 @@ declare class WrTable {
     /**
      * The flat `<tbody>` render list. Ungrouped it is exactly today's rows in
      * order (the rendered elements are unchanged; only the `@for` track identity
-     * moves to a stable id). Returns `[]` for both no-rows and loading — the
-     * template's `@if (visibleItems())` guard keeps the loading case from showing
-     * the empty row.
+     * moves to a stable id). Returns `[]` for nullish rows, and reads nothing about
+     * `loading()` — suppressing the "no data" row under the spinner is the
+     * template's job, not this one's.
      */
     protected readonly renderRows: _angular_core.Signal<readonly RenderRow[]>;
     /** Default band label — the primitive as text, `'—'` for empty, JSON for objects. */
@@ -793,8 +874,20 @@ declare class WrTableFilter {
     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>;
+    /**
+     * Placeholder AND accessible name of the search box. Falls back to `table.search`.
+     *
+     * One string for both because the box has no visible label: the placeholder was
+     * its only name, so a hard-coded literal left the control unnamed in every other
+     * language rather than merely untranslated.
+     */
+    readonly searchLabel: _angular_core.InputSignal<string | null>;
+    /** Label of the clear-selection button. Falls back to `table.reset`. */
+    readonly resetLabel: _angular_core.InputSignal<string | null>;
     protected readonly resolvedFilterLabel: _angular_core.Signal<string>;
     protected readonly resolvedNoMatchesLabel: _angular_core.Signal<string>;
+    protected readonly resolvedSearchLabel: _angular_core.Signal<string>;
+    protected readonly resolvedResetLabel: _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>[]>;
@@ -818,8 +911,8 @@ 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, { "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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTableFilter, "wr-table-filter", never, { "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "noMatchesLabel": { "alias": "noMatchesLabel"; "required": false; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "resetLabel": { "alias": "resetLabel"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": true; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
 }
 
 export { WrTable, WrTableCell, WrTableExpand, WrTableFilter, WrTableGroupHeader, WrTableSort };
-export type { WrTableCellContext, WrTableColumn, WrTableColumns, WrTableCsvOptions, WrTableExpandContext, WrTableFilterChange, WrTableFilterItem, WrTableGroupContext, WrTableSortDirection, WrTableSortState, WrTableSummary };
+export type { WrTableCellContext, WrTableColumn, WrTableColumns, WrTableCsvOptions, WrTableExpandContext, WrTableFilterChange, WrTableFilterItem, WrTableGroupContext, WrTableRow, WrTableSortDirection, WrTableSortState, WrTableSummary };

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

@@ -111,12 +111,12 @@ declare class WrTabHarness extends ContentContainerComponentHarness {
      * Whether this is the strip's selected tab.
      *
      * `aria-selected` first, because that is the state a screen reader acts on and
-     * the `--active` class is only what it looks like. A ROUTER tab carries no
-     * `aria-selected` at all — the router paints the class through
-     * `routerLinkActive` and nothing announces the selection — so the class is the
-     * fallback rather than the first choice, and the two branches are not
-     * interchangeable: reading the class first would report a content tab as selected
-     * while `aria-selected="false"` told assistive tech otherwise.
+     * 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 —
+     * 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
+     * otherwise.
      */
     isSelected(): Promise<boolean>;
     /**
@@ -243,10 +243,11 @@ declare class WrTabHarness extends ContentContainerComponentHarness {
  *   the tab they move to, the APG's automatic-activation pattern. `<wr-tabs>`
  *   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, they announce no `aria-selected` at all (the
- *   router paints `--active` and nothing else), 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.
+ *   tabs become `<a role="tab">`s whose `aria-selected` follows the resolved route
+ *   (the same `routerLinkActive` 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.
  *
  * So {@link getSelectedLabel} and {@link getFocusedLabel} are two different
  * questions, and {@link getTabStopLabels} is a third. They coincide in content mode

package/types/ngwr-tabs.d.ts

@@ -123,6 +123,8 @@ declare class WrTabs implements WrTabsContext {
     /** Recompute which edges can scroll, from the strip's scroll metrics. @internal */
     protected updateFades(): void;
     protected onTabClick(tab: WrTab): void;
+    /** Per-instance prefix, so keys only have to be unique within one group. */
+    private readonly uid;
     /** Header id for `aria-labelledby` on the panel. @internal */
     headerId(key: string): string;
     /** Panel id for `aria-controls` on the tab header. @internal */