@radix-ng/primitives 0.5.0 → 0.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"radix-ng-primitives-toggle.mjs","sources":["../../../packages/primitives/toggle/src/toggle.directive.ts","../../../packages/primitives/toggle/radix-ng-primitives-toggle.ts"],"sourcesContent":["import {\n    booleanAttribute,\n    Directive,\n    EventEmitter,\n    HostListener,\n    Input,\n    Output\n} from '@angular/core';\n\nlet uniqueId = 0;\n\n@Directive({\n    selector: 'button[rdxToggle]',\n    standalone: true,\n    host: {\n        type: 'button',\n        '[attr.aria-pressed]': 'pressed',\n        '[attr.data-state]': 'pressed ? \"on\" : \"off\"',\n        '[attr.data-disabled]': 'disabled'\n    }\n})\nexport class RdxToggleDirective {\n    /**\n     * Whether the toggle is pressed.\n     * @default false\n     */\n    @Input({ alias: 'rdxTogglePressed', transform: booleanAttribute }) pressed = false;\n\n    /**\n     * Whether the toggle is disabled.\n     * @default false\n     */\n    @Input({ alias: 'rdxToggleDisabled', transform: booleanAttribute }) disabled = false;\n\n    /**\n     * Determine element id\n     */\n    @Input() id = 'rdx-toggle-' + uniqueId++;\n    /**\n     * Event emitted when the toggle is pressed.\n     */\n    @Output('rdxToggleOnPressedChange') readonly pressedChange = new EventEmitter<boolean>();\n\n    /**\n     * Toggle the pressed state.\n     */\n    @HostListener('click')\n    toggle(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.pressed = !this.pressed;\n        this.pressedChange.emit(this.pressed);\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AASA,IAAI,QAAQ,GAAG,CAAC,CAAC;MAYJ,kBAAkB,CAAA;AAV/B,IAAA,WAAA,GAAA;AAWI;;;AAGG;QACgE,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;AAEnF;;;AAGG;QACiE,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAErF;;AAEG;AACM,QAAA,IAAA,CAAA,EAAE,GAAG,aAAa,GAAG,QAAQ,EAAE,CAAC;AACzC;;AAEG;AAC0C,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,YAAY,EAAW,CAAC;AAc5F,KAAA;AAZG;;AAEG;IAEH,MAAM,GAAA;AACF,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,OAAO;SACV;AAED,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACzC;8GAjCQ,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,CAAA,kBAAA,EAAA,SAAA,EAKoB,gBAAgB,CAAA,EAAA,QAAA,EAAA,CAAA,mBAAA,EAAA,UAAA,EAMf,gBAAgB,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,0BAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,UAAA,EAAA,EAAA,UAAA,EAAA,EAAA,mBAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAXvD,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAV9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,mBAAmB;AAC7B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACF,wBAAA,IAAI,EAAE,QAAQ;AACd,wBAAA,qBAAqB,EAAE,SAAS;AAChC,wBAAA,mBAAmB,EAAE,wBAAwB;AAC7C,wBAAA,sBAAsB,EAAE,UAAU;AACrC,qBAAA;AACJ,iBAAA,CAAA;8BAMsE,OAAO,EAAA,CAAA;sBAAzE,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA,EAAE,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAMG,QAAQ,EAAA,CAAA;sBAA3E,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA,EAAE,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAKzD,EAAE,EAAA,CAAA;sBAAV,KAAK;gBAIuC,aAAa,EAAA,CAAA;sBAAzD,MAAM;uBAAC,0BAA0B,CAAA;gBAMlC,MAAM,EAAA,CAAA;sBADL,YAAY;uBAAC,OAAO,CAAA;;;AC9CzB;;AAEG;;;;"}
+{"version":3,"file":"radix-ng-primitives-toggle.mjs","sources":["../../../packages/primitives/toggle/src/toggle-root.directive.ts","../../../packages/primitives/toggle/radix-ng-primitives-toggle.ts"],"sourcesContent":["import { booleanAttribute, Directive, EventEmitter, Input, Output } from '@angular/core';\n\nlet uniqueId = 0;\n\nexport interface ToggleProps {\n    /**\n     * The controlled state of the toggle.\n     */\n    pressed?: boolean;\n    /**\n     * The state of the toggle when initially rendered. Use `defaultPressed`\n     * if you do not need to control the state of the toggle.\n     * @defaultValue false\n     */\n    defaultPressed?: boolean;\n    /**\n     * The callback that fires when the state of the toggle changes.\n     */\n    onPressedChange?: EventEmitter<boolean>;\n}\n\n@Directive({\n    selector: 'button[ToggleRoot]',\n    exportAs: 'ToggleRoot',\n    standalone: true,\n    host: {\n        type: 'button',\n        '[attr.aria-pressed]': 'pressed',\n        '[attr.data-state]': 'pressed ? \"on\" : \"off\"',\n        '[attr.data-disabled]': 'disabled',\n\n        '(click)': '_toggle($event)'\n    }\n})\nexport class RdxToggleRootDirective implements ToggleProps {\n    @Input({ alias: 'rdxTogglePressed', transform: booleanAttribute }) pressed = false;\n\n    @Input({ alias: 'rdxToggleDisabled', transform: booleanAttribute }) disabled = false;\n\n    @Input() id = 'rdx-toggle-' + uniqueId++;\n    /**\n     * Event emitted when the toggle is pressed.\n     */\n    @Output('rdxToggleOnPressedChange') readonly onPressedChange = new EventEmitter<boolean>();\n\n    _toggle(event: MouseEvent): void {\n        if (this.disabled) {\n            return;\n        }\n        this.pressed = !this.pressed;\n        this.onPressedChange.emit(this.pressed);\n\n        event.stopPropagation();\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA,IAAI,QAAQ,GAAG,CAAC,CAAC;MAgCJ,sBAAsB,CAAA;AAbnC,IAAA,WAAA,GAAA;QAcuE,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;QAEf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAE5E,QAAA,IAAA,CAAA,EAAE,GAAG,aAAa,GAAG,QAAQ,EAAE,CAAC;AACzC;;AAEG;AAC0C,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,YAAY,EAAW,CAAC;AAW9F,KAAA;AATG,IAAA,OAAO,CAAC,KAAiB,EAAA;AACrB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,OAAO;SACV;AACD,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAExC,KAAK,CAAC,eAAe,EAAE,CAAC;KAC3B;+GAnBQ,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;mGAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,CAAA,kBAAA,EAAA,SAAA,EACgB,gBAAgB,CAAA,EAAA,QAAA,EAAA,CAAA,mBAAA,EAAA,UAAA,EAEf,gBAAgB,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,0BAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,EAAA,UAAA,EAAA,EAAA,mBAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;4FAHvD,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAblC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,oBAAoB;AAC9B,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACF,wBAAA,IAAI,EAAE,QAAQ;AACd,wBAAA,qBAAqB,EAAE,SAAS;AAChC,wBAAA,mBAAmB,EAAE,wBAAwB;AAC7C,wBAAA,sBAAsB,EAAE,UAAU;AAElC,wBAAA,SAAS,EAAE,iBAAiB;AAC/B,qBAAA;AACJ,iBAAA,CAAA;8BAEsE,OAAO,EAAA,CAAA;sBAAzE,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA,EAAE,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAEG,QAAQ,EAAA,CAAA;sBAA3E,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA,EAAE,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAEzD,EAAE,EAAA,CAAA;sBAAV,KAAK;gBAIuC,eAAe,EAAA,CAAA;sBAA3D,MAAM;uBAAC,0BAA0B,CAAA;;;AC3CtC;;AAEG;;;;"}

package/label/index.d.ts

@@ -1 +1 @@
-export * from './src/label.directive';
+export * from './src/label-root.directive';

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

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+export declare class RdxLabelRootDirective {
+    id: string;
+    /**
+     * The id of the element the label is associated with.
+     * @default '-'
+     */
+    readonly htmlFor: import("@angular/core").InputSignal<string>;
+    private readonly elementRef;
+    onMouseDown(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxLabelRootDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxLabelRootDirective, "label[LabelRoot]", ["LabelRoot"], { "id": { "alias": "id"; "required": false; }; "htmlFor": { "alias": "htmlFor"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radix-ng/primitives",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -22,7 +22,6 @@
     "@angular/cdk": "^17.0.0"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.3",
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
@@ -38,11 +37,11 @@
       "esm": "./esm2022/radix-ng-primitives.mjs",
       "default": "./fesm2022/radix-ng-primitives.mjs"
     },
-    "./accordion": {
-      "types": "./accordion/index.d.ts",
-      "esm2022": "./esm2022/accordion/radix-ng-primitives-accordion.mjs",
-      "esm": "./esm2022/accordion/radix-ng-primitives-accordion.mjs",
-      "default": "./fesm2022/radix-ng-primitives-accordion.mjs"
+    "./alert-dialog": {
+      "types": "./alert-dialog/index.d.ts",
+      "esm2022": "./esm2022/alert-dialog/radix-ng-primitives-alert-dialog.mjs",
+      "esm": "./esm2022/alert-dialog/radix-ng-primitives-alert-dialog.mjs",
+      "default": "./fesm2022/radix-ng-primitives-alert-dialog.mjs"
     },
     "./avatar": {
       "types": "./avatar/index.d.ts",
@@ -56,18 +55,18 @@
       "esm": "./esm2022/checkbox/radix-ng-primitives-checkbox.mjs",
       "default": "./fesm2022/radix-ng-primitives-checkbox.mjs"
     },
+    "./collapsible": {
+      "types": "./collapsible/index.d.ts",
+      "esm2022": "./esm2022/collapsible/radix-ng-primitives-collapsible.mjs",
+      "esm": "./esm2022/collapsible/radix-ng-primitives-collapsible.mjs",
+      "default": "./fesm2022/radix-ng-primitives-collapsible.mjs"
+    },
     "./label": {
       "types": "./label/index.d.ts",
       "esm2022": "./esm2022/label/radix-ng-primitives-label.mjs",
       "esm": "./esm2022/label/radix-ng-primitives-label.mjs",
       "default": "./fesm2022/radix-ng-primitives-label.mjs"
     },
-    "./overlay": {
-      "types": "./overlay/index.d.ts",
-      "esm2022": "./esm2022/overlay/radix-ng-primitives-overlay.mjs",
-      "esm": "./esm2022/overlay/radix-ng-primitives-overlay.mjs",
-      "default": "./fesm2022/radix-ng-primitives-overlay.mjs"
-    },
     "./progress": {
       "types": "./progress/index.d.ts",
       "esm2022": "./esm2022/progress/radix-ng-primitives-progress.mjs",
@@ -109,12 +108,6 @@
       "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/progress/index.d.ts

@@ -1,2 +1,3 @@
 export * from './src/progress-indicator.directive';
-export * from './src/progress.directive';
+export * from './src/progress-root.directive';
+export type { ProgressProps } from './src/progress-root.directive';

package/progress/src/progress-indicator.directive.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 export declare class RdxProgressIndicatorDirective {
-    protected readonly progress: import("@radix-ng/primitives/progress").RdxProgressDirective;
+    readonly _progress: import("./progress-root.directive").RdxProgressRootDirective;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxProgressIndicatorDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxProgressIndicatorDirective, "[rdxProgressIndicator]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxProgressIndicatorDirective, "div[ProgressIndicator]", ["ProgressIndicator"], {}, {}, never, never, true, never>;
 }

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

@@ -0,0 +1,29 @@
+import * as i0 from "@angular/core";
+export declare function injectProgress(): RdxProgressRootDirective;
+export type ProgressState = 'indeterminate' | 'loading' | 'complete';
+export interface ProgressProps {
+    value?: number | null | undefined;
+    max?: number;
+    getValueLabel?: string;
+}
+export declare class RdxProgressRootDirective implements ProgressProps {
+    id: string;
+    value: number;
+    /**
+     * @default 100
+     */
+    max: number;
+    valueLabel: (value: number, max: number) => string;
+    /**
+     * Get the state of the progress bar.
+     * @returns 'indeterminate' | 'loading' | 'complete'
+     * @internal
+     */
+    get state(): ProgressState;
+    private getProgressState;
+    private defaultGetValueLabel;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxProgressRootDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxProgressRootDirective, "div[ProgressRoot]", ["ProgressRoot"], { "id": { "alias": "id"; "required": false; }; "value": { "alias": "rdxValue"; "required": false; }; "max": { "alias": "rdxMax"; "required": false; }; "valueLabel": { "alias": "rdxValueLabel"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_value: unknown;
+    static ngAcceptInputType_max: unknown;
+}

package/radio/index.d.ts

@@ -1,5 +1,3 @@
-export * from './src/radio-group.directive';
-export * from './src/radio-group.token';
+export * from './src/radio-root.directive';
 export * from './src/radio-indicator.directive';
 export * from './src/radio-item.directive';
-export * from './src/radio-item.token';

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

@@ -1,13 +1,7 @@
 import * as i0 from "@angular/core";
 export declare class RdxRadioIndicatorDirective {
-    /**
-     * Access the radio group.
-     */
-    protected readonly radioGroup: import("@radix-ng/primitives/radio").RdxRadioGroupDirective;
-    /**
-     * Access the radio group item.
-     */
-    protected readonly radioItem: import("@radix-ng/primitives/radio").RdxRadioItemDirective;
+    protected readonly radioGroup: import("./radio-root.directive").RdxRadioGroupDirective;
+    protected readonly radioItem: import("./radio-item.directive").RdxRadioItemDirective;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxRadioIndicatorDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioIndicatorDirective, "[rdxRadioIndicator]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioIndicatorDirective, "[RadioIndicator]", ["RadioIndicator"], {}, {}, never, never, true, never>;
 }

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

@@ -1,36 +1,17 @@
+import { InjectionToken } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@radix-ng/primitives/roving-focus";
+export declare const RdxRadioItemToken: InjectionToken<RdxRadioItemDirective>;
+export declare function injectRadioItem(): RdxRadioItemDirective;
 export declare class RdxRadioItemDirective {
-    /**
-     * Access the radio group.
-     */
-    protected readonly radioGroup: import("@radix-ng/primitives/radio").RdxRadioGroupDirective;
-    /**
-     * The value of the radio item.
-     */
+    protected readonly radioGroup: import("./radio-root.directive").RdxRadioGroupDirective;
+    id: string;
     value: string;
-    /**
-     * Whether the radio item is disabled.
-     * @default false
-     */
     disabled: boolean;
-    /**
-     * Handle keydown events.
-     * @param event The keydown event.
-     * @internal
-     */
-    protected onKeydown(event: KeyboardEvent): void;
-    /**
-     * When the item receives focus, select it.
-     * @internal
-     */
-    protected onFocus(): void;
-    /**
-     * When the item receives a click, select it.
-     * @internal
-     */
-    protected onClick(): void;
+    _onKeydown(event: KeyboardEvent): void;
+    _onFocus(): void;
+    _onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxRadioItemDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioItemDirective, "button[rdxRadioItem]", never, { "value": { "alias": "value"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusItemDirective; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioItemDirective, "[RadioItem]", ["RadioItem"], { "id": { "alias": "id"; "required": false; }; "value": { "alias": "value"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusItemDirective; inputs: {}; outputs: {}; }]>;
     static ngAcceptInputType_disabled: unknown;
 }

package/radio/src/{radio-group.directive.d.ts → radio-root.directive.d.ts}

@@ -1,25 +1,32 @@
-import { EventEmitter } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, InjectionToken } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import * as i0 from "@angular/core";
 import * as i1 from "@radix-ng/primitives/roving-focus";
-export declare class RdxRadioGroupDirective implements ControlValueAccessor {
-    /**
-     * The value of the radio group.
-     */
+export declare const RdxRadioGroupToken: InjectionToken<RdxRadioGroupDirective>;
+export declare function injectRadioGroup(): RdxRadioGroupDirective;
+interface RadioGroupProps {
+    name?: string;
+    disabled?: boolean;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: EventEmitter<string>;
+}
+export declare class RdxRadioGroupDirective implements RadioGroupProps, ControlValueAccessor {
+    private readonly changeDetector;
     value?: string;
-    /**
-     * Whether the radio group is disabled.
-     */
     disabled: boolean;
     /**
-     * The orientation of the radio group.
-     * @default 'horizontal'
+     * The orientation of the radio group only vertical.
+     * Horizontal radio buttons can sometimes be challenging to scan and localize.
+     * The horizontal arrangement of radio buttons may also lead to difficulties in determining which
+     * label corresponds to which button: whether the label is above or below the button.
+     * @default 'vertical'
      */
-    orientation: 'horizontal' | 'vertical';
+    readonly _orientation = "vertical";
     /**
      * Event emitted when the value of the radio group changes.
      */
-    readonly valueChange: EventEmitter<string>;
+    readonly onValueChange: EventEmitter<string>;
     /**
      * The callback function to call when the value of the radio group changes.
      * @internal
@@ -30,6 +37,7 @@ export declare class RdxRadioGroupDirective implements ControlValueAccessor {
      * @internal
      */
     private onTouched?;
+    constructor(changeDetector: ChangeDetectorRef);
     /**
      * Select a radio item.
      * @param value The value of the radio item to select.
@@ -55,11 +63,11 @@ export declare class RdxRadioGroupDirective implements ControlValueAccessor {
      */
     setDisabledState(isDisabled: boolean): void;
     /**
-     * When focus leaves the radio group, mark it as touched.
-     * @internal
+     * When focus leaves the radio group.
      */
-    protected onFocusout(): void;
+    _onFocusout(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxRadioGroupDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioGroupDirective, "[rdxRadioGroup]", never, { "value": { "alias": "rdxRadioGroupValue"; "required": false; }; "disabled": { "alias": "rdxRadioGroupDisabled"; "required": false; }; "orientation": { "alias": "rdxRadioGroupOrientation"; "required": false; }; }, { "valueChange": "rdxRadioGroupValueChange"; }, never, never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioGroupDirective, "div[RadioRoot]", ["RadioRoot"], { "value": { "alias": "rdxValue"; "required": false; }; "disabled": { "alias": "rdxDisabled"; "required": false; }; }, { "onValueChange": "rdxOnValueChange"; }, never, never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
     static ngAcceptInputType_disabled: unknown;
 }
+export {};

package/roving-focus/index.d.ts

@@ -1,4 +1,2 @@
 export * from './src/roving-focus-group.directive';
-export * from './src/roving-focus-group.token';
 export * from './src/roving-focus-item.directive';
-export * from './src/roving-focus-item.token';

package/roving-focus/src/roving-focus-group.directive.d.ts

@@ -2,6 +2,8 @@ import { FocusKeyManager } from '@angular/cdk/a11y';
 import { OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import type { RdxRovingFocusItemDirective } from './roving-focus-item.directive';
 import * as i0 from "@angular/core";
+export type Orientation = 'horizontal' | 'vertical';
+export declare function injectRovingFocusGroup(): RdxRovingFocusGroupDirective;
 export declare class RdxRovingFocusGroupDirective implements OnInit, OnChanges, OnDestroy {
     private readonly directionality;
     private readonly destroyRef;
@@ -10,16 +12,12 @@ export declare class RdxRovingFocusGroupDirective implements OnInit, OnChanges,
      * We don't use ContentChildren as dynamically added items may not be in the correct order.
      */
     private readonly items;
-    /**
-     * Create the focus key manager instance.
-     * @internal
-     */
     readonly keyManager: FocusKeyManager<RdxRovingFocusItemDirective>;
     /**
      * Determine the orientation of the roving focus group.
      * @default vertical
      */
-    orientation: 'horizontal' | 'vertical';
+    orientation: Orientation;
     /**
      * Determine if focus should wrap when the end or beginning is reached.
      * @default true
@@ -48,7 +46,7 @@ export declare class RdxRovingFocusGroupDirective implements OnInit, OnChanges,
      * Set the orientation of the roving focus group.
      * @param orientation The orientation of the roving focus group.
      */
-    setOrientation(orientation: 'horizontal' | 'vertical'): void;
+    setOrientation(orientation: Orientation): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxRovingFocusGroupDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRovingFocusGroupDirective, "[rdxRovingFocusGroup]", never, { "orientation": { "alias": "rdxRovingFocusGroupOrientation"; "required": false; }; "wrap": { "alias": "rdxRovingFocusGroupWrap"; "required": false; }; }, {}, never, never, true, never>;
     static ngAcceptInputType_wrap: unknown;

package/roving-focus/src/roving-focus-item.directive.d.ts

@@ -1,6 +1,7 @@
 import { FocusableOption } from '@angular/cdk/a11y';
 import { OnDestroy, OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
+export declare function injectRovingFocusItem(): RdxRovingFocusItemDirective;
 export declare class RdxRovingFocusItemDirective implements OnInit, OnDestroy, FocusableOption {
     /**
      * Access the group the roving focus item belongs to.
@@ -26,22 +27,19 @@ export declare class RdxRovingFocusItemDirective implements OnInit, OnDestroy, F
      * Define if the item is disabled.
      */
     disabled: boolean;
-    /**
-     * Derive the tabindex of the roving focus item.
-     * @internal
-     */
-    get tabindex(): number;
     ngOnInit(): void;
     ngOnDestroy(): void;
     /**
      * Handle key events on the roving focus item.
      * @param event The key event.
-     * @internal
      */
-    onKeydown(event: KeyboardEvent): void;
+    _onKeydown(event: KeyboardEvent): void;
+    /**
+     * Derive the tabindex of the roving focus item.
+     */
+    _tabindex(): number;
     /**
      * Focus the roving focus item.
-     * @param origin The origin of the focus request.
      * @internal
      */
     focus(): void;

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

@@ -1,16 +1,22 @@
 import * as i0 from "@angular/core";
-export declare class RdxSeparatorDirective {
+declare const ORIENTATIONS: readonly ["horizontal", "vertical"];
+export type Orientation = (typeof ORIENTATIONS)[number];
+export interface SeparatorProps {
     /**
-     * The orientation of the separator.
-     * @default 'horizontal'
+     * Either `vertical` or `horizontal`. Defaults to `horizontal`.
      */
-    orientation: 'horizontal' | 'vertical';
+    orientation?: Orientation;
     /**
-     * Whether the separator is for decoration purposes. If true, the separator will not be included in the accessibility tree.
-     * @default false
+     * Whether the component is purely decorative. When true, accessibility-related attributes
+     * are updated so that the rendered element is removed from the accessibility tree.
      */
+    decorative?: boolean;
+}
+export declare class RdxSeparatorRootDirective implements SeparatorProps {
+    orientation: Orientation;
     decorative: boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxSeparatorDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxSeparatorDirective, "[rdxSeparator]", never, { "orientation": { "alias": "rdxSeparatorOrientation"; "required": false; }; "decorative": { "alias": "rdxSeparatorDecorative"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxSeparatorRootDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxSeparatorRootDirective, "div[SeparatorRoot]", never, { "orientation": { "alias": "rdxOrientation"; "required": false; }; "decorative": { "alias": "rdxDecorative"; "required": false; }; }, {}, never, never, true, never>;
     static ngAcceptInputType_decorative: unknown;
 }
+export {};

package/switch/index.d.ts

@@ -1,3 +1,3 @@
 export * from './src/switch-thumb.directive';
-export * from './src/switch.directive';
-export * from './src/switch.token';
+export * from './src/switch-root.directive';
+export type { SwitchProps } from './src/switch-root.directive';

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

@@ -0,0 +1,35 @@
+import { EventEmitter, InjectionToken } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare const RdxSwitchToken: InjectionToken<RdxSwitchRootDirective>;
+export declare function injectSwitch(): RdxSwitchRootDirective;
+export interface SwitchProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    required?: boolean;
+    onCheckedChange?: EventEmitter<boolean>;
+}
+export declare class RdxSwitchRootDirective implements SwitchProps, ControlValueAccessor {
+    required: boolean;
+    checked: boolean;
+    disabled: boolean;
+    readonly onCheckedChange: EventEmitter<boolean>;
+    /**
+     * The method to be called in order to update ngModel.
+     */
+    _onChange?: (checked: boolean) => void;
+    /**
+     * onTouch function registered via registerOnTouch (ControlValueAccessor).
+     */
+    _onTouched?: () => void;
+    registerOnChange(fn: (checked: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    writeValue(checked: boolean): void;
+    setDisabledState(isDisabled: boolean): void;
+    _toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxSwitchRootDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxSwitchRootDirective, "button[SwitchRoot]", ["SwitchRoot"], { "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "onCheckedChange": "onCheckedChange"; }, never, never, true, never>;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_checked: unknown;
+    static ngAcceptInputType_disabled: unknown;
+}

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

@@ -1,9 +1,6 @@
 import * as i0 from "@angular/core";
 export declare class RdxSwitchThumbDirective {
-    /**
-     * Access the switch directive.
-     */
-    protected readonly switch: import("@radix-ng/primitives/switch").RdxSwitchDirective;
+    protected readonly switchRoot: import("./switch-root.directive").RdxSwitchRootDirective;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxSwitchThumbDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxSwitchThumbDirective, "[rdxSwitchThumb]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxSwitchThumbDirective, "span[SwitchThumb]", ["SwitchThumb"], {}, {}, never, never, true, never>;
 }

package/toggle/index.d.ts

@@ -1 +1,2 @@
-export * from './src/toggle.directive';
+export * from './src/toggle-root.directive';
+export type { ToggleProps } from './src/toggle-root.directive';

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

@@ -0,0 +1,32 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface ToggleProps {
+    /**
+     * The controlled state of the toggle.
+     */
+    pressed?: boolean;
+    /**
+     * The state of the toggle when initially rendered. Use `defaultPressed`
+     * if you do not need to control the state of the toggle.
+     * @defaultValue false
+     */
+    defaultPressed?: boolean;
+    /**
+     * The callback that fires when the state of the toggle changes.
+     */
+    onPressedChange?: EventEmitter<boolean>;
+}
+export declare class RdxToggleRootDirective implements ToggleProps {
+    pressed: boolean;
+    disabled: boolean;
+    id: string;
+    /**
+     * Event emitted when the toggle is pressed.
+     */
+    readonly onPressedChange: EventEmitter<boolean>;
+    _toggle(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxToggleRootDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleRootDirective, "button[ToggleRoot]", ["ToggleRoot"], { "pressed": { "alias": "rdxTogglePressed"; "required": false; }; "disabled": { "alias": "rdxToggleDisabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "onPressedChange": "rdxToggleOnPressedChange"; }, never, never, true, never>;
+    static ngAcceptInputType_pressed: unknown;
+    static ngAcceptInputType_disabled: unknown;
+}

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

@@ -40,7 +40,7 @@ export declare class RdxToggleGroupMultiDirective implements OnInit, OnChanges,
      */
     private onChange?;
     /**
-     * The touched callback.
+     * onTouch function registered via registerOnTouch (ControlValueAccessor).
      */
     protected onTouched?: () => void;
     ngOnInit(): void;

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

@@ -40,7 +40,7 @@ export declare class RdxToggleGroupDirective implements OnInit, OnChanges, After
      */
     private onChange?;
     /**
-     * The touched callback.
+     * onTouch function registered via registerOnTouch (ControlValueAccessor).
      */
     protected onTouched?: () => void;
     ngOnInit(): void;

package/accordion/README.md

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

package/accordion/index.d.ts

@@ -1,7 +0,0 @@
-export * from './src/accordion-content/accordion-content.directive';
-export * from './src/accordion-header/accordion-header.directive';
-export * from './src/accordion-item/accordion-item.directive';
-export * from './src/accordion-trigger/accordion-trigger.directive';
-export * from './src/accordion/accordion.directive';
-export * from './src/accordion-state.directive';
-export * from './src/accordion.config';

package/accordion/src/accordion/accordion.directive.d.ts

@@ -1,64 +0,0 @@
-import { OnInit } from '@angular/core';
-import * as i0 from "@angular/core";
-import * as i1 from "@radix-ng/primitives/roving-focus";
-/**
- * The root accordion directive that all parts should be placed within.
- */
-export declare class RdxAccordionDirective implements OnInit {
-    /**
-     * Access the global accordion configuration.
-     */
-    private readonly config;
-    /**
-     * Access the roving focus group
-     */
-    private readonly rovingFocusGroup;
-    /**
-     * Determines whether multiple items can be open simultaneously.
-     * @default false
-     */
-    multiple: boolean;
-    /**
-     * The orientation of the accordion.
-     * @default 'vertical'
-     */
-    orientation: 'horizontal' | 'vertical';
-    /**
-     * Determines whether the accordion should be disabled.
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * Store the currently expanded item(s).
-     * @internal
-     */
-    readonly expanded: import("@angular/core").WritableSignal<string[]>;
-    /**
-     * The touched callback.
-     */
-    protected onTouched?: () => void;
-    ngOnInit(): void;
-    /**
-     * Expand an item.
-     * @param id The id of the item to expand.
-     */
-    expand(id: string): void;
-    /**
-     * Collapse an Item.
-     * @param id The id of the Item to collapse.
-     */
-    collapse(id: string): void;
-    /**
-     * Toggle an item.
-     * @param id The id of the item to toggle.
-     */
-    toggle(id: string): void;
-    /**
-     * Collapse all items.
-     */
-    collapseAll(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxAccordionDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAccordionDirective, "[rdxAccordion]", never, { "multiple": { "alias": "rdxAccordionMultiple"; "required": false; }; "orientation": { "alias": "rdxAccordionOrientation"; "required": false; }; "disabled": { "alias": "rdxAccordionDisabled"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: { "rdxRovingFocusGroupOrientation": "orientation"; }; outputs: {}; }]>;
-    static ngAcceptInputType_multiple: unknown;
-    static ngAcceptInputType_disabled: unknown;
-}

package/accordion/src/accordion/accordion.token.d.ts

@@ -1,4 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import type { RdxAccordionDirective } from './accordion.directive';
-export declare const RdxAccordionToken: InjectionToken<RdxAccordionDirective>;
-export declare function injectAccordion(): RdxAccordionDirective;