ngwr 11.2.0 → 12.1.0

package/types/ngwr-drawer.d.ts

@@ -48,6 +48,16 @@ interface WrDrawerOptions<D = unknown> {
     readonly closeOnBackdropClick?: boolean;
     /** When `true`, the Escape key closes the drawer. @default true */
     readonly closeOnEscape?: boolean;
+    /**
+     * When `true`, the drawer closes as soon as the URL changes — the Back button
+     * and any `router.navigate()` alike. Nothing else ties a drawer to the route
+     * it was opened on, so turning this off leaves the panel, its backdrop, its
+     * focus trap and the page-wide scroll block over whatever page the app
+     * navigates to. Turn it off only for a drawer that OWNS the navigation (a
+     * filter panel that keeps its state in the query string).
+     * @default true
+     */
+    readonly closeOnNavigation?: boolean;
     /**
      * Render a dismiss (×) button in the panel's top-right corner. Set `false`
      * when the content supplies its own close affordance. @default true
@@ -125,12 +135,33 @@ declare class WrDrawer {
     readonly closeLabel: _angular_core.InputSignal<string | null>;
     protected readonly resolvedCloseLabel: _angular_core.Signal<string>;
     protected readonly panelTpl: _angular_core.Signal<TemplateRef<any>>;
+    /**
+     * A projected `[wrDrawerTitle]`, if the consumer gave one.
+     *
+     * The dismiss button is corner chrome positioned at a fixed
+     * `inset-block-start` chosen to centre it on the TITLE's first line. With no
+     * title the content starts at the top of the panel and runs underneath it: on
+     * a bare `<wr-drawer><nav /></wr-drawer>` the button covered the first menu
+     * row by 24×16 px, and `elementFromPoint` at the button's centre returned the
+     * button, so that corner of the first item was unclickable. The panel has to
+     * know, because only the panel can reserve the space.
+     */
+    private readonly projectedTitle;
     protected panelClass(): string;
     private swipeStartX;
     private swipeStartY;
     private swiping;
     protected onSwipeStart(event: PointerEvent): void;
     protected onSwipeMove(event: PointerEvent, panel: HTMLElement): void;
+    /**
+     * A cancelled pointer is an ABANDONED swipe, not a completed one — the system
+     * took the gesture away (a call, a system gesture, an orientation change) and
+     * no `pointerup` ever arrives. Routing it through `onSwipeEnd` dismissed the
+     * drawer on an interruption the user did not ask for and, because the overlay
+     * is disposed with the dragged offset applied, could not take back. Same rule
+     * `wr-pull-to-refresh` states for `touchcancel`.
+     */
+    protected onSwipeCancel(panel: HTMLElement): void;
     protected onSwipeEnd(event: PointerEvent, panel: HTMLElement): void;
     /** Axis + sign of the closing direction for the current position. */
     private closeAxis;
@@ -158,7 +189,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; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "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"; }, ["projectedTitle"], ["*"], true, never>;
 }
 
 /**
@@ -265,14 +296,34 @@ declare class WrDrawerManager {
     private readonly focusTrapFactory;
     private readonly isBrowser;
     private readonly i18n;
+    private readonly location;
     open<C, R = unknown, D = unknown>(component: ComponentType<C>, options?: WrDrawerOptions<D>): WrDrawerRef<C, R>;
+    /**
+     * Tie the drawer's lifetime to the URL it was opened on — the same treatment
+     * `WrDialog` gets, and for the same reason.
+     *
+     * Nothing else does. The overlay belongs to a root service and is dismissed
+     * only by the backdrop, Escape, the appended × or an explicit `close()`, so
+     * navigating away left the panel, its backdrop, its focus trap and the
+     * page-wide scroll block sitting over a page the user never opened them on.
+     *
+     * `onUrlChange`, not `Location.subscribe()` — which is what CDK's own
+     * `disposeOnNavigation` uses: `subscribe` fires on popstate alone, so an in-app
+     * `router.navigate()` left the drawer standing. And `drawerRef.close()` rather
+     * than disposing the overlay behind the ref's back, which would never emit
+     * `closed`, never destroy the focus trap, and leave `awaitClose()` pending.
+     */
+    private watchNavigation;
     /**
      * The dismiss button's accessible name.
      *
-     * Resolved per open, not once at injection: this is a root service, so a
-     * `readI18nText` field — which is what `WrDialog` uses — would be evaluated
-     * before an async catalog had loaded and then freeze that answer for the life
-     * of the app.
+     * Resolved per open, not stored as a plain string at injection: this is a root
+     * service, so a one-shot read — which is what `WrDialog` used to have, and moved
+     * off for this reason — would run before an async catalog had loaded and then
+     * freeze that answer for the life of the app. (`readI18nText` hands back a signal
+     * now, so it would no longer freeze; the name still has to be pushed onto the
+     * button per open either way.) `WrDialog.closeLabel()` is the matching precedent,
+     * not the counter-example.
      *
      * The miss check is the point. `t()` hands back the KEY when the catalog has
      * no entry, and `WrI18n` is root-provided with an empty catalog by default —

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

@@ -101,8 +101,14 @@ interface TimeChip {
     readonly top: number;
     /** Height as a multiple of the cell, ×100. */
     readonly height: number;
-    /** Horizontal share of the column, both 0–100. */
-    readonly left: number;
+    /**
+     * Lane offset from the column's inline START, 0–100 — not from its physical
+     * left. Concurrent events are laid out in reading order, so under `dir="rtl"`
+     * lane 0 belongs at the right; a physical `left` would read the cluster
+     * back-to-front, which is the one thing in this component that was not logical.
+     */
+    readonly inlineStart: number;
+    /** Lane width as a share of the column, 0–100. */
     readonly width: number;
     readonly continuesBefore: boolean;
     readonly continuesAfter: boolean;

package/types/ngwr-falling-text-testing.d.ts

@@ -45,9 +45,11 @@ interface WrFallingTextHarnessFilters extends BaseHarnessFilters {
  * implementation would satisfy every naive test but not this one.
  *
  * **Nothing positional is offered, and that is not a jsdom concession.** The words'
- * `transform` values are one frame of a loop that never stops, seeded by `Math.random()`,
- * so they are not reproducible even in a real browser; there is no rest state to call
- * settled; the drag path needs `setPointerCapture` and AABB hit-testing over boxes that
+ * `transform` values are one frame of a physics loop seeded by `Math.random()`, so they
+ * are not reproducible even in a real browser; the loop parks once no word's transform
+ * changes any more, but where it parks is a different arrangement every run, and words
+ * packed tightly enough to keep jostling never reach that point at all; the drag path
+ * needs `setPointerCapture` and AABB hit-testing over boxes that
  * a unit test measures as 0×0 at the origin, where every word contains every point. Nor
  * is `[gravity]` or `[trigger]` readable — neither reaches the DOM, and answering them
  * would mean reaching into the component instance. There is no `isReducedMotion()`

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

@@ -52,7 +52,7 @@ declare class WrFallingText {
     }[]>;
     constructor();
     private start;
-    /** Apply the body's position + angle to the DOM. */
+    /** Apply the body's position + angle to the DOM. `false` when it has not moved. */
     private commit;
     private toLocal;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrFallingText, never>;

package/types/ngwr-form.d.ts

@@ -133,8 +133,18 @@ declare class WrFormField implements WrFormFieldContext {
     readonly hint: _angular_core.InputSignal<string>;
     /** Show a `*` next to the label. @default false */
     readonly required: _angular_core.InputSignalWithTransform<boolean, any>;
-    /** Show `(optional)` next to the label. Mutually exclusive with `required`. @default false */
+    /**
+     * Show an "optional" marker next to the label — the word comes from
+     * `optionalLabel`. Mutually exclusive with `required`. @default false
+     */
     readonly optional: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Word inside the optional marker's parentheses. Falls back to
+     * `form.optional`, then `'optional'`. The parentheses are the template's, so
+     * no locale has to repeat punctuation.
+     */
+    readonly optionalLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedOptional: _angular_core.Signal<string>;
     /**
      * Force a specific id on the label's `for` attribute. Auto-generated
      * otherwise, and adopted by the projected `wrInput` unless that element
@@ -201,7 +211,7 @@ declare class WrFormField implements WrFormFieldContext {
     private resolve;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrFormField, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrFormField, "wr-form-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "autoErrors": { "alias": "autoErrors"; "required": false; "isSignal": true; }; }, {}, ["ngControl", "projectedErrors"], ["*", "wr-form-error"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrFormField, "wr-form-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "optionalLabel": { "alias": "optionalLabel"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "autoErrors": { "alias": "autoErrors"; "required": false; "isSignal": true; }; }, {}, ["ngControl", "projectedErrors"], ["*", "wr-form-error"], true, never>;
 }
 
 /**

package/types/ngwr-glitch-text-testing.d.ts

@@ -45,10 +45,15 @@ interface WrGlitchTextColourSplit {
  *
  * **The one thing worth testing here is the pairing.** The two torn clones are
  * `::before` / `::after` pseudo-elements whose glyphs come from `content:
- * attr(data-text)`, so the string has to be in the host's text node AND in the host's
- * `data-text` attribute. Drop either binding and the visible text stays flawless while
- * the effect disappears — no error, no missing element, nothing else in the DOM
- * changes. {@link isCloneTextInSync} is that assertion in one call.
+ * attr(data-text)`, so the string has to be in `__label`'s text node AND in the
+ * `data-text` attribute on `__clones`. Drop either binding and the visible text stays
+ * flawless while the effect disappears — no error, no missing element, nothing else in
+ * the DOM changes. {@link isCloneTextInSync} is that assertion in one call.
+ *
+ * **Why they are two elements**, which is also why `data-text` is not on the host:
+ * generated content is exposed to the accessibility tree, so pseudos on the host made
+ * the string announce three times. `__clones` carries the `aria-hidden`;
+ * {@link isCloneLayerHidden} is the assertion that keeps it there.
  *
  * **Everything else the harness reads is an inline custom property**, because that is
  * everything the component writes: the two clone durations, the two colour-split
@@ -85,18 +90,22 @@ interface WrGlitchTextColourSplit {
  */
 declare class WrGlitchTextHarness extends ComponentHarness {
     static hostSelector: string;
+    /** The readable copy of the string — the only part of the component in the a11y tree. */
+    private readonly label;
+    /** The `aria-hidden` layer the two pseudo-clones hang off. */
+    private readonly clones;
     /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
     static with(options?: WrGlitchTextHarnessFilters): HarnessPredicate<WrGlitchTextHarness>;
     /**
      * The rendered text, trimmed.
      *
      * The half a sighted user reads, and the half every other check would notice
-     * breaking. The component interpolates the input straight onto the host, so there is
-     * no inner element to query.
+     * breaking. Read off `__label`, which is the whole of the component's accessible
+     * content — the clone layer beside it is `aria-hidden` and empty in the DOM.
      */
     getText(): Promise<string>;
     /**
-     * The string the two clone layers draw from — the host's `data-text`.
+     * The string the two clone layers draw from — `data-text` on `__clones`.
      *
      * The half nothing else notices. `content: attr(data-text)` is how both pseudo-clones
      * get their glyphs, so this attribute IS the effect. `null` means the mirror is gone
@@ -108,12 +117,23 @@ declare class WrGlitchTextHarness extends ComponentHarness {
      *
      * The component's defining silent failure, as a single assertion — two separate reads
      * are two things a spec can forget to write together. Compared raw on both sides,
-     * with no trimming: the template is the bare interpolation, so the text node and the
+     * with no trimming: `__label` holds the bare interpolation, so its text node and the
      * attribute are byte-identical or the mirror is broken. An empty `text` is legal and
      * counts as in sync — `data-text=""` is a mirror of nothing, not a missing binding,
      * which is why {@link getCloneText} reports the absent case as `null` instead.
      */
     isCloneTextInSync(): Promise<boolean>;
+    /**
+     * Whether the clone layer is still hidden from assistive technology.
+     *
+     * The reason the component is two elements rather than one. `content: attr(data-text)`
+     * is exposed to the accessibility tree, so with the pseudos on the host the string was
+     * announced three times and a wrapping heading or link computed its name as
+     * "404 404 404". Nothing visual changes if the `aria-hidden` is dropped, and neither
+     * a11y gate in this repo can see it: `check:a11y` reads prerendered HTML with no
+     * stylesheets, and axe has no rule for duplicated generated content.
+     */
+    isCloneLayerHidden(): Promise<boolean>;
     /**
      * Whether the effect idles until the pointer arrives (`enableOnHover`).
      *
@@ -164,6 +184,15 @@ declare class WrGlitchTextHarness extends ComponentHarness {
      * the whole reason this reports the absent case as `null` instead of as a colour.
      */
     getSliceBackground(): Promise<string | null>;
+    /**
+     * One custom property off the host's `style` ATTRIBUTE.
+     *
+     * Not `getCssValue()`, which is `getComputedStyle`: with the entry point's own
+     * stylesheet loaded that resolves the sheet's declaration, so the method
+     * answers plausibly at exactly the moment the host binding — the thing under
+     * test — is what broke. The attribute holds only what the component wrote.
+     */
+    private inlineVar;
     /** One of the host's inline duration properties, as a number of seconds. */
     private seconds;
 }

package/types/ngwr-gradient-text-testing.d.ts

@@ -38,6 +38,15 @@ interface WrGradientTextHarnessFilters extends BaseHarnessFilters {
  * included, because the duplicate is the thing worth asserting and stripping it would
  * hide the day it goes missing.
  *
+ * **The three custom properties are read off the `style` ATTRIBUTE, not through
+ * `getCssValue()`, and that is not a jsdom concession.** `.wr-gradient-text` declares
+ * its own `--wr-gradient-text-image`, `-size` and `-duration`, spelling out the same
+ * defaults the component computes — the three built-in stops with their wrap stop,
+ * `300% 100%`, `8s`. So with the stylesheet loaded a computed read answers with a
+ * perfectly healthy-looking value at exactly the moment the host binding is what broke,
+ * and every throw below goes unreachable. What the component wrote is the only value
+ * nothing else can forge.
+ *
  * **Direction is two facts, not one.** The modifier class says which way the gradient
  * travels and {@link getBackgroundSize} says which axis it was stretched along, and they
  * are computed separately: a direction change that forgets the size leaves every class
@@ -111,8 +120,9 @@ declare class WrGradientTextHarness extends ComponentHarness {
      * shows up here as four entries rather than one.
      *
      * Throws rather than guessing when the property holds something that is not a
-     * `linear-gradient()` — an empty read means the host binding is gone, and a list of
-     * fragments parsed out of the wreckage would look like a colour set.
+     * `linear-gradient()`, because a list of fragments parsed out of the wreckage would
+     * look like a colour set. A host that publishes no gradient at all throws one step
+     * earlier, from {@link getGradient}.
      */
     getColors(): Promise<string[]>;
     /**
@@ -130,7 +140,8 @@ declare class WrGradientTextHarness extends ComponentHarness {
      *
      * Proves the input reaches CSS at all, `numAttr` coercion included — a string attribute
      * arrives as a number and garbage falls back to the documented default. Throws when the
-     * property holds no number, which is the only way the read can fail.
+     * property holds something that is not a number of seconds; a host that publishes no
+     * duration at all throws from the read itself.
      */
     getAnimationDurationSeconds(): Promise<number>;
     /**
@@ -167,6 +178,8 @@ declare class WrGradientTextHarness extends ComponentHarness {
      * arriving, which is the half that can go wrong in TypeScript.
      */
     pausesOnHover(): Promise<boolean>;
+    /** One of the host's own custom properties. See the class note on why this is not `getCssValue()`. */
+    private published;
 }
 
 export { WrGradientTextHarness };

package/types/ngwr-i18n.d.ts

@@ -380,11 +380,20 @@ declare function provideWrI18nHttpLoader(config: WrI18nHttpLoaderConfig): Provid
  */
 declare function useI18nText(binding: Signal<string | null | undefined>, key: string, fallback: string): Signal<string>;
 /**
- * Like {@link useI18nText} but takes a literal value (not a Signal) — for
- * computed `aria-label`s that already mix a static piece with a dynamic
- * value. Returns the resolved string once, at injection time.
+ * {@link useI18nText} without a binding to forward — for a built-in string the
+ * component exposes no override input for. Same reactivity, same fallback
+ * rules; the only difference is the missing first argument.
+ *
+ * It used to return a plain `string`, resolved once at injection time, and
+ * that was wrong in the ordinary case rather than an edge one: `WrI18n` writes
+ * every loader-backed catalog from `firstValueFrom(...).then(...)`, so even a
+ * static loader serving an object literal lands a microtask AFTER the first
+ * change-detection pass. Every component built in that pass read an empty
+ * catalog and froze its English fallback for the life of the app — in one
+ * `<wr-date-picker>` the field said "Открыть календарь" and the calendar
+ * button beside it "Open calendar", off the same key.
  */
-declare function readI18nText(key: string, fallback: string): string;
+declare function readI18nText(key: string, fallback: string): Signal<string>;
 /**
  * Build a per-call formatter for parametrized labels (e.g. ARIA labels
  * that interpolate a per-row value: `"Remove {{label}}"`). Returns a

package/types/ngwr-image-cropper-testing.d.ts

@@ -1,4 +1,4 @@
-import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+import { BaseHarnessFilters, TestKey, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
 import { WrCropHandle } from 'ngwr/image-cropper';
 
 /**
@@ -25,6 +25,14 @@ interface WrImageCropperHarnessFilters extends BaseHarnessFilters {
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 
+declare const ARROWS: {
+    readonly left: TestKey.LEFT_ARROW;
+    readonly right: TestKey.RIGHT_ARROW;
+    readonly up: TestKey.UP_ARROW;
+    readonly down: TestKey.DOWN_ARROW;
+};
+/** The four directions the crop window's keyboard model understands. */
+type WrCropArrow = keyof typeof ARROWS;
 /** Where the crop window sits over the DISPLAYED image, in CSS pixels. */
 interface WrCropWindowBox {
     readonly x: number;
@@ -41,13 +49,16 @@ interface WrCropWindowBox {
  * `naturalWidth`, converts between display and source pixels, and moves the crop
  * window with pointer deltas. jsdom measures nothing — every rect is 0×0 and
  * `naturalWidth` is 0 — so an image never "loads", the crop UI never renders, and a
- * synthetic drag divides by zero. There is deliberately no `moveCrop()` or
- * `resizeCrop()`: either would write `NaN` and report success.
+ * synthetic drag divides by zero. There is deliberately no drag method: it would
+ * write `NaN` and report success.
  *
  * What a spec CAN do is give the image a box and a natural size itself, then call
  * {@link dispatchImageLoad} — the two numbers `onImageLoad` reads are the whole
  * stub, and from there {@link getCropBox} and {@link getHandles} are real answers,
- * because the component writes the crop window's geometry as inline pixels.
+ * because the component writes the crop window's geometry as inline pixels. The
+ * KEYBOARD path needs the same stub to get the crop UI up, but nothing beyond it:
+ * its step is a constant rather than a pointer delta, so {@link pressArrow} lands
+ * on a number a spec can name.
  *
  * ```ts
  * // In your spec, before dispatching the load:
@@ -57,11 +68,13 @@ interface WrCropWindowBox {
  * Object.defineProperty(img, 'naturalHeight', { value: 800 });
  * ```
  *
- * **There is also nothing to click.** The cropper renders no buttons: a consumer
- * takes the result by calling `crop()` on the component through a `viewChild`, and
- * reads `cropRect()` the same way. Those are component API rather than DOM, so they
- * are outside what a harness can reach at all — which is worth knowing rather than
- * discovering.
+ * **There is nothing to click.** The cropper renders no buttons: the result
+ * arrives on the `(cropped)` output, which emits a `Blob` after each drag end or
+ * each run of arrow keys, and a consumer who wants a one-off read calls `toBlob()` /
+ * `toDataUrl()` — or `cropRect()` for the geometry — on the component through a
+ * `viewChild`. An output and three instance members: component API rather than DOM,
+ * so all of it is outside what a harness can reach at all, which is worth knowing
+ * rather than discovering.
  *
  * @example
  * ```ts
@@ -127,8 +140,34 @@ declare class WrImageCropperHarness extends ComponentHarness {
     getHandles(): Promise<WrCropHandle[]>;
     /** Whether the dimming backdrop with the cut-out is drawn. */
     hasBackdrop(): Promise<boolean>;
+    /**
+     * Press an arrow key on the crop window — one display pixel, or ten with
+     * `shift`; `alt` resizes from the east / south edge instead of moving.
+     *
+     * Sent to the crop window, where the component listens, so it does not depend on
+     * jsdom having managed to focus anything. `sendKeys` fires keyup as well as
+     * keydown, which is what makes `(cropped)` emit — the component treats a run of
+     * arrows as one gesture, the way a drag is one.
+     */
+    pressArrow(arrow: WrCropArrow, modifiers?: {
+        alt?: boolean;
+        shift?: boolean;
+    }): Promise<void>;
+    /** The crop window's accessible name. Comes from the catalog. */
+    getCropWindowLabel(): Promise<string | null>;
+    /**
+     * The last thing the live region announced — the crop rect in SOURCE pixels,
+     * as `x, y, width × height`.
+     *
+     * Empty until a key has moved the crop: a pointer drag deliberately says nothing
+     * (it would flood the region and the sighted user can see it), and the initial
+     * crop is not news. Two questions, not one — {@link getCropBox} reads the window's
+     * DISPLAY geometry, and a component that moved the box without announcing it
+     * would still pass that one.
+     */
+    getAnnouncement(): Promise<string>;
     private requireReady;
 }
 
 export { WrImageCropperHarness };
-export type { WrImageCropperHarnessFilters };
+export type { WrCropArrow, WrCropWindowBox, WrImageCropperHarnessFilters };

package/types/ngwr-image-cropper.d.ts

@@ -30,8 +30,12 @@ interface RectPx {
  * the crop window or any of its eight handles. Optionally lock the crop
  * to a fixed `[aspectRatio]`.
  *
- * `(cropped)` fires after each drag end with a freshly-rendered `Blob`
- * of the cropped region. For one-off reads use `toBlob()` / `toDataUrl()`.
+ * The crop window is also the one tab stop: arrow keys move it, Alt with an
+ * arrow key resizes it, and Shift makes either step ten pixels instead of one.
+ *
+ * `(cropped)` fires after each drag end — or each run of arrow keys — with a
+ * freshly-rendered `Blob` of the cropped region. For one-off reads use
+ * `toBlob()` / `toDataUrl()`.
  *
  * @example
  * ```html
@@ -62,6 +66,15 @@ declare class WrImageCropper {
     protected readonly imgEl: _angular_core.Signal<ElementRef<HTMLImageElement>>;
     /** Resolved object URL for `src` (so File / Blob render in `<img>`). */
     protected readonly emptyText: _angular_core.Signal<string>;
+    /** Accessible name of the crop window — the component's only tab stop. */
+    protected readonly resolvedWindowLabel: _angular_core.Signal<string>;
+    /** The key model, referenced by the window's `aria-describedby`. */
+    protected readonly resolvedKeyHelp: _angular_core.Signal<string>;
+    /** Id linking the crop window to the help text. Random rather than counted:
+     *  the crop UI only exists after a real image load, so it never prerenders. */
+    protected readonly helpId: string;
+    /** Live-region text — written by the keyboard path only (see `onWindowKeydown`). */
+    protected readonly announcement: _angular_core.WritableSignal<string>;
     protected readonly objectUrl: _angular_core.WritableSignal<string | null>;
     /** Previous object URL we created — kept off-signal so the resolve
      *  effect doesn't depend on its own writes (which would loop). */
@@ -78,6 +91,8 @@ declare class WrImageCropper {
     }>;
     /** Crop rect in display coordinates. */
     protected readonly cropDisplay: _angular_core.WritableSignal<RectPx>;
+    /** Watches the rendered image box — see `watchResize`. */
+    private resizeObserver;
     /** Currently active drag handle. */
     private active;
     private startPointer;
@@ -91,18 +106,68 @@ declare class WrImageCropper {
      *
      * `display` is the field that gates everything downstream — the crop UI renders on
      * `display().w > 0` and `cropRect` returns zeros without it — so it is the only one
-     * a test can observe. The other two are reset for coherence: anything that learns to
-     * set `display` from elsewhere (a resize observer is the obvious candidate for this
-     * component) would otherwise resurrect a crop measured against the previous image.
+     * a test can observe. The other two are reset for coherence: the resize observer
+     * below also writes `display`, and left alone they would resurrect a crop measured
+     * against the previous image (which is why `onResize` refuses to run on a zeroed
+     * `display` — see there).
      */
     private resetGeometry;
     protected onImageLoad(): void;
+    /**
+     * Keep `display` on the box the image is actually rendered at.
+     *
+     * The stylesheet sizes the image responsively — `max-width: 100%`,
+     * `max-height: 70dvh`, `height: auto` — so the single measurement taken in the
+     * `(load)` handler stops being true as soon as the container or the viewport
+     * changes. Everything the user sees and touches is in DISPLAY pixels: the crop
+     * window's inline `left` / `top` / `width` / `height`, the backdrop cut-out, and
+     * the bounds `applyMove` / `applyResize` clamp against. Measured once, a narrowed
+     * window leaves the crop painted past the edge of the image and draggable off it.
+     *
+     * Re-observed per load rather than once, because a new `src` may mount a new
+     * `<img>`; the old observation would then be on a detached element.
+     */
+    private watchResize;
+    /**
+     * Rescale the crop by however much the image did, so the user keeps the region
+     * they picked instead of having it re-centred: `cropRect()` — the source-pixel
+     * value a consumer acts on — comes out the same across the resize.
+     */
+    private onResize;
     /** Compute a sensible initial crop — centered, respecting aspectRatio. */
     private initialCrop;
     protected readonly handles: readonly WrCropHandle[];
     protected onPointerDown(handle: WrCropHandle, event: PointerEvent): void;
     protected onPointerMove(event: PointerEvent): void;
     protected onPointerUp(event: PointerEvent): void;
+    /** Whether a key has moved the crop since the last `keyup`. */
+    private keyboardDirty;
+    /**
+     * The component's only keyboard path. Arrow keys move the crop window; Alt
+     * with an arrow key resizes it from the east / south edge; Shift makes either
+     * one ten display pixels instead of one — the coarse modifier `wr-slider`,
+     * `wr-knob` and `wr-splitter` all use, which is why Alt and not Shift carries
+     * the mode switch here.
+     *
+     * Nothing mirrors under `dir="rtl"`: the image is not flipped and the window
+     * is placed with a physical `left`, so ArrowLeft moves the crop visually left
+     * in both directions.
+     *
+     * Both branches go through `applyMove` / `applyResize`, so the `aspectRatio`
+     * lock, the `minWidth` / `minHeight` floors and the canvas bounds hold for a
+     * keystroke exactly as they do for a drag. Those two measure from `startRect`
+     * rather than from the live rect, so it is re-seeded per keystroke — a 1px
+     * delta against the rect from the first press would make a held arrow stall
+     * after one pixel instead of accumulating.
+     */
+    protected onWindowKeydown(event: KeyboardEvent): void;
+    /**
+     * Emit once per gesture, not once per keystroke. A held arrow repeats its
+     * keydown many times a second and each `emitCropped` renders a canvas and
+     * encodes a Blob; `keyup` fires once when the run ends, which is the keyboard's
+     * equivalent of the `pointerup` the drag path emits on.
+     */
+    protected onWindowKeyup(): void;
     private applyMove;
     private applyResize;
     /** Render the current crop as a Blob. */

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

@@ -173,13 +173,17 @@ declare class WrInputNumberHarness extends ComponentHarness {
     /** The field's placeholder. */
     getPlaceholder(): Promise<string>;
     /**
-     * The field's accessible name, or `null` when it has none of its own.
+     * The field's `aria-label`, or `null` when it carries none.
      *
      * Read from the native input, not from the host: an `aria-label` on a component
      * element does not reach the control inside it, which is why the component
-     * takes an `ariaLabel` input and forwards it here (falling back to the
-     * placeholder). Inside a `<wr-form-field>` the name comes from the label's
-     * `for`, and `null` here is then correct rather than a missing name.
+     * takes an `ariaLabel` input and forwards it here.
+     *
+     * NOT the accessible name — `null` is the usual answer and usually correct.
+     * Nothing is forwarded unless `[ariaLabel]` is bound: inside a
+     * `<wr-form-field>` the name comes from the label's `for`, and standalone it
+     * comes from the `placeholder` (see {@link getPlaceholder}), neither of which
+     * is an attribute on this element.
      */
     getAriaLabel(): Promise<string | null>;
     /**
@@ -212,12 +216,13 @@ declare class WrInputNumberHarness extends ComponentHarness {
     /**
      * One of the two stepper buttons, BY POSITION — ▲ first, ▼ second.
      *
-     * Not by `aria-label`: those strings ("Increment" / "Decrement") are still
-     * hard-coded English, so keying on them would make this harness the thing that
-     * breaks when they move into the i18n catalog — the same call
-     * `WrTimePanelHarness` makes about its own columns. Order is the layout
-     * contract, and the spec pins it by asserting which way each button moves the
-     * value.
+     * Not by `aria-label`: those strings resolve through the i18n catalog
+     * (`inputNumber.increment` / `.decrement`) and an `[incrementLabel]` /
+     * `[decrementLabel]` binding overrides them, so keying on them would make this
+     * harness answer in whatever locale the app under test is configured for — the
+     * same call `WrTimePanelHarness` makes about its own columns. Order is the
+     * layout contract, and the spec pins it by asserting which way each button
+     * moves the value.
      */
     private stepButton;
 }

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

@@ -14,7 +14,7 @@ import { WrInputSize } from 'ngwr/input';
  * re-formats with grouping + fixed decimals on blur.
  *
  * Locale comes from Angular's `LOCALE_ID` — input-number intentionally does
- * NOT depend on `ngwr/date-adapter` so it can be used in date-free apps.
+ * NOT depend on `ngwr/date` so it can be used in date-free apps.
  *
  * @example
  * ```html
@@ -73,9 +73,16 @@ declare class WrInputNumber implements FormValueControl<number | null> {
     /** Placeholder shown when the input is empty. */
     readonly placeholder: _angular_core.InputSignal<string>;
     /**
-     * Accessible name for the field. Falls back to the placeholder — inside a
-     * `<wr-form-field>` the projected `wrInput` picks up the label's id and needs
-     * neither, but standalone the text field has no name at all.
+     * Accessible name for the field. Unset, the field is named by whatever labels
+     * it — there is deliberately no fallback here.
+     *
+     * It used to mirror the `placeholder`, and an `aria-label` OUTRANKS a
+     * `<label>` in the accname order: inside a `<wr-form-field label="Quantity">`
+     * the very input that adopts the field's id announced the placeholder ("0")
+     * instead, and a placeholder disappears as soon as the user types. Standalone
+     * nothing was lost by dropping it — an input with no other name already falls
+     * back to its own `placeholder` attribute, which is the name axe's `label`
+     * rule accepts too.
      */
     readonly ariaLabel: _angular_core.InputSignal<string | null>;
     protected readonly resolvedAriaLabel: _angular_core.Signal<string | null>;