@radix-ng/primitives 1.0.3 → 1.0.5

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

@@ -1,29 +1,49 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, model, input, booleanAttribute, output, signal, computed, effect, Directive, Renderer2, DestroyRef } from '@angular/core';
+import { inject, ElementRef, model, input, booleanAttribute, output, signal, computed, effect, untracked, Directive } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/composite';
 import { RdxCompositeRoot, RdxCompositeItem } from '@radix-ng/primitives/composite';
-import { createCancelableChangeEventDetails, provideValueAccessor, provideToken } from '@radix-ng/primitives/core';
-import * as i1$1 from '@radix-ng/primitives/visually-hidden';
-import { RdxVisuallyHiddenDirective } from '@radix-ng/primitives/visually-hidden';
-
-const RDX_RADIO_GROUP = new InjectionToken('RdxRadioGroup');
+import { createContext, createCancelableChangeEventDetails, provideValueAccessor } from '@radix-ng/primitives/core';
 
+const rootContext = () => {
+    const root = inject(RdxRadioGroupDirective);
+    return {
+        value: root.value,
+        disabledState: root.disabledState,
+        readonly: root.readonly,
+        required: root.required,
+        name: root.name,
+        form: root.form,
+        select: (value, event, reason) => root.select(value, event, reason),
+        setArrowNavigation: (value) => root.setArrowNavigation(value),
+        isArrowNavigation: () => root.isArrowNavigation()
+    };
+};
+const [injectRadioRootContext, provideRadioRootContext] = createContext('RadioRootContext', 'components/radio');
 class RdxRadioGroupDirective {
     constructor() {
         this.elementRef = inject(ElementRef);
         this.compositeRoot = inject(RdxCompositeRoot, { self: true });
+        /**
+         * The selected value. Deliberately typed as `string` (not Base UI's generic `Value`):
+         * a radio group maps onto native radio inputs whose form value is a string, so values are
+         * the option identifiers. Use the string key of your option as the value.
+         */
         this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.defaultValue = input(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : /* istanbul ignore next */ []));
         this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
         this.form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether the user should be unable to select a different radio button. Bound in templates as
+         * `readOnly` (Base UI spelling); the TS member stays `readonly` for cross-primitive consistency.
+         */
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), alias: 'readOnly', transform: booleanAttribute });
         this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Event handler called when the value changes.
          */
         this.onValueChange = output();
-        this.disable = signal(this.disabled(), ...(ngDevMode ? [{ debugName: "disable" }] : /* istanbul ignore next */ []));
+        this.disable = signal(false, ...(ngDevMode ? [{ debugName: "disable" }] : /* istanbul ignore next */ []));
         this.disabledState = computed(() => this.disable() || this.disabled(), ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
         this.arrowNavigation = signal(false, ...(ngDevMode ? [{ debugName: "arrowNavigation" }] : /* istanbul ignore next */ []));
         this.itemMetadata = computed(() => Array.from(this.compositeRoot.itemMap().values()).filter(isRadioItemMetadata), ...(ngDevMode ? [{ debugName: "itemMetadata" }] : /* istanbul ignore next */ []));
@@ -50,9 +70,15 @@ class RdxRadioGroupDirective {
         this.onTouched = () => {
             /* Empty */
         };
+        let hasAppliedDefault = false;
         effect(() => {
-            if (this.value() === null && this.defaultValue() !== undefined) {
-                this.value.set(this.defaultValue());
+            const defaultValue = this.defaultValue();
+            if (hasAppliedDefault || defaultValue === undefined) {
+                return;
+            }
+            hasAppliedDefault = true;
+            if (untracked(this.value) === null) {
+                this.value.set(defaultValue);
             }
         });
         effect(() => {
@@ -133,21 +159,25 @@ class RdxRadioGroupDirective {
         if (this.disabledState())
             return;
     }
+    /**
+     * Marks the control touched when focus leaves the whole group (Base UI `RadioGroup` parity and the
+     * ADR 0004 CVA strategy) — moving focus between items stays inside, so `relatedTarget` is checked.
+     */
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (!this.elementRef.nativeElement.contains(next)) {
+            this.onTouched();
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxRadioGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxRadioGroupDirective, isStandalone: true, selector: "[rdxRadioRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { attributes: { "role": "radiogroup" }, listeners: { "keydown": "onKeydown()" }, properties: { "attr.aria-required": "required() ? \"true\" : undefined", "attr.aria-disabled": "disabledState() ? \"true\" : undefined", "attr.aria-readonly": "readonly() ? \"true\" : undefined", "attr.data-disabled": "disabledState() ? \"\" : undefined", "attr.data-readonly": "readonly() ? \"\" : undefined", "attr.data-required": "required() ? \"\" : undefined" } }, providers: [
-            provideValueAccessor(RdxRadioGroupDirective),
-            { provide: RDX_RADIO_GROUP, useExisting: RdxRadioGroupDirective }
-        ], exportAs: ["rdxRadioRoot"], hostDirectives: [{ directive: i1.RdxCompositeRoot }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxRadioGroupDirective, isStandalone: true, selector: "[rdxRadioRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", 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 }, readonly: { classPropertyName: "readonly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { attributes: { "role": "radiogroup" }, listeners: { "keydown": "onKeydown()", "focusout": "onFocusOut($event)" }, properties: { "attr.aria-required": "required() ? \"true\" : undefined", "attr.aria-disabled": "disabledState() ? \"true\" : undefined", "attr.aria-readonly": "readonly() ? \"true\" : undefined", "attr.data-disabled": "disabledState() ? \"\" : undefined" } }, providers: [provideValueAccessor(RdxRadioGroupDirective), provideRadioRootContext(rootContext)], exportAs: ["rdxRadioRoot"], hostDirectives: [{ directive: i1.RdxCompositeRoot }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxRadioGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxRadioRoot]',
                     exportAs: 'rdxRadioRoot',
-                    providers: [
-                        provideValueAccessor(RdxRadioGroupDirective),
-                        { provide: RDX_RADIO_GROUP, useExisting: RdxRadioGroupDirective }
-                    ],
+                    providers: [provideValueAccessor(RdxRadioGroupDirective), provideRadioRootContext(rootContext)],
                     hostDirectives: [RdxCompositeRoot],
                     host: {
                         role: 'radiogroup',
@@ -155,65 +185,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.aria-disabled]': 'disabledState() ? "true" : undefined',
                         '[attr.aria-readonly]': 'readonly() ? "true" : undefined',
                         '[attr.data-disabled]': 'disabledState() ? "" : undefined',
-                        '[attr.data-readonly]': 'readonly() ? "" : undefined',
-                        '[attr.data-required]': 'required() ? "" : undefined',
-                        '(keydown)': 'onKeydown()'
+                        '(keydown)': 'onKeydown()',
+                        '(focusout)': 'onFocusOut($event)'
                     }
                 }]
-        }], 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 }] }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", 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 }] }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }] } });
 function isRadioItemMetadata(metadata) {
     return typeof metadata['disabled'] === 'boolean' && typeof metadata['value'] === 'string';
 }
 
-const RdxRadioItemToken = new InjectionToken('RadioItemToken');
-function injectRadioItem() {
-    return inject(RdxRadioItemToken);
-}
+const itemContext = () => {
+    const item = inject(RdxRadioItemDirective);
+    return {
+        value: item.value,
+        checkedState: item.checkedState,
+        disabledState: item.disabledState,
+        readonlyState: item.readonlyState,
+        requiredState: item.requiredState
+    };
+};
+const [injectRadioItemContext, provideRadioItemContext] = createContext('RadioItemContext', 'components/radio');
 class RdxRadioItemDirective {
     constructor() {
-        this.radioGroup = inject(RDX_RADIO_GROUP);
-        this.elementRef = inject(ElementRef);
-        this.renderer = inject(Renderer2);
+        this.rootContext = injectRadioRootContext();
         this.compositeItem = inject(RdxCompositeItem, { self: true });
-        this.destroyRef = inject(DestroyRef);
-        this.inputElement = this.renderer.createElement('input');
+        this.elementRef = inject(ElementRef);
         this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
         this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.nativeButton = input(false, { ...(ngDevMode ? { debugName: "nativeButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.nativeButtonState = computed(() => this.nativeButton(), ...(ngDevMode ? [{ debugName: "nativeButtonState" }] : /* istanbul ignore next */ []));
-        this.disabledState = computed(() => this.radioGroup.disabledState() || this.disabled(), ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
-        this.readonlyState = computed(() => this.radioGroup.readonly() || this.readonly(), ...(ngDevMode ? [{ debugName: "readonlyState" }] : /* istanbul ignore next */ []));
-        this.requiredState = computed(() => this.radioGroup.required() || this.required(), ...(ngDevMode ? [{ debugName: "requiredState" }] : /* istanbul ignore next */ []));
-        this.checkedState = computed(() => this.radioGroup.value() === this.value(), ...(ngDevMode ? [{ debugName: "checkedState" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the user should be unable to select this radio button. Bound in templates as
+         * `readOnly` (Base UI spelling); the TS member stays `readonly` for cross-primitive consistency.
+         */
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), alias: 'readOnly', transform: booleanAttribute });
+        /**
+         * Whether the host is a native `<button>`. Detected from the host tag (unlike Base UI's explicit
+         * `nativeButton` prop, the rendered element is statically known in Angular templates), and used to
+         * apply `type="button"` and the native `disabled` attribute.
+         */
+        this.isNativeButton = this.elementRef.nativeElement.tagName === 'BUTTON';
+        this.disabledState = computed(() => this.rootContext.disabledState() || this.disabled(), ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        this.readonlyState = computed(() => this.rootContext.readonly() || this.readonly(), ...(ngDevMode ? [{ debugName: "readonlyState" }] : /* istanbul ignore next */ []));
+        this.requiredState = computed(() => this.rootContext.required() || this.required(), ...(ngDevMode ? [{ debugName: "requiredState" }] : /* istanbul ignore next */ []));
+        this.checkedState = computed(() => this.rootContext.value() === this.value(), ...(ngDevMode ? [{ debugName: "checkedState" }] : /* istanbul ignore next */ []));
         this.ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-        this.createHiddenInput();
-        const unlistenInputChange = this.renderer.listen(this.inputElement, 'change', (event) => {
-            if (this.inputElement.checked) {
-                this.radioGroup.select(this.value(), event);
-            }
-        });
-        this.destroyRef.onDestroy(() => {
-            unlistenInputChange();
-            const parent = this.inputElement.parentNode;
-            if (parent) {
-                this.renderer.removeChild(parent, this.inputElement);
-            }
-        });
         effect(() => {
             this.compositeItem.setMetadata({
                 disabled: this.disabledState(),
                 value: this.value()
             });
-            this.syncHiddenInput();
         });
     }
     /** @ignore */
     onClick(event) {
         if (!this.disabledState() && !this.readonlyState()) {
-            this.radioGroup.select(this.value(), event);
+            this.rootContext.select(this.value(), event);
         }
     }
     /** @ignore */
@@ -228,91 +255,37 @@ class RdxRadioItemDirective {
             return;
         }
         if (this.isAllowedArrowKey(keyEvent.key)) {
-            this.radioGroup.setArrowNavigation(true);
+            this.rootContext.setArrowNavigation(true);
         }
     }
     /** @ignore */
     onKeyUp() {
-        this.radioGroup.setArrowNavigation(false);
+        this.rootContext.setArrowNavigation(false);
     }
     /** @ignore */
     onFocus(event) {
         queueMicrotask(() => {
-            if (this.radioGroup.isArrowNavigation()) {
-                this.radioGroup.select(this.value(), event);
-                this.radioGroup.setArrowNavigation(false);
+            if (this.rootContext.isArrowNavigation()) {
+                this.rootContext.select(this.value(), event);
+                this.rootContext.setArrowNavigation(false);
             }
         });
     }
     isAllowedArrowKey(key) {
-        if (!this.ARROW_KEYS.includes(key)) {
-            return false;
-        }
-        return true;
-    }
-    createHiddenInput() {
-        const host = this.elementRef.nativeElement;
-        const parent = host.parentNode;
-        this.renderer.setAttribute(this.inputElement, 'type', 'radio');
-        this.renderer.setAttribute(this.inputElement, 'tabindex', '-1');
-        this.renderer.setAttribute(this.inputElement, 'aria-hidden', 'true');
-        this.renderer.setStyle(this.inputElement, 'position', 'absolute');
-        this.renderer.setStyle(this.inputElement, 'pointer-events', 'none');
-        this.renderer.setStyle(this.inputElement, 'opacity', '0');
-        this.renderer.setStyle(this.inputElement, 'margin', '0');
-        this.renderer.setStyle(this.inputElement, 'inset', '0');
-        this.renderer.setStyle(this.inputElement, 'transform', 'translateX(-100%)');
-        if (parent) {
-            this.renderer.insertBefore(parent, this.inputElement, host.nextSibling);
-        }
-    }
-    syncHiddenInput() {
-        const checked = this.checkedState();
-        this.inputElement.name = this.radioGroup.name() ?? '';
-        this.inputElement.value = this.value();
-        this.inputElement.checked = checked;
-        this.inputElement.required = this.requiredState();
-        this.inputElement.disabled = this.disabledState();
-        this.setOptionalAttribute('name', this.radioGroup.name());
-        this.setOptionalAttribute('form', this.radioGroup.form());
-        this.setBooleanAttribute('checked', checked);
-        this.setBooleanAttribute('required', this.requiredState());
-        this.setBooleanAttribute('disabled', this.disabledState());
-        this.renderer.setAttribute(this.inputElement, 'value', this.value());
-        if (this.previousCheckedState === false && checked) {
-            this.inputElement.dispatchEvent(new Event('input', { bubbles: true }));
-            this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
-        }
-        this.previousCheckedState = checked;
-    }
-    setOptionalAttribute(name, value) {
-        if (value) {
-            this.renderer.setAttribute(this.inputElement, name, value);
-        }
-        else {
-            this.renderer.removeAttribute(this.inputElement, name);
-        }
-    }
-    setBooleanAttribute(name, value) {
-        if (value) {
-            this.renderer.setAttribute(this.inputElement, name, '');
-        }
-        else {
-            this.renderer.removeAttribute(this.inputElement, name);
-        }
+        return this.ARROW_KEYS.includes(key);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxRadioItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxRadioItemDirective, isStandalone: true, selector: "[rdxRadioItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, nativeButton: { classPropertyName: "nativeButton", publicName: "nativeButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "radio" }, listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)", "keyup": "onKeyUp()", "focus": "onFocus($event)" }, properties: { "attr.type": "nativeButtonState() ? \"button\" : undefined", "attr.aria-checked": "checkedState()", "attr.aria-disabled": "disabledState() ? \"true\" : undefined", "attr.aria-readonly": "readonlyState() ? \"true\" : undefined", "attr.aria-required": "requiredState() ? \"true\" : undefined", "attr.data-composite-item-active": "checkedState() ? \"\" : undefined", "attr.data-checked": "checkedState() ? \"\" : undefined", "attr.data-unchecked": "!checkedState() ? \"\" : undefined", "attr.data-disabled": "disabledState() ? \"\" : undefined", "attr.data-readonly": "readonlyState() ? \"\" : undefined", "attr.data-required": "requiredState() ? \"\" : undefined", "attr.data-state": "checkedState() ? \"checked\" : \"unchecked\"", "attr.disabled": "nativeButtonState() && disabledState() ? \"\" : undefined" } }, providers: [provideToken(RdxRadioItemToken, RdxRadioItemDirective)], exportAs: ["rdxRadioItem"], hostDirectives: [{ directive: i1.RdxCompositeItem }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxRadioItemDirective, isStandalone: true, selector: "[rdxRadioItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 } }, host: { attributes: { "role": "radio" }, listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)", "keyup": "onKeyUp()", "focus": "onFocus($event)" }, properties: { "attr.type": "isNativeButton ? \"button\" : undefined", "attr.aria-checked": "checkedState()", "attr.aria-disabled": "disabledState() ? \"true\" : undefined", "attr.aria-readonly": "readonlyState() ? \"true\" : undefined", "attr.aria-required": "requiredState() ? \"true\" : undefined", "attr.data-composite-item-active": "checkedState() ? \"\" : undefined", "attr.data-checked": "checkedState() ? \"\" : undefined", "attr.data-unchecked": "!checkedState() ? \"\" : undefined", "attr.data-disabled": "disabledState() ? \"\" : undefined", "attr.data-readonly": "readonlyState() ? \"\" : undefined", "attr.data-required": "requiredState() ? \"\" : undefined", "attr.disabled": "isNativeButton && disabledState() ? \"\" : undefined" } }, providers: [provideRadioItemContext(itemContext)], exportAs: ["rdxRadioItem"], hostDirectives: [{ directive: i1.RdxCompositeItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxRadioItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxRadioItem]',
                     exportAs: 'rdxRadioItem',
-                    providers: [provideToken(RdxRadioItemToken, RdxRadioItemDirective)],
+                    providers: [provideRadioItemContext(itemContext)],
                     hostDirectives: [RdxCompositeItem],
                     host: {
-                        '[attr.type]': 'nativeButtonState() ? "button" : undefined',
+                        '[attr.type]': 'isNativeButton ? "button" : undefined',
                         role: 'radio',
                         '[attr.aria-checked]': 'checkedState()',
                         '[attr.aria-disabled]': 'disabledState() ? "true" : undefined',
@@ -324,23 +297,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.data-disabled]': 'disabledState() ? "" : undefined',
                         '[attr.data-readonly]': 'readonlyState() ? "" : undefined',
                         '[attr.data-required]': 'requiredState() ? "" : undefined',
-                        '[attr.data-state]': 'checkedState() ? "checked" : "unchecked"',
-                        '[attr.disabled]': 'nativeButtonState() && disabledState() ? "" : undefined',
+                        '[attr.disabled]': 'isNativeButton && disabledState() ? "" : undefined',
                         '(click)': 'onClick($event)',
                         '(keydown)': 'onKeyDown($event)',
                         '(keyup)': 'onKeyUp()',
                         '(focus)': 'onFocus($event)'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], nativeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeButton", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }] } });
 
 class RdxRadioIndicatorDirective {
     constructor() {
-        this.radioGroup = inject(RDX_RADIO_GROUP);
-        this.radioItem = inject(RdxRadioItemDirective);
+        this.itemContext = injectRadioItemContext();
+        /** 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.itemContext.checkedState(), ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxRadioIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxRadioIndicatorDirective, isStandalone: true, selector: "[rdxRadioIndicator]", host: { properties: { "attr.data-checked": "radioItem.checkedState() ? \"\" : undefined", "attr.data-unchecked": "!radioItem.checkedState() ? \"\" : undefined", "attr.data-state": "radioItem.checkedState() ? \"checked\" : \"unchecked\"", "attr.data-disabled": "radioItem.disabledState() ? \"\" : undefined", "attr.data-readonly": "radioItem.readonlyState() ? \"\" : undefined", "attr.data-required": "radioItem.requiredState() ? \"\" : undefined", "hidden": "!radioItem.checkedState()", "style.pointer-events": "\"none\"" } }, exportAs: ["rdxRadioIndicator"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxRadioIndicatorDirective, isStandalone: true, selector: "[rdxRadioIndicator]", inputs: { keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-checked": "itemContext.checkedState() ? \"\" : undefined", "attr.data-unchecked": "!itemContext.checkedState() ? \"\" : undefined", "attr.data-disabled": "itemContext.disabledState() ? \"\" : undefined", "attr.data-readonly": "itemContext.readonlyState() ? \"\" : undefined", "attr.data-required": "itemContext.requiredState() ? \"\" : undefined", "attr.data-starting-style": "isVisible() ? \"\" : undefined", "attr.data-ending-style": "!isVisible() ? \"\" : undefined", "style.display": "!keepMounted() && !isVisible() ? \"none\" : null", "style.pointer-events": "\"none\"" } }, exportAs: ["rdxRadioIndicator"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxRadioIndicatorDirective, decorators: [{
             type: Directive,
@@ -348,29 +322,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: '[rdxRadioIndicator]',
                     exportAs: 'rdxRadioIndicator',
                     host: {
-                        '[attr.data-checked]': 'radioItem.checkedState() ? "" : undefined',
-                        '[attr.data-unchecked]': '!radioItem.checkedState() ? "" : undefined',
-                        '[attr.data-state]': 'radioItem.checkedState() ? "checked" : "unchecked"',
-                        '[attr.data-disabled]': 'radioItem.disabledState() ? "" : undefined',
-                        '[attr.data-readonly]': 'radioItem.readonlyState() ? "" : undefined',
-                        '[attr.data-required]': 'radioItem.requiredState() ? "" : undefined',
-                        '[hidden]': '!radioItem.checkedState()',
+                        '[attr.data-checked]': 'itemContext.checkedState() ? "" : undefined',
+                        '[attr.data-unchecked]': '!itemContext.checkedState() ? "" : undefined',
+                        '[attr.data-disabled]': 'itemContext.disabledState() ? "" : undefined',
+                        '[attr.data-readonly]': 'itemContext.readonlyState() ? "" : undefined',
+                        '[attr.data-required]': 'itemContext.requiredState() ? "" : undefined',
+                        '[attr.data-starting-style]': 'isVisible() ? "" : undefined',
+                        '[attr.data-ending-style]': '!isVisible() ? "" : undefined',
+                        '[style.display]': '!keepMounted() && !isVisible() ? "none" : null',
                         '[style.pointer-events]': '"none"'
                     }
                 }]
-        }] });
+        }], propDecorators: { keepMounted: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepMounted", required: false }] }] } });
 
+/**
+ * The hidden native radio input that mirrors the item state for form submission, native validation,
+ * and `<label>` activation. Place it inside an `rdxRadioItem`.
+ *
+ * @see https://base-ui.com/react/components/radio
+ */
 class RdxRadioItemInputDirective {
     constructor() {
-        this.radioItem = injectRadioItem();
-        this.radioGroup = inject(RDX_RADIO_GROUP);
+        this.rootContext = injectRadioRootContext();
+        this.itemContext = injectRadioItemContext();
         this.input = inject(ElementRef).nativeElement;
-        this.name = computed(() => this.radioGroup.name(), ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-        this.form = computed(() => this.radioGroup.form(), ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
-        this.value = computed(() => this.radioItem.value() || undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-        this.checked = computed(() => this.radioItem.checkedState(), ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-        this.required = computed(() => this.radioItem.requiredState(), ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-        this.disabled = computed(() => this.radioItem.disabledState(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.name = computed(() => this.rootContext.name(), ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.form = computed(() => this.rootContext.form(), ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
+        this.value = computed(() => this.itemContext.value() || undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.checked = computed(() => this.itemContext.checkedState(), ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+        this.required = computed(() => this.itemContext.requiredState(), ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        this.disabled = computed(() => this.itemContext.disabledState(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         let isInitial = true;
         effect(() => {
             const checked = this.checked();
@@ -384,15 +365,26 @@ class RdxRadioItemInputDirective {
             }
         });
     }
+    /**
+     * Selects this item when the native input is checked — covers `<label>` activation,
+     * where clicking the label toggles the hidden radio input rather than the visible item.
+     * `select()` is a no-op when the value is already current, so the programmatic
+     * `change` dispatched above does not re-trigger selection.
+     * @ignore
+     */
+    onInputChange(event) {
+        if (this.input.checked) {
+            this.rootContext.select(this.itemContext.value(), event);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxRadioItemInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxRadioItemInputDirective, isStandalone: true, selector: "input[rdxRadioItemInput]", host: { attributes: { "type": "radio", "tabindex": "-1", "aria-hidden": "true" }, properties: { "attr.name": "name()", "attr.form": "form()", "attr.required": "required() ? \"\" : undefined", "attr.disabled": "disabled() ? \"\" : undefined", "attr.checked": "checked() ? \"\" : undefined", "checked": "checked()", "attr.value": "value()", "style": "{\n          position: 'absolute',\n          pointerEvents: 'none',\n          opacity: 0,\n          margin: 0,\n          inset: 0,\n          transform: 'translateX(-100%)',\n        }" } }, exportAs: ["rdxRadioItemInput"], hostDirectives: [{ directive: i1$1.RdxVisuallyHiddenDirective, inputs: ["feature", "feature"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxRadioItemInputDirective, isStandalone: true, selector: "input[rdxRadioItemInput]", host: { attributes: { "type": "radio", "tabindex": "-1", "aria-hidden": "true" }, listeners: { "change": "onInputChange($event)" }, properties: { "attr.name": "name()", "attr.form": "form()", "attr.required": "required() ? \"\" : undefined", "attr.disabled": "disabled() ? \"\" : undefined", "attr.checked": "checked() ? \"\" : undefined", "checked": "checked()", "attr.value": "value()" }, styleAttribute: "transform: translateX(-100%); position: absolute; pointer-events: none; opacity: 0; margin: 0; inset: 0;" }, exportAs: ["rdxRadioItemInput"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxRadioItemInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[rdxRadioItemInput]',
                     exportAs: 'rdxRadioItemInput',
-                    hostDirectives: [{ directive: RdxVisuallyHiddenDirective, inputs: ['feature'] }],
                     host: {
                         type: 'radio',
                         tabindex: '-1',
@@ -404,14 +396,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.checked]': 'checked() ? "" : undefined',
                         '[checked]': 'checked()',
                         '[attr.value]': 'value()',
-                        '[style]': `{
-          position: 'absolute',
-          pointerEvents: 'none',
-          opacity: 0,
-          margin: 0,
-          inset: 0,
-          transform: 'translateX(-100%)',
-        }`
+                        '(change)': 'onInputChange($event)',
+                        style: 'transform: translateX(-100%); position: absolute; pointer-events: none; opacity: 0; margin: 0; inset: 0;'
                     }
                 }]
         }], ctorParameters: () => [] });
@@ -420,5 +406,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RdxRadioGroupDirective, RdxRadioIndicatorDirective, RdxRadioItemDirective, RdxRadioItemInputDirective, RdxRadioItemToken, injectRadioItem };
+export { RdxRadioGroupDirective, RdxRadioIndicatorDirective, RdxRadioItemDirective, RdxRadioItemInputDirective, injectRadioItemContext, injectRadioRootContext, provideRadioItemContext, provideRadioRootContext };
 //# sourceMappingURL=radix-ng-primitives-radio.mjs.map