@radix-ng/primitives 0.13.0 → 0.15.0

package/fesm2022/radix-ng-primitives-visually-hidden.mjs

@@ -0,0 +1,189 @@
+import * as i0 from '@angular/core';
+import { input, Directive, inject, ElementRef, effect, computed } from '@angular/core';
+
+/**
+ *
+ * <span rdxVisuallyHidden [feature]="'fully-hidden'">
+ *   <ng-content></ng-content>
+ * </span>
+ *
+ * <button (click)="directiveInstance.feature.set('focusable')">Make Focusable</button>
+ * <button (click)="directiveInstance.feature.set('fully-hidden')">Hide</button>
+ */
+class RdxVisuallyHiddenDirective {
+    constructor() {
+        this.feature = input('focusable');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxVisuallyHiddenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.1", type: RdxVisuallyHiddenDirective, isStandalone: true, selector: "[rdxVisuallyHidden]", inputs: { feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "feature() === \"focusable\" ? \"true\" : null", "hidden": "feature() === \"fully-hidden\" ? true : null", "attr.tabindex": "feature() === \"fully-hidden\" ? \"-1\" : null", "style.position": "\"absolute\"", "style.border": "\"0\"", "style.width": "\"1px\"", "style.display": "feature() === \"focusable\" ? \"inline-block\" : \"none\"", "style.height": "\"1px\"", "style.padding": "\"0\"", "style.margin": "\"-1px\"", "style.overflow": "\"hidden\"", "style.clip": "\"rect(0, 0, 0, 0)\"", "style.white-space": "\"nowrap\"", "style.word-wrap": "\"normal\"" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxVisuallyHiddenDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxVisuallyHidden]',
+                    standalone: true,
+                    host: {
+                        '[attr.aria-hidden]': 'feature() === "focusable" ? "true" : null',
+                        '[hidden]': 'feature() === "fully-hidden" ? true : null',
+                        '[attr.tabindex]': 'feature() === "fully-hidden" ? "-1" : null',
+                        '[style.position]': '"absolute"',
+                        '[style.border]': '"0"',
+                        '[style.width]': '"1px"',
+                        '[style.display]': 'feature() === "focusable" ? "inline-block" : "none"',
+                        '[style.height]': '"1px"',
+                        '[style.padding]': '"0"',
+                        '[style.margin]': '"-1px"',
+                        '[style.overflow]': '"hidden"',
+                        '[style.clip]': '"rect(0, 0, 0, 0)"',
+                        '[style.white-space]': '"nowrap"',
+                        '[style.word-wrap]': '"normal"'
+                    }
+                }]
+        }] });
+
+/**
+ *
+ */
+class RdxVisuallyHiddenInputBubbleDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.name = input('');
+        this.value = input(null);
+        this.checked = input(undefined);
+        this.required = input(undefined);
+        this.disabled = input(undefined);
+        this.feature = input('fully-hidden');
+        effect(() => {
+            this.updateInputValue();
+        });
+    }
+    onChange() {
+        this.updateInputValue();
+    }
+    updateInputValue() {
+        let valueChanged = false;
+        let checkedChanged = false;
+        // Check if the value has changed before applying the update
+        const currentValue = this.inputElement.value;
+        const newValue = String(this.value());
+        if (currentValue !== newValue) {
+            this.inputElement.value = newValue;
+            valueChanged = true;
+        }
+        if (this.inputElement.type === 'checkbox' || this.inputElement.type === 'radio') {
+            const currentChecked = this.inputElement.checked;
+            const newChecked = !!this.checked();
+            if (currentChecked !== newChecked) {
+                this.inputElement.checked = newChecked;
+                checkedChanged = true;
+            }
+        }
+        if (valueChanged || checkedChanged) {
+            this.dispatchInputEvents();
+        }
+    }
+    get inputElement() {
+        return this.elementRef.nativeElement;
+    }
+    dispatchInputEvents() {
+        const inputEvent = new Event('input', { bubbles: true });
+        const changeEvent = new Event('change', { bubbles: true });
+        this.inputElement.dispatchEvent(inputEvent);
+        this.inputElement.dispatchEvent(changeEvent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxVisuallyHiddenInputBubbleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.1", type: RdxVisuallyHiddenInputBubbleDirective, isStandalone: true, selector: "[rdxVisuallyHiddenInputBubble]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", 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 }, feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "change": "onChange()" }, properties: { "attr.name": "name()", "attr.required": "required()", "attr.disabled": "disabled()", "attr.checked": "checked()", "value": "value()" } }, hostDirectives: [{ directive: RdxVisuallyHiddenDirective, inputs: ["feature", "feature"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxVisuallyHiddenInputBubbleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxVisuallyHiddenInputBubble]',
+                    standalone: true,
+                    hostDirectives: [{ directive: RdxVisuallyHiddenDirective, inputs: ['feature: feature'] }],
+                    host: {
+                        '[attr.name]': 'name()',
+                        '[attr.required]': 'required()',
+                        '[attr.disabled]': 'disabled()',
+                        '[attr.checked]': 'checked()',
+                        '[value]': 'value()',
+                        '(change)': 'onChange()'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+// Implementation from https://github.com/unovue/radix-vue
+class RdxVisuallyHiddenInputDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.name = input('');
+        this.value = input(null);
+        this.checked = input(undefined);
+        this.required = input(undefined);
+        this.disabled = input(undefined);
+        this.feature = input('fully-hidden');
+        this.parsedValue = computed(() => {
+            const value = this.value();
+            const name = this.name();
+            if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+                return [{ name, value }];
+            }
+            if (Array.isArray(value)) {
+                return value.flatMap((obj, index) => {
+                    if (typeof obj === 'object') {
+                        return Object.entries(obj).map(([key, val]) => ({
+                            name: `[${name}][${index}][${key}]`,
+                            value: val
+                        }));
+                    }
+                    else {
+                        return { name: `[${name}][${index}]`, value: obj };
+                    }
+                });
+            }
+            if (value !== null && typeof value === 'object') {
+                return Object.entries(value).map(([key, val]) => ({
+                    name: `[${name}][${key}]`,
+                    value: val
+                }));
+            }
+            return [];
+        });
+    }
+    ngOnInit() {
+        const parsedValues = this.parsedValue();
+        parsedValues.forEach((parsed) => {
+            const inputElement = this.elementRef.nativeElement;
+            inputElement.setAttribute('name', parsed.name);
+            inputElement.setAttribute('value', parsed.value);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxVisuallyHiddenInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.1", type: RdxVisuallyHiddenInputDirective, isStandalone: true, selector: "[rdxVisuallyHiddenInput]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", 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 }, feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: RdxVisuallyHiddenInputBubbleDirective, inputs: ["feature", "feature", "name", "name", "value", "value", "checked", "checked", "disabled", "disabled", "required", "required"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxVisuallyHiddenInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxVisuallyHiddenInput]',
+                    standalone: true,
+                    hostDirectives: [
+                        {
+                            directive: RdxVisuallyHiddenInputBubbleDirective,
+                            inputs: [
+                                'feature: feature',
+                                'name: name ',
+                                'value: value',
+                                'checked: checked',
+                                'disabled: disabled',
+                                'required: required'
+                            ]
+                        }
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxVisuallyHiddenDirective, RdxVisuallyHiddenInputBubbleDirective, RdxVisuallyHiddenInputDirective };
+//# sourceMappingURL=radix-ng-primitives-visually-hidden.mjs.map

package/fesm2022/radix-ng-primitives-visually-hidden.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radix-ng-primitives-visually-hidden.mjs","sources":["../../../packages/primitives/visually-hidden/src/visually-hidden.directive.ts","../../../packages/primitives/visually-hidden/src/visually-hidden-input-bubble.directive.ts","../../../packages/primitives/visually-hidden/src/visually-hidden-input.directive.ts","../../../packages/primitives/visually-hidden/radix-ng-primitives-visually-hidden.ts"],"sourcesContent":["import { Directive, input } from '@angular/core';\n\n/**\n *\n * <span rdxVisuallyHidden [feature]=\"'fully-hidden'\">\n *   <ng-content></ng-content>\n * </span>\n *\n * <button (click)=\"directiveInstance.feature.set('focusable')\">Make Focusable</button>\n * <button (click)=\"directiveInstance.feature.set('fully-hidden')\">Hide</button>\n */\n@Directive({\n    selector: '[rdxVisuallyHidden]',\n    standalone: true,\n    host: {\n        '[attr.aria-hidden]': 'feature() === \"focusable\" ? \"true\" : null',\n        '[hidden]': 'feature() === \"fully-hidden\" ? true : null',\n        '[attr.tabindex]': 'feature() === \"fully-hidden\" ? \"-1\" : null',\n        '[style.position]': '\"absolute\"',\n        '[style.border]': '\"0\"',\n        '[style.width]': '\"1px\"',\n        '[style.display]': 'feature() === \"focusable\" ? \"inline-block\" : \"none\"',\n        '[style.height]': '\"1px\"',\n        '[style.padding]': '\"0\"',\n        '[style.margin]': '\"-1px\"',\n        '[style.overflow]': '\"hidden\"',\n        '[style.clip]': '\"rect(0, 0, 0, 0)\"',\n        '[style.white-space]': '\"nowrap\"',\n        '[style.word-wrap]': '\"normal\"'\n    }\n})\nexport class RdxVisuallyHiddenDirective {\n    readonly feature = input<'focusable' | 'fully-hidden'>('focusable');\n}\n","import { Directive, effect, ElementRef, inject, input } from '@angular/core';\nimport { RdxVisuallyHiddenDirective } from './visually-hidden.directive';\n\n/**\n *\n */\n@Directive({\n    selector: '[rdxVisuallyHiddenInputBubble]',\n    standalone: true,\n    hostDirectives: [{ directive: RdxVisuallyHiddenDirective, inputs: ['feature: feature'] }],\n    host: {\n        '[attr.name]': 'name()',\n        '[attr.required]': 'required()',\n        '[attr.disabled]': 'disabled()',\n        '[attr.checked]': 'checked()',\n        '[value]': 'value()',\n        '(change)': 'onChange()'\n    }\n})\nexport class RdxVisuallyHiddenInputBubbleDirective<T> {\n    private readonly elementRef = inject(ElementRef);\n\n    readonly name = input<string>('');\n    readonly value = input<T | null>(null);\n    readonly checked = input<boolean | undefined>(undefined);\n    readonly required = input<boolean | undefined>(undefined);\n    readonly disabled = input<boolean | undefined>(undefined);\n    readonly feature = input<string>('fully-hidden');\n\n    constructor() {\n        effect(() => {\n            this.updateInputValue();\n        });\n    }\n\n    protected onChange() {\n        this.updateInputValue();\n    }\n\n    private updateInputValue() {\n        let valueChanged = false;\n        let checkedChanged = false;\n\n        // Check if the value has changed before applying the update\n        const currentValue = this.inputElement.value;\n        const newValue = String(this.value());\n\n        if (currentValue !== newValue) {\n            this.inputElement.value = newValue;\n            valueChanged = true;\n        }\n\n        if (this.inputElement.type === 'checkbox' || this.inputElement.type === 'radio') {\n            const currentChecked = this.inputElement.checked;\n            const newChecked = !!this.checked();\n\n            if (currentChecked !== newChecked) {\n                this.inputElement.checked = newChecked;\n                checkedChanged = true;\n            }\n        }\n\n        if (valueChanged || checkedChanged) {\n            this.dispatchInputEvents();\n        }\n    }\n\n    private get inputElement() {\n        return this.elementRef.nativeElement;\n    }\n\n    private dispatchInputEvents() {\n        const inputEvent = new Event('input', { bubbles: true });\n        const changeEvent = new Event('change', { bubbles: true });\n\n        this.inputElement.dispatchEvent(inputEvent);\n        this.inputElement.dispatchEvent(changeEvent);\n    }\n}\n","// Implementation from https://github.com/unovue/radix-vue\n\nimport { Directive, ElementRef, OnInit, computed, inject, input } from '@angular/core';\nimport { RdxVisuallyHiddenInputBubbleDirective } from './visually-hidden-input-bubble.directive';\n\n@Directive({\n    selector: '[rdxVisuallyHiddenInput]',\n    standalone: true,\n    hostDirectives: [\n        {\n            directive: RdxVisuallyHiddenInputBubbleDirective,\n            inputs: [\n                'feature: feature',\n                'name: name ',\n                'value: value',\n                'checked: checked',\n                'disabled: disabled',\n                'required: required'\n            ]\n        }\n    ]\n})\nexport class RdxVisuallyHiddenInputDirective<T> implements OnInit {\n    private readonly elementRef = inject(ElementRef);\n\n    readonly name = input<string>('');\n    readonly value = input<T | null>(null);\n    readonly checked = input<boolean | undefined>(undefined);\n    readonly required = input<boolean | undefined>(undefined);\n    readonly disabled = input<boolean | undefined>(undefined);\n    readonly feature = input<'focusable' | 'fully-hidden'>('fully-hidden');\n\n    readonly parsedValue = computed<{ name: string; value: any }[]>(() => {\n        const value = this.value();\n        const name = this.name();\n\n        if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {\n            return [{ name, value }];\n        }\n\n        if (Array.isArray(value)) {\n            return value.flatMap((obj, index) => {\n                if (typeof obj === 'object') {\n                    return Object.entries(obj).map(([key, val]) => ({\n                        name: `[${name}][${index}][${key}]`,\n                        value: val\n                    }));\n                } else {\n                    return { name: `[${name}][${index}]`, value: obj };\n                }\n            });\n        }\n\n        if (value !== null && typeof value === 'object') {\n            return Object.entries(value).map(([key, val]) => ({\n                name: `[${name}][${key}]`,\n                value: val\n            }));\n        }\n\n        return [];\n    });\n\n    ngOnInit() {\n        const parsedValues = this.parsedValue();\n\n        parsedValues.forEach((parsed) => {\n            const inputElement = this.elementRef.nativeElement;\n            inputElement.setAttribute('name', parsed.name);\n            inputElement.setAttribute('value', parsed.value);\n        });\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.RdxVisuallyHiddenDirective","i1.RdxVisuallyHiddenInputBubbleDirective"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radix-ng/primitives",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -49,6 +49,12 @@
       "esm": "./esm2022/alert-dialog/radix-ng-primitives-alert-dialog.mjs",
       "default": "./fesm2022/radix-ng-primitives-alert-dialog.mjs"
     },
+    "./aspect-ratio": {
+      "types": "./aspect-ratio/index.d.ts",
+      "esm2022": "./esm2022/aspect-ratio/radix-ng-primitives-aspect-ratio.mjs",
+      "esm": "./esm2022/aspect-ratio/radix-ng-primitives-aspect-ratio.mjs",
+      "default": "./fesm2022/radix-ng-primitives-aspect-ratio.mjs"
+    },
     "./avatar": {
       "types": "./avatar/index.d.ts",
       "esm2022": "./esm2022/avatar/radix-ng-primitives-avatar.mjs",
@@ -73,6 +79,12 @@
       "esm": "./esm2022/context-menu/radix-ng-primitives-context-menu.mjs",
       "default": "./fesm2022/radix-ng-primitives-context-menu.mjs"
     },
+    "./core": {
+      "types": "./core/index.d.ts",
+      "esm2022": "./esm2022/core/radix-ng-primitives-core.mjs",
+      "esm": "./esm2022/core/radix-ng-primitives-core.mjs",
+      "default": "./fesm2022/radix-ng-primitives-core.mjs"
+    },
     "./dialog": {
       "types": "./dialog/index.d.ts",
       "esm2022": "./esm2022/dialog/radix-ng-primitives-dialog.mjs",
@@ -144,6 +156,12 @@
       "esm2022": "./esm2022/toggle-group/radix-ng-primitives-toggle-group.mjs",
       "esm": "./esm2022/toggle-group/radix-ng-primitives-toggle-group.mjs",
       "default": "./fesm2022/radix-ng-primitives-toggle-group.mjs"
+    },
+    "./visually-hidden": {
+      "types": "./visually-hidden/index.d.ts",
+      "esm2022": "./esm2022/visually-hidden/radix-ng-primitives-visually-hidden.mjs",
+      "esm": "./esm2022/visually-hidden/radix-ng-primitives-visually-hidden.mjs",
+      "default": "./fesm2022/radix-ng-primitives-visually-hidden.mjs"
     }
   }
 }

package/radio/src/radio-root.directive.d.ts

@@ -61,8 +61,8 @@ export declare class RdxRadioGroupDirective implements RadioGroupProps, RadioGro
     /**
      * When focus leaves the radio group.
      */
-    _onFocusin(event: FocusEvent): void;
-    _onKeydown(event: KeyboardEvent): void;
+    protected onFocusin(event: FocusEvent): void;
+    protected onKeydown(event: KeyboardEvent): void;
     private selectFocusedItem;
     private updateActiveItem;
     private tabNavigation;

package/separator/src/separator.directive.d.ts

@@ -1,3 +1,4 @@
+import { BooleanInput } from '@angular/cdk/coercion';
 import * as i0 from "@angular/core";
 declare const ORIENTATIONS: readonly ["horizontal", "vertical"];
 export type Orientation = (typeof ORIENTATIONS)[number];
@@ -12,11 +13,34 @@ export interface SeparatorProps {
      */
     decorative?: boolean;
 }
-export declare class RdxSeparatorRootDirective implements SeparatorProps {
-    orientation: Orientation;
-    decorative: boolean;
+/**
+ * Directive that adds accessible and configurable separator element to the DOM.
+ * This can be either horizontal or vertical and optionally decorative (which removes
+ * it from the accessibility tree).
+ */
+export declare class RdxSeparatorRootDirective {
+    /**
+     * Orientation of the separator, can be either 'horizontal' or 'vertical'.
+     * Defaults to 'horizontal'.
+     */
+    readonly orientation: import("@angular/core").InputSignal<"horizontal" | "vertical">;
+    /**
+     * If true, the separator will be considered decorative and removed from
+     * the accessibility tree. Defaults to false.
+     */
+    readonly decorative: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Computes the `role` attribute for the separator. If `decorative` is true,
+     * the role is set to "none", otherwise it is "separator".
+     */
+    protected readonly computedRole: import("@angular/core").Signal<"none" | "separator">;
+    /**
+     * Computes the `aria-orientation` attribute. It is set to "vertical" only if
+     * the separator is not decorative and the orientation is set to "vertical".
+     * For horizontal orientation, the attribute is omitted.
+     */
+    protected readonly computedAriaOrientation: import("@angular/core").Signal<"vertical" | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxSeparatorRootDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxSeparatorRootDirective, "div[rdxSeparatorRoot]", never, { "orientation": { "alias": "orientation"; "required": false; }; "decorative": { "alias": "decorative"; "required": false; }; }, {}, never, never, true, never>;
-    static ngAcceptInputType_decorative: unknown;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxSeparatorRootDirective, "div[rdxSeparatorRoot]", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 export {};

package/switch/src/switch-root.directive.d.ts

@@ -1,6 +1,5 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { EventEmitter, InjectionToken, InputSignalWithTransform, ModelSignal } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { InjectionToken, InputSignalWithTransform, ModelSignal, OutputEmitterRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare const RdxSwitchToken: InjectionToken<RdxSwitchRootDirective>;
 export declare function injectSwitch(): RdxSwitchRootDirective;
@@ -8,39 +7,28 @@ export interface SwitchProps {
     checked?: ModelSignal<boolean>;
     defaultChecked?: boolean;
     required?: InputSignalWithTransform<boolean, BooleanInput>;
-    onCheckedChange?: EventEmitter<boolean>;
+    onCheckedChange?: OutputEmitterRef<boolean>;
 }
-export declare class RdxSwitchRootDirective implements SwitchProps, ControlValueAccessor {
+export declare class RdxSwitchRootDirective implements SwitchProps {
     readonly id: import("@angular/core").InputSignal<string>;
     protected readonly elementId: import("@angular/core").Signal<string | null>;
-    readonly required: InputSignalWithTransform<boolean, BooleanInput>;
-    readonly checked: ModelSignal<boolean>;
-    readonly disabled: InputSignalWithTransform<boolean, BooleanInput>;
-    readonly disabledState: import("@angular/core").Signal<boolean>;
-    onCheckedChange: EventEmitter<boolean>;
-    /**
-     * The method to be called in order to update ngModel.
-     */
-    _onChange?: (checked: boolean) => void;
     /**
-     * onTouch function registered via registerOnTouch (ControlValueAccessor).
+     * When true, indicates that the user must check the switch before the owning form can be submitted.
      */
-    _onTouched?: () => void;
+    readonly required: InputSignalWithTransform<boolean, BooleanInput>;
     /**
-     * Registers a function to call when the checked state changes.
-     * @param fn Function to call on change.
+     * The controlled state of the switch. Must be used in conjunction with onCheckedChange.
      */
-    registerOnChange(fn: (checked: boolean) => void): void;
+    readonly checked: ModelSignal<boolean>;
     /**
-     * Registers a function to call when the component is touched.
-     * @param fn Function to call on touch.
+     * When true, prevents the user from interacting with the switch.
      */
-    registerOnTouched(fn: () => void): void;
+    readonly disabled: InputSignalWithTransform<boolean, BooleanInput>;
+    readonly disabledState: import("@angular/core").Signal<boolean>;
     /**
-     * Writes a new value to the model.
-     * @param checked The new checked value.
+     * Event handler called when the state of the switch changes.
      */
-    writeValue(checked: boolean): void;
+    readonly onCheckedChange: OutputEmitterRef<boolean>;
     /**
      * Toggles the checked state of the switch.
      * If the switch is disabled, the function returns early.

package/toggle/src/toggle.directive.d.ts

@@ -1,4 +1,5 @@
-import { EventEmitter } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { OutputEmitterRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export interface ToggleProps {
     /**
@@ -14,17 +15,33 @@ export interface ToggleProps {
     /**
      * The callback that fires when the state of the toggle changes.
      */
-    onPressedChange?: EventEmitter<boolean>;
+    onPressedChange?: OutputEmitterRef<boolean>;
+    /**
+     * Whether the toggle is disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean;
 }
 export declare class RdxToggleDirective {
-    readonly defaultPressed: import("@angular/core").InputSignal<boolean>;
+    /**
+     * The pressed state of the toggle when it is initially rendered.
+     * Use when you do not need to control its pressed state.
+     */
+    readonly defaultPressed: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The controlled pressed state of the toggle.
+     * Must be used in conjunction with `onPressedChange`.
+     */
     readonly pressed: import("@angular/core").ModelSignal<boolean>;
-    readonly disabled: import("@angular/core").InputSignal<boolean>;
     /**
-     * Event emitted when the toggle is pressed.
+     * When true, prevents the user from interacting with the toggle.
+     */
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Event handler called when the pressed state of the toggle changes.
      */
-    readonly onPressedChange: EventEmitter<boolean>;
+    readonly onPressedChange: OutputEmitterRef<boolean>;
     protected toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxToggleDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleDirective, "button[rdxToggle]", ["rdxToggle"], { "defaultPressed": { "alias": "defaultPressed"; "required": false; "isSignal": true; }; "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "pressed": "pressedChange"; "onPressedChange": "onPressedChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleDirective, "[rdxToggle]", ["rdxToggle"], { "defaultPressed": { "alias": "defaultPressed"; "required": false; "isSignal": true; }; "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "pressed": "pressedChange"; "onPressedChange": "onPressedChange"; }, never, never, true, never>;
 }

package/toggle-group/index.d.ts

@@ -1,5 +1,5 @@
-export * from './src/toggle-group-button.directive';
-export * from './src/toggle-group-button.token';
-export * from './src/toggle-group-multi.directive';
+export * from './src/toggle-group-item.directive';
+export * from './src/toggle-group-item.token';
+export * from './src/toggle-group-multiple.directive';
 export * from './src/toggle-group.directive';
 export * from './src/toggle-group.token';

package/toggle-group/src/{toggle-group-button.directive.d.ts → toggle-group-item.directive.d.ts}

@@ -1,11 +1,13 @@
+import { FocusableOption } from '@angular/cdk/a11y';
 import { OnChanges, SimpleChanges } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class RdxToggleGroupButtonDirective implements OnChanges {
+export declare class RdxToggleGroupItemDirective implements OnChanges, FocusableOption {
     /**
      * Access the toggle group.
      * @ignore
      */
-    protected readonly toggleGroup: import("@radix-ng/primitives/toggle-group").RdxToggleGroupDirective | import("@radix-ng/primitives/toggle-group").RdxToggleGroupMultiDirective;
+    protected readonly toggleGroup: import("@radix-ng/primitives/toggle-group").RdxToggleGroupDirective | import("@radix-ng/primitives/toggle-group").RdxToggleGroupMultipleDirective;
+    private readonly elementRef;
     /**
      * The value of this toggle button.
      */
@@ -23,6 +25,10 @@ export declare class RdxToggleGroupButtonDirective implements OnChanges {
      * @ignore
      */
     ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * @ignore
+     */
+    focus(): void;
     /**
      * @ignore
      */
@@ -33,7 +39,7 @@ export declare class RdxToggleGroupButtonDirective implements OnChanges {
      * @ignore
      */
     updateDisabled(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxToggleGroupButtonDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleGroupButtonDirective, "button[rdxToggleGroupButton]", never, { "value": { "alias": "value"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxToggleGroupItemDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleGroupItemDirective, "[rdxToggleGroupItem]", ["rdxToggleGroupItem"], { "value": { "alias": "value"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
     static ngAcceptInputType_disabled: unknown;
 }

package/toggle-group/src/toggle-group-item.token.d.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+import type { RdxToggleGroupItemDirective } from './toggle-group-item.directive';
+export declare const RdxToggleGroupItemToken: InjectionToken<RdxToggleGroupItemDirective>;

package/toggle-group/src/{toggle-group-multi.directive.d.ts → toggle-group-multiple.directive.d.ts}

@@ -1,8 +1,8 @@
 import { AfterContentInit, EventEmitter, OnChanges, QueryList, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import type { RdxToggleGroupButtonDirective } from './toggle-group-button.directive';
+import type { RdxToggleGroupItemDirective } from './toggle-group-item.directive';
 import * as i0 from "@angular/core";
-export declare class RdxToggleGroupMultiDirective implements OnChanges, AfterContentInit, ControlValueAccessor {
+export declare class RdxToggleGroupMultipleDirective implements OnChanges, AfterContentInit, ControlValueAccessor {
     /**
      * The selected toggle button.
      */
@@ -30,7 +30,11 @@ export declare class RdxToggleGroupMultiDirective implements OnChanges, AfterCon
      * Access the buttons in the toggle group.
      * @ignore
      */
-    protected buttons?: QueryList<RdxToggleGroupButtonDirective>;
+    protected buttons?: QueryList<RdxToggleGroupItemDirective>;
+    /**
+     * FocusKeyManager to manage keyboard interactions.
+     */
+    private keyManager;
     /**
      * The value change callback.
      * @ignore
@@ -49,6 +53,8 @@ export declare class RdxToggleGroupMultiDirective implements OnChanges, AfterCon
      * @ignore
      */
     ngAfterContentInit(): void;
+    protected onFocusIn(): void;
+    protected handleKeydown(event: KeyboardEvent): void;
     /**
      * Determine if a value is selected.
      * @param value The value to check.
@@ -86,8 +92,8 @@ export declare class RdxToggleGroupMultiDirective implements OnChanges, AfterCon
      * @ignore
      */
     setDisabledState(isDisabled: boolean): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxToggleGroupMultiDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleGroupMultiDirective, "[rdxToggleGroupMulti]", never, { "value": { "alias": "rdxToggleGroupMultiValue"; "required": false; }; "orientation": { "alias": "rdxToggleGroupMultiOrientation"; "required": false; }; "disabled": { "alias": "rdxToggleGroupMultiDisabled"; "required": false; }; "wrap": { "alias": "rdxToggleGroupMultiWrap"; "required": false; }; "valueChange": { "alias": "rdxToggleGroupMultiValueChange"; "required": false; }; }, {}, ["buttons"], never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxToggleGroupMultipleDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleGroupMultipleDirective, "[rdxToggleGroupMultiple]", ["rdxToggleGroupMultiple"], { "value": { "alias": "value"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "wrap": { "alias": "wrap"; "required": false; }; "valueChange": { "alias": "valueChange"; "required": false; }; }, {}, ["buttons"], never, true, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_wrap: unknown;
 }

package/toggle-group/src/toggle-group.directive.d.ts

@@ -1,6 +1,6 @@
 import { AfterContentInit, EventEmitter, OnChanges, QueryList, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import type { RdxToggleGroupButtonDirective } from './toggle-group-button.directive';
+import type { RdxToggleGroupItemDirective } from './toggle-group-item.directive';
 import * as i0 from "@angular/core";
 export declare class RdxToggleGroupDirective implements OnChanges, AfterContentInit, ControlValueAccessor {
     /**
@@ -29,7 +29,11 @@ export declare class RdxToggleGroupDirective implements OnChanges, AfterContentI
     /**
      * Access the buttons in the toggle group.
      */
-    protected buttons?: QueryList<RdxToggleGroupButtonDirective>;
+    protected buttons?: QueryList<RdxToggleGroupItemDirective>;
+    /**
+     * FocusKeyManager to manage keyboard interactions.
+     */
+    private keyManager;
     /**
      * The value change callback.
      */
@@ -40,6 +44,8 @@ export declare class RdxToggleGroupDirective implements OnChanges, AfterContentI
     protected onTouched?: () => void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterContentInit(): void;
+    protected onFocusIn(): void;
+    protected handleKeydown(event: KeyboardEvent): void;
     /**
      * Determine if a value is selected.
      * @param value The value to check.
@@ -78,7 +84,7 @@ export declare class RdxToggleGroupDirective implements OnChanges, AfterContentI
      */
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxToggleGroupDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleGroupDirective, "[rdxToggleGroup]", never, { "value": { "alias": "value"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "wrap": { "alias": "wrap"; "required": false; }; "valueChange": { "alias": "valueChange"; "required": false; }; }, {}, ["buttons"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleGroupDirective, "[rdxToggleGroup]", ["rdxToggleGroup"], { "value": { "alias": "value"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "wrap": { "alias": "wrap"; "required": false; }; "valueChange": { "alias": "valueChange"; "required": false; }; }, {}, ["buttons"], never, true, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_wrap: unknown;
 }

package/toggle-group/src/toggle-group.token.d.ts

@@ -1,5 +1,5 @@
 import { InjectionToken } from '@angular/core';
-import type { RdxToggleGroupMultiDirective } from './toggle-group-multi.directive';
+import type { RdxToggleGroupMultipleDirective } from './toggle-group-multiple.directive';
 import type { RdxToggleGroupDirective } from './toggle-group.directive';
-export declare const RdxToggleGroupToken: InjectionToken<RdxToggleGroupDirective | RdxToggleGroupMultiDirective>;
-export declare function injectToggleGroup(): RdxToggleGroupDirective | RdxToggleGroupMultiDirective;
+export declare const RdxToggleGroupToken: InjectionToken<RdxToggleGroupDirective | RdxToggleGroupMultipleDirective>;
+export declare function injectToggleGroup(): RdxToggleGroupDirective | RdxToggleGroupMultipleDirective;

package/visually-hidden/README.md

@@ -0,0 +1,3 @@
+# @radix-ng/primitives/visually-hidden
+
+Secondary entry point of `@radix-ng/primitives`. It can be used by importing from `@radix-ng/primitives/visually-hidden`.

package/visually-hidden/index.d.ts

@@ -0,0 +1,3 @@
+export * from './src/visually-hidden-input-bubble.directive';
+export * from './src/visually-hidden-input.directive';
+export * from './src/visually-hidden.directive';

package/visually-hidden/src/visually-hidden-input-bubble.directive.d.ts

@@ -0,0 +1,21 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./visually-hidden.directive";
+/**
+ *
+ */
+export declare class RdxVisuallyHiddenInputBubbleDirective<T> {
+    private readonly elementRef;
+    readonly name: import("@angular/core").InputSignal<string>;
+    readonly value: import("@angular/core").InputSignal<T | null>;
+    readonly checked: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly required: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly disabled: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly feature: import("@angular/core").InputSignal<string>;
+    constructor();
+    protected onChange(): void;
+    private updateInputValue;
+    private get inputElement();
+    private dispatchInputEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxVisuallyHiddenInputBubbleDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxVisuallyHiddenInputBubbleDirective<any>, "[rdxVisuallyHiddenInputBubble]", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "feature": { "alias": "feature"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxVisuallyHiddenDirective; inputs: { "feature": "feature"; }; outputs: {}; }]>;
+}