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

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

@@ -1,194 +1,467 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, model, input, output, Directive, inject, computed, booleanAttribute, effect, NgModule } from '@angular/core';
-import { provideToken } from '@radix-ng/primitives/core';
+import { inject, DestroyRef, signal, effect, afterNextRender, untracked, Directive, ElementRef, input, booleanAttribute, computed, model, output, NgModule } from '@angular/core';
+import { createContext, useTransitionStatus, injectId } from '@radix-ng/primitives/core';
 import * as i1 from '@radix-ng/primitives/roving-focus';
 import { RdxRovingFocusGroupDirective, RdxRovingFocusItemDirective } from '@radix-ng/primitives/roving-focus';
+import * as i1$1 from '@radix-ng/primitives/presence';
+import { provideRdxPresenceContext, RdxPresenceDirective } from '@radix-ng/primitives/presence';
 
-const RDX_TABS_ROOT_TOKEN = new InjectionToken('RdxTabsRootDirective');
-class RdxTabsRootDirective {
+const [injectTabsRootContext, provideTabsRootContext] = createContext('RdxTabsRootContext');
+
+function makeTabId(baseId, value) {
+    return `${baseId}-tab-${value}`;
+}
+function makePanelId(baseId, value) {
+    return `${baseId}-panel-${value}`;
+}
+
+/**
+ * A visual element that tracks the position and size of the active tab. Exposes the active tab
+ * geometry as CSS variables (`--active-tab-{top,right,bottom,left,width,height}`) so it can be
+ * animated with CSS.
+ *
+ * @see https://base-ui.com/react/components/tabs
+ */
+class RdxTabsIndicator {
     constructor() {
-        /**
-         * The controlled value of the tab to activate. Should be used in conjunction with `onValueChange`.
-         */
-        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
-        this.defaultValue = input(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : []));
-        /**
-         * When automatic, tabs are activated when receiving focus. When manual, tabs are activated when clicked.
-         */
-        this.activationMode = input('automatic', ...(ngDevMode ? [{ debugName: "activationMode" }] : []));
-        /**
-         * The orientation of the component.
-         */
-        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
-        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : []));
-        /**
-         * Event handler called when the value changes.
-         */
-        this.onValueChange = output();
+        this.rootContext = injectTabsRootContext();
+        this.destroyRef = inject(DestroyRef);
+        /** @ignore */
+        this.geometry = signal(null, ...(ngDevMode ? [{ debugName: "geometry" }] : /* istanbul ignore next */ []));
+        // Re-measure whenever the selection, orientation or the list element changes.
+        effect(() => {
+            this.rootContext.value();
+            this.rootContext.orientation();
+            this.rootContext.tabListElement();
+            this.scheduleMeasure();
+        });
+        afterNextRender(() => {
+            const list = untracked(this.rootContext.tabListElement);
+            if (!list || typeof ResizeObserver === 'undefined') {
+                this.measure();
+                return;
+            }
+            const observer = new ResizeObserver(() => this.measure());
+            observer.observe(list);
+            this.destroyRef.onDestroy(() => observer.disconnect());
+            this.measure();
+        });
     }
-    ngOnInit() {
-        if (this.defaultValue()) {
-            this.value.set(this.defaultValue());
+    scheduleMeasure() {
+        if (typeof requestAnimationFrame === 'undefined') {
+            this.measure();
+            return;
         }
+        requestAnimationFrame(() => this.measure());
     }
-    select(value) {
-        this.value.set(value);
-        this.onValueChange.emit(value);
-    }
-    /** @ignore */
-    getBaseId() {
-        return `tabs-${Math.random().toString(36).substr(2, 9)}`;
+    measure() {
+        const list = untracked(this.rootContext.tabListElement);
+        const value = untracked(this.rootContext.value);
+        if (!list || value == null || typeof document === 'undefined') {
+            this.geometry.set(null);
+            return;
+        }
+        const tab = document.getElementById(makeTabId(this.rootContext.baseId, value));
+        if (!tab) {
+            this.geometry.set(null);
+            return;
+        }
+        const listRect = list.getBoundingClientRect();
+        const tabRect = tab.getBoundingClientRect();
+        this.geometry.set({
+            top: tabRect.top - listRect.top,
+            right: listRect.right - tabRect.right,
+            bottom: listRect.bottom - tabRect.bottom,
+            left: tabRect.left - listRect.left,
+            width: tabRect.width,
+            height: tabRect.height
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTabsRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxTabsRootDirective, isStandalone: true, selector: "[rdxTabsRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.dir": "dir()" } }, providers: [provideToken(RDX_TABS_ROOT_TOKEN, RdxTabsRootDirective)], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxTabsIndicator, isStandalone: true, selector: "[rdxTabsIndicator]", host: { properties: { "attr.data-orientation": "rootContext.orientation()", "attr.data-activation-direction": "rootContext.activationDirection()", "style.--active-tab-top.px": "geometry()?.top", "style.--active-tab-right.px": "geometry()?.right", "style.--active-tab-bottom.px": "geometry()?.bottom", "style.--active-tab-left.px": "geometry()?.left", "style.--active-tab-width.px": "geometry()?.width", "style.--active-tab-height.px": "geometry()?.height" } }, exportAs: ["rdxTabsIndicator"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTabsRootDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsIndicator, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxTabsRoot]',
-                    providers: [provideToken(RDX_TABS_ROOT_TOKEN, RdxTabsRootDirective)],
+                    selector: '[rdxTabsIndicator]',
+                    exportAs: 'rdxTabsIndicator',
                     host: {
-                        '[attr.data-orientation]': 'orientation()',
-                        '[attr.dir]': 'dir()'
+                        '[attr.data-orientation]': 'rootContext.orientation()',
+                        '[attr.data-activation-direction]': 'rootContext.activationDirection()',
+                        '[style.--active-tab-top.px]': 'geometry()?.top',
+                        '[style.--active-tab-right.px]': 'geometry()?.right',
+                        '[style.--active-tab-bottom.px]': 'geometry()?.bottom',
+                        '[style.--active-tab-left.px]': 'geometry()?.left',
+                        '[style.--active-tab-width.px]': 'geometry()?.width',
+                        '[style.--active-tab-height.px]': 'geometry()?.height'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-function makeTriggerId(baseId, value) {
-    return `${baseId}-trigger-${value}`;
-}
-function makeContentId(baseId, value) {
-    return `${baseId}-content-${value}`;
+/**
+ * Groups the individual tab buttons and manages keyboard navigation.
+ *
+ * @see https://base-ui.com/react/components/tabs
+ */
+class RdxTabsList {
+    constructor() {
+        this.rootContext = injectTabsRootContext();
+        this.elementRef = inject(ElementRef);
+        this.rovingFocusGroup = inject(RdxRovingFocusGroupDirective, { self: true });
+        /**
+         * Whether a tab is activated when it receives focus (automatic activation).
+         * When `false`, tabs are only activated on click or Enter/Space.
+         *
+         * @default false
+         */
+        this.activateOnFocus = input(false, { ...(ngDevMode ? { debugName: "activateOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether keyboard navigation should loop from the last tab back to the first.
+         *
+         * @default true
+         */
+        this.loopFocus = input(true, { ...(ngDevMode ? { debugName: "loopFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.rootContext.setTabListElement(this.elementRef.nativeElement);
+        effect(() => {
+            this.rovingFocusGroup.setOrientation(this.rootContext.orientation());
+            this.rovingFocusGroup.setLoop(this.loopFocus());
+        });
+        effect(() => this.rootContext.setActivateOnFocus(this.activateOnFocus()));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTabsList, isStandalone: true, selector: "[rdxTabsList]", inputs: { activateOnFocus: { classPropertyName: "activateOnFocus", publicName: "activateOnFocus", isSignal: true, isRequired: false, transformFunction: null }, loopFocus: { classPropertyName: "loopFocus", publicName: "loopFocus", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tablist" }, properties: { "attr.aria-orientation": "rootContext.orientation()", "attr.data-orientation": "rootContext.orientation()", "attr.data-activation-direction": "rootContext.activationDirection()" } }, exportAs: ["rdxTabsList"], hostDirectives: [{ directive: i1.RdxRovingFocusGroupDirective }], ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxTabsList]',
+                    exportAs: 'rdxTabsList',
+                    hostDirectives: [RdxRovingFocusGroupDirective],
+                    host: {
+                        role: 'tablist',
+                        '[attr.aria-orientation]': 'rootContext.orientation()',
+                        '[attr.data-orientation]': 'rootContext.orientation()',
+                        '[attr.data-activation-direction]': 'rootContext.activationDirection()'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { activateOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "activateOnFocus", required: false }] }], loopFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "loopFocus", required: false }] }] } });
 
-class RdxTabsContentDirective {
+const panelPresenceContext = () => ({ present: inject(RdxTabsPanel).present });
+/**
+ * A panel displayed when its corresponding tab is active.
+ *
+ * By default the panel stays in the DOM and is toggled with the `hidden` attribute. To unmount the
+ * contents while inactive (Base UI's default `keepMounted: false`), nest a `*rdxTabsPanelPresence`
+ * structural directive inside it; set `keepMounted` to keep the contents mounted regardless.
+ *
+ * @see https://base-ui.com/react/components/tabs
+ */
+class RdxTabsPanel {
     constructor() {
-        this.tabsContext = inject(RDX_TABS_ROOT_TOKEN);
+        this.elementRef = inject(ElementRef);
+        this.rootContext = injectTabsRootContext();
+        /**
+         * A unique value that associates the panel with a tab.
+         */
+        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * Keep the panel contents mounted in the DOM while inactive (the contents are still hidden).
+         * Only relevant together with `*rdxTabsPanelPresence`, which otherwise unmounts them.
+         *
+         * @default false
+         */
+        this.keepMounted = input(false, { ...(ngDevMode ? { debugName: "keepMounted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.transition = useTransitionStatus(() => { });
+        /** Reactive enter/exit transition phase (`'starting'` | `'ending'` | `undefined`). */
+        this.transitionStatus = this.transition.status;
+        /** @ignore */
+        this.panelId = computed(() => makePanelId(this.rootContext.baseId, this.value()), ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this.tabId = computed(() => makeTabId(this.rootContext.baseId, this.value()), ...(ngDevMode ? [{ debugName: "tabId" }] : /* istanbul ignore next */ []));
+        /** Whether this panel's tab is currently selected. */
+        this.active = computed(() => this.rootContext.value() === this.value(), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        /** `true` once a `*rdxTabsPanelPresence` child takes over mounting. */
+        this.hasPresence = signal(false, ...(ngDevMode ? [{ debugName: "hasPresence" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the contents should be present for `*rdxTabsPanelPresence`. Flips with `active` so the
+         * presence directive owns the exit-animation timing (it keeps the node mounted until its exit
+         * `@keyframes` finishes); `keepMounted` keeps them mounted regardless.
+         */
+        this.present = computed(() => this.keepMounted() || this.active(), ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
         /**
-         * A unique value that associates the content with a trigger.
+         * The `hidden` attribute value. The panel is shown while active or while its exit transition
+         * runs. When a presence child unmounts the contents we no longer force `hidden` (the empty
+         * element renders nothing), unless `keepMounted` keeps the inactive contents around.
          */
-        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-        this.contentId = computed(() => makeContentId(this.tabsContext.getBaseId(), this.value()), ...(ngDevMode ? [{ debugName: "contentId" }] : []));
-        this.triggerId = computed(() => makeTriggerId(this.tabsContext.getBaseId(), this.value()), ...(ngDevMode ? [{ debugName: "triggerId" }] : []));
-        this.selected = computed(() => this.tabsContext.value() === this.value(), ...(ngDevMode ? [{ debugName: "selected" }] : []));
+        this.hidden = computed(() => !this.active() && this.transitionStatus() !== 'ending' && (!this.hasPresence() || this.keepMounted()), ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+        /** @ignore Index of the panel, derived from the order of its associated tab. */
+        this.index = computed(() => {
+            const list = this.rootContext.tabListElement();
+            if (!list) {
+                return null;
+            }
+            const tabs = Array.from(list.querySelectorAll('[role="tab"]'));
+            const position = tabs.findIndex((tab) => tab.id === makeTabId(this.rootContext.baseId, this.value()));
+            return position === -1 ? null : position;
+        }, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+        this.previousActive = false;
+        this.isFirstRun = true;
+        const unregister = this.transition.registerElement(this.elementRef.nativeElement);
+        inject(DestroyRef).onDestroy(unregister);
+        effect(() => {
+            const active = this.active();
+            // Settle the initial state without playing an enter transition.
+            if (this.isFirstRun) {
+                this.isFirstRun = false;
+                this.previousActive = active;
+                return;
+            }
+            if (active !== this.previousActive) {
+                this.previousActive = active;
+                untracked(() => this.transition.start(active));
+            }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTabsContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxTabsContentDirective, isStandalone: true, selector: "[rdxTabsContent]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "tabpanel", "tabindex": "0" }, properties: { "id": "contentId()", "attr.aria-labelledby": "triggerId()", "attr.data-state": "selected() ? \"active\" : \"inactive\"", "attr.data-orientation": "tabsContext.orientation()", "hidden": "!selected()" } }, ngImport: i0 }); }
+    /** @ignore Called by `RdxTabsPanelPresence` so the panel stops forcing `hidden`. */
+    markHasPresence() {
+        this.hasPresence.set(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTabsPanel, isStandalone: true, selector: "[rdxTabsPanel]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tabpanel" }, properties: { "id": "panelId()", "attr.tabindex": "active() ? 0 : undefined", "attr.aria-labelledby": "tabId()", "attr.data-orientation": "rootContext.orientation()", "attr.data-activation-direction": "rootContext.activationDirection()", "attr.data-index": "index()", "attr.data-hidden": "active() ? undefined : \"\"", "attr.data-starting-style": "transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "transitionStatus() === \"ending\" ? \"\" : undefined", "hidden": "hidden()" } }, providers: [provideRdxPresenceContext(panelPresenceContext)], exportAs: ["rdxTabsPanel"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTabsContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsPanel, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxTabsContent]',
+                    selector: '[rdxTabsPanel]',
+                    exportAs: 'rdxTabsPanel',
+                    providers: [provideRdxPresenceContext(panelPresenceContext)],
                     host: {
                         role: 'tabpanel',
-                        tabindex: '0',
-                        '[id]': 'contentId()',
-                        '[attr.aria-labelledby]': 'triggerId()',
-                        '[attr.data-state]': 'selected() ? "active" : "inactive"',
-                        '[attr.data-orientation]': 'tabsContext.orientation()',
-                        '[hidden]': '!selected()'
+                        '[id]': 'panelId()',
+                        '[attr.tabindex]': 'active() ? 0 : undefined',
+                        '[attr.aria-labelledby]': 'tabId()',
+                        '[attr.data-orientation]': 'rootContext.orientation()',
+                        '[attr.data-activation-direction]': 'rootContext.activationDirection()',
+                        '[attr.data-index]': 'index()',
+                        '[attr.data-hidden]': 'active() ? undefined : ""',
+                        '[attr.data-starting-style]': 'transitionStatus() === "starting" ? "" : undefined',
+                        '[attr.data-ending-style]': 'transitionStatus() === "ending" ? "" : undefined',
+                        '[hidden]': 'hidden()'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], keepMounted: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepMounted", required: false }] }] } });
 
-class RdxTabsListDirective {
+/**
+ * Structural directive that mounts the tab panel contents only while the panel is active,
+ * unmounting them once the exit animation finishes. Apply it inside an `[rdxTabsPanel]` to get
+ * Base UI's default unmounting behavior; combine with `keepMounted` on the panel to keep the
+ * contents mounted instead.
+ *
+ * The presence state is read from the parent panel through {@link RdxPresenceDirective}.
+ */
+class RdxTabsPanelPresence {
     constructor() {
-        this.tabsContext = inject(RDX_TABS_ROOT_TOKEN);
+        inject(RdxTabsPanel).markHasPresence();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTabsListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxTabsListDirective, isStandalone: true, selector: "[rdxTabsList]", host: { attributes: { "role": "tablist" }, properties: { "attr.aria-orientation": "tabsContext.orientation()", "attr.data-orientation": "tabsContext.orientation()" } }, 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: RdxTabsPanelPresence, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxTabsPanelPresence, isStandalone: true, selector: "ng-template[rdxTabsPanelPresence]", hostDirectives: [{ directive: i1$1.RdxPresenceDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTabsListDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsPanelPresence, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxTabsList]',
-                    hostDirectives: [{ directive: RdxRovingFocusGroupDirective, inputs: ['dir', 'orientation', 'loop'] }],
+                    selector: 'ng-template[rdxTabsPanelPresence]',
+                    hostDirectives: [RdxPresenceDirective]
+                }]
+        }], ctorParameters: () => [] });
+
+const rootContext = () => {
+    const root = inject(RdxTabsRoot);
+    return {
+        baseId: root.baseId,
+        value: root.value,
+        orientation: root.orientation,
+        activationDirection: root.activationDirection.asReadonly(),
+        activateOnFocus: root.activateOnFocus.asReadonly(),
+        tabListElement: root.tabListElement.asReadonly(),
+        setValue: (value) => root.setValue(value),
+        setActivateOnFocus: (value) => root.activateOnFocus.set(value),
+        setTabListElement: (element) => root.tabListElement.set(element)
+    };
+};
+/**
+ * Groups the tabs and the corresponding panels.
+ *
+ * @see https://base-ui.com/react/components/tabs
+ */
+class RdxTabsRoot {
+    constructor() {
+        /** @ignore */
+        this.baseId = injectId('rdx-tabs-');
+        /**
+         * The value of the currently selected tab. Use together with `(onValueChange)` for controlled state.
+         */
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * The value of the tab that should be initially selected when uncontrolled.
+         */
+        this.defaultValue = input(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+        /**
+         * The orientation the tabs are laid out. Controls arrow-key navigation
+         * (left/right vs. up/down).
+         *
+         * @default 'horizontal'
+         */
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        /**
+         * Event emitted when the selected tab changes.
+         */
+        this.onValueChange = output();
+        /** @ignore Set by `[rdxTabsList]`. */
+        this.activateOnFocus = signal(false, ...(ngDevMode ? [{ debugName: "activateOnFocus" }] : /* istanbul ignore next */ []));
+        /** @ignore Set by `[rdxTabsList]`. */
+        this.tabListElement = signal(null, ...(ngDevMode ? [{ debugName: "tabListElement" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this.activationDirection = signal('none', ...(ngDevMode ? [{ debugName: "activationDirection" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const initial = this.defaultValue();
+            if (initial !== undefined && untracked(this.value) === undefined) {
+                this.value.set(initial);
+            }
+        });
+    }
+    /** @ignore */
+    setValue(value) {
+        const previous = this.value();
+        if (previous === value) {
+            return;
+        }
+        this.activationDirection.set(this.computeDirection(previous, value));
+        this.value.set(value);
+        this.onValueChange.emit(value);
+    }
+    computeDirection(previous, next) {
+        const list = this.tabListElement();
+        if (!list || previous === undefined || previous === null) {
+            return 'none';
+        }
+        const tabs = Array.from(list.querySelectorAll('[role="tab"]'));
+        const previousIndex = tabs.findIndex((tab) => tab.id === makeTabId(this.baseId, previous));
+        const nextIndex = tabs.findIndex((tab) => tab.id === makeTabId(this.baseId, next));
+        if (previousIndex === -1 || nextIndex === -1 || previousIndex === nextIndex) {
+            return 'none';
+        }
+        const horizontal = this.orientation() === 'horizontal';
+        if (nextIndex > previousIndex) {
+            return horizontal ? 'right' : 'down';
+        }
+        return horizontal ? 'left' : 'up';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTabsRoot, isStandalone: true, selector: "[rdxTabsRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-activation-direction": "activationDirection()" } }, providers: [provideTabsRootContext(rootContext)], exportAs: ["rdxTabsRoot"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsRoot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxTabsRoot]',
+                    exportAs: 'rdxTabsRoot',
+                    providers: [provideTabsRootContext(rootContext)],
                     host: {
-                        role: 'tablist',
-                        '[attr.aria-orientation]': 'tabsContext.orientation()',
-                        '[attr.data-orientation]': 'tabsContext.orientation()'
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-activation-direction]': 'activationDirection()'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }] } });
 
-class RdxTabsTriggerDirective {
+/**
+ * An individual interactive tab button that activates its corresponding panel.
+ *
+ * @see https://base-ui.com/react/components/tabs
+ */
+class RdxTabsTab {
     constructor() {
-        this.rdxRovingFocusItemDirective = inject(RdxRovingFocusItemDirective);
-        this.tabsContext = inject(RDX_TABS_ROOT_TOKEN);
+        this.rootContext = injectTabsRootContext();
+        this.rovingFocusItem = inject(RdxRovingFocusItemDirective);
         /**
-         * A unique value that associates the trigger with a content.
+         * A unique value that associates the tab with a panel.
          */
-        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /**
-         * When true, prevents the user from interacting with the tab.
+         * When `true`, prevents the user from interacting with the tab.
          */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
-                transform: booleanAttribute
-            }]));
-        this.contentId = computed(() => makeContentId(this.tabsContext.getBaseId(), this.value()), ...(ngDevMode ? [{ debugName: "contentId" }] : []));
-        this.triggerId = computed(() => makeTriggerId(this.tabsContext.getBaseId(), this.value()), ...(ngDevMode ? [{ debugName: "triggerId" }] : []));
-        this.isSelected = computed(() => this.tabsContext.value() === this.value(), ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
-        effect(() => this.rdxRovingFocusItemDirective.setActive(this.isSelected()));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @ignore */
+        this.tabId = computed(() => makeTabId(this.rootContext.baseId, this.value()), ...(ngDevMode ? [{ debugName: "tabId" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this.panelId = computed(() => makePanelId(this.rootContext.baseId, this.value()), ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this.active = computed(() => this.rootContext.value() === this.value(), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            this.rovingFocusItem.setActive(this.active());
+            this.rovingFocusItem.setFocusable(!this.disabled());
+        });
     }
+    /** @ignore */
     onMouseDown(event) {
-        // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
-        // but not when the control key is pressed (avoiding MacOS right click)
+        // Only the primary button selects; ignore Ctrl-click (macOS right-click emulation).
         if (!this.disabled() && event.button === 0 && !event.ctrlKey) {
-            this.tabsContext?.select(this.value());
+            this.rootContext.setValue(this.value());
         }
         else {
-            // prevent focus to avoid accidental activation
+            // Prevent focus to avoid accidental activation.
             event.preventDefault();
         }
     }
+    /** @ignore */
     onKeyDown(event) {
-        if ([' ', 'Enter'].includes(event.key)) {
-            this.tabsContext?.select(this.value());
+        if (!this.disabled() && (event.key === ' ' || event.key === 'Enter')) {
+            this.rootContext.setValue(this.value());
         }
     }
+    /** @ignore */
     onFocus() {
-        const isAutomaticActivation = this.tabsContext.activationMode() !== 'manual';
-        if (!this.isSelected() && !this.disabled() && isAutomaticActivation) {
-            this.tabsContext?.select(this.value());
+        if (!this.active() && !this.disabled() && this.rootContext.activateOnFocus()) {
+            this.rootContext.setValue(this.value());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTabsTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxTabsTriggerDirective, isStandalone: true, selector: "[rdxTabsTrigger]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "role": "tab" }, listeners: { "mousedown": "onMouseDown($event)", "keydown": "onKeyDown($event)", "focus": "onFocus()" }, properties: { "id": "triggerId()", "attr.aria-selected": "isSelected()", "attr.aria-controls": "contentId()", "attr.data-disabled": "disabled() ? '' : undefined", "disabled": "disabled()", "attr.data-state": "isSelected() ? 'active' : 'inactive'", "attr.data-orientation": "tabsContext.orientation()" } }, hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective, inputs: ["focusable", "focusable", "active", "active", "allowShiftKey", "allowShiftKey"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsTab, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTabsTab, isStandalone: true, selector: "[rdxTabsTab]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "role": "tab" }, listeners: { "mousedown": "onMouseDown($event)", "keydown": "onKeyDown($event)", "focus": "onFocus()" }, properties: { "id": "tabId()", "attr.aria-selected": "active()", "attr.aria-controls": "panelId()", "attr.data-orientation": "rootContext.orientation()", "attr.data-activation-direction": "rootContext.activationDirection()", "attr.data-active": "active() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.disabled": "disabled() ? \"\" : undefined" } }, exportAs: ["rdxTabsTab"], hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective, inputs: ["allowShiftKey", "allowShiftKey"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTabsTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsTab, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxTabsTrigger]',
+                    selector: '[rdxTabsTab]',
+                    exportAs: 'rdxTabsTab',
                     hostDirectives: [
                         {
                             directive: RdxRovingFocusItemDirective,
-                            inputs: ['focusable', 'active', 'allowShiftKey']
+                            inputs: ['allowShiftKey']
                         }
                     ],
                     host: {
                         type: 'button',
                         role: 'tab',
-                        '[id]': 'triggerId()',
-                        '[attr.aria-selected]': 'isSelected()',
-                        '[attr.aria-controls]': 'contentId()',
-                        '[attr.data-disabled]': "disabled() ? '' : undefined",
-                        '[disabled]': 'disabled()',
-                        '[attr.data-state]': "isSelected() ? 'active' : 'inactive'",
-                        '[attr.data-orientation]': 'tabsContext.orientation()',
+                        '[id]': 'tabId()',
+                        '[attr.aria-selected]': 'active()',
+                        '[attr.aria-controls]': 'panelId()',
+                        '[attr.data-orientation]': 'rootContext.orientation()',
+                        '[attr.data-activation-direction]': 'rootContext.activationDirection()',
+                        '[attr.data-active]': 'active() ? "" : undefined',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[attr.disabled]': 'disabled() ? "" : undefined',
                         '(mousedown)': 'onMouseDown($event)',
                         '(keydown)': 'onKeyDown($event)',
                         '(focus)': 'onFocus()'
                     }
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
-const tabsImports = [RdxTabsRootDirective, RdxTabsContentDirective, RdxTabsListDirective, RdxTabsTriggerDirective];
+const tabsImports = [RdxTabsRoot, RdxTabsList, RdxTabsTab, RdxTabsPanel, RdxTabsPanelPresence, RdxTabsIndicator];
 class RdxTabsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: RdxTabsModule, imports: [RdxTabsRootDirective, RdxTabsContentDirective, RdxTabsListDirective, RdxTabsTriggerDirective], exports: [RdxTabsRootDirective, RdxTabsContentDirective, RdxTabsListDirective, RdxTabsTriggerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTabsModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsModule, imports: [RdxTabsRoot, RdxTabsList, RdxTabsTab, RdxTabsPanel, RdxTabsPanelPresence, RdxTabsIndicator], exports: [RdxTabsRoot, RdxTabsList, RdxTabsTab, RdxTabsPanel, RdxTabsPanelPresence, RdxTabsIndicator] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...tabsImports],
@@ -200,5 +473,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RDX_TABS_ROOT_TOKEN, RdxTabsContentDirective, RdxTabsListDirective, RdxTabsModule, RdxTabsRootDirective, RdxTabsTriggerDirective };
+export { RdxTabsIndicator, RdxTabsList, RdxTabsModule, RdxTabsPanel, RdxTabsPanelPresence, RdxTabsRoot, RdxTabsTab, injectTabsRootContext, provideTabsRootContext, tabsImports };
 //# sourceMappingURL=radix-ng-primitives-tabs.mjs.map