@radix-ng/primitives 0.27.0 → 0.28.0

package/compodoc/documentation.json

@@ -1038,12 +1038,12 @@
         },
         {
             "name": "ToggleProps",
-            "id": "interface-ToggleProps-596f9fc6c92b130f02431a3a95848dba07cc638e90f9f409ee44fdd2dae81e83ca3dbf2ed99f5057f3e8f9246fdf96ded627d14302f01544e9b9557e48dbb8b5",
+            "id": "interface-ToggleProps-226eab4160baed75fa79bf0066273b2a0d8cf4518f68fc20b7575dd38e73061d034ce9d2593a3deab5d148f9c3f59f3fd34e7b8edd69abee90f7cad6954e5a40",
             "file": "toggle/src/toggle.directive.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    computed,\n    Directive,\n    forwardRef,\n    input,\n    model,\n    output,\n    OutputEmitterRef,\n    signal\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport interface ToggleProps {\n    /**\n     * The controlled state of the toggle.\n     */\n    pressed?: boolean;\n\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    /**\n     * The callback that fires when the state of the toggle changes.\n     */\n    onPressedChange?: OutputEmitterRef<boolean>;\n\n    /**\n     * Whether the toggle is disabled.\n     * @defaultValue false\n     */\n    disabled?: boolean;\n}\n\nexport type DataState = 'on' | 'off';\n\nexport const TOGGLE_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => RdxToggleDirective),\n    multi: true\n};\n\n@Directive({\n    selector: '[rdxToggle]',\n    exportAs: 'rdxToggle',\n    standalone: true,\n    providers: [TOGGLE_VALUE_ACCESSOR],\n    host: {\n        '[attr.aria-pressed]': 'pressed()',\n        '[attr.data-state]': 'dataState()',\n        '[attr.data-disabled]': 'disabledState() ? \"\" : undefined',\n        '[disabled]': 'disabledState()',\n\n        '(click)': 'togglePressed()'\n    }\n})\nexport class RdxToggleDirective implements ControlValueAccessor {\n    /**\n     * The pressed state of the toggle when it is initially rendered.\n     * Use when you do not need to control its pressed state.\n     */\n    readonly defaultPressed = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * The controlled pressed state of the toggle.\n     * Must be used in conjunction with `onPressedChange`.\n     */\n    readonly pressed = model<boolean>(this.defaultPressed());\n\n    /**\n     * When true, prevents the user from interacting with the toggle.\n     */\n    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /** @ignore */\n    readonly disabledState = computed(() => this.disabled() || this.accessorDisabled());\n\n    protected readonly dataState = computed<DataState>(() => {\n        return this.pressed() ? 'on' : 'off';\n    });\n\n    /**\n     * Event handler called when the pressed state of the toggle changes.\n     */\n    readonly onPressedChange = output<boolean>();\n\n    protected togglePressed(): void {\n        if (!this.disabled()) {\n            this.pressed.set(!this.pressed());\n            this.onChange(this.pressed());\n            this.onPressedChange.emit(this.pressed());\n        }\n    }\n\n    private readonly accessorDisabled = signal(false);\n\n    private onChange: (value: any) => void = () => {};\n    /** @ignore */\n    onTouched: (() => void) | undefined;\n\n    /** @ignore */\n    writeValue(value: any): void {\n        this.pressed.set(value);\n    }\n\n    /** @ignore */\n    registerOnChange(fn: (value: any) => void): void {\n        this.onChange = fn;\n    }\n\n    /** @ignore */\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    /** @ignore */\n    setDisabledState(isDisabled: boolean): void {\n        this.accessorDisabled.set(isDisabled);\n    }\n}\n",
+            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    computed,\n    Directive,\n    forwardRef,\n    input,\n    model,\n    output,\n    OutputEmitterRef,\n    signal\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport interface ToggleProps {\n    /**\n     * The controlled state of the toggle.\n     */\n    pressed?: boolean;\n\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    /**\n     * The callback that fires when the state of the toggle changes.\n     */\n    onPressedChange?: OutputEmitterRef<boolean>;\n\n    /**\n     * Whether the toggle is disabled.\n     * @defaultValue false\n     */\n    disabled?: boolean;\n}\n\nexport type DataState = 'on' | 'off';\n\nexport const TOGGLE_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => RdxToggleDirective),\n    multi: true\n};\n\n/**\n * @group Components\n */\n@Directive({\n    selector: '[rdxToggle]',\n    exportAs: 'rdxToggle',\n    standalone: true,\n    providers: [TOGGLE_VALUE_ACCESSOR],\n    host: {\n        '[attr.aria-pressed]': 'pressed()',\n        '[attr.data-state]': 'dataState()',\n        '[attr.data-disabled]': 'disabledState() ? \"\" : undefined',\n        '[disabled]': 'disabledState()',\n\n        '(click)': 'togglePressed()'\n    }\n})\nexport class RdxToggleDirective implements ControlValueAccessor {\n    /**\n     * The pressed state of the toggle when it is initially rendered.\n     * Use when you do not need to control its pressed state.\n     *\n     * @group Props\n     */\n    readonly defaultPressed = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * The controlled pressed state of the toggle.\n     * Must be used in conjunction with `onPressedChange`.\n     *\n     * @group Props\n     */\n    readonly pressed = model<boolean>(this.defaultPressed());\n\n    /**\n     * When true, prevents the user from interacting with the toggle.\n     *\n     * @group Props\n     */\n    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /** @ignore */\n    readonly disabledModel = model<boolean>(this.disabled());\n\n    /** @ignore */\n    readonly disabledState = computed(() => this.disabled() || this.disabledModel() || this.accessorDisabled());\n\n    protected readonly dataState = computed<DataState>(() => {\n        return this.pressed() ? 'on' : 'off';\n    });\n\n    /**\n     * Event handler called when the pressed state of the toggle changes.\n     *\n     * @group Emits\n     */\n    readonly onPressedChange = output<boolean>();\n\n    protected togglePressed(): void {\n        if (!this.disabled()) {\n            this.pressed.set(!this.pressed());\n            this.onChange(this.pressed());\n            this.onPressedChange.emit(this.pressed());\n        }\n    }\n\n    private readonly accessorDisabled = signal(false);\n\n    private onChange: (value: any) => void = () => {};\n\n    /** @ignore */\n    onTouched: (() => void) | undefined;\n\n    /** @ignore */\n    writeValue(value: any): void {\n        this.pressed.set(value);\n    }\n\n    /** @ignore */\n    registerOnChange(fn: (value: any) => void): void {\n        this.onChange = fn;\n    }\n\n    /** @ignore */\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    /** @ignore */\n    setDisabledState(isDisabled: boolean): void {\n        this.accessorDisabled.set(isDisabled);\n    }\n}\n",
             "properties": [
                 {
                     "name": "defaultPressed",
@@ -5723,12 +5723,12 @@
         },
         {
             "name": "RdxCollapsibleContentDirective",
-            "id": "directive-RdxCollapsibleContentDirective-c94f9db490aaf13cd34ce2ce6e5d2644e5fcbca0d9044809c2253dccb0e52504c6b9fc6900ab282f54d6e3fca669bf5b1709afa43409abc5f29ff7c8fed504bb",
+            "id": "directive-RdxCollapsibleContentDirective-ceb4ea21f46d5ed41ff8105ddce84d172ef7c2f552c129c69cab92221113890274e2a6993c1ad66227cd1b2080f9810ec6d954d40cc17d2ab36c74fc7c4f3319",
             "file": "collapsible/src/collapsible-content.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { Directive, ElementRef, inject } from '@angular/core';\nimport { RdxCollapsibleContentToken } from './collapsible-content.token';\nimport { RdxCollapsibleRootDirective } from './collapsible-root.directive';\n\n@Directive({\n    selector: '[rdxCollapsibleContent]',\n    standalone: true,\n    providers: [\n        {\n            provide: RdxCollapsibleContentToken,\n            useExisting: RdxCollapsibleContentDirective\n        }\n    ],\n    host: {\n        '[attr.data-state]': 'collapsible.getState()',\n        '[attr.data-disabled]': 'getDisabled()'\n    }\n})\nexport class RdxCollapsibleContentDirective {\n    protected readonly collapsible = inject(RdxCollapsibleRootDirective);\n\n    /**\n     * Reference to CollapsibleContent host element\n     * @ignore\n     */\n    elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    getDisabled(): string | undefined {\n        return this.collapsible.disabled ? 'disabled' : undefined;\n    }\n}\n",
+            "sourceCode": "import { Directive, ElementRef, inject } from '@angular/core';\nimport { RdxCollapsibleContentToken } from './collapsible-content.token';\nimport { RdxCollapsibleRootDirective } from './collapsible-root.directive';\n\n@Directive({\n    selector: '[rdxCollapsibleContent]',\n    providers: [\n        {\n            provide: RdxCollapsibleContentToken,\n            useExisting: RdxCollapsibleContentDirective\n        }\n    ],\n    host: {\n        '[attr.data-state]': 'collapsible.getState()',\n        '[attr.data-disabled]': 'getDisabled()'\n    }\n})\nexport class RdxCollapsibleContentDirective {\n    protected readonly collapsible = inject(RdxCollapsibleRootDirective);\n\n    /**\n     * Reference to CollapsibleContent host element\n     * @ignore\n     */\n    readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    getDisabled(): string | undefined {\n        return this.collapsible.disabled() ? 'disabled' : undefined;\n    }\n}\n",
             "selector": "[rdxCollapsibleContent]",
             "providers": [
                 {
@@ -5737,7 +5737,7 @@
                 }
             ],
             "hostDirectives": [],
-            "standalone": true,
+            "standalone": false,
             "inputsClass": [],
             "outputsClass": [],
             "deprecated": false,
@@ -5752,7 +5752,7 @@
                     "optional": false,
                     "returnType": "string | undefined",
                     "typeParameters": [],
-                    "line": 28,
+                    "line": 27,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -5761,12 +5761,12 @@
         },
         {
             "name": "RdxCollapsibleRootDirective",
-            "id": "directive-RdxCollapsibleRootDirective-5e42382b714f4a496a2afec124b2d424abeceaddd0d911cd4acfd7042206330c1fedc4bc3918adc11db5881f59c055e2f54a4955554d99dd12093b5bd4e66dd1",
+            "id": "directive-RdxCollapsibleRootDirective-e8c6df51602d4f4d1c733dda8e94a2ccfab27c55fd6effaac9e10520dd1163b58c882e6f7269c38c5d42ad77e67619aaa3621d02644725ab0b410186d1b062c8",
             "file": "collapsible/src/collapsible-root.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n\n",
-            "sourceCode": "import { contentChild, Directive, EventEmitter, inject, InjectionToken, Input, Output } from '@angular/core';\nimport { asyncScheduler } from 'rxjs';\nimport { RdxCollapsibleContentToken } from './collapsible-content.token';\n\nconst RdxCollapsibleRootToken = new InjectionToken<RdxCollapsibleRootDirective>('RdxCollapsibleRootToken');\n\nexport function injectCollapsible(): RdxCollapsibleRootDirective {\n    return inject(RdxCollapsibleRootDirective);\n}\n\nexport type RdxCollapsibleState = 'open' | 'closed';\n\n/**\n * @group Components\n */\n@Directive({\n    selector: '[rdxCollapsibleRoot]',\n    standalone: true,\n    exportAs: 'collapsibleRoot',\n    providers: [{ provide: RdxCollapsibleRootToken, useExisting: RdxCollapsibleRootDirective }],\n    host: {\n        '[attr.data-state]': 'getState()',\n        '[attr.data-disabled]': 'disabled ? \"\" : undefined'\n    }\n})\nexport class RdxCollapsibleRootDirective {\n    /**\n     * Reference to RdxCollapsibleContent directive\n     * @private\n     */\n    private readonly contentDirective = contentChild.required(RdxCollapsibleContentToken);\n\n    /**\n     * Stores collapsible state\n     */\n    private _open = false;\n\n    /**\n     * Determines whether a directive is available for interaction.\n     * When true, prevents the user from interacting with the collapsible.\n     *\n     * @group Props\n     */\n    @Input() disabled = false;\n\n    /**\n     * The controlled open state of the collapsible.\n     * Sets the state of the directive. `true` - expanded, `false` - collapsed\n     *\n     * @group Props\n     * @defaultValue false\n     */\n    @Input() set open(value: boolean) {\n        if (value !== this._open) {\n            this.onOpenChange.emit(value);\n        }\n\n        this._open = value;\n        this.setPresence();\n    }\n\n    get open(): boolean {\n        return this._open;\n    }\n\n    /**\n     * Emitted with new value when directive state changed.\n     * Event handler called when the open state of the collapsible changes.\n     *\n     * @group Emits\n     */\n    @Output() onOpenChange = new EventEmitter<boolean>();\n\n    /**\n     * Allows to change directive state\n     * @param {boolean | undefined} value\n     */\n    setOpen(value?: boolean) {\n        if (this.disabled) {\n            return;\n        }\n\n        if (value === undefined) {\n            this.open = !this.open;\n        } else {\n            this.open = value;\n        }\n\n        this.setPresence();\n    }\n\n    /**\n     * Returns directive state (open | closed)\n     */\n    getState(): RdxCollapsibleState {\n        return this.open ? 'open' : 'closed';\n    }\n\n    /**\n     * Returns current directive state\n     */\n    isOpen(): boolean {\n        return this.open;\n    }\n\n    /**\n     * Controls visibility of content\n     * @private\n     * @ignore\n     */\n    private setPresence(): void {\n        if (!this.contentDirective) {\n            return;\n        }\n\n        this.contentDirective().elementRef.nativeElement.setAttribute('data-state', this.getState());\n\n        if (this.isOpen()) {\n            this.contentDirective().elementRef.nativeElement.removeAttribute('hidden');\n        } else {\n            asyncScheduler.schedule(() => {\n                const animations = this.contentDirective().elementRef.nativeElement.getAnimations();\n\n                if (animations === undefined || animations.length === 0) {\n                    this.contentDirective().elementRef.nativeElement.setAttribute('hidden', '');\n                }\n            });\n        }\n    }\n}\n",
+            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, contentChild, Directive, inject, InjectionToken, input, Input, output } from '@angular/core';\nimport { asyncScheduler } from 'rxjs';\nimport { RdxCollapsibleContentToken } from './collapsible-content.token';\n\nconst RdxCollapsibleRootToken = new InjectionToken<RdxCollapsibleRootDirective>('RdxCollapsibleRootToken');\n\nexport function injectCollapsible(): RdxCollapsibleRootDirective {\n    return inject(RdxCollapsibleRootDirective);\n}\n\nexport type RdxCollapsibleState = 'open' | 'closed';\n\n/**\n * @group Components\n */\n@Directive({\n    selector: '[rdxCollapsibleRoot]',\n    exportAs: 'collapsibleRoot',\n    providers: [{ provide: RdxCollapsibleRootToken, useExisting: RdxCollapsibleRootDirective }],\n    host: {\n        '[attr.data-state]': 'getState()',\n        '[attr.data-disabled]': 'disabled() ? \"\" : undefined'\n    }\n})\nexport class RdxCollapsibleRootDirective {\n    /**\n     * Reference to RdxCollapsibleContent directive\n     */\n    private readonly contentDirective = contentChild.required(RdxCollapsibleContentToken);\n\n    /**\n     * Determines whether a directive is available for interaction.\n     * When true, prevents the user from interacting with the collapsible.\n     *\n     * @group Props\n     */\n    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * The controlled open state of the collapsible.\n     * Sets the state of the directive. `true` - expanded, `false` - collapsed\n     *\n     * @group Props\n     * @defaultValue false\n     */\n    @Input() set open(value: boolean) {\n        if (value !== this._open) {\n            this.onOpenChange.emit(value);\n        }\n\n        this._open = value;\n        this.setPresence();\n    }\n\n    get open(): boolean {\n        return this._open;\n    }\n\n    /**\n     * Stores collapsible state\n     */\n    private _open = false;\n\n    /**\n     * Emitted with new value when directive state changed.\n     * Event handler called when the open state of the collapsible changes.\n     *\n     * @group Emits\n     */\n    readonly onOpenChange = output<boolean>();\n\n    /**\n     * Allows to change directive state\n     * @param {boolean | undefined} value\n     * @ignore\n     */\n    setOpen(value?: boolean) {\n        if (this.disabled()) {\n            return;\n        }\n\n        if (value === undefined) {\n            this.open = !this.open;\n        } else {\n            this.open = value;\n        }\n\n        this.setPresence();\n    }\n\n    /**\n     * Returns directive state (open | closed)\n     * @ignore\n     */\n    getState(): RdxCollapsibleState {\n        return this.open ? 'open' : 'closed';\n    }\n\n    /**\n     * Returns current directive state\n     * @ignore\n     */\n    isOpen(): boolean {\n        return this.open;\n    }\n\n    /**\n     * Controls visibility of content\n     */\n    private setPresence(): void {\n        if (!this.contentDirective) {\n            return;\n        }\n\n        if (this.isOpen()) {\n            this.contentDirective().elementRef.nativeElement.removeAttribute('hidden');\n        } else {\n            asyncScheduler.schedule(() => {\n                const animations = this.contentDirective().elementRef.nativeElement.getAnimations();\n\n                if (animations === undefined || animations.length === 0) {\n                    this.contentDirective().elementRef.nativeElement.setAttribute('hidden', '');\n                }\n            });\n        }\n    }\n}\n",
             "selector": "[rdxCollapsibleRoot]",
             "providers": [
                 {
@@ -5776,56 +5776,24 @@
             ],
             "exportAs": "collapsibleRoot",
             "hostDirectives": [],
-            "standalone": true,
+            "standalone": false,
             "inputsClass": [
-                {
-                    "name": "disabled",
-                    "defaultValue": "false",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "jsdoctags": [
-                        {
-                            "pos": 1321,
-                            "end": 1339,
-                            "kind": 327,
-                            "id": 0,
-                            "flags": 16842752,
-                            "modifierFlagsCache": 0,
-                            "transformFlags": 0,
-                            "tagName": {
-                                "pos": 1322,
-                                "end": 1327,
-                                "kind": 80,
-                                "id": 0,
-                                "flags": 16842752,
-                                "transformFlags": 0,
-                                "escapedText": "group"
-                            },
-                            "comment": "<p>Props</p>\n"
-                        }
-                    ],
-                    "rawdescription": "\n\nDetermines whether a directive is available for interaction.\nWhen true, prevents the user from interacting with the collapsible.\n\n",
-                    "description": "<p>Determines whether a directive is available for interaction.\nWhen true, prevents the user from interacting with the collapsible.</p>\n",
-                    "line": 44,
-                    "type": "boolean",
-                    "decorators": []
-                },
                 {
                     "name": "open",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
                         {
-                            "pos": 1528,
-                            "end": 1548,
+                            "pos": 1544,
+                            "end": 1564,
                             "kind": 327,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1529,
-                                "end": 1534,
+                                "pos": 1545,
+                                "end": 1550,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -5835,16 +5803,16 @@
                             "comment": "<p>Props</p>\n"
                         },
                         {
-                            "pos": 1548,
-                            "end": 1573,
+                            "pos": 1564,
+                            "end": 1589,
                             "kind": 327,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1549,
-                                "end": 1561,
+                                "pos": 1565,
+                                "end": 1577,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -5856,158 +5824,91 @@
                     ],
                     "rawdescription": "\n\nThe controlled open state of the collapsible.\nSets the state of the directive. `true` - expanded, `false` - collapsed\n\n",
                     "description": "<p>The controlled open state of the collapsible.\nSets the state of the directive. <code>true</code> - expanded, <code>false</code> - collapsed</p>\n",
-                    "line": 53,
+                    "line": 47,
                     "type": "boolean",
                     "decorators": []
                 }
             ],
-            "outputsClass": [
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [
                 {
-                    "name": "onOpenChange",
-                    "defaultValue": "new EventEmitter<boolean>()",
+                    "name": "disabled",
+                    "defaultValue": "input<boolean, BooleanInput>(false, { transform: booleanAttribute })",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nEmitted with new value when directive state changed.\nEvent handler called when the open state of the collapsible changes.\n\n",
-                    "description": "<p>Emitted with new value when directive state changed.\nEvent handler called when the open state of the collapsible changes.</p>\n",
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Determines whether a directive is available for interaction.\nWhen true, prevents the user from interacting with the collapsible.</p>\n",
+                    "line": 38,
+                    "rawdescription": "\n\nDetermines whether a directive is available for interaction.\nWhen true, prevents the user from interacting with the collapsible.\n\n",
+                    "modifierKind": [
+                        148
+                    ],
                     "jsdoctags": [
                         {
-                            "pos": 1987,
-                            "end": 2005,
+                            "pos": 1274,
+                            "end": 1292,
                             "kind": 327,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1988,
-                                "end": 1993,
+                                "pos": 1275,
+                                "end": 1280,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
                                 "transformFlags": 0,
                                 "escapedText": "group"
                             },
-                            "comment": "<p>Emits</p>\n"
+                            "comment": "<p>Props</p>\n"
                         }
-                    ],
-                    "line": 72,
-                    "type": "EventEmitter"
-                }
-            ],
-            "deprecated": false,
-            "deprecationMessage": "",
-            "hostBindings": [],
-            "hostListeners": [],
-            "propertiesClass": [],
-            "methodsClass": [
-                {
-                    "name": "getState",
-                    "args": [],
-                    "optional": false,
-                    "returnType": "RdxCollapsibleState",
-                    "typeParameters": [],
-                    "line": 95,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nReturns directive state (open | closed)\n",
-                    "description": "<p>Returns directive state (open | closed)</p>\n"
+                    ]
                 },
                 {
-                    "name": "isOpen",
-                    "args": [],
-                    "optional": false,
-                    "returnType": "boolean",
-                    "typeParameters": [],
-                    "line": 102,
+                    "name": "onOpenChange",
+                    "defaultValue": "output<boolean>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nReturns current directive state\n",
-                    "description": "<p>Returns current directive state</p>\n"
-                },
-                {
-                    "name": "setOpen",
-                    "args": [
-                        {
-                            "name": "value",
-                            "type": "boolean",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "optional": true
-                        }
-                    ],
+                    "type": "",
+                    "indexKey": "",
                     "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 78,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nAllows to change directive state\n",
-                    "description": "<p>Allows to change directive state</p>\n",
+                    "description": "<p>Emitted with new value when directive state changed.\nEvent handler called when the open state of the collapsible changes.</p>\n",
+                    "line": 71,
+                    "rawdescription": "\n\nEmitted with new value when directive state changed.\nEvent handler called when the open state of the collapsible changes.\n\n",
+                    "modifierKind": [
+                        148
+                    ],
                     "jsdoctags": [
                         {
-                            "name": {
-                                "pos": 2151,
-                                "end": 2156,
-                                "kind": 80,
-                                "id": 0,
-                                "flags": 16842752,
-                                "transformFlags": 0,
-                                "escapedText": "value"
-                            },
-                            "type": "boolean",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "optional": true,
+                            "pos": 2079,
+                            "end": 2097,
+                            "kind": 327,
+                            "id": 0,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
                             "tagName": {
-                                "pos": 2123,
-                                "end": 2128,
+                                "pos": 2080,
+                                "end": 2085,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
                                 "transformFlags": 0,
-                                "escapedText": "param"
+                                "escapedText": "group"
                             },
-                            "comment": "",
-                            "typeExpression": {
-                                "pos": 2129,
-                                "end": 2150,
-                                "kind": 309,
-                                "id": 0,
-                                "flags": 16842752,
-                                "modifierFlagsCache": 0,
-                                "transformFlags": 0,
-                                "type": {
-                                    "pos": 2130,
-                                    "end": 2149,
-                                    "kind": 192,
-                                    "id": 0,
-                                    "flags": 16777216,
-                                    "modifierFlagsCache": 0,
-                                    "transformFlags": 1,
-                                    "types": [
-                                        {
-                                            "pos": 2130,
-                                            "end": 2137,
-                                            "kind": 136,
-                                            "id": 0,
-                                            "flags": 16777216,
-                                            "transformFlags": 1
-                                        },
-                                        {
-                                            "pos": 2139,
-                                            "end": 2149,
-                                            "kind": 157,
-                                            "id": 0,
-                                            "flags": 16777216,
-                                            "transformFlags": 1
-                                        }
-                                    ]
-                                }
-                            }
+                            "comment": "<p>Emits</p>\n"
                         }
                     ]
                 }
             ],
+            "methodsClass": [],
             "extends": [],
             "accessors": {
                 "open": {
@@ -6026,7 +5927,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 53,
+                        "line": 47,
                         "rawdescription": "\n\nThe controlled open state of the collapsible.\nSets the state of the directive. `true` - expanded, `false` - collapsed\n\n",
                         "description": "<p>The controlled open state of the collapsible.\nSets the state of the directive. <code>true</code> - expanded, <code>false</code> - collapsed</p>\n",
                         "jsdoctags": [
@@ -6045,23 +5946,23 @@
                         "name": "open",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 62
+                        "line": 56
                     }
                 }
             }
         },
         {
             "name": "RdxCollapsibleTriggerDirective",
-            "id": "directive-RdxCollapsibleTriggerDirective-e9704e42643f87fc27ae0d649419a4f1aa0a44a2c55812fdeebabd267e03622887ab7bb1213ddead7ce17dcef7566ffbc8bf126d091d0e8772ee3a8d14bcc9f9",
+            "id": "directive-RdxCollapsibleTriggerDirective-62f713f6e91ea3b0ddbc85ec40c46ab8aa6910e6c3dc3be2c3a5f0a2ae5b45e31a1026ba2fd4d3f7ec348432c0635e149fa74b1f8894ecd886d8e9eabd3e8c4e",
             "file": "collapsible/src/collapsible-trigger.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { Directive } from '@angular/core';\nimport { injectCollapsible, RdxCollapsibleState } from './collapsible-root.directive';\n\n@Directive({\n    selector: '[rdxCollapsibleTrigger]',\n    standalone: true,\n    host: {\n        '(click)': 'onOpenToggle()',\n        '[attr.data-state]': 'getState()',\n        '[attr.aria-expanded]': 'getState() === \"open\" ? \"true\" : \"false\"',\n        '[disabled]': 'getDisabled()'\n    }\n})\nexport class RdxCollapsibleTriggerDirective {\n    /**\n     * Reference to CollapsibleRoot\n     * @private\n     * @ignore\n     */\n    private readonly collapsible = injectCollapsible();\n\n    /**\n     * Called on trigger clicked\n     */\n    onOpenToggle(): void {\n        this.collapsible.setOpen();\n    }\n\n    /**\n     * Returns current directive state (open | closed)\n     * @ignore\n     */\n    getState(): RdxCollapsibleState {\n        return this.collapsible.getState();\n    }\n\n    /**\n     * Returns current trigger state\n     * @ignore\n     */\n    getDisabled(): string | undefined {\n        return this.collapsible.disabled ? 'disabled' : undefined;\n    }\n}\n",
+            "sourceCode": "import { Directive } from '@angular/core';\nimport { injectCollapsible, RdxCollapsibleState } from './collapsible-root.directive';\n\n@Directive({\n    selector: '[rdxCollapsibleTrigger]',\n    host: {\n        '[attr.data-state]': 'getState()',\n        '[attr.data-disabled]': 'getDisabled()',\n        '[attr.aria-expanded]': 'getState() === \"open\" ? \"true\" : \"false\"',\n        '[disabled]': 'getDisabled()',\n\n        '(click)': 'onOpenToggle()'\n    }\n})\nexport class RdxCollapsibleTriggerDirective {\n    /**\n     * Reference to CollapsibleRoot\n     * @private\n     * @ignore\n     */\n    private readonly collapsible = injectCollapsible();\n\n    /**\n     * Called on trigger clicked\n     */\n    onOpenToggle(): void {\n        this.collapsible.setOpen();\n    }\n\n    /**\n     * Returns current directive state (open | closed)\n     * @ignore\n     */\n    getState(): RdxCollapsibleState {\n        return this.collapsible.getState();\n    }\n\n    /**\n     * Returns current trigger state\n     * @ignore\n     */\n    getDisabled(): string | undefined {\n        return this.collapsible.disabled() ? 'disabled' : undefined;\n    }\n}\n",
             "selector": "[rdxCollapsibleTrigger]",
             "providers": [],
             "hostDirectives": [],
-            "standalone": true,
+            "standalone": false,
             "inputsClass": [],
             "outputsClass": [],
             "deprecated": false,
@@ -6076,7 +5977,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 25,
+                    "line": 26,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled on trigger clicked\n",
@@ -6990,13 +6891,13 @@
         },
         {
             "name": "RdxDialogCloseDirective",
-            "id": "directive-RdxDialogCloseDirective-88aa33ec7a7beb8693c91a072483e14a85a4cf3fe52b1e4cd5b2fa5c8d96629e3a41ee773401ce1cff2397475504a4f22b9704dfa16d2f29fb48b3fe34c2c3bb",
+            "id": "directive-RdxDialogCloseDirective-cfb3489a589694362c1060d4e5b305859da0754104b370466d57c979de7679df6dea04ba1832c018441fae605f54268c48349bb6ab42b71ffc43e0bdb4a0ffd1",
             "file": "dialog/src/dialog-close.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { Directive, inject } from '@angular/core';\nimport { RdxDialogRef } from './dialog-ref';\n\n@Directive({\n    selector: 'button[rdxDialogClose]',\n    standalone: true,\n    host: {\n        type: 'button',\n        '(click)': 'onClick()'\n    }\n})\nexport class RdxDialogCloseDirective {\n    private readonly ref = inject<RdxDialogRef>(RdxDialogRef);\n\n    protected onClick(): void {\n        this.ref.close();\n    }\n}\n",
-            "selector": "button[rdxDialogClose]",
+            "sourceCode": "import { Directive, inject } from '@angular/core';\nimport { RdxDialogRef } from './dialog-ref';\n\n@Directive({\n    selector: '[rdxDialogClose]',\n    standalone: true,\n    host: {\n        '(click)': 'onClick()'\n    }\n})\nexport class RdxDialogCloseDirective {\n    private readonly ref = inject<RdxDialogRef>(RdxDialogRef);\n\n    protected onClick(): void {\n        this.ref.close();\n    }\n}\n",
+            "selector": "[rdxDialogClose]",
             "providers": [],
             "hostDirectives": [],
             "standalone": true,
@@ -14535,12 +14436,12 @@
         },
         {
             "name": "RdxToggleDirective",
-            "id": "directive-RdxToggleDirective-596f9fc6c92b130f02431a3a95848dba07cc638e90f9f409ee44fdd2dae81e83ca3dbf2ed99f5057f3e8f9246fdf96ded627d14302f01544e9b9557e48dbb8b5",
+            "id": "directive-RdxToggleDirective-226eab4160baed75fa79bf0066273b2a0d8cf4518f68fc20b7575dd38e73061d034ce9d2593a3deab5d148f9c3f59f3fd34e7b8edd69abee90f7cad6954e5a40",
             "file": "toggle/src/toggle.directive.ts",
             "type": "directive",
             "description": "",
-            "rawdescription": "\n",
-            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    computed,\n    Directive,\n    forwardRef,\n    input,\n    model,\n    output,\n    OutputEmitterRef,\n    signal\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport interface ToggleProps {\n    /**\n     * The controlled state of the toggle.\n     */\n    pressed?: boolean;\n\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    /**\n     * The callback that fires when the state of the toggle changes.\n     */\n    onPressedChange?: OutputEmitterRef<boolean>;\n\n    /**\n     * Whether the toggle is disabled.\n     * @defaultValue false\n     */\n    disabled?: boolean;\n}\n\nexport type DataState = 'on' | 'off';\n\nexport const TOGGLE_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => RdxToggleDirective),\n    multi: true\n};\n\n@Directive({\n    selector: '[rdxToggle]',\n    exportAs: 'rdxToggle',\n    standalone: true,\n    providers: [TOGGLE_VALUE_ACCESSOR],\n    host: {\n        '[attr.aria-pressed]': 'pressed()',\n        '[attr.data-state]': 'dataState()',\n        '[attr.data-disabled]': 'disabledState() ? \"\" : undefined',\n        '[disabled]': 'disabledState()',\n\n        '(click)': 'togglePressed()'\n    }\n})\nexport class RdxToggleDirective implements ControlValueAccessor {\n    /**\n     * The pressed state of the toggle when it is initially rendered.\n     * Use when you do not need to control its pressed state.\n     */\n    readonly defaultPressed = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * The controlled pressed state of the toggle.\n     * Must be used in conjunction with `onPressedChange`.\n     */\n    readonly pressed = model<boolean>(this.defaultPressed());\n\n    /**\n     * When true, prevents the user from interacting with the toggle.\n     */\n    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /** @ignore */\n    readonly disabledState = computed(() => this.disabled() || this.accessorDisabled());\n\n    protected readonly dataState = computed<DataState>(() => {\n        return this.pressed() ? 'on' : 'off';\n    });\n\n    /**\n     * Event handler called when the pressed state of the toggle changes.\n     */\n    readonly onPressedChange = output<boolean>();\n\n    protected togglePressed(): void {\n        if (!this.disabled()) {\n            this.pressed.set(!this.pressed());\n            this.onChange(this.pressed());\n            this.onPressedChange.emit(this.pressed());\n        }\n    }\n\n    private readonly accessorDisabled = signal(false);\n\n    private onChange: (value: any) => void = () => {};\n    /** @ignore */\n    onTouched: (() => void) | undefined;\n\n    /** @ignore */\n    writeValue(value: any): void {\n        this.pressed.set(value);\n    }\n\n    /** @ignore */\n    registerOnChange(fn: (value: any) => void): void {\n        this.onChange = fn;\n    }\n\n    /** @ignore */\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    /** @ignore */\n    setDisabledState(isDisabled: boolean): void {\n        this.accessorDisabled.set(isDisabled);\n    }\n}\n",
+            "rawdescription": "\n\n",
+            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    computed,\n    Directive,\n    forwardRef,\n    input,\n    model,\n    output,\n    OutputEmitterRef,\n    signal\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport interface ToggleProps {\n    /**\n     * The controlled state of the toggle.\n     */\n    pressed?: boolean;\n\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    /**\n     * The callback that fires when the state of the toggle changes.\n     */\n    onPressedChange?: OutputEmitterRef<boolean>;\n\n    /**\n     * Whether the toggle is disabled.\n     * @defaultValue false\n     */\n    disabled?: boolean;\n}\n\nexport type DataState = 'on' | 'off';\n\nexport const TOGGLE_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => RdxToggleDirective),\n    multi: true\n};\n\n/**\n * @group Components\n */\n@Directive({\n    selector: '[rdxToggle]',\n    exportAs: 'rdxToggle',\n    standalone: true,\n    providers: [TOGGLE_VALUE_ACCESSOR],\n    host: {\n        '[attr.aria-pressed]': 'pressed()',\n        '[attr.data-state]': 'dataState()',\n        '[attr.data-disabled]': 'disabledState() ? \"\" : undefined',\n        '[disabled]': 'disabledState()',\n\n        '(click)': 'togglePressed()'\n    }\n})\nexport class RdxToggleDirective implements ControlValueAccessor {\n    /**\n     * The pressed state of the toggle when it is initially rendered.\n     * Use when you do not need to control its pressed state.\n     *\n     * @group Props\n     */\n    readonly defaultPressed = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * The controlled pressed state of the toggle.\n     * Must be used in conjunction with `onPressedChange`.\n     *\n     * @group Props\n     */\n    readonly pressed = model<boolean>(this.defaultPressed());\n\n    /**\n     * When true, prevents the user from interacting with the toggle.\n     *\n     * @group Props\n     */\n    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /** @ignore */\n    readonly disabledModel = model<boolean>(this.disabled());\n\n    /** @ignore */\n    readonly disabledState = computed(() => this.disabled() || this.disabledModel() || this.accessorDisabled());\n\n    protected readonly dataState = computed<DataState>(() => {\n        return this.pressed() ? 'on' : 'off';\n    });\n\n    /**\n     * Event handler called when the pressed state of the toggle changes.\n     *\n     * @group Emits\n     */\n    readonly onPressedChange = output<boolean>();\n\n    protected togglePressed(): void {\n        if (!this.disabled()) {\n            this.pressed.set(!this.pressed());\n            this.onChange(this.pressed());\n            this.onPressedChange.emit(this.pressed());\n        }\n    }\n\n    private readonly accessorDisabled = signal(false);\n\n    private onChange: (value: any) => void = () => {};\n\n    /** @ignore */\n    onTouched: (() => void) | undefined;\n\n    /** @ignore */\n    writeValue(value: any): void {\n        this.pressed.set(value);\n    }\n\n    /** @ignore */\n    registerOnChange(fn: (value: any) => void): void {\n        this.onChange = fn;\n    }\n\n    /** @ignore */\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    /** @ignore */\n    setDisabledState(isDisabled: boolean): void {\n        this.accessorDisabled.set(isDisabled);\n    }\n}\n",
             "selector": "[rdxToggle]",
             "providers": [
                 {
@@ -14566,10 +14467,31 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The pressed state of the toggle when it is initially rendered.\nUse when you do not need to control its pressed state.</p>\n",
-                    "line": 67,
-                    "rawdescription": "\n\nThe pressed state of the toggle when it is initially rendered.\nUse when you do not need to control its pressed state.\n",
+                    "line": 72,
+                    "rawdescription": "\n\nThe pressed state of the toggle when it is initially rendered.\nUse when you do not need to control its pressed state.\n\n",
                     "modifierKind": [
                         148
+                    ],
+                    "jsdoctags": [
+                        {
+                            "pos": 1693,
+                            "end": 1711,
+                            "kind": 327,
+                            "id": 0,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "tagName": {
+                                "pos": 1694,
+                                "end": 1699,
+                                "kind": 80,
+                                "id": 0,
+                                "flags": 16842752,
+                                "transformFlags": 0,
+                                "escapedText": "group"
+                            },
+                            "comment": "<p>Props</p>\n"
+                        }
                     ]
                 },
                 {
@@ -14581,10 +14503,31 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>When true, prevents the user from interacting with the toggle.</p>\n",
-                    "line": 78,
-                    "rawdescription": "\n\nWhen true, prevents the user from interacting with the toggle.\n",
+                    "line": 87,
+                    "rawdescription": "\n\nWhen true, prevents the user from interacting with the toggle.\n\n",
                     "modifierKind": [
                         148
+                    ],
+                    "jsdoctags": [
+                        {
+                            "pos": 2123,
+                            "end": 2141,
+                            "kind": 327,
+                            "id": 0,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "tagName": {
+                                "pos": 2124,
+                                "end": 2129,
+                                "kind": 80,
+                                "id": 0,
+                                "flags": 16842752,
+                                "transformFlags": 0,
+                                "escapedText": "group"
+                            },
+                            "comment": "<p>Props</p>\n"
+                        }
                     ]
                 },
                 {
@@ -14596,10 +14539,31 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Event handler called when the pressed state of the toggle changes.</p>\n",
-                    "line": 90,
-                    "rawdescription": "\n\nEvent handler called when the pressed state of the toggle changes.\n",
+                    "line": 104,
+                    "rawdescription": "\n\nEvent handler called when the pressed state of the toggle changes.\n\n",
                     "modifierKind": [
                         148
+                    ],
+                    "jsdoctags": [
+                        {
+                            "pos": 2668,
+                            "end": 2686,
+                            "kind": 327,
+                            "id": 0,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "tagName": {
+                                "pos": 2669,
+                                "end": 2674,
+                                "kind": 80,
+                                "id": 0,
+                                "flags": 16842752,
+                                "transformFlags": 0,
+                                "escapedText": "group"
+                            },
+                            "comment": "<p>Emits</p>\n"
+                        }
                     ]
                 },
                 {
@@ -14611,10 +14575,31 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The controlled pressed state of the toggle.\nMust be used in conjunction with <code>onPressedChange</code>.</p>\n",
-                    "line": 73,
-                    "rawdescription": "\n\nThe controlled pressed state of the toggle.\nMust be used in conjunction with `onPressedChange`.\n",
+                    "line": 80,
+                    "rawdescription": "\n\nThe controlled pressed state of the toggle.\nMust be used in conjunction with `onPressedChange`.\n\n",
                     "modifierKind": [
                         148
+                    ],
+                    "jsdoctags": [
+                        {
+                            "pos": 1947,
+                            "end": 1965,
+                            "kind": 327,
+                            "id": 0,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "tagName": {
+                                "pos": 1948,
+                                "end": 1953,
+                                "kind": 80,
+                                "id": 0,
+                                "flags": 16842752,
+                                "transformFlags": 0,
+                                "escapedText": "group"
+                            },
+                            "comment": "<p>Props</p>\n"
+                        }
                     ]
                 }
             ],
@@ -14626,12 +14611,12 @@
         },
         {
             "name": "RdxToggleGroupDirective",
-            "id": "directive-RdxToggleGroupDirective-a2eb5e3e27c5981ca8cf0a2e50c25e5b9e62fc0c2edf2e6374621ba9697612b4b4e71418691a2d27fe9df21928c6d0c2dfaef44cfd17788bbedf16de4943dc49",
+            "id": "directive-RdxToggleGroupDirective-ffef65f91715d601155c699bd57817bbd8dda251720044ec8e4d949feb54f41ddc19222ddea3a1e0ee670ca153aa9e2bbeb27857caaaa927abf320df687e5e5d",
             "file": "toggle-group/src/toggle-group.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { FocusKeyManager } from '@angular/cdk/a11y';\nimport {\n    AfterContentInit,\n    booleanAttribute,\n    ContentChildren,\n    Directive,\n    EventEmitter,\n    Input,\n    OnChanges,\n    QueryList,\n    SimpleChanges\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport type { RdxToggleGroupItemDirective } from './toggle-group-item.directive';\nimport { RdxToggleGroupItemToken } from './toggle-group-item.token';\nimport { RdxToggleGroupToken } from './toggle-group.token';\n\n@Directive({\n    selector: '[rdxToggleGroup]',\n    exportAs: 'rdxToggleGroup',\n    standalone: true,\n    providers: [\n        { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupDirective },\n        { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupDirective, multi: true }\n    ],\n    host: {\n        role: 'group',\n        '[attr.data-orientation]': 'orientation',\n\n        '(focusout)': 'onTouched?.()',\n        '(focusin)': 'onFocusIn()',\n        '(keydown)': 'handleKeydown($event)'\n    }\n})\nexport class RdxToggleGroupDirective implements OnChanges, AfterContentInit, ControlValueAccessor {\n    /**\n     * The selected toggle button.\n     */\n    @Input() value: string | null = null;\n\n    /**\n     * The orientation of the toggle group.\n     * @default 'horizontal'\n     */\n    @Input() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n    /**\n     * Whether the toggle group is disabled.\n     * @default false\n     */\n    @Input({ transform: booleanAttribute }) disabled = false;\n\n    /**\n     * Whether the toggle group roving focus should wrap.\n     * @default true\n     */\n    @Input({ transform: booleanAttribute }) wrap = true;\n\n    /**\n     * Event emitted when the selected toggle button changes.\n     */\n    @Input() readonly valueChange = new EventEmitter<string | null>();\n\n    /**\n     * Access the buttons in the toggle group.\n     */\n    @ContentChildren(RdxToggleGroupItemToken)\n    protected buttons?: QueryList<RdxToggleGroupItemDirective>;\n\n    /**\n     * FocusKeyManager to manage keyboard interactions.\n     */\n    private keyManager!: FocusKeyManager<RdxToggleGroupItemDirective>;\n\n    /**\n     * The value change callback.\n     */\n    private onChange?: (value: string | null) => void;\n\n    /**\n     * onTouch function registered via registerOnTouch (ControlValueAccessor).\n     */\n    protected onTouched?: () => void;\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if ('disabled' in changes) {\n            this.buttons?.forEach((button) => button.updateDisabled());\n        }\n    }\n\n    ngAfterContentInit(): void {\n        if (this.disabled) {\n            this.buttons?.forEach((button) => button.updateDisabled());\n        }\n\n        if (this.buttons) {\n            this.keyManager = new FocusKeyManager(this.buttons).withWrap();\n        }\n    }\n\n    protected onFocusIn(): void {\n        if (!this.keyManager.activeItem) {\n            this.keyManager.setFirstItemActive();\n        }\n    }\n\n    protected handleKeydown(event: KeyboardEvent): void {\n        switch (event.key) {\n            case 'ArrowRight':\n            case 'ArrowDown':\n                this.keyManager.setNextItemActive();\n                event.preventDefault();\n                break;\n            case 'ArrowLeft':\n            case 'ArrowUp':\n                this.keyManager.setPreviousItemActive();\n                event.preventDefault();\n                break;\n            case 'Home':\n                this.keyManager.setFirstItemActive();\n                event.preventDefault();\n                break;\n            case 'End':\n                this.keyManager.setLastItemActive();\n                event.preventDefault();\n                break;\n            case 'Enter':\n            case ' ':\n                // eslint-disable-next-line no-case-declarations\n                const activeItem = this.keyManager.activeItem;\n                if (activeItem) {\n                    activeItem.toggle();\n                }\n                event.preventDefault();\n                break;\n            default:\n                break;\n        }\n    }\n\n    /**\n     * Determine if a value is selected.\n     * @param value The value to check.\n     * @returns Whether the value is selected.\n     * @internal\n     */\n    isSelected(value: string): boolean {\n        return this.value === value;\n    }\n\n    /**\n     * Toggle a value.\n     * @param value The value to toggle.\n     * @internal\n     */\n    toggle(value: string): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.value = this.value === value ? null : value;\n        this.valueChange.emit(this.value);\n        this.onChange?.(this.value);\n    }\n\n    /**\n     * Select a value from Angular forms.\n     * @param value The value to select.\n     * @internal\n     */\n    writeValue(value: string): void {\n        this.value = value;\n    }\n\n    /**\n     * Register a callback to be called when the value changes.\n     * @param fn The callback to register.\n     * @internal\n     */\n    registerOnChange(fn: (value: string | null) => void): void {\n        this.onChange = fn;\n    }\n\n    /**\n     * Register a callback to be called when the toggle group is touched.\n     * @param fn The callback to register.\n     * @internal\n     */\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    /**\n     * Set the disabled state of the toggle group.\n     * @param isDisabled Whether the toggle group is disabled.\n     * @internal\n     */\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n        this.buttons?.forEach((button) => button.updateDisabled());\n    }\n}\n",
+            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Directive, input, model, output, signal } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { RdxRovingFocusGroupDirective } from '@radix-ng/primitives/roving-focus';\nimport { RdxToggleGroupToken } from './toggle-group.token';\n\nlet nextId = 0;\n\n@Directive({\n    selector: '[rdxToggleGroup]',\n    exportAs: 'rdxToggleGroup',\n    standalone: true,\n    providers: [\n        { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupDirective },\n        { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupDirective, multi: true }\n    ],\n    hostDirectives: [{ directive: RdxRovingFocusGroupDirective, inputs: ['dir', 'orientation', 'loop'] }],\n    host: {\n        role: 'group',\n\n        '(focusout)': 'onTouched?.()'\n    }\n})\nexport class RdxToggleGroupDirective implements ControlValueAccessor {\n    /**\n     * @ignore\n     */\n    readonly id: string = `rdx-toggle-group-${nextId++}`;\n\n    readonly value = model<string | string[] | undefined>(undefined);\n\n    readonly type = input<'single' | 'multiple'>('single');\n\n    /**\n     * Whether the toggle group is disabled.\n     * @default false\n     */\n    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * Event emitted when the selected toggle button changes.\n     */\n    readonly onValueChange = output<string[] | string | undefined>();\n\n    /**\n     * The value change callback.\n     */\n    private onChange?: (value: string | string[] | undefined) => void;\n\n    /**\n     * onTouch function registered via registerOnTouch (ControlValueAccessor).\n     */\n    protected onTouched?: () => void;\n\n    /**\n     * Toggle a value.\n     * @param value The value to toggle.\n     * @ignore\n     */\n    toggle(value: string): void {\n        if (this.disabled()) {\n            return;\n        }\n\n        if (this.type() === 'single') {\n            this.value.set(value);\n        } else {\n            this.value.set(\n                ((currentValue) =>\n                    currentValue && Array.isArray(currentValue)\n                        ? currentValue.includes(value)\n                            ? currentValue.filter((v) => v !== value) // delete\n                            : [...currentValue, value] // update\n                        : [value])(this.value())\n            );\n        }\n\n        this.onValueChange.emit(this.value());\n        this.onChange?.(this.value());\n    }\n\n    /**\n     * Select a value from Angular forms.\n     * @param value The value to select.\n     * @ignore\n     */\n    writeValue(value: string): void {\n        this.value.set(value);\n    }\n\n    /**\n     * Register a callback to be called when the value changes.\n     * @param fn The callback to register.\n     * @ignore\n     */\n    registerOnChange(fn: (value: string | string[] | undefined) => void): void {\n        this.onChange = fn;\n    }\n\n    /**\n     * Register a callback to be called when the toggle group is touched.\n     * @param fn The callback to register.\n     * @ignore\n     */\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    private readonly accessorDisabled = signal(false);\n    /**\n     * Set the disabled state of the toggle group.\n     * @param isDisabled Whether the toggle group is disabled.\n     * @ignore\n     */\n    setDisabledState(isDisabled: boolean): void {\n        this.accessorDisabled.set(isDisabled);\n    }\n}\n",
             "selector": "[rdxToggleGroup]",
             "providers": [
                 {
@@ -14644,152 +14629,119 @@
                 }
             ],
             "exportAs": "rdxToggleGroup",
-            "hostDirectives": [],
+            "hostDirectives": [
+                {
+                    "name": "RdxRovingFocusGroupDirective",
+                    "inputs": [
+                        "dir",
+                        "orientation",
+                        "loop"
+                    ],
+                    "outputs": []
+                }
+            ],
             "standalone": true,
-            "inputsClass": [
+            "inputsClass": [],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [
                 {
-                    "required": false,
                     "name": "disabled",
-                    "defaultValue": "false",
+                    "defaultValue": "input<boolean, BooleanInput>(false, { transform: booleanAttribute })",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "jsdoctags": [
-                        {
-                            "pos": 1451,
-                            "end": 1471,
-                            "kind": 327,
-                            "id": 0,
-                            "flags": 16842752,
-                            "modifierFlagsCache": 0,
-                            "transformFlags": 0,
-                            "tagName": {
-                                "pos": 1452,
-                                "end": 1459,
-                                "kind": 80,
-                                "id": 0,
-                                "flags": 16842752,
-                                "transformFlags": 0,
-                                "escapedText": "default"
-                            },
-                            "comment": "<p>false</p>\n"
-                        }
-                    ],
-                    "rawdescription": "\n\nWhether the toggle group is disabled.\n",
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
                     "description": "<p>Whether the toggle group is disabled.</p>\n",
-                    "line": 51,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "name": "orientation",
-                    "defaultValue": "'horizontal'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
+                    "line": 38,
+                    "rawdescription": "\n\nWhether the toggle group is disabled.\n",
+                    "modifierKind": [
+                        148
+                    ],
                     "jsdoctags": [
                         {
-                            "pos": 1292,
-                            "end": 1319,
+                            "pos": 1217,
+                            "end": 1237,
                             "kind": 327,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1293,
-                                "end": 1300,
+                                "pos": 1218,
+                                "end": 1225,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
                                 "transformFlags": 0,
                                 "escapedText": "default"
                             },
-                            "comment": "<p>&#39;horizontal&#39;</p>\n"
+                            "comment": "<p>false</p>\n"
                         }
-                    ],
-                    "rawdescription": "\n\nThe orientation of the toggle group.\n",
-                    "description": "<p>The orientation of the toggle group.</p>\n",
-                    "line": 45,
-                    "type": "\"horizontal\" | \"vertical\"",
-                    "decorators": []
+                    ]
                 },
                 {
-                    "name": "value",
-                    "defaultValue": "null",
+                    "name": "onValueChange",
+                    "defaultValue": "output<string[] | string | undefined>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nThe selected toggle button.\n",
-                    "description": "<p>The selected toggle button.</p>\n",
-                    "line": 39,
-                    "type": "string | null",
-                    "decorators": []
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Event emitted when the selected toggle button changes.</p>\n",
+                    "line": 43,
+                    "rawdescription": "\n\nEvent emitted when the selected toggle button changes.\n",
+                    "modifierKind": [
+                        148
+                    ]
                 },
                 {
-                    "name": "valueChange",
-                    "defaultValue": "new EventEmitter<string | null>()",
+                    "name": "type",
+                    "defaultValue": "input<'single' | 'multiple'>('single')",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nEvent emitted when the selected toggle button changes.\n",
-                    "description": "<p>Event emitted when the selected toggle button changes.</p>\n",
-                    "line": 62,
-                    "type": "any",
-                    "decorators": []
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 32,
+                    "modifierKind": [
+                        148
+                    ]
                 },
                 {
-                    "required": false,
-                    "name": "wrap",
-                    "defaultValue": "true",
+                    "name": "value",
+                    "defaultValue": "model<string | string[] | undefined>(undefined)",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "jsdoctags": [
-                        {
-                            "pos": 1610,
-                            "end": 1629,
-                            "kind": 327,
-                            "id": 0,
-                            "flags": 16842752,
-                            "modifierFlagsCache": 0,
-                            "transformFlags": 0,
-                            "tagName": {
-                                "pos": 1611,
-                                "end": 1618,
-                                "kind": 80,
-                                "id": 0,
-                                "flags": 16842752,
-                                "transformFlags": 0,
-                                "escapedText": "default"
-                            },
-                            "comment": "<p>true</p>\n"
-                        }
-                    ],
-                    "rawdescription": "\n\nWhether the toggle group roving focus should wrap.\n",
-                    "description": "<p>Whether the toggle group roving focus should wrap.</p>\n",
-                    "line": 57,
-                    "type": "boolean",
-                    "decorators": []
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 30,
+                    "modifierKind": [
+                        148
+                    ]
                 }
             ],
-            "outputsClass": [],
-            "deprecated": false,
-            "deprecationMessage": "",
-            "hostBindings": [],
-            "hostListeners": [],
-            "propertiesClass": [],
             "methodsClass": [],
             "extends": [],
             "implements": [
-                "OnChanges",
-                "AfterContentInit",
                 "ControlValueAccessor"
             ]
         },
         {
             "name": "RdxToggleGroupItemDirective",
-            "id": "directive-RdxToggleGroupItemDirective-eb9160aa46c41c750f811edfdf932366bed8f30158b87474f3e10310948fe89f855e701d3eea4f73adc9a5a228212677ec1e32b25ee9342457f4f742ca896a8a",
+            "id": "directive-RdxToggleGroupItemDirective-7e300e2bf2b04bb52eb9a04b08959376cad20ba442fe1f97f5818002c3764d510ad73d042947b0d30a2ccced8f29cec1023aae51c297de5ffa6fa4681386112a",
             "file": "toggle-group/src/toggle-group-item.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { FocusableOption } from '@angular/cdk/a11y';\nimport { booleanAttribute, Directive, ElementRef, inject, Input, OnChanges, SimpleChanges } from '@angular/core';\nimport { RdxToggleGroupItemToken } from './toggle-group-item.token';\nimport { injectToggleGroup } from './toggle-group.token';\n\n@Directive({\n    selector: '[rdxToggleGroupItem]',\n    exportAs: 'rdxToggleGroupItem',\n    standalone: true,\n    providers: [{ provide: RdxToggleGroupItemToken, useExisting: RdxToggleGroupItemDirective }],\n    host: {\n        role: 'radio',\n        '[attr.aria-checked]': 'checked',\n        '[attr.aria-disabled]': 'disabled || toggleGroup.disabled',\n        '[attr.aria-pressed]': 'undefined',\n\n        '[attr.data-disabled]': 'disabled || toggleGroup.disabled',\n        '[attr.data-state]': 'checked ? \"on\" : \"off\"',\n        '[attr.data-orientation]': 'toggleGroup.orientation',\n\n        '(click)': 'toggle()',\n        '(focus)': 'focus()'\n    }\n})\nexport class RdxToggleGroupItemDirective implements OnChanges, FocusableOption {\n    /**\n     * Access the toggle group.\n     * @ignore\n     */\n    protected readonly toggleGroup = injectToggleGroup();\n\n    private readonly elementRef = inject(ElementRef);\n    /**\n     * The value of this toggle button.\n     */\n    @Input({ required: true }) value!: string;\n\n    /**\n     * Whether this toggle button is disabled.\n     * @default false\n     */\n    @Input({ transform: booleanAttribute }) disabled = false;\n\n    /**\n     * Whether this toggle button is checked.\n     */\n    protected get checked(): boolean {\n        return this.toggleGroup.isSelected(this.value);\n    }\n\n    /**\n     * @ignore\n     */\n    ngOnChanges(changes: SimpleChanges): void {\n        if ('disabled' in changes) {\n            // TODO\n        }\n    }\n\n    /**\n     * @ignore\n     */\n    focus(): void {\n        this.elementRef.nativeElement.focus();\n    }\n\n    /**\n     * @ignore\n     */\n    toggle(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.toggleGroup.toggle(this.value);\n    }\n\n    /**\n     * Ensure the disabled state is propagated to the roving focus item.\n     * @internal\n     * @ignore\n     */\n    updateDisabled(): void {\n        // TODO\n    }\n}\n",
+            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, computed, Directive, effect, inject, input } from '@angular/core';\nimport { RdxRovingFocusItemDirective } from '@radix-ng/primitives/roving-focus';\nimport { RdxToggleDirective } from '@radix-ng/primitives/toggle';\nimport { RdxToggleGroupItemToken } from './toggle-group-item.token';\nimport { injectToggleGroup } from './toggle-group.token';\n\n@Directive({\n    selector: '[rdxToggleGroupItem]',\n    exportAs: 'rdxToggleGroupItem',\n    standalone: true,\n    providers: [{ provide: RdxToggleGroupItemToken, useExisting: RdxToggleGroupItemDirective }],\n    hostDirectives: [\n        {\n            directive: RdxRovingFocusItemDirective,\n            inputs: ['focusable', 'active', 'allowShiftKey']\n        },\n        {\n            directive: RdxToggleDirective,\n            inputs: ['pressed', 'disabled']\n        }\n    ],\n    host: {\n        '(click)': 'toggle()'\n    }\n})\nexport class RdxToggleGroupItemDirective {\n    private readonly rdxToggleDirective = inject(RdxToggleDirective);\n\n    private readonly rdxRovingFocusItemDirective = inject(RdxRovingFocusItemDirective);\n\n    /**\n     * Access the toggle group.\n     * @ignore\n     */\n    protected readonly rootContext = injectToggleGroup();\n\n    /**\n     * The value of this toggle button.\n     */\n    readonly value = input.required<string>();\n\n    /**\n     * Whether this toggle button is disabled.\n     * @default false\n     */\n    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    private readonly isPressed = computed(() => {\n        return this.rootContext.type() === 'single'\n            ? this.rootContext.value() === this.value()\n            : this.rootContext.value()?.includes(this.value());\n    });\n\n    private readonly isDisabled = computed(() => this.rootContext.disabled() || this.disabled());\n\n    constructor() {\n        effect(() => {\n            this.rdxToggleDirective.pressed.set(!!this.isPressed());\n            this.rdxToggleDirective.disabledModel.set(this.isDisabled());\n\n            this.rdxRovingFocusItemDirective.active = !!this.isPressed();\n        });\n    }\n\n    /**\n     * @ignore\n     */\n    toggle(): void {\n        if (this.disabled()) {\n            return;\n        }\n\n        this.rootContext.toggle(this.value());\n    }\n}\n",
             "selector": "[rdxToggleGroupItem]",
             "providers": [
                 {
@@ -14798,53 +14750,41 @@
                 }
             ],
             "exportAs": "rdxToggleGroupItem",
-            "hostDirectives": [],
-            "standalone": true,
-            "inputsClass": [
+            "hostDirectives": [
                 {
-                    "required": false,
-                    "name": "disabled",
-                    "defaultValue": "false",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "jsdoctags": [
-                        {
-                            "pos": 1369,
-                            "end": 1389,
-                            "kind": 327,
-                            "id": 0,
-                            "flags": 16842752,
-                            "modifierFlagsCache": 0,
-                            "transformFlags": 0,
-                            "tagName": {
-                                "pos": 1370,
-                                "end": 1377,
-                                "kind": 80,
-                                "id": 0,
-                                "flags": 16842752,
-                                "transformFlags": 0,
-                                "escapedText": "default"
-                            },
-                            "comment": "<p>false</p>\n"
-                        }
+                    "name": "RdxRovingFocusItemDirective",
+                    "inputs": [
+                        "focusable",
+                        "active",
+                        "allowShiftKey"
                     ],
-                    "rawdescription": "\n\nWhether this toggle button is disabled.\n",
-                    "description": "<p>Whether this toggle button is disabled.</p>\n",
-                    "line": 42,
-                    "type": "boolean",
-                    "decorators": []
+                    "outputs": []
                 },
                 {
-                    "required": true,
+                    "name": "RdxToggleDirective",
+                    "inputs": [
+                        "pressed",
+                        "disabled"
+                    ],
+                    "outputs": []
+                }
+            ],
+            "standalone": true,
+            "inputsClass": [
+                {
                     "name": "value",
                     "deprecated": false,
                     "deprecationMessage": "",
+                    "type": "",
+                    "indexKey": "",
                     "optional": false,
-                    "rawdescription": "\n\nThe value of this toggle button.\n",
                     "description": "<p>The value of this toggle button.</p>\n",
-                    "line": 36,
-                    "type": "string",
-                    "decorators": []
+                    "line": 41,
+                    "rawdescription": "\n\nThe value of this toggle button.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": true
                 }
             ],
             "outputsClass": [],
@@ -14852,171 +14792,69 @@
             "deprecationMessage": "",
             "hostBindings": [],
             "hostListeners": [],
-            "propertiesClass": [],
-            "methodsClass": [],
-            "extends": [],
-            "implements": [
-                "OnChanges",
-                "FocusableOption"
-            ]
-        },
-        {
-            "name": "RdxToggleGroupMultipleDirective",
-            "id": "directive-RdxToggleGroupMultipleDirective-02fedd3015562ba7140c1e0e2cb6727c520f803ac25988f382a2311a05795cbbec8daa1138b5833c3d67ef1215b6b3445a922a154ea56120e578e0b7bb540642",
-            "file": "toggle-group/src/toggle-group-multiple.directive.ts",
-            "type": "directive",
-            "description": "",
-            "rawdescription": "\n",
-            "sourceCode": "import { FocusKeyManager } from '@angular/cdk/a11y';\nimport {\n    AfterContentInit,\n    booleanAttribute,\n    ContentChildren,\n    Directive,\n    EventEmitter,\n    Input,\n    OnChanges,\n    QueryList,\n    SimpleChanges\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport type { RdxToggleGroupItemDirective } from './toggle-group-item.directive';\nimport { RdxToggleGroupItemToken } from './toggle-group-item.token';\nimport { RdxToggleGroupToken } from './toggle-group.token';\n\n@Directive({\n    selector: '[rdxToggleGroupMultiple]',\n    exportAs: 'rdxToggleGroupMultiple',\n    standalone: true,\n    providers: [\n        { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupMultipleDirective },\n        { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupMultipleDirective, multi: true }\n    ],\n    host: {\n        role: 'group',\n        '[attr.data-orientation]': 'orientation',\n\n        '(keydown)': 'handleKeydown($event)',\n        '(focusin)': 'onFocusIn()',\n        '(focusout)': 'onTouched?.()'\n    }\n})\nexport class RdxToggleGroupMultipleDirective implements OnChanges, AfterContentInit, ControlValueAccessor {\n    /**\n     * The selected toggle button.\n     */\n    @Input() value: ReadonlyArray<string> = [];\n\n    /**\n     * The orientation of the toggle group.\n     * @default 'horizontal'\n     */\n    @Input() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n    /**\n     * Whether the toggle group is disabled.\n     * @default false\n     */\n    @Input({ transform: booleanAttribute }) disabled = false;\n\n    /**\n     * Whether the toggle group roving focus should wrap.\n     * @default true\n     */\n    @Input({ transform: booleanAttribute }) wrap = true;\n\n    /**\n     * Event emitted when the selected toggle button changes.\n     */\n    @Input() readonly valueChange = new EventEmitter<ReadonlyArray<string>>();\n\n    /**\n     * Access the buttons in the toggle group.\n     * @ignore\n     */\n    @ContentChildren(RdxToggleGroupItemToken)\n    protected buttons?: QueryList<RdxToggleGroupItemDirective>;\n\n    /**\n     * FocusKeyManager to manage keyboard interactions.\n     */\n    private keyManager!: FocusKeyManager<RdxToggleGroupItemDirective>;\n\n    /**\n     * The value change callback.\n     * @ignore\n     */\n    private onChange?: (value: ReadonlyArray<string>) => void;\n\n    /**\n     * onTouch function registered via registerOnTouch (ControlValueAccessor).\n     * @ignore\n     */\n    protected onTouched?: () => void;\n\n    /**\n     * @ignore\n     */\n    ngOnChanges(changes: SimpleChanges): void {\n        if ('disabled' in changes) {\n            this.buttons?.forEach((button) => button.updateDisabled());\n        }\n    }\n\n    /**\n     * @ignore\n     */\n    ngAfterContentInit(): void {\n        if (this.disabled) {\n            this.buttons?.forEach((button) => button.updateDisabled());\n        }\n\n        if (this.buttons) {\n            this.keyManager = new FocusKeyManager(this.buttons).withWrap();\n        }\n    }\n\n    protected onFocusIn(): void {\n        if (!this.keyManager.activeItem) {\n            this.keyManager.setFirstItemActive();\n        }\n    }\n\n    protected handleKeydown(event: KeyboardEvent): void {\n        switch (event.key) {\n            case 'ArrowRight':\n            case 'ArrowDown':\n                this.keyManager.setNextItemActive();\n                event.preventDefault();\n                break;\n            case 'ArrowLeft':\n            case 'ArrowUp':\n                this.keyManager.setPreviousItemActive();\n                event.preventDefault();\n                break;\n            case 'Home':\n                this.keyManager.setFirstItemActive();\n                event.preventDefault();\n                break;\n            case 'End':\n                this.keyManager.setLastItemActive();\n                event.preventDefault();\n                break;\n            case 'Enter':\n            case ' ':\n                // eslint-disable-next-line no-case-declarations\n                const activeItem = this.keyManager.activeItem;\n                if (activeItem) {\n                    activeItem.toggle();\n                }\n                event.preventDefault();\n                break;\n            default:\n                break;\n        }\n    }\n\n    /**\n     * Determine if a value is selected.\n     * @param value The value to check.\n     * @returns Whether the value is selected.\n     * @ignore\n     */\n    isSelected(value: string): boolean {\n        return this.value.includes(value);\n    }\n\n    /**\n     * Toggle a value.\n     * @param value The value to toggle.\n     * @ignore\n     */\n    toggle(value: string): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.value = this.value.includes(value) ? this.value.filter((v) => v !== value) : [...this.value, value];\n\n        this.valueChange.emit(this.value);\n        this.onChange?.(this.value);\n    }\n\n    /**\n     * Select a value from Angular forms.\n     * @param value The value to select.\n     * @ignore\n     */\n    writeValue(value: ReadonlyArray<string>): void {\n        this.value = value;\n    }\n\n    /**\n     * Register a callback to be called when the value changes.\n     * @param fn The callback to register.\n     * @ignore\n     */\n    registerOnChange(fn: (value: ReadonlyArray<string>) => void): void {\n        this.onChange = fn;\n    }\n\n    /**\n     * Register a callback to be called when the toggle group is touched.\n     * @param fn The callback to register.\n     * @ignore\n     */\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    /**\n     * Set the disabled state of the toggle group.\n     * @param isDisabled Whether the toggle group is disabled.\n     * @ignore\n     */\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n        this.buttons?.forEach((button) => button.updateDisabled());\n    }\n}\n",
-            "selector": "[rdxToggleGroupMultiple]",
-            "providers": [
-                {
-                    "name": "{ provide: RdxToggleGroupToken, useExisting: RdxToggleGroupMultipleDirective }",
-                    "type": "directive"
-                },
-                {
-                    "name": "{ provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupMultipleDirective, multi: true }",
-                    "type": "directive"
-                }
-            ],
-            "exportAs": "rdxToggleGroupMultiple",
-            "hostDirectives": [],
-            "standalone": true,
-            "inputsClass": [
+            "propertiesClass": [
                 {
-                    "required": false,
                     "name": "disabled",
-                    "defaultValue": "false",
+                    "defaultValue": "input<boolean, BooleanInput>(false, { transform: booleanAttribute })",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "jsdoctags": [
-                        {
-                            "pos": 1497,
-                            "end": 1517,
-                            "kind": 327,
-                            "id": 0,
-                            "flags": 16842752,
-                            "modifierFlagsCache": 0,
-                            "transformFlags": 0,
-                            "tagName": {
-                                "pos": 1498,
-                                "end": 1505,
-                                "kind": 80,
-                                "id": 0,
-                                "flags": 16842752,
-                                "transformFlags": 0,
-                                "escapedText": "default"
-                            },
-                            "comment": "<p>false</p>\n"
-                        }
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Whether this toggle button is disabled.</p>\n",
+                    "line": 47,
+                    "rawdescription": "\n\nWhether this toggle button is disabled.\n",
+                    "modifierKind": [
+                        148
                     ],
-                    "rawdescription": "\n\nWhether the toggle group is disabled.\n",
-                    "description": "<p>Whether the toggle group is disabled.</p>\n",
-                    "line": 51,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "name": "orientation",
-                    "defaultValue": "'horizontal'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
                     "jsdoctags": [
                         {
-                            "pos": 1338,
-                            "end": 1365,
+                            "pos": 1441,
+                            "end": 1461,
                             "kind": 327,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1339,
-                                "end": 1346,
+                                "pos": 1442,
+                                "end": 1449,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
                                 "transformFlags": 0,
                                 "escapedText": "default"
                             },
-                            "comment": "<p>&#39;horizontal&#39;</p>\n"
+                            "comment": "<p>false</p>\n"
                         }
-                    ],
-                    "rawdescription": "\n\nThe orientation of the toggle group.\n",
-                    "description": "<p>The orientation of the toggle group.</p>\n",
-                    "line": 45,
-                    "type": "\"horizontal\" | \"vertical\"",
-                    "decorators": []
+                    ]
                 },
                 {
                     "name": "value",
-                    "defaultValue": "[]",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nThe selected toggle button.\n",
-                    "description": "<p>The selected toggle button.</p>\n",
-                    "line": 39,
-                    "type": "ReadonlyArray<string>",
-                    "decorators": []
-                },
-                {
-                    "name": "valueChange",
-                    "defaultValue": "new EventEmitter<ReadonlyArray<string>>()",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nEvent emitted when the selected toggle button changes.\n",
-                    "description": "<p>Event emitted when the selected toggle button changes.</p>\n",
-                    "line": 62,
-                    "type": "any",
-                    "decorators": []
-                },
-                {
-                    "required": false,
-                    "name": "wrap",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "jsdoctags": [
-                        {
-                            "pos": 1656,
-                            "end": 1675,
-                            "kind": 327,
-                            "id": 0,
-                            "flags": 16842752,
-                            "modifierFlagsCache": 0,
-                            "transformFlags": 0,
-                            "tagName": {
-                                "pos": 1657,
-                                "end": 1664,
-                                "kind": 80,
-                                "id": 0,
-                                "flags": 16842752,
-                                "transformFlags": 0,
-                                "escapedText": "default"
-                            },
-                            "comment": "<p>true</p>\n"
-                        }
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>The value of this toggle button.</p>\n",
+                    "line": 41,
+                    "rawdescription": "\n\nThe value of this toggle button.\n",
+                    "modifierKind": [
+                        148
                     ],
-                    "rawdescription": "\n\nWhether the toggle group roving focus should wrap.\n",
-                    "description": "<p>Whether the toggle group roving focus should wrap.</p>\n",
-                    "line": 57,
-                    "type": "boolean",
-                    "decorators": []
+                    "required": true
                 }
             ],
-            "outputsClass": [],
-            "deprecated": false,
-            "deprecationMessage": "",
-            "hostBindings": [],
-            "hostListeners": [],
-            "propertiesClass": [],
             "methodsClass": [],
             "extends": [],
-            "implements": [
-                "OnChanges",
-                "AfterContentInit",
-                "ControlValueAccessor"
-            ]
+            "constructorObj": {
+                "name": "constructor",
+                "description": "",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "args": [],
+                "line": 55
+            }
         },
         {
             "name": "RdxToggleVisuallyHiddenInputDirective",
@@ -30050,6 +29888,16 @@
                 "type": "number",
                 "defaultValue": "0"
             },
+            {
+                "name": "nextId",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "toggle-group/src/toggle-group.directive.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "number",
+                "defaultValue": "0"
+            },
             {
                 "name": "nextId",
                 "ctype": "miscellaneous",
@@ -30548,7 +30396,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "new InjectionToken<RdxToggleGroupDirective | RdxToggleGroupMultipleDirective>(\n    'RdxToggleGroupToken'\n)"
+                "defaultValue": "new InjectionToken<RdxToggleGroupDirective>('RdxToggleGroupToken')"
             },
             {
                 "name": "RdxTooltipAnchorToken",
@@ -32125,7 +31973,18 @@
                 "deprecationMessage": "",
                 "description": "",
                 "args": [],
-                "returnType": "RdxToggleGroupDirective | RdxToggleGroupMultipleDirective"
+                "returnType": "RdxToggleGroupDirective"
+            },
+            {
+                "name": "injectToggleGroupItem",
+                "file": "toggle-group/src/toggle-group-item.token.ts",
+                "ctype": "miscellaneous",
+                "subtype": "function",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "description": "",
+                "args": [],
+                "returnType": "RdxToggleGroupItemDirective"
             },
             {
                 "name": "injectTooltipRoot",
@@ -35576,6 +35435,18 @@
                     "defaultValue": "0"
                 }
             ],
+            "toggle-group/src/toggle-group.directive.ts": [
+                {
+                    "name": "nextId",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "toggle-group/src/toggle-group.directive.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "number",
+                    "defaultValue": "0"
+                }
+            ],
             "tooltip/src/tooltip-root.directive.ts": [
                 {
                     "name": "nextId",
@@ -35857,7 +35728,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "new InjectionToken<RdxToggleGroupDirective | RdxToggleGroupMultipleDirective>(\n    'RdxToggleGroupToken'\n)"
+                    "defaultValue": "new InjectionToken<RdxToggleGroupDirective>('RdxToggleGroupToken')"
                 }
             ],
             "tooltip/src/tooltip-anchor.token.ts": [
@@ -37949,7 +37820,20 @@
                     "deprecationMessage": "",
                     "description": "",
                     "args": [],
-                    "returnType": "RdxToggleGroupDirective | RdxToggleGroupMultipleDirective"
+                    "returnType": "RdxToggleGroupDirective"
+                }
+            ],
+            "toggle-group/src/toggle-group-item.token.ts": [
+                {
+                    "name": "injectToggleGroupItem",
+                    "file": "toggle-group/src/toggle-group-item.token.ts",
+                    "ctype": "miscellaneous",
+                    "subtype": "function",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "description": "",
+                    "args": [],
+                    "returnType": "RdxToggleGroupItemDirective"
                 }
             ],
             "tooltip/src/tooltip-root.inject.ts": [