@radix-ng/primitives 0.51.0 → 1.0.0-beta.0

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

@@ -1,11 +1,219 @@
 import * as i0 from '@angular/core';
-import { inject, model, input, booleanAttribute, computed, Directive, ElementRef, DestroyRef, afterNextRender, NgModule } from '@angular/core';
-import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
+import { inject, model, input, booleanAttribute, output, signal, computed, effect, Directive, ElementRef, NgModule } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/core';
-import { RdxControlValueAccessor, createContext } from '@radix-ng/primitives/core';
+import { createContext, provideValueAccessor, RdxControlValueAccessor } from '@radix-ng/primitives/core';
+import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@radix-ng/primitives/presence';
 import { provideRdxPresenceContext, RdxPresenceDirective } from '@radix-ng/primitives/presence';
 
+const [injectCheckboxGroupContext, provideCheckboxGroupContext] = createContext('CheckboxGroupContext');
+const groupContext = () => {
+    const group = inject(RdxCheckboxGroupDirective);
+    return {
+        value: group.value,
+        allValues: group.allValues,
+        disabled: group.disabledState,
+        parentState: group.parentState,
+        controlledIds: group.controlledIds,
+        controlId: (name) => group.controlId(name),
+        toggleValue: (name) => group.toggleValue(name),
+        toggleAll: () => group.toggleAll(),
+        registerChild: (name, disabled) => group.registerChild(name, disabled),
+        registerControl: (name, id) => group.registerControl(name, id)
+    };
+};
+let nextCheckboxGroupId = 0;
+/**
+ * Groups a set of checkboxes that share a single array value (the names 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`.
+ */
+class RdxCheckboxGroupDirective {
+    constructor() {
+        /** The names of the currently checked checkboxes. Use with `onValueChange` or `[(value)]`. */
+        this.value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** The names checked initially when the group is uncontrolled. */
+        this.defaultValue = input(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+        /** All checkbox names in the group. Required for a `parent` (select-all) checkbox. */
+        this.allValues = input([], ...(ngDevMode ? [{ debugName: "allValues" }] : /* 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. */
+        this.onValueChange = output();
+        this.disabledByCva = signal(false, ...(ngDevMode ? [{ debugName: "disabledByCva" }] : /* istanbul ignore next */ []));
+        this.disabledState = computed(() => this.disabledByCva() || this.disabled(), ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        /** Derived state for a `parent` checkbox: `true` (all), `false` (none) or `'indeterminate'`. */
+        this.parentState = computed(() => {
+            const total = this.allValues().length;
+            const count = this.value().length;
+            if (total > 0 && count === total) {
+                return true;
+            }
+            return count > 0 ? 'indeterminate' : false;
+        }, ...(ngDevMode ? [{ debugName: "parentState" }] : /* istanbul ignore next */ []));
+        /**
+         * The value as last set directly by a child (or the initial value) — the "remembered" partial
+         * selection that a `parent` checkbox cycles back to, mirroring Base UI's `uncontrolledStateRef`.
+         */
+        this.uncontrolledState = [];
+        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();
+        /** 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. */
+        this.controlIds = signal({}, ...(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])
+                .filter((id) => id !== undefined);
+            return list.length > 0 ? list.join(' ') : undefined;
+        }, ...(ngDevMode ? [{ debugName: "controlledIds" }] : /* istanbul ignore next */ []));
+        this.hasAppliedDefault = false;
+        this.onChange = () => {
+            /* Empty */
+        };
+        this.onTouched = () => {
+            /* Empty */
+        };
+        effect(() => {
+            const defaultValue = this.defaultValue();
+            if (!this.hasAppliedDefault && defaultValue !== undefined) {
+                this.hasAppliedDefault = true;
+                this.value.set(defaultValue);
+            }
+        });
+    }
+    /** @ignore Register a child's disabled signal keyed by its name. */
+    registerChild(name, disabled) {
+        this.disabledByName.set(name, disabled);
+        return () => {
+            if (this.disabledByName.get(name) === disabled) {
+                this.disabledByName.delete(name);
+            }
+        };
+    }
+    /** A stable control id for a child, derived from the group id and the child name. */
+    controlId(name) {
+        return `${this.elementId}-${name}`;
+    }
+    /** @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 }));
+        return () => {
+            this.controlIds.update((ids) => {
+                if (ids[name] !== id) {
+                    return ids;
+                }
+                const next = { ...ids };
+                delete next[name];
+                return next;
+            });
+        };
+    }
+    /** Add/remove a single child name from the value (a direct child change). */
+    toggleValue(name) {
+        if (this.disabledState()) {
+            return;
+        }
+        const current = this.value();
+        const next = current.includes(name) ? current.filter((v) => v !== name) : [...current, name];
+        this.emit(next);
+        // A direct child change becomes the new "remembered" selection and resets the parent cycle.
+        this.seeded = true;
+        this.uncontrolledState = next;
+        this.parentStatus = 'mixed';
+    }
+    /**
+     * Toggle from the `parent` checkbox. Mirrors Base UI's `useCheckboxGroupParent`:
+     *
+     * - When the remembered selection is all/none, this is a plain check-all ↔ uncheck-all toggle.
+     * - When it is a partial selection, clicks cycle: partial → all → none → partial → …, so the
+     *   user's original partial choice is restored rather than lost.
+     *
+     * Disabled-but-checked children are always preserved (they cannot be toggled programmatically).
+     */
+    toggleAll() {
+        if (this.disabledState()) {
+            return;
+        }
+        this.ensureSeeded();
+        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 rememberedIsAllOrNone = remembered.length === all.length || remembered.length === 0;
+        if (rememberedIsAllOrNone) {
+            this.emit(this.value().length === all.length ? none : all);
+            return;
+        }
+        let nextStatus = 'mixed';
+        let nextValue = remembered;
+        if (this.parentStatus === 'mixed') {
+            nextStatus = 'on';
+            nextValue = all;
+        }
+        else if (this.parentStatus === 'on') {
+            nextStatus = 'off';
+            nextValue = none;
+        }
+        this.emit(nextValue);
+        this.parentStatus = nextStatus;
+    }
+    isNameDisabled(name) {
+        return this.disabledByName.get(name)?.() ?? false;
+    }
+    /** Seed the remembered selection from the current value the first time the parent is used. */
+    ensureSeeded() {
+        if (!this.seeded) {
+            this.seeded = true;
+            this.uncontrolledState = this.value();
+        }
+    }
+    emit(next) {
+        this.value.set(next);
+        this.onValueChange.emit(next);
+        this.onChange(next);
+        this.onTouched();
+    }
+    /** @ignore */
+    writeValue(value) {
+        this.value.set(value ?? []);
+    }
+    /** @ignore */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /** @ignore */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /** @ignore */
+    setDisabledState(isDisabled) {
+        this.disabledByCva.set(isDisabled);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCheckboxGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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: [provideValueAccessor(RdxCheckboxGroupDirective), provideCheckboxGroupContext(groupContext)], exportAs: ["rdxCheckboxGroup"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCheckboxGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxCheckboxGroup]',
+                    exportAs: 'rdxCheckboxGroup',
+                    providers: [provideValueAccessor(RdxCheckboxGroupDirective), provideCheckboxGroupContext(groupContext)],
+                    host: {
+                        role: 'group',
+                        '[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"] }] } });
+
 function isIndeterminate(checked) {
     return checked === 'indeterminate';
 }
@@ -14,13 +222,16 @@ function getState(checked) {
 }
 const rootContext = () => {
     const checkbox = inject(RdxCheckboxRootDirective);
-    const controlValueAccessor = inject(RdxControlValueAccessor);
+    // `checked`/`disabled` come from the directive so they reflect group membership when the
+    // checkbox is inside a `rdxCheckboxGroup`; otherwise they fall back to the CVA.
     return {
-        checked: controlValueAccessor.value,
-        disabled: controlValueAccessor.disabled,
+        checked: checkbox.checkedState,
+        indeterminate: checkbox.indeterminateState,
+        disabled: checkbox.disabledState,
         required: checkbox.required,
-        value: checkbox.value,
+        value: checkbox.submitValue,
         name: checkbox.name,
+        parent: checkbox.parent,
         form: checkbox.form,
         readonly: checkbox.readonly,
         state: checkbox.state,
@@ -36,16 +247,41 @@ const [injectCheckboxRootContext, provideCheckboxRootContext] = createContext('C
 class RdxCheckboxRootDirective {
     constructor() {
         this.controlValueAccessor = inject(RdxControlValueAccessor);
+        /** The group this checkbox belongs to, if it is rendered inside a `rdxCheckboxGroup`. */
+        this.group = injectCheckboxGroupContext(true);
+        /**
+         * @ignore
+         * Reflects the effective disabled state (CVA, covering reactive-forms `.disable()`, plus the
+         * group's disabled state), used for the `data-disabled` host attribute.
+         */
+        this.isDisabled = computed(() => this.disabledState(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
         /**
          * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.
+         *
+         * Mixed state is no longer expressed through `checked` — use the separate
+         * `indeterminate` input (Base UI shape). This `boolean` model is what
+         * `RdxFormCheckboxControl` / Angular Signal Forms bind to.
          * @group Props
          */
         this.checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the checkbox is in a mixed state: neither ticked nor unticked.
+         * Orthogonal to `checked` and not part of the submitted form value. A user
+         * click resolves the checkbox to `checked` and clears `indeterminate`.
+         * @group Props
+         */
+        this.indeterminate = model(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
         /**
          * The value of the checkbox. This is what is submitted with the form when the checkbox is checked.
+         *
+         * 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.)
          * @group Props
          */
-        this.value = input('on', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.submitValue = input('on', { ...(ngDevMode ? { debugName: "submitValue" } : /* istanbul ignore next */ {}), alias: 'value' });
         /**
          * Whether or not the checkbox button is disabled. This prevents the user from interacting with it.
          * @group Props
@@ -62,10 +298,17 @@ class RdxCheckboxRootDirective {
          */
         this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * Name of the form control. Submitted with the form as part of a name/value pair.
+         * 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.
          * @group Props
          */
         this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+        /**
+         * When inside a `rdxCheckboxGroup`, marks this as the "select all" checkbox: its state is
+         * derived from the group's `allValues`, and toggling it checks or unchecks every child.
+         * @group Props
+         */
+        this.parent = input(false, { ...(ngDevMode ? { debugName: "parent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Associates the control with a form element.
          * @group Props
@@ -76,23 +319,74 @@ class RdxCheckboxRootDirective {
          * @group Emits
          */
         this.onCheckedChange = outputFromObservable(outputToObservable(this.controlValueAccessor.valueChange));
-        this.state = computed(() => {
-            const checked = this.controlValueAccessor.value();
-            if (checked === 'indeterminate') {
-                return checked;
+        /**
+         * @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.
+         */
+        this.checkedState = computed(() => {
+            const group = this.group;
+            if (group) {
+                if (this.parent()) {
+                    return group.parentState() === true;
+                }
+                const name = this.name();
+                if (name !== undefined) {
+                    return group.value().includes(name);
+                }
+            }
+            return !!this.controlValueAccessor.value();
+        }, ...(ngDevMode ? [{ debugName: "checkedState" }] : /* istanbul ignore next */ []));
+        /**
+         * @ignore
+         * The effective mixed state. A `parent` checkbox is indeterminate when some — but not all —
+         * children are checked; otherwise it follows the `indeterminate` input.
+         */
+        this.indeterminateState = computed(() => {
+            const group = this.group;
+            if (group && this.parent()) {
+                return group.parentState() === 'indeterminate';
+            }
+            return this.indeterminate();
+        }, ...(ngDevMode ? [{ debugName: "indeterminateState" }] : /* istanbul ignore next */ []));
+        /** @ignore The effective disabled state, including the group. */
+        this.disabledState = computed(() => this.controlValueAccessor.disabled() || (this.group?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        this.state = computed(() => this.indeterminateState() ? 'indeterminate' : this.checkedState() ? 'checked' : 'unchecked', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        // Inside a group, register this child's name 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));
             }
-            return checked ? 'checked' : 'unchecked';
-        }, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        });
     }
     toggle() {
-        const checked = this.controlValueAccessor.value();
-        if (checked === 'indeterminate') {
-            this.controlValueAccessor.setValue(true);
+        const group = this.group;
+        if (group) {
+            if (this.parent()) {
+                group.toggleAll();
+                return;
+            }
+            const name = this.name();
+            if (name !== undefined) {
+                group.toggleValue(name);
+                return;
+            }
         }
-        this.controlValueAccessor.setValue(!checked);
+        // From the indeterminate state a click resolves to checked (matching
+        // native + Base UI), otherwise it flips the boolean. A single setValue so
+        // onCheckedChange fires once; the `checked`/`indeterminate` models are
+        // kept in sync so `[(checked)]` / `[(indeterminate)]` reflect the change.
+        const next = this.indeterminateState() ? true : !this.checkedState();
+        this.indeterminate.set(false);
+        this.checked.set(next);
+        this.controlValueAccessor.setValue(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCheckboxRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxCheckboxRootDirective, isStandalone: true, selector: "[rdxCheckboxRoot]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", onCheckedChange: "onCheckedChange" }, host: { properties: { "attr.data-state": "state()" } }, providers: [provideCheckboxRootContext(rootContext)], hostDirectives: [{ directive: i1.RdxControlValueAccessor, inputs: ["value", "checked", "disabled", "disabled"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxCheckboxRootDirective, isStandalone: true, selector: "[rdxCheckboxRoot]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", 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 }, 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 }, 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", onCheckedChange: "onCheckedChange" }, host: { properties: { "attr.data-state": "state()", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-readonly": "readonly() ? \"\" : undefined", "attr.data-required": "required() ? \"\" : undefined" } }, providers: [provideCheckboxRootContext(rootContext)], hostDirectives: [{ directive: i1.RdxControlValueAccessor, inputs: ["value", "checked", "disabled", "disabled"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCheckboxRootDirective, decorators: [{
             type: Directive,
@@ -106,10 +400,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         }
                     ],
                     host: {
-                        '[attr.data-state]': 'state()'
+                        '[attr.data-state]': 'state()',
+                        '[attr.data-disabled]': 'isDisabled() ? "" : undefined',
+                        '[attr.data-readonly]': 'readonly() ? "" : undefined',
+                        '[attr.data-required]': 'required() ? "" : undefined'
                     }
                 }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], onCheckedChange: [{ type: i0.Output, args: ["onCheckedChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], submitValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], parent: [{ type: i0.Input, args: [{ isSignal: true, alias: "parent", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], onCheckedChange: [{ type: i0.Output, args: ["onCheckedChange"] }] } });
 
 /**
  * Directive: rdxCheckboxButton
@@ -120,7 +417,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxCheckboxButtonDirective {
     constructor() {
         this.rootContext = injectCheckboxRootContext();
+        this.group = injectCheckboxGroupContext(true);
         this.elementRef = inject(ElementRef);
+        /** A `parent` checkbox lists the ids of the children it controls. */
+        this.ariaControls = computed(() => this.group && this.rootContext.parent() ? this.group.controlledIds() : undefined, ...(ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []));
+        // A child checkbox in a group exposes its control id so the parent can reference it via
+        // `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) {
+                return;
+            }
+            const el = this.elementRef.nativeElement;
+            if (!el.id) {
+                el.id = group.controlId(name);
+            }
+            onCleanup(group.registerControl(name, el.id));
+        });
     }
     clicked(event) {
         if (event.defaultPrevented || this.rootContext.readonly()) {
@@ -135,7 +449,7 @@ class RdxCheckboxButtonDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCheckboxButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxCheckboxButtonDirective, isStandalone: true, selector: "button[rdxCheckboxButton]", host: { attributes: { "type": "button", "role": "checkbox" }, listeners: { "click": "clicked($event)", "keydown.enter": "$event.preventDefault()" }, properties: { "attr.aria-checked": "rootContext.checked() === \"indeterminate\" ? \"mixed\" : rootContext.checked()", "attr.aria-required": "rootContext.required() || undefined", "attr.aria-readonly": "rootContext.readonly() || undefined", "attr.data-state": "rootContext.state()", "attr.data-disabled": "rootContext.disabled() || undefined", "attr.data-readonly": "rootContext.readonly() || undefined", "attr.disabled": "rootContext.disabled() ? \"\" : undefined", "attr.value": "rootContext.value()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxCheckboxButtonDirective, isStandalone: true, selector: "button[rdxCheckboxButton]", host: { attributes: { "type": "button", "role": "checkbox" }, listeners: { "click": "clicked($event)", "keydown.enter": "$event.preventDefault()" }, properties: { "attr.aria-checked": "rootContext.indeterminate() ? \"mixed\" : rootContext.checked()", "attr.aria-controls": "ariaControls()", "attr.aria-required": "rootContext.required() || undefined", "attr.aria-readonly": "rootContext.readonly() || undefined", "attr.data-state": "rootContext.state()", "attr.data-disabled": "rootContext.disabled() ? \"\" : undefined", "attr.data-readonly": "rootContext.readonly() ? \"\" : undefined", "attr.disabled": "rootContext.disabled() ? \"\" : undefined", "attr.value": "rootContext.value()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCheckboxButtonDirective, decorators: [{
             type: Directive,
@@ -144,12 +458,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     host: {
                         type: 'button',
                         role: 'checkbox',
-                        '[attr.aria-checked]': 'rootContext.checked() === "indeterminate" ? "mixed" : rootContext.checked()',
+                        '[attr.aria-checked]': 'rootContext.indeterminate() ? "mixed" : rootContext.checked()',
+                        '[attr.aria-controls]': 'ariaControls()',
                         '[attr.aria-required]': 'rootContext.required() || undefined',
                         '[attr.aria-readonly]': 'rootContext.readonly() || undefined',
                         '[attr.data-state]': 'rootContext.state()',
-                        '[attr.data-disabled]': 'rootContext.disabled() || undefined',
-                        '[attr.data-readonly]': 'rootContext.readonly() || undefined',
+                        '[attr.data-disabled]': 'rootContext.disabled() ? "" : undefined',
+                        '[attr.data-readonly]': 'rootContext.readonly() ? "" : undefined',
                         '[attr.disabled]': 'rootContext.disabled() ? "" : undefined',
                         '[attr.value]': 'rootContext.value()',
                         '(click)': 'clicked($event)',
@@ -157,14 +472,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '(keydown.enter)': '$event.preventDefault()'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class RdxCheckboxIndicatorDirective {
     constructor() {
         this.rootContext = injectCheckboxRootContext();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCheckboxIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxCheckboxIndicatorDirective, isStandalone: true, selector: "[rdxCheckboxIndicator]", host: { properties: { "attr.data-state": "rootContext.state()", "attr.data-disabled": "rootContext.disabled() ? \"\" : undefined", "hidden": "!rootContext.checked()", "style.pointer-events": "\"none\"" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxCheckboxIndicatorDirective, isStandalone: true, selector: "[rdxCheckboxIndicator]", host: { properties: { "attr.data-state": "rootContext.state()", "attr.data-disabled": "rootContext.disabled() ? \"\" : undefined", "hidden": "!rootContext.checked() && !rootContext.indeterminate()", "style.pointer-events": "\"none\"" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCheckboxIndicatorDirective, decorators: [{
             type: Directive,
@@ -173,7 +488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     host: {
                         '[attr.data-state]': 'rootContext.state()',
                         '[attr.data-disabled]': 'rootContext.disabled() ? "" : undefined',
-                        '[hidden]': '!rootContext.checked()',
+                        '[hidden]': '!rootContext.checked() && !rootContext.indeterminate()',
                         '[style.pointer-events]': '"none"'
                     }
                 }]
@@ -185,7 +500,7 @@ class RdxCheckboxIndicatorPresenceDirective {
             provideRdxPresenceContext(() => {
                 const rootContext = injectCheckboxRootContext();
                 return {
-                    present: computed(() => !!rootContext.checked())
+                    present: computed(() => rootContext.checked() || rootContext.indeterminate())
                 };
             })
         ], hostDirectives: [{ directive: i1$1.RdxPresenceDirective }], ngImport: i0 }); }
@@ -198,7 +513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         provideRdxPresenceContext(() => {
                             const rootContext = injectCheckboxRootContext();
                             return {
-                                present: computed(() => !!rootContext.checked())
+                                present: computed(() => rootContext.checked() || rootContext.indeterminate())
                             };
                         })
                     ],
@@ -209,30 +524,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxCheckboxInputDirective {
     constructor() {
         this.rootContext = injectCheckboxRootContext();
-        this.elementRef = inject(ElementRef);
-        this.destroyRef = inject(DestroyRef);
+        this.input = inject(ElementRef).nativeElement;
+        let isInitial = true;
         /**
-         * Sets up an observer to bubble native input events when the underlying "checked" attribute changes.
+         * Keeps the hidden native input in sync so form submission, native
+         * validation and form events reflect the checkbox state.
          *
-         * Why this exists
-         * - The checkbox input in this directive is visually hidden and controlled by the Radix checkbox state.
-         * - When Radix changes the checked state, it updates the input's DOM attribute ("checked").
-         * - Some forms and frameworks rely on native events (click/change) from the input to sync value, validity and
-         *   form state. If the attribute changes programmatically without a user click, no event is fired by default.
+         * - `indeterminate` is a native property (not a submittable value), so we
+         *   mirror it here rather than via an attribute.
+         * - On every change (but not the initial render) we emit bubbling
+         *   `input`/`change` events so native form listeners react. We do NOT
+         *   dispatch a `click`: a click on a checkbox runs the toggle activation
+         *   behavior and would desync the input from the bound state.
          */
-        afterNextRender(() => {
-            const mutationObserver = new MutationObserver(() => {
-                this.elementRef.nativeElement.dispatchEvent(new Event('click', { bubbles: true }));
-            });
-            mutationObserver.observe(this.elementRef.nativeElement, {
-                attributes: true,
-                attributeFilter: ['checked']
-            });
-            this.destroyRef.onDestroy(() => mutationObserver.disconnect());
+        effect(() => {
+            // Track both so the native input mirrors the checkbox and emits change
+            // events when either the checked or indeterminate state moves.
+            this.rootContext.checked();
+            this.input.indeterminate = this.rootContext.indeterminate();
+            if (isInitial) {
+                isInitial = false;
+                return;
+            }
+            this.input.dispatchEvent(new Event('input', { bubbles: true }));
+            this.input.dispatchEvent(new Event('change', { bubbles: true }));
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCheckboxInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxCheckboxInputDirective, isStandalone: true, selector: "input[rdxCheckboxInput]", host: { attributes: { "type": "checkbox", "tabindex": "-1", "aria-hidden": "true" }, properties: { "attr.name": "rootContext.name() || undefined", "attr.checked": "rootContext.checked()", "attr.form": "rootContext.form() || undefined", "attr.value": "rootContext.value()", "required": "rootContext.required() || undefined", "attr.disabled": "rootContext.disabled() ? \"\" : undefined", "style": "{\n          position: 'absolute',\n          pointerEvents: 'none',\n          opacity: 0,\n          margin: 0,\n          inset: 0,\n          transform: 'translateX(-100%)',\n        }" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxCheckboxInputDirective, isStandalone: true, selector: "input[rdxCheckboxInput]", host: { attributes: { "type": "checkbox", "tabindex": "-1", "aria-hidden": "true" }, properties: { "attr.name": "rootContext.name() || undefined", "attr.checked": "rootContext.state() === \"checked\" ? \"\" : undefined", "attr.form": "rootContext.form() || undefined", "attr.value": "rootContext.value()", "required": "rootContext.required() || undefined", "attr.disabled": "rootContext.disabled() ? \"\" : undefined", "style": "{\n          position: 'absolute',\n          pointerEvents: 'none',\n          opacity: 0,\n          margin: 0,\n          inset: 0,\n          transform: 'translateX(-100%)',\n        }" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCheckboxInputDirective, decorators: [{
             type: Directive,
@@ -243,7 +562,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         tabindex: '-1',
                         'aria-hidden': 'true',
                         '[attr.name]': 'rootContext.name() || undefined',
-                        '[attr.checked]': 'rootContext.checked()',
+                        // Only a truly checked box is submitted; `indeterminate` is a property
+                        // (set below), never a submitted "checked" value.
+                        '[attr.checked]': 'rootContext.state() === "checked" ? "" : undefined',
                         '[attr.form]': 'rootContext.form() || undefined',
                         '[attr.value]': 'rootContext.value()',
                         '[required]': 'rootContext.required() || undefined',
@@ -265,7 +586,8 @@ const checkboxImports = [
     RdxCheckboxRootDirective,
     RdxCheckboxButtonDirective,
     RdxCheckboxIndicatorDirective,
-    RdxCheckboxIndicatorPresenceDirective
+    RdxCheckboxIndicatorPresenceDirective,
+    RdxCheckboxGroupDirective
 ];
 class RdxCheckboxModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -273,11 +595,13 @@ class RdxCheckboxModule {
             RdxCheckboxRootDirective,
             RdxCheckboxButtonDirective,
             RdxCheckboxIndicatorDirective,
-            RdxCheckboxIndicatorPresenceDirective], exports: [RdxCheckboxInputDirective,
+            RdxCheckboxIndicatorPresenceDirective,
+            RdxCheckboxGroupDirective], exports: [RdxCheckboxInputDirective,
             RdxCheckboxRootDirective,
             RdxCheckboxButtonDirective,
             RdxCheckboxIndicatorDirective,
-            RdxCheckboxIndicatorPresenceDirective] }); }
+            RdxCheckboxIndicatorPresenceDirective,
+            RdxCheckboxGroupDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCheckboxModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCheckboxModule, decorators: [{
@@ -292,5 +616,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RdxCheckboxButtonDirective, RdxCheckboxIndicatorDirective, RdxCheckboxIndicatorPresenceDirective, RdxCheckboxInputDirective, RdxCheckboxModule, RdxCheckboxRootDirective, checkboxImports, getState, injectCheckboxRootContext, isIndeterminate, provideCheckboxRootContext };
+export { RdxCheckboxButtonDirective, RdxCheckboxGroupDirective, RdxCheckboxIndicatorDirective, RdxCheckboxIndicatorPresenceDirective, RdxCheckboxInputDirective, RdxCheckboxModule, RdxCheckboxRootDirective, checkboxImports, getState, injectCheckboxGroupContext, injectCheckboxRootContext, isIndeterminate, provideCheckboxGroupContext, provideCheckboxRootContext };
 //# sourceMappingURL=radix-ng-primitives-checkbox.mjs.map