@rcarls/rc-dialog 0.2.0 → 0.3.1

package/README.md

@@ -1,8 +1,8 @@
 # `@rcarls/rc-dialog`
 
-A WAI-ARIA compliant web component that enhances a consumer-provided `<dialog>` element with drag, resize, cancelable close events, and light-dismiss. Built with [Lit 3](https://lit.dev).
+Draggable, resizable wrapper for a native `<dialog>`, following the [WAI-ARIA Dialog Modal pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).
 
-The component is a **headless wrapper** — it injects no HTML of its own. Your `<dialog>` stays in the document's light DOM with full CSS and assistive-technology access.
+Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-dialog](https://richardcarls.github.io/rc-webcomponents/components/rc-dialog).
 
 ---
 
@@ -45,6 +45,9 @@ Place a `<dialog>` element directly inside `<rc-dialog>`. The inner `<dialog>` m
 
 | Property | Attribute | Type | Default | Description |
 |---|---|---|---|---|
+| `open` | `open` | `boolean` | — | Controlled open state. Setting to `true`/`false` opens/closes the dialog silently (no `rc-dialog-toggle` event). Reads the inner `<dialog>.open` value. |
+| `defaultOpen` | `default-open` | `boolean` | `false` | Uncontrolled initial open state. The component takes ownership after initialization. |
+| `modal` | — | `boolean` | `true` | Whether controlled `open` / `defaultOpen` opens as modal (`showModal`) or non-modal (`show`). No effect on direct `showModal()` / `show()` calls. JS property only — no attribute. |
 | `movable` | `movable` | `boolean` | `false` | Enable drag-to-move. Named `movable` (not `draggable`) to avoid colliding with the HTML `draggable` attribute. |
 | `moveHandle` | `move-handle` | `string` | `''` | CSS selector for the drag handle within the inner `<dialog>` (e.g. `'.titlebar'`). Defaults to the whole dialog. |
 | `moveBounds` | `move-bounds` | `'viewport' \| 'parent'` | `'viewport'` | Constrains drag within the viewport or the nearest positioned ancestor. |
@@ -78,6 +81,8 @@ returnValue: string  // The return value set when the dialog last closed.
 
 | Event | Cancelable | Detail | Description |
 |---|---|---|---|
+| `rc-dialog-open` | No | — | Fired when the dialog opens via `showModal()` or `show()`. |
+| `rc-dialog-toggle` | No | `{ open: boolean, returnValue: string }` | Fired when user or native interaction changes the open state. Not fired on silent host writes (`open` property). |
 | `rc-dialog-request-close` | **Yes** | `{ returnValue: string }` | Fired before close (Escape, backdrop click, or `requestClose()`). Call `preventDefault()` to block. |
 | `rc-dialog-cancel` | No | — | Fired after `rc-dialog-request-close` when the close was not prevented. Backward-compatible alias. |
 | `rc-dialog-close` | No | `{ returnValue: string }` | Fired after the dialog has closed. |
@@ -223,7 +228,7 @@ Use `role="alertdialog"` with `aria-describedby` pointing to the message text. A
 `<rc-dialog>` delegates entirely to the native `<dialog>` element:
 
 - **Focus trapping** — built into `showModal()` (Tab/Shift+Tab stays inside the dialog).
-- **Focus restoration** — the browser returns focus to the triggering element on close.
+- **Focus restoration** — `rc-dialog` captures the focused element before opening and restores focus to it on close. If the opener was removed from the DOM while the dialog was open, focus falls back to `document.body`.
 - **Escape to close** — native behaviour; routes through `rc-dialog-request-close` so guards still apply.
 - **`aria-modal`** — `showModal()` implies `aria-modal="true"` without an explicit attribute.
 

package/dist/custom-elements.json

@@ -46,7 +46,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Enhances a consumer-provided `<dialog>` child with drag, resize, and\naccessible event forwarding. Renders nothing itself — the `<dialog>` element\nremains in the document's light DOM for full CSS and AT access.",
+          "description": "Draggable, resizable wrapper for a native <dialog>, following the WAI-ARIA Dialog Modal\npattern.",
           "name": "RCDialog",
           "slots": [
             {
@@ -62,7 +62,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Allow the dialog to be moved by dragging. Use `move-handle` to restrict\ndragging to a specific child element (e.g. a titlebar).\nNamed `movable` — not `draggable` — to avoid colliding with the\nbuilt-in HTML Drag and Drop `draggable` global attribute.",
+              "description": "Allow the dialog to be moved by dragging.\n\nUse `move-handle` to restrict dragging to a specific child\nelement (e.g. a titlebar).",
               "attribute": "movable",
               "reflects": true
             },
@@ -134,7 +134,7 @@
                 "text": "'any' | 'closerequest' | 'none' | ''"
               },
               "default": "''",
-              "description": "Proxied to the inner `<dialog closedby=\"...\">` attribute (Chrome 134+,\nSafari 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.",
+              "description": "Proxied to the inner `<dialog closedby=\"...\">` attribute.\n\nProgressive 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.",
               "attribute": "closed-by",
               "reflects": true
             },
@@ -145,9 +145,28 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "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)\ncalls `requestClose()`. Complements native `closed-by=\"any\"` for browsers\nthat do not yet support the `closedby` attribute.",
+              "description": "When true and the dialog is modal, a click on the backdrop area calls\n`requestClose()`.",
               "attribute": "light-dismiss"
             },
+            {
+              "kind": "field",
+              "name": "modal",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether to open as modal with controlled open. Default: `true`."
+            },
+            {
+              "kind": "field",
+              "name": "_$dialog",
+              "type": {
+                "text": "HTMLDialogElement | null"
+              },
+              "privacy": "protected",
+              "description": "The inner `<dialog>` element, resolved from the direct light-DOM child.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "_controlledOpen",
@@ -168,18 +187,16 @@
             },
             {
               "kind": "field",
-              "name": "_dialogRef",
-              "type": {
-                "text": "WeakRef<HTMLDialogElement> | null"
-              },
+              "name": "_dialogController",
               "privacy": "private",
-              "default": "null"
+              "readonly": true,
+              "default": "new NativeChildController<HTMLDialogElement>(this, { selector: ':scope > dialog', observe: true, onChange: ($dialog) => this._setupDialog($dialog), onMissing: () => { if (import.meta.env.DEV) { warnMissingDirectChild(this, { selector: ':scope > dialog', message: '[rc-dialog] No direct child <dialog> found. Place a native <dialog> inside <rc-dialog>.', }); } }, })"
             },
             {
               "kind": "field",
-              "name": "_observer",
+              "name": "_$wired",
               "type": {
-                "text": "MutationObserver | null"
+                "text": "WeakRef<HTMLDialogElement> | null"
               },
               "privacy": "private",
               "default": "null"
@@ -195,11 +212,11 @@
             },
             {
               "kind": "field",
-              "name": "_openerEl",
+              "name": "_$opener",
               "type": {
                 "text": "Element | null"
               },
-              "privacy": "private",
+              "privacy": "protected",
               "default": "null",
               "description": "The element that had focus when the dialog was opened; restored on close."
             },
@@ -249,7 +266,7 @@
                   "text": "void"
                 }
               },
-              "description": "Opens the inner `<dialog>` as a non-modal and fires `rc-dialog-open`."
+              "description": "Opens the inner `<dialog>` (non-modal) and fires `rc-dialog-open`."
             },
             {
               "kind": "method",
@@ -287,54 +304,55 @@
                   }
                 }
               ],
-              "description": "Requests the inner `<dialog>` to close, firing a cancelable `cancel` event\nfirst. If the consumer prevents `rc-dialog-request-close`, the close is\nblocked. Falls back to a synthesized cancel → close sequence in browsers\nthat do not yet support the native `requestClose()` method."
-            },
-            {
-              "kind": "method",
-              "name": "_dlg",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "HTMLDialogElement | null"
-                }
-              }
+              "description": "Requests the inner `<dialog>` to close, firing a cancelable `cancel` event\nfirst."
             },
             {
               "kind": "method",
               "name": "_setupDialog",
-              "privacy": "private"
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "$dialog",
+                  "default": "this._$dialog",
+                  "type": {
+                    "text": "HTMLDialogElement | null"
+                  }
+                }
+              ],
+              "description": "Wires event listeners, drag/resize controllers, and initial open state for the inner `<dialog>`."
             },
             {
               "kind": "method",
               "name": "_teardownDialog",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "description": "Removes all event listeners attached to the inner `<dialog>` and clears cached state."
             },
             {
               "kind": "field",
               "name": "_onClose",
-              "privacy": "private"
+              "privacy": "protected"
             },
             {
               "kind": "field",
               "name": "_onCancel",
-              "privacy": "private",
-              "description": "Intercepts the native `cancel` event (Escape key or `requestClose()`).\nFires the cancelable `rc-dialog-request-close` event first. If prevented,\nthe native cancel is suppressed and the dialog stays open. If not prevented,\nthe backward-compatible `rc-dialog-cancel` is also fired and the browser\nproceeds to close the dialog naturally (no explicit `dlg.close()` call here,\nso the `requestClose()` fallback can close after `dispatchEvent` returns)."
+              "privacy": "protected",
+              "description": "Intercepts the native `cancel` event."
             },
             {
               "kind": "field",
               "name": "_onBackdropClick",
-              "privacy": "private",
-              "description": "Detects backdrop clicks: a click whose `target` is the `<dialog>` element\nitself (not a descendant) means the user clicked outside the dialog's\ncontent box on the backdrop area."
+              "privacy": "protected",
+              "description": "Detects backdrop clicks."
             },
             {
               "kind": "method",
               "name": "_applyOpen",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "boolean"
@@ -345,24 +363,28 @@
                   "name": "open",
                   "type": {
                     "text": "boolean"
-                  }
+                  },
+                  "description": "Whether to open (`true`) or close (`false`)."
                 },
                 {
                   "name": "silent",
                   "type": {
                     "text": "boolean"
-                  }
+                  },
+                  "description": "When `true`, suppresses the outgoing `rc-dialog-toggle` event."
                 },
                 {
                   "name": "modal",
-                  "default": "true"
+                  "default": "true",
+                  "description": "Whether to call `showModal()` (`true`) or `show()` (`false`)."
                 }
-              ]
+              ],
+              "description": "Opens or closes the inner `<dialog>` and returns `true` if state actually changed."
             },
             {
               "kind": "method",
               "name": "_dispatchToggle",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
@@ -375,7 +397,8 @@
                     "text": "boolean"
                   }
                 }
-              ]
+              ],
+              "description": "Dispatches `rc-dialog-toggle` with the current open state and return value."
             }
           ],
           "events": [
@@ -394,7 +417,7 @@
               "description": "Fired when user/native interaction changes open state."
             },
             {
-              "description": "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 }`",
+              "description": "Fired before the dialog closes (cancellable).",
               "name": "rc-dialog-request-close"
             },
             {
@@ -413,7 +436,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Allow the dialog to be moved by dragging. Use `move-handle` to restrict\ndragging to a specific child element (e.g. a titlebar).\nNamed `movable` — not `draggable` — to avoid colliding with the\nbuilt-in HTML Drag and Drop `draggable` global attribute.",
+              "description": "Allow the dialog to be moved by dragging.\n\nUse `move-handle` to restrict dragging to a specific child\nelement (e.g. a titlebar).",
               "fieldName": "movable"
             },
             {
@@ -476,7 +499,7 @@
                 "text": "'any' | 'closerequest' | 'none' | ''"
               },
               "default": "''",
-              "description": "Proxied to the inner `<dialog closedby=\"...\">` attribute (Chrome 134+,\nSafari 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.",
+              "description": "Proxied to the inner `<dialog closedby=\"...\">` attribute.\n\nProgressive 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.",
               "fieldName": "closedBy"
             },
             {
@@ -485,7 +508,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "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)\ncalls `requestClose()`. Complements native `closed-by=\"any\"` for browsers\nthat do not yet support the `closedby` attribute.",
+              "description": "When true and the dialog is modal, a click on the backdrop area calls\n`requestClose()`.",
               "fieldName": "lightDismiss"
             },
             {

package/dist/{rc-dialog-BGtJgQDG.js → rc-dialog-Dpj3ERfv.js}

@@ -1,15 +1,21 @@
 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--)
+import { NativeChildController as u, DragController as c, ResizeController as f } from "@rcarls/rc-common";
+var _ = Object.defineProperty, m = Object.getOwnPropertyDescriptor, o = (n, e, t, l) => {
+  for (var s = l > 1 ? void 0 : l ? m(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;
+  return l && s && _(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(
+    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.modal = !0, this._controlledOpen = void 0, this._defaultOpen = !1, this._dialogController = new u(this, {
+      selector: ":scope > dialog",
+      observe: !0,
+      onChange: (e) => this._setupDialog(e),
+      onMissing: () => {
+      }
+    }), this._$wired = null, this._suppressNextCloseToggle = !1, this._$opener = null, this._onClose = () => {
+      this._$opener instanceof HTMLElement && (this._$opener.isConnected ? this._$opener.focus() : document.body.focus()), this._$opener = null, this.dispatchEvent(
         new CustomEvent("rc-dialog-close", {
           bubbles: !0,
           composed: !0,
@@ -23,54 +29,56 @@ class r extends a {
         cancelable: !0,
         detail: { returnValue: this.returnValue }
       });
-      !this.dispatchEvent(t) ? e.preventDefault() : this.dispatchEvent(
-        new CustomEvent("rc-dialog-cancel", { bubbles: !0, composed: !0 })
-      );
+      !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();
+      e.target === this._$dialog && this.requestClose();
     };
   }
   createRenderRoot() {
     return this;
   }
+  /** The inner `<dialog>` element, resolved from the direct light-DOM child. */
+  get _$dialog() {
+    return this._dialogController.child;
+  }
   get open() {
-    return this._dlg()?.open ?? !1;
+    return this._$dialog?.open ?? !1;
   }
   set open(e) {
     const t = this._controlledOpen;
-    this._controlledOpen = e, e !== void 0 && this._applyOpen(e, !0), this.requestUpdate("open", t);
+    this._controlledOpen = e, e !== void 0 && this._applyOpen(e, !0, this.modal), 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);
+    this._defaultOpen = e, this._controlledOpen === void 0 && e && this.isConnected && this._applyOpen(!0, !0, this.modal), this.requestUpdate("defaultOpen", t);
   }
   /** The return value set when the dialog was closed. */
   get returnValue() {
-    return this._dlg()?.returnValue ?? "";
+    return this._$dialog?.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`. */
+  /**
+   * Opens the inner `<dialog>` (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);
+    this._$dialog?.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.
+   * first.
    */
   requestClose(e) {
-    const t = this._dlg();
+    const t = this._$dialog;
     if (t)
       if ("requestClose" in t && typeof t.requestClose == "function")
         t.requestClose(e);
@@ -79,55 +87,61 @@ class r extends a {
         !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();
+    this._dialogController.sync();
   }
-  _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) {
+  /** Wires event listeners, drag/resize controllers, and initial open state for the inner `<dialog>`. */
+  _setupDialog(e = this._$dialog) {
+    if (!e) {
+      this._teardownDialog();
+      return;
+    }
+    if (this._$wired?.deref() !== e) {
+      if (this._teardownDialog(), this._$wired = 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, {
+        new c(this, {
           target: e,
           handle: t,
           bounds: this.moveBounds,
           step: this.moveStep
         });
       }
-      this.resize !== "none" && new c(this, {
+      this.resize !== "none" && new f(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);
+      }), this._controlledOpen !== void 0 ? this._applyOpen(this._controlledOpen, !0, this.modal) : this.defaultOpen && this._applyOpen(!0, !0, this.modal);
     }
   }
   updated(e) {
-    const t = this._dlg();
+    const t = this._$dialog;
     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();
+    this._teardownDialog(), super.disconnectedCallback();
   }
+  /** Removes all event listeners attached to the inner `<dialog>` and clears cached state. */
   _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);
+    const e = this._$wired?.deref();
+    e && (e.removeEventListener("close", this._onClose), e.removeEventListener("cancel", this._onCancel), e.removeEventListener("click", this._onBackdropClick), this._$wired = null, this._$opener = null);
   }
+  /**
+   * Opens or closes the inner `<dialog>` and returns `true` if state actually changed.
+   *
+   * @param open - Whether to open (`true`) or close (`false`).
+   * @param silent - When `true`, suppresses the outgoing `rc-dialog-toggle` event.
+   * @param modal - Whether to call `showModal()` (`true`) or `show()` (`false`).
+   */
   _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;
+    const s = this._$dialog;
+    return s ? e ? s.open ? !1 : (this._$opener = document.activeElement, l ? s.showModal() : s.show(), this.requestUpdate("open"), !0) : s.open ? (this._suppressNextCloseToggle = t, s.close(), this.requestUpdate("open"), !0) : !1 : !1;
   }
+  /** Dispatches `rc-dialog-toggle` with the current open state and return value. */
   _dispatchToggle(e) {
     this.dispatchEvent(
       new CustomEvent("rc-dialog-toggle", {
@@ -174,4 +188,4 @@ o([
 export {
   r as R
 };
-//# sourceMappingURL=rc-dialog-BGtJgQDG.js.map
+//# sourceMappingURL=rc-dialog-Dpj3ERfv.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rc-dialog-Dpj3ERfv.js","sources":["../src/rc-dialog.ts"],"sourcesContent":["import { LitElement, nothing, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport {\n  DragController,\n  NativeChildController,\n  ResizeController,\n  warnMissingDirectChild,\n} 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 * Draggable, resizable wrapper for a native <dialog>, following the WAI-ARIA Dialog Modal\n * pattern.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-dialog rc-dialog docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ WAI-ARIA Dialog Modal pattern}\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 * @fires rc-dialog-request-close - Fired before the dialog closes (cancellable).\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 * @fires rc-dialog-close - Mirrors the inner `<dialog>` close event.\n *   `detail: { returnValue: string }`\n *\n */\nexport class RCDialog extends LitElement {\n  override createRenderRoot() {\n    return this;\n  }\n\n  /**\n   * Allow the dialog to be moved by dragging.\n   *\n   * Use `move-handle` to restrict dragging to a specific child\n   * element (e.g. a titlebar).\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.\n   *\n   * 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   * When true and the dialog is modal, a click on the backdrop area calls\n   * `requestClose()`.\n   */\n  @property({ type: Boolean, attribute: 'light-dismiss' })\n  lightDismiss = false;\n\n  /**\n   * Whether to open as modal with controlled open. Default: `true`.\n   */\n  modal = true;\n\n  /** The inner `<dialog>` element, resolved from the direct light-DOM child. */\n  protected get _$dialog(): HTMLDialogElement | null {\n    return this._dialogController.child;\n  }\n\n  private _controlledOpen: boolean | undefined = undefined;\n  private _defaultOpen = false;\n  private readonly _dialogController = new NativeChildController<HTMLDialogElement>(this, {\n    selector: ':scope > dialog',\n    observe: true,\n    onChange: ($dialog) => this._setupDialog($dialog),\n    onMissing: () => {\n      if (import.meta.env.DEV) {\n        warnMissingDirectChild(this, {\n          selector: ':scope > dialog',\n          message:\n            '[rc-dialog] No direct child <dialog> found. Place a native <dialog> inside <rc-dialog>.',\n        });\n      }\n    },\n  });\n  // Tracks which <dialog> has its listeners wired; used by _teardownDialog to\n  // remove listeners even after the element is removed from the DOM.\n  private _$wired: WeakRef<HTMLDialogElement> | null = null;\n  private _suppressNextCloseToggle = false;\n\n  /** The element that had focus when the dialog was opened; restored on close. */\n  protected _$opener: 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 {\n    return this._$dialog?.open ?? false;\n  }\n\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, this.modal);\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 {\n    return this._defaultOpen;\n  }\n\n  set defaultOpen(value: boolean) {\n    const oldValue = this._defaultOpen;\n\n    this._defaultOpen = value;\n\n    if (this._controlledOpen === undefined && value && this.isConnected) {\n      this._applyOpen(true, true, this.modal);\n    }\n\n    this.requestUpdate('defaultOpen', oldValue);\n  }\n\n  /** The return value set when the dialog was closed. */\n  get returnValue(): string {\n    return this._$dialog?.returnValue ?? '';\n  }\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  /**\n   * Opens the inner `<dialog>` (non-modal) and fires `rc-dialog-open`.\n   */\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 {\n    this._$dialog?.close(returnValue);\n  }\n\n  /**\n   * Requests the inner `<dialog>` to close, firing a cancelable `cancel` event\n   * first.\n   */\n  requestClose(returnValue?: string): void {\n    const $dialog = this._$dialog;\n\n    if (!$dialog) {\n      return;\n    }\n\n    if ('requestClose' in $dialog && typeof $dialog.requestClose === 'function') {\n      $dialog.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 = !$dialog.dispatchEvent(ev);\n\n      if (!prevented) {\n        $dialog.close(returnValue);\n      }\n    }\n  }\n\n  override render() {\n    return nothing;\n  }\n\n  override firstUpdated() {\n    this._dialogController.sync();\n  }\n\n  /** Wires event listeners, drag/resize controllers, and initial open state for the inner `<dialog>`. */\n  protected _setupDialog($dialog: HTMLDialogElement | null = this._$dialog) {\n    if (!$dialog) {\n      this._teardownDialog();\n      return;\n    }\n\n    if (this._$wired?.deref() === $dialog) {\n      return;\n    }\n\n    this._teardownDialog();\n    this._$wired = new WeakRef($dialog);\n\n    if (import.meta.env.DEV) {\n      const hasLabel =\n        $dialog.hasAttribute('aria-labelledby') || $dialog.hasAttribute('aria-label');\n\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          $dialog,\n        );\n      }\n\n      if (\n        $dialog.getAttribute('role') === 'alertdialog' &&\n        !$dialog.hasAttribute('aria-describedby')\n      ) {\n        console.warn(\n          '[rc-dialog] <dialog role=\"alertdialog\"> should have aria-describedby ' +\n            'pointing to the alert message text.',\n          $dialog,\n        );\n      }\n\n      if (!$dialog.querySelector('button:not([disabled])')) {\n        console.warn(\n          '[rc-dialog] No enabled <button> found inside <dialog>. APG recommends ' +\n            'including a visible close button in the tab sequence.',\n          $dialog,\n        );\n      }\n    }\n\n    $dialog.addEventListener('close', this._onClose);\n    $dialog.addEventListener('cancel', this._onCancel);\n\n    if (this.lightDismiss && 'closedBy' in HTMLDialogElement.prototype) {\n      $dialog.setAttribute('closedby', 'any');\n    } else if (this.lightDismiss) {\n      $dialog.addEventListener('click', this._onBackdropClick);\n    } else {\n      if (this.closedBy) {\n        $dialog.setAttribute('closedby', this.closedBy);\n      }\n    }\n\n    if (this.movable || this.moveHandle) {\n      const $handle = this.moveHandle\n        ? ($dialog.querySelector<Element>(this.moveHandle) ?? $dialog)\n        : $dialog;\n\n      new DragController(this, {\n        target: $dialog,\n        handle: $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: $dialog,\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, this.modal);\n    } else if (this.defaultOpen) {\n      this._applyOpen(true, true, this.modal);\n    }\n  }\n\n  override updated(changed: PropertyValues) {\n    const $dialog = this._$dialog;\n\n    if (!$dialog) {\n      return;\n    }\n\n    if (changed.has('closedBy')) {\n      if (this.closedBy) {\n        $dialog.setAttribute('closedby', this.closedBy);\n      } else {\n        $dialog.removeAttribute('closedby');\n      }\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        $dialog.setAttribute('closedby', 'any');\n        $dialog.removeEventListener('click', this._onBackdropClick);\n      } else if (this.lightDismiss) {\n        $dialog.addEventListener('click', this._onBackdropClick);\n      } else {\n        $dialog.removeEventListener('click', this._onBackdropClick);\n\n        if (this.closedBy) {\n          $dialog.setAttribute('closedby', this.closedBy);\n        } else {\n          $dialog.removeAttribute('closedby');\n        }\n      }\n    }\n  }\n\n  override disconnectedCallback() {\n    this._teardownDialog();\n\n    super.disconnectedCallback();\n  }\n\n  /** Removes all event listeners attached to the inner `<dialog>` and clears cached state. */\n  protected _teardownDialog(): void {\n    const $dialog = this._$wired?.deref();\n\n    if (!$dialog) {\n      return;\n    }\n\n    $dialog.removeEventListener('close', this._onClose);\n    $dialog.removeEventListener('cancel', this._onCancel);\n    $dialog.removeEventListener('click', this._onBackdropClick);\n\n    this._$wired = null;\n    this._$opener = null;\n  }\n\n  protected _onClose = () => {\n    // Restore focus to the element that triggered the open, per APG focus management.\n    if (this._$opener instanceof HTMLElement) {\n      if (this._$opener.isConnected) {\n        this._$opener.focus();\n      } else {\n        // Opener was removed from the DOM while the dialog was open; fall back\n        // to body so focus is not left stranded.\n        document.body.focus();\n      }\n    }\n\n    this._$opener = 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.\n   */\n  protected _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(new CustomEvent('rc-dialog-cancel', { bubbles: true, composed: true }));\n    }\n  };\n\n  /**\n   * Detects backdrop clicks.\n   */\n  protected _onBackdropClick = (e: MouseEvent) => {\n    if (e.target === this._$dialog) {\n      this.requestClose();\n    }\n  };\n\n  /**\n   * Opens or closes the inner `<dialog>` and returns `true` if state actually changed.\n   *\n   * @param open - Whether to open (`true`) or close (`false`).\n   * @param silent - When `true`, suppresses the outgoing `rc-dialog-toggle` event.\n   * @param modal - Whether to call `showModal()` (`true`) or `show()` (`false`).\n   */\n  protected _applyOpen(open: boolean, silent: boolean, modal = true): boolean {\n    const $dialog = this._$dialog;\n\n    if (!$dialog) {\n      return false;\n    }\n\n    if (open) {\n      if ($dialog.open) {\n        return false;\n      }\n\n      // Capture focus owner before the dialog steals it, so we can restore on close.\n      this._$opener = document.activeElement;\n      modal ? $dialog.showModal() : $dialog.show();\n      this.requestUpdate('open');\n\n      return true;\n    }\n\n    if (!$dialog.open) {\n      return false;\n    }\n\n    this._suppressNextCloseToggle = silent;\n    $dialog.close();\n    this.requestUpdate('open');\n\n    return true;\n  }\n\n  /** Dispatches `rc-dialog-toggle` with the current open state and return value. */\n  protected _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","NativeChildController","$dialog","requestCloseEvent","value","oldValue","returnValue","ev","nothing","$handle","DragController","ResizeController","changed","open","silent","modal","__decorateClass","property"],"mappings":"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"}

package/dist/rc-dialog-define.js

@@ -1,4 +1,4 @@
-import { R as e } from "./rc-dialog-BGtJgQDG.js";
+import { R as e } from "./rc-dialog-Dpj3ERfv.js";
 customElements.get("rc-dialog") || customElements.define("rc-dialog", e);
 export {
   e as RCDialog

package/dist/rc-dialog.js

@@ -1,4 +1,4 @@
-import { R as r } from "./rc-dialog-BGtJgQDG.js";
+import { R as r } from "./rc-dialog-Dpj3ERfv.js";
 export {
   r as RCDialog
 };

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

@@ -21,35 +21,30 @@ declare global {
     }
 }
 /**
- * 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.
+ * Draggable, resizable wrapper for a native <dialog>, following the WAI-ARIA Dialog Modal
+ * pattern.
+ *
+ * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-dialog rc-dialog docs}
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ WAI-ARIA Dialog Modal pattern}
  *
  * @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-request-close - Fired before the dialog closes (cancellable).
  * @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.
+     * Allow the dialog to be moved by dragging.
+     *
+     * Use `move-handle` to restrict dragging to a specific child
+     * element (e.g. a titlebar).
      */
     movable: boolean;
     /** CSS selector (within the inner `<dialog>`) for the drag handle element. */
@@ -65,8 +60,9 @@ export declare class RCDialog extends LitElement {
     /** 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.
+     * Proxied to the inner `<dialog closedby="...">` attribute.
+     *
+     * Progressive enhancement, no-op in older browsers.
      *
      * - `'any'`          — Escape OR backdrop click closes the dialog.
      * - `'closerequest'` — Escape only (browser default for modal dialogs).
@@ -75,19 +71,23 @@ export declare class RCDialog extends LitElement {
      */
     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.
+     * When true and the dialog is modal, a click on the backdrop area calls
+     * `requestClose()`.
      */
     lightDismiss: boolean;
+    /**
+     * Whether to open as modal with controlled open. Default: `true`.
+     */
+    modal: boolean;
+    /** The inner `<dialog>` element, resolved from the direct light-DOM child. */
+    protected get _$dialog(): HTMLDialogElement | null;
     private _controlledOpen;
     private _defaultOpen;
-    private _dialogRef;
-    private _observer;
+    private readonly _dialogController;
+    private _$wired;
     private _suppressNextCloseToggle;
     /** The element that had focus when the dialog was opened; restored on close. */
-    private _openerEl;
+    protected _$opener: Element | null;
     /** Whether the inner `<dialog>` is currently open. Host writes update silently. */
     get open(): boolean;
     set open(value: boolean | undefined);
@@ -98,42 +98,43 @@ export declare class RCDialog extends LitElement {
     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`. */
+    /**
+     * Opens the inner `<dialog>` (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.
+     * first.
      */
     requestClose(returnValue?: string): void;
-    private _dlg;
     render(): symbol;
-    connectedCallback(): void;
     firstUpdated(): void;
-    private _setupDialog;
+    /** Wires event listeners, drag/resize controllers, and initial open state for the inner `<dialog>`. */
+    protected _setupDialog($dialog?: HTMLDialogElement | null): void;
     updated(changed: PropertyValues): void;
     disconnectedCallback(): void;
-    private _teardownDialog;
-    private _onClose;
+    /** Removes all event listeners attached to the inner `<dialog>` and clears cached state. */
+    protected _teardownDialog(): void;
+    protected _onClose: () => void;
     /**
-     * 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).
+     * Intercepts the native `cancel` event.
      */
-    private _onCancel;
+    protected _onCancel: (e: Event) => void;
     /**
-     * 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.
+     * Detects backdrop clicks.
+     */
+    protected _onBackdropClick: (e: MouseEvent) => void;
+    /**
+     * Opens or closes the inner `<dialog>` and returns `true` if state actually changed.
+     *
+     * @param open - Whether to open (`true`) or close (`false`).
+     * @param silent - When `true`, suppresses the outgoing `rc-dialog-toggle` event.
+     * @param modal - Whether to call `showModal()` (`true`) or `show()` (`false`).
      */
-    private _onBackdropClick;
-    private _applyOpen;
-    private _dispatchToggle;
+    protected _applyOpen(open: boolean, silent: boolean, modal?: boolean): boolean;
+    /** Dispatches `rc-dialog-toggle` with the current open state and return value. */
+    protected _dispatchToggle(open: boolean): void;
 }
 export default RCDialog;

package/package.json

@@ -3,14 +3,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.0",
-  "description": "Headless draggable and resizable native dialog wrapper, built with Lit",
+  "version": "0.3.1",
+  "description": "Draggable, resizable wrapper for a native <dialog>.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
     "directory": "packages/rc-dialog"
   },
-  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-dialog",
   "license": "MIT",
   "type": "module",
   "files": [
@@ -37,21 +37,18 @@
   ],
   "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"
+    "test:browser": "vitest --run",
+    "test:browser:chrome": "vitest --run --project=chromium",
+    "test:browser:firefox": "vitest --run --project=firefox"
   },
   "dependencies": {
-    "@rcarls/rc-common": "workspace:^"
+    "@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",

package/dist/demo.css

@@ -1,85 +0,0 @@
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-:root {
-  color-scheme: light dark;
-  --rc-accent: Highlight; /* Chrome doesn't support AccentColor on the open web */
-}
-
-@supports (color: AccentColor) {
-  :root {
-    --rc-accent: AccentColor;
-  }
-}
-
-[data-theme="light"] { color-scheme: light; }
-[data-theme="dark"]  { color-scheme: dark;  }
-
-[data-theme="solarized-light"] {
-  color-scheme: light;
-  --rc-surface: #fdf6e3;
-  --rc-text:    #657b83;
-  --rc-border:  1px solid #93a1a1;
-  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .12);
-}
-
-[data-theme="solarized-dark"] {
-  color-scheme: dark;
-  --rc-surface: #002b36;
-  --rc-text:    #839496;
-  --rc-border:  1px solid #586e75;
-  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .3);
-}
-
-body {
-  font-family: system-ui, sans-serif;
-  margin: 0;
-}
-
-.demo-page {
-  max-width: 60rem;
-  margin: 0 auto;
-  padding: 2rem 1.5rem;
-}
-
-.demo-controls {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 2rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid ButtonBorder;
-}
-
-.demo-controls .demo-title {
-  flex: 1;
-}
-
-.demo-controls h1 {
-  margin: 0 0 0.15rem;
-  font-size: 1.5rem;
-}
-
-.demo-controls a {
-  font-size: 0.8rem;
-}
-
-.demo-section {
-  margin-bottom: 2rem;
-}
-
-.demo-section h2 {
-  margin: 0 0 0.5rem;
-}
-
-.theme-picker {
-  padding: 0.35em 0.75em;
-  font-family: inherit;
-  font-size: 0.8rem;
-  cursor: pointer;
-  border: 1px solid ButtonBorder;
-  border-radius: 4px;
-  background: Canvas;
-  color: CanvasText;
-}

package/dist/demo.js

@@ -1,40 +0,0 @@
-const THEMES = ['', 'light', 'dark', 'solarized-light', 'solarized-dark'];
-const LABELS = ['Auto', 'Light', 'Dark', 'Solarized ☀', 'Solarized ☾'];
-
-const stored = localStorage.getItem('rc-demo-theme') ?? '';
-applyTheme(stored);
-
-function applyTheme(theme) {
-  if (theme) {
-    document.documentElement.dataset.theme = theme;
-  } else {
-    delete document.documentElement.dataset.theme;
-  }
-}
-
-function currentIndex() {
-  const current = document.documentElement.dataset.theme ?? '';
-  const idx = THEMES.indexOf(current);
-  return idx === -1 ? 0 : idx;
-}
-
-function updateButtons() {
-  const label = LABELS[currentIndex()];
-  document.querySelectorAll('.theme-picker').forEach((btn) => {
-    btn.textContent = label;
-  });
-}
-
-window.cycleTheme = function () {
-  const next = THEMES[(currentIndex() + 1) % THEMES.length];
-  applyTheme(next);
-  localStorage.setItem('rc-demo-theme', next);
-  updateButtons();
-};
-
-document.addEventListener('DOMContentLoaded', () => {
-  updateButtons();
-  document.querySelectorAll('.theme-picker').forEach((btn) => {
-    btn.addEventListener('click', window.cycleTheme);
-  });
-});

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

@@ -1 +0,0 @@
-{"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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"}