vintage-frames 0.13.0 → 0.14.1

package/dist/components/vf-checkbox.js

@@ -4,33 +4,34 @@ import r from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js
 import { VfPositioned as i } from "../position.js";
 import { vfDisplay as a } from "../styles/recipes/display-face.js";
 import { vfBase as o } from "../styles/recipes/host.js";
-import { vfFocusUnderline as s } from "../styles/recipes/focus.js";
-import { vfToggle as c } from "../styles/recipes/toggle.js";
-import { CHECKBOX_X as l, glyphSvg as u } from "../glyphs.js";
-import { VfFormControl as d } from "../form-control.js";
-import { VfToggleControl as f } from "../toggle-control.js";
-import { css as p, html as m } from "lit";
-import { property as h, state as g } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
+import { vfStrokeDecls as s, vfStrokeInset as c, vfStrokeShadow as l } from "../styles/recipes/stroke.js";
+import { vfFocusUnderline as u } from "../styles/recipes/focus.js";
+import { vfToggle as d } from "../styles/recipes/toggle.js";
+import { CHECKBOX_X as f, glyphSvg as p } from "../glyphs.js";
+import { VfFormControl as m } from "../form-control.js";
+import { VfToggleControl as h } from "../toggle-control.js";
+import { css as g, html as _ } from "lit";
+import { property as v, state as y } from "lit/decorators.js";
+import { classMap as b } from "lit/directives/class-map.js";
 //#region src/components/vf-checkbox.ts
-var v = class extends i(f(d)) {
+var x = class extends i(h(m)) {
 	static {
 		this.styles = [
 			o,
 			a,
-			c,
-			p`
+			d,
+			g`
       /* Keyboard focus underlines the box itself — not the label, and not a
-         ring around either (see vfFocusUnderline). Both adjustments below are
-         the 1px border: an absolutely positioned pseudo sizes to the PADDING
-         box, which the border sits outside of. So the rule grows 1px each side
-         to span the whole well, and its offset counts the border before the
-         blank row and the rule itself: −(1 + 1 + 1). */
+         ring around either (see vfFocusUnderline). An absolutely positioned
+         pseudo sizes to the padding box, which runs under the box's stroke,
+         so the rule spans the whole well and −2 puts it one blank row under
+         it. Under forced colors the stroke is a border and the padding box
+         sits inside it, so the insets grow by it there. */
       :host(:focus-visible) .box::after {
-        --vf-focus-underline-offset: -3px;
-        ${s}
-        left: calc(var(--vf-scale, 1) * -1px);
-        right: calc(var(--vf-scale, 1) * -1px);
+        ${u}
+        bottom: ${c(-3)};
+        left: ${c(-1)};
+        right: ${c(-1)};
       }
       .box {
         position: relative;
@@ -38,28 +39,31 @@ var v = class extends i(f(d)) {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: calc(var(--vf-scale, 1) * 13px);
-        height: calc(var(--vf-scale, 1) * 13px);
+        width: calc(var(--vf-scale, 1) * 12px);
+        height: calc(var(--vf-scale, 1) * 12px);
         background: var(--vf-white, #fff);
-        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
         color: var(--vf-black, #000);
+        ${s()}
       }
-      /* Pressed: border thickens to 2px (classic press feedback). */
+      /* Pressed: the line thickens to 2px (classic press feedback), inward,
+         over the padding the 1px stroke leaves the glyph. */
       :host(:active) .box:not(.dim) {
-        box-shadow: inset 0 0 0 calc(var(--vf-scale, 1) * 1px) var(--vf-black, #000);
+        box-shadow: ${l(2)};
       }
       /* Forced colors never paints box-shadow, so the press feedback above
          goes silent. The same thickening as a real border-width change: with
-         box-sizing: border-box the 13×13 box holds and the extra pixel grows
-         inward, exactly where the inset shadow painted. */
+         box-sizing: border-box the 12×12 box holds and the extra pixel grows
+         inward, exactly where the inset shadow paints. */
       @media (forced-colors: active) {
         :host(:active) .box:not(.dim) {
           border-width: calc(var(--vf-scale, 1) * 2px);
         }
       }
-      /* Native 12×12 sprite — centered in the 13×13 box; the glyph's own 1px
-         transparent margin lets it overhang onto the border harmlessly. Scales
-         with the box; crispEdges keeps it whole-device-pixel at any dpr. */
+      /* Native 12×12 sprite, the box's own size: centered on the 10×10
+         interior it covers the box exactly, its 1px transparent margin over
+         the frame, so the ✕ fills the interior corner to corner on whole
+         system px — the sprite's own registration. Scales with the box;
+         crispEdges keeps it whole-device-pixel at any dpr. */
       .check {
         flex: none;
         width: calc(var(--vf-scale, 1) * 12px);
@@ -93,9 +97,9 @@ var v = class extends i(f(d)) {
 	}
 	render() {
 		let e = this.isDisabled;
-		return m`
+		return _`
       <span
-        class=${_({
+        class=${b({
 			box: !0,
 			dim: e,
 			"vf-snap": !0
@@ -103,10 +107,10 @@ var v = class extends i(f(d)) {
         part="box"
         aria-hidden="true"
       >
-        ${u(l, "check")}
+        ${p(f, "check")}
       </span>
       <span
-        class=${_({
+        class=${b({
 			label: !0,
 			dim: e,
 			empty: !this._hasLabel,
@@ -135,9 +139,9 @@ var v = class extends i(f(d)) {
 		this.checked = !this.checked, this.focus(), e(this, "vf-change", { checked: this.checked }), t(this, "input"), t(this, "change");
 	}
 };
-r([h({
+r([v({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "checked", void 0), r([h({ reflect: !0 })], v.prototype, "name", void 0), r([h()], v.prototype, "value", void 0), r([g()], v.prototype, "_hasLabel", void 0), v = r([n("vf-checkbox")], v);
+})], x.prototype, "checked", void 0), r([v({ reflect: !0 })], x.prototype, "name", void 0), r([v()], x.prototype, "value", void 0), r([y()], x.prototype, "_hasLabel", void 0), x = r([n("vf-checkbox")], x);
 //#endregion
-export { v as VfCheckbox };
+export { x as VfCheckbox };

package/dist/components/vf-container.d.ts

@@ -43,15 +43,16 @@ declare const VfContainer_base: (new (...args: any[]) => import("../size.js").Vf
  *
  * **It paints nothing and means nothing** — unless `pattern` or `rule` say
  * what to paint. No role, keyboard behavior or selection; what it holds
- * decides what it is.
+ * decides what it is. A page that gives it a role and a `tabindex` — a
+ * pattern chooser's cells as radios — gets the kit's keyboard focus mark
+ * rather than the browser's ring: the dashed rule below the box.
  *
  * **`rule` draws the 1px rule on the edges it names** — `rule="bottom"` is
  * the menu bar's anatomy (the box's rows over one row of ink), `rule="top"`
- * a status strip's, all four a framed box. The rule is the box's own border
- * ({@link vfRule}), inside the declared size, so a 24px `rule="bottom"`
- * strip is 23 rows of box over the line; content, `fill-width` children and
- * placed children begin inside it, as a rectangle's interior begins inside
- * FrameRect's line.
+ * a status strip's, all four a framed box. The rule is drawn inside the
+ * declared size ({@link vfRule}), so a 24px `rule="bottom"` strip is 23 rows
+ * of box over the line; content, `fill-width` children and placed children
+ * begin inside it, as a rectangle's interior begins inside FrameRect's line.
  *
  * **`pattern` fills the box with a 1-bit pattern**: one of the 38 standard
  * MacPaint patterns by name (`pattern="bricks"`, `pattern="gray-50"` —
@@ -66,10 +67,10 @@ declare const VfContainer_base: (new (...args: any[]) => import("../size.js").Vf
  * **It holds its box on the device-pixel grid** — with a `GridSnapController`.
  * A container's box is itself the consumer's coordinate system, including for
  * non-`vf` content that cannot correct itself, so the box is the thing to
- * hold on the grid. The shadow box below owns the `position: relative` anchor
- * and the `vf-snap` class together, so the correction
- * moves the whole coordinate system — everything placed against it rides
- * along instead of being re-corrected child by child. (`vf-stack` shipped
+ * hold on the grid. The correction lands on the shadow box below, and the
+ * coordinate system sits inside it, so the correction moves the whole
+ * coordinate system — everything placed against it rides along instead of
+ * being re-corrected child by child. (`vf-stack` shipped
  * without a controller on the theory that slotted `vf-*` children correct
  * their own origins; this component is where that theory's gap — consumer
  * content — became visible, and the stack has since adopted the same
@@ -106,10 +107,9 @@ export declare class VfContainer extends VfContainer_base {
     private _pattern;
     /**
      * The 1px rule on the box's edges: edge names separated by spaces —
-     * `"bottom"`, `"top bottom"`, up to all four in any order. Drawn as the
-     * box's own border inside the declared size, in `--vf-black`, scaled with
-     * the display like every kit frame's border; content and placed children
-     * begin inside it.
+     * `"bottom"`, `"top bottom"`, up to all four in any order. Drawn inside
+     * the declared size, in `--vf-black`, scaled with the display like every
+     * kit frame; content and placed children begin inside it.
      * Unset, no rule; a value naming anything but an edge draws none and
      * warns once.
      */

package/dist/components/vf-container.js

@@ -4,16 +4,18 @@ import n from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js
 import { VfPositioned as r } from "../position.js";
 import { vfBase as i } from "../styles/recipes/host.js";
 import { parsePattern as a } from "../patterns.js";
-import { parseRule as o, ruleClasses as s, vfRule as c } from "../styles/recipes/rule.js";
-import { PatternFillController as l, vfPatternFill as u } from "../pattern-fill.js";
-import { GridSnapController as d } from "../grid-snap.js";
-import { VfSized as f } from "../size.js";
-import { LitElement as p, css as m, html as h } from "lit";
-import { property as g, query as _ } from "lit/decorators.js";
+import { vfStrokeInset as o } from "../styles/recipes/stroke.js";
+import { parseRule as s, ruleClasses as c, vfRule as l } from "../styles/recipes/rule.js";
+import { vfFocusUnderline as u } from "../styles/recipes/focus.js";
+import { PatternFillController as d, vfPatternFill as f } from "../pattern-fill.js";
+import { GridSnapController as p } from "../grid-snap.js";
+import { VfSized as m } from "../size.js";
+import { LitElement as h, css as g, html as _ } from "lit";
+import { property as v, query as y } from "lit/decorators.js";
 //#region src/components/vf-container.ts
-var v = class extends f(r(p)) {
+var b = class extends m(r(h)) {
 	constructor(...e) {
-		super(...e), this._pattern = null, this.#e = !1, this._rule = [], this.#t = !1, this.scale = new t(this), this.gridSnap = new d(this), this.patternFill = new l(this, {
+		super(...e), this._pattern = null, this.#e = !1, this._rule = [], this.#t = !1, this.scale = new t(this), this.gridSnap = new p(this), this.patternFill = new d(this, {
 			getBox: () => this.box,
 			getPattern: () => this._pattern
 		});
@@ -21,9 +23,9 @@ var v = class extends f(r(p)) {
 	static {
 		this.styles = [
 			i,
-			u,
-			c,
-			m`
+			f,
+			l,
+			g`
       :host {
         display: block;
         /* Shrink-wrap an undeclared axis rather than claim the parent's
@@ -44,24 +46,52 @@ var v = class extends f(r(p)) {
         text-align: inherit;
       }
 
-      /* The coordinate system, as one shadow box coinciding with the host box.
-         vf-snap (vfBase) gives it position: relative plus the controller's
-         --vf-snap-dx/-dy offset — so it is BOTH the positioning anchor for
-         children placed with top/left (src/position.ts) AND the element the
-         grid-snap correction lands on. One element owning both is the point:
-         corrected, it takes every placed child with it, kit or not. */
+      /* The painted box, coinciding with the host box: the pattern, the rule
+         and the grid-snap correction (vf-snap, vfBase — position: relative
+         plus the controller's --vf-snap-dx/-dy offset). The coordinate system
+         rides inside it (the slot, below), so the correction takes every
+         placed child with it, kit or not. */
       .box {
-        /* flow-root: contain slotted margins, so the box's top edge — the
-           origin placed children measure from — stays glued to the host's
-           corner instead of being pushed down by a first child's margin
-           collapsing through. */
-        display: flow-root;
         /* Coincide with a declared height (100% of a definite host height;
            against an undeclared one it computes to auto and wraps content),
-           so slotted percentage fills resolve against the stated box. */
+           so the slot inside can take the stated box. */
+        height: 100%;
+        /* The pattern starts inside the rule, as it did when the rule was a
+           border. */
+        background-origin: content-box;
+      }
+      /* The coordinate system: the slot, as a box inside the rule — the
+         rule's row is the painted box's padding (vfRule) — so content,
+         percentage fills and children placed with top/left (src/position.ts)
+         all begin inside it. */
+      .box > slot {
+        position: relative;
+        /* flow-root: contain slotted margins, so the top edge — the origin
+           placed children measure from — stays glued to the box's corner
+           instead of being pushed down by a first child's margin collapsing
+           through. */
+        display: flow-root;
+        /* The stated box less its rules, so slotted percentage fills resolve
+           against it; auto against an undeclared height. */
         height: 100%;
       }
 
+      /* A box the page makes focusable — a pattern chooser's cells as
+         radios, say — wears the kit's focus mark, not the browser's ring: the
+         dashed rule below the box, one blank row under it, since a box like
+         that is nothing but fill (vf-swatch's placement). The rule spans the
+         box; under forced colors a ruled box's stroke is a border outside the
+         padding box the rule measures from, so the insets grow by it there. */
+      :host(:focus-visible) {
+        outline: none;
+      }
+      :host(:focus-visible) .box::after {
+        ${u}
+        bottom: ${o(-3)};
+        left: ${o(-1)};
+        right: ${o(-1)};
+      }
+
       /* The same two words a child uses, read about the host itself — for the
          parents that can give this box a size: a window body, a filled stack
          column, a grid cell. A percentage is the one fill a page can always
@@ -93,19 +123,19 @@ var v = class extends f(r(p)) {
 	#t;
 	willUpdate(e) {
 		if (super.willUpdate(e), e.has("pattern") && (this._pattern = a(this.pattern), this._pattern === null && this.pattern?.trim() && !this.#e && (this.#e = !0, console.warn(`vf-container: unknown pattern "${this.pattern}" — a library name (docs/PATTERNS.md) or sixteen hex digits. Painting nothing.`))), e.has("rule")) {
-			let e = o(this.rule);
+			let e = s(this.rule);
 			this._rule = e ?? [], e === null && !this.#t && (this.#t = !0, console.warn(`vf-container: unknown rule "${this.rule}" — edge names (top, right, bottom, left) separated by spaces. Drawing none.`));
 		}
 	}
 	render() {
-		let e = s(this._rule);
-		return h`<div
+		let e = c(this._rule);
+		return _`<div
       class="vf-snap box vf-pattern-fill${this._pattern ? " vf-patterned" : ""}${e ? ` ${e}` : ""}"
     >
       <slot></slot>
     </div>`;
 	}
 };
-n([g()], v.prototype, "pattern", void 0), n([g()], v.prototype, "rule", void 0), n([_(".box")], v.prototype, "box", void 0), v = n([e("vf-container")], v);
+n([v()], b.prototype, "pattern", void 0), n([v()], b.prototype, "rule", void 0), n([y(".box")], b.prototype, "box", void 0), b = n([e("vf-container")], b);
 //#endregion
-export { v as VfContainer };
+export { b as VfContainer };

package/dist/components/vf-desktop.d.ts

@@ -36,6 +36,25 @@ declare const VfDesktop_base: (new (...args: any[]) => import("../position.js").
  * reads the current holder, and every change of holder — including to and
  * from none — fires `vf-activate`.
  *
+ * **Hidden windows.** A window with `hidden` — closed by a page that hides
+ * its windows rather than removing them, through `vf-window.hide()` or the
+ * attribute itself — never holds the active state. One slotted hidden waits
+ * to be shown; `bringToFront()` on one gives it its place in the stack and
+ * activates nothing; the holder hiding hands the state to the topmost shown
+ * document window, or to none. A window shown into a tier where none is
+ * active, unless the tier was deliberately deactivated, takes it.
+ * {@link stackingOrder} lists the windows as they stand, bottom-most first.
+ *
+ * **The work area.** A slotted `vf-menu-bar` along the top takes its band
+ * off the screen: {@link workArea} is what is left, and the gestures on the
+ * screen stay in it — a window dragged up stops with its title bar under the
+ * bar, where it can still be grabbed, and an icon dropped, nudged or walked
+ * on the desktop lands below the bar. `window-top` deepens the area for
+ * windows alone ({@link windowArea}), for a page with a strip of its own
+ * under the bar. A gesture asks for the box it is clamped into with
+ * `vf-placement-bounds-request` (bubbles, non-composed), the drag surface's
+ * handshake, and the desktop answers for the hosts placed on its screen.
+ *
  * The desktop is a raster with an explicit size, always: **`width` and
  * `height`**, in system px, the way a WIND resource declared a window's —
  * the host box renders at the declared screen plus `2 × bezel` per axis, a
@@ -88,8 +107,8 @@ declare const VfDesktop_base: (new (...args: any[]) => import("../position.js").
  * @fires vf-activate - The active document-tier window changed. Detail
  *   `{ window: HTMLElement | null }` — the new holder, or `null` when the
  *   document tier deactivated (a {@link clearActive} call, or the active
- *   window leaving the DOM with none behind it). Fired once per change of
- *   holder, never for a re-assertion of the same one.
+ *   window leaving the DOM or hiding with no shown window behind it). Fired
+ *   once per change of holder, never for a re-assertion of the same one.
  * @csspart desktop - The patterned screen surface — the whole-system-px
  *   raster (inset by `bezel` when one is set).
  * @cssprop [--vf-desktop=#808080] - base color under the desktop pattern —
@@ -139,6 +158,38 @@ export declare class VfDesktop extends VfDesktop_base {
      * keeps the dither.
      */
     pattern: string | null | undefined;
+    /**
+     * The least `top` a window may take, in system px from the screen's top —
+     * for a page that keeps a strip of its own under the menu bar, over the
+     * windows. A window dragged on this desktop stops there, and
+     * {@link windowArea} starts there; icons still stop at the menu bar. Below
+     * the bar's bottom it changes nothing. Unset, windows stop at the bar.
+     */
+    windowTop?: number | null;
+    /**
+     * The screen less a slotted `vf-menu-bar` along its top edge, in system
+     * px from the screen's corner (the bezel excluded, as for
+     * {@link placementAt}): `{ left, top, width, height }`. The desktop clamps
+     * the gestures on its screen into it — an icon dropped, nudged or walked
+     * on the desktop lands below the menu bar, where it can be grabbed again.
+     * Without a bar it is the whole screen. Measured at the call.
+     */
+    get workArea(): {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    /**
+     * {@link workArea}, deepened to {@link windowTop} where that is lower: the
+     * area windows are dragged in. A window's title bar never goes above it.
+     */
+    get windowArea(): {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
     /**
      * Size the screen to the largest whole-system-px raster whose host box —
      * bezel included — fits a CSS-px bound, and return what was set. The
@@ -223,10 +274,13 @@ export declare class VfDesktop extends VfDesktop_base {
     private readonly _gestureEnd;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /** Whether a slotted window belongs to the floating (utility) tier. The
-     *  attribute is the source of truth here so a not-yet-upgraded element
-     *  still lands in the right tier (variant reflects, so an upgraded
-     *  property-set window agrees). */
+    /** Whether a slotted window belongs to the floating (utility) tier: the
+     *  `variant` property where the window has one, else the attribute, so a
+     *  not-yet-upgraded element still lands in the right tier. Not the
+     *  attribute alone — it reflects in the window's next update, after a
+     *  window made by script and appended in the same task has been slotted,
+     *  and that palette would land in the document tier and lose its
+     *  `active`. */
     private _isUtility;
     /**
      * Bring a slotted window to the front of its tier. A document-tier window
@@ -247,8 +301,17 @@ export declare class VfDesktop extends VfDesktop_base {
      */
     bringToFront(win: HTMLElement): void;
     /** The active document-tier window, or null while the tier is deactivated
-     *  (or has no windows). Utility windows are never the holder. */
+     *  (or has no shown windows). Utility windows and hidden windows are never
+     *  the holder. */
     get activeWindow(): HTMLElement | null;
+    /**
+     * The slotted windows in stacking order, bottom-most first: the document
+     * tier, then the floating tier above it, each in the order its windows
+     * were last raised. Hidden windows are included where they stand. This is
+     * the order the eye sees; the windows' light-DOM order catches up with it
+     * only once a gesture ends, and a raise by keyboard focus moves no node.
+     */
+    get stackingOrder(): HTMLElement[];
     /**
      * Deactivate the whole document tier — clear `active` from every document
      * window, leaving none the holder. Pages route "the user clicked the
@@ -258,7 +321,11 @@ export declare class VfDesktop extends VfDesktop_base {
      * slotted.
      */
     clearActive(): void;
-    /** The z/active half of a raise, shared by every path. */
+    /**
+     * The z/active half of a raise, shared by every path. A hidden window
+     * takes its place in the stack and nothing else: it activates when it is
+     * shown and raised.
+     */
     private _restack;
     /**
      * Schedule the DOM-order sync: one task from now, coalesced, and never
@@ -316,6 +383,19 @@ export declare class VfDesktop extends VfDesktop_base {
      * detail alone.
      */
     private _onDragSurfaceRequest;
+    /**
+     * A gesture measuring the box it is clamped into (src/position.ts): for a
+     * host placed on this screen — a slotted window, an icon in an unplaced
+     * field — the screen, bezel excluded, and the work area's top as the
+     * floor: {@link windowArea}'s for a window, {@link workArea}'s for
+     * anything else. The floor is rounded up to the host's placement lattice,
+     * so a snapped landing never rounds above it. A host placed in a box of its
+     * own (a window body, a placed field) is that box's; an outer desktop
+     * leaves a filled detail alone.
+     */
+    private _onBoundsRequest;
+    /** The bottom of a slotted, shown menu bar along the screen's top edge, system px; else 0. */
+    private _menuBarFloor;
     /**
      * Delegated focusin: raise the window keyboard focus entered, so tabbing
      * into a background window brings it to front (and reveals its close/zoom
@@ -329,6 +409,19 @@ export declare class VfDesktop extends VfDesktop_base {
     private _windowFromEvent;
     /** Wire up newly slotted windows: seed z-indices, normalize `active`. */
     private _onSlotChange;
+    /**
+     * Resolve who should hold `active` after the window set or a window's
+     * visibility changed: a holder still slotted and shown keeps it, a
+     * deliberate deactivation is preserved (never promote a survivor over the
+     * user's "clicked the Finder"), and only then does the topmost shown
+     * window inherit — the active window left the DOM or was hidden, or a
+     * window was shown into a tier with none active. Applied even when null,
+     * so a stray `active` attribute on slotted markup, or on a hidden window,
+     * is normalized in the deactivated state too.
+     */
+    private _resolveActive;
+    /** Watch the `hidden` attribute of every slotted window, and no other. */
+    private _observeWindows;
     /**
      * Re-assert the single-active-window state after slotted `<vf-window>`
      * elements upgrade. One-shot: the flag collapses repeat slotchanges into a
@@ -365,15 +458,24 @@ export declare class VfDesktop extends VfDesktop_base {
      * Minimal-move: windows already in relative order are never touched (the
      * common case — after one raise, one window moves). Non-window siblings
      * (a menu bar, page content) keep their positions; only a window that must
-     * cross the stack moves past them. Moving a node containing the focused
-     * element drops focus to `<body>`, so it is restored afterwards — behind
-     * `_restoringFocus`, because the restore re-fires focusin (see
-     * {@link _onFocusIn}) on an element that may sit in a background window.
+     * cross the stack moves past them. `moveBefore()` keeps the focus inside a
+     * moved window where the browser has it ({@link _move}); re-inserting a
+     * node containing the focused element drops focus to `<body>`, so it is
+     * restored afterwards — behind `_restoringFocus`, because the restore
+     * re-fires focusin (see {@link _onFocusIn}) on an element that may sit in a
+     * background window.
      * Reached only through {@link _requestDomSync}'s task — after a pointer
      * gesture or a programmatic raise, never from a focus-driven one (see
      * {@link _raise} for why).
      */
     private _syncDomOrder;
+    /**
+     * Move a slotted window before `before`: with `Element.moveBefore()` where
+     * the browser has it, which keeps the focus inside the window — a rename
+     * field, a text field's caret — through the move; else by re-inserting it,
+     * and {@link _syncDomOrder} puts the focus back.
+     */
+    private _move;
     protected willUpdate(changed: PropertyValues<this>): void;
     protected updated(changed: Map<PropertyKey, unknown>): void;
     protected render(): unknown;