@editora/ui-core 0.1.9 → 0.1.12

package/dist/alert-dialog.cjs.js

@@ -0,0 +1,567 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const Z=require("./ElementBase-1b301e7f.js"),h=require("./scroll-lock-48793569.js"),G=`
+  :host {
+    display: block;
+    color-scheme: light dark;
+    --ui-alert-radius: var(--base-alert-dialog-radius, var(--ui-radius, 4px));
+    --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));
+    --ui-alert-muted: color-mix(in srgb, var(--ui-alert-text) 62%, var(--ui-color-muted, var(--ui-muted, #646464)) 38%);
+    --ui-alert-accent: var(--ui-color-muted, #64748b);
+    --ui-alert-border-color: color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 82%, transparent);
+    --ui-alert-border: var(--base-alert-dialog-border, 1px solid var(--ui-alert-border-color));
+    --ui-alert-shadow: var(--base-alert-dialog-shadow, var(--shadow-4, none));
+    --ui-alert-padding: var(--base-alert-dialog-padding, 20px);
+    --ui-alert-gap: var(--base-alert-dialog-gap, var(--ui-default-gap, 8px));
+    --ui-alert-min-width: var(--base-alert-dialog-min-width, 360px);
+    --ui-alert-max-width: var(--base-alert-dialog-max-width, min(90vw, 560px));
+    --ui-alert-z: 1301;
+    --ui-alert-backdrop-z: 1300;
+    --ui-alert-focus: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    --ui-alert-danger: var(--ui-color-danger, #dc2626);
+    --ui-alert-backdrop: var(--base-alert-dialog-backdrop, var(--color-overlay, rgba(2, 6, 23, 0.52)));
+    --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);
+    --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);
+    --ui-alert-duration: 180ms;
+    --ui-alert-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
+    --ui-alert-title-size: var(--ui-default-font-size, 14px);
+    --ui-alert-title-line-height: var(--ui-default-line-height, 20px);
+    --ui-alert-title-weight: 650;
+    --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);
+  }
+
+  :host([tone='info']) {
+    --ui-alert-accent: var(--ui-color-primary, #2563eb);
+  }
+
+  :host([tone='success']) {
+    --ui-alert-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone='warning']) {
+    --ui-alert-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone='danger']) {
+    --ui-alert-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([size='sm']),
+  :host([size='1']) {
+    --ui-alert-padding: 16px;
+    --ui-alert-gap: 10px;
+    --ui-alert-min-width: 300px;
+    --ui-alert-max-width: min(88vw, 440px);
+    --ui-alert-title-size: 13px;
+    --ui-alert-title-line-height: 18px;
+    --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);
+  }
+
+  :host([size='md']),
+  :host([size='2']) {
+    --ui-alert-padding: var(--base-alert-dialog-padding, 20px);
+    --ui-alert-gap: var(--base-alert-dialog-gap, var(--ui-default-gap, 8px));
+  }
+
+  :host([size='lg']),
+  :host([size='3']) {
+    --ui-alert-padding: 24px;
+    --ui-alert-gap: 14px;
+    --ui-alert-min-width: 420px;
+    --ui-alert-max-width: min(92vw, 680px);
+    --ui-alert-title-size: 16px;
+    --ui-alert-title-line-height: 24px;
+    --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);
+  }
+
+  :host([variant='outline']) {
+    --ui-alert-bg: color-mix(in srgb, var(--ui-alert-bg-base) 86%, transparent);
+    --ui-alert-border: 1px solid color-mix(in srgb, var(--ui-alert-accent) 30%, var(--ui-alert-border-color));
+    --ui-alert-shadow: none;
+  }
+
+  :host([variant='soft']) {
+    --ui-alert-bg: color-mix(in srgb, var(--ui-alert-accent) 8%, var(--ui-alert-bg-base));
+    --ui-alert-border: 1px solid color-mix(in srgb, var(--ui-alert-accent) 16%, var(--ui-alert-border-color));
+  }
+
+  :host([variant='solid']) {
+    --ui-alert-bg: var(--ui-alert-accent);
+    --ui-alert-border: 1px solid color-mix(in srgb, #000000 16%, transparent);
+    --ui-alert-text: #ffffff;
+    --ui-alert-muted: color-mix(in srgb, #ffffff 78%, transparent);
+    --ui-alert-btn-bg: color-mix(in srgb, #ffffff 16%, transparent);
+    --ui-alert-btn-border: color-mix(in srgb, #ffffff 22%, transparent);
+    --ui-alert-btn-hover: color-mix(in srgb, #ffffff 24%, transparent);
+    --ui-alert-confirm-bg: color-mix(in srgb, #000000 22%, transparent);
+    --ui-alert-confirm-color: #ffffff;
+    --ui-alert-icon-bg: color-mix(in srgb, #ffffff 18%, transparent);
+    --ui-alert-icon-color: #ffffff;
+  }
+
+  :host([elevation='none']) {
+    --ui-alert-shadow: none;
+  }
+
+  :host([elevation='low']) {
+    --ui-alert-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 22px rgba(15, 23, 42, 0.09);
+  }
+
+  :host([elevation='high']) {
+    --ui-alert-shadow: 0 2px 10px rgba(15, 23, 42, 0.08), 0 26px 54px rgba(15, 23, 42, 0.16);
+  }
+
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: var(--ui-alert-backdrop-z);
+    display: grid;
+    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);
+  }
+
+  .dialog {
+    position: relative;
+    z-index: var(--ui-alert-z);
+    min-width: var(--ui-alert-min-width);
+    max-width: var(--ui-alert-max-width);
+    box-sizing: border-box;
+    border-radius: var(--ui-alert-radius);
+    border: 1px solid var(--ui-alert-border);
+    background: var(--ui-alert-bg);
+    color: var(--ui-alert-text);
+    box-shadow: var(--ui-alert-shadow);
+    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);
+  }
+
+  .dialog::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 3px;
+    background: linear-gradient(
+      180deg,
+      var(--ui-alert-accent) 0%,
+      color-mix(in srgb, var(--ui-alert-accent) 74%, #0f172a) 100%
+    );
+    pointer-events: none;
+  }
+
+  :host([indicator='none']) .dialog::before {
+    display: none;
+  }
+
+  .backdrop[data-open='true'] {
+    opacity: 1;
+  }
+
+  .backdrop[data-open='true'] .dialog {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  .dialog:focus-visible {
+    box-shadow:
+      0 0 0 2px color-mix(in srgb, var(--ui-alert-focus) 22%, transparent),
+      var(--ui-alert-shadow);
+    border-color: color-mix(in srgb, var(--ui-alert-focus) 45%, var(--ui-alert-border));
+  }
+
+  .header {
+    display: grid;
+    gap: var(--base-alert-dialog-header-gap, 10px);
+    padding-inline-end: 40px;
+    margin-bottom: 14px;
+  }
+
+  .header-main {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+    gap: 10px;
+  }
+
+  .icon-wrap {
+    width: var(--ui-alert-icon-size);
+    min-width: var(--ui-alert-icon-size);
+    height: var(--ui-alert-icon-size);
+    border-radius: 999px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--ui-alert-icon-bg);
+    color: var(--ui-alert-icon-color);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-alert-accent) 28%, transparent);
+  }
+
+  .icon {
+    width: 16px;
+    min-width: 16px;
+    height: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .heading {
+    min-width: 0;
+    display: grid;
+    gap: 6px;
+  }
+
+  .title {
+    margin: 0;
+    font-size: var(--ui-alert-title-size);
+    line-height: var(--ui-alert-title-line-height);
+    font-weight: var(--ui-alert-title-weight);
+    letter-spacing: var(--ui-default-letter-spacing, 0em);
+  }
+
+  .description {
+    margin: 0;
+    font-size: var(--ui-alert-description-size);
+    line-height: var(--ui-alert-description-line-height);
+    color: var(--ui-alert-muted);
+  }
+
+  .close {
+    position: absolute;
+    top: 10px;
+    inset-inline-end: 10px;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    background: color-mix(in srgb, var(--ui-alert-text) 12%, transparent);
+    color: inherit;
+    display: inline-grid;
+    place-items: center;
+    transition:
+      background var(--ui-alert-duration) var(--ui-alert-easing),
+      transform 120ms ease;
+    line-height: 1;
+  }
+
+  .close:hover {
+    background: color-mix(in srgb, var(--ui-alert-text) 20%, transparent);
+  }
+
+  .close:active {
+    transform: translateY(1px);
+  }
+
+  .close:focus-visible,
+  .btn:focus-visible,
+  .input:focus-visible {
+    outline: 2px solid var(--ui-alert-focus);
+    outline-offset: 1px;
+  }
+
+  .content {
+    display: grid;
+    gap: max(12px, var(--ui-alert-gap));
+  }
+
+  .input-wrap,
+  .checkbox {
+    display: grid;
+    gap: 6px;
+  }
+
+  .label {
+    font-size: 12px;
+    font-weight: 600;
+    color: color-mix(in srgb, var(--ui-alert-text) 82%, transparent);
+  }
+
+  .input {
+    width: 100%;
+    border-radius: var(--ui-radius, 4px);
+    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);
+    padding: 9px 12px;
+    font: inherit;
+    line-height: 1.35;
+  }
+
+  .checkbox-line {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    color: color-mix(in srgb, var(--ui-alert-text) 84%, transparent);
+  }
+
+  .error {
+    min-height: 18px;
+    font-size: 12px;
+    line-height: 1.35;
+    color: var(--ui-alert-danger);
+  }
+
+  .error[data-empty='true'] {
+    visibility: hidden;
+  }
+
+  .footer {
+    margin-top: 18px;
+    padding-top: 12px;
+    border-top: 1px solid color-mix(in srgb, var(--ui-alert-border) 84%, transparent);
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--base-alert-dialog-footer-gap, 10px);
+  }
+
+  .btn {
+    border: 1px solid var(--ui-alert-btn-border);
+    background: var(--ui-alert-btn-bg);
+    color: inherit;
+    border-radius: var(--ui-alert-button-radius);
+    min-height: var(--ui-alert-button-height);
+    padding: 0 15px;
+    font-size: var(--ui-default-font-size, 14px);
+    line-height: var(--ui-default-line-height, 20px);
+    font-weight: 500;
+    cursor: pointer;
+    transition:
+      background 120ms ease,
+      border-color 120ms ease,
+      color 120ms ease,
+      transform 120ms ease;
+  }
+
+  .btn:hover {
+    background: var(--ui-alert-btn-hover);
+  }
+
+  .btn:active {
+    transform: translateY(1px);
+  }
+
+  .btn-confirm {
+    border-color: color-mix(in srgb, var(--ui-alert-confirm-bg) 64%, var(--ui-alert-btn-border));
+    background: var(--ui-alert-confirm-bg);
+    color: var(--ui-alert-confirm-color);
+  }
+
+  .btn-confirm:hover {
+    background: color-mix(in srgb, var(--ui-alert-confirm-bg) 88%, #000000 12%);
+  }
+
+  :host([state='loading']) .btn,
+  :host([state='loading']) .input,
+  :host([state='loading']) .close {
+    opacity: 0.72;
+  }
+
+  .loading {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: color-mix(in srgb, var(--ui-alert-text) 75%, transparent);
+    margin-inline-end: auto;
+  }
+
+  .spinner {
+    width: 13px;
+    height: 13px;
+    border-radius: 999px;
+    border: 2px solid color-mix(in srgb, var(--ui-alert-text) 30%, transparent);
+    border-top-color: color-mix(in srgb, var(--ui-alert-text) 80%, transparent);
+    animation: ui-alert-spin 720ms linear infinite;
+  }
+
+  :host([headless]) .backdrop {
+    position: static;
+    inset: auto;
+    z-index: auto;
+    display: block;
+    background: transparent;
+    backdrop-filter: none;
+    opacity: 1;
+    transition: none;
+  }
+
+  :host([headless]) .dialog {
+    position: relative;
+    z-index: auto;
+    min-width: 0;
+    max-width: 100%;
+    margin: 0;
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+
+  @media (max-width: 720px) {
+    :host {
+      --ui-alert-min-width: 0;
+      --ui-alert-max-width: calc(100vw - 16px);
+      --ui-alert-padding: 16px;
+    }
+
+    .header {
+      margin-bottom: 12px;
+    }
+  }
+
+  @keyframes ui-alert-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .backdrop,
+    .dialog,
+    .btn,
+    .spinner {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .dialog {
+      border-width: 2px;
+      box-shadow: none;
+    }
+
+    .btn,
+    .input {
+      border-width: 2px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-alert-bg: Canvas;
+      --ui-alert-text: CanvasText;
+      --ui-alert-muted: CanvasText;
+      --ui-alert-border: CanvasText;
+      --ui-alert-shadow: none;
+      --ui-alert-backdrop: rgba(0, 0, 0, 0.72);
+      --ui-alert-focus: Highlight;
+      --ui-alert-btn-bg: ButtonFace;
+      --ui-alert-btn-border: ButtonText;
+      --ui-alert-btn-hover: ButtonFace;
+      --ui-alert-confirm-bg: Highlight;
+      --ui-alert-confirm-color: HighlightText;
+      --ui-alert-danger: Mark;
+    }
+
+    .dialog,
+    .btn,
+    .icon-wrap,
+    .close,
+    .input {
+      forced-color-adjust: none;
+      box-shadow: none;
+    }
+
+    .icon-wrap {
+      background: Canvas;
+      color: CanvasText;
+      border: 1px solid CanvasText;
+    }
+  }
+`,J='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function p(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 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, 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 st=new Set(["tone","size","variant","elevation","indicator","radius"]);function at(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 l(){return typeof window<"u"&&typeof document<"u"}function S(){if(!l())return null;const i=document.activeElement;return i instanceof HTMLElement?i:null}const I=class c 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._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._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 p(this.getAttribute("dismissible"),!0)}set dismissible(t){this.setAttribute("dismissible",String(t))}get closeOnEsc(){return p(this.getAttribute("close-on-esc"),this.dismissible)}set closeOnEsc(t){this.setAttribute("close-on-esc",String(t))}get closeOnBackdrop(){return p(this.getAttribute("close-on-backdrop"),this.dismissible)}set closeOnBackdrop(t){this.setAttribute("close-on-backdrop",String(t))}get lockWhileLoading(){return p(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){var e,r;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=((e=this._config.input)==null?void 0:e.value)??this._inputValue,this._checked=((r=this._config.checkbox)==null?void 0:r.checked)??this._checked,this._runtimeError=this._config.errorMessage||"",this._syncVisualTokens(),this.requestRender()}getInputValue(){const t=this.root.querySelector(".input");return(t==null?void 0:t.value)??this._inputValue}setInputValue(t){this._inputValue=t;const e=this.root.querySelector(".input");e&&(e.value=t)}getChecked(){const t=this.root.querySelector(".checkbox-input");return(t==null?void 0:t.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,c._openStack.includes(this)||c._openStack.push(this),this._lastActive=this.headless?null:S(),this.headless||h.acquireBodyScrollLock(),l()&&!this.headless&&document.addEventListener("focusin",this._onFocusIn,!0);const t=this.dialogId||this._uid;this._dispatchWithLegacy("ui-open","open",{id:t}),this.headless||setTimeout(()=>{this._focusInitial()},0),this.requestRender()}_deactivate(){if(!this._active)return;this._active=!1;const t=c._openStack.lastIndexOf(this);if(t>=0&&c._openStack.splice(t,1),l()&&!this._activeHeadless&&document.removeEventListener("focusin",this._onFocusIn,!0),this._activeHeadless||h.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&&setTimeout(()=>{try{e.focus()}catch{}},0),this._activeHeadless=!1,this.requestRender()}_syncActiveEnvironment(){if(this._active&&this.headless!==this._activeHeadless){if(this.headless){l()&&document.removeEventListener("focusin",this._onFocusIn,!0),h.releaseBodyScrollLock(),this._lastActive=null,this._activeHeadless=!0;return}this._lastActive=S(),h.acquireBodyScrollLock(),l()&&document.addEventListener("focusin",this._onFocusIn,!0),this._activeHeadless=!1,setTimeout(()=>{this._focusInitial()},0)}}_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=c._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=l()?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)}}render(){var w,A,z,E,C,L;if(!this.open){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=!!((w=this._config.input)!=null&&w.enabled),$=((A=this._config.input)==null?void 0:A.label)||"Value",T=((z=this._config.input)==null?void 0:z.placeholder)||"",q=!!((E=this._config.input)!=null&&E.required),F=!!((C=this._config.checkbox)!=null&&C.enabled),D=((L=this._config.checkbox)==null?void 0:L.label)||"Remember this choice",M=this.state,g=this._runtimeError||this._config.errorMessage||this.getAttribute("error-message")||"",m=`ui-alert-title-${this._uid}`,x=`ui-alert-description-${this._uid}`,_=`ui-alert-error-${this._uid}`,O=!!this.querySelector('[slot="title"]'),V=!!this.querySelector('[slot="description"]'),H=!!this.querySelector('[slot="icon"]'),W=!!this.querySelector('[slot="footer"]'),P=!!this.querySelector('[slot="content"]'),b=O||!!t,f=V||!!e,R=H||b||f,j=this._config.showCancel??this.dismissible,K=this._config.showClose??this.dismissible,U=this.tone,Y=this.getAttribute("aria-label")||"",N=this.getAttribute("aria-labelledby")||"",k=this.getAttribute("aria-describedby")||"",v=N||(b?m:""),y=Y||(v?"":t||e||"Dialog"),u=[];k?u.push(k):(f&&u.push(x),g&&u.push(_));const d=M==="loading";this.setContent(`
+      <style>${G}</style>
+      <div class="backdrop" part="backdrop" role="presentation" data-open="${String(this.open)}">
+        <section
+          class="dialog"
+          part="dialog"
+          role="${a(this.roleType)}"
+          aria-modal="true"
+          ${y?`aria-label="${a(y)}"`:""}
+          ${v?`aria-labelledby="${a(v)}"`:""}
+          ${u.length?`aria-describedby="${a(u.join(" "))}"`:""}
+          tabindex="-1"
+        >
+          ${K?`<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">
+                <div class="header-main">
+                  <span class="icon-wrap" part="icon-wrap" aria-hidden="true">
+                    <span class="icon" part="icon">
+                      <slot name="icon">${at(U)}</slot>
+                    </span>
+                  </span>
+                  <div class="heading">
+                    ${b?`<h2 id="${m}" class="title" part="title"><slot name="title">${a(t)}</slot></h2>`:""}
+                    ${f?`<p id="${x}" class="description" part="description"><slot name="description">${a(e)}</slot></p>`:""}
+                  </div>
+                </div>
+              </header>`:""}
+
+          <div class="content" part="content">
+            ${P?'<slot name="content"></slot>':"<slot></slot>"}
+
+            ${n?`<label class="input-wrap">
+                  <span class="label">${a($)}</span>
+                  <input
+                    class="input"
+                    part="input"
+                    type="text"
+                    value="${a(this.getInputValue())}"
+                    placeholder="${a(T)}"
+                    ${q?"required":""}
+                    ${d?"disabled":""}
+                  />
+                </label>`:""}
+
+            ${F?`<label class="checkbox" part="checkbox">
+                  <span class="checkbox-line">
+                    <input class="checkbox-input" type="checkbox" ${this.getChecked()?"checked":""} ${d?"disabled":""} />
+                    <span>${a(D)}</span>
+                  </span>
+                </label>`:""}
+          </div>
+
+          <div class="error" id="${_}" part="error" aria-live="polite" data-empty="${String(!g)}">${a(g)}</div>
+
+          <footer class="footer" part="footer">
+            ${d?`<span class="loading"><span class="spinner" aria-hidden="true"></span><span>${a(o)}</span></span>`:'<span aria-hidden="true"></span>'}
+
+            ${W?'<slot name="footer"></slot>':`${j?`<button class="btn btn-cancel" part="cancel" type="button" ${d?"disabled":""}>${a(s)}</button>`:""}
+                 <button class="btn btn-confirm" part="confirm" type="button" ${d?"disabled":""}>${a(r)}</button>`}
+          </footer>
+        </section>
+      </div>
+    `)}};I._openStack=[];let B=I;typeof customElements<"u"&&!customElements.get("ui-alert-dialog")&&customElements.define("ui-alert-dialog",B);exports.UIAlertDialog=B;