[tabs] Fix selected/active/highlighted naming consistency

atomiks · atomiks · commit a1297c8d8d29 · 2025-10-28T14:14:17.000+11:00
diff --git a/docs/reference/generated/tabs-indicator.json b/docs/reference/generated/tabs-indicator.json
@@ -24,7 +24,7 @@
       "type": "'horizontal' | 'vertical'"
     },
     "data-activation-direction": {
-      "description": "Indicates the direction of the activation (based on the previous selected tab).",
+      "description": "Indicates the direction of the activation (based on the previous active tab).",
       "type": "'left' | 'right' | 'up' | 'down' | 'none'"
     }
   },
diff --git a/docs/reference/generated/tabs-list.json b/docs/reference/generated/tabs-list.json
@@ -30,7 +30,7 @@
       "type": "'horizontal' | 'vertical'"
     },
     "data-activation-direction": {
-      "description": "Indicates the direction of the activation (based on the previous selected tab).",
+      "description": "Indicates the direction of the activation (based on the previous active tab).",
       "type": "'left' | 'right' | 'up' | 'down' | 'none'"
     }
   },
diff --git a/docs/reference/generated/tabs-panel.json b/docs/reference/generated/tabs-panel.json
@@ -28,7 +28,7 @@
       "type": "'horizontal' | 'vertical'"
     },
     "data-activation-direction": {
-      "description": "Indicates the direction of the activation (based on the previous selected tab).",
+      "description": "Indicates the direction of the activation (based on the previous active tab).",
       "type": "'left' | 'right' | 'up' | 'down' | 'none'"
     },
     "data-hidden": {
diff --git a/docs/reference/generated/tabs-root.json b/docs/reference/generated/tabs-root.json
@@ -5,11 +5,11 @@
     "defaultValue": {
       "type": "Tabs.Tab.Value",
       "default": "0",
-      "description": "The default value. Use when the component is not controlled.\nWhen the value is `null`, no Tab will be selected."
+      "description": "The default value. Use when the component is not controlled.\nWhen the value is `null`, no Tab will be active."
     },
     "value": {
       "type": "Tabs.Tab.Value",
-      "description": "The value of the currently selected `Tab`. Use when the component is controlled.\nWhen the value is `null`, no Tab will be selected."
+      "description": "The value of the currently selected `Tab`. Use when the component is controlled.\nWhen the value is `null`, no Tab will be active."
     },
     "onValueChange": {
       "type": "((value: Tabs.Tab.Value, eventDetails: { reason: 'none', event: ReasonToEvent, cancel: (() => void), allowPropagation: (() => void), isCanceled: boolean, isPropagationAllowed: boolean, trigger: HTMLElement | undefined } & { activationDirection: Tabs.Tab.ActivationDirection }) => void)",
@@ -38,7 +38,7 @@
       "type": "'horizontal' | 'vertical'"
     },
     "data-activation-direction": {
-      "description": "Indicates the direction of the activation (based on the previous selected tab).",
+      "description": "Indicates the direction of the activation (based on the previous active tab).",
       "type": "'left' | 'right' | 'up' | 'down' | 'none'"
     }
   },
diff --git a/docs/reference/generated/tabs-tab.json b/docs/reference/generated/tabs-tab.json
@@ -24,10 +24,7 @@
   },
   "dataAttributes": {
     "data-selected": {
-      "description": "Present when the tab is selected."
-    },
-    "data-highlighted": {
-      "description": "Present when the tab is highlighted."
+      "description": "Present when the tab is active."
     },
     "data-orientation": {
       "description": "Indicates the orientation of the tabs.",
@@ -37,7 +34,7 @@
       "description": "Present when the tab is disabled."
     },
     "data-activation-direction": {
-      "description": "Indicates the direction of the activation (based on the previous selected tab).",
+      "description": "Indicates the direction of the activation (based on the previous active tab).",
       "type": "'left' | 'right' | 'up' | 'down' | 'none'"
     }
   },
diff --git a/docs/src/app/(private)/experiments/tabs.module.css b/docs/src/app/(private)/experiments/tabs.module.css
@@ -52,7 +52,7 @@
     height: 2rem;
   }
 
-  &[data-selected] {
+  &[data-active] {
     color: var(--color-gray-900);
   }
 
diff --git a/docs/src/app/(public)/(content)/react/components/tabs/demos/hero/css-modules/index.module.css b/docs/src/app/(public)/(content)/react/components/tabs/demos/hero/css-modules/index.module.css
@@ -33,7 +33,7 @@
   padding-block: 0;
   height: 2rem;
 
-  &[data-selected] {
+  &[data-active] {
     color: var(--color-gray-900);
   }
 
diff --git a/docs/src/app/(public)/(content)/react/components/tabs/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/tabs/demos/hero/tailwind/index.tsx
@@ -6,19 +6,19 @@ export default function ExampleTabs() {
     <Tabs.Root className="rounded-md border border-gray-200" defaultValue="overview">
       <Tabs.List className="relative z-0 flex gap-1 px-1 shadow-[inset_0_-1px] shadow-gray-200">
         <Tabs.Tab
-          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-medium break-keep whitespace-nowrap text-gray-600 outline-none select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline focus-visible:before:outline-2 data-[selected]:text-gray-900"
+          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-medium break-keep whitespace-nowrap text-gray-600 outline-none select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline focus-visible:before:outline-2 data-[active]:text-gray-900"
           value="overview"
         >
           Overview
         </Tabs.Tab>
         <Tabs.Tab
-          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-medium break-keep whitespace-nowrap text-gray-600 outline-none select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline focus-visible:before:outline-2 data-[selected]:text-gray-900"
+          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-medium break-keep whitespace-nowrap text-gray-600 outline-none select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline focus-visible:before:outline-2 data-[active]:text-gray-900"
           value="projects"
         >
           Projects
         </Tabs.Tab>
         <Tabs.Tab
-          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-medium break-keep whitespace-nowrap text-gray-600 outline-none select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline focus-visible:before:outline-2 data-[selected]:text-gray-900"
+          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-medium break-keep whitespace-nowrap text-gray-600 outline-none select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline focus-visible:before:outline-2 data-[active]:text-gray-900"
           value="account"
         >
           Account
diff --git a/docs/src/components/Demo/Demo.css b/docs/src/components/Demo/Demo.css
@@ -121,7 +121,7 @@
       inset: -0.375rem -0.5rem;
     }
 
-    &[data-selected] {
+    &[data-active] {
       color: var(--color-foreground);
       font-weight: bold;
 
diff --git a/packages/react/src/tabs/indicator/TabsIndicator.test.tsx b/packages/react/src/tabs/indicator/TabsIndicator.test.tsx
@@ -22,7 +22,7 @@ describe('<Tabs.Indicator />', () => {
   }));
 
   describe.skipIf(isJSDOM)('rendering', () => {
-    it('should not render when no tab is selected', async () => {
+    it('should not render when no tab is active', async () => {
       await render(
         <Tabs.Root value={null}>
           <Tabs.List>
diff --git a/packages/react/src/tabs/indicator/TabsIndicator.tsx b/packages/react/src/tabs/indicator/TabsIndicator.tsx
@@ -16,8 +16,8 @@ import { TabsIndicatorCssVars } from './TabsIndicatorCssVars';
 
 const stateAttributesMapping = {
   ...tabsStateAttributesMapping,
-  selectedTabPosition: () => null,
-  selectedTabSize: () => null,
+  activeTabPosition: () => null,
+  activeTabSize: () => null,
 };
 
 /**
@@ -73,30 +73,30 @@ export const TabsIndicator = React.forwardRef(function TabIndicator(
   let isTabSelected = false;
 
   if (value != null && tabsListRef.current != null) {
-    const selectedTab = getTabElementBySelectedValue(value);
+    const activeTab = getTabElementBySelectedValue(value);
     const tabsList = tabsListRef.current;
     isTabSelected = true;
 
-    if (selectedTab != null) {
+    if (activeTab != null) {
       // Use offset-based positioning, but determine size using sub-pixel
       // precision and floor it to avoid potential overflow.
       // See https://github.com/mui/base-ui/issues/2235.
-      left = selectedTab.offsetLeft - tabsList.clientLeft;
-      top = selectedTab.offsetTop - tabsList.clientTop;
+      left = activeTab.offsetLeft - tabsList.clientLeft;
+      top = activeTab.offsetTop - tabsList.clientTop;
 
-      const { width: rectWidth, height: rectHeight } = selectedTab.getBoundingClientRect();
+      const { width: rectWidth, height: rectHeight } = activeTab.getBoundingClientRect();
       width = Math.floor(rectWidth);
       height = Math.floor(rectHeight);
 
       right =
         direction === 'ltr'
-          ? tabsList.scrollWidth - selectedTab.offsetLeft - width - tabsList.clientLeft
-          : selectedTab.offsetLeft - tabsList.clientLeft;
-      bottom = tabsList.scrollHeight - selectedTab.offsetTop - height - tabsList.clientTop;
+          ? tabsList.scrollWidth - activeTab.offsetLeft - width - tabsList.clientLeft
+          : activeTab.offsetLeft - tabsList.clientLeft;
+      bottom = tabsList.scrollHeight - activeTab.offsetTop - height - tabsList.clientTop;
     }
   }
 
-  const selectedTabPosition = React.useMemo(
+  const activeTabPosition = React.useMemo(
     () =>
       isTabSelected
         ? {
@@ -109,7 +109,7 @@ export const TabsIndicator = React.forwardRef(function TabIndicator(
     [left, right, top, bottom, isTabSelected],
   );
 
-  const selectedTabSize = React.useMemo(
+  const activeTabSize = React.useMemo(
     () =>
       isTabSelected
         ? {
@@ -140,11 +140,11 @@ export const TabsIndicator = React.forwardRef(function TabIndicator(
   const state: TabsIndicator.State = React.useMemo(
     () => ({
       orientation,
-      selectedTabPosition,
-      selectedTabSize,
+      activeTabPosition,
+      activeTabSize,
       tabActivationDirection,
     }),
-    [orientation, selectedTabPosition, selectedTabSize, tabActivationDirection],
+    [orientation, activeTabPosition, activeTabSize, tabActivationDirection],
   );
 
   const element = useRenderElement('span', componentProps, {
@@ -186,8 +186,8 @@ export const TabsIndicator = React.forwardRef(function TabIndicator(
 });
 
 export interface TabsIndicatorState extends TabsRoot.State {
-  selectedTabPosition: TabsTab.Position | null;
-  selectedTabSize: TabsTab.Size | null;
+  activeTabPosition: TabsTab.Position | null;
+  activeTabSize: TabsTab.Size | null;
   orientation: TabsRoot.Orientation;
 }
 
diff --git a/packages/react/src/tabs/indicator/TabsIndicatorDataAttributes.ts b/packages/react/src/tabs/indicator/TabsIndicatorDataAttributes.ts
@@ -1,6 +1,6 @@
 export enum TabsIndicatorDataAttributes {
   /**
-   * Indicates the direction of the activation (based on the previous selected tab).
+   * Indicates the direction of the activation (based on the previous active tab).
    * @type {'left' | 'right' | 'up' | 'down' | 'none'}
    */
   activationDirection = 'data-activation-direction',
diff --git a/packages/react/src/tabs/indicator/prehydrationScript.min.ts b/packages/react/src/tabs/indicator/prehydrationScript.min.ts
@@ -2,4 +2,4 @@
 // To update it, modify the corresponding source file and run `pnpm inline-scripts`.
 
 // prettier-ignore
-export const script = '!function(){const t=document.currentScript.previousElementSibling;if(!t)return;const e=t.closest(\'[role="tablist"]\');if(!e)return;const o=e.querySelector("[data-selected]");if(!o)return;if(0===o.offsetWidth||0===e.offsetWidth)return;const i=getComputedStyle(e).direction,f=o.offsetLeft-e.clientLeft,{width:n,height:r}=o.getBoundingClientRect(),l=Math.floor(n),c=Math.floor(r),s="ltr"===i?e.scrollWidth-o.offsetLeft-l-e.clientLeft:o.offsetLeft-e.clientLeft,h=o.offsetTop-e.clientTop,d=e.scrollHeight-o.offsetTop-c-e.clientTop;function u(e,o){t.style.setProperty(`--active-tab-${e}`,`${o}px`)}u("left",f),u("right",s),u("top",h),u("bottom",d),u("width",l),u("height",c),l>0&&c>0&&t.removeAttribute("hidden")}();';
+export const script = '!function(){const t=document.currentScript.previousElementSibling;if(!t)return;const e=t.closest(\'[role="tablist"]\');if(!e)return;const o=e.querySelector("[data-selected]");if(!o)return;if(0===o.offsetWidth||0===e.offsetWidth)return;const i=getComputedStyle(e).direction,f=o.offsetLeft-e.clientLeft,{width:n,height:r}=o.getBoundingClientRect(),l=Math.floor(n),c=Math.floor(r),s="ltr"===i?e.scrollWidth-o.offsetLeft-l-e.clientLeft:o.offsetLeft-e.clientLeft,d=o.offsetTop-e.clientTop,h=e.scrollHeight-o.offsetTop-c-e.clientTop;function u(e,o){t.style.setProperty(`--active-tab-${e}`,`${o}px`)}u("left",f),u("right",s),u("top",d),u("bottom",h),u("width",l),u("height",c),l>0&&c>0&&t.removeAttribute("hidden")}();';
diff --git a/packages/react/src/tabs/list/TabsList.test.tsx b/packages/react/src/tabs/list/TabsList.test.tsx
@@ -13,7 +13,7 @@ describe('<Tabs.List />', () => {
   }));
 
   describe('accessibility attributes', () => {
-    it('sets the aria-selected attribute on the selected tab', async () => {
+    it('sets the aria-selected attribute on the active tab', async () => {
       await render(
         <Tabs.Root defaultValue={1}>
           <Tabs.List>
diff --git a/packages/react/src/tabs/list/TabsList.tsx b/packages/react/src/tabs/list/TabsList.tsx
@@ -125,7 +125,7 @@ function getInset(tab: HTMLElement, tabsList: HTMLElement) {
 
 function useActivationDirectionDetector(
   // the old value
-  selectedTabValue: any,
+  activeTabValue: any,
   orientation: TabsRoot.Orientation,
   tabsListRef: React.RefObject<HTMLElement | null>,
   getTabElement: (selectedValue: any) => HTMLElement | null,
@@ -134,24 +134,24 @@ function useActivationDirectionDetector(
 
   useIsoLayoutEffect(() => {
     // Whenever orientation changes, reset the state.
-    if (selectedTabValue == null || tabsListRef.current == null) {
+    if (activeTabValue == null || tabsListRef.current == null) {
       previousTabEdge.current = null;
       return;
     }
 
-    const activeTab = getTabElement(selectedTabValue);
+    const activeTab = getTabElement(activeTabValue);
     if (activeTab == null) {
       previousTabEdge.current = null;
       return;
     }
 
     const { left, top } = getInset(activeTab, tabsListRef.current);
     previousTabEdge.current = orientation === 'horizontal' ? left : top;
-  }, [orientation, getTabElement, tabsListRef, selectedTabValue]);
+  }, [orientation, getTabElement, tabsListRef, activeTabValue]);
 
   return React.useCallback(
     (newValue: any) => {
-      if (newValue === selectedTabValue) {
+      if (newValue === activeTabValue) {
         return 'none';
       }
 
@@ -161,10 +161,10 @@ function useActivationDirectionDetector(
       }
 
       if (newValue != null && tabsListRef.current != null) {
-        const selectedTabElement = getTabElement(newValue);
+        const activeTabElement = getTabElement(newValue);
 
-        if (selectedTabElement != null) {
-          const { left, top } = getInset(selectedTabElement, tabsListRef.current);
+        if (activeTabElement != null) {
+          const { left, top } = getInset(activeTabElement, tabsListRef.current);
 
           if (previousTabEdge.current == null) {
             previousTabEdge.current = orientation === 'horizontal' ? left : top;
@@ -192,7 +192,7 @@ function useActivationDirectionDetector(
 
       return 'none';
     },
-    [getTabElement, orientation, previousTabEdge, tabsListRef, selectedTabValue],
+    [getTabElement, orientation, previousTabEdge, tabsListRef, activeTabValue],
   );
 }
 
diff --git a/packages/react/src/tabs/list/TabsListDataAttributes.ts b/packages/react/src/tabs/list/TabsListDataAttributes.ts
@@ -1,6 +1,6 @@
 export enum TabsListDataAttributes {
   /**
-   * Indicates the direction of the activation (based on the previous selected tab).
+   * Indicates the direction of the activation (based on the previous active tab).
    * @type {'left' | 'right' | 'up' | 'down' | 'none'}
    */
   activationDirection = 'data-activation-direction',
diff --git a/packages/react/src/tabs/panel/TabsPanelDataAttributes.ts b/packages/react/src/tabs/panel/TabsPanelDataAttributes.ts
@@ -4,7 +4,7 @@ export enum TabsPanelDataAttributes {
    */
   index = 'data-index',
   /**
-   * Indicates the direction of the activation (based on the previous selected tab).
+   * Indicates the direction of the activation (based on the previous active tab).
    * @type {'left' | 'right' | 'up' | 'down' | 'none'}
    */
   activationDirection = 'data-activation-direction',
diff --git a/packages/react/src/tabs/root/TabsRoot.test.tsx b/packages/react/src/tabs/root/TabsRoot.test.tsx
diff --git a/packages/react/src/tabs/root/TabsRoot.tsx b/packages/react/src/tabs/root/TabsRoot.tsx
diff --git a/packages/react/src/tabs/root/TabsRootContext.ts b/packages/react/src/tabs/root/TabsRootContext.ts
diff --git a/packages/react/src/tabs/root/TabsRootDataAttributes.ts b/packages/react/src/tabs/root/TabsRootDataAttributes.ts
diff --git a/packages/react/src/tabs/tab/TabsTab.tsx b/packages/react/src/tabs/tab/TabsTab.tsx
diff --git a/packages/react/src/tabs/tab/TabsTabDataAttributes.ts b/packages/react/src/tabs/tab/TabsTabDataAttributes.ts

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@`
`24`	`24`	`"type": "'horizontal' \| 'vertical'"`
`25`	`25`	`},`
`26`	`26`	`"data-activation-direction": {`
`27`		`- "description": "Indicates the direction of the activation (based on the previous selected tab).",`
	`27`	`+ "description": "Indicates the direction of the activation (based on the previous active tab).",`
`28`	`28`	`"type": "'left' \| 'right' \| 'up' \| 'down' \| 'none'"`
`29`	`29`	`}`
`30`	`30`	`},`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@`
`30`	`30`	`"type": "'horizontal' \| 'vertical'"`
`31`	`31`	`},`
`32`	`32`	`"data-activation-direction": {`
`33`		`- "description": "Indicates the direction of the activation (based on the previous selected tab).",`
	`33`	`+ "description": "Indicates the direction of the activation (based on the previous active tab).",`
`34`	`34`	`"type": "'left' \| 'right' \| 'up' \| 'down' \| 'none'"`
`35`	`35`	`}`
`36`	`36`	`},`
Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,7 @@`
`52`	`52`	`height: 2rem;`
`53`	`53`	`}`
`54`	`54`
`55`		`- &[data-selected] {`
	`55`	`+ &[data-active] {`
`56`	`56`	`color: var(--color-gray-900);`
`57`	`57`	`}`
`58`	`58`
Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@`
`33`	`33`	`padding-block: 0;`
`34`	`34`	`height: 2rem;`
`35`	`35`
`36`		`- &[data-selected] {`
	`36`	`+ &[data-active] {`
`37`	`37`	`color: var(--color-gray-900);`
`38`	`38`	`}`
`39`	`39`
Original file line number	Diff line number	Diff line change
`@@ -121,7 +121,7 @@`
`121`	`121`	`inset: -0.375rem -0.5rem;`
`122`	`122`	`}`
`123`	`123`
`124`		`- &[data-selected] {`
	`124`	`+ &[data-active] {`
`125`	`125`	`color: var(--color-foreground);`
`126`	`126`	`font-weight: bold;`
`127`	`127`