Tree view

<div class="tree" role="group" aria-label="Files">
  <ul>
    <li>
      <details open>
        <summary><svg class="icon tree-caret" viewBox="0 0 24 24" aria-hidden="true">…</svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><span>Website</span></summary>
        <ul>
          <li>
            <details open>
              <summary><svg class="icon tree-caret" viewBox="0 0 24 24" aria-hidden="true">…</svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><span>Pages</span></summary>
              <ul>
                <li>
                  <div class="tree-leaf">
                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><span>index.html</span><span class="muted text-xs">4 KB</span>
                  </div>
                </li>
                <li>
                  <div class="tree-leaf">
                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><span>pricing.html</span><span class="muted text-xs">6 KB</span>
                  </div>
                </li>
              </ul>
            </details>
          </li>
          <li>
            <details>
              <summary><svg class="icon tree-caret" viewBox="0 0 24 24" aria-hidden="true">…</svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><span>Images</span></summary>
              <ul>
                <li>
                  <div class="tree-leaf">
                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><span>hero.png</span>
                  </div>
                </li>
              </ul>
            </details>
          </li>
        </ul>
      </details>
    </li>
    <li>
      <div class="tree-leaf">
        <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><span>README.md</span>
      </div>
    </li>
  </ul>
</div>

<div class="tree" role="group" aria-label="Permissions">
  <ul>
    <li>
      <div class="tree-leaf">
        <input type="checkbox" class="checkbox" checked aria-label="Select Projects"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><span>Projects</span>
      </div>
      <ul>
        <li>
          <div class="tree-leaf">
            <input type="checkbox" class="checkbox" checked aria-label="Select View"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><span>View</span>
          </div>
        </li>
        <li>
          <div class="tree-leaf">
            <input type="checkbox" class="checkbox" checked aria-label="Select Edit"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><span>Edit</span>
          </div>
        </li>
        <li>
          <div class="tree-leaf">
            <input type="checkbox" class="checkbox" aria-label="Select Delete"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><span>Delete</span>
          </div>
        </li>
      </ul>
    </li>
    <li>
      <div class="tree-leaf">
        <input type="checkbox" class="checkbox" aria-label="Select Billing"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><span>Billing</span>
      </div>
      <ul>
        <li>
          <div class="tree-leaf">
            <input type="checkbox" class="checkbox" aria-label="Select View invoices"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg><span>View invoices</span>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</div>