vintage-frames 0.7.2 → 0.9.0

package/dist/index.js

@@ -37,11 +37,11 @@ import { ScrollRailController as it, renderScrollRail as at } from "./scroll-rai
 import { VfScrollArea as ot } from "./components/vf-scroll-area.js";
 import { VfWindow as st } from "./components/vf-window.js";
 import { VfModalDialog as ct, modalDialogStyles as lt } from "./modal-dialog.js";
-import { VfButtonGroup as ut } from "./components/vf-button-group.js";
-import { VfDialog as dt } from "./components/vf-dialog.js";
-import { VfSeparator as ft } from "./components/vf-separator.js";
-import { VfFormControl as pt } from "./form-control.js";
-import { VfButton as mt } from "./components/vf-button.js";
+import { VfDialog as ut } from "./components/vf-dialog.js";
+import { VfSeparator as dt } from "./components/vf-separator.js";
+import { VfFormControl as ft } from "./form-control.js";
+import { VfButton as pt } from "./components/vf-button.js";
+import { VfButtonGroup as mt } from "./components/vf-button-group.js";
 import { VfSwatch as ht } from "./components/vf-swatch.js";
 import { VfToggleControl as gt } from "./toggle-control.js";
 import { VfCheckbox as _t } from "./components/vf-checkbox.js";
@@ -72,4 +72,4 @@ import { VfStack as Ut } from "./components/vf-stack.js";
 import { VfContainer as Wt } from "./components/vf-container.js";
 import { CURSOR_ARROW as Gt, CURSOR_CROSSHAIR as Kt, CURSOR_I_BEAM as qt, CURSOR_WAIT as Jt } from "./cursor-art.js";
 import { applyCursor as Yt } from "./cursor.js";
-export { ze as BLINK_FLIPS, Be as BLINK_INTERVAL_MS, Ee as BUTTON_FACE, De as BUTTON_FRAME, Ge as CARET_DOWN, Ke as CHECKBOX_X, qe as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, Gt as CURSOR_ARROW, Kt as CURSOR_CROSSHAIR, qt as CURSOR_I_BEAM, Jt as CURSOR_WAIT, Te as DocumentListenersController, Le as DragController, bt as FocusRuleController, Ce as GridSnapController, G as PATTERNS, K as PATTERN_NAMES, q as PATTERN_SIZE, D as PIXEL_GRID_METRICS, Ve as PRESS_HOLD_MS, xe as PatternFillController, T as PlacementController, Je as RADIO_DOT, Ye as RADIO_FACE, Xe as RADIO_RING, Ze as RADIO_RING_PRESSED, He as RENAME_DELAY_MS, Oe as RING_FRAME, ke as RING_HOLE, Ae as RING_INSET, ie as RULE_EDGES, je as SCREEN_CORNER, Qe as SLIDER_THUMB, $e as SLIDER_THUMB_FACE, et as STEPPER, tt as STEPPER_DOWN_FILL, nt as STEPPER_UP_FILL, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, it as ScrollRailController, Re as ScrollStateController, R as TILE_LATTICE, ge as TileRasterCache, be as TrackWidthController, k as VF_BODY_FAMILY, M as VF_DISPLAY_FAMILY, mt as VfButton, ut as VfButtonGroup, _t as VfCheckbox, Wt as VfContainer, Fe as VfDesktop, dt as VfDialog, Vt as VfFieldset, pt as VfFormControl, Ht as VfGrid, Pt as VfIcon, Ft as VfIconField, Nt as VfImg, jt as VfLabel, zt as VfList, Bt as VfListItem, Lt as VfMenu, It as VfMenuBar, Rt as VfMenuItem, ct as VfModalDialog, Et as VfNumberField, Dt as VfOption, Mt as VfParagraph, E as VfPositioned, kt as VfProgressBar, vt as VfRadio, yt as VfRadioGroup, ot as VfScrollArea, Ot as VfSelect, ft as VfSeparator, Ie as VfSized, At as VfSlider, Ut as VfStack, ht as VfSwatch, Tt as VfTextArea, Ct as VfTextControlBase, wt as VfTextField, gt as VfToggleControl, st as VfWindow, Yt as applyCursor, f as applyScale, t as defineElement, o as devicePxPerSystemPx, p as effectiveScale, e as emit, xt as focusModality, m as getScale, s as getZoom, rt as glyphSvg, lt as modalDialogStyles, h as onScaleChange, c as onZoomChange, J as parsePattern, ae as parseRule, Y as patternHex, X as patternMotif, _e as patternOverride, Z as patternRects, Ue as prefersReducedMotion, A as registerBodyFace, N as registerDisplayFace, O as registerEmbeddedFont, at as renderScrollRail, we as requestGridSnap, l as resetZoomBaseline, oe as ruleClasses, We as runSelectionBlink, g as snapSys, _ as snapToDevicePx, v as snapToSystemPx, Me as steppedCornerClip, Ne as steppedRectClip, Pe as steppedRingClip, y as sys, b as sysLength, x as sysLengths, S as systemPxQuantum, ve as tileGrid, z as tileImage, B as tileRaster, V as tileRects, H as tileSpan, C as toSys, w as toSysExact, St as trackFocusModality, u as truePixelRatio, I as vfBase, j as vfBodyDecls, te as vfChromeFrame, P as vfDisplay, F as vfDisplayDecls, Q as vfDots, n as vfElement, me as vfField, ue as vfFocus, de as vfFocusRing, fe as vfFocusUnderline, ee as vfHardShadowDecls, ne as vfModalFrame, re as vfPanel, Se as vfPatternFill, se as vfRule, he as vfScrollRail, L as vfStaticText, $ as vfStripes, ye as vfTileGrid, U as vfTileMaskSize, W as vfTileSize, ce as vfTitleBar, pe as vfToggle, le as vfWindowWidgets };
+export { ze as BLINK_FLIPS, Be as BLINK_INTERVAL_MS, Ee as BUTTON_FACE, De as BUTTON_FRAME, Ge as CARET_DOWN, Ke as CHECKBOX_X, qe as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, Gt as CURSOR_ARROW, Kt as CURSOR_CROSSHAIR, qt as CURSOR_I_BEAM, Jt as CURSOR_WAIT, Te as DocumentListenersController, Le as DragController, bt as FocusRuleController, Ce as GridSnapController, G as PATTERNS, K as PATTERN_NAMES, q as PATTERN_SIZE, D as PIXEL_GRID_METRICS, Ve as PRESS_HOLD_MS, xe as PatternFillController, T as PlacementController, Je as RADIO_DOT, Ye as RADIO_FACE, Xe as RADIO_RING, Ze as RADIO_RING_PRESSED, He as RENAME_DELAY_MS, Oe as RING_FRAME, ke as RING_HOLE, Ae as RING_INSET, ie as RULE_EDGES, je as SCREEN_CORNER, Qe as SLIDER_THUMB, $e as SLIDER_THUMB_FACE, et as STEPPER, tt as STEPPER_DOWN_FILL, nt as STEPPER_UP_FILL, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, it as ScrollRailController, Re as ScrollStateController, R as TILE_LATTICE, ge as TileRasterCache, be as TrackWidthController, k as VF_BODY_FAMILY, M as VF_DISPLAY_FAMILY, pt as VfButton, mt as VfButtonGroup, _t as VfCheckbox, Wt as VfContainer, Fe as VfDesktop, ut as VfDialog, Vt as VfFieldset, ft as VfFormControl, Ht as VfGrid, Pt as VfIcon, Ft as VfIconField, Nt as VfImg, jt as VfLabel, zt as VfList, Bt as VfListItem, Lt as VfMenu, It as VfMenuBar, Rt as VfMenuItem, ct as VfModalDialog, Et as VfNumberField, Dt as VfOption, Mt as VfParagraph, E as VfPositioned, kt as VfProgressBar, vt as VfRadio, yt as VfRadioGroup, ot as VfScrollArea, Ot as VfSelect, dt as VfSeparator, Ie as VfSized, At as VfSlider, Ut as VfStack, ht as VfSwatch, Tt as VfTextArea, Ct as VfTextControlBase, wt as VfTextField, gt as VfToggleControl, st as VfWindow, Yt as applyCursor, f as applyScale, t as defineElement, o as devicePxPerSystemPx, p as effectiveScale, e as emit, xt as focusModality, m as getScale, s as getZoom, rt as glyphSvg, lt as modalDialogStyles, h as onScaleChange, c as onZoomChange, J as parsePattern, ae as parseRule, Y as patternHex, X as patternMotif, _e as patternOverride, Z as patternRects, Ue as prefersReducedMotion, A as registerBodyFace, N as registerDisplayFace, O as registerEmbeddedFont, at as renderScrollRail, we as requestGridSnap, l as resetZoomBaseline, oe as ruleClasses, We as runSelectionBlink, g as snapSys, _ as snapToDevicePx, v as snapToSystemPx, Me as steppedCornerClip, Ne as steppedRectClip, Pe as steppedRingClip, y as sys, b as sysLength, x as sysLengths, S as systemPxQuantum, ve as tileGrid, z as tileImage, B as tileRaster, V as tileRects, H as tileSpan, C as toSys, w as toSysExact, St as trackFocusModality, u as truePixelRatio, I as vfBase, j as vfBodyDecls, te as vfChromeFrame, P as vfDisplay, F as vfDisplayDecls, Q as vfDots, n as vfElement, me as vfField, ue as vfFocus, de as vfFocusRing, fe as vfFocusUnderline, ee as vfHardShadowDecls, ne as vfModalFrame, re as vfPanel, Se as vfPatternFill, se as vfRule, he as vfScrollRail, L as vfStaticText, $ as vfStripes, ye as vfTileGrid, U as vfTileMaskSize, W as vfTileSize, ce as vfTitleBar, pe as vfToggle, le as vfWindowWidgets };

package/dist/open-art.d.ts

@@ -24,6 +24,8 @@
  * where the source is opaque, so intersecting the silhouette with itself
  * shifted one pixel each way leaves exactly the pixels whose neighbors are
  * all opaque — the interior. The ring the erosion removes is the outline.
+ * The ghost erodes with the four edge neighbors; the drag outline with all
+ * eight, a region inset — {@link deriveDragOutline} says why it matters.
  */
 /**
  * Derive the open ghost from an icon's art: a canvas at the art's natural
@@ -39,7 +41,7 @@
  * an environment refusing a 2d context.
  */
 export declare function deriveOpenArt(art: HTMLImageElement | HTMLCanvasElement): HTMLCanvasElement | null;
-/** A box inside an icon's frame, in system px. */
+/** A box inside the outline's box, in system px. */
 export interface DragOutlineBox {
     x: number;
     y: number;
@@ -47,11 +49,12 @@ export interface DragOutlineBox {
     height: number;
 }
 /**
- * Where an icon's parts sit inside its frame, in system px — measured by the
- * icon, so the outline lands on the same pixels the frame paints.
+ * Where an icon's parts sit inside the outline's box, in system px —
+ * measured by the icon, so the outline lands on the same pixels the frame
+ * paints.
  */
 export interface DragOutlineGeometry {
-    /** The frame. */
+    /** The outline's box: the frame, widened to a name plate that overhangs it. */
     width: number;
     height: number;
     /**
@@ -66,18 +69,28 @@ export interface DragOutlineGeometry {
     plate: DragOutlineBox | null;
 }
 /**
- * Derive the outline an icon drags as: the mask's boundary — the same
- * one-pixel ring the open ghost finds, by the same erosion — and the name
- * plate's rectangle, solid black on transparent, one canvas the size of the
- * icon's frame at one image px per system px. Not yet dotted: the ring is
- * derived once per drag, and {@link dotOutline} re-applies the checker at
- * each step's phase.
+ * Derive the outline an icon drags as: the boundary of the mask united with
+ * the name plate's rectangle — one shape, the one-pixel ring a 3×3 box
+ * erosion removes from it, so where the art and the plate abut the outline
+ * wraps around both — solid black on transparent, one canvas the size of
+ * the outline's box (the icon's frame, widened to a plate that overhangs
+ * it) at one image px per system px. Not yet dotted: the ring is derived
+ * once per drag, and {@link dotOutline} re-applies the checker at each
+ * step's phase.
+ *
+ * The box, not the ghost's four-neighbor plus: it is the region inset
+ * `FrameRgn` painted a frame from, and the difference shows on a 45° edge.
+ * A one-pixel diagonal is all one parity of the checker, so the pen would
+ * keep all of it or none — and over the dither "none" is the dither's own
+ * ink diagonal, no line at all. Under the box a 45° edge is two pixels
+ * wide and carries both parities, so one full diagonal of dots survives at
+ * either phase.
  *
  * Art the pipeline cannot draw falls back to the cell's rectangle — the
  * ghost's rule: never a blank where a state cannot show. Compositing only,
  * never a readback, so cross-origin art derives too.
  *
- * Returns null for a frame with no size, or an environment refusing a 2d
+ * Returns null for a box with no size, or an environment refusing a 2d
  * context.
  */
 export declare function deriveDragOutline(art: HTMLImageElement | HTMLCanvasElement | null, geometry: DragOutlineGeometry): HTMLCanvasElement | null;

package/dist/open-art.js

@@ -44,22 +44,24 @@ var i = null, a = () => {
 function s(t, n) {
 	let { width: r, height: i } = n;
 	if (!r || !i) return null;
-	let a = e(r, i);
-	if (!a) return null;
-	let s = t ? n.art : null;
-	if (t && s && s.width > 0 && s.height > 0) {
-		let n = e(r, i), o = e(r, i);
-		if (!n || !o) return null;
-		n.ctx.drawImage(t, s.x, s.y, s.width, s.height), n.ctx.globalCompositeOperation = "source-in", n.ctx.fillStyle = "#000", n.ctx.fillRect(0, 0, r, i), o.ctx.drawImage(n.canvas, 0, 0), o.ctx.globalCompositeOperation = "destination-in";
-		for (let [e, t] of [
-			[1, 0],
-			[-1, 0],
-			[0, 1],
-			[0, -1]
-		]) o.ctx.drawImage(n.canvas, e, t);
-		a.ctx.drawImage(n.canvas, 0, 0), a.ctx.globalCompositeOperation = "destination-out", a.ctx.drawImage(o.canvas, 0, 0), a.ctx.globalCompositeOperation = "source-over";
-	} else o(a.ctx, n.cell);
-	return n.plate && o(a.ctx, n.plate), a.canvas;
+	let a = e(r, i), o = e(r, i), s = e(r, i);
+	if (!a || !o || !s) return null;
+	let c = t ? n.art : null;
+	if (t && c && c.width > 0 && c.height > 0 ? (a.ctx.drawImage(t, c.x, c.y, c.width, c.height), a.ctx.globalCompositeOperation = "source-in", a.ctx.fillStyle = "#000", a.ctx.fillRect(0, 0, r, i), a.ctx.globalCompositeOperation = "destination-in", a.ctx.fillRect(n.cell.x, n.cell.y, n.cell.width, n.cell.height), a.ctx.globalCompositeOperation = "source-over") : (a.ctx.fillStyle = "#000", a.ctx.fillRect(n.cell.x, n.cell.y, n.cell.width, n.cell.height)), n.plate) {
+		let e = n.plate;
+		a.ctx.fillStyle = "#000", a.ctx.fillRect(e.x, e.y, e.width, e.height);
+	}
+	o.ctx.drawImage(a.canvas, 0, 0), o.ctx.globalCompositeOperation = "destination-in";
+	for (let e of [
+		-1,
+		0,
+		1
+	]) for (let t of [
+		-1,
+		0,
+		1
+	]) (e || t) && o.ctx.drawImage(a.canvas, e, t);
+	return s.ctx.drawImage(a.canvas, 0, 0), s.ctx.globalCompositeOperation = "destination-out", s.ctx.drawImage(o.canvas, 0, 0), s.ctx.globalCompositeOperation = "source-over", s.canvas;
 }
 function c(e, t) {
 	return +(((e + t) % 2 + 2) % 2 == 0);

package/dist/position.d.ts

@@ -1,5 +1,15 @@
 import type { LitElement } from 'lit';
 type Constructor<T = object> = new (...args: any[]) => T;
+/**
+ * The nine placement origins — which point of a placed element's own box
+ * `left`/`top` place, the vertical keyword first. `top left` is the default.
+ */
+export type PlacementOrigin = 'top left' | 'top center' | 'top right' | 'center left' | 'center' | 'center right' | 'bottom left' | 'bottom center' | 'bottom right';
+/** A system-px offset, `{ x, y }`. */
+type Offset = {
+    x: number;
+    y: number;
+};
 /**
  * The mixin's surface, as a `declare class` for the same TS4094 reason
  * {@link VfToggleControlInterface} states: TypeScript cannot name the
@@ -10,12 +20,14 @@ export declare abstract class VfPositionedInterface extends LitElement {
     top?: number | null;
     left?: number | null;
     fixed: boolean;
+    origin?: PlacementOrigin | null;
 }
-/** A host that takes the placement trio. */
+/** A host that takes the placement trio and its origin. */
 type PositionedHost = HTMLElement & {
     top?: number | null;
     left?: number | null;
     fixed?: boolean;
+    origin?: string | null;
 };
 /**
  * Explicit placement — `top`/`left` in whole system px, on **every** component.
@@ -52,9 +64,9 @@ type PositionedHost = HTMLElement & {
  *
  * The anchor is CSS's own: the nearest positioned ancestor's padding box. The
  * kit's containers are all deliberate anchors — a desktop's raster, a window's
- * content region (the frame's inner edge, below the title bar — the 12px body
- * inset governs flow content only, exactly the DITL convention), a dialog's
- * content area, a stack's box, a fieldset's border box, a scroll area's
+ * or a dialog's content region (the frame's inner edge, below any title bar,
+ * with no inset — flow content starts there too, exactly the DITL
+ * convention), a stack's box, a fieldset's border box, a scroll area's
  * scrolled plane. In a non-kit parent, give the parent `position: relative`,
  * the one line of CSS this feature can't write for you.
  *
@@ -94,6 +106,27 @@ type PositionedHost = HTMLElement & {
  * plane's box is never grown by an absolutely positioned child. One funnel
  * covers a drop, an arrow nudge and a page's own `icon.left = …` alike.
  *
+ * **`origin`** names which point of the host's own box the pair places —
+ * nine keywords, vertical then horizontal (`top center`, `bottom right`,
+ * `center`), `top left` the default. A title stays centered on its `left`
+ * whatever its text; a button group keeps its bottom-right corner in from
+ * the dialog's however long its labels run. The point is measured, not
+ * transformed: the controller reads the host's border box in whole system px
+ * (w × h) and writes `left` as the stated `L` less ⌈w·fx⌉ (`fx` 0, ½ or 1),
+ * `top` the same way — the ceiling sends an odd size's leftover half toward
+ * the start, the tie rule the kit's other centering uses. A ResizeObserver
+ * keeps the offset current through a relabel or a late font, and each such
+ * rewrite is announced like any other write. A zoom step changes CSS px, not
+ * system px, so it recomputes the same offset. `translate: -50% 0` would have
+ * been the no-JavaScript version, and fails twice: a percentage of an odd
+ * width is half a pixel, which smears the 1-bit art, and a transform makes
+ * the host the containing block for `position: fixed` descendants — a placed
+ * group holding a `vf-select` would trap its list. `top left` is the plain
+ * code path: no observer, no measurement, the same inline style as before
+ * the attribute existed. An unknown value places as `top left` and warns once
+ * per element. On its own the attribute places nothing: it changes what the
+ * pair means, and is inert on a host in flow.
+ *
  * **`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).
@@ -127,8 +160,12 @@ export declare const VfPositioned: <T extends Constructor<LitElement>>(Base: T)
  * expected to carry no border of its own (the three do not), so its border
  * box is its padding box; `scaleAt` is the element whose `--vf-scale` the
  * conversion reads — the component's host.
+ *
+ * With `child`, the pair to write to *that* element so its box's corner
+ * lands on the point: the offset its `origin` adds is folded in, and is zero
+ * for a child with none.
  */
-export declare function placementIn(anchor: Element, clientX: number, clientY: number, scaleAt?: Element): {
+export declare function placementIn(anchor: Element, clientX: number, clientY: number, scaleAt?: Element, child?: Element): {
     left: number;
     top: number;
 };
@@ -191,7 +228,14 @@ export declare class PlacementController {
      */
     get bounds(): PlacementBounds;
     /**
-     * The origin a move adds its delta to, in system px.
+     * The offset the host's stated pair sits from its box's top-left corner,
+     * in whole system px — what its `origin` adds, `(0, 0)` without one. A
+     * group drag reads it to clamp each member's box rather than its pair.
+     */
+    get offset(): Readonly<Offset>;
+    /**
+     * The origin a move adds its delta to, in system px — the stated pair,
+     * which with an `origin` is the origin point rather than the corner.
      *
      * A stated coordinate is authoritative and needs no measuring — including
      * the one this controller wrote last time. Otherwise the host is wherever
@@ -200,6 +244,7 @@ export declare class PlacementController {
      * (`left: 10%` and `left: 1em` are perfectly good ways to place one, and
      * both resolve to px here), everything else through its in-flow offset,
      * which is measured against the same padding box `left`/`top` will be.
+     * That read is the corner, so the origin's offset is added back.
      */
     seed(): {
         x: number;
@@ -221,6 +266,10 @@ export declare class PlacementController {
      * the gesture into that phantom, walking the host to the parent's origin
      * while the user drags away from it. The box at the moment of the press is
      * the one the user is pushing against.
+     *
+     * The pair is the origin point; the clamp is a rule about the *box*. So
+     * the origin's offset comes off before the clamp and goes back on after,
+     * and a dragged title stays centered on wherever it was dropped.
      */
     moveTo(x: number, y: number): void;
 }

package/dist/position.js

@@ -1,99 +1,158 @@
 import { emit as e } from "./events.js";
-import { snapSys as t, sysLength as n, toSysExact as r } from "./scale.js";
-import i from "./_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { property as a } from "lit/decorators.js";
+import { effectiveScale as t, snapSys as n, sysLength as r, toSysExact as i } from "./scale.js";
+import a from "./_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { property as o } from "lit/decorators.js";
 //#region src/position.ts
-var o = {
+var s = /* @__PURE__ */ new Map([
+	["top left", [0, 0]],
+	["top center", [.5, 0]],
+	["top right", [1, 0]],
+	["center left", [0, .5]],
+	["center", [.5, .5]],
+	["center right", [1, .5]],
+	["bottom left", [0, 1]],
+	["bottom center", [.5, 1]],
+	["bottom right", [1, 1]]
+]), c = s.get("top left"), l = {
+	x: 0,
+	y: 0
+};
+function u(e, t, [n, r], i) {
+	return {
+		x: Math.ceil(Math.round(e / i) * n),
+		y: Math.ceil(Math.round(t / i) * r)
+	};
+}
+var d = {
 	inline: "block",
 	"inline-block": "block",
 	"inline-flex": "flex",
 	"inline-grid": "grid",
 	"inline-table": "table"
-}, s = (e) => {
+}, f = (e) => {
 	class t extends e {
 		constructor(...e) {
-			super(...e), this.fixed = !1, new c(this);
+			super(...e), this.fixed = !1, new h(this);
 		}
 	}
-	return i([a({ type: Number })], t.prototype, "top", void 0), i([a({ type: Number })], t.prototype, "left", void 0), i([a({
+	return a([o({ type: Number })], t.prototype, "top", void 0), a([o({ type: Number })], t.prototype, "left", void 0), a([o({
 		type: Boolean,
 		reflect: !0
-	})], t.prototype, "fixed", void 0), t;
-}, c = class {
+	})], t.prototype, "fixed", void 0), a([o({ reflect: !0 })], t.prototype, "origin", void 0), t;
+}, p = /* @__PURE__ */ new WeakMap();
+function m(e) {
+	return p.get(e)?.offset ?? l;
+}
+var h = class {
 	#e;
 	#t = null;
 	#n = null;
 	#r = !1;
-	#i = !1;
-	#a = null;
+	#i = null;
+	#a = !1;
+	#o = null;
+	#s = c;
+	#c = !1;
+	#l = !1;
+	#u = 0;
+	#d = 0;
+	#f = null;
 	constructor(e) {
-		this.#e = e, e.addController(this);
+		this.#e = e, e.addController(this), p.set(e, this);
+	}
+	get offset() {
+		if (this.#s === c) return l;
+		if (this.#a) return {
+			x: this.#u,
+			y: this.#d
+		};
+		let e = this.#e.getBoundingClientRect();
+		return u(e.width, e.height, this.#s, t(this.#e));
 	}
 	hostConnected() {
-		this.#i && this.#r && this.#l();
+		this.#a && (this.#r || this.#l) && this.#y();
 	}
 	hostDisconnected() {
-		this.#a?.disconnect(), this.#a = null;
+		this.#b();
 	}
 	hostUpdated() {
-		let e = this.#e.top ?? null, t = this.#e.left ?? null, r = this.#e.fixed === !0, i = this.#e.style;
-		if (e === null && t === null && !r) {
-			if (!this.#i) return;
-			this.#r && this.#c(), this.#i = !1, this.#r = !1, i.removeProperty("position"), i.removeProperty("top"), i.removeProperty("left"), i.removeProperty("right"), i.removeProperty("bottom"), i.removeProperty("margin"), this.#o(null, null);
+		let e = this.#e.top ?? null, t = this.#e.left ?? null, n = this.#e.fixed === !0, r = this.#e.origin ?? null, i = this.#e.style;
+		if (r !== this.#o && (this.#o = r, this.#s = this.#p(r)), e === null && t === null && !n) {
+			if (!this.#a) return;
+			this.#r && this.#v(), this.#b(), this.#a = !1, this.#r = !1, this.#l = !1, this.#u = 0, this.#d = 0, i.removeProperty("position"), i.removeProperty("top"), i.removeProperty("left"), i.removeProperty("right"), i.removeProperty("bottom"), i.removeProperty("margin"), this.#g(null, null);
 			return;
 		}
-		if (this.#i && e === this.#t && t === this.#n && r === this.#r) return;
-		let a = this.#i && this.#r;
-		this.#i = !0, this.#t = e, this.#n = t, this.#r = r, i.position = r ? "sticky" : "absolute", i.top = n(e ?? 0), i.left = n(t ?? 0), i.right = "auto", i.bottom = "auto", r ? a || this.#s() : (a && this.#c(), i.margin = "0"), this.#o(t ?? 0, e ?? 0);
+		if (this.#a && e === this.#t && t === this.#n && n === this.#r && r === this.#i) return;
+		let a = this.#a && this.#r, o = this.#s !== c;
+		if (this.#a = !0, this.#t = e, this.#n = t, this.#r = n, this.#i = r, this.#l = o, i.position = n ? "sticky" : "absolute", o) {
+			let e = this.#e.getBoundingClientRect();
+			(e.width > 0 || e.height > 0) && this.#h(e.width, e.height);
+		} else this.#u = 0, this.#d = 0;
+		this.#m(), i.right = "auto", i.bottom = "auto", n ? a || this.#_() : (a && this.#v(), i.margin = "0"), n || o ? this.#y() : this.#b(), this.#g(t ?? 0, e ?? 0);
+	}
+	#p(e) {
+		if (e == null) return c;
+		let t = e.trim().replace(/\s+/g, " ");
+		return t === "" ? c : s.get(t) || (this.#c || (this.#c = !0, console.warn(`${this.#e.localName}: origin="${e}" is not a placement origin — one of top left, top center, top right, center left, center, center right, bottom left, bottom center, bottom right. Placing as top left.`)), c);
+	}
+	#m() {
+		let e = this.#e.style;
+		e.top = r((this.#t ?? 0) - this.#d), e.left = r((this.#n ?? 0) - this.#u);
+	}
+	#h(e, n) {
+		let r = u(e, n, this.#s, t(this.#e));
+		return r.x === this.#u && r.y === this.#d ? !1 : (this.#u = r.x, this.#d = r.y, !0);
 	}
-	#o(t, n) {
+	#g(t, n) {
 		e(this.#e, "vf-placement-change", {
 			left: t,
 			top: n
 		}, { composed: !1 });
 	}
-	#s() {
+	#_() {
 		let e = this.#e.style;
-		e.maxWidth = "fit-content", e.zIndex = "1", this.#u = !1;
+		e.maxWidth = "fit-content", e.zIndex = "1", this.#x = !1;
 		let t = this.#e.getBoundingClientRect();
-		(t.width > 0 || t.height > 0) && this.#d(t.width, t.height), this.#l();
+		(t.width > 0 || t.height > 0) && this.#S(t.width, t.height);
 	}
-	#c() {
-		this.#a?.disconnect(), this.#a = null, this.#u = !1;
+	#v() {
+		this.#x = !1;
 		let e = this.#e.style;
 		e.removeProperty("display"), e.removeProperty("max-width"), e.removeProperty("z-index");
 	}
-	#l() {
-		this.#a ??= new ResizeObserver((e) => {
-			let t = e[e.length - 1]?.borderBoxSize?.[0];
-			if (t) this.#d(t.inlineSize, t.blockSize);
-			else {
-				let e = this.#e.getBoundingClientRect();
-				this.#d(e.width, e.height);
-			}
-		}), this.#a.observe(this.#e);
+	#y() {
+		this.#f ??= new ResizeObserver((e) => {
+			let t = e[e.length - 1]?.borderBoxSize?.[0], n = t ? {
+				width: t.inlineSize,
+				height: t.blockSize
+			} : this.#e.getBoundingClientRect();
+			this.#r && this.#S(n.width, n.height), this.#l && this.#h(n.width, n.height) && (this.#m(), this.#g(this.#n ?? 0, this.#t ?? 0));
+		}), this.#f.observe(this.#e);
+	}
+	#b() {
+		this.#f?.disconnect(), this.#f = null;
 	}
-	#u = !1;
-	#d(e, t) {
+	#x = !1;
+	#S(e, t) {
 		let n = this.#e.style;
-		if (!this.#u) {
+		if (!this.#x) {
 			let e = getComputedStyle(this.#e).display;
 			if (e) {
-				let t = o[e];
-				t && (n.display = t), this.#u = !0;
+				let t = d[e];
+				t && (n.display = t), this.#x = !0;
 			}
 		}
 		n.margin = `0 ${-e}px ${-t}px 0`;
 	}
 };
-function l(e, n, i, a = e) {
-	let o = e.getBoundingClientRect();
+function g(e, t, r, a = e, o) {
+	let s = e.getBoundingClientRect(), c = o ? m(o) : l;
 	return {
-		left: t(r(n - o.left, a), a),
-		top: t(r(i - o.top, a), a)
+		left: n(i(t - s.left, a) + c.x, a),
+		top: n(i(r - s.top, a) + c.y, a)
 	};
 }
-var u = class {
+var _ = class {
 	#e;
 	#t;
 	#n = !1;
@@ -107,36 +166,39 @@ var u = class {
 	get bounds() {
 		return this.#r ?? this.#i();
 	}
+	get offset() {
+		return m(this.#e);
+	}
 	seed() {
 		let e = this.#e;
 		if (this.#r = this.#i(), e.left != null || e.top != null) return {
 			x: e.left ?? 0,
 			y: e.top ?? 0
 		};
-		let n = getComputedStyle(e), i = d.has(n.position), a = i ? parseFloat(n.left) || 0 : e.offsetLeft, o = i ? parseFloat(n.top) || 0 : e.offsetTop;
+		let t = getComputedStyle(e), r = v.has(t.position), a = r ? parseFloat(t.left) || 0 : e.offsetLeft, o = r ? parseFloat(t.top) || 0 : e.offsetTop, s = this.offset;
 		return {
-			x: t(r(a, e), e),
-			y: t(r(o, e), e)
+			x: n(i(a, e), e) + s.x,
+			y: n(i(o, e), e) + s.y
 		};
 	}
-	moveTo(e, n) {
-		let r = this.#e, i = this.#t(e, n, this.#r ?? this.#i());
-		r.left = t(i.x, r), r.top = t(i.y, r), this.#n = !0;
+	moveTo(e, t) {
+		let r = this.#e, { x: i, y: a } = this.offset, o = this.#t(e - i, t - a, this.#r ?? this.#i());
+		r.left = n(o.x + i, r), r.top = n(o.y + a, r), this.#n = !0;
 	}
 	#i() {
 		let e = this.#e, t = e.offsetParent, n = t && t.clientWidth > 0 && t.clientHeight > 0 ? t : null;
 		return {
-			width: r(n?.clientWidth ?? window.innerWidth, e),
-			height: r(n?.clientHeight ?? window.innerHeight, e)
+			width: i(n?.clientWidth ?? window.innerWidth, e),
+			height: i(n?.clientHeight ?? window.innerHeight, e)
 		};
 	}
-}, d = /* @__PURE__ */ new Set([
+}, v = /* @__PURE__ */ new Set([
 	"absolute",
 	"fixed",
 	"sticky"
 ]);
-function f(e, t, n) {
-	let r = e.top != null || e.left != null || e.fixed === !0, i = d.has(getComputedStyle(e).position), a = null;
+function y(e, t, n) {
+	let r = e.top != null || e.left != null || e.fixed === !0, i = v.has(getComputedStyle(e).position), a = null;
 	if (!r && !i) a = "unplaced";
 	else {
 		let t = e.offsetParent;
@@ -145,4 +207,4 @@ function f(e, t, n) {
 	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 { u as PlacementController, s as VfPositioned, l as placementIn, f as warnMovableContract };
+export { _ as PlacementController, f as VfPositioned, g as placementIn, y as warnMovableContract };