@nymbalhq/web-components 1.0.0 → 1.2.0

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":[]}

package/dist/chunk-NE6UHTOT.js

@@ -0,0 +1,148 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalFormElement
+} from "./chunk-PN6QKYE4.js";
+import {
+  buttonStyles,
+  fieldStyles
+} from "./chunk-GHXTJ2CF.js";
+import {
+  baseStyles,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/review-form.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-review-form",
+  reactName: "ReviewForm",
+  attributes: [{ name: "product-id", prop: "productId", type: "string" }],
+  events: [
+    {
+      name: "nymbal:review:submitted",
+      prop: "onSubmitted",
+      detail: "{ reviewId: string }"
+    }
+  ],
+  parts: ["form", "rating", "title", "body", "submit", "error"],
+  slots: [],
+  children: false
+};
+var RATINGS = [
+  ["5", "5 - Excellent"],
+  ["4", "4 - Very Good"],
+  ["3", "3 - Good"],
+  ["2", "2 - Fair"],
+  ["1", "1 - Poor"]
+];
+var NymbalReviewForm = class extends NymbalFormElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    buttonStyles,
+    fieldStyles,
+    css`
+      :host {
+        max-width: 32rem;
+      }
+      h3 {
+        margin: 0 0 var(--nymbal-spacing-md, 1rem);
+        line-height: 1.2;
+        font-size: var(--nymbal-font-size-lg, 1.125rem);
+        font-weight: var(--nymbal-font-weight-bold, 700);
+      }
+      label {
+        display: block;
+        margin-bottom: var(--nymbal-spacing-xs, 0.25rem);
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        font-weight: var(--nymbal-font-weight-medium, 500);
+      }
+      [part~='rating'],
+      [part~='title'],
+      [part~='body'] {
+        display: block;
+        width: 100%;
+        margin-bottom: var(--nymbal-spacing-md, 1rem);
+        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);
+        font: inherit;
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        color: var(--nymbal-color-text, #18181b);
+        background-color: var(--nymbal-color-surface, #ffffff);
+        border: 1px solid var(--nymbal-color-border, #e4e4e7);
+        border-radius: var(--nymbal-radius-md, 0.5rem);
+      }
+      [part~='body'] {
+        resize: vertical;
+      }
+      .notice {
+        margin-top: var(--nymbal-spacing-md, 1rem);
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        color: var(--nymbal-color-success, #16a34a);
+      }
+    `
+  ];
+  async send() {
+    const answer = await this.client.adapter.reviews.submit({
+      productId: this.productId ?? "",
+      rating: Number(this.value("rating")),
+      title: this.value("title"),
+      body: this.value("body")
+    });
+    this.renderRoot.querySelector("form")?.reset();
+    this.notice = "Thank you for your review!";
+    const reviewId = answer?.review?.id;
+    if (reviewId !== void 0) this.emit("nymbal:review:submitted", { reviewId });
+  }
+  failureText() {
+    return "Something went wrong. Please try again.";
+  }
+  render() {
+    return html`
+      ${this.renderError()}
+      <form part="form" data-testid="review-form" @submit=${this.onSubmit}>
+        <h3>Write a Review</h3>
+        <label for="review-rating">Rating</label>
+        <select part="rating" id="review-rating" name="rating" required data-testid="review-rating">
+          <option value="">Select a rating</option>
+          ${RATINGS.map(([value, label]) => html`<option value=${value}>${label}</option>`)}
+        </select>
+        <label for="review-title">Title</label>
+        <input
+          part="title"
+          id="review-title"
+          name="title"
+          type="text"
+          placeholder="Summarise your experience"
+          required
+          data-testid="review-title"
+        />
+        <label for="review-body">Review</label>
+        <textarea
+          part="body"
+          id="review-body"
+          name="body"
+          rows="4"
+          placeholder="Tell us what you think..."
+          required
+          data-testid="review-body"
+        ></textarea>
+        <button
+          type="submit"
+          part="submit"
+          class="btn btn-primary"
+          data-testid="review-submit"
+          ?disabled=${this.pending}
+        >
+          ${this.pending ? "Submitting..." : "Submit Review"}
+        </button>
+        ${this.notice === null ? nothing : html`<p class="notice" role="status">${this.notice}</p>`}
+      </form>
+    `;
+  }
+};
+
+export {
+  NymbalReviewForm
+};
+//# sourceMappingURL=chunk-NE6UHTOT.js.map

package/dist/chunk-NE6UHTOT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/review-form.ts"],"sourcesContent":["import { css, html, nothing } from 'lit'\nimport { baseStyles, propertiesOf, type ElementSchema } from '../base-element.js'\nimport { NymbalFormElement } from '../form-element.js'\nimport { buttonStyles, fieldStyles } from '../view-styles.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-review-form',\n  reactName: 'ReviewForm',\n  attributes: [{ name: 'product-id', prop: 'productId', type: 'string' }],\n  events: [\n    {\n      name: 'nymbal:review:submitted',\n      prop: 'onSubmitted',\n      detail: '{ reviewId: string }',\n    },\n  ],\n  parts: ['form', 'rating', 'title', 'body', 'submit', 'error'],\n  slots: [],\n  children: false,\n}\n\nconst RATINGS: Array<[string, string]> = [\n  ['5', '5 - Excellent'],\n  ['4', '4 - Very Good'],\n  ['3', '3 - Good'],\n  ['2', '2 - Fair'],\n  ['1', '1 - Poor'],\n]\n\n/** A review of one product: one submission per click, the form cleared once the store has it. */\nexport class NymbalReviewForm extends NymbalFormElement {\n  static override schema = SCHEMA\n  static override properties = propertiesOf(SCHEMA)\n  static override styles = [\n    baseStyles,\n    buttonStyles,\n    fieldStyles,\n    css`\n      :host {\n        max-width: 32rem;\n      }\n      h3 {\n        margin: 0 0 var(--nymbal-spacing-md, 1rem);\n        line-height: 1.2;\n        font-size: var(--nymbal-font-size-lg, 1.125rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n      }\n      label {\n        display: block;\n        margin-bottom: var(--nymbal-spacing-xs, 0.25rem);\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        font-weight: var(--nymbal-font-weight-medium, 500);\n      }\n      [part~='rating'],\n      [part~='title'],\n      [part~='body'] {\n        display: block;\n        width: 100%;\n        margin-bottom: var(--nymbal-spacing-md, 1rem);\n        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);\n        font: inherit;\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        color: var(--nymbal-color-text, #18181b);\n        background-color: var(--nymbal-color-surface, #ffffff);\n        border: 1px solid var(--nymbal-color-border, #e4e4e7);\n        border-radius: var(--nymbal-radius-md, 0.5rem);\n      }\n      [part~='body'] {\n        resize: vertical;\n      }\n      .notice {\n        margin-top: var(--nymbal-spacing-md, 1rem);\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        color: var(--nymbal-color-success, #16a34a);\n      }\n    `,\n  ]\n\n  declare productId: string | undefined\n\n  protected override async send(): Promise<void> {\n    const answer: { review?: { id: string } | null } | null | undefined =\n      await this.client.adapter.reviews.submit({\n        productId: this.productId ?? '',\n        rating: Number(this.value('rating')),\n        title: this.value('title'),\n        body: this.value('body'),\n      })\n    this.renderRoot.querySelector('form')?.reset()\n    this.notice = 'Thank you for your review!'\n    // A 2xx answer is the store's acceptance; without a review in it there is no id to announce.\n    const reviewId = answer?.review?.id\n    if (reviewId !== undefined) this.emit('nymbal:review:submitted', { reviewId })\n  }\n\n  protected override failureText(): string {\n    return 'Something went wrong. Please try again.'\n  }\n\n  protected override render() {\n    return html`\n      ${this.renderError()}\n      <form part=\"form\" data-testid=\"review-form\" @submit=${this.onSubmit}>\n        <h3>Write a Review</h3>\n        <label for=\"review-rating\">Rating</label>\n        <select part=\"rating\" id=\"review-rating\" name=\"rating\" required data-testid=\"review-rating\">\n          <option value=\"\">Select a rating</option>\n          ${RATINGS.map(([value, label]) => html`<option value=${value}>${label}</option>`)}\n        </select>\n        <label for=\"review-title\">Title</label>\n        <input\n          part=\"title\"\n          id=\"review-title\"\n          name=\"title\"\n          type=\"text\"\n          placeholder=\"Summarise your experience\"\n          required\n          data-testid=\"review-title\"\n        />\n        <label for=\"review-body\">Review</label>\n        <textarea\n          part=\"body\"\n          id=\"review-body\"\n          name=\"body\"\n          rows=\"4\"\n          placeholder=\"Tell us what you think...\"\n          required\n          data-testid=\"review-body\"\n        ></textarea>\n        <button\n          type=\"submit\"\n          part=\"submit\"\n          class=\"btn btn-primary\"\n          data-testid=\"review-submit\"\n          ?disabled=${this.pending}\n        >\n          ${this.pending ? 'Submitting...' : 'Submit Review'}\n        </button>\n        ${this.notice === null ? nothing : html`<p class=\"notice\" role=\"status\">${this.notice}</p>`}\n      </form>\n    `\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,KAAK,MAAM,eAAe;AAKnC,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA,EACX,YAAY,CAAC,EAAE,MAAM,cAAc,MAAM,aAAa,MAAM,SAAS,CAAC;AAAA,EACtE,QAAQ;AAAA,IACN;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,OAAO,CAAC,QAAQ,UAAU,SAAS,QAAQ,UAAU,OAAO;AAAA,EAC5D,OAAO,CAAC;AAAA,EACR,UAAU;AACZ;AAEA,IAAM,UAAmC;AAAA,EACvC,CAAC,KAAK,eAAe;AAAA,EACrB,CAAC,KAAK,eAAe;AAAA,EACrB,CAAC,KAAK,UAAU;AAAA,EAChB,CAAC,KAAK,UAAU;AAAA,EAChB,CAAC,KAAK,UAAU;AAClB;AAGO,IAAM,mBAAN,cAA+B,kBAAkB;AAAA,EACtD,OAAgB,SAAS;AAAA,EACzB,OAAgB,aAAa,aAAa,MAAM;AAAA,EAChD,OAAgB,SAAS;AAAA,IACvB;AAAA,IACA;AAAA,IACA;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuCF;AAAA,EAIA,MAAyB,OAAsB;AAC7C,UAAM,SACJ,MAAM,KAAK,OAAO,QAAQ,QAAQ,OAAO;AAAA,MACvC,WAAW,KAAK,aAAa;AAAA,MAC7B,QAAQ,OAAO,KAAK,MAAM,QAAQ,CAAC;AAAA,MACnC,OAAO,KAAK,MAAM,OAAO;AAAA,MACzB,MAAM,KAAK,MAAM,MAAM;AAAA,IACzB,CAAC;AACH,SAAK,WAAW,cAAc,MAAM,GAAG,MAAM;AAC7C,SAAK,SAAS;AAEd,UAAM,WAAW,QAAQ,QAAQ;AACjC,QAAI,aAAa,OAAW,MAAK,KAAK,2BAA2B,EAAE,SAAS,CAAC;AAAA,EAC/E;AAAA,EAEmB,cAAsB;AACvC,WAAO;AAAA,EACT;AAAA,EAEmB,SAAS;AAC1B,WAAO;AAAA,QACH,KAAK,YAAY,CAAC;AAAA,4DACkC,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,YAK7D,QAAQ,IAAI,CAAC,CAAC,OAAO,KAAK,MAAM,qBAAqB,KAAK,IAAI,KAAK,WAAW,CAAC;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,sBA2BrE,KAAK,OAAO;AAAA;AAAA,YAEtB,KAAK,UAAU,kBAAkB,eAAe;AAAA;AAAA,UAElD,KAAK,WAAW,OAAO,UAAU,uCAAuC,KAAK,MAAM,MAAM;AAAA;AAAA;AAAA,EAGjG;AACF;","names":[]}