@magic-spells/cart-panel 0.1.0

package/dist/cart-panel.cjs.js

@@ -0,0 +1,473 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('@magic-spells/cart-item');
+require('@magic-spells/focus-trap');
+var EventEmitter = require('@magic-spells/event-emitter');
+
+/**
+ * Custom element that creates an accessible modal cart dialog with focus management
+ * @extends HTMLElement
+ */
+class CartDialog extends HTMLElement {
+	#handleTransitionEnd;
+	#scrollPosition = 0;
+	#currentCart = null;
+	#eventEmitter;
+
+	/**
+	 * Clean up event listeners when component is removed from DOM
+	 */
+	disconnectedCallback() {
+		const _ = this;
+		if (_.contentPanel) {
+			_.contentPanel.removeEventListener('transitionend', _.#handleTransitionEnd);
+		}
+
+		// Ensure body scroll is restored if component is removed while open
+		document.body.classList.remove('overflow-hidden');
+		this.#restoreScroll();
+
+		// Detach event listeners
+		this.#detachListeners();
+	}
+
+	/**
+	 * Saves current scroll position and locks body scrolling
+	 * @private
+	 */
+	#lockScroll() {
+		const _ = this;
+		// Save current scroll position
+		_.#scrollPosition = window.pageYOffset;
+
+		// Apply fixed position to body
+		document.body.classList.add('overflow-hidden');
+		document.body.style.top = `-${_.#scrollPosition}px`;
+	}
+
+	/**
+	 * Restores scroll position when cart dialog is closed
+	 * @private
+	 */
+	#restoreScroll() {
+		const _ = this;
+		// Remove fixed positioning
+		document.body.classList.remove('overflow-hidden');
+		document.body.style.removeProperty('top');
+
+		// Restore scroll position
+		window.scrollTo(0, _.#scrollPosition);
+	}
+
+	/**
+	 * Initializes the cart dialog, sets up focus trap and overlay
+	 */
+	constructor() {
+		super();
+		const _ = this;
+		_.id = _.getAttribute('id');
+		_.setAttribute('role', 'dialog');
+		_.setAttribute('aria-modal', 'true');
+		_.setAttribute('aria-hidden', 'true');
+
+		_.triggerEl = null;
+
+		// Initialize event emitter
+		_.#eventEmitter = new EventEmitter();
+
+		// Create a handler for transition end events
+		_.#handleTransitionEnd = (e) => {
+			if (e.propertyName === 'opacity' && _.getAttribute('aria-hidden') === 'true') {
+				_.contentPanel.classList.add('hidden');
+
+				// Emit afterHide event - cart dialog has completed its transition
+				_.#emit('cart-dialog:afterHide', { triggerElement: _.triggerEl });
+			}
+		};
+	}
+
+	connectedCallback() {
+		const _ = this;
+
+		// Now that we're in the DOM, find the content panel and set up focus trap
+		_.contentPanel = _.querySelector('cart-panel');
+
+		if (!_.contentPanel) {
+			console.error('cart-panel element not found inside cart-dialog');
+			return;
+		}
+
+		_.focusTrap = document.createElement('focus-trap');
+
+		// Ensure we have labelledby and describedby references
+		if (!_.getAttribute('aria-labelledby')) {
+			const heading = _.querySelector('h1, h2, h3');
+			if (heading && !heading.id) {
+				heading.id = `${_.id}-title`;
+			}
+			if (heading?.id) {
+				_.setAttribute('aria-labelledby', heading.id);
+			}
+		}
+
+		_.contentPanel.parentNode.insertBefore(_.focusTrap, _.contentPanel);
+		_.focusTrap.appendChild(_.contentPanel);
+
+		_.focusTrap.setupTrap();
+
+		// Add modal overlay
+		_.prepend(document.createElement('cart-overlay'));
+		_.#attachListeners();
+		_.#bindKeyboard();
+	}
+
+	/**
+	 * Event emitter method - Add an event listener with a cleaner API
+	 * @param {string} eventName - Name of the event to listen for
+	 * @param {Function} callback - Callback function to execute when event is fired
+	 * @returns {CartDialog} Returns this for method chaining
+	 */
+	on(eventName, callback) {
+		this.#eventEmitter.on(eventName, callback);
+		return this;
+	}
+
+	/**
+	 * Event emitter method - Remove an event listener
+	 * @param {string} eventName - Name of the event to stop listening for
+	 * @param {Function} callback - Callback function to remove
+	 * @returns {CartDialog} Returns this for method chaining
+	 */
+	off(eventName, callback) {
+		this.#eventEmitter.off(eventName, callback);
+		return this;
+	}
+
+	/**
+	 * Internal method to emit events via the event emitter
+	 * @param {string} eventName - Name of the event to emit
+	 * @param {*} [data] - Optional data to include with the event
+	 * @private
+	 */
+	#emit(eventName, data = null) {
+		this.#eventEmitter.emit(eventName, data);
+	}
+
+	/**
+	 * Attach event listeners for cart dialog functionality
+	 * @private
+	 */
+	#attachListeners() {
+		const _ = this;
+
+		// Handle trigger buttons
+		document.addEventListener('click', (e) => {
+			const trigger = e.target.closest(`[aria-controls="${_.id}"]`);
+			if (!trigger) return;
+
+			if (trigger.getAttribute('data-prevent-default') === 'true') {
+				e.preventDefault();
+			}
+
+			_.show(trigger);
+		});
+
+		// Handle close buttons
+		_.addEventListener('click', (e) => {
+			if (!e.target.closest('[data-action="hide-cart"]')) return;
+			_.hide();
+		});
+
+		// Handle cart item remove events
+		_.addEventListener('cart-item:remove', (e) => {
+			_.#handleCartItemRemove(e);
+		});
+
+		// Handle cart item quantity change events
+		_.addEventListener('cart-item:quantity-change', (e) => {
+			_.#handleCartItemQuantityChange(e);
+		});
+
+		// Add transition end listener
+		_.contentPanel.addEventListener('transitionend', _.#handleTransitionEnd);
+	}
+
+	/**
+	 * Detach event listeners
+	 * @private
+	 */
+	#detachListeners() {
+		const _ = this;
+		if (_.contentPanel) {
+			_.contentPanel.removeEventListener('transitionend', _.#handleTransitionEnd);
+		}
+	}
+
+	/**
+	 * Binds keyboard events for accessibility
+	 * @private
+	 */
+	#bindKeyboard() {
+		this.addEventListener('keydown', (e) => {
+			if (e.key === 'Escape') {
+				this.hide();
+			}
+		});
+	}
+
+	/**
+	 * Handle cart item removal
+	 * @private
+	 */
+	#handleCartItemRemove(e) {
+		const { cartKey, element } = e.detail;
+
+		// Set item to processing state
+		element.setState('processing');
+
+		// Remove item by setting quantity to 0
+		this.updateCartItem(cartKey, 0)
+			.then((updatedCart) => {
+				if (updatedCart && !updatedCart.error) {
+					// Success - remove with animation
+					element.destroyYourself();
+					this.#currentCart = updatedCart;
+					this.#updateCartItems(updatedCart);
+
+					// Emit cart updated and data changed events
+					this.#emit('cart-dialog:updated', { cart: updatedCart });
+					this.#emit('cart-dialog:data-changed', updatedCart);
+				} else {
+					// Error - reset to ready state
+					element.setState('ready');
+					console.error('Failed to remove cart item:', cartKey);
+				}
+			})
+			.catch((error) => {
+				// Error - reset to ready state
+				element.setState('ready');
+				console.error('Error removing cart item:', error);
+			});
+	}
+
+	/**
+	 * Handle cart item quantity change
+	 * @private
+	 */
+	#handleCartItemQuantityChange(e) {
+		const { cartKey, quantity, element } = e.detail;
+
+		// Set item to processing state
+		element.setState('processing');
+
+		// Update item quantity
+		this.updateCartItem(cartKey, quantity)
+			.then((updatedCart) => {
+				if (updatedCart && !updatedCart.error) {
+					// Success - update cart data
+					this.#currentCart = updatedCart;
+					this.#updateCartItems(updatedCart);
+					element.setState('ready');
+
+					// Emit cart updated and data changed events
+					this.#emit('cart-dialog:updated', { cart: updatedCart });
+					this.#emit('cart-dialog:data-changed', updatedCart);
+				} else {
+					// Error - reset to ready state
+					element.setState('ready');
+					console.error('Failed to update cart item quantity:', cartKey, quantity);
+				}
+			})
+			.catch((error) => {
+				// Error - reset to ready state
+				element.setState('ready');
+				console.error('Error updating cart item quantity:', error);
+			});
+	}
+
+	/**
+	 * Update cart items
+	 * @private
+	 */
+	#updateCartItems(cart = null) {
+		// Placeholder for cart item updates
+		// Could be used to sync cart items with server data
+		cart || this.#currentCart;
+	}
+
+	/**
+	 * Fetch current cart data from server
+	 * @returns {Promise<Object>} Cart data object
+	 */
+	getCart() {
+		return fetch('/cart.json', {
+			crossDomain: true,
+			credentials: 'same-origin',
+		})
+			.then((response) => {
+				if (!response.ok) {
+					throw Error(response.statusText);
+				}
+				return response.json();
+			})
+			.catch((error) => {
+				console.error('Error fetching cart:', error);
+				return { error: true, message: error.message };
+			});
+	}
+
+	/**
+	 * Update cart item quantity on server
+	 * @param {string|number} key - Cart item key/ID
+	 * @param {number} quantity - New quantity (0 to remove)
+	 * @returns {Promise<Object>} Updated cart data object
+	 */
+	updateCartItem(key, quantity) {
+		return fetch('/cart/change.json', {
+			crossDomain: true,
+			method: 'POST',
+			credentials: 'same-origin',
+			body: JSON.stringify({ id: key, quantity: quantity }),
+			headers: { 'Content-Type': 'application/json' },
+		})
+			.then((response) => {
+				if (!response.ok) {
+					throw Error(response.statusText);
+				}
+				return response.json();
+			})
+			.catch((error) => {
+				console.error('Error updating cart item:', error);
+				return { error: true, message: error.message };
+			});
+	}
+
+	/**
+	 * Refresh cart data from server and update components
+	 * @returns {Promise<Object>} Cart data object
+	 */
+	refreshCart() {
+		return this.getCart().then((cartData) => {
+			if (cartData && !cartData.error) {
+				this.#currentCart = cartData;
+				this.#updateCartItems(cartData);
+
+				// Emit cart refreshed and data changed events
+				this.#emit('cart-dialog:refreshed', { cart: cartData });
+				this.#emit('cart-dialog:data-changed', cartData);
+			}
+			return cartData;
+		});
+	}
+
+	/**
+	 * Shows the cart dialog and traps focus within it
+	 * @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) {
+		const _ = this;
+		_.triggerEl = triggerEl || false;
+
+		// Remove the hidden class first to ensure content is rendered
+		_.contentPanel.classList.remove('hidden');
+
+		// Give the browser a moment to process before starting animation
+		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();
+				});
+			}
+
+			// Refresh cart data when showing
+			_.refreshCart();
+
+			// Emit show event - cart dialog is now visible
+			_.#emit('cart-dialog:show', { triggerElement: _.triggerEl });
+		});
+	}
+
+	/**
+	 * Hides the cart dialog and restores focus
+	 * @fires CartDialog#hide - Fired when the cart dialog has started hiding (transition begins)
+	 * @fires CartDialog#afterHide - Fired when the cart dialog has completed its hide transition
+	 */
+	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');
+		}
+
+		// 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 });
+	}
+}
+
+/**
+ * Custom element that creates a clickable overlay for the cart dialog
+ * @extends HTMLElement
+ */
+class CartOverlay extends HTMLElement {
+	constructor() {
+		super();
+		this.setAttribute('tabindex', '-1');
+		this.setAttribute('aria-hidden', 'true');
+		this.cartDialog = this.closest('cart-dialog');
+		this.#attachListeners();
+	}
+
+	#attachListeners() {
+		this.addEventListener('click', () => {
+			this.cartDialog.hide();
+		});
+	}
+}
+
+/**
+ * Custom element that wraps the content of the cart dialog
+ * @extends HTMLElement
+ */
+class CartPanel extends HTMLElement {
+	constructor() {
+		super();
+		this.setAttribute('role', 'document');
+	}
+}
+
+customElements.define('cart-dialog', CartDialog);
+customElements.define('cart-overlay', CartOverlay);
+customElements.define('cart-panel', CartPanel);
+
+exports.CartDialog = CartDialog;
+exports.CartOverlay = CartOverlay;
+exports.CartPanel = CartPanel;
+exports.default = CartDialog;
+//# sourceMappingURL=cart-panel.cjs.js.map

package/dist/cart-panel.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cart-panel.cjs.js","sources":["../src/cart-panel.js"],"sourcesContent":["import './cart-panel.scss';\nimport '@magic-spells/cart-item';\nimport '@magic-spells/focus-trap';\nimport EventEmitter from '@magic-spells/event-emitter';\n\n/**\n * Custom element that creates an accessible modal cart dialog with focus management\n * @extends HTMLElement\n */\nclass CartDialog extends HTMLElement {\n\t#handleTransitionEnd;\n\t#scrollPosition = 0;\n\t#currentCart = null;\n\t#eventEmitter;\n\n\t/**\n\t * Clean up event listeners when component is removed from DOM\n\t */\n\tdisconnectedCallback() {\n\t\tconst _ = this;\n\t\tif (_.contentPanel) {\n\t\t\t_.contentPanel.removeEventListener('transitionend', _.#handleTransitionEnd);\n\t\t}\n\n\t\t// Ensure body scroll is restored if component is removed while open\n\t\tdocument.body.classList.remove('overflow-hidden');\n\t\tthis.#restoreScroll();\n\n\t\t// Detach event listeners\n\t\tthis.#detachListeners();\n\t}\n\n\t/**\n\t * Saves current scroll position and locks body scrolling\n\t * @private\n\t */\n\t#lockScroll() {\n\t\tconst _ = this;\n\t\t// Save current scroll position\n\t\t_.#scrollPosition = window.pageYOffset;\n\n\t\t// Apply fixed position to body\n\t\tdocument.body.classList.add('overflow-hidden');\n\t\tdocument.body.style.top = `-${_.#scrollPosition}px`;\n\t}\n\n\t/**\n\t * Restores scroll position when cart dialog is closed\n\t * @private\n\t */\n\t#restoreScroll() {\n\t\tconst _ = this;\n\t\t// Remove fixed positioning\n\t\tdocument.body.classList.remove('overflow-hidden');\n\t\tdocument.body.style.removeProperty('top');\n\n\t\t// Restore scroll position\n\t\twindow.scrollTo(0, _.#scrollPosition);\n\t}\n\n\t/**\n\t * Initializes the cart dialog, sets up focus trap and overlay\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tconst _ = this;\n\t\t_.id = _.getAttribute('id');\n\t\t_.setAttribute('role', 'dialog');\n\t\t_.setAttribute('aria-modal', 'true');\n\t\t_.setAttribute('aria-hidden', 'true');\n\n\t\t_.triggerEl = null;\n\n\t\t// Initialize event emitter\n\t\t_.#eventEmitter = new EventEmitter();\n\n\t\t// Create a handler for transition end events\n\t\t_.#handleTransitionEnd = (e) => {\n\t\t\tif (e.propertyName === 'opacity' && _.getAttribute('aria-hidden') === 'true') {\n\t\t\t\t_.contentPanel.classList.add('hidden');\n\n\t\t\t\t// Emit afterHide event - cart dialog has completed its transition\n\t\t\t\t_.#emit('cart-dialog:afterHide', { triggerElement: _.triggerEl });\n\t\t\t}\n\t\t};\n\t}\n\n\tconnectedCallback() {\n\t\tconst _ = this;\n\n\t\t// Now that we're in the DOM, find the content panel and set up focus trap\n\t\t_.contentPanel = _.querySelector('cart-panel');\n\n\t\tif (!_.contentPanel) {\n\t\t\tconsole.error('cart-panel element not found inside cart-dialog');\n\t\t\treturn;\n\t\t}\n\n\t\t_.focusTrap = document.createElement('focus-trap');\n\n\t\t// Ensure we have labelledby and describedby references\n\t\tif (!_.getAttribute('aria-labelledby')) {\n\t\t\tconst heading = _.querySelector('h1, h2, h3');\n\t\t\tif (heading && !heading.id) {\n\t\t\t\theading.id = `${_.id}-title`;\n\t\t\t}\n\t\t\tif (heading?.id) {\n\t\t\t\t_.setAttribute('aria-labelledby', heading.id);\n\t\t\t}\n\t\t}\n\n\t\t_.contentPanel.parentNode.insertBefore(_.focusTrap, _.contentPanel);\n\t\t_.focusTrap.appendChild(_.contentPanel);\n\n\t\t_.focusTrap.setupTrap();\n\n\t\t// Add modal overlay\n\t\t_.prepend(document.createElement('cart-overlay'));\n\t\t_.#attachListeners();\n\t\t_.#bindKeyboard();\n\t}\n\n\t/**\n\t * Event emitter method - Add an event listener with a cleaner API\n\t * @param {string} eventName - Name of the event to listen for\n\t * @param {Function} callback - Callback function to execute when event is fired\n\t * @returns {CartDialog} Returns this for method chaining\n\t */\n\ton(eventName, callback) {\n\t\tthis.#eventEmitter.on(eventName, callback);\n\t\treturn this;\n\t}\n\n\t/**\n\t * Event emitter method - Remove an event listener\n\t * @param {string} eventName - Name of the event to stop listening for\n\t * @param {Function} callback - Callback function to remove\n\t * @returns {CartDialog} Returns this for method chaining\n\t */\n\toff(eventName, callback) {\n\t\tthis.#eventEmitter.off(eventName, callback);\n\t\treturn this;\n\t}\n\n\t/**\n\t * Internal method to emit events via the event emitter\n\t * @param {string} eventName - Name of the event to emit\n\t * @param {*} [data] - Optional data to include with the event\n\t * @private\n\t */\n\t#emit(eventName, data = null) {\n\t\tthis.#eventEmitter.emit(eventName, data);\n\t}\n\n\t/**\n\t * Attach event listeners for cart dialog functionality\n\t * @private\n\t */\n\t#attachListeners() {\n\t\tconst _ = this;\n\n\t\t// Handle trigger buttons\n\t\tdocument.addEventListener('click', (e) => {\n\t\t\tconst trigger = e.target.closest(`[aria-controls=\"${_.id}\"]`);\n\t\t\tif (!trigger) return;\n\n\t\t\tif (trigger.getAttribute('data-prevent-default') === 'true') {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\n\t\t\t_.show(trigger);\n\t\t});\n\n\t\t// Handle close buttons\n\t\t_.addEventListener('click', (e) => {\n\t\t\tif (!e.target.closest('[data-action=\"hide-cart\"]')) return;\n\t\t\t_.hide();\n\t\t});\n\n\t\t// Handle cart item remove events\n\t\t_.addEventListener('cart-item:remove', (e) => {\n\t\t\t_.#handleCartItemRemove(e);\n\t\t});\n\n\t\t// Handle cart item quantity change events\n\t\t_.addEventListener('cart-item:quantity-change', (e) => {\n\t\t\t_.#handleCartItemQuantityChange(e);\n\t\t});\n\n\t\t// Add transition end listener\n\t\t_.contentPanel.addEventListener('transitionend', _.#handleTransitionEnd);\n\t}\n\n\t/**\n\t * Detach event listeners\n\t * @private\n\t */\n\t#detachListeners() {\n\t\tconst _ = this;\n\t\tif (_.contentPanel) {\n\t\t\t_.contentPanel.removeEventListener('transitionend', _.#handleTransitionEnd);\n\t\t}\n\t}\n\n\t/**\n\t * Binds keyboard events for accessibility\n\t * @private\n\t */\n\t#bindKeyboard() {\n\t\tthis.addEventListener('keydown', (e) => {\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\tthis.hide();\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Handle cart item removal\n\t * @private\n\t */\n\t#handleCartItemRemove(e) {\n\t\tconst { cartKey, element } = e.detail;\n\n\t\t// Set item to processing state\n\t\telement.setState('processing');\n\n\t\t// Remove item by setting quantity to 0\n\t\tthis.updateCartItem(cartKey, 0)\n\t\t\t.then((updatedCart) => {\n\t\t\t\tif (updatedCart && !updatedCart.error) {\n\t\t\t\t\t// Success - remove with animation\n\t\t\t\t\telement.destroyYourself();\n\t\t\t\t\tthis.#currentCart = updatedCart;\n\t\t\t\t\tthis.#updateCartItems(updatedCart);\n\n\t\t\t\t\t// Emit cart updated and data changed events\n\t\t\t\t\tthis.#emit('cart-dialog:updated', { cart: updatedCart });\n\t\t\t\t\tthis.#emit('cart-dialog:data-changed', updatedCart);\n\t\t\t\t} else {\n\t\t\t\t\t// Error - reset to ready state\n\t\t\t\t\telement.setState('ready');\n\t\t\t\t\tconsole.error('Failed to remove cart item:', cartKey);\n\t\t\t\t}\n\t\t\t})\n\t\t\t.catch((error) => {\n\t\t\t\t// Error - reset to ready state\n\t\t\t\telement.setState('ready');\n\t\t\t\tconsole.error('Error removing cart item:', error);\n\t\t\t});\n\t}\n\n\t/**\n\t * Handle cart item quantity change\n\t * @private\n\t */\n\t#handleCartItemQuantityChange(e) {\n\t\tconst { cartKey, quantity, element } = e.detail;\n\n\t\t// Set item to processing state\n\t\telement.setState('processing');\n\n\t\t// Update item quantity\n\t\tthis.updateCartItem(cartKey, quantity)\n\t\t\t.then((updatedCart) => {\n\t\t\t\tif (updatedCart && !updatedCart.error) {\n\t\t\t\t\t// Success - update cart data\n\t\t\t\t\tthis.#currentCart = updatedCart;\n\t\t\t\t\tthis.#updateCartItems(updatedCart);\n\t\t\t\t\telement.setState('ready');\n\n\t\t\t\t\t// Emit cart updated and data changed events\n\t\t\t\t\tthis.#emit('cart-dialog:updated', { cart: updatedCart });\n\t\t\t\t\tthis.#emit('cart-dialog:data-changed', updatedCart);\n\t\t\t\t} else {\n\t\t\t\t\t// Error - reset to ready state\n\t\t\t\t\telement.setState('ready');\n\t\t\t\t\tconsole.error('Failed to update cart item quantity:', cartKey, quantity);\n\t\t\t\t}\n\t\t\t})\n\t\t\t.catch((error) => {\n\t\t\t\t// Error - reset to ready state\n\t\t\t\telement.setState('ready');\n\t\t\t\tconsole.error('Error updating cart item quantity:', error);\n\t\t\t});\n\t}\n\n\t/**\n\t * Update cart items\n\t * @private\n\t */\n\t#updateCartItems(cart = null) {\n\t\t// Placeholder for cart item updates\n\t\t// Could be used to sync cart items with server data\n\t\tconst cartData = cart || this.#currentCart;\n\t\tif (cartData) {\n\t\t\t// Future implementation: update cart item components\n\t\t}\n\t}\n\n\t/**\n\t * Fetch current cart data from server\n\t * @returns {Promise<Object>} Cart data object\n\t */\n\tgetCart() {\n\t\treturn fetch('/cart.json', {\n\t\t\tcrossDomain: true,\n\t\t\tcredentials: 'same-origin',\n\t\t})\n\t\t\t.then((response) => {\n\t\t\t\tif (!response.ok) {\n\t\t\t\t\tthrow Error(response.statusText);\n\t\t\t\t}\n\t\t\t\treturn response.json();\n\t\t\t})\n\t\t\t.catch((error) => {\n\t\t\t\tconsole.error('Error fetching cart:', error);\n\t\t\t\treturn { error: true, message: error.message };\n\t\t\t});\n\t}\n\n\t/**\n\t * Update cart item quantity on server\n\t * @param {string|number} key - Cart item key/ID\n\t * @param {number} quantity - New quantity (0 to remove)\n\t * @returns {Promise<Object>} Updated cart data object\n\t */\n\tupdateCartItem(key, quantity) {\n\t\treturn fetch('/cart/change.json', {\n\t\t\tcrossDomain: true,\n\t\t\tmethod: 'POST',\n\t\t\tcredentials: 'same-origin',\n\t\t\tbody: JSON.stringify({ id: key, quantity: quantity }),\n\t\t\theaders: { 'Content-Type': 'application/json' },\n\t\t})\n\t\t\t.then((response) => {\n\t\t\t\tif (!response.ok) {\n\t\t\t\t\tthrow Error(response.statusText);\n\t\t\t\t}\n\t\t\t\treturn response.json();\n\t\t\t})\n\t\t\t.catch((error) => {\n\t\t\t\tconsole.error('Error updating cart item:', error);\n\t\t\t\treturn { error: true, message: error.message };\n\t\t\t});\n\t}\n\n\t/**\n\t * Refresh cart data from server and update components\n\t * @returns {Promise<Object>} Cart data object\n\t */\n\trefreshCart() {\n\t\treturn this.getCart().then((cartData) => {\n\t\t\tif (cartData && !cartData.error) {\n\t\t\t\tthis.#currentCart = cartData;\n\t\t\t\tthis.#updateCartItems(cartData);\n\n\t\t\t\t// Emit cart refreshed and data changed events\n\t\t\t\tthis.#emit('cart-dialog:refreshed', { cart: cartData });\n\t\t\t\tthis.#emit('cart-dialog:data-changed', cartData);\n\t\t\t}\n\t\t\treturn cartData;\n\t\t});\n\t}\n\n\t/**\n\t * Shows the cart dialog and traps focus within it\n\t * @param {HTMLElement} [triggerEl=null] - The element that triggered the cart dialog\n\t * @fires CartDialog#show - Fired when the cart dialog has been shown\n\t */\n\tshow(triggerEl = null) {\n\t\tconst _ = this;\n\t\t_.triggerEl = triggerEl || false;\n\n\t\t// Remove the hidden class first to ensure content is rendered\n\t\t_.contentPanel.classList.remove('hidden');\n\n\t\t// Give the browser a moment to process before starting animation\n\t\trequestAnimationFrame(() => {\n\t\t\t// Update ARIA states\n\t\t\t_.setAttribute('aria-hidden', 'false');\n\t\t\tif (_.triggerEl) {\n\t\t\t\t_.triggerEl.setAttribute('aria-expanded', 'true');\n\t\t\t}\n\n\t\t\t// Lock body scrolling and save scroll position\n\t\t\t_.#lockScroll();\n\n\t\t\t// Focus management\n\t\t\tconst firstFocusable = _.querySelector(\n\t\t\t\t'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n\t\t\t);\n\t\t\tif (firstFocusable) {\n\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\tfirstFocusable.focus();\n\t\t\t\t});\n\t\t\t}\n\n\t\t\t// Refresh cart data when showing\n\t\t\t_.refreshCart();\n\n\t\t\t// Emit show event - cart dialog is now visible\n\t\t\t_.#emit('cart-dialog:show', { triggerElement: _.triggerEl });\n\t\t});\n\t}\n\n\t/**\n\t * Hides the cart dialog and restores focus\n\t * @fires CartDialog#hide - Fired when the cart dialog has started hiding (transition begins)\n\t * @fires CartDialog#afterHide - Fired when the cart dialog has completed its hide transition\n\t */\n\thide() {\n\t\tconst _ = this;\n\n\t\t// Restore body scroll and scroll position\n\t\t_.#restoreScroll();\n\n\t\t// Update ARIA states\n\t\tif (_.triggerEl) {\n\t\t\t// remove focus from modal panel first\n\t\t\t_.triggerEl.focus();\n\t\t\t// mark trigger as no longer expanded\n\t\t\t_.triggerEl.setAttribute('aria-expanded', 'false');\n\t\t}\n\n\t\t// Set aria-hidden to start transition\n\t\t// The transitionend event handler will add display:none when complete\n\t\t_.setAttribute('aria-hidden', 'true');\n\n\t\t// Emit hide event - cart dialog is now starting to hide\n\t\t_.#emit('cart-dialog:hide', { triggerElement: _.triggerEl });\n\t}\n}\n\n/**\n * Custom element that creates a clickable overlay for the cart dialog\n * @extends HTMLElement\n */\nclass CartOverlay extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tthis.setAttribute('tabindex', '-1');\n\t\tthis.setAttribute('aria-hidden', 'true');\n\t\tthis.cartDialog = this.closest('cart-dialog');\n\t\tthis.#attachListeners();\n\t}\n\n\t#attachListeners() {\n\t\tthis.addEventListener('click', () => {\n\t\t\tthis.cartDialog.hide();\n\t\t});\n\t}\n}\n\n/**\n * Custom element that wraps the content of the cart dialog\n * @extends HTMLElement\n */\nclass CartPanel extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tthis.setAttribute('role', 'document');\n\t}\n}\n\ncustomElements.define('cart-dialog', CartDialog);\ncustomElements.define('cart-overlay', CartOverlay);\ncustomElements.define('cart-panel', CartPanel);\n\nexport { CartDialog, CartOverlay, CartPanel };\nexport default CartDialog;\n"],"names":[],"mappings":"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"}

package/dist/cart-panel.css

@@ -0,0 +1,171 @@
+cart-item {
+  --cart-item-processing-duration: 250ms;
+  --cart-item-destroying-duration: 600ms;
+  --cart-item-shadow-color: rgba(0, 0, 0, 0.15);
+  --cart-item-shadow-color-strong: rgba(0, 0, 0, 0.5);
+  --cart-item-processing-bg: rgba(100, 100, 100, 0.2);
+  --cart-item-destroying-bg: rgba(0, 0, 0, 0.1);
+  --cart-item-processing-scale: 0.98;
+  --cart-item-destroying-scale: 0.85;
+  --cart-item-processing-blur: 1px;
+  --cart-item-destroying-blur: 10px;
+  --cart-item-destroying-opacity: 0.2;
+  --cart-item-destroying-brightness: 0.6;
+  --cart-item-destroying-saturate: 0.3;
+  display: block;
+  position: relative;
+  overflow: hidden;
+  padding: 0px;
+  box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0);
+  transition: filter var(--cart-item-processing-duration) ease-out, background-color var(--cart-item-processing-duration) ease-out, box-shadow var(--cart-item-processing-duration) ease-out;
+}
+cart-item::after {
+  content: "";
+  display: block;
+  position: absolute;
+  background: rgba(0, 0, 0, 0);
+  width: 100%;
+  pointer-events: none;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  transition: background-color var(--cart-item-processing-duration) ease;
+}
+cart-item[data-state=ready] cart-item-content {
+  transform: scale(1);
+  filter: blur(0px);
+  opacity: 1;
+}
+cart-item[data-state=ready] cart-item-processing {
+  opacity: 0;
+  visibility: hidden;
+}
+cart-item[data-state=processing] {
+  box-shadow: inset 0px 2px 10px var(--cart-item-shadow-color);
+}
+cart-item[data-state=processing]::after {
+  background: rgba(0, 0, 0, 0.15);
+}
+cart-item[data-state=processing] cart-item-content {
+  transform: scale(var(--cart-item-processing-scale));
+  filter: blur(var(--cart-item-processing-blur));
+  opacity: 0.9;
+  pointer-events: none;
+}
+cart-item[data-state=processing] cart-item-processing {
+  opacity: 1;
+  visibility: visible;
+}
+cart-item[data-state=destroying] {
+  background-color: var(--cart-item-destroying-bg);
+  box-shadow: inset 0px 4px 20px var(--cart-item-shadow-color-strong);
+  margin-top: 0px;
+  margin-bottom: 0px;
+  transition: filter var(--cart-item-destroying-duration) ease, background-color var(--cart-item-destroying-duration) ease, box-shadow var(--cart-item-destroying-duration) ease, margin var(--cart-item-destroying-duration) ease;
+}
+cart-item[data-state=destroying]::after {
+  background: rgba(0, 0, 0, 0.9);
+  transition: background-color var(--cart-item-destroying-duration) ease;
+}
+cart-item[data-state=destroying] cart-item-content {
+  transition: transform var(--cart-item-destroying-duration) ease, filter var(--cart-item-destroying-duration) ease, opacity var(--cart-item-destroying-duration) ease;
+  transform: scale(var(--cart-item-destroying-scale));
+  filter: blur(var(--cart-item-destroying-blur)) saturate(var(--cart-item-destroying-saturate));
+  opacity: var(--cart-item-destroying-opacity);
+  pointer-events: none;
+}
+cart-item[data-state=destroying] cart-item-processing {
+  opacity: 0;
+  transition: opacity var(--cart-item-processing-duration) ease;
+}
+
+cart-item-content {
+  display: block;
+  transition: transform var(--cart-item-processing-duration) ease-out, filter var(--cart-item-processing-duration) ease-out, opacity var(--cart-item-processing-duration) ease-out;
+}
+
+cart-item-processing {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--cart-item-processing-duration) ease-out, visibility var(--cart-item-processing-duration) ease-out;
+  z-index: 10;
+}
+
+:root {
+  --cart-dialog-z-index: 1000;
+  --cart-overlay-z-index: 1000;
+  --cart-panel-z-index: 1001;
+  --cart-panel-width: min(400px, 90vw);
+  --cart-overlay-background: rgba(0, 0, 0, 0.15);
+  --cart-overlay-backdrop-filter: blur(4px);
+  --cart-panel-background: #ffffff;
+  --cart-panel-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
+  --cart-panel-border-radius: 0;
+  --cart-transition-duration: 350ms;
+  --cart-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+cart-dialog {
+  display: contents;
+}
+cart-dialog[aria-hidden=false] cart-overlay,
+cart-dialog[aria-hidden=false] cart-panel {
+  pointer-events: auto;
+  opacity: 1;
+}
+cart-dialog[aria-hidden=false] cart-panel {
+  transform: translateX(0);
+}
+
+cart-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  opacity: 0;
+  pointer-events: none;
+  z-index: var(--cart-overlay-z-index);
+  background-color: var(--cart-overlay-background);
+  backdrop-filter: var(--cart-overlay-backdrop-filter);
+  transition: opacity var(--cart-transition-duration) var(--cart-transition-timing), backdrop-filter var(--cart-transition-duration) var(--cart-transition-timing);
+}
+
+cart-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: var(--cart-panel-width);
+  height: 100vh;
+  opacity: 0;
+  transform: translateX(100%);
+  pointer-events: none;
+  z-index: var(--cart-panel-z-index);
+  background: var(--cart-panel-background);
+  box-shadow: var(--cart-panel-shadow);
+  border-radius: var(--cart-panel-border-radius);
+  overflow: hidden;
+  transition: opacity var(--cart-transition-duration) var(--cart-transition-timing), transform var(--cart-transition-duration) var(--cart-transition-timing);
+}
+cart-panel.hidden {
+  display: none;
+}
+
+body.overflow-hidden {
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  right: 0;
+  margin: 0;
+}