# DrawerShell

> Multi-mode container island for cart profiles. Supports drawer-right, drawer-left, bottom-sheet, modal, fullscreen, and dropdown modes with responsive overrides.

Canonical URL: https://fa7e86e3d553:3005/islands/cart/drawer-shell

> **Cart Profile component.** The storefront generates DrawerShell from
> the resolved published cart profile. Do not place it in page source;
> configure it with `edit_cart`. Cart V2 is already enabled by default.

> Configure this component through `edit_cart`; do not add it to page source.

## Preview

**Category**: Commerce (Cart Profiles)

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| mode | "drawer-right" \| "drawer-left" \| "bottom-sheet" \| "modal" \| "fullscreen" \| "dropdown" | No | "drawer-right" | Opening style |
| responsive | `{ mobile?: string; tablet?: string }` | No | - | Per-breakpoint mode overrides |
| trigger | string | No | "cart:open" | CustomEvent name that opens the drawer |
| width | string | No | `var(--lx-cart-panel-width,440px)` | CSS width for drawer modes |
| maxHeight | string | No | "85vh" | Max height for bottom-sheet/modal |
| overlay | boolean | No | true | Show backdrop overlay |
| animate | boolean \| "spring" \| "smooth" | No | "smooth" | Animation style |
| swipeToDismiss | boolean | No | true | Enable swipe-down to close (bottom-sheet) |
| dragHandle | boolean | No | true | Show drag indicator (bottom-sheet) |
| headerLayout | `"single_row" \| "title_and_count"` | No | `"title_and_count"` | Header composition |
| countStyle | `"inline" \| "secondary" \| "hidden"` | No | `"secondary"` | Item-count placement |
| closeStyle | `"plain" \| "circle"` | No | `"circle"` | Close-control treatment |
| stickyHeader | boolean | No | true | Keep the cart heading visible while scrolling |
| stickyFooter | boolean | No | true | Keep checkout modules visible while scrolling |
| contentBackground | `"surface" \| "subtle"` | No | `"surface"` | Scroll-region background |

## Configuration example

Configure the shell through the cart profile, not page source:

```json
{
  "cart_mode": "drawer-right",
  "design_patch": {
    "shell": {
      "width": "wide",
      "header_layout": "title_and_count",
      "count_style": "secondary",
      "close_style": "circle",
      "sticky_header": true,
      "sticky_footer": true,
      "content_background": "subtle"
    },
    "responsive": {
      "mobile": {
        "shell": {
          "width": "standard"
        }
      }
    }
  }
}
```

## Events

| Event | Direction | Payload |
|-------|-----------|---------|
| cart:open | Listens | Opens the drawer (default trigger) |
| cart:close | Emits | Fired when drawer is closed by user |

## Tips

- Configure child blocks through `edit_cart`; they load when the drawer opens
- The effective profile contributes exactly one DrawerShell.
- Module order and enabled state come from the profile layout schema.
- CartLines + CartCheckoutButton are the minimum required children for a valid cart
- Use `responsive` to switch to `bottom-sheet` on mobile for a native feel
- The `swipeToDismiss` and `dragHandle` props only apply to `bottom-sheet` mode
- `animate:"spring"` gives a bouncy open/close; `"smooth"` is linear ease

## Stylable Parts

| Part | Description |
|------|-------------|
| `portal` | Fixed portal root |
| `overlay` | Overlay backdrop behind the drawer |
| `panel` | The drawer/modal panel itself |
| `header`, `header-title`, `header-count` | Cart heading and item count |
| `body`, `content`, `scroll-region` | Scrollable profile-module region |
| `footer` | Sticky or normal checkout region |
| `drag-handle` | Drag indicator bar (bottom-sheet only) |
| `close` | Close button |

```css
/* Example: rounded panel with custom shadow */
[data-section-id='SECTION'] [data-part='panel'] {
  border-radius: 1.5rem 0 0 1.5rem;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
}
```

## Related Islands

- [CartLines](/islands/cart/cart-lines) -- Line items display (required child)
- [CartCheckoutButton](/islands/cart/cart-checkout-button) -- Checkout CTA (required child)
- [CartSummary](/islands/cart/cart-summary) -- Totals display (recommended child)
- [CartProgressBar](/islands/cart/cart-progress-bar) -- Free shipping progress (optional child)
- [CartDiscountInput](/islands/cart/cart-discount-input) -- Promo code input (optional child)
- [CartDrawer](/islands/cart/cart-drawer) -- V1 monolithic alternative (no customization)