vireuikit 0.5.0 → 0.6.0

package/dist/web.cjs

@@ -0,0 +1,826 @@
+'use strict';
+
+var vireglass = require('vireglass');
+
+// src/web/element.ts
+
+// src/kit/a11y.ts
+var A11Y_NONE = {
+  reduceTransparency: false,
+  increaseContrast: false,
+  reduceMotion: false
+};
+function resolveA11y(system, override = {}) {
+  return {
+    reduceTransparency: override.reduceTransparency ?? system.reduceTransparency,
+    increaseContrast: override.increaseContrast ?? system.increaseContrast,
+    reduceMotion: override.reduceMotion ?? system.reduceMotion
+  };
+}
+function presentationFor(mode, wantsGlass) {
+  return {
+    glass: wantsGlass,
+    frost: wantsGlass && mode.reduceTransparency,
+    surface: wantsGlass ? "glass" : "plain",
+    contrastBorder: mode.increaseContrast,
+    instantSprings: mode.reduceMotion
+  };
+}
+function sameA11y(a, b) {
+  return a.reduceTransparency === b.reduceTransparency && a.increaseContrast === b.increaseContrast && a.reduceMotion === b.reduceMotion;
+}
+var ATOM_AT_REST = {
+  pressed: 0,
+  hovered: 0,
+  selected: 0,
+  disabled: false
+};
+function atomLift(kind) {
+  switch (kind) {
+    case "iconButton":
+    case "switch":
+    case "slider":
+      return 1;
+    default:
+      return 0;
+  }
+}
+var DISABLED_PRESENCE = 0.25;
+var HOVER_GAIN = 0.35;
+function activation(state) {
+  if (state.disabled) return 0;
+  const clamp = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+  return Math.max(clamp(state.selected), clamp(state.pressed), clamp(state.hovered) * HOVER_GAIN);
+}
+function atomMaterial(base, kind, state = ATOM_AT_REST) {
+  const out = vireglass.activeMaterial(base, activation(state));
+  if (!state.disabled) return out;
+  return { ...out, presence: out.presence * DISABLED_PRESENCE };
+}
+var REST_BODY = { alpha: 0.25, white: 0.15, lift: 0.1 };
+var PRESSED_BODY = { alpha: 0.34, white: 0.35, lift: 0 };
+var FROST_LIFT = 0.26;
+function atomBody(base, state = ATOM_AT_REST, frost = false) {
+  const on = activation(state);
+  const mix = (key) => REST_BODY[key] + (PRESSED_BODY[key] - REST_BODY[key]) * on;
+  let alpha = mix("alpha");
+  let white = mix("white");
+  let lift = mix("lift");
+  if (state.disabled) alpha *= DISABLED_PRESENCE;
+  if (frost) {
+    const density = vireglass.applyAccessibility(vireglass.resolveOptics(base), {
+      reduceTransparency: true,
+      increaseContrast: false,
+      reduceMotion: false
+    }).bodyDensity;
+    alpha = Math.max(alpha, density);
+    white = 0;
+    lift = FROST_LIFT;
+  }
+  return { alpha, white, lift };
+}
+
+// src/kit/behavior/focus.ts
+function stepFocus(event) {
+  return event.type === "focus" && event.visible;
+}
+
+// src/kit/behavior/hover.ts
+function stepHover(event, canHover) {
+  return canHover && event.type === "enter";
+}
+
+// src/kit/behavior/press.ts
+var PRESS_IDLE = { by: null };
+function stepPress(state, event, enabled) {
+  switch (event.type) {
+    case "down":
+      if (!enabled || state.by !== null) return { state, activated: false };
+      return { state: { by: event.source }, activated: false };
+    case "up":
+      if (state.by !== event.source) return { state, activated: false };
+      return { state: PRESS_IDLE, activated: enabled };
+    case "cancel":
+      return { state: PRESS_IDLE, activated: false };
+    case "leave":
+      return state.by === "pointer" ? { state: PRESS_IDLE, activated: false } : { state, activated: false };
+  }
+}
+
+// src/kit/behavior/control.ts
+var TOUCH_INPUT = { hover: false };
+var POINTER_INPUT = { hover: true };
+var CONTROL_IDLE = {
+  press: PRESS_IDLE,
+  hovered: false,
+  focused: false,
+  disabled: false
+};
+function stepControl(state, event, caps) {
+  switch (event.type) {
+    case "down":
+    case "up":
+    case "cancel": {
+      const next = stepPress(state.press, event, !state.disabled);
+      return { state: { ...state, press: next.state }, activated: next.activated };
+    }
+    case "leave": {
+      const next = stepPress(state.press, event, !state.disabled);
+      return { state: { ...state, press: next.state, hovered: false }, activated: false };
+    }
+    case "enter":
+      return {
+        state: { ...state, hovered: !state.disabled && stepHover(event, caps.hover) },
+        activated: false
+      };
+    case "focus":
+    case "blur": {
+      const press = event.type === "blur" && state.press.by === "keyboard" ? PRESS_IDLE : state.press;
+      return {
+        state: { ...state, press, focused: !state.disabled && stepFocus(event) },
+        activated: false
+      };
+    }
+    case "disable":
+      return {
+        state: event.disabled ? { press: PRESS_IDLE, hovered: false, focused: false, disabled: true } : { ...state, disabled: false },
+        activated: false
+      };
+  }
+}
+function controlTargets(state) {
+  return {
+    pressed: state.press.by !== null ? 1 : 0,
+    hovered: state.hovered ? 1 : 0,
+    focus: state.focused ? 1 : 0,
+    disabled: state.disabled
+  };
+}
+function stepSpring(s, dt, response, damping, instant = false) {
+  if (instant) {
+    const moved = s.x !== s.target || s.v !== 0;
+    s.x = s.target;
+    s.v = 0;
+    return moved;
+  }
+  const stiffness = (2 * Math.PI / response) ** 2;
+  const friction = 4 * Math.PI * damping / response;
+  const h = 1 / 240;
+  for (let left = Math.min(dt, 0.05); left > 0; left -= h) {
+    const step = Math.min(left, h);
+    s.v += (stiffness * (s.target - s.x) - friction * s.v) * step;
+    s.x += s.v * step;
+  }
+  if (Math.abs(s.target - s.x) < 1e-3 && Math.abs(s.v) < 0.01) {
+    s.x = s.target;
+    s.v = 0;
+    return false;
+  }
+  return true;
+}
+
+// src/kit/behavior/visual.ts
+var createControlVisual = () => ({
+  pressed: { x: 0, v: 0, target: 0 },
+  hovered: { x: 0, v: 0, target: 0 },
+  focus: { x: 0, v: 0, target: 0 }
+});
+var PRESS = { response: 0.18, damping: 0.78 };
+var HOVER = { response: 0.22, damping: 1 };
+var FOCUS = { response: 0.16, damping: 1 };
+function stepControlVisual(visual, dt, state, instant = false) {
+  const t = controlTargets(state);
+  visual.pressed.target = t.pressed;
+  visual.hovered.target = t.hovered;
+  visual.focus.target = t.focus;
+  const a = stepSpring(visual.pressed, dt, PRESS.response, PRESS.damping, instant);
+  const b = stepSpring(visual.hovered, dt, HOVER.response, HOVER.damping, instant);
+  const c = stepSpring(visual.focus, dt, FOCUS.response, FOCUS.damping, instant);
+  return a || b || c;
+}
+function visualAtomState(visual, state) {
+  return {
+    pressed: visual.pressed.x,
+    hovered: visual.hovered.x,
+    selected: 0,
+    disabled: state.disabled
+  };
+}
+function settleControlVisual(visual, state) {
+  stepControlVisual(visual, 0, state, true);
+}
+
+// src/kit/response.ts
+var LIFTING = { grow: 0.18, defocus: 1.6 };
+var SINKING = { grow: 0.06, defocus: 1 };
+function pressResponse(kind) {
+  return atomLift(kind) === 1 ? LIFTING : SINKING;
+}
+var CONTROL_SIZES = ["touch", "small", "medium", "large", "xlarge"];
+var MIN_TOUCH_TARGET_DP = 44;
+var MIN_POINTER_TARGET_DP = 24;
+var capsule = (height, paddingX) => ({
+  height,
+  paddingX,
+  icon: Math.round(height / 2),
+  radius: height / 2,
+  shape: "capsule"
+});
+var rounded = (height, paddingX) => ({
+  height,
+  paddingX,
+  icon: Math.round(height / 2),
+  radius: height / 4,
+  shape: "rounded"
+});
+var BUTTON_SIZES = {
+  touch: capsule(44, 20),
+  small: rounded(24, 10),
+  medium: rounded(32, 14),
+  large: capsule(40, 18),
+  xlarge: capsule(48, 22)
+};
+function iconButtonSize(size) {
+  const spec = BUTTON_SIZES[size];
+  return { ...spec, width: spec.height, paddingX: 0 };
+}
+function defaultSize(input) {
+  return input.touch ? "touch" : "medium";
+}
+function hitSlop(bodyDp, minTargetDp) {
+  return bodyDp >= minTargetDp ? 0 : (minTargetDp - bodyDp) / 2;
+}
+function minTarget(input) {
+  return input.touch ? MIN_TOUCH_TARGET_DP : MIN_POINTER_TARGET_DP;
+}
+
+// src/web/a11y.ts
+var QUERIES = {
+  reduceMotion: "(prefers-reduced-motion: reduce)",
+  increaseContrast: "(prefers-contrast: more)",
+  reduceTransparency: "(prefers-reduced-transparency: reduce)"
+};
+var KEYS = Object.keys(QUERIES);
+function systemA11y() {
+  if (typeof matchMedia === "undefined") return A11Y_NONE;
+  return {
+    reduceMotion: matchMedia(QUERIES.reduceMotion).matches,
+    increaseContrast: matchMedia(QUERIES.increaseContrast).matches,
+    reduceTransparency: matchMedia(QUERIES.reduceTransparency).matches
+  };
+}
+function watchSystemA11y(onChange) {
+  if (typeof matchMedia === "undefined") return () => {
+  };
+  const lists = KEYS.map((key) => matchMedia(QUERIES[key]));
+  for (const list of lists) list.addEventListener("change", onChange);
+  return () => {
+    for (const list of lists) list.removeEventListener("change", onChange);
+  };
+}
+var globalOverride = {};
+var listeners = /* @__PURE__ */ new Set();
+function setA11yOverride(next) {
+  globalOverride = { ...globalOverride, ...next };
+  for (const listener of listeners) listener();
+}
+function getA11yOverride() {
+  return globalOverride;
+}
+function watchA11yOverride(onChange) {
+  listeners.add(onChange);
+  return () => {
+    listeners.delete(onChange);
+  };
+}
+function effectiveA11y(own) {
+  const merged = { ...globalOverride };
+  for (const key of KEYS) if (own[key] !== void 0) merged[key] = own[key];
+  return resolveA11y(systemA11y(), merged);
+}
+
+// src/web/glass.ts
+async function attachControlGlass(el, params, stillWanted) {
+  const { attachGlass } = await import('vireglass/dom');
+  if (!stillWanted()) return null;
+  const opts = {
+    material: params.material,
+    geometry: params.geometry,
+    accessibility: params.accessibility,
+    variant: params.onTouch ? "interactive" : "present",
+    // The kit paints its own body: the core's is not lighter than its surround over a light backdrop and
+    // near black under reduced transparency with light ink (docs/acceptance.md, "Resting body").
+    body: false
+  };
+  if (params.sample) opts.sample = params.sample;
+  const handle = attachGlass(el, opts);
+  return {
+    setMaterial(material) {
+      opts.material = material;
+      handle.update();
+    },
+    setGeometry(geometry) {
+      opts.geometry = geometry;
+      handle.update();
+    },
+    setAppear: (t) => handle.setAppear(t),
+    setMorph: (morph) => handle.setMorph(morph),
+    setSample: (sample) => handle.setSample(sample),
+    destroy: () => handle.destroy()
+  };
+}
+
+// src/web/input.ts
+var COARSE = "(pointer: coarse)";
+function isCoarsePointer() {
+  return typeof matchMedia !== "undefined" && matchMedia(COARSE).matches;
+}
+function watchCoarsePointer(onChange) {
+  if (typeof matchMedia === "undefined") return () => {
+  };
+  const list = matchMedia(COARSE);
+  list.addEventListener("change", onChange);
+  return () => list.removeEventListener("change", onChange);
+}
+
+// src/web/styles.ts
+var HOST = ":is(vire-button,vire-icon-button)[data-vk]";
+var BODY = `${HOST}>button`;
+var STYLES = `
+vire-button,vire-icon-button{display:inline-flex;vertical-align:middle}
+${HOST}{position:relative;--vk-press:0;--vk-hover:0;--vk-body-alpha:0;--vk-body-white:0;--vk-body-lift:0;--vk-grow:0;--vk-defocus:0;--vk-slop-x:0;--vk-slop-y:0}
+${HOST}::before{content:'';position:absolute;inset:calc(var(--vk-slop-y)*-1px) calc(var(--vk-slop-x)*-1px)}
+${BODY}{appearance:none;-webkit-appearance:none;box-sizing:border-box;margin:0;border:0;outline:none;
+ font:inherit;font-weight:500;line-height:1;white-space:nowrap;color:inherit;
+ display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;
+ height:var(--vk-height);min-width:var(--vk-height);padding:0 var(--vk-pad-x);border-radius:var(--vk-radius);
+ -webkit-text-fill-color:color-mix(in srgb,currentColor calc((1 - var(--vk-press)*.55)*100%),transparent);
+ text-shadow:0 0 calc(var(--vk-press)*var(--vk-defocus)*1px) currentColor;
+ background:transparent;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent;
+ transform:scale(calc(1 + var(--vk-press)*var(--vk-grow)))}
+vire-icon-button[data-vk]>button{padding:0;width:var(--vk-height)}
+${BODY}>svg{width:var(--vk-icon);height:var(--vk-icon);flex:none;
+ opacity:calc(1 - var(--vk-press)*.45);filter:blur(calc(var(--vk-press)*var(--vk-defocus)*1px))}
+${BODY}:disabled{cursor:default}
+${HOST}[data-disabled]>button{-webkit-text-fill-color:color-mix(in srgb,currentColor 40%,transparent)}
+${HOST}[data-disabled]>button>svg{opacity:.4}
+${HOST}[data-focus]>button{outline:2px solid currentColor;outline-offset:2px}
+
+${HOST}[data-surface=glass]>button{color:var(--vireglass-ink-color,inherit);
+ background:color-mix(in srgb,color-mix(in srgb,#fff calc((var(--vk-body-white) + var(--vk-body-lift)*2)*100%),var(--vireglass-tint-color,#fff)) calc(var(--vk-body-alpha)*100%),transparent);
+ background:oklab(from color-mix(in srgb,#fff calc(var(--vk-body-white)*100%),var(--vireglass-tint-color,#fff)) calc(l + var(--vk-body-lift)) a b / var(--vk-body-alpha))}
+${HOST}[data-frost][data-surface=glass]>button{color:oklab(from var(--vireglass-tint-color,#fff) calc(.95 - .87*clamp(0,(l + var(--vk-body-lift) - .6)*20,1)) 0 0)}
+
+${HOST}[data-surface=plain]>button{background:color-mix(in srgb,currentColor calc(10% + var(--vk-hover)*6% + var(--vk-press)*14%),transparent)}
+
+${HOST}[data-surface=frosted]>button{
+ background:color-mix(in srgb,Canvas calc(88% - var(--vk-hover)*4% - var(--vk-press)*10%),currentColor);
+ backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
+ box-shadow:0 1px 3px color-mix(in srgb,currentColor 22%,transparent)}
+
+@supports not (color:oklab(from red l a b)){
+${HOST}[data-frost][data-surface=glass]>button{color:inherit;background:color-mix(in srgb,Canvas 82%,currentColor)}
+}
+
+${HOST}[data-contrast]:is([data-surface=plain],[data-surface=frosted])>button{box-shadow:inset 0 0 0 2px currentColor}
+${HOST}[data-contrast][data-surface=frosted]>button{background:Canvas}
+${HOST}[data-contrast][data-surface=glass]>button{background:color-mix(in srgb,color-mix(in srgb,#fff calc((1 - var(--vireglass-ink,0))*100%),#000) 88%,transparent)}
+
+@media (forced-colors:active){
+${BODY}{-webkit-text-fill-color:currentColor;text-shadow:none;color:ButtonText;background:ButtonFace;border:1px solid ButtonText;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none}
+${BODY}>svg{opacity:1;filter:none}
+${HOST}[data-disabled]>button{-webkit-text-fill-color:currentColor;color:GrayText;border-color:GrayText}
+${HOST}[data-focus]>button{outline-color:Highlight}
+}
+`;
+var STYLE_ATTR = "data-vireuikit";
+function ensureStyles(from, nonce) {
+  const root = from.getRootNode();
+  const host = root instanceof ShadowRoot ? root : from.ownerDocument;
+  if (host.querySelector(`style[${STYLE_ATTR}]`)) return;
+  const style = from.ownerDocument.createElement("style");
+  style.setAttribute(STYLE_ATTR, "");
+  if (nonce) style.nonce = nonce;
+  style.textContent = STYLES;
+  (host instanceof ShadowRoot ? host : host.head).appendChild(style);
+}
+
+// src/web/element.ts
+var FORCE_ATTRIBUTE = "data-vire-force-state";
+var FORCED = {
+  rest: CONTROL_IDLE,
+  hover: { ...CONTROL_IDLE, hovered: true },
+  focus: { ...CONTROL_IDLE, focused: true },
+  pressed: { ...CONTROL_IDLE, press: { by: "pointer" } },
+  disabled: { ...CONTROL_IDLE, disabled: true }
+};
+var MATERIAL_STEPS = 10;
+var SUPPRESS_MS = 100;
+function createControlElementClass(kind, options = {}) {
+  const response = pressResponse(kind);
+  return class VireControl extends HTMLElement {
+    static observedAttributes = ["glass", "size", "disabled", FORCE_ATTRIBUTE];
+    #control = null;
+    #state = CONTROL_IDLE;
+    #caps = POINTER_INPUT;
+    #visual = createControlVisual();
+    #own = {};
+    #mode = null;
+    #presentation = null;
+    #glass = null;
+    #glassToken = 0;
+    #glassKey = "";
+    #glassBroken = false;
+    #lastMaterialKey = "";
+    #frame = 0;
+    #lastFrame = 0;
+    #cleanups = [];
+    #suppressClick = false;
+    #suppressTimer = 0;
+    #slop = { x: 0, y: 0 };
+    #morph = null;
+    #sample = null;
+    get a11y() {
+      return this.#own;
+    }
+    set a11y(next) {
+      this.#own = { ...next };
+      if (this.#control) this.#refreshMode();
+    }
+    get sample() {
+      return this.#sample;
+    }
+    set sample(next) {
+      this.#sample = next;
+      this.#glass?.setSample(next);
+    }
+    setMorph(morph) {
+      this.#morph = morph;
+      this.#glass?.setMorph(morph);
+    }
+    connectedCallback() {
+      for (const key of ["a11y", "sample"]) {
+        if (!Object.prototype.hasOwnProperty.call(this, key)) continue;
+        const value = Reflect.get(this, key);
+        Reflect.deleteProperty(this, key);
+        Reflect.set(this, key, value);
+      }
+      ensureStyles(this, options.nonce);
+      this.#cleanups.push(watchCoarsePointer(() => this.#onInputChange()));
+      this.#cleanups.push(watchSystemA11y(() => this.#refreshMode()));
+      this.#cleanups.push(watchA11yOverride(() => this.#refreshMode()));
+      this.#awaitControl();
+    }
+    disconnectedCallback() {
+      for (const cleanup of this.#cleanups.splice(0)) cleanup();
+      cancelAnimationFrame(this.#frame);
+      clearTimeout(this.#suppressTimer);
+      this.#frame = 0;
+      this.#dropGlass();
+      this.#control = null;
+      this.#state = CONTROL_IDLE;
+      this.#suppressClick = false;
+      for (const name of ["data-vk", "data-surface", "data-glass", "data-frost", "data-size"]) this.removeAttribute(name);
+      for (const name of Array.from(this.style)) if (name.startsWith("--vk-")) this.style.removeProperty(name);
+      this.#presentation = null;
+      this.#mode = null;
+    }
+    attributeChangedCallback(name) {
+      if (!this.#control) return;
+      if (name === "disabled") {
+        const wanted = this.hasAttribute("disabled");
+        if (this.#control.disabled !== wanted) this.#control.disabled = wanted;
+        this.#syncDisabled();
+      } else if (name === FORCE_ATTRIBUTE) {
+        this.#applyForced();
+      } else {
+        this.#refreshMode(true);
+      }
+    }
+    // The parser connects the element before its children exist, so the button is waited for
+    // rather than made up.
+    #awaitControl() {
+      const found = this.querySelector(":scope > button");
+      if (found) {
+        this.#upgrade(found);
+        return;
+      }
+      const observer = new MutationObserver(() => {
+        const button = this.querySelector(":scope > button");
+        if (!button) return;
+        observer.disconnect();
+        this.#upgrade(button);
+      });
+      observer.observe(this, { childList: true });
+      this.#cleanups.push(() => observer.disconnect());
+    }
+    #upgrade(control) {
+      this.#control = control;
+      this.setAttribute("data-vk", "");
+      this.#caps = isCoarsePointer() ? TOUCH_INPUT : POINTER_INPUT;
+      this.#listen(control);
+      this.#cleanups.push(this.#observeSize(control));
+      this.#syncDisabled();
+      if (control.matches(":focus")) {
+        this.#dispatch({ type: "focus", visible: control.matches(":focus-visible") });
+      }
+      this.#mode = null;
+      this.#refreshMode();
+    }
+    #onInputChange() {
+      if (!this.#control) return;
+      this.#caps = isCoarsePointer() ? TOUCH_INPUT : POINTER_INPUT;
+      this.#refreshMode(true);
+    }
+    #size() {
+      const wanted = this.getAttribute("size");
+      if (wanted && CONTROL_SIZES.includes(wanted)) return wanted;
+      return defaultSize({ touch: isCoarsePointer() });
+    }
+    #glassMode() {
+      const wanted = this.getAttribute("glass");
+      if (wanted === "touch") return "touch";
+      return wanted === "" || wanted === "present" ? "present" : "off";
+    }
+    #forced() {
+      const wanted = this.getAttribute(FORCE_ATTRIBUTE);
+      return wanted !== null && Object.hasOwn(FORCED, wanted) ? wanted : null;
+    }
+    #dispatch(event) {
+      if (this.#forced()) return false;
+      const step = stepControl(this.#state, event, this.#caps);
+      this.#state = step.state;
+      this.#render();
+      return step.activated;
+    }
+    #listen(control) {
+      const on = (target, type, handler, capture = false) => {
+        target.addEventListener(type, handler, capture);
+        this.#cleanups.push(() => target.removeEventListener(type, handler, capture));
+      };
+      const inside = (e) => {
+        const r = this.getBoundingClientRect();
+        return e.clientX >= r.left - this.#slop.x && e.clientX <= r.right + this.#slop.x && e.clientY >= r.top - this.#slop.y && e.clientY <= r.bottom + this.#slop.y;
+      };
+      const holdSuppression = () => {
+        this.#suppressClick = true;
+        clearTimeout(this.#suppressTimer);
+        this.#suppressTimer = window.setTimeout(() => this.#suppressClick = false, SUPPRESS_MS);
+      };
+      const releaseSuppression = () => {
+        this.#suppressClick = false;
+        clearTimeout(this.#suppressTimer);
+      };
+      const bind = (target, own) => {
+        const mine = (e) => own || e.target === this;
+        on(target, "pointerdown", (e) => {
+          if (e.button !== 0 || !mine(e)) return;
+          releaseSuppression();
+          this.#dispatch({ type: "down", source: "pointer" });
+        });
+        on(target, "pointermove", (e) => {
+          if (!mine(e)) return;
+          if (this.#state.press.by === "pointer" && !inside(e)) this.#dispatch({ type: "leave" });
+        });
+        on(target, "pointerup", (e) => {
+          if (!mine(e)) return;
+          const wasPressed = this.#state.press.by === "pointer";
+          const activated = this.#dispatch({ type: "up", source: "pointer" });
+          if (own && !activated && !wasPressed && !inside(e)) holdSuppression();
+        });
+        on(target, "pointercancel", (e) => {
+          if (mine(e)) this.#dispatch({ type: "cancel" });
+        });
+        on(target, "pointerenter", (e) => {
+          if (mine(e) && e.pointerType !== "touch") this.#dispatch({ type: "enter" });
+        });
+        on(target, "pointerleave", (e) => {
+          if (mine(e) && !control.hasPointerCapture?.(e.pointerId)) this.#dispatch({ type: "leave" });
+        });
+      };
+      bind(control, true);
+      bind(this, false);
+      on(
+        this,
+        "click",
+        (e) => {
+          if (e.target !== this) return;
+          e.stopImmediatePropagation();
+          e.preventDefault();
+          control.click();
+        },
+        true
+      );
+      on(
+        control,
+        "click",
+        (e) => {
+          if (!this.#suppressClick) return;
+          releaseSuppression();
+          if (e.detail === 0) return;
+          e.preventDefault();
+          e.stopImmediatePropagation();
+        },
+        true
+      );
+      on(control, "keydown", (e) => {
+        releaseSuppression();
+        if ((e.key === " " || e.key === "Enter") && !e.repeat) this.#dispatch({ type: "down", source: "keyboard" });
+      });
+      on(control, "keyup", (e) => {
+        if (e.key === " " || e.key === "Enter") this.#dispatch({ type: "up", source: "keyboard" });
+      });
+      on(control, "focus", () => this.#dispatch({ type: "focus", visible: control.matches(":focus-visible") }));
+      on(control, "blur", () => this.#dispatch({ type: "blur" }));
+      on(control, "focusout", () => this.#dispatch({ type: "blur" }));
+      const mutations = new MutationObserver(() => this.#syncDisabled());
+      mutations.observe(control, { attributes: true, attributeFilter: ["disabled"] });
+      this.#cleanups.push(() => mutations.disconnect());
+    }
+    #observeSize(control) {
+      if (typeof ResizeObserver === "undefined") return () => {
+      };
+      const observer = new ResizeObserver(() => {
+        this.#applySlop();
+        this.#glass?.setGeometry(this.#geometry(control));
+      });
+      observer.observe(control);
+      return () => observer.disconnect();
+    }
+    #geometry(control) {
+      const radius = parseFloat(getComputedStyle(control).borderTopLeftRadius) || 0;
+      return { width: control.offsetWidth, height: control.offsetHeight, cornerRadius: radius };
+    }
+    #applySlop() {
+      const control = this.#control;
+      if (!control) return;
+      const floor = minTarget({ touch: isCoarsePointer() });
+      this.#slop = { x: hitSlop(control.offsetWidth, floor), y: hitSlop(control.offsetHeight, floor) };
+      this.style.setProperty("--vk-slop-x", String(this.#slop.x));
+      this.style.setProperty("--vk-slop-y", String(this.#slop.y));
+    }
+    #syncDisabled() {
+      const control = this.#control;
+      if (!control) return;
+      if (this.hasAttribute("disabled") && !control.disabled) control.disabled = true;
+      const disabled = control.disabled;
+      if (this.#forced()) return;
+      if (disabled !== this.#state.disabled) {
+        this.#state = stepControl(this.#state, { type: "disable", disabled }, this.#caps).state;
+        this.#render();
+      }
+    }
+    #applyForced() {
+      const forced = this.#forced();
+      if (forced) {
+        this.#state = FORCED[forced];
+        settleControlVisual(this.#visual, this.#state);
+        if (forced === "disabled" && this.#control && !this.#control.disabled) this.#control.disabled = true;
+      } else {
+        this.#state = CONTROL_IDLE;
+        this.#syncDisabled();
+      }
+      this.#render(true);
+    }
+    #refreshMode(force = false, afterFailure = false) {
+      if (!afterFailure) this.#glassBroken = false;
+      const mode = effectiveA11y(this.#own);
+      let next = presentationFor(mode, this.#glassMode() !== "off");
+      if (this.#glassBroken && next.glass) next = { ...next, glass: false, surface: next.frost ? "frosted" : "plain" };
+      const changed = force || !this.#mode || !sameA11y(this.#mode, mode) || next.surface !== this.#presentation?.surface;
+      this.#mode = mode;
+      this.#presentation = next;
+      this.#applySize();
+      this.setAttribute("data-surface", next.surface);
+      this.toggleAttribute("data-contrast", next.contrastBorder);
+      this.toggleAttribute("data-frost", next.frost);
+      this.setAttribute("data-glass", next.glass ? "on" : "off");
+      if (changed) this.#reattachGlass(mode);
+      if (this.#forced()) this.#applyForced();
+      else this.#render(true);
+    }
+    #applySize() {
+      const size = this.#size();
+      const spec = kind === "iconButton" ? iconButtonSize(size) : BUTTON_SIZES[size];
+      const set = (name, value) => this.style.setProperty(name, value);
+      set("--vk-height", `${spec.height}px`);
+      set("--vk-pad-x", `${spec.paddingX}px`);
+      set("--vk-icon", `${spec.icon}px`);
+      set("--vk-radius", `${spec.radius}px`);
+      set("--vk-grow", String(response.grow));
+      set("--vk-defocus", String(response.defocus));
+      this.setAttribute("data-size", size);
+      this.#applySlop();
+    }
+    #dropGlass() {
+      this.#glassToken += 1;
+      this.#glass?.destroy();
+      this.#glass = null;
+      this.#glassKey = "";
+      this.#lastMaterialKey = "";
+    }
+    #reattachGlass(mode) {
+      const control = this.#control;
+      const want = this.#presentation?.glass === true && control !== null;
+      const key = want ? `${this.#glassMode()}|${JSON.stringify(mode)}|${this.#size()}` : "";
+      if (key === this.#glassKey) return;
+      this.#dropGlass();
+      this.#glassKey = key;
+      if (!want || !control) return;
+      const token = this.#glassToken;
+      const sample = this.#sample;
+      void attachControlGlass(
+        control,
+        {
+          material: vireglass.VIREGLASS_CONTROL_MATERIAL,
+          geometry: this.#geometry(control),
+          accessibility: mode,
+          onTouch: this.#glassMode() === "touch",
+          sample
+        },
+        () => token === this.#glassToken && this.isConnected
+      ).then((session) => {
+        if (!session) return;
+        this.#glass = session;
+        if (this.#morph) session.setMorph(this.#morph);
+        if (this.#sample !== sample) session.setSample(this.#sample);
+        this.#pushMaterial(true);
+        this.dispatchEvent(new CustomEvent("vire-glass-ready"));
+      }).catch(() => {
+        if (token !== this.#glassToken) return;
+        this.#glassKey = "";
+        this.#glassBroken = true;
+        this.#refreshMode(false, true);
+      });
+    }
+    #pushMaterial(force = false) {
+      const glass = this.#glass;
+      if (!glass) return;
+      const atom = visualAtomState(this.#visual, this.#state);
+      const snap = (v) => Math.round(Math.min(Math.max(v, 0), 1) * MATERIAL_STEPS) / MATERIAL_STEPS;
+      const quantized = { ...atom, pressed: snap(atom.pressed), hovered: snap(atom.hovered) };
+      const key = `${quantized.pressed}|${quantized.hovered}|${quantized.disabled}`;
+      if (!force && key === this.#lastMaterialKey) return;
+      this.#lastMaterialKey = key;
+      const material = atomMaterial(vireglass.VIREGLASS_CONTROL_MATERIAL, kind, quantized);
+      glass.setMaterial(material);
+      if (this.#glassMode() === "touch" && this.#forced()) glass.setAppear(quantized.pressed);
+    }
+    #render(immediate = false) {
+      if (immediate && this.#forced()) settleControlVisual(this.#visual, this.#state);
+      this.#paint();
+      if (this.#frame || immediate && this.#forced()) return;
+      this.#lastFrame = 0;
+      this.#frame = requestAnimationFrame((t) => this.#tick(t));
+    }
+    #tick(now) {
+      this.#frame = 0;
+      if (!this.isConnected) return;
+      const dt = this.#lastFrame ? Math.min((now - this.#lastFrame) / 1e3, 0.05) : 1 / 60;
+      this.#lastFrame = now;
+      const moving = stepControlVisual(this.#visual, dt, this.#state, this.#presentation?.instantSprings ?? false);
+      this.#paint();
+      if (moving) this.#frame = requestAnimationFrame((t) => this.#tick(t));
+    }
+    #paint() {
+      const v = this.#visual;
+      const set = (name, value) => this.style.setProperty(name, value.toFixed(3));
+      set("--vk-press", v.pressed.x);
+      set("--vk-hover", v.hovered.x);
+      const body = atomBody(vireglass.VIREGLASS_CONTROL_MATERIAL, visualAtomState(v, this.#state), this.#presentation?.frost ?? false);
+      set("--vk-body-alpha", body.alpha);
+      set("--vk-body-white", body.white);
+      set("--vk-body-lift", body.lift);
+      this.toggleAttribute("data-pressed", this.#state.press.by !== null);
+      this.toggleAttribute("data-hovered", this.#state.hovered);
+      this.toggleAttribute("data-focus", this.#state.focused);
+      this.toggleAttribute("data-disabled", this.#state.disabled);
+      this.#pushMaterial();
+    }
+  };
+}
+
+// src/web/index.ts
+var BUTTON_TAG = "vire-button";
+var ICON_BUTTON_TAG = "vire-icon-button";
+function defineVireElements(options = {}) {
+  const registry = options.registry ?? (typeof customElements === "undefined" ? void 0 : customElements);
+  if (!registry) return;
+  const pairs = [
+    [BUTTON_TAG, "button"],
+    [ICON_BUTTON_TAG, "iconButton"]
+  ];
+  for (const [tag, kind] of pairs) {
+    if (!registry.get(tag)) registry.define(tag, createControlElementClass(kind, { nonce: options.nonce }));
+  }
+}
+
+exports.BUTTON_TAG = BUTTON_TAG;
+exports.ICON_BUTTON_TAG = ICON_BUTTON_TAG;
+exports.STYLES = STYLES;
+exports.defineVireElements = defineVireElements;
+exports.getA11yOverride = getA11yOverride;
+exports.setA11yOverride = setA11yOverride;
+exports.systemA11y = systemA11y;
+//# sourceMappingURL=web.cjs.map
+//# sourceMappingURL=web.cjs.map