@radix-ng/primitives 1.0.0-beta.5 → 1.0.2

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

@@ -1,9 +1,7 @@
 import * as i0 from '@angular/core';
-import { inject, model, input, booleanAttribute, output, signal, computed, effect, Directive, ElementRef, NgModule } from '@angular/core';
+import { inject, model, input, booleanAttribute, output, signal, computed, effect, Directive, ElementRef, Renderer2, DestroyRef, NgModule } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/core';
 import { createContext, createCancelableChangeEventDetails, provideValueAccessor, RdxControlValueAccessor } from '@radix-ng/primitives/core';
-import * as i1$1 from '@radix-ng/primitives/presence';
-import { provideRdxPresenceContext, RdxPresenceDirective } from '@radix-ng/primitives/presence';
 
 const [injectCheckboxGroupContext, provideCheckboxGroupContext] = createContext('CheckboxGroupContext', 'components/checkbox');
 const groupContext = () => {
@@ -122,7 +120,7 @@ class RdxCheckboxGroupDirective {
         }
         const current = this.value();
         const next = current.includes(name) ? current.filter((v) => v !== name) : [...current, name];
-        if (!this.emit(next, 'child-press', event)) {
+        if (!this.emit(next, event)) {
             return;
         }
         // A direct child change becomes the new "remembered" selection and resets the parent cycle.
@@ -151,7 +149,7 @@ class RdxCheckboxGroupDirective {
         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, 'parent-press', event);
+            this.emit(this.value().length === all.length ? none : all, event);
             return;
         }
         let nextStatus = 'mixed';
@@ -164,7 +162,7 @@ class RdxCheckboxGroupDirective {
             nextStatus = 'off';
             nextValue = none;
         }
-        if (!this.emit(nextValue, 'parent-press', event)) {
+        if (!this.emit(nextValue, event)) {
             return;
         }
         this.parentStatus = nextStatus;
@@ -179,9 +177,9 @@ class RdxCheckboxGroupDirective {
             this.uncontrolledState = this.value();
         }
     }
-    emit(next, reason, event) {
+    emit(next, event) {
         const trigger = event?.currentTarget instanceof HTMLElement ? event.currentTarget : undefined;
-        const { eventDetails } = createCancelableChangeEventDetails(reason, event ?? new Event('checkbox-group.value-change'), trigger);
+        const { eventDetails } = createCancelableChangeEventDetails('none', event ?? new Event('checkbox-group.value-change'), trigger);
         this.onValueChange.emit({ value: next, eventDetails });
         if (eventDetails.isCanceled()) {
             return false;
@@ -242,8 +240,9 @@ const rootContext = () => {
         name: checkbox.name,
         parent: checkbox.parent,
         form: checkbox.form,
-        readonly: checkbox.readonly,
+        readonly: checkbox.readOnlyState,
         state: checkbox.state,
+        uncheckedValue: checkbox.uncheckedValue,
         toggle(event) {
             checkbox.toggle(event);
         }
@@ -256,6 +255,9 @@ const [injectCheckboxRootContext, provideCheckboxRootContext] = createContext('C
 class RdxCheckboxRootDirective {
     constructor() {
         this.controlValueAccessor = inject(RdxControlValueAccessor);
+        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);
         /**
@@ -273,6 +275,13 @@ class RdxCheckboxRootDirective {
          * @group Props
          */
         this.checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+        /**
+         * The state of the checkbox when it is initially rendered.
+         *
+         * @default false
+         * @group Props
+         */
+        this.defaultChecked = input(undefined, { ...(ngDevMode ? { debugName: "defaultChecked" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
         /**
          * 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
@@ -291,6 +300,13 @@ class RdxCheckboxRootDirective {
          * @group Props
          */
         this.submitValue = input('on', { ...(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.
+         *
+         * @group Props
+         */
+        this.uncheckedValue = input(...(ngDevMode ? [undefined, { debugName: "uncheckedValue" }] : /* istanbul ignore next */ []));
         /**
          * Whether or not the checkbox button is disabled. This prevents the user from interacting with it.
          * @group Props
@@ -301,6 +317,8 @@ class RdxCheckboxRootDirective {
          * @group Props
          */
         this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Alias matching Base UI's `readOnly` prop spelling. */
+        this.readOnly = input(false, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), alias: 'readOnly', transform: booleanAttribute });
         /**
          * Whether or not the checkbox is required.
          * @group Props
@@ -361,6 +379,7 @@ class RdxCheckboxRootDirective {
         }, ...(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.readOnlyState = computed(() => this.readonly() || this.readOnly(), ...(ngDevMode ? [{ debugName: "readOnlyState" }] : /* 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.
@@ -371,8 +390,26 @@ class RdxCheckboxRootDirective {
                 onCleanup(group.registerChild(name, this.controlValueAccessor.disabled));
             }
         });
+        let hasAppliedDefault = false;
+        effect(() => {
+            const defaultChecked = this.defaultChecked();
+            if (!hasAppliedDefault && defaultChecked !== undefined) {
+                hasAppliedDefault = true;
+                this.checked.set(defaultChecked);
+                this.controlValueAccessor.setValue(defaultChecked);
+            }
+        });
+        effect(() => {
+            this.syncUncheckedInput();
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.removeUncheckedInput();
+        });
     }
     toggle(event) {
+        if (this.disabledState() || this.readOnlyState()) {
+            return;
+        }
         const group = this.group;
         if (group) {
             if (this.parent()) {
@@ -391,7 +428,7 @@ class RdxCheckboxRootDirective {
         // kept in sync so `[(checked)]` / `[(indeterminate)]` reflect the change.
         const next = this.indeterminateState() ? true : !this.checkedState();
         const trigger = event?.currentTarget instanceof HTMLElement ? event.currentTarget : undefined;
-        const { eventDetails } = createCancelableChangeEventDetails(event ? 'trigger-press' : 'none', event ?? new Event('checkbox.checked-change'), trigger);
+        const { eventDetails } = createCancelableChangeEventDetails('none', event ?? new Event('checkbox.checked-change'), trigger);
         this.onCheckedChange.emit({ checked: next, eventDetails });
         if (eventDetails.isCanceled()) {
             return;
@@ -400,8 +437,63 @@ class RdxCheckboxRootDirective {
         this.checked.set(next);
         this.controlValueAccessor.setValue(next);
     }
+    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);
+        }
+    }
     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 }, 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 }); }
+    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 }, 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 }, 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-checked": "checkedState() && !indeterminateState() ? \"\" : undefined", "attr.data-unchecked": "!checkedState() && !indeterminateState() ? \"\" : undefined", "attr.data-indeterminate": "indeterminateState() ? \"\" : undefined", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-readonly": "readOnlyState() ? \"\" : 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,
@@ -415,13 +507,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         }
                     ],
                     host: {
-                        '[attr.data-state]': 'state()',
+                        '[attr.data-checked]': 'checkedState() && !indeterminateState() ? "" : undefined',
+                        '[attr.data-unchecked]': '!checkedState() && !indeterminateState() ? "" : undefined',
+                        '[attr.data-indeterminate]': 'indeterminateState() ? "" : undefined',
                         '[attr.data-disabled]': 'isDisabled() ? "" : undefined',
-                        '[attr.data-readonly]': 'readonly() ? "" : undefined',
+                        '[attr.data-readonly]': 'readOnlyState() ? "" : undefined',
                         '[attr.data-required]': 'required() ? "" : undefined'
                     }
                 }]
-        }], 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"] }] } });
+        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], defaultChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultChecked", required: false }] }], 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 }] }], uncheckedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "uncheckedValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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
@@ -452,7 +546,7 @@ class RdxCheckboxButtonDirective {
         });
     }
     clicked(event) {
-        if (event.defaultPrevented || this.rootContext.readonly()) {
+        if (event.defaultPrevented || this.rootContext.disabled() || this.rootContext.readonly()) {
             return;
         }
         this.rootContext.toggle(event);
@@ -464,7 +558,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.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 }); }
+    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-disabled": "rootContext.disabled() ? \"true\" : undefined", "attr.aria-required": "rootContext.required() || undefined", "attr.aria-readonly": "rootContext.readonly() || undefined", "attr.data-checked": "rootContext.checked() && !rootContext.indeterminate() ? \"\" : undefined", "attr.data-unchecked": "!rootContext.checked() && !rootContext.indeterminate() ? \"\" : undefined", "attr.data-indeterminate": "rootContext.indeterminate() ? \"\" : undefined", "attr.data-disabled": "rootContext.disabled() ? \"\" : undefined", "attr.data-readonly": "rootContext.readonly() ? \"\" : undefined", "attr.data-required": "rootContext.required() ? \"\" : undefined" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCheckboxButtonDirective, decorators: [{
             type: Directive,
@@ -475,13 +569,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         role: 'checkbox',
                         '[attr.aria-checked]': 'rootContext.indeterminate() ? "mixed" : rootContext.checked()',
                         '[attr.aria-controls]': 'ariaControls()',
+                        '[attr.aria-disabled]': 'rootContext.disabled() ? "true" : undefined',
                         '[attr.aria-required]': 'rootContext.required() || undefined',
                         '[attr.aria-readonly]': 'rootContext.readonly() || undefined',
-                        '[attr.data-state]': 'rootContext.state()',
+                        '[attr.data-checked]': 'rootContext.checked() && !rootContext.indeterminate() ? "" : undefined',
+                        '[attr.data-unchecked]': '!rootContext.checked() && !rootContext.indeterminate() ? "" : undefined',
+                        '[attr.data-indeterminate]': 'rootContext.indeterminate() ? "" : undefined',
                         '[attr.data-disabled]': 'rootContext.disabled() ? "" : undefined',
                         '[attr.data-readonly]': 'rootContext.readonly() ? "" : undefined',
-                        '[attr.disabled]': 'rootContext.disabled() ? "" : undefined',
-                        '[attr.value]': 'rootContext.value()',
+                        '[attr.data-required]': 'rootContext.required() ? "" : undefined',
                         '(click)': 'clicked($event)',
                         // According to WAI ARIA, Checkboxes don't activate on enter keypress
                         '(keydown.enter)': '$event.preventDefault()'
@@ -492,49 +588,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxCheckboxIndicatorDirective {
     constructor() {
         this.rootContext = injectCheckboxRootContext();
+        /** Keep the indicator in the DOM when unchecked so CSS exit animations can play. */
+        this.keepMounted = input(false, { ...(ngDevMode ? { debugName: "keepMounted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isVisible = computed(() => this.rootContext.checked() || this.rootContext.indeterminate(), ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
     }
     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() && !rootContext.indeterminate()", "style.pointer-events": "\"none\"" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxCheckboxIndicatorDirective, isStandalone: true, selector: "[rdxCheckboxIndicator]", inputs: { keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-checked": "rootContext.checked() && !rootContext.indeterminate() ? \"\" : undefined", "attr.data-unchecked": "!rootContext.checked() && !rootContext.indeterminate() ? \"\" : undefined", "attr.data-indeterminate": "rootContext.indeterminate() ? \"\" : undefined", "attr.data-disabled": "rootContext.disabled() ? \"\" : undefined", "attr.data-readonly": "rootContext.readonly() ? \"\" : undefined", "attr.data-required": "rootContext.required() ? \"\" : undefined", "attr.data-starting-style": "isVisible() ? \"\" : undefined", "attr.data-ending-style": "!isVisible() ? \"\" : undefined", "style.display": "!keepMounted() && !isVisible() ? \"none\" : null", "style.pointer-events": "\"none\"" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCheckboxIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxCheckboxIndicator]',
                     host: {
-                        '[attr.data-state]': 'rootContext.state()',
+                        '[attr.data-checked]': 'rootContext.checked() && !rootContext.indeterminate() ? "" : undefined',
+                        '[attr.data-unchecked]': '!rootContext.checked() && !rootContext.indeterminate() ? "" : undefined',
+                        '[attr.data-indeterminate]': 'rootContext.indeterminate() ? "" : undefined',
                         '[attr.data-disabled]': 'rootContext.disabled() ? "" : undefined',
-                        '[hidden]': '!rootContext.checked() && !rootContext.indeterminate()',
+                        '[attr.data-readonly]': 'rootContext.readonly() ? "" : undefined',
+                        '[attr.data-required]': 'rootContext.required() ? "" : undefined',
+                        '[attr.data-starting-style]': 'isVisible() ? "" : undefined',
+                        '[attr.data-ending-style]': '!isVisible() ? "" : undefined',
+                        '[style.display]': '!keepMounted() && !isVisible() ? "none" : null',
                         '[style.pointer-events]': '"none"'
                     }
                 }]
-        }] });
-
-class RdxCheckboxIndicatorPresenceDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCheckboxIndicatorPresenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxCheckboxIndicatorPresenceDirective, isStandalone: true, selector: "ng-template[rdxCheckboxIndicatorPresence]", providers: [
-            provideRdxPresenceContext(() => {
-                const rootContext = injectCheckboxRootContext();
-                return {
-                    present: computed(() => rootContext.checked() || rootContext.indeterminate())
-                };
-            })
-        ], hostDirectives: [{ directive: i1$1.RdxPresenceDirective }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCheckboxIndicatorPresenceDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[rdxCheckboxIndicatorPresence]',
-                    providers: [
-                        provideRdxPresenceContext(() => {
-                            const rootContext = injectCheckboxRootContext();
-                            return {
-                                present: computed(() => rootContext.checked() || rootContext.indeterminate())
-                            };
-                        })
-                    ],
-                    hostDirectives: [RdxPresenceDirective]
-                }]
-        }] });
+        }], propDecorators: { keepMounted: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepMounted", required: false }] }] } });
 
 class RdxCheckboxInputDirective {
     constructor() {
@@ -566,7 +644,7 @@ class RdxCheckboxInputDirective {
         });
     }
     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.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 }); }
+    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.parent() ? undefined : rootContext.name() || undefined", "attr.checked": "rootContext.state() === \"checked\" ? \"\" : undefined", "checked": "rootContext.checked()", "attr.form": "rootContext.form() || undefined", "attr.value": "rootContext.value()", "required": "rootContext.required()", "disabled": "rootContext.disabled()", "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,
@@ -576,14 +654,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         type: 'checkbox',
                         tabindex: '-1',
                         'aria-hidden': 'true',
-                        '[attr.name]': 'rootContext.name() || undefined',
+                        '[attr.name]': 'rootContext.parent() ? undefined : rootContext.name() || undefined',
                         // Only a truly checked box is submitted; `indeterminate` is a property
                         // (set below), never a submitted "checked" value.
                         '[attr.checked]': 'rootContext.state() === "checked" ? "" : undefined',
+                        '[checked]': 'rootContext.checked()',
                         '[attr.form]': 'rootContext.form() || undefined',
                         '[attr.value]': 'rootContext.value()',
-                        '[required]': 'rootContext.required() || undefined',
-                        '[attr.disabled]': 'rootContext.disabled() ? "" : undefined',
+                        '[required]': 'rootContext.required()',
+                        '[disabled]': 'rootContext.disabled()',
                         '[style]': `{
           position: 'absolute',
           pointerEvents: 'none',
@@ -601,7 +680,6 @@ const checkboxImports = [
     RdxCheckboxRootDirective,
     RdxCheckboxButtonDirective,
     RdxCheckboxIndicatorDirective,
-    RdxCheckboxIndicatorPresenceDirective,
     RdxCheckboxGroupDirective
 ];
 class RdxCheckboxModule {
@@ -610,12 +688,10 @@ class RdxCheckboxModule {
             RdxCheckboxRootDirective,
             RdxCheckboxButtonDirective,
             RdxCheckboxIndicatorDirective,
-            RdxCheckboxIndicatorPresenceDirective,
             RdxCheckboxGroupDirective], exports: [RdxCheckboxInputDirective,
             RdxCheckboxRootDirective,
             RdxCheckboxButtonDirective,
             RdxCheckboxIndicatorDirective,
-            RdxCheckboxIndicatorPresenceDirective,
             RdxCheckboxGroupDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCheckboxModule }); }
 }
@@ -631,5 +707,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RdxCheckboxButtonDirective, RdxCheckboxGroupDirective, RdxCheckboxIndicatorDirective, RdxCheckboxIndicatorPresenceDirective, RdxCheckboxInputDirective, RdxCheckboxModule, RdxCheckboxRootDirective, checkboxImports, getState, injectCheckboxGroupContext, injectCheckboxRootContext, isIndeterminate, provideCheckboxGroupContext, provideCheckboxRootContext };
+export { RdxCheckboxButtonDirective, RdxCheckboxGroupDirective, RdxCheckboxIndicatorDirective, RdxCheckboxInputDirective, RdxCheckboxModule, RdxCheckboxRootDirective, checkboxImports, getState, injectCheckboxGroupContext, injectCheckboxRootContext, isIndeterminate, provideCheckboxGroupContext, provideCheckboxRootContext };
 //# sourceMappingURL=radix-ng-primitives-checkbox.mjs.map