@manohub/ui 0.10.5 → 1.0.0

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

@@ -1,27 +1,27 @@
-/**
- * upload —— 单件令牌（**基础值**）。
- *
- * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
- *
- * ## 抽出说明
- * 本文件从面文件里抽出（原先混写在 `upload.css` 顶部）：这些是**基础值**，锚在
- * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
- * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
- * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
- *
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
- * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
- * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
- */
-[data-manohub-ui] {
-  /* 单件令牌 */
-  --ui-upload-padding: 32px; /* 规范间距档 8（本仓间距刻度最大 24，故按实测值给） */
-  --ui-upload-zone-max-width: 500px; /* 规范拖拽区帧宽 */
-  --ui-upload-radius: var(--ui-radius-control);
-  --ui-upload-line: var(--ui-line-dashed); /* 虚线边：取线型档（口径「实线 base-300 / 虚线 base-400」） */
-  --ui-upload-text: var(--ui-base-content-muted); /* 主提示 Te05 */
-  --ui-upload-hint: var(--ui-base-content-subtle); /* 副提示 Te07 */
-  --ui-upload-meta-size: var(--ui-font-caption); /* 大小/缩略图文字：规范 12，本仓字阶最小 13 */
-  --ui-upload-thumb-size: 100px; /* 规范缩略图外框 */
-  --ui-upload-thumb-inner: 84px; /* 规范内图 */
-}
+/**
+ * upload —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `upload.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌 */
+  --ui-upload-padding: 32px; /* 规范间距档 8（本仓间距刻度最大 24，故按实测值给） */
+  --ui-upload-zone-max-width: 500px; /* 规范拖拽区帧宽 */
+  --ui-upload-radius: var(--ui-radius-control);
+  --ui-upload-line: var(--ui-line-dashed); /* 虚线边：取线型档（口径「实线 base-300 / 虚线 base-400」） */
+  --ui-upload-text: var(--ui-base-content-muted); /* 主提示 Te05 */
+  --ui-upload-hint: var(--ui-base-content-subtle); /* 副提示 Te07 */
+  --ui-upload-meta-size: var(--ui-font-caption); /* 大小/缩略图文字：规范 12，本仓字阶最小 13 */
+  --ui-upload-thumb-size: 100px; /* 规范缩略图外框 */
+  --ui-upload-thumb-inner: 84px; /* 规范内图 */
+}

package/dist/styles/index.css

@@ -1,153 +1,153 @@
-/**
- * @manohub/ui 组件面入口（对外公开为 `@manohub/ui/styles.css`）。
- *
- * 本层是**无 JS 组件面**：只声明类与状态协议（原生伪类 / `[data-state]` / `attr()`），
- * **零令牌定义** —— 令牌一律消费主题。故加载顺序固定：
- *
- *     @manohub/theme/default.css（全局值） → styles.css（组件令牌基础值 → 面）
- *
- * 换主题只换前一行；静态页（不装 Vue）同样只需这两行。
- *
- * ## 令牌三段（0.6.0 起）
- *
- * | 段 | 命名 | 落点 | 锚 |
- * |---|---|---|---|
- * | 全局令牌（跨件共用的值） | `--ui-{primary,base-*,space-*,radius-*,shadow-*,font-*}`、尺寸档（`--ui-control-height-*` / `--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（只有盒模型 + 容器基座；先于值 → 面，消费方写任何元素选择器都能盖过它） ===== */
-@import './reset.css';
-
-/* ===== 值：组件令牌基础值（锚 `[data-manohub-ui]`，与主题令牌同层序） ===== */
-/* 容器与分区 */
-@import './components/collapse.tokens.css';
-@import './components/divider.tokens.css';
-
-/* 数据展示 */
-@import './components/tree.tokens.css';
-@import './components/badge.tokens.css';
-@import './components/tag.tokens.css';
-@import './components/avatar.tokens.css';
-@import './components/skeleton.tokens.css';
-@import './components/code-block.tokens.css';
-
-/* 表单与选择控件 */
-@import './components/button.tokens.css';
-@import './components/input.tokens.css';
-@import './components/select.tokens.css';
-@import './components/switch.tokens.css';
-@import './components/form.tokens.css';
-@import './components/checkbox.tokens.css';
-@import './components/radio.tokens.css';
-@import './components/capsule.tokens.css';
-/* 筛选条没有自己的令牌：字段区几何一律继承 Form 的默认档 */
-
-/* 反馈与三态 */
-@import './components/notice.tokens.css';
-@import './components/notification.tokens.css';
-@import './components/loading.tokens.css';
-
-/* 浮层皮肤 */
-@import './components/dialog.tokens.css';
-@import './components/drawer.tokens.css';
-@import './components/tooltip.tokens.css';
-
-/* 数据与反馈 */
-@import './components/table.tokens.css';
-@import './components/pagination.tokens.css';
-@import './components/tabbar.tokens.css';
-@import './components/steps.tokens.css';
-@import './components/toast.tokens.css';
-
-/* 内容与文件 */
-@import './components/upload.tokens.css';
-
-/* ===== 面：零令牌定义，只声明类与状态协议 ===== */
-/* 操作层（零 JS 原语，自身不带面；面由下面的皮肤族并列组合提供） */
-@import './operations/collapse.css';
-@import './operations/popup.css';
-@import './operations/tabs.css';
-
-/* 容器与分区 */
-@import './components/page.css'; /* 页面级骨架（唯一；区域级是 Panel） */
-@import './components/panel.css';
-@import './components/collapse.css'; /* Collapse 的头行皮肤（行为在 operations/collapse.css） */
-@import './components/card.css';
-@import './components/divider.css'; /* 内容之间的分隔线（设计稿内容区 44 处在用；不是各件自己的框线） */
-@import './components/nav.css';
-@import './components/layout.css'; /* 布局原子件族（Layout.Row 排「行」/ Layout.Column 排「列」）；与任何件都无层序耦合 */
-@import './components/text.css'; /* 排版原子件：`--ui-font-*` 档位令牌的第一个消费者；叶子件，与任何件都无层序耦合 */
-
-/* 数据展示 */
-@import './components/tree.css';
-@import './components/list-view.css';
-@import './components/badge.css';
-@import './components/tag.css';
-@import './components/avatar.css';
-@import './components/skeleton.css';
-@import './components/code-block.css'; /* 代码块族（只读面 / 编辑面 / 角标 / 复制位；复制按钮的面归按钮族，故在其后）；面里靠升一档特异性压过按钮族，见其文件头 */
-
-/* 表单与选择控件（按钮 → 输入 → 选择 → 开关 → 勾选 → 单选（两形态同面）→ 胶囊） */
-@import './components/button.css';
-@import './components/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/notice.css';
-@import './components/notification.css'; /* 通知卡（与 notice 条状提示是两族，前缀刻意不同） */
-@import './components/query-state.css';
-@import './components/loading.css'; /* 加载态（转圈 + 遮罩）：三态容器看 QueryState，块级占位看 Skeleton */
-
-/* 浮层皮肤（与操作层并列组合：对话框走原生 <dialog>，提示走 hover 档） */
-@import './components/dialog.css';
-@import './components/drawer.css'; /* 抽屉：与 dialog 同一套行为只换落位（模态 / 遮罩 / Esc 都由原生 <dialog> 承担） */
-@import './components/tooltip.css'; /* 浮层皮肤：类名 .mh-tooltip*（与族名 / 令牌同根） */
-
-/* 数据与反馈（表格 / 分页条 / 页签条 / 步骤条 / 消息提示） */
-@import './components/table.css';
-@import './components/pagination.css';
-@import './components/tabbar.css';
-@import './components/steps.css';
-@import './components/toast.css';
-
-/* 内容与文件 */
-@import './components/upload.css';
+/**
+ * @manohub/ui 组件面入口（对外公开为 `@manohub/ui/styles.css`）。
+ *
+ * 本层是**无 JS 组件面**：只声明类与状态协议（原生伪类 / `[data-state]` / `attr()`），
+ * **零令牌定义** —— 令牌一律消费主题。故加载顺序固定：
+ *
+ *     @manohub/theme/default.css（全局值） → styles.css（组件令牌基础值 → 面）
+ *
+ * 换主题只换前一行；静态页（不装 Vue）同样只需这两行。
+ *
+ * ## 令牌三段（0.6.0 起）
+ *
+ * | 段 | 命名 | 落点 | 锚 |
+ * |---|---|---|---|
+ * | 全局令牌（跨件共用的值） | `--ui-{primary,base-*,space-*,radius-*,shadow-*,font-*}`、尺寸档（`--ui-control-height-*` / `--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（只有盒模型 + 容器基座；先于值 → 面，消费方写任何元素选择器都能盖过它） ===== */
+@import './reset.css';
+
+/* ===== 值：组件令牌基础值（锚 `[data-manohub-ui]`，与主题令牌同层序） ===== */
+/* 容器与分区 */
+@import './components/collapse.tokens.css';
+@import './components/divider.tokens.css';
+
+/* 数据展示 */
+@import './components/tree.tokens.css';
+@import './components/badge.tokens.css';
+@import './components/tag.tokens.css';
+@import './components/avatar.tokens.css';
+@import './components/skeleton.tokens.css';
+@import './components/code-block.tokens.css';
+
+/* 表单与选择控件 */
+@import './components/button.tokens.css';
+@import './components/input.tokens.css';
+@import './components/select.tokens.css';
+@import './components/switch.tokens.css';
+@import './components/form.tokens.css';
+@import './components/checkbox.tokens.css';
+@import './components/radio.tokens.css';
+@import './components/capsule.tokens.css';
+/* 筛选条没有自己的令牌：字段区几何一律继承 Form 的默认档 */
+
+/* 反馈与三态 */
+@import './components/notice.tokens.css';
+@import './components/notification.tokens.css';
+@import './components/loading.tokens.css';
+
+/* 浮层皮肤 */
+@import './components/dialog.tokens.css';
+@import './components/drawer.tokens.css';
+@import './components/tooltip.tokens.css';
+
+/* 数据与反馈 */
+@import './components/table.tokens.css';
+@import './components/pagination.tokens.css';
+@import './components/tabbar.tokens.css';
+@import './components/steps.tokens.css';
+@import './components/toast.tokens.css';
+
+/* 内容与文件 */
+@import './components/upload.tokens.css';
+
+/* ===== 面：零令牌定义，只声明类与状态协议 ===== */
+/* 操作层（零 JS 原语，自身不带面；面由下面的皮肤族并列组合提供） */
+@import './operations/collapse.css';
+@import './operations/popup.css';
+@import './operations/tabs.css';
+
+/* 容器与分区 */
+@import './components/page.css'; /* 页面级骨架（唯一；区域级是 Panel） */
+@import './components/panel.css';
+@import './components/collapse.css'; /* Collapse 的头行皮肤（行为在 operations/collapse.css） */
+@import './components/card.css';
+@import './components/divider.css'; /* 内容之间的分隔线（设计稿内容区 44 处在用；不是各件自己的框线） */
+@import './components/nav.css';
+@import './components/layout.css'; /* 布局原子件族（Layout.Row 排「行」/ Layout.Column 排「列」）；与任何件都无层序耦合 */
+@import './components/text.css'; /* 排版原子件：`--ui-font-*` 档位令牌的第一个消费者；叶子件，与任何件都无层序耦合 */
+
+/* 数据展示 */
+@import './components/tree.css';
+@import './components/list-view.css';
+@import './components/badge.css';
+@import './components/tag.css';
+@import './components/avatar.css';
+@import './components/skeleton.css';
+@import './components/code-block.css'; /* 代码块族（只读面 / 编辑面 / 角标 / 复制位；复制按钮的面归按钮族，故在其后）；面里靠升一档特异性压过按钮族，见其文件头 */
+
+/* 表单与选择控件（按钮 → 输入 → 选择 → 开关 → 勾选 → 单选（两形态同面）→ 胶囊） */
+@import './components/button.css';
+@import './components/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/notice.css';
+@import './components/notification.css'; /* 通知卡（与 notice 条状提示是两族，前缀刻意不同） */
+@import './components/query-state.css';
+@import './components/loading.css'; /* 加载态（转圈 + 遮罩）：三态容器看 QueryState，块级占位看 Skeleton */
+
+/* 浮层皮肤（与操作层并列组合：对话框走原生 <dialog>，提示走 hover 档） */
+@import './components/dialog.css';
+@import './components/drawer.css'; /* 抽屉：与 dialog 同一套行为只换落位（模态 / 遮罩 / Esc 都由原生 <dialog> 承担） */
+@import './components/tooltip.css'; /* 浮层皮肤：类名 .mh-tooltip*（与族名 / 令牌同根） */
+
+/* 数据与反馈（表格 / 分页条 / 页签条 / 步骤条 / 消息提示） */
+@import './components/table.css';
+@import './components/pagination.css';
+@import './components/tabbar.css';
+@import './components/steps.css';
+@import './components/toast.css';
+
+/* 内容与文件 */
+@import './components/upload.css';

package/dist/styles/operations/collapse.css

@@ -1,84 +1,84 @@
-/**
- * 操作层 · 折叠（零 JS，**只给操作、不给任何面**）。
- *
- * 出处：`@aihub/theme` 的 `playground/components/collapse.css`（本仓第一处照搬操作层）。
- * 映射：`--mh-*` → `--ui-*`；类名加 `.mh-` 前缀；**箭头不再是 CSS 字形**，改由 `@manohub/icon`
- * 的 `<Icon name="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 项）。
- *
- * 三、硬约束：**不写底 / 边 / 圆角 / 内距 / 高 / 字号 / gap** —— 写了就会顶掉皮肤族的属性面
- *   （卡片头的内距与底边线、表单分组头的行高），这正是「根上只加两个类就能组合」的前提。
- */
-.mh-collapse {
-  min-width: 0; /* 仅作状态根 + 作 flex 子项时不横向溢出；面由皮肤给 */
-}
-
-/* 面板组：多条面板纵向成组（组间距属「组容器」的量，不进皮肤）；互斥展开给同组各面板同名 name 即可，原生支持 */
-.mh-collapse-stack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-space-2);
-}
-
-/* ===== 触发器（只做「可点 + 可键盘 + 去原生装饰」） ===== */
-.mh-collapse > :is(summary, .mh-collapse-header) {
-  cursor: pointer;
-  list-style: none; /* 去 <summary> 原生三角标 */
-  user-select: none;
-}
-
-/* Safari 的原生三角标 */
-.mh-collapse > :is(summary, .mh-collapse-header)::-webkit-details-marker {
-  display: none;
-}
-
-/* 可见焦点环：原生触发器（升格自 div）必须自备键盘焦点环 */
-.mh-collapse > :is(summary, .mh-collapse-header):focus-visible {
-  outline: 2px solid var(--ui-primary);
-  outline-offset: -2px;
-}
-
-/* 组件形态的触发器是 <button>：UA 外观归零 —— 只落在 button 上，
-   免得清掉皮肤族的底边线一类属性面 */
-.mh-collapse > button.mh-collapse-header {
-  width: 100%;
-  border: 0;
-  background: none;
-  font: inherit;
-  text-align: left;
-}
-
-/* ===== 收起态派生 ===== */
-details.mh-collapse:not([open]) > :is(summary, .mh-collapse-header) .mh-collapse-caret,
-.mh-collapse[data-state='closed'] > :is(summary, .mh-collapse-header) .mh-collapse-caret {
-  transform: rotate(-90deg);
-}
-
-.mh-collapse[data-state='closed'] > :not(:is(summary, .mh-collapse-header)) {
-  display: none;
-}
-
-details.mh-collapse:not([open]) {
-  gap: 0;
-}
+/**
+ * 操作层 · 折叠（零 JS，**只给操作、不给任何面**）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/collapse.css`（本仓第一处照搬操作层）。
+ * 映射：`--mh-*` → `--ui-*`；类名加 `.mh-` 前缀；**箭头不再是 CSS 字形**，改由 `@manohub/icon`
+ * 的 `<Icon name="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 项）。
+ *
+ * 三、硬约束：**不写底 / 边 / 圆角 / 内距 / 高 / 字号 / gap** —— 写了就会顶掉皮肤族的属性面
+ *   （卡片头的内距与底边线、表单分组头的行高），这正是「根上只加两个类就能组合」的前提。
+ */
+.mh-collapse {
+  min-width: 0; /* 仅作状态根 + 作 flex 子项时不横向溢出；面由皮肤给 */
+}
+
+/* 面板组：多条面板纵向成组（组间距属「组容器」的量，不进皮肤）；互斥展开给同组各面板同名 name 即可，原生支持 */
+.mh-collapse-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-2);
+}
+
+/* ===== 触发器（只做「可点 + 可键盘 + 去原生装饰」） ===== */
+.mh-collapse > :is(summary, .mh-collapse-header) {
+  cursor: pointer;
+  list-style: none; /* 去 <summary> 原生三角标 */
+  user-select: none;
+}
+
+/* Safari 的原生三角标 */
+.mh-collapse > :is(summary, .mh-collapse-header)::-webkit-details-marker {
+  display: none;
+}
+
+/* 可见焦点环：原生触发器（升格自 div）必须自备键盘焦点环 */
+.mh-collapse > :is(summary, .mh-collapse-header):focus-visible {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: -2px;
+}
+
+/* 组件形态的触发器是 <button>：UA 外观归零 —— 只落在 button 上，
+   免得清掉皮肤族的底边线一类属性面 */
+.mh-collapse > button.mh-collapse-header {
+  width: 100%;
+  border: 0;
+  background: none;
+  font: inherit;
+  text-align: left;
+}
+
+/* ===== 收起态派生 ===== */
+details.mh-collapse:not([open]) > :is(summary, .mh-collapse-header) .mh-collapse-caret,
+.mh-collapse[data-state='closed'] > :is(summary, .mh-collapse-header) .mh-collapse-caret {
+  transform: rotate(-90deg);
+}
+
+.mh-collapse[data-state='closed'] > :not(:is(summary, .mh-collapse-header)) {
+  display: none;
+}
+
+details.mh-collapse:not([open]) {
+  gap: 0;
+}