<div class="drawer">
  <c-lb.drawer.checkbox id="direct-drawer" />

  <c-lb.drawer.content>
    <div class="flex flex-col items-center justify-center p-4">
      <h2 class="text-2xl font-bold mb-4">Direct Sub-components</h2>
      <p class="mb-4 text-center">This drawer uses all sub-components directly without any slot overrides.</p>
      <c-lb.drawer.toggle for="direct-drawer" class="btn btn-primary">
        Open Direct Drawer
      </c-lb.drawer.toggle>
    </div>
  </c-lb.drawer.content>

  <c-lb.drawer.side class="z-99">
    <c-lb.drawer.overlay for="direct-drawer" />
    <div class="p-4 h-full bg-base-200 w-64">
      <h3 class="text-lg font-semibold mb-4">Direct Components</h3>
      <p class="mb-4">Every part is explicitly defined using sub-components.</p>
      <c-lb.menu class="bg-base-200 text-base-content rounded-box w-full">
        <c-lb.menu.item title="Home" />
        <c-lb.menu.item title="About" />
        <c-lb.menu.item title="Contact" />
        <c-lb.menu.item title="Settings" />
      </c-lb.menu>
    </div>
  </c-lb.drawer.side>
</div>
