<.dm_split_pane
  id="split-pane-single-file-browser"
  class="h-72 w-full"
  primary_class="p-4 bg-surface-container-low"
  resize_label="Resize folder navigation"
  secondary_class="p-4"
>
  <:primary><nav aria-label="Folders"><h3 class="font-bold">Folders</h3><ul class="menu"><li><a href="#documents">Documents</a></li><li><a href="#projects">Projects with long prefixes</a></li></ul></nav></:primary>
  <section><h3 class="font-bold">Files</h3><p>Both pane contents stay visible when this preview becomes narrow.</p><input class="input" aria-label="Filter files" placeholder="Filter files" /></section>
</.dm_split_pane>

<.dm_split_pane
  id="split-pane-single-bounded"
  class="h-72 w-full"
  max_width={300}
  min_width={120}
  initial_width={200}
  primary_class="p-4 bg-surface-container-low"
  resize_label="Resize folder navigation"
  secondary_class="p-4"
>
  <:primary><nav aria-label="Folders"><h3 class="font-bold">Folders</h3><ul class="menu"><li><a href="#documents">Documents</a></li><li><a href="#projects">Projects with long prefixes</a></li></ul></nav></:primary>
  <section><h3 class="font-bold">Files</h3><p>Both pane contents stay visible when this preview becomes narrow.</p><input class="input" aria-label="Filter files" placeholder="Filter files" /></section>
</.dm_split_pane>

<.dm_split_pane
  id="split-pane-single-stacked"
  class="h-72 max-w-sm"
  primary_class="p-4 bg-surface-container-low"
  resize_label="Resize folder navigation"
  secondary_class="p-4"
>
  <:primary><nav aria-label="Folders"><h3 class="font-bold">Folders</h3><ul class="menu"><li><a href="#documents">Documents</a></li><li><a href="#projects">Projects with long prefixes</a></li></ul></nav></:primary>
  <section><h3 class="font-bold">Files</h3><p>Both pane contents stay visible when this preview becomes narrow.</p><input class="input" aria-label="Filter files" placeholder="Filter files" /></section>
</.dm_split_pane>