@manohub/ui 1.0.4 → 1.0.5

package/dist/styles/components/toast.tokens.css

@@ -3,16 +3,11 @@
  *
  * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
  *
- * ## 抽出说明
- * 本文件从面文件里抽出（原先混写在 `toast.css` 顶部）：这些是**基础值**，锚在
- * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
- * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
- * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
  *
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
- * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
- * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
- */
+ * 令牌锚 `[data-manohub-ui]`（容器是每个分件的祖先 ⇒ 落在容器里的分件都取得到值）。
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里（搬走会让档位失效）；
+ * 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+*/
 [data-manohub-ui] {
   /* 单件令牌 */
   --ui-toast-width: 240px;
@@ -21,6 +16,8 @@
   --ui-toast-radius: var(--ui-radius-md); /* 规范 r8 */
   --ui-toast-border: var(--ui-base-300); /* 规范 #d8dce6 */
   --ui-toast-gap: var(--ui-space-3); /* 图标与文字间距 12 */
+  /* 四边内距（规范 10 / 16 / 10 / 24：左宽一档是给图标位留的）—— 一枚令牌即整个简写 */
+  --ui-toast-padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-3) var(--ui-space-6);
   --ui-toast-icon-size: 18px;
   --ui-toast-text-size: 15px; /* 规范实测（本仓字阶无 15，按实测值给） */
 }

package/dist/styles/components/tooltip.css

@@ -1,19 +1,17 @@
 /**
  * Tooltip —— 提示气泡皮肤（与操作层并列组合）。
  *
- * 出处：`@aihub/theme` 的 `playground/components/tooltip.css` 与 `src/components/tooltip.css`
- * （内距 8 / 14、圆角 10、深底反白字、`0 2 8` 黑 15% 投影；引导档另有一套面：蓝渐变底 + 12/14 内距 +
- *  `0 2 14` 投影；标题 medium；动作是白色文本按钮；显隐纯淡入、不位移不缩放）。
+ * 出处：规范（内距 8 / 14、圆角 10、深底反白字、`0 2 8` 黑 15% 投影；引导档另有一套面：蓝渐变底 +
+ * 12/14 内距 + `0 2 14` 投影；标题 medium；动作是白色文本按钮；显隐纯淡入、不位移不缩放）。
  *
- * **类名与面文件名同根**：族名 `tooltip` → 类名 `.mh-tooltip*`（与令牌 `--ui-tooltip-*` 同根），
- * 一律 `mh-` 前缀 —— 本包独立发布，不迁就任何下游的既有类名（有用例盯着这条口径）。
- *
- * 显隐与定位全归操作层：宿主态（`.mh-popup-host:hover` / `:focus-within`）切 display、`data-side` / `data-align`
- * 给定位、`.mh-popup-anchor` / `--anchored` 给锚。本件只给面 + 淡入（进出对称）。
+ * 类名与面文件名同根（`.mh-tooltip*`，与令牌 `--ui-tooltip-*` 同根）—— 本包独立发布，不迁就任何下游的
+ * 既有类名（有用例盯着这条口径）。
+ * 显隐与定位全归操作层：宿主态（`:hover` / `:focus-within`）切 display、`data-side` / `data-align` 给定位、
+ * `.mh-popup-anchor` / `--anchored` 给锚；本件只给面 + 淡入（进出对称）。
  */
 .mh-tooltip {
   display: inline-block;
-  padding: var(--ui-space-2) var(--ui-tooltip-padding-x);
+  padding: var(--ui-tooltip-padding-y) var(--ui-tooltip-padding-x);
   border-radius: var(--ui-tooltip-radius);
   background: var(--ui-tooltip-bg);
   color: var(--ui-tooltip-text);
@@ -22,9 +20,9 @@
   box-shadow: var(--ui-tooltip-shadow);
 }
 
-/* 引导档（自己的面：更亮的内距 + 蓝渐变 + 更大投影） */
+/* 引导档（自己的面：内距上下一档 + 蓝渐变 + 更大投影） */
 .mh-tooltip--guide {
-  padding: var(--ui-space-3) var(--ui-tooltip-padding-x);
+  --ui-tooltip-padding-y: var(--ui-space-3);
   background: var(--ui-tooltip-guide-bg);
   box-shadow: var(--ui-tooltip-guide-shadow);
 }

package/dist/styles/components/tooltip.tokens.css

@@ -3,20 +3,16 @@
  *
  * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
  *
- * ## 抽出说明
- * 本文件从面文件里抽出（原先混写在 `tooltip.css` 顶部）：这些是**基础值**，锚在
- * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
- * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
- * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
  *
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
- * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
- * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
- */
+ * 令牌锚 `[data-manohub-ui]`（容器是每个分件的祖先 ⇒ 落在容器里的分件都取得到值）。
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里（搬走会让档位失效）；
+ * 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+*/
 [data-manohub-ui] {
   /* 单件令牌 */
   --ui-tooltip-radius: 10px; /* 规范 r10（本仓圆角刻度最大 8） */
   --ui-tooltip-padding-x: 14px; /* 规范间距档 5 = 14 */
+  --ui-tooltip-padding-y: var(--ui-space-2); /* 8：引导档在它的修饰符块里改写为 12 */
   --ui-tooltip-bg: var(--ui-base-content); /* 深底：规范用深色蒙层色，本仓无深色面令牌，取正文档（与输入说明气泡同一映射） */
   --ui-tooltip-text: var(--ui-base-100); /* 反白字 */
   --ui-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 规范实测值（本仓阴影令牌几何不同族，故按出处给） */

package/dist/styles/components/tree.css

@@ -1,34 +1,21 @@
 /**
- * Tree（自建树：节点行 + 缩进 + 展开箭头 + 计数徽标位）。
+ * Tree（自建树：节点行 + 缩进 + 展开箭头 + 计数徽标位）。几何取自规范 `components/tree.css` 与设计稿
+ * 《MH后台-0911》`0:3921` 组织树实测：
+ * - 行高 34（紧凑档 28）、**行挨行（不加行距，节距 = 行高）**、圆角 6、字号 13；行内 padding 承载缩进
+ *   （**行底满宽、只有内容缩进**）。⚠️ 行距原为 6，2026-09-30 按使用方拍板去掉 —— 树行与选择器面板里的
+ *   选项行是**同一套行**（行高 / 圆角 / 内距 / 字号 / 行态逐项同源），那边是行挨行的平铺列表。
+ * - 缩进 = 基础内距 8 + level × 步进 10，**无上限**（level 由组件在行上下发）。
+ * - 三态：滑过 `--ui-primary-weak`、点击瞬态与选中 `--ui-primary-subtle`（选中另加主色字；
+ *   设计：选中行 = 主色底 10% + 蓝字）。**取色口径与 Table / ListView 统一**，不再出现「树用中性底、
+ *   表格用主色底」的分叉；`:active` 改吃 `--ui-primary-subtle`（改前是硬编码 `#f4f5f9` —— 既是色值
+ *   字面量，换主题也不跟随）。
+ * - 箭头 = 常规图标档（收起态转 −90°），叶子节点用占位保持层级对齐；行内图标位只有两处（箭头、
+ *   标签前的节点图标槽），都取全局图标档、颜色跟随行色。
  *
- * 几何取自 `@aihub/theme` 的 `components/tree.css` 与设计稿《MH后台-0911》的 `0:3921` 组织树，
- * 见下方令牌块与形态注释。
+ * 缩进走 CSS 变量而不是行内 `padding-left`：主题包用 typed `attr(data-level type(<number>))` 一步算出；
+ * 为兼容尚无该能力的引擎，这里由组件同时下发 `--mh-tree-level`，公式仍在 CSS 内（不散落字面量）。
  */
 
-/* ===== Tree（自建树：节点行 + 缩进 + 展开箭头 + 计数徽标位）=====
-   几何与各态对齐 `@aihub/theme` 的 `components/tree.css` 与设计稿 `0:3921` 组织树实测：
-  - 行高 34（紧凑档 28）、**行挨行（不加间距，节距 = 行高）**、圆角 6、字号 13、
-    行内 padding 承载缩进（**行底满宽、只有内容缩进**）
-    ⚠️ 行距原为 6（节距 40，取自设计稿行文本 y 差）：2026-09-30 按使用方拍板去掉 ——
-    树行与选择器面板里的选项行是**同一套行**（行高 / 圆角 / 内距 / 字号 / 行态逐项同源），
-    那边是行挨行的平铺列表，两处当然该同一节距（去掉行距后 select 面板里的树与列表也一致了）。
-   - 缩进 = 基础内距 8 + level × 步进 10，**无上限**；level 由组件在行上下发
-   - 三态：滑过 `--ui-primary-weak`、点击瞬态 `--ui-primary-subtle`、
-     选中 `--ui-primary-subtle` 底 + 主色字（设计：选中行 = `#2660ff` 底 10% + 蓝字）
-   - 箭头 = 常规图标档（`--ui-font-icon`，收起态转 −90°）；叶子节点用占位保持层级对齐
-  - 行内图标位只有两处：箭头（`.mh-tree__caret`，可被 `renderCaret` 替换）与标签前的
-    节点图标槽（`.mh-tree__icon`，`renderIcon` 才会出现）。两者都取全局图标档、颜色跟随行色
-
-   **行态的取色口径与 Table / ListView 统一**：行类表面的「滑过」用 `--ui-primary-weak`（浅主色）、
-   「选中」用 `--ui-primary-subtle`（深一档主色）—— 三者同一套规则，不再出现「树用中性底、
-   表格用主色底」的分叉。
-   点击瞬态（`:active`）改吃 `--ui-primary-subtle`：改前是本件硬编码的 `#f4f5f9`，
-   既是色值字面量（违反「组件 CSS 不得新增色值字面量」），换主题时也不跟随。
-
-   缩进为什么走 CSS 变量而不是行内 paddingLeft：主题包用 typed `attr(data-level type(<number>))`
-   一步算出（`padding-left: calc(8px + attr(...) * 10px)`）；为兼容尚无该能力的引擎，这里由组件
-   同时下发 `--mh-tree-level`，公式仍在 CSS 内（数值只取令牌，不散落字面量）。 */
-
 /* 树是**行挨行**的列容器（不加行距，节距 = 行高 34）：
    行底满宽、只有内容缩进，行态（滑过 / 按下 / 选中）的底因此是连着的 ——
    与选择器面板里的选项行同一节距（见文件头「行距原为 6」那条）。 */

package/dist/styles/components/tree.tokens.css

@@ -6,12 +6,11 @@
  * 现在同一套行（行高 / 圆角 / 内距 / 字号 / 行态逐项同源），那边是行挨行的平铺列表，
  * 节距就该一样（设计稿的节距 40 因此让位）。**无消费者不预置令牌**，别再把它加回来。
  *
- * ## 抽出说明
- * 本文件从面文件里抽出：这些是**基础值**，锚在 `[data-manohub-ui]`（跨包唯一作用域锚，
- * 由入口层无条件写在应用容器上）—— 任何落在容器里的分件都取得到值，不再依赖
- * 「声明在某个组件根类上」这条脆弱假设。
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里（拆开会让档位失效）。
- */
+ *
+ * 令牌锚 `[data-manohub-ui]`（容器是每个分件的祖先 ⇒ 落在容器里的分件都取得到值）。
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里（搬走会让档位失效）；
+ * 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+*/
 [data-manohub-ui] {
   --ui-tree-row-height: 34px;
   --ui-tree-row-height-compact: 28px;

package/dist/styles/components/upload.css

@@ -1,20 +1,15 @@
 /**
  * Upload —— 上传（拖拽 / 点击上传区 + 已传文件列表 + 图片缩略图 + 上传链接）。
  *
- * 出处：`@aihub/theme` 的 `playground/components/upload.css` 与 `src/components/upload.css`
- * （拖拽区 500 宽 / 内距 32 / 1px 虚线 Ne05 / 圆角 6；列表行 = 名称 13px + 大小 12px + 删除文本钮，
- * 行高 8/12 内距、末行不画分隔线；缩略图 100×100 外框、内图 84×84；主提示 Te05 + 副提示 Te07）。
- *
- * **零 JS 的那一半**：`<label>` 擎着 `<input type="file">`（input 隐形但保持可聚焦），
- * 点整块即唤起系统文件选择 —— 这是原生行为，本族不写一行脚本。
- *
- * **"点击上传"是 span，不是 button**（与规范的一处有意差异）：`<label>` 的激活行为在
- * 「事件目标是交互式内容」时会被浏览器跳过，若把链接做成 `<button>`，点它就只会按按钮而**不唤起**
- * 文件选择。做成 span 后整块（含这行字）都能唤起，皮还是链接样。
- *
- * **拖拽态需要 JS**（`dragenter/dragover/drop` 原生给不了 CSS 状态），故走组件下发的
- * `[data-state='dragover']`；静态档 `.is-dragover` 供读图。
+ * 出处：规范（拖拽区 500 宽 / 内距 32 / 1px 虚线 / 圆角 6；列表行 = 名称 13px + 大小 12px + 删除文本钮，
+ * 行高 8/12 内距、末行不画分隔线；缩略图 100×100 外框、内图 84×84；主提示 + 副提示）。
  *
+ * **零 JS 的那一半**：`<label>` 擎着 `<input type="file">`（input 隐形但保持可聚焦），点整块即唤起系统
+ * 文件选择 —— 原生行为，本族不写一行脚本。
+ * ⚠️ **"点击上传"是 span，不是 button**（与规范的一处有意差异）：`<label>` 的激活行为在「事件目标是
+ * 交互式内容」时会被浏览器跳过，做成 `<button>` 点它就只会按按钮而**不唤起**文件选择。
+ * **拖拽态需要 JS**（原生给不了 CSS 状态）：走组件下发的 `[data-state='dragover']`，静态档
+ * `.is-dragover` 供读图。
  * **本件不自行发起请求**：文件列表由消费方受控（`files`），选择 / 删除 / 拖拽都只回调。
  */
 .mh-upload {

package/dist/styles/components/upload.tokens.css

@@ -3,16 +3,11 @@
  *
  * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
  *
- * ## 抽出说明
- * 本文件从面文件里抽出（原先混写在 `upload.css` 顶部）：这些是**基础值**，锚在
- * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
- * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
- * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
  *
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
- * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
- * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
- */
+ * 令牌锚 `[data-manohub-ui]`（容器是每个分件的祖先 ⇒ 落在容器里的分件都取得到值）。
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里（搬走会让档位失效）；
+ * 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+*/
 [data-manohub-ui] {
   /* 单件令牌 */
   --ui-upload-padding: 32px; /* 规范间距档 8（本仓间距刻度最大 24，故按实测值给） */

package/dist/styles/index.css

@@ -1,50 +1,26 @@
 /**
  * @manohub/ui 组件面入口（对外公开为 `@manohub/ui/styles.css`）。
  *
- * 本层是**无 JS 组件面**：只声明类与状态协议（原生伪类 / `[data-state]` / `attr()`），
- * **零令牌定义** —— 令牌一律消费主题。故加载顺序固定：
+ * 本层是**无 JS 组件面**：只声明类与状态协议（原生伪类 / `[data-state]` / `attr()`），**零令牌定义** ——
+ * 令牌一律消费主题。加载顺序固定：`@manohub/theme/default.css`（全局值）→ 本文件（组件令牌基础值 → 面）。
  *
- *     @manohub/theme/default.css（全局值） → styles.css（组件令牌基础值 → 面）
+ * 令牌四段：① 全局令牌（跨件共用的值）在 `@manohub/theme`；② 组件令牌**基础值**（`--ui-<件>-*`）在各
+ * `<件>.tokens.css` —— 两者都锚 `[data-manohub-ui]`（容器是每个组件的祖先 ⇒「跨件消费的令牌取不到值」那一类
+ * 静默失效从根上消失）；③ 档位改写与 ④ **内部状态变量**（`--mh-<件>-*`）必须留在面文件的**修饰符块**里
+ * —— 它们靠「同一元素上两个选择器改写同一个令牌」生效，拆到两个文件里档位就失效。归属判据：只服务单一组件
+ * 的几何令牌进该件 `<件>.tokens.css`；跨件共用的值一律进 theme；面上的 `--ui-*` 只允许出现在修饰符块里。
  *
- * 换主题只换前一行；静态页（不装 Vue）同样只需这两行。
+ * ⚠️ 组件 CSS **不得**用 `import './x.css'` 副作用引入（会让 dist 的 .d.ts 留下消费方解析不了的 CSS 导入，
+ * 且被 verify-pack 拦）；样式只经本文件汇总。
+ * ⚠️ **本文件注释里不得出现「星号紧跟斜杠」的写法**：那个序列会被解析成注释结束符，把注释提前闭合、
+ * **后面所有 @import 一起失效**（表现为本文件 0 条规则、组件面全丢）；`contract-class-surface.spec.ts`
+ * 有机械检查。
+ * ⚠️ 新增组件**五处齐备**（少一处即静默失效）：`components/<件>/index.tsx` + `<件>.css` + `<件>.tokens.css`
+ * + 本文件登记两条 `@import` + `src/index.ts` 加导出。
  *
- * ## 令牌三段（0.6.0 起）
- *
- * | 段 | 命名 | 落点 | 锚 |
- * |---|---|---|---|
- * | 全局令牌（跨件共用的值） | `--ui-{primary,base-*,space-*,radius-*,shadow-*,font-*}`、尺寸档（`--ui-control-height-*` / `--ui-control-width` / `--ui-control-min-width` / `--ui-mark-height-*`）、线型档（`--ui-line-dashed`） | `@manohub/theme` | `[data-manohub-ui]` |
- * | 组件令牌**基础值** | `--ui-<件>-*` | 本目录同名 `<件>.tokens.css` | `[data-manohub-ui]` |
- * | 组件令牌**档位改写** | `--ui-<件>-*` | 面文件 `<件>.css` 的**修饰符块** | `.mh-<件>--<档>` 等 |
- * | 内部状态变量 | `--mh-<件>-*` | 面文件（修饰符机制本身） | 组件根类 / 修饰符类 |
- *
- * 后两段必须留在面里：它们靠「同一元素上两个不同选择器改写同一个令牌」生效
- * （`.mh-capsule { --ui-capsule-height: 32px }` + `.mh-capsule--sm { … 24px }`），
- * 拆到两个文件里档位就会失效。
- *
- * 基础值锚在 `[data-manohub-ui]`（**跨包唯一作用域锚**：一个库品牌属性，由入口层
- * `createSubApp` 无条件写在应用容器上）—— 容器是每个组件的祖先，于是
- * 「跨件消费的令牌取不到值」那一整类静默失效从根上消失
- * （历史症状：组内间距变 0、组内分割线高度 0、面板圆角 0；改前靠「把令牌同时声明在
- * 若干个外层类上」的 workaround 兜）。
- *
- * ⚠️ 组件 CSS **不得**用 `import './x.css'` 副作用引入（会让 dist 的 .d.ts 留下消费方解析不了的
- * CSS 导入，且被 verify-pack 拦）；样式只经本文件汇总，由消费方的样式链级联进来。
- *
- * ⚠️ **本文件的注释里不得出现 `**` 紧跟斜杠的 glob 写法**（如写 `dist` 下的产物时）——
- * 那个序列会被解析成注释结束符，把注释提前闭合、**后面所有 @import 一起失效**（浏览器里表现为
- * 本文件 0 条规则，组件面全丢）。护栏 `contract-class-surface.spec.ts` 有机械检查。
- *
- * ⚠️ 新增组件**五处齐备**（少一处即静默失效）：
- *    `components/<件>/index.tsx` + `styles/components/<件>.css` + `styles/components/<件>.tokens.css`
- *    + 在本文件登记两条 `@import`（值区与面区各一条）+ `src/index.ts` 加导出
- *
- * 归属判据：只服务单一组件的几何令牌写在该组件的 `<件>.tokens.css`（锚容器）；
- * 跨件共用的值一律进 `@manohub/theme`；面上的 `--ui-*` 只允许出现在**修饰符块**里
- * （护栏会拦「面里出现不含修饰符类的 `--ui-*` 声明」）。
- *
- * 层序：**基线（`./reset.css`，元素级、零特异性）→ 值 → 面**；面内部**操作层在前**（零 JS 原语、规则走 `:where()` 零特异性，
- * 永远给皮肤让位），组件面在后。基线只有两面（`box-sizing` + 容器基座）—— 其余元素级声明一律归各组件面：
- * 本文件**在 Tailwind 的层外**（未分层 > 分层），多留一条就会压住消费方的工具类（理由见 `reset.css` 文件头）。
+ * 层序：**基线（`./reset.css`，元素级、零特异性）→ 值 → 面**；面内部**操作层在前**（零 JS 原语，规则走
+ * `:where()`、永远给皮肤让位），组件面在后。本文件**在 Tailwind 的层外**（未分层 > 分层），多留一条元素级
+ * 声明就会压住消费方的工具类（理由见 `reset.css` 文件头）。
  */
 
 /* ===== 基线：元素级 reset（只有盒模型 + 容器基座；先于值 → 面，消费方写任何元素选择器都能盖过它） ===== */
@@ -76,6 +52,7 @@
 
 /* 反馈与三态 */
 @import './components/notice.tokens.css';
+@import './components/query-state.tokens.css';
 @import './components/notification.tokens.css';
 @import './components/loading.tokens.css';
 
@@ -105,10 +82,10 @@
 @import './components/panel.css';
 @import './components/collapse.css'; /* Collapse 的头行皮肤（行为在 operations/collapse.css） */
 @import './components/card.css';
-@import './components/divider.css'; /* 内容之间的分隔线（设计稿内容区 44 处在用；不是各件自己的框线） */
+@import './components/divider.css'; /* 内容之间的分隔线，不是各件自己的框线 */
 @import './components/nav.css';
-@import './components/layout.css'; /* 布局原子件族（Layout.Row 排「行」/ Layout.Column 排「列」）；与任何件都无层序耦合 */
-@import './components/text.css'; /* 排版原子件：`--ui-font-*` 档位令牌的第一个消费者；叶子件，与任何件都无层序耦合 */
+@import './components/layout.css'; /* 布局原子件族（Row 排「行」/ Column 排「列」），与任何件无层序耦合 */
+@import './components/text.css'; /* 排版原子件；叶子件，与任何件无层序耦合 */
 
 /* 数据展示 */
 @import './components/tree.css';
@@ -117,19 +94,19 @@
 @import './components/tag.css';
 @import './components/avatar.css';
 @import './components/skeleton.css';
-@import './components/code-block.css'; /* 代码块族（只读面 / 编辑面 / 角标 / 复制位；复制按钮的面归按钮族，故在其后）；面里靠升一档特异性压过按钮族，见其文件头 */
+@import './components/code-block.css'; /* 复制按钮的面归按钮族，故排在其后；面里靠升一档特异性压过按钮族 */
 
-/* 表单与选择控件（按钮 → 输入 → 选择 → 开关 → 勾选 → 单选（两形态同面）→ 胶囊） */
+/* 表单与选择控件（按钮 → 输入 → 选择 → 开关 → 勾选 → 单选 → 胶囊） */
 @import './components/button.css';
 @import './components/input.css';
-@import './components/search.css'; /* 搜索框：只有「一行里怎么摆」，输入框与按钮的面各自归族（故必须排在 input.css 之后） */
+@import './components/search.css'; /* 只有「一行里怎么摆」，输入框与按钮的面各自归族（故排在 input.css 之后） */
 @import './components/select.css';
 @import './components/switch.css';
 @import './components/form.css';
 @import './components/checkbox.css';
 @import './components/radio.css'; /* 单选一件两形态（`.Group` / `.Card`）同一个面文件 */
 @import './components/capsule.css';
-@import './components/filter.css'; /* 筛选条：**零规则**（字段排布与几何全部沿用 Form，本文件只留说明；见其文件头） */
+@import './components/filter.css'; /* 筛选条：**零规则**（字段排布与几何全部沿用 Form） */
 
 /* 反馈与三态 */
 @import './components/notice.css';
@@ -139,8 +116,8 @@
 
 /* 浮层皮肤（与操作层并列组合：对话框走原生 <dialog>，提示走 hover 档） */
 @import './components/dialog.css';
-@import './components/drawer.css'; /* 抽屉：与 dialog 同一套行为只换落位（模态 / 遮罩 / Esc 都由原生 <dialog> 承担） */
-@import './components/tooltip.css'; /* 浮层皮肤：类名 .mh-tooltip*（与族名 / 令牌同根） */
+@import './components/drawer.css'; /* 与 dialog 同一套行为只换落位（模态 / 遮罩 / Esc 由原生 <dialog> 承担） */
+@import './components/tooltip.css';
 
 /* 数据与反馈（表格 / 分页条 / 页签条 / 步骤条 / 消息提示） */
 @import './components/table.css';

package/dist/styles/operations/collapse.css

@@ -1,34 +1,21 @@
 /**
  * 操作层 · 折叠（零 JS，**只给操作、不给任何面**）。
  *
- * 出处：`@aihub/theme` 的 `playground/components/collapse.css`（本仓第一处照搬操作层）。
- * 映射：`--mh-*` → `--ui-*`；类名加 `.mh-` 前缀；**箭头不再是 CSS 字形**，改由 `@manohub/icon`
- * 的 `<Icon name="chevron-down">` 渲染（本层只负责「收起时转向」，不画字形）。
+ * 面与几何一律来自皮肤族类（组合 = 根上并列两个类：卡片版 = `Card + Collapse`，字段分组版 = 表单分组 +
+ * `Collapse`）⇒ 本文件**不落任何色值 / 尺寸**，也没有 `--ui-collapse-*` 皮肤令牌 —— 这正是「不顶掉皮肤」
+ * 的前提。箭头不再是 CSS 字形，改由 `@manohub/icon` 的 `chevron-down` 渲染（本层只负责「收起时转向」）。
  *
- * 面与几何一律来自皮肤族类（组合只是「根上并列两个类」）：
- *   卡片版 = `Card + Collapse`，字段分组版 = 表单分组 + `Collapse`。
- * 因此本文件**不落任何色值/尺寸**，也没有 `--ui-collapse-*` 皮肤令牌 —— 这正是「不顶掉皮肤」的前提。
- *
- * 结构（原生 disclosure，零 JS 即具备键盘与读屏语义）：
- *   <details class="mh-collapse [皮肤类]" open>
- *     <summary class="[皮肤头类]">标题 <Icon name="chevron-down" class="mh-collapse-caret" /></summary>
- *     <div class="[皮肤体类]">…</div>
- *   </details>
- *
- * 一、开关与状态根 `.mh-collapse`
- *   · 原生 `<details>` 的 `[open]` 与组件下发的 `data-state` 两条状态源等价；无状态属性即展开
- *     （收折必须显式声明）。
- *   · 触发器钩子 = 根的直接子 `<summary>`（原生形态）或 `.mh-collapse-header`（组件下发 `<button>` 形态）
- *     —— 皮肤族的部件类照旧挂在触发器上，本层不认识它们，故皮肤族零改动。
- *   · 面板体不设约定类：皮肤族自己命名。
- *
- * 二、收起态派生（全部由面板根状态推出）
- *   · 箭头转竖向（收起态指右）；字形自身不带态。
- *   · 组件根下除触发器外直接子一律不显示；原生根由浏览器收起。
- *   · 收起态不留 gap（flex 列皮肤的隐藏内容槽仍占一个 flex 项）。
+ * 结构（原生 disclosure，零 JS 即具备键盘与读屏语义）：`<details class="mh-collapse [皮肤类]" open>` →
+ * `<summary class="[皮肤头类]">标题 <Icon name="chevron-down" class="mh-collapse-caret" />` +
+ * `<div class="[皮肤体类]">`。
  *
+ * 一、开关与状态根 `.mh-collapse`：原生 `[open]` 与组件下发的 `data-state` 两条状态源等价，**无状态属性即
+ * 展开**（收折必须显式声明）；触发器钩子 = 根的直接子 `<summary>`（原生）或 `.mh-collapse-header`
+ * （组件下发 `<button>` 形态）—— 皮肤族的部件类照旧挂在触发器上、本层不认识它们；面板体不设约定类。
+ * 二、收起态派生（全部由面板根状态推出）：箭头转竖向（收起态指右，字形自身不带态）；组件根下除触发器外
+ * 直接子一律不显示（原生根由浏览器收起）；收起态不留 gap（flex 列皮肤的隐藏内容槽仍占一个 flex 项）。
  * 三、硬约束：**不写底 / 边 / 圆角 / 内距 / 高 / 字号 / gap** —— 写了就会顶掉皮肤族的属性面
- *   （卡片头的内距与底边线、表单分组头的行高），这正是「根上只加两个类就能组合」的前提。
+ * （卡片头的内距与底边线、表单分组头的行高），这正是「根上只加两个类就能组合」的前提。
  */
 .mh-collapse {
   min-width: 0; /* 仅作状态根 + 作 flex 子项时不横向溢出；面由皮肤给 */

package/dist/styles/operations/popup.css

@@ -1,64 +1,31 @@
 /**
  * 操作层 · 浮层（零 JS，**只给操作、不给任何面**）。
  *
- * 出处：`@aihub/theme` 的 `playground/components/popup.css`。
- * 映射：`--mh-*` → `--ui-*`；类名加 `.mh-` 前缀；**箭头不再取 utils 的 CSS 字形**，改由 `@manohub/icon`
- * 的 `<Icon name="chevron-down" class="mh-popup-caret">` 渲染（本层只负责「展开时转向」）。
+ * 结构（原生 popover）：`<button popovertarget="p1">` + `<div id="p1" popover class="mh-popup [皮肤类]">`。
+ * 面与几何一律来自皮肤族类，面板根上并列两个类即组合（气泡确认 = 气泡皮肤，下拉层 = 选择面板皮肤…）。
+ * 箭头不由本层画：字形取 `@manohub/icon` 的 `chevron-down`，本层只负责「展开时转向」。
  *
- * 面与几何一律来自皮肤族类，面板根上并列两个类即组合：
- *   气泡确认 = 气泡皮肤、下拉层 = 选择面板皮肤、提示 = 提示皮肤、对话框 = 卡片 + 对话框皮肤。
+ * 本层只做六件事：
+ * 一、状态根 `.mh-popup` —— 三条状态源等价（原生 `:popover-open` / 原生 `<dialog>[open]` / 组件
+ *   `data-state="open|closed"`）。收起态本该由 UA 的 `display: none` 承担，但皮肤自带 display 会以作者源
+ *   压过 UA（提示皮肤实测踩坑），故收起态要按高特异性重钉一次。
+ * 二、触发器钩子 —— `[popovertarget]` 与 `.mh-popup-trigger`，只做「可点 + 可键盘 + 焦点环」；触发器
+ *   **不做 UA 归零**（它本身就是带皮肤的控件，清了会顶掉按钮皮肤）。
+ * 三、UA 装饰归零 —— 原生 `[popover]` 与 `<dialog>` 会发下 `border` / `padding` / `background`，不归零就
+ *   在面板外面多出一圈黑框。
+ * 四、零 JS 锚定 —— CSS Anchor Positioning：`position-area` 定位档 + `position-try-fallbacks` 自动翻面，
+ *   锚点走 `popovertarget` 的**隐式锚**（够不着时才用 `.mh-popup-anchor`）。无 `data-side` 时不落定位档，
+ *   模态与无锚点浮层退回件自己声明的视口居中。⚠️ **不能指望 UA**：作者源无条件压过 UA 源，宿主的 reset 把
+ *   UA 给 `dialog` 的 `margin: auto` 归零 ⇒ 弹窗贴上贴左，居中必须由件写实（见 `components/dialog.css`）。
+ * 五、展开态派生 —— 箭头转向（原生路径由宿主 `:has` 反推，组件路径由 `aria-expanded` 反推）。
+ * 六、hover 档 `.mh-popup--hover` —— 给「非交互提示」的纯 CSS 显形；原因与代价见该节注释。
  *
- * 结构（原生 popover，零 JS 即具备轻 dismiss / Esc / top layer 渲染）：
- *   <button popovertarget="p1">触发器</button>
- *   <div id="p1" popover class="mh-popup [皮肤类]" data-side="bottom">…</div>
- *
- * 本层只做五件事：
- *
- * 一、状态根 `.mh-popup` —— 三条状态源等价（与折叠的 `[open]` / `data-state` 同构）：
- *   · 原生 popover：`popovertarget` 开合，`:popover-open` 即展开（本层无需为它写状态规则）；
- *   · 原生 `<dialog>`：`[open]`（`showModal()` 那条路同样接得住）；
- *   · 组件下发：`data-state="open|closed"`（与本仓其它件的 `data-state` 协议同款）。
- *   收起态本该由 UA 的 `display: none` 承担（组件路径则由组件卸载）—— 但皮肤自带 display 的会以作者源
- *   压过 UA（提示皮肤实测踩坑），故收起态仍要按高特异性重新钉一次（见「收起态派生」）。
- *
- * 二、触发器钩子 —— `[popovertarget]`（原生，属性即钩子）/ `.mh-popup-trigger`（组件路径），
- *   只做「可点 + 可键盘 + 焦点环」。**触发器不做 UA 归零**（与折叠清 `<summary>` 三角标相反）：
- *   它本身就是带皮肤的控件，那样清会顶掉按钮皮肤。
- *
- * 三、UA 装饰归零 + 收起态派生 —— 原生 `[popover]` 与 `<dialog>` 会发下 `border` / `padding` /
- *   `background`，不归零就在面板外面多出一圈黑框；收起态则如上条所述要重新钉住 display。
- *   两条都只落在浮层本体，不碰任何皮肤属性面。
- *
- * 四、零 JS 锚定 —— CSS Anchor Positioning：`position-area` 定位档（`data-side` / `data-align`）
- *   + `position-try-fallbacks` 自动翻面；锚点走 `popovertarget` 的**隐式锚**，一个 `anchor-name`
- *   都不用写（隐式锚够不着时才用 `.mh-popup-anchor` / `.mh-popup--anchored` 那一档）。
- *   无 `data-side` 时不落定位档 —— 模态与无锚点浮层退回**件自己声明的**视口居中
- *   （`inset: 0` + `margin: auto`）。⚠️ 这里**不能指望 UA**：UA 确有 `dialog { margin: auto }`，
- *   但作者源无条件压过 UA 源，而宿主的 `* { margin: 0 }` reset 会把它归零 ⇒ 弹窗贴上贴左。
- *   故居中必须由**件**写实（见 `components/dialog.css` 的 `.mh-dialog { margin: auto }`，
- *   2026-09-30 在带 Tailwind 的宿主里实测踩到）。
- *
- * 五、展开态派生 —— 箭头转向：原生路径由宿主 `:has` 反推，组件路径由触发器自带的
- *   `aria-expanded` 反推。
- *
- * 六、hover 档 `.mh-popup--hover` —— 给「非交互提示」的纯 CSS 显形（移入 / 聚焦即出）。
- *   必须存在的原因：popover 只能由点击或 JS 开合，CSS 开合不了；hover 触发的原生属性尚未落地。
- *   代价见该节注释（不进 top layer：会被裁切、要自带 z-index、无 light dismiss）。
- *
- * **硬约束：本层规则一律走 `:where()`（特异性 0）** —— 这是「不顶掉皮肤」的机械保证：
- * 作者源本来就高于 UA 源，故 `:where()` 压得住 UA 装饰；而对皮肤类（0-1-0 起）永远让位
- * （反例即折叠里 `.mh-collapse > button.mh-collapse-header`：那里清的是 UA 按钮装饰，故须高特异性
- * 且只落在组件形态的触发器上；本层结论是「能不动触发器就不动」）。
- * 例外只有三类，都是「必须压过皮肤」的 display 与「只声明身份」的属性：
- *   ① 四条裸类规则（`.mh-popup` / `.mh-popup-anchor` / `.mh-popup-host` / `.mh-popup--anchored`）
- *      —— 声明状态根与锚点身份，皮肤族不碰这些属性面；
- *   ② 收起态规则走 `:is()`（0-3-0）—— 皮肤自带 display 会压过 UA 的收起 display:none；
- *   ③ hover 档两条（`.mh-popup.mh-popup--hover` 0-2-0 / `.mh-popup-host:hover …` 0-3-0）—— 同上。
- *   三条 display 规则都只碰 display（hover 档另加定位与层级），不动任何皮肤属性面。
- *
- * 禁写清单（与折叠同款）：底 / 边 / 圆角 / 内距 / 宽高 / 字号 / 阴影 / 遮罩色 / 动画
- *   —— 遮罩色归对话框皮肤（真实弹出层遮罩由其 `::backdrop` 画），进出场动画归显示层。
- *   层级：popover 档由 top layer 接管（零 z-index），hover 档不进 top layer 故自带一层 z-index。
+ * **硬约束：本层规则一律走 `:where()`（特异性 0）** —— 这是「不顶掉皮肤」的机械保证。例外只有三类：
+ * ① 四条裸类规则（`.mh-popup` / `-anchor` / `-host` / `--anchored`）声明状态根与锚点身份；② 收起态走
+ * `:is()`（0-3-0）—— 皮肤自带 display 会压过 UA 的收起 `display: none`；③ hover 档两条（同上）。三条
+ * display 规则都只碰 display。
+ * 禁写清单（与折叠同款）：底 / 边 / 圆角 / 内距 / 宽高 / 字号 / 阴影 / 遮罩色 / 动画。
+ * 层级：popover 档由 top layer 接管（零 z-index），hover 档不进 top layer 故自带一层 z-index。
  */
 /* ===== 一、状态根 ===== */
 .mh-popup {
@@ -87,15 +54,15 @@
 /* 收起态派生（本层唯一一条非 `:where()` 的状态规则，理由在特异性）：
    原生 popover / dialog 的收起靠 UA 的 `display: none`，而皮肤自带 display 的会以作者源压过 UA
    —— 提示皮肤的 inline-block 就让收起的面板在流内显形（实测踩坑）。
-   故按「收起的浮层就是 display: none」重新钉一次：`:is()` 取最具体分支，特异性 0-3-0 足以压过任何
-   皮肤类，且只碰 display 一项；组件路径（data-state）由组件卸载，不经此条。 */
+   故按「收起的浮层就是 display: none」重新钉一次：`:is()` 取最具体分支（0-3-0）足以压过任何皮肤类，
+   且只碰 display 一项；组件路径（data-state）由组件卸载，不经此条。 */
 :is(.mh-popup[popover]:not(:popover-open), dialog.mh-popup:not([open])) {
   display: none;
 }
 
 /* ===== 四、零 JS 锚定（CSS Anchor Positioning） ===== */
 /* 定位档：声明「面板落在锚点的哪一侧」+ 与锚点的呼吸位（4px）。
-   皮肤或消费方要改间距/换侧，用自己的 margin / position-area 覆盖即可 —— 本层恒 0 特异性。
+   皮肤或消费方要改间距 / 换侧，用自己的 margin / position-area 覆盖即可 —— 本层恒 0 特异性。
    锚点 = `popovertarget` 的调用者（隐式锚，`position-anchor: auto` 是初始值，无需声明）。 */
 :where(.mh-popup[data-side='bottom']) {
   position-area: bottom;
@@ -120,10 +87,9 @@
 }
 
 /* 两侧对齐档（与 reka 同名的 data-align）：top / bottom 沿行内轴、left / right 沿块轴；
-   不写 data-align（或写 center）= 面板中线对齐锚点（position-area 的默认行为，实测中线偏差 0）。
-   **钉边必须用 anchor() 而不是 justify-self / align-self**（实测踩坑）：
-   单关键词的 position-area（如 `bottom`）在另一条轴上是铺满**包含块**的（此处即视口）——
-   于是 `justify-self: start` 会把面板贴到视口左边（实测偏了 409px），而不是锚点左边。 */
+   不写 `data-align`（或写 center）= 面板中线对齐锚点（实测中线偏差 0）。
+   ⚠️ **钉边必须用 `anchor()` 而不是 justify-self / align-self**：单关键词的 position-area 在另一条轴上是
+   铺满**包含块**（此处即视口）—— `justify-self: start` 会把面板贴到视口左边（实测偏了 409px）。 */
 :where(.mh-popup[data-side='top'][data-align='start'],
   .mh-popup[data-side='bottom'][data-align='start']) {
   left: anchor(left);
@@ -146,9 +112,8 @@
 }
 
 /* 显式锚档（隐式锚够不着时用：浮层由 JS `showPopover()` 打开、触发器不是 `popovertarget` 元素等）：
-   锚点元素挂 `.mh-popup-anchor` 声明锚点名、浮层加 `.mh-popup--anchored` 接入；
-   同页多实例用 `.mh-popup-host`（两者的共同祖先）把同名锚收敛到子树（`anchor-scope`），
-   否则固定锚点名在整页只有最后一个声明者生效。 */
+   锚点元素挂 `.mh-popup-anchor` 声明锚点名、浮层加 `.mh-popup--anchored` 接入；同页多实例用
+   `.mh-popup-host`（共同祖先）把同名锚收敛到子树，否则固定锚点名在整页只有最后一个声明者生效。 */
 .mh-popup-anchor {
   anchor-name: --mh-popup-anchor;
 }
@@ -160,10 +125,9 @@
 }
 
 /* ===== 五、展开态派生（箭头转向：字形由 @manohub/icon 给，本层只转向） =====
- * 前三条是**后代**关系（箭头在触发器子树里）；后两条是**兄弟**关系 ——
- * 组合件把箭头挂到触发器的同级附加位槽里（本仓的「触发器形态」：`Select` 的箭头在表壳的
- * `.mh-input__suffix` 里，与 `[popovertarget]` 那个控件是兄弟），后代组合器一条都命不中（实测），
- * 故补 `~ *` 一档：同宿主内、触发器**之后**的任一兄弟（及其子树）里的箭头跟着转向。 */
+ * 前三条是**后代**关系（箭头在触发器子树里）；后两条是**兄弟**关系 —— 组合件把箭头挂到触发器的同级
+ * 附加位槽里（`Select` 的箭头在表壳的 `.mh-input__suffix` 里，与 `[popovertarget]` 那个控件是兄弟），
+ * 后代组合器一条都命不中（实测），故补 `~ *` 一档：同宿主内、触发器**之后**的任一兄弟里的箭头跟着转向。 */
 :where(.mh-popup-host:has(.mh-popup:popover-open)) [popovertarget] .mh-popup-caret,
 :where(.mh-popup-host:has(dialog.mh-popup[open])) [popovertarget] .mh-popup-caret,
 :where(.mh-popup-trigger[aria-expanded='true']) .mh-popup-caret,
@@ -173,15 +137,13 @@
 }
 
 /* ===== 六、hover 档（非交互提示：移入 / 聚焦即显形，移开即消失） =====
- * 为何需要单独一档：原生 popover 的开合只有两个入口 —— JS `showPopover()` 与 `popovertarget`（点击），
- * **CSS 开合不了 popover**；原生给 hover 留的口子（interest invoker）尚未落地。
- * 故 hover 档退回普通定位元素，**不进 top layer**，代价三条，用前先认：
- *   ① 会被祖先 overflow 裁切（popover 档不会）；② 层级要自带一层 z-index；③ 无 light dismiss / Esc
- *   （移开即消失，本就不需要）。换来的是提示语义正确：不吃点击、不抢焦点。
- * 锚点必须显式声明（hover 没有隐式锚）：触发器挂 `.mh-popup-anchor`、面板挂 `.mh-popup--anchored`、
- * 两者共同祖先挂 `.mh-popup-host`（宿主 `:hover` / `:focus-within` 即显形）。`:hover` 按 DOM 祖先传播，
- * 故指针从触发器移到面板上不会闪断。延迟与淡入属显示层 / 组件层，本层不管。
- * 特异性说明：`display` 必须压过皮肤（提示皮肤自带 inline-block），故这两条不走 `:where()`。 */
+ * 为何单独一档：原生 popover 的开合只有 JS `showPopover()` 与 `popovertarget`（点击）两个入口，**CSS 开合
+ * 不了 popover**，原生给 hover 留的口子（interest invoker）尚未落地。故 hover 档退回普通定位元素、
+ * **不进 top layer**，代价三条：① 会被祖先 overflow 裁切（popover 档不会）；② 层级要自带 z-index；
+ * ③ 无 light dismiss / Esc（移开即消失，本就不需要）。换来提示语义正确：不吃点击、不抢焦点。锚点必须显式
+ * 声明（hover 没有隐式锚）：触发器挂 `.mh-popup-anchor`、面板挂 `.mh-popup--anchored`、共同祖先挂
+ * `.mh-popup-host`；`:hover` 按 DOM 祖先传播，故指针从触发器移到面板上不会闪断。
+ * 特异性说明：`display` 必须压过皮肤，故这两条不走 `:where()`。 */
 .mh-popup.mh-popup--hover {
   position: fixed;
   z-index: 1;