vireuikit 0.6.0 → 0.7.0

package/dist/web.js

@@ -1,4 +1,4 @@
-import { CONTROL_IDLE, A11Y_NONE, pressResponse, POINTER_INPUT, createControlVisual, TOUCH_INPUT, CONTROL_SIZES, defaultSize, stepControl, minTarget, hitSlop, settleControlVisual, presentationFor, sameA11y, iconButtonSize, BUTTON_SIZES, visualAtomState, atomMaterial, stepControlVisual, atomBody, resolveA11y } from './chunk-I3BD3XGC.js';
+import { CONTROL_IDLE, A11Y_NONE, pressResponse, POINTER_INPUT, createControlVisual, TOUCH_INPUT, CONTROL_SIZES, defaultSize, stepControl, minTarget, hitSlop, settleControlVisual, presentationFor, sameA11y, iconButtonSize, BUTTON_SIZES, visualAtomState, atomMaterial, stepControlVisual, atomBody, MENU_CLOSED, createGrowthState, stepMenu, MENU_CORNERS, menuSize, menuPlacement, stepGrowth, growthPhase, menuSurfaceFrame, menuBody, menuMaterial, MENU_ITEM_FILL, resolveA11y } from './chunk-AR2AM3BR.js';
 import { VIREGLASS_CONTROL_MATERIAL } from 'vireglass';
 
 // src/web/a11y.ts
@@ -48,7 +48,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,
@@ -59,6 +59,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 {
@@ -70,9 +71,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()
   };
 }
@@ -93,30 +101,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)}
 
@@ -125,19 +140,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";
@@ -187,6 +247,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;
     }
@@ -205,6 +267,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;
@@ -212,6 +282,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()));
@@ -224,11 +295,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;
     }
@@ -263,6 +337,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);
@@ -490,6 +565,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"));
@@ -546,10 +622,705 @@ function createControlElementClass(kind, options = {}) {
     }
   };
 }
+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_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 last = this.#lastLens;
+      if (key.material === last.material && key.morph === last.morph && key.geometry === last.geometry) return;
+      const next = {};
+      if (key.geometry !== last.geometry) next.geometry = geometry;
+      if (key.material !== last.material) next.material = menuMaterial(VIREGLASS_CONTROL_MATERIAL, step);
+      if (key.morph !== last.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_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;
@@ -560,8 +1331,9 @@ 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 }));
 }
 
-export { BUTTON_TAG, ICON_BUTTON_TAG, STYLES, defineVireElements, getA11yOverride, setA11yOverride, systemA11y };
+export { BUTTON_TAG, ICON_BUTTON_TAG, MENU_TAG, STYLES, defineVireElements, getA11yOverride, setA11yOverride, systemA11y };
 //# sourceMappingURL=web.js.map
 //# sourceMappingURL=web.js.map