@greypan/web-ui 11.0.0 → 11.2.0

package/README.CN.md

@@ -60,6 +60,70 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue' // 或 overla
   声明它会让引擎放弃平台的覆盖式 scrollbar、固定占一条布局宽度，而组件内部 scrollbar 正是不能占宽度。
   导入本样式表，组件内部 scrollbar 才会跟随外观，与整页 scrollbar 同一机制。
 
+## Classes
+
+`@greypan/web-ui/classes.css` 汇总可复用的公共 class，组件内部与消费方共用同一份源码：
+`.wui-glass`（毛玻璃表面）与 `.wui-glow`（装饰性背景晕染）。
+
+```js
+import '@greypan/web-ui/classes.css'
+```
+
+### .wui-glass
+
+给任意容器加 `.wui-glass` 即可获得毛玻璃表面；组件内部（drawer body、dialog / toast、tooltip /
+popover、input 等）用的也是同一份样式。
+
+```html
+<div class="wui-glass">...</div>
+```
+
+- 同时提供半透明底色、`backdrop-filter`（模糊 / 饱和 / 亮度）、元素自身的 inset 高光与投影，
+  以及用 `::before` 挖出的 1px 描边环：环的左上 / 右下受光、右上 / 左下背光，半径由
+  `--wui-glass-corner-radius` 控制。
+- 容器需要有确定的盒子尺寸和可被采样的背景。`.wui-glass` 只在宿主没有其他 `position` 时补
+  `position: relative`，并移除自身 border（描边由环承担）；圆角仍跟随宿主的 `border-radius`。
+- 非 pill 表面应把 `--wui-glass-corner-radius` 覆盖成与自身圆角同源的值，否则角部光影半径与
+  盒形不匹配。颜色 token 由主题给出浅 / 深两套默认值，优先覆盖 token 而不是重写 `backdrop-filter`。
+
+| token                          | 默认值                    | 说明                                                 |
+| ------------------------------ | ------------------------- | ---------------------------------------------------- |
+| `--wui-color-surface-glass`    | `rgb(250 250 250 / 0.34)` | 半透明底色；深色主题为 `rgb(44 44 46 / 0.42)`        |
+| `--wui-glass-blur`             | `4px`                     | `backdrop-filter` 模糊半径；设 `0px` 关闭            |
+| `--wui-glass-saturation`       | `160%`                    | 背景饱和度                                           |
+| `--wui-glass-brightness`       | `1.06`                    | 背景亮度；深色主题为 `1.02`                          |
+| `--wui-color-glass-highlight`  | `rgb(255 255 255 / 0.9)`  | 元素 inset 高光；深色主题为 `rgb(255 255 255 / 0.1)` |
+| `--wui-glass-corner-radius`    | `32px`                    | 描边环径向光影的半径                                 |
+| `--wui-color-glass-ring`       | `rgb(0 0 0 / 0.05)`       | 1px 环底色；深色主题为 `rgb(255 255 255 / 0.05)`     |
+| `--wui-color-glass-ring-sheen` | `rgb(255 255 255 / 0.5)`  | 受光角光泽；深色主题为 `rgb(255 255 255 / 0.2)`      |
+| `--wui-color-glass-ring-shade` | `rgb(0 0 0 / 0.03)`       | 背光角压暗；深色主题为 `rgb(0 0 0 / 0.5)`            |
+| `--wui-shadow-glass`           | 四层扩散阴影              | 元素投影；未设置时使用类内默认值                     |
+
+### .wui-glow
+
+给任意容器加 `.wui-glow` 即可，不需要额外组件或 DOM；`web-ui-layout` 的 `header-glow` 与
+collapse 的 peek 边缘用的也是同一份样式。
+
+```html
+<div class="wui-glow">...</div>
+```
+
+- 渐变与模糊都是容器的背景层，内容始终位于其上方。容器需要有确定的盒子尺寸；`.wui-glow` 只在
+  宿主没有其他 `position` 时补 `position: relative`，并加 `isolation: isolate`。
+- 默认从容器顶部向下铺 `--wui-color-page` 渐变，再叠 `blur(4px)`；模糊层向下探出 24px 后收尾。
+  容器或祖先的 `overflow: hidden` 会裁掉这段尾巴。
+- 宿主是不透明背景时，渐变会叠在它上方，但模糊采样不到宿主背后的内容——只会模糊自身的纯色背景。
+  想要毛玻璃观感，宿主表面应保持半透明。
+
+| token                           | 默认值                                 | 说明                                        |
+| ------------------------------- | -------------------------------------- | ------------------------------------------- |
+| `--wui-glow-color`              | `var(--wui-color-page, #fff)`          | 渐变起点色                                  |
+| `--wui-glow-gradient-direction` | `to bottom`                            | `linear-gradient` 的方向                    |
+| `--wui-glow-gradient`           | 由起点色与方向生成的 `linear-gradient` | 完整 background-image；设 `none` 关闭渐变   |
+| `--wui-glow-blur`               | `4px`                                  | `backdrop-filter` 模糊半径；设 `0px` 关闭   |
+| `--wui-glow-overhang`           | `24px`                                 | 模糊层向容器下方探出的高度                  |
+| `--wui-glow-fade`               | `36px`                                 | 从全强度到透明的衰减总长，应不小于 overhang |
+
 ## Vite
 
 `@greypan/web-ui/vite` 导出 `webUiOptimizeDeps`，即需要并进应用 `optimizeDeps.include` 的 web-ui 运行时
@@ -305,44 +369,44 @@ dropdown、tooltip）不需要它。
 
 每个组件都有自己的文档页，API 参考、行为说明和可交互示例都在 [`docs/`](./docs/) 下。下面的表只是索引。
 
-| 分类                  | 组件                                                        |
-| --------------------- | ----------------------------------------------------------- |
-| **表单控件**          | [`<web-ui-input>`](./docs/input.md)                         |
-|                       | [`<web-ui-textarea>`](./docs/textarea.md)                   |
-|                       | [`<web-ui-editable-text>`](./docs/editable-text.md)         |
-|                       | [`<web-ui-input-number>`](./docs/input-number.md)           |
-|                       | [`<web-ui-select>`](./docs/select.md)                       |
-|                       | [`<web-ui-autocomplete>`](./docs/autocomplete.md)           |
-|                       | [`<web-ui-slider>`](./docs/slider.md)                       |
-|                       | [`<web-ui-checkbox>`](./docs/checkbox.md)                   |
-|                       | [`<web-ui-radio>`](./docs/radio.md)                         |
-|                       | [`<web-ui-switch>`](./docs/switch.md)                       |
-|                       | [`<web-ui-segmented>`](./docs/segmented.md)                 |
-|                       | [`<web-ui-checkbox-group>`](./docs/checkbox-group.md)       |
-|                       | [`<web-ui-radio-group>`](./docs/radio-group.md)             |
-| **button**            | [`<web-ui-button>`](./docs/button.md)                       |
-|                       | [`<web-ui-button-group>`](./docs/button-group.md)           |
-| **overlay / 模态**    | [`<web-ui-dialog>`](./docs/dialog.md)                       |
-|                       | [`<web-ui-drawer>`](./docs/drawer.md)                       |
-|                       | [`imagePreview()`](./docs/image-preview.md)                 |
-| **文档流 Disclosure** | [`<web-ui-collapse>`](./docs/collapse.md)                   |
-| **浮动**              | [`<web-ui-popover>`](./docs/popover.md)                     |
-|                       | [`<web-ui-tooltip>`](./docs/tooltip.md)                     |
-|                       | [`<web-ui-context-menu>`](./docs/context-menu.md)           |
-| **menu**              | [`<web-ui-dropdown>`](./docs/dropdown.md)                   |
-|                       | [`<web-ui-dropdown-item>`](./docs/dropdown-item.md)         |
-|                       | [`<web-ui-dropdown-divider>`](./docs/dropdown-divider.md)   |
-|                       | [`<web-ui-dropdown-header>`](./docs/dropdown-header.md)     |
-| **数据展示**          | [`<web-ui-avatar>`](./docs/avatar.md)                       |
-|                       | [`<web-ui-badge>`](./docs/badge.md)                         |
-|                       | [`<web-ui-empty>`](./docs/empty.md)                         |
-|                       | [`<web-ui-middle-ellipsis>`](./docs/middle-ellipsis.md)     |
-|                       | [`<web-ui-icon>`](./docs/icon.md)                           |
-|                       | [`<web-ui-spinner>`](./docs/spinner.md)                     |
-| **布局与工具**        | [`<web-ui-layout>`](./docs/layout.md)                       |
-|                       | [`<web-ui-back-top>`](./docs/back-top.md)                   |
-|                       | [`<web-ui-svg-draw-lines>`](./docs/svg-draw-lines.md)       |
-|                       | [`<web-ui-theme>`](./docs/theme.md)                         |
-| **通知**              | [`<web-ui-toast>`](./docs/toast.md)                         |
-| **子项**              | [`<web-ui-option>`](./docs/option.md)                       |
-|                       | [`<web-ui-segmented-trigger>`](./docs/segmented-trigger.md) |
+| 分类                  | 组件                                                           |
+| --------------------- | -------------------------------------------------------------- |
+| **表单控件**          | [`<web-ui-input>`](./docs/input.CN.md)                         |
+|                       | [`<web-ui-textarea>`](./docs/textarea.CN.md)                   |
+|                       | [`<web-ui-editable-text>`](./docs/editable-text.CN.md)         |
+|                       | [`<web-ui-input-number>`](./docs/input-number.CN.md)           |
+|                       | [`<web-ui-select>`](./docs/select.CN.md)                       |
+|                       | [`<web-ui-autocomplete>`](./docs/autocomplete.CN.md)           |
+|                       | [`<web-ui-slider>`](./docs/slider.CN.md)                       |
+|                       | [`<web-ui-checkbox>`](./docs/checkbox.CN.md)                   |
+|                       | [`<web-ui-radio>`](./docs/radio.CN.md)                         |
+|                       | [`<web-ui-switch>`](./docs/switch.CN.md)                       |
+|                       | [`<web-ui-segmented>`](./docs/segmented.CN.md)                 |
+|                       | [`<web-ui-checkbox-group>`](./docs/checkbox-group.CN.md)       |
+|                       | [`<web-ui-radio-group>`](./docs/radio-group.CN.md)             |
+| **button**            | [`<web-ui-button>`](./docs/button.CN.md)                       |
+|                       | [`<web-ui-button-group>`](./docs/button-group.CN.md)           |
+| **overlay / 模态**    | [`<web-ui-dialog>`](./docs/dialog.CN.md)                       |
+|                       | [`<web-ui-drawer>`](./docs/drawer.CN.md)                       |
+|                       | [`imagePreview()`](./docs/image-preview.CN.md)                 |
+| **文档流 Disclosure** | [`<web-ui-collapse>`](./docs/collapse.CN.md)                   |
+| **浮动**              | [`<web-ui-popover>`](./docs/popover.CN.md)                     |
+|                       | [`<web-ui-tooltip>`](./docs/tooltip.CN.md)                     |
+|                       | [`<web-ui-context-menu>`](./docs/context-menu.CN.md)           |
+| **menu**              | [`<web-ui-dropdown>`](./docs/dropdown.CN.md)                   |
+|                       | [`<web-ui-dropdown-item>`](./docs/dropdown-item.CN.md)         |
+|                       | [`<web-ui-dropdown-divider>`](./docs/dropdown-divider.CN.md)   |
+|                       | [`<web-ui-dropdown-header>`](./docs/dropdown-header.CN.md)     |
+| **数据展示**          | [`<web-ui-avatar>`](./docs/avatar.CN.md)                       |
+|                       | [`<web-ui-badge>`](./docs/badge.CN.md)                         |
+|                       | [`<web-ui-empty>`](./docs/empty.CN.md)                         |
+|                       | [`<web-ui-middle-ellipsis>`](./docs/middle-ellipsis.CN.md)     |
+|                       | [`<web-ui-icon>`](./docs/icon.CN.md)                           |
+|                       | [`<web-ui-spinner>`](./docs/spinner.CN.md)                     |
+| **布局与工具**        | [`<web-ui-layout>`](./docs/layout.CN.md)                       |
+|                       | [`<web-ui-back-top>`](./docs/back-top.CN.md)                   |
+|                       | [`<web-ui-svg-draw-lines>`](./docs/svg-draw-lines.CN.md)       |
+|                       | [`<web-ui-theme>`](./docs/theme.CN.md)                         |
+| **通知**              | [`<web-ui-toast>`](./docs/toast.CN.md)                         |
+| **子项**              | [`<web-ui-option>`](./docs/option.CN.md)                       |
+|                       | [`<web-ui-segmented-trigger>`](./docs/segmented-trigger.CN.md) |

package/README.md

@@ -64,6 +64,75 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-react' // or overl
   not do. Import this stylesheet for the internal scrollbars to follow the appearance, just like the
   page-level ones.
 
+## Classes
+
+`@greypan/web-ui/classes.css` bundles the reusable public classes shared by components and consumers:
+`.wui-glass` (frosted surface) and `.wui-glow` (decorative backdrop).
+
+```js
+import '@greypan/web-ui/classes.css'
+```
+
+### .wui-glass
+
+Add `.wui-glass` to any container for a frosted surface. Components use the same stylesheet internally
+(drawer body, dialog / toast, tooltip / popover, input, and so on).
+
+```html
+<div class="wui-glass">...</div>
+```
+
+- It provides the translucent background, the `backdrop-filter` (blur / saturation / brightness), the
+  element's own inset highlight and shadow, and a 1px ring cut out with `::before`: the ring lights the
+  top-left / bottom-right corners and shades the top-right / bottom-left ones, with the radius controlled
+  by `--wui-glass-corner-radius`.
+- The container needs a box size and a background that can be sampled. `.wui-glass` only adds
+  `position: relative` when the host has no other `position`, and removes the host's own border (the ring
+  replaces it); the corner radius still follows the host's `border-radius`.
+- For non-pill surfaces, override `--wui-glass-corner-radius` with a value derived from the element's own
+  radius, otherwise the corner lighting will not match the box shape. Colours come from the theme with
+  separate light / dark defaults; prefer overriding tokens over rewriting `backdrop-filter`.
+
+| token                          | default                   | description                                          |
+| ------------------------------ | ------------------------- | ---------------------------------------------------- |
+| `--wui-color-surface-glass`    | `rgb(250 250 250 / 0.34)` | Translucent surface; `rgb(44 44 46 / 0.42)` in dark  |
+| `--wui-glass-blur`             | `4px`                     | `backdrop-filter` radius; set `0px` to disable       |
+| `--wui-glass-saturation`       | `160%`                    | Backdrop saturation                                  |
+| `--wui-glass-brightness`       | `1.06`                    | Backdrop brightness; `1.02` in dark                  |
+| `--wui-color-glass-highlight`  | `rgb(255 255 255 / 0.9)`  | Inset highlight; `rgb(255 255 255 / 0.1)` in dark    |
+| `--wui-glass-corner-radius`    | `32px`                    | Radius of the ring's corner lighting                 |
+| `--wui-color-glass-ring`       | `rgb(0 0 0 / 0.05)`       | 1px ring base; `rgb(255 255 255 / 0.05)` in dark     |
+| `--wui-color-glass-ring-sheen` | `rgb(255 255 255 / 0.5)`  | Lit-corner sheen; `rgb(255 255 255 / 0.2)` in dark   |
+| `--wui-color-glass-ring-shade` | `rgb(0 0 0 / 0.03)`       | Unlit-corner shade; `rgb(0 0 0 / 0.5)` in dark       |
+| `--wui-shadow-glass`           | four-layer diffuse shadow | Element shadow; the class default applies when unset |
+
+### .wui-glow
+
+Add `.wui-glow` to any container; no extra component or DOM is needed. `web-ui-layout`'s
+`header-glow` and collapse's peek edge use the same stylesheet.
+
+```html
+<div class="wui-glow">...</div>
+```
+
+- Both the gradient and the blur are background layers; content always sits above them. The container
+  needs a box size. `.wui-glow` only adds `position: relative` when the host has no other `position`, and
+  adds `isolation: isolate`.
+- By default it lays a `--wui-color-page` gradient from the top edge down, then overlays `blur(4px)`; the
+  blurred layer extends 24px below the container before fading out. `overflow: hidden` on the container or
+  an ancestor clips that tail.
+- On an opaque host the gradient still shows above its background, but the blur cannot sample what is behind
+  the host — it only blurs the host's own flat colour. Keep the host surface translucent for a frosted look.
+
+| token                           | default                                         | description                                          |
+| ------------------------------- | ----------------------------------------------- | ---------------------------------------------------- |
+| `--wui-glow-color`              | `var(--wui-color-page, #fff)`                   | Gradient start colour                                |
+| `--wui-glow-gradient-direction` | `to bottom`                                     | `linear-gradient` direction                          |
+| `--wui-glow-gradient`           | `linear-gradient` built from colour + direction | Full background-image; set `none` to disable         |
+| `--wui-glow-blur`               | `4px`                                           | `backdrop-filter` radius; set `0px` to disable       |
+| `--wui-glow-overhang`           | `24px`                                          | How far the blurred layer extends below the box      |
+| `--wui-glow-fade`               | `36px`                                          | Full-strength-to-transparent length; keep ≥ overhang |
+
 ## Vite
 
 `@greypan/web-ui/vite` exports `webUiOptimizeDeps`, the list of web-ui runtime dependencies an app has to merge

package/dist/assets/overlay-motion.js

@@ -1,5 +1,5 @@
 //#region src/assets/overlay-motion.css?inline
-var e = ".wui-floating-panel{transform-origin:var(--wui-internal-overlay-transform-origin,center);opacity:1;-webkit-backdrop-filter:blur(4px) saturate(160%) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(4px) saturate(160%) brightness(var(--wui-glass-brightness,1.06));transition:opacity var(--wui-internal-duration-float-enter,var(--wui-duration-float-enter,.24s)) var(--wui-ease-float,cubic-bezier(.4, .38, .2, 1)), -webkit-backdrop-filter var(--wui-internal-duration-float-enter,var(--wui-duration-float-enter,.24s)) var(--wui-ease-float,cubic-bezier(.4, .38, .2, 1)), backdrop-filter var(--wui-internal-duration-float-enter,var(--wui-duration-float-enter,.24s)) var(--wui-ease-float,cubic-bezier(.4, .38, .2, 1)), transform var(--wui-internal-duration-float-enter,var(--wui-duration-float-enter,.24s)) var(--wui-ease-float,cubic-bezier(.4, .38, .2, 1));transform:scale(1)}.wui-floating-panel[data-wui-presence=entering],.wui-floating-panel[data-wui-presence=closing]{transform:scale(var(--wui-scale-enter,.9));opacity:0;-webkit-backdrop-filter:blur(0) saturate(160%) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(0) saturate(160%) brightness(var(--wui-glass-brightness,1.06))}.wui-floating-panel[data-wui-presence=closing]{pointer-events:none;transition-duration:var(--wui-internal-duration-float-exit,var(--wui-duration-float-exit,.16s))}@media (prefers-reduced-motion:reduce){.wui-floating-panel,.wui-floating-panel[data-wui-presence=entering],.wui-floating-panel[data-wui-presence=closing]{transition-duration:.12s;transform:none}}";
+var e = ".wui-floating-panel{transform-origin:var(--wui-internal-overlay-transform-origin,center);opacity:1;-webkit-backdrop-filter:blur(var(--wui-glass-blur,4px)) saturate(var(--wui-glass-saturation,160%)) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(var(--wui-glass-blur,4px)) saturate(var(--wui-glass-saturation,160%)) brightness(var(--wui-glass-brightness,1.06));transition:opacity var(--wui-internal-duration-float-enter,var(--wui-duration-float-enter,.24s)) var(--wui-ease-float,cubic-bezier(.4, .38, .2, 1)), -webkit-backdrop-filter var(--wui-internal-duration-float-enter,var(--wui-duration-float-enter,.24s)) var(--wui-ease-float,cubic-bezier(.4, .38, .2, 1)), backdrop-filter var(--wui-internal-duration-float-enter,var(--wui-duration-float-enter,.24s)) var(--wui-ease-float,cubic-bezier(.4, .38, .2, 1)), transform var(--wui-internal-duration-float-enter,var(--wui-duration-float-enter,.24s)) var(--wui-ease-float,cubic-bezier(.4, .38, .2, 1));transform:scale(1)}.wui-floating-panel[data-wui-presence=entering],.wui-floating-panel[data-wui-presence=closing]{transform:scale(var(--wui-scale-enter,.9));opacity:0;-webkit-backdrop-filter:blur(0) saturate(var(--wui-glass-saturation,160%)) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(0) saturate(var(--wui-glass-saturation,160%)) brightness(var(--wui-glass-brightness,1.06))}.wui-floating-panel[data-wui-presence=closing]{pointer-events:none;transition-duration:var(--wui-internal-duration-float-exit,var(--wui-duration-float-exit,.16s))}@media (prefers-reduced-motion:reduce){.wui-floating-panel,.wui-floating-panel[data-wui-presence=entering],.wui-floating-panel[data-wui-presence=closing]{transition-duration:.12s;transform:none}}";
 //#endregion
 export { e as default };
 

package/dist/assets/overlay-motion.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay-motion.js","names":[],"sources":["../../src/assets/overlay-motion.css?inline"],"sourcesContent":["/*\n * overlay panel 共享动效（单层玻璃）。\n *\n * backdrop-filter 的 blur(0px) ↔ blur(4px) 在 Chrome/Safari 均平滑插值（Manager\n * 双引擎实测，Safari 逐帧采样 blur 值连续），当年「生硬跳变」的根因是 none↔blur\n * 不可插值，而不是 backdrop-filter 不可动画。因此 panel 自身直接承担玻璃：背景、\n * 阴影与 backdrop-filter 都在 panel 元素上（wui-glass 类也回 panel），打开/关闭时\n * opacity 与 backdrop-filter 同步过渡，无需双层结构——双层带来的全部层间问题\n * （变白、关闭残影、双重模糊、阴影作用域承接）一并消失。\n */\n\n.wui-floating-panel {\n  transform-origin: var(--wui-internal-overlay-transform-origin, center);\n  transform: scale(1);\n\n  opacity: 1;\n\n  /* 玻璃由 panel 自身承担（wui-glass 提供背景/描边/阴影）。打开目标态 blur(4px)，\n     entering/closing 切到 blur(0px) 作为插值起点——blur(0px) 与 blur(4px) 平滑过渡\n     （none↔blur 不可插值才是当年生硬跳变的根因）。 */\n  backdrop-filter: blur(4px) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n\n  /* transition 列表需手写 -webkit-backdrop-filter：lightningcss 不会在 transition\n   value 内追加 -webkit 项，iOS 16.4 上 blur 过渡依赖它（属性前缀会自动生成）。\n   缓动取 --wui-ease-float：--wui-ease-enter 会在开局就冲到 85% 进度，锚定 panel 的展开\n   需要可读的过程。 */\n  transition:\n    opacity var(--wui-internal-duration-float-enter, var(--wui-duration-float-enter, 240ms))\n      var(--wui-ease-float, cubic-bezier(0.4, 0.38, 0.2, 1)),\n    -webkit-backdrop-filter var(--wui-internal-duration-float-enter, var(--wui-duration-float-enter, 240ms))\n      var(--wui-ease-float, cubic-bezier(0.4, 0.38, 0.2, 1)),\n    backdrop-filter var(--wui-internal-duration-float-enter, var(--wui-duration-float-enter, 240ms))\n      var(--wui-ease-float, cubic-bezier(0.4, 0.38, 0.2, 1)),\n    transform var(--wui-internal-duration-float-enter, var(--wui-duration-float-enter, 240ms))\n      var(--wui-ease-float, cubic-bezier(0.4, 0.38, 0.2, 1));\n}\n\n.wui-floating-panel[data-wui-presence='entering'],\n.wui-floating-panel[data-wui-presence='closing'] {\n  transform: scale(var(--wui-scale-enter, 0.9));\n  opacity: 0;\n  backdrop-filter: blur(0) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n}\n\n.wui-floating-panel[data-wui-presence='closing'] {\n  pointer-events: none;\n  transition-duration: var(--wui-internal-duration-float-exit, var(--wui-duration-float-exit, 160ms));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .wui-floating-panel,\n  .wui-floating-panel[data-wui-presence='entering'],\n  .wui-floating-panel[data-wui-presence='closing'] {\n    transform: none;\n    transition-duration: 120ms;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"overlay-motion.js","names":[],"sources":["../../src/assets/overlay-motion.css?inline"],"sourcesContent":["/*\n * overlay panel 共享动效（单层玻璃）。\n *\n * backdrop-filter 的 blur(0px) ↔ blur(4px) 在 Chrome/Safari 均平滑插值（Manager\n * 双引擎实测，Safari 逐帧采样 blur 值连续），当年「生硬跳变」的根因是 none↔blur\n * 不可插值，而不是 backdrop-filter 不可动画。因此 panel 自身直接承担玻璃：背景、\n * 阴影与 backdrop-filter 都在 panel 元素上（wui-glass 类也回 panel），打开/关闭时\n * opacity 与 backdrop-filter 同步过渡，无需双层结构——双层带来的全部层间问题\n * （变白、关闭残影、双重模糊、阴影作用域承接）一并消失。\n */\n\n.wui-floating-panel {\n  transform-origin: var(--wui-internal-overlay-transform-origin, center);\n  transform: scale(1);\n\n  opacity: 1;\n\n  /* 玻璃由 panel 自身承担（wui-glass 提供背景/描边/阴影）。打开目标态 blur(4px)，\n     entering/closing 切到 blur(0px) 作为插值起点——blur(0px) 与 blur(4px) 平滑过渡\n     （none↔blur 不可插值才是当年生硬跳变的根因）。 */\n  backdrop-filter: blur(var(--wui-glass-blur, 4px)) saturate(var(--wui-glass-saturation, 160%))\n    brightness(var(--wui-glass-brightness, 1.06));\n\n  /* transition 列表需手写 -webkit-backdrop-filter：lightningcss 不会在 transition\n   value 内追加 -webkit 项，iOS 16.4 上 blur 过渡依赖它（属性前缀会自动生成）。\n   缓动取 --wui-ease-float：--wui-ease-enter 会在开局就冲到 85% 进度，锚定 panel 的展开\n   需要可读的过程。 */\n  transition:\n    opacity var(--wui-internal-duration-float-enter, var(--wui-duration-float-enter, 240ms))\n      var(--wui-ease-float, cubic-bezier(0.4, 0.38, 0.2, 1)),\n    -webkit-backdrop-filter var(--wui-internal-duration-float-enter, var(--wui-duration-float-enter, 240ms))\n      var(--wui-ease-float, cubic-bezier(0.4, 0.38, 0.2, 1)),\n    backdrop-filter var(--wui-internal-duration-float-enter, var(--wui-duration-float-enter, 240ms))\n      var(--wui-ease-float, cubic-bezier(0.4, 0.38, 0.2, 1)),\n    transform var(--wui-internal-duration-float-enter, var(--wui-duration-float-enter, 240ms))\n      var(--wui-ease-float, cubic-bezier(0.4, 0.38, 0.2, 1));\n}\n\n.wui-floating-panel[data-wui-presence='entering'],\n.wui-floating-panel[data-wui-presence='closing'] {\n  transform: scale(var(--wui-scale-enter, 0.9));\n  opacity: 0;\n  backdrop-filter: blur(0) saturate(var(--wui-glass-saturation, 160%)) brightness(var(--wui-glass-brightness, 1.06));\n}\n\n.wui-floating-panel[data-wui-presence='closing'] {\n  pointer-events: none;\n  transition-duration: var(--wui-internal-duration-float-exit, var(--wui-duration-float-exit, 160ms));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .wui-floating-panel,\n  .wui-floating-panel[data-wui-presence='entering'],\n  .wui-floating-panel[data-wui-presence='closing'] {\n    transform: none;\n    transition-duration: 120ms;\n  }\n}\n"],"mappings":""}

package/dist/assets/selection-control.js

@@ -1,5 +1,5 @@
 //#region src/assets/selection-control.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{cursor:default;vertical-align:middle;align-items:center;display:inline-flex}:host([disabled]){cursor:not-allowed}:where(.wui-radio,.wui-checkbox){cursor:inherit;-webkit-user-select:none;user-select:none;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);align-items:center;gap:10px;line-height:1;display:inline-flex}:where(.wui-radio,.wui-checkbox):focus-visible{border-radius:var(--wui-radius-control,calc(infinity * 1px));outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,color-mix(in srgb, var(--wui-color-accent,#08f) 40%, transparent));outline-offset:2px}:where(.wui-radio.is-label-empty,.wui-checkbox.is-label-empty){gap:0}:host([data-wui-pointer-focus]) :where(.wui-radio,.wui-checkbox):focus-visible{outline-color:#0000}:where(.wui-radio.is-disabled,.wui-checkbox.is-disabled){cursor:not-allowed;color:var(--wui-color-text-secondary,#6a6a6a);opacity:.4}:where(.wui-radio-circle,.wui-checkbox-box){isolation:isolate;width:var(--wui-selection-control-size,18px);height:var(--wui-selection-control-size,18px);background-color:var(--wui-color-surface-control,#dfdfdf);transition:background-color var(--wui-duration-trigger,.16s) ease;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}:where(.wui-radio-circle,.wui-checkbox-box):before{content:\"\";z-index:-1;border-radius:inherit;position:absolute;inset:0}:where(.wui-radio-label,.wui-checkbox-label){pointer-events:none}@media (hover:hover) and (pointer:fine){:where(.wui-radio,.wui-checkbox):hover:not(.is-disabled,.is-checked) :where(.wui-radio-circle,.wui-checkbox-box):before{background-color:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent)}}";
+var e = "*,:before,:after{box-sizing:border-box}:host{cursor:default;vertical-align:middle;align-items:center;display:inline-flex}:host([disabled]){cursor:not-allowed}:where(.wui-radio,.wui-checkbox){cursor:inherit;-webkit-user-select:none;user-select:none;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);align-items:center;gap:10px;line-height:1;display:inline-flex}:where(.wui-radio,.wui-checkbox):focus-visible{border-radius:var(--wui-radius-control,calc(infinity * 1px));outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,color-mix(in srgb, var(--wui-color-accent,#0071e3) 40%, transparent));outline-offset:2px}:where(.wui-radio.is-label-empty,.wui-checkbox.is-label-empty){gap:0}:host([data-wui-pointer-focus]) :where(.wui-radio,.wui-checkbox):focus-visible{outline-color:#0000}:where(.wui-radio.is-disabled,.wui-checkbox.is-disabled){cursor:not-allowed;color:var(--wui-color-text-secondary,#6a6a6a);opacity:.4}:where(.wui-radio-circle,.wui-checkbox-box){isolation:isolate;width:var(--wui-selection-control-size,18px);height:var(--wui-selection-control-size,18px);background-color:var(--wui-color-surface-control,#dfdfdf);transition:background-color var(--wui-duration-trigger,.16s) ease;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}:where(.wui-radio-circle,.wui-checkbox-box):before{content:\"\";z-index:-1;border-radius:inherit;position:absolute;inset:0}:where(.wui-radio-label,.wui-checkbox-label){pointer-events:none}@media (hover:hover) and (pointer:fine){:where(.wui-radio,.wui-checkbox):hover:not(.is-disabled,.is-checked) :where(.wui-radio-circle,.wui-checkbox-box):before{background-color:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent)}}";
 //#endregion
 export { e as default };
 

package/dist/assets/selection-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"selection-control.js","names":[],"sources":["../../src/assets/selection-control.css?inline"],"sourcesContent":["/*\n * radio / checkbox 共享外壳。\n *\n * indicator 只有 18px。宿主一旦走 inline-block，页面行高会在宿主内生成匿名行盒，把盒子撑到\n * 行高（Tailwind preflight 下是 24px），且多出的空隙落在哪一侧取决于内部基线落点，radio 与\n * checkbox 因此一个贴顶一个贴底。改成 inline-flex 后宿主高度由内容决定，行高不再参与，\n * 与相邻文字的对齐交给 vertical-align 显式声明。\n */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  cursor: default;\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n/* :where() 保持零特异性，组件级配置（圆角、选中色、内部图形）始终覆盖共享层。 */\n:where(.wui-radio, .wui-checkbox) {\n  cursor: inherit;\n  user-select: none;\n\n  display: inline-flex;\n  gap: 10px;\n  align-items: center;\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1;\n  color: var(--wui-color-text, #1b1b1b);\n\n  &:focus-visible {\n    border-radius: var(--wui-radius-control, calc(infinity * 1px));\n    outline: var(--wui-focus-ring-width, 3px) solid\n      var(--wui-color-focus-ring, color-mix(in srgb, var(--wui-color-accent, #08f) 40%, transparent));\n    outline-offset: 2px;\n  }\n}\n\n/*\n * label 没有可渲染内容时把间距一并收掉。gap 只认「这里有个 flex item」，不认它有没有宽度，所以空槽位\n * 或只挂了一个视觉隐藏的无障碍名时，indicator 右边照样多出这一段；判据见 LabelEmptinessController。\n */\n:where(.wui-radio.is-label-empty, .wui-checkbox.is-label-empty) {\n  gap: 0;\n}\n\n:host([data-wui-pointer-focus]) :where(.wui-radio, .wui-checkbox):focus-visible {\n  outline-color: transparent;\n}\n\n:where(.wui-radio.is-disabled, .wui-checkbox.is-disabled) {\n  cursor: not-allowed;\n  color: var(--wui-color-text-secondary, #6a6a6a);\n  opacity: 0.4;\n}\n\n/*\n * indicator 底色取控件档。surface-raised 在深色下（#2c2c2e）离页面底色（#242628）只有 8 个\n * 亮度点，未选中时几乎看不出有一个圆/方框；surface-control 才是主题里「控件自己的底」\n * 那一档（中性 button 同档），深色比页面高 22 个亮度点，浅色下也从近白的 #f2f2f7 变成可读的 #dfdfdf。\n */\n:where(.wui-radio-circle, .wui-checkbox-box) {\n  isolation: isolate;\n  position: relative;\n\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n\n  width: var(--wui-selection-control-size, 18px);\n  height: var(--wui-selection-control-size, 18px);\n\n  background-color: var(--wui-color-surface-control, #dfdfdf);\n\n  transition: background-color var(--wui-duration-trigger, 160ms) ease;\n}\n\n/*\n * 状态层走覆盖层，不占用 indicator 自己的 background-color：同一个属性没法一半过渡一半即时，\n * 而这里要的是 hover 当帧切换、选中态的 accent 按 --wui-duration-trigger 淡入淡出。\n * z-index: -1 配父级 isolation 把覆盖层夹在控件底与圆点/勾之间，半径跟着 indicator 走。\n */\n:where(.wui-radio-circle, .wui-checkbox-box)::before {\n  content: '';\n\n  position: absolute;\n  z-index: -1;\n  inset: 0;\n\n  border-radius: inherit;\n}\n\n:where(.wui-radio-label, .wui-checkbox-label) {\n  pointer-events: none;\n}\n\n/*\n * 未激活态的 hover 状态层。用半透明色而不是混进控件底：覆盖层本就压在不透明的控件底上，\n * 合成结果与 color-mix(text 6%, surface-control) 一致，深色档同样成立。\n * label 文字带 pointer-events: none，命中落回 label 自身，所以整条触发区（含右侧文字）\n * 的 hover 都会作用到 indicator。hover 只在真正的指针设备上生效，避免触屏留态。\n */\n@media (hover: hover) and (pointer: fine) {\n  :where(.wui-radio, .wui-checkbox):hover:not(.is-disabled, .is-checked)\n    :where(.wui-radio-circle, .wui-checkbox-box)::before {\n    background-color: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"selection-control.js","names":[],"sources":["../../src/assets/selection-control.css?inline"],"sourcesContent":["/*\n * radio / checkbox 共享外壳。\n *\n * indicator 只有 18px。宿主一旦走 inline-block，页面行高会在宿主内生成匿名行盒，把盒子撑到\n * 行高（Tailwind preflight 下是 24px），且多出的空隙落在哪一侧取决于内部基线落点，radio 与\n * checkbox 因此一个贴顶一个贴底。改成 inline-flex 后宿主高度由内容决定，行高不再参与，\n * 与相邻文字的对齐交给 vertical-align 显式声明。\n */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  cursor: default;\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n/* :where() 保持零特异性，组件级配置（圆角、选中色、内部图形）始终覆盖共享层。 */\n:where(.wui-radio, .wui-checkbox) {\n  cursor: inherit;\n  user-select: none;\n\n  display: inline-flex;\n  gap: 10px;\n  align-items: center;\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1;\n  color: var(--wui-color-text, #1b1b1b);\n\n  &:focus-visible {\n    border-radius: var(--wui-radius-control, calc(infinity * 1px));\n    outline: var(--wui-focus-ring-width, 3px) solid\n      var(--wui-color-focus-ring, color-mix(in srgb, var(--wui-color-accent, #0071e3) 40%, transparent));\n    outline-offset: 2px;\n  }\n}\n\n/*\n * label 没有可渲染内容时把间距一并收掉。gap 只认「这里有个 flex item」，不认它有没有宽度，所以空槽位\n * 或只挂了一个视觉隐藏的无障碍名时，indicator 右边照样多出这一段；判据见 LabelEmptinessController。\n */\n:where(.wui-radio.is-label-empty, .wui-checkbox.is-label-empty) {\n  gap: 0;\n}\n\n:host([data-wui-pointer-focus]) :where(.wui-radio, .wui-checkbox):focus-visible {\n  outline-color: transparent;\n}\n\n:where(.wui-radio.is-disabled, .wui-checkbox.is-disabled) {\n  cursor: not-allowed;\n  color: var(--wui-color-text-secondary, #6a6a6a);\n  opacity: 0.4;\n}\n\n/*\n * indicator 底色取控件档。surface-raised 在深色下（#2c2c2e）离页面底色（#242628）只有 8 个\n * 亮度点，未选中时几乎看不出有一个圆/方框；surface-control 才是主题里「控件自己的底」\n * 那一档（中性 button 同档），深色比页面高 22 个亮度点，浅色下也从近白的 #f2f2f7 变成可读的 #dfdfdf。\n */\n:where(.wui-radio-circle, .wui-checkbox-box) {\n  isolation: isolate;\n  position: relative;\n\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n\n  width: var(--wui-selection-control-size, 18px);\n  height: var(--wui-selection-control-size, 18px);\n\n  background-color: var(--wui-color-surface-control, #dfdfdf);\n\n  transition: background-color var(--wui-duration-trigger, 160ms) ease;\n}\n\n/*\n * 状态层走覆盖层，不占用 indicator 自己的 background-color：同一个属性没法一半过渡一半即时，\n * 而这里要的是 hover 当帧切换、选中态的 accent 按 --wui-duration-trigger 淡入淡出。\n * z-index: -1 配父级 isolation 把覆盖层夹在控件底与圆点/勾之间，半径跟着 indicator 走。\n */\n:where(.wui-radio-circle, .wui-checkbox-box)::before {\n  content: '';\n\n  position: absolute;\n  z-index: -1;\n  inset: 0;\n\n  border-radius: inherit;\n}\n\n:where(.wui-radio-label, .wui-checkbox-label) {\n  pointer-events: none;\n}\n\n/*\n * 未激活态的 hover 状态层。用半透明色而不是混进控件底：覆盖层本就压在不透明的控件底上，\n * 合成结果与 color-mix(text 6%, surface-control) 一致，深色档同样成立。\n * label 文字带 pointer-events: none，命中落回交互元素自身，所以整条触发区（含右侧文字）\n * 的 hover 都会作用到 indicator。hover 只在真正的指针设备上生效，避免触屏留态。\n */\n@media (hover: hover) and (pointer: fine) {\n  :where(.wui-radio, .wui-checkbox):hover:not(.is-disabled, .is-checked)\n    :where(.wui-radio-circle, .wui-checkbox-box)::before {\n    background-color: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent);\n  }\n}\n"],"mappings":""}

package/dist/classes/glass.js

@@ -0,0 +1,6 @@
+//#region src/classes/glass.css?inline
+var e = ":where(.wui-glass){position:relative}.wui-glass{--wui-internal-glass-shadow:var(--wui-shadow-glass,0 0 1px #00000005, 0 0 8px #00000008, 0 2px 16px #00000006, 0 8px 32px #00000004);background-color:var(--wui-color-surface-glass,#fafafa57);-webkit-backdrop-filter:blur(var(--wui-glass-blur,4px)) saturate(var(--wui-glass-saturation,160%)) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(var(--wui-glass-blur,4px)) saturate(var(--wui-glass-saturation,160%)) brightness(var(--wui-glass-brightness,1.06));box-shadow:inset 0 0 0 .5px color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 38%, transparent), inset 0 1px .5px color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 52%, transparent), inset 0 -.5px 1px #00000008, var(--wui-internal-glass-shadow,var(--wui-shadow-glass,0 0 1px #00000005, 0 0 8px #00000008, 0 2px 16px #00000006, 0 8px 32px #00000004));background-clip:padding-box;border:none}.wui-glass:before{pointer-events:none;content:\"\";border-radius:inherit;background-color:var(--wui-color-glass-ring,#0000000d);background-image:radial-gradient(var(--wui-glass-corner-radius,32px) at 100% 0, var(--wui-color-glass-ring-shade,#00000008), transparent), radial-gradient(var(--wui-glass-corner-radius,32px) at 0 100%, var(--wui-color-glass-ring-shade,#00000008), transparent), radial-gradient(calc(var(--wui-glass-corner-radius,32px) * 2) at 0 0, var(--wui-color-glass-ring-sheen,#ffffff80), transparent), radial-gradient(calc(var(--wui-glass-corner-radius,32px) * 2) at 100% 100%, var(--wui-color-glass-ring-sheen,#ffffff80), transparent);-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=glass.js.map

package/dist/classes/glass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glass.js","names":[],"sources":["../../src/classes/glass.css?inline"],"sourcesContent":["/* 只在宿主没有其他 position 时补定位，避免盖掉消费方的绝对/固定定位。 */\n:where(.wui-glass) {\n  position: relative;\n}\n\n.wui-glass {\n  /*\n   * 内部阴影变量在 glass 元素上自声明默认值，切断从祖先 glass 容器（drawer/dialog\n   * body 等声明了 overlay 阴影的元素）沿 flattened tree 继承进 slotted 内容的\n   * 通道；各组件在自身元素上的同变量配置（特异性/源顺序恒胜出）不受影响。\n   */\n  --wui-internal-glass-shadow: var(\n    --wui-shadow-glass,\n    0 0 1px rgb(0 0 0 / 0.02),\n    0 0 8px rgb(0 0 0 / 0.03),\n    0 2px 16px rgb(0 0 0 / 0.025),\n    0 8px 32px rgb(0 0 0 / 0.015)\n  );\n\n  border: none;\n\n  background-color: var(--wui-color-surface-glass, rgb(250 250 250 / 0.34));\n  background-clip: padding-box;\n\n  /* Safari 16.4 只支持带 -webkit- 前缀的 backdrop-filter（无前缀 18 才支持）；\n     前缀由 lightningcss 按 ?inline 管线默认 targets（含 ios16.4）自动生成，无需手写。 */\n  backdrop-filter: blur(var(--wui-glass-blur, 4px)) saturate(var(--wui-glass-saturation, 160%))\n    brightness(var(--wui-glass-brightness, 1.06));\n  box-shadow:\n    inset 0 0 0 0.5px color-mix(in srgb, var(--wui-color-glass-highlight, rgb(255 255 255 / 0.9)) 38%, transparent),\n    inset 0 1px 0.5px color-mix(in srgb, var(--wui-color-glass-highlight, rgb(255 255 255 / 0.9)) 52%, transparent),\n    inset 0 -0.5px 1px rgb(0 0 0 / 0.03),\n    var(\n      --wui-internal-glass-shadow,\n      var(\n        --wui-shadow-glass,\n        0 0 1px rgb(0 0 0 / 0.02),\n        0 0 8px rgb(0 0 0 / 0.03),\n        0 2px 16px rgb(0 0 0 / 0.025),\n        0 8px 32px rgb(0 0 0 / 0.015)\n      )\n    );\n}\n\n/*\n * 玻璃描边环：底色铺满整圈，其上叠两枚 sheen→transparent radial 作左上/右下受光\n * 光泽，再叠两枚 shade→transparent radial（置于最上层）压暗右上/左下背光角，形成\n * 对角光影的玻璃立体感。\n *\n * 底色（--wui-color-glass-ring）不是可选项：四枚 radial 全部锚定角点、半径固定\n * （R = --wui-glass-corner-radius，sheen 用 2R、shade 用 R），一条边只有长过约 3R\n * 才有一段落在所有 radial 之外。底色是唯一覆盖那一段的一层，也是圆角弧段（如 pill\n * 的半圆端）不发暗的原因。三枚 token 同属 ring 前缀，因为它们共同描述这一枚环，\n * 而非三个独立效果。\n *\n * 底色字面量取明色值 rgb(0 0 0 / 0.05) 而非 transparent：本文件其余玻璃 token 的\n * fallback 一律等于明色真值（surface-glass / brightness / highlight / sheen / shade），\n * token 缺省时（未挂 <web-ui-theme>，或 theme 未设 appearance —— 颜色 token 只定义在\n * [appearance] 三个选择器下）整套玻璃面就是明色观感，这一层没有理由例外。\n *\n * 渐变半径为 --wui-glass-corner-radius 的固定物理尺寸正圆——视觉覆盖范围不随元素\n * 宽高缩放（百分比方案在大 panel 上暗边过长、小控件上过弱），各组件用与自身\n * border-radius 同源的值覆盖该变量即可联动。\n *\n * 同源的 --wui-color-glass-highlight 不在此层：它是元素自身 box-shadow 的 inset\n * 高光，与本环无关。-webkit-mask-* 旧语法（含 mask-composite:xor）由 lightningcss\n * 按 targets 自动生成，无前缀 mask-composite 留给 Chrome 120+。\n */\n.wui-glass::before {\n  pointer-events: none;\n  content: '';\n\n  position: absolute;\n  inset: 0;\n\n  padding: 1px;\n  border-radius: inherit;\n\n  background-color: var(--wui-color-glass-ring, rgb(0 0 0 / 0.05));\n  background-image:\n    radial-gradient(\n      var(--wui-glass-corner-radius, 32px) at 100% 0,\n      var(--wui-color-glass-ring-shade, rgb(0 0 0 / 0.03)),\n      transparent\n    ),\n    radial-gradient(\n      var(--wui-glass-corner-radius, 32px) at 0 100%,\n      var(--wui-color-glass-ring-shade, rgb(0 0 0 / 0.03)),\n      transparent\n    ),\n    radial-gradient(\n      calc(var(--wui-glass-corner-radius, 32px) * 2) at 0 0,\n      var(--wui-color-glass-ring-sheen, rgb(255 255 255 / 0.5)),\n      transparent\n    ),\n    radial-gradient(\n      calc(var(--wui-glass-corner-radius, 32px) * 2) at 100% 100%,\n      var(--wui-color-glass-ring-sheen, rgb(255 255 255 / 0.5)),\n      transparent\n    );\n\n  mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  mask-composite: exclude;\n}\n"],"mappings":""}

package/dist/classes/glow.js

@@ -0,0 +1,6 @@
+//#region src/classes/glow.css?inline
+var e = ":where(.wui-glow){position:relative}.wui-glow{isolation:isolate}.wui-glow:before,.wui-glow:after{pointer-events:none;content:\"\";z-index:-1;border-radius:inherit;position:absolute;inset:0}.wui-glow:before{background:var(--wui-glow-gradient,linear-gradient(var(--wui-glow-gradient-direction,to bottom), var(--wui-glow-color,var(--wui-color-page,#fff)), transparent))}.wui-glow:after{inset:0 0 calc(-1 * var(--wui-glow-overhang,24px));-webkit-backdrop-filter:blur(var(--wui-glow-blur,4px));backdrop-filter:blur(var(--wui-glow-blur,4px));-webkit-mask-image:linear-gradient(to bottom, black 0, black calc(100% - var(--wui-glow-fade,36px)), transparent 100%);-webkit-mask-image:linear-gradient(to bottom, black 0, black calc(100% - var(--wui-glow-fade,36px)), transparent 100%);mask-image:linear-gradient(to bottom, black 0, black calc(100% - var(--wui-glow-fade,36px)), transparent 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=glow.js.map

package/dist/classes/glow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glow.js","names":[],"sources":["../../src/classes/glow.css?inline"],"sourcesContent":["/*\n * 通用晕染层\n * ==========\n *\n * 给任意有盒子尺寸的容器加一层装饰性背景：::before 画渐变，::after 叠真实模糊\n * （backdrop-filter）。两层都放在 z-index: -1，因此内容与插槽始终位于其上方。\n *\n * 用法是给容器加 `.wui-glow`，并从 `@greypan/web-ui/classes.css` 引入本文件（该文件\n * 同时导出 `.wui-glass`）。组件内部需要同一效果时（如 `header-glow`、collapse peek）\n * 用 `?inline` 引入同一份源码，避免复制规则。\n *\n * 定位与层叠\n * ----------\n * `:where()` 让 position 只做兜底：宿主自己声明了 sticky / absolute / fixed 时一律\n * 让位。`isolation: isolate` 是必要的，否则负层级伪元素会落到更外层 stacking context\n * 的背景之后。容器若有 `overflow: hidden`，向外的模糊尾巴会被裁掉；要保留尾巴就\n * 让 overflow 保持 `visible`。\n *\n * 参数\n * ----\n * 渐变是否出现、颜色与方向都由 token 决定：\n *\n * - `--wui-glow-gradient`：完整 background-image 值；设 `none` 即只保留模糊。\n * - `--wui-glow-gradient-direction`：`linear-gradient` 的方向，默认 `to bottom`。\n * - `--wui-glow-color`：渐变起点色，默认跟随页面底色 `--wui-color-page`。\n * - `--wui-glow-blur`：`backdrop-filter` 的模糊半径，默认 `4px`；设 `0px` 关闭模糊。\n * - `--wui-glow-overhang`：模糊层向盒下探的高度，默认 `24px`。\n * - `--wui-glow-fade`：从全强度到 0 的衰减总长度，默认 `36px`，应不小于 overhang。\n *\n * 盒底缘的 alpha = overhang / fade。旧版对 52px header 是向下外扩 30px、衰减约 45px，\n * 底缘 alpha ≈ 0.67；24 / 36 在同样高度上保持这个强度，盒内曲线与原版基本重合，盒外\n * 只剩 24px 的模糊尾巴。旧版的百分比 mask 会让更高的 header 底缘更淡；新版改用绝对\n * 长度，底缘强度不随容器高度变化。fade 小于 overhang 时，全强度段会延伸到盒外。\n *\n * 端点用裸 `transparent`（即 rgb(0 0 0 / 0)）而不是与起点色做 color-mix：后者按\n * 预乘 alpha 混色会得到完全不透明的原色，终点没有羽化。裸 transparent 在渐变插值\n * 中同样按预乘处理，各引擎一致淡到 0，且不引入新色相。\n */\n:where(.wui-glow) {\n  position: relative;\n}\n\n.wui-glow {\n  isolation: isolate;\n}\n\n.wui-glow::before,\n.wui-glow::after {\n  pointer-events: none;\n  content: '';\n\n  position: absolute;\n  z-index: -1;\n  inset: 0;\n\n  border-radius: inherit;\n}\n\n.wui-glow::before {\n  background: var(\n    --wui-glow-gradient,\n    linear-gradient(\n      var(--wui-glow-gradient-direction, to bottom),\n      var(--wui-glow-color, var(--wui-color-page, #fff)),\n      transparent\n    )\n  );\n}\n\n.wui-glow::after {\n  inset: 0 0 calc(-1 * var(--wui-glow-overhang, 24px));\n\n  backdrop-filter: blur(var(--wui-glow-blur, 4px));\n\n  mask-image: linear-gradient(to bottom, black 0, black calc(100% - var(--wui-glow-fade, 36px)), transparent 100%);\n  mask-repeat: no-repeat;\n  mask-size: 100% 100%;\n}\n"],"mappings":""}

package/dist/classes/style.css

@@ -0,0 +1 @@
+:where(.wui-glass){position:relative}.wui-glass{--wui-internal-glass-shadow:var(--wui-shadow-glass,0 0 1px #00000005, 0 0 8px #00000008, 0 2px 16px #00000006, 0 8px 32px #00000004);background-color:var(--wui-color-surface-glass,#fafafa57);-webkit-backdrop-filter:blur(var(--wui-glass-blur,4px)) saturate(var(--wui-glass-saturation,160%)) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(var(--wui-glass-blur,4px)) saturate(var(--wui-glass-saturation,160%)) brightness(var(--wui-glass-brightness,1.06));box-shadow:inset 0 0 0 .5px color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 38%, transparent), inset 0 1px .5px color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 52%, transparent), inset 0 -.5px 1px #00000008, var(--wui-internal-glass-shadow,var(--wui-shadow-glass,0 0 1px #00000005, 0 0 8px #00000008, 0 2px 16px #00000006, 0 8px 32px #00000004));background-clip:padding-box;border:none}.wui-glass:before{pointer-events:none;content:"";border-radius:inherit;background-color:var(--wui-color-glass-ring,#0000000d);background-image:radial-gradient(var(--wui-glass-corner-radius,32px) at 100% 0, var(--wui-color-glass-ring-shade,#00000008), transparent), radial-gradient(var(--wui-glass-corner-radius,32px) at 0 100%, var(--wui-color-glass-ring-shade,#00000008), transparent), radial-gradient(calc(var(--wui-glass-corner-radius,32px) * 2) at 0 0, var(--wui-color-glass-ring-sheen,#ffffff80), transparent), radial-gradient(calc(var(--wui-glass-corner-radius,32px) * 2) at 100% 100%, var(--wui-color-glass-ring-sheen,#ffffff80), transparent);-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}:where(.wui-glow){position:relative}.wui-glow{isolation:isolate}.wui-glow:before,.wui-glow:after{pointer-events:none;content:"";z-index:-1;border-radius:inherit;position:absolute;inset:0}.wui-glow:before{background:var(--wui-glow-gradient,linear-gradient(var(--wui-glow-gradient-direction,to bottom), var(--wui-glow-color,var(--wui-color-page,#fff)), transparent))}.wui-glow:after{inset:0 0 calc(-1 * var(--wui-glow-overhang,24px));-webkit-backdrop-filter:blur(var(--wui-glow-blur,4px));backdrop-filter:blur(var(--wui-glow-blur,4px));-webkit-mask-image:linear-gradient(to bottom, black 0, black calc(100% - var(--wui-glow-fade,36px)), transparent 100%);-webkit-mask-image:linear-gradient(to bottom, black 0, black calc(100% - var(--wui-glow-fade,36px)), transparent 100%);mask-image:linear-gradient(to bottom, black 0, black calc(100% - var(--wui-glow-fade,36px)), transparent 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

package/dist/components/autocomplete/index.d.ts

@@ -417,6 +417,8 @@ export declare class WebUiAutocomplete extends WebUiAutocomplete_base {
     private _options;
     private _portal?;
     private _portalContent?;
+    private _keyboardNavigationActive;
+    private _scrollInteractionElement?;
     private readonly _scrollLock;
     private readonly _optionPortal;
     private readonly _trigger;
@@ -454,12 +456,17 @@ export declare class WebUiAutocomplete extends WebUiAutocomplete_base {
     private _handleOptionClick;
     private _onOptionUpdate;
     private _handleOptionPointerOver;
+    private _syncScrollInteractionListeners;
+    private _clearKeyboardNavigation;
+    private _handleListPointerMove;
+    private _handleListWheel;
     private _handleOptionPointerDown;
     private _onSlotChange;
     private _onKeydown;
     private _navigateActive;
     private _setInitialActiveOption;
     private _syncActiveOption;
+    private _scrollActiveOptionIntoView;
     private _selectOption;
     private _findExactOption;
     private _hasExactOption;

package/dist/components/autocomplete/index.js

@@ -1,5 +1,5 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
-import t from "../../assets/glass.js";
+import t from "../../classes/glass.js";
 import { FormAssociated as n, FormAssociationController as r, defineFormAssociation as i } from "../../shared/form-association/index.js";
 import { normalizeLiteral as a } from "../../shared/normalize/index.js";
 import "../input/index.js";
@@ -49,7 +49,7 @@ var N = class extends n(x) {
 				typeof e == "string" && (this.value = e);
 			},
 			syncValidity: () => this._syncValidity()
-		}).make(), this._formAssociationController = new r(this, this._formAssociation), this._isOpen = !1, this._activeIndex = -1, this._focused = !1, this._hasTriggerSlot = !1, this._idPrefix = `web-ui-autocomplete-${++k._nextInstanceId}`, this._a11yOptionIds = /* @__PURE__ */ new WeakMap(), this._nextA11yOptionId = 0, this._options = [], this._scrollLock = y().make(), this._optionPortal = m().make({
+		}).make(), this._formAssociationController = new r(this, this._formAssociation), this._isOpen = !1, this._activeIndex = -1, this._focused = !1, this._hasTriggerSlot = !1, this._idPrefix = `web-ui-autocomplete-${++k._nextInstanceId}`, this._a11yOptionIds = /* @__PURE__ */ new WeakMap(), this._nextA11yOptionId = 0, this._options = [], this._keyboardNavigationActive = !1, this._scrollLock = y().make(), this._optionPortal = m().make({
 			element: this,
 			idPrefix: `${this._idPrefix}-option`,
 			getPortal: () => this._portal,
@@ -106,7 +106,11 @@ var N = class extends n(x) {
 		}, this._onOptionUpdate = () => {
 			this._optionPortal.scheduleRefresh();
 		}, this._handleOptionPointerOver = (e) => {
-			e.pointerType !== "touch" && this._isOpen && e.currentTarget instanceof HTMLElement && (this._activeIndex = -1, this._syncActiveOption());
+			e.pointerType !== "touch" && this._isOpen && e.currentTarget instanceof HTMLElement && (this._keyboardNavigationActive || (this._activeIndex = -1, this._syncActiveOption()));
+		}, this._handleListPointerMove = () => {
+			this._isOpen && this._clearKeyboardNavigation();
+		}, this._handleListWheel = () => {
+			this._isOpen && this._clearKeyboardNavigation();
 		}, this._handleOptionPointerDown = (e) => {
 			e.preventDefault();
 		}, this._onSlotChange = () => {
@@ -139,7 +143,7 @@ var N = class extends n(x) {
 				}
 			}
 		}, this._onTriggerInput = (e) => {
-			this._isDisabled || this.readonly || e !== this._value && (this.value = e, this._activeIndex = -1, this._syncActiveOption(), this._open());
+			this._isDisabled || this.readonly || e !== this._value && (this.value = e, this._keyboardNavigationActive = !1, this._activeIndex = -1, this._syncActiveOption(), this._open());
 		}, this._onTriggerClick = () => {
 			this._isDisabled || this.readonly || this._open();
 		}, this._onTriggerFocusIn = (e) => {
@@ -164,13 +168,13 @@ var N = class extends n(x) {
 			openOverlay: (e) => this._openOverlay(e),
 			closeOverlay: () => void this._closeOverlay(),
 			onOpen: (e) => {
-				e ? this._setInitialActiveOption() : this._syncActiveOption();
+				this._keyboardNavigationActive = e, e ? this._setInitialActiveOption() : this._syncActiveOption();
 			},
 			onBeforeClose: () => {
 				this._optionPortal.syncPortalContent();
 			},
 			onAfterClose: () => {
-				this._activeIndex = -1, this._options.forEach((e) => e.removeAttribute("active"));
+				this._keyboardNavigationActive = !1, this._activeIndex = -1, this._options.forEach((e) => e.removeAttribute("active")), this._syncScrollInteractionListeners();
 			}
 		});
 	}
@@ -234,7 +238,7 @@ var N = class extends n(x) {
 		});
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this._optionPortal.dispose(), this._trigger.dispose(), this.removeEventListener("keydown", this._onKeydown), this.removeEventListener("focusout", this._onFocusOut), document.removeEventListener("click", this._onClickOutside), this._options.forEach(this._unbindOption), this._close(), this._portal = void 0, this._portalContent = void 0, this._panel.dispose(), this._scrollLock.release();
+		super.disconnectedCallback(), this._optionPortal.dispose(), this._trigger.dispose(), this.removeEventListener("keydown", this._onKeydown), this.removeEventListener("focusout", this._onFocusOut), document.removeEventListener("click", this._onClickOutside), this._options.forEach(this._unbindOption), this._close(), this._syncScrollInteractionListeners(), this._portal = void 0, this._portalContent = void 0, this._panel.dispose(), this._scrollLock.release();
 	}
 	firstUpdated() {
 		this._trigger.bind(), requestAnimationFrame(() => {
@@ -292,18 +296,34 @@ var N = class extends n(x) {
 		let e = this._options[this._activeIndex], t = this._optionPortal.refresh(this._options, e);
 		this._options = t.options, this._activeIndex = t.activeIndex;
 	}
+	_syncScrollInteractionListeners() {
+		let e = this._isOpen ? this._panel.getPanel()?.querySelector(".autocomplete-scroll") : void 0;
+		e !== this._scrollInteractionElement && (this._scrollInteractionElement?.removeEventListener("pointermove", this._handleListPointerMove), this._scrollInteractionElement?.removeEventListener("wheel", this._handleListWheel), this._scrollInteractionElement = e ?? void 0, this._scrollInteractionElement?.addEventListener("pointermove", this._handleListPointerMove), this._scrollInteractionElement?.addEventListener("wheel", this._handleListWheel));
+	}
+	_clearKeyboardNavigation() {
+		this._keyboardNavigationActive && (this._keyboardNavigationActive = !1, this._activeIndex = -1, this._syncActiveOption());
+	}
 	_navigateActive(e) {
 		let t = this._options.filter((e) => !e.disabled && !e.hasAttribute("data-filtered"));
 		if (!t.length) return;
+		this._keyboardNavigationActive = !0;
 		let n = this._activeIndex >= 0 ? t.indexOf(this._options[this._activeIndex]) : e > 0 ? -1 : 0;
 		this._activeIndex = this._options.indexOf(t[p(t.length, n, e)]), this._syncActiveOption();
 	}
 	_setInitialActiveOption() {
 		let e = this._options.findIndex((e) => !e.disabled && !e.hasAttribute("data-filtered"));
-		this._activeIndex = e, this._syncActiveOption();
+		this._keyboardNavigationActive = !0, this._activeIndex = e, this._syncActiveOption();
 	}
 	_syncActiveOption() {
-		this._options.forEach((e, t) => e.toggleAttribute("active", t === this._activeIndex));
+		this._options.forEach((e, t) => e.toggleAttribute("active", t === this._activeIndex)), this._isOpen && this._scrollActiveOptionIntoView();
+	}
+	_scrollActiveOptionIntoView() {
+		let e = this._options[this._activeIndex], t = this._panel.getPanel()?.querySelector(".autocomplete-scroll");
+		if (!e || !t?.clientHeight) return;
+		let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = t.offsetHeight ? r.height / t.offsetHeight : 1;
+		if (!i) return;
+		let a = r.top + t.clientTop * i, o = a + t.clientHeight * i;
+		n.top < a ? t.scrollTop -= (a - n.top) / i : n.bottom > o && (t.scrollTop += (n.bottom - o) / i);
 	}
 	_selectOption(e) {
 		this.readonly || (this.value = e.label, this._setSelectedValue(e.value), this._close(), this.dispatchEvent(new Event("input", {
@@ -352,13 +372,13 @@ var N = class extends n(x) {
 		c(this, this._isOpen);
 	}
 	_openOverlay(e = !1) {
-		this._panel.open(e), this._syncOverlayInert();
+		this._panel.open(e), this._syncScrollInteractionListeners(), this._syncActiveOption(), this._syncOverlayInert();
 	}
 	async _closeOverlay() {
-		await this._panel.close(() => this._isOpen) && (this._portal = void 0, this._portalContent = void 0);
+		await this._panel.close(() => this._isOpen) && (this._syncScrollInteractionListeners(), this._portal = void 0, this._portalContent = void 0);
 	}
 	_reconfigureOverlay() {
-		this._portal = void 0, this._portalContent = void 0, this._panel.reconfigure(this._isOpen), this._syncOverlayInert();
+		this._portal = void 0, this._portalContent = void 0, this._panel.reconfigure(this._isOpen), this._syncScrollInteractionListeners(), this._syncOverlayInert();
 	}
 	_syncScrollLock(e = this._isOpen) {
 		this._scrollLock.sync(e && !this.noScrollLock);
@@ -367,7 +387,7 @@ var N = class extends n(x) {
 		let e = v().make({
 			container: this.overlayContainer,
 			target: this,
-			style: `${t}\n${o}\n${b}`,
+			style: `${t}\n${o}\n${s}\n${b}`,
 			className: "wui-glass autocomplete-overlay portal wui-floating-panel",
 			onContentChange: () => {
 				this._optionPortal.scheduleRefresh();