add docs

src/content/docs/dropins/cart/containers/cart-summary-list.mdx

@@ -39,7 +39,7 @@ The `CartSummaryList` container provides the following configuration options:
 | `slots` | `function` | No | Allows passing a container or custom component. |
 | `attributesToHide` | `string[]` | No | Attributes to hide. |
 | `enableRemoveItem` | `boolean` | No | Enable remove item. |
-| `enableUpdateItemQuantity` | `boolean` | No | Enable update item quantity. |
+| `enableUpdateItemQuantity` | `boolean \| { removeOnZero?: boolean }` | No | Enables the quantity stepper. Pass `{ removeOnZero: true }` to also remove the item when the quantity reaches `0`; defaults to `false`. |
 | `onItemsErrorsChange` | `function` | No | Callback function that changes the items errors. |
 | `accordion` | `boolean` | No | Toggle accordion view. |
 | `variant` | `primary \| secondary` | No | Cart variant. |
@@ -51,6 +51,7 @@ The `CartSummaryList` container provides the following configuration options:
 | `dropdownOptions` | `string[]` | No | An array of items to display in a dropdown menu. |
 | `undo` | `boolean` | No | Enables the undo banner to restore recently removed items to the cart. |
 | `includeOutOfStockItems` | `boolean` | No | Display out-of-stock and insufficient-quantity items in the main cart item list alongside in-stock items. Default: `false`. |
+| `confirmBeforeDelete` | `boolean` | No | Enables the confirmation banner when an item is removed from the cart. When set to true, clicking the remove button shows an inline confirmation banner instead of immediately deleting the item. |
 
 </TableWrapper>
 
@@ -70,6 +71,7 @@ The `CartSummaryList` container supports the following slots:
 * CartSummaryFooter
 * CartItem
 * UndoBanner
+* ConfirmDeleteBanner
 * ItemTitle
 * ItemPrice
 * ItemQuantity
@@ -86,6 +88,7 @@ provider.render(CartSummaryList, {
   enableRemoveItem: true,
   enableUpdateItemQuantity: true,
   showDiscount: true,
+  // confirmBeforeDelete: true,
   // accordion: true,
   // includeOutOfStockItems: true,
   // showMaxItems: false,

src/content/docs/dropins/cart/containers/mini-cart.mdx

@@ -37,9 +37,10 @@ The `MiniCart` container provides the following configuration options:
 | `showDiscount` | `boolean` | No | Flag to show discounts in the mini cart. |
 | `showSavings` | `boolean` | No | Flag to show savings in the mini cart. |
 | `enableItemRemoval` | `boolean` | Yes | Flag to enable removing items from the mini cart. When set to true, users can remove products from the cart directly in the mini cart interface. |
-| `enableQuantityUpdate` | `boolean` | No | Flag to enable updating item quantities in the mini cart. When set to true, users can adjust product quantities directly in the mini cart interface. |
+| `enableQuantityUpdate` | `boolean \| { removeOnZero?: boolean }` | No | Enables quantity updates in the mini cart. Pass `{ removeOnZero: true }` to also remove the item when the quantity reaches `0`; defaults to `false`. |
 | `hideHeading` | `boolean` | No | Flag to hide the heading in the mini cart. When set to true, the mini cart header will not be displayed. |
 | `undo` | `boolean` | No | Enables the undo banner to restore recently removed items to the cart. |
+| `confirmBeforeDelete` | `boolean` | No | Enables the confirmation banner when an item is removed from the cart. When set to true, clicking the remove button shows an inline confirmation banner instead of immediately deleting the item. |
 
 </TableWrapper>
 
@@ -61,6 +62,7 @@ The `MiniCart` container supports the following slots:
 * CartSummaryFooter
 * CartItem
 * UndoBanner
+* ConfirmDeleteBanner
 * ItemTitle
 * ItemPrice
 * ItemQuantity
@@ -85,5 +87,6 @@ provider.render(MiniCart, {
   // enableItemRemoval: true,
   // enableQuantityUpdate: true,
   // hideHeading: true,
+  // confirmBeforeDelete: true,
 })($miniCart);
 ```

src/content/docs/dropins/cart/slots.mdx

@@ -27,10 +27,10 @@ Do not use context methods inside other context methods (for example, `appendChi
 | Container | Slots |
 |-----------|-------|
 | [`CartSummaryGrid`](#cartsummarygrid-slots) | `Thumbnail` |
-| [`CartSummaryList`](#cartsummarylist-slots) | `Heading`, `EmptyCart`, `Footer`, `RowTotalFooter`, `Thumbnail`, `ProductAttributes`, `CartSummaryFooter`, `CartItem`, `UndoBanner`, `ItemTitle`, `ItemPrice`, `ItemQuantity`, `ItemTotal`, `ItemSku`, `ItemRemoveAction` |
+| [`CartSummaryList`](#cartsummarylist-slots) | `Heading`, `EmptyCart`, `Footer`, `RowTotalFooter`, `Thumbnail`, `ProductAttributes`, `CartSummaryFooter`, `CartItem`, `UndoBanner`, `ConfirmDeleteBanner`, `ItemTitle`, `ItemPrice`, `ItemQuantity`, `ItemTotal`, `ItemSku`, `ItemRemoveAction` |
 | [`CartSummaryTable`](#cartsummarytable-slots) | `Item`, `Price`, `Quantity`, `Subtotal`, `Thumbnail`, `ProductTitle`, `Sku`, `Configurations`, `ItemAlert`, `ItemWarning`, `Actions`, `UndoBanner`, `EmptyCart` |
 | [`GiftOptions`](#giftoptions-slots) | `SwatchImage` |
-| [`MiniCart`](#minicart-slots) | `ProductList`, `ProductListFooter`, `PreCheckoutSection`, `Thumbnail`, `Heading`, `EmptyCart`, `Footer`, `RowTotalFooter`, `ProductAttributes`, `CartSummaryFooter`, `CartItem`, `UndoBanner`, `ItemTitle`, `ItemPrice`, `ItemQuantity`, `ItemTotal`, `ItemSku`, `ItemRemoveAction` |
+| [`MiniCart`](#minicart-slots) | `ProductList`, `ProductListFooter`, `PreCheckoutSection`, `Thumbnail`, `Heading`, `EmptyCart`, `Footer`, `RowTotalFooter`, `ProductAttributes`, `CartSummaryFooter`, `CartItem`, `UndoBanner`, `ConfirmDeleteBanner`, `ItemTitle`, `ItemPrice`, `ItemQuantity`, `ItemTotal`, `ItemSku`, `ItemRemoveAction` |
 | [`OrderSummary`](#ordersummary-slots) | `EstimateShipping`, `Coupons`, `GiftCards` |
 
 </TableWrapper>
@@ -98,6 +98,11 @@ interface CartSummaryListProps {
     onUndo: () => void;
     onDismiss: () => void;
     }>;
+    ConfirmDeleteBanner?: SlotProps<{
+    item: CartModel['items'][number];
+    onConfirm: () => void;
+    onCancel: () => void;
+    }>;
     ItemTitle?: SlotProps<{ item: CartModel['items'][number] }>;
     ItemPrice?: SlotProps<{ item: CartModel['items'][number] }>;
     ItemQuantity?: SlotProps<{
@@ -337,6 +342,44 @@ await provider.render(CartSummaryList, {
 })(block);
 ```
 
+### ConfirmDeleteBanner slot
+
+The `ConfirmDeleteBanner` slot lets you replace the default confirmation banner that appears when `confirmBeforeDelete={true}` and a shopper reduces an item's quantity to 0 or clicks the remove button. Use it to customize the banner's appearance, message text, and action buttons.
+
+#### Context
+
+The slot receives the following context:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `item` | `CartModel['items'][number]` | The cart item pending deletion. |
+| `onConfirm` | `() => void` | Call to confirm deletion and trigger the remove API. |
+| `onCancel` | `() => void` | Call to dismiss the banner and restore the item row with its original quantity. |
+
+#### Example
+
+```js
+import { render as provider } from '@dropins/storefront-cart/render.js';
+import { CartSummaryList } from '@dropins/storefront-cart/containers/CartSummaryList.js';
+
+await provider.render(CartSummaryList, {
+  confirmBeforeDelete: true,
+  slots: {
+    ConfirmDeleteBanner: (ctx) => {
+      const banner = document.createElement('div');
+      banner.innerHTML = `
+        <p>Remove "${ctx.item.name}" from your cart?</p>
+        <button id="confirm">Remove</button>
+        <button id="cancel">Keep it</button>
+      `;
+      banner.querySelector('#confirm').addEventListener('click', ctx.onConfirm);
+      banner.querySelector('#cancel').addEventListener('click', ctx.onCancel);
+      ctx.appendChild(banner);
+    }
+  }
+})(block);
+```
+
 ### ItemTitle slot
 
 The `ItemTitle` slot allows you to customize the item title section of the `CartSummaryList` container.
@@ -536,6 +579,11 @@ interface MiniCartProps {
     onUndo: () => void;
     onDismiss: () => void;
     }>;
+    ConfirmDeleteBanner?: SlotProps<{
+    item: CartModel['items'][number];
+    onConfirm: () => void;
+    onCancel: () => void;
+    }>;
     ItemTitle?: SlotProps<{ item: CartModel['items'][number] }>;
     ItemPrice?: SlotProps<{ item: CartModel['items'][number] }>;
     ItemQuantity?: SlotProps<{
@@ -820,6 +868,44 @@ await provider.render(MiniCart, {
 })(block);
 ```
 
+### ConfirmDeleteBanner slot
+
+The `ConfirmDeleteBanner` slot lets you replace the default confirmation banner that appears when `confirmBeforeDelete={true}` and a shopper clicks the remove button. Use it to customize the banner's appearance, message text, and action buttons.
+
+#### Context
+
+The slot receives the following context:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `item` | `CartModel['items'][number]` | The cart item pending deletion. |
+| `onConfirm` | `() => void` | Call to confirm deletion and trigger the remove API. |
+| `onCancel` | `() => void` | Call to dismiss the banner and restore the item row with its original quantity. |
+
+#### Example
+
+```js
+import { render as provider } from '@dropins/storefront-cart/render.js';
+import { MiniCart } from '@dropins/storefront-cart/containers/MiniCart.js';
+
+await provider.render(MiniCart, {
+  confirmBeforeDelete: true,
+  slots: {
+    ConfirmDeleteBanner: (ctx) => {
+      const banner = document.createElement('div');
+      banner.innerHTML = `
+        <p>Remove "${ctx.item.name}" from your cart?</p>
+        <button id="confirm">Remove</button>
+        <button id="cancel">Keep it</button>
+      `;
+      banner.querySelector('#confirm').addEventListener('click', ctx.onConfirm);
+      banner.querySelector('#cancel').addEventListener('click', ctx.onCancel);
+      ctx.appendChild(banner);
+    }
+  }
+})(block);
+```
+
 ### ItemTitle slot
 
 The `ItemTitle` slot allows you to customize the item title section of the `MiniCart` container.