@lime-bundles/widget 2.1.0 → 2.2.0

package/docs/web-component.md

@@ -155,6 +155,25 @@ type CartLineInput = {
 
 Every `CartLineInput.attributes` array includes `{ key: "_lime_bundle_gid", value: <bundle GID> }`. Preserve it on the way to Shopify cart mutation or purchase attribution breaks.
 
+### Loading state (optional)
+
+The widget's CTA button is structured to support a spinner overlay that matches the theme-extension look. The SDK itself stays neutral on timing — you toggle the state during your async cart mutation:
+
+```ts
+el.addEventListener("lime-bundle:add-to-cart", async (e: CustomEvent) => {
+  const btn = (e.target as Element).shadowRoot
+    ?.querySelector<HTMLButtonElement>("[data-add-bundle]");
+  btn?.setAttribute("data-loading", "true");
+  try {
+    await cart.linesAdd(e.detail.lines);
+  } finally {
+    btn?.removeAttribute("data-loading");
+  }
+});
+```
+
+Under the hood the button is a 1×1 CSS grid with two overlaid children (`.lb-cta-label` and `.lb-cta-spinner`). Setting `data-loading="true"` hides the label and reveals the spinner without resizing the button. Omit this pattern entirely and the button simply stays static during the cart call — no visual regression.
+
 ### `lime-bundle:loaded`
 
 Fired once bundle data has been fetched and parsed successfully. Useful for hiding a placeholder or triggering analytics in non-SDK systems. The event fires even when zero bundles apply to the current product (product has no bundles attached); check `bundleCount` to tell the difference.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lime-bundles/widget",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Drop-in <lime-bundle> web component for the Lime Bundles Shopify app. Embed merchant-configured bundles on Hydrogen, Astro, Vue, Svelte, or any JavaScript-enabled headless storefront.",
   "type": "module",
   "main": "./dist/index.cjs",