ngwr 12.1.0 → 13.0.0

package/types/ngwr-radio.d.ts

@@ -1,5 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { InjectionToken, Signal } from '@angular/core';
+import * as ngwr_form from 'ngwr/form';
 import { FormValueControl } from '@angular/forms/signals';
 
 /**
@@ -18,7 +19,10 @@ import { FormValueControl } from '@angular/forms/signals';
  */
 type WrRadioSize = 'sm' | 'md' | 'lg';
 declare class WrRadio {
-    /** Stable id used to associate the native input with its label. */
+    /**
+     * Stable id used to associate the native input with its label. Lands on the
+     * inner `<input>`; the host never keeps it.
+     */
     readonly id: _angular_core.InputSignal<string>;
     /** Value selected when this radio is checked. */
     readonly value: _angular_core.InputSignal<unknown>;
@@ -48,7 +52,20 @@ declare class WrRadio {
     protected readonly checked: _angular_core.Signal<boolean>;
     /** Effective disabled — this option's own `disabled` or the group's. */
     protected readonly isDisabled: _angular_core.Signal<boolean>;
+    /**
+     * Readonly is a GROUP-level state — a single option cannot be read-only while
+     * its siblings are not, because picking any of them rewrites the same value.
+     * `aria-readonly` therefore lives on the `role="radiogroup"` host and NOT here:
+     * role `radio` does not support it.
+     */
+    protected readonly isReadonly: _angular_core.Signal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
+    /**
+     * Cancel the selection while the group is read-only. `change` never fires for
+     * a click whose default was prevented, so this is the only guard the pointer
+     * and Space paths need; `onSelect` keeps its own for a synthetic `change`.
+     */
+    protected onInputClick(event: Event): void;
     protected onSelect(): void;
     protected onBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrRadio, never>;
@@ -74,6 +91,8 @@ interface WrRadioGroupContext {
     readonly value: Signal<unknown>;
     /** Whether the entire group is disabled. */
     readonly isDisabled: Signal<boolean>;
+    /** Whether the entire group refuses edits while staying focusable. */
+    readonly isReadonly: Signal<boolean>;
     /** Select the given value. */
     select(value: unknown): void;
     /**
@@ -124,16 +143,32 @@ declare class WrRadioGroup implements FormValueControl<unknown>, WrRadioGroupCon
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Refuse selection changes while every option stays focusable and the value
+     * still submits. Bound automatically from the field's readonly state when used
+     * with `[formField]`.
+     *
+     * Native radios ignore the `readonly` attribute, so the group cancels the
+     * activation instead and mirrors the state as `aria-readonly`, which role
+     * `radiogroup` supports.
+     *
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** The surrounding `<wr-form-field>`'s error state. @internal */
+    protected readonly fieldAria: ngwr_form.WrFormFieldAria;
     /** The selected radio's value. Bound by `[formField]`, or two-way via `[(value)]`. */
     readonly value: _angular_core.ModelSignal<unknown>;
     /** Emitted on blur from any child so a bound field can mark itself touched. */
     readonly touch: _angular_core.OutputEmitterRef<void>;
     /** Effective disabled state (WrRadioGroupContext). */
     readonly isDisabled: _angular_core.Signal<boolean>;
+    /** Effective readonly state (WrRadioGroupContext). */
+    readonly isReadonly: _angular_core.Signal<boolean>;
     select(value: unknown): void;
     markTouched(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrRadioGroup, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrRadioGroup, "wr-radio-group", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrRadioGroup, "wr-radio-group", never, { "name": { "alias": "name"; "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, ["*"], true, never>;
 }
 
 export { WR_RADIO_GROUP, WrRadio, WrRadioGroup };

package/types/ngwr-rating.d.ts

@@ -1,3 +1,4 @@
+import * as ngwr_form from 'ngwr/form';
 import * as _angular_core from '@angular/core';
 import { FormValueControl } from '@angular/forms/signals';
 
@@ -56,6 +57,17 @@ declare class WrRating implements FormValueControl<number | null> {
     /** Transient hover preview — overrides `value` for display when set. */
     protected readonly hoverValue: _angular_core.WritableSignal<number | null>;
     protected readonly interactive: _angular_core.Signal<boolean>;
+    /**
+     * Whether the control keeps its tab stop — `disabled` only, never `readonly`.
+     *
+     * The two states differ precisely here: a disabled control leaves the tab
+     * order, a read-only one stays in it and keeps announcing `aria-valuenow`,
+     * because a keyboard user still has to be able to READ a value they cannot
+     * change. Driving `tabindex` off `interactive()` collapsed that distinction
+     * and made `readonly()` unreachable — with an `aria-describedby` pointing at
+     * an error message on an element nobody could focus.
+     */
+    protected readonly focusable: _angular_core.Signal<boolean>;
     /** What we actually render — hover wins while hovering. */
     protected readonly displayValue: _angular_core.Signal<number>;
     protected readonly slots: _angular_core.Signal<number[]>;
@@ -69,6 +81,8 @@ declare class WrRating implements FormValueControl<number | null> {
      * interaction rather than cached, so a runtime flip needs no subscription.
      */
     private readonly directionality;
+    /** The surrounding `<wr-form-field>`'s error state. @internal */
+    protected readonly fieldAria: ngwr_form.WrFormFieldAria;
     protected readonly classes: _angular_core.Signal<string>;
     constructor();
     /** Fill ratio for slot `i` in `[0, 1]` — drives the CSS clip width. */

package/types/ngwr-segmented.d.ts

@@ -81,6 +81,23 @@ declare class WrSegmented<T = unknown> implements FormValueControl<T | null> {
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Refuse changes while every segment stays focusable and the value still
+     * submits. Bound automatically from the field's readonly state when used with
+     * `[formField]`.
+     *
+     * NOTHING is mirrored into ARIA here, deliberately: the strip is a
+     * `role="group"` of `aria-pressed` buttons, and ARIA defines `aria-readonly`
+     * for neither role — it is a state of `checkbox` / `radiogroup` / `textbox`
+     * and their kin, and it is not global. `aria-disabled` is the only attribute
+     * that would apply to a button, and it says the wrong thing: these segments
+     * are still focusable and the value still submits. So the state is honest in
+     * the DOM (`wr-segmented--readonly`) and silent in the accessibility tree
+     * rather than announced with a word that means something else.
+     *
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Control size — shares the `--wr-control-*` contract. @default 'md' */
     readonly size: _angular_core.InputSignal<WrSegmentedSize>;
     private readonly host;
@@ -169,7 +186,7 @@ declare class WrSegmented<T = unknown> implements FormValueControl<T | null> {
      */
     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"; "touch": "touch"; }, 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; }; "readonly": { "alias": "readonly"; "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

@@ -243,6 +243,20 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Refuse changes while the trigger stays focusable and the value still
+     * submits. Bound automatically from the field's readonly state when used with
+     * `[formField]`.
+     *
+     * The panel is where every edit happens, so a read-only select does not open —
+     * and with it go the clear button, the chip ×, the tag draft and the search
+     * query. The text-input shapes take the native `readonly` attribute, which is
+     * what keeps them focusable and selectable where `disabled` would not; every
+     * shape mirrors `aria-readonly`, which role `combobox` supports.
+     *
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
     /**
      * Pill-shaped corners on the trigger. Unset falls back to the `select.rounded`
      * app default from `provideWrConfig()`; `[rounded]="false"` turns a configured
@@ -444,8 +458,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>;
     /**
@@ -498,6 +522,8 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     protected readonly hasSelection: _angular_core.Signal<boolean>;
     /** Effective disabled state. Part of {@link WrSelectContext} for child options. */
     readonly isDisabled: _angular_core.Signal<boolean>;
+    /** Effective readonly state — refuses every write path without removing focus. */
+    protected readonly isReadonly: _angular_core.Signal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
     /**
      * Search-mode dynamic options. Loader results win when the loader is
@@ -674,7 +700,7 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     private openOverlay;
     private closeOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSelect, "wr-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchQuery": { "alias": "searchQuery"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "loader": { "alias": "loader"; "required": false; "isSignal": true; }; "serverSearch": { "alias": "serverSearch"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; "freeText": { "alias": "freeText"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "separators": { "alias": "separators"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxItems": { "alias": "maxItems"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "searchQuery": "searchQueryChange"; "searchChange": "searchChange"; "value": "valueChange"; "touch": "touch"; }, ["projectedOptions"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSelect, "wr-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "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; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchQuery": { "alias": "searchQuery"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "loader": { "alias": "loader"; "required": false; "isSignal": true; }; "serverSearch": { "alias": "serverSearch"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; "freeText": { "alias": "freeText"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "separators": { "alias": "separators"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxItems": { "alias": "maxItems"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "searchQuery": "searchQueryChange"; "searchChange": "searchChange"; "value": "valueChange"; "touch": "touch"; }, ["projectedOptions"], ["*"], true, never>;
 }
 
 /**

package/types/ngwr-slider.d.ts

@@ -67,6 +67,19 @@ declare class WrSlider implements FormValueControl<WrSliderValue> {
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Refuse value changes while the thumbs stay focusable and the value still
+     * submits. Bound automatically from the field's readonly state when used with
+     * `[formField]`.
+     *
+     * The thumbs keep their tab stop and keep announcing their value — arrow keys,
+     * Home / End and the pointer simply move nothing — which is the whole
+     * difference from `disabled`, where they would leave the tab order entirely.
+     * Mirrored as `aria-readonly`, which role `slider` supports.
+     *
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Render the current value below the track. @default true */
     readonly showLabel: _angular_core.InputSignalWithTransform<boolean, any>;
     /**
@@ -210,7 +223,7 @@ declare class WrSlider implements FormValueControl<WrSliderValue> {
     private percentOf;
     private emitChange;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSlider, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSlider, "wr-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "upperLabel": { "alias": "upperLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSlider, "wr-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "upperLabel": { "alias": "upperLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrSlider };

package/types/ngwr-switch.d.ts

@@ -1,3 +1,4 @@
+import * as ngwr_form from 'ngwr/form';
 import * as _angular_core from '@angular/core';
 import { FormCheckboxControl } from '@angular/forms/signals';
 
@@ -27,7 +28,10 @@ declare class WrSwitch implements FormCheckboxControl {
      * label is empty and the input has no name at all.
      */
     readonly ariaLabel: _angular_core.InputSignal<string | null>;
-    /** Stable id used to associate the native input with its label. */
+    /**
+     * Stable id used to associate the native input with its label. Lands on the
+     * inner `<input>`; the host never keeps it.
+     */
     readonly id: _angular_core.InputSignal<string>;
     /**
      * Disable the switch. Bound automatically from the field's disabled state
@@ -36,6 +40,20 @@ declare class WrSwitch implements FormCheckboxControl {
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Refuse edits while staying focusable and submittable. Bound automatically
+     * from the field's readonly state when used with `[formField]`.
+     *
+     * A native checkbox ignores the `readonly` attribute, so this cancels the
+     * click's activation behaviour instead — which covers Space too, since the key
+     * arrives as a click — and mirrors the state as `aria-readonly`, which role
+     * `switch` supports.
+     *
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** The surrounding `<wr-form-field>`'s error state. @internal */
+    protected readonly fieldAria: ngwr_form.WrFormFieldAria;
     /**
      * Control size — shares the `--wr-control-*` contract. Unset falls back to the
      * `switch.size` app default from `provideWrConfig()`. @default 'md'
@@ -48,10 +66,16 @@ declare class WrSwitch implements FormCheckboxControl {
     /** Emitted on blur so a bound field can mark itself touched. */
     readonly touch: _angular_core.OutputEmitterRef<void>;
     protected readonly classes: _angular_core.Signal<string>;
+    /**
+     * Cancel the toggle while readonly. `change` never fires for a click whose
+     * default was prevented, so this is the only guard the pointer and Space paths
+     * need; `onInputChange` keeps its own for a synthetic `change`.
+     */
+    protected onInputClick(event: Event): void;
     protected onInputChange(event: Event): void;
     protected onInputBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSwitch, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSwitch, "wr-switch", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "touch": "touch"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSwitch, "wr-switch", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "touch": "touch"; }, never, ["*"], true, never>;
 }
 
 export { WrSwitch };

package/types/ngwr-textarea.d.ts

@@ -1,3 +1,4 @@
+import * as ngwr_form from 'ngwr/form';
 import * as _angular_core from '@angular/core';
 import { ElementRef } from '@angular/core';
 import { FormValueControl } from '@angular/forms/signals';
@@ -68,6 +69,8 @@ declare class WrTextarea implements FormValueControl<string> {
     protected readonly native: _angular_core.Signal<ElementRef<HTMLTextAreaElement>>;
     /** Resize direction, gated by `resizable` (false → 'none'). */
     protected readonly effectiveResize: _angular_core.Signal<WrTextareaResize>;
+    /** The surrounding `<wr-form-field>`'s error state. @internal */
+    protected readonly fieldAria: ngwr_form.WrFormFieldAria;
     protected readonly classes: _angular_core.Signal<string>;
     /** Show the corner grip (hidden when direction is 'none' / autosize / disabled). */
     protected readonly showHandle: _angular_core.Signal<boolean>;

package/types/ngwr-theme.d.ts

@@ -159,6 +159,11 @@ declare const WR_THEME_CONFIG: InjectionToken<WrThemeConfig>;
  * - Persists the selected mode via {@link WrStorage} (defaults to
  *   `localStorage`; swap the storage engine globally to change where).
  *
+ * A configured `attribute` has to be given to the STYLESHEET too — a CSS
+ * selector cannot read a provider value — so pair it with
+ * `@use 'ngwr' with ($theme-attribute: '...')`. In dev mode the service compares
+ * the two and warns when they disagree.
+ *
  * @example
  * ```ts
  * const theme = inject(WrTheme);
@@ -183,6 +188,25 @@ declare class WrTheme {
     set(mode: WrThemeMode): void;
     /** Cycle: light → dark → light (skips auto). */
     toggle(): void;
+    /**
+     * Dev-mode check that the STYLESHEET keys on the same attribute this service
+     * writes.
+     *
+     * `attribute` is a runtime value and a CSS selector cannot read one, so the
+     * dark block is keyed on a Sass variable (`$theme-attribute`) the consumer
+     * configures separately. That makes disagreement possible, and disagreement is
+     * silent in the worst way: the service resolves `dark`, writes the attribute,
+     * reports success — and the page stays light forever, because nothing matches.
+     *
+     * The compiled theme publishes the name it keys on as `--wr-theme-attribute`,
+     * which is what this reads. An empty value means no ngwr stylesheet is loaded
+     * (a unit test, a consumer bundling their own CSS) or that it predates v13, so
+     * the check stays quiet — it can only fire on a real mismatch, never on an
+     * absence it cannot interpret.
+     *
+     * Production builds drop the call entirely via `isDevMode()` tree-shaking.
+     */
+    private warnOnAttributeMismatch;
     private readPersisted;
     private persist;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrTheme, never>;

package/types/ngwr-transfer.d.ts

@@ -1,4 +1,5 @@
 import * as ngwr_i18n from 'ngwr/i18n';
+import * as ngwr_form from 'ngwr/form';
 import * as _angular_core from '@angular/core';
 import { FormValueControl } from '@angular/forms/signals';
 
@@ -74,6 +75,21 @@ declare class WrTransfer implements FormValueControl<readonly unknown[]> {
     readonly touch: _angular_core.OutputEmitterRef<void>;
     /** Disable the whole control. @default false */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Refuse changes to the value while both panes stay focusable and readable.
+     * Bound automatically from the field's readonly state when used with
+     * `[formField]`.
+     *
+     * The move buttons go inert and the row checkboxes go read-only; SEARCH keeps
+     * working, because filtering a pane changes what is shown and not what is
+     * chosen. No `aria-readonly` on the host: role `group` does not support the
+     * state, so each row's checkbox mirrors its own instead.
+     *
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** The surrounding `<wr-form-field>`'s error state. @internal */
+    protected readonly fieldAria: ngwr_form.WrFormFieldAria;
     /** Show a filter box above each pane. @default false */
     readonly searchable: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Heading above the left pane. Falls back to `transfer.source`. */
@@ -126,7 +142,7 @@ declare class WrTransfer implements FormValueControl<readonly unknown[]> {
     /** Filter, then derive the header state from what survived. */
     private pane;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTransfer, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTransfer, "wr-transfer", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "sourceTitle": { "alias": "sourceTitle"; "required": false; "isSignal": true; }; "targetTitle": { "alias": "targetTitle"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "toTargetLabel": { "alias": "toTargetLabel"; "required": false; "isSignal": true; }; "toSourceLabel": { "alias": "toSourceLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTransfer, "wr-transfer", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "sourceTitle": { "alias": "sourceTitle"; "required": false; "isSignal": true; }; "targetTitle": { "alias": "targetTitle"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "toTargetLabel": { "alias": "toTargetLabel"; "required": false; "isSignal": true; }; "toSourceLabel": { "alias": "toSourceLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrTransfer };

package/types/ngwr-tree.d.ts

@@ -1,4 +1,5 @@
 import * as ngwr_i18n from 'ngwr/i18n';
+import * as ngwr_form from 'ngwr/form';
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
 import { FormValueControl } from '@angular/forms/signals';
@@ -89,6 +90,25 @@ declare class WrTree<TId = string> implements FormValueControl<unknown> {
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Refuse selection changes while the tree stays focusable and the value still
+     * submits. Bound automatically from the field's readonly state when used with
+     * `[formField]`.
+     *
+     * Expanding and collapsing keep working: a branch is NAVIGATION, not a value,
+     * so a read-only tree is still browsable — it is picking and un-picking that
+     * stops. In `overlay` mode the trigger additionally refuses to open, because
+     * there the panel exists only to choose from and it already shows what is
+     * chosen.
+     *
+     * `aria-readonly` rides on the combobox trigger only; role `tree` does not
+     * support the state, so the inline shape has nothing valid to mirror it onto.
+     *
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** The surrounding `<wr-form-field>`'s error state. @internal */
+    protected readonly fieldAria: ngwr_form.WrFormFieldAria;
     /** Render shape. @default 'inline' */
     readonly openOn: _angular_core.InputSignal<"inline" | "overlay">;
     /** Placeholder shown on the trigger when no node is selected. */
@@ -274,7 +294,7 @@ declare class WrTree<TId = string> implements FormValueControl<unknown> {
     private openOverlay;
     private closeOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTree<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTree<any>, "wr-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "openOn": { "alias": "openOn"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; "defaultExpandAll": { "alias": "defaultExpandAll"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "expanded": "expandedChange"; "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTree<any>, "wr-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "openOn": { "alias": "openOn"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; "defaultExpandAll": { "alias": "defaultExpandAll"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "expanded": "expandedChange"; "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrTree };

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.1.0";
+declare const NGWR_VERSION = "13.0.0";
 
 /**
  * @license

package/typewriter/styles/_index.scss

@@ -1,38 +1,15 @@
-// Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
-// design token this stylesheet references. Sass deduplicates `@use` per
-// compilation, so the umbrella sheet still emits the theme only once.
-@use '../../theme/styles' as theme;
-
-.wr-typewriter {
-  --wr-typewriter-cursor-blink: 0.5s;
-
-  display: inline-flex;
-  align-items: baseline;
-
-  &__content {
-    white-space: pre;
-  }
-
-  &__cursor {
-    display: inline-block;
-    margin-inline-start: 1px;
-    animation: wr-typewriter-blink var(--wr-typewriter-cursor-blink) ease-in-out infinite alternate;
-  }
-}
-
-@keyframes wr-typewriter-blink {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-// Reduced motion: solid cursor — the blink is decorative.
-@media (prefers-reduced-motion: reduce) {
-  .wr-typewriter__cursor {
-    animation: none;
-    opacity: 1;
-  }
-}
+// Public Sass entry for `@use 'ngwr/typewriter'`.
+//
+// Pulls the whole theme so a standalone import still brings in every design
+// token these rules reference, then loads the rules themselves from `_rules`.
+//
+// The split is what keeps the token layer out of the JavaScript bundle.
+// `typewriter.scss` is the component's `styleUrl`, and a component stylesheet is
+// its OWN Sass compilation — `@use` only deduplicates within one. So while the
+// umbrella sheet emits the theme once, forwarding it from here would inline a
+// second, byte-identical copy of `:root`, `[data-theme='dark']` and the
+// box-sizing reset into the compiled component styles, which ng-packagr then
+// embeds in the FESM bundle as a string. `typewriter.scss` forwards `_rules`
+// instead, so it carries this component's own CSS and nothing else.
+@use '../../theme/styles';
+@forward 'rules';

package/typewriter/styles/_rules.scss

@@ -0,0 +1,33 @@
+.wr-typewriter {
+  --wr-typewriter-cursor-blink: 0.5s;
+
+  display: inline-flex;
+  align-items: baseline;
+
+  &__content {
+    white-space: pre;
+  }
+
+  &__cursor {
+    display: inline-block;
+    margin-inline-start: 1px;
+    animation: wr-typewriter-blink var(--wr-typewriter-cursor-blink) ease-in-out infinite alternate;
+  }
+}
+
+@keyframes wr-typewriter-blink {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+// Reduced motion: solid cursor — the blink is decorative.
+@media (prefers-reduced-motion: reduce) {
+  .wr-typewriter__cursor {
+    animation: none;
+    opacity: 1;
+  }
+}

package/typewriter/typewriter.scss

@@ -1 +1 @@
-@forward './styles';
+@forward './styles/rules';

package/virtual-scroll/styles/_index.scss

@@ -1,32 +1,15 @@
-// Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
-// design token this stylesheet references. Sass deduplicates `@use` per
-// compilation, so the umbrella sheet still emits the theme only once.
-@use '../../theme/styles' as theme;
-
-// Fixed-size virtual scroll wrapper. Most of the layout work is done by
-// CDK's `<cdk-virtual-scroll-viewport>`; this stylesheet just makes the
-// host a block-level container and tames default overflow behaviour.
-
-.wr-virtual-scroll {
-  display: block;
-  width: 100%;
-  overflow: hidden;
-
-  &__viewport {
-    width: 100%;
-    height: 100%;
-    // CDK already sets `overflow: auto`; just add a discreet scrollbar
-    // skin via the platform defaults — a discreet custom thumb that still matches the
-    // host application's chrome.
-    scrollbar-width: thin;
-
-    &::-webkit-scrollbar {
-      width: 0.5rem;
-      height: 0.5rem;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: rgba(var(--wr-color-on-surface-rgb), 0.2);
-      border-radius: 999px;
-    }
-  }
-}
+// Public Sass entry for `@use 'ngwr/virtual-scroll'`.
+//
+// Pulls the whole theme so a standalone import still brings in every design
+// token these rules reference, then loads the rules themselves from `_rules`.
+//
+// The split is what keeps the token layer out of the JavaScript bundle.
+// `virtual-scroll.scss` is the component's `styleUrl`, and a component stylesheet is
+// its OWN Sass compilation — `@use` only deduplicates within one. So while the
+// umbrella sheet emits the theme once, forwarding it from here would inline a
+// second, byte-identical copy of `:root`, `[data-theme='dark']` and the
+// box-sizing reset into the compiled component styles, which ng-packagr then
+// embeds in the FESM bundle as a string. `virtual-scroll.scss` forwards `_rules`
+// instead, so it carries this component's own CSS and nothing else.
+@use '../../theme/styles';
+@forward 'rules';