bank20baht-ui 0.3.0 → 0.4.0

package/README.md

@@ -134,6 +134,14 @@ Picking a file uploads immediately; the value becomes `{ name, size, type, url }
 JSON, chips with remove buttons in the UI, `max_size`/`accept` validated on both client and
 server. Omit `uploader` for the old capture-only mode.
 
+No registry function at all? `<baht-upload>` talks to an endpoint straight from attributes:
+the file is POSTed as multipart on pick, the endpoint returns the stored URL, and that URL is
+the value (`baht-change` → `{ value, files }`; progress and error events included).
+
+```html
+<baht-upload url="/api/uploads" accept=".pdf,image/*" max-size="10485760" label="Attachment"></baht-upload>
+```
+
 ### Drafts / autosave (host pattern)
 
 The library is controlled — autosave is three lines in your app:
@@ -305,6 +313,27 @@ list of gotchas: [docs/frameworks/angular.md](./docs/frameworks/angular.md#gotch
 vue({ template: { compilerOptions: { isCustomElement: (tag) => tag.startsWith('baht-') } } })
 ```
 
+## Server-side rendering
+
+`bank20baht-ui/ssr` (Node) renders any Lit template with `@lit-labs/ssr` and moves each
+`baht-*` element's shadow template into its light DOM, so the HTML string it returns is
+exactly what the client would have rendered. `bank20baht-ui/hydrate` (browser, imported
+**before** `bank20baht-ui`) picks that markup up instead of re-rendering it:
+
+```js
+// server
+import { html } from 'lit';
+import { renderToString } from 'bank20baht-ui/ssr';
+const page = await renderToString(html`<baht-button variant="primary" label="Save"></baht-button>`);
+
+// client — import order matters
+import 'bank20baht-ui/hydrate';
+import 'bank20baht-ui';
+```
+
+`@lit-labs/ssr` is an optional peer dependency (server only). Full guide, limitations
+(light-DOM children, ids, i18n locale) and troubleshooting: [docs/ssr.md](./docs/ssr.md).
+
 ## Docs, Storybook, examples
 
 - **Per-component docs**: [`docs/`](./docs/README.md) — one .md per component + framework
@@ -323,6 +352,6 @@ value, disabled, required, options, max_length, min, max, validators[], formatte
 
 ## Visual Builder
 
-The playground app ships a two-mode Visual Builder (Form mode: palette/WYSIWYG canvas/properties;
+The docs site ships a two-mode Visual Builder (Form mode: palette/WYSIWYG canvas/properties;
 Workflow mode: sequence + rules with a live preview running the real `<baht-workflow>`), with
-Import/Export JSON. Run it from the monorepo: `pnpm --filter playground dev` → `/builder`.
+Import/Export JSON. Run it from the monorepo: `bun run --filter docs dev` → `/builder`.

package/dist/chunks/baht-toast-CD1WrOYr.js

@@ -0,0 +1,284 @@
+import { svg as c, html as p, nothing as d } from "lit";
+import { property as r, query as $, customElement as f, state as w } from "lit/decorators.js";
+import { B as v, b as C, h as g } from "./base-CajA2aCO.js";
+import { t as E } from "./i18n-BcPL9_Jh.js";
+const O = {
+  copy: c`<rect x="6" y="6" width="8" height="8" rx="1.5"/><path d="M10 6V4.5A1.5 1.5 0 0 0 8.5 3H4.5A1.5 1.5 0 0 0 3 4.5v4A1.5 1.5 0 0 0 4.5 10H6"/>`,
+  check: c`<path d="M3.5 8.5 6.5 11.5 12.5 4.5"/>`,
+  download: c`<path d="M8 3v7m0 0 3-3m-3 3L5 7"/><path d="M3 12h10"/>`,
+  upload: c`<path d="M8 12V5m0 0 3 3M8 5 5 8"/><path d="M3 4h10"/>`,
+  plus: c`<path d="M8 3.5v9M3.5 8h9"/>`,
+  external: c`<path d="M6 3H3.5v9.5h9.5V10"/><path d="M9 3h4v4"/><path d="M13 3 7.5 8.5"/>`,
+  close: c`<path d="M4 4l8 8M12 4l-8 8"/>`,
+  play: c`<path d="M5 3.5v9l7-4.5z"/>`,
+  search: c`<circle cx="7" cy="7" r="4"/><path d="m13 13-3.2-3.2"/>`
+};
+function S(t) {
+  return p`<svg
+    class="baht-icon"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >${O[t]}</svg>`;
+}
+function M(t) {
+  return t in O;
+}
+var k = Object.defineProperty, x = Object.getOwnPropertyDescriptor, u = (t, s, o, i) => {
+  for (var e = i > 1 ? void 0 : i ? x(s, o) : s, a = t.length - 1, l; a >= 0; a--)
+    (l = t[a]) && (e = (i ? l(s, o, e) : l(e)) || e);
+  return i && e && k(s, o, e), e;
+};
+let h = class extends v {
+  constructor() {
+    super(...arguments), this.variant = "primary", this.size = "md", this.disabled = !1, this.type = "button", this.label = "", this.icon = "", this.iconOnly = !1;
+  }
+  firstUpdated() {
+    this.iconOnly || C(this, this.buttonEl);
+  }
+  render() {
+    const t = this.variant === "primary" ? "" : ` baht-button--${this.variant}`, s = this.size === "md" ? "" : ` baht-button--${this.size}`, o = this.iconOnly ? " baht-button--icon" : "", i = this.icon && M(this.icon) ? S(this.icon) : d;
+    return p`<button
+      class="baht-button${t}${s}${o}"
+      type=${this.type}
+      aria-label=${this.iconOnly && this.label ? this.label : d}
+      ?disabled=${this.disabled}
+    >${i}${this.iconOnly ? d : this.label}</button>`;
+  }
+};
+u([
+  r()
+], h.prototype, "variant", 2);
+u([
+  r()
+], h.prototype, "size", 2);
+u([
+  r({ type: Boolean })
+], h.prototype, "disabled", 2);
+u([
+  r()
+], h.prototype, "type", 2);
+u([
+  r()
+], h.prototype, "label", 2);
+u([
+  r()
+], h.prototype, "icon", 2);
+u([
+  r({ type: Boolean, attribute: "icon-only" })
+], h.prototype, "iconOnly", 2);
+u([
+  $("button")
+], h.prototype, "buttonEl", 2);
+h = u([
+  f("baht-button")
+], h);
+const P = 600;
+function _(t, s) {
+  const o = typeof t.getAnimations == "function" ? t.getAnimations({ subtree: !0 }) : [];
+  if (o.length === 0) {
+    s();
+    return;
+  }
+  let i = !1;
+  const e = () => {
+    i || (i = !0, s());
+  };
+  Promise.all(o.map((a) => a.finished.catch(() => {
+  }))).then(e, e), setTimeout(e, P);
+}
+var B = Object.defineProperty, T = Object.getOwnPropertyDescriptor, b = (t, s, o, i) => {
+  for (var e = i > 1 ? void 0 : i ? T(s, o) : s, a = t.length - 1, l; a >= 0; a--)
+    (l = t[a]) && (e = (i ? l(s, o, e) : l(e)) || e);
+  return i && e && B(s, o, e), e;
+};
+let n = class extends v {
+  constructor() {
+    super(...arguments), this.open = !1, this.heading = "", this.showClose = !0, this.closeOnScrim = !0, this.closing = !1, this.closeToken = 0, this.previousFocus = null, this.onKeydown = (t) => {
+      !this.open || n.openStack.at(-1) !== this || (t.key === "Escape" ? this.requestClose("escape") : t.key === "Tab" && this.trapFocus(t));
+    };
+  }
+  get titleId() {
+    return `baht-modal-title-${this.uid}`;
+  }
+  focusables() {
+    const t = this.querySelector(".baht-modal");
+    return t ? Array.from(
+      t.querySelectorAll(
+        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+    ) : [];
+  }
+  /** Keep Tab cycling inside the dialog (no keyboard escape to the page behind). */
+  trapFocus(t) {
+    const s = this.focusables(), o = this.querySelector(".baht-modal");
+    if (s.length === 0) {
+      o == null || o.focus(), t.preventDefault();
+      return;
+    }
+    const i = s[0], e = s[s.length - 1], a = document.activeElement;
+    if (!this.contains(a)) {
+      i.focus(), t.preventDefault();
+      return;
+    }
+    t.shiftKey && (a === i || a === o) ? (e.focus(), t.preventDefault()) : !t.shiftKey && a === e && (i.focus(), t.preventDefault());
+  }
+  connectedCallback() {
+    super.connectedCallback(), g() && document.addEventListener("keydown", this.onKeydown);
+  }
+  disconnectedCallback() {
+    g() && document.removeEventListener("keydown", this.onKeydown), n.openStack = n.openStack.filter((t) => t !== this), super.disconnectedCallback();
+  }
+  firstUpdated() {
+    C(this, this.bodyEl);
+  }
+  willUpdate(t) {
+    t.has("open") && (this.open ? this.closing = !1 : t.get("open") === !0 && (this.closing = !0));
+  }
+  updated(t) {
+    var s, o;
+    if (t.has("open") && (n.openStack = n.openStack.filter((i) => i !== this), this.open && n.openStack.push(this)), t.has("open") && !this.open && this.closing) {
+      const i = ++this.closeToken, e = this.querySelector(".baht-modal-scrim"), a = () => {
+        i === this.closeToken && !this.open && (this.closing = !1);
+      };
+      e ? _(e, a) : a();
+    }
+    if (t.has("open") && this.open && (this.previousFocus = document.activeElement, (s = this.querySelector(".baht-modal")) == null || s.focus()), t.has("open") && !this.open && t.get("open") === !0) {
+      const i = this.previousFocus;
+      this.previousFocus = null, i != null && i.isConnected && (!document.activeElement || document.activeElement === document.body || this.contains(document.activeElement)) && ((o = i.focus) == null || o.call(i));
+    }
+  }
+  /** Ask the host to close (the host owns `open`). */
+  requestClose(t = "button") {
+    this.dispatchEvent(
+      new CustomEvent("baht-close", { detail: { reason: t }, bubbles: !0, composed: !0 })
+    );
+  }
+  render() {
+    return p`<div
+      class="baht-modal-scrim${this.closing ? " baht-modal-scrim--closing" : ""}"
+      style=${this.open || this.closing ? d : "display:none"}
+      @click=${(t) => this.closeOnScrim && t.target === t.currentTarget && this.requestClose("scrim")}
+    >
+      <div
+        class="baht-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby=${this.heading ? this.titleId : d}
+        aria-label=${this.heading ? d : "Dialog"}
+        tabindex="-1"
+      >
+        ${this.heading || this.showClose ? p`<header class="baht-modal-header">
+              <div class="baht-modal-title" id=${this.titleId}>${this.heading}</div>
+              ${this.showClose ? p`<button type="button" class="baht-modal-close" aria-label=${E("close")} @click=${() => this.requestClose("button")}>×</button>` : d}
+            </header>` : d}
+        <div class="baht-modal-body"></div>
+      </div>
+    </div>`;
+  }
+};
+n.openStack = [];
+b([
+  r({ type: Boolean, reflect: !0 })
+], n.prototype, "open", 2);
+b([
+  r()
+], n.prototype, "heading", 2);
+b([
+  r({ type: Boolean, attribute: "show-close" })
+], n.prototype, "showClose", 2);
+b([
+  r({ type: Boolean, attribute: "close-on-scrim" })
+], n.prototype, "closeOnScrim", 2);
+b([
+  $(".baht-modal-body")
+], n.prototype, "bodyEl", 2);
+b([
+  w()
+], n.prototype, "closing", 2);
+n = b([
+  f("baht-modal")
+], n);
+var D = Object.defineProperty, q = Object.getOwnPropertyDescriptor, y = (t, s, o, i) => {
+  for (var e = i > 1 ? void 0 : i ? q(s, o) : s, a = t.length - 1, l; a >= 0; a--)
+    (l = t[a]) && (e = (i ? l(s, o, e) : l(e)) || e);
+  return i && e && D(s, o, e), e;
+};
+let m = class extends v {
+  constructor() {
+    super(...arguments), this.duration = 4e3, this.entries = [], this.timers = /* @__PURE__ */ new Map();
+  }
+  show(t) {
+    const s = {
+      id: ++m.counter,
+      message: t.message,
+      tone: t.tone ?? "neutral",
+      duration: t.duration ?? this.duration
+    };
+    return this.entries = [...this.entries, s], s.duration > 0 && this.timers.set(
+      s.id,
+      setTimeout(() => this.dismiss(s.id), s.duration)
+    ), s.id;
+  }
+  dismiss(t) {
+    const s = this.entries.find((e) => e.id === t);
+    if (!s || s.leaving) return;
+    clearTimeout(this.timers.get(t)), this.timers.delete(t), this.entries = this.entries.map((e) => e.id === t ? { ...e, leaving: !0 } : e), this.dispatchEvent(
+      new CustomEvent("baht-dismiss", {
+        detail: { id: t, message: s.message },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+    const o = () => {
+      this.entries = this.entries.filter((e) => e.id !== t);
+    }, i = this.querySelector(`.baht-toast[data-toast="${t}"]`);
+    if (!i) {
+      o();
+      return;
+    }
+    i.classList.add("baht-toast--leaving"), _(i, o);
+  }
+  disconnectedCallback() {
+    this.timers.forEach((t) => clearTimeout(t)), this.timers.clear(), super.disconnectedCallback();
+  }
+  render() {
+    return p`<div class="baht-toaster" role="status" aria-live="polite">
+      ${this.entries.map(
+      // Danger/warning interrupt (role=alert); the rest ride the polite container.
+      (t) => p`<div
+          class="baht-toast ${t.tone === "neutral" ? "" : `baht-toast--${t.tone}`}${t.leaving ? " baht-toast--leaving" : ""}"
+          data-toast=${t.id}
+          role=${t.tone === "danger" || t.tone === "warning" ? "alert" : d}
+        >
+          <span class="baht-toast-message">${t.message}</span>
+          <button type="button" class="baht-toast-dismiss" aria-label=${E("dismiss")} @click=${() => this.dismiss(t.id)}>×</button>
+        </div>`
+    )}
+    </div>`;
+  }
+};
+m.counter = 0;
+y([
+  r({ type: Number })
+], m.prototype, "duration", 2);
+y([
+  w()
+], m.prototype, "entries", 2);
+m = y([
+  f("baht-toast")
+], m);
+export {
+  h as B,
+  n as a,
+  m as b,
+  _ as c,
+  M as i,
+  S as r
+};