ngwr 13.0.0 → 14.0.0

package/types/ngwr-dropdown.d.ts

@@ -120,7 +120,7 @@ declare class WrDropdown {
     private focusItemAt;
     private readonly onOverlayMouseLeave;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrDropdown, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrDropdown, "[wrDropdown]", never, { "menu": { "alias": "wrDropdown"; "required": true; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrDropdown, "[wrDropdown]", ["wrDropdown"], { "menu": { "alias": "wrDropdown"; "required": true; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
 }
 
 /**

package/types/ngwr-event-calendar-testing.d.ts

@@ -8,6 +8,13 @@ import { WrCalendarView } from 'ngwr/event-calendar';
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 
+/**
+ * An arrow key, by the direction a user would say out loud — the parameter type
+ * shared by `WrEventCalendarHarness.pressArrow` and the chip harness's `move`,
+ * `resize` and `pressArrow`, exported so a consumer's own test helper can name
+ * what it forwards.
+ */
+type WrEventCalendarArrowKey = 'left' | 'right' | 'up' | 'down';
 /** Narrows which `<wr-event-calendar>` a harness query matches. */
 interface WrEventCalendarHarnessFilters extends BaseHarnessFilters {
     /** Match the header title as printed — a string is an exact match, a RegExp is tested. */
@@ -35,8 +42,6 @@ interface WrEventCalendarChipHarnessFilters extends BaseHarnessFilters {
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 
-/** The arrow keys, by the direction a user would say out loud. */
-type Arrow$1 = 'left' | 'right' | 'up' | 'down';
 /**
  * Test harness for one event chip inside a {@link WrEventCalendarHarness}.
  *
@@ -122,16 +127,16 @@ declare class WrEventCalendarChipHarness extends ComponentHarness {
      * calendar without `editable` ignores the keys entirely — the same gate the pointer
      * path uses.
      */
-    move(arrow: Arrow$1): Promise<void>;
+    move(arrow: WrEventCalendarArrowKey): Promise<void>;
     /**
      * Resize the event — `Alt` + `Shift` + an arrow, which moves the END alone.
      *
      * A resize that would end at or before the start emits nothing rather than
      * inverting the event, which is the pointer path's rule too.
      */
-    resize(arrow: Arrow$1): Promise<void>;
+    resize(arrow: WrEventCalendarArrowKey): Promise<void>;
     /** Press a bare arrow — which the chip ignores, letting the grid's own navigation run. */
-    pressArrow(arrow: Arrow$1): Promise<void>;
+    pressArrow(arrow: WrEventCalendarArrowKey): Promise<void>;
     /** Press Escape — handing focus back to the cell the chip sits in. */
     sendEscape(): Promise<void>;
 }
@@ -143,8 +148,6 @@ declare class WrEventCalendarChipHarness extends ComponentHarness {
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 
-/** The arrow keys, by the direction a user would say out loud. */
-type Arrow = 'left' | 'right' | 'up' | 'down';
 /**
  * Test harness for `<wr-event-calendar>` — month, week and day in one component.
  *
@@ -279,7 +282,7 @@ declare class WrEventCalendarHarness extends ComponentHarness {
      * — the element carrying the keyboard should be the one that holds focus — and
      * anything originating inside a chip is deliberately let through untouched.
      */
-    pressArrow(arrow: Arrow): Promise<void>;
+    pressArrow(arrow: WrEventCalendarArrowKey): Promise<void>;
     /** Press Home on the cursor cell — the first day of its week. */
     pressHome(): Promise<void>;
     /** Press End on the cursor cell — the last day of its week. */
@@ -298,4 +301,4 @@ declare class WrEventCalendarHarness extends ComponentHarness {
 }
 
 export { WrEventCalendarChipHarness, WrEventCalendarHarness };
-export type { WrEventCalendarChipHarnessFilters, WrEventCalendarHarnessFilters };
+export type { WrEventCalendarArrowKey, WrEventCalendarChipHarnessFilters, WrEventCalendarHarnessFilters };

package/types/ngwr-file-upload.d.ts

@@ -17,8 +17,6 @@ interface WrFileUploadRejection {
     readonly reason: WrFileUploadRejectionReason;
 }
 
-/** Human-readable byte size (e.g. `1.2 MB`). */
-declare function formatBytes(bytes: number): string;
 /**
  * Drag-and-drop file upload zone. Click to browse, drag-and-drop to add,
  * with an optional file list + remove buttons.
@@ -101,7 +99,37 @@ declare class WrFileUpload implements FormValueControl<File | readonly File[] |
     protected readonly files: _angular_core.WritableSignal<readonly File[]>;
     protected readonly dragging: _angular_core.WritableSignal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
-    protected readonly formatBytes: typeof formatBytes;
+    /**
+     * Human-readable file size (e.g. `1.2 MB`).
+     *
+     * Every piece of this used to be English and unreachable: a module-level unit
+     * table with no catalog key, and `toFixed()`, which writes an ASCII decimal
+     * point whatever `LOCALE_ID` says. A Russian page showed translated drop-zone
+     * copy above `3.4 KB`. The number now goes through `Intl.NumberFormat` and the
+     * unit through the catalog, joined by a template the catalog also owns — so a
+     * locale controls the separator, the digits and whether a space sits before
+     * the unit.
+     *
+     * Not a `computed`: it is called per file, with the file's size as its
+     * argument. It still re-runs on a locale switch, because the formatters it
+     * calls are signals read during the same change detection that renders the row.
+     */
+    protected formatBytes(bytes: number): string;
+    /** `{{value}} {{unit}}` — the join, so a locale owns the space too. */
+    private readonly sizeText;
+    /**
+     * One resolved signal per binary unit, indexed by the power of 1024 the
+     * arithmetic lands on.
+     *
+     * Spelled out rather than built from a key list: `i18n.spec.ts` reads every
+     * catalog key the library asks for out of the SOURCE, by matching a quoted
+     * dotted string inside the call, so a key built by interpolation is invisible
+     * to it. That spec fails rather than passing quietly, but either way the key
+     * would stop being checked.
+     */
+    private readonly unitTexts;
+    private readonly locale;
+    private number;
     constructor();
     protected openPicker(): void;
     protected onZoneKey(event: KeyboardEvent): void;

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

@@ -23,6 +23,11 @@ type WrFuzzyTextDirection = 'horizontal' | 'vertical' | 'both';
  * @see https://www.reactbits.dev/text-animations/fuzzy-text
  */
 declare class WrFuzzyText {
+    /**
+     * Visual-hiding declarations for the screen-reader copy of the text. A stable
+     * object literal, so the binding is written once rather than on every pass.
+     */
+    protected readonly srOnly: Readonly<Record<string, string>>;
     /** Text to render. */
     readonly text: _angular_core.InputSignal<string>;
     /** Font size as CSS length (`'4rem'`, `'72px'`, …) or px number. @default 'clamp(2rem, 10vw, 10rem)' */

package/types/ngwr-i18n.d.ts

@@ -19,9 +19,25 @@ type WrI18nParams = Readonly<Record<string, unknown>>;
 type WrI18nMissingHandler = (key: string, locale: string) => string;
 /** User-facing config for {@link provideWrI18n}. */
 interface WrI18nConfig {
-    /** BCP-47 tag used until the user calls `setLocale`. @default 'en' */
+    /**
+     * BCP-47 tag used until the user calls `use()`.
+     *
+     * Omitted, it is Angular's own `LOCALE_ID` — the app already states its
+     * locale there, and ngwr having a second, unrelated default is how a fully
+     * Russian app came to render an English calendar inside itself. See
+     * {@link WrI18n} for the whole precedence.
+     *
+     * @default LOCALE_ID
+     */
     readonly defaultLocale?: string;
-    /** Whitelisted locales — `setLocale` ignores anything outside this list. */
+    /**
+     * Whitelisted locales — `use()` ignores anything outside this list. Omitted,
+     * it is `[defaultLocale]`: it used to be a hardcoded `['en']`, so
+     * `provideWrI18n({ defaultLocale: 'ru' })` produced a service whose own
+     * default locale was not switchable back to.
+     *
+     * @default [defaultLocale]
+     */
     readonly availableLocales?: readonly string[];
     /**
      * Storage key for persisting the active locale (via `WrStorage`).
@@ -38,7 +54,11 @@ interface WrI18nConfigResolved {
     readonly storageKey: string | null;
     readonly missingHandler: WrI18nMissingHandler;
 }
-declare const DEFAULT_WR_I18N_CONFIG: WrI18nConfigResolved;
+/**
+ * Everything but the locale, which cannot be a constant: it is resolved from
+ * `LOCALE_ID` in an injection context. @internal
+ */
+declare const DEFAULT_WR_I18N_CONFIG: Omit<WrI18nConfigResolved, 'defaultLocale' | 'availableLocales'>;
 declare const WR_I18N_CONFIG: InjectionToken<WrI18nConfigResolved>;
 
 /**
@@ -56,9 +76,39 @@ declare const WR_I18N_CONFIG: InjectionToken<WrI18nConfigResolved>;
  * - a per-locale signal counter so every `translate()` reading the signal
  *   re-evaluates the moment a new catalog finishes loading
  *
- * Translations are looked up scope-first, then root. `t('forms.save', { ... })`
- * with `scope: 'forms'` will try the scoped catalog before falling back to
- * `forms.save` in the root catalog — useful for per-feature overrides.
+ * Translations are looked up scope-first then root, per locale, and the locale
+ * itself is tried as the full tag before the bare language underneath it — so
+ * an app running `ru-RU` resolves against a catalog registered as `ru`, and a
+ * regional catalog is never shadowed by a scope in the base language. For an
+ * app that spells its locale one way, which is every app that existed before
+ * the chain, the order is exactly what it always was.
+ *
+ * ## Which locale wins
+ *
+ * ngwr has three locale inputs and they used to be three unrelated answers — an
+ * app that set `LOCALE_ID: 'ru-RU'` correctly still rendered an English
+ * calendar, because the date token defaulted to `navigator.language`. The
+ * precedence is now stated, highest first:
+ *
+ * 1. **A subsystem's own explicit option.** `provideWrDateAdapter({ locale })`
+ *    pins dates; `provideWrI18n({ defaultLocale })` pins the catalog. The most
+ *    specific statement wins, because it can only have been deliberate.
+ * 2. **`WrI18n.locale()` — the runtime value.** The only one of the three that
+ *    can change without a reload, so it is what a language switcher writes.
+ * 3. **`LOCALE_ID`.** Angular's app-wide constant, and the seed for both of the
+ *    above when neither was given. One statement, one answer.
+ * 4. `'en-US'`, which is what `LOCALE_ID` itself falls back to.
+ *
+ * `navigator.language` is deliberately NOT in that list. It is the browser's
+ * preference, not the application's, and reading it made prerendered output and
+ * the hydrated page disagree.
+ *
+ * **What a runtime switch reaches, and what it does not.** `use()` repaints
+ * every catalog string. It does not move `LOCALE_ID`, which is a constant, so
+ * anything keyed on it — `wrDate` / `wrNumber` / `wrPlural`, `wr-input-number`,
+ * `wr-statistic`, `wr-counter` — and anything keyed on `WR_DATE_LOCALE` — the
+ * date adapter, and so `wr-calendar` and `wr-date-picker` — stays where it was.
+ * `use()` says so once in dev mode rather than leaving it to be discovered.
  *
  * @example
  * ```ts
@@ -76,6 +126,11 @@ declare class WrI18n {
     private readonly config;
     private readonly loader;
     private readonly storage;
+    /**
+     * Angular's own locale. Read for the dev-mode drift warning only — the
+     * resolved default already folded it in through `WR_I18N_CONFIG`. @internal
+     */
+    private readonly localeId;
     /**
      * Catalogs registered via `provideWrI18nBaseCatalogs()` — the floor under the
      * loader's own catalogs, so ngwr's built-in strings survive an app that only
@@ -94,7 +149,14 @@ declare class WrI18n {
     private readonly _locale;
     readonly locale: Signal<string>;
     constructor();
-    /** Switch active locale. Ignored when not whitelisted. */
+    /**
+     * Switch active locale. Ignored when not whitelisted.
+     *
+     * Text only — see the class docs for what a runtime switch cannot reach. The
+     * dev-mode warning below is the whole reporting of that limit; without it the
+     * failure is a screen showing German labels beside `3/15/2026`, with nothing
+     * anywhere saying why.
+     */
     use(locale: string): void;
     /** Available locales — pass-through from config. */
     available(): readonly string[];
@@ -118,6 +180,26 @@ declare class WrI18n {
      */
     private walkBase;
     private initialLocale;
+    /**
+     * Load a `(locale, scope)` catalog and, when the locale carries a region, the
+     * bare-language one under it. Both go in the cache; `t()` reads them in that
+     * order.
+     */
+    private loadChain;
+    /** One warning per service, not one per switch. @internal */
+    private warnedLocaleIdDrift;
+    /**
+     * Say once, in dev, that a runtime switch moved the text and nothing else.
+     *
+     * The mismatch is otherwise invisible in the way that costs the most time:
+     * the catalog strings all change, which reads as "the switch worked", and the
+     * dates and numbers beside them are still correct-looking output in the old
+     * locale. Silent when the new locale IS `LOCALE_ID`, because then nothing is
+     * out of step and a warning that fires when everything agrees is one people
+     * learn to ignore. Production builds drop the call entirely via `isDevMode()`
+     * tree-shaking.
+     */
+    private warnOnLocaleIdDrift;
     private loadCatalog;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrI18n, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<WrI18n>;

package/types/ngwr-icon-adapters-feather.d.ts

@@ -20,6 +20,17 @@ import { WrIconDef } from 'ngwr/icon';
  *
  * provideWrIcons([feather('plus', featherIcons.plus)]);
  * ```
+ *
+ * `innerSvg` is **markup**, not text — that is the shape upstream ships and the
+ * reason this adapter exists — so it is interpolated into the envelope
+ * verbatim. There is no escaping to add here: escaped markup is not markup.
+ * A `</svg>` in that input therefore closes the envelope early, and everything
+ * after it is a sibling of the icon rather than a child. Nothing executes
+ * regardless, because `<wr-icon>` never assigns the result to `innerHTML` — it
+ * rebuilds the first `<svg>` root from an allowlist and drops the rest. Feed
+ * this a map fetched at runtime and the sanitizer is what stands between it and
+ * the app's origin; feed it the `icons.json` from your own node_modules and
+ * neither matters.
  */
 declare function feather(name: string, innerSvg: string): WrIconDef;
 /**

package/types/ngwr-icon.d.ts

@@ -17,6 +17,7 @@ import { Provider } from '@angular/core';
 declare class WrIcon {
     readonly name: i0.InputSignal<string>;
     private readonly host;
+    private readonly doc;
     /**
      * Every icon visible from this position, walked up the whole chain of
      * registering injector levels.
@@ -35,6 +36,22 @@ declare class WrIcon {
     private readonly registry;
     private readonly icon;
     constructor();
+    /**
+     * `replaceChildren()` would say this in one call, but domino — the DOM
+     * `@angular/platform-server` renders into — does not implement it, and
+     * `innerHTML = ''` is the write Trusted Types refuses.
+     */
+    private clear;
+    /**
+     * Say what the allowlist removed, once per registered icon.
+     *
+     * A silently stripped icon is the failure mode this rebuild could introduce:
+     * a consumer's own glyph renders blank or wrong and nothing anywhere says
+     * why. Keyed on the definition object, so a page with fifty instances of the
+     * same icon warns once and an icon nobody renders never warns at all.
+     */
+    private reportStripped;
+    private static readonly reported;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrIcon, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<WrIcon, "wr-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -79,6 +96,15 @@ type WrIconName = string;
  */
 interface WrIconDef {
     name: WrIconName;
+    /**
+     * The icon's SVG markup, treated as **untrusted**: `<wr-icon>` rebuilds the
+     * first `<svg>` root from an allowlist of shape, paint and text elements
+     * rather than assigning the string to `innerHTML`, so event handlers,
+     * `<script>`, `<style>`, `<image>`, `<foreignObject>`, `<a>`, SMIL animation
+     * and non-fragment `href`s never reach the DOM. Registering a runtime-fetched
+     * or tenant-supplied icon set is therefore safe; dev mode warns whenever
+     * anything is dropped.
+     */
     data: string;
 }
 
@@ -99,7 +125,13 @@ interface WrIconDef {
  *
  * In dev mode, each icon is validated for common issues (missing
  * `viewBox`, malformed root). Validation is dropped from production
- * builds via `isDevMode()` tree-shaking.
+ * builds via `isDevMode()` tree-shaking, and it is a rendering check rather
+ * than a security one — see {@link validateIcon}.
+ *
+ * Icon `data` is treated as **untrusted** at render: `<wr-icon>` rebuilds the
+ * glyph from an allowlist instead of writing the string to `innerHTML`, so a
+ * set fetched at runtime or supplied by a tenant cannot execute in the app's
+ * origin. Dev mode names anything the allowlist removed.
  *
  * @example
  * ```ts
@@ -165,6 +197,15 @@ declare function provideWrIcons(icons: WrIconDef[]): Provider[];
  *   ],
  * });
  * ```
+ *
+ * **`svg` is treated as untrusted.** It is a string, so it is a natural place
+ * for a tenant's uploaded logo or an icon pack fetched from an API to end up,
+ * and `<wr-icon>` used to write it to `innerHTML`. It no longer does: the glyph
+ * is rebuilt from an allowlist of SVG shape, paint and text elements, so
+ * `<script>`, `<style>`, `<image>`, `<foreignObject>`, `<a>`, SMIL animation,
+ * every `on*` handler, `style` attributes and non-fragment `href`s are dropped
+ * before anything reaches the DOM. In dev mode the component names what it
+ * removed, so a legitimate icon that loses something says so out loud.
  */
 declare function svgIcon(name: string, svg: string): WrIconDef;
 

package/types/ngwr-input-number.d.ts

@@ -53,7 +53,7 @@ declare class WrInputNumber implements FormValueControl<number | null> {
      */
     readonly rounded: _angular_core.InputSignalWithTransform<boolean | null, BooleanInput>;
     /**
-     * `size`, then the app config, then `md` — bound to the field's `[wrSize]`.
+     * `size`, then the app config, then `md` — bound to the field's `[size]`.
      *
      * The chrome this control is built from resolves the same pair for itself, so
      * the config lookup falls through to `input.*` rather than stopping at

package/types/ngwr-input-otp.d.ts

@@ -111,6 +111,9 @@ declare class WrInputOtp implements FormValueControl<string> {
     protected readonly cellRefs: _angular_core.Signal<readonly ElementRef<HTMLInputElement>[]>;
     constructor();
     protected onInput(event: Event, index: number): void;
+    /** @see onInput — this is where an IME's text finally arrives. */
+    protected onCompositionEnd(event: CompositionEvent, index: number): void;
+    private commitCell;
     protected onKeyDown(event: KeyboardEvent, index: number): void;
     protected onPaste(event: ClipboardEvent): void;
     protected onBlur(): void;

package/types/ngwr-input.d.ts

@@ -69,11 +69,18 @@ declare class WrInput {
     protected readonly ariaInvalid: _angular_core.Signal<"true" | null>;
     protected readonly describedBy: _angular_core.Signal<string | null>;
     /**
-     * Control size. Named `wrSize` (not `size`) so it never clashes with the
-     * native `<input size>` attribute. Unset, it falls back to
+     * Control size. Unset, it falls back to
      * `provideWrConfig({ input: { size } })`. @default 'md'
+     *
+     * Called `wrSize` until v14, to dodge the native `<input size>` attribute —
+     * which measures the field in characters and which `.wr-input`'s `width: 100%`
+     * has always overridden, so the clash it guarded against was never observable.
+     * It made this the one size input in the catalog spelled differently from the
+     * other twenty-three. The cost of the change is that a consumer who wanted the
+     * NATIVE `size` on an ngwr input can no longer have it — but `width: 100%`
+     * meant they never did.
      */
-    readonly wrSize: _angular_core.InputSignal<WrInputSize | null>;
+    readonly size: _angular_core.InputSignal<WrInputSize | null>;
     /**
      * Pill-shaped corners. Unset, it falls back to
      * `provideWrConfig({ input: { rounded } })`; `[rounded]="false"` turns a
@@ -84,7 +91,7 @@ declare class WrInput {
     protected readonly resolvedRounded: _angular_core.Signal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrInput, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrInput, "input[wrInput], textarea[wrInput]", never, { "wrSize": { "alias": "wrSize"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrInput, "input[wrInput], textarea[wrInput]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**

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

@@ -7,6 +7,12 @@ import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 
+/**
+ * An arrow key, by the direction a user would say out loud — the parameter type
+ * of `WrKnobHarness.pressArrow`, exported so a consumer's own test helper can name
+ * what it forwards.
+ */
+type WrKnobArrowKey = 'left' | 'right' | 'up' | 'down';
 /** Narrows which `<wr-knob>` a harness query matches. */
 interface WrKnobHarnessFilters extends BaseHarnessFilters {
     /** Match the dial's accessible name — a string is an exact match, a RegExp is tested. */
@@ -26,8 +32,6 @@ interface WrKnobHarnessFilters extends BaseHarnessFilters {
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 
-/** The two arrow keys that raise the value, and the two that lower it. */
-type Arrow = 'left' | 'right' | 'up' | 'down';
 /**
  * Test harness for `<wr-knob>` — the radial dial.
  *
@@ -105,7 +109,7 @@ declare class WrKnobHarness extends ComponentHarness {
      * component, which has one axis and no mirroring to do. `shift` multiplies the step
      * by ten.
      */
-    pressArrow(arrow: Arrow, options?: {
+    pressArrow(arrow: WrKnobArrowKey, options?: {
         shift?: boolean;
     }): Promise<void>;
     /** Press Home — the bottom of the range. */
@@ -147,4 +151,4 @@ declare class WrKnobHarness extends ComponentHarness {
 }
 
 export { WrKnobHarness };
-export type { WrKnobHarnessFilters };
+export type { WrKnobArrowKey, WrKnobHarnessFilters };

package/types/ngwr-knob.d.ts

@@ -95,6 +95,24 @@ declare class WrKnob implements FormValueControl<number> {
      * template this one otherwise mirrors, emits on blur for exactly this reason.
      */
     protected onBlur(): void;
+    /**
+     * The APG slider keys, and they do NOT mirror under `dir="rtl"` — which is a
+     * decision, not an oversight, and the one place it is written down.
+     *
+     * `wr-slider` swaps ArrowLeft and ArrowRight in RTL because its TRACK mirrors:
+     * the thumb is placed with `inset-inline-start`, so the visual maximum moves to
+     * the left and a key naming a side has to move with it. This dial does not
+     * mirror. It is an SVG gauge drawn in a fixed 100×100 viewBox, and SVG content
+     * is not reordered by the reading direction — the arc sweeps clockwise from 7
+     * o'clock to 5 o'clock in every locale, the same way a clock face or a car's
+     * rev counter does. So ArrowRight still moves the handle toward the visually
+     * right-hand side of the arc in RTL, and swapping the keys would be the thing
+     * that broke the mapping.
+     *
+     * That is why nothing here injects `Directionality`, and why the stylesheet
+     * carries no `rtl-ok:` marker: there is no physical CSS in the value path at
+     * all, only fixed SVG geometry.
+     */
     protected onKeydown(event: KeyboardEvent): void;
     /**
      * Nearest step, measured FROM `min`. A grid anchored at zero offers values the

package/types/ngwr-loading-bar-router.d.ts

@@ -0,0 +1,35 @@
+import { EnvironmentProviders } 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
+ */
+
+/**
+ * Drive {@link WrLoadingBar} from router navigations: `NavigationStart` takes a
+ * slot, and each of `NavigationEnd` / `NavigationCancel` / `NavigationError`
+ * releases one.
+ *
+ * @example
+ * ```ts
+ * import { provideWrLoadingBarRouter } from 'ngwr/loading-bar/router';
+ *
+ * bootstrapApplication(App, {
+ *   providers: [provideRouter(routes), provideWrLoadingBarRouter()],
+ * });
+ * ```
+ *
+ * **Why this is a call and not the default.** `WrLoadingBar` used to inject
+ * `Router` itself, so navigations drove the bar with no configuration — and
+ * every app that rendered `<wr-loading-bar>` paid 66.3 kB of `@angular/router`
+ * for it, two thirds of the entry point's total cost, whether or not it had
+ * routes. `{ optional: true }` does not help: an optional inject still names the
+ * class as the token, and it measured byte-for-byte identical to a required one.
+ * An automatic integration and a router-free bundle cannot both exist in a
+ * statically linked app, so the automatic half moved here.
+ */
+declare function provideWrLoadingBarRouter(): EnvironmentProviders;
+
+export { provideWrLoadingBarRouter };

package/types/ngwr-loading-bar.d.ts

@@ -5,12 +5,19 @@ import { Signal } from '@angular/core';
 type WrLoadingState = 'idle' | 'running' | 'completing';
 
 /**
- * Singleton state machine for a top-of-page progress indicator. Driven
- * by router events out of the box, plus a manual `start()` / `complete()`
- * API for HTTP-interceptor-style usage.
+ * Singleton state machine for a top-of-page progress indicator: a counter of
+ * in-flight tasks and a tween between 0 and 1, driven through `start()` /
+ * `complete()`.
  *
  * Pair with `<wr-loading-bar>` to render the bar at the top of your shell.
  *
+ * It knows nothing about the router on purpose. Naming `Router` here — even
+ * `{ optional: true }`, which is byte-for-byte identical to a required inject —
+ * put 66.3 kB of `@angular/router` into every app that rendered the bar,
+ * two thirds of what `ngwr/loading-bar` cost and 27× the component's own code.
+ * Call `provideWrLoadingBarRouter()` from `ngwr/loading-bar/router` to have
+ * navigations drive it.
+ *
  * @example
  * ```ts
  * // From an HttpInterceptor:
@@ -22,8 +29,6 @@ type WrLoadingState = 'idle' | 'running' | 'completing';
  * @see https://ngwr.dev/reference/services/loading-bar
  */
 declare class WrLoadingBar {
-    private readonly router;
-    private readonly destroyRef;
     private readonly isBrowser;
     /** Live count of pending "tasks" (manual + router). */
     private readonly count;
@@ -33,7 +38,6 @@ declare class WrLoadingBar {
     readonly state: Signal<WrLoadingState>;
     private timer;
     private holdTimer;
-    constructor();
     /** Reserve a slot. The bar starts trickling as long as `count > 0`. */
     start(): void;
     /** Release a slot. When the last one closes, the bar fast-forwards to 100% then resets. */
@@ -51,9 +55,15 @@ declare class WrLoadingBar {
 /**
  * Thin progress bar fixed to the top of the viewport.
  *
- * Drop one at the root of your shell. Reads the singleton {@link WrLoadingBar}
- * — every router navigation drives it automatically; HTTP interceptors
- * can call `start()` / `complete()` to add their own slots.
+ * Drop one at the root of your shell. Reads the singleton {@link WrLoadingBar},
+ * which is driven manually by `start()` / `complete()` — an HTTP interceptor, a
+ * long save, anything with a beginning and an end.
+ *
+ * Router navigations drive it too, but only once you add
+ * `provideWrLoadingBarRouter()` from `ngwr/loading-bar/router`. That is an opt-in
+ * because the subscription is what pulls `@angular/router` into the bundle: this
+ * component is 2.4 kB of its own code and used to carry 66 kB of router into
+ * apps that never routed.
  *
  * @example
  * ```html

package/types/ngwr-mention.d.ts

@@ -105,6 +105,19 @@ declare class WrMention<T extends WrMentionItem = WrMentionItem> {
     private liveRegion;
     constructor();
     private announce;
+    /**
+     * True between `compositionstart` and `compositionend`.
+     *
+     * Detection must not run on the half-built text an IME leaves in the field:
+     * `@やま` is a reading on its way to `@山田`, and matching the reading opens a
+     * panel that then eats the Enter meant to accept the conversion. So the field
+     * is read once, on `compositionend`, when the text is real.
+     */
+    private composing;
+    /** @internal */
+    protected onCompositionStart(): void;
+    /** @internal */
+    protected onCompositionEnd(): void;
     /** @internal */
     protected onInput(): void;
     /** @internal */