@lvl99dotcom/paintcanvas 0.4.0 → 0.6.0

package/dist/ui/elements/PcCanvas/style.js

@@ -1,3 +1,3 @@
 // src/ui/elements/PcCanvas/style.css?inline
-var style_default = ":host {\n  display: block;\n  position: absolute;\n  inset: 0;\n  touch-action: none;\n}\ncanvas {\n  display: block;\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n}\ncanvas.outlines,\ncanvas.sampler {\n  pointer-events: none;\n}\ncanvas.overlay {\n  pointer-events: none;\n  /* Inverts what is underneath so the brush outline is visible on any colour */\n  mix-blend-mode: difference;\n}\n";
+var style_default = ":host {\n  display: block;\n  position: absolute;\n  inset: 0;\n  touch-action: none;\n}\ncanvas {\n  display: block;\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n}\ncanvas[hidden] {\n  display: none;\n}\ncanvas.outlines,\ncanvas.sampler {\n  pointer-events: none;\n}\ncanvas.overlay {\n  pointer-events: none;\n  /* Inverts what is underneath so the brush outline is visible on any colour */\n  mix-blend-mode: difference;\n}\n";
 export { style_default as default };

package/dist/ui/elements/PcCanvasMap/style.js

@@ -1,3 +1,3 @@
 // src/ui/elements/PcCanvasMap/style.css?inline
-var style_default = ":host {\n  display: block;\n  position: relative;\n  touch-action: none;\n  /* A solid grey border, drawn outside so the map and its frame keep their size and position */\n  outline: 1px solid var(--pc-border);\n}\ncanvas {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n/* The part of the canvas the user can see */\n.frame {\n  position: absolute;\n  outline: 1px solid var(--pc-text);\n  pointer-events: none;\n}\n";
+var style_default = ":host {\n  display: block;\n  position: relative;\n  touch-action: none;\n  /* A solid grey border, drawn outside so the map and its frame keep their size and position */\n  outline: 1px solid var(--pc-map-border);\n}\ncanvas {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n/* The part of the canvas the user can see */\n.frame {\n  position: absolute;\n  outline: 1px solid var(--pc-map-frame);\n  pointer-events: none;\n}\n";
 export { style_default as default };

package/dist/ui/elements/PcClipboardTools/index.d.ts

@@ -0,0 +1,49 @@
+import { nothing } from "lit";
+import { PcElement } from "../../base";
+import PaintCanvas, { Tool } from "../../../lib/classes/PaintCanvas";
+import "../PcContextMenu";
+/** The tools that cut, copy and paste are shown for: the brush, eraser, lassos and Move tool */
+export declare const CLIPBOARD_TOOLS: readonly Tool[];
+/**
+ * Cut, copy, copy merged and paste buttons for the canvas's masked image data, shown for the brush, eraser, lassos and
+ * Move tool (see `CLIPBOARD_TOOLS`). "Copy merged" copies the shown layers mixed as shown (see `PaintCanvas.copyMerged`).
+ * Cut and both copies work while there's a mask and no transform is pending; paste while there's copied image data.
+ * While `narrow`, they're one ⋮ menu (`pc-context-menu`) instead.
+ *
+ * `<paint-canvas>` puts it at the end of its top pane, after the tool settings.
+ *
+ * @example
+ * html`<pc-clipboard-tools .app=${app} ?narrow=${narrow}></pc-clipboard-tools>`
+ */
+export declare class PcClipboardTools extends PcElement {
+    static properties: {
+        app: {
+            attribute: boolean;
+        };
+        narrow: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    app?: PaintCanvas;
+    /** Whether the buttons are one ⋮ menu (e.g. while the layout is narrow) */
+    narrow: boolean;
+    private changes;
+    constructor();
+    /** Cut, copy, copy merged and paste, each with whether it can be done now */
+    private actions;
+    /** Hide for tools without clipboard actions (e.g. zoom) */
+    protected willUpdate(): void;
+    render(): import("lit").TemplateResult<1> | typeof nothing | import("lit").TemplateResult<1>[];
+}

package/dist/ui/elements/PcClipboardTools/index.js

@@ -0,0 +1,125 @@
+import { Tool } from "../../../lib/classes/PaintCanvas/tool.js";
+import { PcElement, defineElement } from "../../base/index.js";
+import ChangeController from "../../ChangeController/index.js";
+import { PILLS_CSS } from "../../styles/index.js";
+import "../../../lib/classes/PaintCanvas/index.js";
+import "../PcContextMenu/index.js";
+import { css, html, nothing, unsafeCSS } from "lit";
+// src/ui/elements/PcClipboardTools/index.ts
+/** The tools that cut, copy and paste are shown for: the brush, eraser, lassos and Move tool */
+var CLIPBOARD_TOOLS = [
+	Tool.Brush,
+	Tool.Eraser,
+	Tool.RectangleLasso,
+	Tool.CircleLasso,
+	Tool.PolygonLasso,
+	Tool.FreeformLasso,
+	Tool.Move
+];
+/**
+* Cut, copy, copy merged and paste buttons for the canvas's masked image data, shown for the brush, eraser, lassos and
+* Move tool (see `CLIPBOARD_TOOLS`). "Copy merged" copies the shown layers mixed as shown (see `PaintCanvas.copyMerged`).
+* Cut and both copies work while there's a mask and no transform is pending; paste while there's copied image data.
+* While `narrow`, they're one ⋮ menu (`pc-context-menu`) instead.
+*
+* `<paint-canvas>` puts it at the end of its top pane, after the tool settings.
+*
+* @example
+* html`<pc-clipboard-tools .app=${app} ?narrow=${narrow}></pc-clipboard-tools>`
+*/
+var PcClipboardTools = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		app: { attribute: false },
+		narrow: {
+			type: Boolean,
+			reflect: true
+		}
+	};
+	static styles = [
+		PcElement.styles,
+		unsafeCSS(PILLS_CSS),
+		css`
+      :host {
+        display: flex;
+        flex: none;
+        align-items: center;
+        gap: 8px;
+        padding: 4px 8px;
+        background: var(--pc-bar);
+        border-bottom: 1px solid var(--pc-surface-active);
+      }
+      :host([hidden]) {
+        display: none;
+      }
+    `
+	];
+	changes = new ChangeController(this, () => this.app ? [
+		this.app,
+		this.app.selection,
+		this.app.transform
+	] : []);
+	constructor() {
+		super();
+		this.narrow = false;
+	}
+	/** Cut, copy, copy merged and paste, each with whether it can be done now */
+	actions(app) {
+		const noCopy = !app.selection.active || app.transform.pending;
+		return [
+			{
+				name: "cut",
+				label: this.t("paintCanvas.common.cut"),
+				disabled: noCopy,
+				run: () => app.cut()
+			},
+			{
+				name: "copy",
+				label: this.t("paintCanvas.common.copy"),
+				disabled: noCopy,
+				run: () => app.copy()
+			},
+			{
+				name: "copy-merged",
+				label: this.t("paintCanvas.common.copyMerged"),
+				disabled: noCopy,
+				run: () => app.copyMerged()
+			},
+			{
+				name: "paste",
+				label: this.t("paintCanvas.common.paste"),
+				disabled: !app.hasClipboard,
+				run: () => app.paste()
+			}
+		];
+	}
+	/** Hide for tools without clipboard actions (e.g. zoom) */
+	willUpdate() {
+		this.hidden = !this.app || !CLIPBOARD_TOOLS.includes(this.app.tool);
+	}
+	render() {
+		const app = this.app;
+		if (!app || this.hidden) return nothing;
+		const actions = this.actions(app);
+		if (this.narrow) return html`<pc-context-menu
+        class="more"
+        label=${this.t("paintCanvas.toolSettings.moreActions")}
+        .items=${actions.map(({ name, label, disabled }) => ({
+			value: name,
+			label,
+			disabled
+		}))}
+        @pc-select=${(event) => actions.find((action) => action.name === event.detail.value)?.run()}
+      ></pc-context-menu>`;
+		return actions.map((action) => html`<button
+          type="button"
+          class="pill-s ${action.name}"
+          ?disabled=${action.disabled}
+          @click=${action.run}
+        >
+          ${action.label}
+        </button>`);
+	}
+};
+defineElement("pc-clipboard-tools", PcClipboardTools);
+export { CLIPBOARD_TOOLS, PcClipboardTools };

package/dist/ui/elements/PcContextMenu/index.d.ts

@@ -1,6 +1,6 @@
 import { type PropertyValues } from "lit";
 import { PcElement } from "../../base";
-import { PcMenu, type MenuItem } from "../PcMenu";
+import { PcMenu, type MenuEntry } from "../PcMenu";
 import "../PcMenu";
 /** Space kept between a context menu's menu and the window's edges */
 export declare const MENU_MARGIN = 8;
@@ -77,7 +77,7 @@ export declare class PcContextMenu extends PcElement {
     /** Whether the menu is open */
     open: boolean;
     /** The items of its own menu, when no `pc-menu` is slotted */
-    items: readonly MenuItem[];
+    items: readonly MenuEntry[];
     /** Names the button for screen readers */
     label: string;
     /** Names the menu for screen readers (the button's `label` by default) */

package/dist/ui/elements/PcDialog/index.d.ts

@@ -1,6 +1,7 @@
 import { type PropertyValues } from "lit";
 import { PcElement } from "../../base";
 import "../PcButton";
+import "../PcDialogWindow";
 import type { ButtonVariant } from "../PcButton";
 /** A button in a dialog */
 export interface DialogChoice {
@@ -12,14 +13,27 @@ export interface DialogChoice {
     /** The button's style instead (e.g. `dismiss`: pink text without a background) */
     variant?: ButtonVariant;
 }
-/** What `pc-choose` gives when the dialog is dismissed with Escape */
+/** A text field in a dialog, e.g. for a name */
+export interface DialogField {
+    label: string;
+    /** The text it starts with */
+    value: string;
+}
+/** What `pc-choose` gives: the chosen value, and the field's text when the dialog has a field */
+export interface DialogChoiceDetail {
+    value: string;
+    text?: string;
+}
+/** What `pc-choose` gives when the dialog is dismissed (Escape, or a press outside it) */
 export declare const CANCEL_CHOICE = "cancel";
 /**
- * A modal window asking the user to choose, over a dimmed backdrop, with a heading, a message, any content of its own,
- * and its choices, each on its own row (the cancel choice and those marked `cancelling` in pink, the others purple,
- * unless a choice gives its own `variant`).
- * Focus moves to the first choice when it opens. Fires `pc-choose` with the chosen value (`cancel` for Escape, pressed
- * anywhere while it's open).
+ * A modal window asking the user to choose (a `<pc-dialog-window>` over a shaded page), with a heading, a message, an
+ * optional text field (`field`, e.g. for a name), any content of its own, and its choices, each on its own row (the
+ * cancel choice and those marked `cancelling` in pink, the others purple, unless a choice gives its own `variant`).
+ *
+ * Focus moves to the field, or else the first choice, when it opens. Fires `pc-choose` with the chosen value (and the
+ * field's `text`): Enter in the field chooses the first choice that isn't cancelling; Escape and a press outside it
+ * choose `cancel`, unless it's not `dismissible`. `inline` shows it over its nearest positioned ancestor only.
  *
  * @example
  * html`<pc-dialog heading="Delete layer" message='Delete "Sketch"?'
@@ -37,6 +51,16 @@ export declare class PcDialog extends PcElement {
         choices: {
             attribute: boolean;
         };
+        field: {
+            attribute: boolean;
+        };
+        dismissible: {
+            type: BooleanConstructor;
+        };
+        inline: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -52,12 +76,24 @@ export declare class PcDialog extends PcElement {
     heading: string;
     message: string;
     choices: readonly DialogChoice[];
+    /** A text field to fill in, if any */
+    field?: DialogField;
+    /** Whether Escape and a press outside it choose `cancel` */
+    dismissible: boolean;
+    /** Whether it covers only its nearest positioned ancestor, leaving the rest of the page usable */
+    inline: boolean;
     constructor();
     firstUpdated(changed: PropertyValues<this>): void;
-    /** Choose one of the choices (or `cancel`) */
+    /**
+     * Move focus to the field (selecting its text), or else the first choice, once the window has opened (nothing in it
+     * can take focus before) and the choice has rendered its button.
+     */
+    private focusFirst;
+    /**
+     * Choose one of the choices (or `cancel`), giving the field's text when there's a field.
+     */
     choose(value: string): void;
-    private readonly onKeyDown;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    private readonly onFieldKeyDown;
+    private readonly onDismiss;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/ui/elements/PcDialog/index.js

@@ -1,15 +1,18 @@
 import { PcElement, defineElement, emit } from "../../base/index.js";
 import "../PcButton/index.js";
+import "../PcDialogWindow/index.js";
 import { css, html, nothing } from "lit";
 // src/ui/elements/PcDialog/index.ts
-/** What `pc-choose` gives when the dialog is dismissed with Escape */
+/** What `pc-choose` gives when the dialog is dismissed (Escape, or a press outside it) */
 var CANCEL_CHOICE = "cancel";
 /**
-* A modal window asking the user to choose, over a dimmed backdrop, with a heading, a message, any content of its own,
-* and its choices, each on its own row (the cancel choice and those marked `cancelling` in pink, the others purple,
-* unless a choice gives its own `variant`).
-* Focus moves to the first choice when it opens. Fires `pc-choose` with the chosen value (`cancel` for Escape, pressed
-* anywhere while it's open).
+* A modal window asking the user to choose (a `<pc-dialog-window>` over a shaded page), with a heading, a message, an
+* optional text field (`field`, e.g. for a name), any content of its own, and its choices, each on its own row (the
+* cancel choice and those marked `cancelling` in pink, the others purple, unless a choice gives its own `variant`).
+*
+* Focus moves to the field, or else the first choice, when it opens. Fires `pc-choose` with the chosen value (and the
+* field's `text`): Enter in the field chooses the first choice that isn't cancelling; Escape and a press outside it
+* choose `cancel`, unless it's not `dismissible`. `inline` shows it over its nearest positioned ancestor only.
 *
 * @example
 * html`<pc-dialog heading="Delete layer" message='Delete "Sketch"?'
@@ -21,32 +24,20 @@ var PcDialog = class extends PcElement {
 		...PcElement.properties,
 		heading: { type: String },
 		message: { type: String },
-		choices: { attribute: false }
+		choices: { attribute: false },
+		field: { attribute: false },
+		dismissible: { type: Boolean },
+		inline: {
+			type: Boolean,
+			reflect: true
+		}
 	};
 	static styles = [PcElement.styles, css`
       :host {
-        position: fixed;
-        z-index: 20;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: var(--pc-space-3);
-        background: var(--pc-backdrop);
+        display: contents;
       }
-      [role="dialog"] {
-        display: flex;
-        width: 100%;
-        max-width: 400px;
-        flex-direction: column;
-        gap: var(--pc-space-2);
-        padding: var(--pc-space-3);
-        border-radius: var(--pc-radius);
-        background: var(--pc-surface-raised);
-        color: var(--pc-text);
-        box-shadow: var(--pc-shadow);
-        font-family: var(--pc-font);
-        font-size: var(--pc-font-size);
+      pc-dialog-window {
+        --pc-dialog-width: 400px;
       }
       h2 {
         margin: 0;
@@ -55,6 +46,30 @@ var PcDialog = class extends PcElement {
       p {
         margin: 0;
       }
+      .body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pc-space-2);
+      }
+      label {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pc-space-1);
+      }
+      input {
+        box-sizing: border-box;
+        width: 100%;
+        min-height: var(--pc-control-size);
+        padding: 0 var(--pc-space-2);
+        border: 1px solid var(--pc-border);
+        border-radius: var(--pc-radius-small);
+        background: var(--pc-surface);
+        color: var(--pc-text);
+        font: inherit;
+      }
+      input:focus-visible {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+      }
       .choices {
         display: flex;
         flex-direction: column;
@@ -66,41 +81,77 @@ var PcDialog = class extends PcElement {
 		this.heading = "";
 		this.message = "";
 		this.choices = [];
+		this.dismissible = true;
+		this.inline = false;
 	}
 	firstUpdated(changed) {
 		super.firstUpdated(changed);
+		this.focusFirst();
+	}
+	/**
+	* Move focus to the field (selecting its text), or else the first choice, once the window has opened (nothing in it
+	* can take focus before) and the choice has rendered its button.
+	*/
+	async focusFirst() {
+		await this.renderRoot.querySelector("pc-dialog-window").updateComplete;
+		const field = this.renderRoot.querySelector("input");
+		if (field) {
+			field.focus();
+			field.select();
+			return;
+		}
 		const first = this.renderRoot.querySelector("pc-button");
-		if (first) first.updateComplete.then(() => first.focus());
+		if (!first) return;
+		await first.updateComplete;
+		first.focus();
 	}
-	/** Choose one of the choices (or `cancel`) */
+	/**
+	* Choose one of the choices (or `cancel`), giving the field's text when there's a field.
+	*/
 	choose(value) {
-		emit(this, "pc-choose", { value });
+		const text = this.renderRoot.querySelector("input")?.value;
+		emit(this, "pc-choose", text === void 0 ? { value } : {
+			value,
+			text
+		});
 	}
-	onKeyDown = (event) => {
-		if (event.key !== "Escape") return;
+	onFieldKeyDown = (event) => {
+		if (event.key !== "Enter") return;
+		const choice = this.choices.find((item) => item.value !== "cancel" && !item.cancelling);
+		if (!choice) return;
+		event.preventDefault();
+		this.choose(choice.value);
+	};
+	onDismiss = (event) => {
 		event.preventDefault();
 		this.choose(CANCEL_CHOICE);
 	};
-	connectedCallback() {
-		super.connectedCallback();
-		window.addEventListener("keydown", this.onKeyDown);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		window.removeEventListener("keydown", this.onKeyDown);
-	}
 	render() {
-		return html`<div
+		const field = this.field;
+		return html`<pc-dialog-window
       part="dialog"
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="heading"
-      aria-describedby=${this.message ? "message" : nothing}
+      open
+      shaded
+      closable="false"
+      .dismissible=${this.dismissible}
+      ?inline=${this.inline}
+      description=${this.message || nothing}
+      @pc-dismiss=${this.onDismiss}
     >
-      <h2 id="heading" part="heading">${this.heading}</h2>
-      ${this.message ? html`<p id="message" part="message">${this.message}</p>` : nothing}
-      <slot></slot>
-      <div class="choices" part="choices">
+      <h2 slot="header-middle" part="heading">${this.heading}</h2>
+      <div slot="body" class="body">
+        ${this.message ? html`<p part="message">${this.message}</p>` : nothing}
+        ${field ? html`<label part="field">
+                ${field.label}
+                <input
+                  type="text"
+                  .value=${field.value}
+                  @keydown=${this.onFieldKeyDown}
+                />
+              </label>` : nothing}
+        <slot></slot>
+      </div>
+      <div slot="footer-middle" class="choices" part="choices">
         ${this.choices.map((choice) => html`<pc-button
               variant=${choice.variant ?? (choice.value === "cancel" || choice.cancelling ? "cancel" : "accent")}
               data-value=${choice.value}
@@ -108,7 +159,7 @@ var PcDialog = class extends PcElement {
               >${choice.label}</pc-button
             >`)}
       </div>
-    </div>`;
+    </pc-dialog-window>`;
 	}
 };
 defineElement("pc-dialog", PcDialog);

package/dist/ui/elements/PcDialogWindow/index.d.ts

@@ -0,0 +1,141 @@
+import { type PropertyValues } from "lit";
+import { PcElement } from "../../base";
+/** Why the user asked to close a dialog window: its ⨉ button, the Escape key, or a press outside it */
+export type DialogCloseReason = "close" | "escape" | "outside";
+/** Event fired when the user asks to close a dialog window (detail: `{ reason }`); cancel it to keep the window open */
+export declare const DIALOG_DISMISS_EVENT = "pc-dismiss";
+/**
+ * A window over the page, built on the browser's `<dialog>`: centred in the viewport, never bigger than it, with a
+ * header, a body and a footer. While it's `open`, the rest of the page can't be used or scrolled and keyboard focus stays
+ * in it (moving to its first control, and back to where it was once it closes).
+ *
+ * Content goes in its slots: `header-start`, `header-middle` (which names the window for screen readers, unless it has a
+ * `label`; `description` describes it), `header-end`, `body` (or no slot), `footer-start`, `footer-middle` and `footer-end`. The body scrolls when
+ * there's too much to fit, keeping the header and footer in view. The header and footer only show with content (or the
+ * ⨉ button).
+ *
+ * Options:
+ * - `closable` (on by default; `closable="false"` turns it off): a ⨉ button at the top right.
+ * - `shaded`: shade the page under it.
+ * - `dismissible` (on by default; `dismissible="false"` turns it off): a press outside it closes it.
+ * - `inline`: cover only its nearest positioned ancestor instead of the whole page, which stays usable (and scrolls).
+ *
+ * The ⨉ button, a press outside it (while `dismissible`) and Escape (while `closable` or `dismissible`) fire a cancellable
+ * `pc-dismiss` event (detail: `{ reason }`, one of `close`, `outside` or `escape`); unless it's cancelled, the window
+ * closes (`open` becomes false). `--pc-dialog-width` sets its width (fitted to its content by default).
+ *
+ * @example
+ * html`<pc-dialog-window open shaded label="Keyboard shortcuts" @pc-dismiss=${close}>
+ *   <h2 slot="header-middle">Keyboard shortcuts</h2>
+ *   <pc-shortcut-settings slot="body" .settings=${settings}></pc-shortcut-settings>
+ *   <pc-button slot="footer-end" @click=${close}>Done</pc-button>
+ * </pc-dialog-window>`
+ */
+export declare class PcDialogWindow extends PcElement {
+    static properties: {
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        closable: {
+            converter: {
+                fromAttribute: (value: string | null) => boolean;
+                toAttribute: (value: boolean) => "" | "false";
+            };
+            reflect: boolean;
+        };
+        shaded: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        dismissible: {
+            converter: {
+                fromAttribute: (value: string | null) => boolean;
+                toAttribute: (value: boolean) => "" | "false";
+            };
+            reflect: boolean;
+        };
+        inline: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        description: {
+            type: StringConstructor;
+        };
+        filled: {
+            state: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** Whether it's shown */
+    open: boolean;
+    /** Whether it has a ⨉ button at the top right */
+    closable: boolean;
+    /** Whether the page under it is shaded */
+    shaded: boolean;
+    /** Whether a press outside it closes it */
+    dismissible: boolean;
+    /** Whether it covers only its nearest positioned ancestor, leaving the rest of the page usable */
+    inline: boolean;
+    /** Its name for screen readers, instead of its `header-middle` content */
+    label?: string;
+    /** A description for screen readers, e.g. the question a prompt asks */
+    description?: string;
+    /** The names of its header and footer slots that have content */
+    filled: ReadonlySet<string>;
+    /** Whether it's keeping the page from scrolling */
+    private scrollLocked;
+    /** What had focus before it opened, to give it back to if it's taken out of the page while open */
+    private returnFocus;
+    /** Whether the `<dialog>` was last shown inline (not modal) */
+    private shownInline;
+    /** Whether the press being made started outside the window */
+    private pressedOutside;
+    constructor();
+    /** The `<dialog>` it's built on */
+    private get dialog();
+    /**
+     * Ask to close the window, as the user would: fires `pc-dismiss` (detail: `{ reason }`), and closes it unless that's
+     * cancelled.
+     *
+     * @example
+     * dialogWindow.requestClose("close");
+     */
+    requestClose(reason: DialogCloseReason): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    /**
+     * Show or close the `<dialog>` to match `open` (modal unless `inline`), keeping the page from scrolling while a modal
+     * window is open.
+     */
+    private syncOpen;
+    /** Keep the page from scrolling while a modal window is open in it, and let it scroll again otherwise */
+    private syncScrollLock;
+    /** Note which header and footer slots have content: only those (and the header and footer with them) are shown */
+    private updateRegions;
+    /** Whether any of a header's or footer's slots have content */
+    private hasRegion;
+    private readonly onKeyDown;
+    private readonly onCancel;
+    private readonly onClose;
+    private readonly onPointerDown;
+    private readonly onClick;
+    /** A header or footer's start, middle and end slots */
+    private renderRegion;
+    render(): import("lit").TemplateResult<1>;
+}