@magic-spells/cart-panel 0.1.2 → 0.3.0

package/dist/cart-panel.js

@@ -4,29 +4,524 @@
 	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CartDialog = {}));
 })(this, (function (exports) { 'use strict';
 
+	/**
+	 * Retrieves all focusable elements within a given container.
+	 *
+	 * @param {HTMLElement} container - The container element to search for focusable elements.
+	 * @returns {HTMLElement[]} An array of focusable elements found within the container.
+	 */
+	const getFocusableElements = (container) => {
+		const focusableSelectors =
+			'summary, a[href], button:not(:disabled), [tabindex]:not([tabindex^="-"]):not(focus-trap-start):not(focus-trap-end), [draggable], area, input:not([type=hidden]):not(:disabled), select:not(:disabled), textarea:not(:disabled), object, iframe';
+		return Array.from(container.querySelectorAll(focusableSelectors));
+	};
+
+	class FocusTrap extends HTMLElement {
+		/** @type {boolean} Indicates whether the styles have been injected into the DOM. */
+		static styleInjected = false;
+
+		constructor() {
+			super();
+			this.trapStart = null;
+			this.trapEnd = null;
+
+			// Inject styles only once, when the first FocusTrap instance is created.
+			if (!FocusTrap.styleInjected) {
+				this.injectStyles();
+				FocusTrap.styleInjected = true;
+			}
+		}
+
+		/**
+		 * Injects necessary styles for the focus trap into the document's head.
+		 * This ensures that focus-trap-start and focus-trap-end elements are hidden.
+		 */
+		injectStyles() {
+			const style = document.createElement('style');
+			style.textContent = `
+      focus-trap-start,
+      focus-trap-end {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        border: 0;
+        clip: rect(0, 0, 0, 0);
+        overflow: hidden;
+        white-space: nowrap;
+      }
+    `;
+			document.head.appendChild(style);
+		}
+
+		/**
+		 * Called when the element is connected to the DOM.
+		 * Sets up the focus trap and adds the keydown event listener.
+		 */
+		connectedCallback() {
+			this.setupTrap();
+			this.addEventListener('keydown', this.handleKeyDown);
+		}
+
+		/**
+		 * Called when the element is disconnected from the DOM.
+		 * Removes the keydown event listener.
+		 */
+		disconnectedCallback() {
+			this.removeEventListener('keydown', this.handleKeyDown);
+		}
+
+		/**
+		 * Sets up the focus trap by adding trap start and trap end elements.
+		 * Focuses the trap start element to initiate the focus trap.
+		 */
+		setupTrap() {
+			// check to see it there are any focusable children
+			const focusableElements = getFocusableElements(this);
+			// exit if there aren't any
+			if (focusableElements.length === 0) return;
+
+			// create trap start and end elements
+			this.trapStart = document.createElement('focus-trap-start');
+			this.trapEnd = document.createElement('focus-trap-end');
+
+			// add to DOM
+			this.prepend(this.trapStart);
+			this.append(this.trapEnd);
+		}
+
+		/**
+		 * Handles the keydown event. If the Escape key is pressed, the focus trap is exited.
+		 *
+		 * @param {KeyboardEvent} e - The keyboard event object.
+		 */
+		handleKeyDown = (e) => {
+			if (e.key === 'Escape') {
+				e.preventDefault();
+				this.exitTrap();
+			}
+		};
+
+		/**
+		 * Exits the focus trap by hiding the current container and shifting focus
+		 * back to the trigger element that opened the trap.
+		 */
+		exitTrap() {
+			const container = this.closest('[aria-hidden="false"]');
+			if (!container) return;
+
+			container.setAttribute('aria-hidden', 'true');
+
+			const trigger = document.querySelector(
+				`[aria-expanded="true"][aria-controls="${container.id}"]`
+			);
+			if (trigger) {
+				trigger.setAttribute('aria-expanded', 'false');
+				trigger.focus();
+			}
+		}
+	}
+
+	class FocusTrapStart extends HTMLElement {
+		/**
+		 * Called when the element is connected to the DOM.
+		 * Sets the tabindex and adds the focus event listener.
+		 */
+		connectedCallback() {
+			this.setAttribute('tabindex', '0');
+			this.addEventListener('focus', this.handleFocus);
+		}
+
+		/**
+		 * Called when the element is disconnected from the DOM.
+		 * Removes the focus event listener.
+		 */
+		disconnectedCallback() {
+			this.removeEventListener('focus', this.handleFocus);
+		}
+
+		/**
+		 * Handles the focus event. If focus moves backwards from the first focusable element,
+		 * it is cycled to the last focusable element, and vice versa.
+		 *
+		 * @param {FocusEvent} e - The focus event object.
+		 */
+		handleFocus = (e) => {
+			const trap = this.closest('focus-trap');
+			const focusableElements = getFocusableElements(trap);
+
+			if (focusableElements.length === 0) return;
+
+			const firstElement = focusableElements[0];
+			const lastElement =
+				focusableElements[focusableElements.length - 1];
+
+			if (e.relatedTarget === firstElement) {
+				lastElement.focus();
+			} else {
+				firstElement.focus();
+			}
+		};
+	}
+
+	class FocusTrapEnd extends HTMLElement {
+		/**
+		 * Called when the element is connected to the DOM.
+		 * Sets the tabindex and adds the focus event listener.
+		 */
+		connectedCallback() {
+			this.setAttribute('tabindex', '0');
+			this.addEventListener('focus', this.handleFocus);
+		}
+
+		/**
+		 * Called when the element is disconnected from the DOM.
+		 * Removes the focus event listener.
+		 */
+		disconnectedCallback() {
+			this.removeEventListener('focus', this.handleFocus);
+		}
+
+		/**
+		 * Handles the focus event. When the trap end is focused, focus is shifted back to the trap start.
+		 */
+		handleFocus = () => {
+			const trap = this.closest('focus-trap');
+			const trapStart = trap.querySelector('focus-trap-start');
+			trapStart.focus();
+		};
+	}
+
+	if (!customElements.get('focus-trap')) {
+		customElements.define('focus-trap', FocusTrap);
+	}
+	if (!customElements.get('focus-trap-start')) {
+		customElements.define('focus-trap-start', FocusTrapStart);
+	}
+	if (!customElements.get('focus-trap-end')) {
+		customElements.define('focus-trap-end', FocusTrapEnd);
+	}
+
+	class EventEmitter {
+	  #events;
+
+	  constructor() {
+	    this.#events = new Map();
+	  }
+
+	  /**
+	   * Binds a listener to an event.
+	   * @param {string} event - The event to bind the listener to.
+	   * @param {Function} listener - The listener function to bind.
+	   * @returns {EventEmitter} The current instance for chaining.
+	   * @throws {TypeError} If the listener is not a function.
+	   */
+	  on(event, listener) {
+	    if (typeof listener !== "function") {
+	      throw new TypeError("Listener must be a function");
+	    }
+
+	    const listeners = this.#events.get(event) || [];
+	    if (!listeners.includes(listener)) {
+	      listeners.push(listener);
+	    }
+	    this.#events.set(event, listeners);
+
+	    return this;
+	  }
+
+	  /**
+	   * Unbinds a listener from an event.
+	   * @param {string} event - The event to unbind the listener from.
+	   * @param {Function} listener - The listener function to unbind.
+	   * @returns {EventEmitter} The current instance for chaining.
+	   */
+	  off(event, listener) {
+	    const listeners = this.#events.get(event);
+	    if (!listeners) return this;
+
+	    const index = listeners.indexOf(listener);
+	    if (index !== -1) {
+	      listeners.splice(index, 1);
+	      if (listeners.length === 0) {
+	        this.#events.delete(event);
+	      } else {
+	        this.#events.set(event, listeners);
+	      }
+	    }
+
+	    return this;
+	  }
+
+	  /**
+	   * Triggers an event and calls all bound listeners.
+	   * @param {string} event - The event to trigger.
+	   * @param {...*} args - Arguments to pass to the listener functions.
+	   * @returns {boolean} True if the event had listeners, false otherwise.
+	   */
+	  emit(event, ...args) {
+	    const listeners = this.#events.get(event);
+	    if (!listeners || listeners.length === 0) return false;
+
+	    for (let i = 0, n = listeners.length; i < n; ++i) {
+	      try {
+	        listeners[i].apply(this, args);
+	      } catch (error) {
+	        console.error(`Error in listener for event '${event}':`, error);
+	      }
+	    }
+
+	    return true;
+	  }
+
+	  /**
+	   * Removes all listeners for a specific event or all events.
+	   * @param {string} [event] - The event to remove listeners from. If not provided, removes all listeners.
+	   * @returns {EventEmitter} The current instance for chaining.
+	   */
+	  removeAllListeners(event) {
+	    if (event) {
+	      this.#events.delete(event);
+	    } else {
+	      this.#events.clear();
+	    }
+	    return this;
+	  }
+	}
+
+	class QuantityModifier extends HTMLElement {
+	  // Static flag to track if styles have been injected
+	  static #stylesInjected = false;
+
+	  constructor() {
+	    super();
+	    this.handleDecrement = this.handleDecrement.bind(this);
+	    this.handleIncrement = this.handleIncrement.bind(this);
+	    this.handleInputChange = this.handleInputChange.bind(this);
+
+	    // Inject styles once when first component is created
+	    QuantityModifier.#injectStyles();
+	  }
+
+	  /**
+	   * Inject global styles for hiding number input spin buttons
+	   * Only runs once regardless of how many components exist
+	   */
+	  static #injectStyles() {
+	    if (QuantityModifier.#stylesInjected) return;
+
+	    // this will hide the arrow buttons in the number input field
+	    const style = document.createElement('style');
+	    style.textContent = `
+      /* Hide number input spin buttons for quantity-modifier */
+      quantity-modifier input::-webkit-outer-spin-button,
+      quantity-modifier input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+      
+      quantity-modifier input[type="number"] {
+        -moz-appearance: textfield;
+      }
+    `;
+
+	    document.head.appendChild(style);
+	    QuantityModifier.#stylesInjected = true;
+	  }
+
+	  // Define which attributes trigger attributeChangedCallback when modified
+	  static get observedAttributes() {
+	    return ['min', 'max', 'value'];
+	  }
+
+	  // Called when element is added to the DOM
+	  connectedCallback() {
+	    this.render();
+	    this.attachEventListeners();
+	  }
+
+	  // Called when element is removed from the DOM
+	  disconnectedCallback() {
+	    this.removeEventListeners();
+	  }
+
+	  // Called when observed attributes change
+	  attributeChangedCallback(name, oldValue, newValue) {
+	    if (oldValue !== newValue) {
+	      this.updateInput();
+	    }
+	  }
+
+	  // Get minimum value allowed, defaults to 1
+	  get min() {
+	    return parseInt(this.getAttribute('min')) || 1;
+	  }
+
+	  // Get maximum value allowed, defaults to 99
+	  get max() {
+	    return parseInt(this.getAttribute('max')) || 99;
+	  }
+
+	  // Get current value, defaults to 1
+	  get value() {
+	    return parseInt(this.getAttribute('value')) || 1;
+	  }
+
+	  // Set current value by updating the attribute
+	  set value(val) {
+	    this.setAttribute('value', val);
+	  }
+
+	  // Render the quantity modifier HTML structure
+	  render() {
+	    const min = this.min;
+	    const max = this.max;
+	    const value = this.value;
+
+	    // check to see if these fields already exist
+	    const existingDecrement = this.querySelector('[data-action-decrement]');
+	    const existingIncrement = this.querySelector('[data-action-increment]');
+	    const existingInput = this.querySelector('[data-quantity-modifier-field]');
+
+	    // if they already exist, just set the values
+	    if (existingDecrement && existingIncrement && existingInput) {
+	      existingInput.value = value;
+	      existingInput.min = min;
+	      existingInput.max = max;
+	      existingInput.type = 'number';
+	    } else {
+	      // if they don't exist, inject the template
+	      this.innerHTML = `
+        <button data-action-decrement type="button">
+          <svg class="svg-decrement" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+            <title>decrement</title>
+            <path fill="currentColor" d="M368 224H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h352c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"></path>
+          </svg>
+        </button>
+        <input 
+          type="number" 
+          inputmode="numeric" 
+          pattern="[0-9]*" 
+          data-quantity-modifier-field 
+          value="${value}" min="${min}" max="${max}">
+        <button data-action-increment type="button">
+          <svg class="svg-increment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+            <title>increment</title>
+            <path fill="currentColor" d="M368 224H224V80c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v144H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h144v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V288h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"></path>
+          </svg>
+        </button>
+      `;
+	    }
+	  }
+
+	  // Attach click and input event listeners to buttons and input field
+	  attachEventListeners() {
+	    const decrementBtn = this.querySelector('[data-action-decrement]');
+	    const incrementBtn = this.querySelector('[data-action-increment]');
+	    const input = this.querySelector('[data-quantity-modifier-field]');
+
+	    if (decrementBtn) decrementBtn.addEventListener('click', this.handleDecrement);
+	    if (incrementBtn) incrementBtn.addEventListener('click', this.handleIncrement);
+	    if (input) input.addEventListener('input', this.handleInputChange);
+	  }
+
+	  // Remove event listeners to prevent memory leaks
+	  removeEventListeners() {
+	    const decrementBtn = this.querySelector('[data-action-decrement]');
+	    const incrementBtn = this.querySelector('[data-action-increment]');
+	    const input = this.querySelector('[data-quantity-modifier-field]');
+
+	    if (decrementBtn) decrementBtn.removeEventListener('click', this.handleDecrement);
+	    if (incrementBtn) incrementBtn.removeEventListener('click', this.handleIncrement);
+	    if (input) input.removeEventListener('input', this.handleInputChange);
+	  }
+
+	  // Handle decrement button click, respects minimum value
+	  handleDecrement() {
+	    const currentValue = this.value;
+	    const newValue = Math.max(currentValue - 1, this.min);
+	    this.updateValue(newValue);
+	  }
+
+	  // Handle increment button click, respects maximum value
+	  handleIncrement() {
+	    const currentValue = this.value;
+	    const newValue = Math.min(currentValue + 1, this.max);
+	    this.updateValue(newValue);
+	  }
+
+	  // Handle direct input changes, clamps value between min and max
+	  handleInputChange(event) {
+	    const inputValue = parseInt(event.target.value);
+	    if (!isNaN(inputValue)) {
+	      const clampedValue = Math.max(this.min, Math.min(inputValue, this.max));
+	      this.updateValue(clampedValue);
+	    }
+	  }
+
+	  // Update the component value and dispatch change event if value changed
+	  updateValue(newValue) {
+	    if (newValue !== this.value) {
+	      this.value = newValue;
+	      this.updateInput();
+	      this.dispatchChangeEvent(newValue);
+	    }
+	  }
+
+	  // Sync the input field with current component state
+	  updateInput() {
+	    const input = this.querySelector('[data-quantity-modifier-field]');
+	    if (input) {
+	      input.value = this.value;
+	      input.min = this.min;
+	      input.max = this.max;
+	    }
+	  }
+
+	  // Dispatch custom event when value changes for external listeners
+	  dispatchChangeEvent(value) {
+	    this.dispatchEvent(
+	      new CustomEvent('quantity-modifier:change', {
+	        detail: { value },
+	        bubbles: true,
+	      })
+	    );
+	  }
+	}
+
+	customElements.define('quantity-modifier', QuantityModifier);
+
 	/**
 	 * CartItem class that handles the functionality of a cart item component
 	 */
 	class CartItem extends HTMLElement {
 		// Static template functions shared across all instances
-		static #template = null;
+		static #templates = new Map();
 		static #processingTemplate = null;
 
 		// Private fields
 		#currentState = 'ready';
 		#isDestroying = false;
+		#isAppearing = false;
 		#handlers = {};
 		#itemData = null;
+		#cartData = null;
+		#lastRenderedHTML = '';
 
 		/**
 		 * Set the template function for rendering cart items
-		 * @param {Function} templateFn - Function that takes item data and returns HTML string
+		 * @param {string} name - Template name ('default' for default template)
+		 * @param {Function} templateFn - Function that takes (itemData, cartData) and returns HTML string
 		 */
-		static setTemplate(templateFn) {
+		static setTemplate(name, templateFn) {
+			if (typeof name !== 'string') {
+				throw new Error('Template name must be a string');
+			}
 			if (typeof templateFn !== 'function') {
 				throw new Error('Template must be a function');
 			}
-			CartItem.#template = templateFn;
+			CartItem.#templates.set(name, templateFn);
 		}
 
 		/**
@@ -43,10 +538,11 @@
 		/**
 		 * Create a cart item with appearing animation
 		 * @param {Object} itemData - Shopify cart item data
+		 * @param {Object} cartData - Full Shopify cart object
 		 * @returns {CartItem} Cart item instance that will animate in
 		 */
-		static createAnimated(itemData) {
-			return new CartItem(itemData, { animate: true });
+		static createAnimated(itemData, cartData) {
+			return new CartItem(itemData, cartData, { animate: true });
 		}
 
 		/**
@@ -67,11 +563,12 @@
 			}
 		}
 
-		constructor(itemData = null, options = {}) {
+		constructor(itemData = null, cartData = null, options = {}) {
 			super();
 
-			// Store item data if provided
+			// Store item and cart data if provided
 			this.#itemData = itemData;
+			this.#cartData = cartData;
 
 			// Set initial state - start with 'appearing' only if explicitly requested
 			const shouldAnimate = options.animate || this.hasAttribute('animate-in');
@@ -89,13 +586,16 @@
 		connectedCallback() {
 			// If we have item data, render it first
 			if (this.#itemData) {
-				this.#renderFromData();
+				this.#render();
 			}
 
 			// Find child elements
 			this.content = this.querySelector('cart-item-content');
 			this.processing = this.querySelector('cart-item-processing');
 
+			// Update line price elements in case of pre-rendered content
+			this.#updateLinePriceElements();
+
 			// Attach event listeners
 			this.#attachListeners();
 
@@ -103,6 +603,7 @@
 			if (this.#currentState === 'appearing') {
 				// Set the state attribute
 				this.setAttribute('state', 'appearing');
+				this.#isAppearing = true;
 
 				// Get the natural height after rendering
 				requestAnimationFrame(() => {
@@ -130,6 +631,7 @@
 		#attachListeners() {
 			this.addEventListener('click', this.#handlers.click);
 			this.addEventListener('change', this.#handlers.change);
+			this.addEventListener('quantity-modifier:change', this.#handlers.change);
 			this.addEventListener('transitionend', this.#handlers.transitionEnd);
 		}
 
@@ -139,6 +641,7 @@
 		#detachListeners() {
 			this.removeEventListener('click', this.#handlers.click);
 			this.removeEventListener('change', this.#handlers.change);
+			this.removeEventListener('quantity-modifier:change', this.#handlers.change);
 			this.removeEventListener('transitionend', this.#handlers.transitionEnd);
 		}
 
@@ -169,9 +672,15 @@
 		}
 
 		/**
-		 * Handle change events (for quantity inputs)
+		 * Handle change events (for quantity inputs and quantity-modifier)
 		 */
 		#handleChange(e) {
+			// Check if event is from quantity-modifier component
+			if (e.type === 'quantity-modifier:change') {
+				this.#emitQuantityChangeEvent(e.detail.value);
+				return;
+			}
+
 			// Check if changed element is a quantity input
 			const quantityInput = e.target.closest('[data-cart-quantity]');
 			if (quantityInput) {
@@ -186,9 +695,10 @@
 			if (e.propertyName === 'height' && this.#isDestroying) {
 				// Remove from DOM after height animation completes
 				this.remove();
-			} else if (e.propertyName === 'height' && this.#currentState === 'ready') {
+			} else if (e.propertyName === 'height' && this.#isAppearing) {
 				// Remove explicit height after appearing animation completes
 				this.style.height = '';
+				this.#isAppearing = false;
 			}
 		}
 
@@ -224,10 +734,11 @@
 		}
 
 		/**
-		 * Render cart item from data using the static template
+		 * Render cart item from data using the appropriate template
 		 */
-		#renderFromData() {
-			if (!this.#itemData || !CartItem.#template) {
+		#render() {
+			if (!this.#itemData || CartItem.#templates.size === 0) {
+				console.log('no item data or no template', this.#itemData, CartItem.#templates);
 				return;
 			}
 
@@ -237,8 +748,9 @@
 				this.setAttribute('key', key);
 			}
 
-			// Generate HTML from template
-			const templateHTML = CartItem.#template(this.#itemData);
+			// Generate HTML from template and store for future comparisons
+			const templateHTML = this.#generateTemplateHTML();
+			this.#lastRenderedHTML = templateHTML;
 
 			// Generate processing HTML from template or use default
 			const processingHTML = CartItem.#processingTemplate
@@ -259,377 +771,170 @@
 		/**
 		 * Update the cart item with new data
 		 * @param {Object} itemData - Shopify cart item data
+		 * @param {Object} cartData - Full Shopify cart object
 		 */
-		setData(itemData) {
+		setData(itemData, cartData = null) {
+			// Update internal data
 			this.#itemData = itemData;
-			this.#renderFromData();
+			if (cartData) {
+				this.#cartData = cartData;
+			}
 
+			// Generate new HTML with updated data
+			const newHTML = this.#generateTemplateHTML();
+			
+			// Compare with previously rendered HTML
+			if (newHTML === this.#lastRenderedHTML) {
+				// HTML hasn't changed, just reset processing state
+				this.setState('ready');
+				return;
+			}
+			
+			// HTML is different, proceed with full update
+			this.setState('ready');
+			this.#render();
+			
 			// Re-find child elements after re-rendering
 			this.content = this.querySelector('cart-item-content');
 			this.processing = this.querySelector('cart-item-processing');
+			
+			// Update line price elements
+			this.#updateLinePriceElements();
 		}
 
 		/**
-		 * Get the current item data
-		 */
-		get itemData() {
-			return this.#itemData;
-		}
-
-		/**
-		 * Set the state of the cart item
-		 * @param {string} state - 'ready', 'processing', 'destroying', or 'appearing'
-		 */
-		setState(state) {
-			if (['ready', 'processing', 'destroying', 'appearing'].includes(state)) {
-				this.setAttribute('state', state);
-			}
-		}
-
-		/**
-		 * gracefully animate this cart item closed, then let #handleTransitionEnd remove it
-		 *
-		 * @returns {void}
-		 */
-		destroyYourself() {
-			// bail if already in the middle of a destroy cycle
-			if (this.#isDestroying) return;
-
-			this.#isDestroying = true;
-
-			// snapshot the current rendered height before applying any "destroying" styles
-			const initialHeight = this.offsetHeight;
-
-			// switch to 'destroying' state so css can fade / slide visuals
-			this.setState('destroying');
-
-			// lock the measured height on the next animation frame to ensure layout is fully flushed
-			requestAnimationFrame(() => {
-				this.style.height = `${initialHeight}px`;
-				this.offsetHeight; // force a reflow so the browser registers the fixed height
-
-				// read the css custom property for timing, defaulting to 400ms
-				const elementStyle = getComputedStyle(this);
-				const destroyDuration =
-					elementStyle.getPropertyValue('--cart-item-destroying-duration')?.trim() || '400ms';
-
-				// animate only the height to zero; other properties stay under stylesheet control
-				this.style.transition = `height ${destroyDuration} ease`;
-				this.style.height = '0px';
-			});
-		}
-	}
-
-	/**
-	 * Supporting component classes for cart item
-	 */
-	class CartItemContent extends HTMLElement {
-		constructor() {
-			super();
-		}
-	}
-
-	class CartItemProcessing extends HTMLElement {
-		constructor() {
-			super();
-		}
-	}
-
-	// Define custom elements (check if not already defined)
-	if (!customElements.get('cart-item')) {
-		customElements.define('cart-item', CartItem);
-	}
-	if (!customElements.get('cart-item-content')) {
-		customElements.define('cart-item-content', CartItemContent);
-	}
-	if (!customElements.get('cart-item-processing')) {
-		customElements.define('cart-item-processing', CartItemProcessing);
-	}
-
-	/**
-	 * Retrieves all focusable elements within a given container.
-	 *
-	 * @param {HTMLElement} container - The container element to search for focusable elements.
-	 * @returns {HTMLElement[]} An array of focusable elements found within the container.
-	 */
-	const getFocusableElements = (container) => {
-		const focusableSelectors =
-			'summary, a[href], button:not(:disabled), [tabindex]:not([tabindex^="-"]):not(focus-trap-start):not(focus-trap-end), [draggable], area, input:not([type=hidden]):not(:disabled), select:not(:disabled), textarea:not(:disabled), object, iframe';
-		return Array.from(container.querySelectorAll(focusableSelectors));
-	};
-
-	class FocusTrap extends HTMLElement {
-		/** @type {boolean} Indicates whether the styles have been injected into the DOM. */
-		static styleInjected = false;
-
-		constructor() {
-			super();
-			this.trapStart = null;
-			this.trapEnd = null;
-
-			// Inject styles only once, when the first FocusTrap instance is created.
-			if (!FocusTrap.styleInjected) {
-				this.injectStyles();
-				FocusTrap.styleInjected = true;
-			}
-		}
-
-		/**
-		 * Injects necessary styles for the focus trap into the document's head.
-		 * This ensures that focus-trap-start and focus-trap-end elements are hidden.
-		 */
-		injectStyles() {
-			const style = document.createElement('style');
-			style.textContent = `
-      focus-trap-start,
-      focus-trap-end {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        margin: -1px;
-        padding: 0;
-        border: 0;
-        clip: rect(0, 0, 0, 0);
-        overflow: hidden;
-        white-space: nowrap;
-      }
-    `;
-			document.head.appendChild(style);
-		}
-
-		/**
-		 * Called when the element is connected to the DOM.
-		 * Sets up the focus trap and adds the keydown event listener.
-		 */
-		connectedCallback() {
-			this.setupTrap();
-			this.addEventListener('keydown', this.handleKeyDown);
-		}
-
-		/**
-		 * Called when the element is disconnected from the DOM.
-		 * Removes the keydown event listener.
-		 */
-		disconnectedCallback() {
-			this.removeEventListener('keydown', this.handleKeyDown);
-		}
-
-		/**
-		 * Sets up the focus trap by adding trap start and trap end elements.
-		 * Focuses the trap start element to initiate the focus trap.
-		 */
-		setupTrap() {
-			// check to see it there are any focusable children
-			const focusableElements = getFocusableElements(this);
-			// exit if there aren't any
-			if (focusableElements.length === 0) return;
-
-			// create trap start and end elements
-			this.trapStart = document.createElement('focus-trap-start');
-			this.trapEnd = document.createElement('focus-trap-end');
-
-			// add to DOM
-			this.prepend(this.trapStart);
-			this.append(this.trapEnd);
-		}
-
-		/**
-		 * Handles the keydown event. If the Escape key is pressed, the focus trap is exited.
-		 *
-		 * @param {KeyboardEvent} e - The keyboard event object.
-		 */
-		handleKeyDown = (e) => {
-			if (e.key === 'Escape') {
-				e.preventDefault();
-				this.exitTrap();
-			}
-		};
-
-		/**
-		 * Exits the focus trap by hiding the current container and shifting focus
-		 * back to the trigger element that opened the trap.
+		 * Generate HTML from the current template with current data
+		 * @returns {string} Generated HTML string or empty string if no template
+		 * @private
 		 */
-		exitTrap() {
-			const container = this.closest('[aria-hidden="false"]');
-			if (!container) return;
-
-			container.setAttribute('aria-hidden', 'true');
-
-			const trigger = document.querySelector(
-				`[aria-expanded="true"][aria-controls="${container.id}"]`
-			);
-			if (trigger) {
-				trigger.setAttribute('aria-expanded', 'false');
-				trigger.focus();
+		#generateTemplateHTML() {
+			// If no templates are available, return empty string
+			if (!this.#itemData || CartItem.#templates.size === 0) {
+				return '';
 			}
-		}
-	}
-
-	class FocusTrapStart extends HTMLElement {
-		/**
-		 * Called when the element is connected to the DOM.
-		 * Sets the tabindex and adds the focus event listener.
-		 */
-		connectedCallback() {
-			this.setAttribute('tabindex', '0');
-			this.addEventListener('focus', this.handleFocus);
-		}
-
-		/**
-		 * Called when the element is disconnected from the DOM.
-		 * Removes the focus event listener.
-		 */
-		disconnectedCallback() {
-			this.removeEventListener('focus', this.handleFocus);
-		}
-
-		/**
-		 * Handles the focus event. If focus moves backwards from the first focusable element,
-		 * it is cycled to the last focusable element, and vice versa.
-		 *
-		 * @param {FocusEvent} e - The focus event object.
-		 */
-		handleFocus = (e) => {
-			const trap = this.closest('focus-trap');
-			const focusableElements = getFocusableElements(trap);
-
-			if (focusableElements.length === 0) return;
 
-			const firstElement = focusableElements[0];
-			const lastElement =
-				focusableElements[focusableElements.length - 1];
-
-			if (e.relatedTarget === firstElement) {
-				lastElement.focus();
-			} else {
-				firstElement.focus();
+			// Determine which template to use
+			const templateName = this.#itemData.properties?._cart_template || 'default';
+			const templateFn = CartItem.#templates.get(templateName) || CartItem.#templates.get('default');
+
+			if (!templateFn) {
+				return '';
 			}
-		};
-	}
 
-	class FocusTrapEnd extends HTMLElement {
+			// Generate and return HTML from template
+			return templateFn(this.#itemData, this.#cartData);
+		}
+
 		/**
-		 * Called when the element is connected to the DOM.
-		 * Sets the tabindex and adds the focus event listener.
+		 * Update elements with data-content-line-price attribute
+		 * @private
 		 */
-		connectedCallback() {
-			this.setAttribute('tabindex', '0');
-			this.addEventListener('focus', this.handleFocus);
+		#updateLinePriceElements() {
+			if (!this.#itemData) return;
+
+			const linePriceElements = this.querySelectorAll('[data-content-line-price]');
+			const formattedLinePrice = this.#formatCurrency(this.#itemData.line_price || 0);
+
+			linePriceElements.forEach((element) => {
+				element.textContent = formattedLinePrice;
+			});
 		}
 
 		/**
-		 * Called when the element is disconnected from the DOM.
-		 * Removes the focus event listener.
+		 * Format currency value from cents to dollar string
+		 * @param {number} cents - Price in cents
+		 * @returns {string} Formatted currency string (e.g., "$29.99")
+		 * @private
 		 */
-		disconnectedCallback() {
-			this.removeEventListener('focus', this.handleFocus);
+		#formatCurrency(cents) {
+			if (typeof cents !== 'number') return '$0.00';
+			return `$${(cents / 100).toFixed(2)}`;
 		}
 
 		/**
-		 * Handles the focus event. When the trap end is focused, focus is shifted back to the trap start.
+		 * Get the current item data
 		 */
-		handleFocus = () => {
-			const trap = this.closest('focus-trap');
-			const trapStart = trap.querySelector('focus-trap-start');
-			trapStart.focus();
-		};
-	}
+		get itemData() {
+			return this.#itemData;
+		}
 
-	if (!customElements.get('focus-trap')) {
-		customElements.define('focus-trap', FocusTrap);
-	}
-	if (!customElements.get('focus-trap-start')) {
-		customElements.define('focus-trap-start', FocusTrapStart);
-	}
-	if (!customElements.get('focus-trap-end')) {
-		customElements.define('focus-trap-end', FocusTrapEnd);
-	}
+		/**
+		 * Set the state of the cart item
+		 * @param {string} state - 'ready', 'processing', 'destroying', or 'appearing'
+		 */
+		setState(state) {
+			if (['ready', 'processing', 'destroying', 'appearing'].includes(state)) {
+				this.setAttribute('state', state);
+			}
+		}
 
-	class EventEmitter {
-	  #events;
+		/**
+		 * gracefully animate this cart item closed, then let #handleTransitionEnd remove it
+		 *
+		 * @returns {void}
+		 */
+		destroyYourself() {
+			// bail if already in the middle of a destroy cycle
+			if (this.#isDestroying) return;
 
-	  constructor() {
-	    this.#events = new Map();
-	  }
+			this.#isDestroying = true;
 
-	  /**
-	   * Binds a listener to an event.
-	   * @param {string} event - The event to bind the listener to.
-	   * @param {Function} listener - The listener function to bind.
-	   * @returns {EventEmitter} The current instance for chaining.
-	   * @throws {TypeError} If the listener is not a function.
-	   */
-	  on(event, listener) {
-	    if (typeof listener !== "function") {
-	      throw new TypeError("Listener must be a function");
-	    }
+			// snapshot the current rendered height before applying any "destroying" styles
+			const initialHeight = this.offsetHeight;
 
-	    const listeners = this.#events.get(event) || [];
-	    if (!listeners.includes(listener)) {
-	      listeners.push(listener);
-	    }
-	    this.#events.set(event, listeners);
+			// switch to 'destroying' state so css can fade / slide visuals
+			this.setState('destroying');
 
-	    return this;
-	  }
+			// lock the measured height on the next animation frame to ensure layout is fully flushed
+			requestAnimationFrame(() => {
+				this.style.height = `${initialHeight}px`;
+				// this.offsetHeight; // force a reflow so the browser registers the fixed height
 
-	  /**
-	   * Unbinds a listener from an event.
-	   * @param {string} event - The event to unbind the listener from.
-	   * @param {Function} listener - The listener function to unbind.
-	   * @returns {EventEmitter} The current instance for chaining.
-	   */
-	  off(event, listener) {
-	    const listeners = this.#events.get(event);
-	    if (!listeners) return this;
+				// read the css custom property for timing, defaulting to 400ms
+				const elementStyle = getComputedStyle(this);
+				const destroyDuration =
+					elementStyle.getPropertyValue('--cart-item-destroying-duration')?.trim() || '400ms';
 
-	    const index = listeners.indexOf(listener);
-	    if (index !== -1) {
-	      listeners.splice(index, 1);
-	      if (listeners.length === 0) {
-	        this.#events.delete(event);
-	      } else {
-	        this.#events.set(event, listeners);
-	      }
-	    }
+				// animate only the height to zero; other properties stay under stylesheet control
+				this.style.transition = `height ${destroyDuration} ease`;
+				this.style.height = '0px';
 
-	    return this;
-	  }
+				// setTimeout(() => {
+				// 	this.style.height = '0px';
+				// }, 1);
 
-	  /**
-	   * Triggers an event and calls all bound listeners.
-	   * @param {string} event - The event to trigger.
-	   * @param {...*} args - Arguments to pass to the listener functions.
-	   * @returns {boolean} True if the event had listeners, false otherwise.
-	   */
-	  emit(event, ...args) {
-	    const listeners = this.#events.get(event);
-	    if (!listeners || listeners.length === 0) return false;
+				setTimeout(() => {
+					// make sure item is removed
+					this.remove();
+				}, 600);
+			});
+		}
+	}
 
-	    for (let i = 0, n = listeners.length; i < n; ++i) {
-	      try {
-	        listeners[i].apply(this, args);
-	      } catch (error) {
-	        console.error(`Error in listener for event '${event}':`, error);
-	      }
-	    }
+	/**
+	 * Supporting component classes for cart item
+	 */
+	class CartItemContent extends HTMLElement {
+		constructor() {
+			super();
+		}
+	}
 
-	    return true;
-	  }
+	class CartItemProcessing extends HTMLElement {
+		constructor() {
+			super();
+		}
+	}
 
-	  /**
-	   * Removes all listeners for a specific event or all events.
-	   * @param {string} [event] - The event to remove listeners from. If not provided, removes all listeners.
-	   * @returns {EventEmitter} The current instance for chaining.
-	   */
-	  removeAllListeners(event) {
-	    if (event) {
-	      this.#events.delete(event);
-	    } else {
-	      this.#events.clear();
-	    }
-	    return this;
-	  }
+	// Define custom elements (check if not already defined)
+	if (!customElements.get('cart-item')) {
+		customElements.define('cart-item', CartItem);
+	}
+	if (!customElements.get('cart-item-content')) {
+		customElements.define('cart-item-content', CartItemContent);
+	}
+	if (!customElements.get('cart-item-processing')) {
+		customElements.define('cart-item-processing', CartItemProcessing);
 	}
 
 	/**
@@ -638,7 +943,6 @@
 	 */
 	class CartDialog extends HTMLElement {
 		#handleTransitionEnd;
-		#scrollPosition = 0;
 		#currentCart = null;
 		#eventEmitter;
 		#isInitialRender = true;
@@ -661,31 +965,21 @@
 		}
 
 		/**
-		 * Saves current scroll position and locks body scrolling
+		 * Locks body scrolling
 		 * @private
 		 */
 		#lockScroll() {
-			const _ = this;
-			// Save current scroll position
-			_.#scrollPosition = window.pageYOffset;
-
-			// Apply fixed position to body
+			// Apply overflow hidden to body
 			document.body.classList.add('overflow-hidden');
-			document.body.style.top = `-${_.#scrollPosition}px`;
 		}
 
 		/**
-		 * Restores scroll position when cart dialog is closed
+		 * Restores body scrolling when cart dialog is closed
 		 * @private
 		 */
 		#restoreScroll() {
-			const _ = this;
-			// Remove fixed positioning
+			// Remove overflow hidden from body
 			document.body.classList.remove('overflow-hidden');
-			document.body.style.removeProperty('top');
-
-			// Restore scroll position
-			window.scrollTo(0, _.#scrollPosition);
 		}
 
 		/**
@@ -726,7 +1020,18 @@
 				return;
 			}
 
-			_.focusTrap = document.createElement('focus-trap');
+			// Check if focus-trap already exists, if not create one
+			_.focusTrap = _.contentPanel.querySelector('focus-trap');
+			if (!_.focusTrap) {
+				_.focusTrap = document.createElement('focus-trap');
+
+				// Move all existing cart-panel content into the focus trap
+				const existingContent = Array.from(_.contentPanel.childNodes);
+				existingContent.forEach((child) => _.focusTrap.appendChild(child));
+
+				// Insert focus trap inside the cart-panel
+				_.contentPanel.appendChild(_.focusTrap);
+			}
 
 			// Ensure we have labelledby and describedby references
 			if (!_.getAttribute('aria-labelledby')) {
@@ -739,20 +1044,15 @@
 				}
 			}
 
-			// Insert focus trap before the cart-panel
-			_.contentPanel.parentNode.insertBefore(_.focusTrap, _.contentPanel);
-			// Move cart-panel inside the focus trap
-			_.focusTrap.appendChild(_.contentPanel);
-
-			// Setup the trap - this will add focus-trap-start/end elements around the content
-			_.focusTrap.setupTrap();
-
 			// Add modal overlay if it doesn't already exist
 			if (!_.querySelector('cart-overlay')) {
 				_.prepend(document.createElement('cart-overlay'));
 			}
 			_.#attachListeners();
 			_.#bindKeyboard();
+
+			// Load cart data immediately after component initialization
+			_.refreshCart();
 		}
 
 		/**
@@ -785,6 +1085,14 @@
 		 */
 		#emit(eventName, data = null) {
 			this.#eventEmitter.emit(eventName, data);
+
+			// Also emit as native DOM events for better compatibility
+			this.dispatchEvent(
+				new CustomEvent(eventName, {
+					detail: data,
+					bubbles: true,
+				})
+			);
 		}
 
 		/**
@@ -866,11 +1174,12 @@
 						// Success - let smart comparison handle the removal animation
 						this.#currentCart = updatedCart;
 						this.#renderCartItems(updatedCart);
-						this.#updateCartItems(updatedCart);
+						this.#renderCartPanel(updatedCart);
 
 						// Emit cart updated and data changed events
-						this.#emit('cart-dialog:updated', { cart: updatedCart });
-						this.#emit('cart-dialog:data-changed', updatedCart);
+						const cartWithCalculatedFields = this.#addCalculatedFields(updatedCart);
+						this.#emit('cart-dialog:updated', { cart: cartWithCalculatedFields });
+						this.#emit('cart-dialog:data-changed', cartWithCalculatedFields);
 					} else {
 						// Error - reset to ready state
 						element.setState('ready');
@@ -901,12 +1210,12 @@
 						// Success - update cart data and refresh items
 						this.#currentCart = updatedCart;
 						this.#renderCartItems(updatedCart);
-						this.#updateCartItems(updatedCart);
-						element.setState('ready');
+						this.#renderCartPanel(updatedCart);
 
 						// Emit cart updated and data changed events
-						this.#emit('cart-dialog:updated', { cart: updatedCart });
-						this.#emit('cart-dialog:data-changed', updatedCart);
+						const cartWithCalculatedFields = this.#addCalculatedFields(updatedCart);
+						this.#emit('cart-dialog:updated', { cart: cartWithCalculatedFields });
+						this.#emit('cart-dialog:data-changed', cartWithCalculatedFields);
 					} else {
 						// Error - reset to ready state
 						element.setState('ready');
@@ -920,11 +1229,52 @@
 				});
 		}
 
+		/**
+		 * Update cart count elements across the site
+		 * @private
+		 */
+		#renderCartCount(cartData) {
+			if (!cartData) return;
+
+			// Calculate visible item count (excluding _hide_in_cart items)
+			const visibleItems = this.#getVisibleCartItems(cartData);
+			const visibleItemCount = visibleItems.reduce((total, item) => total + item.quantity, 0);
+
+			// Update all cart count elements across the site
+			const cartCountElements = document.querySelectorAll('[data-content-cart-count]');
+			cartCountElements.forEach((element) => {
+				element.textContent = visibleItemCount;
+			});
+		}
+
+		/**
+		 * Update cart subtotal elements across the site
+		 * @private
+		 */
+		#renderCartSubtotal(cartData) {
+			if (!cartData) return;
+
+			// Calculate subtotal from all items except those marked to ignore pricing
+			const pricedItems = cartData.items.filter((item) => {
+				const ignorePrice = item.properties?._ignore_price_in_subtotal;
+				return !ignorePrice;
+			});
+			const subtotal = pricedItems.reduce((total, item) => total + (item.line_price || 0), 0);
+
+			// Update all cart subtotal elements across the site
+			const cartSubtotalElements = document.querySelectorAll('[data-content-cart-subtotal]');
+			cartSubtotalElements.forEach((element) => {
+				// Format as currency (assuming cents, convert to dollars)
+				const formatted = (subtotal / 100).toFixed(2);
+				element.textContent = `$${formatted}`;
+			});
+		}
+
 		/**
 		 * Update cart items display based on cart data
 		 * @private
 		 */
-		#updateCartItems(cart = null) {
+		#renderCartPanel(cart = null) {
 			const cartData = cart || this.#currentCart;
 			if (!cartData) return;
 
@@ -940,14 +1290,22 @@
 				return;
 			}
 
-			// Show/hide sections based on item count
-			if (cartData.item_count > 0) {
-				hasItemsSection.style.display = 'block';
+			// Check visible item count for showing/hiding sections
+			const visibleItems = this.#getVisibleCartItems(cartData);
+			const hasVisibleItems = visibleItems.length > 0;
+
+			// Show/hide sections based on visible item count
+			if (hasVisibleItems) {
+				hasItemsSection.style.display = '';
 				emptySection.style.display = 'none';
 			} else {
 				hasItemsSection.style.display = 'none';
-				emptySection.style.display = 'block';
+				emptySection.style.display = '';
 			}
+
+			// Update cart count and subtotal across the site
+			this.#renderCartCount(cartData);
+			this.#renderCartSubtotal(cartData);
 		}
 
 		/**
@@ -999,20 +1357,37 @@
 
 		/**
 		 * Refresh cart data from server and update components
+		 * @param {Object} [cartObj=null] - Optional cart object to use instead of fetching
 		 * @returns {Promise<Object>} Cart data object
 		 */
-		refreshCart() {
-			console.log('Refreshing cart...');
+		refreshCart(cartObj = null) {
+			// If cart object is provided, use it directly
+			if (cartObj && !cartObj.error) {
+				// console.log('Using provided cart data:', cartObj);
+				this.#currentCart = cartObj;
+				this.#renderCartItems(cartObj);
+				this.#renderCartPanel(cartObj);
+
+				// Emit cart refreshed and data changed events
+				const cartWithCalculatedFields = this.#addCalculatedFields(cartObj);
+				this.#emit('cart-dialog:refreshed', { cart: cartWithCalculatedFields });
+				this.#emit('cart-dialog:data-changed', cartWithCalculatedFields);
+
+				return Promise.resolve(cartObj);
+			}
+
+			// Otherwise fetch from server
 			return this.getCart().then((cartData) => {
-				console.log('Cart data received:', cartData);
+				// console.log('Cart data received:', cartData);
 				if (cartData && !cartData.error) {
 					this.#currentCart = cartData;
 					this.#renderCartItems(cartData);
-					this.#updateCartItems(cartData);
+					this.#renderCartPanel(cartData);
 
 					// Emit cart refreshed and data changed events
-					this.#emit('cart-dialog:refreshed', { cart: cartData });
-					this.#emit('cart-dialog:data-changed', cartData);
+					const cartWithCalculatedFields = this.#addCalculatedFields(cartData);
+					this.#emit('cart-dialog:refreshed', { cart: cartWithCalculatedFields });
+					this.#emit('cart-dialog:data-changed', cartWithCalculatedFields);
 				} else {
 					console.warn('Cart data has error or is null:', cartData);
 				}
@@ -1026,28 +1401,40 @@
 		 */
 		#removeItemsFromDOM(itemsContainer, newKeysSet) {
 			const currentItems = Array.from(itemsContainer.querySelectorAll('cart-item'));
-			const itemsToRemove = currentItems.filter((item) => !newKeysSet.has(item.getAttribute('key')));
 
-			console.log(
-				`Removing ${itemsToRemove.length} items:`,
-				itemsToRemove.map((item) => item.getAttribute('key'))
-			);
+			const itemsToRemove = currentItems.filter((item) => !newKeysSet.has(item.getAttribute('key')));
 
 			itemsToRemove.forEach((item) => {
+				console.log('destroy yourself', item);
 				item.destroyYourself();
 			});
 		}
 
+		/**
+		 * Update existing cart-item elements with fresh cart data
+		 * @private
+		 */
+		#updateItemsInDOM(itemsContainer, cartData) {
+			const visibleItems = this.#getVisibleCartItems(cartData);
+			const existingItems = Array.from(itemsContainer.querySelectorAll('cart-item'));
+
+			existingItems.forEach((cartItemEl) => {
+				const key = cartItemEl.getAttribute('key');
+				const updatedItemData = visibleItems.find((item) => (item.key || item.id) === key);
+
+				if (updatedItemData) {
+					// Update cart-item with fresh data and full cart context
+					// The cart-item will handle HTML comparison and only re-render if needed
+					cartItemEl.setData(updatedItemData, cartData);
+				}
+			});
+		}
+
 		/**
 		 * Add new items to DOM with animation delay
 		 * @private
 		 */
 		#addItemsToDOM(itemsContainer, itemsToAdd, newKeys) {
-			console.log(
-				`Adding ${itemsToAdd.length} items:`,
-				itemsToAdd.map((item) => item.key || item.id)
-			);
-
 			// Delay adding new items by 300ms to let cart slide open first
 			setTimeout(() => {
 				itemsToAdd.forEach((itemData) => {
@@ -1080,6 +1467,48 @@
 			}, 100);
 		}
 
+		/**
+		 * Filter cart items to exclude those with _hide_in_cart property
+		 * @private
+		 */
+		#getVisibleCartItems(cartData) {
+			if (!cartData || !cartData.items) return [];
+			return cartData.items.filter((item) => {
+				// Check for _hide_in_cart in various possible locations
+				const hidden = item.properties?._hide_in_cart;
+
+				return !hidden;
+			});
+		}
+
+		/**
+		 * Add calculated fields to cart object for events
+		 * @private
+		 */
+		#addCalculatedFields(cartData) {
+			if (!cartData) return cartData;
+
+			// For display counts: use visible items (excludes _hide_in_cart)
+			const visibleItems = this.#getVisibleCartItems(cartData);
+			const calculated_count = visibleItems.reduce((total, item) => total + item.quantity, 0);
+
+			// For pricing: use all items except those marked to ignore pricing
+			const pricedItems = cartData.items.filter((item) => {
+				const ignorePrice = item.properties?._ignore_price_in_subtotal;
+				return !ignorePrice;
+			});
+			const calculated_subtotal = pricedItems.reduce(
+				(total, item) => total + (item.line_price || 0),
+				0
+			);
+
+			return {
+				...cartData,
+				calculated_count,
+				calculated_subtotal,
+			};
+		}
+
 		/**
 		 * Render cart items from Shopify cart data with smart comparison
 		 * @private
@@ -1096,53 +1525,54 @@
 				return;
 			}
 
+			// Filter out items with _hide_in_cart property
+			const visibleItems = this.#getVisibleCartItems(cartData);
+
 			// Handle initial render - load all items without animation
 			if (this.#isInitialRender) {
-				console.log('Initial cart render:', cartData.items.length, 'items');
+				// console.log('Initial cart render:', visibleItems.length, 'visible items');
 
 				// Clear existing items
 				itemsContainer.innerHTML = '';
 
 				// Create cart-item elements without animation
-				cartData.items.forEach((itemData) => {
+				visibleItems.forEach((itemData) => {
 					const cartItem = new CartItem(itemData); // No animation
 					itemsContainer.appendChild(cartItem);
 				});
 
 				this.#isInitialRender = false;
-				console.log('Initial render complete, container children:', itemsContainer.children.length);
+
 				return;
 			}
 
-			console.log('Smart rendering cart items:', cartData.items.length, 'items');
-
 			// Get current DOM items and their keys
 			const currentItems = Array.from(itemsContainer.querySelectorAll('cart-item'));
 			const currentKeys = new Set(currentItems.map((item) => item.getAttribute('key')));
 
-			// Get new cart data keys in order
-			const newKeys = cartData.items.map((item) => item.key || item.id);
+			// Get new cart data keys in order (only visible items)
+			const newKeys = visibleItems.map((item) => item.key || item.id);
 			const newKeysSet = new Set(newKeys);
 
 			// Step 1: Remove items that are no longer in cart data
 			this.#removeItemsFromDOM(itemsContainer, newKeysSet);
 
-			// Step 2: Add new items that weren't in DOM (with animation delay)
-			const itemsToAdd = cartData.items.filter(
+			// Step 2: Update existing items with fresh data (handles templates, bundles, etc.)
+			this.#updateItemsInDOM(itemsContainer, cartData);
+
+			// Step 3: Add new items that weren't in DOM (with animation delay)
+			const itemsToAdd = visibleItems.filter(
 				(itemData) => !currentKeys.has(itemData.key || itemData.id)
 			);
-
 			this.#addItemsToDOM(itemsContainer, itemsToAdd, newKeys);
-
-			console.log('Smart rendering complete, container children:', itemsContainer.children.length);
 		}
 
 		/**
 		 * Set the template function for cart items
 		 * @param {Function} templateFn - Function that takes item data and returns HTML string
 		 */
-		setCartItemTemplate(templateFn) {
-			CartItem.setTemplate(templateFn);
+		setCartItemTemplate(templateName, templateFn) {
+			CartItem.setTemplate(templateName, templateFn);
 		}
 
 		/**
@@ -1158,10 +1588,13 @@
 		 * @param {HTMLElement} [triggerEl=null] - The element that triggered the cart dialog
 		 * @fires CartDialog#show - Fired when the cart dialog has been shown
 		 */
-		show(triggerEl = null) {
+		show(triggerEl = null, cartObj) {
 			const _ = this;
 			_.triggerEl = triggerEl || false;
 
+			// Lock body scrolling
+			_.#lockScroll();
+
 			// Remove the hidden class first to ensure content is rendered
 			_.contentPanel.classList.remove('hidden');
 
@@ -1169,17 +1602,16 @@
 			requestAnimationFrame(() => {
 				// Update ARIA states
 				_.setAttribute('aria-hidden', 'false');
+
 				if (_.triggerEl) {
 					_.triggerEl.setAttribute('aria-expanded', 'true');
 				}
 
-				// Lock body scrolling and save scroll position
-				_.#lockScroll();
-
 				// Focus management
 				const firstFocusable = _.querySelector(
 					'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
 				);
+
 				if (firstFocusable) {
 					requestAnimationFrame(() => {
 						firstFocusable.focus();
@@ -1187,7 +1619,7 @@
 				}
 
 				// Refresh cart data when showing
-				_.refreshCart();
+				_.refreshCart(cartObj);
 
 				// Emit show event - cart dialog is now visible
 				_.#emit('cart-dialog:show', { triggerElement: _.triggerEl });
@@ -1202,23 +1634,31 @@
 		hide() {
 			const _ = this;
 
-			// Restore body scroll and scroll position
-			_.#restoreScroll();
-
 			// Update ARIA states
 			if (_.triggerEl) {
 				// remove focus from modal panel first
 				_.triggerEl.focus();
 				// mark trigger as no longer expanded
 				_.triggerEl.setAttribute('aria-expanded', 'false');
+			} else {
+				// If no trigger element, blur any focused element inside the panel
+				const activeElement = document.activeElement;
+				if (activeElement && _.contains(activeElement)) {
+					activeElement.blur();
+				}
 			}
 
-			// Set aria-hidden to start transition
-			// The transitionend event handler will add display:none when complete
-			_.setAttribute('aria-hidden', 'true');
+			requestAnimationFrame(() => {
+				// Set aria-hidden to start transition
+				// The transitionend event handler will add display:none when complete
+				_.setAttribute('aria-hidden', 'true');
 
-			// Emit hide event - cart dialog is now starting to hide
-			_.#emit('cart-dialog:hide', { triggerElement: _.triggerEl });
+				// Emit hide event - cart dialog is now starting to hide
+				_.#emit('cart-dialog:hide', { triggerElement: _.triggerEl });
+
+				// Restore body scroll
+				_.#restoreScroll();
+			});
 		}
 	}