From 7ad7ce1549972eb586683ed5ef9abcebfb699c4f Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Wed, 16 Oct 2024 22:15:37 +0800
Subject: [PATCH] Update style hooks

---
 .../accordion.horizontal.module.css           |  6 +-
 docs/app/experiments/accordion.module.css     | 14 ++--
 docs/app/experiments/collapsible.module.css   | 14 ++--
 .../components/accordion/styles.module.css    |  6 +-
 .../collapsible/animations.module.css         |  4 +-
 .../components/collapsible/styles.module.css  |  2 +-
 .../collapsible/transitions.module.css        |  4 +-
 docs/src/components/demo/Demo.module.css      |  7 +-
 .../mui-base/src/Accordion/Item/styleHooks.ts |  5 +-
 .../src/Accordion/Root/AccordionRoot.test.tsx | 72 ++++++++-----------
 .../Accordion/Trigger/AccordionTrigger.tsx    |  5 +-
 .../Collapsible/Root/CollapsibleRoot.test.tsx | 18 ++---
 .../src/Collapsible/Root/styleHooks.ts        |  5 +-
 .../Trigger/CollapsibleTrigger.tsx            |  4 +-
 .../src/utils/collapsibleOpenStateMapping.ts  | 23 ++++++
 15 files changed, 91 insertions(+), 98 deletions(-)
 create mode 100644 packages/mui-base/src/utils/collapsibleOpenStateMapping.ts

diff --git a/docs/app/experiments/accordion.horizontal.module.css b/docs/app/experiments/accordion.horizontal.module.css
index 289680d10..14e57904f 100644
--- a/docs/app/experiments/accordion.horizontal.module.css
+++ b/docs/app/experiments/accordion.horizontal.module.css
@@ -7,11 +7,11 @@
 }
 
 .root {
-  --Paper-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+  --shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
     0px 1px 3px 0px rgba(0, 0, 0, 0.12);
 
   font-family: system-ui, sans-serif;
-  box-shadow: var(--Paper-shadow);
+  box-shadow: var(--shadow);
   background-color: rgba(0, 0, 0, 0.12);
   border-radius: 0.3rem;
   height: 40rem;
@@ -90,7 +90,7 @@
   transform: rotate(-90deg);
 }
 
-.trigger[data-accordion='open'] svg {
+.trigger[data-panel-open] svg {
   transform: rotate(180deg);
 }
 
diff --git a/docs/app/experiments/accordion.module.css b/docs/app/experiments/accordion.module.css
index 8dd426a24..6dd3aa695 100644
--- a/docs/app/experiments/accordion.module.css
+++ b/docs/app/experiments/accordion.module.css
@@ -26,11 +26,11 @@
 
 .root {
   --duration: 300ms;
-  --Paper-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+  --shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
     0px 1px 3px 0px rgba(0, 0, 0, 0.12);
 
   font-family: system-ui, sans-serif;
-  box-shadow: var(--Paper-shadow);
+  box-shadow: var(--shadow);
   background-color: rgba(0, 0, 0, 0.12);
   border-radius: 0.3rem;
 }
@@ -88,7 +88,7 @@
   transition: transform 300ms;
 }
 
-.trigger[data-accordion='open'] svg {
+.trigger[data-panel-open] svg {
   transform: rotate(180deg);
 }
 
@@ -101,20 +101,20 @@
   padding: 1rem;
 }
 
-.panel.cssanimation[data-accordion='open'] {
+.panel.cssanimation[data-open] {
   animation: slideDown var(--duration) ease-out;
 }
 
-.panel.cssanimation[data-accordion='closed'] {
+.panel.cssanimation {
   animation: slideUp var(--duration) ease-out;
 }
 
-.panel.csstransition[data-accordion='open'] {
+.panel.csstransition[data-open] {
   height: var(--accordion-panel-height);
   transition: height var(--duration) ease-out;
 }
 
-.panel.csstransition[data-accordion='closed'] {
+.panel.csstransition {
   height: 0;
   transition: height var(--duration) ease-in;
 }
diff --git a/docs/app/experiments/collapsible.module.css b/docs/app/experiments/collapsible.module.css
index 45cd699dd..d4e2bfd0e 100644
--- a/docs/app/experiments/collapsible.module.css
+++ b/docs/app/experiments/collapsible.module.css
@@ -33,7 +33,7 @@
   transition: transform var(--duration) ease-in;
 }
 
-.trigger[data-collapsible='open'] .icon {
+.trigger[data-open] .icon {
   transform: rotate(0);
   transition: transform var(--duration) ease-out;
 }
@@ -47,20 +47,20 @@
   padding-right: 1rem;
 }
 
-.panel.animation[data-collapsible='open'] {
+.panel.animation[data-open] {
   animation: slideDown var(--duration) ease-out;
 }
 
-.panel.animation[data-collapsible='closed'] {
+.panel.animation {
   animation: slideUp var(--duration) ease-in;
 }
 
-.panel.transition[data-collapsible='open'] {
+.panel.transition[data-open] {
   height: var(--collapsible-panel-height);
   transition: height var(--duration) ease-out;
 }
 
-.panel.transition[data-collapsible='closed'] {
+.panel.transition {
   height: 0;
   transition: height var(--duration) ease-in;
 }
@@ -69,10 +69,6 @@
   height: 0;
 }
 
-.panel.transition[hidden='until-found'] {
-  transition-duration: 0s !important;
-}
-
 .panel.framer {
   display: flex;
   flex-direction: column;
diff --git a/docs/data/components/accordion/styles.module.css b/docs/data/components/accordion/styles.module.css
index 58a901b41..cfa2e8f3a 100644
--- a/docs/data/components/accordion/styles.module.css
+++ b/docs/data/components/accordion/styles.module.css
@@ -4,11 +4,11 @@
 }
 
 .root {
-  --Paper-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+  --shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
     0px 1px 3px 0px rgba(0, 0, 0, 0.12);
 
   font-family: system-ui, sans-serif;
-  box-shadow: var(--Paper-shadow);
+  box-shadow: var(--shadow);
   background-color: rgba(0, 0, 0, 0.12);
   border-radius: 0.3rem;
 }
@@ -72,7 +72,7 @@
   margin: 12px auto 12px 0;
 }
 
-.trigger[data-accordion='open'] svg {
+.trigger[data-open] svg {
   transform: rotate(180deg);
 }
 
diff --git a/docs/data/components/collapsible/animations.module.css b/docs/data/components/collapsible/animations.module.css
index e045caf48..229159fb3 100644
--- a/docs/data/components/collapsible/animations.module.css
+++ b/docs/data/components/collapsible/animations.module.css
@@ -16,10 +16,10 @@
   }
 }
 
-.panel[data-collapsible='open'] {
+.panel[data-open] {
   animation: slideDown 300ms ease-out;
 }
 
-.panel[data-collapsible='closed'] {
+.panel {
   animation: slideUp 300ms ease-out;
 }
diff --git a/docs/data/components/collapsible/styles.module.css b/docs/data/components/collapsible/styles.module.css
index 2930ce898..82b774a8b 100644
--- a/docs/data/components/collapsible/styles.module.css
+++ b/docs/data/components/collapsible/styles.module.css
@@ -9,7 +9,7 @@
   transform: rotate(-90deg);
 }
 
-.trigger[data-collapsible='open'] .icon {
+.trigger[data-open] .icon {
   transform: rotate(0);
 }
 
diff --git a/docs/data/components/collapsible/transitions.module.css b/docs/data/components/collapsible/transitions.module.css
index 9e843b92a..6d3b22d79 100644
--- a/docs/data/components/collapsible/transitions.module.css
+++ b/docs/data/components/collapsible/transitions.module.css
@@ -1,9 +1,9 @@
-.panel[data-collapsible='open'] {
+.panel[data-open] {
   height: var(--collapsible-panel-height);
   transition: height 200ms ease-out;
 }
 
-.panel[data-collapsible='closed'] {
+.panel {
   height: 0;
   transition: height 200ms ease-in;
 }
diff --git a/docs/src/components/demo/Demo.module.css b/docs/src/components/demo/Demo.module.css
index 424af58c8..f151931d7 100644
--- a/docs/src/components/demo/Demo.module.css
+++ b/docs/src/components/demo/Demo.module.css
@@ -96,12 +96,9 @@
 
 .collapsible {
   overflow: hidden;
+  animation: slideUp 200ms ease-in;
 
-  &[data-collapsible='open'] {
+  &[data-open] {
     animation: slideDown 200ms ease-out;
   }
-
-  &[data-collapsible='closed'] {
-    animation: slideUp 200ms ease-in;
-  }
 }
diff --git a/packages/mui-base/src/Accordion/Item/styleHooks.ts b/packages/mui-base/src/Accordion/Item/styleHooks.ts
index 391fa5585..6af7d96c6 100644
--- a/packages/mui-base/src/Accordion/Item/styleHooks.ts
+++ b/packages/mui-base/src/Accordion/Item/styleHooks.ts
@@ -1,7 +1,9 @@
 import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
+import { collapsibleOpenStateMapping as baseMapping } from '../../utils/collapsibleOpenStateMapping';
 import type { AccordionItem } from './AccordionItem';
 
 export const accordionStyleHookMapping: CustomStyleHookMapping<AccordionItem.OwnerState> = {
+  ...baseMapping,
   disabled: (value) => {
     if (value) {
       return { 'data-disabled': '' };
@@ -11,9 +13,6 @@ export const accordionStyleHookMapping: CustomStyleHookMapping<AccordionItem.Own
   index: (value) => {
     return Number.isInteger(value) ? { 'data-index': String(value) } : null;
   },
-  open: (value) => {
-    return value ? { 'data-accordion': 'open' } : { 'data-accordion': 'closed' };
-  },
   transitionStatus: (value) => {
     if (value === 'entering') {
       return { 'data-entering': '' } as Record<string, string>;
diff --git a/packages/mui-base/src/Accordion/Root/AccordionRoot.test.tsx b/packages/mui-base/src/Accordion/Root/AccordionRoot.test.tsx
index 5af9312f9..632eac64f 100644
--- a/packages/mui-base/src/Accordion/Root/AccordionRoot.test.tsx
+++ b/packages/mui-base/src/Accordion/Root/AccordionRoot.test.tsx
@@ -59,23 +59,19 @@ describe('<Accordion.Root />', () => {
       const panel = getByTestId('panel');
 
       expect(trigger).to.have.attribute('aria-expanded', 'false');
-      expect(trigger).to.have.attribute('data-accordion', 'closed');
       expect(panel).to.have.attribute('hidden');
-      expect(panel).to.have.attribute('data-accordion', 'closed');
 
       await user.pointer({ keys: '[MouseLeft]', target: trigger });
 
       expect(trigger).to.have.attribute('aria-expanded', 'true');
-      expect(trigger).to.have.attribute('data-accordion', 'open');
+      expect(trigger).to.have.attribute('data-panel-open');
       expect(panel).to.not.have.attribute('hidden');
-      expect(panel).to.have.attribute('data-accordion', 'open');
+      expect(panel).to.have.attribute('data-open');
 
       await user.pointer({ keys: '[MouseLeft]', target: trigger });
 
       expect(trigger).to.have.attribute('aria-expanded', 'false');
-      expect(trigger).to.have.attribute('data-accordion', 'closed');
       expect(panel).to.have.attribute('hidden');
-      expect(panel).to.have.attribute('data-accordion', 'closed');
     });
 
     describe('prop: defaultValue', () => {
@@ -101,11 +97,10 @@ describe('<Accordion.Root />', () => {
           </Accordion.Root>,
         );
 
-        const panel1 = getByTestId('panel1');
+        // const panel1 = getByTestId('panel1');
         const panel2 = getByTestId('panel2');
 
-        expect(panel1).to.have.attribute('data-accordion', 'closed');
-        expect(panel2).to.have.attribute('data-accordion', 'open');
+        expect(panel2).to.have.attribute('data-open');
       });
 
       it('custom item value', async () => {
@@ -131,10 +126,9 @@ describe('<Accordion.Root />', () => {
         );
 
         const panel1 = getByTestId('panel1');
-        const panel2 = getByTestId('panel2');
+        // const panel2 = getByTestId('panel2');
 
-        expect(panel1).to.have.attribute('data-accordion', 'open');
-        expect(panel2).to.have.attribute('data-accordion', 'closed');
+        expect(panel1).to.have.attribute('data-open');
       });
     });
   });
@@ -158,23 +152,19 @@ describe('<Accordion.Root />', () => {
       const panel = getByTestId('panel');
 
       expect(trigger).to.have.attribute('aria-expanded', 'false');
-      expect(trigger).to.have.attribute('data-accordion', 'closed');
       expect(panel).to.have.attribute('hidden');
-      expect(panel).to.have.attribute('data-accordion', 'closed');
 
       setProps({ value: [0] });
 
       expect(trigger).to.have.attribute('aria-expanded', 'true');
-      expect(trigger).to.have.attribute('data-accordion', 'open');
+      expect(trigger).to.have.attribute('data-panel-open');
       expect(panel).to.not.have.attribute('hidden');
-      expect(panel).to.have.attribute('data-accordion', 'open');
+      expect(panel).to.have.attribute('data-open');
 
       setProps({ value: [] });
 
       expect(trigger).to.have.attribute('aria-expanded', 'false');
-      expect(trigger).to.have.attribute('data-accordion', 'closed');
       expect(panel).to.have.attribute('hidden');
-      expect(panel).to.have.attribute('data-accordion', 'closed');
     });
 
     describe('prop: value', () => {
@@ -200,11 +190,10 @@ describe('<Accordion.Root />', () => {
           </Accordion.Root>,
         );
 
-        const panel1 = getByTestId('panel1');
+        // const panel1 = getByTestId('panel1');
         const panel2 = getByTestId('panel2');
 
-        expect(panel1).to.have.attribute('data-accordion', 'closed');
-        expect(panel2).to.have.attribute('data-accordion', 'open');
+        expect(panel2).to.have.attribute('data-open');
       });
 
       it('custom item value', async () => {
@@ -230,10 +219,10 @@ describe('<Accordion.Root />', () => {
         );
 
         const panel1 = getByTestId('panel1');
-        const panel2 = getByTestId('panel2');
+        // const panel2 = getByTestId('panel2');
 
-        expect(panel1).to.have.attribute('data-accordion', 'open');
-        expect(panel2).to.have.attribute('data-accordion', 'closed');
+        expect(panel1).to.have.attribute('data-open');
+        // expect(panel2).to.have.attribute('data-accordion', 'closed');
       });
     });
   });
@@ -336,7 +325,6 @@ describe('<Accordion.Root />', () => {
 
         expect(trigger).to.have.attribute('aria-expanded', 'false');
         expect(panel).to.have.attribute('hidden');
-        expect(panel).to.have.attribute('data-accordion', 'closed');
 
         await user.keyboard('[Tab]');
         expect(trigger).toHaveFocus();
@@ -344,12 +332,11 @@ describe('<Accordion.Root />', () => {
 
         expect(trigger).to.have.attribute('aria-expanded', 'true');
         expect(panel).to.not.have.attribute('hidden');
-        expect(panel).to.have.attribute('data-accordion', 'open');
+        expect(panel).to.have.attribute('data-open');
 
         await user.keyboard(`[${key}]`);
 
         expect(trigger).to.have.attribute('aria-expanded', 'false');
-        expect(panel).to.have.attribute('data-accordion', 'closed');
         expect(panel).to.have.attribute('hidden');
       });
     });
@@ -573,15 +560,16 @@ describe('<Accordion.Root />', () => {
       const panel2 = getByTestId('panel2');
 
       [trigger1, panel1, trigger2, panel2].forEach((element) => {
-        expect(element).to.have.attribute('data-accordion', 'closed');
+        expect(element).to.not.have.attribute('data-open');
       });
 
       await user.pointer({ keys: '[MouseLeft]', target: trigger1 });
       await user.pointer({ keys: '[MouseLeft]', target: trigger2 });
 
-      [trigger1, panel1, trigger2, panel2].forEach((element) => {
-        expect(element).to.have.attribute('data-accordion', 'open');
-      });
+      expect(panel1).to.have.attribute('data-open');
+      expect(panel2).to.have.attribute('data-open');
+      expect(trigger1).to.have.attribute('data-panel-open');
+      expect(trigger2).to.have.attribute('data-panel-open');
     });
 
     it('when false only one item can be open', async () => {
@@ -611,24 +599,22 @@ describe('<Accordion.Root />', () => {
       const trigger2 = getByTestId('trigger2');
       const panel2 = getByTestId('panel2');
 
-      [trigger1, panel1, trigger2, panel2].forEach((element) => {
-        expect(element).to.have.attribute('data-accordion', 'closed');
-      });
+      expect(panel1).to.not.have.attribute('data-open');
+      expect(panel2).to.not.have.attribute('data-open');
+      expect(trigger1).to.not.have.attribute('data-panel-open');
+      expect(trigger2).to.not.have.attribute('data-panel-open');
 
       await user.pointer({ keys: '[MouseLeft]', target: trigger1 });
 
-      [trigger1, panel1].forEach((element) => {
-        expect(element).to.have.attribute('data-accordion', 'open');
-      });
+      expect(panel1).to.have.attribute('data-open');
+      expect(trigger1).to.have.attribute('data-panel-open');
 
       await user.pointer({ keys: '[MouseLeft]', target: trigger2 });
 
-      [trigger2, panel2].forEach((element) => {
-        expect(element).to.have.attribute('data-accordion', 'open');
-      });
-      [trigger1, panel1].forEach((element) => {
-        expect(element).to.have.attribute('data-accordion', 'closed');
-      });
+      expect(panel2).to.have.attribute('data-open');
+      expect(trigger2).to.have.attribute('data-panel-open');
+      expect(panel1).to.not.have.attribute('data-open');
+      expect(trigger1).to.not.have.attribute('data-panel-open');
     });
   });
 
diff --git a/packages/mui-base/src/Accordion/Trigger/AccordionTrigger.tsx b/packages/mui-base/src/Accordion/Trigger/AccordionTrigger.tsx
index 10927551e..41c5428f2 100644
--- a/packages/mui-base/src/Accordion/Trigger/AccordionTrigger.tsx
+++ b/packages/mui-base/src/Accordion/Trigger/AccordionTrigger.tsx
@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { triggerOpenStateMapping } from '../../utils/collapsibleOpenStateMapping';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { BaseUIComponentProps } from '../../utils/types';
@@ -8,7 +9,6 @@ import { useCollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRoo
 import { useCollapsibleTrigger } from '../../Collapsible/Trigger/useCollapsibleTrigger';
 import type { AccordionItem } from '../Item/AccordionItem';
 import { useAccordionItemContext } from '../Item/AccordionItemContext';
-import { accordionStyleHookMapping } from '../Item/styleHooks';
 
 /**
  *
@@ -20,6 +20,7 @@ import { accordionStyleHookMapping } from '../Item/styleHooks';
  *
  * - [AccordionTrigger API](https://base-ui.netlify.app/components/react-accordion/#api-reference-AccordionTrigger)
  */
+
 const AccordionTrigger = React.forwardRef(function AccordionTrigger(
   props: AccordionTrigger.Props,
   forwardedRef: React.ForwardedRef<Element>,
@@ -52,7 +53,7 @@ const AccordionTrigger = React.forwardRef(function AccordionTrigger(
     ownerState,
     className,
     extraProps: { ...otherProps, id: triggerId },
-    customStyleHookMapping: accordionStyleHookMapping,
+    customStyleHookMapping: triggerOpenStateMapping,
   });
 
   return renderElement();
diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx
index c9d2fe667..8b85b0ca2 100644
--- a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx
+++ b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx
@@ -40,7 +40,7 @@ describe('<Collapsible.Root />', () => {
       const { getByTestId, getByRole, setProps } = await render(
         <Collapsible.Root open={false} animated={false}>
           <Collapsible.Trigger />
-          <Collapsible.Panel data-testid="panel" />
+          <Collapsible.Panel data-testid="panel">This is content</Collapsible.Panel>
         </Collapsible.Root>,
       );
 
@@ -49,18 +49,16 @@ describe('<Collapsible.Root />', () => {
 
       expect(trigger).to.have.attribute('aria-expanded', 'false');
       expect(panel).to.have.attribute('hidden');
-      expect(panel).to.have.attribute('data-collapsible', 'closed');
 
       setProps({ open: true });
 
       expect(trigger).to.have.attribute('aria-expanded', 'true');
       expect(panel).to.not.have.attribute('hidden');
-      expect(panel).to.have.attribute('data-collapsible', 'open');
+      expect(panel).to.have.attribute('data-open');
 
       setProps({ open: false });
 
       expect(trigger).to.have.attribute('aria-expanded', 'false');
-      expect(panel).to.have.attribute('data-collapsible', 'closed');
       expect(panel).to.have.attribute('hidden');
     });
 
@@ -77,18 +75,16 @@ describe('<Collapsible.Root />', () => {
 
       expect(trigger).to.have.attribute('aria-expanded', 'false');
       expect(panel).to.have.attribute('hidden');
-      expect(panel).to.have.attribute('data-collapsible', 'closed');
 
       await user.pointer({ keys: '[MouseLeft]', target: trigger });
 
       expect(trigger).to.have.attribute('aria-expanded', 'true');
       expect(panel).to.not.have.attribute('hidden');
-      expect(panel).to.have.attribute('data-collapsible', 'open');
+      expect(panel).to.have.attribute('data-open');
 
       await user.pointer({ keys: '[MouseLeft]', target: trigger });
 
       expect(trigger).to.have.attribute('aria-expanded', 'false');
-      expect(panel).to.have.attribute('data-collapsible', 'closed');
       expect(panel).to.have.attribute('hidden');
     });
   });
@@ -108,7 +104,6 @@ describe('<Collapsible.Root />', () => {
 
         expect(trigger).to.have.attribute('aria-expanded', 'false');
         expect(panel).to.have.attribute('hidden');
-        expect(panel).to.have.attribute('data-collapsible', 'closed');
 
         await user.keyboard('[Tab]');
         expect(trigger).toHaveFocus();
@@ -116,12 +111,11 @@ describe('<Collapsible.Root />', () => {
 
         expect(trigger).to.have.attribute('aria-expanded', 'true');
         expect(panel).to.not.have.attribute('hidden');
-        expect(panel).to.have.attribute('data-collapsible', 'open');
+        expect(panel).to.have.attribute('data-open');
 
         await user.keyboard(`[${key}]`);
 
         expect(trigger).to.have.attribute('aria-expanded', 'false');
-        expect(panel).to.have.attribute('data-collapsible', 'closed');
         expect(panel).to.have.attribute('hidden');
       });
     });
@@ -145,8 +139,6 @@ describe('<Collapsible.Root />', () => {
 
       const panel = getByTestId('panel');
 
-      expect(panel).to.have.attribute('data-collapsible', 'closed');
-
       act(() => {
         const event = new window.Event('beforematch', {
           bubbles: true,
@@ -156,7 +148,7 @@ describe('<Collapsible.Root />', () => {
       });
 
       expect(handleOpenChange.callCount).to.equal(1);
-      expect(panel).to.have.attribute('data-collapsible', 'open');
+      expect(panel).to.have.attribute('data-open');
     });
   });
 });
diff --git a/packages/mui-base/src/Collapsible/Root/styleHooks.ts b/packages/mui-base/src/Collapsible/Root/styleHooks.ts
index b47f9f0bc..483cc786e 100644
--- a/packages/mui-base/src/Collapsible/Root/styleHooks.ts
+++ b/packages/mui-base/src/Collapsible/Root/styleHooks.ts
@@ -1,10 +1,9 @@
 import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
+import { collapsibleOpenStateMapping as baseMapping } from '../../utils/collapsibleOpenStateMapping';
 import type { CollapsibleRoot } from './CollapsibleRoot';
 
 export const collapsibleStyleHookMapping: CustomStyleHookMapping<CollapsibleRoot.OwnerState> = {
-  open: (value) => {
-    return value ? { 'data-collapsible': 'open' } : { 'data-collapsible': 'closed' };
-  },
+  ...baseMapping,
   transitionStatus: (value) => {
     if (value === 'entering') {
       return { 'data-entering': '' } as Record<string, string>;
diff --git a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.tsx b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.tsx
index 205f3a5b9..ef59b7b65 100644
--- a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.tsx
+++ b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.tsx
@@ -1,11 +1,11 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { triggerOpenStateMapping } from '../../utils/collapsibleOpenStateMapping';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { BaseUIComponentProps } from '../../utils/types';
 import { useCollapsibleRootContext } from '../Root/CollapsibleRootContext';
 import { CollapsibleRoot } from '../Root/CollapsibleRoot';
-import { collapsibleStyleHookMapping } from '../Root/styleHooks';
 import { useCollapsibleTrigger } from './useCollapsibleTrigger';
 
 /**
@@ -39,7 +39,7 @@ const CollapsibleTrigger = React.forwardRef(function CollapsibleTrigger(
     ownerState,
     className,
     extraProps: otherProps,
-    customStyleHookMapping: collapsibleStyleHookMapping,
+    customStyleHookMapping: triggerOpenStateMapping,
   });
 
   return renderElement();
diff --git a/packages/mui-base/src/utils/collapsibleOpenStateMapping.ts b/packages/mui-base/src/utils/collapsibleOpenStateMapping.ts
new file mode 100644
index 000000000..6f35357a7
--- /dev/null
+++ b/packages/mui-base/src/utils/collapsibleOpenStateMapping.ts
@@ -0,0 +1,23 @@
+import type { CustomStyleHookMapping } from './getStyleHookProps';
+
+export const triggerOpenStateMapping: CustomStyleHookMapping<{ open: boolean }> = {
+  open(value) {
+    if (value) {
+      return {
+        'data-panel-open': '',
+      };
+    }
+    return null;
+  },
+};
+
+export const collapsibleOpenStateMapping: CustomStyleHookMapping<{ open: boolean }> = {
+  open(value) {
+    if (value) {
+      return {
+        'data-open': '',
+      };
+    }
+    return null;
+  },
+};