[docs] Accordion props reference

[mj12albert]

Preview: https://deploy-preview-2120--base-ui.netlify.app/react/components/toggle

Testing an Accordion implementation for https://github.com/mui/base-ui/issues/1752

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

[pkg-pr-new[bot]]

Open in StackBlitz

npm i https://pkg.pr.new/@base-ui-components/react@2120

commit: 2d22933

[mui-bot]

Bundle size report

@base-ui-components/react parsed: 0B^(0.00%) gzip: 0B^(0.00%)

Show details for 39 more bundles

@base-ui-components/react/accordion parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/alert-dialog parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/avatar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/checkbox parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/checkbox-group parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/collapsible parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/context-menu parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/dialog parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/direction-provider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/field parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/fieldset parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/form parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/input parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/menu parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/menubar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/merge-props parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/meter parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/navigation-menu parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/number-field parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/popover parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/preview-card parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/progress parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/radio parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/radio-group parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/scroll-area parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/select parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/separator parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/slider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/switch parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/tabs parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/toast parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/toggle parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/toggle-group parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/toolbar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/tooltip parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/unstable-no-ssr parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/unstable-use-media-query parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/use-render parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/utils parsed: 0B^(0.00%) gzip: 0B^(0.00%)

Details of bundle changes

Generated by :no_entry_sign: dangerJS against 2d2293338953bb1f5c9d0cc4cb7e1b4a4a553b69

[netlify[bot]]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	2d2293338953bb1f5c9d0cc4cb7e1b4a4a553b69
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/6853e43df140470008edc0a6
😎 Deploy Preview	https://deploy-preview-2120--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.

[atomiks]

A transparent outline box-shadow on the Panel part prevents muddying from the adjacent borders (below):

In the above SS, it's combined with the inset shadow on the Content element.

Question is how to visually connect the panel better with its trigger. Darkening its background makes it look like a header. A border wrapping around the entire thing looks a bit off too though

[mj12albert]

IF jsdoc @examples are extracted the existing docs components handle it well, added a fake one to Toggle (the deploy preview is stuck on an older cached json though)

[atomiks]

If the Default is undefined we can simply remove that whole row in the expanded form

[mj12albert]

In the above SS, it's combined with the inset shadow on the Content element.

Question is how to visually connect the panel better with its trigger. Darkening its background makes it look like a header. A border wrapping around the entire thing looks a bit off too though

I added all of this, what do you think @colmtuite ?

Here's the image I was referencing:

[mj12albert]

Closing this as we're going with the details/summary version