Workspace with drawer

<div class="sidebar-layout" style="--sidebar-width: 14rem">
  <nav class="stack" data-gap="xs" aria-label="Workspace"><button class="button" data-variant="primary">Dashboard</button><button class="button" data-variant="ghost">Invoices</button><button class="button" data-variant="ghost">Customers</button><button class="button" data-variant="ghost">Reports</button><button class="button" data-variant="ghost">Settings</button></nav>
  <main class="stack" data-gap="lg">
    <div class="cluster" data-justify="between">
      <h1>Dashboard</h1>
      <div class="cluster" data-gap="sm"><button class="button" data-variant="outline">Export</button><button class="button" data-variant="primary" data-dialog-open="bp-drawer">New invoice…</button></div>
    </div>
    <div class="auto-grid" style="--grid-min: 12rem">
      <div class="card card-body">
        <div class="card-label">Outstanding</div>
        <div class="card-value">£12,450</div>
        <div class="card-delta"><svg class="icon" aria-hidden="true"><use href="#i-trending-up"/></svg> +4.2% this week</div>
      </div>
      <div class="card card-body">
        <div class="card-label">Paid this month</div>
        <div class="card-value">£48,900</div>
        <div class="card-delta"><svg class="icon" aria-hidden="true"><use href="#i-trending-up"/></svg> +12.5%</div>
      </div>
      <div class="card card-body">
        <div class="card-label">Overdue</div>
        <div class="card-value">3</div>
        <div class="card-delta"><svg class="icon" aria-hidden="true"><use href="#i-triangle-alert"/></svg> needs attention</div>
      </div>
    </div>
    <div class="center" data-measure="prose">
      <p>Body copy sits in a centred reading measure inside the content pane — the same primitives compose at page scale and inside a card. Resize the window: the sidebar wraps under the content when the pane would get too narrow, and the KPI grid packs from three columns to one, with no breakpoints defined anywhere.</p>
    </div>
  </main>
</div>
<dialog class="dialog" id="bp-drawer" aria-labelledby="bp-drawer-title" closedby="any">
  <form method="dialog">
    <div class="dialog__header">
      <h2 class="dialog__title" id="bp-drawer-title">New invoice</h2>
      <button type="submit" class="dialog__close" aria-label="Close dialog"><svg class="icon" aria-hidden="true"><use href="#i-x"/></svg></button>
    </div>
    <div class="dialog__body">
      <p>A form would live here — the drawer is the dialog Hyperpart unchanged: platform focus trap, Esc and backdrop close for free.</p>
    </div>
    <div class="dialog__footer"><button type="submit" class="button" data-variant="outline">Cancel</button><button type="submit" class="button" data-variant="primary" value="confirm">Create</button></div>
  </form>
</dialog>