@editora/ui-core 0.1.9 → 0.1.10

package/dist/dialog.cjs.js

@@ -0,0 +1,406 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const I=require("./ElementBase-1b301e7f.js"),w=require("./scroll-lock-48793569.js"),B=require("./dismissable-layer-193e3bed.js"),z=require("./focus-scope-2b12b4e7.js"),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 S(){return typeof window<"u"&&typeof document<"u"}const E=class n extends I.ElementBase{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,w.acquireBodyScrollLock();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),w.releaseBodyScrollLock(),!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(!S())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=S()?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=B.createDismissableLayer({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=z.createFocusScope({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),L=!!this.querySelector('[slot="content"]'),F=!!this.querySelector('[slot="footer"]'),D=this._config.showCancel??!0,q=this._config.showClose??this.dismissible,m=this._runtimeError||this._config.errorMessage||this.getAttribute("error-message")||"",g=this.state==="loading",_=`ui-dialog-title-${this._uid}`,y=`ui-dialog-description-${this._uid}`,x=`ui-dialog-error-${this._uid}`,O=this.getAttribute("aria-label")||"",$=this.getAttribute("aria-labelledby")||"",A=this.getAttribute("aria-describedby")||"",v=$||(p?_:""),k=O||(v?"":"Dialog"),d=[];A?d.push(A):(f&&d.push(y),m&&d.push(x));const T=p||f?`
+          <header class="header" part="header">
+            ${p?`<h2 id="${_}" class="title" part="title"><slot name="title">${a(r)}</slot></h2>`:""}
+            ${f?`<p id="${y}" 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"
+        >
+          ${q?`<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>`:""}
+          ${T}
+          <div class="body" part="body">
+            ${L?'<slot name="content"></slot>':"<slot></slot>"}
+          </div>
+
+          <div class="error" id="${x}" 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>'}
+
+            ${F?'<slot name="footer"></slot>':`${D?`<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 C=E;typeof customElements<"u"&&!customElements.get("ui-dialog")&&customElements.define("ui-dialog",C);exports.UIDialog=C;