ngwr 9.0.1 → 10.0.0

package/types/ngwr-mention.d.ts

@@ -62,12 +62,43 @@ declare class WrMention<T extends WrMentionItem = WrMentionItem> {
     private readonly overlay;
     private readonly scrollStrategies;
     private readonly destroyRef;
+    private readonly isBrowser;
     private overlayRef;
     private panelRef;
     private state;
     private readonly activeIndex;
     private readonly filteredItems;
+    private readonly isOpen;
+    /** @internal — read by the `aria-controls` host binding. */
+    protected readonly listboxId: string;
+    private readonly listLabel;
+    private readonly availableText;
+    private readonly insertedText;
+    /**
+     * `aria-activedescendant`, or `null`.
+     *
+     * Gated hard on `isOpen()`, which is only set once the panel's options are
+     * actually in the DOM. An id that resolves to nothing is an author error, and
+     * the failure mode is silent: the browser does not complain, it simply stops
+     * firing the event that makes a screen reader speak the option. Same
+     * discipline `tree.ts` uses for its virtualized rows.
+     */
+    protected readonly activeOptionId: _angular_core.Signal<string | null>;
+    /**
+     * Polite live region, parked on `<body>`.
+     *
+     * Not inside the panel: `close()` disposes the overlay on every keystroke that
+     * leaves a mention, so a region living there would be recreated constantly —
+     * and a live region has to be in the DOM *before* its text changes to be
+     * announced at all. It also could not announce the two cases that matter most,
+     * since in both the panel is already gone: "nothing matched" and "inserted X".
+     *
+     * Not a sibling of the host either — that would land inside the consumer's
+     * markup and start matching their `+`, `~` and `:nth-child()` selectors.
+     */
+    private liveRegion;
     constructor();
+    private announce;
     /** @internal */
     protected onInput(): void;
     /** @internal */
@@ -97,13 +128,26 @@ declare class WrMentionPanel {
     readonly items: _angular_core.InputSignal<readonly WrMentionItem[]>;
     readonly activeIndex: _angular_core.InputSignal<number>;
     readonly displayWith: _angular_core.InputSignal<(item: WrMentionItem) => string>;
+    /**
+     * Id of the `<ul role="listbox">`, minted by the directive and pointed at by
+     * its `aria-controls`. Owned there rather than here because the panel is
+     * disposed and rebuilt whenever the caret leaves a mention, while the
+     * attribute on the host has to stay put.
+     *
+     * Plain `input('')`, never `input.required` — a ComponentPortal-created
+     * component throws on the first change detection if a required input is unset.
+     */
+    readonly listboxId: _angular_core.InputSignal<string>;
+    /** Accessible name for the listbox. ARIA requires one; the directive supplies it from the catalog. */
+    readonly listLabel: _angular_core.InputSignal<string>;
+    protected optionId(index: number): string;
     /** Emitted when the user picks an item (click). */
     readonly picked: _angular_core.OutputEmitterRef<WrMentionItem>;
     /** Emitted on mouseenter — used by the directive to track hover. */
     readonly hovered: _angular_core.OutputEmitterRef<number>;
     protected onPick(item: WrMentionItem, event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrMentionPanel, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrMentionPanel, "wr-mention-panel", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; }, { "picked": "picked"; "hovered": "hovered"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrMentionPanel, "wr-mention-panel", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "listboxId": { "alias": "listboxId"; "required": false; "isSignal": true; }; "listLabel": { "alias": "listLabel"; "required": false; "isSignal": true; }; }, { "picked": "picked"; "hovered": "hovered"; }, never, never, true, never>;
 }
 
 export { WrMention, WrMentionPanel };

package/types/ngwr-overlay.d.ts

@@ -1,7 +1,85 @@
-import { OverlayContainer, Overlay } from '@angular/cdk/overlay';
+import { OverlayRef, OverlayContainer, Overlay } from '@angular/cdk/overlay';
+import { Observable } from 'rxjs';
 import * as i0 from '@angular/core';
 import { EnvironmentProviders, InjectionToken } from '@angular/core';
 
+/**
+ * @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
+ */
+/**
+ * Appends a dismiss (✕) button to a service-opened overlay panel.
+ *
+ * `WrDialog` and `WrDrawerManager` build their panel around a component the
+ * consumer supplies, so there is no template of their own to put a corner button
+ * in — they call this instead. Component-driven overlays (`<wr-drawer>`) render
+ * the same markup in their template.
+ *
+ * Uses `host.ownerDocument` rather than the global `document`, so it carries no
+ * hidden browser-only assumption; callers still gate on the platform because
+ * they have nothing to append to on the server.
+ *
+ * @param host Panel element the button is appended to (and positioned against).
+ * @param className BEM class for the button, e.g. `wr-dialog__close`.
+ * @param label Accessible name — already localized by the caller.
+ * @param onClose Invoked on click.
+ */
+declare function wrAppendOverlayClose(host: HTMLElement, className: string, label: string, onClose: () => void): HTMLButtonElement;
+
+/**
+ * @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
+ */
+
+/**
+ * Outside-click source for overlays — a drop-in replacement for
+ * `OverlayRef.outsidePointerEvents()`.
+ *
+ * **Why this exists.** CDK's `OverlayOutsideClickDispatcher` binds its
+ * listeners to `document.body`. When page content is shorter than the viewport,
+ * a click in the empty space below it targets `<html>` — and `<html>` is
+ * `body`'s *parent*, so the event bubbles straight to the document and `body`
+ * never sees it. The overlay silently stays open. Listening on the document
+ * itself catches both cases, and costs nothing else.
+ *
+ * Semantics are otherwise identical to the CDK's, deliberately:
+ *
+ * - Emits on `click` / `auxclick` / `contextmenu`, in the capture phase, and
+ *   tracks `pointerdown` so a `click` is judged by where the press *started*
+ *   (a drag that ends outside the pane doesn't count as an outside click).
+ * - Walks watchers top-most first and stops at the first one that contains the
+ *   event, so clicking inside a stacked overlay can't close the ones beneath
+ *   it (a `wr-select` opened inside a `wr-popover`, say).
+ * - Fires for the very click that opened the overlay, which is why every caller
+ *   also ignores events landing on its own trigger.
+ *
+ * Registration is per subscription: the document listeners go up with the first
+ * watcher and come down with the last, so an app with no open overlay has none.
+ */
+declare class WrOutsideClick {
+    private readonly doc;
+    private readonly isBrowser;
+    /** In attach order — last is top-most. */
+    private readonly watchers;
+    private cleanup;
+    private pressOrigin;
+    /**
+     * Emits every `click` / `auxclick` / `contextmenu` that lands outside the
+     * given overlay's pane, for as long as the returned observable is subscribed.
+     */
+    outsidePointerEvents(overlayRef: OverlayRef): Observable<MouseEvent>;
+    private readonly onPointerDown;
+    private readonly onClick;
+    private listen;
+    private unlisten;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrOutsideClick, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WrOutsideClick>;
+}
+
 /**
  * @license
  *
@@ -175,4 +253,4 @@ declare const WR_OVERLAY: InjectionToken<Overlay>;
  */
 declare const WR_OVERLAY_CONTAINER: InjectionToken<OverlayContainer>;
 
-export { WR_OVERLAY, WR_OVERLAY_CONTAINER, WR_RESPONSIVE_OVERLAYS, WrOverlayContainer, provideWrOverlay, provideWrResponsiveOverlays, wrPresentAsSheet };
+export { WR_OVERLAY, WR_OVERLAY_CONTAINER, WR_RESPONSIVE_OVERLAYS, WrOutsideClick, WrOverlayContainer, provideWrOverlay, provideWrResponsiveOverlays, wrAppendOverlayClose, wrPresentAsSheet };

package/types/ngwr-pagination.d.ts

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

package/types/ngwr-popconfirm.d.ts

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

package/types/ngwr-popover.d.ts

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

package/types/ngwr-select.d.ts

@@ -81,8 +81,18 @@ interface WrSelectContext {
      * no filter applied — options treat that as "show me".
      */
     readonly searchQuery: Signal<string>;
-    /** True only when `mode="search"`. Options gate filtering on this. */
+    /** True only when `mode="search"`. */
     readonly isSearch: Signal<boolean>;
+    /**
+     * True when a filter is active — `mode="search"` or `[searchable]`. Options
+     * gate self-hiding on this.
+     */
+    readonly isSearchable: Signal<boolean>;
+    /**
+     * False when the option list is already query-scoped upstream (`[loader]` or
+     * `[serverSearch]`), in which case options must NOT self-hide.
+     */
+    readonly clientFilter: Signal<boolean>;
     /** Is the given option value currently selected? Handles both single and multi. */
     isSelected(value: unknown): boolean;
     /**
@@ -120,6 +130,11 @@ interface SelectedChip {
  * - `'tag'` — free-text + chips with `[separators]` / `[validate]` /
  *   `[allowDuplicates]`. Replaces `<wr-chips-input>`.
  *
+ * `[searchable]` is orthogonal to the mode — it adds the type-ahead filter to
+ * `single` / `multi` without changing the value shape, which is how you get a
+ * searchable multi-select. Server-side search hangs off the `(searchChange)` output
+ * plus `[options]` / `[loading]`.
+ *
  * A signal-forms native control: it implements `FormValueControl<unknown>`, so
  * `[formField]` binds straight to its `value` model — no
  * `ControlValueAccessor` in between. `[(value)]` works standalone, and classic
@@ -139,6 +154,16 @@ interface SelectedChip {
  *   <wr-option value="ts">TypeScript</wr-option>
  *   <wr-option value="ng">Angular</wr-option>
  * </wr-select>
+ *
+ * <!-- Multi + type-ahead, options from a store -->
+ * <wr-select
+ *   mode="multi"
+ *   searchable
+ *   [options]="results()"
+ *   [loading]="pending()"
+ *   [(value)]="categories"
+ *   (searchChange)="store.search($event)"
+ * />
  * ```
  *
  * The legacy `[multi]="true"` boolean is still accepted but is now an
@@ -192,15 +217,44 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     protected readonly isTag: _angular_core.Signal<boolean>;
     /** Convenience — `effectiveMode() === 'search'`. Exposed via context for options. */
     readonly isSearch: _angular_core.Signal<boolean>;
+    /**
+     * Add a type-ahead filter without changing the value shape — the missing
+     * multi-with-search combination, since `[mode]` picks exactly one shape:
+     *
+     * ```html
+     * <wr-select mode="multi" searchable [(value)]="categories">…</wr-select>
+     * ```
+     *
+     * On `multi` the trigger keeps its chips and grows an inline text field (the
+     * shape `tag` mode already uses); on `single` it is equivalent to
+     * `mode="search"`. Every search input (`[options]`, `[loader]`,
+     * `[debounceMs]`, `[minChars]`, `[virtualScroll]`, the `(searchChange)` output, …)
+     * applies either way. Ignored in `tag` mode, which owns its own input.
+     * @default false
+     */
+    readonly searchable: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Filtering is active — either `mode="search"` or `[searchable]`. Exposed via
+     * context so each `<wr-option>` can self-hide non-matching rows.
+     */
+    readonly isSearchable: _angular_core.Signal<boolean>;
+    /** The trigger *is* the search input: `mode="search"`, or a searchable single. */
+    protected readonly isSearchTrigger: _angular_core.Signal<boolean>;
+    /** Chips plus an inline search field — a searchable multi-select. */
+    protected readonly hasChipSearch: _angular_core.Signal<boolean>;
     /** WrSelectContext — resolved multi-selection flag for child options. */
     readonly multi: _angular_core.Signal<boolean>;
     /** Both multi and tag render chips on the trigger. */
     protected readonly hasChips: _angular_core.Signal<boolean>;
     /**
-     * Search-mode query. Empty string = no filter. Exposed via context so
+     * The live search query. Empty string = no filter. Exposed via context so
      * each `<wr-option>` can self-hide non-matching rows.
+     *
+     * Two-way bindable, so the query can be owned or reset from outside:
+     * `[(searchQuery)]="query"`. For server-side search prefer the debounced
+     * {@link searchChange} output — `searchQueryChange` fires on every keystroke.
      */
-    readonly searchQuery: _angular_core.WritableSignal<string>;
+    readonly searchQuery: _angular_core.ModelSignal<string>;
     /**
      * Search mode: dynamic option array. Each item is rendered as a
      * `<wr-option>` whose label comes from `[displayWith]`. Works
@@ -216,6 +270,21 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
      * Observables, Promises, and plain arrays.
      */
     readonly loader: _angular_core.InputSignal<WrSelectSearchLoader<unknown> | null>;
+    /**
+     * The option list is already scoped to the query upstream — skip the built-in
+     * client-side label filter. Set it when `[options]` is fed from a server via
+     * the {@link searchChange} output; the async `[loader]` path implies it.
+     *
+     * Without this, a server that ranks or fuzzy-matches (returning rows whose
+     * labels don't literally contain the query) would have those rows hidden
+     * again on the client. @default false
+     */
+    readonly serverSearch: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Whether the built-in label filter runs. Exposed via context so each
+     * `<wr-option>` knows whether to self-hide. @internal
+     */
+    readonly clientFilter: _angular_core.Signal<boolean>;
     /** Search mode: debounce (ms) applied to the loader. @default 250 */
     readonly debounceMs: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Search mode: minimum query length before the panel opens / loader fires. @default 0 */
@@ -253,10 +322,42 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     readonly loadingText: _angular_core.InputSignal<string | null>;
     protected readonly resolvedNoResults: _angular_core.Signal<string>;
     protected readonly resolvedLoading: _angular_core.Signal<string>;
+    /**
+     * Debounced search query, gated to searchable selects. Emits on every settled
+     * change — including the empty string when the field is cleared — so a
+     * store-backed option list can stay in sync and reset itself. `[debounceMs]`
+     * controls the delay; `[minChars]` does NOT gate it, for the same reason the
+     * `[loader]` path clears its results below that threshold.
+     *
+     * This is the hook for server-side search: dispatch on `(searchChange)`, feed
+     * the results back through `[options]` (plus `[serverSearch]`), and drive the
+     * panel's progress row with `[loading]`. Prefer it over the model's raw
+     * `(searchQueryChange)`, which fires on every keystroke.
+     *
+     * @example
+     * ```html
+     * <wr-select
+     *   mode="search"
+     *   serverSearch
+     *   [options]="results()"
+     *   [loading]="pending()"
+     *   (searchChange)="store.search($event)"
+     * />
+     * ```
+     */
+    readonly searchChange: _angular_core.OutputEmitterRef<string>;
+    /**
+     * Show the panel's progress row. Independent of `[loader]`, which raises and
+     * lowers its own flag — use this when the options come from a store fed by
+     * the {@link searchChange} output. @default false
+     */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Search mode: results returned by the async loader. @internal */
     protected readonly loadedOptions: _angular_core.WritableSignal<readonly unknown[]>;
-    /** Search mode: true while the loader is in flight. @internal */
-    protected readonly loading: _angular_core.WritableSignal<boolean>;
+    /** True while the async `[loader]` is in flight. @internal */
+    private readonly loaderLoading;
+    /** Either flag shows the panel's progress row. @internal */
+    protected readonly isLoading: _angular_core.Signal<boolean>;
     /**
      * Tag mode: keys / characters that commit the current draft into a chip.
      * `'Enter'` is the key name; everything else is a literal character watched
@@ -331,7 +432,7 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
      * `dynamicOptions()` narrowed to the current search query. `dynamicOptions()`
      * is intentionally UNFILTERED (projected `<wr-option>` self-hide via CSS), so
      * the virtual path — which renders plain rows that can't self-hide — filters
-     * here. Loader results are already query-scoped upstream.
+     * here. Loader / `serverSearch` results are already query-scoped upstream.
      */
     protected readonly filteredDynamicOptions: _angular_core.Signal<readonly unknown[]>;
     /**
@@ -376,12 +477,17 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     /** Search mode: is this option hidden by the current query? @internal */
     private isOptionHidden;
     protected readonly panelTpl: _angular_core.Signal<TemplateRef<any>>;
-    /** Tag-mode inline input. Present only when `mode="tag"`. @internal */
+    /** The inline input inside a chip trigger — tag mode or a searchable multi. @internal */
     protected readonly tagInputEl: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     /** Search-mode inline input. Present only when `mode="search"`. @internal */
     protected readonly searchInputEl: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     protected focusTagInput(): void;
     protected focusSearchInput(): void;
+    protected onChipsInput(event: Event): void;
+    protected onChipsKeydown(event: KeyboardEvent): void;
+    protected onChipsFocus(): void;
+    protected onChipsPaste(event: ClipboardEvent): void;
+    protected onChipsBlur(): void;
     protected onSearchInput(event: Event): void;
     protected onSearchFocus(): void;
     protected onSearchKey(event: KeyboardEvent): void;
@@ -393,6 +499,7 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     protected readonly searchDisplay: _angular_core.Signal<string>;
     private readonly host;
     private readonly overlay;
+    private readonly outsideClick;
     private readonly responsiveConfig;
     private readonly vcr;
     private readonly scrollStrategies;
@@ -426,7 +533,7 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     private openOverlay;
     private closeOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSelect, "wr-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "loader": { "alias": "loader"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; "freeText": { "alias": "freeText"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "separators": { "alias": "separators"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxItems": { "alias": "maxItems"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, ["projectedOptions"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSelect, "wr-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchQuery": { "alias": "searchQuery"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "loader": { "alias": "loader"; "required": false; "isSignal": true; }; "serverSearch": { "alias": "serverSearch"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; "freeText": { "alias": "freeText"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "separators": { "alias": "separators"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxItems": { "alias": "maxItems"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "searchQuery": "searchQueryChange"; "searchChange": "searchChange"; "value": "valueChange"; "touch": "touch"; }, ["projectedOptions"], ["*"], true, never>;
 }
 
 /**
@@ -458,7 +565,7 @@ declare class WrOption {
     /** @internal — true when this option is the keyboard cursor target. */
     protected readonly active: _angular_core.Signal<boolean>;
     /**
-     * @internal — search mode only. True when the parent has a query that
+     * @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.
@@ -485,6 +592,11 @@ declare class WrOption {
 declare class WrOptionGroup {
     /** Section heading shown above the options. */
     readonly label: _angular_core.InputSignal<string>;
+    /**
+     * `role="group"` alone announces an unnamed group — the visible heading has to
+     * be wired to it for the name to reach a screen reader.
+     */
+    protected readonly labelId: string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrOptionGroup, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrOptionGroup, "wr-option-group", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/types/ngwr-theme.d.ts

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

package/types/ngwr-tree.d.ts

@@ -138,6 +138,7 @@ declare class WrTree<TId = string> implements FormValueControl<unknown> {
     readonly touch: _angular_core.OutputEmitterRef<void>;
     private readonly host;
     private readonly overlay;
+    private readonly outsideClick;
     private readonly vcr;
     private readonly scrollStrategies;
     private readonly destroyRef;

package/types/ngwr-version.d.ts

@@ -16,7 +16,7 @@ import { InjectionToken } from '@angular/core';
  * Distinct from `Version` exported by `@angular/core`, which reports the
  * loaded Angular runtime version (e.g. `'21.2.13'`), not ngwr's.
  */
-declare const NGWR_VERSION = "9.0.1";
+declare const NGWR_VERSION = "10.0.0";
 
 /**
  * @license

package/types/ngwr-waves.d.ts

@@ -53,6 +53,16 @@ declare class WrWaves {
     private bounding;
     private readonly mouse;
     private rafId;
+    /**
+     * Flips once the canvas has drawn, which retires the CSS stand-in grid.
+     *
+     * A canvas cannot be prerendered, so on an SSR'd or prerendered page this
+     * element is simply blank until the bundle has loaded and hydration has run —
+     * measured at ~2.8s on ngwr.dev's own home page. The stylesheet paints a static
+     * grid of the same colour and pitch in the meantime, straight from the
+     * prerendered HTML, and this hands over to the real thing.
+     */
+    protected readonly painted: _angular_core.WritableSignal<boolean>;
     constructor();
     private boot;
     private setSize;

package/waves/styles/_index.scss

@@ -4,6 +4,9 @@
 
 .wr-waves {
   --wr-waves-line-color: rgba(var(--wr-color-on-surface-rgb), 0.12);
+  // Mirrors the `xGap` input; the component publishes it so the stand-in below
+  // lands on the same pitch as the real grid.
+  --wr-waves-x-gap: 10px;
 
   position: absolute;
   inset: 0;
@@ -12,6 +15,24 @@
   padding: 0;
   overflow: hidden;
 
+  // Stand-in grid, shown until the canvas has painted.
+  //
+  // A canvas cannot be prerendered, so on an SSR'd or prerendered page this
+  // element is blank until the JS bundle has loaded and hydrated — measured at
+  // ~2.8s on ngwr.dev's own home page, where it reads as the background hanging
+  // and then popping in. These are straight lines rather than the drifting
+  // curves, at the same colour and pitch, so the handover reads as the grid
+  // coming alive rather than as content appearing.
+  background-image: repeating-linear-gradient(
+    to right,
+    var(--wr-waves-line-color) 0 1px,
+    transparent 1px var(--wr-waves-x-gap)
+  );
+
+  &--painted {
+    background-image: none;
+  }
+
   &__canvas {
     display: block;
     width: 100%;