Shopping cart slide-out drawer. Place once at site root level. Visibility is driven by the `cart:open` state key — any Button with `action: { type: "toggle-cart" }` flips it (or `action: { type: "set-state", key: "cart:open", value: "shown" }` for explicit open). The optional backdrop reads the same key via `Container.visibilityStateKey: "cart:open"`. Shows cart items with quantity controls, subtotal, and checkout button.
Children: Container (header: title text + close Button with action toggle-cart), Container (footer: checkout Button with action cart-checkout + continue shopping Button with action toggle-cart). Cart items render automatically between header and footer from cart state. Quantity controls and remove buttons are component-rendered.
| Property | Type | Description | Examples |
|---|---|---|---|
position | string right | left | Which side the drawer slides in from Default: "right" | - |
showBackdrop | boolean | Show a semi-transparent backdrop behind the drawer Default: true | - |
canDelete | boolean | - Default: true | - |
canEditName | boolean | - Default: true | - |
custom | object | - | - |
className | string | Tailwind classes for the drawer container | flex flex-col |