[accordion][collapsible] Add data-hidden attribute to collapsible and accordion when they are not open

[BrandonGoren]

• I have followed (at least) the PR section of the contributing guide.

Adds a data-hidden attribute to collapsible and accordion when they are not open to match the behavior in tabs (which sets this attribute).

Attached is a screenshot from an accordion component where data-hidden is now applied!

[pkg-pr-new]

vite-css-base-ui-example

pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/react@3063

pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/utils@3063

commit: 8bc13d3

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	8bc13d3
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/68fd51dcc754220008a25554
😎 Deploy Preview	https://deploy-preview-3063--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[mj12albert]

Maybe data-hidden is redundant? The hidden attr can be styled directly and we are already doing so:

base-ui/docs/src/app/(public)/(content)/react/components/tabs/demos/hero/css-modules/index.module.css

Lines 89 to 91 in e9f98ed

	&[hidden] {
	display: none;
	}

[BrandonGoren]

Maybe data-hidden is redundant? The hidden attr can be styled directly and we are already doing so:

base-ui/docs/src/app/(public)/(content)/react/components/tabs/demos/hero/css-modules/index.module.css

Lines 89 to 91 in e9f98ed

	&[hidden] {
	display: none;
	}

When using Tailwind, passing a display class (like block or flex) to the collapsible body will override the built-in hidden attribute, since Tailwind’s utility classes take precedence in the final CSS.

By adding a data-hidden attribute, we can increase CSS specificity and ensure the “hidden” state is correctly applied, even when other display utilities are present.

[BrandonGoren]

You can technically still style based on the hidden attribute in tailwind (and that's what I'm doing now), but it's a lot less intuitive:

[&[hidden]]:hidden

vs.

data-[hidden]:hidden

[mj12albert]

in tailwind (and that's what I'm doing now), but it's a lot less intuitive

👍 makes sense ~ we have [&[hidden]:not([hidden='until-found'])]:hidden in our demo as well

[mj12albert]

open is already in the ...state, we don't need to modify the state to add a new data attr based on it, instead modify the state<>data attr mapping here:

base-ui/packages/react/src/utils/collapsibleOpenStateMapping.ts

Lines 26 to 35 in e9f98ed

	export const collapsibleOpenStateMapping = {
	open(value) {
	if (value) {
	return PANEL_OPEN_HOOK;
	}
	return PANEL_CLOSED_HOOK;
	},
	} satisfies StateAttributesMapping<{
	open: boolean;
	}>;

[BrandonGoren]

@mj12albert I updated the PR to update the data attribute states in the common functions.

There are some different patterns in the repo for assembling these state attributes. I tried to match each collapsible/accordion to other parts of their "component" (e.g. the triggers and the roots), but it still felt a little awkward to merge these with the "parent" data-attributes in this way - let me know what you think!

[mj12albert]

The transitionStatusMapping can be added directly to collapsibleOpenStateMapping since it's the same for both panel components

[mj12albert]

@BrandonGoren I just remembered that internally hidden does not 100% correspond to open:

base-ui/packages/react/src/collapsible/panel/useCollapsiblePanel.ts

Lines 50 to 56 in 2b4e9c2

	const hidden = React.useMemo(() => {
	if (animationTypeRef.current === 'css-animation') {
	return !visible;
	}
	return !open && !mounted;
	}, [open, mounted, visible, animationTypeRef]);

Instead I think props.hidden that useCollapsiblePanel returns needs to be added to the state in both panel components