@nymbalhq/web-components 1.1.0 → 1.3.0

package/dist/chunk-NE6UHTOT.js

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

package/dist/chunk-NE6UHTOT.js.map

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

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