@nymbalhq/web-components 1.0.0 → 1.2.0

package/dist/chunk-RZVFA3N5.js

@@ -0,0 +1,154 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  formatPrice
+} from "./chunk-RVSKX2RX.js";
+import {
+  navigateOnClick
+} from "./chunk-LO2EW5YP.js";
+import {
+  NymbalElement,
+  baseStyles,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/product-card.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-product-card",
+  reactName: "ProductCard",
+  // `eager`: the card is in a grid's first row, so its image is the page's likely LCP and is fetched at once.
+  attributes: [
+    { name: "product", prop: "product", type: "json" },
+    { name: "eager", prop: "eager", type: "boolean" }
+  ],
+  events: [],
+  parts: ["card", "media", "image", "body", "name", "price"],
+  slots: [],
+  children: false
+};
+function cardImageOf(p) {
+  if (typeof p.imageUrl === "string" && p.imageUrl !== "") return { url: p.imageUrl, alt: p.name };
+  const media = p.media?.find((m) => typeof m.url === "string" && m.url !== "");
+  if (media !== void 0) return { url: media.url, alt: media.alt ?? p.name };
+  return { url: `https://picsum.photos/seed/${encodeURIComponent(p.slug)}/600/600`, alt: p.name };
+}
+function cardProductOf(p) {
+  const list = Array.isArray(p.media) ? p.media : [];
+  const media = list.find((m) => typeof m.url === "string" && m.url !== "");
+  const image = typeof p.imageUrl === "string" && p.imageUrl !== "" ? { imageUrl: p.imageUrl } : media === void 0 ? {} : { media: [{ url: media.url, ...media.alt !== void 0 && { alt: media.alt } }] };
+  return {
+    slug: p.slug,
+    name: p.name,
+    priceMinor: p.priceMinor ?? null,
+    priceRange: p.priceRange ?? null,
+    currency: p.currency ?? null,
+    ...image
+  };
+}
+function parse(raw) {
+  if (raw === void 0 || raw === "") return null;
+  try {
+    const value = JSON.parse(raw);
+    return value !== null && typeof value.slug === "string" ? value : null;
+  } catch {
+    console.warn("[nymbal-product-card] the product attribute is not JSON", raw);
+    return null;
+  }
+}
+function priceOf(p) {
+  const from = p.priceRange?.minMinor ?? p.priceMinor;
+  return from == null ? null : formatPrice(from, p.currency ?? "GBP");
+}
+var NymbalProductCard = 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~='card'] {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        color: var(--nymbal-color-text, #18181b);
+        text-decoration: none;
+        border: 1px solid var(--nymbal-color-border, #e4e4e7);
+        border-radius: var(--nymbal-radius-lg, 0.75rem);
+        overflow: hidden;
+        background: var(--nymbal-color-surface, #ffffff);
+        transition: box-shadow var(--nymbal-transition-fast, 150ms ease);
+      }
+      [part~='card']:hover {
+        box-shadow: var(--nymbal-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07));
+      }
+      [part~='card']:focus-visible {
+        outline: 2px solid var(--nymbal-color-accent, #2563eb);
+        outline-offset: 2px;
+      }
+      [part~='media'] {
+        aspect-ratio: 1 / 1;
+        background: #f4f4f5;
+      }
+      [part~='image'] {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      [part~='body'] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--nymbal-spacing-xs, 0.25rem);
+        padding: var(--nymbal-spacing-md, 1rem);
+      }
+      [part~='name'] {
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        font-weight: var(--nymbal-font-weight-medium, 500);
+      }
+      [part~='price'] {
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        font-weight: var(--nymbal-font-weight-bold, 700);
+      }
+    `
+  ];
+  render() {
+    const p = parse(this.product);
+    if (p === null) return nothing;
+    const image = cardImageOf(p);
+    const price = priceOf(p);
+    return html`
+      <a
+        part="card"
+        href="/product/${encodeURIComponent(p.slug)}"
+        data-testid="product-card-${p.slug}"
+        @click=${navigateOnClick}
+      >
+        <div part="media">
+          <img
+            part="image"
+            src=${image.url}
+            alt=${image.alt}
+            loading=${this.eager === true ? "eager" : "lazy"}
+            fetchpriority=${this.eager === true ? "high" : nothing}
+            width="600"
+            height="600"
+          />
+        </div>
+        <div part="body">
+          <span part="name">${p.name}</span>
+          ${price === null ? nothing : html`<span part="price">${price}</span>`}
+        </div>
+      </a>
+    `;
+  }
+};
+
+export {
+  cardImageOf,
+  cardProductOf,
+  NymbalProductCard
+};
+//# sourceMappingURL=chunk-RZVFA3N5.js.map

package/dist/chunk-RZVFA3N5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/product-card.ts"],"sourcesContent":["import { css, html, nothing } from 'lit'\nimport { baseStyles, NymbalElement, propertiesOf, type ElementSchema } from '../base-element.js'\nimport { formatPrice } from '../format.js'\nimport { navigateOnClick } from '../navigate.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-product-card',\n  reactName: 'ProductCard',\n  // `eager`: the card is in a grid's first row, so its image is the page's likely LCP and is fetched at once.\n  attributes: [\n    { name: 'product', prop: 'product', type: 'json' },\n    { name: 'eager', prop: 'eager', type: 'boolean' },\n  ],\n  events: [],\n  parts: ['card', 'media', 'image', 'body', 'name', 'price'],\n  slots: [],\n  children: false,\n}\n\n/** The fields a card reads; a search result or a listing product carries them. */\nexport interface CardProduct {\n  slug: string\n  name: string\n  priceMinor?: number | null\n  priceRange?: { minMinor: number; maxMinor: number } | null\n  currency?: string | null\n  imageUrl?: string | null\n  media?: Array<{ url?: string; alt?: string }>\n}\n\n/**\n * The product's own image, else a placeholder seeded by its slug so a card without media keeps its shape. Exported so\n * a page preloads exactly the image its first card requests.\n */\nexport function cardImageOf(p: CardProduct): { url: string; alt: string } {\n  if (typeof p.imageUrl === 'string' && p.imageUrl !== '') return { url: p.imageUrl, alt: p.name }\n  const media = p.media?.find((m) => typeof m.url === 'string' && m.url !== '')\n  if (media !== undefined) return { url: media.url!, alt: media.alt ?? p.name }\n  return { url: `https://picsum.photos/seed/${encodeURIComponent(p.slug)}/600/600`, alt: p.name }\n}\n\n/**\n * A product as a card reads it, and nothing else: a listing's products carry their variants, descriptions and\n * categories, which a page of cards would otherwise put in its HTML once per card.\n */\nexport function cardProductOf(p: Omit<CardProduct, 'media'> & { media?: unknown }): CardProduct {\n  const list = Array.isArray(p.media) ? (p.media as NonNullable<CardProduct['media']>) : []\n  const media = list.find((m) => typeof m.url === 'string' && m.url !== '')\n  const image =\n    typeof p.imageUrl === 'string' && p.imageUrl !== ''\n      ? { imageUrl: p.imageUrl }\n      : media === undefined\n        ? {}\n        : { media: [{ url: media.url!, ...(media.alt !== undefined && { alt: media.alt }) }] }\n  return {\n    slug: p.slug,\n    name: p.name,\n    priceMinor: p.priceMinor ?? null,\n    priceRange: p.priceRange ?? null,\n    currency: p.currency ?? null,\n    ...image,\n  }\n}\n\nfunction parse(raw: string | undefined): CardProduct | null {\n  if (raw === undefined || raw === '') return null\n  try {\n    const value = JSON.parse(raw) as Partial<CardProduct> | null\n    return value !== null && typeof value.slug === 'string' ? (value as CardProduct) : null\n  } catch {\n    console.warn('[nymbal-product-card] the product attribute is not JSON', raw)\n    return null\n  }\n}\n\n/** The \"from\" price, which the price sorts order by: the cheapest variant's when the product has a range. */\nfunction priceOf(p: CardProduct): string | null {\n  const from = p.priceRange?.minMinor ?? p.priceMinor\n  return from == null ? null : formatPrice(from, p.currency ?? 'GBP')\n}\n\n/** One product as a link to its page: image, name and price. */\nexport class NymbalProductCard 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~='card'] {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        color: var(--nymbal-color-text, #18181b);\n        text-decoration: none;\n        border: 1px solid var(--nymbal-color-border, #e4e4e7);\n        border-radius: var(--nymbal-radius-lg, 0.75rem);\n        overflow: hidden;\n        background: var(--nymbal-color-surface, #ffffff);\n        transition: box-shadow var(--nymbal-transition-fast, 150ms ease);\n      }\n      [part~='card']:hover {\n        box-shadow: var(--nymbal-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07));\n      }\n      [part~='card']:focus-visible {\n        outline: 2px solid var(--nymbal-color-accent, #2563eb);\n        outline-offset: 2px;\n      }\n      [part~='media'] {\n        aspect-ratio: 1 / 1;\n        background: #f4f4f5;\n      }\n      [part~='image'] {\n        display: block;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n      [part~='body'] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--nymbal-spacing-xs, 0.25rem);\n        padding: var(--nymbal-spacing-md, 1rem);\n      }\n      [part~='name'] {\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        font-weight: var(--nymbal-font-weight-medium, 500);\n      }\n      [part~='price'] {\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n      }\n    `,\n  ]\n\n  declare product: string | undefined\n  declare eager: boolean | undefined\n\n  protected override render() {\n    const p = parse(this.product)\n    if (p === null) return nothing\n    const image = cardImageOf(p)\n    const price = priceOf(p)\n    return html`\n      <a\n        part=\"card\"\n        href=\"/product/${encodeURIComponent(p.slug)}\"\n        data-testid=\"product-card-${p.slug}\"\n        @click=${navigateOnClick}\n      >\n        <div part=\"media\">\n          <img\n            part=\"image\"\n            src=${image.url}\n            alt=${image.alt}\n            loading=${this.eager === true ? 'eager' : 'lazy'}\n            fetchpriority=${this.eager === true ? 'high' : nothing}\n            width=\"600\"\n            height=\"600\"\n          />\n        </div>\n        <div part=\"body\">\n          <span part=\"name\">${p.name}</span>\n          ${price === null ? nothing : html`<span part=\"price\">${price}</span>`}\n        </div>\n      </a>\n    `\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-SM7TASEW.js

@@ -0,0 +1,135 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  formatPrice
+} from "./chunk-RVSKX2RX.js";
+import {
+  NymbalElement,
+  baseStyles,
+  parsedJson,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/order-summary.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-order-summary",
+  reactName: "OrderSummary",
+  // An order's lines and money as `GET /api/orders/:n` serves them; the element adds nothing up itself.
+  attributes: [
+    { name: "items", prop: "items", type: "json" },
+    { name: "subtotal-minor", prop: "subtotalMinor", type: "number" },
+    { name: "discount-minor", prop: "discountMinor", type: "number" },
+    { name: "shipping-minor", prop: "shippingMinor", type: "number" },
+    { name: "tax-minor", prop: "taxMinor", type: "number" },
+    { name: "total-minor", prop: "totalMinor", type: "number" },
+    { name: "currency", prop: "currency", type: "string" }
+  ],
+  events: [],
+  parts: ["summary", "line", "totals", "subtotal", "discount", "shipping", "tax", "total"],
+  slots: [],
+  children: false
+};
+var known = (n) => n !== void 0 && !Number.isNaN(n);
+var NymbalOrderSummary = 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);
+        color: var(--nymbal-color-text, #18181b);
+      }
+      [part~='summary'] {
+        padding: var(--nymbal-spacing-lg, 1.5rem);
+        background-color: var(--nymbal-color-surface, #ffffff);
+        border: 1px solid var(--nymbal-color-border, #e4e4e7);
+        border-radius: var(--nymbal-radius-lg, 0.75rem);
+      }
+      h2 {
+        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);
+      }
+      ul {
+        margin: 0 0 var(--nymbal-spacing-md, 1rem);
+        padding: 0;
+        list-style: none;
+      }
+      [part~='line'],
+      [part~='subtotal'],
+      [part~='discount'],
+      [part~='shipping'],
+      [part~='tax'],
+      [part~='total'] {
+        display: flex;
+        justify-content: space-between;
+        gap: var(--nymbal-spacing-md, 1rem);
+        padding-block: var(--nymbal-spacing-xs, 0.25rem);
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+      }
+      .qty {
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='totals'] {
+        margin: 0;
+        padding-top: var(--nymbal-spacing-sm, 0.5rem);
+        border-top: 1px solid var(--nymbal-color-border, #e4e4e7);
+      }
+      dt,
+      dd {
+        margin: 0;
+      }
+      [part~='discount'] dd {
+        color: var(--nymbal-color-success, #16a34a);
+      }
+      [part~='total'] {
+        margin-top: var(--nymbal-spacing-sm, 0.5rem);
+        padding-top: var(--nymbal-spacing-sm, 0.5rem);
+        border-top: 1px solid var(--nymbal-color-border, #e4e4e7);
+        font-size: var(--nymbal-font-size-base, 1rem);
+        font-weight: var(--nymbal-font-weight-bold, 700);
+      }
+    `
+  ];
+  render() {
+    const lines = parsedJson(this, "items", this.items);
+    const money = (minor) => formatPrice(minor, this.currency ?? "GBP");
+    const row = (part, label, minor, shown = money) => known(minor) ? html`<div part=${part}>
+            <dt>${label}</dt>
+            <dd>${shown(minor)}</dd>
+          </div>` : nothing;
+    return html`
+      <section part="summary" data-testid="order-summary">
+        <h2>Order Summary</h2>
+        <ul>
+          ${(Array.isArray(lines) ? lines : []).map(
+      (line) => html`
+              <li part="line">
+                <span>${line.name} <span class="qty">&times; ${line.qty}</span></span>
+                <span>${money(line.lineTotalMinor)}</span>
+              </li>
+            `
+    )}
+        </ul>
+        <dl part="totals">
+          ${row("subtotal", "Subtotal", this.subtotalMinor)}
+          ${known(this.discountMinor) && this.discountMinor !== 0 ? row("discount", "Discount", this.discountMinor, (m) => `\u2212${money(m)}`) : nothing}
+          ${row("shipping", "Shipping", this.shippingMinor, (m) => m === 0 ? "Free" : money(m))}
+          ${row("tax", "Tax", this.taxMinor)}
+        </dl>
+        ${known(this.totalMinor) ? html`<div part="total">
+              <span>Total</span>
+              <span>${money(this.totalMinor)}</span>
+            </div>` : nothing}
+      </section>
+    `;
+  }
+};
+
+export {
+  NymbalOrderSummary
+};
+//# sourceMappingURL=chunk-SM7TASEW.js.map

package/dist/chunk-SM7TASEW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/order-summary.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 { formatPrice } from '../format.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-order-summary',\n  reactName: 'OrderSummary',\n  // An order's lines and money as `GET /api/orders/:n` serves them; the element adds nothing up itself.\n  attributes: [\n    { name: 'items', prop: 'items', type: 'json' },\n    { name: 'subtotal-minor', prop: 'subtotalMinor', type: 'number' },\n    { name: 'discount-minor', prop: 'discountMinor', type: 'number' },\n    { name: 'shipping-minor', prop: 'shippingMinor', type: 'number' },\n    { name: 'tax-minor', prop: 'taxMinor', type: 'number' },\n    { name: 'total-minor', prop: 'totalMinor', type: 'number' },\n    { name: 'currency', prop: 'currency', type: 'string' },\n  ],\n  events: [],\n  parts: ['summary', 'line', 'totals', 'subtotal', 'discount', 'shipping', 'tax', 'total'],\n  slots: [],\n  children: false,\n}\n\ninterface Line {\n  name: string\n  qty: number\n  unitPriceMinor: number\n  lineTotalMinor: number\n}\n\nconst known = (n: number | undefined): n is number => n !== undefined && !Number.isNaN(n)\n\n/** A placed order's lines, subtotal, discount (when there is one), shipping, tax and total. */\nexport class NymbalOrderSummary 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        color: var(--nymbal-color-text, #18181b);\n      }\n      [part~='summary'] {\n        padding: var(--nymbal-spacing-lg, 1.5rem);\n        background-color: var(--nymbal-color-surface, #ffffff);\n        border: 1px solid var(--nymbal-color-border, #e4e4e7);\n        border-radius: var(--nymbal-radius-lg, 0.75rem);\n      }\n      h2 {\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      ul {\n        margin: 0 0 var(--nymbal-spacing-md, 1rem);\n        padding: 0;\n        list-style: none;\n      }\n      [part~='line'],\n      [part~='subtotal'],\n      [part~='discount'],\n      [part~='shipping'],\n      [part~='tax'],\n      [part~='total'] {\n        display: flex;\n        justify-content: space-between;\n        gap: var(--nymbal-spacing-md, 1rem);\n        padding-block: var(--nymbal-spacing-xs, 0.25rem);\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n      }\n      .qty {\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='totals'] {\n        margin: 0;\n        padding-top: var(--nymbal-spacing-sm, 0.5rem);\n        border-top: 1px solid var(--nymbal-color-border, #e4e4e7);\n      }\n      dt,\n      dd {\n        margin: 0;\n      }\n      [part~='discount'] dd {\n        color: var(--nymbal-color-success, #16a34a);\n      }\n      [part~='total'] {\n        margin-top: var(--nymbal-spacing-sm, 0.5rem);\n        padding-top: var(--nymbal-spacing-sm, 0.5rem);\n        border-top: 1px solid var(--nymbal-color-border, #e4e4e7);\n        font-size: var(--nymbal-font-size-base, 1rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n      }\n    `,\n  ]\n\n  declare items: unknown\n  declare subtotalMinor: number | undefined\n  declare discountMinor: number | undefined\n  declare shippingMinor: number | undefined\n  declare taxMinor: number | undefined\n  declare totalMinor: number | undefined\n  declare currency: string | undefined\n\n  protected override render() {\n    const lines = parsedJson<Line[]>(this, 'items', this.items)\n    const money = (minor: number): string => formatPrice(minor, this.currency ?? 'GBP')\n    const row = (part: string, label: string, minor: number | undefined, shown = money) =>\n      known(minor)\n        ? html`<div part=${part}>\n            <dt>${label}</dt>\n            <dd>${shown(minor)}</dd>\n          </div>`\n        : nothing\n    return html`\n      <section part=\"summary\" data-testid=\"order-summary\">\n        <h2>Order Summary</h2>\n        <ul>\n          ${(Array.isArray(lines) ? lines : []).map(\n            (line) => html`\n              <li part=\"line\">\n                <span>${line.name} <span class=\"qty\">&times; ${line.qty}</span></span>\n                <span>${money(line.lineTotalMinor)}</span>\n              </li>\n            `,\n          )}\n        </ul>\n        <dl part=\"totals\">\n          ${row('subtotal', 'Subtotal', this.subtotalMinor)}\n          ${known(this.discountMinor) && this.discountMinor !== 0\n            ? row('discount', 'Discount', this.discountMinor, (m) => `−${money(m)}`)\n            : nothing}\n          ${row('shipping', 'Shipping', this.shippingMinor, (m) => (m === 0 ? 'Free' : money(m)))}\n          ${row('tax', 'Tax', this.taxMinor)}\n        </dl>\n        ${known(this.totalMinor)\n          ? html`<div part=\"total\">\n              <span>Total</span>\n              <span>${money(this.totalMinor)}</span>\n            </div>`\n          : nothing}\n      </section>\n    `\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,KAAK,MAAM,eAAe;AAUnC,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA;AAAA,EAEX,YAAY;AAAA,IACV,EAAE,MAAM,SAAS,MAAM,SAAS,MAAM,OAAO;AAAA,IAC7C,EAAE,MAAM,kBAAkB,MAAM,iBAAiB,MAAM,SAAS;AAAA,IAChE,EAAE,MAAM,kBAAkB,MAAM,iBAAiB,MAAM,SAAS;AAAA,IAChE,EAAE,MAAM,kBAAkB,MAAM,iBAAiB,MAAM,SAAS;AAAA,IAChE,EAAE,MAAM,aAAa,MAAM,YAAY,MAAM,SAAS;AAAA,IACtD,EAAE,MAAM,eAAe,MAAM,cAAc,MAAM,SAAS;AAAA,IAC1D,EAAE,MAAM,YAAY,MAAM,YAAY,MAAM,SAAS;AAAA,EACvD;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,OAAO,CAAC,WAAW,QAAQ,UAAU,YAAY,YAAY,YAAY,OAAO,OAAO;AAAA,EACvF,OAAO,CAAC;AAAA,EACR,UAAU;AACZ;AASA,IAAM,QAAQ,CAAC,MAAuC,MAAM,UAAa,CAAC,OAAO,MAAM,CAAC;AAGjF,IAAM,qBAAN,cAAiC,cAAc;AAAA,EACpD,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,EA0DF;AAAA,EAUmB,SAAS;AAC1B,UAAM,QAAQ,WAAmB,MAAM,SAAS,KAAK,KAAK;AAC1D,UAAM,QAAQ,CAAC,UAA0B,YAAY,OAAO,KAAK,YAAY,KAAK;AAClF,UAAM,MAAM,CAAC,MAAc,OAAe,OAA2B,QAAQ,UAC3E,MAAM,KAAK,IACP,iBAAiB,IAAI;AAAA,kBACb,KAAK;AAAA,kBACL,MAAM,KAAK,CAAC;AAAA,oBAEpB;AACN,WAAO;AAAA;AAAA;AAAA;AAAA,aAIE,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,GAAG;AAAA,MACpC,CAAC,SAAS;AAAA;AAAA,wBAEE,KAAK,IAAI,8BAA8B,KAAK,GAAG;AAAA,wBAC/C,MAAM,KAAK,cAAc,CAAC;AAAA;AAAA;AAAA,IAGxC,CAAC;AAAA;AAAA;AAAA,YAGC,IAAI,YAAY,YAAY,KAAK,aAAa,CAAC;AAAA,YAC/C,MAAM,KAAK,aAAa,KAAK,KAAK,kBAAkB,IAClD,IAAI,YAAY,YAAY,KAAK,eAAe,CAAC,MAAM,SAAI,MAAM,CAAC,CAAC,EAAE,IACrE,OAAO;AAAA,YACT,IAAI,YAAY,YAAY,KAAK,eAAe,CAAC,MAAO,MAAM,IAAI,SAAS,MAAM,CAAC,CAAE,CAAC;AAAA,YACrF,IAAI,OAAO,OAAO,KAAK,QAAQ,CAAC;AAAA;AAAA,UAElC,MAAM,KAAK,UAAU,IACnB;AAAA;AAAA,sBAEU,MAAM,KAAK,UAAU,CAAC;AAAA,sBAEhC,OAAO;AAAA;AAAA;AAAA,EAGjB;AACF;","names":[]}

package/dist/chunk-U2PU4CWB.js

@@ -0,0 +1,124 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalElement,
+  baseStyles,
+  parsedJson,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/image-gallery.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-image-gallery",
+  reactName: "ImageGallery",
+  attributes: [{ name: "images", prop: "images", type: "json" }],
+  events: [],
+  parts: ["main", "thumbnails", "thumbnail"],
+  slots: [],
+  children: false
+};
+var NymbalImageGallery = class extends NymbalElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    css`
+      :host {
+        display: block;
+      }
+      [part~='main'] {
+        display: block;
+        width: 100%;
+        height: auto;
+        aspect-ratio: 1 / 1;
+        object-fit: cover;
+        margin-bottom: var(--nymbal-spacing-sm, 0.5rem);
+        border-radius: var(--nymbal-radius-lg, 0.75rem);
+        background-color: var(--nymbal-color-border, #f4f4f5);
+      }
+      [part~='thumbnails'] {
+        display: flex;
+        gap: var(--nymbal-spacing-sm, 0.5rem);
+        overflow-x: auto;
+        padding-bottom: var(--nymbal-spacing-xs, 0.25rem);
+      }
+      [part~='thumbnail'] {
+        flex-shrink: 0;
+        width: 64px;
+        height: 64px;
+        padding: 0;
+        border: 2px solid transparent;
+        border-radius: var(--nymbal-radius-md, 0.5rem);
+        background: none;
+        overflow: hidden;
+        cursor: pointer;
+        transition: border-color var(--nymbal-transition-fast, 150ms ease);
+      }
+      [part~='thumbnail']:hover {
+        border-color: var(--nymbal-color-border, #e4e4e7);
+      }
+      [part~='thumbnail'][aria-pressed='true'] {
+        border-color: var(--nymbal-color-primary, #18181b);
+      }
+      [part~='thumbnail'] img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      @media (min-width: 641px) {
+        [part~='thumbnail'] {
+          width: 80px;
+          height: 80px;
+        }
+      }
+    `
+  ];
+  /** The image shown; a new list of images starts again at its first. */
+  shownIndex = 0;
+  willUpdate(changed) {
+    if (changed.has("images")) this.shownIndex = 0;
+  }
+  show(index) {
+    this.shownIndex = index;
+    this.requestUpdate();
+  }
+  render() {
+    const images = parsedJson(this, "images", this.images);
+    if (!Array.isArray(images) || images.length === 0) return nothing;
+    const main = images[this.shownIndex] ?? images[0];
+    return html`
+      <img
+        part="main"
+        src=${main.url}
+        alt=${main.alt ?? ""}
+        width="600"
+        height="600"
+        fetchpriority="high"
+        data-testid="product-gallery"
+      />
+      ${images.length > 1 ? html`
+            <div part="thumbnails">
+              ${images.map(
+      (image, i) => html`
+                  <button
+                    type="button"
+                    part="thumbnail"
+                    aria-label="Show image ${i + 1}"
+                    aria-pressed=${i === this.shownIndex ? "true" : "false"}
+                    @click=${() => this.show(i)}
+                  >
+                    <img src=${image.url} alt="" width="80" height="80" loading="lazy" />
+                  </button>
+                `
+    )}
+            </div>
+          ` : nothing}
+    `;
+  }
+};
+
+export {
+  NymbalImageGallery
+};
+//# sourceMappingURL=chunk-U2PU4CWB.js.map

package/dist/chunk-U2PU4CWB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/image-gallery.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues } from 'lit'\nimport {\n  baseStyles,\n  NymbalElement,\n  parsedJson,\n  propertiesOf,\n  type ElementSchema,\n} from '../base-element.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-image-gallery',\n  reactName: 'ImageGallery',\n  attributes: [{ name: 'images', prop: 'images', type: 'json' }],\n  events: [],\n  parts: ['main', 'thumbnails', 'thumbnail'],\n  slots: [],\n  children: false,\n}\n\ninterface Image {\n  url: string\n  alt?: string\n}\n\n/** A product's images: the one shown, and a thumbnail per image (when there are several) that shows it. */\nexport class NymbalImageGallery 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      }\n      [part~='main'] {\n        display: block;\n        width: 100%;\n        height: auto;\n        aspect-ratio: 1 / 1;\n        object-fit: cover;\n        margin-bottom: var(--nymbal-spacing-sm, 0.5rem);\n        border-radius: var(--nymbal-radius-lg, 0.75rem);\n        background-color: var(--nymbal-color-border, #f4f4f5);\n      }\n      [part~='thumbnails'] {\n        display: flex;\n        gap: var(--nymbal-spacing-sm, 0.5rem);\n        overflow-x: auto;\n        padding-bottom: var(--nymbal-spacing-xs, 0.25rem);\n      }\n      [part~='thumbnail'] {\n        flex-shrink: 0;\n        width: 64px;\n        height: 64px;\n        padding: 0;\n        border: 2px solid transparent;\n        border-radius: var(--nymbal-radius-md, 0.5rem);\n        background: none;\n        overflow: hidden;\n        cursor: pointer;\n        transition: border-color var(--nymbal-transition-fast, 150ms ease);\n      }\n      [part~='thumbnail']:hover {\n        border-color: var(--nymbal-color-border, #e4e4e7);\n      }\n      [part~='thumbnail'][aria-pressed='true'] {\n        border-color: var(--nymbal-color-primary, #18181b);\n      }\n      [part~='thumbnail'] img {\n        display: block;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n      @media (min-width: 641px) {\n        [part~='thumbnail'] {\n          width: 80px;\n          height: 80px;\n        }\n      }\n    `,\n  ]\n\n  declare images: unknown\n\n  /** The image shown; a new list of images starts again at its first. */\n  private shownIndex = 0\n\n  protected override willUpdate(changed: PropertyValues): void {\n    if (changed.has('images')) this.shownIndex = 0\n  }\n\n  private show(index: number): void {\n    this.shownIndex = index\n    this.requestUpdate()\n  }\n\n  protected override render() {\n    const images = parsedJson<Image[]>(this, 'images', this.images)\n    if (!Array.isArray(images) || images.length === 0) return nothing\n    const main = images[this.shownIndex] ?? images[0]!\n    return html`\n      <img\n        part=\"main\"\n        src=${main.url}\n        alt=${main.alt ?? ''}\n        width=\"600\"\n        height=\"600\"\n        fetchpriority=\"high\"\n        data-testid=\"product-gallery\"\n      />\n      ${images.length > 1\n        ? html`\n            <div part=\"thumbnails\">\n              ${images.map(\n                (image, i) => html`\n                  <button\n                    type=\"button\"\n                    part=\"thumbnail\"\n                    aria-label=\"Show image ${i + 1}\"\n                    aria-pressed=${i === this.shownIndex ? 'true' : 'false'}\n                    @click=${() => this.show(i)}\n                  >\n                    <img src=${image.url} alt=\"\" width=\"80\" height=\"80\" loading=\"lazy\" />\n                  </button>\n                `,\n              )}\n            </div>\n          `\n        : nothing}\n    `\n  }\n}\n"],"mappings":";;;;;;;;;AAAA,SAAS,KAAK,MAAM,eAAoC;AASxD,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA,EACX,YAAY,CAAC,EAAE,MAAM,UAAU,MAAM,UAAU,MAAM,OAAO,CAAC;AAAA,EAC7D,QAAQ,CAAC;AAAA,EACT,OAAO,CAAC,QAAQ,cAAc,WAAW;AAAA,EACzC,OAAO,CAAC;AAAA,EACR,UAAU;AACZ;AAQO,IAAM,qBAAN,cAAiC,cAAc;AAAA,EACpD,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,EAmDF;AAAA;AAAA,EAKQ,aAAa;AAAA,EAEF,WAAW,SAA+B;AAC3D,QAAI,QAAQ,IAAI,QAAQ,EAAG,MAAK,aAAa;AAAA,EAC/C;AAAA,EAEQ,KAAK,OAAqB;AAChC,SAAK,aAAa;AAClB,SAAK,cAAc;AAAA,EACrB;AAAA,EAEmB,SAAS;AAC1B,UAAM,SAAS,WAAoB,MAAM,UAAU,KAAK,MAAM;AAC9D,QAAI,CAAC,MAAM,QAAQ,MAAM,KAAK,OAAO,WAAW,EAAG,QAAO;AAC1D,UAAM,OAAO,OAAO,KAAK,UAAU,KAAK,OAAO,CAAC;AAChD,WAAO;AAAA;AAAA;AAAA,cAGG,KAAK,GAAG;AAAA,cACR,KAAK,OAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMpB,OAAO,SAAS,IACd;AAAA;AAAA,gBAEM,OAAO;AAAA,MACP,CAAC,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,6CAIe,IAAI,CAAC;AAAA,mCACf,MAAM,KAAK,aAAa,SAAS,OAAO;AAAA,6BAC9C,MAAM,KAAK,KAAK,CAAC,CAAC;AAAA;AAAA,+BAEhB,MAAM,GAAG;AAAA;AAAA;AAAA,IAG1B,CAAC;AAAA;AAAA,cAGL,OAAO;AAAA;AAAA,EAEf;AACF;","names":[]}

package/dist/chunk-UCEVCLQ7.js

@@ -0,0 +1,5 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+
+// src/hydrate-support.ts
+import "@lit-labs/ssr-client/lit-element-hydrate-support.js";
+//# sourceMappingURL=chunk-UCEVCLQ7.js.map

package/dist/chunk-UCEVCLQ7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hydrate-support.ts"],"sourcesContent":["// Lets an element take over the shadow root a server rendered instead of rendering a second one. `lit-element` reads\n// the hook this installs once, when it evaluates, so this module is the first import of every entry and of\n// base-element: ESM evaluates imports depth-first in source order, and every component imports `lit` first.\nimport '@lit-labs/ssr-client/lit-element-hydrate-support.js'\n"],"mappings":";;;AAGA,OAAO;","names":[]}

package/dist/chunk-UYSZOEOA.js

@@ -0,0 +1,32 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalElement
+} from "./chunk-EYDMJNNK.js";
+
+// src/selected-variant.ts
+var NymbalVariantElement = class extends NymbalElement {
+  following = false;
+  stores() {
+    return [this.client.product];
+  }
+  storeSettled() {
+    if (this.ownProduct() !== null) this.following = true;
+  }
+  ownProduct() {
+    const { product } = this.client.product.getState();
+    return product !== null && this.productId !== void 0 && product.id === this.productId ? product : null;
+  }
+  /** The store's product and its selected variant, once this element follows the store; else null. */
+  selected() {
+    if (!this.following || !this.readsStores) return null;
+    const product = this.ownProduct();
+    if (product === null) return null;
+    const { selectedVariant } = this.client.product.getState();
+    return { product, variant: selectedVariant ?? product.variants?.[0] ?? null };
+  }
+};
+
+export {
+  NymbalVariantElement
+};
+//# sourceMappingURL=chunk-UYSZOEOA.js.map

package/dist/chunk-UYSZOEOA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/selected-variant.ts"],"sourcesContent":["import type { DenormalisedProduct, DenormalisedVariant } from '@nymbalhq/sdk'\nimport { NymbalElement } from './base-element.js'\n\n/**\n * An element showing one product's selected variant (its price, its stock). It renders from its attributes until the\n * product store settles on the product its `product-id` names, then from the store's selected variant. A store\n * settled on another product (the page a soft navigation left) is not this element's, so it keeps its attributes.\n */\nexport abstract class NymbalVariantElement extends NymbalElement {\n  declare productId: string | undefined\n\n  private following = false\n\n  protected override stores() {\n    return [this.client.product]\n  }\n\n  protected override storeSettled(): void {\n    if (this.ownProduct() !== null) this.following = true\n  }\n\n  private ownProduct(): DenormalisedProduct | null {\n    const { product } = this.client.product.getState()\n    return product !== null && this.productId !== undefined && product.id === this.productId\n      ? product\n      : null\n  }\n\n  /** The store's product and its selected variant, once this element follows the store; else null. */\n  protected selected(): {\n    product: DenormalisedProduct\n    variant: DenormalisedVariant | null\n  } | null {\n    if (!this.following || !this.readsStores) return null\n    const product = this.ownProduct()\n    if (product === null) return null\n    const { selectedVariant } = this.client.product.getState()\n    return { product, variant: selectedVariant ?? product.variants?.[0] ?? null }\n  }\n}\n"],"mappings":";;;;;;AAQO,IAAe,uBAAf,cAA4C,cAAc;AAAA,EAGvD,YAAY;AAAA,EAED,SAAS;AAC1B,WAAO,CAAC,KAAK,OAAO,OAAO;AAAA,EAC7B;AAAA,EAEmB,eAAqB;AACtC,QAAI,KAAK,WAAW,MAAM,KAAM,MAAK,YAAY;AAAA,EACnD;AAAA,EAEQ,aAAyC;AAC/C,UAAM,EAAE,QAAQ,IAAI,KAAK,OAAO,QAAQ,SAAS;AACjD,WAAO,YAAY,QAAQ,KAAK,cAAc,UAAa,QAAQ,OAAO,KAAK,YAC3E,UACA;AAAA,EACN;AAAA;AAAA,EAGU,WAGD;AACP,QAAI,CAAC,KAAK,aAAa,CAAC,KAAK,YAAa,QAAO;AACjD,UAAM,UAAU,KAAK,WAAW;AAChC,QAAI,YAAY,KAAM,QAAO;AAC7B,UAAM,EAAE,gBAAgB,IAAI,KAAK,OAAO,QAAQ,SAAS;AACzD,WAAO,EAAE,SAAS,SAAS,mBAAmB,QAAQ,WAAW,CAAC,KAAK,KAAK;AAAA,EAC9E;AACF;","names":[]}

package/dist/chunk-V55K2CS5.js

@@ -0,0 +1,126 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  renderField
+} from "./chunk-PN6QKYE4.js";
+import {
+  fieldStyles
+} from "./chunk-GHXTJ2CF.js";
+import {
+  NymbalElement,
+  baseStyles,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/address-form.ts
+import { css, html } from "lit";
+var SCHEMA = {
+  tag: "nymbal-address-form",
+  reactName: "AddressForm",
+  attributes: [{ name: "id-prefix", prop: "idPrefix", type: "string" }],
+  events: [],
+  parts: ["fields", "field", "label", "input"],
+  slots: [],
+  children: false
+};
+var FIELDS = [
+  { name: "firstName", label: "First Name", autocomplete: "given-name", required: true },
+  { name: "lastName", label: "Last Name", autocomplete: "family-name", required: true },
+  {
+    name: "addressLine1",
+    label: "Address Line 1",
+    autocomplete: "address-line1",
+    required: true,
+    full: true
+  },
+  {
+    name: "addressLine2",
+    label: "Address Line 2 (optional)",
+    autocomplete: "address-line2",
+    full: true
+  },
+  { name: "city", label: "City", autocomplete: "address-level2", required: true },
+  { name: "region", label: "State / County", autocomplete: "address-level1", required: true },
+  { name: "postalCode", label: "Postcode", autocomplete: "postal-code", required: true },
+  {
+    name: "country",
+    label: "Country (2-letter code)",
+    autocomplete: "country",
+    required: true,
+    placeholder: "GB"
+  }
+];
+var NymbalAddressForm = class extends NymbalElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    fieldStyles,
+    css`
+      [part~='fields'] {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+        gap: 0 var(--nymbal-spacing-md, 1rem);
+      }
+      .full {
+        grid-column: 1 / -1;
+      }
+    `
+  ];
+  input(name) {
+    return this.renderRoot.querySelector(`[name="${name}"]`);
+  }
+  /** The address as typed, trimmed; an empty second line is left out. */
+  get value() {
+    const field = (name) => this.input(name)?.value.trim() ?? "";
+    const line2 = field("addressLine2");
+    return {
+      firstName: field("firstName"),
+      lastName: field("lastName"),
+      addressLine1: field("addressLine1"),
+      ...line2 !== "" && { addressLine2: line2 },
+      city: field("city"),
+      region: field("region"),
+      postalCode: field("postalCode"),
+      country: field("country")
+    };
+  }
+  /** Shows the browser's message on the first field that is not valid, as a native form would. */
+  reportValidity() {
+    for (const input of this.renderRoot.querySelectorAll("input")) {
+      if (!input.reportValidity()) return false;
+    }
+    return true;
+  }
+  reset() {
+    for (const input of this.renderRoot.querySelectorAll("input")) input.value = "";
+  }
+  /**
+   * The inputs sit in this shadow root, so they have no form owner and Enter in one submits nothing natively. Enter
+   * submits the form that holds this element instead, as it would if the fields were its own.
+   */
+  onKeydown = (event) => {
+    if (event.key !== "Enter" || event.isComposing || event.defaultPrevented) return;
+    if (!(event.target instanceof HTMLInputElement)) return;
+    const form = this.closest("form");
+    if (form === null) return;
+    event.preventDefault();
+    form.requestSubmit();
+  };
+  render() {
+    const prefix = this.idPrefix ?? "address";
+    return html`
+      <div part="fields" @keydown=${this.onKeydown}>
+        ${FIELDS.map(
+      ({ full, ...f }) => html`<div class=${full ? "full" : ""}>
+              ${renderField({ ...f, id: `${prefix}-${f.name}` })}
+            </div>`
+    )}
+      </div>
+    `;
+  }
+};
+
+export {
+  NymbalAddressForm
+};
+//# sourceMappingURL=chunk-V55K2CS5.js.map

package/dist/chunk-V55K2CS5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/address-form.ts"],"sourcesContent":["import { css, html } from 'lit'\nimport type { Address } from '@nymbalhq/types'\nimport { baseStyles, NymbalElement, propertiesOf, type ElementSchema } from '../base-element.js'\nimport { renderField, type FieldSpec } from '../form-element.js'\nimport { fieldStyles } from '../view-styles.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-address-form',\n  reactName: 'AddressForm',\n  attributes: [{ name: 'id-prefix', prop: 'idPrefix', type: 'string' }],\n  events: [],\n  parts: ['fields', 'field', 'label', 'input'],\n  slots: [],\n  children: false,\n}\n\ntype FieldName = Exclude<keyof Address, 'company' | 'phone'>\n\nconst FIELDS: Array<Omit<FieldSpec, 'id' | 'name'> & { name: FieldName; full?: boolean }> = [\n  { name: 'firstName', label: 'First Name', autocomplete: 'given-name', required: true },\n  { name: 'lastName', label: 'Last Name', autocomplete: 'family-name', required: true },\n  {\n    name: 'addressLine1',\n    label: 'Address Line 1',\n    autocomplete: 'address-line1',\n    required: true,\n    full: true,\n  },\n  {\n    name: 'addressLine2',\n    label: 'Address Line 2 (optional)',\n    autocomplete: 'address-line2',\n    full: true,\n  },\n  { name: 'city', label: 'City', autocomplete: 'address-level2', required: true },\n  { name: 'region', label: 'State / County', autocomplete: 'address-level1', required: true },\n  { name: 'postalCode', label: 'Postcode', autocomplete: 'postal-code', required: true },\n  {\n    name: 'country',\n    label: 'Country (2-letter code)',\n    autocomplete: 'country',\n    required: true,\n    placeholder: 'GB',\n  },\n]\n\n/**\n * The address fields, with ids and test ids `<id-prefix>-<field>`. It renders no `<form>`: the view that holds it owns\n * the submit (Enter in a field submits it) and reads `value`.\n */\nexport class NymbalAddressForm extends NymbalElement {\n  static override schema = SCHEMA\n  static override properties = propertiesOf(SCHEMA)\n  static override styles = [\n    baseStyles,\n    fieldStyles,\n    css`\n      [part~='fields'] {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n        gap: 0 var(--nymbal-spacing-md, 1rem);\n      }\n      .full {\n        grid-column: 1 / -1;\n      }\n    `,\n  ]\n\n  declare idPrefix: string | undefined\n\n  private input(name: FieldName): HTMLInputElement | null {\n    return this.renderRoot.querySelector<HTMLInputElement>(`[name=\"${name}\"]`)\n  }\n\n  /** The address as typed, trimmed; an empty second line is left out. */\n  get value(): Address {\n    const field = (name: FieldName): string => this.input(name)?.value.trim() ?? ''\n    const line2 = field('addressLine2')\n    return {\n      firstName: field('firstName'),\n      lastName: field('lastName'),\n      addressLine1: field('addressLine1'),\n      ...(line2 !== '' && { addressLine2: line2 }),\n      city: field('city'),\n      region: field('region'),\n      postalCode: field('postalCode'),\n      country: field('country'),\n    }\n  }\n\n  /** Shows the browser's message on the first field that is not valid, as a native form would. */\n  reportValidity(): boolean {\n    for (const input of this.renderRoot.querySelectorAll('input')) {\n      if (!input.reportValidity()) return false\n    }\n    return true\n  }\n\n  reset(): void {\n    for (const input of this.renderRoot.querySelectorAll('input')) input.value = ''\n  }\n\n  /**\n   * The inputs sit in this shadow root, so they have no form owner and Enter in one submits nothing natively. Enter\n   * submits the form that holds this element instead, as it would if the fields were its own.\n   */\n  private readonly onKeydown = (event: KeyboardEvent): void => {\n    if (event.key !== 'Enter' || event.isComposing || event.defaultPrevented) return\n    if (!(event.target instanceof HTMLInputElement)) return\n    const form = this.closest('form')\n    if (form === null) return\n    event.preventDefault()\n    form.requestSubmit()\n  }\n\n  protected override render() {\n    const prefix = this.idPrefix ?? 'address'\n    return html`\n      <div part=\"fields\" @keydown=${this.onKeydown}>\n        ${FIELDS.map(\n          ({ full, ...f }) =>\n            html`<div class=${full ? 'full' : ''}>\n              ${renderField({ ...f, id: `${prefix}-${f.name}` })}\n            </div>`,\n        )}\n      </div>\n    `\n  }\n}\n"],"mappings":"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","names":[]}