@nymbalhq/web-components 1.1.0 → 1.3.0

package/dist/chunk-LHYXNQWY.js

@@ -0,0 +1,105 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalElement,
+  baseStyles,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/add-to-cart.ts
+import { css, html } from "lit";
+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 SCHEMA = {
+  tag: "nymbal-add-to-cart",
+  reactName: "AddToCart",
+  attributes: [
+    { name: "variant-id", prop: "variantId", type: "string" },
+    { name: "qty", prop: "qty", type: "number" },
+    { name: "disabled", prop: "disabled", type: "boolean" }
+  ],
+  events: [
+    {
+      name: "nymbal:cart:item-added",
+      prop: "onItemAdded",
+      detail: "{ variantId: string; qty: number }"
+    }
+  ],
+  parts: ["button"],
+  slots: ["label", "loading-label"],
+  children: true
+};
+var NymbalAddToCart = class extends NymbalElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    css`
+      :host {
+        display: inline-block;
+      }
+      [part~='button'] {
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+        font-size: var(--nymbal-font-size-base, 1rem);
+        font-weight: var(--nymbal-font-weight-medium, 500);
+        background: var(--nymbal-color-primary, #18181b);
+        color: var(--nymbal-color-text-inverse, #ffffff);
+        border: none;
+        border-radius: var(--nymbal-radius-md, 0.375rem);
+        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-lg, 1.5rem);
+        cursor: pointer;
+        transition: background var(--nymbal-transition-fast, 150ms ease);
+        min-width: 140px;
+      }
+      [part~='button']:hover:not(:disabled) {
+        background: var(--nymbal-color-primary-hover, #27272a);
+      }
+      [part~='button']:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    `
+  ];
+  stores() {
+    return [this.client.cart];
+  }
+  render() {
+    const variantId = this.getAttribute("variant-id");
+    const loading = this.readsStores && this.client.cart.getState().loading;
+    return html`<button
+      type="button"
+      part="button"
+      data-testid="add-to-cart"
+      ?disabled=${this.hasAttribute("disabled") || loading || !variantId}
+      aria-busy=${String(loading)}
+      @click=${this.handleClick}
+    >
+      ${loading ? html`<slot name="loading-label">Adding...</slot>` : html`<slot name="label">Add to Cart</slot>`}
+    </button>`;
+  }
+  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 {
+    }
+  };
+};
+
+export {
+  NymbalAddToCart
+};
+//# sourceMappingURL=chunk-LHYXNQWY.js.map

package/dist/chunk-LHYXNQWY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/add-to-cart.ts"],"sourcesContent":["import { css, html } from 'lit'\nimport { baseStyles, NymbalElement, propertiesOf, type ElementSchema } from '../base-element.js'\n\nconst MIN_QTY = 1\nconst MAX_QTY = 99\n\n/** The `qty` attribute as a whole number of units: a non-integer is 1, and the result is clamped to 1-99. */\nfunction quantityOf(attr: string | null): number {\n  const n = attr === null || attr.trim() === '' ? Number.NaN : Number(attr)\n  const whole = Number.isInteger(n) ? n : MIN_QTY\n  return Math.min(MAX_QTY, Math.max(MIN_QTY, whole))\n}\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-add-to-cart',\n  reactName: 'AddToCart',\n  attributes: [\n    { name: 'variant-id', prop: 'variantId', type: 'string' },\n    { name: 'qty', prop: 'qty', type: 'number' },\n    { name: 'disabled', prop: 'disabled', type: 'boolean' },\n  ],\n  events: [\n    {\n      name: 'nymbal:cart:item-added',\n      prop: 'onItemAdded',\n      detail: '{ variantId: string; qty: number }',\n    },\n  ],\n  parts: ['button'],\n  slots: ['label', 'loading-label'],\n  children: true,\n}\n\nexport class NymbalAddToCart extends NymbalElement {\n  static override schema = SCHEMA\n  static override properties = propertiesOf(SCHEMA)\n\n  static override styles = [\n    baseStyles,\n    css`\n      :host {\n        display: inline-block;\n      }\n      [part~='button'] {\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n        font-size: var(--nymbal-font-size-base, 1rem);\n        font-weight: var(--nymbal-font-weight-medium, 500);\n        background: var(--nymbal-color-primary, #18181b);\n        color: var(--nymbal-color-text-inverse, #ffffff);\n        border: none;\n        border-radius: var(--nymbal-radius-md, 0.375rem);\n        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-lg, 1.5rem);\n        cursor: pointer;\n        transition: background var(--nymbal-transition-fast, 150ms ease);\n        min-width: 140px;\n      }\n      [part~='button']:hover:not(:disabled) {\n        background: var(--nymbal-color-primary-hover, #27272a);\n      }\n      [part~='button']:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n    `,\n  ]\n\n  protected override stores() {\n    return [this.client.cart]\n  }\n\n  protected override render() {\n    const variantId = this.getAttribute('variant-id')\n    // Until it reads the cart store (a server render, and the first render taking that over) the cart is not adding.\n    const loading = this.readsStores && this.client.cart.getState().loading\n    return html`<button\n      type=\"button\"\n      part=\"button\"\n      data-testid=\"add-to-cart\"\n      ?disabled=${this.hasAttribute('disabled') || loading || !variantId}\n      aria-busy=${String(loading)}\n      @click=${this.handleClick}\n    >\n      ${loading\n        ? html`<slot name=\"loading-label\">Adding...</slot>`\n        : html`<slot name=\"label\">Add to Cart</slot>`}\n    </button>`\n  }\n\n  private handleClick = async (): Promise<void> => {\n    const variantId = this.getAttribute('variant-id')\n    if (!variantId) return\n    const qty = quantityOf(this.getAttribute('qty'))\n    try {\n      await this.client.cart.addItem(variantId, qty)\n      this.dispatchEvent(\n        new CustomEvent('nymbal:cart:item-added', {\n          bubbles: true,\n          composed: true,\n          detail: { variantId, qty },\n        }),\n      )\n    } catch {\n      // error is stored in cart state\n    }\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,KAAK,YAAY;AAG1B,IAAM,UAAU;AAChB,IAAM,UAAU;AAGhB,SAAS,WAAW,MAA6B;AAC/C,QAAM,IAAI,SAAS,QAAQ,KAAK,KAAK,MAAM,KAAK,OAAO,MAAM,OAAO,IAAI;AACxE,QAAM,QAAQ,OAAO,UAAU,CAAC,IAAI,IAAI;AACxC,SAAO,KAAK,IAAI,SAAS,KAAK,IAAI,SAAS,KAAK,CAAC;AACnD;AAEA,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA,EACX,YAAY;AAAA,IACV,EAAE,MAAM,cAAc,MAAM,aAAa,MAAM,SAAS;AAAA,IACxD,EAAE,MAAM,OAAO,MAAM,OAAO,MAAM,SAAS;AAAA,IAC3C,EAAE,MAAM,YAAY,MAAM,YAAY,MAAM,UAAU;AAAA,EACxD;AAAA,EACA,QAAQ;AAAA,IACN;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,OAAO,CAAC,QAAQ;AAAA,EAChB,OAAO,CAAC,SAAS,eAAe;AAAA,EAChC,UAAU;AACZ;AAEO,IAAM,kBAAN,cAA8B,cAAc;AAAA,EACjD,OAAgB,SAAS;AAAA,EACzB,OAAgB,aAAa,aAAa,MAAM;AAAA,EAEhD,OAAgB,SAAS;AAAA,IACvB;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyBF;AAAA,EAEmB,SAAS;AAC1B,WAAO,CAAC,KAAK,OAAO,IAAI;AAAA,EAC1B;AAAA,EAEmB,SAAS;AAC1B,UAAM,YAAY,KAAK,aAAa,YAAY;AAEhD,UAAM,UAAU,KAAK,eAAe,KAAK,OAAO,KAAK,SAAS,EAAE;AAChE,WAAO;AAAA;AAAA;AAAA;AAAA,kBAIO,KAAK,aAAa,UAAU,KAAK,WAAW,CAAC,SAAS;AAAA,kBACtD,OAAO,OAAO,CAAC;AAAA,eAClB,KAAK,WAAW;AAAA;AAAA,QAEvB,UACE,oDACA,2CAA2C;AAAA;AAAA,EAEnD;AAAA,EAEQ,cAAc,YAA2B;AAC/C,UAAM,YAAY,KAAK,aAAa,YAAY;AAChD,QAAI,CAAC,UAAW;AAChB,UAAM,MAAM,WAAW,KAAK,aAAa,KAAK,CAAC;AAC/C,QAAI;AACF,YAAM,KAAK,OAAO,KAAK,QAAQ,WAAW,GAAG;AAC7C,WAAK;AAAA,QACH,IAAI,YAAY,0BAA0B;AAAA,UACxC,SAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAQ,EAAE,WAAW,IAAI;AAAA,QAC3B,CAAC;AAAA,MACH;AAAA,IACF,QAAQ;AAAA,IAER;AAAA,EACF;AACF;","names":[]}

package/dist/chunk-LO2EW5YP.js

@@ -0,0 +1,25 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+
+// src/navigate.ts
+function navigateOnClick(event) {
+  if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+    return;
+  }
+  const anchor = event.currentTarget;
+  const href = anchor?.getAttribute("href");
+  if (anchor === null || href === null || href === void 0) return;
+  const routed = !anchor.dispatchEvent(
+    new CustomEvent("nymbal:navigate", {
+      detail: { href },
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    })
+  );
+  if (routed) event.preventDefault();
+}
+
+export {
+  navigateOnClick
+};
+//# sourceMappingURL=chunk-LO2EW5YP.js.map

package/dist/chunk-LO2EW5YP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/navigate.ts"],"sourcesContent":["/**\n * The click handler of an element's anchor part. An anchor in a shadow root is a plain `<a>`, which a client-side\n * router does not see, so a plain left click asks the page first: a cancelable, composed `nymbal:navigate` with the\n * href. A page that routes it (Next's `router.push`) cancels the event, and the click's own navigation is prevented; a\n * page that does not leaves the anchor to load the page. A click with a modifier key or another button is the\n * browser's (a new tab or window), untouched.\n */\nexport function navigateOnClick(event: MouseEvent): void {\n  if (\n    event.defaultPrevented ||\n    event.button !== 0 ||\n    event.metaKey ||\n    event.ctrlKey ||\n    event.shiftKey ||\n    event.altKey\n  ) {\n    return\n  }\n  const anchor = event.currentTarget as HTMLAnchorElement | null\n  const href = anchor?.getAttribute('href')\n  if (anchor === null || href === null || href === undefined) return\n  const routed = !anchor.dispatchEvent(\n    new CustomEvent('nymbal:navigate', {\n      detail: { href },\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    }),\n  )\n  if (routed) event.preventDefault()\n}\n"],"mappings":";;;AAOO,SAAS,gBAAgB,OAAyB;AACvD,MACE,MAAM,oBACN,MAAM,WAAW,KACjB,MAAM,WACN,MAAM,WACN,MAAM,YACN,MAAM,QACN;AACA;AAAA,EACF;AACA,QAAM,SAAS,MAAM;AACrB,QAAM,OAAO,QAAQ,aAAa,MAAM;AACxC,MAAI,WAAW,QAAQ,SAAS,QAAQ,SAAS,OAAW;AAC5D,QAAM,SAAS,CAAC,OAAO;AAAA,IACrB,IAAI,YAAY,mBAAmB;AAAA,MACjC,QAAQ,EAAE,KAAK;AAAA,MACf,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,IACd,CAAC;AAAA,EACH;AACA,MAAI,OAAQ,OAAM,eAAe;AACnC;","names":[]}

package/dist/chunk-LSQPUZK6.js

@@ -0,0 +1,291 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  shownCart
+} from "./chunk-DR5QB5VN.js";
+import {
+  NymbalElement,
+  baseStyles,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/cart-drawer.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-cart-drawer",
+  reactName: "CartDrawer",
+  attributes: [
+    { name: "open", prop: "open", type: "boolean" },
+    // The cart a server read (cart-projection.ts), shown until the cart store settles.
+    { name: "cart", prop: "cart", type: "json" }
+  ],
+  events: [{ name: "nymbal:cart:checkout-clicked", prop: "onCheckoutClick", detail: "void" }],
+  parts: [
+    "overlay",
+    "panel",
+    "header",
+    "title",
+    "close",
+    "items",
+    "empty",
+    "item",
+    "item-info",
+    "item-name",
+    "item-variant",
+    "item-qty",
+    "item-actions",
+    "item-price",
+    "item-remove",
+    "footer",
+    "subtotal",
+    "checkout"
+  ],
+  slots: ["title", "empty", "checkout-label"],
+  children: false
+};
+function formatPrice(minor, currency) {
+  return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(minor / 100);
+}
+var NymbalCartDrawer = class extends NymbalElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    css`
+      :host {
+        display: block;
+      }
+      [part~='overlay'] {
+        position: fixed;
+        inset: 0;
+        background: var(--nymbal-color-overlay, rgba(0, 0, 0, 0.4));
+        z-index: var(--nymbal-z-drawer, 200);
+        opacity: 0;
+        visibility: hidden;
+        transition:
+          opacity var(--nymbal-transition-normal, 200ms ease),
+          visibility var(--nymbal-transition-normal, 200ms ease);
+      }
+      :host([open]) [part~='overlay'] {
+        opacity: 1;
+        visibility: visible;
+      }
+      [part~='panel'] {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: min(400px, 90vw);
+        background: var(--nymbal-color-surface, #ffffff);
+        z-index: var(--nymbal-z-drawer, 200);
+        transform: translateX(100%);
+        transition: transform var(--nymbal-transition-normal, 200ms ease);
+        display: flex;
+        flex-direction: column;
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+      }
+      :host([open]) [part~='panel'] {
+        transform: translateX(0);
+      }
+      [part~='header'] {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: var(--nymbal-spacing-md, 1rem) var(--nymbal-spacing-lg, 1.5rem);
+        border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);
+      }
+      [part~='title'] {
+        margin: 0;
+        font-size: var(--nymbal-font-size-lg, 1.125rem);
+        font-weight: var(--nymbal-font-weight-bold, 700);
+      }
+      [part~='close'] {
+        background: none;
+        border: none;
+        font-size: var(--nymbal-font-size-xl, 1.25rem);
+        cursor: pointer;
+        padding: var(--nymbal-spacing-xs, 0.25rem);
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='items'] {
+        flex: 1;
+        overflow-y: auto;
+        padding: var(--nymbal-spacing-md, 1rem) var(--nymbal-spacing-lg, 1.5rem);
+      }
+      [part~='item'] {
+        display: flex;
+        gap: var(--nymbal-spacing-md, 1rem);
+        padding: var(--nymbal-spacing-md, 1rem) 0;
+        border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);
+      }
+      [part~='item-info'] {
+        flex: 1;
+      }
+      [part~='item-name'] {
+        font-weight: var(--nymbal-font-weight-medium, 500);
+        margin-bottom: var(--nymbal-spacing-xs, 0.25rem);
+      }
+      [part~='item-variant'] {
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='item-actions'] {
+        display: flex;
+        align-items: center;
+        gap: var(--nymbal-spacing-sm, 0.5rem);
+      }
+      [part~='item-remove'] {
+        background: none;
+        border: none;
+        color: var(--nymbal-color-error, #dc2626);
+        cursor: pointer;
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        padding: var(--nymbal-spacing-xs, 0.25rem);
+      }
+      [part~='footer'] {
+        padding: var(--nymbal-spacing-md, 1rem) var(--nymbal-spacing-lg, 1.5rem);
+        border-top: 1px solid var(--nymbal-color-border, #e4e4e7);
+      }
+      [part~='subtotal'] {
+        display: flex;
+        justify-content: space-between;
+        font-weight: var(--nymbal-font-weight-bold, 700);
+        margin-bottom: var(--nymbal-spacing-md, 1rem);
+      }
+      [part~='checkout'] {
+        width: 100%;
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+        font-size: var(--nymbal-font-size-base, 1rem);
+        font-weight: var(--nymbal-font-weight-medium, 500);
+        background: var(--nymbal-color-primary, #18181b);
+        color: var(--nymbal-color-text-inverse, #ffffff);
+        border: none;
+        border-radius: var(--nymbal-radius-md, 0.375rem);
+        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-lg, 1.5rem);
+        cursor: pointer;
+        transition: background var(--nymbal-transition-fast, 150ms ease);
+      }
+      [part~='checkout']:hover {
+        background: var(--nymbal-color-primary-hover, #27272a);
+      }
+      [part~='empty'] {
+        text-align: center;
+        color: var(--nymbal-color-text-muted, #71717a);
+        padding: var(--nymbal-spacing-xl, 2rem) 0;
+      }
+    `
+  ];
+  handleItemAdded = () => {
+    this.show();
+  };
+  handleMiniCartClicked = () => {
+    this.toggle();
+  };
+  stores() {
+    return [this.client.cart];
+  }
+  storeSettled() {
+    this.cart = void 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    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);
+  }
+  /** Opens the drawer (the `open` attribute and property say whether it is). */
+  show() {
+    this.setAttribute("open", "");
+    window.dispatchEvent(new CustomEvent("nymbal:cart:open"));
+  }
+  hide() {
+    this.removeAttribute("open");
+    window.dispatchEvent(new CustomEvent("nymbal:cart:close"));
+  }
+  toggle() {
+    if (this.hasAttribute("open")) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  render() {
+    const state = shownCart(this, this.cart, this.readsStores ? this.client : null);
+    const currency = state.currency;
+    const items = state.items.length === 0 ? html`<div part="empty"><slot name="empty">Your cart is empty</slot></div>` : state.items.map(
+      (item) => html`
+              <div part="item" data-testid="cart-item-${item.variantId}">
+                <div part="item-info">
+                  <div part="item-name">${item.productName}</div>
+                  <div part="item-variant">${item.variantName}</div>
+                  <div part="item-qty">Qty: ${item.qty}</div>
+                </div>
+                <div part="item-actions">
+                  <span part="item-price">${formatPrice(item.priceMinor * item.qty, currency)}</span>
+                  <button
+                    type="button"
+                    part="item-remove"
+                    data-testid="remove-item-${item.variantId}"
+                    @click=${() => void this.client.cart.removeItem(item.variantId)}
+                  >
+                    Remove
+                  </button>
+                </div>
+              </div>
+            `
+    );
+    return html`
+      <div part="overlay" data-testid="cart-drawer-overlay" @click=${() => this.hide()}></div>
+      <div
+        part="panel"
+        role="dialog"
+        aria-label="Shopping cart"
+        aria-modal="true"
+        data-testid="cart-drawer"
+      >
+        <div part="header">
+          <h2 part="title"><slot name="title">Cart (${state.itemCount})</slot></h2>
+          <button
+            type="button"
+            part="close"
+            data-testid="cart-drawer-close"
+            aria-label="Close cart"
+            @click=${() => this.hide()}
+          >
+            &times;
+          </button>
+        </div>
+        <div part="items">${items}</div>
+        ${state.items.length > 0 ? html`
+              <div part="footer">
+                <div part="subtotal">
+                  <span>Subtotal</span>
+                  <span>${formatPrice(state.subtotalMinor, currency)}</span>
+                </div>
+                <button
+                  type="button"
+                  part="checkout"
+                  data-testid="cart-checkout-btn"
+                  @click=${this.handleCheckout}
+                >
+                  <slot name="checkout-label">Checkout</slot>
+                </button>
+              </div>
+            ` : nothing}
+      </div>
+    `;
+  }
+  handleCheckout = () => {
+    this.dispatchEvent(
+      new CustomEvent("nymbal:cart:checkout-clicked", { bubbles: true, composed: true })
+    );
+  };
+};
+
+export {
+  NymbalCartDrawer
+};
+//# sourceMappingURL=chunk-LSQPUZK6.js.map

package/dist/chunk-LSQPUZK6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/cart-drawer.ts"],"sourcesContent":["import { css, html, nothing } from 'lit'\nimport { baseStyles, NymbalElement, propertiesOf, type ElementSchema } from '../base-element.js'\nimport { shownCart } from '../cart-projection.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-cart-drawer',\n  reactName: 'CartDrawer',\n  attributes: [\n    { name: 'open', prop: 'open', type: 'boolean' },\n    // The cart a server read (cart-projection.ts), shown until the cart store settles.\n    { name: 'cart', prop: 'cart', type: 'json' },\n  ],\n  events: [{ name: 'nymbal:cart:checkout-clicked', prop: 'onCheckoutClick', detail: 'void' }],\n  parts: [\n    'overlay',\n    'panel',\n    'header',\n    'title',\n    'close',\n    'items',\n    'empty',\n    'item',\n    'item-info',\n    'item-name',\n    'item-variant',\n    'item-qty',\n    'item-actions',\n    'item-price',\n    'item-remove',\n    'footer',\n    'subtotal',\n    'checkout',\n  ],\n  slots: ['title', 'empty', 'checkout-label'],\n  children: false,\n}\n\nfunction formatPrice(minor: number, currency: string): string {\n  return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(minor / 100)\n}\n\nexport class NymbalCartDrawer extends NymbalElement {\n  static override schema = SCHEMA\n  static override properties = propertiesOf(SCHEMA)\n\n  static override styles = [\n    baseStyles,\n    css`\n      :host {\n        display: block;\n      }\n      [part~='overlay'] {\n        position: fixed;\n        inset: 0;\n        background: var(--nymbal-color-overlay, rgba(0, 0, 0, 0.4));\n        z-index: var(--nymbal-z-drawer, 200);\n        opacity: 0;\n        visibility: hidden;\n        transition:\n          opacity var(--nymbal-transition-normal, 200ms ease),\n          visibility var(--nymbal-transition-normal, 200ms ease);\n      }\n      :host([open]) [part~='overlay'] {\n        opacity: 1;\n        visibility: visible;\n      }\n      [part~='panel'] {\n        position: fixed;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        width: min(400px, 90vw);\n        background: var(--nymbal-color-surface, #ffffff);\n        z-index: var(--nymbal-z-drawer, 200);\n        transform: translateX(100%);\n        transition: transform var(--nymbal-transition-normal, 200ms ease);\n        display: flex;\n        flex-direction: column;\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n      }\n      :host([open]) [part~='panel'] {\n        transform: translateX(0);\n      }\n      [part~='header'] {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: var(--nymbal-spacing-md, 1rem) var(--nymbal-spacing-lg, 1.5rem);\n        border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);\n      }\n      [part~='title'] {\n        margin: 0;\n        font-size: var(--nymbal-font-size-lg, 1.125rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n      }\n      [part~='close'] {\n        background: none;\n        border: none;\n        font-size: var(--nymbal-font-size-xl, 1.25rem);\n        cursor: pointer;\n        padding: var(--nymbal-spacing-xs, 0.25rem);\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='items'] {\n        flex: 1;\n        overflow-y: auto;\n        padding: var(--nymbal-spacing-md, 1rem) var(--nymbal-spacing-lg, 1.5rem);\n      }\n      [part~='item'] {\n        display: flex;\n        gap: var(--nymbal-spacing-md, 1rem);\n        padding: var(--nymbal-spacing-md, 1rem) 0;\n        border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);\n      }\n      [part~='item-info'] {\n        flex: 1;\n      }\n      [part~='item-name'] {\n        font-weight: var(--nymbal-font-weight-medium, 500);\n        margin-bottom: var(--nymbal-spacing-xs, 0.25rem);\n      }\n      [part~='item-variant'] {\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='item-actions'] {\n        display: flex;\n        align-items: center;\n        gap: var(--nymbal-spacing-sm, 0.5rem);\n      }\n      [part~='item-remove'] {\n        background: none;\n        border: none;\n        color: var(--nymbal-color-error, #dc2626);\n        cursor: pointer;\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        padding: var(--nymbal-spacing-xs, 0.25rem);\n      }\n      [part~='footer'] {\n        padding: var(--nymbal-spacing-md, 1rem) var(--nymbal-spacing-lg, 1.5rem);\n        border-top: 1px solid var(--nymbal-color-border, #e4e4e7);\n      }\n      [part~='subtotal'] {\n        display: flex;\n        justify-content: space-between;\n        font-weight: var(--nymbal-font-weight-bold, 700);\n        margin-bottom: var(--nymbal-spacing-md, 1rem);\n      }\n      [part~='checkout'] {\n        width: 100%;\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n        font-size: var(--nymbal-font-size-base, 1rem);\n        font-weight: var(--nymbal-font-weight-medium, 500);\n        background: var(--nymbal-color-primary, #18181b);\n        color: var(--nymbal-color-text-inverse, #ffffff);\n        border: none;\n        border-radius: var(--nymbal-radius-md, 0.375rem);\n        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-lg, 1.5rem);\n        cursor: pointer;\n        transition: background var(--nymbal-transition-fast, 150ms ease);\n      }\n      [part~='checkout']:hover {\n        background: var(--nymbal-color-primary-hover, #27272a);\n      }\n      [part~='empty'] {\n        text-align: center;\n        color: var(--nymbal-color-text-muted, #71717a);\n        padding: var(--nymbal-spacing-xl, 2rem) 0;\n      }\n    `,\n  ]\n\n  private readonly handleItemAdded = (): void => {\n    this.show()\n  }\n\n  private readonly handleMiniCartClicked = (): void => {\n    this.toggle()\n  }\n\n  declare cart: unknown\n\n  protected override stores() {\n    return [this.client.cart]\n  }\n\n  protected override storeSettled(): void {\n    this.cart = undefined\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    document.addEventListener('nymbal:cart:item-added', this.handleItemAdded)\n    document.addEventListener('nymbal:mini-cart:clicked', this.handleMiniCartClicked)\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    document.removeEventListener('nymbal:cart:item-added', this.handleItemAdded)\n    document.removeEventListener('nymbal:mini-cart:clicked', this.handleMiniCartClicked)\n  }\n\n  /** Opens the drawer (the `open` attribute and property say whether it is). */\n  show(): void {\n    this.setAttribute('open', '')\n    window.dispatchEvent(new CustomEvent('nymbal:cart:open'))\n  }\n\n  hide(): void {\n    this.removeAttribute('open')\n    window.dispatchEvent(new CustomEvent('nymbal:cart:close'))\n  }\n\n  toggle(): void {\n    if (this.hasAttribute('open')) {\n      this.hide()\n    } else {\n      this.show()\n    }\n  }\n\n  protected override render() {\n    const state = shownCart(this, this.cart, this.readsStores ? this.client : null)\n    const currency = state.currency\n\n    const items =\n      state.items.length === 0\n        ? html`<div part=\"empty\"><slot name=\"empty\">Your cart is empty</slot></div>`\n        : state.items.map(\n            (item) => html`\n              <div part=\"item\" data-testid=\"cart-item-${item.variantId}\">\n                <div part=\"item-info\">\n                  <div part=\"item-name\">${item.productName}</div>\n                  <div part=\"item-variant\">${item.variantName}</div>\n                  <div part=\"item-qty\">Qty: ${item.qty}</div>\n                </div>\n                <div part=\"item-actions\">\n                  <span part=\"item-price\">${formatPrice(item.priceMinor * item.qty, currency)}</span>\n                  <button\n                    type=\"button\"\n                    part=\"item-remove\"\n                    data-testid=\"remove-item-${item.variantId}\"\n                    @click=${() => void this.client.cart.removeItem(item.variantId)}\n                  >\n                    Remove\n                  </button>\n                </div>\n              </div>\n            `,\n          )\n\n    return html`\n      <div part=\"overlay\" data-testid=\"cart-drawer-overlay\" @click=${() => this.hide()}></div>\n      <div\n        part=\"panel\"\n        role=\"dialog\"\n        aria-label=\"Shopping cart\"\n        aria-modal=\"true\"\n        data-testid=\"cart-drawer\"\n      >\n        <div part=\"header\">\n          <h2 part=\"title\"><slot name=\"title\">Cart (${state.itemCount})</slot></h2>\n          <button\n            type=\"button\"\n            part=\"close\"\n            data-testid=\"cart-drawer-close\"\n            aria-label=\"Close cart\"\n            @click=${() => this.hide()}\n          >\n            &times;\n          </button>\n        </div>\n        <div part=\"items\">${items}</div>\n        ${state.items.length > 0\n          ? html`\n              <div part=\"footer\">\n                <div part=\"subtotal\">\n                  <span>Subtotal</span>\n                  <span>${formatPrice(state.subtotalMinor, currency)}</span>\n                </div>\n                <button\n                  type=\"button\"\n                  part=\"checkout\"\n                  data-testid=\"cart-checkout-btn\"\n                  @click=${this.handleCheckout}\n                >\n                  <slot name=\"checkout-label\">Checkout</slot>\n                </button>\n              </div>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  private handleCheckout = (): void => {\n    this.dispatchEvent(\n      new CustomEvent('nymbal:cart:checkout-clicked', { bubbles: true, composed: true }),\n    )\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-N4Y5DI4X.js

@@ -0,0 +1,82 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  navigateOnClick
+} from "./chunk-LO2EW5YP.js";
+import {
+  NymbalElement,
+  baseStyles,
+  parsedJson,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/breadcrumb.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-breadcrumb",
+  reactName: "Breadcrumb",
+  // `[{ label, href? }]`, from the store's home to the page itself, which is the last.
+  attributes: [{ name: "items", prop: "items", type: "json" }],
+  events: [],
+  parts: ["nav", "item", "current"],
+  slots: [],
+  children: false
+};
+var NymbalBreadcrumb = class extends NymbalElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+      }
+      [part~='nav'] {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--nymbal-spacing-xs, 0.25rem);
+        margin-bottom: var(--nymbal-spacing-md, 1rem);
+        font-size: var(--nymbal-font-size-xs, 0.75rem);
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='item'] {
+        color: var(--nymbal-color-text-muted, #71717a);
+        text-decoration: none;
+        transition: color var(--nymbal-transition-fast, 150ms ease);
+      }
+      a[part~='item']:hover {
+        color: var(--nymbal-color-accent, #2563eb);
+      }
+      .separator {
+        color: var(--nymbal-color-border, #e4e4e7);
+      }
+      [part~='current'] {
+        color: var(--nymbal-color-text, #18181b);
+        font-weight: var(--nymbal-font-weight-medium, 500);
+      }
+    `
+  ];
+  render() {
+    const items = parsedJson(this, "items", this.items);
+    if (!Array.isArray(items) || items.length === 0) return nothing;
+    const last = items.length - 1;
+    return html`
+      <nav part="nav" aria-label="Breadcrumb" data-testid="breadcrumb">
+        ${items.map(
+      (item, i) => html`
+            ${i > 0 ? html`<span class="separator" aria-hidden="true">/</span>` : nothing}
+            ${i === last ? html`<span part="current" aria-current="page">${item.label}</span>` : item.href === void 0 ? html`<span part="item">${item.label}</span>` : html`<a part="item" href=${item.href} @click=${navigateOnClick}
+                    >${item.label}</a
+                  >`}
+          `
+    )}
+      </nav>
+    `;
+  }
+};
+
+export {
+  NymbalBreadcrumb
+};
+//# sourceMappingURL=chunk-N4Y5DI4X.js.map

package/dist/chunk-N4Y5DI4X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/breadcrumb.ts"],"sourcesContent":["import { css, html, nothing } from 'lit'\nimport {\n  baseStyles,\n  NymbalElement,\n  parsedJson,\n  propertiesOf,\n  type ElementSchema,\n} from '../base-element.js'\nimport { navigateOnClick } from '../navigate.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-breadcrumb',\n  reactName: 'Breadcrumb',\n  // `[{ label, href? }]`, from the store's home to the page itself, which is the last.\n  attributes: [{ name: 'items', prop: 'items', type: 'json' }],\n  events: [],\n  parts: ['nav', 'item', 'current'],\n  slots: [],\n  children: false,\n}\n\ninterface Crumb {\n  label: string\n  href?: string\n}\n\n/** Where the page sits: each crumb a link, the last the page itself (`aria-current=\"page\"`). */\nexport class NymbalBreadcrumb extends NymbalElement {\n  static override schema = SCHEMA\n  static override properties = propertiesOf(SCHEMA)\n  static override styles = [\n    baseStyles,\n    css`\n      :host {\n        display: block;\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n      }\n      [part~='nav'] {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: var(--nymbal-spacing-xs, 0.25rem);\n        margin-bottom: var(--nymbal-spacing-md, 1rem);\n        font-size: var(--nymbal-font-size-xs, 0.75rem);\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='item'] {\n        color: var(--nymbal-color-text-muted, #71717a);\n        text-decoration: none;\n        transition: color var(--nymbal-transition-fast, 150ms ease);\n      }\n      a[part~='item']:hover {\n        color: var(--nymbal-color-accent, #2563eb);\n      }\n      .separator {\n        color: var(--nymbal-color-border, #e4e4e7);\n      }\n      [part~='current'] {\n        color: var(--nymbal-color-text, #18181b);\n        font-weight: var(--nymbal-font-weight-medium, 500);\n      }\n    `,\n  ]\n\n  declare items: unknown\n\n  protected override render() {\n    const items = parsedJson<Crumb[]>(this, 'items', this.items)\n    if (!Array.isArray(items) || items.length === 0) return nothing\n    const last = items.length - 1\n    return html`\n      <nav part=\"nav\" aria-label=\"Breadcrumb\" data-testid=\"breadcrumb\">\n        ${items.map(\n          (item, i) => html`\n            ${i > 0 ? html`<span class=\"separator\" aria-hidden=\"true\">/</span>` : nothing}\n            ${i === last\n              ? html`<span part=\"current\" aria-current=\"page\">${item.label}</span>`\n              : item.href === undefined\n                ? html`<span part=\"item\">${item.label}</span>`\n                : html`<a part=\"item\" href=${item.href} @click=${navigateOnClick}\n                    >${item.label}</a\n                  >`}\n          `,\n        )}\n      </nav>\n    `\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,KAAK,MAAM,eAAe;AAUnC,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA;AAAA,EAEX,YAAY,CAAC,EAAE,MAAM,SAAS,MAAM,SAAS,MAAM,OAAO,CAAC;AAAA,EAC3D,QAAQ,CAAC;AAAA,EACT,OAAO,CAAC,OAAO,QAAQ,SAAS;AAAA,EAChC,OAAO,CAAC;AAAA,EACR,UAAU;AACZ;AAQO,IAAM,mBAAN,cAA+B,cAAc;AAAA,EAClD,OAAgB,SAAS;AAAA,EACzB,OAAgB,aAAa,aAAa,MAAM;AAAA,EAChD,OAAgB,SAAS;AAAA,IACvB;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA8BF;AAAA,EAImB,SAAS;AAC1B,UAAM,QAAQ,WAAoB,MAAM,SAAS,KAAK,KAAK;AAC3D,QAAI,CAAC,MAAM,QAAQ,KAAK,KAAK,MAAM,WAAW,EAAG,QAAO;AACxD,UAAM,OAAO,MAAM,SAAS;AAC5B,WAAO;AAAA;AAAA,UAED,MAAM;AAAA,MACN,CAAC,MAAM,MAAM;AAAA,cACT,IAAI,IAAI,4DAA4D,OAAO;AAAA,cAC3E,MAAM,OACJ,gDAAgD,KAAK,KAAK,YAC1D,KAAK,SAAS,SACZ,yBAAyB,KAAK,KAAK,YACnC,2BAA2B,KAAK,IAAI,WAAW,eAAe;AAAA,uBACzD,KAAK,KAAK;AAAA,oBACb;AAAA;AAAA,IAEZ,CAAC;AAAA;AAAA;AAAA,EAGP;AACF;","names":[]}