@radix-ng/primitives 0.21.0 → 0.22.0

package/compodoc/documentation.json

@@ -475,12 +475,12 @@
         },
         {
             "name": "TabsListProps",
-            "id": "interface-TabsListProps-7a11999b6bea315ceb313731abe403cb7bd80fe4e6c6ff1aeec93b5de5f2de9c3c9ed213bc1125b37c618cd5273d70a6a2d954b781aebfa700747cc0d3970fbf",
+            "id": "interface-TabsListProps-34f2b628270e0cd2ad740157dcc9a9c43be8462624b2d5d420ebb7edf81a79327f8389c2a8cbfb256d599d06ba79bee10b1d879e5d63d01a710b87444fca33e2",
             "file": "tabs/src/tabs-list.directive.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import { Directive, inject } from '@angular/core';\nimport { TABS_CONTEXT_TOKEN } from './tabs-context.service';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\ninterface TabsListProps {\n    // When true, keyboard navigation will loop from last tab to first, and vice versa.\n    loop?: boolean;\n}\n\n@Directive({\n    selector: '[rdxTabsList]',\n    standalone: true,\n    host: {\n        role: 'tablist',\n        '[attr.aria-orientation]': 'tabsContext.orientation$()',\n        '[attr.data-orientation]': 'tabsContext.orientation$()'\n    }\n})\nexport class RdxTabsListDirective {\n    protected readonly tabsContext = inject(TABS_CONTEXT_TOKEN);\n}\n",
+            "sourceCode": "import { Directive, inject } from '@angular/core';\nimport { RdxRovingFocusGroupDirective } from '@radix-ng/primitives/roving-focus';\nimport { RDX_TABS_ROOT_TOKEN } from './tabs-root.directive';\n\nexport interface TabsListProps {\n    // When true, keyboard navigation will loop from last tab to first, and vice versa.\n    loop?: boolean;\n}\n\n@Directive({\n    selector: '[rdxTabsList]',\n    standalone: true,\n    hostDirectives: [{ directive: RdxRovingFocusGroupDirective, inputs: ['dir', 'orientation', 'loop'] }],\n    host: {\n        role: 'tablist',\n        '[attr.aria-orientation]': 'tabsContext.orientation()',\n        '[attr.data-orientation]': 'tabsContext.orientation()'\n    }\n})\nexport class RdxTabsListDirective {\n    protected readonly tabsContext = inject(RDX_TABS_ROOT_TOKEN);\n}\n",
             "properties": [
                 {
                     "name": "loop",
@@ -500,12 +500,12 @@
         },
         {
             "name": "TabsProps",
-            "id": "interface-TabsProps-cb973df3b131eccc24e06ac6a988beee692202e0d9312785cdec614ab311c7b6d97c038db4c9878bc406b6b7fc113c593d260a6af703907f4f068dd4ccfbcf83",
+            "id": "interface-TabsProps-baff198254363f5c320588a6b183d9d28b3c2d81a08ca674044b906fc214c2cb1405e91a11cefa6e656aaad448987ad4b828f83c6dbaff25334d0f8a5eb26ac9",
             "file": "tabs/src/tabs-root.directive.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import { Directive, effect, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';\nimport { RdxTabsContextService, TABS_CONTEXT_TOKEN } from './tabs-context.service';\n\nexport interface TabsProps {\n    /** The value for the selected tab, if controlled */\n    value?: string;\n    /** The value of the tab to select by default, if uncontrolled */\n    defaultValue?: string;\n    /** A function called when a new tab is selected */\n    onValueChange?: (value: string) => void;\n    /**\n     * The orientation the tabs are layed out.\n     * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n     * @defaultValue horizontal\n     */\n    orientation?: string;\n    /**\n     * The direction of navigation between toolbar items.\n     */\n    dir?: string;\n    /**\n     * Whether a tab is activated automatically or manually.\n     * @defaultValue automatic\n     * */\n    activationMode?: 'automatic' | 'manual';\n}\n\n@Directive({\n    selector: '[rdxTabsRoot]',\n    standalone: true,\n    providers: [{ provide: TABS_CONTEXT_TOKEN, useExisting: RdxTabsContextService }],\n    host: {\n        '[attr.data-orientation]': 'orientation',\n        '[attr.dir]': 'dir'\n    }\n})\nexport class RdxTabsRootDirective implements OnInit {\n    private readonly tabsContext = inject(TABS_CONTEXT_TOKEN);\n\n    @Input() value?: string;\n    @Input() defaultValue?: string;\n    @Input() orientation = 'horizontal';\n    @Input() dir?: string;\n\n    // Event handler called when the value changes.\n    @Output() onValueChange = new EventEmitter<string>();\n\n    constructor() {\n        effect(() => {\n            const value = this.tabsContext.value$();\n            if (value !== undefined) {\n                this.onValueChange.emit(value);\n            }\n        });\n    }\n\n    ngOnInit() {\n        this.tabsContext.setOrientation(this.orientation);\n\n        if (this.dir) {\n            this.tabsContext.setDir(this.dir);\n        }\n\n        if (this.value) {\n            this.tabsContext.setValue(this.value);\n        } else if (this.defaultValue) {\n            this.tabsContext.setValue(this.defaultValue);\n        }\n    }\n}\n",
+            "sourceCode": "import { Directive, InjectionToken, input, model, OnInit, output } from '@angular/core';\n\nexport interface TabsProps {\n    /** The value for the selected tab, if controlled */\n    value?: string;\n    /** The value of the tab to select by default, if uncontrolled */\n    defaultValue?: string;\n    /** A function called when a new tab is selected */\n    onValueChange?: (value: string) => void;\n    /**\n     * The orientation the tabs are layed out.\n     * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n     * @defaultValue horizontal\n     */\n    orientation?: string;\n    /**\n     * The direction of navigation between toolbar items.\n     */\n    dir?: string;\n    /**\n     * Whether a tab is activated automatically or manually.\n     * @defaultValue automatic\n     * */\n    activationMode?: 'automatic' | 'manual';\n}\n\nexport type DataOrientation = 'vertical' | 'horizontal';\n\nexport const RDX_TABS_ROOT_TOKEN = new InjectionToken<RdxTabsRootDirective>('RdxTabsRootDirective');\n\n@Directive({\n    selector: '[rdxTabsRoot]',\n    standalone: true,\n    providers: [\n        { provide: RDX_TABS_ROOT_TOKEN, useExisting: RdxTabsRootDirective }],\n    host: {\n        '[attr.data-orientation]': 'orientation()',\n        '[attr.dir]': 'dir()'\n    }\n})\nexport class RdxTabsRootDirective implements OnInit {\n    /**\n     * The controlled value of the tab to activate. Should be used in conjunction with `onValueChange`.\n     */\n    readonly value = model<string>();\n\n    readonly defaultValue = input<string>();\n\n    /**\n     * When automatic, tabs are activated when receiving focus. When manual, tabs are activated when clicked.\n     */\n    readonly activationMode = input<'automatic' | 'manual'>('automatic');\n\n    /**\n     * The orientation of the component.\n     */\n    readonly orientation = input<DataOrientation>('horizontal');\n\n    readonly dir = input<string>('ltr');\n\n    /**\n     * Event handler called when the value changes.\n     */\n    readonly onValueChange = output<string>();\n\n    ngOnInit() {\n        if (this.defaultValue()) {\n            this.value.set(this.defaultValue());\n        }\n    }\n\n    select(value: string) {\n        this.value.set(value);\n        this.onValueChange.emit(value);\n    }\n\n    /** @ignore */\n    getBaseId() {\n        return `tabs-${Math.random().toString(36).substr(2, 9)}`;\n    }\n}\n",
             "properties": [
                 {
                     "name": "activationMode",
@@ -515,20 +515,20 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "<p>Whether a tab is activated automatically or manually.</p>\n",
-                    "line": 25,
+                    "line": 24,
                     "rawdescription": "\n\nWhether a tab is activated automatically or manually.\n",
                     "jsdoctags": [
                         {
-                            "pos": 857,
-                            "end": 888,
+                            "pos": 766,
+                            "end": 797,
                             "kind": 327,
                             "id": 0,
                             "flags": 16777216,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 858,
-                                "end": 870,
+                                "pos": 767,
+                                "end": 779,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16777216,
@@ -547,7 +547,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "<p>The value of the tab to select by default, if uncontrolled</p>\n",
-                    "line": 8,
+                    "line": 7,
                     "rawdescription": "\nThe value of the tab to select by default, if uncontrolled"
                 },
                 {
@@ -558,7 +558,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "<p>The direction of navigation between toolbar items.</p>\n",
-                    "line": 20,
+                    "line": 19,
                     "rawdescription": "\n\nThe direction of navigation between toolbar items.\n"
                 },
                 {
@@ -569,7 +569,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "<p>A function called when a new tab is selected</p>\n",
-                    "line": 10,
+                    "line": 9,
                     "rawdescription": "\nA function called when a new tab is selected"
                 },
                 {
@@ -580,20 +580,20 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "<p>The orientation the tabs are layed out.\nMainly so arrow navigation is done accordingly (left &amp; right vs. up &amp; down)</p>\n",
-                    "line": 16,
+                    "line": 15,
                     "rawdescription": "\n\nThe orientation the tabs are layed out.\nMainly so arrow navigation is done accordingly (left & right vs. up & down)\n",
                     "jsdoctags": [
                         {
-                            "pos": 630,
-                            "end": 660,
+                            "pos": 539,
+                            "end": 569,
                             "kind": 327,
                             "id": 0,
                             "flags": 16777216,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 631,
-                                "end": 643,
+                                "pos": 540,
+                                "end": 552,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16777216,
@@ -612,7 +612,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "<p>The value for the selected tab, if controlled</p>\n",
-                    "line": 6,
+                    "line": 5,
                     "rawdescription": "\nThe value for the selected tab, if controlled"
                 }
             ],
@@ -623,12 +623,12 @@
         },
         {
             "name": "TabsTriggerProps",
-            "id": "interface-TabsTriggerProps-741265fd17e23faf9ceaa955c3ca0fbaaa9725937c2c63c739a111674e9ff30022443985f79bc6eb09fbbfe7fb7c2f59add15a9b7f55baf2d847c98ebabee7e5",
+            "id": "interface-TabsTriggerProps-2783e0cafa5f228d4e6fe9e75f1f19161eb9e679712510d7cfe8d0d52c1197ffa5ad89c82845455dd1cb27b4a9881565648b1fac9047860443efbd16893ece00",
             "file": "tabs/src/tabs-trigger.directive.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, computed, Directive, inject, input, InputSignalWithTransform } from '@angular/core';\nimport { TABS_CONTEXT_TOKEN } from './tabs-context.service';\n\ninterface TabsTriggerProps {\n    // When true, prevents the user from interacting with the tab.\n    disabled: InputSignalWithTransform<boolean, BooleanInput>;\n}\n\n@Directive({\n    selector: '[rdxTabsTrigger]',\n    standalone: true,\n    host: {\n        type: 'button',\n        role: 'tab',\n        '[id]': 'triggerId',\n        '[attr.aria-selected]': 'selected()',\n        '[attr.aria-controls]': 'contentId()',\n        '[attr.data-disabled]': \"disabled() ? '' : undefined\",\n        '[attr.data-state]': \"selected() ? 'active' : 'inactive'\",\n        '(mousedown)': 'onMouseDown($event)',\n        '(keydown)': 'onKeyDown($event)'\n    }\n})\nexport class RdxTabsTriggerDirective implements TabsTriggerProps {\n    protected readonly tabsContext = inject(TABS_CONTEXT_TOKEN);\n\n    // A unique value that associates the trigger with a content.\n    readonly value = input.required<string>();\n\n    // When true, prevents the user from interacting with the tab.\n    readonly disabled = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute\n    });\n\n    protected readonly contentId = computed(() => `${this.tabsContext.getBaseId()}-content-${this.value()}`);\n    protected readonly triggerId = computed(() => `${this.tabsContext.getBaseId()}-trigger-${this.value}`);\n\n    protected readonly selected = computed(() => this.tabsContext.value$() === this.value());\n\n    protected onMouseDown(event: MouseEvent) {\n        if (!this.disabled() && event.button === 0 && !event.ctrlKey) {\n            this.tabsContext?.setValue(this.value());\n        } else {\n            // prevent focus to avoid accidental activation\n            event.preventDefault();\n        }\n    }\n\n    protected onKeyDown(event: KeyboardEvent) {\n        if ([' ', 'Enter'].includes(event.key)) {\n            this.tabsContext?.setValue(this.value());\n        }\n    }\n}\n",
+            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, computed, Directive, effect, inject, input, InputSignalWithTransform } from '@angular/core';\nimport { RdxRovingFocusItemDirective } from '@radix-ng/primitives/roving-focus';\nimport { RDX_TABS_ROOT_TOKEN } from './tabs-root.directive';\nimport { makeContentId, makeTriggerId } from './utils';\n\ninterface TabsTriggerProps {\n    // When true, prevents the user from interacting with the tab.\n    disabled: InputSignalWithTransform<boolean, BooleanInput>;\n}\n\n@Directive({\n    selector: '[rdxTabsTrigger]',\n    standalone: true,\n    hostDirectives: [\n        {\n            directive: RdxRovingFocusItemDirective,\n            inputs: ['focusable', 'active', 'allowShiftKey']\n        }\n    ],\n\n    host: {\n        type: 'button',\n        role: 'tab',\n        '[id]': 'triggerId()',\n        '[attr.aria-selected]': 'isSelected()',\n        '[attr.aria-controls]': 'contentId()',\n        '[attr.data-disabled]': \"disabled() ? '' : undefined\",\n        '[disabled]': 'disabled()',\n        '[attr.data-state]': \"isSelected() ? 'active' : 'inactive'\",\n        '[attr.data-orientation]': 'tabsContext.orientation()',\n        '(mousedown)': 'onMouseDown($event)',\n        '(keydown)': 'onKeyDown($event)',\n        '(focus)': 'onFocus()'\n    }\n})\nexport class RdxTabsTriggerDirective implements TabsTriggerProps {\n    private readonly rdxRovingFocusItemDirective = inject(RdxRovingFocusItemDirective);\n\n    protected readonly tabsContext = inject(RDX_TABS_ROOT_TOKEN);\n\n    /**\n     * A unique value that associates the trigger with a content.\n     */\n    readonly value = input.required<string>();\n\n    /**\n     * When true, prevents the user from interacting with the tab.\n     */\n    readonly disabled = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute\n    });\n\n    protected readonly contentId = computed(() => makeContentId(this.tabsContext.getBaseId(), this.value()));\n    protected readonly triggerId = computed(() => makeTriggerId(this.tabsContext.getBaseId(), this.value()));\n\n    protected readonly isSelected = computed(() => this.tabsContext.value() === this.value());\n\n    constructor() {\n        effect(() => (this.rdxRovingFocusItemDirective.active = this.isSelected()));\n    }\n\n    protected onMouseDown(event: MouseEvent) {\n        // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n        // but not when the control key is pressed (avoiding MacOS right click)\n        if (!this.disabled() && event.button === 0 && !event.ctrlKey) {\n            this.tabsContext?.select(this.value());\n        } else {\n            // prevent focus to avoid accidental activation\n            event.preventDefault();\n        }\n    }\n\n    protected onKeyDown(event: KeyboardEvent) {\n        if ([' ', 'Enter'].includes(event.key)) {\n            this.tabsContext?.select(this.value());\n        }\n    }\n\n    protected onFocus() {\n        const isAutomaticActivation = this.tabsContext.activationMode() !== 'manual';\n        if (!this.isSelected() && !this.disabled() && isAutomaticActivation) {\n            this.tabsContext?.select(this.value());\n        }\n    }\n}\n",
             "properties": [
                 {
                     "name": "disabled",
@@ -638,7 +638,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 7
+                    "line": 9
                 }
             ],
             "indexSignatures": [],
@@ -648,12 +648,12 @@
         },
         {
             "name": "ToggleProps",
-            "id": "interface-ToggleProps-323b1f959dbd66f0c041c0fe424b67f98ff73aca3d18e51728e8848debd483b2e86349778e3ec29b36be52faa3e891ec65c5a9f55f67ed7043ff8277c4ee78f3",
+            "id": "interface-ToggleProps-596f9fc6c92b130f02431a3a95848dba07cc638e90f9f409ee44fdd2dae81e83ca3dbf2ed99f5057f3e8f9246fdf96ded627d14302f01544e9b9557e48dbb8b5",
             "file": "toggle/src/toggle.directive.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    computed,\n    Directive,\n    forwardRef,\n    input,\n    model,\n    output,\n    OutputEmitterRef,\n    signal\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport interface ToggleProps {\n    /**\n     * The controlled state of the toggle.\n     */\n    pressed?: boolean;\n\n    /**\n     * The state of the toggle when initially rendered. Use `defaultPressed`\n     * if you do not need to control the state of the toggle.\n     * @defaultValue false\n     */\n    defaultPressed?: boolean;\n\n    /**\n     * The callback that fires when the state of the toggle changes.\n     */\n    onPressedChange?: OutputEmitterRef<boolean>;\n\n    /**\n     * Whether the toggle is disabled.\n     * @defaultValue false\n     */\n    disabled?: boolean;\n}\n\nexport type DataState = 'on' | 'off';\n\nexport const TOGGLE_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => RdxToggleDirective),\n    multi: true\n};\n\n@Directive({\n    selector: '[rdxToggle]',\n    exportAs: 'rdxToggle',\n    standalone: true,\n    providers: [TOGGLE_VALUE_ACCESSOR],\n    host: {\n        '[attr.aria-pressed]': 'pressed()',\n        '[attr.data-state]': 'dataState()',\n        '[attr.data-disabled]': 'disabledState() ? \"\" : undefined',\n        '[disabled]': 'disabledState()',\n\n        '(click)': 'togglePressed()'\n    }\n})\nexport class RdxToggleDirective implements ControlValueAccessor {\n    /**\n     * The pressed state of the toggle when it is initially rendered.\n     * Use when you do not need to control its pressed state.\n     */\n    readonly defaultPressed = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * The controlled pressed state of the toggle.\n     * Must be used in conjunction with `onPressedChange`.\n     */\n    readonly pressed = model<boolean>(this.defaultPressed());\n\n    /**\n     * When true, prevents the user from interacting with the toggle.\n     */\n    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /** @ignore */\n    readonly disabledState = computed(() => this.disabled() || this.accessorDisabled());\n\n    protected readonly dataState = computed<DataState>(() => {\n        return this.pressed() ? 'on' : 'off';\n    });\n\n    /**\n     * Event handler called when the pressed state of the toggle changes.\n     */\n    readonly onPressedChange = output<boolean>();\n\n    protected togglePressed(): void {\n        if (!this.disabled()) {\n            this.pressed.set(!this.pressed());\n            this.onPressedChange.emit(this.pressed());\n        }\n    }\n\n    private readonly accessorDisabled = signal(false);\n\n    private onChange: ((value: any) => void) | undefined;\n    private onTouched: (() => void) | undefined;\n\n    /** @ignore */\n    writeValue(value: any): void {\n        this.pressed.set(value);\n    }\n\n    /** @ignore */\n    registerOnChange(fn: (value: any) => void): void {\n        this.onChange = fn;\n    }\n\n    /** @ignore */\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    /** @ignore */\n    setDisabledState(isDisabled: boolean): void {\n        this.accessorDisabled.set(isDisabled);\n    }\n}\n",
+            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    computed,\n    Directive,\n    forwardRef,\n    input,\n    model,\n    output,\n    OutputEmitterRef,\n    signal\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport interface ToggleProps {\n    /**\n     * The controlled state of the toggle.\n     */\n    pressed?: boolean;\n\n    /**\n     * The state of the toggle when initially rendered. Use `defaultPressed`\n     * if you do not need to control the state of the toggle.\n     * @defaultValue false\n     */\n    defaultPressed?: boolean;\n\n    /**\n     * The callback that fires when the state of the toggle changes.\n     */\n    onPressedChange?: OutputEmitterRef<boolean>;\n\n    /**\n     * Whether the toggle is disabled.\n     * @defaultValue false\n     */\n    disabled?: boolean;\n}\n\nexport type DataState = 'on' | 'off';\n\nexport const TOGGLE_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => RdxToggleDirective),\n    multi: true\n};\n\n@Directive({\n    selector: '[rdxToggle]',\n    exportAs: 'rdxToggle',\n    standalone: true,\n    providers: [TOGGLE_VALUE_ACCESSOR],\n    host: {\n        '[attr.aria-pressed]': 'pressed()',\n        '[attr.data-state]': 'dataState()',\n        '[attr.data-disabled]': 'disabledState() ? \"\" : undefined',\n        '[disabled]': 'disabledState()',\n\n        '(click)': 'togglePressed()'\n    }\n})\nexport class RdxToggleDirective implements ControlValueAccessor {\n    /**\n     * The pressed state of the toggle when it is initially rendered.\n     * Use when you do not need to control its pressed state.\n     */\n    readonly defaultPressed = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * The controlled pressed state of the toggle.\n     * Must be used in conjunction with `onPressedChange`.\n     */\n    readonly pressed = model<boolean>(this.defaultPressed());\n\n    /**\n     * When true, prevents the user from interacting with the toggle.\n     */\n    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /** @ignore */\n    readonly disabledState = computed(() => this.disabled() || this.accessorDisabled());\n\n    protected readonly dataState = computed<DataState>(() => {\n        return this.pressed() ? 'on' : 'off';\n    });\n\n    /**\n     * Event handler called when the pressed state of the toggle changes.\n     */\n    readonly onPressedChange = output<boolean>();\n\n    protected togglePressed(): void {\n        if (!this.disabled()) {\n            this.pressed.set(!this.pressed());\n            this.onChange(this.pressed());\n            this.onPressedChange.emit(this.pressed());\n        }\n    }\n\n    private readonly accessorDisabled = signal(false);\n\n    private onChange: (value: any) => void = () => {};\n    /** @ignore */\n    onTouched: (() => void) | undefined;\n\n    /** @ignore */\n    writeValue(value: any): void {\n        this.pressed.set(value);\n    }\n\n    /** @ignore */\n    registerOnChange(fn: (value: any) => void): void {\n        this.onChange = fn;\n    }\n\n    /** @ignore */\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    /** @ignore */\n    setDisabledState(isDisabled: boolean): void {\n        this.accessorDisabled.set(isDisabled);\n    }\n}\n",
             "properties": [
                 {
                     "name": "defaultPressed",
@@ -1040,200 +1040,6 @@
             },
             "extends": [],
             "type": "injectable"
-        },
-        {
-            "name": "RdxTabsContextService",
-            "id": "injectable-RdxTabsContextService-829943bf2fa6ac0530d53f4c37a83b606a8e51880e754f4283d0008b4cec9b22f70caeb3286830d19ca67730a60d12a5d6262daf2e3a347fc8a0177117184abc",
-            "file": "tabs/src/tabs-context.service.ts",
-            "properties": [
-                {
-                    "name": "activationMode$",
-                    "defaultValue": "computed(() => this.activationMode())",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 18,
-                    "modifierKind": [
-                        148
-                    ]
-                },
-                {
-                    "name": "dir$",
-                    "defaultValue": "computed(() => this.dir())",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 17,
-                    "modifierKind": [
-                        148
-                    ]
-                },
-                {
-                    "name": "orientation$",
-                    "defaultValue": "computed(() => this.orientation())",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 16,
-                    "modifierKind": [
-                        148
-                    ]
-                },
-                {
-                    "name": "value$",
-                    "defaultValue": "computed(() => this.value())",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 15,
-                    "modifierKind": [
-                        148
-                    ]
-                }
-            ],
-            "methods": [
-                {
-                    "name": "getBaseId",
-                    "args": [],
-                    "optional": false,
-                    "returnType": "string",
-                    "typeParameters": [],
-                    "line": 36,
-                    "deprecated": false,
-                    "deprecationMessage": ""
-                },
-                {
-                    "name": "setActivationMode",
-                    "args": [
-                        {
-                            "name": "mode",
-                            "type": "string",
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 32,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "jsdoctags": [
-                        {
-                            "name": "mode",
-                            "type": "string",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "tagName": {
-                                "text": "param"
-                            }
-                        }
-                    ]
-                },
-                {
-                    "name": "setDir",
-                    "args": [
-                        {
-                            "name": "dir",
-                            "type": "string",
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 28,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "jsdoctags": [
-                        {
-                            "name": "dir",
-                            "type": "string",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "tagName": {
-                                "text": "param"
-                            }
-                        }
-                    ]
-                },
-                {
-                    "name": "setOrientation",
-                    "args": [
-                        {
-                            "name": "orientation",
-                            "type": "string",
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 24,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "jsdoctags": [
-                        {
-                            "name": "orientation",
-                            "type": "string",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "tagName": {
-                                "text": "param"
-                            }
-                        }
-                    ]
-                },
-                {
-                    "name": "setValue",
-                    "args": [
-                        {
-                            "name": "value",
-                            "type": "string",
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 20,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "jsdoctags": [
-                        {
-                            "name": "value",
-                            "type": "string",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "tagName": {
-                                "text": "param"
-                            }
-                        }
-                    ]
-                }
-            ],
-            "deprecated": false,
-            "deprecationMessage": "",
-            "description": "",
-            "rawdescription": "\n",
-            "sourceCode": "import { computed, Injectable, InjectionToken, signal } from '@angular/core';\n\nexport const TABS_CONTEXT_TOKEN = new InjectionToken<RdxTabsContextService>('TabsContext');\n\n@Injectable({\n    providedIn: 'root'\n})\nexport class RdxTabsContextService {\n    private baseId = this.generateId();\n    private value = signal<string | undefined>(undefined);\n    private orientation = signal<string>('horizontal');\n    private dir = signal<string | undefined>(undefined);\n    private activationMode = signal<string>('automatic');\n\n    readonly value$ = computed(() => this.value());\n    readonly orientation$ = computed(() => this.orientation());\n    readonly dir$ = computed(() => this.dir());\n    readonly activationMode$ = computed(() => this.activationMode());\n\n    setValue(value: string) {\n        this.value.set(value);\n    }\n\n    setOrientation(orientation: string) {\n        this.orientation.set(orientation);\n    }\n\n    setDir(dir: string) {\n        this.dir.set(dir);\n    }\n\n    setActivationMode(mode: string) {\n        this.activationMode.set(mode);\n    }\n\n    getBaseId() {\n        return this.baseId;\n    }\n\n    private generateId() {\n        return `tabs-${Math.random().toString(36).substr(2, 9)}`;\n    }\n}\n",
-            "extends": [],
-            "type": "injectable"
         }
     ],
     "guards": [],
@@ -11498,12 +11304,12 @@
         },
         {
             "name": "RdxTabsContentDirective",
-            "id": "directive-RdxTabsContentDirective-ebeccadad3160a54fb05df3e6ee43c37129577b314291433dc7a75002740e273a60e90806bd88e5f5521c7770fe2edf6d83cc949416711b20dba8c009cee9a5c",
+            "id": "directive-RdxTabsContentDirective-12e369dbb7e573ac327a76e4ddf2eedb215f5532e64bdabe12bc3458bddc54f7397f40b1ae2e7db2b6f3275308ddc7ca450a0d075c3e38618bece700e3e320fe",
             "file": "tabs/src/tabs-content.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { computed, Directive, inject, input } from '@angular/core';\nimport { TABS_CONTEXT_TOKEN } from './tabs-context.service';\n\n@Directive({\n    selector: '[rdxTabsContent]',\n    standalone: true,\n    host: {\n        role: 'tabpanel',\n        tabindex: '0',\n        '[id]': 'tabsContext.getBaseId()',\n        '[attr.aria-labelledby]': 'tabsContext.getBaseId()',\n        '[attr.data-state]': 'selected() ? \"active\" : \"inactive\"',\n        '[attr.data-orientation]': 'tabsContext.orientation$()',\n        '[hidden]': '!selected()'\n    }\n})\nexport class RdxTabsContentDirective {\n    protected readonly tabsContext = inject(TABS_CONTEXT_TOKEN);\n\n    readonly value = input.required<string>();\n\n    protected readonly selected = computed(() => this.tabsContext.value$() === this.value());\n}\n",
+            "sourceCode": "import { computed, Directive, inject, input } from '@angular/core';\nimport { RDX_TABS_ROOT_TOKEN } from './tabs-root.directive';\nimport { makeContentId, makeTriggerId } from './utils';\n\n@Directive({\n    selector: '[rdxTabsContent]',\n    standalone: true,\n    host: {\n        role: 'tabpanel',\n        tabindex: '0',\n        '[id]': 'contentId()',\n        '[attr.aria-labelledby]': 'triggerId()',\n        '[attr.data-state]': 'selected() ? \"active\" : \"inactive\"',\n        '[attr.data-orientation]': 'tabsContext.orientation()',\n        '[hidden]': '!selected()'\n    }\n})\nexport class RdxTabsContentDirective {\n    protected readonly tabsContext = inject(RDX_TABS_ROOT_TOKEN);\n\n    /**\n     * A unique value that associates the content with a trigger.\n     */\n    readonly value = input.required<string>();\n\n    protected readonly contentId = computed(() => makeContentId(this.tabsContext.getBaseId(), this.value()));\n    protected readonly triggerId = computed(() => makeTriggerId(this.tabsContext.getBaseId(), this.value()));\n\n    protected readonly selected = computed(() => this.tabsContext.value() === this.value());\n}\n",
             "selector": "[rdxTabsContent]",
             "providers": [],
             "hostDirectives": [],
@@ -11516,8 +11322,9 @@
                     "type": "",
                     "indexKey": "",
                     "optional": false,
-                    "description": "",
-                    "line": 20,
+                    "description": "<p>A unique value that associates the content with a trigger.</p>\n",
+                    "line": 24,
+                    "rawdescription": "\n\nA unique value that associates the content with a trigger.\n",
                     "modifierKind": [
                         148
                     ],
@@ -11530,16 +11337,31 @@
             "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [
+                {
+                    "name": "contentId",
+                    "defaultValue": "computed(() => makeContentId(this.tabsContext.getBaseId(), this.value()))",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 26,
+                    "modifierKind": [
+                        124,
+                        148
+                    ]
+                },
                 {
                     "name": "selected",
-                    "defaultValue": "computed(() => this.tabsContext.value$() === this.value())",
+                    "defaultValue": "computed(() => this.tabsContext.value() === this.value())",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 22,
+                    "line": 29,
                     "modifierKind": [
                         124,
                         148
@@ -11547,28 +11369,44 @@
                 },
                 {
                     "name": "tabsContext",
-                    "defaultValue": "inject(TABS_CONTEXT_TOKEN)",
+                    "defaultValue": "inject(RDX_TABS_ROOT_TOKEN)",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 18,
+                    "line": 19,
                     "modifierKind": [
                         124,
                         148
                     ]
                 },
                 {
-                    "name": "value",
+                    "name": "triggerId",
+                    "defaultValue": "computed(() => makeTriggerId(this.tabsContext.getBaseId(), this.value()))",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 20,
+                    "line": 27,
+                    "modifierKind": [
+                        124,
+                        148
+                    ]
+                },
+                {
+                    "name": "value",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>A unique value that associates the content with a trigger.</p>\n",
+                    "line": 24,
+                    "rawdescription": "\n\nA unique value that associates the content with a trigger.\n",
                     "modifierKind": [
                         148
                     ],
@@ -11580,15 +11418,25 @@
         },
         {
             "name": "RdxTabsListDirective",
-            "id": "directive-RdxTabsListDirective-7a11999b6bea315ceb313731abe403cb7bd80fe4e6c6ff1aeec93b5de5f2de9c3c9ed213bc1125b37c618cd5273d70a6a2d954b781aebfa700747cc0d3970fbf",
+            "id": "directive-RdxTabsListDirective-34f2b628270e0cd2ad740157dcc9a9c43be8462624b2d5d420ebb7edf81a79327f8389c2a8cbfb256d599d06ba79bee10b1d879e5d63d01a710b87444fca33e2",
             "file": "tabs/src/tabs-list.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { Directive, inject } from '@angular/core';\nimport { TABS_CONTEXT_TOKEN } from './tabs-context.service';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\ninterface TabsListProps {\n    // When true, keyboard navigation will loop from last tab to first, and vice versa.\n    loop?: boolean;\n}\n\n@Directive({\n    selector: '[rdxTabsList]',\n    standalone: true,\n    host: {\n        role: 'tablist',\n        '[attr.aria-orientation]': 'tabsContext.orientation$()',\n        '[attr.data-orientation]': 'tabsContext.orientation$()'\n    }\n})\nexport class RdxTabsListDirective {\n    protected readonly tabsContext = inject(TABS_CONTEXT_TOKEN);\n}\n",
+            "sourceCode": "import { Directive, inject } from '@angular/core';\nimport { RdxRovingFocusGroupDirective } from '@radix-ng/primitives/roving-focus';\nimport { RDX_TABS_ROOT_TOKEN } from './tabs-root.directive';\n\nexport interface TabsListProps {\n    // When true, keyboard navigation will loop from last tab to first, and vice versa.\n    loop?: boolean;\n}\n\n@Directive({\n    selector: '[rdxTabsList]',\n    standalone: true,\n    hostDirectives: [{ directive: RdxRovingFocusGroupDirective, inputs: ['dir', 'orientation', 'loop'] }],\n    host: {\n        role: 'tablist',\n        '[attr.aria-orientation]': 'tabsContext.orientation()',\n        '[attr.data-orientation]': 'tabsContext.orientation()'\n    }\n})\nexport class RdxTabsListDirective {\n    protected readonly tabsContext = inject(RDX_TABS_ROOT_TOKEN);\n}\n",
             "selector": "[rdxTabsList]",
             "providers": [],
-            "hostDirectives": [],
+            "hostDirectives": [
+                {
+                    "name": "RdxRovingFocusGroupDirective",
+                    "inputs": [
+                        "dir",
+                        "orientation",
+                        "loop"
+                    ],
+                    "outputs": []
+                }
+            ],
             "standalone": true,
             "inputsClass": [],
             "outputsClass": [],
@@ -11599,14 +11447,14 @@
             "propertiesClass": [
                 {
                     "name": "tabsContext",
-                    "defaultValue": "inject(TABS_CONTEXT_TOKEN)",
+                    "defaultValue": "inject(RDX_TABS_ROOT_TOKEN)",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 20,
+                    "line": 21,
                     "modifierKind": [
                         124,
                         148
@@ -11618,17 +11466,17 @@
         },
         {
             "name": "RdxTabsRootDirective",
-            "id": "directive-RdxTabsRootDirective-cb973df3b131eccc24e06ac6a988beee692202e0d9312785cdec614ab311c7b6d97c038db4c9878bc406b6b7fc113c593d260a6af703907f4f068dd4ccfbcf83",
+            "id": "directive-RdxTabsRootDirective-baff198254363f5c320588a6b183d9d28b3c2d81a08ca674044b906fc214c2cb1405e91a11cefa6e656aaad448987ad4b828f83c6dbaff25334d0f8a5eb26ac9",
             "file": "tabs/src/tabs-root.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { Directive, effect, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';\nimport { RdxTabsContextService, TABS_CONTEXT_TOKEN } from './tabs-context.service';\n\nexport interface TabsProps {\n    /** The value for the selected tab, if controlled */\n    value?: string;\n    /** The value of the tab to select by default, if uncontrolled */\n    defaultValue?: string;\n    /** A function called when a new tab is selected */\n    onValueChange?: (value: string) => void;\n    /**\n     * The orientation the tabs are layed out.\n     * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n     * @defaultValue horizontal\n     */\n    orientation?: string;\n    /**\n     * The direction of navigation between toolbar items.\n     */\n    dir?: string;\n    /**\n     * Whether a tab is activated automatically or manually.\n     * @defaultValue automatic\n     * */\n    activationMode?: 'automatic' | 'manual';\n}\n\n@Directive({\n    selector: '[rdxTabsRoot]',\n    standalone: true,\n    providers: [{ provide: TABS_CONTEXT_TOKEN, useExisting: RdxTabsContextService }],\n    host: {\n        '[attr.data-orientation]': 'orientation',\n        '[attr.dir]': 'dir'\n    }\n})\nexport class RdxTabsRootDirective implements OnInit {\n    private readonly tabsContext = inject(TABS_CONTEXT_TOKEN);\n\n    @Input() value?: string;\n    @Input() defaultValue?: string;\n    @Input() orientation = 'horizontal';\n    @Input() dir?: string;\n\n    // Event handler called when the value changes.\n    @Output() onValueChange = new EventEmitter<string>();\n\n    constructor() {\n        effect(() => {\n            const value = this.tabsContext.value$();\n            if (value !== undefined) {\n                this.onValueChange.emit(value);\n            }\n        });\n    }\n\n    ngOnInit() {\n        this.tabsContext.setOrientation(this.orientation);\n\n        if (this.dir) {\n            this.tabsContext.setDir(this.dir);\n        }\n\n        if (this.value) {\n            this.tabsContext.setValue(this.value);\n        } else if (this.defaultValue) {\n            this.tabsContext.setValue(this.defaultValue);\n        }\n    }\n}\n",
+            "sourceCode": "import { Directive, InjectionToken, input, model, OnInit, output } from '@angular/core';\n\nexport interface TabsProps {\n    /** The value for the selected tab, if controlled */\n    value?: string;\n    /** The value of the tab to select by default, if uncontrolled */\n    defaultValue?: string;\n    /** A function called when a new tab is selected */\n    onValueChange?: (value: string) => void;\n    /**\n     * The orientation the tabs are layed out.\n     * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n     * @defaultValue horizontal\n     */\n    orientation?: string;\n    /**\n     * The direction of navigation between toolbar items.\n     */\n    dir?: string;\n    /**\n     * Whether a tab is activated automatically or manually.\n     * @defaultValue automatic\n     * */\n    activationMode?: 'automatic' | 'manual';\n}\n\nexport type DataOrientation = 'vertical' | 'horizontal';\n\nexport const RDX_TABS_ROOT_TOKEN = new InjectionToken<RdxTabsRootDirective>('RdxTabsRootDirective');\n\n@Directive({\n    selector: '[rdxTabsRoot]',\n    standalone: true,\n    providers: [\n        { provide: RDX_TABS_ROOT_TOKEN, useExisting: RdxTabsRootDirective }],\n    host: {\n        '[attr.data-orientation]': 'orientation()',\n        '[attr.dir]': 'dir()'\n    }\n})\nexport class RdxTabsRootDirective implements OnInit {\n    /**\n     * The controlled value of the tab to activate. Should be used in conjunction with `onValueChange`.\n     */\n    readonly value = model<string>();\n\n    readonly defaultValue = input<string>();\n\n    /**\n     * When automatic, tabs are activated when receiving focus. When manual, tabs are activated when clicked.\n     */\n    readonly activationMode = input<'automatic' | 'manual'>('automatic');\n\n    /**\n     * The orientation of the component.\n     */\n    readonly orientation = input<DataOrientation>('horizontal');\n\n    readonly dir = input<string>('ltr');\n\n    /**\n     * Event handler called when the value changes.\n     */\n    readonly onValueChange = output<string>();\n\n    ngOnInit() {\n        if (this.defaultValue()) {\n            this.value.set(this.defaultValue());\n        }\n    }\n\n    select(value: string) {\n        this.value.set(value);\n        this.onValueChange.emit(value);\n    }\n\n    /** @ignore */\n    getBaseId() {\n        return `tabs-${Math.random().toString(36).substr(2, 9)}`;\n    }\n}\n",
             "selector": "[rdxTabsRoot]",
             "providers": [
                 {
-                    "name": "{ provide: TABS_CONTEXT_TOKEN, useExisting: RdxTabsContextService }",
-                    "type": "injectable"
+                    "name": "{ provide: RDX_TABS_ROOT_TOKEN, useExisting: RdxTabsRootDirective }",
+                    "type": "directive"
                 }
             ],
             "hostDirectives": [],
@@ -11638,76 +11486,183 @@
                     "name": "defaultValue",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 41,
-                    "type": "string",
-                    "decorators": []
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 47,
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
+                },
+                {
+                    "name": "value",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>The controlled value of the tab to activate. Should be used in conjunction with <code>onValueChange</code>.</p>\n",
+                    "line": 45,
+                    "rawdescription": "\n\nThe controlled value of the tab to activate. Should be used in conjunction with `onValueChange`.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
+                }
+            ],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [
+                {
+                    "name": "activationMode",
+                    "defaultValue": "input<'automatic' | 'manual'>('automatic')",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>When automatic, tabs are activated when receiving focus. When manual, tabs are activated when clicked.</p>\n",
+                    "line": 52,
+                    "rawdescription": "\n\nWhen automatic, tabs are activated when receiving focus. When manual, tabs are activated when clicked.\n",
+                    "modifierKind": [
+                        148
+                    ]
+                },
+                {
+                    "name": "defaultValue",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 47,
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
                     "name": "dir",
+                    "defaultValue": "input<string>('ltr')",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 43,
-                    "type": "string",
-                    "decorators": []
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 59,
+                    "modifierKind": [
+                        148
+                    ]
+                },
+                {
+                    "name": "onValueChange",
+                    "defaultValue": "output<string>()",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Event handler called when the value changes.</p>\n",
+                    "line": 64,
+                    "rawdescription": "\n\nEvent handler called when the value changes.\n",
+                    "modifierKind": [
+                        148
+                    ]
                 },
                 {
                     "name": "orientation",
-                    "defaultValue": "'horizontal'",
+                    "defaultValue": "input<DataOrientation>('horizontal')",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 42,
-                    "type": "string",
-                    "decorators": []
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>The orientation of the component.</p>\n",
+                    "line": 57,
+                    "rawdescription": "\n\nThe orientation of the component.\n",
+                    "modifierKind": [
+                        148
+                    ]
                 },
                 {
                     "name": "value",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 40,
-                    "type": "string",
-                    "decorators": []
+                    "type": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>The controlled value of the tab to activate. Should be used in conjunction with <code>onValueChange</code>.</p>\n",
+                    "line": 45,
+                    "rawdescription": "\n\nThe controlled value of the tab to activate. Should be used in conjunction with `onValueChange`.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 }
             ],
-            "outputsClass": [
+            "methodsClass": [
                 {
-                    "name": "onValueChange",
-                    "defaultValue": "new EventEmitter<string>()",
+                    "name": "select",
+                    "args": [
+                        {
+                            "name": "value",
+                            "type": "string",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 72,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 46,
-                    "type": "EventEmitter"
+                    "jsdoctags": [
+                        {
+                            "name": "value",
+                            "type": "string",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
                 }
             ],
-            "deprecated": false,
-            "deprecationMessage": "",
-            "hostBindings": [],
-            "hostListeners": [],
-            "propertiesClass": [],
-            "methodsClass": [],
             "extends": [],
             "implements": [
                 "OnInit"
-            ],
-            "constructorObj": {
-                "name": "constructor",
-                "description": "",
-                "deprecated": false,
-                "deprecationMessage": "",
-                "args": [],
-                "line": 46
-            }
+            ]
         },
         {
             "name": "RdxTabsTriggerDirective",
-            "id": "directive-RdxTabsTriggerDirective-741265fd17e23faf9ceaa955c3ca0fbaaa9725937c2c63c739a111674e9ff30022443985f79bc6eb09fbbfe7fb7c2f59add15a9b7f55baf2d847c98ebabee7e5",
+            "id": "directive-RdxTabsTriggerDirective-2783e0cafa5f228d4e6fe9e75f1f19161eb9e679712510d7cfe8d0d52c1197ffa5ad89c82845455dd1cb27b4a9881565648b1fac9047860443efbd16893ece00",
             "file": "tabs/src/tabs-trigger.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, computed, Directive, inject, input, InputSignalWithTransform } from '@angular/core';\nimport { TABS_CONTEXT_TOKEN } from './tabs-context.service';\n\ninterface TabsTriggerProps {\n    // When true, prevents the user from interacting with the tab.\n    disabled: InputSignalWithTransform<boolean, BooleanInput>;\n}\n\n@Directive({\n    selector: '[rdxTabsTrigger]',\n    standalone: true,\n    host: {\n        type: 'button',\n        role: 'tab',\n        '[id]': 'triggerId',\n        '[attr.aria-selected]': 'selected()',\n        '[attr.aria-controls]': 'contentId()',\n        '[attr.data-disabled]': \"disabled() ? '' : undefined\",\n        '[attr.data-state]': \"selected() ? 'active' : 'inactive'\",\n        '(mousedown)': 'onMouseDown($event)',\n        '(keydown)': 'onKeyDown($event)'\n    }\n})\nexport class RdxTabsTriggerDirective implements TabsTriggerProps {\n    protected readonly tabsContext = inject(TABS_CONTEXT_TOKEN);\n\n    // A unique value that associates the trigger with a content.\n    readonly value = input.required<string>();\n\n    // When true, prevents the user from interacting with the tab.\n    readonly disabled = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute\n    });\n\n    protected readonly contentId = computed(() => `${this.tabsContext.getBaseId()}-content-${this.value()}`);\n    protected readonly triggerId = computed(() => `${this.tabsContext.getBaseId()}-trigger-${this.value}`);\n\n    protected readonly selected = computed(() => this.tabsContext.value$() === this.value());\n\n    protected onMouseDown(event: MouseEvent) {\n        if (!this.disabled() && event.button === 0 && !event.ctrlKey) {\n            this.tabsContext?.setValue(this.value());\n        } else {\n            // prevent focus to avoid accidental activation\n            event.preventDefault();\n        }\n    }\n\n    protected onKeyDown(event: KeyboardEvent) {\n        if ([' ', 'Enter'].includes(event.key)) {\n            this.tabsContext?.setValue(this.value());\n        }\n    }\n}\n",
+            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, computed, Directive, effect, inject, input, InputSignalWithTransform } from '@angular/core';\nimport { RdxRovingFocusItemDirective } from '@radix-ng/primitives/roving-focus';\nimport { RDX_TABS_ROOT_TOKEN } from './tabs-root.directive';\nimport { makeContentId, makeTriggerId } from './utils';\n\ninterface TabsTriggerProps {\n    // When true, prevents the user from interacting with the tab.\n    disabled: InputSignalWithTransform<boolean, BooleanInput>;\n}\n\n@Directive({\n    selector: '[rdxTabsTrigger]',\n    standalone: true,\n    hostDirectives: [\n        {\n            directive: RdxRovingFocusItemDirective,\n            inputs: ['focusable', 'active', 'allowShiftKey']\n        }\n    ],\n\n    host: {\n        type: 'button',\n        role: 'tab',\n        '[id]': 'triggerId()',\n        '[attr.aria-selected]': 'isSelected()',\n        '[attr.aria-controls]': 'contentId()',\n        '[attr.data-disabled]': \"disabled() ? '' : undefined\",\n        '[disabled]': 'disabled()',\n        '[attr.data-state]': \"isSelected() ? 'active' : 'inactive'\",\n        '[attr.data-orientation]': 'tabsContext.orientation()',\n        '(mousedown)': 'onMouseDown($event)',\n        '(keydown)': 'onKeyDown($event)',\n        '(focus)': 'onFocus()'\n    }\n})\nexport class RdxTabsTriggerDirective implements TabsTriggerProps {\n    private readonly rdxRovingFocusItemDirective = inject(RdxRovingFocusItemDirective);\n\n    protected readonly tabsContext = inject(RDX_TABS_ROOT_TOKEN);\n\n    /**\n     * A unique value that associates the trigger with a content.\n     */\n    readonly value = input.required<string>();\n\n    /**\n     * When true, prevents the user from interacting with the tab.\n     */\n    readonly disabled = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute\n    });\n\n    protected readonly contentId = computed(() => makeContentId(this.tabsContext.getBaseId(), this.value()));\n    protected readonly triggerId = computed(() => makeTriggerId(this.tabsContext.getBaseId(), this.value()));\n\n    protected readonly isSelected = computed(() => this.tabsContext.value() === this.value());\n\n    constructor() {\n        effect(() => (this.rdxRovingFocusItemDirective.active = this.isSelected()));\n    }\n\n    protected onMouseDown(event: MouseEvent) {\n        // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n        // but not when the control key is pressed (avoiding MacOS right click)\n        if (!this.disabled() && event.button === 0 && !event.ctrlKey) {\n            this.tabsContext?.select(this.value());\n        } else {\n            // prevent focus to avoid accidental activation\n            event.preventDefault();\n        }\n    }\n\n    protected onKeyDown(event: KeyboardEvent) {\n        if ([' ', 'Enter'].includes(event.key)) {\n            this.tabsContext?.select(this.value());\n        }\n    }\n\n    protected onFocus() {\n        const isAutomaticActivation = this.tabsContext.activationMode() !== 'manual';\n        if (!this.isSelected() && !this.disabled() && isAutomaticActivation) {\n            this.tabsContext?.select(this.value());\n        }\n    }\n}\n",
             "selector": "[rdxTabsTrigger]",
             "providers": [],
-            "hostDirectives": [],
+            "hostDirectives": [
+                {
+                    "name": "RdxRovingFocusItemDirective",
+                    "inputs": [
+                        "focusable",
+                        "active",
+                        "allowShiftKey"
+                    ],
+                    "outputs": []
+                }
+            ],
             "standalone": true,
             "inputsClass": [
                 {
@@ -11717,8 +11672,9 @@
                     "type": "",
                     "indexKey": "",
                     "optional": false,
-                    "description": "",
-                    "line": 29,
+                    "description": "<p>A unique value that associates the trigger with a content.</p>\n",
+                    "line": 45,
+                    "rawdescription": "\n\nA unique value that associates the trigger with a content.\n",
                     "modifierKind": [
                         148
                     ],
@@ -11733,14 +11689,14 @@
             "propertiesClass": [
                 {
                     "name": "contentId",
-                    "defaultValue": "computed(() => `${this.tabsContext.getBaseId()}-content-${this.value()}`)",
+                    "defaultValue": "computed(() => makeContentId(this.tabsContext.getBaseId(), this.value()))",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 36,
+                    "line": 54,
                     "modifierKind": [
                         124,
                         148
@@ -11754,22 +11710,23 @@
                     "type": "",
                     "indexKey": "",
                     "optional": false,
-                    "description": "",
-                    "line": 32,
+                    "description": "<p>When true, prevents the user from interacting with the tab.</p>\n",
+                    "line": 50,
+                    "rawdescription": "\n\nWhen true, prevents the user from interacting with the tab.\n",
                     "modifierKind": [
                         148
                     ]
                 },
                 {
-                    "name": "selected",
-                    "defaultValue": "computed(() => this.tabsContext.value$() === this.value())",
+                    "name": "isSelected",
+                    "defaultValue": "computed(() => this.tabsContext.value() === this.value())",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 39,
+                    "line": 57,
                     "modifierKind": [
                         124,
                         148
@@ -11777,14 +11734,14 @@
                 },
                 {
                     "name": "tabsContext",
-                    "defaultValue": "inject(TABS_CONTEXT_TOKEN)",
+                    "defaultValue": "inject(RDX_TABS_ROOT_TOKEN)",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 26,
+                    "line": 40,
                     "modifierKind": [
                         124,
                         148
@@ -11792,14 +11749,14 @@
                 },
                 {
                     "name": "triggerId",
-                    "defaultValue": "computed(() => `${this.tabsContext.getBaseId()}-trigger-${this.value}`)",
+                    "defaultValue": "computed(() => makeTriggerId(this.tabsContext.getBaseId(), this.value()))",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 37,
+                    "line": 55,
                     "modifierKind": [
                         124,
                         148
@@ -11812,8 +11769,9 @@
                     "type": "",
                     "indexKey": "",
                     "optional": false,
-                    "description": "",
-                    "line": 29,
+                    "description": "<p>A unique value that associates the trigger with a content.</p>\n",
+                    "line": 45,
+                    "rawdescription": "\n\nA unique value that associates the trigger with a content.\n",
                     "modifierKind": [
                         148
                     ],
@@ -11821,6 +11779,19 @@
                 }
             ],
             "methodsClass": [
+                {
+                    "name": "onFocus",
+                    "args": [],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 80,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "modifierKind": [
+                        124
+                    ]
+                },
                 {
                     "name": "onKeyDown",
                     "args": [
@@ -11834,7 +11805,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 50,
+                    "line": 74,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -11865,7 +11836,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 41,
+                    "line": 63,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -11887,16 +11858,24 @@
             "extends": [],
             "implements": [
                 "TabsTriggerProps"
-            ]
+            ],
+            "constructorObj": {
+                "name": "constructor",
+                "description": "",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "args": [],
+                "line": 57
+            }
         },
         {
             "name": "RdxToggleDirective",
-            "id": "directive-RdxToggleDirective-323b1f959dbd66f0c041c0fe424b67f98ff73aca3d18e51728e8848debd483b2e86349778e3ec29b36be52faa3e891ec65c5a9f55f67ed7043ff8277c4ee78f3",
+            "id": "directive-RdxToggleDirective-596f9fc6c92b130f02431a3a95848dba07cc638e90f9f409ee44fdd2dae81e83ca3dbf2ed99f5057f3e8f9246fdf96ded627d14302f01544e9b9557e48dbb8b5",
             "file": "toggle/src/toggle.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    computed,\n    Directive,\n    forwardRef,\n    input,\n    model,\n    output,\n    OutputEmitterRef,\n    signal\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport interface ToggleProps {\n    /**\n     * The controlled state of the toggle.\n     */\n    pressed?: boolean;\n\n    /**\n     * The state of the toggle when initially rendered. Use `defaultPressed`\n     * if you do not need to control the state of the toggle.\n     * @defaultValue false\n     */\n    defaultPressed?: boolean;\n\n    /**\n     * The callback that fires when the state of the toggle changes.\n     */\n    onPressedChange?: OutputEmitterRef<boolean>;\n\n    /**\n     * Whether the toggle is disabled.\n     * @defaultValue false\n     */\n    disabled?: boolean;\n}\n\nexport type DataState = 'on' | 'off';\n\nexport const TOGGLE_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => RdxToggleDirective),\n    multi: true\n};\n\n@Directive({\n    selector: '[rdxToggle]',\n    exportAs: 'rdxToggle',\n    standalone: true,\n    providers: [TOGGLE_VALUE_ACCESSOR],\n    host: {\n        '[attr.aria-pressed]': 'pressed()',\n        '[attr.data-state]': 'dataState()',\n        '[attr.data-disabled]': 'disabledState() ? \"\" : undefined',\n        '[disabled]': 'disabledState()',\n\n        '(click)': 'togglePressed()'\n    }\n})\nexport class RdxToggleDirective implements ControlValueAccessor {\n    /**\n     * The pressed state of the toggle when it is initially rendered.\n     * Use when you do not need to control its pressed state.\n     */\n    readonly defaultPressed = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * The controlled pressed state of the toggle.\n     * Must be used in conjunction with `onPressedChange`.\n     */\n    readonly pressed = model<boolean>(this.defaultPressed());\n\n    /**\n     * When true, prevents the user from interacting with the toggle.\n     */\n    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /** @ignore */\n    readonly disabledState = computed(() => this.disabled() || this.accessorDisabled());\n\n    protected readonly dataState = computed<DataState>(() => {\n        return this.pressed() ? 'on' : 'off';\n    });\n\n    /**\n     * Event handler called when the pressed state of the toggle changes.\n     */\n    readonly onPressedChange = output<boolean>();\n\n    protected togglePressed(): void {\n        if (!this.disabled()) {\n            this.pressed.set(!this.pressed());\n            this.onPressedChange.emit(this.pressed());\n        }\n    }\n\n    private readonly accessorDisabled = signal(false);\n\n    private onChange: ((value: any) => void) | undefined;\n    private onTouched: (() => void) | undefined;\n\n    /** @ignore */\n    writeValue(value: any): void {\n        this.pressed.set(value);\n    }\n\n    /** @ignore */\n    registerOnChange(fn: (value: any) => void): void {\n        this.onChange = fn;\n    }\n\n    /** @ignore */\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    /** @ignore */\n    setDisabledState(isDisabled: boolean): void {\n        this.accessorDisabled.set(isDisabled);\n    }\n}\n",
+            "sourceCode": "import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    computed,\n    Directive,\n    forwardRef,\n    input,\n    model,\n    output,\n    OutputEmitterRef,\n    signal\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport interface ToggleProps {\n    /**\n     * The controlled state of the toggle.\n     */\n    pressed?: boolean;\n\n    /**\n     * The state of the toggle when initially rendered. Use `defaultPressed`\n     * if you do not need to control the state of the toggle.\n     * @defaultValue false\n     */\n    defaultPressed?: boolean;\n\n    /**\n     * The callback that fires when the state of the toggle changes.\n     */\n    onPressedChange?: OutputEmitterRef<boolean>;\n\n    /**\n     * Whether the toggle is disabled.\n     * @defaultValue false\n     */\n    disabled?: boolean;\n}\n\nexport type DataState = 'on' | 'off';\n\nexport const TOGGLE_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => RdxToggleDirective),\n    multi: true\n};\n\n@Directive({\n    selector: '[rdxToggle]',\n    exportAs: 'rdxToggle',\n    standalone: true,\n    providers: [TOGGLE_VALUE_ACCESSOR],\n    host: {\n        '[attr.aria-pressed]': 'pressed()',\n        '[attr.data-state]': 'dataState()',\n        '[attr.data-disabled]': 'disabledState() ? \"\" : undefined',\n        '[disabled]': 'disabledState()',\n\n        '(click)': 'togglePressed()'\n    }\n})\nexport class RdxToggleDirective implements ControlValueAccessor {\n    /**\n     * The pressed state of the toggle when it is initially rendered.\n     * Use when you do not need to control its pressed state.\n     */\n    readonly defaultPressed = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * The controlled pressed state of the toggle.\n     * Must be used in conjunction with `onPressedChange`.\n     */\n    readonly pressed = model<boolean>(this.defaultPressed());\n\n    /**\n     * When true, prevents the user from interacting with the toggle.\n     */\n    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /** @ignore */\n    readonly disabledState = computed(() => this.disabled() || this.accessorDisabled());\n\n    protected readonly dataState = computed<DataState>(() => {\n        return this.pressed() ? 'on' : 'off';\n    });\n\n    /**\n     * Event handler called when the pressed state of the toggle changes.\n     */\n    readonly onPressedChange = output<boolean>();\n\n    protected togglePressed(): void {\n        if (!this.disabled()) {\n            this.pressed.set(!this.pressed());\n            this.onChange(this.pressed());\n            this.onPressedChange.emit(this.pressed());\n        }\n    }\n\n    private readonly accessorDisabled = signal(false);\n\n    private onChange: (value: any) => void = () => {};\n    /** @ignore */\n    onTouched: (() => void) | undefined;\n\n    /** @ignore */\n    writeValue(value: any): void {\n        this.pressed.set(value);\n    }\n\n    /** @ignore */\n    registerOnChange(fn: (value: any) => void): void {\n        this.onChange = fn;\n    }\n\n    /** @ignore */\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    /** @ignore */\n    setDisabledState(isDisabled: boolean): void {\n        this.accessorDisabled.set(isDisabled);\n    }\n}\n",
             "selector": "[rdxToggle]",
             "providers": [
                 {
@@ -12250,12 +12229,12 @@
         },
         {
             "name": "RdxToggleGroupItemDirective",
-            "id": "directive-RdxToggleGroupItemDirective-687d59a75d8d7f33d385f82fdc4bbce77cba1472dd53ad79bfb1dd48559c4ba1bc22d43207e97a0d2bda91a93cd9845a9e7906ffd2dc266f20cdaaf277ce96db",
+            "id": "directive-RdxToggleGroupItemDirective-eb9160aa46c41c750f811edfdf932366bed8f30158b87474f3e10310948fe89f855e701d3eea4f73adc9a5a228212677ec1e32b25ee9342457f4f742ca896a8a",
             "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",
+            "sourceCode": "import { FocusableOption } from '@angular/cdk/a11y';\nimport { booleanAttribute, Directive, ElementRef, inject, Input, OnChanges, SimpleChanges } from '@angular/core';\nimport { RdxToggleGroupItemToken } from './toggle-group-item.token';\nimport { injectToggleGroup } from './toggle-group.token';\n\n@Directive({\n    selector: '[rdxToggleGroupItem]',\n    exportAs: 'rdxToggleGroupItem',\n    standalone: true,\n    providers: [{ provide: RdxToggleGroupItemToken, useExisting: RdxToggleGroupItemDirective }],\n    host: {\n        role: 'radio',\n        '[attr.aria-checked]': 'checked',\n        '[attr.aria-disabled]': 'disabled || toggleGroup.disabled',\n        '[attr.aria-pressed]': 'undefined',\n\n        '[attr.data-disabled]': 'disabled || toggleGroup.disabled',\n        '[attr.data-state]': 'checked ? \"on\" : \"off\"',\n        '[attr.data-orientation]': 'toggleGroup.orientation',\n\n        '(click)': 'toggle()',\n        '(focus)': 'focus()'\n    }\n})\nexport class RdxToggleGroupItemDirective implements OnChanges, FocusableOption {\n    /**\n     * Access the toggle group.\n     * @ignore\n     */\n    protected readonly toggleGroup = injectToggleGroup();\n\n    private readonly elementRef = inject(ElementRef);\n    /**\n     * The value of this toggle button.\n     */\n    @Input({ required: true }) value!: string;\n\n    /**\n     * Whether this toggle button is disabled.\n     * @default false\n     */\n    @Input({ transform: booleanAttribute }) disabled = false;\n\n    /**\n     * Whether this toggle button is checked.\n     */\n    protected get checked(): boolean {\n        return this.toggleGroup.isSelected(this.value);\n    }\n\n    /**\n     * @ignore\n     */\n    ngOnChanges(changes: SimpleChanges): void {\n        if ('disabled' in changes) {\n            // TODO\n        }\n    }\n\n    /**\n     * @ignore\n     */\n    focus(): void {\n        this.elementRef.nativeElement.focus();\n    }\n\n    /**\n     * @ignore\n     */\n    toggle(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.toggleGroup.toggle(this.value);\n    }\n\n    /**\n     * Ensure the disabled state is propagated to the roving focus item.\n     * @internal\n     * @ignore\n     */\n    updateDisabled(): void {\n        // TODO\n    }\n}\n",
             "selector": "[rdxToggleGroupItem]",
             "providers": [
                 {
@@ -12275,16 +12254,16 @@
                     "deprecationMessage": "",
                     "jsdoctags": [
                         {
-                            "pos": 1339,
-                            "end": 1359,
+                            "pos": 1369,
+                            "end": 1389,
                             "kind": 327,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1340,
-                                "end": 1347,
+                                "pos": 1370,
+                                "end": 1377,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -12296,7 +12275,7 @@
                     ],
                     "rawdescription": "\n\nWhether this toggle button is disabled.\n",
                     "description": "<p>Whether this toggle button is disabled.</p>\n",
-                    "line": 41,
+                    "line": 42,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -12308,7 +12287,7 @@
                     "optional": false,
                     "rawdescription": "\n\nThe value of this toggle button.\n",
                     "description": "<p>The value of this toggle button.</p>\n",
-                    "line": 35,
+                    "line": 36,
                     "type": "string",
                     "decorators": []
                 }
@@ -12332,7 +12311,7 @@
                         "name": "checked",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 46,
+                        "line": 47,
                         "rawdescription": "\n\nWhether this toggle button is checked.\n",
                         "description": "<p>Whether this toggle button is checked.</p>\n"
                     }
@@ -18277,7 +18256,7 @@
         },
         {
             "name": "ToggleButtonReactiveForms",
-            "id": "component-ToggleButtonReactiveForms-3de9fa20fef6979d069e891bcadb55bc6a3f60be973ee7be5b8dd534534848138136f11618bb853a40a4b55a671148a8eea7d03d27139c48d476b9502043c468",
+            "id": "component-ToggleButtonReactiveForms-2b068b48b004a9cfc3027da407d1bbb7152b8e45ec5033cb8d71bbf5b8ee144f39666aedc1e9d1523ec3a19affae81b556bb4d0fa7c2bbaaa2da3d66f3c02efa",
             "file": "toggle/stories/toggle-forms.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -18287,7 +18266,7 @@
             "selector": "toggle-reactive-forms",
             "styleUrls": [],
             "styles": [],
-            "template": "<form [formGroup]=\"formGroup\">\n    <button class=\"Toggle\" #toggle=\"rdxToggle\" formControlName=\"pressed\" rdxToggle aria-label=\"Toggle bold\">\n        <input\n            [name]=\"'toggleDef'\"\n            [value]=\"toggle.pressed() ? 'on' : 'off'\"\n            [required]=\"false\"\n            rdxToggleVisuallyHiddenInput\n        />\n        @if (toggle.pressed()) {\n            On\n        } @else {\n            Off\n        }\n    </button>\n</form>\n",
+            "template": "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    <button class=\"Toggle\" #toggle=\"rdxToggle\" formControlName=\"pressed\" rdxToggle aria-label=\"Toggle bold\">\n        <input\n            [name]=\"'toggleDef'\"\n            [value]=\"toggle.pressed() ? 'on' : 'off'\"\n            [required]=\"false\"\n            rdxToggleVisuallyHiddenInput\n        />\n        @if (toggle.pressed()) {\n            On\n        } @else {\n            Off\n        }\n    </button>\n\n    <button class=\"Button violet\" style=\"margin-top: 8px;\" type=\"submit\">Submit</button>\n</form>\n",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -18302,10 +18281,21 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 30
+                    "line": 32
+                }
+            ],
+            "methodsClass": [
+                {
+                    "name": "onSubmit",
+                    "args": [],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 40,
+                    "deprecated": false,
+                    "deprecationMessage": ""
                 }
             ],
-            "methodsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
             "hostBindings": [],
@@ -18328,7 +18318,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { Component, OnInit } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { RdxToggleVisuallyHiddenInputDirective } from '../src/toggle-visually-hidden-input.directive';\nimport { RdxToggleDirective } from '../src/toggle.directive';\n\n@Component({\n    selector: 'toggle-reactive-forms',\n    standalone: true,\n    imports: [ReactiveFormsModule, RdxToggleDirective, RdxToggleVisuallyHiddenInputDirective],\n    styleUrl: 'toggle.styles.css',\n    template: `\n        <form [formGroup]=\"formGroup\">\n            <button class=\"Toggle\" #toggle=\"rdxToggle\" formControlName=\"pressed\" rdxToggle aria-label=\"Toggle bold\">\n                <input\n                    [name]=\"'toggleDef'\"\n                    [value]=\"toggle.pressed() ? 'on' : 'off'\"\n                    [required]=\"false\"\n                    rdxToggleVisuallyHiddenInput\n                />\n                @if (toggle.pressed()) {\n                    On\n                } @else {\n                    Off\n                }\n            </button>\n        </form>\n    `\n})\nexport class ToggleButtonReactiveForms implements OnInit {\n    formGroup!: FormGroup;\n\n    ngOnInit() {\n        this.formGroup = new FormGroup({\n            pressed: new FormControl<boolean>(true)\n        });\n    }\n}\n",
+            "sourceCode": "import { Component, OnInit } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { RdxToggleVisuallyHiddenInputDirective } from '../src/toggle-visually-hidden-input.directive';\nimport { RdxToggleDirective } from '../src/toggle.directive';\n\n@Component({\n    selector: 'toggle-reactive-forms',\n    standalone: true,\n    imports: [ReactiveFormsModule, RdxToggleDirective, RdxToggleVisuallyHiddenInputDirective],\n    styleUrl: 'toggle.styles.css',\n    template: `\n        <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n            <button class=\"Toggle\" #toggle=\"rdxToggle\" formControlName=\"pressed\" rdxToggle aria-label=\"Toggle bold\">\n                <input\n                    [name]=\"'toggleDef'\"\n                    [value]=\"toggle.pressed() ? 'on' : 'off'\"\n                    [required]=\"false\"\n                    rdxToggleVisuallyHiddenInput\n                />\n                @if (toggle.pressed()) {\n                    On\n                } @else {\n                    Off\n                }\n            </button>\n\n            <button class=\"Button violet\" style=\"margin-top: 8px;\" type=\"submit\">Submit</button>\n        </form>\n    `\n})\nexport class ToggleButtonReactiveForms implements OnInit {\n    formGroup!: FormGroup;\n\n    ngOnInit() {\n        this.formGroup = new FormGroup({\n            pressed: new FormControl<boolean>(true)\n        });\n    }\n\n    onSubmit(): void {\n        console.log(this.formGroup.value);\n    }\n}\n",
             "styleUrl": "toggle.styles.css",
             "assetsDirs": [],
             "styleUrlsData": "",
@@ -19516,21 +19506,17 @@
         },
         {
             "name": "RdxTabsModule",
-            "id": "module-RdxTabsModule-1f865d4d186ae9d9294f5407b4bb7df9e07071fb39d66b6167f8b76c8e8c6e508c93bbb75814de00213ede57ddbf7639cba3866e6aaacf82f036a3c3cb3eae6b",
+            "id": "module-RdxTabsModule-826979bdde1e7e78b2d6bff7f31c2cf2a414d7265071c61f6b8913e6ea879aa978ddb3bac97938b13bafd44a40d74a754ebc201d36882becdc9e8d68fa4403de",
             "description": "",
             "deprecationMessage": "",
             "deprecated": false,
             "file": "tabs/index.ts",
             "methods": [],
-            "sourceCode": "import { NgModule } from '@angular/core';\nimport { RdxTabsContentDirective } from './src/tabs-content.directive';\nimport { RdxTabsContextService } from './src/tabs-context.service';\nimport { RdxTabsListDirective } from './src/tabs-list.directive';\nimport { RdxTabsRootDirective } from './src/tabs-root.directive';\nimport { RdxTabsTriggerDirective } from './src/tabs-trigger.directive';\n\nexport * from './src/tabs-content.directive';\nexport * from './src/tabs-context.service';\nexport * from './src/tabs-list.directive';\nexport * from './src/tabs-root.directive';\nexport * from './src/tabs-trigger.directive';\n\nconst tabsImports = [\n    RdxTabsRootDirective,\n    RdxTabsContentDirective,\n    RdxTabsListDirective,\n    RdxTabsTriggerDirective\n];\n\n@NgModule({\n    imports: [...tabsImports],\n    exports: [...tabsImports],\n    providers: [RdxTabsContextService]\n})\nexport class RdxTabsModule {}\n",
+            "sourceCode": "import { NgModule } from '@angular/core';\nimport { RdxTabsContentDirective } from './src/tabs-content.directive';\nimport { RdxTabsListDirective } from './src/tabs-list.directive';\nimport { RdxTabsRootDirective } from './src/tabs-root.directive';\nimport { RdxTabsTriggerDirective } from './src/tabs-trigger.directive';\n\nexport * from './src/tabs-content.directive';\nexport * from './src/tabs-list.directive';\nexport * from './src/tabs-root.directive';\nexport * from './src/tabs-trigger.directive';\n\nconst tabsImports = [\n    RdxTabsRootDirective,\n    RdxTabsContentDirective,\n    RdxTabsListDirective,\n    RdxTabsTriggerDirective\n];\n\n@NgModule({\n    imports: [...tabsImports],\n    exports: [...tabsImports]\n})\nexport class RdxTabsModule {}\n",
             "children": [
                 {
                     "type": "providers",
-                    "elements": [
-                        {
-                            "name": "RdxTabsContextService"
-                        }
-                    ]
+                    "elements": []
                 },
                 {
                     "type": "declarations",
@@ -20378,6 +20364,16 @@
                 "type": "",
                 "defaultValue": "new InjectionToken<RadioGroupDirective>('RdxRadioGroup')"
             },
+            {
+                "name": "RDX_TABS_ROOT_TOKEN",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "tabs/src/tabs-root.directive.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "new InjectionToken<RdxTabsRootDirective>('RdxTabsRootDirective')"
+            },
             {
                 "name": "RdxAccordionRootToken",
                 "ctype": "miscellaneous",
@@ -20618,16 +20614,6 @@
                 "type": "[]",
                 "defaultValue": "[\n    RdxSwitchRootDirective,\n    RdxSwitchInputDirective,\n    RdxSwitchThumbDirective\n]"
             },
-            {
-                "name": "TABS_CONTEXT_TOKEN",
-                "ctype": "miscellaneous",
-                "subtype": "variable",
-                "file": "tabs/src/tabs-context.service.ts",
-                "deprecated": false,
-                "deprecationMessage": "",
-                "type": "",
-                "defaultValue": "new InjectionToken<RdxTabsContextService>('TabsContext')"
-            },
             {
                 "name": "tabsImports",
                 "ctype": "miscellaneous",
@@ -22860,6 +22846,88 @@
                     }
                 ]
             },
+            {
+                "name": "makeContentId",
+                "file": "tabs/src/utils.ts",
+                "ctype": "miscellaneous",
+                "subtype": "function",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "description": "",
+                "args": [
+                    {
+                        "name": "baseId",
+                        "type": "string",
+                        "deprecated": false,
+                        "deprecationMessage": ""
+                    },
+                    {
+                        "name": "value",
+                        "deprecated": false,
+                        "deprecationMessage": ""
+                    }
+                ],
+                "jsdoctags": [
+                    {
+                        "name": "baseId",
+                        "type": "string",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "tagName": {
+                            "text": "param"
+                        }
+                    },
+                    {
+                        "name": "value",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "tagName": {
+                            "text": "param"
+                        }
+                    }
+                ]
+            },
+            {
+                "name": "makeTriggerId",
+                "file": "tabs/src/utils.ts",
+                "ctype": "miscellaneous",
+                "subtype": "function",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "description": "",
+                "args": [
+                    {
+                        "name": "baseId",
+                        "type": "string",
+                        "deprecated": false,
+                        "deprecationMessage": ""
+                    },
+                    {
+                        "name": "value",
+                        "deprecated": false,
+                        "deprecationMessage": ""
+                    }
+                ],
+                "jsdoctags": [
+                    {
+                        "name": "baseId",
+                        "type": "string",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "tagName": {
+                            "text": "param"
+                        }
+                    },
+                    {
+                        "name": "value",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "tagName": {
+                            "text": "param"
+                        }
+                    }
+                ]
+            },
             {
                 "name": "measureCollapsingElementDimensionPx",
                 "file": "presence/src/transitions/transition.collapse.ts",
@@ -23524,6 +23592,17 @@
                 "description": "",
                 "kind": 183
             },
+            {
+                "name": "DataOrientation",
+                "ctype": "miscellaneous",
+                "subtype": "typealias",
+                "rawtype": "\"vertical\" | \"horizontal\"",
+                "file": "tabs/src/tabs-root.directive.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "description": "",
+                "kind": 192
+            },
             {
                 "name": "DataState",
                 "ctype": "miscellaneous",
@@ -25229,6 +25308,18 @@
                     "defaultValue": "new InjectionToken<RadioGroupDirective>('RdxRadioGroup')"
                 }
             ],
+            "tabs/src/tabs-root.directive.ts": [
+                {
+                    "name": "RDX_TABS_ROOT_TOKEN",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "tabs/src/tabs-root.directive.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "new InjectionToken<RdxTabsRootDirective>('RdxTabsRootDirective')"
+                }
+            ],
             "checkbox/src/checkbox.token.ts": [
                 {
                     "name": "RdxCheckboxToken",
@@ -25397,18 +25488,6 @@
                     "defaultValue": "[\n    RdxSwitchRootDirective,\n    RdxSwitchInputDirective,\n    RdxSwitchThumbDirective\n]"
                 }
             ],
-            "tabs/src/tabs-context.service.ts": [
-                {
-                    "name": "TABS_CONTEXT_TOKEN",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "tabs/src/tabs-context.service.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "new InjectionToken<RdxTabsContextService>('TabsContext')"
-                }
-            ],
             "tabs/index.ts": [
                 {
                     "name": "tabsImports",
@@ -28016,6 +28095,90 @@
                     ]
                 }
             ],
+            "tabs/src/utils.ts": [
+                {
+                    "name": "makeContentId",
+                    "file": "tabs/src/utils.ts",
+                    "ctype": "miscellaneous",
+                    "subtype": "function",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "description": "",
+                    "args": [
+                        {
+                            "name": "baseId",
+                            "type": "string",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        },
+                        {
+                            "name": "value",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "jsdoctags": [
+                        {
+                            "name": "baseId",
+                            "type": "string",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        },
+                        {
+                            "name": "value",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                },
+                {
+                    "name": "makeTriggerId",
+                    "file": "tabs/src/utils.ts",
+                    "ctype": "miscellaneous",
+                    "subtype": "function",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "description": "",
+                    "args": [
+                        {
+                            "name": "baseId",
+                            "type": "string",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        },
+                        {
+                            "name": "value",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "jsdoctags": [
+                        {
+                            "name": "baseId",
+                            "type": "string",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        },
+                        {
+                            "name": "value",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                }
+            ],
             "presence/src/transitions/transition.collapse.ts": [
                 {
                     "name": "measureCollapsingElementDimensionPx",
@@ -28691,6 +28854,19 @@
                     "kind": 193
                 }
             ],
+            "tabs/src/tabs-root.directive.ts": [
+                {
+                    "name": "DataOrientation",
+                    "ctype": "miscellaneous",
+                    "subtype": "typealias",
+                    "rawtype": "\"vertical\" | \"horizontal\"",
+                    "file": "tabs/src/tabs-root.directive.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "description": "",
+                    "kind": 192
+                }
+            ],
             "toggle/src/toggle.directive.ts": [
                 {
                     "name": "DataState",