Drawer Base

<!-- Static preview — shows the drawer panel inline without overlay -->
<div class="ws-drawer mx-auto max-w-sm">
  <div class="flex flex-col overflow-hidden rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] shadow-xl">
    <!-- Header -->
    <div class="flex items-center justify-between border-b border-[var(--ws-color-border)] px-6 py-4">
      <h2 class="text-lg font-semibold text-[var(--ws-color-text)]">Details</h2>
      <button type="button" class="rounded-lg p-1 text-[var(--ws-color-text-muted)] transition hover:bg-[var(--ws-color-surface-alt)]" aria-label="Close drawer">
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
      </button>
    </div>
    <!-- Content -->
    <div class="flex-1 space-y-4 p-6">
      <div>
        <label class="mb-1 block text-sm font-medium text-[var(--ws-color-text-soft)]">Name</label>
        <input type="text" placeholder="Enter name" class="w-full rounded-lg border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] px-3 py-2 text-sm text-[var(--ws-color-text)] placeholder:text-[var(--ws-color-text-muted)] focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"/>
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-[var(--ws-color-text-soft)]">Email</label>
        <input type="email" placeholder="Enter email" class="w-full rounded-lg border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] px-3 py-2 text-sm text-[var(--ws-color-text)] placeholder:text-[var(--ws-color-text-muted)] focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"/>
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-[var(--ws-color-text-soft)]">Role</label>
        <select class="w-full rounded-lg border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] px-3 py-2 text-sm text-[var(--ws-color-text)] focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
          <option>Designer</option>
          <option>Developer</option>
          <option>Manager</option>
        </select>
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-[var(--ws-color-text-soft)]">Notes</label>
        <textarea rows="3" placeholder="Optional notes..." class="w-full rounded-lg border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] px-3 py-2 text-sm text-[var(--ws-color-text)] placeholder:text-[var(--ws-color-text-muted)] focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"></textarea>
      </div>
    </div>
    <!-- Footer -->
    <div class="flex justify-end gap-3 border-t border-[var(--ws-color-border)] px-6 py-4">
      <button type="button" class="rounded-lg border border-[var(--ws-color-border)] px-4 py-2 text-sm font-medium text-[var(--ws-color-text-soft)] transition hover:bg-[var(--ws-color-surface-alt)]">Cancel</button>
      <button type="button" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-indigo-700">Save</button>
    </div>
  </div>
</div>

<!--
  USAGE: In production, wrap in a fixed overlay:

  <div class="fixed inset-0 z-50 flex justify-end" hidden>
    <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" onclick="this.closest('[hidden]').hidden=true"></div>
    <div class="relative w-80 flex flex-col bg-[var(--ws-color-surface)] shadow-xl" role="dialog" aria-modal="true">
      ... drawer content here ...
    </div>
  </div>
-->