@radix-ng/primitives 1.1.0 → 1.1.1

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { inject, model, input, booleanAttribute, output, signal, computed, effect, Directive, ElementRef, Renderer2, DestroyRef, NgModule } from '@angular/core';
+import { inject, model, input, booleanAttribute, output, signal, computed, effect, Directive, ElementRef, DestroyRef, NgModule } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/core';
-import { createContext, RdxFormUiControlBase, createCancelableChangeEventDetails, provideValueAccessor, provideFormUiState, RdxFormUiStateHost, RdxControlValueAccessor, injectNgControlState, RDX_FIELD_VALIDITY } from '@radix-ng/primitives/core';
+import { createContext, RdxFormUiControlBase, useNativeFormControl, serializeNativeFormValue, createCancelableChangeEventDetails, provideValueAccessor, provideFormUiState, RdxFormUiStateHost, RdxControlValueAccessor, injectNgControlState, RDX_FIELD_VALIDITY } from '@radix-ng/primitives/core';
 
 const [injectCheckboxGroupContext, provideCheckboxGroupContext] = createContext('CheckboxGroupContext', 'components/checkbox');
 const groupContext = () => {
@@ -9,38 +9,45 @@ const groupContext = () => {
     return {
         value: group.value,
         allValues: group.allValues,
+        form: group.form,
         disabled: group.disabledState,
         parentState: group.parentState,
         controlledIds: group.controlledIds,
-        controlId: (name) => group.controlId(name),
-        toggleValue: (name, event) => group.toggleValue(name, event),
+        controlId: (value) => group.controlId(value),
+        toggleValue: (value, event) => group.toggleValue(value, event),
         toggleAll: (event) => group.toggleAll(event),
-        registerChild: (name, disabled) => group.registerChild(name, disabled),
-        registerControl: (name, id) => group.registerControl(name, id)
+        registerChild: (value, disabled) => group.registerChild(value, disabled),
+        registerControl: (value, id) => group.registerControl(value, id)
     };
 };
 let nextCheckboxGroupId = 0;
 /**
- * Groups a set of checkboxes that share a single array value (the names of the checked boxes).
+ * Groups a set of checkboxes that share a single array value (the values of the checked boxes).
  *
- * Each child `rdxCheckboxRoot` participates by its `name`. A child marked `parent` becomes a
- * "select all" checkbox whose state is derived from `allValues`.
+ * Each child `rdxCheckboxRoot` participates by its `value` (falling back to `name`). A child marked
+ * `parent` becomes a "select all" checkbox whose state is derived from `allValues`.
  */
 class RdxCheckboxGroupDirective extends RdxFormUiControlBase {
     constructor() {
         super();
-        /** The names of the currently checked checkboxes. Use with `onValueChange` or `[(value)]`. */
+        /** The values of the currently checked checkboxes. Use with `onValueChange` or `[(value)]`. */
         this.value = model([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-        /** The names checked initially when the group is uncontrolled. */
+        /** The values checked initially when the group is uncontrolled. */
         this.defaultValue = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : /* istanbul ignore next */ []));
-        /** All checkbox names in the group. Required for a `parent` (select-all) checkbox. */
+        /** All checkbox values in the group. Required for a `parent` (select-all) checkbox. */
         this.allValues = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "allValues" }] : /* istanbul ignore next */ []));
+        /** Native form field name. Selected values are submitted as repeated entries under this name. */
+        this.name = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+        /** Associates the group with an external form by id. */
+        this.form = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "form" }] : /* istanbul ignore next */ []));
         /** Whether the whole group is disabled. */
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Emits the new array of checked names whenever the value changes. */
+        /** Emits the new array of checked values whenever the value changes. */
         this.onValueChange = output();
         this.disabledByCva = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabledByCva" }] : /* istanbul ignore next */ []));
@@ -64,18 +71,18 @@ class RdxCheckboxGroupDirective extends RdxFormUiControlBase {
         this.seeded = false;
         /** Where the parent is in its mixed → on → off cycle. Reset to `mixed` on any direct child change. */
         this.parentStatus = 'mixed';
-        /** Per-name disabled signals, so the parent can preserve disabled-but-checked children. */
-        this.disabledByName = new Map();
+        /** Per-value disabled signals, so the parent can preserve disabled-but-checked children. */
+        this.disabledByValue = new Map();
         /** Stable group id used to derive child control ids when the consumer sets none. */
         this.elementId = `rdx-checkbox-group-${nextCheckboxGroupId++}`;
-        /** Registered control element ids, keyed by child name. */
+        /** Registered control element ids, keyed by child value. */
         this.controlIds = signal({}, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "controlIds" }] : /* istanbul ignore next */ []));
         /** The space-separated control ids in `allValues` order, for the parent's `aria-controls`. */
         this.controlledIds = computed(() => {
             const ids = this.controlIds();
             const list = this.allValues()
-                .map((name) => ids[name])
+                .map((value) => ids[value])
                 .filter((id) => id !== undefined);
             return list.length > 0 ? list.join(' ') : undefined;
         }, /* @ts-ignore */
@@ -87,6 +94,25 @@ class RdxCheckboxGroupDirective extends RdxFormUiControlBase {
         this.onTouched = () => {
             /* Empty */
         };
+        useNativeFormControl({
+            name: this.name,
+            form: this.form,
+            disabled: this.disabledState,
+            value: this.value,
+            serialize: serializeNativeFormValue,
+            defaultValue: () => [...(this.defaultValue() ?? this.value())],
+            onReset: (value) => {
+                const next = [...value];
+                this.value.set(next);
+                if (!this.resetNgControl(next)) {
+                    this.onChange(next);
+                }
+                this.seeded = false;
+                this.uncontrolledState = next;
+                this.parentStatus = 'mixed';
+                this.formUi.resetInteractionState?.();
+            }
+        });
         effect(() => {
             const defaultValue = this.defaultValue();
             if (!this.hasAppliedDefault && defaultValue !== undefined) {
@@ -99,40 +125,40 @@ class RdxCheckboxGroupDirective extends RdxFormUiControlBase {
     formUiTouchTarget() {
         return { markAsTouched: () => this.onTouched() };
     }
-    /** @ignore Register a child's disabled signal keyed by its name. */
-    registerChild(name, disabled) {
-        this.disabledByName.set(name, disabled);
+    /** @ignore Register a child's disabled signal keyed by its value. */
+    registerChild(value, disabled) {
+        this.disabledByValue.set(value, disabled);
         return () => {
-            if (this.disabledByName.get(name) === disabled) {
-                this.disabledByName.delete(name);
+            if (this.disabledByValue.get(value) === disabled) {
+                this.disabledByValue.delete(value);
             }
         };
     }
-    /** A stable control id for a child, derived from the group id and the child name. */
-    controlId(name) {
-        return `${this.elementId}-${name}`;
+    /** A stable control id for a child, derived from the group id and item value. */
+    controlId(value) {
+        return `${this.elementId}-${value}`;
     }
     /** @ignore Register a child's control element id so the parent can list it in `aria-controls`. */
-    registerControl(name, id) {
-        this.controlIds.update((ids) => ({ ...ids, [name]: id }));
+    registerControl(value, id) {
+        this.controlIds.update((ids) => ({ ...ids, [value]: id }));
         return () => {
             this.controlIds.update((ids) => {
-                if (ids[name] !== id) {
+                if (ids[value] !== id) {
                     return ids;
                 }
                 const next = { ...ids };
-                delete next[name];
+                delete next[value];
                 return next;
             });
         };
     }
-    /** Add/remove a single child name from the value (a direct child change). */
-    toggleValue(name, event) {
+    /** Add/remove a single child value from the group value (a direct child change). */
+    toggleValue(value, event) {
         if (this.disabledState()) {
             return;
         }
         const current = this.value();
-        const next = current.includes(name) ? current.filter((v) => v !== name) : [...current, name];
+        const next = current.includes(value) ? current.filter((item) => item !== value) : [...current, value];
         if (!this.emit(next, event)) {
             return;
         }
@@ -158,8 +184,8 @@ class RdxCheckboxGroupDirective extends RdxFormUiControlBase {
         const allValues = this.allValues();
         const remembered = this.uncontrolledState;
         // Disabled children that were checked stay checked through every transition.
-        const none = allValues.filter((name) => this.isNameDisabled(name) && remembered.includes(name));
-        const all = allValues.filter((name) => !this.isNameDisabled(name) || remembered.includes(name));
+        const none = allValues.filter((value) => this.isValueDisabled(value) && remembered.includes(value));
+        const all = allValues.filter((value) => !this.isValueDisabled(value) || remembered.includes(value));
         const rememberedIsAllOrNone = remembered.length === all.length || remembered.length === 0;
         if (rememberedIsAllOrNone) {
             this.emit(this.value().length === all.length ? none : all, event);
@@ -180,8 +206,8 @@ class RdxCheckboxGroupDirective extends RdxFormUiControlBase {
         }
         this.parentStatus = nextStatus;
     }
-    isNameDisabled(name) {
-        return this.disabledByName.get(name)?.() ?? false;
+    isValueDisabled(value) {
+        return this.disabledByValue.get(value)?.() ?? false;
     }
     /** Seed the remembered selection from the current value the first time the parent is used. */
     ensureSeeded() {
@@ -220,7 +246,7 @@ class RdxCheckboxGroupDirective extends RdxFormUiControlBase {
         this.disabledByCva.set(isDisabled);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxCheckboxGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxCheckboxGroupDirective, isStandalone: true, selector: "[rdxCheckboxGroup]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, allValues: { classPropertyName: "allValues", publicName: "allValues", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.data-disabled": "disabledState() ? \"\" : undefined" } }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxCheckboxGroupDirective, isStandalone: true, selector: "[rdxCheckboxGroup]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, allValues: { classPropertyName: "allValues", publicName: "allValues", 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 } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.data-disabled": "disabledState() ? \"\" : undefined" } }, providers: [
             provideValueAccessor(RdxCheckboxGroupDirective),
             provideCheckboxGroupContext(groupContext),
             provideFormUiState(() => inject(RdxCheckboxGroupDirective).formUi)
@@ -242,7 +268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[attr.data-disabled]': 'disabledState() ? "" : undefined'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], allValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "allValues", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], allValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "allValues", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }] } });
 
 function isIndeterminate(checked) {
     return checked === 'indeterminate';
@@ -259,10 +285,11 @@ const rootContext = () => {
         indeterminate: checkbox.indeterminateState,
         disabled: checkbox.disabledState,
         required: checkbox.required,
-        value: checkbox.submitValue,
-        name: checkbox.name,
+        value: checkbox.nativeValue,
+        name: checkbox.nativeName,
+        itemValue: checkbox.itemValue,
         parent: checkbox.parent,
-        form: checkbox.form,
+        form: checkbox.nativeForm,
         readonly: checkbox.readOnlyState,
         state: checkbox.state,
         invalidState: checkbox.invalidState,
@@ -270,6 +297,7 @@ const rootContext = () => {
         touchedState: checkbox.touchedState,
         dirtyState: checkbox.dirtyState,
         uncheckedValue: checkbox.uncheckedValue,
+        registerNativeInput: (input) => checkbox.registerNativeInput(input),
         toggle(event) {
             checkbox.toggle(event);
         }
@@ -283,11 +311,10 @@ class RdxCheckboxRootDirective {
     constructor() {
         this.controlValueAccessor = inject(RdxControlValueAccessor);
         this.ngControlState = injectNgControlState();
-        this.elementRef = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-        this.uncheckedInputElement = null;
         /** The group this checkbox belongs to, if it is rendered inside a `rdxCheckboxGroup`. */
         this.group = injectCheckboxGroupContext(true);
+        this.nativeInput = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nativeInput" }] : /* istanbul ignore next */ []));
         /**
          * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.
          *
@@ -319,11 +346,12 @@ class RdxCheckboxRootDirective {
          * Bound publicly as `[value]`; the TS member is named `submitValue` so the
          * directive can satisfy `RdxFormCheckboxControl`, whose contract reserves a
          * `value` member for `RdxFormValueControl` and forbids it on checkbox-style
-         * controls. (Checkbox is not yet marked `implements` — its `checked` is still
-         * `CheckedState`; see the `indeterminate` half of collision #1.)
+         * controls.
+         * When omitted, native submission uses the browser checkbox default (`on`). Inside a
+         * `rdxCheckboxGroup`, the child's `name` is used as a compatibility fallback.
          * @group Props
          */
-        this.submitValue = input('on', { ...(ngDevMode ? { debugName: "submitValue" } : /* istanbul ignore next */ {}), alias: 'value' });
+        this.submitValue = input(undefined, { ...(ngDevMode ? { debugName: "submitValue" } : /* istanbul ignore next */ {}), alias: 'value' });
         /**
          * The value submitted with the form when the checkbox is unchecked.
          * By default, unchecked checkboxes do not submit any value, matching native checkbox behavior.
@@ -374,8 +402,8 @@ class RdxCheckboxRootDirective {
         this.errors = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
         /**
-         * Name of the form control. Submitted with the form as part of a name/value pair. Inside a
-         * `rdxCheckboxGroup` this also identifies the checkbox in the group's value array.
+         * Name of a standalone form control. Inside a `rdxCheckboxGroup`, prefer `[value]` to identify
+         * the item; `name` remains a compatibility fallback for existing group templates.
          * @group Props
          */
         this.name = input(/* @ts-ignore */
@@ -392,6 +420,18 @@ class RdxCheckboxRootDirective {
          */
         this.form = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "form" }] : /* istanbul ignore next */ []));
+        /** @ignore Item identity inside a checkbox group (`value`, falling back to the legacy child name). */
+        this.itemValue = computed(() => this.submitValue() ?? this.name(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemValue" }] : /* istanbul ignore next */ []));
+        /** @ignore Native checkbox value; browsers default an omitted checkbox value to `on`. */
+        this.nativeValue = computed(() => this.submitValue() ?? 'on', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nativeValue" }] : /* istanbul ignore next */ []));
+        /** @ignore A checkbox group owns the successful-control name and serializes its children centrally. */
+        this.nativeName = computed(() => (this.group || this.parent() ? undefined : this.name()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nativeName" }] : /* istanbul ignore next */ []));
+        /** @ignore Child native inputs inherit an external form association from their checkbox group. */
+        this.nativeForm = computed(() => this.group?.form() ?? this.form(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nativeForm" }] : /* istanbul ignore next */ []));
         /**
          * Event emitted when the checkbox checked state changes.
          * @group Emits
@@ -405,8 +445,8 @@ class RdxCheckboxRootDirective {
         /**
          * @ignore
          * The effective checked state as a `boolean`. Inside a `rdxCheckboxGroup` it is derived from the
-         * group (a `parent` checkbox is checked only when every child is; a child from whether its `name`
-         * is in the group value); standalone it reads the CVA value.
+         * group (a `parent` checkbox is checked only when every child is; a child from whether its item
+         * value is in the group value); standalone it reads the CVA value.
          */
         this.checkedState = computed(() => {
             const group = this.group;
@@ -414,9 +454,9 @@ class RdxCheckboxRootDirective {
                 if (this.parent()) {
                     return group.parentState() === true;
                 }
-                const name = this.name();
-                if (name !== undefined) {
-                    return group.value().includes(name);
+                const value = this.itemValue();
+                if (value !== undefined) {
+                    return group.value().includes(value);
                 }
             }
             return !!this.controlValueAccessor.value();
@@ -489,13 +529,45 @@ class RdxCheckboxRootDirective {
         ...(ngDevMode ? [{ debugName: "dirtyState" }] : /* istanbul ignore next */ []));
         this.state = computed(() => this.indeterminateState() ? 'indeterminate' : this.checkedState() ? 'checked' : 'unchecked', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-        // Inside a group, register this child's name and its own disabled state so a `parent`
+        this.nativeInputOwnsValue = computed(() => this.nativeInput() !== null && (this.checkedState() || this.uncheckedValue() === undefined), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nativeInputOwnsValue" }] : /* istanbul ignore next */ []));
+        useNativeFormControl({
+            name: this.nativeName,
+            form: this.nativeForm,
+            disabled: this.disabledState,
+            value: this.checkedState,
+            serialize: (checked) => {
+                const value = checked ? this.nativeValue() : this.uncheckedValue();
+                return value === undefined ? [] : [value];
+            },
+            hasNativeControl: this.nativeInputOwnsValue,
+            syncNativeControl: () => {
+                const input = this.nativeInput();
+                if (input) {
+                    input.checked = this.checkedState();
+                    input.indeterminate = this.indeterminateState();
+                }
+            },
+            defaultValue: () => this.defaultChecked() ?? this.checkedState(),
+            onReset: (value) => {
+                if (this.group || this.parent()) {
+                    return;
+                }
+                this.indeterminate.set(false);
+                this.checked.set(value);
+                if (!this.ngControlState.reset(value)) {
+                    this.controlValueAccessor.writeValue(value);
+                }
+                this.reset();
+            }
+        });
+        // Inside a group, register this child's item value and its own disabled state so a `parent`
         // checkbox can preserve disabled-but-checked children when selecting/deselecting all.
         effect((onCleanup) => {
             const group = this.group;
-            const name = this.name();
-            if (group && !this.parent() && name !== undefined) {
-                onCleanup(group.registerChild(name, this.controlValueAccessor.disabled));
+            const value = this.itemValue();
+            if (group && !this.parent() && value !== undefined) {
+                onCleanup(group.registerChild(value, this.controlValueAccessor.disabled));
             }
         });
         let hasAppliedDefault = false;
@@ -507,9 +579,6 @@ class RdxCheckboxRootDirective {
                 this.controlValueAccessor.setValue(defaultChecked);
             }
         });
-        effect(() => {
-            this.syncUncheckedInput();
-        });
         // Reactive/template-driven forms own their NgControl interaction state. Signal Forms instead
         // writes the public touched/dirty members, so standalone controls retain the existing fallback.
         effect(() => {
@@ -524,9 +593,6 @@ class RdxCheckboxRootDirective {
                 this.dirtyValue.set(false);
             }
         }, { debugName: 'RdxCheckboxRoot.syncInteractionState' });
-        inject(DestroyRef).onDestroy(() => {
-            this.removeUncheckedInput();
-        });
     }
     toggle(event) {
         if (this.disabledState() || this.readOnlyState()) {
@@ -538,9 +604,9 @@ class RdxCheckboxRootDirective {
                 group.toggleAll(event);
                 return;
             }
-            const name = this.name();
-            if (name !== undefined) {
-                group.toggleValue(name, event);
+            const value = this.itemValue();
+            if (value !== undefined) {
+                group.toggleValue(value, event);
                 return;
             }
         }
@@ -571,60 +637,14 @@ class RdxCheckboxRootDirective {
         this.touched.set(false);
         this.dirtyValue.set(false);
     }
-    syncUncheckedInput() {
-        const name = this.name();
-        const uncheckedValue = this.uncheckedValue();
-        const shouldRender = !this.checkedState() && !this.group && !this.parent() && name !== undefined && uncheckedValue !== undefined;
-        if (!shouldRender) {
-            this.removeUncheckedInput();
-            return;
-        }
-        const input = this.ensureUncheckedInput();
-        this.renderer.setAttribute(input, 'type', 'hidden');
-        this.renderer.setAttribute(input, 'name', name);
-        this.renderer.setAttribute(input, 'value', uncheckedValue);
-        this.setOptionalAttribute(input, 'form', this.form());
-        this.setBooleanAttribute(input, 'disabled', this.disabledState());
-    }
-    ensureUncheckedInput() {
-        if (this.uncheckedInputElement) {
-            return this.uncheckedInputElement;
-        }
-        const host = this.elementRef.nativeElement;
-        const parent = host.parentNode;
-        const input = this.renderer.createElement('input');
-        if (parent) {
-            this.renderer.insertBefore(parent, input, host.nextSibling);
-        }
-        this.uncheckedInputElement = input;
-        return input;
-    }
-    removeUncheckedInput() {
-        const input = this.uncheckedInputElement;
-        if (!input) {
-            return;
-        }
-        const parent = input.parentNode;
-        if (parent) {
-            this.renderer.removeChild(parent, input);
-        }
-        this.uncheckedInputElement = null;
-    }
-    setOptionalAttribute(element, name, value) {
-        if (value) {
-            this.renderer.setAttribute(element, name, value);
-        }
-        else {
-            this.renderer.removeAttribute(element, name);
-        }
-    }
-    setBooleanAttribute(element, name, value) {
-        if (value) {
-            this.renderer.setAttribute(element, name, '');
-        }
-        else {
-            this.renderer.removeAttribute(element, name);
-        }
+    /** @ignore Register the optional native checkbox so it owns checked-value serialization. */
+    registerNativeInput(input) {
+        this.nativeInput.set(input);
+        return () => {
+            if (this.nativeInput() === input) {
+                this.nativeInput.set(null);
+            }
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxCheckboxRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxCheckboxRootDirective, isStandalone: true, selector: "[rdxCheckboxRoot]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, defaultChecked: { classPropertyName: "defaultChecked", publicName: "defaultChecked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, submitValue: { classPropertyName: "submitValue", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, uncheckedValue: { classPropertyName: "uncheckedValue", publicName: "uncheckedValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", indeterminate: "indeterminateChange", touched: "touchedChange", onCheckedChange: "onCheckedChange", touch: "touch" }, host: { properties: { "attr.data-checked": "checkedState() && !indeterminateState() ? \"\" : undefined", "attr.data-unchecked": "!checkedState() && !indeterminateState() ? \"\" : undefined", "attr.data-indeterminate": "indeterminateState() ? \"\" : undefined", "attr.data-disabled": "disabledState() ? \"\" : undefined", "attr.data-readonly": "readOnlyState() ? \"\" : undefined", "attr.data-required": "required() ? \"\" : undefined", "attr.data-invalid": "displayValid() === false ? \"\" : undefined", "attr.data-valid": "displayValid() === true ? \"\" : undefined", "attr.data-touched": "touchedState() ? \"\" : undefined", "attr.data-dirty": "dirtyState() ? \"\" : undefined" } }, providers: [provideCheckboxRootContext(rootContext)], hostDirectives: [{ directive: i1.RdxControlValueAccessor, inputs: ["value", "checked", "disabled", "disabled"] }], ngImport: i0 }); }
@@ -673,15 +693,15 @@ class RdxCheckboxButtonDirective {
         // `aria-controls`. Use the consumer's id when present, otherwise derive a stable one.
         effect((onCleanup) => {
             const group = this.group;
-            const name = this.rootContext.name();
-            if (!group || this.rootContext.parent() || name === undefined) {
+            const value = this.rootContext.itemValue();
+            if (!group || this.rootContext.parent() || value === undefined) {
                 return;
             }
             const el = this.elementRef.nativeElement;
             if (!el.id) {
-                el.id = group.controlId(name);
+                el.id = group.controlId(value);
             }
-            onCleanup(group.registerControl(name, el.id));
+            onCleanup(group.registerControl(value, el.id));
         });
     }
     clicked(event) {
@@ -763,6 +783,8 @@ class RdxCheckboxInputDirective {
     constructor() {
         this.rootContext = injectCheckboxRootContext();
         this.input = inject(ElementRef).nativeElement;
+        const unregister = this.rootContext.registerNativeInput(this.input);
+        inject(DestroyRef).onDestroy(unregister);
         let isInitial = true;
         /**
          * Keeps the hidden native input in sync so form submission, native