vireuikit 0.6.0 → 0.7.0

package/dist/web.cjs

@@ -49,8 +49,8 @@ var DISABLED_PRESENCE = 0.25;
 var HOVER_GAIN = 0.35;
 function activation(state) {
   if (state.disabled) return 0;
-  const clamp = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
-  return Math.max(clamp(state.selected), clamp(state.pressed), clamp(state.hovered) * HOVER_GAIN);
+  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));
@@ -62,10 +62,10 @@ 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 mix = (key) => REST_BODY[key] + (PRESSED_BODY[key] - REST_BODY[key]) * on;
-  let alpha = mix("alpha");
-  let white = mix("white");
-  let lift = mix("lift");
+  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), {
@@ -92,14 +92,14 @@ function stepHover(event, canHover) {
 
 // src/kit/behavior/press.ts
 var PRESS_IDLE = { by: null };
-function stepPress(state, event, enabled) {
+function stepPress(state, event, enabled2) {
   switch (event.type) {
     case "down":
-      if (!enabled || state.by !== null) return { state, activated: false };
+      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: enabled };
+      return { state: PRESS_IDLE, activated: enabled2 };
     case "cancel":
       return { state: PRESS_IDLE, activated: false };
     case "leave":
@@ -178,6 +178,137 @@ function stepSpring(s, dt, response, damping, instant = 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 = () => ({
@@ -244,6 +375,19 @@ 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";
 }
@@ -301,7 +445,7 @@ function effectiveA11y(own) {
 
 // src/web/glass.ts
 async function attachControlGlass(el, params, stillWanted) {
-  const { attachGlass } = await import('vireglass/dom');
+  const { attachGlass, probeBackdrop } = await import('vireglass/dom');
   if (!stillWanted()) return null;
   const opts = {
     material: params.material,
@@ -312,6 +456,7 @@ async function attachControlGlass(el, params, stillWanted) {
     // 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 {
@@ -323,9 +468,16 @@ async function attachControlGlass(el, params, stillWanted) {
       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()
   };
 }
@@ -346,30 +498,37 @@ function watchCoarsePointer(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{display:inline-flex;vertical-align:middle}
-${HOST}{position:relative;--vk-press:0;--vk-hover:0;--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}
+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)*100%),transparent);
- text-shadow:0 0 calc(var(--vk-press)*var(--vk-defocus)*1px) currentColor;
+ -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);filter:blur(calc(var(--vk-press)*var(--vk-defocus)*1px))}
+ 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);
- 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))}
-${HOST}[data-frost][data-surface=glass]>button{color:oklab(from var(--vireglass-tint-color,#fff) calc(.95 - .87*clamp(0,(l + var(--vk-body-lift) - .6)*20,1)) 0 0)}
+ ${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)}
 
@@ -378,19 +537,64 @@ ${HOST}[data-surface=frosted]>button{
  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{color:inherit;background:color-mix(in srgb,Canvas 82%,currentColor)}
+${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{background:color-mix(in srgb,color-mix(in srgb,#fff calc((1 - var(--vireglass-ink,0))*100%),#000) 88%,transparent)}
+${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";
@@ -440,6 +644,8 @@ function createControlElementClass(kind, options = {}) {
     #slop = { x: 0, y: 0 };
     #morph = null;
     #sample = null;
+    #carried = null;
+    #hadStyle = { host: false, control: false };
     get a11y() {
       return this.#own;
     }
@@ -458,6 +664,14 @@ function createControlElementClass(kind, options = {}) {
       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;
@@ -465,6 +679,7 @@ function createControlElementClass(kind, options = {}) {
         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()));
@@ -477,11 +692,14 @@ function createControlElementClass(kind, options = {}) {
       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;
-      for (const name of ["data-vk", "data-surface", "data-glass", "data-frost", "data-size"]) this.removeAttribute(name);
+      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;
     }
@@ -516,6 +734,7 @@ function createControlElementClass(kind, options = {}) {
     }
     #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);
@@ -743,6 +962,7 @@ function createControlElementClass(kind, options = {}) {
         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"));
@@ -799,10 +1019,854 @@ function createControlElementClass(kind, options = {}) {
     }
   };
 }
+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;
@@ -813,10 +1877,12 @@ function defineVireElements(options = {}) {
   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;