@nymbalhq/web-components 1.1.0 → 1.3.0

package/dist/index.js

@@ -1,1424 +1,144 @@
-// src/registry.ts
-var CLIENT_KEY = /* @__PURE__ */ Symbol.for("nymbal.client");
-function registerClient(client) {
-  globalThis[CLIENT_KEY] = client;
-}
-function getClient() {
-  const client = globalThis[CLIENT_KEY];
-  if (!client) {
-    throw new Error("NymbalClient not registered. Call registerClient() before using components.");
-  }
-  return client;
-}
-
-// src/base-element.ts
-var HTMLElementBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {
-};
-var NymbalElement = class extends HTMLElementBase {
-  _unsubs = [];
-  _renderQueued = false;
-  get client() {
-    return getClient();
-  }
-  subscribeToStore(store) {
-    this._unsubs.push(store.subscribe(() => this.requestRender()));
-  }
-  requestRender() {
-    if (this._renderQueued) return;
-    this._renderQueued = true;
-    queueMicrotask(() => {
-      this._renderQueued = false;
-      this.render();
-    });
-  }
-  connectedCallback() {
-    this.setup();
-    this.render();
-  }
-  disconnectedCallback() {
-    for (const fn of this._unsubs) fn();
-    this._unsubs = [];
-  }
-};
-
-// src/styles.ts
-var injected = /* @__PURE__ */ new Set();
-function injectStyles(tagName, css) {
-  if (injected.has(tagName)) return;
-  if (typeof document === "undefined") return;
-  const style = document.createElement("style");
-  style.setAttribute("data-nymbal", tagName);
-  style.textContent = css;
-  document.head.appendChild(style);
-  injected.add(tagName);
-}
-
-// src/components/add-to-cart.ts
-var STYLES = `
-nymbal-add-to-cart {
-  display: inline-block;
-}
-nymbal-add-to-cart button {
-  font-family: var(--nymbal-font-family);
-  font-size: var(--nymbal-font-size-base);
-  font-weight: var(--nymbal-font-weight-medium);
-  background: var(--nymbal-color-primary);
-  color: var(--nymbal-color-text-inverse);
-  border: none;
-  border-radius: var(--nymbal-radius-md);
-  padding: var(--nymbal-spacing-sm) var(--nymbal-spacing-lg);
-  cursor: pointer;
-  transition: background var(--nymbal-transition-fast);
-  min-width: 140px;
-}
-nymbal-add-to-cart button:hover:not(:disabled) {
-  background: var(--nymbal-color-primary-hover);
-}
-nymbal-add-to-cart button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-`;
-var MIN_QTY = 1;
-var MAX_QTY = 99;
-function quantityOf(attr) {
-  const n = attr === null || attr.trim() === "" ? Number.NaN : Number(attr);
-  const whole = Number.isInteger(n) ? n : MIN_QTY;
-  return Math.min(MAX_QTY, Math.max(MIN_QTY, whole));
-}
-var NymbalAddToCart = class extends NymbalElement {
-  static get observedAttributes() {
-    return ["variant-id", "qty", "disabled"];
-  }
-  button;
-  setup() {
-    injectStyles("nymbal-add-to-cart", STYLES);
-    this.subscribeToStore(this.client.cart);
-  }
-  render() {
-    const variantId = this.getAttribute("variant-id");
-    const isDisabled = this.hasAttribute("disabled");
-    const cartState = this.client.cart.getState();
-    if (!this.button) {
-      this.button = document.createElement("button");
-      this.button.setAttribute("type", "button");
-      this.button.setAttribute("data-testid", "add-to-cart");
-      this.button.addEventListener("click", this.handleClick);
-      this.innerHTML = "";
-      this.appendChild(this.button);
-    }
-    this.button.disabled = isDisabled || cartState.loading || !variantId;
-    this.button.setAttribute("aria-busy", String(cartState.loading));
-    this.button.textContent = cartState.loading ? "Adding..." : "Add to Cart";
-  }
-  attributeChangedCallback() {
-    if (this.isConnected) this.requestRender();
-  }
-  handleClick = async () => {
-    const variantId = this.getAttribute("variant-id");
-    if (!variantId) return;
-    const qty = quantityOf(this.getAttribute("qty"));
-    try {
-      await this.client.cart.addItem(variantId, qty);
-      this.dispatchEvent(
-        new CustomEvent("nymbal:cart:item-added", {
-          bubbles: true,
-          composed: true,
-          detail: { variantId, qty }
-        })
-      );
-    } catch {
-    }
-  };
-};
-
-// src/components/cart-drawer.ts
-var STYLES2 = `
-nymbal-cart-drawer {
-  display: block;
-}
-nymbal-cart-drawer .nymbal-drawer-overlay {
-  position: fixed;
-  inset: 0;
-  background: var(--nymbal-color-overlay);
-  z-index: var(--nymbal-z-drawer);
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity var(--nymbal-transition-normal), visibility var(--nymbal-transition-normal);
-}
-nymbal-cart-drawer[open] .nymbal-drawer-overlay {
-  opacity: 1;
-  visibility: visible;
-}
-nymbal-cart-drawer .nymbal-drawer-panel {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: min(400px, 90vw);
-  background: var(--nymbal-color-surface);
-  z-index: var(--nymbal-z-drawer);
-  transform: translateX(100%);
-  transition: transform var(--nymbal-transition-normal);
-  display: flex;
-  flex-direction: column;
-  font-family: var(--nymbal-font-family);
-}
-nymbal-cart-drawer[open] .nymbal-drawer-panel {
-  transform: translateX(0);
-}
-nymbal-cart-drawer .nymbal-drawer-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--nymbal-spacing-md) var(--nymbal-spacing-lg);
-  border-bottom: 1px solid var(--nymbal-color-border);
-}
-nymbal-cart-drawer .nymbal-drawer-header h2 {
-  margin: 0;
-  font-size: var(--nymbal-font-size-lg);
-  font-weight: var(--nymbal-font-weight-bold);
-}
-nymbal-cart-drawer .nymbal-drawer-close {
-  background: none;
-  border: none;
-  font-size: var(--nymbal-font-size-xl);
-  cursor: pointer;
-  padding: var(--nymbal-spacing-xs);
-  color: var(--nymbal-color-text-muted);
-}
-nymbal-cart-drawer .nymbal-drawer-items {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--nymbal-spacing-md) var(--nymbal-spacing-lg);
-}
-nymbal-cart-drawer .nymbal-cart-item {
-  display: flex;
-  gap: var(--nymbal-spacing-md);
-  padding: var(--nymbal-spacing-md) 0;
-  border-bottom: 1px solid var(--nymbal-color-border);
-}
-nymbal-cart-drawer .nymbal-cart-item-info {
-  flex: 1;
-}
-nymbal-cart-drawer .nymbal-cart-item-name {
-  font-weight: var(--nymbal-font-weight-medium);
-  margin-bottom: var(--nymbal-spacing-xs);
-}
-nymbal-cart-drawer .nymbal-cart-item-variant {
-  font-size: var(--nymbal-font-size-sm);
-  color: var(--nymbal-color-text-muted);
-}
-nymbal-cart-drawer .nymbal-cart-item-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--nymbal-spacing-sm);
-}
-nymbal-cart-drawer .nymbal-cart-item-remove {
-  background: none;
-  border: none;
-  color: var(--nymbal-color-error);
-  cursor: pointer;
-  font-size: var(--nymbal-font-size-sm);
-  padding: var(--nymbal-spacing-xs);
-}
-nymbal-cart-drawer .nymbal-drawer-footer {
-  padding: var(--nymbal-spacing-md) var(--nymbal-spacing-lg);
-  border-top: 1px solid var(--nymbal-color-border);
-}
-nymbal-cart-drawer .nymbal-cart-subtotal {
-  display: flex;
-  justify-content: space-between;
-  font-weight: var(--nymbal-font-weight-bold);
-  margin-bottom: var(--nymbal-spacing-md);
-}
-nymbal-cart-drawer .nymbal-checkout-btn {
-  width: 100%;
-  font-family: var(--nymbal-font-family);
-  font-size: var(--nymbal-font-size-base);
-  font-weight: var(--nymbal-font-weight-medium);
-  background: var(--nymbal-color-primary);
-  color: var(--nymbal-color-text-inverse);
-  border: none;
-  border-radius: var(--nymbal-radius-md);
-  padding: var(--nymbal-spacing-sm) var(--nymbal-spacing-lg);
-  cursor: pointer;
-  transition: background var(--nymbal-transition-fast);
-}
-nymbal-cart-drawer .nymbal-checkout-btn:hover {
-  background: var(--nymbal-color-primary-hover);
-}
-nymbal-cart-drawer .nymbal-drawer-empty {
-  text-align: center;
-  color: var(--nymbal-color-text-muted);
-  padding: var(--nymbal-spacing-xl) 0;
-}
-`;
-var NymbalCartDrawer = class extends NymbalElement {
-  static get observedAttributes() {
-    return ["open"];
-  }
-  handleItemAdded = () => {
-    this.open();
-  };
-  handleMiniCartClicked = () => {
-    this.toggle();
-  };
-  setup() {
-    injectStyles("nymbal-cart-drawer", STYLES2);
-    this.subscribeToStore(this.client.cart);
-    document.addEventListener("nymbal:cart:item-added", this.handleItemAdded);
-    document.addEventListener("nymbal:mini-cart:clicked", this.handleMiniCartClicked);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("nymbal:cart:item-added", this.handleItemAdded);
-    document.removeEventListener("nymbal:mini-cart:clicked", this.handleMiniCartClicked);
-  }
-  open() {
-    this.setAttribute("open", "");
-    window.dispatchEvent(new CustomEvent("nymbal:cart:open"));
-  }
-  close() {
-    this.removeAttribute("open");
-    window.dispatchEvent(new CustomEvent("nymbal:cart:close"));
-  }
-  toggle() {
-    if (this.hasAttribute("open")) {
-      this.close();
-    } else {
-      this.open();
-    }
-  }
-  render() {
-    const state = this.client.cart.getState();
-    const currency = state.currency;
-    const itemsHtml = state.items.length === 0 ? `<div class="nymbal-drawer-empty">Your cart is empty</div>` : state.items.map((item) => `
-        <div class="nymbal-cart-item" data-testid="cart-item-${item.variantId}">
-          <div class="nymbal-cart-item-info">
-            <div class="nymbal-cart-item-name">${this.esc(item.productName)}</div>
-            <div class="nymbal-cart-item-variant">${this.esc(item.variantName)}</div>
-            <div class="nymbal-cart-item-qty">Qty: ${item.qty}</div>
-          </div>
-          <div class="nymbal-cart-item-actions">
-            <span>${this.formatPrice(item.priceMinor * item.qty, currency)}</span>
-            <button type="button" class="nymbal-cart-item-remove" data-testid="remove-item-${item.variantId}" data-variant-id="${item.variantId}">Remove</button>
-          </div>
-        </div>
-      `).join("");
-    this.innerHTML = `
-      <div class="nymbal-drawer-overlay" data-testid="cart-drawer-overlay"></div>
-      <div class="nymbal-drawer-panel" role="dialog" aria-label="Shopping cart" aria-modal="true" data-testid="cart-drawer">
-        <div class="nymbal-drawer-header">
-          <h2>Cart (${state.itemCount})</h2>
-          <button type="button" class="nymbal-drawer-close" data-testid="cart-drawer-close" aria-label="Close cart">&times;</button>
-        </div>
-        <div class="nymbal-drawer-items">${itemsHtml}</div>
-        ${state.items.length > 0 ? `
-          <div class="nymbal-drawer-footer">
-            <div class="nymbal-cart-subtotal">
-              <span>Subtotal</span>
-              <span>${this.formatPrice(state.subtotalMinor, currency)}</span>
-            </div>
-            <button type="button" class="nymbal-checkout-btn" data-testid="cart-checkout-btn">Checkout</button>
-          </div>
-        ` : ""}
-      </div>
-    `;
-    this.querySelector(".nymbal-drawer-overlay")?.addEventListener("click", () => this.close());
-    this.querySelector(".nymbal-drawer-close")?.addEventListener("click", () => this.close());
-    this.querySelector(".nymbal-checkout-btn")?.addEventListener("click", () => {
-      this.dispatchEvent(new CustomEvent("nymbal:cart:checkout-clicked", { bubbles: true, composed: true }));
-    });
-    this.querySelectorAll(".nymbal-cart-item-remove").forEach((btn) => {
-      btn.addEventListener("click", () => {
-        const variantId = btn.dataset["variantId"];
-        if (variantId) this.client.cart.removeItem(variantId);
-      });
-    });
-  }
-  attributeChangedCallback() {
-    if (this.isConnected) this.requestRender();
-  }
-  esc(str) {
-    const div = document.createElement("div");
-    div.textContent = str;
-    return div.innerHTML;
-  }
-  formatPrice(minor, currency) {
-    return new Intl.NumberFormat(void 0, {
-      style: "currency",
-      currency
-    }).format(minor / 100);
-  }
-};
-
-// src/components/mini-cart.ts
-var STYLES3 = `
-nymbal-mini-cart {
-  display: inline-block;
-  position: relative;
-}
-nymbal-mini-cart button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  position: relative;
-  padding: var(--nymbal-spacing-sm);
-  font-family: var(--nymbal-font-family);
-  color: var(--nymbal-color-text);
-}
-nymbal-mini-cart .nymbal-mini-cart-icon {
-  width: 24px;
-  height: 24px;
-}
-nymbal-mini-cart .nymbal-mini-cart-badge {
-  position: absolute;
-  top: 0;
-  right: 0;
-  background: var(--nymbal-color-accent);
-  color: var(--nymbal-color-text-inverse);
-  font-size: var(--nymbal-font-size-xs);
-  font-weight: var(--nymbal-font-weight-bold);
-  min-width: 18px;
-  height: 18px;
-  border-radius: var(--nymbal-radius-full);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-}
-nymbal-mini-cart .nymbal-mini-cart-badge:empty {
-  display: none;
-}
-`;
-var CART_SVG = `<svg class="nymbal-mini-cart-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>`;
-var NymbalMiniCart = class extends NymbalElement {
-  setup() {
-    injectStyles("nymbal-mini-cart", STYLES3);
-    this.subscribeToStore(this.client.cart);
-  }
-  render() {
-    const { itemCount } = this.client.cart.getState();
-    this.innerHTML = `
-      <button type="button" data-testid="mini-cart" aria-label="Cart (${itemCount} items)">
-        ${CART_SVG}
-        <span class="nymbal-mini-cart-badge" data-testid="mini-cart-badge">${itemCount > 0 ? itemCount : ""}</span>
-      </button>
-    `;
-    this.querySelector("button")?.addEventListener("click", () => {
-      this.dispatchEvent(new CustomEvent("nymbal:mini-cart:clicked", { bubbles: true, composed: true }));
-    });
-  }
-};
-
-// src/components/variant-selector.ts
-var STYLES4 = `
-nymbal-variant-selector {
-  display: block;
-  font-family: var(--nymbal-font-family);
-}
-nymbal-variant-selector .nymbal-option-group {
-  margin-bottom: var(--nymbal-spacing-md);
-}
-nymbal-variant-selector .nymbal-option-label {
-  display: block;
-  font-size: var(--nymbal-font-size-sm);
-  font-weight: var(--nymbal-font-weight-medium);
-  margin-bottom: var(--nymbal-spacing-sm);
-  color: var(--nymbal-color-text);
-}
-nymbal-variant-selector .nymbal-option-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--nymbal-spacing-sm);
-}
-nymbal-variant-selector .nymbal-option-btn {
-  font-family: var(--nymbal-font-family);
-  font-size: var(--nymbal-font-size-sm);
-  background: var(--nymbal-color-surface);
-  color: var(--nymbal-color-text);
-  border: 1px solid var(--nymbal-color-border);
-  border-radius: var(--nymbal-radius-md);
-  padding: var(--nymbal-spacing-xs) var(--nymbal-spacing-md);
-  cursor: pointer;
-  transition: border-color var(--nymbal-transition-fast), background var(--nymbal-transition-fast);
-}
-nymbal-variant-selector .nymbal-option-btn:hover {
-  border-color: var(--nymbal-color-primary);
-}
-nymbal-variant-selector .nymbal-option-btn[aria-pressed="true"] {
-  background: var(--nymbal-color-primary);
-  color: var(--nymbal-color-text-inverse);
-  border-color: var(--nymbal-color-primary);
-}
-nymbal-variant-selector .nymbal-option-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-`;
-function optionsOf(variant) {
-  return Array.isArray(variant.options) ? variant.options : [];
-}
-var NymbalVariantSelector = class extends NymbalElement {
-  setup() {
-    injectStyles("nymbal-variant-selector", STYLES4);
-    this.subscribeToStore(this.client.product);
-  }
-  render() {
-    const state = this.client.product.getState();
-    const product = state.product;
-    if (!product) {
-      this.innerHTML = "";
-      return;
-    }
-    const optionGroups = this.getOptionGroups(product);
-    const selected = state.selectedVariant;
-    this.innerHTML = optionGroups.map((group) => `
-      <div class="nymbal-option-group">
-        <span class="nymbal-option-label">${this.esc(group.name)}</span>
-        <div class="nymbal-option-buttons">
-          ${group.values.map((value) => {
-      const isSelected = selected !== null && optionsOf(selected).some((o) => o.name === group.name && o.value === value);
-      return `<button
-              class="nymbal-option-btn"
-              data-testid="variant-option-${this.esc(group.name)}-${this.esc(value)}"
-              data-option-name="${this.esc(group.name)}"
-              data-option-value="${this.esc(value)}"
-              aria-pressed="${isSelected}"
-            >${this.esc(value)}</button>`;
-    }).join("")}
-        </div>
-      </div>
-    `).join("");
-    this.querySelectorAll(".nymbal-option-btn").forEach((btn) => {
-      btn.addEventListener("click", () => {
-        const el = btn;
-        const optionName = el.dataset["optionName"];
-        const optionValue = el.dataset["optionValue"];
-        if (!optionName || !optionValue || !product) return;
-        const currentSelections = /* @__PURE__ */ new Map();
-        if (selected) {
-          for (const opt of optionsOf(selected)) {
-            currentSelections.set(opt.name, opt.value);
-          }
-        }
-        currentSelections.set(optionName, optionValue);
-        const match = product.variants.find(
-          (v) => optionsOf(v).every((o) => currentSelections.get(o.name) === o.value)
-        );
-        if (match) {
-          this.client.product.selectVariant(match);
-          this.dispatchEvent(
-            new CustomEvent("nymbal:variant:selected", {
-              bubbles: true,
-              composed: true,
-              detail: { variant: match }
-            })
-          );
-        }
-      });
-    });
-  }
-  getOptionGroups(product) {
-    const groups = /* @__PURE__ */ new Map();
-    for (const variant of product.variants) {
-      for (const opt of optionsOf(variant)) {
-        let values = groups.get(opt.name);
-        if (!values) {
-          values = /* @__PURE__ */ new Set();
-          groups.set(opt.name, values);
-        }
-        values.add(opt.value);
-      }
-    }
-    return Array.from(groups.entries()).map(([name, values]) => ({
-      name,
-      values: Array.from(values)
-    }));
-  }
-  esc(str) {
-    const div = document.createElement("div");
-    div.textContent = str;
-    return div.innerHTML;
-  }
-};
-
-// src/components/quantity-selector.ts
-var STYLES5 = `
-nymbal-quantity-selector {
-  display: inline-flex;
-  align-items: center;
-  font-family: var(--nymbal-font-family);
-}
-nymbal-quantity-selector button {
-  font-family: var(--nymbal-font-family);
-  font-size: var(--nymbal-font-size-base);
-  background: var(--nymbal-color-surface);
-  color: var(--nymbal-color-text);
-  border: 1px solid var(--nymbal-color-border);
-  width: 36px;
-  height: 36px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background var(--nymbal-transition-fast);
-}
-nymbal-quantity-selector button:hover:not(:disabled) {
-  background: var(--nymbal-color-secondary, #f4f4f5);
-}
-nymbal-quantity-selector button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-nymbal-quantity-selector button:first-child {
-  border-radius: var(--nymbal-radius-md) 0 0 var(--nymbal-radius-md);
-}
-nymbal-quantity-selector button:last-child {
-  border-radius: 0 var(--nymbal-radius-md) var(--nymbal-radius-md) 0;
-}
-nymbal-quantity-selector input {
-  font-family: var(--nymbal-font-family);
-  font-size: var(--nymbal-font-size-base);
-  width: 48px;
-  height: 36px;
-  text-align: center;
-  border: 1px solid var(--nymbal-color-border);
-  border-left: none;
-  border-right: none;
-  -moz-appearance: textfield;
-}
-nymbal-quantity-selector input::-webkit-outer-spin-button,
-nymbal-quantity-selector input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-`;
-function wholeQuantity(raw, min, max) {
-  const n = raw === null || raw.trim() === "" ? Number.NaN : Number(raw);
-  if (Number.isNaN(n)) return min;
-  return Math.min(max, Math.max(min, Math.trunc(n)));
-}
-var NymbalQuantitySelector = class extends NymbalElement {
-  static get observedAttributes() {
-    return ["value", "min", "max"];
-  }
-  _value = 1;
-  setup() {
-    injectStyles("nymbal-quantity-selector", STYLES5);
-    this._value = wholeQuantity(this.getAttribute("value"), ...this.bounds());
-  }
-  bounds() {
-    return [Number(this.getAttribute("min")) || 1, Number(this.getAttribute("max")) || 99];
-  }
-  render() {
-    const [min, max] = this.bounds();
-    this.innerHTML = `
-      <button data-testid="qty-decrement" aria-label="Decrease quantity" ${this._value <= min ? "disabled" : ""}>&#8722;</button>
-      <input data-testid="qty-input" type="number" value="${this._value}" min="${min}" max="${max}" aria-label="Quantity">
-      <button data-testid="qty-increment" aria-label="Increase quantity" ${this._value >= max ? "disabled" : ""}>&#43;</button>
-    `;
-    this.querySelector('[data-testid="qty-decrement"]')?.addEventListener("click", () => {
-      if (this._value > min) {
-        this._value--;
-        this.emitChange();
-        this.render();
-      }
-    });
-    this.querySelector('[data-testid="qty-increment"]')?.addEventListener("click", () => {
-      if (this._value < max) {
-        this._value++;
-        this.emitChange();
-        this.render();
-      }
-    });
-    const input = this.querySelector("input");
-    input?.addEventListener("change", () => {
-      this._value = wholeQuantity(input.value, min, max);
-      this.emitChange();
-      this.render();
-    });
-  }
-  attributeChangedCallback(name) {
-    if (name === "value") {
-      this._value = wholeQuantity(this.getAttribute("value"), ...this.bounds());
-    }
-    if (this.isConnected) this.requestRender();
-  }
-  emitChange() {
-    this.dispatchEvent(
-      new CustomEvent("nymbal:quantity:changed", {
-        bubbles: true,
-        composed: true,
-        detail: { value: this._value }
-      })
-    );
-  }
-};
-
-// src/components/search-bar.ts
-var STYLES6 = `
-nymbal-search-bar {
-  display: block;
-  position: relative;
-  font-family: var(--nymbal-font-family);
-}
-nymbal-search-bar input {
-  font-family: var(--nymbal-font-family);
-  font-size: var(--nymbal-font-size-base);
-  width: 100%;
-  padding: var(--nymbal-spacing-sm) var(--nymbal-spacing-md);
-  border: 1px solid var(--nymbal-color-border);
-  border-radius: var(--nymbal-radius-md);
-  outline: none;
-  transition: border-color var(--nymbal-transition-fast);
-  box-sizing: border-box;
-}
-nymbal-search-bar input:focus {
-  border-color: var(--nymbal-color-accent);
-}
-nymbal-search-bar .nymbal-search-results {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: var(--nymbal-color-surface);
-  border: 1px solid var(--nymbal-color-border);
-  border-top: none;
-  border-radius: 0 0 var(--nymbal-radius-md) var(--nymbal-radius-md);
-  box-shadow: var(--nymbal-shadow-md);
-  z-index: var(--nymbal-z-dropdown);
-  max-height: 300px;
-  overflow-y: auto;
-}
-nymbal-search-bar .nymbal-search-result-item {
-  padding: var(--nymbal-spacing-sm) var(--nymbal-spacing-md);
-  cursor: pointer;
-  transition: background var(--nymbal-transition-fast);
-}
-nymbal-search-bar .nymbal-search-result-item:hover,
-nymbal-search-bar .nymbal-search-result-item[aria-selected="true"] {
-  background: var(--nymbal-color-secondary, #f4f4f5);
-}
-nymbal-search-bar .nymbal-search-result-name {
-  font-weight: var(--nymbal-font-weight-medium);
-}
-nymbal-search-bar .nymbal-search-result-price {
-  font-size: var(--nymbal-font-size-sm);
-  color: var(--nymbal-color-text-muted);
-}
-nymbal-search-bar .nymbal-search-loading {
-  padding: var(--nymbal-spacing-md);
-  text-align: center;
-  color: var(--nymbal-color-text-muted);
-  font-size: var(--nymbal-font-size-sm);
-}
-`;
-var NymbalSearchBar = class extends NymbalElement {
-  static get observedAttributes() {
-    return ["placeholder", "debounce-ms"];
-  }
-  debounceTimer = null;
-  selectedIndex = -1;
-  setup() {
-    injectStyles("nymbal-search-bar", STYLES6);
-    this.subscribeToStore(this.client.search);
-  }
-  render() {
-    const state = this.client.search.getState();
-    const placeholder = this.getAttribute("placeholder") ?? "Search products...";
-    let resultsHtml = "";
-    if (state.query) {
-      if (state.loading) {
-        resultsHtml = `<div class="nymbal-search-results" data-testid="search-results"><div class="nymbal-search-loading">Searching...</div></div>`;
-      } else if (state.results.length > 0) {
-        resultsHtml = `<div class="nymbal-search-results" data-testid="search-results">
-          ${state.results.map(
-          (product, i) => `
-            <div class="nymbal-search-result-item" data-testid="search-result-${this.esc(product.slug)}" data-slug="${this.esc(product.slug)}" aria-selected="${i === this.selectedIndex}">
-              <div class="nymbal-search-result-name">${this.esc(product.name)}</div>
-              ${product.priceMinor !== null ? `<div class="nymbal-search-result-price">${this.formatPrice(product.priceMinor, product.currency ?? "USD")}</div>` : ""}
-            </div>
-          `
-        ).join("")}
-        </div>`;
-      }
-    }
-    this.innerHTML = `
-      <input data-testid="search-input" type="search" placeholder="${this.esc(placeholder)}" value="${this.esc(state.query)}" autocomplete="off" role="combobox" aria-expanded="${state.results.length > 0}" aria-haspopup="listbox">
-      ${resultsHtml}
-    `;
-    this.querySelectorAll(".nymbal-search-result-item").forEach((item, i) => {
-      item.addEventListener("click", () => {
-        const product = state.results[i];
-        if (product) this.select(product);
-      });
-    });
-    const input = this.querySelector("input");
-    input.addEventListener("input", () => {
-      const query = input.value;
-      const debounceMs = Number(this.getAttribute("debounce-ms")) || 300;
-      if (this.debounceTimer !== null) clearTimeout(this.debounceTimer);
-      this.debounceTimer = setTimeout(() => {
-        this.selectedIndex = -1;
-        if (query.trim()) {
-          this.client.search.search(query);
-        } else {
-          this.client.search.clearSearch();
-        }
-      }, debounceMs);
-    });
-    input.addEventListener("keydown", (e) => {
-      const results = state.results;
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        this.selectedIndex = Math.min(this.selectedIndex + 1, results.length - 1);
-        this.render();
-      } else if (e.key === "ArrowUp") {
-        e.preventDefault();
-        this.selectedIndex = Math.max(this.selectedIndex - 1, -1);
-        this.render();
-      } else if (e.key === "Enter") {
-        e.preventDefault();
-        const selected = this.selectedIndex >= 0 ? results[this.selectedIndex] : void 0;
-        if (selected) {
-          this.select(selected);
-        } else {
-          const query = input.value.trim();
-          if (query) {
-            window.location.href = `/search?q=${encodeURIComponent(query)}`;
-          }
-        }
-      } else if (e.key === "Escape") {
-        this.client.search.clearSearch();
-        this.selectedIndex = -1;
-      }
-    });
-  }
-  select(product) {
-    this.dispatchEvent(
-      new CustomEvent("nymbal:search:selected", {
-        bubbles: true,
-        composed: true,
-        detail: { product, query: product.name }
-      })
-    );
-    this.client.search.clearSearch();
-  }
-  attributeChangedCallback() {
-    if (this.isConnected) this.requestRender();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.debounceTimer !== null) {
-      clearTimeout(this.debounceTimer);
-      this.debounceTimer = null;
-    }
-  }
-  /** Escapes a value for both text and quoted-attribute contexts. */
-  esc(str) {
-    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-  }
-  formatPrice(minor, currency) {
-    return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(minor / 100);
-  }
-};
-
-// src/components/product-filter.ts
-var STYLES7 = `
-nymbal-product-filter {
-  display: block;
-  font-family: var(--nymbal-font-family);
-}
-nymbal-product-filter .nymbal-filter-group {
-  margin-bottom: var(--nymbal-spacing-lg);
-}
-nymbal-product-filter .nymbal-filter-label {
-  display: block;
-  font-size: var(--nymbal-font-size-sm);
-  font-weight: var(--nymbal-font-weight-bold);
-  margin-bottom: var(--nymbal-spacing-sm);
-  color: var(--nymbal-color-text);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-nymbal-product-filter .nymbal-filter-option {
-  display: flex;
-  align-items: center;
-  gap: var(--nymbal-spacing-sm);
-  padding: var(--nymbal-spacing-xs) 0;
-  cursor: pointer;
-  font-size: var(--nymbal-font-size-sm);
-  color: var(--nymbal-color-text);
-}
-nymbal-product-filter .nymbal-filter-option input[type="checkbox"] {
-  accent-color: var(--nymbal-color-primary);
-}
-nymbal-product-filter .nymbal-filter-count {
-  color: var(--nymbal-color-text-muted);
-  font-size: var(--nymbal-font-size-xs);
-}
-`;
-var NymbalProductFilter = class extends NymbalElement {
-  static get observedAttributes() {
-    return ["facets", "source"];
-  }
-  setup() {
-    injectStyles("nymbal-product-filter", STYLES7);
-    this.subscribeToStore(this.client.productList);
-    this.subscribeToStore(this.client.search);
-  }
-  render() {
-    if (this.isSearch()) {
-      this.renderSearch();
-      return;
-    }
-    const state = this.client.productList.getState();
-    const facets = this.getFacets();
-    if (facets.length === 0) {
-      this.innerHTML = "";
-      return;
-    }
-    this.innerHTML = facets.map((facet) => {
-      const activeFilter = state.filters[facet.field];
-      const activeValues = Array.isArray(activeFilter) ? activeFilter : activeFilter ? [activeFilter] : [];
-      return `
-        <div class="nymbal-filter-group" data-testid="filter-group-${facet.field}">
-          <span class="nymbal-filter-label">${this.esc(facet.label)}</span>
-          ${facet.values.map((v) => {
-        const checked = activeValues.includes(v.value);
-        return `
-              <label class="nymbal-filter-option" data-testid="filter-option-${v.value}">
-                <input type="checkbox" data-filter-name="${facet.field}" data-filter-value="${v.value}" ${checked ? "checked" : ""}>
-                <span>${this.esc(v.label ?? v.value)}</span>
-                ${v.count !== void 0 ? `<span class="nymbal-filter-count">(${v.count})</span>` : ""}
-              </label>
-            `;
-      }).join("")}
-        </div>
-      `;
-    }).join("");
-    this.querySelectorAll('input[type="checkbox"]').forEach((input) => {
-      input.addEventListener("change", () => {
-        const el = input;
-        const name = el.dataset["filterName"];
-        const value = el.dataset["filterValue"];
-        if (el.checked) {
-          const current = state.filters[name];
-          const values = Array.isArray(current) ? [...current, value] : current ? [current, value] : value;
-          this.client.productList.applyFilter(name, values);
-        } else {
-          const current = state.filters[name];
-          if (Array.isArray(current)) {
-            const remaining = current.filter((v) => v !== value);
-            if (remaining.length > 0) {
-              this.client.productList.applyFilter(name, remaining);
-            } else {
-              this.client.productList.removeFilter(name);
-            }
-          } else {
-            this.client.productList.removeFilter(name);
-          }
-        }
-        this.dispatchEvent(
-          new CustomEvent("nymbal:filter:changed", { bubbles: true, composed: true, detail: { name, value } })
-        );
-      });
-    });
-  }
-  renderSearch() {
-    const { facets, category } = this.client.search.getState();
-    const shown = facets.filter((f) => f.field === "category");
-    this.innerHTML = shown.map(
-      (facet) => `
-        <div class="nymbal-filter-group" data-testid="filter-group-${this.esc(facet.field)}">
-          <span class="nymbal-filter-label">${this.esc(facet.label)}</span>
-          ${facet.values.map(
-        (v) => `
-              <label class="nymbal-filter-option" data-testid="filter-option-${this.esc(v.value)}">
-                <input type="checkbox" data-filter-value="${this.esc(v.value)}" ${v.value === category ? "checked" : ""}>
-                <span>${this.esc(v.label ?? v.value)}</span>
-                ${v.count !== void 0 ? `<span class="nymbal-filter-count">(${v.count})</span>` : ""}
-              </label>
-            `
-      ).join("")}
-        </div>
-      `
-    ).join("");
-    this.querySelectorAll('input[type="checkbox"]').forEach((input) => {
-      input.addEventListener("change", () => {
-        const value = input.dataset["filterValue"];
-        void this.client.search.setCategory(input.checked ? value : null);
-        this.dispatchEvent(
-          new CustomEvent("nymbal:filter:changed", {
-            bubbles: true,
-            composed: true,
-            detail: { name: "category", value: input.checked ? value : "" }
-          })
-        );
-      });
-    });
-  }
-  isSearch() {
-    return this.getAttribute("source") === "search";
-  }
-  attributeChangedCallback() {
-    if (this.isConnected) this.requestRender();
-  }
-  getFacets() {
-    const attr = this.getAttribute("facets");
-    if (!attr) return [];
-    try {
-      return JSON.parse(attr);
-    } catch (err) {
-      console.error("[nymbal-product-filter] failed to parse facets attribute", err);
-      return [];
-    }
-  }
-  esc(str) {
-    const div = document.createElement("div");
-    div.textContent = str;
-    return div.innerHTML;
-  }
-};
-
-// src/components/toast.ts
-var STYLES8 = `
-nymbal-toast {
-  position: fixed;
-  z-index: var(--nymbal-z-toast);
-  display: flex;
-  flex-direction: column;
-  gap: var(--nymbal-spacing-sm);
-  pointer-events: none;
-  font-family: var(--nymbal-font-family);
-}
-nymbal-toast[position="top-right"],
-nymbal-toast:not([position]) {
-  top: var(--nymbal-spacing-lg);
-  right: var(--nymbal-spacing-lg);
-}
-nymbal-toast[position="top-left"] {
-  top: var(--nymbal-spacing-lg);
-  left: var(--nymbal-spacing-lg);
-}
-nymbal-toast[position="bottom-right"] {
-  bottom: var(--nymbal-spacing-lg);
-  right: var(--nymbal-spacing-lg);
-}
-nymbal-toast[position="bottom-left"] {
-  bottom: var(--nymbal-spacing-lg);
-  left: var(--nymbal-spacing-lg);
-}
-nymbal-toast .nymbal-toast-item {
-  pointer-events: auto;
-  display: flex;
-  align-items: center;
-  gap: var(--nymbal-spacing-sm);
-  padding: var(--nymbal-spacing-sm) var(--nymbal-spacing-md);
-  border-radius: var(--nymbal-radius-md);
-  box-shadow: var(--nymbal-shadow-lg);
-  font-size: var(--nymbal-font-size-sm);
-  background: var(--nymbal-color-surface);
-  color: var(--nymbal-color-text);
-  border: 1px solid var(--nymbal-color-border);
-  animation: nymbal-toast-in var(--nymbal-transition-normal) forwards;
-  max-width: 360px;
-}
-nymbal-toast .nymbal-toast-item[data-type="success"] {
-  border-left: 3px solid var(--nymbal-color-success);
-}
-nymbal-toast .nymbal-toast-item[data-type="error"] {
-  border-left: 3px solid var(--nymbal-color-error);
-}
-nymbal-toast .nymbal-toast-item[data-type="warning"] {
-  border-left: 3px solid var(--nymbal-color-warning);
-}
-nymbal-toast .nymbal-toast-item[data-type="info"] {
-  border-left: 3px solid var(--nymbal-color-accent);
-}
-nymbal-toast .nymbal-toast-close {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--nymbal-color-text-muted);
-  font-size: var(--nymbal-font-size-base);
-  padding: 0;
-  margin-left: auto;
-}
-@keyframes nymbal-toast-in {
-  from { opacity: 0; transform: translateY(-8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-`;
-var HTMLElementBase2 = typeof HTMLElement !== "undefined" ? HTMLElement : class {
-};
-var NymbalToast = class extends HTMLElementBase2 {
-  static get observedAttributes() {
-    return ["position", "duration-ms"];
-  }
-  connectedCallback() {
-    injectStyles("nymbal-toast", STYLES8);
-    this.setAttribute("data-testid", "toast");
-  }
-  show(message, type = "info") {
-    const durationMs = Number(this.getAttribute("duration-ms")) || 4e3;
-    const item = document.createElement("div");
-    item.className = "nymbal-toast-item";
-    item.setAttribute("data-type", type);
-    item.setAttribute("role", "alert");
-    const text = document.createElement("span");
-    text.textContent = message;
-    const close = document.createElement("button");
-    close.className = "nymbal-toast-close";
-    close.setAttribute("aria-label", "Dismiss");
-    close.textContent = "\xD7";
-    close.addEventListener("click", () => this.dismiss(item));
-    item.appendChild(text);
-    item.appendChild(close);
-    this.appendChild(item);
-    setTimeout(() => this.dismiss(item), durationMs);
-  }
-  dismiss(item) {
-    if (item.parentNode === this) {
-      this.removeChild(item);
-    }
-  }
-  static showGlobal(message, type = "info") {
-    let toastEl = document.querySelector("nymbal-toast");
-    if (!toastEl) {
-      toastEl = document.createElement("nymbal-toast");
-      document.body.appendChild(toastEl);
-    }
-    toastEl.show(message, type);
-  }
-};
-
-// src/components/payment-element.ts
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
 import {
-  getPaymentDriver
-} from "@nymbalhq/sdk";
-var STYLES9 = `
-nymbal-payment-element {
-  display: block;
-  font-family: var(--nymbal-font-family);
-}
-nymbal-payment-element .nymbal-payment-note {
-  margin: 0;
-  font-size: var(--nymbal-font-size-sm, 0.875rem);
-  color: var(--nymbal-color-text-muted, #71717a);
-}
-nymbal-payment-element .nymbal-payment-card {
-  padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);
-  border: 1px solid var(--nymbal-color-border, #e4e4e7);
-  border-radius: var(--nymbal-radius-md, 0.5rem);
-  background: var(--nymbal-color-surface, #fff);
-  min-height: 40px;
-}
-nymbal-payment-element .nymbal-payment-error {
-  margin: 0;
-  font-size: var(--nymbal-font-size-sm, 0.875rem);
-  color: var(--nymbal-color-error, #dc2626);
-}
-`;
-var NO_PAYMENT_STEP = { ok: true, confirmed: false };
-function parseClient(value) {
-  if (value === null || value === "" || value === "null") return null;
-  try {
-    const parsed = JSON.parse(value);
-    if (parsed === null) return null;
-    if (typeof parsed.driver !== "string" || typeof parsed.options !== "object") return void 0;
-    return { driver: parsed.driver, options: { ...parsed.options ?? {} } };
-  } catch {
-    return void 0;
-  }
-}
-var NymbalPaymentElement = class extends HTMLElementBase {
-  static get observedAttributes() {
-    return ["client"];
-  }
-  _status = "pending";
-  _error = "";
-  _driver = null;
-  _mounted = Promise.resolve(true);
-  _rendered = void 0;
-  _generation = 0;
-  get status() {
-    return this._status;
-  }
-  connectedCallback() {
-    injectStyles("nymbal-payment-element", STYLES9);
-    this.render();
-  }
-  attributeChangedCallback() {
-    if (this.isConnected) this.render();
-  }
-  /**
-   * Completes a payment the API left `requires_action`, once the driver has mounted, handing the driver the
-   * checkout's `context`; the driver's answer as is.
-   */
-  async confirm(clientSecret, context) {
-    const driver = this._driver;
-    if (this._status === "error") return { ok: false, error: this._error };
-    if (driver === null) return NO_PAYMENT_STEP;
-    if (!await this._mounted) return { ok: false, error: this._error };
-    return driver.confirm(clientSecret, context);
-  }
-  render() {
-    const attribute = this.getAttribute("client");
-    if (attribute === this._rendered) return;
-    this._rendered = attribute;
-    const generation = ++this._generation;
-    this._driver = null;
-    this._mounted = Promise.resolve(true);
-    this.replaceChildren();
-    const client = parseClient(attribute);
-    if (client === void 0)
-      return this.fail("The store sent a payment client this page cannot read.");
-    if (client === null) return this.setStatus("ready");
-    const driver = getPaymentDriver(client.driver);
-    if (driver === void 0) {
-      return this.fail(`Payment method "${client.driver}" is not available on this storefront.`);
-    }
-    this._driver = driver;
-    this.setStatus("pending");
-    this._mounted = Promise.resolve().then(() => driver.mount(this, client.options)).then(
-      () => {
-        if (generation === this._generation) this.setStatus("ready");
-        return true;
-      },
-      (err) => {
-        if (generation === this._generation) {
-          this.fail(err instanceof Error ? err.message : "The payment form could not be loaded.");
-        }
-        return false;
-      }
-    );
-  }
-  fail(message) {
-    this._error = message;
-    const p = document.createElement("p");
-    p.className = "nymbal-payment-error";
-    p.setAttribute("data-testid", "payment-element-error");
-    p.setAttribute("role", "alert");
-    p.textContent = message;
-    this.replaceChildren(p);
-    this.setStatus("error");
-  }
-  setStatus(status) {
-    if (status === this._status) return;
-    this._status = status;
-    this.dispatchEvent(
-      new CustomEvent("nymbal:payment:status", {
-        bubbles: true,
-        composed: true,
-        detail: { status }
-      })
-    );
-  }
-};
-
-// src/components/sort-dropdown.ts
-import { DEFAULT_PRODUCT_SORT, PRODUCT_SORT_LABELS } from "@nymbalhq/types";
-function parseKeys(value) {
-  if (!value) return [];
-  try {
-    const parsed = JSON.parse(value);
-    return Array.isArray(parsed) ? parsed.filter((k) => typeof k === "string") : [];
-  } catch (err) {
-    console.error("[nymbal-sort-dropdown] failed to parse sort-keys attribute", err);
-    return [];
-  }
-}
-var NymbalSortDropdown = class extends HTMLElementBase {
-  static get observedAttributes() {
-    return ["sort-keys", "value", "default-sort"];
-  }
-  _select = null;
-  /** The key the dropdown shows. */
-  get value() {
-    return this._select?.value ?? "";
-  }
-  connectedCallback() {
-    this.render();
-  }
-  attributeChangedCallback() {
-    if (this.isConnected) this.render();
-  }
-  selectElement() {
-    if (this._select !== null && this.contains(this._select)) return this._select;
-    let select = this.querySelector("select");
-    if (select === null) {
-      select = document.createElement("select");
-      select.setAttribute("aria-label", "Sort products");
-      this.appendChild(select);
-    }
-    if (!select.hasAttribute("data-testid")) select.setAttribute("data-testid", "sort-dropdown");
-    select.addEventListener("change", () => {
-      this.dispatchEvent(
-        new CustomEvent("nymbal:sort:changed", {
-          bubbles: true,
-          composed: true,
-          detail: { sort: select.value }
-        })
-      );
-    });
-    this._select = select;
-    return select;
-  }
-  render() {
-    const keys = parseKeys(this.getAttribute("sort-keys"));
-    const wanted = this.getAttribute("value") ?? "";
-    const fallback = this.getAttribute("default-sort") ?? DEFAULT_PRODUCT_SORT;
-    const selected = keys.includes(wanted) ? wanted : keys.includes(fallback) ? fallback : keys[0];
-    const select = this.selectElement();
-    select.replaceChildren(
-      ...keys.map((key) => {
-        const option = document.createElement("option");
-        option.value = key;
-        option.textContent = PRODUCT_SORT_LABELS[key] ?? key;
-        return option;
-      })
-    );
-    if (selected !== void 0) select.value = selected;
-  }
-};
-
-// src/index.ts
-import { getPaymentDriver as getPaymentDriver2, registerPaymentDriver } from "@nymbalhq/sdk";
-
-// src/payment-drivers/test-mode.ts
-var testModeDriver = {
-  mount(el) {
-    el.innerHTML = '<p class="nymbal-payment-note">Test mode \u2014 payment skipped</p>';
-  },
-  confirm() {
-    return Promise.resolve({ ok: true, confirmed: false });
-  }
-};
-
-// src/payment-drivers/stripe.ts
-var STRIPE_JS = "https://js.stripe.com/v3/";
-function billingDetails(context) {
-  const details = {};
-  if (context?.email) details.email = context.email;
-  const billing = context?.billing;
-  if (billing) {
-    const name = `${billing.firstName} ${billing.lastName}`.trim();
-    if (name) details.name = name;
-    details.address = {
-      line1: billing.addressLine1,
-      ...billing.addressLine2 ? { line2: billing.addressLine2 } : {},
-      city: billing.city,
-      state: billing.region,
-      postal_code: billing.postalCode,
-      country: billing.country
-    };
-  }
-  return Object.keys(details).length > 0 ? details : void 0;
-}
-var loading = null;
-function loadStripeJs() {
-  const win = window;
-  if (win.Stripe) return Promise.resolve(win.Stripe);
-  loading ??= new Promise((resolve, reject) => {
-    const script = document.createElement("script");
-    script.src = STRIPE_JS;
-    script.async = true;
-    script.addEventListener("load", () => {
-      if (win.Stripe) resolve(win.Stripe);
-      else reject(new Error("Stripe.js loaded but window.Stripe is missing."));
-    });
-    script.addEventListener("error", () => {
-      loading = null;
-      script.remove();
-      reject(new Error("Stripe.js could not be loaded."));
-    });
-    document.head.appendChild(script);
-  });
-  return loading;
-}
-var instances = /* @__PURE__ */ new Map();
-var mounted = [];
-var stripeDriver = {
-  async mount(el, options) {
-    const key = options["publishableKey"];
-    if (!key)
-      throw new Error("Card payments are not configured: the store has no Stripe publishable key.");
-    const factory = await loadStripeJs();
-    let stripe = instances.get(key);
-    if (stripe === void 0) {
-      stripe = factory(key);
-      instances.set(key, stripe);
-    }
-    const target = document.createElement("div");
-    target.className = "nymbal-payment-card";
-    el.replaceChildren(target);
-    const card = stripe.elements().create("card", {
-      style: {
-        base: { fontSize: "16px", color: "#1a1a1a", "::placeholder": { color: "#9ca3af" } }
-      }
-    });
-    card.mount(target);
-    mounted = [
-      ...mounted.filter((m) => m.host.isConnected && m.host !== el),
-      { host: el, stripe, card }
-    ];
-  },
-  async confirm(clientSecret, context) {
-    const current = mounted.findLast((m) => m.host.isConnected) ?? mounted.at(-1);
-    if (current === void 0) return { ok: false, error: "The card form is not ready." };
-    const billing_details = billingDetails(context);
-    const result = await current.stripe.confirmCardPayment(clientSecret, {
-      payment_method: { card: current.card, ...billing_details ? { billing_details } : {} }
-    });
-    if (result.error) return { ok: false, error: result.error.message ?? "Payment failed." };
-    return { ok: true, confirmed: result.paymentIntent?.status === "succeeded" };
-  }
-};
-
-// src/index.ts
-function registerComponents() {
-  const components = [
-    ["nymbal-add-to-cart", NymbalAddToCart],
-    ["nymbal-cart-drawer", NymbalCartDrawer],
-    ["nymbal-mini-cart", NymbalMiniCart],
-    ["nymbal-variant-selector", NymbalVariantSelector],
-    ["nymbal-quantity-selector", NymbalQuantitySelector],
-    ["nymbal-search-bar", NymbalSearchBar],
-    ["nymbal-product-filter", NymbalProductFilter],
-    ["nymbal-toast", NymbalToast],
-    ["nymbal-payment-element", NymbalPaymentElement],
-    ["nymbal-sort-dropdown", NymbalSortDropdown]
-  ];
-  const drivers = [
-    ["test-mode", testModeDriver],
-    ["stripe", stripeDriver]
-  ];
-  for (const [name, driver] of drivers) {
-    if (getPaymentDriver2(name) === void 0) registerPaymentDriver(name, driver);
-  }
-  for (const [name, ctor] of components) {
-    if (!customElements.get(name)) {
-      customElements.define(name, ctor);
-    }
-  }
-}
+  registerComponents
+} from "./chunk-XPFGMYBV.js";
+import {
+  NymbalVariantSelector
+} from "./chunk-H3ZBYNHV.js";
+import {
+  NymbalReviewList
+} from "./chunk-7JAAOVCE.js";
+import {
+  NymbalSearchBar
+} from "./chunk-4COVK727.js";
+import {
+  NymbalSearchResults
+} from "./chunk-RAOGZH3Z.js";
+import {
+  NymbalSiteFooter
+} from "./chunk-FIF6GQ6U.js";
+import {
+  NymbalSiteHeader
+} from "./chunk-W23P7SI4.js";
+import {
+  NymbalSortDropdown
+} from "./chunk-EBMA7JGV.js";
+import {
+  NymbalStockBadge
+} from "./chunk-O2YKCDR2.js";
+import {
+  NymbalToast
+} from "./chunk-2TPQNQYO.js";
+import {
+  NymbalProductFilter
+} from "./chunk-WEEHXWM3.js";
+import {
+  NymbalProductGrid
+} from "./chunk-5VWZ2U5K.js";
+import {
+  NymbalProductCard
+} from "./chunk-RZVFA3N5.js";
+import {
+  NymbalProductPrice
+} from "./chunk-DXWMNB5F.js";
+import "./chunk-UYSZOEOA.js";
+import {
+  NymbalProfileForm
+} from "./chunk-WTEVTCIL.js";
+import {
+  NymbalRegisterForm
+} from "./chunk-NW47OJVN.js";
+import {
+  NymbalReviewForm
+} from "./chunk-NE6UHTOT.js";
+import {
+  NymbalCartPage
+} from "./chunk-VTQVGNVC.js";
+import {
+  NymbalQuantitySelector
+} from "./chunk-HPBC3OG7.js";
+import {
+  NymbalCategoryNav
+} from "./chunk-IYT7VXFS.js";
+import {
+  NymbalCheckout
+} from "./chunk-5G3C53A2.js";
+import {
+  NymbalImageGallery
+} from "./chunk-U2PU4CWB.js";
+import {
+  NymbalLoginForm
+} from "./chunk-42SSME5H.js";
+import {
+  NymbalMiniCart
+} from "./chunk-2XXBQPDB.js";
+import {
+  NymbalOrderSummary
+} from "./chunk-SM7TASEW.js";
+import "./chunk-RVSKX2RX.js";
+import {
+  NymbalPaymentElement
+} from "./chunk-W7D3STJH.js";
+import {
+  NymbalAddToCart
+} from "./chunk-LHYXNQWY.js";
+import {
+  NymbalAddressBook
+} from "./chunk-B73QVSA5.js";
+import {
+  NymbalAddressForm
+} from "./chunk-V55K2CS5.js";
+import "./chunk-PN6QKYE4.js";
+import "./chunk-GHXTJ2CF.js";
+import {
+  NymbalBreadcrumb
+} from "./chunk-N4Y5DI4X.js";
+import "./chunk-LO2EW5YP.js";
+import {
+  NymbalCartDrawer
+} from "./chunk-LSQPUZK6.js";
+import "./chunk-DR5QB5VN.js";
+import {
+  NymbalElement,
+  define,
+  getClient,
+  registerClient
+} from "./chunk-EYDMJNNK.js";
+import "./chunk-UCEVCLQ7.js";
 export {
   NymbalAddToCart,
+  NymbalAddressBook,
+  NymbalAddressForm,
+  NymbalBreadcrumb,
   NymbalCartDrawer,
+  NymbalCartPage,
+  NymbalCategoryNav,
+  NymbalCheckout,
   NymbalElement,
+  NymbalImageGallery,
+  NymbalLoginForm,
   NymbalMiniCart,
+  NymbalOrderSummary,
   NymbalPaymentElement,
+  NymbalProductCard,
   NymbalProductFilter,
+  NymbalProductGrid,
+  NymbalProductPrice,
+  NymbalProfileForm,
   NymbalQuantitySelector,
+  NymbalRegisterForm,
+  NymbalReviewForm,
+  NymbalReviewList,
   NymbalSearchBar,
+  NymbalSearchResults,
+  NymbalSiteFooter,
+  NymbalSiteHeader,
   NymbalSortDropdown,
+  NymbalStockBadge,
   NymbalToast,
   NymbalVariantSelector,
+  define,
   getClient,
-  injectStyles,
   registerClient,
   registerComponents
 };