@rcarls/rc-dialog 0.1.0

package/dist/custom-elements.json

@@ -0,0 +1,536 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "rc-dialog",
+          "declaration": {
+            "name": "RCDialog",
+            "module": "/src/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/rc-dialog.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/rc-dialog.ts",
+      "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.",
+          "name": "RCDialog",
+          "slots": [
+            {
+              "description": "Place a `<dialog>` element with your content here.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "movable",
+              "type": {
+                "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.",
+              "attribute": "movable",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "moveHandle",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "CSS selector (within the inner `<dialog>`) for the drag handle element.",
+              "attribute": "move-handle"
+            },
+            {
+              "kind": "field",
+              "name": "moveBounds",
+              "type": {
+                "text": "'viewport' | 'parent'"
+              },
+              "default": "'viewport'",
+              "description": "Bounds constraint for movement.",
+              "attribute": "move-bounds"
+            },
+            {
+              "kind": "field",
+              "name": "moveStep",
+              "type": {
+                "text": "number"
+              },
+              "default": "4",
+              "description": "Keyboard arrow-key step in px for moving.",
+              "attribute": "move-step"
+            },
+            {
+              "kind": "field",
+              "name": "resize",
+              "type": {
+                "text": "'none' | 'both' | 'horizontal' | 'vertical'"
+              },
+              "default": "'none'",
+              "description": "Enable resizing, mirroring the CSS `resize` property values.",
+              "attribute": "resize",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "resizeThreshold",
+              "type": {
+                "text": "number"
+              },
+              "default": "8",
+              "description": "Edge hit-test thickness in px for resize detection.",
+              "attribute": "resize-threshold"
+            },
+            {
+              "kind": "field",
+              "name": "resizeStep",
+              "type": {
+                "text": "number"
+              },
+              "default": "4",
+              "description": "Keyboard arrow-key step in px for resizing.",
+              "attribute": "resize-step"
+            },
+            {
+              "kind": "field",
+              "name": "closedBy",
+              "type": {
+                "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.",
+              "attribute": "closed-by",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "lightDismiss",
+              "type": {
+                "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.",
+              "attribute": "light-dismiss"
+            },
+            {
+              "kind": "field",
+              "name": "_controlledOpen",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private",
+              "default": "undefined"
+            },
+            {
+              "kind": "field",
+              "name": "_defaultOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_dialogRef",
+              "type": {
+                "text": "WeakRef<HTMLDialogElement> | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_observer",
+              "type": {
+                "text": "MutationObserver | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_suppressNextCloseToggle",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_openerEl",
+              "type": {
+                "text": "Element | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "description": "The element that had focus when the dialog was opened; restored on close."
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the inner `<dialog>` is currently open. Host writes update silently.",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "defaultOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Initial uncontrolled open state.",
+              "attribute": "default-open"
+            },
+            {
+              "kind": "field",
+              "name": "returnValue",
+              "type": {
+                "text": "string"
+              },
+              "description": "The return value set when the dialog was closed.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "showModal",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Opens the inner `<dialog>` as a modal and fires `rc-dialog-open`."
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Opens the inner `<dialog>` as a non-modal and fires `rc-dialog-open`."
+            },
+            {
+              "kind": "method",
+              "name": "close",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "returnValue",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Closes the inner `<dialog>`, optionally setting a return value."
+            },
+            {
+              "kind": "method",
+              "name": "requestClose",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "returnValue",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "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"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_setupDialog",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_teardownDialog",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_onClose",
+              "privacy": "private"
+            },
+            {
+              "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)."
+            },
+            {
+              "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."
+            },
+            {
+              "kind": "method",
+              "name": "_applyOpen",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "open",
+                  "type": {
+                    "text": "boolean"
+                  }
+                },
+                {
+                  "name": "silent",
+                  "type": {
+                    "text": "boolean"
+                  }
+                },
+                {
+                  "name": "modal",
+                  "default": "true"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_dispatchToggle",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "open",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "rc-dialog-open",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the dialog opens via `showModal()` or `show()`."
+            },
+            {
+              "name": "rc-dialog-toggle",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "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 }`",
+              "name": "rc-dialog-request-close"
+            },
+            {
+              "description": "Mirrors the inner `<dialog>` cancel event when the close was not prevented. Backward-compatible alias for `rc-dialog-request-close`.",
+              "name": "rc-dialog-cancel"
+            },
+            {
+              "description": "Mirrors the inner `<dialog>` close event. `detail: { returnValue: string }`",
+              "name": "rc-dialog-close"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "movable",
+              "type": {
+                "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.",
+              "fieldName": "movable"
+            },
+            {
+              "name": "move-handle",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "CSS selector (within the inner `<dialog>`) for the drag handle element.",
+              "fieldName": "moveHandle"
+            },
+            {
+              "name": "move-bounds",
+              "type": {
+                "text": "'viewport' | 'parent'"
+              },
+              "default": "'viewport'",
+              "description": "Bounds constraint for movement.",
+              "fieldName": "moveBounds"
+            },
+            {
+              "name": "move-step",
+              "type": {
+                "text": "number"
+              },
+              "default": "4",
+              "description": "Keyboard arrow-key step in px for moving.",
+              "fieldName": "moveStep"
+            },
+            {
+              "name": "resize",
+              "type": {
+                "text": "'none' | 'both' | 'horizontal' | 'vertical'"
+              },
+              "default": "'none'",
+              "description": "Enable resizing, mirroring the CSS `resize` property values.",
+              "fieldName": "resize"
+            },
+            {
+              "name": "resize-threshold",
+              "type": {
+                "text": "number"
+              },
+              "default": "8",
+              "description": "Edge hit-test thickness in px for resize detection.",
+              "fieldName": "resizeThreshold"
+            },
+            {
+              "name": "resize-step",
+              "type": {
+                "text": "number"
+              },
+              "default": "4",
+              "description": "Keyboard arrow-key step in px for resizing.",
+              "fieldName": "resizeStep"
+            },
+            {
+              "name": "closed-by",
+              "type": {
+                "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.",
+              "fieldName": "closedBy"
+            },
+            {
+              "name": "light-dismiss",
+              "type": {
+                "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.",
+              "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": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "rc-dialog",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RCDialog",
+          "declaration": {
+            "name": "RCDialog",
+            "module": "src/rc-dialog.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "RCDialog",
+            "module": "src/rc-dialog.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/demo.css

@@ -0,0 +1,85 @@
+*, *::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

@@ -0,0 +1,40 @@
+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);
+  });
+});