@editora/ui-core 0.1.9 → 0.1.12

package/dist/dialog.esm.js

@@ -0,0 +1,822 @@
+import { E as q } from "./ElementBase-909688f3.mjs";
+import { a as T, r as I } from "./scroll-lock-9de6d328.mjs";
+import { c as z } from "./dismissable-layer-9c7e6b58.mjs";
+import { c as B } from "./focus-scope-103833ee.mjs";
+const M = `
+  :host {
+    position: fixed;
+    inset: 0;
+    display: block;
+    z-index: var(--ui-dialog-backdrop-z);
+    pointer-events: none;
+    isolation: isolate;
+    color-scheme: light dark;
+    --ui-dialog-backdrop: color-mix(in srgb, #020617 58%, transparent);
+    --ui-dialog-bg: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent) 0%,
+      color-mix(in srgb, var(--ui-color-surface-elevated, #f8fafc) 24%, var(--ui-color-surface, #ffffff)) 100%
+    );
+    --ui-dialog-color: var(--ui-color-text, #0f172a);
+    --ui-dialog-muted: var(--ui-color-muted, #64748b);
+    --ui-dialog-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
+    --ui-dialog-border: 1px solid var(--ui-dialog-border-color);
+    --ui-dialog-shadow: none;
+    --ui-dialog-radius: 16px;
+    --ui-dialog-padding-x: 24px;
+    --ui-dialog-padding-y: 20px;
+    --ui-dialog-width: min(560px, calc(100vw - 24px));
+    --ui-dialog-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-dialog-danger: var(--ui-color-danger, #dc2626);
+    --ui-dialog-success: var(--ui-color-success, #16a34a);
+    --ui-dialog-z: 1201;
+    --ui-dialog-backdrop-z: 1200;
+    --ui-dialog-btn-bg: color-mix(in srgb, var(--ui-color-surface-elevated, #f8fafc) 88%, transparent);
+    --ui-dialog-btn-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-dialog-btn-hover: color-mix(in srgb, var(--ui-color-surface-elevated, #f8fafc) 78%, var(--ui-color-border, #cbd5e1) 22%);
+    --ui-dialog-submit-bg: var(--ui-color-primary, #2563eb);
+    --ui-dialog-submit-color: var(--ui-color-primary-contrast, #ffffff);
+    --ui-dialog-duration: 170ms;
+    --ui-dialog-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  :host([size='sm']),
+  :host([size='1']) {
+    --ui-dialog-width: min(420px, calc(100vw - 24px));
+    --ui-dialog-padding-x: 20px;
+    --ui-dialog-padding-y: 16px;
+  }
+
+  :host([size='lg']),
+  :host([size='3']) {
+    --ui-dialog-width: min(760px, calc(100vw - 24px));
+    --ui-dialog-padding-x: 28px;
+    --ui-dialog-padding-y: 24px;
+  }
+
+  :host([shape='flat']) {
+    --ui-dialog-radius: 8px;
+    --ui-dialog-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 12px 24px rgba(2, 6, 23, 0.14);
+  }
+
+  .overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--ui-dialog-backdrop-z);
+    display: grid;
+    place-items: center;
+    padding: clamp(12px, 3vw, 28px);
+    box-sizing: border-box;
+    pointer-events: auto;
+    background: var(--ui-dialog-backdrop);
+    backdrop-filter: saturate(1.05) blur(4px);
+    opacity: 0;
+    transition: opacity var(--ui-dialog-duration) var(--ui-dialog-easing);
+  }
+
+  .overlay[data-open='true'] {
+    opacity: 1;
+  }
+
+  .panel {
+    position: relative;
+    z-index: var(--ui-dialog-z);
+    width: var(--ui-dialog-width);
+    max-height: min(86vh, 760px);
+    overflow: auto;
+    box-sizing: border-box;
+    border-radius: var(--ui-dialog-radius);
+    border: var(--ui-dialog-border);
+    background: var(--ui-dialog-bg);
+    color: var(--ui-dialog-color);
+    box-shadow: var(--ui-dialog-shadow);
+    padding: var(--ui-dialog-padding-y) var(--ui-dialog-padding-x);
+    transform: translateY(12px) scale(0.985);
+    opacity: 0;
+    transition:
+      transform var(--ui-dialog-duration) var(--ui-dialog-easing),
+      opacity var(--ui-dialog-duration) var(--ui-dialog-easing),
+      border-color var(--ui-dialog-duration) var(--ui-dialog-easing),
+      box-shadow var(--ui-dialog-duration) var(--ui-dialog-easing);
+  }
+
+  .overlay[data-open='true'] .panel {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+
+  :host([state='error']) .panel {
+    border-color: color-mix(in srgb, var(--ui-dialog-danger) 42%, var(--ui-dialog-border-color));
+  }
+
+  :host([state='success']) .panel {
+    border-color: color-mix(in srgb, var(--ui-dialog-success) 46%, var(--ui-dialog-border-color));
+  }
+
+  .panel:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-dialog-focus) 62%, transparent);
+    outline-offset: 1px;
+  }
+
+  .header {
+    display: grid;
+    gap: 8px;
+    margin-bottom: 16px;
+    padding-inline-end: 44px;
+    min-width: 0;
+  }
+
+  .title {
+    margin: 0;
+    font-size: 20px;
+    line-height: 1.35;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    color: color-mix(in srgb, var(--ui-dialog-color) 96%, transparent);
+  }
+
+  .description {
+    margin: 0;
+    color: var(--ui-dialog-muted);
+    font-size: 14px;
+    line-height: 1.55;
+  }
+
+  .close {
+    position: absolute;
+    top: 14px;
+    inset-inline-end: 14px;
+    width: 32px;
+    height: 32px;
+    border: 1px solid color-mix(in srgb, var(--ui-dialog-btn-border) 88%, transparent);
+    border-radius: 10px;
+    background: color-mix(in srgb, var(--ui-dialog-btn-bg) 92%, transparent);
+    color: inherit;
+    cursor: pointer;
+    display: inline-grid;
+    place-items: center;
+    line-height: 1;
+    transition:
+      background var(--ui-dialog-duration) var(--ui-dialog-easing),
+      border-color var(--ui-dialog-duration) var(--ui-dialog-easing),
+      transform 120ms ease;
+  }
+
+  .close:hover {
+    background: var(--ui-dialog-btn-hover);
+    border-color: color-mix(in srgb, var(--ui-dialog-btn-border) 72%, var(--ui-dialog-focus) 28%);
+  }
+
+  .close:active {
+    transform: translateY(1px);
+  }
+
+  .close-icon {
+    width: 16px;
+    height: 16px;
+    pointer-events: none;
+  }
+
+  .close:focus-visible,
+  .btn:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-dialog-focus) 64%, transparent);
+    outline-offset: 1px;
+  }
+
+  .body {
+    display: grid;
+    gap: 12px;
+    min-width: 0;
+  }
+
+  .footer {
+    margin-top: 20px;
+    padding-top: 16px;
+    border-top: 1px solid color-mix(in srgb, var(--ui-dialog-border-color) 82%, transparent);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .btn {
+    border: 1px solid var(--ui-dialog-btn-border);
+    background: var(--ui-dialog-btn-bg);
+    color: inherit;
+    border-radius: 10px;
+    min-height: 38px;
+    min-width: 88px;
+    padding: 0 14px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition:
+      background 120ms ease,
+      border-color 120ms ease,
+      color 120ms ease,
+      transform 120ms ease;
+  }
+
+  .btn:hover {
+    background: var(--ui-dialog-btn-hover);
+  }
+
+  .btn:active {
+    transform: translateY(1px);
+  }
+
+  .btn-submit {
+    border-color: color-mix(in srgb, var(--ui-dialog-submit-bg) 64%, var(--ui-dialog-btn-border));
+    background: var(--ui-dialog-submit-bg);
+    color: var(--ui-dialog-submit-color);
+    box-shadow: 0 1px 2px color-mix(in srgb, var(--ui-dialog-submit-bg) 44%, transparent);
+  }
+
+  .btn-submit:hover {
+    background: color-mix(in srgb, var(--ui-dialog-submit-bg) 88%, #000000 12%);
+  }
+
+  .btn:disabled,
+  .close:disabled {
+    cursor: not-allowed;
+    opacity: 0.56;
+    transform: none;
+  }
+
+  .loading {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    color: color-mix(in srgb, var(--ui-dialog-color) 76%, transparent);
+    margin-inline-end: auto;
+    min-height: 20px;
+  }
+
+  .spinner {
+    width: 14px;
+    height: 14px;
+    border-radius: 999px;
+    border: 2px solid color-mix(in srgb, var(--ui-dialog-color) 30%, transparent);
+    border-top-color: color-mix(in srgb, var(--ui-dialog-color) 80%, transparent);
+    animation: ui-dialog-spin 720ms linear infinite;
+  }
+
+  .error {
+    min-height: 20px;
+    margin-top: 12px;
+    font-size: 12px;
+    line-height: 1.45;
+    color: var(--ui-dialog-danger);
+  }
+
+  .error[data-empty='true'] {
+    visibility: hidden;
+  }
+
+  :host([state='loading']) .btn,
+  :host([state='loading']) .close {
+    opacity: 0.72;
+  }
+
+  :host([headless]) .overlay,
+  :host([headless]) .panel {
+    display: none !important;
+  }
+
+  @media (max-width: 640px) {
+    .overlay {
+      align-items: end;
+      padding: 12px;
+    }
+
+    .panel {
+      width: min(100%, var(--ui-dialog-width));
+      max-height: min(88vh, 760px);
+      border-radius: 14px;
+      padding: 16px;
+    }
+
+    .header {
+      margin-bottom: 14px;
+      padding-inline-end: 40px;
+    }
+
+    .title {
+      font-size: 18px;
+    }
+
+    .footer {
+      margin-top: 16px;
+      padding-top: 12px;
+    }
+
+    .btn {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+  }
+
+  @keyframes ui-dialog-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .overlay,
+    .panel,
+    .btn,
+    .spinner {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .panel {
+      border-width: 2px;
+      box-shadow: none;
+    }
+
+    .btn {
+      border-width: 2px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-dialog-backdrop: rgba(0, 0, 0, 0.72);
+      --ui-dialog-bg: Canvas;
+      --ui-dialog-color: CanvasText;
+      --ui-dialog-border-color: CanvasText;
+      --ui-dialog-border: 1px solid CanvasText;
+      --ui-dialog-shadow: none;
+      --ui-dialog-muted: CanvasText;
+      --ui-dialog-focus: Highlight;
+      --ui-dialog-btn-bg: ButtonFace;
+      --ui-dialog-btn-border: ButtonText;
+      --ui-dialog-btn-hover: ButtonFace;
+      --ui-dialog-submit-bg: Highlight;
+      --ui-dialog-submit-color: HighlightText;
+      --ui-dialog-danger: Mark;
+    }
+
+    .panel,
+    .close,
+    .btn {
+      forced-color-adjust: none;
+      box-shadow: none;
+    }
+  }
+`, R = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function b(u, t) {
+  if (u == null)
+    return t;
+  const i = u.trim().toLowerCase();
+  return i !== "false" && i !== "0" && i !== "off";
+}
+function a(u) {
+  return u.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function w() {
+  return typeof window < "u" && typeof document < "u";
+}
+const E = class n extends q {
+  constructor() {
+    super(), this._isActive = !1, this._uid = Math.random().toString(36).slice(2, 10), this._dialogId = this._uid, this._lastFocused = null, this._terminalEmitted = !1, this._closeMeta = null, this._runtimeError = "", this._config = {}, this._dismissableLayer = null, this._focusScope = null, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onSubmit = this._onSubmit.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "open",
+      "headless",
+      "title",
+      "description",
+      "closable",
+      "dismissible",
+      "close-on-overlay",
+      "close-on-backdrop",
+      "close-on-esc",
+      "lock-while-loading",
+      "size",
+      "state",
+      "role",
+      "initial-focus",
+      "submit-text",
+      "cancel-text",
+      "loading-text",
+      "error-message",
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.root.addEventListener("click", this._onClick), this.root.addEventListener("keydown", this._onKeyDown), this.addEventListener("submit", this._onSubmit), this._syncFromAttributes(), this._syncOpenState();
+  }
+  disconnectedCallback() {
+    this.root.removeEventListener("click", this._onClick), this.root.removeEventListener("keydown", this._onKeyDown), this.removeEventListener("submit", this._onSubmit), this._isActive && !this._terminalEmitted && this.close("dismiss", "unmount"), this._destroyRuntimeControllers(), this._deactivate(), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, i, e) {
+    if (i !== e) {
+      if (t === "open") {
+        this._syncOpenState();
+        return;
+      }
+      t === "state" && e !== "error" && (this._runtimeError = ""), this._syncFromAttributes(), this.isConnected && this.requestRender();
+    }
+  }
+  get open() {
+    return this.hasAttribute("open");
+  }
+  set open(t) {
+    t ? this.setAttribute("open", "") : this.close("dismiss", "programmatic");
+  }
+  get dismissible() {
+    return b(this.getAttribute("dismissible") ?? this.getAttribute("closable"), !0);
+  }
+  set dismissible(t) {
+    this.setAttribute("dismissible", String(t)), this.setAttribute("closable", String(t));
+  }
+  get closeOnOverlay() {
+    return b(this.getAttribute("close-on-overlay") ?? this.getAttribute("close-on-backdrop"), !0);
+  }
+  set closeOnOverlay(t) {
+    this.setAttribute("close-on-overlay", String(t)), this.setAttribute("close-on-backdrop", String(t));
+  }
+  get closeOnEsc() {
+    return b(this.getAttribute("close-on-esc"), !0);
+  }
+  set closeOnEsc(t) {
+    this.setAttribute("close-on-esc", String(t));
+  }
+  get lockWhileLoading() {
+    return b(this.getAttribute("lock-while-loading"), !0);
+  }
+  set lockWhileLoading(t) {
+    this.setAttribute("lock-while-loading", String(t));
+  }
+  get state() {
+    const t = this.getAttribute("state");
+    return t === "loading" || t === "error" || t === "success" ? t : "idle";
+  }
+  set state(t) {
+    if (t === "idle") {
+      this.removeAttribute("state");
+      return;
+    }
+    this.setAttribute("state", t);
+  }
+  get dialogId() {
+    return this._dialogId;
+  }
+  set dialogId(t) {
+    this._dialogId = t || this._uid, this.requestRender();
+  }
+  get config() {
+    return this._config;
+  }
+  set config(t) {
+    this._config = t || {}, this._config.id && (this._dialogId = this._config.id), this._config.dismissible != null && (this.dismissible = !!this._config.dismissible), this._config.closeOnOverlay != null && (this.closeOnOverlay = !!this._config.closeOnOverlay), this._config.closeOnEsc != null && (this.closeOnEsc = !!this._config.closeOnEsc), this._config.lockWhileLoading != null && (this.lockWhileLoading = !!this._config.lockWhileLoading), this._config.size && this.setAttribute("size", this._config.size), this._config.role && this.setAttribute("role", this._config.role), this._config.initialFocus && this.setAttribute("initial-focus", this._config.initialFocus), this._config.ariaLabel && this.setAttribute("aria-label", this._config.ariaLabel), this._config.ariaLabelledby && this.setAttribute("aria-labelledby", this._config.ariaLabelledby), this._config.ariaDescribedby && this.setAttribute("aria-describedby", this._config.ariaDescribedby), this._config.errorMessage && (this._runtimeError = this._config.errorMessage), this.requestRender();
+  }
+  openDialog() {
+    this.setAttribute("open", "");
+  }
+  closeDialog(t = "programmatic") {
+    if (!this.hasAttribute("open"))
+      return;
+    const i = new CustomEvent("request-close", {
+      detail: { reason: t },
+      bubbles: !0,
+      cancelable: !0,
+      composed: !0
+    });
+    this.dispatchEvent(i);
+    const e = new CustomEvent("ui-request-close", {
+      detail: { id: this.dialogId || this._uid, reason: t },
+      bubbles: !0,
+      cancelable: !0,
+      composed: !0
+    });
+    if (this.dispatchEvent(e), !(i.defaultPrevented || e.defaultPrevented)) {
+      if (t === "submit") {
+        this.close("submit");
+        return;
+      }
+      if (t === "cancel") {
+        this.close("cancel");
+        return;
+      }
+      if (t === "overlay") {
+        this.close("dismiss", "overlay");
+        return;
+      }
+      if (t === "escape") {
+        this.close("dismiss", "esc");
+        return;
+      }
+      if (t === "button") {
+        this.close("dismiss", "close-icon");
+        return;
+      }
+      this.close("dismiss", "programmatic");
+    }
+  }
+  close(t = "dismiss", i, e) {
+    this._terminalEmitted || (this._closeMeta = { action: t, source: i, reason: e }, this.hasAttribute("open") && this.removeAttribute("open"), this._syncOpenState());
+  }
+  setError(t) {
+    this._runtimeError = t, this.state = t ? "error" : "idle", this.requestRender();
+  }
+  clearError() {
+    this._runtimeError = "", this.state === "error" && (this.state = "idle"), this.requestRender();
+  }
+  _syncFromAttributes() {
+    !this.hasAttribute("dismissible") && this.hasAttribute("closable") && this.setAttribute("dismissible", this.getAttribute("closable") || "true"), !this.hasAttribute("closable") && this.hasAttribute("dismissible") && this.setAttribute("closable", this.getAttribute("dismissible") || "true"), !this.hasAttribute("close-on-overlay") && this.hasAttribute("close-on-backdrop") && this.setAttribute("close-on-overlay", this.getAttribute("close-on-backdrop") || "true"), !this.hasAttribute("close-on-backdrop") && this.hasAttribute("close-on-overlay") && this.setAttribute("close-on-backdrop", this.getAttribute("close-on-overlay") || "true"), this.hasAttribute("role") || this.setAttribute("role", "dialog");
+  }
+  _syncOpenState() {
+    const t = this.hasAttribute("open");
+    if (t && !this._isActive) {
+      this._activate();
+      return;
+    }
+    !t && this._isActive && this._deactivate();
+  }
+  _activate() {
+    this._isActive = !0, this._terminalEmitted = !1, this._closeMeta = null, n._openStack.includes(this) || n._openStack.push(this), this._lastFocused = document.activeElement || null, T();
+    const t = this.dialogId || this._uid;
+    this._dispatchWithLegacy("ui-open", "open", { id: t }), this.dispatchEvent(new CustomEvent("show", { bubbles: !0, composed: !0 })), this.requestRender();
+  }
+  _deactivate() {
+    if (!this._isActive)
+      return;
+    this._isActive = !1, this._destroyRuntimeControllers();
+    const t = n._openStack.lastIndexOf(this);
+    if (t >= 0 && n._openStack.splice(t, 1), I(), !this._terminalEmitted) {
+      const e = this._closeMeta || { action: "dismiss", source: "abort" }, s = this.dialogId || this._uid;
+      e.action === "cancel" ? this._dispatchWithLegacy("ui-cancel", "cancel", { id: s }) : this._dispatchWithLegacy("ui-dismiss", "dismiss", {
+        id: s,
+        source: e.source || "abort",
+        reason: e.reason
+      }), this._dispatchWithLegacy("ui-close", "close", {
+        id: s,
+        action: e.action,
+        source: e.source,
+        reason: e.reason
+      }), this.dispatchEvent(new CustomEvent("hide", { bubbles: !0, composed: !0 })), this._terminalEmitted = !0, this._closeMeta = null;
+    }
+    const i = this._lastFocused;
+    this._lastFocused = null, i && this._canRestoreFocus(i) && setTimeout(() => {
+      try {
+        this._canRestoreFocus(i) && i.focus();
+      } catch {
+      }
+    }, 0), this.requestRender();
+  }
+  _dispatchWithLegacy(t, i, e, s = !1) {
+    const o = new CustomEvent(t, {
+      detail: e,
+      bubbles: !0,
+      composed: !0,
+      cancelable: s
+    });
+    this.dispatchEvent(o);
+    const r = new CustomEvent(i, {
+      detail: e,
+      bubbles: !0,
+      composed: !0,
+      cancelable: s
+    });
+    return this.dispatchEvent(r), o;
+  }
+  _isTopMost() {
+    if (!this._isActive)
+      return !1;
+    const t = n._openStack;
+    return t.length > 0 && t[t.length - 1] === this;
+  }
+  _queryPanel() {
+    return this.root.querySelector(".panel");
+  }
+  _canRestoreFocus(t) {
+    if (!t || !t.isConnected || t.disabled || t.getAttribute("aria-hidden") === "true")
+      return !1;
+    if (!w())
+      return !0;
+    const i = window.getComputedStyle(t);
+    return i.display !== "none" && i.visibility !== "hidden";
+  }
+  _collectFocusable(t) {
+    return Array.from(t.querySelectorAll(R)).filter((i) => {
+      if (i.disabled || i.getAttribute("aria-hidden") === "true")
+        return !1;
+      const s = w() ? window.getComputedStyle(i) : null;
+      return !(s && (s.display === "none" || s.visibility === "hidden"));
+    });
+  }
+  _focusInitial() {
+    if (!this.open)
+      return;
+    const t = this._queryPanel();
+    if (!t)
+      return;
+    const i = this.getAttribute("initial-focus") || this._config.initialFocus || "";
+    if (i) {
+      const r = t.querySelector(i);
+      if (r && typeof r.focus == "function") {
+        r.focus();
+        return;
+      }
+    }
+    const e = this._collectFocusable(t), o = e.find((r) => r.hasAttribute("autofocus")) || e[0] || t;
+    !o.hasAttribute("tabindex") && o === t && o.setAttribute("tabindex", "-1");
+    try {
+      o.focus();
+    } catch {
+    }
+  }
+  _onFocusIn(t) {
+    !this.open || this._isTopMost();
+  }
+  _handleTab(t) {
+    t.key;
+  }
+  _destroyRuntimeControllers() {
+    var t, i;
+    (t = this._dismissableLayer) == null || t.destroy(), this._dismissableLayer = null, (i = this._focusScope) == null || i.destroy(), this._focusScope = null;
+  }
+  _syncRuntimeControllers() {
+    if (this._destroyRuntimeControllers(), !this.open || !this._isTopMost())
+      return;
+    const t = this._queryPanel();
+    t && (this._dismissableLayer = z({
+      node: t,
+      closeOnEscape: this.closeOnEsc,
+      closeOnPointerOutside: this.closeOnOverlay,
+      closeOnFocusOutside: !1,
+      onBeforeDismiss: (i, e) => this._isInteractionLocked() ? !1 : i === "escape-key" ? (this.closeDialog("escape"), !1) : (i === "outside-pointer" && this.closeDialog("overlay"), !1)
+    }), this._focusScope = B({
+      node: t,
+      trapped: !0,
+      loop: !0,
+      restoreFocus: !1,
+      autoFocus: "first",
+      initialFocus: () => {
+        const i = this.getAttribute("initial-focus") || this._config.initialFocus || "";
+        return i ? t.querySelector(i) : null;
+      }
+    }));
+  }
+  _collectFormData(t) {
+    const i = this._queryPanel(), e = t || this.querySelector("form") || (i == null ? void 0 : i.querySelector("form")) || null;
+    if (!(e instanceof HTMLFormElement) || typeof FormData > "u")
+      return;
+    const s = new FormData(e), o = {};
+    for (const [r, h] of s.entries()) {
+      const l = String(h);
+      if (o[r] == null) {
+        o[r] = l;
+        continue;
+      }
+      const c = o[r];
+      Array.isArray(c) ? c.push(l) : o[r] = [c, l];
+    }
+    return Object.keys(o).length ? o : void 0;
+  }
+  _resolveSubmitForm(t) {
+    var s;
+    if (t) {
+      const o = t.closest("form");
+      if (o instanceof HTMLFormElement && this.contains(o))
+        return o;
+    }
+    const i = this.querySelector("form");
+    if (i instanceof HTMLFormElement)
+      return i;
+    const e = (s = this._queryPanel()) == null ? void 0 : s.querySelector("form");
+    return e instanceof HTMLFormElement ? e : null;
+  }
+  _isInteractionLocked() {
+    return this.state === "loading" && this.lockWhileLoading;
+  }
+  _requestDismiss(t, i) {
+    if (!this._isInteractionLocked()) {
+      if (t === "overlay") {
+        this.closeDialog("overlay");
+        return;
+      }
+      if (t === "esc") {
+        this.closeDialog("escape");
+        return;
+      }
+      if (t === "close-icon") {
+        this.closeDialog("button");
+        return;
+      }
+      this.close("dismiss", t, i);
+    }
+  }
+  _handleSubmit(t) {
+    if (this._isInteractionLocked())
+      return;
+    const i = t ?? this._resolveSubmitForm();
+    if (i && typeof i.reportValidity == "function" && !i.reportValidity())
+      return;
+    const e = {
+      id: this.dialogId || this._uid,
+      formData: this._collectFormData(i)
+    };
+    this._dispatchWithLegacy("ui-submit", "submit", e, !0).defaultPrevented || this.closeDialog("submit");
+  }
+  _handleCancel() {
+    this._isInteractionLocked() || this.closeDialog("cancel");
+  }
+  _onClick(t) {
+    if (!this.open || !this._isTopMost())
+      return;
+    const i = t.target;
+    if (i) {
+      if (!i.closest(".panel") && i.closest(".overlay") && this.closeOnOverlay) {
+        this._requestDismiss("overlay");
+        return;
+      }
+      if (i.closest(".close")) {
+        this._requestDismiss("close-icon");
+        return;
+      }
+      if (i.closest(".btn-submit")) {
+        this._handleSubmit();
+        return;
+      }
+      i.closest(".btn-cancel") && this._handleCancel();
+    }
+  }
+  _onSubmit(t) {
+    if (!this.open || !this._isTopMost())
+      return;
+    const i = t.target;
+    i && i !== this && this.contains(i) && (t.preventDefault(), t.stopPropagation(), this._handleSubmit(i));
+  }
+  _onKeyDown(t) {
+    if (!(!this.open || !this._isTopMost()) && t.key === "Escape") {
+      if (!this.closeOnEsc)
+        return;
+      t.preventDefault(), t.stopPropagation(), this._requestDismiss("esc");
+      return;
+    }
+  }
+  render() {
+    if (!this.open) {
+      this._destroyRuntimeControllers(), this.setContent("");
+      return;
+    }
+    const t = this._config.title ?? this.getAttribute("title") ?? "", i = this._config.description ?? this.getAttribute("description") ?? "", e = this._config.submitText ?? this.getAttribute("submit-text") ?? "Submit", s = this._config.cancelText ?? this.getAttribute("cancel-text") ?? "Cancel", o = this._config.loadingText ?? this.getAttribute("loading-text") ?? "Working...", r = t.trim(), h = i.trim(), l = !!this.querySelector('[slot="title"]'), c = !!this.querySelector('[slot="description"]'), p = !!(r || l), f = !!(h || c), S = !!this.querySelector('[slot="content"]'), C = !!this.querySelector('[slot="footer"]'), L = this._config.showCancel ?? !0, F = this._config.showClose ?? this.dismissible, m = this._runtimeError || this._config.errorMessage || this.getAttribute("error-message") || "", g = this.state === "loading", _ = `ui-dialog-title-${this._uid}`, x = `ui-dialog-description-${this._uid}`, y = `ui-dialog-error-${this._uid}`, D = this.getAttribute("aria-label") || "", O = this.getAttribute("aria-labelledby") || "", A = this.getAttribute("aria-describedby") || "", v = O || (p ? _ : ""), k = D || (v ? "" : "Dialog"), d = [];
+    A ? d.push(A) : (f && d.push(x), m && d.push(y));
+    const $ = p || f ? `
+          <header class="header" part="header">
+            ${p ? `<h2 id="${_}" class="title" part="title"><slot name="title">${a(r)}</slot></h2>` : ""}
+            ${f ? `<p id="${x}" class="description" part="description"><slot name="description">${a(h)}</slot></p>` : ""}
+          </header>
+        ` : "";
+    this._destroyRuntimeControllers(), this.setContent(`
+      ${this.hasAttribute("headless") ? "" : `<style>${M}</style>`}
+      <div class="overlay" part="overlay" data-open="${String(this.open)}">
+        <section
+          class="panel"
+          part="panel"
+          role="${a(this.getAttribute("role") || "dialog")}"
+          aria-modal="true"
+          ${k ? `aria-label="${a(k)}"` : ""}
+          ${v ? `aria-labelledby="${a(v)}"` : ""}
+          ${d.length ? `aria-describedby="${a(d.join(" "))}"` : ""}
+          tabindex="-1"
+        >
+          ${F ? `<button class="close" part="close" aria-label="Close dialog" type="button" ${g ? "disabled" : ""}>
+                 <svg class="close-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true">
+                   <path d="M3.5 3.5L12.5 12.5"></path>
+                   <path d="M12.5 3.5L3.5 12.5"></path>
+                 </svg>
+               </button>` : ""}
+          ${$}
+          <div class="body" part="body">
+            ${S ? '<slot name="content"></slot>' : "<slot></slot>"}
+          </div>
+
+          <div class="error" id="${y}" part="error" aria-live="polite" data-empty="${String(!m)}">${a(m)}</div>
+
+          <footer class="footer" part="footer">
+            ${g ? `<span class="loading" part="loading"><span class="spinner" aria-hidden="true"></span><span>${a(o)}</span></span>` : '<span aria-hidden="true"></span>'}
+
+            ${C ? '<slot name="footer"></slot>' : `${L ? `<button class="btn btn-cancel" part="cancel" type="button" ${g ? "disabled" : ""}>${a(s)}</button>` : ""}
+                 <button class="btn btn-submit" part="submit" type="button" ${g ? "disabled" : ""}>${a(e)}</button>`}
+          </footer>
+        </section>
+      </div>
+    `), this._syncRuntimeControllers();
+  }
+};
+E._openStack = [];
+let W = E;
+typeof customElements < "u" && !customElements.get("ui-dialog") && customElements.define("ui-dialog", W);
+export {
+  W as UIDialog
+};