@editora/ui-core 0.1.8 → 0.1.10

package/dist/form.esm.js

@@ -0,0 +1,862 @@
+import { E as p } from "./ElementBase-909688f3.mjs";
+class g {
+  constructor() {
+    this.fields = /* @__PURE__ */ new Map();
+  }
+  registerField(t, e) {
+    if (!t)
+      throw new Error("Field must have a name to register with the form");
+    return this.fields.set(t, e), () => {
+      this.fields.delete(t);
+    };
+  }
+  getValues() {
+    const t = {};
+    for (const [e, i] of this.fields)
+      t[e] = i.getValue();
+    return t;
+  }
+  setValue(t, e) {
+    const i = this.fields.get(t);
+    i && typeof i.setValue == "function" && i.setValue(e);
+  }
+  async validateField(t) {
+    const e = this.fields.get(t);
+    if (!e)
+      return { valid: !0 };
+    if (typeof e.validate == "function") {
+      const i = await e.validate();
+      return e.setError && e.setError(i.valid ? void 0 : i.message), i;
+    }
+    return { valid: !0 };
+  }
+  async validateAll() {
+    const t = {};
+    let e = !0;
+    const i = Array.from(this.fields.entries());
+    for (const [r, s] of i) {
+      const n = await this.validateField(r);
+      n.valid || (e = !1, t[r] = n.message || "invalid");
+    }
+    return { valid: e, errors: t };
+  }
+}
+const _ = /* @__PURE__ */ new Set(["heading", "title", "description", "state-text", "loading-text"]), v = `
+  :host {
+    --ui-form-gap: 12px;
+    --ui-form-radius: 14px;
+    --ui-form-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-form-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-form-muted: var(--ui-color-muted, var(--ui-muted, #64748b));
+    --ui-form-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 66%, transparent);
+    --ui-form-border: 1px solid var(--ui-form-border-color);
+    --ui-form-shadow:
+      none;
+    --ui-form-padding: 16px;
+    --ui-form-header-gap: 12px;
+    --ui-form-header-border: color-mix(in srgb, var(--ui-form-border-color) 84%, transparent);
+    --ui-form-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    --ui-form-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    --ui-form-status-bg: color-mix(in srgb, var(--ui-form-bg) 94%, transparent);
+    --ui-form-status-border: color-mix(in srgb, var(--ui-form-border-color) 84%, transparent);
+    --ui-form-status-text: var(--ui-form-muted);
+    color-scheme: light dark;
+    display: block;
+    width: 100%;
+    min-width: 0;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .form {
+    width: 100%;
+    min-width: 0;
+    margin: 0;
+    display: grid;
+    gap: var(--ui-form-gap);
+    box-sizing: border-box;
+    color: var(--ui-form-color);
+    background: var(--ui-form-bg);
+    border: var(--ui-form-border);
+    border-radius: var(--ui-form-radius);
+    box-shadow: var(--ui-form-shadow);
+    padding: var(--ui-form-padding);
+    transition: none;
+  }
+
+  :host([data-ui-ready]) .form {
+    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease, opacity 140ms ease;
+  }
+
+  .header {
+    min-width: 0;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: var(--ui-form-header-gap);
+    align-items: start;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--ui-form-header-border);
+  }
+
+  .header[hidden],
+  .heading[hidden],
+  .title[hidden],
+  .description[hidden],
+  .actions[hidden],
+  .footer[hidden],
+  .status[hidden],
+  .status-text[hidden],
+  .title-text[hidden],
+  .description-text[hidden] {
+    display: none !important;
+  }
+
+  .heading {
+    min-width: 0;
+    display: grid;
+    gap: 4px;
+  }
+
+  .title {
+    margin: 0;
+    min-width: 0;
+    font: 650 16px/1.3 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+    color: inherit;
+  }
+
+  .description {
+    margin: 0;
+    min-width: 0;
+    font-size: 12px;
+    line-height: 1.45;
+    letter-spacing: 0.01em;
+    color: var(--ui-form-muted);
+  }
+
+  .actions {
+    min-width: 0;
+    display: inline-flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .body {
+    min-width: 0;
+    display: grid;
+    gap: var(--ui-form-gap);
+  }
+
+  .status {
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 28px;
+    padding: 0 10px;
+    border-radius: calc(var(--ui-form-radius) - 6px);
+    border: 1px solid var(--ui-form-status-border);
+    background: var(--ui-form-status-bg);
+    color: var(--ui-form-status-text);
+    font: 550 12px/1.35 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+  }
+
+  .status::before {
+    content: '';
+    inline-size: 8px;
+    block-size: 8px;
+    border-radius: 999px;
+    background: currentColor;
+    opacity: 0.72;
+    flex: 0 0 auto;
+  }
+
+  .status[data-tone="warning"] {
+    --ui-form-status-bg: color-mix(in srgb, var(--ui-color-warning, #d97706) 12%, transparent);
+    --ui-form-status-border: color-mix(in srgb, var(--ui-color-warning, #d97706) 44%, var(--ui-form-border-color));
+    --ui-form-status-text: color-mix(in srgb, var(--ui-color-warning, #d97706) 90%, #111827 10%);
+  }
+
+  .status[data-tone="error"] {
+    --ui-form-status-bg: color-mix(in srgb, var(--ui-color-danger, #dc2626) 12%, transparent);
+    --ui-form-status-border: color-mix(in srgb, var(--ui-color-danger, #dc2626) 44%, var(--ui-form-border-color));
+    --ui-form-status-text: color-mix(in srgb, var(--ui-color-danger, #dc2626) 88%, #111827 12%);
+  }
+
+  .status[data-tone="success"] {
+    --ui-form-status-bg: color-mix(in srgb, var(--ui-color-success, #16a34a) 12%, transparent);
+    --ui-form-status-border: color-mix(in srgb, var(--ui-color-success, #16a34a) 44%, var(--ui-form-border-color));
+    --ui-form-status-text: color-mix(in srgb, var(--ui-color-success, #16a34a) 90%, #111827 10%);
+  }
+
+  .status[data-tone="loading"] {
+    --ui-form-status-bg: color-mix(in srgb, var(--ui-form-accent) 12%, transparent);
+    --ui-form-status-border: color-mix(in srgb, var(--ui-form-accent) 44%, var(--ui-form-border-color));
+    --ui-form-status-text: color-mix(in srgb, var(--ui-form-accent) 90%, #111827 10%);
+  }
+
+  .footer {
+    min-width: 0;
+    display: inline-flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    padding-top: 2px;
+  }
+
+  :host([variant="surface"]) {
+    --ui-form-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-form-padding: 16px;
+    --ui-form-shadow:
+      0 1px 3px rgba(2, 6, 23, 0.05),
+      0 14px 28px rgba(2, 6, 23, 0.08);
+  }
+
+  :host([variant="outline"]) {
+    --ui-form-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, transparent);
+    --ui-form-padding: 14px;
+    --ui-form-shadow: none;
+  }
+
+  :host([variant="soft"]) {
+    --ui-form-bg: color-mix(in srgb, var(--ui-form-accent) 6%, var(--ui-color-surface, #ffffff));
+    --ui-form-border-color: color-mix(in srgb, var(--ui-form-accent) 26%, var(--ui-color-border, #cbd5e1));
+    --ui-form-padding: 16px;
+    --ui-form-shadow:
+      0 1px 4px rgba(2, 6, 23, 0.04),
+      0 12px 24px rgba(2, 6, 23, 0.06);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-form-bg: #0f172a;
+    --ui-form-color: #e2e8f0;
+    --ui-form-muted: #93a4bd;
+    --ui-form-border-color: #334155;
+    --ui-form-padding: 16px;
+    --ui-form-focus-ring: #93c5fd;
+    --ui-form-shadow:
+      0 2px 8px rgba(2, 6, 23, 0.24),
+      0 26px 52px rgba(2, 6, 23, 0.38);
+  }
+
+  :host([variant="minimal"]) {
+    --ui-form-bg: transparent;
+    --ui-form-border: 0;
+    --ui-form-shadow: none;
+    --ui-form-padding: 0;
+  }
+
+  :host([variant="elevated"]) {
+    --ui-form-bg: var(--ui-color-surface, #ffffff);
+    --ui-form-shadow:
+      0 2px 10px rgba(2, 6, 23, 0.1),
+      0 28px 56px rgba(2, 6, 23, 0.16);
+  }
+
+  :host([tone="success"]) {
+    --ui-form-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-form-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-form-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([density="compact"]) {
+    --ui-form-gap: 10px;
+    --ui-form-header-gap: 10px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-form-gap: 14px;
+    --ui-form-header-gap: 14px;
+  }
+
+  :host([shape="square"]) {
+    --ui-form-radius: 4px;
+  }
+
+  :host([shape="soft"]) {
+    --ui-form-radius: 22px;
+  }
+
+  :host([elevation="none"]) {
+    --ui-form-shadow: none;
+  }
+
+  :host([elevation="low"]) {
+    --ui-form-shadow:
+      0 1px 3px rgba(2, 6, 23, 0.05),
+      0 10px 20px rgba(2, 6, 23, 0.08);
+  }
+
+  :host([elevation="high"]) {
+    --ui-form-shadow:
+      0 3px 14px rgba(2, 6, 23, 0.12),
+      0 32px 64px rgba(2, 6, 23, 0.2);
+  }
+
+  :host([loading]) .form {
+    opacity: 0.82;
+    pointer-events: none;
+  }
+
+  :host([disabled]) .form {
+    opacity: 0.7;
+    pointer-events: none;
+  }
+
+  :host([dirty]) .form {
+    border-color: color-mix(in srgb, var(--ui-form-accent) 38%, var(--ui-form-border-color));
+  }
+
+  :host(:focus-within) .form {
+    border-color: color-mix(in srgb, var(--ui-form-focus-ring) 56%, var(--ui-form-border-color));
+    box-shadow:
+      0 0 0 2px color-mix(in srgb, var(--ui-form-focus-ring) 20%, transparent),
+      var(--ui-form-shadow);
+  }
+
+  :host([state="success"]) .form {
+    border-color: color-mix(in srgb, var(--ui-color-success, #16a34a) 44%, var(--ui-form-border-color));
+  }
+
+  :host([state="warning"]) .form {
+    border-color: color-mix(in srgb, var(--ui-color-warning, #d97706) 44%, var(--ui-form-border-color));
+  }
+
+  :host([state="error"]) .form {
+    border-color: color-mix(in srgb, var(--ui-color-danger, #dc2626) 44%, var(--ui-form-border-color));
+  }
+
+  :host([headless]) .form {
+    display: block;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    background: transparent;
+    padding: 0;
+    gap: 0;
+  }
+
+  :host([headless]) .header,
+  :host([headless]) .status,
+  :host([headless]) .footer {
+    display: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .form {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-form-border: 2px solid var(--ui-form-border-color);
+      --ui-form-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-form-bg: Canvas;
+      --ui-form-color: CanvasText;
+      --ui-form-muted: CanvasText;
+      --ui-form-border-color: CanvasText;
+      --ui-form-shadow: none;
+      --ui-form-status-bg: Canvas;
+      --ui-form-status-border: CanvasText;
+      --ui-form-status-text: CanvasText;
+    }
+
+    .form,
+    .status {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      box-shadow: none;
+      border-color: CanvasText;
+    }
+  }
+`;
+function m(o) {
+  return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function u(o) {
+  if (!o)
+    return !1;
+  const t = o.assignedNodes({ flatten: !0 });
+  return t.length ? t.some((e) => {
+    var i;
+    return e.nodeType === Node.TEXT_NODE ? !!((i = e.textContent) != null && i.trim()) : e.nodeType === Node.ELEMENT_NODE;
+  }) : !1;
+}
+function y(o) {
+  const t = o.tagName.toLowerCase();
+  return t === "input" || t === "textarea" || t === "select";
+}
+function h(o) {
+  if (o == null)
+    return o;
+  if (o instanceof Date)
+    return o.toISOString();
+  if (typeof File < "u" && o instanceof File)
+    return {
+      __file: !0,
+      name: o.name,
+      size: o.size,
+      type: o.type,
+      lastModified: o.lastModified
+    };
+  if (Array.isArray(o))
+    return o.map((t) => h(t));
+  if (typeof o == "object") {
+    const t = Object.entries(o).sort(([i], [r]) => i.localeCompare(r)), e = {};
+    return t.forEach(([i, r]) => {
+      e[i] = h(r);
+    }), e;
+  }
+  return o;
+}
+function c(o) {
+  if (Array.isArray(o))
+    return o.map((t) => c(t));
+  if (o && typeof o == "object") {
+    if (typeof File < "u" && o instanceof File)
+      return o;
+    if (o instanceof Date)
+      return new Date(o.getTime());
+    const t = {};
+    return Object.entries(o).forEach(([e, i]) => {
+      t[e] = c(i);
+    }), t;
+  }
+  return o;
+}
+function x(o) {
+  return o === "success" || o === "warning" || o === "error" ? o : "default";
+}
+class A extends p {
+  constructor() {
+    super(), this._controller = new g(), this._submitting = !1, this._autosaveTimer = null, this._readyFrame = null, this._dirtyFrame = null, this._initialSnapshot = "", this._cleanValues = {}, this._baselineReady = !1, this._dirty = !1, this._dirtyAttrSyncing = !1, this._uid = Math.random().toString(36).slice(2, 10), this._formEl = null, this._headerEl = null, this._headingEl = null, this._titleEl = null, this._descriptionEl = null, this._titleTextEl = null, this._descriptionTextEl = null, this._actionsEl = null, this._statusEl = null, this._statusTextEl = null, this._footerEl = null, this._titleSlot = null, this._headingSlot = null, this._descriptionSlot = null, this._actionsSlot = null, this._statusSlot = null, this._footerSlot = null, this._descriptionVisible = !1, this._statusVisible = !1, this._onNativeSubmit = this._onNativeSubmit.bind(this), this._onValueEvent = this._onValueEvent.bind(this), this._onBeforeUnload = this._onBeforeUnload.bind(this), this._onSlotChange = this._onSlotChange.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "novalidate",
+      "variant",
+      "tone",
+      "density",
+      "shape",
+      "elevation",
+      "gap",
+      "headless",
+      "loading",
+      "autosave",
+      "autosave-delay",
+      "guard-unsaved",
+      "dirty",
+      "disabled",
+      "heading",
+      "title",
+      "description",
+      "state",
+      "state-text",
+      "loading-text",
+      "aria-label",
+      "aria-labelledby"
+    ];
+  }
+  connectedCallback() {
+    if (super.connectedCallback(), this.hasAttribute("title") && !this.hasAttribute("heading")) {
+      const t = this.getAttribute("title");
+      t != null && this.setAttribute("heading", t), this.removeAttribute("title");
+    }
+    this.root.addEventListener("submit", this._onNativeSubmit), this.root.addEventListener("slotchange", this._onSlotChange), this.addEventListener("input", this._onValueEvent), this.addEventListener("change", this._onValueEvent), this.hasAttribute("guard-unsaved") && typeof window < "u" && window.addEventListener("beforeunload", this._onBeforeUnload), queueMicrotask(() => {
+      !this.isConnected || this._baselineReady || this._setBaseline(this.getValues(), !1);
+    }), this.hasAttribute("data-ui-ready") || (typeof requestAnimationFrame == "function" ? this._readyFrame = requestAnimationFrame(() => {
+      this._readyFrame = null, this.setAttribute("data-ui-ready", "");
+    }) : this._readyFrame = window.setTimeout(() => {
+      this._readyFrame = null, this.setAttribute("data-ui-ready", "");
+    }, 16));
+  }
+  disconnectedCallback() {
+    this.root.removeEventListener("submit", this._onNativeSubmit), this.root.removeEventListener("slotchange", this._onSlotChange), this.removeEventListener("input", this._onValueEvent), this.removeEventListener("change", this._onValueEvent), this._readyFrame != null && (typeof cancelAnimationFrame == "function" && cancelAnimationFrame(this._readyFrame), clearTimeout(this._readyFrame), this._readyFrame = null), this._autosaveTimer && (clearTimeout(this._autosaveTimer), this._autosaveTimer = null), this._dirtyFrame != null && (typeof cancelAnimationFrame == "function" && cancelAnimationFrame(this._dirtyFrame), clearTimeout(this._dirtyFrame), this._dirtyFrame = null), typeof window < "u" && window.removeEventListener("beforeunload", this._onBeforeUnload), super.disconnectedCallback();
+  }
+  _onNativeSubmit(t) {
+    const e = t.target;
+    e != null && e.classList.contains("form") && (t.preventDefault(), t.stopPropagation(), !this.hasAttribute("disabled") && this.submit());
+  }
+  registerField(t, e) {
+    return this._controller.registerField(t, e);
+  }
+  setValue(t, e) {
+    this._controller.setValue(t, e), this._setNativeValue(t, e, this._groupNativeControls({ includeDisabled: !0 })), this._scheduleDirtyRefresh();
+  }
+  setValues(t) {
+    if (!t || typeof t != "object")
+      return;
+    const e = this._groupNativeControls({ includeDisabled: !0 });
+    Object.entries(t).forEach(([i, r]) => {
+      this._controller.setValue(i, r), this._setNativeValue(i, r, e);
+    }), this._scheduleDirtyRefresh();
+  }
+  getValues() {
+    const t = { ...this._controller.getValues() }, e = new Set(Object.keys(t)), i = this._collectNativeValues(e, this._groupNativeControls());
+    return Object.assign(t, i), t;
+  }
+  _queryNativeControls(t = {}) {
+    const { includeDisabled: e = !1 } = t;
+    return Array.from(this.querySelectorAll("input[name],textarea[name],select[name]")).filter((r) => !(!y(r) || r.closest("ui-form") !== this || !e && r.matches(":disabled")));
+  }
+  _groupNativeControls(t = {}) {
+    const e = /* @__PURE__ */ new Map();
+    return this._queryNativeControls(t).forEach((i) => {
+      const r = i.getAttribute("name") || "";
+      if (!r)
+        return;
+      const s = e.get(r) || [];
+      s.push(i), e.set(r, s);
+    }), e;
+  }
+  _collectNativeValues(t, e) {
+    const i = {};
+    return e.forEach((r, s) => {
+      if (t.has(s))
+        return;
+      const n = r[0];
+      if (n) {
+        if (n instanceof HTMLInputElement && n.type === "radio") {
+          const a = r.find((l) => l instanceof HTMLInputElement && l.checked);
+          i[s] = a ? a.value : "";
+          return;
+        }
+        if (n instanceof HTMLInputElement && n.type === "checkbox") {
+          if (r.length === 1) {
+            i[s] = n.checked;
+            return;
+          }
+          i[s] = r.filter((a) => a instanceof HTMLInputElement && a.checked).map((a) => a.value || "on");
+          return;
+        }
+        if (n instanceof HTMLSelectElement && n.multiple) {
+          i[s] = Array.from(n.selectedOptions).map((a) => a.value);
+          return;
+        }
+        if (n instanceof HTMLInputElement && n.type === "file") {
+          i[s] = Array.from(n.files || []);
+          return;
+        }
+        i[s] = n.value;
+      }
+    }), i;
+  }
+  _setNativeValue(t, e, i) {
+    const r = (i || this._groupNativeControls({ includeDisabled: !0 })).get(t) || [];
+    if (!r.length)
+      return;
+    const s = r[0];
+    if (s) {
+      if (s instanceof HTMLInputElement && s.type === "radio") {
+        const n = String(e ?? "");
+        r.forEach((a) => {
+          a instanceof HTMLInputElement && (a.checked = a.value === n);
+        });
+        return;
+      }
+      if (s instanceof HTMLInputElement && s.type === "checkbox") {
+        if (r.length === 1) {
+          const a = typeof e == "boolean" ? e : !!e;
+          s.checked = a;
+          return;
+        }
+        const n = Array.isArray(e) ? e.map((a) => String(a)) : [];
+        r.forEach((a) => {
+          a instanceof HTMLInputElement && (a.checked = n.includes(a.value || "on"));
+        });
+        return;
+      }
+      if (s instanceof HTMLSelectElement && s.multiple) {
+        const n = Array.isArray(e) ? e.map((a) => String(a)) : [];
+        Array.from(s.options).forEach((a) => {
+          a.selected = n.includes(a.value);
+        });
+        return;
+      }
+      s instanceof HTMLInputElement && s.type === "file" || (s.value = String(e ?? ""));
+    }
+  }
+  async validate() {
+    const t = await this._controller.validateAll(), e = this._validateNativeControls(), i = {
+      valid: t.valid && e.valid,
+      errors: { ...e.errors, ...t.errors }
+    };
+    return this.dispatchEvent(
+      new CustomEvent("validate", {
+        bubbles: !0,
+        composed: !0,
+        detail: i
+      })
+    ), i;
+  }
+  _validateNativeControls() {
+    const t = {};
+    let e = null, i = !0;
+    return this._groupNativeControls().forEach((s, n) => {
+      for (const a of s)
+        if (!(!a.willValidate || a.checkValidity())) {
+          i = !1, t[n] || (t[n] = a.validationMessage || "invalid"), e || (e = a);
+          break;
+        }
+    }), { valid: i, errors: t, firstInvalid: e };
+  }
+  async submit() {
+    if (this._submitting || this.hasAttribute("loading") || this.hasAttribute("disabled"))
+      return !1;
+    this._submitting = !0;
+    const t = this.hasAttribute("loading");
+    t || this.setAttribute("loading", "");
+    try {
+      const e = this.getValues();
+      if (!this.hasAttribute("novalidate")) {
+        const r = await this._controller.validateAll(), s = this._validateNativeControls(), n = { ...s.errors, ...r.errors }, a = r.valid && s.valid;
+        if (this.dispatchEvent(
+          new CustomEvent("validate", {
+            bubbles: !0,
+            composed: !0,
+            detail: { valid: a, errors: n }
+          })
+        ), !a)
+          return this.dispatchEvent(
+            new CustomEvent("invalid", {
+              bubbles: !0,
+              composed: !0,
+              detail: { errors: n, values: e }
+            })
+          ), this._focusFirstInvalid(s.firstInvalid, n), !1;
+      }
+      return this.dispatchEvent(
+        new CustomEvent("submit", {
+          bubbles: !0,
+          composed: !0,
+          detail: { values: e }
+        })
+      ), this.markClean(e), !0;
+    } finally {
+      this._submitting = !1, t || this.removeAttribute("loading");
+    }
+  }
+  _focusFirstInvalid(t, e) {
+    var n;
+    if (t) {
+      t.focus();
+      return;
+    }
+    const i = (n = Object.entries(e).find(([, a]) => !!a)) == null ? void 0 : n[0];
+    if (!i)
+      return;
+    const r = i.replace(/"/g, '\\"'), s = this.querySelector(`[name="${r}"]`);
+    !s || typeof s.focus != "function" || s.focus();
+  }
+  async requestSubmit() {
+    return this.submit();
+  }
+  reset(t) {
+    if (t && typeof t == "object") {
+      this.setValues(t), this.markClean(t);
+      return;
+    }
+    this.setValues(this._cleanValues), this.markClean(this._cleanValues);
+  }
+  get dirty() {
+    return this._dirty;
+  }
+  isDirty() {
+    return this._dirty;
+  }
+  markClean(t) {
+    if (t && typeof t == "object") {
+      this._setBaseline(t);
+      return;
+    }
+    this._setBaseline(this.getValues());
+  }
+  _setBaseline(t, e = !0) {
+    this._cleanValues = c(t || {}), this._initialSnapshot = this._snapshot(this._cleanValues), this._baselineReady = !0, this._setDirty(!1, e);
+  }
+  _snapshot(t) {
+    const e = t && typeof t == "object" ? t : this.getValues();
+    try {
+      return JSON.stringify(h(e || {}));
+    } catch {
+      return "";
+    }
+  }
+  _setDirty(t, e = !0) {
+    this._dirty !== t && (this._dirty = t, this._dirtyAttrSyncing = !0, t ? this.setAttribute("dirty", "") : this.hasAttribute("dirty") && this.removeAttribute("dirty"), this._dirtyAttrSyncing = !1, this._syncStatus(), this._syncFormAttrs(), e && this.dispatchEvent(
+      new CustomEvent("dirty-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { dirty: t, values: this.getValues() }
+      })
+    ));
+  }
+  _scheduleDirtyRefresh() {
+    if (this._dirtyFrame != null)
+      return;
+    const t = typeof window < "u" ? window.setTimeout.bind(window) : setTimeout;
+    this._dirtyFrame = t(() => {
+      this._dirtyFrame = null, this._refreshDirtyState();
+    }, 0);
+  }
+  _refreshDirtyState() {
+    if (!this._baselineReady)
+      return;
+    const t = this._snapshot() !== this._initialSnapshot;
+    if (this._setDirty(t), !this.hasAttribute("autosave"))
+      return;
+    if (!t || this.hasAttribute("loading")) {
+      this._autosaveTimer && (clearTimeout(this._autosaveTimer), this._autosaveTimer = null);
+      return;
+    }
+    const e = Number(this.getAttribute("autosave-delay") || 800), i = Number.isFinite(e) && e >= 0 ? e : 800;
+    this._autosaveTimer && clearTimeout(this._autosaveTimer), this._autosaveTimer = setTimeout(() => {
+      this._autosaveTimer = null, this._dirty && this.dispatchEvent(
+        new CustomEvent("autosave", {
+          bubbles: !0,
+          composed: !0,
+          detail: { values: this.getValues(), dirty: this._dirty }
+        })
+      );
+    }, i);
+  }
+  _onValueEvent(t) {
+    const e = t.target;
+    if (!e || e === this)
+      return;
+    const i = e.closest("ui-form");
+    i && i !== this || this._scheduleDirtyRefresh();
+  }
+  _onBeforeUnload(t) {
+    !this.hasAttribute("guard-unsaved") || !this._dirty || (t.preventDefault(), t.returnValue = "");
+  }
+  _onSlotChange() {
+    this._syncStructure(), this._syncStatus(), this._syncFormAttrs(), this._scheduleDirtyRefresh();
+  }
+  _syncGap() {
+    const t = this.getAttribute("gap");
+    t ? this.style.setProperty("--ui-form-gap", t) : this.style.removeProperty("--ui-form-gap");
+  }
+  _syncFormAttrs() {
+    const t = this._formEl;
+    if (!t)
+      return;
+    t.setAttribute("aria-busy", this.hasAttribute("loading") ? "true" : "false");
+    const e = this.hasAttribute("disabled");
+    t.setAttribute("aria-disabled", e ? "true" : "false"), e ? t.setAttribute("inert", "") : t.removeAttribute("inert"), this.hasAttribute("novalidate") ? t.setAttribute("novalidate", "") : t.removeAttribute("novalidate");
+    const i = this.getAttribute("aria-label"), r = this.getAttribute("aria-labelledby");
+    i ? t.setAttribute("aria-label", i) : t.removeAttribute("aria-label"), r ? t.setAttribute("aria-labelledby", r) : t.removeAttribute("aria-labelledby");
+    const s = [];
+    this._descriptionVisible && s.push(`${this._uid}-description`), this._statusVisible && s.push(`${this._uid}-status`), s.length ? t.setAttribute("aria-describedby", s.join(" ")) : t.removeAttribute("aria-describedby");
+  }
+  _syncStructure() {
+    const t = (this.getAttribute("heading") || this.getAttribute("title") || "").trim(), e = (this.getAttribute("description") || "").trim(), i = u(this._headingSlot), r = u(this._titleSlot), s = u(this._descriptionSlot), n = u(this._actionsSlot), a = u(this._footerSlot), l = !!t || i || r, d = !!e || s, f = l || d, b = f || n;
+    this._titleTextEl && (this._titleTextEl.textContent = t, !t || i || r ? this._titleTextEl.setAttribute("hidden", "") : this._titleTextEl.removeAttribute("hidden")), this._descriptionTextEl && (this._descriptionTextEl.textContent = e, !e || s ? this._descriptionTextEl.setAttribute("hidden", "") : this._descriptionTextEl.removeAttribute("hidden")), this._titleEl && (l ? this._titleEl.removeAttribute("hidden") : this._titleEl.setAttribute("hidden", "")), this._descriptionEl && (d ? this._descriptionEl.removeAttribute("hidden") : this._descriptionEl.setAttribute("hidden", "")), this._headingEl && (f ? this._headingEl.removeAttribute("hidden") : this._headingEl.setAttribute("hidden", "")), this._actionsEl && (n ? this._actionsEl.removeAttribute("hidden") : this._actionsEl.setAttribute("hidden", "")), this._headerEl && (b ? this._headerEl.removeAttribute("hidden") : this._headerEl.setAttribute("hidden", "")), this._footerEl && (a ? this._footerEl.removeAttribute("hidden") : this._footerEl.setAttribute("hidden", "")), this._descriptionVisible = d;
+  }
+  _deriveStatusTextAndTone() {
+    const t = this.hasAttribute("loading"), e = x(this.getAttribute("state")), i = (this.getAttribute("state-text") || "").trim(), r = (this.getAttribute("loading-text") || "").trim() || "Saving changes...";
+    return t ? { text: r, tone: "loading" } : i ? { text: i, tone: e } : e === "success" ? { text: "Saved", tone: "success" } : e === "warning" ? { text: "Needs attention", tone: "warning" } : e === "error" ? { text: "Validation errors present", tone: "error" } : this._dirty ? { text: "Unsaved changes", tone: "warning" } : { text: "", tone: "default" };
+  }
+  _syncStatus() {
+    if (!this._statusEl || !this._statusTextEl)
+      return;
+    const t = u(this._statusSlot), e = this._deriveStatusTextAndTone();
+    t ? this._statusTextEl.setAttribute("hidden", "") : (this._statusTextEl.textContent = e.text, e.text ? this._statusTextEl.removeAttribute("hidden") : this._statusTextEl.setAttribute("hidden", ""));
+    const i = t || !!e.text;
+    i ? this._statusEl.removeAttribute("hidden") : this._statusEl.setAttribute("hidden", ""), this._statusEl.setAttribute("data-tone", e.tone), this._statusVisible = i;
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i) {
+      if (t === "title") {
+        i != null && !this.hasAttribute("heading") && this.setAttribute("heading", i), this.hasAttribute("title") && this.removeAttribute("title");
+        return;
+      }
+      if (_.has(t)) {
+        this._syncStructure(), this._syncStatus(), this._syncFormAttrs();
+        return;
+      }
+      if (t === "gap") {
+        this._syncGap();
+        return;
+      }
+      if (t === "dirty") {
+        if (!this._dirtyAttrSyncing) {
+          const r = this.hasAttribute("dirty");
+          this._dirty = r, this._syncStatus(), this._syncFormAttrs();
+        }
+        return;
+      }
+      if (t === "loading" || t === "novalidate" || t === "state" || t === "state-text" || t === "loading-text" || t === "disabled") {
+        this._syncStatus(), this._syncFormAttrs();
+        return;
+      }
+      if (t === "guard-unsaved") {
+        if (typeof window > "u")
+          return;
+        this.hasAttribute("guard-unsaved") ? window.addEventListener("beforeunload", this._onBeforeUnload) : window.removeEventListener("beforeunload", this._onBeforeUnload);
+        return;
+      }
+      (t === "aria-label" || t === "aria-labelledby") && this._syncFormAttrs();
+    }
+  }
+  render() {
+    this._syncGap();
+    const t = this.getAttribute("heading") || this.getAttribute("title") || "", e = this.getAttribute("description") || "";
+    this.setContent(`
+      <style>${v}</style>
+      <form
+        class="form"
+        part="form"
+        aria-busy="${this.hasAttribute("loading") ? "true" : "false"}"
+        ${this.hasAttribute("novalidate") ? "novalidate" : ""}
+      >
+        <header class="header" part="header">
+          <div class="heading" part="heading">
+            <h2 class="title" id="${this._uid}-title" part="title">
+              <slot name="heading"></slot>
+              <slot name="title"></slot>
+              <span class="title-text">${m(t)}</span>
+            </h2>
+            <p class="description" id="${this._uid}-description" part="description">
+              <slot name="description"></slot>
+              <span class="description-text">${m(e)}</span>
+            </p>
+          </div>
+          <div class="actions" part="actions"><slot name="actions"></slot></div>
+        </header>
+
+        <div class="body" part="body"><slot></slot></div>
+
+        <div class="status" id="${this._uid}-status" part="status" role="status" aria-live="polite">
+          <span class="status-text"></span>
+          <slot name="status"></slot>
+        </div>
+
+        <footer class="footer" part="footer"><slot name="footer"></slot></footer>
+      </form>
+    `), this._formEl = this.root.querySelector(".form"), this._headerEl = this.root.querySelector(".header"), this._headingEl = this.root.querySelector(".heading"), this._titleEl = this.root.querySelector(".title"), this._descriptionEl = this.root.querySelector(".description"), this._titleTextEl = this.root.querySelector(".title-text"), this._descriptionTextEl = this.root.querySelector(".description-text"), this._actionsEl = this.root.querySelector(".actions"), this._statusEl = this.root.querySelector(".status"), this._statusTextEl = this.root.querySelector(".status-text"), this._footerEl = this.root.querySelector(".footer"), this._headingSlot = this.root.querySelector('slot[name="heading"]'), this._titleSlot = this.root.querySelector('slot[name="title"]'), this._descriptionSlot = this.root.querySelector('slot[name="description"]'), this._actionsSlot = this.root.querySelector('slot[name="actions"]'), this._statusSlot = this.root.querySelector('slot[name="status"]'), this._footerSlot = this.root.querySelector('slot[name="footer"]'), this._syncStructure(), this._syncStatus(), this._syncFormAttrs();
+  }
+  shouldRenderOnAttributeChange(t, e, i) {
+    return !1;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-form") && customElements.define("ui-form", A);
+export {
+  A as UIForm
+};