ngwr 10.2.0 → 11.0.0

package/types/ngwr-command-palette-testing.d.ts

@@ -0,0 +1,437 @@
+import { BaseHarnessFilters, ComponentHarness, HarnessPredicate, ModifierKeys } 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-command-palette>` a harness query matches. */
+interface WrCommandPaletteHarnessFilters extends BaseHarnessFilters {
+    /** Match only open (`true`) or only closed (`false`) palettes. */
+    readonly open?: boolean;
+    /**
+     * Match the palette's accessible name — `paletteLabel`, or the
+     * `commandPalette.label` catalogue string it falls back to. A string is an
+     * exact match, a RegExp is tested.
+     *
+     * A CLOSED palette has no name to match: the dialog carrying it is inside an
+     * `@if (open())`, so this filter never selects one.
+     */
+    readonly label?: string | RegExp;
+}
+/** Narrows which group inside an open palette a harness query matches. */
+interface WrCommandPaletteGroupHarnessFilters extends BaseHarnessFilters {
+    /**
+     * Match the group's title — a string is an exact match, a RegExp is tested.
+     *
+     * The bucket holding items with no `group` has no title, so it is never a
+     * match for this filter.
+     */
+    readonly title?: string | RegExp;
+}
+/** Narrows which item inside an open palette a harness query matches. */
+interface WrCommandPaletteItemHarnessFilters extends BaseHarnessFilters {
+    /**
+     * Match the item's label — a string is an exact match, a RegExp is tested. The
+     * description, the shortcut hint and the icon are not part of it.
+     */
+    readonly text?: string | RegExp;
+    /** Match only the highlighted item (`true`) or only the rest (`false`). */
+    readonly active?: 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 command inside an open `<wr-command-palette>`.
+ *
+ * An item is an `option` in the palette's listbox, and it is never focused — the
+ * search input keeps focus and points at the highlighted row with
+ * `aria-activedescendant` — so `aria-selected` and the row's `id` are the whole
+ * story a screen reader is told, and both are read here rather than the
+ * `--active` class that paints it.
+ *
+ * @example
+ * ```ts
+ * const palette = await loader.getHarness(WrCommandPaletteHarness);
+ * const [first] = await palette.getItems();
+ *
+ * expect(await first.getLabel()).toBe('Open file');
+ * expect(await first.getShortcut()).toBe('⌘O');
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrCommandPaletteItemHarness extends ComponentHarness {
+    /** The row the palette renders per command — also the `role="option"`. */
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options?: WrCommandPaletteItemHarnessFilters): HarnessPredicate<WrCommandPaletteItemHarness>;
+    /**
+     * The item's primary label.
+     *
+     * Read from the label element rather than from the host's text: the host also
+     * holds the description, the shortcut hint, and whatever text sits inside a
+     * registered icon's SVG (`<title>`, most often) — an icon with one would
+     * otherwise turn up in the middle of the answer.
+     */
+    getLabel(): Promise<string>;
+    /** The secondary line under the label, or `null` when the item declares none. */
+    getDescription(): Promise<string | null>;
+    /**
+     * The shortcut hint painted on the right, or `null` when the item declares none.
+     *
+     * A hint only — the palette draws whatever string it was given and binds
+     * nothing. Only `trigger` is a real keybinding.
+     */
+    getShortcut(): Promise<string | null>;
+    /**
+     * The leading icon's registered name, or `null` when the item declares no icon.
+     *
+     * The icon SLOT is always painted — an item without one gets a blank span so
+     * every label stays on the same left edge — so the query is for the `<wr-icon>`
+     * itself. It reflects the name it was asked for as `data-icon` whether or not
+     * that name is registered, so this answers what the item MEANT to draw.
+     */
+    getIconName(): Promise<string | null>;
+    /** The role the item announces — `option`. */
+    getRole(): Promise<string | null>;
+    /**
+     * Whether this item is the highlighted one.
+     *
+     * From `aria-selected`, not the `wr-command-palette__option--active` class:
+     * both are public and the template paints them from the same predicate, but the
+     * attribute is what a screen reader acts on — and it is the one
+     * `aria-activedescendant` has to agree with. See
+     * `WrCommandPaletteHarness.isActiveItemAnnounced()`.
+     */
+    isActive(): Promise<boolean>;
+    /** The row's `id` — what the search input points at while this item is highlighted. */
+    getId(): Promise<string>;
+    /**
+     * Run this command — the pointer path.
+     *
+     * The palette commits on `mousedown` rather than on `click`, so that a press
+     * inside the panel never lets the input lose focus first; the CDK's click
+     * sequence opens with one, so this drives the real handler. It needs no
+     * coordinates, which is what makes it usable in jsdom at all.
+     *
+     * With `closeOnPick` left at its default this also closes the palette, taking
+     * every item harness — including this one — out of the DOM.
+     */
+    click(): Promise<void>;
+    /**
+     * Move the pointer onto this item, which highlights it.
+     *
+     * The palette follows the pointer as well as the keyboard, but only the
+     * keyboard scrolls the row into view — hovering deliberately leaves the scroll
+     * position alone, since moving it would fight the pointer that caused the move.
+     */
+    hover(): Promise<void>;
+}
+
+/**
+ * @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 bucket of commands inside an open `<wr-command-palette>`.
+ *
+ * The palette buckets its items by `group`, in the order each group first
+ * appears in `items` — which is why this exists as a harness of its own: it is
+ * the only way to ask which commands ended up under which heading, and the
+ * rendered order is the contract every index in the palette is counted against.
+ *
+ * A bucket WITH a title is a labelled `group`; the bucket holding ungrouped items
+ * carries `role="none"` instead, so its options belong to the listbox directly —
+ * a `listbox` may only own `option` and `group` children, and a role-less
+ * wrapper in between is something ARIA has no rule for.
+ *
+ * @example
+ * ```ts
+ * const palette = await loader.getHarness(WrCommandPaletteHarness);
+ * const [file] = await palette.getGroups({ title: 'File' });
+ *
+ * expect(await file.getItemLabels()).toEqual(['Open file', 'Save file']);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrCommandPaletteGroupHarness extends ComponentHarness {
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options?: WrCommandPaletteGroupHarnessFilters): HarnessPredicate<WrCommandPaletteGroupHarness>;
+    /** The heading over this bucket, or `null` for the one holding ungrouped items. */
+    getTitle(): Promise<string | null>;
+    /**
+     * The role this bucket announces — `group` when it has a title, `none` when it
+     * does not, which promotes its options to the listbox's own children.
+     */
+    getRole(): Promise<string | null>;
+    /**
+     * Whether this bucket takes its accessible name from its own heading.
+     *
+     * The reference IS the group's name — no bucket carries an `aria-label` — and
+     * the id it points at is generated, so a spec cannot hard-code one. `false` for
+     * the untitled bucket, which has no name and needs none: it is `role="none"`.
+     */
+    isLabelledByTitle(): Promise<boolean>;
+    /** The commands in this bucket, in rendered order. */
+    getItems(filters?: WrCommandPaletteItemHarnessFilters): Promise<WrCommandPaletteItemHarness[]>;
+    /** The labels of the commands in this bucket, in rendered order. */
+    getItemLabels(): Promise<string[]>;
+}
+
+/**
+ * @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-command-palette>` — the `⌘K` modal, its search box and
+ * the filtered list of commands.
+ *
+ * Three things about this component shape the harness, and none of them match the
+ * other overlay harnesses in the library:
+ *
+ * 1. **It is an element, and it keeps its own dialog.** The panel is NOT portalled
+ *    into the overlay container: the whole `role="dialog"` lives inside
+ *    `<wr-command-palette>`, wrapped in an `@if (open())`. So every query here is
+ *    host-scoped — two palettes on one page cannot read each other's rows — and a
+ *    closed palette holds nothing at all, which is why the readers below throw
+ *    instead of answering emptily.
+ * 2. **There is no trigger element.** The way in is a GLOBAL hotkey (`trigger`,
+ *    `'mod+k'` by default), bound on the document, so {@link open} presses a chord
+ *    at the document rather than clicking anything. A palette with
+ *    `[trigger]="null"` cannot be opened from the DOM at all — set the bound
+ *    `open` from the spec. And because the first binding to match a chord calls
+ *    `preventDefault()`, which stops the rest, two palettes sharing one chord
+ *    means only the first-registered one ever toggles: see {@link pressTrigger}.
+ * 3. **The rows are never focused.** Focus stays in the search input, which points
+ *    at the highlighted row with `aria-activedescendant`. Navigation is therefore
+ *    `moveTo*`, not `focus`, and "where am I" is answered by `aria-selected` plus
+ *    that reference — {@link isActiveItemAnnounced} asserts the pair agrees.
+ *
+ * @example
+ * ```ts
+ * const palette = await loader.getHarness(WrCommandPaletteHarness);
+ *
+ * await palette.open();
+ * await palette.setQuery('file');
+ * await palette.moveToNextItem();
+ * await palette.runActiveItem();
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrCommandPaletteHarness extends ComponentHarness {
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options?: WrCommandPaletteHarnessFilters): HarnessPredicate<WrCommandPaletteHarness>;
+    /** Whether the palette is showing. */
+    isOpen(): Promise<boolean>;
+    /**
+     * The role the palette announces — `dialog` — or `null` while it is closed.
+     *
+     * Worth asking rather than assuming: the role sits on the palette's own
+     * backdrop-and-panel wrapper, not on the `<wr-command-palette>` host, so a
+     * consumer looking for it on the element they wrote would not find it.
+     */
+    getRole(): Promise<string | null>;
+    /** Whether the palette is marked `aria-modal`. `false` while it is closed. */
+    isModal(): Promise<boolean>;
+    /**
+     * The palette's accessible name — `paletteLabel`, or the catalogue string it
+     * falls back to. `null` while it is closed, since the element carrying the name
+     * does not exist then.
+     */
+    getLabel(): Promise<string | null>;
+    /**
+     * Whether this opening is presented full-screen instead of as a centred modal.
+     *
+     * Read from the `--sheet` modifier, which is public API: `responsive` is an
+     * input that never reaches the DOM, and the decision also folds in the viewport
+     * width — so the class is the only place the outcome exists. `false` while closed.
+     *
+     * That width is sampled when the palette last RECOMPUTED the decision, which is
+     * when `responsive` or the app-wide `provideWrResponsiveOverlays()` config
+     * changes — not when the palette opens. So a spec that narrows the viewport and
+     * then opens sees nothing move until one of those two changes as well.
+     */
+    isPresentedAsSheet(): Promise<boolean>;
+    /** The search box's placeholder — `placeholder`, or the catalogue fallback. */
+    getPlaceholder(): Promise<string>;
+    /** What is currently typed in the search box. */
+    getQuery(): Promise<string>;
+    /**
+     * Replace the search query, filtering the list.
+     *
+     * The palette matches a query against each item's label, description, group and
+     * keywords, and every keystroke sends the highlight back to the FIRST result —
+     * so a spec that moves the highlight and then types has to move it again.
+     */
+    setQuery(query: string): Promise<void>;
+    /**
+     * Whether the search box and the list are wired to each other the way a
+     * combobox and its listbox have to be: the input announces itself expanded and
+     * its `aria-controls` names THIS palette's listbox.
+     *
+     * The ids are generated per instance, so a spec cannot hard-code one — and this
+     * reads the listbox inside this host, so a second palette's list can never
+     * satisfy it.
+     */
+    isSearchWiredToList(): Promise<boolean>;
+    /**
+     * The commands currently offered, in rendered order.
+     *
+     * Rendered order, not the order they were passed in: the palette buckets by
+     * `group` as each group first appears, so two interleaved groups come back
+     * regrouped — and that order is what the arrows walk and what every index here
+     * counts against.
+     */
+    getItems(filters?: WrCommandPaletteItemHarnessFilters): Promise<WrCommandPaletteItemHarness[]>;
+    /** The labels of the commands currently offered, in rendered order. */
+    getItemLabels(): Promise<string[]>;
+    /** The buckets the commands are grouped into, in rendered order. */
+    getGroups(filters?: WrCommandPaletteGroupHarnessFilters): Promise<WrCommandPaletteGroupHarness[]>;
+    /**
+     * One entry per bucket, in rendered order — `null` for the bucket holding
+     * ungrouped items, which is unlabelled by design.
+     */
+    getGroupTitles(): Promise<(string | null)[]>;
+    /**
+     * The "no results" message, or `null` when the palette has results.
+     *
+     * The two are exclusive — the panel renders the message INSTEAD of the buckets —
+     * so a non-null answer here and an empty {@link getItemLabels} are the same fact.
+     */
+    getEmptyText(): Promise<string | null>;
+    /** The highlighted command, or `null` when nothing matches the query. */
+    getActiveItem(): Promise<WrCommandPaletteItemHarness | null>;
+    /** The highlighted command's label, or `null` when nothing matches the query. */
+    getActiveItemLabel(): Promise<string | null>;
+    /**
+     * Where the highlight sits in the rendered list, or `-1` when nothing matches
+     * the query.
+     */
+    getActiveItemIndex(): Promise<number>;
+    /**
+     * Whether the search box points at the row that is actually highlighted.
+     *
+     * The rows are not focusable, so this reference is the ONLY thing telling a
+     * screen-reader user where they are — and it is a per-instance id, so it is also
+     * what would give away a palette announcing another palette's row. An empty list
+     * announces nothing, and that counts as agreeing.
+     */
+    isActiveItemAnnounced(): Promise<boolean>;
+    /**
+     * Open the palette with its global hotkey.
+     *
+     * Throws when the chord changes nothing, because every reason it would is worth
+     * failing on rather than continuing against a closed palette — see
+     * {@link pressTrigger} for the list.
+     */
+    open(): Promise<void>;
+    /**
+     * Close the palette with Escape, the way a keyboard user does. A closed palette
+     * is left alone.
+     */
+    close(): Promise<void>;
+    /** Dismiss the palette by clicking outside the panel, on the backdrop. */
+    clickBackdrop(): Promise<void>;
+    /**
+     * Press the palette's global trigger chord, which TOGGLES it.
+     *
+     * Two things make this the least local method on the harness, and both are the
+     * component's design rather than a shortcut here:
+     *
+     * - The chord is dispatched at the document, because that is where `trigger` is
+     *   bound. It reaches every palette on the page, not just this one.
+     * - `mod` is Cmd on a Mac and Ctrl everywhere else, and nothing in the DOM says
+     *   which. The binding compares modifier state EXACTLY, so a chord with both set
+     *   matches neither: Ctrl is tried first, then Cmd, watching whether this palette
+     *   moved.
+     *
+     * Throws when neither did anything. With two palettes bound to the same chord
+     * that is exactly what happens to the SECOND one — the first binding to match
+     * calls `preventDefault()`, which stops the rest — and the first palette will
+     * have toggled on the way. Give the palettes different `trigger` specs, or drive
+     * them through the bound `open`.
+     */
+    pressTrigger(): Promise<void>;
+    /**
+     * Press an arbitrary chord at the document, where `trigger` is bound — the way
+     * to exercise a palette whose `trigger` is not the default `'mod+k'`.
+     *
+     * The keys go to the `<wr-command-palette>` host and bubble to the document from
+     * there. Any element inside the page would do — the listener is the document's,
+     * and it fires even while a text field has focus — but the host is the one this
+     * harness can always reach, and it takes no focus of its own, so an open palette
+     * keeps the caret in its search box.
+     */
+    pressHotkey(key: string, modifiers?: ModifierKeys): Promise<void>;
+    /** Move the highlight down one row. Wraps from the last row to the first. */
+    moveToNextItem(): Promise<void>;
+    /** Move the highlight up one row. Wraps from the first row to the last. */
+    moveToPreviousItem(): Promise<void>;
+    /** Move the highlight to the first row — Home. */
+    moveToFirstItem(): Promise<void>;
+    /** Move the highlight to the last row — End. */
+    moveToLastItem(): Promise<void>;
+    /**
+     * Run the highlighted command — Enter in the search box, the accessible path.
+     *
+     * Throws when nothing is highlighted, which happens exactly when the query
+     * matches nothing: Enter would then be a no-op and the spec would pass having
+     * run no command at all. Assert {@link getEmptyText} instead.
+     */
+    runActiveItem(): Promise<void>;
+    /**
+     * Run the first command matching the filters, by pointer.
+     *
+     * The palette must already be open — unlike a select, there is nothing to click
+     * to open it, so this cannot do it for you. With `closeOnPick` left at its
+     * default the palette closes as the command runs.
+     */
+    runItem(filters: WrCommandPaletteItemHarnessFilters): Promise<void>;
+    /** Put the caret in the search box. The palette does this itself as it opens. */
+    focus(): Promise<void>;
+    /**
+     * Take focus out of the search box.
+     *
+     * The palette emits nothing on blur — it exists so a spec can prove
+     * {@link focus} puts the caret back where the component put it.
+     */
+    blur(): Promise<void>;
+    /**
+     * Whether the caret is in the search box.
+     *
+     * The only focus question worth asking of this component: the rows are never
+     * focused, so the input is where focus is meant to stay for as long as the
+     * palette is open.
+     */
+    isSearchInputFocused(): Promise<boolean>;
+    /** The palette's dialog wrapper, or `null` while it is closed. */
+    private dialog;
+    /** The search box, or a failure naming the reason there is none. */
+    private searchInput;
+    /** This palette's listbox. */
+    private listbox;
+    /** Fail with the reason when the panel is not rendered. */
+    private requireOpen;
+}
+
+export { WrCommandPaletteGroupHarness, WrCommandPaletteHarness, WrCommandPaletteItemHarness };
+export type { WrCommandPaletteGroupHarnessFilters, WrCommandPaletteHarnessFilters, WrCommandPaletteItemHarnessFilters };

package/types/ngwr-command-palette.d.ts

@@ -93,6 +93,13 @@ declare class WrCommandPalette {
     protected readonly listboxId: string;
     /** @internal Build a stable option id for a given flat index. */
     protected optionId(i: number): string;
+    /**
+     * A `role="listbox"` may only own `option` and `group` children, so a titled
+     * bucket becomes a labelled group and an untitled one drops out of the tree
+     * entirely — leaving its options as the listbox's own children rather than as
+     * role-less wrappers ARIA has no rule for.
+     */
+    protected groupTitleId(index: number): string;
     /** Id of the active option for `aria-activedescendant`. */
     protected readonly activeOptionId: _angular_core.Signal<string | null>;
     private readonly hotkeys;
@@ -103,10 +110,17 @@ declare class WrCommandPalette {
     private bindingHandle;
     private focusTrap;
     private previouslyFocused;
-    /** Flat filtered list — what keyboard navigation walks. */
-    protected readonly filtered: _angular_core.Signal<readonly WrCommandItem[]>;
     /** Grouped view — what the template renders. */
     protected readonly buckets: _angular_core.Signal<readonly Bucket[]>;
+    /**
+     * Flat list in RENDER order — what keyboard navigation walks, and what every
+     * index in this component means. Derived FROM the buckets rather than from the
+     * filter: `bucketize` collects each group as it first appears, so a flat
+     * source-order list disagrees with the screen the moment two groups interleave.
+     * It did, and one ArrowDown moved the highlight two rows while Enter fired the
+     * command below the one that looked selected.
+     */
+    protected readonly filtered: _angular_core.Signal<readonly WrCommandItem[]>;
     constructor();
     protected onQueryInput(event: Event): void;
     protected onKeydown(event: KeyboardEvent): void;
@@ -119,6 +133,15 @@ declare class WrCommandPalette {
     show(): void;
     /** Close the palette. */
     close(): void;
+    /**
+     * Keep the highlighted option on screen. The body is a fixed-height scroller and
+     * the options are not focusable, so nothing moves it on the browser's behalf —
+     * arrow keys walked the highlight straight off the bottom and out of sight.
+     * Keyboard only: doing it on hover would fight the pointer that caused it.
+     * `wr-select` and `wr-tree` keep the same promise through their own
+     * `ensureVisible`; theirs is index maths because they are virtualized.
+     */
+    private revealActive;
     private commit;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCommandPalette, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCommandPalette, "wr-command-palette", never, { "paletteLabel": { "alias": "paletteLabel"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "closeOnPick": { "alias": "closeOnPick"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "picked": "picked"; }, never, never, true, never>;

package/types/ngwr-compare.d.ts

@@ -19,11 +19,29 @@ import * as _angular_core from '@angular/core';
  * </wr-compare>
  * ```
  *
+ * Under `dir="rtl"` the horizontal wipe MIRRORS: "before" occupies the inline-start
+ * side, which is the right. Before/after is an ordinal pair — the two ends of a
+ * progression — and ordinal progressions follow reading order, the same reason a
+ * progress bar fills from the right in Arabic. The LTR habit of putting "before" on
+ * the left IS reading order, so mirroring preserves that intent rather than breaking
+ * it. Nothing is flipped pixel-wise: both layers are the images the consumer passed,
+ * unscaled and unmirrored — only the side each is revealed on changes.
+ *
+ * Pinning the physical arrangement inside an RTL page takes the CDK's `Dir` directive
+ * (`[dir]`, from `@angular/cdk/bidi`) on a wrapper, because that is what provides a
+ * scoped `Directionality`. A bare `dir="ltr"` attribute does NOT do it: the ambient
+ * `Directionality` reads `<html>` / `<body>` once at startup and never looks at the
+ * element, and this component's horizontal wipe is painted entirely from TypeScript,
+ * so the attribute would change nothing at all while looking like an opt-out.
+ *
  * @see https://ngwr.dev/reference/components/compare
  */
 declare class WrCompare {
     /** Divider position as a percentage (0–100). Two-way bindable. @default 50 */
     readonly position: _angular_core.ModelSignal<number>;
+    /** Accessible name of the divider. Falls back to `compare.label`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
     /**
      * Divider direction:
      * - `'horizontal'` — divider line is vertical, drags left/right.
@@ -39,17 +57,47 @@ declare class WrCompare {
     readonly minPosition: _angular_core.InputSignalWithTransform<number, unknown>;
     readonly maxPosition: _angular_core.InputSignalWithTransform<number, unknown>;
     private readonly host;
+    private readonly dir;
+    /**
+     * Reading direction as a signal, because unlike the splitter this component PAINTS
+     * from it: the clip and the divider offset are both direction-derived, and
+     * `Directionality.value` is an ordinary read. A `dir` flip at runtime would otherwise
+     * leave the wipe on the side the page no longer uses until some unrelated position
+     * change happened to recompute it.
+     */
+    private readonly rtl;
     private dragging;
+    constructor();
     protected readonly classes: _angular_core.Signal<string>;
-    /** Clip path applied to the "after" layer so the divider reveals it. */
+    /**
+     * Clip path applied to the "after" layer so the divider reveals it.
+     *
+     * `inset()` takes PHYSICAL edges and has no logical form, so the mirroring is done
+     * here rather than in CSS: `position` counts from the inline-start edge, and under
+     * RTL that edge is the right one, so the after layer is clipped from the right by
+     * the same percentage.
+     */
     protected readonly clipPath: _angular_core.Signal<string>;
+    /**
+     * Physical `left` percentage of the divider. Deliberately physical: it pairs with the
+     * `translateX(-50%)` that centres the 2px line on its own position, and the two have
+     * to agree on which edge they count from. `position` is logical, so RTL flips it here.
+     */
+    protected readonly dividerLeft: _angular_core.Signal<number>;
     protected onPointerDown(event: PointerEvent): void;
     protected onPointerMove(event: PointerEvent): void;
     protected onPointerUp(event: PointerEvent): void;
     protected onKeydown(event: KeyboardEvent): void;
     private updateFromPointer;
+    /**
+     * Fraction of the host measured from the INLINE-START edge — the left edge in LTR, the
+     * right edge in RTL, which is the side "before" is revealed from. Taken from
+     * `rect.left` in both, a drag under `dir="rtl"` read 0 at the visual maximum and moved
+     * the divider opposite the pointer.
+     */
+    private inlineFraction;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCompare, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCompare, "wr-compare", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "showHandle": { "alias": "showHandle"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minPosition": { "alias": "minPosition"; "required": false; "isSignal": true; }; "maxPosition": { "alias": "maxPosition"; "required": false; "isSignal": true; }; }, { "position": "positionChange"; }, never, ["[wrCompareBefore]", "[wrCompareAfter]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCompare, "wr-compare", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "showHandle": { "alias": "showHandle"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minPosition": { "alias": "minPosition"; "required": false; "isSignal": true; }; "maxPosition": { "alias": "maxPosition"; "required": false; "isSignal": true; }; }, { "position": "positionChange"; }, never, ["[wrCompareBefore]", "[wrCompareAfter]"], true, never>;
 }
 
 export { WrCompare };