@radix-ng/primitives 0.13.0 → 0.14.0

package/compodoc/documentation.json

@@ -196,12 +196,12 @@
         },
         {
             "name": "RdxAvatarFallbackProps",
-            "id": "interface-RdxAvatarFallbackProps-c8b14c99cbd7da2781b645483e75a4570eeed5794a58213d451c684aa433daae179c9caf3344d550af77ce8860288512938a0baeebc80e0a49f0c38a4557d5fc",
+            "id": "interface-RdxAvatarFallbackProps-3ec0a285681b4e3cef007c029710e37483fa80c00cbfcce5147fbcb173c808e1606e55fea16a94eb028b2692758b9c15c983bf6f8e5d3bb38210d8ba1d5d3ec0",
             "file": "avatar/src/avatar-fallback.directive.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { Directive, inject, Input, NgZone, numberAttribute, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';\nimport { injectAvatar } from './avatar-root.directive';\nimport { injectAvatarConfig } from './avatar.config';\n\nexport interface RdxAvatarFallbackProps {\n    delayMs?: number;\n}\n\n@Directive({\n    selector: 'span[rdxAvatarFallback]',\n    exportAs: 'rdxAvatarFallback',\n    standalone: true,\n    host: {\n        '[style.display]': 'visible ? null : \"none\"'\n    }\n})\nexport class RdxAvatarFallbackDirective implements RdxAvatarFallbackProps, OnInit, OnDestroy {\n    private readonly avatar = injectAvatar();\n\n    private readonly config = injectAvatarConfig();\n\n    private readonly ngZone = inject(NgZone);\n\n    private readonly platformId = inject(PLATFORM_ID);\n\n    /**\n     * Define a delay before the fallback is shown.\n     * This is useful to only show the fallback for those with slower connections.\n     * @default 0\n     */\n    @Input({ alias: 'rdxDelayMs', transform: numberAttribute }) delayMs: number = this.config.delayMs;\n\n    protected get visible(): boolean {\n        return this.delayElapsed && this.avatar._state() !== 'loaded';\n    }\n\n    /**\n     * Determine the delay has elapsed, and we can show the fallback.\n     */\n    private delayElapsed = false;\n\n    private timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n    ngOnInit(): void {\n        if (isPlatformBrowser(this.platformId)) {\n            this.ngZone.runOutsideAngular(() => {\n                this.timeoutId = globalThis.setTimeout(() => {\n                    this.ngZone.run(() => {\n                        this.delayElapsed = true;\n                    });\n                }, this.delayMs);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        if (isPlatformBrowser(this.platformId) && this.timeoutId !== null) {\n            globalThis.clearTimeout(this.timeoutId);\n        }\n    }\n}\n",
+            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport {\n    Directive,\n    inject,\n    Input,\n    NgZone,\n    numberAttribute,\n    OnDestroy,\n    OnInit,\n    PLATFORM_ID,\n    signal\n} from '@angular/core';\nimport { injectAvatar } from './avatar-root.directive';\nimport { injectAvatarConfig } from './avatar.config';\n\nexport interface RdxAvatarFallbackProps {\n    delayMs?: number;\n}\n\n@Directive({\n    selector: 'span[rdxAvatarFallback]',\n    exportAs: 'rdxAvatarFallback',\n    standalone: true,\n    host: {\n        '[style.display]': 'visible() ? null : \"none\"'\n    }\n})\nexport class RdxAvatarFallbackDirective implements RdxAvatarFallbackProps, OnInit, OnDestroy {\n    private readonly avatar = injectAvatar();\n\n    private readonly config = injectAvatarConfig();\n\n    private readonly ngZone = inject(NgZone);\n\n    private readonly platformId = inject(PLATFORM_ID);\n\n    /**\n     * Define a delay before the fallback is shown.\n     * This is useful to only show the fallback for those with slower connections.\n     * @default 0\n     */\n    @Input({ alias: 'rdxDelayMs', transform: numberAttribute }) delayMs: number = this.config.delayMs;\n\n    readonly visible = signal(false);\n\n    /**\n     * Determine the delay has elapsed, and we can show the fallback.\n     */\n    private delayElapsed = false;\n\n    private timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n    ngOnInit(): void {\n        if (isPlatformBrowser(this.platformId)) {\n            this.ngZone.runOutsideAngular(() => {\n                this.timeoutId = globalThis.setTimeout(() => {\n                    this.ngZone.run(() => {\n                        this.delayElapsed = true;\n                        this.updateVisibility();\n                    });\n                }, this.delayMs);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        if (isPlatformBrowser(this.platformId) && this.timeoutId !== null) {\n            globalThis.clearTimeout(this.timeoutId);\n        }\n    }\n\n    private updateVisibility(): void {\n        this.visible.set(this.delayElapsed && this.avatar._state() !== 'loaded');\n    }\n}\n",
             "properties": [
                 {
                     "name": "delayMs",
@@ -210,7 +210,7 @@
                     "type": "number",
                     "optional": true,
                     "description": "",
-                    "line": 7
+                    "line": 17
                 }
             ],
             "indexSignatures": [],
@@ -279,12 +279,12 @@
         },
         {
             "name": "SwitchProps",
-            "id": "interface-SwitchProps-b38377551dbe8df1a02039592e5cef35095983dcd5cf8461966049b698303e9d4ded61b0f28af5c82665d0aff8fcc25fb00bfaedb3395ad35300c8a9a4cd7331",
+            "id": "interface-SwitchProps-a1d1ce9095ddd803dd1679e08e7914e7bbc821178d609e91909c39171ce2013fa88949495d3569fcd36dc50f9ffd58e50d69a30df9f1344c8d7f6610de2d389f",
             "file": "switch/src/switch-root.directive.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    computed,\n    Directive,\n    EventEmitter,\n    inject,\n    InjectionToken,\n    input,\n    InputSignalWithTransform,\n    model,\n    ModelSignal,\n    Output\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport const RdxSwitchToken = new InjectionToken<RdxSwitchRootDirective>('RdxSwitchToken');\n\nexport function injectSwitch(): RdxSwitchRootDirective {\n    return inject(RdxSwitchToken);\n}\n\nexport interface SwitchProps {\n    checked?: ModelSignal<boolean>;\n    defaultChecked?: boolean;\n    required?: InputSignalWithTransform<boolean, BooleanInput>;\n    onCheckedChange?: EventEmitter<boolean>;\n}\n\nlet idIterator = 0;\n\n@Directive({\n    selector: 'button[rdxSwitchRoot]',\n    exportAs: 'rdxSwitchRoot',\n    standalone: true,\n    providers: [\n        { provide: RdxSwitchToken, useExisting: RdxSwitchRootDirective },\n        { provide: NG_VALUE_ACCESSOR, useExisting: RdxSwitchRootDirective, multi: true }\n    ],\n    host: {\n        role: 'switch',\n        type: 'button',\n        '[id]': 'elementId()',\n        '[attr.aria-checked]': 'checked()',\n        '[attr.aria-required]': 'required',\n        '[attr.data-state]': 'checked() ? \"checked\" : \"unchecked\"',\n        '[attr.data-disabled]': 'disabledState() ? \"true\" : null',\n        '[attr.disabled]': 'disabledState() ? disabledState() : null',\n\n        '(focus)': '_onTouched?.()',\n        '(click)': 'toggle()'\n    }\n})\nexport class RdxSwitchRootDirective implements SwitchProps, ControlValueAccessor {\n    readonly id = input<string>(`rdx-switch-${idIterator++}`);\n    protected readonly elementId = computed(() => (this.id() ? this.id() : null));\n\n    // When true, indicates that the user must check\n    // the switch before the owning form can be submitted.\n    readonly required = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute\n    });\n\n    // The controlled state of the switch\n    readonly checked = model<boolean>(false);\n\n    // When true, prevents the user from interacting with the switch.\n    readonly disabled = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute\n    });\n\n    /*\n     * @ignore\n     */\n    readonly disabledState = computed(() => this.disabled());\n\n    @Output() onCheckedChange = new EventEmitter<boolean>();\n\n    /**\n     * The method to be called in order to update ngModel.\n     */\n    _onChange?: (checked: boolean) => void;\n\n    /**\n     * onTouch function registered via registerOnTouch (ControlValueAccessor).\n     */\n    _onTouched?: () => void;\n\n    /**\n     * Registers a function to call when the checked state changes.\n     * @param fn Function to call on change.\n     */\n    registerOnChange(fn: (checked: boolean) => void): void {\n        this._onChange = fn;\n    }\n\n    /**\n     * Registers a function to call when the component is touched.\n     * @param fn Function to call on touch.\n     */\n    registerOnTouched(fn: () => void): void {\n        this._onTouched = fn;\n    }\n\n    /**\n     * Writes a new value to the model.\n     * @param checked The new checked value.\n     */\n    writeValue(checked: boolean): void {\n        this.checked.set(checked);\n    }\n\n    /**\n     * Toggles the checked state of the switch.\n     * If the switch is disabled, the function returns early.\n     */\n    protected toggle(): void {\n        if (this.disabledState()) {\n            return;\n        }\n\n        this.checked.set(!this.checked());\n        this._onChange?.(this.checked());\n\n        this.onCheckedChange.emit(this.checked());\n    }\n}\n",
+            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    computed,\n    Directive,\n    inject,\n    InjectionToken,\n    input,\n    InputSignalWithTransform,\n    model,\n    ModelSignal,\n    output,\n    OutputEmitterRef\n} from '@angular/core';\n\nexport const RdxSwitchToken = new InjectionToken<RdxSwitchRootDirective>('RdxSwitchToken');\n\nexport function injectSwitch(): RdxSwitchRootDirective {\n    return inject(RdxSwitchToken);\n}\n\nexport interface SwitchProps {\n    checked?: ModelSignal<boolean>;\n    defaultChecked?: boolean;\n    required?: InputSignalWithTransform<boolean, BooleanInput>;\n    onCheckedChange?: OutputEmitterRef<boolean>;\n}\n\nlet idIterator = 0;\n\n@Directive({\n    selector: 'button[rdxSwitchRoot]',\n    exportAs: 'rdxSwitchRoot',\n    standalone: true,\n    providers: [\n        { provide: RdxSwitchToken, useExisting: RdxSwitchRootDirective }],\n    host: {\n        role: 'switch',\n        type: 'button',\n        '[id]': 'elementId()',\n        '[attr.aria-checked]': 'checked()',\n        '[attr.aria-required]': 'required',\n        '[attr.data-state]': 'checked() ? \"checked\" : \"unchecked\"',\n        '[attr.data-disabled]': 'disabledState() ? \"true\" : null',\n        '[attr.disabled]': 'disabledState() ? disabledState() : null',\n\n        '(click)': 'toggle()'\n    }\n})\nexport class RdxSwitchRootDirective implements SwitchProps {\n    readonly id = input<string>(`rdx-switch-${idIterator++}`);\n    protected readonly elementId = computed(() => (this.id() ? this.id() : null));\n\n    /**\n     * When true, indicates that the user must check the switch before the owning form can be submitted.\n     */\n    readonly required = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute\n    });\n\n    /**\n     * The controlled state of the switch. Must be used in conjunction with onCheckedChange.\n     */\n    readonly checked = model<boolean>(false);\n\n    /**\n     * When true, prevents the user from interacting with the switch.\n     */\n    readonly disabled = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute\n    });\n\n    /*\n     * @ignore\n     */\n    readonly disabledState = computed(() => this.disabled());\n\n    /**\n     * Event handler called when the state of the switch changes.\n     */\n    readonly onCheckedChange = output<boolean>();\n\n    /**\n     * Toggles the checked state of the switch.\n     * If the switch is disabled, the function returns early.\n     */\n    protected toggle(): void {\n        if (this.disabledState()) {\n            return;\n        }\n\n        this.checked.set(!this.checked());\n\n        this.onCheckedChange.emit(this.checked());\n    }\n}\n",
             "properties": [
                 {
                     "name": "checked",
@@ -293,7 +293,7 @@
                     "type": "ModelSignal<boolean>",
                     "optional": true,
                     "description": "",
-                    "line": 24
+                    "line": 23
                 },
                 {
                     "name": "defaultChecked",
@@ -302,16 +302,16 @@
                     "type": "boolean",
                     "optional": true,
                     "description": "",
-                    "line": 25
+                    "line": 24
                 },
                 {
                     "name": "onCheckedChange",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "EventEmitter<boolean>",
+                    "type": "OutputEmitterRef<boolean>",
                     "optional": true,
                     "description": "",
-                    "line": 27
+                    "line": 26
                 },
                 {
                     "name": "required",
@@ -320,7 +320,7 @@
                     "type": "InputSignalWithTransform<boolean | BooleanInput>",
                     "optional": true,
                     "description": "",
-                    "line": 26
+                    "line": 25
                 }
             ],
             "indexSignatures": [],
@@ -493,12 +493,12 @@
         },
         {
             "name": "ToggleProps",
-            "id": "interface-ToggleProps-94be1eb58011efa799af90258505424aecc8486ac9fba7c7b9b37fe9fcc03ea74abc8b303a3dd63c6070953df747036cd920029be0c77da56a93076514dcc4c6",
+            "id": "interface-ToggleProps-0bcbd664ea72aa02f90b3331238e8a118a14b8566bd36067013921c606f502814694751ab854825b1057106f71febb584ae15da9ebef63dc60001540db7e5906",
             "file": "toggle/src/toggle.directive.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import { Directive, EventEmitter, input, model, Output } from '@angular/core';\n\nexport interface ToggleProps {\n    /**\n     * The controlled state of the toggle.\n     */\n    pressed?: boolean;\n    /**\n     * The state of the toggle when initially rendered. Use `defaultPressed`\n     * if you do not need to control the state of the toggle.\n     * @defaultValue false\n     */\n    defaultPressed?: boolean;\n    /**\n     * The callback that fires when the state of the toggle changes.\n     */\n    onPressedChange?: EventEmitter<boolean>;\n}\n\n@Directive({\n    selector: 'button[rdxToggle]',\n    exportAs: 'rdxToggle',\n    standalone: true,\n    host: {\n        type: 'button',\n        '[attr.aria-pressed]': 'pressed()',\n        '[attr.data-state]': 'pressed() ? \"on\" : \"off\"',\n        '[attr.data-disabled]': 'disabled()',\n\n        '(click)': 'toggle()'\n    }\n})\nexport class RdxToggleDirective {\n    readonly defaultPressed = input<boolean>(false);\n    readonly pressed = model<boolean>(this.defaultPressed());\n    readonly disabled = input<boolean>(false);\n\n    /**\n     * Event emitted when the toggle is pressed.\n     */\n    @Output() readonly onPressedChange = new EventEmitter<boolean>();\n\n    protected toggle(): void {\n        if (!this.disabled()) {\n            this.pressed.set(!this.pressed());\n            this.onPressedChange.emit(this.pressed());\n        }\n    }\n}\n",
+            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Directive, input, model, output, OutputEmitterRef } from '@angular/core';\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\n@Directive({\n    selector: '[rdxToggle]',\n    exportAs: 'rdxToggle',\n    standalone: true,\n    host: {\n        type: 'button',\n        '[attr.aria-pressed]': 'pressed()',\n        '[attr.data-state]': 'pressed() ? \"on\" : \"off\"',\n        '[attr.data-disabled]': 'disabled()',\n        '[disabled]': 'disabled()',\n\n        '(click)': 'toggle()'\n    }\n})\nexport class RdxToggleDirective {\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    /**\n     * Event handler called when the pressed state of the toggle changes.\n     */\n    readonly onPressedChange = output<boolean>();\n\n    protected toggle(): void {\n        if (!this.disabled()) {\n            this.pressed.set(!this.pressed());\n            this.onPressedChange.emit(this.pressed());\n        }\n    }\n}\n",
             "properties": [
                 {
                     "name": "defaultPressed",
@@ -507,19 +507,49 @@
                     "type": "boolean",
                     "optional": true,
                     "description": "<p>The state of the toggle when initially rendered. Use <code>defaultPressed</code>\nif you do not need to control the state of the toggle.</p>\n",
-                    "line": 13,
+                    "line": 15,
                     "rawdescription": "\n\nThe state of the toggle when initially rendered. Use `defaultPressed`\nif you do not need to control the state of the toggle.\n",
                     "jsdoctags": [
                         {
-                            "pos": 347,
-                            "end": 372,
+                            "pos": 424,
+                            "end": 449,
+                            "flags": 16777216,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "kind": 334,
+                            "tagName": {
+                                "pos": 425,
+                                "end": 437,
+                                "flags": 16777216,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "defaultValue"
+                            },
+                            "comment": "<p>false</p>\n"
+                        }
+                    ]
+                },
+                {
+                    "name": "disabled",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "boolean",
+                    "optional": true,
+                    "description": "<p>Whether the toggle is disabled.</p>\n",
+                    "line": 26,
+                    "rawdescription": "\n\nWhether the toggle is disabled.\n",
+                    "jsdoctags": [
+                        {
+                            "pos": 672,
+                            "end": 697,
                             "flags": 16777216,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 348,
-                                "end": 360,
+                                "pos": 673,
+                                "end": 685,
                                 "flags": 16777216,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -534,10 +564,10 @@
                     "name": "onPressedChange",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "EventEmitter<boolean>",
+                    "type": "OutputEmitterRef<boolean>",
                     "optional": true,
                     "description": "<p>The callback that fires when the state of the toggle changes.</p>\n",
-                    "line": 17,
+                    "line": 20,
                     "rawdescription": "\n\nThe callback that fires when the state of the toggle changes.\n"
                 },
                 {
@@ -547,7 +577,7 @@
                     "type": "boolean",
                     "optional": true,
                     "description": "<p>The controlled state of the toggle.</p>\n",
-                    "line": 7,
+                    "line": 8,
                     "rawdescription": "\n\nThe controlled state of the toggle.\n"
                 }
             ],
@@ -1806,12 +1836,12 @@
         },
         {
             "name": "RdxAccordionRootDirective",
-            "id": "directive-RdxAccordionRootDirective-10d8a19eb9dbac7fa16983682fe623646459db26dae1a3d1f305a74e16df863887ca2542a15fcd0cc06a6e619116ea449e759774d02f5243fa12d3b1db290a70",
+            "id": "directive-RdxAccordionRootDirective-f822c50ab367745ad4ae025b12316e626316425ea7d640415a16f915b90f04f64342b55cdda3c06cfeba6beed6a2238f674bc766003e254db3fb55588e3e4871",
             "file": "accordion/src/accordion-root.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { FocusKeyManager } from '@angular/cdk/a11y';\nimport { Directionality } from '@angular/cdk/bidi';\nimport { UniqueSelectionDispatcher } from '@angular/cdk/collections';\nimport { ENTER, SPACE } from '@angular/cdk/keycodes';\nimport {\n    AfterContentInit,\n    booleanAttribute,\n    ContentChildren,\n    Directive,\n    EventEmitter,\n    forwardRef,\n    inject,\n    InjectionToken,\n    Input,\n    OnDestroy,\n    Output,\n    QueryList\n} from '@angular/core';\nimport { merge, Subject, Subscription } from 'rxjs';\nimport { RdxAccordionItemDirective } from './accordion-item.directive';\n\nexport type RdxAccordionType = 'single' | 'multiple';\nexport type RdxAccordionOrientation = 'horizontal' | 'vertical';\n\nexport const RdxAccordionRootToken = new InjectionToken<RdxAccordionRootDirective>('RdxAccordionRootDirective');\n\nlet nextId = 0;\n\n@Directive({\n    selector: '[rdxAccordionRoot]',\n    standalone: true,\n    providers: [\n        { provide: RdxAccordionRootToken, useExisting: RdxAccordionRootDirective },\n        { provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }\n    ],\n    host: {\n        '[attr.data-orientation]': 'orientation',\n        '(keydown)': 'handleKeydown($event)'\n    }\n})\nexport class RdxAccordionRootDirective implements AfterContentInit, OnDestroy {\n    /**\n     * @ignore\n     */\n    protected readonly selectionDispatcher = inject(UniqueSelectionDispatcher);\n    /**\n     * @ignore\n     */\n    protected readonly dir = inject(Directionality, { optional: true });\n\n    /**\n     * @ignore\n     */\n    protected keyManager: FocusKeyManager<RdxAccordionItemDirective>;\n\n    /**\n     * @ignore\n     */\n    readonly id: string = `rdx-accordion-${nextId++}`;\n\n    /**\n     * @ignore\n     */\n    readonly openCloseAllActions = new Subject<boolean>();\n\n    get isMultiple(): boolean {\n        return this.type === 'multiple';\n    }\n\n    /** Whether the Accordion is disabled. */\n    @Input({ transform: booleanAttribute }) disabled: boolean;\n\n    /**\n     * The orientation of the accordion.\n     */\n    @Input() orientation: RdxAccordionOrientation = 'vertical';\n    /**\n     * @private\n     * @ignore\n     */\n    @ContentChildren(forwardRef(() => RdxAccordionItemDirective), { descendants: true })\n    items: QueryList<RdxAccordionItemDirective>;\n\n    /**\n     * The value of the item to expand when initially rendered and type is \"single\". Use when you do not need to control the state of the items.\n     */\n    @Input()\n    set defaultValue(value: string[] | string) {\n        if (value !== this._defaultValue) {\n            this._defaultValue = Array.isArray(value) ? value : [value];\n        }\n    }\n\n    get defaultValue(): string[] | string {\n        return this.isMultiple ? this._defaultValue : this._defaultValue[0];\n    }\n\n    /**\n     * Determines whether one or multiple items can be opened at the same time.\n     */\n    @Input() type: RdxAccordionType = 'single';\n    /**\n     * @ignore\n     */\n    @Input() collapsible = true;\n    /**\n     * The controlled value of the item to expand\n     */\n    @Input()\n    set value(value: string[] | string) {\n        if (value !== this._value) {\n            this._value = Array.isArray(value) ? value : [value];\n\n            this.selectionDispatcher.notify(this.value as unknown as string, this.id);\n        }\n    }\n\n    get value(): string[] | string {\n        if (this._value === undefined) {\n            return this.defaultValue;\n        }\n\n        return this.isMultiple ? this._value : this._value[0];\n    }\n\n    @Output() readonly onValueChange: EventEmitter<void> = new EventEmitter<void>();\n\n    private _value?: string[];\n    private _defaultValue: string[] | string = [];\n\n    private onValueChangeSubscription: Subscription;\n\n    /**\n     * @ignore\n     */\n    ngAfterContentInit(): void {\n        this.selectionDispatcher.notify((this._value ?? this._defaultValue) as unknown as string, this.id);\n\n        this.keyManager = new FocusKeyManager(this.items).withHomeAndEnd();\n\n        if (this.orientation === 'horizontal') {\n            this.keyManager.withHorizontalOrientation(this.dir?.value || 'ltr');\n        } else {\n            this.keyManager.withVerticalOrientation();\n        }\n\n        this.onValueChangeSubscription = merge(...this.items.map((item) => item.expandedChange)).subscribe(() =>\n            this.onValueChange.emit()\n        );\n    }\n\n    /**\n     * @ignore\n     */\n    ngOnDestroy() {\n        this.openCloseAllActions.complete();\n        this.onValueChangeSubscription.unsubscribe();\n    }\n\n    /**\n     * @ignore\n     */\n    handleKeydown(event: KeyboardEvent) {\n        if (!this.keyManager.activeItem) {\n            this.keyManager.setFirstItemActive();\n        }\n\n        const activeItem = this.keyManager.activeItem;\n\n        if (\n            (event.keyCode === ENTER || event.keyCode === SPACE) &&\n            !this.keyManager.isTyping() &&\n            activeItem &&\n            !activeItem.disabled\n        ) {\n            event.preventDefault();\n            activeItem.toggle();\n        } else {\n            this.keyManager.onKeydown(event);\n        }\n    }\n\n    /** Opens all enabled accordion items in an accordion where multi is enabled.\n     * @ignore\n     */\n    openAll(): void {\n        if (this.isMultiple) {\n            this.openCloseAllActions.next(true);\n        }\n    }\n\n    /** Closes all enabled accordion items.\n     * @ignore\n     */\n    closeAll(): void {\n        this.openCloseAllActions.next(false);\n    }\n\n    /**\n     * @ignore\n     */\n    setActiveItem(item: RdxAccordionItemDirective) {\n        this.keyManager.setActiveItem(item);\n    }\n}\n",
+            "sourceCode": "import { FocusKeyManager } from '@angular/cdk/a11y';\nimport { Directionality } from '@angular/cdk/bidi';\nimport { UniqueSelectionDispatcher } from '@angular/cdk/collections';\nimport { ENTER, SPACE, TAB } from '@angular/cdk/keycodes';\nimport {\n    AfterContentInit,\n    booleanAttribute,\n    ContentChildren,\n    Directive,\n    EventEmitter,\n    forwardRef,\n    inject,\n    InjectionToken,\n    Input,\n    OnDestroy,\n    Output,\n    QueryList\n} from '@angular/core';\nimport { merge, Subject, Subscription } from 'rxjs';\nimport { RdxAccordionItemDirective } from './accordion-item.directive';\n\nexport type RdxAccordionType = 'single' | 'multiple';\nexport type RdxAccordionOrientation = 'horizontal' | 'vertical';\n\nexport const RdxAccordionRootToken = new InjectionToken<RdxAccordionRootDirective>('RdxAccordionRootDirective');\n\nlet nextId = 0;\n\n@Directive({\n    selector: '[rdxAccordionRoot]',\n    standalone: true,\n    providers: [\n        { provide: RdxAccordionRootToken, useExisting: RdxAccordionRootDirective },\n        { provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }\n    ],\n    host: {\n        '[attr.data-orientation]': 'orientation',\n        '(keydown)': 'handleKeydown($event)'\n    }\n})\nexport class RdxAccordionRootDirective implements AfterContentInit, OnDestroy {\n    /**\n     * @ignore\n     */\n    protected readonly selectionDispatcher = inject(UniqueSelectionDispatcher);\n    /**\n     * @ignore\n     */\n    protected readonly dir = inject(Directionality, { optional: true });\n\n    /**\n     * @ignore\n     */\n    protected keyManager: FocusKeyManager<RdxAccordionItemDirective>;\n\n    /**\n     * @ignore\n     */\n    readonly id: string = `rdx-accordion-${nextId++}`;\n\n    /**\n     * @ignore\n     */\n    readonly openCloseAllActions = new Subject<boolean>();\n\n    get isMultiple(): boolean {\n        return this.type === 'multiple';\n    }\n\n    /** Whether the Accordion is disabled. */\n    @Input({ transform: booleanAttribute }) disabled: boolean;\n\n    /**\n     * The orientation of the accordion.\n     */\n    @Input() orientation: RdxAccordionOrientation = 'vertical';\n    /**\n     * @private\n     * @ignore\n     */\n    @ContentChildren(forwardRef(() => RdxAccordionItemDirective), { descendants: true })\n    items: QueryList<RdxAccordionItemDirective>;\n\n    /**\n     * The value of the item to expand when initially rendered and type is \"single\". Use when you do not need to control the state of the items.\n     */\n    @Input()\n    set defaultValue(value: string[] | string) {\n        if (value !== this._defaultValue) {\n            this._defaultValue = Array.isArray(value) ? value : [value];\n        }\n    }\n\n    get defaultValue(): string[] | string {\n        return this.isMultiple ? this._defaultValue : this._defaultValue[0];\n    }\n\n    /**\n     * Determines whether one or multiple items can be opened at the same time.\n     */\n    @Input() type: RdxAccordionType = 'single';\n    /**\n     * @ignore\n     */\n    @Input() collapsible = true;\n    /**\n     * The controlled value of the item to expand\n     */\n    @Input()\n    set value(value: string[] | string) {\n        if (value !== this._value) {\n            this._value = Array.isArray(value) ? value : [value];\n\n            this.selectionDispatcher.notify(this.value as unknown as string, this.id);\n        }\n    }\n\n    get value(): string[] | string {\n        if (this._value === undefined) {\n            return this.defaultValue;\n        }\n\n        return this.isMultiple ? this._value : this._value[0];\n    }\n\n    @Output() readonly onValueChange: EventEmitter<void> = new EventEmitter<void>();\n\n    private _value?: string[];\n    private _defaultValue: string[] | string = [];\n\n    private onValueChangeSubscription: Subscription;\n\n    /**\n     * @ignore\n     */\n    ngAfterContentInit(): void {\n        this.selectionDispatcher.notify((this._value ?? this._defaultValue) as unknown as string, this.id);\n\n        this.keyManager = new FocusKeyManager(this.items).withHomeAndEnd();\n\n        if (this.orientation === 'horizontal') {\n            this.keyManager.withHorizontalOrientation(this.dir?.value || 'ltr');\n        } else {\n            this.keyManager.withVerticalOrientation();\n        }\n\n        this.onValueChangeSubscription = merge(...this.items.map((item) => item.expandedChange)).subscribe(() =>\n            this.onValueChange.emit()\n        );\n    }\n\n    /**\n     * @ignore\n     */\n    ngOnDestroy() {\n        this.openCloseAllActions.complete();\n        this.onValueChangeSubscription.unsubscribe();\n    }\n\n    /**\n     * @ignore\n     */\n    handleKeydown(event: KeyboardEvent) {\n        if (!this.keyManager.activeItem) {\n            this.keyManager.setFirstItemActive();\n        }\n\n        const activeItem = this.keyManager.activeItem;\n\n        if (\n            (event.keyCode === ENTER || event.keyCode === SPACE) &&\n            !this.keyManager.isTyping() &&\n            activeItem &&\n            !activeItem.disabled\n        ) {\n            event.preventDefault();\n            activeItem.toggle();\n        } else if (event.keyCode === TAB && event.shiftKey) {\n            if (this.keyManager.activeItemIndex === 0) return;\n\n            this.keyManager.setPreviousItemActive();\n            event.preventDefault();\n        } else if (event.keyCode === TAB) {\n            if (this.keyManager.activeItemIndex === this.items.length - 1) return;\n\n            this.keyManager.setNextItemActive();\n            event.preventDefault();\n        } else {\n            this.keyManager.onKeydown(event);\n        }\n    }\n\n    /** Opens all enabled accordion items in an accordion where multi is enabled.\n     * @ignore\n     */\n    openAll(): void {\n        if (this.isMultiple) {\n            this.openCloseAllActions.next(true);\n        }\n    }\n\n    /** Closes all enabled accordion items.\n     * @ignore\n     */\n    closeAll(): void {\n        this.openCloseAllActions.next(false);\n    }\n\n    /**\n     * @ignore\n     */\n    setActiveItem(item: RdxAccordionItemDirective) {\n        this.keyManager.setActiveItem(item);\n    }\n}\n",
             "selector": "[rdxAccordionRoot]",
             "providers": [
                 {
@@ -2203,12 +2233,12 @@
         },
         {
             "name": "RdxAvatarFallbackDirective",
-            "id": "directive-RdxAvatarFallbackDirective-c8b14c99cbd7da2781b645483e75a4570eeed5794a58213d451c684aa433daae179c9caf3344d550af77ce8860288512938a0baeebc80e0a49f0c38a4557d5fc",
+            "id": "directive-RdxAvatarFallbackDirective-3ec0a285681b4e3cef007c029710e37483fa80c00cbfcce5147fbcb173c808e1606e55fea16a94eb028b2692758b9c15c983bf6f8e5d3bb38210d8ba1d5d3ec0",
             "file": "avatar/src/avatar-fallback.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { Directive, inject, Input, NgZone, numberAttribute, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';\nimport { injectAvatar } from './avatar-root.directive';\nimport { injectAvatarConfig } from './avatar.config';\n\nexport interface RdxAvatarFallbackProps {\n    delayMs?: number;\n}\n\n@Directive({\n    selector: 'span[rdxAvatarFallback]',\n    exportAs: 'rdxAvatarFallback',\n    standalone: true,\n    host: {\n        '[style.display]': 'visible ? null : \"none\"'\n    }\n})\nexport class RdxAvatarFallbackDirective implements RdxAvatarFallbackProps, OnInit, OnDestroy {\n    private readonly avatar = injectAvatar();\n\n    private readonly config = injectAvatarConfig();\n\n    private readonly ngZone = inject(NgZone);\n\n    private readonly platformId = inject(PLATFORM_ID);\n\n    /**\n     * Define a delay before the fallback is shown.\n     * This is useful to only show the fallback for those with slower connections.\n     * @default 0\n     */\n    @Input({ alias: 'rdxDelayMs', transform: numberAttribute }) delayMs: number = this.config.delayMs;\n\n    protected get visible(): boolean {\n        return this.delayElapsed && this.avatar._state() !== 'loaded';\n    }\n\n    /**\n     * Determine the delay has elapsed, and we can show the fallback.\n     */\n    private delayElapsed = false;\n\n    private timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n    ngOnInit(): void {\n        if (isPlatformBrowser(this.platformId)) {\n            this.ngZone.runOutsideAngular(() => {\n                this.timeoutId = globalThis.setTimeout(() => {\n                    this.ngZone.run(() => {\n                        this.delayElapsed = true;\n                    });\n                }, this.delayMs);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        if (isPlatformBrowser(this.platformId) && this.timeoutId !== null) {\n            globalThis.clearTimeout(this.timeoutId);\n        }\n    }\n}\n",
+            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport {\n    Directive,\n    inject,\n    Input,\n    NgZone,\n    numberAttribute,\n    OnDestroy,\n    OnInit,\n    PLATFORM_ID,\n    signal\n} from '@angular/core';\nimport { injectAvatar } from './avatar-root.directive';\nimport { injectAvatarConfig } from './avatar.config';\n\nexport interface RdxAvatarFallbackProps {\n    delayMs?: number;\n}\n\n@Directive({\n    selector: 'span[rdxAvatarFallback]',\n    exportAs: 'rdxAvatarFallback',\n    standalone: true,\n    host: {\n        '[style.display]': 'visible() ? null : \"none\"'\n    }\n})\nexport class RdxAvatarFallbackDirective implements RdxAvatarFallbackProps, OnInit, OnDestroy {\n    private readonly avatar = injectAvatar();\n\n    private readonly config = injectAvatarConfig();\n\n    private readonly ngZone = inject(NgZone);\n\n    private readonly platformId = inject(PLATFORM_ID);\n\n    /**\n     * Define a delay before the fallback is shown.\n     * This is useful to only show the fallback for those with slower connections.\n     * @default 0\n     */\n    @Input({ alias: 'rdxDelayMs', transform: numberAttribute }) delayMs: number = this.config.delayMs;\n\n    readonly visible = signal(false);\n\n    /**\n     * Determine the delay has elapsed, and we can show the fallback.\n     */\n    private delayElapsed = false;\n\n    private timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n    ngOnInit(): void {\n        if (isPlatformBrowser(this.platformId)) {\n            this.ngZone.runOutsideAngular(() => {\n                this.timeoutId = globalThis.setTimeout(() => {\n                    this.ngZone.run(() => {\n                        this.delayElapsed = true;\n                        this.updateVisibility();\n                    });\n                }, this.delayMs);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        if (isPlatformBrowser(this.platformId) && this.timeoutId !== null) {\n            globalThis.clearTimeout(this.timeoutId);\n        }\n    }\n\n    private updateVisibility(): void {\n        this.visible.set(this.delayElapsed && this.avatar._state() !== 'loaded');\n    }\n}\n",
             "selector": "span[rdxAvatarFallback]",
             "providers": [],
             "exportAs": "rdxAvatarFallback",
@@ -2223,15 +2253,15 @@
                     "deprecationMessage": "",
                     "jsdoctags": [
                         {
-                            "pos": 979,
-                            "end": 995,
+                            "pos": 1025,
+                            "end": 1041,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 980,
-                                "end": 987,
+                                "pos": 1026,
+                                "end": 1033,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -2243,7 +2273,7 @@
                     ],
                     "rawdescription": "\n\nDefine a delay before the fallback is shown.\nThis is useful to only show the fallback for those with slower connections.\n",
                     "description": "<p>Define a delay before the fallback is shown.\nThis is useful to only show the fallback for those with slower connections.</p>\n",
-                    "line": 32,
+                    "line": 42,
                     "type": "number",
                     "decorators": []
                 }
@@ -2253,25 +2283,28 @@
             "deprecationMessage": "",
             "hostBindings": [],
             "hostListeners": [],
-            "propertiesClass": [],
+            "propertiesClass": [
+                {
+                    "name": "visible",
+                    "defaultValue": "signal(false)",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 44,
+                    "modifierKind": [
+                        148
+                    ]
+                }
+            ],
             "methodsClass": [],
             "extends": [],
             "implements": [
                 "RdxAvatarFallbackProps",
                 "OnInit",
                 "OnDestroy"
-            ],
-            "accessors": {
-                "visible": {
-                    "name": "visible",
-                    "getSignature": {
-                        "name": "visible",
-                        "type": "boolean",
-                        "returnType": "boolean",
-                        "line": 34
-                    }
-                }
-            }
+            ]
         },
         {
             "name": "RdxAvatarImageDirective",
@@ -5114,7 +5147,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 53,
+                    "line": 55,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -5158,12 +5191,12 @@
         },
         {
             "name": "RdxDropdownMenuItemDirective",
-            "id": "directive-RdxDropdownMenuItemDirective-13cda40a7ed8e6a6314a3eb8ba71f9e25c833b83e4f117b562ba13d4d8558c1d445e01e110b0f479af40bf3a9581f4fbbdc922444331b98ad17f7b55a9ae9730",
+            "id": "directive-RdxDropdownMenuItemDirective-d0a62e1d8c17431571b907aeae565640da58d6cfc5b5ae0019a6bb9b3df14cd324bf7ecf2674d726e4a7926b389b453b465d9592627a36b965ddd620e2d5f1d8",
             "file": "dropdown-menu/src/dropdown-menu-item.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { CDK_MENU, CdkMenuItem } from '@angular/cdk/menu';\nimport { booleanAttribute, Directive, ElementRef, EventEmitter, inject, Input, Output } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nimport { RdxDropdownMenuContentDirective } from './dropdown-menu-content.directive';\n\n@Directive({\n    selector: '[rdxDropdownMenuItem]',\n    standalone: true,\n    host: {\n        type: 'button',\n        // todo horizontal ?\n        '[attr.data-orientation]': '\"vertical\"',\n        '[attr.data-highlighted]': 'highlighted ? \"\" : null',\n        '[attr.data-disabled]': 'disabled ? \"\" : null',\n        '[attr.disabled]': 'disabled ? \"\" : null',\n        '(pointermove)': 'onPointerMove()',\n        '(focus)': 'menu.highlighted.next(this)',\n        '(keydown)': 'onKeydown($event)'\n    },\n    providers: [\n        { provide: CdkMenuItem, useExisting: RdxDropdownMenuItemDirective },\n        { provide: CDK_MENU, useExisting: RdxDropdownMenuContentDirective }\n    ]\n})\nexport class RdxDropdownMenuItemDirective extends CdkMenuItem {\n    protected readonly menu = inject(RdxDropdownMenuContentDirective);\n    protected readonly nativeElement = inject(ElementRef).nativeElement;\n\n    highlighted = false;\n\n    @Input({ transform: booleanAttribute }) override disabled: boolean = false;\n\n    @Output() readonly onSelect = new EventEmitter<void>();\n\n    constructor() {\n        super();\n\n        this.menu.highlighted.pipe(takeUntilDestroyed()).subscribe((value) => {\n            if (value !== this) {\n                this.highlighted = false;\n            }\n        });\n\n        this.triggered.subscribe(this.onSelect);\n    }\n\n    protected onPointerMove() {\n        this.nativeElement.focus({ preventScroll: true });\n        this.menu.updateActiveItem(this);\n    }\n\n    protected onKeydown(event: KeyboardEvent) {\n        if (this.nativeElement.tagName !== 'BUTTON' && ['Enter', ' '].includes(event.key)) {\n            event.preventDefault();\n        }\n\n        if (event.key === 'Escape') {\n            if (!this.menu.closeOnEscape) {\n                event.stopPropagation();\n            } else {\n                this.menu.onEscapeKeyDown(event);\n            }\n        }\n    }\n}\n",
+            "sourceCode": "import { CDK_MENU, CdkMenuItem } from '@angular/cdk/menu';\nimport { booleanAttribute, Directive, ElementRef, EventEmitter, inject, Input, Output } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nimport { RdxDropdownMenuContentDirective } from './dropdown-menu-content.directive';\n\n@Directive({\n    selector: '[rdxDropdownMenuItem]',\n    standalone: true,\n    host: {\n        type: 'button',\n        // todo horizontal ?\n        '[attr.data-orientation]': '\"vertical\"',\n        '[attr.data-highlighted]': 'highlighted ? \"\" : null',\n        '[attr.data-disabled]': 'disabled ? \"\" : null',\n        '[attr.disabled]': 'disabled ? \"\" : null',\n        '(pointermove)': 'onPointerMove()',\n        '(focus)': 'menu.highlighted.next(this)',\n        '(keydown)': 'onKeydown($event)'\n    },\n    providers: [\n        { provide: CdkMenuItem, useExisting: RdxDropdownMenuItemDirective },\n        { provide: CDK_MENU, useExisting: RdxDropdownMenuContentDirective }\n    ]\n})\nexport class RdxDropdownMenuItemDirective extends CdkMenuItem {\n    protected readonly menu = inject(RdxDropdownMenuContentDirective);\n    protected readonly nativeElement = inject(ElementRef).nativeElement;\n\n    highlighted = false;\n\n    @Input({ transform: booleanAttribute }) override disabled: boolean = false;\n\n    @Output() readonly onSelect = new EventEmitter<void>();\n\n    constructor() {\n        super();\n\n        this.menu.highlighted.pipe(takeUntilDestroyed()).subscribe((value) => {\n            if (value !== this) {\n                this.highlighted = false;\n            }\n        });\n\n        this.triggered.subscribe(this.onSelect);\n    }\n\n    protected onPointerMove() {\n        if (!this.highlighted) {\n            this.nativeElement.focus({ preventScroll: true });\n            this.menu.updateActiveItem(this);\n        }\n    }\n\n    protected onKeydown(event: KeyboardEvent) {\n        if (this.nativeElement.tagName !== 'BUTTON' && ['Enter', ' '].includes(event.key)) {\n            event.preventDefault();\n        }\n\n        if (event.key === 'Escape') {\n            if (!this.menu.closeOnEscape) {\n                event.stopPropagation();\n            } else {\n                this.menu.onEscapeKeyDown(event);\n            }\n        }\n    }\n}\n",
             "selector": "[rdxDropdownMenuItem]",
             "providers": [
                 {
@@ -5257,7 +5290,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 53,
+                    "line": 55,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -5492,7 +5525,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 53,
+                    "line": 55,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -5817,7 +5850,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 53,
+                    "line": 55,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -7216,12 +7249,12 @@
         },
         {
             "name": "RdxRadioGroupDirective",
-            "id": "directive-RdxRadioGroupDirective-0210d1b2e785c23c9259a7092690bbb97cc9dddaf295b590b5f1351229ac7c9df0d64be418ef696e73bf83866aa56e2e09c7d20044a8bacb2a5c7b358beede80",
+            "id": "directive-RdxRadioGroupDirective-6cd2bb486dcb41fcb3fe8c43f1f0e3f5fef08e9e5e35f9d9d5729e7bff3ec4cd98abc08817c80eceff4190327cce0daa0354559761520611b1e00456eb511063",
             "file": "radio/src/radio-root.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { FocusKeyManager } from '@angular/cdk/a11y';\nimport { DOWN_ARROW, ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE, TAB, UP_ARROW } from '@angular/cdk/keycodes';\nimport {\n    AfterContentInit,\n    booleanAttribute,\n    ContentChildren,\n    Directive,\n    EventEmitter,\n    Input,\n    OnDestroy,\n    Output,\n    QueryList\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { Subject, takeUntil } from 'rxjs';\nimport { RdxRadioItemDirective } from './radio-item.directive';\nimport { RadioGroupDirective, RadioGroupProps, RDX_RADIO_GROUP } from './radio-tokens';\n\n@Directive({\n    selector: '[rdxRadioRoot]',\n    exportAs: 'rdxRadioRoot',\n    standalone: true,\n    providers: [\n        { provide: RDX_RADIO_GROUP, useExisting: RdxRadioGroupDirective },\n        { provide: NG_VALUE_ACCESSOR, useExisting: RdxRadioGroupDirective, multi: true }\n    ],\n    host: {\n        role: 'radiogroup',\n        '[attr.aria-orientation]': '_orientation',\n        '[attr.data-disabled]': 'disabled ? \"\" : null',\n        '[attr.tabindex]': '-1',\n        '[attr.dir]': 'dir',\n        '(keydown)': '_onKeydown($event)',\n        '(focusin)': '_onFocusin($event)'\n    }\n})\nexport class RdxRadioGroupDirective\n    implements RadioGroupProps, RadioGroupDirective, ControlValueAccessor, AfterContentInit, OnDestroy\n{\n    @ContentChildren(RdxRadioItemDirective, { descendants: true }) radioItems!: QueryList<RdxRadioItemDirective>;\n    private focusKeyManager!: FocusKeyManager<RdxRadioItemDirective>;\n    private destroy$ = new Subject<void>();\n\n    name?: string | undefined;\n    @Input() value?: string;\n\n    @Input({ transform: booleanAttribute }) disabled = false;\n\n    @Input() dir?: string;\n\n    @Input() defaultValue?: string;\n\n    /**\n     * The orientation of the radio group only vertical.\n     * Horizontal radio buttons can sometimes be challenging to scan and localize.\n     * The horizontal arrangement of radio buttons may also lead to difficulties in determining which\n     * label corresponds to which button: whether the label is above or below the button.\n     * @default 'vertical'\n     */\n    readonly _orientation = 'vertical';\n\n    /**\n     * Event handler called when the value changes.\n     */\n    @Output() readonly onValueChange = new EventEmitter<string>();\n\n    /**\n     * The callback function to call when the value of the radio group changes.\n     */\n    private onChange: (value: string) => void = () => {\n        /* Empty */\n    };\n\n    /**\n     * The callback function to call when the radio group is touched.\n     */\n    onTouched: () => void = () => {\n        /* Empty */\n    };\n\n    ngAfterContentInit() {\n        this.focusKeyManager = new FocusKeyManager(this.radioItems).withWrap().withVerticalOrientation();\n\n        this.radioItems.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.updateActiveItem();\n        });\n\n        this.updateActiveItem(false);\n    }\n\n    ngOnDestroy() {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n\n    /**\n     * Select a radio item.\n     * @param value The value of the radio item to select.\n     */\n    select(value: string): void {\n        this.value = value;\n        this.onValueChange.emit(value);\n        this.onChange?.(value);\n        this.updateActiveItem();\n        this.onTouched();\n    }\n\n    /**\n     * Update the value of the radio group.\n     * @param value The new value of the radio group.\n     * @internal\n     */\n    writeValue(value: string): void {\n        this.value = value;\n        if (this.radioItems) {\n            this.updateActiveItem(false);\n        }\n    }\n\n    /**\n     * Register a callback function to call when the value of the radio group changes.\n     * @param fn The callback function to call when the value of the radio group changes.\n     * @internal\n     */\n    registerOnChange(fn: (value: string) => void): void {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    /**\n     * Set the disabled state of the radio group.\n     * @param isDisabled Whether the radio group is disabled.\n     * @internal\n     */\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n\n    /**\n     * When focus leaves the radio group.\n     */\n    _onFocusin(event: FocusEvent): void {\n        const target = event.target as HTMLElement;\n        const radioItem = this.radioItems.find((item) => item.element.nativeElement === target);\n        if (radioItem) {\n            this.focusKeyManager.setActiveItem(radioItem);\n        }\n    }\n\n    _onKeydown(event: KeyboardEvent): void {\n        if (this.disabled) return;\n\n        switch (event.keyCode) {\n            case ENTER:\n            case SPACE:\n                event.preventDefault();\n                this.selectFocusedItem();\n                break;\n            case DOWN_ARROW:\n            case RIGHT_ARROW:\n                event.preventDefault();\n                this.focusKeyManager.setNextItemActive();\n                this.selectFocusedItem();\n                break;\n            case UP_ARROW:\n            case LEFT_ARROW:\n                event.preventDefault();\n                this.focusKeyManager.setPreviousItemActive();\n                this.selectFocusedItem();\n                break;\n            case TAB:\n                this.tabNavigation(event);\n                break;\n            default:\n                this.focusKeyManager.onKeydown(event);\n        }\n    }\n\n    private selectFocusedItem(): void {\n        const focusedItem = this.focusKeyManager.activeItem;\n        if (focusedItem) {\n            this.select(focusedItem.value);\n        }\n    }\n\n    private updateActiveItem(setFocus = true): void {\n        const activeItem = this.radioItems.find((item) => item.value === this.value);\n        if (activeItem) {\n            this.focusKeyManager.setActiveItem(activeItem);\n        } else if (this.radioItems.length > 0 && setFocus) {\n            this.focusKeyManager.setFirstItemActive();\n        }\n    }\n\n    private tabNavigation(event: KeyboardEvent): void {\n        event.preventDefault();\n        const checkedItem = this.radioItems.find((item) => item.checked);\n        if (checkedItem) {\n            checkedItem.focus();\n        } else if (this.radioItems.first) {\n            this.radioItems.first.focus();\n        }\n    }\n}\n",
+            "sourceCode": "import { FocusKeyManager } from '@angular/cdk/a11y';\nimport { DOWN_ARROW, ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE, TAB, UP_ARROW } from '@angular/cdk/keycodes';\nimport {\n    AfterContentInit,\n    booleanAttribute,\n    ContentChildren,\n    Directive,\n    EventEmitter,\n    Input,\n    OnDestroy,\n    Output,\n    QueryList\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { Subject, takeUntil } from 'rxjs';\nimport { RdxRadioItemDirective } from './radio-item.directive';\nimport { RadioGroupDirective, RadioGroupProps, RDX_RADIO_GROUP } from './radio-tokens';\n\n@Directive({\n    selector: '[rdxRadioRoot]',\n    exportAs: 'rdxRadioRoot',\n    standalone: true,\n    providers: [\n        { provide: RDX_RADIO_GROUP, useExisting: RdxRadioGroupDirective },\n        { provide: NG_VALUE_ACCESSOR, useExisting: RdxRadioGroupDirective, multi: true }\n    ],\n    host: {\n        role: 'radiogroup',\n        '[attr.aria-orientation]': '_orientation',\n        '[attr.data-disabled]': 'disabled ? \"\" : null',\n        '[attr.tabindex]': '-1',\n        '[attr.dir]': 'dir',\n        '(keydown)': 'onKeydown($event)',\n        '(focusin)': 'onFocusin($event)'\n    }\n})\nexport class RdxRadioGroupDirective\n    implements RadioGroupProps, RadioGroupDirective, ControlValueAccessor, AfterContentInit, OnDestroy\n{\n    @ContentChildren(RdxRadioItemDirective, { descendants: true }) radioItems!: QueryList<RdxRadioItemDirective>;\n    private focusKeyManager!: FocusKeyManager<RdxRadioItemDirective>;\n    private destroy$ = new Subject<void>();\n\n    name?: string | undefined;\n    @Input() value?: string;\n\n    @Input({ transform: booleanAttribute }) disabled = false;\n\n    @Input() dir?: string;\n\n    @Input() defaultValue?: string;\n\n    /**\n     * The orientation of the radio group only vertical.\n     * Horizontal radio buttons can sometimes be challenging to scan and localize.\n     * The horizontal arrangement of radio buttons may also lead to difficulties in determining which\n     * label corresponds to which button: whether the label is above or below the button.\n     * @default 'vertical'\n     */\n    readonly _orientation = 'vertical';\n\n    /**\n     * Event handler called when the value changes.\n     */\n    @Output() readonly onValueChange = new EventEmitter<string>();\n\n    /**\n     * The callback function to call when the value of the radio group changes.\n     */\n    private onChange: (value: string) => void = () => {\n        /* Empty */\n    };\n\n    /**\n     * The callback function to call when the radio group is touched.\n     */\n    onTouched: () => void = () => {\n        /* Empty */\n    };\n\n    ngAfterContentInit() {\n        this.focusKeyManager = new FocusKeyManager(this.radioItems).withWrap().withVerticalOrientation();\n\n        this.radioItems.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.updateActiveItem();\n        });\n\n        this.updateActiveItem(false);\n    }\n\n    ngOnDestroy() {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n\n    /**\n     * Select a radio item.\n     * @param value The value of the radio item to select.\n     */\n    select(value: string): void {\n        this.value = value;\n        this.onValueChange.emit(value);\n        this.onChange?.(value);\n        this.updateActiveItem();\n        this.onTouched();\n    }\n\n    /**\n     * Update the value of the radio group.\n     * @param value The new value of the radio group.\n     * @internal\n     */\n    writeValue(value: string): void {\n        this.value = value;\n        if (this.radioItems) {\n            this.updateActiveItem(false);\n        }\n    }\n\n    /**\n     * Register a callback function to call when the value of the radio group changes.\n     * @param fn The callback function to call when the value of the radio group changes.\n     * @internal\n     */\n    registerOnChange(fn: (value: string) => void): void {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    /**\n     * Set the disabled state of the radio group.\n     * @param isDisabled Whether the radio group is disabled.\n     * @internal\n     */\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n\n    /**\n     * When focus leaves the radio group.\n     */\n    protected onFocusin(event: FocusEvent): void {\n        const target = event.target as HTMLElement;\n        const radioItem = this.radioItems.find((item) => item.element.nativeElement === target);\n        if (radioItem) {\n            this.focusKeyManager.setActiveItem(radioItem);\n        }\n    }\n\n    protected onKeydown(event: KeyboardEvent): void {\n        if (this.disabled) return;\n\n        switch (event.keyCode) {\n            case ENTER:\n            case SPACE:\n                event.preventDefault();\n                this.selectFocusedItem();\n                break;\n            case DOWN_ARROW:\n            case RIGHT_ARROW:\n                event.preventDefault();\n                this.focusKeyManager.setNextItemActive();\n                this.selectFocusedItem();\n                break;\n            case UP_ARROW:\n            case LEFT_ARROW:\n                event.preventDefault();\n                this.focusKeyManager.setPreviousItemActive();\n                this.selectFocusedItem();\n                break;\n            case TAB:\n                this.tabNavigation(event);\n                break;\n            default:\n                this.focusKeyManager.onKeydown(event);\n        }\n    }\n\n    private selectFocusedItem(): void {\n        const focusedItem = this.focusKeyManager.activeItem;\n        if (focusedItem) {\n            this.select(focusedItem.value);\n        }\n    }\n\n    private updateActiveItem(setFocus = true): void {\n        const activeItem = this.radioItems.find((item) => item.value === this.value);\n        if (activeItem) {\n            this.focusKeyManager.setActiveItem(activeItem);\n        } else if (this.radioItems.length > 0 && setFocus) {\n            this.focusKeyManager.setFirstItemActive();\n        }\n    }\n\n    private tabNavigation(event: KeyboardEvent): void {\n        event.preventDefault();\n        const checkedItem = this.radioItems.find((item) => item.checked);\n        if (checkedItem) {\n            checkedItem.focus();\n        } else if (this.radioItems.first) {\n            this.radioItems.first.focus();\n        }\n    }\n}\n",
             "selector": "[rdxRadioRoot]",
             "providers": [
                 {
@@ -7304,15 +7337,15 @@
                     ],
                     "jsdoctags": [
                         {
-                            "pos": 2106,
-                            "end": 2131,
+                            "pos": 2104,
+                            "end": 2129,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 2107,
-                                "end": 2114,
+                                "pos": 2105,
+                                "end": 2112,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -7364,7 +7397,7 @@
             ],
             "methodsClass": [
                 {
-                    "name": "_onFocusin",
+                    "name": "onFocusin",
                     "args": [
                         {
                             "name": "event",
@@ -7381,6 +7414,9 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nWhen focus leaves the radio group.\n",
                     "description": "<p>When focus leaves the radio group.</p>\n",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "event",
@@ -7394,7 +7430,7 @@
                     ]
                 },
                 {
-                    "name": "_onKeydown",
+                    "name": "onKeydown",
                     "args": [
                         {
                             "name": "event",
@@ -7409,6 +7445,9 @@
                     "line": 153,
                     "deprecated": false,
                     "deprecationMessage": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "event",
@@ -7472,8 +7511,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3092,
-                                "end": 3097,
+                                "pos": 3090,
+                                "end": 3095,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -7484,8 +7523,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3086,
-                                "end": 3091,
+                                "pos": 3084,
+                                "end": 3089,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -7893,21 +7932,17 @@
         },
         {
             "name": "RdxSwitchRootDirective",
-            "id": "directive-RdxSwitchRootDirective-b38377551dbe8df1a02039592e5cef35095983dcd5cf8461966049b698303e9d4ded61b0f28af5c82665d0aff8fcc25fb00bfaedb3395ad35300c8a9a4cd7331",
+            "id": "directive-RdxSwitchRootDirective-a1d1ce9095ddd803dd1679e08e7914e7bbc821178d609e91909c39171ce2013fa88949495d3569fcd36dc50f9ffd58e50d69a30df9f1344c8d7f6610de2d389f",
             "file": "switch/src/switch-root.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    computed,\n    Directive,\n    EventEmitter,\n    inject,\n    InjectionToken,\n    input,\n    InputSignalWithTransform,\n    model,\n    ModelSignal,\n    Output\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport const RdxSwitchToken = new InjectionToken<RdxSwitchRootDirective>('RdxSwitchToken');\n\nexport function injectSwitch(): RdxSwitchRootDirective {\n    return inject(RdxSwitchToken);\n}\n\nexport interface SwitchProps {\n    checked?: ModelSignal<boolean>;\n    defaultChecked?: boolean;\n    required?: InputSignalWithTransform<boolean, BooleanInput>;\n    onCheckedChange?: EventEmitter<boolean>;\n}\n\nlet idIterator = 0;\n\n@Directive({\n    selector: 'button[rdxSwitchRoot]',\n    exportAs: 'rdxSwitchRoot',\n    standalone: true,\n    providers: [\n        { provide: RdxSwitchToken, useExisting: RdxSwitchRootDirective },\n        { provide: NG_VALUE_ACCESSOR, useExisting: RdxSwitchRootDirective, multi: true }\n    ],\n    host: {\n        role: 'switch',\n        type: 'button',\n        '[id]': 'elementId()',\n        '[attr.aria-checked]': 'checked()',\n        '[attr.aria-required]': 'required',\n        '[attr.data-state]': 'checked() ? \"checked\" : \"unchecked\"',\n        '[attr.data-disabled]': 'disabledState() ? \"true\" : null',\n        '[attr.disabled]': 'disabledState() ? disabledState() : null',\n\n        '(focus)': '_onTouched?.()',\n        '(click)': 'toggle()'\n    }\n})\nexport class RdxSwitchRootDirective implements SwitchProps, ControlValueAccessor {\n    readonly id = input<string>(`rdx-switch-${idIterator++}`);\n    protected readonly elementId = computed(() => (this.id() ? this.id() : null));\n\n    // When true, indicates that the user must check\n    // the switch before the owning form can be submitted.\n    readonly required = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute\n    });\n\n    // The controlled state of the switch\n    readonly checked = model<boolean>(false);\n\n    // When true, prevents the user from interacting with the switch.\n    readonly disabled = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute\n    });\n\n    /*\n     * @ignore\n     */\n    readonly disabledState = computed(() => this.disabled());\n\n    @Output() onCheckedChange = new EventEmitter<boolean>();\n\n    /**\n     * The method to be called in order to update ngModel.\n     */\n    _onChange?: (checked: boolean) => void;\n\n    /**\n     * onTouch function registered via registerOnTouch (ControlValueAccessor).\n     */\n    _onTouched?: () => void;\n\n    /**\n     * Registers a function to call when the checked state changes.\n     * @param fn Function to call on change.\n     */\n    registerOnChange(fn: (checked: boolean) => void): void {\n        this._onChange = fn;\n    }\n\n    /**\n     * Registers a function to call when the component is touched.\n     * @param fn Function to call on touch.\n     */\n    registerOnTouched(fn: () => void): void {\n        this._onTouched = fn;\n    }\n\n    /**\n     * Writes a new value to the model.\n     * @param checked The new checked value.\n     */\n    writeValue(checked: boolean): void {\n        this.checked.set(checked);\n    }\n\n    /**\n     * Toggles the checked state of the switch.\n     * If the switch is disabled, the function returns early.\n     */\n    protected toggle(): void {\n        if (this.disabledState()) {\n            return;\n        }\n\n        this.checked.set(!this.checked());\n        this._onChange?.(this.checked());\n\n        this.onCheckedChange.emit(this.checked());\n    }\n}\n",
+            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    computed,\n    Directive,\n    inject,\n    InjectionToken,\n    input,\n    InputSignalWithTransform,\n    model,\n    ModelSignal,\n    output,\n    OutputEmitterRef\n} from '@angular/core';\n\nexport const RdxSwitchToken = new InjectionToken<RdxSwitchRootDirective>('RdxSwitchToken');\n\nexport function injectSwitch(): RdxSwitchRootDirective {\n    return inject(RdxSwitchToken);\n}\n\nexport interface SwitchProps {\n    checked?: ModelSignal<boolean>;\n    defaultChecked?: boolean;\n    required?: InputSignalWithTransform<boolean, BooleanInput>;\n    onCheckedChange?: OutputEmitterRef<boolean>;\n}\n\nlet idIterator = 0;\n\n@Directive({\n    selector: 'button[rdxSwitchRoot]',\n    exportAs: 'rdxSwitchRoot',\n    standalone: true,\n    providers: [\n        { provide: RdxSwitchToken, useExisting: RdxSwitchRootDirective }],\n    host: {\n        role: 'switch',\n        type: 'button',\n        '[id]': 'elementId()',\n        '[attr.aria-checked]': 'checked()',\n        '[attr.aria-required]': 'required',\n        '[attr.data-state]': 'checked() ? \"checked\" : \"unchecked\"',\n        '[attr.data-disabled]': 'disabledState() ? \"true\" : null',\n        '[attr.disabled]': 'disabledState() ? disabledState() : null',\n\n        '(click)': 'toggle()'\n    }\n})\nexport class RdxSwitchRootDirective implements SwitchProps {\n    readonly id = input<string>(`rdx-switch-${idIterator++}`);\n    protected readonly elementId = computed(() => (this.id() ? this.id() : null));\n\n    /**\n     * When true, indicates that the user must check the switch before the owning form can be submitted.\n     */\n    readonly required = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute\n    });\n\n    /**\n     * The controlled state of the switch. Must be used in conjunction with onCheckedChange.\n     */\n    readonly checked = model<boolean>(false);\n\n    /**\n     * When true, prevents the user from interacting with the switch.\n     */\n    readonly disabled = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute\n    });\n\n    /*\n     * @ignore\n     */\n    readonly disabledState = computed(() => this.disabled());\n\n    /**\n     * Event handler called when the state of the switch changes.\n     */\n    readonly onCheckedChange = output<boolean>();\n\n    /**\n     * Toggles the checked state of the switch.\n     * If the switch is disabled, the function returns early.\n     */\n    protected toggle(): void {\n        if (this.disabledState()) {\n            return;\n        }\n\n        this.checked.set(!this.checked());\n\n        this.onCheckedChange.emit(this.checked());\n    }\n}\n",
             "selector": "button[rdxSwitchRoot]",
             "providers": [
                 {
                     "name": "{ provide: RdxSwitchToken, useExisting: RdxSwitchRootDirective }",
                     "type": "directive"
-                },
-                {
-                    "name": "{ provide: NG_VALUE_ACCESSOR, useExisting: RdxSwitchRootDirective, multi: true }",
-                    "type": "directive"
                 }
             ],
             "exportAs": "rdxSwitchRoot",
@@ -7921,49 +7956,21 @@
                     "deprecationMessage": "",
                     "type": "",
                     "optional": false,
-                    "description": "",
-                    "line": 65,
+                    "description": "<p>The controlled state of the switch. Must be used in conjunction with onCheckedChange.</p>\n",
+                    "line": 64,
+                    "rawdescription": "\n\nThe controlled state of the switch. Must be used in conjunction with onCheckedChange.\n",
                     "modifierKind": [
                         148
                     ],
                     "required": false
                 }
             ],
-            "outputsClass": [
-                {
-                    "name": "onCheckedChange",
-                    "defaultValue": "new EventEmitter<boolean>()",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 77,
-                    "type": "EventEmitter"
-                }
-            ],
+            "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
             "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [
-                {
-                    "name": "_onChange",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "function",
-                    "optional": true,
-                    "description": "<p>The method to be called in order to update ngModel.</p>\n",
-                    "line": 82,
-                    "rawdescription": "\n\nThe method to be called in order to update ngModel.\n"
-                },
-                {
-                    "name": "_onTouched",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "function",
-                    "optional": true,
-                    "description": "<p>onTouch function registered via registerOnTouch (ControlValueAccessor).</p>\n",
-                    "line": 87,
-                    "rawdescription": "\n\nonTouch function registered via registerOnTouch (ControlValueAccessor).\n"
-                },
                 {
                     "name": "checked",
                     "defaultValue": "false",
@@ -7971,8 +7978,9 @@
                     "deprecationMessage": "",
                     "type": "",
                     "optional": false,
-                    "description": "",
-                    "line": 65,
+                    "description": "<p>The controlled state of the switch. Must be used in conjunction with onCheckedChange.</p>\n",
+                    "line": 64,
+                    "rawdescription": "\n\nThe controlled state of the switch. Must be used in conjunction with onCheckedChange.\n",
                     "modifierKind": [
                         148
                     ],
@@ -7985,8 +7993,9 @@
                     "deprecationMessage": "",
                     "type": "",
                     "optional": false,
-                    "description": "",
-                    "line": 68,
+                    "description": "<p>When true, prevents the user from interacting with the switch.</p>\n",
+                    "line": 69,
+                    "rawdescription": "\n\nWhen true, prevents the user from interacting with the switch.\n",
                     "modifierKind": [
                         148
                     ]
@@ -7999,7 +8008,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 75,
+                    "line": 76,
                     "modifierKind": [
                         148
                     ]
@@ -8012,7 +8021,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 56,
+                    "line": 52,
                     "modifierKind": [
                         124,
                         148
@@ -8026,141 +8035,48 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 55,
+                    "line": 51,
                     "modifierKind": [
                         148
                     ]
                 },
                 {
-                    "name": "required",
-                    "defaultValue": "input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute\n    })",
+                    "name": "onCheckedChange",
+                    "defaultValue": "output<boolean>()",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "optional": false,
-                    "description": "",
-                    "line": 60,
+                    "description": "<p>Event handler called when the state of the switch changes.</p>\n",
+                    "line": 81,
+                    "rawdescription": "\n\nEvent handler called when the state of the switch changes.\n",
                     "modifierKind": [
                         148
                     ]
-                }
-            ],
-            "methodsClass": [
-                {
-                    "name": "registerOnChange",
-                    "args": [
-                        {
-                            "name": "fn",
-                            "type": "function",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "function": [
-                                {
-                                    "name": "checked",
-                                    "type": "boolean",
-                                    "deprecated": false,
-                                    "deprecationMessage": ""
-                                }
-                            ]
-                        }
-                    ],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 93,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nRegisters a function to call when the checked state changes.\n",
-                    "description": "<p>Registers a function to call when the checked state changes.</p>\n",
-                    "jsdoctags": [
-                        {
-                            "name": {
-                                "pos": 2720,
-                                "end": 2722,
-                                "flags": 16842752,
-                                "modifierFlagsCache": 0,
-                                "transformFlags": 0,
-                                "kind": 80,
-                                "escapedText": "fn"
-                            },
-                            "type": "function",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "function": [
-                                {
-                                    "name": "checked",
-                                    "type": "boolean",
-                                    "deprecated": false,
-                                    "deprecationMessage": ""
-                                }
-                            ],
-                            "tagName": {
-                                "pos": 2714,
-                                "end": 2719,
-                                "flags": 16842752,
-                                "modifierFlagsCache": 0,
-                                "transformFlags": 0,
-                                "kind": 80,
-                                "escapedText": "param"
-                            },
-                            "comment": "<p>Function to call on change.</p>\n"
-                        }
-                    ]
                 },
                 {
-                    "name": "registerOnTouched",
-                    "args": [
-                        {
-                            "name": "fn",
-                            "type": "function",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "function": []
-                        }
-                    ],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 101,
+                    "name": "required",
+                    "defaultValue": "input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute\n    })",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nRegisters a function to call when the component is touched.\n",
-                    "description": "<p>Registers a function to call when the component is touched.</p>\n",
-                    "jsdoctags": [
-                        {
-                            "name": {
-                                "pos": 2945,
-                                "end": 2947,
-                                "flags": 16842752,
-                                "modifierFlagsCache": 0,
-                                "transformFlags": 0,
-                                "kind": 80,
-                                "escapedText": "fn"
-                            },
-                            "type": "function",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "function": [],
-                            "tagName": {
-                                "pos": 2939,
-                                "end": 2944,
-                                "flags": 16842752,
-                                "modifierFlagsCache": 0,
-                                "transformFlags": 0,
-                                "kind": 80,
-                                "escapedText": "param"
-                            },
-                            "comment": "<p>Function to call on touch.</p>\n"
-                        }
+                    "type": "",
+                    "optional": false,
+                    "description": "<p>When true, indicates that the user must check the switch before the owning form can be submitted.</p>\n",
+                    "line": 57,
+                    "rawdescription": "\n\nWhen true, indicates that the user must check the switch before the owning form can be submitted.\n",
+                    "modifierKind": [
+                        148
                     ]
-                },
+                }
+            ],
+            "methodsClass": [
                 {
                     "name": "toggle",
                     "args": [],
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 117,
+                    "line": 87,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nToggles the checked state of the switch.\nIf the switch is disabled, the function returns early.\n",
@@ -8168,57 +8084,11 @@
                     "modifierKind": [
                         124
                     ]
-                },
-                {
-                    "name": "writeValue",
-                    "args": [
-                        {
-                            "name": "checked",
-                            "type": "boolean",
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 109,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nWrites a new value to the model.\n",
-                    "description": "<p>Writes a new value to the model.</p>\n",
-                    "jsdoctags": [
-                        {
-                            "name": {
-                                "pos": 3128,
-                                "end": 3135,
-                                "flags": 16842752,
-                                "modifierFlagsCache": 0,
-                                "transformFlags": 0,
-                                "kind": 80,
-                                "escapedText": "checked"
-                            },
-                            "type": "boolean",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "tagName": {
-                                "pos": 3122,
-                                "end": 3127,
-                                "flags": 16842752,
-                                "modifierFlagsCache": 0,
-                                "transformFlags": 0,
-                                "kind": 80,
-                                "escapedText": "param"
-                            },
-                            "comment": "<p>The new checked value.</p>\n"
-                        }
-                    ]
                 }
             ],
             "extends": [],
             "implements": [
-                "SwitchProps",
-                "ControlValueAccessor"
+                "SwitchProps"
             ]
         },
         {
@@ -8642,91 +8512,65 @@
         },
         {
             "name": "RdxToggleDirective",
-            "id": "directive-RdxToggleDirective-94be1eb58011efa799af90258505424aecc8486ac9fba7c7b9b37fe9fcc03ea74abc8b303a3dd63c6070953df747036cd920029be0c77da56a93076514dcc4c6",
+            "id": "directive-RdxToggleDirective-0bcbd664ea72aa02f90b3331238e8a118a14b8566bd36067013921c606f502814694751ab854825b1057106f71febb584ae15da9ebef63dc60001540db7e5906",
             "file": "toggle/src/toggle.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { Directive, EventEmitter, input, model, Output } from '@angular/core';\n\nexport interface ToggleProps {\n    /**\n     * The controlled state of the toggle.\n     */\n    pressed?: boolean;\n    /**\n     * The state of the toggle when initially rendered. Use `defaultPressed`\n     * if you do not need to control the state of the toggle.\n     * @defaultValue false\n     */\n    defaultPressed?: boolean;\n    /**\n     * The callback that fires when the state of the toggle changes.\n     */\n    onPressedChange?: EventEmitter<boolean>;\n}\n\n@Directive({\n    selector: 'button[rdxToggle]',\n    exportAs: 'rdxToggle',\n    standalone: true,\n    host: {\n        type: 'button',\n        '[attr.aria-pressed]': 'pressed()',\n        '[attr.data-state]': 'pressed() ? \"on\" : \"off\"',\n        '[attr.data-disabled]': 'disabled()',\n\n        '(click)': 'toggle()'\n    }\n})\nexport class RdxToggleDirective {\n    readonly defaultPressed = input<boolean>(false);\n    readonly pressed = model<boolean>(this.defaultPressed());\n    readonly disabled = input<boolean>(false);\n\n    /**\n     * Event emitted when the toggle is pressed.\n     */\n    @Output() readonly onPressedChange = new EventEmitter<boolean>();\n\n    protected toggle(): void {\n        if (!this.disabled()) {\n            this.pressed.set(!this.pressed());\n            this.onPressedChange.emit(this.pressed());\n        }\n    }\n}\n",
-            "selector": "button[rdxToggle]",
+            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Directive, input, model, output, OutputEmitterRef } from '@angular/core';\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\n@Directive({\n    selector: '[rdxToggle]',\n    exportAs: 'rdxToggle',\n    standalone: true,\n    host: {\n        type: 'button',\n        '[attr.aria-pressed]': 'pressed()',\n        '[attr.data-state]': 'pressed() ? \"on\" : \"off\"',\n        '[attr.data-disabled]': 'disabled()',\n        '[disabled]': 'disabled()',\n\n        '(click)': 'toggle()'\n    }\n})\nexport class RdxToggleDirective {\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    /**\n     * Event handler called when the pressed state of the toggle changes.\n     */\n    readonly onPressedChange = output<boolean>();\n\n    protected toggle(): void {\n        if (!this.disabled()) {\n            this.pressed.set(!this.pressed());\n            this.onPressedChange.emit(this.pressed());\n        }\n    }\n}\n",
+            "selector": "[rdxToggle]",
             "providers": [],
             "exportAs": "rdxToggle",
             "hostDirectives": [],
             "standalone": true,
-            "inputsClass": [
+            "inputsClass": [],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [
                 {
                     "name": "defaultPressed",
-                    "defaultValue": "false",
+                    "defaultValue": "input<boolean, BooleanInput>(false, { transform: booleanAttribute })",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "optional": false,
-                    "description": "",
-                    "line": 34,
+                    "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": 48,
+                    "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",
                     "modifierKind": [
                         148
-                    ],
-                    "required": false
+                    ]
                 },
                 {
                     "name": "disabled",
-                    "defaultValue": "false",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 36,
-                    "modifierKind": [
-                        148
-                    ],
-                    "required": false
-                }
-            ],
-            "outputsClass": [
-                {
-                    "name": "onPressedChange",
-                    "defaultValue": "new EventEmitter<boolean>()",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nEvent emitted when the toggle is pressed.\n",
-                    "description": "<p>Event emitted when the toggle is pressed.</p>\n",
-                    "line": 41,
-                    "type": "EventEmitter"
-                }
-            ],
-            "deprecated": false,
-            "deprecationMessage": "",
-            "hostBindings": [],
-            "hostListeners": [],
-            "propertiesClass": [
-                {
-                    "name": "defaultPressed",
-                    "defaultValue": "false",
+                    "defaultValue": "input<boolean, BooleanInput>(false, { transform: booleanAttribute })",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "optional": false,
-                    "description": "",
-                    "line": 34,
+                    "description": "<p>When true, prevents the user from interacting with the toggle.</p>\n",
+                    "line": 59,
+                    "rawdescription": "\n\nWhen true, prevents the user from interacting with the toggle.\n",
                     "modifierKind": [
                         148
-                    ],
-                    "required": false
+                    ]
                 },
                 {
-                    "name": "disabled",
-                    "defaultValue": "false",
+                    "name": "onPressedChange",
+                    "defaultValue": "output<boolean>()",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "optional": false,
-                    "description": "",
-                    "line": 36,
+                    "description": "<p>Event handler called when the pressed state of the toggle changes.</p>\n",
+                    "line": 64,
+                    "rawdescription": "\n\nEvent handler called when the pressed state of the toggle changes.\n",
                     "modifierKind": [
                         148
-                    ],
-                    "required": false
+                    ]
                 },
                 {
                     "name": "pressed",
@@ -8735,8 +8579,9 @@
                     "deprecationMessage": "",
                     "type": "",
                     "optional": false,
-                    "description": "",
-                    "line": 35,
+                    "description": "<p>The controlled pressed state of the toggle.\nMust be used in conjunction with <code>onPressedChange</code>.</p>\n",
+                    "line": 54,
+                    "rawdescription": "\n\nThe controlled pressed state of the toggle.\nMust be used in conjunction with `onPressedChange`.\n",
                     "modifierKind": [
                         148
                     ]
@@ -8749,7 +8594,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 43,
+                    "line": 66,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -8759,102 +8604,14 @@
             ],
             "extends": []
         },
-        {
-            "name": "RdxToggleGroupButtonDirective",
-            "id": "directive-RdxToggleGroupButtonDirective-eaacd7b8661bf44dd75ecc33aaaf4b8c67bacd659999808fc901edc3cab910438b9a7d4392a7ddd2055f8cc6b0d2fb3be6a4d9711b9f05dbccff195fadf52a51",
-            "file": "toggle-group/src/toggle-group-button.directive.ts",
-            "type": "directive",
-            "description": "",
-            "rawdescription": "\n",
-            "sourceCode": "import { booleanAttribute, Directive, Input, OnChanges, SimpleChanges } from '@angular/core';\nimport { RdxToggleGroupButtonToken } from './toggle-group-button.token';\nimport { injectToggleGroup } from './toggle-group.token';\n\n@Directive({\n    selector: 'button[rdxToggleGroupButton]',\n    standalone: true,\n    providers: [{ provide: RdxToggleGroupButtonToken, useExisting: RdxToggleGroupButtonDirective }],\n    host: {\n        role: 'radio',\n        '[attr.aria-checked]': 'checked',\n        '[attr.aria-disabled]': 'disabled || toggleGroup.disabled',\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    }\n})\nexport class RdxToggleGroupButtonDirective implements OnChanges {\n    /**\n     * Access the toggle group.\n     * @ignore\n     */\n    protected readonly toggleGroup = injectToggleGroup();\n\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    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",
-            "selector": "button[rdxToggleGroupButton]",
-            "providers": [
-                {
-                    "name": "{ provide: RdxToggleGroupButtonToken, useExisting: RdxToggleGroupButtonDirective }",
-                    "type": "directive"
-                }
-            ],
-            "hostDirectives": [],
-            "standalone": true,
-            "inputsClass": [
-                {
-                    "required": false,
-                    "name": "disabled",
-                    "defaultValue": "false",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "jsdoctags": [
-                        {
-                            "pos": 1132,
-                            "end": 1152,
-                            "flags": 16842752,
-                            "modifierFlagsCache": 0,
-                            "transformFlags": 0,
-                            "kind": 334,
-                            "tagName": {
-                                "pos": 1133,
-                                "end": 1140,
-                                "flags": 16842752,
-                                "modifierFlagsCache": 0,
-                                "transformFlags": 0,
-                                "kind": 80,
-                                "escapedText": "default"
-                            },
-                            "comment": "<p>false</p>\n"
-                        }
-                    ],
-                    "rawdescription": "\n\nWhether this toggle button is disabled.\n",
-                    "description": "<p>Whether this toggle button is disabled.</p>\n",
-                    "line": 36,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "required": true,
-                    "name": "value",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "optional": false,
-                    "rawdescription": "\n\nThe value of this toggle button.\n",
-                    "description": "<p>The value of this toggle button.</p>\n",
-                    "line": 30,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
-            "outputsClass": [],
-            "deprecated": false,
-            "deprecationMessage": "",
-            "hostBindings": [],
-            "hostListeners": [],
-            "propertiesClass": [],
-            "methodsClass": [],
-            "extends": [],
-            "implements": [
-                "OnChanges"
-            ],
-            "accessors": {
-                "checked": {
-                    "name": "checked",
-                    "getSignature": {
-                        "name": "checked",
-                        "type": "boolean",
-                        "returnType": "boolean",
-                        "line": 41,
-                        "rawdescription": "\n\nWhether this toggle button is checked.\n",
-                        "description": "<p>Whether this toggle button is checked.</p>\n"
-                    }
-                }
-            }
-        },
         {
             "name": "RdxToggleGroupDirective",
-            "id": "directive-RdxToggleGroupDirective-0cb70c4d717536b45c29f8751aa5d947fc03b5f2d5685f87673c06050799a46fa34eb6ec382b822b931a8b5f77b502abc73f36e8cb7f0a9304ec3dea40d00b8c",
+            "id": "directive-RdxToggleGroupDirective-a2eb5e3e27c5981ca8cf0a2e50c25e5b9e62fc0c2edf2e6374621ba9697612b4b4e71418691a2d27fe9df21928c6d0c2dfaef44cfd17788bbedf16de4943dc49",
             "file": "toggle-group/src/toggle-group.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import {\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 { RdxToggleGroupButtonDirective } from './toggle-group-button.directive';\nimport { RdxToggleGroupButtonToken } from './toggle-group-button.token';\nimport { RdxToggleGroupToken } from './toggle-group.token';\n\n@Directive({\n    selector: '[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        '(focusout)': 'onTouched?.()'\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(RdxToggleGroupButtonToken)\n    protected buttons?: QueryList<RdxToggleGroupButtonDirective>;\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\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 { 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",
             "selector": "[rdxToggleGroup]",
             "providers": [
                 {
@@ -8866,6 +8623,7 @@
                     "type": "directive"
                 }
             ],
+            "exportAs": "rdxToggleGroup",
             "hostDirectives": [],
             "standalone": true,
             "inputsClass": [
@@ -8877,15 +8635,15 @@
                     "deprecationMessage": "",
                     "jsdoctags": [
                         {
-                            "pos": 1291,
-                            "end": 1311,
+                            "pos": 1451,
+                            "end": 1471,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 1292,
-                                "end": 1299,
+                                "pos": 1452,
+                                "end": 1459,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8897,7 +8655,7 @@
                     ],
                     "rawdescription": "\n\nWhether the toggle group is disabled.\n",
                     "description": "<p>Whether the toggle group is disabled.</p>\n",
-                    "line": 46,
+                    "line": 51,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -8908,15 +8666,15 @@
                     "deprecationMessage": "",
                     "jsdoctags": [
                         {
-                            "pos": 1132,
-                            "end": 1159,
+                            "pos": 1292,
+                            "end": 1319,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 1133,
-                                "end": 1140,
+                                "pos": 1293,
+                                "end": 1300,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8928,7 +8686,7 @@
                     ],
                     "rawdescription": "\n\nThe orientation of the toggle group.\n",
                     "description": "<p>The orientation of the toggle group.</p>\n",
-                    "line": 40,
+                    "line": 45,
                     "type": "\"horizontal\" | \"vertical\"",
                     "decorators": []
                 },
@@ -8939,7 +8697,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe selected toggle button.\n",
                     "description": "<p>The selected toggle button.</p>\n",
-                    "line": 34,
+                    "line": 39,
                     "type": "string | null",
                     "decorators": []
                 },
@@ -8950,7 +8708,7 @@
                     "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": 57,
+                    "line": 62,
                     "type": "any",
                     "decorators": []
                 },
@@ -8962,15 +8720,15 @@
                     "deprecationMessage": "",
                     "jsdoctags": [
                         {
-                            "pos": 1450,
-                            "end": 1469,
+                            "pos": 1610,
+                            "end": 1629,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 1451,
-                                "end": 1458,
+                                "pos": 1611,
+                                "end": 1618,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8982,7 +8740,7 @@
                     ],
                     "rawdescription": "\n\nWhether the toggle group roving focus should wrap.\n",
                     "description": "<p>Whether the toggle group roving focus should wrap.</p>\n",
-                    "line": 52,
+                    "line": 57,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -8997,15 +8755,15 @@
                     "name": "buttons",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "QueryList<RdxToggleGroupButtonDirective>",
+                    "type": "QueryList<RdxToggleGroupItemDirective>",
                     "optional": true,
                     "description": "<p>Access the buttons in the toggle group.</p>\n",
-                    "line": 63,
+                    "line": 68,
                     "rawdescription": "\n\nAccess the buttons in the toggle group.\n",
                     "decorators": [
                         {
                             "name": "ContentChildren",
-                            "stringifiedArguments": "RdxToggleGroupButtonToken"
+                            "stringifiedArguments": "RdxToggleGroupItemToken"
                         }
                     ],
                     "modifierKind": [
@@ -9020,14 +8778,59 @@
                     "type": "function",
                     "optional": true,
                     "description": "<p>onTouch function registered via registerOnTouch (ControlValueAccessor).</p>\n",
-                    "line": 73,
+                    "line": 83,
                     "rawdescription": "\n\nonTouch function registered via registerOnTouch (ControlValueAccessor).\n",
                     "modifierKind": [
                         124
                     ]
                 }
             ],
-            "methodsClass": [],
+            "methodsClass": [
+                {
+                    "name": "handleKeydown",
+                    "args": [
+                        {
+                            "name": "event",
+                            "type": "KeyboardEvent",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 107,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "modifierKind": [
+                        124
+                    ],
+                    "jsdoctags": [
+                        {
+                            "name": "event",
+                            "type": "KeyboardEvent",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                },
+                {
+                    "name": "onFocusIn",
+                    "args": [],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 101,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "modifierKind": [
+                        124
+                    ]
+                }
+            ],
             "extends": [],
             "implements": [
                 "OnChanges",
@@ -9036,44 +8839,135 @@
             ]
         },
         {
-            "name": "RdxToggleGroupMultiDirective",
-            "id": "directive-RdxToggleGroupMultiDirective-f3beaa34f2f86e55f7ac23cdd00ed5ae4eb938c2eeabb8428eab97c777fceb078eb424788ea139cb8152f27c9a119b5d22744c52e746508c37c8fb0796ccec55",
-            "file": "toggle-group/src/toggle-group-multi.directive.ts",
+            "name": "RdxToggleGroupItemDirective",
+            "id": "directive-RdxToggleGroupItemDirective-687d59a75d8d7f33d385f82fdc4bbce77cba1472dd53ad79bfb1dd48559c4ba1bc22d43207e97a0d2bda91a93cd9845a9e7906ffd2dc266f20cdaaf277ce96db",
+            "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    }\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",
+            "selector": "[rdxToggleGroupItem]",
+            "providers": [
+                {
+                    "name": "{ provide: RdxToggleGroupItemToken, useExisting: RdxToggleGroupItemDirective }",
+                    "type": "directive"
+                }
+            ],
+            "exportAs": "rdxToggleGroupItem",
+            "hostDirectives": [],
+            "standalone": true,
+            "inputsClass": [
+                {
+                    "required": false,
+                    "name": "disabled",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "jsdoctags": [
+                        {
+                            "pos": 1339,
+                            "end": 1359,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "kind": 334,
+                            "tagName": {
+                                "pos": 1340,
+                                "end": 1347,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "default"
+                            },
+                            "comment": "<p>false</p>\n"
+                        }
+                    ],
+                    "rawdescription": "\n\nWhether this toggle button is disabled.\n",
+                    "description": "<p>Whether this toggle button is disabled.</p>\n",
+                    "line": 41,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "required": true,
+                    "name": "value",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "optional": false,
+                    "rawdescription": "\n\nThe value of this toggle button.\n",
+                    "description": "<p>The value of this toggle button.</p>\n",
+                    "line": 35,
+                    "type": "string",
+                    "decorators": []
+                }
+            ],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "extends": [],
+            "implements": [
+                "OnChanges",
+                "FocusableOption"
+            ],
+            "accessors": {
+                "checked": {
+                    "name": "checked",
+                    "getSignature": {
+                        "name": "checked",
+                        "type": "boolean",
+                        "returnType": "boolean",
+                        "line": 46,
+                        "rawdescription": "\n\nWhether this toggle button is checked.\n",
+                        "description": "<p>Whether this toggle button is checked.</p>\n"
+                    }
+                }
+            }
+        },
+        {
+            "name": "RdxToggleGroupMultipleDirective",
+            "id": "directive-RdxToggleGroupMultipleDirective-02fedd3015562ba7140c1e0e2cb6727c520f803ac25988f382a2311a05795cbbec8daa1138b5833c3d67ef1215b6b3445a922a154ea56120e578e0b7bb540642",
+            "file": "toggle-group/src/toggle-group-multiple.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import {\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 { RdxToggleGroupButtonDirective } from './toggle-group-button.directive';\nimport { RdxToggleGroupButtonToken } from './toggle-group-button.token';\nimport { RdxToggleGroupToken } from './toggle-group.token';\n\n@Directive({\n    selector: '[rdxToggleGroupMulti]',\n    standalone: true,\n    providers: [\n        { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupMultiDirective },\n        { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupMultiDirective, multi: true }\n    ],\n    host: {\n        role: 'group',\n        '[attr.data-orientation]': 'orientation',\n        '(focusout)': 'onTouched?.()'\n    }\n})\nexport class RdxToggleGroupMultiDirective implements OnChanges, AfterContentInit, ControlValueAccessor {\n    /**\n     * The selected toggle button.\n     */\n    @Input('rdxToggleGroupMultiValue') value: ReadonlyArray<string> = [];\n\n    /**\n     * The orientation of the toggle group.\n     * @default 'horizontal'\n     */\n    @Input('rdxToggleGroupMultiOrientation') orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n    /**\n     * Whether the toggle group is disabled.\n     * @default false\n     */\n    @Input({ alias: 'rdxToggleGroupMultiDisabled', transform: booleanAttribute }) disabled = false;\n\n    /**\n     * Whether the toggle group roving focus should wrap.\n     * @default true\n     */\n    @Input({ alias: 'rdxToggleGroupMultiWrap', transform: booleanAttribute }) wrap = true;\n\n    /**\n     * Event emitted when the selected toggle button changes.\n     */\n    @Input('rdxToggleGroupMultiValueChange') readonly valueChange = new EventEmitter<ReadonlyArray<string>>();\n\n    /**\n     * Access the buttons in the toggle group.\n     * @ignore\n     */\n    @ContentChildren(RdxToggleGroupButtonToken)\n    protected buttons?: QueryList<RdxToggleGroupButtonDirective>;\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\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": "[rdxToggleGroupMulti]",
+            "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: RdxToggleGroupMultiDirective }",
+                    "name": "{ provide: RdxToggleGroupToken, useExisting: RdxToggleGroupMultipleDirective }",
                     "type": "directive"
                 },
                 {
-                    "name": "{ provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupMultiDirective, multi: true }",
+                    "name": "{ provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupMultipleDirective, multi: true }",
                     "type": "directive"
                 }
             ],
+            "exportAs": "rdxToggleGroupMultiple",
             "hostDirectives": [],
             "standalone": true,
             "inputsClass": [
                 {
                     "required": false,
-                    "name": "rdxToggleGroupMultiDisabled",
+                    "name": "disabled",
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
                         {
-                            "pos": 1375,
-                            "end": 1395,
+                            "pos": 1497,
+                            "end": 1517,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 1376,
-                                "end": 1383,
+                                "pos": 1498,
+                                "end": 1505,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9085,26 +8979,26 @@
                     ],
                     "rawdescription": "\n\nWhether the toggle group is disabled.\n",
                     "description": "<p>Whether the toggle group is disabled.</p>\n",
-                    "line": 46,
+                    "line": 51,
                     "type": "boolean",
                     "decorators": []
                 },
                 {
-                    "name": "rdxToggleGroupMultiOrientation",
+                    "name": "orientation",
                     "defaultValue": "'horizontal'",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
                         {
-                            "pos": 1184,
-                            "end": 1211,
+                            "pos": 1338,
+                            "end": 1365,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 1185,
-                                "end": 1192,
+                                "pos": 1339,
+                                "end": 1346,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9116,49 +9010,49 @@
                     ],
                     "rawdescription": "\n\nThe orientation of the toggle group.\n",
                     "description": "<p>The orientation of the toggle group.</p>\n",
-                    "line": 40,
+                    "line": 45,
                     "type": "\"horizontal\" | \"vertical\"",
                     "decorators": []
                 },
                 {
-                    "name": "rdxToggleGroupMultiValue",
+                    "name": "value",
                     "defaultValue": "[]",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe selected toggle button.\n",
                     "description": "<p>The selected toggle button.</p>\n",
-                    "line": 34,
+                    "line": 39,
                     "type": "ReadonlyArray<string>",
                     "decorators": []
                 },
                 {
-                    "name": "rdxToggleGroupMultiValueChange",
+                    "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": 57,
+                    "line": 62,
                     "type": "any",
                     "decorators": []
                 },
                 {
                     "required": false,
-                    "name": "rdxToggleGroupMultiWrap",
+                    "name": "wrap",
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
                         {
-                            "pos": 1572,
-                            "end": 1591,
+                            "pos": 1656,
+                            "end": 1675,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 1573,
-                                "end": 1580,
+                                "pos": 1657,
+                                "end": 1664,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9170,7 +9064,7 @@
                     ],
                     "rawdescription": "\n\nWhether the toggle group roving focus should wrap.\n",
                     "description": "<p>Whether the toggle group roving focus should wrap.</p>\n",
-                    "line": 52,
+                    "line": 57,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -9181,7 +9075,52 @@
             "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [],
-            "methodsClass": [],
+            "methodsClass": [
+                {
+                    "name": "handleKeydown",
+                    "args": [
+                        {
+                            "name": "event",
+                            "type": "KeyboardEvent",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 116,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "modifierKind": [
+                        124
+                    ],
+                    "jsdoctags": [
+                        {
+                            "name": "event",
+                            "type": "KeyboardEvent",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                },
+                {
+                    "name": "onFocusIn",
+                    "args": [],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 110,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "modifierKind": [
+                        124
+                    ]
+                }
+            ],
             "extends": [],
             "implements": [
                 "OnChanges",
@@ -11240,14 +11179,14 @@
                 "defaultValue": "new InjectionToken<RdxSwitchRootDirective>('RdxSwitchToken')"
             },
             {
-                "name": "RdxToggleGroupButtonToken",
+                "name": "RdxToggleGroupItemToken",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "toggle-group/src/toggle-group-button.token.ts",
+                "file": "toggle-group/src/toggle-group-item.token.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "new InjectionToken<RdxToggleGroupButtonDirective>('RdxToggleGroupButtonToken')"
+                "defaultValue": "new InjectionToken<RdxToggleGroupItemDirective>('RdxToggleGroupItemToken')"
             },
             {
                 "name": "RdxToggleGroupToken",
@@ -11257,7 +11196,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "new InjectionToken<RdxToggleGroupDirective | RdxToggleGroupMultiDirective>(\n    'RdxToggleGroupToken'\n)"
+                "defaultValue": "new InjectionToken<RdxToggleGroupDirective | RdxToggleGroupMultipleDirective>(\n    'RdxToggleGroupToken'\n)"
             },
             {
                 "name": "reqAnimationFrame",
@@ -11699,18 +11638,7 @@
                 "deprecationMessage": "",
                 "description": "",
                 "args": [],
-                "returnType": "RdxToggleGroupDirective | RdxToggleGroupMultiDirective"
-            },
-            {
-                "name": "injectToggleGroupButton",
-                "file": "toggle-group/src/toggle-group-button.token.ts",
-                "ctype": "miscellaneous",
-                "subtype": "function",
-                "deprecated": false,
-                "deprecationMessage": "",
-                "description": "",
-                "args": [],
-                "returnType": "RdxToggleGroupButtonDirective"
+                "returnType": "RdxToggleGroupDirective | RdxToggleGroupMultipleDirective"
             },
             {
                 "name": "isDismissed",
@@ -13016,16 +12944,16 @@
                     "defaultValue": "new InjectionToken<RdxCollapsibleRootDirective>('RdxCollapsibleRootToken')"
                 }
             ],
-            "toggle-group/src/toggle-group-button.token.ts": [
+            "toggle-group/src/toggle-group-item.token.ts": [
                 {
-                    "name": "RdxToggleGroupButtonToken",
+                    "name": "RdxToggleGroupItemToken",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "toggle-group/src/toggle-group-button.token.ts",
+                    "file": "toggle-group/src/toggle-group-item.token.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "new InjectionToken<RdxToggleGroupButtonDirective>('RdxToggleGroupButtonToken')"
+                    "defaultValue": "new InjectionToken<RdxToggleGroupItemDirective>('RdxToggleGroupItemToken')"
                 }
             ],
             "toggle-group/src/toggle-group.token.ts": [
@@ -13037,7 +12965,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "new InjectionToken<RdxToggleGroupDirective | RdxToggleGroupMultiDirective>(\n    'RdxToggleGroupToken'\n)"
+                    "defaultValue": "new InjectionToken<RdxToggleGroupDirective | RdxToggleGroupMultipleDirective>(\n    'RdxToggleGroupToken'\n)"
                 }
             ],
             "switch/index.ts": [
@@ -13608,20 +13536,7 @@
                     "deprecationMessage": "",
                     "description": "",
                     "args": [],
-                    "returnType": "RdxToggleGroupDirective | RdxToggleGroupMultiDirective"
-                }
-            ],
-            "toggle-group/src/toggle-group-button.token.ts": [
-                {
-                    "name": "injectToggleGroupButton",
-                    "file": "toggle-group/src/toggle-group-button.token.ts",
-                    "ctype": "miscellaneous",
-                    "subtype": "function",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "description": "",
-                    "args": [],
-                    "returnType": "RdxToggleGroupButtonDirective"
+                    "returnType": "RdxToggleGroupDirective | RdxToggleGroupMultipleDirective"
                 }
             ],
             "dialog/src/dialog-ref.ts": [