@nymbalhq/web-components 1.0.0 → 1.2.0

package/dist/chunk-NW47OJVN.js

@@ -0,0 +1,138 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalFormElement,
+  renderField
+} from "./chunk-PN6QKYE4.js";
+import {
+  buttonStyles,
+  fieldStyles
+} from "./chunk-GHXTJ2CF.js";
+import {
+  baseStyles,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/register-form.ts
+import { css, html } from "lit";
+var SCHEMA = {
+  tag: "nymbal-register-form",
+  reactName: "RegisterForm",
+  attributes: [],
+  events: [
+    {
+      name: "nymbal:auth:signed-in",
+      prop: "onSignedIn",
+      detail: "{ customer: unknown }"
+    }
+  ],
+  parts: ["form", "row", "field", "label", "input", "error", "submit"],
+  slots: ["submit-label"],
+  children: false
+};
+var NymbalRegisterForm = class extends NymbalFormElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    buttonStyles,
+    fieldStyles,
+    css`
+      [part~='row'] {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+        gap: 0 var(--nymbal-spacing-md, 1rem);
+      }
+    `
+  ];
+  // The page leaves on success; a second submit while it does would try to register the email twice.
+  lockOnSuccess = true;
+  async send() {
+    if (this.value("password") !== this.value("confirmPassword")) {
+      throw new Error("Passwords do not match.");
+    }
+    await this.client.auth.register({
+      email: this.value("email"),
+      password: this.value("password"),
+      firstName: this.value("firstName"),
+      lastName: this.value("lastName"),
+      phone: this.value("phone")
+    });
+    this.emit("nymbal:auth:signed-in", { customer: this.client.auth.getState().customer });
+  }
+  failureText(err) {
+    return err instanceof Error && err.message !== "" ? err.message : "Registration failed. Please try again.";
+  }
+  render() {
+    return html`
+      ${this.renderError()}
+      <form part="form" data-testid="register-form" @submit=${this.onSubmit}>
+        <div part="row">
+          ${renderField({
+      id: "register-firstName",
+      name: "firstName",
+      label: "First Name",
+      autocomplete: "given-name",
+      placeholder: "First name"
+    })}
+          ${renderField({
+      id: "register-lastName",
+      name: "lastName",
+      label: "Last Name",
+      autocomplete: "family-name",
+      placeholder: "Last name"
+    })}
+        </div>
+        ${renderField({
+      id: "register-email",
+      name: "email",
+      label: "Email",
+      type: "email",
+      autocomplete: "email",
+      required: true,
+      placeholder: "you@example.com"
+    })}
+        ${renderField({
+      id: "register-password",
+      name: "password",
+      label: "Password",
+      type: "password",
+      autocomplete: "new-password",
+      required: true,
+      minlength: 8,
+      placeholder: "Choose a password"
+    })}
+        ${renderField({
+      id: "register-confirmPassword",
+      name: "confirmPassword",
+      label: "Confirm Password",
+      type: "password",
+      autocomplete: "new-password",
+      required: true,
+      placeholder: "Confirm your password"
+    })}
+        ${renderField({
+      id: "register-phone",
+      name: "phone",
+      label: "Phone (optional)",
+      type: "tel",
+      autocomplete: "tel",
+      placeholder: "+44 7700 900000"
+    })}
+        <button
+          type="submit"
+          part="submit"
+          class="btn btn-primary"
+          data-testid="register-submit"
+          ?disabled=${this.pending}
+        >
+          ${this.pending ? "Creating account..." : html`<slot name="submit-label">Create Account</slot>`}
+        </button>
+      </form>
+    `;
+  }
+};
+
+export {
+  NymbalRegisterForm
+};
+//# sourceMappingURL=chunk-NW47OJVN.js.map

package/dist/chunk-NW47OJVN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/register-form.ts"],"sourcesContent":["import { css, html } from 'lit'\nimport { baseStyles, propertiesOf, type ElementSchema } from '../base-element.js'\nimport { NymbalFormElement, renderField } from '../form-element.js'\nimport { buttonStyles, fieldStyles } from '../view-styles.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-register-form',\n  reactName: 'RegisterForm',\n  attributes: [],\n  events: [\n    {\n      name: 'nymbal:auth:signed-in',\n      prop: 'onSignedIn',\n      detail: '{ customer: unknown }',\n    },\n  ],\n  parts: ['form', 'row', 'field', 'label', 'input', 'error', 'submit'],\n  slots: ['submit-label'],\n  children: false,\n}\n\n/** Creates the shopper's account and signs them in; the page decides where they go next. */\nexport class NymbalRegisterForm 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      [part~='row'] {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));\n        gap: 0 var(--nymbal-spacing-md, 1rem);\n      }\n    `,\n  ]\n\n  // The page leaves on success; a second submit while it does would try to register the email twice.\n  protected override readonly lockOnSuccess = true\n\n  protected override async send(): Promise<void> {\n    if (this.value('password') !== this.value('confirmPassword')) {\n      throw new Error('Passwords do not match.')\n    }\n    await this.client.auth.register({\n      email: this.value('email'),\n      password: this.value('password'),\n      firstName: this.value('firstName'),\n      lastName: this.value('lastName'),\n      phone: this.value('phone'),\n    })\n    this.emit('nymbal:auth:signed-in', { customer: this.client.auth.getState().customer })\n  }\n\n  protected override failureText(err: unknown): string {\n    return err instanceof Error && err.message !== ''\n      ? err.message\n      : 'Registration failed. Please try again.'\n  }\n\n  protected override render() {\n    return html`\n      ${this.renderError()}\n      <form part=\"form\" data-testid=\"register-form\" @submit=${this.onSubmit}>\n        <div part=\"row\">\n          ${renderField({\n            id: 'register-firstName',\n            name: 'firstName',\n            label: 'First Name',\n            autocomplete: 'given-name',\n            placeholder: 'First name',\n          })}\n          ${renderField({\n            id: 'register-lastName',\n            name: 'lastName',\n            label: 'Last Name',\n            autocomplete: 'family-name',\n            placeholder: 'Last name',\n          })}\n        </div>\n        ${renderField({\n          id: 'register-email',\n          name: 'email',\n          label: 'Email',\n          type: 'email',\n          autocomplete: 'email',\n          required: true,\n          placeholder: 'you@example.com',\n        })}\n        ${renderField({\n          id: 'register-password',\n          name: 'password',\n          label: 'Password',\n          type: 'password',\n          autocomplete: 'new-password',\n          required: true,\n          minlength: 8,\n          placeholder: 'Choose a password',\n        })}\n        ${renderField({\n          id: 'register-confirmPassword',\n          name: 'confirmPassword',\n          label: 'Confirm Password',\n          type: 'password',\n          autocomplete: 'new-password',\n          required: true,\n          placeholder: 'Confirm your password',\n        })}\n        ${renderField({\n          id: 'register-phone',\n          name: 'phone',\n          label: 'Phone (optional)',\n          type: 'tel',\n          autocomplete: 'tel',\n          placeholder: '+44 7700 900000',\n        })}\n        <button\n          type=\"submit\"\n          part=\"submit\"\n          class=\"btn btn-primary\"\n          data-testid=\"register-submit\"\n          ?disabled=${this.pending}\n        >\n          ${this.pending ? 'Creating account...' : html`<slot name=\"submit-label\">Create Account</slot>`}\n        </button>\n      </form>\n    `\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAAA,SAAS,KAAK,YAAY;AAK1B,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA,EACX,YAAY,CAAC;AAAA,EACb,QAAQ;AAAA,IACN;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,OAAO,CAAC,QAAQ,OAAO,SAAS,SAAS,SAAS,SAAS,QAAQ;AAAA,EACnE,OAAO,CAAC,cAAc;AAAA,EACtB,UAAU;AACZ;AAGO,IAAM,qBAAN,cAAiC,kBAAkB;AAAA,EACxD,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,EAOF;AAAA;AAAA,EAG4B,gBAAgB;AAAA,EAE5C,MAAyB,OAAsB;AAC7C,QAAI,KAAK,MAAM,UAAU,MAAM,KAAK,MAAM,iBAAiB,GAAG;AAC5D,YAAM,IAAI,MAAM,yBAAyB;AAAA,IAC3C;AACA,UAAM,KAAK,OAAO,KAAK,SAAS;AAAA,MAC9B,OAAO,KAAK,MAAM,OAAO;AAAA,MACzB,UAAU,KAAK,MAAM,UAAU;AAAA,MAC/B,WAAW,KAAK,MAAM,WAAW;AAAA,MACjC,UAAU,KAAK,MAAM,UAAU;AAAA,MAC/B,OAAO,KAAK,MAAM,OAAO;AAAA,IAC3B,CAAC;AACD,SAAK,KAAK,yBAAyB,EAAE,UAAU,KAAK,OAAO,KAAK,SAAS,EAAE,SAAS,CAAC;AAAA,EACvF;AAAA,EAEmB,YAAY,KAAsB;AACnD,WAAO,eAAe,SAAS,IAAI,YAAY,KAC3C,IAAI,UACJ;AAAA,EACN;AAAA,EAEmB,SAAS;AAC1B,WAAO;AAAA,QACH,KAAK,YAAY,CAAC;AAAA,8DACoC,KAAK,QAAQ;AAAA;AAAA,YAE/D,YAAY;AAAA,MACZ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,cAAc;AAAA,MACd,aAAa;AAAA,IACf,CAAC,CAAC;AAAA,YACA,YAAY;AAAA,MACZ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,cAAc;AAAA,MACd,aAAa;AAAA,IACf,CAAC,CAAC;AAAA;AAAA,UAEF,YAAY;AAAA,MACZ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,MACd,UAAU;AAAA,MACV,aAAa;AAAA,IACf,CAAC,CAAC;AAAA,UACA,YAAY;AAAA,MACZ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,MACd,UAAU;AAAA,MACV,WAAW;AAAA,MACX,aAAa;AAAA,IACf,CAAC,CAAC;AAAA,UACA,YAAY;AAAA,MACZ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,MACd,UAAU;AAAA,MACV,aAAa;AAAA,IACf,CAAC,CAAC;AAAA,UACA,YAAY;AAAA,MACZ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,IACf,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMY,KAAK,OAAO;AAAA;AAAA,YAEtB,KAAK,UAAU,wBAAwB,qDAAqD;AAAA;AAAA;AAAA;AAAA,EAItG;AACF;","names":[]}

package/dist/chunk-O2YKCDR2.js

@@ -0,0 +1,77 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalVariantElement
+} from "./chunk-UYSZOEOA.js";
+import {
+  baseStyles,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/stock-badge.ts
+import { css, html, nothing } from "lit";
+import { STOCK_LABELS, stockLevel } from "@nymbalhq/types";
+var SCHEMA = {
+  tag: "nymbal-stock-badge",
+  reactName: "StockBadge",
+  // The product's first variant's stock as a server read it, and the product whose store updates it may follow.
+  attributes: [
+    { name: "product-id", prop: "productId", type: "string" },
+    { name: "stock", prop: "stock", type: "number" }
+  ],
+  events: [],
+  parts: ["badge", "label"],
+  slots: [],
+  children: false
+};
+var NymbalStockBadge = class extends NymbalVariantElement {
+  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~='badge'] {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--nymbal-spacing-xs, 0.25rem);
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        font-weight: var(--nymbal-font-weight-medium, 500);
+      }
+      [part~='badge'][data-level='in'] {
+        color: var(--nymbal-color-success, #16a34a);
+      }
+      [part~='badge'][data-level='low'] {
+        color: var(--nymbal-color-warning, #d97706);
+      }
+      [part~='badge'][data-level='out'] {
+        color: var(--nymbal-color-error, #dc2626);
+      }
+      .dot {
+        width: 8px;
+        height: 8px;
+        border-radius: var(--nymbal-radius-full, 9999px);
+        background-color: currentColor;
+      }
+    `
+  ];
+  render() {
+    const store = this.selected();
+    const stock = store === null ? this.stock : store.variant?.stock ?? 0;
+    if (stock === void 0 || Number.isNaN(stock)) return nothing;
+    const level = stockLevel(stock);
+    return html`
+      <span part="badge" data-testid="stock-badge" data-level=${level}>
+        <span class="dot" aria-hidden="true"></span>
+        <span part="label">${STOCK_LABELS[level]}</span>
+      </span>
+    `;
+  }
+};
+
+export {
+  NymbalStockBadge
+};
+//# sourceMappingURL=chunk-O2YKCDR2.js.map

package/dist/chunk-O2YKCDR2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/stock-badge.ts"],"sourcesContent":["import { css, html, nothing } from 'lit'\nimport { STOCK_LABELS, stockLevel } from '@nymbalhq/types'\nimport { baseStyles, propertiesOf, type ElementSchema } from '../base-element.js'\nimport { NymbalVariantElement } from '../selected-variant.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-stock-badge',\n  reactName: 'StockBadge',\n  // The product's first variant's stock as a server read it, and the product whose store updates it may follow.\n  attributes: [\n    { name: 'product-id', prop: 'productId', type: 'string' },\n    { name: 'stock', prop: 'stock', type: 'number' },\n  ],\n  events: [],\n  parts: ['badge', 'label'],\n  slots: [],\n  children: false,\n}\n\n/** A product page's stock level (`@nymbalhq/types`' rule): the selected variant's once the store holds this product. */\nexport class NymbalStockBadge extends NymbalVariantElement {\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~='badge'] {\n        display: inline-flex;\n        align-items: center;\n        gap: 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~='badge'][data-level='in'] {\n        color: var(--nymbal-color-success, #16a34a);\n      }\n      [part~='badge'][data-level='low'] {\n        color: var(--nymbal-color-warning, #d97706);\n      }\n      [part~='badge'][data-level='out'] {\n        color: var(--nymbal-color-error, #dc2626);\n      }\n      .dot {\n        width: 8px;\n        height: 8px;\n        border-radius: var(--nymbal-radius-full, 9999px);\n        background-color: currentColor;\n      }\n    `,\n  ]\n\n  declare stock: number | undefined\n\n  protected override render() {\n    const store = this.selected()\n    // A product with no variants has nothing to sell, so it reads as out of stock.\n    const stock = store === null ? this.stock : (store.variant?.stock ?? 0)\n    if (stock === undefined || Number.isNaN(stock)) return nothing\n    const level = stockLevel(stock)\n    return html`\n      <span part=\"badge\" data-testid=\"stock-badge\" data-level=${level}>\n        <span class=\"dot\" aria-hidden=\"true\"></span>\n        <span part=\"label\">${STOCK_LABELS[level]}</span>\n      </span>\n    `\n  }\n}\n"],"mappings":";;;;;;;;;;AAAA,SAAS,KAAK,MAAM,eAAe;AACnC,SAAS,cAAc,kBAAkB;AAIzC,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA;AAAA,EAEX,YAAY;AAAA,IACV,EAAE,MAAM,cAAc,MAAM,aAAa,MAAM,SAAS;AAAA,IACxD,EAAE,MAAM,SAAS,MAAM,SAAS,MAAM,SAAS;AAAA,EACjD;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,OAAO,CAAC,SAAS,OAAO;AAAA,EACxB,OAAO,CAAC;AAAA,EACR,UAAU;AACZ;AAGO,IAAM,mBAAN,cAA+B,qBAAqB;AAAA,EACzD,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,EA4BF;AAAA,EAImB,SAAS;AAC1B,UAAM,QAAQ,KAAK,SAAS;AAE5B,UAAM,QAAQ,UAAU,OAAO,KAAK,QAAS,MAAM,SAAS,SAAS;AACrE,QAAI,UAAU,UAAa,OAAO,MAAM,KAAK,EAAG,QAAO;AACvD,UAAM,QAAQ,WAAW,KAAK;AAC9B,WAAO;AAAA,gEACqD,KAAK;AAAA;AAAA,6BAExC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,EAG9C;AACF;","names":[]}

package/dist/chunk-PN6QKYE4.js

@@ -0,0 +1,71 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalElement
+} from "./chunk-EYDMJNNK.js";
+
+// src/form-element.ts
+import { html, nothing } from "lit";
+function renderField(f) {
+  return html`
+    <div part="field">
+      <label part="label" for=${f.id}>${f.label}</label>
+      <input
+        part="input"
+        id=${f.id}
+        name=${f.name}
+        type=${f.type ?? "text"}
+        autocomplete=${f.autocomplete}
+        placeholder=${f.placeholder ?? nothing}
+        minlength=${f.minlength ?? nothing}
+        ?required=${f.required ?? false}
+        ?disabled=${f.disabled ?? false}
+        .value=${f.value ?? ""}
+        data-testid=${f.id}
+      />
+    </div>
+  `;
+}
+var NymbalFormElement = class extends NymbalElement {
+  pending = false;
+  error = null;
+  notice = null;
+  /** Keeps the submit disabled after a success, for a form whose page navigates away on it. */
+  lockOnSuccess = false;
+  /** The error text a refusal shows. */
+  failureText(err) {
+    return err instanceof Error && err.message !== "" ? err.message : "Something went wrong.";
+  }
+  onSubmit = (event) => {
+    event.preventDefault();
+    if (this.pending) return;
+    this.pending = true;
+    this.error = null;
+    this.notice = null;
+    const sent = this.send();
+    this.requestUpdate();
+    sent.then(
+      () => this.settle(null),
+      (err) => this.settle(this.failureText(err))
+    );
+  };
+  settle(error) {
+    this.pending = error === null && this.lockOnSuccess;
+    this.error = error;
+    this.requestUpdate();
+  }
+  value(name) {
+    return this.renderRoot.querySelector(`[name="${name}"]`)?.value ?? "";
+  }
+  emit(name, detail) {
+    this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }));
+  }
+  renderError() {
+    return this.error === null ? nothing : html`<div part="error" role="alert">${this.error}</div>`;
+  }
+};
+
+export {
+  renderField,
+  NymbalFormElement
+};
+//# sourceMappingURL=chunk-PN6QKYE4.js.map

package/dist/chunk-PN6QKYE4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/form-element.ts"],"sourcesContent":["import { html, nothing, type TemplateResult } from 'lit'\nimport { NymbalElement } from './base-element.js'\n\nexport interface FieldSpec {\n  /** The input's id and test id, unique within the element's shadow root. */\n  id: string\n  name: string\n  label: string\n  type?: 'text' | 'email' | 'password' | 'tel'\n  autocomplete: string\n  required?: boolean\n  disabled?: boolean\n  minlength?: number\n  placeholder?: string\n  /** Set on the input when it changes, so typing is kept across renders. */\n  value?: string\n}\n\n/** A labelled input; the label's `for` and the input share the element's shadow root. */\nexport function renderField(f: FieldSpec): TemplateResult {\n  return html`\n    <div part=\"field\">\n      <label part=\"label\" for=${f.id}>${f.label}</label>\n      <input\n        part=\"input\"\n        id=${f.id}\n        name=${f.name}\n        type=${f.type ?? 'text'}\n        autocomplete=${f.autocomplete}\n        placeholder=${f.placeholder ?? nothing}\n        minlength=${f.minlength ?? nothing}\n        ?required=${f.required ?? false}\n        ?disabled=${f.disabled ?? false}\n        .value=${f.value ?? ''}\n        data-testid=${f.id}\n      />\n    </div>\n  `\n}\n\n/**\n * A view whose form makes one SDK call per submission. `requestSubmit()` and Enter still fire `submit` while the\n * button is disabled, so the pending flag, not the button, is the guard.\n */\nexport abstract class NymbalFormElement extends NymbalElement {\n  protected pending = false\n  protected error: string | null = null\n  protected notice: string | null = null\n  /** Keeps the submit disabled after a success, for a form whose page navigates away on it. */\n  protected readonly lockOnSuccess: boolean = false\n\n  /** Reads the fields and makes the call; it must call the SDK before its first `await`. */\n  protected abstract send(): Promise<void>\n\n  /** The error text a refusal shows. */\n  protected failureText(err: unknown): string {\n    return err instanceof Error && err.message !== '' ? err.message : 'Something went wrong.'\n  }\n\n  protected readonly onSubmit = (event: Event): void => {\n    event.preventDefault()\n    if (this.pending) return\n    this.pending = true\n    this.error = null\n    this.notice = null\n    const sent = this.send()\n    this.requestUpdate()\n    sent.then(\n      () => this.settle(null),\n      (err: unknown) => this.settle(this.failureText(err)),\n    )\n  }\n\n  private settle(error: string | null): void {\n    this.pending = error === null && this.lockOnSuccess\n    this.error = error\n    this.requestUpdate()\n  }\n\n  protected value(name: string): string {\n    return this.renderRoot.querySelector<HTMLInputElement>(`[name=\"${name}\"]`)?.value ?? ''\n  }\n\n  protected emit(name: string, detail: unknown): void {\n    this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }))\n  }\n\n  protected renderError(): TemplateResult | typeof nothing {\n    return this.error === null\n      ? nothing\n      : html`<div part=\"error\" role=\"alert\">${this.error}</div>`\n  }\n}\n"],"mappings":";;;;;;AAAA,SAAS,MAAM,eAAoC;AAmB5C,SAAS,YAAY,GAA8B;AACxD,SAAO;AAAA;AAAA,gCAEuB,EAAE,EAAE,IAAI,EAAE,KAAK;AAAA;AAAA;AAAA,aAGlC,EAAE,EAAE;AAAA,eACF,EAAE,IAAI;AAAA,eACN,EAAE,QAAQ,MAAM;AAAA,uBACR,EAAE,YAAY;AAAA,sBACf,EAAE,eAAe,OAAO;AAAA,oBAC1B,EAAE,aAAa,OAAO;AAAA,oBACtB,EAAE,YAAY,KAAK;AAAA,oBACnB,EAAE,YAAY,KAAK;AAAA,iBACtB,EAAE,SAAS,EAAE;AAAA,sBACR,EAAE,EAAE;AAAA;AAAA;AAAA;AAI1B;AAMO,IAAe,oBAAf,cAAyC,cAAc;AAAA,EAClD,UAAU;AAAA,EACV,QAAuB;AAAA,EACvB,SAAwB;AAAA;AAAA,EAEf,gBAAyB;AAAA;AAAA,EAMlC,YAAY,KAAsB;AAC1C,WAAO,eAAe,SAAS,IAAI,YAAY,KAAK,IAAI,UAAU;AAAA,EACpE;AAAA,EAEmB,WAAW,CAAC,UAAuB;AACpD,UAAM,eAAe;AACrB,QAAI,KAAK,QAAS;AAClB,SAAK,UAAU;AACf,SAAK,QAAQ;AACb,SAAK,SAAS;AACd,UAAM,OAAO,KAAK,KAAK;AACvB,SAAK,cAAc;AACnB,SAAK;AAAA,MACH,MAAM,KAAK,OAAO,IAAI;AAAA,MACtB,CAAC,QAAiB,KAAK,OAAO,KAAK,YAAY,GAAG,CAAC;AAAA,IACrD;AAAA,EACF;AAAA,EAEQ,OAAO,OAA4B;AACzC,SAAK,UAAU,UAAU,QAAQ,KAAK;AACtC,SAAK,QAAQ;AACb,SAAK,cAAc;AAAA,EACrB;AAAA,EAEU,MAAM,MAAsB;AACpC,WAAO,KAAK,WAAW,cAAgC,UAAU,IAAI,IAAI,GAAG,SAAS;AAAA,EACvF;AAAA,EAEU,KAAK,MAAc,QAAuB;AAClD,SAAK,cAAc,IAAI,YAAY,MAAM,EAAE,SAAS,MAAM,UAAU,MAAM,OAAO,CAAC,CAAC;AAAA,EACrF;AAAA,EAEU,cAA+C;AACvD,WAAO,KAAK,UAAU,OAClB,UACA,sCAAsC,KAAK,KAAK;AAAA,EACtD;AACF;","names":[]}

package/dist/chunk-RAOGZH3Z.js

@@ -0,0 +1,188 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalProductCard
+} from "./chunk-RZVFA3N5.js";
+import {
+  buttonStyles
+} from "./chunk-GHXTJ2CF.js";
+import {
+  NymbalElement,
+  baseStyles,
+  parsedJson,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/search-results.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-search-results",
+  reactName: "SearchResults",
+  // The search a server ran: the store's `results` (the card products) and the term they answer, shown until the
+  // search store settles.
+  attributes: [
+    { name: "results", prop: "results", type: "json" },
+    { name: "query", prop: "query", type: "string" }
+  ],
+  events: [],
+  parts: [
+    "query",
+    "loading",
+    "empty",
+    "empty-icon",
+    "empty-title",
+    "empty-text",
+    "header",
+    "count",
+    "grid",
+    "pagination",
+    "load-more"
+  ],
+  slots: ["no-term", "no-results"],
+  children: false
+};
+var NymbalSearchResults = class extends NymbalElement {
+  static schema = SCHEMA;
+  static uses = [NymbalProductCard];
+  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~='query'] {
+        margin: 0 0 var(--nymbal-spacing-md, 1rem);
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='loading'] {
+        padding: var(--nymbal-spacing-xl, 2rem) 0;
+        text-align: center;
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='empty'] {
+        padding: 4rem var(--nymbal-spacing-md, 1rem);
+        text-align: center;
+      }
+      [part~='empty-icon'] {
+        font-size: 3rem;
+        margin-bottom: var(--nymbal-spacing-md, 1rem);
+        opacity: 0.3;
+      }
+      [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'] {
+        max-width: 28ch;
+        margin: 0 auto;
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='header'] {
+        margin-bottom: var(--nymbal-spacing-md, 1rem);
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='grid'] {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+        gap: var(--nymbal-spacing-lg, 1.5rem);
+      }
+      [part~='pagination'] {
+        display: flex;
+        justify-content: center;
+        margin-top: var(--nymbal-spacing-xl, 2rem);
+      }
+    `
+  ];
+  stores() {
+    return [this.client.search];
+  }
+  storeSettled() {
+    this.results = void 0;
+  }
+  /**
+   * The results a server gave while they stand (`given`), else the search store's; with neither, no search. Given
+   * results are shown whether or not the server named their term.
+   */
+  shown() {
+    const given = parsedJson(this, "results", this.results);
+    if (given === void 0 && this.readsStores) {
+      return { ...this.client.search.getState(), given: false };
+    }
+    const results = given ?? [];
+    const query = this.query ?? "";
+    return { query, results, total: results.length, nextCursor: null, loading: false, given: true };
+  }
+  empty(title, text, slot) {
+    return html`
+      <div part="empty">
+        <div part="empty-icon" aria-hidden="true">&#128269;</div>
+        <slot name=${slot}>
+          <h2 part="empty-title">${title}</h2>
+          <p part="empty-text">${text}</p>
+        </slot>
+      </div>
+    `;
+  }
+  body(state) {
+    const { results, query } = state;
+    if (state.loading && results.length === 0) {
+      return html`<div part="loading" role="status">Searching...</div>`;
+    }
+    if (query === "" && !(state.given && results.length > 0)) {
+      return this.empty("Search our store", "Type a keyword to find products.", "no-term");
+    }
+    if (results.length === 0) {
+      return this.empty(
+        "No results found",
+        "Try a different search term or browse our categories.",
+        "no-results"
+      );
+    }
+    const total = state.total;
+    return html`
+      <div part="header">
+        <span part="count" data-testid="search-total"
+          >${total} result${total === 1 ? "" : "s"}</span
+        >
+      </div>
+      <div part="grid">
+        ${results.map(
+      (p) => html`<nymbal-product-card product=${JSON.stringify(p)}></nymbal-product-card>`
+    )}
+      </div>
+      ${state.nextCursor === null ? nothing : html`
+            <div part="pagination">
+              <button
+                type="button"
+                part="load-more"
+                class="btn btn-secondary"
+                data-testid="search-load-more"
+                ?disabled=${state.loading}
+                @click=${() => void this.client.search.loadMore()}
+              >
+                ${state.loading ? "Loading..." : "Load more"}
+              </button>
+            </div>
+          `}
+    `;
+  }
+  render() {
+    const state = this.shown();
+    const { query } = state;
+    return html`
+      ${query === "" ? nothing : html`<p part="query">Results for <strong>"${query}"</strong></p>`}
+      ${this.body(state)}
+    `;
+  }
+};
+
+export {
+  NymbalSearchResults
+};
+//# sourceMappingURL=chunk-RAOGZH3Z.js.map

package/dist/chunk-RAOGZH3Z.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/search-results.ts"],"sourcesContent":["import { css, html, nothing } from 'lit'\nimport type { SearchState } from '@nymbalhq/sdk'\nimport {\n  baseStyles,\n  NymbalElement,\n  parsedJson,\n  propertiesOf,\n  type ElementSchema,\n} from '../base-element.js'\nimport { buttonStyles } from '../view-styles.js'\nimport { NymbalProductCard } from './product-card.js'\n\ntype Shown = Pick<SearchState, 'query' | 'results' | 'total' | 'nextCursor' | 'loading'> & {\n  given: boolean\n}\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-search-results',\n  reactName: 'SearchResults',\n  // The search a server ran: the store's `results` (the card products) and the term they answer, shown until the\n  // search store settles.\n  attributes: [\n    { name: 'results', prop: 'results', type: 'json' },\n    { name: 'query', prop: 'query', type: 'string' },\n  ],\n  events: [],\n  parts: [\n    'query',\n    'loading',\n    'empty',\n    'empty-icon',\n    'empty-title',\n    'empty-text',\n    'header',\n    'count',\n    'grid',\n    'pagination',\n    'load-more',\n  ],\n  slots: ['no-term', 'no-results'],\n  children: false,\n}\n\n/**\n * The search store's results: the term, a grid of `nymbal-product-card`s, the no-term and no-results states, and load\n * more. The page owns the term and the category (the URL and the search input) and searches; this renders the answer.\n */\nexport class NymbalSearchResults extends NymbalElement {\n  static override schema = SCHEMA\n  static uses = [NymbalProductCard]\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~='query'] {\n        margin: 0 0 var(--nymbal-spacing-md, 1rem);\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='loading'] {\n        padding: var(--nymbal-spacing-xl, 2rem) 0;\n        text-align: center;\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='empty'] {\n        padding: 4rem var(--nymbal-spacing-md, 1rem);\n        text-align: center;\n      }\n      [part~='empty-icon'] {\n        font-size: 3rem;\n        margin-bottom: var(--nymbal-spacing-md, 1rem);\n        opacity: 0.3;\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        max-width: 28ch;\n        margin: 0 auto;\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='header'] {\n        margin-bottom: var(--nymbal-spacing-md, 1rem);\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='grid'] {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));\n        gap: var(--nymbal-spacing-lg, 1.5rem);\n      }\n      [part~='pagination'] {\n        display: flex;\n        justify-content: center;\n        margin-top: var(--nymbal-spacing-xl, 2rem);\n      }\n    `,\n  ]\n\n  declare results: unknown\n  declare query: string | undefined\n\n  protected override stores() {\n    return [this.client.search]\n  }\n\n  protected override storeSettled(): void {\n    this.results = undefined\n  }\n\n  /**\n   * The results a server gave while they stand (`given`), else the search store's; with neither, no search. Given\n   * results are shown whether or not the server named their term.\n   */\n  private shown(): Shown {\n    const given = parsedJson<SearchState['results']>(this, 'results', this.results)\n    if (given === undefined && this.readsStores) {\n      return { ...this.client.search.getState(), given: false }\n    }\n    const results = given ?? []\n    const query = this.query ?? ''\n    return { query, results, total: results.length, nextCursor: null, loading: false, given: true }\n  }\n\n  private empty(title: string, text: string, slot: string) {\n    return html`\n      <div part=\"empty\">\n        <div part=\"empty-icon\" aria-hidden=\"true\">&#128269;</div>\n        <slot name=${slot}>\n          <h2 part=\"empty-title\">${title}</h2>\n          <p part=\"empty-text\">${text}</p>\n        </slot>\n      </div>\n    `\n  }\n\n  private body(state: Shown) {\n    const { results, query } = state\n    // A load-more or a category change keeps the results shown until its answer replaces them.\n    if (state.loading && results.length === 0) {\n      return html`<div part=\"loading\" role=\"status\">Searching...</div>`\n    }\n    if (query === '' && !(state.given && results.length > 0)) {\n      return this.empty('Search our store', 'Type a keyword to find products.', 'no-term')\n    }\n    if (results.length === 0) {\n      return this.empty(\n        'No results found',\n        'Try a different search term or browse our categories.',\n        'no-results',\n      )\n    }\n    const total = state.total\n    return html`\n      <div part=\"header\">\n        <span part=\"count\" data-testid=\"search-total\"\n          >${total} result${total === 1 ? '' : 's'}</span\n        >\n      </div>\n      <div part=\"grid\">\n        ${results.map(\n          (p) => html`<nymbal-product-card product=${JSON.stringify(p)}></nymbal-product-card>`,\n        )}\n      </div>\n      ${state.nextCursor === null\n        ? nothing\n        : html`\n            <div part=\"pagination\">\n              <button\n                type=\"button\"\n                part=\"load-more\"\n                class=\"btn btn-secondary\"\n                data-testid=\"search-load-more\"\n                ?disabled=${state.loading}\n                @click=${() => void this.client.search.loadMore()}\n              >\n                ${state.loading ? 'Loading...' : 'Load more'}\n              </button>\n            </div>\n          `}\n    `\n  }\n\n  protected override render() {\n    const state = this.shown()\n    const { query } = state\n    return html`\n      ${query === '' ? nothing : html`<p part=\"query\">Results for <strong>\"${query}\"</strong></p>`}\n      ${this.body(state)}\n    `\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-RVSKX2RX.js

@@ -0,0 +1,11 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+
+// src/format.ts
+function formatPrice(minor, currency) {
+  return new Intl.NumberFormat("en-GB", { style: "currency", currency }).format(minor / 100);
+}
+
+export {
+  formatPrice
+};
+//# sourceMappingURL=chunk-RVSKX2RX.js.map

package/dist/chunk-RVSKX2RX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/format.ts"],"sourcesContent":["/** Minor units as the storefronts show money (`en-GB`, the templates' own formatting). */\nexport function formatPrice(minor: number, currency: string): string {\n  return new Intl.NumberFormat('en-GB', { style: 'currency', currency }).format(minor / 100)\n}\n"],"mappings":";;;AACO,SAAS,YAAY,OAAe,UAA0B;AACnE,SAAO,IAAI,KAAK,aAAa,SAAS,EAAE,OAAO,YAAY,SAAS,CAAC,EAAE,OAAO,QAAQ,GAAG;AAC3F;","names":[]}