ngwr 12.2.0 → 13.0.0

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
@@ -508,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
@@ -684,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.2.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';

package/virtual-scroll/styles/_rules.scss

@@ -0,0 +1,27 @@
+// 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;
+    }
+  }
+}

package/virtual-scroll/virtual-scroll.scss

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

package/waves/styles/_index.scss

@@ -1,50 +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;
-
-// Wave-field background (reactbits port). The host fills its nearest
-// positioned ancestor; the line colour is theme-aware via
-// `--wr-waves-line-color` unless `[lineColor]` overrides it.
-
-.wr-waves {
-  --wr-waves-line-color: rgba(var(--wr-color-on-surface-rgb), 0.12);
-  // Mirrors the `xGap` input; the component publishes it so the stand-in below
-  // lands on the same pitch as the real grid.
-  --wr-waves-x-gap: 10px;
-
-  position: absolute;
-  inset: 0;
-  display: block;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-
-  // Stand-in grid, shown until the canvas has painted.
-  //
-  // A canvas cannot be prerendered, so on an SSR'd or prerendered page this
-  // element is blank until the JS bundle has loaded and hydrated — measured at
-  // ~2.8s on ngwr.dev's own home page, where it reads as the background hanging
-  // and then popping in. These are straight lines rather than the drifting
-  // curves, at the same colour and pitch, so the handover reads as the grid
-  // coming alive rather than as content appearing.
-  background-image: repeating-linear-gradient(
-    to right,
-    var(--wr-waves-line-color) 0 1px,
-    transparent 1px var(--wr-waves-x-gap)
-  );
-
-  &--painted {
-    background-image: none;
-  }
-
-  &__canvas {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-[data-theme='dark'] .wr-waves {
-  --wr-waves-line-color: rgb(255 255 255 / 14%);
-}
+// Public Sass entry for `@use 'ngwr/waves'`.
+//
+// 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.
+// `waves.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. `waves.scss` forwards `_rules`
+// instead, so it carries this component's own CSS and nothing else.
+@use '../../theme/styles';
+@forward 'rules';

package/waves/styles/_rules.scss

@@ -0,0 +1,45 @@
+// Wave-field background (reactbits port). The host fills its nearest
+// positioned ancestor; the line colour is theme-aware via
+// `--wr-waves-line-color` unless `[lineColor]` overrides it.
+
+.wr-waves {
+  --wr-waves-line-color: rgba(var(--wr-color-on-surface-rgb), 0.12);
+  // Mirrors the `xGap` input; the component publishes it so the stand-in below
+  // lands on the same pitch as the real grid.
+  --wr-waves-x-gap: 10px;
+
+  position: absolute;
+  inset: 0;
+  display: block;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+
+  // Stand-in grid, shown until the canvas has painted.
+  //
+  // A canvas cannot be prerendered, so on an SSR'd or prerendered page this
+  // element is blank until the JS bundle has loaded and hydrated — measured at
+  // ~2.8s on ngwr.dev's own home page, where it reads as the background hanging
+  // and then popping in. These are straight lines rather than the drifting
+  // curves, at the same colour and pitch, so the handover reads as the grid
+  // coming alive rather than as content appearing.
+  background-image: repeating-linear-gradient(
+    to right,
+    var(--wr-waves-line-color) 0 1px,
+    transparent 1px var(--wr-waves-x-gap)
+  );
+
+  &--painted {
+    background-image: none;
+  }
+
+  &__canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+[data-theme='dark'] .wr-waves {
+  --wr-waves-line-color: rgb(255 255 255 / 14%);
+}

package/waves/waves.scss

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