vireuikit 0.5.0 → 0.7.0

package/dist/web.cjs

@@ -0,0 +1,1892 @@
+'use strict';
+
+var vireglass = require('vireglass');
+
+// src/web/element.ts
+
+// src/kit/a11y.ts
+var A11Y_NONE = {
+  reduceTransparency: false,
+  increaseContrast: false,
+  reduceMotion: false
+};
+function resolveA11y(system, override = {}) {
+  return {
+    reduceTransparency: override.reduceTransparency ?? system.reduceTransparency,
+    increaseContrast: override.increaseContrast ?? system.increaseContrast,
+    reduceMotion: override.reduceMotion ?? system.reduceMotion
+  };
+}
+function presentationFor(mode, wantsGlass) {
+  return {
+    glass: wantsGlass,
+    frost: wantsGlass && mode.reduceTransparency,
+    surface: wantsGlass ? "glass" : "plain",
+    contrastBorder: mode.increaseContrast,
+    instantSprings: mode.reduceMotion
+  };
+}
+function sameA11y(a, b) {
+  return a.reduceTransparency === b.reduceTransparency && a.increaseContrast === b.increaseContrast && a.reduceMotion === b.reduceMotion;
+}
+var ATOM_AT_REST = {
+  pressed: 0,
+  hovered: 0,
+  selected: 0,
+  disabled: false
+};
+function atomLift(kind) {
+  switch (kind) {
+    case "iconButton":
+    case "switch":
+    case "slider":
+      return 1;
+    default:
+      return 0;
+  }
+}
+var DISABLED_PRESENCE = 0.25;
+var HOVER_GAIN = 0.35;
+function activation(state) {
+  if (state.disabled) return 0;
+  const clamp2 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+  return Math.max(clamp2(state.selected), clamp2(state.pressed), clamp2(state.hovered) * HOVER_GAIN);
+}
+function atomMaterial(base, kind, state = ATOM_AT_REST) {
+  const out = vireglass.activeMaterial(base, activation(state));
+  if (!state.disabled) return out;
+  return { ...out, presence: out.presence * DISABLED_PRESENCE };
+}
+var REST_BODY = { alpha: 0.25, white: 0.15, lift: 0.1 };
+var PRESSED_BODY = { alpha: 0.34, white: 0.35, lift: 0 };
+var FROST_LIFT = 0.26;
+function atomBody(base, state = ATOM_AT_REST, frost = false) {
+  const on = activation(state);
+  const mix2 = (key) => REST_BODY[key] + (PRESSED_BODY[key] - REST_BODY[key]) * on;
+  let alpha = mix2("alpha");
+  let white = mix2("white");
+  let lift = mix2("lift");
+  if (state.disabled) alpha *= DISABLED_PRESENCE;
+  if (frost) {
+    const density = vireglass.applyAccessibility(vireglass.resolveOptics(base), {
+      reduceTransparency: true,
+      increaseContrast: false,
+      reduceMotion: false
+    }).bodyDensity;
+    alpha = Math.max(alpha, density);
+    white = 0;
+    lift = FROST_LIFT;
+  }
+  return { alpha, white, lift };
+}
+
+// src/kit/behavior/focus.ts
+function stepFocus(event) {
+  return event.type === "focus" && event.visible;
+}
+
+// src/kit/behavior/hover.ts
+function stepHover(event, canHover) {
+  return canHover && event.type === "enter";
+}
+
+// src/kit/behavior/press.ts
+var PRESS_IDLE = { by: null };
+function stepPress(state, event, enabled2) {
+  switch (event.type) {
+    case "down":
+      if (!enabled2 || state.by !== null) return { state, activated: false };
+      return { state: { by: event.source }, activated: false };
+    case "up":
+      if (state.by !== event.source) return { state, activated: false };
+      return { state: PRESS_IDLE, activated: enabled2 };
+    case "cancel":
+      return { state: PRESS_IDLE, activated: false };
+    case "leave":
+      return state.by === "pointer" ? { state: PRESS_IDLE, activated: false } : { state, activated: false };
+  }
+}
+
+// src/kit/behavior/control.ts
+var TOUCH_INPUT = { hover: false };
+var POINTER_INPUT = { hover: true };
+var CONTROL_IDLE = {
+  press: PRESS_IDLE,
+  hovered: false,
+  focused: false,
+  disabled: false
+};
+function stepControl(state, event, caps) {
+  switch (event.type) {
+    case "down":
+    case "up":
+    case "cancel": {
+      const next = stepPress(state.press, event, !state.disabled);
+      return { state: { ...state, press: next.state }, activated: next.activated };
+    }
+    case "leave": {
+      const next = stepPress(state.press, event, !state.disabled);
+      return { state: { ...state, press: next.state, hovered: false }, activated: false };
+    }
+    case "enter":
+      return {
+        state: { ...state, hovered: !state.disabled && stepHover(event, caps.hover) },
+        activated: false
+      };
+    case "focus":
+    case "blur": {
+      const press = event.type === "blur" && state.press.by === "keyboard" ? PRESS_IDLE : state.press;
+      return {
+        state: { ...state, press, focused: !state.disabled && stepFocus(event) },
+        activated: false
+      };
+    }
+    case "disable":
+      return {
+        state: event.disabled ? { press: PRESS_IDLE, hovered: false, focused: false, disabled: true } : { ...state, disabled: false },
+        activated: false
+      };
+  }
+}
+function controlTargets(state) {
+  return {
+    pressed: state.press.by !== null ? 1 : 0,
+    hovered: state.hovered ? 1 : 0,
+    focus: state.focused ? 1 : 0,
+    disabled: state.disabled
+  };
+}
+function stepSpring(s, dt, response, damping, instant = false) {
+  if (instant) {
+    const moved = s.x !== s.target || s.v !== 0;
+    s.x = s.target;
+    s.v = 0;
+    return moved;
+  }
+  const stiffness = (2 * Math.PI / response) ** 2;
+  const friction = 4 * Math.PI * damping / response;
+  const h = 1 / 240;
+  for (let left = Math.min(dt, 0.05); left > 0; left -= h) {
+    const step = Math.min(left, h);
+    s.v += (stiffness * (s.target - s.x) - friction * s.v) * step;
+    s.x += s.v * step;
+  }
+  if (Math.abs(s.target - s.x) < 1e-3 && Math.abs(s.v) < 0.01) {
+    s.x = s.target;
+    s.v = 0;
+    return false;
+  }
+  return true;
+}
+var smoothstep = (e0, e1, x) => {
+  const t = Math.min(Math.max((x - e0) / (e1 - e0), 0), 1);
+  return t * t * (3 - 2 * t);
+};
+var mix = (a, b, t) => a + (b - a) * t;
+var DROP_DIAMETER = 1.1;
+var DROP_LIFT = 0.5;
+var NECK_GAIN = 0.3;
+var NECK_RAMP = 4;
+var CORNER_EASE_START = 0.55;
+var INK_OUT_END = 0.4;
+var INK_IN_START = 0.9;
+var INK_IN_END = 1;
+function growthInk(phase) {
+  const a = Math.min(Math.max(phase.shrink, 0), 1);
+  const b = Math.max(phase.grow, 0);
+  return {
+    outgoing: 1 - smoothstep(0, INK_OUT_END, a),
+    incoming: smoothstep(INK_IN_START, INK_IN_END, b)
+  };
+}
+function largerOf(a, b) {
+  return vireglass.halfMinDp(a.geometry) >= vireglass.halfMinDp(b.geometry) ? { main: a, other: b } : { main: b, other: a };
+}
+function growthFrame(source, target, anchor, phase) {
+  const dx = target.center.x - source.center.x;
+  const dy = target.center.y - source.center.y;
+  const len = Math.hypot(dx, dy) || 1;
+  const sourceSize = vireglass.halfMinDp(source.geometry) * 2;
+  const lift = DROP_LIFT * sourceSize;
+  const drop = {
+    x: source.center.x + dx / len * lift,
+    y: source.center.y + dy / len * lift
+  };
+  const a = Math.min(Math.max(phase.shrink, 0), 1);
+  const b = Math.max(phase.grow, 0);
+  const keep = Math.max(1 - b, 0);
+  const d = DROP_DIAMETER * sourceSize;
+  const shrunkGeometry = {
+    width: mix(source.geometry.width, 0.6 * d, a) * keep,
+    height: mix(source.geometry.height, 0.6 * d, a) * keep,
+    cornerRadius: 0
+  };
+  shrunkGeometry.cornerRadius = Math.min(
+    mix(source.geometry.cornerRadius, vireglass.halfMinDp(shrunkGeometry), a),
+    vireglass.halfMinDp(shrunkGeometry)
+  );
+  const shrunk = {
+    geometry: shrunkGeometry,
+    center: { x: mix(source.center.x, drop.x, a), y: mix(source.center.y, drop.y, a) }
+  };
+  const seed = d * Math.sqrt(a);
+  const cornerX = Math.sign(anchor.x - source.center.x);
+  const cornerY = Math.sign(anchor.y - source.center.y);
+  const edgeX = mix(drop.x + cornerX * (seed / 2), anchor.x, Math.min(b, 1));
+  const edgeY = mix(drop.y + cornerY * (seed / 2), anchor.y, Math.min(b, 1));
+  const width = mix(seed, target.geometry.width, b);
+  const height = mix(seed, target.geometry.height, b);
+  const grownGeometry = { width, height, cornerRadius: 0 };
+  grownGeometry.cornerRadius = Math.min(
+    mix(vireglass.halfMinDp(grownGeometry), target.geometry.cornerRadius, smoothstep(CORNER_EASE_START, 1, b)),
+    vireglass.halfMinDp(grownGeometry)
+  );
+  const grown = {
+    geometry: grownGeometry,
+    center: { x: edgeX - cornerX * (width / 2), y: edgeY - cornerY * (height / 2) }
+  };
+  const { main, other } = largerOf(grown, shrunk);
+  const neck = NECK_GAIN * sourceSize * Math.min(a * NECK_RAMP, 1) * keep;
+  const united = neck > 0.01 && other.geometry.width > 0.5 && other.geometry.height > 0.5;
+  return {
+    body: main,
+    grown,
+    merge: united ? {
+      offsetX: other.center.x - main.center.x,
+      offsetY: other.center.y - main.center.y,
+      width: other.geometry.width,
+      height: other.geometry.height,
+      cornerRadius: other.geometry.cornerRadius,
+      smoothing: neck
+    } : void 0,
+    ink: growthInk(phase)
+  };
+}
+var createGrowthState = () => ({
+  shrink: { x: 0, v: 0, target: 0 },
+  grow: { x: 0, v: 0, target: 0 }
+});
+var growthPhase = (state) => ({
+  shrink: state.shrink.x,
+  grow: state.grow.x
+});
+var DEFAULT_GROWTH_TIMING = {
+  shrinkOpen: 0.21,
+  shrinkClose: 0.14,
+  growOpen: 0.38,
+  growClose: 0.4,
+  growDampingOpen: 0.72
+};
+var GROW_DAMPING_CLOSE = 1;
+var SHRINK_DAMPING = 1;
+var GROW_STARTS_AT = 0.8;
+var SHRINK_RETURNS_AT = 0.12;
+function stepGrowth(state, dt, open, reduceMotion = false, timing = DEFAULT_GROWTH_TIMING) {
+  const { shrink, grow } = state;
+  if (reduceMotion) {
+    shrink.target = open ? 1 : 0;
+    grow.target = open ? 1 : 0;
+  } else if (open) {
+    shrink.target = 1;
+    if (shrink.x > GROW_STARTS_AT) grow.target = 1;
+  } else {
+    grow.target = 0;
+    if (grow.x < SHRINK_RETURNS_AT) shrink.target = 0;
+  }
+  const movedShrink = stepSpring(
+    shrink,
+    dt,
+    open ? timing.shrinkOpen : timing.shrinkClose,
+    SHRINK_DAMPING,
+    reduceMotion
+  );
+  const movedGrow = stepSpring(
+    grow,
+    dt,
+    open ? timing.growOpen : timing.growClose,
+    open ? timing.growDampingOpen : GROW_DAMPING_CLOSE,
+    reduceMotion
+  );
+  return movedShrink || movedGrow;
+}
+
+// src/kit/behavior/visual.ts
+var createControlVisual = () => ({
+  pressed: { x: 0, v: 0, target: 0 },
+  hovered: { x: 0, v: 0, target: 0 },
+  focus: { x: 0, v: 0, target: 0 }
+});
+var PRESS = { response: 0.18, damping: 0.78 };
+var HOVER = { response: 0.22, damping: 1 };
+var FOCUS = { response: 0.16, damping: 1 };
+function stepControlVisual(visual, dt, state, instant = false) {
+  const t = controlTargets(state);
+  visual.pressed.target = t.pressed;
+  visual.hovered.target = t.hovered;
+  visual.focus.target = t.focus;
+  const a = stepSpring(visual.pressed, dt, PRESS.response, PRESS.damping, instant);
+  const b = stepSpring(visual.hovered, dt, HOVER.response, HOVER.damping, instant);
+  const c = stepSpring(visual.focus, dt, FOCUS.response, FOCUS.damping, instant);
+  return a || b || c;
+}
+function visualAtomState(visual, state) {
+  return {
+    pressed: visual.pressed.x,
+    hovered: visual.hovered.x,
+    selected: 0,
+    disabled: state.disabled
+  };
+}
+function settleControlVisual(visual, state) {
+  stepControlVisual(visual, 0, state, true);
+}
+
+// src/kit/response.ts
+var LIFTING = { grow: 0.18, defocus: 1.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 = {
+  reduceMotion: "(prefers-reduced-motion: reduce)",
+  increaseContrast: "(prefers-contrast: more)",
+  reduceTransparency: "(prefers-reduced-transparency: reduce)"
+};
+var KEYS = Object.keys(QUERIES);
+function systemA11y() {
+  if (typeof matchMedia === "undefined") return A11Y_NONE;
+  return {
+    reduceMotion: matchMedia(QUERIES.reduceMotion).matches,
+    increaseContrast: matchMedia(QUERIES.increaseContrast).matches,
+    reduceTransparency: matchMedia(QUERIES.reduceTransparency).matches
+  };
+}
+function watchSystemA11y(onChange) {
+  if (typeof matchMedia === "undefined") return () => {
+  };
+  const lists = KEYS.map((key) => matchMedia(QUERIES[key]));
+  for (const list of lists) list.addEventListener("change", onChange);
+  return () => {
+    for (const list of lists) list.removeEventListener("change", onChange);
+  };
+}
+var globalOverride = {};
+var listeners = /* @__PURE__ */ new Set();
+function setA11yOverride(next) {
+  globalOverride = { ...globalOverride, ...next };
+  for (const listener of listeners) listener();
+}
+function getA11yOverride() {
+  return globalOverride;
+}
+function watchA11yOverride(onChange) {
+  listeners.add(onChange);
+  return () => {
+    listeners.delete(onChange);
+  };
+}
+function effectiveA11y(own) {
+  const merged = { ...globalOverride };
+  for (const key of KEYS) if (own[key] !== void 0) merged[key] = own[key];
+  return resolveA11y(systemA11y(), merged);
+}
+
+// src/web/glass.ts
+async function attachControlGlass(el, params, stillWanted) {
+  const { attachGlass, probeBackdrop } = await import('vireglass/dom');
+  if (!stillWanted()) return null;
+  const opts = {
+    material: params.material,
+    geometry: params.geometry,
+    accessibility: params.accessibility,
+    variant: params.onTouch ? "interactive" : "present",
+    // The kit paints its own body: the core's is not lighter than its surround over a light backdrop and
+    // near black under reduced transparency with light ink (docs/acceptance.md, "Resting body").
+    body: false
+  };
+  if (params.interactive === false) opts.interactive = false;
+  if (params.sample) opts.sample = params.sample;
+  const handle = attachGlass(el, opts);
+  return {
+    setMaterial(material) {
+      opts.material = material;
+      handle.update();
+    },
+    setGeometry(geometry) {
+      opts.geometry = geometry;
+      handle.update();
+    },
+    frame(next) {
+      if (next.material) opts.material = next.material;
+      if (next.geometry) opts.geometry = next.geometry;
+      if (next.morph !== void 0) handle.setMorph(next.morph);
+      else handle.update();
+    },
+    setAppear: (t) => handle.setAppear(t),
+    setMorph: (morph) => handle.setMorph(morph),
+    setSample: (sample) => handle.setSample(sample),
+    probe: () => probeBackdrop(el),
+    destroy: () => handle.destroy()
+  };
+}
+
+// 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`;
+var MENU = "vire-menu[data-vk]";
+var SURFACE = `${MENU}>[popover]`;
+var ITEM = `${SURFACE}>button`;
+var GLASS_BODY = `background:color-mix(in srgb,color-mix(in srgb,#fff calc((var(--vk-body-white) + var(--vk-body-lift)*2)*100%),var(--vireglass-tint-color,#fff)) calc(var(--vk-body-alpha)*100%),transparent);
+ background:oklab(from color-mix(in srgb,#fff calc(var(--vk-body-white)*100%),var(--vireglass-tint-color,#fff)) calc(l + var(--vk-body-lift)) a b / var(--vk-body-alpha))`;
+var FROST_INK = "color:oklab(from var(--vireglass-tint-color,#fff) calc(.95 - .87*clamp(0,(l + var(--vk-body-lift) - .6)*20,1)) 0 0)";
+var CONTRAST_GLASS = "background:color-mix(in srgb,color-mix(in srgb,#fff calc((1 - var(--vireglass-ink,0))*100%),#000) 88%,transparent)";
+var SHADOW = "box-shadow:0 0 0 1px color-mix(in srgb,currentColor 14%,transparent),0 10px 30px color-mix(in srgb,currentColor 18%,transparent)";
+var STYLES = `
+vire-button,vire-icon-button,vire-menu{display:inline-flex;vertical-align:middle}
+${HOST}{position:relative;--vk-press:0;--vk-hover:0;--vk-carry:1;--vk-body-alpha:0;--vk-body-white:0;--vk-body-lift:0;--vk-grow:0;--vk-defocus:0;--vk-slop-x:0;--vk-slop-y:0}
+${HOST}::before{content:'';position:absolute;inset:calc(var(--vk-slop-y)*-1px) calc(var(--vk-slop-x)*-1px)}
+${BODY}{appearance:none;-webkit-appearance:none;box-sizing:border-box;margin:0;border:0;outline:none;
+ font:inherit;font-weight:500;line-height:1;white-space:nowrap;color:inherit;
+ display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;
+ height:var(--vk-height);min-width:var(--vk-height);padding:0 var(--vk-pad-x);border-radius:var(--vk-radius);
+ -webkit-text-fill-color:color-mix(in srgb,currentColor calc((1 - var(--vk-press)*.55)*var(--vk-carry)*100%),transparent);
+ text-shadow:0 0 calc((var(--vk-press)*var(--vk-defocus) + (1 - var(--vk-carry))*4)*1px) color-mix(in srgb,currentColor calc(var(--vk-carry)*100%),transparent);
+ background:transparent;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent;
+ transform:scale(calc(1 + var(--vk-press)*var(--vk-grow)))}
+vire-icon-button[data-vk]>button{padding:0;width:var(--vk-height)}
+${BODY}>svg{width:var(--vk-icon);height:var(--vk-icon);flex:none;
+ opacity:calc((1 - var(--vk-press)*.45)*var(--vk-carry));filter:blur(calc((var(--vk-press)*var(--vk-defocus) + (1 - var(--vk-carry))*4)*1px))}
+${BODY}:disabled{cursor:default}
+${HOST}[data-disabled]>button{-webkit-text-fill-color:color-mix(in srgb,currentColor 40%,transparent)}
+${HOST}[data-disabled]>button>svg{opacity:.4}
+${HOST}[data-focus]>button{outline:2px solid currentColor;outline-offset:2px}
+
+${HOST}[data-surface=glass]>button{color:var(--vireglass-ink-color,inherit);
+ ${GLASS_BODY}}
+${HOST}[data-frost][data-surface=glass]>button{${FROST_INK}}
+
+${HOST}[data-surface=plain]>button{background:color-mix(in srgb,currentColor calc(10% + var(--vk-hover)*6% + var(--vk-press)*14%),transparent)}
+
+${HOST}[data-surface=frosted]>button{
+ background:color-mix(in srgb,Canvas calc(88% - var(--vk-hover)*4% - var(--vk-press)*10%),currentColor);
+ backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
+ box-shadow:0 1px 3px color-mix(in srgb,currentColor 22%,transparent)}
+
+${MENU}{position:relative;--vk-ink-in:1;--vk-cx:0px;--vk-cy:0px}
+${SURFACE}{position:fixed;inset:auto;left:var(--vk-x,0);top:var(--vk-y,0);width:var(--vk-w,auto);height:var(--vk-h,auto);
+ margin:0;padding:var(--vk-menu-pad);border:0;border-radius:var(--vk-r,var(--vk-menu-radius));box-sizing:border-box;
+ overflow:clip;color:inherit;font:inherit;background:transparent;outline:none;
+ --vk-body-alpha:0;--vk-body-white:0;--vk-body-lift:0}
+${SURFACE}:popover-open{display:flex;flex-direction:column;align-items:flex-start}
+${MENU}[data-phase=open]>[popover][data-scroll]{overflow-y:auto}
+${ITEM}{appearance:none;-webkit-appearance:none;box-sizing:border-box;margin:0;border:0;outline:none;flex:none;position:relative;
+ font:inherit;line-height:1.2;color:inherit;text-align:start;white-space:nowrap;
+ display:flex;align-items:center;width:var(--vk-content-w,auto);height:var(--vk-menu-row);
+ padding-block:0;padding-inline:var(--vk-label-pad) var(--vk-menu-row);border-radius:var(--vk-item-radius);
+ background:color-mix(in srgb,currentColor calc(var(--vk-fill,0)*100%),transparent);
+ cursor:pointer;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
+${SURFACE}:has(>button>svg)>button{padding-inline-start:var(--vk-menu-row)}
+${ITEM}>svg{position:absolute;inset-inline-start:calc((var(--vk-menu-row) - var(--vk-menu-icon))/2);top:calc((var(--vk-menu-row) - var(--vk-menu-icon))/2);
+ width:var(--vk-menu-icon);height:var(--vk-menu-icon)}
+${ITEM}:is(:focus,[data-vire-force-state=hover]){--vk-fill:var(--vk-fill-active)}
+${ITEM}:is([data-pressed],[data-vire-force-state=pressed]){--vk-fill:var(--vk-fill-pressed)}
+${ITEM}:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
+${ITEM}:is(:disabled,[aria-disabled=true]){cursor:default;--vk-fill:0;-webkit-text-fill-color:color-mix(in srgb,currentColor 40%,transparent)}
+${ITEM}:is(:disabled,[aria-disabled=true])>svg{opacity:.4}
+${MENU}[data-phase=moving]>[popover]{padding:0}
+${MENU}[data-phase=moving]>[popover]>*{transform:translate(calc(var(--vk-cx) + var(--vk-menu-pad)),calc(var(--vk-cy) + var(--vk-menu-pad)));
+ opacity:min(1,calc(var(--vk-ink-in)*2));filter:blur(calc((1 - var(--vk-ink-in))*8px))}
+${MENU}[data-measure]>[popover]{width:max-content!important;height:auto!important;left:0!important;top:0!important;padding:var(--vk-menu-pad)!important;visibility:hidden}
+${MENU}[data-measure]>[popover]>*{width:auto!important;transform:none!important}
+
+${MENU}[data-surface=glass]>[popover]{color:var(--vireglass-ink-color,inherit);
+ ${GLASS_BODY}}
+${MENU}[data-frost][data-surface=glass]>[popover]{${FROST_INK}}
+${MENU}[data-surface=plain]>[popover]{background:Canvas;${SHADOW}}
+${MENU}[data-surface=frosted]>[popover]{background:color-mix(in srgb,Canvas 88%,currentColor);
+ backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);${SHADOW}}
+
+@supports not (color:oklab(from red l a b)){
+${HOST}[data-frost][data-surface=glass]>button,${MENU}[data-frost][data-surface=glass]>[popover]{color:inherit;background:color-mix(in srgb,Canvas 82%,currentColor)}
+}
+
+${HOST}[data-contrast]:is([data-surface=plain],[data-surface=frosted])>button{box-shadow:inset 0 0 0 2px currentColor}
+${HOST}[data-contrast][data-surface=frosted]>button{background:Canvas}
+${HOST}[data-contrast][data-surface=glass]>button{${CONTRAST_GLASS}}
+${MENU}[data-contrast]:is([data-surface=plain],[data-surface=frosted])>[popover]{background:Canvas;box-shadow:inset 0 0 0 2px currentColor}
+${MENU}[data-contrast][data-surface=glass]>[popover]{${CONTRAST_GLASS}}
+
+${HOST}[data-carried]>button{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;pointer-events:none}
+${HOST}[data-carried]>button::after{visibility:hidden}
+
+@media (forced-colors:active){
+${BODY}{-webkit-text-fill-color:currentColor;text-shadow:none;color:ButtonText;background:ButtonFace;border:1px solid ButtonText;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none}
+${BODY}>svg{opacity:1;filter:none}
+${HOST}[data-disabled]>button{-webkit-text-fill-color:currentColor;color:GrayText;border-color:GrayText}
+${HOST}[data-focus]>button{outline-color:Highlight}
+${SURFACE}{color:CanvasText!important;background:Canvas!important;border:1px solid CanvasText;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
+${SURFACE}>*{filter:none!important;opacity:1!important}
+${ITEM}{-webkit-text-fill-color:currentColor!important;color:CanvasText;background:Canvas}
+${ITEM}:is(:focus,[data-vire-force-state=hover],[data-pressed]){color:HighlightText;background:Highlight}
+${ITEM}:is(:disabled,[aria-disabled=true]){color:GrayText;background:Canvas}
+${HOST}[data-carried]>button{opacity:var(--vk-carry)}
+}
+`;
+var STYLE_ATTR = "data-vireuikit";
+function ensureStyles(from, nonce) {
+  const root = from.getRootNode();
+  const host = root instanceof ShadowRoot ? root : from.ownerDocument;
+  if (host.querySelector(`style[${STYLE_ATTR}]`)) return;
+  const style = from.ownerDocument.createElement("style");
+  style.setAttribute(STYLE_ATTR, "");
+  if (nonce) style.nonce = nonce;
+  style.textContent = STYLES;
+  (host instanceof ShadowRoot ? host : host.head).appendChild(style);
+}
+
+// src/web/element.ts
+var FORCE_ATTRIBUTE = "data-vire-force-state";
+var FORCED = {
+  rest: CONTROL_IDLE,
+  hover: { ...CONTROL_IDLE, hovered: true },
+  focus: { ...CONTROL_IDLE, focused: true },
+  pressed: { ...CONTROL_IDLE, press: { by: "pointer" } },
+  disabled: { ...CONTROL_IDLE, disabled: true }
+};
+var MATERIAL_STEPS = 10;
+var SUPPRESS_MS = 100;
+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;
+    #presentation = null;
+    #glass = null;
+    #glassToken = 0;
+    #glassKey = "";
+    #glassBroken = false;
+    #lastMaterialKey = "";
+    #frame = 0;
+    #lastFrame = 0;
+    #cleanups = [];
+    #suppressClick = false;
+    #suppressTimer = 0;
+    #slop = { x: 0, y: 0 };
+    #morph = null;
+    #sample = null;
+    #carried = null;
+    #hadStyle = { host: false, control: false };
+    get a11y() {
+      return this.#own;
+    }
+    set a11y(next) {
+      this.#own = { ...next };
+      if (this.#control) this.#refreshMode();
+    }
+    get sample() {
+      return this.#sample;
+    }
+    set sample(next) {
+      this.#sample = next;
+      this.#glass?.setSample(next);
+    }
+    setMorph(morph) {
+      this.#morph = morph;
+      this.#glass?.setMorph(morph);
+    }
+    setCarried(ink) {
+      const handedOver = this.#carried === null !== (ink === null);
+      this.#carried = ink === null ? null : Math.min(Math.max(ink, 0), 1);
+      this.toggleAttribute("data-carried", this.#carried !== null);
+      if (this.#carried === null) this.style.removeProperty("--vk-carry");
+      else this.style.setProperty("--vk-carry", this.#carried.toFixed(3));
+      if (handedOver) this.#glass?.setAppear(this.#carried === null && this.#glassMode() !== "touch" ? 1 : 0);
+    }
+    connectedCallback() {
+      for (const key of ["a11y", "sample"]) {
+        if (!Object.prototype.hasOwnProperty.call(this, key)) continue;
+        const value = Reflect.get(this, key);
+        Reflect.deleteProperty(this, key);
+        Reflect.set(this, key, value);
+      }
+      this.#hadStyle.host = this.hasAttribute("style");
+      ensureStyles(this, options.nonce);
+      this.#cleanups.push(watchCoarsePointer(() => this.#onInputChange()));
+      this.#cleanups.push(watchSystemA11y(() => this.#refreshMode()));
+      this.#cleanups.push(watchA11yOverride(() => this.#refreshMode()));
+      this.#awaitControl();
+    }
+    disconnectedCallback() {
+      for (const cleanup of this.#cleanups.splice(0)) cleanup();
+      cancelAnimationFrame(this.#frame);
+      clearTimeout(this.#suppressTimer);
+      this.#frame = 0;
+      this.#dropGlass();
+      if (this.#control && !this.#hadStyle.control && this.#control.getAttribute("style") === "") this.#control.removeAttribute("style");
+      this.#control = null;
+      this.#state = CONTROL_IDLE;
+      this.#suppressClick = false;
+      this.#carried = null;
+      for (const name of ["data-vk", "data-surface", "data-glass", "data-frost", "data-size", "data-carried"]) this.removeAttribute(name);
+      for (const name of Array.from(this.style)) if (name.startsWith("--vk-")) this.style.removeProperty(name);
+      if (!this.#hadStyle.host && this.getAttribute("style") === "") this.removeAttribute("style");
+      this.#presentation = null;
+      this.#mode = null;
+    }
+    attributeChangedCallback(name) {
+      if (!this.#control) return;
+      if (name === "disabled") {
+        const wanted = this.hasAttribute("disabled");
+        if (this.#control.disabled !== wanted) this.#control.disabled = wanted;
+        this.#syncDisabled();
+      } else if (name === FORCE_ATTRIBUTE) {
+        this.#applyForced();
+      } else {
+        this.#refreshMode(true);
+      }
+    }
+    // The parser connects the element before its children exist, so the button is waited for
+    // rather than made up.
+    #awaitControl() {
+      const found = this.querySelector(":scope > button");
+      if (found) {
+        this.#upgrade(found);
+        return;
+      }
+      const observer = new MutationObserver(() => {
+        const button = this.querySelector(":scope > button");
+        if (!button) return;
+        observer.disconnect();
+        this.#upgrade(button);
+      });
+      observer.observe(this, { childList: true });
+      this.#cleanups.push(() => observer.disconnect());
+    }
+    #upgrade(control) {
+      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();
+      if (control.matches(":focus")) {
+        this.#dispatch({ type: "focus", visible: control.matches(":focus-visible") });
+      }
+      this.#mode = null;
+      this.#refreshMode();
+    }
+    #onInputChange() {
+      if (!this.#control) return;
+      this.#caps = isCoarsePointer() ? TOUCH_INPUT : POINTER_INPUT;
+      this.#refreshMode(true);
+    }
+    #size() {
+      const wanted = this.getAttribute("size");
+      if (wanted && CONTROL_SIZES.includes(wanted)) return wanted;
+      return defaultSize({ touch: isCoarsePointer() });
+    }
+    #glassMode() {
+      const wanted = this.getAttribute("glass");
+      if (wanted === "touch") return "touch";
+      return wanted === "" || wanted === "present" ? "present" : "off";
+    }
+    #forced() {
+      const wanted = this.getAttribute(FORCE_ATTRIBUTE);
+      return wanted !== null && Object.hasOwn(FORCED, wanted) ? wanted : null;
+    }
+    #dispatch(event) {
+      if (this.#forced()) return false;
+      const step = stepControl(this.#state, event, this.#caps);
+      this.#state = step.state;
+      this.#render();
+      return step.activated;
+    }
+    #listen(control) {
+      const on = (target, type, handler, capture = false) => {
+        target.addEventListener(type, handler, capture);
+        this.#cleanups.push(() => target.removeEventListener(type, handler, capture));
+      };
+      const inside = (e) => {
+        const r = this.getBoundingClientRect();
+        return e.clientX >= r.left - this.#slop.x && e.clientX <= r.right + this.#slop.x && e.clientY >= r.top - this.#slop.y && e.clientY <= r.bottom + this.#slop.y;
+      };
+      const holdSuppression = () => {
+        this.#suppressClick = true;
+        clearTimeout(this.#suppressTimer);
+        this.#suppressTimer = window.setTimeout(() => this.#suppressClick = false, SUPPRESS_MS);
+      };
+      const releaseSuppression = () => {
+        this.#suppressClick = false;
+        clearTimeout(this.#suppressTimer);
+      };
+      const bind = (target, own) => {
+        const mine = (e) => own || e.target === this;
+        on(target, "pointerdown", (e) => {
+          if (e.button !== 0 || !mine(e)) return;
+          releaseSuppression();
+          this.#dispatch({ type: "down", source: "pointer" });
+        });
+        on(target, "pointermove", (e) => {
+          if (!mine(e)) return;
+          if (this.#state.press.by === "pointer" && !inside(e)) this.#dispatch({ type: "leave" });
+        });
+        on(target, "pointerup", (e) => {
+          if (!mine(e)) return;
+          const wasPressed = this.#state.press.by === "pointer";
+          const activated = this.#dispatch({ type: "up", source: "pointer" });
+          if (own && !activated && !wasPressed && !inside(e)) holdSuppression();
+        });
+        on(target, "pointercancel", (e) => {
+          if (mine(e)) this.#dispatch({ type: "cancel" });
+        });
+        on(target, "pointerenter", (e) => {
+          if (mine(e) && e.pointerType !== "touch") this.#dispatch({ type: "enter" });
+        });
+        on(target, "pointerleave", (e) => {
+          if (mine(e) && !control.hasPointerCapture?.(e.pointerId)) this.#dispatch({ type: "leave" });
+        });
+      };
+      bind(control, true);
+      bind(this, false);
+      on(
+        this,
+        "click",
+        (e) => {
+          if (e.target !== this) return;
+          e.stopImmediatePropagation();
+          e.preventDefault();
+          control.click();
+        },
+        true
+      );
+      on(
+        control,
+        "click",
+        (e) => {
+          if (!this.#suppressClick) return;
+          releaseSuppression();
+          if (e.detail === 0) return;
+          e.preventDefault();
+          e.stopImmediatePropagation();
+        },
+        true
+      );
+      on(control, "keydown", (e) => {
+        releaseSuppression();
+        if ((e.key === " " || e.key === "Enter") && !e.repeat) this.#dispatch({ type: "down", source: "keyboard" });
+      });
+      on(control, "keyup", (e) => {
+        if (e.key === " " || e.key === "Enter") this.#dispatch({ type: "up", source: "keyboard" });
+      });
+      on(control, "focus", () => this.#dispatch({ type: "focus", visible: control.matches(":focus-visible") }));
+      on(control, "blur", () => this.#dispatch({ type: "blur" }));
+      on(control, "focusout", () => this.#dispatch({ type: "blur" }));
+      const mutations = new MutationObserver(() => this.#syncDisabled());
+      mutations.observe(control, { attributes: true, attributeFilter: ["disabled"] });
+      this.#cleanups.push(() => mutations.disconnect());
+    }
+    #observeSize(control) {
+      if (typeof ResizeObserver === "undefined") return () => {
+      };
+      const observer = new ResizeObserver(() => {
+        this.#applySlop();
+        this.#glass?.setGeometry(this.#geometry(control));
+      });
+      observer.observe(control);
+      return () => observer.disconnect();
+    }
+    #geometry(control) {
+      const radius = parseFloat(getComputedStyle(control).borderTopLeftRadius) || 0;
+      return { width: control.offsetWidth, height: control.offsetHeight, cornerRadius: radius };
+    }
+    #applySlop() {
+      const control = this.#control;
+      if (!control) return;
+      const floor = minTarget({ touch: isCoarsePointer() });
+      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));
+    }
+    #syncDisabled() {
+      const control = this.#control;
+      if (!control) return;
+      if (this.hasAttribute("disabled") && !control.disabled) control.disabled = true;
+      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.#render();
+      }
+    }
+    #applyForced() {
+      const forced = this.#forced();
+      if (forced) {
+        this.#state = FORCED[forced];
+        settleControlVisual(this.#visual, this.#state);
+        if (forced === "disabled" && this.#control && !this.#control.disabled) this.#control.disabled = true;
+      } else {
+        this.#state = CONTROL_IDLE;
+        this.#syncDisabled();
+      }
+      this.#render(true);
+    }
+    #refreshMode(force = false, afterFailure = false) {
+      if (!afterFailure) this.#glassBroken = false;
+      const mode = effectiveA11y(this.#own);
+      let next = presentationFor(mode, this.#glassMode() !== "off");
+      if (this.#glassBroken && next.glass) next = { ...next, glass: false, surface: next.frost ? "frosted" : "plain" };
+      const changed = force || !this.#mode || !sameA11y(this.#mode, mode) || next.surface !== this.#presentation?.surface;
+      this.#mode = mode;
+      this.#presentation = next;
+      this.#applySize();
+      this.setAttribute("data-surface", next.surface);
+      this.toggleAttribute("data-contrast", next.contrastBorder);
+      this.toggleAttribute("data-frost", next.frost);
+      this.setAttribute("data-glass", next.glass ? "on" : "off");
+      if (changed) this.#reattachGlass(mode);
+      if (this.#forced()) this.#applyForced();
+      else this.#render(true);
+    }
+    #applySize() {
+      const size = this.#size();
+      const spec = kind === "iconButton" ? iconButtonSize(size) : BUTTON_SIZES[size];
+      const set = (name, value) => this.style.setProperty(name, value);
+      set("--vk-height", `${spec.height}px`);
+      set("--vk-pad-x", `${spec.paddingX}px`);
+      set("--vk-icon", `${spec.icon}px`);
+      set("--vk-radius", `${spec.radius}px`);
+      set("--vk-grow", String(response.grow));
+      set("--vk-defocus", String(response.defocus));
+      this.setAttribute("data-size", size);
+      this.#applySlop();
+    }
+    #dropGlass() {
+      this.#glassToken += 1;
+      this.#glass?.destroy();
+      this.#glass = null;
+      this.#glassKey = "";
+      this.#lastMaterialKey = "";
+    }
+    #reattachGlass(mode) {
+      const control = this.#control;
+      const want = this.#presentation?.glass === true && control !== null;
+      const key = want ? `${this.#glassMode()}|${JSON.stringify(mode)}|${this.#size()}` : "";
+      if (key === this.#glassKey) return;
+      this.#dropGlass();
+      this.#glassKey = key;
+      if (!want || !control) return;
+      const token = this.#glassToken;
+      const sample = this.#sample;
+      void attachControlGlass(
+        control,
+        {
+          material: vireglass.VIREGLASS_CONTROL_MATERIAL,
+          geometry: this.#geometry(control),
+          accessibility: mode,
+          onTouch: this.#glassMode() === "touch",
+          sample
+        },
+        () => token === this.#glassToken && this.isConnected
+      ).then((session) => {
+        if (!session) return;
+        this.#glass = session;
+        if (this.#morph) session.setMorph(this.#morph);
+        if (this.#carried !== null) session.setAppear(0);
+        if (this.#sample !== sample) session.setSample(this.#sample);
+        this.#pushMaterial(true);
+        this.dispatchEvent(new CustomEvent("vire-glass-ready"));
+      }).catch(() => {
+        if (token !== this.#glassToken) return;
+        this.#glassKey = "";
+        this.#glassBroken = true;
+        this.#refreshMode(false, true);
+      });
+    }
+    #pushMaterial(force = false) {
+      const glass = this.#glass;
+      if (!glass) return;
+      const atom = visualAtomState(this.#visual, this.#state);
+      const snap = (v) => Math.round(Math.min(Math.max(v, 0), 1) * MATERIAL_STEPS) / MATERIAL_STEPS;
+      const quantized = { ...atom, pressed: snap(atom.pressed), hovered: snap(atom.hovered) };
+      const key = `${quantized.pressed}|${quantized.hovered}|${quantized.disabled}`;
+      if (!force && key === this.#lastMaterialKey) return;
+      this.#lastMaterialKey = key;
+      const material = atomMaterial(vireglass.VIREGLASS_CONTROL_MATERIAL, kind, quantized);
+      glass.setMaterial(material);
+      if (this.#glassMode() === "touch" && this.#forced()) glass.setAppear(quantized.pressed);
+    }
+    #render(immediate = false) {
+      if (immediate && this.#forced()) settleControlVisual(this.#visual, this.#state);
+      this.#paint();
+      if (this.#frame || immediate && this.#forced()) return;
+      this.#lastFrame = 0;
+      this.#frame = requestAnimationFrame((t) => this.#tick(t));
+    }
+    #tick(now) {
+      this.#frame = 0;
+      if (!this.isConnected) return;
+      const dt = this.#lastFrame ? Math.min((now - this.#lastFrame) / 1e3, 0.05) : 1 / 60;
+      this.#lastFrame = now;
+      const moving = stepControlVisual(this.#visual, dt, this.#state, this.#presentation?.instantSprings ?? false);
+      this.#paint();
+      if (moving) this.#frame = requestAnimationFrame((t) => this.#tick(t));
+    }
+    #paint() {
+      const v = this.#visual;
+      const set = (name, value) => this.style.setProperty(name, value.toFixed(3));
+      set("--vk-press", v.pressed.x);
+      set("--vk-hover", v.hovered.x);
+      const body = atomBody(vireglass.VIREGLASS_CONTROL_MATERIAL, visualAtomState(v, this.#state), this.#presentation?.frost ?? false);
+      set("--vk-body-alpha", body.alpha);
+      set("--vk-body-white", body.white);
+      set("--vk-body-lift", body.lift);
+      this.toggleAttribute("data-pressed", this.#state.press.by !== null);
+      this.toggleAttribute("data-hovered", this.#state.hovered);
+      this.toggleAttribute("data-focus", this.#state.focused);
+      this.toggleAttribute("data-disabled", this.#state.disabled);
+      this.#pushMaterial();
+    }
+  };
+}
+var MENU_CLOSED = { open: false, active: -1, typed: "", typedAt: Number.NEGATIVE_INFINITY };
+var TYPEAHEAD_SECONDS = 0.5;
+var exists = (items, i) => i >= 0 && i < items.length;
+var enabled = (items, i) => exists(items, i) && !items[i].disabled;
+var reachable = (items, i) => exists(items, i) && (items[i].focusable ?? !items[i].disabled);
+function seek(items, from, step) {
+  const n = items.length;
+  for (let k = 1; k <= n; k += 1) {
+    const i = ((from + step * k) % n + n) % n;
+    if (reachable(items, i)) return i;
+  }
+  return -1;
+}
+var first = (items) => seek(items, -1, 1);
+var last = (items) => seek(items, items.length, -1);
+var toItem = (index) => index < 0 ? { to: "menu" } : { to: "item", index };
+function typeahead(state, items, key, at) {
+  const fresh = at - state.typedAt > TYPEAHEAD_SECONDS;
+  const typed = (fresh ? "" : state.typed) + key.toLowerCase();
+  const repeated = typed.length > 1 && [...typed].every((c) => c === typed[0]);
+  const needle = repeated ? typed[0] : typed;
+  const start = needle.length > 1 ? state.active - 1 : state.active;
+  const n = items.length;
+  for (let k = 1; k <= n; k += 1) {
+    const i = ((start + k) % n + n) % n;
+    if (reachable(items, i) && items[i].label.trim().toLowerCase().startsWith(needle)) {
+      return { state: { ...state, active: i, typed, typedAt: at }, focus: { to: "item", index: i }, chosen: null };
+    }
+  }
+  return { state: { ...state, typed, typedAt: at }, focus: { to: "stay" }, chosen: null };
+}
+function stepMenu(state, event, items) {
+  const stay = { state, focus: { to: "stay" }, chosen: null };
+  if (event.type === "open") {
+    const active = event.focus === "first" ? first(items) : event.focus === "last" ? last(items) : -1;
+    return { state: { ...MENU_CLOSED, open: true, active }, focus: toItem(active), chosen: null };
+  }
+  if (!state.open) return stay;
+  switch (event.type) {
+    case "move": {
+      const active = event.to === "first" ? first(items) : event.to === "last" ? last(items) : seek(items, state.active < 0 && event.to === "previous" ? items.length : state.active, event.to === "next" ? 1 : -1);
+      if (active < 0) return stay;
+      return { state: { ...state, active, typed: "" }, focus: { to: "item", index: active }, chosen: null };
+    }
+    case "point":
+      if (!reachable(items, event.index) || event.index === state.active) return stay;
+      return { state: { ...state, active: event.index, typed: "" }, focus: { to: "item", index: event.index }, chosen: null };
+    case "type":
+      return typeahead(state, items, event.key, event.at);
+    case "choose":
+      if (!enabled(items, event.index)) return stay;
+      return { state: MENU_CLOSED, focus: { to: "trigger" }, chosen: event.index };
+    case "dismiss":
+      return { state: MENU_CLOSED, focus: event.reason === "outside" ? { to: "none" } : { to: "trigger" }, chosen: null };
+  }
+}
+var MENU_CORNERS = {
+  "top-left": { x: -1, y: -1 },
+  "top-right": { x: 1, y: -1 },
+  "bottom-left": { x: -1, y: 1 },
+  "bottom-right": { x: 1, y: 1 }
+};
+function menuCorner(trigger, viewport) {
+  return {
+    x: trigger.x + trigger.width / 2 <= viewport.width / 2 ? -1 : 1,
+    y: trigger.y + trigger.height / 2 <= viewport.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;
+}
+var clamp = (v, lo, hi) => Math.min(Math.max(v, lo), Math.max(lo, hi));
+function menuPlacement(trigger, menu, viewport, 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) };
+  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)) {
+      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)) {
+      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);
+  const rect = { x, y, width, height };
+  return {
+    rect,
+    corner,
+    anchor: { x: corner.x < 0 ? x : x + width, y: corner.y < 0 ? y : y + height }
+  };
+}
+var center = (r) => ({ x: r.x + r.width / 2, y: r.y + r.height / 2 });
+function menuActivity(phase) {
+  const shrink = Math.min(Math.max(phase.shrink, 0), 1);
+  const grow = Math.min(Math.max(phase.grow, 0), 1);
+  return shrink * (1 - grow);
+}
+function menuSurfaceFrame(trigger, menu, anchor, phase) {
+  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) },
+    anchor,
+    phase
+  );
+  const { geometry, center: c } = frame.body;
+  const box = {
+    x: c.x - geometry.width / 2,
+    y: c.y - geometry.height / 2,
+    width: geometry.width,
+    height: geometry.height,
+    radius: geometry.cornerRadius
+  };
+  return {
+    box,
+    morph: frame.merge,
+    content: { x: menu.x - box.x, y: menu.y - box.y },
+    ink: frame.ink,
+    activity: menuActivity(phase)
+  };
+}
+function menuGlass(base) {
+  return { ...base, roughness: Math.max(base.roughness, vireglass.VIREGLASS_SHEET_MATERIAL.roughness) };
+}
+function menuMaterial(base, activity) {
+  return atomMaterial(menuGlass(base), "menu", { ...ATOM_AT_REST, pressed: activity });
+}
+var MENU_DROP_BODY = { alpha: 0.9, white: 0.1, lift: 0.2 };
+function menuBody(base, activity, frost = false) {
+  const rest = atomBody(base, ATOM_AT_REST, frost);
+  if (frost) return rest;
+  const k = Math.min(Math.max(activity, 0), 1);
+  const mix2 = (key) => rest[key] + (MENU_DROP_BODY[key] - rest[key]) * k;
+  return { alpha: mix2("alpha"), white: mix2("white"), lift: mix2("lift") };
+}
+var MENU_ITEM_FILL = { active: 0.1, pressed: 0.18 };
+
+// src/web/menu.ts
+var FORCE_ATTRIBUTE2 = "data-vire-force-state";
+var FORCED2 = {
+  closed: null,
+  growing: { shrink: 1, grow: 0.3 },
+  open: { shrink: 1, grow: 1 },
+  retracting: { shrink: 0.55, grow: 0 }
+};
+var FORCED_PHASE = /^\d*\.?\d+ \d*\.?\d+$/;
+var GLASS_ON = /* @__PURE__ */ new Set(["", "present", "touch"]);
+var MATERIAL_STEPS2 = 10;
+var VIEWPORT_MARGIN = 8;
+var TRIGGER = ":scope > button, :scope > vire-button > button, :scope > vire-icon-button > button";
+var ACTIVATION_KEYS = /* @__PURE__ */ new Set(["Enter", " "]);
+var ids = 0;
+var nativelyDisabled = (item) => item.hasAttribute("disabled");
+var isDisabled = (item) => nativelyDisabled(item) || item.getAttribute("aria-disabled") === "true";
+function rootsOf(el) {
+  const roots = [];
+  let node = el.getRootNode();
+  while (node instanceof ShadowRoot) {
+    roots.push(node);
+    node = node.host.getRootNode();
+  }
+  roots.push(el.ownerDocument);
+  return roots;
+}
+function dropEmptyStyle(el, hadStyle) {
+  if (!hadStyle && el.getAttribute("style") === "") el.removeAttribute("style");
+}
+function createMenuElementClass(options = {}) {
+  return class VireMenu extends HTMLElement {
+    static observedAttributes = ["glass", "size", "corner", FORCE_ATTRIBUTE2];
+    #trigger = null;
+    #carrier = null;
+    #list = null;
+    #restore = [];
+    #itemRestore = /* @__PURE__ */ new Map();
+    #hadStyle = { host: false, list: false };
+    #cleanups = [];
+    #state = MENU_CLOSED;
+    #growth = createGrowthState();
+    #from = null;
+    #to = null;
+    #anchor = null;
+    #natural = null;
+    #out = false;
+    #viaPointer = false;
+    #frame = 0;
+    #placeFrame = 0;
+    #inertTimer = 0;
+    #lastFrame = 0;
+    /** When the content was last fully in focus; null while it is still arriving or leaving. */
+    #readySince = null;
+    /** When the content came into focus, which is when a deliberate key may choose. */
+    #inSince = null;
+    #downAt = Number.NEGATIVE_INFINITY;
+    #own = {};
+    #mode = null;
+    #presentation = null;
+    #glass = null;
+    #glassToken = 0;
+    #glassKey = "";
+    #glassBroken = false;
+    #lastLens = { material: "", morph: "", geometry: "" };
+    #sample = null;
+    #held = null;
+    get a11y() {
+      return this.#own;
+    }
+    set a11y(next) {
+      this.#own = { ...next };
+      if (this.#list) this.#refreshMode();
+    }
+    get sample() {
+      return this.#sample;
+    }
+    set sample(next) {
+      this.#sample = next;
+      if (!this.#glass) return;
+      if (this.#out) this.#holdSample();
+      else this.#glass.setSample(next);
+    }
+    get open() {
+      return this.#state.open;
+    }
+    connectedCallback() {
+      for (const key of ["a11y", "sample"]) {
+        if (!Object.prototype.hasOwnProperty.call(this, key)) continue;
+        const value = Reflect.get(this, key);
+        Reflect.deleteProperty(this, key);
+        Reflect.set(this, key, value);
+      }
+      this.#hadStyle.host = this.hasAttribute("style");
+      ensureStyles(this, options.nonce);
+      this.#cleanups.push(watchCoarsePointer(() => this.#list && this.#refreshMode(true)));
+      this.#cleanups.push(watchSystemA11y(() => this.#list && this.#refreshMode()));
+      this.#cleanups.push(watchA11yOverride(() => this.#list && this.#refreshMode()));
+      this.#awaitParts();
+    }
+    disconnectedCallback() {
+      for (const cleanup of this.#cleanups.splice(0)) cleanup();
+      cancelAnimationFrame(this.#frame);
+      cancelAnimationFrame(this.#placeFrame);
+      clearTimeout(this.#inertTimer);
+      this.#frame = this.#placeFrame = this.#inertTimer = 0;
+      this.#dropGlass();
+      const list = this.#list;
+      if (list) {
+        if (list.matches(":popover-open")) list.hidePopover();
+        list.inert = false;
+        list.removeAttribute("data-scroll");
+        for (const name of Array.from(list.style)) if (name.startsWith("--vk-")) list.style.removeProperty(name);
+        for (const item of this.#items()) item.removeAttribute("data-pressed");
+      }
+      this.#carrier?.setCarried?.(null);
+      for (const restore of this.#itemRestore.values()) restore();
+      this.#itemRestore.clear();
+      for (const restore of this.#restore.splice(0).reverse()) restore();
+      if (list) dropEmptyStyle(list, this.#hadStyle.list);
+      this.#trigger = null;
+      this.#carrier = null;
+      this.#list = null;
+      this.#state = MENU_CLOSED;
+      this.#growth = createGrowthState();
+      this.#out = false;
+      this.#from = this.#to = this.#anchor = null;
+      this.#natural = null;
+      this.#held = null;
+      this.#readySince = null;
+      this.#inSince = null;
+      for (const name of ["data-vk", "data-surface", "data-glass", "data-frost", "data-contrast", "data-size", "data-phase", "data-measure"]) {
+        this.removeAttribute(name);
+      }
+      for (const name of Array.from(this.style)) if (name.startsWith("--vk-")) this.style.removeProperty(name);
+      dropEmptyStyle(this, this.#hadStyle.host);
+      this.#presentation = null;
+      this.#mode = null;
+    }
+    attributeChangedCallback(name) {
+      if (!this.#list) return;
+      if (name === FORCE_ATTRIBUTE2) this.#applyForced();
+      else if (name === "corner") this.#out && this.#place();
+      else this.#refreshMode(true);
+    }
+    // The parser connects the element before its children exist, so the parts are waited for, not made up.
+    #awaitParts() {
+      if (this.#tryUpgrade()) return;
+      const observer = new MutationObserver(() => {
+        if (this.#tryUpgrade()) observer.disconnect();
+      });
+      observer.observe(this, { childList: true, subtree: true });
+      this.#cleanups.push(() => observer.disconnect());
+    }
+    #tryUpgrade() {
+      const list = this.querySelector(":scope > [popover]");
+      const trigger = this.querySelector(TRIGGER);
+      if (!list || !trigger) return false;
+      this.#upgrade(trigger, list);
+      return true;
+    }
+    #keep(el, name, value, into = this.#restore) {
+      const was = el.getAttribute(name);
+      if (value === null) el.removeAttribute(name);
+      else el.setAttribute(name, value);
+      into.push(() => was === null ? el.removeAttribute(name) : el.setAttribute(name, was));
+    }
+    #upgrade(trigger, list) {
+      this.#trigger = trigger;
+      this.#list = list;
+      this.#hadStyle.list = list.hasAttribute("style");
+      const parent = trigger.parentElement;
+      this.#carrier = parent && parent !== this ? parent : null;
+      const wasOpen = list.matches(":popover-open");
+      this.setAttribute("data-vk", "");
+      ids += 1;
+      if (!list.id) this.#keep(list, "id", `vire-menu-${ids}`);
+      if (!trigger.id) this.#keep(trigger, "id", `vire-menu-trigger-${ids}`);
+      this.#keep(trigger, "popovertarget", null);
+      this.#keep(trigger, "popovertargetaction", null);
+      this.#keep(trigger, "aria-haspopup", "menu");
+      this.#keep(trigger, "aria-expanded", "false");
+      this.#keep(trigger, "aria-controls", list.id);
+      this.#keep(list, "popover", "manual");
+      this.#keep(list, "role", "menu");
+      this.#keep(list, "tabindex", "-1");
+      this.#keep(list, "aria-labelledby", trigger.id);
+      this.#adoptItems();
+      const items = new MutationObserver((records) => {
+        let changed = false;
+        for (const record of records) {
+          if (record.type === "childList" && record.target === list) {
+            changed = true;
+            for (const node of record.removedNodes) this.#releaseItem(node);
+          } else if (record.type === "attributes") {
+            this.#keepFocusOff(record.target);
+          }
+        }
+        if (!changed) return;
+        this.#adoptItems();
+        if (this.#out) {
+          this.#natural = null;
+          this.#place();
+        }
+      });
+      items.observe(list, { childList: true, subtree: true, attributes: true, attributeFilter: ["disabled"] });
+      this.#cleanups.push(() => items.disconnect());
+      this.#listen(trigger, list);
+      this.#mode = null;
+      this.#refreshMode();
+      if (this.#forced()) this.#applyForced();
+      else if (wasOpen) this.#show("menu");
+    }
+    #adoptItems() {
+      for (const item of this.#items()) {
+        if (this.#itemRestore.has(item)) continue;
+        const restore = [];
+        this.#keep(item, "popovertarget", null, restore);
+        this.#keep(item, "popovertargetaction", null, restore);
+        this.#keep(item, "role", "menuitem", restore);
+        this.#keep(item, "tabindex", "-1", restore);
+        this.#itemRestore.set(item, () => {
+          for (const undo of restore.reverse()) undo();
+        });
+      }
+    }
+    /** A focused item that turns natively disabled loses focus to the page; the menu keeps it instead. */
+    #keepFocusOff(item) {
+      const list = this.#list;
+      if (!list || !this.#state.open || item.parentElement !== list || !nativelyDisabled(item)) return;
+      const active = list.getRootNode().activeElement;
+      if (active !== item && list.contains(active)) return;
+      this.#state = { ...this.#state, active: -1 };
+      list.focus({ preventScroll: true });
+    }
+    #releaseItem(node) {
+      const restore = this.#itemRestore.get(node);
+      if (!restore) return;
+      this.#itemRestore.delete(node);
+      restore();
+    }
+    #items() {
+      return this.#list ? Array.from(this.#list.querySelectorAll(":scope > button")) : [];
+    }
+    #model() {
+      return this.#items().map((item) => ({
+        label: item.getAttribute("aria-label") ?? item.textContent ?? "",
+        disabled: isDisabled(item),
+        focusable: !nativelyDisabled(item)
+      }));
+    }
+    #listen(trigger, list) {
+      const on = (target, type, handler, capture = false) => {
+        target.addEventListener(type, handler, capture);
+        this.#cleanups.push(() => target.removeEventListener(type, handler, capture));
+      };
+      const itemOf = (target) => {
+        const item = target instanceof Element ? target.closest("button") : null;
+        return item && item.parentElement === list ? item : null;
+      };
+      const drop = (e) => {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      };
+      on(this.#carrier ?? trigger, "pointerdown", () => this.#viaPointer = true);
+      on(trigger, "keydown", (e) => {
+        this.#viaPointer = false;
+        if (this.#forced()) return;
+        if (e.repeat && ACTIVATION_KEYS.has(e.key)) {
+          e.preventDefault();
+        } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          e.preventDefault();
+          this.#show(e.key === "ArrowDown" ? "first" : "last");
+        } else if (e.key === "Escape" && this.#state.open) {
+          e.preventDefault();
+          this.#close({ type: "dismiss", reason: "escape" });
+        }
+      });
+      on(trigger, "click", (e) => {
+        if (this.#forced()) return;
+        const pointer = e.detail > 0 || this.#viaPointer;
+        const early = e.detail > 1 || pointer && this.#readySince === null;
+        if (this.#state.open && !early) this.#close({ type: "dismiss", reason: "trigger" });
+        else if (!this.#state.open) this.#show(this.#viaPointer ? "menu" : "first");
+        this.#viaPointer = false;
+      });
+      on(list, "keydown", (e) => {
+        if (!this.#state.open || this.#forced()) return;
+        const move = { ArrowDown: "next", ArrowUp: "previous", Home: "first", End: "last" };
+        if (e.repeat && ACTIVATION_KEYS.has(e.key)) {
+          e.preventDefault();
+        } else if (e.key in move) {
+          e.preventDefault();
+          this.#step({ type: "move", to: move[e.key] });
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          this.#close({ type: "dismiss", reason: "escape" });
+        } else if (e.key === "Tab") {
+          this.#close({ type: "dismiss", reason: "tab" });
+        } else if (e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.metaKey && !e.altKey) {
+          this.#step({ type: "type", key: e.key, at: e.timeStamp / 1e3 });
+        } else if (ACTIVATION_KEYS.has(e.key)) {
+          const item = itemOf(e.target);
+          if (item && !isDisabled(item)) item.setAttribute("data-pressed", "");
+        }
+      });
+      on(list, "keyup", (e) => itemOf(e.target)?.removeAttribute("data-pressed"));
+      on(
+        list,
+        "click",
+        (e) => {
+          const item = itemOf(e.target);
+          if (!item || this.#forced()) return;
+          if (isDisabled(item)) return drop(e);
+          if (!this.#state.open) {
+            if (this.#out) drop(e);
+            return;
+          }
+          const ready = this.#readySince;
+          const pointerEarly = e.detail > 0 && (ready === null || this.#downAt < ready);
+          if (e.detail > 1 || pointerEarly || this.#inSince === null) return drop(e);
+          this.#close({ type: "choose", index: this.#items().indexOf(item) });
+        },
+        true
+      );
+      on(
+        list,
+        "pointerdown",
+        (e) => {
+          this.#downAt = e.timeStamp;
+          const item = itemOf(e.target);
+          if (e.button === 0 && item && !isDisabled(item) && !this.#forced()) item.setAttribute("data-pressed", "");
+        },
+        true
+      );
+      on(list, "pointermove", (e) => {
+        const item = itemOf(e.target);
+        if (item && this.#state.open && !this.#forced()) this.#step({ type: "point", index: this.#items().indexOf(item) });
+      });
+      for (const type of ["pointerup", "pointercancel", "pointerout"]) {
+        on(list, type, (e) => itemOf(e.target)?.removeAttribute("data-pressed"));
+      }
+      on(list, "focusout", (e) => {
+        const to = e.relatedTarget;
+        if (!this.#state.open || !to || this.#forced()) return;
+        if (list.contains(to) || trigger.contains(to) || this.#carrier?.contains(to)) return;
+        this.#close({ type: "dismiss", reason: "outside" });
+      });
+      const roots = rootsOf(this);
+      roots.forEach((root, i) => {
+        const inner = i === 0 ? null : roots[i - 1].host;
+        on(
+          root,
+          "pointerdown",
+          (e) => {
+            if (!this.#state.open || this.#forced()) return;
+            const path = e.composedPath();
+            if (inner && path.includes(inner)) return;
+            if ([list, trigger, this.#carrier].some((node) => node !== null && path.includes(node))) return;
+            this.#close({ type: "dismiss", reason: "outside" });
+          },
+          true
+        );
+        on(root, "scroll", (e) => this.#follow(e), true);
+      });
+      on(window, "resize", (e) => this.#follow(e));
+      if (typeof ResizeObserver !== "undefined") {
+        const resized = new ResizeObserver(() => this.#out && this.#follow());
+        resized.observe(this.#carrier ?? trigger);
+        this.#cleanups.push(() => resized.disconnect());
+      }
+    }
+    /** Puts the menu back over its trigger after a scroll or a resize, once per frame. */
+    #follow(e) {
+      if (!this.#out || this.#placeFrame) return;
+      if (e?.target instanceof Node && this.#list?.contains(e.target)) return;
+      this.#placeFrame = requestAnimationFrame(() => {
+        this.#placeFrame = 0;
+        if (this.#out) this.#place();
+      });
+    }
+    #step(event) {
+      const step = stepMenu(this.#state, event, this.#model());
+      this.#state = step.state;
+      this.#applyFocus(step.focus);
+    }
+    #applyFocus(focus) {
+      const list = this.#list;
+      if (focus.to === "item") this.#items()[focus.index]?.focus({ preventScroll: true });
+      else if (focus.to === "menu") list.focus({ preventScroll: true });
+      else if (focus.to === "trigger") this.#trigger.focus({ preventScroll: true });
+      else if (focus.to === "none") {
+        const active = list.getRootNode().activeElement;
+        if (active instanceof HTMLElement && list.contains(active)) active.blur();
+      }
+    }
+    #show(focus) {
+      const list = this.#list;
+      const step = stepMenu(this.#state, { type: "open", focus }, this.#model());
+      this.#state = step.state;
+      this.#readySince = null;
+      this.#inSince = null;
+      clearTimeout(this.#inertTimer);
+      list.inert = false;
+      this.#trigger.setAttribute("aria-expanded", "true");
+      this.#comeOut();
+      this.#run();
+      this.#applyFocus(step.focus);
+    }
+    #close(event) {
+      const step = stepMenu(this.#state, event, this.#model());
+      const closing = this.#state.open && !step.state.open;
+      this.#state = step.state;
+      this.#applyFocus(step.focus);
+      if (!closing) return;
+      this.#readySince = null;
+      this.#inSince = null;
+      this.#trigger.setAttribute("aria-expanded", "false");
+      for (const item of this.#items()) item.removeAttribute("data-pressed");
+      clearTimeout(this.#inertTimer);
+      this.#inertTimer = window.setTimeout(() => {
+        if (this.#list && !this.#state.open && this.#out) this.#list.inert = true;
+      });
+      this.#run();
+    }
+    #comeOut() {
+      const list = this.#list;
+      const wasOut = this.#out;
+      if (!list.matches(":popover-open")) list.showPopover();
+      this.#out = true;
+      if (!wasOut) this.#natural = null;
+      this.#place();
+      if (wasOut) return;
+      this.#carrier?.setCarried?.(1);
+      this.#holdSample();
+    }
+    #triggerBox() {
+      const trigger = this.#trigger;
+      const r = (this.#carrier ?? trigger).getBoundingClientRect();
+      const radius = parseFloat(getComputedStyle(trigger).borderTopLeftRadius) || 0;
+      return { x: r.x, y: r.y, width: r.width, height: r.height, radius: Math.min(radius, r.width / 2, r.height / 2) };
+    }
+    #corner() {
+      const wanted = this.getAttribute("corner");
+      return wanted && Object.hasOwn(MENU_CORNERS, wanted) ? MENU_CORNERS[wanted] : void 0;
+    }
+    #measure() {
+      const list = this.#list;
+      this.setAttribute("data-measure", "");
+      const natural = { width: list.offsetWidth, height: list.offsetHeight };
+      this.removeAttribute("data-measure");
+      return natural;
+    }
+    #place() {
+      const list = this.#list;
+      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 });
+      this.#from = trigger;
+      this.#to = { ...placement.rect, radius: spec.radius };
+      this.#anchor = placement.anchor;
+      list.style.setProperty("--vk-content-w", `${placement.rect.width - 2 * spec.padding}px`);
+      list.toggleAttribute("data-scroll", placement.rect.height < natural.height);
+      this.#paint();
+    }
+    #holdSample() {
+      const glass = this.#glass;
+      if (!glass || !this.#to) return;
+      let sample = this.#sample;
+      if (!sample) {
+        this.#setBox(this.#to);
+        sample = glass.probe();
+      }
+      this.#held = sample;
+      glass.setSample(sample);
+      this.#paint();
+    }
+    #setBox(box) {
+      const s = this.#list.style;
+      const px = (v) => `${v.toFixed(2)}px`;
+      s.setProperty("--vk-x", px(box.x));
+      s.setProperty("--vk-y", px(box.y));
+      s.setProperty("--vk-w", px(box.width));
+      s.setProperty("--vk-h", px(box.height));
+      s.setProperty("--vk-r", px(box.radius));
+    }
+    #run() {
+      const instant = this.#presentation?.instantSprings ?? false;
+      if (instant) stepGrowth(this.#growth, 0, this.#state.open, true);
+      this.#paint();
+      if (instant) {
+        this.#settle();
+        return;
+      }
+      if (this.#frame) return;
+      this.#lastFrame = 0;
+      this.#frame = requestAnimationFrame((t) => this.#tick(t));
+    }
+    #tick(now) {
+      this.#frame = 0;
+      if (!this.isConnected || this.#forced()) return;
+      const dt = this.#lastFrame ? Math.min((now - this.#lastFrame) / 1e3, 0.05) : 1 / 60;
+      this.#lastFrame = now;
+      const instant = this.#presentation?.instantSprings ?? false;
+      const moving = stepGrowth(this.#growth, dt, this.#state.open, instant);
+      this.#paint();
+      if (moving) this.#frame = requestAnimationFrame((t) => this.#tick(t));
+      else this.#settle();
+    }
+    #settle() {
+      if (this.#state.open) {
+        this.#paint();
+        return;
+      }
+      const list = this.#list;
+      if (list.matches(":popover-open")) list.hidePopover();
+      clearTimeout(this.#inertTimer);
+      list.inert = false;
+      list.removeAttribute("data-scroll");
+      for (const name of Array.from(list.style)) if (name.startsWith("--vk-")) list.style.removeProperty(name);
+      this.removeAttribute("data-phase");
+      this.#out = false;
+      this.#held = null;
+      this.#from = this.#to = this.#anchor = null;
+      this.#glass?.setSample(this.#sample);
+      this.#carrier?.setCarried?.(null);
+    }
+    #paint() {
+      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 settled = phase.shrink === 1 && phase.grow === 1;
+      const inkIn = Math.round(f.ink.incoming * 1e3) / 1e3;
+      if (this.#state.open && inkIn >= 1) {
+        this.#inSince ??= performance.now();
+        if (this.#growth.grow.v <= 0) this.#readySince ??= performance.now();
+      }
+      this.setAttribute("data-phase", settled ? "open" : "moving");
+      this.#setBox(f.box);
+      const s = list.style;
+      s.setProperty("--vk-cx", `${f.content.x.toFixed(2)}px`);
+      s.setProperty("--vk-cy", `${f.content.y.toFixed(2)}px`);
+      s.setProperty("--vk-ink-in", inkIn.toFixed(3));
+      const body = menuBody(vireglass.VIREGLASS_CONTROL_MATERIAL, f.activity, this.#presentation?.frost ?? false);
+      s.setProperty("--vk-body-alpha", body.alpha.toFixed(3));
+      s.setProperty("--vk-body-white", body.white.toFixed(3));
+      s.setProperty("--vk-body-lift", body.lift.toFixed(3));
+      this.#carrier?.setCarried?.(f.ink.outgoing);
+      this.#pushGlass(f.box, f.morph, f.activity);
+    }
+    /** Hands the lens only what changed: a new morph or material rebuilds its filter, a moved box needs nothing. */
+    #pushGlass(box, morph, activity) {
+      const glass = this.#glass;
+      if (!glass) return;
+      const round = Math.round;
+      const step = round(Math.min(Math.max(activity, 0), 1) * MATERIAL_STEPS2) / MATERIAL_STEPS2;
+      const geometry = { width: round(box.width), height: round(box.height), cornerRadius: round(box.radius) };
+      const lens = morph ? {
+        smoothing: round(morph.smoothing),
+        shape: {
+          offsetX: round(morph.offsetX),
+          offsetY: round(morph.offsetY),
+          width: round(morph.width),
+          height: round(morph.height),
+          cornerRadius: round(morph.cornerRadius)
+        }
+      } : null;
+      const key = {
+        material: String(step),
+        morph: lens ? JSON.stringify(lens) : "none",
+        geometry: `${geometry.width}x${geometry.height}r${geometry.cornerRadius}`
+      };
+      const last2 = this.#lastLens;
+      if (key.material === last2.material && key.morph === last2.morph && key.geometry === last2.geometry) return;
+      const next = {};
+      if (key.geometry !== last2.geometry) next.geometry = geometry;
+      if (key.material !== last2.material) next.material = menuMaterial(vireglass.VIREGLASS_CONTROL_MATERIAL, step);
+      if (key.morph !== last2.morph) next.morph = lens;
+      this.#lastLens = key;
+      glass.frame(next);
+    }
+    #forced() {
+      const wanted = this.getAttribute(FORCE_ATTRIBUTE2);
+      return wanted !== null && (Object.hasOwn(FORCED2, wanted) || FORCED_PHASE.test(wanted)) ? wanted : null;
+    }
+    #applyForced() {
+      const forced = this.#forced();
+      const [shrink, grow] = (forced ?? "").split(" ").map(Number);
+      const phase = !forced ? null : Object.hasOwn(FORCED2, forced) ? FORCED2[forced] : { shrink, grow };
+      cancelAnimationFrame(this.#frame);
+      this.#frame = 0;
+      if (!phase) {
+        this.#state = MENU_CLOSED;
+        this.#growth = createGrowthState();
+        this.#trigger.setAttribute("aria-expanded", "false");
+        if (this.#out) this.#settle();
+        return;
+      }
+      this.#state = { ...MENU_CLOSED, open: forced !== "retracting" };
+      this.#growth = {
+        shrink: { x: phase.shrink, v: 0, target: phase.shrink },
+        grow: { x: phase.grow, v: 0, target: phase.grow }
+      };
+      this.#trigger.setAttribute("aria-expanded", String(this.#state.open));
+      this.#list.inert = true;
+      this.#comeOut();
+    }
+    #size() {
+      const wanted = this.getAttribute("size");
+      if (wanted && CONTROL_SIZES.includes(wanted)) return wanted;
+      return defaultSize({ touch: isCoarsePointer() });
+    }
+    #wantsGlass() {
+      const wanted = this.getAttribute("glass");
+      return wanted !== null && GLASS_ON.has(wanted);
+    }
+    #refreshMode(force = false, afterFailure = false) {
+      if (!afterFailure) this.#glassBroken = false;
+      const mode = effectiveA11y(this.#own);
+      let next = presentationFor(mode, this.#wantsGlass());
+      if (this.#glassBroken && next.glass) next = { ...next, glass: false, surface: next.frost ? "frosted" : "plain" };
+      const changed = force || !this.#mode || !sameA11y(this.#mode, mode) || next.surface !== this.#presentation?.surface;
+      this.#mode = mode;
+      this.#presentation = next;
+      this.#applySize();
+      this.setAttribute("data-surface", next.surface);
+      this.toggleAttribute("data-contrast", next.contrastBorder);
+      this.toggleAttribute("data-frost", next.frost);
+      this.setAttribute("data-glass", next.glass ? "on" : "off");
+      if (changed) this.#reattachGlass(mode);
+      if (this.#out) {
+        this.#natural = null;
+        this.#place();
+      }
+    }
+    #applySize() {
+      const spec = menuSize(this.#size());
+      const set = (name, value) => this.style.setProperty(name, value);
+      set("--vk-menu-row", `${spec.row}px`);
+      set("--vk-menu-pad", `${spec.padding}px`);
+      set("--vk-menu-radius", `${spec.radius}px`);
+      set("--vk-item-radius", `${spec.itemRadius}px`);
+      set("--vk-menu-icon", `${spec.icon}px`);
+      set("--vk-label-pad", `${spec.labelPad}px`);
+      set("--vk-fill-active", String(MENU_ITEM_FILL.active));
+      set("--vk-fill-pressed", String(MENU_ITEM_FILL.pressed));
+      this.setAttribute("data-size", this.#size());
+    }
+    #dropGlass() {
+      this.#glassToken += 1;
+      this.#glass?.destroy();
+      this.#glass = null;
+      this.#glassKey = "";
+      this.#lastLens = { material: "", morph: "", geometry: "" };
+    }
+    #reattachGlass(mode) {
+      const list = this.#list;
+      const want = this.#presentation?.glass === true && list !== null;
+      const key = want ? `${JSON.stringify(mode)}|${this.#size()}` : "";
+      if (key === this.#glassKey) return;
+      this.#dropGlass();
+      this.#glassKey = key;
+      if (!want || !list) return;
+      const token = this.#glassToken;
+      const box = this.#from ?? this.#triggerBox();
+      void attachControlGlass(
+        list,
+        {
+          material: menuMaterial(vireglass.VIREGLASS_CONTROL_MATERIAL, 0),
+          geometry: { width: Math.round(box.width), height: Math.round(box.height), cornerRadius: menuSize(this.#size()).radius },
+          accessibility: mode,
+          onTouch: false,
+          sample: this.#held ?? this.#sample,
+          interactive: false
+        },
+        () => token === this.#glassToken && this.isConnected
+      ).then((session) => {
+        if (!session) return;
+        this.#glass = session;
+        this.#lastLens = { material: "", morph: "", geometry: "" };
+        if (this.#out) this.#holdSample();
+        this.dispatchEvent(new CustomEvent("vire-glass-ready"));
+      }).catch(() => {
+        if (token !== this.#glassToken) return;
+        this.#glassKey = "";
+        this.#glassBroken = true;
+        this.#refreshMode(false, true);
+      });
+    }
+  };
+}
+
+// src/web/index.ts
+var BUTTON_TAG = "vire-button";
+var ICON_BUTTON_TAG = "vire-icon-button";
+var MENU_TAG = "vire-menu";
+function defineVireElements(options = {}) {
+  const registry = options.registry ?? (typeof customElements === "undefined" ? void 0 : customElements);
+  if (!registry) return;
+  const pairs = [
+    [BUTTON_TAG, "button"],
+    [ICON_BUTTON_TAG, "iconButton"]
+  ];
+  for (const [tag, kind] of pairs) {
+    if (!registry.get(tag)) registry.define(tag, createControlElementClass(kind, { nonce: options.nonce }));
+  }
+  if (!registry.get(MENU_TAG)) registry.define(MENU_TAG, createMenuElementClass({ nonce: options.nonce }));
+}
+
+exports.BUTTON_TAG = BUTTON_TAG;
+exports.ICON_BUTTON_TAG = ICON_BUTTON_TAG;
+exports.MENU_TAG = MENU_TAG;
+exports.STYLES = STYLES;
+exports.defineVireElements = defineVireElements;
+exports.getA11yOverride = getA11yOverride;
+exports.setA11yOverride = setA11yOverride;
+exports.systemA11y = systemA11y;
+//# sourceMappingURL=web.cjs.map
+//# sourceMappingURL=web.cjs.map