@radix-ng/primitives 1.0.0-beta.5 → 1.0.2

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

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { inject, DestroyRef, signal, effect, afterNextRender, untracked, Directive, ElementRef, input, booleanAttribute, computed, model, output, NgModule } from '@angular/core';
 import { createContext, useTransitionStatus, injectId, createCancelableChangeEventDetails } 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 from '@radix-ng/primitives/composite';
+import { RdxCompositeRoot, RdxCompositeListItem, RdxCompositeList, RdxCompositeItem } from '@radix-ng/primitives/composite';
 import * as i1$1 from '@radix-ng/primitives/presence';
 import { provideRdxPresenceContext, RdxPresenceDirective } from '@radix-ng/primitives/presence';
 
@@ -116,7 +116,7 @@ class RdxTabsList {
     constructor() {
         this.rootContext = injectTabsRootContext();
         this.elementRef = inject(ElementRef);
-        this.rovingFocusGroup = inject(RdxRovingFocusGroupDirective, { self: true });
+        this.compositeRoot = inject(RdxCompositeRoot, { self: true });
         /**
          * Whether a tab is activated when it receives focus (automatic activation).
          * When `false`, tabs are only activated on click or Enter/Space.
@@ -130,30 +130,79 @@ class RdxTabsList {
          * @default true
          */
         this.loopFocus = input(true, { ...(ngDevMode ? { debugName: "loopFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.tabMap = computed(() => {
+            const map = new Map();
+            this.compositeRoot.itemMap().forEach((metadata, element) => {
+                if (isTabsTabMetadata(metadata)) {
+                    map.set(element, metadata);
+                }
+            });
+            return map;
+        }, ...(ngDevMode ? [{ debugName: "tabMap" }] : /* istanbul ignore next */ []));
+        this.tabMetadata = computed(() => Array.from(this.tabMap().values()), ...(ngDevMode ? [{ debugName: "tabMetadata" }] : /* istanbul ignore next */ []));
+        this.disabledIndices = computed(() => this.tabMetadata()
+            .filter((metadata) => metadata.disabled)
+            .map((metadata) => metadata.index), ...(ngDevMode ? [{ debugName: "disabledIndices" }] : /* istanbul ignore next */ []));
+        this.activeIndex = computed(() => {
+            const value = this.rootContext.value();
+            const metadata = this.tabMetadata().find((tab) => tab.value === value);
+            return metadata?.index ?? -1;
+        }, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
         this.rootContext.setTabListElement(this.elementRef.nativeElement);
         effect(() => {
-            this.rovingFocusGroup.setOrientation(this.rootContext.orientation());
-            this.rovingFocusGroup.setLoop(this.loopFocus());
+            this.compositeRoot.setOrientation(this.rootContext.orientation());
+            this.compositeRoot.setLoopFocus(this.loopFocus());
+            this.compositeRoot.setEnableHomeAndEndKeys(true);
+        });
+        effect(() => {
+            this.compositeRoot.setDisabledIndices([]);
+        });
+        effect(() => {
+            this.rootContext.setTabMap(this.tabMap());
+        });
+        effect(() => {
+            const activeIndex = this.activeIndex();
+            if (activeIndex === -1) {
+                return;
+            }
+            const list = this.elementRef.nativeElement;
+            const activeElement = list.ownerDocument.activeElement;
+            if (activeElement && list.contains(activeElement)) {
+                return;
+            }
+            if (this.disabledIndices().includes(activeIndex)) {
+                const firstEnabledIndex = this.tabMetadata().find((metadata) => !metadata.disabled)?.index;
+                if (firstEnabledIndex !== undefined) {
+                    this.compositeRoot.setHighlightedIndex(firstEnabledIndex);
+                }
+                return;
+            }
+            this.compositeRoot.setHighlightedIndex(activeIndex);
         });
         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 }); }
+    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() === \"vertical\" ? \"vertical\" : undefined", "attr.data-orientation": "rootContext.orientation()", "attr.data-activation-direction": "rootContext.activationDirection()" } }, exportAs: ["rdxTabsList"], hostDirectives: [{ directive: i1.RdxCompositeRoot }], 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],
+                    hostDirectives: [RdxCompositeRoot],
                     host: {
                         role: 'tablist',
-                        '[attr.aria-orientation]': 'rootContext.orientation()',
+                        '[attr.aria-orientation]': 'rootContext.orientation() === "vertical" ? "vertical" : undefined',
                         '[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 }] }] } });
+function isTabsTabMetadata(metadata) {
+    return (typeof metadata['disabled'] === 'boolean' &&
+        typeof metadata['id'] === 'string' &&
+        Object.prototype.hasOwnProperty.call(metadata, 'value'));
+}
 
 const panelPresenceContext = () => ({ present: inject(RdxTabsPanel).present });
 /**
@@ -168,6 +217,7 @@ const panelPresenceContext = () => ({ present: inject(RdxTabsPanel).present });
 class RdxTabsPanel {
     constructor() {
         this.elementRef = inject(ElementRef);
+        this.listItem = inject(RdxCompositeListItem, { self: true });
         this.rootContext = injectTabsRootContext();
         /**
          * A unique value that associates the panel with a tab.
@@ -186,7 +236,15 @@ class RdxTabsPanel {
         /** @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 */ []));
+        this.tabId = computed(() => {
+            const value = this.value();
+            for (const tabMetadata of this.rootContext.tabMap().values()) {
+                if (tabMetadata.value === value) {
+                    return tabMetadata.id;
+                }
+            }
+            return makeTabId(this.rootContext.baseId, 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. */
@@ -203,20 +261,18 @@ class RdxTabsPanel {
          * element renders nothing), unless `keepMounted` keeps the inactive contents around.
          */
         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 */ []));
+        /** @ignore Index of the panel in DOM order. */
+        this.index = this.listItem.index;
         this.previousActive = false;
         this.isFirstRun = true;
         const unregister = this.transition.registerElement(this.elementRef.nativeElement);
         inject(DestroyRef).onDestroy(unregister);
+        effect(() => {
+            this.listItem.setMetadata({
+                id: this.panelId(),
+                value: this.value()
+            });
+        });
         effect(() => {
             const active = this.active();
             // Settle the initial state without playing an enter transition.
@@ -236,7 +292,7 @@ class RdxTabsPanel {
         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 }); }
+    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: { "attr.id": "panelId()", "attr.tabindex": "active() ? 0 : -1", "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"], hostDirectives: [{ directive: i1.RdxCompositeListItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsPanel, decorators: [{
             type: Directive,
@@ -244,10 +300,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: '[rdxTabsPanel]',
                     exportAs: 'rdxTabsPanel',
                     providers: [provideRdxPresenceContext(panelPresenceContext)],
+                    hostDirectives: [RdxCompositeListItem],
                     host: {
                         role: 'tabpanel',
-                        '[id]': 'panelId()',
-                        '[attr.tabindex]': 'active() ? 0 : undefined',
+                        '[attr.id]': 'panelId()',
+                        '[attr.tabindex]': 'active() ? 0 : -1',
                         '[attr.aria-labelledby]': 'tabId()',
                         '[attr.data-orientation]': 'rootContext.orientation()',
                         '[attr.data-activation-direction]': 'rootContext.activationDirection()',
@@ -292,9 +349,11 @@ const rootContext = () => {
         activationDirection: root.activationDirection.asReadonly(),
         activateOnFocus: root.activateOnFocus.asReadonly(),
         tabListElement: root.tabListElement.asReadonly(),
+        tabMap: root.tabMap.asReadonly(),
         setValue: (value, event, reason) => root.setValue(value, event, reason),
         setActivateOnFocus: (value) => root.activateOnFocus.set(value),
-        setTabListElement: (element) => root.tabListElement.set(element)
+        setTabListElement: (element) => root.tabListElement.set(element),
+        setTabMap: (map) => root.tabMap.set(map)
     };
 };
 /**
@@ -312,8 +371,11 @@ class RdxTabsRoot {
         this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
         /**
          * The value of the tab that should be initially selected when uncontrolled.
+         * When omitted, Base UI parity uses `0` as the implicit default and falls back to the first enabled tab.
+         *
+         * @default 0
          */
-        this.defaultValue = input(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+        this.defaultValue = input(undefined, ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
         /**
          * The orientation the tabs are laid out. Controls arrow-key navigation
          * (left/right vs. up/down).
@@ -323,55 +385,146 @@ class RdxTabsRoot {
         this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         /**
          * Event emitted when the selected tab changes.
+         *
+         * `eventDetails.reason` is `'none'` for user-initiated changes, `'initial'` for the first automatic
+         * uncontrolled selection, `'disabled'` when an uncontrolled selection falls back from a disabled tab,
+         * and `'missing'` when it falls back from a removed tab. Automatic changes are not cancelable.
          */
         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 Set by `[rdxTabsList]`. */
+        this.tabMap = signal(new Map(), ...(ngDevMode ? [{ debugName: "tabMap" }] : /* istanbul ignore next */ []));
         /** @ignore */
         this.activationDirection = signal('none', ...(ngDevMode ? [{ debugName: "activationDirection" }] : /* istanbul ignore next */ []));
+        this.externallyControlled = signal(false, ...(ngDevMode ? [{ debugName: "externallyControlled" }] : /* istanbul ignore next */ []));
+        this.hasObservedValue = false;
+        this.internalValueCommit = false;
+        this.hasAppliedDefaultValue = false;
+        this.shouldNotifyInitialValueChange = true;
+        this.shouldHonorDisabledDefaultValue = false;
+        this.didRegisterTabs = false;
+        effect(() => {
+            const currentValue = this.value();
+            if (this.internalValueCommit) {
+                this.internalValueCommit = false;
+                this.hasObservedValue = true;
+                this.previousObservedValue = currentValue;
+                return;
+            }
+            if (!this.hasObservedValue) {
+                this.hasObservedValue = true;
+                this.previousObservedValue = currentValue;
+                if (currentValue !== undefined) {
+                    this.externallyControlled.set(true);
+                }
+                return;
+            }
+            if (currentValue !== this.previousObservedValue) {
+                this.externallyControlled.set(true);
+                this.previousObservedValue = currentValue;
+            }
+        });
         effect(() => {
-            const initial = this.defaultValue();
-            if (initial !== undefined && untracked(this.value) === undefined) {
-                this.value.set(initial);
+            if (this.hasAppliedDefaultValue || untracked(this.value) !== undefined) {
+                return;
+            }
+            const defaultValue = this.defaultValue();
+            const hasExplicitDefaultValue = defaultValue !== undefined;
+            this.hasAppliedDefaultValue = true;
+            this.initialDefaultValue = defaultValue ?? 0;
+            this.shouldNotifyInitialValueChange = !hasExplicitDefaultValue;
+            this.shouldHonorDisabledDefaultValue = hasExplicitDefaultValue;
+            untracked(() => this.commitValue(this.initialDefaultValue));
+        });
+        effect(() => {
+            const tabMap = this.tabMap();
+            const value = this.value();
+            if (this.externallyControlled()) {
+                return;
+            }
+            if (tabMap.size === 0) {
+                if (this.didRegisterTabs && value !== null && !this.lastKnownTabElement?.isConnected) {
+                    untracked(() => this.commitAutomaticValueChange(null, 'missing'));
+                }
+                return;
+            }
+            this.didRegisterTabs = true;
+            this.lastKnownTabElement = tabMap.keys().next().value;
+            const selectedTabMetadata = getTabMetadataByValue(tabMap, value);
+            const firstEnabledTabValue = getFirstEnabledTabValue(tabMap);
+            const selectionIsDisabled = selectedTabMetadata?.disabled;
+            const selectionIsMissing = selectedTabMetadata == null && value !== null;
+            if (!selectionIsDisabled && value === this.initialDefaultValue) {
+                this.shouldHonorDisabledDefaultValue = false;
+            }
+            if (this.shouldHonorDisabledDefaultValue && selectionIsDisabled && value === this.initialDefaultValue) {
+                return;
+            }
+            const shouldNotifyInitialValueChange = this.shouldNotifyInitialValueChange;
+            if (selectionIsDisabled || selectionIsMissing) {
+                const fallbackValue = firstEnabledTabValue ?? null;
+                if (value === fallbackValue) {
+                    this.shouldNotifyInitialValueChange = false;
+                    return;
+                }
+                let fallbackReason = 'missing';
+                if (shouldNotifyInitialValueChange) {
+                    fallbackReason = 'initial';
+                }
+                else if (selectionIsDisabled) {
+                    fallbackReason = 'disabled';
+                }
+                untracked(() => this.commitAutomaticValueChange(fallbackValue, fallbackReason));
+                return;
+            }
+            if (shouldNotifyInitialValueChange && selectedTabMetadata != null) {
+                untracked(() => this.notifyAutomaticValueChange(value, 'initial'));
+                this.shouldNotifyInitialValueChange = false;
             }
         });
     }
     /** @ignore */
-    setValue(value, event, reason = event ? 'trigger-press' : 'none') {
+    setValue(value, event, reason = 'none') {
         const previous = this.value();
         if (previous === value) {
             return;
         }
         const trigger = event?.currentTarget instanceof HTMLElement ? event.currentTarget : undefined;
-        const { eventDetails } = createCancelableChangeEventDetails(reason, event ?? new Event('tabs.value-change'), trigger);
+        const { eventDetails: baseEventDetails } = createCancelableChangeEventDetails(reason, event ?? new Event('tabs.value-change'), trigger);
+        const eventDetails = baseEventDetails;
+        const activationDirection = computeActivationDirection(previous, value, this.orientation(), this.tabMap());
+        eventDetails.activationDirection = activationDirection;
         this.onValueChange.emit({ value, eventDetails });
         if (eventDetails.isCanceled()) {
             return;
         }
-        this.activationDirection.set(this.computeDirection(previous, value));
+        this.activationDirection.set(activationDirection);
+        this.commitValue(value);
+    }
+    commitValue(value) {
+        this.internalValueCommit = true;
         this.value.set(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';
+    commitAutomaticValueChange(value, reason) {
+        this.activationDirection.set('none');
+        this.commitValue(value);
+        this.notifyAutomaticValueChange(value, reason);
+        this.shouldNotifyInitialValueChange = false;
+    }
+    notifyAutomaticValueChange(value, reason) {
+        if (value === undefined) {
+            return;
         }
-        return horizontal ? 'left' : 'up';
+        const { eventDetails: baseEventDetails } = createCancelableChangeEventDetails(reason, new Event('tabs.value-change'));
+        const eventDetails = baseEventDetails;
+        eventDetails.activationDirection = 'none';
+        this.onValueChange.emit({ value, eventDetails });
     }
     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 }); }
+    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"], hostDirectives: [{ directive: i1.RdxCompositeList }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsRoot, decorators: [{
             type: Directive,
@@ -379,12 +532,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: '[rdxTabsRoot]',
                     exportAs: 'rdxTabsRoot',
                     providers: [provideTabsRootContext(rootContext)],
+                    hostDirectives: [RdxCompositeList],
                     host: {
                         '[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"] }] } });
+function getTabMetadataByValue(tabMap, value) {
+    for (const tabMetadata of tabMap.values()) {
+        if (tabMetadata.value === value) {
+            return tabMetadata;
+        }
+    }
+    return undefined;
+}
+function getFirstEnabledTabValue(tabMap) {
+    for (const tabMetadata of tabMap.values()) {
+        if (!tabMetadata.disabled) {
+            return tabMetadata.value;
+        }
+    }
+    return undefined;
+}
+function computeActivationDirection(previous, next, orientation, tabMap) {
+    if (previous == null || next == null) {
+        return 'none';
+    }
+    let previousTab = null;
+    let nextTab = null;
+    let previousIndex = -1;
+    let nextIndex = -1;
+    for (const [tabElement, tabMetadata] of tabMap.entries()) {
+        if (tabMetadata.value === previous) {
+            previousTab = tabElement;
+            previousIndex = tabMetadata.index;
+        }
+        if (tabMetadata.value === next) {
+            nextTab = tabElement;
+            nextIndex = tabMetadata.index;
+        }
+        if (previousTab && nextTab) {
+            break;
+        }
+    }
+    if (!previousTab || !nextTab || previousIndex === nextIndex) {
+        return inferActivationDirectionFromValues(previous, next, orientation);
+    }
+    const previousRect = previousTab.getBoundingClientRect();
+    const nextRect = nextTab.getBoundingClientRect();
+    if (orientation === 'horizontal') {
+        if (nextRect.left < previousRect.left) {
+            return 'left';
+        }
+        if (nextRect.left > previousRect.left) {
+            return 'right';
+        }
+        return nextIndex > previousIndex ? 'right' : 'left';
+    }
+    if (nextRect.top < previousRect.top) {
+        return 'up';
+    }
+    if (nextRect.top > previousRect.top) {
+        return 'down';
+    }
+    return nextIndex > previousIndex ? 'down' : 'up';
+}
+function inferActivationDirectionFromValues(previous, next, orientation) {
+    if (previous !== next && typeof previous === 'number' && typeof next === 'number') {
+        if (orientation === 'horizontal') {
+            return next > previous ? 'right' : 'left';
+        }
+        return next > previous ? 'down' : 'up';
+    }
+    if (previous !== next && typeof previous === 'string' && typeof next === 'string') {
+        if (orientation === 'horizontal') {
+            return next > previous ? 'right' : 'left';
+        }
+        return next > previous ? 'down' : 'up';
+    }
+    return 'none';
+}
 
 /**
  * An individual interactive tab button that activates its corresponding panel.
@@ -394,80 +622,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxTabsTab {
     constructor() {
         this.rootContext = injectTabsRootContext();
-        this.rovingFocusItem = inject(RdxRovingFocusItemDirective);
+        this.compositeItem = inject(RdxCompositeItem, { self: true });
         /**
          * A unique value that associates the tab with a panel.
          */
         this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /**
          * When `true`, prevents the user from interacting with the tab.
+         * Disabled tabs remain focusable during composite keyboard navigation, matching Base UI.
          */
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether the host element is a native button. When `true`, `type="button"` is applied.
+         *
+         * @default true
+         */
+        this.nativeButton = input(true, { ...(ngDevMode ? { debugName: "nativeButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Optional id for the tab element. When omitted, an id is derived from the root id and tab value.
+         */
+        this.id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.tabId = computed(() => makeTabId(this.rootContext.baseId, this.value()), ...(ngDevMode ? [{ debugName: "tabId" }] : /* istanbul ignore next */ []));
+        this.tabId = computed(() => this.id() ?? 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 */ []));
+        this.isPressing = false;
+        this.isMainButton = false;
         effect(() => {
-            this.rovingFocusItem.setActive(this.active());
-            this.rovingFocusItem.setFocusable(!this.disabled());
+            this.compositeItem.setMetadata({
+                disabled: this.disabled(),
+                id: this.tabId(),
+                value: this.value()
+            });
         });
     }
     /** @ignore */
-    onMouseDown(event) {
-        // Only the primary button selects; ignore Ctrl-click (macOS right-click emulation).
-        if (!this.disabled() && event.button === 0 && !event.ctrlKey) {
-            this.rootContext.setValue(this.value(), event, 'trigger-press');
-        }
-        else {
-            // Prevent focus to avoid accidental activation.
-            event.preventDefault();
+    onClick(event) {
+        if (this.active() || this.disabled()) {
+            return;
         }
+        this.rootContext.setValue(this.value(), event, 'none');
     }
     /** @ignore */
     onKeyDown(event) {
         if (!this.disabled() && (event.key === ' ' || event.key === 'Enter')) {
-            this.rootContext.setValue(this.value(), event, 'keyboard');
+            this.rootContext.setValue(this.value(), event, 'none');
+        }
+    }
+    /** @ignore */
+    onPointerDown(event) {
+        if (this.active() || this.disabled()) {
+            return;
         }
+        this.isPressing = true;
+        this.isMainButton = event.button === 0;
+        const ownerDocument = event.currentTarget instanceof HTMLElement ? event.currentTarget.ownerDocument : document;
+        ownerDocument.addEventListener('pointerup', () => {
+            this.isPressing = false;
+            this.isMainButton = false;
+        }, { once: true });
+        ownerDocument.addEventListener('pointercancel', () => {
+            this.isPressing = false;
+            this.isMainButton = false;
+        }, { once: true });
+        ownerDocument.addEventListener('blur', () => {
+            this.isPressing = false;
+            this.isMainButton = false;
+        }, { once: true });
     }
     /** @ignore */
     onFocus(event) {
-        if (!this.active() && !this.disabled() && this.rootContext.activateOnFocus()) {
-            this.rootContext.setValue(this.value(), event, 'focus');
+        if (this.active() || this.disabled()) {
+            return;
+        }
+        if (this.rootContext.activateOnFocus() && (!this.isPressing || this.isMainButton)) {
+            this.rootContext.setValue(this.value(), event, 'none');
         }
     }
     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($event)" }, 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 }); }
+    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 }, nativeButton: { classPropertyName: "nativeButton", publicName: "nativeButton", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "focus": "onFocus($event)" }, properties: { "attr.type": "nativeButton() ? \"button\" : undefined", "attr.id": "tabId()", "attr.aria-selected": "active()", "attr.aria-controls": "panelId()", "attr.aria-disabled": "disabled() ? \"true\" : undefined", "attr.disabled": "null", "attr.data-composite-item-active": "active() ? \"\" : undefined", "attr.data-orientation": "rootContext.orientation()", "attr.data-activation-direction": "rootContext.activationDirection()", "attr.data-active": "active() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined" } }, exportAs: ["rdxTabsTab"], hostDirectives: [{ directive: i1.RdxCompositeItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTabsTab, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxTabsTab]',
                     exportAs: 'rdxTabsTab',
-                    hostDirectives: [
-                        {
-                            directive: RdxRovingFocusItemDirective,
-                            inputs: ['allowShiftKey']
-                        }
-                    ],
+                    hostDirectives: [RdxCompositeItem],
                     host: {
-                        type: 'button',
+                        '[attr.type]': 'nativeButton() ? "button" : undefined',
                         role: 'tab',
-                        '[id]': 'tabId()',
+                        '[attr.id]': 'tabId()',
                         '[attr.aria-selected]': 'active()',
                         '[attr.aria-controls]': 'panelId()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : undefined',
+                        '[attr.disabled]': 'null',
+                        '[attr.data-composite-item-active]': 'active() ? "" : undefined',
                         '[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)',
+                        '(click)': 'onClick($event)',
                         '(keydown)': 'onKeyDown($event)',
+                        '(pointerdown)': 'onPointerDown($event)',
                         '(focus)': 'onFocus($event)'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], nativeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeButton", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 const tabsImports = [RdxTabsRoot, RdxTabsList, RdxTabsTab, RdxTabsPanel, RdxTabsPanelPresence, RdxTabsIndicator];
 class RdxTabsModule {