@nymbalhq/web-components 1.0.0 → 1.2.0

package/dist/chunk-VTQVGNVC.js

@@ -0,0 +1,346 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalQuantitySelector
+} from "./chunk-HPBC3OG7.js";
+import {
+  formatPrice
+} from "./chunk-RVSKX2RX.js";
+import {
+  buttonStyles
+} from "./chunk-GHXTJ2CF.js";
+import {
+  shownCart
+} from "./chunk-DR5QB5VN.js";
+import {
+  NymbalElement,
+  baseStyles,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/cart-page.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-cart-page",
+  reactName: "CartPage",
+  // The cart a server read (cart-projection.ts), shown until the cart store settles.
+  attributes: [{ name: "cart", prop: "cart", type: "json" }],
+  events: [],
+  parts: [
+    "loading",
+    "empty",
+    "empty-title",
+    "empty-text",
+    "continue",
+    "layout",
+    "header",
+    "title",
+    "count",
+    "items",
+    "item",
+    "item-image",
+    "item-info",
+    "item-name",
+    "item-variant",
+    "item-price",
+    "item-remove",
+    "item-qty",
+    "item-total",
+    "summary",
+    "summary-title",
+    "summary-row",
+    "subtotal",
+    "total",
+    "actions",
+    "checkout"
+  ],
+  slots: ["title", "empty", "checkout-label"],
+  children: false
+};
+var NymbalCartPage = class extends NymbalElement {
+  static schema = SCHEMA;
+  static uses = [NymbalQuantitySelector];
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    buttonStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+        color: var(--nymbal-color-text, #18181b);
+      }
+      [part~='loading'],
+      [part~='empty'] {
+        padding: 4rem var(--nymbal-spacing-md, 1rem);
+        text-align: center;
+      }
+      /* Until the cart is known the page keeps what follows it below the fold, so a cart with lines does not push
+         the footer down as it arrives. */
+      [part~='loading'] {
+        min-height: 100vh;
+      }
+      [part~='empty-title'] {
+        margin: 0 0 var(--nymbal-spacing-xs, 0.25rem);
+        font-size: var(--nymbal-font-size-lg, 1.125rem);
+        font-weight: var(--nymbal-font-weight-medium, 500);
+      }
+      [part~='empty-text'] {
+        margin: 0 0 var(--nymbal-spacing-lg, 1.5rem);
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='layout'] {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: var(--nymbal-spacing-xl, 2rem);
+      }
+      @media (min-width: 769px) {
+        [part~='layout'] {
+          grid-template-columns: 1fr 360px;
+          align-items: start;
+        }
+      }
+      [part~='header'] {
+        margin-bottom: var(--nymbal-spacing-lg, 1.5rem);
+      }
+      [part~='title'] {
+        margin: 0;
+        font-size: 1.5rem;
+        font-weight: var(--nymbal-font-weight-bold, 700);
+        color: var(--nymbal-color-primary, #18181b);
+      }
+      [part~='count'] {
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        font-weight: var(--nymbal-font-weight-normal, 400);
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='items'] {
+        display: flex;
+        flex-direction: column;
+      }
+      [part~='item'] {
+        display: grid;
+        grid-template-columns: 80px 1fr auto;
+        gap: var(--nymbal-spacing-md, 1rem);
+        padding: var(--nymbal-spacing-md, 1rem) 0;
+        border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);
+        align-items: start;
+      }
+      [part~='item']:first-child {
+        border-top: 1px solid var(--nymbal-color-border, #e4e4e7);
+      }
+      @media (min-width: 641px) {
+        [part~='item'] {
+          grid-template-columns: 100px 1fr auto auto;
+          gap: var(--nymbal-spacing-lg, 1.5rem);
+          align-items: center;
+        }
+      }
+      [part~='item-image'] {
+        display: block;
+        width: 100%;
+        aspect-ratio: 1 / 1;
+        object-fit: cover;
+        border-radius: var(--nymbal-radius-md, 0.5rem);
+        background-color: #f4f4f5;
+      }
+      [part~='item-info'] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--nymbal-spacing-xs, 0.25rem);
+        min-width: 0;
+      }
+      [part~='item-name'] {
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        font-weight: var(--nymbal-font-weight-medium, 500);
+        color: var(--nymbal-color-text, #18181b);
+        text-decoration: none;
+      }
+      [part~='item-name']:hover {
+        color: var(--nymbal-color-accent, #2563eb);
+      }
+      [part~='item-variant'],
+      [part~='item-price'] {
+        font-size: var(--nymbal-font-size-xs, 0.75rem);
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='item-remove'] {
+        align-self: start;
+        padding: 0;
+        font: inherit;
+        font-size: var(--nymbal-font-size-xs, 0.75rem);
+        color: var(--nymbal-color-text-muted, #71717a);
+        background: none;
+        border: none;
+        text-decoration: underline;
+        cursor: pointer;
+      }
+      [part~='item-remove']:hover {
+        color: var(--nymbal-color-error, #dc2626);
+      }
+      [part~='item-total'] {
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        font-weight: var(--nymbal-font-weight-bold, 700);
+        text-align: right;
+        white-space: nowrap;
+      }
+      [part~='summary'] {
+        position: sticky;
+        top: 80px;
+        padding: var(--nymbal-spacing-lg, 1.5rem);
+        background-color: #fafafa;
+        border: 1px solid var(--nymbal-color-border, #e4e4e7);
+        border-radius: var(--nymbal-radius-lg, 0.75rem);
+      }
+      [part~='summary-title'] {
+        margin: 0 0 var(--nymbal-spacing-md, 1rem);
+        padding-bottom: var(--nymbal-spacing-md, 1rem);
+        font-size: var(--nymbal-font-size-lg, 1.125rem);
+        font-weight: var(--nymbal-font-weight-bold, 700);
+        border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);
+      }
+      dl {
+        margin: 0;
+      }
+      dd {
+        margin: 0;
+        font-weight: var(--nymbal-font-weight-medium, 500);
+      }
+      [part~='summary-row'] {
+        display: flex;
+        justify-content: space-between;
+        padding: var(--nymbal-spacing-xs, 0.25rem) 0;
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+      }
+      [part~='summary-row'] dt {
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='total'] {
+        display: flex;
+        justify-content: space-between;
+        margin-top: var(--nymbal-spacing-md, 1rem);
+        padding-top: var(--nymbal-spacing-md, 1rem);
+        font-size: var(--nymbal-font-size-lg, 1.125rem);
+        font-weight: var(--nymbal-font-weight-bold, 700);
+        border-top: 1px solid var(--nymbal-color-border, #e4e4e7);
+      }
+      [part~='actions'] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--nymbal-spacing-sm, 0.5rem);
+        margin-top: var(--nymbal-spacing-lg, 1.5rem);
+      }
+    `
+  ];
+  stores() {
+    return [this.client.cart];
+  }
+  storeSettled() {
+    this.cart = void 0;
+  }
+  /** The first line's image is at the top of the page and is often its LCP, so only the lines below it load lazily. */
+  renderLine(item, currency, index) {
+    return html`
+      <div part="item" data-testid="cart-item-${item.variantId}">
+        ${item.imageUrl ? html`<img
+              part="item-image"
+              src=${item.imageUrl}
+              alt=${item.productName}
+              width="100"
+              height="100"
+              loading=${index === 0 ? "eager" : "lazy"}
+            />` : html`<div part="item-image" aria-hidden="true"></div>`}
+        <div part="item-info">
+          <a part="item-name" href="/product/${encodeURIComponent(item.productId)}"
+            >${item.productName}</a
+          >
+          ${item.variantName ? html`<span part="item-variant">${item.variantName}</span>` : nothing}
+          <span part="item-price">${formatPrice(item.priceMinor, currency)} each</span>
+          <button
+            type="button"
+            part="item-remove"
+            data-testid="cart-remove-${item.variantId}"
+            aria-label="Remove ${item.productName} from cart"
+            @click=${() => void this.client.cart.removeItem(item.variantId)}
+          >
+            Remove
+          </button>
+        </div>
+        <div part="item-qty">
+          <nymbal-quantity-selector
+            value=${item.qty}
+            min="1"
+            max="99"
+            @nymbal:quantity:changed=${(e) => void this.client.cart.updateQuantity(item.variantId, e.detail.value)}
+          ></nymbal-quantity-selector>
+        </div>
+        <span part="item-total">${formatPrice(item.priceMinor * item.qty, currency)}</span>
+      </div>
+    `;
+  }
+  render() {
+    const state = shownCart(this, this.cart, this.readsStores ? this.client : null);
+    const { items } = state;
+    const currency = state.currency || "GBP";
+    if (state.loading && items.length === 0) {
+      return html`<div part="loading" role="status">Loading your cart...</div>`;
+    }
+    if (items.length === 0) {
+      return html`
+        <div part="empty">
+          <slot name="empty">
+            <h1 part="empty-title">Your cart is empty</h1>
+            <p part="empty-text">Looks like you haven't added anything yet.</p>
+          </slot>
+          <a part="continue" class="btn btn-primary" href="/products" data-testid="continue-shopping"
+            >Continue Shopping</a
+          >
+        </div>
+      `;
+    }
+    const subtotal = formatPrice(state.subtotalMinor, currency);
+    return html`
+      <div part="layout">
+        <div>
+          <div part="header">
+            <h1 part="title">
+              <slot name="title">Your Cart</slot>
+              <span part="count">(${items.length} ${items.length === 1 ? "item" : "items"})</span>
+            </h1>
+          </div>
+          <div part="items" data-testid="cart-items">
+            ${items.map((item, index) => this.renderLine(item, currency, index))}
+          </div>
+        </div>
+        <div part="summary" data-testid="cart-summary">
+          <h2 part="summary-title">Order Summary</h2>
+          <dl>
+            <div part="summary-row subtotal">
+              <dt>Subtotal</dt>
+              <dd>${subtotal}</dd>
+            </div>
+            <div part="summary-row">
+              <dt>Shipping</dt>
+              <dd>Calculated at checkout</dd>
+            </div>
+          </dl>
+          <div part="total">
+            <span>Estimated Total</span>
+            <span>${subtotal}</span>
+          </div>
+          <div part="actions">
+            <a part="checkout" class="btn btn-primary" href="/checkout" data-testid="checkout-btn"
+              ><slot name="checkout-label">Proceed to Checkout</slot></a
+            >
+            <a part="continue" class="btn btn-secondary" href="/products">Continue Shopping</a>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+
+export {
+  NymbalCartPage
+};
+//# sourceMappingURL=chunk-VTQVGNVC.js.map

package/dist/chunk-VTQVGNVC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/cart-page.ts"],"sourcesContent":["import { css, html, nothing } from 'lit'\nimport type { CartItem } from '@nymbalhq/types'\nimport { baseStyles, NymbalElement, propertiesOf, type ElementSchema } from '../base-element.js'\nimport { formatPrice } from '../format.js'\nimport { shownCart } from '../cart-projection.js'\nimport { NymbalQuantitySelector } from './quantity-selector.js'\nimport { buttonStyles } from '../view-styles.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-cart-page',\n  reactName: 'CartPage',\n  // The cart a server read (cart-projection.ts), shown until the cart store settles.\n  attributes: [{ name: 'cart', prop: 'cart', type: 'json' }],\n  events: [],\n  parts: [\n    'loading',\n    'empty',\n    'empty-title',\n    'empty-text',\n    'continue',\n    'layout',\n    'header',\n    'title',\n    'count',\n    'items',\n    'item',\n    'item-image',\n    'item-info',\n    'item-name',\n    'item-variant',\n    'item-price',\n    'item-remove',\n    'item-qty',\n    'item-total',\n    'summary',\n    'summary-title',\n    'summary-row',\n    'subtotal',\n    'total',\n    'actions',\n    'checkout',\n  ],\n  slots: ['title', 'empty', 'checkout-label'],\n  children: false,\n}\n\n/** The cart as a page: its lines, quantities and removal, and a summary whose subtotal is the API's. */\nexport class NymbalCartPage extends NymbalElement {\n  static override schema = SCHEMA\n  static uses = [NymbalQuantitySelector]\n  static override properties = propertiesOf(SCHEMA)\n  static override styles = [\n    baseStyles,\n    buttonStyles,\n    css`\n      :host {\n        display: block;\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n        color: var(--nymbal-color-text, #18181b);\n      }\n      [part~='loading'],\n      [part~='empty'] {\n        padding: 4rem var(--nymbal-spacing-md, 1rem);\n        text-align: center;\n      }\n      /* Until the cart is known the page keeps what follows it below the fold, so a cart with lines does not push\n         the footer down as it arrives. */\n      [part~='loading'] {\n        min-height: 100vh;\n      }\n      [part~='empty-title'] {\n        margin: 0 0 var(--nymbal-spacing-xs, 0.25rem);\n        font-size: var(--nymbal-font-size-lg, 1.125rem);\n        font-weight: var(--nymbal-font-weight-medium, 500);\n      }\n      [part~='empty-text'] {\n        margin: 0 0 var(--nymbal-spacing-lg, 1.5rem);\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='layout'] {\n        display: grid;\n        grid-template-columns: 1fr;\n        gap: var(--nymbal-spacing-xl, 2rem);\n      }\n      @media (min-width: 769px) {\n        [part~='layout'] {\n          grid-template-columns: 1fr 360px;\n          align-items: start;\n        }\n      }\n      [part~='header'] {\n        margin-bottom: var(--nymbal-spacing-lg, 1.5rem);\n      }\n      [part~='title'] {\n        margin: 0;\n        font-size: 1.5rem;\n        font-weight: var(--nymbal-font-weight-bold, 700);\n        color: var(--nymbal-color-primary, #18181b);\n      }\n      [part~='count'] {\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        font-weight: var(--nymbal-font-weight-normal, 400);\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='items'] {\n        display: flex;\n        flex-direction: column;\n      }\n      [part~='item'] {\n        display: grid;\n        grid-template-columns: 80px 1fr auto;\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        align-items: start;\n      }\n      [part~='item']:first-child {\n        border-top: 1px solid var(--nymbal-color-border, #e4e4e7);\n      }\n      @media (min-width: 641px) {\n        [part~='item'] {\n          grid-template-columns: 100px 1fr auto auto;\n          gap: var(--nymbal-spacing-lg, 1.5rem);\n          align-items: center;\n        }\n      }\n      [part~='item-image'] {\n        display: block;\n        width: 100%;\n        aspect-ratio: 1 / 1;\n        object-fit: cover;\n        border-radius: var(--nymbal-radius-md, 0.5rem);\n        background-color: #f4f4f5;\n      }\n      [part~='item-info'] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--nymbal-spacing-xs, 0.25rem);\n        min-width: 0;\n      }\n      [part~='item-name'] {\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        font-weight: var(--nymbal-font-weight-medium, 500);\n        color: var(--nymbal-color-text, #18181b);\n        text-decoration: none;\n      }\n      [part~='item-name']:hover {\n        color: var(--nymbal-color-accent, #2563eb);\n      }\n      [part~='item-variant'],\n      [part~='item-price'] {\n        font-size: var(--nymbal-font-size-xs, 0.75rem);\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='item-remove'] {\n        align-self: start;\n        padding: 0;\n        font: inherit;\n        font-size: var(--nymbal-font-size-xs, 0.75rem);\n        color: var(--nymbal-color-text-muted, #71717a);\n        background: none;\n        border: none;\n        text-decoration: underline;\n        cursor: pointer;\n      }\n      [part~='item-remove']:hover {\n        color: var(--nymbal-color-error, #dc2626);\n      }\n      [part~='item-total'] {\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n        text-align: right;\n        white-space: nowrap;\n      }\n      [part~='summary'] {\n        position: sticky;\n        top: 80px;\n        padding: var(--nymbal-spacing-lg, 1.5rem);\n        background-color: #fafafa;\n        border: 1px solid var(--nymbal-color-border, #e4e4e7);\n        border-radius: var(--nymbal-radius-lg, 0.75rem);\n      }\n      [part~='summary-title'] {\n        margin: 0 0 var(--nymbal-spacing-md, 1rem);\n        padding-bottom: var(--nymbal-spacing-md, 1rem);\n        font-size: var(--nymbal-font-size-lg, 1.125rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n        border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);\n      }\n      dl {\n        margin: 0;\n      }\n      dd {\n        margin: 0;\n        font-weight: var(--nymbal-font-weight-medium, 500);\n      }\n      [part~='summary-row'] {\n        display: flex;\n        justify-content: space-between;\n        padding: var(--nymbal-spacing-xs, 0.25rem) 0;\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n      }\n      [part~='summary-row'] dt {\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='total'] {\n        display: flex;\n        justify-content: space-between;\n        margin-top: var(--nymbal-spacing-md, 1rem);\n        padding-top: var(--nymbal-spacing-md, 1rem);\n        font-size: var(--nymbal-font-size-lg, 1.125rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n        border-top: 1px solid var(--nymbal-color-border, #e4e4e7);\n      }\n      [part~='actions'] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--nymbal-spacing-sm, 0.5rem);\n        margin-top: var(--nymbal-spacing-lg, 1.5rem);\n      }\n    `,\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  /** The first line's image is at the top of the page and is often its LCP, so only the lines below it load lazily. */\n  private renderLine(item: CartItem, currency: string, index: number) {\n    return html`\n      <div part=\"item\" data-testid=\"cart-item-${item.variantId}\">\n        ${item.imageUrl\n          ? html`<img\n              part=\"item-image\"\n              src=${item.imageUrl}\n              alt=${item.productName}\n              width=\"100\"\n              height=\"100\"\n              loading=${index === 0 ? 'eager' : 'lazy'}\n            />`\n          : html`<div part=\"item-image\" aria-hidden=\"true\"></div>`}\n        <div part=\"item-info\">\n          <a part=\"item-name\" href=\"/product/${encodeURIComponent(item.productId)}\"\n            >${item.productName}</a\n          >\n          ${item.variantName ? html`<span part=\"item-variant\">${item.variantName}</span>` : nothing}\n          <span part=\"item-price\">${formatPrice(item.priceMinor, currency)} each</span>\n          <button\n            type=\"button\"\n            part=\"item-remove\"\n            data-testid=\"cart-remove-${item.variantId}\"\n            aria-label=\"Remove ${item.productName} from cart\"\n            @click=${() => void this.client.cart.removeItem(item.variantId)}\n          >\n            Remove\n          </button>\n        </div>\n        <div part=\"item-qty\">\n          <nymbal-quantity-selector\n            value=${item.qty}\n            min=\"1\"\n            max=\"99\"\n            @nymbal:quantity:changed=${(e: CustomEvent<{ value: number }>) =>\n              void this.client.cart.updateQuantity(item.variantId, e.detail.value)}\n          ></nymbal-quantity-selector>\n        </div>\n        <span part=\"item-total\">${formatPrice(item.priceMinor * item.qty, currency)}</span>\n      </div>\n    `\n  }\n\n  protected override render() {\n    const state = shownCart(this, this.cart, this.readsStores ? this.client : null)\n    const { items } = state\n    const currency = state.currency || 'GBP'\n\n    if (state.loading && items.length === 0) {\n      return html`<div part=\"loading\" role=\"status\">Loading your cart...</div>`\n    }\n    if (items.length === 0) {\n      return html`\n        <div part=\"empty\">\n          <slot name=\"empty\">\n            <h1 part=\"empty-title\">Your cart is empty</h1>\n            <p part=\"empty-text\">Looks like you haven't added anything yet.</p>\n          </slot>\n          <a part=\"continue\" class=\"btn btn-primary\" href=\"/products\" data-testid=\"continue-shopping\"\n            >Continue Shopping</a\n          >\n        </div>\n      `\n    }\n\n    const subtotal = formatPrice(state.subtotalMinor, currency)\n    return html`\n      <div part=\"layout\">\n        <div>\n          <div part=\"header\">\n            <h1 part=\"title\">\n              <slot name=\"title\">Your Cart</slot>\n              <span part=\"count\">(${items.length} ${items.length === 1 ? 'item' : 'items'})</span>\n            </h1>\n          </div>\n          <div part=\"items\" data-testid=\"cart-items\">\n            ${items.map((item, index) => this.renderLine(item, currency, index))}\n          </div>\n        </div>\n        <div part=\"summary\" data-testid=\"cart-summary\">\n          <h2 part=\"summary-title\">Order Summary</h2>\n          <dl>\n            <div part=\"summary-row subtotal\">\n              <dt>Subtotal</dt>\n              <dd>${subtotal}</dd>\n            </div>\n            <div part=\"summary-row\">\n              <dt>Shipping</dt>\n              <dd>Calculated at checkout</dd>\n            </div>\n          </dl>\n          <div part=\"total\">\n            <span>Estimated Total</span>\n            <span>${subtotal}</span>\n          </div>\n          <div part=\"actions\">\n            <a part=\"checkout\" class=\"btn btn-primary\" href=\"/checkout\" data-testid=\"checkout-btn\"\n              ><slot name=\"checkout-label\">Proceed to Checkout</slot></a\n            >\n            <a part=\"continue\" class=\"btn btn-secondary\" href=\"/products\">Continue Shopping</a>\n          </div>\n        </div>\n      </div>\n    `\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-W23P7SI4.js

@@ -0,0 +1,239 @@
+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/site-header.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-site-header",
+  reactName: "SiteHeader",
+  attributes: [
+    { name: "links", prop: "links", type: "json" },
+    { name: "logo", prop: "logo", type: "string" },
+    { name: "account-href", prop: "accountHref", type: "string" }
+  ],
+  events: [],
+  parts: ["header", "logo", "nav", "link", "account", "toggle", "actions"],
+  // The page's own search bar and mini-cart, light-DOM children with `slot="search"` and `slot="cart"`.
+  slots: ["search", "cart"],
+  children: true
+};
+var NymbalSiteHeader = class extends NymbalElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    css`
+      :host {
+        display: block;
+        position: sticky;
+        top: 0;
+        z-index: var(--nymbal-z-dropdown, 100);
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+      }
+      [part~='header'] {
+        background-color: var(--nymbal-color-surface, #ffffff);
+        border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);
+      }
+      .inner {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--nymbal-spacing-md, 1rem);
+        max-width: 72rem;
+        margin-inline: auto;
+        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);
+      }
+      [part~='logo'] {
+        flex-shrink: 0;
+        font-size: var(--nymbal-font-size-lg, 1.125rem);
+        font-weight: var(--nymbal-font-weight-bold, 700);
+        letter-spacing: -0.02em;
+        color: var(--nymbal-color-primary, #18181b);
+        text-decoration: none;
+      }
+      [part~='logo']:hover {
+        color: var(--nymbal-color-accent, #2563eb);
+      }
+      .toggle-input {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        white-space: nowrap;
+      }
+      [part~='toggle'] {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 4px;
+        width: 28px;
+        height: 28px;
+        margin-left: auto;
+        padding: 2px;
+        cursor: pointer;
+      }
+      .line {
+        display: block;
+        width: 100%;
+        height: 2px;
+        border-radius: 1px;
+        background-color: var(--nymbal-color-primary, #18181b);
+        transition:
+          transform var(--nymbal-transition-fast, 150ms ease),
+          opacity var(--nymbal-transition-fast, 150ms ease);
+      }
+      .toggle-input:checked ~ [part~='toggle'] .line:nth-child(1) {
+        transform: translateY(6px) rotate(45deg);
+      }
+      .toggle-input:checked ~ [part~='toggle'] .line:nth-child(2) {
+        opacity: 0;
+      }
+      .toggle-input:checked ~ [part~='toggle'] .line:nth-child(3) {
+        transform: translateY(-6px) rotate(-45deg);
+      }
+      .menu {
+        display: none;
+        flex-direction: column;
+        gap: var(--nymbal-spacing-md, 1rem);
+        width: 100%;
+        padding-block: var(--nymbal-spacing-sm, 0.5rem);
+      }
+      .toggle-input:checked ~ .menu {
+        display: flex;
+      }
+      [part~='nav'] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--nymbal-spacing-xs, 0.25rem);
+      }
+      [part~='link'] {
+        display: block;
+        padding: var(--nymbal-spacing-xs, 0.25rem) var(--nymbal-spacing-sm, 0.5rem);
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        font-weight: var(--nymbal-font-weight-medium, 500);
+        color: var(--nymbal-color-text, #18181b);
+        text-decoration: none;
+        border-radius: var(--nymbal-radius-sm, 0.25rem);
+        transition:
+          background-color var(--nymbal-transition-fast, 150ms ease),
+          color var(--nymbal-transition-fast, 150ms ease);
+      }
+      [part~='link']:hover,
+      [part~='account']:hover {
+        background-color: var(--nymbal-color-border, #e4e4e7);
+        color: var(--nymbal-color-accent, #2563eb);
+      }
+      [part~='actions'] {
+        display: flex;
+        align-items: center;
+        gap: var(--nymbal-spacing-sm, 0.5rem);
+      }
+      [part~='account'] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        color: var(--nymbal-color-text, #18181b);
+        text-decoration: none;
+        border-radius: var(--nymbal-radius-full, 9999px);
+      }
+      @media (min-width: 641px) {
+        .inner {
+          padding-inline: var(--nymbal-spacing-lg, 1.5rem);
+        }
+      }
+      @media (min-width: 769px) {
+        [part~='toggle'] {
+          display: none;
+        }
+        .inner {
+          flex-wrap: nowrap;
+          padding-block: var(--nymbal-spacing-md, 1rem);
+        }
+        .menu {
+          display: flex;
+          flex: 1;
+          flex-direction: row;
+          align-items: center;
+          justify-content: space-between;
+          width: auto;
+          gap: var(--nymbal-spacing-lg, 1.5rem);
+          padding-block: 0;
+        }
+        [part~='nav'] {
+          flex-direction: row;
+        }
+      }
+    `
+  ];
+  render() {
+    const links = parsedJson(this, "links", this.links);
+    return html`
+      <header part="header" data-testid="site-header">
+        <div class="inner">
+          ${this.logo === void 0 ? nothing : html`<a part="logo" href="/" @click=${navigateOnClick}>${this.logo}</a>`}
+          <input
+            type="checkbox"
+            id="nav-toggle"
+            class="toggle-input"
+            aria-label="Toggle navigation"
+          />
+          <label part="toggle" for="nav-toggle" aria-hidden="true">
+            <span class="line"></span>
+            <span class="line"></span>
+            <span class="line"></span>
+          </label>
+          <div class="menu">
+            <nav part="nav" aria-label="Main navigation">
+              ${(Array.isArray(links) ? links : []).map(
+      (link) => html`<a part="link" href=${link.href} @click=${navigateOnClick}
+                    >${link.label}</a
+                  >`
+    )}
+            </nav>
+            <div part="actions">
+              <slot name="search"></slot>
+              ${this.accountHref === void 0 ? nothing : html`<a
+                    part="account"
+                    href=${this.accountHref}
+                    aria-label="Account"
+                    @click=${navigateOnClick}
+                  >
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      aria-hidden="true"
+                    >
+                      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                      <circle cx="12" cy="7" r="4" />
+                    </svg>
+                  </a>`}
+              <slot name="cart"></slot>
+            </div>
+          </div>
+        </div>
+      </header>
+    `;
+  }
+};
+
+export {
+  NymbalSiteHeader
+};
+//# sourceMappingURL=chunk-W23P7SI4.js.map

package/dist/chunk-W23P7SI4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/site-header.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-site-header',\n  reactName: 'SiteHeader',\n  attributes: [\n    { name: 'links', prop: 'links', type: 'json' },\n    { name: 'logo', prop: 'logo', type: 'string' },\n    { name: 'account-href', prop: 'accountHref', type: 'string' },\n  ],\n  events: [],\n  parts: ['header', 'logo', 'nav', 'link', 'account', 'toggle', 'actions'],\n  // The page's own search bar and mini-cart, light-DOM children with `slot=\"search\"` and `slot=\"cart\"`.\n  slots: ['search', 'cart'],\n  children: true,\n}\n\ninterface Link {\n  label: string\n  href: string\n}\n\n/**\n * The store's header: the logo, the navigation (behind a toggle on a narrow screen, with no script needed), the\n * account link, and the page's search bar and mini-cart in its `search` and `cart` slots.\n */\nexport class NymbalSiteHeader 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        position: sticky;\n        top: 0;\n        z-index: var(--nymbal-z-dropdown, 100);\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n      }\n      [part~='header'] {\n        background-color: var(--nymbal-color-surface, #ffffff);\n        border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);\n      }\n      .inner {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: var(--nymbal-spacing-md, 1rem);\n        max-width: 72rem;\n        margin-inline: auto;\n        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);\n      }\n      [part~='logo'] {\n        flex-shrink: 0;\n        font-size: var(--nymbal-font-size-lg, 1.125rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n        letter-spacing: -0.02em;\n        color: var(--nymbal-color-primary, #18181b);\n        text-decoration: none;\n      }\n      [part~='logo']:hover {\n        color: var(--nymbal-color-accent, #2563eb);\n      }\n      .toggle-input {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        overflow: hidden;\n        clip: rect(0 0 0 0);\n        white-space: nowrap;\n      }\n      [part~='toggle'] {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        gap: 4px;\n        width: 28px;\n        height: 28px;\n        margin-left: auto;\n        padding: 2px;\n        cursor: pointer;\n      }\n      .line {\n        display: block;\n        width: 100%;\n        height: 2px;\n        border-radius: 1px;\n        background-color: var(--nymbal-color-primary, #18181b);\n        transition:\n          transform var(--nymbal-transition-fast, 150ms ease),\n          opacity var(--nymbal-transition-fast, 150ms ease);\n      }\n      .toggle-input:checked ~ [part~='toggle'] .line:nth-child(1) {\n        transform: translateY(6px) rotate(45deg);\n      }\n      .toggle-input:checked ~ [part~='toggle'] .line:nth-child(2) {\n        opacity: 0;\n      }\n      .toggle-input:checked ~ [part~='toggle'] .line:nth-child(3) {\n        transform: translateY(-6px) rotate(-45deg);\n      }\n      .menu {\n        display: none;\n        flex-direction: column;\n        gap: var(--nymbal-spacing-md, 1rem);\n        width: 100%;\n        padding-block: var(--nymbal-spacing-sm, 0.5rem);\n      }\n      .toggle-input:checked ~ .menu {\n        display: flex;\n      }\n      [part~='nav'] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--nymbal-spacing-xs, 0.25rem);\n      }\n      [part~='link'] {\n        display: block;\n        padding: var(--nymbal-spacing-xs, 0.25rem) var(--nymbal-spacing-sm, 0.5rem);\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        font-weight: var(--nymbal-font-weight-medium, 500);\n        color: var(--nymbal-color-text, #18181b);\n        text-decoration: none;\n        border-radius: var(--nymbal-radius-sm, 0.25rem);\n        transition:\n          background-color var(--nymbal-transition-fast, 150ms ease),\n          color var(--nymbal-transition-fast, 150ms ease);\n      }\n      [part~='link']:hover,\n      [part~='account']:hover {\n        background-color: var(--nymbal-color-border, #e4e4e7);\n        color: var(--nymbal-color-accent, #2563eb);\n      }\n      [part~='actions'] {\n        display: flex;\n        align-items: center;\n        gap: var(--nymbal-spacing-sm, 0.5rem);\n      }\n      [part~='account'] {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 36px;\n        height: 36px;\n        color: var(--nymbal-color-text, #18181b);\n        text-decoration: none;\n        border-radius: var(--nymbal-radius-full, 9999px);\n      }\n      @media (min-width: 641px) {\n        .inner {\n          padding-inline: var(--nymbal-spacing-lg, 1.5rem);\n        }\n      }\n      @media (min-width: 769px) {\n        [part~='toggle'] {\n          display: none;\n        }\n        .inner {\n          flex-wrap: nowrap;\n          padding-block: var(--nymbal-spacing-md, 1rem);\n        }\n        .menu {\n          display: flex;\n          flex: 1;\n          flex-direction: row;\n          align-items: center;\n          justify-content: space-between;\n          width: auto;\n          gap: var(--nymbal-spacing-lg, 1.5rem);\n          padding-block: 0;\n        }\n        [part~='nav'] {\n          flex-direction: row;\n        }\n      }\n    `,\n  ]\n\n  declare links: unknown\n  declare logo: string | undefined\n  declare accountHref: string | undefined\n\n  protected override render() {\n    const links = parsedJson<Link[]>(this, 'links', this.links)\n    return html`\n      <header part=\"header\" data-testid=\"site-header\">\n        <div class=\"inner\">\n          ${this.logo === undefined\n            ? nothing\n            : html`<a part=\"logo\" href=\"/\" @click=${navigateOnClick}>${this.logo}</a>`}\n          <input\n            type=\"checkbox\"\n            id=\"nav-toggle\"\n            class=\"toggle-input\"\n            aria-label=\"Toggle navigation\"\n          />\n          <label part=\"toggle\" for=\"nav-toggle\" aria-hidden=\"true\">\n            <span class=\"line\"></span>\n            <span class=\"line\"></span>\n            <span class=\"line\"></span>\n          </label>\n          <div class=\"menu\">\n            <nav part=\"nav\" aria-label=\"Main navigation\">\n              ${(Array.isArray(links) ? links : []).map(\n                (link) =>\n                  html`<a part=\"link\" href=${link.href} @click=${navigateOnClick}\n                    >${link.label}</a\n                  >`,\n              )}\n            </nav>\n            <div part=\"actions\">\n              <slot name=\"search\"></slot>\n              ${this.accountHref === undefined\n                ? nothing\n                : html`<a\n                    part=\"account\"\n                    href=${this.accountHref}\n                    aria-label=\"Account\"\n                    @click=${navigateOnClick}\n                  >\n                    <svg\n                      width=\"20\"\n                      height=\"20\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" />\n                      <circle cx=\"12\" cy=\"7\" r=\"4\" />\n                    </svg>\n                  </a>`}\n              <slot name=\"cart\"></slot>\n            </div>\n          </div>\n        </div>\n      </header>\n    `\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,KAAK,MAAM,eAAe;AAUnC,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA,EACX,YAAY;AAAA,IACV,EAAE,MAAM,SAAS,MAAM,SAAS,MAAM,OAAO;AAAA,IAC7C,EAAE,MAAM,QAAQ,MAAM,QAAQ,MAAM,SAAS;AAAA,IAC7C,EAAE,MAAM,gBAAgB,MAAM,eAAe,MAAM,SAAS;AAAA,EAC9D;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,OAAO,CAAC,UAAU,QAAQ,OAAO,QAAQ,WAAW,UAAU,SAAS;AAAA;AAAA,EAEvE,OAAO,CAAC,UAAU,MAAM;AAAA,EACxB,UAAU;AACZ;AAWO,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;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;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;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,EAiJF;AAAA,EAMmB,SAAS;AAC1B,UAAM,QAAQ,WAAmB,MAAM,SAAS,KAAK,KAAK;AAC1D,WAAO;AAAA;AAAA;AAAA,YAGC,KAAK,SAAS,SACZ,UACA,sCAAsC,eAAe,IAAI,KAAK,IAAI,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAcrE,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,GAAG;AAAA,MACpC,CAAC,SACC,2BAA2B,KAAK,IAAI,WAAW,eAAe;AAAA,uBACzD,KAAK,KAAK;AAAA;AAAA,IAEnB,CAAC;AAAA;AAAA;AAAA;AAAA,gBAIC,KAAK,gBAAgB,SACnB,UACA;AAAA;AAAA,2BAES,KAAK,WAAW;AAAA;AAAA,6BAEd,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAgBrB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOrB;AACF;","names":[]}