@magic-spells/cart-progress-bar 0.2.1 → 2.0.0

package/dist/cart-progress-bar.js

@@ -1,339 +0,0 @@
-(function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-	typeof define === 'function' && define.amd ? define(['exports'], factory) :
-	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CartProgressBar = {}));
-})(this, (function (exports) { 'use strict';
-
-	/**
-	 * ProgressBar helper class for the visual progress bar element
-	 */
-	class ProgressBar extends HTMLElement {
-		constructor() {
-			super();
-			this.#setupProgressBar();
-		}
-
-		#setupProgressBar() {
-			this.setAttribute('role', 'progressbar');
-			this.setAttribute('aria-valuemin', '0');
-			this.setAttribute('aria-valuemax', '100');
-			this.setAttribute('aria-valuenow', '0');
-
-			// Create the visual progress bar
-			this.innerHTML = '<div class="progress-bar-fill"></div>';
-		}
-
-		setPercent(percent) {
-			const clampedPercent = Math.max(0, Math.min(100, percent));
-			this.style.setProperty('--cart-progress-percent', `${clampedPercent}%`);
-			this.setAttribute('aria-valuenow', clampedPercent);
-		}
-	}
-
-	// Define ProgressBar custom element immediately so it's available for CartProgressBar
-	customElements.define('progress-bar', ProgressBar);
-
-	/**
-	 * CartProgressBar main component
-	 */
-	class CartProgressBar extends HTMLElement {
-		// Private fields
-		#minAmount = 0;
-		#currentAmount = 0;
-		#progressPercent = 0;
-		#originalAboveMessage = '';
-		#originalBelowMessage = '';
-		#progressBar = null;
-		#messageElement = null;
-
-		/**
-		 * Define which attributes should be observed for changes
-		 */
-		static get observedAttributes() {
-			return ['threshold', 'current', 'message-above', 'message-below'];
-		}
-
-		constructor() {
-			super();
-			this.#init();
-		}
-
-		#init() {
-			// Read initial attributes
-			this.#minAmount = parseFloat(this.getAttribute('threshold')) || 0;
-			this.#currentAmount = parseFloat(this.getAttribute('current')) || 0;
-
-			// Store original message templates
-			this.#originalAboveMessage = this.getAttribute('message-above') || '';
-			this.#originalBelowMessage = this.getAttribute('message-below') || '';
-		}
-
-		async connectedCallback() {
-			// ensure the child custom element has been registered
-			await customElements.whenDefined('progress-bar');
-
-			if (!customElements.get('progress-bar')) {
-				throw new Error('<progress-bar> must be registered before <cart-progress-bar> runs');
-			}
-
-			this.#render();
-			this.#updateProgress();
-			this.#attachListeners();
-		}
-
-		attributeChangedCallback(name, oldValue, newValue) {
-			if (oldValue === newValue) return;
-
-			switch (name) {
-				case 'threshold':
-					this.#minAmount = parseFloat(newValue) || 0;
-					this.#updateProgress();
-					break;
-				case 'current':
-					this.#currentAmount = parseFloat(newValue) || 0;
-					this.#updateProgress();
-					break;
-				case 'message-above':
-					this.#originalAboveMessage = newValue || '';
-					this.#updateMessages();
-					break;
-				case 'message-below':
-					this.#originalBelowMessage = newValue || '';
-					this.#updateMessages();
-					break;
-			}
-		}
-
-		#render() {
-			// Find or create the message element
-			this.#messageElement =
-				this.querySelector('[data-content-cart-progress-message]') ||
-				this.querySelector('p[data-content-cart-progress-message]');
-
-			// Find existing progress bar (user can add their own)
-			this.#progressBar = this.querySelector('progress-bar');
-
-			// Create message element if it doesn't exist but we have message templates
-			if (!this.#messageElement && (this.#originalAboveMessage || this.#originalBelowMessage)) {
-				this.#messageElement = document.createElement('p');
-				this.#messageElement.setAttribute('data-content-cart-progress-message', '');
-				this.appendChild(this.#messageElement);
-			}
-
-			// Create progress bar if it doesn't exist - add it at the end (below text message)
-			if (!this.#progressBar) {
-				// Ensure progress-bar is defined before creating
-				if (customElements.get('progress-bar')) {
-					this.#progressBar = document.createElement('progress-bar');
-					this.appendChild(this.#progressBar);
-				} else {
-					// Fallback: wait for definition
-					customElements.whenDefined('progress-bar').then(() => {
-						if (!this.#progressBar) {
-							this.#progressBar = document.createElement('progress-bar');
-							this.appendChild(this.#progressBar);
-							this.#updateProgress(); // Update progress after creating
-						}
-					});
-				}
-			}
-		}
-
-		#updateProgress() {
-			if (this.#minAmount === 0) {
-				this.#progressPercent = 100;
-			} else {
-				this.#progressPercent = Math.min(100, (this.#currentAmount / this.#minAmount) * 100);
-			}
-
-			// Update progress bar
-			if (this.#progressBar) {
-				this.#progressBar.setPercent(this.#progressPercent);
-			}
-
-			// Update messages
-			this.#updateMessages();
-
-			// Update component state
-			this.#updateComponentState();
-		}
-
-		#attachListeners() {
-			// Find the nearest cart-panel component
-			const cartDialog = this.closest('cart-dialog');
-
-			if (cartDialog) {
-				// Listen for cart data changes
-				cartDialog.addEventListener('cart-dialog:data-changed', (event) => {
-					this.#handleCartDataChange(event);
-				});
-			}
-		}
-
-		#handleCartDataChange(event) {
-			const updatedCart = event.detail;
-
-			if (updatedCart) {
-				// Use calculated_subtotal if available (handles _ignore_price_in_subtotal logic)
-				// Otherwise fall back to total_price for backwards compatibility
-				let currentAmount = 0;
-
-				if (typeof updatedCart.calculated_subtotal !== 'undefined') {
-					// calculated_subtotal is already in dollars, no conversion needed
-					currentAmount = updatedCart.calculated_subtotal / 100;
-				} else if (typeof updatedCart.total_price !== 'undefined') {
-					// Convert from cents to dollars if needed (Shopify typically returns cents)
-					currentAmount = updatedCart.total_price / 100;
-				}
-
-				this.setCurrentAmount(currentAmount);
-			}
-		}
-
-		#updateMessages() {
-			const isComplete = this.#currentAmount >= this.#minAmount;
-			const remainingAmount = Math.max(0, this.#minAmount - this.#currentAmount);
-
-			// Format amount with minimal formatting
-			const formattedAmount = remainingAmount.toFixed(2).replace('.00', '');
-
-			// Update the single message element
-			if (this.#messageElement) {
-				let messageTemplate;
-
-				if (isComplete && this.#originalAboveMessage) {
-					// Show success message when complete
-					messageTemplate = this.#originalAboveMessage;
-				} else if (!isComplete) {
-					// Show progress message when incomplete
-					messageTemplate = this.#originalBelowMessage || this.#originalAboveMessage;
-				}
-
-				if (messageTemplate) {
-					// Support multiple placeholder formats: {amount}, { amount }, [amount]
-					const message = messageTemplate
-						.replace(/\{\s*amount\s*\}/g, formattedAmount)
-						.replace(/\[\s*amount\s*\]/g, formattedAmount);
-					this.#messageElement.textContent = message;
-					this.#messageElement.style.display = 'block';
-				} else {
-					// Hide message if no template available for current state
-					this.#messageElement.style.display = 'none';
-				}
-			}
-		}
-
-		#updateComponentState() {
-			const isComplete = this.#currentAmount >= this.#minAmount;
-			this.setAttribute('complete', isComplete.toString());
-		}
-
-
-		/**
-		 * Public API: Set the progress percentage directly
-		 * @param {number} percent - Progress percentage (0-100)
-		 */
-		setPercent(percent) {
-			const clampedPercent = Math.max(0, Math.min(100, percent));
-			this.#progressPercent = clampedPercent;
-
-			if (this.#progressBar) {
-				this.#progressBar.setPercent(clampedPercent);
-			}
-
-			// Calculate current amount based on percentage
-			this.#currentAmount = (clampedPercent / 100) * this.#minAmount;
-			this.setAttribute('current', this.#currentAmount.toString());
-
-			this.#updateMessages();
-			this.#updateComponentState();
-		}
-
-		/**
-		 * Public API: Set the current cart amount
-		 * @param {number} amount - Current cart amount
-		 */
-		setCurrentAmount(amount) {
-			this.#currentAmount = parseFloat(amount) || 0;
-			this.setAttribute('current', this.#currentAmount.toString());
-			this.#updateProgress();
-		}
-
-		/**
-		 * Public API: Set the threshold amount for free shipping
-		 * @param {number} amount - Threshold amount for free shipping
-		 */
-		setThresholdAmount(amount) {
-			this.#minAmount = parseFloat(amount) || 0;
-			this.setAttribute('threshold', this.#minAmount.toString());
-			this.#updateProgress();
-		}
-
-		/**
-		 * Public API: Set the minimum amount for free shipping (deprecated - use setThresholdAmount)
-		 * @param {number} amount - Minimum amount threshold
-		 * @deprecated Use setThresholdAmount instead
-		 */
-		setMinAmount(amount) {
-			this.setThresholdAmount(amount);
-		}
-
-		/**
-		 * Public API: Get current progress information
-		 */
-		getProgress() {
-			return {
-				currentAmount: this.#currentAmount,
-				thresholdAmount: this.#minAmount,
-				minAmount: this.#minAmount, // backwards compatibility
-				remainingAmount: Math.max(0, this.#minAmount - this.#currentAmount),
-				percent: this.#progressPercent,
-				isComplete: this.#currentAmount >= this.#minAmount,
-			};
-		}
-
-		/**
-		 * Public API: Update message templates
-		 * @param {string} aboveMessage - Message template for above the bar
-		 * @param {string} belowMessage - Message template for below the bar
-		 */
-		setMessages(aboveMessage = null, belowMessage = null) {
-			if (aboveMessage !== null) {
-				this.#originalAboveMessage = aboveMessage;
-				this.setAttribute('message-above', aboveMessage);
-			}
-
-			if (belowMessage !== null) {
-				this.#originalBelowMessage = belowMessage;
-				this.setAttribute('message-below', belowMessage);
-			}
-
-			this.#updateMessages();
-		}
-
-		// Getters
-		get currentAmount() {
-			return this.#currentAmount;
-		}
-		get thresholdAmount() {
-			return this.#minAmount;
-		}
-		get minAmount() {
-			return this.#minAmount;
-		} // backwards compatibility
-		get percent() {
-			return this.#progressPercent;
-		}
-		get isComplete() {
-			return this.#currentAmount >= this.#minAmount;
-		}
-	}
-
-	// Define CartProgressBar custom element
-	customElements.define('cart-progress-bar', CartProgressBar);
-
-	exports.CartProgressBar = CartProgressBar;
-	exports.ProgressBar = ProgressBar;
-
-}));
-//# sourceMappingURL=cart-progress-bar.js.map

package/dist/cart-progress-bar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cart-progress-bar.js","sources":["../src/cart-progress-bar.js"],"sourcesContent":["import './cart-progress-bar.scss';\n\n/**\n * ProgressBar helper class for the visual progress bar element\n */\nclass ProgressBar extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tthis.#setupProgressBar();\n\t}\n\n\t#setupProgressBar() {\n\t\tthis.setAttribute('role', 'progressbar');\n\t\tthis.setAttribute('aria-valuemin', '0');\n\t\tthis.setAttribute('aria-valuemax', '100');\n\t\tthis.setAttribute('aria-valuenow', '0');\n\n\t\t// Create the visual progress bar\n\t\tthis.innerHTML = '<div class=\"progress-bar-fill\"></div>';\n\t}\n\n\tsetPercent(percent) {\n\t\tconst clampedPercent = Math.max(0, Math.min(100, percent));\n\t\tthis.style.setProperty('--cart-progress-percent', `${clampedPercent}%`);\n\t\tthis.setAttribute('aria-valuenow', clampedPercent);\n\t}\n}\n\n// Define ProgressBar custom element immediately so it's available for CartProgressBar\ncustomElements.define('progress-bar', ProgressBar);\n\n/**\n * CartProgressBar main component\n */\nclass CartProgressBar extends HTMLElement {\n\t// Private fields\n\t#minAmount = 0;\n\t#currentAmount = 0;\n\t#progressPercent = 0;\n\t#originalAboveMessage = '';\n\t#originalBelowMessage = '';\n\t#progressBar = null;\n\t#messageElement = null;\n\n\t/**\n\t * Define which attributes should be observed for changes\n\t */\n\tstatic get observedAttributes() {\n\t\treturn ['threshold', 'current', 'message-above', 'message-below'];\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.#init();\n\t}\n\n\t#init() {\n\t\t// Read initial attributes\n\t\tthis.#minAmount = parseFloat(this.getAttribute('threshold')) || 0;\n\t\tthis.#currentAmount = parseFloat(this.getAttribute('current')) || 0;\n\n\t\t// Store original message templates\n\t\tthis.#originalAboveMessage = this.getAttribute('message-above') || '';\n\t\tthis.#originalBelowMessage = this.getAttribute('message-below') || '';\n\t}\n\n\tasync connectedCallback() {\n\t\t// ensure the child custom element has been registered\n\t\tawait customElements.whenDefined('progress-bar');\n\n\t\tif (!customElements.get('progress-bar')) {\n\t\t\tthrow new Error('<progress-bar> must be registered before <cart-progress-bar> runs');\n\t\t}\n\n\t\tthis.#render();\n\t\tthis.#updateProgress();\n\t\tthis.#attachListeners();\n\t}\n\n\tattributeChangedCallback(name, oldValue, newValue) {\n\t\tif (oldValue === newValue) return;\n\n\t\tswitch (name) {\n\t\t\tcase 'threshold':\n\t\t\t\tthis.#minAmount = parseFloat(newValue) || 0;\n\t\t\t\tthis.#updateProgress();\n\t\t\t\tbreak;\n\t\t\tcase 'current':\n\t\t\t\tthis.#currentAmount = parseFloat(newValue) || 0;\n\t\t\t\tthis.#updateProgress();\n\t\t\t\tbreak;\n\t\t\tcase 'message-above':\n\t\t\t\tthis.#originalAboveMessage = newValue || '';\n\t\t\t\tthis.#updateMessages();\n\t\t\t\tbreak;\n\t\t\tcase 'message-below':\n\t\t\t\tthis.#originalBelowMessage = newValue || '';\n\t\t\t\tthis.#updateMessages();\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t#render() {\n\t\t// Find or create the message element\n\t\tthis.#messageElement =\n\t\t\tthis.querySelector('[data-content-cart-progress-message]') ||\n\t\t\tthis.querySelector('p[data-content-cart-progress-message]');\n\n\t\t// Find existing progress bar (user can add their own)\n\t\tthis.#progressBar = this.querySelector('progress-bar');\n\n\t\t// Create message element if it doesn't exist but we have message templates\n\t\tif (!this.#messageElement && (this.#originalAboveMessage || this.#originalBelowMessage)) {\n\t\t\tthis.#messageElement = document.createElement('p');\n\t\t\tthis.#messageElement.setAttribute('data-content-cart-progress-message', '');\n\t\t\tthis.appendChild(this.#messageElement);\n\t\t}\n\n\t\t// Create progress bar if it doesn't exist - add it at the end (below text message)\n\t\tif (!this.#progressBar) {\n\t\t\t// Ensure progress-bar is defined before creating\n\t\t\tif (customElements.get('progress-bar')) {\n\t\t\t\tthis.#progressBar = document.createElement('progress-bar');\n\t\t\t\tthis.appendChild(this.#progressBar);\n\t\t\t} else {\n\t\t\t\t// Fallback: wait for definition\n\t\t\t\tcustomElements.whenDefined('progress-bar').then(() => {\n\t\t\t\t\tif (!this.#progressBar) {\n\t\t\t\t\t\tthis.#progressBar = document.createElement('progress-bar');\n\t\t\t\t\t\tthis.appendChild(this.#progressBar);\n\t\t\t\t\t\tthis.#updateProgress(); // Update progress after creating\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\t#updateProgress() {\n\t\tif (this.#minAmount === 0) {\n\t\t\tthis.#progressPercent = 100;\n\t\t} else {\n\t\t\tthis.#progressPercent = Math.min(100, (this.#currentAmount / this.#minAmount) * 100);\n\t\t}\n\n\t\t// Update progress bar\n\t\tif (this.#progressBar) {\n\t\t\tthis.#progressBar.setPercent(this.#progressPercent);\n\t\t}\n\n\t\t// Update messages\n\t\tthis.#updateMessages();\n\n\t\t// Update component state\n\t\tthis.#updateComponentState();\n\t}\n\n\t#attachListeners() {\n\t\t// Find the nearest cart-panel component\n\t\tconst cartDialog = this.closest('cart-dialog');\n\n\t\tif (cartDialog) {\n\t\t\t// Listen for cart data changes\n\t\t\tcartDialog.addEventListener('cart-dialog:data-changed', (event) => {\n\t\t\t\tthis.#handleCartDataChange(event);\n\t\t\t});\n\t\t}\n\t}\n\n\t#handleCartDataChange(event) {\n\t\tconst updatedCart = event.detail;\n\n\t\tif (updatedCart) {\n\t\t\t// Use calculated_subtotal if available (handles _ignore_price_in_subtotal logic)\n\t\t\t// Otherwise fall back to total_price for backwards compatibility\n\t\t\tlet currentAmount = 0;\n\n\t\t\tif (typeof updatedCart.calculated_subtotal !== 'undefined') {\n\t\t\t\t// calculated_subtotal is already in dollars, no conversion needed\n\t\t\t\tcurrentAmount = updatedCart.calculated_subtotal / 100;\n\t\t\t} else if (typeof updatedCart.total_price !== 'undefined') {\n\t\t\t\t// Convert from cents to dollars if needed (Shopify typically returns cents)\n\t\t\t\tcurrentAmount = updatedCart.total_price / 100;\n\t\t\t}\n\n\t\t\tthis.setCurrentAmount(currentAmount);\n\t\t}\n\t}\n\n\t#updateMessages() {\n\t\tconst isComplete = this.#currentAmount >= this.#minAmount;\n\t\tconst remainingAmount = Math.max(0, this.#minAmount - this.#currentAmount);\n\n\t\t// Format amount with minimal formatting\n\t\tconst formattedAmount = remainingAmount.toFixed(2).replace('.00', '');\n\n\t\t// Update the single message element\n\t\tif (this.#messageElement) {\n\t\t\tlet messageTemplate;\n\n\t\t\tif (isComplete && this.#originalAboveMessage) {\n\t\t\t\t// Show success message when complete\n\t\t\t\tmessageTemplate = this.#originalAboveMessage;\n\t\t\t} else if (!isComplete) {\n\t\t\t\t// Show progress message when incomplete\n\t\t\t\tmessageTemplate = this.#originalBelowMessage || this.#originalAboveMessage;\n\t\t\t}\n\n\t\t\tif (messageTemplate) {\n\t\t\t\t// Support multiple placeholder formats: {amount}, { amount }, [amount]\n\t\t\t\tconst message = messageTemplate\n\t\t\t\t\t.replace(/\\{\\s*amount\\s*\\}/g, formattedAmount)\n\t\t\t\t\t.replace(/\\[\\s*amount\\s*\\]/g, formattedAmount);\n\t\t\t\tthis.#messageElement.textContent = message;\n\t\t\t\tthis.#messageElement.style.display = 'block';\n\t\t\t} else {\n\t\t\t\t// Hide message if no template available for current state\n\t\t\t\tthis.#messageElement.style.display = 'none';\n\t\t\t}\n\t\t}\n\t}\n\n\t#updateComponentState() {\n\t\tconst isComplete = this.#currentAmount >= this.#minAmount;\n\t\tthis.setAttribute('complete', isComplete.toString());\n\t}\n\n\n\t/**\n\t * Public API: Set the progress percentage directly\n\t * @param {number} percent - Progress percentage (0-100)\n\t */\n\tsetPercent(percent) {\n\t\tconst clampedPercent = Math.max(0, Math.min(100, percent));\n\t\tthis.#progressPercent = clampedPercent;\n\n\t\tif (this.#progressBar) {\n\t\t\tthis.#progressBar.setPercent(clampedPercent);\n\t\t}\n\n\t\t// Calculate current amount based on percentage\n\t\tthis.#currentAmount = (clampedPercent / 100) * this.#minAmount;\n\t\tthis.setAttribute('current', this.#currentAmount.toString());\n\n\t\tthis.#updateMessages();\n\t\tthis.#updateComponentState();\n\t}\n\n\t/**\n\t * Public API: Set the current cart amount\n\t * @param {number} amount - Current cart amount\n\t */\n\tsetCurrentAmount(amount) {\n\t\tthis.#currentAmount = parseFloat(amount) || 0;\n\t\tthis.setAttribute('current', this.#currentAmount.toString());\n\t\tthis.#updateProgress();\n\t}\n\n\t/**\n\t * Public API: Set the threshold amount for free shipping\n\t * @param {number} amount - Threshold amount for free shipping\n\t */\n\tsetThresholdAmount(amount) {\n\t\tthis.#minAmount = parseFloat(amount) || 0;\n\t\tthis.setAttribute('threshold', this.#minAmount.toString());\n\t\tthis.#updateProgress();\n\t}\n\n\t/**\n\t * Public API: Set the minimum amount for free shipping (deprecated - use setThresholdAmount)\n\t * @param {number} amount - Minimum amount threshold\n\t * @deprecated Use setThresholdAmount instead\n\t */\n\tsetMinAmount(amount) {\n\t\tthis.setThresholdAmount(amount);\n\t}\n\n\t/**\n\t * Public API: Get current progress information\n\t */\n\tgetProgress() {\n\t\treturn {\n\t\t\tcurrentAmount: this.#currentAmount,\n\t\t\tthresholdAmount: this.#minAmount,\n\t\t\tminAmount: this.#minAmount, // backwards compatibility\n\t\t\tremainingAmount: Math.max(0, this.#minAmount - this.#currentAmount),\n\t\t\tpercent: this.#progressPercent,\n\t\t\tisComplete: this.#currentAmount >= this.#minAmount,\n\t\t};\n\t}\n\n\t/**\n\t * Public API: Update message templates\n\t * @param {string} aboveMessage - Message template for above the bar\n\t * @param {string} belowMessage - Message template for below the bar\n\t */\n\tsetMessages(aboveMessage = null, belowMessage = null) {\n\t\tif (aboveMessage !== null) {\n\t\t\tthis.#originalAboveMessage = aboveMessage;\n\t\t\tthis.setAttribute('message-above', aboveMessage);\n\t\t}\n\n\t\tif (belowMessage !== null) {\n\t\t\tthis.#originalBelowMessage = belowMessage;\n\t\t\tthis.setAttribute('message-below', belowMessage);\n\t\t}\n\n\t\tthis.#updateMessages();\n\t}\n\n\t// Getters\n\tget currentAmount() {\n\t\treturn this.#currentAmount;\n\t}\n\tget thresholdAmount() {\n\t\treturn this.#minAmount;\n\t}\n\tget minAmount() {\n\t\treturn this.#minAmount;\n\t} // backwards compatibility\n\tget percent() {\n\t\treturn this.#progressPercent;\n\t}\n\tget isComplete() {\n\t\treturn this.#currentAmount >= this.#minAmount;\n\t}\n}\n\n// Define CartProgressBar custom element\ncustomElements.define('cart-progress-bar', CartProgressBar);\n\n// Export components for external use\nexport { CartProgressBar, ProgressBar };\n"],"names":[],"mappings":"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"}

package/dist/cart-progress-bar.scss

@@ -1,124 +0,0 @@
-// SCSS Variables (can be overridden before import)
-$cart-progress-bar-height: 12px !default;
-$cart-progress-bar-border-radius: 6px !default;
-$cart-progress-bar-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !default;
-$cart-progress-bar-transition-duration: 0.3s !default;
-
-// Core color variables
-$cart-progress-section-bg: transparent !default;
-$cart-progress-section-color: #495057 !default;
-$cart-progress-bar-bg: #e9ecef !default;
-$cart-progress-bar-fill-before: #28a745 !default;
-$cart-progress-bar-fill-after: #007bff !default;
-
-// Responsive breakpoints
-$cart-progress-mobile-breakpoint: 768px !default;
-
-// Cart progress bar component styles
-cart-progress-bar {
-	// CSS Custom Properties for customization (mapped from SCSS variables)
-	--cart-progress-bar-height: #{$cart-progress-bar-height};
-	--cart-progress-bar-border-radius: #{$cart-progress-bar-border-radius};
-	--cart-progress-bar-shadow: #{$cart-progress-bar-shadow};
-	--cart-progress-bar-transition-duration: #{$cart-progress-bar-transition-duration};
-
-	// Core color variables
-	--cart-progress-section-bg: #{$cart-progress-section-bg};
-	--cart-progress-section-color: #{$cart-progress-section-color};
-	--cart-progress-bar-bg: #{$cart-progress-bar-bg};
-	--cart-progress-bar-fill-before: #{$cart-progress-bar-fill-before};
-	--cart-progress-bar-fill-after: #{$cart-progress-bar-fill-after};
-
-	// Dynamic variables (set by JavaScript)
-	--cart-progress-percent: 0%;
-	--cart-progress-bar-fill-current: var(--cart-progress-bar-fill-before);
-
-	display: block;
-	width: 100%;
-	max-width: 100%;
-	background-color: var(--cart-progress-section-bg);
-	color: var(--cart-progress-section-color);
-
-	// Message styling
-	p[data-content-cart-progress-message] {
-		color: inherit;
-		transition: opacity var(--cart-progress-bar-transition-duration) ease;
-	}
-
-	// State-based styling
-	&[complete='true'] {
-		p[data-content-cart-progress-message] {
-			font-weight: 600;
-		}
-	}
-
-	// State-based progress bar coloring
-	&[complete='false'] {
-		--cart-progress-bar-fill-current: var(--cart-progress-bar-fill-before);
-	}
-
-	&[complete='true'] {
-		--cart-progress-bar-fill-current: var(--cart-progress-bar-fill-after);
-	}
-}
-
-// Progress bar component styles
-progress-bar {
-	display: block;
-	width: 100%;
-	height: var(--cart-progress-bar-height);
-	background-color: var(--cart-progress-bar-bg);
-	border-radius: var(--cart-progress-bar-border-radius);
-	box-shadow: var(--cart-progress-bar-shadow);
-	overflow: hidden;
-	position: relative;
-
-	.progress-bar-fill {
-		height: 100%;
-		width: var(--cart-progress-percent);
-		background-color: var(--cart-progress-bar-fill-current);
-		border-radius: var(--cart-progress-bar-border-radius);
-		transition:
-			width var(--cart-progress-bar-transition-duration) ease,
-			background-color var(--cart-progress-bar-transition-duration) ease;
-		position: relative;
-
-		// Subtle gradient effect
-		background-image: linear-gradient(
-			45deg,
-			rgba(255, 255, 255, 0.1) 25%,
-			transparent 25%,
-			transparent 50%,
-			rgba(255, 255, 255, 0.1) 50%,
-			rgba(255, 255, 255, 0.1) 75%,
-			transparent 75%,
-			transparent
-		);
-		background-size: 12px 12px;
-
-		// Shine effect for completed state
-		&::after {
-			content: '';
-			position: absolute;
-			top: 0;
-			left: -100%;
-			width: 100%;
-			height: 100%;
-			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
-			transition: left 0.5s ease;
-		}
-	}
-
-	// Animate shine effect when complete
-	cart-progress-bar[complete='true'] & {
-		.progress-bar-fill::after {
-			left: 100%;
-		}
-	}
-
-	// Accessibility improvements
-	&:focus-visible {
-		outline: 2px solid #007bff;
-		outline-offset: 2px;
-	}
-}