@nymbalhq/web-components 1.0.0 → 1.2.0

package/astro/NymbalElement.astro

@@ -0,0 +1,19 @@
+---
+// One Nymbal element rendered on the server: the tag with its attributes, its declarative shadow root, then the slot's
+// content as its light DOM. The browser parses the template into the element's shadow root, and the element, once
+// defined, takes that markup over. A project's own class under the tag renders instead when its elements entry
+// registered it (registerServerElements).
+import { renderElement } from '../dist/ssr/index.js'
+
+interface Props {
+  tag: string
+  /** The host's attributes; a JSON attribute's value is its JSON text. */
+  attributes?: Record<string, string>
+}
+
+const { tag, attributes } = Astro.props
+const children = Astro.slots.has('default') ? await Astro.slots.render('default') : ''
+const html = renderElement(tag, { attributes, children })
+---
+
+<Fragment set:html={html} />

package/dist/base-element-CPMgAdyQ.d.ts

@@ -0,0 +1,91 @@
+import { LitElement, PropertyValues } from 'lit';
+import { NymbalClient } from '@nymbalhq/sdk';
+
+/** A Nymbal element class, as `define` takes it. */
+interface NymbalElementClass extends CustomElementConstructor {
+    schema: ElementSchema;
+    /** The Nymbal elements it renders in its own shadow root, which must be defined for it to work. */
+    uses?: readonly NymbalElementClass[];
+    /** What the element needs registered before it runs; called whether or not its tag is still free. */
+    beforeDefine?(): void;
+}
+/**
+ * Defines each element under its schema's tag, with the elements it renders, except a tag that is already defined:
+ * an element the project defined first under a Nymbal tag wins.
+ */
+declare function define(...elements: NymbalElementClass[]): void;
+
+/** How an attribute's value reads: the React wrapper types its prop from this, and JSON travels stringified. */
+type ElementAttributeType = 'string' | 'number' | 'boolean' | 'json';
+/**
+ * An element's public interface, declared once on the class. Its Lit properties are derived from `attributes`, and the
+ * React wrappers are generated from it, so neither can disagree with the element.
+ */
+interface ElementSchema {
+    tag: string;
+    /** The React wrapper's component name. */
+    reactName: string;
+    /** `name` is the HTML attribute, `prop` the React prop and the Lit property. */
+    attributes: Array<{
+        name: string;
+        prop: string;
+        type: ElementAttributeType;
+    }>;
+    /** `name` is the DOM event, `prop` the React handler, `detail` the TypeScript type of its detail. */
+    events: Array<{
+        name: string;
+        prop: string;
+        detail: string;
+    }>;
+    /** Every `part` the element renders, for `::part()` styling. */
+    parts: string[];
+    /** Every named `slot` it renders, each with its default content as the fallback. */
+    slots: string[];
+    /** Whether the React wrapper passes children through. */
+    children: boolean;
+}
+interface Subscribable {
+    subscribe(fn: () => void): () => void;
+    getState(): unknown;
+}
+declare abstract class NymbalElement extends LitElement {
+    static schema: ElementSchema;
+    /** Defines this element, and those it renders, unless its tag is already defined (see `define`). */
+    static define(this: NymbalElementClass): void;
+    private _unsubs;
+    /** Set while the element's first render takes over a server's shadow root (see `readsStores`). */
+    private _serverRender;
+    protected get client(): NymbalClient;
+    /** Whether a client is registered: never on a server. Without one the element subscribes to no store. */
+    protected get hasClient(): boolean;
+    /**
+     * Whether this render reads the client's stores. Not on a server, and not in the first render of an element taking
+     * over a server's shadow root: hydration needs the server's render (a store still loading would change it), so that
+     * render is the server's, and the element renders again from its stores straight after.
+     */
+    protected get readsStores(): boolean;
+    /** The SDK stores the element renders from; it re-renders on each change while connected. */
+    protected stores(): Subscribable[];
+    /**
+     * A store `stores()` named has settled (an update that is not `loading`): the properties a server rendered this
+     * element from give way to it. An update while loading leaves them showing, so a count does not flip to 0 and back.
+     */
+    protected storeSettled(_store: Subscribable): void;
+    connectedCallback(): void;
+    /**
+     * A store that settled before this element connected sends it no update, so the properties a server gave (a page
+     * restored from a router's cache after the cart changed elsewhere) give way to it here.
+     */
+    private takeSettledStores;
+    /**
+     * React inserts a soft navigation's server HTML with `innerHTML`, which leaves the declarative shadow root an unparsed
+     * template: it becomes this element's shadow root here, before Lit looks for one, so the element hydrates it rather
+     * than rendering a second. A parsed declarative shadow root (a full load) is already `shadowRoot`.
+     */
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected update(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+}
+
+export { NymbalElement as N, define as d };
+export type { ElementAttributeType as E, Subscribable as S, ElementSchema as a, NymbalElementClass as b };

package/dist/chunk-2TPQNQYO.js

@@ -0,0 +1,155 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalElement,
+  baseStyles,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/toast.ts
+import { css, html } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+var SCHEMA = {
+  tag: "nymbal-toast",
+  reactName: "Toast",
+  attributes: [
+    { name: "position", prop: "position", type: "string" },
+    { name: "duration-ms", prop: "durationMs", type: "number" }
+  ],
+  events: [],
+  parts: ["item", "message", "close"],
+  slots: [],
+  children: false
+};
+var nextId = 0;
+var NymbalToast = class extends NymbalElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    css`
+      :host {
+        position: fixed;
+        z-index: var(--nymbal-z-toast, 300);
+        display: flex;
+        flex-direction: column;
+        gap: var(--nymbal-spacing-sm, 0.5rem);
+        pointer-events: none;
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+      }
+      :host([position='top-right']),
+      :host(:not([position])) {
+        top: var(--nymbal-spacing-lg, 1.5rem);
+        right: var(--nymbal-spacing-lg, 1.5rem);
+      }
+      :host([position='top-left']) {
+        top: var(--nymbal-spacing-lg, 1.5rem);
+        left: var(--nymbal-spacing-lg, 1.5rem);
+      }
+      :host([position='bottom-right']) {
+        bottom: var(--nymbal-spacing-lg, 1.5rem);
+        right: var(--nymbal-spacing-lg, 1.5rem);
+      }
+      :host([position='bottom-left']) {
+        bottom: var(--nymbal-spacing-lg, 1.5rem);
+        left: var(--nymbal-spacing-lg, 1.5rem);
+      }
+      [part~='item'] {
+        pointer-events: auto;
+        display: flex;
+        align-items: center;
+        gap: var(--nymbal-spacing-sm, 0.5rem);
+        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);
+        border-radius: var(--nymbal-radius-md, 0.375rem);
+        box-shadow: var(--nymbal-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
+        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);
+        animation: nymbal-toast-in var(--nymbal-transition-normal, 200ms ease) forwards;
+        max-width: 360px;
+      }
+      [part~='item'][data-type='success'] {
+        border-left: 3px solid var(--nymbal-color-success, #16a34a);
+      }
+      [part~='item'][data-type='error'] {
+        border-left: 3px solid var(--nymbal-color-error, #dc2626);
+      }
+      [part~='item'][data-type='warning'] {
+        border-left: 3px solid var(--nymbal-color-warning, #d97706);
+      }
+      [part~='item'][data-type='info'] {
+        border-left: 3px solid var(--nymbal-color-accent, #2563eb);
+      }
+      [part~='close'] {
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: var(--nymbal-color-text-muted, #71717a);
+        font-size: var(--nymbal-font-size-base, 1rem);
+        padding: 0;
+        margin-left: auto;
+      }
+      @keyframes nymbal-toast-in {
+        from {
+          opacity: 0;
+          transform: translateY(-8px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    `
+  ];
+  _items = [];
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("data-testid", "toast");
+  }
+  show(message, type = "info") {
+    const durationMs = Number(this.getAttribute("duration-ms")) || 4e3;
+    const item = { id: ++nextId, message, type };
+    this._items = [...this._items, item];
+    this.requestUpdate();
+    setTimeout(() => this.dismiss(item.id), durationMs);
+  }
+  dismiss(id) {
+    const remaining = this._items.filter((i) => i.id !== id);
+    if (remaining.length === this._items.length) return;
+    this._items = remaining;
+    this.requestUpdate();
+  }
+  render() {
+    return repeat(
+      this._items,
+      (item) => item.id,
+      (item) => html`
+        <div part="item" class="nymbal-toast-item" data-type=${item.type} role="alert">
+          <span part="message">${item.message}</span>
+          <button
+            type="button"
+            part="close"
+            class="nymbal-toast-close"
+            aria-label="Dismiss"
+            @click=${() => this.dismiss(item.id)}
+          >
+            ×
+          </button>
+        </div>
+      `
+    );
+  }
+  static showGlobal(message, type = "info") {
+    let toastEl = document.querySelector("nymbal-toast");
+    if (!toastEl) {
+      toastEl = document.createElement("nymbal-toast");
+      document.body.appendChild(toastEl);
+    }
+    toastEl.show(message, type);
+  }
+};
+
+export {
+  NymbalToast
+};
+//# sourceMappingURL=chunk-2TPQNQYO.js.map

package/dist/chunk-2TPQNQYO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/toast.ts"],"sourcesContent":["import { css, html } from 'lit'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { baseStyles, NymbalElement, propertiesOf, type ElementSchema } from '../base-element.js'\n\ntype ToastType = 'success' | 'error' | 'warning' | 'info'\n\ninterface ToastItem {\n  id: number\n  message: string\n  type: ToastType\n}\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-toast',\n  reactName: 'Toast',\n  attributes: [\n    { name: 'position', prop: 'position', type: 'string' },\n    { name: 'duration-ms', prop: 'durationMs', type: 'number' },\n  ],\n  events: [],\n  parts: ['item', 'message', 'close'],\n  slots: [],\n  children: false,\n}\n\nlet nextId = 0\n\nexport class NymbalToast 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        position: fixed;\n        z-index: var(--nymbal-z-toast, 300);\n        display: flex;\n        flex-direction: column;\n        gap: var(--nymbal-spacing-sm, 0.5rem);\n        pointer-events: none;\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n      }\n      :host([position='top-right']),\n      :host(:not([position])) {\n        top: var(--nymbal-spacing-lg, 1.5rem);\n        right: var(--nymbal-spacing-lg, 1.5rem);\n      }\n      :host([position='top-left']) {\n        top: var(--nymbal-spacing-lg, 1.5rem);\n        left: var(--nymbal-spacing-lg, 1.5rem);\n      }\n      :host([position='bottom-right']) {\n        bottom: var(--nymbal-spacing-lg, 1.5rem);\n        right: var(--nymbal-spacing-lg, 1.5rem);\n      }\n      :host([position='bottom-left']) {\n        bottom: var(--nymbal-spacing-lg, 1.5rem);\n        left: var(--nymbal-spacing-lg, 1.5rem);\n      }\n      [part~='item'] {\n        pointer-events: auto;\n        display: flex;\n        align-items: center;\n        gap: var(--nymbal-spacing-sm, 0.5rem);\n        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);\n        border-radius: var(--nymbal-radius-md, 0.375rem);\n        box-shadow: var(--nymbal-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));\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        animation: nymbal-toast-in var(--nymbal-transition-normal, 200ms ease) forwards;\n        max-width: 360px;\n      }\n      [part~='item'][data-type='success'] {\n        border-left: 3px solid var(--nymbal-color-success, #16a34a);\n      }\n      [part~='item'][data-type='error'] {\n        border-left: 3px solid var(--nymbal-color-error, #dc2626);\n      }\n      [part~='item'][data-type='warning'] {\n        border-left: 3px solid var(--nymbal-color-warning, #d97706);\n      }\n      [part~='item'][data-type='info'] {\n        border-left: 3px solid var(--nymbal-color-accent, #2563eb);\n      }\n      [part~='close'] {\n        background: none;\n        border: none;\n        cursor: pointer;\n        color: var(--nymbal-color-text-muted, #71717a);\n        font-size: var(--nymbal-font-size-base, 1rem);\n        padding: 0;\n        margin-left: auto;\n      }\n      @keyframes nymbal-toast-in {\n        from {\n          opacity: 0;\n          transform: translateY(-8px);\n        }\n        to {\n          opacity: 1;\n          transform: translateY(0);\n        }\n      }\n    `,\n  ]\n\n  private _items: ToastItem[] = []\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('data-testid', 'toast')\n  }\n\n  show(message: string, type: ToastType = 'info'): void {\n    const durationMs = Number(this.getAttribute('duration-ms')) || 4000\n    const item: ToastItem = { id: ++nextId, message, type }\n    this._items = [...this._items, item]\n    this.requestUpdate()\n    setTimeout(() => this.dismiss(item.id), durationMs)\n  }\n\n  private dismiss(id: number): void {\n    const remaining = this._items.filter((i) => i.id !== id)\n    if (remaining.length === this._items.length) return\n    this._items = remaining\n    this.requestUpdate()\n  }\n\n  protected override render() {\n    return repeat(\n      this._items,\n      (item) => item.id,\n      (item) => html`\n        <div part=\"item\" class=\"nymbal-toast-item\" data-type=${item.type} role=\"alert\">\n          <span part=\"message\">${item.message}</span>\n          <button\n            type=\"button\"\n            part=\"close\"\n            class=\"nymbal-toast-close\"\n            aria-label=\"Dismiss\"\n            @click=${() => this.dismiss(item.id)}\n          >\n            ×\n          </button>\n        </div>\n      `,\n    )\n  }\n\n  static showGlobal(message: string, type: ToastType = 'info'): void {\n    let toastEl = document.querySelector('nymbal-toast') as NymbalToast | null\n    if (!toastEl) {\n      toastEl = document.createElement('nymbal-toast') as NymbalToast\n      document.body.appendChild(toastEl)\n    }\n    toastEl.show(message, type)\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,KAAK,YAAY;AAC1B,SAAS,cAAc;AAWvB,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA,EACX,YAAY;AAAA,IACV,EAAE,MAAM,YAAY,MAAM,YAAY,MAAM,SAAS;AAAA,IACrD,EAAE,MAAM,eAAe,MAAM,cAAc,MAAM,SAAS;AAAA,EAC5D;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,OAAO,CAAC,QAAQ,WAAW,OAAO;AAAA,EAClC,OAAO,CAAC;AAAA,EACR,UAAU;AACZ;AAEA,IAAI,SAAS;AAEN,IAAM,cAAN,cAA0B,cAAc;AAAA,EAC7C,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;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,EA0EF;AAAA,EAEQ,SAAsB,CAAC;AAAA,EAEtB,oBAA0B;AACjC,UAAM,kBAAkB;AACxB,SAAK,aAAa,eAAe,OAAO;AAAA,EAC1C;AAAA,EAEA,KAAK,SAAiB,OAAkB,QAAc;AACpD,UAAM,aAAa,OAAO,KAAK,aAAa,aAAa,CAAC,KAAK;AAC/D,UAAM,OAAkB,EAAE,IAAI,EAAE,QAAQ,SAAS,KAAK;AACtD,SAAK,SAAS,CAAC,GAAG,KAAK,QAAQ,IAAI;AACnC,SAAK,cAAc;AACnB,eAAW,MAAM,KAAK,QAAQ,KAAK,EAAE,GAAG,UAAU;AAAA,EACpD;AAAA,EAEQ,QAAQ,IAAkB;AAChC,UAAM,YAAY,KAAK,OAAO,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE;AACvD,QAAI,UAAU,WAAW,KAAK,OAAO,OAAQ;AAC7C,SAAK,SAAS;AACd,SAAK,cAAc;AAAA,EACrB;AAAA,EAEmB,SAAS;AAC1B,WAAO;AAAA,MACL,KAAK;AAAA,MACL,CAAC,SAAS,KAAK;AAAA,MACf,CAAC,SAAS;AAAA,+DAC+C,KAAK,IAAI;AAAA,iCACvC,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMxB,MAAM,KAAK,QAAQ,KAAK,EAAE,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM5C;AAAA,EACF;AAAA,EAEA,OAAO,WAAW,SAAiB,OAAkB,QAAc;AACjE,QAAI,UAAU,SAAS,cAAc,cAAc;AACnD,QAAI,CAAC,SAAS;AACZ,gBAAU,SAAS,cAAc,cAAc;AAC/C,eAAS,KAAK,YAAY,OAAO;AAAA,IACnC;AACA,YAAQ,KAAK,SAAS,IAAI;AAAA,EAC5B;AACF;","names":[]}

package/dist/chunk-2XXBQPDB.js

@@ -0,0 +1,113 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalElement,
+  baseStyles,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/mini-cart.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-mini-cart",
+  reactName: "MiniCart",
+  // The cart's item count a server read, shown until the cart store settles.
+  attributes: [{ name: "count", prop: "count", type: "number" }],
+  events: [{ name: "nymbal:mini-cart:clicked", prop: "onClick", detail: "void" }],
+  parts: ["button", "icon", "badge"],
+  slots: ["icon"],
+  children: false
+};
+var NymbalMiniCart = class extends NymbalElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    css`
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+      [part~='button'] {
+        background: none;
+        border: none;
+        cursor: pointer;
+        position: relative;
+        padding: var(--nymbal-spacing-sm, 0.5rem);
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+        color: var(--nymbal-color-text, #18181b);
+      }
+      [part~='icon'] {
+        display: block;
+        width: 24px;
+        height: 24px;
+      }
+      [part~='badge'] {
+        position: absolute;
+        top: 0;
+        right: 0;
+        background: var(--nymbal-color-accent, #2563eb);
+        color: var(--nymbal-color-text-inverse, #ffffff);
+        font-size: var(--nymbal-font-size-xs, 0.75rem);
+        font-weight: var(--nymbal-font-weight-bold, 700);
+        min-width: 18px;
+        height: 18px;
+        border-radius: var(--nymbal-radius-full, 9999px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+      }
+      [part~='badge']:empty {
+        display: none;
+      }
+    `
+  ];
+  stores() {
+    return [this.client.cart];
+  }
+  storeSettled() {
+    this.count = void 0;
+  }
+  itemCount() {
+    if (typeof this.count === "number" && Number.isFinite(this.count)) return this.count;
+    return this.readsStores ? this.client.cart.getState().itemCount : 0;
+  }
+  render() {
+    const itemCount = this.itemCount();
+    return html`<button
+      type="button"
+      part="button"
+      data-testid="mini-cart"
+      aria-label="Cart (${itemCount} items)"
+      @click=${this.handleClick}
+    >
+      <slot name="icon"
+        ><svg
+          part="icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="9" cy="21" r="1" />
+          <circle cx="20" cy="21" r="1" />
+          <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" /></svg
+      ></slot>
+      <span part="badge" class="nymbal-mini-cart-badge" data-testid="mini-cart-badge"
+        >${itemCount > 0 ? itemCount : nothing}</span
+      >
+    </button>`;
+  }
+  handleClick = () => {
+    this.dispatchEvent(
+      new CustomEvent("nymbal:mini-cart:clicked", { bubbles: true, composed: true })
+    );
+  };
+};
+
+export {
+  NymbalMiniCart
+};
+//# sourceMappingURL=chunk-2XXBQPDB.js.map

package/dist/chunk-2XXBQPDB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/mini-cart.ts"],"sourcesContent":["import { css, html, nothing } from 'lit'\nimport { baseStyles, NymbalElement, propertiesOf, type ElementSchema } from '../base-element.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-mini-cart',\n  reactName: 'MiniCart',\n  // The cart's item count a server read, shown until the cart store settles.\n  attributes: [{ name: 'count', prop: 'count', type: 'number' }],\n  events: [{ name: 'nymbal:mini-cart:clicked', prop: 'onClick', detail: 'void' }],\n  parts: ['button', 'icon', 'badge'],\n  slots: ['icon'],\n  children: false,\n}\n\nexport class NymbalMiniCart 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        position: relative;\n      }\n      [part~='button'] {\n        background: none;\n        border: none;\n        cursor: pointer;\n        position: relative;\n        padding: var(--nymbal-spacing-sm, 0.5rem);\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n        color: var(--nymbal-color-text, #18181b);\n      }\n      [part~='icon'] {\n        display: block;\n        width: 24px;\n        height: 24px;\n      }\n      [part~='badge'] {\n        position: absolute;\n        top: 0;\n        right: 0;\n        background: var(--nymbal-color-accent, #2563eb);\n        color: var(--nymbal-color-text-inverse, #ffffff);\n        font-size: var(--nymbal-font-size-xs, 0.75rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n        min-width: 18px;\n        height: 18px;\n        border-radius: var(--nymbal-radius-full, 9999px);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        line-height: 1;\n      }\n      [part~='badge']:empty {\n        display: none;\n      }\n    `,\n  ]\n\n  declare count: number | undefined\n\n  protected override stores() {\n    return [this.client.cart]\n  }\n\n  protected override storeSettled(): void {\n    this.count = undefined\n  }\n\n  private itemCount(): number {\n    if (typeof this.count === 'number' && Number.isFinite(this.count)) return this.count\n    return this.readsStores ? this.client.cart.getState().itemCount : 0\n  }\n\n  protected override render() {\n    const itemCount = this.itemCount()\n    // An empty badge is `nothing`, not '': Lit's hydration records a server-rendered '' as a committed text node the\n    // server never wrote, so the first count after it (a header mounted once the cart has loaded) lands in the part's\n    // end marker and the badge stays empty.\n    return html`<button\n      type=\"button\"\n      part=\"button\"\n      data-testid=\"mini-cart\"\n      aria-label=\"Cart (${itemCount} items)\"\n      @click=${this.handleClick}\n    >\n      <slot name=\"icon\"\n        ><svg\n          part=\"icon\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <circle cx=\"9\" cy=\"21\" r=\"1\" />\n          <circle cx=\"20\" cy=\"21\" r=\"1\" />\n          <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\" /></svg\n      ></slot>\n      <span part=\"badge\" class=\"nymbal-mini-cart-badge\" data-testid=\"mini-cart-badge\"\n        >${itemCount > 0 ? itemCount : nothing}</span\n      >\n    </button>`\n  }\n\n  private handleClick = (): void => {\n    this.dispatchEvent(\n      new CustomEvent('nymbal:mini-cart:clicked', { bubbles: true, composed: true }),\n    )\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,KAAK,MAAM,eAAe;AAGnC,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA;AAAA,EAEX,YAAY,CAAC,EAAE,MAAM,SAAS,MAAM,SAAS,MAAM,SAAS,CAAC;AAAA,EAC7D,QAAQ,CAAC,EAAE,MAAM,4BAA4B,MAAM,WAAW,QAAQ,OAAO,CAAC;AAAA,EAC9E,OAAO,CAAC,UAAU,QAAQ,OAAO;AAAA,EACjC,OAAO,CAAC,MAAM;AAAA,EACd,UAAU;AACZ;AAEO,IAAM,iBAAN,cAA6B,cAAc;AAAA,EAChD,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuCF;AAAA,EAImB,SAAS;AAC1B,WAAO,CAAC,KAAK,OAAO,IAAI;AAAA,EAC1B;AAAA,EAEmB,eAAqB;AACtC,SAAK,QAAQ;AAAA,EACf;AAAA,EAEQ,YAAoB;AAC1B,QAAI,OAAO,KAAK,UAAU,YAAY,OAAO,SAAS,KAAK,KAAK,EAAG,QAAO,KAAK;AAC/E,WAAO,KAAK,cAAc,KAAK,OAAO,KAAK,SAAS,EAAE,YAAY;AAAA,EACpE;AAAA,EAEmB,SAAS;AAC1B,UAAM,YAAY,KAAK,UAAU;AAIjC,WAAO;AAAA;AAAA;AAAA;AAAA,0BAIe,SAAS;AAAA,eACpB,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAiBpB,YAAY,IAAI,YAAY,OAAO;AAAA;AAAA;AAAA,EAG5C;AAAA,EAEQ,cAAc,MAAY;AAChC,SAAK;AAAA,MACH,IAAI,YAAY,4BAA4B,EAAE,SAAS,MAAM,UAAU,KAAK,CAAC;AAAA,IAC/E;AAAA,EACF;AACF;","names":[]}

package/dist/chunk-42SSME5H.js

@@ -0,0 +1,84 @@
+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/login-form.ts
+import { html } from "lit";
+var SCHEMA = {
+  tag: "nymbal-login-form",
+  reactName: "LoginForm",
+  attributes: [],
+  events: [
+    {
+      name: "nymbal:auth:signed-in",
+      prop: "onSignedIn",
+      detail: "{ customer: unknown }"
+    }
+  ],
+  parts: ["form", "field", "label", "input", "error", "submit"],
+  slots: ["submit-label"],
+  children: false
+};
+var NymbalLoginForm = class extends NymbalFormElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [baseStyles, buttonStyles, fieldStyles];
+  // The page leaves on success; a second sign-in while it does would only race the redirect.
+  lockOnSuccess = true;
+  async send() {
+    await this.client.auth.login(this.value("email"), this.value("password"));
+    this.emit("nymbal:auth:signed-in", { customer: this.client.auth.getState().customer });
+  }
+  failureText(err) {
+    return err instanceof Error && err.message !== "" ? err.message : "Invalid email or password.";
+  }
+  render() {
+    return html`
+      ${this.renderError()}
+      <form part="form" data-testid="login-form" @submit=${this.onSubmit}>
+        ${renderField({
+      id: "login-email",
+      name: "email",
+      label: "Email",
+      type: "email",
+      autocomplete: "email",
+      required: true,
+      placeholder: "you@example.com"
+    })}
+        ${renderField({
+      id: "login-password",
+      name: "password",
+      label: "Password",
+      type: "password",
+      autocomplete: "current-password",
+      required: true,
+      placeholder: "Your password"
+    })}
+        <button
+          type="submit"
+          part="submit"
+          class="btn btn-primary"
+          data-testid="login-submit"
+          ?disabled=${this.pending}
+        >
+          ${this.pending ? "Signing in..." : html`<slot name="submit-label">Sign In</slot>`}
+        </button>
+      </form>
+    `;
+  }
+};
+
+export {
+  NymbalLoginForm
+};
+//# sourceMappingURL=chunk-42SSME5H.js.map

package/dist/chunk-42SSME5H.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/login-form.ts"],"sourcesContent":["import { 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-login-form',\n  reactName: 'LoginForm',\n  attributes: [],\n  events: [\n    {\n      name: 'nymbal:auth:signed-in',\n      prop: 'onSignedIn',\n      detail: '{ customer: unknown }',\n    },\n  ],\n  parts: ['form', 'field', 'label', 'input', 'error', 'submit'],\n  slots: ['submit-label'],\n  children: false,\n}\n\n/** Signs the shopper in; the page decides where they go next (`nymbal:auth:signed-in`). */\nexport class NymbalLoginForm extends NymbalFormElement {\n  static override schema = SCHEMA\n  static override properties = propertiesOf(SCHEMA)\n  static override styles = [baseStyles, buttonStyles, fieldStyles]\n\n  // The page leaves on success; a second sign-in while it does would only race the redirect.\n  protected override readonly lockOnSuccess = true\n\n  protected override async send(): Promise<void> {\n    await this.client.auth.login(this.value('email'), this.value('password'))\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 !== '' ? err.message : 'Invalid email or password.'\n  }\n\n  protected override render() {\n    return html`\n      ${this.renderError()}\n      <form part=\"form\" data-testid=\"login-form\" @submit=${this.onSubmit}>\n        ${renderField({\n          id: 'login-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: 'login-password',\n          name: 'password',\n          label: 'Password',\n          type: 'password',\n          autocomplete: 'current-password',\n          required: true,\n          placeholder: 'Your password',\n        })}\n        <button\n          type=\"submit\"\n          part=\"submit\"\n          class=\"btn btn-primary\"\n          data-testid=\"login-submit\"\n          ?disabled=${this.pending}\n        >\n          ${this.pending ? 'Signing in...' : html`<slot name=\"submit-label\">Sign In</slot>`}\n        </button>\n      </form>\n    `\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAAA,SAAS,YAAY;AAKrB,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,SAAS,SAAS,SAAS,SAAS,QAAQ;AAAA,EAC5D,OAAO,CAAC,cAAc;AAAA,EACtB,UAAU;AACZ;AAGO,IAAM,kBAAN,cAA8B,kBAAkB;AAAA,EACrD,OAAgB,SAAS;AAAA,EACzB,OAAgB,aAAa,aAAa,MAAM;AAAA,EAChD,OAAgB,SAAS,CAAC,YAAY,cAAc,WAAW;AAAA;AAAA,EAGnC,gBAAgB;AAAA,EAE5C,MAAyB,OAAsB;AAC7C,UAAM,KAAK,OAAO,KAAK,MAAM,KAAK,MAAM,OAAO,GAAG,KAAK,MAAM,UAAU,CAAC;AACxE,SAAK,KAAK,yBAAyB,EAAE,UAAU,KAAK,OAAO,KAAK,SAAS,EAAE,SAAS,CAAC;AAAA,EACvF;AAAA,EAEmB,YAAY,KAAsB;AACnD,WAAO,eAAe,SAAS,IAAI,YAAY,KAAK,IAAI,UAAU;AAAA,EACpE;AAAA,EAEmB,SAAS;AAC1B,WAAO;AAAA,QACH,KAAK,YAAY,CAAC;AAAA,2DACiC,KAAK,QAAQ;AAAA,UAC9D,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,aAAa;AAAA,IACf,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMY,KAAK,OAAO;AAAA;AAAA,YAEtB,KAAK,UAAU,kBAAkB,8CAA8C;AAAA;AAAA;AAAA;AAAA,EAIzF;AACF;","names":[]}