@radix-ng/primitives 1.0.6 → 1.0.8

package/fesm2022/radix-ng-primitives-separator.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, linkedSignal, computed, Directive } from '@angular/core';
+import { input, linkedSignal, Directive } from '@angular/core';
 
 const DEFAULT_ORIENTATION = 'horizontal';
 /**
@@ -18,22 +18,14 @@ class RdxSeparatorRootDirective {
          */
         this.orientation = input(DEFAULT_ORIENTATION, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-        this.orientationState = linkedSignal({ ...(ngDevMode ? { debugName: "orientationState" } : /* istanbul ignore next */ {}), source: this.orientation,
-            computation: (value) => value });
-        /**
-         * Computes the `aria-orientation` attribute. It is set to "vertical" only when
-         * the separator orientation is vertical. Horizontal is the implicit ARIA default.
-         *
-         * @ignore
-         */
-        this.computedAriaOrientation = computed(() => this.orientationState() === 'vertical' ? 'vertical' : undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "computedAriaOrientation" }] : /* istanbul ignore next */ []));
+        this.orientationState = linkedSignal(this.orientation, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orientationState" }] : /* istanbul ignore next */ []));
     }
     updateOrientation(value) {
         this.orientationState.set(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSeparatorRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxSeparatorRootDirective, isStandalone: true, selector: "[rdxSeparatorRoot]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "computedAriaOrientation()", "attr.data-orientation": "orientationState()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxSeparatorRootDirective, isStandalone: true, selector: "[rdxSeparatorRoot]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "orientationState()", "attr.data-orientation": "orientationState()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSeparatorRootDirective, decorators: [{
             type: Directive,
@@ -41,7 +33,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     selector: '[rdxSeparatorRoot]',
                     host: {
                         role: 'separator',
-                        '[attr.aria-orientation]': 'computedAriaOrientation()',
+                        // Base UI emits `aria-orientation` for both orientations (matching this repo's
+                        // menu/combobox separators), not just the vertical override.
+                        '[attr.aria-orientation]': 'orientationState()',
                         '[attr.data-orientation]': 'orientationState()'
                     }
                 }]

package/fesm2022/radix-ng-primitives-separator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"radix-ng-primitives-separator.mjs","sources":["../../../packages/primitives/separator/src/separator.directive.ts","../../../packages/primitives/separator/radix-ng-primitives-separator.ts"],"sourcesContent":["import { computed, Directive, input, linkedSignal } from '@angular/core';\n\nconst DEFAULT_ORIENTATION = 'horizontal';\n\nexport type Orientation = 'horizontal' | 'vertical';\n\nexport interface SeparatorProps {\n    /**\n     * Either `vertical` or `horizontal`. Defaults to `horizontal`.\n     */\n    orientation?: Orientation;\n}\n\n/**\n * Directive that adds accessible and configurable separator element to the DOM.\n * This can be either horizontal or vertical.\n *\n * @group Components\n */\n@Directive({\n    selector: '[rdxSeparatorRoot]',\n    host: {\n        role: 'separator',\n        '[attr.aria-orientation]': 'computedAriaOrientation()',\n\n        '[attr.data-orientation]': 'orientationState()'\n    }\n})\nexport class RdxSeparatorRootDirective {\n    /**\n     * Orientation of the separator, can be either 'horizontal' or 'vertical'.\n     *\n     * @defaultValue 'horizontal'\n     * @group Props\n     */\n    readonly orientation = input<Orientation>(DEFAULT_ORIENTATION);\n\n    protected readonly orientationState = linkedSignal({\n        source: this.orientation,\n        computation: (value) => value\n    });\n\n    /**\n     * Computes the `aria-orientation` attribute. It is set to \"vertical\" only when\n     * the separator orientation is vertical. Horizontal is the implicit ARIA default.\n     *\n     * @ignore\n     */\n    protected readonly computedAriaOrientation = computed(() =>\n        this.orientationState() === 'vertical' ? 'vertical' : undefined\n    );\n\n    updateOrientation(value: Orientation) {\n        this.orientationState.set(value);\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA,MAAM,mBAAmB,GAAG,YAAY;AAWxC;;;;;AAKG;MAUU,yBAAyB,CAAA;AATtC,IAAA,WAAA,GAAA;AAUI;;;;;AAKG;QACM,IAAA,CAAA,WAAW,GAAG,KAAK,CAAc,mBAAmB;wFAAC;AAE3C,QAAA,IAAA,CAAA,gBAAgB,GAAG,YAAY,CAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,kBAAA,EAAA,8BAAA,EAAA,CAAA,EAC9C,MAAM,EAAE,IAAI,CAAC,WAAW;YACxB,WAAW,EAAE,CAAC,KAAK,KAAK,KAAK,GAC/B;AAEF;;;;;AAKG;AACgB,QAAA,IAAA,CAAA,uBAAuB,GAAG,QAAQ,CAAC,MAClD,IAAI,CAAC,gBAAgB,EAAE,KAAK,UAAU,GAAG,UAAU,GAAG,SAAS;oGAClE;AAKJ,IAAA;AAHG,IAAA,iBAAiB,CAAC,KAAkB,EAAA;AAChC,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC;IACpC;8GA1BS,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,WAAA,EAAA,EAAA,UAAA,EAAA,EAAA,uBAAA,EAAA,2BAAA,EAAA,uBAAA,EAAA,oBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAzB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBATrC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,oBAAoB;AAC9B,oBAAA,IAAI,EAAE;AACF,wBAAA,IAAI,EAAE,WAAW;AACjB,wBAAA,yBAAyB,EAAE,2BAA2B;AAEtD,wBAAA,yBAAyB,EAAE;AAC9B;AACJ,iBAAA;;;AC3BD;;AAEG;;;;"}
+{"version":3,"file":"radix-ng-primitives-separator.mjs","sources":["../../../packages/primitives/separator/src/separator.directive.ts","../../../packages/primitives/separator/radix-ng-primitives-separator.ts"],"sourcesContent":["import { Directive, input, linkedSignal } from '@angular/core';\n\nconst DEFAULT_ORIENTATION = 'horizontal';\n\nexport type Orientation = 'horizontal' | 'vertical';\n\nexport interface SeparatorProps {\n    /**\n     * Either `vertical` or `horizontal`. Defaults to `horizontal`.\n     */\n    orientation?: Orientation;\n}\n\n/**\n * Directive that adds accessible and configurable separator element to the DOM.\n * This can be either horizontal or vertical.\n *\n * @group Components\n */\n@Directive({\n    selector: '[rdxSeparatorRoot]',\n    host: {\n        role: 'separator',\n        // Base UI emits `aria-orientation` for both orientations (matching this repo's\n        // menu/combobox separators), not just the vertical override.\n        '[attr.aria-orientation]': 'orientationState()',\n        '[attr.data-orientation]': 'orientationState()'\n    }\n})\nexport class RdxSeparatorRootDirective {\n    /**\n     * Orientation of the separator, can be either 'horizontal' or 'vertical'.\n     *\n     * @defaultValue 'horizontal'\n     * @group Props\n     */\n    readonly orientation = input<Orientation>(DEFAULT_ORIENTATION);\n\n    protected readonly orientationState = linkedSignal(this.orientation);\n\n    updateOrientation(value: Orientation) {\n        this.orientationState.set(value);\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA,MAAM,mBAAmB,GAAG,YAAY;AAWxC;;;;;AAKG;MAWU,yBAAyB,CAAA;AAVtC,IAAA,WAAA,GAAA;AAWI;;;;;AAKG;QACM,IAAA,CAAA,WAAW,GAAG,KAAK,CAAc,mBAAmB;wFAAC;AAE3C,QAAA,IAAA,CAAA,gBAAgB,GAAG,YAAY,CAAC,IAAI,CAAC,WAAW;6FAAC;AAKvE,IAAA;AAHG,IAAA,iBAAiB,CAAC,KAAkB,EAAA;AAChC,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC;IACpC;8GAbS,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,WAAA,EAAA,EAAA,UAAA,EAAA,EAAA,uBAAA,EAAA,oBAAA,EAAA,uBAAA,EAAA,oBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAzB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAVrC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,oBAAoB;AAC9B,oBAAA,IAAI,EAAE;AACF,wBAAA,IAAI,EAAE,WAAW;;;AAGjB,wBAAA,yBAAyB,EAAE,oBAAoB;AAC/C,wBAAA,yBAAyB,EAAE;AAC9B;AACJ,iBAAA;;;AC5BD;;AAEG;;;;"}

package/fesm2022/radix-ng-primitives-signal-forms.mjs

@@ -0,0 +1,184 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, Directive, input, NgModule } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import { injectFieldRootContext } from '@radix-ng/primitives/field';
+import { injectFormRootContext } from '@radix-ng/primitives/form';
+
+/**
+ * Bridges an Angular **Signal Forms** field into an enclosing `rdxFieldRoot` — with **no duplicate
+ * binding**. Place it on the control that already carries `[formField]`; it reads the bound field's
+ * state from that directive, so the field expression is written exactly once:
+ *
+ * ```html
+ * <div rdxFieldRoot>
+ *   <label rdxFieldLabel>Email</label>
+ *   <input rdxInput [formField]="loginForm.email" rdxSignalField />
+ *   <p rdxFieldError>Email is required.</p>
+ * </div>
+ * ```
+ *
+ * It owns no model and runs no validation — Signal Forms remains the source of truth. It only registers
+ * an {@link RdxFieldState} provider on the ancestor Field context so the field's `invalid` / `disabled` /
+ * `required` / `dirty` / `touched` data-attributes and the error *content* (`rdxFieldError.messages()`)
+ * read authoritative Signal Forms state. `filled` / `focused` stay on Field's DOM heuristic (partial
+ * ownership — the seam supports it).
+ *
+ * It reports the **actual** Signal Forms state only; the `Field` decides *when* to display it from its
+ * `validationMode` (default `'onBlur'` — neutral until the field is touched or the form submitted). So an
+ * empty required field is neutral on load with no manual `[invalid]`/`[touched]` wiring, and a pristine
+ * submit reveals the errors (the `Form` records the submit attempt before checking validity and blocks).
+ *
+ * See ADR 0018.
+ *
+ * @group Components
+ */
+class RdxSignalField {
+    constructor() {
+        /** The co-located `[formField]` directive — the single source of the bound field's state. */
+        this.formField = inject(FormField);
+        this.fieldContext = injectFieldRootContext();
+        // The accessors are evaluated lazily by Field's `*State` computeds during change detection (after
+        // the `[formField]` binding resolves), so reading `state()` inside these closures is safe. The
+        // adapter reports authoritative *actual* state; the Field gates the *display* by its validationMode.
+        const state = {
+            invalid: () => this.state().invalid(),
+            disabled: () => this.state().disabled(),
+            required: () => this.state().required(),
+            dirty: () => this.state().dirty(),
+            touched: () => this.state().touched(),
+            errors: () => this.state()
+                .errors()
+                .map((error) => ({ kind: error.kind, message: error.message }))
+        };
+        const previous = this.fieldContext.setStateProvider(state);
+        // Identity-checked teardown: only roll back if our provider is still active, so a newer adapter
+        // mounted during a view swap (create-before-destroy) is not clobbered by this destroy.
+        inject(DestroyRef).onDestroy(() => this.fieldContext.clearStateProvider(state, previous));
+    }
+    /** Current Signal Forms field state, read from the co-located `[formField]` directive. */
+    state() {
+        return this.formField.state();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSignalField, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxSignalField, isStandalone: true, selector: "[formField][rdxSignalField]", exportAs: ["rdxSignalField"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSignalField, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[formField][rdxSignalField]',
+                    exportAs: 'rdxSignalField'
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Bridges an Angular **Signal Forms** form into an enclosing `form[rdxFormRoot]`.
+ *
+ * ```html
+ * <form rdxFormRoot [rdxSignalForm]="loginForm">
+ *   <!-- fields bound with [formField] (+ rdxSignalField) -->
+ * </form>
+ * ```
+ *
+ * Registers an {@link RdxFormState} provider so the Form's aggregate `data-invalid` / `data-dirty` /
+ * `data-touched` / `data-submitting` attributes and the submit guard read authoritative Signal Forms
+ * state. This adapter owns only client-side state and `name`-routing; server errors stay a separate
+ * eager channel applied through `rdxFormRoot[errors]`, and Signal Forms' own `submit()` owns the
+ * submit lifecycle.
+ *
+ * `errorsFor(name)` routes a field's errors to a `rdxFieldRoot` by its `name`, walking the `FieldTree`
+ * so dotted paths into nested object/array fields resolve too (`address.street`, `items.0.name`). A
+ * field can surface messages from the form alone — no per-field `rdxSignalField` needed for errors.
+ * These are the **two modes** (per-field adapter vs form-level name routing) — prefer one per field; if
+ * a field carries both, `rdxFieldError.messages()` deduplicates by text so the shared message is not
+ * shown twice.
+ *
+ * See ADR 0018.
+ *
+ * @group Components
+ */
+class RdxSignalForm {
+    constructor() {
+        /** The Signal Forms root field (from `form(...)`) whose aggregate state drives the enclosing Form. */
+        this.form = input.required({ ...(ngDevMode ? { debugName: "form" } : /* istanbul ignore next */ {}), alias: 'rdxSignalForm' });
+        this.formContext = injectFormRootContext();
+        const state = {
+            invalid: () => this.state().invalid(),
+            dirty: () => this.state().dirty(),
+            touched: () => this.state().touched(),
+            submitting: () => this.state().submitting(),
+            errorsFor: (name) => this.errorsFor(name),
+            // Per-name interaction state so a name-routed field (bare `[formField]`, no `rdxSignalField`)
+            // can reveal its error on blur/change under `validationMode="onBlur"`/`"onChange"`.
+            touchedFor: (name) => this.fieldState(name)?.touched() ?? false,
+            dirtyFor: (name) => this.fieldState(name)?.dirty() ?? false
+        };
+        const previous = this.formContext.setStateProvider(state);
+        // Identity-checked teardown: only roll back if our provider is still active, so a newer adapter
+        // mounted during a view swap (create-before-destroy) is not clobbered by this destroy.
+        inject(DestroyRef).onDestroy(() => this.formContext.clearStateProvider(state, previous));
+    }
+    /**
+     * Messages for the field at the dotted `name` path (`message ?? kind` per error). Walks the
+     * `FieldTree` so nested object/array fields resolve too — e.g. `address.street`, `items.0.name`.
+     */
+    errorsFor(name) {
+        return (this.fieldState(name)
+            ?.errors()
+            .map((error) => error.message ?? error.kind) ?? []);
+    }
+    /**
+     * The Signal Forms field *state* at the dotted `name` path, or `null` if it doesn't resolve. Walks the
+     * `FieldTree` so nested object/array fields work (`address.street`, `items.0.name`).
+     */
+    fieldState(name) {
+        let node = this.form();
+        for (const segment of name.split('.')) {
+            if (node == null || (typeof node !== 'object' && typeof node !== 'function')) {
+                return null;
+            }
+            // Only walk into own properties: a `FieldTree` exposes its subfields as own keys, so a
+            // segment that is not one (`constructor`, `__proto__`, `toString`, …) is not a real field.
+            // Reading it would resolve to an inherited member — and a function one would then be called
+            // below — so reject it instead.
+            if (!Object.hasOwn(node, segment)) {
+                return null;
+            }
+            node = node[segment];
+        }
+        return typeof node === 'function' ? node() : null;
+    }
+    /** The current Signal Forms root field state (a `FieldTree` is callable). */
+    state() {
+        return this.form()();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSignalForm, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxSignalForm, isStandalone: true, selector: "form[rdxFormRoot][rdxSignalForm]", inputs: { form: { classPropertyName: "form", publicName: "rdxSignalForm", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["rdxSignalForm"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSignalForm, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'form[rdxFormRoot][rdxSignalForm]',
+                    exportAs: 'rdxSignalForm'
+                }]
+        }], ctorParameters: () => [], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "rdxSignalForm", required: true }] }] } });
+
+const _importsSignalForms = [RdxSignalField, RdxSignalForm];
+class RdxSignalFormsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSignalFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: RdxSignalFormsModule, imports: [RdxSignalField, RdxSignalForm], exports: [RdxSignalField, RdxSignalForm] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSignalFormsModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSignalFormsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [..._importsSignalForms],
+                    exports: [..._importsSignalForms]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxSignalField, RdxSignalForm, RdxSignalFormsModule, _importsSignalForms };
+//# sourceMappingURL=radix-ng-primitives-signal-forms.mjs.map

package/fesm2022/radix-ng-primitives-signal-forms.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radix-ng-primitives-signal-forms.mjs","sources":["../../../packages/primitives/signal-forms/src/signal-field.ts","../../../packages/primitives/signal-forms/src/signal-form.ts","../../../packages/primitives/signal-forms/index.ts","../../../packages/primitives/signal-forms/radix-ng-primitives-signal-forms.ts"],"sourcesContent":["import { DestroyRef, Directive, inject } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { injectFieldRootContext, RdxFieldState } from '@radix-ng/primitives/field';\n\n/**\n * Bridges an Angular **Signal Forms** field into an enclosing `rdxFieldRoot` — with **no duplicate\n * binding**. Place it on the control that already carries `[formField]`; it reads the bound field's\n * state from that directive, so the field expression is written exactly once:\n *\n * ```html\n * <div rdxFieldRoot>\n *   <label rdxFieldLabel>Email</label>\n *   <input rdxInput [formField]=\"loginForm.email\" rdxSignalField />\n *   <p rdxFieldError>Email is required.</p>\n * </div>\n * ```\n *\n * It owns no model and runs no validation — Signal Forms remains the source of truth. It only registers\n * an {@link RdxFieldState} provider on the ancestor Field context so the field's `invalid` / `disabled` /\n * `required` / `dirty` / `touched` data-attributes and the error *content* (`rdxFieldError.messages()`)\n * read authoritative Signal Forms state. `filled` / `focused` stay on Field's DOM heuristic (partial\n * ownership — the seam supports it).\n *\n * It reports the **actual** Signal Forms state only; the `Field` decides *when* to display it from its\n * `validationMode` (default `'onBlur'` — neutral until the field is touched or the form submitted). So an\n * empty required field is neutral on load with no manual `[invalid]`/`[touched]` wiring, and a pristine\n * submit reveals the errors (the `Form` records the submit attempt before checking validity and blocks).\n *\n * See ADR 0018.\n *\n * @group Components\n */\n@Directive({\n    selector: '[formField][rdxSignalField]',\n    exportAs: 'rdxSignalField'\n})\nexport class RdxSignalField {\n    /** The co-located `[formField]` directive — the single source of the bound field's state. */\n    private readonly formField = inject(FormField);\n    private readonly fieldContext = injectFieldRootContext();\n\n    constructor() {\n        // The accessors are evaluated lazily by Field's `*State` computeds during change detection (after\n        // the `[formField]` binding resolves), so reading `state()` inside these closures is safe. The\n        // adapter reports authoritative *actual* state; the Field gates the *display* by its validationMode.\n        const state: RdxFieldState = {\n            invalid: () => this.state().invalid(),\n            disabled: () => this.state().disabled(),\n            required: () => this.state().required(),\n            dirty: () => this.state().dirty(),\n            touched: () => this.state().touched(),\n            errors: () =>\n                this.state()\n                    .errors()\n                    .map((error) => ({ kind: error.kind, message: error.message }))\n        };\n\n        const previous = this.fieldContext.setStateProvider(state);\n        // Identity-checked teardown: only roll back if our provider is still active, so a newer adapter\n        // mounted during a view swap (create-before-destroy) is not clobbered by this destroy.\n        inject(DestroyRef).onDestroy(() => this.fieldContext.clearStateProvider(state, previous));\n    }\n\n    /** Current Signal Forms field state, read from the co-located `[formField]` directive. */\n    private state() {\n        return this.formField.state();\n    }\n}\n","import { DestroyRef, Directive, inject, input } from '@angular/core';\nimport type { FieldTree } from '@angular/forms/signals';\nimport { injectFormRootContext, RdxFormState } from '@radix-ng/primitives/form';\n\n/** A Signal Forms subfield read structurally — callable to its state (`errors()` / `touched()` / `dirty()`). */\ntype NamedField = () => {\n    errors: () => readonly { kind: string; message?: string }[];\n    touched: () => boolean;\n    dirty: () => boolean;\n};\n\n/**\n * Bridges an Angular **Signal Forms** form into an enclosing `form[rdxFormRoot]`.\n *\n * ```html\n * <form rdxFormRoot [rdxSignalForm]=\"loginForm\">\n *   <!-- fields bound with [formField] (+ rdxSignalField) -->\n * </form>\n * ```\n *\n * Registers an {@link RdxFormState} provider so the Form's aggregate `data-invalid` / `data-dirty` /\n * `data-touched` / `data-submitting` attributes and the submit guard read authoritative Signal Forms\n * state. This adapter owns only client-side state and `name`-routing; server errors stay a separate\n * eager channel applied through `rdxFormRoot[errors]`, and Signal Forms' own `submit()` owns the\n * submit lifecycle.\n *\n * `errorsFor(name)` routes a field's errors to a `rdxFieldRoot` by its `name`, walking the `FieldTree`\n * so dotted paths into nested object/array fields resolve too (`address.street`, `items.0.name`). A\n * field can surface messages from the form alone — no per-field `rdxSignalField` needed for errors.\n * These are the **two modes** (per-field adapter vs form-level name routing) — prefer one per field; if\n * a field carries both, `rdxFieldError.messages()` deduplicates by text so the shared message is not\n * shown twice.\n *\n * See ADR 0018.\n *\n * @group Components\n */\n@Directive({\n    selector: 'form[rdxFormRoot][rdxSignalForm]',\n    exportAs: 'rdxSignalForm'\n})\nexport class RdxSignalForm {\n    /** The Signal Forms root field (from `form(...)`) whose aggregate state drives the enclosing Form. */\n    readonly form = input.required<FieldTree<unknown>>({ alias: 'rdxSignalForm' });\n\n    private readonly formContext = injectFormRootContext();\n\n    constructor() {\n        const state: RdxFormState = {\n            invalid: () => this.state().invalid(),\n            dirty: () => this.state().dirty(),\n            touched: () => this.state().touched(),\n            submitting: () => this.state().submitting(),\n            errorsFor: (name) => this.errorsFor(name),\n            // Per-name interaction state so a name-routed field (bare `[formField]`, no `rdxSignalField`)\n            // can reveal its error on blur/change under `validationMode=\"onBlur\"`/`\"onChange\"`.\n            touchedFor: (name) => this.fieldState(name)?.touched() ?? false,\n            dirtyFor: (name) => this.fieldState(name)?.dirty() ?? false\n        };\n\n        const previous = this.formContext.setStateProvider(state);\n        // Identity-checked teardown: only roll back if our provider is still active, so a newer adapter\n        // mounted during a view swap (create-before-destroy) is not clobbered by this destroy.\n        inject(DestroyRef).onDestroy(() => this.formContext.clearStateProvider(state, previous));\n    }\n\n    /**\n     * Messages for the field at the dotted `name` path (`message ?? kind` per error). Walks the\n     * `FieldTree` so nested object/array fields resolve too — e.g. `address.street`, `items.0.name`.\n     */\n    private errorsFor(name: string): string[] {\n        return (\n            this.fieldState(name)\n                ?.errors()\n                .map((error) => error.message ?? error.kind) ?? []\n        );\n    }\n\n    /**\n     * The Signal Forms field *state* at the dotted `name` path, or `null` if it doesn't resolve. Walks the\n     * `FieldTree` so nested object/array fields work (`address.street`, `items.0.name`).\n     */\n    private fieldState(name: string): ReturnType<NamedField> | null {\n        let node: unknown = this.form();\n        for (const segment of name.split('.')) {\n            if (node == null || (typeof node !== 'object' && typeof node !== 'function')) {\n                return null;\n            }\n            // Only walk into own properties: a `FieldTree` exposes its subfields as own keys, so a\n            // segment that is not one (`constructor`, `__proto__`, `toString`, …) is not a real field.\n            // Reading it would resolve to an inherited member — and a function one would then be called\n            // below — so reject it instead.\n            if (!Object.hasOwn(node, segment)) {\n                return null;\n            }\n            node = (node as Record<string, unknown>)[segment];\n        }\n        return typeof node === 'function' ? (node as NamedField)() : null;\n    }\n\n    /** The current Signal Forms root field state (a `FieldTree` is callable). */\n    private state() {\n        return this.form()();\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { RdxSignalField } from './src/signal-field';\nimport { RdxSignalForm } from './src/signal-form';\n\nexport * from './src/signal-field';\nexport * from './src/signal-form';\n\nexport const _importsSignalForms = [RdxSignalField, RdxSignalForm];\n\n@NgModule({\n    imports: [..._importsSignalForms],\n    exports: [..._importsSignalForms]\n})\nexport class RdxSignalFormsModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;MAKU,cAAc,CAAA;AAKvB,IAAA,WAAA,GAAA;;AAHiB,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;QAC7B,IAAA,CAAA,YAAY,GAAG,sBAAsB,EAAE;;;;AAMpD,QAAA,MAAM,KAAK,GAAkB;YACzB,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE;YACrC,QAAQ,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,QAAQ,EAAE;YACvC,QAAQ,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,QAAQ,EAAE;YACvC,KAAK,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE;YACjC,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE;AACrC,YAAA,MAAM,EAAE,MACJ,IAAI,CAAC,KAAK;AACL,iBAAA,MAAM;iBACN,GAAG,CAAC,CAAC,KAAK,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;SACzE;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,KAAK,CAAC;;;QAG1D,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC7F;;IAGQ,KAAK,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;IACjC;8GA9BS,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAJ1B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,6BAA6B;AACvC,oBAAA,QAAQ,EAAE;AACb,iBAAA;;;ACxBD;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;MAKU,aAAa,CAAA;AAMtB,IAAA,WAAA,GAAA;;QAJS,IAAA,CAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,2EAAuB,KAAK,EAAE,eAAe,EAAA,CAAG;QAE7D,IAAA,CAAA,WAAW,GAAG,qBAAqB,EAAE;AAGlD,QAAA,MAAM,KAAK,GAAiB;YACxB,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE;YACrC,KAAK,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE;YACjC,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE;YACrC,UAAU,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,UAAU,EAAE;YAC3C,SAAS,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;;;AAGzC,YAAA,UAAU,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,KAAK;AAC/D,YAAA,QAAQ,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI;SACzD;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,CAAC;;;QAGzD,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,kBAAkB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC5F;AAEA;;;AAGG;AACK,IAAA,SAAS,CAAC,IAAY,EAAA;AAC1B,QAAA,QACI,IAAI,CAAC,UAAU,CAAC,IAAI;AAChB,cAAE,MAAM;AACP,aAAA,GAAG,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE;IAE9D;AAEA;;;AAGG;AACK,IAAA,UAAU,CAAC,IAAY,EAAA;AAC3B,QAAA,IAAI,IAAI,GAAY,IAAI,CAAC,IAAI,EAAE;QAC/B,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;AACnC,YAAA,IAAI,IAAI,IAAI,IAAI,KAAK,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,UAAU,CAAC,EAAE;AAC1E,gBAAA,OAAO,IAAI;YACf;;;;;YAKA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE;AAC/B,gBAAA,OAAO,IAAI;YACf;AACA,YAAA,IAAI,GAAI,IAAgC,CAAC,OAAO,CAAC;QACrD;AACA,QAAA,OAAO,OAAO,IAAI,KAAK,UAAU,GAAI,IAAmB,EAAE,GAAG,IAAI;IACrE;;IAGQ,KAAK,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,IAAI,EAAE,EAAE;IACxB;8GA9DS,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kCAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBAJzB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,kCAAkC;AAC5C,oBAAA,QAAQ,EAAE;AACb,iBAAA;;;MCjCY,mBAAmB,GAAG,CAAC,cAAc,EAAE,aAAa;MAMpD,oBAAoB,CAAA;8GAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,YANG,cAAc,EAAE,aAAa,CAAA,EAAA,OAAA,EAAA,CAA7B,cAAc,EAAE,aAAa,CAAA,EAAA,CAAA,CAAA;+GAMpD,oBAAoB,EAAA,CAAA,CAAA;;2FAApB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAJhC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE,CAAC,GAAG,mBAAmB,CAAC;AACjC,oBAAA,OAAO,EAAE,CAAC,GAAG,mBAAmB;AACnC,iBAAA;;;ACZD;;AAEG;;;;"}

package/fesm2022/radix-ng-primitives-slider.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { inject, ElementRef, DestroyRef, Directive, computed, input, numberAttribute, booleanAttribute, model, output, signal, effect, afterNextRender, afterRenderEffect, untracked, NgModule } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import * as i2 from '@radix-ng/primitives/core';
-import { createContext, clamp, injectControlValueAccessor, injectDocument, injectId, createCancelableChangeEventDetails, RdxControlValueAccessor } from '@radix-ng/primitives/core';
+import { createContext, clamp, RdxFormUiControlBase, injectControlValueAccessor, injectDocument, injectId, createCancelableChangeEventDetails, provideFormUiState, RdxFormUiStateHost, RdxControlValueAccessor } from '@radix-ng/primitives/core';
 export { clamp } from '@radix-ng/primitives/core';
 import * as i1 from '@radix-ng/primitives/composite';
 import { RdxCompositeList, RdxCompositeListItem } from '@radix-ng/primitives/composite';
@@ -718,8 +718,12 @@ function cloneChangeEventWithTarget(event, value, name) {
  *
  * @see https://base-ui.com/react/components/slider
  */
-class RdxSliderRoot {
+// NOTE: does not `implements RdxFormValueControl` — the slider value is a `number | number[]` union,
+// while `min`/`max` are scalar `number`s; the shim ties `min`/`max` to `NonNullable<TValue>`, which the
+// union can't satisfy. The runtime contract (value model + the inherited `FormUiControl` state) holds.
+class RdxSliderRoot extends RdxFormUiControlBase {
     constructor() {
+        super(...arguments);
         /** @ignore */
         this.cva = injectControlValueAccessor();
         this.document = injectDocument();
@@ -935,6 +939,7 @@ class RdxSliderRoot {
         this.lastChangeEvent = eventDetails.event;
         this.value.set(next);
         this.cva.setValue(next);
+        this.formUi.markDirty();
         return true;
     }
     /** @ignore Keyboard / native input path: clamps to neighbours, commits immediately. */
@@ -948,7 +953,7 @@ class RdxSliderRoot {
         }
         const arr = Array.isArray(result) ? result : [result];
         const applied = this.setValue(arr, reason, event, index);
-        this.cva.markAsTouched();
+        this.markAsTouched();
         if (applied) {
             this.commitValue(event, reason);
         }
@@ -966,9 +971,13 @@ class RdxSliderRoot {
             }
         });
     }
-    /** @ignore */
+    /** @ignore Bridge the CVA into `markAsTouched` (dual). */
+    formUiTouchTarget() {
+        return injectControlValueAccessor();
+    }
+    /** @ignore Mark touched: CVA (Reactive/template) + `touched` model + `touch` (Signal Forms). */
     markAsTouched() {
-        this.cva.markAsTouched();
+        this.formUi.markAsTouched();
     }
     /** @ignore */
     setDragging(dragging) {
@@ -984,17 +993,24 @@ class RdxSliderRoot {
     getOwnerWindow() {
         return this.document.defaultView ?? undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSliderRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxSliderRoot, isStandalone: true, selector: "div[rdxSliderRoot]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenValues: { classPropertyName: "minStepsBetweenValues", publicName: "minStepsBetweenValues", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, thumbCollisionBehavior: { classPropertyName: "thumbCollisionBehavior", publicName: "thumbCollisionBehavior", isSignal: true, isRequired: false, transformFunction: null }, thumbAlignment: { classPropertyName: "thumbAlignment", publicName: "thumbAlignment", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange", onValueCommitted: "onValueCommitted" }, host: { attributes: { "role": "group" }, properties: { "id": "id()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.dir": "dir()", "attr.data-orientation": "orientation()", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-dragging": "dragging() ? \"\" : undefined" } }, providers: [provideSliderRootContext(() => inject(RdxSliderRoot))], exportAs: ["rdxSliderRoot"], hostDirectives: [{ directive: i1.RdxCompositeList }, { directive: i2.RdxControlValueAccessor, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSliderRoot, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxSliderRoot, isStandalone: true, selector: "div[rdxSliderRoot]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenValues: { classPropertyName: "minStepsBetweenValues", publicName: "minStepsBetweenValues", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, thumbCollisionBehavior: { classPropertyName: "thumbCollisionBehavior", publicName: "thumbCollisionBehavior", isSignal: true, isRequired: false, transformFunction: null }, thumbAlignment: { classPropertyName: "thumbAlignment", publicName: "thumbAlignment", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange", onValueCommitted: "onValueCommitted" }, host: { attributes: { "role": "group" }, properties: { "id": "id()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.dir": "dir()", "attr.data-orientation": "orientation()", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-dragging": "dragging() ? \"\" : undefined" } }, providers: [
+            provideSliderRootContext(() => inject(RdxSliderRoot)),
+            provideFormUiState(() => inject(RdxSliderRoot).formUi)
+        ], exportAs: ["rdxSliderRoot"], usesInheritance: true, hostDirectives: [{ directive: i1.RdxCompositeList }, { directive: i2.RdxFormUiStateHost }, { directive: i2.RdxControlValueAccessor, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSliderRoot, decorators: [{
             type: Directive,
             args: [{
                     selector: 'div[rdxSliderRoot]',
                     exportAs: 'rdxSliderRoot',
-                    providers: [provideSliderRootContext(() => inject(RdxSliderRoot))],
+                    providers: [
+                        provideSliderRootContext(() => inject(RdxSliderRoot)),
+                        provideFormUiState(() => inject(RdxSliderRoot).formUi)
+                    ],
                     hostDirectives: [
                         RdxCompositeList,
+                        RdxFormUiStateHost,
                         {
                             directive: RdxControlValueAccessor,
                             inputs: ['value: value', 'disabled']
@@ -1292,7 +1308,7 @@ class RdxSliderThumbInput {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSliderThumbInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxSliderThumbInput, isStandalone: true, selector: "input[rdxSliderThumbInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaValueTextInput: { classPropertyName: "ariaValueTextInput", publicName: "aria-valuetext", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "range" }, listeners: { "keydown": "onKeyDown($event)", "change": "onChange($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "id": "id()", "style.writing-mode": "writingMode()", "attr.min": "root.min()", "attr.max": "root.max()", "attr.step": "root.step()", "value": "thumb.value() ?? \"\"", "disabled": "thumb.disabled()", "attr.name": "root.name()", "attr.form": "root.form()", "attr.aria-orientation": "root.orientation()", "attr.aria-valuenow": "thumb.value()", "attr.aria-valuetext": "valueText()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.data-index": "thumb.index()" }, styleAttribute: "position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: inherit;" }, exportAs: ["rdxSliderThumbInput"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxSliderThumbInput, isStandalone: true, selector: "input[rdxSliderThumbInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaValueTextInput: { classPropertyName: "ariaValueTextInput", publicName: "aria-valuetext", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "range" }, listeners: { "keydown": "onKeyDown($event)", "change": "onChange($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "id": "id()", "style.writing-mode": "writingMode()", "attr.min": "root.min()", "attr.max": "root.max()", "attr.step": "root.step()", "value": "thumb.value() ?? \"\"", "disabled": "thumb.disabled()", "attr.name": "root.name()", "attr.form": "root.form()", "attr.aria-orientation": "root.orientation()", "attr.aria-valuenow": "thumb.value()", "attr.aria-valuetext": "valueText()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()" }, styleAttribute: "position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: inherit;" }, exportAs: ["rdxSliderThumbInput"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSliderThumbInput, decorators: [{
             type: Directive,
@@ -1316,7 +1332,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[attr.aria-valuetext]': 'valueText()',
                         '[attr.aria-label]': 'ariaLabel()',
                         '[attr.aria-labelledby]': 'ariaLabelledBy()',
-                        '[attr.data-index]': 'thumb.index()',
                         '(keydown)': 'onKeyDown($event)',
                         '(change)': 'onChange($event)',
                         '(focus)': 'onFocus()',