vireuikit 0.7.0 → 0.8.0

package/dist/web.cjs

@@ -79,6 +79,67 @@ function atomBody(base, state = ATOM_AT_REST, frost = false) {
   }
   return { alpha, white, lift };
 }
+var CONTROL_SIZES = ["touch", "small", "medium", "large", "xlarge"];
+var MIN_TOUCH_TARGET_DP = 44;
+var MIN_POINTER_TARGET_DP = 24;
+var capsule = (height, paddingX) => ({
+  height,
+  paddingX,
+  icon: Math.round(height / 2),
+  radius: height / 2,
+  shape: "capsule"
+});
+var rounded = (height, paddingX) => ({
+  height,
+  paddingX,
+  icon: Math.round(height / 2),
+  radius: height / 4,
+  shape: "rounded"
+});
+var BUTTON_SIZES = {
+  touch: capsule(44, 20),
+  small: rounded(24, 10),
+  medium: rounded(32, 14),
+  large: capsule(40, 18),
+  xlarge: capsule(48, 22)
+};
+function iconButtonSize(size) {
+  const spec = BUTTON_SIZES[size];
+  return { ...spec, width: spec.height, paddingX: 0 };
+}
+var MENU_PADDING = 0.3;
+function menuSize(size) {
+  const spec = BUTTON_SIZES[size];
+  const padding = Math.round(spec.height * MENU_PADDING);
+  return {
+    row: spec.height,
+    padding,
+    itemRadius: spec.radius,
+    radius: spec.radius + padding,
+    icon: spec.icon,
+    labelPad: spec.paddingX
+  };
+}
+function defaultSize(input) {
+  return input.touch ? "touch" : "medium";
+}
+function hitSlop(bodyDp, minTargetDp) {
+  return bodyDp >= minTargetDp ? 0 : (minTargetDp - bodyDp) / 2;
+}
+function minTarget(input) {
+  return input.touch ? MIN_TOUCH_TARGET_DP : MIN_POINTER_TARGET_DP;
+}
+
+// src/kit/adaptive/input.ts
+function sizeTier(input) {
+  return defaultSize({ touch: input.primary === "coarse" });
+}
+function hitTarget(input) {
+  return minTarget({ touch: input.anyCoarse });
+}
+function hoversWith(pointerType) {
+  return pointerType !== "touch";
+}
 
 // src/kit/behavior/focus.ts
 function stepFocus(event) {
@@ -108,8 +169,6 @@ function stepPress(state, event, enabled2) {
 }
 
 // src/kit/behavior/control.ts
-var TOUCH_INPUT = { hover: false };
-var POINTER_INPUT = { hover: true };
 var CONTROL_IDLE = {
   press: PRESS_IDLE,
   hovered: false,
@@ -347,56 +406,6 @@ var SINKING = { grow: 0.06, defocus: 1 };
 function pressResponse(kind) {
   return atomLift(kind) === 1 ? LIFTING : SINKING;
 }
-var CONTROL_SIZES = ["touch", "small", "medium", "large", "xlarge"];
-var MIN_TOUCH_TARGET_DP = 44;
-var MIN_POINTER_TARGET_DP = 24;
-var capsule = (height, paddingX) => ({
-  height,
-  paddingX,
-  icon: Math.round(height / 2),
-  radius: height / 2,
-  shape: "capsule"
-});
-var rounded = (height, paddingX) => ({
-  height,
-  paddingX,
-  icon: Math.round(height / 2),
-  radius: height / 4,
-  shape: "rounded"
-});
-var BUTTON_SIZES = {
-  touch: capsule(44, 20),
-  small: rounded(24, 10),
-  medium: rounded(32, 14),
-  large: capsule(40, 18),
-  xlarge: capsule(48, 22)
-};
-function iconButtonSize(size) {
-  const spec = BUTTON_SIZES[size];
-  return { ...spec, width: spec.height, paddingX: 0 };
-}
-var MENU_PADDING = 0.3;
-function menuSize(size) {
-  const spec = BUTTON_SIZES[size];
-  const padding = Math.round(spec.height * MENU_PADDING);
-  return {
-    row: spec.height,
-    padding,
-    itemRadius: spec.radius,
-    radius: spec.radius + padding,
-    icon: spec.icon,
-    labelPad: spec.paddingX
-  };
-}
-function defaultSize(input) {
-  return input.touch ? "touch" : "medium";
-}
-function hitSlop(bodyDp, minTargetDp) {
-  return bodyDp >= minTargetDp ? 0 : (minTargetDp - bodyDp) / 2;
-}
-function minTarget(input) {
-  return input.touch ? MIN_TOUCH_TARGET_DP : MIN_POINTER_TARGET_DP;
-}
 
 // src/web/a11y.ts
 var QUERIES = {
@@ -443,6 +452,184 @@ function effectiveA11y(own) {
   return resolveA11y(systemA11y(), merged);
 }
 
+// src/kit/geometry.ts
+function intersectRect(a, b) {
+  const x = Math.max(a.x, b.x);
+  const y = Math.max(a.y, b.y);
+  const right = Math.min(a.x + a.width, b.x + b.width);
+  const bottom = Math.min(a.y + a.height, b.y + b.height);
+  return right > x && bottom > y ? { x, y, width: right - x, height: bottom - y } : null;
+}
+
+// src/kit/adaptive/context.ts
+var POSTURE_FLAT = { kind: "flat" };
+function postureFromSegments(window2, segments) {
+  if (segments.length !== 2) return POSTURE_FLAT;
+  const [a, b] = [...segments].sort((p, q) => p.x - q.x || p.y - q.y);
+  const gapX = b.x - (a.x + a.width);
+  if (gapX >= 0 && a.y < b.y + b.height && b.y < a.y + a.height) {
+    return { kind: "book", fold: { bounds: { x: a.x + a.width, y: 0, width: gapX, height: window2.height }, occluding: gapX > 0 } };
+  }
+  const [top, bottom] = [...segments].sort((p, q) => p.y - q.y);
+  const gapY = bottom.y - (top.y + top.height);
+  if (gapY >= 0) {
+    return { kind: "tabletop", fold: { bounds: { x: 0, y: top.y + top.height, width: window2.width, height: gapY }, occluding: gapY > 0 } };
+  }
+  return POSTURE_FLAT;
+}
+var area = (r) => r ? r.width * r.height : 0;
+function segmentOf(box, segments) {
+  const cx = box.x + box.width / 2;
+  const cy = box.y + box.height / 2;
+  const holding = segments.find((s) => cx >= s.x && cx < s.x + s.width && cy >= s.y && cy < s.y + s.height);
+  if (holding) return holding;
+  let best;
+  let most = 0;
+  for (const s of segments) {
+    const overlap = area(intersectRect(s, box));
+    if (overlap > most) {
+      most = overlap;
+      best = s;
+    }
+  }
+  if (best) return best;
+  let nearest;
+  let distance = Number.POSITIVE_INFINITY;
+  for (const s of segments) {
+    const d = Math.hypot(s.x + s.width / 2 - cx, s.y + s.height / 2 - cy);
+    if (d < distance) {
+      distance = d;
+      nearest = s;
+    }
+  }
+  return nearest;
+}
+
+// src/web/environment.ts
+var QUERIES2 = {
+  coarse: "(pointer: coarse)",
+  anyCoarse: "(any-pointer: coarse)",
+  anyHover: "(any-hover: hover)"
+};
+var media = (query) => typeof matchMedia !== "undefined" && matchMedia(query).matches;
+var keyboardSeen = false;
+var inputOverride = {};
+var inputListeners = /* @__PURE__ */ new Set();
+var viewportOverride = null;
+var viewportListeners = /* @__PURE__ */ new Set();
+function systemInput() {
+  if (typeof matchMedia === "undefined") return { primary: "fine", anyCoarse: false, hover: true, keyboard: keyboardSeen };
+  const coarse = media(QUERIES2.coarse);
+  return {
+    primary: coarse ? "coarse" : "fine",
+    anyCoarse: coarse || media(QUERIES2.anyCoarse),
+    hover: media(QUERIES2.anyHover),
+    keyboard: keyboardSeen
+  };
+}
+function setInputOverride(next) {
+  inputOverride = { ...inputOverride, ...next };
+  for (const listener of [...inputListeners]) listener();
+}
+function getInputOverride() {
+  return inputOverride;
+}
+function effectiveInput() {
+  const system = systemInput();
+  return {
+    primary: inputOverride.primary ?? system.primary,
+    anyCoarse: inputOverride.anyCoarse ?? system.anyCoarse,
+    hover: inputOverride.hover ?? system.hover,
+    keyboard: inputOverride.keyboard ?? system.keyboard
+  };
+}
+var editable = (target) => target instanceof Element && target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])') !== null;
+function onKey(e) {
+  const target = e.composedPath()[0] ?? e.target;
+  if (keyboardSeen || e.isComposing || e.key === "Unidentified" || e.key === "Process" || editable(target)) return;
+  keyboardSeen = true;
+  for (const listener of [...inputListeners]) listener();
+}
+function watchInput(onChange) {
+  inputListeners.add(onChange);
+  const lists = typeof matchMedia === "undefined" ? [] : Object.values(QUERIES2).map((q) => matchMedia(q));
+  for (const list of lists) list.addEventListener("change", onChange);
+  if (inputListeners.size === 1 && typeof window !== "undefined") window.addEventListener("keydown", onKey, true);
+  return () => {
+    inputListeners.delete(onChange);
+    for (const list of lists) list.removeEventListener("change", onChange);
+    if (inputListeners.size === 0 && typeof window !== "undefined") window.removeEventListener("keydown", onKey, true);
+  };
+}
+var pointerLayers = ({ primary, anyCoarse, hover }) => `${primary} ${anyCoarse} ${hover}`;
+function watchPointerInput(onChange) {
+  let last2 = pointerLayers(effectiveInput());
+  return watchInput(() => {
+    const next = pointerLayers(effectiveInput());
+    if (next === last2) return;
+    last2 = next;
+    onChange();
+  });
+}
+function setViewportOverride(next) {
+  viewportOverride = next;
+  for (const listener of [...viewportListeners]) listener();
+}
+function viewportSegments() {
+  if (viewportOverride?.root.isConnected) {
+    const r = viewportOverride.root.getBoundingClientRect();
+    const viewport2 = { x: r.x, y: r.y, width: r.width, height: r.height };
+    const local = viewportOverride.segments ?? [{ x: 0, y: 0, width: r.width, height: r.height }];
+    return { viewport: viewport2, segments: local.map((s) => ({ x: s.x + r.x, y: s.y + r.y, width: s.width, height: s.height })) };
+  }
+  const root = typeof document === "undefined" ? null : document.documentElement;
+  const viewport = { x: 0, y: 0, width: root?.clientWidth ?? 0, height: root?.clientHeight ?? 0 };
+  const api = typeof window === "undefined" ? null : window.viewport?.segments;
+  const segments = api && api.length > 1 ? api.map((s) => ({ x: s.x, y: s.y, width: s.width, height: s.height })) : [viewport];
+  return { viewport, segments };
+}
+function watchViewport(onChange) {
+  viewportListeners.add(onChange);
+  if (typeof window !== "undefined") window.addEventListener("resize", onChange);
+  return () => {
+    viewportListeners.delete(onChange);
+    if (typeof window !== "undefined") window.removeEventListener("resize", onChange);
+  };
+}
+function contextOf(root) {
+  const r = root.getBoundingClientRect();
+  const window2 = { width: r.width, height: r.height };
+  const box = { x: r.x, y: r.y, width: r.width, height: r.height };
+  const local = viewportSegments().segments.map((s) => intersectRect(s, box)).filter((s) => s !== null).map((s) => ({ x: s.x - r.x, y: s.y - r.y, width: s.width, height: s.height }));
+  return {
+    window: window2,
+    input: effectiveInput(),
+    posture: postureFromSegments(window2, local),
+    reduceMotion: effectiveA11y({}).reduceMotion
+  };
+}
+function watchAdaptiveContext(root, onChange) {
+  let last2 = "";
+  const emit = () => {
+    if (!root.isConnected) return;
+    const ctx = contextOf(root);
+    const key = JSON.stringify(ctx);
+    if (key === last2) return;
+    last2 = key;
+    onChange(ctx);
+  };
+  const cleanups = [watchInput(emit), watchViewport(emit), watchSystemA11y(emit), watchA11yOverride(emit)];
+  if (typeof ResizeObserver !== "undefined") {
+    const observer = new ResizeObserver(emit);
+    observer.observe(root);
+    cleanups.push(() => observer.disconnect());
+  }
+  emit();
+  return () => {
+    for (const cleanup of cleanups) cleanup();
+  };
+}
+
 // src/web/glass.ts
 async function attachControlGlass(el, params, stillWanted) {
   const { attachGlass, probeBackdrop } = await import('vireglass/dom');
@@ -482,19 +669,6 @@ async function attachControlGlass(el, params, stillWanted) {
   };
 }
 
-// src/web/input.ts
-var COARSE = "(pointer: coarse)";
-function isCoarsePointer() {
-  return typeof matchMedia !== "undefined" && matchMedia(COARSE).matches;
-}
-function watchCoarsePointer(onChange) {
-  if (typeof matchMedia === "undefined") return () => {
-  };
-  const list = matchMedia(COARSE);
-  list.addEventListener("change", onChange);
-  return () => list.removeEventListener("change", onChange);
-}
-
 // src/web/styles.ts
 var HOST = ":is(vire-button,vire-icon-button)[data-vk]";
 var BODY = `${HOST}>button`;
@@ -620,13 +794,14 @@ var FORCED = {
 };
 var MATERIAL_STEPS = 10;
 var SUPPRESS_MS = 100;
+var HOVER2 = { hover: true };
+var NO_HOVER = { hover: false };
 function createControlElementClass(kind, options = {}) {
   const response = pressResponse(kind);
   return class VireControl extends HTMLElement {
     static observedAttributes = ["glass", "size", "disabled", FORCE_ATTRIBUTE];
     #control = null;
     #state = CONTROL_IDLE;
-    #caps = POINTER_INPUT;
     #visual = createControlVisual();
     #own = {};
     #mode = null;
@@ -681,7 +856,7 @@ function createControlElementClass(kind, options = {}) {
       }
       this.#hadStyle.host = this.hasAttribute("style");
       ensureStyles(this, options.nonce);
-      this.#cleanups.push(watchCoarsePointer(() => this.#onInputChange()));
+      this.#cleanups.push(watchPointerInput(() => this.#onInputChange()));
       this.#cleanups.push(watchSystemA11y(() => this.#refreshMode()));
       this.#cleanups.push(watchA11yOverride(() => this.#refreshMode()));
       this.#awaitControl();
@@ -736,7 +911,6 @@ function createControlElementClass(kind, options = {}) {
       this.#control = control;
       this.#hadStyle.control = control.hasAttribute("style");
       this.setAttribute("data-vk", "");
-      this.#caps = isCoarsePointer() ? TOUCH_INPUT : POINTER_INPUT;
       this.#listen(control);
       this.#cleanups.push(this.#observeSize(control));
       this.#syncDisabled();
@@ -748,13 +922,13 @@ function createControlElementClass(kind, options = {}) {
     }
     #onInputChange() {
       if (!this.#control) return;
-      this.#caps = isCoarsePointer() ? TOUCH_INPUT : POINTER_INPUT;
+      if (this.#state.hovered && !effectiveInput().hover) this.#dispatch({ type: "enter" }, NO_HOVER);
       this.#refreshMode(true);
     }
     #size() {
       const wanted = this.getAttribute("size");
       if (wanted && CONTROL_SIZES.includes(wanted)) return wanted;
-      return defaultSize({ touch: isCoarsePointer() });
+      return sizeTier(effectiveInput());
     }
     #glassMode() {
       const wanted = this.getAttribute("glass");
@@ -765,9 +939,9 @@ function createControlElementClass(kind, options = {}) {
       const wanted = this.getAttribute(FORCE_ATTRIBUTE);
       return wanted !== null && Object.hasOwn(FORCED, wanted) ? wanted : null;
     }
-    #dispatch(event) {
+    #dispatch(event, caps = HOVER2) {
       if (this.#forced()) return false;
-      const step = stepControl(this.#state, event, this.#caps);
+      const step = stepControl(this.#state, event, caps);
       this.#state = step.state;
       this.#render();
       return step.activated;
@@ -811,7 +985,7 @@ function createControlElementClass(kind, options = {}) {
           if (mine(e)) this.#dispatch({ type: "cancel" });
         });
         on(target, "pointerenter", (e) => {
-          if (mine(e) && e.pointerType !== "touch") this.#dispatch({ type: "enter" });
+          if (mine(e)) this.#dispatch({ type: "enter" }, hoversWith(e.pointerType) ? HOVER2 : NO_HOVER);
         });
         on(target, "pointerleave", (e) => {
           if (mine(e) && !control.hasPointerCapture?.(e.pointerId)) this.#dispatch({ type: "leave" });
@@ -873,7 +1047,7 @@ function createControlElementClass(kind, options = {}) {
     #applySlop() {
       const control = this.#control;
       if (!control) return;
-      const floor = minTarget({ touch: isCoarsePointer() });
+      const floor = hitTarget(effectiveInput());
       this.#slop = { x: hitSlop(control.offsetWidth, floor), y: hitSlop(control.offsetHeight, floor) };
       this.style.setProperty("--vk-slop-x", String(this.#slop.x));
       this.style.setProperty("--vk-slop-y", String(this.#slop.y));
@@ -885,7 +1059,7 @@ function createControlElementClass(kind, options = {}) {
       const disabled = control.disabled;
       if (this.#forced()) return;
       if (disabled !== this.#state.disabled) {
-        this.#state = stepControl(this.#state, { type: "disable", disabled }, this.#caps).state;
+        this.#state = stepControl(this.#state, { type: "disable", disabled }, HOVER2).state;
         this.#render();
       }
     }
@@ -1081,40 +1255,46 @@ var MENU_CORNERS = {
   "bottom-left": { x: -1, y: 1 },
   "bottom-right": { x: 1, y: 1 }
 };
-function menuCorner(trigger, viewport) {
+function menuCorner(trigger, region) {
+  const x0 = region.x ?? 0;
+  const y0 = region.y ?? 0;
   return {
-    x: trigger.x + trigger.width / 2 <= viewport.width / 2 ? -1 : 1,
-    y: trigger.y + trigger.height / 2 <= viewport.height / 2 ? -1 : 1
+    x: trigger.x + trigger.width / 2 <= x0 + region.width / 2 ? -1 : 1,
+    y: trigger.y + trigger.height / 2 <= y0 + region.height / 2 ? -1 : 1
   };
 }
 function along(start, length, size, side) {
   return side < 0 ? start : start + length - size;
 }
-function fits(at, size, limit, margin) {
-  return at >= margin && at + size <= limit - margin;
+function fits(at, size, lo, hi, margin) {
+  return at >= lo + margin && at + size <= hi - margin;
 }
 var clamp = (v, lo, hi) => Math.min(Math.max(v, lo), Math.max(lo, hi));
-function menuPlacement(trigger, menu, viewport, options = {}) {
+function menuPlacement(trigger, menu, region, options = {}) {
   const margin = options.margin ?? 8;
-  const width = Math.min(menu.width, viewport.width - 2 * margin);
-  const height = Math.min(menu.height, viewport.height - 2 * margin);
-  const corner = { ...options.corner ?? menuCorner(trigger, viewport) };
+  const x0 = region.x ?? 0;
+  const y0 = region.y ?? 0;
+  const x1 = x0 + region.width;
+  const y1 = y0 + region.height;
+  const width = Math.max(0, Math.min(menu.width, region.width - 2 * margin));
+  const height = Math.max(0, Math.min(menu.height, region.height - 2 * margin));
+  const corner = { ...options.corner ?? menuCorner(trigger, region) };
   let x = along(trigger.x, trigger.width, width, corner.x);
   let y = along(trigger.y, trigger.height, height, corner.y);
   if (!options.corner) {
     const fx = along(trigger.x, trigger.width, width, corner.x === -1 ? 1 : -1);
-    if (!fits(x, width, viewport.width, margin) && fits(fx, width, viewport.width, margin)) {
+    if (!fits(x, width, x0, x1, margin) && fits(fx, width, x0, x1, margin)) {
       corner.x = corner.x === -1 ? 1 : -1;
       x = fx;
     }
     const fy = along(trigger.y, trigger.height, height, corner.y === -1 ? 1 : -1);
-    if (!fits(y, height, viewport.height, margin) && fits(fy, height, viewport.height, margin)) {
+    if (!fits(y, height, y0, y1, margin) && fits(fy, height, y0, y1, margin)) {
       corner.y = corner.y === -1 ? 1 : -1;
       y = fy;
     }
   }
-  x = clamp(x, margin, viewport.width - margin - width);
-  y = clamp(y, margin, viewport.height - margin - height);
+  x = clamp(x, x0 + margin, x1 - margin - width);
+  y = clamp(y, y0 + margin, y1 - margin - height);
   const rect = { x, y, width, height };
   return {
     rect,
@@ -1128,7 +1308,7 @@ function menuActivity(phase) {
   const grow = Math.min(Math.max(phase.grow, 0), 1);
   return shrink * (1 - grow);
 }
-function menuSurfaceFrame(trigger, menu, anchor, phase) {
+function menuSurfaceFrame(trigger, menu, anchor, phase, bounds) {
   const frame = growthFrame(
     { geometry: { width: trigger.width, height: trigger.height, cornerRadius: trigger.radius }, center: center(trigger) },
     { geometry: { width: menu.width, height: menu.height, cornerRadius: menu.radius }, center: center(menu) },
@@ -1136,16 +1316,24 @@ function menuSurfaceFrame(trigger, menu, anchor, phase) {
     phase
   );
   const { geometry, center: c } = frame.body;
-  const box = {
+  let box = {
     x: c.x - geometry.width / 2,
     y: c.y - geometry.height / 2,
     width: geometry.width,
     height: geometry.height,
     radius: geometry.cornerRadius
   };
+  let morph = frame.merge;
+  const held = bounds ? intersectRect(box, bounds) : null;
+  if (held && (held.width < box.width || held.height < box.height)) {
+    const was = center(box);
+    const now = center(held);
+    box = { ...held, radius: Math.min(box.radius, held.width / 2, held.height / 2) };
+    if (morph) morph = { ...morph, offsetX: morph.offsetX + was.x - now.x, offsetY: morph.offsetY + was.y - now.y };
+  }
   return {
     box,
-    morph: frame.merge,
+    morph,
     content: { x: menu.x - box.x, y: menu.y - box.y },
     ink: frame.ink,
     activity: menuActivity(phase)
@@ -1212,6 +1400,7 @@ function createMenuElementClass(options = {}) {
     #from = null;
     #to = null;
     #anchor = null;
+    #region = null;
     #natural = null;
     #out = false;
     #viaPointer = false;
@@ -1262,7 +1451,7 @@ function createMenuElementClass(options = {}) {
       }
       this.#hadStyle.host = this.hasAttribute("style");
       ensureStyles(this, options.nonce);
-      this.#cleanups.push(watchCoarsePointer(() => this.#list && this.#refreshMode(true)));
+      this.#cleanups.push(watchPointerInput(() => this.#list && this.#refreshMode(true)));
       this.#cleanups.push(watchSystemA11y(() => this.#list && this.#refreshMode()));
       this.#cleanups.push(watchA11yOverride(() => this.#list && this.#refreshMode()));
       this.#awaitParts();
@@ -1293,7 +1482,7 @@ function createMenuElementClass(options = {}) {
       this.#state = MENU_CLOSED;
       this.#growth = createGrowthState();
       this.#out = false;
-      this.#from = this.#to = this.#anchor = null;
+      this.#from = this.#to = this.#anchor = this.#region = null;
       this.#natural = null;
       this.#held = null;
       this.#readySince = null;
@@ -1532,7 +1721,7 @@ function createMenuElementClass(options = {}) {
         );
         on(root, "scroll", (e) => this.#follow(e), true);
       });
-      on(window, "resize", (e) => this.#follow(e));
+      this.#cleanups.push(watchViewport(() => this.#follow()));
       if (typeof ResizeObserver !== "undefined") {
         const resized = new ResizeObserver(() => this.#out && this.#follow());
         resized.observe(this.#carrier ?? trigger);
@@ -1625,9 +1814,11 @@ function createMenuElementClass(options = {}) {
       const spec = menuSize(this.#size());
       this.#natural ??= this.#measure();
       const natural = this.#natural;
-      const viewport = { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight };
       const trigger = this.#triggerBox();
-      const placement = menuPlacement(trigger, natural, viewport, { corner: this.#corner(), margin: VIEWPORT_MARGIN });
+      const { viewport, segments } = viewportSegments();
+      const region = segmentOf(trigger, segments) ?? viewport;
+      this.#region = region;
+      const placement = menuPlacement(trigger, natural, region, { corner: this.#corner(), margin: VIEWPORT_MARGIN });
       this.#from = trigger;
       this.#to = { ...placement.rect, radius: spec.radius };
       this.#anchor = placement.anchor;
@@ -1693,7 +1884,7 @@ function createMenuElementClass(options = {}) {
       this.removeAttribute("data-phase");
       this.#out = false;
       this.#held = null;
-      this.#from = this.#to = this.#anchor = null;
+      this.#from = this.#to = this.#anchor = this.#region = null;
       this.#glass?.setSample(this.#sample);
       this.#carrier?.setCarried?.(null);
     }
@@ -1701,7 +1892,7 @@ function createMenuElementClass(options = {}) {
       const list = this.#list;
       if (!list || !this.#out || !this.#from || !this.#to || !this.#anchor) return;
       const phase = growthPhase(this.#growth);
-      const f = menuSurfaceFrame(this.#from, this.#to, this.#anchor, phase);
+      const f = menuSurfaceFrame(this.#from, this.#to, this.#anchor, phase, this.#region ?? void 0);
       const settled = phase.shrink === 1 && phase.grow === 1;
       const inkIn = Math.round(f.ink.incoming * 1e3) / 1e3;
       if (this.#state.open && inkIn >= 1) {
@@ -1781,7 +1972,7 @@ function createMenuElementClass(options = {}) {
     #size() {
       const wanted = this.getAttribute("size");
       if (wanted && CONTROL_SIZES.includes(wanted)) return wanted;
-      return defaultSize({ touch: isCoarsePointer() });
+      return sizeTier(effectiveInput());
     }
     #wantsGlass() {
       const wanted = this.getAttribute("glass");
@@ -1885,8 +2076,15 @@ exports.ICON_BUTTON_TAG = ICON_BUTTON_TAG;
 exports.MENU_TAG = MENU_TAG;
 exports.STYLES = STYLES;
 exports.defineVireElements = defineVireElements;
+exports.effectiveInput = effectiveInput;
 exports.getA11yOverride = getA11yOverride;
+exports.getInputOverride = getInputOverride;
 exports.setA11yOverride = setA11yOverride;
+exports.setInputOverride = setInputOverride;
+exports.setViewportOverride = setViewportOverride;
 exports.systemA11y = systemA11y;
+exports.systemInput = systemInput;
+exports.viewportSegments = viewportSegments;
+exports.watchAdaptiveContext = watchAdaptiveContext;
 //# sourceMappingURL=web.cjs.map
 //# sourceMappingURL=web.cjs.map