Update style hooks

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);
 }
 

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;
 }

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;

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);
 }
 

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;
 }

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);
 }
 

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;
 }

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;
-  }
 }

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>;

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,20 +325,18 @@ 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();
         await user.keyboard(`[${key}]`);
 
         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');
     });
   });