ngwr 11.2.0 → 12.1.0

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

package/types/ngwr-mention.d.ts

@@ -65,6 +65,12 @@ declare class WrMention<T extends WrMentionItem = WrMentionItem> {
     private readonly isBrowser;
     private overlayRef;
     private panelRef;
+    /**
+     * Where the caret sits INSIDE the field — its offset from the field's
+     * top-left corner, plus the height of the line it is on. Mutated in place by
+     * `open()`, never replaced: `caretAnchor()` closes over this object.
+     */
+    private readonly caretOffset;
     private state;
     private readonly activeIndex;
     private readonly filteredItems;
@@ -113,6 +119,27 @@ declare class WrMention<T extends WrMentionItem = WrMentionItem> {
     private activate;
     private filter;
     private setActive;
+    /**
+     * The overlay's anchor: the caret's line box, grown by the gap the panel
+     * keeps from the text, as a zero-WIDTH virtual origin in viewport
+     * coordinates. Inflating the rect rather than passing `offsetY` is what keeps
+     * `withPush` honest — CDK applies a position offset as a `transform` AFTER it
+     * has clamped, so a pushed panel would land the offset off the screen edge.
+     *
+     * Live getters, not a snapshot, and that is the whole of the scroll fix.
+     * `getCaretCoordinates` answers in viewport coordinates, which a
+     * `GlobalPositionStrategy` froze at the instant of the keystroke: the panel
+     * then stayed pinned to the screen while the page scrolled out from under it
+     * (150px of scroll, 150px of drift, ending up over unrelated content). CDK
+     * re-reads a virtual origin on every `apply()`, so pinning it to the FIELD's
+     * live rect is what turns `reposition()` into a real re-anchor.
+     *
+     * Only the caret's offset inside the field is captured up front. Measuring it
+     * runs the mirror-div pass in `caret.ts` — a full layout read, far too
+     * expensive to repeat per scroll event — and it cannot change without a
+     * keystroke, which re-enters `open()` anyway.
+     */
+    private caretAnchor;
     private open;
     private close;
     private commit;
@@ -123,6 +150,11 @@ declare class WrMention<T extends WrMentionItem = WrMentionItem> {
 /**
  * Overlay panel rendered by {@link WrMention}. Not intended for
  * direct use — the directive instantiates it via a ComponentPortal.
+ *
+ * @internal — the same tag its twin `WrPopconfirmPanel` already carried. It says
+ * the intent; it does not by itself keep the class out of the generated API
+ * tables, because `WrTableFilter` and `WrTableSort` are tagged AND documented —
+ * see `EXPORTED_BUT_INTERNAL` in `scripts/lib/extract-api.ts`.
  */
 declare class WrMentionPanel {
     readonly items: _angular_core.InputSignal<readonly WrMentionItem[]>;

package/types/ngwr-meter-group-testing.d.ts

@@ -35,8 +35,16 @@ interface WrMeterGroupSlice {
  * **The bar is a single `progressbar`, and its value is the TOTAL.** The bands
  * themselves announce nothing: they carry a `title` for a mouse and their share as an
  * inline width, and the legend is where their labels and values are readable. So a
- * spec that wants "how much of each" reads {@link getLegend} or {@link getSlices},
- * and one that wants "how full" reads {@link getValue}.
+ * spec that wants "how much of each" reads {@link getSlices} for the shares or
+ * {@link getLegendLabels} / {@link getLegendValues} for what is printed, and one that
+ * wants "how full" reads {@link getValue}.
+ *
+ * **A band's share is read off the `style` ATTRIBUTE, not through `getCssValue()`**,
+ * and the difference is not cosmetic: `getCssValue()` is `getComputedStyle()`, and
+ * `width` resolves to the USED value — so the declared `30%` comes straight back in
+ * jsdom and arrives as `180px` on a 600px bar in a real browser, and the same harness
+ * answered 30 here and 180 under a browser runner with nothing to say which one you
+ * got.
  *
  * @see https://ngwr.dev/guides/testing
  */
@@ -55,6 +63,8 @@ declare class WrMeterGroupHarness extends ComponentHarness {
     getMax(): Promise<number>;
     /** The bands, in order, with the share of the bar each takes. */
     getSlices(): Promise<WrMeterGroupSlice[]>;
+    /** Parse one band's declared share. See the class note on why this is not `getCssValue()`. */
+    private static percentOf;
     /** Whether the legend is rendered (`showLegend`, and at least one band). */
     hasLegend(): Promise<boolean>;
     /** The legend's labels, in order. */

package/types/ngwr-overlay.d.ts

@@ -303,3 +303,4 @@ declare const WR_OVERLAY: InjectionToken<Overlay>;
 declare const WR_OVERLAY_CONTAINER: InjectionToken<OverlayContainer>;
 
 export { WR_OVERLAY, WR_OVERLAY_CONTAINER, WR_RESPONSIVE_OVERLAYS, WrOutsideClick, WrOverlayContainer, provideWrOverlay, provideWrResponsiveOverlays, wrAppendOverlayClose, wrMirrorOffsets, wrPresentAsSheet };
+export type { WrResponsiveOverlaysConfig };

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

@@ -179,10 +179,10 @@ declare class WrPaginationHarness extends ComponentHarness {
      * The page the pager announces as current, from `aria-current="page"`.
      *
      * Throws when no cell claims it. The window always keeps the current page on the
-     * strip, so getting here means `currentPage` is not one of the pages at all — it
-     * is below 1, or not a whole number. The component clamps a page ABOVE the last
-     * one and nothing else, and either survivor leaves every cell looking equally
-     * inactive to an assistive tech user.
+     * strip, so getting here means `currentPage` is not one of the pages at all. The
+     * component clamps a host write into `1..totalPages`, which leaves one survivor:
+     * a fractional page, which is in range and matches no cell — and which leaves
+     * every cell looking equally inactive to an assistive tech user.
      */
     getCurrentPage(): Promise<number>;
     /**

package/types/ngwr-pagination.d.ts

@@ -111,6 +111,17 @@ declare class WrPagination {
     protected readonly navLabel: _angular_core.Signal<string>;
     /** Internal: total page count. */
     protected readonly totalPages: _angular_core.Signal<number>;
+    /**
+     * Internal: where the previous arrow goes. Clamped to the end of the valid
+     * range rather than being a plain `currentPage() - 1`, because the page can
+     * legitimately sit past that end while `total` is 0 (see the guard effect).
+     * From page 5 of one page, `goTo(4)` is refused as out of range, so the arrow
+     * was enabled and did nothing — and under `responsive` on a narrow box the
+     * numbered cells are hidden by a container query, which left no way back at
+     * all. `Math.min` only ever moves the target INWARD, so `goTo`'s own
+     * past-the-end refusal keeps working as the backstop it is.
+     */
+    protected readonly prevPage: _angular_core.Signal<number>;
     /** Internal: "X–Y of Z" string. */
     protected readonly rangeLabel: _angular_core.Signal<string>;
     /**

package/types/ngwr-pipes.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { PipeTransform } from '@angular/core';
-import { WrDateFormat } from 'ngwr/date-adapter';
+import { WrDateFormat } from 'ngwr/date';
 import { SafeHtml } from '@angular/platform-browser';
 
 /**

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

@@ -181,8 +181,13 @@ declare class WrPopoverHarness extends ContentContainerComponentHarness {
      * Where the panel sits relative to the trigger, or `null` when it is presented
      * as a sheet and has no anchor.
      *
-     * The resolved position — the directive defaults it per mode (`bottom` for a
-     * popover, `top` for a tooltip) — read off the pane's public modifier class.
+     * The APPLIED position, not the requested one: CDK flips a placement that does
+     * not fit to the next in its fallback chain and swaps the modifier class with
+     * it. Under a unit test that is always the requested placement — jsdom measures
+     * every box as 0×0, so the first candidate always "fits" — but in a browser the
+     * two can differ, and this answers what is on screen. The directive defaults
+     * the request per mode (`bottom` for a popover, `top` for a tooltip).
+     *
      * The arrow itself is a `::after` pseudo-element, so it exists for no DOM query
      * at all; this class is the placement, and it is what the arrow's own CSS keys
      * off.

package/types/ngwr-popover.d.ts

@@ -73,6 +73,7 @@ declare class WrPopover {
     private readonly resolvedAriaLabel;
     private readonly resolvedPosition;
     private overlayRef;
+    private textPanelRef;
     private hoverCloseTimer;
     private showTimer;
     private hideTimer;

package/types/ngwr-result.d.ts

@@ -40,6 +40,8 @@ declare class WrResult {
  * ```
  */
 declare class WrResult404 {
+    /** Bound by the shared template; not an input — a preset IS its status. */
+    protected readonly status: WrResultStatus;
     readonly title: _angular_core.InputSignal<string>;
     /** Body text. Falls back to `result.notFound` from WrI18n. */
     readonly description: _angular_core.InputSignal<string | null>;
@@ -49,6 +51,8 @@ declare class WrResult404 {
 }
 /** Pre-set 403 result — forbidden / no access. */
 declare class WrResult403 {
+    /** Bound by the shared template; not an input — a preset IS its status. */
+    protected readonly status: WrResultStatus;
     readonly title: _angular_core.InputSignal<string>;
     /** Body text. Falls back to `result.forbidden` from WrI18n. */
     readonly description: _angular_core.InputSignal<string | null>;
@@ -58,6 +62,8 @@ declare class WrResult403 {
 }
 /** Pre-set 500 result — internal server error. */
 declare class WrResult500 {
+    /** Bound by the shared template; not an input — a preset IS its status. */
+    protected readonly status: WrResultStatus;
     readonly title: _angular_core.InputSignal<string>;
     /** Body text. Falls back to `result.serverError` from WrI18n. */
     readonly description: _angular_core.InputSignal<string | null>;

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

@@ -194,6 +194,17 @@ declare class WrSegmentedOptionHarness extends ComponentHarness {
  * - Activation is the browser's own default action on a button, which jsdom does not
  *   implement, so {@link select} clicks — see {@link WrSegmentedOptionHarness.select}.
  *
+ * **It is a signal-forms control**, which adds two things to read here and one that
+ * cannot be read at all. `[formField]` binds the component's own `value` model, and a
+ * surrounding `<wr-form-field>` publishes its state onto the GROUP —
+ * {@link isInvalid} and {@link getDescriptionText} answer that, on the host rather
+ * than per segment, because the strip is one field and a description repeated on
+ * every segment would be announced once per Tab. What is NOT here is the field's
+ * `touched` flag: the component only emits `touch`, and whether anything listened is
+ * a fact about the form, not about this DOM — assert it on the field.
+ * {@link blur} is how a spec gets there, and it is the ONLY route: a click does not
+ * mark a field touched, and neither does moving from one segment to the next.
+ *
  * **There is deliberately no `getValue()` and no selection by value.** `options` is
  * a bound array of `{ value, label, … }` and the value is a generic `T` the component
  * writes nowhere — not on the host, not on a segment. The single exception is an
@@ -339,6 +350,39 @@ declare class WrSegmentedHarness extends ComponentHarness {
      * {@link getTabStopLabels} gives.
      */
     getFocusedLabel(): Promise<string | null>;
+    /**
+     * Whether the surrounding `<wr-form-field>` is reporting this control invalid, from
+     * `aria-invalid` on the host.
+     *
+     * `false` for a control with no field around it, and `false` for a field that is
+     * invalid but has not shown its copy yet: the component keys the attribute on the
+     * MESSAGE existing rather than on the error, because announcing "invalid" while
+     * pointing at nothing is worse than staying quiet. So this and
+     * {@link getDescriptionText} move together, and a `true` with no description would
+     * be the finding.
+     */
+    isInvalid(): Promise<boolean>;
+    /**
+     * The text `aria-describedby` points at — the validation copy a screen reader is
+     * given for this control — or `null` when the host describes nothing.
+     *
+     * Resolved from the document root, because the element named may sit anywhere on
+     * the page, and THROWS when the reference resolves to no element: a dangling
+     * `aria-describedby` renders exactly like a working one and is announced as
+     * nothing, so returning `null` for it would report the bug as the healthy state.
+     */
+    getDescriptionText(): Promise<string | null>;
+    /**
+     * Take focus off the strip entirely — what marks a bound field touched, and the
+     * only thing that does.
+     *
+     * The component emits `touch` from a `focusout` that leaves the host, so a click
+     * does not reach it and neither does Tab from one segment to the next: a strip a
+     * user tabbed straight past has to end up untouched, which is the case `touched`
+     * exists for. Resolves quietly when nothing inside was focused, since that is
+     * already the state this asks for.
+     */
+    blur(): Promise<void>;
     /**
      * The index the component publishes for the thumb, from the
      * `--wr-segmented-thumb-index` custom property it sets inline.
@@ -393,6 +437,15 @@ declare class WrSegmentedHarness extends ComponentHarness {
     /** Segment names for an error message, which must not throw on its way out. */
     private describeOptions;
     private describe;
+    /**
+     * 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 thumb's inline custom properties, as a number. */
     private thumbVar;
 }

package/types/ngwr-segmented.d.ts

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
 import { WrIconName } from 'ngwr/icon';
 
 /**
@@ -31,8 +32,25 @@ interface WrSegmentedOption<T = unknown> {
  * Single-choice picker rendered as a segmented control. Two-way binds
  * the selected `value`.
  *
+ * A signal-forms native control: it implements `FormValueControl<T | null>`, so
+ * `[formField]` binds straight to its `value` model — no
+ * `ControlValueAccessor` in between. `[(value)]` works standalone, and classic
+ * `[(ngModel)]` / reactive forms keep working through Angular's bridge.
+ *
+ * It stays a `role="group"` of `aria-pressed` toggle buttons rather than
+ * becoming a `radiogroup`: being a form control changes what the value is bound
+ * to, not what the widget is, and a radiogroup would owe a roving tab stop and
+ * arrow-key selection — a different keyboard contract for every consumer who
+ * already ships this. The group is what the field describes (`aria-describedby`
+ * / `aria-invalid` land on the host), while the `<label for>` has to name a
+ * labelable element, so the id goes on the first segment.
+ *
  * @example
  * ```html
+ * <!-- signal forms -->
+ * <wr-segmented [options]="ranges" [formField]="form.range" />
+ *
+ * <!-- standalone two-way binding -->
  * <wr-segmented
  *   [options]="[
  *     { value: 'day',  label: 'Day' },
@@ -46,28 +64,112 @@ interface WrSegmentedOption<T = unknown> {
  * @see https://ngwr.dev/reference/components/segmented
  */
 type WrSegmentedSize = 'sm' | 'md' | 'lg';
-declare class WrSegmented<T = unknown> {
+declare class WrSegmented<T = unknown> implements FormValueControl<T | null> {
     /** The segments to render. */
     readonly options: _angular_core.InputSignal<readonly WrSegmentedOption<T>[]>;
-    /** Two-way bindable selected value. */
+    /**
+     * The picked segment's `value`, `null` when nothing is selected. Bound by
+     * `[formField]`, or two-way via `[(value)]`.
+     */
     readonly value: _angular_core.ModelSignal<T | null>;
-    /** Disable the whole control. @default false */
+    /** Emitted when focus leaves the strip, so a bound field can mark itself touched. */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Disable the whole control. Bound automatically from the field's disabled
+     * state when used with `[formField]`.
+     *
+     * @default false
+     */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Control size — shares the `--wr-control-*` contract. @default 'md' */
     readonly size: _angular_core.InputSignal<WrSegmentedSize>;
+    private readonly host;
+    private readonly field;
+    /**
+     * Id the surrounding `<wr-form-field>`'s `<label for>` points at, stamped on the
+     * FIRST segment.
+     *
+     * The field renders its label before it can see what was projected into it, so the
+     * id travels the other way and the control adopts it, exactly as `[wrInput]`,
+     * `wr-slider` and `wr-select` do. Without this the `for` named an element that was
+     * nowhere in the document: clicking the label did nothing.
+     *
+     * It cannot go on the host — only a labelable element can be a label's target, and
+     * `<wr-segmented>` is not one — and there is no single control to put it on, so it
+     * goes where clicking the label should land a user: the first segment, which is
+     * also the strip's first tab stop. The same choice `wr-slider` makes with its low
+     * thumb.
+     *
+     * What this does NOT change is that segment's NAME: it is named by its own label,
+     * and a `<label for>` cannot outrank text content in the accname order anyway.
+     *
+     * The one shape this reads wrong is a strip NESTED inside another control that is
+     * itself the field — `<wr-color-picker>`'s own format tabs are the only case in
+     * the library — where the id lands on a tab instead of on the picker. That is the
+     * same exposure `[wrInput]`, `wr-slider` and `wr-select` all carry, and the fix
+     * belongs to the outer control (shield its subtree by providing `WR_FORM_FIELD`
+     * as `null`), not to a strip that cannot tell whose field it is in.
+     */
+    protected readonly controlId: _angular_core.Signal<string | null>;
+    /**
+     * The field's error message, wired to the GROUP rather than to a segment.
+     *
+     * A segmented control is one field made of several buttons, so the description
+     * belongs to the thing the field describes — repeated on every segment it would be
+     * announced once per Tab. `role="group"` supports neither state as a role-specific
+     * attribute, but both are ARIA globals, so this is valid where an `aria-checked`
+     * would not be.
+     *
+     * `aria-invalid` is keyed on the message EXISTING rather than on `errorKeys()`,
+     * because the field only publishes an id once it is showing something — announcing
+     * "invalid" while pointing at nothing is worse than staying quiet.
+     */
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    protected readonly ariaInvalid: _angular_core.Signal<"true" | null>;
     /** Index of the selected option, or `-1` when nothing is selected. */
     protected readonly selectedIndex: _angular_core.Signal<number>;
     /** Flips true after the first paint so the thumb only animates user-driven changes, not the initial snap. */
     private readonly mounted;
     constructor();
     protected readonly classes: _angular_core.Signal<string>;
-    /** Inline CSS vars driving the sliding thumb position. */
+    private readonly dir;
+    /**
+     * Reading direction of the strip. `Directionality` is root-provided, so this
+     * always resolves — `optional` only guards a consumer who has deliberately
+     * torn the provider out. A subtree that overrides the direction does it with
+     * the CDK's `Dir` directive, which writes `valueSignal`, so `thumbStyle`
+     * re-renders instead of leaving the thumb parked on the old segment.
+     */
+    private readonly isRtl;
+    /**
+     * Inline CSS vars driving the sliding thumb position.
+     *
+     * `--wr-segmented-thumb-index` is the SLOT the thumb parks in, counted from the
+     * physical left, which is the selected index only in LTR. The stylesheet anchors
+     * the thumb with a physical `left` and slides it with `translateX` — neither has
+     * a logical form — while the options are a grid that mirrors, so under `dir="rtl"`
+     * the segment at logical index `i` occupies slot `count - 1 - i`. Left unsigned,
+     * the pill sat under a different label than the one it marks (the whole strip's
+     * worth of offset at the far end), which is the carousel's `trackStyle` problem
+     * one component over.
+     */
     protected readonly thumbStyle: _angular_core.Signal<Record<string, string>>;
     protected isSelected(option: WrSegmentedOption<T>): boolean;
     protected select(option: WrSegmentedOption<T>): void;
     protected trackByValue(_: number, option: WrSegmentedOption<T>): unknown;
+    /**
+     * A bound field learns it may show its validation copy from `touch`, and a click
+     * cannot be the source: a strip tabbed into and out of without a pick left the
+     * field untouched forever — which is exactly the case `touched` exists for.
+     *
+     * `wr-knob` and `wr-rating` bind `(blur)` on the one element they own; this
+     * component owns one button per option, so it listens for the bubbling `focusout`
+     * on its host instead — and ignores the one that only moves focus from one segment
+     * to the next, the way `wr-slider` ignores the hop between its two thumbs.
+     */
+    protected onFocusOut(event: FocusEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSegmented<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSegmented<any>, "wr-segmented", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSegmented<any>, "wr-segmented", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrSegmented };