@nymbalhq/web-components 1.1.0 → 1.3.0

package/dist/chunk-WEEHXWM3.js

@@ -0,0 +1,172 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalElement,
+  baseStyles,
+  parsedJson,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/product-filter.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-product-filter",
+  reactName: "ProductFilter",
+  attributes: [
+    { name: "facets", prop: "facets", type: "json" },
+    { name: "source", prop: "source", type: "string" }
+  ],
+  events: [
+    {
+      name: "nymbal:filter:changed",
+      prop: "onFilterChange",
+      detail: "{ name: string; value: string }"
+    }
+  ],
+  parts: ["group", "label", "option", "checkbox", "option-label", "count"],
+  slots: [],
+  children: false
+};
+var NymbalProductFilter = 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~='group'] {
+        margin-bottom: var(--nymbal-spacing-lg, 1.5rem);
+      }
+      [part~='label'] {
+        display: block;
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        font-weight: var(--nymbal-font-weight-bold, 700);
+        margin-bottom: var(--nymbal-spacing-sm, 0.5rem);
+        color: var(--nymbal-color-text, #18181b);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+      [part~='option'] {
+        display: flex;
+        align-items: center;
+        gap: var(--nymbal-spacing-sm, 0.5rem);
+        padding: var(--nymbal-spacing-xs, 0.25rem) 0;
+        cursor: pointer;
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        color: var(--nymbal-color-text, #18181b);
+      }
+      [part~='checkbox'] {
+        margin: 0;
+        accent-color: var(--nymbal-color-primary, #18181b);
+      }
+      [part~='count'] {
+        color: var(--nymbal-color-text-muted, #71717a);
+        font-size: var(--nymbal-font-size-xs, 0.75rem);
+      }
+    `
+  ];
+  /** Both: a wrapper may set `source` after the element has connected. */
+  stores() {
+    return [this.client.productList, this.client.search];
+  }
+  /** With `source="search"` the `facets` a server read stand until the search settles; a listing's always show. */
+  storeSettled(store) {
+    if (store === this.client.search && this.getAttribute("source") === "search") {
+      this.facets = void 0;
+    }
+  }
+  /** The facets this render shows, and whether each value is checked. */
+  shown() {
+    if (this.getAttribute("source") === "search") {
+      const given = parsedJson(this, "facets", this.facets);
+      const { facets, category } = given === void 0 && this.readsStores ? this.client.search.getState() : { facets: given ?? [], category: null };
+      return {
+        facets: facets.filter((f) => f.field === "category"),
+        checked: (_field, value) => value === category
+      };
+    }
+    const filters = this.readsStores ? this.client.productList.getState().filters : {};
+    return {
+      facets: this.facetsAttribute(),
+      checked: (field, value) => {
+        const active = filters[field];
+        return Array.isArray(active) ? active.includes(value) : active === value;
+      }
+    };
+  }
+  _shown = { facets: [], checked: () => false };
+  willUpdate(_changed) {
+    this._shown = this.shown();
+    this.toggleAttribute("empty", this._shown.facets.length === 0);
+  }
+  render() {
+    const { facets, checked } = this._shown;
+    return facets.map(
+      (facet) => html`
+        <div part="group" data-testid="filter-group-${facet.field}">
+          <span part="label">${facet.label}</span>
+          ${facet.values.map(
+        (v) => html`
+              <label part="option" data-testid="filter-option-${v.value}">
+                <input
+                  part="checkbox"
+                  type="checkbox"
+                  data-filter-name=${facet.field}
+                  data-filter-value=${v.value}
+                  .checked=${checked(facet.field, v.value)}
+                  @change=${this.handleChange}
+                />
+                <span part="option-label">${v.label ?? v.value}</span>
+                ${v.count !== void 0 ? html`<span part="count" class="nymbal-filter-count">(${v.count})</span>` : nothing}
+              </label>
+            `
+      )}
+        </div>
+      `
+    );
+  }
+  handleChange = (e) => {
+    const input = e.target;
+    const value = input.dataset["filterValue"];
+    if (this.getAttribute("source") === "search") {
+      void this.client.search.setCategory(input.checked ? value : null);
+      this.emit("category", input.checked ? value : "");
+      return;
+    }
+    const name = input.dataset["filterName"];
+    const current = this.client.productList.getState().filters[name];
+    if (input.checked) {
+      const values = Array.isArray(current) ? [...current, value] : current ? [current, value] : value;
+      void this.client.productList.applyFilter(name, values);
+    } else if (Array.isArray(current)) {
+      const remaining = current.filter((v) => v !== value);
+      if (remaining.length > 0) {
+        void this.client.productList.applyFilter(name, remaining);
+      } else {
+        void this.client.productList.removeFilter(name);
+      }
+    } else {
+      void this.client.productList.removeFilter(name);
+    }
+    this.emit(name, value);
+  };
+  emit(name, value) {
+    this.dispatchEvent(
+      new CustomEvent("nymbal:filter:changed", {
+        bubbles: true,
+        composed: true,
+        detail: { name, value }
+      })
+    );
+  }
+  facetsAttribute() {
+    return parsedJson(this, "facets", this.facets) ?? [];
+  }
+};
+
+export {
+  NymbalProductFilter
+};
+//# sourceMappingURL=chunk-WEEHXWM3.js.map

package/dist/chunk-WEEHXWM3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/product-filter.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues } from 'lit'\nimport type { Facet } from '@nymbalhq/types'\nimport {\n  baseStyles,\n  NymbalElement,\n  parsedJson,\n  propertiesOf,\n  type ElementSchema,\n  type Subscribable,\n} from '../base-element.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-product-filter',\n  reactName: 'ProductFilter',\n  attributes: [\n    { name: 'facets', prop: 'facets', type: 'json' },\n    { name: 'source', prop: 'source', type: 'string' },\n  ],\n  events: [\n    {\n      name: 'nymbal:filter:changed',\n      prop: 'onFilterChange',\n      detail: '{ name: string; value: string }',\n    },\n  ],\n  parts: ['group', 'label', 'option', 'checkbox', 'option-label', 'count'],\n  slots: [],\n  children: false,\n}\n\n/**\n * The facet filter. By default it reads the `facets` attribute and filters the product list. With `source=\"search\"`\n * it renders the search's own facets and narrows the search to one category: choosing an option selects it, choosing\n * the selected option again clears it. The host carries `empty` while it renders no facet, so a page can lay out\n * around it (its light DOM is always empty).\n */\nexport class NymbalProductFilter extends NymbalElement {\n  static override schema = SCHEMA\n  static override properties = propertiesOf(SCHEMA)\n\n  static override styles = [\n    baseStyles,\n    css`\n      :host {\n        display: block;\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n      }\n      [part~='group'] {\n        margin-bottom: var(--nymbal-spacing-lg, 1.5rem);\n      }\n      [part~='label'] {\n        display: block;\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n        margin-bottom: var(--nymbal-spacing-sm, 0.5rem);\n        color: var(--nymbal-color-text, #18181b);\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n      }\n      [part~='option'] {\n        display: flex;\n        align-items: center;\n        gap: var(--nymbal-spacing-sm, 0.5rem);\n        padding: var(--nymbal-spacing-xs, 0.25rem) 0;\n        cursor: pointer;\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        color: var(--nymbal-color-text, #18181b);\n      }\n      [part~='checkbox'] {\n        margin: 0;\n        accent-color: var(--nymbal-color-primary, #18181b);\n      }\n      [part~='count'] {\n        color: var(--nymbal-color-text-muted, #71717a);\n        font-size: var(--nymbal-font-size-xs, 0.75rem);\n      }\n    `,\n  ]\n\n  declare facets: unknown\n\n  /** Both: a wrapper may set `source` after the element has connected. */\n  protected override stores() {\n    return [this.client.productList, this.client.search]\n  }\n\n  /** With `source=\"search\"` the `facets` a server read stand until the search settles; a listing's always show. */\n  protected override storeSettled(store: Subscribable): void {\n    if (store === this.client.search && this.getAttribute('source') === 'search') {\n      this.facets = undefined\n    }\n  }\n\n  /** The facets this render shows, and whether each value is checked. */\n  private shown(): { facets: Facet[]; checked: (field: string, value: string) => boolean } {\n    if (this.getAttribute('source') === 'search') {\n      const given = parsedJson<Facet[]>(this, 'facets', this.facets)\n      const { facets, category } =\n        given === undefined && this.readsStores\n          ? this.client.search.getState()\n          : { facets: given ?? [], category: null }\n      return {\n        facets: facets.filter((f) => f.field === 'category'),\n        checked: (_field, value) => value === category,\n      }\n    }\n    const filters = this.readsStores ? this.client.productList.getState().filters : {}\n    return {\n      facets: this.facetsAttribute(),\n      checked: (field, value) => {\n        const active = filters[field]\n        return Array.isArray(active) ? active.includes(value) : active === value\n      },\n    }\n  }\n\n  private _shown: ReturnType<NymbalProductFilter['shown']> = { facets: [], checked: () => false }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    this._shown = this.shown()\n    this.toggleAttribute('empty', this._shown.facets.length === 0)\n  }\n\n  protected override render() {\n    const { facets, checked } = this._shown\n    return facets.map(\n      (facet) => html`\n        <div part=\"group\" data-testid=\"filter-group-${facet.field}\">\n          <span part=\"label\">${facet.label}</span>\n          ${facet.values.map(\n            (v) => html`\n              <label part=\"option\" data-testid=\"filter-option-${v.value}\">\n                <input\n                  part=\"checkbox\"\n                  type=\"checkbox\"\n                  data-filter-name=${facet.field}\n                  data-filter-value=${v.value}\n                  .checked=${checked(facet.field, v.value)}\n                  @change=${this.handleChange}\n                />\n                <span part=\"option-label\">${v.label ?? v.value}</span>\n                ${v.count !== undefined ? html`<span part=\"count\" class=\"nymbal-filter-count\">(${v.count})</span>` : nothing}\n              </label>\n            `,\n          )}\n        </div>\n      `,\n    )\n  }\n\n  private handleChange = (e: Event): void => {\n    const input = e.target as HTMLInputElement\n    const value = input.dataset['filterValue']!\n    if (this.getAttribute('source') === 'search') {\n      void this.client.search.setCategory(input.checked ? value : null)\n      this.emit('category', input.checked ? value : '')\n      return\n    }\n    const name = input.dataset['filterName']!\n    const current = this.client.productList.getState().filters[name]\n    if (input.checked) {\n      const values = Array.isArray(current)\n        ? [...current, value]\n        : current\n          ? [current, value]\n          : value\n      void this.client.productList.applyFilter(name, values)\n    } else if (Array.isArray(current)) {\n      const remaining = current.filter((v) => v !== value)\n      if (remaining.length > 0) {\n        void this.client.productList.applyFilter(name, remaining)\n      } else {\n        void this.client.productList.removeFilter(name)\n      }\n    } else {\n      void this.client.productList.removeFilter(name)\n    }\n    this.emit(name, value)\n  }\n\n  private emit(name: string, value: string): void {\n    this.dispatchEvent(\n      new CustomEvent('nymbal:filter:changed', {\n        bubbles: true,\n        composed: true,\n        detail: { name, value },\n      }),\n    )\n  }\n\n  private facetsAttribute(): Facet[] {\n    return parsedJson<Facet[]>(this, 'facets', this.facets) ?? []\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-WTEVTCIL.js

@@ -0,0 +1,128 @@
+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,
+  parsedJson,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/profile-form.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-profile-form",
+  reactName: "ProfileForm",
+  // The customer a server read, shown until the auth store settles.
+  attributes: [{ name: "customer", prop: "customer", type: "json" }],
+  events: [
+    {
+      name: "nymbal:profile:saved",
+      prop: "onSaved",
+      detail: "{ customer: unknown }"
+    }
+  ],
+  parts: ["form", "row", "field", "label", "input", "actions", "submit", "error", "message"],
+  slots: ["submit-label"],
+  children: false
+};
+var NymbalProfileForm = 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);
+      }
+      [part~='submit'] {
+        width: auto;
+      }
+    `
+  ];
+  stores() {
+    return [this.client.auth];
+  }
+  storeSettled() {
+    this.customer = void 0;
+  }
+  async send() {
+    await this.client.auth.updateProfile({
+      firstName: this.value("firstName"),
+      lastName: this.value("lastName"),
+      phone: this.value("phone")
+    });
+    this.notice = "Profile updated successfully.";
+    this.emit("nymbal:profile:saved", { customer: this.client.auth.getState().customer });
+  }
+  failureText(err) {
+    return err instanceof Error && err.message !== "" ? err.message : "Failed to update profile.";
+  }
+  render() {
+    const customer = parsedJson(this, "customer", this.customer) ?? (this.readsStores ? this.client.auth.getState().customer : null);
+    return html`
+      ${this.renderError()}
+      <form part="form" data-testid="profile-form" @submit=${this.onSubmit}>
+        <div part="row">
+          ${renderField({
+      id: "profile-firstName",
+      name: "firstName",
+      label: "First Name",
+      autocomplete: "given-name",
+      value: customer?.firstName ?? ""
+    })}
+          ${renderField({
+      id: "profile-lastName",
+      name: "lastName",
+      label: "Last Name",
+      autocomplete: "family-name",
+      value: customer?.lastName ?? ""
+    })}
+        </div>
+        ${renderField({
+      id: "profile-email",
+      name: "email",
+      label: "Email",
+      type: "email",
+      autocomplete: "email",
+      disabled: true,
+      value: customer?.email ?? ""
+    })}
+        ${renderField({
+      id: "profile-phone",
+      name: "phone",
+      label: "Phone",
+      type: "tel",
+      autocomplete: "tel",
+      value: customer?.phone ?? ""
+    })}
+        <div part="actions">
+          <button
+            type="submit"
+            part="submit"
+            class="btn btn-primary"
+            data-testid="profile-save"
+            ?disabled=${this.pending}
+          >
+            ${this.pending ? "Saving..." : html`<slot name="submit-label">Save Changes</slot>`}
+          </button>
+        </div>
+        ${this.notice === null ? nothing : html`<p part="message" role="status">${this.notice}</p>`}
+      </form>
+    `;
+  }
+};
+
+export {
+  NymbalProfileForm
+};
+//# sourceMappingURL=chunk-WTEVTCIL.js.map

package/dist/chunk-WTEVTCIL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/profile-form.ts"],"sourcesContent":["import { css, html, nothing } from 'lit'\nimport type { Customer } from '@nymbalhq/types'\nimport { baseStyles, parsedJson, 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-profile-form',\n  reactName: 'ProfileForm',\n  // The customer a server read, shown until the auth store settles.\n  attributes: [{ name: 'customer', prop: 'customer', type: 'json' }],\n  events: [\n    {\n      name: 'nymbal:profile:saved',\n      prop: 'onSaved',\n      detail: '{ customer: unknown }',\n    },\n  ],\n  parts: ['form', 'row', 'field', 'label', 'input', 'actions', 'submit', 'error', 'message'],\n  slots: ['submit-label'],\n  children: false,\n}\n\n/** The signed-in customer's name and phone, filled from the auth store and saved through it. */\nexport class NymbalProfileForm 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      [part~='submit'] {\n        width: auto;\n      }\n    `,\n  ]\n\n  declare customer: unknown\n\n  protected override stores() {\n    return [this.client.auth]\n  }\n\n  protected override storeSettled(): void {\n    this.customer = undefined\n  }\n\n  protected override async send(): Promise<void> {\n    await this.client.auth.updateProfile({\n      firstName: this.value('firstName'),\n      lastName: this.value('lastName'),\n      phone: this.value('phone'),\n    })\n    this.notice = 'Profile updated successfully.'\n    this.emit('nymbal:profile:saved', { customer: this.client.auth.getState().customer })\n  }\n\n  protected override failureText(err: unknown): string {\n    return err instanceof Error && err.message !== '' ? err.message : 'Failed to update profile.'\n  }\n\n  protected override render() {\n    const customer =\n      parsedJson<Customer>(this, 'customer', this.customer) ??\n      (this.readsStores ? this.client.auth.getState().customer : null)\n    return html`\n      ${this.renderError()}\n      <form part=\"form\" data-testid=\"profile-form\" @submit=${this.onSubmit}>\n        <div part=\"row\">\n          ${renderField({\n            id: 'profile-firstName',\n            name: 'firstName',\n            label: 'First Name',\n            autocomplete: 'given-name',\n            value: customer?.firstName ?? '',\n          })}\n          ${renderField({\n            id: 'profile-lastName',\n            name: 'lastName',\n            label: 'Last Name',\n            autocomplete: 'family-name',\n            value: customer?.lastName ?? '',\n          })}\n        </div>\n        ${renderField({\n          id: 'profile-email',\n          name: 'email',\n          label: 'Email',\n          type: 'email',\n          autocomplete: 'email',\n          disabled: true,\n          value: customer?.email ?? '',\n        })}\n        ${renderField({\n          id: 'profile-phone',\n          name: 'phone',\n          label: 'Phone',\n          type: 'tel',\n          autocomplete: 'tel',\n          value: customer?.phone ?? '',\n        })}\n        <div part=\"actions\">\n          <button\n            type=\"submit\"\n            part=\"submit\"\n            class=\"btn btn-primary\"\n            data-testid=\"profile-save\"\n            ?disabled=${this.pending}\n          >\n            ${this.pending ? 'Saving...' : html`<slot name=\"submit-label\">Save Changes</slot>`}\n          </button>\n        </div>\n        ${this.notice === null\n          ? nothing\n          : html`<p part=\"message\" role=\"status\">${this.notice}</p>`}\n      </form>\n    `\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAS,KAAK,MAAM,eAAe;AAMnC,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA;AAAA,EAEX,YAAY,CAAC,EAAE,MAAM,YAAY,MAAM,YAAY,MAAM,OAAO,CAAC;AAAA,EACjE,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,WAAW,UAAU,SAAS,SAAS;AAAA,EACzF,OAAO,CAAC,cAAc;AAAA,EACtB,UAAU;AACZ;AAGO,IAAM,oBAAN,cAAgC,kBAAkB;AAAA,EACvD,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,EAUF;AAAA,EAImB,SAAS;AAC1B,WAAO,CAAC,KAAK,OAAO,IAAI;AAAA,EAC1B;AAAA,EAEmB,eAAqB;AACtC,SAAK,WAAW;AAAA,EAClB;AAAA,EAEA,MAAyB,OAAsB;AAC7C,UAAM,KAAK,OAAO,KAAK,cAAc;AAAA,MACnC,WAAW,KAAK,MAAM,WAAW;AAAA,MACjC,UAAU,KAAK,MAAM,UAAU;AAAA,MAC/B,OAAO,KAAK,MAAM,OAAO;AAAA,IAC3B,CAAC;AACD,SAAK,SAAS;AACd,SAAK,KAAK,wBAAwB,EAAE,UAAU,KAAK,OAAO,KAAK,SAAS,EAAE,SAAS,CAAC;AAAA,EACtF;AAAA,EAEmB,YAAY,KAAsB;AACnD,WAAO,eAAe,SAAS,IAAI,YAAY,KAAK,IAAI,UAAU;AAAA,EACpE;AAAA,EAEmB,SAAS;AAC1B,UAAM,WACJ,WAAqB,MAAM,YAAY,KAAK,QAAQ,MACnD,KAAK,cAAc,KAAK,OAAO,KAAK,SAAS,EAAE,WAAW;AAC7D,WAAO;AAAA,QACH,KAAK,YAAY,CAAC;AAAA,6DACmC,KAAK,QAAQ;AAAA;AAAA,YAE9D,YAAY;AAAA,MACZ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,UAAU,aAAa;AAAA,IAChC,CAAC,CAAC;AAAA,YACA,YAAY;AAAA,MACZ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,UAAU,YAAY;AAAA,IAC/B,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,OAAO,UAAU,SAAS;AAAA,IAC5B,CAAC,CAAC;AAAA,UACA,YAAY;AAAA,MACZ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,MACd,OAAO,UAAU,SAAS;AAAA,IAC5B,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOc,KAAK,OAAO;AAAA;AAAA,cAEtB,KAAK,UAAU,cAAc,mDAAmD;AAAA;AAAA;AAAA,UAGpF,KAAK,WAAW,OACd,UACA,uCAAuC,KAAK,MAAM,MAAM;AAAA;AAAA;AAAA,EAGlE;AACF;","names":[]}

package/dist/chunk-XPFGMYBV.js

@@ -0,0 +1,137 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalVariantSelector
+} from "./chunk-H3ZBYNHV.js";
+import {
+  NymbalReviewList
+} from "./chunk-7JAAOVCE.js";
+import {
+  NymbalSearchBar
+} from "./chunk-4COVK727.js";
+import {
+  NymbalSearchResults
+} from "./chunk-RAOGZH3Z.js";
+import {
+  NymbalSiteFooter
+} from "./chunk-FIF6GQ6U.js";
+import {
+  NymbalSiteHeader
+} from "./chunk-W23P7SI4.js";
+import {
+  NymbalSortDropdown
+} from "./chunk-EBMA7JGV.js";
+import {
+  NymbalStockBadge
+} from "./chunk-O2YKCDR2.js";
+import {
+  NymbalToast
+} from "./chunk-2TPQNQYO.js";
+import {
+  NymbalProductFilter
+} from "./chunk-WEEHXWM3.js";
+import {
+  NymbalProductGrid
+} from "./chunk-5VWZ2U5K.js";
+import {
+  NymbalProductCard
+} from "./chunk-RZVFA3N5.js";
+import {
+  NymbalProductPrice
+} from "./chunk-DXWMNB5F.js";
+import {
+  NymbalProfileForm
+} from "./chunk-WTEVTCIL.js";
+import {
+  NymbalRegisterForm
+} from "./chunk-NW47OJVN.js";
+import {
+  NymbalReviewForm
+} from "./chunk-NE6UHTOT.js";
+import {
+  NymbalCartPage
+} from "./chunk-VTQVGNVC.js";
+import {
+  NymbalQuantitySelector
+} from "./chunk-HPBC3OG7.js";
+import {
+  NymbalCategoryNav
+} from "./chunk-IYT7VXFS.js";
+import {
+  NymbalCheckout
+} from "./chunk-5G3C53A2.js";
+import {
+  NymbalImageGallery
+} from "./chunk-U2PU4CWB.js";
+import {
+  NymbalLoginForm
+} from "./chunk-42SSME5H.js";
+import {
+  NymbalMiniCart
+} from "./chunk-2XXBQPDB.js";
+import {
+  NymbalOrderSummary
+} from "./chunk-SM7TASEW.js";
+import {
+  NymbalPaymentElement
+} from "./chunk-W7D3STJH.js";
+import {
+  NymbalAddToCart
+} from "./chunk-LHYXNQWY.js";
+import {
+  NymbalAddressBook
+} from "./chunk-B73QVSA5.js";
+import {
+  NymbalAddressForm
+} from "./chunk-V55K2CS5.js";
+import {
+  NymbalBreadcrumb
+} from "./chunk-N4Y5DI4X.js";
+import {
+  NymbalCartDrawer
+} from "./chunk-LSQPUZK6.js";
+import {
+  define
+} from "./chunk-EYDMJNNK.js";
+
+// src/register-components.ts
+var ELEMENTS = [
+  NymbalAddToCart,
+  NymbalCartDrawer,
+  NymbalMiniCart,
+  NymbalVariantSelector,
+  NymbalQuantitySelector,
+  NymbalSearchBar,
+  NymbalProductFilter,
+  NymbalToast,
+  NymbalPaymentElement,
+  NymbalSortDropdown,
+  NymbalCartPage,
+  NymbalProductCard,
+  NymbalSearchResults,
+  NymbalLoginForm,
+  NymbalRegisterForm,
+  NymbalProfileForm,
+  NymbalAddressForm,
+  NymbalAddressBook,
+  NymbalCheckout,
+  NymbalProductGrid,
+  NymbalProductPrice,
+  NymbalStockBadge,
+  NymbalBreadcrumb,
+  NymbalImageGallery,
+  NymbalSiteHeader,
+  NymbalSiteFooter,
+  NymbalCategoryNav,
+  NymbalReviewList,
+  NymbalReviewForm,
+  NymbalOrderSummary
+];
+function registerComponents() {
+  define(...ELEMENTS);
+}
+
+export {
+  ELEMENTS,
+  registerComponents
+};
+//# sourceMappingURL=chunk-XPFGMYBV.js.map

package/dist/chunk-XPFGMYBV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/register-components.ts"],"sourcesContent":["import './hydrate-support.js'\nimport { define } from './define.js'\nimport { NymbalAddToCart } from './components/add-to-cart.js'\nimport { NymbalCartDrawer } from './components/cart-drawer.js'\nimport { NymbalMiniCart } from './components/mini-cart.js'\nimport { NymbalVariantSelector } from './components/variant-selector.js'\nimport { NymbalQuantitySelector } from './components/quantity-selector.js'\nimport { NymbalSearchBar } from './components/search-bar.js'\nimport { NymbalProductFilter } from './components/product-filter.js'\nimport { NymbalToast } from './components/toast.js'\nimport { NymbalPaymentElement } from './components/payment-element.js'\nimport { NymbalSortDropdown } from './components/sort-dropdown.js'\nimport { NymbalCartPage } from './components/cart-page.js'\nimport { NymbalProductCard } from './components/product-card.js'\nimport { NymbalSearchResults } from './components/search-results.js'\nimport { NymbalLoginForm } from './components/login-form.js'\nimport { NymbalRegisterForm } from './components/register-form.js'\nimport { NymbalProfileForm } from './components/profile-form.js'\nimport { NymbalAddressForm } from './components/address-form.js'\nimport { NymbalAddressBook } from './components/address-book.js'\nimport { NymbalCheckout } from './components/checkout.js'\nimport { NymbalProductGrid } from './components/product-grid.js'\nimport { NymbalProductPrice } from './components/product-price.js'\nimport { NymbalStockBadge } from './components/stock-badge.js'\nimport { NymbalBreadcrumb } from './components/breadcrumb.js'\nimport { NymbalImageGallery } from './components/image-gallery.js'\nimport { NymbalSiteHeader } from './components/site-header.js'\nimport { NymbalSiteFooter } from './components/site-footer.js'\nimport { NymbalCategoryNav } from './components/category-nav.js'\nimport { NymbalReviewList } from './components/review-list.js'\nimport { NymbalReviewForm } from './components/review-form.js'\nimport { NymbalOrderSummary } from './components/order-summary.js'\n\n/** Every element the package defines. */\nexport const ELEMENTS = [\n  NymbalAddToCart,\n  NymbalCartDrawer,\n  NymbalMiniCart,\n  NymbalVariantSelector,\n  NymbalQuantitySelector,\n  NymbalSearchBar,\n  NymbalProductFilter,\n  NymbalToast,\n  NymbalPaymentElement,\n  NymbalSortDropdown,\n  NymbalCartPage,\n  NymbalProductCard,\n  NymbalSearchResults,\n  NymbalLoginForm,\n  NymbalRegisterForm,\n  NymbalProfileForm,\n  NymbalAddressForm,\n  NymbalAddressBook,\n  NymbalCheckout,\n  NymbalProductGrid,\n  NymbalProductPrice,\n  NymbalStockBadge,\n  NymbalBreadcrumb,\n  NymbalImageGallery,\n  NymbalSiteHeader,\n  NymbalSiteFooter,\n  NymbalCategoryNav,\n  NymbalReviewList,\n  NymbalReviewForm,\n  NymbalOrderSummary,\n]\n\n/**\n * Defines every element, and registers the built-in payment drivers, except a tag or driver name the project has\n * already defined: the project's wins. A page that renders a few elements passes those to `define` instead.\n */\nexport function registerComponents(): void {\n  define(...ELEMENTS)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCO,IAAM,WAAW;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAMO,SAAS,qBAA2B;AACzC,SAAO,GAAG,QAAQ;AACpB;","names":[]}

package/dist/elements/nymbal-add-to-cart.d.ts

@@ -0,0 +1,14 @@
+import * as _nymbalhq_sdk from '@nymbalhq/sdk';
+import * as lit from 'lit';
+import { NymbalElement, ElementSchema } from '../index.js';
+
+declare class NymbalAddToCart extends NymbalElement {
+    static schema: ElementSchema;
+    static properties: lit.PropertyDeclarations;
+    static styles: lit.CSSResult[];
+    protected stores(): _nymbalhq_sdk.CartStore[];
+    protected render(): lit.TemplateResult<1>;
+    private handleClick;
+}
+
+export { NymbalAddToCart };

package/dist/elements/nymbal-add-to-cart.js

@@ -0,0 +1,10 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalAddToCart
+} from "../chunk-LHYXNQWY.js";
+import "../chunk-EYDMJNNK.js";
+import "../chunk-UCEVCLQ7.js";
+export {
+  NymbalAddToCart
+};
+//# sourceMappingURL=nymbal-add-to-cart.js.map

package/dist/elements/nymbal-add-to-cart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/nymbal-address-book.d.ts

@@ -0,0 +1,30 @@
+import * as lit from 'lit';
+import { ElementSchema } from '../index.js';
+import { N as NymbalFormElement } from '../form-element-C-qo3gpD.js';
+import { NymbalAddressForm } from './nymbal-address-form.js';
+import '@nymbalhq/sdk';
+import '@nymbalhq/types';
+
+/** The signed-in customer's saved addresses, and the form that adds one. */
+declare class NymbalAddressBook extends NymbalFormElement {
+    static schema: ElementSchema;
+    static uses: (typeof NymbalAddressForm)[];
+    static properties: lit.PropertyDeclarations;
+    static styles: lit.CSSResult[];
+    addresses: unknown;
+    /** null until the first list answers. */
+    private listed;
+    private loadFailed;
+    connectedCallback(): void;
+    /** The list's answer settles the book: the addresses a server gave give way to it. */
+    private load;
+    private get addressForm();
+    protected send(): Promise<void>;
+    protected failureText(): string;
+    private readonly onAddSubmit;
+    private renderAddress;
+    private renderList;
+    protected render(): lit.TemplateResult<1>;
+}
+
+export { NymbalAddressBook };

package/dist/elements/nymbal-address-book.js

@@ -0,0 +1,13 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalAddressBook
+} from "../chunk-B73QVSA5.js";
+import "../chunk-V55K2CS5.js";
+import "../chunk-PN6QKYE4.js";
+import "../chunk-GHXTJ2CF.js";
+import "../chunk-EYDMJNNK.js";
+import "../chunk-UCEVCLQ7.js";
+export {
+  NymbalAddressBook
+};
+//# sourceMappingURL=nymbal-address-book.js.map

package/dist/elements/nymbal-address-book.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/nymbal-address-form.d.ts

@@ -0,0 +1,29 @@
+import * as lit from 'lit';
+import { Address } from '@nymbalhq/types';
+import { NymbalElement, ElementSchema } from '../index.js';
+import '@nymbalhq/sdk';
+
+/**
+ * The address fields, with ids and test ids `<id-prefix>-<field>`. It renders no `<form>`: the view that holds it owns
+ * the submit (Enter in a field submits it) and reads `value`.
+ */
+declare class NymbalAddressForm extends NymbalElement {
+    static schema: ElementSchema;
+    static properties: lit.PropertyDeclarations;
+    static styles: lit.CSSResult[];
+    idPrefix: string | undefined;
+    private input;
+    /** The address as typed, trimmed; an empty second line is left out. */
+    get value(): Address;
+    /** Shows the browser's message on the first field that is not valid, as a native form would. */
+    reportValidity(): boolean;
+    reset(): void;
+    /**
+     * 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.
+     */
+    private readonly onKeydown;
+    protected render(): lit.TemplateResult<1>;
+}
+
+export { NymbalAddressForm };

package/dist/elements/nymbal-address-form.js

@@ -0,0 +1,12 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalAddressForm
+} from "../chunk-V55K2CS5.js";
+import "../chunk-PN6QKYE4.js";
+import "../chunk-GHXTJ2CF.js";
+import "../chunk-EYDMJNNK.js";
+import "../chunk-UCEVCLQ7.js";
+export {
+  NymbalAddressForm
+};
+//# sourceMappingURL=nymbal-address-form.js.map

package/dist/elements/nymbal-address-form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/nymbal-breadcrumb.d.ts

@@ -0,0 +1,15 @@
+import * as lit from 'lit';
+import { nothing } from 'lit';
+import { NymbalElement, ElementSchema } from '../index.js';
+import '@nymbalhq/sdk';
+
+/** Where the page sits: each crumb a link, the last the page itself (`aria-current="page"`). */
+declare class NymbalBreadcrumb extends NymbalElement {
+    static schema: ElementSchema;
+    static properties: lit.PropertyDeclarations;
+    static styles: lit.CSSResult[];
+    items: unknown;
+    protected render(): typeof nothing | lit.TemplateResult<1>;
+}
+
+export { NymbalBreadcrumb };

package/dist/elements/nymbal-breadcrumb.js

@@ -0,0 +1,11 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalBreadcrumb
+} from "../chunk-N4Y5DI4X.js";
+import "../chunk-LO2EW5YP.js";
+import "../chunk-EYDMJNNK.js";
+import "../chunk-UCEVCLQ7.js";
+export {
+  NymbalBreadcrumb
+};
+//# sourceMappingURL=nymbal-breadcrumb.js.map

package/dist/elements/nymbal-breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/nymbal-cart-drawer.d.ts

@@ -0,0 +1,24 @@
+import * as _nymbalhq_sdk from '@nymbalhq/sdk';
+import * as lit from 'lit';
+import { NymbalElement, ElementSchema } from '../index.js';
+
+declare class NymbalCartDrawer extends NymbalElement {
+    static schema: ElementSchema;
+    static properties: lit.PropertyDeclarations;
+    static styles: lit.CSSResult[];
+    private readonly handleItemAdded;
+    private readonly handleMiniCartClicked;
+    cart: unknown;
+    protected stores(): _nymbalhq_sdk.CartStore[];
+    protected storeSettled(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Opens the drawer (the `open` attribute and property say whether it is). */
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    protected render(): lit.TemplateResult<1>;
+    private handleCheckout;
+}
+
+export { NymbalCartDrawer };