@greypan/web-ui 2.1.7 → 3.0.0

package/dist/shared/overlay/portal.js

@@ -1,17 +1,31 @@
 import { getFallbackOverlayRoot as e } from "../theme/overlay-root.js";
-import { findNearestTheme as t } from "../theme/theme-scope.js";
+import { findNearestTheme as t, findRootTheme as n } from "../theme/theme-scope.js";
+import { definePlugin as r } from "@greypan/js-kit";
 //#region src/shared/overlay/portal.ts
-function n(e) {
-	let t = document.createElement("div"), n = t.attachShadow({ mode: "open" }), i = document.createElement("style");
-	i.textContent = e.style;
-	let a = document.createElement("div");
-	a.className = e.className, a.dataset.wuiPresence = "entering", n.append(i, a), r(e.container, e.target).appendChild(t);
-	let o = [];
+var i = () => r((e) => {
+	let t = document.createElement("div");
+	t.style.display = "contents";
+	let n = t.attachShadow({ mode: "open" }), r = document.createElement("style");
+	r.textContent = e.style;
+	let i = document.createElement("div");
+	i.className = e.className, i.dataset.wuiPresence = "entering", n.append(r, i), a(e.container, e.target).appendChild(t);
+	let o = [], s = (e) => {
+		e.forEach((e) => {
+			let t = o.indexOf(e);
+			t >= 0 && o.splice(t, 1);
+		});
+	};
 	return {
-		panel: a,
-		moveContent(e, t = a) {
+		panel: i,
+		moveContent(e, t = i) {
 			o.splice(0, o.length, ...e), t.append(...o);
 		},
+		appendContent(e, t = i) {
+			s(e), o.push(...e), t.append(...e);
+		},
+		removeContent(e) {
+			s(e);
+		},
 		restoreContent() {
 			e.target.append(...o), o.length = 0;
 		},
@@ -19,11 +33,11 @@ function n(e) {
 			t.remove();
 		}
 	};
-}
-function r(n, r) {
-	return (typeof n == "function" ? n() : n) ?? t(r)?.getOverlayRoot() ?? e();
+});
+function a(r, i, a = {}) {
+	return (typeof r == "function" ? r() : r) || ((a.preferRootTheme ? n() : t(i))?.getOverlayRoot() ?? e());
 }
 //#endregion
-export { n as createOverlayPortal, r as resolveOverlayContainer };
+export { i as defineOverlayPortal, a as resolveOverlayContainer };
 
 //# sourceMappingURL=portal.js.map

package/dist/shared/overlay/portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"portal.js","names":[],"sources":["../../../src/shared/overlay/portal.ts"],"sourcesContent":["import { getFallbackOverlayRoot } from '@/shared/theme/overlay-root'\nimport { findNearestTheme } from '@/shared/theme/theme-scope'\n\nexport type OverlayContainer = HTMLElement | (() => HTMLElement | undefined)\n\ninterface OverlayPortalOptions {\n  container?: OverlayContainer\n  target: Element\n  style: string\n  className: string\n}\n\nexport interface OverlayPortal {\n  readonly panel: HTMLElement\n  restoreContent(): void\n  moveContent(nodes: Node[], target?: HTMLElement): void\n  remove(): void\n}\n\nexport function createOverlayPortal(options: OverlayPortalOptions): OverlayPortal {\n  const host = document.createElement('div')\n  const root = host.attachShadow({ mode: 'open' })\n  const style = document.createElement('style')\n  style.textContent = options.style\n  const panel = document.createElement('div')\n  panel.className = options.className\n  panel.dataset.wuiPresence = 'entering'\n  root.append(style, panel)\n  resolveOverlayContainer(options.container, options.target).appendChild(host)\n\n  const nodes: Node[] = []\n  return {\n    panel,\n    moveContent(content, target = panel) {\n      nodes.splice(0, nodes.length, ...content)\n      target.append(...nodes)\n    },\n    restoreContent() {\n      options.target.append(...nodes)\n      nodes.length = 0\n    },\n    remove() {\n      host.remove()\n    }\n  }\n}\n\nexport function resolveOverlayContainer(container: OverlayContainer | undefined, target: Element): HTMLElement {\n  const explicit = typeof container === 'function' ? container() : container\n  return explicit ?? findNearestTheme(target)?.getOverlayRoot() ?? getFallbackOverlayRoot()\n}\n"],"mappings":";;;AAmBA,SAAgB,EAAoB,GAA8C;CAChF,IAAM,IAAO,SAAS,cAAc,KAAK,GACnC,IAAO,EAAK,aAAa,EAAE,MAAM,OAAO,CAAC,GACzC,IAAQ,SAAS,cAAc,OAAO;CAC5C,EAAM,cAAc,EAAQ;CAC5B,IAAM,IAAQ,SAAS,cAAc,KAAK;CAI1C,AAHA,EAAM,YAAY,EAAQ,WAC1B,EAAM,QAAQ,cAAc,YAC5B,EAAK,OAAO,GAAO,CAAK,GACxB,EAAwB,EAAQ,WAAW,EAAQ,MAAM,CAAC,CAAC,YAAY,CAAI;CAE3E,IAAM,IAAgB,CAAC;CACvB,OAAO;EACL;EACA,YAAY,GAAS,IAAS,GAAO;GAEnC,AADA,EAAM,OAAO,GAAG,EAAM,QAAQ,GAAG,CAAO,GACxC,EAAO,OAAO,GAAG,CAAK;EACxB;EACA,iBAAiB;GAEf,AADA,EAAQ,OAAO,OAAO,GAAG,CAAK,GAC9B,EAAM,SAAS;EACjB;EACA,SAAS;GACP,EAAK,OAAO;EACd;CACF;AACF;AAEA,SAAgB,EAAwB,GAAyC,GAA8B;CAE7G,QADiB,OAAO,KAAc,aAAa,EAAU,IAAI,MAC9C,EAAiB,CAAM,CAAC,EAAE,eAAe,KAAK,EAAuB;AAC1F"}
+{"version":3,"file":"portal.js","names":[],"sources":["../../../src/shared/overlay/portal.ts"],"sourcesContent":["import { definePlugin } from '@greypan/js-kit'\n\nimport { getFallbackOverlayRoot } from '@/shared/theme/overlay-root'\nimport { findNearestTheme, findRootTheme } from '@/shared/theme/theme-scope'\n\nexport type OverlayContainer = HTMLElement | (() => HTMLElement | undefined)\n\nexport interface OverlayContainerResolutionOptions {\n  /** 无 target 时优先使用文档中的 root theme。 */\n  preferRootTheme?: boolean\n}\n\nexport interface OverlayPortalOptions {\n  container?: OverlayContainer\n  target: Element\n  style: string\n  className: string\n}\n\nexport interface OverlayPortal {\n  readonly panel: HTMLElement\n  restoreContent(): void\n  moveContent(nodes: Node[], target?: HTMLElement): void\n  appendContent(nodes: Node[], target?: HTMLElement): void\n  removeContent(nodes: Node[]): void\n  remove(): void\n}\n\n/**\n * 构建带 Shadow DOM 样式边界的 Portal 面板，并追踪被迁移的内容节点以便恢复。\n */\nexport const defineOverlayPortal = () =>\n  definePlugin<OverlayPortal, OverlayPortalOptions>(ctx => {\n    const host = document.createElement('div')\n    // :host 规则可能让宿主在 overlay 容器中生成行盒；display: contents 保留面板定位而不参与布局。\n    host.style.display = 'contents'\n\n    const root = host.attachShadow({ mode: 'open' })\n    const style = document.createElement('style')\n    style.textContent = ctx.style\n    const panel = document.createElement('div')\n    panel.className = ctx.className\n    panel.dataset.wuiPresence = 'entering'\n    root.append(style, panel)\n\n    resolveOverlayContainer(ctx.container, ctx.target).appendChild(host)\n\n    const trackedNodes: Node[] = []\n    const untrackNodes = (nodes: Node[]) => {\n      nodes.forEach(node => {\n        const index = trackedNodes.indexOf(node)\n        if (index >= 0) trackedNodes.splice(index, 1)\n      })\n    }\n\n    return {\n      panel,\n\n      moveContent(nodes, target = panel) {\n        trackedNodes.splice(0, trackedNodes.length, ...nodes)\n        target.append(...trackedNodes)\n      },\n\n      appendContent(nodes, target = panel) {\n        untrackNodes(nodes)\n        trackedNodes.push(...nodes)\n        target.append(...nodes)\n      },\n\n      removeContent(nodes) {\n        untrackNodes(nodes)\n      },\n\n      restoreContent() {\n        ctx.target.append(...trackedNodes)\n        trackedNodes.length = 0\n      },\n\n      remove() {\n        host.remove()\n      }\n    }\n  })\n\nexport function resolveOverlayContainer(\n  container: OverlayContainer | undefined,\n  target: Element,\n  options: OverlayContainerResolutionOptions = {}\n): HTMLElement {\n  const explicit = typeof container === 'function' ? container() : container\n  if (explicit) return explicit\n\n  // 无 target 的调用（如菜单）优先使用 root theme；有 target 时使用最近的 theme。\n  const theme = options.preferRootTheme ? findRootTheme() : findNearestTheme(target)\n  return theme?.getOverlayRoot() ?? getFallbackOverlayRoot()\n}\n"],"mappings":";;;;AA+BA,IAAa,UACX,GAAkD,MAAO;CACvD,IAAM,IAAO,SAAS,cAAc,KAAK;CAEzC,EAAK,MAAM,UAAU;CAErB,IAAM,IAAO,EAAK,aAAa,EAAE,MAAM,OAAO,CAAC,GACzC,IAAQ,SAAS,cAAc,OAAO;CAC5C,EAAM,cAAc,EAAI;CACxB,IAAM,IAAQ,SAAS,cAAc,KAAK;CAK1C,AAJA,EAAM,YAAY,EAAI,WACtB,EAAM,QAAQ,cAAc,YAC5B,EAAK,OAAO,GAAO,CAAK,GAExB,EAAwB,EAAI,WAAW,EAAI,MAAM,CAAC,CAAC,YAAY,CAAI;CAEnE,IAAM,IAAuB,CAAC,GACxB,KAAgB,MAAkB;EACtC,EAAM,SAAQ,MAAQ;GACpB,IAAM,IAAQ,EAAa,QAAQ,CAAI;GACvC,AAAI,KAAS,KAAG,EAAa,OAAO,GAAO,CAAC;EAC9C,CAAC;CACH;CAEA,OAAO;EACL;EAEA,YAAY,GAAO,IAAS,GAAO;GAEjC,AADA,EAAa,OAAO,GAAG,EAAa,QAAQ,GAAG,CAAK,GACpD,EAAO,OAAO,GAAG,CAAY;EAC/B;EAEA,cAAc,GAAO,IAAS,GAAO;GAGnC,AAFA,EAAa,CAAK,GAClB,EAAa,KAAK,GAAG,CAAK,GAC1B,EAAO,OAAO,GAAG,CAAK;EACxB;EAEA,cAAc,GAAO;GACnB,EAAa,CAAK;EACpB;EAEA,iBAAiB;GAEf,AADA,EAAI,OAAO,OAAO,GAAG,CAAY,GACjC,EAAa,SAAS;EACxB;EAEA,SAAS;GACP,EAAK,OAAO;EACd;CACF;AACF,CAAC;AAEH,SAAgB,EACd,GACA,GACA,IAA6C,CAAC,GACjC;CAMb,QALiB,OAAO,KAAc,aAAa,EAAU,IAAI,QAInD,EAAQ,kBAAkB,EAAc,IAAI,EAAiB,CAAM,EAAA,EACnE,eAAe,KAAK,EAAuB;AAC3D"}

package/dist/shared/overlay/presence.js.map

@@ -1 +1 @@
-{"version":3,"file":"presence.js","names":[],"sources":["../../../src/shared/overlay/presence.ts"],"sourcesContent":["const DEFAULT_EXIT_DURATION = 160\nconst EXIT_FALLBACK_BUFFER = 80\n\nconst pendingExits = new WeakMap<HTMLElement, () => void>()\n\ninterface OverlayPresenceOptions {\n  isInstant?: boolean\n}\n\nfunction parseDuration(value: string): number {\n  const trimmed = value.trim()\n  if (trimmed.endsWith('ms')) return Number.parseFloat(trimmed)\n  if (trimmed.endsWith('s')) return Number.parseFloat(trimmed) * 1000\n  return 0\n}\n\n/** 读取元素实际 CSS transition 的最长时长，供可覆盖主题 token 的 JS 生命周期使用。 */\nexport function getTransitionDuration(panel: HTMLElement, fallback = DEFAULT_EXIT_DURATION): number {\n  const style = getComputedStyle(panel)\n  const durations = style.transitionDuration.split(',').map(parseDuration)\n  const delays = style.transitionDelay.split(',').map(parseDuration)\n  const longest = durations.reduce(\n    (max, duration, index) => Math.max(max, duration + (delays[index] ?? delays[0] ?? 0)),\n    0\n  )\n\n  return longest || fallback\n}\n\n/** 以可中断的方式显示浮层，避免快速切换时重启动画。 */\nexport function showOverlayPresence(panel: HTMLElement, options: OverlayPresenceOptions = {}) {\n  pendingExits.get(panel)?.()\n  panel.hidden = false\n  if (options.isInstant) {\n    panel.dataset.wuiPresence = 'open'\n    return\n  }\n  panel.dataset.wuiPresence = 'entering'\n\n  // Commit the initial state so a newly mounted panel has a transition source.\n  void panel.offsetWidth\n\n  requestAnimationFrame(() => {\n    if (panel.dataset.wuiPresence === 'entering') panel.dataset.wuiPresence = 'open'\n  })\n}\n\n/** 播放退出过渡；若在结束前重新显示则返回 false。 */\nexport function hideOverlayPresence(panel: HTMLElement): Promise<boolean> {\n  pendingExits.get(panel)?.()\n  panel.dataset.wuiPresence = 'closing'\n\n  // jsdom 等没有计算 CSS transition 的环境无需伪造退场等待。\n  if (getTransitionDuration(panel, 0) === 0) {\n    panel.hidden = true\n    return Promise.resolve(true)\n  }\n\n  return new Promise(resolve => {\n    let settled = false\n    const finish = (didClose: boolean) => {\n      if (settled) return\n      settled = true\n      panel.removeEventListener('transitionend', onTransitionEnd)\n      clearTimeout(timeout)\n      pendingExits.delete(panel)\n      if (didClose && panel.dataset.wuiPresence === 'closing') panel.hidden = true\n      resolve(didClose)\n    }\n\n    const onTransitionEnd = (event: TransitionEvent) => {\n      if (event.target === panel && (event.propertyName === 'opacity' || event.propertyName === 'transform'))\n        finish(true)\n    }\n\n    pendingExits.set(panel, () => finish(false))\n    panel.addEventListener('transitionend', onTransitionEnd)\n    const timeout = setTimeout(() => finish(true), getTransitionDuration(panel) + EXIT_FALLBACK_BUFFER)\n  })\n}\n"],"mappings":";AAAA,IAGM,oBAAe,IAAI,QAAiC;AAM1D,SAAS,EAAc,GAAuB;CAC5C,IAAM,IAAU,EAAM,KAAK;CAG3B,OAFI,EAAQ,SAAS,IAAI,IAAU,OAAO,WAAW,CAAO,IACxD,EAAQ,SAAS,GAAG,IAAU,OAAO,WAAW,CAAO,IAAI,MACxD;AACT;AAGA,SAAgB,EAAsB,GAAoB,IAAW,KAA+B;CAClG,IAAM,IAAQ,iBAAiB,CAAK,GAC9B,IAAY,EAAM,mBAAmB,MAAM,GAAG,CAAC,CAAC,IAAI,CAAa,GACjE,IAAS,EAAM,gBAAgB,MAAM,GAAG,CAAC,CAAC,IAAI,CAAa;CAMjE,OALgB,EAAU,QACvB,GAAK,GAAU,MAAU,KAAK,IAAI,GAAK,KAAY,EAAO,MAAU,EAAO,MAAM,EAAE,GACpF,CAGK,KAAW;AACpB;AAGA,SAAgB,EAAoB,GAAoB,IAAkC,CAAC,GAAG;CAG5F,IAFA,EAAa,IAAI,CAAK,CAAC,GAAG,GAC1B,EAAM,SAAS,IACX,EAAQ,WAAW;EACrB,EAAM,QAAQ,cAAc;EAC5B;CACF;CAMA,AALA,EAAM,QAAQ,cAAc,YAG5B,EAAW,aAEX,4BAA4B;EAC1B,AAAI,EAAM,QAAQ,gBAAgB,eAAY,EAAM,QAAQ,cAAc;CAC5E,CAAC;AACH;AAGA,SAAgB,EAAoB,GAAsC;CAUxE,OATA,EAAa,IAAI,CAAK,CAAC,GAAG,GAC1B,EAAM,QAAQ,cAAc,WAGxB,EAAsB,GAAO,CAAC,MAAM,KACtC,EAAM,SAAS,IACR,QAAQ,QAAQ,EAAI,KAGtB,IAAI,SAAQ,MAAW;EAC5B,IAAI,IAAU,IACR,KAAU,MAAsB;GAChC,MACJ,IAAU,IACV,EAAM,oBAAoB,iBAAiB,CAAe,GAC1D,aAAa,CAAO,GACpB,EAAa,OAAO,CAAK,GACrB,KAAY,EAAM,QAAQ,gBAAgB,cAAW,EAAM,SAAS,KACxE,EAAQ,CAAQ;EAClB,GAEM,KAAmB,MAA2B;GAClD,AAAI,EAAM,WAAW,MAAU,EAAM,iBAAiB,aAAa,EAAM,iBAAiB,gBACxF,EAAO,EAAI;EACf;EAGA,AADA,EAAa,IAAI,SAAa,EAAO,EAAK,CAAC,GAC3C,EAAM,iBAAiB,iBAAiB,CAAe;EACvD,IAAM,IAAU,iBAAiB,EAAO,EAAI,GAAG,EAAsB,CAAK,IAAI,EAAoB;CACpG,CAAC;AACH"}
+{"version":3,"file":"presence.js","names":[],"sources":["../../../src/shared/overlay/presence.ts"],"sourcesContent":["const DEFAULT_EXIT_DURATION = 160\nconst EXIT_FALLBACK_BUFFER = 80\n\nconst pendingExits = new WeakMap<HTMLElement, () => void>()\n\ninterface OverlayPresenceOptions {\n  isInstant?: boolean\n}\n\nfunction parseDuration(value: string): number {\n  const trimmed = value.trim()\n  if (trimmed.endsWith('ms')) return Number.parseFloat(trimmed)\n  if (trimmed.endsWith('s')) return Number.parseFloat(trimmed) * 1000\n  return 0\n}\n\n// 读取元素实际 CSS transition 的最长时长，供可覆盖主题 token 的 JS 生命周期使用。\nexport function getTransitionDuration(panel: HTMLElement, fallback = DEFAULT_EXIT_DURATION): number {\n  const style = getComputedStyle(panel)\n  const durations = style.transitionDuration.split(',').map(parseDuration)\n  const delays = style.transitionDelay.split(',').map(parseDuration)\n  const longest = durations.reduce(\n    (max, duration, index) => Math.max(max, duration + (delays[index] ?? delays[0] ?? 0)),\n    0\n  )\n\n  return longest || fallback\n}\n\n// 以可中断的方式显示浮层，避免快速切换时重启动画。\nexport function showOverlayPresence(panel: HTMLElement, options: OverlayPresenceOptions = {}) {\n  pendingExits.get(panel)?.()\n  panel.hidden = false\n  if (options.isInstant) {\n    panel.dataset.wuiPresence = 'open'\n    return\n  }\n  panel.dataset.wuiPresence = 'entering'\n\n  // Commit the initial state so a newly mounted panel has a transition source.\n  void panel.offsetWidth\n\n  requestAnimationFrame(() => {\n    if (panel.dataset.wuiPresence === 'entering') panel.dataset.wuiPresence = 'open'\n  })\n}\n\n// 播放退出过渡；若在结束前重新显示则返回 false。\nexport function hideOverlayPresence(panel: HTMLElement): Promise<boolean> {\n  pendingExits.get(panel)?.()\n  panel.dataset.wuiPresence = 'closing'\n\n  // jsdom 等没有计算 CSS transition 的环境无需伪造退场等待。\n  if (getTransitionDuration(panel, 0) === 0) {\n    panel.hidden = true\n    return Promise.resolve(true)\n  }\n\n  return new Promise(resolve => {\n    let settled = false\n    const finish = (didClose: boolean) => {\n      if (settled) return\n      settled = true\n      panel.removeEventListener('transitionend', onTransitionEnd)\n      clearTimeout(timeout)\n      pendingExits.delete(panel)\n      if (didClose && panel.dataset.wuiPresence === 'closing') panel.hidden = true\n      resolve(didClose)\n    }\n\n    const onTransitionEnd = (event: TransitionEvent) => {\n      if (event.target === panel && (event.propertyName === 'opacity' || event.propertyName === 'transform'))\n        finish(true)\n    }\n\n    pendingExits.set(panel, () => finish(false))\n    panel.addEventListener('transitionend', onTransitionEnd)\n    const timeout = setTimeout(() => finish(true), getTransitionDuration(panel) + EXIT_FALLBACK_BUFFER)\n  })\n}\n"],"mappings":";AAAA,IAGM,oBAAe,IAAI,QAAiC;AAM1D,SAAS,EAAc,GAAuB;CAC5C,IAAM,IAAU,EAAM,KAAK;CAG3B,OAFI,EAAQ,SAAS,IAAI,IAAU,OAAO,WAAW,CAAO,IACxD,EAAQ,SAAS,GAAG,IAAU,OAAO,WAAW,CAAO,IAAI,MACxD;AACT;AAGA,SAAgB,EAAsB,GAAoB,IAAW,KAA+B;CAClG,IAAM,IAAQ,iBAAiB,CAAK,GAC9B,IAAY,EAAM,mBAAmB,MAAM,GAAG,CAAC,CAAC,IAAI,CAAa,GACjE,IAAS,EAAM,gBAAgB,MAAM,GAAG,CAAC,CAAC,IAAI,CAAa;CAMjE,OALgB,EAAU,QACvB,GAAK,GAAU,MAAU,KAAK,IAAI,GAAK,KAAY,EAAO,MAAU,EAAO,MAAM,EAAE,GACpF,CAGK,KAAW;AACpB;AAGA,SAAgB,EAAoB,GAAoB,IAAkC,CAAC,GAAG;CAG5F,IAFA,EAAa,IAAI,CAAK,CAAC,GAAG,GAC1B,EAAM,SAAS,IACX,EAAQ,WAAW;EACrB,EAAM,QAAQ,cAAc;EAC5B;CACF;CAMA,AALA,EAAM,QAAQ,cAAc,YAG5B,EAAW,aAEX,4BAA4B;EAC1B,AAAI,EAAM,QAAQ,gBAAgB,eAAY,EAAM,QAAQ,cAAc;CAC5E,CAAC;AACH;AAGA,SAAgB,EAAoB,GAAsC;CAUxE,OATA,EAAa,IAAI,CAAK,CAAC,GAAG,GAC1B,EAAM,QAAQ,cAAc,WAGxB,EAAsB,GAAO,CAAC,MAAM,KACtC,EAAM,SAAS,IACR,QAAQ,QAAQ,EAAI,KAGtB,IAAI,SAAQ,MAAW;EAC5B,IAAI,IAAU,IACR,KAAU,MAAsB;GAChC,MACJ,IAAU,IACV,EAAM,oBAAoB,iBAAiB,CAAe,GAC1D,aAAa,CAAO,GACpB,EAAa,OAAO,CAAK,GACrB,KAAY,EAAM,QAAQ,gBAAgB,cAAW,EAAM,SAAS,KACxE,EAAQ,CAAQ;EAClB,GAEM,KAAmB,MAA2B;GAClD,AAAI,EAAM,WAAW,MAAU,EAAM,iBAAiB,aAAa,EAAM,iBAAiB,gBACxF,EAAO,EAAI;EACf;EAGA,AADA,EAAa,IAAI,SAAa,EAAO,EAAK,CAAC,GAC3C,EAAM,iBAAiB,iBAAiB,CAAe;EACvD,IAAM,IAAU,iBAAiB,EAAO,EAAI,GAAG,EAAsB,CAAK,IAAI,EAAoB;CACpG,CAAC;AACH"}

package/dist/shared/scroll-lock/scroll-lock.js

@@ -1,26 +1,27 @@
+import { definePlugin as e } from "@greypan/js-kit";
 //#region src/shared/scroll-lock/scroll-lock.ts
-var e = 0, t = "", n = 0;
-function r() {
-	e === 0 && (n = window.scrollY, t = document.documentElement.style.overflow, document.documentElement.style.overflow = "hidden", document.body.style.position = "fixed", document.body.style.top = `-${n}px`, document.body.style.width = "100%"), e++;
-}
+var t = 0, n = "", r = 0;
 function i() {
-	e = Math.max(0, e - 1), e === 0 && (document.documentElement.style.overflow = t, document.body.style.position = "", document.body.style.top = "", document.body.style.width = "", window.scrollTo(0, n));
+	t === 0 && (r = window.scrollY, n = document.documentElement.style.overflow, document.documentElement.style.overflow = "hidden", document.body.style.position = "fixed", document.body.style.top = `-${r}px`, document.body.style.width = "100%"), t++;
 }
 function a() {
-	let e = !1;
+	t = Math.max(0, t - 1), t === 0 && (document.documentElement.style.overflow = n, document.body.style.position = "", document.body.style.top = "", document.body.style.width = "", window.scrollTo(0, r));
+}
+var o = () => e(() => {
+	let e = !1, t = (t) => {
+		t !== e && (t ? i() : a(), e = t);
+	};
 	return {
 		get isLocked() {
 			return e;
 		},
-		sync(t) {
-			t !== e && (t ? r() : i(), e = t);
-		},
+		sync: t,
 		release() {
-			this.sync(!1);
+			t(!1);
 		}
 	};
-}
+});
 //#endregion
-export { a as createScrollLockLease, r as lockScroll, i as unlockScroll };
+export { o as defineScrollLockLease, i as lockScroll, a as unlockScroll };
 
 //# sourceMappingURL=scroll-lock.js.map

package/dist/shared/scroll-lock/scroll-lock.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-lock.js","names":[],"sources":["../../../src/shared/scroll-lock/scroll-lock.ts"],"sourcesContent":["let lockCount = 0\nlet savedOverflow = ''\nlet savedScrollY = 0\n\nexport interface ScrollLockLease {\n  readonly isLocked: boolean\n  sync(shouldLock: boolean): void\n  release(): void\n}\n\n/**\n * 锁定页面滚动。支持嵌套调用（引用计数），仅在最后一个锁释放时恢复。\n */\nexport function lockScroll() {\n  if (lockCount === 0) {\n    savedScrollY = window.scrollY\n    savedOverflow = document.documentElement.style.overflow\n    document.documentElement.style.overflow = 'hidden'\n    // 固定 body 防止 iOS 弹性滚动\n    document.body.style.position = 'fixed'\n    document.body.style.top = `-${savedScrollY}px`\n    document.body.style.width = '100%'\n  }\n  lockCount++\n}\n\n/**\n * 解锁页面滚动。与 lockScroll 配对，引用归零时恢复。\n */\nexport function unlockScroll() {\n  lockCount = Math.max(0, lockCount - 1)\n  if (lockCount === 0) {\n    document.documentElement.style.overflow = savedOverflow\n    document.body.style.position = ''\n    document.body.style.top = ''\n    document.body.style.width = ''\n    window.scrollTo(0, savedScrollY)\n  }\n}\n\n/**\n * 组件实例持有的滚动锁租约。它只会释放自身已获取的那一次锁，\n * 避免卸载、属性切换和嵌套浮层互相影响。\n */\nexport function createScrollLockLease(): ScrollLockLease {\n  let isLocked = false\n\n  return {\n    get isLocked() {\n      return isLocked\n    },\n\n    sync(shouldLock) {\n      if (shouldLock === isLocked) return\n      if (shouldLock) lockScroll()\n      else unlockScroll()\n      isLocked = shouldLock\n    },\n\n    release() {\n      this.sync(false)\n    }\n  }\n}\n"],"mappings":";AAAA,IAAI,IAAY,GACZ,IAAgB,IAChB,IAAe;AAWnB,SAAgB,IAAa;CAU3B,AATI,MAAc,MAChB,IAAe,OAAO,SACtB,IAAgB,SAAS,gBAAgB,MAAM,UAC/C,SAAS,gBAAgB,MAAM,WAAW,UAE1C,SAAS,KAAK,MAAM,WAAW,SAC/B,SAAS,KAAK,MAAM,MAAM,IAAI,EAAa,KAC3C,SAAS,KAAK,MAAM,QAAQ,SAE9B;AACF;AAKA,SAAgB,IAAe;CAE7B,AADA,IAAY,KAAK,IAAI,GAAG,IAAY,CAAC,GACjC,MAAc,MAChB,SAAS,gBAAgB,MAAM,WAAW,GAC1C,SAAS,KAAK,MAAM,WAAW,IAC/B,SAAS,KAAK,MAAM,MAAM,IAC1B,SAAS,KAAK,MAAM,QAAQ,IAC5B,OAAO,SAAS,GAAG,CAAY;AAEnC;AAMA,SAAgB,IAAyC;CACvD,IAAI,IAAW;CAEf,OAAO;EACL,IAAI,WAAW;GACb,OAAO;EACT;EAEA,KAAK,GAAY;GACX,MAAe,MACf,IAAY,EAAW,IACtB,EAAa,GAClB,IAAW;EACb;EAEA,UAAU;GACR,KAAK,KAAK,EAAK;EACjB;CACF;AACF"}
+{"version":3,"file":"scroll-lock.js","names":[],"sources":["../../../src/shared/scroll-lock/scroll-lock.ts"],"sourcesContent":["import { definePlugin } from '@greypan/js-kit'\n\nlet lockCount = 0\nlet savedOverflow = ''\nlet savedScrollY = 0\n\nexport interface ScrollLockLease {\n  readonly isLocked: boolean\n  sync(shouldLock: boolean): void\n  release(): void\n}\n\n/**\n * 锁定页面滚动。支持嵌套调用（引用计数），仅在最后一个锁释放时恢复。\n */\nexport function lockScroll() {\n  if (lockCount === 0) {\n    savedScrollY = window.scrollY\n    savedOverflow = document.documentElement.style.overflow\n    document.documentElement.style.overflow = 'hidden'\n    // 固定 body 防止 iOS 弹性滚动\n    document.body.style.position = 'fixed'\n    document.body.style.top = `-${savedScrollY}px`\n    document.body.style.width = '100%'\n  }\n  lockCount++\n}\n\n/**\n * 解锁页面滚动。与 lockScroll 配对，引用归零时恢复。\n */\nexport function unlockScroll() {\n  lockCount = Math.max(0, lockCount - 1)\n  if (lockCount === 0) {\n    document.documentElement.style.overflow = savedOverflow\n    document.body.style.position = ''\n    document.body.style.top = ''\n    document.body.style.width = ''\n    window.scrollTo(0, savedScrollY)\n  }\n}\n\n/**\n * 构建组件实例持有的滚动锁租约。每个租约仅释放自身获得的那一次锁，\n * 因此卸载、属性切换和嵌套浮层不会互相影响。\n */\nexport const defineScrollLockLease = () =>\n  definePlugin<ScrollLockLease, Record<never, never>>(() => {\n    let isLocked = false\n\n    const sync = (shouldLock: boolean) => {\n      if (shouldLock === isLocked) return\n      if (shouldLock) lockScroll()\n      else unlockScroll()\n      isLocked = shouldLock\n    }\n\n    return {\n      get isLocked() {\n        return isLocked\n      },\n\n      sync,\n\n      release() {\n        sync(false)\n      }\n    }\n  })\n"],"mappings":";;AAEA,IAAI,IAAY,GACZ,IAAgB,IAChB,IAAe;AAWnB,SAAgB,IAAa;CAU3B,AATI,MAAc,MAChB,IAAe,OAAO,SACtB,IAAgB,SAAS,gBAAgB,MAAM,UAC/C,SAAS,gBAAgB,MAAM,WAAW,UAE1C,SAAS,KAAK,MAAM,WAAW,SAC/B,SAAS,KAAK,MAAM,MAAM,IAAI,EAAa,KAC3C,SAAS,KAAK,MAAM,QAAQ,SAE9B;AACF;AAKA,SAAgB,IAAe;CAE7B,AADA,IAAY,KAAK,IAAI,GAAG,IAAY,CAAC,GACjC,MAAc,MAChB,SAAS,gBAAgB,MAAM,WAAW,GAC1C,SAAS,KAAK,MAAM,WAAW,IAC/B,SAAS,KAAK,MAAM,MAAM,IAC1B,SAAS,KAAK,MAAM,QAAQ,IAC5B,OAAO,SAAS,GAAG,CAAY;AAEnC;AAMA,IAAa,UACX,QAA0D;CACxD,IAAI,IAAW,IAET,KAAQ,MAAwB;EAChC,MAAe,MACf,IAAY,EAAW,IACtB,EAAa,GAClB,IAAW;CACb;CAEA,OAAO;EACL,IAAI,WAAW;GACb,OAAO;EACT;EAEA;EAEA,UAAU;GACR,EAAK,EAAK;EACZ;CACF;AACF,CAAC"}

package/dist/shared/theme/overlay-root.js

@@ -1,9 +1,9 @@
 import e from "../../assets/glass.js";
-import t from "../../assets/menu-portal.js";
-import n from "../../assets/overlay-motion.js";
+import t from "../../assets/overlay-motion.js";
+import n from "../../assets/menu-portal.js";
 import r from "../../assets/toast-containers.js";
 //#region src/shared/theme/overlay-root.ts
-var i = "data-wui-overlay-root", a = `${e}\n${r}\n${t}\n${n}`;
+var i = "data-wui-overlay-root", a = `${e}\n${r}\n${n}\n${t}`;
 function o(e) {
 	let t = document.createElement("style");
 	t.textContent = a, e.prepend(t);

package/dist/types/react.d.ts

@@ -1,45 +1,19 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react';
-import { WebUiAvatar, WebUiBackTop, WebUiBadge, WebUiButton, WebUiButtonGroup, WebUiCheckbox, WebUiCheckboxGroup, WebUiContextMenu, WebUiDialog, WebUiDrawer, WebUiEmpty, WebUiDropdownDivider, WebUiDropdownHeader, WebUiDropdownItem, WebUiDropdown, WebUiIcon, WebUiInput, WebUiInputNumber, WebUiLayout, WebUiOption, WebUiPopover, WebUiRadio, WebUiRadioGroup, WebUiSegmented, WebUiSegmentedTrigger, WebUiSelect, WebUiSlider, WebUiSpinner, WebUiTextarea, WebUiTheme, WebUiToast, WebUiSwitch, WebUiSvgDrawLines, WebUiTooltip } from '../components';
-import { ExactEventListeners, ExtractProps, OmitLitBase } from './utils';
-export type LitReactWrapper<T extends HTMLElement> = T extends {
-    readonly $events: infer E;
-} ? DetailedHTMLProps<ExtractProps<OmitLitBase<T>> & ExactEventListeners<E> & HTMLAttributes<T>, T> : DetailedHTMLProps<ExtractProps<OmitLitBase<T>> & HTMLAttributes<T>, T>;
-export interface WebUiComponents {
-    'web-ui-avatar': LitReactWrapper<WebUiAvatar>;
-    'web-ui-back-top': LitReactWrapper<WebUiBackTop>;
-    'web-ui-badge': LitReactWrapper<WebUiBadge>;
-    'web-ui-button': LitReactWrapper<WebUiButton>;
-    'web-ui-button-group': LitReactWrapper<WebUiButtonGroup>;
-    'web-ui-checkbox': LitReactWrapper<WebUiCheckbox>;
-    'web-ui-checkbox-group': LitReactWrapper<WebUiCheckboxGroup>;
-    'web-ui-context-menu': LitReactWrapper<WebUiContextMenu>;
-    'web-ui-dialog': LitReactWrapper<WebUiDialog>;
-    'web-ui-drawer': LitReactWrapper<WebUiDrawer>;
-    'web-ui-empty': LitReactWrapper<WebUiEmpty>;
-    'web-ui-dropdown-divider': LitReactWrapper<WebUiDropdownDivider>;
-    'web-ui-dropdown-header': LitReactWrapper<WebUiDropdownHeader>;
-    'web-ui-dropdown-item': LitReactWrapper<WebUiDropdownItem>;
-    'web-ui-dropdown': LitReactWrapper<WebUiDropdown>;
-    'web-ui-icon': LitReactWrapper<WebUiIcon>;
-    'web-ui-input': LitReactWrapper<WebUiInput>;
-    'web-ui-input-number': LitReactWrapper<WebUiInputNumber>;
-    'web-ui-select': LitReactWrapper<WebUiSelect>;
-    'web-ui-slider': LitReactWrapper<WebUiSlider>;
-    'web-ui-spinner': LitReactWrapper<WebUiSpinner>;
-    'web-ui-svg-draw-lines': LitReactWrapper<WebUiSvgDrawLines>;
-    'web-ui-option': LitReactWrapper<WebUiOption>;
-    'web-ui-popover': LitReactWrapper<WebUiPopover>;
-    'web-ui-radio': LitReactWrapper<WebUiRadio>;
-    'web-ui-radio-group': LitReactWrapper<WebUiRadioGroup>;
-    'web-ui-segmented': LitReactWrapper<WebUiSegmented>;
-    'web-ui-segmented-trigger': LitReactWrapper<WebUiSegmentedTrigger>;
-    'web-ui-layout': LitReactWrapper<WebUiLayout>;
-    'web-ui-switch': LitReactWrapper<WebUiSwitch>;
-    'web-ui-textarea': LitReactWrapper<WebUiTextarea>;
-    'web-ui-theme': LitReactWrapper<WebUiTheme>;
-    'web-ui-toast': LitReactWrapper<WebUiToast>;
-    'web-ui-tooltip': LitReactWrapper<WebUiTooltip>;
-}
+import { WebUiElementMap } from '../components';
+import { ExtractProps, OmitLitBase, ReactCustomEventListeners } from './utils';
+/**
+ * Lit Web Component 的 React 包装类型。
+ *
+ * - 标准 DOM 事件（input/change/focus/blur）使用 React 惯用 camelCase handler，
+ *   `currentTarget` 收窄为组件实例（`target` 遵循 React SyntheticEvent 语义，不承诺）。
+ * - kebab-case 自定义事件（open-change/toast-close）生成精确的 `on<event>` 绑定。
+ * - 与 `HTMLAttributes<T>` 全量交叉：组件自身属性与通用 HTML 属性（含原生事件）共存，
+ *   重叠键类型相容（如 `placeholder`），组件类型在交叉中自然生效；`ref` 保持具体元素类型。
+ */
+export type LitReactWrapper<T extends HTMLElement> = DetailedHTMLProps<ExtractProps<OmitLitBase<T>> & ReactCustomEventListeners<T> & HTMLAttributes<T>, T>;
+export type WebUiComponents = {
+    [K in keyof WebUiElementMap]: LitReactWrapper<WebUiElementMap[K]>;
+};
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements extends WebUiComponents {

package/dist/types/utils.d.ts

@@ -10,10 +10,39 @@ export type ExtractProps<T> = {
 };
 export type OmitLitBase<T> = Omit<T, keyof HTMLElement | keyof LitElement>;
 /**
- * 将 EventMap 转换为 React 19 Custom Element 的精确事件键。
- * 例如 { 'open-change': CustomEvent<...> } → { 'onopen-change'?: (e: CustomEvent<...>) => void }
+ * 从组件 `$events` 接口提取公共事件映射。
+ * 无 `$events` 的组件（无公共事件）得到空映射。
  */
-export type ExactEventListeners<T> = {
-    [K in keyof T & string as `on${K}`]?: (e: T[K]) => void;
+export type ComponentEvents<T> = T extends {
+    readonly $events: infer E;
+} ? E : Record<never, never>;
+/**
+ * 事件宿主化：在事件本体上注入组件实例 target/currentTarget 类型。
+ * 浏览器组合事件在宿主上重定向后，`event.target` 恒等于宿主元素，因此该收窄零例外。
+ * target/currentTarget 标为 readonly，与 DOM `Event` 契约一致。
+ */
+export type WithHost<T extends EventTarget, E> = E extends Event ? E & {
+    readonly target: T;
+    readonly currentTarget: T;
+} : E;
+/**
+ * 组件宿主化事件映射：`$events` 的每个条目都收窄 target/currentTarget 到组件实例。
+ * React 自定义事件与 Vue emits 均从该映射生成 handler 类型。
+ */
+export type HostEventMap<T extends HTMLElement> = {
+    [K in keyof ComponentEvents<T>]: WithHost<T, ComponentEvents<T>[K]>;
+};
+/**
+ * 具名 handler 的显式事件类型，用于 Vue 命名 handler 等无法从上下文推导 `$event` 的位置。
+ * 用法：`function onChange(e: WebUiEvent<WebUiSelect, 'change'>)`
+ */
+export type WebUiEvent<T extends HTMLElement, K extends keyof HostEventMap<T>> = HostEventMap<T>[K];
+/**
+ * React 自定义事件（kebab-case 事件名）→ `on<event>` 绑定。
+ * 标准 DOM 事件（input/change/focus/blur）由 React 的 camelCase handler 提供，
+ * 不在适配层生成 lowercase 别名。
+ */
+export type ReactCustomEventListeners<T extends HTMLElement> = {
+    [K in keyof HostEventMap<T> & string as K extends `${string}-${string}` ? `on${K}` : never]?: (e: HostEventMap<T>[K]) => void;
 };
 export {};

package/dist/types/vue.d.ts

@@ -1,60 +1,28 @@
-import { ComponentOptionsMixin, DefineComponent, HTMLAttributes } from 'vue';
-import { WebUiAvatar, WebUiBackTop, WebUiBadge, WebUiButton, WebUiButtonGroup, WebUiCheckbox, WebUiCheckboxGroup, WebUiContextMenu, WebUiDialog, WebUiDrawer, WebUiEmpty, WebUiDropdownDivider, WebUiDropdownHeader, WebUiDropdownItem, WebUiDropdown, WebUiIcon, WebUiInput, WebUiInputNumber, WebUiLayout, WebUiOption, WebUiPopover, WebUiRadio, WebUiRadioGroup, WebUiSegmented, WebUiSegmentedTrigger, WebUiSelect, WebUiSlider, WebUiSpinner, WebUiTextarea, WebUiTheme, WebUiToast, WebUiSwitch, WebUiTooltip, WebUiSvgDrawLines } from '../components';
-import { ExtractProps, OmitLitBase } from './utils';
-type ExtractVueEmits<T> = T extends {
+import { ComponentOptionsMixin, DefineComponent, EmitsToProps, HTMLAttributes, PublicProps } from 'vue';
+import { WebUiElementMap } from '../components';
+import { ComponentEvents, ExtractProps, OmitLitBase, WithHost } from './utils';
+type VueEmits<T extends HTMLElement> = T extends {
     readonly $events: infer E;
 } ? {
-    [K in keyof E]: (e: E[K]) => void;
-} : Record<string, never>;
+    [K in keyof E]: (e: WithHost<T, E[K]>) => void;
+} : Record<never, never>;
+type VueNativeAttrs<T extends HTMLElement> = Omit<HTMLAttributes, `on${Capitalize<keyof ComponentEvents<T> & string>}`>;
+type VueProps<T extends HTMLElement> = ExtractProps<OmitLitBase<T>> & VueNativeAttrs<T>;
+type VueResolvedProps<T extends HTMLElement> = Readonly<VueProps<T>> & (VueEmits<T> extends Record<string, never> ? unknown : EmitsToProps<VueEmits<T>>);
 /**
  * Lit Web Component 的 Vue 包装类型。
  *
- * - Props: 从 LitElement 推导的组件属性 + Vue HTMLAttributes（含原生 DOM 事件）
- * - Emits: 从 $events 接口提取的自定义事件，Volar 可识别 @event 绑定
+ * - Props: 组件属性 + 局部 HTMLAttributes（含原生 DOM 事件），不污染其他 Vue 组件
+ * - Emits: 从 $events 提取的宿主化事件，Volar 可识别 @event 绑定
+ * - TypeEl: 模板 ref/$el 类型为具体 Custom Element 实例
+ * - 不再全局扩展 ComponentCustomProps
  */
-export type LitVueWrapper<T> = T extends {
-    readonly $events: infer E;
-} ? DefineComponent<ExtractProps<OmitLitBase<T>>, Record<string, never>, Record<string, never>, Record<string, never>, Record<string, never>, ComponentOptionsMixin, ComponentOptionsMixin, ExtractVueEmits<T>> : DefineComponent<ExtractProps<OmitLitBase<T>>>;
-export interface WebUiComponents {
-    'web-ui-avatar': LitVueWrapper<WebUiAvatar>;
-    'web-ui-back-top': LitVueWrapper<WebUiBackTop>;
-    'web-ui-badge': LitVueWrapper<WebUiBadge>;
-    'web-ui-button': LitVueWrapper<WebUiButton>;
-    'web-ui-button-group': LitVueWrapper<WebUiButtonGroup>;
-    'web-ui-checkbox': LitVueWrapper<WebUiCheckbox>;
-    'web-ui-checkbox-group': LitVueWrapper<WebUiCheckboxGroup>;
-    'web-ui-context-menu': LitVueWrapper<WebUiContextMenu>;
-    'web-ui-dialog': LitVueWrapper<WebUiDialog>;
-    'web-ui-drawer': LitVueWrapper<WebUiDrawer>;
-    'web-ui-empty': LitVueWrapper<WebUiEmpty>;
-    'web-ui-dropdown-divider': LitVueWrapper<WebUiDropdownDivider>;
-    'web-ui-dropdown-header': LitVueWrapper<WebUiDropdownHeader>;
-    'web-ui-dropdown-item': LitVueWrapper<WebUiDropdownItem>;
-    'web-ui-dropdown': LitVueWrapper<WebUiDropdown>;
-    'web-ui-icon': LitVueWrapper<WebUiIcon>;
-    'web-ui-input': LitVueWrapper<WebUiInput>;
-    'web-ui-input-number': LitVueWrapper<WebUiInputNumber>;
-    'web-ui-select': LitVueWrapper<WebUiSelect>;
-    'web-ui-slider': LitVueWrapper<WebUiSlider>;
-    'web-ui-spinner': LitVueWrapper<WebUiSpinner>;
-    'web-ui-svg-draw-lines': LitVueWrapper<WebUiSvgDrawLines>;
-    'web-ui-option': LitVueWrapper<WebUiOption>;
-    'web-ui-popover': LitVueWrapper<WebUiPopover>;
-    'web-ui-radio': LitVueWrapper<WebUiRadio>;
-    'web-ui-radio-group': LitVueWrapper<WebUiRadioGroup>;
-    'web-ui-segmented': LitVueWrapper<WebUiSegmented>;
-    'web-ui-segmented-trigger': LitVueWrapper<WebUiSegmentedTrigger>;
-    'web-ui-layout': LitVueWrapper<WebUiLayout>;
-    'web-ui-switch': LitVueWrapper<WebUiSwitch>;
-    'web-ui-textarea': LitVueWrapper<WebUiTextarea>;
-    'web-ui-theme': LitVueWrapper<WebUiTheme>;
-    'web-ui-toast': LitVueWrapper<WebUiToast>;
-    'web-ui-tooltip': LitVueWrapper<WebUiTooltip>;
-}
+export type LitVueWrapper<T extends HTMLElement> = DefineComponent<VueProps<T>, Record<string, never>, Record<string, never>, Record<string, never>, Record<string, never>, ComponentOptionsMixin, ComponentOptionsMixin, VueEmits<T>, string, PublicProps, VueResolvedProps<T>, Record<never, never>, Record<never, never>, Record<never, never>, Record<never, never>, string, Record<never, never>, true, Record<never, never>, T>;
+export type WebUiComponents = {
+    [K in keyof WebUiElementMap]: LitVueWrapper<WebUiElementMap[K]>;
+};
 declare module 'vue' {
     interface GlobalComponents extends WebUiComponents {
     }
-    interface ComponentCustomProps extends HTMLAttributes {
-    }
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greypan/web-ui",
-  "version": "2.1.7",
+  "version": "3.0.0",
   "description": "Lit-based web components for React, Vue, and vanilla JS",
   "license": "MIT",
   "repository": {
@@ -41,8 +41,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@greypan/browser-kit": "1.7.6",
-    "@greypan/js-kit": "1.6.5"
+    "@greypan/js-kit": "1.6.6",
+    "@greypan/browser-kit": "1.7.7"
   },
   "devDependencies": {
     "@iconify-json/jam": "^1.2.3",
@@ -59,9 +59,9 @@
     "@greypan/tsconfig": "1.0.4"
   },
   "peerDependencies": {
-    "@types/react": ">=16",
+    "@types/react": ">=19",
     "lit": "^3.3.3",
-    "vue": ">=3"
+    "vue": ">=3.5"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -72,7 +72,12 @@
     }
   },
   "browserslist": [
-    "defaults"
+    "Chrome >=111",
+    "Edge >=111",
+    "Safari >=16.4",
+    "iOS >=16.4",
+    "Firefox >=128",
+    "not dead"
   ],
   "scripts": {
     "build": "vp build",