ngwr 10.2.1 → 11.1.0

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

@@ -0,0 +1,226 @@
+import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+
+/**
+ * @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
+ */
+
+/** Narrows which `<wr-input-number>` a harness query matches. */
+interface WrInputNumberHarnessFilters extends BaseHarnessFilters {
+    /** Match the text in the field — a string is an exact match, a RegExp is tested. */
+    readonly text?: string | RegExp;
+    /**
+     * Match the number the field is showing.
+     *
+     * Parsed with the test runtime's locale, since a harness predicate has no place
+     * to pass one; an app on a different `LOCALE_ID` should narrow by `text`
+     * instead. A field showing text that is not a number — empty, or mid-typed —
+     * matches no number at all.
+     */
+    readonly value?: number;
+    /** Match the placeholder — a string is an exact match, a RegExp is tested. */
+    readonly placeholder?: string | RegExp;
+    /** Match only enabled (`false`) or only disabled (`true`) fields. */
+    readonly disabled?: boolean;
+}
+
+/**
+ * @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
+ */
+
+/**
+ * Test harness for `<wr-input-number>`.
+ *
+ * The control is a `type="text"` field plus a ▲▼ stepper column — deliberately
+ * NOT an `<input type="number">` and NOT a `role="spinbutton"`, because it renders
+ * grouped, locale-formatted text that a numeric input cannot hold. Two things
+ * follow, and they shape this whole harness:
+ *
+ * - There is no `aria-valuenow` / `aria-valuemin` / `aria-valuemax` trio, and no
+ *   `min` / `max` / `step` attribute, anywhere in the DOM. So the value is read
+ *   out of the field's TEXT, and the bounds are read off the stepper buttons'
+ *   disabled state — which is precisely what a user is given, and the reason
+ *   {@link isIncrementDisabled} is named after the button rather than after "at
+ *   the maximum".
+ * - The text and the value are different things, and the gap between them is this
+ *   control's trap. {@link getValueText} answers the raw characters;
+ *   {@link getValue} answers the number they spell. Mid-type the two disagree
+ *   with the MODEL as well: the component clamps and rounds on every keystroke
+ *   but leaves the typed text alone until blur, so a field showing `999` under
+ *   `[max]="10"` has already committed `10`. Call {@link blur} — which is also
+ *   what emits `touch` — to make the field re-render from the committed value,
+ *   and assert the host's own signal when what you mean is "the model".
+ *
+ * Stepping has two paths and both are here: {@link increment} / {@link decrement}
+ * click the buttons, {@link stepUp} / {@link stepDown} press ArrowUp / ArrowDown
+ * on the field. The keyboard is the accessible path, and in a unit test it is
+ * also the honest one — jsdom has no layout, so nothing that needs a hit test can
+ * be driven by coordinates. `{ shift: true }` is this control's page-up: it steps
+ * by ten. There is deliberately no `pageUp()` / `home()` / `end()`, because the
+ * component handles the two arrow keys and nothing else.
+ *
+ * @example
+ * ```ts
+ * const qty = await loader.getHarness(WrInputNumberHarness.with({ placeholder: 'Quantity' }));
+ *
+ * await qty.setValue(4);
+ * await qty.increment();
+ * expect(await qty.getValue()).toBe(5);
+ *
+ * await qty.stepUp({ shift: true });
+ * expect(await qty.isIncrementDisabled()).toBe(true); // [max]="15"
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrInputNumberHarness extends ComponentHarness {
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options?: WrInputNumberHarnessFilters): HarnessPredicate<WrInputNumberHarness>;
+    private readonly field;
+    /** The raw characters in the field — mid-typed, ungrouped or nonsense included. */
+    getValueText(): Promise<string>;
+    /**
+     * The number the field is SHOWING, or `null` when it is empty.
+     *
+     * Empty is `null` rather than `0` because the control draws that distinction
+     * too — a required-field check has to be able to tell "nothing entered" from "a
+     * deliberate zero". Text that is not a number throws instead: answering `null`
+     * there would report a half-typed `-` as an empty field.
+     *
+     * `locale` defaults to the test runtime's, which for a stock Node run is the
+     * same `en-US` Angular's `LOCALE_ID` defaults to. The component formats with
+     * `LOCALE_ID` and a harness cannot reach that injector, so an app that provides
+     * its own must pass it: `getValue('de-DE')`. Reading `'1.234,5'` as en-US
+     * silently answers `1.2345`.
+     */
+    getValue(locale?: string): Promise<number | null>;
+    /**
+     * Type a number into the field, replacing whatever is there.
+     *
+     * Written with the LOCALE's decimal separator rather than with `String(value)`:
+     * in a comma-decimal locale `'1.5'` is read as `15`, because `.` is that
+     * locale's THOUSANDS separator. Grouping is deliberately not added — nothing
+     * requires it, and the field regroups itself on blur anyway.
+     *
+     * The field is cleared first, so the value passes through `null` on the way, as
+     * it does for a user who selects all and types over it. The control parses every
+     * keystroke, so `min` / `max` / `decimals` are applied AS YOU TYPE while the
+     * text is left exactly as typed — see {@link getValue}.
+     */
+    setValue(value: number, locale?: string): Promise<void>;
+    /**
+     * Type raw characters into the field, replacing whatever is there.
+     *
+     * For everything a number cannot express: a partial entry (`'-'`, `'1.'`), an
+     * already-grouped string, or plain nonsense. Nothing is normalised on the way
+     * in, and — as with {@link setValue} — the field is cleared first.
+     */
+    setValueText(text: string): Promise<void>;
+    /** Empty the field, which sets the value to `null` — not to `0`. */
+    clear(): Promise<void>;
+    /** Whether the ▲▼ column is rendered at all — `[showSteppers]="false"` drops it. */
+    hasSteppers(): Promise<boolean>;
+    /**
+     * Click ▲ once: up by `step`, clamped to `max`.
+     *
+     * A button at its bound — or on a disabled / readonly control — is `disabled`,
+     * and the CDK does not deliver a click to a disabled element, so this is a
+     * quiet no-op there rather than a throw. Ask {@link isIncrementDisabled} rather
+     * than inferring the bound from a value that did not move. It throws only when
+     * there is no stepper column to click.
+     */
+    increment(): Promise<void>;
+    /** Click ▼ once: down by `step`, clamped to `min`. See {@link increment}. */
+    decrement(): Promise<void>;
+    /**
+     * Whether ▲ refuses to step.
+     *
+     * Deliberately not named `isAtMax()`: the button is disabled at the maximum AND
+     * on a disabled or readonly control, and it cannot tell you which. That
+     * conflation is the control's own — it is what the user is offered — and the
+     * name says so rather than promising a bound the DOM never publishes.
+     */
+    isIncrementDisabled(): Promise<boolean>;
+    /** Whether ▼ refuses to step — at the minimum, or on a locked control. */
+    isDecrementDisabled(): Promise<boolean>;
+    /**
+     * Press ArrowUp on the field: up by `step`, or by TEN steps with
+     * `{ shift: true }` — the control's page-up, since it handles no other keys.
+     */
+    stepUp(options?: {
+        shift?: boolean;
+    }): Promise<void>;
+    /** Press ArrowDown on the field. See {@link stepUp} for the `shift` multiplier. */
+    stepDown(options?: {
+        shift?: boolean;
+    }): Promise<void>;
+    /** The `[prefix]` label (`'$'`), or `null` when the field has none. */
+    getPrefix(): Promise<string | null>;
+    /**
+     * The `[suffix]` label (`'kg'`), or `null` when the field has none.
+     *
+     * The stepper column rides in the same suffix slot and carries the same affix
+     * class, so it is excluded here by name: a bare `--suffix` query answers with
+     * the buttons' (empty) text for every field that has steppers and no suffix.
+     */
+    getSuffix(): Promise<string | null>;
+    /** The field's placeholder. */
+    getPlaceholder(): Promise<string>;
+    /**
+     * The field's accessible name, or `null` when it has none of its own.
+     *
+     * 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.
+     */
+    getAriaLabel(): Promise<string | null>;
+    /**
+     * Whether the field refuses interaction.
+     *
+     * The native control's `disabled` property, not the host's
+     * `wr-input-number--disabled` modifier: the modifier is the styling hook, the
+     * property is what actually blocks typing, drops the field out of the tab order
+     * and is reported to assistive technology.
+     */
+    isDisabled(): Promise<boolean>;
+    /** Whether the field refuses new values while staying focusable and readable. */
+    isReadonly(): Promise<boolean>;
+    /** Move focus to the field. While it is focused the control stops reformatting the text. */
+    focus(): Promise<void>;
+    /**
+     * Blur the field, which is what commits the display: the control re-renders the
+     * text from its value — grouping it and applying `decimals` — and emits `touch`
+     * so a bound `[formField]` can mark itself touched.
+     */
+    blur(): Promise<void>;
+    /** Whether the field currently has focus. */
+    isFocused(): Promise<boolean>;
+    /**
+     * The shown value for predicates: `null` for an empty field AND for text that is
+     * not a number, so a mid-typed field matches no `value` filter instead of
+     * throwing the whole query.
+     */
+    private parsedValue;
+    /**
+     * 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.
+     */
+    private stepButton;
+}
+
+export { WrInputNumberHarness };
+export type { WrInputNumberHarnessFilters };

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

@@ -1,5 +1,7 @@
 import * as _angular_core from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
 import { FormValueControl } from '@angular/forms/signals';
+import { WrInputSize } from 'ngwr/input';
 
 /**
  * Numeric input with locale-aware formatting + ▲▼ stepper buttons.
@@ -38,6 +40,32 @@ declare class WrInputNumber implements FormValueControl<number | null> {
     readonly decimals: _angular_core.InputSignal<number | null>;
     /** Render the ▲▼ stepper column. @default true */
     readonly showSteppers: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Control size — forwarded to the field, and shares the `--wr-control-*`
+     * contract. Unset falls back to the `inputNumber.size` app default from
+     * `provideWrConfig()`, then to the `input.size` one, then to `md`. @default 'md'
+     */
+    readonly size: _angular_core.InputSignal<WrInputSize | null>;
+    /**
+     * Pill-shaped corners. Unset falls back to the `inputNumber.rounded` app default
+     * from `provideWrConfig()`, then to the `input.rounded` one;
+     * `[rounded]="false"` turns a configured `true` back off. @default false
+     */
+    readonly rounded: _angular_core.InputSignalWithTransform<boolean | null, BooleanInput>;
+    /**
+     * `size`, then the app config, then `md` — bound to the field's `[wrSize]`.
+     *
+     * 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
+     * `inputNumber.*`: binding a value down always wins there, and an unchained
+     * lookup would therefore SUPPRESS an `input.size` an app had set — the field
+     * inside a number input would be the one `[wrInput]` in the app that ignored it.
+     * Chained, the specific key wins where it is set and the general one still
+     * applies where it is not.
+     */
+    protected readonly resolvedSize: _angular_core.Signal<"sm" | "md" | "lg">;
+    /** `rounded`, then the app config, then `false` — bound to the group AND the field. */
+    protected readonly resolvedRounded: _angular_core.Signal<boolean>;
     /** Optional prefix label (e.g. `"$"`). */
     readonly prefix: _angular_core.InputSignal<string>;
     /** Optional suffix label (e.g. `"kg"`). */
@@ -84,7 +112,7 @@ declare class WrInputNumber implements FormValueControl<number | null> {
     /** Format a value using `Intl.NumberFormat` for the active locale. */
     private format;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrInputNumber, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrInputNumber, "wr-input-number", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "showSteppers": { "alias": "showSteppers"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrInputNumber, "wr-input-number", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "showSteppers": { "alias": "showSteppers"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrInputNumber };

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

@@ -0,0 +1,299 @@
+import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+import { WrInputOtpSize } from 'ngwr/input-otp';
+
+/**
+ * @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
+ */
+
+/** Narrows which box of a `<wr-input-otp>` a harness query matches. */
+interface WrInputOtpBoxHarnessFilters extends BaseHarnessFilters {
+    /** Match the character in the box — a string is an exact match, a RegExp is tested. */
+    readonly value?: string | RegExp;
+    /** Match only empty (`true`) or only filled (`false`) boxes. */
+    readonly empty?: boolean;
+    /** Match the box's accessible name (`aria-label`, e.g. `'Digit 3'`). */
+    readonly label?: string | RegExp;
+}
+
+/**
+ * @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
+ */
+
+/** Narrows which `<wr-input-otp>` a harness query matches. */
+interface WrInputOtpHarnessFilters extends BaseHarnessFilters {
+    /**
+     * Match the assembled code — a string is an exact match, a RegExp is tested.
+     *
+     * The code is the boxes joined, so an emptied middle box is not a gap here: a
+     * control showing `1 2 _ 4 5 6` matches `'12456'`.
+     */
+    readonly value?: string | RegExp;
+    /** Match by how many boxes are rendered. */
+    readonly length?: number;
+    /** Match only enabled (`false`) or only disabled (`true`) controls. */
+    readonly disabled?: boolean;
+    /** Match only controls with every box filled (`true`), or with one still empty (`false`). */
+    readonly complete?: boolean;
+}
+
+/**
+ * @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
+ */
+
+/**
+ * Test harness for ONE box of a `<wr-input-otp>` — the `<input>` that holds a
+ * 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.
+ *
+ * @example
+ * ```ts
+ * await otp.setValue('12');
+ * // Two digits in, the first box still waiting is the third.
+ * const [box] = await otp.getBoxes({ empty: true });
+ * expect(await box.getLabel()).toBe('Digit 3');
+ * await box.type('7');
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrInputOtpBoxHarness extends ComponentHarness {
+    /**
+     * The cell class, not `wr-input-otp input`: the class is public API, so it is
+     * the stable handle on a cell, and matching on it keeps the harness usable on
+     * its own — `getAllHarnesses(WrInputOtpBoxHarness)` finds cells without
+     * collecting every other `<input>` on the page.
+     */
+    static hostSelector: string;
+    /** Build a predicate that narrows the query. */
+    static with(options?: WrInputOtpBoxHarnessFilters): HarnessPredicate<WrInputOtpBoxHarness>;
+    /**
+     * The character the box shows, or `''`.
+     *
+     * Read from the `value` PROPERTY. The `value` attribute is never written at all
+     * — Angular binds the property, and the component rewrites that property again
+     * in its own `input` handler to keep one character per box — so
+     * `getAttribute('value')` answers `null` for every box, full or empty.
+     */
+    getValue(): Promise<string>;
+    /** Whether the box is still waiting for a character. */
+    isEmpty(): Promise<boolean>;
+    /**
+     * The box's accessible name — `Digit 1`, `Digit 2`, …
+     *
+     * 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.
+     */
+    getLabel(): Promise<string | null>;
+    /** Whether the box hides what was typed, like a password field. */
+    isMasked(): Promise<boolean>;
+    isDisabled(): Promise<boolean>;
+    isFocused(): Promise<boolean>;
+    /** Put the caret in this box. Throws when the control is disabled. */
+    focus(): Promise<void>;
+    /**
+     * Type one character into this box.
+     *
+     * Focus advances to the next box when the character is accepted — the control
+     * moves it in the `input` handler, so it has already happened when this
+     * resolves. A character the box's `mode` rejects leaves the box EMPTY and
+     * focus where it was, which is what a browser shows too.
+     */
+    type(char: string): Promise<void>;
+    private assertEnabled;
+}
+
+/**
+ * @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
+ */
+
+/**
+ * Test harness for `<wr-input-otp>` — one code spread over N single-character
+ * boxes, with {@link WrInputOtpBoxHarness} for a box.
+ *
+ * Everything here is driven from the KEYBOARD and from `input` / `paste` events,
+ * never by clicking a box. The control binds no `(click)` handler at all — what a
+ * click gives you in a browser is FOCUS, and a unit-test DOM moves no focus on
+ * click, so a click-driven method would look like it worked and change nothing.
+ * The keyboard is the path this control is designed around anyway.
+ *
+ * Two things about this control regularly surprise people, and the harness
+ * reports them rather than smoothing them over:
+ * - {@link getValue} is the boxes JOINED, which is what the component publishes
+ *   for every edit made inside it. Emptying a middle box therefore SHORTENS the
+ *   code instead of leaving a gap in it — `1 2 _ 4 5 6` publishes `'12456'`.
+ *   {@link getBoxValues} is the only place that hole is visible, and
+ *   {@link isComplete} is the only safe answer to "can this be submitted".
+ * - {@link paste} always fills from the FIRST box, whichever box the paste
+ *   landed on.
+ *
+ * @example
+ * ```ts
+ * const otp = await loader.getHarness(WrInputOtpHarness);
+ *
+ * await otp.setValue('482913');
+ * expect(await otp.isComplete()).toBe(true);
+ * expect(await otp.getValue()).toBe('482913');
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrInputOtpHarness extends ComponentHarness {
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options?: WrInputOtpHarnessFilters): HarnessPredicate<WrInputOtpHarness>;
+    /** The boxes, in order. A box is a whole harness — see {@link WrInputOtpBoxHarness}. */
+    getBoxes(filters?: WrInputOtpBoxHarnessFilters): Promise<WrInputOtpBoxHarness[]>;
+    /** One box by index. Throws rather than returning `undefined` for an index that is not there. */
+    getBox(index: number): Promise<WrInputOtpBoxHarness>;
+    /** How many boxes are rendered. `length` is clamped to `[1, 20]`, so this is the real count. */
+    getLength(): Promise<number>;
+    /** The character in each box, in order, `''` for an empty one. */
+    getBoxValues(): Promise<string[]>;
+    /**
+     * The assembled code — the boxes joined. For anything typed, pasted or deleted
+     * inside the control this is exactly the string it publishes through its
+     * `value` model.
+     *
+     * An emptied middle box closes up here; {@link getBoxValues} keeps the hole.
+     *
+     * A write from OUTSIDE can leave the two disagreeing, and the model is the one
+     * that keeps the surplus: the control splits the incoming value into boxes,
+     * dropping what its `mode` rejects and anything past `length`, without writing
+     * the shortened code back. Writing `'12a456'` in `numeric` mode shows `12_456`
+     * and reads `'12456'` here while the bound model still holds `'12a456'`.
+     */
+    getValue(): Promise<string>;
+    /** Whether every box holds a character — the condition the `completed` output fires on. */
+    isComplete(): Promise<boolean>;
+    /**
+     * Whether the control refuses interaction.
+     *
+     * Read from the boxes' `disabled` property rather than the host's
+     * `wr-input-otp--disabled` class: the property is what actually stops the
+     * events and the focus, the class only paints.
+     */
+    isDisabled(): Promise<boolean>;
+    /** Whether the typed characters are hidden, like a password field. */
+    isMasked(): Promise<boolean>;
+    /**
+     * The keyboard a mobile browser is asked for.
+     *
+     * `numeric` mode publishes `inputmode="numeric"`; `alphanumeric` and `text`
+     * BOTH publish `text`, so the two cannot be told apart from the DOM. What
+     * separates them is only observable by typing: `alphanumeric` drops anything
+     * that is not a letter or a digit.
+     */
+    getInputMode(): Promise<'numeric' | 'text'>;
+    /** The control size, from the host modifier. `md` is the default and emits no modifier. */
+    getSize(): Promise<WrInputOtpSize>;
+    /** The character shown in an empty box. */
+    getPlaceholder(): Promise<string>;
+    /**
+     * The name the group announces.
+     *
+     * The boxes are separate inputs; the host's `role="group"` plus this label are
+     * what make them one control to a screen reader.
+     */
+    getLabel(): Promise<string | null>;
+    /** The index of the box with focus, or `null` when focus is outside the control. */
+    getFocusedIndex(): Promise<number | null>;
+    /** Put the caret in a box — the first one unless asked otherwise. */
+    focus(index?: number): Promise<void>;
+    /**
+     * Take focus off the control, which is what makes it emit `touch` so a bound
+     * field can mark itself touched. The box that HAS focus is the one blurred:
+     * blurring any other one still emits `touch` (a unit-test DOM dispatches a blur
+     * event even on an element that never had focus), which would report a field as
+     * touched while the caret sits in it. Throws when no box has focus at all, for
+     * the same reason.
+     */
+    blur(): Promise<void>;
+    /**
+     * Enter a whole code, the way a person does: one character per box, into
+     * whichever box the control has moved focus to.
+     *
+     * Every box is emptied first, so a shorter code cannot leave the tail of a
+     * previous one behind.
+     *
+     * The control is left to decide what it accepts: a character its `mode`
+     * rejects lands nowhere and focus stays put, so the next character overwrites
+     * the same box — which is exactly what a browser produces. Read {@link getValue}
+     * back rather than assuming the argument arrived.
+     */
+    setValue(code: string): Promise<void>;
+    /**
+     * Type into the control from where it already is — the focused box, or the
+     * first box when focus is elsewhere. Unlike {@link setValue} nothing is cleared,
+     * so this appends the way a half-finished code is finished.
+     */
+    type(chars: string): Promise<void>;
+    /**
+     * Paste a code in.
+     *
+     * The event goes to the focused box (the first one when focus is elsewhere),
+     * because that is where a browser delivers it — but the control fills from the
+     * FIRST box regardless, replacing everything, dropping characters its `mode`
+     * rejects and trimming what is left to `length`. A paste with nothing usable in
+     * it is ignored outright.
+     *
+     * jsdom implements neither `ClipboardEvent` nor `DataTransfer`, so the payload
+     * is attached to a plain event; `getData('text')` is what the control asks for,
+     * aliased to `text/plain` the way a browser does.
+     */
+    paste(text: string): Promise<void>;
+    /**
+     * Press Backspace in the focused box.
+     *
+     * The control only handles the key itself when the box is ALREADY empty — then
+     * it clears the box behind and steps focus back, which is what makes fixing a
+     * typo one keystroke. On a filled box it defers to the browser's own editing,
+     * and jsdom performs none, so the harness supplies that half: the character is
+     * removed and an `input` event is dispatched, exactly as a real delete would.
+     * Focus stays where it is, and the emptied box becomes a hole in
+     * {@link getBoxValues} while {@link getValue} closes up.
+     */
+    backspace(): Promise<void>;
+    /**
+     * Move focus with the arrow keys, `Home` or `End` — the control's own
+     * navigation, and the only one available in a unit test, where nothing has a
+     * position to click.
+     *
+     * Throws when no box has focus: the keys are handled by the box that receives
+     * them, so there is no move to make.
+     */
+    moveFocus(to: 'previous' | 'next' | 'first' | 'last'): Promise<void>;
+    /**
+     * Empty every box and leave focus on the first, ready to be typed into.
+     *
+     * Each box is cleared through an `input` event rather than by writing the
+     * model, so the control publishes the change the same way it would for a user.
+     */
+    clear(): Promise<void>;
+    /** Type `chars` starting at `index`, following the control's focus as it advances. */
+    private typeFrom;
+    private boxElement;
+    private focusedIndexOrThrow;
+    private assertEnabled;
+}
+
+export { WrInputOtpBoxHarness, WrInputOtpHarness };
+export type { WrInputOtpBoxHarnessFilters, WrInputOtpHarnessFilters };

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

@@ -41,12 +41,25 @@ type WrInputOtpSize = 'sm' | 'md' | 'lg';
  * @see https://ngwr.dev/reference/components/input-otp
  */
 declare class WrInputOtp implements FormValueControl<string> {
+    private readonly dir;
     /** Number of cells to render. Clamped to `[1, 20]`. @default 6 */
     readonly length: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Character set per cell. @default 'numeric' */
     readonly mode: _angular_core.InputSignal<WrInputOtpMode>;
-    /** Control size — shares the `--wr-control-*` contract. @default 'md' */
-    readonly size: _angular_core.InputSignal<WrInputOtpSize>;
+    /**
+     * Control size — shares the `--wr-control-*` contract. Unset falls back to the
+     * `inputOtp.size` app default from `provideWrConfig()`. @default 'md'
+     */
+    readonly size: _angular_core.InputSignal<WrInputOtpSize | null>;
+    /**
+     * `size`, then the app config, then `md`.
+     *
+     * Read ONCE, here: a box carries no size of its own — the host modifier sets
+     * `--wr-input-otp-size` / `-font` / `-radius` / `-gap` and every box reads them
+     * from the cascade — so one resolution sizes the whole strip however many boxes
+     * `length` renders.
+     */
+    protected readonly resolvedSize: _angular_core.Signal<"sm" | "md" | "lg">;
     /** Mask the typed characters like a password. @default false */
     readonly mask: _angular_core.InputSignalWithTransform<boolean, any>;
     /**
@@ -80,6 +93,14 @@ declare class WrInputOtp implements FormValueControl<string> {
     private focusCell;
     /** Drop a character that doesn't match the configured mode. */
     private sanitiseChar;
+    /**
+     * The key as the strip SEES it.
+     *
+     * The boxes run along the inline axis, so under `dir="rtl"` the box to the
+     * visual right of the caret is the PREVIOUS one. Home/End stay semantic (first
+     * and last box), and Backspace is not a direction at all.
+     */
+    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>;
 }