@nymbalhq/web-components 1.0.0 → 1.2.0

package/dist/chunk-EBMA7JGV.js

@@ -0,0 +1,130 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalElement,
+  baseStyles,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/sort-dropdown.ts
+import { css, html } from "lit";
+import { DEFAULT_PRODUCT_SORT, PRODUCT_SORT_LABELS } from "@nymbalhq/types";
+function parseKeys(value) {
+  if (!value) return [];
+  try {
+    const parsed = JSON.parse(value);
+    return Array.isArray(parsed) ? parsed.filter((k) => typeof k === "string") : [];
+  } catch (err) {
+    console.error("[nymbal-sort-dropdown] failed to parse sort-keys attribute", err);
+    return [];
+  }
+}
+var SCHEMA = {
+  tag: "nymbal-sort-dropdown",
+  reactName: "SortDropdown",
+  attributes: [
+    { name: "sort-keys", prop: "sortKeys", type: "json" },
+    { name: "value", prop: "value", type: "string" },
+    { name: "default-sort", prop: "defaultSort", type: "string" }
+  ],
+  events: [{ name: "nymbal:sort:changed", prop: "onSortChange", detail: "{ sort: string }" }],
+  parts: ["select"],
+  slots: [],
+  children: false
+};
+var NymbalSortDropdown = class extends NymbalElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    css`
+      [part~='select'] {
+        display: block;
+        width: 100%;
+        min-width: 10rem;
+        padding: 0.5rem 0.75rem;
+        font: inherit;
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        line-height: 1.5;
+        color: var(--nymbal-color-text, #18181b);
+        background-color: var(--nymbal-color-surface, #ffffff);
+        border: 1px solid var(--nymbal-color-border, #e4e4e7);
+        border-radius: var(--nymbal-radius-md, 0.375rem);
+        cursor: pointer;
+        appearance: none;
+        transition:
+          border-color var(--nymbal-transition-fast, 150ms ease),
+          box-shadow var(--nymbal-transition-fast, 150ms ease);
+      }
+      [part~='select']:focus {
+        outline: none;
+        border-color: var(--nymbal-color-accent, #2563eb);
+        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+      }
+    `
+  ];
+  _wired = null;
+  /** A slotted `<select>`; a server's element has no light DOM to read, so it renders its own. */
+  slottedSelect() {
+    const children = this.children;
+    if (children === void 0) return null;
+    return [...children].find((c) => c instanceof HTMLSelectElement) ?? null;
+  }
+  select() {
+    return this.slottedSelect() ?? this.renderRoot?.querySelector('select[part~="select"]') ?? null;
+  }
+  /** The keys to offer, and the one shown: `value` when offered, else `default-sort`, else the first. */
+  choice() {
+    const keys = parseKeys(this.getAttribute("sort-keys"));
+    const wanted = this.getAttribute("value") ?? "";
+    const fallback = this.getAttribute("default-sort") ?? DEFAULT_PRODUCT_SORT;
+    const selected = keys.includes(wanted) ? wanted : keys.includes(fallback) ? fallback : keys[0];
+    return { keys, selected };
+  }
+  label(key) {
+    return PRODUCT_SORT_LABELS[key] ?? key;
+  }
+  /** Its own select renders its options, so a server render offers them too. */
+  render() {
+    if (this.slottedSelect() !== null) return html`<slot></slot>`;
+    const { keys, selected } = this.choice();
+    return html`<select part="select" data-testid="sort-dropdown" aria-label="Sort products">
+      ${keys.map(
+      (key) => html`<option value=${key} ?selected=${key === selected}>${this.label(key)}</option>`
+    )}
+    </select>`;
+  }
+  updated() {
+    const select = this.select();
+    if (select === null) return;
+    if (this._wired !== select) {
+      select.addEventListener("change", this.handleChange);
+      this._wired = select;
+    }
+    const { keys, selected } = this.choice();
+    if (select === this.slottedSelect()) {
+      select.replaceChildren(
+        ...keys.map((key) => {
+          const option = document.createElement("option");
+          option.value = key;
+          option.textContent = this.label(key);
+          return option;
+        })
+      );
+    }
+    if (selected !== void 0) select.value = selected;
+  }
+  handleChange = (e) => {
+    this.dispatchEvent(
+      new CustomEvent("nymbal:sort:changed", {
+        bubbles: true,
+        composed: true,
+        detail: { sort: e.target.value }
+      })
+    );
+  };
+};
+
+export {
+  NymbalSortDropdown
+};
+//# sourceMappingURL=chunk-EBMA7JGV.js.map

package/dist/chunk-EBMA7JGV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/sort-dropdown.ts"],"sourcesContent":["import { css, html } from 'lit'\nimport { DEFAULT_PRODUCT_SORT, PRODUCT_SORT_LABELS, type ProductSortKey } from '@nymbalhq/types'\nimport { baseStyles, NymbalElement, propertiesOf, type ElementSchema } from '../base-element.js'\n\nfunction parseKeys(value: string | null): string[] {\n  if (!value) return []\n  try {\n    const parsed: unknown = JSON.parse(value)\n    return Array.isArray(parsed) ? parsed.filter((k): k is string => typeof k === 'string') : []\n  } catch (err) {\n    console.error('[nymbal-sort-dropdown] failed to parse sort-keys attribute', err)\n    return []\n  }\n}\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-sort-dropdown',\n  reactName: 'SortDropdown',\n  attributes: [\n    { name: 'sort-keys', prop: 'sortKeys', type: 'json' },\n    { name: 'value', prop: 'value', type: 'string' },\n    { name: 'default-sort', prop: 'defaultSort', type: 'string' },\n  ],\n  events: [{ name: 'nymbal:sort:changed', prop: 'onSortChange', detail: '{ sort: string }' }],\n  parts: ['select'],\n  slots: [],\n  children: false,\n}\n\n/**\n * <nymbal-sort-dropdown sort-keys='[…]' value default-sort>: one option per sort key the store reports, in its order,\n * labelled from PRODUCT_SORT_LABELS. A `value` the keys lack shows `default-sort`. Choosing an option emits\n * `nymbal:sort:changed` with `{ sort }`. A `<select>` child (a server render's, so the sort works before JS) is slotted\n * and is the one it fills; with none, it renders its own `part=\"select\"`.\n */\nexport class NymbalSortDropdown extends NymbalElement {\n  static override schema = SCHEMA\n  static override properties = propertiesOf(SCHEMA)\n\n  static override styles = [\n    baseStyles,\n    css`\n      [part~='select'] {\n        display: block;\n        width: 100%;\n        min-width: 10rem;\n        padding: 0.5rem 0.75rem;\n        font: inherit;\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        line-height: 1.5;\n        color: var(--nymbal-color-text, #18181b);\n        background-color: var(--nymbal-color-surface, #ffffff);\n        border: 1px solid var(--nymbal-color-border, #e4e4e7);\n        border-radius: var(--nymbal-radius-md, 0.375rem);\n        cursor: pointer;\n        appearance: none;\n        transition:\n          border-color var(--nymbal-transition-fast, 150ms ease),\n          box-shadow var(--nymbal-transition-fast, 150ms ease);\n      }\n      [part~='select']:focus {\n        outline: none;\n        border-color: var(--nymbal-color-accent, #2563eb);\n        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);\n      }\n    `,\n  ]\n\n  private _wired: HTMLSelectElement | null = null\n\n  /** A slotted `<select>`; a server's element has no light DOM to read, so it renders its own. */\n  private slottedSelect(): HTMLSelectElement | null {\n    const children = this.children as HTMLCollection | undefined\n    if (children === undefined) return null\n    return [...children].find((c): c is HTMLSelectElement => c instanceof HTMLSelectElement) ?? null\n  }\n\n  private select(): HTMLSelectElement | null {\n    return this.slottedSelect() ?? this.renderRoot?.querySelector('select[part~=\"select\"]') ?? null\n  }\n\n  /** The keys to offer, and the one shown: `value` when offered, else `default-sort`, else the first. */\n  private choice(): { keys: string[]; selected: string | undefined } {\n    const keys = parseKeys(this.getAttribute('sort-keys'))\n    const wanted = this.getAttribute('value') ?? ''\n    const fallback = this.getAttribute('default-sort') ?? DEFAULT_PRODUCT_SORT\n    const selected = keys.includes(wanted) ? wanted : keys.includes(fallback) ? fallback : keys[0]\n    return { keys, selected }\n  }\n\n  private label(key: string): string {\n    return PRODUCT_SORT_LABELS[key as ProductSortKey] ?? key\n  }\n\n  /** Its own select renders its options, so a server render offers them too. */\n  protected override render() {\n    if (this.slottedSelect() !== null) return html`<slot></slot>`\n    const { keys, selected } = this.choice()\n    return html`<select part=\"select\" data-testid=\"sort-dropdown\" aria-label=\"Sort products\">\n      ${keys.map(\n        (key) => html`<option value=${key} ?selected=${key === selected}>${this.label(key)}</option>`,\n      )}\n    </select>`\n  }\n\n  protected override updated(): void {\n    const select = this.select()\n    if (select === null) return\n    if (this._wired !== select) {\n      select.addEventListener('change', this.handleChange)\n      this._wired = select\n    }\n\n    const { keys, selected } = this.choice()\n    if (select === this.slottedSelect()) {\n      select.replaceChildren(\n        ...keys.map((key) => {\n          const option = document.createElement('option')\n          option.value = key\n          option.textContent = this.label(key)\n          return option\n        }),\n      )\n    }\n    if (selected !== undefined) select.value = selected\n  }\n\n  private handleChange = (e: Event): void => {\n    this.dispatchEvent(\n      new CustomEvent('nymbal:sort:changed', {\n        bubbles: true,\n        composed: true,\n        detail: { sort: (e.target as HTMLSelectElement).value },\n      }),\n    )\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-EYDMJNNK.js

@@ -0,0 +1,176 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+
+// src/registry.ts
+var CLIENT_KEY = /* @__PURE__ */ Symbol.for("nymbal.client");
+function isStore(value) {
+  return typeof value === "object" && value !== null && typeof value.subscribe === "function" && typeof value.getState === "function";
+}
+var settledStores = /* @__PURE__ */ new WeakSet();
+function registerClient(client) {
+  ;
+  globalThis[CLIENT_KEY] = client;
+  for (const store of Object.values(client)) {
+    if (!isStore(store)) continue;
+    store.subscribe(() => {
+      if (store.getState().loading !== true) settledStores.add(store);
+    });
+  }
+}
+function hasSettled(store) {
+  return settledStores.has(store);
+}
+function hasClient() {
+  return globalThis[CLIENT_KEY] !== void 0;
+}
+function getClient() {
+  const client = globalThis[CLIENT_KEY];
+  if (!client) {
+    throw new Error("NymbalClient not registered. Call registerClient() before using components.");
+  }
+  return client;
+}
+
+// src/define.ts
+function define(...elements) {
+  for (const element of elements) {
+    element.beforeDefine?.();
+    if (element.uses !== void 0) define(...element.uses);
+    if (!customElements.get(element.schema.tag)) {
+      customElements.define(element.schema.tag, element);
+    }
+  }
+}
+
+// src/base-element.ts
+import {
+  css,
+  LitElement
+} from "lit";
+var TYPES = {
+  string: String,
+  number: Number,
+  boolean: Boolean,
+  // JSON attributes are parsed where they are read, so a malformed value is reported by the element that needs it.
+  json: String
+};
+function propertiesOf(schema) {
+  return Object.fromEntries(
+    schema.attributes.map((a) => [a.prop, { attribute: a.name, type: TYPES[a.type] }])
+  );
+}
+var baseStyles = css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+`;
+function parsedJson(element, name, value) {
+  if (value === void 0 || value === null || value === "") return void 0;
+  if (typeof value !== "string") return value;
+  try {
+    return JSON.parse(value);
+  } catch (err) {
+    console.error(`[${element.localName}] failed to parse the ${name} attribute`, err);
+    return void 0;
+  }
+}
+var NymbalElement = class extends LitElement {
+  /** Defines this element, and those it renders, unless its tag is already defined (see `define`). */
+  static define() {
+    define(this);
+  }
+  _unsubs = [];
+  /** Set while the element's first render takes over a server's shadow root (see `readsStores`). */
+  _serverRender = false;
+  get client() {
+    return getClient();
+  }
+  /** Whether a client is registered: never on a server. Without one the element subscribes to no store. */
+  get hasClient() {
+    return hasClient();
+  }
+  /**
+   * 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.
+   */
+  get readsStores() {
+    return this.hasClient && !this._serverRender;
+  }
+  /** The SDK stores the element renders from; it re-renders on each change while connected. */
+  stores() {
+    return [];
+  }
+  /**
+   * 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.
+   */
+  storeSettled(_store) {
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasClient) return;
+    for (const store of this.stores()) {
+      this._unsubs.push(
+        store.subscribe(() => {
+          if (store.getState().loading !== true) this.storeSettled(store);
+          this.requestUpdate();
+        })
+      );
+    }
+    if (!this._serverRender) this.takeSettledStores();
+  }
+  /**
+   * 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.
+   */
+  takeSettledStores() {
+    for (const store of this.stores()) if (hasSettled(store)) this.storeSettled(store);
+  }
+  /**
+   * 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`.
+   */
+  createRenderRoot() {
+    if (this.shadowRoot === null) {
+      const template = [...this.children].find(
+        (c) => c instanceof HTMLTemplateElement && c.getAttribute("shadowrootmode") === "open"
+      );
+      if (template !== void 0) {
+        const root = this.attachShadow(this.constructor.shadowRootOptions);
+        const markup = template.innerHTML;
+        if (typeof root.setHTMLUnsafe === "function") root.setHTMLUnsafe(markup);
+        else root.innerHTML = markup;
+        template.remove();
+      }
+    }
+    this._serverRender = this.shadowRoot !== null;
+    return super.createRenderRoot();
+  }
+  update(changed) {
+    super.update(changed);
+    if (!this._serverRender) return;
+    this._serverRender = false;
+    if (this.hasClient) this.takeSettledStores();
+    this.willUpdate(changed);
+    super.update(changed);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    for (const fn of this._unsubs) fn();
+    this._unsubs = [];
+  }
+};
+
+export {
+  registerClient,
+  getClient,
+  define,
+  propertiesOf,
+  baseStyles,
+  parsedJson,
+  NymbalElement
+};
+//# sourceMappingURL=chunk-EYDMJNNK.js.map

package/dist/chunk-EYDMJNNK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/registry.ts","../src/define.ts","../src/base-element.ts"],"sourcesContent":["import type { NymbalClient } from '@nymbalhq/sdk'\n\nconst CLIENT_KEY = Symbol.for('nymbal.client')\n\ninterface Store {\n  subscribe(fn: () => void): () => void\n  getState(): unknown\n}\n\nfunction isStore(value: unknown): value is Store {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    typeof (value as Store).subscribe === 'function' &&\n    typeof (value as Store).getState === 'function'\n  )\n}\n\n/**\n * The registered clients' stores that have had a settled update (one that is not `loading`). A store starts at\n * `loading: false` before anything loaded it, so its state alone cannot tell an element connecting later whether the\n * store's data has replaced what a server rendered.\n */\nconst settledStores = new WeakSet<object>()\n\nexport function registerClient(client: NymbalClient): void {\n  ;(globalThis as Record<symbol, unknown>)[CLIENT_KEY] = client\n  for (const store of Object.values(client)) {\n    if (!isStore(store)) continue\n    store.subscribe(() => {\n      if ((store.getState() as { loading?: unknown }).loading !== true) settledStores.add(store)\n    })\n  }\n}\n\n/** Whether a registered client's store has had a settled update since the client was registered. */\nexport function hasSettled(store: object): boolean {\n  return settledStores.has(store)\n}\n\n/** Whether a client is registered: never on a server, which renders elements from their properties. */\nexport function hasClient(): boolean {\n  return (globalThis as Record<symbol, unknown>)[CLIENT_KEY] !== undefined\n}\n\nexport function getClient(): NymbalClient {\n  const client = (globalThis as Record<symbol, unknown>)[CLIENT_KEY] as NymbalClient | undefined\n  if (!client) {\n    throw new Error('NymbalClient not registered. Call registerClient() before using components.')\n  }\n  return client\n}\n","import type { ElementSchema } from './base-element.js'\n\n/** A Nymbal element class, as `define` takes it. */\nexport interface NymbalElementClass extends CustomElementConstructor {\n  schema: ElementSchema\n  /** The Nymbal elements it renders in its own shadow root, which must be defined for it to work. */\n  uses?: readonly NymbalElementClass[]\n  /** What the element needs registered before it runs; called whether or not its tag is still free. */\n  beforeDefine?(): void\n}\n\n/**\n * Defines each element under its schema's tag, with the elements it renders, except a tag that is already defined:\n * an element the project defined first under a Nymbal tag wins.\n */\nexport function define(...elements: NymbalElementClass[]): void {\n  for (const element of elements) {\n    element.beforeDefine?.()\n    if (element.uses !== undefined) define(...element.uses)\n    if (!customElements.get(element.schema.tag)) {\n      customElements.define(element.schema.tag, element)\n    }\n  }\n}\n","import './hydrate-support.js'\nimport {\n  css,\n  LitElement,\n  type PropertyDeclaration,\n  type PropertyDeclarations,\n  type PropertyValues,\n} from 'lit'\nimport type { NymbalClient } from '@nymbalhq/sdk'\nimport { getClient, hasClient, hasSettled } from './registry.js'\nimport { define, type NymbalElementClass } from './define.js'\n\n/** How an attribute's value reads: the React wrapper types its prop from this, and JSON travels stringified. */\nexport type ElementAttributeType = 'string' | 'number' | 'boolean' | 'json'\n\n/**\n * An element's public interface, declared once on the class. Its Lit properties are derived from `attributes`, and the\n * React wrappers are generated from it, so neither can disagree with the element.\n */\nexport interface ElementSchema {\n  tag: string\n  /** The React wrapper's component name. */\n  reactName: string\n  /** `name` is the HTML attribute, `prop` the React prop and the Lit property. */\n  attributes: Array<{ name: string; prop: string; type: ElementAttributeType }>\n  /** `name` is the DOM event, `prop` the React handler, `detail` the TypeScript type of its detail. */\n  events: Array<{ name: string; prop: string; detail: string }>\n  /** Every `part` the element renders, for `::part()` styling. */\n  parts: string[]\n  /** Every named `slot` it renders, each with its default content as the fallback. */\n  slots: string[]\n  /** Whether the React wrapper passes children through. */\n  children: boolean\n}\n\nconst TYPES: Record<ElementAttributeType, PropertyDeclaration['type']> = {\n  string: String,\n  number: Number,\n  boolean: Boolean,\n  // JSON attributes are parsed where they are read, so a malformed value is reported by the element that needs it.\n  json: String,\n}\n\n/** The Lit property declarations for a schema's attributes. */\nexport function propertiesOf(schema: ElementSchema): PropertyDeclarations {\n  return Object.fromEntries(\n    schema.attributes.map((a) => [a.prop, { attribute: a.name, type: TYPES[a.type] }]),\n  )\n}\n\n/** A page's reset does not reach a shadow root, so each element brings the one it relied on in the light DOM. */\nexport const baseStyles = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n`\n\nexport interface Subscribable {\n  subscribe(fn: () => void): () => void\n  getState(): unknown\n}\n\n/** A JSON property's value: parsed when it came from the attribute, undefined when unset or malformed (reported). */\nexport function parsedJson<T>(element: Element, name: string, value: unknown): T | undefined {\n  if (value === undefined || value === null || value === '') return undefined\n  if (typeof value !== 'string') return value as T\n  try {\n    return JSON.parse(value) as T\n  } catch (err) {\n    console.error(`[${element.localName}] failed to parse the ${name} attribute`, err)\n    return undefined\n  }\n}\n\nexport abstract class NymbalElement extends LitElement {\n  declare static schema: ElementSchema\n\n  /** Defines this element, and those it renders, unless its tag is already defined (see `define`). */\n  static define(this: NymbalElementClass): void {\n    define(this)\n  }\n\n  private _unsubs: Array<() => void> = []\n  /** Set while the element's first render takes over a server's shadow root (see `readsStores`). */\n  private _serverRender = false\n\n  protected get client(): NymbalClient {\n    return getClient()\n  }\n\n  /** Whether a client is registered: never on a server. Without one the element subscribes to no store. */\n  protected get hasClient(): boolean {\n    return hasClient()\n  }\n\n  /**\n   * Whether this render reads the client's stores. Not on a server, and not in the first render of an element taking\n   * over a server's shadow root: hydration needs the server's render (a store still loading would change it), so that\n   * render is the server's, and the element renders again from its stores straight after.\n   */\n  protected get readsStores(): boolean {\n    return this.hasClient && !this._serverRender\n  }\n\n  /** The SDK stores the element renders from; it re-renders on each change while connected. */\n  protected stores(): Subscribable[] {\n    return []\n  }\n\n  /**\n   * A store `stores()` named has settled (an update that is not `loading`): the properties a server rendered this\n   * element from give way to it. An update while loading leaves them showing, so a count does not flip to 0 and back.\n   */\n  protected storeSettled(_store: Subscribable): void {}\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasClient) return\n    for (const store of this.stores()) {\n      this._unsubs.push(\n        store.subscribe(() => {\n          if ((store.getState() as { loading?: unknown }).loading !== true) this.storeSettled(store)\n          this.requestUpdate()\n        }),\n      )\n    }\n    // A hydrating element keeps the server's properties for its first render (see `update`).\n    if (!this._serverRender) this.takeSettledStores()\n  }\n\n  /**\n   * A store that settled before this element connected sends it no update, so the properties a server gave (a page\n   * restored from a router's cache after the cart changed elsewhere) give way to it here.\n   */\n  private takeSettledStores(): void {\n    for (const store of this.stores()) if (hasSettled(store)) this.storeSettled(store)\n  }\n\n  /**\n   * React inserts a soft navigation's server HTML with `innerHTML`, which leaves the declarative shadow root an unparsed\n   * template: it becomes this element's shadow root here, before Lit looks for one, so the element hydrates it rather\n   * than rendering a second. A parsed declarative shadow root (a full load) is already `shadowRoot`.\n   */\n  protected override createRenderRoot(): HTMLElement | DocumentFragment {\n    if (this.shadowRoot === null) {\n      const template = [...this.children].find(\n        (c): c is HTMLTemplateElement =>\n          c instanceof HTMLTemplateElement && c.getAttribute('shadowrootmode') === 'open',\n      )\n      if (template !== undefined) {\n        const root = this.attachShadow((this.constructor as typeof LitElement).shadowRootOptions)\n        const markup = template.innerHTML\n        if (typeof root.setHTMLUnsafe === 'function') root.setHTMLUnsafe(markup)\n        else root.innerHTML = markup\n        template.remove()\n      }\n    }\n    this._serverRender = this.shadowRoot !== null\n    return super.createRenderRoot()\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed)\n    if (!this._serverRender) return\n    // The render above hydrated the server's; this one, in the same update, is from the stores. A scheduled update\n    // here would be a second update per element, which Lit warns of.\n    this._serverRender = false\n    if (this.hasClient) this.takeSettledStores()\n    this.willUpdate(changed)\n    super.update(changed)\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    for (const fn of this._unsubs) fn()\n    this._unsubs = []\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-FIF6GQ6U.js

@@ -0,0 +1,141 @@
+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/site-footer.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-site-footer",
+  reactName: "SiteFooter",
+  // `[{ heading, links: [{ label, href }], text? }]`; `year` for the copyright line (this year when absent).
+  attributes: [
+    { name: "columns", prop: "columns", type: "json" },
+    { name: "year", prop: "year", type: "number" }
+  ],
+  events: [],
+  parts: ["footer", "column", "heading", "link", "legal"],
+  slots: [],
+  children: false
+};
+var NymbalSiteFooter = class extends NymbalElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    css`
+      :host {
+        display: block;
+        margin-top: auto;
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+      }
+      [part~='footer'] {
+        background-color: var(--nymbal-color-primary, #18181b);
+        color: var(--nymbal-color-text-inverse, #ffffff);
+      }
+      .inner {
+        max-width: 72rem;
+        margin-inline: auto;
+        padding: 3rem var(--nymbal-spacing-md, 1rem) var(--nymbal-spacing-lg, 1.5rem);
+      }
+      .columns {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: var(--nymbal-spacing-xl, 2rem);
+        margin-bottom: var(--nymbal-spacing-xl, 2rem);
+      }
+      @media (min-width: 641px) {
+        .inner {
+          padding-inline: var(--nymbal-spacing-lg, 1.5rem);
+        }
+      }
+      @media (min-width: 641px) {
+        .columns {
+          grid-template-columns: repeat(3, 1fr);
+        }
+      }
+      [part~='heading'] {
+        margin: 0 0 var(--nymbal-spacing-md, 1rem);
+        line-height: 1.2;
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        font-weight: var(--nymbal-font-weight-bold, 700);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--nymbal-color-text-inverse, #ffffff);
+      }
+      ul {
+        display: flex;
+        flex-direction: column;
+        gap: var(--nymbal-spacing-sm, 0.5rem);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      [part~='link'] {
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        color: var(--nymbal-color-text-inverse, #ffffff);
+        opacity: 0.7;
+        text-decoration: none;
+        transition: opacity var(--nymbal-transition-fast, 150ms ease);
+      }
+      [part~='link']:hover {
+        opacity: 1;
+      }
+      .text {
+        max-width: 28ch;
+        margin: 0;
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        line-height: 1.6;
+        opacity: 0.7;
+      }
+      [part~='legal'] {
+        margin: 0;
+        padding-top: var(--nymbal-spacing-lg, 1.5rem);
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+        font-size: var(--nymbal-font-size-xs, 0.75rem);
+        opacity: 0.5;
+      }
+    `
+  ];
+  render() {
+    const columns = parsedJson(this, "columns", this.columns);
+    const year = this.year === void 0 || Number.isNaN(this.year) ? (/* @__PURE__ */ new Date()).getFullYear() : this.year;
+    return html`
+      <footer part="footer" data-testid="site-footer">
+        <div class="inner">
+          <div class="columns">
+            ${(Array.isArray(columns) ? columns : []).map(
+      (column) => html`
+                <div part="column">
+                  <h2 part="heading">${column.heading}</h2>
+                  ${column.text === void 0 ? nothing : html`<p class="text">${column.text}</p>`}
+                  ${(column.links ?? []).length === 0 ? nothing : html`<ul>
+                        ${column.links.map(
+        (link) => html`<li>
+                              <a part="link" href=${link.href} @click=${navigateOnClick}
+                                >${link.label}</a
+                              >
+                            </li>`
+      )}
+                      </ul>`}
+                </div>
+              `
+    )}
+          </div>
+          <p part="legal">&copy; ${year} All rights reserved.</p>
+        </div>
+      </footer>
+    `;
+  }
+};
+
+export {
+  NymbalSiteFooter
+};
+//# sourceMappingURL=chunk-FIF6GQ6U.js.map

package/dist/chunk-FIF6GQ6U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/site-footer.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-site-footer',\n  reactName: 'SiteFooter',\n  // `[{ heading, links: [{ label, href }], text? }]`; `year` for the copyright line (this year when absent).\n  attributes: [\n    { name: 'columns', prop: 'columns', type: 'json' },\n    { name: 'year', prop: 'year', type: 'number' },\n  ],\n  events: [],\n  parts: ['footer', 'column', 'heading', 'link', 'legal'],\n  slots: [],\n  children: false,\n}\n\ninterface Column {\n  heading: string\n  links?: Array<{ label: string; href: string }>\n  text?: string\n}\n\n/** The store's footer: columns of links (or a line of text) under their headings, and the copyright line. */\nexport class NymbalSiteFooter 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        margin-top: auto;\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n      }\n      [part~='footer'] {\n        background-color: var(--nymbal-color-primary, #18181b);\n        color: var(--nymbal-color-text-inverse, #ffffff);\n      }\n      .inner {\n        max-width: 72rem;\n        margin-inline: auto;\n        padding: 3rem var(--nymbal-spacing-md, 1rem) var(--nymbal-spacing-lg, 1.5rem);\n      }\n      .columns {\n        display: grid;\n        grid-template-columns: 1fr;\n        gap: var(--nymbal-spacing-xl, 2rem);\n        margin-bottom: var(--nymbal-spacing-xl, 2rem);\n      }\n      @media (min-width: 641px) {\n        .inner {\n          padding-inline: var(--nymbal-spacing-lg, 1.5rem);\n        }\n      }\n      @media (min-width: 641px) {\n        .columns {\n          grid-template-columns: repeat(3, 1fr);\n        }\n      }\n      [part~='heading'] {\n        margin: 0 0 var(--nymbal-spacing-md, 1rem);\n        line-height: 1.2;\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: var(--nymbal-color-text-inverse, #ffffff);\n      }\n      ul {\n        display: flex;\n        flex-direction: column;\n        gap: var(--nymbal-spacing-sm, 0.5rem);\n        margin: 0;\n        padding: 0;\n        list-style: none;\n      }\n      [part~='link'] {\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        color: var(--nymbal-color-text-inverse, #ffffff);\n        opacity: 0.7;\n        text-decoration: none;\n        transition: opacity var(--nymbal-transition-fast, 150ms ease);\n      }\n      [part~='link']:hover {\n        opacity: 1;\n      }\n      .text {\n        max-width: 28ch;\n        margin: 0;\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        line-height: 1.6;\n        opacity: 0.7;\n      }\n      [part~='legal'] {\n        margin: 0;\n        padding-top: var(--nymbal-spacing-lg, 1.5rem);\n        border-top: 1px solid rgba(255, 255, 255, 0.1);\n        font-size: var(--nymbal-font-size-xs, 0.75rem);\n        opacity: 0.5;\n      }\n    `,\n  ]\n\n  declare columns: unknown\n  declare year: number | undefined\n\n  protected override render() {\n    const columns = parsedJson<Column[]>(this, 'columns', this.columns)\n    const year =\n      this.year === undefined || Number.isNaN(this.year) ? new Date().getFullYear() : this.year\n    return html`\n      <footer part=\"footer\" data-testid=\"site-footer\">\n        <div class=\"inner\">\n          <div class=\"columns\">\n            ${(Array.isArray(columns) ? columns : []).map(\n              (column) => html`\n                <div part=\"column\">\n                  <h2 part=\"heading\">${column.heading}</h2>\n                  ${column.text === undefined ? nothing : html`<p class=\"text\">${column.text}</p>`}\n                  ${(column.links ?? []).length === 0\n                    ? nothing\n                    : html`<ul>\n                        ${column.links!.map(\n                          (link) =>\n                            html`<li>\n                              <a part=\"link\" href=${link.href} @click=${navigateOnClick}\n                                >${link.label}</a\n                              >\n                            </li>`,\n                        )}\n                      </ul>`}\n                </div>\n              `,\n            )}\n          </div>\n          <p part=\"legal\">&copy; ${year} All rights reserved.</p>\n        </div>\n      </footer>\n    `\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,KAAK,MAAM,eAAe;AAUnC,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA;AAAA,EAEX,YAAY;AAAA,IACV,EAAE,MAAM,WAAW,MAAM,WAAW,MAAM,OAAO;AAAA,IACjD,EAAE,MAAM,QAAQ,MAAM,QAAQ,MAAM,SAAS;AAAA,EAC/C;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,OAAO,CAAC,UAAU,UAAU,WAAW,QAAQ,OAAO;AAAA,EACtD,OAAO,CAAC;AAAA,EACR,UAAU;AACZ;AASO,IAAM,mBAAN,cAA+B,cAAc;AAAA,EAClD,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyEF;AAAA,EAKmB,SAAS;AAC1B,UAAM,UAAU,WAAqB,MAAM,WAAW,KAAK,OAAO;AAClE,UAAM,OACJ,KAAK,SAAS,UAAa,OAAO,MAAM,KAAK,IAAI,KAAI,oBAAI,KAAK,GAAE,YAAY,IAAI,KAAK;AACvF,WAAO;AAAA;AAAA;AAAA;AAAA,eAII,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,GAAG;AAAA,MACxC,CAAC,WAAW;AAAA;AAAA,uCAEa,OAAO,OAAO;AAAA,oBACjC,OAAO,SAAS,SAAY,UAAU,uBAAuB,OAAO,IAAI,MAAM;AAAA,qBAC7E,OAAO,SAAS,CAAC,GAAG,WAAW,IAC9B,UACA;AAAA,0BACI,OAAO,MAAO;AAAA,QACd,CAAC,SACC;AAAA,oDACwB,KAAK,IAAI,WAAW,eAAe;AAAA,mCACpD,KAAK,KAAK;AAAA;AAAA;AAAA,MAGrB,CAAC;AAAA,4BACG;AAAA;AAAA;AAAA,IAGhB,CAAC;AAAA;AAAA,mCAEsB,IAAI;AAAA;AAAA;AAAA;AAAA,EAIrC;AACF;","names":[]}

package/dist/chunk-GHXTJ2CF.js

@@ -0,0 +1,109 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+
+// src/view-styles.ts
+import { css } from "lit";
+var buttonStyles = css`
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--nymbal-spacing-xs, 0.25rem);
+    padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);
+    font-family: inherit;
+    font-size: var(--nymbal-font-size-sm, 0.875rem);
+    font-weight: var(--nymbal-font-weight-medium, 500);
+    line-height: 1.4;
+    text-decoration: none;
+    border: 1px solid transparent;
+    border-radius: var(--nymbal-radius-md, 0.5rem);
+    cursor: pointer;
+    transition:
+      background-color var(--nymbal-transition-fast, 150ms) ease,
+      border-color var(--nymbal-transition-fast, 150ms) ease;
+  }
+  .btn:focus-visible {
+    outline: 2px solid var(--nymbal-color-accent, #2563eb);
+    outline-offset: 2px;
+  }
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .btn-primary {
+    background-color: var(--nymbal-color-primary, #18181b);
+    color: var(--nymbal-color-text-inverse, #ffffff);
+    border-color: var(--nymbal-color-primary, #18181b);
+  }
+  .btn-primary:hover {
+    background-color: var(--nymbal-color-primary-hover, #27272a);
+  }
+  .btn-secondary {
+    background-color: transparent;
+    color: var(--nymbal-color-primary, #18181b);
+    border-color: var(--nymbal-color-border, #e4e4e7);
+  }
+  .btn-secondary:hover {
+    background-color: var(--nymbal-color-border, #e4e4e7);
+  }
+`;
+var fieldStyles = css`
+  :host {
+    display: block;
+    font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+    color: var(--nymbal-color-text, #18181b);
+  }
+  [part~='field'] {
+    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-xs, 0.25rem);
+  }
+  [part~='input'] {
+    display: block;
+    width: 100%;
+    padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);
+    font: inherit;
+    font-size: var(--nymbal-font-size-sm, 0.875rem);
+    line-height: 1.5;
+    color: var(--nymbal-color-text, #18181b);
+    background-color: var(--nymbal-color-surface, #ffffff);
+    border: 1px solid var(--nymbal-color-border, #e4e4e7);
+    border-radius: var(--nymbal-radius-md, 0.5rem);
+  }
+  [part~='input']:focus {
+    outline: none;
+    border-color: var(--nymbal-color-accent, #2563eb);
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+  }
+  [part~='input']:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  [part~='error'] {
+    margin-bottom: var(--nymbal-spacing-md, 1rem);
+    padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);
+    font-size: var(--nymbal-font-size-sm, 0.875rem);
+    color: var(--nymbal-color-error, #dc2626);
+    background: #fef2f2;
+    border: 1px solid var(--nymbal-color-error, #dc2626);
+    border-radius: var(--nymbal-radius-md, 0.5rem);
+  }
+  [part~='message'] {
+    margin-top: var(--nymbal-spacing-md, 1rem);
+    font-size: var(--nymbal-font-size-sm, 0.875rem);
+    color: var(--nymbal-color-success, #16a34a);
+  }
+  [part~='submit'] {
+    width: 100%;
+    margin-top: var(--nymbal-spacing-sm, 0.5rem);
+  }
+`;
+
+export {
+  buttonStyles,
+  fieldStyles
+};
+//# sourceMappingURL=chunk-GHXTJ2CF.js.map

package/dist/chunk-GHXTJ2CF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/view-styles.ts"],"sourcesContent":["import { css } from 'lit'\n\n/** The primary and secondary buttons the page views render, from the same tokens the templates' `.btn` reads. */\nexport const buttonStyles = css`\n  .btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--nymbal-spacing-xs, 0.25rem);\n    padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);\n    font-family: inherit;\n    font-size: var(--nymbal-font-size-sm, 0.875rem);\n    font-weight: var(--nymbal-font-weight-medium, 500);\n    line-height: 1.4;\n    text-decoration: none;\n    border: 1px solid transparent;\n    border-radius: var(--nymbal-radius-md, 0.5rem);\n    cursor: pointer;\n    transition:\n      background-color var(--nymbal-transition-fast, 150ms) ease,\n      border-color var(--nymbal-transition-fast, 150ms) ease;\n  }\n  .btn:focus-visible {\n    outline: 2px solid var(--nymbal-color-accent, #2563eb);\n    outline-offset: 2px;\n  }\n  .btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .btn-primary {\n    background-color: var(--nymbal-color-primary, #18181b);\n    color: var(--nymbal-color-text-inverse, #ffffff);\n    border-color: var(--nymbal-color-primary, #18181b);\n  }\n  .btn-primary:hover {\n    background-color: var(--nymbal-color-primary-hover, #27272a);\n  }\n  .btn-secondary {\n    background-color: transparent;\n    color: var(--nymbal-color-primary, #18181b);\n    border-color: var(--nymbal-color-border, #e4e4e7);\n  }\n  .btn-secondary:hover {\n    background-color: var(--nymbal-color-border, #e4e4e7);\n  }\n`\n\n/** Labelled fields, error and notice text, as the templates' `.form-group` styled them. */\nexport const fieldStyles = css`\n  :host {\n    display: block;\n    font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n    color: var(--nymbal-color-text, #18181b);\n  }\n  [part~='field'] {\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-xs, 0.25rem);\n  }\n  [part~='input'] {\n    display: block;\n    width: 100%;\n    padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);\n    font: inherit;\n    font-size: var(--nymbal-font-size-sm, 0.875rem);\n    line-height: 1.5;\n    color: var(--nymbal-color-text, #18181b);\n    background-color: var(--nymbal-color-surface, #ffffff);\n    border: 1px solid var(--nymbal-color-border, #e4e4e7);\n    border-radius: var(--nymbal-radius-md, 0.5rem);\n  }\n  [part~='input']:focus {\n    outline: none;\n    border-color: var(--nymbal-color-accent, #2563eb);\n    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);\n  }\n  [part~='input']:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n  [part~='error'] {\n    margin-bottom: var(--nymbal-spacing-md, 1rem);\n    padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);\n    font-size: var(--nymbal-font-size-sm, 0.875rem);\n    color: var(--nymbal-color-error, #dc2626);\n    background: #fef2f2;\n    border: 1px solid var(--nymbal-color-error, #dc2626);\n    border-radius: var(--nymbal-radius-md, 0.5rem);\n  }\n  [part~='message'] {\n    margin-top: var(--nymbal-spacing-md, 1rem);\n    font-size: var(--nymbal-font-size-sm, 0.875rem);\n    color: var(--nymbal-color-success, #16a34a);\n  }\n  [part~='submit'] {\n    width: 100%;\n    margin-top: var(--nymbal-spacing-sm, 0.5rem);\n  }\n`\n"],"mappings":";;;AAAA,SAAS,WAAW;AAGb,IAAM,eAAe;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;AA8CrB,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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;","names":[]}