@editora/ui-core 0.1.8 → 0.1.10

package/dist/alert-dialog.esm.js

@@ -0,0 +1,1043 @@
+import { E as Z } from "./ElementBase-909688f3.mjs";
+import { a as L, r as I } from "./scroll-lock-9de6d328.mjs";
+const 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 h(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 = /* @__PURE__ */ 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 $ = class c extends Z {
+  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 h(this.getAttribute("dismissible"), !0);
+  }
+  set dismissible(t) {
+    this.setAttribute("dismissible", String(t));
+  }
+  get closeOnEsc() {
+    return h(this.getAttribute("close-on-esc"), this.dismissible);
+  }
+  set closeOnEsc(t) {
+    this.setAttribute("close-on-esc", String(t));
+  }
+  get closeOnBackdrop() {
+    return h(this.getAttribute("close-on-backdrop"), this.dismissible);
+  }
+  set closeOnBackdrop(t) {
+    this.setAttribute("close-on-backdrop", String(t));
+  }
+  get lockWhileLoading() {
+    return h(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 || L(), 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 || I(), !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), I(), this._lastActive = null, this._activeHeadless = !0;
+        return;
+      }
+      this._lastActive = S(), L(), 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 y, w, A, z, E, C;
+    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 = !!((y = this._config.input) != null && y.enabled), B = ((w = this._config.input) == null ? void 0 : w.label) || "Value", T = ((A = this._config.input) == null ? void 0 : A.placeholder) || "", q = !!((z = this._config.input) != null && z.required), F = !!((E = this._config.checkbox) != null && E.enabled), D = ((C = this._config.checkbox) == null ? void 0 : C.label) || "Remember this choice", M = this.state, p = this._runtimeError || this._config.errorMessage || this.getAttribute("error-message") || "", v = `ui-alert-title-${this._uid}`, m = `ui-alert-description-${this._uid}`, x = `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"]'), R = !!this.querySelector('[slot="content"]'), g = O || !!t, b = V || !!e, P = H || g || b, j = this._config.showCancel ?? this.dismissible, K = this._config.showClose ?? this.dismissible, Y = this.tone, U = this.getAttribute("aria-label") || "", N = this.getAttribute("aria-labelledby") || "", _ = this.getAttribute("aria-describedby") || "", f = N || (g ? v : ""), k = U || (f ? "" : t || e || "Dialog"), u = [];
+    _ ? u.push(_) : (b && u.push(m), p && u.push(x));
+    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"
+          ${k ? `aria-label="${a(k)}"` : ""}
+          ${f ? `aria-labelledby="${a(f)}"` : ""}
+          ${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>` : ""}
+
+          ${P ? `<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(Y)}</slot>
+                    </span>
+                  </span>
+                  <div class="heading">
+                    ${g ? `<h2 id="${v}" class="title" part="title"><slot name="title">${a(t)}</slot></h2>` : ""}
+                    ${b ? `<p id="${m}" class="description" part="description"><slot name="description">${a(e)}</slot></p>` : ""}
+                  </div>
+                </div>
+              </header>` : ""}
+
+          <div class="content" part="content">
+            ${R ? '<slot name="content"></slot>' : "<slot></slot>"}
+
+            ${n ? `<label class="input-wrap">
+                  <span class="label">${a(B)}</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="${x}" part="error" aria-live="polite" data-empty="${String(!p)}">${a(p)}</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>
+    `);
+  }
+};
+$._openStack = [];
+let ot = $;
+typeof customElements < "u" && !customElements.get("ui-alert-dialog") && customElements.define("ui-alert-dialog", ot);
+export {
+  ot as UIAlertDialog
+};