@rcarls/rc-dialog 0.1.0

package/dist/rc-dialog-BGtJgQDG.js

@@ -0,0 +1,177 @@
+import { LitElement as a, nothing as d } from "lit";
+import { property as i } from "lit/decorators.js";
+import { DragController as u, ResizeController as c } from "@rcarls/rc-common";
+var f = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (n, e, t, l) => {
+  for (var s = l > 1 ? void 0 : l ? _(e, t) : e, p = n.length - 1, h; p >= 0; p--)
+    (h = n[p]) && (s = (l ? h(e, t, s) : h(s)) || s);
+  return l && s && f(e, t, s), s;
+};
+class r extends a {
+  constructor() {
+    super(...arguments), this.movable = !1, this.moveHandle = "", this.moveBounds = "viewport", this.moveStep = 4, this.resize = "none", this.resizeThreshold = 8, this.resizeStep = 4, this.closedBy = "", this.lightDismiss = !1, this._controlledOpen = void 0, this._defaultOpen = !1, this._dialogRef = null, this._observer = null, this._suppressNextCloseToggle = !1, this._openerEl = null, this._onClose = () => {
+      this._openerEl instanceof HTMLElement && this._openerEl.isConnected && this._openerEl.focus(), this._openerEl = null, this.dispatchEvent(
+        new CustomEvent("rc-dialog-close", {
+          bubbles: !0,
+          composed: !0,
+          detail: { returnValue: this.returnValue }
+        })
+      ), this._suppressNextCloseToggle || this._dispatchToggle(!1), this._suppressNextCloseToggle = !1, this.requestUpdate("open");
+    }, this._onCancel = (e) => {
+      const t = new CustomEvent("rc-dialog-request-close", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0,
+        detail: { returnValue: this.returnValue }
+      });
+      !this.dispatchEvent(t) ? e.preventDefault() : this.dispatchEvent(
+        new CustomEvent("rc-dialog-cancel", { bubbles: !0, composed: !0 })
+      );
+    }, this._onBackdropClick = (e) => {
+      e.target === this._dlg() && this.requestClose();
+    };
+  }
+  createRenderRoot() {
+    return this;
+  }
+  get open() {
+    return this._dlg()?.open ?? !1;
+  }
+  set open(e) {
+    const t = this._controlledOpen;
+    this._controlledOpen = e, e !== void 0 && this._applyOpen(e, !0), this.requestUpdate("open", t);
+  }
+  get defaultOpen() {
+    return this._defaultOpen;
+  }
+  set defaultOpen(e) {
+    const t = this._defaultOpen;
+    this._defaultOpen = e, this._controlledOpen === void 0 && e && this._applyOpen(!0, !0), this.requestUpdate("defaultOpen", t);
+  }
+  /** The return value set when the dialog was closed. */
+  get returnValue() {
+    return this._dlg()?.returnValue ?? "";
+  }
+  /** Opens the inner `<dialog>` as a modal and fires `rc-dialog-open`. */
+  showModal() {
+    this._applyOpen(!0, !1, !0) && (this.dispatchEvent(new CustomEvent("rc-dialog-open", { bubbles: !0, composed: !0 })), this._dispatchToggle(!0));
+  }
+  /** Opens the inner `<dialog>` as a non-modal and fires `rc-dialog-open`. */
+  show() {
+    this._applyOpen(!0, !1, !1) && (this.dispatchEvent(new CustomEvent("rc-dialog-open", { bubbles: !0, composed: !0 })), this._dispatchToggle(!0));
+  }
+  /** Closes the inner `<dialog>`, optionally setting a return value. */
+  close(e) {
+    this._dlg()?.close(e);
+  }
+  /**
+   * Requests the inner `<dialog>` to close, firing a cancelable `cancel` event
+   * first. If the consumer prevents `rc-dialog-request-close`, the close is
+   * blocked. Falls back to a synthesized cancel → close sequence in browsers
+   * that do not yet support the native `requestClose()` method.
+   */
+  requestClose(e) {
+    const t = this._dlg();
+    if (t)
+      if ("requestClose" in t && typeof t.requestClose == "function")
+        t.requestClose(e);
+      else {
+        const l = new Event("cancel", { cancelable: !0, bubbles: !1 });
+        !t.dispatchEvent(l) || t.close(e);
+      }
+  }
+  // ---- Internals ----------------------------------------------------------
+  _dlg() {
+    return this._dialogRef?.deref() ?? this.querySelector(":scope > dialog");
+  }
+  render() {
+    return d;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._observer = new MutationObserver(() => this._setupDialog()), this._observer.observe(this, { childList: !0 });
+  }
+  firstUpdated() {
+    this._setupDialog();
+  }
+  _setupDialog() {
+    const e = this._dlg();
+    if (e && this._dialogRef?.deref() !== e) {
+      if (this._teardownDialog(), this._dialogRef = new WeakRef(e), e.addEventListener("close", this._onClose), e.addEventListener("cancel", this._onCancel), this.lightDismiss && "closedBy" in HTMLDialogElement.prototype ? e.setAttribute("closedby", "any") : this.lightDismiss ? e.addEventListener("click", this._onBackdropClick) : this.closedBy && e.setAttribute("closedby", this.closedBy), this.movable || this.moveHandle) {
+        const t = this.moveHandle ? e.querySelector(this.moveHandle) ?? e : e;
+        new u(this, {
+          target: e,
+          handle: t,
+          bounds: this.moveBounds,
+          step: this.moveStep
+        });
+      }
+      this.resize !== "none" && new c(this, {
+        target: e,
+        direction: this.resize,
+        threshold: this.resizeThreshold,
+        step: this.resizeStep,
+        bounds: this.moveBounds
+      }), this._controlledOpen !== void 0 ? this._applyOpen(this._controlledOpen, !0) : this.defaultOpen && this._applyOpen(!0, !0);
+    }
+  }
+  updated(e) {
+    const t = this._dlg();
+    t && (e.has("closedBy") && (this.closedBy ? t.setAttribute("closedby", this.closedBy) : t.removeAttribute("closedby")), e.has("lightDismiss") && (this.lightDismiss && "closedBy" in HTMLDialogElement.prototype ? (t.setAttribute("closedby", "any"), t.removeEventListener("click", this._onBackdropClick)) : this.lightDismiss ? t.addEventListener("click", this._onBackdropClick) : (t.removeEventListener("click", this._onBackdropClick), this.closedBy ? t.setAttribute("closedby", this.closedBy) : t.removeAttribute("closedby"))));
+  }
+  disconnectedCallback() {
+    this._observer?.disconnect(), this._observer = null, this._teardownDialog(), super.disconnectedCallback();
+  }
+  _teardownDialog() {
+    const e = this._dialogRef?.deref();
+    e && (e.removeEventListener("close", this._onClose), e.removeEventListener("cancel", this._onCancel), e.removeEventListener("click", this._onBackdropClick), this._dialogRef = null, this._openerEl = null);
+  }
+  _applyOpen(e, t, l = !0) {
+    const s = this._dlg();
+    return s ? e ? s.open ? !1 : (this._openerEl = document.activeElement, l ? s.showModal() : s.show(), this.requestUpdate("open"), !0) : s.open ? (this._suppressNextCloseToggle = t, s.close(), this.requestUpdate("open"), !0) : !1 : !1;
+  }
+  _dispatchToggle(e) {
+    this.dispatchEvent(
+      new CustomEvent("rc-dialog-toggle", {
+        bubbles: !0,
+        composed: !0,
+        detail: { open: e, returnValue: this.returnValue }
+      })
+    );
+  }
+}
+o([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "movable", 2);
+o([
+  i({ type: String, attribute: "move-handle" })
+], r.prototype, "moveHandle", 2);
+o([
+  i({ type: String, attribute: "move-bounds" })
+], r.prototype, "moveBounds", 2);
+o([
+  i({ type: Number, attribute: "move-step" })
+], r.prototype, "moveStep", 2);
+o([
+  i({ type: String, reflect: !0 })
+], r.prototype, "resize", 2);
+o([
+  i({ type: Number, attribute: "resize-threshold" })
+], r.prototype, "resizeThreshold", 2);
+o([
+  i({ type: Number, attribute: "resize-step" })
+], r.prototype, "resizeStep", 2);
+o([
+  i({ type: String, attribute: "closed-by", reflect: !0 })
+], r.prototype, "closedBy", 2);
+o([
+  i({ type: Boolean, attribute: "light-dismiss" })
+], r.prototype, "lightDismiss", 2);
+o([
+  i({ type: Boolean, attribute: "open", reflect: !0 })
+], r.prototype, "open", 1);
+o([
+  i({ type: Boolean, attribute: "default-open" })
+], r.prototype, "defaultOpen", 1);
+export {
+  r as R
+};
+//# sourceMappingURL=rc-dialog-BGtJgQDG.js.map

package/dist/rc-dialog-BGtJgQDG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-dialog-BGtJgQDG.js","sources":["../src/rc-dialog.ts"],"sourcesContent":["import { LitElement, nothing, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { DragController, ResizeController } from '@rcarls/rc-common';\n\n/** Detail shape for `rc-dialog-close` and `rc-dialog-request-close`. */\nexport interface RCDialogCloseEvent {\n  returnValue: string;\n}\n\n/** Detail shape for `rc-dialog-toggle`. */\nexport interface RCDialogToggleEvent {\n  open: boolean;\n  returnValue: string;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-dialog': RCDialog;\n  }\n\n  interface HTMLElementEventMap {\n    'rc-dialog-open':          CustomEvent<Record<string, never>>;\n    'rc-dialog-close':         CustomEvent<RCDialogCloseEvent>;\n    'rc-dialog-request-close': CustomEvent<RCDialogCloseEvent>;\n    'rc-dialog-cancel':        CustomEvent<Record<string, never>>;\n    'rc-dialog-toggle':        CustomEvent<RCDialogToggleEvent>;\n  }\n}\n\n/**\n * Enhances a consumer-provided `<dialog>` child with drag, resize, and\n * accessible event forwarding. Renders nothing itself — the `<dialog>` element\n * remains in the document's light DOM for full CSS and AT access.\n *\n * @slot - Place a `<dialog>` element with your content here.\n *\n * @fires rc-dialog-open - Fired when the dialog opens via `showModal()` or `show()`.\n * @fires rc-dialog-toggle - Fired when user/native interaction changes open state.\n *\n * @fires rc-dialog-request-close - Fired before the dialog closes (Escape key,\n *   backdrop click when `light-dismiss` is set, or a call to `requestClose()`).\n *   **Cancelable** — call `preventDefault()` to block the close (e.g. unsaved-\n *   changes guard). `detail: { returnValue: string }`\n *\n * @fires rc-dialog-cancel - Mirrors the inner `<dialog>` cancel event when the\n *   close was not prevented. Backward-compatible alias for `rc-dialog-request-close`.\n *\n * @fires rc-dialog-close - Mirrors the inner `<dialog>` close event.\n *   `detail: { returnValue: string }`\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n */\nexport class RCDialog extends LitElement {\n  override createRenderRoot() { return this; }\n\n  /**\n   * Allow the dialog to be moved by dragging. Use `move-handle` to restrict\n   * dragging to a specific child element (e.g. a titlebar).\n   * Named `movable` — not `draggable` — to avoid colliding with the\n   * built-in HTML Drag and Drop `draggable` global attribute.\n   */\n  @property({ type: Boolean, reflect: true })\n  movable = false;\n\n  /** CSS selector (within the inner `<dialog>`) for the drag handle element. */\n  @property({ type: String, attribute: 'move-handle' })\n  moveHandle = '';\n\n  /** Bounds constraint for movement. */\n  @property({ type: String, attribute: 'move-bounds' })\n  moveBounds: 'viewport' | 'parent' = 'viewport';\n\n  /** Keyboard arrow-key step in px for moving. */\n  @property({ type: Number, attribute: 'move-step' })\n  moveStep = 4;\n\n  /** Enable resizing, mirroring the CSS `resize` property values. */\n  @property({ type: String, reflect: true })\n  resize: 'none' | 'both' | 'horizontal' | 'vertical' = 'none';\n\n  /** Edge hit-test thickness in px for resize detection. */\n  @property({ type: Number, attribute: 'resize-threshold' })\n  resizeThreshold = 8;\n\n  /** Keyboard arrow-key step in px for resizing. */\n  @property({ type: Number, attribute: 'resize-step' })\n  resizeStep = 4;\n\n  /**\n   * Proxied to the inner `<dialog closedby=\"...\">` attribute (Chrome 134+,\n   * Safari 18.4+, Firefox 139+). Progressive enhancement — no-op in older browsers.\n   *\n   * - `'any'`          — Escape OR backdrop click closes the dialog.\n   * - `'closerequest'` — Escape only (browser default for modal dialogs).\n   * - `'none'`         — Only programmatic `close()` / `requestClose()`.\n   * - `''`             — Attribute absent; use `light-dismiss` for JS fallback.\n   */\n  @property({ type: String, attribute: 'closed-by', reflect: true })\n  closedBy: 'any' | 'closerequest' | 'none' | '' = '';\n\n  /**\n   * JS fallback for backdrop-click dismissal. When true, a click on the\n   * `<dialog>` element itself (i.e. the backdrop area, not a child element)\n   * calls `requestClose()`. Complements native `closed-by=\"any\"` for browsers\n   * that do not yet support the `closedby` attribute.\n   */\n  @property({ type: Boolean, attribute: 'light-dismiss' })\n  lightDismiss = false;\n\n  // ---- Native <dialog> delegation ----------------------------------------\n\n  private _controlledOpen: boolean | undefined = undefined;\n  private _defaultOpen = false;\n  private _dialogRef: WeakRef<HTMLDialogElement> | null = null;\n  // Initialized in connectedCallback — MutationObserver is browser-only.\n  private _observer: MutationObserver | null = null;\n  private _suppressNextCloseToggle = false;\n  /** The element that had focus when the dialog was opened; restored on close. */\n  private _openerEl: Element | null = null;\n\n  /** Whether the inner `<dialog>` is currently open. Host writes update silently. */\n  @property({ type: Boolean, attribute: 'open', reflect: true })\n  get open(): boolean { return this._dlg()?.open ?? false; }\n  set open(value: boolean | undefined) {\n    const oldValue = this._controlledOpen;\n\n    this._controlledOpen = value;\n\n    if (value !== undefined) {\n      this._applyOpen(value, true);\n    }\n\n    this.requestUpdate('open', oldValue);\n  }\n\n  /** Initial uncontrolled open state. */\n  @property({ type: Boolean, attribute: 'default-open' })\n  get defaultOpen(): boolean { return this._defaultOpen; }\n  set defaultOpen(value: boolean) {\n    const oldValue = this._defaultOpen;\n\n    this._defaultOpen = value;\n\n    if (this._controlledOpen === undefined && value) {\n      this._applyOpen(true, true);\n    }\n\n    this.requestUpdate('defaultOpen', oldValue);\n  }\n\n  /** The return value set when the dialog was closed. */\n  get returnValue(): string { return this._dlg()?.returnValue ?? ''; }\n\n  /** Opens the inner `<dialog>` as a modal and fires `rc-dialog-open`. */\n  showModal(): void {\n    if (this._applyOpen(true, false, true)) {\n      this.dispatchEvent(new CustomEvent('rc-dialog-open', { bubbles: true, composed: true }));\n      this._dispatchToggle(true);\n    }\n  }\n\n  /** Opens the inner `<dialog>` as a non-modal and fires `rc-dialog-open`. */\n  show(): void {\n    if (this._applyOpen(true, false, false)) {\n      this.dispatchEvent(new CustomEvent('rc-dialog-open', { bubbles: true, composed: true }));\n      this._dispatchToggle(true);\n    }\n  }\n\n  /** Closes the inner `<dialog>`, optionally setting a return value. */\n  close(returnValue?: string): void { this._dlg()?.close(returnValue); }\n\n  /**\n   * Requests the inner `<dialog>` to close, firing a cancelable `cancel` event\n   * first. If the consumer prevents `rc-dialog-request-close`, the close is\n   * blocked. Falls back to a synthesized cancel → close sequence in browsers\n   * that do not yet support the native `requestClose()` method.\n   */\n  requestClose(returnValue?: string): void {\n    const dlg = this._dlg();\n    if (!dlg) return;\n    if ('requestClose' in dlg && typeof dlg.requestClose === 'function') {\n      dlg.requestClose(returnValue);\n    } else {\n      // Synthesize a cancelable cancel event; _onCancel fires rc-dialog-request-close.\n      // If not prevented, _onCancel does not call dlg.close() — we do it here.\n      const ev = new Event('cancel', { cancelable: true, bubbles: false });\n      const prevented = !dlg.dispatchEvent(ev);\n      if (!prevented) dlg.close(returnValue);\n    }\n  }\n\n  // ---- Internals ----------------------------------------------------------\n\n  private _dlg(): HTMLDialogElement | null {\n    return this._dialogRef?.deref() ?? this.querySelector<HTMLDialogElement>(':scope > dialog');\n  }\n\n  override render() { return nothing; }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._observer = new MutationObserver(() => this._setupDialog());\n    this._observer.observe(this, { childList: true });\n  }\n\n  override firstUpdated() {\n    this._setupDialog();\n  }\n\n  private _setupDialog() {\n    const dlg = this._dlg();\n    if (!dlg) {\n      if (import.meta.env.DEV) {\n        console.warn(\n          '[rc-dialog] No <dialog> child found. Place a <dialog> element ' +\n          'directly inside <rc-dialog>.',\n          this,\n        );\n      }\n      return;\n    }\n\n    if (this._dialogRef?.deref() === dlg) return;\n\n    this._teardownDialog();\n    this._dialogRef = new WeakRef(dlg);\n\n    if (import.meta.env.DEV) {\n      const hasLabel =\n        dlg.hasAttribute('aria-labelledby') || dlg.hasAttribute('aria-label');\n      if (!hasLabel) {\n        console.warn(\n          '[rc-dialog] The inner <dialog> is missing aria-labelledby or ' +\n          'aria-label. Add one to satisfy the ARIA dialog pattern.',\n          dlg,\n        );\n      }\n      if (dlg.getAttribute('role') === 'alertdialog' && !dlg.hasAttribute('aria-describedby')) {\n        console.warn(\n          '[rc-dialog] <dialog role=\"alertdialog\"> should have aria-describedby ' +\n          'pointing to the alert message text.',\n          dlg,\n        );\n      }\n    }\n\n    dlg.addEventListener('close', this._onClose);\n    dlg.addEventListener('cancel', this._onCancel);\n\n    if (this.lightDismiss && 'closedBy' in HTMLDialogElement.prototype) {\n      dlg.setAttribute('closedby', 'any');\n    } else if (this.lightDismiss) {\n      dlg.addEventListener('click', this._onBackdropClick);\n    } else {\n      if (this.closedBy) dlg.setAttribute('closedby', this.closedBy);\n    }\n\n    if (this.movable || this.moveHandle) {\n      const handle = this.moveHandle\n        ? (dlg.querySelector<Element>(this.moveHandle) ?? dlg)\n        : dlg;\n      new DragController(this, {\n        target: dlg,\n        handle,\n        bounds: this.moveBounds,\n        step: this.moveStep,\n      });\n    }\n\n    if (this.resize !== 'none') {\n      // TODO: add a separate resize-bounds attribute; moveBounds is a proxy for now.\n      new ResizeController(this, {\n        target: dlg,\n        direction: this.resize,\n        threshold: this.resizeThreshold,\n        step: this.resizeStep,\n        bounds: this.moveBounds,\n      });\n    }\n\n    if (this._controlledOpen !== undefined) {\n      this._applyOpen(this._controlledOpen, true);\n    } else if (this.defaultOpen) {\n      this._applyOpen(true, true);\n    }\n  }\n\n  override updated(changed: PropertyValues) {\n    const dlg = this._dlg();\n    if (!dlg) return;\n\n    if (changed.has('closedBy')) {\n      if (this.closedBy) dlg.setAttribute('closedby', this.closedBy);\n      else dlg.removeAttribute('closedby');\n    }\n\n    if (changed.has('lightDismiss')) {\n      if (this.lightDismiss && 'closedBy' in HTMLDialogElement.prototype) {\n        // native support available — delegate to closedby=\"any\" instead of JS handler\n        dlg.setAttribute('closedby', 'any');\n        dlg.removeEventListener('click', this._onBackdropClick);\n      } else if (this.lightDismiss) {\n        dlg.addEventListener('click', this._onBackdropClick);\n      } else {\n        dlg.removeEventListener('click', this._onBackdropClick);\n        if (this.closedBy) dlg.setAttribute('closedby', this.closedBy);\n        else dlg.removeAttribute('closedby');\n      }\n    }\n  }\n\n  override disconnectedCallback() {\n    this._observer?.disconnect();\n    this._observer = null;\n    this._teardownDialog();\n    super.disconnectedCallback();\n  }\n\n  private _teardownDialog(): void {\n    const dlg = this._dialogRef?.deref();\n    if (!dlg) return;\n\n    dlg.removeEventListener('close', this._onClose);\n    dlg.removeEventListener('cancel', this._onCancel);\n    dlg.removeEventListener('click', this._onBackdropClick);\n    this._dialogRef = null;\n    this._openerEl = null;\n  }\n\n  private _onClose = () => {\n    // Restore focus to the element that triggered the open, per APG focus management.\n    if (this._openerEl instanceof HTMLElement && this._openerEl.isConnected) {\n      this._openerEl.focus();\n    }\n    this._openerEl = null;\n\n    this.dispatchEvent(\n      new CustomEvent('rc-dialog-close', {\n        bubbles: true,\n        composed: true,\n        detail: { returnValue: this.returnValue },\n      }),\n    );\n\n    if (!this._suppressNextCloseToggle) {\n      this._dispatchToggle(false);\n    }\n\n    this._suppressNextCloseToggle = false;\n    this.requestUpdate('open');\n  };\n\n  /**\n   * Intercepts the native `cancel` event (Escape key or `requestClose()`).\n   * Fires the cancelable `rc-dialog-request-close` event first. If prevented,\n   * the native cancel is suppressed and the dialog stays open. If not prevented,\n   * the backward-compatible `rc-dialog-cancel` is also fired and the browser\n   * proceeds to close the dialog naturally (no explicit `dlg.close()` call here,\n   * so the `requestClose()` fallback can close after `dispatchEvent` returns).\n   */\n  private _onCancel = (e: Event) => {\n    const requestCloseEvent = new CustomEvent('rc-dialog-request-close', {\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n      detail: { returnValue: this.returnValue },\n    });\n    const prevented = !this.dispatchEvent(requestCloseEvent);\n\n    if (prevented) {\n      e.preventDefault();\n    } else {\n      this.dispatchEvent(\n        new CustomEvent('rc-dialog-cancel', { bubbles: true, composed: true }),\n      );\n    }\n  };\n\n  /**\n   * Detects backdrop clicks: a click whose `target` is the `<dialog>` element\n   * itself (not a descendant) means the user clicked outside the dialog's\n   * content box on the backdrop area.\n   */\n  private _onBackdropClick = (e: MouseEvent) => {\n    if (e.target === this._dlg()) this.requestClose();\n  };\n\n  private _applyOpen(open: boolean, silent: boolean, modal = true): boolean {\n    const dlg = this._dlg();\n    if (!dlg) return false;\n\n    if (open) {\n      if (dlg.open) return false;\n      // Capture focus owner before the dialog steals it, so we can restore on close.\n      this._openerEl = document.activeElement;\n      modal ? dlg.showModal() : dlg.show();\n      this.requestUpdate('open');\n      return true;\n    }\n\n    if (!dlg.open) return false;\n\n    this._suppressNextCloseToggle = silent;\n    dlg.close();\n    this.requestUpdate('open');\n\n    return true;\n  }\n\n  private _dispatchToggle(open: boolean): void {\n    this.dispatchEvent(\n      new CustomEvent('rc-dialog-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { open, returnValue: this.returnValue },\n      }),\n    );\n  }\n}\n\nexport default RCDialog;\n"],"names":["RCDialog","LitElement","requestCloseEvent","value","oldValue","returnValue","dlg","ev","nothing","handle","DragController","ResizeController","changed","open","silent","modal","__decorateClass","property"],"mappings":"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"}

package/dist/rc-dialog-define.js

@@ -0,0 +1,6 @@
+import { R as e } from "./rc-dialog-BGtJgQDG.js";
+customElements.get("rc-dialog") || customElements.define("rc-dialog", e);
+export {
+  e as RCDialog
+};
+//# sourceMappingURL=rc-dialog-define.js.map

package/dist/rc-dialog-define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-dialog-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCDialog } from './index.js';\n\ncustomElements.get('rc-dialog') || customElements.define('rc-dialog', RCDialog);\n\nexport * from './index.js';\n"],"names":["RCDialog"],"mappings":";AAEA,eAAe,IAAI,WAAW,KAAK,eAAe,OAAO,aAAaA,CAAQ;"}

package/dist/rc-dialog.js

@@ -0,0 +1,5 @@
+import { R as r } from "./rc-dialog-BGtJgQDG.js";
+export {
+  r as RCDialog
+};
+//# sourceMappingURL=rc-dialog.js.map

package/dist/rc-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-dialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/types/packages/rc-dialog/src/define.d.ts

@@ -0,0 +1 @@
+export * from './index.js';

package/dist/types/packages/rc-dialog/src/index.d.ts

@@ -0,0 +1 @@
+export * from './rc-dialog.js';

package/dist/types/packages/rc-dialog/src/rc-dialog.d.ts

@@ -0,0 +1,139 @@
+import { LitElement, PropertyValues } from 'lit';
+/** Detail shape for `rc-dialog-close` and `rc-dialog-request-close`. */
+export interface RCDialogCloseEvent {
+    returnValue: string;
+}
+/** Detail shape for `rc-dialog-toggle`. */
+export interface RCDialogToggleEvent {
+    open: boolean;
+    returnValue: string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-dialog': RCDialog;
+    }
+    interface HTMLElementEventMap {
+        'rc-dialog-open': CustomEvent<Record<string, never>>;
+        'rc-dialog-close': CustomEvent<RCDialogCloseEvent>;
+        'rc-dialog-request-close': CustomEvent<RCDialogCloseEvent>;
+        'rc-dialog-cancel': CustomEvent<Record<string, never>>;
+        'rc-dialog-toggle': CustomEvent<RCDialogToggleEvent>;
+    }
+}
+/**
+ * Enhances a consumer-provided `<dialog>` child with drag, resize, and
+ * accessible event forwarding. Renders nothing itself — the `<dialog>` element
+ * remains in the document's light DOM for full CSS and AT access.
+ *
+ * @slot - Place a `<dialog>` element with your content here.
+ *
+ * @fires rc-dialog-open - Fired when the dialog opens via `showModal()` or `show()`.
+ * @fires rc-dialog-toggle - Fired when user/native interaction changes open state.
+ *
+ * @fires rc-dialog-request-close - Fired before the dialog closes (Escape key,
+ *   backdrop click when `light-dismiss` is set, or a call to `requestClose()`).
+ *   **Cancelable** — call `preventDefault()` to block the close (e.g. unsaved-
+ *   changes guard). `detail: { returnValue: string }`
+ *
+ * @fires rc-dialog-cancel - Mirrors the inner `<dialog>` cancel event when the
+ *   close was not prevented. Backward-compatible alias for `rc-dialog-request-close`.
+ *
+ * @fires rc-dialog-close - Mirrors the inner `<dialog>` close event.
+ *   `detail: { returnValue: string }`
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+ */
+export declare class RCDialog extends LitElement {
+    createRenderRoot(): this;
+    /**
+     * Allow the dialog to be moved by dragging. Use `move-handle` to restrict
+     * dragging to a specific child element (e.g. a titlebar).
+     * Named `movable` — not `draggable` — to avoid colliding with the
+     * built-in HTML Drag and Drop `draggable` global attribute.
+     */
+    movable: boolean;
+    /** CSS selector (within the inner `<dialog>`) for the drag handle element. */
+    moveHandle: string;
+    /** Bounds constraint for movement. */
+    moveBounds: 'viewport' | 'parent';
+    /** Keyboard arrow-key step in px for moving. */
+    moveStep: number;
+    /** Enable resizing, mirroring the CSS `resize` property values. */
+    resize: 'none' | 'both' | 'horizontal' | 'vertical';
+    /** Edge hit-test thickness in px for resize detection. */
+    resizeThreshold: number;
+    /** Keyboard arrow-key step in px for resizing. */
+    resizeStep: number;
+    /**
+     * Proxied to the inner `<dialog closedby="...">` attribute (Chrome 134+,
+     * Safari 18.4+, Firefox 139+). Progressive enhancement — no-op in older browsers.
+     *
+     * - `'any'`          — Escape OR backdrop click closes the dialog.
+     * - `'closerequest'` — Escape only (browser default for modal dialogs).
+     * - `'none'`         — Only programmatic `close()` / `requestClose()`.
+     * - `''`             — Attribute absent; use `light-dismiss` for JS fallback.
+     */
+    closedBy: 'any' | 'closerequest' | 'none' | '';
+    /**
+     * JS fallback for backdrop-click dismissal. When true, a click on the
+     * `<dialog>` element itself (i.e. the backdrop area, not a child element)
+     * calls `requestClose()`. Complements native `closed-by="any"` for browsers
+     * that do not yet support the `closedby` attribute.
+     */
+    lightDismiss: boolean;
+    private _controlledOpen;
+    private _defaultOpen;
+    private _dialogRef;
+    private _observer;
+    private _suppressNextCloseToggle;
+    /** The element that had focus when the dialog was opened; restored on close. */
+    private _openerEl;
+    /** Whether the inner `<dialog>` is currently open. Host writes update silently. */
+    get open(): boolean;
+    set open(value: boolean | undefined);
+    /** Initial uncontrolled open state. */
+    get defaultOpen(): boolean;
+    set defaultOpen(value: boolean);
+    /** The return value set when the dialog was closed. */
+    get returnValue(): string;
+    /** Opens the inner `<dialog>` as a modal and fires `rc-dialog-open`. */
+    showModal(): void;
+    /** Opens the inner `<dialog>` as a non-modal and fires `rc-dialog-open`. */
+    show(): void;
+    /** Closes the inner `<dialog>`, optionally setting a return value. */
+    close(returnValue?: string): void;
+    /**
+     * Requests the inner `<dialog>` to close, firing a cancelable `cancel` event
+     * first. If the consumer prevents `rc-dialog-request-close`, the close is
+     * blocked. Falls back to a synthesized cancel → close sequence in browsers
+     * that do not yet support the native `requestClose()` method.
+     */
+    requestClose(returnValue?: string): void;
+    private _dlg;
+    render(): symbol;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    private _setupDialog;
+    updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    private _teardownDialog;
+    private _onClose;
+    /**
+     * Intercepts the native `cancel` event (Escape key or `requestClose()`).
+     * Fires the cancelable `rc-dialog-request-close` event first. If prevented,
+     * the native cancel is suppressed and the dialog stays open. If not prevented,
+     * the backward-compatible `rc-dialog-cancel` is also fired and the browser
+     * proceeds to close the dialog naturally (no explicit `dlg.close()` call here,
+     * so the `requestClose()` fallback can close after `dispatchEvent` returns).
+     */
+    private _onCancel;
+    /**
+     * Detects backdrop clicks: a click whose `target` is the `<dialog>` element
+     * itself (not a descendant) means the user clicked outside the dialog's
+     * content box on the backdrop area.
+     */
+    private _onBackdropClick;
+    private _applyOpen;
+    private _dispatchToggle;
+}
+export default RCDialog;

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@rcarls/rc-dialog",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.0",
+  "description": "Headless draggable and resizable native dialog wrapper, built with Lit",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-dialog"
+  },
+  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-dialog.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/packages/rc-dialog/src/index.d.ts",
+        "default": "./dist/rc-dialog.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/packages/rc-dialog/src/define.d.ts",
+        "default": "./dist/rc-dialog-define.js"
+      }
+    }
+  },
+  "types": "./dist/types/packages/rc-dialog/src/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-dialog-define.js"
+  ],
+  "customElements": "dist/custom-elements.json",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build && cem analyze",
+    "cem:analyze": "cem analyze",
+    "preview": "vite preview",
+    "test:browser": "vitest",
+    "test:browser:chrome": "vitest --project=chromium",
+    "test:browser:firefox": "vitest --project=firefox",
+    "yalc:publish": "yalc publish --push"
+  },
+  "dependencies": {
+    "@rcarls/rc-common": "workspace:^"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "@guanghechen/rollup-plugin-copy": "^6.0.9",
+    "@vitest/browser-playwright": "4.1.5",
+    "lit": "^3.0.0",
+    "playwright": "^1.56.0",
+    "rollup": "^4.60.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.6",
+    "vitest-browser-lit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  }
+}