vireuikit 0.7.0 → 0.9.0

package/dist/web.cjs

@@ -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 mix2 = (key) => REST_BODY[key] + (PRESSED_BODY[key] - REST_BODY[key]) * on;
-  let alpha = mix2("alpha");
-  let white = mix2("white");
-  let lift = mix2("lift");
+  const mix3 = (key) => REST_BODY[key] + (PRESSED_BODY[key] - REST_BODY[key]) * on;
+  let alpha = mix3("alpha");
+  let white = mix3("white");
+  let lift = mix3("lift");
   if (state.disabled) alpha *= DISABLED_PRESENCE;
   if (frost) {
     const density = vireglass.applyAccessibility(vireglass.resolveOptics(base), {
@@ -79,6 +79,67 @@ function atomBody(base, state = ATOM_AT_REST, frost = false) {
   }
   return { alpha, white, lift };
 }
+var CONTROL_SIZES = ["touch", "small", "medium", "large", "xlarge"];
+var MIN_TOUCH_TARGET_DP = 44;
+var MIN_POINTER_TARGET_DP = 24;
+var capsule = (height, paddingX) => ({
+  height,
+  paddingX,
+  icon: Math.round(height / 2),
+  radius: height / 2,
+  shape: "capsule"
+});
+var rounded = (height, paddingX) => ({
+  height,
+  paddingX,
+  icon: Math.round(height / 2),
+  radius: height / 4,
+  shape: "rounded"
+});
+var BUTTON_SIZES = {
+  touch: capsule(44, 20),
+  small: rounded(24, 10),
+  medium: rounded(32, 14),
+  large: capsule(40, 18),
+  xlarge: capsule(48, 22)
+};
+function iconButtonSize(size) {
+  const spec = BUTTON_SIZES[size];
+  return { ...spec, width: spec.height, paddingX: 0 };
+}
+var MENU_PADDING = 0.3;
+function menuSize(size) {
+  const spec = BUTTON_SIZES[size];
+  const padding = Math.round(spec.height * MENU_PADDING);
+  return {
+    row: spec.height,
+    padding,
+    itemRadius: spec.radius,
+    radius: spec.radius + padding,
+    icon: spec.icon,
+    labelPad: spec.paddingX
+  };
+}
+function defaultSize(input) {
+  return input.touch ? "touch" : "medium";
+}
+function hitSlop(bodyDp, minTargetDp) {
+  return bodyDp >= minTargetDp ? 0 : (minTargetDp - bodyDp) / 2;
+}
+function minTarget(input) {
+  return input.touch ? MIN_TOUCH_TARGET_DP : MIN_POINTER_TARGET_DP;
+}
+
+// src/kit/adaptive/input.ts
+function sizeTier(input) {
+  return defaultSize({ touch: input.primary === "coarse" });
+}
+function hitTarget(input) {
+  return minTarget({ touch: input.anyCoarse });
+}
+function hoversWith(pointerType) {
+  return pointerType !== "touch";
+}
 
 // src/kit/behavior/focus.ts
 function stepFocus(event) {
@@ -108,8 +169,6 @@ function stepPress(state, event, enabled2) {
 }
 
 // src/kit/behavior/control.ts
-var TOUCH_INPUT = { hover: false };
-var POINTER_INPUT = { hover: true };
 var CONTROL_IDLE = {
   press: PRESS_IDLE,
   hovered: false,
@@ -208,7 +267,7 @@ function growthFrame(source, target, anchor, phase) {
   const len = Math.hypot(dx, dy) || 1;
   const sourceSize = vireglass.halfMinDp(source.geometry) * 2;
   const lift = DROP_LIFT * sourceSize;
-  const drop = {
+  const drop2 = {
     x: source.center.x + dx / len * lift,
     y: source.center.y + dy / len * lift
   };
@@ -227,13 +286,13 @@ function growthFrame(source, target, anchor, phase) {
   );
   const shrunk = {
     geometry: shrunkGeometry,
-    center: { x: mix(source.center.x, drop.x, a), y: mix(source.center.y, drop.y, a) }
+    center: { x: mix(source.center.x, drop2.x, a), y: mix(source.center.y, drop2.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 edgeX = mix(drop2.x + cornerX * (seed / 2), anchor.x, Math.min(b, 1));
+  const edgeY = mix(drop2.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 };
@@ -347,56 +406,6 @@ var SINKING = { grow: 0.06, defocus: 1 };
 function pressResponse(kind) {
   return atomLift(kind) === 1 ? LIFTING : SINKING;
 }
-var CONTROL_SIZES = ["touch", "small", "medium", "large", "xlarge"];
-var MIN_TOUCH_TARGET_DP = 44;
-var MIN_POINTER_TARGET_DP = 24;
-var capsule = (height, paddingX) => ({
-  height,
-  paddingX,
-  icon: Math.round(height / 2),
-  radius: height / 2,
-  shape: "capsule"
-});
-var rounded = (height, paddingX) => ({
-  height,
-  paddingX,
-  icon: Math.round(height / 2),
-  radius: height / 4,
-  shape: "rounded"
-});
-var BUTTON_SIZES = {
-  touch: capsule(44, 20),
-  small: rounded(24, 10),
-  medium: rounded(32, 14),
-  large: capsule(40, 18),
-  xlarge: capsule(48, 22)
-};
-function iconButtonSize(size) {
-  const spec = BUTTON_SIZES[size];
-  return { ...spec, width: spec.height, paddingX: 0 };
-}
-var MENU_PADDING = 0.3;
-function menuSize(size) {
-  const spec = BUTTON_SIZES[size];
-  const padding = Math.round(spec.height * MENU_PADDING);
-  return {
-    row: spec.height,
-    padding,
-    itemRadius: spec.radius,
-    radius: spec.radius + padding,
-    icon: spec.icon,
-    labelPad: spec.paddingX
-  };
-}
-function defaultSize(input) {
-  return input.touch ? "touch" : "medium";
-}
-function hitSlop(bodyDp, minTargetDp) {
-  return bodyDp >= minTargetDp ? 0 : (minTargetDp - bodyDp) / 2;
-}
-function minTarget(input) {
-  return input.touch ? MIN_TOUCH_TARGET_DP : MIN_POINTER_TARGET_DP;
-}
 
 // src/web/a11y.ts
 var QUERIES = {
@@ -443,6 +452,184 @@ function effectiveA11y(own) {
   return resolveA11y(systemA11y(), merged);
 }
 
+// src/kit/geometry.ts
+function intersectRect(a, b) {
+  const x = Math.max(a.x, b.x);
+  const y = Math.max(a.y, b.y);
+  const right = Math.min(a.x + a.width, b.x + b.width);
+  const bottom = Math.min(a.y + a.height, b.y + b.height);
+  return right > x && bottom > y ? { x, y, width: right - x, height: bottom - y } : null;
+}
+
+// src/kit/adaptive/context.ts
+var POSTURE_FLAT = { kind: "flat" };
+function postureFromSegments(window2, segments) {
+  if (segments.length !== 2) return POSTURE_FLAT;
+  const [a, b] = [...segments].sort((p, q) => p.x - q.x || p.y - q.y);
+  const gapX = b.x - (a.x + a.width);
+  if (gapX >= 0 && a.y < b.y + b.height && b.y < a.y + a.height) {
+    return { kind: "book", fold: { bounds: { x: a.x + a.width, y: 0, width: gapX, height: window2.height }, occluding: gapX > 0 } };
+  }
+  const [top, bottom] = [...segments].sort((p, q) => p.y - q.y);
+  const gapY = bottom.y - (top.y + top.height);
+  if (gapY >= 0) {
+    return { kind: "tabletop", fold: { bounds: { x: 0, y: top.y + top.height, width: window2.width, height: gapY }, occluding: gapY > 0 } };
+  }
+  return POSTURE_FLAT;
+}
+var area = (r) => r ? r.width * r.height : 0;
+function segmentOf(box2, segments) {
+  const cx = box2.x + box2.width / 2;
+  const cy = box2.y + box2.height / 2;
+  const holding = segments.find((s) => cx >= s.x && cx < s.x + s.width && cy >= s.y && cy < s.y + s.height);
+  if (holding) return holding;
+  let best;
+  let most = 0;
+  for (const s of segments) {
+    const overlap = area(intersectRect(s, box2));
+    if (overlap > most) {
+      most = overlap;
+      best = s;
+    }
+  }
+  if (best) return best;
+  let nearest;
+  let distance = Number.POSITIVE_INFINITY;
+  for (const s of segments) {
+    const d = Math.hypot(s.x + s.width / 2 - cx, s.y + s.height / 2 - cy);
+    if (d < distance) {
+      distance = d;
+      nearest = s;
+    }
+  }
+  return nearest;
+}
+
+// src/web/environment.ts
+var QUERIES2 = {
+  coarse: "(pointer: coarse)",
+  anyCoarse: "(any-pointer: coarse)",
+  anyHover: "(any-hover: hover)"
+};
+var media = (query) => typeof matchMedia !== "undefined" && matchMedia(query).matches;
+var keyboardSeen = false;
+var inputOverride = {};
+var inputListeners = /* @__PURE__ */ new Set();
+var viewportOverride = null;
+var viewportListeners = /* @__PURE__ */ new Set();
+function systemInput() {
+  if (typeof matchMedia === "undefined") return { primary: "fine", anyCoarse: false, hover: true, keyboard: keyboardSeen };
+  const coarse = media(QUERIES2.coarse);
+  return {
+    primary: coarse ? "coarse" : "fine",
+    anyCoarse: coarse || media(QUERIES2.anyCoarse),
+    hover: media(QUERIES2.anyHover),
+    keyboard: keyboardSeen
+  };
+}
+function setInputOverride(next) {
+  inputOverride = { ...inputOverride, ...next };
+  for (const listener of [...inputListeners]) listener();
+}
+function getInputOverride() {
+  return inputOverride;
+}
+function effectiveInput() {
+  const system = systemInput();
+  return {
+    primary: inputOverride.primary ?? system.primary,
+    anyCoarse: inputOverride.anyCoarse ?? system.anyCoarse,
+    hover: inputOverride.hover ?? system.hover,
+    keyboard: inputOverride.keyboard ?? system.keyboard
+  };
+}
+var isEditable = (target) => target instanceof Element && target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])') !== null;
+function onKey(e) {
+  const target = e.composedPath()[0] ?? e.target;
+  if (keyboardSeen || e.isComposing || e.key === "Unidentified" || e.key === "Process" || isEditable(target)) return;
+  keyboardSeen = true;
+  for (const listener of [...inputListeners]) listener();
+}
+function watchInput(onChange) {
+  inputListeners.add(onChange);
+  const lists = typeof matchMedia === "undefined" ? [] : Object.values(QUERIES2).map((q) => matchMedia(q));
+  for (const list of lists) list.addEventListener("change", onChange);
+  if (inputListeners.size === 1 && typeof window !== "undefined") window.addEventListener("keydown", onKey, true);
+  return () => {
+    inputListeners.delete(onChange);
+    for (const list of lists) list.removeEventListener("change", onChange);
+    if (inputListeners.size === 0 && typeof window !== "undefined") window.removeEventListener("keydown", onKey, true);
+  };
+}
+var pointerLayers = ({ primary, anyCoarse, hover }) => `${primary} ${anyCoarse} ${hover}`;
+function watchPointerInput(onChange) {
+  let last2 = pointerLayers(effectiveInput());
+  return watchInput(() => {
+    const next = pointerLayers(effectiveInput());
+    if (next === last2) return;
+    last2 = next;
+    onChange();
+  });
+}
+function setViewportOverride(next) {
+  viewportOverride = next;
+  for (const listener of [...viewportListeners]) listener();
+}
+function viewportSegments() {
+  if (viewportOverride?.root.isConnected) {
+    const r = viewportOverride.root.getBoundingClientRect();
+    const viewport2 = { x: r.x, y: r.y, width: r.width, height: r.height };
+    const local = viewportOverride.segments ?? [{ x: 0, y: 0, width: r.width, height: r.height }];
+    return { viewport: viewport2, segments: local.map((s) => ({ x: s.x + r.x, y: s.y + r.y, width: s.width, height: s.height })) };
+  }
+  const root = typeof document === "undefined" ? null : document.documentElement;
+  const viewport = { x: 0, y: 0, width: root?.clientWidth ?? 0, height: root?.clientHeight ?? 0 };
+  const api = typeof window === "undefined" ? null : window.viewport?.segments;
+  const segments = api && api.length > 1 ? api.map((s) => ({ x: s.x, y: s.y, width: s.width, height: s.height })) : [viewport];
+  return { viewport, segments };
+}
+function watchViewport(onChange) {
+  viewportListeners.add(onChange);
+  if (typeof window !== "undefined") window.addEventListener("resize", onChange);
+  return () => {
+    viewportListeners.delete(onChange);
+    if (typeof window !== "undefined") window.removeEventListener("resize", onChange);
+  };
+}
+function contextOf(root) {
+  const r = root.getBoundingClientRect();
+  const window2 = { width: r.width, height: r.height };
+  const box2 = { x: r.x, y: r.y, width: r.width, height: r.height };
+  const local = viewportSegments().segments.map((s) => intersectRect(s, box2)).filter((s) => s !== null).map((s) => ({ x: s.x - r.x, y: s.y - r.y, width: s.width, height: s.height }));
+  return {
+    window: window2,
+    input: effectiveInput(),
+    posture: postureFromSegments(window2, local),
+    reduceMotion: effectiveA11y({}).reduceMotion
+  };
+}
+function watchAdaptiveContext(root, onChange) {
+  let last2 = "";
+  const emit = () => {
+    if (!root.isConnected) return;
+    const ctx = contextOf(root);
+    const key = JSON.stringify(ctx);
+    if (key === last2) return;
+    last2 = key;
+    onChange(ctx);
+  };
+  const cleanups = [watchInput(emit), watchViewport(emit), watchSystemA11y(emit), watchA11yOverride(emit)];
+  if (typeof ResizeObserver !== "undefined") {
+    const observer = new ResizeObserver(emit);
+    observer.observe(root);
+    cleanups.push(() => observer.disconnect());
+  }
+  emit();
+  return () => {
+    for (const cleanup of cleanups) cleanup();
+  };
+}
+
 // src/web/glass.ts
 async function attachControlGlass(el, params, stillWanted) {
   const { attachGlass, probeBackdrop } = await import('vireglass/dom');
@@ -482,17 +669,618 @@ async function attachControlGlass(el, params, stillWanted) {
   };
 }
 
-// src/web/input.ts
-var COARSE = "(pointer: coarse)";
-function isCoarsePointer() {
-  return typeof matchMedia !== "undefined" && matchMedia(COARSE).matches;
+// src/kit/adaptive/classes.ts
+var WIDTH_CLASSES = ["compact", "medium", "expanded", "large", "xlarge"];
+var WIDTH_BREAKPOINTS = { medium: 600, expanded: 840, large: 1200, xlarge: 1600 };
+var HEIGHT_BREAKPOINTS = { medium: 480, expanded: 900 };
+function widthClass(width) {
+  if (!(width >= WIDTH_BREAKPOINTS.medium)) return "compact";
+  if (width < WIDTH_BREAKPOINTS.expanded) return "medium";
+  if (width < WIDTH_BREAKPOINTS.large) return "expanded";
+  return width < WIDTH_BREAKPOINTS.xlarge ? "large" : "xlarge";
 }
-function watchCoarsePointer(onChange) {
-  if (typeof matchMedia === "undefined") return () => {
+function heightClass(height) {
+  if (!(height >= HEIGHT_BREAKPOINTS.medium)) return "compact";
+  return height < HEIGHT_BREAKPOINTS.expanded ? "medium" : "expanded";
+}
+function classifyWindow(size) {
+  return { width: widthClass(size.width), height: heightClass(size.height) };
+}
+function widthAtLeast(value, minimum) {
+  return WIDTH_CLASSES.indexOf(value) >= WIDTH_CLASSES.indexOf(minimum);
+}
+
+// src/kit/adaptive/navigation.ts
+var BAR_SLOTS = 5;
+function formFor(ctx, spec) {
+  const { width, height } = classifyWindow(ctx.window);
+  if (ctx.posture.kind === "tabletop") return "bar";
+  if (widthAtLeast(width, "large")) return spec.sidebarCollapsed ? "rail" : "sidebar";
+  if (height === "compact") return "rail";
+  if (width === "compact") return "bar";
+  if (width === "medium" && (spec.panes ?? 1) > 1 && ctx.posture.kind !== "book") return "bar";
+  return "rail";
+}
+function navigationForm(ctx, spec) {
+  const form = formFor(ctx, spec);
+  const width = classifyWindow(ctx.window).width;
+  const large = widthAtLeast(width, "large");
+  const slots = BAR_SLOTS - (spec.search ? 1 : 0);
+  const primary = Math.max(0, Math.min(spec.primary, slots));
+  const secondary = Math.max(0, spec.secondary ?? 0) + Math.max(0, spec.primary - primary);
+  let search = null;
+  if (spec.search) {
+    const shortcut = large || ctx.input.keyboard;
+    if (large) search = { form: "field", place: form === "sidebar" ? "sidebar" : "toolbar", shortcut };
+    else search = form === "bar" ? { form: "button", place: "bar", shortcut } : { form: "item", place: "rail", shortcut };
+  }
+  return {
+    form,
+    edge: form === "bar" ? "bottom" : "leading",
+    primary,
+    secondary,
+    secondaryVisible: form === "sidebar",
+    search,
+    expandable: form !== "rail" ? null : large ? "beside" : width === "expanded" ? "over" : null,
+    collapsible: form === "sidebar"
+  };
+}
+function bottomAccessory(nav, state = {}) {
+  return state.barMinimized ? { placement: "in-bar", compact: true } : { placement: "above-bar", compact: false };
+}
+
+// src/kit/nav/layout.ts
+var NAV_SIZES = {
+  bar: { height: 56, item: 74, minItem: 44, inset: 3, margin: 16, searchGap: 8, minimized: 44 },
+  rail: { width: 80, item: 56, gap: 4, padding: 8, margin: 8, head: 48 },
+  sidebar: { width: 280, row: { touch: 44, pointer: 36 }, padding: 8, margin: 8, head: 48, separator: 12 },
+  accessory: { height: 48, gap: 8, inline: 44, content: 56, margin: 8 },
+  lens: { inflate: 6 },
+  toggle: 44
+};
+var box = (x, y, width, height, radius) => ({ x, y, width, height, radius });
+function barLayout(input, items, minimized) {
+  const { bar, accessory } = NAV_SIZES;
+  const { width, height } = input.window;
+  const bottom = Math.max(input.bottomInset ?? 0, bar.margin);
+  const hasSearch = input.search?.form === "button";
+  const placement = input.accessory ? bottomAccessory({ }, { barMinimized: minimized }).placement : null;
+  const selected = input.selected >= 0 && input.selected < items ? input.selected : -1;
+  if (minimized) {
+    const centre = height - bottom - bar.height / 2;
+    const d = bar.minimized;
+    const body2 = box(bar.margin, centre - d / 2, d, d, d / 2);
+    const search2 = hasSearch ? box(width - bar.margin - d, body2.y, d, d, d / 2) : null;
+    let acc2 = null;
+    if (placement) {
+      const x2 = body2.x + d + accessory.gap;
+      const right = search2 ? search2.x - accessory.gap : width - bar.margin;
+      acc2 = box(x2, body2.y, Math.max(0, right - x2), accessory.inline, accessory.inline / 2);
+    }
+    return {
+      form: "bar",
+      minimized: true,
+      body: body2,
+      items: Array.from({ length: items }, () => ({ ...body2 })),
+      pill: selected >= 0 ? { ...body2 } : null,
+      search: search2,
+      accessory: acc2,
+      toggle: null,
+      accessoryPlacement: placement,
+      insets: { bottom: height - body2.y, start: 0 }
+    };
+  }
+  const searchBlock = hasSearch ? bar.height + bar.searchGap : 0;
+  const fit = items > 0 ? (width - 2 * bar.margin - searchBlock - 2 * bar.inset) / items : bar.item;
+  const itemWidth = Math.max(bar.minItem, Math.min(bar.item, fit));
+  const bodyWidth = items * itemWidth + 2 * bar.inset;
+  const x = Math.max(bar.margin, (width - bodyWidth - searchBlock) / 2);
+  const body = box(x, height - bottom - bar.height, bodyWidth, bar.height, bar.height / 2);
+  const cellHeight = bar.height - 2 * bar.inset;
+  const cells = Array.from(
+    { length: items },
+    (_, i) => box(x + bar.inset + i * itemWidth, body.y + bar.inset, itemWidth, cellHeight, cellHeight / 2)
+  );
+  const search = hasSearch ? box(x + bodyWidth + bar.searchGap, body.y, bar.height, bar.height, bar.height / 2) : null;
+  let acc = null;
+  if (placement) {
+    acc = box(body.x, body.y - accessory.gap - accessory.height, bodyWidth + searchBlock, accessory.height, accessory.height / 2);
+  }
+  return {
+    form: "bar",
+    minimized: false,
+    body,
+    items: cells,
+    pill: selected >= 0 ? { ...cells[selected] } : null,
+    search,
+    accessory: acc,
+    toggle: null,
+    accessoryPlacement: placement,
+    insets: { bottom: height - body.y + (acc ? accessory.height + accessory.gap : 0), start: 0 }
+  };
+}
+function contentAccessory(input, start) {
+  const { accessory } = NAV_SIZES;
+  const base = input.bottomInset ?? 0;
+  if (!input.accessory) return { box: null, bottom: base };
+  const bottom = Math.max(base, accessory.margin);
+  const width = Math.max(0, input.window.width - start - accessory.margin);
+  const acc = box(start, input.window.height - bottom - accessory.content, width, accessory.content, accessory.content / 2);
+  return { box: acc, bottom: bottom + accessory.content };
+}
+function headToggle(body, padding, head, dx) {
+  const d = NAV_SIZES.toggle;
+  return box(body.x + dx, body.y + padding + (head - d) / 2, d, d, d / 2);
+}
+function inset(b, d) {
+  return box(b.x + d, b.y + d, b.width - 2 * d, b.height - 2 * d, (Math.min(b.width, b.height) - 2 * d) / 2);
+}
+function railLayout(input, items) {
+  const { rail, bar } = NAV_SIZES;
+  const hasSearch = input.search?.form === "item";
+  const n = items + (hasSearch ? 1 : 0);
+  const head = input.toggle ? rail.head : 0;
+  const natural = rail.padding * 2 + head + n * rail.item + Math.max(n - 1, 0) * rail.gap;
+  const height = Math.min(natural, Math.max(input.window.height - 2 * rail.margin, 0));
+  const body = box(rail.margin, rail.margin, rail.width, height, 28);
+  const cell = (i) => box(body.x + rail.padding, body.y + rail.padding + head + i * (rail.item + rail.gap), rail.width - 2 * rail.padding, rail.item, 24);
+  const cells = Array.from({ length: items }, (_, i) => cell(i));
+  const selected = input.selected >= 0 && input.selected < items ? input.selected : -1;
+  const start = body.x + body.width + rail.margin;
+  const acc = contentAccessory(input, start);
+  return {
+    form: "rail",
+    minimized: false,
+    body,
+    items: cells,
+    pill: selected >= 0 ? inset(cells[selected], bar.inset) : null,
+    search: hasSearch ? cell(items) : null,
+    accessory: acc.box,
+    toggle: input.toggle ? headToggle(body, rail.padding, rail.head, (rail.width - NAV_SIZES.toggle) / 2) : null,
+    accessoryPlacement: acc.box ? "content-bottom" : null,
+    insets: { bottom: acc.bottom, start }
+  };
+}
+function sidebarLayout(input, items, secondary) {
+  const { sidebar } = NAV_SIZES;
+  const row = sidebar.row[input.tier];
+  const body = box(sidebar.margin, sidebar.margin, sidebar.width, input.window.height - 2 * sidebar.margin, 24);
+  const rowWidth = sidebar.width - 2 * sidebar.padding;
+  const rowAt = (y2) => box(body.x + sidebar.padding, y2, rowWidth, row, row / 2);
+  let y = body.y + sidebar.padding + (input.toggle ? sidebar.head : 0);
+  let search = null;
+  if (input.search?.form === "field") {
+    search = rowAt(y);
+    y += row;
+  }
+  const cells = [];
+  for (let i = 0; i < items; i += 1, y += row) cells.push(rowAt(y));
+  if (secondary > 0) y += sidebar.separator;
+  for (let i = 0; i < secondary; i += 1, y += row) cells.push(rowAt(y));
+  const selected = input.selected >= 0 && input.selected < cells.length ? input.selected : -1;
+  const start = body.x + body.width + sidebar.margin;
+  const acc = contentAccessory(input, start);
+  return {
+    form: "sidebar",
+    minimized: false,
+    body,
+    items: cells,
+    pill: selected >= 0 ? { ...cells[selected] } : null,
+    search,
+    accessory: acc.box,
+    toggle: input.toggle ? headToggle(body, sidebar.padding, sidebar.head, sidebar.width - sidebar.padding - NAV_SIZES.toggle) : null,
+    accessoryPlacement: acc.box ? "content-bottom" : null,
+    insets: { bottom: acc.bottom, start }
   };
-  const list = matchMedia(COARSE);
-  list.addEventListener("change", onChange);
-  return () => list.removeEventListener("change", onChange);
+}
+function navLayout(input) {
+  const items = Math.max(0, Math.floor(input.items));
+  const secondary = Math.max(0, Math.floor(input.secondary));
+  if (input.form === "bar") return barLayout(input, items, !!input.minimized);
+  return input.form === "rail" ? railLayout(input, items) : sidebarLayout(input, items, secondary);
+}
+
+// src/kit/nav/drag.ts
+var MAX_STRETCH = 0.25;
+var SATURATION_SPEED = 1500;
+var STRETCH_TAU = 0.05;
+var OVERHANG = 4;
+var LAND = { response: 0.2, damping: 0.8 };
+var LIFT = { response: 0.2, damping: 1 };
+var createNavDrag = () => ({
+  active: false,
+  x: { x: 0, v: 0, target: 0 },
+  lift: { x: 0, v: 0, target: 0 },
+  stretch: 0,
+  index: 0,
+  lastX: 0
+});
+var draggable = (layout) => layout.form === "bar" && !layout.minimized && layout.items.length > 0;
+function lensSize(layout) {
+  const cell = layout.items[0];
+  const pad = 2 * NAV_SIZES.lens.inflate;
+  return { width: cell.width + pad, height: cell.height + pad };
+}
+function clampCentre(layout, x) {
+  const half = lensSize(layout).width / 2;
+  const { body } = layout;
+  return Math.min(Math.max(x, body.x + half - OVERHANG), body.x + body.width - half + OVERHANG);
+}
+function indexAt(layout, x) {
+  const first2 = layout.items[0];
+  const i = Math.floor((x - first2.x) / first2.width);
+  return Math.min(Math.max(i, 0), layout.items.length - 1);
+}
+var centreOf = (layout, index) => layout.items[index].x + layout.items[index].width / 2;
+function drop(state) {
+  state.active = false;
+  state.lift.x = 0;
+  state.lift.v = 0;
+  state.lift.target = 0;
+}
+function settleTowards(state, layout, index) {
+  state.active = false;
+  state.index = index;
+  state.x.target = centreOf(layout, index);
+  state.lift.target = 0;
+}
+function pressNavDrag(state, layout, pointerX) {
+  if (!draggable(layout)) return;
+  const x = clampCentre(layout, pointerX);
+  state.active = true;
+  state.x.x = x;
+  state.x.v = 0;
+  state.x.target = x;
+  state.lift.target = 1;
+  state.stretch = 0;
+  state.lastX = pointerX;
+  state.index = indexAt(layout, x);
+}
+function moveNavDrag(state, layout, pointerX, dt) {
+  if (!state.active || !draggable(layout)) return;
+  const x = clampCentre(layout, pointerX);
+  state.x.x = x;
+  state.x.v = 0;
+  state.x.target = x;
+  const speed = dt > 0 ? Math.abs(pointerX - state.lastX) / dt : 0;
+  const goal = MAX_STRETCH * Math.min(speed / SATURATION_SPEED, 1);
+  state.stretch += (goal - state.stretch) * (dt > 0 ? 1 - Math.exp(-dt / STRETCH_TAU) : 1);
+  state.lastX = pointerX;
+  state.index = indexAt(layout, x);
+}
+function releaseNavDrag(state, layout) {
+  if (!draggable(layout)) {
+    drop(state);
+    return state.index;
+  }
+  const index = indexAt(layout, state.x.x);
+  settleTowards(state, layout, index);
+  return index;
+}
+function cancelNavDrag(state, layout, selected) {
+  if (!draggable(layout)) {
+    drop(state);
+    return;
+  }
+  const index = selected >= 0 && selected < layout.items.length ? selected : indexAt(layout, state.x.x);
+  settleTowards(state, layout, index);
+}
+function stepNavDrag(state, dt, reduceMotion = false) {
+  let moving = state.active;
+  if (state.stretch > 0) {
+    state.stretch *= Math.exp(-Math.max(dt, 0) / STRETCH_TAU);
+    if (reduceMotion || state.stretch < 1e-3) state.stretch = 0;
+    else moving = true;
+  }
+  if (!state.active && stepSpring(state.x, dt, LAND.response, LAND.damping, reduceMotion)) moving = true;
+  if (stepSpring(state.lift, dt, LIFT.response, LIFT.damping, reduceMotion)) moving = true;
+  return moving;
+}
+function navDragFrame(state, layout) {
+  if (!draggable(layout)) return null;
+  const lift = Math.min(Math.max(state.lift.x, 0), 1);
+  if (!state.active && lift === 0 && state.x.x === state.x.target) return null;
+  const size = lensSize(layout);
+  const width = size.width * (1 + state.stretch);
+  const height = size.height * (1 - state.stretch / 2);
+  const cy = layout.body.y + layout.body.height / 2;
+  return {
+    lens: { x: state.x.x - width / 2, y: cy - height / 2, width, height, radius: height / 2 },
+    lift,
+    hover: indexAt(layout, state.x.x)
+  };
+}
+
+// src/kit/nav/form.ts
+var SEARCH = {
+  bar: { form: "button", place: "bar" },
+  rail: { form: "item", place: "rail" },
+  sidebar: { form: "field", place: "sidebar" }
+};
+function fixedNavigationForm(nav, form) {
+  if (nav.form === form) return nav;
+  return {
+    ...nav,
+    form,
+    edge: form === "bar" ? "bottom" : "leading",
+    secondaryVisible: form === "sidebar",
+    search: nav.search ? { ...nav.search, ...SEARCH[form] } : null,
+    expandable: form === "rail" ? nav.expandable : null,
+    collapsible: form === "sidebar"
+  };
+}
+
+// src/kit/nav/minimize.ts
+var MINIMIZE_THRESHOLD = 24;
+var MINIMIZE_JITTER = 4;
+var createMinimize = (scrollTop = 0) => ({ minimized: false, run: 0, last: scrollTop });
+function stepMinimize(state, scrollTop) {
+  const delta = scrollTop - state.last;
+  state.last = scrollTop;
+  if (scrollTop <= 0) {
+    state.minimized = false;
+    state.run = 0;
+    return false;
+  }
+  if (delta === 0) return state.minimized;
+  const along2 = Math.sign(delta) === Math.sign(state.run) || Math.abs(delta) < MINIMIZE_JITTER;
+  state.run = along2 ? state.run + delta : delta;
+  if (state.run >= MINIMIZE_THRESHOLD) state.minimized = true;
+  else if (state.run <= -MINIMIZE_THRESHOLD) state.minimized = false;
+  return state.minimized;
+}
+var clampScrollTop = (scrollTop, scrollHeight, clientHeight) => Math.min(Math.max(scrollTop, 0), Math.max(scrollHeight - clientHeight, 0));
+function expandMinimize(state) {
+  state.minimized = false;
+  state.run = 0;
+}
+
+// src/kit/adaptive/form-morph.ts
+var FORM_MORPH_TIMING = { response: DEFAULT_GROWTH_TIMING.growOpen, damping: 1 };
+var createFormMorph = () => ({ t: { x: 0, v: 0, target: 0 }, fromInk: 1 });
+function stepFormMorph(state, dt, toward, instant = false) {
+  state.t.target = toward;
+  return stepSpring(state.t, dt, FORM_MORPH_TIMING.response, FORM_MORPH_TIMING.damping, instant);
+}
+var OUT_END = 0.45;
+var IN_START = 0.55;
+function formMorphFrame(from, to, state) {
+  const t = Math.min(Math.max(state.t.x, 0), 1);
+  const mix3 = (a, b) => a + (b - a) * t;
+  return {
+    box: {
+      x: mix3(from.x, to.x),
+      y: mix3(from.y, to.y),
+      width: mix3(from.width, to.width),
+      height: mix3(from.height, to.height),
+      radius: mix3(from.radius, to.radius)
+    },
+    ink: inkAt(state, t),
+    showing: t < 0.5 ? "from" : "to"
+  };
+}
+function inkAt(state, t) {
+  return { outgoing: (state.fromInk ?? 1) * (1 - smoothstep(0, OUT_END, t)), incoming: smoothstep(IN_START, 1, t) };
+}
+
+// src/kit/nav/morph.ts
+var NAV_MORPH_TIMING = { response: 1.06, damping: 1 };
+var NAV_MINIMIZE_TIMING = FORM_MORPH_TIMING;
+var LIFT_END = 0.12;
+var CONTRACT = [0.08, 0.38];
+var TRAVEL = [0.36, 0.56];
+var GROW = [0.52, 0.86];
+var SETTLE_START = 0.82;
+var INK_OUT = [0.08, 0.28];
+var INK_IN = [0.62, 0.86];
+var SWAP_AT = 0.46;
+var SMOOTHING = 24;
+var SEED = 8;
+var STAND_IN = 44;
+var clamp01 = (x) => Math.min(Math.max(x, 0), 1);
+var mix2 = (a, b, t) => a + (b - a) * t;
+var mixBox = (a, b, t) => ({
+  x: mix2(a.x, b.x, t),
+  y: mix2(a.y, b.y, t),
+  width: mix2(a.width, b.width, t),
+  height: mix2(a.height, b.height, t),
+  radius: mix2(a.radius, b.radius, t)
+});
+var inflate = (b, d) => ({
+  x: b.x - d,
+  y: b.y - d,
+  width: b.width + 2 * d,
+  height: b.height + 2 * d,
+  radius: b.radius + d
+});
+var centred = (cx, cy, size) => ({ x: cx - size / 2, y: cy - size / 2, width: size, height: size, radius: size / 2 });
+var trailingEnd = (body, size) => centred(body.x + body.width - body.height / 2, body.y + body.height / 2, size);
+var pillOrStandIn = (layout) => layout.pill ?? centred(layout.body.x + layout.body.width / 2, layout.body.y + layout.body.height / 2, STAND_IN);
+var separateSearch = (layout) => layout.form === "bar" ? layout.search : null;
+function restFrame(layout, side) {
+  const search = separateSearch(layout);
+  return {
+    phase: "rest",
+    body: layout.body,
+    second: search ? { box: search, smoothing: 0 } : null,
+    lens: null,
+    ink: side === "from" ? { outgoing: 1, incoming: 0 } : { outgoing: 0, incoming: 1 },
+    showing: side
+  };
+}
+var layoutOrigin = (layout) => {
+  const search = separateSearch(layout);
+  return {
+    body: layout.body,
+    second: search ? { box: search, smoothing: 0 } : null,
+    lens: { box: pillOrStandIn(layout), lift: 0 },
+    ink: 1,
+    lead: 0,
+    hold: null
+  };
+};
+var frameOrigin = (frame) => ({
+  body: frame.body,
+  second: frame.second,
+  lens: frame.lens ?? { box: centred(frame.body.x + frame.body.width / 2, frame.body.y + frame.body.height / 2, STAND_IN), lift: 0 },
+  ink: Math.max(frame.ink.outgoing, frame.ink.incoming),
+  lead: CONTRACT[0],
+  hold: null
+});
+function phaseAt(tau) {
+  if (tau < CONTRACT[0]) return "lift";
+  if (tau < TRAVEL[0]) return "contract";
+  if (tau < GROW[0]) return "travel";
+  return tau < SETTLE_START ? "grow" : "settle";
+}
+function lensFrame(o, to, t) {
+  const tau = o.lead + (1 - o.lead) * t;
+  const u = smoothstep(o.lead, LIFT_END, tau);
+  const base = inflate(o.lens.box, NAV_SIZES.lens.inflate * (1 - o.lens.lift) * u);
+  const lift = mix2(o.lens.lift, 1, u);
+  const toPill = pillOrStandIn(to);
+  const k = smoothstep(TRAVEL[0], TRAVEL[1], tau);
+  const kk = o.hold ? clamp01((k - o.hold.k0) / (1 - o.hold.k0)) : k;
+  const travelling = mixBox(o.hold?.box ?? base, inflate(toPill, NAV_SIZES.lens.inflate), kk);
+  const c = smoothstep(CONTRACT[0], CONTRACT[1], tau);
+  const g = smoothstep(GROW[0], GROW[1], tau);
+  const s = smoothstep(SETTLE_START, 1, tau);
+  const contracted = mixBox(o.body, travelling, c);
+  const body = mixBox(contracted, to.body, g);
+  let second = null;
+  const budding = separateSearch(to);
+  if (o.second && c < 1) {
+    second = {
+      box: mixBox(o.second.box, trailingEnd(contracted, 0), c),
+      smoothing: mix2(o.second.smoothing, SMOOTHING, c)
+    };
+  } else if (budding && g > 0) {
+    second = { box: mixBox(trailingEnd(body, SEED), budding, g), smoothing: SMOOTHING * (1 - g) };
+  }
+  return {
+    phase: phaseAt(tau),
+    body,
+    second,
+    lens: { box: mixBox(travelling, toPill, s), lift: lift * (1 - s) },
+    ink: {
+      outgoing: o.ink * (1 - smoothstep(INK_OUT[0], INK_OUT[1], tau)),
+      incoming: smoothstep(INK_IN[0], INK_IN[1], tau)
+    },
+    showing: tau < SWAP_AT ? "from" : "to"
+  };
+}
+function contractFrame(o, to, t) {
+  const body = mixBox(o.body, to.body, t);
+  const target = separateSearch(to);
+  let second = null;
+  if (o.second && target) {
+    second = { box: mixBox(o.second.box, target, t), smoothing: mix2(o.second.smoothing, 0, t) };
+  } else if (o.second) {
+    second = { box: mixBox(o.second.box, trailingEnd(body, 0), t), smoothing: mix2(o.second.smoothing, SMOOTHING, t) };
+  } else if (target) {
+    second = { box: mixBox(trailingEnd(body, SEED), target, t), smoothing: SMOOTHING * (1 - t) };
+  }
+  return {
+    phase: "contract",
+    body,
+    second,
+    lens: null,
+    ink: { outgoing: o.ink * (1 - smoothstep(0, 0.45, t)), incoming: smoothstep(0.55, 1, t) },
+    showing: t < 0.5 ? "from" : "to"
+  };
+}
+var frameFrom = (o, to, t, via) => via === "lens" ? lensFrame(o, to, t) : contractFrame(o, to, t);
+function navMorphFrame(from, to, t, via = "lens") {
+  if (t <= 0) return restFrame(from, "from");
+  if (t >= 1) return restFrame(to, "to");
+  return frameFrom(layoutOrigin(from), to, t, via);
+}
+var createNavMorph = (at) => ({
+  t: { x: 0, v: 0, target: 0 },
+  from: at,
+  to: at,
+  via: "lens",
+  pivot: null,
+  pivotAt: 0
+});
+var sameForm = (a, b) => a.form === b.form && a.minimized === b.minimized;
+var atRest = (s) => s.t.v === 0 && s.t.x === s.t.target && (s.t.x === 0 || s.t.x === 1);
+function currentNavFrame(state) {
+  const x = clamp01(state.t.x);
+  if (x >= 1) return restFrame(state.to, "to");
+  const { pivot } = state;
+  if (!pivot) return navMorphFrame(state.from, state.to, x, state.via);
+  if (state.pivotAt > 0 && pivot.lens) {
+    const origin = layoutOrigin(state.from);
+    origin.hold = { box: pivot.lens.box, k0: smoothstep(TRAVEL[0], TRAVEL[1], state.pivotAt) };
+    return lensFrame(origin, state.to, x);
+  }
+  return frameFrom(frameOrigin(pivot), state.to, x, state.via);
+}
+function aimNavMorph(state, next, via = "lens") {
+  const { t } = state;
+  if (atRest(state)) {
+    const current = t.x >= 1 ? state.to : state.from;
+    if (sameForm(current, next)) {
+      if (t.x >= 1) state.to = next;
+      else state.from = next;
+      state.pivot = null;
+      return;
+    }
+    state.from = current;
+    state.to = next;
+    state.via = via;
+    state.pivot = null;
+    state.pivotAt = 0;
+    t.x = 0;
+    t.v = 0;
+    t.target = 1;
+    return;
+  }
+  if (!state.pivot) {
+    if (sameForm(next, state.from)) {
+      state.from = next;
+      t.target = 0;
+      return;
+    }
+    if (sameForm(next, state.to)) {
+      state.to = next;
+      t.target = 1;
+      return;
+    }
+    const x = clamp01(t.x);
+    if (via === "lens" && state.via === "lens" && x < GROW[0]) {
+      if (x >= TRAVEL[0]) {
+        state.pivot = currentNavFrame(state);
+        state.pivotAt = x;
+      }
+      state.to = next;
+      t.target = 1;
+      return;
+    }
+  } else if (sameForm(next, state.to)) {
+    state.to = next;
+    t.target = 1;
+    return;
+  }
+  const frozen = currentNavFrame(state);
+  if (frozen.showing === "to") state.from = state.to;
+  state.pivot = frozen;
+  state.pivotAt = 0;
+  state.to = next;
+  state.via = via;
+  t.x = 0;
+  t.v = 0;
+  t.target = 1;
+}
+function stepNavMorph(state, dt, reduceMotion = false) {
+  const timing = state.via === "lens" ? NAV_MORPH_TIMING : NAV_MINIMIZE_TIMING;
+  const moved = stepSpring(state.t, dt, timing.response, timing.damping, reduceMotion);
+  if (!moved && state.t.x >= 1) {
+    state.pivot = null;
+    state.pivotAt = 0;
+  }
+  return moved;
 }
 
 // src/web/styles.ts
@@ -501,6 +1289,10 @@ var BODY = `${HOST}>button`;
 var MENU = "vire-menu[data-vk]";
 var SURFACE = `${MENU}>[popover]`;
 var ITEM = `${SURFACE}>button`;
+var NAV = "vire-nav[data-vk]";
+var BODIES = `${NAV}>nav,${NAV}>[data-accessory]`;
+var LINKS = `${NAV}>nav a`;
+var CIRCLE = "[data-form=bar]>nav>a[data-search]";
 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)";
@@ -571,6 +1363,72 @@ ${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}}
 
+${NAV}{display:block;position:absolute;inset:0;pointer-events:none;--vk-ink:1;--vk-nav-icon:24px;--vk-body-alpha:0;--vk-body-white:0;--vk-body-lift:0}
+${BODIES}{position:absolute;left:var(--vk-x,0px);top:var(--vk-y,0px);width:var(--vk-w,0px);height:var(--vk-h,0px);
+ box-sizing:border-box;margin:0;padding:0;border-radius:var(--vk-r,0px);color:inherit;font:inherit}
+${NAV}>nav{pointer-events:auto;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;scrollbar-width:none}
+${NAV}>[data-accessory]{pointer-events:auto;overflow:clip}
+${NAV}>nav ul{position:absolute;inset:0;margin:0;padding:0;list-style:none;overflow:clip;border-radius:inherit;pointer-events:none}
+${NAV}>nav li{display:block;height:0;margin:0;padding:0}
+${NAV}>nav [hidden],${NAV}>[data-accessory][hidden]{display:none!important}
+${NAV}[data-scroll]>nav{overflow-x:clip;overflow-y:auto}
+${NAV}[data-scroll]>nav ul{position:static;overflow:visible}
+${LINKS},${NAV}>nav>a{position:absolute;left:calc(var(--vk-lx,0px) - var(--vk-x,0px));top:calc(var(--vk-ly,0px) - var(--vk-y,0px));
+ width:var(--vk-lw,0px);height:var(--vk-lh,0px);box-sizing:border-box;margin:0;padding:0;border-radius:var(--vk-lr,0px);
+ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
+ color:inherit;text-decoration:none;font-size:11px;line-height:12px;font-weight:500;white-space:nowrap;
+ pointer-events:auto;outline:none;-webkit-user-drag:none;touch-action:manipulation}
+${LINKS}::before{content:'';position:absolute;inset:calc(var(--vk-slop-y,0)*-1px) calc(var(--vk-slop-x,0)*-1px)}
+${LINKS}>svg{width:var(--vk-nav-icon);height:var(--vk-nav-icon);flex:none}
+${LINKS}:focus-visible,${NAV}>nav>button:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
+${LINKS}[data-lens-over]{background:color-mix(in srgb,currentColor 12%,transparent)}
+@media (hover:hover){${LINKS}:hover{background:color-mix(in srgb,currentColor 7%,transparent)}}
+${NAV}[data-form=sidebar]>nav a{flex-direction:row;justify-content:flex-start;gap:12px;padding-inline:12px;font-size:15px;line-height:20px}
+${NAV}[data-form=sidebar]>nav>a[data-search]{background:color-mix(in srgb,currentColor 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 18%,transparent)}
+${NAV}[data-contrast][data-form=sidebar]>nav>a[data-search]{box-shadow:inset 0 0 0 1px currentColor}
+${NAV}[data-form=bar]>nav>a[data-search],${NAV}[data-minimized]>nav a{font-size:0;line-height:0;gap:0;padding-inline:0;justify-content:center}
+${LINKS} [data-badge]{position:absolute;top:4px;inset-inline-start:calc(50% + 6px);min-width:16px;height:16px;box-sizing:border-box;padding:0 4px;
+ border-radius:8px;background:var(--vire-nav-badge,#e5484d);color:#fff;font-size:11px;line-height:16px;text-align:center}
+${LINKS} [data-badge]:empty{min-width:8px;width:8px;height:8px;padding:0;top:8px}
+${NAV} [data-badge-label]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
+${NAV}[data-form=sidebar]>nav [data-badge]{inset-inline-start:30px}
+${NAV}[data-form=sidebar]>nav [data-badge]:not(:empty){inset-inline-start:auto;inset-inline-end:12px;top:calc(50% - 8px)}
+${NAV}>nav>[data-vk-pill]{position:absolute;left:calc(var(--vk-px,0px) - var(--vk-x,0px));top:calc(var(--vk-py,0px) - var(--vk-y,0px));
+ width:var(--vk-pw,0px);height:var(--vk-ph,0px);border-radius:var(--vk-pr,0px);box-sizing:border-box;pointer-events:none;
+ background:color-mix(in srgb,currentColor 14%,transparent);opacity:var(--vk-pill-op,1)}
+${NAV}>nav>button[data-vk-toggle]{appearance:none;-webkit-appearance:none;position:absolute;left:calc(var(--vk-lx,0px) - var(--vk-x,0px));top:calc(var(--vk-ly,0px) - var(--vk-y,0px));
+ width:var(--vk-lw,0px);height:var(--vk-lh,0px);box-sizing:border-box;margin:0;padding:0;border:0;border-radius:50%;outline:none;
+ display:grid;place-items:center;background:transparent;color:inherit;cursor:pointer;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
+${NAV}>nav>button[data-vk-toggle][hidden]{display:none}
+${NAV}>nav>button[data-vk-toggle]>svg{width:22px;height:22px}
+@media (hover:hover){${NAV}>nav>button[data-vk-toggle]:hover{background:color-mix(in srgb,currentColor 8%,transparent)}}
+${NAV}[data-moving]>nav>:is(ul,a,button){opacity:var(--vk-ink);filter:blur(calc((1 - var(--vk-ink))*6px))}
+${NAV}[data-moving]>[data-accessory][data-moving]>*{opacity:var(--vk-ink);filter:blur(calc((1 - var(--vk-ink))*6px))}
+${NAV}>[data-vk-lens]{position:absolute;left:var(--vk-x,0px);top:var(--vk-y,0px);width:var(--vk-w,0px);height:var(--vk-h,0px);box-sizing:border-box;
+ border-radius:var(--vk-r,0px);display:none;align-items:center;justify-content:center;overflow:clip;pointer-events:none;color:inherit;
+ font-size:11px;line-height:12px;font-weight:500;white-space:nowrap}
+${NAV}[data-lens]>[data-vk-lens]{display:flex}
+${NAV}>[data-vk-lens]>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
+ transform:scale(calc(1 + .15*var(--vk-lift,0)));opacity:var(--vk-lift,0)}
+${NAV}>[data-vk-lens]>div>svg{width:var(--vk-nav-icon);height:var(--vk-nav-icon);flex:none}
+${NAV}>[data-vk-lens][data-form=sidebar]{justify-content:flex-start}
+${NAV}>[data-vk-lens][data-form=sidebar]>div{flex-direction:row;gap:12px;font-size:15px;line-height:20px;padding-inline-start:calc(12px + ${NAV_SIZES.lens.inflate}px*var(--vk-lift,0))}
+${NAV}>[data-vk-lens][data-dragging]>div{opacity:0}
+${NAV}[data-minimized]>[data-vk-lens]>div,${NAV}[data-form=bar][data-minimized]>[data-vk-lens]>div{font-size:0}
+${NAV}>[data-vk-scrim]{position:absolute;inset:0;pointer-events:auto;background:color-mix(in srgb,CanvasText 28%,transparent)}
+
+${NAV}[data-surface=glass]>nav,${NAV}[data-surface=glass]>[data-accessory],${NAV}[data-surface=glass]>[data-vk-lens],${NAV}[data-surface=glass]${CIRCLE}{color:var(--vireglass-ink-color,inherit);
+ ${GLASS_BODY}}
+${NAV}[data-frost][data-surface=glass]>nav,${NAV}[data-frost][data-surface=glass]>[data-accessory],${NAV}[data-frost][data-surface=glass]>[data-vk-lens],${NAV}[data-frost][data-surface=glass]${CIRCLE}{${FROST_INK}}
+${NAV}[data-surface=plain]>:is(nav,[data-accessory]),${NAV}[data-surface=plain]${CIRCLE}{background:Canvas;${SHADOW}}
+${NAV}[data-surface=plain]>[data-vk-lens]{background:color-mix(in srgb,currentColor 16%,transparent)}
+${NAV}[data-surface=frosted]>:is(nav,[data-accessory]),${NAV}[data-surface=frosted]${CIRCLE}{background:color-mix(in srgb,Canvas 88%,currentColor);
+ backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);${SHADOW}}
+${NAV}[data-surface=frosted]>[data-vk-lens]{background:color-mix(in srgb,currentColor 18%,transparent)}
+${NAV}[data-contrast]:is([data-surface=plain],[data-surface=frosted])>:is(nav,[data-accessory]),${NAV}[data-contrast]:is([data-surface=plain],[data-surface=frosted])${CIRCLE}{background:Canvas;box-shadow:inset 0 0 0 2px currentColor}
+${NAV}[data-contrast][data-surface=glass]>:is(nav,[data-accessory]),${NAV}[data-contrast][data-surface=glass]${CIRCLE}{${CONTRAST_GLASS}}
+${NAV}[data-contrast]>nav>[data-vk-pill]{box-shadow:inset 0 0 0 2px currentColor}
+
 @supports not (color:oklab(from red l a b)){
 ${HOST}[data-frost][data-surface=glass]>button,${MENU}[data-frost][data-surface=glass]>[popover]{color:inherit;background:color-mix(in srgb,Canvas 82%,currentColor)}
 }
@@ -589,6 +1447,10 @@ ${BODY}{-webkit-text-fill-color:currentColor;text-shadow:none;color:ButtonText;b
 ${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}
+${BODIES}{color:CanvasText!important;background:Canvas!important;border:1px solid CanvasText;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
+${NAV}>[data-vk-lens]{display:none!important}
+${NAV}>nav>[data-vk-pill]{background:Highlight;opacity:.4}
+${NAV}>nav>:is(ul,a,button){filter:none!important;opacity:1!important}
 ${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}
@@ -620,13 +1482,14 @@ var FORCED = {
 };
 var MATERIAL_STEPS = 10;
 var SUPPRESS_MS = 100;
+var HOVER2 = { hover: true };
+var NO_HOVER = { hover: false };
 function createControlElementClass(kind, options = {}) {
   const response = pressResponse(kind);
   return class VireControl extends HTMLElement {
     static observedAttributes = ["glass", "size", "disabled", FORCE_ATTRIBUTE];
     #control = null;
     #state = CONTROL_IDLE;
-    #caps = POINTER_INPUT;
     #visual = createControlVisual();
     #own = {};
     #mode = null;
@@ -681,7 +1544,7 @@ function createControlElementClass(kind, options = {}) {
       }
       this.#hadStyle.host = this.hasAttribute("style");
       ensureStyles(this, options.nonce);
-      this.#cleanups.push(watchCoarsePointer(() => this.#onInputChange()));
+      this.#cleanups.push(watchPointerInput(() => this.#onInputChange()));
       this.#cleanups.push(watchSystemA11y(() => this.#refreshMode()));
       this.#cleanups.push(watchA11yOverride(() => this.#refreshMode()));
       this.#awaitControl();
@@ -736,7 +1599,6 @@ function createControlElementClass(kind, options = {}) {
       this.#control = control;
       this.#hadStyle.control = control.hasAttribute("style");
       this.setAttribute("data-vk", "");
-      this.#caps = isCoarsePointer() ? TOUCH_INPUT : POINTER_INPUT;
       this.#listen(control);
       this.#cleanups.push(this.#observeSize(control));
       this.#syncDisabled();
@@ -748,13 +1610,13 @@ function createControlElementClass(kind, options = {}) {
     }
     #onInputChange() {
       if (!this.#control) return;
-      this.#caps = isCoarsePointer() ? TOUCH_INPUT : POINTER_INPUT;
+      if (this.#state.hovered && !effectiveInput().hover) this.#dispatch({ type: "enter" }, NO_HOVER);
       this.#refreshMode(true);
     }
     #size() {
       const wanted = this.getAttribute("size");
       if (wanted && CONTROL_SIZES.includes(wanted)) return wanted;
-      return defaultSize({ touch: isCoarsePointer() });
+      return sizeTier(effectiveInput());
     }
     #glassMode() {
       const wanted = this.getAttribute("glass");
@@ -765,9 +1627,9 @@ function createControlElementClass(kind, options = {}) {
       const wanted = this.getAttribute(FORCE_ATTRIBUTE);
       return wanted !== null && Object.hasOwn(FORCED, wanted) ? wanted : null;
     }
-    #dispatch(event) {
+    #dispatch(event, caps = HOVER2) {
       if (this.#forced()) return false;
-      const step = stepControl(this.#state, event, this.#caps);
+      const step = stepControl(this.#state, event, caps);
       this.#state = step.state;
       this.#render();
       return step.activated;
@@ -811,7 +1673,7 @@ function createControlElementClass(kind, options = {}) {
           if (mine(e)) this.#dispatch({ type: "cancel" });
         });
         on(target, "pointerenter", (e) => {
-          if (mine(e) && e.pointerType !== "touch") this.#dispatch({ type: "enter" });
+          if (mine(e)) this.#dispatch({ type: "enter" }, hoversWith(e.pointerType) ? HOVER2 : NO_HOVER);
         });
         on(target, "pointerleave", (e) => {
           if (mine(e) && !control.hasPointerCapture?.(e.pointerId)) this.#dispatch({ type: "leave" });
@@ -873,7 +1735,7 @@ function createControlElementClass(kind, options = {}) {
     #applySlop() {
       const control = this.#control;
       if (!control) return;
-      const floor = minTarget({ touch: isCoarsePointer() });
+      const floor = hitTarget(effectiveInput());
       this.#slop = { x: hitSlop(control.offsetWidth, floor), y: hitSlop(control.offsetHeight, floor) };
       this.style.setProperty("--vk-slop-x", String(this.#slop.x));
       this.style.setProperty("--vk-slop-y", String(this.#slop.y));
@@ -885,7 +1747,7 @@ function createControlElementClass(kind, options = {}) {
       const disabled = control.disabled;
       if (this.#forced()) return;
       if (disabled !== this.#state.disabled) {
-        this.#state = stepControl(this.#state, { type: "disable", disabled }, this.#caps).state;
+        this.#state = stepControl(this.#state, { type: "disable", disabled }, HOVER2).state;
         this.#render();
       }
     }
@@ -1081,40 +1943,46 @@ var MENU_CORNERS = {
   "bottom-left": { x: -1, y: 1 },
   "bottom-right": { x: 1, y: 1 }
 };
-function menuCorner(trigger, viewport) {
+function menuCorner(trigger, region) {
+  const x0 = region.x ?? 0;
+  const y0 = region.y ?? 0;
   return {
-    x: trigger.x + trigger.width / 2 <= viewport.width / 2 ? -1 : 1,
-    y: trigger.y + trigger.height / 2 <= viewport.height / 2 ? -1 : 1
+    x: trigger.x + trigger.width / 2 <= x0 + region.width / 2 ? -1 : 1,
+    y: trigger.y + trigger.height / 2 <= y0 + region.height / 2 ? -1 : 1
   };
 }
 function along(start, length, size, side) {
   return side < 0 ? start : start + length - size;
 }
-function fits(at, size, limit, margin) {
-  return at >= margin && at + size <= limit - margin;
+function fits(at, size, lo, hi, margin) {
+  return at >= lo + margin && at + size <= hi - margin;
 }
 var clamp = (v, lo, hi) => Math.min(Math.max(v, lo), Math.max(lo, hi));
-function menuPlacement(trigger, menu, viewport, options = {}) {
+function menuPlacement(trigger, menu, region, options = {}) {
   const margin = options.margin ?? 8;
-  const width = Math.min(menu.width, viewport.width - 2 * margin);
-  const height = Math.min(menu.height, viewport.height - 2 * margin);
-  const corner = { ...options.corner ?? menuCorner(trigger, viewport) };
+  const x0 = region.x ?? 0;
+  const y0 = region.y ?? 0;
+  const x1 = x0 + region.width;
+  const y1 = y0 + region.height;
+  const width = Math.max(0, Math.min(menu.width, region.width - 2 * margin));
+  const height = Math.max(0, Math.min(menu.height, region.height - 2 * margin));
+  const corner = { ...options.corner ?? menuCorner(trigger, region) };
   let x = along(trigger.x, trigger.width, width, corner.x);
   let y = along(trigger.y, trigger.height, height, corner.y);
   if (!options.corner) {
     const fx = along(trigger.x, trigger.width, width, corner.x === -1 ? 1 : -1);
-    if (!fits(x, width, viewport.width, margin) && fits(fx, width, viewport.width, margin)) {
+    if (!fits(x, width, x0, x1, margin) && fits(fx, width, x0, x1, margin)) {
       corner.x = corner.x === -1 ? 1 : -1;
       x = fx;
     }
     const fy = along(trigger.y, trigger.height, height, corner.y === -1 ? 1 : -1);
-    if (!fits(y, height, viewport.height, margin) && fits(fy, height, viewport.height, margin)) {
+    if (!fits(y, height, y0, y1, margin) && fits(fy, height, y0, y1, margin)) {
       corner.y = corner.y === -1 ? 1 : -1;
       y = fy;
     }
   }
-  x = clamp(x, margin, viewport.width - margin - width);
-  y = clamp(y, margin, viewport.height - margin - height);
+  x = clamp(x, x0 + margin, x1 - margin - width);
+  y = clamp(y, y0 + margin, y1 - margin - height);
   const rect = { x, y, width, height };
   return {
     rect,
@@ -1128,7 +1996,7 @@ function menuActivity(phase) {
   const grow = Math.min(Math.max(phase.grow, 0), 1);
   return shrink * (1 - grow);
 }
-function menuSurfaceFrame(trigger, menu, anchor, phase) {
+function menuSurfaceFrame(trigger, menu, anchor, phase, bounds) {
   const frame = growthFrame(
     { geometry: { width: trigger.width, height: trigger.height, cornerRadius: trigger.radius }, center: center(trigger) },
     { geometry: { width: menu.width, height: menu.height, cornerRadius: menu.radius }, center: center(menu) },
@@ -1136,17 +2004,25 @@ function menuSurfaceFrame(trigger, menu, anchor, phase) {
     phase
   );
   const { geometry, center: c } = frame.body;
-  const box = {
+  let box2 = {
     x: c.x - geometry.width / 2,
     y: c.y - geometry.height / 2,
     width: geometry.width,
     height: geometry.height,
     radius: geometry.cornerRadius
   };
+  let morph = frame.merge;
+  const held = bounds ? intersectRect(box2, bounds) : null;
+  if (held && (held.width < box2.width || held.height < box2.height)) {
+    const was = center(box2);
+    const now = center(held);
+    box2 = { ...held, radius: Math.min(box2.radius, held.width / 2, held.height / 2) };
+    if (morph) morph = { ...morph, offsetX: morph.offsetX + was.x - now.x, offsetY: morph.offsetY + was.y - now.y };
+  }
   return {
-    box,
-    morph: frame.merge,
-    content: { x: menu.x - box.x, y: menu.y - box.y },
+    box: box2,
+    morph,
+    content: { x: menu.x - box2.x, y: menu.y - box2.y },
     ink: frame.ink,
     activity: menuActivity(phase)
   };
@@ -1162,8 +2038,8 @@ 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") };
+  const mix3 = (key) => rest[key] + (MENU_DROP_BODY[key] - rest[key]) * k;
+  return { alpha: mix3("alpha"), white: mix3("white"), lift: mix3("lift") };
 }
 var MENU_ITEM_FILL = { active: 0.1, pressed: 0.18 };
 
@@ -1212,6 +2088,7 @@ function createMenuElementClass(options = {}) {
     #from = null;
     #to = null;
     #anchor = null;
+    #region = null;
     #natural = null;
     #out = false;
     #viaPointer = false;
@@ -1262,7 +2139,7 @@ function createMenuElementClass(options = {}) {
       }
       this.#hadStyle.host = this.hasAttribute("style");
       ensureStyles(this, options.nonce);
-      this.#cleanups.push(watchCoarsePointer(() => this.#list && this.#refreshMode(true)));
+      this.#cleanups.push(watchPointerInput(() => this.#list && this.#refreshMode(true)));
       this.#cleanups.push(watchSystemA11y(() => this.#list && this.#refreshMode()));
       this.#cleanups.push(watchA11yOverride(() => this.#list && this.#refreshMode()));
       this.#awaitParts();
@@ -1293,7 +2170,7 @@ function createMenuElementClass(options = {}) {
       this.#state = MENU_CLOSED;
       this.#growth = createGrowthState();
       this.#out = false;
-      this.#from = this.#to = this.#anchor = null;
+      this.#from = this.#to = this.#anchor = this.#region = null;
       this.#natural = null;
       this.#held = null;
       this.#readySince = null;
@@ -1427,7 +2304,7 @@ function createMenuElementClass(options = {}) {
         const item = target instanceof Element ? target.closest("button") : null;
         return item && item.parentElement === list ? item : null;
       };
-      const drop = (e) => {
+      const drop2 = (e) => {
         e.preventDefault();
         e.stopImmediatePropagation();
       };
@@ -1480,14 +2357,14 @@ function createMenuElementClass(options = {}) {
         (e) => {
           const item = itemOf(e.target);
           if (!item || this.#forced()) return;
-          if (isDisabled(item)) return drop(e);
+          if (isDisabled(item)) return drop2(e);
           if (!this.#state.open) {
-            if (this.#out) drop(e);
+            if (this.#out) drop2(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);
+          if (e.detail > 1 || pointerEarly || this.#inSince === null) return drop2(e);
           this.#close({ type: "choose", index: this.#items().indexOf(item) });
         },
         true
@@ -1532,7 +2409,7 @@ function createMenuElementClass(options = {}) {
         );
         on(root, "scroll", (e) => this.#follow(e), true);
       });
-      on(window, "resize", (e) => this.#follow(e));
+      this.#cleanups.push(watchViewport(() => this.#follow()));
       if (typeof ResizeObserver !== "undefined") {
         const resized = new ResizeObserver(() => this.#out && this.#follow());
         resized.observe(this.#carrier ?? trigger);
@@ -1625,9 +2502,11 @@ function createMenuElementClass(options = {}) {
       const spec = menuSize(this.#size());
       this.#natural ??= this.#measure();
       const natural = this.#natural;
-      const viewport = { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight };
       const trigger = this.#triggerBox();
-      const placement = menuPlacement(trigger, natural, viewport, { corner: this.#corner(), margin: VIEWPORT_MARGIN });
+      const { viewport, segments } = viewportSegments();
+      const region = segmentOf(trigger, segments) ?? viewport;
+      this.#region = region;
+      const placement = menuPlacement(trigger, natural, region, { corner: this.#corner(), margin: VIEWPORT_MARGIN });
       this.#from = trigger;
       this.#to = { ...placement.rect, radius: spec.radius };
       this.#anchor = placement.anchor;
@@ -1647,14 +2526,14 @@ function createMenuElementClass(options = {}) {
       glass.setSample(sample);
       this.#paint();
     }
-    #setBox(box) {
+    #setBox(box2) {
       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));
+      const px2 = (v) => `${v.toFixed(2)}px`;
+      s.setProperty("--vk-x", px2(box2.x));
+      s.setProperty("--vk-y", px2(box2.y));
+      s.setProperty("--vk-w", px2(box2.width));
+      s.setProperty("--vk-h", px2(box2.height));
+      s.setProperty("--vk-r", px2(box2.radius));
     }
     #run() {
       const instant = this.#presentation?.instantSprings ?? false;
@@ -1693,7 +2572,7 @@ function createMenuElementClass(options = {}) {
       this.removeAttribute("data-phase");
       this.#out = false;
       this.#held = null;
-      this.#from = this.#to = this.#anchor = null;
+      this.#from = this.#to = this.#anchor = this.#region = null;
       this.#glass?.setSample(this.#sample);
       this.#carrier?.setCarried?.(null);
     }
@@ -1701,7 +2580,7 @@ function createMenuElementClass(options = {}) {
       const list = this.#list;
       if (!list || !this.#out || !this.#from || !this.#to || !this.#anchor) return;
       const phase = growthPhase(this.#growth);
-      const f = menuSurfaceFrame(this.#from, this.#to, this.#anchor, phase);
+      const f = menuSurfaceFrame(this.#from, this.#to, this.#anchor, phase, this.#region ?? void 0);
       const settled = phase.shrink === 1 && phase.grow === 1;
       const inkIn = Math.round(f.ink.incoming * 1e3) / 1e3;
       if (this.#state.open && inkIn >= 1) {
@@ -1722,20 +2601,20 @@ function createMenuElementClass(options = {}) {
       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) {
+    #pushGlass(box2, 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 round2 = Math.round;
+      const step = round2(Math.min(Math.max(activity, 0), 1) * MATERIAL_STEPS2) / MATERIAL_STEPS2;
+      const geometry = { width: round2(box2.width), height: round2(box2.height), cornerRadius: round2(box2.radius) };
       const lens = morph ? {
-        smoothing: round(morph.smoothing),
+        smoothing: round2(morph.smoothing),
         shape: {
-          offsetX: round(morph.offsetX),
-          offsetY: round(morph.offsetY),
-          width: round(morph.width),
-          height: round(morph.height),
-          cornerRadius: round(morph.cornerRadius)
+          offsetX: round2(morph.offsetX),
+          offsetY: round2(morph.offsetY),
+          width: round2(morph.width),
+          height: round2(morph.height),
+          cornerRadius: round2(morph.cornerRadius)
         }
       } : null;
       const key = {
@@ -1781,7 +2660,7 @@ function createMenuElementClass(options = {}) {
     #size() {
       const wanted = this.getAttribute("size");
       if (wanted && CONTROL_SIZES.includes(wanted)) return wanted;
-      return defaultSize({ touch: isCoarsePointer() });
+      return sizeTier(effectiveInput());
     }
     #wantsGlass() {
       const wanted = this.getAttribute("glass");
@@ -1835,12 +2714,12 @@ function createMenuElementClass(options = {}) {
       this.#glassKey = key;
       if (!want || !list) return;
       const token = this.#glassToken;
-      const box = this.#from ?? this.#triggerBox();
+      const box2 = 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 },
+          geometry: { width: Math.round(box2.width), height: Math.round(box2.height), cornerRadius: menuSize(this.#size()).radius },
           accessibility: mode,
           onTouch: false,
           sample: this.#held ?? this.#sample,
@@ -1862,11 +2741,1233 @@ function createMenuElementClass(options = {}) {
     }
   };
 }
+var FORCE_ATTRIBUTE3 = "data-vire-force-state";
+var GLASS_ON2 = /* @__PURE__ */ new Set(["", "present"]);
+var FORMS = ["bar", "rail", "sidebar"];
+var MATERIAL_STEPS3 = 10;
+var DRAG_SLOP = 6;
+var SWALLOW_MS = 100;
+var DEFAULT_TOGGLE_LABEL = "Sidebar";
+var TOGGLE_GLYPH = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="3"/><path d="M9 4v16"/></svg>';
+var px = (v) => `${v.toFixed(2)}px`;
+var round = Math.round;
+var clamp012 = (v) => Math.min(Math.max(v, 0), 1);
+var emptyLast = () => ({ material: "", morph: "", geometry: "" });
+var sameMorph = (a, b) => {
+  if (typeof a === "string" || typeof b === "string") return a === b;
+  const p = a.shape;
+  const q = b.shape;
+  return a.smoothing === b.smoothing && p?.offsetX === q?.offsetX && p?.offsetY === q?.offsetY && p?.width === q?.width && p?.height === q?.height && p?.cornerRadius === q?.cornerRadius;
+};
+var newSlot = (el) => ({ el, session: null, token: 0, key: "", last: emptyLast(), appear: -1 });
+var isCurrent = (link) => {
+  const value = link.getAttribute("aria-current");
+  return value !== null && value !== "false";
+};
+function restoreAria(badge, was) {
+  if (was === null) badge.removeAttribute("aria-hidden");
+  else badge.setAttribute("aria-hidden", was);
+}
+function stripPlacement(link, hadStyle) {
+  for (const name of Array.from(link.style)) if (name.startsWith("--vk-")) link.style.removeProperty(name);
+  dropEmptyStyle2(link, hadStyle);
+}
+function dropEmptyStyle2(el, hadStyle) {
+  if (!hadStyle && el.getAttribute("style") === "") el.removeAttribute("style");
+}
+function parseForced(value) {
+  if (!value) return null;
+  if (value === "minimized") return { kind: "minimized" };
+  const morph = /^morph:(bar|rail|sidebar|minimized):(\d*\.?\d+)$/.exec(value);
+  if (morph) return { kind: "morph", from: morph[1], t: clamp012(Number(morph[2])) };
+  const drag = /^drag:(\d*\.?\d+)$/.exec(value);
+  return drag ? { kind: "drag", at: clamp012(Number(drag[1])) } : null;
+}
+function createNavElementClass(options = {}) {
+  return class VireNav extends HTMLElement {
+    static observedAttributes = [
+      "glass",
+      "form",
+      "collapsed",
+      "panes",
+      "minimize",
+      "scroller",
+      "search-key",
+      "toggle-label",
+      FORCE_ATTRIBUTE3
+    ];
+    #navEl = null;
+    #pill = null;
+    #lens = null;
+    #lensInner = null;
+    #toggle = null;
+    #scrim = null;
+    #accessory = null;
+    #cleanups = [];
+    #hadStyle = { host: false, nav: false, parent: false };
+    #linkStyle = /* @__PURE__ */ new Map();
+    #hiddenWas = /* @__PURE__ */ new Map();
+    #badgeWas = /* @__PURE__ */ new Map();
+    #mine = /* @__PURE__ */ new Set();
+    #own = {};
+    #mode = null;
+    #modeKey = "";
+    #presentation = null;
+    #glassBroken = false;
+    #body = null;
+    #lensSlot = null;
+    #accSlot = null;
+    #sample = null;
+    #ctx = null;
+    #plan = null;
+    #plans = /* @__PURE__ */ new WeakMap();
+    #shown = null;
+    #morph = null;
+    #drag = createNavDrag();
+    #press = null;
+    #minState = createMinimize();
+    #scrollerProp = null;
+    #scrollerEl = null;
+    #unbindScroller = null;
+    #over = false;
+    #pillAnim = {
+      state: { ...createFormMorph(), t: { x: 1, v: 0, target: 1 } },
+      from: null,
+      to: null
+    };
+    #accAnim = { state: { ...createFormMorph(), t: { x: 1, v: 0, target: 1 } }, from: null, to: null };
+    #frame = 0;
+    #lastFrame = 0;
+    #lensFor = null;
+    #lastKey = "";
+    #parent = null;
+    #parentWas = null;
+    // Leaving the scrolling state resets the offset, and that reset's own scroll event must not overwrite what is remembered.
+    #scrollReset = false;
+    #scrollTops = /* @__PURE__ */ new Map();
+    #dirty = false;
+    #swallow = null;
+    #tapping = false;
+    #tapTimer = 0;
+    get a11y() {
+      return this.#own;
+    }
+    set a11y(next) {
+      this.#own = { ...next };
+      if (this.#navEl) this.#refreshMode();
+    }
+    get sample() {
+      return this.#sample;
+    }
+    set sample(next) {
+      this.#sample = next;
+      for (const slot of [this.#body, this.#lensSlot, this.#accSlot]) slot?.session?.setSample(next);
+    }
+    get scroller() {
+      return this.#scrollerProp;
+    }
+    set scroller(next) {
+      this.#scrollerProp = next;
+      if (!this.#navEl) return;
+      this.#bindScroller();
+      this.#replan();
+    }
+    connectedCallback() {
+      for (const key of ["a11y", "sample", "scroller"]) {
+        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(watchSystemA11y(() => this.#navEl && this.#refreshMode()));
+      this.#cleanups.push(watchA11yOverride(() => this.#navEl && this.#refreshMode()));
+      this.#awaitParts();
+    }
+    disconnectedCallback() {
+      for (const cleanup of this.#cleanups.splice(0)) cleanup();
+      cancelAnimationFrame(this.#frame);
+      this.#frame = 0;
+      this.#swallow?.();
+      this.#unhold?.();
+      window.clearTimeout(this.#tapTimer);
+      this.#tapping = false;
+      this.#unbindScroller?.();
+      this.#unbindScroller = null;
+      for (const slot of [this.#body, this.#lensSlot, this.#accSlot]) if (slot) this.#detach(slot);
+      this.#releaseShortcut();
+      this.#hovered?.removeAttribute("data-lens-over");
+      this.#hovered = null;
+      this.#accessory?.removeAttribute("data-placement");
+      this.#accessory?.removeAttribute("data-moving");
+      for (const el of [this.#accessory, this.#lens]) {
+        if (!el) continue;
+        for (const name of Array.from(el.style)) if (name.startsWith("--vk-")) el.style.removeProperty(name);
+      }
+      if (this.#accessory) dropEmptyStyle2(this.#accessory, this.#accessoryHadStyle);
+      for (const [el, was] of this.#hiddenWas) el.toggleAttribute("hidden", was);
+      this.#hiddenWas.clear();
+      for (const [badge, was] of this.#badgeWas) restoreAria(badge, was);
+      this.#badgeWas.clear();
+      for (const [link, had] of this.#linkStyle) stripPlacement(link, had);
+      this.#linkStyle.clear();
+      for (const node of [this.#pill, this.#lens, this.#toggle, this.#scrim]) node?.remove();
+      if (this.#navEl) {
+        for (const name of Array.from(this.#navEl.style)) if (name.startsWith("--vk-")) this.#navEl.style.removeProperty(name);
+        dropEmptyStyle2(this.#navEl, this.#hadStyle.nav);
+      }
+      this.#clearInsets();
+      for (const name of [
+        "data-vk",
+        "data-surface",
+        "data-glass",
+        "data-frost",
+        "data-contrast",
+        "data-form",
+        "data-search",
+        "data-minimized",
+        "data-moving",
+        "data-lens",
+        "data-scroll"
+      ]) {
+        this.removeAttribute(name);
+      }
+      for (const name of Array.from(this.style)) if (name.startsWith("--vk-")) this.style.removeProperty(name);
+      dropEmptyStyle2(this, this.#hadStyle.host);
+      this.#navEl = this.#pill = this.#lens = this.#lensInner = this.#toggle = this.#scrim = this.#accessory = null;
+      this.#body = this.#lensSlot = this.#accSlot = null;
+      this.#ctx = this.#plan = this.#shown = this.#morph = null;
+      this.#plans = /* @__PURE__ */ new WeakMap();
+      this.#scrollTops.clear();
+      this.#drag = createNavDrag();
+      this.#press = null;
+      this.#minState = createMinimize();
+      this.#scrollerEl = null;
+      this.#over = false;
+      this.#lensFor = null;
+      this.#lastKey = "";
+      this.#mine.clear();
+      this.#probe = null;
+      this.#safeBottom = 0;
+      this.#linkStyle = /* @__PURE__ */ new Map();
+      this.#presentation = null;
+      this.#mode = null;
+      this.#modeKey = "";
+      this.#frame = 0;
+      this.#lastFrame = 0;
+    }
+    attributeChangedCallback(name) {
+      if (name === FORCE_ATTRIBUTE3) this.#forcedState = parseForced(this.getAttribute(name));
+      if (!this.#navEl) return;
+      if (name === "glass") this.#refreshMode(true);
+      else if (name === FORCE_ATTRIBUTE3) this.#applyForced();
+      else if (name === "minimize" || name === "scroller") {
+        this.#bindScroller();
+        this.#replan();
+      } else if (name === "toggle-label") this.#syncToggle();
+      else this.#replan();
+    }
+    // The parser connects the element before its children exist, so the markup is 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 nav = this.querySelector(":scope > nav");
+      if (!nav || !nav.querySelector("a")) return false;
+      this.#upgrade(nav);
+      return true;
+    }
+    #accessoryHadStyle = false;
+    #upgrade(nav) {
+      this.#navEl = nav;
+      this.#hadStyle.nav = nav.hasAttribute("style");
+      this.setAttribute("data-vk", "");
+      const own = (el) => {
+        this.#mine.add(el);
+        return el;
+      };
+      const pill = own(this.ownerDocument.createElement("span"));
+      pill.setAttribute("data-vk-pill", "");
+      pill.setAttribute("aria-hidden", "true");
+      nav.prepend(pill);
+      this.#pill = pill;
+      const toggle = own(this.ownerDocument.createElement("button"));
+      toggle.type = "button";
+      toggle.setAttribute("data-vk-toggle", "");
+      toggle.hidden = true;
+      toggle.innerHTML = TOGGLE_GLYPH;
+      nav.append(toggle);
+      this.#toggle = toggle;
+      const lens = own(this.ownerDocument.createElement("div"));
+      lens.setAttribute("data-vk-lens", "");
+      lens.setAttribute("aria-hidden", "true");
+      lens.inert = true;
+      const inner = own(this.ownerDocument.createElement("div"));
+      lens.append(inner);
+      this.append(lens);
+      this.#lens = lens;
+      this.#lensInner = inner;
+      const accessory = this.querySelector(":scope > [data-accessory]");
+      this.#accessory = accessory;
+      if (accessory) this.#accessoryHadStyle = accessory.hasAttribute("style");
+      this.#body = newSlot(nav);
+      this.#lensSlot = newSlot(lens);
+      this.#accSlot = accessory ? newSlot(accessory) : null;
+      this.#listen(nav, toggle);
+      const markup = new MutationObserver((records) => {
+        let changed = false;
+        const selected = this.#plan?.order[this.#plan.selected] ?? null;
+        for (const record of records) {
+          if (this.#isOwn(record.target)) continue;
+          if (record.type === "attributes") {
+            this.#lensFor = null;
+            changed = true;
+          } else if (record.type === "characterData" || selected && selected.contains(record.target)) {
+            if (selected?.contains(record.target)) this.#lensFor = null;
+            changed = true;
+          } else if (![...record.addedNodes, ...record.removedNodes].every((node) => this.#mine.has(node))) {
+            changed = true;
+          }
+        }
+        if (this.#syncScroller()) changed = true;
+        if (changed) this.#scheduleReplan();
+      });
+      markup.observe(this, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ["aria-current"] });
+      this.#cleanups.push(() => markup.disconnect());
+      this.#mode = null;
+      this.#modeKey = "";
+      this.#refreshMode();
+      this.#bindScroller();
+      this.#cleanups.push(
+        watchAdaptiveContext(this, (ctx) => {
+          this.#ctx = ctx;
+          this.#replan();
+        })
+      );
+    }
+    #isOwn(node) {
+      return node === this.#pill || [this.#lens, this.#toggle, this.#scrim, this.#probe].some((own) => own?.contains(node));
+    }
+    #scheduleReplan() {
+      if (this.#dirty) return;
+      this.#dirty = true;
+      queueMicrotask(() => {
+        this.#dirty = false;
+        this.#replan();
+      });
+    }
+    #listen(nav, toggle) {
+      const on = (target, type, handler, options2) => {
+        target.addEventListener(type, handler, options2);
+        this.#cleanups.push(() => target.removeEventListener(type, handler, options2));
+      };
+      const doc = this.ownerDocument;
+      on(nav, "pointerdown", (e) => {
+        this.#tapping = true;
+        window.clearTimeout(this.#tapTimer);
+        this.#tapTimer = window.setTimeout(() => this.#tapping = false, 600);
+        this.#pressDown(e);
+      });
+      on(nav, "pointercancel", () => this.#tapping = false);
+      on(nav, "dragstart", (e) => e.preventDefault());
+      on(
+        nav,
+        "click",
+        (e) => {
+          const link = e.target instanceof Element ? e.target.closest("a") : null;
+          this.#tapping = false;
+          if (!link || this.#forced()) return;
+          const plan = this.#plan;
+          if (plan && plan.layout.minimized && plan.visible.has(link) && link !== plan.search) {
+            e.preventDefault();
+            expandMinimize(this.#minState);
+            this.#replan();
+          } else if (this.#over) {
+            this.#setOver(false);
+          }
+        },
+        true
+      );
+      on(nav, "focusin", () => {
+        if (this.#handing || !this.#minState.minimized || this.#forced() || this.#tapping) return;
+        expandMinimize(this.#minState);
+        this.#replan();
+      });
+      this.#cleanups.push(() => this.#endPress?.());
+      on(toggle, "click", () => this.#toggleClick());
+      on(nav, "scroll", () => {
+        const form = this.#shown?.layout.form;
+        if (this.#scrollReset && nav.scrollTop === 0) {
+          this.#scrollReset = false;
+          return;
+        }
+        if (form && this.hasAttribute("data-scroll")) this.#scrollTops.set(form, nav.scrollTop);
+      });
+      on(doc, "keydown", (e) => {
+        if (e.key === "Escape" && this.#over) {
+          e.preventDefault();
+          this.#closeOver();
+          return;
+        }
+        const plan = this.#plan;
+        if (!plan?.search || !plan.nav.search?.shortcut) return;
+        if (e.key !== this.#searchKey() || e.ctrlKey || e.metaKey || e.altKey || e.isComposing || e.repeat) return;
+        if (isEditable(e.composedPath()[0] ?? e.target)) return;
+        e.preventDefault();
+        plan.search.click();
+      });
+    }
+    #searchKey() {
+      return this.getAttribute("search-key") || "/";
+    }
+    // ---- the form -----------------------------------------------------------------------------------------------
+    #collect() {
+      const nav = this.#navEl;
+      const lists = Array.from(nav.querySelectorAll(":scope > ul"));
+      const links = (list) => Array.from(list.querySelectorAll("a"));
+      const secondaryList = lists.filter((list) => list.hasAttribute("data-secondary"));
+      const primary = lists.filter((list) => !list.hasAttribute("data-secondary")).flatMap(links);
+      const secondary = secondaryList.flatMap(links);
+      const search = nav.querySelector(":scope > a[data-search]");
+      return { lists, secondaryList, primary, secondary, search };
+    }
+    /** What the element did to a node that has left the navigation is undone and forgotten, so nothing retains it. */
+    #forgetGone() {
+      const nav = this.#navEl;
+      if (!nav) return;
+      const gone = (node) => node !== this.#accessory && !nav.contains(node);
+      for (const [el, was] of this.#hiddenWas) {
+        if (!gone(el)) continue;
+        el.toggleAttribute("hidden", was);
+        this.#hiddenWas.delete(el);
+      }
+      for (const [badge, was] of this.#badgeWas) {
+        if (!gone(badge)) continue;
+        restoreAria(badge, was);
+        this.#badgeWas.delete(badge);
+      }
+      for (const [link, had] of this.#linkStyle) {
+        if (!gone(link)) continue;
+        stripPlacement(link, had);
+        this.#linkStyle.delete(link);
+      }
+      if (this.#hovered && gone(this.#hovered)) {
+        this.#hovered.removeAttribute("data-lens-over");
+        this.#hovered = null;
+      }
+    }
+    /** A badge is a picture; what it says reaches a screen reader through a [data-badge-label] the author puts in the link. */
+    #hideBadges() {
+      for (const badge of this.#navEl.querySelectorAll("a [data-badge]")) {
+        if (!this.#badgeWas.has(badge)) this.#badgeWas.set(badge, badge.getAttribute("aria-hidden"));
+        if (badge.getAttribute("aria-hidden") !== "true") badge.setAttribute("aria-hidden", "true");
+      }
+    }
+    /** The bottom safe area, read through a probe that is in the element only while it is read. */
+    #readSafeBottom() {
+      const probe = this.#probe ??= this.#makeProbe();
+      this.append(probe);
+      const value = parseFloat(getComputedStyle(probe).paddingBottom);
+      probe.remove();
+      return Number.isFinite(value) ? Math.max(value, 0) : 0;
+    }
+    #makeProbe() {
+      const probe = this.ownerDocument.createElement("div");
+      probe.setAttribute("data-vk-probe", "");
+      probe.setAttribute("aria-hidden", "true");
+      probe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none;width:0;height:0;padding-bottom:env(safe-area-inset-bottom,0px)";
+      this.#mine.add(probe);
+      return probe;
+    }
+    #probe = null;
+    #safeBottom = 0;
+    #tier() {
+      return sizeTier(effectiveInput()) === "touch" ? "touch" : "pointer";
+    }
+    #makePlan(ctx, as) {
+      const { primary, secondary, search } = this.#collect();
+      let nav = navigationForm(ctx, {
+        primary: primary.length,
+        secondary: secondary.length,
+        search: search !== null,
+        sidebarCollapsed: this.hasAttribute("collapsed"),
+        panes: Number(this.getAttribute("panes")) || 1
+      });
+      const attr = this.getAttribute("form");
+      if (attr && FORMS.includes(attr)) nav = fixedNavigationForm(nav, attr);
+      const over = as.over && nav.form === "rail" && nav.expandable === "over";
+      const resting = nav;
+      if (over) nav = fixedNavigationForm(nav, "sidebar");
+      if (as.form) nav = fixedNavigationForm(nav, as.form);
+      const order = [...primary, ...secondary];
+      const selected = order.findIndex(isCurrent);
+      const layout = this.#layoutOf(ctx, nav, selected, as.minimized);
+      const rail = over ? this.#layoutOf(ctx, resting, selected, as.minimized) : layout;
+      const visible = /* @__PURE__ */ new Set();
+      if (layout.minimized) {
+        const at = selected >= 0 && selected < nav.primary ? selected : 0;
+        const link = order[at];
+        if (link) visible.add(link);
+      } else {
+        const count = nav.form === "sidebar" ? order.length : nav.primary;
+        for (const link of order.slice(0, count)) visible.add(link);
+      }
+      return { nav, layout, order, search, selected, visible, secondaryShown: nav.form === "sidebar", insets: rail.insets, over };
+    }
+    #layoutOf(ctx, nav, selected, minimized) {
+      return navLayout({
+        form: nav.form,
+        minimized: minimized && nav.form === "bar",
+        window: ctx.window,
+        items: nav.primary,
+        secondary: nav.secondary,
+        search: nav.search,
+        selected,
+        tier: this.#tier(),
+        toggle: nav.collapsible || nav.expandable !== null,
+        accessory: this.#accessory !== null,
+        bottomInset: this.#safeBottom
+      });
+    }
+    #forcedState = null;
+    #forced() {
+      return this.#forcedState;
+    }
+    #replan() {
+      const ctx = this.#ctx;
+      if (!this.#navEl || !ctx) return;
+      this.#syncScroller();
+      this.#forgetGone();
+      this.#hideBadges();
+      this.#safeBottom = this.#readSafeBottom();
+      const forced = this.#forced();
+      const minimized = forced?.kind === "minimized" || this.#minState.minimized;
+      const plan = this.#makePlan(ctx, { minimized, over: this.#over });
+      if (this.#over && !plan.over) this.#setOver(false, false);
+      const prev = this.#plan;
+      this.#plans.set(plan.layout, plan);
+      this.#plan = plan;
+      if (forced?.kind === "morph") {
+        const from = forced.from === "minimized" ? this.#makePlan(ctx, { form: "bar", minimized: true, over: false }) : this.#makePlan(ctx, { form: forced.from, minimized: false, over: false });
+        this.#plans.set(from.layout, from);
+        const state = createNavMorph(from.layout);
+        const via = from.layout.form === "bar" && plan.layout.form === "bar" ? "contract" : "lens";
+        aimNavMorph(state, plan.layout, via);
+        state.t.x = forced.t;
+        state.t.v = 0;
+        state.t.target = forced.t;
+        this.#morph = state;
+      } else if (!this.#morph || forced?.kind === "drag" || forced?.kind === "minimized") {
+        this.#morph = createNavMorph(plan.layout);
+      } else if (prev) {
+        const contract = prev.layout.form === "bar" && plan.layout.form === "bar" && prev.layout.minimized !== plan.layout.minimized;
+        aimNavMorph(this.#morph, plan.layout, contract ? "contract" : "lens");
+      } else {
+        this.#morph = createNavMorph(plan.layout);
+      }
+      this.#retargetPill(prev, plan);
+      this.#retargetAccessory(prev, plan);
+      if (forced?.kind === "drag") {
+        this.#drag = createNavDrag();
+        const body = plan.layout.body;
+        pressNavDrag(this.#drag, plan.layout, body.x + forced.at * body.width);
+        this.#drag.lift.x = 1;
+        this.#drag.lift.target = 1;
+      }
+      this.#syncKeyShortcut(plan);
+      this.#ensureGlass();
+      this.#publish(plan);
+      this.#run();
+    }
+    #retargetPill(prev, next) {
+      const anim = this.#pillAnim;
+      const to = next.layout.pill;
+      const sameForm2 = prev !== null && prev.layout.form === next.layout.form && prev.layout.minimized === next.layout.minimized;
+      const instant = this.#presentation?.instantSprings ?? false;
+      if (sameForm2 && prev.selected !== next.selected && prev.layout.pill && to && !instant) {
+        anim.from = this.#pillBox() ?? prev.layout.pill;
+        anim.to = to;
+        anim.state.t = { x: 0, v: 0, target: 1 };
+      } else if (sameForm2 && anim.state.t.x < 1 && to) {
+        anim.to = to;
+      } else {
+        anim.from = anim.to = to;
+        anim.state.t = { x: 1, v: 0, target: 1 };
+      }
+    }
+    #pillBox() {
+      const { from, to, state } = this.#pillAnim;
+      if (!to) return null;
+      return from && state.t.x < 1 ? formMorphFrame(from, to, state).box : to;
+    }
+    #retargetAccessory(prev, next) {
+      const anim = this.#accAnim;
+      const box2 = next.layout.accessory;
+      const placement = next.layout.accessoryPlacement;
+      if (!box2 || !placement) {
+        anim.from = anim.to = null;
+        anim.state.t = { x: 1, v: 0, target: 1 };
+        return;
+      }
+      const target = { box: box2, placement };
+      const instant = this.#presentation?.instantSprings ?? false;
+      if (anim.to && anim.to.placement !== placement && !instant && prev) {
+        anim.from = this.#accBox() ?? anim.to;
+        anim.to = target;
+        anim.state.t = { x: 0, v: 0, target: 1 };
+        anim.state.fromInk = 1;
+      } else if (anim.to && anim.state.t.x < 1 && anim.to.placement === placement) {
+        anim.to = target;
+      } else {
+        anim.from = anim.to = target;
+        anim.state.t = { x: 1, v: 0, target: 1 };
+      }
+    }
+    #accBox() {
+      const { from, to, state } = this.#accAnim;
+      if (!to) return null;
+      if (!from || state.t.x >= 1) return to;
+      const frame = formMorphFrame(from.box, to.box, state);
+      return { box: frame.box, placement: frame.showing === "from" ? from.placement : to.placement };
+    }
+    // ---- what the content must clear ----------------------------------------------------------------------------
+    #publish(plan) {
+      const { layout } = plan;
+      const bottom = round(plan.insets.bottom);
+      const start = round(plan.insets.start);
+      const key = JSON.stringify([layout.form, layout.minimized, bottom, start, layout.accessoryPlacement]);
+      if (key === this.#lastKey) return;
+      this.#lastKey = key;
+      const parent = this.parentElement;
+      if (parent) {
+        if (this.#parent !== parent) {
+          this.#clearInsets();
+          this.#parent = parent;
+          this.#hadStyle.parent = parent.hasAttribute("style");
+          this.#parentWas = {
+            bottom: parent.style.getPropertyValue("--vire-nav-inset-bottom"),
+            start: parent.style.getPropertyValue("--vire-nav-inset-start")
+          };
+        }
+        parent.style.setProperty("--vire-nav-inset-bottom", `${bottom}px`);
+        parent.style.setProperty("--vire-nav-inset-start", `${start}px`);
+      }
+      this.dispatchEvent(
+        new CustomEvent("vire-nav-layout", {
+          bubbles: true,
+          detail: { form: layout.form, minimized: layout.minimized, insets: { bottom, start }, accessoryPlacement: layout.accessoryPlacement }
+        })
+      );
+    }
+    #clearInsets() {
+      const parent = this.#parent;
+      if (!parent) return;
+      const was = this.#parentWas;
+      for (const [name, value] of [
+        ["--vire-nav-inset-bottom", was?.bottom],
+        ["--vire-nav-inset-start", was?.start]
+      ]) {
+        if (value) parent.style.setProperty(name, value);
+        else parent.style.removeProperty(name);
+      }
+      dropEmptyStyle2(parent, this.#hadStyle.parent);
+      this.#parent = null;
+      this.#parentWas = null;
+    }
+    // ---- scrolling ----------------------------------------------------------------------------------------------
+    /** The property wins while its node is in the document; the id is looked up again each time, as the node may be parsed late or replaced. */
+    #wantedScroller() {
+      if (this.getAttribute("minimize") !== "scroll") return null;
+      if (this.#scrollerProp?.isConnected) return this.#scrollerProp;
+      const id = this.getAttribute("scroller");
+      const root = this.getRootNode();
+      return id && "getElementById" in root ? root.getElementById(id) : null;
+    }
+    #isPage(el) {
+      const doc = this.ownerDocument;
+      return el === doc.documentElement || el === doc.body || el === doc.scrollingElement;
+    }
+    #bindScroller() {
+      this.#unbindScroller?.();
+      this.#unbindScroller = null;
+      const el = this.#wantedScroller();
+      this.#scrollerEl = el;
+      this.#minState = createMinimize(el ? this.#scrollPosition(el) : 0);
+      if (!el) return;
+      const target = this.#isPage(el) ? this.ownerDocument.defaultView : el;
+      const onScroll = () => {
+        const was = this.#minState.minimized;
+        stepMinimize(this.#minState, this.#scrollPosition(el));
+        if (this.#minState.minimized !== was) this.#replan();
+      };
+      target.addEventListener("scroll", onScroll, { passive: true });
+      this.#unbindScroller = () => target.removeEventListener("scroll", onScroll);
+    }
+    #scrollPosition(el) {
+      const source = this.#isPage(el) ? this.ownerDocument.scrollingElement ?? el : el;
+      return clampScrollTop(source.scrollTop, source.scrollHeight, source.clientHeight);
+    }
+    /** Follows the scroller to what it is now; true when that took the bar out of the minimised state. */
+    #syncScroller() {
+      if (this.#wantedScroller() === this.#scrollerEl) return false;
+      const was = this.#minState.minimized;
+      this.#bindScroller();
+      return was;
+    }
+    // ---- the toggle and the sidebar over the content ------------------------------------------------------------
+    #toggleClick() {
+      const plan = this.#plan;
+      if (!plan) return;
+      if (this.#over) {
+        this.#setOver(false);
+      } else if (plan.nav.collapsible) {
+        this.setAttribute("collapsed", "");
+        this.#fireCollapse(true);
+      } else if (plan.nav.expandable === "beside") {
+        this.removeAttribute("collapsed");
+        this.#fireCollapse(false);
+      } else if (plan.nav.expandable === "over") {
+        this.#setOver(true);
+      }
+    }
+    #fireCollapse(collapsed) {
+      this.dispatchEvent(new CustomEvent("vire-nav-collapse", { bubbles: true, detail: { collapsed } }));
+    }
+    /** Closing by Escape or the scrim hands focus back to the toggle that opened the sidebar. */
+    #closeOver(pressed = false) {
+      const inside = this.#navEl?.contains(this.#activeElement()) ?? false;
+      this.#setOver(false);
+      if (!inside || !this.#toggle || this.#toggle.hidden) return;
+      this.#focusQuietly(this.#toggle);
+      if (pressed) this.#holdFocus();
+    }
+    // The scrim is gone by the time the press's mousedown lands on the content, whose default would blur the toggle.
+    #holdFocus() {
+      this.#unhold?.();
+      const doc = this.ownerDocument;
+      const hold = (e) => e.preventDefault();
+      const timer = window.setTimeout(() => off(), 300);
+      const off = () => {
+        doc.removeEventListener("mousedown", hold, true);
+        window.clearTimeout(timer);
+        this.#unhold = null;
+      };
+      doc.addEventListener("mousedown", hold, { capture: true, once: true });
+      this.#unhold = off;
+    }
+    #unhold = null;
+    #activeElement() {
+      return this.getRootNode().activeElement;
+    }
+    #focusQuietly(el) {
+      this.#handing = true;
+      try {
+        el.focus({ preventScroll: true });
+      } finally {
+        this.#handing = false;
+      }
+    }
+    #handing = false;
+    #setOver(open, replan = true) {
+      if (this.#over === open) return;
+      this.#over = open;
+      if (open && this.#navEl) {
+        const scrim = this.ownerDocument.createElement("div");
+        scrim.setAttribute("data-vk-scrim", "");
+        scrim.addEventListener("pointerdown", () => this.#closeOver(true));
+        this.#mine.add(scrim);
+        this.insertBefore(scrim, this.#navEl);
+        this.#scrim = scrim;
+      } else {
+        this.#scrim?.remove();
+        this.#scrim = null;
+      }
+      if (replan) this.#replan();
+    }
+    #syncToggle() {
+      const toggle = this.#toggle;
+      const shown = this.#shown;
+      if (!toggle || !shown) return;
+      const expanded = shown.nav.form === "sidebar";
+      toggle.setAttribute("aria-expanded", String(expanded));
+      toggle.setAttribute("aria-label", this.getAttribute("toggle-label") || DEFAULT_TOGGLE_LABEL);
+    }
+    #syncKeyShortcut(plan) {
+      const link = plan.search && plan.nav.search?.shortcut && plan.layout.search ? plan.search : null;
+      if (link !== this.#shortcut) this.#releaseShortcut();
+      if (!link) return;
+      if (!this.#shortcut) {
+        this.#shortcut = link;
+        this.#shortcutWas = link.getAttribute("aria-keyshortcuts");
+      }
+      link.setAttribute("aria-keyshortcuts", this.#searchKey());
+    }
+    #releaseShortcut() {
+      const link = this.#shortcut;
+      if (link) {
+        if (this.#shortcutWas === null) link.removeAttribute("aria-keyshortcuts");
+        else link.setAttribute("aria-keyshortcuts", this.#shortcutWas);
+      }
+      this.#shortcut = null;
+      this.#shortcutWas = null;
+    }
+    #shortcut = null;
+    #shortcutWas = null;
+    // ---- applying a form to the markup --------------------------------------------------------------------------
+    #setHidden(el, hidden) {
+      if (!this.#hiddenWas.has(el)) this.#hiddenWas.set(el, el.hasAttribute("hidden"));
+      el.toggleAttribute("hidden", hidden);
+    }
+    #slotOf(link) {
+      const item = link.closest("li");
+      return item && this.#navEl.contains(item) ? item : link;
+    }
+    #place(el, box2, hit) {
+      if (!this.#linkStyle.has(el)) this.#linkStyle.set(el, el.hasAttribute("style"));
+      const s = el.style;
+      s.setProperty("--vk-lx", px(box2.x));
+      s.setProperty("--vk-ly", px(box2.y));
+      s.setProperty("--vk-lw", px(box2.width));
+      s.setProperty("--vk-lh", px(box2.height));
+      s.setProperty("--vk-lr", px(box2.radius));
+      s.setProperty("--vk-slop-x", String(Math.max(0, (hit - box2.width) / 2)));
+      s.setProperty("--vk-slop-y", String(Math.max(0, (hit - box2.height) / 2)));
+    }
+    /** Turns the markup into this plan's form: which links show, where each sits, what the head holds. */
+    #applyShown(shown) {
+      this.#shown = shown;
+      const { layout, nav } = shown;
+      const { lists, secondaryList, primary, secondary, search } = this.#collect();
+      const focused = this.#navEl?.contains(this.#activeElement()) ? this.#activeElement() : null;
+      this.setAttribute("data-form", layout.form);
+      if (nav.search) this.setAttribute("data-search", nav.search.form);
+      else this.removeAttribute("data-search");
+      this.toggleAttribute("data-minimized", layout.minimized);
+      const hit = hitTarget(effectiveInput());
+      for (const link of [...primary, ...secondary]) {
+        this.#setHidden(this.#slotOf(link), !shown.visible.has(link));
+        const box2 = layout.items[shown.order.indexOf(link)];
+        if (box2 && shown.visible.has(link)) this.#place(link, box2, hit);
+      }
+      for (const list of lists) {
+        const secondaryOnly = secondaryList.includes(list);
+        this.#setHidden(list, secondaryOnly && !shown.secondaryShown);
+      }
+      if (search) {
+        this.#setHidden(search, layout.search === null);
+        if (layout.search) this.#place(search, layout.search, hit);
+      }
+      const toggle = this.#toggle;
+      if (toggle) {
+        toggle.hidden = layout.toggle === null;
+        if (layout.toggle) this.#place(toggle, layout.toggle, hit);
+        this.#syncToggle();
+      }
+      const rows = layout.form === "bar" ? [] : [...layout.items, ...layout.search ? [layout.search] : []];
+      const bottom = Math.max(0, ...rows.map((row) => row.y + row.height)) + 8;
+      this.#fits = rows.length === 0 || bottom <= layout.body.y + layout.body.height + 0.5;
+      if (focused && this.#loses(focused, shown)) this.#handFocus(shown);
+    }
+    #loses(el, shown) {
+      if (el === this.#toggle) return shown.layout.toggle === null;
+      if (el === shown.search) return shown.layout.search === null;
+      return shown.order.includes(el) && !shown.visible.has(el);
+    }
+    /** A link the form hides hands focus to the selected link, else the toggle, else the first link shown. */
+    #handFocus(shown) {
+      const selected = shown.order[shown.selected];
+      const first2 = shown.order.find((link) => shown.visible.has(link));
+      const target = selected && shown.visible.has(selected) ? selected : shown.layout.toggle ? this.#toggle : first2 ?? null;
+      if (target) this.#focusQuietly(target);
+    }
+    #fits = true;
+    // ---- drawing ------------------------------------------------------------------------------------------------
+    #restLayout() {
+      const morph = this.#morph;
+      if (!morph || currentNavFrame(morph).phase !== "rest") return null;
+      return morph.t.x >= 1 ? morph.to : morph.from;
+    }
+    #run() {
+      const instant = this.#presentation?.instantSprings ?? false;
+      if (instant && this.#morph && !this.#forced()) {
+        stepNavMorph(this.#morph, 0, true);
+        const layout = this.#restLayout();
+        if (layout) stepNavDrag(this.#drag, 0, true);
+        stepFormMorph(this.#pillAnim.state, 0, 1, true);
+        stepFormMorph(this.#accAnim.state, 0, 1, true);
+      }
+      this.#paint();
+      if (this.#frame || this.#forced()) return;
+      this.#lastFrame = 0;
+      this.#frame = requestAnimationFrame((t) => this.#tick(t));
+    }
+    #tick(now) {
+      this.#frame = 0;
+      const morph = this.#morph;
+      if (!this.isConnected || !morph || 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;
+      let moving = stepNavMorph(morph, dt, instant);
+      const layout = this.#restLayout();
+      if (layout && stepNavDrag(this.#drag, dt, instant)) moving = true;
+      if (stepFormMorph(this.#pillAnim.state, dt, 1, instant)) moving = true;
+      if (stepFormMorph(this.#accAnim.state, dt, 1, instant)) moving = true;
+      this.#paint();
+      if (moving) this.#frame = requestAnimationFrame((t) => this.#tick(t));
+    }
+    #paint() {
+      const plan = this.#plan;
+      const morph = this.#morph;
+      const nav = this.#navEl;
+      if (!plan || !morph || !nav) return;
+      const frame = currentNavFrame(morph);
+      const shownLayout = frame.showing === "from" ? morph.from : morph.to;
+      const shown = this.#plans.get(shownLayout) ?? plan;
+      if (shown !== this.#shown) this.#applyShown(shown);
+      const rest = frame.phase === "rest";
+      const dragFrame = rest ? navDragFrame(this.#drag, shownLayout) : null;
+      const lens = frame.lens ? { box: frame.lens.box, lift: frame.lens.lift, dragging: false, hover: -1 } : dragFrame ? { box: dragFrame.lens, lift: dragFrame.lift, dragging: true, hover: dragFrame.hover } : null;
+      this.toggleAttribute("data-moving", !rest || dragFrame !== null);
+      const scrolls = rest && dragFrame === null && !this.#fits;
+      let restore = false;
+      if (this.hasAttribute("data-scroll") !== scrolls) {
+        this.toggleAttribute("data-scroll", scrolls);
+        this.#scrollReset = !scrolls;
+        restore = scrolls;
+      }
+      const ink = frame.showing === "from" ? frame.ink.outgoing : frame.ink.incoming;
+      this.style.setProperty("--vk-ink", clamp012(ink).toFixed(3));
+      const box2 = frame.body;
+      const s = nav.style;
+      s.setProperty("--vk-x", px(box2.x));
+      s.setProperty("--vk-y", px(box2.y));
+      s.setProperty("--vk-w", px(box2.width));
+      s.setProperty("--vk-h", px(box2.height));
+      s.setProperty("--vk-r", px(box2.radius));
+      if (restore) nav.scrollTop = this.#scrollTops.get(shown.layout.form) ?? 0;
+      const pill = shown === plan ? this.#pillBox() : shownLayout.pill;
+      this.#paintPill(shown.layout.minimized ? null : pill, ink * (1 - (lens?.lift ?? 0)));
+      this.#paintLens(lens, shown, plan);
+      this.#paintAccessory();
+      if (this.#body?.session) {
+        const second = frame.second;
+        const centre = (b) => ({ x: b.x + b.width / 2, y: b.y + b.height / 2 });
+        const morphShape = second ? {
+          smoothing: round(second.smoothing),
+          shape: {
+            offsetX: round(centre(second.box).x - centre(box2).x),
+            offsetY: round(centre(second.box).y - centre(box2).y),
+            width: round(second.box.width),
+            height: round(second.box.height),
+            cornerRadius: round(second.box.radius)
+          }
+        } : null;
+        const soft = shown.layout.form === "sidebar";
+        this.#push(this.#body, box2, soft ? "s" : "c", () => this.#bodyMaterial(soft), morphShape);
+      }
+    }
+    #bodyMaterial(soft) {
+      return soft ? menuMaterial(vireglass.VIREGLASS_CONTROL_MATERIAL, 0) : atomMaterial(vireglass.VIREGLASS_CONTROL_MATERIAL, "iconButton", ATOM_AT_REST);
+    }
+    #paintPill(box2, opacity) {
+      const pill = this.#pill;
+      if (!pill) return;
+      pill.hidden = box2 === null;
+      if (!box2) return;
+      const s = pill.style;
+      s.setProperty("--vk-px", px(box2.x));
+      s.setProperty("--vk-py", px(box2.y));
+      s.setProperty("--vk-pw", px(box2.width));
+      s.setProperty("--vk-ph", px(box2.height));
+      s.setProperty("--vk-pr", px(box2.radius));
+      s.setProperty("--vk-pill-op", clamp012(opacity).toFixed(3));
+    }
+    #paintLens(lens, shown, plan) {
+      const el = this.#lens;
+      const slot = this.#lensSlot;
+      if (!el || !slot) return;
+      const visible = lens !== null;
+      this.toggleAttribute("data-lens", visible);
+      if (!lens) {
+        this.#detach(slot);
+        this.#markHover(-1, shown);
+        return;
+      }
+      const s = el.style;
+      s.setProperty("--vk-x", px(lens.box.x));
+      s.setProperty("--vk-y", px(lens.box.y));
+      s.setProperty("--vk-w", px(lens.box.width));
+      s.setProperty("--vk-h", px(lens.box.height));
+      s.setProperty("--vk-r", px(lens.box.radius));
+      s.setProperty("--vk-lift", clamp012(lens.lift).toFixed(3));
+      el.setAttribute("data-form", shown.layout.form);
+      el.toggleAttribute("data-dragging", lens.dragging);
+      this.#markHover(lens.dragging ? lens.hover : -1, shown);
+      const selected = plan.order[plan.selected] ?? null;
+      if (selected !== this.#lensFor) {
+        this.#lensFor = selected;
+        const inner = this.#lensInner;
+        inner.replaceChildren(...selected ? Array.from(selected.childNodes).map((node) => node.cloneNode(true)) : []);
+        for (const withId of Array.from(inner.querySelectorAll("[id]"))) withId.removeAttribute("id");
+      }
+      if (this.#presentation?.glass && !this.#glassBroken) {
+        const key = this.#modeKey;
+        if (slot.key !== key) this.#attach(slot, key, () => this.#lensMaterial(0), lens.box);
+        const step = round(clamp012(lens.lift) * MATERIAL_STEPS3) / MATERIAL_STEPS3;
+        if (slot.session) {
+          const body = atomBody(vireglass.VIREGLASS_CONTROL_MATERIAL, { ...ATOM_AT_REST, pressed: step }, this.#presentation.frost);
+          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));
+          if (Math.abs(slot.appear - lens.lift) > 0.02) {
+            slot.appear = lens.lift;
+            slot.session.setAppear(clamp012(lens.lift));
+          }
+          this.#push(slot, lens.box, String(step), () => this.#lensMaterial(step), void 0);
+        }
+      }
+    }
+    #lensMaterial(step) {
+      return atomMaterial(vireglass.VIREGLASS_CONTROL_MATERIAL, "iconButton", { ...ATOM_AT_REST, pressed: step });
+    }
+    #hovered = null;
+    #markHover(index, shown) {
+      const link = index >= 0 ? shown.order[index] ?? null : null;
+      if (link === this.#hovered) return;
+      this.#hovered?.removeAttribute("data-lens-over");
+      this.#hovered = link;
+      link?.setAttribute("data-lens-over", "");
+    }
+    #paintAccessory() {
+      const el = this.#accessory;
+      const slot = this.#accSlot;
+      if (!el || !slot) return;
+      const anim = this.#accAnim;
+      const frame = anim.to ? this.#accBox() : null;
+      if (!frame || !anim.to) {
+        this.#setHidden(el, true);
+        return;
+      }
+      this.#setHidden(el, false);
+      const moving = anim.state.t.x < 1 && anim.from !== null;
+      el.toggleAttribute("data-moving", moving);
+      el.setAttribute("data-placement", frame.placement);
+      const box2 = frame.box;
+      const s = el.style;
+      s.setProperty("--vk-x", px(box2.x));
+      s.setProperty("--vk-y", px(box2.y));
+      s.setProperty("--vk-w", px(box2.width));
+      s.setProperty("--vk-h", px(box2.height));
+      s.setProperty("--vk-r", px(box2.radius));
+      if (moving && anim.from) {
+        const f = formMorphFrame(anim.from.box, anim.to.box, anim.state);
+        s.setProperty("--vk-ink", clamp012(f.showing === "from" ? f.ink.outgoing : f.ink.incoming).toFixed(3));
+      }
+      this.#push(slot, box2, "c", () => this.#bodyMaterial(false), void 0);
+    }
+    // ---- the glass ----------------------------------------------------------------------------------------------
+    #detach(slot) {
+      slot.token += 1;
+      slot.session?.destroy();
+      slot.session = null;
+      slot.key = "";
+      slot.last = emptyLast();
+      slot.appear = -1;
+    }
+    #attach(slot, key, material, box2) {
+      if (key === slot.key) return;
+      this.#detach(slot);
+      slot.key = key;
+      if (!key || !this.#mode) return;
+      const token = slot.token;
+      void attachControlGlass(
+        slot.el,
+        {
+          material: material(),
+          geometry: { width: round(box2.width), height: round(box2.height), cornerRadius: round(box2.radius) },
+          accessibility: this.#mode,
+          onTouch: false,
+          sample: this.#sample,
+          interactive: false
+        },
+        () => token === slot.token && this.isConnected
+      ).then((session) => {
+        if (!session) return;
+        slot.session = session;
+        slot.last = emptyLast();
+        this.#paint();
+        if (slot === this.#body) this.dispatchEvent(new CustomEvent("vire-glass-ready"));
+      }).catch(() => {
+        if (token !== slot.token) return;
+        slot.key = "";
+        this.#glassBroken = true;
+        this.#refreshMode(false, true);
+      });
+    }
+    /** Hands the lens only what changed: a new morph or material rebuilds its filter, a moved box needs nothing. */
+    #push(slot, box2, materialKey, material, lens) {
+      const session = slot.session;
+      if (!session) return;
+      const geometry = { width: round(box2.width), height: round(box2.height), cornerRadius: round(box2.radius) };
+      const key = {
+        material: materialKey,
+        morph: lens === void 0 ? "-" : lens ?? "none",
+        geometry: `${geometry.width}x${geometry.height}r${geometry.cornerRadius}`
+      };
+      const last2 = slot.last;
+      if (key.material === last2.material && sameMorph(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 = material();
+      if (lens !== void 0 && !sameMorph(key.morph, last2.morph)) next.morph = lens;
+      slot.last = key;
+      session.frame(next);
+    }
+    // ---- modes --------------------------------------------------------------------------------------------------
+    #wantsGlass() {
+      const wanted = this.getAttribute("glass");
+      return wanted !== null && GLASS_ON2.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.#modeKey = JSON.stringify(mode);
+      this.#presentation = next;
+      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");
+      const body = atomBody(vireglass.VIREGLASS_CONTROL_MATERIAL, ATOM_AT_REST, next.frost);
+      this.style.setProperty("--vk-body-alpha", body.alpha.toFixed(3));
+      this.style.setProperty("--vk-body-white", body.white.toFixed(3));
+      this.style.setProperty("--vk-body-lift", body.lift.toFixed(3));
+      if (changed) {
+        for (const slot of [this.#body, this.#lensSlot, this.#accSlot]) if (slot) this.#detach(slot);
+        this.#ensureGlass();
+      }
+      if (this.#ctx) this.#run();
+    }
+    /** Attaches the body's and the accessory's glass once the first form is known; the lens waits for its first move. */
+    #ensureGlass() {
+      const layout = this.#plan?.layout;
+      if (!layout) return;
+      const key = this.#presentation?.glass && this.#mode ? this.#modeKey : "";
+      if (this.#body) this.#attach(this.#body, key, () => this.#bodyMaterial(false), layout.body);
+      if (this.#accSlot && layout.accessory) this.#attach(this.#accSlot, key, () => this.#bodyMaterial(false), layout.accessory);
+    }
+    // ---- the drag -----------------------------------------------------------------------------------------------
+    #pressDown(e) {
+      if (e.button !== 0 || !e.isPrimary || this.#forced() || this.#press) return;
+      const target = e.target instanceof Element ? e.target : null;
+      if (target?.closest("button, a[data-search]")) return;
+      const layout = this.#restLayout();
+      if (!layout || layout.form !== "bar" || layout.minimized) return;
+      const left = this.getBoundingClientRect().left;
+      pressNavDrag(this.#drag, layout, e.clientX - left);
+      if (!this.#drag.active) return;
+      this.#press = { id: e.pointerId, startX: e.clientX, left, dragging: false, last: e.timeStamp, onLink: target?.closest("a") != null };
+      const win = this.ownerDocument.defaultView;
+      const move = (ev) => this.#pressMove(ev);
+      const up = (ev) => this.#pressUp(ev, false);
+      const cancel = (ev) => this.#pressUp(ev, true);
+      win.addEventListener("pointermove", move);
+      win.addEventListener("pointerup", up);
+      win.addEventListener("pointercancel", cancel);
+      this.#endPress = () => {
+        win.removeEventListener("pointermove", move);
+        win.removeEventListener("pointerup", up);
+        win.removeEventListener("pointercancel", cancel);
+        this.#endPress = null;
+      };
+      this.#run();
+    }
+    #endPress = null;
+    #pressMove(e) {
+      const press = this.#press;
+      const layout = this.#restLayout();
+      if (!press || e.pointerId !== press.id || !layout) return;
+      if (!press.dragging) {
+        if (Math.abs(e.clientX - press.startX) <= DRAG_SLOP) return;
+        press.dragging = true;
+        try {
+          this.#navEl?.setPointerCapture(e.pointerId);
+        } catch {
+        }
+      }
+      const dt = Math.min(Math.max((e.timeStamp - press.last) / 1e3, 1 / 240), 0.05);
+      press.last = e.timeStamp;
+      moveNavDrag(this.#drag, layout, e.clientX - press.left, dt);
+      this.#run();
+    }
+    #pressUp(e, cancelled) {
+      const press = this.#press;
+      const plan = this.#plan;
+      const layout = this.#restLayout();
+      if (!press || e.pointerId !== press.id) return;
+      this.#press = null;
+      this.#endPress?.();
+      try {
+        this.#navEl?.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+      if (!plan) return;
+      const bar = layout !== null && layout.form === "bar" && !layout.minimized;
+      if (cancelled || !bar || !press.dragging && !press.onLink) {
+        cancelNavDrag(this.#drag, layout ?? plan.layout, plan.selected);
+      } else {
+        const index = releaseNavDrag(this.#drag, layout);
+        if (press.dragging) {
+          plan.order[index]?.click();
+          this.#swallowClick();
+        }
+      }
+      this.#run();
+    }
+    #swallowClick() {
+      this.#swallow?.();
+      const win = this.ownerDocument.defaultView;
+      const swallow = (e) => {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        off();
+      };
+      const timer = win.setTimeout(() => off(), SWALLOW_MS);
+      const off = () => {
+        win.removeEventListener("click", swallow, true);
+        win.clearTimeout(timer);
+        this.#swallow = null;
+      };
+      win.addEventListener("click", swallow, true);
+      this.#swallow = off;
+    }
+    // ---- forced states ------------------------------------------------------------------------------------------
+    #applyForced() {
+      cancelAnimationFrame(this.#frame);
+      this.#frame = 0;
+      this.#drag = createNavDrag();
+      this.#morph = null;
+      this.#shown = null;
+      this.#replan();
+    }
+  };
+}
 
 // src/web/index.ts
 var BUTTON_TAG = "vire-button";
 var ICON_BUTTON_TAG = "vire-icon-button";
 var MENU_TAG = "vire-menu";
+var NAV_TAG = "vire-nav";
 function defineVireElements(options = {}) {
   const registry = options.registry ?? (typeof customElements === "undefined" ? void 0 : customElements);
   if (!registry) return;
@@ -1878,15 +3979,24 @@ function defineVireElements(options = {}) {
     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 }));
+  if (!registry.get(NAV_TAG)) registry.define(NAV_TAG, createNavElementClass({ nonce: options.nonce }));
 }
 
 exports.BUTTON_TAG = BUTTON_TAG;
 exports.ICON_BUTTON_TAG = ICON_BUTTON_TAG;
 exports.MENU_TAG = MENU_TAG;
+exports.NAV_TAG = NAV_TAG;
 exports.STYLES = STYLES;
 exports.defineVireElements = defineVireElements;
+exports.effectiveInput = effectiveInput;
 exports.getA11yOverride = getA11yOverride;
+exports.getInputOverride = getInputOverride;
 exports.setA11yOverride = setA11yOverride;
+exports.setInputOverride = setInputOverride;
+exports.setViewportOverride = setViewportOverride;
 exports.systemA11y = systemA11y;
+exports.systemInput = systemInput;
+exports.viewportSegments = viewportSegments;
+exports.watchAdaptiveContext = watchAdaptiveContext;
 //# sourceMappingURL=web.cjs.map
 //# sourceMappingURL=web.cjs.map