@greypan/web-ui 10.2.1 → 11.1.0

package/README.CN.md

@@ -25,17 +25,17 @@ import '@greypan/web-ui'
 // import '@greypan/web-ui/components/button'
 ```
 
-subpath 导入只注册它点名的那个组件，页面用到的每个标签都要单独导入。
+subpath 导入只注册它点名的那个组件，页面用到的每个 tag 都要单独导入。
 
 ```html
 <web-ui-button variant="primary">点击我</web-ui-button> <web-ui-icon .icon="${lucidePlus}"></web-ui-icon>
 ```
 
-## 滚动条
+## scrollbar
 
 `@greypan/web-ui/scrollbars` 承载全仓统一的 [OverlayScrollbars](https://github.com/KingSora/OverlayScrollbars)
-滚动条行为：对齐 macOS 的主题、滚动时出现并自动隐去、点击轨道滚动到该位置。样式表每份文档导入一次，
-选项传给所用的适配包。
+scrollbar 行为：对齐 macOS 的主题、滚动时出现并自动隐去、点击 track 滚动到该位置。样式表每份文档导入一次，
+option 传给所用的适配包。
 
 ```js
 import '@greypan/web-ui/scrollbars.css'
@@ -51,14 +51,78 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue' // 或 overla
   靠它维持可滚动。
 - 目标必须是「纯粹的滚动容器」。OverlayScrollbars 会把宿主变成 flex 行、把子节点搬进它生成的 viewport，
   所以宿主自身的布局一旦承重（grid、居中盒子、`ul`/`ol`）就会坏。
-- OverlayScrollbars 只改变它被初始化到的那个元素，子元素保持原生滚动条。要覆盖文档滚动条就初始化
+- OverlayScrollbars 只改变它被初始化到的那个元素，子元素保持原生 scrollbar。要覆盖文档 scrollbar 就初始化
   `document.body`——在那里 `window.scrollY` / `window.scrollTo` 保持原生语义。
-- 自带滚动容器的组件（`select`、`autocomplete`、dropdown / context-menu 面板、`dialog`、`drawer`、
-  `toast`）在各自的 shadow root 内给**组件内部**滚动条上主题。OverlayScrollbars 进不了 shadow
-  root——它的结构样式与主题类都是文档级选择器——所以组件改为在原生滚动条上读同一组继承的
+- 自带滚动容器的组件（`select`、`autocomplete`、dropdown / context-menu panel、`dialog`、`drawer`、
+  `toast`）在各自的 shadow root 内给**组件内部**scrollbar 上主题。OverlayScrollbars 进不了 shadow
+  root——它的结构样式与主题类都是文档级选择器——所以组件改为在原生 scrollbar 上读同一组继承的
   `--wui-scrollbar-*` 颜色（`scrollbar-color` / `scrollbar-width`），并刻意不用 `::-webkit-scrollbar`：
-  声明它会让引擎放弃平台的覆盖式滚动条、固定占一条布局宽度，而组件内部滚动条正是不能占宽度。
-  导入本样式表，组件内部滚动条才会跟随外观，与整页滚动条同一机制。
+  声明它会让引擎放弃平台的覆盖式 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
 
@@ -137,7 +201,7 @@ function App() {
   return (
     <>
       <web-ui-button variant="primary" onClick={() => alert('点击')}>
-        按钮
+        button
       </web-ui-button>
       <web-ui-input onInput={e => console.log(e.currentTarget.value)} />
     </>
@@ -163,7 +227,7 @@ React 19 按 JSX 键名中的 `on` 后缀原样注册 Custom Element 事件。
 <web-ui-select value={value} onChange={event => setValue(event.currentTarget.value)} />
 ```
 
-当组件会把子元素移入自身的 Portal Shadow DOM（例如 `web-ui-dropdown` 的菜单项）时，React 根节点的
+当组件会把子元素移入自身的 Portal Shadow DOM（例如 `web-ui-dropdown` 的 menu item）时，React 根节点的
 合成 `onClick` 无法收到该子元素的事件。需要通过 `ref` 直接绑定原生事件：
 
 ```tsx
@@ -180,11 +244,11 @@ useEffect(() => {
 <web-ui-dropdown-item ref={itemRef}>粘贴并关闭</web-ui-dropdown-item>
 ```
 
-在 `portal` 模式下，库会把面板内容物理移入浮层 Shadow DOM：
+在 `portal` 模式下，库会把 panel 内容物理移入 overlay Shadow DOM：
 
-- React 按记录的插入父节点执行删除，因此裸条件子元素（`{condition && <el/>}`）的节点一旦已迁移，在面板打开期间无法删除：commit 失败，且该节点可能在面板关闭时重新出现。
-- 请改为在稳定的包装元素内部做条件渲染——React 记录的插入父节点是包装元素，包装元素内部的增删在面板打开期间与开合周期内都保持可用（示例如下）。
-- 面板打开期间的裸条件新增（向宿主追加内容）不受影响，会自动迁入面板。
+- React 按记录的插入父节点执行删除，因此裸条件子元素（`{condition && <el/>}`）的节点一旦已迁移，在 panel 打开期间无法删除：commit 失败，且该节点可能在 panel 关闭时重新出现。
+- 请改为在稳定的包装元素内部做条件渲染——React 记录的插入父节点是包装元素，包装元素内部的增删在 panel 打开期间与开合周期内都保持可用（示例如下）。
+- panel 打开期间的裸条件新增（向宿主追加内容）不受影响，会自动迁入 panel。
 - 保持内容始终挂载、仅切换可见性仍是有效的回退方案。
 
 ```tsx
@@ -197,11 +261,11 @@ useEffect(() => {
 
 需要 `vue >= 3.5` 作为可选 peer 依赖。
 
-Portal 面板支持实时渲染：浮层打开期间条件新增或删除的内容（`web-ui-select`、`web-ui-autocomplete`、
+Portal panel 支持实时渲染：overlay 打开期间条件新增或删除的内容（`web-ui-select`、`web-ui-autocomplete`、
 `web-ui-popover`、`web-ui-tooltip`、`web-ui-dropdown`、`web-ui-context-menu` 内的 Vue `v-if`）会按模板序
-自动迁入打开中的面板；关闭时所有内容按原锚点位置恢复，后续 patch 继续正常工作。边界：面板打开期间对
-keyed `v-for` 列表做中段 splice 或重排不受支持——Vue 的 keyed children diff 会以已迁入面板的兄弟节点
-计算插入锚点，patch 失败且可能丢项；与编译路径无关（编译模板同样命中）。此类列表更新请在面板关闭后
+自动迁入打开中的 panel；关闭时所有内容按原锚点位置恢复，后续 patch 继续正常工作。边界：panel 打开期间对
+keyed `v-for` 列表做中段 splice 或重排不受支持——Vue 的 keyed children diff 会以已迁入 panel 的兄弟节点
+计算插入锚点，patch 失败且可能丢项；与编译路径无关（编译模板同样命中）。此类列表更新请在 panel 关闭后
 进行，或只做尾部追加/删除。
 
 ```ts
@@ -224,7 +288,7 @@ import '@greypan/web-ui/types/vue'
 
 ```vue
 <template>
-  <web-ui-button variant="primary" @click="handleClick">按钮</web-ui-button>
+  <web-ui-button variant="primary" @click="handleClick">button</web-ui-button>
   <web-ui-input v-model="value" />
   <web-ui-select :value="framework" @change="framework = $event.target.value" />
 </template>
@@ -254,7 +318,7 @@ Vue 事件类型零 cast：带值组件上的 `@input`/`@change` 解析到组件
 
 `web-ui-*` 元素是公开 DOM 边界。`id`、`class`、`style`、全局 HTML 属性和 `data-*` 保留在 Custom Element 宿主上，
 不会复制到 Shadow DOM。只有组件文档明确声明语义映射时，原生元素属性才会传递。例如 `web-ui-button` 会把 `type`
-映射到内部按钮，且仅接受 `button`、`submit`、`reset`；非法值会回退为 `button`。
+映射到内部 button，且仅接受 `button`、`submit`、`reset`；非法值会回退为 `button`。
 
 ARIA 属性同样必须显式支持：使用组件文档化的命名属性，而不是通配 `aria-*` 透传。组件拥有自己的 role 和交互状态。
 `click`、`input`、`change` 等浏览器 composed 原生事件仍是主要交互 API。`open-change` 等 kebab-case 自定义事件
@@ -263,7 +327,7 @@ ARIA 属性同样必须显式支持：使用组件文档化的命名属性，而
 ### Cursor 行为
 
 交互控件使用原生箭头光标，而不是手型光标；disabled 控件使用 `not-allowed`。Slider、Switch 和 Segmented 在
-hover 与按压反馈阶段保持箭头光标，仅在真实拖拽进行中切换为 `grabbing`。专用拖拽把手和 resize 控件保留各自
+hover 与按压反馈阶段保持箭头光标，仅在真实拖拽进行中切换为 `grabbing`。专用拖拽 drag bar 和 resize 控件保留各自
 的专用光标。Cursor 样式位于 Shadow DOM 内，应用层普通选择器无法覆盖。
 
 ### 受控状态语义
@@ -278,7 +342,7 @@ hover 与按压反馈阶段保持箭头光标，仅在真实拖拽进行中切
 
 **请求-写回模式（仅 dialog 与 drawer 的 `controlled`）。**
 `controlled=true` 时，用户关闭操作（Escape、backdrop、内置关闭、拖拽释放）只*请求* `open=false`；组件不改自己的
-状态，保持打开，直到Consumer写回 `open=false`。这是模态确认语义——关对话框/抽屉通常是需要Consumer批准的操作（未保存
+状态，保持打开，直到Consumer写回 `open=false`。这是模态确认语义——关 dialog/drawer 通常是需要Consumer批准的操作（未保存
 表单、需确认），与即时开合不同，不能由组件自行提交。只有这两个模态组件使用该模式；即时开合家族（collapse、popover、
 dropdown、tooltip）不需要它。
 
@@ -287,7 +351,7 @@ dropdown、tooltip）不需要它。
 （`el.checked = true`）覆盖内部状态。这与原生 `<input type="checkbox">` 一致——**没有 `controlled` prop 是因为
 值总是可读可写**，React/Vue 层自备受控包装。
 
-若翻转的持久化需要外部往返（例如开关应只有 API 调用成功后保持开启），使用**乐观更新**路径：
+若翻转的持久化需要外部往返（例如 switch 应只有 API 调用成功后保持开启），使用**乐观更新**路径：
 
 - 立即翻转，然后监听 `change`。
 - 请求期间设 `loading`，阻断后续交互并显示 spinner。
@@ -303,46 +367,46 @@ 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)             |
-| **按钮**              | [`<web-ui-button>`](docs/button.md)                       |
-|                       | [`<web-ui-button-group>`](docs/button-group.md)           |
-| **浮层 / 模态**       | [`<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)           |
-| **菜单**              | [`<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) |
+每个组件都有自己的文档页，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) |

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
@@ -339,46 +408,46 @@ All form controls participate in native `FormData`, constraint validation, `form
 
 ## All Components
 
-Every component has its own doc page: API reference, behavior notes and interactive examples all live under [`docs/`](docs/). The table below is just the index.
-
-| Category               | Component                                                 |
-| ---------------------- | --------------------------------------------------------- |
-| **Form Controls**      | [`<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)             |
-| **Buttons**            | [`<web-ui-button>`](docs/button.md)                       |
-|                        | [`<web-ui-button-group>`](docs/button-group.md)           |
-| **Overlay / Modal**    | [`<web-ui-dialog>`](docs/dialog.md)                       |
-|                        | [`<web-ui-drawer>`](docs/drawer.md)                       |
-|                        | [`imagePreview()`](docs/image-preview.md)                 |
-| **In-flow Disclosure** | [`<web-ui-collapse>`](docs/collapse.md)                   |
-| **Floating**           | [`<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)     |
-| **Data Display**       | [`<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)                     |
-| **Layout & Utility**   | [`<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)                         |
-| **Notification**       | [`<web-ui-toast>`](docs/toast.md)                         |
-| **Sub-items**          | [`<web-ui-option>`](docs/option.md)                       |
-|                        | [`<web-ui-segmented-trigger>`](docs/segmented-trigger.md) |
+Every component has its own doc page: API reference, behavior notes and interactive examples all live under [`docs/`](./docs/). The table below is just the index.
+
+| Category               | Component                                                   |
+| ---------------------- | ----------------------------------------------------------- |
+| **Form Controls**      | [`<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)             |
+| **Buttons**            | [`<web-ui-button>`](./docs/button.md)                       |
+|                        | [`<web-ui-button-group>`](./docs/button-group.md)           |
+| **Overlay / Modal**    | [`<web-ui-dialog>`](./docs/dialog.md)                       |
+|                        | [`<web-ui-drawer>`](./docs/drawer.md)                       |
+|                        | [`imagePreview()`](./docs/image-preview.md)                 |
+| **In-flow Disclosure** | [`<web-ui-collapse>`](./docs/collapse.md)                   |
+| **Floating**           | [`<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)     |
+| **Data Display**       | [`<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)                     |
+| **Layout & Utility**   | [`<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)                         |
+| **Notification**       | [`<web-ui-toast>`](./docs/toast.md)                         |
+| **Sub-items**          | [`<web-ui-option>`](./docs/option.md)                       |
+|                        | [`<web-ui-segmented-trigger>`](./docs/segmented-trigger.md) |

package/dist/assets/menu-portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-portal.js","names":[],"sources":["../../src/assets/menu-portal.css?inline"],"sourcesContent":["/* 菜单面板：wui-glass 玻璃（背景/描边/阴影）由面板自身承担，随面板 opacity 与\n   backdrop-filter 插值一起过渡（单层玻璃，见 overlay-motion.css）。\n   选择器用 .wui-menu-portal-overlay.wui-floating-panel（0,2,0）压制 .wui-glass\n   （0,1,0）：面板无自有 shadow root，直接挂在宿主 shadow（overlay root 的 \\3c style>\n   或 dialog 的 adopted stylesheets）里，若只用单类选择器，dialog 场景下宿主 adopted\n   stylesheets 的 .wui-glass 会在层叠中晚于面板内联 \\3c style> 而胜出（position:relative\n   顶掉 fixed、背景/阴影变量回弱默认）。 */\n.wui-menu-portal-overlay.wui-floating-panel {\n  --wui-internal-glass-shadow: var(--wui-shadow-panel, 0 3px 9px rgb(0 0 0 / 0.27));\n  --wui-internal-duration-float-enter: var(--wui-duration-float-enter, 240ms);\n  --wui-internal-duration-float-exit: var(--wui-duration-float-exit, 160ms);\n  --wui-glass-corner-radius: var(--wui-radius-menu, 18px);\n\n  /* 菜单族面板把环底色转 transparent。底色是环里唯一覆盖长边中段的一层（见 glass.css\n     的说明），而菜单面板宽远大于角半径 18px——按几何它只负责很短的一段，读出来却像\n     一条比四角更重的直边描边，边界感比四角强。转 transparent 后环只剩四段角弧，\n     斜向受光/背光光影（sheen + shade 的两枚对角 radial）完整保留，边界改由这两层\n     承担。handle 类玻璃面（switch/slider/segmented thumb）只在按压/拖拽态做同样处理：\n     它们的短边半径就是 thumb 尺寸的一半，长边长不过 3R，底色几乎不覆盖任何中段，\n     去掉它只去掉一层均匀灰 tint，不改变环的可见形状。 */\n  --wui-color-glass-ring: transparent;\n  user-select: none;\n\n  position: fixed;\n  z-index: var(--wui-layer-menu, 100);\n\n  overflow: hidden;\n\n  box-sizing: border-box;\n  min-width: var(--wui-overlay-min-width, 200px);\n  max-width: 90vw;\n  max-height: 80vh;\n  border-radius: var(--wui-radius-menu, 18px);\n\n  color: var(--wui-color-text, #1b1b1b);\n\n  /* 玻璃背景：面板自身 overflow:hidden 不裁自身的 box-shadow（box-shadow 不受\n     元素自身 overflow 影响）。 */\n  background-color: var(--wui-color-surface-menu, rgb(250 250 250 / 0.76));\n\n  & .wui-menu-scroll {\n    overflow-y: auto;\n    max-height: 80vh;\n  }\n\n  & .wui-menu-content {\n    padding: var(--wui-space-1, 4px);\n  }\n\n  &.dropdown-overlay {\n    & .wui-menu-scroll {\n      max-height: 320px;\n    }\n\n    &[data-level]:not([data-level='0']) {\n      z-index: var(--wui-layer-menu-nested, 110);\n    }\n  }\n\n  &.context-submenu {\n    z-index: var(--wui-layer-menu-nested, 110);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"menu-portal.js","names":[],"sources":["../../src/assets/menu-portal.css?inline"],"sourcesContent":["/* menu panel：wui-glass 玻璃（背景/描边/阴影）由 panel 自身承担，随 panel opacity 与\n   backdrop-filter 插值一起过渡（单层玻璃，见 overlay-motion.css）。\n   选择器用 .wui-menu-portal-overlay.wui-floating-panel（0,2,0）压制 .wui-glass\n   （0,1,0）：panel 无自有 shadow root，直接挂在宿主 shadow（overlay root 的 \\3c style>\n   或 dialog 的 adopted stylesheets）里，若只用单类选择器，dialog 场景下宿主 adopted\n   stylesheets 的 .wui-glass 会在层叠中晚于 panel 内联 \\3c style> 而胜出（position:relative\n   顶掉 fixed、背景/阴影变量回弱默认）。 */\n.wui-menu-portal-overlay.wui-floating-panel {\n  --wui-internal-glass-shadow: var(--wui-shadow-panel, 0 3px 9px rgb(0 0 0 / 0.27));\n  --wui-internal-duration-float-enter: var(--wui-duration-float-enter, 240ms);\n  --wui-internal-duration-float-exit: var(--wui-duration-float-exit, 160ms);\n  --wui-glass-corner-radius: var(--wui-radius-menu, 18px);\n\n  /* menu 族 panel 把环底色转 transparent。底色是环里唯一覆盖长边中段的一层（见 glass.css\n     的说明），而 menu panel 宽远大于角半径 18px——按几何它只负责很短的一段，读出来却像\n     一条比四角更重的直边描边，边界感比四角强。转 transparent 后环只剩四段角弧，\n     斜向受光/背光光影（sheen + shade 的两枚对角 radial）完整保留，边界改由这两层\n     承担。handle 类玻璃面（switch/slider/segmented thumb）只在按压/拖拽态做同样处理：\n     它们的短边半径就是 thumb 尺寸的一半，长边长不过 3R，底色几乎不覆盖任何中段，\n     去掉它只去掉一层均匀灰 tint，不改变环的可见形状。 */\n  --wui-color-glass-ring: transparent;\n  user-select: none;\n\n  position: fixed;\n  z-index: var(--wui-layer-menu, 100);\n\n  overflow: hidden;\n\n  box-sizing: border-box;\n  min-width: var(--wui-overlay-min-width, 200px);\n  max-width: 90vw;\n  max-height: 80vh;\n  border-radius: var(--wui-radius-menu, 18px);\n\n  color: var(--wui-color-text, #1b1b1b);\n\n  /* 玻璃背景：panel 自身 overflow:hidden 不裁自身的 box-shadow（box-shadow 不受\n     元素自身 overflow 影响）。 */\n  background-color: var(--wui-color-surface-menu, rgb(250 250 250 / 0.76));\n\n  & .wui-menu-scroll {\n    overflow-y: auto;\n    max-height: 80vh;\n  }\n\n  & .wui-menu-content {\n    padding: var(--wui-space-1, 4px);\n  }\n\n  &.dropdown-overlay {\n    & .wui-menu-scroll {\n      max-height: 320px;\n    }\n\n    &[data-level]:not([data-level='0']) {\n      z-index: var(--wui-layer-menu-nested, 110);\n    }\n  }\n\n  &.context-submenu {\n    z-index: var(--wui-layer-menu-nested, 110);\n  }\n}\n"],"mappings":""}

package/dist/assets/modal-surface.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-surface.js","names":[],"sources":["../../src/assets/modal-surface.css?inline"],"sourcesContent":["/*\n * 模态表面（dialog / drawer / image-preview 的 <dialog> 面板）的焦点环策略，集中一处。\n *\n * 1. `<dialog>` 壳不是可聚焦控件：面板里没有更优候选时，`showModal()` 会把焦点交给\n *    dialog 本身，UA 会为它画一枚默认 ring。它是模态表面，内部控件各自保留 focus ring。\n *\n * 2. 面板的滚动区（`.desc` / `.wui-dialog-content` / `.wui-drawer-content`）同样不是\n *    可聚焦控件。Chromium 会把「可滚动的滚动容器」变成键盘可聚焦项\n *    （keyboard-focusable scrollers），于是 dialog 的 focusing steps 会选中面板滚动区，\n *    UA 为它画一枚默认蓝环（`outline: auto` + `-webkit-focus-ring-color`）。这一枚环\n *    与库的统一 ring（`outline: var(--wui-focus-ring-width) solid var(--wui-color-focus-ring)`）\n *    形态/颜色都不一致，是「dialog / drawer 打开后卡片上多出一圈蓝框」的来源：滚动区若是\n *    铺满卡片的（body 模式）且卡片自带 `overflow: hidden` + 圆角，这枚直角的 UA 环会被\n *    卡片裁成圆角矩形，看起来正贴着卡片外缘。\n *\n * 逐组件各抄一份正是「新增一个基于 `<dialog>` 的组件就漏掉抑制规则」的成因；新组件把本\n * 文件加进 `static styles` 即可。文档级 scrim（context-menu）不在这条链上——它自己注入\n * 样式表，按同样策略在 `scrim.css` 里就地收口。\n */\ndialog:focus,\ndialog:focus-visible,\ndialog :where(.desc, .wui-dialog-content, .wui-drawer-content):focus-visible {\n  outline: none;\n}\n"],"mappings":""}
+{"version":3,"file":"modal-surface.js","names":[],"sources":["../../src/assets/modal-surface.css?inline"],"sourcesContent":["/*\n * 模态表面（dialog / drawer / image-preview 的 <dialog> panel）的焦点环策略，集中一处。\n *\n * 1. `<dialog>` 壳不是可聚焦控件：panel 里没有更优候选时，`showModal()` 会把焦点交给\n *    dialog 本身，UA 会为它画一枚默认 ring。它是模态表面，内部控件各自保留 focus ring。\n *\n * 2. panel 的滚动区（`.desc` / `.wui-dialog-content` / `.wui-drawer-content`）同样不是\n *    可聚焦控件。Chromium 会把「可滚动的滚动容器」变成键盘可聚焦项\n *    （keyboard-focusable scrollers），于是 dialog 的 focusing steps 会选中 panel 滚动区，\n *    UA 为它画一枚默认蓝环（`outline: auto` + `-webkit-focus-ring-color`）。这一枚环\n *    与库的统一 ring（`outline: var(--wui-focus-ring-width) solid var(--wui-color-focus-ring)`）\n *    形态/颜色都不一致，是「dialog / drawer 打开后卡片上多出一圈蓝框」的来源：滚动区若是\n *    铺满卡片的（body 模式）且卡片自带 `overflow: hidden` + 圆角，这枚直角的 UA 环会被\n *    卡片裁成圆角矩形，看起来正贴着卡片外缘。\n *\n * 逐组件各抄一份正是「新增一个基于 `<dialog>` 的组件就漏掉抑制规则」的成因；新组件把本\n * 文件加进 `static styles` 即可。文档级 scrim（context-menu）不在这条链上——它自己注入\n * 样式表，按同样策略在 `scrim.css` 里就地收口。\n */\ndialog:focus,\ndialog:focus-visible,\ndialog :where(.desc, .wui-dialog-content, .wui-drawer-content):focus-visible {\n  outline: none;\n}\n"],"mappings":""}

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 * 浮层面板共享动效（单层玻璃）。\n *\n * backdrop-filter 的 blur(0px) ↔ blur(4px) 在 Chrome/Safari 均平滑插值（Manager\n * 双引擎实测，Safari 逐帧采样 blur 值连续），当年「生硬跳变」的根因是 none↔blur\n * 不可插值，而不是 backdrop-filter 不可动画。因此面板自身直接承担玻璃：背景、\n * 阴影与 backdrop-filter 都在面板元素上（wui-glass 类也回面板），打开/关闭时\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  /* 玻璃由面板自身承担（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% 进度，锚定面板的展开\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 * 指示器只有 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 * 标签没有可渲染内容时把间距一并收掉。gap 只认「这里有个 flex item」，不认它有没有宽度，所以空槽位\n * 或只挂了一个视觉隐藏的无障碍名时，指示器右边照样多出这一段；判据见 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 * 指示器底色取控件档。surface-raised 在深色下（#2c2c2e）离页面底色（#242628）只有 8 个\n * 亮度点，未选中时几乎看不出有一个圆/方框；surface-control 才是主题里「控件自己的底」\n * 那一档（中性按钮同档），深色比页面高 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 * 状态层走覆盖层，不占用指示器自己的 background-color：同一个属性没法一半过渡一半即时，\n * 而这里要的是 hover 当帧切换、选中态的 accent 按 --wui-duration-trigger 淡入淡出。\n * z-index: -1 配父级 isolation 把覆盖层夹在控件底与圆点/勾之间，半径跟着指示器走。\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 * 标签文字带 pointer-events: none，命中落回 label 自身，所以整条触发区（含右侧文字）\n * 的 hover 都会作用到指示器。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