ngwr 9.1.0 → 10.0.0

package/theme/styles/_dark.scss

@@ -1,5 +1,7 @@
 @use 'sass:color';
 
+@use 'colors';
+
 // Dark theme overrides — opt-in via `[data-theme="dark"]` on <html>.
 // Drive the toggle from `WrTheme` (provided automatically with
 // `provideWrTheme(...)`).
@@ -17,6 +19,15 @@ $dark-intents: (
   danger: #ff5c5c,
 );
 
+// The surface / ink bases below are re-tuned for the dark canvas too, but they
+// live in hand-written blocks (each one documents a judgement call the loop
+// can't express). Holding the values in variables lets the `-rgb` triplets and
+// the shade derivations read from the value that actually ships, instead of
+// being re-typed next to it.
+$_light: #262f44;
+$_medium: #9aa6b8;
+$_dark: #e6ebf3;
+
 [data-theme='dark'] {
   // Canvas (was `--wr-color-white` in light mode)
   // Deeper than slate-900 so an elevated surface in slate-800 reads
@@ -26,8 +37,8 @@ $dark-intents: (
 
   // Text
   // Softer than pure-white — easier on the eyes for long reading.
-  --wr-color-dark: #e6ebf3;
-  --wr-color-dark-rgb: 230, 235, 243;
+  --wr-color-dark: #{$_dark};
+  --wr-color-dark-rgb: #{color.channel($_dark, 'red')}, #{color.channel($_dark, 'green')}, #{color.channel($_dark, 'blue')};
   // `*-contrast` values are baked at SCSS compile time from the light
   // palette, so they don't auto-flip when `--wr-color-dark` /
   // `--wr-color-white` are reassigned for dark mode. Tooltip-style
@@ -35,6 +46,14 @@ $dark-intents: (
   // white-on-white without this override; re-pair them by hand here.
   --wr-color-dark-contrast: #0b1120;
   --wr-color-white-contrast: #e6ebf3;
+  // Same story as the contrast pair: the shades were baked from the light
+  // palette's near-black ink, so `.wr-btn--dark:hover` painted itself almost
+  // black while keeping the near-black `-contrast` text. `dark` is an INK token,
+  // so unlike `light` below its shades mean exactly what they say.
+  --wr-color-dark-light: #{color.adjust($_dark, $lightness: 5%)};
+  --wr-color-dark-lighter: #{color.adjust($_dark, $lightness: 10%)};
+  --wr-color-dark-dark: #{color.adjust($_dark, $lightness: -5%)};
+  --wr-color-dark-darker: #{color.adjust($_dark, $lightness: -10%)};
 
   // Borders / tints (was `--wr-color-light`)
   // Used for two jobs at once: 1-px borders and translucent surface
@@ -43,8 +62,8 @@ $dark-intents: (
   // looks like glowing pencil lines). This value reads as a real
   // divider on cards / inputs without shouting — matches what Vercel
   // and shadcn ship for the same job.
-  --wr-color-light: #262f44;
-  --wr-color-light-rgb: 38, 47, 68;
+  --wr-color-light: #{$_light};
+  --wr-color-light-rgb: #{color.channel($_light, 'red')}, #{color.channel($_light, 'green')}, #{color.channel($_light, 'blue')};
   // The baked contrast pairs with the LIGHT value (#cbd5e1 → dark text);
   // the dark surface above needs light text instead.
   --wr-color-light-contrast: #e6ebf3;
@@ -57,18 +76,42 @@ $dark-intents: (
   // means "stronger divider" (further from canvas, so lighter).
   --wr-color-light-lighter: #1a2236;
   --wr-color-light-darker: #3a4661;
+  // `-light` / `-dark` were the two the hand block forgot, and they are what
+  // `.wr-btn--light` uses for hover / active. Left inherited, hover swapped in
+  // the LIGHT palette's slate-300 — a near-white fill under the near-white
+  // `-contrast` text above, so the button simply disappeared under the cursor.
+  // Half-steps of the tuned pair, same inverted reading: toward the canvas for
+  // `-light`, away from it for `-dark`, which also makes hover read as a lift.
+  --wr-color-light-light: #{color.adjust($_light, $lightness: -2.5%)};
+  --wr-color-light-dark: #{color.adjust($_light, $lightness: 5%)};
 
   // Secondary text (was `--wr-color-medium`)
   // Lifted from slate-400 → slate-300-ish for better legibility on
   // the deeper canvas.
-  --wr-color-medium: #9aa6b8;
-  --wr-color-medium-rgb: 154, 166, 184;
+  --wr-color-medium: #{$_medium};
+  --wr-color-medium-rgb: #{color.channel($_medium, 'red')}, #{color.channel($_medium, 'green')}, #{color.channel($_medium, 'blue')};
+  // This block shipped base + rgb only, so contrast and all four shades still
+  // came from the light palette's slate. Ink token, plain shades.
+  --wr-color-medium-contrast: #{colors.contrast($_medium)};
+  --wr-color-medium-light: #{color.adjust($_medium, $lightness: 5%)};
+  --wr-color-medium-lighter: #{color.adjust($_medium, $lightness: 10%)};
+  --wr-color-medium-dark: #{color.adjust($_medium, $lightness: -5%)};
+  --wr-color-medium-darker: #{color.adjust($_medium, $lightness: -10%)};
+
+  // Muted TEXT is its own token now (the light theme could not serve both text
+  // and fill from one value), so the dark canvas needs its own version too —
+  // otherwise it would inherit the light theme's dark ink. 7.64:1 here.
+  --wr-color-muted-text: #9aa6b8;
+  --wr-color-muted-text-rgb: 154, 166, 184;
 
   // Brand-color retune
   // The default primary (#3969e2) reads a touch dim on the deep
   // canvas. Bump the base + shade derivations so hover / focus rings
   // stay visible against slate-900.
   --wr-color-primary: #5b85ff;
+  // Same reason as the loop above — the light primary pairs with white, but the
+  // lightened dark-theme primary only reaches 3.36:1 against it.
+  --wr-color-primary-contrast: #{colors.contrast(#5b85ff)};
   --wr-color-primary-rgb: 91, 133, 255;
   --wr-color-primary-light: #7a9eff;
   --wr-color-primary-dark: #2f56c9;
@@ -79,6 +122,9 @@ $dark-intents: (
   // shade set in dark too (generated, so no intent can silently drift).
   @each $name, $base in $dark-intents {
     --wr-color-#{$name}: #{$base};
+    // Re-derived, not inherited: the light-palette token would pair the wrong
+    // foreground with a re-tuned base.
+    --wr-color-#{$name}-contrast: #{colors.contrast($base)};
     --wr-color-#{$name}-rgb: #{color.channel($base, 'red')}, #{color.channel($base, 'green')}, #{color.channel($base, 'blue')};
     --wr-color-#{$name}-light: #{color.adjust($base, $lightness: 5%)};
     --wr-color-#{$name}-lighter: #{color.adjust($base, $lightness: 10%)};

package/theme/styles/_index.scss

@@ -1,3 +1,4 @@
+@forward 'box-model';
 @forward 'colors';
 @forward 'variables';
 @forward 'dark';

package/types/ngwr-cascader.d.ts

@@ -101,6 +101,7 @@ declare class WrCascader<T = string> implements FormValueControl<unknown> {
     protected readonly panelTpl: _angular_core.Signal<TemplateRef<any>>;
     private readonly host;
     private readonly overlay;
+    private readonly outsideClick;
     private readonly vcr;
     private readonly scrollStrategies;
     private readonly destroyRef;

package/types/ngwr-color-picker.d.ts

@@ -286,6 +286,7 @@ declare class WrColorPickerTrigger {
     readonly closed: _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-context-menu.d.ts

@@ -44,6 +44,7 @@ declare class WrContextMenu {
     readonly menu: i0.InputSignal<WrContextMenuPanel>;
     private readonly host;
     private readonly overlay;
+    private readonly outsideClick;
     private readonly vcr;
     private readonly scrollStrategies;
     private readonly destroyRef;

package/types/ngwr-date-picker.d.ts

@@ -25,7 +25,7 @@ import { WrDateFormat } from 'ngwr/date-adapter';
  * accepts both named keys (`'shortDate'`, `'mediumDateTime'`, …) and raw
  * token strings (`'dd.MM.yyyy'`, `'HH:mm'`). When `format` is left at the
  * default (`null`), the picker derives the right named key from `mode`:
- * `'date'` → `'shortDate'`, `'time'` → `'shortTime'`, `'datetime'` →
+ * `'date'` gives `'shortDate'`, `'time'` gives `'time'`, `'datetime'` gives
  * `'shortDateTime'`.
  *
  * @example
@@ -50,8 +50,8 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
     readonly mode: _angular_core.InputSignal<"time" | "date" | "datetime">;
     /**
      * Format used for both display and parsing. When `null` (default), the
-     * format is derived from `mode` (`shortDate` / `shortTime` /
-     * `shortDateTime`). Pass a named key or raw token string to override.
+     * format is derived from `mode` (`shortDate` / `time` / `shortDateTime`).
+     * Pass a named key or raw token string to override.
      */
     readonly format: _angular_core.InputSignal<WrDateFormat | (string & {}) | null>;
     /** Placeholder shown when the input is empty. */
@@ -79,6 +79,7 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
     readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
     private readonly adapter;
     private readonly overlay;
+    private readonly outsideClick;
     private readonly scrollStrategies;
     private readonly host;
     private readonly destroyRef;
@@ -219,6 +220,7 @@ declare class WrDateRangePicker implements FormValueControl<WrDateRange | null>
     readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
     private readonly adapter;
     private readonly overlay;
+    private readonly outsideClick;
     private readonly scrollStrategies;
     private readonly host;
     private readonly destroyRef;

package/types/ngwr-density.d.ts

@@ -90,7 +90,14 @@ declare class WrDensityDirective {
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 
-/** Configure {@link WrDensity}. All fields optional — merged with defaults. */
+/**
+ * Configure and activate {@link WrDensity}. All fields optional — merged with
+ * defaults.
+ *
+ * The initializer instantiates {@link WrDensity} so its constructor effect can
+ * write `[data-wr-density]` onto `<html>`. Without it the tree-shakable service
+ * was never created and `defaultDensity` had no effect at all.
+ */
 declare function provideWrDensity(config?: Partial<WrDensityConfig>): EnvironmentProviders;
 
 export { DEFAULT_WR_DENSITY_CONFIG, WR_DENSITY_CONFIG, WrDensity, WrDensityDirective, provideWrDensity };

package/types/ngwr-dialog.d.ts

@@ -87,6 +87,14 @@ interface WrDialogOptions<D = unknown> {
     readonly closeOnBackdropClick?: boolean;
     /** When `true`, the Escape key closes the dialog. @default true */
     readonly closeOnEscape?: boolean;
+    /**
+     * Render a dismiss (×) button in the panel's top-right corner. Set `false`
+     * when the content supplies its own close affordance, or when the dialog must
+     * be resolved through its own actions. @default true
+     */
+    readonly closable?: boolean;
+    /** Accessible name for the dismiss button. Falls back to the `dialog.close` catalog key. */
+    readonly closeLabel?: string;
     /** Width applied to the panel — any valid CSS length. */
     readonly width?: string;
     /** Maximum width applied to the panel. */
@@ -130,6 +138,7 @@ declare class WrDialog {
     private readonly focusTrapFactory;
     private readonly isBrowser;
     private readonly responsiveConfig;
+    private readonly i18n;
     open<C, R = unknown, D = unknown>(component: ComponentType<C>, options?: WrDialogOptions<D>): WrDialogRef<C, R>;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrDialog, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<WrDialog>;

package/types/ngwr-drawer.d.ts

@@ -48,6 +48,13 @@ interface WrDrawerOptions<D = unknown> {
     readonly closeOnBackdropClick?: boolean;
     /** When `true`, the Escape key closes the drawer. @default true */
     readonly closeOnEscape?: boolean;
+    /**
+     * Render a dismiss (×) button in the panel's top-right corner. Set `false`
+     * when the content supplies its own close affordance. @default true
+     */
+    readonly closable?: boolean;
+    /** Accessible name for the dismiss button. Falls back to the `drawer.close` catalog key. */
+    readonly closeLabel?: string;
     /** Extra CSS class(es) added to the panel. */
     readonly panelClass?: string | readonly string[];
 }
@@ -109,14 +116,22 @@ declare class WrDrawer {
     readonly closeOnBackdropClick: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Close on Escape. @default true */
     readonly closeOnEscape: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Show a dismiss (×) button in the panel's top-right corner. Set `false` when
+     * the projected content supplies its own close affordance. @default true
+     */
+    readonly closable: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Accessible name for the dismiss button. Falls back to `drawer.close`. */
+    readonly closeLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedCloseLabel: _angular_core.Signal<string>;
     protected readonly panelTpl: _angular_core.Signal<TemplateRef<any>>;
     protected panelClass(): string;
     private swipeStartX;
     private swipeStartY;
     private swiping;
-    protected onSwipeStart(event: TouchEvent): void;
-    protected onSwipeMove(event: TouchEvent, panel: HTMLElement): void;
-    protected onSwipeEnd(event: TouchEvent, panel: HTMLElement): void;
+    protected onSwipeStart(event: PointerEvent): void;
+    protected onSwipeMove(event: PointerEvent, panel: HTMLElement): void;
+    protected onSwipeEnd(event: PointerEvent, panel: HTMLElement): void;
     /** Axis + sign of the closing direction for the current position. */
     private closeAxis;
     private readonly overlay;
@@ -131,7 +146,7 @@ declare class WrDrawer {
     private openOverlay;
     private closeOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrDrawer, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrDrawer, "wr-drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "showHandle": { "alias": "showHandle"; "required": false; "isSignal": true; }; "safeArea": { "alias": "safeArea"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrDrawer, "wr-drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "showHandle": { "alias": "showHandle"; "required": false; "isSignal": true; }; "safeArea": { "alias": "safeArea"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
 }
 
 /**
@@ -237,6 +252,7 @@ declare class WrDrawerManager {
     private readonly parentInjector;
     private readonly focusTrapFactory;
     private readonly isBrowser;
+    private readonly i18n;
     open<C, R = unknown, D = unknown>(component: ComponentType<C>, options?: WrDrawerOptions<D>): WrDrawerRef<C, R>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrDrawerManager, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<WrDrawerManager>;

package/types/ngwr-dropdown.d.ts

@@ -73,6 +73,7 @@ declare class WrDropdown {
     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-i18n.d.ts

@@ -76,6 +76,12 @@ declare class WrI18n {
     private readonly config;
     private readonly loader;
     private readonly storage;
+    /**
+     * Catalogs registered via `provideWrI18nBaseCatalogs()` — the floor under the
+     * loader's own catalogs, so ngwr's built-in strings survive an app that only
+     * ships its own keys. @internal
+     */
+    private readonly baseCatalogs;
     /** Per-(locale,scope) catalogs, populated by `loadCatalog`. @internal */
     private readonly catalogs;
     /** Bumped after each catalog write so reactive translates recompute. @internal */
@@ -106,6 +112,11 @@ declare class WrI18n {
     t(key: string, params?: WrI18nParams, scope?: string): string;
     /** Reactive translate — re-evaluates on locale or catalog updates. */
     translate(key: string, params?: WrI18nParams, scope?: string): Signal<string>;
+    /**
+     * Look a key up in the registered base catalogs, later contributions first so
+     * a feature can shadow an earlier one.
+     */
+    private walkBase;
     private initialLocale;
     private loadCatalog;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrI18n, never>;
@@ -181,6 +192,35 @@ interface WrI18nLoader {
 }
 declare const WR_I18N_LOADER: InjectionToken<WrI18nLoader>;
 
+/**
+ * @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
+ */
+
+/** Base catalogs keyed by locale, contributed by {@link provideWrI18nBaseCatalogs}. */
+type WrI18nBaseCatalogs = Readonly<Record<string, WrI18nCatalog>>;
+/**
+ * Catalogs consulted *underneath* whatever the loader returned — the place for
+ * ngwr's own built-in strings.
+ *
+ * A loader **replaces** the catalog for a locale rather than extending it, so an
+ * app whose JSON holds only its own keys used to lose every built-in label to
+ * its hardcoded English fallback, silently. Registering `wrRu` / `wrEn` here
+ * puts them back without the app having to merge anything itself.
+ *
+ * `multi`, so several features can each contribute; later contributions win on
+ * a key collision, and anything the loader returned still wins over all of them.
+ *
+ * It has to be handed in by the consumer rather than wired up inside
+ * `provideWrI18n()`: the catalogs are their own entry points (`ngwr/i18n/ru`)
+ * and they already import from `ngwr/i18n`, so importing them back here is a
+ * circular entry-point dependency that ng-packagr rejects outright. Passing
+ * them in also keeps the locales you don't ship out of your bundle.
+ */
+declare const WR_I18N_BASE_CATALOGS: InjectionToken<readonly Readonly<Record<string, WrI18nCatalog>>[]>;
+
 /**
  * @license
  *
@@ -270,6 +310,29 @@ declare function provideWrI18n(options?: ProvideWrI18nOptions): EnvironmentProvi
  * @param scopes Optional per-scope catalogs served to `registerScope(name)`.
  */
 declare function provideWrI18nStaticLoader(catalogs: WrI18nStaticCatalogs, scopes?: WrI18nStaticScopedCatalogs): Provider;
+/**
+ * Register catalogs consulted *underneath* the loader — this is how ngwr's own
+ * built-in strings survive when you supply your own catalogs.
+ *
+ * A loader replaces the catalog for a locale instead of extending it, so a JSON
+ * file holding only your keys leaves every built-in label on its hardcoded
+ * English fallback, with nothing logged. One line fixes it, on either loader:
+ *
+ * @example
+ * ```ts
+ * import { wrRu } from 'ngwr/i18n/ru';
+ *
+ * providers: [
+ *   provideWrI18n({ defaultLocale: 'ru', availableLocales: ['ru'] }),
+ *   provideWrI18nBaseCatalogs({ ru: wrRu }),
+ *   provideWrI18nHttpLoader({ path: '/assets/i18n/{locale}.json' }),
+ * ]
+ * ```
+ *
+ * Pass only the locales you ship — the ones you leave out stay out of the
+ * bundle. Your own keys always win; this is a floor, not an override.
+ */
+declare function provideWrI18nBaseCatalogs(catalogs: WrI18nBaseCatalogs): Provider;
 /** Provide an HTTP loader — catalogs fetched from URLs. Requires `provideHttpClient`. */
 declare function provideWrI18nHttpLoader(config: WrI18nHttpLoaderConfig): Provider;
 
@@ -332,5 +395,5 @@ declare function readI18nText(key: string, fallback: string): string;
  */
 declare function useI18nFormatter(key: string, fallback: string): (params?: WrI18nParams) => string;
 
-export { DEFAULT_WR_I18N_CONFIG, WR_I18N_CONFIG, WR_I18N_LOADER, WrI18n, WrI18nHttpLoader, WrI18nStaticLoader, WrTDirective, WrTPipe, provideWrI18n, provideWrI18nHttpLoader, provideWrI18nStaticLoader, readI18nText, useI18nFormatter, useI18nText };
-export type { ProvideWrI18nOptions, WrI18nCatalog, WrI18nConfig, WrI18nConfigResolved, WrI18nHttpLoaderConfig, WrI18nLoader, WrI18nMissingHandler, WrI18nParams, WrI18nStaticCatalogs, WrI18nStaticScopedCatalogs };
+export { DEFAULT_WR_I18N_CONFIG, WR_I18N_BASE_CATALOGS, WR_I18N_CONFIG, WR_I18N_LOADER, WrI18n, WrI18nHttpLoader, WrI18nStaticLoader, WrTDirective, WrTPipe, provideWrI18n, provideWrI18nBaseCatalogs, provideWrI18nHttpLoader, provideWrI18nStaticLoader, readI18nText, useI18nFormatter, useI18nText };
+export type { ProvideWrI18nOptions, WrI18nBaseCatalogs, WrI18nCatalog, WrI18nConfig, WrI18nConfigResolved, WrI18nHttpLoaderConfig, WrI18nLoader, WrI18nMissingHandler, WrI18nParams, WrI18nStaticCatalogs, WrI18nStaticScopedCatalogs };

package/types/ngwr-icon.d.ts

@@ -18,28 +18,20 @@ declare class WrIcon {
     readonly name: i0.InputSignal<string>;
     private readonly host;
     /**
-     * Merged view of every `WR_ICONS` multi-provider visible from this
-     * injector position — element-level first overlay, environment-level
-     * (app/lazy-route bootstrap) as the base.
+     * Every icon visible from this position, walked up the whole chain of
+     * registering injector levels.
      *
-     * Angular's default `inject(WR_ICONS)` only returns the **closest**
-     * injector's contribution; if a component declares its own
-     * `provideWrIcons(...)`, the root registration is **shadowed**, not
-     * appended. That contradicts the docstring's "each call adds to the
-     * registry" promise and silently breaks any page that overrides while
-     * still relying on root-registered icons.
+     * Angular's `inject(WR_ICONS)` returns only the **closest** injector's
+     * contribution — `multi` providers are not merged across levels — so a
+     * component that registers its own icons used to shadow, not extend, what an
+     * ancestor registered. {@link WrIconRegistry} is provided once per
+     * registering level and links to its parent, so nesting any number of levels
+     * now adds up, with the nearest registration winning a name collision.
      *
-     * We work around it by also asking the environment injector directly
-     * (`envInjector.get(WR_ICONS, null, …)`). When no element-level
-     * provider exists both calls return the same array reference and we
-     * skip the redundant pass. Otherwise we lay element on top of env so
-     * a page's local icons can override a root-registered name.
-     *
-     * One known limitation: multiple element-injector levels in between
-     * still shadow each other — but the showcase doesn't nest providers
-     * that deep, and the env+local merge fixes the dominant case.
+     * Optional: with no `provideWrIcons()` anywhere the map is simply empty and
+     * every name reports as unregistered.
      */
-    private readonly iconSets;
+    private readonly iconRegistry;
     private readonly registry;
     private readonly icon;
     constructor();

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 };