@editora/ui-core 0.1.9 → 0.1.10

package/dist/focus-scope.esm.js

@@ -0,0 +1,97 @@
+import { E as r } from "./ElementBase-909688f3.mjs";
+import { c as n } from "./focus-scope-103833ee.mjs";
+const c = `
+  :host {
+    display: contents;
+    color-scheme: light dark;
+  }
+`;
+function u(e) {
+  return e === "selected" || e === "container" || e === "none" ? e : "first";
+}
+function o(e) {
+  if (e == null)
+    return !1;
+  const t = e.toLowerCase();
+  return t !== "false" && t !== "0" && t !== "off";
+}
+class a extends r {
+  constructor() {
+    super(...arguments), this._scope = null, this._onKeyDown = (t) => {
+      if (t.key !== "Escape" || !this.hasAttribute("active"))
+        return;
+      const s = document.activeElement;
+      s && !this.contains(s) || this.dispatchEvent(
+        new CustomEvent("escape", {
+          detail: { originalEvent: t },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    };
+  }
+  static get observedAttributes() {
+    return ["active", "trapped", "loop", "restore-focus", "auto-focus", "inert-others", "headless"];
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("keydown", this._onKeyDown, !0), this._syncScope();
+  }
+  disconnectedCallback() {
+    document.removeEventListener("keydown", this._onKeyDown, !0), this._destroyScope(), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, s, i) {
+    s !== i && this._syncScope();
+  }
+  get initialFocus() {
+    return this.querySelector("[data-ui-initial-focus], [autofocus]");
+  }
+  get finalFocus() {
+    return this.querySelector("[data-ui-final-focus]");
+  }
+  activate() {
+    this.setAttribute("active", "");
+  }
+  deactivate() {
+    this.removeAttribute("active");
+  }
+  focusFirst() {
+    var t;
+    (t = this._scope) == null || t.focusFirst();
+  }
+  focusInitial() {
+    var t;
+    (t = this._scope) == null || t.focusInitial();
+  }
+  _destroyScope() {
+    var t;
+    (t = this._scope) == null || t.destroy(), this._scope = null;
+  }
+  _syncScope() {
+    if (this.isConnected) {
+      if (this.hasAttribute("headless") || !this.hasAttribute("active")) {
+        this._destroyScope();
+        return;
+      }
+      this._destroyScope(), this._scope = n({
+        node: this,
+        trapped: !this.hasAttribute("trapped") || o(this.getAttribute("trapped")),
+        loop: !this.hasAttribute("loop") || o(this.getAttribute("loop")),
+        restoreFocus: !this.hasAttribute("restore-focus") || o(this.getAttribute("restore-focus")),
+        autoFocus: u(this.getAttribute("auto-focus")),
+        initialFocus: this.initialFocus,
+        finalFocus: this.finalFocus,
+        inertOthers: o(this.getAttribute("inert-others"))
+      }), this.dispatchEvent(new CustomEvent("focus-scope-mount", { bubbles: !0, composed: !0 }));
+    }
+  }
+  render() {
+    this.setContent(`<style>${c}</style><slot></slot>`);
+  }
+  shouldRenderOnAttributeChange() {
+    return !1;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-focus-scope") && customElements.define("ui-focus-scope", a);
+export {
+  a as UIFocusScope
+};

package/dist/form.cjs.js

@@ -0,0 +1,377 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("./ElementBase-1b301e7f.js");class _{constructor(){this.fields=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 v=new Set(["heading","title","description","state-text","loading-text"]),y=`
+  :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 x(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 A(o){return o==="success"||o==="warning"||o==="error"?o:"default"}class b extends g.ElementBase{constructor(){super(),this._controller=new _,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=>!(!x(r)||r.closest("ui-form")!==this||!e&&r.matches(":disabled")))}_groupNativeControls(t={}){const e=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,p=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&&(p?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=A(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(v.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>${y}</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",b);exports.UIForm=b;