vintage-frames 0.5.6 → 0.6.1

package/dist/components/vf-scroll-area.d.ts

@@ -22,9 +22,15 @@ declare const VfScrollArea_base: (new (...args: any[]) => import("../position.js
  * and {@link corner} reserves that cell on a single-axis rail too — the
  * rail stops 15px short of the frame, for a grow box to land in.
  *
- * Size the host (width/height) from the outside; the viewport fills it. The
- * viewport insets its content 8px; {@link flush} drops that inset so content
- * runs to the frame and the rails.
+ * Size the host (width/height) from the outside; the viewport fills it.
+ * Content runs to the frame and the rails — the area adds no inset of its
+ * own; an inset is the content's (a `vf-stack pad`).
+ *
+ * The scrolled plane sizes to its content — never narrower than the
+ * viewport, as wide as content that cannot wrap — so the rails follow a row
+ * that grows sideways the way they follow copy that grows down, and a
+ * `slotchange` re-measures. {@link measure} covers a scroll range that
+ * changes with no box changing (a placed child moved through `top`/`left`).
  *
  * @slot - Scrollable content.
  * @csspart viewport - The inner scrolling container.
@@ -43,13 +49,6 @@ export declare class VfScrollArea extends VfScrollArea_base {
      * natively (wheel, keyboard) but draws no rail.
      */
     axis: 'vertical' | 'horizontal' | 'both';
-    /**
-     * Drop the viewport's 8px inset: slotted content and the (0,0) of placed
-     * children sit at the frame's inner edge, one system px from the frame
-     * box (the border-floor compensation stays — see the viewport rule).
-     * `vf-window[scrollbars]` forwards its own `flush` here.
-     */
-    flush: boolean;
     /**
      * Reserve the bottom-right corner cell on a single-axis rail: the rail
      * stops 15px short of the frame and the viewport spans the rest, leaving
@@ -83,6 +82,16 @@ export declare class VfScrollArea extends VfScrollArea_base {
      * scripts silently no-opped on the host.
      */
     focus(options?: FocusOptions): void;
+    /**
+     * Re-measure overflow and re-sync the rails. The area tracks its content's
+     * box and its slot by itself; call this for a scroll range that changes
+     * with no box changing anywhere — a placed child moved through
+     * `top`/`left`, a transform — the way the kit's own fields re-measure on
+     * input.
+     */
+    measure(): void;
+    /** Content added or removed under the fixed box — re-measure. */
+    private _onSlotChange;
     static styles: import("lit").CSSResult[];
     protected render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -13,7 +13,7 @@ import { property as h, query as g, state as _ } from "lit/decorators.js";
 //#region src/components/vf-scroll-area.ts
 var v = class extends r(d) {
 	constructor(...e) {
-		super(...e), this.scale = new t(this), this.gridSnap = new s(this), this.axis = "vertical", this.flush = !1, this.corner = !1, this.label = "", this.scrollState = new c(this, () => this.viewport, () => this.content, (e) => {
+		super(...e), this.scale = new t(this), this.gridSnap = new s(this), this.axis = "vertical", this.corner = !1, this.label = "", this.scrollState = new c(this, () => this.viewport, () => this.content, (e) => {
 			this._scrollable = e.x || e.y;
 		}), this.rail = new l(this, {
 			getScroll: () => this.viewport,
@@ -23,6 +23,12 @@ var v = class extends r(d) {
 	focus(e) {
 		this.viewport?.focus(e);
 	}
+	measure() {
+		this.scrollState.measure(), this.rail.sync();
+	}
+	_onSlotChange() {
+		this.measure();
+	}
 	static {
 		this.styles = [
 			i,
@@ -62,23 +68,15 @@ var v = class extends r(d) {
            recipe (.vf-scroll) and the reservation is the rail element, not a
            native gutter. The unreserved axis still scrolls, railless.
 
-           8px inset plus border-floor compensation: engines floor the
-           fractional frame border to whole CSS px, and the mod() term is
-           exactly what they floored away — so slotted content (and the (0,0)
-           of placed children) sits exactly 9 system px from the frame box at
-           every scale, as it did under the borderless-scroller construction.
-           (mod is 0 at whole scales.) */
+           No inset of its own — only the border-floor compensation: engines
+           floor the fractional frame border to whole CSS px, and the mod()
+           term is exactly what they floored away, so slotted content (and
+           the (0,0) of placed children) sits exactly one system px from the
+           frame box at every scale (mod is 0 at whole scales). An inset is
+           the content's (a vf-stack pad). */
         overflow: auto;
         min-width: 0;
         min-height: 0;
-        padding: calc(
-          var(--vf-scale, 1) * 8px + mod(var(--vf-scale, 1) * 1px, 1px)
-        );
-      }
-      /* flush: the inset goes, the border-floor term stays — content and the
-         (0,0) of placed children sit at the frame's inner edge, exactly one
-         system px from the frame box at every scale. */
-      :host([flush]) .viewport {
         padding: mod(var(--vf-scale, 1) * 1px, 1px);
       }
       /* A single-axis rail with a reserved corner: the viewport spans the
@@ -105,10 +103,31 @@ var v = class extends r(d) {
          (src/position.ts). It must be THIS wrapper and not .box: .content
          rides the scroll, so positioned children travel with the content —
          anchored to .box they would hang fixed over the rail while the plane
-         moved beneath them. Inside the viewport's 8px padding, so (0,0) is
-         where flow content starts. */
+         moved beneath them. (0,0) is where flow content starts.
+
+         Sized to its content: never narrower than the viewport, and as wide
+         as content that cannot wrap. A block's auto width is the viewport's
+         whatever the row inside does, so the controllers' ResizeObserver on
+         this box never saw horizontal growth — a row gaining a cell left the
+         thumb and the overflow state stale until something else re-measured.
+         fit-content is the shrink-to-fit width, not max-content: copy wraps
+         exactly as before, and only unwrappable width (a nowrap row, a
+         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.
+
+         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 {
@@ -129,7 +148,9 @@ var v = class extends r(d) {
           role=${this.label ? "region" : this._scrollable ? "group" : m}
           aria-label=${this.label || m}
         >
-          <div class="content"><slot></slot></div>
+          <div class="content">
+            <slot @slotchange=${this._onSlotChange}></slot>
+          </div>
         </div>
         ${e ? u(this.rail, "vertical") : m}
         ${t ? u(this.rail, "horizontal") : m}
@@ -141,9 +162,6 @@ var v = class extends r(d) {
 n([h({ reflect: !0 })], v.prototype, "axis", void 0), n([h({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "flush", void 0), n([h({
-	type: Boolean,
-	reflect: !0
 })], v.prototype, "corner", void 0), n([h()], v.prototype, "label", void 0), n([g(".viewport")], v.prototype, "viewport", void 0), n([g(".content")], v.prototype, "content", void 0), n([_()], v.prototype, "_scrollable", void 0), v = n([e("vf-scroll-area")], v);
 //#endregion
 export { v as VfScrollArea };

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`).
@@ -120,13 +129,6 @@ export declare class VfWindow extends VfWindow_base {
     maxWidth?: number | null;
     /** See {@link minWidth}. Unbounded by default. */
     maxHeight?: number | null;
-    /**
-     * Remove the default 12px body padding. Under `scrollbars` the body has
-     * none to remove, so the flag reaches the built-in scroll area instead
-     * and drops its viewport's 8px inset: content runs to the frame and the
-     * rails, and the (0,0) of placed children is the content region's corner.
-     */
-    flush: boolean;
     /**
      * Put System 7 scroll rails on the window edge — the classic document
      * window. The body slot renders inside a built-in `vf-scroll-area` pulled
@@ -136,11 +138,20 @@ export declare class VfWindow extends VfWindow_base {
      * a populated status strip holds the grow box, when the rail runs edge to
      * edge onto the strip's rule. Values mirror `vf-scroll-area`'s `axis`; the
      * `heading` names the scroll region; the viewport part is re-exported.
-     * The body's own padding goes; the viewport keeps its 8px inset unless
-     * `flush`, which passes through. The slotted composition (SPEC §5
-     * vf-scroll-area) still works for windows that want an inset well instead.
+     * Content runs to the frame and the rails; an inset is the content's own.
+     * The slotted composition (SPEC §5 vf-scroll-area) still works for a well
+     * 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. */
@@ -197,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.flush = !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),
@@ -180,17 +180,13 @@ var H = 24, U = 8, W = class extends E(c(N)) {
         /* The positioning anchor for slotted children placed with top/left
            (src/position.ts): coordinates measure from the content region's
            corner — the frame's inner edge, below the title bar — exactly the
-           DITL convention. CSS anchors absolute children at the padding box,
-           so the 12px inset below governs flow content only. */
+           DITL convention. No inset of its own: the classic content region
+           had none, and flow content starts at the same corner a placed
+           child does. An inset is the content's (a vf-stack pad). */
         position: relative;
         flex: 1 1 auto;
         min-height: 0;
         overflow: hidden;
-        padding: calc(var(--vf-scale, 1) * 12px);
-      }
-      :host([flush]) .body,
-      :host([scrollbars]) .body {
-        padding: 0;
       }
       /* The edge-rail composition pulls the scroll area one system px OUT of
          the body on every side so its frame border repaints the window's
@@ -208,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
@@ -333,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" });
 	}
@@ -382,12 +408,18 @@ 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
                   class="edge-scroll"
                   axis=${this.scrollbars}
-                  ?flush=${this.flush}
                   ?corner=${this.resizable && !this._hasStatus}
                   label=${this.heading || I}
                   exportparts="viewport"
@@ -441,9 +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({
-	type: Boolean,
-	reflect: !0
-})], W.prototype, "flush", 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/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 };

package/dist/scroll-rail.d.ts

@@ -64,6 +64,16 @@ export declare class ScrollRailController implements ReactiveController {
     constructor(host: ReactiveControllerHost & HTMLElement & {
         readonly renderRoot: HTMLElement | DocumentFragment;
     }, opts: ScrollRailOptions);
+    /**
+     * Wire on connect as well as on update. A host the desktop re-inserts (its
+     * DOM-order sync moves a raised window, src/components/vf-desktop.ts) is
+     * disconnected and reconnected with no update scheduled — Lit's
+     * `enableUpdating` is a no-op after the first — so `hostUpdated` alone
+     * left the rail with no scroll listener, no observers, and whatever
+     * degenerate state it wrote while hidden. Both calls no-op before the
+     * first render, when the scroller query is still null.
+     */
+    hostConnected(): void;
     hostUpdated(): void;
     hostDisconnected(): void;
     /** (Re-)attach the scroll listener and observers to the current scroller. */

package/dist/scroll-rail.js

@@ -77,6 +77,9 @@ var h = 16, g = 16, _ = 14, v = 66, y = class {
 			!t || e.pointerId !== t.pointerId || (this.press = null, this.clearRepeat(), t.button?.removeAttribute("data-pressed"), t.rail.hasPointerCapture(e.pointerId) && t.rail.releasePointerCapture(e.pointerId));
 		}, t.addController(this);
 	}
+	hostConnected() {
+		this.wire(), this.sync();
+	}
 	hostUpdated() {
 		this.wire(), this.sync();
 	}

package/dist/styles/recipes/scroll-rail.js

@@ -5,9 +5,16 @@ import { css as a, unsafeCSS as o } from "lit";
 var s = i(r["gray-25"]), c = s.width, l = s.height, u = s.rects, d = e(c, l, t(u)), f = a`
   /* Hide the native bar, keep the native scrolling. Both lines ship:
      scrollbar-width reaches Chromium 121+/Firefox/Safari 18.2+, the pseudo
-     covers older WebKit — the last scrollbar pseudo left in the kit. */
+     covers older WebKit — the last scrollbar pseudo left in the kit.
+
+     No rubber-band: a bounce moves content the rail cannot express (the
+     thumb is clamped to its track), and 1-bit has no smooth motion — System
+     7 stopped hard. none rather than contain, which keeps the bounce. The
+     cost is scroll chaining, which a page that scrolls restores through the
+     scroller's part (the reference page does — SPEC §4 vfScrollRail). */
   .vf-scroll {
     scrollbar-width: none;
+    overscroll-behavior: none;
   }
   .vf-scroll::-webkit-scrollbar {
     display: none;