ngwr 11.2.0 → 12.0.0

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

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

@@ -54,11 +54,11 @@ interface WrInputOtpHarnessFilters extends BaseHarnessFilters {
  * single character.
  *
  * A box is more than the string it shows: it carries its own accessible name
- * (`Digit 3`), its own emptiness, its own masking, and it is the thing that
- * either has focus or does not. The root harness answers the control's
- * questions (the assembled code, which index is focused); this one answers the
- * box's, so a spec can hold on to "the box that has focus" instead of zipping
- * four parallel arrays by index.
+ * (`Digit 3` on a numeric strip, `Character 3` on the others), its own
+ * emptiness, its own masking, and it is the thing that either has focus or does
+ * not. The root harness answers the control's questions (the assembled code,
+ * which index is focused); this one answers the box's, so a spec can hold on to
+ * "the box that has focus" instead of zipping four parallel arrays by index.
  *
  * @example
  * ```ts
@@ -93,11 +93,17 @@ declare class WrInputOtpBoxHarness extends ComponentHarness {
     /** Whether the box is still waiting for a character. */
     isEmpty(): Promise<boolean>;
     /**
-     * The box's accessible name — `Digit 1`, `Digit 2`, …
+     * The box's accessible name — `Digit 1`, `Digit 2`, … on a numeric strip.
      *
      * This is the whole of a box's identity for a screen-reader user: the boxes
      * carry no visible label and no position in an `aria-*` set, so the name is
      * how someone knows which one they are in.
+     *
+     * The word depends on `mode`, so an assertion has to follow it: the
+     * `alphanumeric` and `text` modes accept letters, and the component names
+     * their boxes `Character 1`, `Character 2`, … rather than call an `A` a digit.
+     * Both come from the `inputOtp.digit` / `inputOtp.character` catalog entries,
+     * so a localized app answers here in its own language.
      */
     getLabel(): Promise<string | null>;
     /** Whether the box hides what was typed, like a password field. */

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

@@ -42,6 +42,9 @@ type WrInputOtpSize = 'sm' | 'md' | 'lg';
  */
 declare class WrInputOtp implements FormValueControl<string> {
     private readonly dir;
+    /** Accessible name of the whole strip. Falls back to `inputOtp.label`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
     /** Number of cells to render. Clamped to `[1, 20]`. @default 6 */
     readonly length: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Character set per cell. @default 'numeric' */
@@ -81,6 +84,8 @@ declare class WrInputOtp implements FormValueControl<string> {
     protected readonly classes: _angular_core.Signal<string>;
     protected readonly cellType: _angular_core.Signal<"text" | "password">;
     protected readonly cellInputMode: _angular_core.Signal<"numeric" | "text">;
+    private readonly digitLabel;
+    private readonly characterLabel;
     protected readonly cellRefs: _angular_core.Signal<readonly ElementRef<HTMLInputElement>[]>;
     constructor();
     protected onInput(event: Event, index: number): void;
@@ -88,6 +93,15 @@ declare class WrInputOtp implements FormValueControl<string> {
     protected onPaste(event: ClipboardEvent): void;
     protected onBlur(): void;
     protected trackIndex(index: number): number;
+    /**
+     * A box's accessible name. It projects no text and carries no label of its own,
+     * so this string IS the name a screen reader reads for it.
+     *
+     * Keyed off `mode`, not fixed: `sanitiseChar` passes any letter through in
+     * `alphanumeric` and `text`, so the old literal announced "Digit 3" over a box
+     * holding `A` — wrong in a way translating it would not have fixed.
+     */
+    protected cellLabel(index: number): string;
     private update;
     private emitChange;
     private focusCell;
@@ -102,7 +116,7 @@ declare class WrInputOtp implements FormValueControl<string> {
      */
     private inlineKey;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrInputOtp, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrInputOtp, "wr-input-otp", never, { "length": { "alias": "length"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; "touch": "touch"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrInputOtp, "wr-input-otp", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrInputOtp };

package/types/ngwr-line-chart.d.ts

@@ -55,7 +55,7 @@ declare class WrLineChart {
     protected readonly hoveredIndex: _angular_core.WritableSignal<number | null>;
     protected readonly resolvedSeries: _angular_core.Signal<{
         label: string;
-        data: number[];
+        data: (number | null)[];
         color: string;
     }[]>;
     protected readonly bounds: _angular_core.Signal<{
@@ -70,12 +70,29 @@ declare class WrLineChart {
     }[]>;
     protected readonly plotWidth: () => number;
     protected readonly plotHeight: () => number;
-    /** Get the SVG path for a series. */
+    /**
+     * The SVG path for a series — one subpath per unbroken run, so a hole in the data
+     * leaves a hole in the line rather than a straight segment across it.
+     */
     protected pathFor(series: {
-        data: readonly number[];
+        data: readonly (number | null)[];
     }): string;
     protected pointX(index: number): number;
     protected pointY(value: number): number;
+    /**
+     * A point's x as a percentage of the host's width. The x-label strip and the SVG share
+     * that width — the drawing stretches to it — so this is the same space the tooltip and
+     * the labels are placed in, at any size.
+     */
+    protected xPercent(index: number): number;
+    /**
+     * How wide an x label may be, as a percentage of the host's width: its own slot — half
+     * the distance to a neighbour on each side — cut back to what is left between its point
+     * and the end of the strip. Centring a label on its point says nothing about its WIDTH,
+     * and with no bound at all twelve month names printed over each other and the last one
+     * hung outside the chart. Past this the stylesheet ellipsises.
+     */
+    protected xMaxPercent(index: number): number;
     protected readonly hoverPoints: _angular_core.Signal<{
         label: string;
         value: number;

package/types/ngwr-markdown.d.ts

@@ -387,6 +387,17 @@ declare class WrMarkdownHighlight {
     private fill;
     /** `Map` iterates in insertion order, and `linesFor` re-inserts on read. */
     private evict;
+    /**
+     * The same bound, one dimension out. `request` re-inserts a bucket it already
+     * holds, so the outer map iterates least-recently-REQUESTED first — and the
+     * component's effect asks for every code block in the document it is showing,
+     * so a language that stops being requested is one nothing renders any more.
+     *
+     * Read is deliberately NOT a touch here, unlike {@link linesFor} for the inner
+     * map: with the effect re-asking for every block, request order already tracks
+     * what is rendered, and nothing has needed the finer signal.
+     */
+    private evictLanguage;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrMarkdownHighlight, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<WrMarkdownHighlight>;
 }