## When to use

Create/edit flows that fit in one screen's worth of fields. A modal is fine for 2–3 fields, a full page for 20+ fields. The drawer occupies the middle ground and keeps the list context visible behind it.

## Simple create form

3–5 fields with primary + cancel actions. The default shape for "+ New X" triggers.

Public Team only Private

## Edit form with destructive action

Edit drawers pair a primary action with a destructive one in the footer. Delete sits on the left, Save on the right — separated by the spacer.

Quarterly planning doc Active Archived

## Long form — scroll body, sticky footer

The footer stays visible even when the form body overflows. This is why the sticky-footer pattern matters — users shouldn't have to scroll to find "Save".

#### General

#### Limits

#### Access

#### Notifications

## Anatomy

<drawer-ui text="New project" side="right" size="md"> <!-- scrollable body --> <section slot="body"> <col-ui gap="3"> <field-ui label="Name"> <input-ui required></input-ui> </field-ui> <field-ui label="Description"> <textarea-ui></textarea-ui> </field-ui> </col-ui> </section> <!-- sticky footer — single-cluster --> <footer slot="footer"> <span slot="action"> <button-ui text="Cancel" variant="ghost"></button-ui> <button-ui text="Create" variant="primary"></button-ui> </span> </footer> <!-- sticky footer — dual-cluster (destructive left, primary right) --> <footer slot="footer"> <span slot="action-leading"> <button-ui text="Delete" color="danger"></button-ui> </span> <span slot="action"> <button-ui text="Cancel" variant="ghost"></button-ui> <button-ui text="Save changes" variant="primary"></button-ui> </span> </footer> </drawer-ui>

## Rules

- The footer is opt-in — drawer-ui only mounts a footer slot when the author supplies one. Drawers without forms shouldn't add an empty one.
- For a single right-aligned action cluster, wrap the buttons in `<span slot="action">` — drawer's footer CSS self-aligns the slot to the end, no spacer needed.
- For a dual cluster (destructive action on the left + primary on the right), pair `<span slot="action-leading">` with `<span slot="action">`. The leading slot gets `margin-inline-end: auto` and pushes the trailing cluster to the opposite edge — no spacer required.
- Primary action last (right-most) — follows OS conventions.
- Wire close via `onclick="this.closest('drawer-ui').open=false"` on Cancel and on successful submit.
- If the form has unsaved changes, trap close via the `close` event and show a confirm — don't rely on the user remembering.