diff --git a/docs/pages/experiments/accordion-horizontal.tsx b/docs/pages/experiments/accordion-horizontal.tsx
new file mode 100644
index 0000000000..96e1f02ff2
--- /dev/null
+++ b/docs/pages/experiments/accordion-horizontal.tsx
@@ -0,0 +1,179 @@
+import * as React from 'react';
+import * as Accordion from '@base_ui/react/Accordion';
+
+function classNames(...classes: Array<string | undefined | null | false>) {
+  return classes.filter(Boolean).join(' ');
+}
+
+export default function App() {
+  const [val, setVal] = React.useState(['one']);
+  return (
+    <div className="HorizontalAccordionDemo">
+      <h2>Horizontal LTR</h2>
+      <Accordion.Root
+        className="MyHorizontalAccordion-root"
+        aria-label="Uncontrolled Horizontal Accordion"
+        openMultiple={false}
+        orientation="horizontal"
+      >
+        {['one', 'two', 'three'].map((value, index) => (
+          <Accordion.Section className="MyHorizontalAccordion-section" key={value}>
+            <Accordion.Heading className="MyHorizontalAccordion-heading">
+              <Accordion.Trigger className={classNames('MyHorizontalAccordion-trigger', value)}>
+                <span className="trigger-text">{index + 1}</span>
+                <span className="trigger-label">{value}</span>
+              </Accordion.Trigger>
+            </Accordion.Heading>
+            <Accordion.Panel className="MyHorizontalAccordion-panel">
+              This is the contents of Accordion.Panel {index + 1}
+            </Accordion.Panel>
+          </Accordion.Section>
+        ))}
+      </Accordion.Root>
+
+      <span>
+        <h2>Horizontal RTL</h2>
+        <p>one section must remain open</p>
+      </span>
+      <Accordion.Root
+        className="MyHorizontalAccordion-root"
+        aria-label="Controlled Horizontal RTL Accordion"
+        openMultiple={false}
+        orientation="horizontal"
+        direction="rtl"
+        value={val}
+        onOpenChange={(newValue: Accordion.Root.Props['Value']) => {
+          if (newValue.length > 0) {
+            setVal(newValue);
+          }
+        }}
+      >
+        {['one', 'two', 'three'].map((value, index) => (
+          <Accordion.Section className="MyHorizontalAccordion-section" key={value} value={value}>
+            <Accordion.Heading className="MyHorizontalAccordion-heading">
+              <Accordion.Trigger className={classNames('MyHorizontalAccordion-trigger', value)}>
+                <span className="trigger-text">{index + 1}</span>
+                <span className="trigger-label">{value}</span>
+              </Accordion.Trigger>
+            </Accordion.Heading>
+            <Accordion.Panel className="MyHorizontalAccordion-panel">
+              This is the contents of Accordion.Panel {index + 1}
+            </Accordion.Panel>
+          </Accordion.Section>
+        ))}
+      </Accordion.Root>
+      <HorizontalStyles />
+    </div>
+  );
+}
+
+function HorizontalStyles() {
+  return (
+    <style suppressHydrationWarning>
+      {`
+        .HorizontalAccordionDemo {
+          margin: 1rem;
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 2rem;
+        }
+
+        .MyHorizontalAccordion-root {
+          --Paper-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);
+          background-color: rgba(0,0,0,0.12);
+          border-radius: .3rem;
+          height: 40rem;
+          display: inline-flex;
+        }
+
+        .MyHorizontalAccordion-section {
+          position: relative;
+          background-color: #fff;
+          color: rgba(0, 0, 0, .87);
+          display: flex;
+        }
+
+        .MyHorizontalAccordion-section:not(:first-of-type) {
+          margin-left: 1px;
+        }
+
+        .MyHorizontalAccordion-section:first-of-type {
+          border-top-left-radius: .25rem;
+          border-top-right-radius: .25rem;
+        }
+
+        .MyHorizontalAccordion-section:last-of-type {
+          border-bottom-left-radius: .25rem;
+          border-bottom-right-radius: .25rem;
+        }
+
+        .MyHorizontalAccordion-heading {
+          margin: 0;
+          width: 4rem;
+        }
+
+        .MyHorizontalAccordion-trigger {
+          appearance: none;
+          background-color: transparent;
+          border: 0;
+          color: inherit;
+          cursor: pointer;
+          padding: 1rem;
+          position: relative;
+          height: 100%;
+          width: 100%;
+          display: flex;
+          flex-flow: column nowrap;
+          align-items: center;
+        }
+
+        .MyHorizontalAccordion-trigger.one {
+          background-color: #ddd;
+        }
+
+        .MyHorizontalAccordion-trigger.two {
+          background-color: #bbb;
+        }
+
+        .MyHorizontalAccordion-trigger.three {
+          background-color: #999;
+        }
+
+        .MyHorizontalAccordion-trigger:focus-visible {
+          outline: 0;
+          background-color: rgba(0,0,0,0.88);
+          color: #eee;
+        }
+
+        .MyHorizontalAccordion-trigger .trigger-text {
+          font-size: 1rem;
+          line-height: 1.5;
+          margin-bottom: auto;
+        }
+
+        .MyHorizontalAccordion-trigger .trigger-label {
+          font-size: 1rem;
+          line-height: 1.5;
+          margin-bottom: 1rem;
+          transform: rotate(-90deg);
+        }
+
+        .MyHorizontalAccordion-trigger[data-state="open"] svg {
+          transform: rotate(180deg);
+        }
+
+        .MyHorizontalAccordion-panel {
+          padding: 1rem;
+          width: 32rem;
+        }
+      `}
+    </style>
+  );
+}
diff --git a/docs/pages/experiments/accordion-material.tsx b/docs/pages/experiments/accordion-material.tsx
new file mode 100644
index 0000000000..3130c291ac
--- /dev/null
+++ b/docs/pages/experiments/accordion-material.tsx
@@ -0,0 +1,108 @@
+import * as React from 'react';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import * as Accordion from '@base_ui/react/Accordion';
+
+export default function App() {
+  return (
+    <div className="MaterialAccordions">
+      <Accordion.Root className="MyAccordion-root" aria-label="Uncontrolled Material UI Accordion">
+        {[0, 1, 2, 3].map((index) => (
+          <Accordion.Section className="MyAccordion-section" key={index}>
+            <Accordion.Heading className="MyAccordion-heading">
+              <Accordion.Trigger className="MyAccordion-trigger">
+                <span className="trigger-text">Trigger {index + 1}</span>
+                <ExpandMoreIcon />
+              </Accordion.Trigger>
+            </Accordion.Heading>
+            <Accordion.Panel className="MyAccordion-panel">
+              This is the contents of Accordion.Panel {index + 1}
+            </Accordion.Panel>
+          </Accordion.Section>
+        ))}
+      </Accordion.Root>
+      <MaterialStyles />
+    </div>
+  );
+}
+
+function MaterialStyles() {
+  return (
+    <style suppressHydrationWarning>
+      {`
+        .MaterialAccordions {
+          width: 40rem;
+          margin: 1rem;
+        }
+
+        .MyAccordion-root {
+          --Paper-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);
+          background-color: rgba(0,0,0,0.12);
+          border-radius: .3rem;
+        }
+
+        .MyAccordion-section {
+          position: relative;
+          background-color: #fff;
+          color: rgba(0, 0, 0, .87);
+        }
+
+        .MyAccordion-section:not(:first-of-type) {
+          margin-top: 1px;
+        }
+
+        .MyAccordion-section:first-of-type {
+          border-top-left-radius: .25rem;
+          border-top-right-radius: .25rem;
+        }
+
+        .MyAccordion-section:last-of-type {
+          border-bottom-left-radius: .25rem;
+          border-bottom-right-radius: .25rem;
+        }
+
+        .MyAccordion-heading {
+          margin: 0;
+        }
+
+        .MyAccordion-trigger {
+          appearance: none;
+          background-color: transparent;
+          border: 0;
+          color: inherit;
+          cursor: pointer;
+          padding: 0 1rem;
+          position: relative;
+          width: 100%;
+          display: flex;
+          flex-flow: row nowrap;
+          align-items: center;
+        }
+
+        .MyAccordion-trigger:focus-visible {
+          outline: 0;
+          background-color: rgba(0,0,0,0.12);
+        }
+
+        .MyAccordion-trigger .trigger-text {
+          font-size: 1rem;
+          line-height: 1.5;
+          margin: 12px auto 12px 0;
+        }
+
+        .MyAccordion-trigger[data-state="open"] svg {
+          transform: rotate(180deg);
+        }
+
+        .MyAccordion-panel {
+          padding: 1rem;
+        }
+      `}
+    </style>
+  );
+}
diff --git a/docs/pages/experiments/accordion.tsx b/docs/pages/experiments/accordion.tsx
index 94e537a392..eb194c65c7 100644
--- a/docs/pages/experiments/accordion.tsx
+++ b/docs/pages/experiments/accordion.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
 import Check from '@mui/icons-material/Check';
-import { useTheme } from '@mui/system';
+// import { useTheme } from '@mui/system';
 import * as Checkbox from '@base_ui/react/Checkbox';
 import * as Accordion from '@base_ui/react/Accordion';
 
 export default function App() {
   const [openMultiple, setOpenMultiple] = React.useState(true);
   const [val, setVal] = React.useState(['one']);
+  const [val2, setVal2] = React.useState(['one']);
   return (
     <div className="AccordionDemo">
       <span>multiple `Accordion.Section`s can be open at the same time:</span>
@@ -116,6 +117,50 @@ export default function App() {
           </Accordion.Panel>
         </Accordion.Section>
       </Accordion.Root>
+
+      <hr style={{ marginTop: 32, marginBottom: 32 }} role="presentation" />
+
+      <h2>Controlled, at least one section must remain open</h2>
+
+      <Accordion.Root
+        className="MyAccordion-root"
+        value={val2}
+        onOpenChange={(newValue: Accordion.Root.Props['Value']) => {
+          // console.log(newValue);
+          if (newValue.length > 0) {
+            setVal2(newValue);
+          }
+        }}
+        aria-label="Controlled Accordion, one section must remain open"
+        openMultiple={openMultiple}
+      >
+        <Accordion.Section className="MyAccordion-section" value="one">
+          <Accordion.Heading className="MyAccordion-heading">
+            <Accordion.Trigger className="MyAccordion-trigger">Trigger 1</Accordion.Trigger>
+          </Accordion.Heading>
+          <Accordion.Panel className="MyAccordion-panel">
+            This is the contents of Accordion.Panel 1, the value is &quot;one&quot;
+          </Accordion.Panel>
+        </Accordion.Section>
+
+        <Accordion.Section className="MyAccordion-section" value="two">
+          <Accordion.Heading className="MyAccordion-heading">
+            <Accordion.Trigger className="MyAccordion-trigger">Trigger 2</Accordion.Trigger>
+          </Accordion.Heading>
+          <Accordion.Panel className="MyAccordion-panel">
+            This is the contents of Accordion.Panel 2, the value is &quot;two&quot;
+          </Accordion.Panel>
+        </Accordion.Section>
+
+        <Accordion.Section className="MyAccordion-section" value="three">
+          <Accordion.Heading className="MyAccordion-heading">
+            <Accordion.Trigger className="MyAccordion-trigger">Trigger 3</Accordion.Trigger>
+          </Accordion.Heading>
+          <Accordion.Panel className="MyAccordion-panel">
+            This is the contents of Accordion.Panel 3, the value is &quot;three&quot;
+          </Accordion.Panel>
+        </Accordion.Section>
+      </Accordion.Root>
       <Styles />
     </div>
   );
@@ -130,14 +175,14 @@ const grey = {
   900: '#1C2025',
 };
 
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
+// function useIsDarkMode() {
+//   const theme = useTheme();
+//   return theme.palette.mode === 'dark';
+// }
 
 function Styles() {
   // Replace this with your app logic for determining dark mode
-  const isDarkMode = useIsDarkMode();
+  // const isDarkMode = useIsDarkMode();
   return (
     <style suppressHydrationWarning>
       {`