[Collapsible][Accordion] Modernize implementation (#889)

docs/data/api/accordion-panel.json

@@ -2,6 +2,7 @@
   "props": {
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
     "hiddenUntilFound": { "type": { "name": "bool" }, "default": "false" },
+    "keepMounted": { "type": { "name": "bool" }, "default": "false" },
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "AccordionPanel",

docs/data/api/accordion-root.json

@@ -7,6 +7,8 @@
       "default": "0"
     },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
+    "hiddenUntilFound": { "type": { "name": "bool" }, "default": "false" },
+    "keepMounted": { "type": { "name": "bool" }, "default": "false" },
     "loop": { "type": { "name": "bool" }, "default": "true" },
     "onValueChange": { "type": { "name": "func" } },
     "openMultiple": { "type": { "name": "bool" }, "default": "true" },

docs/data/api/collapsible-panel.json

@@ -2,6 +2,7 @@
   "props": {
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
     "hiddenUntilFound": { "type": { "name": "bool" }, "default": "false" },
+    "keepMounted": { "type": { "name": "bool" }, "default": "false" },
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "CollapsiblePanel",

docs/data/api/collapsible-root.json

@@ -2,7 +2,7 @@
   "props": {
     "animated": { "type": { "name": "bool" }, "default": "true" },
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
-    "defaultOpen": { "type": { "name": "bool" }, "default": "true" },
+    "defaultOpen": { "type": { "name": "bool" }, "default": "false" },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "onOpenChange": { "type": { "name": "func" } },
     "open": { "type": { "name": "bool" } },

docs/data/components/accordion/AccordionIntroduction.js

@@ -0,0 +1,59 @@
+'use client';
+import * as React from 'react';
+import { Accordion } from '@base-ui-components/react/accordion';
+import classes from './styles.module.css';
+
+export default function AccordionIntroduction() {
+  return (
+    <Accordion.Root className={classes.root} aria-label="Base UI Accordion">
+      <Accordion.Item className={classes.item}>
+        <Accordion.Header className={classes.header}>
+          <Accordion.Trigger className={classes.trigger}>
+            Trigger 1
+            <ExpandMoreIcon />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className={classes.panel}>
+          This is the contents of Accordion.Panel 1
+        </Accordion.Panel>
+      </Accordion.Item>
+      <Accordion.Item className={classes.item}>
+        <Accordion.Header className={classes.header}>
+          <Accordion.Trigger className={classes.trigger}>
+            Trigger 2
+            <ExpandMoreIcon />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className={classes.panel}>
+          This is the contents of Accordion.Panel 2
+        </Accordion.Panel>
+      </Accordion.Item>
+      <Accordion.Item className={classes.item}>
+        <Accordion.Header className={classes.header}>
+          <Accordion.Trigger className={classes.trigger}>
+            Trigger 3
+            <ExpandMoreIcon />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className={classes.panel}>
+          This is the contents of Accordion.Panel 3
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion.Root>
+  );
+}
+
+function ExpandMoreIcon(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      className={classes.icon}
+      {...props}
+    >
+      <path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="currentColor" />
+    </svg>
+  );
+}

docs/data/components/accordion/AccordionIntroduction.tsx

@@ -0,0 +1,59 @@
+'use client';
+import * as React from 'react';
+import { Accordion } from '@base-ui-components/react/accordion';
+import classes from './styles.module.css';
+
+export default function AccordionIntroduction() {
+  return (
+    <Accordion.Root className={classes.root} aria-label="Base UI Accordion">
+      <Accordion.Item className={classes.item}>
+        <Accordion.Header className={classes.header}>
+          <Accordion.Trigger className={classes.trigger}>
+            Trigger 1
+            <ExpandMoreIcon />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className={classes.panel}>
+          This is the contents of Accordion.Panel 1
+        </Accordion.Panel>
+      </Accordion.Item>
+      <Accordion.Item className={classes.item}>
+        <Accordion.Header className={classes.header}>
+          <Accordion.Trigger className={classes.trigger}>
+            Trigger 2
+            <ExpandMoreIcon />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className={classes.panel}>
+          This is the contents of Accordion.Panel 2
+        </Accordion.Panel>
+      </Accordion.Item>
+      <Accordion.Item className={classes.item}>
+        <Accordion.Header className={classes.header}>
+          <Accordion.Trigger className={classes.trigger}>
+            Trigger 3
+            <ExpandMoreIcon />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className={classes.panel}>
+          This is the contents of Accordion.Panel 3
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion.Root>
+  );
+}
+
+function ExpandMoreIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      className={classes.icon}
+      {...props}
+    >
+      <path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="currentColor" />
+    </svg>
+  );
+}