@radix-ng/primitives 0.50.0 → 1.0.0-beta.0

package/fesm2022/radix-ng-primitives-toolbar.mjs

@@ -1,149 +1,362 @@
 import * as i0 from '@angular/core';
-import { inject, input, booleanAttribute, signal, effect, Directive, InjectionToken, NgModule } from '@angular/core';
+import { inject, input, booleanAttribute, computed, effect, Directive, ElementRef, PLATFORM_ID, DestroyRef, NgModule } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/roving-focus';
 import { RdxRovingFocusItemDirective, RdxRovingFocusGroupDirective } from '@radix-ng/primitives/roving-focus';
+import { createContext } from '@radix-ng/primitives/core';
+import { isPlatformBrowser } from '@angular/common';
 import * as i1$1 from '@radix-ng/primitives/separator';
 import { RdxSeparatorRootDirective } from '@radix-ng/primitives/separator';
-import * as i1$2 from '@radix-ng/primitives/toggle-group';
-import { RdxToggleGroupWithoutFocusDirective, RdxToggleGroupItemDirective } from '@radix-ng/primitives/toggle-group';
 
-class RdxToolbarButtonDirective {
+const [injectToolbarRootContext, provideToolbarRootContext] = createContext('RdxToolbarRootContext');
+const [injectToolbarGroupContext, provideToolbarGroupContext] = createContext('RdxToolbarGroupContext');
+
+/**
+ * A button within a toolbar.
+ *
+ * @see https://base-ui.com/react/components/toolbar
+ */
+class RdxToolbarButton {
     constructor() {
-        this.rdxRovingFocusItemDirective = inject(RdxRovingFocusItemDirective);
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.isDisabled = signal(this.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-        this.#disableChanges = effect(() => {
-            this.rdxRovingFocusItemDirective.setFocusable(!this.isDisabled());
-        }, ...(ngDevMode ? [{ debugName: "#disableChanges" }] : []));
+        this.rootContext = injectToolbarRootContext();
+        this.groupContext = injectToolbarGroupContext(true);
+        this.rovingItem = inject(RdxRovingFocusItemDirective);
+        /**
+         * Whether the button is disabled.
+         *
+         * @default false
+         */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether the button stays focusable while disabled (so it remains discoverable for keyboard
+         * and screen-reader users).
+         *
+         * @default true
+         */
+        this.focusableWhenDisabled = input(true, { ...(ngDevMode ? { debugName: "focusableWhenDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether the host is a native `<button>`. When `false`, adds `role="button"`.
+         *
+         * @default true
+         */
+        this.nativeButton = input(true, { ...(ngDevMode ? { debugName: "nativeButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @ignore Effective disabled state, combining the button, group and toolbar. */
+        this.isDisabled = computed(() => this.disabled() || (this.groupContext?.disabled() ?? false) || this.rootContext.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        // A disabled-but-focusable item stays in the roving sequence; otherwise it is removed.
+        effect(() => this.rovingItem.setFocusable(!this.isDisabled() || this.focusableWhenDisabled()));
     }
-    #disableChanges;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxToolbarButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxToolbarButtonDirective, isStandalone: true, selector: "[rdxToolbarButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective, inputs: ["focusable", "focusable"] }], ngImport: i0 }); }
+    /** @ignore */
+    onClick(event) {
+        if (this.isDisabled()) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToolbarButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxToolbarButton, isStandalone: true, selector: "[rdxToolbarButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, focusableWhenDisabled: { classPropertyName: "focusableWhenDisabled", publicName: "focusableWhenDisabled", isSignal: true, isRequired: false, transformFunction: null }, nativeButton: { classPropertyName: "nativeButton", publicName: "nativeButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.type": "nativeButton() ? \"button\" : undefined", "attr.role": "nativeButton() ? undefined : \"button\"", "attr.data-orientation": "rootContext.orientation()", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-focusable": "focusableWhenDisabled() ? \"\" : undefined", "attr.aria-disabled": "isDisabled() ? \"true\" : undefined", "attr.disabled": "isDisabled() && !focusableWhenDisabled() ? \"\" : undefined" } }, exportAs: ["rdxToolbarButton"], hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxToolbarButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToolbarButton, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxToolbarButton]',
-                    hostDirectives: [{ directive: RdxRovingFocusItemDirective, inputs: ['focusable'] }]
+                    exportAs: 'rdxToolbarButton',
+                    hostDirectives: [RdxRovingFocusItemDirective],
+                    host: {
+                        '[attr.type]': 'nativeButton() ? "button" : undefined',
+                        '[attr.role]': 'nativeButton() ? undefined : "button"',
+                        '[attr.data-orientation]': 'rootContext.orientation()',
+                        '[attr.data-disabled]': 'isDisabled() ? "" : undefined',
+                        '[attr.data-focusable]': 'focusableWhenDisabled() ? "" : undefined',
+                        '[attr.aria-disabled]': 'isDisabled() ? "true" : undefined',
+                        '[attr.disabled]': 'isDisabled() && !focusableWhenDisabled() ? "" : undefined',
+                        '(click)': 'onClick($event)'
+                    }
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], focusableWhenDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusableWhenDisabled", required: false }] }], nativeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeButton", required: false }] }] } });
 
-class RdxToolbarLinkDirective {
-    onKeyDown($event) {
-        if ($event.key === ' ')
-            $event.currentTarget?.click();
+const groupContext = () => {
+    const group = inject(RdxToolbarGroup);
+    return { disabled: group.isDisabled };
+};
+/**
+ * Groups several toolbar items together. Disabling the group disables all of its items.
+ *
+ * @see https://base-ui.com/react/components/toolbar
+ */
+class RdxToolbarGroup {
+    constructor() {
+        this.rootContext = injectToolbarRootContext();
+        /**
+         * Whether the group is disabled.
+         *
+         * @default false
+         */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @ignore Effective disabled state, combining the group and the toolbar. */
+        this.isDisabled = computed(() => this.disabled() || this.rootContext.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxToolbarLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxToolbarLinkDirective, isStandalone: true, selector: "[rdxToolbarLink]", host: { listeners: { "keydown": "onKeyDown($event)" } }, hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective, inputs: ["focusable", "focusable"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToolbarGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxToolbarGroup, isStandalone: true, selector: "[rdxToolbarGroup]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.data-orientation": "rootContext.orientation()", "attr.data-disabled": "isDisabled() ? \"\" : undefined" } }, providers: [provideToolbarGroupContext(groupContext)], exportAs: ["rdxToolbarGroup"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxToolbarLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToolbarGroup, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxToolbarLink]',
-                    hostDirectives: [{ directive: RdxRovingFocusItemDirective, inputs: ['focusable'] }],
+                    selector: '[rdxToolbarGroup]',
+                    exportAs: 'rdxToolbarGroup',
+                    providers: [provideToolbarGroupContext(groupContext)],
                     host: {
-                        '(keydown)': 'onKeyDown($event)'
+                        role: 'group',
+                        '[attr.data-orientation]': 'rootContext.orientation()',
+                        '[attr.data-disabled]': 'isDisabled() ? "" : undefined'
                     }
                 }]
-        }] });
-
-const RDX_TOOLBAR_ROOT_TOKEN = new InjectionToken('RdxToolbarRootDirective');
-function injectRootContext() {
-    return inject(RDX_TOOLBAR_ROOT_TOKEN);
-}
-function provideRootContext() {
-    return {
-        provide: RDX_TOOLBAR_ROOT_TOKEN,
-        useExisting: RdxToolbarRootDirective
-    };
-}
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
-class RdxToolbarRootDirective {
+/**
+ * A native input within a toolbar. Participates in the toolbar's roving focus while keeping native
+ * text-editing: the arrow keys move the caret within the text and only move focus to the
+ * neighbouring toolbar item once the caret is at the corresponding edge (Base UI "composite" input).
+ *
+ * @see https://base-ui.com/react/components/toolbar
+ */
+class RdxToolbarInput {
     constructor() {
-        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
-        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : []));
+        this.rootContext = injectToolbarRootContext();
+        this.groupContext = injectToolbarGroupContext(true);
+        this.rovingItem = inject(RdxRovingFocusItemDirective);
+        this.elementRef = inject(ElementRef);
+        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+        /** The initial value of the uncontrolled input. */
+        this.defaultValue = input(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the input is disabled.
+         *
+         * @default false
+         */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether the input stays focusable while disabled.
+         *
+         * @default true
+         */
+        this.focusableWhenDisabled = input(true, { ...(ngDevMode ? { debugName: "focusableWhenDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @ignore */
+        this.isDisabled = computed(() => this.disabled() || (this.groupContext?.disabled() ?? false) || this.rootContext.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.appliedDefault = false;
+        effect(() => this.rovingItem.setFocusable(!this.isDisabled() || this.focusableWhenDisabled()));
+        effect(() => {
+            const value = this.defaultValue();
+            if (!this.appliedDefault && value !== undefined) {
+                this.appliedDefault = true;
+                this.elementRef.nativeElement.value = value;
+            }
+        });
+        if (this.isBrowser) {
+            // Registered in the constructor — i.e. before the roving item's host `(keydown)` listener
+            // — so it runs first and can keep arrow keys for caret movement (via
+            // `stopImmediatePropagation`) unless the caret is at the edge, where the event is allowed
+            // to reach the roving group and move focus.
+            const element = this.elementRef.nativeElement;
+            const handler = (event) => this.handleCaretKeydown(event);
+            element.addEventListener('keydown', handler, { capture: true });
+            inject(DestroyRef).onDestroy(() => element.removeEventListener('keydown', handler, { capture: true }));
+        }
+    }
+    handleCaretKeydown(event) {
+        if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) {
+            return;
+        }
+        const horizontal = this.rootContext.orientation() === 'horizontal';
+        const previousKey = horizontal ? 'ArrowLeft' : 'ArrowUp';
+        const nextKey = horizontal ? 'ArrowRight' : 'ArrowDown';
+        const key = event.key;
+        if (key !== previousKey && key !== nextKey && key !== 'Home' && key !== 'End') {
+            return;
+        }
+        // Home/End always move the caret within the text.
+        if (key === 'Home' || key === 'End') {
+            event.stopImmediatePropagation();
+            return;
+        }
+        const element = this.elementRef.nativeElement;
+        let start;
+        let end;
+        try {
+            start = element.selectionStart;
+            end = element.selectionEnd;
+        }
+        catch {
+            // Inputs such as `type="number"` don't expose a selection — let the toolbar navigate.
+            return;
+        }
+        if (start === null || end === null) {
+            return;
+        }
+        const length = element.value.length;
+        const atStart = start === 0 && end === 0;
+        const atEnd = start === length && end === length;
+        // Keep the key for caret movement unless the caret is already at the edge we're moving toward.
+        if ((key === previousKey && !atStart) || (key === nextKey && !atEnd)) {
+            event.stopImmediatePropagation();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxToolbarRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxToolbarRootDirective, isStandalone: true, selector: "[rdxToolbarRoot]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, properties: { "attr.aria-orientation": "orientation()" } }, providers: [provideRootContext()], hostDirectives: [{ directive: i1.RdxRovingFocusGroupDirective, inputs: ["dir", "dir", "orientation", "orientation", "loop", "loop"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToolbarInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxToolbarInput, isStandalone: true, selector: "input[rdxToolbarInput]", inputs: { defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, focusableWhenDisabled: { classPropertyName: "focusableWhenDisabled", publicName: "focusableWhenDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-orientation": "rootContext.orientation()", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-focusable": "focusableWhenDisabled() ? \"\" : undefined", "attr.aria-disabled": "isDisabled() ? \"true\" : undefined", "disabled": "isDisabled() && !focusableWhenDisabled()" } }, exportAs: ["rdxToolbarInput"], hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxToolbarRootDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToolbarInput, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxToolbarRoot]',
-                    hostDirectives: [{ directive: RdxRovingFocusGroupDirective, inputs: ['dir', 'orientation', 'loop'] }],
-                    providers: [provideRootContext()],
+                    selector: 'input[rdxToolbarInput]',
+                    exportAs: 'rdxToolbarInput',
+                    hostDirectives: [RdxRovingFocusItemDirective],
                     host: {
-                        role: 'toolbar',
-                        '[attr.aria-orientation]': 'orientation()'
+                        '[attr.data-orientation]': 'rootContext.orientation()',
+                        '[attr.data-disabled]': 'isDisabled() ? "" : undefined',
+                        '[attr.data-focusable]': 'focusableWhenDisabled() ? "" : undefined',
+                        '[attr.aria-disabled]': 'isDisabled() ? "true" : undefined',
+                        '[disabled]': 'isDisabled() && !focusableWhenDisabled()'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], focusableWhenDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusableWhenDisabled", required: false }] }] } });
 
-class RdxToolbarSeparatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxToolbarSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxToolbarSeparatorDirective, isStandalone: true, selector: "[rdxToolbarSeparator]", hostDirectives: [{ directive: i1$1.RdxSeparatorRootDirective, inputs: ["orientation", "orientation", "decorative", "decorative"] }], ngImport: i0 }); }
+/**
+ * A link within a toolbar.
+ *
+ * @see https://base-ui.com/react/components/toolbar
+ */
+class RdxToolbarLink {
+    constructor() {
+        this.rootContext = injectToolbarRootContext();
+    }
+    /** @ignore Space activates a link, matching native button behavior in a toolbar. */
+    onKeyDown(event) {
+        if (event.key === ' ') {
+            event.preventDefault();
+            event.currentTarget?.click();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToolbarLink, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxToolbarLink, isStandalone: true, selector: "[rdxToolbarLink]", host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-orientation": "rootContext.orientation()" } }, exportAs: ["rdxToolbarLink"], hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxToolbarSeparatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToolbarLink, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxToolbarSeparator]',
-                    hostDirectives: [{ directive: RdxSeparatorRootDirective, inputs: ['orientation', 'decorative'] }]
+                    selector: '[rdxToolbarLink]',
+                    exportAs: 'rdxToolbarLink',
+                    hostDirectives: [RdxRovingFocusItemDirective],
+                    host: {
+                        '[attr.data-orientation]': 'rootContext.orientation()',
+                        '(keydown)': 'onKeyDown($event)'
+                    }
                 }]
         }] });
 
-// TODO: set rovingFocus - false
-class RdxToolbarToggleGroupDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxToolbarToggleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxToolbarToggleGroupDirective, isStandalone: true, selector: "[rdxToolbarToggleGroup]", hostDirectives: [{ directive: i1$2.RdxToggleGroupWithoutFocusDirective, inputs: ["value", "value", "type", "type", "disabled", "disabled"] }], ngImport: i0 }); }
+const rootContext = () => {
+    const root = inject(RdxToolbarRoot);
+    return {
+        orientation: root.orientation,
+        disabled: root.disabled
+    };
+};
+/**
+ * A container for grouping a set of controls, such as buttons, toggle groups or menus.
+ * Owns roving keyboard focus over its items.
+ *
+ * @see https://base-ui.com/react/components/toolbar
+ */
+class RdxToolbarRoot {
+    constructor() {
+        /**
+         * The orientation of the toolbar.
+         *
+         * @default 'horizontal'
+         */
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        /** Text direction for arrow-key navigation. */
+        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether keyboard navigation should loop from the last item back to the first.
+         *
+         * @default true
+         */
+        this.loopFocus = input(true, { ...(ngDevMode ? { debugName: "loopFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether the whole toolbar is disabled.
+         *
+         * @default false
+         */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.rovingFocusGroup = inject(RdxRovingFocusGroupDirective, { self: true });
+        effect(() => {
+            this.rovingFocusGroup.setOrientation(this.orientation());
+            this.rovingFocusGroup.setDir(this.dir());
+            this.rovingFocusGroup.setLoop(this.loopFocus());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToolbarRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxToolbarRoot, isStandalone: true, selector: "[rdxToolbarRoot]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, loopFocus: { classPropertyName: "loopFocus", publicName: "loopFocus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, properties: { "attr.aria-orientation": "orientation()", "attr.data-orientation": "orientation()", "attr.data-disabled": "disabled() ? \"\" : undefined" } }, providers: [provideToolbarRootContext(rootContext)], exportAs: ["rdxToolbarRoot"], hostDirectives: [{ directive: i1.RdxRovingFocusGroupDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxToolbarToggleGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToolbarRoot, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxToolbarToggleGroup]',
-                    hostDirectives: [{ directive: RdxToggleGroupWithoutFocusDirective, inputs: ['value', 'type', 'disabled'] }]
+                    selector: '[rdxToolbarRoot]',
+                    exportAs: 'rdxToolbarRoot',
+                    hostDirectives: [RdxRovingFocusGroupDirective],
+                    providers: [provideToolbarRootContext(rootContext)],
+                    host: {
+                        role: 'toolbar',
+                        '[attr.aria-orientation]': 'orientation()',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined'
+                    }
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], loopFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "loopFocus", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
-class RdxToolbarToggleItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxToolbarToggleItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxToolbarToggleItemDirective, isStandalone: true, selector: "[rdxToolbarToggleItem]", hostDirectives: [{ directive: i1$2.RdxToggleGroupItemDirective, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0 }); }
+/**
+ * A separator between toolbar items or groups.
+ *
+ * @see https://base-ui.com/react/components/toolbar
+ */
+class RdxToolbarSeparator {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToolbarSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxToolbarSeparator, isStandalone: true, selector: "[rdxToolbarSeparator]", exportAs: ["rdxToolbarSeparator"], hostDirectives: [{ directive: i1$1.RdxSeparatorRootDirective, inputs: ["orientation", "orientation"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxToolbarToggleItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToolbarSeparator, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxToolbarToggleItem]',
-                    hostDirectives: [{ directive: RdxToggleGroupItemDirective, inputs: ['value', 'disabled'] }]
+                    selector: '[rdxToolbarSeparator]',
+                    exportAs: 'rdxToolbarSeparator',
+                    hostDirectives: [{ directive: RdxSeparatorRootDirective, inputs: ['orientation'] }]
                 }]
         }] });
 
-const _imports = [
-    RdxToolbarRootDirective,
-    RdxToolbarButtonDirective,
-    RdxToolbarLinkDirective,
-    RdxToolbarToggleGroupDirective,
-    RdxToolbarToggleItemDirective,
-    RdxToolbarSeparatorDirective
+const toolbarImports = [
+    RdxToolbarRoot,
+    RdxToolbarButton,
+    RdxToolbarLink,
+    RdxToolbarInput,
+    RdxToolbarGroup,
+    RdxToolbarSeparator
 ];
 class RdxToolbarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: RdxToolbarModule, imports: [RdxToolbarRootDirective,
-            RdxToolbarButtonDirective,
-            RdxToolbarLinkDirective,
-            RdxToolbarToggleGroupDirective,
-            RdxToolbarToggleItemDirective,
-            RdxToolbarSeparatorDirective], exports: [RdxToolbarRootDirective,
-            RdxToolbarButtonDirective,
-            RdxToolbarLinkDirective,
-            RdxToolbarToggleGroupDirective,
-            RdxToolbarToggleItemDirective,
-            RdxToolbarSeparatorDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxToolbarModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxToolbarModule, imports: [RdxToolbarRoot,
+            RdxToolbarButton,
+            RdxToolbarLink,
+            RdxToolbarInput,
+            RdxToolbarGroup,
+            RdxToolbarSeparator], exports: [RdxToolbarRoot,
+            RdxToolbarButton,
+            RdxToolbarLink,
+            RdxToolbarInput,
+            RdxToolbarGroup,
+            RdxToolbarSeparator] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToolbarModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxToolbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToolbarModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [..._imports],
-                    exports: [..._imports]
+                    imports: [...toolbarImports],
+                    exports: [...toolbarImports]
                 }]
         }] });
 
@@ -151,5 +364,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RDX_TOOLBAR_ROOT_TOKEN, RdxToolbarButtonDirective, RdxToolbarLinkDirective, RdxToolbarModule, RdxToolbarRootDirective, RdxToolbarSeparatorDirective, RdxToolbarToggleGroupDirective, RdxToolbarToggleItemDirective, injectRootContext, provideRootContext };
+export { RdxToolbarButton, RdxToolbarGroup, RdxToolbarInput, RdxToolbarLink, RdxToolbarModule, RdxToolbarRoot, RdxToolbarSeparator, injectToolbarGroupContext, injectToolbarRootContext, provideToolbarGroupContext, provideToolbarRootContext, toolbarImports };
 //# sourceMappingURL=radix-ng-primitives-toolbar.mjs.map