vintage-frames 0.6.0 → 0.6.2

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

@@ -27,6 +27,15 @@ import './vf-button-group.js';
  * closes it too, with `{ reason: 'outside' }` — for the About box; off by
  * default, since the classic modal ignored an outside click.
  *
+ * Keyboard, the classic Dialog Manager's two rules ({@link VfModalDialog}):
+ * on open, focus goes to the first text-entry control — a slotted control
+ * with `autofocus` first — or, with none, to the default button
+ * (`vf-button variant="default"`). Return or Enter activates the default
+ * button from anywhere in the dialog, a focused Cancel included; Space
+ * presses the focused control. A link keeps its own Enter, and in a
+ * multi-line editor Return inserts the newline while the keypad's Enter
+ * activates the button.
+ *
  * @slot - Default slot: dialog body content.
  * @slot buttons - Optional action buttons. Rendered as a bottom-right
  *   `vf-button-group` (equal-width, faces aligned); the footer only takes

package/dist/components/vf-number-field.js

@@ -26,7 +26,7 @@ var y = class extends r(l) {
 			this.#c(), this.pressed = null;
 		}, this.#d = (e) => {
 			if (this.isSubmitEnter(e)) {
-				this.requestImplicitSubmit();
+				this.requestImplicitSubmit() && e.preventDefault();
 				return;
 			}
 			if (!(this.isDisabled || this.readonly) && !(e.isComposing || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) switch (e.key) {

package/dist/components/vf-scroll-area.js

@@ -115,11 +115,19 @@ var v = class extends r(d) {
          fixed-width box, a wide image) grows the plane — precisely the
          content that overflows sideways. It also makes this box the
          containing block of a sticky child, so a sticky left: 0 strip holds
-         across the scroll. */
+         across the scroll.
+
+         Never shorter than the viewport either: a fixed child (position.ts)
+         is a sticky box whose containing block is this plane, and a plane
+         shorter than the child's stated top clamps the child to the plane's
+         bottom edge (measured: top 100 over 50px of content landed at 50).
+         Content that fits still fits — the plane grows to the viewport, not
+         past it, so nothing overflows that didn't. */
       .content {
         position: relative;
         width: fit-content;
         min-width: 100%;
+        min-height: 100%;
       }
       /* Focusable so keyboard users can scroll; inset ring to stay in-box. */
       .viewport:focus-visible {

package/dist/components/vf-text-field.d.ts

@@ -40,7 +40,8 @@ export declare class VfTextField extends VfTextField_base {
     /**
      * Enter in a single-line field triggers the associated form's implicit
      * submission. The native `<input>` is shadow-encapsulated, so its form owner
-     * is null and the browser won't do this itself.
+     * is null and the browser won't do this itself. A press the form took is
+     * cancelled, so an enclosing modal does not route it again.
      */
     private handleKeydown;
     protected render(): import("lit-html").TemplateResult<1>;

package/dist/components/vf-text-field.js

@@ -41,7 +41,7 @@ var d = class extends n(a) {
 		this.forwardedAttributes = [...a.forwardedAttributes, "pattern"];
 	}
 	handleKeydown(e) {
-		this.isSubmitEnter(e) && this.requestImplicitSubmit();
+		this.isSubmitEnter(e) && this.requestImplicitSubmit() && e.preventDefault();
 	}
 	render() {
 		return s`

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

@@ -30,6 +30,13 @@ declare const VfWindow_base: (new (...args: any[]) => import("../size.js").VfSiz
  * says so once in the console.
  *
  * @slot - Default slot: window body content.
+ * @slot header - Optional header content — a band between the title bar and
+ *   the body, the full width of the window (the Finder window's header
+ *   line): a white interior over a 1px rule, no inset of its own, a
+ *   positioning anchor for placed children. As tall as its content unless
+ *   `header-height` states it. Under `scrollbars` the vertical rail begins
+ *   below it, so the header spans the rail's column. Takes no space until
+ *   populated.
  * @slot status - Optional status-bar content — the classic bottom readout
  *   strip ("40px x 40px"): a 1px rule over a 15px white band under the body,
  *   body-face text on its native line. Takes no space until populated; a
@@ -40,6 +47,8 @@ declare const VfWindow_base: (new (...args: any[]) => import("../size.js").VfSiz
  * @csspart close-box - The close widget (left).
  * @csspart zoom-box - The zoom widget (right).
  * @csspart body - The content area.
+ * @csspart header - The header strip between the title bar and the body
+ *   (when the `header` slot is populated).
  * @csspart status-bar - The bottom status strip (when the `status` slot is
  *   populated).
  * @csspart grow-box - The resize widget (bottom-right, when `resizable`).
@@ -134,6 +143,15 @@ export declare class VfWindow extends VfWindow_base {
      * placed inside the body.
      */
     scrollbars?: 'vertical' | 'horizontal' | 'both';
+    /**
+     * The header's height in whole system px, rule included — the way every
+     * kit bar counts its rule (an 18px title bar is 17 + 1). Unset, the header
+     * is as tall as what is slotted into it, plus the rule. Only matters while
+     * the `header` slot is populated.
+     */
+    headerHeight?: number | null;
+    /** Whether the `header` slot has assigned content (drives the header). */
+    private _hasHeader;
     /** Whether the `status` slot has assigned content (drives the strip). */
     private _hasStatus;
     /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
@@ -190,6 +208,8 @@ export declare class VfWindow extends VfWindow_base {
     disconnectedCallback(): void;
     /** The `.empty` gate: the strip renders only while the slot is populated. */
     private _onStatusSlotChange;
+    /** The header's own gate, on the same terms. */
+    private _onHeaderSlotChange;
     private _onCloseClick;
     private _onZoomClick;
     private _onGrowPointerDown;

package/dist/components/vf-window.js

@@ -25,7 +25,7 @@ function V(e, t, n) {
 }
 var H = 24, U = 8, W = class extends E(c(N)) {
 	constructor(...e) {
-		super(...e), this.heading = "", this.active = !0, this.closable = !0, this.zoomable = !1, this.movable = !1, this.resizable = !1, this._hasStatus = !1, this.scale = new n(this), this.gridSnap = new T(this), this.titleCenter = new O(this), this._dotsPattern = "", this.#e = new x(), this.#t = (e, t, n) => {
+		super(...e), this.heading = "", this.active = !0, this.closable = !0, this.zoomable = !1, this.movable = !1, this.resizable = !1, this._hasHeader = !1, this._hasStatus = !1, this.scale = new n(this), this.gridSnap = new T(this), this.titleCenter = new O(this), this._dotsPattern = "", this.#e = new x(), this.#t = (e, t, n) => {
 			let r = a(this.offsetWidth, this);
 			return {
 				x: Math.min(Math.max(e, H - r), n.width - H),
@@ -204,13 +204,39 @@ var H = 24, U = 8, W = class extends E(c(N)) {
          and a resizable window's grow box (z-index 1) lands over the rail
          corner cell — which the render reserves on a single-axis rail too
          (the area's corner flag), except when the status strip holds the
-         grow box instead. */
+         grow box instead. The same overhang lands the area's top frame line
+         on the header's rule, so the vertical rail's top arrow begins
+         under the header. */
       .edge-scroll {
         width: calc(100% + var(--vf-scale, 1) * 2px);
         height: calc(100% + var(--vf-scale, 1) * 2px);
         margin: calc(var(--vf-scale, 1) * -1px);
       }
 
+      /* --- Header (slot="header") --------------------------------------- */
+      /* A band between the title bar and the body, the full width of the
+         window — the Finder window's header line: a white interior over a
+         1px rule (vfRule's vf-rule-bottom on the element). Like the body it
+         carries no inset and is a positioning anchor: (0,0) is the header's
+         own corner, flow content starts there too, an inset is the content's.
+         As tall as its content unless header-height states it — rule
+         included, the way every kit bar counts its rule (an 18px title bar
+         is 17 + 1). Under the scrollbars parameter the edge rails sit in the
+         body below it, so the header spans the rail's column and the
+         vertical rail's arrows begin under it. Takes no space until the slot
+         is populated. Clipped like the body; a drop-open panel still escapes
+         (see the body's note). A div with a class, never a <header>: that
+         element maps to a banner landmark (see render()). */
+      .header {
+        position: relative;
+        flex: none;
+        background: var(--vf-white, #ffffff);
+        overflow: hidden;
+      }
+      .header.empty {
+        display: none;
+      }
+
       /* --- Status bar (slot="status") ---------------------------------- */
       /* The classic bottom readout strip: a 1px rule over a white interior,
          15px in all — the grow box's own height, so a resizable window's
@@ -329,6 +355,10 @@ var H = 24, U = 8, W = class extends E(c(N)) {
 		let t = e.target;
 		this._hasStatus = t.assignedElements().length > 0;
 	}
+	_onHeaderSlotChange(e) {
+		let t = e.target;
+		this._hasHeader = t.assignedElements().length > 0;
+	}
 	_onCloseClick() {
 		e(this, "vf-close", { reason: "close" });
 	}
@@ -378,6 +408,13 @@ var H = 24, U = 8, W = class extends E(c(N)) {
             <span class="vf-title" part="title" id="title">${this.heading}</span>
             ${this.zoomable ? M(j("Zoom", this.heading), this._onZoomClick) : I}
           `, this.variant === "utility" ? "vf-dots" : "vf-stripes", this.variant === "utility" ? this._dotsTexture() : void 0)}
+        <div
+          class="header vf-rule-bottom ${this._hasHeader ? "" : "empty"}"
+          part="header"
+          style=${this.headerHeight == null ? I : `height:${i(this.headerHeight)}`}
+        >
+          <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
+        </div>
         <div class="body" part="body">
           ${this.scrollbars ? F`
                 <vf-scroll-area
@@ -436,6 +473,9 @@ o([L({ reflect: !0 })], W.prototype, "variant", void 0), o([L()], W.prototype, "
 })], W.prototype, "maxWidth", void 0), o([L({
 	type: Number,
 	attribute: "max-height"
-})], W.prototype, "maxHeight", void 0), o([L({ reflect: !0 })], W.prototype, "scrollbars", void 0), o([R()], W.prototype, "_hasStatus", void 0), W = o([t("vf-window")], W);
+})], W.prototype, "maxHeight", void 0), o([L({ reflect: !0 })], W.prototype, "scrollbars", void 0), o([L({
+	type: Number,
+	attribute: "header-height"
+})], W.prototype, "headerHeight", void 0), o([R()], W.prototype, "_hasHeader", void 0), o([R()], W.prototype, "_hasStatus", void 0), W = o([t("vf-window")], W);
 //#endregion
 export { W as VfWindow };

package/dist/modal-dialog.d.ts

@@ -32,6 +32,12 @@ export declare const modalDialogStyles: import("lit").CSSResult;
  * event, an Escape-close no longer leaves a stale origin behind, so the next
  * open re-derives it.
  *
+ * It also owns the two keyboard rules every classic dialog followed (see
+ * {@link defaultButton} and {@link initialFocusTarget}): Return or Enter
+ * activates the default button from anywhere in the dialog, and the box opens
+ * with the insertion point in its first text field — or, with none, focus on
+ * the default button.
+ *
  * Removing an open modal from the DOM is a close path too. HTML's dialog
  * *removing steps* take the element out of the top layer **without** running
  * the close algorithm — no `close` event, no focus restoration — which is
@@ -124,6 +130,33 @@ export declare class VfModalDialog extends LitElement {
      * drag from squeezing the box.
      */
     protected get dialogSize(): Record<string, string | null>;
+    /**
+     * The dialog's default button — the one wearing the bold ring
+     * (`vf-button[variant="default"]`) — or null with none, or none enabled.
+     * Looked for among the slotted content first, then in the shadow tree, so a
+     * consumer's own modal that renders its buttons itself is covered too.
+     * Override to name it some other way.
+     */
+    protected get defaultButton(): HTMLElement | null;
+    /**
+     * Where focus lands on open. The classic Dialog Manager put the insertion
+     * point in the first editable text item and gave nothing else focus at all;
+     * the web needs a focused control for the keyboard to have anywhere to be,
+     * so with no text field the default button takes it (which is also what
+     * makes Return and Space work there without a Tab). In order:
+     *
+     * 1. a slotted control carrying `autofocus` — the author's say;
+     * 2. the first enabled text-entry control (`vf-text-field`,
+     *    `vf-number-field`, `vf-text-area`, or a native text input/textarea);
+     * 3. the {@link defaultButton};
+     * 4. null — leave the browser's own choice alone.
+     *
+     * Left to itself, `showModal()` focuses the first focusable thing in flat
+     * tree order, which for a Cancel/OK row is Cancel, and for a body with a
+     * link in it is the link — so Return did the one thing a classic dialog's
+     * Return never did. Override to choose differently.
+     */
+    protected get initialFocusTarget(): HTMLElement | null;
     /** Open the modal (native `showModal()`), pinned onto the device grid. */
     show(): void;
     /** Close the modal. Fires `vf-close` with `{ reason: 'close' }`. */

package/dist/modal-dialog.js

@@ -4,7 +4,15 @@ import o from "./_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js"
 import { DocumentListenersController as s } from "./document-listeners.js";
 import { LitElement as c, css as l } from "lit";
 import { property as u, query as d } from "lit/decorators.js";
-var f = 24, p = l`
+var f = 24, p = /* @__PURE__ */ new Set([
+	"text",
+	"search",
+	"url",
+	"tel",
+	"email",
+	"password",
+	"number"
+]), m = (e) => e instanceof HTMLInputElement ? p.has(e.type) : !0, h = l`
   dialog {
     padding: 0;
     margin: auto;
@@ -43,32 +51,43 @@ var f = 24, p = l`
        the fallback is the arrow it always showed. */
     cursor: var(--vf-cursor, default);
   }
-`, m = class extends c {
+`, g = class extends c {
 	constructor(...e) {
 		super(...e), this.scale = new t(this), this.open = !1, this.lightDismiss = !1, this.#e = !1, this.#n = null, this.#r = null, this.#i = new s(this, () => [
 			[
 				this._dialog,
 				"pointerdown",
-				this.#a
+				this.#s
 			],
 			[
 				this._dialog,
 				"pointerup",
-				this.#o
+				this.#c
 			],
 			[
 				this._dialog,
 				"pointercancel",
-				this.#s
+				this.#l
+			],
+			[
+				this._dialog,
+				"keydown",
+				this.#o
 			]
-		]), this.#a = (e) => {
+		]), this.#o = (e) => {
+			if (e.key !== "Enter" || e.defaultPrevented || e.isComposing || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+			let t = e.composedPath();
+			if (t.some((e) => e instanceof HTMLAnchorElement && e.hasAttribute("href")) || t.some((e) => e instanceof HTMLTextAreaElement || e instanceof HTMLElement && e.isContentEditable) && e.code !== "NumpadEnter") return;
+			let n = this.defaultButton;
+			n && (e.preventDefault(), n.click());
+		}, this.#s = (e) => {
 			this.#r = e.target === this._dialog ? e.pointerId : null;
-		}, this.#o = (e) => {
+		}, this.#c = (e) => {
 			let t = this.#r === e.pointerId;
 			this.#r = null, !(!t || e.target !== this._dialog || !this.lightDismiss) && (this.#n = "outside", this.close());
-		}, this.#s = () => {
+		}, this.#l = () => {
 			this.#r = null;
-		}, this.#c = null, this.#m = () => this.settle();
+		}, this.#u = null, this.#g = () => this.settle();
 	}
 	get dialogSize() {
 		return {
@@ -88,42 +107,53 @@ var f = 24, p = l`
 	#n;
 	#r;
 	#i;
-	#a;
+	get defaultButton() {
+		let e = "vf-button[variant=\"default\"]";
+		return [...this.querySelectorAll(e), ...this.renderRoot.querySelectorAll(e)].find((e) => !e.matches(":disabled")) ?? null;
+	}
+	get initialFocusTarget() {
+		return this.querySelector("[autofocus]") || ([...this.querySelectorAll("vf-text-field, vf-number-field, vf-text-area, textarea, input")].find((e) => m(e) && !e.matches(":disabled")) ?? this.defaultButton);
+	}
+	#a() {
+		this.initialFocusTarget?.focus();
+	}
 	#o;
 	#s;
 	#c;
+	#l;
+	#u;
 	show() {
-		this.open = !0, this.hasUpdated && this.#p();
+		this.open = !0, this.hasUpdated && this.#h();
 	}
 	close() {
-		this.open = !1, this.hasUpdated && this.#p();
+		this.open = !1, this.hasUpdated && this.#h();
 	}
 	updated(e) {
-		e.has("open") && this.#p(), (e.has("top") || e.has("left")) && this.settle(), this.#t();
+		e.has("open") && this.#h(), (e.has("top") || e.has("left")) && this.settle(), this.#t();
 	}
-	#l() {
+	#d() {
 		let e = document.documentElement;
 		return {
 			width: a(e.clientWidth || window.innerWidth, this),
 			height: a(e.clientHeight || window.innerHeight, this)
 		};
 	}
-	#u(e, t) {
-		let n = this.#l(), r = a(this._dialog?.offsetWidth ?? 0, this);
+	#f(e, t) {
+		let n = this.#d(), r = a(this._dialog?.offsetWidth ?? 0, this);
 		return {
 			x: Math.min(Math.max(e, f - r), n.width - f),
 			y: Math.min(Math.max(t, 0), Math.max(0, n.height - f))
 		};
 	}
-	#d() {
-		let e = this.#l(), t = this._dialog?.getBoundingClientRect();
+	#p() {
+		let e = this.#d(), t = this._dialog?.getBoundingClientRect();
 		return {
 			x: (e.width - a(t?.width ?? 0, this)) / 2,
 			y: (e.height - a(t?.height ?? 0, this)) / 2
 		};
 	}
 	placeAt(e, t) {
-		let n = this.#u(e, t);
+		let n = this.#f(e, t);
 		this.left = r(n.x, this), this.top = r(n.y, this);
 	}
 	settle() {
@@ -132,10 +162,10 @@ var f = 24, p = l`
 		let t = this.left != null || this.top != null ? {
 			x: this.left ?? 0,
 			y: this.top ?? 0
-		} : this.#d(), n = this.#u(t.x, t.y);
+		} : this.#p(), n = this.#f(t.x, t.y);
 		e.style.left = i(r(n.x, this)), e.style.top = i(r(n.y, this)), e.style.right = "auto", e.style.bottom = "auto", e.style.margin = "0";
 	}
-	#f() {
+	#m() {
 		let e = this._dialog?.style;
 		if (e) for (let t of [
 			"left",
@@ -145,44 +175,44 @@ var f = 24, p = l`
 			"margin"
 		]) e.removeProperty(t);
 	}
-	#p() {
+	#h() {
 		let e = this._dialog;
-		e && (this.open && !e.open ? (this.#c = document.activeElement, e.showModal(), this.settle(), this.#_(e), this.#i.attach()) : !this.open && e.open && e.close());
+		e && (this.open && !e.open ? (this.#u = document.activeElement, e.showModal(), this.#a(), this.settle(), this.#y(e), this.#i.attach()) : !this.open && e.open && e.close());
 	}
-	#m;
-	#h;
 	#g;
-	#_(e) {
-		typeof ResizeObserver < "u" && !this.#h && (this.#h = new ResizeObserver(this.#m), this.#h.observe(e)), window.addEventListener("resize", this.#m), this.#g ??= n(this.#m);
+	#_;
+	#v;
+	#y(e) {
+		typeof ResizeObserver < "u" && !this.#_ && (this.#_ = new ResizeObserver(this.#g), this.#_.observe(e)), window.addEventListener("resize", this.#g), this.#v ??= n(this.#g);
 	}
-	#v() {
-		this.#h?.disconnect(), this.#h = void 0, window.removeEventListener("resize", this.#m), this.#g?.(), this.#g = void 0;
+	#b() {
+		this.#_?.disconnect(), this.#_ = void 0, window.removeEventListener("resize", this.#g), this.#v?.(), this.#v = void 0;
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.#v();
+		super.disconnectedCallback(), this.#b();
 		let e = this._dialog;
 		if (e?.open) {
 			e.close();
-			let t = this.#c, n = document.activeElement;
+			let t = this.#u, n = document.activeElement;
 			t instanceof HTMLElement && t.isConnected && (n === null || n === document.body) && t.focus();
 		}
-		this.#c = null;
+		this.#u = null;
 	}
 	_onNativeCancel() {
 		this.#n = "escape";
 	}
 	_onNativeClose() {
 		let t = this.#n ?? "close";
-		this.#n = null, this.#c = null, this.#r = null, this.#i.detach(), this.#v(), this.open = !1, this.#f(), e(this, "vf-close", { reason: t });
+		this.#n = null, this.#u = null, this.#r = null, this.#i.detach(), this.#b(), this.open = !1, this.#m(), e(this, "vf-close", { reason: t });
 	}
 };
 o([u({
 	type: Boolean,
 	reflect: !0
-})], m.prototype, "open", void 0), o([u({ type: Number })], m.prototype, "width", void 0), o([u({ type: Number })], m.prototype, "height", void 0), o([u({ type: Number })], m.prototype, "top", void 0), o([u({ type: Number })], m.prototype, "left", void 0), o([u({
+})], g.prototype, "open", void 0), o([u({ type: Number })], g.prototype, "width", void 0), o([u({ type: Number })], g.prototype, "height", void 0), o([u({ type: Number })], g.prototype, "top", void 0), o([u({ type: Number })], g.prototype, "left", void 0), o([u({
 	type: Boolean,
 	reflect: !0,
 	attribute: "light-dismiss"
-})], m.prototype, "lightDismiss", void 0), o([d("dialog")], m.prototype, "_dialog", void 0);
+})], g.prototype, "lightDismiss", void 0), o([d("dialog")], g.prototype, "_dialog", void 0);
 //#endregion
-export { m as VfModalDialog, p as modalDialogStyles };
+export { g as VfModalDialog, h as modalDialogStyles };

package/dist/position.d.ts

@@ -9,7 +9,14 @@ type Constructor<T = object> = new (...args: any[]) => T;
 export declare abstract class VfPositionedInterface extends LitElement {
     top?: number | null;
     left?: number | null;
+    fixed: boolean;
 }
+/** A host that takes the placement trio. */
+type PositionedHost = HTMLElement & {
+    top?: number | null;
+    left?: number | null;
+    fixed?: boolean;
+};
 /**
  * Explicit placement — `top`/`left` in whole system px, on **every** component.
  *
@@ -76,6 +83,24 @@ export declare abstract class VfPositionedInterface extends LitElement {
  * element. The controller re-applies **only when the values changed**, so an
  * unrelated update — a heading change, a desktop toggling `active` — never
  * re-asserts a coordinate and costs nothing.
+ *
+ * **`fixed`** holds the placement against the *visible* region of the nearest
+ * scrolling ancestor instead of its scrolled plane — a tool strip over a
+ * document, a column header over rows — and the flag alone places at (0,0).
+ * The engine underneath is `position: sticky`, the one way the platform holds
+ * a box against a scrollport from inside it on the compositor (a scroll
+ * listener counter-translating lags a frame; a layer outside the scroller
+ * stops wheel and touch over it). Sticky boxes stay in flow, which is not
+ * what a placement is, so the controller erases the footprint: the host is
+ * blockified (no line box), shrink-wrapped, and given a negative right/bottom
+ * margin equal to its own box — a 0×0 margin box that flow content lays out
+ * as if it weren't there, measured by a ResizeObserver so a relabel or a zoom
+ * step keeps it exact. `z-index: 1` puts it over the plane's placed children,
+ * which is where a fixed strip belongs. Two facts of the engine that the
+ * docs state as rules: sticky only ever pushes a box *down* from where the
+ * flow put it, so a fixed child comes before the flow content in its parent;
+ * and a scroll container that never scrolls (a plain window body is
+ * `overflow: hidden`) holds it exactly where placement would.
  */
 export declare const VfPositioned: <T extends Constructor<LitElement>>(Base: T) => Constructor<VfPositionedInterface> & T;
 /** The box a gesture is clamped into, in system px — see {@link PlacementClamp}. */
@@ -127,10 +152,7 @@ export type PlacementClamp = (x: number, y: number, bounds: PlacementBounds) =>
  */
 export declare class PlacementController {
     #private;
-    constructor(host: HTMLElement & {
-        top?: number | null;
-        left?: number | null;
-    }, clamp: PlacementClamp);
+    constructor(host: PositionedHost, clamp: PlacementClamp);
     /** Whether a gesture has placed this host (as opposed to markup or CSS). */
     get placed(): boolean;
     /**
@@ -189,8 +211,5 @@ export declare class PlacementController {
  * Returns whether it warned, so the caller can latch — one warning per element,
  * not per render.
  */
-export declare function warnMovableContract(host: HTMLElement & {
-    top?: number | null;
-    left?: number | null;
-}, what: string, example: string): boolean;
+export declare function warnMovableContract(host: PositionedHost, what: string, example: string): boolean;
 export {};

package/dist/position.js

@@ -2,31 +2,83 @@ import { snapSys as e, sysLength as t, toSysExact as n } from "./scale.js";
 import r from "./_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { property as i } from "lit/decorators.js";
 //#region src/position.ts
-var a = (e) => {
+var a = {
+	inline: "block",
+	"inline-block": "block",
+	"inline-flex": "flex",
+	"inline-grid": "grid",
+	"inline-table": "table"
+}, o = (e) => {
 	class t extends e {
 		constructor(...e) {
-			super(...e), new o(this);
+			super(...e), this.fixed = !1, new s(this);
 		}
 	}
-	return r([i({ type: Number })], t.prototype, "top", void 0), r([i({ type: Number })], t.prototype, "left", void 0), t;
-}, o = class {
+	return r([i({ type: Number })], t.prototype, "top", void 0), r([i({ type: Number })], t.prototype, "left", void 0), r([i({
+		type: Boolean,
+		reflect: !0
+	})], t.prototype, "fixed", void 0), t;
+}, s = class {
 	#e;
 	#t = null;
 	#n = null;
 	#r = !1;
+	#i = !1;
+	#a = null;
 	constructor(e) {
 		this.#e = e, e.addController(this);
 	}
+	hostConnected() {
+		this.#i && this.#r && this.#c();
+	}
+	hostDisconnected() {
+		this.#a?.disconnect(), this.#a = null;
+	}
 	hostUpdated() {
-		let e = this.#e.top ?? null, n = this.#e.left ?? null, r = this.#e.style;
-		if (e === null && n === null) {
-			if (!this.#r) return;
-			this.#r = !1, r.removeProperty("position"), r.removeProperty("top"), r.removeProperty("left"), r.removeProperty("right"), r.removeProperty("bottom"), r.removeProperty("margin");
+		let e = this.#e.top ?? null, n = this.#e.left ?? null, r = this.#e.fixed === !0, i = this.#e.style;
+		if (e === null && n === null && !r) {
+			if (!this.#i) return;
+			this.#r && this.#s(), this.#i = !1, this.#r = !1, i.removeProperty("position"), i.removeProperty("top"), i.removeProperty("left"), i.removeProperty("right"), i.removeProperty("bottom"), i.removeProperty("margin");
 			return;
 		}
-		this.#r && e === this.#t && n === this.#n || (this.#r = !0, this.#t = e, this.#n = n, r.position = "absolute", r.top = t(e ?? 0), r.left = t(n ?? 0), r.right = "auto", r.bottom = "auto", r.margin = "0");
+		if (this.#i && e === this.#t && n === this.#n && r === this.#r) return;
+		let a = this.#i && this.#r;
+		this.#i = !0, this.#t = e, this.#n = n, this.#r = r, i.position = r ? "sticky" : "absolute", i.top = t(e ?? 0), i.left = t(n ?? 0), i.right = "auto", i.bottom = "auto", r ? a || this.#o() : (a && this.#s(), i.margin = "0");
 	}
-}, s = class {
+	#o() {
+		let e = this.#e.style;
+		e.maxWidth = "fit-content", e.zIndex = "1", this.#l = !1;
+		let t = this.#e.getBoundingClientRect();
+		(t.width > 0 || t.height > 0) && this.#u(t.width, t.height), this.#c();
+	}
+	#s() {
+		this.#a?.disconnect(), this.#a = null, this.#l = !1;
+		let e = this.#e.style;
+		e.removeProperty("display"), e.removeProperty("max-width"), e.removeProperty("z-index");
+	}
+	#c() {
+		this.#a ??= new ResizeObserver((e) => {
+			let t = e[e.length - 1]?.borderBoxSize?.[0];
+			if (t) this.#u(t.inlineSize, t.blockSize);
+			else {
+				let e = this.#e.getBoundingClientRect();
+				this.#u(e.width, e.height);
+			}
+		}), this.#a.observe(this.#e);
+	}
+	#l = !1;
+	#u(e, t) {
+		let n = this.#e.style;
+		if (!this.#l) {
+			let e = getComputedStyle(this.#e).display;
+			if (e) {
+				let t = a[e];
+				t && (n.display = t), this.#l = !0;
+			}
+		}
+		n.margin = `0 ${-e}px ${-t}px 0`;
+	}
+}, c = class {
 	#e;
 	#t;
 	#n = !1;
@@ -43,7 +95,7 @@ var a = (e) => {
 			x: t.left ?? 0,
 			y: t.top ?? 0
 		};
-		let r = getComputedStyle(t), i = r.position === "absolute" || r.position === "fixed", a = i ? parseFloat(r.left) || 0 : t.offsetLeft, o = i ? parseFloat(r.top) || 0 : t.offsetTop;
+		let r = getComputedStyle(t), i = l.has(r.position), a = i ? parseFloat(r.left) || 0 : t.offsetLeft, o = i ? parseFloat(r.top) || 0 : t.offsetTop;
 		return {
 			x: e(n(a, t), t),
 			y: e(n(o, t), t)
@@ -60,15 +112,19 @@ var a = (e) => {
 			height: n(r?.clientHeight ?? window.innerHeight, e)
 		};
 	}
-};
-function c(e, t, n) {
-	let r = e.top != null || e.left != null, i = getComputedStyle(e).position, a = i === "absolute" || i === "fixed", o = null;
-	if (!r && !a) o = "unplaced";
+}, l = /* @__PURE__ */ new Set([
+	"absolute",
+	"fixed",
+	"sticky"
+]);
+function u(e, t, n) {
+	let r = e.top != null || e.left != null || e.fixed === !0, i = l.has(getComputedStyle(e).position), a = null;
+	if (!r && !i) a = "unplaced";
 	else {
 		let t = e.offsetParent;
-		t && t !== e.ownerDocument.body && (t.clientWidth === 0 || t.clientHeight === 0) && (o = "unsized-parent");
+		t && t !== e.ownerDocument.body && (t.clientWidth === 0 || t.clientHeight === 0) && (a = "unsized-parent");
 	}
-	return o !== null && (console.warn(o === "unplaced" ? `${t}: movable, but in normal flow — so the first drag has to pull it out, reflowing everything after it on the page. State the origin in system px and it never was in flow: ${n}` : `${t}: the positioning parent has no box, so there is nowhere to drag to. Give it a size (and \`position: relative\`, if it is not a kit container) — the clamp is falling back to the viewport meanwhile.`), !0);
+	return a !== null && (console.warn(a === "unplaced" ? `${t}: movable, but in normal flow — so the first drag has to pull it out, reflowing everything after it on the page. State the origin in system px and it never was in flow: ${n}` : `${t}: the positioning parent has no box, so there is nowhere to drag to. Give it a size (and \`position: relative\`, if it is not a kit container) — the clamp is falling back to the viewport meanwhile.`), !0);
 }
 //#endregion
-export { s as PlacementController, a as VfPositioned, c as warnMovableContract };
+export { c as PlacementController, o as VfPositioned, u as warnMovableContract };