@manohub/ui 0.10.4 → 1.0.0

package/dist/styles/components/tree.css

@@ -1,173 +1,173 @@
-/**
- * Tree（自建树：节点行 + 缩进 + 展开箭头 + 计数徽标位）。
- *
- * 几何取自 `@aihub/theme` 的 `components/tree.css` 与设计稿《MH后台-0911》的 `0:3921` 组织树，
- * 见下方令牌块与形态注释。
- */
-
-/* ===== 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」那条）。 */
-.mh-tree {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.mh-tree__row {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-1);
-  height: var(--ui-tree-row-height);
-  padding: 0 var(--ui-space-2);
-  /* 缩进：基础内距 + level × 步进（level 由组件下发） */
-  padding-left: calc(var(--ui-tree-indent-base) + var(--mh-tree-level, 0) * var(--ui-tree-indent-step));
-  border-radius: var(--ui-radius-control);
-  font-size: var(--ui-font-caption);
-  color: var(--ui-base-content);
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-/* 紧凑档（S）：节点行 28px */
-
-.mh-tree--compact .mh-tree__row {
-  height: var(--ui-tree-row-height-compact);
-}
-
-.mh-tree__row:hover {
-  background: var(--ui-primary-weak);
-}
-
-.mh-tree__row:active {
-  background: var(--ui-primary-subtle);
-}
-
-.mh-tree__row[data-selected='true'] {
-  background: var(--ui-primary-subtle);
-  color: var(--ui-primary);
-}
-
-/* 展开箭头：字形由 `@manohub/icon` 的 `<Icon name="chevron-down" />` 提供（本面不画字形）；
-   展开态即字形的本向（朝下），**收起态由本层转 −90°（指向右）** —— 与 `operations/collapse.css`
-   的 `.mh-collapse-caret` 同款配方（参考实现 `@aihub/theme` 的树也是「base 字形 + 收起态转竖向」）。 */
-
-.mh-tree__caret {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  /* 槽位与字形同档：常规图标一律 `--ui-font-icon`，本件不再自定箭头尺寸 */
-  width: var(--ui-font-icon);
-  height: var(--ui-font-icon);
-  color: var(--ui-base-content-subtle);
-  cursor: pointer;
-}
-
-/* 常规图标尺寸统一取全局图标档（`<Icon>` 的 width/height 是属性，优先级低于本规则） */
-.mh-tree__caret-icon {
-  width: var(--ui-font-icon);
-  height: var(--ui-font-icon);
-  transition: transform 0.15s ease;
-}
-
-/* 自定义箭头（`renderCaret`）：消费方给的字形落在槽里即取同一档，不必自己写 size
-   —— 上面那条只认缺省字形的类名，故这里按**槽内的字形**给尺寸（`<Icon>` 的 width/height
-   是属性，优先级低于类规则）。朝向不在这里转：自定义箭头由消费方按展开态自选字形。 */
-.mh-tree__caret svg {
-  width: var(--ui-font-icon);
-  height: var(--ui-font-icon);
-}
-
-.mh-tree__caret[data-expanded='false'] .mh-tree__caret-icon {
-  transform: rotate(-90deg);
-}
-
-/* 叶子节点：占位不显示图形，但保留槽位让同层文字对齐（槽位由 `.mh-tree__caret` 的宽高承担） */
-
-.mh-tree__caret--empty {
-  cursor: default;
-}
-
-/* 节点图标槽（`renderIcon`）：标签**前**的一位图标（文件夹 / 文件）。父 / 叶共用一位，
-   叶子行上面那句箭头占位仍在，故图标列跨层级对齐。
-   **颜色不写死**：跟随行色 —— 选中行（面上已把行色换成主色 `--ui-primary`）与滑过态自动同步。 */
-
-.mh-tree__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--ui-font-icon);
-  height: var(--ui-font-icon);
-}
-
-/* 槽内的字形同取全局图标档（同自定义箭头那条的理由） */
-.mh-tree__icon svg {
-  width: var(--ui-font-icon);
-  height: var(--ui-font-icon);
-}
-
-.mh-tree__label {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mh-tree__extra {
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-/* 行尾操作区：默认隐藏，行悬浮（或行内获得焦点）时显形 —— 键盘 Tab 进来同样可见。
-   触屏没有 hover 能力，故 hover 缺失时恒显形，避免操作不可达。口径同 .mh-list-view__card-actions。 */
-
-.mh-tree__actions {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-space-1);
-  flex-shrink: 0;
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-
-.mh-tree__row:hover .mh-tree__actions {
-  opacity: 1;
-}
-
-.mh-tree__row:focus-within .mh-tree__actions {
-  opacity: 1;
-}
-
-@media (hover: none) {
-  .mh-tree__actions {
-    opacity: 1;
-  }
-}
+/**
+ * Tree（自建树：节点行 + 缩进 + 展开箭头 + 计数徽标位）。
+ *
+ * 几何取自 `@aihub/theme` 的 `components/tree.css` 与设计稿《MH后台-0911》的 `0:3921` 组织树，
+ * 见下方令牌块与形态注释。
+ */
+
+/* ===== 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」那条）。 */
+.mh-tree {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.mh-tree__row {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  height: var(--ui-tree-row-height);
+  padding: 0 var(--ui-space-2);
+  /* 缩进：基础内距 + level × 步进（level 由组件下发） */
+  padding-left: calc(var(--ui-tree-indent-base) + var(--mh-tree-level, 0) * var(--ui-tree-indent-step));
+  border-radius: var(--ui-radius-control);
+  font-size: var(--ui-font-caption);
+  color: var(--ui-base-content);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+/* 紧凑档（S）：节点行 28px */
+
+.mh-tree--compact .mh-tree__row {
+  height: var(--ui-tree-row-height-compact);
+}
+
+.mh-tree__row:hover {
+  background: var(--ui-primary-weak);
+}
+
+.mh-tree__row:active {
+  background: var(--ui-primary-subtle);
+}
+
+.mh-tree__row[data-selected='true'] {
+  background: var(--ui-primary-subtle);
+  color: var(--ui-primary);
+}
+
+/* 展开箭头：字形由 `@manohub/icon` 的 `<Icon name="chevron-down" />` 提供（本面不画字形）；
+   展开态即字形的本向（朝下），**收起态由本层转 −90°（指向右）** —— 与 `operations/collapse.css`
+   的 `.mh-collapse-caret` 同款配方（参考实现 `@aihub/theme` 的树也是「base 字形 + 收起态转竖向」）。 */
+
+.mh-tree__caret {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  /* 槽位与字形同档：常规图标一律 `--ui-font-icon`，本件不再自定箭头尺寸 */
+  width: var(--ui-font-icon);
+  height: var(--ui-font-icon);
+  color: var(--ui-base-content-subtle);
+  cursor: pointer;
+}
+
+/* 常规图标尺寸统一取全局图标档（`<Icon>` 的 width/height 是属性，优先级低于本规则） */
+.mh-tree__caret-icon {
+  width: var(--ui-font-icon);
+  height: var(--ui-font-icon);
+  transition: transform 0.15s ease;
+}
+
+/* 自定义箭头（`renderCaret`）：消费方给的字形落在槽里即取同一档，不必自己写 size
+   —— 上面那条只认缺省字形的类名，故这里按**槽内的字形**给尺寸（`<Icon>` 的 width/height
+   是属性，优先级低于类规则）。朝向不在这里转：自定义箭头由消费方按展开态自选字形。 */
+.mh-tree__caret svg {
+  width: var(--ui-font-icon);
+  height: var(--ui-font-icon);
+}
+
+.mh-tree__caret[data-expanded='false'] .mh-tree__caret-icon {
+  transform: rotate(-90deg);
+}
+
+/* 叶子节点：占位不显示图形，但保留槽位让同层文字对齐（槽位由 `.mh-tree__caret` 的宽高承担） */
+
+.mh-tree__caret--empty {
+  cursor: default;
+}
+
+/* 节点图标槽（`renderIcon`）：标签**前**的一位图标（文件夹 / 文件）。父 / 叶共用一位，
+   叶子行上面那句箭头占位仍在，故图标列跨层级对齐。
+   **颜色不写死**：跟随行色 —— 选中行（面上已把行色换成主色 `--ui-primary`）与滑过态自动同步。 */
+
+.mh-tree__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--ui-font-icon);
+  height: var(--ui-font-icon);
+}
+
+/* 槽内的字形同取全局图标档（同自定义箭头那条的理由） */
+.mh-tree__icon svg {
+  width: var(--ui-font-icon);
+  height: var(--ui-font-icon);
+}
+
+.mh-tree__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mh-tree__extra {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* 行尾操作区：默认隐藏，行悬浮（或行内获得焦点）时显形 —— 键盘 Tab 进来同样可见。
+   触屏没有 hover 能力，故 hover 缺失时恒显形，避免操作不可达。口径同 .mh-list-view__card-actions。 */
+
+.mh-tree__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.mh-tree__row:hover .mh-tree__actions {
+  opacity: 1;
+}
+
+.mh-tree__row:focus-within .mh-tree__actions {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .mh-tree__actions {
+    opacity: 1;
+  }
+}

package/dist/styles/components/upload.css

@@ -1,151 +1,151 @@
-/**
- * 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` 供读图。
- *
- * **本件不自行发起请求**：文件列表由消费方受控（`files`），选择 / 删除 / 拖拽都只回调。
- */
-.mh-upload {
-  /* 组件根：上传区与文件列表纵向排（间距 12） */
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-space-3);
-}
-
-/* ===== 拖拽 / 点击上传区（整块即触发器） ===== */
-.mh-upload__zone {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ui-space-1);
-  width: 100%;
-  max-width: var(--ui-upload-zone-max-width);
-  padding: var(--ui-upload-padding);
-  border: 1px dashed var(--ui-upload-line);
-  border-radius: var(--ui-upload-radius);
-  background: var(--ui-base-100);
-  text-align: center;
-  cursor: pointer;
-}
-/* 隐身开关：1px 盒 + clip-path，Tab 仍可达（与 checkbox / radio / capsule 同配方） */
-.mh-upload__input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  clip-path: inset(50%);
-  appearance: none;
-  pointer-events: none;
-}
-/* 焦点环画在可见的区上（隐身开关没有可见焦点） */
-.mh-upload__zone:has(> .mh-upload__input:focus-visible) {
-  outline: 2px solid var(--ui-primary);
-  outline-offset: -2px;
-}
-/* 拖拽态（组件下发；原生无此态） */
-.mh-upload__zone[data-state='dragover'],
-.mh-upload__zone.is-dragover {
-  border-color: var(--ui-primary);
-  background: var(--ui-primary-weak);
-}
-/* 禁用：不可点（原生 disabled 与静态档同款） */
-.mh-upload__zone.is-disabled,
-.mh-upload__zone:has(> .mh-upload__input:disabled) {
-  border-color: var(--ui-base-300);
-  background: var(--ui-base-200);
-  cursor: not-allowed;
-}
-.mh-upload__zone-main {
-  font-size: var(--ui-font-caption);
-  color: var(--ui-upload-text);
-}
-.mh-upload__link {
-  color: var(--ui-primary);
-}
-.mh-upload__zone-hint {
-  font-size: var(--ui-upload-meta-size);
-  color: var(--ui-upload-hint);
-}
-
-/* ===== 已传文件列表（名称 + 大小 + 删除；末行不画线） ===== */
-.mh-upload__list {
-  width: 100%;
-  max-width: var(--ui-upload-zone-max-width);
-  border: 1px solid var(--ui-base-300);
-  border-radius: var(--ui-upload-radius);
-  overflow: hidden;
-}
-.mh-upload__item {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-3);
-  padding: var(--ui-space-2) var(--ui-space-3);
-  border-bottom: 1px solid var(--ui-base-300);
-}
-.mh-upload__item:last-child {
-  border-bottom: none;
-}
-.mh-upload__item-name {
-  font-size: var(--ui-font-caption);
-  color: var(--ui-base-content);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.mh-upload__item-size {
-  flex: none;
-  font-size: var(--ui-upload-meta-size);
-  color: var(--ui-base-content-subtle);
-}
-/* 删除位推到最右（面归按钮族的文本档，这里只给定位） */
-.mh-upload__item-remove {
-  margin-left: auto;
-  flex: none;
-}
-
-/* ===== 图片缩略图（单张 / 列表） ===== */
-.mh-upload__thumb {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: var(--ui-upload-thumb-size);
-  height: var(--ui-upload-thumb-size);
-  padding: var(--ui-space-2);
-  border: 1px solid var(--ui-base-300);
-  border-radius: var(--ui-upload-radius);
-  background: var(--ui-base-200);
-  font-size: var(--ui-upload-meta-size);
-  color: var(--ui-base-content-subtle);
-  overflow: hidden;
-}
-.mh-upload__thumb-img {
-  display: block; /* 元素级基线不再把 `img` 转块级（那条会压消费方的 `h-*` / `hidden`），本件自己写 */
-  width: var(--ui-upload-thumb-inner);
-  height: var(--ui-upload-thumb-inner);
-  object-fit: cover;
-  border-radius: var(--ui-radius-sm);
-}
-.mh-upload__thumbs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--ui-space-4);
-}
+/**
+ * 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` 供读图。
+ *
+ * **本件不自行发起请求**：文件列表由消费方受控（`files`），选择 / 删除 / 拖拽都只回调。
+ */
+.mh-upload {
+  /* 组件根：上传区与文件列表纵向排（间距 12） */
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-3);
+}
+
+/* ===== 拖拽 / 点击上传区（整块即触发器） ===== */
+.mh-upload__zone {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-space-1);
+  width: 100%;
+  max-width: var(--ui-upload-zone-max-width);
+  padding: var(--ui-upload-padding);
+  border: 1px dashed var(--ui-upload-line);
+  border-radius: var(--ui-upload-radius);
+  background: var(--ui-base-100);
+  text-align: center;
+  cursor: pointer;
+}
+/* 隐身开关：1px 盒 + clip-path，Tab 仍可达（与 checkbox / radio / capsule 同配方） */
+.mh-upload__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+  appearance: none;
+  pointer-events: none;
+}
+/* 焦点环画在可见的区上（隐身开关没有可见焦点） */
+.mh-upload__zone:has(> .mh-upload__input:focus-visible) {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: -2px;
+}
+/* 拖拽态（组件下发；原生无此态） */
+.mh-upload__zone[data-state='dragover'],
+.mh-upload__zone.is-dragover {
+  border-color: var(--ui-primary);
+  background: var(--ui-primary-weak);
+}
+/* 禁用：不可点（原生 disabled 与静态档同款） */
+.mh-upload__zone.is-disabled,
+.mh-upload__zone:has(> .mh-upload__input:disabled) {
+  border-color: var(--ui-base-300);
+  background: var(--ui-base-200);
+  cursor: not-allowed;
+}
+.mh-upload__zone-main {
+  font-size: var(--ui-font-caption);
+  color: var(--ui-upload-text);
+}
+.mh-upload__link {
+  color: var(--ui-primary);
+}
+.mh-upload__zone-hint {
+  font-size: var(--ui-upload-meta-size);
+  color: var(--ui-upload-hint);
+}
+
+/* ===== 已传文件列表（名称 + 大小 + 删除；末行不画线） ===== */
+.mh-upload__list {
+  width: 100%;
+  max-width: var(--ui-upload-zone-max-width);
+  border: 1px solid var(--ui-base-300);
+  border-radius: var(--ui-upload-radius);
+  overflow: hidden;
+}
+.mh-upload__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-3);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  border-bottom: 1px solid var(--ui-base-300);
+}
+.mh-upload__item:last-child {
+  border-bottom: none;
+}
+.mh-upload__item-name {
+  font-size: var(--ui-font-caption);
+  color: var(--ui-base-content);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mh-upload__item-size {
+  flex: none;
+  font-size: var(--ui-upload-meta-size);
+  color: var(--ui-base-content-subtle);
+}
+/* 删除位推到最右（面归按钮族的文本档，这里只给定位） */
+.mh-upload__item-remove {
+  margin-left: auto;
+  flex: none;
+}
+
+/* ===== 图片缩略图（单张 / 列表） ===== */
+.mh-upload__thumb {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--ui-upload-thumb-size);
+  height: var(--ui-upload-thumb-size);
+  padding: var(--ui-space-2);
+  border: 1px solid var(--ui-base-300);
+  border-radius: var(--ui-upload-radius);
+  background: var(--ui-base-200);
+  font-size: var(--ui-upload-meta-size);
+  color: var(--ui-base-content-subtle);
+  overflow: hidden;
+}
+.mh-upload__thumb-img {
+  display: block; /* 元素级基线不再把 `img` 转块级（那条会压消费方的 `h-*` / `hidden`），本件自己写 */
+  width: var(--ui-upload-thumb-inner);
+  height: var(--ui-upload-thumb-inner);
+  object-fit: cover;
+  border-radius: var(--ui-radius-sm);
+}
+.mh-upload__thumbs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ui-space-4);
+}