@greypan/web-ui 10.2.0 → 11.0.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,14 @@ 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 同一机制。
 
 ## Vite
 
@@ -137,7 +137,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 +163,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 +180,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 +197,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 +224,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 +254,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 +263,7 @@ ARIA 属性同样必须显式支持：使用组件文档化的命名属性，而
 ### Cursor 行为
 
 交互控件使用原生箭头光标，而不是手型光标；disabled 控件使用 `not-allowed`。Slider、Switch 和 Segmented 在
-hover 与按压反馈阶段保持箭头光标，仅在真实拖拽进行中切换为 `grabbing`。专用拖拽把手和 resize 控件保留各自
+hover 与按压反馈阶段保持箭头光标，仅在真实拖拽进行中切换为 `grabbing`。专用拖拽 drag bar 和 resize 控件保留各自
 的专用光标。Cursor 样式位于 Shadow DOM 内，应用层普通选择器无法覆盖。
 
 ### 受控状态语义
@@ -278,7 +278,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 +287,7 @@ dropdown、tooltip）不需要它。
 （`el.checked = true`）覆盖内部状态。这与原生 `<input type="checkbox">` 一致——**没有 `controlled` prop 是因为
 值总是可读可写**，React/Vue 层自备受控包装。
 
-若翻转的持久化需要外部往返（例如开关应只有 API 调用成功后保持开启），使用**乐观更新**路径：
+若翻转的持久化需要外部往返（例如 switch 应只有 API 调用成功后保持开启），使用**乐观更新**路径：
 
 - 立即翻转，然后监听 `change`。
 - 请求期间设 `loading`，阻断后续交互并显示 spinner。
@@ -303,46 +303,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

@@ -339,46 +339,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/glass.js.map

@@ -1 +1 @@
-{"version":3,"file":"glass.js","names":[],"sources":["../../src/assets/glass.css?inline"],"sourcesContent":[".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  position: relative;\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(4px) saturate(160%) 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 * 宽高缩放（百分比方案在大面板上暗边过长、小控件上过弱），各组件用与自身\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":""}
+{"version":3,"file":"glass.js","names":[],"sources":["../../src/assets/glass.css?inline"],"sourcesContent":[".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  position: relative;\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(4px) saturate(160%) 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/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.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(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":""}

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, #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":""}

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

@@ -369,15 +369,15 @@ declare const WebUiAutocomplete_base: {
 /**
  * `web-ui-autocomplete`：可输入并过滤候选的单值选择器。
  *
- * 与 `web-ui-select` 共用 `<web-ui-option>` 子项注册协议与浮层能力，但触发区是
- * 可编辑输入框：`value` 即当前输入文本（表单值），键入时按 `filter` 模式过滤候选，
+ * 与 `web-ui-select` 共用 `<web-ui-option>` 子项注册协议与 overlay 能力，但触发区是
+ * 可编辑 input：`value` 即当前输入文本（表单值），键入时按 `filter` 模式过滤候选，
  * 选择 option 时文本回填为该项 label，`selected-value` 暴露该项的 value。
  * `allow-custom-value` 开启后，Enter 可把不匹配候选的原文作为 custom value 显式提交。
  *
- * 触发器跟随 select 的 wrapper div 模式：`slot[name="trigger"]` 可替换默认触发器
- * （shadow 内的 `web-ui-input`）；多行触发器（如 `web-ui-textarea`）保留 Enter 换行语义，
- * 关闭面板用 Escape 或 blur。
- * tab 位只属于触发器自身：默认触发器是 shadow 内 input，自定义触发器由消费者提供
+ * trigger 跟随 select 的 wrapper div 模式：`slot[name="trigger"]` 可替换默认 trigger
+ * （shadow 内的 `web-ui-input`）；多行 trigger（如 `web-ui-textarea`）保留 Enter 换行语义，
+ * 关闭 panel 用 Escape 或 blur。
+ * tab 位只属于 trigger 自身：默认 trigger 是 shadow 内 input，自定义 trigger 由消费者提供
  * 可聚焦元素（README 契约）；包装 div 恒为 tabindex="-1"，不占顺序焦点，避免双 tab 位。
  */
 export declare class WebUiAutocomplete extends WebUiAutocomplete_base {

package/dist/components/autocomplete/index.js

@@ -252,7 +252,7 @@ var N = class extends n(x) {
 	}
 	_syncValidity() {
 		let e = this._formAssociation.getInternals();
-		e && typeof e.setValidity == "function" && (this._isDisabled || this.readonly || !this.required || this._value ? e.setValidity({}) : e.setValidity({ valueMissing: !0 }, "请输入内容"));
+		e && typeof e.setValidity == "function" && (this._isDisabled || this.readonly || !this.required || this._value ? e.setValidity({}) : e.setValidity({ valueMissing: !0 }, "Enter a value"));
 	}
 	_syncOpenAttribute() {
 		this.toggleAttribute("open", this._isOpen);