@dazecoop/liquid-glass 0.0.0-stage → 0.1.2

package/lib/index.cjs

@@ -0,0 +1,1184 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const SVG_NS = "http://www.w3.org/2000/svg";
+const LIGHT_HEIGHT = 0.5;
+const LUMA = [0.2126, 0.7152, 0.0722];
+const ARC = 0.94;
+const ARC_DROP = 1 - Math.sqrt(1 - ARC * ARC);
+const UI_SPRING = { stiffness: 440, damping: 42 };
+const CLONE_CSS = `
+  [data-glass-copy], [data-glass-copy] *,
+  [data-glass-copy]::before, [data-glass-copy]::after,
+  [data-glass-copy] *::before, [data-glass-copy] *::after {
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+    will-change: auto !important;
+    animation: none !important;
+    transition: none !important;
+  }`;
+let uid = 0;
+class Spring {
+  // `wake` is called whenever the target changes, so a sleeping lens starts moving
+  constructor(value, { stiffness = 260, damping = 26 } = {}, wake = null) {
+    this.wake = wake;
+    this.value = value;
+    this.target = value;
+    this.velocity = 0;
+    this.stiffness = stiffness;
+    this.damping = damping;
+  }
+  get target() {
+    return this._target;
+  }
+  set target(v) {
+    this._target = v;
+    this.wake?.();
+  }
+  step(dt) {
+    const force = (this.target - this.value) * this.stiffness - this.velocity * this.damping;
+    this.velocity += force * dt;
+    this.value += this.velocity * dt;
+  }
+  snap(value) {
+    this.value = this.target = value;
+    this.velocity = 0;
+  }
+  get settled() {
+    return Math.abs(this.target - this.value) < 0.01 && Math.abs(this.velocity) < 0.01;
+  }
+}
+function sdRoundBox(px, py, bx, by, r) {
+  const qx = Math.abs(px) - bx + r;
+  const qy = Math.abs(py) - by + r;
+  return Math.hypot(Math.max(qx, 0), Math.max(qy, 0)) + Math.min(Math.max(qx, qy), 0) - r;
+}
+function pathTo(root, el) {
+  const path = [];
+  for (let n = el; n && n !== root; n = n.parentElement) path.unshift([...n.parentElement.children].indexOf(n));
+  return path;
+}
+function follow(root, path) {
+  let n = root;
+  for (const i of path) n = n?.children[i];
+  return n;
+}
+const insideGlass = (node) => (node.nodeType === 1 ? node : node.parentElement)?.closest("[data-glass]");
+const insideSkip = (node) => (node.nodeType === 1 ? node : node.parentElement)?.closest("[data-glass-skip]");
+class LiquidGlass {
+  // Starting looks. Each is plain parameters: glass.set(LiquidGlass.presets.frosted).
+  // Dome rounds the bevel all the way to the middle, so it reads best on a circle.
+  static presets = {
+    clear: { refraction: 40, frost: 2, chroma: 0.4, zoom: 1.08, bevel: 35, specular: 0.35, fresnel: 0.3, brightness: 0, saturation: 0, tint: "", rim: 1 },
+    frosted: { refraction: 24, frost: 14, chroma: 0.15, zoom: 1, bevel: 30, specular: 0.5, fresnel: 0.5, brightness: 0.08, saturation: 0.3, tint: "rgb(255 255 255 / 0.08)", rim: 1 },
+    dark: { refraction: 32, frost: 6, chroma: 0.2, zoom: 1.04, bevel: 35, specular: 0.3, fresnel: 0.2, brightness: -0.18, saturation: -0.2, tint: "rgb(0 0 0 / 0.25)", rim: 0.6 },
+    prism: { refraction: 80, frost: 0, chroma: 1, zoom: 1.12, bevel: 50, specular: 0.25, fresnel: 0.4, brightness: 0.02, saturation: 0.5, tint: "", rim: 0.8 },
+    dome: { refraction: 50, frost: 0, chroma: 0.2, zoom: 1.35, bevel: 160, specular: 0.7, fresnel: 0.6, brightness: 0, saturation: 0.1, tint: "", rim: 1 }
+  };
+  constructor(source, { anchor = null, container = null, button = false, throttle = 0, ...params } = {}) {
+    this.source = source;
+    this.anchor = anchor;
+    this.container = anchor ? null : container;
+    this.button = Boolean(button && anchor);
+    this.throttle = throttle;
+    this.syncedAt = -Infinity;
+    this.params = {
+      width: 280,
+      height: 180,
+      radius: 64,
+      ...LiquidGlass.presets.clear,
+      ...params
+    };
+    this.reducedMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const wake = () => this.#wake();
+    this.x = new Spring(innerWidth / 2, void 0, wake);
+    this.y = new Spring(innerHeight / 2, void 0, wake);
+    this.scale = new Spring(1, { stiffness: 320, damping: 18 }, wake);
+    this.stretchX = new Spring(1, { stiffness: 180, damping: 14 });
+    this.stretchY = new Spring(1, { stiffness: 180, damping: 14 });
+    this.springs = [this.x, this.y, this.scale, this.stretchX, this.stretchY];
+    this.hovered = new Spring(0, UI_SPRING, wake);
+    this.pressed = new Spring(0, UI_SPRING, wake);
+    this.scrolled = /* @__PURE__ */ new Set();
+    this.popScale = 1;
+    this.#build();
+    this.#observe();
+    this.shapeDirty = true;
+    this.copyDirty = true;
+    this.placeDirty = true;
+    this.#wake();
+  }
+  // The frame loop sleeps once nothing is moving or waiting to be redrawn, so an idle or
+  // hidden lens costs nothing per frame or per scroll; anything that changes it wakes it
+  #awake = false;
+  #raf = 0;
+  // Everything the glass listens to or watches, so destroy() can let go of it all
+  #abort = new AbortController();
+  #observers = [];
+  // Inline styles set on the anchor or container, to put back on destroy()
+  #restore = [];
+  #wake() {
+    if (this.#awake || this.destroyed) return;
+    this.#awake = true;
+    if (this.el && !this.anchor) this.el.style.willChange = "transform";
+    this.last = performance.now();
+    this.#raf = requestAnimationFrame((t) => this.#frame(t));
+  }
+  // Sets an inline style on an element that isn't the glass's own, remembering the old value
+  #style(el, prop, value) {
+    this.#restore.push([el, prop, el.style[prop]]);
+    el.style[prop] = value;
+  }
+  // Shown, or showing: anchored glass always is; a lens while visible or popping
+  get #shown() {
+    return Boolean(this.anchor || this.visible || this.pop);
+  }
+  #build() {
+    const id = `liquid-glass-${++uid}`;
+    this.svg = document.createElementNS(SVG_NS, "svg");
+    this.svg.setAttribute("aria-hidden", "true");
+    this.svg.style.cssText = "position:absolute;width:0;height:0;overflow:hidden";
+    this.svg.innerHTML = `<style>${CLONE_CSS}</style><filter id="${id}" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB" />`;
+    this.filter = this.svg.querySelector("filter");
+    this.el = document.createElement("div");
+    this.el.dataset.glass = "";
+    this.el.setAttribute("aria-hidden", "true");
+    this.el.style.cssText = "pointer-events:none;overflow:hidden;box-shadow:0 12px 34px -6px rgb(0 0 0 / 0.35)";
+    if (this.anchor) {
+      if (getComputedStyle(this.anchor).position === "static") this.#style(this.anchor, "position", "relative");
+      this.#style(this.anchor, "isolation", "isolate");
+      this.el.style.cssText += ";position:absolute;inset:0;z-index:-1;border-radius:inherit";
+    } else {
+      const position = this.container ? "absolute;z-index:1" : "fixed;z-index:2147483000";
+      this.el.style.cssText += `;position:${position};left:0;top:0;opacity:0;transition:opacity .3s`;
+      if (this.container && getComputedStyle(this.container).position === "static") this.#style(this.container, "position", "relative");
+    }
+    this.frost = document.createElement("div");
+    this.frost.style.cssText = "position:absolute";
+    this.view = document.createElement("div");
+    this.view.style.cssText = `position:absolute;inset:0;overflow:hidden;filter:url(#${id})`;
+    this.copyHost = document.createElement("div");
+    this.copyHost.inert = true;
+    this.copyHost.style.cssText = "position:absolute;left:0;top:0";
+    this.rim = document.createElement("canvas");
+    this.rim.style.cssText = "position:absolute;inset:0;width:100%;height:100%";
+    this.view.append(this.copyHost);
+    this.frost.append(this.view);
+    this.el.append(this.frost, this.rim);
+    document.body.append(this.svg);
+    (this.anchor ?? this.container ?? document.body).prepend(this.el);
+    const { signal } = this.#abort;
+    if (this.anchor) {
+      const resize = new ResizeObserver(() => {
+        this.set({
+          width: this.anchor.offsetWidth,
+          height: this.anchor.offsetHeight,
+          radius: parseFloat(getComputedStyle(this.anchor).borderTopLeftRadius) || 0
+        });
+      });
+      resize.observe(this.anchor);
+      this.#observers.push(resize);
+    }
+    if (this.button) {
+      const a = this.anchor;
+      const release = () => this.pressed.target = 0;
+      a.addEventListener("pointerenter", () => this.hovered.target = 1, { signal });
+      a.addEventListener(
+        "pointerleave",
+        () => {
+          this.hovered.target = 0;
+          release();
+        },
+        { signal }
+      );
+      a.addEventListener("pointerdown", () => this.pressed.target = 1, { signal });
+      a.addEventListener("pointerup", release, { signal });
+      a.addEventListener("pointercancel", release, { signal });
+      a.addEventListener(
+        "keydown",
+        (e) => {
+          if (e.key === " " || e.key === "Enter") this.pressed.target = 1;
+        },
+        { signal }
+      );
+      a.addEventListener("keyup", release, { signal });
+      a.addEventListener("blur", release, { signal });
+    }
+  }
+  #observe() {
+    const { signal } = this.#abort;
+    const dirty = () => {
+      this.copyDirty = true;
+      if (this.#shown) this.#wake();
+    };
+    const mutations = new MutationObserver((records) => {
+      const counts = (r) => !insideGlass(r.target) && !insideSkip(r.target);
+      if (records.some(counts)) dirty();
+    });
+    mutations.observe(this.source, { subtree: true, childList: true, attributes: true, characterData: true });
+    this.#observers.push(mutations);
+    this.source.addEventListener("input", dirty, { capture: true, signal });
+    this.source.addEventListener(
+      "scroll",
+      (e) => {
+        if (insideGlass(e.target)) return;
+        this.scrolled.add(e.target);
+        dirty();
+      },
+      { capture: true, signal }
+    );
+    addEventListener("resize", dirty, { signal });
+    addEventListener("scroll", () => {
+      if (!this.#shown) return;
+      this.rectDirty = true;
+      this.#wake();
+    }, { passive: true, signal });
+  }
+  #syncCopy() {
+    const copy = this.source.cloneNode(true);
+    copy.dataset.glassCopy = "";
+    const live = "input, textarea, select, canvas";
+    const to = copy.querySelectorAll(live);
+    this.source.querySelectorAll(live).forEach((src, i) => {
+      const dst = to[i];
+      if ("value" in src && src.type !== "file") dst.value = src.value;
+      if ("checked" in src) dst.checked = src.checked;
+      if (src instanceof HTMLCanvasElement) dst.getContext("2d")?.drawImage(src, 0, 0);
+    });
+    const scrolls = [];
+    for (const el of this.scrolled) {
+      if (!this.source.contains(el)) this.scrolled.delete(el);
+      else scrolls.push([follow(copy, pathTo(this.source, el)), el.scrollLeft, el.scrollTop]);
+    }
+    if (this.anchor && this.source.contains(this.anchor)) follow(copy, pathTo(this.source, this.anchor))?.remove();
+    else if (this.source.contains(this.el)) follow(copy, pathTo(this.source, this.el))?.remove();
+    for (const glass of copy.querySelectorAll("[data-glass]")) {
+      for (const inner of glass.querySelectorAll("[data-glass]")) inner.remove();
+    }
+    copy.removeAttribute("id");
+    for (const el of copy.querySelectorAll("[id]")) el.removeAttribute("id");
+    const rect = this.source.getBoundingClientRect();
+    this.sourceRect = rect;
+    this.containerRect = this.container?.getBoundingClientRect();
+    Object.assign(copy.style, {
+      position: "absolute",
+      inset: "auto",
+      left: "0",
+      top: "0",
+      margin: "0",
+      transform: "none",
+      translate: "none",
+      rotate: "none",
+      scale: "none",
+      width: `${rect.width}px`,
+      height: `${rect.height}px`
+    });
+    this.copyHost.replaceChildren(copy);
+    for (const [el, left, top] of scrolls) el?.scrollTo(left, top);
+    this.copyDirty = false;
+  }
+  #buildShape() {
+    const { width, height, radius, bevel: depth, refraction, frost, chroma, zoom, specular, fresnel, tint, rim: rimStrength } = this.params;
+    const body = this.params.body ?? 1;
+    const dpr = Math.min(devicePixelRatio || 1, 2);
+    const hw = width / 2;
+    const hh = height / 2;
+    const r = Math.min(radius, hw, hh);
+    const bevel = Math.max(Math.min(depth, hw, hh), 1);
+    const sdf = (x, y) => sdRoundBox(x, y, hw, hh, r);
+    const normal = (px, py, step) => {
+      const nx = sdf(px + step, py) - sdf(px - step, py);
+      const ny = sdf(px, py + step) - sdf(px, py - step);
+      const len = Math.hypot(nx, ny) || 1;
+      return [nx / len, ny / len];
+    };
+    const z = zoom;
+    const mhw = hw / z;
+    const mhh = hh / z;
+    const mbevel = bevel / z;
+    const mrefraction = refraction / z;
+    const msdf = (x, y) => sdRoundBox(x, y, mhw, mhh, r / z);
+    const mres = dpr * Math.max(z, 1);
+    const pad = Math.ceil(frost * 1.5 / z);
+    this.inner = { x: mhw + pad, y: mhh + pad };
+    const scale = mrefraction * 2 + Math.sign(mrefraction || 1);
+    const mfalloff = (this.params.falloff ?? 0) / z;
+    const map = document.createElement("canvas");
+    map.width = Math.ceil((mhw + pad) * 2 * mres);
+    map.height = Math.ceil((mhh + pad) * 2 * mres);
+    const mctx = map.getContext("2d");
+    const md = mctx.createImageData(map.width, map.height);
+    for (let y = 0; y < map.height; y++) {
+      for (let x = 0; x < map.width; x++) {
+        const px = (x + 0.5) / mres - mhw - pad;
+        const py = (y + 0.5) / mres - mhh - pad;
+        let ox = 0;
+        let oy = 0;
+        const d = msdf(px, py);
+        const exp = mfalloff > 0;
+        if (d < 0 && (exp ? d > -mfalloff * 6 : d > -mbevel) && refraction !== 0) {
+          let bend;
+          if (exp) bend = Math.exp(d / mfalloff) * mrefraction;
+          else {
+            const rim2 = (1 + d / mbevel) * ARC;
+            bend = (1 - Math.sqrt(1 - rim2 * rim2)) / ARC_DROP * mrefraction;
+          }
+          const nx = msdf(px + 0.5 / mres, py) - msdf(px - 0.5 / mres, py);
+          const ny = msdf(px, py + 0.5 / mres) - msdf(px, py - 0.5 / mres);
+          const len = Math.hypot(nx, ny) || 1;
+          ox = nx / len * bend;
+          oy = ny / len * bend;
+        }
+        const i = (y * map.width + x) * 4;
+        md.data[i] = (0.5 - ox / scale) * 255;
+        md.data[i + 1] = (0.5 - oy / scale) * 255;
+        md.data[i + 3] = 255;
+      }
+    }
+    mctx.putImageData(md, 0, 0);
+    const rim = this.rim;
+    rim.width = Math.ceil(width * dpr);
+    rim.height = Math.ceil(height * dpr);
+    const rctx = rim.getContext("2d");
+    const rd = rctx.createImageData(rim.width, rim.height);
+    const angle = (this.params.lightAngle ?? -123.5) * Math.PI / 180;
+    const lx = Math.cos(angle);
+    const ly = Math.sin(angle);
+    const flat = Math.sqrt(1 - LIGHT_HEIGHT ** 2);
+    const half = [lx * flat, ly * flat, LIGHT_HEIGHT + 1];
+    const halfLen = Math.hypot(...half);
+    const [hx, hy, hz] = half.map((v) => v / halfLen);
+    for (let y = 0; y < rim.height; y++) {
+      const py = (y + 0.5) / dpr - hh;
+      const sheen = (1 - (py + hh) / height) * 0.05;
+      for (let x = 0; x < rim.width; x++) {
+        const px = (x + 0.5) / dpr - hw;
+        const d = sdf(px, py);
+        if (d > 0) continue;
+        let a = (0.06 + sheen) * body;
+        if (d > -bevel) {
+          const amt = 1 + d / bevel;
+          const [nx, ny] = normal(px, py, 1 / dpr);
+          const facing = nx * lx + ny * ly;
+          const light = amt ** 3 * (0.55 * Math.max(facing, 0) + 0.22 * Math.max(-facing, 0));
+          const hairline = (1 - Math.min(-d / 1.5, 1)) * 0.35;
+          a += (light + hairline) * rimStrength;
+          const nz = Math.sqrt(1 - amt * amt);
+          const spec = Math.max(nx * amt * hx + ny * amt * hy + nz * hz, 0) ** 48;
+          a += specular * spec * 1.4 + fresnel * (1 - nz) ** 3 * 0.5;
+        }
+        const i = (y * rim.width + x) * 4;
+        rd.data[i] = rd.data[i + 1] = rd.data[i + 2] = 255;
+        rd.data[i + 3] = Math.min(a, 1) * 255;
+      }
+    }
+    rctx.putImageData(rd, 0, 0);
+    rim.style.background = tint;
+    const href = map.toDataURL();
+    const c = chroma * 0.35;
+    const displace = (k, result) => `<feDisplacementMap in="SourceGraphic" in2="map" scale="${scale * k}" xChannelSelector="R" yChannelSelector="G" result="${result}" />`;
+    this.filterBase = `<feImage href="${href}" result="map" preserveAspectRatio="none" />` + (c > 1e-3 ? displace(1 + c, "dr") + displace(1, "dg") + displace(1 - c, "db") + `<feColorMatrix in="dr" values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" result="r" />
+           <feColorMatrix in="dg" values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0" result="g" />
+           <feColorMatrix in="db" values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0" result="b" />
+           <feComposite in="r" in2="g" operator="arithmetic" k2="1" k3="1" result="rg" />
+           <feComposite in="rg" in2="b" operator="arithmetic" k2="1" k3="1" />` : displace(1, "out"));
+    this.#writeFilter();
+    Object.assign(this.frost.style, {
+      left: `${hw - mhw - pad}px`,
+      top: `${hh - mhh - pad}px`,
+      width: `${(mhw + pad) * 2}px`,
+      height: `${(mhh + pad) * 2}px`,
+      transform: z === 1 ? "" : `scale(${z})`
+    });
+    this.#applyButton();
+    if (!this.anchor) {
+      this.el.style.width = `${width}px`;
+      this.el.style.height = `${height}px`;
+      this.el.style.borderRadius = `${r}px`;
+    }
+    this.shapeDirty = false;
+  }
+  // Saturation around Rec. 709 luma, then brightness as an offset, in one matrix
+  #tone() {
+    const { brightness: b, saturation } = this.params;
+    if (!b && !saturation) return "";
+    const s = 1 + saturation;
+    const rows = [0, 1, 2].map(
+      (i) => [...LUMA.map((l, j) => l * (1 - s) + (i === j ? s : 0)), 0, b].map((v) => +v.toFixed(4)).join(" ")
+    );
+    return `<feColorMatrix type="matrix" values="${rows.join("  ")}  0 0 0 1 0" />`;
+  }
+  // The whole filter is rewritten even when only the tone changes: Safari and Firefox can
+  // keep showing the old result when a step is removed from a live filter. The map, the
+  // expensive part, is reused, so a tone change stays cheap.
+  #writeFilter() {
+    this.filter.innerHTML = this.filterBase + this.#tone();
+    this.displacers = [...this.filter.querySelectorAll("feDisplacementMap")].map((el) => [el, Number(el.getAttribute("scale"))]);
+  }
+  // Frost blur, plus the button's hover and press state
+  #applyButton() {
+    const { frost } = this.params;
+    const parts = frost > 0 ? [`blur(${frost / 2 / this.params.zoom}px)`] : [];
+    if (this.button) {
+      const h = this.hovered.value;
+      const p = this.pressed.value;
+      for (const [el, base] of this.displacers) el.setAttribute("scale", base * (1 - 0.6 * p));
+      parts.push(`brightness(${1 + 0.12 * h - 0.04 * p})`);
+      this.el.style.boxShadow = `0 ${12 - 8 * p}px ${34 - 18 * p}px -6px rgb(0 0 0 / ${0.35 + 0.15 * p})`;
+    }
+    this.frost.style.filter = parts.join(" ") || "none";
+  }
+  // Keep the copy lined up with the original under the glass. Squash and press scale the whole
+  // lens, copy included, since Safari can't take a transform on the copy itself.
+  #place() {
+    const { width, height } = this.params;
+    const source = this.sourceRect;
+    const dpr = devicePixelRatio || 1;
+    const snap = (v) => Math.round(v * dpr) / dpr;
+    let left, top;
+    if (this.anchor) {
+      ({ left, top } = this.anchor.getBoundingClientRect());
+    } else {
+      const s = this.scale.value * this.popScale;
+      left = snap(this.x.value - width / 2);
+      top = snap(this.y.value - height / 2);
+      this.el.style.transform = `translate(${left}px, ${top}px) scale(${s * this.stretchX.value}, ${s * this.stretchY.value})`;
+      if (this.container) {
+        left += this.containerRect.left;
+        top += this.containerRect.top;
+      }
+    }
+    this.copyHost.style.left = `${snap(this.inner.x + source.left - left - width / 2)}px`;
+    this.copyHost.style.top = `${snap(this.inner.y + source.top - top - height / 2)}px`;
+  }
+  // Moves the lens to a point in viewport (client) coordinates
+  moveTo(x, y) {
+    if (this.container) {
+      const { left, top } = this.container.getBoundingClientRect();
+      x -= left;
+      y -= top;
+    }
+    if (this.reducedMotion) {
+      this.x.snap(x);
+      this.y.snap(y);
+    } else {
+      this.x.target = x;
+      this.y.target = y;
+    }
+    this.show(true, { pop: true });
+  }
+  press(down) {
+    this.scale.target = down ? 1.12 : 1;
+    if (this.reducedMotion) this.scale.snap(this.scale.target);
+  }
+  set(params) {
+    const toneOnly = Object.keys(params).every((k) => k === "brightness" || k === "saturation");
+    Object.assign(this.params, params);
+    if (toneOnly && !this.shapeDirty && this.filterBase) {
+      this.#writeFilter();
+      this.#applyButton();
+    } else {
+      this.shapeDirty = true;
+      this.#wake();
+    }
+  }
+  // Removes the glass and everything it added to the page, and stops it listening and
+  // watching. Safe to call more than once.
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    cancelAnimationFrame(this.#raf);
+    this.#awake = false;
+    this.#abort.abort();
+    this.#observers.forEach((o) => o.disconnect());
+    this.el.remove();
+    this.svg.remove();
+    for (const [el, prop, value] of this.#restore.reverse()) el.style[prop] = value;
+    this.scrolled.clear();
+  }
+  // Fades the lens in or out. With { pop: true } it pops like a bubble on the way out and
+  // swells back in. The pop runs through the frame loop's own transform: a separate CSS
+  // `scale` would also scale the lens's position, and it would dart away as it popped.
+  show(visible, { pop = false } = {}) {
+    if (visible === this.visible) return;
+    this.visible = visible;
+    if (visible) this.rectDirty = true;
+    this.#wake();
+    this.el.getAnimations().forEach((a) => a.cancel());
+    if (!pop || this.reducedMotion) {
+      this.pop = null;
+      this.popScale = 1;
+      this.el.style.transition = "opacity .3s";
+      this.el.style.opacity = visible ? "1" : "0";
+      return;
+    }
+    this.el.style.transition = "none";
+    this.pop = { visible, start: performance.now(), burst: !visible };
+  }
+  // A bubble swells for a moment, then its film is gone at once. Coming back, it grows from
+  // smaller with a little overshoot.
+  #popFrame(now) {
+    const { visible, start } = this.pop;
+    const t = now - start;
+    let scale, opacity;
+    if (visible) {
+      const k = Math.min(t / 460, 1);
+      const back = 1 + 2.2 * (k - 1) ** 3 + 1.2 * (k - 1) ** 2;
+      scale = 0.6 + 0.4 * back;
+      opacity = Math.min(t / 140, 1);
+    } else {
+      const k = Math.min(t / 110, 1);
+      scale = 1 + 0.14 * k * k;
+      opacity = t < 110 ? 1 : 0;
+      if (t >= 110 && this.pop.burst) {
+        this.pop.burst = false;
+        this.#burst();
+      }
+    }
+    this.popScale = scale;
+    this.el.style.opacity = String(opacity);
+    if (t >= (visible ? 460 : 110)) {
+      this.pop = null;
+      this.popScale = 1;
+    }
+  }
+  // A ring flash and droplets flying off the rim
+  #burst() {
+    const r = this.el.getBoundingClientRect();
+    if (!r.width) return;
+    const cx = r.left + r.width / 2;
+    const cy = r.top + r.height / 2;
+    const layer = this.container ?? document.body;
+    const origin = this.container ? this.container.getBoundingClientRect() : { left: 0, top: 0 };
+    const position = this.container ? "absolute" : "fixed";
+    const z = this.container ? 2 : 2147483e3;
+    const add = (css, frames, timing) => {
+      const el = document.createElement("div");
+      el.setAttribute("aria-hidden", "true");
+      el.style.cssText = `position:${position};pointer-events:none;z-index:${z};${css}`;
+      layer.append(el);
+      el.animate(frames, { fill: "forwards", ...timing }).finished.then(() => el.remove());
+    };
+    add(
+      `left:${r.left - origin.left}px;top:${r.top - origin.top}px;width:${r.width}px;height:${r.height}px;border-radius:${this.el.style.borderRadius};box-shadow:inset 0 0 0 1px rgb(255 255 255 / .8)`,
+      [
+        { opacity: 0.8, transform: "scale(1)" },
+        { opacity: 0, transform: "scale(1.18)" }
+      ],
+      { duration: 200, easing: "cubic-bezier(.2,.7,.3,1)" }
+    );
+    const count = 22;
+    for (let i = 0; i < count; i++) {
+      const angle = i / count * Math.PI * 2 + (Math.random() - 0.5) * 0.5;
+      const ux = Math.cos(angle);
+      const uy = Math.sin(angle);
+      const size = 3 + Math.random() * 4;
+      const reach = 18 + Math.random() * 46;
+      const fall = 14 + Math.random() * 22;
+      const x = cx + ux * r.width / 2 - origin.left - size / 2;
+      const y = cy + uy * r.height / 2 - origin.top - size / 2;
+      const mid = `translate(${ux * reach * 0.75}px, ${uy * reach * 0.75}px)`;
+      const end = `translate(${ux * reach}px, ${uy * reach + fall}px) scale(.4)`;
+      add(
+        `left:${x}px;top:${y}px;width:${size}px;height:${size}px;border-radius:50%;background:radial-gradient(circle at 35% 35%, rgb(255 255 255 / .95), rgb(255 255 255 / .35) 65%, rgb(255 255 255 / .1))`,
+        [
+          { opacity: 1, transform: "translate(0, 0)", easing: "cubic-bezier(.1,.8,.3,1)" },
+          { opacity: 0.9, transform: mid, offset: 0.35, easing: "cubic-bezier(.4,0,.8,.6)" },
+          { opacity: 0, transform: end }
+        ],
+        { duration: 520 + Math.random() * 260 }
+      );
+    }
+  }
+  #frame(now) {
+    const dt = Math.min((now - this.last) / 1e3, 1 / 30);
+    this.last = now;
+    let animating = false;
+    if (!this.anchor) {
+      if (!this.reducedMotion) {
+        const vx = Math.max(Math.abs(this.x.velocity) - 150, 0);
+        const vy = Math.max(Math.abs(this.y.velocity) - 150, 0);
+        const k = this.params.stretch ?? 1;
+        this.stretchX.target = 1 + k * (Math.min(vx / 5e3, 0.22) - Math.min(vy / 9e3, 0.1));
+        this.stretchY.target = 1 + k * (Math.min(vy / 5e3, 0.22) - Math.min(vx / 9e3, 0.1));
+      }
+      animating = this.springs.some((s) => !s.settled);
+      for (const s of this.springs) {
+        s.step(dt);
+        if (s.settled) s.snap(s.target);
+      }
+      if (this.pop) {
+        this.#popFrame(now);
+        animating = true;
+      }
+    }
+    if (this.button && (!this.hovered.settled || !this.pressed.settled)) {
+      for (const s of [this.hovered, this.pressed]) {
+        if (this.reducedMotion) s.snap(s.target);
+        else s.step(dt);
+      }
+      this.#applyButton();
+    }
+    const sync = this.copyDirty && this.#shown && now - this.syncedAt >= this.throttle;
+    const changed = sync || this.shapeDirty || this.rectDirty;
+    if (sync) {
+      this.#syncCopy();
+      this.syncedAt = now;
+    } else if (this.rectDirty) {
+      this.sourceRect = this.source.getBoundingClientRect();
+      this.containerRect = this.container?.getBoundingClientRect();
+    }
+    this.rectDirty = false;
+    if (this.shapeDirty && this.params.width >= 1 && this.params.height >= 1) this.#buildShape();
+    if (this.inner && this.sourceRect && (animating || changed || this.placeDirty)) this.#place();
+    this.placeDirty = animating;
+    const buttonMoving = this.button && (!this.hovered.settled || !this.pressed.settled);
+    const waiting = this.shapeDirty || this.rectDirty || this.placeDirty || this.copyDirty && this.#shown || !this.inner;
+    if (animating || buttonMoving || waiting) this.#raf = requestAnimationFrame((t) => this.#frame(t));
+    else {
+      this.#awake = false;
+      this.el.style.willChange = "auto";
+    }
+  }
+}
+const clamp = (v, lo, hi) => Math.min(Math.max(v, lo), hi);
+const LIFT = { stiffness: 632, damping: 50.3 };
+const MOVE = { stiffness: 241, damping: 26.4 };
+const TRAIL = { stiffness: 576, damping: 36 };
+const HANG = 220;
+const springs = (lens, move = MOVE) => {
+  lens.scale.stiffness = LIFT.stiffness;
+  lens.scale.damping = LIFT.damping;
+  lens.x.stiffness = lens.y.stiffness = move.stiffness;
+  lens.x.damping = lens.y.damping = move.damping;
+};
+const arrived = (lens) => Math.abs(lens.x.value - lens.x.target) <= 0.5 && Math.abs(lens.x.velocity) <= 30;
+const CLEAR = { frost: 0, fresnel: 0.15, saturation: 0, tint: "", rim: 0.45, body: 0, falloff: 0, lightAngle: -123.5 };
+const LOOKS = {
+  switch: {
+    dark: { ...CLEAR, refraction: 25, bevel: 6, chroma: 0.21, zoom: 1.12, specular: 0.25, brightness: 0.03 },
+    light: { ...CLEAR, refraction: 20, bevel: 5, chroma: 0.12, zoom: 1.1, specular: 0.55, brightness: 0 }
+  },
+  // UIKit's rim profile: the bend hardest at the very edge, easing off by e every 4.5px
+  tabs: {
+    dark: { ...CLEAR, refraction: 28, bevel: 5, falloff: 4.5, chroma: 0.1, zoom: 1.1, specular: 0.25, brightness: 0.03, lightAngle: -140 },
+    light: { ...CLEAR, refraction: 28, bevel: 5, falloff: 4.5, chroma: 0.1, zoom: 1.1, specular: 0.55, brightness: 0, lightAngle: -140 }
+  },
+  // A little milk, a little frost and a brighter rim, so a resting button reads on a flat
+  // background
+  button: {
+    dark: { ...CLEAR, frost: 1, refraction: 28, bevel: 5, chroma: 0.12, zoom: 1.08, specular: 0.25, brightness: 0.03, rim: 0.6, body: 0.12 },
+    light: { ...CLEAR, frost: 1, refraction: 28, bevel: 5, chroma: 0.12, zoom: 1.08, specular: 0.55, brightness: 0, rim: 0.6, body: 0.12 }
+  }
+};
+const listener = (signal) => (target, type, fn) => target.addEventListener(type, fn, { signal });
+const themeOf = (el) => el.closest("[data-theme]")?.dataset.theme === "light" ? "light" : "dark";
+function addGlow(lens) {
+  const glow = document.createElement("span");
+  glow.className = "lg-glow";
+  lens.el.append(glow);
+  return (e) => {
+    const r = lens.el.getBoundingClientRect();
+    const k = r.width / lens.el.offsetWidth;
+    glow.style.left = `${(e.clientX - r.left) / k}px`;
+    glow.style.top = `${(e.clientY - r.top) / k}px`;
+  };
+}
+class GlassSwitch {
+  constructor(root, { grow = 1.55, press = 1.08, lean = 4, look = LOOKS.switch[themeOf(root)] } = {}) {
+    this.root = root;
+    this.grow = grow;
+    this.press = press;
+    this.lean = lean;
+    this.look = look;
+    this.thumb = root.querySelector(":scope > .thumb");
+    this.bar = root.querySelector(":scope > .refract");
+    this.options = [...root.querySelectorAll(":scope > [data-opt]")];
+    this.isSwitch = root.getAttribute("role") === "switch";
+    this.value = this.isSwitch ? Number(root.getAttribute("aria-checked") === "true") : Math.max(0, this.options.findIndex((o) => o.getAttribute("aria-checked") === "true"));
+    this.up = false;
+    this.hovered = false;
+    this.pressed = false;
+    this.drag = null;
+    this.frame = 0;
+    this.abort = new AbortController();
+    this.lens = new LiquidGlass(this.bar, { container: root, ...look });
+    springs(this.lens);
+    this.glowAt = addGlow(this.lens);
+    root.classList.add("glassy");
+    this.size();
+    this.lens.scale.snap(1 / (grow * press));
+    this.put(this.centre(this.value));
+    this.#events();
+  }
+  centre(i) {
+    const o = this.options[i];
+    return o.offsetLeft + o.offsetWidth / 2;
+  }
+  // The thumb's centre, in the root's padding box; --p is how far across, for the colour
+  put(x) {
+    this.at = x;
+    this.thumb.style.translate = `${x - this.thumb.offsetLeft - this.thumb.offsetWidth / 2}px`;
+    this.root.style.setProperty("--p", clamp((x - this.centre(0)) / (this.centre(1) - this.centre(0)), 0, 1));
+  }
+  // The lens is built at its pressed size and scaled down from there. It reaches past the
+  // thumb's outer end by its width × grow, as iOS's does, but past its inner end only as
+  // far as above and below, so a wide thumb's lens doesn't spill over the other label: it
+  // sits `shift` px off the thumb's centre, towards the outside. The bar's ends are cut
+  // for the lifted (unpressed) size, with the gaps measured magnified, as the glass shows
+  // them.
+  size() {
+    const tw = this.thumb.offsetWidth;
+    const th = this.thumb.offsetHeight;
+    const h = th * this.grow;
+    const wide = tw * this.grow;
+    const w = Math.min(wide, (wide + tw + h - th) / 2);
+    this.shift = (wide - w) / 2;
+    this.lens.set({ width: w * this.press, height: h * this.press, radius: h * this.press / 2 });
+    const gap = h - this.bar.offsetHeight * this.look.zoom;
+    const reach = (w - gap) / 2 / this.look.zoom;
+    const left = this.lensAt(this.centre(0)) - reach;
+    this.bar.style.left = `${left}px`;
+    this.bar.style.width = `${this.lensAt(this.centre(1)) + reach - left}px`;
+  }
+  // Between the lens's centre and the thumb's: shifted outward at either end, in between
+  // in proportion
+  lensAt(x) {
+    const c0 = this.centre(0);
+    const d = this.centre(1) - c0;
+    return x + this.shift * (2 * clamp((x - c0) / d, 0, 1) - 1);
+  }
+  thumbAt(x) {
+    const c0 = this.centre(0);
+    const k = 2 * this.shift / (this.centre(1) - c0);
+    return clamp((x + this.shift + k * c0) / (1 + k), c0, this.centre(1));
+  }
+  select(i) {
+    if (i === this.value) return;
+    this.value = i;
+    if (this.isSwitch) this.root.setAttribute("aria-checked", String(i === 1));
+    else this.options.forEach((o, j) => o.setAttribute("aria-checked", String(i === j)));
+    this.lift();
+    this.lens.x.target = this.lensAt(this.centre(i));
+    this.root.dispatchEvent(new CustomEvent("change", { detail: { value: i }, bubbles: true }));
+  }
+  // Dissolve the thumb into glass; the thumb follows it until it's been still a moment
+  lift() {
+    const lens = this.lens;
+    if (!this.up) {
+      this.up = true;
+      lens.x.snap(this.lensAt(this.at));
+      lens.y.snap(this.thumb.offsetTop + this.thumb.offsetHeight / 2);
+      lens.show(true);
+      lens.el.style.transition = "opacity 0.18s";
+      this.root.classList.add("lifted");
+    }
+    lens.scale.target = this.pressed ? 1 : 1 / this.press;
+    cancelAnimationFrame(this.frame);
+    let still = 0;
+    const tick = (now) => {
+      this.put(this.thumbAt(lens.x.value));
+      if (this.drag || this.hovered || this.pressed || !arrived(lens)) still = 0;
+      else if (!still) still = now;
+      if (still && now - still > HANG) this.drop();
+      else this.frame = requestAnimationFrame(tick);
+    };
+    this.frame = requestAnimationFrame(tick);
+  }
+  // Shrink back to the thumb as it fades back in over the glass
+  drop() {
+    if (!this.up) return;
+    this.up = false;
+    this.lens.scale.target = 1 / (this.grow * this.press);
+    this.lens.show(false);
+    this.lens.el.style.transition = "opacity 0.3s 0.08s";
+    this.root.classList.remove("lifted");
+  }
+  setPressed(on, e) {
+    this.pressed = on;
+    this.root.classList.toggle("pressing", on);
+    if (on) this.glowAt(e);
+    if (on || this.up) this.lift();
+  }
+  // Stops it and removes its lens; the markup is left as it was found
+  destroy() {
+    cancelAnimationFrame(this.frame);
+    this.abort.abort();
+    this.lens.destroy();
+    this.root.classList.remove("glassy", "lifted", "pressing");
+    this.root.style.removeProperty("--p");
+    this.thumb.style.translate = "";
+    this.bar.style.left = this.bar.style.width = "";
+  }
+  #events() {
+    const root = this.root;
+    const on = listener(this.abort.signal);
+    let dragged = false;
+    on(root, "click", () => {
+      if (dragged) dragged = false;
+      else this.select(1 - this.value);
+    });
+    on(root, "pointerenter", (e) => {
+      if (e.pointerType !== "mouse") return;
+      this.hovered = true;
+      this.lift();
+    });
+    on(root, "pointerleave", () => {
+      this.hovered = false;
+      if (!this.drag) this.lens.x.target = this.lensAt(this.centre(this.value));
+      else if (!this.drag.moved) {
+        this.drag = null;
+        this.setPressed(false);
+      }
+    });
+    on(root, "pointerdown", (e) => {
+      if (e.button !== 0) return;
+      this.drag = { id: e.pointerId, x: e.clientX, from: this.at, moved: false };
+      this.setPressed(true, e);
+    });
+    on(root, "pointermove", (e) => {
+      const d = this.drag;
+      const lens = this.lens;
+      if (this.pressed) this.glowAt(e);
+      if (!d) {
+        if (!this.hovered) return;
+        const home = this.centre(this.value);
+        const x = e.clientX - root.getBoundingClientRect().left - root.clientLeft;
+        const half = this.options[this.value].offsetWidth / 2;
+        lens.x.target = this.lensAt(home) + clamp((x - home) / half, -1, 1) * this.lean;
+        return;
+      }
+      const dx = e.clientX - d.x;
+      if (!d.moved && Math.abs(dx) > 4) {
+        d.moved = true;
+        root.setPointerCapture(d.id);
+      }
+      if (d.moved) lens.x.target = this.lensAt(clamp(d.from + dx, this.centre(0), this.centre(1)));
+    });
+    on(root, "pointerup", () => {
+      const d = this.drag;
+      this.drag = null;
+      this.setPressed(false);
+      if (!d?.moved) return;
+      dragged = true;
+      setTimeout(() => dragged = false);
+      const lens = this.lens;
+      const ahead = this.thumbAt(lens.x.value + lens.x.velocity * 0.12);
+      const side = ahead > (this.centre(0) + this.centre(1)) / 2 ? 1 : 0;
+      if (side === this.value) {
+        this.lift();
+        lens.x.target = this.lensAt(this.centre(side));
+      } else this.select(side);
+    });
+    on(root, "pointercancel", () => {
+      this.drag = null;
+      this.setPressed(false);
+      this.lens.x.target = this.lensAt(this.centre(this.value));
+    });
+    on(window, "resize", () => {
+      this.size();
+      if (!this.up) this.put(this.centre(this.value));
+    });
+  }
+}
+class GlassTabBar {
+  constructor(root, { grow = 1.3, press = 1.1, look = LOOKS.tabs[themeOf(root)] } = {}) {
+    this.root = root;
+    this.grow = grow;
+    this.press = press;
+    this.tabs = [...root.querySelectorAll(":scope > a, :scope > button")];
+    this.pill = root.querySelector(":scope > .lg-pill");
+    this.glow = root.querySelector(".lg-glow");
+    this.pressedId = null;
+    this.frame = 0;
+    this.abort = new AbortController();
+    this.lens = new LiquidGlass(root, { container: root, ...look });
+    springs(this.lens);
+    this.placePill();
+    this.#events();
+  }
+  get current() {
+    return this.tabs.find((t) => t.hasAttribute("aria-current")) ?? null;
+  }
+  centre(t) {
+    return t.offsetLeft + t.offsetWidth / 2;
+  }
+  choose(tab) {
+    if (tab === this.current) return;
+    this.tabs.forEach((t) => t.removeAttribute("aria-current"));
+    tab.setAttribute("aria-current", "page");
+    this.placePill();
+    this.root.dispatchEvent(new CustomEvent("change", { detail: { tab }, bubbles: true }));
+  }
+  placePill() {
+    const t = this.current;
+    this.pill.hidden = !t;
+    if (!t) return;
+    Object.assign(this.pill.style, {
+      left: `${t.offsetLeft}px`,
+      top: `${t.offsetTop}px`,
+      width: `${t.offsetWidth}px`,
+      height: `${t.offsetHeight}px`
+    });
+  }
+  // Lift the lens over a tab: swelling in there if it's down, sliding there if it's up.
+  // It outgrows the tab by 8px a side, and bulges `press` more while pressed (it's built
+  // at that size and scaled down from there).
+  lift(tab) {
+    const lens = this.lens;
+    cancelAnimationFrame(this.frame);
+    const h = (this.root.offsetHeight + 8) * this.press;
+    lens.set({ width: (tab.offsetWidth + 16) * this.press, height: h, radius: h / 2 });
+    const x = this.centre(tab);
+    const y = tab.offsetTop + tab.offsetHeight / 2;
+    if (!lens.visible) {
+      lens.x.snap(x);
+      lens.y.snap(y);
+      lens.scale.snap(1 / (this.grow * this.press));
+      lens.show(true);
+      lens.el.style.transition = "opacity 0.18s";
+      this.root.classList.add("lensing");
+    }
+    this.bulge();
+    lens.x.target = x;
+    lens.y.target = y;
+  }
+  bulge() {
+    this.lens.scale.target = this.pressedId === null ? 1 / this.press : 1;
+  }
+  drop() {
+    this.root.classList.remove("lensing");
+    this.lens.scale.target = 1 / (this.grow * this.press);
+    this.lens.show(false);
+    this.lens.el.style.transition = "opacity 0.3s 0.08s";
+  }
+  // Once the lens has arrived, hang a moment, then set it down
+  settle(hang) {
+    const lens = this.lens;
+    cancelAnimationFrame(this.frame);
+    let still = 0;
+    const tick = (now) => {
+      if (!arrived(lens)) still = 0;
+      else if (!still) still = now;
+      if (still && now - still > hang) this.drop();
+      else this.frame = requestAnimationFrame(tick);
+    };
+    this.frame = requestAnimationFrame(tick);
+  }
+  destroy() {
+    cancelAnimationFrame(this.frame);
+    this.abort.abort();
+    this.lens.destroy();
+    this.root.classList.remove("lensing", "pressing");
+  }
+  #events() {
+    const root = this.root;
+    const on = listener(this.abort.signal);
+    const local = (e) => e.clientX - root.getBoundingClientRect().left - root.clientLeft;
+    const clampX = (x) => clamp(x, this.centre(this.tabs[0]), this.centre(this.tabs.at(-1)));
+    const tabAt = (x) => this.tabs.reduce((a, b) => Math.abs(this.centre(b) - x) < Math.abs(this.centre(a) - x) ? b : a);
+    const glowAt = (e) => {
+      const r = root.getBoundingClientRect();
+      this.glow.style.left = `${e.clientX - r.left}px`;
+      this.glow.style.top = `${e.clientY - r.top}px`;
+    };
+    this.tabs.forEach((t) => on(t, "click", () => this.choose(t)));
+    on(root, "pointerover", (e) => {
+      const tab = e.target.closest("a, button");
+      if (e.pointerType === "mouse" && this.pressedId === null && tab) this.lift(tab);
+    });
+    on(root, "pointerleave", (e) => {
+      if (e.pointerType === "mouse" && this.pressedId === null) this.settle(0);
+    });
+    let press = null;
+    on(root, "pointerdown", (e) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      root.setPointerCapture(e.pointerId);
+      this.pressedId = e.pointerId;
+      const tab = e.target.closest("a, button") ?? tabAt(local(e));
+      press = { x: e.clientX, tab, dragging: false };
+      this.lift(tab);
+      springs(this.lens, TRAIL);
+      glowAt(e);
+      root.classList.add("pressing");
+    });
+    on(root, "pointermove", (e) => {
+      if (e.pointerId !== this.pressedId) return;
+      glowAt(e);
+      const dx = e.clientX - press.x;
+      if (!press.dragging && Math.abs(dx) > 6) press.dragging = true;
+      if (press.dragging) this.lens.x.target = clampX(this.centre(press.tab) + dx);
+    });
+    const release = (e, pick) => {
+      if (e.pointerId !== this.pressedId) return;
+      this.pressedId = null;
+      root.classList.remove("pressing");
+      springs(this.lens);
+      this.bulge();
+      if (!pick) return this.settle(0);
+      const tab = press.dragging ? tabAt(this.lens.x.target) : press.tab;
+      this.lens.x.target = this.centre(tab);
+      tab.click();
+      if (!(e.pointerType === "mouse" && root.matches(":hover"))) this.settle(HANG);
+    };
+    on(root, "pointerup", (e) => release(e, true));
+    on(root, "pointercancel", (e) => release(e, false));
+    on(window, "resize", () => this.placePill());
+  }
+}
+class GlassButton {
+  constructor(button, {
+    container = button.parentElement,
+    source = container.querySelector(":scope > [data-glass-source]"),
+    grow = 1.1,
+    press = 1.08,
+    lit = 0.95,
+    hang = 120,
+    look = LOOKS.button[themeOf(button)]
+  } = {}) {
+    if (!source) throw new Error("GlassButton: no source to refract. Give the button's parent a [data-glass-source] child, or pass { source }.");
+    this.btn = button;
+    this.container = container;
+    this.grow = grow;
+    this.press = press;
+    this.hang = hang;
+    this.hovered = false;
+    this.pressed = false;
+    this.up = false;
+    this.frame = 0;
+    this.abort = new AbortController();
+    const on = listener(this.abort.signal);
+    button.style.setProperty("--lit-max", lit);
+    const clip = document.createElement("span");
+    clip.className = "lg-clip";
+    clip.setAttribute("aria-hidden", "true");
+    const glow = document.createElement("span");
+    glow.className = "lg-glow";
+    clip.append(glow);
+    button.prepend(clip);
+    this.clip = clip;
+    this.lens = new LiquidGlass(source, { container, ...look });
+    this.lens.el.classList.add("lg-button-lens");
+    springs(this.lens);
+    this.size();
+    this.lens.scale.snap(1 / this.full);
+    this.lens.show(true);
+    this.track();
+    const glowAt = (e) => {
+      const r = button.getBoundingClientRect();
+      const k = r.width / button.offsetWidth;
+      glow.style.left = `${(e.clientX - r.left) / k}px`;
+      glow.style.top = `${(e.clientY - r.top) / k}px`;
+    };
+    on(button, "pointerenter", (e) => {
+      if (e.pointerType !== "mouse") return;
+      this.hovered = true;
+      glowAt(e);
+      button.classList.add("hovering");
+      this.lift();
+    });
+    on(button, "pointerleave", () => {
+      this.hovered = false;
+      button.classList.remove("hovering");
+      this.pressed = false;
+      this.lift();
+      this.settle();
+    });
+    on(button, "pointerdown", (e) => {
+      if (e.button !== 0) return;
+      this.pressed = true;
+      glowAt(e);
+      this.lift();
+    });
+    on(button, "pointermove", (e) => (this.pressed || this.hovered) && glowAt(e));
+    const up = () => {
+      if (!this.pressed) return;
+      this.pressed = false;
+      this.lift();
+      this.settle();
+    };
+    on(button, "pointerup", up);
+    on(button, "pointercancel", up);
+    on(button, "focus", () => button.matches(":focus-visible") && this.lift());
+    on(button, "blur", () => this.settle(0));
+    on(button, "keydown", (e) => {
+      if (e.key !== " " && e.key !== "Enter") return;
+      this.pressed = true;
+      this.lift();
+    });
+    on(button, "keyup", () => {
+      this.pressed = false;
+      this.lift();
+    });
+    on(window, "resize", () => this.size());
+  }
+  destroy() {
+    cancelAnimationFrame(this.frame);
+    cancelAnimationFrame(this.settling);
+    this.abort.abort();
+    this.lens.destroy();
+    this.clip.remove();
+    this.btn.classList.remove("hovering", "pressing");
+    for (const p of ["--lit-max", "--s", "--lit"]) this.btn.style.removeProperty(p);
+  }
+  // The lens is built at its pressed size; rest, hover and press scale it down from there
+  get full() {
+    return this.grow * this.press;
+  }
+  size() {
+    const b = this.btn.getBoundingClientRect();
+    const c = this.container.getBoundingClientRect();
+    const w = this.btn.offsetWidth * this.full;
+    const h = this.btn.offsetHeight * this.full;
+    this.lens.set({ width: w, height: h, radius: h / 2 });
+    this.lens.x.snap(b.left + b.width / 2 - c.left - this.container.clientLeft);
+    this.lens.y.snap(b.top + b.height / 2 - c.top - this.container.clientTop);
+  }
+  lift() {
+    cancelAnimationFrame(this.settling);
+    this.up = true;
+    this.lens.scale.target = this.pressed ? 1 : 1 / this.press;
+    this.btn.classList.toggle("pressing", this.pressed);
+    this.track();
+  }
+  // Once nothing holds it up, hang a moment, then shrink back to clear glass
+  settle(hang = this.hang) {
+    if (!this.up || this.hovered || this.pressed || this.btn.matches(":focus-visible")) return;
+    cancelAnimationFrame(this.settling);
+    const start = performance.now();
+    const tick = (now) => {
+      if (this.hovered || this.pressed) return;
+      if (now - start < hang) this.settling = requestAnimationFrame(tick);
+      else {
+        this.up = false;
+        this.lens.scale.target = 1 / this.full;
+        this.track();
+      }
+    };
+    this.settling = requestAnimationFrame(tick);
+  }
+  // While the lens grows or shrinks, the tint and content follow its size
+  track() {
+    cancelAnimationFrame(this.frame);
+    const tick = () => {
+      const s = this.lens.scale.value * this.full;
+      this.btn.style.setProperty("--s", s.toFixed(4));
+      this.btn.style.setProperty("--lit", clamp((s - 1) / (this.grow - 1 || 1), 0, 1).toFixed(4));
+      if (!this.lens.scale.settled) this.frame = requestAnimationFrame(tick);
+    };
+    this.frame = requestAnimationFrame(tick);
+  }
+}
+function initComponents(root = document) {
+  return [
+    ...[...root.querySelectorAll("[data-glass-switch]")].map((el) => new GlassSwitch(el)),
+    ...[...root.querySelectorAll("[data-glass-tabs]")].map((el) => new GlassTabBar(el)),
+    ...[...root.querySelectorAll("[data-glass-button]")].map((el) => new GlassButton(el))
+  ];
+}
+exports.GlassButton = GlassButton;
+exports.GlassSwitch = GlassSwitch;
+exports.GlassTabBar = GlassTabBar;
+exports.LOOKS = LOOKS;
+exports.LiquidGlass = LiquidGlass;
+exports.initComponents = initComponents;