diff --git a/docs/src/app/experiments/accordion-animations.tsx b/docs/src/app/experiments/accordion-animations.tsx
index 375cb9b1e..c7d689c96 100644
--- a/docs/src/app/experiments/accordion-animations.tsx
+++ b/docs/src/app/experiments/accordion-animations.tsx
@@ -10,12 +10,9 @@ function classNames(...c: Array<string | undefined | null | false>) {
 export default function App() {
   return (
     <div className={classes.wrapper}>
-      <h3>
-        CSS @keyframe animations + `hidden=&quot;until-found&quot;` + keepMounted
-      </h3>
+      <h3>CSS @keyframe animations + `hidden=&quot;until-found&quot;`</h3>
       <Accordion.Root
         hiddenUntilFound
-        keepMounted
         className={classes.root}
         aria-label="Uncontrolled Material UI Accordion"
       >
diff --git a/docs/src/app/experiments/collapsible.tsx b/docs/src/app/experiments/collapsible.tsx
deleted file mode 100644
index 9e4c20b75..000000000
--- a/docs/src/app/experiments/collapsible.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-'use client';
-import * as React from 'react';
-import { Collapsible } from '@base_ui/react/Collapsible';
-
-const DURATION = '350ms';
-
-export default function CollapsibleDemo() {
-  return (
-    <div className="CollapsibleDemo">
-      <div>
-        <Collapsible.Root>
-          <Collapsible.Trigger className="MyCollapsible-trigger">
-            <span className="icon">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 80 80"
-                focusable="false"
-              >
-                <path d="M70.3 13.8L40 66.3 9.7 13.8z" />
-              </svg>
-            </span>
-            Trigger (CSS animation)
-          </Collapsible.Trigger>
-          <Collapsible.Panel className="MyCollapsible-content cssanimation">
-            <p>This is the collapsed content</p>
-            <p>This component is animated with CSS @keyframe animations</p>
-            <p>demo: https://codepen.io/aardrian/pen/QWjBNQG</p>
-            <p>https://adrianroselli.com/2020/05/disclosure-widgets.html</p>
-          </Collapsible.Panel>
-        </Collapsible.Root>
-      </div>
-
-      <div>
-        <Collapsible.Root>
-          <Collapsible.Trigger className="MyCollapsible-trigger">
-            <span className="icon">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 80 80"
-                focusable="false"
-              >
-                <path d="M70.3 13.8L40 66.3 9.7 13.8z" />
-              </svg>
-            </span>
-            Trigger (CSS transition)
-          </Collapsible.Trigger>
-          <Collapsible.Panel className="MyCollapsible-content csstransition">
-            <p>This is the collapsed content</p>
-            <p>This component is animated with CSS transitions</p>
-            <p>demo: https://codepen.io/aardrian/pen/QWjBNQG</p>
-            <p>https://adrianroselli.com/2020/05/disclosure-widgets.html</p>
-          </Collapsible.Panel>
-        </Collapsible.Root>
-      </div>
-
-      <Collapsible.Root render={<span />} className="MyCollapsible-root">
-        <Collapsible.Trigger className="MyCollapsible-trigger">
-          <span className="icon">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 80 80"
-              focusable="false"
-            >
-              <path d="M70.3 13.8L40 66.3 9.7 13.8z" />
-            </svg>
-          </span>
-          Trigger (root renders a span + CSS transition)
-        </Collapsible.Trigger>
-        <Collapsible.Panel className="MyCollapsible-content csstransition">
-          <p>This is the collapsed content</p>
-          <p>This component is animated with CSS transitions</p>
-          <p>demo: https://codepen.io/aardrian/pen/QWjBNQG</p>
-          <p>https://adrianroselli.com/2020/05/disclosure-widgets.html</p>
-        </Collapsible.Panel>
-      </Collapsible.Root>
-      <Styles />
-    </div>
-  );
-}
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-export function Styles() {
-  return (
-    <style suppressHydrationWarning>{`
-    .CollapsibleDemo {
-      font-family: system-ui, sans-serif;
-      line-height: 1.4;
-      display: flex;
-      flex-direction: column;
-      gap: 2rem;
-    }
-
-    .MyCollapsible-trigger {
-      border: .1em solid #ccc;
-      padding: .5em 1em .5em .5em;
-      font: inherit;
-      background-color: ${grey[50]};
-      border-radius: .5em .5em 0 0;
-    }
-
-    .MyCollapsible-trigger .icon {
-      display: inline-block;
-      font-size: 60%;
-      color: #000;
-      background-color: #00f;
-      padding: 0.3em 0.2em 0 0.2em;
-      border: 0.2em solid #00f;
-      border-radius: 50%;
-      line-height: 1;
-      text-align: center;
-      text-indent: 0;
-      transform: rotate(270deg);
-      margin-right: 0.6em;
-    }
-
-    .MyCollapsible-trigger svg {
-      width: 1.25em;
-      height: 1.25em;
-      fill: #fff;
-      transition: transform 0.2s ease-in;
-      transform-origin: center 45%;
-    }
-
-    .MyCollapsible-trigger:hover,
-    .MyCollapsible-trigger:focus-visible {
-      background-color: #666;
-      color: #fff;
-      outline: none;
-      border-color: #666;
-    }
-
-    .MyCollapsible-trigger:hover .icon,
-    .MyCollapsible-trigger:focus-visible .icon {
-      background-color: #fff;
-      outline: none;
-    }
-
-    .MyCollapsible-trigger:hover svg,
-    .MyCollapsible-trigger:focus-visible svg {
-      fill: #00f;
-    }
-
-    .MyCollapsible-trigger[data-open] svg {
-      transform: rotate(90deg);
-    }
-
-    .MyCollapsible-content {
-      background-color: #eaeaea;
-      overflow: hidden;
-    }
-
-    .MyCollapsible-content.cssanimation[data-open] {
-      animation: slideDown ${DURATION} ease-out;
-    }
-
-    .MyCollapsible-content.cssanimation[data-closed] {
-      animation: slideUp ${DURATION} ease-out;
-    }
-
-    .MyCollapsible-content.csstransition[data-open] {
-      height: var(--collapsible-content-height);
-      transition: height ${DURATION} ease-out;
-    }
-
-    .MyCollapsible-content.csstransition[data-closed] {
-      height: 0;
-      transition: height ${DURATION} ease-in;
-    }
-
-    .MyCollapsible-content.csstransition[data-entering] {
-      height: 0;
-    }
-
-    @keyframes slideDown {
-      from {
-        height: 0;
-      }
-      to {
-        height: var(--collapsible-content-height);
-      }
-    }
-
-    @keyframes slideUp {
-      from {
-        height: var(--collapsible-content-height);
-      }
-      to {
-        height: 0;
-      }
-    }
-    `}</style>
-  );
-}
diff --git a/docs/src/app/experiments/progress.tsx b/docs/src/app/experiments/progress.tsx
deleted file mode 100644
index 3bab4439a..000000000
--- a/docs/src/app/experiments/progress.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-'use client';
-import * as React from 'react';
-import { useTheme } from '@mui/system';
-import { Progress } from '@base_ui/react/Progress';
-
-const VAL1 = 33;
-
-const CUSTOM_BUFFER_VAL = 77;
-
-export default function ProgressDemos() {
-  return (
-    <div className="ProgressDemos">
-      <Progress.Root className="MyProgress" value={50} aria-label="loading progress">
-        <Progress.Track className="MyProgress-track">
-          <Progress.Indicator className="MyProgress-indicator" />
-        </Progress.Track>
-      </Progress.Root>
-
-      <Progress.Root className="MyProgress" value={null} aria-labelledby="Label2">
-        <span className="Label" id="Label2">
-          Indeterminate Progress
-        </span>
-        <Progress.Track className="MyProgress-track">
-          <Progress.Indicator className="MyProgress-indicator" />
-        </Progress.Track>
-      </Progress.Root>
-
-      <Progress.Root
-        className="MyProgress"
-        value={50}
-        aria-labelledby="Label3"
-        direction="rtl"
-      >
-        <span className="Label" id="Label3">
-          Progress (RTL)
-        </span>
-        <Progress.Track className="MyProgress-track">
-          <Progress.Indicator className="MyProgress-indicator" />
-        </Progress.Track>
-      </Progress.Root>
-
-      <Progress.Root
-        className="MyProgress"
-        value={null}
-        aria-labelledby="Label4"
-        direction="rtl"
-      >
-        <span className="Label" id="Label4">
-          Indeterminate (RTL)
-        </span>
-        <Progress.Track className="MyProgress-track">
-          <Progress.Indicator className="MyProgress-indicator" />
-        </Progress.Track>
-      </Progress.Root>
-
-      <h3 id="customizations">Customizations</h3>
-
-      <Progress.Root
-        className="MyProgress buffer"
-        aria-labelledby="Label5"
-        value={VAL1}
-        getAriaValueText={(value) =>
-          `${value}% complete, ${CUSTOM_BUFFER_VAL}% buffered`
-        }
-        max={Math.min(100, CUSTOM_BUFFER_VAL)}
-      >
-        <span className="Label" id="Label5">
-          Custom Buffer Component
-        </span>
-        <Progress.Track className="MyProgress-track">
-          <Progress.Indicator className="MyProgress-indicator" />
-          <MyBuffer value={CUSTOM_BUFFER_VAL} className="MyProgress-buffer" />
-        </Progress.Track>
-      </Progress.Root>
-
-      <Progress.Root
-        className="MyProgress buffer"
-        aria-labelledby="Label6"
-        value={VAL1}
-        getAriaValueText={(value) =>
-          `${value}% complete, ${CUSTOM_BUFFER_VAL}% buffered`
-        }
-        max={Math.min(100, CUSTOM_BUFFER_VAL)}
-        direction="rtl"
-      >
-        <span className="Label" id="Label6">
-          Custom Buffer Component (RTL)
-        </span>
-        <Progress.Track className="MyProgress-track">
-          <Progress.Indicator className="MyProgress-indicator" />
-          <MyBuffer value={CUSTOM_BUFFER_VAL} className="MyProgress-buffer" />
-        </Progress.Track>
-      </Progress.Root>
-      <Styles />
-    </div>
-  );
-}
-
-function MyBuffer(props: any) {
-  const { value, style, ...rest } = props;
-  const percentageValue = valueToPercent(value, 0, 100);
-  return (
-    <span
-      style={{
-        height: 'inherit',
-        position: 'absolute',
-        zIndex: 0,
-        width: percentageValue ? `${percentageValue}%` : undefined,
-        ...style,
-      }}
-      {...rest}
-    />
-  );
-}
-
-function valueToPercent(value: number | undefined, min: number, max: number) {
-  if (value === undefined) {
-    return value;
-  }
-
-  return ((value - min) * 100) / (max - min);
-}
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const BLUE400 = '#3399FF';
-const BLUE500 = '#007FFF';
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-export function Styles() {
-  const isDarkMode = useIsDarkMode();
-  return (
-    <style suppressHydrationWarning>{`
-      .ProgressDemos {
-        font-family: system-ui, sans-serif;
-        width: 20rem;
-        padding: 1rem;
-        display: flex;
-        flex-flow: column nowrap;
-        gap: 4rem;
-      }
-
-      .ProgressDemos h3 {
-        color: pink;
-      }
-
-      .MyProgress {
-        display: flex;
-        flex-flow: column nowrap;
-        gap: 1rem;
-      }
-
-      .MyProgress-track {
-        position: relative;
-        width: 100%;
-        height: 4px;
-        border-radius: 9999px;
-        background-color: ${grey[400]};
-        display: flex;
-        overflow: hidden;
-      }
-
-      .MyProgress-indicator {
-        background-color: ${isDarkMode ? BLUE400 : BLUE500};
-        border-radius: inherit;
-      }
-
-      .MyProgress-indicator[data-indeterminate] {
-        width: 25%;
-        animation: indeterminateLoading 1.5s infinite ease-in-out;
-        will-change: transform;
-      }
-
-      [dir='rtl'] .MyProgress-indicator[data-indeterminate] {
-        animation-name: rtlIndeterminateLoading;
-      }
-
-      .MyProgress-buffer {
-        background-color: ${grey[700]};
-        border-radius: inherit;
-      }
-
-      .buffer + .MyProgress-indicator {
-        position: absolute;
-      }
-
-      .Label {
-        cursor: unset;
-        font-weight: bold;
-      }
-
-      .tall .MyProgress-track {
-        height: 24px;
-        border-radius: 4px;
-        background-color: ${grey[200]};
-        box-shadow: 0 0 0 1px ${grey[500]};
-      }
-
-      .tall .MyProgress-indicator {
-        display: flex;
-        flex-flow: row nowrap;
-        justify-content: center;
-        align-items: center;
-        border-radius: 3px;
-        border-start-end-radius: 0;
-        border-end-end-radius: 0;
-        background-color: #0059B2;
-      }
-
-      .ValueText {
-        font-size: 12px;
-        line-height: 1;
-        color: ${grey[100]};
-      }
-
-      .buffer .MyProgress-indicator {
-        z-index: 1;
-      }
-
-      @keyframes indeterminateLoading {
-        from {
-          transform: translateX(-100%);
-        }
-
-        to {
-          transform: translateX(20rem);
-        }
-      }
-
-      @keyframes rtlIndeterminateLoading {
-        from {
-          transform: translateX(100%);
-        }
-
-        to {
-          transform: translateX(-20rem);
-        }
-      }
-    `}</style>
-  );
-}