vireuikit 0.4.0 → 0.6.0

package/dist/web.js

@@ -0,0 +1,567 @@
+import { CONTROL_IDLE, A11Y_NONE, pressResponse, POINTER_INPUT, createControlVisual, TOUCH_INPUT, CONTROL_SIZES, defaultSize, stepControl, minTarget, hitSlop, settleControlVisual, presentationFor, sameA11y, iconButtonSize, BUTTON_SIZES, visualAtomState, atomMaterial, stepControlVisual, atomBody, resolveA11y } from './chunk-I3BD3XGC.js';
+import { VIREGLASS_CONTROL_MATERIAL } from 'vireglass';
+
+// 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_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_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_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 }));
+  }
+}
+
+export { BUTTON_TAG, ICON_BUTTON_TAG, STYLES, defineVireElements, getA11yOverride, setA11yOverride, systemA11y };
+//# sourceMappingURL=web.js.map
+//# sourceMappingURL=web.js.map