@nymbalhq/web-components 1.0.0 → 1.2.0

package/dist/chunk-H3ZBYNHV.js

@@ -0,0 +1,153 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalElement,
+  baseStyles,
+  parsedJson,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/variant-selector.ts
+import { css, html } from "lit";
+function optionsOf(variant) {
+  return Array.isArray(variant.options) ? variant.options : [];
+}
+function optionGroupsOf(product) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const variant of product.variants) {
+    for (const opt of optionsOf(variant)) {
+      let values = groups.get(opt.name);
+      if (!values) {
+        values = /* @__PURE__ */ new Set();
+        groups.set(opt.name, values);
+      }
+      values.add(opt.value);
+    }
+  }
+  return Array.from(groups.entries()).map(([name, values]) => ({
+    name,
+    values: Array.from(values)
+  }));
+}
+var SCHEMA = {
+  tag: "nymbal-variant-selector",
+  reactName: "VariantSelector",
+  // The product a server read, whose options show until the product store settles.
+  attributes: [{ name: "product", prop: "product", type: "json" }],
+  events: [
+    { name: "nymbal:variant:selected", prop: "onVariantSelected", detail: "{ variant: unknown }" }
+  ],
+  parts: ["group", "label", "options", "option"],
+  slots: [],
+  children: false
+};
+var NymbalVariantSelector = 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-md, 1rem);
+      }
+      [part~='label'] {
+        display: block;
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        font-weight: var(--nymbal-font-weight-medium, 500);
+        margin-bottom: var(--nymbal-spacing-sm, 0.5rem);
+        color: var(--nymbal-color-text, #18181b);
+      }
+      [part~='options'] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--nymbal-spacing-sm, 0.5rem);
+      }
+      [part~='option'] {
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        background: var(--nymbal-color-surface, #ffffff);
+        color: var(--nymbal-color-text, #18181b);
+        border: 1px solid var(--nymbal-color-border, #e4e4e7);
+        border-radius: var(--nymbal-radius-md, 0.375rem);
+        padding: var(--nymbal-spacing-xs, 0.25rem) var(--nymbal-spacing-md, 1rem);
+        cursor: pointer;
+        transition:
+          border-color var(--nymbal-transition-fast, 150ms ease),
+          background var(--nymbal-transition-fast, 150ms ease);
+      }
+      [part~='option']:hover {
+        border-color: var(--nymbal-color-primary, #18181b);
+      }
+      [part~='option'][aria-pressed='true'] {
+        background: var(--nymbal-color-primary, #18181b);
+        color: var(--nymbal-color-text-inverse, #ffffff);
+        border-color: var(--nymbal-color-primary, #18181b);
+      }
+      [part~='option']:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+    `
+  ];
+  stores() {
+    return [this.client.product];
+  }
+  storeSettled() {
+    this.product = void 0;
+  }
+  render() {
+    const state = this.readsStores ? this.client.product.getState() : null;
+    const product = parsedJson(this, "product", this.product) ?? state?.product ?? null;
+    const selected = state?.selectedVariant ?? null;
+    if (!product) return html``;
+    return optionGroupsOf(product).map(
+      (group) => html`
+        <div part="group">
+          <span part="label">${group.name}</span>
+          <div part="options">
+            ${group.values.map((value) => {
+        const isSelected = selected !== null && optionsOf(selected).some((o) => o.name === group.name && o.value === value);
+        return html`<button
+                type="button"
+                part="option"
+                data-testid="variant-option-${group.name}-${value}"
+                aria-pressed=${String(isSelected)}
+                @click=${() => this.choose(product, group.name, value)}
+              >
+                ${value}
+              </button>`;
+      })}
+          </div>
+        </div>
+      `
+    );
+  }
+  choose(product, optionName, optionValue) {
+    const selected = this.client.product.getState().selectedVariant;
+    const currentSelections = /* @__PURE__ */ new Map();
+    if (selected) {
+      for (const opt of optionsOf(selected)) currentSelections.set(opt.name, opt.value);
+    }
+    currentSelections.set(optionName, optionValue);
+    const match = product.variants.find(
+      (v) => optionsOf(v).every((o) => currentSelections.get(o.name) === o.value)
+    );
+    if (!match) return;
+    this.client.product.selectVariant(match);
+    this.dispatchEvent(
+      new CustomEvent("nymbal:variant:selected", {
+        bubbles: true,
+        composed: true,
+        detail: { variant: match }
+      })
+    );
+  }
+};
+
+export {
+  NymbalVariantSelector
+};
+//# sourceMappingURL=chunk-H3ZBYNHV.js.map

package/dist/chunk-H3ZBYNHV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/variant-selector.ts"],"sourcesContent":["import { css, html } from 'lit'\nimport type { DenormalisedVariant, DenormalisedProduct } from '@nymbalhq/sdk'\nimport type { VariantOption } from '@nymbalhq/types'\nimport {\n  baseStyles,\n  NymbalElement,\n  parsedJson,\n  propertiesOf,\n  type ElementSchema,\n} from '../base-element.js'\n\ninterface OptionGroup {\n  name: string\n  values: string[]\n}\n\n/** A variant's options when they are the `VariantOption[]` the read model serves; any other shape offers none. */\nfunction optionsOf(variant: DenormalisedVariant): VariantOption[] {\n  return Array.isArray(variant.options) ? variant.options : []\n}\n\nfunction optionGroupsOf(product: DenormalisedProduct): OptionGroup[] {\n  const groups = new Map<string, Set<string>>()\n  for (const variant of product.variants) {\n    for (const opt of optionsOf(variant)) {\n      let values = groups.get(opt.name)\n      if (!values) {\n        values = new Set()\n        groups.set(opt.name, values)\n      }\n      values.add(opt.value)\n    }\n  }\n  return Array.from(groups.entries()).map(([name, values]) => ({\n    name,\n    values: Array.from(values),\n  }))\n}\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-variant-selector',\n  reactName: 'VariantSelector',\n  // The product a server read, whose options show until the product store settles.\n  attributes: [{ name: 'product', prop: 'product', type: 'json' }],\n  events: [\n    { name: 'nymbal:variant:selected', prop: 'onVariantSelected', detail: '{ variant: unknown }' },\n  ],\n  parts: ['group', 'label', 'options', 'option'],\n  slots: [],\n  children: false,\n}\n\nexport class NymbalVariantSelector 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-md, 1rem);\n      }\n      [part~='label'] {\n        display: block;\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        font-weight: var(--nymbal-font-weight-medium, 500);\n        margin-bottom: var(--nymbal-spacing-sm, 0.5rem);\n        color: var(--nymbal-color-text, #18181b);\n      }\n      [part~='options'] {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--nymbal-spacing-sm, 0.5rem);\n      }\n      [part~='option'] {\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        background: var(--nymbal-color-surface, #ffffff);\n        color: var(--nymbal-color-text, #18181b);\n        border: 1px solid var(--nymbal-color-border, #e4e4e7);\n        border-radius: var(--nymbal-radius-md, 0.375rem);\n        padding: var(--nymbal-spacing-xs, 0.25rem) var(--nymbal-spacing-md, 1rem);\n        cursor: pointer;\n        transition:\n          border-color var(--nymbal-transition-fast, 150ms ease),\n          background var(--nymbal-transition-fast, 150ms ease);\n      }\n      [part~='option']:hover {\n        border-color: var(--nymbal-color-primary, #18181b);\n      }\n      [part~='option'][aria-pressed='true'] {\n        background: var(--nymbal-color-primary, #18181b);\n        color: var(--nymbal-color-text-inverse, #ffffff);\n        border-color: var(--nymbal-color-primary, #18181b);\n      }\n      [part~='option']:disabled {\n        opacity: 0.4;\n        cursor: not-allowed;\n      }\n    `,\n  ]\n\n  declare product: unknown\n\n  protected override stores() {\n    return [this.client.product]\n  }\n\n  protected override storeSettled(): void {\n    this.product = undefined\n  }\n\n  protected override render() {\n    const state = this.readsStores ? this.client.product.getState() : null\n    const product =\n      parsedJson<DenormalisedProduct>(this, 'product', this.product) ?? state?.product ?? null\n    const selected = state?.selectedVariant ?? null\n    if (!product) return html``\n\n    return optionGroupsOf(product).map(\n      (group) => html`\n        <div part=\"group\">\n          <span part=\"label\">${group.name}</span>\n          <div part=\"options\">\n            ${group.values.map((value) => {\n              const isSelected =\n                selected !== null &&\n                optionsOf(selected).some((o) => o.name === group.name && o.value === value)\n              return html`<button\n                type=\"button\"\n                part=\"option\"\n                data-testid=\"variant-option-${group.name}-${value}\"\n                aria-pressed=${String(isSelected)}\n                @click=${() => this.choose(product, group.name, value)}\n              >\n                ${value}\n              </button>`\n            })}\n          </div>\n        </div>\n      `,\n    )\n  }\n\n  private choose(product: DenormalisedProduct, optionName: string, optionValue: string): void {\n    const selected = this.client.product.getState().selectedVariant\n    const currentSelections = new Map<string, string>()\n    if (selected) {\n      for (const opt of optionsOf(selected)) currentSelections.set(opt.name, opt.value)\n    }\n    currentSelections.set(optionName, optionValue)\n\n    const match = product.variants.find((v: DenormalisedVariant) =>\n      optionsOf(v).every((o) => currentSelections.get(o.name) === o.value),\n    )\n    if (!match) return\n    this.client.product.selectVariant(match)\n    this.dispatchEvent(\n      new CustomEvent('nymbal:variant:selected', {\n        bubbles: true,\n        composed: true,\n        detail: { variant: match },\n      }),\n    )\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-HPBC3OG7.js

@@ -0,0 +1,174 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalElement,
+  baseStyles,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/quantity-selector.ts
+import { css, html } from "lit";
+import { live } from "lit/directives/live.js";
+function wholeQuantity(raw, min, max) {
+  const n = raw === null || raw.trim() === "" ? Number.NaN : Number(raw);
+  if (Number.isNaN(n)) return min;
+  return Math.min(max, Math.max(min, Math.trunc(n)));
+}
+var SCHEMA = {
+  tag: "nymbal-quantity-selector",
+  reactName: "QuantitySelector",
+  attributes: [
+    { name: "value", prop: "value", type: "number" },
+    { name: "min", prop: "min", type: "number" },
+    { name: "max", prop: "max", type: "number" }
+  ],
+  events: [
+    { name: "nymbal:quantity:changed", prop: "onQuantityChange", detail: "{ value: number }" }
+  ],
+  parts: ["decrement", "input", "increment"],
+  slots: [],
+  children: false
+};
+var NymbalQuantitySelector = class extends NymbalElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+      }
+      [part~='decrement'],
+      [part~='increment'] {
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+        font-size: var(--nymbal-font-size-base, 1rem);
+        background: var(--nymbal-color-surface, #ffffff);
+        color: var(--nymbal-color-text, #18181b);
+        border: 1px solid var(--nymbal-color-border, #e4e4e7);
+        width: 36px;
+        height: 36px;
+        padding: 0;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: background var(--nymbal-transition-fast, 150ms ease);
+      }
+      [part~='decrement']:hover:not(:disabled),
+      [part~='increment']:hover:not(:disabled) {
+        background: var(--nymbal-color-secondary, #f4f4f5);
+      }
+      [part~='decrement']:disabled,
+      [part~='increment']:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+      [part~='decrement'] {
+        border-radius: var(--nymbal-radius-md, 0.375rem) 0 0 var(--nymbal-radius-md, 0.375rem);
+      }
+      [part~='increment'] {
+        border-radius: 0 var(--nymbal-radius-md, 0.375rem) var(--nymbal-radius-md, 0.375rem) 0;
+      }
+      [part~='input'] {
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+        font-size: var(--nymbal-font-size-base, 1rem);
+        width: 48px;
+        height: 36px;
+        padding: 0;
+        margin: 0;
+        text-align: center;
+        border: 1px solid var(--nymbal-color-border, #e4e4e7);
+        border-left: none;
+        border-right: none;
+        -moz-appearance: textfield;
+      }
+      [part~='input']::-webkit-outer-spin-button,
+      [part~='input']::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    `
+  ];
+  _value = 1;
+  bounds() {
+    return [Number(this.getAttribute("min")) || 1, Number(this.getAttribute("max")) || 99];
+  }
+  willUpdate(changed) {
+    if (!this.hasUpdated || changed.has("value")) {
+      this._value = wholeQuantity(this.getAttribute("value"), ...this.bounds());
+    }
+  }
+  // Setting `value` resets the quantity even to the value the attribute already holds (a page resetting to 1 after the
+  // shopper stepped up), which Lit's own change check would skip.
+  attributeChangedCallback(name, old, value) {
+    super.attributeChangedCallback(name, old, value);
+    if (name === "value" && old === value && this.hasUpdated) {
+      this._value = wholeQuantity(value, ...this.bounds());
+      this.requestUpdate();
+    }
+  }
+  render() {
+    const [min, max] = this.bounds();
+    return html`
+      <button
+        type="button"
+        part="decrement"
+        data-testid="qty-decrement"
+        aria-label="Decrease quantity"
+        ?disabled=${this._value <= min}
+        @click=${() => this.step(-1)}
+      >
+        &#8722;
+      </button>
+      <input
+        part="input"
+        data-testid="qty-input"
+        type="number"
+        .value=${live(String(this._value))}
+        min=${min}
+        max=${max}
+        aria-label="Quantity"
+        @change=${this.handleChange}
+      />
+      <button
+        type="button"
+        part="increment"
+        data-testid="qty-increment"
+        aria-label="Increase quantity"
+        ?disabled=${this._value >= max}
+        @click=${() => this.step(1)}
+      >
+        &#43;
+      </button>
+    `;
+  }
+  step(by) {
+    const [min, max] = this.bounds();
+    const next = this._value + by;
+    if (next < min || next > max) return;
+    this._value = next;
+    this.emitChange();
+    this.requestUpdate();
+  }
+  handleChange = (e) => {
+    const [min, max] = this.bounds();
+    this._value = wholeQuantity(e.target.value, min, max);
+    this.emitChange();
+    this.requestUpdate();
+  };
+  emitChange() {
+    this.dispatchEvent(
+      new CustomEvent("nymbal:quantity:changed", {
+        bubbles: true,
+        composed: true,
+        detail: { value: this._value }
+      })
+    );
+  }
+};
+
+export {
+  NymbalQuantitySelector
+};
+//# sourceMappingURL=chunk-HPBC3OG7.js.map

package/dist/chunk-HPBC3OG7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/quantity-selector.ts"],"sourcesContent":["import { css, html, type PropertyValues } from 'lit'\nimport { live } from 'lit/directives/live.js'\nimport { baseStyles, NymbalElement, propertiesOf, type ElementSchema } from '../base-element.js'\n\n/**\n * A quantity as a whole number of units in `min`-`max`: a number is truncated toward zero and clamped, anything else is\n * `min`. Add-to-cart takes only integers, so the selector shows and emits the same integer.\n */\nfunction wholeQuantity(raw: string | null, min: number, max: number): number {\n  const n = raw === null || raw.trim() === '' ? Number.NaN : Number(raw)\n  if (Number.isNaN(n)) return min\n  return Math.min(max, Math.max(min, Math.trunc(n)))\n}\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-quantity-selector',\n  reactName: 'QuantitySelector',\n  attributes: [\n    { name: 'value', prop: 'value', type: 'number' },\n    { name: 'min', prop: 'min', type: 'number' },\n    { name: 'max', prop: 'max', type: 'number' },\n  ],\n  events: [\n    { name: 'nymbal:quantity:changed', prop: 'onQuantityChange', detail: '{ value: number }' },\n  ],\n  parts: ['decrement', 'input', 'increment'],\n  slots: [],\n  children: false,\n}\n\nexport class NymbalQuantitySelector 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: inline-flex;\n        align-items: center;\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n      }\n      [part~='decrement'],\n      [part~='increment'] {\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n        font-size: var(--nymbal-font-size-base, 1rem);\n        background: var(--nymbal-color-surface, #ffffff);\n        color: var(--nymbal-color-text, #18181b);\n        border: 1px solid var(--nymbal-color-border, #e4e4e7);\n        width: 36px;\n        height: 36px;\n        padding: 0;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: background var(--nymbal-transition-fast, 150ms ease);\n      }\n      [part~='decrement']:hover:not(:disabled),\n      [part~='increment']:hover:not(:disabled) {\n        background: var(--nymbal-color-secondary, #f4f4f5);\n      }\n      [part~='decrement']:disabled,\n      [part~='increment']:disabled {\n        opacity: 0.4;\n        cursor: not-allowed;\n      }\n      [part~='decrement'] {\n        border-radius: var(--nymbal-radius-md, 0.375rem) 0 0 var(--nymbal-radius-md, 0.375rem);\n      }\n      [part~='increment'] {\n        border-radius: 0 var(--nymbal-radius-md, 0.375rem) var(--nymbal-radius-md, 0.375rem) 0;\n      }\n      [part~='input'] {\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n        font-size: var(--nymbal-font-size-base, 1rem);\n        width: 48px;\n        height: 36px;\n        padding: 0;\n        margin: 0;\n        text-align: center;\n        border: 1px solid var(--nymbal-color-border, #e4e4e7);\n        border-left: none;\n        border-right: none;\n        -moz-appearance: textfield;\n      }\n      [part~='input']::-webkit-outer-spin-button,\n      [part~='input']::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n      }\n    `,\n  ]\n\n  private _value = 1\n\n  private bounds(): [number, number] {\n    return [Number(this.getAttribute('min')) || 1, Number(this.getAttribute('max')) || 99]\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    if (!this.hasUpdated || changed.has('value')) {\n      this._value = wholeQuantity(this.getAttribute('value'), ...this.bounds())\n    }\n  }\n\n  // Setting `value` resets the quantity even to the value the attribute already holds (a page resetting to 1 after the\n  // shopper stepped up), which Lit's own change check would skip.\n  override attributeChangedCallback(name: string, old: string | null, value: string | null): void {\n    super.attributeChangedCallback(name, old, value)\n    if (name === 'value' && old === value && this.hasUpdated) {\n      this._value = wholeQuantity(value, ...this.bounds())\n      this.requestUpdate()\n    }\n  }\n\n  protected override render() {\n    const [min, max] = this.bounds()\n    return html`\n      <button\n        type=\"button\"\n        part=\"decrement\"\n        data-testid=\"qty-decrement\"\n        aria-label=\"Decrease quantity\"\n        ?disabled=${this._value <= min}\n        @click=${() => this.step(-1)}\n      >\n        &#8722;\n      </button>\n      <input\n        part=\"input\"\n        data-testid=\"qty-input\"\n        type=\"number\"\n        .value=${live(String(this._value))}\n        min=${min}\n        max=${max}\n        aria-label=\"Quantity\"\n        @change=${this.handleChange}\n      />\n      <button\n        type=\"button\"\n        part=\"increment\"\n        data-testid=\"qty-increment\"\n        aria-label=\"Increase quantity\"\n        ?disabled=${this._value >= max}\n        @click=${() => this.step(1)}\n      >\n        &#43;\n      </button>\n    `\n  }\n\n  private step(by: number): void {\n    const [min, max] = this.bounds()\n    const next = this._value + by\n    if (next < min || next > max) return\n    this._value = next\n    this.emitChange()\n    this.requestUpdate()\n  }\n\n  private handleChange = (e: Event): void => {\n    const [min, max] = this.bounds()\n    this._value = wholeQuantity((e.target as HTMLInputElement).value, min, max)\n    this.emitChange()\n    this.requestUpdate()\n  }\n\n  private emitChange(): void {\n    this.dispatchEvent(\n      new CustomEvent('nymbal:quantity:changed', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this._value },\n      }),\n    )\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-IYT7VXFS.js

@@ -0,0 +1,105 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  navigateOnClick
+} from "./chunk-LO2EW5YP.js";
+import {
+  NymbalElement,
+  baseStyles,
+  parsedJson,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/category-nav.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-category-nav",
+  reactName: "CategoryNav",
+  // The categories as `GET /api/categories` serves them.
+  attributes: [{ name: "categories", prop: "categories", type: "json" }],
+  events: [],
+  parts: ["grid", "card"],
+  slots: [],
+  children: false
+};
+var NymbalCategoryNav = 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~='grid'] {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: var(--nymbal-spacing-md, 1rem);
+      }
+      @media (min-width: 641px) {
+        [part~='grid'] {
+          grid-template-columns: repeat(4, 1fr);
+          gap: var(--nymbal-spacing-lg, 1.5rem);
+        }
+      }
+      [part~='card'] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: 140px;
+        padding: var(--nymbal-spacing-lg, 1.5rem) var(--nymbal-spacing-md, 1rem);
+        text-align: center;
+        text-decoration: none;
+        background-color: var(--nymbal-color-surface, #ffffff);
+        border: 1px solid var(--nymbal-color-border, #e4e4e7);
+        border-radius: var(--nymbal-radius-lg, 0.75rem);
+        transition:
+          border-color var(--nymbal-transition-fast, 150ms ease),
+          box-shadow var(--nymbal-transition-fast, 150ms ease),
+          transform var(--nymbal-transition-fast, 150ms ease);
+      }
+      [part~='card']:hover {
+        border-color: var(--nymbal-color-accent, #2563eb);
+        box-shadow: var(--nymbal-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+        transform: translateY(-2px);
+      }
+      .name {
+        font-size: var(--nymbal-font-size-base, 1rem);
+        font-weight: var(--nymbal-font-weight-medium, 500);
+        color: var(--nymbal-color-text, #18181b);
+      }
+      .description {
+        margin-top: var(--nymbal-spacing-xs, 0.25rem);
+        font-size: var(--nymbal-font-size-xs, 0.75rem);
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+    `
+  ];
+  render() {
+    const categories = parsedJson(this, "categories", this.categories);
+    if (!Array.isArray(categories) || categories.length === 0) return nothing;
+    return html`
+      <div part="grid">
+        ${categories.map(
+      (c) => html`
+            <a
+              part="card"
+              href="/category/${encodeURIComponent(c.slug)}"
+              data-testid="category-${c.slug}"
+              @click=${navigateOnClick}
+            >
+              <span class="name">${c.name}</span>
+              ${c.description ? html`<span class="description">${c.description}</span>` : nothing}
+            </a>
+          `
+    )}
+      </div>
+    `;
+  }
+};
+
+export {
+  NymbalCategoryNav
+};
+//# sourceMappingURL=chunk-IYT7VXFS.js.map

package/dist/chunk-IYT7VXFS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/category-nav.ts"],"sourcesContent":["import { css, html, nothing } from 'lit'\nimport {\n  baseStyles,\n  NymbalElement,\n  parsedJson,\n  propertiesOf,\n  type ElementSchema,\n} from '../base-element.js'\nimport { navigateOnClick } from '../navigate.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-category-nav',\n  reactName: 'CategoryNav',\n  // The categories as `GET /api/categories` serves them.\n  attributes: [{ name: 'categories', prop: 'categories', type: 'json' }],\n  events: [],\n  parts: ['grid', 'card'],\n  slots: [],\n  children: false,\n}\n\ninterface Category {\n  slug: string\n  name: string\n  description?: string | null\n}\n\n/** A card per category, each a link to its listing. */\nexport class NymbalCategoryNav extends NymbalElement {\n  static override schema = SCHEMA\n  static override properties = propertiesOf(SCHEMA)\n  static override styles = [\n    baseStyles,\n    css`\n      :host {\n        display: block;\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n      }\n      [part~='grid'] {\n        display: grid;\n        grid-template-columns: repeat(2, 1fr);\n        gap: var(--nymbal-spacing-md, 1rem);\n      }\n      @media (min-width: 641px) {\n        [part~='grid'] {\n          grid-template-columns: repeat(4, 1fr);\n          gap: var(--nymbal-spacing-lg, 1.5rem);\n        }\n      }\n      [part~='card'] {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        min-height: 140px;\n        padding: var(--nymbal-spacing-lg, 1.5rem) var(--nymbal-spacing-md, 1rem);\n        text-align: center;\n        text-decoration: none;\n        background-color: var(--nymbal-color-surface, #ffffff);\n        border: 1px solid var(--nymbal-color-border, #e4e4e7);\n        border-radius: var(--nymbal-radius-lg, 0.75rem);\n        transition:\n          border-color var(--nymbal-transition-fast, 150ms ease),\n          box-shadow var(--nymbal-transition-fast, 150ms ease),\n          transform var(--nymbal-transition-fast, 150ms ease);\n      }\n      [part~='card']:hover {\n        border-color: var(--nymbal-color-accent, #2563eb);\n        box-shadow: var(--nymbal-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));\n        transform: translateY(-2px);\n      }\n      .name {\n        font-size: var(--nymbal-font-size-base, 1rem);\n        font-weight: var(--nymbal-font-weight-medium, 500);\n        color: var(--nymbal-color-text, #18181b);\n      }\n      .description {\n        margin-top: var(--nymbal-spacing-xs, 0.25rem);\n        font-size: var(--nymbal-font-size-xs, 0.75rem);\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n    `,\n  ]\n\n  declare categories: unknown\n\n  protected override render() {\n    const categories = parsedJson<Category[]>(this, 'categories', this.categories)\n    if (!Array.isArray(categories) || categories.length === 0) return nothing\n    return html`\n      <div part=\"grid\">\n        ${categories.map(\n          (c) => html`\n            <a\n              part=\"card\"\n              href=\"/category/${encodeURIComponent(c.slug)}\"\n              data-testid=\"category-${c.slug}\"\n              @click=${navigateOnClick}\n            >\n              <span class=\"name\">${c.name}</span>\n              ${c.description ? html`<span class=\"description\">${c.description}</span>` : nothing}\n            </a>\n          `,\n        )}\n      </div>\n    `\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,KAAK,MAAM,eAAe;AAUnC,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA;AAAA,EAEX,YAAY,CAAC,EAAE,MAAM,cAAc,MAAM,cAAc,MAAM,OAAO,CAAC;AAAA,EACrE,QAAQ,CAAC;AAAA,EACT,OAAO,CAAC,QAAQ,MAAM;AAAA,EACtB,OAAO,CAAC;AAAA,EACR,UAAU;AACZ;AASO,IAAM,oBAAN,cAAgC,cAAc;AAAA,EACnD,OAAgB,SAAS;AAAA,EACzB,OAAgB,aAAa,aAAa,MAAM;AAAA,EAChD,OAAgB,SAAS;AAAA,IACvB;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiDF;AAAA,EAImB,SAAS;AAC1B,UAAM,aAAa,WAAuB,MAAM,cAAc,KAAK,UAAU;AAC7E,QAAI,CAAC,MAAM,QAAQ,UAAU,KAAK,WAAW,WAAW,EAAG,QAAO;AAClE,WAAO;AAAA;AAAA,UAED,WAAW;AAAA,MACX,CAAC,MAAM;AAAA;AAAA;AAAA,gCAGe,mBAAmB,EAAE,IAAI,CAAC;AAAA,sCACpB,EAAE,IAAI;AAAA,uBACrB,eAAe;AAAA;AAAA,mCAEH,EAAE,IAAI;AAAA,gBACzB,EAAE,cAAc,iCAAiC,EAAE,WAAW,YAAY,OAAO;AAAA;AAAA;AAAA,IAGzF,CAAC;AAAA;AAAA;AAAA,EAGP;AACF;","names":[]}

package/dist/chunk-LHYXNQWY.js

@@ -0,0 +1,105 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalElement,
+  baseStyles,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/add-to-cart.ts
+import { css, html } from "lit";
+var MIN_QTY = 1;
+var MAX_QTY = 99;
+function quantityOf(attr) {
+  const n = attr === null || attr.trim() === "" ? Number.NaN : Number(attr);
+  const whole = Number.isInteger(n) ? n : MIN_QTY;
+  return Math.min(MAX_QTY, Math.max(MIN_QTY, whole));
+}
+var SCHEMA = {
+  tag: "nymbal-add-to-cart",
+  reactName: "AddToCart",
+  attributes: [
+    { name: "variant-id", prop: "variantId", type: "string" },
+    { name: "qty", prop: "qty", type: "number" },
+    { name: "disabled", prop: "disabled", type: "boolean" }
+  ],
+  events: [
+    {
+      name: "nymbal:cart:item-added",
+      prop: "onItemAdded",
+      detail: "{ variantId: string; qty: number }"
+    }
+  ],
+  parts: ["button"],
+  slots: ["label", "loading-label"],
+  children: true
+};
+var NymbalAddToCart = class extends NymbalElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    css`
+      :host {
+        display: inline-block;
+      }
+      [part~='button'] {
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+        font-size: var(--nymbal-font-size-base, 1rem);
+        font-weight: var(--nymbal-font-weight-medium, 500);
+        background: var(--nymbal-color-primary, #18181b);
+        color: var(--nymbal-color-text-inverse, #ffffff);
+        border: none;
+        border-radius: var(--nymbal-radius-md, 0.375rem);
+        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-lg, 1.5rem);
+        cursor: pointer;
+        transition: background var(--nymbal-transition-fast, 150ms ease);
+        min-width: 140px;
+      }
+      [part~='button']:hover:not(:disabled) {
+        background: var(--nymbal-color-primary-hover, #27272a);
+      }
+      [part~='button']:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    `
+  ];
+  stores() {
+    return [this.client.cart];
+  }
+  render() {
+    const variantId = this.getAttribute("variant-id");
+    const loading = this.readsStores && this.client.cart.getState().loading;
+    return html`<button
+      type="button"
+      part="button"
+      data-testid="add-to-cart"
+      ?disabled=${this.hasAttribute("disabled") || loading || !variantId}
+      aria-busy=${String(loading)}
+      @click=${this.handleClick}
+    >
+      ${loading ? html`<slot name="loading-label">Adding...</slot>` : html`<slot name="label">Add to Cart</slot>`}
+    </button>`;
+  }
+  handleClick = async () => {
+    const variantId = this.getAttribute("variant-id");
+    if (!variantId) return;
+    const qty = quantityOf(this.getAttribute("qty"));
+    try {
+      await this.client.cart.addItem(variantId, qty);
+      this.dispatchEvent(
+        new CustomEvent("nymbal:cart:item-added", {
+          bubbles: true,
+          composed: true,
+          detail: { variantId, qty }
+        })
+      );
+    } catch {
+    }
+  };
+};
+
+export {
+  NymbalAddToCart
+};
+//# sourceMappingURL=chunk-LHYXNQWY.js.map

package/dist/chunk-LHYXNQWY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/add-to-cart.ts"],"sourcesContent":["import { css, html } from 'lit'\nimport { baseStyles, NymbalElement, propertiesOf, type ElementSchema } from '../base-element.js'\n\nconst MIN_QTY = 1\nconst MAX_QTY = 99\n\n/** The `qty` attribute as a whole number of units: a non-integer is 1, and the result is clamped to 1-99. */\nfunction quantityOf(attr: string | null): number {\n  const n = attr === null || attr.trim() === '' ? Number.NaN : Number(attr)\n  const whole = Number.isInteger(n) ? n : MIN_QTY\n  return Math.min(MAX_QTY, Math.max(MIN_QTY, whole))\n}\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-add-to-cart',\n  reactName: 'AddToCart',\n  attributes: [\n    { name: 'variant-id', prop: 'variantId', type: 'string' },\n    { name: 'qty', prop: 'qty', type: 'number' },\n    { name: 'disabled', prop: 'disabled', type: 'boolean' },\n  ],\n  events: [\n    {\n      name: 'nymbal:cart:item-added',\n      prop: 'onItemAdded',\n      detail: '{ variantId: string; qty: number }',\n    },\n  ],\n  parts: ['button'],\n  slots: ['label', 'loading-label'],\n  children: true,\n}\n\nexport class NymbalAddToCart 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: inline-block;\n      }\n      [part~='button'] {\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n        font-size: var(--nymbal-font-size-base, 1rem);\n        font-weight: var(--nymbal-font-weight-medium, 500);\n        background: var(--nymbal-color-primary, #18181b);\n        color: var(--nymbal-color-text-inverse, #ffffff);\n        border: none;\n        border-radius: var(--nymbal-radius-md, 0.375rem);\n        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-lg, 1.5rem);\n        cursor: pointer;\n        transition: background var(--nymbal-transition-fast, 150ms ease);\n        min-width: 140px;\n      }\n      [part~='button']:hover:not(:disabled) {\n        background: var(--nymbal-color-primary-hover, #27272a);\n      }\n      [part~='button']:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n    `,\n  ]\n\n  protected override stores() {\n    return [this.client.cart]\n  }\n\n  protected override render() {\n    const variantId = this.getAttribute('variant-id')\n    // Until it reads the cart store (a server render, and the first render taking that over) the cart is not adding.\n    const loading = this.readsStores && this.client.cart.getState().loading\n    return html`<button\n      type=\"button\"\n      part=\"button\"\n      data-testid=\"add-to-cart\"\n      ?disabled=${this.hasAttribute('disabled') || loading || !variantId}\n      aria-busy=${String(loading)}\n      @click=${this.handleClick}\n    >\n      ${loading\n        ? html`<slot name=\"loading-label\">Adding...</slot>`\n        : html`<slot name=\"label\">Add to Cart</slot>`}\n    </button>`\n  }\n\n  private handleClick = async (): Promise<void> => {\n    const variantId = this.getAttribute('variant-id')\n    if (!variantId) return\n    const qty = quantityOf(this.getAttribute('qty'))\n    try {\n      await this.client.cart.addItem(variantId, qty)\n      this.dispatchEvent(\n        new CustomEvent('nymbal:cart:item-added', {\n          bubbles: true,\n          composed: true,\n          detail: { variantId, qty },\n        }),\n      )\n    } catch {\n      // error is stored in cart state\n    }\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,KAAK,YAAY;AAG1B,IAAM,UAAU;AAChB,IAAM,UAAU;AAGhB,SAAS,WAAW,MAA6B;AAC/C,QAAM,IAAI,SAAS,QAAQ,KAAK,KAAK,MAAM,KAAK,OAAO,MAAM,OAAO,IAAI;AACxE,QAAM,QAAQ,OAAO,UAAU,CAAC,IAAI,IAAI;AACxC,SAAO,KAAK,IAAI,SAAS,KAAK,IAAI,SAAS,KAAK,CAAC;AACnD;AAEA,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA,EACX,YAAY;AAAA,IACV,EAAE,MAAM,cAAc,MAAM,aAAa,MAAM,SAAS;AAAA,IACxD,EAAE,MAAM,OAAO,MAAM,OAAO,MAAM,SAAS;AAAA,IAC3C,EAAE,MAAM,YAAY,MAAM,YAAY,MAAM,UAAU;AAAA,EACxD;AAAA,EACA,QAAQ;AAAA,IACN;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,OAAO,CAAC,QAAQ;AAAA,EAChB,OAAO,CAAC,SAAS,eAAe;AAAA,EAChC,UAAU;AACZ;AAEO,IAAM,kBAAN,cAA8B,cAAc;AAAA,EACjD,OAAgB,SAAS;AAAA,EACzB,OAAgB,aAAa,aAAa,MAAM;AAAA,EAEhD,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,EAyBF;AAAA,EAEmB,SAAS;AAC1B,WAAO,CAAC,KAAK,OAAO,IAAI;AAAA,EAC1B;AAAA,EAEmB,SAAS;AAC1B,UAAM,YAAY,KAAK,aAAa,YAAY;AAEhD,UAAM,UAAU,KAAK,eAAe,KAAK,OAAO,KAAK,SAAS,EAAE;AAChE,WAAO;AAAA;AAAA;AAAA;AAAA,kBAIO,KAAK,aAAa,UAAU,KAAK,WAAW,CAAC,SAAS;AAAA,kBACtD,OAAO,OAAO,CAAC;AAAA,eAClB,KAAK,WAAW;AAAA;AAAA,QAEvB,UACE,oDACA,2CAA2C;AAAA;AAAA,EAEnD;AAAA,EAEQ,cAAc,YAA2B;AAC/C,UAAM,YAAY,KAAK,aAAa,YAAY;AAChD,QAAI,CAAC,UAAW;AAChB,UAAM,MAAM,WAAW,KAAK,aAAa,KAAK,CAAC;AAC/C,QAAI;AACF,YAAM,KAAK,OAAO,KAAK,QAAQ,WAAW,GAAG;AAC7C,WAAK;AAAA,QACH,IAAI,YAAY,0BAA0B;AAAA,UACxC,SAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAQ,EAAE,WAAW,IAAI;AAAA,QAC3B,CAAC;AAAA,MACH;AAAA,IACF,QAAQ;AAAA,IAER;AAAA,EACF;AACF;","names":[]}

package/dist/chunk-LO2EW5YP.js

@@ -0,0 +1,25 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+
+// src/navigate.ts
+function navigateOnClick(event) {
+  if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+    return;
+  }
+  const anchor = event.currentTarget;
+  const href = anchor?.getAttribute("href");
+  if (anchor === null || href === null || href === void 0) return;
+  const routed = !anchor.dispatchEvent(
+    new CustomEvent("nymbal:navigate", {
+      detail: { href },
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    })
+  );
+  if (routed) event.preventDefault();
+}
+
+export {
+  navigateOnClick
+};
+//# sourceMappingURL=chunk-LO2EW5YP.js.map

package/dist/chunk-LO2EW5YP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/navigate.ts"],"sourcesContent":["/**\n * The click handler of an element's anchor part. An anchor in a shadow root is a plain `<a>`, which a client-side\n * router does not see, so a plain left click asks the page first: a cancelable, composed `nymbal:navigate` with the\n * href. A page that routes it (Next's `router.push`) cancels the event, and the click's own navigation is prevented; a\n * page that does not leaves the anchor to load the page. A click with a modifier key or another button is the\n * browser's (a new tab or window), untouched.\n */\nexport function navigateOnClick(event: MouseEvent): void {\n  if (\n    event.defaultPrevented ||\n    event.button !== 0 ||\n    event.metaKey ||\n    event.ctrlKey ||\n    event.shiftKey ||\n    event.altKey\n  ) {\n    return\n  }\n  const anchor = event.currentTarget as HTMLAnchorElement | null\n  const href = anchor?.getAttribute('href')\n  if (anchor === null || href === null || href === undefined) return\n  const routed = !anchor.dispatchEvent(\n    new CustomEvent('nymbal:navigate', {\n      detail: { href },\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    }),\n  )\n  if (routed) event.preventDefault()\n}\n"],"mappings":";;;AAOO,SAAS,gBAAgB,OAAyB;AACvD,MACE,MAAM,oBACN,MAAM,WAAW,KACjB,MAAM,WACN,MAAM,WACN,MAAM,YACN,MAAM,QACN;AACA;AAAA,EACF;AACA,QAAM,SAAS,MAAM;AACrB,QAAM,OAAO,QAAQ,aAAa,MAAM;AACxC,MAAI,WAAW,QAAQ,SAAS,QAAQ,SAAS,OAAW;AAC5D,QAAM,SAAS,CAAC,OAAO;AAAA,IACrB,IAAI,YAAY,mBAAmB;AAAA,MACjC,QAAQ,EAAE,KAAK;AAAA,MACf,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,IACd,CAAC;AAAA,EACH;AACA,MAAI,OAAQ,OAAM,eAAe;AACnC;","names":[]}