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

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

@@ -1 +1 @@
-{"version":3,"file":"radix-ng-primitives-progress.mjs","sources":["../../../packages/primitives/progress/src/progress-root.directive.ts","../../../packages/primitives/progress/src/progress-indicator.directive.ts","../../../packages/primitives/progress/index.ts","../../../packages/primitives/progress/radix-ng-primitives-progress.ts"],"sourcesContent":["import { computed, Directive, effect, inject, InjectionToken, input, model } from '@angular/core';\nimport { isNullish, isNumber, provideToken } from '@radix-ng/primitives/core';\n\nexport const RdxProgressToken = new InjectionToken<RdxProgressRootDirective>('RdxProgressDirective');\n\n/**\n * Injects the current instance of RdxProgressRootDirective.\n * @returns The instance of RdxProgressRootDirective.\n */\nexport function injectProgress(): RdxProgressRootDirective {\n    return inject(RdxProgressToken);\n}\n\nexport type ProgressState = 'indeterminate' | 'complete' | 'loading';\n\nexport interface ProgressProps {\n    value?: number | null;\n    max?: number;\n    /**\n     * A function to get the accessible label text representing the current value in a human-readable format.\n     *\n     *  If not provided, the value label will be read as the numeric value as a percentage of the max value.\n     */\n    getValueLabel?: (value: number, max: number) => string;\n}\n\nconst MIN_PERCENT = 0;\nconst DEFAULT_MAX = 100;\n\n/**\n * Directive to manage progress bar state and attributes.\n *\n * This directive provides a way to create a progress bar with customizable value and max attributes.\n * It handles aria attributes for accessibility and provides different states like 'indeterminate', 'complete', and 'loading'.\n *\n * @group Components\n */\n@Directive({\n    selector: '[rdxProgressRoot]',\n    exportAs: 'rdxProgressRoot',\n    providers: [provideToken(RdxProgressToken, RdxProgressRootDirective)],\n    host: {\n        role: 'progressbar',\n        '[attr.aria-valuemax]': 'max()',\n        '[attr.aria-valuemin]': '0',\n        '[attr.aria-valuenow]': 'value()',\n        '[attr.aria-valuetext]': 'label()',\n        '[attr.aria-label]': 'label()',\n        '[attr.data-state]': 'progressState()',\n        '[attr.data-value]': 'value() ?? undefined',\n        '[attr.data-max]': 'max()',\n        // set tab index to -1 so screen readers will read the aria-label\n        // Note: there is a known issue with JAWS that does not read progressbar aria labels on FireFox\n        tabindex: '-1'\n    }\n})\nexport class RdxProgressRootDirective {\n    /**\n     * The current value of the progress bar.\n     * @group Props\n     * @defaultValue 0\n     */\n    readonly value = model<number>(MIN_PERCENT);\n\n    /**\n     * The maximum value of the progress bar.\n     * @defaultValue 100\n     * @group Props\n     */\n    readonly max = model<number>(DEFAULT_MAX);\n\n    /**\n     * Function to generate the value label.\n     * @group Props\n     */\n    readonly valueLabel = input<(value: number, max: number) => string>((value, max) =>\n        this.defaultGetValueLabel(value, max)\n    );\n\n    protected readonly label = computed(() => this.valueLabel()(this.value(), this.max()));\n\n    readonly progressState = computed<ProgressState>(() => {\n        if (isNullish(this.value())) {\n            return 'indeterminate';\n        }\n        if (this.value() === this.max()) {\n            return 'complete';\n        }\n        return 'loading';\n    });\n\n    constructor() {\n        effect(() => {\n            const correctedValue = this.validateValue(this.value(), this.max());\n            if (correctedValue != null && correctedValue !== this.value()) {\n                this.value.set(correctedValue);\n            }\n        });\n\n        effect(() => {\n            const correctedMax = this.validateMax(this.max());\n            if (correctedMax !== this.max()) {\n                this.max.set(correctedMax);\n            }\n        });\n    }\n\n    private validateValue(value: any, max: number): number | null {\n        const isValidValueError =\n            isNullish(value) || (isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0);\n\n        if (isValidValueError) return value as null;\n\n        console.error(`Invalid prop \\`value\\` of value \\`${value}\\` supplied to \\`ProgressRoot\\`. The \\`value\\` prop must be:\n  - a positive number\n  - less than the value passed to \\`max\\` (or ${DEFAULT_MAX} if no \\`max\\` prop is set)\n  - \\`null\\`  or \\`undefined\\` if the progress is indeterminate.\n\nDefaulting to \\`null\\`.`);\n        return null;\n    }\n\n    private validateMax(max: number): number {\n        const isValidMaxError = isNumber(max) && !Number.isNaN(max) && max > 0;\n\n        if (isValidMaxError) return max;\n\n        console.error(\n            `Invalid prop \\`max\\` of value \\`${max}\\` supplied to \\`ProgressRoot\\`. Only numbers greater than 0 are valid max values. Defaulting to \\`${DEFAULT_MAX}\\`.`\n        );\n        return DEFAULT_MAX;\n    }\n\n    private defaultGetValueLabel(value: number, max: number) {\n        return `${Math.round((value / max) * 100)}%`;\n    }\n}\n","import { Directive } from '@angular/core';\nimport { injectProgress } from './progress-root.directive';\n\n/**\n * Directive to manage progress indicator state and attributes.\n *\n * This directive is used to display the progress indicator inside the progress bar.\n * It inherits the state and value from the `RdxProgressRootDirective`.\n */\n@Directive({\n    selector: '[rdxProgressIndicator]',\n    exportAs: 'rdxProgressIndicator',\n    host: {\n        '[attr.data-state]': 'progress.progressState()',\n        '[attr.data-value]': 'progress.value()',\n        '[attr.data-max]': 'progress.max()'\n    }\n})\nexport class RdxProgressIndicatorDirective {\n    /**\n     * This allows the directive to access the progress bar state and values.\n     */\n    protected readonly progress = injectProgress();\n}\n","import { NgModule } from '@angular/core';\nimport { RdxProgressIndicatorDirective } from './src/progress-indicator.directive';\nimport { RdxProgressRootDirective } from './src/progress-root.directive';\n\nexport * from './src/progress-indicator.directive';\nexport * from './src/progress-root.directive';\n\nexport type { ProgressProps } from './src/progress-root.directive';\n\nconst _imports = [RdxProgressRootDirective, RdxProgressIndicatorDirective];\n\n@NgModule({\n    imports: [..._imports],\n    exports: [..._imports]\n})\nexport class RdxProgressModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"radix-ng-primitives-progress.mjs","sources":["../../../packages/primitives/progress/src/progress-root.directive.ts","../../../packages/primitives/progress/src/progress-indicator.directive.ts","../../../packages/primitives/progress/src/progress-label.directive.ts","../../../packages/primitives/progress/src/progress-track.directive.ts","../../../packages/primitives/progress/src/progress-value.directive.ts","../../../packages/primitives/progress/index.ts","../../../packages/primitives/progress/radix-ng-primitives-progress.ts"],"sourcesContent":["import { computed, Directive, inject, input, numberAttribute } from '@angular/core';\nimport { createContext } from '@radix-ng/primitives/core';\n\nlet progressId = 0;\n\nconst attr = (value: boolean) => (value ? '' : undefined);\n\nexport type ProgressState = 'indeterminate' | 'complete' | 'progressing';\n\nexport type ProgressValueFormatter = (value: number, min: number, max: number) => string;\n\nexport interface ProgressProps {\n    value?: number | null;\n    min?: number;\n    max?: number;\n    valueLabel?: ProgressValueFormatter;\n}\n\nconst DEFAULT_MIN = 0;\nconst DEFAULT_MAX = 100;\n\nconst isValidNumber = (value: unknown): value is number => typeof value === 'number' && !Number.isNaN(value);\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\nconst progressRootContext = () => {\n    const root = injectProgressRoot();\n\n    return {\n        labelId: root.labelId,\n        valueId: root.valueId,\n        minState: root.minState,\n        maxState: root.maxState,\n        valueState: root.valueState,\n        percentageState: root.percentageState,\n        valueLabelState: root.valueLabelState,\n        progressState: root.progressState,\n        completeState: root.completeState,\n        progressingState: root.progressingState,\n        indeterminateState: root.indeterminateState\n    };\n};\n\nexport type RdxProgressRootContext = ReturnType<typeof progressRootContext>;\n\nexport const [injectProgressRootContext, provideProgressRootContext] =\n    createContext<RdxProgressRootContext>('RdxProgressRoot');\n\n/**\n * Provides progress state and accessibility attributes.\n *\n * @group Components\n */\n@Directive({\n    selector: '[rdxProgressRoot]',\n    exportAs: 'rdxProgressRoot',\n    providers: [provideProgressRootContext(progressRootContext)],\n    host: {\n        role: 'progressbar',\n        '[attr.aria-labelledby]': 'labelId()',\n        '[attr.aria-describedby]': 'valueId()',\n        '[attr.aria-valuemin]': 'indeterminateState() ? undefined : minState()',\n        '[attr.aria-valuemax]': 'indeterminateState() ? undefined : maxState()',\n        '[attr.aria-valuenow]': 'valueState() ?? undefined',\n        '[attr.aria-valuetext]': 'valueLabelState()',\n        '[attr.data-state]': 'progressState()',\n        '[attr.data-value]': 'valueState() ?? undefined',\n        '[attr.data-min]': 'minState()',\n        '[attr.data-max]': 'maxState()',\n        '[attr.data-complete]': 'dataAttr(completeState())',\n        '[attr.data-progressing]': 'dataAttr(progressingState())',\n        '[attr.data-indeterminate]': 'dataAttr(indeterminateState())'\n    }\n})\nexport class RdxProgressRootDirective {\n    /**\n     * Current progress value. Set to `null` for indeterminate progress.\n     *\n     * @group Props\n     * @defaultValue null\n     */\n    readonly value = input<number | null, number | null>(null, { transform: (value) => this.valueTransform(value) });\n\n    /**\n     * Minimum progress value.\n     *\n     * @group Props\n     * @defaultValue 0\n     */\n    readonly min = input(DEFAULT_MIN, { transform: numberAttribute });\n\n    /**\n     * Maximum progress value.\n     *\n     * @group Props\n     * @defaultValue 100\n     */\n    readonly max = input(DEFAULT_MAX, { transform: numberAttribute });\n\n    /**\n     * Formats the current value for assistive technologies and `rdxProgressValue`.\n     *\n     * @group Props\n     */\n    readonly valueLabel = input<ProgressValueFormatter>((value, min, max) => this.defaultValueLabel(value, min, max));\n\n    readonly labelId = input(`rdx-progress-label-${progressId++}`);\n    readonly valueId = input(`rdx-progress-value-${progressId++}`);\n\n    readonly minState = computed(() => (isValidNumber(this.min()) ? this.min() : DEFAULT_MIN));\n    readonly maxState = computed(() => {\n        const min = this.minState();\n        const max = this.max();\n\n        return isValidNumber(max) && max > min ? max : min + DEFAULT_MAX;\n    });\n\n    readonly valueState = computed(() => {\n        const value = this.value();\n\n        if (value === null || !isValidNumber(value)) {\n            return null;\n        }\n\n        return clamp(value, this.minState(), this.maxState());\n    });\n\n    readonly percentageState = computed(() => {\n        const value = this.valueState();\n\n        if (value === null) {\n            return null;\n        }\n\n        const min = this.minState();\n        const max = this.maxState();\n\n        return ((value - min) / (max - min)) * 100;\n    });\n\n    readonly valueLabelState = computed(() => {\n        const value = this.valueState();\n\n        return value === null ? undefined : this.valueLabel()(value, this.minState(), this.maxState());\n    });\n\n    readonly progressState = computed<ProgressState>(() => {\n        const value = this.valueState();\n\n        if (value === null) {\n            return 'indeterminate';\n        }\n\n        if (value === this.maxState()) {\n            return 'complete';\n        }\n\n        return 'progressing';\n    });\n\n    readonly completeState = computed(() => this.progressState() === 'complete');\n    readonly progressingState = computed(() => this.progressState() === 'progressing');\n    readonly indeterminateState = computed(() => this.progressState() === 'indeterminate');\n\n    protected readonly dataAttr = attr;\n\n    private valueTransform(value: number | null): number | null {\n        return value === null ? null : numberAttribute(value);\n    }\n\n    private defaultValueLabel(value: number, min: number, max: number) {\n        return `${Math.round(((value - min) / (max - min)) * 100)}%`;\n    }\n}\n\nfunction injectProgressRoot(): RdxProgressRootDirective {\n    return inject(RdxProgressRootDirective);\n}\n","import { Directive } from '@angular/core';\nimport { injectProgressRootContext } from './progress-root.directive';\n\nconst attr = (value: boolean) => (value ? '' : undefined);\n\n/**\n * Displays the visual progress fill.\n *\n * @group Components\n */\n@Directive({\n    selector: '[rdxProgressIndicator]',\n    exportAs: 'rdxProgressIndicator',\n    host: {\n        '[attr.data-state]': 'progress.progressState()',\n        '[attr.data-value]': 'progress.valueState() ?? undefined',\n        '[attr.data-min]': 'progress.minState()',\n        '[attr.data-max]': 'progress.maxState()',\n        '[attr.data-percent]': 'progress.percentageState() ?? undefined',\n        '[attr.data-complete]': 'dataAttr(progress.completeState())',\n        '[attr.data-progressing]': 'dataAttr(progress.progressingState())',\n        '[attr.data-indeterminate]': 'dataAttr(progress.indeterminateState())'\n    }\n})\nexport class RdxProgressIndicatorDirective {\n    protected readonly progress = injectProgressRootContext();\n    protected readonly dataAttr = attr;\n}\n","import { Directive } from '@angular/core';\nimport { injectProgressRootContext } from './progress-root.directive';\n\nconst attr = (value: boolean) => (value ? '' : undefined);\n\n/**\n * Labels the progress task.\n *\n * @group Components\n */\n@Directive({\n    selector: '[rdxProgressLabel]',\n    exportAs: 'rdxProgressLabel',\n    host: {\n        '[attr.id]': 'progress.labelId()',\n        '[attr.data-state]': 'progress.progressState()',\n        '[attr.data-complete]': 'dataAttr(progress.completeState())',\n        '[attr.data-progressing]': 'dataAttr(progress.progressingState())',\n        '[attr.data-indeterminate]': 'dataAttr(progress.indeterminateState())'\n    }\n})\nexport class RdxProgressLabelDirective {\n    protected readonly progress = injectProgressRootContext();\n    protected readonly dataAttr = attr;\n}\n","import { Directive } from '@angular/core';\nimport { injectProgressRootContext } from './progress-root.directive';\n\nconst attr = (value: boolean) => (value ? '' : undefined);\n\n/**\n * Contains the visual progress indicator.\n *\n * @group Components\n */\n@Directive({\n    selector: '[rdxProgressTrack]',\n    exportAs: 'rdxProgressTrack',\n    host: {\n        '[attr.data-state]': 'progress.progressState()',\n        '[attr.data-value]': 'progress.valueState() ?? undefined',\n        '[attr.data-min]': 'progress.minState()',\n        '[attr.data-max]': 'progress.maxState()',\n        '[attr.data-complete]': 'dataAttr(progress.completeState())',\n        '[attr.data-progressing]': 'dataAttr(progress.progressingState())',\n        '[attr.data-indeterminate]': 'dataAttr(progress.indeterminateState())'\n    }\n})\nexport class RdxProgressTrackDirective {\n    protected readonly progress = injectProgressRootContext();\n    protected readonly dataAttr = attr;\n}\n","import { Directive } from '@angular/core';\nimport { injectProgressRootContext } from './progress-root.directive';\n\nconst attr = (value: boolean) => (value ? '' : undefined);\n\n/**\n * Displays the formatted progress value.\n *\n * @group Components\n */\n@Directive({\n    selector: '[rdxProgressValue]',\n    exportAs: 'rdxProgressValue',\n    host: {\n        '[attr.id]': 'progress.valueId()',\n        '[textContent]': 'progress.valueLabelState() ?? \"\"',\n        '[attr.data-state]': 'progress.progressState()',\n        '[attr.data-value]': 'progress.valueState() ?? undefined',\n        '[attr.data-min]': 'progress.minState()',\n        '[attr.data-max]': 'progress.maxState()',\n        '[attr.data-complete]': 'dataAttr(progress.completeState())',\n        '[attr.data-progressing]': 'dataAttr(progress.progressingState())',\n        '[attr.data-indeterminate]': 'dataAttr(progress.indeterminateState())'\n    }\n})\nexport class RdxProgressValueDirective {\n    protected readonly progress = injectProgressRootContext();\n    protected readonly dataAttr = attr;\n}\n","import { NgModule } from '@angular/core';\nimport { RdxProgressIndicatorDirective } from './src/progress-indicator.directive';\nimport { RdxProgressLabelDirective } from './src/progress-label.directive';\nimport { RdxProgressRootDirective } from './src/progress-root.directive';\nimport { RdxProgressTrackDirective } from './src/progress-track.directive';\nimport { RdxProgressValueDirective } from './src/progress-value.directive';\n\nexport * from './src/progress-indicator.directive';\nexport * from './src/progress-label.directive';\nexport * from './src/progress-root.directive';\nexport * from './src/progress-track.directive';\nexport * from './src/progress-value.directive';\n\nexport type { ProgressProps, ProgressState, ProgressValueFormatter } from './src/progress-root.directive';\n\nconst _imports = [\n    RdxProgressRootDirective,\n    RdxProgressLabelDirective,\n    RdxProgressValueDirective,\n    RdxProgressTrackDirective,\n    RdxProgressIndicatorDirective\n];\n\n@NgModule({\n    imports: [..._imports],\n    exports: [..._imports]\n})\nexport class RdxProgressModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["attr"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, model, input, booleanAttribute, output, signal, computed, Input, Directive, inject, ElementRef } from '@angular/core';
+import { InjectionToken, model, input, booleanAttribute, output, signal, computed, effect, Directive, inject, ElementRef, Renderer2, DestroyRef } from '@angular/core';
 import { provideValueAccessor, provideToken } from '@radix-ng/primitives/core';
 import * as i1 from '@radix-ng/primitives/roving-focus';
 import { RdxRovingFocusGroupDirective, RdxRovingFocusItemDirective } from '@radix-ng/primitives/roving-focus';
@@ -11,7 +11,11 @@ const RDX_RADIO_GROUP = new InjectionToken('RdxRadioGroup');
 class RdxRadioGroupDirective {
     constructor() {
         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 });
         this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.orientation = input(...(ngDevMode ? [undefined, { debugName: "orientation" }] : /* istanbul ignore next */ []));
         /**
@@ -19,7 +23,8 @@ class RdxRadioGroupDirective {
          */
         this.onValueChange = output();
         this.disable = signal(this.disabled(), ...(ngDevMode ? [{ debugName: "disable" }] : /* istanbul ignore next */ []));
-        this.disableState = computed(() => this.disable() || this.disabled(), ...(ngDevMode ? [{ debugName: "disableState" }] : /* 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 */ []));
         /**
          * The callback function to call when the value of the radio group changes.
          */
@@ -33,6 +38,11 @@ class RdxRadioGroupDirective {
         this.onTouched = () => {
             /* Empty */
         };
+        effect(() => {
+            if (this.value() === null && this.defaultValue() !== undefined) {
+                this.value.set(this.defaultValue());
+            }
+        });
     }
     /**
      * Select a radio item.
@@ -40,8 +50,13 @@ class RdxRadioGroupDirective {
      * @ignore
      */
     select(value) {
+        if (this.disabledState() || this.readonly() || this.value() === value) {
+            return;
+        }
         this.value.set(value);
-        this.onValueChange.emit(value);
+        if (value !== null) {
+            this.onValueChange.emit(value);
+        }
         this.onChange?.(value);
         this.onTouched();
     }
@@ -73,12 +88,18 @@ class RdxRadioGroupDirective {
     setDisabledState(isDisabled) {
         this.disable.set(isDisabled);
     }
+    setArrowNavigation(value) {
+        this.arrowNavigation.set(value);
+    }
+    isArrowNavigation() {
+        return this.arrowNavigation();
+    }
     onKeydown() {
-        if (this.disableState())
+        if (this.disabledState())
             return;
     }
     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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { attributes: { "role": "radiogroup" }, listeners: { "keydown": "onKeydown()" }, properties: { "attr.aria-orientation": "orientation()", "attr.aria-required": "required()", "attr.data-disabled": "disableState() ? \"\" : null" } }, providers: [
+    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 }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { attributes: { "role": "radiogroup" }, listeners: { "keydown": "onKeydown()" }, properties: { "attr.aria-orientation": "orientation()", "attr.aria-required": "required() ? \"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.RdxRovingFocusGroupDirective, inputs: ["dir", "dir", "orientation", "orientation", "loop", "loop"] }], ngImport: i0 }); }
@@ -96,14 +117,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     host: {
                         role: 'radiogroup',
                         '[attr.aria-orientation]': 'orientation()',
-                        '[attr.aria-required]': 'required()',
-                        '[attr.data-disabled]': 'disableState() ? "" : null',
+                        '[attr.aria-required]': 'required() ? "true" : undefined',
+                        '[attr.data-disabled]': 'disabledState() ? "" : undefined',
+                        '[attr.data-readonly]': 'readonly() ? "" : undefined',
+                        '[attr.data-required]': 'required() ? "" : undefined',
                         '(keydown)': 'onKeydown()'
                     }
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], defaultValue: [{
-                type: Input
-            }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", 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 }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }] } });
 
 const RdxRadioItemToken = new InjectionToken('RadioItemToken');
 function injectRadioItem() {
@@ -113,54 +134,134 @@ class RdxRadioItemDirective {
     constructor() {
         this.radioGroup = inject(RDX_RADIO_GROUP);
         this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.rovingFocusItem = inject(RdxRovingFocusItemDirective);
+        this.destroyRef = inject(DestroyRef);
+        this.inputElement = this.renderer.createElement('input');
         this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
-        this.required = input(...(ngDevMode ? [undefined, { debugName: "required" }] : /* 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.disabledState = computed(() => this.radioGroup.disableState() || this.disabled(), ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        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() || this.elementRef.nativeElement.tagName === 'BUTTON', ...(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 */ []));
         this.ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-        this.isArrowKeyPressedSignal = signal(false, ...(ngDevMode ? [{ debugName: "isArrowKeyPressedSignal" }] : /* istanbul ignore next */ []));
-    }
-    /** @ignore */
-    ngOnInit() {
-        if (this.radioGroup.defaultValue === this.value()) {
-            this.radioGroup.select(this.value());
-        }
+        this.createHiddenInput();
+        const unlistenInputChange = this.renderer.listen(this.inputElement, 'change', () => {
+            if (this.inputElement.checked) {
+                this.radioGroup.select(this.value());
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            unlistenInputChange();
+            const parent = this.inputElement.parentNode;
+            if (parent) {
+                this.renderer.removeChild(parent, this.inputElement);
+            }
+        });
+        effect(() => {
+            this.rovingFocusItem.setActive(this.checkedState());
+            this.rovingFocusItem.setFocusable(!this.disabledState());
+            this.syncHiddenInput();
+        });
     }
     /** @ignore */
     onClick() {
-        if (!this.disabledState()) {
+        if (!this.disabledState() && !this.readonlyState()) {
             this.radioGroup.select(this.value());
-            this.isArrowKeyPressedSignal.set(true);
         }
     }
     /** @ignore */
     onKeyDown(event) {
         const keyEvent = event;
-        if (this.ARROW_KEYS.includes(keyEvent.key)) {
-            this.isArrowKeyPressedSignal.set(true);
+        if (keyEvent.key === ' ' || keyEvent.key === 'Enter') {
+            this.onClick();
+            return;
+        }
+        if (this.isAllowedArrowKey(keyEvent.key)) {
+            this.radioGroup.setArrowNavigation(true);
         }
     }
     /** @ignore */
     onKeyUp() {
-        this.isArrowKeyPressedSignal.set(false);
+        this.radioGroup.setArrowNavigation(false);
     }
     /** @ignore */
     onFocus() {
-        this.radioGroup.select(this.value());
-        setTimeout(() => {
-            /**
-             * When navigating with arrow keys, focus triggers on the radio item.
-             * To "check" the radio, we programmatically trigger a click event.
-             */
-            if (this.isArrowKeyPressedSignal()) {
-                this.elementRef.nativeElement.click();
+        queueMicrotask(() => {
+            if (this.radioGroup.isArrowNavigation()) {
+                this.radioGroup.select(this.value());
+                this.radioGroup.setArrowNavigation(false);
             }
-        }, 0);
+        });
+    }
+    isAllowedArrowKey(key) {
+        if (!this.ARROW_KEYS.includes(key)) {
+            return false;
+        }
+        const orientation = this.radioGroup.orientation() ?? 'horizontal';
+        if (orientation === 'vertical') {
+            return key === 'ArrowUp' || key === 'ArrowDown';
+        }
+        return key === 'ArrowLeft' || key === 'ArrowRight';
+    }
+    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);
+        }
     }
     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 } }, host: { attributes: { "type": "button", "role": "radio" }, listeners: { "click": "onClick()", "keydown": "onKeyDown($event)", "keyup": "onKeyUp()", "focus": "onFocus()" }, properties: { "attr.aria-checked": "checkedState()", "attr.data-disabled": "disabledState() ? \"\" : null", "attr.data-state": "checkedState() ? \"checked\" : \"unchecked\"", "attr.disabled": "disabledState() ? \"\" : undefined" } }, providers: [provideToken(RdxRadioItemToken, RdxRadioItemDirective)], exportAs: ["rdxRadioItem"], hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective, inputs: ["tabStopId", "id", "focusable", "focusable", "active", "active", "allowShiftKey", "allowShiftKey"] }], 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 }, nativeButton: { classPropertyName: "nativeButton", publicName: "nativeButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "radio" }, listeners: { "click": "onClick()", "keydown": "onKeyDown($event)", "keyup": "onKeyUp()", "focus": "onFocus()" }, properties: { "attr.type": "nativeButtonState() ? \"button\" : undefined", "attr.aria-checked": "checkedState()", "attr.aria-readonly": "readonlyState() ? \"true\" : undefined", "attr.aria-required": "requiredState() ? \"true\" : 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.RdxRovingFocusItemDirective, inputs: ["tabStopId", "id", "focusable", "focusable", "active", "active", "allowShiftKey", "allowShiftKey"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxRadioItemDirective, decorators: [{
             type: Directive,
@@ -172,19 +273,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         { directive: RdxRovingFocusItemDirective, inputs: ['tabStopId: id', 'focusable', 'active', 'allowShiftKey'] }
                     ],
                     host: {
-                        type: 'button',
+                        '[attr.type]': 'nativeButtonState() ? "button" : undefined',
                         role: 'radio',
                         '[attr.aria-checked]': 'checkedState()',
-                        '[attr.data-disabled]': 'disabledState() ? "" : null',
+                        '[attr.aria-readonly]': 'readonlyState() ? "true" : undefined',
+                        '[attr.aria-required]': 'requiredState() ? "true" : 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]': 'disabledState() ? "" : undefined',
+                        '[attr.disabled]': 'nativeButtonState() && disabledState() ? "" : undefined',
                         '(click)': 'onClick()',
                         '(keydown)': 'onKeyDown($event)',
                         '(keyup)': 'onKeyUp()',
                         '(focus)': 'onFocus()'
                     }
                 }]
-        }], 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 }] }] } });
+        }], 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 }] }] } });
 
 class RdxRadioIndicatorDirective {
     constructor() {
@@ -192,7 +299,7 @@ class RdxRadioIndicatorDirective {
         this.radioItem = inject(RdxRadioItemDirective);
     }
     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-state": "radioItem.checkedState() ? \"checked\" : \"unchecked\"", "attr.data-disabled": "radioItem.disabled() ? \"\" : undefined" } }, exportAs: ["rdxRadioIndicator"], ngImport: i0 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxRadioIndicatorDirective, decorators: [{
             type: Directive,
@@ -200,8 +307,14 @@ 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.disabled() ? "" : undefined'
+                        '[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"'
                     }
                 }]
         }] });
@@ -209,31 +322,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxRadioItemInputDirective {
     constructor() {
         this.radioItem = injectRadioItem();
-        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+        this.radioGroup = inject(RDX_RADIO_GROUP);
+        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() || undefined, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-        this.required = input(this.radioItem.required(), ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-        this.disabled = input(this.radioItem.disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* 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 */ []));
+        let isInitial = true;
+        effect(() => {
+            const checked = this.checked();
+            if (isInitial) {
+                isInitial = false;
+                return;
+            }
+            if (checked) {
+                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: RdxRadioItemInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxRadioItemInputDirective, isStandalone: true, selector: "[rdxRadioItemInput]", inputs: { name: { classPropertyName: "name", publicName: "name", 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 } }, host: { attributes: { "type": "radio" }, properties: { "attr.name": "name()", "attr.required": "required()", "attr.disabled": "disabled() ? disabled() : undefined", "attr.checked": "checked()", "attr.value": "value()" } }, 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" }, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxRadioItemInputDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxRadioItemInput]',
+                    selector: 'input[rdxRadioItemInput]',
                     exportAs: 'rdxRadioItemInput',
                     hostDirectives: [{ directive: RdxVisuallyHiddenDirective, inputs: ['feature'] }],
                     host: {
                         type: 'radio',
+                        tabindex: '-1',
+                        'aria-hidden': 'true',
                         '[attr.name]': 'name()',
-                        '[attr.required]': 'required()',
-                        '[attr.disabled]': 'disabled() ? disabled() : undefined',
-                        '[attr.checked]': 'checked()',
-                        '[attr.value]': 'value()'
+                        '[attr.form]': 'form()',
+                        '[attr.required]': 'required() ? "" : undefined',
+                        '[attr.disabled]': 'disabled() ? "" : undefined',
+                        '[attr.checked]': 'checked() ? "" : undefined',
+                        '[checked]': 'checked()',
+                        '[attr.value]': 'value()',
+                        '[style]': `{
+          position: 'absolute',
+          pointerEvents: 'none',
+          opacity: 0,
+          margin: 0,
+          inset: 0,
+          transform: 'translateX(-100%)',
+        }`
                     }
                 }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.