@helixui/library 3.3.1 → 3.4.0-next.121

package/dist/shared/hx-dialog-AOZpHSuF.js

@@ -0,0 +1,717 @@
+import { css as I, nothing as S, html as m } from "lit";
+import { query as H, state as k, property as p, customElement as R } from "lit/decorators.js";
+import { l as N, u as F } from "./body-scroll-lock-VBa5TFP-.js";
+import { a as $ } from "./forced-colors-CTEDFRGa.js";
+import { f as D } from "./aria-flatten-DY6v2vah.js";
+import { s as M, i as z, r as L } from "./aria-idref-CxvyzfQS.js";
+import { H as j } from "./helix-element-BNEYeiys.js";
+import { c as V } from "./id-counter-DuX8vsui.js";
+const U = I`
+  :host {
+    display: contents;
+  }
+
+  /* ─── Native dialog reset ─── */
+
+  dialog {
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: inherit;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: visible;
+    /* D5 — ensure native dialog element renders above the non-modal backdrop sibling */
+    position: relative;
+    z-index: calc(var(--hx-z-index-modal, 1400) + 1);
+  }
+
+  /* ─── Dialog container ─── */
+
+  .dialog {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    background-color: var(--hx-dialog-bg, var(--hx-color-surface-default, #ffffff));
+    color: var(--hx-dialog-color, var(--hx-color-text-primary, #0d1825));
+    border-radius: var(--hx-dialog-border-radius, var(--hx-border-radius-lg, 0.5rem));
+    box-shadow: var(--hx-dialog-shadow, var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1)));
+    width: var(--hx-dialog-width, var(--hx-container-narrow, 32rem));
+    max-width: calc(100vw - var(--hx-space-8, 2rem));
+    max-height: calc(100vh - var(--hx-space-8, 2rem));
+    overflow: hidden;
+    outline: none;
+
+    /* Open/close animation */
+    opacity: 0;
+    transform: translateY(var(--hx-space-4, 1rem)) scale(0.97);
+    transition:
+      opacity var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out),
+      transform var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out);
+  }
+
+  dialog[open] .dialog {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dialog {
+      transition: none;
+    }
+
+    .dialog__close-btn {
+      transition: none;
+    }
+  }
+
+  /* ─── Native backdrop (modal mode) ─── */
+
+  dialog::backdrop {
+    background-color: var(
+      --hx-dialog-backdrop-color,
+      var(--hx-color-surface-overlay, rgba(0, 0, 0, 0.75))
+    );
+    opacity: 0;
+    transition: opacity var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out);
+  }
+
+  dialog[open]::backdrop {
+    opacity: var(--hx-dialog-backdrop-opacity, 0.5);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    dialog::backdrop {
+      transition: none;
+    }
+  }
+
+  /* ─── Non-modal backdrop overlay ─── */
+
+  .dialog-backdrop {
+    position: fixed;
+    inset: 0;
+    background-color: var(
+      --hx-dialog-backdrop-color,
+      var(--hx-color-surface-overlay, rgba(0, 0, 0, 0.75))
+    );
+    opacity: var(--hx-dialog-backdrop-opacity, 0.5);
+    /* D5 — backdrop z-index must be lower than the dialog element's z-index */
+    z-index: var(--hx-z-index-modal, 1400);
+  }
+
+  /* ─── Header ─── */
+
+  .dialog__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--hx-dialog-header-padding, var(--hx-space-5, 1.25rem) var(--hx-space-6, 1.5rem));
+    border-bottom: var(--hx-border-width-thin, 1px) solid
+      var(--hx-dialog-header-border-color, var(--hx-color-border-default, #d6dbd5));
+    gap: var(--hx-space-4, 1rem);
+    flex-shrink: 0;
+  }
+
+  .dialog__heading {
+    margin: 0;
+    font-family: var(--hx-dialog-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-font-size-lg, 1.125rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    line-height: var(--hx-line-height-tight, 1.25);
+    color: var(--hx-dialog-heading-color, var(--hx-color-text-primary, #0d1825));
+    flex: 1 1 auto;
+  }
+
+  /* ─── Built-in close button (D17) ─── */
+
+  .dialog__close-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    width: var(--hx-touch-target-min, 2.75rem);
+    height: var(--hx-touch-target-min, 2.75rem);
+    padding: 0;
+    margin-inline-start: auto;
+    background: transparent;
+    border: none;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    cursor: pointer;
+    color: var(--hx-dialog-close-btn-color, var(--hx-color-text-muted, #4a5362));
+    font-size: var(--hx-font-size-xl, 1.25rem);
+    line-height: 1; /* intentional literal: icon button needs line-height 1; no token maps to exactly 1 */
+    transition:
+      color var(--hx-duration-fast, 100ms) ease,
+      background-color var(--hx-duration-fast, 100ms) ease;
+  }
+
+  .dialog__close-btn::before {
+    content: '×';
+  }
+
+  .dialog__close-btn:hover {
+    color: var(--hx-dialog-close-btn-hover-color, var(--hx-color-text-primary, #0d1825));
+    background-color: var(--hx-dialog-close-btn-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
+  }
+
+  .dialog__close-btn:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-dialog-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Body ─── */
+
+  .dialog__body {
+    flex: 1 1 auto;
+    padding: var(--hx-dialog-body-padding, var(--hx-space-6, 1.5rem));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  /* ─── Footer ─── */
+
+  .dialog__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--hx-space-3, 0.75rem);
+    padding: var(--hx-dialog-footer-padding, var(--hx-space-4, 1rem) var(--hx-space-6, 1.5rem));
+    border-top: var(--hx-border-width-thin, 1px) solid
+      var(--hx-dialog-footer-border-color, var(--hx-color-border-default, #d6dbd5));
+    flex-shrink: 0;
+  }
+
+  /* ─── Visually-hidden description (D8) ─── */
+
+  .dialog__description {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
+
+  @media (forced-colors: active) {
+    .dialog {
+      border: 1px solid CanvasText;
+    }
+
+    .dialog__header {
+      border-bottom-color: CanvasText;
+    }
+
+    .dialog__footer {
+      border-top-color: CanvasText;
+    }
+
+    .dialog__close-btn {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+  }
+`;
+var q = Object.defineProperty, G = Object.getOwnPropertyDescriptor, c = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? G(t, i) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (a = (r ? o(t, i, a) : o(a)) || a);
+  return r && a && q(t, i, a), a;
+};
+const P = V("hx-dialog"), B = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+  "details > summary"
+].join(",");
+let l = class extends j {
+  constructor() {
+    super(...arguments), this._hasHeaderSlot = !1, this._hasFooterSlot = !1, this._cachedFocusableElements = [], this._isTransitioning = !1, this._transitionFallbackTimer = null, this._triggerElement = null, this._pendingReturnValue = void 0, this._dialogId = P(), this._headingId = `${this._dialogId}-heading`, this._descriptionId = `${this._dialogId}-description`, this._consumerDescId = `${this._dialogId}-consumer-desc`, this._consumerLabelId = `${this._dialogId}-consumer-label`, this._supportsIdrefRefs = !0, this._slottedHeaderEls = [], this._headerSlotText = "", this._consumerLabelledBy = null, this._consumerDescribedBy = null, this._ariaMirror = null, this._headerSlotTextObserver = null, this._externalRefsObserver = null, this._hostDescribedByObserver = null, this.open = !1, this.modal = !1, this.closeOnBackdrop = !0, this.heading = "", this.variant = "dialog", this.description = "", this.labelClose = "Close dialog", this._handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault(), this._cancel();
+        return;
+      }
+      e.key === "Tab" && this.modal && this._trapFocus(e);
+    }, this._handleDialogClick = (e) => {
+      if (!this.closeOnBackdrop) return;
+      e.target === this._dialogEl && this._cancel();
+    }, this._handleBackdropClick = () => {
+      this.closeOnBackdrop && this._cancel();
+    }, this._handleNativeCancel = (e) => {
+      e.preventDefault();
+    };
+  }
+  // D10 — observe aria-label attribute without shadowing ARIAMixin.ariaLabel
+  static get observedAttributes() {
+    return [...super.observedAttributes, "aria-label"];
+  }
+  /**
+   * Returns the dialog's return value — the string passed to `close(returnValue)`.
+   * Mirrors `HTMLDialogElement.returnValue`.
+   */
+  get returnValue() {
+    var e;
+    return ((e = this._dialogEl) == null ? void 0 : e.returnValue) ?? "";
+  }
+  // ─── Lifecycle ───
+  // D10 — re-render when aria-label attribute changes (without declaring a shadowing property)
+  attributeChangedCallback(e, t, i) {
+    super.attributeChangedCallback(e, t, i), e === "aria-label" && t !== i && this.requestUpdate("aria-label", t);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const e = this.constructor;
+    this._supportsIdrefRefs = e.__testSupportsIdrefRefsOverride !== null ? e.__testSupportsIdrefRefsOverride : M(this._internals), this._hostDescribedByObserver = new MutationObserver((t) => {
+      let i = !1;
+      for (const r of t) {
+        if (r.attributeName !== "aria-describedby") continue;
+        const a = r.oldValue, s = this.getAttribute("aria-describedby");
+        a !== null && s === null && (this._consumerDescribedBy = null, i = !0);
+      }
+      i && this._syncHostAriaSemantics();
+    }), this._hostDescribedByObserver.observe(this, {
+      attributes: !0,
+      attributeFilter: ["aria-describedby"],
+      attributeOldValue: !0
+    }), this._syncHostAriaSemantics(), this._ariaMirror = z(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  firstUpdated() {
+    !this.heading.trim() && this._hasHeaderSlot;
+  }
+  disconnectedCallback() {
+    var e, t, i, r;
+    super.disconnectedCallback(), this._clearTransitionFallback(), this._isTransitioning = !1, this._removeGlobalListeners(), this.modal && this.open && F(), (e = this._ariaMirror) == null || e.disconnect(), this._ariaMirror = null, (t = this._headerSlotTextObserver) == null || t.disconnect(), this._headerSlotTextObserver = null, (i = this._externalRefsObserver) == null || i.disconnect(), this._externalRefsObserver = null, (r = this._hostDescribedByObserver) == null || r.disconnect(), this._hostDescribedByObserver = null;
+  }
+  updated(e) {
+    super.updated(e), e.has("open") && (this.open ? this._openDialog() : this._closeDialog()), this._syncHostAriaSemantics();
+  }
+  // ─── Public Methods ───
+  /** Opens the dialog in the mode determined by the `modal` property. */
+  show() {
+    this.open = !0;
+  }
+  /** Opens the dialog as a modal regardless of the `modal` property setting. */
+  showModal() {
+    this.modal = !0, this.open = !0;
+  }
+  /**
+   * Closes the dialog.
+   * @param returnValue - Optional return value string stored as `dialog.returnValue`.
+   */
+  close(e) {
+    e !== void 0 && (this._pendingReturnValue = e), this.open = !1;
+  }
+  // ─── Private: Open / Close ───
+  /** Clears the fallback timer that releases `_isTransitioning`. @internal */
+  _clearTransitionFallback() {
+    this._transitionFallbackTimer !== null && (clearTimeout(this._transitionFallbackTimer), this._transitionFallbackTimer = null);
+  }
+  /** @internal */
+  _openDialog() {
+    const e = this._dialogEl;
+    if (!e || e.open || this._isTransitioning) return;
+    this._isTransitioning = !0, this._clearTransitionFallback(), this._transitionFallbackTimer = setTimeout(() => {
+      this._transitionFallbackTimer = null, this._isTransitioning = !1;
+    }, 200);
+    const t = document.activeElement;
+    this._triggerElement = t instanceof HTMLElement ? t : null, this.modal ? (e.showModal(), N()) : e.show(), this._addGlobalListeners(), this.updateComplete.then(() => {
+      var i;
+      this._clearTransitionFallback(), this._isTransitioning = !1, this.open && (this._cachedFocusableElements = this._getFocusableElements(), (i = this._cachedFocusableElements[0]) == null || i.focus());
+    }), this.dispatchEvent(
+      new CustomEvent("hx-open", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /** @internal */
+  _closeDialog() {
+    var t;
+    const e = this._dialogEl;
+    if (e) {
+      if (!e.open) {
+        this._clearTransitionFallback(), this._isTransitioning = !1;
+        return;
+      }
+      this._clearTransitionFallback(), this._isTransitioning = !1, this._pendingReturnValue !== void 0 ? (e.close(this._pendingReturnValue), this._pendingReturnValue = void 0) : e.close(), this.modal && F(), this._removeGlobalListeners(), this._cachedFocusableElements = [], (t = this._triggerElement) == null || t.focus(), this._triggerElement = null, this.dispatchEvent(
+        new CustomEvent("hx-close", {
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+  }
+  // ─── Event Listeners ───
+  /** @internal */
+  _addGlobalListeners() {
+    var e, t, i;
+    (e = this._dialogEl) == null || e.addEventListener("keydown", this._handleKeyDown), (t = this._dialogEl) == null || t.addEventListener("click", this._handleDialogClick), (i = this._dialogEl) == null || i.addEventListener("cancel", this._handleNativeCancel);
+  }
+  /** @internal */
+  _removeGlobalListeners() {
+    var e, t, i;
+    (e = this._dialogEl) == null || e.removeEventListener("keydown", this._handleKeyDown), (t = this._dialogEl) == null || t.removeEventListener("click", this._handleDialogClick), (i = this._dialogEl) == null || i.removeEventListener("cancel", this._handleNativeCancel);
+  }
+  // ─── Focus Trap ───
+  /** @internal */
+  _getFocusableElements() {
+    var r, a;
+    const e = ((r = this.shadowRoot) == null ? void 0 : r.querySelectorAll("slot")) ?? [], t = [];
+    e.forEach((s) => {
+      s.assignedElements({ flatten: !0 }).forEach((o) => {
+        o instanceof HTMLElement && (o.matches(B) && t.push(o), o.querySelectorAll(B).forEach((h) => {
+          t.push(h);
+        }));
+      });
+    });
+    const i = t.filter(
+      (s) => !s.hasAttribute("disabled") && s.getAttribute("tabindex") !== "-1"
+    );
+    if (i.length === 0) {
+      const s = (a = this.shadowRoot) == null ? void 0 : a.querySelector(".dialog__close-btn");
+      s && i.push(s);
+    }
+    return i;
+  }
+  /** @internal */
+  _trapFocus(e) {
+    var _, v;
+    const t = this._cachedFocusableElements.length > 0 ? this._cachedFocusableElements : this._getFocusableElements();
+    if (t.length === 0) {
+      e.preventDefault();
+      return;
+    }
+    const [i, ...r] = t, a = r.length > 0 ? r[r.length - 1] : i;
+    if (!i || !a) return;
+    const s = document.activeElement, o = (_ = this.shadowRoot) == null ? void 0 : _.activeElement, h = o ?? s, u = h instanceof HTMLElement ? h : null, g = (v = this.shadowRoot) == null ? void 0 : v.querySelector(".dialog__close-btn");
+    e.shiftKey ? (u === i || g !== null && o === g && i === g) && (e.preventDefault(), a.focus()) : u === a && (e.preventDefault(), i.focus());
+  }
+  // ─── Cancel logic ───
+  /** @internal */
+  _cancel() {
+    this.dispatchEvent(
+      new CustomEvent("hx-cancel", {
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.open = !1;
+  }
+  // ─── Slot change handlers ───
+  /** @internal */
+  _handleHeaderSlotChange(e) {
+    if (!(e.target instanceof HTMLSlotElement)) return;
+    const t = this._readHeaderSlotState(e.target);
+    this._hasHeaderSlot = t.hasUsefulName || t.hasAnyAssigned, this._slottedHeaderEls = t.elements, this._headerSlotText = t.text, this._installHeaderSlotTextObserver(t.elements), this._syncHostAriaSemantics();
+  }
+  /** @internal */
+  _handleFooterSlotChange(e) {
+    const t = e.target;
+    this._hasFooterSlot = t.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  // ─── Host-canonical ARIA helpers ───
+  /**
+   * Reads the header slot's assigned nodes and computes the discriminated
+   * naming state. Aggregates ALL assigned elements (not just the first) so
+   * composed headers project the FULL visible label via
+   * `internals.ariaLabelledByElements`. Per AccName 1.2 §4.3.10,
+   * `aria-hidden="true"` / `[hidden]` elements contribute zero to the
+   * accessible name but stay in `elements` so AT walking IDL refs sees the
+   * full visible group. `hasUsefulName` is gated on the flattened text
+   * length: a slot containing only decorative wrappers does NOT name the
+   * dialog, and the host falls through to the next naming source.
+   *
+   * `hasAnyAssigned` is the legacy semantic kept for the existing dev-warning
+   * + `_renderHeader()` empty-slot flag (the heading / built-in close button
+   * area is rendered regardless of useful-name state when the consumer has
+   * projected SOMETHING into the header slot).
+   * @internal
+   */
+  _readHeaderSlotState(e) {
+    const t = e.assignedNodes({ flatten: !0 }), i = [], r = [];
+    let a = !1;
+    for (const o of t)
+      if (o.nodeType === Node.ELEMENT_NODE) {
+        a = !0;
+        const h = o;
+        if (i.push(h), h.getAttribute("aria-hidden") === "true") continue;
+        const u = D(h);
+        u && r.push(u);
+      } else if (o.nodeType === Node.TEXT_NODE) {
+        const h = (o.textContent ?? "").trim();
+        h && (r.push(h), a = !0);
+      }
+    const s = r.join(" ").replace(/\s+/g, " ").trim();
+    return {
+      hasUsefulName: s.length > 0,
+      hasAnyAssigned: a,
+      elements: i,
+      text: s
+    };
+  }
+  /**
+   * (Re-)installs the mutation observer over the current set of slotted header
+   * elements. On any descendant text/visibility mutation we re-flatten and
+   * re-sync so the host's accessible name tracks the visible header.
+   * @internal
+   */
+  _installHeaderSlotTextObserver(e) {
+    var i;
+    if ((i = this._headerSlotTextObserver) == null || i.disconnect(), e.length === 0) {
+      this._headerSlotTextObserver = null;
+      return;
+    }
+    const t = new MutationObserver(() => {
+      const r = [];
+      for (const s of e) {
+        if (s.getAttribute("aria-hidden") === "true") continue;
+        const o = D(s);
+        o && r.push(o);
+      }
+      const a = r.join(" ").replace(/\s+/g, " ").trim();
+      this._headerSlotText = a, this._syncHostAriaSemantics();
+    });
+    for (const r of e)
+      t.observe(r, {
+        characterData: !0,
+        childList: !0,
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["aria-hidden", "hidden"]
+      });
+    this._headerSlotTextObserver = t;
+  }
+  /**
+   * (Re-)installs a `MutationObserver` against the deduped union of
+   * consumer-resolved label/description elements. Watches `characterData`,
+   * `childList`, `subtree`, and `aria-hidden` / `hidden` attributes so any
+   * in-place mutation on the referenced light-DOM nodes triggers a fresh
+   * sync — keeping the modern-path IDL refs and the fallback-path text
+   * flatten aligned with the live consumer text.
+   * @internal
+   */
+  _installExternalRefsObserver(e) {
+    if (this._externalRefsObserver && (this._externalRefsObserver.disconnect(), this._externalRefsObserver = null), e.length === 0) return;
+    const t = new Set(e), i = new MutationObserver(() => {
+      this._syncHostAriaSemantics();
+    });
+    for (const r of t)
+      i.observe(r, {
+        characterData: !0,
+        subtree: !0,
+        childList: !0,
+        attributes: !0,
+        attributeFilter: ["aria-hidden", "hidden"]
+      });
+    this._externalRefsObserver = i;
+  }
+  /**
+   * Resolves consumer-supplied label/description IDREFs on the host and
+   * projects the canonical dialog ARIA onto **both** surfaces:
+   *
+   *   1. The **host** via `ElementInternals` (modern path) — IDL element
+   *      references that AT honouring the host-internals contract pick up
+   *      across the shadow boundary.
+   *   2. The inner native `<dialog>` via attribute writes — hybrid fallback
+   *      so AT that walks the native dialog first (and ignores host
+   *      `internals.aria*Elements`) still finds an announceable name and
+   *      description.
+   *
+   * Path A native-dialog adaptation: the host does NOT carry `internals.role`
+   * or `internals.ariaModal` — the native `<dialog>` already declares those at
+   * the platform level and rewriting them on the host would create
+   * nested-dialog announcements.
+   *
+   * The inner `<dialog>` keeps `role="alertdialog"` ONLY when `variant ===
+   * 'alertdialog'` (the platform allows overriding the implicit `dialog` role
+   * with the more specific `alertdialog`); otherwise the implicit `dialog`
+   * role wins.
+   *
+   * Naming precedence (W3C AccName 1.2 §4.3.1):
+   *   1. Consumer `aria-labelledby` (resolved IDREFs, text-flattened)
+   *   2. Consumer `aria-label`
+   *   3. Slotted `<slot name="header">` text
+   *   4. `heading` property
+   *   5. Hard-coded `"Dialog"`
+   * @internal
+   */
+  _syncHostAriaSemantics() {
+    var C, O;
+    const e = this._internals, t = this.getAttribute("aria-labelledby");
+    this._consumerLabelledBy = t;
+    const i = this.getAttribute("aria-describedby");
+    this._consumerDescribedBy = i;
+    const r = L(this, this._consumerLabelledBy), a = r.length > 0, s = L(this, this._consumerDescribedBy);
+    this._installExternalRefsObserver([...r, ...s]);
+    const o = (f) => f.getAttribute("aria-hidden") !== "true" && !f.hasAttribute("hidden"), h = this.getAttribute("aria-label"), u = h !== null ? h.trim() : "", g = [];
+    g.push(...r.filter(o)), !a && !u && this._slottedHeaderEls.length > 0 && g.push(...this._slottedHeaderEls.filter(o));
+    const _ = [...s.filter(o)], v = (f) => f.filter(o).map((b) => D(b)).filter((b) => b.length > 0).join(" ");
+    let d = "";
+    if (a && (d = v(r)), !d && u && (d = u), !d && this._headerSlotText && (d = this._headerSlotText), !d && this.heading.trim() && (d = this.heading.trim()), d || (d = "Dialog"), this._supportsIdrefRefs) {
+      const f = e;
+      f.ariaLabelledByElements = g.length > 0 ? g : null, f.ariaDescribedByElements = _.length > 0 ? _ : null, a ? e.ariaLabel = null : e.ariaLabel = d;
+    } else
+      e.ariaLabel = d;
+    const y = ((C = this.shadowRoot) == null ? void 0 : C.getElementById(this._consumerDescId)) ?? null, w = v(s);
+    y && y.textContent !== w && (y.textContent = w);
+    const T = ((O = this.shadowRoot) == null ? void 0 : O.getElementById(this._consumerLabelId)) ?? null;
+    T && T.textContent !== d && (T.textContent = d);
+    const n = this._dialogEl ?? null;
+    if (n) {
+      const f = this.heading.trim().length > 0;
+      let b = null, x = null;
+      a ? b = this._consumerLabelId : this._headerSlotText ? b = this._consumerLabelId : u ? x = u : f ? b = this._headingId : x = d, b ? n.getAttribute("aria-labelledby") !== b && n.setAttribute("aria-labelledby", b) : n.hasAttribute("aria-labelledby") && n.removeAttribute("aria-labelledby"), x ? n.getAttribute("aria-label") !== x && n.setAttribute("aria-label", x) : n.hasAttribute("aria-label") && n.removeAttribute("aria-label");
+      const E = [];
+      this.description && E.push(this._descriptionId), w && y && E.push(this._consumerDescId);
+      const A = E.length > 0 ? E.join(" ") : null;
+      A ? n.getAttribute("aria-describedby") !== A && n.setAttribute("aria-describedby", A) : n.hasAttribute("aria-describedby") && n.removeAttribute("aria-describedby"), this.modal ? n.getAttribute("aria-modal") !== "true" && n.setAttribute("aria-modal", "true") : n.hasAttribute("aria-modal") && n.removeAttribute("aria-modal"), n.hasAttribute("aria-description") && n.removeAttribute("aria-description");
+    }
+  }
+  // ─── Render Helpers ───
+  /** @internal */
+  _renderHeader() {
+    const e = this.heading.trim().length > 0;
+    return m`
+      <div part="header" class="dialog__header">
+        ${e ? m`<h2 id=${this._headingId} class="dialog__heading">${this.heading}</h2>` : S}
+        <slot name="header" @slotchange=${this._handleHeaderSlotChange}></slot>
+        <button
+          part="close-button"
+          class="dialog__close-btn"
+          type="button"
+          aria-label=${this.labelClose}
+          @click=${() => this.close()}
+        ></button>
+      </div>
+    `;
+  }
+  /** @internal */
+  _renderFooter() {
+    return m`
+      <div part="footer" class="dialog__footer" ?hidden=${!this._hasFooterSlot}>
+        <slot name="footer" @slotchange=${this._handleFooterSlotChange}></slot>
+      </div>
+    `;
+  }
+  /** @internal */
+  _renderNonModalBackdrop() {
+    return this.modal || !this.open ? S : m`
+      <div
+        part="backdrop"
+        class="dialog-backdrop"
+        @click=${this._handleBackdropClick}
+        aria-hidden="true"
+      ></div>
+    `;
+  }
+  // D8 — render visually-hidden description for aria-describedby
+  /** @internal */
+  _renderDescription() {
+    return this.description ? m`<span id=${this._descriptionId} class="dialog__description"
+      >${this.description}</span
+    >` : S;
+  }
+  // ─── Render ───
+  render() {
+    return m`
+      ${this._renderNonModalBackdrop()}
+      <dialog role=${this.variant !== "dialog" ? this.variant : S}>
+        <div part="dialog" class="dialog">
+          ${this._renderHeader()} ${this._renderDescription()}
+          <div part="body" class="dialog__body">
+            <slot></slot>
+          </div>
+          ${this._renderFooter()}
+        </div>
+        <!--
+          Synthesized in-shadow span carrying the resolved accessible NAME for
+          the hybrid inner-dialog fallback (consumer aria-labelledby IDREF
+          chain flattened, or consumer aria-label, or slotted header text).
+          The host's \`internals.ariaLabelledByElements\` carries the live IDL
+          refs on the modern path; this span is the same-shadow-root target
+          referenced by the inner native \`<dialog>\`'s \`aria-labelledby\`
+          when the name source lives outside the shadow root. Updated
+          imperatively in \`_syncHostAriaSemantics()\`.
+        -->
+        <span id=${this._consumerLabelId} class="dialog__description" aria-hidden="false"></span>
+        <!--
+          Synthesized in-shadow span carrying consumer-resolved description
+          text. Updated imperatively on every sync. The inner native
+          \`<dialog>\`'s \`aria-describedby\` references this span so
+          cross-shadow consumer descriptions resolve through the standard
+          described-by channel without writing light-DOM ids that cannot
+          resolve from inside a shadow root. \`aria-description\` is
+          intentionally NEVER written — AccName ignores it whenever
+          \`aria-describedby\` is present.
+        -->
+        <span id=${this._consumerDescId} class="dialog__description" aria-hidden="false"></span>
+      </dialog>
+    `;
+  }
+};
+l.styles = [U, $];
+l.__testSupportsIdrefRefsOverride = null;
+c([
+  H("dialog")
+], l.prototype, "_dialogEl", 2);
+c([
+  k()
+], l.prototype, "_hasHeaderSlot", 2);
+c([
+  k()
+], l.prototype, "_hasFooterSlot", 2);
+c([
+  k()
+], l.prototype, "_supportsIdrefRefs", 2);
+c([
+  k()
+], l.prototype, "_headerSlotText", 2);
+c([
+  p({ type: Boolean, reflect: !0 })
+], l.prototype, "open", 2);
+c([
+  p({ type: Boolean, reflect: !0 })
+], l.prototype, "modal", 2);
+c([
+  p({
+    attribute: "close-on-backdrop",
+    reflect: !0,
+    converter: {
+      fromAttribute: (e) => e !== "false",
+      toAttribute: (e) => String(e)
+    }
+  })
+], l.prototype, "closeOnBackdrop", 2);
+c([
+  p({ type: String, reflect: !0 })
+], l.prototype, "heading", 2);
+c([
+  p({ type: String, reflect: !0 })
+], l.prototype, "variant", 2);
+c([
+  p({ type: String })
+], l.prototype, "description", 2);
+c([
+  p({ type: String, attribute: "label-close" })
+], l.prototype, "labelClose", 2);
+l = c([
+  R("hx-dialog")
+], l);
+export {
+  l as H
+};
+//# sourceMappingURL=hx-dialog-AOZpHSuF.js.map