@base-ui/react 1.2.0 → 1.3.0

package/esm/slider/root/SliderRoot.js

@@ -19,6 +19,7 @@ import { useField } from "../../field/useField.js";
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
 import { useFormContext } from "../../form/FormContext.js";
 import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
+import { resolveAriaLabelledBy, getDefaultLabelId } from "../../utils/resolveAriaLabelledBy.js";
 import { asc } from "../utils/asc.js";
 import { getSliderValue } from "../utils/getSliderValue.js";
 import { validateMinimumDistance } from "../utils/validateMinimumDistance.js";
@@ -70,6 +71,7 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
     ...elementProps
   } = componentProps;
   const id = useBaseUiId(idProp);
+  const defaultLabelId = getDefaultLabelId(id);
   const onValueChange = useStableCallback(onValueChangeProp);
   const onValueCommitted = useStableCallback(onValueCommittedProp);
   const {
@@ -86,9 +88,10 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
     validation
   } = useFieldRootContext();
   const {
-    labelId
+    labelId: fieldLabelId
   } = useLabelableContext();
-  const ariaLabelledby = ariaLabelledByProp ?? labelId;
+  const [labelId, setLabelId] = React.useState();
+  const ariaLabelledby = ariaLabelledByProp ?? resolveAriaLabelledBy(fieldLabelId, labelId);
   const disabled = fieldDisabled || disabledProp;
   const name = fieldName ?? nameProp;
 
@@ -249,6 +252,7 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
     indicatorPosition,
     inset: thumbAlignment !== 'center',
     labelId: ariaLabelledby,
+    rootLabelId: defaultLabelId,
     largeStep,
     lastUsedThumbIndex,
     lastChangedValueRef,
@@ -269,6 +273,7 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
     setActive,
     setDragging,
     setIndicatorPosition,
+    setLabelId,
     setValue,
     state,
     step,
@@ -276,7 +281,7 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
     thumbMap,
     thumbRefs,
     values
-  }), [active, controlRef, ariaLabelledby, disabled, dragging, validation, formatOptionsRef, handleInputChange, indicatorPosition, largeStep, lastUsedThumbIndex, lastChangedValueRef, lastChangeReasonRef, locale, max, min, minStepsBetweenValues, name, onValueCommitted, orientation, pressedInputRef, pressedThumbCenterOffsetRef, pressedThumbIndexRef, pressedValuesRef, registerFieldControlRef, setActive, setDragging, setIndicatorPosition, setValue, state, step, thumbCollisionBehavior, thumbAlignment, thumbMap, thumbRefs, values]);
+  }), [active, controlRef, ariaLabelledby, defaultLabelId, disabled, dragging, validation, formatOptionsRef, handleInputChange, indicatorPosition, largeStep, lastUsedThumbIndex, lastChangedValueRef, lastChangeReasonRef, locale, max, min, minStepsBetweenValues, name, onValueCommitted, orientation, pressedInputRef, pressedThumbCenterOffsetRef, pressedThumbIndexRef, pressedValuesRef, registerFieldControlRef, setActive, setDragging, setIndicatorPosition, setLabelId, setValue, state, step, thumbCollisionBehavior, thumbAlignment, thumbMap, thumbRefs, values]);
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, sliderRef],

package/esm/slider/root/SliderRootContext.d.ts

@@ -3,7 +3,7 @@ import type { Orientation } from "../../utils/types.js";
 import type { CompositeMetadata } from "../../composite/list/CompositeList.js";
 import type { UseFieldValidationReturnValue } from "../../field/root/useFieldValidation.js";
 import type { ThumbMetadata } from "../thumb/SliderThumb.js";
-import type { SliderRoot } from "./SliderRoot.js";
+import type { SliderRoot, SliderRootState } from "./SliderRoot.js";
 export interface SliderRootContext {
   /**
    * The index of the active thumb.
@@ -22,6 +22,7 @@ export interface SliderRootContext {
   indicatorPosition: (number | undefined)[];
   inset: boolean;
   labelId?: string | undefined;
+  rootLabelId?: string | undefined;
   /**
    * The large step value of the slider when incrementing or decrementing while the shift key is held,
    * or when using Page-Up or Page-Down keys. Snaps to multiples of this value.
@@ -66,11 +67,12 @@ export interface SliderRootContext {
   setActive: (index: number) => void;
   setDragging: React.Dispatch<React.SetStateAction<boolean>>;
   setIndicatorPosition: React.Dispatch<React.SetStateAction<(number | undefined)[]>>;
+  setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
   /**
    * Callback fired when dragging and invokes onValueChange.
    */
   setValue: (newValue: number | number[], details?: SliderRoot.ChangeEventDetails) => void;
-  state: SliderRoot.State;
+  state: SliderRootState;
   /**
    * The step increment of the slider when incrementing or decrementing. It will snap
    * to multiples of this value. Decimal values are supported.

package/esm/slider/root/stateAttributesMapping.d.ts

@@ -1,3 +1,3 @@
 import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
-import type { SliderRoot } from "./SliderRoot.js";
-export declare const sliderStateAttributesMapping: StateAttributesMapping<SliderRoot.State>;
+import type { SliderRootState } from "./SliderRoot.js";
+export declare const sliderStateAttributesMapping: StateAttributesMapping<SliderRootState>;

package/esm/slider/thumb/SliderThumb.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
 import { type LabelableContext } from "../../labelable-provider/LabelableContext.js";
-import type { SliderRoot } from "../root/SliderRoot.js";
+import type { SliderRootState } from "../root/SliderRoot.js";
 /**
  * The draggable part of the slider at the tip of the indicator.
  * Renders a `<div>` element and a nested `<input type="range">`.
@@ -12,8 +12,8 @@ export declare const SliderThumb: React.ForwardRefExoticComponent<Omit<SliderThu
 export interface ThumbMetadata {
   inputId: LabelableContext['controlId'];
 }
-export interface SliderThumbState extends SliderRoot.State {}
-export interface SliderThumbProps extends Omit<BaseUIComponentProps<'div', SliderThumb.State>, 'onBlur' | 'onFocus'> {
+export interface SliderThumbState extends SliderRootState {}
+export interface SliderThumbProps extends Omit<BaseUIComponentProps<'div', SliderThumbState>, 'onBlur' | 'onFocus'> {
   /**
    * Whether the thumb should ignore user interaction.
    * @default false
@@ -22,12 +22,12 @@ export interface SliderThumbProps extends Omit<BaseUIComponentProps<'div', Slide
   /**
    * A function which returns a string value for the [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) attribute of the `input`.
    */
-  getAriaLabel?: (((index: number) => string) | null) | undefined;
+  getAriaLabel?: ((index: number) => string) | null | undefined;
   /**
    * A function which returns a string value for the [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the `input`.
    * This is important for screen reader users.
    */
-  getAriaValueText?: (((formattedValue: string, value: number, index: number) => string) | null) | undefined;
+  getAriaValueText?: ((formattedValue: string, value: number, index: number) => string) | null | undefined;
   /**
    * The index of the thumb which corresponds to the index of its value in the
    * `value` or `defaultValue` array.

package/esm/slider/thumb/SliderThumb.js

@@ -203,9 +203,10 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
   if (orientation === 'vertical') {
     cssWritingMode = rtl ? 'vertical-rl' : 'vertical-lr';
   }
+  const ariaLabel = typeof getAriaLabelProp === 'function' ? getAriaLabelProp(index) : ariaLabelProp;
   const inputProps = mergeProps({
-    'aria-label': typeof getAriaLabelProp === 'function' ? getAriaLabelProp(index) : ariaLabelProp,
-    'aria-labelledby': ariaLabelledByProp ?? labelId,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledByProp ?? (ariaLabel == null ? labelId : undefined),
     'aria-describedby': ariaDescribedByProp,
     'aria-orientation': orientation,
     'aria-valuenow': thumbValue,

package/esm/slider/track/SliderTrack.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { SliderRoot } from "../root/SliderRoot.js";
+import type { SliderRootState } from "../root/SliderRoot.js";
 /**
  * Contains the slider indicator and represents the entire range of the slider.
  * Renders a `<div>` element.
@@ -8,7 +8,9 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
 export declare const SliderTrack: React.ForwardRefExoticComponent<Omit<SliderTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface SliderTrackProps extends BaseUIComponentProps<'div', SliderRoot.State> {}
+export interface SliderTrackState extends SliderRootState {}
+export interface SliderTrackProps extends BaseUIComponentProps<'div', SliderTrackState> {}
 export declare namespace SliderTrack {
+  type State = SliderTrackState;
   type Props = SliderTrackProps;
 }

package/esm/slider/utils/resolveThumbCollision.d.ts

@@ -2,8 +2,8 @@ import { SliderRootContext } from "../root/SliderRootContext.js";
 export interface ResolveThumbCollisionParams {
   behavior: SliderRootContext['thumbCollisionBehavior'];
   values: readonly number[];
-  currentValues?: (readonly number[] | null) | undefined;
-  initialValues?: (readonly number[] | null) | undefined;
+  currentValues?: readonly number[] | null | undefined;
+  initialValues?: readonly number[] | null | undefined;
   pressedIndex: number;
   nextValue: number;
   min: number;

package/esm/slider/value/SliderValue.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { SliderRoot } from "../root/SliderRoot.js";
+import type { SliderRootState } from "../root/SliderRoot.js";
 /**
  * Displays the current value of the slider as text.
  * Renders an `<output>` element.
@@ -8,9 +8,11 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
 export declare const SliderValue: React.ForwardRefExoticComponent<Omit<SliderValueProps, "ref"> & React.RefAttributes<HTMLOutputElement>>;
-export interface SliderValueProps extends Omit<BaseUIComponentProps<'output', SliderRoot.State>, 'children'> {
-  children?: (null | ((formattedValues: readonly string[], values: readonly number[]) => React.ReactNode)) | undefined;
+export interface SliderValueState extends SliderRootState {}
+export interface SliderValueProps extends Omit<BaseUIComponentProps<'output', SliderValueState>, 'children'> {
+  children?: null | ((formattedValues: readonly string[], values: readonly number[]) => React.ReactNode) | undefined;
 }
 export declare namespace SliderValue {
+  type State = SliderValueState;
   type Props = SliderValueProps;
 }

package/esm/switch/root/SwitchRoot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/types.js";
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 import { REASONS } from "../../utils/reasons.js";
 import type { BaseUIChangeEventDetails } from "../../types/index.js";
 /**
@@ -10,7 +10,7 @@ import type { BaseUIChangeEventDetails } from "../../types/index.js";
  * Documentation: [Base UI Switch](https://base-ui.com/react/components/switch)
  */
 export declare const SwitchRoot: React.ForwardRefExoticComponent<Omit<SwitchRootProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export interface SwitchRootState extends FieldRoot.State {
+export interface SwitchRootState extends FieldRootState {
   /**
    * Whether the switch is currently active.
    */
@@ -28,7 +28,7 @@ export interface SwitchRootState extends FieldRoot.State {
    */
   required: boolean;
 }
-export interface SwitchRootProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', SwitchRoot.State>, 'onChange'> {
+export interface SwitchRootProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', SwitchRootState>, 'onChange'> {
   /**
    * The id of the switch element.
    */

package/esm/switch/root/SwitchRoot.js

@@ -17,6 +17,7 @@ import { useField } from "../../field/useField.js";
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
 import { useFormContext } from "../../form/FormContext.js";
 import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
+import { useAriaLabelledBy } from "../../labelable-provider/useAriaLabelledBy.js";
 import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
@@ -34,6 +35,7 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
     checked: checkedProp,
     className,
     defaultChecked,
+    'aria-labelledby': ariaLabelledByProp,
     id: idProp,
     inputRef: externalInputRef,
     name: nameProp,
@@ -115,13 +117,14 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
     disabled,
     native: nativeButton
   });
+  const ariaLabelledBy = useAriaLabelledBy(ariaLabelledByProp, labelId, inputRef, !nativeButton, hiddenInputId);
   const rootProps = {
     id: nativeButton ? controlId : id,
     role: 'switch',
     'aria-checked': checked,
     'aria-readonly': readOnly || undefined,
     'aria-required': required || undefined,
-    'aria-labelledby': labelId,
+    'aria-labelledby': ariaLabelledBy,
     onFocus() {
       if (!disabled) {
         setFocused(true);

package/esm/switch/root/SwitchRootContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { SwitchRoot } from "./SwitchRoot.js";
-export type SwitchRootContext = SwitchRoot.State;
-export declare const SwitchRootContext: React.Context<import("./SwitchRoot.js").SwitchRootState | undefined>;
-export declare function useSwitchRootContext(): import("./SwitchRoot.js").SwitchRootState;
+import type { SwitchRootState } from "./SwitchRoot.js";
+export type SwitchRootContext = SwitchRootState;
+export declare const SwitchRootContext: React.Context<SwitchRootState | undefined>;
+export declare function useSwitchRootContext(): SwitchRootState;

package/esm/switch/stateAttributesMapping.d.ts

@@ -1,3 +1,3 @@
-import type { SwitchRoot } from "./root/SwitchRoot.js";
+import type { SwitchRootState } from "./root/SwitchRoot.js";
 import type { StateAttributesMapping } from "../utils/getStateAttributesProps.js";
-export declare const stateAttributesMapping: StateAttributesMapping<SwitchRoot.State>;
+export declare const stateAttributesMapping: StateAttributesMapping<SwitchRootState>;

package/esm/switch/thumb/SwitchThumb.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { SwitchRoot } from "../root/SwitchRoot.js";
+import type { SwitchRootState } from "../root/SwitchRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * The movable part of the switch that indicates whether the switch is on or off.
@@ -8,8 +8,8 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Switch](https://base-ui.com/react/components/switch)
  */
 export declare const SwitchThumb: React.ForwardRefExoticComponent<Omit<SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface SwitchThumbProps extends BaseUIComponentProps<'span', SwitchThumb.State> {}
-export interface SwitchThumbState extends SwitchRoot.State {}
+export interface SwitchThumbProps extends BaseUIComponentProps<'span', SwitchThumbState> {}
+export interface SwitchThumbState extends SwitchRootState {}
 export declare namespace SwitchThumb {
   type Props = SwitchThumbProps;
   type State = SwitchThumbState;

package/esm/tabs/indicator/TabsIndicator.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { TabsRoot } from "../root/TabsRoot.js";
+import type { TabsRoot, TabsRootState } from "../root/TabsRoot.js";
 import type { TabsTab } from "../tab/TabsTab.js";
 /**
  * A visual indicator that can be styled to match the position of the currently active tab.
@@ -9,12 +9,21 @@ import type { TabsTab } from "../tab/TabsTab.js";
  * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
  */
 export declare const TabsIndicator: React.ForwardRefExoticComponent<Omit<TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface TabsIndicatorState extends TabsRoot.State {
+export interface TabsIndicatorState extends TabsRootState {
+  /**
+   * The active tab position.
+   */
   activeTabPosition: TabsTab.Position | null;
+  /**
+   * The active tab size.
+   */
   activeTabSize: TabsTab.Size | null;
+  /**
+   * The component orientation.
+   */
   orientation: TabsRoot.Orientation;
 }
-export interface TabsIndicatorProps extends BaseUIComponentProps<'span', TabsIndicator.State> {
+export interface TabsIndicatorProps extends BaseUIComponentProps<'span', TabsIndicatorState> {
   /**
    * Whether to render itself before React hydrates.
    * This minimizes the time that the indicator isn’t visible after server-side rendering.

package/esm/tabs/indicator/TabsIndicator.js

@@ -41,24 +41,15 @@ export const TabsIndicator = /*#__PURE__*/React.forwardRef(function TabIndicator
     value
   } = useTabsRootContext();
   const {
-    tabsListElement
+    tabsListElement,
+    registerIndicatorUpdateListener
   } = useTabsListContext();
   const [isMounted, setIsMounted] = React.useState(false);
-  const {
-    value: activeTabValue
-  } = useTabsRootContext();
   useOnMount(() => setIsMounted(true));
   const rerender = useForcedRerendering();
   React.useEffect(() => {
-    if (value != null && tabsListElement != null && typeof ResizeObserver !== 'undefined') {
-      const resizeObserver = new ResizeObserver(rerender);
-      resizeObserver.observe(tabsListElement);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-    return undefined;
-  }, [value, tabsListElement, rerender]);
+    return registerIndicatorUpdateListener(rerender);
+  }, [registerIndicatorUpdateListener, rerender]);
   let left = 0;
   let right = 0;
   let top = 0;
@@ -140,7 +131,7 @@ export const TabsIndicator = /*#__PURE__*/React.forwardRef(function TabIndicator
     }],
     stateAttributesMapping
   });
-  if (activeTabValue == null) {
+  if (value == null) {
     return null;
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {

package/esm/tabs/indicator/TabsIndicatorCssVars.d.ts

@@ -25,7 +25,7 @@ export declare enum TabsIndicatorCssVars {
    */
   activeTabWidth = "--active-tab-width",
   /**
-   * Indicates the width of the tab if it is active.
+   * Indicates the height of the tab if it is active.
    * @type {number}
    */
   activeTabHeight = "--active-tab-height",

package/esm/tabs/indicator/TabsIndicatorCssVars.js

@@ -25,7 +25,7 @@ export let TabsIndicatorCssVars = /*#__PURE__*/function (TabsIndicatorCssVars) {
    */
   TabsIndicatorCssVars["activeTabWidth"] = "--active-tab-width";
   /**
-   * Indicates the width of the tab if it is active.
+   * Indicates the height of the tab if it is active.
    * @type {number}
    */
   TabsIndicatorCssVars["activeTabHeight"] = "--active-tab-height";

package/esm/tabs/list/TabsList.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { TabsRoot } from "../root/TabsRoot.js";
+import type { TabsRootState } from "../root/TabsRoot.js";
 /**
  * Groups the individual tab buttons.
  * Renders a `<div>` element.
@@ -8,8 +8,8 @@ import type { TabsRoot } from "../root/TabsRoot.js";
  * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
  */
 export declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface TabsListState extends TabsRoot.State {}
-export interface TabsListProps extends BaseUIComponentProps<'div', TabsList.State> {
+export interface TabsListState extends TabsRootState {}
+export interface TabsListProps extends BaseUIComponentProps<'div', TabsListState> {
   /**
    * Whether to automatically change the active tab on arrow key focus.
    * Otherwise, tabs will be activated using <kbd>Enter</kbd> or <kbd>Space</kbd> key press.

package/esm/tabs/list/TabsList.js

@@ -34,6 +34,50 @@ export const TabsList = /*#__PURE__*/React.forwardRef(function TabsList(componen
   } = useTabsRootContext();
   const [highlightedTabIndex, setHighlightedTabIndex] = React.useState(0);
   const [tabsListElement, setTabsListElement] = React.useState(null);
+  const indicatorUpdateListenersRef = React.useRef(new Set());
+  const tabResizeObserverElementsRef = React.useRef(new Set());
+  const resizeObserverRef = React.useRef(null);
+  const notifyIndicatorUpdateListeners = useStableCallback(() => {
+    indicatorUpdateListenersRef.current.forEach(listener => {
+      listener();
+    });
+  });
+  React.useEffect(() => {
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      if (!indicatorUpdateListenersRef.current.size) {
+        return;
+      }
+      notifyIndicatorUpdateListeners();
+    });
+    resizeObserverRef.current = resizeObserver;
+    if (tabsListElement) {
+      resizeObserver.observe(tabsListElement);
+    }
+    tabResizeObserverElementsRef.current.forEach(element => {
+      resizeObserver.observe(element);
+    });
+    return () => {
+      resizeObserver.disconnect();
+      resizeObserverRef.current = null;
+    };
+  }, [tabsListElement, notifyIndicatorUpdateListeners]);
+  const registerIndicatorUpdateListener = useStableCallback(listener => {
+    indicatorUpdateListenersRef.current.add(listener);
+    return () => {
+      indicatorUpdateListenersRef.current.delete(listener);
+    };
+  });
+  const registerTabResizeObserverElement = useStableCallback(element => {
+    tabResizeObserverElementsRef.current.add(element);
+    resizeObserverRef.current?.observe(element);
+    return () => {
+      tabResizeObserverElementsRef.current.delete(element);
+      resizeObserverRef.current?.unobserve(element);
+    };
+  });
   const detectActivationDirection = useActivationDirectionDetector(value,
   // the old value
   orientation, tabsListElement, getTabElementBySelectedValue);
@@ -55,11 +99,12 @@ export const TabsList = /*#__PURE__*/React.forwardRef(function TabsList(componen
   const tabsListContextValue = React.useMemo(() => ({
     activateOnFocus,
     highlightedTabIndex,
+    registerIndicatorUpdateListener,
+    registerTabResizeObserverElement,
     onTabActivation,
     setHighlightedTabIndex,
-    tabsListElement,
-    value
-  }), [activateOnFocus, highlightedTabIndex, onTabActivation, setHighlightedTabIndex, tabsListElement, value]);
+    tabsListElement
+  }), [activateOnFocus, highlightedTabIndex, registerIndicatorUpdateListener, registerTabResizeObserverElement, onTabActivation, setHighlightedTabIndex, tabsListElement]);
   return /*#__PURE__*/_jsx(TabsListContext.Provider, {
     value: tabsListContextValue,
     children: /*#__PURE__*/_jsx(CompositeRoot, {

package/esm/tabs/list/TabsListContext.d.ts

@@ -3,6 +3,8 @@ import type { TabsRoot } from "../root/TabsRoot.js";
 export interface TabsListContext {
   activateOnFocus: boolean;
   highlightedTabIndex: number;
+  registerIndicatorUpdateListener: (listener: () => void) => () => void;
+  registerTabResizeObserverElement: (element: HTMLElement) => () => void;
   onTabActivation: (newValue: any, eventDetails: TabsRoot.ChangeEventDetails) => void;
   setHighlightedTabIndex: (index: number) => void;
   tabsListElement: HTMLElement | null;

package/esm/tabs/panel/TabsPanel.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { TabsRoot } from "../root/TabsRoot.js";
+import type { TabsRootState } from "../root/TabsRoot.js";
 import type { TabsTab } from "../tab/TabsTab.js";
 /**
  * A panel displayed when the corresponding tab is active.
@@ -14,11 +14,17 @@ export interface TabsPanelMetadata {
   id?: string | undefined;
   value: TabsTab.Value;
 }
-export interface TabsPanelState extends TabsRoot.State {
+export interface TabsPanelState extends TabsRootState {
+  /**
+   * Whether the component is hidden.
+   */
   hidden: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface TabsPanelProps extends BaseUIComponentProps<'div', TabsPanel.State> {
+export interface TabsPanelProps extends BaseUIComponentProps<'div', TabsPanelState> {
   /**
    * The value of the TabPanel. It will be shown when the Tab with the corresponding value is active.
    */

package/esm/tabs/panel/TabsPanelDataAttributes.d.ts

@@ -17,4 +17,12 @@ export declare enum TabsPanelDataAttributes {
    * Present when the panel is hidden.
    */
   hidden = "data-hidden",
+  /**
+   * Present when the panel is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the panel is animating out.
+   */
+  endingStyle = "data-ending-style",
 }

package/esm/tabs/panel/TabsPanelDataAttributes.js

@@ -1,4 +1,5 @@
-export let TabsPanelDataAttributes = /*#__PURE__*/function (TabsPanelDataAttributes) {
+import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+export let TabsPanelDataAttributes = function (TabsPanelDataAttributes) {
   /**
    * Indicates the index of the tab panel.
    */
@@ -17,5 +18,13 @@ export let TabsPanelDataAttributes = /*#__PURE__*/function (TabsPanelDataAttribu
    * Present when the panel is hidden.
    */
   TabsPanelDataAttributes["hidden"] = "data-hidden";
+  /**
+   * Present when the panel is animating in.
+   */
+  TabsPanelDataAttributes[TabsPanelDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the panel is animating out.
+   */
+  TabsPanelDataAttributes[TabsPanelDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
   return TabsPanelDataAttributes;
 }({});

package/esm/tabs/root/TabsRoot.d.ts

@@ -12,10 +12,16 @@ import { REASONS } from "../../utils/reasons.js";
 export declare const TabsRoot: React.ForwardRefExoticComponent<Omit<TabsRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type TabsRootOrientation = BaseOrientation;
 export interface TabsRootState {
+  /**
+   * The component orientation.
+   */
   orientation: TabsRoot.Orientation;
+  /**
+   * The direction used for tab activation.
+   */
   tabActivationDirection: TabsTab.ActivationDirection;
 }
-export interface TabsRootProps extends BaseUIComponentProps<'div', TabsRoot.State> {
+export interface TabsRootProps extends BaseUIComponentProps<'div', TabsRootState> {
   /**
    * The value of the currently active `Tab`. Use when the component is controlled.
    * When the value is `null`, no Tab will be active.

package/esm/tabs/root/TabsRootContext.d.ts

@@ -30,7 +30,7 @@ export interface TabsRootContext {
   getTabPanelIdByValue: (tabValue: TabsTab.Value) => string | undefined;
   registerMountedTabPanel: (panelValue: TabsTab.Value | number, panelId: string) => void;
   setTabMap: (map: Map<Node, (TabsTab.Metadata & {
-    index?: (number | null) | undefined;
+    index?: number | null | undefined;
   }) | null>) => void;
   unregisterMountedTabPanel: (panelValue: TabsTab.Value | number, panelId: string) => void;
   /**

package/esm/tabs/root/stateAttributesMapping.d.ts

@@ -1,3 +1,3 @@
-import type { TabsRoot } from "./TabsRoot.js";
+import type { TabsRootState } from "./TabsRoot.js";
 import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
-export declare const tabsStateAttributesMapping: StateAttributesMapping<TabsRoot.State>;
+export declare const tabsStateAttributesMapping: StateAttributesMapping<TabsRootState>;

package/esm/tabs/tab/TabsTab.d.ts

@@ -30,10 +30,16 @@ export interface TabsTabState {
    * Whether the component should ignore user interaction.
    */
   disabled: boolean;
+  /**
+   * Whether the component is active.
+   */
   active: boolean;
+  /**
+   * The component orientation.
+   */
   orientation: TabsRoot.Orientation;
 }
-export interface TabsTabProps extends NativeButtonProps, BaseUIComponentProps<'button', TabsTab.State> {
+export interface TabsTabProps extends NativeButtonProps, BaseUIComponentProps<'button', TabsTabState> {
   /**
    * The value of the Tab.
    */

package/esm/tabs/tab/TabsTab.js

@@ -39,6 +39,7 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
     activateOnFocus,
     highlightedTabIndex,
     onTabActivation,
+    registerTabResizeObserverElement,
     setHighlightedTabIndex,
     tabsListElement
   } = useTabsListContext();
@@ -59,6 +60,14 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
   });
   const active = value === activeTabValue;
   const isNavigatingRef = React.useRef(false);
+  const tabElementRef = React.useRef(null);
+  React.useEffect(() => {
+    const tabElement = tabElementRef.current;
+    if (!tabElement) {
+      return undefined;
+    }
+    return registerTabResizeObserverElement(tabElement);
+  }, [registerTabResizeObserverElement]);
 
   // Keep the highlighted item in sync with the currently active tab
   // when the value prop changes externally (controlled mode)
@@ -152,7 +161,7 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
   };
   const element = useRenderElement('button', componentProps, {
     state,
-    ref: [forwardedRef, buttonRef, compositeRef],
+    ref: [forwardedRef, buttonRef, compositeRef, tabElementRef],
     props: [compositeProps, {
       role: 'tab',
       'aria-controls': tabPanelId,