@mui/material 9.0.0-beta.0 → 9.0.0

package/StepLabel/StepLabel.d.ts

@@ -72,11 +72,11 @@ export type StepLabelClasskey = keyof NonNullable<StepLabelProps['classes']>;
  *
  * Demos:
  *
- * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://mui.com/material-ui/react-stepper/)
  *
  * API:
  *
- * - [StepLabel API](https://next.mui.com/material-ui/api/step-label/)
+ * - [StepLabel API](https://mui.com/material-ui/api/step-label/)
  */
 declare const StepLabel: ((props: StepLabelProps) => React.JSX.Element) & {
   muiName: string;

package/Stepper/Stepper.d.mts

@@ -61,11 +61,11 @@ export type StepperClasskey = keyof NonNullable<StepperProps['classes']>;
  *
  * Demos:
  *
- * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://mui.com/material-ui/react-stepper/)
  *
  * API:
  *
- * - [Stepper API](https://next.mui.com/material-ui/api/stepper/)
+ * - [Stepper API](https://mui.com/material-ui/api/stepper/)
  */
 declare const Stepper: OverridableComponent<StepperTypeMap>;
 export default Stepper;

package/Stepper/Stepper.d.ts

@@ -61,11 +61,11 @@ export type StepperClasskey = keyof NonNullable<StepperProps['classes']>;
  *
  * Demos:
  *
- * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://mui.com/material-ui/react-stepper/)
  *
  * API:
  *
- * - [Stepper API](https://next.mui.com/material-ui/api/stepper/)
+ * - [Stepper API](https://mui.com/material-ui/api/stepper/)
  */
 declare const Stepper: OverridableComponent<StepperTypeMap>;
 export default Stepper;

package/Stepper/Stepper.js

@@ -13,12 +13,12 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _useRovingTabIndex = _interopRequireDefault(require("../utils/useRovingTabIndex"));
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _useRovingTabIndex = require("../utils/useRovingTabIndex");
 var _stepperClasses = require("./stepperClasses");
 var _StepConnector = _interopRequireDefault(require("../StepConnector"));
-var _StepperContext = require("./StepperContext");
+var _StepperContext = _interopRequireDefault(require("./StepperContext"));
 var _StepButton = _interopRequireDefault(require("../StepButton"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
@@ -72,6 +72,37 @@ const StepperRoot = (0, _zeroStyled.styled)('ol', {
   }]
 });
 const defaultConnector = /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepConnector.default, {});
+function RovingStepper(props) {
+  // eslint-disable-next-line react/prop-types
+  const {
+    children,
+    className,
+    component,
+    forwardedRef,
+    isRtl,
+    orientation,
+    ownerState,
+    ...other
+  } = props;
+  const rovingContainer = (0, _useRovingTabIndex.useRovingTabIndexRoot)({
+    orientation,
+    isRtl
+  });
+  const rovingContainerProps = rovingContainer.getContainerProps(forwardedRef);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_useRovingTabIndex.RovingTabIndexContext.Provider, {
+    value: rovingContainer,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepperRoot, {
+      as: component,
+      ownerState: ownerState,
+      className: className,
+      role: "tablist",
+      "aria-orientation": orientation,
+      ...rovingContainerProps,
+      ...other,
+      children: children
+    })
+  });
+}
 const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
   const isRtl = (0, _RtlProvider.useRtl)();
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
@@ -119,14 +150,6 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
       ...step.props
     });
   });
-  const {
-    getContainerProps,
-    getItemProps
-  } = (0, _useRovingTabIndex.default)({
-    orientation,
-    isRtl
-  });
-  const rovingTabIndexContainerProps = getContainerProps(ref);
   const contextValue = React.useMemo(() => ({
     activeStep,
     alternativeLabel,
@@ -134,21 +157,30 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
     nonLinear,
     orientation,
     totalSteps,
-    getRovingTabIndexProps: getItemProps,
     isTabList
-  }), [activeStep, alternativeLabel, connector, nonLinear, orientation, totalSteps, getItemProps, isTabList]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepperContext.StepperContextProvider, {
+  }), [activeStep, alternativeLabel, connector, nonLinear, orientation, totalSteps, isTabList]);
+  if (!isTabList) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepperContext.default.Provider, {
+      value: contextValue,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepperRoot, {
+        as: component,
+        ownerState: ownerState,
+        className: (0, _clsx.default)(classes.root, className),
+        ref: ref,
+        ...other,
+        children: steps
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepperContext.default.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepperRoot, {
-      as: component,
-      ownerState: ownerState,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RovingStepper, {
+      forwardedRef: ref,
+      isRtl: isRtl,
       className: (0, _clsx.default)(classes.root, className),
-      ref: ref,
-      ...(isTabList && {
-        role: 'tablist',
-        'aria-orientation': orientation,
-        ...rovingTabIndexContainerProps
-      }),
+      component: component,
+      orientation: orientation,
+      ownerState: ownerState,
       ...other,
       children: steps
     })

package/Stepper/Stepper.mjs

@@ -6,12 +6,12 @@ import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import composeClasses from '@mui/utils/composeClasses';
 import { useRtl } from '@mui/system/RtlProvider';
-import useRovingTabIndex from "../utils/useRovingTabIndex.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
+import { RovingTabIndexContext, useRovingTabIndexRoot } from "../utils/useRovingTabIndex.mjs";
 import { getStepperUtilityClass } from "./stepperClasses.mjs";
 import StepConnector from "../StepConnector/index.mjs";
-import { StepperContextProvider } from "./StepperContext.mjs";
+import StepperContext from "./StepperContext.mjs";
 import StepButton from "../StepButton/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -65,6 +65,37 @@ const StepperRoot = styled('ol', {
   }]
 });
 const defaultConnector = /*#__PURE__*/_jsx(StepConnector, {});
+function RovingStepper(props) {
+  // eslint-disable-next-line react/prop-types
+  const {
+    children,
+    className,
+    component,
+    forwardedRef,
+    isRtl,
+    orientation,
+    ownerState,
+    ...other
+  } = props;
+  const rovingContainer = useRovingTabIndexRoot({
+    orientation,
+    isRtl
+  });
+  const rovingContainerProps = rovingContainer.getContainerProps(forwardedRef);
+  return /*#__PURE__*/_jsx(RovingTabIndexContext.Provider, {
+    value: rovingContainer,
+    children: /*#__PURE__*/_jsx(StepperRoot, {
+      as: component,
+      ownerState: ownerState,
+      className: className,
+      role: "tablist",
+      "aria-orientation": orientation,
+      ...rovingContainerProps,
+      ...other,
+      children: children
+    })
+  });
+}
 const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
   const isRtl = useRtl();
   const props = useDefaultProps({
@@ -112,14 +143,6 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
       ...step.props
     });
   });
-  const {
-    getContainerProps,
-    getItemProps
-  } = useRovingTabIndex({
-    orientation,
-    isRtl
-  });
-  const rovingTabIndexContainerProps = getContainerProps(ref);
   const contextValue = React.useMemo(() => ({
     activeStep,
     alternativeLabel,
@@ -127,21 +150,30 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
     nonLinear,
     orientation,
     totalSteps,
-    getRovingTabIndexProps: getItemProps,
     isTabList
-  }), [activeStep, alternativeLabel, connector, nonLinear, orientation, totalSteps, getItemProps, isTabList]);
-  return /*#__PURE__*/_jsx(StepperContextProvider, {
+  }), [activeStep, alternativeLabel, connector, nonLinear, orientation, totalSteps, isTabList]);
+  if (!isTabList) {
+    return /*#__PURE__*/_jsx(StepperContext.Provider, {
+      value: contextValue,
+      children: /*#__PURE__*/_jsx(StepperRoot, {
+        as: component,
+        ownerState: ownerState,
+        className: clsx(classes.root, className),
+        ref: ref,
+        ...other,
+        children: steps
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(StepperContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(StepperRoot, {
-      as: component,
-      ownerState: ownerState,
+    children: /*#__PURE__*/_jsx(RovingStepper, {
+      forwardedRef: ref,
+      isRtl: isRtl,
       className: clsx(classes.root, className),
-      ref: ref,
-      ...(isTabList && {
-        role: 'tablist',
-        'aria-orientation': orientation,
-        ...rovingTabIndexContainerProps
-      }),
+      component: component,
+      orientation: orientation,
+      ownerState: ownerState,
       ...other,
       children: steps
     })

package/Stepper/StepperContext.d.mts

@@ -6,10 +6,6 @@ export interface StepperContextType {
   nonLinear: boolean;
   orientation: 'horizontal' | 'vertical';
   totalSteps: number;
-  getRovingTabIndexProps: (index: number, ref?: React.Ref<HTMLElement>) => {
-    ref: (element: HTMLElement | null) => void;
-    tabIndex: number;
-  };
   isTabList: boolean;
 }
 /**
@@ -21,5 +17,4 @@ declare const StepperContext: React.Context<{} | StepperContextType>;
  * has been defined in the component tree.
  */
 export declare function useStepperContext(): StepperContextType | {};
-export declare const StepperContextProvider: React.Provider<{} | StepperContextType>;
 export default StepperContext;

package/Stepper/StepperContext.d.ts

@@ -6,10 +6,6 @@ export interface StepperContextType {
   nonLinear: boolean;
   orientation: 'horizontal' | 'vertical';
   totalSteps: number;
-  getRovingTabIndexProps: (index: number, ref?: React.Ref<HTMLElement>) => {
-    ref: (element: HTMLElement | null) => void;
-    tabIndex: number;
-  };
   isTabList: boolean;
 }
 /**
@@ -21,5 +17,4 @@ declare const StepperContext: React.Context<{} | StepperContextType>;
  * has been defined in the component tree.
  */
 export declare function useStepperContext(): StepperContextType | {};
-export declare const StepperContextProvider: React.Provider<{} | StepperContextType>;
 export default StepperContext;

package/Stepper/StepperContext.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StepperContextProvider = void 0;
+exports.default = void 0;
 exports.useStepperContext = useStepperContext;
 var React = _interopRequireWildcard(require("react"));
 /**
@@ -23,5 +23,4 @@ if (process.env.NODE_ENV !== 'production') {
 function useStepperContext() {
   return React.useContext(StepperContext);
 }
-const StepperContextProvider = exports.StepperContextProvider = StepperContext.Provider;
 var _default = exports.default = StepperContext;

package/Stepper/StepperContext.mjs

@@ -16,5 +16,4 @@ if (process.env.NODE_ENV !== 'production') {
 export function useStepperContext() {
   return React.useContext(StepperContext);
 }
-export const StepperContextProvider = StepperContext.Provider;
 export default StepperContext;

package/SvgIcon/SvgIcon.d.mts

@@ -73,12 +73,12 @@ export interface SvgIconTypeMap<AdditionalProps = {}, RootComponent extends Reac
  *
  * Demos:
  *
- * - [Icons](https://next.mui.com/material-ui/icons/)
- * - [Material Icons](https://next.mui.com/material-ui/material-icons/)
+ * - [Icons](https://mui.com/material-ui/icons/)
+ * - [Material Icons](https://mui.com/material-ui/material-icons/)
  *
  * API:
  *
- * - [SvgIcon API](https://next.mui.com/material-ui/api/svg-icon/)
+ * - [SvgIcon API](https://mui.com/material-ui/api/svg-icon/)
  */
 declare const SvgIcon: OverridableComponent<SvgIconTypeMap> & {
   muiName: string;

package/SvgIcon/SvgIcon.d.ts

@@ -73,12 +73,12 @@ export interface SvgIconTypeMap<AdditionalProps = {}, RootComponent extends Reac
  *
  * Demos:
  *
- * - [Icons](https://next.mui.com/material-ui/icons/)
- * - [Material Icons](https://next.mui.com/material-ui/material-icons/)
+ * - [Icons](https://mui.com/material-ui/icons/)
+ * - [Material Icons](https://mui.com/material-ui/material-icons/)
  *
  * API:
  *
- * - [SvgIcon API](https://next.mui.com/material-ui/api/svg-icon/)
+ * - [SvgIcon API](https://mui.com/material-ui/api/svg-icon/)
  */
 declare const SvgIcon: OverridableComponent<SvgIconTypeMap> & {
   muiName: string;

package/SwipeableDrawer/SwipeableDrawer.d.mts

@@ -90,12 +90,12 @@ export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'ope
  *
  * Demos:
  *
- * - [Drawer](https://next.mui.com/material-ui/react-drawer/)
+ * - [Drawer](https://mui.com/material-ui/react-drawer/)
  *
  * API:
  *
- * - [SwipeableDrawer API](https://next.mui.com/material-ui/api/swipeable-drawer/)
- * - inherits [Drawer API](https://next.mui.com/material-ui/api/drawer/)
+ * - [SwipeableDrawer API](https://mui.com/material-ui/api/swipeable-drawer/)
+ * - inherits [Drawer API](https://mui.com/material-ui/api/drawer/)
  */
 declare const SwipeableDrawer: React.JSXElementConstructor<SwipeableDrawerProps>;
 export default SwipeableDrawer;

package/SwipeableDrawer/SwipeableDrawer.d.ts

@@ -90,12 +90,12 @@ export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'ope
  *
  * Demos:
  *
- * - [Drawer](https://next.mui.com/material-ui/react-drawer/)
+ * - [Drawer](https://mui.com/material-ui/react-drawer/)
  *
  * API:
  *
- * - [SwipeableDrawer API](https://next.mui.com/material-ui/api/swipeable-drawer/)
- * - inherits [Drawer API](https://next.mui.com/material-ui/api/drawer/)
+ * - [SwipeableDrawer API](https://mui.com/material-ui/api/swipeable-drawer/)
+ * - inherits [Drawer API](https://mui.com/material-ui/api/drawer/)
  */
 declare const SwipeableDrawer: React.JSXElementConstructor<SwipeableDrawerProps>;
 export default SwipeableDrawer;

package/SwipeableDrawer/SwipeableDrawer.js

@@ -177,7 +177,6 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     const horizontalSwipe = (0, _Drawer.isHorizontal)(anchor);
     const transform = horizontalSwipe ? `translate(${rtlTranslateMultiplier * translate}px, 0)` : `translate(0, ${rtlTranslateMultiplier * translate}px)`;
     const drawerStyle = paperRef.current.style;
-    drawerStyle.webkitTransform = transform;
     drawerStyle.transform = transform;
     let transition = '';
     if (mode) {
@@ -190,14 +189,12 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       }));
     }
     if (changeTransition) {
-      drawerStyle.webkitTransition = transition;
       drawerStyle.transition = transition;
     }
     if (!disableBackdropTransition && !hideBackdrop) {
       const backdropStyle = backdropRef.current.style;
       backdropStyle.opacity = 1 - translate / getMaxTranslate(horizontalSwipe, paperRef.current);
       if (changeTransition) {
-        backdropStyle.webkitTransition = transition;
         backdropStyle.transition = transition;
       }
     }

package/SwipeableDrawer/SwipeableDrawer.mjs

@@ -170,7 +170,6 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     const horizontalSwipe = isHorizontal(anchor);
     const transform = horizontalSwipe ? `translate(${rtlTranslateMultiplier * translate}px, 0)` : `translate(0, ${rtlTranslateMultiplier * translate}px)`;
     const drawerStyle = paperRef.current.style;
-    drawerStyle.webkitTransform = transform;
     drawerStyle.transform = transform;
     let transition = '';
     if (mode) {
@@ -183,14 +182,12 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       }));
     }
     if (changeTransition) {
-      drawerStyle.webkitTransition = transition;
       drawerStyle.transition = transition;
     }
     if (!disableBackdropTransition && !hideBackdrop) {
       const backdropStyle = backdropRef.current.style;
       backdropStyle.opacity = 1 - translate / getMaxTranslate(horizontalSwipe, paperRef.current);
       if (changeTransition) {
-        backdropStyle.webkitTransition = transition;
         backdropStyle.transition = transition;
       }
     }

package/Switch/Switch.d.mts

@@ -113,12 +113,12 @@ export interface SwitchProps extends StandardProps<SwitchBaseProps, 'checkedIcon
  *
  * Demos:
  *
- * - [Switch](https://next.mui.com/material-ui/react-switch/)
- * - [Transfer List](https://next.mui.com/material-ui/react-transfer-list/)
+ * - [Switch](https://mui.com/material-ui/react-switch/)
+ * - [Transfer List](https://mui.com/material-ui/react-transfer-list/)
  *
  * API:
  *
- * - [Switch API](https://next.mui.com/material-ui/api/switch/)
- * - inherits [IconButton API](https://next.mui.com/material-ui/api/icon-button/)
+ * - [Switch API](https://mui.com/material-ui/api/switch/)
+ * - inherits [IconButton API](https://mui.com/material-ui/api/icon-button/)
  */
 export default function Switch(props: SwitchProps): React.JSX.Element;

package/Switch/Switch.d.ts

@@ -113,12 +113,12 @@ export interface SwitchProps extends StandardProps<SwitchBaseProps, 'checkedIcon
  *
  * Demos:
  *
- * - [Switch](https://next.mui.com/material-ui/react-switch/)
- * - [Transfer List](https://next.mui.com/material-ui/react-transfer-list/)
+ * - [Switch](https://mui.com/material-ui/react-switch/)
+ * - [Transfer List](https://mui.com/material-ui/react-transfer-list/)
  *
  * API:
  *
- * - [Switch API](https://next.mui.com/material-ui/api/switch/)
- * - inherits [IconButton API](https://next.mui.com/material-ui/api/icon-button/)
+ * - [Switch API](https://mui.com/material-ui/api/switch/)
+ * - inherits [IconButton API](https://mui.com/material-ui/api/icon-button/)
  */
 export default function Switch(props: SwitchProps): React.JSX.Element;

package/Switch/Switch.js

@@ -186,6 +186,8 @@ const SwitchTrack = (0, _zeroStyled.styled)('span', {
   height: '100%',
   width: '100%',
   borderRadius: 14 / 2,
+  boxSizing: 'border-box',
+  border: '1px solid transparent',
   zIndex: -1,
   transition: theme.transitions.create(['opacity', 'background-color'], {
     duration: theme.transitions.duration.shortest
@@ -201,6 +203,8 @@ const SwitchThumb = (0, _zeroStyled.styled)('span', {
 }) => ({
   boxShadow: (theme.vars || theme).shadows[1],
   backgroundColor: 'currentColor',
+  boxSizing: 'border-box',
+  border: '1px solid transparent',
   width: 20,
   height: 20,
   borderRadius: '50%'

package/Switch/Switch.mjs

@@ -179,6 +179,8 @@ const SwitchTrack = styled('span', {
   height: '100%',
   width: '100%',
   borderRadius: 14 / 2,
+  boxSizing: 'border-box',
+  border: '1px solid transparent',
   zIndex: -1,
   transition: theme.transitions.create(['opacity', 'background-color'], {
     duration: theme.transitions.duration.shortest
@@ -194,6 +196,8 @@ const SwitchThumb = styled('span', {
 }) => ({
   boxShadow: (theme.vars || theme).shadows[1],
   backgroundColor: 'currentColor',
+  boxSizing: 'border-box',
+  border: '1px solid transparent',
   width: 20,
   height: 20,
   borderRadius: '50%'

package/Tab/Tab.d.mts

@@ -61,12 +61,12 @@ export type TabTypeMap<AdditionalProps = {}, RootComponent extends React.Element
  *
  * Demos:
  *
- * - [Tabs](https://next.mui.com/material-ui/react-tabs/)
+ * - [Tabs](https://mui.com/material-ui/react-tabs/)
  *
  * API:
  *
- * - [Tab API](https://next.mui.com/material-ui/api/tab/)
- * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
+ * - [Tab API](https://mui.com/material-ui/api/tab/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
  */
 declare const Tab: ExtendButtonBase<TabTypeMap>;
 export type TabProps<RootComponent extends React.ElementType = TabTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<TabTypeMap<AdditionalProps, RootComponent>, RootComponent> & {

package/Tab/Tab.d.ts

@@ -61,12 +61,12 @@ export type TabTypeMap<AdditionalProps = {}, RootComponent extends React.Element
  *
  * Demos:
  *
- * - [Tabs](https://next.mui.com/material-ui/react-tabs/)
+ * - [Tabs](https://mui.com/material-ui/react-tabs/)
  *
  * API:
  *
- * - [Tab API](https://next.mui.com/material-ui/api/tab/)
- * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
+ * - [Tab API](https://mui.com/material-ui/api/tab/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
  */
 declare const Tab: ExtendButtonBase<TabTypeMap>;
 export type TabProps<RootComponent extends React.ElementType = TabTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<TabTypeMap<AdditionalProps, RootComponent>, RootComponent> & {

package/Tab/Tab.js

@@ -17,6 +17,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _unsupportedProp = _interopRequireDefault(require("../utils/unsupportedProp"));
+var _useRovingTabIndex = require("../utils/useRovingTabIndex");
 var _tabClasses = _interopRequireWildcard(require("./tabClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
@@ -213,6 +214,19 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     wrapped = false,
     ...other
   } = props;
+  const rovingContext = (0, _useRovingTabIndex.useRovingTabIndexContext)();
+  const rovingItemProps = (0, _useRovingTabIndex.useRovingTabIndexItem)({
+    id: value,
+    ref,
+    disabled,
+    selected
+  });
+  // On the server, and on the first client render before registration effects run,
+  // the roving item map is still empty. In that window, fall back to `tabIndex={0}`
+  // for the selected tab so the rendered markup is immediately keyboard-accessible
+  // and hydration stays consistent until item registration takes over.
+  const shouldUseSelectedTabStopFallback = rovingContext.getItemMap().size === 0 && selected;
+  const tabIndex = shouldUseSelectedTabStopFallback ? 0 : rovingItemProps.tabIndex;
   const ownerState = {
     ...props,
     disabled,
@@ -246,14 +260,16 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TabRoot, {
+    internalNativeButton: true,
     focusRipple: !disableFocusRipple,
     className: (0, _clsx.default)(classes.root, className),
-    ref: ref,
+    ref: rovingItemProps.ref,
     role: "tab",
     "aria-selected": selected,
     disabled: disabled,
     onClick: handleClick,
     onFocus: handleFocus,
+    tabIndex: tabIndex,
     ownerState: ownerState,
     ...other,
     children: [iconPosition === 'top' || iconPosition === 'start' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {

package/Tab/Tab.mjs

@@ -10,6 +10,7 @@ import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import unsupportedProp from "../utils/unsupportedProp.mjs";
+import { useRovingTabIndexContext, useRovingTabIndexItem } from "../utils/useRovingTabIndex.mjs";
 import tabClasses, { getTabUtilityClass } from "./tabClasses.mjs";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -206,6 +207,19 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     wrapped = false,
     ...other
   } = props;
+  const rovingContext = useRovingTabIndexContext();
+  const rovingItemProps = useRovingTabIndexItem({
+    id: value,
+    ref,
+    disabled,
+    selected
+  });
+  // On the server, and on the first client render before registration effects run,
+  // the roving item map is still empty. In that window, fall back to `tabIndex={0}`
+  // for the selected tab so the rendered markup is immediately keyboard-accessible
+  // and hydration stays consistent until item registration takes over.
+  const shouldUseSelectedTabStopFallback = rovingContext.getItemMap().size === 0 && selected;
+  const tabIndex = shouldUseSelectedTabStopFallback ? 0 : rovingItemProps.tabIndex;
   const ownerState = {
     ...props,
     disabled,
@@ -239,14 +253,16 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     }
   };
   return /*#__PURE__*/_jsxs(TabRoot, {
+    internalNativeButton: true,
     focusRipple: !disableFocusRipple,
     className: clsx(classes.root, className),
-    ref: ref,
+    ref: rovingItemProps.ref,
     role: "tab",
     "aria-selected": selected,
     disabled: disabled,
     onClick: handleClick,
     onFocus: handleFocus,
+    tabIndex: tabIndex,
     ownerState: ownerState,
     ...other,
     children: [iconPosition === 'top' || iconPosition === 'start' ? /*#__PURE__*/_jsxs(React.Fragment, {