@greypan/web-ui 10.2.1 → 11.1.0

package/dist/components/collapse/style.js

@@ -1,5 +1,5 @@
 //#region src/components/collapse/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{display:block}.wui-collapse-track{transition:grid-template-rows var(--wui-duration-collapse-enter,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));grid-template-rows:0fr;display:grid}.wui-collapse-track.is-horizontal{width:max-content;transition:grid-template-columns var(--wui-duration-collapse-enter,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));grid-template-rows:none;grid-template-columns:0fr}.wui-collapse-track[data-wui-presence=open]{grid-template-rows:1fr}.wui-collapse-track[data-wui-presence=open].is-horizontal{grid-template-rows:none;grid-template-columns:1fr}.wui-collapse-track[data-wui-presence=closing]{pointer-events:none;transition:grid-template-rows var(--wui-duration-collapse-exit,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1))}.wui-collapse-track[data-wui-presence=closing].is-horizontal{transition:grid-template-columns var(--wui-duration-collapse-exit,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1))}.wui-collapse-track[data-wui-peek]{grid-template-rows:1fr}.wui-collapse-track[data-wui-peek].is-horizontal{grid-template-rows:none;grid-template-columns:1fr}.wui-collapse-inner{min-height:0;transition:max-height var(--wui-duration-collapse-enter,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1)), --wui-collapse-peek-edge-active var(--wui-duration-collapse-enter,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));overflow:hidden}.is-horizontal .wui-collapse-inner{min-width:0;transition-property:max-width,--wui-collapse-peek-edge-active}.wui-collapse-track[data-wui-presence=closing] .wui-collapse-inner{transition-duration:var(--wui-duration-collapse-exit,.16s)}.wui-collapse-track[data-wui-peek] .wui-collapse-inner{-webkit-mask-image:linear-gradient(to bottom, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), var(--wui-collapse-peek-edge-color,transparent) 100%);-webkit-mask-image:linear-gradient(to bottom, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), var(--wui-collapse-peek-edge-color,transparent) 100%);mask-image:linear-gradient(to bottom, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), var(--wui-collapse-peek-edge-color,transparent) 100%);position:relative}.wui-collapse-track[data-wui-peek] .wui-collapse-inner:after{pointer-events:none;content:\"\";z-index:1;-webkit-backdrop-filter:blur(var(--wui-collapse-peek-edge-blur,4px));backdrop-filter:blur(var(--wui-collapse-peek-edge-blur,4px));-webkit-mask-image:linear-gradient(to bottom, transparent calc(100% - var(--wui-collapse-peek-edge-active,0px)), black calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%);-webkit-mask-image:linear-gradient(to bottom, transparent calc(100% - var(--wui-collapse-peek-edge-active,0px)), black calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%);mask-image:linear-gradient(to bottom, transparent calc(100% - var(--wui-collapse-peek-edge-active,0px)), black calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%);position:absolute;inset:0}.wui-collapse-track[data-wui-peek].is-horizontal .wui-collapse-inner{-webkit-mask-image:linear-gradient(to right, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), var(--wui-collapse-peek-edge-color,transparent) 100%);-webkit-mask-image:linear-gradient(to right, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), var(--wui-collapse-peek-edge-color,transparent) 100%);mask-image:linear-gradient(to right, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), var(--wui-collapse-peek-edge-color,transparent) 100%)}.wui-collapse-track[data-wui-peek].is-horizontal .wui-collapse-inner:after{-webkit-mask-image:linear-gradient(to right, transparent calc(100% - var(--wui-collapse-peek-edge-active,0px)), black calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent calc(100% - var(--wui-collapse-peek-edge-active,0px)), black calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%);mask-image:linear-gradient(to right, transparent calc(100% - var(--wui-collapse-peek-edge-active,0px)), black calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%)}.wui-collapse-track[data-wui-peek]:not([data-wui-presence]) .wui-collapse-inner{max-height:var(--wui-collapse-peek,0)}.wui-collapse-track[data-wui-peek]:not([data-wui-presence=open]) .wui-collapse-inner{--wui-collapse-peek-edge-active:var(--wui-collapse-peek-edge,clamp(0px, calc(var(--wui-collapse-peek,0px) * var(--wui-collapse-peek-edge-ratio,.4)), var(--wui-collapse-peek-edge-max,112px)))}.wui-collapse-track[data-wui-peek]:not([data-wui-presence]).is-horizontal .wui-collapse-inner{max-width:var(--wui-collapse-peek,0)}";
+var e = "*,:before,:after{box-sizing:border-box}:host{display:block}.wui-collapse-track{transition:grid-template-rows var(--wui-duration-collapse-enter,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));grid-template-rows:0fr;display:grid}.wui-collapse-track.is-horizontal{width:max-content;transition:grid-template-columns var(--wui-duration-collapse-enter,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));grid-template-rows:none;grid-template-columns:0fr}.wui-collapse-track[data-wui-presence=open]{grid-template-rows:1fr}.wui-collapse-track[data-wui-presence=open].is-horizontal{grid-template-rows:none;grid-template-columns:1fr}.wui-collapse-track[data-wui-presence=closing]{pointer-events:none;transition:grid-template-rows var(--wui-duration-collapse-exit,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1))}.wui-collapse-track[data-wui-presence=closing].is-horizontal{transition:grid-template-columns var(--wui-duration-collapse-exit,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1))}.wui-collapse-track[data-wui-peek]{grid-template-rows:1fr}.wui-collapse-track[data-wui-peek].is-horizontal{grid-template-rows:none;grid-template-columns:1fr}.wui-collapse-inner{min-height:0;transition:max-height var(--wui-duration-collapse-enter,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1)), --wui-collapse-peek-edge-active var(--wui-duration-collapse-enter,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));overflow:hidden}.is-horizontal .wui-collapse-inner{min-width:0;transition-property:max-width,--wui-collapse-peek-edge-active}.wui-collapse-track[data-wui-presence=closing] .wui-collapse-inner{transition-duration:var(--wui-duration-collapse-exit,.16s)}.wui-collapse-track[data-wui-peek] .wui-collapse-inner{-webkit-mask-image:linear-gradient(to bottom, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%);-webkit-mask-image:linear-gradient(to bottom, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%);mask-image:linear-gradient(to bottom, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%)}.wui-collapse-track[data-wui-peek] .wui-collapse-inner.wui-glow{--wui-glow-blur:var(--wui-collapse-peek-edge-blur,4px);--wui-glow-overhang:0px;--wui-glow-gradient:linear-gradient(to top, var(--wui-collapse-peek-edge-color,var(--wui-color-page,#fff)) 0, transparent var(--wui-collapse-peek-edge-active,0px))}.wui-collapse-track[data-wui-peek] .wui-collapse-inner.wui-glow:before,.wui-collapse-track[data-wui-peek] .wui-collapse-inner.wui-glow:after{z-index:1}.wui-collapse-track[data-wui-peek] .wui-collapse-inner.wui-glow:after{-webkit-mask-image:linear-gradient(to bottom, transparent calc(100% - var(--wui-collapse-peek-edge-active,0px)), black calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%);-webkit-mask-image:linear-gradient(to bottom, transparent calc(100% - var(--wui-collapse-peek-edge-active,0px)), black calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%);mask-image:linear-gradient(to bottom, transparent calc(100% - var(--wui-collapse-peek-edge-active,0px)), black calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%)}.wui-collapse-track[data-wui-peek].is-horizontal .wui-collapse-inner{-webkit-mask-image:linear-gradient(to right, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%);-webkit-mask-image:linear-gradient(to right, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%);mask-image:linear-gradient(to right, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%)}.wui-collapse-track[data-wui-peek].is-horizontal .wui-collapse-inner.wui-glow{--wui-glow-gradient:linear-gradient(to left, var(--wui-collapse-peek-edge-color,var(--wui-color-page,#fff)) 0, transparent var(--wui-collapse-peek-edge-active,0px))}.wui-collapse-track[data-wui-peek].is-horizontal .wui-collapse-inner.wui-glow:after{-webkit-mask-image:linear-gradient(to right, transparent calc(100% - var(--wui-collapse-peek-edge-active,0px)), black calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent calc(100% - var(--wui-collapse-peek-edge-active,0px)), black calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%);mask-image:linear-gradient(to right, transparent calc(100% - var(--wui-collapse-peek-edge-active,0px)), black calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%)}.wui-collapse-track[data-wui-peek]:not([data-wui-presence],.is-horizontal) .wui-collapse-inner{max-height:var(--wui-collapse-peek,0)}.wui-collapse-track[data-wui-peek]:not([data-wui-presence=open]) .wui-collapse-inner{--wui-collapse-peek-edge-active:var(--wui-collapse-peek-edge,clamp(0px, calc(var(--wui-collapse-peek,0px) * var(--wui-collapse-peek-edge-ratio,.4)), var(--wui-collapse-peek-edge-max,112px)))}.wui-collapse-track[data-wui-peek]:not([data-wui-presence]).is-horizontal .wui-collapse-inner{max-width:var(--wui-collapse-peek,0)}";
 //#endregion
 export { e as default };
 

package/dist/components/collapse/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/collapse/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/*\n * :host 仅限 display/contain（ADR-0003）。\n * headless 内核（ADR-0039）：不携带视觉样式，trigger 与内容的排版由消费者\n * 提供；这里只保留动画与三态关闭稳态必需的结构规则。\n */\n:host {\n  display: block;\n}\n\n/*\n * grid 0fr↔1fr 高度动画（ADR-0038 选型）：\n * 轨道行高在 0fr（收起）与 1fr（展开）间过渡，内容高度自适应、零 JS 测量；\n * inner 的 min-height/min-width 归零是轨道能收缩到 0 的必要条件，\n * overflow hidden 负责裁剪收起中的内容。\n */\n.wui-collapse-track {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--wui-duration-collapse-enter, 200ms)\n    var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n  /*\n   * 水平方向：块级 grid 默认撑满可用宽度，1fr 列会解析为剩余空间而非内容宽度；\n   * width: max-content 让 1fr 列按内容 max-content 贡献解析（与行向 auto 高度同理），\n   * 0fr 收缩依赖 inner 的 min-width: 0。\n   */\n  &.is-horizontal {\n    grid-template-columns: 0fr;\n    grid-template-rows: none;\n    width: max-content;\n    transition: grid-template-columns var(--wui-duration-collapse-enter, 200ms)\n      var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n  }\n}\n\n.wui-collapse-track[data-wui-presence='open'] {\n  grid-template-rows: 1fr;\n\n  &.is-horizontal {\n    grid-template-columns: 1fr;\n    grid-template-rows: none;\n  }\n}\n\n.wui-collapse-track[data-wui-presence='closing'] {\n  pointer-events: none;\n  transition: grid-template-rows var(--wui-duration-collapse-exit, 160ms)\n    var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n  &.is-horizontal {\n    transition: grid-template-columns var(--wui-duration-collapse-exit, 160ms)\n      var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n  }\n}\n\n/*\n * peek 模式下轨道恒为 1fr（高度始终由内容驱动），裁剪长度交给 inner 的\n * max-height/max-width：这样 `peek` 与内容尺寸的较小值由 CSS 原生解析——内容不足\n * `peek` 时不残留空白，也不会被撑到 `peek`——而动画两端都是长度，可被浏览器插值\n * （fit-content 或 minmax 的关态与内容高度之间无法插值，实测会退化成跳变）。\n *\n * 注意不能限定 `:not([data-wui-presence])`：收起动画期间 presence='closing'，\n * 轨道会掉回 0fr 先把内容压成 0 再弹回，动画被毁。\n */\n.wui-collapse-track[data-wui-peek] {\n  grid-template-rows: 1fr;\n\n  &.is-horizontal {\n    grid-template-columns: 1fr;\n    grid-template-rows: none;\n  }\n}\n\n/*\n * peek 边缘渐隐的「活动长度」（替代直接读推导长度）：\n * 关闭/收起态取推导值，展开态归 0（fallback）——渐变带因此跟随开合动画\n * 平滑出现/消失，而不是在某一帧突然出现（旧实现把 mask 限定在关闭稳态，收起动画\n * 结束才显示，表现为明显的延迟）。\n *\n * 插值依赖 `CSS.registerProperty` 把它注册成 `<length>`（见 index.ts）：未注册的\n * 自定义属性是离散值、无法过渡，且不注册时「未定义」会让整条 mask-image 声明\n * 在打开态失效回退到 none，因此这里必须给 var() 显式 fallback。\n */\n.wui-collapse-inner {\n  overflow: hidden;\n  min-height: 0;\n\n  /*\n   * peek 展开/收起的过渡落在裁剪长度上；轨道静止在 1fr，只跟随 inner 的高度变化。\n   * 活动长度与裁剪长度同步过渡，渐变带才能跟着开合一起淡入淡出。\n   */\n  transition:\n    max-height var(--wui-duration-collapse-enter, 200ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n    --wui-collapse-peek-edge-active var(--wui-duration-collapse-enter, 200ms)\n      var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n.is-horizontal .wui-collapse-inner {\n  min-width: 0;\n\n  /* 覆盖轴向，但保留活动长度的过渡——否则水平模式下渐变带不淡入淡出。 */\n  transition-property: max-width, --wui-collapse-peek-edge-active;\n}\n\n.wui-collapse-track[data-wui-presence='closing'] .wui-collapse-inner {\n  transition-duration: var(--wui-duration-collapse-exit, 160ms);\n}\n\n/*\n * peek 露出区域的边缘渐隐（mask-image）：\n * 沿动画轴末端（默认底边、horizontal 时右边）做 alpha 渐变，让\"被裁掉的部分\"与\n * \"露出的部分\"之间柔和过渡，提示下方还有内容。设置 `peek` 即启用——渐隐长度由\n * `peek` 推导，不是独立入参。\n *\n * 长度推导：`peek * --wui-collapse-peek-edge-ratio`（默认 0.4），并夹在\n * `--wui-collapse-peek-edge-max`（默认 112px）以内，避免大 peek 算出过长的虚化带。\n * 纯 CSS 的 `calc(length * number)` —— 不需要 JS 解析单位，peek 用 rem/em 时\n * 渐隐长度自动跟着字号缩放。需要绝对长度时直接设 `--wui-collapse-peek-edge`\n * 覆盖（它优先于推导值），把比例设成 0 即可关掉渐隐。\n *\n * 渐变是四段「先陡后缓」而非线性：主体全黑延伸到渐变带起点后，前 30% 距离就\n * 掉到 0.6 alpha，65% 处 0.26，末端落到 edge-color（默认全透明）。线性渐变的\n * alpha 曲线前 40% 几乎贴着 1.0，人眼感知到的虚化远短于声明长度——实测同样\n * 50px 的带子，线性只让人觉得\"末尾一小截发虚\"，先陡后缓从带子起点就明显发虚，\n * 感知长度接近翻倍。\n *\n * 渐变带的位置用百分比而非绝对长度：百分比相对 inner 的**当前渲染高度**，而该高度\n * 在动画期间随 max-height 逐帧变化——mask 字符串本身不需要插值，渲染结果会自动\n * 跟随裁剪边缘移动（实测：mask 字符串恒定，容器高度变化时渐变带跟着走）。\n * 渐变长度由活动长度变量控制，其过渡见上方说明。\n * 末端颜色由 `--wui-collapse-peek-edge-color` 覆盖（需带 alpha，mask 按 alpha 解析）。\n *\n * 这条 mask 管的是「内容的可见度」；同一条渐变带上还叠了一层真实的背景模糊，\n * 见下方 ::after。\n */\n.wui-collapse-track[data-wui-peek] .wui-collapse-inner {\n  /* 晕染伪元素以本盒为定位基准，见下方 ::after 的说明。 */\n  position: relative;\n  mask-image: linear-gradient(\n    to bottom,\n    black 0%,\n    black calc(100% - var(--wui-collapse-peek-edge-active, 0px)),\n    rgb(0 0 0 / 0.6) calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.7),\n    rgb(0 0 0 / 0.26) calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.35),\n    var(--wui-collapse-peek-edge-color, transparent) 100%\n  );\n}\n\n/*\n * peek 边缘晕染：叠一层真实的背景模糊（#221）\n * ==========================================\n *\n * mask 只把内容按 alpha 变透明，边缘仍是**锐的**——被裁掉一半的字与图标看得见轮廓，\n * 读起来像「贴了张半透明胶片」，不像 macOS 那种磨砂。header 的晕染（见\n * layout/style.css「Header 的装饰性背景晕染」）用 backdrop-filter 把背后的画面真的糊掉，\n * 这里对同一段渐变带补上同一层模糊，两处观感因此一致。\n *\n * 模糊强度用 mask 沿渐变带调制：`backdrop-filter` 只有一个全局半径，逐像素的强弱只能\n * 由本盒的 mask alpha 给。曲线两端都归 0——起点不归 0 的话，渐变带的上沿会出现一条\n * 「突然开始模糊」的接缝；末端不归 0 则会在裁剪边缘糊到盒外（本盒 overflow: hidden，\n * 盒外那段本就不可见，但模糊会在盒边界留下一圈亮边）。\n *\n * 活动长度为 0（展开态）时整条 mask 的各色标塌缩到 100%，取末位色标即全透明，\n * 伪元素自然什么都不画——不需要额外的开关规则，也不会在展开态留下一层灰纱。\n * 这也是**不**改用「页面色渐变盖住内容」那层的原因：那层在长度为 0 时塌缩成不透明页面色，\n * 会把展开后的内容整片盖住，要防住就得再加一个可过渡的开关量。\n *\n * 位置相对 inner（`position: relative`）：本盒就是被裁剪到 peek 长度的那一个，\n * 伪元素随它一起被裁剪，不需要第二层定位。z-index 让它压在 slot 内容之上。\n * --wui-collapse-peek-edge-active 必须以 inherits: true 注册（见 index.ts）：\n * 继承为 false 时伪元素读到的是 initialValue 0px，整条 mask 塌缩、模糊静默消失。\n */\n.wui-collapse-track[data-wui-peek] .wui-collapse-inner::after {\n  pointer-events: none;\n  content: '';\n\n  position: absolute;\n  z-index: 1;\n  inset: 0;\n\n  backdrop-filter: blur(var(--wui-collapse-peek-edge-blur, 4px));\n\n  mask-image: linear-gradient(\n    to bottom,\n    transparent calc(100% - var(--wui-collapse-peek-edge-active, 0px)),\n    black calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.35),\n    transparent 100%\n  );\n}\n\n.wui-collapse-track[data-wui-peek].is-horizontal .wui-collapse-inner {\n  mask-image: linear-gradient(\n    to right,\n    black 0%,\n    black calc(100% - var(--wui-collapse-peek-edge-active, 0px)),\n    rgb(0 0 0 / 0.6) calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.7),\n    rgb(0 0 0 / 0.26) calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.35),\n    var(--wui-collapse-peek-edge-color, transparent) 100%\n  );\n}\n\n.wui-collapse-track[data-wui-peek].is-horizontal .wui-collapse-inner::after {\n  mask-image: linear-gradient(\n    to right,\n    transparent calc(100% - var(--wui-collapse-peek-edge-active, 0px)),\n    black calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.35),\n    transparent 100%\n  );\n}\n\n/*\n * 裁剪长度只在关闭稳态由 CSS 声明；动画期间由内联长度覆盖，落稳态清除后回到这里。\n * 下面几条 peek 规则按选择器特异性升序排列（`no-descending-specificity`）：\n * 不带 presence 限定的两条 mask 在最前，horizontal 的裁剪（多一个类）在最后。\n */\n.wui-collapse-track[data-wui-peek]:not([data-wui-presence]) .wui-collapse-inner {\n  max-height: var(--wui-collapse-peek, 0);\n}\n\n/*\n * 非展开态（关闭稳态 + 收起动画进行中）让活动长度取推导值：\n * 收起动画一开始渐变带就开始淡入，与裁剪长度同步，而不是落稳态才出现。\n * 展开态（presence='open'）不命中 → 活动长度回落到 0 → mask 整段不透明，\n * 完全展开的内容不再有底部淡出。\n *\n * 推导写成 `var(--wui-collapse-peek-edge, <推导式>)`：显式设了长度就听调用方的，\n * 没设才按比例算——逃生舱仍然是纯 CSS 变量，不占组件属性名额。\n */\n.wui-collapse-track[data-wui-peek]:not([data-wui-presence='open']) .wui-collapse-inner {\n  --wui-collapse-peek-edge-active: var(\n    --wui-collapse-peek-edge,\n    clamp(\n      0px,\n      calc(var(--wui-collapse-peek, 0px) * var(--wui-collapse-peek-edge-ratio, 0.4)),\n      var(--wui-collapse-peek-edge-max, 112px)\n    )\n  );\n}\n\n.wui-collapse-track[data-wui-peek]:not([data-wui-presence]).is-horizontal .wui-collapse-inner {\n  max-width: var(--wui-collapse-peek, 0);\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/collapse/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/*\n * :host 仅限 display/contain（ADR-0003）。\n * headless 内核（ADR-0039）：不携带视觉样式，trigger 与内容的排版由消费者\n * 提供；这里只保留动画与三态关闭稳态必需的结构规则。\n */\n:host {\n  display: block;\n}\n\n/*\n * grid 0fr↔1fr 高度动画（ADR-0038 选型）：\n * track 行高在 0fr（收起）与 1fr（展开）间过渡，内容高度自适应、零 JS 测量；\n * inner 的 min-height/min-width 归零是 track 能收缩到 0 的必要条件，\n * overflow hidden 负责裁剪收起中的内容。\n */\n.wui-collapse-track {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--wui-duration-collapse-enter, 200ms)\n    var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n  /*\n   * 水平方向：块级 grid 默认撑满可用宽度，1fr 列会解析为剩余空间而非内容宽度；\n   * width: max-content 让 1fr 列按内容 max-content 贡献解析（与行向 auto 高度同理），\n   * 0fr 收缩依赖 inner 的 min-width: 0。\n   */\n  &.is-horizontal {\n    grid-template-columns: 0fr;\n    grid-template-rows: none;\n    width: max-content;\n    transition: grid-template-columns var(--wui-duration-collapse-enter, 200ms)\n      var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n  }\n}\n\n.wui-collapse-track[data-wui-presence='open'] {\n  grid-template-rows: 1fr;\n\n  &.is-horizontal {\n    grid-template-columns: 1fr;\n    grid-template-rows: none;\n  }\n}\n\n.wui-collapse-track[data-wui-presence='closing'] {\n  pointer-events: none;\n  transition: grid-template-rows var(--wui-duration-collapse-exit, 160ms)\n    var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n  &.is-horizontal {\n    transition: grid-template-columns var(--wui-duration-collapse-exit, 160ms)\n      var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n  }\n}\n\n/*\n * peek 模式下 track 恒为 1fr（高度始终由内容驱动），裁剪长度交给 inner 的\n * max-height/max-width：这样 `peek` 与内容尺寸的较小值由 CSS 原生解析——内容不足\n * `peek` 时不残留空白，也不会被撑到 `peek`——而动画两端都是长度，可被浏览器插值\n * （fit-content 或 minmax 的关态与内容高度之间无法插值，实测会退化成跳变）。\n *\n * 注意不能限定 `:not([data-wui-presence])`：收起动画期间 presence='closing'，\n * track 会掉回 0fr 先把内容压成 0 再弹回，动画被毁。\n */\n.wui-collapse-track[data-wui-peek] {\n  grid-template-rows: 1fr;\n\n  &.is-horizontal {\n    grid-template-columns: 1fr;\n    grid-template-rows: none;\n  }\n}\n\n/*\n * peek 边缘渐隐的「活动长度」（替代直接读推导长度）：\n * 关闭/收起态取推导值，展开态归 0（fallback）——渐变带因此跟随开合动画\n * 平滑出现/消失，而不是在某一帧突然出现（旧实现把 mask 限定在关闭稳态，收起动画\n * 结束才显示，表现为明显的延迟）。\n *\n * 插值依赖 `CSS.registerProperty` 把它注册成 `<length>`（见 index.ts）：未注册的\n * 自定义属性是离散值、无法过渡，且不注册时「未定义」会让整条 mask-image 声明\n * 在打开态失效回退到 none，因此这里必须给 var() 显式 fallback。\n */\n.wui-collapse-inner {\n  overflow: hidden;\n  min-height: 0;\n\n  /*\n   * peek 展开/收起的过渡落在裁剪长度上；track 静止在 1fr，只跟随 inner 的高度变化。\n   * 活动长度与裁剪长度同步过渡，渐变带才能跟着开合一起淡入淡出。\n   */\n  transition:\n    max-height var(--wui-duration-collapse-enter, 200ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n    --wui-collapse-peek-edge-active var(--wui-duration-collapse-enter, 200ms)\n      var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n.is-horizontal .wui-collapse-inner {\n  min-width: 0;\n\n  /* 覆盖轴向，但保留活动长度的过渡——否则水平模式下渐变带不淡入淡出。 */\n  transition-property: max-width, --wui-collapse-peek-edge-active;\n}\n\n.wui-collapse-track[data-wui-presence='closing'] .wui-collapse-inner {\n  transition-duration: var(--wui-duration-collapse-exit, 160ms);\n}\n\n/*\n * peek 露出区域的边缘渐隐（mask-image）：\n * 沿动画轴末端（默认底边、horizontal 时右边）做 alpha 渐变，让\"被裁掉的部分\"与\n * \"露出的部分\"之间柔和过渡，提示下方还有内容。设置 `peek` 即启用——渐隐长度由\n * `peek` 推导，不是独立入参。\n *\n * 长度推导：`peek * --wui-collapse-peek-edge-ratio`（默认 0.4），并夹在\n * `--wui-collapse-peek-edge-max`（默认 112px）以内，避免大 peek 算出过长的虚化带。\n * 纯 CSS 的 `calc(length * number)` —— 不需要 JS 解析单位，peek 用 rem/em 时\n * 渐隐长度自动跟着字号缩放。需要绝对长度时直接设 `--wui-collapse-peek-edge`\n * 覆盖（它优先于推导值），把比例设成 0 即可关掉渐隐。\n *\n * 渐变是四段「先陡后缓」而非线性：主体全黑延伸到渐变带起点后，前 30% 距离就\n * 掉到 0.6 alpha，65% 处 0.26，末端全透明。线性渐变的 alpha 曲线前 40% 几乎\n * 贴着 1.0，人眼感知到的虚化远短于声明长度——实测同样 50px 的带子，线性只让人\n * 觉得\"末尾一小截发虚\"，先陡后缓从带子起点就明显发虚，感知长度接近翻倍。\n * 边缘颜色改由下面共享 .wui-glow 的渐变层承担。\n *\n * 渐变带的位置用百分比而非绝对长度：百分比相对 inner 的**当前渲染高度**，而该高度\n * 在动画期间随 max-height 逐帧变化——mask 字符串本身不需要插值，渲染结果会自动\n * 跟随裁剪边缘移动（实测：mask 字符串恒定，容器高度变化时渐变带跟着走）。\n * 渐变长度由活动长度变量控制，其过渡见上方说明。\n */\n.wui-collapse-track[data-wui-peek] .wui-collapse-inner {\n  mask-image: linear-gradient(\n    to bottom,\n    black 0%,\n    black calc(100% - var(--wui-collapse-peek-edge-active, 0px)),\n    rgb(0 0 0 / 0.6) calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.7),\n    rgb(0 0 0 / 0.26) calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.35),\n    transparent 100%\n  );\n}\n\n/*\n * peek 末端晕染走共享 .wui-glow（src/classes/glow.css）：\n * ::before 铺渐变，::after 叠真实模糊。两层默认位于内容之下，这里改成 z-index: 1\n * —— peek 的末端要盖住并虚化内容，而不是垫在内容背后。\n *\n * 渐变方向从裁剪边缘指向内容：垂直 peek 是 to top，水平 peek 是 to left。\n * 带子长度复用活动长度变量，所以开合动画期间跟着裁剪边缘一起过渡；活动长度为 0\n * （展开态）时渐变的两个色标都塌缩到 0px，整层透明，不会把展开后的内容盖住。\n *\n * --wui-collapse-peek-edge-active 必须以 inherits: true 注册（见 index.ts）：\n * 继承为 false 时伪元素读到 initialValue 0px，两层晕染会静默消失。\n */\n.wui-collapse-track[data-wui-peek] .wui-collapse-inner.wui-glow {\n  --wui-glow-blur: var(--wui-collapse-peek-edge-blur, 4px);\n  --wui-glow-overhang: 0px;\n  --wui-glow-gradient: linear-gradient(\n    to top,\n    var(--wui-collapse-peek-edge-color, var(--wui-color-page, #fff)) 0,\n    transparent var(--wui-collapse-peek-edge-active, 0px)\n  );\n}\n\n.wui-collapse-track[data-wui-peek] .wui-collapse-inner.wui-glow::before,\n.wui-collapse-track[data-wui-peek] .wui-collapse-inner.wui-glow::after {\n  z-index: 1;\n}\n\n.wui-collapse-track[data-wui-peek] .wui-collapse-inner.wui-glow::after {\n  mask-image: linear-gradient(\n    to bottom,\n    transparent calc(100% - var(--wui-collapse-peek-edge-active, 0px)),\n    black calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.35),\n    transparent 100%\n  );\n}\n\n.wui-collapse-track[data-wui-peek].is-horizontal .wui-collapse-inner {\n  mask-image: linear-gradient(\n    to right,\n    black 0%,\n    black calc(100% - var(--wui-collapse-peek-edge-active, 0px)),\n    rgb(0 0 0 / 0.6) calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.7),\n    rgb(0 0 0 / 0.26) calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.35),\n    transparent 100%\n  );\n}\n\n.wui-collapse-track[data-wui-peek].is-horizontal .wui-collapse-inner.wui-glow {\n  --wui-glow-gradient: linear-gradient(\n    to left,\n    var(--wui-collapse-peek-edge-color, var(--wui-color-page, #fff)) 0,\n    transparent var(--wui-collapse-peek-edge-active, 0px)\n  );\n}\n\n.wui-collapse-track[data-wui-peek].is-horizontal .wui-collapse-inner.wui-glow::after {\n  mask-image: linear-gradient(\n    to right,\n    transparent calc(100% - var(--wui-collapse-peek-edge-active, 0px)),\n    black calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.35),\n    transparent 100%\n  );\n}\n\n/*\n * 关闭稳态裁剪长度由 CSS 声明；动画期间由内联长度覆盖，落稳态后回到这里。\n * `max-height` 仅适用于垂直模式；horizontal 模式由后续规则裁剪宽度。\n * 轴向裁剪规则按特异性递增排列（`no-descending-specificity`）。\n */\n.wui-collapse-track[data-wui-peek]:not([data-wui-presence], .is-horizontal) .wui-collapse-inner {\n  max-height: var(--wui-collapse-peek, 0);\n}\n\n/*\n * 非展开态（关闭稳态 + 收起动画进行中）让活动长度取推导值：\n * 收起动画一开始渐变带就开始淡入，与裁剪长度同步，而不是落稳态才出现。\n * 展开态（presence='open'）不命中 → 活动长度回落到 0 → mask 整段不透明，\n * 完全展开的内容不再有底部淡出。\n *\n * 推导写成 `var(--wui-collapse-peek-edge, <推导式>)`：显式设了长度就听调用方的，\n * 没设才按比例算——逃生舱仍然是纯 CSS 变量，不占组件属性名额。\n */\n.wui-collapse-track[data-wui-peek]:not([data-wui-presence='open']) .wui-collapse-inner {\n  --wui-collapse-peek-edge-active: var(\n    --wui-collapse-peek-edge,\n    clamp(\n      0px,\n      calc(var(--wui-collapse-peek, 0px) * var(--wui-collapse-peek-edge-ratio, 0.4)),\n      var(--wui-collapse-peek-edge-max, 112px)\n    )\n  );\n}\n\n.wui-collapse-track[data-wui-peek]:not([data-wui-presence]).is-horizontal .wui-collapse-inner {\n  max-width: var(--wui-collapse-peek, 0);\n}\n"],"mappings":""}

package/dist/components/context-menu/index.d.ts

@@ -3,14 +3,14 @@ export declare class WebUiContextMenu extends LitElement {
     static styles: import('lit').CSSResult;
     disabled: boolean;
     noScrollLock: boolean;
-    /** opt-in：触屏长按打开菜单。默认关闭，鼠标路径靠原生 contextmenu，无需此属性。 */
+    /** opt-in：触屏长按打开 menu。默认关闭，鼠标路径靠原生 contextmenu，无需此属性。 */
     longPress: boolean;
     private _longPressDelay;
     /**
      * 走包内既有的 `normalizeNumber` 通道（与 `dropdown.offset`、`popover.offset` 同形）。
      * 不能只靠 `Math.max(0, …)` 挡负数：`Math.max(0, NaN) === NaN`，而属性写错
      * （`long-press-delay="abc"`）时 Lit 的 Number converter 给的正是 NaN，
-     * `setTimeout(fn, NaN)` 会立刻触发，长按就在 pointerdown 同一帧开菜单、绕过全部时长语义。
+     * `setTimeout(fn, NaN)` 会立刻触发，长按就在 pointerdown 同一帧开 menu、绕过全部时长语义。
      */
     get longPressDelay(): number;
     set longPressDelay(v: number);
@@ -22,13 +22,13 @@ export declare class WebUiContextMenu extends LitElement {
     private _longPressTimer;
     private _longPressOrigin;
     /**
-     * 长按自行开菜单的时刻。浏览器会为**同一次触摸**补发两个事件，二者都属于
+     * 长按自行开 menu 的时刻。浏览器会为**同一次触摸**补发两个事件，二者都属于
      * 那一次意图，不是两次独立操作：
      *
      * - 原生 `contextmenu`：长按被识别时立刻派发，会重复打开（`_openAt` 走已开分支）。
-     * - 合成 `click`：`touchend` 之后由引擎补发，会把刚打开的菜单立刻 light-dismiss。
-     *   实测真实触控管线下的顺序为 pointerdown(9ms) → 长按开菜单(≈509ms) →
-     *   touchend(1019ms) → click(1022ms)，缺这一步菜单开了就被自己的补发事件关掉。
+     * - 合成 `click`：`touchend` 之后由引擎补发，会把刚打开的 menu 立刻 light-dismiss。
+     *   实测真实触控管线下的顺序为 pointerdown(9ms) → 长按开 menu(≈509ms) →
+     *   touchend(1019ms) → click(1022ms)，缺这一步 menu 开了就被自己的补发事件关掉。
      *
      * 因此在窗口内吸收这两个补发事件；窗口由下一次 `pointerdown` 关闭。
      */
@@ -36,17 +36,17 @@ export declare class WebUiContextMenu extends LitElement {
     /**
      * 长按手势结束（pointerup）的时刻，补发事件窗口的起点。
      *
-     * 为 null 表示「这次长按的手势还没结束」——窗口退回以菜单打开时刻为起点。手势被
+     * 为 null 表示「这次长按的手势还没结束」——窗口退回以 menu 打开时刻为起点。手势被
      * pointercancel 打断、或组件在抬手前就被卸载时都会走到这条兜底，行为与此前一致。
      */
     private _longPressGestureEndedAt;
     private readonly _submenuPositionEpochs;
     private _menu?;
     /**
-     * 模态 scrim。菜单打开期间存在并处于 `showModal()` 状态，关闭时随面板一起移除。
+     * 模态 scrim。menu 打开期间存在并处于 `showModal()` 状态，关闭时随 panel 一起移除。
      *
-     * 面板必须**显式**挂进它（`createMenuPortalOverlay` 的第三参）：`resolveOverlayContainer`
-     * 查的是 target 的**祖先**里有无已打开的 dialog，而 scrim 是面板的反方向，祖先发现查不到。
+     * panel 必须**显式**挂进它（`createMenuPortalOverlay` 的第三参）：`resolveOverlayContainer`
+     * 查的是 target 的**祖先**里有无已打开的 dialog，而 scrim 是 panel 的反方向，祖先发现查不到。
      */
     private _scrim?;
     /**
@@ -56,13 +56,13 @@ export declare class WebUiContextMenu extends LitElement {
      * 同一套 `computePosition` + `flip` / `shift`，垂直契约（上缘对齐触发点、向下展开、
      * 放不下翻到上方）完全一致。
      *
-     * 触屏要居中：手指按下去的位置是「这块内容在这里」的意思，菜单在它正下方居中展开，
-     * 正是 iOS / Android 原生长按菜单的形态；左对齐会让菜单整体偏到手指右侧，看起来像
+     * 触屏要居中：手指按下去的位置是「这块内容在这里」的意思，menu 在它正下方居中展开，
+     * 正是 iOS / Android 原生长按 menu 的形态；左对齐会让 menu 整体偏到手指右侧，看起来像
      * 弹在了别的东西上面。
      *
-     * 鼠标不居中：桌面右键的肌肉记忆是菜单**左上角**出现在光标处。更要紧的是居中会让光标
-     * 落在面板上缘正中 —— 也就是落在第一项的命中区里。后果是菜单一开就有项处于 hover 高亮，
-     * 并且紧接着再右键一次（想开子菜单）会打在菜单项上而不是空白处。`overlay-in-dialog`
+     * 鼠标不居中：桌面右键的肌肉记忆是 menu**左上角**出现在光标处。更要紧的是居中会让光标
+     * 落在 panel 上缘正中 —— 也就是落在第一项的命中区里。后果是 menu 一开就有项处于 hover 高亮，
+     * 并且紧接着再右键一次（想开 submenu）会打在 menu item 上而不是空白处。`overlay-in-dialog`
      * 里 `openAt(100, 400)` 那条用例钉的 `'top left'` 正是这条契约。
      *
      * 判据是**开启来源**（调用点显式传入），不靠运行时嗅探 pointerType 或视口宽度：
@@ -73,19 +73,19 @@ export declare class WebUiContextMenu extends LitElement {
     /**
      * 本次关闭的来源，决定焦点归还走哪条路。语义见 `close()` 里的说明。
      *
-     * 只有菜单项激活这一条需要抢在退场之前出顶层；点外面 / Escape / 程序式关闭一律
+     * 只有 menu item 激活这一条需要抢在退场之前出顶层；点外面 / Escape / 程序式关闭一律
      * 保留 dialog 默认效果 —— 那正是用户「回到原处」的期望。
      */
     private _closeSource;
     /**
-     * 触发「菜单项激活」的那次事件对象；作用域与理由见 `_onMenuItemActivation`。
+     * 触发「menu item 激活」的那次事件对象；作用域与理由见 `_onMenuItemActivation`。
      *
      * 存**事件**而不是布尔标志：判定「这次 `close()` 是不是发生在这一次派发里」可以问事件自己
      * （`eventPhase !== 0`），不必用定时器去近似。布尔标志只能靠「派发结束时清掉」来划界，
      * 而划界的那一步必须与派发末尾落在同一个任务、同一个微任务检查点之后——那是个会错的假设。
      *
      * 存在的理由是 `close()` 的出顶层判定不能只看 `_closeSource`：消费方完全可以在自己的
-     * 菜单项回调里直接调 `close()`（interweave 的右键重命名就是 `emit` 之后自己关），
+     * menu item 回调里直接调 `close()`（interweave 的右键重命名就是 `emit` 之后自己关），
      * 那时 `_closeSource` 还是 `'default'`，scrim 就一直留在 top layer 里没退出，
      * 消费方随后把焦点送进编辑器的动作落在 inert 文档上被浏览器静默丢弃。
      *
@@ -93,11 +93,11 @@ export declare class WebUiContextMenu extends LitElement {
      * `'menu-item'`，两条判定同向，不会互相抵消。
      */
     private _menuItemActivationEvent;
-    /** 根面板的开启会话句柄；未开启时为 null。查询走它。 */
+    /** 根 panel 的开启会话 handle；未开启时为 null。查询走它。 */
     private _menuHandle;
     /**
-     * 子菜单 panel → 会话句柄。子层经 `adopt` 进根句柄子树（默认不成为独立候选），
-     * 但仍各自持有句柄：整层关闭或收尾动画结束时按 panel 精确撤销。
+     * submenu panel → 会话 handle。子层经 `adopt` 进根 handle 子树（默认不成为独立候选），
+     * 但仍各自持有 handle：整层关闭或收尾动画结束时按 panel 精确撤销。
      */
     private readonly _submenuHandles;
     private readonly _outsideClickGuard;
@@ -119,7 +119,7 @@ export declare class WebUiContextMenu extends LitElement {
     disconnectedCallback(): void;
     protected updated(changed: Map<string, unknown>): void;
     /**
-     * 在指定视口坐标打开菜单。
+     * 在指定视口坐标打开 menu。
      * @param x 水平坐标（px）。
      * @param y 垂直坐标（px）。
      * @returns 无返回值；命令式打开不派发 `open-change` 事件。
@@ -127,19 +127,19 @@ export declare class WebUiContextMenu extends LitElement {
     openAt(x: number, y: number): void;
     private _openAt;
     /**
-     * 关闭菜单。
+     * 关闭 menu。
      * @returns 无返回值；命令式关闭不派发 `open-change` 事件。
      */
     close(): void;
     /**
-     * 「当前是否正处在一次可激活菜单项的点击派发里」。
+     * 「当前是否正处在一次可激活 menu item 的点击派发里」。
      *
      * 判据是 `eventPhase !== 0`（DOM 规范：派发开始前置 CAPTURING_PHASE，结束后由派发算法的
      * terminating 步骤置回 NONE），即**事件自己知道它此刻有没有在派发中**。于是作用域精确等于
      * 「这一次派发」，既不需要定时器也不需要猜微任务检查点的位置：
      *
      * - 消费方在条目自己的监听器里同步调 `close()` → 派发未结束 → 判定为真（要的就是这个）。
-     * - 消费方 `stopPropagation()` 让菜单留着 → 派发照样结束 → 之后的 Escape / 点外面 / 程序式
+     * - 消费方 `stopPropagation()` 让 menu 留着 → 派发照样结束 → 之后的 Escape / 点外面 / 程序式
      *   `close()` 一律判定为假，README 承诺的「那三条关闭不抢焦点」不会被这一次点击污染。
      * - 消费方把 `close()` 推到下一个任务 → 判定为假，退回不提前出顶层（与没有这个标记时一致）。
      */
@@ -151,19 +151,19 @@ export declare class WebUiContextMenu extends LitElement {
      * 定位：**触屏长按与鼠标右键共用这一条 Floating UI 路径**。
      *
      * 两条入口现在只差「触发点的 x/y 从哪来」，布局契约完全一致：
-     * `bottom-start` 表达「面板上缘 == 触发点 y、向下展开」，水平以触发点 x 为基准。
+     * `bottom-start` 表达「panel 上缘 == 触发点 y、向下展开」，水平以触发点 x 为基准。
      * 之前有一条手写的贴底分支（先按点、再按视口下缘算 `top`），那是把「贴视口底」硬编码
-     * 成算术；真机反馈证明它错（菜单跑到屏幕最底部，与手指按下的位置完全脱节）。现在
+     * 成算术；真机反馈证明它错（menu 跑到屏幕最底部，与手指按下的位置完全脱节）。现在
      * 落点交给 `flip` / `shift` 按**实际空间**决定，`placement` 只表达意图。
      *
-     * 不再按「是否触屏」分流：窄视口的鼠标右键同样期望菜单贴着光标出现，按输入类型或视口
+     * 不再按「是否触屏」分流：窄视口的鼠标右键同样期望 menu 贴着光标出现，按输入类型或视口
      * 宽度分流会让同一块屏幕上的两种输入拿到两套布局。分流所需的 `_anchorAtPressPoint`
      * 连同 `_positionMenuInViewport` / `_positionMenuAtPressPoint` 两个方法一起删掉 ——
-     * 面板恒为 open scrim `<dialog>` 的直接子节点（`createMenuPortalOverlay` 第三参传入
+     * panel 恒为 open scrim `<dialog>` 的直接子节点（`createMenuPortalOverlay` 第三参传入
      * scrim，`menu-portal.ts` 里 `container = scrim ?? …`），所以旧代码那条
      * 「非 dialog 容器」的分支对 context-menu 本来就不可达。
      *
-     * 算出来的 left/top 是**视口坐标**。面板是 `position: fixed`，而 scrim 刻意不带
+     * 算出来的 left/top 是**视口坐标**。panel 是 `position: fixed`，而 scrim 刻意不带
      * transform / filter / contain（见 style.css），因此不构成 fixed 的包含块 ——
      * 坐标直接相对视口解析。这条等价关系由 style.css 的满屏声明保证，并由 R6 的
      * 「scrim 无 transform/filter/contain」+ viewport-fit 的几何断言兜底。
@@ -172,8 +172,8 @@ export declare class WebUiContextMenu extends LitElement {
     /**
      * 视口下缘的安全区高度（px）。
      *
-     * 改按压点展开之后它**仍然必需**，而且不再只服务触屏：菜单默认从触发点向下长，触发点
-     * 落在屏幕下半部时面板下缘会进入 home indicator 区域。它现在折进 flip 与 shift 共用的
+     * 改按压点展开之后它**仍然必需**，而且不再只服务触屏：menu 默认从触发点向下长，触发点
+     * 落在屏幕下半部时 panel 下缘会进入 home indicator 区域。它现在折进 flip 与 shift 共用的
      * 边界 padding（见 `_positionMenu`），不再需要单独一条 `maxBottom` 算术。
      *
      * 读宿主的自定义属性而不是 `env()`：自定义属性读回的是**计算后**的解析值，
@@ -182,30 +182,30 @@ export declare class WebUiContextMenu extends LitElement {
      */
     private _safeAreaBottom;
     /**
-     * 写下面板坐标与进场 transform 的原点。
+     * 写下 panel 坐标与进场 transform 的原点。
      *
      * 两个 origin 必传且**不**再回退成坐标比较：flip 会改变垂直方向，回退表达式
-     * `y < this._y ? 'bottom' : 'top'` 在「面板顶边与触发点重合」时两边都成立，等于随机取。
+     * `y < this._y ? 'bottom' : 'top'` 在「panel 顶边与触发点重合」时两边都成立，等于随机取。
      * 唯一调用方从 flip 后的 placement 与 shift 位移推出真实侧边，见 `_positionMenu`。
      */
     private _applyMenuPosition;
     /**
-     * 把焦点带进菜单的第一项。
+     * 把焦点带进 menu 的第一项。
      *
-     * `attempt` 是重试计数：菜单项是刚被 `reconcileManagedMenuItems` 搬进来的自定义元素，
+     * `attempt` 是重试计数：menu item 是刚被 `reconcileManagedMenuItems` 搬进来的自定义元素，
      * 它们的 shadow（`.item-inner`）由各自的 Lit 更新**异步**渲染。`focusMenuItem()` 委托给
      * 项的 `focusItem()`，那一刻 `.item-inner` 还不存在，于是**静默无操作** —— 不抛错、
-     * 也不留痕，只表现为「菜单开了但焦点没进去」。
+     * 也不留痕，只表现为「menu 开了但焦点没进去」。
      *
      * 所以这里不假设一次成功：调用后用 `findFocusedMenuItem` 复核，没落上就在下一帧再试，
-     * 最多 `FOCUS_FIRST_ITEM_ATTEMPTS` 次。上界是必要的 —— 菜单项若始终渲染不出来
-     * （空菜单、内容被外部换掉），不能让重试链一直跑下去。
+     * 最多 `FOCUS_FIRST_ITEM_ATTEMPTS` 次。上界是必要的 —— menu item 若始终渲染不出来
+     * （空 menu、内容被外部换掉），不能让重试链一直跑下去。
      */
     private _focusFirstItem;
     private _setupMenuItems;
     private _returnItemsToSlot;
     /**
-     * 建 scrim 并让它进入模态态，返回容器供面板挂载。
+     * 建 scrim 并让它进入模态态，返回容器供 panel 挂载。
      *
      * 每次开启都新建而不是复用：scrim 的生命周期必须与「这一次开启」严格同进同出。
      * 复用一个 dialog 意味着上一轮的 `close()` 事件、`open` 属性与 UA 记下的焦点还原目标
@@ -213,15 +213,15 @@ export declare class WebUiContextMenu extends LitElement {
      */
     private _openScrim;
     /**
-     * scrim 的挂载点：**与面板在没有 scrim 时会落到的容器同源** —— 最近主题的 theme-owned
-     * overlay root。scrim 就是那个容器的替身（面板必须挂进 scrim，见 `updated()` 的顺序注释），
+     * scrim 的挂载点：**与 panel 在没有 scrim 时会落到的容器同源** —— 最近主题的 theme-owned
+     * overlay root。scrim 就是那个容器的替身（panel 必须挂进 scrim，见 `updated()` 的顺序注释），
      * 所以它得站在容器该站的位置上。
      *
      * 为什么不能在整棵 DOM 里随便挑位置：`--wui-color-*` 由 `<web-ui-theme>` 写在自己的 `:host`
      * 上，只沿 DOM 树向下继承。scrim 若挂到 `document.body`，而 `<web-ui-theme>` 是 body 的**子节点**，
-     * 这条继承链就断了 —— 面板与 scrim 双双落回 `var(--wui-color-*, <浅色字面量>)` 的 fallback，
-     * 深色外观下菜单是一块浅色玻璃（app 侧的 `dark:` 变体也够不到它）。挂进 theme overlay root
-     * 之后，面板与 scrim 跟 dropdown / select 一样吃同一份 token。
+     * 这条继承链就断了 —— panel 与 scrim 双双落回 `var(--wui-color-*, <浅色字面量>)` 的 fallback，
+     * 深色外观下 menu 是一块浅色玻璃（app 侧的 `dark:` 变体也够不到它）。挂进 theme overlay root
+     * 之后，panel 与 scrim 跟 dropdown / select 一样吃同一份 token。
      *
      * 无主题时保持历史行为挂在 `document.body`：那条路径本来就没有 token 作用域可继承，改用
      * fallback overlay root 只会改变既有测试与消费者的观察面，不换来任何东西。
@@ -230,38 +230,38 @@ export declare class WebUiContextMenu extends LitElement {
     /**
      * 关掉并摘除 scrim。幂等：关闭分支与 `disconnectedCallback` 都会调。
      *
-     * `close()` 触发 UA 的焦点归还，**必须先于面板 `remove()`** —— 理由见 `_closeMenuAfterPresence`。
+     * `close()` 触发 UA 的焦点归还，**必须先于 panel `remove()`** —— 理由见 `_closeMenuAfterPresence`。
      */
     private _closeScrim;
     /**
-     * 只让 scrim 出顶层，不摘除元素。面板挂在 scrim 里，摘了就把退场动画一起摘掉。
+     * 只让 scrim 出顶层，不摘除元素。panel 挂在 scrim 里，摘了就把退场动画一起摘掉。
      *
      * 提前出顶层是为了焦点（理由见 `close()`）。代价是这个尾巴上 scrim 已经在 top layer
-     * 之外：下层恢复可命中，且面板的层级退回普通流 —— 在「菜单开在 drawer/dialog 之上」
+     * 之外：下层恢复可命中，且 panel 的层级退回普通流 —— 在「menu 开在 drawer/dialog 之上」
      * 的场景里，退场动画会被下层的 top layer 盖住。
      *
-     * 这条尾巴只有一次退场过渡的时长（默认 160ms），且只发生在菜单项激活时。
-     * 摘除仍在 `_closeScrim()`，那时面板已经走完。
+     * 这条尾巴只有一次退场过渡的时长（默认 160ms），且只发生在 menu item 激活时。
+     * 摘除仍在 `_closeScrim()`，那时 panel 已经走完。
      */
     private _releaseScrimModality;
     /**
-     * 点 scrim = 关菜单（Q12：必关，不给 prop 选项），与 dialog / drawer 的实现同形：
-     * 只有落点就是 scrim 本身才算「点外面」，落在面板（scrim 的后代）上不算。
+     * 点 scrim = 关 menu（Q12：必关，不给 prop option），与 dialog / drawer 的实现同形：
+     * 只有落点就是 scrim 本身才算「点外面」，落在 panel（scrim 的后代）上不算。
      *
-     * 落点判据之所以只能是这两个，是模态给的：菜单打开期间下层收不到命中，事件只可能
-     * 落在 scrim 或面板上，两者都由本组件判定。
+     * 落点判据之所以只能是这两个，是模态给的：menu 打开期间下层收不到命中，事件只可能
+     * 落在 scrim 或 panel 上，两者都由本组件判定。
      *
-     * 更早的实现在 document 捕获阶段挂 click 监听，把「点外面」理解成「命中测试落在菜单
-     * 面板之外」—— 宿主 light DOM 的每一行都满足这个条件，于是判定与行激活成了同一个
+     * 更早的实现在 document 捕获阶段挂 click 监听，把「点外面」理解成「命中测试落在 menu
+     * panel 之外」—— 宿主 light DOM 的每一行都满足这个条件，于是判定与行激活成了同一个
      * click 的两个后果，中间没有任何仲裁，下层目标先被激活。那条监听器连同它的实现已一并
      * 删除：模态化之后它没有任何还能生效的场景，别再挂回来。
      */
     private _onScrimClick;
     /**
      * Escape 的**唯一**关闭路径仍是共享仲裁者（`_overlay.requestClose` → `closeDeepestOrAll`），
-     * 它按层深决定是关最深子菜单还是关整张菜单。原生 dialog 自己也监听 Escape 并派发
+     * 它按层深决定是关最深 submenu 还是关整张 menu。原生 dialog 自己也监听 Escape 并派发
      * `cancel`，若放任默认行为，UA 会直接关掉 scrim —— 那条路径不经过组件状态机，
-     * 既可能漏派 `open-change`，也会把「关最深一层」的语义降级成「整张菜单没了」。
+     * 既可能漏派 `open-change`，也会把「关最深一层」的语义降级成「整张 menu 没了」。
      *
      * 因此这里只吞掉默认行为，不重复关闭。仲裁者那条路径已经会走 `_closeFromUser()`。
      */
@@ -279,7 +279,7 @@ export declare class WebUiContextMenu extends LitElement {
     private _onPointerUp;
     private _onPointerCancel;
     private _cancelLongPress;
-    /** 该事件是否是长按开菜单之后、浏览器为同一次触摸补发的事件。 */
+    /** 该事件是否是长按开 menu 之后、浏览器为同一次触摸补发的事件。 */
     private _isLongPressFollowUp;
     /** 结束「同一次手势的补发事件」窗口。与 _longPressOpenedAt 的清零同源，两处都要清。 */
     private _clearLongPressFollowUp;
@@ -296,7 +296,7 @@ export declare class WebUiContextMenu extends LitElement {
     private _closeLastSubmenuOrMenu;
     private _preventBackgroundScroll;
     private _syncScrollLock;
-    /** 按 panel 撤销一层子菜单的登记；句柄已随根层递归撤销时幂等无操作。 */
+    /** 按 panel 撤销一层 submenu 的登记；handle 已随根层递归撤销时幂等无操作。 */
     private _releaseSubmenu;
     private _isMenuPanelEvent;
     render(): import('lit').TemplateResult<1>;

package/dist/components/context-menu/index.js

@@ -149,7 +149,7 @@ var z = "wui-context-menu-item", B = 500, V = 5e3, H = 10, U = 1e3, W = "data-wu
 			if (this._isOpen) {
 				if (this._syncScrollLock(), !this._menu) {
 					let e = this._openScrim();
-					this._menu = D("context-menu", this, e), this._menu.panel.setAttribute("role", "menu"), this._menu.panel.setAttribute("aria-label", "上下文菜单"), this._menu.panel.addEventListener("click", this._onMenuClick), this._menu.panel.addEventListener("click", this._onMenuItemActivation, !0);
+					this._menu = D("context-menu", this, e), this._menu.panel.setAttribute("role", "menu"), this._menu.panel.setAttribute("aria-label", "Context menu"), this._menu.panel.addEventListener("click", this._onMenuClick), this._menu.panel.addEventListener("click", this._onMenuItemActivation, !0);
 				}
 				if (!this._menuHandle) {
 					this._menuHandle = this._overlay.claim(this._menu.panel);
@@ -277,7 +277,7 @@ var z = "wui-context-menu-item", B = 500, V = 5e3, H = 10, U = 1e3, W = "data-wu
 		}
 		if (p(e).length === 0) return;
 		let i = D("context-submenu", this, this._scrim);
-		i.panel.dataset.level = String(n), i.panel.setAttribute("role", "menu"), i.panel.setAttribute("aria-label", "子菜单"), i.panel.style.visibility = "hidden", i.panel.addEventListener("click", this._onMenuClick), i.panel.addEventListener("click", this._onMenuItemActivation, !0), g(e, i.content), this._activeSubmenus[n] = i, this._activeSubmenuItems[n] = e, this._menuHandle && this._submenuHandles.set(i.panel, this._menuHandle.adopt(i.panel)), e.setAttribute("active", ""), this._positionSubmenu(e, i), a(i.panel, { isInstant: t }), this._hoverBinder.bind();
+		i.panel.dataset.level = String(n), i.panel.setAttribute("role", "menu"), i.panel.setAttribute("aria-label", "submenu"), i.panel.style.visibility = "hidden", i.panel.addEventListener("click", this._onMenuClick), i.panel.addEventListener("click", this._onMenuItemActivation, !0), g(e, i.content), this._activeSubmenus[n] = i, this._activeSubmenuItems[n] = e, this._menuHandle && this._submenuHandles.set(i.panel, this._menuHandle.adopt(i.panel)), e.setAttribute("active", ""), this._positionSubmenu(e, i), a(i.panel, { isInstant: t }), this._hoverBinder.bind();
 	}
 	_closeSubmenusFrom(e, t = !1) {
 		for (let n = this._activeSubmenus.length - 1; n >= e; n--) {