Fix review comments

docs/data/components/accordion/accordion.mdx

@@ -27,7 +27,7 @@ Accordions are implemented using a collection of related components:
 
 - `<Accordion.Root />` is a top-level component that wraps the other components.
 - `<Accordion.Item />` is a component that wraps each section of content and it's associated `Trigger`
-- `<Accordion.Trigger />` is a button that toggles the open state of it's associated `Item`
+- `<Accordion.Trigger />` is a button that toggles the open state of its associated `Item`
 - `<Accordion.Header />` is a heading (`h3` by default) that wraps the `Trigger`
 - `<Accordion.Panel />` is the element that contains content in a `Item`
 

docs/data/components/collapsible/CssAnimatedCollapsible.js

@@ -1,13 +1,10 @@
 'use client';
 import * as React from 'react';
+import clsx from 'clsx';
 import { Collapsible } from '@base_ui/react/Collapsible';
 import animationClasses from './animations.module.css';
 import classes from './styles.module.css';
 
-function classNames(...c) {
-  return c.filter(Boolean).join(' ');
-}
-
 export default function CssAnimatedCollapsible() {
   const [open, setOpen] = React.useState(true);
   return (
@@ -16,9 +13,7 @@ export default function CssAnimatedCollapsible() {
         <ExpandMoreIcon className={classes.icon} />
         Show {open ? 'less' : 'more'}
       </Collapsible.Trigger>
-      <Collapsible.Panel
-        className={classNames(classes.panel, animationClasses.panel)}
-      >
+      <Collapsible.Panel className={clsx(classes.panel, animationClasses.panel)}>
         <p>This is the collapsed content</p>
         <p>
           You can find the Base UI repository{' '}

docs/data/components/collapsible/CssAnimatedCollapsible.tsx

@@ -1,13 +1,10 @@
 'use client';
 import * as React from 'react';
+import clsx from 'clsx';
 import { Collapsible } from '@base_ui/react/Collapsible';
 import animationClasses from './animations.module.css';
 import classes from './styles.module.css';
 
-function classNames(...c: Array<string | undefined | null | false>) {
-  return c.filter(Boolean).join(' ');
-}
-
 export default function CssAnimatedCollapsible() {
   const [open, setOpen] = React.useState(true);
   return (
@@ -16,9 +13,7 @@ export default function CssAnimatedCollapsible() {
         <ExpandMoreIcon className={classes.icon} />
         Show {open ? 'less' : 'more'}
       </Collapsible.Trigger>
-      <Collapsible.Panel
-        className={classNames(classes.panel, animationClasses.panel)}
-      >
+      <Collapsible.Panel className={clsx(classes.panel, animationClasses.panel)}>
         <p>This is the collapsed content</p>
         <p>
           You can find the Base UI repository{' '}

docs/data/components/collapsible/CssTransitionCollapsible.js

@@ -1,13 +1,10 @@
 'use client';
 import * as React from 'react';
+import clsx from 'clsx';
 import { Collapsible } from '@base_ui/react/Collapsible';
 import transitionClasses from './transitions.module.css';
 import classes from './styles.module.css';
 
-function classNames(...c) {
-  return c.filter(Boolean).join(' ');
-}
-
 export default function CssTransitionCollapsible() {
   const [open, setOpen] = React.useState(true);
   return (
@@ -16,9 +13,7 @@ export default function CssTransitionCollapsible() {
         <ExpandMoreIcon className={classes.icon} />
         Show {open ? 'less' : 'more'}
       </Collapsible.Trigger>
-      <Collapsible.Panel
-        className={classNames(classes.panel, transitionClasses.panel)}
-      >
+      <Collapsible.Panel className={clsx(classes.panel, transitionClasses.panel)}>
         <p>This is the collapsed content.</p>
         <p>
           You can find the Base UI repository{' '}

docs/data/components/collapsible/CssTransitionCollapsible.tsx

@@ -1,13 +1,10 @@
 'use client';
 import * as React from 'react';
+import clsx from 'clsx';
 import { Collapsible } from '@base_ui/react/Collapsible';
 import transitionClasses from './transitions.module.css';
 import classes from './styles.module.css';
 
-function classNames(...c: Array<string | undefined | null | false>) {
-  return c.filter(Boolean).join(' ');
-}
-
 export default function CssTransitionCollapsible() {
   const [open, setOpen] = React.useState(true);
   return (
@@ -16,9 +13,7 @@ export default function CssTransitionCollapsible() {
         <ExpandMoreIcon className={classes.icon} />
         Show {open ? 'less' : 'more'}
       </Collapsible.Trigger>
-      <Collapsible.Panel
-        className={classNames(classes.panel, transitionClasses.panel)}
-      >
+      <Collapsible.Panel className={clsx(classes.panel, transitionClasses.panel)}>
         <p>This is the collapsed content.</p>
         <p>
           You can find the Base UI repository{' '}

packages/mui-base/src/Accordion/Item/AccordionItemContext.tsx → packages/mui-base/src/Accordion/Item/AccordionItemContext.ts

@@ -8,9 +8,7 @@ export interface AccordionItemContext {
   setTriggerId: (id: string | undefined) => void;
   triggerId?: string;
 }
-/**
- * @ignore - internal component.
- */
+
 export const AccordionItemContext = React.createContext<AccordionItemContext | undefined>(
   undefined,
 );

packages/mui-base/src/Accordion/Root/AccordionRoot.tsx

@@ -7,6 +7,16 @@ import { CompositeList } from '../../Composite/List/CompositeList';
 import { useAccordionRoot } from './useAccordionRoot';
 import { AccordionRootContext } from './AccordionRootContext';
 
+const rootStyleHookMapping = {
+  disabled: (value: boolean) => {
+    if (value) {
+      return { 'data-disabled': '' };
+    }
+    return null;
+  },
+  value: () => null,
+};
+
 /**
  *
  * Demos:
@@ -84,15 +94,7 @@ const AccordionRoot = React.forwardRef(function AccordionRoot(
     ownerState,
     ref: forwardedRef,
     extraProps: otherProps,
-    customStyleHookMapping: {
-      disabled: (isDisabled) => {
-        if (isDisabled) {
-          return { 'data-disabled': '' };
-        }
-        return null;
-      },
-      value: () => null,
-    },
+    customStyleHookMapping: rootStyleHookMapping,
   });
 
   return (

packages/mui-base/src/Accordion/Root/AccordionRootContext.tsx → packages/mui-base/src/Accordion/Root/AccordionRootContext.ts

@@ -7,9 +7,7 @@ export interface AccordionRootContext extends Omit<useAccordionRoot.ReturnValue,
   ownerState: AccordionRoot.OwnerState;
   hiddenUntilFound: boolean;
 }
-/**
- * @ignore - internal component.
- */
+
 export const AccordionRootContext = React.createContext<AccordionRootContext | undefined>(
   undefined,
 );