@editora/ui-core 0.1.24 → 0.2.0

package/dist/alert-dialog.cjs.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const Y=require("./ElementBase-DxbvhLJs.js"),b=require("./scroll-lock-BX6e3Ced.js"),N=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const Z=require("./ElementBase-DxbvhLJs.js"),L=require("./overlay-motion-B56x1GoY.js"),f=require("./scroll-lock-BX6e3Ced.js"),G=`
   :host {
     display: block;
     color-scheme: light dark;
-    --ui-alert-radius: var(--base-alert-dialog-radius, var(--ui-radius, 4px));
+    --ui-alert-radius: var(--base-alert-dialog-radius, var(--ui-radius, 6px));
     --ui-alert-bg-base: var(--base-alert-dialog-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-alert-bg: var(--ui-alert-bg-base);
     --ui-alert-text: var(--ui-color-text, var(--ui-text, #202020));
@@ -23,7 +23,8 @@
     --ui-alert-btn-bg: color-mix(in srgb, var(--ui-alert-bg-base) 90%, var(--ui-color-background, #ffffff) 10%);
     --ui-alert-btn-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
     --ui-alert-btn-hover: color-mix(in srgb, var(--ui-alert-btn-bg) 76%, var(--ui-color-border, #cbd5e1) 24%);
-    --ui-alert-confirm-bg: var(--ui-alert-accent);
+    /* Default confirm is the primary fill. A tone sets its own fill and text below, so the text always reads. */
+    --ui-alert-confirm-bg: var(--ui-color-primary, #2563eb);
     --ui-alert-confirm-color: var(--ui-color-foreground-on-primary, #ffffff);
     --ui-alert-icon-bg: color-mix(in srgb, var(--ui-alert-accent) 14%, transparent);
     --ui-alert-icon-color: var(--ui-alert-accent);
@@ -35,8 +36,8 @@
     --ui-alert-description-size: 13px;
     --ui-alert-description-line-height: 20px;
     --ui-alert-icon-size: 28px;
-    --ui-alert-button-height: var(--base-button-height-md, 36px);
-    --ui-alert-button-radius: var(--ui-radius, 4px);
+    --ui-alert-button-height: var(--base-button-height-md, var(--ui-control-height-2, 32px));
+    --ui-alert-button-radius: var(--ui-radius, 6px);
   }
 
   :host([tone='info']) {
@@ -45,14 +46,20 @@
 
   :host([tone='success']) {
     --ui-alert-accent: var(--ui-color-success, #15803d);
+    --ui-alert-confirm-bg: color-mix(in srgb, var(--ui-alert-accent) 76%, #000000);
+    --ui-alert-confirm-color: #ffffff;
   }
 
   :host([tone='warning']) {
     --ui-alert-accent: var(--ui-color-warning, #b45309);
+    --ui-alert-confirm-bg: var(--ui-alert-accent);
+    --ui-alert-confirm-color: var(--ui-color-foreground-on-warning, #ffffff);
   }
 
   :host([tone='danger']) {
     --ui-alert-accent: var(--ui-color-danger, #dc2626);
+    --ui-alert-confirm-bg: color-mix(in srgb, var(--ui-alert-accent) 80%, #000000);
+    --ui-alert-confirm-color: #ffffff;
   }
 
   :host([size='sm']),
@@ -66,7 +73,7 @@
     --ui-alert-description-size: 12px;
     --ui-alert-description-line-height: 18px;
     --ui-alert-icon-size: 24px;
-    --ui-alert-button-height: var(--base-button-height-sm, 32px);
+    --ui-alert-button-height: var(--base-button-height-sm, var(--ui-control-height-1, 24px));
   }
 
   :host([size='md']),
@@ -86,7 +93,7 @@
     --ui-alert-description-size: 14px;
     --ui-alert-description-line-height: 22px;
     --ui-alert-icon-size: 32px;
-    --ui-alert-button-height: var(--base-button-height-lg, 44px);
+    --ui-alert-button-height: var(--base-button-height-lg, var(--ui-control-height-3, 40px));
   }
 
   :host([variant='outline']) {
@@ -134,8 +141,16 @@
     place-items: center;
     background: var(--ui-alert-backdrop);
     backdrop-filter: saturate(1.04) blur(3px);
-    opacity: 0;
-    transition: opacity var(--ui-alert-duration) var(--ui-alert-easing);
+    /* The backdrop goes to the top layer (popover); undo the popover user-agent box. */
+    inline-size: 100%;
+    block-size: 100%;
+    max-inline-size: none;
+    max-block-size: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow: visible;
+    color: inherit;
   }
 
   .dialog {
@@ -152,13 +167,9 @@
     padding: var(--ui-alert-padding);
     outline: none;
     overflow: clip;
-    opacity: 0;
-    transform: translateY(12px) scale(0.985);
     transition:
       border-color var(--ui-alert-duration) var(--ui-alert-easing),
-      box-shadow var(--ui-alert-duration) var(--ui-alert-easing),
-      transform var(--ui-alert-duration) var(--ui-alert-easing),
-      opacity var(--ui-alert-duration) var(--ui-alert-easing);
+      box-shadow var(--ui-alert-duration) var(--ui-alert-easing);
   }
 
   .dialog::before {
@@ -179,13 +190,33 @@
     display: none;
   }
 
-  .backdrop[data-open='true'] {
-    opacity: 1;
+  /* Open and close are animations on data-state; the surface is created and removed, which a transition cannot play. */
+  .backdrop[data-state='open']:not([data-instant]) {
+    animation: ui-alert-backdrop-in 150ms ease-out backwards;
   }
 
-  .backdrop[data-open='true'] .dialog {
-    opacity: 1;
-    transform: translateY(0) scale(1);
+  .backdrop[data-state='open']:not([data-instant]) .dialog {
+    animation: ui-alert-dialog-in 150ms var(--ui-motion-enter-easing, cubic-bezier(0.16, 1, 0.3, 1)) backwards;
+  }
+
+  .backdrop[data-state='closed'] {
+    animation: ui-alert-backdrop-out 100ms ease-in both;
+    pointer-events: none;
+  }
+
+  .backdrop[data-state='closed'] .dialog {
+    animation: ui-alert-dialog-out 100ms var(--ui-motion-exit-easing, cubic-bezier(0.4, 0, 1, 1)) both;
+  }
+
+  @keyframes ui-alert-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
+  @keyframes ui-alert-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
+  @keyframes ui-alert-dialog-in {
+    from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.96); }
+    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
+  }
+  @keyframes ui-alert-dialog-out {
+    from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
+    to { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.96); }
   }
 
   .dialog:focus-visible {
@@ -305,12 +336,12 @@
 
   .input {
     width: 100%;
-    border-radius: var(--ui-radius, 4px);
+    border-radius: var(--ui-radius, 6px);
     border: var(--base-input-border, 1px solid color-mix(in srgb, var(--ui-alert-border-color) 88%, transparent));
     background: var(--base-input-bg, color-mix(in srgb, var(--ui-alert-bg-base) 94%, #ffffff 6%));
     color: inherit;
     box-sizing: border-box;
-    min-height: var(--base-input-height-md, 36px);
+    min-height: var(--base-input-height-md, var(--ui-control-height-2, 32px));
     padding: 9px 12px;
     font: inherit;
     line-height: 1.35;
@@ -497,71 +528,71 @@
       border: 1px solid CanvasText;
     }
   }
-`,U='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function g(i,t){if(i==null)return t;const e=i.trim().toLowerCase();return e!=="false"&&e!=="0"&&e!=="off"}function a(i){return String(i).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function Z(i){return i==="info"||i==="success"||i==="warning"||i==="danger"?i:"neutral"}function G(i){return i==="sm"||i==="1"?"sm":i==="lg"||i==="3"?"lg":"md"}function J(i){return i==="soft"||i==="outline"||i==="solid"?i:"surface"}function Q(i){return i==="none"||i==="high"?i:"low"}function X(i){return i==="none"?"none":"line"}function tt(i,t="var(--base-alert-dialog-radius, var(--ui-radius, 4px))"){if(i==null)return t;const e=i.trim().toLowerCase();return e?e==="full"||e==="pill"?"999px":/^-?\d+(\.\d+)?$/.test(e)?`${e}px`:i:t}const et=new Set(["tone","size","variant","elevation","indicator","radius"]);function it(i){return i==="success"?'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10.2 8.3 13.4 15 6.8"></path></svg>':i==="warning"?'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.6 17 16.4H3L10 3.6Z"></path><path d="M10 8v3.4"></path><circle cx="10" cy="14.1" r="0.9" fill="currentColor" stroke="none"></circle></svg>':i==="danger"?'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.1"></circle><path d="m7.5 7.5 5 5M12.5 7.5l-5 5"></path></svg>':i==="info"?'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.1"></circle><path d="M10 13v-3.8"></path><circle cx="10" cy="6.5" r="0.9" fill="currentColor" stroke="none"></circle></svg>':'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M6 10h8"></path><circle cx="10" cy="10" r="7.1"></circle></svg>'}function u(){return typeof window<"u"&&typeof document<"u"}function S(){if(!u())return null;const i=document.activeElement;return i instanceof HTMLElement?i:null}function y(i){return typeof requestAnimationFrame=="function"?requestAnimationFrame(()=>i()):window.setTimeout(i,16)}function p(i){if(i){if(typeof cancelAnimationFrame=="function"){cancelAnimationFrame(i);return}window.clearTimeout(i)}}const c="data-ui-auto-name",l=class l extends Y.ElementBase{constructor(){super(),this._lastActive=null,this._active=!1,this._terminalEmitted=!1,this._closeMeta=null,this._uid=Math.random().toString(36).slice(2,10),this._dialogId="",this._config={},this._inputValue="",this._checked=!1,this._runtimeError="",this._activeHeadless=!1,this._focusInitialFrame=0,this._restoreFocusFrame=0,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onInput=this._onInput.bind(this),this._dialogId=this._uid}static get observedAttributes(){return["open","headless","dismissible","close-on-esc","close-on-backdrop","lock-while-loading","role","tone","size","variant","elevation","indicator","radius","state","aria-label","aria-labelledby","aria-describedby","initial-focus","title","description","confirm-text","cancel-text","loading-text","error-message"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this.root.addEventListener("input",this._onInput),this._syncFromAttributes(),this._syncVisualTokens(),this._syncOpenState()}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),this.root.removeEventListener("input",this._onInput),this._focusInitialFrame&&(p(this._focusInitialFrame),this._focusInitialFrame=0),this._restoreFocusFrame&&(p(this._restoreFocusFrame),this._restoreFocusFrame=0),this._active&&!this._terminalEmitted&&this.close("dismiss","unmount"),this._deactivate(),super.disconnectedCallback()}attributeChangedCallback(t,e,r){if(e!==r){if(et.has(t)){this._syncVisualTokens();return}if(t==="headless"){this._syncActiveEnvironment(),this.requestRender();return}if(t==="open"){this._syncOpenState();return}t==="state"&&r!=="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 headless(){return this.hasAttribute("headless")}set headless(t){t?this.setAttribute("headless",""):this.removeAttribute("headless")}get dismissible(){return g(this.getAttribute("dismissible"),!0)}set dismissible(t){this.setAttribute("dismissible",String(t))}get closeOnEsc(){return g(this.getAttribute("close-on-esc"),this.dismissible)}set closeOnEsc(t){this.setAttribute("close-on-esc",String(t))}get closeOnBackdrop(){return g(this.getAttribute("close-on-backdrop"),this.dismissible)}set closeOnBackdrop(t){this.setAttribute("close-on-backdrop",String(t))}get lockWhileLoading(){return g(this.getAttribute("lock-while-loading"),!0)}set lockWhileLoading(t){this.setAttribute("lock-while-loading",String(t))}get roleType(){return this.getAttribute("role")==="dialog"?"dialog":"alertdialog"}set roleType(t){this.setAttribute("role",t)}get tone(){return Z(this.getAttribute("tone"))}set tone(t){if(t==="neutral"){this.removeAttribute("tone");return}this.setAttribute("tone",t)}get size(){return G(this.getAttribute("size"))}set size(t){if(t==="md"){this.removeAttribute("size");return}this.setAttribute("size",t)}get variant(){return J(this.getAttribute("variant"))}set variant(t){if(t==="surface"){this.removeAttribute("variant");return}this.setAttribute("variant",t)}get elevation(){return Q(this.getAttribute("elevation"))}set elevation(t){if(t==="low"){this.removeAttribute("elevation");return}this.setAttribute("elevation",t)}get indicator(){return X(this.getAttribute("indicator"))}set indicator(t){if(t==="line"){this.removeAttribute("indicator");return}this.setAttribute("indicator",t)}get radius(){return this.getAttribute("radius")||""}set radius(t){if(!t){this.removeAttribute("radius");return}this.setAttribute("radius",t)}get state(){const t=this.getAttribute("state");return t==="loading"||t==="error"?t:"idle"}set state(t){if(t==="idle"){this.removeAttribute("state");return}this.setAttribute("state",t)}get initialFocus(){return this.getAttribute("initial-focus")||this._config.initialFocus||""}set initialFocus(t){if(!t){this.removeAttribute("initial-focus");return}this.setAttribute("initial-focus",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.closeOnEsc!=null&&(this.closeOnEsc=!!this._config.closeOnEsc),this._config.closeOnBackdrop!=null&&(this.closeOnBackdrop=!!this._config.closeOnBackdrop),this._config.lockWhileLoading!=null&&(this.lockWhileLoading=!!this._config.lockWhileLoading),this._config.role&&(this.roleType=this._config.role),this._config.tone&&(this.tone=this._config.tone),this._config.size&&(this.size=this._config.size),this._config.variant&&(this.variant=this._config.variant),this._config.elevation&&(this.elevation=this._config.elevation),this._config.indicator&&(this.indicator=this._config.indicator),this._config.radius!=null&&(this.radius=String(this._config.radius)),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.initialFocus&&(this.initialFocus=this._config.initialFocus),this._config.headless!=null&&(this.headless=!!this._config.headless),this._inputValue=this._config.input?.value??this._inputValue,this._checked=this._config.checkbox?.checked??this._checked,this._runtimeError=this._config.errorMessage||"",this._syncVisualTokens(),this.requestRender()}getInputValue(){return this.root.querySelector(".input")?.value??this._inputValue}setInputValue(t){this._inputValue=t;const e=this.root.querySelector(".input");e&&(e.value=t)}getChecked(){return this.root.querySelector(".checkbox-input")?.checked??this._checked}setChecked(t){this._checked=t;const e=this.root.querySelector(".checkbox-input");e&&(e.checked=t)}setError(t){this._runtimeError=t,this.state=t?"error":"idle",this.requestRender()}clearError(){this._runtimeError="",this.state==="error"&&(this.state="idle"),this.requestRender()}close(t="dismiss",e,r){this._terminalEmitted||(this._closeMeta={action:t,source:e,reason:r},this.hasAttribute("open")&&this.removeAttribute("open"),this._syncOpenState())}_syncFromAttributes(){this.hasAttribute("role")||this.setAttribute("role","alertdialog")}_syncVisualTokens(){this.style.setProperty("--ui-alert-radius",tt(this.getAttribute("radius")))}_syncOpenState(){const t=this.hasAttribute("open");if(t&&!this._active){this._activate();return}!t&&this._active&&this._deactivate()}_activate(){this._active=!0,this._activeHeadless=this.headless,this._terminalEmitted=!1,this._closeMeta=null,l._openStack.includes(this)||l._openStack.push(this),this._lastActive=this.headless?null:S(),this.headless||b.acquireBodyScrollLock(),u()&&!this.headless&&document.addEventListener("focusin",this._onFocusIn,!0);const t=this.dialogId||this._uid;this._dispatchWithLegacy("ui-open","open",{id:t}),this.headless||(this._focusInitialFrame&&p(this._focusInitialFrame),this._focusInitialFrame=y(()=>{this._focusInitialFrame=0,this._focusInitial()})),this.requestRender()}_deactivate(){if(!this._active)return;this._active=!1;const t=l._openStack.lastIndexOf(this);if(t>=0&&l._openStack.splice(t,1),u()&&!this._activeHeadless&&document.removeEventListener("focusin",this._onFocusIn,!0),this._activeHeadless||b.releaseBodyScrollLock(),!this._terminalEmitted){const r=this._closeMeta||{action:"dismiss",source:"abort"},s=this.dialogId||this._uid;r.action==="cancel"?this._dispatchWithLegacy("ui-cancel","cancel",{id:s}):r.action==="dismiss"&&this._dispatchWithLegacy("ui-dismiss","dismiss",{id:s,source:r.source||"abort",reason:r.reason}),this._dispatchWithLegacy("ui-close","close",{id:s,action:r.action,source:r.source,reason:r.reason}),this._terminalEmitted=!0,this._closeMeta=null}const e=this._lastActive;this._lastActive=null,e&&!this._activeHeadless&&(this._restoreFocusFrame&&p(this._restoreFocusFrame),this._restoreFocusFrame=y(()=>{this._restoreFocusFrame=0;try{e.focus()}catch{}})),this._activeHeadless=!1,this.requestRender()}_syncActiveEnvironment(){if(this._active&&this.headless!==this._activeHeadless){if(this.headless){u()&&document.removeEventListener("focusin",this._onFocusIn,!0),b.releaseBodyScrollLock(),this._lastActive=null,this._activeHeadless=!0;return}this._lastActive=S(),b.acquireBodyScrollLock(),u()&&document.addEventListener("focusin",this._onFocusIn,!0),this._activeHeadless=!1,this._focusInitialFrame&&p(this._focusInitialFrame),this._focusInitialFrame=y(()=>{this._focusInitialFrame=0,this._focusInitial()})}}_dispatchWithLegacy(t,e,r,s=!1){const o=new CustomEvent(t,{detail:r,bubbles:!0,composed:!0,cancelable:s});this.dispatchEvent(o);const n=new CustomEvent(e,{detail:r,bubbles:!0,composed:!0,cancelable:s});return this.dispatchEvent(n),o}_isTopMost(){if(!this._active)return!1;const t=l._openStack;return t.length>0&&t[t.length-1]===this}_queryPanel(){return this.root.querySelector(".dialog")}_collectFocusable(t){return Array.from(t.querySelectorAll(U)).filter(e=>{if(e.disabled||e.getAttribute("aria-hidden")==="true")return!1;const s=u()?window.getComputedStyle(e):null;return!(s&&(s.display==="none"||s.visibility==="hidden"))})}_focusInitial(){if(!this.open)return;const t=this._queryPanel();if(!t)return;const e=this.initialFocus;if(e){const n=t.querySelector(e);if(n&&typeof n.focus=="function"){n.focus();return}}const r=this._collectFocusable(t),o=r.find(n=>n.hasAttribute("autofocus"))||r[0]||t;!o.hasAttribute("tabindex")&&o===t&&o.setAttribute("tabindex","-1");try{o.focus()}catch{}}_handleTab(t){if(t.key!=="Tab")return;const e=this._queryPanel();if(!e)return;const r=this._collectFocusable(e);if(!r.length){t.preventDefault(),e.focus();return}const s=this.root.activeElement||document.activeElement,o=r[0],n=r[r.length-1];if(t.shiftKey){(s===o||!s||!e.contains(s))&&(t.preventDefault(),n.focus());return}s===n&&(t.preventDefault(),o.focus())}_onFocusIn(t){if(!this.open||!this._isTopMost())return;const e=this._queryPanel();if(!e)return;const r=t.target;(typeof t.composedPath=="function"?t.composedPath():[]).includes(e)||r&&e.contains(r)||this._focusInitial()}_onInput(t){const e=t.target;e&&(e.classList.contains("input")&&(this._inputValue=e.value),e.classList.contains("checkbox-input")&&(this._checked=e.checked),this._dispatchWithLegacy("ui-change","change",{id:this.dialogId||this._uid,inputValue:this._inputValue,checked:this._checked}))}_isInteractionLocked(){return this.state==="loading"&&this.lockWhileLoading}_requestDismiss(t,e){this._isInteractionLocked()||this.close("dismiss",t,e)}_handleConfirm(){const t={id:this.dialogId||this._uid,inputValue:this.getInputValue(),checked:this.getChecked()};this._dispatchWithLegacy("ui-confirm","confirm",t,!0).defaultPrevented||this.close("confirm")}_handleCancel(){this._isInteractionLocked()||this.close("cancel")}_onClick(t){if(!this.open||!this._isTopMost())return;const e=t.target;if(e){if(e.classList.contains("backdrop")&&this.closeOnBackdrop){this._requestDismiss("backdrop");return}if(e.closest(".close")){this._requestDismiss("close-icon");return}if(e.closest(".btn-confirm")){this._handleConfirm();return}e.closest(".btn-cancel")&&this._handleCancel()}}_onKeyDown(t){if(!(!this.open||!this._isTopMost())){if(t.key==="Escape"){if(!this.closeOnEsc)return;t.preventDefault(),t.stopPropagation(),this._requestDismiss("esc");return}this._handleTab(t)}}_syncHostSemantics(t,e="",r=!1){if(!t){this.getAttribute("aria-hidden")!=="true"&&this.setAttribute("aria-hidden","true"),this.hasAttribute(c)&&(this.removeAttribute("aria-label"),this.removeAttribute(c));return}if(this.hasAttribute("aria-hidden")&&this.removeAttribute("aria-hidden"),r){this.hasAttribute(c)&&this.removeAttribute(c);return}this.getAttribute("aria-label")!==e&&this.setAttribute("aria-label",e),this.hasAttribute(c)||this.setAttribute(c,"")}render(){if(!this.open){this._syncHostSemantics(!1),this.setContent("");return}const t=this._config.title??this.getAttribute("title")??"",e=this._config.description??this.getAttribute("description")??"",r=this._config.confirmText??this.getAttribute("confirm-text")??"Confirm",s=this._config.cancelText??this.getAttribute("cancel-text")??"Cancel",o=this._config.loadingText??this.getAttribute("loading-text")??"Working...",n=!!this._config.input?.enabled,C=this._config.input?.label||"Value",L=this._config.input?.placeholder||"",B=!!this._config.input?.required,T=!!this._config.checkbox?.enabled,$=this._config.checkbox?.label||"Remember this choice",q=this.state,m=this._runtimeError||this._config.errorMessage||this.getAttribute("error-message")||"",w=`ui-alert-title-${this._uid}`,A=`ui-alert-description-${this._uid}`,F=`ui-alert-error-${this._uid}`,M=!!this.querySelector('[slot="title"]'),O=!!this.querySelector('[slot="description"]'),D=!!this.querySelector('[slot="icon"]'),H=!!this.querySelector('[slot="footer"]'),V=!!this.querySelector('[slot="content"]'),v=M||!!t,x=O||!!e,R=D||v||x,W=this._config.showCancel??this.dismissible,P=this._config.showClose??this.dismissible,j=this.tone,_=this.hasAttribute(c)?"":this.getAttribute("aria-label")||"",z=this.getAttribute("aria-labelledby")||"",E=this.getAttribute("aria-describedby")||"",k=z||(v?w:""),I=_||(k?"":t||e||"Dialog"),K=(this.querySelector('[slot="title"]')?.textContent||"").replace(/\s+/g," ").trim();this._syncHostSemantics(!0,_||K||t||e||"Dialog",!!_||!!z);const d=[];E?d.push(E):(x&&d.push(A),m&&d.push(F));const h=q==="loading";this.setContent(`
-      <style>${N}</style>
-      <div class="backdrop" part="backdrop" role="presentation" data-open="${String(this.open)}">
+`,J='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function b(i,t){if(i==null)return t;const e=i.trim().toLowerCase();return e!=="false"&&e!=="0"&&e!=="off"}function o(i){return String(i).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function Q(i){return i==="info"||i==="success"||i==="warning"||i==="danger"?i:"neutral"}function X(i){return i==="sm"||i==="1"?"sm":i==="lg"||i==="3"?"lg":"md"}function tt(i){return i==="soft"||i==="outline"||i==="solid"?i:"surface"}function et(i){return i==="none"||i==="high"?i:"low"}function it(i){return i==="none"?"none":"line"}function rt(i,t="var(--base-alert-dialog-radius, var(--ui-radius, 6px))"){if(i==null)return t;const e=i.trim().toLowerCase();return e?e==="full"||e==="pill"?"999px":/^-?\d+(\.\d+)?$/.test(e)?`${e}px`:i:t}const st=new Set(["tone","size","variant","elevation","indicator","radius"]);function ot(i){return i==="success"?'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10.2 8.3 13.4 15 6.8"></path></svg>':i==="warning"?'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.6 17 16.4H3L10 3.6Z"></path><path d="M10 8v3.4"></path><circle cx="10" cy="14.1" r="0.9" fill="currentColor" stroke="none"></circle></svg>':i==="danger"?'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.1"></circle><path d="m7.5 7.5 5 5M12.5 7.5l-5 5"></path></svg>':i==="info"?'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.1"></circle><path d="M10 13v-3.8"></path><circle cx="10" cy="6.5" r="0.9" fill="currentColor" stroke="none"></circle></svg>':'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M6 10h8"></path><circle cx="10" cy="10" r="7.1"></circle></svg>'}function u(){return typeof window<"u"&&typeof document<"u"}function T(){if(!u())return null;const i=document.activeElement;return i instanceof HTMLElement?i:null}function w(i){return typeof requestAnimationFrame=="function"?requestAnimationFrame(()=>i()):window.setTimeout(i,16)}function p(i){if(i){if(typeof cancelAnimationFrame=="function"){cancelAnimationFrame(i);return}window.clearTimeout(i)}}const c="data-ui-auto-name",l=class l extends Z.ElementBase{constructor(){super(),this._lastActive=null,this._active=!1,this._terminalEmitted=!1,this._closeMeta=null,this._uid=Math.random().toString(36).slice(2,10),this._dialogId="",this._config={},this._inputValue="",this._checked=!1,this._runtimeError="",this._activeHeadless=!1,this._focusInitialFrame=0,this._restoreFocusFrame=0,this._presented=!1,this._finishClose=null,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onInput=this._onInput.bind(this),this._dialogId=this._uid}static get observedAttributes(){return["open","headless","dismissible","close-on-esc","close-on-backdrop","lock-while-loading","role","tone","size","variant","elevation","indicator","radius","state","aria-label","aria-labelledby","aria-describedby","initial-focus","title","description","confirm-text","cancel-text","loading-text","error-message"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this.root.addEventListener("input",this._onInput),this._syncFromAttributes(),this._syncVisualTokens(),this._syncOpenState()}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),this.root.removeEventListener("input",this._onInput),this._focusInitialFrame&&(p(this._focusInitialFrame),this._focusInitialFrame=0),this._restoreFocusFrame&&(p(this._restoreFocusFrame),this._restoreFocusFrame=0),this._active&&!this._terminalEmitted&&this.close("dismiss","unmount"),this._deactivate(),super.disconnectedCallback()}attributeChangedCallback(t,e,r){if(e!==r){if(st.has(t)){this._syncVisualTokens();return}if(t==="headless"){this._syncActiveEnvironment(),this.requestRender();return}if(t==="open"){this._syncOpenState();return}t==="state"&&r!=="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 headless(){return this.hasAttribute("headless")}set headless(t){t?this.setAttribute("headless",""):this.removeAttribute("headless")}get dismissible(){return b(this.getAttribute("dismissible"),!0)}set dismissible(t){this.setAttribute("dismissible",String(t))}get closeOnEsc(){return b(this.getAttribute("close-on-esc"),this.dismissible)}set closeOnEsc(t){this.setAttribute("close-on-esc",String(t))}get closeOnBackdrop(){return b(this.getAttribute("close-on-backdrop"),this.dismissible)}set closeOnBackdrop(t){this.setAttribute("close-on-backdrop",String(t))}get lockWhileLoading(){return b(this.getAttribute("lock-while-loading"),!0)}set lockWhileLoading(t){this.setAttribute("lock-while-loading",String(t))}get roleType(){return this.getAttribute("role")==="dialog"?"dialog":"alertdialog"}set roleType(t){this.setAttribute("role",t)}get tone(){return Q(this.getAttribute("tone"))}set tone(t){if(t==="neutral"){this.removeAttribute("tone");return}this.setAttribute("tone",t)}get size(){return X(this.getAttribute("size"))}set size(t){if(t==="md"){this.removeAttribute("size");return}this.setAttribute("size",t)}get variant(){return tt(this.getAttribute("variant"))}set variant(t){if(t==="surface"){this.removeAttribute("variant");return}this.setAttribute("variant",t)}get elevation(){return et(this.getAttribute("elevation"))}set elevation(t){if(t==="low"){this.removeAttribute("elevation");return}this.setAttribute("elevation",t)}get indicator(){return it(this.getAttribute("indicator"))}set indicator(t){if(t==="line"){this.removeAttribute("indicator");return}this.setAttribute("indicator",t)}get radius(){return this.getAttribute("radius")||""}set radius(t){if(!t){this.removeAttribute("radius");return}this.setAttribute("radius",t)}get state(){const t=this.getAttribute("state");return t==="loading"||t==="error"?t:"idle"}set state(t){if(t==="idle"){this.removeAttribute("state");return}this.setAttribute("state",t)}get initialFocus(){return this.getAttribute("initial-focus")||this._config.initialFocus||""}set initialFocus(t){if(!t){this.removeAttribute("initial-focus");return}this.setAttribute("initial-focus",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.closeOnEsc!=null&&(this.closeOnEsc=!!this._config.closeOnEsc),this._config.closeOnBackdrop!=null&&(this.closeOnBackdrop=!!this._config.closeOnBackdrop),this._config.lockWhileLoading!=null&&(this.lockWhileLoading=!!this._config.lockWhileLoading),this._config.role&&(this.roleType=this._config.role),this._config.tone&&(this.tone=this._config.tone),this._config.size&&(this.size=this._config.size),this._config.variant&&(this.variant=this._config.variant),this._config.elevation&&(this.elevation=this._config.elevation),this._config.indicator&&(this.indicator=this._config.indicator),this._config.radius!=null&&(this.radius=String(this._config.radius)),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.initialFocus&&(this.initialFocus=this._config.initialFocus),this._config.headless!=null&&(this.headless=!!this._config.headless),this._inputValue=this._config.input?.value??this._inputValue,this._checked=this._config.checkbox?.checked??this._checked,this._runtimeError=this._config.errorMessage||"",this._syncVisualTokens(),this.requestRender()}getInputValue(){return this.root.querySelector(".input")?.value??this._inputValue}setInputValue(t){this._inputValue=t;const e=this.root.querySelector(".input");e&&(e.value=t)}getChecked(){return this.root.querySelector(".checkbox-input")?.checked??this._checked}setChecked(t){this._checked=t;const e=this.root.querySelector(".checkbox-input");e&&(e.checked=t)}setError(t){this._runtimeError=t,this.state=t?"error":"idle",this.requestRender()}clearError(){this._runtimeError="",this.state==="error"&&(this.state="idle"),this.requestRender()}close(t="dismiss",e,r){this._terminalEmitted||(this._closeMeta={action:t,source:e,reason:r},this.hasAttribute("open")&&this.removeAttribute("open"),this._syncOpenState())}_syncFromAttributes(){this.hasAttribute("role")||this.setAttribute("role","alertdialog")}_syncVisualTokens(){this.style.setProperty("--ui-alert-radius",rt(this.getAttribute("radius")))}_syncOpenState(){const t=this.hasAttribute("open");if(t&&!this._active){this._activate();return}!t&&this._active&&this._deactivate()}_activate(){this._active=!0,this._activeHeadless=this.headless,this._terminalEmitted=!1,this._closeMeta=null,l._openStack.includes(this)||l._openStack.push(this),this._lastActive=this.headless?null:T(),this.headless||f.acquireBodyScrollLock(),u()&&!this.headless&&document.addEventListener("focusin",this._onFocusIn,!0);const t=this.dialogId||this._uid;this._dispatchWithLegacy("ui-open","open",{id:t}),this.headless||(this._focusInitialFrame&&p(this._focusInitialFrame),this._focusInitialFrame=w(()=>{this._focusInitialFrame=0,this._focusInitial()})),this.requestRender()}_deactivate(){if(!this._active)return;this._active=!1;const t=l._openStack.lastIndexOf(this);if(t>=0&&l._openStack.splice(t,1),u()&&!this._activeHeadless&&document.removeEventListener("focusin",this._onFocusIn,!0),this._activeHeadless||f.releaseBodyScrollLock(),!this._terminalEmitted){const r=this._closeMeta||{action:"dismiss",source:"abort"},s=this.dialogId||this._uid;r.action==="cancel"?this._dispatchWithLegacy("ui-cancel","cancel",{id:s}):r.action==="dismiss"&&this._dispatchWithLegacy("ui-dismiss","dismiss",{id:s,source:r.source||"abort",reason:r.reason}),this._dispatchWithLegacy("ui-close","close",{id:s,action:r.action,source:r.source,reason:r.reason}),this._terminalEmitted=!0,this._closeMeta=null}const e=this._lastActive;this._lastActive=null,e&&!this._activeHeadless&&(this._restoreFocusFrame&&p(this._restoreFocusFrame),this._restoreFocusFrame=w(()=>{this._restoreFocusFrame=0;try{e.focus()}catch{}})),this._activeHeadless=!1,this.requestRender()}_syncActiveEnvironment(){if(this._active&&this.headless!==this._activeHeadless){if(this.headless){u()&&document.removeEventListener("focusin",this._onFocusIn,!0),f.releaseBodyScrollLock(),this._lastActive=null,this._activeHeadless=!0;return}this._lastActive=T(),f.acquireBodyScrollLock(),u()&&document.addEventListener("focusin",this._onFocusIn,!0),this._activeHeadless=!1,this._focusInitialFrame&&p(this._focusInitialFrame),this._focusInitialFrame=w(()=>{this._focusInitialFrame=0,this._focusInitial()})}}_dispatchWithLegacy(t,e,r,s=!1){const a=new CustomEvent(t,{detail:r,bubbles:!0,composed:!0,cancelable:s});this.dispatchEvent(a);const n=new CustomEvent(e,{detail:r,bubbles:!0,composed:!0,cancelable:s});return this.dispatchEvent(n),a}_isTopMost(){if(!this._active)return!1;const t=l._openStack;return t.length>0&&t[t.length-1]===this}_queryPanel(){return this.root.querySelector(".dialog")}_collectFocusable(t){return Array.from(t.querySelectorAll(J)).filter(e=>{if(e.disabled||e.getAttribute("aria-hidden")==="true")return!1;const s=u()?window.getComputedStyle(e):null;return!(s&&(s.display==="none"||s.visibility==="hidden"))})}_focusInitial(){if(!this.open)return;const t=this._queryPanel();if(!t)return;const e=this.initialFocus;if(e){const n=t.querySelector(e);if(n&&typeof n.focus=="function"){n.focus();return}}const r=this._collectFocusable(t),a=r.find(n=>n.hasAttribute("autofocus"))||r[0]||t;!a.hasAttribute("tabindex")&&a===t&&a.setAttribute("tabindex","-1");try{a.focus()}catch{}}_handleTab(t){if(t.key!=="Tab")return;const e=this._queryPanel();if(!e)return;const r=this._collectFocusable(e);if(!r.length){t.preventDefault(),e.focus();return}const s=this.root.activeElement||document.activeElement,a=r[0],n=r[r.length-1];if(t.shiftKey){(s===a||!s||!e.contains(s))&&(t.preventDefault(),n.focus());return}s===n&&(t.preventDefault(),a.focus())}_onFocusIn(t){if(!this.open||!this._isTopMost())return;const e=this._queryPanel();if(!e)return;const r=t.target;(typeof t.composedPath=="function"?t.composedPath():[]).includes(e)||r&&e.contains(r)||this._focusInitial()}_onInput(t){const e=t.target;e&&(e.classList.contains("input")&&(this._inputValue=e.value),e.classList.contains("checkbox-input")&&(this._checked=e.checked),this._dispatchWithLegacy("ui-change","change",{id:this.dialogId||this._uid,inputValue:this._inputValue,checked:this._checked}))}_isInteractionLocked(){return this.state==="loading"&&this.lockWhileLoading}_requestDismiss(t,e){this._isInteractionLocked()||this.close("dismiss",t,e)}_handleConfirm(){const t={id:this.dialogId||this._uid,inputValue:this.getInputValue(),checked:this.getChecked()};this._dispatchWithLegacy("ui-confirm","confirm",t,!0).defaultPrevented||this.close("confirm")}_handleCancel(){this._isInteractionLocked()||this.close("cancel")}_onClick(t){if(!this.open||!this._isTopMost())return;const e=t.target;if(e){if(e.classList.contains("backdrop")&&this.closeOnBackdrop){this._requestDismiss("backdrop");return}if(e.closest(".close")){this._requestDismiss("close-icon");return}if(e.closest(".btn-confirm")){this._handleConfirm();return}e.closest(".btn-cancel")&&this._handleCancel()}}_onKeyDown(t){if(!(!this.open||!this._isTopMost())){if(t.key==="Escape"){if(!this.closeOnEsc)return;t.preventDefault(),t.stopPropagation(),this._requestDismiss("esc");return}this._handleTab(t)}}_syncHostSemantics(t,e="",r=!1){if(!t){this.getAttribute("aria-hidden")!=="true"&&this.setAttribute("aria-hidden","true"),this.hasAttribute(c)&&(this.removeAttribute("aria-label"),this.removeAttribute(c));return}if(this.hasAttribute("aria-hidden")&&this.removeAttribute("aria-hidden"),r){this.hasAttribute(c)&&this.removeAttribute(c);return}this.getAttribute("aria-label")!==e&&this.setAttribute("aria-label",e),this.hasAttribute(c)||this.setAttribute(c,"")}render(){if(!this.open){this._syncHostSemantics(!1);const y=this.root.querySelector(".backdrop");if(this._presented&&y){this._presented=!1,y.removeAttribute("data-instant"),this._finishClose=L.closeOverlay(y,()=>{this._finishClose=null,this.setContent("")});return}if(this._finishClose)return;this.setContent("");return}this._finishClose?.(),this._finishClose=null;const t=this._config.title??this.getAttribute("title")??"",e=this._config.description??this.getAttribute("description")??"",r=this._config.confirmText??this.getAttribute("confirm-text")??"Confirm",s=this._config.cancelText??this.getAttribute("cancel-text")??"Cancel",a=this._config.loadingText??this.getAttribute("loading-text")??"Working...",n=!!this._config.input?.enabled,B=this._config.input?.label||"Value",$=this._config.input?.placeholder||"",q=!!this._config.input?.required,M=!!this._config.checkbox?.enabled,O=this._config.checkbox?.label||"Remember this choice",D=this.state,m=this._runtimeError||this._config.errorMessage||this.getAttribute("error-message")||"",A=`ui-alert-title-${this._uid}`,z=`ui-alert-description-${this._uid}`,F=`ui-alert-error-${this._uid}`,H=!!this.querySelector('[slot="title"]'),V=!!this.querySelector('[slot="description"]'),R=!!this.querySelector('[slot="icon"]'),W=!!this.querySelector('[slot="footer"]'),P=!!this.querySelector('[slot="content"]'),v=H||!!t,x=V||!!e,j=R||v||x,K=this._config.showCancel??this.dismissible,Y=this._config.showClose??this.dismissible,N=this.tone,_=this.hasAttribute(c)?"":this.getAttribute("aria-label")||"",C=this.getAttribute("aria-labelledby")||"",E=this.getAttribute("aria-describedby")||"",k=C||(v?A:""),S=_||(k?"":t||e||"Dialog"),U=(this.querySelector('[slot="title"]')?.textContent||"").replace(/\s+/g," ").trim();this._syncHostSemantics(!0,_||U||t||e||"Dialog",!!_||!!C);const d=[];E?d.push(E):(x&&d.push(z),m&&d.push(F));const h=D==="loading";this.setContent(`
+      <style>${G}</style>
+      <div class="backdrop" part="backdrop" role="presentation" data-open="${String(this.open)}" data-state="open" ${this._presented?"data-instant":""}>
         <section
           class="dialog"
           part="dialog"
-          role="${a(this.roleType)}"
+          role="${o(this.roleType)}"
           aria-modal="true"
-          ${I?`aria-label="${a(I)}"`:""}
-          ${k?`aria-labelledby="${a(k)}"`:""}
-          ${d.length?`aria-describedby="${a(d.join(" "))}"`:""}
+          ${S?`aria-label="${o(S)}"`:""}
+          ${k?`aria-labelledby="${o(k)}"`:""}
+          ${d.length?`aria-describedby="${o(d.join(" "))}"`:""}
           tabindex="-1"
         >
-          ${P?`<button class="close" part="close" aria-label="Close dialog">
+          ${Y?`<button class="close" part="close" aria-label="Close dialog">
                 <svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
                   <path d="m6 6 8 8M14 6l-8 8"></path>
                 </svg>
               </button>`:""}
 
-          ${R?`<header class="header">
+          ${j?`<header class="header">
                 <div class="header-main">
                   <span class="icon-wrap" part="icon-wrap" aria-hidden="true">
                     <span class="icon" part="icon">
-                      <slot name="icon">${it(j)}</slot>
+                      <slot name="icon">${ot(N)}</slot>
                     </span>
                   </span>
                   <div class="heading">
-                    ${v?`<h2 id="${w}" class="title" part="title"><slot name="title">${a(t)}</slot></h2>`:""}
-                    ${x?`<p id="${A}" class="description" part="description"><slot name="description">${a(e)}</slot></p>`:""}
+                    ${v?`<h2 id="${A}" class="title" part="title"><slot name="title">${o(t)}</slot></h2>`:""}
+                    ${x?`<p id="${z}" class="description" part="description"><slot name="description">${o(e)}</slot></p>`:""}
                   </div>
                 </div>
               </header>`:""}
 
           <div class="content" part="content">
-            ${V?'<slot name="content"></slot>':"<slot></slot>"}
+            ${P?'<slot name="content"></slot>':"<slot></slot>"}
 
             ${n?`<label class="input-wrap">
-                  <span class="label">${a(C)}</span>
+                  <span class="label">${o(B)}</span>
                   <input
                     class="input"
                     part="input"
                     type="text"
-                    value="${a(this.getInputValue())}"
-                    placeholder="${a(L)}"
-                    ${B?"required":""}
+                    value="${o(this.getInputValue())}"
+                    placeholder="${o($)}"
+                    ${q?"required":""}
                     ${h?"disabled":""}
                   />
                 </label>`:""}
 
-            ${T?`<label class="checkbox" part="checkbox">
+            ${M?`<label class="checkbox" part="checkbox">
                   <span class="checkbox-line">
                     <input class="checkbox-input" type="checkbox" ${this.getChecked()?"checked":""} ${h?"disabled":""} />
-                    <span>${a($)}</span>
+                    <span>${o(O)}</span>
                   </span>
                 </label>`:""}
           </div>
 
-          <div class="error" id="${F}" part="error" aria-live="polite" data-empty="${String(!m)}">${a(m)}</div>
+          <div class="error" id="${F}" part="error" aria-live="polite" data-empty="${String(!m)}">${o(m)}</div>
 
           <footer class="footer" part="footer">
-            ${h?`<span class="loading"><span class="spinner" aria-hidden="true"></span><span>${a(o)}</span></span>`:'<span aria-hidden="true"></span>'}
+            ${h?`<span class="loading"><span class="spinner" aria-hidden="true"></span><span>${o(a)}</span></span>`:'<span aria-hidden="true"></span>'}
 
-            ${H?'<slot name="footer"></slot>':`${W?`<button class="btn btn-cancel" part="cancel" type="button" ${h?"disabled":""}>${a(s)}</button>`:""}
-                 <button class="btn btn-confirm" part="confirm" type="button" ${h?"disabled":""}>${a(r)}</button>`}
+            ${W?'<slot name="footer"></slot>':`${K?`<button class="btn btn-cancel" part="cancel" type="button" ${h?"disabled":""}>${o(s)}</button>`:""}
+                 <button class="btn btn-confirm" part="confirm" type="button" ${h?"disabled":""}>${o(r)}</button>`}
           </footer>
         </section>
       </div>
-    `)}};l._openStack=[];let f=l;typeof customElements<"u"&&!customElements.get("ui-alert-dialog")&&customElements.define("ui-alert-dialog",f);exports.UIAlertDialog=f;
+    `);const I=this.root.querySelector(".backdrop");I&&!this.headless&&L.liftToTopLayer(I,{resetBox:!1}),this._presented=!0}};l._openStack=[];let g=l;typeof customElements<"u"&&!customElements.get("ui-alert-dialog")&&customElements.define("ui-alert-dialog",g);exports.UIAlertDialog=g;