ngwr 12.0.0 → 12.2.0

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,15 +64,68 @@ 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. */
@@ -86,8 +157,19 @@ declare class WrSegmented<T = unknown> {
     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 };

package/types/ngwr-select.d.ts

@@ -444,8 +444,18 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     /** Tag-mode draft (text currently typed in the inline input). @internal */
     protected readonly draft: _angular_core.WritableSignal<string>;
     /**
-     * Show a clear-all (×) button at the end of the chip row when at
-     * least one option is selected (multi mode only). @default true
+     * Show a clear (×) button once at least one option is selected.
+     *
+     * NOT multi-only, which this said for a long time and which the template
+     * refutes: only the button trigger gates on `isMulti()`, so the chips trigger
+     * AND a single `mode="search"` / `[searchable]` select carry it too. The
+     * wording mattered little while the default was `true`; it decides what a
+     * reader expects to lose now that it is not.
+     *
+     * The default changed from `true` to `false`: the affordance is opt-in, so a
+     * trigger that grew an × on its own no longer does — pass `clearable` to keep
+     * it. In `search` mode this also gates Backspace-to-clear on an empty field,
+     * since that key is the keyboard twin of this button. @default false
      */
     readonly clearable: _angular_core.InputSignalWithTransform<boolean, any>;
     /**

package/types/ngwr-version.d.ts

@@ -16,7 +16,7 @@ import { InjectionToken } from '@angular/core';
  * Distinct from `Version` exported by `@angular/core`, which reports the
  * loaded Angular runtime version (e.g. `'22.0.0'`), not ngwr's.
  */
-declare const NGWR_VERSION = "12.0.0";
+declare const NGWR_VERSION = "12.2.0";
 
 /**
  * @license