astro-component-kit 0.3.1 → 0.4.1

package/src/components/lib/ecommerce/CartPageList.astro

@@ -0,0 +1,290 @@
+---
+/**
+ * CartPageList — Full shopping-bag page: line items with quantity and remove, gift note,
+ * free-shipping progress and a summary card with the checkout button. Reads the cart store live.
+ *
+ * @param {string} cartKey - Cart storage key. Default 'ack-cart'.
+ * @param {string} title - Page heading. Default 'Your bag'.
+ * @param {string} checkoutHref - Checkout URL. Default '#'.
+ * @param {string} continueHref - "Continue shopping" URL. Default '#'.
+ * @param {number} freeShippingThreshold - Free shipping from this subtotal (0 hides it). Default 150.
+ * @param {number} shippingFlat - Shipping estimate below the threshold. Default 8.
+ * @param {string} currency - ISO currency. Default 'EUR'.
+ * @param {string} locale - Number format locale. Default 'en-GB'.
+ * @param {CartItem[]} demoItems - Seeds an empty cart once (demos only).
+ * @param {string} variant - Style (editorial|card). Default 'editorial'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: one h1; the item list is a real list with labelled quantity buttons;
+ * totals are a polite live region; removing an item moves focus to the next row (or the heading).
+ */
+import type { CartItem } from './types';
+
+interface Props {
+  cartKey?: string;
+  title?: string;
+  checkoutHref?: string;
+  continueHref?: string;
+  freeShippingThreshold?: number;
+  shippingFlat?: number;
+  currency?: string;
+  locale?: string;
+  demoItems?: CartItem[];
+  variant?: 'editorial' | 'card';
+  className?: string;
+}
+
+const {
+  cartKey = 'ack-cart',
+  title = 'Your bag',
+  checkoutHref = '#',
+  continueHref = '#',
+  freeShippingThreshold = 150,
+  shippingFlat = 8,
+  currency = 'EUR',
+  locale = 'en-GB',
+  demoItems = [],
+  variant = 'editorial',
+  className = '',
+} = Astro.props;
+---
+
+<section
+  class:list={['bag', `bag--${variant}`, className]}
+  aria-labelledby="bag-title"
+  data-bag
+  data-key={cartKey}
+  data-currency={currency}
+  data-locale={locale}
+  data-free={freeShippingThreshold}
+  data-ship={shippingFlat}
+  data-seed={demoItems.length ? JSON.stringify(demoItems) : undefined}
+>
+  <header class="bag__head">
+    <h1 class="bag__title" id="bag-title" tabindex="-1">{title} <sup data-count></sup></h1>
+    <a class="bag__continue" href={continueHref}>← Continue shopping</a>
+  </header>
+
+  <div class="bag__layout">
+    <div class="bag__main">
+      <div class="bag__cols" aria-hidden="true"><span>Item</span><span>Quantity</span><span>Total</span></div>
+      <ul class="bag__lines" data-lines aria-label="Items in your bag"></ul>
+      <div class="bag__empty" data-empty hidden>
+        <p class="bag__empty-title">Your bag is empty.</p>
+        <p>Pieces you add will wait here for you.</p>
+        <a class="bag__btn" href={continueHref}>Discover the collection</a>
+      </div>
+      <details class="bag__note" data-note-wrap>
+        <summary>Add a gift note</summary>
+        <label class="sr-only" for="bag-note">Gift note</label>
+        <textarea id="bag-note" rows="3" maxlength="200" placeholder="Write a short message — we'll print it on a card." data-note></textarea>
+      </details>
+    </div>
+
+    <aside class="bag__summary" aria-label="Order summary" data-summary>
+      <div class="bag__ship" data-ship-wrap>
+        <p data-ship-text></p>
+        <div class="bag__ship-bar" aria-hidden="true"><span data-ship-bar></span></div>
+      </div>
+      <dl class="bag__totals" aria-live="polite">
+        <div><dt>Subtotal</dt><dd data-t="subtotal">—</dd></div>
+        <div><dt>Shipping</dt><dd data-t="shipping">—</dd></div>
+        <div class="bag__total"><dt>Estimated total</dt><dd data-t="total">—</dd></div>
+      </dl>
+      <p class="bag__taxes">Taxes included. Discount codes are applied at checkout.</p>
+      <a class="bag__btn bag__btn--block" href={checkoutHref} data-checkout>Checkout</a>
+      <ul class="bag__assurance">
+        <li>Free returns within 30 days</li>
+        <li>Secure payment · Cards, PayPal, Apple Pay</li>
+      </ul>
+    </aside>
+  </div>
+</section>
+
+<script>
+  import { createCart, formatMoney } from './cart-store';
+  import { productIcon } from './product-icons';
+  import type { CartItem } from './types';
+
+  document.querySelectorAll<HTMLElement>('[data-bag]:not([data-bound])').forEach((root) => {
+    root.dataset.bound = '';
+    const cart = createCart(root.dataset.key);
+    const money = { currency: root.dataset.currency, locale: root.dataset.locale };
+    const free = Number(root.dataset.free) || 0;
+    const flat = Number(root.dataset.ship) || 0;
+    const list = root.querySelector<HTMLUListElement>('[data-lines]')!;
+    const empty = root.querySelector<HTMLElement>('[data-empty]')!;
+    const summary = root.querySelector<HTMLElement>('[data-summary]')!;
+    const cols = root.querySelector<HTMLElement>('.bag__cols')!;
+    const noteWrap = root.querySelector<HTMLElement>('[data-note-wrap]')!;
+    const note = root.querySelector<HTMLTextAreaElement>('[data-note]')!;
+    const heading = root.querySelector<HTMLElement>('#bag-title')!;
+    const out = (k: string) => root.querySelector<HTMLElement>(`[data-t="${k}"]`)!;
+    const noteKey = `${cart.key}:note`;
+
+    if (root.dataset.seed) { try { cart.seed(JSON.parse(root.dataset.seed)); } catch { /* ignore */ } }
+    try { note.value = window.localStorage.getItem(noteKey) || ''; } catch { /* ignore */ }
+    note.addEventListener('input', () => { try { window.localStorage.setItem(noteKey, note.value); } catch { /* ignore */ } });
+
+    const make = <K extends keyof HTMLElementTagNameMap>(tag: K, cls: string, text?: string) => {
+      const n = document.createElement(tag);
+      n.className = cls;
+      if (text !== undefined) n.textContent = text;
+      return n;
+    };
+
+    function row(item: CartItem, i: number, all: CartItem[]) {
+      const li = make('li', 'bag-line');
+      const media = make('div', 'bag-line__media');
+      media.style.setProperty('--h', String(item.hue ?? 30));
+      media.innerHTML = item.image
+        ? `<img src="${encodeURI(item.image)}" alt="">`
+        : `<svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${productIcon(item.icon)}</svg>`;
+      const info = make('div', 'bag-line__info');
+      info.append(make('p', 'bag-line__name', item.name));
+      if (item.variant) info.append(make('p', 'bag-line__meta', item.variant));
+      info.append(make('p', 'bag-line__unit', formatMoney(item.price, money)));
+      const remove = make('button', 'bag-line__remove', 'Remove');
+      remove.type = 'button';
+      remove.setAttribute('aria-label', `Remove ${item.name}`);
+      remove.addEventListener('click', () => {
+        const next = all[i + 1] ?? all[i - 1];
+        cart.remove(item.id);
+        const target = next ? root.querySelector<HTMLElement>(`[aria-label="Remove ${CSS.escape(next.name)}"]`) : null;
+        (target ?? heading).focus();
+      });
+      info.append(remove);
+
+      const qty = make('div', 'bag-line__qty');
+      const minus = make('button', 'bag-line__step', '−');
+      minus.type = 'button';
+      minus.setAttribute('aria-label', `Decrease quantity of ${item.name}`);
+      minus.addEventListener('click', () => cart.setQty(item.id, item.qty - 1));
+      const count = make('span', 'bag-line__count', String(item.qty));
+      const plus = make('button', 'bag-line__step', '+');
+      plus.type = 'button';
+      plus.setAttribute('aria-label', `Increase quantity of ${item.name}`);
+      plus.addEventListener('click', () => cart.setQty(item.id, item.qty + 1));
+      qty.append(minus, count, plus);
+
+      li.append(media, info, qty, make('p', 'bag-line__total', formatMoney(item.price * item.qty, money)));
+      return li;
+    }
+
+    function render() {
+      const items = cart.items();
+      const focused = document.activeElement?.getAttribute('aria-label');
+      list.replaceChildren(...items.map((it, i) => row(it, i, items)));
+      const has = items.length > 0;
+      empty.hidden = has;
+      summary.hidden = !has;
+      cols.hidden = !has;
+      noteWrap.hidden = !has;
+      const count = items.reduce((n, i) => n + i.qty, 0);
+      root.querySelector('[data-count]')!.textContent = has ? `(${count})` : '';
+      const subtotal = items.reduce((n, i) => n + i.qty * i.price, 0);
+      const shipping = !has || (free > 0 && subtotal >= free) ? 0 : flat;
+      out('subtotal').textContent = formatMoney(subtotal, money);
+      out('shipping').textContent = shipping === 0 ? 'Free' : formatMoney(shipping, money);
+      out('total').textContent = formatMoney(subtotal + shipping, money);
+      const shipWrap = root.querySelector<HTMLElement>('[data-ship-wrap]')!;
+      shipWrap.hidden = free <= 0;
+      const left = Math.max(0, free - subtotal);
+      root.querySelector('[data-ship-text]')!.textContent = left > 0 ? `${formatMoney(left, money)} away from free shipping` : 'Free shipping unlocked';
+      root.querySelector<HTMLElement>('[data-ship-bar]')!.style.width = `${free ? Math.min(100, (subtotal / free) * 100) : 100}%`;
+      if (focused && !root.contains(document.activeElement)) {
+        root.querySelector<HTMLElement>(`[aria-label="${CSS.escape(focused)}"]`)?.focus();
+      }
+    }
+
+    render();
+    cart.subscribe(render);
+  });
+</script>
+
+<style>
+  .bag { container-type: inline-size; min-width: 0; }
+  .bag__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4, 1rem); padding-bottom: var(--sp-5, 1.25rem); border-bottom: 1px solid var(--c-text-1, #fff); }
+  .bag__title { margin: 0; font-family: var(--font-display, Georgia, 'Times New Roman', serif); font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1; color: var(--c-text-1, #fff); outline: none; }
+  .bag__title sup { font-family: var(--font-sans, system-ui); font-size: 0.9rem; letter-spacing: 0; vertical-align: super; color: var(--c-text-2, #a3a3a3); }
+  .bag__continue { min-height: 44px; display: inline-flex; align-items: center; font-size: 0.88rem; color: var(--c-text-1, #fff); text-decoration: underline; text-underline-offset: 4px; }
+
+  .bag__layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-top: var(--sp-6, 1.5rem); }
+  .bag__cols { display: grid; grid-template-columns: 1fr 140px 110px; padding-bottom: var(--sp-3, 0.75rem); border-bottom: 1px solid var(--c-border, rgba(255, 255, 255, 0.1)); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-2, #a3a3a3); }
+  .bag__cols span:nth-child(3) { text-align: right; }
+  .bag__cols[hidden] { display: none; }
+
+  .bag__lines { margin: 0; padding: 0; list-style: none; }
+  .bag__lines :global(.bag-line) {
+    display: grid;
+    grid-template-columns: 96px 1fr 140px 110px;
+    gap: var(--sp-4, 1rem);
+    align-items: start;
+    padding: var(--sp-5, 1.25rem) 0;
+    border-bottom: 1px solid var(--c-border, rgba(255, 255, 255, 0.1));
+  }
+  .bag__lines :global(.bag-line__media) {
+    display: grid;
+    place-items: center;
+    aspect-ratio: 3 / 4;
+    color: hsl(var(--h) var(--pm-ink-s, 80%) var(--pm-ink-l, 80%));
+    background: linear-gradient(160deg, hsl(var(--h) 40% 50% / 0.18), var(--c-bg-2, #111));
+    border-radius: var(--r-sm, 2px);
+  }
+  .bag__lines :global(.bag-line__media svg) { width: 58%; }
+  .bag__lines :global(.bag-line__media img) { width: 100%; height: 100%; object-fit: cover; }
+  .bag__lines :global(.bag-line__info) { display: grid; gap: 2px; min-width: 0; }
+  .bag__lines :global(.bag-line__name) { margin: 0; font-family: var(--font-display, Georgia, serif); font-size: 1.1rem; color: var(--c-text-1, #fff); }
+  .bag__lines :global(.bag-line__meta), .bag__lines :global(.bag-line__unit) { margin: 0; font-size: 0.82rem; color: var(--c-text-2, #a3a3a3); }
+  .bag__lines :global(.bag-line__remove) { justify-self: start; min-height: 36px; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--c-text-1, #fff); font: inherit; font-size: 0.8rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
+  .bag__lines :global(.bag-line__qty) { display: inline-flex; align-items: center; width: fit-content; border: 1px solid var(--c-border, rgba(255, 255, 255, 0.15)); border-radius: var(--r-sm, 2px); }
+  .bag__lines :global(.bag-line__step) { width: 40px; height: 40px; border: 0; background: none; color: var(--c-text-1, #fff); font-size: 1rem; cursor: pointer; }
+  .bag__lines :global(.bag-line__step:hover) { background: rgb(var(--ink-rgb, 255 255 255) / 0.06); }
+  .bag__lines :global(.bag-line__count) { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; color: var(--c-text-1, #fff); }
+  .bag__lines :global(.bag-line__total) { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--c-text-1, #fff); font-weight: 600; }
+  .bag :global(button:focus-visible), .bag a:focus-visible, .bag summary:focus-visible, .bag textarea:focus-visible { outline: 2px solid var(--shop-accent, var(--c-primary-light, #d4a017)); outline-offset: 2px; }
+
+  .bag__empty { display: grid; justify-items: start; gap: var(--sp-2, 0.5rem); padding: var(--sp-10, 2.5rem) 0; }
+  .bag__empty[hidden] { display: none; }
+  .bag__empty p { margin: 0; color: var(--c-text-2, #a3a3a3); }
+  .bag__empty-title { font-family: var(--font-display, Georgia, serif); font-size: 1.6rem; color: var(--c-text-1, #fff) !important; }
+
+  .bag__note { margin-top: var(--sp-5, 1.25rem); }
+  .bag__note[hidden] { display: none; }
+  .bag__note summary { min-height: 44px; display: flex; align-items: center; font-size: 0.88rem; color: var(--c-text-1, #fff); cursor: pointer; }
+  .bag__note textarea { width: 100%; padding: var(--sp-3, 0.75rem); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.15)); border-radius: var(--r-sm, 2px); background: transparent; color: var(--c-text-1, #fff); font: inherit; font-size: 0.9rem; resize: vertical; }
+
+  .bag__summary { position: sticky; top: calc(var(--shop-header-h, 0px) + 1.5rem); display: grid; gap: var(--sp-4, 1rem); padding: var(--sp-6, 1.5rem); background: var(--c-bg-1, #0a0a0a); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.1)); }
+  .bag--card .bag__summary { border-radius: var(--r-lg, 20px); }
+  .bag__summary[hidden] { display: none; }
+  .bag__ship p { margin: 0 0 var(--sp-2, 0.5rem); font-size: 0.85rem; color: var(--c-text-1, #fff); }
+  .bag__ship[hidden] { display: none; }
+  .bag__ship-bar { height: 3px; background: rgb(var(--ink-rgb, 255 255 255) / 0.12); }
+  .bag__ship-bar span { display: block; height: 100%; width: 0; background: var(--shop-accent, var(--c-primary-light, #d4a017)); transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
+  .bag__totals { display: grid; gap: var(--sp-2, 0.5rem); margin: 0; }
+  .bag__totals div { display: flex; justify-content: space-between; font-size: 0.9rem; }
+  .bag__totals dt { color: var(--c-text-2, #a3a3a3); }
+  .bag__totals dd { margin: 0; color: var(--c-text-1, #fff); font-variant-numeric: tabular-nums; }
+  .bag__total { padding-top: var(--sp-3, 0.75rem); border-top: 1px solid var(--c-border, rgba(255, 255, 255, 0.1)); }
+  .bag__totals .bag__total dt { color: var(--c-text-1, #fff); font-weight: 600; }
+  .bag__totals .bag__total dd { font-size: 1.25rem; font-weight: 700; }
+  .bag__taxes { margin: 0; font-size: 0.78rem; color: var(--c-text-2, #a3a3a3); }
+  .bag__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.5rem; border-radius: var(--r-sm, 2px); background: var(--c-text-1, #fff); color: var(--c-bg, #050505); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; }
+  .bag__btn:hover { background: var(--shop-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); }
+  .bag__btn--block { width: 100%; }
+  .bag__assurance { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 0.78rem; color: var(--c-text-2, #a3a3a3); }
+  .bag__assurance li::before { content: '— '; }
+
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+  @container (max-width: 900px) {
+    .bag__layout { grid-template-columns: 1fr; }
+    .bag__summary { position: static; }
+  }
+  @container (max-width: 600px) {
+    .bag__cols { display: none; }
+    .bag__lines :global(.bag-line) { grid-template-columns: 84px 1fr; }
+    .bag__lines :global(.bag-line__qty) { grid-column: 2; }
+    .bag__lines :global(.bag-line__total) { grid-column: 2; text-align: left; }
+  }
+</style>

package/src/components/lib/ecommerce/CartToast.astro

@@ -0,0 +1,276 @@
+---
+/**
+ * CartToast — Stacked live notifications for the shop: "Added to cart" (with a View cart
+ * action) whenever an add-to-cart button skips the drawer, plus any custom notice sent with
+ * `document.dispatchEvent(new CustomEvent('ack:notify', { detail: { title, text, tone } }))`.
+ *
+ * @param {string} cartKey - Only react to this cart. Default 'ack-cart'.
+ * @param {string} position - Screen corner (bottom-right|bottom-left|top-right|top-center). Default 'bottom-right'.
+ * @param {number} duration - Auto-dismiss delay in ms (paused on hover/focus). Default 4500.
+ * @param {number} max - Maximum toasts visible at once. Default 3.
+ * @param {string} addedTitle - Title for cart notices. Default 'Added to cart'.
+ * @param {string} actionLabel - Cart action label. Default 'View cart'.
+ * @param {boolean} always - Also toast when the drawer opens on add. Default false.
+ * @param {boolean} demo - Render one static example toast (docs/previews). Default false.
+ * @param {string} variant - Style (glass|solid). Default 'glass'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: polite live region (role="status"), every toast has a close button,
+ * timers pause while hovered or focused, motion is removed with prefers-reduced-motion.
+ */
+interface Props {
+  cartKey?: string;
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-center';
+  duration?: number;
+  max?: number;
+  addedTitle?: string;
+  actionLabel?: string;
+  always?: boolean;
+  demo?: boolean;
+  variant?: 'glass' | 'solid';
+  className?: string;
+}
+
+const {
+  cartKey = 'ack-cart',
+  position = 'bottom-right',
+  duration = 4500,
+  max = 3,
+  addedTitle = 'Added to cart',
+  actionLabel = 'View cart',
+  always = false,
+  demo = false,
+  variant = 'glass',
+  className = '',
+} = Astro.props;
+---
+
+<div
+  class:list={['cart-toasts', `cart-toasts--${position}`, `cart-toasts--${variant}`, { 'cart-toasts--demo': demo }, className]}
+  role="status"
+  aria-live="polite"
+  data-cart-toasts
+  data-key={cartKey}
+  data-duration={duration}
+  data-max={max}
+  data-title={addedTitle}
+  data-action={actionLabel}
+  data-always={always ? '' : undefined}
+>
+  {demo && (
+    <div class="cart-toast cart-toast--success">
+      <span class="cart-toast__icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>
+      <div class="cart-toast__body"><p class="cart-toast__title">{addedTitle}</p><p class="cart-toast__text">Aurora Wireless Headphones · Graphite</p></div>
+      <button class="cart-toast__action" type="button">{actionLabel}</button>
+      <button class="cart-toast__close" type="button" aria-label="Dismiss">×</button>
+      <span class="cart-toast__timer" aria-hidden="true"></span>
+    </div>
+    <div class="cart-toast cart-toast--warning">
+      <span class="cart-toast__icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg></span>
+      <div class="cart-toast__body"><p class="cart-toast__title">Only 2 left in stock</p><p class="cart-toast__text">Drift Everyday Sneakers · size 42</p></div>
+      <button class="cart-toast__close" type="button" aria-label="Dismiss">×</button>
+    </div>
+  )}
+</div>
+
+<script>
+  import { ADDED_EVENT, NOTIFY_EVENT } from './cart-store';
+
+  const ICONS: Record<string, string> = {
+    success: '<path d="M20 6 9 17l-5-5"/>',
+    info: '<circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/>',
+    warning: '<path d="M12 9v4M12 17h.01"/><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/>',
+    danger: '<circle cx="12" cy="12" r="9"/><path d="m15 9-6 6M9 9l6 6"/>',
+  };
+
+  document.querySelectorAll<HTMLElement>('[data-cart-toasts]:not([data-bound])').forEach((region) => {
+    region.dataset.bound = '';
+    if (region.classList.contains('cart-toasts--demo')) return;
+    const duration = Number(region.dataset.duration) || 4500;
+    const max = Number(region.dataset.max) || 3;
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    function show(opts: { title: string; text?: string; tone?: string; action?: { label: string; run: () => void } }) {
+      const tone = ICONS[opts.tone || ''] ? opts.tone! : 'info';
+      const toast = document.createElement('div');
+      toast.className = `cart-toast cart-toast--${tone}`;
+      toast.style.setProperty('--toast-ms', `${duration}ms`);
+      toast.innerHTML = `<span class="cart-toast__icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">${ICONS[tone]}</svg></span>`;
+      const body = document.createElement('div');
+      body.className = 'cart-toast__body';
+      const title = document.createElement('p');
+      title.className = 'cart-toast__title';
+      title.textContent = opts.title;
+      body.append(title);
+      if (opts.text) {
+        const text = document.createElement('p');
+        text.className = 'cart-toast__text';
+        text.textContent = opts.text;
+        body.append(text);
+      }
+      toast.append(body);
+      if (opts.action) {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'cart-toast__action';
+        btn.textContent = opts.action.label;
+        btn.addEventListener('click', () => { opts.action!.run(); dismiss(); });
+        toast.append(btn);
+      }
+      const close = document.createElement('button');
+      close.type = 'button';
+      close.className = 'cart-toast__close';
+      close.setAttribute('aria-label', 'Dismiss notification');
+      close.textContent = '×';
+      close.addEventListener('click', () => dismiss());
+      const bar = document.createElement('span');
+      bar.className = 'cart-toast__timer';
+      bar.setAttribute('aria-hidden', 'true');
+      toast.append(close, bar);
+
+      let left = duration;
+      let started = Date.now();
+      let timer = window.setTimeout(() => dismiss(), left);
+      const pause = () => { window.clearTimeout(timer); left -= Date.now() - started; toast.classList.add('is-paused'); };
+      const resume = () => { started = Date.now(); timer = window.setTimeout(() => dismiss(), Math.max(800, left)); toast.classList.remove('is-paused'); };
+      toast.addEventListener('mouseenter', pause);
+      toast.addEventListener('mouseleave', resume);
+      toast.addEventListener('focusin', pause);
+      toast.addEventListener('focusout', resume);
+
+      function dismiss() {
+        window.clearTimeout(timer);
+        if (!toast.isConnected) return;
+        toast.classList.add('is-leaving');
+        window.setTimeout(() => toast.remove(), reduced ? 0 : 220);
+      }
+
+      region.append(toast);
+      while (region.children.length > max) region.firstElementChild?.remove();
+    }
+
+    document.addEventListener(ADDED_EVENT, (e) => {
+      const d = (e as CustomEvent).detail || {};
+      if (d.key && d.key !== region.dataset.key) return;
+      if (d.openCart && !region.hasAttribute('data-always')) return;
+      const item = d.item || {};
+      show({
+        title: region.dataset.title || 'Added to cart',
+        text: [item.name, item.variant].filter(Boolean).join(' · ') + (item.qty > 1 ? ` × ${item.qty}` : ''),
+        tone: 'success',
+        action: {
+          label: region.dataset.action || 'View cart',
+          run: () => document.dispatchEvent(new CustomEvent('ack:cart-open', { detail: { key: region.dataset.key } })),
+        },
+      });
+    });
+
+    document.addEventListener(NOTIFY_EVENT, (e) => {
+      const d = (e as CustomEvent).detail || {};
+      if (d.title) show({ title: d.title, text: d.text, tone: d.tone });
+    });
+  });
+</script>
+
+<style>
+  .cart-toasts {
+    position: fixed;
+    z-index: 1100;
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-2, 0.5rem);
+    width: min(380px, calc(100vw - 2rem));
+    pointer-events: none;
+  }
+  .cart-toasts--bottom-right { right: 1rem; bottom: 1rem; }
+  .cart-toasts--bottom-left { left: 1rem; bottom: 1rem; }
+  .cart-toasts--top-right { right: 1rem; top: 1rem; flex-direction: column-reverse; }
+  .cart-toasts--top-center { left: 50%; top: 1rem; transform: translateX(-50%); flex-direction: column-reverse; }
+  .cart-toasts--demo { position: relative; inset: auto; transform: none; margin: 0 auto; }
+
+  .cart-toasts :global(.cart-toast) {
+    --tone: var(--c-primary-light, #d4a017);
+    position: relative;
+    display: grid;
+    grid-template-columns: auto 1fr auto auto;
+    align-items: center;
+    gap: var(--sp-3, 0.75rem);
+    padding: var(--sp-3, 0.75rem) var(--sp-3, 0.75rem) var(--sp-3, 0.75rem) var(--sp-4, 1rem);
+    border-radius: var(--r-md, 12px);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
+    background: rgb(var(--paper-rgb, 5 5 5) / 0.86);
+    backdrop-filter: blur(16px) saturate(1.4);
+    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
+    color: var(--c-text-1, #fff);
+    overflow: hidden;
+    pointer-events: auto;
+    animation: ct-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .cart-toasts--solid :global(.cart-toast) { background: var(--c-bg-1, #0a0a0a); backdrop-filter: none; }
+  .cart-toasts :global(.cart-toast--success) { --tone: var(--c-success, #34d399); }
+  .cart-toasts :global(.cart-toast--warning) { --tone: var(--c-warning, #fbbf24); }
+  .cart-toasts :global(.cart-toast--danger) { --tone: var(--c-danger, #f87171); }
+  .cart-toasts :global(.cart-toast--info) { --tone: var(--c-primary-light, #d4a017); }
+  .cart-toasts :global(.cart-toast.is-leaving) { animation: ct-out 0.22s ease forwards; }
+
+  .cart-toasts :global(.cart-toast__icon) {
+    display: grid;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    color: var(--tone);
+    background: color-mix(in srgb, var(--tone) 15%, transparent);
+  }
+  .cart-toasts :global(.cart-toast__body) { min-width: 0; }
+  .cart-toasts :global(.cart-toast__title) { margin: 0; font-size: 0.88rem; font-weight: 700; }
+  .cart-toasts :global(.cart-toast__text) { margin: 2px 0 0; font-size: 0.8rem; color: var(--c-text-2, #a3a3a3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .cart-toasts :global(.cart-toast__action) {
+    min-height: 36px;
+    padding: 0 var(--sp-3, 0.75rem);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.16);
+    border-radius: var(--r-full, 9999px);
+    background: transparent;
+    color: var(--c-text-1, #fff);
+    font: inherit;
+    font-size: 0.8rem;
+    font-weight: 700;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+  .cart-toasts :global(.cart-toast__action:hover) { background: rgb(var(--ink-rgb, 255 255 255) / 0.07); }
+  .cart-toasts :global(.cart-toast__close) {
+    width: 32px;
+    height: 32px;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--c-text-2, #a3a3a3);
+    font-size: 1.3rem;
+    line-height: 1;
+    cursor: pointer;
+  }
+  .cart-toasts :global(.cart-toast__close:hover) { color: var(--c-text-1, #fff); background: rgb(var(--ink-rgb, 255 255 255) / 0.06); }
+  .cart-toasts :global(.cart-toast button:focus-visible) { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
+  .cart-toasts :global(.cart-toast__timer) {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 2px;
+    width: 100%;
+    background: var(--tone);
+    transform-origin: left;
+    animation: ct-timer var(--toast-ms, 4500ms) linear forwards;
+  }
+  .cart-toasts :global(.cart-toast.is-paused .cart-toast__timer) { animation-play-state: paused; }
+  .cart-toasts--demo :global(.cart-toast__timer) { animation: none; transform: scaleX(0.6); }
+
+  @keyframes ct-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
+  @keyframes ct-out { to { opacity: 0; transform: translateX(24px); } }
+  @keyframes ct-timer { to { transform: scaleX(0); } }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cart-toasts :global(.cart-toast), .cart-toasts :global(.cart-toast.is-leaving) { animation: none; }
+    .cart-toasts :global(.cart-toast__timer) { display: none; }
+  }
+</style>