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

package/README.md

@@ -2,12 +2,12 @@
 
 A beautiful, accessible cart progress bar web component for free shipping thresholds and e-commerce sites.
 
-[**Live Demo**](https://magic-spells.github.io/cart-progress-bar/demo/)
+[**Live Demo**](https://magic-spells.github.io/cart/)
 
 ## Features
 
-- 🎯 **Smart Messaging** - Template-based messages with flexible placeholder formats
-- 🎨 **Simplified Theming** - Just 5 CSS variables to control all colors and appearance
+- 🎯 **Smart Messaging** - Template-based messages with an `[amount]` placeholder
+- 🎨 **Simplified Theming** - Just 6 CSS variables to control all colors and appearance
 - 📱 **Responsive** - Mobile-optimized with responsive breakpoints
 - ⚡ **Smooth Animations** - Buttery smooth transitions and completion effects
 - 🔧 **Easy Integration** - Drop-in web component that works with any framework
@@ -18,6 +18,32 @@ A beautiful, accessible cart progress bar web component for free shipping thresh
 npm install @magic-spells/cart-progress-bar
 ```
 
+The package is **ESM only** — there is no CommonJS build and `exports` declares no
+`require` condition. Import it once, anywhere in your module graph; it registers
+`<cart-progress-bar>` and `<progress-bar>` as a side effect.
+
+```javascript
+import '@magic-spells/cart-progress-bar';
+// or, if you need the classes:
+import { CartProgressBar, ProgressBar } from '@magic-spells/cart-progress-bar';
+```
+
+The stylesheet is extracted into its own file rather than injected by the JS, so
+load it yourself:
+
+```css
+@import '@magic-spells/cart-progress-bar/css'; /* unminified */
+@import '@magic-spells/cart-progress-bar/css/min'; /* minified */
+```
+
+For a plain `<script>` tag with no build step, use the minified UMD bundle, which
+exposes the global `CartProgressBar`:
+
+```html
+<link rel="stylesheet" href="node_modules/@magic-spells/cart-progress-bar/dist/cart-progress-bar.min.css" />
+<script src="node_modules/@magic-spells/cart-progress-bar/dist/cart-progress-bar.min.js"></script>
+```
+
 ## Basic Usage
 
 ```html
@@ -25,16 +51,12 @@ npm install @magic-spells/cart-progress-bar
 	threshold="75.00"
 	current="25.50"
 	message-above="🎉 Congratulations! You've qualified for FREE shipping!"
-	message-below="Add ${ amount } more for FREE shipping!">
-	<p data-content-cart-progress-message>Add ${ amount } more for FREE shipping!</p>
+	message-below="Add $[amount] more for FREE shipping!">
+	<p data-content-cart-progress-message>Add $[amount] more for FREE shipping!</p>
 	<progress-bar></progress-bar>
 </cart-progress-bar>
 ```
 
-```css
-@import '@magic-spells/cart-progress-bar/css/min';
-```
-
 ## JavaScript API
 
 ```javascript
@@ -54,21 +76,21 @@ const info = progressBar.getProgress();
 console.log(info.percent, info.isComplete, info.thresholdAmount);
 
 // Update message templates
-progressBar.setMessages('Almost there!', 'Only ${ amount } more to go!');
+progressBar.setMessages('Almost there!', 'Only $[amount] more to go!');
 ```
 
 ## Cart Integration
 
-The component automatically listens for cart data changes when placed inside a `<cart-dialog>` component from the `@magic-spells/cart-panel` package:
+The component automatically listens for cart data changes when placed inside a `<cart-panel>` component from the `@magic-spells/cart-panel` package:
 
 ```html
-<cart-dialog>
-	<cart-progress-bar threshold="75.00" message-below="Add ${ amount } more for FREE shipping!">
+<cart-panel>
+	<cart-progress-bar threshold="75.00" message-below="Add $[amount] more for FREE shipping!">
 	</cart-progress-bar>
-</cart-dialog>
+</cart-panel>
 ```
 
-When the cart-dialog emits a `cart-dialog:data-changed` event (typically from Shopify cart API updates), the progress bar will automatically update with the calculated cart subtotal.
+When the cart-panel emits a `cart-panel:data-changed` event (typically from Shopify cart API updates), the progress bar will automatically update with the calculated cart subtotal. Point it at a different ancestor with `listen-selector` and `listen-event`.
 
 ### Smart Pricing Logic
 
@@ -86,7 +108,10 @@ The progress bar uses intelligent pricing calculation:
 | `threshold`     | Threshold amount for free shipping        | `"75.00"`                      |
 | `current`       | Current cart amount                       | `"25.50"`                      |
 | `message-above` | Success message when threshold is reached | `"🎉 FREE shipping unlocked!"` |
-| `message-below` | Message template shown below the bar      | `"Add ${ amount } more!"`       |
+| `message-below` | Message template shown below the bar      | `"Add $[amount] more!"`         |
+| `money-format`  | Shopify money format string; uses `{{amount}}` placeholders and formats the amount that fills `[amount]` in the messages | `"${{amount}}"`   |
+| `listen-selector` | `closest()` selector for the element to listen on | `"cart-panel"` (default) |
+| `listen-event`  | Event name to listen for on that element  | `"cart-panel:data-changed"` (default) |
 
 ## Customization
 
@@ -95,8 +120,6 @@ Use CSS custom properties to customize the appearance:
 ```css
 cart-progress-bar {
 	/* Core color customization */
-	--cart-progress-section-bg: #f8f9fa;
-	--cart-progress-section-color: #333;
 	--cart-progress-bar-bg: #e9ecef;
 	--cart-progress-bar-fill-before: #ff6b6b;
 	--cart-progress-bar-fill-after: #28a745;
@@ -104,6 +127,7 @@ cart-progress-bar {
 	/* Structure (optional) */
 	--cart-progress-bar-height: 16px;
 	--cart-progress-bar-border-radius: 8px;
+	--cart-progress-bar-transition-duration: 0.3s;
 }
 ```
 
@@ -113,8 +137,6 @@ cart-progress-bar {
 
 | Property                          | Description                          | Default       |
 | --------------------------------- | ------------------------------------ | ------------- |
-| `--cart-progress-section-bg`      | Background color of entire component | `transparent` |
-| `--cart-progress-section-color`   | Text/foreground color                | `#495057`     |
 | `--cart-progress-bar-bg`          | Background of progress bar track     | `#e9ecef`     |
 | `--cart-progress-bar-fill-before` | Fill color before reaching threshold | `#28a745`     |
 | `--cart-progress-bar-fill-after`  | Fill color after reaching threshold  | `#007bff`     |
@@ -125,38 +147,43 @@ cart-progress-bar {
 | --------------------------------------- | --------------------------------- | ------- |
 | `--cart-progress-bar-height`            | Height of the progress bar        | `12px`  |
 | `--cart-progress-bar-border-radius`     | Border radius                     | `6px`   |
-| `--cart-progress-bar-shadow`            | Box shadow for progress bar       | `inset 0 1px 2px rgba(0, 0, 0, 0.1)` |
 | `--cart-progress-bar-transition-duration` | Animation transition duration   | `0.3s`  |
 
+Two more are set for you and are not meant to be overridden:
+`--cart-progress-percent` (the fill width, written by JavaScript) and
+`--cart-progress-bar-fill-current` (switched between the before/after colors by the
+`complete` attribute).
+
 ## Message Templates
 
-Use placeholder formats in your message templates and include the currency symbol:
+Use the `[amount]` placeholder in your message templates and include the currency symbol:
 
 ```html
 <cart-progress-bar
 	message-above="🎉 FREE shipping unlocked!"
-	message-below="You need ${ amount } more for free shipping!">
-	<p data-content-cart-progress-message>You need ${ amount } more for free shipping!</p>
+	message-below="You need $[amount] more for free shipping!">
+	<p data-content-cart-progress-message>You need $[amount] more for free shipping!</p>
 </cart-progress-bar>
 ```
 
-### Supported Placeholder Formats
+### Supported Placeholder Format
 
-- `{ amount }` - spaces around amount
-- `{amount}` - no spaces
-- `[amount]` - square brackets (with or without spaces)
+`[amount]` — square brackets, with or without spaces inside (`[amount]`, `[ amount ]`). Square
+brackets avoid clashing with Liquid's `{{ }}` and JavaScript template literals, so curly-brace
+forms are **not** substituted in messages. (`money-format` is the one place `{{amount}}` is used,
+and it formats the number that fills `[amount]`.)
 
 ### Examples
 
 ```html
 <!-- Dollar amounts -->
-<cart-progress-bar message-below="Add ${ amount } more for free shipping!">
+<cart-progress-bar message-below="Add $[amount] more for free shipping!">
 
 <!-- Euro amounts -->
-<cart-progress-bar message-below="Only €{amount} left to unlock free delivery!">
+<cart-progress-bar message-below="Only €[amount] left to unlock free delivery!">
 
-<!-- With square brackets -->
-<cart-progress-bar message-below="Just £[amount] more to go!">
+<!-- Spaces inside the brackets work too -->
+<cart-progress-bar message-below="Just £[ amount ] more to go!">
 ```
 
 The component automatically:
@@ -183,6 +210,36 @@ These attributes are used internally to switch between the "before" and "after"
 - Safari 14+
 - All modern browsers with Custom Elements support
 
+## Development
+
+- `npm run build` — production build to `dist/` via `scripts/build.mjs` (Vite +
+  Rolldown, Lightning CSS, Terser). Emits exactly four files: the unminified ESM
+  bundle, the minified UMD bundle, and the plain and minified stylesheets.
+- `npm run dev` — watch build into `demo/dist/`, plus a Vite dev server for
+  `demo/` at [http://localhost:3001](http://localhost:3001) with live reload.
+  `host: true`, so the demo also answers on the LAN address Vite prints.
+- `npm run lint` / `npm run format` — ESLint / Prettier.
+
+`scripts/build.mjs` is the whole build configuration (`configFile: false`) —
+there is no `vite.config.js`. Sourcemaps are emitted for the demo only; the
+published `dist/` carries none, because Rolldown inlines `sourcesContent` and
+would ship `src/` a second time inside them.
+
+### Build output
+
+| File                          | Format                                    |
+| ----------------------------- | ----------------------------------------- |
+| `cart-progress-bar.esm.js`    | Unminified ESM                            |
+| `cart-progress-bar.min.js`    | Minified UMD, global `CartProgressBar`    |
+| `cart-progress-bar.css`       | Plain stylesheet                          |
+| `cart-progress-bar.min.css`   | Minified stylesheet                       |
+
 ## License
 
 MIT License - see LICENSE file for details.
+
+---
+
+<p align="center">
+  Made by <a href="https://github.com/coryschulz">Cory Schulz</a>
+</p>

package/dist/cart-progress-bar.css

@@ -1,69 +1,48 @@
 cart-progress-bar {
   --cart-progress-bar-height: 12px;
   --cart-progress-bar-border-radius: 6px;
-  --cart-progress-bar-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-  --cart-progress-bar-transition-duration: 0.3s;
-  --cart-progress-section-bg: transparent;
-  --cart-progress-section-color: #495057;
+  --cart-progress-bar-transition-duration: .3s;
   --cart-progress-bar-bg: #e9ecef;
   --cart-progress-bar-fill-before: #28a745;
   --cart-progress-bar-fill-after: #007bff;
   --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);
+  display: block;
 }
+
 cart-progress-bar p[data-content-cart-progress-message] {
-  color: inherit;
   transition: opacity var(--cart-progress-bar-transition-duration) ease;
 }
-cart-progress-bar[complete=true] p[data-content-cart-progress-message] {
+
+cart-progress-bar[complete="true"] p[data-content-cart-progress-message] {
   font-weight: 600;
 }
-cart-progress-bar[complete=false] {
+
+cart-progress-bar[complete="false"] {
   --cart-progress-bar-fill-current: var(--cart-progress-bar-fill-before);
 }
-cart-progress-bar[complete=true] {
+
+cart-progress-bar[complete="true"] {
   --cart-progress-bar-fill-current: var(--cart-progress-bar-fill-after);
 }
 
 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;
+  display: block;
   position: relative;
+  overflow: hidden;
 }
+
 progress-bar .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;
-  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;
-}
-progress-bar .progress-bar-fill::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;
-}
-cart-progress-bar[complete=true] progress-bar .progress-bar-fill::after {
-  left: 100%;
+  transition: width var(--cart-progress-bar-transition-duration) ease,
+		background-color var(--cart-progress-bar-transition-duration) ease;
 }
-progress-bar:focus-visible {
-  outline: 2px solid #007bff;
-  outline-offset: 2px;
-}
+/*$vite$:1*/