From 1c248897d5c1724397eaa41553ca56ecf48817e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Thu, 29 Feb 2024 09:45:47 +0100
Subject: [PATCH 01/32] Component-per-node API

---
 .../system/index.tsx                          |  39 ++--
 packages/mui-base/src/Switch/Switch.test.tsx  |  31 +---
 packages/mui-base/src/Switch/Switch.tsx       | 175 ++++++------------
 packages/mui-base/src/Switch/Switch.types.ts  | 126 +++++--------
 packages/mui-base/src/Switch/SwitchContext.ts |   6 +
 packages/mui-base/src/Switch/SwitchThumb.tsx  |  38 ++++
 packages/mui-base/src/Switch/index.ts         |   9 +-
 packages/mui-base/src/Switch/switchClasses.ts |  40 ----
 packages/mui-base/src/useSwitch/useSwitch.ts  |  27 ++-
 .../mui-base/src/useSwitch/useSwitch.types.ts |  16 ++
 .../src/utils/combineComponentExports.test.ts |  27 +++
 .../src/utils/combineComponentExports.ts      |  11 ++
 .../mui-base/src/utils/resolveClassName.ts    |  13 ++
 13 files changed, 261 insertions(+), 297 deletions(-)
 create mode 100644 packages/mui-base/src/Switch/SwitchContext.ts
 create mode 100644 packages/mui-base/src/Switch/SwitchThumb.tsx
 delete mode 100644 packages/mui-base/src/Switch/switchClasses.ts
 create mode 100644 packages/mui-base/src/utils/combineComponentExports.test.ts
 create mode 100644 packages/mui-base/src/utils/combineComponentExports.ts
 create mode 100644 packages/mui-base/src/utils/resolveClassName.ts

diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx
index 8a8fe6ee47..a79256e673 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx
@@ -1,40 +1,29 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { Switch, switchClasses } from '@mui/base/Switch';
+import { Switch } from '@mui/base/Switch';
 
 export default function UnstyledSwitchIntroduction() {
   const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
 
   return (
     <div>
+      <Switch render={(props) => <Root {...props} />} {...label} defaultChecked>
+        <Switch.Thumb />
+      </Switch>
+      <Switch render={(props) => <Root {...props} />} {...label}>
+        <Switch.Thumb />
+      </Switch>
       <Switch
-        slots={{
-          root: Root,
-        }}
+        render={(props) => <Root {...props} />}
         {...label}
         defaultChecked
-      />
-      <Switch
-        slots={{
-          root: Root,
-        }}
-        {...label}
-      />
-      <Switch
-        slots={{
-          root: Root,
-        }}
-        {...label}
-        defaultChecked
-        disabled
-      />
-      <Switch
-        slots={{
-          root: Root,
-        }}
-        {...label}
         disabled
-      />
+      >
+        <Switch.Thumb />
+      </Switch>
+      <Switch render={(props) => <Root {...props} />} {...label} disabled>
+        <Switch.Thumb />
+      </Switch>
     </div>
   );
 }
diff --git a/packages/mui-base/src/Switch/Switch.test.tsx b/packages/mui-base/src/Switch/Switch.test.tsx
index 7ebe7e669e..dafd37c0d7 100644
--- a/packages/mui-base/src/Switch/Switch.test.tsx
+++ b/packages/mui-base/src/Switch/Switch.test.tsx
@@ -1,38 +1,12 @@
 import * as React from 'react';
 import { createMount, createRenderer } from '@mui/internal-test-utils';
 import { expect } from 'chai';
-import { Switch, SwitchOwnerState, switchClasses } from '@mui/base/Switch';
+import { Switch, SwitchOwnerState } from '@mui/base/Switch';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
 describe('<Switch />', () => {
-  const mount = createMount();
   const { render } = createRenderer();
 
-  describeConformanceUnstyled(<Switch />, () => ({
-    inheritComponent: 'span',
-    render,
-    mount,
-    refInstanceof: window.HTMLSpanElement,
-    testComponentPropWith: 'span',
-    slots: {
-      root: {
-        expectedClassName: switchClasses.root,
-      },
-      thumb: {
-        expectedClassName: switchClasses.thumb,
-      },
-      input: {
-        testWithElement: 'input',
-        expectedClassName: switchClasses.input,
-      },
-      track: {
-        expectedClassName: switchClasses.track,
-        isOptional: true,
-      },
-    },
-    skip: ['componentProp'],
-  }));
-
   describe('componentState', () => {
     it('passes the ownerState prop to all the slots', () => {
       interface CustomSlotProps {
@@ -48,7 +22,6 @@ describe('<Switch />', () => {
               data-checked={sp.checked}
               data-disabled={sp.disabled}
               data-readonly={sp.readOnly}
-              data-focusvisible={sp.focusVisible}
               data-testid="custom"
             >
               {children}
@@ -63,7 +36,7 @@ describe('<Switch />', () => {
         thumb: CustomSlot,
       };
 
-      const { getAllByTestId } = render(<Switch defaultChecked disabled slots={slots} />);
+      const { getAllByTestId } = render(<Switch defaultChecked disabled />);
       const renderedComponents = getAllByTestId('custom');
 
       expect(renderedComponents.length).to.equal(3);
diff --git a/packages/mui-base/src/Switch/Switch.tsx b/packages/mui-base/src/Switch/Switch.tsx
index 45997114e8..d23e9863de 100644
--- a/packages/mui-base/src/Switch/Switch.tsx
+++ b/packages/mui-base/src/Switch/Switch.tsx
@@ -1,40 +1,15 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { PolymorphicComponent } from '../utils/PolymorphicComponent';
-import { unstable_composeClasses as composeClasses } from '../composeClasses';
 import { useSwitch } from '../useSwitch';
-import {
-  SwitchProps,
-  SwitchOwnerState,
-  SwitchInputSlotProps,
-  SwitchRootSlotProps,
-  SwitchThumbSlotProps,
-  SwitchTrackSlotProps,
-  SwitchTypeMap,
-} from './Switch.types';
-import { useSlotProps, WithOptionalOwnerState } from '../utils';
-import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
-import { getSwitchUtilityClass } from './switchClasses';
+import { SwitchProps, SwitchOwnerState } from './Switch.types';
+import { resolveClassName } from '../utils/resolveClassName';
+import { SwitchContext } from './SwitchContext';
 
-const useUtilityClasses = (ownerState: SwitchOwnerState) => {
-  const { checked, disabled, focusVisible, readOnly } = ownerState;
-
-  const slots = {
-    root: [
-      'root',
-      checked && 'checked',
-      disabled && 'disabled',
-      focusVisible && 'focusVisible',
-      readOnly && 'readOnly',
-    ],
-    thumb: ['thumb'],
-    input: ['input'],
-    track: ['track'],
-  };
-
-  return composeClasses(slots, useClassNamesOverride(getSwitchUtilityClass));
-};
+function defaultRender(props: React.ComponentPropsWithRef<'button'>) {
+  // eslint-disable-next-line react/button-has-type
+  return <button {...props} />;
+}
 
 /**
  * The foundation for building custom-styled switches.
@@ -47,82 +22,53 @@ const useUtilityClasses = (ownerState: SwitchOwnerState) => {
  *
  * - [Switch API](https://mui.com/base-ui/react-switch/components-api/#switch)
  */
-const Switch = React.forwardRef(function Switch<RootComponentType extends React.ElementType>(
-  props: SwitchProps<RootComponentType>,
-  forwardedRef: React.ForwardedRef<Element>,
+const Switch = React.forwardRef(function Switch(
+  props: SwitchProps,
+  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const {
     checked: checkedProp,
+    className: classNameProp,
     defaultChecked,
     disabled: disabledProp,
-    onBlur,
     onChange,
-    onFocus,
-    onFocusVisible,
     readOnly: readOnlyProp,
-    required,
-    slotProps = {},
-    slots = {},
+    required = false,
+    render = defaultRender,
     ...other
   } = props;
 
-  const { getInputProps, checked, disabled, focusVisible, readOnly } = useSwitch(props);
-
-  const ownerState: SwitchOwnerState = {
-    ...props,
-    checked,
-    disabled,
-    focusVisible,
-    readOnly,
-  };
-
-  const classes = useUtilityClasses(ownerState);
+  const { getInputProps, getButtonProps, checked, disabled, readOnly } = useSwitch(props);
 
-  const Root: React.ElementType = slots.root ?? 'span';
-  const rootProps: WithOptionalOwnerState<SwitchRootSlotProps> = useSlotProps({
-    elementType: Root,
-    externalSlotProps: slotProps.root,
-    externalForwardedProps: other,
-    additionalProps: {
-      ref: forwardedRef,
-    },
-    ownerState,
-    className: classes.root,
-  });
-
-  const Thumb: React.ElementType = slots.thumb ?? 'span';
-  const thumbProps: WithOptionalOwnerState<SwitchThumbSlotProps> = useSlotProps({
-    elementType: Thumb,
-    externalSlotProps: slotProps.thumb,
-    ownerState,
-    className: classes.thumb,
-  });
+  const ownerState: SwitchOwnerState = React.useMemo(
+    () => ({
+      checked,
+      disabled,
+      readOnly,
+      required,
+    }),
+    [checked, disabled, readOnly, required],
+  );
 
-  const Input: React.ElementType = slots.input ?? 'input';
-  const inputProps: WithOptionalOwnerState<SwitchInputSlotProps> = useSlotProps({
-    elementType: Input,
-    getSlotProps: getInputProps,
-    externalSlotProps: slotProps.input,
-    ownerState,
-    className: classes.input,
-  });
+  const className = resolveClassName(classNameProp, ownerState);
 
-  const Track: React.ElementType = slots.track === null ? () => null : slots.track ?? 'span';
-  const trackProps: WithOptionalOwnerState<SwitchTrackSlotProps> = useSlotProps({
-    elementType: Track,
-    externalSlotProps: slotProps.track,
-    ownerState,
-    className: classes.track,
-  });
+  const buttonProps = {
+    className,
+    'data-disabled': disabled ? 'true' : undefined,
+    'data-read-only': readOnly ? 'true' : undefined,
+    'data-required': required ? 'true' : undefined,
+    'data-state': checked ? 'checked' : 'unchecked',
+    ref: forwardedRef,
+    ...other,
+  };
 
   return (
-    <Root {...rootProps}>
-      <Track {...trackProps} />
-      <Thumb {...thumbProps} />
-      <Input {...inputProps} />
-    </Root>
+    <SwitchContext.Provider value={ownerState}>
+      {render(getButtonProps(buttonProps), ownerState)}
+      <input {...getInputProps()} />
+    </SwitchContext.Provider>
   );
-}) as PolymorphicComponent<SwitchTypeMap>;
+});
 
 Switch.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -134,9 +80,13 @@ Switch.propTypes /* remove-proptypes */ = {
    */
   checked: PropTypes.bool,
   /**
-   * Class name applied to the root element.
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Class names applied to the element or a function that returns them based on the component's state.
    */
-  className: PropTypes.string,
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /**
    * The default checked state. Use when the component is not controlled.
    */
@@ -145,6 +95,10 @@ Switch.propTypes /* remove-proptypes */ = {
    * If `true`, the component is disabled.
    */
   disabled: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  id: PropTypes.string,
   /**
    * @ignore
    */
@@ -161,39 +115,26 @@ Switch.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   onFocus: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocusVisible: PropTypes.func,
   /**
    * If `true`, the component is read only.
    */
   readOnly: PropTypes.bool,
   /**
-   * If `true`, the `input` element is required.
+   * A function to customize rendering of the component.
    */
-  required: PropTypes.bool,
+  render: PropTypes.func,
   /**
-   * The props used for each slot inside the Switch.
-   * @default {}
+   * If `true`, the `input` element is required.
    */
-  slotProps: PropTypes.shape({
-    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
+  required: PropTypes.bool,
   /**
-   * The components used for each slot inside the Switch.
-   * Either a string to use a HTML element or a component.
-   * @default {}
+   * @ignore
    */
-  slots: PropTypes /* @typescript-to-proptypes-ignore */.shape({
-    input: PropTypes.elementType,
-    root: PropTypes.elementType,
-    thumb: PropTypes.elementType,
-    track: PropTypes.oneOfType([PropTypes.elementType, PropTypes.oneOf([null])]),
-  }),
+  value: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.number,
+    PropTypes.string,
+  ]),
 } as any;
 
 export { Switch };
diff --git a/packages/mui-base/src/Switch/Switch.types.ts b/packages/mui-base/src/Switch/Switch.types.ts
index be812714ea..603c07dc51 100644
--- a/packages/mui-base/src/Switch/Switch.types.ts
+++ b/packages/mui-base/src/Switch/Switch.types.ts
@@ -1,101 +1,61 @@
-import { Simplify } from '@mui/types';
-import { PolymorphicProps, SlotComponentProps } from '../utils';
-import { UseSwitchInputSlotProps, UseSwitchParameters } from '../useSwitch';
+import * as React from 'react';
 
-export interface SwitchRootSlotPropsOverrides {}
-export interface SwitchThumbSlotPropsOverrides {}
-export interface SwitchInputSlotPropsOverrides {}
-export interface SwitchTrackSlotPropsOverrides {}
+// TODO: move to utils
+type ComponentRenderFn<Props, State> = (props: Props, state: State) => React.ReactElement;
 
-export interface SwitchOwnProps extends UseSwitchParameters {
+type BaseUiComponentCommonProps<ElementType extends React.ElementType, OwnerState> = Omit<
+  React.ComponentPropsWithoutRef<ElementType>,
+  'className'
+> & {
   /**
-   * Class name applied to the root element.
+   * Class names applied to the element or a function that returns them based on the component's state.
    */
-  className?: string;
+  className?: string | ((state: OwnerState) => string);
   /**
-   * The components used for each slot inside the Switch.
-   * Either a string to use a HTML element or a component.
-   * @default {}
+   * A function to customize rendering of the component.
    */
-  slots?: SwitchSlots;
+  render?: ComponentRenderFn<React.ComponentPropsWithRef<ElementType>, OwnerState>;
+};
+
+export type SwitchOwnerState = {
+  checked: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+  required: boolean;
+};
+
+export interface SwitchProps
+  extends Omit<BaseUiComponentCommonProps<'button', SwitchOwnerState>, 'onChange'> {
   /**
-   * The props used for each slot inside the Switch.
-   * @default {}
+   * If `true`, the component is checked.
    */
-  slotProps?: {
-    root?: SlotComponentProps<'span', SwitchRootSlotPropsOverrides, SwitchOwnerState>;
-    thumb?: SlotComponentProps<'span', SwitchThumbSlotPropsOverrides, SwitchOwnerState>;
-    input?: SlotComponentProps<'input', SwitchInputSlotPropsOverrides, SwitchOwnerState>;
-    track?: SlotComponentProps<'span', SwitchTrackSlotPropsOverrides, SwitchOwnerState>;
-  };
-}
-
-export interface SwitchSlots {
+  checked?: boolean;
   /**
-   * The component that renders the root.
-   * @default 'span'
+   * The default checked state. Use when the component is not controlled.
    */
-  root?: React.ElementType;
+  defaultChecked?: boolean;
   /**
-   * The component that renders the input.
-   * @default 'input'
+   * If `true`, the component is disabled.
    */
-  input?: React.ElementType;
+  disabled?: boolean;
+  onBlur?: React.FocusEventHandler;
   /**
-   * The component that renders the thumb.
-   * @default 'span'
+   * Callback fired when the state is changed.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
-  thumb?: React.ElementType;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onFocus?: React.FocusEventHandler;
   /**
-   * The component that renders the track.
-   * @default 'span'
+   * If `true`, the component is read only.
    */
-  track?: React.ElementType | null;
-}
-
-export interface SwitchTypeMap<
-  AdditionalProps = {},
-  RootComponentType extends React.ElementType = 'span',
-> {
-  props: SwitchOwnProps & AdditionalProps;
-  defaultComponent: RootComponentType;
+  readOnly?: boolean;
+  /**
+   * If `true`, the `input` element is required.
+   */
+  required?: boolean;
 }
 
-export type SwitchProps<
-  RootComponentType extends React.ElementType = SwitchTypeMap['defaultComponent'],
-> = PolymorphicProps<SwitchTypeMap<{}, RootComponentType>, RootComponentType>;
-
-export type SwitchOwnerState = Simplify<
-  SwitchOwnProps & {
-    checked: boolean;
-    disabled: boolean;
-    focusVisible: boolean;
-    readOnly: boolean;
-  }
->;
-
-export type SwitchRootSlotProps = {
-  ownerState: SwitchOwnerState;
-  className?: string;
-  children?: React.ReactNode;
-};
-
-export type SwitchThumbSlotProps = {
-  ownerState: SwitchOwnerState;
-  className?: string;
-  children?: React.ReactNode;
-};
-
-export type SwitchTrackSlotProps = {
-  ownerState: SwitchOwnerState;
-  className?: string;
-  children?: React.ReactNode;
-};
-
-export type SwitchInputSlotProps = Simplify<
-  UseSwitchInputSlotProps & {
-    ownerState: SwitchOwnerState;
-    className?: string;
-    children?: React.ReactNode;
-  }
->;
+export interface SwitchThumbProps extends BaseUiComponentCommonProps<'span', SwitchOwnerState> {}
diff --git a/packages/mui-base/src/Switch/SwitchContext.ts b/packages/mui-base/src/Switch/SwitchContext.ts
new file mode 100644
index 0000000000..d3abf39326
--- /dev/null
+++ b/packages/mui-base/src/Switch/SwitchContext.ts
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { type SwitchOwnerState } from './Switch.types';
+
+export type SwitchContextValue = SwitchOwnerState;
+
+export const SwitchContext = React.createContext<SwitchOwnerState | null>(null);
diff --git a/packages/mui-base/src/Switch/SwitchThumb.tsx b/packages/mui-base/src/Switch/SwitchThumb.tsx
new file mode 100644
index 0000000000..d5b11cf53f
--- /dev/null
+++ b/packages/mui-base/src/Switch/SwitchThumb.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { SwitchThumbProps } from './Switch.types';
+import { resolveClassName } from '../utils/resolveClassName';
+import { SwitchContext } from './SwitchContext';
+
+function defaultRender(props: React.ComponentPropsWithRef<'span'>) {
+  return <span {...props} />;
+}
+
+const SwitchThumb = React.forwardRef(function SwitchThumb(
+  props: SwitchThumbProps,
+  forwardedRef: React.ForwardedRef<HTMLSpanElement>,
+) {
+  const { render = defaultRender, className: classNameProp, ...other } = props;
+
+  const ownerState = React.useContext(SwitchContext);
+  if (ownerState === null) {
+    throw new Error('Base UI: Switch.Thumb is not placed inside the Switch component.');
+  }
+
+  const { disabled, readOnly, required, checked } = ownerState;
+
+  const className = resolveClassName(classNameProp, ownerState);
+
+  const elementProps = {
+    className,
+    'data-disabled': disabled ? 'true' : undefined,
+    'data-read-only': readOnly ? 'true' : undefined,
+    'data-required': required ? 'true' : undefined,
+    'data-state': checked ? 'checked' : 'unchecked',
+    ref: forwardedRef,
+    ...other,
+  };
+
+  return render(elementProps, ownerState);
+});
+
+export { SwitchThumb };
diff --git a/packages/mui-base/src/Switch/index.ts b/packages/mui-base/src/Switch/index.ts
index 6eced9996c..5dad8a63c3 100644
--- a/packages/mui-base/src/Switch/index.ts
+++ b/packages/mui-base/src/Switch/index.ts
@@ -1,5 +1,10 @@
 'use client';
-export { Switch } from './Switch';
+import { combineComponentExports } from '../utils/combineComponentExports';
+import { Switch as SwitchRoot } from './Switch';
+import { SwitchThumb } from './SwitchThumb';
+
 export * from './Switch.types';
 
-export * from './switchClasses';
+export const Switch = combineComponentExports(SwitchRoot, {
+  Thumb: SwitchThumb,
+});
diff --git a/packages/mui-base/src/Switch/switchClasses.ts b/packages/mui-base/src/Switch/switchClasses.ts
deleted file mode 100644
index 3cd2d45701..0000000000
--- a/packages/mui-base/src/Switch/switchClasses.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { generateUtilityClass } from '../generateUtilityClass';
-import { generateUtilityClasses } from '../generateUtilityClasses';
-
-const COMPONENT_NAME = 'Switch';
-
-export interface SwitchClasses {
-  /** Class applied to the root element. */
-  root: string;
-  /** Class applied to the internal input element */
-  input: string;
-  /** Class applied to the track element */
-  track: string;
-  /** Class applied to the thumb element */
-  thumb: string;
-  /** State class applied to the root element if the switch is checked */
-  checked: string;
-  /** State class applied to the root element if the switch is disabled */
-  disabled: string;
-  /** State class applied to the root element if the switch has visible focus */
-  focusVisible: string;
-  /** Class applied to the root element if the switch is read-only */
-  readOnly: string;
-}
-
-export type SwitchClassKey = keyof SwitchClasses;
-
-export function getSwitchUtilityClass(slot: string): string {
-  return generateUtilityClass(COMPONENT_NAME, slot);
-}
-
-export const switchClasses: SwitchClasses = generateUtilityClasses(COMPONENT_NAME, [
-  'root',
-  'input',
-  'track',
-  'thumb',
-  'checked',
-  'disabled',
-  'focusVisible',
-  'readOnly',
-]);
diff --git a/packages/mui-base/src/useSwitch/useSwitch.ts b/packages/mui-base/src/useSwitch/useSwitch.ts
index 58cb3b7d7d..21fbc6a965 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.ts
@@ -46,6 +46,8 @@ export function useSwitch(props: UseSwitchParameters): UseSwitchReturnValue {
         return;
       }
 
+      console.log('event.target.checked', event.target.checked);
+
       setCheckedState(event.target.checked);
       onChange?.(event);
       otherProps.onChange?.(event);
@@ -100,8 +102,28 @@ export function useSwitch(props: UseSwitchParameters): UseSwitchReturnValue {
       otherProps.onBlur?.(event);
     };
 
+  const createHandleClick =
+    (otherProps: React.ButtonHTMLAttributes<HTMLButtonElement>) =>
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      otherProps.onClick?.(event);
+      if (disabled) {
+        return;
+      }
+
+      setCheckedState((prevChecked) => !prevChecked);
+    };
+
   const handleInputRef = useForkRef(focusVisibleRef, inputRef);
 
+  const getButtonProps: UseSwitchReturnValue['getButtonProps'] = (otherProps = {}) => ({
+    role: 'switch',
+    'aria-checked': checked,
+    'aria-disabled': disabled,
+    type: 'button',
+    onClick: createHandleClick(otherProps),
+    ...otherProps,
+  });
+
   const getInputProps: UseSwitchReturnValue['getInputProps'] = (otherProps = {}) => ({
     checked: checkedProp,
     defaultChecked,
@@ -110,8 +132,10 @@ export function useSwitch(props: UseSwitchParameters): UseSwitchReturnValue {
     ref: handleInputRef,
     required,
     type: 'checkbox',
-    role: 'switch',
+    'aria-hidden': true,
     'aria-checked': checkedProp,
+    tabIndex: -1,
+    style: { opacity: 0, width: 0, height: 0, margin: 0, padding: 0, overflow: 'hidden' },
     ...otherProps,
     onChange: createHandleInputChange(otherProps),
     onFocus: createHandleFocus(otherProps),
@@ -122,6 +146,7 @@ export function useSwitch(props: UseSwitchParameters): UseSwitchReturnValue {
     checked,
     disabled: Boolean(disabled),
     focusVisible,
+    getButtonProps,
     getInputProps,
     inputRef: handleInputRef,
     readOnly: Boolean(readOnly),
diff --git a/packages/mui-base/src/useSwitch/useSwitch.types.ts b/packages/mui-base/src/useSwitch/useSwitch.types.ts
index 920494847c..f070b0cdec 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.types.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.types.ts
@@ -50,6 +50,19 @@ interface UseSwitchInputSlotOwnProps {
 export type UseSwitchInputSlotProps<TOther = {}> = Omit<TOther, keyof UseSwitchInputSlotOwnProps> &
   UseSwitchInputSlotOwnProps;
 
+interface UseSwitchButtonSlotOwnProps {
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  role: React.AriaRole;
+  'aria-disabled': React.AriaAttributes['aria-disabled'];
+  'aria-checked': React.AriaAttributes['aria-checked'];
+}
+
+export type UseSwitchButtonSlotProps<TOther = {}> = Omit<
+  TOther,
+  keyof UseSwitchButtonSlotOwnProps
+> &
+  UseSwitchButtonSlotOwnProps;
+
 export interface UseSwitchReturnValue {
   /**
    * If `true`, the component will be checked.
@@ -71,6 +84,9 @@ export interface UseSwitchReturnValue {
   getInputProps: (
     externalProps?: React.HTMLAttributes<HTMLInputElement>,
   ) => UseSwitchInputSlotProps;
+  getButtonProps: (
+    externalProps?: React.HTMLAttributes<HTMLInputElement>,
+  ) => UseSwitchButtonSlotProps;
   /**
    * Ref to the input slot's DOM node.
    */
diff --git a/packages/mui-base/src/utils/combineComponentExports.test.ts b/packages/mui-base/src/utils/combineComponentExports.test.ts
new file mode 100644
index 0000000000..63da310801
--- /dev/null
+++ b/packages/mui-base/src/utils/combineComponentExports.test.ts
@@ -0,0 +1,27 @@
+import { expect } from 'chai';
+import { combineComponentExports } from './combineComponentExports';
+
+const Root = function Root() {
+  return 'root';
+};
+
+const Sub1 = function Sub1() {
+  return 'sub1';
+};
+
+const Sub2 = function Sub2() {
+  return 'sub2';
+};
+
+describe('combineComponentExports', () => {
+  it('should combine the exports', () => {
+    const Combined = combineComponentExports(Root, { Sub1, Sub2 });
+
+    expect(Combined).haveOwnProperty('Sub1');
+    expect(Combined).haveOwnProperty('Sub2');
+
+    expect(Combined()).to.equal('root');
+    expect(Combined.Sub1()).to.equal('sub1');
+    expect(Combined.Sub2()).to.equal('sub2');
+  });
+});
diff --git a/packages/mui-base/src/utils/combineComponentExports.ts b/packages/mui-base/src/utils/combineComponentExports.ts
new file mode 100644
index 0000000000..33aa21d4a0
--- /dev/null
+++ b/packages/mui-base/src/utils/combineComponentExports.ts
@@ -0,0 +1,11 @@
+export function combineComponentExports<Root, Subcomponents extends {}>(
+  rootComponent: Root,
+  subcomponents: Subcomponents,
+) {
+  Object.entries(subcomponents).forEach(([subcomponentName, subcomponent]) => {
+    // @ts-expect-error
+    rootComponent[subcomponentName] = subcomponent;
+  });
+
+  return rootComponent as Root & Subcomponents;
+}
diff --git a/packages/mui-base/src/utils/resolveClassName.ts b/packages/mui-base/src/utils/resolveClassName.ts
new file mode 100644
index 0000000000..2f297225ee
--- /dev/null
+++ b/packages/mui-base/src/utils/resolveClassName.ts
@@ -0,0 +1,13 @@
+/**
+ * If the provided className is a string, it will be returned as is.
+ * Otherwise, the function will call the className function with the ownerState as the first argument.
+ *
+ * @param className
+ * @param ownerState
+ */
+export function resolveClassName<OwnerState>(
+  className: string | ((state: OwnerState) => string) | undefined,
+  ownerState: OwnerState,
+) {
+  return typeof className === 'function' ? className(ownerState) : className;
+}

From ca2d62acb308695974ac793e6a023edc3706a047 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Thu, 29 Feb 2024 10:23:43 +0100
Subject: [PATCH 02/32] Fix TS errors

---
 packages/mui-base/src/useSwitch/useSwitch.ts  | 83 ++-----------------
 .../mui-base/src/useSwitch/useSwitch.types.ts | 16 +---
 packages/mui-base/src/utils/useControlled.ts  |  1 +
 3 files changed, 7 insertions(+), 93 deletions(-)
 create mode 100644 packages/mui-base/src/utils/useControlled.ts

diff --git a/packages/mui-base/src/useSwitch/useSwitch.ts b/packages/mui-base/src/useSwitch/useSwitch.ts
index 21fbc6a965..de93e76da7 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.ts
@@ -1,10 +1,6 @@
 'use client';
 import * as React from 'react';
-import {
-  unstable_useControlled as useControlled,
-  unstable_useForkRef as useForkRef,
-  unstable_useIsFocusVisible as useIsFocusVisible,
-} from '@mui/utils';
+import { useControlled } from '../utils/useControlled';
 import { UseSwitchParameters, UseSwitchReturnValue } from './useSwitch.types';
 
 /**
@@ -19,17 +15,7 @@ import { UseSwitchParameters, UseSwitchReturnValue } from './useSwitch.types';
  * - [useSwitch API](https://mui.com/base-ui/react-switch/hooks-api/#use-switch)
  */
 export function useSwitch(props: UseSwitchParameters): UseSwitchReturnValue {
-  const {
-    checked: checkedProp,
-    defaultChecked,
-    disabled,
-    onBlur,
-    onChange,
-    onFocus,
-    onFocusVisible,
-    readOnly,
-    required,
-  } = props;
+  const { checked: checkedProp, defaultChecked, disabled, onChange, readOnly, required } = props;
 
   const [checked, setCheckedState] = useControlled({
     controlled: checkedProp,
@@ -46,62 +32,11 @@ export function useSwitch(props: UseSwitchParameters): UseSwitchReturnValue {
         return;
       }
 
-      console.log('event.target.checked', event.target.checked);
-
       setCheckedState(event.target.checked);
       onChange?.(event);
       otherProps.onChange?.(event);
     };
 
-  const {
-    isFocusVisibleRef,
-    onBlur: handleBlurVisible,
-    onFocus: handleFocusVisible,
-    ref: focusVisibleRef,
-  } = useIsFocusVisible();
-
-  const [focusVisible, setFocusVisible] = React.useState(false);
-  if (disabled && focusVisible) {
-    setFocusVisible(false);
-  }
-
-  React.useEffect(() => {
-    isFocusVisibleRef.current = focusVisible;
-  }, [focusVisible, isFocusVisibleRef]);
-
-  const inputRef = React.useRef<HTMLInputElement | null>(null);
-
-  const createHandleFocus =
-    (otherProps: React.InputHTMLAttributes<HTMLInputElement>) =>
-    (event: React.FocusEvent<HTMLInputElement>) => {
-      // Fix for https://github.com/facebook/react/issues/7769
-      if (!inputRef.current) {
-        inputRef.current = event.currentTarget;
-      }
-
-      handleFocusVisible(event);
-      if (isFocusVisibleRef.current === true) {
-        setFocusVisible(true);
-        onFocusVisible?.(event);
-      }
-
-      onFocus?.(event);
-      otherProps.onFocus?.(event);
-    };
-
-  const createHandleBlur =
-    (otherProps: React.InputHTMLAttributes<HTMLInputElement>) =>
-    (event: React.FocusEvent<HTMLInputElement>) => {
-      handleBlurVisible(event);
-
-      if (isFocusVisibleRef.current === false) {
-        setFocusVisible(false);
-      }
-
-      onBlur?.(event);
-      otherProps.onBlur?.(event);
-    };
-
   const createHandleClick =
     (otherProps: React.ButtonHTMLAttributes<HTMLButtonElement>) =>
     (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -113,42 +48,34 @@ export function useSwitch(props: UseSwitchParameters): UseSwitchReturnValue {
       setCheckedState((prevChecked) => !prevChecked);
     };
 
-  const handleInputRef = useForkRef(focusVisibleRef, inputRef);
-
   const getButtonProps: UseSwitchReturnValue['getButtonProps'] = (otherProps = {}) => ({
     role: 'switch',
     'aria-checked': checked,
     'aria-disabled': disabled,
+    'aria-readonly': readOnly,
     type: 'button',
-    onClick: createHandleClick(otherProps),
     ...otherProps,
+    onClick: createHandleClick(otherProps),
   });
 
   const getInputProps: UseSwitchReturnValue['getInputProps'] = (otherProps = {}) => ({
-    checked: checkedProp,
-    defaultChecked,
+    checked,
     disabled,
     readOnly,
-    ref: handleInputRef,
     required,
     type: 'checkbox',
     'aria-hidden': true,
-    'aria-checked': checkedProp,
     tabIndex: -1,
     style: { opacity: 0, width: 0, height: 0, margin: 0, padding: 0, overflow: 'hidden' },
     ...otherProps,
     onChange: createHandleInputChange(otherProps),
-    onFocus: createHandleFocus(otherProps),
-    onBlur: createHandleBlur(otherProps),
   });
 
   return {
     checked,
     disabled: Boolean(disabled),
-    focusVisible,
     getButtonProps,
     getInputProps,
-    inputRef: handleInputRef,
     readOnly: Boolean(readOnly),
   };
 }
diff --git a/packages/mui-base/src/useSwitch/useSwitch.types.ts b/packages/mui-base/src/useSwitch/useSwitch.types.ts
index f070b0cdec..d36cbcec2b 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.types.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.types.ts
@@ -13,7 +13,6 @@ export interface UseSwitchParameters {
    * If `true`, the component is disabled.
    */
   disabled?: boolean;
-  onBlur?: React.FocusEventHandler;
   /**
    * Callback fired when the state is changed.
    *
@@ -22,8 +21,6 @@ export interface UseSwitchParameters {
    * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  onFocus?: React.FocusEventHandler;
-  onFocusVisible?: React.FocusEventHandler;
   /**
    * If `true`, the component is read only.
    */
@@ -38,11 +35,8 @@ interface UseSwitchInputSlotOwnProps {
   checked?: boolean;
   defaultChecked?: boolean;
   disabled?: boolean;
-  onBlur: React.FocusEventHandler;
   onChange: React.ChangeEventHandler<HTMLInputElement>;
-  onFocus: React.FocusEventHandler;
   readOnly?: boolean;
-  ref: React.RefCallback<HTMLInputElement> | null;
   required?: boolean;
   type: React.HTMLInputTypeAttribute;
 }
@@ -72,10 +66,6 @@ export interface UseSwitchReturnValue {
    * If `true`, the component will be disabled.
    */
   disabled: boolean;
-  /**
-   * If `true`, it indicates that the component is being focused using keyboard.
-   */
-  focusVisible: boolean;
   /**
    * Resolver for the input slot's props.
    * @param externalProps props for the input slot
@@ -85,12 +75,8 @@ export interface UseSwitchReturnValue {
     externalProps?: React.HTMLAttributes<HTMLInputElement>,
   ) => UseSwitchInputSlotProps;
   getButtonProps: (
-    externalProps?: React.HTMLAttributes<HTMLInputElement>,
+    externalProps?: React.HTMLAttributes<HTMLButtonElement>,
   ) => UseSwitchButtonSlotProps;
-  /**
-   * Ref to the input slot's DOM node.
-   */
-  inputRef: React.RefCallback<HTMLInputElement> | null;
   /**
    * If `true`, the component will be read only.
    */
diff --git a/packages/mui-base/src/utils/useControlled.ts b/packages/mui-base/src/utils/useControlled.ts
new file mode 100644
index 0000000000..075a6d4d9c
--- /dev/null
+++ b/packages/mui-base/src/utils/useControlled.ts
@@ -0,0 +1 @@
+export { default as useControlled } from '@mui/utils/useControlled';

From 251b38442042867f4ac68b48fbdd39dfd224c49d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Thu, 29 Feb 2024 11:29:51 +0100
Subject: [PATCH 03/32] Abstract the style hooks generation

---
 packages/mui-base/src/Switch/Switch.tsx       | 12 ++-
 packages/mui-base/src/Switch/SwitchThumb.tsx  | 15 ++--
 .../src/utils/getStyleHookProps.test.ts       | 73 +++++++++++++++++++
 .../mui-base/src/utils/getStyleHookProps.ts   | 27 +++++++
 4 files changed, 116 insertions(+), 11 deletions(-)
 create mode 100644 packages/mui-base/src/utils/getStyleHookProps.test.ts
 create mode 100644 packages/mui-base/src/utils/getStyleHookProps.ts

diff --git a/packages/mui-base/src/Switch/Switch.tsx b/packages/mui-base/src/Switch/Switch.tsx
index d23e9863de..dc956876a5 100644
--- a/packages/mui-base/src/Switch/Switch.tsx
+++ b/packages/mui-base/src/Switch/Switch.tsx
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { useSwitch } from '../useSwitch';
 import { SwitchProps, SwitchOwnerState } from './Switch.types';
 import { resolveClassName } from '../utils/resolveClassName';
+import { getStyleHookProps } from '../utils/getStyleHookProps';
 import { SwitchContext } from './SwitchContext';
 
 function defaultRender(props: React.ComponentPropsWithRef<'button'>) {
@@ -52,13 +53,16 @@ const Switch = React.forwardRef(function Switch(
 
   const className = resolveClassName(classNameProp, ownerState);
 
+  const styleHooks = React.useMemo(() => {
+    return getStyleHookProps(ownerState, {
+      checked: (value) => ({ 'data-state': value ? 'checked' : 'unchecked' }),
+    });
+  }, [ownerState]);
+
   const buttonProps = {
     className,
-    'data-disabled': disabled ? 'true' : undefined,
-    'data-read-only': readOnly ? 'true' : undefined,
-    'data-required': required ? 'true' : undefined,
-    'data-state': checked ? 'checked' : 'unchecked',
     ref: forwardedRef,
+    ...styleHooks,
     ...other,
   };
 
diff --git a/packages/mui-base/src/Switch/SwitchThumb.tsx b/packages/mui-base/src/Switch/SwitchThumb.tsx
index d5b11cf53f..d68ef1c483 100644
--- a/packages/mui-base/src/Switch/SwitchThumb.tsx
+++ b/packages/mui-base/src/Switch/SwitchThumb.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { SwitchThumbProps } from './Switch.types';
-import { resolveClassName } from '../utils/resolveClassName';
 import { SwitchContext } from './SwitchContext';
+import { resolveClassName } from '../utils/resolveClassName';
+import { getStyleHookProps } from '../utils/getStyleHookProps';
 
 function defaultRender(props: React.ComponentPropsWithRef<'span'>) {
   return <span {...props} />;
@@ -18,17 +19,17 @@ const SwitchThumb = React.forwardRef(function SwitchThumb(
     throw new Error('Base UI: Switch.Thumb is not placed inside the Switch component.');
   }
 
-  const { disabled, readOnly, required, checked } = ownerState;
-
   const className = resolveClassName(classNameProp, ownerState);
+  const styleHooks = React.useMemo(() => {
+    return getStyleHookProps(ownerState, {
+      checked: (value) => (value === true ? { 'data-state': 'checked' } : null),
+    });
+  }, [ownerState]);
 
   const elementProps = {
     className,
-    'data-disabled': disabled ? 'true' : undefined,
-    'data-read-only': readOnly ? 'true' : undefined,
-    'data-required': required ? 'true' : undefined,
-    'data-state': checked ? 'checked' : 'unchecked',
     ref: forwardedRef,
+    ...styleHooks,
     ...other,
   };
 
diff --git a/packages/mui-base/src/utils/getStyleHookProps.test.ts b/packages/mui-base/src/utils/getStyleHookProps.test.ts
new file mode 100644
index 0000000000..8a797c8ddd
--- /dev/null
+++ b/packages/mui-base/src/utils/getStyleHookProps.test.ts
@@ -0,0 +1,73 @@
+import { expect } from 'chai';
+import { getStyleHookProps } from './getStyleHookProps';
+
+describe('getStyleHookProps', () => {
+  it('converts the state fields to data attributes', () => {
+    const state = {
+      checked: true,
+      orientation: 'vertical',
+      count: 42,
+    };
+
+    const result = getStyleHookProps(state);
+    expect(result).to.deep.equal({
+      'data-checked': 'true',
+      'data-orientation': 'vertical',
+      'data-count': '42',
+    });
+  });
+
+  it('changes the fields names to lowercase', () => {
+    const state = {
+      readOnly: true,
+    };
+
+    const result = getStyleHookProps(state);
+    expect(result).to.deep.equal({
+      'data-readonly': 'true',
+    });
+  });
+
+  it('does not include false values', () => {
+    const state = {
+      required: true,
+      disabled: false,
+    };
+
+    const result = getStyleHookProps(state);
+    expect(result).not.to.haveOwnProperty('data-disabled');
+  });
+
+  it('supports custom mapping', () => {
+    const state = {
+      checked: true,
+      orientation: 'vertical',
+      count: 42,
+    };
+
+    const result = getStyleHookProps(state, {
+      checked: (value) => ({ 'data-state': value ? 'checked' : 'unchecked' }),
+    });
+
+    expect(result).to.deep.equal({
+      'data-state': 'checked',
+      'data-orientation': 'vertical',
+      'data-count': '42',
+    });
+  });
+
+  it('supports nulls returned from custom mapping', () => {
+    const state = {
+      checked: false,
+      orientation: 'vertical',
+    };
+
+    const result = getStyleHookProps(state, {
+      checked: (value) => (value === true ? { 'data-state': 'checked' } : null),
+    });
+
+    expect(result).to.deep.equal({
+      'data-orientation': 'vertical',
+    });
+  });
+});
diff --git a/packages/mui-base/src/utils/getStyleHookProps.ts b/packages/mui-base/src/utils/getStyleHookProps.ts
new file mode 100644
index 0000000000..fa0bdd3ce7
--- /dev/null
+++ b/packages/mui-base/src/utils/getStyleHookProps.ts
@@ -0,0 +1,27 @@
+interface Stringifyable {
+  toString(): string;
+}
+
+export function getStyleHookProps(
+  state: Record<string, Stringifyable>,
+  customMapping?: Record<string, (s: Stringifyable) => Record<string, string> | null>,
+) {
+  let props: Record<string, string> = {};
+
+  Object.entries(state).forEach(([key, value]) => {
+    if (customMapping?.hasOwnProperty(key)) {
+      const customProps = customMapping[key](value);
+      if (customProps != null) {
+        props = { ...props, ...customProps };
+      }
+
+      return;
+    }
+
+    if (value !== false) {
+      props[`data-${key.toLowerCase()}`] = value.toString();
+    }
+  });
+
+  return props;
+}

From cb57671b0f05840e69702f9dc3a9afa5629cce61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Thu, 29 Feb 2024 11:35:16 +0100
Subject: [PATCH 04/32] Update the System intro demo

---
 .../system/index.js                           | 129 ++++++------------
 .../system/index.tsx                          | 110 ++++++---------
 .../system/index.tsx.preview                  |  12 ++
 .../tailwind/index.js                         |  14 --
 4 files changed, 96 insertions(+), 169 deletions(-)
 create mode 100644 docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx.preview

diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js
index 8a8fe6ee47..9027152a47 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js
@@ -1,40 +1,22 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { Switch, switchClasses } from '@mui/base/Switch';
+import { Switch as BaseSwitch } from '@mui/base/Switch';
 
 export default function UnstyledSwitchIntroduction() {
-  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
-
   return (
     <div>
-      <Switch
-        slots={{
-          root: Root,
-        }}
-        {...label}
-        defaultChecked
-      />
-      <Switch
-        slots={{
-          root: Root,
-        }}
-        {...label}
-      />
-      <Switch
-        slots={{
-          root: Root,
-        }}
-        {...label}
-        defaultChecked
-        disabled
-      />
-      <Switch
-        slots={{
-          root: Root,
-        }}
-        {...label}
-        disabled
-      />
+      <Switch aria-label="Basic switch, on by default" defaultChecked>
+        <Thumb />
+      </Switch>
+      <Switch aria-label="Basic switch, off by default">
+        <Thumb />
+      </Switch>
+      <Switch aria-label="Disabled switch, on by default" defaultChecked disabled>
+        <Thumb />
+      </Switch>
+      <Switch aria-label="Disabled switch, off by default" disabled>
+        <Thumb />
+      </Switch>
     </div>
   );
 }
@@ -57,55 +39,56 @@ const grey = {
   900: '#1C2025',
 };
 
-const Root = styled('span')(
+const Switch = styled(BaseSwitch)(
   ({ theme }) => `
-  box-sizing: border-box;
-  font-size: 0;
-  position: relative;
-  display: inline-block;
   width: 38px;
   height: 24px;
   margin: 10px;
-  cursor: pointer;
+  padding: 0;
+  box-sizing: border-box;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  border-radius: 24px;
+  display: inline-block;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 120ms;
+  box-shadow: inset 0px 1px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
+  };
 
-  &.${switchClasses.disabled} {
+  &[data-disabled] {
     opacity: 0.4;
     cursor: not-allowed;
   }
 
-  & .${switchClasses.track} {
-    box-sizing: border-box;
-    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-    border-radius: 24px;
-    display: block;
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 120ms;
-    box-shadow: inset 0px 1px 1px ${
-      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
-    };
-  }
-
-  &:hover .${switchClasses.track} {
+  &:hover:not([data-disabled]) {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
-  &.${switchClasses.focusVisible} .${switchClasses.track} {
+  &:focus-visible {
     box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
-  & .${switchClasses.thumb} {
+  &[data-state="checked"] {
+    border: none;
+    background: ${blue[500]};
+  }
+
+  &[data-state="checked"]:not([data-disabled]):hover {
+    background: ${blue[700]};
+  }
+  `,
+);
+
+const Thumb = styled(BaseSwitch.Thumb)(
+  ({ theme }) => `
     box-sizing: border-box;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     display: block;
     width: 16px;
     height: 16px;
-    top: 4px;
     left: 4px;
     border-radius: 16px;
     background-color: #FFF;
@@ -116,35 +99,11 @@ const Root = styled('span')(
     box-shadow: 0px 1px 2px ${
       theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
     };
-  }
 
-  &.${switchClasses.checked} {
-    .${switchClasses.thumb} {
+    &[data-state="checked"] {
       left: 18px;
       background-color: #fff;
       box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
     }
-
-    .${switchClasses.track} {
-      border: none;
-      background: ${blue[500]};
-    }
-  }
-
-  &:hover .${switchClasses.checked} .${switchClasses.track} {
-    background: ${blue[700]};
-  }
-
-  & .${switchClasses.input} {
-    cursor: inherit;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    z-index: 1;
-    margin: 0;
-  }
-  `,
+`,
 );
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx
index a79256e673..9027152a47 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx
@@ -1,28 +1,21 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { Switch } from '@mui/base/Switch';
+import { Switch as BaseSwitch } from '@mui/base/Switch';
 
 export default function UnstyledSwitchIntroduction() {
-  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
-
   return (
     <div>
-      <Switch render={(props) => <Root {...props} />} {...label} defaultChecked>
-        <Switch.Thumb />
+      <Switch aria-label="Basic switch, on by default" defaultChecked>
+        <Thumb />
       </Switch>
-      <Switch render={(props) => <Root {...props} />} {...label}>
-        <Switch.Thumb />
+      <Switch aria-label="Basic switch, off by default">
+        <Thumb />
       </Switch>
-      <Switch
-        render={(props) => <Root {...props} />}
-        {...label}
-        defaultChecked
-        disabled
-      >
-        <Switch.Thumb />
+      <Switch aria-label="Disabled switch, on by default" defaultChecked disabled>
+        <Thumb />
       </Switch>
-      <Switch render={(props) => <Root {...props} />} {...label} disabled>
-        <Switch.Thumb />
+      <Switch aria-label="Disabled switch, off by default" disabled>
+        <Thumb />
       </Switch>
     </div>
   );
@@ -46,55 +39,56 @@ const grey = {
   900: '#1C2025',
 };
 
-const Root = styled('span')(
+const Switch = styled(BaseSwitch)(
   ({ theme }) => `
-  box-sizing: border-box;
-  font-size: 0;
-  position: relative;
-  display: inline-block;
   width: 38px;
   height: 24px;
   margin: 10px;
-  cursor: pointer;
+  padding: 0;
+  box-sizing: border-box;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  border-radius: 24px;
+  display: inline-block;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 120ms;
+  box-shadow: inset 0px 1px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
+  };
 
-  &.${switchClasses.disabled} {
+  &[data-disabled] {
     opacity: 0.4;
     cursor: not-allowed;
   }
 
-  & .${switchClasses.track} {
-    box-sizing: border-box;
-    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-    border-radius: 24px;
-    display: block;
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 120ms;
-    box-shadow: inset 0px 1px 1px ${
-      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
-    };
-  }
-
-  &:hover .${switchClasses.track} {
+  &:hover:not([data-disabled]) {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
-  &.${switchClasses.focusVisible} .${switchClasses.track} {
+  &:focus-visible {
     box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
-  & .${switchClasses.thumb} {
+  &[data-state="checked"] {
+    border: none;
+    background: ${blue[500]};
+  }
+
+  &[data-state="checked"]:not([data-disabled]):hover {
+    background: ${blue[700]};
+  }
+  `,
+);
+
+const Thumb = styled(BaseSwitch.Thumb)(
+  ({ theme }) => `
     box-sizing: border-box;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     display: block;
     width: 16px;
     height: 16px;
-    top: 4px;
     left: 4px;
     border-radius: 16px;
     background-color: #FFF;
@@ -105,35 +99,11 @@ const Root = styled('span')(
     box-shadow: 0px 1px 2px ${
       theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
     };
-  }
 
-  &.${switchClasses.checked} {
-    .${switchClasses.thumb} {
+    &[data-state="checked"] {
       left: 18px;
       background-color: #fff;
       box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
     }
-
-    .${switchClasses.track} {
-      border: none;
-      background: ${blue[500]};
-    }
-  }
-
-  &:hover .${switchClasses.checked} .${switchClasses.track} {
-    background: ${blue[700]};
-  }
-
-  & .${switchClasses.input} {
-    cursor: inherit;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    z-index: 1;
-    margin: 0;
-  }
-  `,
+`,
 );
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx.preview b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx.preview
new file mode 100644
index 0000000000..cce4efcebc
--- /dev/null
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx.preview
@@ -0,0 +1,12 @@
+<Switch aria-label="Basic switch, on by default" defaultChecked>
+  <Thumb />
+</Switch>
+<Switch aria-label="Basic switch, off by default">
+  <Thumb />
+</Switch>
+<Switch aria-label="Disabled switch, on by default" defaultChecked disabled>
+  <Thumb />
+</Switch>
+<Switch aria-label="Disabled switch, off by default" disabled>
+  <Thumb />
+</Switch>
\ No newline at end of file
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.js
index d95a4482e6..11daa4490a 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.js
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { Switch as BaseSwitch } from '@mui/base/Switch';
 import { useTheme } from '@mui/system';
@@ -104,16 +103,3 @@ const Switch = React.forwardRef((props, ref) => {
     />
   );
 });
-
-Switch.propTypes = {
-  /**
-   * The props used for each slot inside the Switch.
-   * @default {}
-   */
-  slotProps: PropTypes.shape({
-    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
-};

From 8976d8a28955fd69a0b5cbedded86a8f4dcd099f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Thu, 29 Feb 2024 12:18:38 +0100
Subject: [PATCH 05/32] Update the CSS intro demo

---
 .../UnstyledSwitchIntroduction/css/index.js   | 129 +++++++-----------
 .../UnstyledSwitchIntroduction/css/index.tsx  | 129 +++++++-----------
 2 files changed, 100 insertions(+), 158 deletions(-)

diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js
index 897c7f8a19..01bf679f40 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js
@@ -1,48 +1,38 @@
 import * as React from 'react';
-import { Switch, switchClasses } from '@mui/base/Switch';
+import { Switch } from '@mui/base/Switch';
 import { useTheme } from '@mui/system';
 
 export default function UnstyledSwitchIntroduction() {
-  const label = { 'aria-label': 'Demo switch' };
-
   return (
     <div>
       <Switch
-        slotProps={{
-          root: { className: 'CustomSwitchIntroduction' },
-          input: { ...label, className: 'CustomSwitchIntroduction-input' },
-          thumb: { className: 'CustomSwitchIntroduction-thumb' },
-          track: { className: 'CustomSwitchIntroduction-track' },
-        }}
+        className="CustomSwitchIntroduction"
+        aria-label="Basic switch, on by default"
         defaultChecked
-      />
+      >
+        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+      </Switch>
       <Switch
-        slotProps={{
-          root: { className: 'CustomSwitchIntroduction' },
-          input: { ...label, className: 'CustomSwitchIntroduction-input' },
-          thumb: { className: 'CustomSwitchIntroduction-thumb' },
-          track: { className: 'CustomSwitchIntroduction-track' },
-        }}
-      />
+        className="CustomSwitchIntroduction"
+        aria-label="Basic switch, off by default"
+      >
+        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+      </Switch>
       <Switch
-        slotProps={{
-          root: { className: 'CustomSwitchIntroduction' },
-          input: { ...label, className: 'CustomSwitchIntroduction-input' },
-          thumb: { className: 'CustomSwitchIntroduction-thumb' },
-          track: { className: 'CustomSwitchIntroduction-track' },
-        }}
+        className="CustomSwitchIntroduction"
+        aria-label="Disabled switch, on by default"
         defaultChecked
         disabled
-      />
+      >
+        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+      </Switch>
       <Switch
-        slotProps={{
-          root: { className: 'CustomSwitchIntroduction' },
-          input: { ...label, className: 'CustomSwitchIntroduction-input' },
-          thumb: { className: 'CustomSwitchIntroduction-thumb' },
-          track: { className: 'CustomSwitchIntroduction-track' },
-        }}
+        className="CustomSwitchIntroduction"
+        aria-label="Disabled switch, off by default"
         disabled
-      />
+      >
+        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+      </Switch>
       <Styles />
     </div>
   );
@@ -87,39 +77,46 @@ function Styles() {
     <style>
       {`
       .CustomSwitchIntroduction {
-        box-sizing: border-box;
-        font-size: 0;
-        position: relative;
-        display: inline-block;
         width: 38px;
         height: 24px;
         margin: 10px;
-        cursor: pointer;
-      }
-
-      .CustomSwitchIntroduction.${switchClasses.disabled} {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-
-      .CustomSwitchIntroduction-track {
+        padding: 0;
         box-sizing: border-box;
         background: ${isDarkMode ? grey[900] : grey[50]};
         border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
         border-radius: 24px;
-        display: block;
-        height: 100%;
-        width: 100%;
-        position: absolute;
+        display: inline-block;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 120ms;
         box-shadow: inset 0px 1px 1px ${
           isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
         };
       }
 
-      .CustomSwitchIntroduction:hover .CustomSwitchIntroduction-track {
+      .CustomSwitchIntroduction[data-disabled] {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+
+      .CustomSwitchIntroduction:hover:not([data-disabled]) {
         background: ${isDarkMode ? grey[800] : grey[100]};
         border-color: ${isDarkMode ? grey[600] : grey[300]};
       }
+    
+      .CustomSwitchIntroduction:focus-visible {
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[700] : cyan[200]};
+      }
+    
+      .CustomSwitchIntroduction[data-state="checked"] {
+        border: none;
+        background: ${cyan[500]};
+      }
+    
+      .CustomSwitchIntroduction[data-state="checked"]:not([data-disabled]):hover {
+        background: ${cyan[700]};
+      }
+
 
       .CustomSwitchIntroduction-thumb {
         box-sizing: border-box;
@@ -127,7 +124,6 @@ function Styles() {
         display: block;
         width: 16px;
         height: 16px;
-        top: 4px;
         left: 4px;
         border-radius: 16px;
         background-color: #FFF;
@@ -135,41 +131,16 @@ function Styles() {
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 120ms;
+        box-shadow: 0px 1px 2px ${
+          isDarkMode ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
+        };
       }
 
-      .CustomSwitchIntroduction.${
-        switchClasses.focusVisible
-      } .CustomSwitchIntroduction-track {
-        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[400] : cyan[200]};
-      }
-
-      .CustomSwitchIntroduction.${
-        switchClasses.checked
-      } .CustomSwitchIntroduction-thumb {
+      .CustomSwitchIntroduction-thumb[data-state="checked"] {
         left: 18px;
         background-color: #fff;
         box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
       }
-
-      .CustomSwitchIntroduction.${
-        switchClasses.checked
-      } .CustomSwitchIntroduction-track {
-        border: none;
-        background: ${cyan[500]};
-      }
-
-      .CustomSwitchIntroduction-input {
-        cursor: inherit;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        opacity: 0;
-        z-index: 1;
-        margin: 0;
-      }
-
     `}
     </style>
   );
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx
index 897c7f8a19..01bf679f40 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx
@@ -1,48 +1,38 @@
 import * as React from 'react';
-import { Switch, switchClasses } from '@mui/base/Switch';
+import { Switch } from '@mui/base/Switch';
 import { useTheme } from '@mui/system';
 
 export default function UnstyledSwitchIntroduction() {
-  const label = { 'aria-label': 'Demo switch' };
-
   return (
     <div>
       <Switch
-        slotProps={{
-          root: { className: 'CustomSwitchIntroduction' },
-          input: { ...label, className: 'CustomSwitchIntroduction-input' },
-          thumb: { className: 'CustomSwitchIntroduction-thumb' },
-          track: { className: 'CustomSwitchIntroduction-track' },
-        }}
+        className="CustomSwitchIntroduction"
+        aria-label="Basic switch, on by default"
         defaultChecked
-      />
+      >
+        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+      </Switch>
       <Switch
-        slotProps={{
-          root: { className: 'CustomSwitchIntroduction' },
-          input: { ...label, className: 'CustomSwitchIntroduction-input' },
-          thumb: { className: 'CustomSwitchIntroduction-thumb' },
-          track: { className: 'CustomSwitchIntroduction-track' },
-        }}
-      />
+        className="CustomSwitchIntroduction"
+        aria-label="Basic switch, off by default"
+      >
+        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+      </Switch>
       <Switch
-        slotProps={{
-          root: { className: 'CustomSwitchIntroduction' },
-          input: { ...label, className: 'CustomSwitchIntroduction-input' },
-          thumb: { className: 'CustomSwitchIntroduction-thumb' },
-          track: { className: 'CustomSwitchIntroduction-track' },
-        }}
+        className="CustomSwitchIntroduction"
+        aria-label="Disabled switch, on by default"
         defaultChecked
         disabled
-      />
+      >
+        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+      </Switch>
       <Switch
-        slotProps={{
-          root: { className: 'CustomSwitchIntroduction' },
-          input: { ...label, className: 'CustomSwitchIntroduction-input' },
-          thumb: { className: 'CustomSwitchIntroduction-thumb' },
-          track: { className: 'CustomSwitchIntroduction-track' },
-        }}
+        className="CustomSwitchIntroduction"
+        aria-label="Disabled switch, off by default"
         disabled
-      />
+      >
+        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+      </Switch>
       <Styles />
     </div>
   );
@@ -87,39 +77,46 @@ function Styles() {
     <style>
       {`
       .CustomSwitchIntroduction {
-        box-sizing: border-box;
-        font-size: 0;
-        position: relative;
-        display: inline-block;
         width: 38px;
         height: 24px;
         margin: 10px;
-        cursor: pointer;
-      }
-
-      .CustomSwitchIntroduction.${switchClasses.disabled} {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-
-      .CustomSwitchIntroduction-track {
+        padding: 0;
         box-sizing: border-box;
         background: ${isDarkMode ? grey[900] : grey[50]};
         border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
         border-radius: 24px;
-        display: block;
-        height: 100%;
-        width: 100%;
-        position: absolute;
+        display: inline-block;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 120ms;
         box-shadow: inset 0px 1px 1px ${
           isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
         };
       }
 
-      .CustomSwitchIntroduction:hover .CustomSwitchIntroduction-track {
+      .CustomSwitchIntroduction[data-disabled] {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+
+      .CustomSwitchIntroduction:hover:not([data-disabled]) {
         background: ${isDarkMode ? grey[800] : grey[100]};
         border-color: ${isDarkMode ? grey[600] : grey[300]};
       }
+    
+      .CustomSwitchIntroduction:focus-visible {
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[700] : cyan[200]};
+      }
+    
+      .CustomSwitchIntroduction[data-state="checked"] {
+        border: none;
+        background: ${cyan[500]};
+      }
+    
+      .CustomSwitchIntroduction[data-state="checked"]:not([data-disabled]):hover {
+        background: ${cyan[700]};
+      }
+
 
       .CustomSwitchIntroduction-thumb {
         box-sizing: border-box;
@@ -127,7 +124,6 @@ function Styles() {
         display: block;
         width: 16px;
         height: 16px;
-        top: 4px;
         left: 4px;
         border-radius: 16px;
         background-color: #FFF;
@@ -135,41 +131,16 @@ function Styles() {
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 120ms;
+        box-shadow: 0px 1px 2px ${
+          isDarkMode ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
+        };
       }
 
-      .CustomSwitchIntroduction.${
-        switchClasses.focusVisible
-      } .CustomSwitchIntroduction-track {
-        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[400] : cyan[200]};
-      }
-
-      .CustomSwitchIntroduction.${
-        switchClasses.checked
-      } .CustomSwitchIntroduction-thumb {
+      .CustomSwitchIntroduction-thumb[data-state="checked"] {
         left: 18px;
         background-color: #fff;
         box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
       }
-
-      .CustomSwitchIntroduction.${
-        switchClasses.checked
-      } .CustomSwitchIntroduction-track {
-        border: none;
-        background: ${cyan[500]};
-      }
-
-      .CustomSwitchIntroduction-input {
-        cursor: inherit;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        opacity: 0;
-        z-index: 1;
-        margin: 0;
-      }
-
     `}
     </style>
   );

From 5cb76ee0102c5f66e654f86f5cf12c3a3b8fc463 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Thu, 29 Feb 2024 13:21:04 +0100
Subject: [PATCH 06/32] Update the Tailwind intro demo

---
 .../tailwind/index.js                         | 120 +++++------------
 .../tailwind/index.tsx                        | 127 ++++++------------
 .../tailwind/index.tsx.preview                |  16 ++-
 3 files changed, 91 insertions(+), 172 deletions(-)

diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.js
index 11daa4490a..b609a5a10a 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.js
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import clsx from 'clsx';
 import { Switch as BaseSwitch } from '@mui/base/Switch';
 import { useTheme } from '@mui/system';
 
@@ -9,97 +8,52 @@ function useIsDarkMode() {
 }
 
 export default function UnstyledSwitchIntroduction() {
-  const label = { 'aria-label': 'Demo switch' };
-
   // Replace this with your app logic for determining dark modes
   const isDarkMode = useIsDarkMode();
 
   return (
     <div className={isDarkMode ? 'dark' : ''}>
-      <Switch slotProps={{ input: { ...label } }} defaultChecked />
-      <Switch slotProps={{ input: { ...label } }} />
-      <Switch slotProps={{ input: { ...label } }} defaultChecked disabled />
-      <Switch slotProps={{ input: { ...label } }} disabled />
+      <Switch aria-label="Basic switch, on by default" defaultChecked>
+        <Thumb />
+      </Switch>
+      <Switch aria-label="Basic switch, off by default">
+        <Thumb />
+      </Switch>
+      <Switch aria-label="Disabled switch, on by default" defaultChecked disabled>
+        <Thumb />
+      </Switch>
+      <Switch aria-label="Disabled switch, off by default" disabled>
+        <Thumb />
+      </Switch>
     </div>
   );
 }
 
-const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn);
+const Switch = React.forwardRef(function Switch(
+  { className: classNameProp = '', ...props },
+  ref,
+) {
+  const className = ({ checked }) =>
+    `group relative inline-block w-[38px] h-[24px] m-2.5 p-0 transition rounded-full
+    border border-solid outline-none border-slate-300 dark:border-gray-700
+    focus-visible:shadow-outline-switch
+    cursor-pointer data-[disabled]:cursor-not-allowed data-[disabled]:opacity-40
+    ${checked ? 'bg-purple-500' : 'bg-slate-100 dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800'}
+    ${classNameProp}`;
 
-const Switch = React.forwardRef((props, ref) => {
-  return (
-    <BaseSwitch
-      ref={ref}
-      {...props}
-      slotProps={{
-        ...props.slotProps,
-        root: (ownerState) => {
-          const resolvedSlotProps = resolveSlotProps(
-            props.slotProps?.root,
-            ownerState,
-          );
-          return {
-            ...resolvedSlotProps,
-            className: clsx(
-              `group relative inline-block w-[38px] h-[24px] m-2.5 ${
-                ownerState.disabled
-                  ? 'cursor-not-allowed opacity-40'
-                  : 'cursor-pointer'
-              }`,
-              resolvedSlotProps?.className,
-            ),
-          };
-        },
-        input: (ownerState) => {
-          const resolvedSlotProps = resolveSlotProps(
-            props.slotProps?.input,
-            ownerState,
-          );
-          return {
-            ...resolvedSlotProps,
-            className: clsx(
-              'cursor-inherit absolute w-full h-full top-0 left-0 opacity-0 z-10 border-none',
-              resolvedSlotProps?.className,
-            ),
-          };
-        },
-        track: (ownerState) => {
-          const resolvedSlotProps = resolveSlotProps(
-            props.slotProps?.track,
-            ownerState,
-          );
+  return <BaseSwitch {...props} ref={ref} className={className} />;
+});
 
-          return {
-            ...resolvedSlotProps,
-            className: clsx(
-              `absolute block w-full h-full transition rounded-full border border-solid outline-none border-slate-300 dark:border-gray-700 group-[.base--focusVisible]:shadow-outline-switch
-              ${
-                ownerState.checked
-                  ? 'bg-purple-500'
-                  : 'bg-slate-100 dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800'
-              } `,
-              resolvedSlotProps?.className,
-            ),
-          };
-        },
-        thumb: (ownerState) => {
-          const resolvedSlotProps = resolveSlotProps(
-            props.slotProps?.thumb,
-            ownerState,
-          );
-          return {
-            ...resolvedSlotProps,
-            className: clsx(
-              `block w-4 h-4 top-1 rounded-2xl border border-solid outline-none border-slate-300 dark:border-gray-700 transition shadow-[0_1px_2px_rgb(0_0_0_/_0.1)] dark:shadow-[0_1px_2px_rgb(0_0_0_/_0.25)] ${
-                ownerState.checked
-                  ? 'left-[18px] bg-white shadow-[0_0_0_rgb(0_0_0_/_0.3)]'
-                  : 'left-[4px] bg-white'
-              }  relative transition-all`,
-              resolvedSlotProps?.className,
-            ),
-          };
-        },
-      }}
-    />
-  );
+const Thumb = React.forwardRef(function Thumb(
+  { className: classNameProp = '', ...props },
+  ref,
+) {
+  const className = ({ checked }) =>
+    `block w-4 h-4 rounded-2xl border border-solid outline-none border-slate-300 dark:border-gray-700 transition
+  shadow-[0_1px_2px_rgb(0_0_0_/_0.1)] dark:shadow-[0_1px_2px_rgb(0_0_0_/_0.25)]
+  relative transition-all
+  ${checked ? 'left-[18px] bg-white shadow-[0_0_0_rgb(0_0_0_/_0.3)]' : 'left-[4px] bg-white'}
+  ${classNameProp}`;
+
+  return <BaseSwitch.Thumb {...props} ref={ref} className={className} />;
 });
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx
index 2d06c4cb1e..79e8a1d5e4 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react';
-import clsx from 'clsx';
-import { Switch as BaseSwitch, SwitchProps } from '@mui/base/Switch';
+import {
+  Switch as BaseSwitch,
+  SwitchOwnerState,
+  SwitchProps,
+} from '@mui/base/Switch';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
@@ -9,98 +12,52 @@ function useIsDarkMode() {
 }
 
 export default function UnstyledSwitchIntroduction() {
-  const label = { 'aria-label': 'Demo switch' };
-
   // Replace this with your app logic for determining dark modes
   const isDarkMode = useIsDarkMode();
 
   return (
     <div className={isDarkMode ? 'dark' : ''}>
-      <Switch slotProps={{ input: { ...label } }} defaultChecked />
-      <Switch slotProps={{ input: { ...label } }} />
-      <Switch slotProps={{ input: { ...label } }} defaultChecked disabled />
-      <Switch slotProps={{ input: { ...label } }} disabled />
+      <Switch aria-label="Basic switch, on by default" defaultChecked>
+        <Thumb />
+      </Switch>
+      <Switch aria-label="Basic switch, off by default">
+        <Thumb />
+      </Switch>
+      <Switch aria-label="Disabled switch, on by default" defaultChecked disabled>
+        <Thumb />
+      </Switch>
+      <Switch aria-label="Disabled switch, off by default" disabled>
+        <Thumb />
+      </Switch>
     </div>
   );
 }
 
-const resolveSlotProps = (fn: any, args: any) =>
-  typeof fn === 'function' ? fn(args) : fn;
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(function Switch(
+  { className: classNameProp = '', ...props },
+  ref,
+) {
+  const className = ({ checked }: SwitchOwnerState) =>
+    `group relative inline-block w-[38px] h-[24px] m-2.5 p-0 transition rounded-full
+    border border-solid outline-none border-slate-300 dark:border-gray-700
+    focus-visible:shadow-outline-switch
+    cursor-pointer data-[disabled]:cursor-not-allowed data-[disabled]:opacity-40
+    ${checked ? 'bg-purple-500' : 'bg-slate-100 dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800'}
+    ${classNameProp}`;
 
-const Switch = React.forwardRef<HTMLSpanElement, SwitchProps>((props, ref) => {
-  return (
-    <BaseSwitch
-      ref={ref}
-      {...props}
-      slotProps={{
-        ...props.slotProps,
-        root: (ownerState) => {
-          const resolvedSlotProps = resolveSlotProps(
-            props.slotProps?.root,
-            ownerState,
-          );
-          return {
-            ...resolvedSlotProps,
-            className: clsx(
-              `group relative inline-block w-[38px] h-[24px] m-2.5 ${
-                ownerState.disabled
-                  ? 'cursor-not-allowed opacity-40'
-                  : 'cursor-pointer'
-              }`,
-              resolvedSlotProps?.className,
-            ),
-          };
-        },
-        input: (ownerState) => {
-          const resolvedSlotProps = resolveSlotProps(
-            props.slotProps?.input,
-            ownerState,
-          );
-          return {
-            ...resolvedSlotProps,
-            className: clsx(
-              'cursor-inherit absolute w-full h-full top-0 left-0 opacity-0 z-10 border-none',
-              resolvedSlotProps?.className,
-            ),
-          };
-        },
-        track: (ownerState) => {
-          const resolvedSlotProps = resolveSlotProps(
-            props.slotProps?.track,
-            ownerState,
-          );
+  return <BaseSwitch {...props} ref={ref} className={className} />;
+});
 
-          return {
-            ...resolvedSlotProps,
-            className: clsx(
-              `absolute block w-full h-full transition rounded-full border border-solid outline-none border-slate-300 dark:border-gray-700 group-[.base--focusVisible]:shadow-outline-switch
-              ${
-                ownerState.checked
-                  ? 'bg-purple-500'
-                  : 'bg-slate-100 dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800'
-              } `,
-              resolvedSlotProps?.className,
-            ),
-          };
-        },
-        thumb: (ownerState) => {
-          const resolvedSlotProps = resolveSlotProps(
-            props.slotProps?.thumb,
-            ownerState,
-          );
-          return {
-            ...resolvedSlotProps,
-            className: clsx(
-              `block w-4 h-4 top-1 rounded-2xl border border-solid outline-none border-slate-300 dark:border-gray-700 transition shadow-[0_1px_2px_rgb(0_0_0_/_0.1)] dark:shadow-[0_1px_2px_rgb(0_0_0_/_0.25)] ${
-                ownerState.checked
-                  ? 'left-[18px] bg-white shadow-[0_0_0_rgb(0_0_0_/_0.3)]'
-                  : 'left-[4px] bg-white'
-              }  relative transition-all`,
-              resolvedSlotProps?.className,
-            ),
-          };
-        },
-      }}
-    />
-  );
+const Thumb = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(function Thumb({ className: classNameProp = '', ...props }, ref) {
+  const className = ({ checked }: SwitchOwnerState) =>
+    `block w-4 h-4 rounded-2xl border border-solid outline-none border-slate-300 dark:border-gray-700 transition
+  shadow-[0_1px_2px_rgb(0_0_0_/_0.1)] dark:shadow-[0_1px_2px_rgb(0_0_0_/_0.25)]
+  relative transition-all
+  ${checked ? 'left-[18px] bg-white shadow-[0_0_0_rgb(0_0_0_/_0.3)]' : 'left-[4px] bg-white'}
+  ${classNameProp}`;
+
+  return <BaseSwitch.Thumb {...props} ref={ref} className={className} />;
 });
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx.preview
index 61dee4da9c..cce4efcebc 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx.preview
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx.preview
@@ -1,4 +1,12 @@
-<Switch slotProps={{ input: { ...label } }} defaultChecked />
-<Switch slotProps={{ input: { ...label } }} />
-<Switch slotProps={{ input: { ...label } }} defaultChecked disabled />
-<Switch slotProps={{ input: { ...label } }} disabled />
\ No newline at end of file
+<Switch aria-label="Basic switch, on by default" defaultChecked>
+  <Thumb />
+</Switch>
+<Switch aria-label="Basic switch, off by default">
+  <Thumb />
+</Switch>
+<Switch aria-label="Disabled switch, on by default" defaultChecked disabled>
+  <Thumb />
+</Switch>
+<Switch aria-label="Disabled switch, off by default" disabled>
+  <Thumb />
+</Switch>
\ No newline at end of file

From 4ac24bd657bb39cf3744c67527cbbf25b9ba254d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Thu, 29 Feb 2024 13:38:21 +0100
Subject: [PATCH 07/32] Proptypes, API docs

---
 docs/data/base/components/switch/switch.md    |  2 +-
 docs/pages/base-ui/api/switch.json            | 26 +++++--------------
 docs/pages/base-ui/api/use-switch.json        | 22 +++++-----------
 .../api-docs-base/switch/switch.json          |  9 +++----
 .../api-docs/use-switch/use-switch.json       |  4 ---
 packages/mui-base/src/Switch/Switch.tsx       | 14 +++++-----
 packages/mui-base/src/Switch/Switch.types.ts  |  8 ++++--
 7 files changed, 29 insertions(+), 56 deletions(-)

diff --git a/docs/data/base/components/switch/switch.md b/docs/data/base/components/switch/switch.md
index 395dbbcd8a..88a591078f 100644
--- a/docs/data/base/components/switch/switch.md
+++ b/docs/data/base/components/switch/switch.md
@@ -1,7 +1,7 @@
 ---
 productId: base-ui
 title: React Switch component and hook
-components: Switch
+components: Switch, SwitchThumb
 hooks: useSwitch
 githubLabel: 'component: switch'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/switch/
diff --git a/docs/pages/base-ui/api/switch.json b/docs/pages/base-ui/api/switch.json
index 6cfd84a18e..4eb24382b8 100644
--- a/docs/pages/base-ui/api/switch.json
+++ b/docs/pages/base-ui/api/switch.json
@@ -1,9 +1,9 @@
 {
   "props": {
     "checked": { "type": { "name": "bool" } },
-    "className": { "type": { "name": "string" } },
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
     "defaultChecked": { "type": { "name": "bool" } },
-    "disabled": { "type": { "name": "bool" } },
+    "disabled": { "type": { "name": "bool" }, "default": "false" },
     "onChange": {
       "type": { "name": "func" },
       "signature": {
@@ -11,30 +11,16 @@
         "describedArgs": ["event"]
       }
     },
-    "readOnly": { "type": { "name": "bool" } },
-    "required": { "type": { "name": "bool" } },
-    "slotProps": {
-      "type": {
-        "name": "shape",
-        "description": "{ input?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, thumb?: func<br>&#124;&nbsp;object, track?: func<br>&#124;&nbsp;object }"
-      },
-      "default": "{}"
-    },
-    "slots": {
-      "type": {
-        "name": "shape",
-        "description": "{ input?: elementType, root?: elementType, thumb?: elementType, track?: elementType<br>&#124;&nbsp;null }"
-      },
-      "default": "{}",
-      "additionalInfo": { "slotsApi": true }
-    }
+    "readOnly": { "type": { "name": "bool" }, "default": "false" },
+    "render": { "type": { "name": "func" } },
+    "required": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "Switch",
   "imports": ["import { Switch } from '@mui/base/Switch';", "import { Switch } from '@mui/base';"],
   "classes": [],
   "spread": true,
+  "themeDefaultProps": null,
   "muiName": "Switch",
-  "forwardsRefTo": "HTMLSpanElement",
   "filename": "/packages/mui-base/src/Switch/Switch.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/base-ui/react-switch/\">Switch</a></li></ul>",
diff --git a/docs/pages/base-ui/api/use-switch.json b/docs/pages/base-ui/api/use-switch.json
index 9b17cf6e33..2548fe22e8 100644
--- a/docs/pages/base-ui/api/use-switch.json
+++ b/docs/pages/base-ui/api/use-switch.json
@@ -3,39 +3,29 @@
     "checked": { "type": { "name": "boolean", "description": "boolean" } },
     "defaultChecked": { "type": { "name": "boolean", "description": "boolean" } },
     "disabled": { "type": { "name": "boolean", "description": "boolean" } },
-    "onBlur": {
-      "type": { "name": "React.FocusEventHandler", "description": "React.FocusEventHandler" }
-    },
     "onChange": {
       "type": {
         "name": "React.ChangeEventHandler&lt;HTMLInputElement&gt;",
         "description": "React.ChangeEventHandler&lt;HTMLInputElement&gt;"
       }
     },
-    "onFocus": {
-      "type": { "name": "React.FocusEventHandler", "description": "React.FocusEventHandler" }
-    },
-    "onFocusVisible": {
-      "type": { "name": "React.FocusEventHandler", "description": "React.FocusEventHandler" }
-    },
     "readOnly": { "type": { "name": "boolean", "description": "boolean" } },
     "required": { "type": { "name": "boolean", "description": "boolean" } }
   },
   "returnValue": {
     "checked": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "disabled": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
-    "focusVisible": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
-    "getInputProps": {
+    "getButtonProps": {
       "type": {
-        "name": "(externalProps?: React.HTMLAttributes&lt;HTMLInputElement&gt;) =&gt; UseSwitchInputSlotProps",
-        "description": "(externalProps?: React.HTMLAttributes&lt;HTMLInputElement&gt;) =&gt; UseSwitchInputSlotProps"
+        "name": "(externalProps?: React.HTMLAttributes&lt;HTMLButtonElement&gt;) =&gt; UseSwitchButtonSlotProps",
+        "description": "(externalProps?: React.HTMLAttributes&lt;HTMLButtonElement&gt;) =&gt; UseSwitchButtonSlotProps"
       },
       "required": true
     },
-    "inputRef": {
+    "getInputProps": {
       "type": {
-        "name": "React.RefCallback&lt;HTMLInputElement&gt; | null",
-        "description": "React.RefCallback&lt;HTMLInputElement&gt; | null"
+        "name": "(externalProps?: React.HTMLAttributes&lt;HTMLInputElement&gt;) =&gt; UseSwitchInputSlotProps",
+        "description": "(externalProps?: React.HTMLAttributes&lt;HTMLInputElement&gt;) =&gt; UseSwitchInputSlotProps"
       },
       "required": true
     },
diff --git a/docs/translations/api-docs-base/switch/switch.json b/docs/translations/api-docs-base/switch/switch.json
index b19b79dbe3..23d9e5c6e4 100644
--- a/docs/translations/api-docs-base/switch/switch.json
+++ b/docs/translations/api-docs-base/switch/switch.json
@@ -2,7 +2,9 @@
   "componentDescription": "The foundation for building custom-styled switches.",
   "propDescriptions": {
     "checked": { "description": "If <code>true</code>, the component is checked." },
-    "className": { "description": "Class name applied to the root element." },
+    "className": {
+      "description": "Class names applied to the element or a function that returns them based on the component&#39;s state."
+    },
     "defaultChecked": {
       "description": "The default checked state. Use when the component is not controlled."
     },
@@ -14,12 +16,9 @@
       }
     },
     "readOnly": { "description": "If <code>true</code>, the component is read only." },
+    "render": { "description": "A function to customize rendering of the component." },
     "required": {
       "description": "If <code>true</code>, the <code>input</code> element is required."
-    },
-    "slotProps": { "description": "The props used for each slot inside the Switch." },
-    "slots": {
-      "description": "The components used for each slot inside the Switch. Either a string to use a HTML element or a component."
     }
   },
   "classDescriptions": {}
diff --git a/docs/translations/api-docs/use-switch/use-switch.json b/docs/translations/api-docs/use-switch/use-switch.json
index 154723d781..676a07c47e 100644
--- a/docs/translations/api-docs/use-switch/use-switch.json
+++ b/docs/translations/api-docs/use-switch/use-switch.json
@@ -15,11 +15,7 @@
   "returnValueDescriptions": {
     "checked": { "description": "If <code>true</code>, the component will be checked." },
     "disabled": { "description": "If <code>true</code>, the component will be disabled." },
-    "focusVisible": {
-      "description": "If <code>true</code>, it indicates that the component is being focused using keyboard."
-    },
     "getInputProps": { "description": "Resolver for the input slot&#39;s props." },
-    "inputRef": { "description": "Ref to the input slot&#39;s DOM node." },
     "readOnly": { "description": "If <code>true</code>, the component will be read only." }
   }
 }
diff --git a/packages/mui-base/src/Switch/Switch.tsx b/packages/mui-base/src/Switch/Switch.tsx
index dc956876a5..8b34b38040 100644
--- a/packages/mui-base/src/Switch/Switch.tsx
+++ b/packages/mui-base/src/Switch/Switch.tsx
@@ -97,16 +97,14 @@ Switch.propTypes /* remove-proptypes */ = {
   defaultChecked: PropTypes.bool,
   /**
    * If `true`, the component is disabled.
+   *
+   * @default false
    */
   disabled: PropTypes.bool,
   /**
    * @ignore
    */
   id: PropTypes.string,
-  /**
-   * @ignore
-   */
-  onBlur: PropTypes.func,
   /**
    * Callback fired when the state is changed.
    *
@@ -115,12 +113,10 @@ Switch.propTypes /* remove-proptypes */ = {
    * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
   onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
   /**
    * If `true`, the component is read only.
+   *
+   * @default false
    */
   readOnly: PropTypes.bool,
   /**
@@ -129,6 +125,8 @@ Switch.propTypes /* remove-proptypes */ = {
   render: PropTypes.func,
   /**
    * If `true`, the `input` element is required.
+   *
+   * @default false
    */
   required: PropTypes.bool,
   /**
diff --git a/packages/mui-base/src/Switch/Switch.types.ts b/packages/mui-base/src/Switch/Switch.types.ts
index 603c07dc51..833b67a92f 100644
--- a/packages/mui-base/src/Switch/Switch.types.ts
+++ b/packages/mui-base/src/Switch/Switch.types.ts
@@ -36,9 +36,10 @@ export interface SwitchProps
   defaultChecked?: boolean;
   /**
    * If `true`, the component is disabled.
+   *
+   * @default false
    */
   disabled?: boolean;
-  onBlur?: React.FocusEventHandler;
   /**
    * Callback fired when the state is changed.
    *
@@ -47,13 +48,16 @@ export interface SwitchProps
    * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  onFocus?: React.FocusEventHandler;
   /**
    * If `true`, the component is read only.
+   *
+   * @default false
    */
   readOnly?: boolean;
   /**
    * If `true`, the `input` element is required.
+   *
+   * @default false
    */
   required?: boolean;
 }

From ffd137b5e832a08840d59ad9cd1877ff49250f45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Thu, 29 Feb 2024 13:46:11 +0100
Subject: [PATCH 08/32] Docs

---
 .../components/switch/UnstyledSwitches.js     | 136 ------------------
 .../components/switch/UnstyledSwitches.tsx    | 136 ------------------
 .../components/switch/UseSwitchesBasic.js     | 134 -----------------
 .../components/switch/UseSwitchesBasic.tsx    | 134 -----------------
 .../switch/UseSwitchesBasic.tsx.preview       |   4 -
 .../components/switch/UseSwitchesCustom.js    | 111 --------------
 .../components/switch/UseSwitchesCustom.tsx   | 111 --------------
 .../switch/UseSwitchesCustom.tsx.preview      |   1 -
 docs/data/base/components/switch/switch.md    |  57 ++------
 9 files changed, 10 insertions(+), 814 deletions(-)
 delete mode 100644 docs/data/base/components/switch/UnstyledSwitches.js
 delete mode 100644 docs/data/base/components/switch/UnstyledSwitches.tsx
 delete mode 100644 docs/data/base/components/switch/UseSwitchesBasic.js
 delete mode 100644 docs/data/base/components/switch/UseSwitchesBasic.tsx
 delete mode 100644 docs/data/base/components/switch/UseSwitchesBasic.tsx.preview
 delete mode 100644 docs/data/base/components/switch/UseSwitchesCustom.js
 delete mode 100644 docs/data/base/components/switch/UseSwitchesCustom.tsx
 delete mode 100644 docs/data/base/components/switch/UseSwitchesCustom.tsx.preview

diff --git a/docs/data/base/components/switch/UnstyledSwitches.js b/docs/data/base/components/switch/UnstyledSwitches.js
deleted file mode 100644
index 2123278194..0000000000
--- a/docs/data/base/components/switch/UnstyledSwitches.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/system';
-import { Switch, switchClasses } from '@mui/base/Switch';
-
-export default function UnstyledSwitches() {
-  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
-
-  return (
-    <div>
-      <Switch
-        slots={{
-          root: Root,
-        }}
-        {...label}
-        defaultChecked
-      />
-      <Switch
-        slots={{
-          root: Root,
-        }}
-        {...label}
-      />
-      <Switch
-        slots={{
-          root: Root,
-        }}
-        {...label}
-        defaultChecked
-        disabled
-      />
-      <Switch
-        slots={{
-          root: Root,
-        }}
-        {...label}
-        disabled
-      />
-    </div>
-  );
-}
-const blue = {
-  200: '#99CCF3',
-  500: '#007FFF',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const Root = styled('span')(
-  ({ theme }) => `
-  font-size: 0;
-  position: relative;
-  display: inline-block;
-  width: 38px;
-  height: 24px;
-  margin: 10px;
-  cursor: pointer;
-
-  &.${switchClasses.disabled} {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  & .${switchClasses.track} {
-    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-    border-radius: 24px;
-    display: block;
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    box-shadow: inset 0px 1px 1px ${
-      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
-    };
-  }
-
-  &:hover .${switchClasses.track} {
-    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
-  }
-
-  &.${switchClasses.focusVisible} .${switchClasses.track} {
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? grey[700] : blue[200]};
-  }
-
-  & .${switchClasses.thumb} {
-    display: block;
-    width: 16px;
-    height: 16px;
-    top: 4px;
-    left: 4px;
-    border-radius: 16px;
-    background-color: #FFF;
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    position: relative;
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 120ms;
-    box-shadow: 0px 1px 2px ${
-      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
-    };
-  }
-  
-  &.${switchClasses.checked} {
-    .${switchClasses.thumb} {
-      left: 17px;
-      background-color: #fff;
-    }
-
-    .${switchClasses.track} {
-      background: ${blue[500]};
-    }
-  }
-
-  & .${switchClasses.input} {
-    cursor: inherit;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    z-index: 1;
-    margin: 0;
-  }
-  `,
-);
diff --git a/docs/data/base/components/switch/UnstyledSwitches.tsx b/docs/data/base/components/switch/UnstyledSwitches.tsx
deleted file mode 100644
index 2123278194..0000000000
--- a/docs/data/base/components/switch/UnstyledSwitches.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/system';
-import { Switch, switchClasses } from '@mui/base/Switch';
-
-export default function UnstyledSwitches() {
-  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
-
-  return (
-    <div>
-      <Switch
-        slots={{
-          root: Root,
-        }}
-        {...label}
-        defaultChecked
-      />
-      <Switch
-        slots={{
-          root: Root,
-        }}
-        {...label}
-      />
-      <Switch
-        slots={{
-          root: Root,
-        }}
-        {...label}
-        defaultChecked
-        disabled
-      />
-      <Switch
-        slots={{
-          root: Root,
-        }}
-        {...label}
-        disabled
-      />
-    </div>
-  );
-}
-const blue = {
-  200: '#99CCF3',
-  500: '#007FFF',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const Root = styled('span')(
-  ({ theme }) => `
-  font-size: 0;
-  position: relative;
-  display: inline-block;
-  width: 38px;
-  height: 24px;
-  margin: 10px;
-  cursor: pointer;
-
-  &.${switchClasses.disabled} {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  & .${switchClasses.track} {
-    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-    border-radius: 24px;
-    display: block;
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    box-shadow: inset 0px 1px 1px ${
-      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
-    };
-  }
-
-  &:hover .${switchClasses.track} {
-    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
-  }
-
-  &.${switchClasses.focusVisible} .${switchClasses.track} {
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? grey[700] : blue[200]};
-  }
-
-  & .${switchClasses.thumb} {
-    display: block;
-    width: 16px;
-    height: 16px;
-    top: 4px;
-    left: 4px;
-    border-radius: 16px;
-    background-color: #FFF;
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    position: relative;
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 120ms;
-    box-shadow: 0px 1px 2px ${
-      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
-    };
-  }
-  
-  &.${switchClasses.checked} {
-    .${switchClasses.thumb} {
-      left: 17px;
-      background-color: #fff;
-    }
-
-    .${switchClasses.track} {
-      background: ${blue[500]};
-    }
-  }
-
-  & .${switchClasses.input} {
-    cursor: inherit;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    z-index: 1;
-    margin: 0;
-  }
-  `,
-);
diff --git a/docs/data/base/components/switch/UseSwitchesBasic.js b/docs/data/base/components/switch/UseSwitchesBasic.js
deleted file mode 100644
index 8a58979c51..0000000000
--- a/docs/data/base/components/switch/UseSwitchesBasic.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import { styled } from '@mui/system';
-import { useSwitch } from '@mui/base/useSwitch';
-
-export default function UseSwitchesBasic() {
-  return (
-    <div>
-      <BasicSwitch defaultChecked />
-      <BasicSwitch />
-      <BasicSwitch defaultChecked disabled />
-      <BasicSwitch disabled />
-    </div>
-  );
-}
-
-function BasicSwitch(props) {
-  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
-
-  const stateClasses = {
-    'Switch-checked': checked,
-    'Switch-disabled': disabled,
-    'Switch-focusVisible': focusVisible,
-  };
-
-  return (
-    <BasicSwitchRoot className={clsx(stateClasses)}>
-      <BasicSwitchThumb className={clsx(stateClasses)} />
-      <BasicSwitchInput {...getInputProps()} aria-label="Demo switch" />
-    </BasicSwitchRoot>
-  );
-}
-
-const blue = {
-  200: '#99CCF3',
-  500: '#007FFF',
-  700: '#0059B2',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const BasicSwitchRoot = styled('span')(
-  ({ theme }) => `
-  box-sizing: border-box;
-  font-size: 0;
-  position: relative;
-  display: inline-block;
-  width: 38px;
-  height: 24px;
-  margin: 10px;
-  cursor: pointer;
-  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  border-radius: 24px;
-  box-shadow: inset 0px 1px 1px ${
-    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
-  };
-
-  &:hover {
-    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
-  }
-    
-  &.Switch-focusVisible {
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
-  }
-
-  &.Switch-disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  &.Switch-checked {
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-    background: ${blue[500]};
-    box-shadow: inset 0px 1px 1px ${
-      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(0, 0, 0, 0.05)'
-    };
-    &.Switch-focusVisible {
-      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
-    }
-  }
-  
-  `,
-);
-
-const BasicSwitchInput = styled('input')`
-  box-sizing: border-box;
-  cursor: inherit;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  margin: 0;
-`;
-
-const BasicSwitchThumb = styled('span')(
-  ({ theme }) => `
-  box-sizing: border-box;
-  display: block;
-  width: 16px;
-  height: 16px;
-  top: 3px;
-  left: 2px;
-  border-radius: 16px;
-  background-color: #fff;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  position: relative;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 120ms;
-  box-shadow: 0px 1px 2px
-    ${theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'};
-
-  &.Switch-checked {
-    left: 17px;
-    background-color: #fff;
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  }
-`,
-);
diff --git a/docs/data/base/components/switch/UseSwitchesBasic.tsx b/docs/data/base/components/switch/UseSwitchesBasic.tsx
deleted file mode 100644
index a144720b42..0000000000
--- a/docs/data/base/components/switch/UseSwitchesBasic.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import { styled } from '@mui/system';
-import { useSwitch, UseSwitchParameters } from '@mui/base/useSwitch';
-
-export default function UseSwitchesBasic() {
-  return (
-    <div>
-      <BasicSwitch defaultChecked />
-      <BasicSwitch />
-      <BasicSwitch defaultChecked disabled />
-      <BasicSwitch disabled />
-    </div>
-  );
-}
-
-function BasicSwitch(props: UseSwitchParameters) {
-  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
-
-  const stateClasses = {
-    'Switch-checked': checked,
-    'Switch-disabled': disabled,
-    'Switch-focusVisible': focusVisible,
-  };
-
-  return (
-    <BasicSwitchRoot className={clsx(stateClasses)}>
-      <BasicSwitchThumb className={clsx(stateClasses)} />
-      <BasicSwitchInput {...getInputProps()} aria-label="Demo switch" />
-    </BasicSwitchRoot>
-  );
-}
-
-const blue = {
-  200: '#99CCF3',
-  500: '#007FFF',
-  700: '#0059B2',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const BasicSwitchRoot = styled('span')(
-  ({ theme }) => `
-  box-sizing: border-box;
-  font-size: 0;
-  position: relative;
-  display: inline-block;
-  width: 38px;
-  height: 24px;
-  margin: 10px;
-  cursor: pointer;
-  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  border-radius: 24px;
-  box-shadow: inset 0px 1px 1px ${
-    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
-  };
-
-  &:hover {
-    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
-  }
-    
-  &.Switch-focusVisible {
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
-  }
-
-  &.Switch-disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  &.Switch-checked {
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-    background: ${blue[500]};
-    box-shadow: inset 0px 1px 1px ${
-      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(0, 0, 0, 0.05)'
-    };
-    &.Switch-focusVisible {
-      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
-    }
-  }
-  
-  `,
-);
-
-const BasicSwitchInput = styled('input')`
-  box-sizing: border-box;
-  cursor: inherit;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  margin: 0;
-`;
-
-const BasicSwitchThumb = styled('span')(
-  ({ theme }) => `
-  box-sizing: border-box;
-  display: block;
-  width: 16px;
-  height: 16px;
-  top: 3px;
-  left: 2px;
-  border-radius: 16px;
-  background-color: #fff;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  position: relative;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 120ms;
-  box-shadow: 0px 1px 2px
-    ${theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'};
-
-  &.Switch-checked {
-    left: 17px;
-    background-color: #fff;
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  }
-`,
-);
diff --git a/docs/data/base/components/switch/UseSwitchesBasic.tsx.preview b/docs/data/base/components/switch/UseSwitchesBasic.tsx.preview
deleted file mode 100644
index 0bf0787ebe..0000000000
--- a/docs/data/base/components/switch/UseSwitchesBasic.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-<BasicSwitch defaultChecked />
-<BasicSwitch />
-<BasicSwitch defaultChecked disabled />
-<BasicSwitch disabled />
\ No newline at end of file
diff --git a/docs/data/base/components/switch/UseSwitchesCustom.js b/docs/data/base/components/switch/UseSwitchesCustom.js
deleted file mode 100644
index a7e9f9f785..0000000000
--- a/docs/data/base/components/switch/UseSwitchesCustom.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import { styled } from '@mui/system';
-import { useSwitch } from '@mui/base/useSwitch';
-
-export default function UseSwitchesCustom() {
-  return <MUISwitch defaultChecked />;
-}
-
-function MUISwitch(props) {
-  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
-
-  const stateClasses = {
-    checked,
-    disabled,
-    focusVisible,
-  };
-
-  return (
-    <SwitchRoot className={clsx(stateClasses)}>
-      <SwitchTrack>
-        <SwitchThumb className={clsx(stateClasses)} />
-      </SwitchTrack>
-      <SwitchInput {...getInputProps()} aria-label="Demo switch" />
-    </SwitchRoot>
-  );
-}
-
-const blue = {
-  700: '#0059B2',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const SwitchRoot = styled('span')`
-  display: inline-block;
-  position: relative;
-  width: 64px;
-  height: 36px;
-  padding: 8px;
-`;
-
-const SwitchInput = styled('input')`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  margin: 0;
-  cursor: pointer;
-`;
-
-const SwitchThumb = styled('span')`
-  position: absolute;
-  display: block;
-  background-color: ${blue[700]};
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
-  top: 3px;
-  left: 4px;
-  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
-
-  &::before {
-    display: block;
-    content: '';
-    width: 100%;
-    height: 100%;
-    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
-        '#fff',
-      )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')
-      center center no-repeat;
-  }
-
-  &.focusVisible {
-    background-color: #79b;
-  }
-
-  &.checked {
-    transform: translateX(24px);
-
-    &::before {
-      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
-        '#fff',
-      )}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>');
-    }
-  }
-`;
-
-const SwitchTrack = styled('span')(
-  ({ theme }) => `
-  background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[400]};
-  border-radius: 4px;
-  width: 100%;
-  height: 100%;
-  display: block;
-`,
-);
diff --git a/docs/data/base/components/switch/UseSwitchesCustom.tsx b/docs/data/base/components/switch/UseSwitchesCustom.tsx
deleted file mode 100644
index 8cc2d1b992..0000000000
--- a/docs/data/base/components/switch/UseSwitchesCustom.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import { styled } from '@mui/system';
-import { useSwitch, UseSwitchParameters } from '@mui/base/useSwitch';
-
-export default function UseSwitchesCustom() {
-  return <MUISwitch defaultChecked />;
-}
-
-function MUISwitch(props: UseSwitchParameters) {
-  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
-
-  const stateClasses = {
-    checked,
-    disabled,
-    focusVisible,
-  };
-
-  return (
-    <SwitchRoot className={clsx(stateClasses)}>
-      <SwitchTrack>
-        <SwitchThumb className={clsx(stateClasses)} />
-      </SwitchTrack>
-      <SwitchInput {...getInputProps()} aria-label="Demo switch" />
-    </SwitchRoot>
-  );
-}
-
-const blue = {
-  700: '#0059B2',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const SwitchRoot = styled('span')`
-  display: inline-block;
-  position: relative;
-  width: 64px;
-  height: 36px;
-  padding: 8px;
-`;
-
-const SwitchInput = styled('input')`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  margin: 0;
-  cursor: pointer;
-`;
-
-const SwitchThumb = styled('span')`
-  position: absolute;
-  display: block;
-  background-color: ${blue[700]};
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
-  top: 3px;
-  left: 4px;
-  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
-
-  &::before {
-    display: block;
-    content: '';
-    width: 100%;
-    height: 100%;
-    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
-        '#fff',
-      )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')
-      center center no-repeat;
-  }
-
-  &.focusVisible {
-    background-color: #79b;
-  }
-
-  &.checked {
-    transform: translateX(24px);
-
-    &::before {
-      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
-        '#fff',
-      )}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>');
-    }
-  }
-`;
-
-const SwitchTrack = styled('span')(
-  ({ theme }) => `
-  background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[400]};
-  border-radius: 4px;
-  width: 100%;
-  height: 100%;
-  display: block;
-`,
-);
diff --git a/docs/data/base/components/switch/UseSwitchesCustom.tsx.preview b/docs/data/base/components/switch/UseSwitchesCustom.tsx.preview
deleted file mode 100644
index 93aeb073bf..0000000000
--- a/docs/data/base/components/switch/UseSwitchesCustom.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-<MUISwitch defaultChecked />
\ No newline at end of file
diff --git a/docs/data/base/components/switch/switch.md b/docs/data/base/components/switch/switch.md
index 88a591078f..60ba5ddc0a 100644
--- a/docs/data/base/components/switch/switch.md
+++ b/docs/data/base/components/switch/switch.md
@@ -29,49 +29,22 @@ import { Switch } from '@mui/base/Switch';
 
 ### Anatomy
 
-The Switch component is composed of a root `<span>` that houses three interior slots—a track, a thumb, and an input:
-
-```html
-<span class="base-Switch-root">
-  <span class="base-Switch-track"></span>
-  <span class="base-Switch-thumb"></span>
-  <input type="checkbox" class="base-Switch-input" />
-</span>
-```
-
-### Custom structure
+The Switch component is composed of a root that houses one interior slot—a thumb:
 
-Use the `slots` prop to override the root or any other interior slot:
-
-```jsx
-<Switch slots={{ root: 'div', track: 'div' }} />
+```tsx
+<Switch>
+  <Switch.Thumb />
+</Switch>
 ```
 
-:::info
-The `slots` prop is available on all non-utility Base components.
-See [Overriding component structure](/base-ui/guides/overriding-component-structure/) for full details.
-:::
+### Custom structure
 
-Use the `slotProps` prop to pass custom props to internal slots.
-The following code snippet applies a CSS class called `my-thumb` to the thumb slot:
+Use the `render` prop to override the root or thumb component:
 
 ```jsx
-<Switch slotProps={{ thumb: { className: 'my-thumb' } }} />
-```
-
-### Usage with TypeScript
-
-In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component.
-This way, you can safely provide the custom root's props directly on the component:
-
-```tsx
-<Switch<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
-```
-
-The same applies for props specific to custom primitive elements:
-
-```tsx
-<Switch<'input'> slots={{ root: 'input' }} autoFocus={true} />
+<Switch render={(props) => (<MyFancySwitchRoot {...props} />)}>
+  <Switch.Thumb render={(props) => (<MyFancySwitchThumb {...props} />)} />
+</Switch>
 ```
 
 ## Hook
@@ -83,8 +56,6 @@ import { useSwitch } from '@mui/base/useSwitch';
 The `useSwitch` hook lets you apply the functionality of a Switch to a fully custom component.
 It returns props to be placed on the custom component, along with fields representing the component's internal state.
 
-Hooks _do not_ support [slot props](#custom-structure), but they do support [customization props](#customization).
-
 :::info
 Hooks give you the most room for customization, but require more work to implement.
 With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
@@ -92,14 +63,6 @@ With hooks, you can take full control over how your component is rendered, and d
 You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [HTML structure](#anatomy).
 :::
 
-### Basic example
-
-{{"demo": "UseSwitchesBasic.js"}}
-
-### Customized look and feel
-
-{{"demo": "UseSwitchesCustom.js"}}
-
 ## Accessibility
 
 To make the Switch component accessible, you should ensure that the corresponding labels reflect the Switch's current state.

From 79e7a4a7937b426751dcaf2d9944be459d6b8d34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Thu, 29 Feb 2024 15:01:13 +0100
Subject: [PATCH 09/32] Tests

---
 packages/mui-base/src/Switch/Switch.spec.tsx  |  98 ---------
 packages/mui-base/src/Switch/Switch.test.tsx  | 193 ++++++++++++++----
 .../mui-base/src/useSwitch/useSwitch.test.tsx | 120 -----------
 packages/mui-base/src/useSwitch/useSwitch.ts  |   6 +-
 .../src/utils/ClassNameConfigurator.test.tsx  |  63 ------
 5 files changed, 158 insertions(+), 322 deletions(-)
 delete mode 100644 packages/mui-base/src/Switch/Switch.spec.tsx
 delete mode 100644 packages/mui-base/src/useSwitch/useSwitch.test.tsx
 delete mode 100644 packages/mui-base/src/utils/ClassNameConfigurator.test.tsx

diff --git a/packages/mui-base/src/Switch/Switch.spec.tsx b/packages/mui-base/src/Switch/Switch.spec.tsx
deleted file mode 100644
index 90bc5f0ccc..0000000000
--- a/packages/mui-base/src/Switch/Switch.spec.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import * as React from 'react';
-import { expectType } from '@mui/types';
-import {
-  Switch,
-  SwitchRootSlotProps,
-  SwitchThumbSlotProps,
-  SwitchTrackSlotProps,
-  SwitchInputSlotProps,
-} from '@mui/base/Switch';
-
-const Root = React.forwardRef(function Root(
-  props: SwitchRootSlotProps,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const { ownerState, ...other } = props;
-  return <div data-checked={ownerState.checked} {...other} ref={ref} />;
-});
-
-const Input = React.forwardRef(function Input(
-  props: SwitchInputSlotProps,
-  ref: React.Ref<HTMLInputElement>,
-) {
-  const { ownerState, ...other } = props;
-  return <input data-checked={ownerState.checked} {...other} ref={ref} />;
-});
-
-const Thumb = React.forwardRef(function Thumb(
-  props: SwitchThumbSlotProps,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const { ownerState, ...other } = props;
-  return <div data-checked={ownerState.checked} {...other} ref={ref} />;
-});
-
-const Track = React.forwardRef(function Track(
-  props: SwitchTrackSlotProps,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const { ownerState, ...other } = props;
-  return <div data-checked={ownerState.checked} {...other} ref={ref} />;
-});
-
-const styledSwitch = <Switch slots={{ root: Root, thumb: Thumb, track: Track, input: Input }} />;
-
-const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
-    function CustomComponent() {
-      return <div />;
-    };
-
-  return (
-    <div>
-      {/* @ts-expect-error */}
-      <Switch invalidProp={0} />
-
-      <Switch<'a'>
-        slots={{
-          root: 'a',
-        }}
-        href="#"
-      />
-
-      <Switch<typeof CustomComponent>
-        slots={{
-          root: CustomComponent,
-        }}
-        stringProp="test"
-        numberProp={0}
-      />
-      {/* @ts-expect-error */}
-      <Switch<typeof CustomComponent>
-        slots={{
-          root: CustomComponent,
-        }}
-      />
-
-      <Switch<'button'>
-        slots={{
-          root: 'button',
-        }}
-        onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
-      />
-
-      <Switch<'button'>
-        slots={{
-          root: 'button',
-        }}
-        ref={(elem) => {
-          expectType<HTMLButtonElement | null, typeof elem>(elem);
-        }}
-        onMouseDown={(e) => {
-          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof e>(e);
-          e.currentTarget.checkValidity();
-        }}
-      />
-    </div>
-  );
-};
diff --git a/packages/mui-base/src/Switch/Switch.test.tsx b/packages/mui-base/src/Switch/Switch.test.tsx
index dafd37c0d7..475fcf1715 100644
--- a/packages/mui-base/src/Switch/Switch.test.tsx
+++ b/packages/mui-base/src/Switch/Switch.test.tsx
@@ -1,51 +1,168 @@
 import * as React from 'react';
-import { createMount, createRenderer } from '@mui/internal-test-utils';
 import { expect } from 'chai';
-import { Switch, SwitchOwnerState } from '@mui/base/Switch';
-import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
+import { createRenderer, act } from '@mui/internal-test-utils';
+import { Switch } from '@mui/base/Switch';
 
 describe('<Switch />', () => {
   const { render } = createRenderer();
 
-  describe('componentState', () => {
-    it('passes the ownerState prop to all the slots', () => {
-      interface CustomSlotProps {
-        ownerState: SwitchOwnerState;
-        children?: React.ReactNode;
-      }
+  // TODO: move to the conformance test suite
+
+  describe('prop: className', () => {
+    it('should apply the className when passed as a string', () => {
+      const { container } = render(<Switch className="test-class" />);
+      expect(container.firstElementChild?.className).to.contain('test-class');
+    });
+  });
 
-      const CustomSlot = React.forwardRef(
-        ({ ownerState: sp, children }: CustomSlotProps, ref: React.Ref<any>) => {
-          return (
-            <div
-              ref={ref}
-              data-checked={sp.checked}
-              data-disabled={sp.disabled}
-              data-readonly={sp.readOnly}
-              data-testid="custom"
-            >
-              {children}
-            </div>
-          );
-        },
+  describe('extra props', () => {
+    it('should spread extra props', () => {
+      const { container } = render(<Switch data-extra-prop="Lorem ipsum" />);
+      expect(container.firstElementChild as HTMLElement).to.have.attribute(
+        'data-extra-prop',
+        'Lorem ipsum',
       );
+    });
+
+    it('should not override the built-in attributes', () => {
+      const { container } = render(<Switch data-state="checked" role="checkbox" />);
+      expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'switch');
+    });
+  });
+
+  describe('prop: render', () => {
+    const Wrapper = React.forwardRef<HTMLButtonElement, { children?: React.ReactNode }>(
+      function Wrapper(props, forwardedRef) {
+        return (
+          <div data-testid="wrapper">
+            <button ref={forwardedRef} {...props} />
+          </div>
+        );
+      },
+    );
+
+    it('should render the custom component', () => {
+      const { container, getByTestId } = render(
+        <Switch render={(props) => <Wrapper {...props} />} data-testid="wrapped" />,
+      );
+
+      expect(container.firstElementChild).to.equal(getByTestId('wrapper'));
+    });
 
-      const slots = {
-        root: CustomSlot,
-        input: CustomSlot,
-        thumb: CustomSlot,
-      };
-
-      const { getAllByTestId } = render(<Switch defaultChecked disabled />);
-      const renderedComponents = getAllByTestId('custom');
-
-      expect(renderedComponents.length).to.equal(3);
-      for (let i = 0; i < renderedComponents.length; i += 1) {
-        expect(renderedComponents[i]).to.have.attribute('data-checked', 'true');
-        expect(renderedComponents[i]).to.have.attribute('data-disabled', 'true');
-        expect(renderedComponents[i]).to.have.attribute('data-readonly', 'false');
-        expect(renderedComponents[i]).to.have.attribute('data-focusvisible', 'false');
+    it('should pass the ref to the custom component', () => {
+      let instanceFromRef = null;
+
+      function Test() {
+        return (
+          <Switch
+            ref={(el) => {
+              instanceFromRef = el;
+            }}
+            render={(props) => <Wrapper {...props} />}
+            data-testid="wrapped"
+          />
+        );
       }
+
+      render(<Test />);
+      expect(instanceFromRef!.tagName).to.equal('BUTTON');
+      expect(instanceFromRef!).to.have.attribute('data-testid', 'wrapped');
+    });
+  });
+
+  it('should change its state when clicked', () => {
+    const { getByRole } = render(<Switch />);
+    const switchElement = getByRole('switch');
+
+    expect(switchElement).to.have.attribute('aria-checked', 'false');
+
+    act(() => {
+      switchElement.click();
+    });
+
+    expect(switchElement).to.have.attribute('aria-checked', 'true');
+  });
+
+  describe('prop: disabled', () => {
+    it('should have the `aria-disabled` attribute', () => {
+      const { getByRole } = render(<Switch disabled />);
+      expect(getByRole('switch')).to.have.attribute('aria-disabled', 'true');
+    });
+
+    it('should not have the aria attribute when `disabled` is not set', () => {
+      const { getByRole } = render(<Switch />);
+      expect(getByRole('switch')).not.to.have.attribute('aria-disabled');
     });
+
+    it('should not change its state when clicked', () => {
+      const { getByRole } = render(<Switch disabled />);
+      const switchElement = getByRole('switch');
+
+      expect(switchElement).to.have.attribute('aria-checked', 'false');
+
+      act(() => {
+        switchElement.click();
+      });
+
+      expect(switchElement).to.have.attribute('aria-checked', 'false');
+    });
+  });
+
+  describe('prop: readOnly', () => {
+    it('should have the `aria-readonly` attribute', () => {
+      const { getByRole } = render(<Switch readOnly />);
+      expect(getByRole('switch')).to.have.attribute('aria-readonly', 'true');
+    });
+
+    it('should not have the aria attribute when `readOnly` is not set', () => {
+      const { getByRole } = render(<Switch />);
+      expect(getByRole('switch')).not.to.have.attribute('aria-readonly');
+    });
+
+    it('should not change its state when clicked', () => {
+      const { getByRole } = render(<Switch readOnly />);
+      const switchElement = getByRole('switch');
+
+      expect(switchElement).to.have.attribute('aria-checked', 'false');
+
+      act(() => {
+        switchElement.click();
+      });
+
+      expect(switchElement).to.have.attribute('aria-checked', 'false');
+    });
+  });
+
+  it('should update its state if the underlying input is toggled', () => {
+    const { getByRole, container } = render(<Switch />);
+    const switchElement = getByRole('switch');
+    const internalInput = container.querySelector('input[type="checkbox"]')! as HTMLInputElement;
+
+    act(() => {
+      internalInput.click();
+    });
+
+    expect(switchElement).to.have.attribute('aria-checked', 'true');
+  });
+
+  it('should place the style hooks on the root and the thumb', () => {
+    const { getByRole } = render(
+      <Switch defaultChecked disabled readOnly required>
+        <Switch.Thumb />
+      </Switch>,
+    );
+
+    const switchElement = getByRole('switch');
+    const thumb = switchElement.querySelector('span');
+
+    expect(switchElement).to.have.attribute('data-state', 'checked');
+    expect(switchElement).to.have.attribute('data-disabled', 'true');
+    expect(switchElement).to.have.attribute('data-readonly', 'true');
+    expect(switchElement).to.have.attribute('data-required', 'true');
+
+    expect(thumb).to.have.attribute('data-state', 'checked');
+    expect(thumb).to.have.attribute('data-disabled', 'true');
+    expect(thumb).to.have.attribute('data-readonly', 'true');
+    expect(thumb).to.have.attribute('data-required', 'true');
   });
 });
diff --git a/packages/mui-base/src/useSwitch/useSwitch.test.tsx b/packages/mui-base/src/useSwitch/useSwitch.test.tsx
deleted file mode 100644
index 1a9bb0853a..0000000000
--- a/packages/mui-base/src/useSwitch/useSwitch.test.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { expect } from 'chai';
-import * as React from 'react';
-import { spy } from 'sinon';
-import {
-  act,
-  createRenderer,
-  focusVisible,
-  programmaticFocusTriggersFocusVisible,
-  screen,
-  simulatePointerDevice,
-} from '@mui/internal-test-utils';
-import { useSwitch, UseSwitchParameters } from '@mui/base/useSwitch';
-
-describe('useSwitch', () => {
-  const { render } = createRenderer();
-  const invokeUseSwitch = (props: UseSwitchParameters) => {
-    const ref = React.createRef<ReturnType<typeof useSwitch>>();
-    function TestComponent() {
-      const switchDefinition = useSwitch(props);
-      React.useImperativeHandle(ref, () => switchDefinition, [switchDefinition]);
-      return null;
-    }
-
-    render(<TestComponent />);
-
-    return ref.current!;
-  };
-
-  describe('getInputProps', () => {
-    it('should include the incoming uncontrolled props in the output', () => {
-      const props: UseSwitchParameters = {
-        defaultChecked: true,
-        disabled: true,
-        readOnly: true,
-        required: true,
-      };
-
-      const { getInputProps } = invokeUseSwitch(props);
-      const inputProps = getInputProps();
-
-      expect(inputProps.defaultChecked).to.equal(true);
-      expect(inputProps.disabled).to.equal(true);
-      expect(inputProps.readOnly).to.equal(true);
-      expect(inputProps.required).to.equal(true);
-    });
-
-    it('should include the incoming controlled prop in the output', () => {
-      const props = {
-        checked: true,
-      };
-
-      const { getInputProps } = invokeUseSwitch(props);
-      const inputProps = getInputProps();
-
-      expect(inputProps!.checked).to.equal(true);
-    });
-
-    it('should call onChange if a change event is fired', () => {
-      const handleChange = spy();
-      function Switch() {
-        const { getInputProps } = useSwitch({ onChange: handleChange });
-
-        return <input {...getInputProps()} />;
-      }
-      render(<Switch />);
-
-      act(() => {
-        screen.getByRole('switch').click();
-      });
-
-      expect(handleChange.callCount).to.equal(1);
-    });
-
-    it('should call focus event handlers if focus events are fired', () => {
-      const handleBlur = spy();
-      const handleFocus = spy();
-      const handleFocusVisible = spy();
-      function Switch() {
-        const { getInputProps } = useSwitch({
-          onBlur: handleBlur,
-          onFocus: handleFocus,
-          onFocusVisible: handleFocusVisible,
-        });
-
-        return <input {...getInputProps()} />;
-      }
-      render(<Switch />);
-      const switchElement = screen.getByRole('switch');
-
-      simulatePointerDevice();
-      act(() => {
-        switchElement.focus();
-      });
-
-      expect(handleBlur.callCount).to.equal(0);
-      expect(handleFocus.callCount).to.equal(1);
-      expect(handleFocusVisible.callCount).to.equal(
-        programmaticFocusTriggersFocusVisible() ? 1 : 0,
-      );
-
-      act(() => {
-        switchElement.blur();
-      });
-
-      expect(handleBlur.callCount).to.equal(1);
-      expect(handleFocus.callCount).to.equal(1);
-      expect(handleFocusVisible.callCount).to.equal(
-        programmaticFocusTriggersFocusVisible() ? 1 : 0,
-      );
-
-      focusVisible(switchElement);
-
-      expect(handleBlur.callCount).to.equal(1);
-      expect(handleFocus.callCount).to.equal(2);
-      expect(handleFocusVisible.callCount).to.equal(
-        programmaticFocusTriggersFocusVisible() ? 2 : 1,
-      );
-    });
-  });
-});
diff --git a/packages/mui-base/src/useSwitch/useSwitch.ts b/packages/mui-base/src/useSwitch/useSwitch.ts
index de93e76da7..dc0b23db86 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.ts
@@ -41,7 +41,7 @@ export function useSwitch(props: UseSwitchParameters): UseSwitchReturnValue {
     (otherProps: React.ButtonHTMLAttributes<HTMLButtonElement>) =>
     (event: React.MouseEvent<HTMLButtonElement>) => {
       otherProps.onClick?.(event);
-      if (disabled) {
+      if (disabled || readOnly) {
         return;
       }
 
@@ -49,12 +49,12 @@ export function useSwitch(props: UseSwitchParameters): UseSwitchReturnValue {
     };
 
   const getButtonProps: UseSwitchReturnValue['getButtonProps'] = (otherProps = {}) => ({
+    ...otherProps,
+    type: 'button',
     role: 'switch',
     'aria-checked': checked,
     'aria-disabled': disabled,
     'aria-readonly': readOnly,
-    type: 'button',
-    ...otherProps,
     onClick: createHandleClick(otherProps),
   });
 
diff --git a/packages/mui-base/src/utils/ClassNameConfigurator.test.tsx b/packages/mui-base/src/utils/ClassNameConfigurator.test.tsx
deleted file mode 100644
index 8500ad8f08..0000000000
--- a/packages/mui-base/src/utils/ClassNameConfigurator.test.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as React from 'react';
-import { createRenderer } from '@mui/internal-test-utils';
-import { expect } from 'chai';
-import { Switch, switchClasses } from '@mui/base/Switch';
-import { ClassNameConfigurator } from '@mui/base/utils/ClassNameConfigurator';
-
-describe('ClassNameConfigurator', () => {
-  const { render } = createRenderer();
-
-  it('should apply default classes when not configured', () => {
-    const { container } = render(<Switch defaultChecked disabled />);
-
-    const switchComponent = container.firstChild!;
-
-    expect(switchComponent).to.have.class(switchClasses.root);
-    expect(switchComponent).to.have.class(switchClasses.checked);
-    expect(switchComponent).to.have.class(switchClasses.disabled);
-
-    expect(switchComponent.childNodes[0]).to.have.class(switchClasses.track);
-    expect(switchComponent.childNodes[1]).to.have.class(switchClasses.thumb);
-    expect(switchComponent.childNodes[2]).to.have.class(switchClasses.input);
-  });
-
-  it('should not generate any classes when configured as such', () => {
-    const { container } = render(
-      <ClassNameConfigurator disableDefaultClasses>
-        <Switch defaultChecked disabled />
-      </ClassNameConfigurator>,
-    );
-
-    const switchComponent = container.firstChild!;
-
-    expect(switchComponent).not.to.have.class(switchClasses.root);
-    expect(switchComponent).not.to.have.class(switchClasses.checked);
-    expect(switchComponent).not.to.have.class(switchClasses.disabled);
-
-    expect(switchComponent.childNodes[0]).not.to.have.class(switchClasses.track);
-    expect(switchComponent.childNodes[1]).not.to.have.class(switchClasses.thumb);
-    expect(switchComponent.childNodes[2]).not.to.have.class(switchClasses.input);
-  });
-
-  it('should not remove custom classes when disableDefaultClasses is set', () => {
-    const { container } = render(
-      <ClassNameConfigurator disableDefaultClasses>
-        <Switch
-          className="custom-switch"
-          slotProps={{
-            track: { className: 'custom-track' },
-            thumb: { className: 'custom-thumb' },
-            input: { className: 'custom-input' },
-          }}
-        />
-      </ClassNameConfigurator>,
-    );
-
-    const switchComponent = container.firstChild!;
-
-    expect(switchComponent).to.have.class('custom-switch');
-    expect(switchComponent.childNodes[0]).to.have.class('custom-track');
-    expect(switchComponent.childNodes[1]).to.have.class('custom-thumb');
-    expect(switchComponent.childNodes[2]).to.have.class('custom-input');
-  });
-});

From 99582244eca060d2e131653bffc4878128349245 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Fri, 1 Mar 2024 08:47:34 +0100
Subject: [PATCH 10/32] Tests and fixes

---
 packages/mui-base/src/Switch/Switch.test.tsx  | 132 ++++++++++++++++++
 packages/mui-base/src/Switch/Switch.tsx       |   1 +
 packages/mui-base/src/useSwitch/useSwitch.ts  |  28 +++-
 .../mui-base/src/useSwitch/useSwitch.types.ts |  24 +++-
 packages/mui-base/src/utils/useForkRef.ts     |   1 +
 5 files changed, 173 insertions(+), 13 deletions(-)
 create mode 100644 packages/mui-base/src/utils/useForkRef.ts

diff --git a/packages/mui-base/src/Switch/Switch.test.tsx b/packages/mui-base/src/Switch/Switch.test.tsx
index 475fcf1715..95eb28a365 100644
--- a/packages/mui-base/src/Switch/Switch.test.tsx
+++ b/packages/mui-base/src/Switch/Switch.test.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
+import { spy } from 'sinon';
 import { createRenderer, act } from '@mui/internal-test-utils';
 import { Switch } from '@mui/base/Switch';
 
@@ -83,6 +84,49 @@ describe('<Switch />', () => {
     expect(switchElement).to.have.attribute('aria-checked', 'true');
   });
 
+  it('should update its state when changed from outside', () => {
+    function Test() {
+      const [checked, setChecked] = React.useState(false);
+      return (
+        <div>
+          <button onClick={() => setChecked((c) => !c)}>Toggle</button>
+          <Switch checked={checked} />;
+        </div>
+      );
+    }
+
+    const { getByRole, getByText } = render(<Test />);
+    const switchElement = getByRole('switch');
+    const button = getByText('Toggle');
+
+    expect(switchElement).to.have.attribute('aria-checked', 'false');
+    act(() => {
+      button.click();
+    });
+
+    expect(switchElement).to.have.attribute('aria-checked', 'true');
+
+    act(() => {
+      button.click();
+    });
+
+    expect(switchElement).to.have.attribute('aria-checked', 'false');
+  });
+
+  it('should call onChange when clicked', () => {
+    const handleChange = spy();
+    const { getByRole, container } = render(<Switch onChange={handleChange} />);
+    const switchElement = getByRole('switch');
+    const internalInput = container.querySelector('input[type="checkbox"]')!;
+
+    act(() => {
+      switchElement.click();
+    });
+
+    expect(handleChange.callCount).to.equal(1);
+    expect(handleChange.firstCall.args[0].target).to.equal(internalInput);
+  });
+
   describe('prop: disabled', () => {
     it('should have the `aria-disabled` attribute', () => {
       const { getByRole } = render(<Switch disabled />);
@@ -165,4 +209,92 @@ describe('<Switch />', () => {
     expect(thumb).to.have.attribute('data-readonly', 'true');
     expect(thumb).to.have.attribute('data-required', 'true');
   });
+
+  it('should set the name attribute on the input', () => {
+    const { container } = render(<Switch name="switch-name" />);
+    const internalInput = container.querySelector('input[type="checkbox"]')! as HTMLInputElement;
+
+    expect(internalInput).to.have.attribute('name', 'switch-name');
+  });
+
+  describe('form handling', () => {
+    it('should toggle the switch when a parent label is clicked', () => {
+      const { getByTestId, getByRole } = render(
+        <label data-testid="label">
+          <Switch />
+          Toggle
+        </label>,
+      );
+
+      const switchElement = getByRole('switch');
+      const label = getByTestId('label');
+
+      expect(switchElement).to.have.attribute('aria-checked', 'false');
+
+      act(() => {
+        label.click();
+      });
+
+      expect(switchElement).to.have.attribute('aria-checked', 'true');
+    });
+
+    it('should toggle the switch when a linked label is clicked', () => {
+      const { getByTestId, getByRole } = render(
+        <div>
+          <label htmlFor="test-switch" data-testid="label">
+            Toggle
+          </label>
+          <Switch id="test-switch" />
+        </div>,
+      );
+
+      const switchElement = getByRole('switch');
+      const label = getByTestId('label');
+
+      expect(switchElement).to.have.attribute('aria-checked', 'false');
+
+      act(() => {
+        label.click();
+      });
+
+      expect(switchElement).to.have.attribute('aria-checked', 'true');
+    });
+  });
+
+  it('should include the switch value in the form submission', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      // FormData is not available in JSDOM
+      this.skip();
+    }
+
+    let stringifiedFormData = '';
+
+    const { getByRole } = render(
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          const formData = new FormData(event.currentTarget);
+          stringifiedFormData = new URLSearchParams(formData as any).toString();
+        }}
+      >
+        <Switch name="test-switch" />
+        <button type="submit">Submit</button>
+      </form>,
+    );
+
+    const switchElement = getByRole('switch');
+    const submitButton = getByRole('button')!;
+
+    submitButton.click();
+
+    expect(stringifiedFormData).to.equal('test-switch=off');
+
+    act(() => {
+      switchElement.click();
+    });
+
+    submitButton.click();
+
+    expect(stringifiedFormData).to.equal('test-switch=on');
+  });
 });
diff --git a/packages/mui-base/src/Switch/Switch.tsx b/packages/mui-base/src/Switch/Switch.tsx
index 8b34b38040..f798cbdb87 100644
--- a/packages/mui-base/src/Switch/Switch.tsx
+++ b/packages/mui-base/src/Switch/Switch.tsx
@@ -69,6 +69,7 @@ const Switch = React.forwardRef(function Switch(
   return (
     <SwitchContext.Provider value={ownerState}>
       {render(getButtonProps(buttonProps), ownerState)}
+      {!checked && <input type="hidden" name={props.name} value="off" />}
       <input {...getInputProps()} />
     </SwitchContext.Provider>
   );
diff --git a/packages/mui-base/src/useSwitch/useSwitch.ts b/packages/mui-base/src/useSwitch/useSwitch.ts
index dc0b23db86..94316137e5 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.ts
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { useControlled } from '../utils/useControlled';
 import { UseSwitchParameters, UseSwitchReturnValue } from './useSwitch.types';
+import { useForkRef } from '../utils/useForkRef';
 
 /**
  * The basic building block for creating custom switches.
@@ -14,8 +15,20 @@ import { UseSwitchParameters, UseSwitchReturnValue } from './useSwitch.types';
  *
  * - [useSwitch API](https://mui.com/base-ui/react-switch/hooks-api/#use-switch)
  */
-export function useSwitch(props: UseSwitchParameters): UseSwitchReturnValue {
-  const { checked: checkedProp, defaultChecked, disabled, onChange, readOnly, required } = props;
+export function useSwitch(params: UseSwitchParameters): UseSwitchReturnValue {
+  const {
+    checked: checkedProp,
+    defaultChecked,
+    disabled,
+    name,
+    onChange,
+    readOnly,
+    required,
+    inputRef: externalInputRef,
+  } = params;
+
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+  const handleInputRef = useForkRef(inputRef, externalInputRef);
 
   const [checked, setCheckedState] = useControlled({
     controlled: checkedProp,
@@ -41,11 +54,11 @@ export function useSwitch(props: UseSwitchParameters): UseSwitchReturnValue {
     (otherProps: React.ButtonHTMLAttributes<HTMLButtonElement>) =>
     (event: React.MouseEvent<HTMLButtonElement>) => {
       otherProps.onClick?.(event);
-      if (disabled || readOnly) {
+      if (event.defaultPrevented || readOnly) {
         return;
       }
 
-      setCheckedState((prevChecked) => !prevChecked);
+      inputRef.current?.click();
     };
 
   const getButtonProps: UseSwitchReturnValue['getButtonProps'] = (otherProps = {}) => ({
@@ -61,13 +74,14 @@ export function useSwitch(props: UseSwitchParameters): UseSwitchReturnValue {
   const getInputProps: UseSwitchReturnValue['getInputProps'] = (otherProps = {}) => ({
     checked,
     disabled,
-    readOnly,
+    name,
     required,
+    style: { opacity: 0, width: 0, height: 0, margin: 0, padding: 0, overflow: 'hidden' },
+    tabIndex: -1,
     type: 'checkbox',
     'aria-hidden': true,
-    tabIndex: -1,
-    style: { opacity: 0, width: 0, height: 0, margin: 0, padding: 0, overflow: 'hidden' },
     ...otherProps,
+    ref: handleInputRef,
     onChange: createHandleInputChange(otherProps),
   });
 
diff --git a/packages/mui-base/src/useSwitch/useSwitch.types.ts b/packages/mui-base/src/useSwitch/useSwitch.types.ts
index d36cbcec2b..0cf27ae9e3 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.types.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.types.ts
@@ -13,6 +13,14 @@ export interface UseSwitchParameters {
    * If `true`, the component is disabled.
    */
   disabled?: boolean;
+  /**
+   * Ref to the underlying input element.
+   */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /**
+   * Name of the underlying input element.
+   */
+  name?: string;
   /**
    * Callback fired when the state is changed.
    *
@@ -32,13 +40,15 @@ export interface UseSwitchParameters {
 }
 
 interface UseSwitchInputSlotOwnProps {
-  checked?: boolean;
-  defaultChecked?: boolean;
+  checked: boolean;
   disabled?: boolean;
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
-  readOnly?: boolean;
+  name?: string;
   required?: boolean;
-  type: React.HTMLInputTypeAttribute;
+  style: React.CSSProperties;
+  type: 'checkbox';
+  'aria-hidden': React.AriaAttributes['aria-hidden'];
+  ref: React.RefCallback<HTMLInputElement> | null;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
 }
 
 export type UseSwitchInputSlotProps<TOther = {}> = Omit<TOther, keyof UseSwitchInputSlotOwnProps> &
@@ -46,9 +56,11 @@ export type UseSwitchInputSlotProps<TOther = {}> = Omit<TOther, keyof UseSwitchI
 
 interface UseSwitchButtonSlotOwnProps {
   onClick: React.MouseEventHandler<HTMLButtonElement>;
-  role: React.AriaRole;
+  type: 'button';
+  role: 'switch';
   'aria-disabled': React.AriaAttributes['aria-disabled'];
   'aria-checked': React.AriaAttributes['aria-checked'];
+  'aria-readonly': React.AriaAttributes['aria-readonly'];
 }
 
 export type UseSwitchButtonSlotProps<TOther = {}> = Omit<
diff --git a/packages/mui-base/src/utils/useForkRef.ts b/packages/mui-base/src/utils/useForkRef.ts
new file mode 100644
index 0000000000..ef39f7f3dd
--- /dev/null
+++ b/packages/mui-base/src/utils/useForkRef.ts
@@ -0,0 +1 @@
+export { default as useForkRef } from '@mui/utils/useForkRef';

From 54805b544e7666418d5df4342c326443cfa72cf3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Fri, 1 Mar 2024 09:26:09 +0100
Subject: [PATCH 11/32] Do not render hidden input if name isn't provided

---
 packages/mui-base/src/Switch/Switch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-base/src/Switch/Switch.tsx b/packages/mui-base/src/Switch/Switch.tsx
index f798cbdb87..a2313f8b0b 100644
--- a/packages/mui-base/src/Switch/Switch.tsx
+++ b/packages/mui-base/src/Switch/Switch.tsx
@@ -69,7 +69,7 @@ const Switch = React.forwardRef(function Switch(
   return (
     <SwitchContext.Provider value={ownerState}>
       {render(getButtonProps(buttonProps), ownerState)}
-      {!checked && <input type="hidden" name={props.name} value="off" />}
+      {!checked && props.name && <input type="hidden" name={props.name} value="off" />}
       <input {...getInputProps()} />
     </SwitchContext.Provider>
   );

From bd8d651e7497b09160ba7066ba5e59371bda83f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Fri, 1 Mar 2024 09:31:48 +0100
Subject: [PATCH 12/32] Update the landing page theme preview

---
 .../productBaseUI/BaseUIThemesDemo.tsx        | 104 +-----------------
 .../productBaseUI/themed-controls/Switch.tsx  |  70 ++++++++++++
 2 files changed, 75 insertions(+), 99 deletions(-)
 create mode 100644 docs/src/components/productBaseUI/themed-controls/Switch.tsx

diff --git a/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx b/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
index 22214da933..2d3a02153d 100644
--- a/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
+++ b/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
@@ -14,7 +14,6 @@ import { Select } from '@mui/base/Select';
 import { Slider, sliderClasses } from '@mui/base/Slider';
 import { Snackbar } from '@mui/base/Snackbar';
 import { SnackbarCloseReason } from '@mui/base/useSnackbar';
-import { Switch, switchClasses } from '@mui/base/Switch';
 import { Tab } from '@mui/base/Tab';
 import { Tabs } from '@mui/base/Tabs';
 import { TabsList } from '@mui/base/TabsList';
@@ -45,6 +44,9 @@ import ROUTES from 'docs/src/route';
 import { Link } from '@mui/docs/Link';
 import heroVariables from 'docs/src/components/productBaseUI/heroVariables';
 
+// DS imports
+import Switch from './themed-controls/Switch';
+
 const Panel = styled('div')({
   width: 340,
   backgroundColor: 'var(--muidocs-palette-background-paper)',
@@ -429,87 +431,6 @@ const StyledSlider = styled(Slider)(`
   }
 `);
 
-const StyledSwitch = styled('span')(`
-  font-size: 0;
-  position: relative;
-  display: inline-block;
-  width: 34px;
-  height: 20px;
-  cursor: pointer;
-
-
-  &.${switchClasses.disabled} {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  & .${switchClasses.track} {
-    background: var(--Switch-background, var(--muidocs-palette-grey-300));
-    border-radius: max(2px, var(--border-radius) * 4);
-    display: block;
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    transition: background-color ease 100ms;
-
-  }
-  
-  :hover {
-    .${switchClasses.track} {
-      background: var(--Switch-hoverBackground, var(--muidocs-palette-grey-400));
-    }
-  }
-
-  & .${switchClasses.thumb} {
-    display: block;
-    width: 14px;
-    height: 14px;
-    top: 3px;
-    left: 3px;
-    border-radius: max(2px, var(--border-radius));
-    background-color: #fff;
-    position: relative;
-    transition-property: left;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 120ms;
-  }
-
-  &.${switchClasses.focusVisible} {
-    border-radius: max(2px, var(--border-radius) * 4);
-    outline: 3px solid var(--muidocs-palette-primary-300);
-  }
-
-  &.${switchClasses.checked} {
-    .${switchClasses.thumb} {
-      left: 17px;
-      top: 3px;
-      background-color: #fff;
-    }
-
-    .${switchClasses.track} {
-      background: var(--muidocs-palette-primary-500);
-    }
-
-    :hover {
-      .${switchClasses.track} {
-        background: var(--muidocs-palette-primary-700);
-      } 
-    }
-  }
-
-  & .${switchClasses.input} {
-    cursor: inherit;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    z-index: 1;
-    margin: 0;
-  }
-  `);
-
 const Backdrop = React.forwardRef<HTMLDivElement, { open?: boolean; className: string }>(
   (props, ref) => {
     const { open, className, ...other } = props;
@@ -972,26 +893,11 @@ export default function BaseUIThemesDemo() {
         >
           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
             <StyledSwitchLabel id="make-it-your-own">Make it your own</StyledSwitchLabel>
-            <Switch
-              slots={{
-                root: StyledSwitch,
-              }}
-              slotProps={{
-                input: { 'aria-labelledby': 'make-it-your-own' },
-              }}
-              defaultChecked
-            />
+            <Switch aria-labelledby="make-it-your-own" defaultChecked />
           </Box>
           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
             <StyledSwitchLabel id="use-every-component">Use every component</StyledSwitchLabel>
-            <Switch
-              slots={{
-                root: StyledSwitch,
-              }}
-              slotProps={{
-                input: { 'aria-labelledby': 'use-every-component' },
-              }}
-            />
+            <Switch aria-labelledby="use-every-component" />
           </Box>
         </Box>
         {/* Modal and Snackbar component */}
diff --git a/docs/src/components/productBaseUI/themed-controls/Switch.tsx b/docs/src/components/productBaseUI/themed-controls/Switch.tsx
new file mode 100644
index 0000000000..47dda86e2f
--- /dev/null
+++ b/docs/src/components/productBaseUI/themed-controls/Switch.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Switch as BaseSwitch, SwitchProps } from '@mui/base/Switch';
+import { css, styled } from '@mui/system';
+
+const StyledSwitch = styled(BaseSwitch)(css`
+  font-size: 0;
+  position: relative;
+  display: inline-block;
+  width: 34px;
+  height: 20px;
+  cursor: pointer;
+  background: var(--Switch-background, var(--muidocs-palette-grey-300));
+  border-radius: max(2px, var(--border-radius) * 4);
+  transition: background-color ease 100ms;
+  border: none;
+  padding: 0;
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  $:hover {
+    background: var(--Switch-hoverBackground, var(--muidocs-palette-grey-400));
+  }
+
+  &:focus-visible {
+    border-radius: max(2px, var(--border-radius) * 4);
+    outline: 3px solid var(--muidocs-palette-primary-300);
+  }
+
+  &[data-state='checked'] {
+    background: var(--muidocs-palette-primary-500);
+  }
+`);
+
+const StyledSwitchThumb = styled(BaseSwitch.Thumb)(css`
+  display: block;
+  width: 14px;
+  height: 14px;
+  left: 3px;
+  border-radius: max(2px, var(--border-radius));
+  background-color: #fff;
+  position: relative;
+  transition-property: left;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 120ms;
+
+  &[data-state='checked'] {
+    left: 17px;
+    background-color: #fff;
+
+    &:hover {
+      background: var(--muidocs-palette-primary-700);
+    }
+  }
+`);
+
+const Switch = React.forwardRef(function Switch(
+  props: SwitchProps,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  return (
+    <StyledSwitch {...props} ref={ref}>
+      <StyledSwitchThumb />
+    </StyledSwitch>
+  );
+});
+
+export default Switch;

From 27f0b7e0a462b97c78a13488a7af06b3f177bc03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Fri, 1 Mar 2024 09:32:11 +0100
Subject: [PATCH 13/32] Rewrite the Switch on Badge demos

---
 .../base/components/badge/BadgeVisibility.js  | 112 +++++++++---------
 .../base/components/badge/BadgeVisibility.tsx | 112 +++++++++---------
 2 files changed, 116 insertions(+), 108 deletions(-)

diff --git a/docs/data/base/components/badge/BadgeVisibility.js b/docs/data/base/components/badge/BadgeVisibility.js
index 1acc876e0b..880ff49e4b 100644
--- a/docs/data/base/components/badge/BadgeVisibility.js
+++ b/docs/data/base/components/badge/BadgeVisibility.js
@@ -3,7 +3,7 @@ import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 // Auxiliary demo components
 import { styled, Stack } from '@mui/system';
 import { Button, buttonClasses } from '@mui/base/Button';
-import { Switch, switchClasses } from '@mui/base/Switch';
+import { Switch as BaseSwitch } from '@mui/base/Switch';
 import Divider from '@mui/material/Divider';
 // Icons
 import AddIcon from '@mui/icons-material/Add';
@@ -13,6 +13,7 @@ import MailIcon from '@mui/icons-material/Mail';
 const blue = {
   200: '#99CCF3',
   500: '#007FFF',
+  700: '#0059B2',
 };
 
 const grey = {
@@ -95,66 +96,73 @@ const StyledButton = styled(Button)(
   `,
 );
 
-const Root = styled('span')(
+const Switch = styled(BaseSwitch)(
   ({ theme }) => `
-  position: relative;
+  width: 38px;
+  height: 24px;
+  margin: 10px;
+  padding: 0;
+  box-sizing: border-box;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  border-radius: 24px;
   display: inline-block;
-  width: 32px;
-  height: 20px;
-  cursor: pointer;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 120ms;
+  box-shadow: inset 0px 1px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
+  };
 
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 
-  & .${switchClasses.track} {
-    background: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]};
-    border-radius: 16px;
-    display: block;
-    height: 100%;
-    width: 100%;
-    position: absolute;
+  &:hover:not([data-disabled]) {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
-  & .${switchClasses.thumb} {
-    position: relative;
+  &:focus-visible {
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
+  }
+
+  &[data-state="checked"] {
+    border: none;
+    background: ${blue[500]};
+  }
+
+  &[data-state="checked"]:not([data-disabled]):hover {
+    background: ${blue[700]};
+  }
+  `,
+);
+
+const Thumb = styled(BaseSwitch.Thumb)(
+  ({ theme }) => `
+    box-sizing: border-box;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     display: block;
-    width: 14px;
-    height: 14px;
-    top: 3px;
-    left: 3px;
+    width: 16px;
+    height: 16px;
+    left: 4px;
     border-radius: 16px;
-    background-color: #fff;
+    background-color: #FFF;
+    position: relative;
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 120ms;
-  }
-
-  &.${switchClasses.focusVisible} .${switchClasses.track} {
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? grey[700] : blue[200]};
-  }
+    box-shadow: 0px 1px 2px ${
+      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
+    };
 
-  &.${switchClasses.checked} {
-    .${switchClasses.thumb} {
-      left: 15px;
-      top: 3px;
+    &[data-state="checked"] {
+      left: 18px;
       background-color: #fff;
+      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
     }
-
-    .${switchClasses.track} {
-      background: ${blue[500]};
-    }
-  }
-
-  & .${switchClasses.input} {
-    cursor: inherit;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    z-index: 1;
-    margin: 0;
-  }
-  `,
+`,
 );
 
 const StyledLabel = styled('label')(
@@ -205,13 +213,9 @@ export default function BadgeVisibility() {
         <Divider orientation="vertical" />
         <Stack direction="row" spacing={1} useFlexGap>
           <StyledLabel>Show badge</StyledLabel>
-          <Switch
-            slots={{
-              root: Root,
-            }}
-            checked={!invisible}
-            onChange={handleBadgeVisibility}
-          />
+          <Switch checked={!invisible} onChange={handleBadgeVisibility}>
+            <Thumb />
+          </Switch>
         </Stack>
       </Stack>
     </Stack>
diff --git a/docs/data/base/components/badge/BadgeVisibility.tsx b/docs/data/base/components/badge/BadgeVisibility.tsx
index 1acc876e0b..880ff49e4b 100644
--- a/docs/data/base/components/badge/BadgeVisibility.tsx
+++ b/docs/data/base/components/badge/BadgeVisibility.tsx
@@ -3,7 +3,7 @@ import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 // Auxiliary demo components
 import { styled, Stack } from '@mui/system';
 import { Button, buttonClasses } from '@mui/base/Button';
-import { Switch, switchClasses } from '@mui/base/Switch';
+import { Switch as BaseSwitch } from '@mui/base/Switch';
 import Divider from '@mui/material/Divider';
 // Icons
 import AddIcon from '@mui/icons-material/Add';
@@ -13,6 +13,7 @@ import MailIcon from '@mui/icons-material/Mail';
 const blue = {
   200: '#99CCF3',
   500: '#007FFF',
+  700: '#0059B2',
 };
 
 const grey = {
@@ -95,66 +96,73 @@ const StyledButton = styled(Button)(
   `,
 );
 
-const Root = styled('span')(
+const Switch = styled(BaseSwitch)(
   ({ theme }) => `
-  position: relative;
+  width: 38px;
+  height: 24px;
+  margin: 10px;
+  padding: 0;
+  box-sizing: border-box;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  border-radius: 24px;
   display: inline-block;
-  width: 32px;
-  height: 20px;
-  cursor: pointer;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 120ms;
+  box-shadow: inset 0px 1px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
+  };
 
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 
-  & .${switchClasses.track} {
-    background: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]};
-    border-radius: 16px;
-    display: block;
-    height: 100%;
-    width: 100%;
-    position: absolute;
+  &:hover:not([data-disabled]) {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
-  & .${switchClasses.thumb} {
-    position: relative;
+  &:focus-visible {
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
+  }
+
+  &[data-state="checked"] {
+    border: none;
+    background: ${blue[500]};
+  }
+
+  &[data-state="checked"]:not([data-disabled]):hover {
+    background: ${blue[700]};
+  }
+  `,
+);
+
+const Thumb = styled(BaseSwitch.Thumb)(
+  ({ theme }) => `
+    box-sizing: border-box;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     display: block;
-    width: 14px;
-    height: 14px;
-    top: 3px;
-    left: 3px;
+    width: 16px;
+    height: 16px;
+    left: 4px;
     border-radius: 16px;
-    background-color: #fff;
+    background-color: #FFF;
+    position: relative;
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 120ms;
-  }
-
-  &.${switchClasses.focusVisible} .${switchClasses.track} {
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? grey[700] : blue[200]};
-  }
+    box-shadow: 0px 1px 2px ${
+      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
+    };
 
-  &.${switchClasses.checked} {
-    .${switchClasses.thumb} {
-      left: 15px;
-      top: 3px;
+    &[data-state="checked"] {
+      left: 18px;
       background-color: #fff;
+      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
     }
-
-    .${switchClasses.track} {
-      background: ${blue[500]};
-    }
-  }
-
-  & .${switchClasses.input} {
-    cursor: inherit;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    z-index: 1;
-    margin: 0;
-  }
-  `,
+`,
 );
 
 const StyledLabel = styled('label')(
@@ -205,13 +213,9 @@ export default function BadgeVisibility() {
         <Divider orientation="vertical" />
         <Stack direction="row" spacing={1} useFlexGap>
           <StyledLabel>Show badge</StyledLabel>
-          <Switch
-            slots={{
-              root: Root,
-            }}
-            checked={!invisible}
-            onChange={handleBadgeVisibility}
-          />
+          <Switch checked={!invisible} onChange={handleBadgeVisibility}>
+            <Thumb />
+          </Switch>
         </Stack>
       </Stack>
     </Stack>

From ea047852b9f1dc5e1ed6f4c0739a598af18d4d07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Fri, 1 Mar 2024 09:32:29 +0100
Subject: [PATCH 14/32] Clear the customization page

---
 .../customization/CreateSlot.tsx.preview      |   3 -
 .../customization/DisabledDefaultClasses.js   |  91 -------
 .../customization/DisabledDefaultClasses.tsx  |  91 -------
 .../DisabledDefaultClasses.tsx.preview        |  14 --
 .../customization/PrepareForSlot.js           |  14 --
 .../customization/PrepareForSlot.tsx          |  14 --
 .../customization/PrepareForSlot.tsx.preview  |   3 -
 .../customization/SlotPropsCallback.js        |  71 ------
 .../customization/SlotPropsCallback.tsx       |  71 ------
 .../SlotPropsCallback.tsx.preview             |   2 -
 .../customization/StylingCustomCss.js         |  58 -----
 .../customization/StylingCustomCss.tsx        |  58 -----
 .../StylingCustomCss.tsx.preview              |   2 -
 .../customization/StylingHooks.js             |  81 ------
 .../customization/StylingHooks.tsx            |  81 ------
 .../customization/StylingHooks.tsx.preview    |   1 -
 .../customization/StylingSlots.js             |  65 -----
 .../customization/StylingSlots.tsx            |  65 -----
 .../customization/StylingSlots.tsx.preview    |   1 -
 .../StylingSlotsSingleComponent.js            |  63 -----
 .../StylingSlotsSingleComponent.tsx           |  63 -----
 .../StylingSlotsSingleComponent.tsx.preview   |   1 -
 .../customization/customization.md            | 231 +-----------------
 23 files changed, 3 insertions(+), 1141 deletions(-)
 delete mode 100644 docs/data/base/getting-started/customization/CreateSlot.tsx.preview
 delete mode 100644 docs/data/base/getting-started/customization/DisabledDefaultClasses.js
 delete mode 100644 docs/data/base/getting-started/customization/DisabledDefaultClasses.tsx
 delete mode 100644 docs/data/base/getting-started/customization/DisabledDefaultClasses.tsx.preview
 delete mode 100644 docs/data/base/getting-started/customization/PrepareForSlot.js
 delete mode 100644 docs/data/base/getting-started/customization/PrepareForSlot.tsx
 delete mode 100644 docs/data/base/getting-started/customization/PrepareForSlot.tsx.preview
 delete mode 100644 docs/data/base/getting-started/customization/SlotPropsCallback.js
 delete mode 100644 docs/data/base/getting-started/customization/SlotPropsCallback.tsx
 delete mode 100644 docs/data/base/getting-started/customization/SlotPropsCallback.tsx.preview
 delete mode 100644 docs/data/base/getting-started/customization/StylingCustomCss.js
 delete mode 100644 docs/data/base/getting-started/customization/StylingCustomCss.tsx
 delete mode 100644 docs/data/base/getting-started/customization/StylingCustomCss.tsx.preview
 delete mode 100644 docs/data/base/getting-started/customization/StylingHooks.js
 delete mode 100644 docs/data/base/getting-started/customization/StylingHooks.tsx
 delete mode 100644 docs/data/base/getting-started/customization/StylingHooks.tsx.preview
 delete mode 100644 docs/data/base/getting-started/customization/StylingSlots.js
 delete mode 100644 docs/data/base/getting-started/customization/StylingSlots.tsx
 delete mode 100644 docs/data/base/getting-started/customization/StylingSlots.tsx.preview
 delete mode 100644 docs/data/base/getting-started/customization/StylingSlotsSingleComponent.js
 delete mode 100644 docs/data/base/getting-started/customization/StylingSlotsSingleComponent.tsx
 delete mode 100644 docs/data/base/getting-started/customization/StylingSlotsSingleComponent.tsx.preview

diff --git a/docs/data/base/getting-started/customization/CreateSlot.tsx.preview b/docs/data/base/getting-started/customization/CreateSlot.tsx.preview
deleted file mode 100644
index 07d5df8721..0000000000
--- a/docs/data/base/getting-started/customization/CreateSlot.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-<Button href="/" slots={{ root: LinkSlot }}>
-  Home
-</Button>
\ No newline at end of file
diff --git a/docs/data/base/getting-started/customization/DisabledDefaultClasses.js b/docs/data/base/getting-started/customization/DisabledDefaultClasses.js
deleted file mode 100644
index bd0144e628..0000000000
--- a/docs/data/base/getting-started/customization/DisabledDefaultClasses.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/system';
-import { Switch } from '@mui/base/Switch';
-import { ClassNameConfigurator } from '@mui/base';
-
-const Root = styled('span')(
-  ({ ownerState }) => `
-  font-size: 0;
-  position: relative;
-  display: inline-block;
-  width: 32px;
-  height: 20px;
-  background: #b3c3d3;
-  border-radius: 10px;
-  margin: 10px;
-  cursor: pointer;
-
-  ${
-    ownerState.disabled
-      ? `opacity: 0.4;
-         cursor: not-allowed;`
-      : ''
-  }
-
-  ${ownerState.checked ? 'background: #007fff;' : ''}
-`,
-);
-
-const Thumb = styled('span')(
-  ({ ownerState }) => `
-  display: block;
-  width: 14px;
-  height: 14px;
-  top: 3px;
-  left: 3px;
-  border-radius: 16px;
-  background-color: #fff;
-  position: relative;
-  transition: all 200ms ease;
-
-  ${
-    ownerState.focusVisible
-      ? `background-color: rgba(255, 255, 255, 1);
-         box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25);`
-      : ''
-  }
-
-  ${
-    ownerState.checked
-      ? `left: 14px;
-         top: 3px;
-         background-color: #fff;`
-      : ''
-  }
-`,
-);
-
-const Input = styled('input')`
-  cursor: inherit;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  margin: 0;
-`;
-
-const slots = { root: Root, thumb: Thumb, input: Input };
-
-export default function DisabledDefaultClasses() {
-  return (
-    <div>
-      {/* The built-in classes (base-Switch-root, base--checked, etc.) are enabled by default,
-           even though they are not used */}
-      <Switch
-        slots={slots}
-        slotProps={{ input: { 'aria-label': 'Switch with built-in classes' } }}
-      />
-      <ClassNameConfigurator disableDefaultClasses>
-        {/* ClassNameConfigurator removes the built-in classes,
-             leaving only the one generated by Emotion */}
-        <Switch
-          slots={slots}
-          slotProps={{ input: { 'aria-label': 'Switch without built-in classes' } }}
-        />
-      </ClassNameConfigurator>
-    </div>
-  );
-}
diff --git a/docs/data/base/getting-started/customization/DisabledDefaultClasses.tsx b/docs/data/base/getting-started/customization/DisabledDefaultClasses.tsx
deleted file mode 100644
index 05232cf9dc..0000000000
--- a/docs/data/base/getting-started/customization/DisabledDefaultClasses.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/system';
-import { Switch, SwitchRootSlotProps, SwitchThumbSlotProps } from '@mui/base/Switch';
-import { ClassNameConfigurator } from '@mui/base';
-
-const Root = styled('span')(
-  ({ ownerState }: SwitchRootSlotProps) => `
-  font-size: 0;
-  position: relative;
-  display: inline-block;
-  width: 32px;
-  height: 20px;
-  background: #b3c3d3;
-  border-radius: 10px;
-  margin: 10px;
-  cursor: pointer;
-
-  ${
-    ownerState.disabled
-      ? `opacity: 0.4;
-         cursor: not-allowed;`
-      : ''
-  }
-
-  ${ownerState.checked ? 'background: #007fff;' : ''}
-`,
-);
-
-const Thumb = styled('span')(
-  ({ ownerState }: SwitchThumbSlotProps) => `
-  display: block;
-  width: 14px;
-  height: 14px;
-  top: 3px;
-  left: 3px;
-  border-radius: 16px;
-  background-color: #fff;
-  position: relative;
-  transition: all 200ms ease;
-
-  ${
-    ownerState.focusVisible
-      ? `background-color: rgba(255, 255, 255, 1);
-         box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25);`
-      : ''
-  }
-
-  ${
-    ownerState.checked
-      ? `left: 14px;
-         top: 3px;
-         background-color: #fff;`
-      : ''
-  }
-`,
-);
-
-const Input = styled('input')`
-  cursor: inherit;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  margin: 0;
-`;
-
-const slots = { root: Root, thumb: Thumb, input: Input };
-
-export default function DisabledDefaultClasses() {
-  return (
-    <div>
-      {/* The built-in classes (base-Switch-root, base--checked, etc.) are enabled by default,
-          even though they are not used */}
-      <Switch
-        slots={slots}
-        slotProps={{ input: { 'aria-label': 'Switch with built-in classes' } }}
-      />
-      <ClassNameConfigurator disableDefaultClasses>
-        {/* ClassNameConfigurator removes the built-in classes,
-            leaving only the one generated by Emotion */}
-        <Switch
-          slots={slots}
-          slotProps={{ input: { 'aria-label': 'Switch without built-in classes' } }}
-        />
-      </ClassNameConfigurator>
-    </div>
-  );
-}
diff --git a/docs/data/base/getting-started/customization/DisabledDefaultClasses.tsx.preview b/docs/data/base/getting-started/customization/DisabledDefaultClasses.tsx.preview
deleted file mode 100644
index cf0e581aa9..0000000000
--- a/docs/data/base/getting-started/customization/DisabledDefaultClasses.tsx.preview
+++ /dev/null
@@ -1,14 +0,0 @@
-{/* The built-in classes (base-Switch-root, base--checked, etc.) are enabled by default,
-    even though they are not used */}
-<Switch
-  slots={slots}
-  slotProps={{ input: { 'aria-label': 'Switch with built-in classes' } }}
-/>
-<ClassNameConfigurator disableDefaultClasses>
-  {/* ClassNameConfigurator removes the built-in classes,
-      leaving only the one generated by Emotion */}
-  <Switch
-    slots={slots}
-    slotProps={{ input: { 'aria-label': 'Switch without built-in classes' } }}
-  />
-</ClassNameConfigurator>
\ No newline at end of file
diff --git a/docs/data/base/getting-started/customization/PrepareForSlot.js b/docs/data/base/getting-started/customization/PrepareForSlot.js
deleted file mode 100644
index 8eb41a69ea..0000000000
--- a/docs/data/base/getting-started/customization/PrepareForSlot.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { prepareForSlot } from '@mui/base/utils';
-import { Button } from '@mui/base/Button';
-import Link from 'next/link';
-
-const LinkSlot = prepareForSlot(Link);
-
-export default function PrepareForSlot() {
-  return (
-    <Button href="/" slots={{ root: LinkSlot }} prefetch={false}>
-      Home
-    </Button>
-  );
-}
diff --git a/docs/data/base/getting-started/customization/PrepareForSlot.tsx b/docs/data/base/getting-started/customization/PrepareForSlot.tsx
deleted file mode 100644
index f3bbad2cd5..0000000000
--- a/docs/data/base/getting-started/customization/PrepareForSlot.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { prepareForSlot } from '@mui/base/utils';
-import { Button } from '@mui/base/Button';
-import Link from 'next/link';
-
-const LinkSlot = prepareForSlot(Link);
-
-export default function PrepareForSlot() {
-  return (
-    <Button<typeof LinkSlot> href="/" slots={{ root: LinkSlot }} prefetch={false}>
-      Home
-    </Button>
-  );
-}
diff --git a/docs/data/base/getting-started/customization/PrepareForSlot.tsx.preview b/docs/data/base/getting-started/customization/PrepareForSlot.tsx.preview
deleted file mode 100644
index a6393e1d7e..0000000000
--- a/docs/data/base/getting-started/customization/PrepareForSlot.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-<Button<typeof LinkSlot> href="/" slots={{ root: LinkSlot }} prefetch={false}>
-  Home
-</Button>
\ No newline at end of file
diff --git a/docs/data/base/getting-started/customization/SlotPropsCallback.js b/docs/data/base/getting-started/customization/SlotPropsCallback.js
deleted file mode 100644
index 7bc38a0e5b..0000000000
--- a/docs/data/base/getting-started/customization/SlotPropsCallback.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from 'react';
-import { Switch } from '@mui/base/Switch';
-
-const css = `
-  .my-switch {
-    font-size: 0;
-    position: relative;
-    display: inline-block;
-    width: 32px;
-    height: 20px;
-    background: #B3C3D3;
-    border-radius: 10px;
-    margin: 10px;
-    cursor: pointer;
-  }
-
-  .my-switch.on {
-    background: #007FFF;
-  }
-
-  .my-switch.focused .base-Switch-thumb {
-    background-color: rgba(255, 255, 255, 1);
-    box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25);
-  }
-
-  .my-switch .base-Switch-thumb {
-    display: block;
-    width: 14px;
-    height: 14px;
-    top: 3px;
-    left: 3px;
-    border-radius: 16px;
-    background-color: #FFF;
-    position: relative;
-    transition: all 200ms ease;
-  }
-
-  .my-switch.on .base-Switch-thumb {
-    left: 14px;
-    top: 3px;
-    background-color: #FFF;
-  }
-
-  .my-switch .base-Switch-input {
-    cursor: inherit;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    z-index: 1;
-    margin: 0;
-  }`;
-
-export default function SlotPropsCallback() {
-  const slotProps = {
-    root: (ownerState) => ({
-      className: `my-switch ${ownerState.checked ? 'on' : 'off'} ${
-        ownerState.focusVisible ? 'focused' : ''
-      }`,
-    }),
-  };
-
-  return (
-    <div>
-      <style type="text/css">{css}</style>
-      <Switch slotProps={slotProps} />
-    </div>
-  );
-}
diff --git a/docs/data/base/getting-started/customization/SlotPropsCallback.tsx b/docs/data/base/getting-started/customization/SlotPropsCallback.tsx
deleted file mode 100644
index 7e7ef2b2d1..0000000000
--- a/docs/data/base/getting-started/customization/SlotPropsCallback.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from 'react';
-import { Switch, SwitchOwnerState } from '@mui/base/Switch';
-
-const css = `
-  .my-switch {
-    font-size: 0;
-    position: relative;
-    display: inline-block;
-    width: 32px;
-    height: 20px;
-    background: #B3C3D3;
-    border-radius: 10px;
-    margin: 10px;
-    cursor: pointer;
-  }
-
-  .my-switch.on {
-    background: #007FFF;
-  }
-
-  .my-switch.focused .base-Switch-thumb {
-    background-color: rgba(255, 255, 255, 1);
-    box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25);
-  }
-
-  .my-switch .base-Switch-thumb {
-    display: block;
-    width: 14px;
-    height: 14px;
-    top: 3px;
-    left: 3px;
-    border-radius: 16px;
-    background-color: #FFF;
-    position: relative;
-    transition: all 200ms ease;
-  }
-
-  .my-switch.on .base-Switch-thumb {
-    left: 14px;
-    top: 3px;
-    background-color: #FFF;
-  }
-
-  .my-switch .base-Switch-input {
-    cursor: inherit;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    z-index: 1;
-    margin: 0;
-  }`;
-
-export default function SlotPropsCallback() {
-  const slotProps = {
-    root: (ownerState: SwitchOwnerState) => ({
-      className: `my-switch ${ownerState.checked ? 'on' : 'off'} ${
-        ownerState.focusVisible ? 'focused' : ''
-      }`,
-    }),
-  };
-
-  return (
-    <div>
-      <style type="text/css">{css}</style>
-      <Switch slotProps={slotProps} />
-    </div>
-  );
-}
diff --git a/docs/data/base/getting-started/customization/SlotPropsCallback.tsx.preview b/docs/data/base/getting-started/customization/SlotPropsCallback.tsx.preview
deleted file mode 100644
index 024276c23c..0000000000
--- a/docs/data/base/getting-started/customization/SlotPropsCallback.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-<style type="text/css">{css}</style>
-<Switch slotProps={slotProps} />
\ No newline at end of file
diff --git a/docs/data/base/getting-started/customization/StylingCustomCss.js b/docs/data/base/getting-started/customization/StylingCustomCss.js
deleted file mode 100644
index 457de824ae..0000000000
--- a/docs/data/base/getting-started/customization/StylingCustomCss.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { Switch as SwitchUnstyled, switchClasses } from '@mui/base/Switch';
-
-const css = `
-  .my-switch {
-    font-size: 0;
-    position: relative;
-    display: inline-block;
-    width: 32px;
-    height: 20px;
-    background: #B3C3D3;
-    border-radius: 10px;
-    margin: 10px;
-    cursor: pointer;
-  }
-
-  .my-switch.${switchClasses.checked} {
-    background: #007FFF;
-  }
-
-  .my-switch .${switchClasses.thumb} {
-    display: block;
-    width: 14px;
-    height: 14px;
-    top: 3px;
-    left: 3px;
-    border-radius: 16px;
-    background-color: #FFF;
-    position: relative;
-    transition: all 200ms ease;
-  }
-
-  .my-switch.${switchClasses.checked} .${switchClasses.thumb} {
-    left: 14px;
-    top: 3px;
-    background-color: #FFF;
-  }
-
-  .my-switch .${switchClasses.input} {
-    cursor: inherit;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    z-index: 1;
-    margin: 0;
-  }`;
-
-export default function StylingCustomCss() {
-  return (
-    <div>
-      <style type="text/css">{css}</style>
-      <SwitchUnstyled className="my-switch" />
-    </div>
-  );
-}
diff --git a/docs/data/base/getting-started/customization/StylingCustomCss.tsx b/docs/data/base/getting-started/customization/StylingCustomCss.tsx
deleted file mode 100644
index 457de824ae..0000000000
--- a/docs/data/base/getting-started/customization/StylingCustomCss.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { Switch as SwitchUnstyled, switchClasses } from '@mui/base/Switch';
-
-const css = `
-  .my-switch {
-    font-size: 0;
-    position: relative;
-    display: inline-block;
-    width: 32px;
-    height: 20px;
-    background: #B3C3D3;
-    border-radius: 10px;
-    margin: 10px;
-    cursor: pointer;
-  }
-
-  .my-switch.${switchClasses.checked} {
-    background: #007FFF;
-  }
-
-  .my-switch .${switchClasses.thumb} {
-    display: block;
-    width: 14px;
-    height: 14px;
-    top: 3px;
-    left: 3px;
-    border-radius: 16px;
-    background-color: #FFF;
-    position: relative;
-    transition: all 200ms ease;
-  }
-
-  .my-switch.${switchClasses.checked} .${switchClasses.thumb} {
-    left: 14px;
-    top: 3px;
-    background-color: #FFF;
-  }
-
-  .my-switch .${switchClasses.input} {
-    cursor: inherit;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    z-index: 1;
-    margin: 0;
-  }`;
-
-export default function StylingCustomCss() {
-  return (
-    <div>
-      <style type="text/css">{css}</style>
-      <SwitchUnstyled className="my-switch" />
-    </div>
-  );
-}
diff --git a/docs/data/base/getting-started/customization/StylingCustomCss.tsx.preview b/docs/data/base/getting-started/customization/StylingCustomCss.tsx.preview
deleted file mode 100644
index 52366e9f8c..0000000000
--- a/docs/data/base/getting-started/customization/StylingCustomCss.tsx.preview
+++ /dev/null
@@ -1,2 +0,0 @@
-<style type="text/css">{css}</style>
-<SwitchUnstyled className="my-switch" />
\ No newline at end of file
diff --git a/docs/data/base/getting-started/customization/StylingHooks.js b/docs/data/base/getting-started/customization/StylingHooks.js
deleted file mode 100644
index f21e8817d2..0000000000
--- a/docs/data/base/getting-started/customization/StylingHooks.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import { useSwitch } from '@mui/base/useSwitch';
-import { styled } from '@mui/system';
-
-const SwitchRoot = styled('span')`
-  font-size: 0;
-  position: relative;
-  display: inline-block;
-  width: 32px;
-  height: 20px;
-  background: #b3c3d3;
-  border-radius: 10px;
-  margin: 10px;
-  cursor: pointer;
-
-  &.Switch-disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  &.Switch-checked {
-    background: #007fff;
-  }
-`;
-
-const SwitchInput = styled('input')`
-  cursor: inherit;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  margin: 0;
-`;
-
-const SwitchThumb = styled('span')`
-  display: block;
-  width: 14px;
-  height: 14px;
-  top: 3px;
-  left: 3px;
-  border-radius: 16px;
-  background-color: #fff;
-  position: relative;
-  transition: all 200ms ease;
-
-  &.Switch-focusVisible {
-    background-color: rgb(255 255 255 / 1);
-    box-shadow: 0 0 1px 8px rgb(0 0 0 / 0.25);
-  }
-
-  &.Switch-checked {
-    left: 14px;
-    top: 3px;
-    background-color: #fff;
-  }
-`;
-
-function Switch(props) {
-  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
-
-  const stateClasses = {
-    'Switch-checked': checked,
-    'Switch-disabled': disabled,
-    'Switch-focusVisible': focusVisible,
-  };
-
-  return (
-    <SwitchRoot className={clsx(stateClasses)}>
-      <SwitchThumb className={clsx(stateClasses)} />
-      <SwitchInput {...getInputProps()} aria-label={props['aria-label']} />
-    </SwitchRoot>
-  );
-}
-
-export default function StylingHooks() {
-  return <Switch aria-label="Demo switch" />;
-}
diff --git a/docs/data/base/getting-started/customization/StylingHooks.tsx b/docs/data/base/getting-started/customization/StylingHooks.tsx
deleted file mode 100644
index d055d4dc0b..0000000000
--- a/docs/data/base/getting-started/customization/StylingHooks.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import { useSwitch, UseSwitchParameters } from '@mui/base/useSwitch';
-import { styled } from '@mui/system';
-
-const SwitchRoot = styled('span')`
-  font-size: 0;
-  position: relative;
-  display: inline-block;
-  width: 32px;
-  height: 20px;
-  background: #b3c3d3;
-  border-radius: 10px;
-  margin: 10px;
-  cursor: pointer;
-
-  &.Switch-disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  &.Switch-checked {
-    background: #007fff;
-  }
-`;
-
-const SwitchInput = styled('input')`
-  cursor: inherit;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  margin: 0;
-`;
-
-const SwitchThumb = styled('span')`
-  display: block;
-  width: 14px;
-  height: 14px;
-  top: 3px;
-  left: 3px;
-  border-radius: 16px;
-  background-color: #fff;
-  position: relative;
-  transition: all 200ms ease;
-
-  &.Switch-focusVisible {
-    background-color: rgb(255 255 255 / 1);
-    box-shadow: 0 0 1px 8px rgb(0 0 0 / 0.25);
-  }
-
-  &.Switch-checked {
-    left: 14px;
-    top: 3px;
-    background-color: #fff;
-  }
-`;
-
-function Switch(props: UseSwitchParameters & { 'aria-label'?: string }) {
-  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
-
-  const stateClasses = {
-    'Switch-checked': checked,
-    'Switch-disabled': disabled,
-    'Switch-focusVisible': focusVisible,
-  };
-
-  return (
-    <SwitchRoot className={clsx(stateClasses)}>
-      <SwitchThumb className={clsx(stateClasses)} />
-      <SwitchInput {...getInputProps()} aria-label={props['aria-label']} />
-    </SwitchRoot>
-  );
-}
-
-export default function StylingHooks() {
-  return <Switch aria-label="Demo switch" />;
-}
diff --git a/docs/data/base/getting-started/customization/StylingHooks.tsx.preview b/docs/data/base/getting-started/customization/StylingHooks.tsx.preview
deleted file mode 100644
index 3854607bb0..0000000000
--- a/docs/data/base/getting-started/customization/StylingHooks.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-<Switch aria-label="Demo switch" />
\ No newline at end of file
diff --git a/docs/data/base/getting-started/customization/StylingSlots.js b/docs/data/base/getting-started/customization/StylingSlots.js
deleted file mode 100644
index c29afb6be3..0000000000
--- a/docs/data/base/getting-started/customization/StylingSlots.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/system';
-import { Switch, switchClasses } from '@mui/base/Switch';
-
-const SwitchRoot = styled('span')`
-  font-size: 0;
-  position: relative;
-  display: inline-block;
-  width: 32px;
-  height: 20px;
-  background: #b3c3d3;
-  border-radius: 10px;
-  margin: 10px;
-  cursor: pointer;
-
-  &.${switchClasses.disabled} {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  &.${switchClasses.checked} {
-    background: #007fff;
-  }
-`;
-
-const SwitchThumb = styled('span')`
-  display: block;
-  width: 14px;
-  height: 14px;
-  top: 3px;
-  left: 3px;
-  border-radius: 16px;
-  background-color: #fff;
-  position: relative;
-  transition: all 200ms ease;
-
-  .${switchClasses.focusVisible} & {
-    background-color: rgb(255 255 255 / 1);
-    box-shadow: 0 0 1px 8px rgb(0 0 0 / 0.25);
-  }
-
-  .${switchClasses.checked} > & {
-    left: 14px;
-    top: 3px;
-    background-color: #fff;
-  }
-`;
-
-const SwitchInput = styled('input')`
-  cursor: inherit;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  margin: 0;
-`;
-
-export default function StylingSlots() {
-  return (
-    <Switch slots={{ root: SwitchRoot, thumb: SwitchThumb, input: SwitchInput }} />
-  );
-}
diff --git a/docs/data/base/getting-started/customization/StylingSlots.tsx b/docs/data/base/getting-started/customization/StylingSlots.tsx
deleted file mode 100644
index c29afb6be3..0000000000
--- a/docs/data/base/getting-started/customization/StylingSlots.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/system';
-import { Switch, switchClasses } from '@mui/base/Switch';
-
-const SwitchRoot = styled('span')`
-  font-size: 0;
-  position: relative;
-  display: inline-block;
-  width: 32px;
-  height: 20px;
-  background: #b3c3d3;
-  border-radius: 10px;
-  margin: 10px;
-  cursor: pointer;
-
-  &.${switchClasses.disabled} {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  &.${switchClasses.checked} {
-    background: #007fff;
-  }
-`;
-
-const SwitchThumb = styled('span')`
-  display: block;
-  width: 14px;
-  height: 14px;
-  top: 3px;
-  left: 3px;
-  border-radius: 16px;
-  background-color: #fff;
-  position: relative;
-  transition: all 200ms ease;
-
-  .${switchClasses.focusVisible} & {
-    background-color: rgb(255 255 255 / 1);
-    box-shadow: 0 0 1px 8px rgb(0 0 0 / 0.25);
-  }
-
-  .${switchClasses.checked} > & {
-    left: 14px;
-    top: 3px;
-    background-color: #fff;
-  }
-`;
-
-const SwitchInput = styled('input')`
-  cursor: inherit;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  margin: 0;
-`;
-
-export default function StylingSlots() {
-  return (
-    <Switch slots={{ root: SwitchRoot, thumb: SwitchThumb, input: SwitchInput }} />
-  );
-}
diff --git a/docs/data/base/getting-started/customization/StylingSlots.tsx.preview b/docs/data/base/getting-started/customization/StylingSlots.tsx.preview
deleted file mode 100644
index 4e3d5ce333..0000000000
--- a/docs/data/base/getting-started/customization/StylingSlots.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-<Switch slots={{ root: SwitchRoot, thumb: SwitchThumb, input: SwitchInput }} />
\ No newline at end of file
diff --git a/docs/data/base/getting-started/customization/StylingSlotsSingleComponent.js b/docs/data/base/getting-started/customization/StylingSlotsSingleComponent.js
deleted file mode 100644
index b131b8b29e..0000000000
--- a/docs/data/base/getting-started/customization/StylingSlotsSingleComponent.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/system';
-import { Switch as BaseSwitch, switchClasses } from '@mui/base/Switch';
-
-const Switch = styled(BaseSwitch)`
-  font-size: 0;
-  position: relative;
-  display: inline-block;
-  width: 32px;
-  height: 20px;
-  background: #b3c3d3;
-  border-radius: 10px;
-  margin: 10px;
-  cursor: pointer;
-
-  & .${switchClasses.thumb} {
-    display: block;
-    width: 14px;
-    height: 14px;
-    top: 3px;
-    left: 3px;
-    border-radius: 16px;
-    background-color: #fff;
-    position: relative;
-    transition: all 200ms ease;
-  }
-
-  & .${switchClasses.input} {
-    cursor: inherit;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    z-index: 1;
-    margin: 0;
-  }
-
-  &.${switchClasses.disabled} {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  &.${switchClasses.checked} {
-    background: #007fff;
-
-    & .${switchClasses.thumb} {
-      left: 14px;
-      top: 3px;
-      background-color: #fff;
-    }
-  }
-
-  &.${switchClasses.focusVisible} .${switchClasses.thumb} {
-    background-color: rgb(255 255 255 / 1);
-    box-shadow: 0 0 1px 8px rgb(0 0 0 / 0.25);
-  }
-`;
-
-export default function StylingSlotsSingleComponent() {
-  return <Switch />;
-}
diff --git a/docs/data/base/getting-started/customization/StylingSlotsSingleComponent.tsx b/docs/data/base/getting-started/customization/StylingSlotsSingleComponent.tsx
deleted file mode 100644
index b131b8b29e..0000000000
--- a/docs/data/base/getting-started/customization/StylingSlotsSingleComponent.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/system';
-import { Switch as BaseSwitch, switchClasses } from '@mui/base/Switch';
-
-const Switch = styled(BaseSwitch)`
-  font-size: 0;
-  position: relative;
-  display: inline-block;
-  width: 32px;
-  height: 20px;
-  background: #b3c3d3;
-  border-radius: 10px;
-  margin: 10px;
-  cursor: pointer;
-
-  & .${switchClasses.thumb} {
-    display: block;
-    width: 14px;
-    height: 14px;
-    top: 3px;
-    left: 3px;
-    border-radius: 16px;
-    background-color: #fff;
-    position: relative;
-    transition: all 200ms ease;
-  }
-
-  & .${switchClasses.input} {
-    cursor: inherit;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    z-index: 1;
-    margin: 0;
-  }
-
-  &.${switchClasses.disabled} {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  &.${switchClasses.checked} {
-    background: #007fff;
-
-    & .${switchClasses.thumb} {
-      left: 14px;
-      top: 3px;
-      background-color: #fff;
-    }
-  }
-
-  &.${switchClasses.focusVisible} .${switchClasses.thumb} {
-    background-color: rgb(255 255 255 / 1);
-    box-shadow: 0 0 1px 8px rgb(0 0 0 / 0.25);
-  }
-`;
-
-export default function StylingSlotsSingleComponent() {
-  return <Switch />;
-}
diff --git a/docs/data/base/getting-started/customization/StylingSlotsSingleComponent.tsx.preview b/docs/data/base/getting-started/customization/StylingSlotsSingleComponent.tsx.preview
deleted file mode 100644
index 0ff96d2010..0000000000
--- a/docs/data/base/getting-started/customization/StylingSlotsSingleComponent.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-<Switch />
\ No newline at end of file
diff --git a/docs/data/base/getting-started/customization/customization.md b/docs/data/base/getting-started/customization/customization.md
index 6ebdd37540..ff99298b49 100644
--- a/docs/data/base/getting-started/customization/customization.md
+++ b/docs/data/base/getting-started/customization/customization.md
@@ -4,232 +4,7 @@
 
 With Base UI, you have the freedom to decide how much you want to customize a component's structure and style.
 
-## Styling the components
-
-This section reviews several methods of customization that are available: applying custom CSS rules, overriding default subcomponent slots, customizing the slot props, and using hooks to build fully custom components.
-
-### Which option to choose?
-
-The multitude of options can be overwhelming, especially if you're new to Base UI.
-How to decide which one to use, then?
-
-The first decision to make is whether to use unstyled components or hooks.
-Hooks are better suited for making component libraries that can be further customized.
-For example, our own Joy UI is implemented using hooks from Base UI.
-Hooks also serve as the basis for several Material UI components, and future versions of the library will use them even more extensively.
-
-If you don't need to make your component library customizable (for instance, by exposing `slotProps`), then the unstyled components may be a better option thanks to their simplicity.
-
-After choosing unstyled components, there is one more decision to make: how to style them.
-The answer depends on the styling solution used in the project:
-
-#### Plain CSS, Sass, Less
-
-...or anything else that compiles to CSS:
-
-You can either [style the components using the built-in classes](#applying-custom-css-rules) or [specify your own classes](#customizing-slot-props) and reference them in your stylesheets.
-
-#### CSS Modules
-
-When working with [CSS Modules](https://github.com/css-modules/css-modules), the simplest approach is to [specify custom classes using `slotProps`](#customizing-slot-props), as shown below:
-
-```tsx
-import clsx from 'clsx';
-import { Switch as BaseSwitch, SwitchOwnerState } from '@mui/base/Switch';
-import classes from './styles.module.css';
-
-export default function Switch(props) {
-  const slotProps = {
-    root: (ownerState: SwitchOwnerState) => ({
-      className: clsx(classes.root, {
-        [classes.checked]: ownerState.checked,
-        [classes.disabled]: ownerState.disabled,
-      }),
-    }),
-    thumb: { className: classes.thumb },
-    track: { className: classes.track },
-    input: { className: classes.input },
-  };
-
-  return <BaseSwitch {...props} slotProps={slotProps} />;
-}
-```
-
-In this example we're using the [clsx](https://www.npmjs.com/package/clsx) utility to reduce the effort needed to apply class names conditionally.
-
-#### Tailwind CSS
-
-Use [`slotProps`](#customizing-slot-props) to apply custom styles using [Tailwind CSS](https://tailwindcss.com/), as shown below:
-
-```tsx
-import { Switch as BaseSwitch, SwitchOwnerState } from '@mui/base/Switch';
-
-export default function Switch(props) {
-  const slotProps = {
-    root: (ownerState: SwitchOwnerState) => ({
-      className: `inline-block w-8 h-5 rounded-full cursor-pointer relative ${
-        ownerState.checked ? 'bg-cyan-500' : 'bg-zinc-400'
-      }`,
-    }),
-    thumb: (ownerState: SwitchOwnerState) => ({
-      className: `bg-white block w-3.5 h-3.5 rounded-full relative top-[3px] ${
-        ownerState.checked ? 'left-[3px]' : 'left-[14px]'
-      }`,
-    }),
-    input: { className: 'absolute w-full h-full inset-0 opacity-0 z-10 m-0' },
-  };
-
-  return <BaseSwitch {...props} slotProps={slotProps} />;
-}
-```
-
-See our [Working with Tailwind CSS guide](/base-ui/guides/working-with-tailwind-css/) for more information about integrating Base UI and Tailwind CSS.
-
-#### Styled components
-
-If you use a CSS-in-JS solution with a styled-components-like API (such as [MUI System](https://mui.com/system/getting-started/) or [Emotion](https://emotion.sh/docs/introduction)), the best method is to provide the styled subcomponents using the [`slots` prop](#overriding-subcomponent-slots), as shown in the [demo below](#overriding-subcomponent-slots).
-
-Alternatively, you can wrap the whole unstyled component in a `styled` utility and target the individual subcomponents using CSS classes:
-
-{{"demo": "StylingSlotsSingleComponent.js", "defaultCodeOpen": true}}
-
----
-
-### Applying custom CSS rules
-
-If you're happy with the default structure of a component's rendered HTML, you can apply custom styles to the component's classes.
-
-Each component has its own set of classes.
-Some classes are **static**, which is to say that they are always present on the component.
-Others are applied **conditionally**—like `base--disabled`, for example, which is only present when a component is disabled.
-
-Each component's API documentation lists all classes that the component uses.
-Additionally, you can import a `[componentName]Classes` object that describes all the classes a given component uses, as the following demo illustrates:
-
-{{"demo": "StylingCustomCss.js", "defaultCodeOpen": true}}
-
-If you don't use these classes, you can clean up the DOM by disabling them.
-See [Disabling default CSS classes](#disabling-default-css-classes) for instructions.
-
-### Overriding subcomponent slots
-
-If you want to make changes to a component's rendered HTML structure, you can override the default subcomponents ("slots") using the `slots` and/or `component` prop—see ["Shared props" on the Base Usage page](/base-ui/getting-started/usage/#shared-props) for more details.
-
-The following demo uses [Switch](/base-ui/react-switch/) to show how to create a styled component by applying styles to three of its subcomponent slots: `root`, `thumb`, and `input`.
-
-Note that although this demo uses [MUI System](https://mui.com/system/styled/) as a styling solution, you are free to choose any alternative.
-
-{{"demo": "StylingSlots.js"}}
-
-The components you pass in the `slots` prop receive the `ownerState` prop from the top-level component (the "owner").
-By convention, it contains all props passed to the owner, merged with its rendering state.
-
-For example:
-
-```jsx
-<Switch slots={{ thumb: MyCustomThumb }} data-foo="42" />
-```
-
-In this case, `MyCustomThumb` component receives the `ownerState` object with the following data:
-
-```ts
-{
-  checked: boolean;
-  disabled: boolean;
-  focusVisible: boolean;
-  readOnly: boolean;
-  'data-foo': string;
-}
-```
-
-You can use this object to style your component.
-
-:::warning
-When inserting a component from a third-party library into a slot, you may encounter this warning: `"React does not recognize the ownerState prop on a DOM element."`
-This is because the custom component isn't prepared to receive the `ownerState` like a built-in library component would be.
+:::error
+**TODO** The previous content was deleted as it was not up to date.
+This page requires a rewrite.
 :::
-
-If you need to use the `ownerState` to propagate some props to a third-party component, you must create a custom wrapper for this purpose.
-But if you don't need the `ownerState` and just want to resolve the error, you can use the `prepareForSlot` utility:
-
-{{"demo": "PrepareForSlot.js", "defaultCodeOpen": true}}
-
-### Customizing slot props
-
-Use the `slotProps` prop to customize the inner component props.
-The most common use case is setting a class name, but you can set any prop, including event handlers.
-
-The following example shows how to add a custom class to two of the Switch's slots:
-
-```tsx
-function Switch(props: SwitchProps) {
-  const slotProps: SwitchProps['slotProps'] = {
-    thumb: {
-      className: 'my-thumb',
-    },
-    track: {
-      className: 'my-track',
-    },
-  };
-
-  return <Switch {...props} slotProps={slotProps} />;
-}
-```
-
-The `switch:thumb` and `switch:class` are added unconditionally—they will always be present on the Switch component.
-
-You may need to apply a class only when a component is in a particular state.
-A good example is adding `on` and `off` classes to a Switch based on its checked state, as shown in the demo below:
-
-{{"demo": "SlotPropsCallback.js", "defaultCodeOpen": true}}
-
-Here, instead of an object with props, the root slot receives a callback function.
-Its only parameter is `ownerState`, which is an object that describes the state of the "owner component"—the Switch in this case.
-The `ownerState` holds all the props of the owner component (with defaults applied where applicable) and is augmented with the internal state of the component.
-In the case of the Select, the additional information includes the `checked`, `disabled`, `focusVisible`, and `readOnly` boolean fields.
-
-### Creating custom components using hooks
-
-If you need complete control over a component's rendered HTML structure, you can build it with hooks.
-
-Hooks give you access to the _logic_ that a component uses, but without any default structure.
-See ["Components vs. hooks" on the Base Usage page](/base-ui/getting-started/usage/#components-vs-hooks) for more details.
-
-Hooks return the current state of the component (for example `checked`, `disabled`, `open`, etc.) and provide functions that return props you can apply to your fully custom components.
-
-In the case of [Switch](/base-ui/react-switch/), the component is accompanied by the `useSwitch` hook which gives you all of the functionality without any structure.
-
-It returns the following object:
-
-```ts
-{
-  checked: Readonly<boolean>;
-  disabled: Readonly<boolean>;
-  readOnly: Readonly<boolean>;
-  focusVisible: Readonly<boolean>;
-  getInputProps: (otherProps?: object) => SwitchInputProps;
-}
-```
-
-The `checked`, `disabled`, `readOnly`, and `focusVisible` fields represent the state of the switch.
-Use them to apply styling to your HTML elements.
-
-The `getInputProps` function can be used to get the props to place on an HTML `<input>` to make the switch accessible.
-
-{{"demo": "StylingHooks.js", "defaultCodeOpen": true}}
-
-## Disabling default CSS classes
-
-If you don't need the built-in classes on components, you may disable them.
-This will clean up the DOM and can be useful especially if you apply your own classes or style components using a CSS-in-JS solution.
-To do this, wrap your components in a ClassNameConfigurator component (imported from `@mui/base/utils`):
-
-```tsx
-<ClassNameConfigurator disableDefaultClasses>
-  <Button>I'm classless!</Button>
-</ClassNameConfigurator>
-```
-
-Inspect the elements in the following demo to see the difference:
-
-{{"demo": "DisabledDefaultClasses.js"}}

From 6ab2ae44efd92106cff28619669152f7446d2e4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Fri, 1 Mar 2024 09:35:40 +0100
Subject: [PATCH 15/32] Prettier

---
 docs/data/base/components/switch/switch.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/data/base/components/switch/switch.md b/docs/data/base/components/switch/switch.md
index 60ba5ddc0a..459c09fac1 100644
--- a/docs/data/base/components/switch/switch.md
+++ b/docs/data/base/components/switch/switch.md
@@ -42,8 +42,8 @@ The Switch component is composed of a root that houses one interior slot—a thu
 Use the `render` prop to override the root or thumb component:
 
 ```jsx
-<Switch render={(props) => (<MyFancySwitchRoot {...props} />)}>
-  <Switch.Thumb render={(props) => (<MyFancySwitchThumb {...props} />)} />
+<Switch render={(props) => <MyFancySwitchRoot {...props} />}>
+  <Switch.Thumb render={(props) => <MyFancySwitchThumb {...props} />} />
 </Switch>
 ```
 

From f29123ce4782466aac36364cff4ae2818e3dcf6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Fri, 1 Mar 2024 10:46:52 +0100
Subject: [PATCH 16/32] Update the customization demo on the landing page

---
 .../productBaseUI/BaseUICustomization.tsx     | 162 ++++++++----------
 1 file changed, 67 insertions(+), 95 deletions(-)

diff --git a/docs/src/components/productBaseUI/BaseUICustomization.tsx b/docs/src/components/productBaseUI/BaseUICustomization.tsx
index 797744435b..5307c1ea33 100644
--- a/docs/src/components/productBaseUI/BaseUICustomization.tsx
+++ b/docs/src/components/productBaseUI/BaseUICustomization.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import clsx from 'clsx';
-import { Switch as SwitchUnstyled } from '@mui/base/Switch';
+import { Switch as BaseSwitch } from '@mui/base/Switch';
 import { useSwitch, UseSwitchParameters } from '@mui/base/useSwitch';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
@@ -18,51 +17,52 @@ import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
 
 const code = `
-import clsx from 'clsx';
-import { styled } from '@mui/system';
-import { SwitchUnstyled } from '@mui/base/Switch';
+import { Switch as BaseSwitch } from '@mui/base/Switch';
 import { useSwitch } from '@mui/base/useSwitch';
+import { styled } from '@mui/system';
 
-const StyledSwitchRoot = styled('span')(\`
+const StyledSwitchRoot = styled('button')(\`
   font-size: 0;
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   width: 40px;
   height: 24px;
   margin: 10px;
+  padding: 0;
+  border: none;
   cursor: pointer;
   border-radius: 16px;
-  background: #A0AAB4;
+  background: #B0B8C4;
+  transition: all ease 120ms;
+
+  :hover {
+    background: #9DA8B7;
+  }
 
-  &.Mui-disabled {
+  &[data-disabled] {
     opacity: 0.4;
     cursor: not-allowed;
   }
 
-  &.Mui-checked {
+  &[data-state="checked"] {
     background: #007FFF;
-    & .MuiSwitch-thumb {
-      left: 20px;
+    :hover {
+      background: #0072E5;
     }
   }
 
-  &.Mui-focusVisible {
-    outline: 2px solid #007FFF;
-    outline-offset: 2px;
+  &:focus-visible {
+    outline: 4px solid rgba(0, 127, 255, 0.4);
   }
-\`);
 
-const StyledSwitchInput = styled('input')\`
-  cursor: inherit;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  margin: 0;
-\`;
+  :where([data-mui-color-scheme='dark']) & {
+    background: #6B7A90;
+  
+    :hover {
+      background: #434D5B;
+    }
+  }
+\`);
 
 const StyledSwitchThumb = styled('span')\`
   display: block;
@@ -71,67 +71,59 @@ const StyledSwitchThumb = styled('span')\`
   top: 4px;
   left: 4px;
   border-radius: 16px;
-  background-color: #FFF;
+  background-color: #fff;
   position: relative;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 120ms;
+  transition-duration: 150ms;
 
-  &.Mui-checked {
+  &[data-state='checked'] {
     left: 20px;
   }
 \`;
 
 function SwitchFromHook(props) {
-  const {
-    getInputProps,
-    checked,
-    disabled,
-    focusVisible,
-  } = useSwitch(props);
+  const { getInputProps, getButtonProps, checked, disabled } = useSwitch(props);
 
-  const stateClasses = {
-    'Mui-checked': checked,
-    'Mui-disabled': disabled,
-    'Mui-focusVisible': focusVisible,
+  const stateAttributes = {
+    'data-state': checked ? 'checked' : 'unchecked',
+    'data-disabled': disabled || undefined,
   };
 
   return (
-    <StyledSwitchRoot className={clsx(stateClasses)}>
-      <StyledSwitchThumb className={clsx(stateClasses)} />
-      <StyledSwitchInput {...getInputProps()} aria-label="Demo switch" />
+    <StyledSwitchRoot aria-label="Demo switch" {...getButtonProps()} {...stateAttributes}>
+      <StyledSwitchThumb {...stateAttributes} />
+      <input {...getInputProps()} />
     </StyledSwitchRoot>
   );
 }
 
 function App() {
   return (
-    <SwitchUnstyled
-      slots={{
-        root: StyledSwitchRoot,
-        input: StyledSwitchInput,
-        thumb: StyledSwitchThumb,
-      }}
-      slotProps={{
-        input: { 'aria-label': 'Demo switch' },
-      }}
-    />
+    <BaseSwitch
+      aria-label="Demo switch"
+      render={(props) => <StyledSwitchRoot {...props} />}
+    >
+      <BaseSwitch render={(props) => <StyledSwitchThumb {...props} />} />
+    </BaseSwitch>
     <SwitchFromHook />
   )
 }
 `;
 
-const startLine = [6, 89, 64];
-const endLine = [26, 93, 84];
+const startLine = [4, 85, 65];
+const endLine = [45, 87, 79];
 const scrollTo = [0, 1400, 1140];
 
-const StyledSwitchRoot = styled('span')(`
+const StyledSwitchRoot = styled('button')(`
   font-size: 0;
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   width: 40px;
   height: 24px;
   margin: 10px;
+  padding: 0;
+  border: none;
   cursor: pointer;
   border-radius: 16px;
   background: #B0B8C4;
@@ -141,22 +133,19 @@ const StyledSwitchRoot = styled('span')(`
     background: #9DA8B7;
   }
 
-  &.Mui-disabled {
+  &[data-disabled] {
     opacity: 0.4;
     cursor: not-allowed;
   }
 
-  &.Mui-checked {
+  &[data-state="checked"] {
     background: #007FFF;
     :hover {
       background: #0072E5;
     }
-    & .MuiSwitch-thumb {
-      left: 20px;
-    }
   }
 
-  &.Mui-focusVisible {
+  &:focus-visible {
     outline: 4px solid rgba(0, 127, 255, 0.4);
   }
 
@@ -169,18 +158,6 @@ const StyledSwitchRoot = styled('span')(`
   }
 `);
 
-const StyledSwitchInput = styled('input')`
-  cursor: inherit;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  margin: 0;
-`;
-
 const StyledSwitchThumb = styled('span')`
   display: block;
   width: 16px;
@@ -194,24 +171,23 @@ const StyledSwitchThumb = styled('span')`
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 
-  &.Mui-checked {
+  &[data-state='checked'] {
     left: 20px;
   }
 `;
 
 function SwitchFromHook(props: UseSwitchParameters) {
-  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
+  const { getInputProps, getButtonProps, checked, disabled } = useSwitch(props);
 
-  const stateClasses = {
-    'Mui-checked': checked,
-    'Mui-disabled': disabled,
-    'Mui-focusVisible': focusVisible,
+  const stateAttributes = {
+    'data-state': checked ? 'checked' : 'unchecked',
+    'data-disabled': disabled || undefined,
   };
 
   return (
-    <StyledSwitchRoot className={clsx(stateClasses)}>
-      <StyledSwitchThumb className={clsx(stateClasses)} />
-      <StyledSwitchInput {...getInputProps()} aria-label="Demo switch" />
+    <StyledSwitchRoot aria-label="Demo switch" {...getButtonProps()} {...stateAttributes}>
+      <StyledSwitchThumb {...stateAttributes} />
+      <input {...getInputProps()} />
     </StyledSwitchRoot>
   );
 }
@@ -256,7 +232,7 @@ export default function BaseUICustomization() {
               <Item
                 icon={<SvgTwinkle />}
                 title="Overriding subcomponent slots"
-                description="Default DOM structure doesn't suit your needs? Replace any node with the element you prefer using the `slots` prop."
+                description="Default DOM structure doesn't suit your needs? Replace any node with the element you prefer using the `render` prop."
               />
             </Highlighter>
             <Highlighter disableBorder {...getSelectedProps(2)} onClick={() => setIndex(2)}>
@@ -286,16 +262,12 @@ export default function BaseUICustomization() {
                 }),
               })}
             >
-              <SwitchUnstyled
-                slots={{
-                  root: StyledSwitchRoot,
-                  input: StyledSwitchInput,
-                  thumb: StyledSwitchThumb,
-                }}
-                slotProps={{
-                  input: { 'aria-label': 'Demo switch' },
-                }}
-              />
+              <BaseSwitch
+                aria-label="Demo switch"
+                render={(props) => <StyledSwitchRoot {...props} />}
+              >
+                <BaseSwitch render={(props) => <StyledSwitchThumb {...props} />} />
+              </BaseSwitch>
               <SwitchFromHook defaultChecked />
             </Frame.Demo>
             <Frame.Info

From 656d1c2a5ea0c32a53b483dd6517a80732fcc2b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Fri, 1 Mar 2024 11:25:13 +0100
Subject: [PATCH 17/32] Remove failing useButton test

---
 .../mui-base/src/useButton/useButton.test.tsx | 28 +------------------
 1 file changed, 1 insertion(+), 27 deletions(-)

diff --git a/packages/mui-base/src/useButton/useButton.test.tsx b/packages/mui-base/src/useButton/useButton.test.tsx
index 17951927d1..628f7cbed6 100644
--- a/packages/mui-base/src/useButton/useButton.test.tsx
+++ b/packages/mui-base/src/useButton/useButton.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { act, createRenderer, fireEvent } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { useButton } from '@mui/base/useButton';
@@ -169,32 +169,6 @@ describe('useButton', () => {
         expect(handleClickInternal.callCount).to.equal(1);
         expect(handleClickExternal.callCount).to.equal(0);
       });
-
-      it('handles onFocusVisible and does not include it in the root props', () => {
-        interface WithFocusVisibleHandler {
-          onFocusVisible: React.FocusEventHandler;
-        }
-
-        function TestComponent(props: WithFocusVisibleHandler) {
-          const ref = React.useRef(null);
-          const { getRootProps } = useButton({ ...props, rootRef: ref });
-
-          // @ts-expect-error onFocusVisible is removed from props
-          expect(getRootProps().onFocusVisible).to.equal(undefined);
-
-          return <button {...getRootProps()} />;
-        }
-
-        const handleFocusVisible = spy();
-
-        const { getByRole } = render(<TestComponent onFocusVisible={handleFocusVisible} />);
-
-        act(() => {
-          getByRole('button').focus();
-        });
-
-        expect(handleFocusVisible.callCount).to.equal(1);
-      });
     });
   });
 

From 99a2090d635daa3c35839fa9150b910c95a0a201 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Fri, 1 Mar 2024 11:32:51 +0100
Subject: [PATCH 18/32] proptypes

---
 docs/pages/base-ui/api/use-switch.json                | 7 +++++++
 docs/translations/api-docs/use-switch/use-switch.json | 2 ++
 packages/mui-base/src/Switch/Switch.tsx               | 4 ++++
 3 files changed, 13 insertions(+)

diff --git a/docs/pages/base-ui/api/use-switch.json b/docs/pages/base-ui/api/use-switch.json
index 2548fe22e8..be38f62fc6 100644
--- a/docs/pages/base-ui/api/use-switch.json
+++ b/docs/pages/base-ui/api/use-switch.json
@@ -3,6 +3,13 @@
     "checked": { "type": { "name": "boolean", "description": "boolean" } },
     "defaultChecked": { "type": { "name": "boolean", "description": "boolean" } },
     "disabled": { "type": { "name": "boolean", "description": "boolean" } },
+    "inputRef": {
+      "type": {
+        "name": "React.Ref&lt;HTMLInputElement&gt;",
+        "description": "React.Ref&lt;HTMLInputElement&gt;"
+      }
+    },
+    "name": { "type": { "name": "string", "description": "string" } },
     "onChange": {
       "type": {
         "name": "React.ChangeEventHandler&lt;HTMLInputElement&gt;",
diff --git a/docs/translations/api-docs/use-switch/use-switch.json b/docs/translations/api-docs/use-switch/use-switch.json
index 676a07c47e..3ea96ee97e 100644
--- a/docs/translations/api-docs/use-switch/use-switch.json
+++ b/docs/translations/api-docs/use-switch/use-switch.json
@@ -6,6 +6,8 @@
       "description": "The default checked state. Use when the component is not controlled."
     },
     "disabled": { "description": "If <code>true</code>, the component is disabled." },
+    "inputRef": { "description": "Ref to the underlying input element." },
+    "name": { "description": "Name of the underlying input element." },
     "onChange": { "description": "Callback fired when the state is changed." },
     "readOnly": { "description": "If <code>true</code>, the component is read only." },
     "required": {
diff --git a/packages/mui-base/src/Switch/Switch.tsx b/packages/mui-base/src/Switch/Switch.tsx
index a2313f8b0b..d6cee45871 100644
--- a/packages/mui-base/src/Switch/Switch.tsx
+++ b/packages/mui-base/src/Switch/Switch.tsx
@@ -106,6 +106,10 @@ Switch.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   id: PropTypes.string,
+  /**
+   * @ignore
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the state is changed.
    *

From 15208662f389e09b58db308c772e054f121807e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Wed, 13 Mar 2024 09:40:31 +0100
Subject: [PATCH 19/32] Extract style hooks to a separate file

---
 packages/mui-base/src/Switch/Switch.tsx             |  9 ++-------
 packages/mui-base/src/Switch/SwitchThumb.tsx        |  8 ++------
 packages/mui-base/src/Switch/useSwitchStyleHooks.ts | 11 +++++++++++
 3 files changed, 15 insertions(+), 13 deletions(-)
 create mode 100644 packages/mui-base/src/Switch/useSwitchStyleHooks.ts

diff --git a/packages/mui-base/src/Switch/Switch.tsx b/packages/mui-base/src/Switch/Switch.tsx
index d6cee45871..62e0b90253 100644
--- a/packages/mui-base/src/Switch/Switch.tsx
+++ b/packages/mui-base/src/Switch/Switch.tsx
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import { useSwitch } from '../useSwitch';
 import { SwitchProps, SwitchOwnerState } from './Switch.types';
 import { resolveClassName } from '../utils/resolveClassName';
-import { getStyleHookProps } from '../utils/getStyleHookProps';
 import { SwitchContext } from './SwitchContext';
+import { useSwitchStyleHooks } from './useSwitchStyleHooks';
 
 function defaultRender(props: React.ComponentPropsWithRef<'button'>) {
   // eslint-disable-next-line react/button-has-type
@@ -52,12 +52,7 @@ const Switch = React.forwardRef(function Switch(
   );
 
   const className = resolveClassName(classNameProp, ownerState);
-
-  const styleHooks = React.useMemo(() => {
-    return getStyleHookProps(ownerState, {
-      checked: (value) => ({ 'data-state': value ? 'checked' : 'unchecked' }),
-    });
-  }, [ownerState]);
+  const styleHooks = useSwitchStyleHooks(ownerState);
 
   const buttonProps = {
     className,
diff --git a/packages/mui-base/src/Switch/SwitchThumb.tsx b/packages/mui-base/src/Switch/SwitchThumb.tsx
index d68ef1c483..207cd11e75 100644
--- a/packages/mui-base/src/Switch/SwitchThumb.tsx
+++ b/packages/mui-base/src/Switch/SwitchThumb.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SwitchThumbProps } from './Switch.types';
 import { SwitchContext } from './SwitchContext';
 import { resolveClassName } from '../utils/resolveClassName';
-import { getStyleHookProps } from '../utils/getStyleHookProps';
+import { useSwitchStyleHooks } from './useSwitchStyleHooks';
 
 function defaultRender(props: React.ComponentPropsWithRef<'span'>) {
   return <span {...props} />;
@@ -20,11 +20,7 @@ const SwitchThumb = React.forwardRef(function SwitchThumb(
   }
 
   const className = resolveClassName(classNameProp, ownerState);
-  const styleHooks = React.useMemo(() => {
-    return getStyleHookProps(ownerState, {
-      checked: (value) => (value === true ? { 'data-state': 'checked' } : null),
-    });
-  }, [ownerState]);
+  const styleHooks = useSwitchStyleHooks(ownerState);
 
   const elementProps = {
     className,
diff --git a/packages/mui-base/src/Switch/useSwitchStyleHooks.ts b/packages/mui-base/src/Switch/useSwitchStyleHooks.ts
new file mode 100644
index 0000000000..de492c3c43
--- /dev/null
+++ b/packages/mui-base/src/Switch/useSwitchStyleHooks.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { SwitchOwnerState } from './Switch.types';
+import { getStyleHookProps } from '../utils/getStyleHookProps';
+
+export function useSwitchStyleHooks(ownerState: SwitchOwnerState) {
+  return React.useMemo(() => {
+    return getStyleHookProps(ownerState, {
+      checked: (value) => ({ 'data-state': value ? 'checked' : 'unchecked' }),
+    });
+  }, [ownerState]);
+}

From ede63ad38bb6304d59041ce901d3a7daeae2cddb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Wed, 13 Mar 2024 09:40:52 +0100
Subject: [PATCH 20/32] Use the visuallyHidden utility

---
 packages/mui-base/src/useSwitch/useSwitch.ts  | 3 ++-
 packages/mui-base/src/utils/visuallyHidden.ts | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)
 create mode 100644 packages/mui-base/src/utils/visuallyHidden.ts

diff --git a/packages/mui-base/src/useSwitch/useSwitch.ts b/packages/mui-base/src/useSwitch/useSwitch.ts
index 94316137e5..bcc5f8fae8 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.ts
@@ -3,6 +3,7 @@ import * as React from 'react';
 import { useControlled } from '../utils/useControlled';
 import { UseSwitchParameters, UseSwitchReturnValue } from './useSwitch.types';
 import { useForkRef } from '../utils/useForkRef';
+import { visuallyHidden } from '../utils/visuallyHidden';
 
 /**
  * The basic building block for creating custom switches.
@@ -76,7 +77,7 @@ export function useSwitch(params: UseSwitchParameters): UseSwitchReturnValue {
     disabled,
     name,
     required,
-    style: { opacity: 0, width: 0, height: 0, margin: 0, padding: 0, overflow: 'hidden' },
+    style: visuallyHidden,
     tabIndex: -1,
     type: 'checkbox',
     'aria-hidden': true,
diff --git a/packages/mui-base/src/utils/visuallyHidden.ts b/packages/mui-base/src/utils/visuallyHidden.ts
new file mode 100644
index 0000000000..75ab88cf10
--- /dev/null
+++ b/packages/mui-base/src/utils/visuallyHidden.ts
@@ -0,0 +1 @@
+export { default as visuallyHidden } from '@mui/utils/visuallyHidden';

From 1a99d14a5585514b4fa04dd4ebb57e2002325559 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Wed, 13 Mar 2024 12:23:37 +0100
Subject: [PATCH 21/32] Cleaning up

---
 packages/mui-base/src/Switch/Switch.types.ts   | 18 +-----------------
 .../mui-base/src/Switch/useSwitchStyleHooks.ts |  7 ++++++-
 .../src/utils/BaseUiComponentCommonProps.ts    | 15 +++++++++++++++
 packages/mui-base/src/utils/useControlled.ts   |  3 +++
 packages/mui-base/src/utils/useForkRef.ts      |  3 +++
 5 files changed, 28 insertions(+), 18 deletions(-)
 create mode 100644 packages/mui-base/src/utils/BaseUiComponentCommonProps.ts

diff --git a/packages/mui-base/src/Switch/Switch.types.ts b/packages/mui-base/src/Switch/Switch.types.ts
index 833b67a92f..c674d4b7ba 100644
--- a/packages/mui-base/src/Switch/Switch.types.ts
+++ b/packages/mui-base/src/Switch/Switch.types.ts
@@ -1,21 +1,5 @@
 import * as React from 'react';
-
-// TODO: move to utils
-type ComponentRenderFn<Props, State> = (props: Props, state: State) => React.ReactElement;
-
-type BaseUiComponentCommonProps<ElementType extends React.ElementType, OwnerState> = Omit<
-  React.ComponentPropsWithoutRef<ElementType>,
-  'className'
-> & {
-  /**
-   * Class names applied to the element or a function that returns them based on the component's state.
-   */
-  className?: string | ((state: OwnerState) => string);
-  /**
-   * A function to customize rendering of the component.
-   */
-  render?: ComponentRenderFn<React.ComponentPropsWithRef<ElementType>, OwnerState>;
-};
+import { BaseUiComponentCommonProps } from '../utils/BaseUiComponentCommonProps';
 
 export type SwitchOwnerState = {
   checked: boolean;
diff --git a/packages/mui-base/src/Switch/useSwitchStyleHooks.ts b/packages/mui-base/src/Switch/useSwitchStyleHooks.ts
index de492c3c43..601de69ff9 100644
--- a/packages/mui-base/src/Switch/useSwitchStyleHooks.ts
+++ b/packages/mui-base/src/Switch/useSwitchStyleHooks.ts
@@ -1,7 +1,12 @@
 import * as React from 'react';
 import { SwitchOwnerState } from './Switch.types';
 import { getStyleHookProps } from '../utils/getStyleHookProps';
-
+/**
+ *
+ * API:
+ *
+ * - [useSwitchStyleHooks API](https://mui.com/base-ui/api/use-switch-style-hooks/)
+ */
 export function useSwitchStyleHooks(ownerState: SwitchOwnerState) {
   return React.useMemo(() => {
     return getStyleHookProps(ownerState, {
diff --git a/packages/mui-base/src/utils/BaseUiComponentCommonProps.ts b/packages/mui-base/src/utils/BaseUiComponentCommonProps.ts
new file mode 100644
index 0000000000..9765242884
--- /dev/null
+++ b/packages/mui-base/src/utils/BaseUiComponentCommonProps.ts
@@ -0,0 +1,15 @@
+export type ComponentRenderFn<Props, State> = (props: Props, state: State) => React.ReactElement;
+
+export type BaseUiComponentCommonProps<ElementType extends React.ElementType, OwnerState> = Omit<
+  React.ComponentPropsWithoutRef<ElementType>,
+  'className'
+> & {
+  /**
+   * Class names applied to the element or a function that returns them based on the component's state.
+   */
+  className?: string | ((state: OwnerState) => string);
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: ComponentRenderFn<React.ComponentPropsWithRef<ElementType>, OwnerState>;
+};
diff --git a/packages/mui-base/src/utils/useControlled.ts b/packages/mui-base/src/utils/useControlled.ts
index 075a6d4d9c..8973bcf1d8 100644
--- a/packages/mui-base/src/utils/useControlled.ts
+++ b/packages/mui-base/src/utils/useControlled.ts
@@ -1 +1,4 @@
+/**
+ * @ignore - internal hook.
+ */
 export { default as useControlled } from '@mui/utils/useControlled';
diff --git a/packages/mui-base/src/utils/useForkRef.ts b/packages/mui-base/src/utils/useForkRef.ts
index ef39f7f3dd..534da4871e 100644
--- a/packages/mui-base/src/utils/useForkRef.ts
+++ b/packages/mui-base/src/utils/useForkRef.ts
@@ -1 +1,4 @@
+/**
+ * @ignore - internal hook.
+ */
 export { default as useForkRef } from '@mui/utils/useForkRef';

From 0677034519b46c2b92c669a22c2cf3fb99e879e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Wed, 13 Mar 2024 14:42:22 +0100
Subject: [PATCH 22/32] Update Switch styles in Badge demo

---
 .../base/components/badge/BadgeVisibility.js  | 22 +++++++++----------
 .../base/components/badge/BadgeVisibility.tsx | 22 +++++++++----------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/docs/data/base/components/badge/BadgeVisibility.js b/docs/data/base/components/badge/BadgeVisibility.js
index 880ff49e4b..8eddfdf2b3 100644
--- a/docs/data/base/components/badge/BadgeVisibility.js
+++ b/docs/data/base/components/badge/BadgeVisibility.js
@@ -98,15 +98,14 @@ const StyledButton = styled(Button)(
 
 const Switch = styled(BaseSwitch)(
   ({ theme }) => `
-  width: 38px;
-  height: 24px;
-  margin: 10px;
+  width: 32px;
+  height: 20px;
   padding: 0;
   box-sizing: border-box;
-  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  border-radius: 24px;
-  display: inline-block;
+  background: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]};
+  border-radius: 16px;
+  border: none;
+  display: inline-flex;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 120ms;
@@ -144,9 +143,10 @@ const Thumb = styled(BaseSwitch.Thumb)(
     box-sizing: border-box;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     display: block;
-    width: 16px;
-    height: 16px;
-    left: 4px;
+    width: 14px;
+    height: 14px;
+    left: 3px;
+    top: 3px;
     border-radius: 16px;
     background-color: #FFF;
     position: relative;
@@ -158,7 +158,7 @@ const Thumb = styled(BaseSwitch.Thumb)(
     };
 
     &[data-state="checked"] {
-      left: 18px;
+      left: 15px;
       background-color: #fff;
       box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
     }
diff --git a/docs/data/base/components/badge/BadgeVisibility.tsx b/docs/data/base/components/badge/BadgeVisibility.tsx
index 880ff49e4b..8eddfdf2b3 100644
--- a/docs/data/base/components/badge/BadgeVisibility.tsx
+++ b/docs/data/base/components/badge/BadgeVisibility.tsx
@@ -98,15 +98,14 @@ const StyledButton = styled(Button)(
 
 const Switch = styled(BaseSwitch)(
   ({ theme }) => `
-  width: 38px;
-  height: 24px;
-  margin: 10px;
+  width: 32px;
+  height: 20px;
   padding: 0;
   box-sizing: border-box;
-  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  border-radius: 24px;
-  display: inline-block;
+  background: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]};
+  border-radius: 16px;
+  border: none;
+  display: inline-flex;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 120ms;
@@ -144,9 +143,10 @@ const Thumb = styled(BaseSwitch.Thumb)(
     box-sizing: border-box;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     display: block;
-    width: 16px;
-    height: 16px;
-    left: 4px;
+    width: 14px;
+    height: 14px;
+    left: 3px;
+    top: 3px;
     border-radius: 16px;
     background-color: #FFF;
     position: relative;
@@ -158,7 +158,7 @@ const Thumb = styled(BaseSwitch.Thumb)(
     };
 
     &[data-state="checked"] {
-      left: 18px;
+      left: 15px;
       background-color: #fff;
       box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
     }

From 8fc201781992d871c824f50d407181c09bc98aba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Wed, 13 Mar 2024 18:45:25 +0100
Subject: [PATCH 23/32] API docs

---
 docs/data/base/pagesApi.js                     |  4 ++++
 docs/pages/base-ui/api/switch-thumb.json       | 14 ++++++++++++++
 .../base-ui/api/use-switch-style-hooks.json    | 11 +++++++++++
 .../base-ui/react-switch/[docsTab]/index.js    | 18 ++++++++++++++++--
 .../switch-thumb/switch-thumb.json             |  1 +
 .../use-switch-style-hooks.json                |  1 +
 docs/translations/translations.json            |  1 +
 7 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 docs/pages/base-ui/api/switch-thumb.json
 create mode 100644 docs/pages/base-ui/api/use-switch-style-hooks.json
 create mode 100644 docs/translations/api-docs-base/switch-thumb/switch-thumb.json
 create mode 100644 docs/translations/api-docs/use-switch-style-hooks/use-switch-style-hooks.json

diff --git a/docs/data/base/pagesApi.js b/docs/data/base/pagesApi.js
index 77a19171a2..456a2dd6ab 100644
--- a/docs/data/base/pagesApi.js
+++ b/docs/data/base/pagesApi.js
@@ -51,6 +51,10 @@ module.exports = [
     title: 'Snackbar',
   },
   { pathname: '/base-ui/react-switch/components-api/#switch', title: 'Switch' },
+  {
+    pathname: '/base-ui/react-switch/components-api/#switch-thumb',
+    title: 'SwitchThumb',
+  },
   { pathname: '/base-ui/react-tabs/components-api/#tab', title: 'Tab' },
   { pathname: '/base-ui/react-tabs/components-api/#tab-panel', title: 'TabPanel' },
   {
diff --git a/docs/pages/base-ui/api/switch-thumb.json b/docs/pages/base-ui/api/switch-thumb.json
new file mode 100644
index 0000000000..136e44f171
--- /dev/null
+++ b/docs/pages/base-ui/api/switch-thumb.json
@@ -0,0 +1,14 @@
+{
+  "props": {},
+  "name": "SwitchThumb",
+  "imports": [
+    "import { SwitchThumb } from '@mui/base/Switch';",
+    "import { SwitchThumb } from '@mui/base';"
+  ],
+  "classes": [],
+  "muiName": "SwitchThumb",
+  "filename": "/packages/mui-base/src/Switch/SwitchThumb.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/base-ui/react-switch/\">Switch</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/pages/base-ui/api/use-switch-style-hooks.json b/docs/pages/base-ui/api/use-switch-style-hooks.json
new file mode 100644
index 0000000000..3a79771d7d
--- /dev/null
+++ b/docs/pages/base-ui/api/use-switch-style-hooks.json
@@ -0,0 +1,11 @@
+{
+  "parameters": {},
+  "returnValue": {},
+  "name": "useSwitchStyleHooks",
+  "filename": "/packages/mui-base/src/Switch/useSwitchStyleHooks.ts",
+  "imports": [
+    "import { useSwitchStyleHooks } from '@mui/base/Switch';",
+    "import { useSwitchStyleHooks } from '@mui/base';"
+  ],
+  "demos": "<ul></ul>"
+}
diff --git a/docs/pages/base-ui/react-switch/[docsTab]/index.js b/docs/pages/base-ui/react-switch/[docsTab]/index.js
index 8756fb8249..94d9aa559a 100644
--- a/docs/pages/base-ui/react-switch/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-switch/[docsTab]/index.js
@@ -4,6 +4,7 @@ import AppFrame from 'docs/src/modules/components/AppFrame';
 import * as pageProps from 'docs/data/base/components/switch/switch.md?@mui/markdown';
 import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
 import SwitchApiJsonPageContent from '../../api/switch.json';
+import SwitchThumbApiJsonPageContent from '../../api/switch-thumb.json';
 import useSwitchApiJsonPageContent from '../../api/use-switch.json';
 
 export default function Page(props) {
@@ -30,6 +31,13 @@ export const getStaticProps = () => {
   );
   const SwitchApiDescriptions = mapApiPageTranslations(SwitchApiReq);
 
+  const SwitchThumbApiReq = require.context(
+    'docs/translations/api-docs-base/switch-thumb',
+    false,
+    /switch-thumb.*.json$/,
+  );
+  const SwitchThumbApiDescriptions = mapApiPageTranslations(SwitchThumbApiReq);
+
   const useSwitchApiReq = require.context(
     'docs/translations/api-docs/use-switch',
     false,
@@ -39,8 +47,14 @@ export const getStaticProps = () => {
 
   return {
     props: {
-      componentsApiDescriptions: { Switch: SwitchApiDescriptions },
-      componentsApiPageContents: { Switch: SwitchApiJsonPageContent },
+      componentsApiDescriptions: {
+        Switch: SwitchApiDescriptions,
+        SwitchThumb: SwitchThumbApiDescriptions,
+      },
+      componentsApiPageContents: {
+        Switch: SwitchApiJsonPageContent,
+        SwitchThumb: SwitchThumbApiJsonPageContent,
+      },
       hooksApiDescriptions: { useSwitch: useSwitchApiDescriptions },
       hooksApiPageContents: { useSwitch: useSwitchApiJsonPageContent },
     },
diff --git a/docs/translations/api-docs-base/switch-thumb/switch-thumb.json b/docs/translations/api-docs-base/switch-thumb/switch-thumb.json
new file mode 100644
index 0000000000..f93d4cbd8c
--- /dev/null
+++ b/docs/translations/api-docs-base/switch-thumb/switch-thumb.json
@@ -0,0 +1 @@
+{ "componentDescription": "", "propDescriptions": {}, "classDescriptions": {} }
diff --git a/docs/translations/api-docs/use-switch-style-hooks/use-switch-style-hooks.json b/docs/translations/api-docs/use-switch-style-hooks/use-switch-style-hooks.json
new file mode 100644
index 0000000000..e3eb65c6e4
--- /dev/null
+++ b/docs/translations/api-docs/use-switch-style-hooks/use-switch-style-hooks.json
@@ -0,0 +1 @@
+{ "hookDescription": "", "parametersDescriptions": {}, "returnValueDescriptions": {} }
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 4f28fe800a..c7ee56a9da 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -280,6 +280,7 @@
     "/base-ui/react-slider/components-api/#slider": "Slider",
     "/base-ui/react-snackbar/components-api/#snackbar": "Snackbar",
     "/base-ui/react-switch/components-api/#switch": "Switch",
+    "/base-ui/react-switch/components-api/#switch-thumb": "SwitchThumb",
     "/base-ui/react-tabs/components-api/#tab": "Tab",
     "/base-ui/react-tabs/components-api/#tab-panel": "TabPanel",
     "/base-ui/react-table-pagination/components-api/#table-pagination": "TablePagination",

From eeb9d3cf4e8936cb146dbe40e7c42544c46c56d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Fri, 15 Mar 2024 15:12:13 +0100
Subject: [PATCH 24/32] Update the tests

---
 docs/pages/base-ui/api/switch-thumb.json      |  3 +
 docs/pages/base-ui/api/switch.json            |  3 +-
 packages/mui-base/src/Switch/Switch.test.tsx  | 62 ++-----------------
 .../mui-base/src/Switch/SwitchThumb.test.tsx  | 25 ++++++++
 4 files changed, 36 insertions(+), 57 deletions(-)
 create mode 100644 packages/mui-base/src/Switch/SwitchThumb.test.tsx

diff --git a/docs/pages/base-ui/api/switch-thumb.json b/docs/pages/base-ui/api/switch-thumb.json
index 136e44f171..f7bb1edb1d 100644
--- a/docs/pages/base-ui/api/switch-thumb.json
+++ b/docs/pages/base-ui/api/switch-thumb.json
@@ -6,7 +6,10 @@
     "import { SwitchThumb } from '@mui/base';"
   ],
   "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
   "muiName": "SwitchThumb",
+  "forwardsRefTo": "HTMLSpanElement",
   "filename": "/packages/mui-base/src/Switch/SwitchThumb.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/base-ui/react-switch/\">Switch</a></li></ul>",
diff --git a/docs/pages/base-ui/api/switch.json b/docs/pages/base-ui/api/switch.json
index 4eb24382b8..d862ce1337 100644
--- a/docs/pages/base-ui/api/switch.json
+++ b/docs/pages/base-ui/api/switch.json
@@ -19,8 +19,9 @@
   "imports": ["import { Switch } from '@mui/base/Switch';", "import { Switch } from '@mui/base';"],
   "classes": [],
   "spread": true,
-  "themeDefaultProps": null,
+  "themeDefaultProps": true,
   "muiName": "Switch",
+  "forwardsRefTo": "HTMLButtonElement",
   "filename": "/packages/mui-base/src/Switch/Switch.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/base-ui/react-switch/\">Switch</a></li></ul>",
diff --git a/packages/mui-base/src/Switch/Switch.test.tsx b/packages/mui-base/src/Switch/Switch.test.tsx
index 95eb28a365..4b8afc1a08 100644
--- a/packages/mui-base/src/Switch/Switch.test.tsx
+++ b/packages/mui-base/src/Switch/Switch.test.tsx
@@ -3,74 +3,24 @@ import { expect } from 'chai';
 import { spy } from 'sinon';
 import { createRenderer, act } from '@mui/internal-test-utils';
 import { Switch } from '@mui/base/Switch';
+import { describeConformance } from '../../test/describeConformance';
 
 describe('<Switch />', () => {
   const { render } = createRenderer();
 
-  // TODO: move to the conformance test suite
-
-  describe('prop: className', () => {
-    it('should apply the className when passed as a string', () => {
-      const { container } = render(<Switch className="test-class" />);
-      expect(container.firstElementChild?.className).to.contain('test-class');
-    });
-  });
+  describeConformance(<Switch />, () => ({
+    inheritComponent: 'button',
+    refInstanceof: window.HTMLButtonElement,
+    render,
+  }));
 
   describe('extra props', () => {
-    it('should spread extra props', () => {
-      const { container } = render(<Switch data-extra-prop="Lorem ipsum" />);
-      expect(container.firstElementChild as HTMLElement).to.have.attribute(
-        'data-extra-prop',
-        'Lorem ipsum',
-      );
-    });
-
     it('should not override the built-in attributes', () => {
       const { container } = render(<Switch data-state="checked" role="checkbox" />);
       expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'switch');
     });
   });
 
-  describe('prop: render', () => {
-    const Wrapper = React.forwardRef<HTMLButtonElement, { children?: React.ReactNode }>(
-      function Wrapper(props, forwardedRef) {
-        return (
-          <div data-testid="wrapper">
-            <button ref={forwardedRef} {...props} />
-          </div>
-        );
-      },
-    );
-
-    it('should render the custom component', () => {
-      const { container, getByTestId } = render(
-        <Switch render={(props) => <Wrapper {...props} />} data-testid="wrapped" />,
-      );
-
-      expect(container.firstElementChild).to.equal(getByTestId('wrapper'));
-    });
-
-    it('should pass the ref to the custom component', () => {
-      let instanceFromRef = null;
-
-      function Test() {
-        return (
-          <Switch
-            ref={(el) => {
-              instanceFromRef = el;
-            }}
-            render={(props) => <Wrapper {...props} />}
-            data-testid="wrapped"
-          />
-        );
-      }
-
-      render(<Test />);
-      expect(instanceFromRef!.tagName).to.equal('BUTTON');
-      expect(instanceFromRef!).to.have.attribute('data-testid', 'wrapped');
-    });
-  });
-
   it('should change its state when clicked', () => {
     const { getByRole } = render(<Switch />);
     const switchElement = getByRole('switch');
diff --git a/packages/mui-base/src/Switch/SwitchThumb.test.tsx b/packages/mui-base/src/Switch/SwitchThumb.test.tsx
new file mode 100644
index 0000000000..47c9a2ae7b
--- /dev/null
+++ b/packages/mui-base/src/Switch/SwitchThumb.test.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { createRenderer } from '@mui/internal-test-utils';
+import { Switch } from '@mui/base/Switch';
+import { describeConformance } from '../../test/describeConformance';
+import { SwitchContext } from './SwitchContext';
+
+const testContext = {
+  checked: false,
+  disabled: false,
+  readOnly: false,
+  required: false,
+};
+
+describe('<Switch.Thumb />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<Switch.Thumb />, () => ({
+    inheritComponent: 'span',
+    refInstanceof: window.HTMLSpanElement,
+    render: (node) => {
+      return render(<SwitchContext.Provider value={testContext}>{node}</SwitchContext.Provider>);
+    },
+    skip: ['reactTestRenderer'],
+  }));
+});

From 5a29a5a35015a54e056d106442c9ac3d4656dd84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Mon, 18 Mar 2024 10:03:12 +0100
Subject: [PATCH 25/32] JSDoc

---
 .../mui-base/src/utils/BaseUiComponentCommonProps.ts  | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/mui-base/src/utils/BaseUiComponentCommonProps.ts b/packages/mui-base/src/utils/BaseUiComponentCommonProps.ts
index 9765242884..76f7e4739c 100644
--- a/packages/mui-base/src/utils/BaseUiComponentCommonProps.ts
+++ b/packages/mui-base/src/utils/BaseUiComponentCommonProps.ts
@@ -1,5 +1,16 @@
+/**
+ * Shape of the render prop: a function that takes props to be spread on the element and component's state and returns a React element.
+ *
+ * @template Props Props to be spread on the rendered element.
+ * @template State Component's internal state.
+ */
 export type ComponentRenderFn<Props, State> = (props: Props, state: State) => React.ReactElement;
 
+/**
+ * Props shared by all Base UI components.
+ * Contains `className` (string or callback taking the component's state as an argument) and `render` (function to customize rendering).
+ 
+ */
 export type BaseUiComponentCommonProps<ElementType extends React.ElementType, OwnerState> = Omit<
   React.ComponentPropsWithoutRef<ElementType>,
   'className'

From 47dbeb8d1898a62ab8e9ba1afe4446cfa604899a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Tue, 19 Mar 2024 16:01:22 +0100
Subject: [PATCH 26/32] James' review

---
 docs/pages/base-ui/api/switch.json            |  1 +
 docs/pages/base-ui/api/use-switch.json        |  4 +---
 .../productBaseUI/BaseUICustomization.tsx     |  4 ++--
 .../api-docs-base/switch/switch.json          |  1 +
 .../api-docs/use-switch/use-switch.json       |  4 +---
 packages/mui-base/src/Switch/Switch.test.tsx  | 15 ++++++++++++--
 packages/mui-base/src/Switch/Switch.tsx       | 20 +++++++------------
 packages/mui-base/src/Switch/Switch.types.ts  |  4 ++++
 packages/mui-base/src/useSwitch/useSwitch.ts  |  4 +---
 .../mui-base/src/useSwitch/useSwitch.types.ts | 12 ++---------
 10 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/docs/pages/base-ui/api/switch.json b/docs/pages/base-ui/api/switch.json
index d862ce1337..77e7ab75a1 100644
--- a/docs/pages/base-ui/api/switch.json
+++ b/docs/pages/base-ui/api/switch.json
@@ -4,6 +4,7 @@
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
     "defaultChecked": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
+    "inputRef": { "type": { "name": "custom", "description": "ref" } },
     "onChange": {
       "type": { "name": "func" },
       "signature": {
diff --git a/docs/pages/base-ui/api/use-switch.json b/docs/pages/base-ui/api/use-switch.json
index be38f62fc6..30d66303ce 100644
--- a/docs/pages/base-ui/api/use-switch.json
+++ b/docs/pages/base-ui/api/use-switch.json
@@ -21,7 +21,6 @@
   },
   "returnValue": {
     "checked": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
-    "disabled": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "getButtonProps": {
       "type": {
         "name": "(externalProps?: React.HTMLAttributes&lt;HTMLButtonElement&gt;) =&gt; UseSwitchButtonSlotProps",
@@ -35,8 +34,7 @@
         "description": "(externalProps?: React.HTMLAttributes&lt;HTMLInputElement&gt;) =&gt; UseSwitchInputSlotProps"
       },
       "required": true
-    },
-    "readOnly": { "type": { "name": "boolean", "description": "boolean" }, "required": true }
+    }
   },
   "name": "useSwitch",
   "filename": "/packages/mui-base/src/useSwitch/useSwitch.ts",
diff --git a/docs/src/components/productBaseUI/BaseUICustomization.tsx b/docs/src/components/productBaseUI/BaseUICustomization.tsx
index 5307c1ea33..64faf4a040 100644
--- a/docs/src/components/productBaseUI/BaseUICustomization.tsx
+++ b/docs/src/components/productBaseUI/BaseUICustomization.tsx
@@ -177,11 +177,11 @@ const StyledSwitchThumb = styled('span')`
 `;
 
 function SwitchFromHook(props: UseSwitchParameters) {
-  const { getInputProps, getButtonProps, checked, disabled } = useSwitch(props);
+  const { getInputProps, getButtonProps, checked } = useSwitch(props);
 
   const stateAttributes = {
     'data-state': checked ? 'checked' : 'unchecked',
-    'data-disabled': disabled || undefined,
+    'data-disabled': props.disabled || undefined,
   };
 
   return (
diff --git a/docs/translations/api-docs-base/switch/switch.json b/docs/translations/api-docs-base/switch/switch.json
index 23d9e5c6e4..ee6712fc3c 100644
--- a/docs/translations/api-docs-base/switch/switch.json
+++ b/docs/translations/api-docs-base/switch/switch.json
@@ -9,6 +9,7 @@
       "description": "The default checked state. Use when the component is not controlled."
     },
     "disabled": { "description": "If <code>true</code>, the component is disabled." },
+    "inputRef": { "description": "Ref to the underlying input element." },
     "onChange": {
       "description": "Callback fired when the state is changed.",
       "typeDescriptions": {
diff --git a/docs/translations/api-docs/use-switch/use-switch.json b/docs/translations/api-docs/use-switch/use-switch.json
index 3ea96ee97e..24df869c8c 100644
--- a/docs/translations/api-docs/use-switch/use-switch.json
+++ b/docs/translations/api-docs/use-switch/use-switch.json
@@ -16,8 +16,6 @@
   },
   "returnValueDescriptions": {
     "checked": { "description": "If <code>true</code>, the component will be checked." },
-    "disabled": { "description": "If <code>true</code>, the component will be disabled." },
-    "getInputProps": { "description": "Resolver for the input slot&#39;s props." },
-    "readOnly": { "description": "If <code>true</code>, the component will be read only." }
+    "getInputProps": { "description": "Resolver for the input slot&#39;s props." }
   }
 }
diff --git a/packages/mui-base/src/Switch/Switch.test.tsx b/packages/mui-base/src/Switch/Switch.test.tsx
index 4b8afc1a08..534d7790e7 100644
--- a/packages/mui-base/src/Switch/Switch.test.tsx
+++ b/packages/mui-base/src/Switch/Switch.test.tsx
@@ -15,9 +15,10 @@ describe('<Switch />', () => {
   }));
 
   describe('extra props', () => {
-    it('should not override the built-in attributes', () => {
+    it('should override the built-in attributes', () => {
       const { container } = render(<Switch data-state="checked" role="checkbox" />);
-      expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'switch');
+      expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'checkbox');
+      expect(container.firstElementChild as HTMLElement).to.have.attribute('data-state', 'checked');
     });
   });
 
@@ -127,6 +128,16 @@ describe('<Switch />', () => {
     });
   });
 
+  describe('prop: inputRef', () => {
+    it('should be able to access the native input', () => {
+      const inputRef = React.createRef<HTMLInputElement>();
+      const { container } = render(<Switch inputRef={inputRef} />);
+      const internalInput = container.querySelector('input[type="checkbox"]')!;
+
+      expect(inputRef.current).to.equal(internalInput);
+    });
+  });
+
   it('should update its state if the underlying input is toggled', () => {
     const { getByRole, container } = render(<Switch />);
     const switchElement = getByRole('switch');
diff --git a/packages/mui-base/src/Switch/Switch.tsx b/packages/mui-base/src/Switch/Switch.tsx
index 62e0b90253..37692ba209 100644
--- a/packages/mui-base/src/Switch/Switch.tsx
+++ b/packages/mui-base/src/Switch/Switch.tsx
@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import refType from '@mui/utils/refType';
 import { useSwitch } from '../useSwitch';
 import { SwitchProps, SwitchOwnerState } from './Switch.types';
 import { resolveClassName } from '../utils/resolveClassName';
@@ -31,15 +32,16 @@ const Switch = React.forwardRef(function Switch(
     checked: checkedProp,
     className: classNameProp,
     defaultChecked,
-    disabled: disabledProp,
+    disabled = false,
+    inputRef,
     onChange,
-    readOnly: readOnlyProp,
+    readOnly = false,
     required = false,
     render = defaultRender,
     ...other
   } = props;
 
-  const { getInputProps, getButtonProps, checked, disabled, readOnly } = useSwitch(props);
+  const { getInputProps, getButtonProps, checked } = useSwitch(props);
 
   const ownerState: SwitchOwnerState = React.useMemo(
     () => ({
@@ -98,9 +100,9 @@ Switch.propTypes /* remove-proptypes */ = {
    */
   disabled: PropTypes.bool,
   /**
-   * @ignore
+   * Ref to the underlying input element.
    */
-  id: PropTypes.string,
+  inputRef: refType,
   /**
    * @ignore
    */
@@ -129,14 +131,6 @@ Switch.propTypes /* remove-proptypes */ = {
    * @default false
    */
   required: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  value: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.string),
-    PropTypes.number,
-    PropTypes.string,
-  ]),
 } as any;
 
 export { Switch };
diff --git a/packages/mui-base/src/Switch/Switch.types.ts b/packages/mui-base/src/Switch/Switch.types.ts
index c674d4b7ba..9389022b19 100644
--- a/packages/mui-base/src/Switch/Switch.types.ts
+++ b/packages/mui-base/src/Switch/Switch.types.ts
@@ -24,6 +24,10 @@ export interface SwitchProps
    * @default false
    */
   disabled?: boolean;
+  /**
+   * Ref to the underlying input element.
+   */
+  inputRef?: React.Ref<HTMLInputElement>;
   /**
    * Callback fired when the state is changed.
    *
diff --git a/packages/mui-base/src/useSwitch/useSwitch.ts b/packages/mui-base/src/useSwitch/useSwitch.ts
index bcc5f8fae8..f863e75686 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.ts
@@ -63,12 +63,12 @@ export function useSwitch(params: UseSwitchParameters): UseSwitchReturnValue {
     };
 
   const getButtonProps: UseSwitchReturnValue['getButtonProps'] = (otherProps = {}) => ({
-    ...otherProps,
     type: 'button',
     role: 'switch',
     'aria-checked': checked,
     'aria-disabled': disabled,
     'aria-readonly': readOnly,
+    ...otherProps,
     onClick: createHandleClick(otherProps),
   });
 
@@ -88,9 +88,7 @@ export function useSwitch(params: UseSwitchParameters): UseSwitchReturnValue {
 
   return {
     checked,
-    disabled: Boolean(disabled),
     getButtonProps,
     getInputProps,
-    readOnly: Boolean(readOnly),
   };
 }
diff --git a/packages/mui-base/src/useSwitch/useSwitch.types.ts b/packages/mui-base/src/useSwitch/useSwitch.types.ts
index 0cf27ae9e3..3b811ef092 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.types.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.types.ts
@@ -56,8 +56,8 @@ export type UseSwitchInputSlotProps<TOther = {}> = Omit<TOther, keyof UseSwitchI
 
 interface UseSwitchButtonSlotOwnProps {
   onClick: React.MouseEventHandler<HTMLButtonElement>;
-  type: 'button';
-  role: 'switch';
+  type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  role: React.AriaRole;
   'aria-disabled': React.AriaAttributes['aria-disabled'];
   'aria-checked': React.AriaAttributes['aria-checked'];
   'aria-readonly': React.AriaAttributes['aria-readonly'];
@@ -74,10 +74,6 @@ export interface UseSwitchReturnValue {
    * If `true`, the component will be checked.
    */
   checked: boolean;
-  /**
-   * If `true`, the component will be disabled.
-   */
-  disabled: boolean;
   /**
    * Resolver for the input slot's props.
    * @param externalProps props for the input slot
@@ -89,8 +85,4 @@ export interface UseSwitchReturnValue {
   getButtonProps: (
     externalProps?: React.HTMLAttributes<HTMLButtonElement>,
   ) => UseSwitchButtonSlotProps;
-  /**
-   * If `true`, the component will be read only.
-   */
-  readOnly: boolean;
 }

From 3e3b15c7e7c2fdff9a63e85ca22ebf87b5dc26c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Tue, 19 Mar 2024 16:10:11 +0100
Subject: [PATCH 27/32] Memoize event handler creators

---
 packages/mui-base/src/useSwitch/useSwitch.ts | 107 +++++++++++--------
 1 file changed, 60 insertions(+), 47 deletions(-)

diff --git a/packages/mui-base/src/useSwitch/useSwitch.ts b/packages/mui-base/src/useSwitch/useSwitch.ts
index f863e75686..21f9b4d2de 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.ts
@@ -38,57 +38,70 @@ export function useSwitch(params: UseSwitchParameters): UseSwitchReturnValue {
     state: 'checked',
   });
 
-  const createHandleInputChange =
-    (otherProps: React.InputHTMLAttributes<HTMLInputElement>) =>
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      // Workaround for https://github.com/facebook/react/issues/9023
-      if (event.nativeEvent.defaultPrevented) {
-        return;
-      }
+  const createHandleButtonClick = React.useCallback(
+    (otherProps: React.ButtonHTMLAttributes<HTMLButtonElement>) =>
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        otherProps.onClick?.(event);
+        if (event.defaultPrevented || readOnly) {
+          return;
+        }
 
-      setCheckedState(event.target.checked);
-      onChange?.(event);
-      otherProps.onChange?.(event);
-    };
+        inputRef.current?.click();
+      },
+    [readOnly],
+  );
 
-  const createHandleClick =
-    (otherProps: React.ButtonHTMLAttributes<HTMLButtonElement>) =>
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      otherProps.onClick?.(event);
-      if (event.defaultPrevented || readOnly) {
-        return;
-      }
+  const getButtonProps: UseSwitchReturnValue['getButtonProps'] = React.useCallback(
+    (otherProps = {}) => ({
+      type: 'button',
+      role: 'switch',
+      'aria-checked': checked,
+      'aria-disabled': disabled,
+      'aria-readonly': readOnly,
+      ...otherProps,
+      onClick: createHandleButtonClick(otherProps),
+    }),
+    [checked, disabled, readOnly, createHandleButtonClick],
+  );
 
-      inputRef.current?.click();
-    };
+  const createHandleInputChange = React.useCallback(
+    (otherProps: React.InputHTMLAttributes<HTMLInputElement>) =>
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        // Workaround for https://github.com/facebook/react/issues/9023
+        if (event.nativeEvent.defaultPrevented) {
+          return;
+        }
 
-  const getButtonProps: UseSwitchReturnValue['getButtonProps'] = (otherProps = {}) => ({
-    type: 'button',
-    role: 'switch',
-    'aria-checked': checked,
-    'aria-disabled': disabled,
-    'aria-readonly': readOnly,
-    ...otherProps,
-    onClick: createHandleClick(otherProps),
-  });
+        setCheckedState(event.target.checked);
+        onChange?.(event);
+        otherProps.onChange?.(event);
+      },
+    [onChange, setCheckedState],
+  );
 
-  const getInputProps: UseSwitchReturnValue['getInputProps'] = (otherProps = {}) => ({
-    checked,
-    disabled,
-    name,
-    required,
-    style: visuallyHidden,
-    tabIndex: -1,
-    type: 'checkbox',
-    'aria-hidden': true,
-    ...otherProps,
-    ref: handleInputRef,
-    onChange: createHandleInputChange(otherProps),
-  });
+  const getInputProps: UseSwitchReturnValue['getInputProps'] = React.useCallback(
+    (otherProps = {}) => ({
+      checked,
+      disabled,
+      name,
+      required,
+      style: visuallyHidden,
+      tabIndex: -1,
+      type: 'checkbox',
+      'aria-hidden': true,
+      ...otherProps,
+      ref: handleInputRef,
+      onChange: createHandleInputChange(otherProps),
+    }),
+    [checked, disabled, name, required, createHandleInputChange, handleInputRef],
+  );
 
-  return {
-    checked,
-    getButtonProps,
-    getInputProps,
-  };
+  return React.useMemo(
+    () => ({
+      checked,
+      getButtonProps,
+      getInputProps,
+    }),
+    [checked, getButtonProps, getInputProps],
+  );
 }

From 83b67c07018c876c5e4ee50513a558a9fd14b392 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Wed, 20 Mar 2024 10:15:20 +0100
Subject: [PATCH 28/32] Update the API docs

---
 docs/pages/base-ui/api/switch-thumb.json      |  5 +++-
 .../switch-thumb/switch-thumb.json            | 11 ++++++++-
 .../api-docs/use-switch/use-switch.json       |  1 +
 packages/mui-base/src/Switch/SwitchThumb.tsx  | 23 ++++++++++++++++++-
 .../mui-base/src/useSwitch/useSwitch.types.ts |  5 ++++
 5 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/docs/pages/base-ui/api/switch-thumb.json b/docs/pages/base-ui/api/switch-thumb.json
index f7bb1edb1d..3960248469 100644
--- a/docs/pages/base-ui/api/switch-thumb.json
+++ b/docs/pages/base-ui/api/switch-thumb.json
@@ -1,5 +1,8 @@
 {
-  "props": {},
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "func" } }
+  },
   "name": "SwitchThumb",
   "imports": [
     "import { SwitchThumb } from '@mui/base/Switch';",
diff --git a/docs/translations/api-docs-base/switch-thumb/switch-thumb.json b/docs/translations/api-docs-base/switch-thumb/switch-thumb.json
index f93d4cbd8c..4bc12cf1e0 100644
--- a/docs/translations/api-docs-base/switch-thumb/switch-thumb.json
+++ b/docs/translations/api-docs-base/switch-thumb/switch-thumb.json
@@ -1 +1,10 @@
-{ "componentDescription": "", "propDescriptions": {}, "classDescriptions": {} }
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "className": {
+      "description": "Class names applied to the element or a function that returns them based on the component&#39;s state."
+    },
+    "render": { "description": "A function to customize rendering of the component." }
+  },
+  "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs/use-switch/use-switch.json b/docs/translations/api-docs/use-switch/use-switch.json
index 24df869c8c..0f66884581 100644
--- a/docs/translations/api-docs/use-switch/use-switch.json
+++ b/docs/translations/api-docs/use-switch/use-switch.json
@@ -16,6 +16,7 @@
   },
   "returnValueDescriptions": {
     "checked": { "description": "If <code>true</code>, the component will be checked." },
+    "getButtonProps": { "description": "Resolver for the button slot&#39;s props." },
     "getInputProps": { "description": "Resolver for the input slot&#39;s props." }
   }
 }
diff --git a/packages/mui-base/src/Switch/SwitchThumb.tsx b/packages/mui-base/src/Switch/SwitchThumb.tsx
index 207cd11e75..401972106f 100644
--- a/packages/mui-base/src/Switch/SwitchThumb.tsx
+++ b/packages/mui-base/src/Switch/SwitchThumb.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { SwitchThumbProps } from './Switch.types';
 import { SwitchContext } from './SwitchContext';
 import { resolveClassName } from '../utils/resolveClassName';
@@ -12,7 +13,8 @@ const SwitchThumb = React.forwardRef(function SwitchThumb(
   props: SwitchThumbProps,
   forwardedRef: React.ForwardedRef<HTMLSpanElement>,
 ) {
-  const { render = defaultRender, className: classNameProp, ...other } = props;
+  const { render: renderProp, className: classNameProp, ...other } = props;
+  const render = renderProp ?? defaultRender;
 
   const ownerState = React.useContext(SwitchContext);
   if (ownerState === null) {
@@ -32,4 +34,23 @@ const SwitchThumb = React.forwardRef(function SwitchThumb(
   return render(elementProps, ownerState);
 });
 
+SwitchThumb.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Class names applied to the element or a function that returns them based on the component's state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.func,
+} as any;
+
 export { SwitchThumb };
diff --git a/packages/mui-base/src/useSwitch/useSwitch.types.ts b/packages/mui-base/src/useSwitch/useSwitch.types.ts
index 3b811ef092..cc3e667226 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.types.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.types.ts
@@ -82,6 +82,11 @@ export interface UseSwitchReturnValue {
   getInputProps: (
     externalProps?: React.HTMLAttributes<HTMLInputElement>,
   ) => UseSwitchInputSlotProps;
+  /**
+   * Resolver for the button slot's props.
+   * @param externalProps props for the input slot
+   * @returns props that should be spread on the button slot
+   */
   getButtonProps: (
     externalProps?: React.HTMLAttributes<HTMLButtonElement>,
   ) => UseSwitchButtonSlotProps;

From 277bff8fa39ea5c5704ddb875a9fe0ca2641813f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Thu, 21 Mar 2024 07:54:06 +0100
Subject: [PATCH 29/32] Rename slot to element

---
 docs/pages/base-ui/api/use-switch.json        |  8 ++---
 .../api-docs/use-switch/use-switch.json       |  4 +--
 .../mui-base/src/useSwitch/useSwitch.types.ts | 33 ++++++++++---------
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/docs/pages/base-ui/api/use-switch.json b/docs/pages/base-ui/api/use-switch.json
index 30d66303ce..a73fefc2fe 100644
--- a/docs/pages/base-ui/api/use-switch.json
+++ b/docs/pages/base-ui/api/use-switch.json
@@ -23,15 +23,15 @@
     "checked": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "getButtonProps": {
       "type": {
-        "name": "(externalProps?: React.HTMLAttributes&lt;HTMLButtonElement&gt;) =&gt; UseSwitchButtonSlotProps",
-        "description": "(externalProps?: React.HTMLAttributes&lt;HTMLButtonElement&gt;) =&gt; UseSwitchButtonSlotProps"
+        "name": "(externalProps?: React.HTMLAttributes&lt;HTMLButtonElement&gt;) =&gt; UseSwitchButtonElementProps",
+        "description": "(externalProps?: React.HTMLAttributes&lt;HTMLButtonElement&gt;) =&gt; UseSwitchButtonElementProps"
       },
       "required": true
     },
     "getInputProps": {
       "type": {
-        "name": "(externalProps?: React.HTMLAttributes&lt;HTMLInputElement&gt;) =&gt; UseSwitchInputSlotProps",
-        "description": "(externalProps?: React.HTMLAttributes&lt;HTMLInputElement&gt;) =&gt; UseSwitchInputSlotProps"
+        "name": "(externalProps?: React.HTMLAttributes&lt;HTMLInputElement&gt;) =&gt; UseSwitchInputElementProps",
+        "description": "(externalProps?: React.HTMLAttributes&lt;HTMLInputElement&gt;) =&gt; UseSwitchInputElementProps"
       },
       "required": true
     }
diff --git a/docs/translations/api-docs/use-switch/use-switch.json b/docs/translations/api-docs/use-switch/use-switch.json
index 0f66884581..00d8acb022 100644
--- a/docs/translations/api-docs/use-switch/use-switch.json
+++ b/docs/translations/api-docs/use-switch/use-switch.json
@@ -16,7 +16,7 @@
   },
   "returnValueDescriptions": {
     "checked": { "description": "If <code>true</code>, the component will be checked." },
-    "getButtonProps": { "description": "Resolver for the button slot&#39;s props." },
-    "getInputProps": { "description": "Resolver for the input slot&#39;s props." }
+    "getButtonProps": { "description": "Resolver for the button element&#39;s props." },
+    "getInputProps": { "description": "Resolver for the input element&#39;s props." }
   }
 }
diff --git a/packages/mui-base/src/useSwitch/useSwitch.types.ts b/packages/mui-base/src/useSwitch/useSwitch.types.ts
index cc3e667226..2be42439d8 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.types.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.types.ts
@@ -39,7 +39,7 @@ export interface UseSwitchParameters {
   required?: boolean;
 }
 
-interface UseSwitchInputSlotOwnProps {
+interface UseSwitchInputElementOwnProps {
   checked: boolean;
   disabled?: boolean;
   name?: string;
@@ -51,10 +51,13 @@ interface UseSwitchInputSlotOwnProps {
   onChange: React.ChangeEventHandler<HTMLInputElement>;
 }
 
-export type UseSwitchInputSlotProps<TOther = {}> = Omit<TOther, keyof UseSwitchInputSlotOwnProps> &
-  UseSwitchInputSlotOwnProps;
+export type UseSwitchInputElementProps<TOther = {}> = Omit<
+  TOther,
+  keyof UseSwitchInputElementOwnProps
+> &
+  UseSwitchInputElementOwnProps;
 
-interface UseSwitchButtonSlotOwnProps {
+interface UseSwitchButtonElementOwnProps {
   onClick: React.MouseEventHandler<HTMLButtonElement>;
   type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
   role: React.AriaRole;
@@ -63,11 +66,11 @@ interface UseSwitchButtonSlotOwnProps {
   'aria-readonly': React.AriaAttributes['aria-readonly'];
 }
 
-export type UseSwitchButtonSlotProps<TOther = {}> = Omit<
+export type UseSwitchButtonElementProps<TOther = {}> = Omit<
   TOther,
-  keyof UseSwitchButtonSlotOwnProps
+  keyof UseSwitchButtonElementOwnProps
 > &
-  UseSwitchButtonSlotOwnProps;
+  UseSwitchButtonElementOwnProps;
 
 export interface UseSwitchReturnValue {
   /**
@@ -75,19 +78,19 @@ export interface UseSwitchReturnValue {
    */
   checked: boolean;
   /**
-   * Resolver for the input slot's props.
-   * @param externalProps props for the input slot
-   * @returns props that should be spread on the input slot
+   * Resolver for the input element's props.
+   * @param externalProps Additional props for the input element
+   * @returns Props that should be spread on the input element
    */
   getInputProps: (
     externalProps?: React.HTMLAttributes<HTMLInputElement>,
-  ) => UseSwitchInputSlotProps;
+  ) => UseSwitchInputElementProps;
   /**
-   * Resolver for the button slot's props.
-   * @param externalProps props for the input slot
-   * @returns props that should be spread on the button slot
+   * Resolver for the button element's props.
+   * @param externalProps Additional props for the input element
+   * @returns Props that should be spread on the button element
    */
   getButtonProps: (
     externalProps?: React.HTMLAttributes<HTMLButtonElement>,
-  ) => UseSwitchButtonSlotProps;
+  ) => UseSwitchButtonElementProps;
 }

From 165ab0e679e3bcd558de42f5db4d0b3e26de4c16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Thu, 21 Mar 2024 07:59:26 +0100
Subject: [PATCH 30/32] Inline event handlers

---
 packages/mui-base/src/useSwitch/useSwitch.ts | 46 ++++++++------------
 1 file changed, 17 insertions(+), 29 deletions(-)

diff --git a/packages/mui-base/src/useSwitch/useSwitch.ts b/packages/mui-base/src/useSwitch/useSwitch.ts
index 21f9b4d2de..01da8fbb31 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.ts
@@ -38,19 +38,6 @@ export function useSwitch(params: UseSwitchParameters): UseSwitchReturnValue {
     state: 'checked',
   });
 
-  const createHandleButtonClick = React.useCallback(
-    (otherProps: React.ButtonHTMLAttributes<HTMLButtonElement>) =>
-      (event: React.MouseEvent<HTMLButtonElement>) => {
-        otherProps.onClick?.(event);
-        if (event.defaultPrevented || readOnly) {
-          return;
-        }
-
-        inputRef.current?.click();
-      },
-    [readOnly],
-  );
-
   const getButtonProps: UseSwitchReturnValue['getButtonProps'] = React.useCallback(
     (otherProps = {}) => ({
       type: 'button',
@@ -59,24 +46,16 @@ export function useSwitch(params: UseSwitchParameters): UseSwitchReturnValue {
       'aria-disabled': disabled,
       'aria-readonly': readOnly,
       ...otherProps,
-      onClick: createHandleButtonClick(otherProps),
-    }),
-    [checked, disabled, readOnly, createHandleButtonClick],
-  );
-
-  const createHandleInputChange = React.useCallback(
-    (otherProps: React.InputHTMLAttributes<HTMLInputElement>) =>
-      (event: React.ChangeEvent<HTMLInputElement>) => {
-        // Workaround for https://github.com/facebook/react/issues/9023
-        if (event.nativeEvent.defaultPrevented) {
+      onClick: (event: React.MouseEvent<HTMLButtonElement>) => {
+        otherProps.onClick?.(event);
+        if (event.defaultPrevented || readOnly) {
           return;
         }
 
-        setCheckedState(event.target.checked);
-        onChange?.(event);
-        otherProps.onChange?.(event);
+        inputRef.current?.click();
       },
-    [onChange, setCheckedState],
+    }),
+    [checked, disabled, readOnly],
   );
 
   const getInputProps: UseSwitchReturnValue['getInputProps'] = React.useCallback(
@@ -91,9 +70,18 @@ export function useSwitch(params: UseSwitchParameters): UseSwitchReturnValue {
       'aria-hidden': true,
       ...otherProps,
       ref: handleInputRef,
-      onChange: createHandleInputChange(otherProps),
+      onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
+        // Workaround for https://github.com/facebook/react/issues/9023
+        if (event.nativeEvent.defaultPrevented) {
+          return;
+        }
+
+        setCheckedState(event.target.checked);
+        onChange?.(event);
+        otherProps.onChange?.(event);
+      },
     }),
-    [checked, disabled, name, required, createHandleInputChange, handleInputRef],
+    [checked, disabled, name, required, handleInputRef, onChange, setCheckedState],
   );
 
   return React.useMemo(

From 9ffee33b596420326d320be8eb9fa82f8bb22ae7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Thu, 21 Mar 2024 09:02:01 +0100
Subject: [PATCH 31/32] Reorganize tests

---
 packages/mui-base/src/Switch/Switch.test.tsx | 238 ++++++++++---------
 1 file changed, 128 insertions(+), 110 deletions(-)

diff --git a/packages/mui-base/src/Switch/Switch.test.tsx b/packages/mui-base/src/Switch/Switch.test.tsx
index 534d7790e7..304ba8855a 100644
--- a/packages/mui-base/src/Switch/Switch.test.tsx
+++ b/packages/mui-base/src/Switch/Switch.test.tsx
@@ -14,68 +14,98 @@ describe('<Switch />', () => {
     render,
   }));
 
-  describe('extra props', () => {
-    it('should override the built-in attributes', () => {
-      const { container } = render(<Switch data-state="checked" role="checkbox" />);
-      expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'checkbox');
-      expect(container.firstElementChild as HTMLElement).to.have.attribute('data-state', 'checked');
-    });
-  });
+  describe('interaction', () => {
+    it('should change its state when clicked', () => {
+      const { getByRole } = render(<Switch />);
+      const switchElement = getByRole('switch');
 
-  it('should change its state when clicked', () => {
-    const { getByRole } = render(<Switch />);
-    const switchElement = getByRole('switch');
+      expect(switchElement).to.have.attribute('aria-checked', 'false');
 
-    expect(switchElement).to.have.attribute('aria-checked', 'false');
+      act(() => {
+        switchElement.click();
+      });
 
-    act(() => {
-      switchElement.click();
+      expect(switchElement).to.have.attribute('aria-checked', 'true');
     });
 
-    expect(switchElement).to.have.attribute('aria-checked', 'true');
-  });
+    it('should update its state when changed from outside', () => {
+      function Test() {
+        const [checked, setChecked] = React.useState(false);
+        return (
+          <div>
+            <button onClick={() => setChecked((c) => !c)}>Toggle</button>
+            <Switch checked={checked} />;
+          </div>
+        );
+      }
+
+      const { getByRole, getByText } = render(<Test />);
+      const switchElement = getByRole('switch');
+      const button = getByText('Toggle');
 
-  it('should update its state when changed from outside', () => {
-    function Test() {
-      const [checked, setChecked] = React.useState(false);
-      return (
-        <div>
-          <button onClick={() => setChecked((c) => !c)}>Toggle</button>
-          <Switch checked={checked} />;
-        </div>
-      );
-    }
+      expect(switchElement).to.have.attribute('aria-checked', 'false');
+      act(() => {
+        button.click();
+      });
 
-    const { getByRole, getByText } = render(<Test />);
-    const switchElement = getByRole('switch');
-    const button = getByText('Toggle');
+      expect(switchElement).to.have.attribute('aria-checked', 'true');
 
-    expect(switchElement).to.have.attribute('aria-checked', 'false');
-    act(() => {
-      button.click();
+      act(() => {
+        button.click();
+      });
+
+      expect(switchElement).to.have.attribute('aria-checked', 'false');
     });
 
-    expect(switchElement).to.have.attribute('aria-checked', 'true');
+    it('should update its state if the underlying input is toggled', () => {
+      const { getByRole, container } = render(<Switch />);
+      const switchElement = getByRole('switch');
+      const internalInput = container.querySelector('input[type="checkbox"]')! as HTMLInputElement;
+
+      act(() => {
+        internalInput.click();
+      });
 
-    act(() => {
-      button.click();
+      expect(switchElement).to.have.attribute('aria-checked', 'true');
     });
+  });
 
-    expect(switchElement).to.have.attribute('aria-checked', 'false');
+  describe('extra props', () => {
+    it('should override the built-in attributes', () => {
+      const { container } = render(<Switch data-state="checked" role="checkbox" />);
+      expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'checkbox');
+      expect(container.firstElementChild as HTMLElement).to.have.attribute('data-state', 'checked');
+    });
   });
 
-  it('should call onChange when clicked', () => {
-    const handleChange = spy();
-    const { getByRole, container } = render(<Switch onChange={handleChange} />);
-    const switchElement = getByRole('switch');
-    const internalInput = container.querySelector('input[type="checkbox"]')!;
+  describe('prop: onChange', () => {
+    it('should call onChange when clicked', () => {
+      const handleChange = spy();
+      const { getByRole, container } = render(<Switch onChange={handleChange} />);
+      const switchElement = getByRole('switch');
+      const internalInput = container.querySelector('input[type="checkbox"]')!;
+
+      act(() => {
+        switchElement.click();
+      });
 
-    act(() => {
-      switchElement.click();
+      expect(handleChange.callCount).to.equal(1);
+      expect(handleChange.firstCall.args[0].target).to.equal(internalInput);
     });
+  });
+
+  describe('prop: onClick', () => {
+    it('should call onClick when clicked', () => {
+      const handleClick = spy();
+      const { getByRole } = render(<Switch onClick={handleClick} />);
+      const switchElement = getByRole('switch');
+
+      act(() => {
+        switchElement.click();
+      });
 
-    expect(handleChange.callCount).to.equal(1);
-    expect(handleChange.firstCall.args[0].target).to.equal(internalInput);
+      expect(handleClick.callCount).to.equal(1);
+    });
   });
 
   describe('prop: disabled', () => {
@@ -138,46 +168,6 @@ describe('<Switch />', () => {
     });
   });
 
-  it('should update its state if the underlying input is toggled', () => {
-    const { getByRole, container } = render(<Switch />);
-    const switchElement = getByRole('switch');
-    const internalInput = container.querySelector('input[type="checkbox"]')! as HTMLInputElement;
-
-    act(() => {
-      internalInput.click();
-    });
-
-    expect(switchElement).to.have.attribute('aria-checked', 'true');
-  });
-
-  it('should place the style hooks on the root and the thumb', () => {
-    const { getByRole } = render(
-      <Switch defaultChecked disabled readOnly required>
-        <Switch.Thumb />
-      </Switch>,
-    );
-
-    const switchElement = getByRole('switch');
-    const thumb = switchElement.querySelector('span');
-
-    expect(switchElement).to.have.attribute('data-state', 'checked');
-    expect(switchElement).to.have.attribute('data-disabled', 'true');
-    expect(switchElement).to.have.attribute('data-readonly', 'true');
-    expect(switchElement).to.have.attribute('data-required', 'true');
-
-    expect(thumb).to.have.attribute('data-state', 'checked');
-    expect(thumb).to.have.attribute('data-disabled', 'true');
-    expect(thumb).to.have.attribute('data-readonly', 'true');
-    expect(thumb).to.have.attribute('data-required', 'true');
-  });
-
-  it('should set the name attribute on the input', () => {
-    const { container } = render(<Switch name="switch-name" />);
-    const internalInput = container.querySelector('input[type="checkbox"]')! as HTMLInputElement;
-
-    expect(internalInput).to.have.attribute('name', 'switch-name');
-  });
-
   describe('form handling', () => {
     it('should toggle the switch when a parent label is clicked', () => {
       const { getByTestId, getByRole } = render(
@@ -220,42 +210,70 @@ describe('<Switch />', () => {
 
       expect(switchElement).to.have.attribute('aria-checked', 'true');
     });
-  });
 
-  it('should include the switch value in the form submission', function test() {
-    if (/jsdom/.test(window.navigator.userAgent)) {
-      // FormData is not available in JSDOM
-      this.skip();
-    }
+    it('should include the switch value in the form submission', function test() {
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        // FormData is not available in JSDOM
+        this.skip();
+      }
+
+      let stringifiedFormData = '';
+
+      const { getByRole } = render(
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            const formData = new FormData(event.currentTarget);
+            stringifiedFormData = new URLSearchParams(formData as any).toString();
+          }}
+        >
+          <Switch name="test-switch" />
+          <button type="submit">Submit</button>
+        </form>,
+      );
 
-    let stringifiedFormData = '';
+      const switchElement = getByRole('switch');
+      const submitButton = getByRole('button')!;
 
+      submitButton.click();
+
+      expect(stringifiedFormData).to.equal('test-switch=off');
+
+      act(() => {
+        switchElement.click();
+      });
+
+      submitButton.click();
+
+      expect(stringifiedFormData).to.equal('test-switch=on');
+    });
+  });
+
+  it('should place the style hooks on the root and the thumb', () => {
     const { getByRole } = render(
-      <form
-        onSubmit={(event) => {
-          event.preventDefault();
-          const formData = new FormData(event.currentTarget);
-          stringifiedFormData = new URLSearchParams(formData as any).toString();
-        }}
-      >
-        <Switch name="test-switch" />
-        <button type="submit">Submit</button>
-      </form>,
+      <Switch defaultChecked disabled readOnly required>
+        <Switch.Thumb />
+      </Switch>,
     );
 
     const switchElement = getByRole('switch');
-    const submitButton = getByRole('button')!;
-
-    submitButton.click();
+    const thumb = switchElement.querySelector('span');
 
-    expect(stringifiedFormData).to.equal('test-switch=off');
+    expect(switchElement).to.have.attribute('data-state', 'checked');
+    expect(switchElement).to.have.attribute('data-disabled', 'true');
+    expect(switchElement).to.have.attribute('data-readonly', 'true');
+    expect(switchElement).to.have.attribute('data-required', 'true');
 
-    act(() => {
-      switchElement.click();
-    });
+    expect(thumb).to.have.attribute('data-state', 'checked');
+    expect(thumb).to.have.attribute('data-disabled', 'true');
+    expect(thumb).to.have.attribute('data-readonly', 'true');
+    expect(thumb).to.have.attribute('data-required', 'true');
+  });
 
-    submitButton.click();
+  it('should set the name attribute on the input', () => {
+    const { container } = render(<Switch name="switch-name" />);
+    const internalInput = container.querySelector('input[type="checkbox"]')! as HTMLInputElement;
 
-    expect(stringifiedFormData).to.equal('test-switch=on');
+    expect(internalInput).to.have.attribute('name', 'switch-name');
   });
 });

From 07798cdba549e3e227b9122de0febf0176c55831 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Thu, 21 Mar 2024 19:26:31 +0100
Subject: [PATCH 32/32] API docs

---
 docs/pages/base-ui/api/switch.json            |  1 +
 .../base-ui/api/use-switch-style-hooks.json   | 11 -----
 docs/pages/base-ui/api/use-switch.json        |  6 +--
 .../api-docs-base/switch/switch.json          | 13 ++++--
 .../api-docs/use-switch/use-switch.json       | 12 +++--
 packages/mui-base/src/Switch/Switch.tsx       | 11 ++---
 packages/mui-base/src/Switch/Switch.types.ts  | 44 ++-----------------
 .../src/Switch/useSwitchStyleHooks.ts         |  6 +--
 .../mui-base/src/useSwitch/useSwitch.types.ts | 21 +++++++--
 9 files changed, 49 insertions(+), 76 deletions(-)
 delete mode 100644 docs/pages/base-ui/api/use-switch-style-hooks.json

diff --git a/docs/pages/base-ui/api/switch.json b/docs/pages/base-ui/api/switch.json
index 77e7ab75a1..dc6f6d24d1 100644
--- a/docs/pages/base-ui/api/switch.json
+++ b/docs/pages/base-ui/api/switch.json
@@ -5,6 +5,7 @@
     "defaultChecked": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "inputRef": { "type": { "name": "custom", "description": "ref" } },
+    "name": { "type": { "name": "string" } },
     "onChange": {
       "type": { "name": "func" },
       "signature": {
diff --git a/docs/pages/base-ui/api/use-switch-style-hooks.json b/docs/pages/base-ui/api/use-switch-style-hooks.json
deleted file mode 100644
index 3a79771d7d..0000000000
--- a/docs/pages/base-ui/api/use-switch-style-hooks.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "parameters": {},
-  "returnValue": {},
-  "name": "useSwitchStyleHooks",
-  "filename": "/packages/mui-base/src/Switch/useSwitchStyleHooks.ts",
-  "imports": [
-    "import { useSwitchStyleHooks } from '@mui/base/Switch';",
-    "import { useSwitchStyleHooks } from '@mui/base';"
-  ],
-  "demos": "<ul></ul>"
-}
diff --git a/docs/pages/base-ui/api/use-switch.json b/docs/pages/base-ui/api/use-switch.json
index a73fefc2fe..3eb6fe0a23 100644
--- a/docs/pages/base-ui/api/use-switch.json
+++ b/docs/pages/base-ui/api/use-switch.json
@@ -2,7 +2,7 @@
   "parameters": {
     "checked": { "type": { "name": "boolean", "description": "boolean" } },
     "defaultChecked": { "type": { "name": "boolean", "description": "boolean" } },
-    "disabled": { "type": { "name": "boolean", "description": "boolean" } },
+    "disabled": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
     "inputRef": {
       "type": {
         "name": "React.Ref&lt;HTMLInputElement&gt;",
@@ -16,8 +16,8 @@
         "description": "React.ChangeEventHandler&lt;HTMLInputElement&gt;"
       }
     },
-    "readOnly": { "type": { "name": "boolean", "description": "boolean" } },
-    "required": { "type": { "name": "boolean", "description": "boolean" } }
+    "readOnly": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
+    "required": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" }
   },
   "returnValue": {
     "checked": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
diff --git a/docs/translations/api-docs-base/switch/switch.json b/docs/translations/api-docs-base/switch/switch.json
index ee6712fc3c..88ca92182a 100644
--- a/docs/translations/api-docs-base/switch/switch.json
+++ b/docs/translations/api-docs-base/switch/switch.json
@@ -1,25 +1,30 @@
 {
   "componentDescription": "The foundation for building custom-styled switches.",
   "propDescriptions": {
-    "checked": { "description": "If <code>true</code>, the component is checked." },
+    "checked": { "description": "If <code>true</code>, the switch is checked." },
     "className": {
       "description": "Class names applied to the element or a function that returns them based on the component&#39;s state."
     },
     "defaultChecked": {
       "description": "The default checked state. Use when the component is not controlled."
     },
-    "disabled": { "description": "If <code>true</code>, the component is disabled." },
+    "disabled": {
+      "description": "If <code>true</code>, the component is disabled and can&#39;t be interacted with."
+    },
     "inputRef": { "description": "Ref to the underlying input element." },
+    "name": { "description": "Name of the underlying input element." },
     "onChange": {
       "description": "Callback fired when the state is changed.",
       "typeDescriptions": {
         "event": "The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string). You can pull out the new checked state by accessing <code>event.target.checked</code> (boolean)."
       }
     },
-    "readOnly": { "description": "If <code>true</code>, the component is read only." },
+    "readOnly": {
+      "description": "If <code>true</code>, the component is read-only. Functionally, this is equivalent to being disabled, but the assistive technologies will announce this differently."
+    },
     "render": { "description": "A function to customize rendering of the component." },
     "required": {
-      "description": "If <code>true</code>, the <code>input</code> element is required."
+      "description": "If <code>true</code>, the switch must be checked for the browser validation to pass."
     }
   },
   "classDescriptions": {}
diff --git a/docs/translations/api-docs/use-switch/use-switch.json b/docs/translations/api-docs/use-switch/use-switch.json
index 00d8acb022..a7c78dfc11 100644
--- a/docs/translations/api-docs/use-switch/use-switch.json
+++ b/docs/translations/api-docs/use-switch/use-switch.json
@@ -1,17 +1,21 @@
 {
   "hookDescription": "The basic building block for creating custom switches.",
   "parametersDescriptions": {
-    "checked": { "description": "If <code>true</code>, the component is checked." },
+    "checked": { "description": "If <code>true</code>, the switch is checked." },
     "defaultChecked": {
       "description": "The default checked state. Use when the component is not controlled."
     },
-    "disabled": { "description": "If <code>true</code>, the component is disabled." },
+    "disabled": {
+      "description": "If <code>true</code>, the component is disabled and can&#39;t be interacted with."
+    },
     "inputRef": { "description": "Ref to the underlying input element." },
     "name": { "description": "Name of the underlying input element." },
     "onChange": { "description": "Callback fired when the state is changed." },
-    "readOnly": { "description": "If <code>true</code>, the component is read only." },
+    "readOnly": {
+      "description": "If <code>true</code>, the component is read-only. Functionally, this is equivalent to being disabled, but the assistive technologies will announce this differently."
+    },
     "required": {
-      "description": "If <code>true</code>, the <code>input</code> element is required."
+      "description": "If <code>true</code>, the switch must be checked for the browser validation to pass."
     }
   },
   "returnValueDescriptions": {
diff --git a/packages/mui-base/src/Switch/Switch.tsx b/packages/mui-base/src/Switch/Switch.tsx
index 37692ba209..05ecd0fcad 100644
--- a/packages/mui-base/src/Switch/Switch.tsx
+++ b/packages/mui-base/src/Switch/Switch.tsx
@@ -78,7 +78,7 @@ Switch.propTypes /* remove-proptypes */ = {
   // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * If `true`, the component is checked.
+   * If `true`, the switch is checked.
    */
   checked: PropTypes.bool,
   /**
@@ -94,7 +94,7 @@ Switch.propTypes /* remove-proptypes */ = {
    */
   defaultChecked: PropTypes.bool,
   /**
-   * If `true`, the component is disabled.
+   * If `true`, the component is disabled and can't be interacted with.
    *
    * @default false
    */
@@ -104,7 +104,7 @@ Switch.propTypes /* remove-proptypes */ = {
    */
   inputRef: refType,
   /**
-   * @ignore
+   * Name of the underlying input element.
    */
   name: PropTypes.string,
   /**
@@ -116,7 +116,8 @@ Switch.propTypes /* remove-proptypes */ = {
    */
   onChange: PropTypes.func,
   /**
-   * If `true`, the component is read only.
+   * If `true`, the component is read-only.
+   * Functionally, this is equivalent to being disabled, but the assistive technologies will announce this differently.
    *
    * @default false
    */
@@ -126,7 +127,7 @@ Switch.propTypes /* remove-proptypes */ = {
    */
   render: PropTypes.func,
   /**
-   * If `true`, the `input` element is required.
+   * If `true`, the switch must be checked for the browser validation to pass.
    *
    * @default false
    */
diff --git a/packages/mui-base/src/Switch/Switch.types.ts b/packages/mui-base/src/Switch/Switch.types.ts
index 9389022b19..680bef0aad 100644
--- a/packages/mui-base/src/Switch/Switch.types.ts
+++ b/packages/mui-base/src/Switch/Switch.types.ts
@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { BaseUiComponentCommonProps } from '../utils/BaseUiComponentCommonProps';
+import { UseSwitchParameters } from '../useSwitch';
 
 export type SwitchOwnerState = {
   checked: boolean;
@@ -9,45 +9,7 @@ export type SwitchOwnerState = {
 };
 
 export interface SwitchProps
-  extends Omit<BaseUiComponentCommonProps<'button', SwitchOwnerState>, 'onChange'> {
-  /**
-   * If `true`, the component is checked.
-   */
-  checked?: boolean;
-  /**
-   * The default checked state. Use when the component is not controlled.
-   */
-  defaultChecked?: boolean;
-  /**
-   * If `true`, the component is disabled.
-   *
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Ref to the underlying input element.
-   */
-  inputRef?: React.Ref<HTMLInputElement>;
-  /**
-   * Callback fired when the state is changed.
-   *
-   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
-   * You can pull out the new value by accessing `event.target.value` (string).
-   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
-   */
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  /**
-   * If `true`, the component is read only.
-   *
-   * @default false
-   */
-  readOnly?: boolean;
-  /**
-   * If `true`, the `input` element is required.
-   *
-   * @default false
-   */
-  required?: boolean;
-}
+  extends UseSwitchParameters,
+    Omit<BaseUiComponentCommonProps<'button', SwitchOwnerState>, 'onChange'> {}
 
 export interface SwitchThumbProps extends BaseUiComponentCommonProps<'span', SwitchOwnerState> {}
diff --git a/packages/mui-base/src/Switch/useSwitchStyleHooks.ts b/packages/mui-base/src/Switch/useSwitchStyleHooks.ts
index 601de69ff9..a27606e1a8 100644
--- a/packages/mui-base/src/Switch/useSwitchStyleHooks.ts
+++ b/packages/mui-base/src/Switch/useSwitchStyleHooks.ts
@@ -1,11 +1,9 @@
 import * as React from 'react';
 import { SwitchOwnerState } from './Switch.types';
 import { getStyleHookProps } from '../utils/getStyleHookProps';
+
 /**
- *
- * API:
- *
- * - [useSwitchStyleHooks API](https://mui.com/base-ui/api/use-switch-style-hooks/)
+ * @ignore - internal hook.
  */
 export function useSwitchStyleHooks(ownerState: SwitchOwnerState) {
   return React.useMemo(() => {
diff --git a/packages/mui-base/src/useSwitch/useSwitch.types.ts b/packages/mui-base/src/useSwitch/useSwitch.types.ts
index 2be42439d8..6ab74ea6fd 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.types.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.types.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export interface UseSwitchParameters {
   /**
-   * If `true`, the component is checked.
+   * If `true`, the switch is checked.
    */
   checked?: boolean;
   /**
@@ -10,7 +10,9 @@ export interface UseSwitchParameters {
    */
   defaultChecked?: boolean;
   /**
-   * If `true`, the component is disabled.
+   * If `true`, the component is disabled and can't be interacted with.
+   *
+   * @default false
    */
   disabled?: boolean;
   /**
@@ -30,11 +32,16 @@ export interface UseSwitchParameters {
    */
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
   /**
-   * If `true`, the component is read only.
+   * If `true`, the component is read-only.
+   * Functionally, this is equivalent to being disabled, but the assistive technologies will announce this differently.
+   *
+   * @default false
    */
   readOnly?: boolean;
   /**
-   * If `true`, the `input` element is required.
+   * If `true`, the switch must be checked for the browser validation to pass.
+   *
+   * @default false
    */
   required?: boolean;
 }
@@ -51,6 +58,9 @@ interface UseSwitchInputElementOwnProps {
   onChange: React.ChangeEventHandler<HTMLInputElement>;
 }
 
+/**
+ * Props that are received by the input element of the Switch.
+ */
 export type UseSwitchInputElementProps<TOther = {}> = Omit<
   TOther,
   keyof UseSwitchInputElementOwnProps
@@ -66,6 +76,9 @@ interface UseSwitchButtonElementOwnProps {
   'aria-readonly': React.AriaAttributes['aria-readonly'];
 }
 
+/**
+ * Props that are received by the button element of the Switch.
+ */
 export type UseSwitchButtonElementProps<TOther = {}> = Omit<
   TOther,
   keyof UseSwitchButtonElementOwnProps