solid-baseui 0.1.0-alpha.0

package/dist/lib/server/tabs/index.js

@@ -0,0 +1,1007 @@
+import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
+import { C as missing, p as initial, s as disabled, w as none } from "../internals/reasons.js";
+import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
+import { createChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
+import { transitionStatusMapping } from "../internals/stateAttributesMapping.js";
+import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-DCHzXWZU.js";
+import { t as createTransitionStatus } from "../createTransitionStatus-BTlrerSS.js";
+import { n as useDirection } from "../DirectionContext-YORWLF08.js";
+import { n as useCSPContext } from "../CSPContext-DOxR0PO7.js";
+import { mergeStyles } from "../internals/mergeStyles.js";
+import { Dynamic, escape, isServer, memo, mergeProps, ssrElement } from "@solidjs/web";
+import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, sharedConfig, untrack, useContext } from "solid-js";
+//#region src/tabs/root/TabsRootContext.ts
+var MISSING_CONTEXT$1 = Symbol("TabsRootContext");
+var TabsRootContext = createContext(MISSING_CONTEXT$1);
+function useTabsRootContext() {
+	const context = useContext(TabsRootContext);
+	if (context === MISSING_CONTEXT$1) throw new Error("Base UI: TabsRootContext is missing. Tabs parts must be placed within <Tabs.Root>.");
+	return context;
+}
+//#endregion
+//#region src/tabs/root/TabsRootDataAttributes.ts
+var TabsRootDataAttributes = /* @__PURE__ */ function(TabsRootDataAttributes) {
+	TabsRootDataAttributes["orientation"] = "data-orientation";
+	TabsRootDataAttributes["activationDirection"] = "data-activation-direction";
+	return TabsRootDataAttributes;
+}({});
+//#endregion
+//#region src/tabs/root/stateAttributesMapping.ts
+var tabsStateAttributesMapping = {
+	orientation: (value) => ({ [TabsRootDataAttributes.orientation]: value }),
+	tabActivationDirection: (value) => ({ [TabsRootDataAttributes.activationDirection]: value })
+};
+//#endregion
+//#region src/tabs/root/TabsRoot.tsx
+/** Groups tabs and their corresponding panels. */
+function TabsRoot(props) {
+	const internalProps = props;
+	const allProps = props;
+	const controlled = untrack(() => internalProps.value !== void 0);
+	const explicitDefault = untrack(() => internalProps.defaultValue !== void 0);
+	const initialDefaultProp = untrack(() => internalProps.defaultValue);
+	const initialDefaultValue = untrack(() => internalProps.defaultValue === void 0 ? 0 : internalProps.defaultValue);
+	const [uncontrolledValue, setUncontrolledValue] = createSignal(() => initialDefaultValue);
+	const [tabActivationDirection, setTabActivationDirection] = createSignal("none");
+	const [tabsVersion, setTabsVersion] = createSignal(0);
+	const [panelsVersion, setPanelsVersion] = createSignal(0);
+	const tabs = /* @__PURE__ */ new Map();
+	const panels = /* @__PURE__ */ new Map();
+	let nextTabOrder = 0;
+	let nextPanelOrder = 0;
+	let previousValue = untrack(() => controlled ? internalProps.value : uncontrolledValue());
+	let directionComputationIncomplete = false;
+	let shouldNotifyInitialValueChange = !explicitDefault;
+	let shouldHonorDisabledDefaultValue = explicitDefault;
+	let didRegisterTabs = false;
+	let lastKnownTabElement;
+	let tabChangeQueued = false;
+	let panelChangeQueued = false;
+	let disposed = false;
+	let warnedMode = false;
+	let warnedDefault = false;
+	const others = omit(allProps, "as", "class", "defaultValue", "onValueChange", "orientation", "ref", "style", "value");
+	const value = createMemo(() => controlled ? internalProps.value : uncontrolledValue());
+	const orientation = createMemo(() => internalProps.orientation ?? "horizontal");
+	const state = createMemo(() => ({
+		orientation: orientation(),
+		tabActivationDirection: tabActivationDirection()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), tabsStateAttributesMapping));
+	function notifyTabChange() {
+		if (tabChangeQueued) return;
+		tabChangeQueued = true;
+		queueMicrotask(() => {
+			tabChangeQueued = false;
+			if (!disposed) setTabsVersion((version) => version + 1);
+		});
+	}
+	function notifyPanelChange() {
+		if (panelChangeQueued) return;
+		panelChangeQueued = true;
+		queueMicrotask(() => {
+			panelChangeQueued = false;
+			if (!disposed) setPanelsVersion((version) => version + 1);
+		});
+	}
+	function registerTab(registration) {
+		registration.order = nextTabOrder;
+		nextTabOrder += 1;
+		tabs.set(registration.token, registration);
+		notifyTabChange();
+		return () => {
+			tabs.delete(registration.token);
+			notifyTabChange();
+		};
+	}
+	function registerPanel(registration) {
+		registration.order = nextPanelOrder;
+		nextPanelOrder += 1;
+		panels.set(registration.token, registration);
+		notifyPanelChange();
+		return () => {
+			panels.delete(registration.token);
+			notifyPanelChange();
+		};
+	}
+	function claimPanel(registration) {
+		if (!panels.has(registration.token)) return;
+		registration.order = nextPanelOrder;
+		nextPanelOrder += 1;
+		notifyPanelChange();
+	}
+	function getOrderedTabs() {
+		return Array.from(tabs.values()).filter((tab) => {
+			const element = tab.element();
+			return element && element.isConnected;
+		}).sort(compareRegistrations);
+	}
+	function getOrderedPanels() {
+		return Array.from(panels.values()).filter((panel) => {
+			const element = panel.element();
+			return panel.rendered() && element && element.isConnected;
+		}).sort(compareRegistrations);
+	}
+	function getTabElementBySelectedValue(selectedValue) {
+		tabsVersion();
+		return getOrderedTabs().find((tab) => tab.value() === selectedValue)?.element();
+	}
+	function getTabIdByPanelValue(panelValue) {
+		tabsVersion();
+		return getOrderedTabs().find((tab) => tab.value() === panelValue)?.id();
+	}
+	function getTabPanelIdByValue(tabValue) {
+		panelsVersion();
+		let matchingPanel;
+		for (const panel of panels.values()) {
+			const element = panel.element();
+			if (panel.rendered() && element?.isConnected && panel.value() === tabValue && (!matchingPanel || panel.order > matchingPanel.order)) matchingPanel = panel;
+		}
+		return matchingPanel?.id();
+	}
+	function onValueChange(nextValue, details) {
+		const activationDirection = computeActivationDirection(value(), nextValue, orientation(), getOrderedTabs());
+		details.activationDirection = activationDirection;
+		internalProps.onValueChange?.(nextValue, details);
+		if (details.isCanceled) return false;
+		if (!controlled) {
+			previousValue = nextValue;
+			directionComputationIncomplete = false;
+			setTabActivationDirection(activationDirection);
+			setUncontrolledValue(() => nextValue);
+		}
+		return true;
+	}
+	function commitAutomaticValueChange(nextValue, reason) {
+		previousValue = nextValue;
+		directionComputationIncomplete = false;
+		setTabActivationDirection("none");
+		setUncontrolledValue(() => nextValue);
+		internalProps.onValueChange?.(nextValue, createChangeEventDetails(reason, void 0, void 0, { activationDirection: "none" }));
+		shouldNotifyInitialValueChange = false;
+	}
+	const context = {
+		value,
+		orientation,
+		tabActivationDirection,
+		state,
+		tabsVersion,
+		panelsVersion,
+		getOrderedTabs,
+		getTabIndex(registration) {
+			tabsVersion();
+			return getOrderedTabs().indexOf(registration);
+		},
+		getPanelIndex(registration) {
+			panelsVersion();
+			return getOrderedPanels().indexOf(registration);
+		},
+		getTabElementBySelectedValue,
+		getTabIdByPanelValue,
+		getTabPanelIdByValue,
+		claimPanel,
+		notifyTabChange,
+		notifyPanelChange,
+		onValueChange,
+		registerTab,
+		registerPanel
+	};
+	createEffect(() => {
+		tabsVersion();
+		const currentValue = value();
+		const currentOrientation = orientation();
+		const orderedTabs = getOrderedTabs();
+		return {
+			currentValue,
+			direction: previousValue === currentValue && !directionComputationIncomplete ? void 0 : computeActivationDirection(previousValue, currentValue, currentOrientation, orderedTabs),
+			incomplete: previousValue != null && currentValue != null && orderedTabs.every((tab) => tab.value() !== currentValue)
+		};
+	}, (current) => {
+		if (current.direction === void 0) return;
+		directionComputationIncomplete = current.incomplete;
+		setTabActivationDirection(current.direction);
+		if (!directionComputationIncomplete) previousValue = current.currentValue;
+	});
+	createEffect(() => {
+		tabsVersion();
+		return {
+			currentValue: value(),
+			registrations: getOrderedTabs().map((tab) => ({
+				registration: tab,
+				disabled: tab.disabled(),
+				element: tab.element(),
+				value: tab.value()
+			}))
+		};
+	}, (current) => {
+		if (controlled) return;
+		const registrations = current.registrations;
+		if (registrations.length === 0) {
+			if (didRegisterTabs && current.currentValue !== null && !lastKnownTabElement?.isConnected) commitAutomaticValueChange(null, missing);
+			return;
+		}
+		didRegisterTabs = true;
+		lastKnownTabElement = registrations[0]?.element;
+		const selectedTab = registrations.find((tab) => tab.value === current.currentValue);
+		const firstEnabledTab = registrations.find((tab) => !tab.disabled);
+		const selectionIsDisabled = selectedTab?.disabled === true;
+		const selectionIsMissing = selectedTab == null && current.currentValue !== null;
+		if (!selectionIsDisabled && current.currentValue === initialDefaultValue) shouldHonorDisabledDefaultValue = false;
+		if (shouldHonorDisabledDefaultValue && selectionIsDisabled && current.currentValue === initialDefaultValue) return;
+		if (selectionIsDisabled || selectionIsMissing) {
+			const fallbackValue = firstEnabledTab?.value ?? null;
+			if (current.currentValue === fallbackValue) {
+				shouldNotifyInitialValueChange = false;
+				return;
+			}
+			commitAutomaticValueChange(fallbackValue, shouldNotifyInitialValueChange ? initial : selectionIsDisabled ? disabled : missing);
+			return;
+		}
+		if (shouldNotifyInitialValueChange && selectedTab) {
+			internalProps.onValueChange?.(current.currentValue, createChangeEventDetails(initial, void 0, void 0, { activationDirection: "none" }));
+			shouldNotifyInitialValueChange = false;
+		}
+	});
+	createEffect(() => ({
+		defaultValue: internalProps.defaultValue,
+		suppliedControlled: internalProps.value !== void 0
+	}), (current) => {
+		if (!isDevelopment()) return;
+		if (!warnedMode && current.suppliedControlled !== controlled) {
+			warnedMode = true;
+			console.error(`Base UI: A Tabs component changed from ${controlled ? "controlled" : "uncontrolled"} to ${controlled ? "uncontrolled" : "controlled"}.`);
+		}
+		if (!controlled && !warnedDefault && current.defaultValue !== initialDefaultProp) {
+			warnedDefault = true;
+			console.error("Base UI: A Tabs component changed its defaultValue after initialization.");
+		}
+	});
+	onCleanup(() => {
+		disposed = true;
+	});
+	return TabsRootContext({
+		value: context,
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "div";
+				},
+				ref: [internalProps.ref],
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				}
+			}, stateAttributes, others));
+		}
+	});
+}
+function compareRegistrations(a, b) {
+	const aElement = a.element();
+	const bElement = b.element();
+	if (aElement && bElement && aElement !== bElement) {
+		const position = aElement.compareDocumentPosition(bElement);
+		if ((position & Node.DOCUMENT_POSITION_DISCONNECTED) === 0) {
+			if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+			if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+		}
+	}
+	return a.order - b.order;
+}
+function computeActivationDirection(oldValue, newValue, orientation, tabs) {
+	if (oldValue == null || newValue == null) return "none";
+	const oldTab = tabs.find((tab) => tab.value() === oldValue)?.element();
+	const newTab = tabs.find((tab) => tab.value() === newValue)?.element();
+	const backward = orientation === "horizontal" ? "left" : "up";
+	const forward = orientation === "horizontal" ? "right" : "down";
+	if (!oldTab || !newTab) {
+		if (oldTab !== newTab && (typeof oldValue === "number" || typeof oldValue === "string") && typeof oldValue === typeof newValue) return newValue > oldValue ? forward : backward;
+		return "none";
+	}
+	const position = orientation === "horizontal" ? "left" : "top";
+	const oldPosition = oldTab.getBoundingClientRect()[position];
+	const newPosition = newTab.getBoundingClientRect()[position];
+	if (newPosition < oldPosition) return backward;
+	if (newPosition > oldPosition) return forward;
+	return "none";
+}
+function isDevelopment() {
+	return Boolean(false);
+}
+//#endregion
+//#region src/tabs/list/TabsListContext.ts
+var MISSING_CONTEXT = Symbol("TabsListContext");
+var TabsListContext = createContext(MISSING_CONTEXT);
+function useTabsListContext() {
+	const context = useContext(TabsListContext);
+	if (context === MISSING_CONTEXT) throw new Error("Base UI: TabsListContext is missing. TabsList parts must be placed within <Tabs.List>.");
+	return context;
+}
+//#endregion
+//#region src/tabs/list/TabsList.tsx
+/** Groups the individual tab buttons. */
+function TabsList(props) {
+	const root = useTabsRootContext();
+	const direction = useDirection();
+	const internalProps = props;
+	const allProps = props;
+	const [listElement, setListElement] = createSignal();
+	const [highlightedTab, setHighlightedTabToken] = createSignal();
+	const indicatorListeners = /* @__PURE__ */ new Set();
+	let initializedHighlight = false;
+	let navigating = false;
+	let navigationResetQueued = false;
+	const others = omit(allProps, "activateOnFocus", "as", "class", "loopFocus", "onKeyDown", "ref", "style");
+	const activateOnFocus = createMemo(() => internalProps.activateOnFocus ?? false);
+	const loopFocus = createMemo(() => internalProps.loopFocus ?? true);
+	const state = createMemo(() => root.state());
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), tabsStateAttributesMapping));
+	function markNavigating() {
+		navigating = true;
+		if (navigationResetQueued) return;
+		navigationResetQueued = true;
+		queueMicrotask(() => {
+			navigationResetQueued = false;
+			navigating = false;
+		});
+	}
+	function setHighlightedTab(registration) {
+		setHighlightedTabToken(registration.token);
+	}
+	function registerIndicatorUpdateListener(listener) {
+		indicatorListeners.add(listener);
+		return () => {
+			indicatorListeners.delete(listener);
+		};
+	}
+	function notifyIndicators() {
+		for (const listener of indicatorListeners) listener();
+	}
+	function handleKeyDown(event) {
+		if (event.defaultPrevented || event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) return;
+		const orderedTabs = root.getOrderedTabs();
+		if (orderedTabs.length < 2 && event.key !== "Home" && event.key !== "End") return;
+		const eventTarget = event.composedPath()[0];
+		const currentIndex = orderedTabs.findIndex((tab) => {
+			const element = tab.element();
+			return element && eventTarget instanceof Node && element.contains(eventTarget);
+		});
+		if (currentIndex < 0) return;
+		let targetIndex;
+		if (event.key === "Home") targetIndex = findNavigableEndpoint(orderedTabs, 1);
+		else if (event.key === "End") targetIndex = findNavigableEndpoint(orderedTabs, -1);
+		else {
+			const delta = getNavigationDelta(event.key, root.orientation(), direction());
+			if (delta === 0) return;
+			targetIndex = getNextNavigableIndex(orderedTabs, currentIndex, delta, loopFocus());
+		}
+		if (targetIndex === void 0 || targetIndex === currentIndex) return;
+		const target = orderedTabs[targetIndex];
+		const targetElement = target?.element();
+		if (!target || !targetElement) return;
+		event.preventDefault();
+		event.stopPropagation();
+		markNavigating();
+		setHighlightedTab(target);
+		scrollTabIntoView(targetElement, root.orientation());
+		queueMicrotask(() => target.element()?.focus());
+	}
+	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
+	const context = {
+		activateOnFocus,
+		highlightedTab,
+		listElement,
+		markNavigating,
+		registerIndicatorUpdateListener,
+		setHighlightedTab
+	};
+	createEffect(() => {
+		root.tabsVersion();
+		return {
+			activeValue: root.value(),
+			element: listElement(),
+			tabs: root.getOrderedTabs().map((tab) => ({
+				registration: tab,
+				disabled: tab.disabled(),
+				value: tab.value()
+			}))
+		};
+	}, (current) => {
+		const active = current.tabs.find((tab) => tab.value === current.activeValue);
+		if (!initializedHighlight && current.tabs.length > 0) {
+			initializedHighlight = true;
+			setHighlightedTab(active?.registration ?? current.tabs[0].registration);
+			return;
+		}
+		if (!active || active.disabled || navigating) return;
+		const activeElement = current.element ? getDeepActiveElement(current.element.ownerDocument) : null;
+		if (current.element && activeElement && containsComposed(current.element, activeElement)) return;
+		setHighlightedTab(active.registration);
+	});
+	createEffect(() => {
+		root.tabsVersion();
+		return {
+			element: listElement(),
+			tabs: root.getOrderedTabs().flatMap((tab) => tab.element() ?? [])
+		};
+	}, (current) => {
+		const element = current.element;
+		if (!element) return;
+		const ResizeObserverConstructor = element.ownerDocument.defaultView?.ResizeObserver;
+		if (!ResizeObserverConstructor) return;
+		const observer = new ResizeObserverConstructor(notifyIndicators);
+		observer.observe(element);
+		for (const tabElement of current.tabs) observer.observe(tabElement);
+		return () => observer.disconnect();
+	});
+	createEffect(listElement, (element) => {
+		if (!element) return;
+		const MutationObserverConstructor = element.ownerDocument.defaultView?.MutationObserver;
+		if (!MutationObserverConstructor) return;
+		const observer = new MutationObserverConstructor(() => root.notifyTabChange());
+		observer.observe(element, {
+			childList: true,
+			subtree: true
+		});
+		return () => observer.disconnect();
+	});
+	createEffect(() => ({
+		activeValue: root.value(),
+		version: root.tabsVersion()
+	}), () => notifyIndicators());
+	return TabsListContext({
+		value: context,
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "div";
+				},
+				ref: [((element) => setListElement(element)), internalProps.ref],
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				},
+				role: "tablist",
+				get ["aria-orientation"]() {
+					return root.orientation() === "vertical" ? "vertical" : void 0;
+				},
+				onKeyDown
+			}, stateAttributes, others));
+		}
+	});
+}
+function getNavigationDelta(key, orientation, direction) {
+	if (orientation === "vertical") {
+		if (key === "ArrowUp") return -1;
+		return key === "ArrowDown" ? 1 : 0;
+	}
+	if (key === "ArrowLeft") return direction === "rtl" ? 1 : -1;
+	if (key === "ArrowRight") return direction === "rtl" ? -1 : 1;
+	return 0;
+}
+function getNextNavigableIndex(tabs, currentIndex, delta, loop) {
+	let index = currentIndex;
+	for (let count = 0; count < tabs.length; count += 1) {
+		index += delta;
+		if (index < 0 || index >= tabs.length) {
+			if (!loop) return;
+			index = (index + tabs.length) % tabs.length;
+		}
+		const element = tabs[index]?.element();
+		if (element && !isNativelyDisabled(element) && !element.hidden) return index;
+	}
+}
+function findNavigableEndpoint(tabs, direction) {
+	let index = direction === 1 ? 0 : tabs.length - 1;
+	while (index >= 0 && index < tabs.length) {
+		const element = tabs[index]?.element();
+		if (element && !isNativelyDisabled(element) && !element.hidden) return index;
+		index += direction;
+	}
+}
+function isNativelyDisabled(element) {
+	try {
+		return element.matches(":disabled");
+	} catch {
+		return false;
+	}
+}
+function scrollTabIntoView(element, orientation) {
+	element.scrollIntoView?.({
+		block: orientation === "vertical" ? "nearest" : "center",
+		inline: orientation === "horizontal" ? "nearest" : "center"
+	});
+}
+function getDeepActiveElement(document) {
+	let active = document.activeElement;
+	while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+	return active;
+}
+function containsComposed(parent, child) {
+	if (parent.contains(child)) return true;
+	let current = child;
+	while (current) {
+		if (current === parent) return true;
+		current = current.parentNode ?? (current instanceof ShadowRoot ? current.host : null);
+	}
+	return false;
+}
+//#endregion
+//#region src/tabs/tab/TabsTabDataAttributes.ts
+var TabsTabDataAttributes = /* @__PURE__ */ function(TabsTabDataAttributes) {
+	TabsTabDataAttributes["orientation"] = "data-orientation";
+	TabsTabDataAttributes["activationDirection"] = "data-activation-direction";
+	TabsTabDataAttributes["active"] = "data-active";
+	TabsTabDataAttributes["disabled"] = "data-disabled";
+	return TabsTabDataAttributes;
+}({});
+//#endregion
+//#region src/tabs/tab/TabsTab.tsx
+var stateAttributesMapping$2 = {
+	...tabsStateAttributesMapping,
+	active: (value) => value ? { [TabsTabDataAttributes.active]: "" } : null,
+	disabled: (value) => value ? { [TabsTabDataAttributes.disabled]: "" } : null
+};
+/** An interactive tab that selects its matching panel. */
+function TabsTab(props) {
+	const root = useTabsRootContext();
+	const list = useTabsListContext();
+	const internalProps = props;
+	const allProps = props;
+	const generatedId = `base-ui-${createUniqueId()}`;
+	const token = Symbol("TabsTab");
+	const [element, setElement] = createSignal();
+	const id = createMemo(() => internalProps.id ?? generatedId);
+	const disabled = createMemo(() => internalProps.disabled ?? false);
+	const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
+	const active = createMemo(() => internalProps.value === root.value());
+	const registration = {
+		token,
+		order: 0,
+		element,
+		id,
+		value: () => internalProps.value,
+		disabled
+	};
+	const unregister = root.registerTab(registration);
+	const others = omit(allProps, "as", "class", "disabled", "id", "nativeButton", "onClick", "onFocus", "onKeyDown", "onPointerDown", "ref", "style", "value");
+	const state = createMemo(() => ({
+		disabled: disabled(),
+		active: active(),
+		orientation: root.orientation(),
+		tabActivationDirection: root.tabActivationDirection()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), stateAttributesMapping$2));
+	const tabIndex = createMemo(() => list.highlightedTab() === token ? 0 : -1);
+	const tabPanelId = createMemo(() => root.getTabPanelIdByValue(internalProps.value));
+	let pressing = false;
+	let mainButton = false;
+	let removePointerListeners;
+	function activate(event) {
+		root.onValueChange(internalProps.value, createChangeEventDetails(none, event, void 0, { activationDirection: "none" }));
+	}
+	function preventDisabledInteraction(event) {
+		if (!disabled()) return;
+		event.preventDefault();
+		event.preventBaseUIHandler();
+	}
+	function handleClick(event) {
+		if (active() || disabled() || event.button !== 0) return;
+		activate(event);
+	}
+	function handleFocus(event) {
+		list.setHighlightedTab(registration);
+		if (!active() && !disabled() && list.activateOnFocus() && (!pressing || mainButton)) activate(event);
+	}
+	function handlePointerDown(event) {
+		if (active() || disabled()) return;
+		pressing = true;
+		mainButton = event.button === 0;
+		removePointerListeners?.();
+		const document = event.currentTarget.ownerDocument;
+		const handlePointerEnd = () => {
+			pressing = false;
+			mainButton = false;
+			removePointerListeners?.();
+			removePointerListeners = void 0;
+		};
+		document.addEventListener("pointerup", handlePointerEnd);
+		document.addEventListener("pointercancel", handlePointerEnd);
+		removePointerListeners = () => {
+			document.removeEventListener("pointerup", handlePointerEnd);
+			document.removeEventListener("pointercancel", handlePointerEnd);
+		};
+	}
+	function handleKeyDown(event) {
+		if (event.target !== event.currentTarget || active() || disabled() || list.activateOnFocus() || event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		activate(event);
+	}
+	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledInteraction : void 0), () => internalProps.onClick, () => handleClick);
+	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
+	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
+	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
+	createEffect(() => ({
+		disabled: disabled(),
+		element: element(),
+		id: id(),
+		value: internalProps.value
+	}), () => root.notifyTabChange());
+	onCleanup(() => {
+		removePointerListeners?.();
+		unregister();
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "button";
+		},
+		ref: [((current) => setElement(current)), internalProps.ref],
+		get id() {
+			return id();
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		get type() {
+			return nativeButton() ? "button" : void 0;
+		},
+		role: "tab",
+		get tabIndex() {
+			return tabIndex();
+		},
+		get ["aria-controls"]() {
+			return tabPanelId();
+		},
+		get ["aria-selected"]() {
+			return active() ? "true" : "false";
+		},
+		get ["aria-disabled"]() {
+			return disabled() ? "true" : void 0;
+		},
+		get ["data-composite-item-active"]() {
+			return active() ? "" : void 0;
+		},
+		onClick,
+		onFocus,
+		onKeyDown,
+		onPointerDown
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/tabs/indicator/TabsIndicatorCssVars.ts
+var TabsIndicatorCssVars = /* @__PURE__ */ function(TabsIndicatorCssVars) {
+	TabsIndicatorCssVars["activeTabLeft"] = "--active-tab-left";
+	TabsIndicatorCssVars["activeTabRight"] = "--active-tab-right";
+	TabsIndicatorCssVars["activeTabTop"] = "--active-tab-top";
+	TabsIndicatorCssVars["activeTabBottom"] = "--active-tab-bottom";
+	TabsIndicatorCssVars["activeTabWidth"] = "--active-tab-width";
+	TabsIndicatorCssVars["activeTabHeight"] = "--active-tab-height";
+	return TabsIndicatorCssVars;
+}({});
+//#endregion
+//#region src/tabs/indicator/prehydrationScript.ts
+var tabsIndicatorPrehydrationScript = `!function(){const t=document.currentScript.previousElementSibling;if(!t)return;const e=t.closest('[role="tablist"]');if(!e)return;const i=e.querySelector("[data-active]");if(!i)return;function o(t){const e=getComputedStyle(t);let i=parseFloat(e.width)||0,o=parseFloat(e.height)||0;return(Math.round(i)!==t.offsetWidth||Math.round(o)!==t.offsetHeight)&&(i=t.offsetWidth,o=t.offsetHeight),{width:i,height:o}}function n(){let n=0,r=0,s=0,h=0;const{width:c,height:f}=o(i),{width:l,height:u}=o(e),d=i.getBoundingClientRect(),a=e.getBoundingClientRect(),g=l>0?a.width/l:1,b=u>0?a.height/u:1;if(Math.abs(g)>Number.EPSILON&&Math.abs(b)>Number.EPSILON){const t=d.left-a.left,i=d.top-a.top;n=t/g+e.scrollLeft-e.clientLeft,s=i/b+e.scrollTop-e.clientTop}else n=i.offsetLeft,s=i.offsetTop;const p=c,m=f;function v(e,i){t.style.setProperty(\`--active-tab-\${e}\`,\`\${i}px\`)}return r=e.scrollWidth-n-p,h=e.scrollHeight-s-m,v("left",n),v("right",r),v("top",s),v("bottom",h),v("width",p),v("height",m),p>0&&m>0&&(t.removeAttribute("hidden"),!0)}if(n()||"undefined"==typeof ResizeObserver)return;let r,s;function h(){s.disconnect(),clearTimeout(r)}s=new ResizeObserver(()=>{t.isConnected&&t.hasAttribute("hidden")&&i.hasAttribute("data-active")?n()&&h():h()}),s.observe(i),r=setTimeout(h,1e4)}();`;
+//#endregion
+//#region src/tabs/indicator/TabsIndicator.tsx
+var stateAttributesMapping$1 = {
+	...tabsStateAttributesMapping,
+	activeTabPosition: () => null,
+	activeTabSize: () => null
+};
+/** A visual indicator positioned over the active tab. */
+function TabsIndicator(props) {
+	const root = useTabsRootContext();
+	const list = useTabsListContext();
+	const csp = useCSPContext();
+	const internalProps = props;
+	const allProps = props;
+	const [geometry, setGeometry] = createSignal(null);
+	const [measureVersion, setMeasureVersion] = createSignal(0);
+	const [hydrating, setHydrating] = createSignal(Boolean(isServer || sharedConfig.hydrating));
+	const trustedPrehydrationScript = { innerHTML: tabsIndicatorPrehydrationScript };
+	const others = omit(allProps, "as", "class", "ref", "renderBeforeHydration", "style");
+	const state = createMemo(() => ({
+		...root.state(),
+		activeTabPosition: geometry()?.position ?? null,
+		activeTabSize: geometry()?.size ?? null
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const internalStyle = createMemo(() => {
+		const current = geometry();
+		if (!current) return;
+		return {
+			[TabsIndicatorCssVars.activeTabLeft]: `${current.position.left}px`,
+			[TabsIndicatorCssVars.activeTabRight]: `${current.position.right}px`,
+			[TabsIndicatorCssVars.activeTabTop]: `${current.position.top}px`,
+			[TabsIndicatorCssVars.activeTabBottom]: `${current.position.bottom}px`,
+			[TabsIndicatorCssVars.activeTabWidth]: `${current.size.width}px`,
+			[TabsIndicatorCssVars.activeTabHeight]: `${current.size.height}px`
+		};
+	});
+	const styleValue = createMemo(() => mergeStyles(internalStyle(), resolveStyle(props.style, state())));
+	const hidden = createMemo(() => {
+		const current = geometry();
+		return !current || current.size.width <= 0 || current.size.height <= 0;
+	});
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), stateAttributesMapping$1));
+	function measure(listElement, selectedValue) {
+		if (!listElement || selectedValue == null) return null;
+		const activeTab = root.getTabElementBySelectedValue(selectedValue);
+		if (!activeTab) return null;
+		const size = getCssDimensions(activeTab);
+		const listSize = getCssDimensions(listElement);
+		const tabRect = activeTab.getBoundingClientRect();
+		const listRect = listElement.getBoundingClientRect();
+		const scaleX = listSize.width > 0 ? listRect.width / listSize.width : 1;
+		const scaleY = listSize.height > 0 ? listRect.height / listSize.height : 1;
+		let left;
+		let top;
+		if (scaleX > Number.EPSILON && scaleY > Number.EPSILON) {
+			left = (tabRect.left - listRect.left) / scaleX + listElement.scrollLeft - listElement.clientLeft;
+			top = (tabRect.top - listRect.top) / scaleY + listElement.scrollTop - listElement.clientTop;
+		} else {
+			left = activeTab.offsetLeft;
+			top = activeTab.offsetTop;
+		}
+		return {
+			position: {
+				left,
+				right: listElement.scrollWidth - left - size.width,
+				top,
+				bottom: listElement.scrollHeight - top - size.height
+			},
+			size
+		};
+	}
+	const unregisterListener = list.registerIndicatorUpdateListener(() => {
+		setMeasureVersion((version) => version + 1);
+	});
+	createEffect(() => {
+		measureVersion();
+		root.tabsVersion();
+		return measure(list.listElement(), root.value());
+	}, (nextGeometry) => {
+		setGeometry(nextGeometry);
+	});
+	onSettled(() => {
+		setHydrating(false);
+	});
+	onCleanup(unregisterListener);
+	return Show({
+		get when() {
+			return root.value() != null;
+		},
+		get children() {
+			return [Show({
+				get when() {
+					return props.as;
+				},
+				get fallback() {
+					return ssrElement("span", () => {
+						return mergeProps({
+							get ["class"]() {
+								return classValue();
+							},
+							get style() {
+								return styleValue();
+							},
+							role: "presentation",
+							get hidden() {
+								return hidden();
+							}
+						}, stateAttributes, others);
+					}, void 0, true);
+				},
+				children: (component) => Dynamic(mergeProps({
+					get component() {
+						return component();
+					},
+					get ["class"]() {
+						return classValue();
+					},
+					get style() {
+						return styleValue();
+					},
+					role: "presentation",
+					get hidden() {
+						return hidden();
+					}
+				}, stateAttributes, others))
+			}), memo(() => {
+				return escape(memo(() => {
+					return !!((internalProps.renderBeforeHydration ?? false) && hydrating());
+				})() ? ssrElement("script", () => {
+					return mergeProps({ get nonce() {
+						return csp.nonce();
+					} }, trustedPrehydrationScript);
+				}, void 0, true) : (internalProps.renderBeforeHydration ?? false) && hydrating());
+			})];
+		}
+	});
+}
+function getCssDimensions(element) {
+	const computedStyle = element.ownerDocument.defaultView?.getComputedStyle(element);
+	let width = Number.parseFloat(computedStyle?.width ?? "") || 0;
+	let height = Number.parseFloat(computedStyle?.height ?? "") || 0;
+	if (Math.round(width) !== element.offsetWidth || Math.round(height) !== element.offsetHeight) {
+		width = element.offsetWidth;
+		height = element.offsetHeight;
+	}
+	return {
+		width,
+		height
+	};
+}
+//#endregion
+//#region src/tabs/panel/TabsPanelDataAttributes.ts
+var TabsPanelDataAttributes = /* @__PURE__ */ function(TabsPanelDataAttributes) {
+	TabsPanelDataAttributes["orientation"] = "data-orientation";
+	TabsPanelDataAttributes["activationDirection"] = "data-activation-direction";
+	TabsPanelDataAttributes["hidden"] = "data-hidden";
+	TabsPanelDataAttributes["index"] = "data-index";
+	return TabsPanelDataAttributes;
+}({});
+//#endregion
+//#region src/tabs/panel/TabsPanel.tsx
+var stateAttributesMapping = {
+	...tabsStateAttributesMapping,
+	...transitionStatusMapping,
+	hidden: (value) => value ? { [TabsPanelDataAttributes.hidden]: "" } : null
+};
+/** A panel displayed when its corresponding tab is active. */
+function TabsPanel(props) {
+	const root = useTabsRootContext();
+	const internalProps = props;
+	const allProps = props;
+	const generatedId = `base-ui-${createUniqueId()}`;
+	const token = Symbol("TabsPanel");
+	const [element, setElement] = createSignal();
+	const id = createMemo(() => internalProps.id ?? generatedId);
+	const open = createMemo(() => internalProps.value === root.value());
+	const transition = createTransitionStatus(() => open());
+	const hidden = createMemo(() => !transition.mounted());
+	const shouldRender = createMemo(() => (internalProps.keepMounted ?? false) || transition.mounted());
+	const registration = {
+		token,
+		order: 0,
+		element,
+		id,
+		value: () => internalProps.value,
+		rendered: shouldRender
+	};
+	const unregister = root.registerPanel(registration);
+	const others = omit(allProps, "as", "class", "id", "keepMounted", "ref", "style", "value");
+	const state = createMemo(() => ({
+		...root.state(),
+		hidden: hidden(),
+		transitionStatus: transition.transitionStatus()
+	}));
+	const classValue = createMemo(() => shouldRender() ? resolveClass(props.class, state()) : void 0);
+	const styleValue = createMemo(() => shouldRender() ? resolveStyle(props.style, state()) : void 0);
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), stateAttributesMapping));
+	const index = createMemo(() => root.getPanelIndex(registration));
+	const correspondingTabId = createMemo(() => root.getTabIdByPanelValue(internalProps.value));
+	let latestOpen = untrack(open);
+	createEffect(() => ({
+		element: element(),
+		open: open(),
+		status: transition.transitionStatus()
+	}), (current) => {
+		latestOpen = current.open;
+		if (current.open || current.status !== "ending" || !current.element) return;
+		const abortController = new AbortController();
+		runOnceAnimationsFinish(current.element, () => {
+			if (!latestOpen) transition.setMounted(false);
+		}, abortController.signal);
+		return () => abortController.abort();
+	});
+	createEffect(() => ({
+		element: element(),
+		id: id(),
+		rendered: shouldRender(),
+		value: internalProps.value
+	}), (current) => {
+		if (current.rendered && current.element) root.claimPanel(registration);
+		else root.notifyPanelChange();
+	});
+	onCleanup(() => unregister());
+	return Show({
+		get when() {
+			return shouldRender();
+		},
+		get children() {
+			return Show({
+				get when() {
+					return props.as;
+				},
+				get fallback() {
+					return ssrElement("div", () => {
+						return mergeProps({
+							get id() {
+								return id();
+							},
+							get ["class"]() {
+								return classValue();
+							},
+							get style() {
+								return styleValue();
+							},
+							role: "tabpanel",
+							get tabIndex() {
+								return open() ? 0 : -1;
+							},
+							get ["aria-labelledby"]() {
+								return correspondingTabId();
+							},
+							get hidden() {
+								return hidden();
+							},
+							get inert() {
+								return !open() ? true : void 0;
+							},
+							get ["data-index"]() {
+								return index();
+							}
+						}, stateAttributes, others);
+					}, void 0, true);
+				},
+				children: (component) => Dynamic(mergeProps({
+					get component() {
+						return component();
+					},
+					ref: [((current) => setElement(current)), internalProps.ref],
+					get id() {
+						return id();
+					},
+					get ["class"]() {
+						return classValue();
+					},
+					get style() {
+						return styleValue();
+					},
+					role: "tabpanel",
+					get tabIndex() {
+						return open() ? 0 : -1;
+					},
+					get ["aria-labelledby"]() {
+						return correspondingTabId();
+					},
+					get hidden() {
+						return hidden();
+					},
+					get inert() {
+						return !open() ? true : void 0;
+					},
+					get ["data-index"]() {
+						return index();
+					}
+				}, stateAttributes, others))
+			});
+		}
+	});
+}
+//#endregion
+//#region src/tabs/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Indicator: () => TabsIndicator,
+	List: () => TabsList,
+	Panel: () => TabsPanel,
+	Root: () => TabsRoot,
+	Tab: () => TabsTab
+});
+//#endregion
+export { index_parts_exports as Tabs };