@lvl99dotcom/paintcanvas 0.3.1 → 0.5.0

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

@@ -2,6 +2,8 @@ import { PcElement } from "../../base";
 import { BlendMode, type default as Layer } from "../../../lib/classes/Layer";
 import type LayerStack from "../../../lib/classes/LayerStack";
 import "../PcDialog";
+import "../PcContextMenu";
+import { MENU_MARGIN, menuTop } from "../PcContextMenu";
 import { type DialogChoice } from "../PcDialog";
 import type BackgroundWork from "../../../lib/classes/BackgroundWork";
 /** Blend mode options shown in the layer's select input */
@@ -56,17 +58,8 @@ export interface LayerDragDetail {
     x: number;
     y: number;
 }
-/** Space kept between the layer actions menu and the window's edges */
-export declare const MENU_MARGIN = 8;
-/**
- * Where the layer actions menu's top goes: level with the handle, moved up as far as needed to stay in the window
- * (but never above its top margin).
- *
- * @example
- * menuTop(700, 300, 800); // 492 (moved up to fit)
- * menuTop(100, 300, 800); // 100
- */
-export declare const menuTop: (anchorTop: number, menuHeight: number, viewportHeight: number, margin?: number) => number;
+/** Where the layer actions menu goes and how close to the window's edges (see `pc-context-menu`) */
+export { MENU_MARGIN, menuTop };
 /**
  * One row in the layers menu: reorder handle, thumbnail and name (then opacity and blend mode under them), alpha lock (padlock) and visibility (eye) icons.
  * Dragging the handle (with mouse, pen or touch) reorders the layer: the row fires {@link LAYER_DRAG_EVENT} and the
@@ -141,28 +134,22 @@ export declare class PcLayerItem extends PcElement {
     runAction(action: LayerAction): void;
     /**
      * Whether a context menu action can be done to the layer now: not merging down the bottom layer (or with a hidden
-     * layer), deleting the only layer, or moving a layer further up or down than it can go.
+     * layer), deleting the only layer, moving a layer further up or down than it can go, or anything to a layer no longer
+     * in the stack (e.g. just deleted).
      */
     canRun(action: LayerAction): boolean;
     /**
      * Do an action the user confirmed.
      */
     confirmed(action: ConfirmedAction): void;
-    private readonly onOutsidePointer;
-    private readonly onKeyDown;
-    /**
-     * Open the context menu on right-click, or close it if open.
-     */
-    private onContextMenu;
     /**
-     * Open the context menu on a click or tap on the handle (or Enter or Space), or close it if open; a click that ends a
-     * drag does nothing.
+     * Follow the context menu opening or closing, telling other rows when it opens (so they close theirs).
      */
-    private onHandleClick;
+    private onMenuToggle;
     /**
-     * Open the context menu (closing other rows' menus), or close it if open.
+     * A click on the handle opens the menu, unless it ends a drag (then it's stopped before reaching the menu's button).
      */
-    private toggleMenu;
+    private readonly onHandleClick;
     disconnectedCallback(): void;
     /** Tell the layers menu about a drag of this row's layer */
     private emitDrag;
@@ -188,16 +175,6 @@ export declare class PcLayerItem extends PcElement {
     private readonly onDragKeyDown;
     /** Stop following the pointer pressed on the handle */
     private endPress;
-    /**
-     * Start or stop listening for clicks outside and Escape while the menu is open.
-     */
-    private listenOutside;
-    private readonly onScroll;
-    /**
-     * Place the open layer actions menu beside the reorder handle, floating over the layers panel (so the panel's edges
-     * don't cut it off) and kept within the window.
-     */
-    private placeMenu;
     /**
      * Ask for a mask following the layer's alpha (Shift adds, Alt subtracts; otherwise it replaces the mask).
      */
@@ -210,12 +187,14 @@ export declare class PcLayerItem extends PcElement {
      * Rename a layer when the name input changes. Empty names are reverted.
      */
     private onRename;
-    updated(changed: Map<PropertyKey, unknown>): void;
+    updated(): void;
     /**
      * Draw the layer's image, scaled to fit, on a checkerboard that shows transparency.
      */
     drawThumbnail(): void;
     /** The dialog asking the user to confirm an action, while asking */
     private renderConfirmation;
+    /** The layer's actions, for its context menu (those it can't do now are disabled) */
+    private menuItems;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -5,6 +5,7 @@ import ChangeController from "../../ChangeController/index.js";
 import { BlendMode } from "../../../lib/classes/Layer/index.js";
 import { drawCheckerboard, fitSize } from "../../../lib/rendering/checkerboard/index.js";
 import { CANCEL_CHOICE } from "../PcDialog/index.js";
+import { MENU_MARGIN, menuTop } from "../PcContextMenu/index.js";
 import { html, nothing, unsafeCSS } from "lit";
 // src/ui/elements/PcLayerItem/index.ts
 /** Blend mode options shown in the layer's select input */
@@ -127,17 +128,6 @@ var LAYER_ALPHA_MASK_EVENT = "pc-layer-alpha-mask";
 var DRAG_THRESHOLD = 4;
 /** Event a row dispatches while its layer is dragged by its reorder handle (detail: {@link LayerDragDetail}) */
 var LAYER_DRAG_EVENT = "pc-layer-drag";
-/** Space kept between the layer actions menu and the window's edges */
-var MENU_MARGIN = 8;
-/**
-* Where the layer actions menu's top goes: level with the handle, moved up as far as needed to stay in the window
-* (but never above its top margin).
-*
-* @example
-* menuTop(700, 300, 800); // 492 (moved up to fit)
-* menuTop(100, 300, 800); // 100
-*/
-var menuTop = (anchorTop, menuHeight, viewportHeight, margin = 8) => Math.max(margin, Math.min(anchorTop, viewportHeight - margin - menuHeight));
 /**
 * One row in the layers menu: reorder handle, thumbnail and name (then opacity and blend mode under them), alpha lock (padlock) and visibility (eye) icons.
 * Dragging the handle (with mouse, pen or touch) reorders the layer: the row fires {@link LAYER_DRAG_EVENT} and the
@@ -220,11 +210,12 @@ var PcLayerItem = class extends PcElement {
 	}
 	/**
 	* Whether a context menu action can be done to the layer now: not merging down the bottom layer (or with a hidden
-	* layer), deleting the only layer, or moving a layer further up or down than it can go.
+	* layer), deleting the only layer, moving a layer further up or down than it can go, or anything to a layer no longer
+	* in the stack (e.g. just deleted).
 	*/
 	canRun(action) {
 		const { stack, layer } = this;
-		if (!stack || !layer) return false;
+		if (!stack || !layer || !stack.layers.includes(layer)) return false;
 		const index = stack.indexOf(layer.id);
 		const last = stack.layers.length - 1;
 		switch (action) {
@@ -248,43 +239,30 @@ var PcLayerItem = class extends PcElement {
 		else if (action === "clear") stack.clear(layer.id);
 		else stack.remove(layer.id);
 	}
-	onOutsidePointer = (event) => {
-		if (!event.composedPath().includes(this)) this.menuOpen = false;
-	};
-	onKeyDown = (event) => {
-		if (event.key === "Escape") this.menuOpen = false;
-	};
 	/**
-	* Open the context menu on right-click, or close it if open.
+	* Follow the context menu opening or closing, telling other rows when it opens (so they close theirs).
 	*/
-	onContextMenu(event) {
-		event.preventDefault();
-		this.toggleMenu();
-	}
-	/**
-	* Open the context menu on a click or tap on the handle (or Enter or Space), or close it if open; a click that ends a
-	* drag does nothing.
-	*/
-	onHandleClick() {
-		if (this.suppressClick) {
-			this.suppressClick = false;
-			return;
-		}
-		this.toggleMenu();
-	}
-	/**
-	* Open the context menu (closing other rows' menus), or close it if open.
-	*/
-	toggleMenu() {
-		this.menuOpen = !this.menuOpen;
-		if (this.menuOpen) this.dispatchEvent(new CustomEvent(LAYER_MENU_OPEN_EVENT, {
+	onMenuToggle(event) {
+		this.menuOpen = event.detail.open;
+		if (!this.menuOpen) return;
+		this.dispatchEvent(new CustomEvent(LAYER_MENU_OPEN_EVENT, {
 			bubbles: true,
 			composed: true
 		}));
 	}
+	/**
+	* A click on the handle opens the menu, unless it ends a drag (then it's stopped before reaching the menu's button).
+	*/
+	onHandleClick = {
+		handleEvent: (event) => {
+			if (!this.suppressClick) return;
+			this.suppressClick = false;
+			event.stopPropagation();
+		},
+		capture: true
+	};
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.listenOutside(false);
 		this.endPress();
 	}
 	/** Tell the layers menu about a drag of this row's layer */
@@ -313,7 +291,7 @@ var PcLayerItem = class extends PcElement {
 			y: event.clientY,
 			dragging: false
 		};
-		event.currentTarget.setPointerCapture(event.pointerId);
+		event.composedPath()[0].setPointerCapture(event.pointerId);
 		window.addEventListener("pointermove", this.onHandlePointerMove);
 		window.addEventListener("pointerup", this.onHandlePointerUp);
 		window.addEventListener("pointercancel", this.onHandlePointerCancel);
@@ -368,29 +346,6 @@ var PcLayerItem = class extends PcElement {
 		window.removeEventListener("pointercancel", this.onHandlePointerCancel);
 	}
 	/**
-	* Start or stop listening for clicks outside and Escape while the menu is open.
-	*/
-	listenOutside(listen) {
-		const method = listen ? "addEventListener" : "removeEventListener";
-		window[method]("pointerdown", this.onOutsidePointer, true);
-		window[method]("keydown", this.onKeyDown);
-		window[method]("scroll", this.onScroll, true);
-	}
-	onScroll = () => {
-		this.menuOpen = false;
-	};
-	/**
-	* Place the open layer actions menu beside the reorder handle, floating over the layers panel (so the panel's edges
-	* don't cut it off) and kept within the window.
-	*/
-	placeMenu() {
-		const menu = this.renderRoot.querySelector("menu");
-		if (!menu) return;
-		const anchor = this.renderRoot.querySelector(".handle").getBoundingClientRect();
-		menu.style.left = `${anchor.right}px`;
-		menu.style.top = `${menuTop(anchor.top, menu.offsetHeight, window.innerHeight)}px`;
-	}
-	/**
 	* Ask for a mask following the layer's alpha (Shift adds, Alt subtracts; otherwise it replaces the mask).
 	*/
 	requestMask(layer, keys) {
@@ -426,11 +381,7 @@ var PcLayerItem = class extends PcElement {
 			input.value = layer.name;
 		}
 	}
-	updated(changed) {
-		if (changed.has("menuOpen")) {
-			this.listenOutside(this.menuOpen);
-			if (this.menuOpen) this.placeMenu();
-		}
+	updated() {
 		const id = this.layer?.id;
 		if (this.background && id) this.background.run(`thumbnail ${id}`, () => this.drawThumbnail());
 		else this.drawThumbnail();
@@ -472,23 +423,32 @@ var PcLayerItem = class extends PcElement {
 		}}
     ></pc-dialog>`;
 	}
+	/** The layer's actions, for its context menu (those it can't do now are disabled) */
+	menuItems() {
+		return LAYER_ACTIONS.map(({ action, label }) => ({
+			value: action,
+			label: this.t(label),
+			disabled: !this.canRun(action)
+		}));
+	}
 	render() {
 		const { stack, layer } = this;
 		if (!stack || !layer) return html``;
 		const active = stack.active.id === layer.id;
 		return html`
-      <button
-        type="button"
+      <pc-context-menu
         class="handle"
-        aria-label=${this.t("paintCanvas.layers.reorder", { name: layer.name })}
-        aria-haspopup="menu"
-        aria-expanded=${this.menuOpen ? "true" : "false"}
-        @contextmenu=${this.onContextMenu}
+        placement="beside"
+        label=${this.t("paintCanvas.layers.reorder", { name: layer.name })}
+        menu-label=${this.t("paintCanvas.layers.actions")}
+        .open=${this.menuOpen}
+        .items=${this.menuItems()}
+        @pc-toggle=${this.onMenuToggle}
+        @pc-select=${(e) => this.runAction(e.detail.value)}
         @click=${this.onHandleClick}
         @pointerdown=${this.onHandlePointerDown}
+        ><span slot="icon" aria-hidden="true">⠿</span></pc-context-menu
       >
-        ⠿
-      </button>
       <div
         class="details"
         @click=${(e) => this.onRowClick(e, stack, layer)}
@@ -541,18 +501,6 @@ var PcLayerItem = class extends PcElement {
       >
         <img src=${this.iconUrl(layer.visible ? "visible" : "hidden")} alt="" />
       </button>
-      ${this.menuOpen ? html`<menu aria-label=${this.t("paintCanvas.layers.actions")}>
-              ${LAYER_ACTIONS.map(({ action, label }) => html`<li>
-                    <button
-                      type="button"
-                      data-action=${action}
-                      ?disabled=${!this.canRun(action)}
-                      @click=${() => this.runAction(action)}
-                    >
-                      ${this.t(label)}
-                    </button>
-                  </li>`)}
-            </menu>` : nothing}
       ${this.renderConfirmation(layer)}
     `;
 	}

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PcLayerItem/style.css?inline
-var style_default = "/* A white row with space around its parts */\n:host {\n  display: grid;\n  grid-template-columns: 30px 1fr 30px 30px;\n  align-items: center;\n  column-gap: 6px;\n  position: relative;\n  padding: 6px;\n  border: 1px solid var(--pc-surface-active);\n  background: var(--pc-surface);\n}\n.name.active {\n  font-weight: bold;\n}\n.thumbnail {\n  width: 30px;\n  height: 30px;\n}\n/* Thumbnail on the left and name on the right; under them, opacity on the left and blend mode on the right */\n.details {\n  display: grid;\n  grid-template-columns: 30px minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 4px 6px;\n}\n.details .name {\n  grid-column: 2 / -1;\n  min-width: 0;\n}\n.details input[type=\"range\"] {\n  grid-column: 1 / 3;\n  min-width: 0;\n  margin: 0;\n}\n/* Like the chat's ⋮ menu: white and rounded, with plain items highlighted on hover. It floats beside the handle (placed\n   by `placeMenu`), so the layers panel's edges don't cut it off */\nmenu {\n  position: fixed;\n  z-index: 20;\n  min-width: 160px;\n  margin: 0;\n  padding: 4px 0;\n  border-radius: 12px;\n  list-style: none;\n  background: var(--pc-surface);\n  color: var(--pc-text);\n  box-shadow: var(--pc-shadow);\n}\nmenu button {\n  width: 100%;\n  min-height: 32px;\n  padding: 4px 16px;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  white-space: nowrap;\n  cursor: pointer;\n}\nmenu button:hover:not(:disabled),\nmenu button:focus-visible {\n  background: var(--pc-bar);\n}\n/* Actions the layer can't take (e.g. moving the top layer up) */\nmenu button:disabled {\n  opacity: 0.4;\n  cursor: default;\n}\n/* The reorder handle drags with mouse, pen or touch (touch drags it rather than scrolling the panel) */\n.handle {\n  /* As tall as the row */\n  align-self: stretch;\n  cursor: grab;\n  touch-action: none;\n}\n/* While dragged: the row floats with the pointer, out of the list (the layers menu places it), and the cursor shows\n   what dropping would do (\"+\" duplicates on \"New Layer\") */\n:host([dragging]) {\n  position: fixed;\n  z-index: 10;\n  opacity: 0.9;\n  background: Canvas;\n  box-shadow: var(--pc-shadow);\n}\n:host([dragging]) .handle {\n  cursor: grabbing;\n}\n:host([drop-action=\"duplicate\"]) .handle {\n  cursor: copy;\n}\n:host([drop-action=\"none\"]) .handle {\n  cursor: no-drop;\n}\n/* Alpha lock and visibility: boxed icon toggles like the settings bar's, darker while on */\n.alpha-lock,\n.visibility {\n  width: 30px;\n  height: 30px;\n  padding: 2px;\n  border: 1px solid var(--pc-border);\n  border-radius: 4px;\n  background: var(--pc-surface);\n  cursor: pointer;\n}\n.alpha-lock:hover,\n.visibility:hover {\n  background: var(--pc-surface-hover);\n}\n.alpha-lock[aria-pressed=\"true\"],\n.visibility[aria-pressed=\"true\"] {\n  background: var(--pc-surface-active);\n}\n.alpha-lock:focus-visible,\n.visibility:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n}\n.alpha-lock img,\n.visibility img {\n  display: block;\n  width: 24px;\n  height: 24px;\n  margin: auto;\n}\n";
+var style_default = "/* A white row with space around its parts. The middle column can shrink, so the row never grows wider than its panel */\n:host {\n  display: grid;\n  grid-template-columns: 30px minmax(0, 1fr) 30px 30px;\n  align-items: center;\n  column-gap: 6px;\n  position: relative;\n  padding: 6px;\n  border: 1px solid var(--pc-surface-active);\n  background: var(--pc-surface);\n}\n.name.active {\n  font-weight: bold;\n}\n.thumbnail {\n  width: 30px;\n  height: 30px;\n}\n/* Thumbnail on the left and name on the right; under them, opacity on the left and blend mode on the right. The blend\n   mode gets a set share of the width rather than its own: browsers size dropdowns differently (Safari and Firefox as\n   wide as the longest option, Chrome as the chosen one), which would otherwise push the row wider than its panel */\n.details {\n  display: grid;\n  grid-template-columns: 30px minmax(0, 1fr) minmax(0, 2fr);\n  align-items: center;\n  gap: 4px 6px;\n  min-width: 0;\n}\n.details .name {\n  grid-column: 2 / -1;\n}\n.details .name,\n.details select {\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n}\n.details input[type=\"range\"] {\n  grid-column: 1 / 3;\n  min-width: 0;\n  margin: 0;\n}\n/* The reorder handle drags with mouse, pen or touch (touch drags it rather than scrolling the panel) */\n.handle {\n  /* As tall as the row */\n  align-self: stretch;\n}\n.handle::part(button) {\n  min-width: 0;\n  padding: 0;\n  cursor: grab;\n  touch-action: none;\n}\n/* While dragged: the row floats with the pointer, out of the list (the layers menu places it), and the cursor shows\n   what dropping would do (\"+\" duplicates on \"New Layer\") */\n:host([dragging]) {\n  position: fixed;\n  z-index: 10;\n  opacity: 0.9;\n  background: Canvas;\n  box-shadow: var(--pc-shadow);\n}\n:host([dragging]) .handle::part(button) {\n  cursor: grabbing;\n}\n:host([drop-action=\"duplicate\"]) .handle::part(button) {\n  cursor: copy;\n}\n:host([drop-action=\"none\"]) .handle::part(button) {\n  cursor: no-drop;\n}\n/* Alpha lock and visibility: boxed icon toggles like the settings bar's, darker while on */\n.alpha-lock,\n.visibility {\n  width: 30px;\n  height: 30px;\n  padding: 2px;\n  border: 1px solid var(--pc-border);\n  border-radius: 4px;\n  background: var(--pc-surface);\n  cursor: pointer;\n}\n.alpha-lock:hover,\n.visibility:hover {\n  background: var(--pc-surface-hover);\n}\n.alpha-lock[aria-pressed=\"true\"],\n.visibility[aria-pressed=\"true\"] {\n  background: var(--pc-surface-active);\n}\n.alpha-lock:focus-visible,\n.visibility:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n}\n.alpha-lock img,\n.visibility img {\n  display: block;\n  width: 24px;\n  height: 24px;\n  margin: auto;\n}\n";
 export { style_default as default };

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

@@ -0,0 +1,138 @@
+import { type PropertyValues } from "lit";
+import { PcElement } from "../../base";
+import { type KeyCombo } from "../../../lib/utils/shortcuts";
+import "../PcIcon";
+/** Longest shortcut label shown on a menu item (characters); longer ones are left out */
+export declare const MAX_SHORTCUT_LABEL_LENGTH = 3;
+/** An item in a menu that can be chosen */
+export interface MenuItem {
+    /** Optional; items are the default kind of menu entry */
+    type?: "item";
+    /** What `pc-select` gives when it's chosen */
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** Shown in the cancelling colour, e.g. for deleting */
+    danger?: boolean;
+    /** Makes the item a toggle, showing a checkmark on its left while on */
+    checked?: boolean;
+    /** Name of an icon to show on its left (see `icons`), when it isn't a toggle */
+    icon?: string;
+    /** The action's keyboard shortcut, shown on its right as symbols (e.g. ⌘S) when 3 characters or fewer */
+    shortcut?: KeyCombo;
+    /** Marks the current choice (e.g. the selected tool) with the `selected` class and a purple background */
+    selected?: boolean;
+}
+/** A non-interactive label naming the items after it (up to the next label or divider), e.g. "Tools" */
+export interface MenuLabel {
+    type: "label";
+    label: string;
+}
+/** A non-interactive line between items */
+export interface MenuDivider {
+    type: "divider";
+}
+/** Anything a menu can show: an item, a label or a divider */
+export type MenuEntry = MenuItem | MenuLabel | MenuDivider;
+/** A run of items, with the label before them if there is one */
+interface MenuSection {
+    label?: string;
+    items: MenuItem[];
+    /** Whether a divider comes before it */
+    divided: boolean;
+}
+/**
+ * Whether a menu entry is an item that can be chosen.
+ *
+ * @example
+ * isMenuItem({ value: "grid", label: "Grid" }); // true
+ * isMenuItem({ type: "divider" }); // false
+ */
+export declare const isMenuItem: (entry: MenuEntry) => entry is MenuItem;
+/**
+ * Split menu entries into sections: a label or divider starts a new one.
+ *
+ * @example
+ * menuSections([{ type: "label", label: "Tools" }, { value: "brush", label: "Brush" }]);
+ * // [{ label: "Tools", items: [{ value: "brush", label: "Brush" }], divided: false }]
+ */
+export declare const menuSections: (entries: readonly MenuEntry[]) => MenuSection[];
+/**
+ * A list of menu items, e.g. a layer's actions (see `pc-context-menu` for a button that opens one). While `open`, it shows its items at `x`, `y` (in the page's viewport) and takes
+ * keyboard focus: arrow keys, Home and End move between items, Enter or Space chooses one, and Escape or Tab closes it.
+ * Items can show a checkmark (toggles) or an icon on their left, and their keyboard shortcut on their right; long
+ * labels wrap. Non-interactive labels (`{ type: "label", label }`, small bold text naming the items after them) and
+ * dividers (`{ type: "divider" }`) can go between items; keyboard focus skips them.
+ * Fires `pc-select` with the chosen item's value, and `pc-close` when it should close (after choosing, Escape, Tab, or a
+ * press outside it and its `anchor`). The implementer sets `open` to false in response.
+ *
+ * @example
+ * html`<pc-menu open .x=${10} .y=${20} label="Layer actions" .items=${items}
+ *   @pc-select=${(e) => act(e.detail.value)} @pc-close=${close}></pc-menu>`
+ */
+export declare class PcMenu extends PcElement {
+    static properties: {
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        items: {
+            attribute: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        x: {
+            type: NumberConstructor;
+        };
+        y: {
+            type: NumberConstructor;
+        };
+        anchor: {
+            attribute: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    open: boolean;
+    /** Items, labels and dividers, in order */
+    items: readonly MenuEntry[];
+    /** Names the menu for screen readers */
+    label: string;
+    x: number;
+    y: number;
+    /** The element that opens it (e.g. a `pc-context-menu`'s button): pressing it doesn't count as pressing outside */
+    anchor?: Element;
+    private readonly onPointerDown;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues<this>): void;
+    /** The enabled items' buttons */
+    private buttons;
+    /** Tell listeners the menu should close */
+    close(): void;
+    /** Choose an item, then close */
+    private choose;
+    /** Move focus between items, or close */
+    private onKeyDown;
+    /** An item's left side: a checkmark while a toggle is on, its icon, or empty space */
+    private renderStart;
+    /** An item's right side: its shortcut's label, if short enough */
+    private renderEnd;
+    /** An item's button */
+    private renderItem;
+    /** A section: its divider and label, if any, and its items (grouped under the label for screen readers) */
+    private renderSection;
+    render(): import("lit").TemplateResult<1>;
+}
+export {};