@yahoo/uds 3.125.1 → 3.127.0

package/dist/components/client/IconButton.cjs

@@ -9,9 +9,9 @@ const require_generateDefaultClassName = require('../../automated-config/dist/ut
 const require_components_client_buttonConstants = require('./buttonConstants.cjs');
 const require_components_client_SpringMotionConfig = require('./SpringMotionConfig.cjs');
 const require_components_client_Button = require('./Button.cjs');
+let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let motion_react = require("motion/react");
 
 //#region src/components/client/IconButton.tsx

package/dist/components/client/IconButton.js

@@ -7,9 +7,9 @@ import { generateDefaultClassName } from "../../automated-config/dist/utils/gene
 import { buttonIconSvgSize } from "./buttonConstants.js";
 import { SpringMotionConfig } from "./SpringMotionConfig.js";
 import { iconMotionVariants, loadingMotionVariants } from "./Button.js";
+import { Progress } from "@yahoo/uds-icons";
 import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Progress } from "@yahoo/uds-icons";
 import { AnimatePresence, m, useReducedMotion } from "motion/react";
 
 //#region src/components/client/IconButton.tsx

package/dist/components/client/Input/Input.cjs

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_styles_styler = require('../../../styles/styler.cjs');
+const require_components_IconSlot = require('../../IconSlot.cjs');
 const require_components_Box = require('../../Box.cjs');
 const require_components_HStack = require('../../HStack.cjs');
 const require_components_VStack = require('../../VStack.cjs');
-const require_components_IconSlot = require('../../IconSlot.cjs');
 const require_components_client_AnimateHeightChange = require('../AnimateHeightChange.cjs');
 const require_components_client_Input_InputHelpTextInternal = require('./InputHelpTextInternal.cjs');
 let react = require("react");

package/dist/components/client/Input/Input.js

@@ -1,10 +1,10 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
 import { cx, getStyles } from "../../../styles/styler.js";
+import { IconSlot } from "../../IconSlot.js";
 import { Box } from "../../Box.js";
 import { HStack } from "../../HStack.js";
 import { VStack } from "../../VStack.js";
-import { IconSlot } from "../../IconSlot.js";
 import { AnimateHeightChange } from "../AnimateHeightChange.js";
 import { InputHelpTextInternal as InputHelpTextInternalMemo } from "./InputHelpTextInternal.js";
 import { forwardRef, memo, useCallback, useId, useImperativeHandle, useRef, useState } from "react";

package/dist/components/client/Input/InputHelpTextInternal.cjs

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_styles_styler = require('../../../styles/styler.cjs');
-const require_components_HStack = require('../../HStack.cjs');
 const require_components_IconSlot = require('../../IconSlot.cjs');
+const require_components_HStack = require('../../HStack.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 

package/dist/components/client/Input/InputHelpTextInternal.js

@@ -1,8 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
 import { cx, getStyles } from "../../../styles/styler.js";
-import { HStack } from "../../HStack.js";
 import { IconSlot } from "../../IconSlot.js";
+import { HStack } from "../../HStack.js";
 import { forwardRef, memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 

package/dist/components/client/Menu/Menu.ItemBase.cjs

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_styles_styler = require('../../../styles/styler.cjs');
-const require_components_HStack = require('../../HStack.cjs');
-const require_components_IconSlot = require('../../IconSlot.cjs');
 const require_components_client_Pressable = require('../Pressable.cjs');
+const require_components_IconSlot = require('../../IconSlot.cjs');
+const require_components_HStack = require('../../HStack.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let motion_react = require("motion/react");

package/dist/components/client/Menu/Menu.ItemBase.js

@@ -1,9 +1,9 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
 import { cx, getStyles } from "../../../styles/styler.js";
-import { HStack } from "../../HStack.js";
-import { IconSlot } from "../../IconSlot.js";
 import { Pressable } from "../Pressable.js";
+import { IconSlot } from "../../IconSlot.js";
+import { HStack } from "../../HStack.js";
 import { Children, forwardRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, m } from "motion/react";

package/dist/components/client/Menu/Menu.ItemCheckbox.cjs

@@ -4,9 +4,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_styles_styler = require('../../../styles/styler.cjs');
 const require_components_client_Menu_Menu_ItemBase = require('./Menu.ItemBase.cjs');
+let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let _ariakit_react = require("@ariakit/react");
 let _ariakit_react_menu = require("@ariakit/react/menu");
 

package/dist/components/client/Menu/Menu.ItemCheckbox.d.cts

@@ -88,6 +88,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
  *
  * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
  **/
-declare const MenuItemCheckbox: react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "hideEndIcon" | "rootProps" | "active"> & react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemCheckbox: react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "rootProps" | "hideEndIcon" | "active"> & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { MenuItemCheckbox, type MenuItemCheckboxProps };

package/dist/components/client/Menu/Menu.ItemCheckbox.d.ts

@@ -89,6 +89,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
  *
  * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
  **/
-declare const MenuItemCheckbox: react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "hideEndIcon" | "rootProps" | "active"> & react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemCheckbox: react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "rootProps" | "hideEndIcon" | "active"> & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { MenuItemCheckbox, type MenuItemCheckboxProps };

package/dist/components/client/Menu/Menu.ItemCheckbox.js

@@ -2,9 +2,9 @@
 "use client";
 import { cx, getStyles } from "../../../styles/styler.js";
 import { MenuItemBase } from "./Menu.ItemBase.js";
+import { Check } from "@yahoo/uds-icons";
 import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Check } from "@yahoo/uds-icons";
 import { useStoreState } from "@ariakit/react";
 import { MenuItemCheckbox as MenuItemCheckbox$2, useMenuContext } from "@ariakit/react/menu";
 

package/dist/components/client/Popover/PopoverContent.cjs

@@ -4,18 +4,18 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_index = require('../../../fixtures/dist/index.cjs');
 const require_styles_styler = require('../../../styles/styler.cjs');
-const require_components_Box = require('../../Box.cjs');
-const require_components_IconSlot = require('../../IconSlot.cjs');
 const require_components_client_Pressable = require('../Pressable.cjs');
+const require_components_IconSlot = require('../../IconSlot.cjs');
+const require_components_Box = require('../../Box.cjs');
 const require_components_client_Popover_PopoverContext = require('./PopoverContext.cjs');
 const require_components_client_Popover_UDSPopoverConfigProvider = require('./UDSPopoverConfigProvider.cjs');
 const require_hooks_useForkRef = require('../../../hooks/useForkRef.cjs');
 const require_hooks_useSvgFloatingContent = require('../../../hooks/useSvgFloatingContent.cjs');
 const require_utils_getUnscaledAnchorRect = require('../../../utils/getUnscaledAnchorRect.cjs');
 const require_components_SvgFloatingOverlay = require('../../SvgFloatingOverlay.cjs');
+let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let _ariakit_react = require("@ariakit/react");
 
 //#region src/components/client/Popover/PopoverContent.tsx

package/dist/components/client/Popover/PopoverContent.js

@@ -2,18 +2,18 @@
 "use client";
 import { spacingMap } from "../../../fixtures/dist/index.js";
 import { cx, getStyles } from "../../../styles/styler.js";
-import { Box } from "../../Box.js";
-import { IconSlot } from "../../IconSlot.js";
 import { Pressable } from "../Pressable.js";
+import { IconSlot } from "../../IconSlot.js";
+import { Box } from "../../Box.js";
 import { PopoverInternalContext } from "./PopoverContext.js";
 import { usePopoverConfig } from "./UDSPopoverConfigProvider.js";
 import { useForkRef } from "../../../hooks/useForkRef.js";
 import { useSvgFloatingContent } from "../../../hooks/useSvgFloatingContent.js";
 import { getUnscaledAnchorRect } from "../../../utils/getUnscaledAnchorRect.js";
 import { SvgFloatingOverlay } from "../../SvgFloatingOverlay.js";
+import { Cross } from "@yahoo/uds-icons";
 import { forwardRef, useContext, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Cross } from "@yahoo/uds-icons";
 import { Popover, PopoverArrow, PopoverDismiss, usePopoverContext, useStoreState } from "@ariakit/react";
 
 //#region src/components/client/Popover/PopoverContent.tsx

package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts

@@ -29,7 +29,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
   gap: SpacingAlias;
   dismissButtonSpacing: SpacingAlias;
   dismissIconSize: number;
-  ariaKitPlacement: ("bottom-start" | "bottom-end" | "top-start" | "top-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
+  ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("top" | "bottom" | "left" | "right") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
   animationDuration: number;
 };
 //#endregion

package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts

@@ -30,7 +30,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
   gap: SpacingAlias;
   dismissButtonSpacing: SpacingAlias;
   dismissIconSize: number;
-  ariaKitPlacement: ("bottom-start" | "bottom-end" | "top-start" | "top-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
+  ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("top" | "bottom" | "left" | "right") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
   animationDuration: number;
 };
 //#endregion

package/dist/components/client/Switch.cjs

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_styles_styler = require('../../styles/styler.cjs');
+const require_components_IconSlot = require('../IconSlot.cjs');
 const require_components_Box = require('../Box.cjs');
 const require_components_FormLabel = require('../FormLabel.cjs');
-const require_components_IconSlot = require('../IconSlot.cjs');
 const require_components_client_SpringMotionConfig = require('./SpringMotionConfig.cjs');
 let react = require("react");
 react = require_runtime.__toESM(react);

package/dist/components/client/Switch.js

@@ -1,9 +1,9 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
 import { cx, getStyles } from "../../styles/styler.js";
+import { IconSlot } from "../IconSlot.js";
 import { Box } from "../Box.js";
 import { FormLabel } from "../FormLabel.js";
-import { IconSlot } from "../IconSlot.js";
 import { SpringMotionConfig } from "./SpringMotionConfig.js";
 import React, { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/client/Tabs/Tab.cjs

@@ -0,0 +1,80 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_styles_styler = require('../../../styles/styler.cjs');
+const require_components_IconSlot = require('../../IconSlot.cjs');
+const require_components_Text = require('../../Text.cjs');
+const require_components_client_Tabs_tabsContext = require('./tabsContext.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _ariakit_react = require("@ariakit/react");
+
+//#region src/components/client/Tabs/Tab.tsx
+/** Matches {@link TabList} sliding-indicator underline (token CSS variables on the tab root). */
+const tabRootUnderlineClassName = require_styles_styler.cx("pointer-events-none absolute bottom-0 left-0 right-0", "h-[var(--uds-tab-underline-width,0px)] bg-[var(--uds-tab-underline-color,transparent)]", "transition-[height,background-color] duration-[240ms] ease-[cubic-bezier(0.2,0,0,1)]");
+function Tab({ value, children, startIcon, endIcon, disabled, asChild = false, className }) {
+	const generatedId = (0, react.useId)();
+	const uid = value ?? `uds-tab-${generatedId}`;
+	const { variant, disableMotion } = require_components_client_Tabs_tabsContext.useTabsContext();
+	const store = (0, _ariakit_react.useTabContext)();
+	if (!store) throw new Error("Tab must be wrapped in a Tabs component");
+	const selectedId = (0, _ariakit_react.useStoreState)(store, "selectedId");
+	const activeState = disabled || selectedId !== uid ? "off" : "on";
+	const rootBaseClass = require_styles_styler.getStyles({
+		tabSizeRoot: "default",
+		tabVariantRoot: variant,
+		tabVariantActiveRoot: "off"
+	});
+	const rootOnClass = require_styles_styler.getStyles({
+		tabSizeRoot: "default",
+		tabVariantRoot: variant,
+		tabVariantActiveRoot: "on"
+	});
+	const configClass = activeState === "on" ? require_styles_styler.cx(rootOnClass, !disableMotion && require_styles_styler.cx("!bg-transparent", "!shadow-none")) : rootBaseClass;
+	const iconConfigClass = require_styles_styler.getStyles({
+		tabSizeIcon: "default",
+		tabVariantIcon: variant,
+		tabVariantActiveIcon: activeState
+	});
+	const tabClass = require_styles_styler.cx(configClass, "inline-flex items-center shrink-0 box-border relative", !disableMotion && "z-[1]", "cursor-pointer select-none whitespace-nowrap", !disabled && "uds-ring", disabled && "opacity-50 cursor-default pointer-events-none", "border-solid border-b-solid", "transition-colors duration-[240ms] ease-[cubic-bezier(0.2,0,0,1)]", className);
+	const resolvedContent = asChild && (0, react.isValidElement)(children) ? children.props.children ?? null : children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.Tab, {
+		id: uid,
+		disabled,
+		className: tabClass,
+		render: asChild && (0, react.isValidElement)(children) ? children : void 0,
+		children: [
+			!(activeState === "on" && !disableMotion) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"aria-hidden": true,
+				className: tabRootUnderlineClassName
+			}) : null,
+			startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: startIcon,
+				iconProps: {
+					size: "sm",
+					color: "current"
+				},
+				className: iconConfigClass
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+				variant: "inherit",
+				as: "span",
+				color: "current",
+				children: resolvedContent
+			}),
+			endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: endIcon,
+				iconProps: {
+					size: "sm",
+					color: "current"
+				},
+				className: iconConfigClass
+			})
+		]
+	});
+}
+Tab.displayName = "Tab";
+
+//#endregion
+exports.Tab = Tab;

package/dist/components/client/Tabs/Tab.d.cts

@@ -0,0 +1,20 @@
+
+import { UniversalTabProps } from "../../../types/dist/index.cjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Tabs/Tab.d.ts
+type TabProps = UniversalTabProps;
+declare function Tab({
+  value,
+  children,
+  startIcon,
+  endIcon,
+  disabled,
+  asChild,
+  className
+}: TabProps): react_jsx_runtime0.JSX.Element;
+declare namespace Tab {
+  var displayName: string;
+}
+//#endregion
+export { Tab, type TabProps };

package/dist/components/client/Tabs/Tab.d.ts

@@ -0,0 +1,21 @@
+
+"use client";
+import { UniversalTabProps } from "../../../types/dist/index.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Tabs/Tab.d.ts
+type TabProps = UniversalTabProps;
+declare function Tab({
+  value,
+  children,
+  startIcon,
+  endIcon,
+  disabled,
+  asChild,
+  className
+}: TabProps): react_jsx_runtime0.JSX.Element;
+declare namespace Tab {
+  var displayName: string;
+}
+//#endregion
+export { Tab, type TabProps };

package/dist/components/client/Tabs/Tab.js

@@ -0,0 +1,78 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { cx, getStyles } from "../../../styles/styler.js";
+import { IconSlot } from "../../IconSlot.js";
+import { Text } from "../../Text.js";
+import { useTabsContext } from "./tabsContext.js";
+import { isValidElement, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tab as Tab$1, useStoreState, useTabContext } from "@ariakit/react";
+
+//#region src/components/client/Tabs/Tab.tsx
+/** Matches {@link TabList} sliding-indicator underline (token CSS variables on the tab root). */
+const tabRootUnderlineClassName = cx("pointer-events-none absolute bottom-0 left-0 right-0", "h-[var(--uds-tab-underline-width,0px)] bg-[var(--uds-tab-underline-color,transparent)]", "transition-[height,background-color] duration-[240ms] ease-[cubic-bezier(0.2,0,0,1)]");
+function Tab({ value, children, startIcon, endIcon, disabled, asChild = false, className }) {
+	const generatedId = useId();
+	const uid = value ?? `uds-tab-${generatedId}`;
+	const { variant, disableMotion } = useTabsContext();
+	const store = useTabContext();
+	if (!store) throw new Error("Tab must be wrapped in a Tabs component");
+	const selectedId = useStoreState(store, "selectedId");
+	const activeState = disabled || selectedId !== uid ? "off" : "on";
+	const rootBaseClass = getStyles({
+		tabSizeRoot: "default",
+		tabVariantRoot: variant,
+		tabVariantActiveRoot: "off"
+	});
+	const rootOnClass = getStyles({
+		tabSizeRoot: "default",
+		tabVariantRoot: variant,
+		tabVariantActiveRoot: "on"
+	});
+	const configClass = activeState === "on" ? cx(rootOnClass, !disableMotion && cx("!bg-transparent", "!shadow-none")) : rootBaseClass;
+	const iconConfigClass = getStyles({
+		tabSizeIcon: "default",
+		tabVariantIcon: variant,
+		tabVariantActiveIcon: activeState
+	});
+	const tabClass = cx(configClass, "inline-flex items-center shrink-0 box-border relative", !disableMotion && "z-[1]", "cursor-pointer select-none whitespace-nowrap", !disabled && "uds-ring", disabled && "opacity-50 cursor-default pointer-events-none", "border-solid border-b-solid", "transition-colors duration-[240ms] ease-[cubic-bezier(0.2,0,0,1)]", className);
+	const resolvedContent = asChild && isValidElement(children) ? children.props.children ?? null : children;
+	return /* @__PURE__ */ jsxs(Tab$1, {
+		id: uid,
+		disabled,
+		className: tabClass,
+		render: asChild && isValidElement(children) ? children : void 0,
+		children: [
+			!(activeState === "on" && !disableMotion) ? /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: tabRootUnderlineClassName
+			}) : null,
+			startIcon && /* @__PURE__ */ jsx(IconSlot, {
+				icon: startIcon,
+				iconProps: {
+					size: "sm",
+					color: "current"
+				},
+				className: iconConfigClass
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				variant: "inherit",
+				as: "span",
+				color: "current",
+				children: resolvedContent
+			}),
+			endIcon && /* @__PURE__ */ jsx(IconSlot, {
+				icon: endIcon,
+				iconProps: {
+					size: "sm",
+					color: "current"
+				},
+				className: iconConfigClass
+			})
+		]
+	});
+}
+Tab.displayName = "Tab";
+
+//#endregion
+export { Tab };

package/dist/components/client/Tabs/TabList.cjs

@@ -0,0 +1,132 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_styles_styler = require('../../../styles/styler.cjs');
+const require_components_client_Tabs_tabsContext = require('./tabsContext.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _ariakit_react = require("@ariakit/react");
+let motion_react = require("motion/react");
+
+//#region src/components/client/Tabs/TabList.tsx
+/** Matches {@link Tab} per-tab underline (token CSS variables on the indicator root). */
+const tabRootUnderlineClassName = require_styles_styler.cx("pointer-events-none absolute bottom-0 left-0 right-0", "h-[var(--uds-tab-underline-width,0px)] bg-[var(--uds-tab-underline-color,transparent)]", "transition-[height,background-color] duration-[240ms] ease-[cubic-bezier(0.2,0,0,1)]");
+const SELECTION_TRANSITION = "left 240ms cubic-bezier(0.2, 0, 0, 1), top 240ms cubic-bezier(0.2, 0, 0, 1), width 240ms cubic-bezier(0.2, 0, 0, 1), height 240ms cubic-bezier(0.2, 0, 0, 1)";
+/** Token vars set on {@link Tab} roots; the sliding indicator is a sibling, so it must mirror the selected tab's computed values (incl. :hover / :active). */
+const TAB_UNDERLINE_COLOR_VAR = "--uds-tab-underline-color";
+const TAB_UNDERLINE_WIDTH_VAR = "--uds-tab-underline-width";
+const TabList = (0, react.forwardRef)(function TabList({ children, scrollable, className, ...props }, ref) {
+	const { variant, disableMotion } = require_components_client_Tabs_tabsContext.useTabsContext();
+	const selectedId = (0, _ariakit_react.useStoreState)((0, _ariakit_react.useTabContext)(), "selectedId");
+	const listRef = (0, react.useRef)(null);
+	const indicatorRef = (0, react.useRef)(null);
+	const skipNextTransitionRef = (0, react.useRef)(true);
+	const reducedMotion = (0, motion_react.useReducedMotion)();
+	const applyIndicator = (0, react.useCallback)(() => {
+		const listEl = listRef.current;
+		const indicatorEl = indicatorRef.current;
+		if (!listEl || !indicatorEl || disableMotion) return;
+		const selected = listEl.querySelector("[role=\"tab\"][aria-selected=\"true\"]:not([aria-disabled=\"true\"])");
+		if (!selected) {
+			indicatorEl.style.opacity = "0";
+			indicatorEl.style.transition = "none";
+			indicatorEl.style.removeProperty(TAB_UNDERLINE_COLOR_VAR);
+			indicatorEl.style.removeProperty(TAB_UNDERLINE_WIDTH_VAR);
+			return;
+		}
+		const listRect = listEl.getBoundingClientRect();
+		const tabRect = selected.getBoundingClientRect();
+		const skipTransition = skipNextTransitionRef.current || reducedMotion;
+		skipNextTransitionRef.current = false;
+		indicatorEl.style.left = `${tabRect.left - listRect.left + listEl.scrollLeft}px`;
+		indicatorEl.style.top = `${tabRect.top - listRect.top + listEl.scrollTop}px`;
+		indicatorEl.style.width = `${tabRect.width}px`;
+		indicatorEl.style.height = `${tabRect.height}px`;
+		indicatorEl.style.opacity = "1";
+		indicatorEl.style.transition = skipTransition ? "none" : SELECTION_TRANSITION;
+		const cs = getComputedStyle(selected);
+		const underlineColor = cs.getPropertyValue(TAB_UNDERLINE_COLOR_VAR).trim();
+		const underlineWidth = cs.getPropertyValue(TAB_UNDERLINE_WIDTH_VAR).trim();
+		if (underlineColor) indicatorEl.style.setProperty(TAB_UNDERLINE_COLOR_VAR, underlineColor);
+		else indicatorEl.style.removeProperty(TAB_UNDERLINE_COLOR_VAR);
+		if (underlineWidth) indicatorEl.style.setProperty(TAB_UNDERLINE_WIDTH_VAR, underlineWidth);
+		else indicatorEl.style.removeProperty(TAB_UNDERLINE_WIDTH_VAR);
+	}, [disableMotion, reducedMotion]);
+	(0, react.useLayoutEffect)(() => {
+		applyIndicator();
+	}, [selectedId, applyIndicator]);
+	(0, react.useLayoutEffect)(() => {
+		if (disableMotion) return;
+		const listEl = listRef.current;
+		if (!listEl) return;
+		const ro = new ResizeObserver(() => applyIndicator());
+		ro.observe(listEl);
+		const onScroll = () => applyIndicator();
+		listEl.addEventListener("scroll", onScroll, { passive: true });
+		window.addEventListener("resize", applyIndicator);
+		return () => {
+			ro.disconnect();
+			listEl.removeEventListener("scroll", onScroll);
+			window.removeEventListener("resize", applyIndicator);
+		};
+	}, [disableMotion, applyIndicator]);
+	/** Re-sync underline tokens when the selected tab's hover/pressed state changes (indicator does not receive those pseudos). */
+	(0, react.useLayoutEffect)(() => {
+		if (disableMotion) return;
+		const listEl = listRef.current;
+		if (!listEl) return;
+		const selected = listEl.querySelector("[role=\"tab\"][aria-selected=\"true\"]:not([aria-disabled=\"true\"])");
+		if (!selected) return;
+		const bump = () => applyIndicator();
+		const events = [
+			"mouseenter",
+			"mouseleave",
+			"mousedown",
+			"mouseup",
+			"pointerdown",
+			"pointerup"
+		];
+		events.forEach((e) => selected.addEventListener(e, bump));
+		return () => events.forEach((e) => selected.removeEventListener(e, bump));
+	}, [
+		selectedId,
+		disableMotion,
+		applyIndicator
+	]);
+	const setListRef = (el) => {
+		listRef.current = el;
+		if (typeof ref === "function") ref(el);
+		else if (ref) ref.current = el;
+	};
+	const tablistConfigClass = require_styles_styler.getStyles({ tabsVariantRoot: variant });
+	const indicatorClass = require_styles_styler.cx(require_styles_styler.getStyles({
+		tabSizeRoot: "default",
+		tabVariantRoot: variant,
+		tabVariantActiveRoot: "on"
+	}), "!m-0 !p-0 !gap-0 box-border pointer-events-none", "absolute z-0 min-w-0 min-h-0");
+	const styles = require_styles_styler.cx(tablistConfigClass, "flex flex-row items-center", scrollable ? "overflow-x-auto overflow-y-clip scrollbar-none [overflow-clip-margin:6px]" : "overflow-clip [overflow-clip-margin:8px]", !disableMotion && "relative", className);
+	const indicatorBoxStyle = !disableMotion ? {
+		opacity: 0,
+		transition: "none"
+	} : {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.TabList, {
+		ref: setListRef,
+		className: styles,
+		...props,
+		children: [!disableMotion ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			ref: indicatorRef,
+			className: indicatorClass,
+			style: indicatorBoxStyle,
+			"aria-hidden": true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"aria-hidden": true,
+				className: tabRootUnderlineClassName
+			})
+		}) : null, children]
+	});
+});
+TabList.displayName = "TabList";
+
+//#endregion
+exports.TabList = TabList;

package/dist/components/client/Tabs/TabList.d.cts

@@ -0,0 +1,9 @@
+
+import { UniversalTabListProps } from "../../../types/dist/index.cjs";
+import * as react from "react";
+
+//#region src/components/client/Tabs/TabList.d.ts
+type TabListProps = UniversalTabListProps;
+declare const TabList: react.ForwardRefExoticComponent<UniversalTabListProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TabList, type TabListProps };

package/dist/components/client/Tabs/TabList.d.ts

@@ -0,0 +1,10 @@
+
+"use client";
+import { UniversalTabListProps } from "../../../types/dist/index.js";
+import * as react from "react";
+
+//#region src/components/client/Tabs/TabList.d.ts
+type TabListProps = UniversalTabListProps;
+declare const TabList: react.ForwardRefExoticComponent<UniversalTabListProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TabList, type TabListProps };