@rcarls/rc-dialog 0.3.2 → 0.4.0

package/README.md

@@ -23,7 +23,9 @@ import { RCDialog } from '@rcarls/rc-dialog'; // named class export
 
 ## Basic usage
 
-Place a `<dialog>` element directly inside `<rc-dialog>`. The inner `<dialog>` must have `aria-labelledby` or `aria-label` to satisfy the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).
+Place a `<dialog>` element directly inside `<rc-dialog>`. The inner `<dialog>` must have
+`aria-labelledby` or `aria-label` to satisfy the
+[WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).
 
 ```html
 <rc-dialog id="my-dialog">
@@ -45,15 +47,17 @@ 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. |
+| `open` | `open` | `boolean` | None | 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. |
+| `modal` | None | `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. |
+| `moveHandle` | `move-handle` | `string` | `''` | CSS selector for the drag handle within the inner `<dialog>` (for example, `'.titlebar'`). Defaults to the whole dialog. |
 | `moveBounds` | `move-bounds` | `'viewport' \| 'parent'` | `'viewport'` | Constrains drag within the viewport or the nearest positioned ancestor. |
 | `moveStep` | `move-step` | `number` | `4` | Keyboard arrow-key step in px when moving. Shift multiplies by 10×. |
 | `resize` | `resize` | `'none' \| 'both' \| 'horizontal' \| 'vertical'` | `'none'` | Enables edge/corner resizing, mirroring CSS `resize` semantics. |
-| `resizeThreshold` | `resize-threshold` | `number` | `8` | Edge hit-test band in px (straddles the border — half inside, half outside). |
+| `resizeOrigin` | `resize-origin` | `'' \| 'top' \| 'right' \| 'bottom' \| 'left' \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `''` | Constrains fallback edge detection or supplies the default origin for explicit handles. Empty keeps free edge detection. |
+| `resizeHandle` | `resize-handle` | `string` | `''` | CSS selector for explicit resize handles within the inner `<dialog>`. Matching handles receive pointer and keyboard resize behavior. |
+| `resizeThreshold` | `resize-threshold` | `number` | `8` | Edge hit-test band in px (straddles the border, half inside and half outside). |
 | `resizeStep` | `resize-step` | `number` | `4` | Keyboard arrow-key step in px when resizing. Shift multiplies by 10×. |
 | `closedBy` | `closed-by` | `'any' \| 'closerequest' \| 'none' \| ''` | `''` | Proxied to the inner `<dialog closedby="...">` attribute (Chrome 134+, Safari 18.4+, Firefox 139+). `'any'` = Escape or backdrop click; `'closerequest'` = Escape only; `'none'` = programmatic only. |
 | `lightDismiss` | `light-dismiss` | `boolean` | `false` | JS fallback for backdrop-click dismissal. Detects clicks whose target is the `<dialog>` element itself and calls `requestClose()`. Works in all browsers alongside or instead of `closed-by`. |
@@ -81,14 +85,21 @@ 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-open` | No | None | 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-cancel` | No | None | 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. |
 
 ---
 
+### Theming
+
+Set `--rc-dialog-scrim` on `<rc-dialog>` or a theme scope to customize the modal
+backdrop color. Theme packages consume this token in their `::backdrop` styles.
+
+---
+
 ## Examples
 
 ### Movable dialog with a drag handle
@@ -105,7 +116,8 @@ returnValue: string  // The return value set when the dialog last closed.
 </rc-dialog>
 ```
 
-Drag the `.titlebar` to reposition. Focus the titlebar and use **Arrow keys** to move it (Shift = 10× step).
+Drag the `.titlebar` to reposition. Focus the titlebar and use **Arrow keys** to move it
+(Shift = 10× step).
 
 ### Movable + resizable
 
@@ -117,7 +129,30 @@ Drag the `.titlebar` to reposition. Focus the titlebar and use **Arrow keys** to
 </rc-dialog>
 ```
 
-All 8 resize handles are active (n, s, e, w, ne, nw, se, sw). Opposite-edge handles anchor the far side and move `left`/`top`, mirroring OS-window resize semantics. A small keyboard-accessible resize button is injected at the bottom-right corner.
+All eight resize handles are active (top, right, bottom, left, and the four corners).
+Opposite-edge handles anchor the far side and move `left` or `top`, mirroring OS-window resize
+semantics. A small keyboard-accessible resize button is injected at the bottom-right corner.
+
+### Explicit resize handle
+
+```html
+<rc-dialog id="sheet-like" resize="vertical" resize-origin="top" resize-handle=".resize-handle">
+  <dialog aria-labelledby="sheet-title">
+    <button
+      type="button"
+      class="resize-handle"
+      data-rc-dialog-resize-axis="y"
+      data-rc-dialog-resize-origin="top"
+      aria-label="Resize"
+    ></button>
+    <h2 id="sheet-title">Filters</h2>
+  </dialog>
+</rc-dialog>
+```
+
+Use `data-rc-dialog-resize-axis="x|y|both"` and
+`data-rc-dialog-resize-origin="top|right|bottom|left|top-left|..."`
+on individual handles to override the host resize direction or origin.
 
 ### Minimal / no-header dialog
 
@@ -138,7 +173,8 @@ No titlebar or footer structure is required. Any layout is valid.
 
 ### Alert / confirm dialog
 
-Use `role="alertdialog"` with `aria-describedby` pointing to the message text. Assistive technology treats this with higher urgency.
+Use `role="alertdialog"` with `aria-describedby` pointing to the message text. Assistive
+technology treats this with higher urgency.
 
 ```html
 <rc-dialog id="confirm">
@@ -157,7 +193,8 @@ Use `role="alertdialog"` with `aria-describedby` pointing to the message text. A
 
 ### Native form integration
 
-`<form method="dialog">` submits to the dialog: the submit button's `value` becomes `returnValue` and the dialog closes — no JavaScript needed.
+`<form method="dialog">` submits to the dialog: the submit button's `value` becomes
+`returnValue`, and the dialog closes without JavaScript.
 
 ```html
 <rc-dialog id="dlg">
@@ -189,7 +226,7 @@ Use `role="alertdialog"` with `aria-describedby` pointing to the message text. A
       <button onclick="document.querySelector('#dlg').requestClose('cancel')">✕</button>
     </div>
     <textarea id="note" rows="5"></textarea>
-    <p id="warning" hidden role="alert">Unsaved changes — save or discard first.</p>
+    <p id="warning" hidden role="alert">Unsaved changes; save or discard first.</p>
     <div class="footer">
       <button onclick="note.value=''; dlg.close('discard')">Discard</button>
       <button onclick="dlg.close('save')">Save</button>
@@ -219,7 +256,9 @@ Use `role="alertdialog"` with `aria-describedby` pointing to the message text. A
 </rc-dialog>
 ```
 
-`closed-by="any"` delegates to the browser's native light-dismiss on supporting browsers. `light-dismiss` adds a JS click-on-backdrop fallback that works everywhere and routes through `requestClose()` (so close guards still apply).
+`closed-by="any"` delegates to the browser's native light-dismiss on supporting browsers.
+`light-dismiss` adds a JS click-on-backdrop fallback that works everywhere and routes through
+`requestClose()`, so close guards still apply.
 
 ---
 
@@ -227,20 +266,26 @@ 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** — `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.
+- **Focus trapping:** Built into `showModal()` (Tab/Shift+Tab stays inside the dialog).
+- **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 behavior routes through `rc-dialog-request-close` so guards still
+  apply.
+- **`aria-modal`:** `showModal()` implies `aria-modal="true"` without an explicit attribute.
 
-**Required:** The inner `<dialog>` must have `aria-labelledby` or `aria-label`. In development mode the component logs a console warning if either is absent.
+**Required:** The inner `<dialog>` must have `aria-labelledby` or `aria-label`. In development
+mode the component logs a console warning if either is absent.
 
-**Alert dialogs:** When `role="alertdialog"` is set, add `aria-describedby` pointing to the message text. A dev-mode warning fires if it is missing.
+**Alert dialogs:** When `role="alertdialog"` is set, add `aria-describedby` pointing to the
+message text. A dev-mode warning fires if it is missing.
 
 ---
 
 ## CSS layout for scrollable dialogs
 
-When the dialog needs scrollable body content (especially when resizable), use flex layout so the body grows and the header/footer stay fixed:
+When the dialog needs scrollable body content (especially when resizable), use flex layout so
+the body grows and the header/footer stay fixed:
 
 ```css
 dialog[open] {
@@ -261,7 +306,9 @@ dialog[open] {
 }
 ```
 
-> **Note:** `display: flex` must be scoped to `dialog[open]`, not `dialog`. Author styles take precedence over the UA `dialog:not([open]) { display: none }` rule — scoping to `[open]` prevents all dialogs from being visible on page load.
+> **Note:** `display: flex` must be scoped to `dialog[open]`, not `dialog`. Author styles take
+> precedence over the UA `dialog:not([open]) { display: none }` rule. Scoping to `[open]`
+> prevents all dialogs from being visible on page load.
 
 ---
 

package/dist/custom-elements.json

@@ -48,6 +48,13 @@
           "kind": "class",
           "description": "Draggable, resizable wrapper for a native <dialog>, following the WAI-ARIA Dialog Modal\npattern.",
           "name": "RCDialog",
+          "cssProperties": [
+            {
+              "description": "Modal backdrop color.",
+              "name": "--rc-dialog-scrim",
+              "default": "color-mix(in srgb, CanvasText 32%, transparent)"
+            }
+          ],
           "slots": [
             {
               "description": "Place a `<dialog>` element with your content here.",
@@ -107,6 +114,26 @@
               "attribute": "resize",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "resizeOrigin",
+              "type": {
+                "text": "ResizeOrigin"
+              },
+              "default": "''",
+              "description": "Origin for resize edge hit-testing or explicit handles.\n\nEmpty preserves the historical free edge-detection behavior.",
+              "attribute": "resize-origin"
+            },
+            {
+              "kind": "field",
+              "name": "resizeHandle",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "CSS selector, scoped to the inner `<dialog>`, for one or more explicit\nresize handles.\n\nHandles may override host behavior with:\n- `data-rc-dialog-resize-axis=\"x|y|both\"`\n- `data-rc-dialog-resize-origin=\"top|right|bottom|left|top-left|...\"`",
+              "attribute": "resize-handle"
+            },
             {
               "kind": "field",
               "name": "resizeThreshold",
@@ -188,7 +215,7 @@
             {
               "kind": "field",
               "name": "_dialogController",
-              "privacy": "private",
+              "privacy": "protected",
               "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>.', }); } }, })"
             },
@@ -198,7 +225,7 @@
               "type": {
                 "text": "WeakRef<HTMLDialogElement> | null"
               },
-              "privacy": "private",
+              "privacy": "protected",
               "default": "null"
             },
             {
@@ -207,7 +234,7 @@
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
+              "privacy": "protected",
               "default": "false"
             },
             {
@@ -349,6 +376,117 @@
               "privacy": "protected",
               "description": "Detects backdrop clicks."
             },
+            {
+              "kind": "method",
+              "name": "_onResizeStart",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "_detail",
+                  "type": {
+                    "text": "ResizeLifecycleDetail"
+                  }
+                }
+              ],
+              "description": "Hook for subclasses to respond when a resize gesture begins."
+            },
+            {
+              "kind": "method",
+              "name": "_onResize",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "_detail",
+                  "type": {
+                    "text": "ResizeLifecycleDetail"
+                  }
+                }
+              ],
+              "description": "Hook for subclasses to respond to each resize update during an active gesture."
+            },
+            {
+              "kind": "method",
+              "name": "_onResizeEnd",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "_detail",
+                  "type": {
+                    "text": "ResizeLifecycleDetail"
+                  }
+                }
+              ],
+              "description": "Hook for subclasses to respond after a resize gesture has settled."
+            },
+            {
+              "kind": "method",
+              "name": "_resizeHandles",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "Element[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "$dialog",
+                  "type": {
+                    "text": "HTMLDialogElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_resizeDirectionForHandle",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "ResizeDirection"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "$handle",
+                  "type": {
+                    "text": "Element"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_resizeOriginForHandle",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "ResizeOrigin"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "$handle",
+                  "type": {
+                    "text": "Element"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_applyOpen",
@@ -364,19 +502,19 @@
                   "type": {
                     "text": "boolean"
                   },
-                  "description": "Whether to open (`true`) or close (`false`)."
+                  "description": "whether to open (`true`) or close (`false`)"
                 },
                 {
                   "name": "silent",
                   "type": {
                     "text": "boolean"
                   },
-                  "description": "When `true`, suppresses the outgoing `rc-dialog-toggle` event."
+                  "description": "when `true`, suppresses the outgoing `rc-dialog-toggle` event"
                 },
                 {
                   "name": "modal",
                   "default": "true",
-                  "description": "Whether to call `showModal()` (`true`) or `show()` (`false`)."
+                  "description": "whether to call `showModal()` (`true`) or `show()` (`false`)"
                 }
               ],
               "description": "Opens or closes the inner `<dialog>` and returns `true` if state actually changed."
@@ -431,101 +569,119 @@
           ],
           "attributes": [
             {
+              "description": "Whether the inner `<dialog>` is currently open. Host writes update silently.",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "open"
+            },
+            {
+              "description": "Initial uncontrolled open state.",
+              "name": "default-open",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "defaultOpen"
+            },
+            {
+              "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).",
               "name": "movable",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "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"
             },
             {
+              "description": "CSS selector (within the inner `<dialog>`) for the drag handle element.",
               "name": "move-handle",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "CSS selector (within the inner `<dialog>`) for the drag handle element.",
               "fieldName": "moveHandle"
             },
             {
+              "description": "Bounds constraint for movement.",
               "name": "move-bounds",
               "type": {
                 "text": "'viewport' | 'parent'"
               },
               "default": "'viewport'",
-              "description": "Bounds constraint for movement.",
               "fieldName": "moveBounds"
             },
             {
+              "description": "Keyboard arrow-key step in px for moving.",
               "name": "move-step",
               "type": {
                 "text": "number"
               },
               "default": "4",
-              "description": "Keyboard arrow-key step in px for moving.",
               "fieldName": "moveStep"
             },
             {
+              "description": "Enable resizing, mirroring the CSS `resize` property values.",
               "name": "resize",
               "type": {
                 "text": "'none' | 'both' | 'horizontal' | 'vertical'"
               },
               "default": "'none'",
-              "description": "Enable resizing, mirroring the CSS `resize` property values.",
               "fieldName": "resize"
             },
             {
+              "description": "Origin for resize edge hit-testing or explicit handles.\n\nEmpty preserves the historical free edge-detection behavior.",
+              "name": "resize-origin",
+              "type": {
+                "text": "ResizeOrigin"
+              },
+              "default": "''",
+              "fieldName": "resizeOrigin"
+            },
+            {
+              "description": "CSS selector, scoped to the inner `<dialog>`, for one or more explicit\nresize handles.\n\nHandles may override host behavior with:\n- `data-rc-dialog-resize-axis=\"x|y|both\"`\n- `data-rc-dialog-resize-origin=\"top|right|bottom|left|top-left|...\"`",
+              "name": "resize-handle",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "resizeHandle"
+            },
+            {
+              "description": "Edge hit-test thickness in px for resize detection.",
               "name": "resize-threshold",
               "type": {
                 "text": "number"
               },
               "default": "8",
-              "description": "Edge hit-test thickness in px for resize detection.",
               "fieldName": "resizeThreshold"
             },
             {
+              "description": "Keyboard arrow-key step in px for resizing.",
               "name": "resize-step",
               "type": {
                 "text": "number"
               },
               "default": "4",
-              "description": "Keyboard arrow-key step in px for resizing.",
               "fieldName": "resizeStep"
             },
             {
+              "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.",
               "name": "closed-by",
               "type": {
                 "text": "'any' | 'closerequest' | 'none' | ''"
               },
               "default": "''",
-              "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"
             },
             {
+              "description": "When true and the dialog is modal, a click on the backdrop area calls\n`requestClose()`.",
               "name": "light-dismiss",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true and the dialog is modal, a click on the backdrop area calls\n`requestClose()`.",
               "fieldName": "lightDismiss"
-            },
-            {
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Whether the inner `<dialog>` is currently open. Host writes update silently.",
-              "fieldName": "open"
-            },
-            {
-              "name": "default-open",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Initial uncontrolled open state.",
-              "fieldName": "defaultOpen"
             }
           ],
           "superclass": {

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

@@ -1,14 +1,14 @@
-import { LitElement as a, nothing as d } from "lit";
-import { property as i } from "lit/decorators.js";
-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 && _(e, t, s), s;
+import { LitElement as p, nothing as u } from "lit";
+import { property as r } from "lit/decorators.js";
+import { NativeChildController as c, DragController as _, ResizeController as d } from "@rcarls/rc-common";
+var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (l, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? g(e, t) : e, a = l.length - 1, h; a >= 0; a--)
+    (h = l[a]) && (s = (i ? h(e, t, s) : h(s)) || s);
+  return i && s && f(e, t, s), s;
 };
-class r extends a {
+class n extends p {
   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.modal = !0, this._controlledOpen = void 0, this._defaultOpen = !1, this._dialogController = new u(this, {
+    super(...arguments), this.movable = !1, this.moveHandle = "", this.moveBounds = "viewport", this.moveStep = 4, this.resize = "none", this.resizeOrigin = "", this.resizeHandle = "", this.resizeThreshold = 8, this.resizeStep = 4, this.closedBy = "", this.lightDismiss = !1, this.modal = !0, this._controlledOpen = void 0, this._defaultOpen = !1, this._dialogController = new c(this, {
       selector: ":scope > dialog",
       observe: !0,
       onChange: (e) => this._setupDialog(e),
@@ -83,12 +83,12 @@ class r extends a {
       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);
+        const i = new Event("cancel", { cancelable: !0, bubbles: !1 });
+        !t.dispatchEvent(i) || t.close(e);
       }
   }
   render() {
-    return d;
+    return u;
   }
   firstUpdated() {
     this._dialogController.sync();
@@ -102,20 +102,43 @@ class r extends a {
     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 c(this, {
+        new _(this, {
           target: e,
           handle: t,
           bounds: this.moveBounds,
           step: this.moveStep
         });
       }
-      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.modal) : this.defaultOpen && this._applyOpen(!0, !0, this.modal);
+      if (this.resize !== "none") {
+        const t = this._resizeHandles(e);
+        if (t.length > 0)
+          for (const i of t)
+            new d(this, {
+              target: e,
+              direction: this._resizeDirectionForHandle(i),
+              handle: i,
+              origin: this._resizeOriginForHandle(i),
+              threshold: this.resizeThreshold,
+              step: this.resizeStep,
+              bounds: this.moveBounds,
+              onResizeStart: (s) => this._onResizeStart(s),
+              onResize: (s) => this._onResize(s),
+              onResizeEnd: (s) => this._onResizeEnd(s)
+            });
+        else
+          new d(this, {
+            target: e,
+            direction: this.resize,
+            origin: this.resizeOrigin,
+            threshold: this.resizeThreshold,
+            step: this.resizeStep,
+            bounds: this.moveBounds,
+            onResizeStart: (i) => this._onResizeStart(i),
+            onResize: (i) => this._onResize(i),
+            onResizeEnd: (i) => this._onResizeEnd(i)
+          });
+      }
+      this._controlledOpen !== void 0 ? this._applyOpen(this._controlledOpen, !0, this.modal) : this.defaultOpen && this._applyOpen(!0, !0, this.modal);
     }
   }
   updated(e) {
@@ -130,16 +153,49 @@ class r extends a {
     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);
   }
+  /** Hook for subclasses to respond when a resize gesture begins. */
+  _onResizeStart(e) {
+  }
+  /** Hook for subclasses to respond to each resize update during an active gesture. */
+  _onResize(e) {
+  }
+  /** Hook for subclasses to respond after a resize gesture has settled. */
+  _onResizeEnd(e) {
+  }
+  _resizeHandles(e) {
+    if (!this.resizeHandle)
+      return [];
+    try {
+      return [...e.querySelectorAll(this.resizeHandle)];
+    } catch {
+      return [];
+    }
+  }
+  _resizeDirectionForHandle(e) {
+    switch (e.getAttribute("data-rc-dialog-resize-axis")) {
+      case "x":
+        return "horizontal";
+      case "y":
+        return "vertical";
+      case "both":
+        return "both";
+      default:
+        return this.resize;
+    }
+  }
+  _resizeOriginForHandle(e) {
+    return e.getAttribute("data-rc-dialog-resize-origin") ?? this.resizeOrigin;
+  }
   /**
    * 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`).
+   * @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) {
+  _applyOpen(e, t, i = !0) {
     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;
+    return s ? e ? s.open ? !1 : (this._$opener = document.activeElement, i ? 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) {
@@ -153,39 +209,45 @@ class r extends a {
   }
 }
 o([
-  i({ type: Boolean, reflect: !0 })
-], r.prototype, "movable", 2);
+  r({ type: Boolean, reflect: !0 })
+], n.prototype, "movable", 2);
+o([
+  r({ type: String, attribute: "move-handle" })
+], n.prototype, "moveHandle", 2);
+o([
+  r({ type: String, attribute: "move-bounds" })
+], n.prototype, "moveBounds", 2);
 o([
-  i({ type: String, attribute: "move-handle" })
-], r.prototype, "moveHandle", 2);
+  r({ type: Number, attribute: "move-step" })
+], n.prototype, "moveStep", 2);
 o([
-  i({ type: String, attribute: "move-bounds" })
-], r.prototype, "moveBounds", 2);
+  r({ type: String, reflect: !0 })
+], n.prototype, "resize", 2);
 o([
-  i({ type: Number, attribute: "move-step" })
-], r.prototype, "moveStep", 2);
+  r({ type: String, attribute: "resize-origin" })
+], n.prototype, "resizeOrigin", 2);
 o([
-  i({ type: String, reflect: !0 })
-], r.prototype, "resize", 2);
+  r({ type: String, attribute: "resize-handle" })
+], n.prototype, "resizeHandle", 2);
 o([
-  i({ type: Number, attribute: "resize-threshold" })
-], r.prototype, "resizeThreshold", 2);
+  r({ type: Number, attribute: "resize-threshold" })
+], n.prototype, "resizeThreshold", 2);
 o([
-  i({ type: Number, attribute: "resize-step" })
-], r.prototype, "resizeStep", 2);
+  r({ type: Number, attribute: "resize-step" })
+], n.prototype, "resizeStep", 2);
 o([
-  i({ type: String, attribute: "closed-by", reflect: !0 })
-], r.prototype, "closedBy", 2);
+  r({ type: String, attribute: "closed-by", reflect: !0 })
+], n.prototype, "closedBy", 2);
 o([
-  i({ type: Boolean, attribute: "light-dismiss" })
-], r.prototype, "lightDismiss", 2);
+  r({ type: Boolean, attribute: "light-dismiss" })
+], n.prototype, "lightDismiss", 2);
 o([
-  i({ type: Boolean, attribute: "open", reflect: !0 })
-], r.prototype, "open", 1);
+  r({ type: Boolean, attribute: "open", reflect: !0 })
+], n.prototype, "open", 1);
 o([
-  i({ type: Boolean, attribute: "default-open" })
-], r.prototype, "defaultOpen", 1);
+  r({ type: Boolean, attribute: "default-open" })
+], n.prototype, "defaultOpen", 1);
 export {
-  r as R
+  n as R
 };
-//# sourceMappingURL=rc-dialog-Dpj3ERfv.js.map
+//# sourceMappingURL=rc-dialog-D9jUBKJn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rc-dialog-D9jUBKJn.js","sources":["../src/rc-dialog.ts"],"sourcesContent":["import { LitElement, nothing, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport {\n  DragController,\n  NativeChildController,\n  ResizeController,\n  type ResizeDirection,\n  type ResizeLifecycleDetail,\n  type ResizeOrigin,\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 * @attr open - Controlled open state. Reads the inner `<dialog>.open` value.\n * @attr default-open - Initial uncontrolled open state.\n * @attr movable - Allow the dialog to be moved by dragging.\n * @attr move-handle - CSS selector (within the inner `<dialog>`) for the drag handle element.\n * @attr move-bounds - Bounds constraint for movement: `viewport` or `parent`.\n * @attr move-step - Keyboard arrow-key step in px for moving.\n * @attr resize - Enable resizing, mirroring the CSS `resize` property values.\n * @attr resize-origin - Origin for resize edge hit-testing or explicit handles.\n * @attr resize-handle - CSS selector, scoped to the inner `<dialog>`, for one or more explicit\n *   resize handles.\n * @attr resize-threshold - Edge hit-test thickness in px for resize detection.\n * @attr resize-step - Keyboard arrow-key step in px for resizing.\n * @attr closed-by - Proxied to the inner `<dialog closedby=\"...\">` attribute.\n * @attr light-dismiss - When present and the dialog is modal, a click on the backdrop area calls\n *   `requestClose()`.\n *\n * @cssprop [--rc-dialog-scrim=color-mix(in srgb, CanvasText 32%, transparent)] - Modal backdrop color.\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  /**\n   * Origin for resize edge hit-testing or explicit handles.\n   *\n   * Empty preserves the historical free edge-detection behavior.\n   */\n  @property({ type: String, attribute: 'resize-origin' })\n  resizeOrigin: ResizeOrigin = '';\n\n  /**\n   * CSS selector, scoped to the inner `<dialog>`, for one or more explicit\n   * resize handles.\n   *\n   * Handles may override host behavior with:\n   * - `data-rc-dialog-resize-axis=\"x|y|both\"`\n   * - `data-rc-dialog-resize-origin=\"top|right|bottom|left|top-left|...\"`\n   */\n  @property({ type: String, attribute: 'resize-handle' })\n  resizeHandle = '';\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  protected 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\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  protected _$wired: WeakRef<HTMLDialogElement> | null = null;\n  protected _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\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      const $handles = this._resizeHandles($dialog);\n\n      if ($handles.length > 0) {\n        for (const $handle of $handles) {\n          // TODO: add a separate resize-bounds attribute; moveBounds is a proxy for now.\n          new ResizeController(this, {\n            target: $dialog,\n            direction: this._resizeDirectionForHandle($handle),\n            handle: $handle,\n            origin: this._resizeOriginForHandle($handle),\n            threshold: this.resizeThreshold,\n            step: this.resizeStep,\n            bounds: this.moveBounds,\n            onResizeStart: (detail) => this._onResizeStart(detail),\n            onResize: (detail) => this._onResize(detail),\n            onResizeEnd: (detail) => this._onResizeEnd(detail),\n          });\n        }\n      } else {\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          origin: this.resizeOrigin,\n          threshold: this.resizeThreshold,\n          step: this.resizeStep,\n          bounds: this.moveBounds,\n          onResizeStart: (detail) => this._onResizeStart(detail),\n          onResize: (detail) => this._onResize(detail),\n          onResizeEnd: (detail) => this._onResizeEnd(detail),\n        });\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  /** Hook for subclasses to respond when a resize gesture begins. */\n  protected _onResizeStart(_detail: ResizeLifecycleDetail): void {}\n\n  /** Hook for subclasses to respond to each resize update during an active gesture. */\n  protected _onResize(_detail: ResizeLifecycleDetail): void {}\n\n  /** Hook for subclasses to respond after a resize gesture has settled. */\n  protected _onResizeEnd(_detail: ResizeLifecycleDetail): void {}\n\n  protected _resizeHandles($dialog: HTMLDialogElement): Element[] {\n    if (!this.resizeHandle) {\n      return [];\n    }\n\n    try {\n      return [...$dialog.querySelectorAll(this.resizeHandle)];\n    } catch {\n      if (import.meta.env.DEV) {\n        console.warn('[rc-dialog] Invalid resize-handle selector.', this.resizeHandle);\n      }\n\n      return [];\n    }\n  }\n\n  protected _resizeDirectionForHandle($handle: Element): ResizeDirection {\n    const axis = $handle.getAttribute('data-rc-dialog-resize-axis');\n\n    switch (axis) {\n      case 'x':\n        return 'horizontal';\n      case 'y':\n        return 'vertical';\n      case 'both':\n        return 'both';\n      default:\n        return this.resize;\n    }\n  }\n\n  protected _resizeOriginForHandle($handle: Element): ResizeOrigin {\n    return (\n      ($handle.getAttribute('data-rc-dialog-resize-origin') as ResizeOrigin | null) ??\n      this.resizeOrigin\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","$handles","ResizeController","detail","changed","_detail","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-Dpj3ERfv.js";
+import { R as e } from "./rc-dialog-D9jUBKJn.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-Dpj3ERfv.js";
+import { R as r } from "./rc-dialog-D9jUBKJn.js";
 export {
   r as RCDialog
 };

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

@@ -1,4 +1,5 @@
 import { LitElement, PropertyValues } from 'lit';
+import { NativeChildController, ResizeDirection, ResizeLifecycleDetail, ResizeOrigin } from '@rcarls/rc-common';
 /** Detail shape for `rc-dialog-close` and `rc-dialog-request-close`. */
 export interface RCDialogCloseEvent {
     returnValue: string;
@@ -37,6 +38,24 @@ declare global {
  * @fires rc-dialog-close - Mirrors the inner `<dialog>` close event.
  *   `detail: { returnValue: string }`
  *
+ * @attr open - Controlled open state. Reads the inner `<dialog>.open` value.
+ * @attr default-open - Initial uncontrolled open state.
+ * @attr movable - Allow the dialog to be moved by dragging.
+ * @attr move-handle - CSS selector (within the inner `<dialog>`) for the drag handle element.
+ * @attr move-bounds - Bounds constraint for movement: `viewport` or `parent`.
+ * @attr move-step - Keyboard arrow-key step in px for moving.
+ * @attr resize - Enable resizing, mirroring the CSS `resize` property values.
+ * @attr resize-origin - Origin for resize edge hit-testing or explicit handles.
+ * @attr resize-handle - CSS selector, scoped to the inner `<dialog>`, for one or more explicit
+ *   resize handles.
+ * @attr resize-threshold - Edge hit-test thickness in px for resize detection.
+ * @attr resize-step - Keyboard arrow-key step in px for resizing.
+ * @attr closed-by - Proxied to the inner `<dialog closedby="...">` attribute.
+ * @attr light-dismiss - When present and the dialog is modal, a click on the backdrop area calls
+ *   `requestClose()`.
+ *
+ * @cssprop [--rc-dialog-scrim=color-mix(in srgb, CanvasText 32%, transparent)] - Modal backdrop color.
+ *
  */
 export declare class RCDialog extends LitElement {
     createRenderRoot(): this;
@@ -55,6 +74,21 @@ export declare class RCDialog extends LitElement {
     moveStep: number;
     /** Enable resizing, mirroring the CSS `resize` property values. */
     resize: 'none' | 'both' | 'horizontal' | 'vertical';
+    /**
+     * Origin for resize edge hit-testing or explicit handles.
+     *
+     * Empty preserves the historical free edge-detection behavior.
+     */
+    resizeOrigin: ResizeOrigin;
+    /**
+     * CSS selector, scoped to the inner `<dialog>`, for one or more explicit
+     * resize handles.
+     *
+     * Handles may override host behavior with:
+     * - `data-rc-dialog-resize-axis="x|y|both"`
+     * - `data-rc-dialog-resize-origin="top|right|bottom|left|top-left|..."`
+     */
+    resizeHandle: string;
     /** Edge hit-test thickness in px for resize detection. */
     resizeThreshold: number;
     /** Keyboard arrow-key step in px for resizing. */
@@ -83,9 +117,9 @@ export declare class RCDialog extends LitElement {
     protected get _$dialog(): HTMLDialogElement | null;
     private _controlledOpen;
     private _defaultOpen;
-    private readonly _dialogController;
-    private _$wired;
-    private _suppressNextCloseToggle;
+    protected readonly _dialogController: NativeChildController<HTMLDialogElement>;
+    protected _$wired: WeakRef<HTMLDialogElement> | null;
+    protected _suppressNextCloseToggle: boolean;
     /** The element that had focus when the dialog was opened; restored on close. */
     protected _$opener: Element | null;
     /** Whether the inner `<dialog>` is currently open. Host writes update silently. */
@@ -126,12 +160,21 @@ export declare class RCDialog extends LitElement {
      * Detects backdrop clicks.
      */
     protected _onBackdropClick: (e: MouseEvent) => void;
+    /** Hook for subclasses to respond when a resize gesture begins. */
+    protected _onResizeStart(_detail: ResizeLifecycleDetail): void;
+    /** Hook for subclasses to respond to each resize update during an active gesture. */
+    protected _onResize(_detail: ResizeLifecycleDetail): void;
+    /** Hook for subclasses to respond after a resize gesture has settled. */
+    protected _onResizeEnd(_detail: ResizeLifecycleDetail): void;
+    protected _resizeHandles($dialog: HTMLDialogElement): Element[];
+    protected _resizeDirectionForHandle($handle: Element): ResizeDirection;
+    protected _resizeOriginForHandle($handle: Element): ResizeOrigin;
     /**
      * 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`).
+     * @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`)
      */
     protected _applyOpen(open: boolean, silent: boolean, modal?: boolean): boolean;
     /** Dispatches `rc-dialog-toggle` with the current open state and return value. */

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Draggable, resizable wrapper for a native <dialog>.",
   "repository": {
     "type": "git",

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

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