@manohub/ui 0.9.0 → 0.10.1

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

@@ -16,8 +16,19 @@ export interface TableColumn {
      */
     width?: string | number;
     align?: 'left' | 'center' | 'right';
-    /** 长文本省略（表头仍完整）。`fixed` 下建议给所有长文本列都标上，否则会换行（行高变高） */
-    ellipsis?: boolean;
+    /**
+     * 允许该列**换行**（缺省不换行：`nowrap` + 省略号）。
+     *
+     * <p>缺省不换行是刻意的：换行只会把行高顶高（`td` 的 `height` 只是**下限**），
+     * 而且必然伴随从字符间断字（实测序号列窄到装不下两位数时，`10` 被拆成 `1` / `0` 两行、
+     * 行高 30 → 49）。真要换行的列（描述 / 备注 / 多行摘要）显式打开它。</p>
+     *
+     * <p><b>只影响 `layout="fixed"`</b>：`auto` 档列宽由内容计算，表体本来就换行
+     * （不换行会让长文本列不再收敛、表格更容易撑破容器），故本档给不给都一样。</p>
+     *
+     * <p>只作用于表体 `td`；表头始终 `nowrap`（表头字短，换行只会让表头行变高）。</p>
+     */
+    wrap?: boolean;
     /**
      * 列下限（px）：防止窄容器把该列压没。**给了才下发 `min-width`** ——
      * ⚠️ 它**不是硬下限**：实测（Chrome）`<col>` 上的 `min-width` 会被当成**分配权重**参与按比例
@@ -72,13 +83,13 @@ export interface TablePagination {
  *   组件自己切片会让「服务端分页」与「客户端分页」两套口径藏在同一个 prop 里；
  * - **错误态**：归 `QueryState`（表格只管列数据）。
  *
- * @example 基本列表（表默认满宽；列宽给权重 + `fixed` 才严格按比例，长文本列配 `ellipsis`）
+ * @example 基本列表（表默认满宽；列宽给权重 + `fixed` 才严格按比例）
  * <Table
  *   layout="fixed" striped row-key="id" :data="rows"
  *   :columns="[
  *     { key: 'name', title: '名称', width: 3 },
  *     { key: 'amount', title: '金额', width: 1, align: 'right' },
- *     { key: 'description', title: '描述', width: 4, ellipsis: true },
+ *     { key: 'description', title: '描述', width: 4, wrap: true },
  *   ]"
  *   :pagination="{ total: 120, current: page, onChange: (p) => (page = p) }"
  * />
@@ -164,8 +175,8 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
      * - `auto`（缺省）—— 列宽随内容自适应。`column.width` 是**建议值**，
      *   长文本（尤其中文长串 / 无空格串）会顶破列宽把表格撑得比容器还宽 ⇒ 包裹层出横向滚动条。
      * - `fixed` —— `table-layout: fixed`：列宽受声明约束、**不再被内容撑破**，
-     *   于是百分比 / 数字权重可以「吃满容器 + 严格按比例」。代价：长文本列要显式 `ellipsis: true`，
-     *   否则会**换行**（行高变高）。
+     *   于是百分比 / 数字权重可以「吃满容器 + 严格按比例」。表体**默认不换行**（`nowrap` + 省略号），
+     *   要换行的列显式 `wrap: true`。
      */
     layout: {
         type: PropType<"auto" | "fixed">;
@@ -311,8 +322,8 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
      * - `auto`（缺省）—— 列宽随内容自适应。`column.width` 是**建议值**，
      *   长文本（尤其中文长串 / 无空格串）会顶破列宽把表格撑得比容器还宽 ⇒ 包裹层出横向滚动条。
      * - `fixed` —— `table-layout: fixed`：列宽受声明约束、**不再被内容撑破**，
-     *   于是百分比 / 数字权重可以「吃满容器 + 严格按比例」。代价：长文本列要显式 `ellipsis: true`，
-     *   否则会**换行**（行高变高）。
+     *   于是百分比 / 数字权重可以「吃满容器 + 严格按比例」。表体**默认不换行**（`nowrap` + 省略号），
+     *   要换行的列显式 `wrap: true`。
      */
     layout: {
         type: PropType<"auto" | "fixed">;

package/dist/components/table/index.js

@@ -68,8 +68,8 @@ const Table = /* @__PURE__ */ defineComponent({
      * - `auto`（缺省）—— 列宽随内容自适应。`column.width` 是**建议值**，
      *   长文本（尤其中文长串 / 无空格串）会顶破列宽把表格撑得比容器还宽 ⇒ 包裹层出横向滚动条。
      * - `fixed` —— `table-layout: fixed`：列宽受声明约束、**不再被内容撑破**，
-     *   于是百分比 / 数字权重可以「吃满容器 + 严格按比例」。代价：长文本列要显式 `ellipsis: true`，
-     *   否则会**换行**（行高变高）。
+     *   于是百分比 / 数字权重可以「吃满容器 + 严格按比例」。表体**默认不换行**（`nowrap` + 省略号），
+     *   要换行的列显式 `wrap: true`。
      */
     layout: {
       type: String,
@@ -177,7 +177,7 @@ const Table = /* @__PURE__ */ defineComponent({
     const leadColumns = computed(() => (hasSelectColumn.value ? 1 : 0) + (props.expandable ? 1 : 0));
     const columnCount = computed(() => leadColumns.value + props.columns.length);
     const isEmpty = computed(() => props.data.length === 0);
-    const cellClass = (column) => [column.align === "center" ? "mh-table__cell-center" : "", column.align === "right" ? "mh-table__cell-amount" : "", column.ellipsis ? "mh-table__cell-ellipsis" : ""].filter(Boolean);
+    const cellClass = (column) => [column.align === "center" ? "mh-table__cell-center" : "", column.align === "right" ? "mh-table__cell-amount" : "", column.wrap ? "mh-table__cell-wrap" : ""].filter(Boolean);
     const colStyles = computed(() => {
       const weightSum = props.columns.reduce((sum, item) => typeof item.width === "number" ? sum + item.width : sum, 0);
       return props.columns.map((column) => {

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

@@ -40,9 +40,10 @@ export interface TextProps {
  *
  * ## 与 `Title` / 平台默认的关系
  *
- * 浏览器给 `h1`-`h6` 的字阶已被 reset 归零（`font-size: inherit` / `font-weight: inherit`），
- * 所以 `as="h2"` 只贡献**语义**，视觉完全由 `size` / `weight` 决定 ——
- * 这与「标题的字阶必须跟设计稿」不冲突：要多大显式给 `size`。
+ * `as="h2"` 只贡献**语义**，视觉完全由 `size` / `weight` 决定：字号由 `size` 档（缺省 `body`）显式给，
+ * 浏览器给 `h1`-`h6` 的那套字阶（`1.5em` + 粗体）由**本件自己的面**归零（`.mh-text:where(h1…h6)`，
+ * 只点名标题标签 —— `strong` 的加粗是它唯一的表达，不归零）。元素级基线**不再**代管这条：
+ * 它在 Tailwind 的层外，会压住消费方的 `text-*` 工具类（理由见 `styles/reset.css` 文件头）。
  *
  * ## 不做什么
  *

package/dist/components/toast/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, onBeforeUnmount, createVNode } from "vue";
+import { defineComponent, onMounted, onBeforeUnmount, createVNode, ref, onUpdated } from "vue";
 import { Icon } from "@manohub/icon";
 const TONE_ICON = {
   info: "info",
@@ -110,7 +110,22 @@ const ToastStack = /* @__PURE__ */ defineComponent({
     slots,
     attrs
   }) {
+    const rootRef = ref(null);
+    const raise = () => {
+      const el = rootRef.value;
+      if (!el) return;
+      if (!el.hasAttribute("popover")) el.setAttribute("popover", "manual");
+      if (typeof el.showPopover !== "function") return;
+      try {
+        if (el.matches(":popover-open")) el.hidePopover();
+        el.showPopover();
+      } catch {
+      }
+    };
+    onMounted(raise);
+    onUpdated(raise);
     return () => createVNode("div", {
+      "ref": rootRef,
       "class": ["mh-toast-stack", attrs.class].filter(Boolean).join(" "),
       "style": attrs.style
     }, [slots.default?.()]);

package/dist/styles/components/avatar.css

@@ -22,8 +22,11 @@
   color: var(--ui-base-100); /* 占位前景 */
 }
 
-/* 图片：撑满 + 跟随形态自裁（否则去掉容器 overflow 后长宽不符的图会外溢） */
+/* 图片：撑满 + 跟随形态自裁（否则去掉容器 overflow 后长宽不符的图会外溢）。
+   `display: block` 必须自己写：元素级基线不再把 `img` 转块级（那条会压消费方的 `h-*` / `hidden`），
+   否则行内基线间隙会把圆形头像顶偏。 */
 .mh-avatar > img {
+  display: block;
   width: 100%;
   height: 100%;
   border-radius: inherit;

package/dist/styles/components/badge.css

@@ -89,8 +89,10 @@
   border-color: transparent;
 }
 
+/* 中性软底取 `base-200`（中性面）—— 改前是 `base-50`：那档只比内容底低 1.7 L*，
+   软底淡到与背景不可分（同族 `--primary` 软底也走「弱底」档，此处与之等形）。 */
 .mh-badge--soft.mh-badge--default {
-  --mh-badge-bg: var(--ui-base-50);
+  --mh-badge-bg: var(--ui-base-200);
   --mh-badge-fg: var(--ui-base-content-muted);
 }
 

package/dist/styles/components/button.css

@@ -40,6 +40,8 @@
   font-family: inherit;
   font-size: var(--ui-button-font-size);
   line-height: var(--ui-line-body);
+  /* 链接形态时本体就是 `<a>`（见组件层），基线不再代管 `a { text-decoration: inherit }`，这里自己摘掉下划线 */
+  text-decoration: none;
   cursor: pointer;
   white-space: nowrap;
   /* 三态补间（底 / 边 / 字 / 影） */
@@ -163,10 +165,13 @@
   color: var(--ui-button-accent);
 }
 
-/* ===== 虚线：区域内添加内容 ===== */
+/* ===== 虚线：区域内添加内容 =====
+ * 虚线也是「框」→ 取 `--ui-base-300`（全库唯一的「线 / 框」色，出处 `@manohub/theme` 的
+ * `default/colors.css` 头「三条口径」第 2 条；`base-400` 只服务勾选类小控件框体）。
+ * 改前取的是 `base-400`（"虚线要深一档才看得见"），2026-09-30 按库级口径收敛。 */
 .mh-button--dashed {
   background: var(--ui-base-100);
-  border: 1px dashed var(--ui-base-400);
+  border: 1px dashed var(--ui-base-300);
   color: var(--ui-button-accent);
 }
 .mh-button--dashed:hover,

package/dist/styles/components/filter.css

@@ -1,41 +1,29 @@
 /**
- * Filter 筛选条（`Form` 的一层壳：`Form` + `Form.Header` + 字段区）。
+ * Filter（筛选条）：**本件无自有面 —— 零规则**。
  *
- * ## 一份面只补两件事
+ * 它现在是一层**纯壳**：只给 `Form` 传「排布档 + label 列宽（可选）+ 值模型 + 字段区回车」，
+ * 字段行的排布与几何**全部沿用 `Form`**：
  *
- * 字段行、label 列、控件列、上行与两颗按钮全部复用 `form.css`（`Form` / `Form.Header` /
- * `Form.Item`）——本面**不重画**输入框、label、按钮，只补：
- * 1. 字段区的排布（4 字段一行自动换行，列距 24 / 行距 16）；字段宽自适应
- *    （label 列宽与「上行 ↔ 字段区」的行距由 `Filter` 传给 `Form` 的 `labelWidth` / `gap`，
- *    它们不是 CSS 面的事 —— 见 `components/filter/index.tsx` 的两个常量）。
+ * 1. 字段排布 = `Form` 的多列动态档（本件传 `columns="auto"`）—— 网格轨道**跨行共用**，
+ *    因此换行下来的字段与上一行**逐列对齐**。从前本件自建 flex 字段区
+ *    （`flex: 1 1 240px` + `wrap`），而 flex 的 `grow` 是**按行分配**的：末行只剩一项时
+ *    它独占该行剩余宽度，被拉成通栏 —— 那正是本件 2026-09 交出机制的起因；
+ * 2. label 列宽 / 行距 / 列距 / 字段最小宽 = `Form` 的默认档（令牌 + `.mh-form` 的 8px 档）。
+ *    本件**不设默认值、也不落行内值** —— 写死就是第二份默认值，`Form` 调档时不会跟着变；
+ *    消费方要收紧筛选条的几何，在容器上覆盖 `Form` 的那两个令牌即可（继承生效）；
+ * 3. 表头（`Form.Header`）与字段行（`Form.Item`）一律沿用 `Form`，本件不重画任何一个。
  *
- * 出处：Figma「MH后台 0911」node 0:3355（页面「01.1 技能权限分配」的筛选区），几何 1:1：
- * 上行高 32（右侧两颗按钮）、下行字段「标签 + 10±2px + 控件（高 32 / 圆角 6 / 边 --ui-base-300）」。
+ * ## 为什么还留着这个文件（而不是删掉）
  *
- * 两处**有意不照抄**（理由写在这里，免得后人当成漏项补上）：
- * 1. 稿里「预制筛选方案」矩形上挂了一条**绿色**投影 `DROP_SHADOW(10, #4ec87a@30%)` ——
- *    与主色无关，判定为设计稿误留；本件不画（那颗按钮也不内建）；
- * 2. 稿里底部那条 1px 线**宽 1200**（整页宽），而筛选内容只有 1160 —— 它是**页面级分隔**，
- *    由页面承担；本件画了就会与页面的线叠成双线。
+ * 「组件与面一一配对」是本包的机械护栏（用例 `contract-class-surface` 要求每个组件目录
+ * 都有同名面文件）。本件确实没有自己的类与几何，故这里只留说明文字。它对外的唯一类名是
+ * `.mh-filter__form` —— **结构锚点**（消费方与用例靠它定位这个壳，几何沿用 `.mh-form`），
+ * 已登记在共用台账「只做结构 / 测试锚点、面上没有样式声明的类」里。
  *
- * 同理**不带左右内距**：左右 20 由页面筛选位（`.mh-page__filter` 的 `14px 20px 0`）给，
- * 组件里再给一次会变成 40。label 列宽由 `Filter` 传 `Form` 的 `labelWidth`（缺省 56），
- * 因此本文件**不覆盖主题的 `--ui-form-label-width`**（面上定义 `--ui-*` 必须以本文件名作命名空间）。
+ * ## 与设计稿的关系
+ *
+ * 稿（Figma「MH后台 0911」node 0:3355，页面「01.1 技能权限分配」的筛选区）只用来确定
+ * **筛选条由哪些部件组成**（上行两颗按钮 + 下行若干字段）；几何**不再照抄**稿里的
+ * 68 / 16 / 24 / 240，自 2026-09 起统一走 `Form` 的默认档 —— 取舍见
+ * `components/filter/index.tsx` 的文件头。
  */
-
-/* 字段区：列距 24 / 行距 16，窄了整体换行（不压缩控件高度、不截断标签）。
-   字段区是 `Form` 的直接子节点（`Form.Header` 归位在最前），以下均为 `Form.Item` 自身。 */
-.mh-filter__fields {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  column-gap: var(--ui-space-6);
-  row-gap: var(--ui-space-4);
-}
-
-/* 字段（`Filter.Item` = 挂了这个类的 `Form.Item`）：宽度自适应
-   —— 够宽均分铺满，不够则换行；label 列宽与控件列取用全部来自 form.css。 */
-.mh-filter__item {
-  flex: 1 1 var(--ui-filter-item-min);
-  min-width: 0;
-}

package/dist/styles/components/input.css

@@ -109,15 +109,27 @@
  * 这里只补**作者源没覆盖、会被 `<button>` 的原生 UA 样式漏进来的四项**（实测 Chrome 的 html.css：
  * `button { align-items: flex-start; text-align: center; appearance: auto; font: 400 13.3333px Arial }`）：
  *
- * - `align-items: center` —— 控件是 flex 行，UA 的 `flex-start` 会把值 / 标签顶到上沿；
+ * - `align-items: center` —— 消费方把控件开成 flex 行时（如 `Select` 的 `.mh-select`）拦住 UA 的
+ *   `flex-start`（它会把值 / 标签顶到上沿）。本件缺省**不给 `display`**，控件是 inline-block，此时
+ *   垂直居中来自浏览器对 `<button>` 内容的默认居中 —— 这条声明在那个形态下用不到，留着是与复合件同一份规格；
  * - `text-align: inherit` —— UA 的 `center` 会**继承**给值文本；
  * - `font-weight` / `line-height: inherit` —— UA 的 `font` 简写会把这两项从继承链上摘下来，
  *   而作者源只写了 `font-family` 与 `font-size`（对比：`<input>` 的 UA 不设这两项，故输入框形态天然一致）；
  * - `appearance: none` —— 防仍画原生按钮皮肤的引擎（Safari 一类）。
  *
+ * 外加一条**单行契约**（`white-space: nowrap` + `overflow: hidden` + `text-overflow: ellipsis`）：
+ * 触发器与输入框同为**单行**控件，值再长也不换行。少了它，长值会在定高框里折成两行 ——
+ * 第二行溢出到框的下沿之外、右端图标也被挤走（实测：消费方把值当**裸文本**子节点渲染时必现，
+ * 如 `<Input as="button">{{ 部门名 }}</Input>` 放进窄表格单元格）。截断口径与
+ * `.mh-input__placeholder` / `.mh-select__value` 同源，这里补的是**控件本身**那一层
+ * —— 那两处只管各自的子节点，落在控件上的裸文本没有它们兜。
+ *
  * 禁写：本块不碰框 / 色 / 尺寸 / 内距 —— 那些归 `.mh-input` 与表壳，重复声明就是又开一份会漂的规格。 */
 .mh-input--trigger {
   appearance: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   align-items: center;
   font-weight: inherit;
   line-height: inherit;
@@ -127,6 +139,30 @@
   cursor: pointer;
 }
 
+/* ===== 触发器形态 · 占位文案 =====
+ *
+ * `<button>` **没有 `::placeholder` 伪元素**，故触发器形态的占位由组件渲染一个 span 承载
+ * （判据见 `components/input/index.tsx` 的 `showPlaceholder`）。这里只给它的排版与色。
+ *
+ * `display: block` 是**必要的**（实测四种父级 × 长/短文案）：span 默认是 inline，而 `overflow`
+ * 对行内盒不生效 ⇒ 长占位会直接撑破控件；`block` 之后它撑满控件的内容宽、超长走省略号，
+ * 且在**父级是 flex**（如 `Select` 的触发器）时会被 blockify，行为与 inline 一致
+ * —— 两种父级下都对，故不要求消费方给控件开 flex。`min-width: 0` 供 flex 父级下允许收缩。
+ * `flex: 1` 是给**父级是 flex** 的复合件用的（`Select` 的值区`.mh-select__value` 就是这个配方）：
+ * 实测同样的「占位 + 右侧箭头」在 flex 父级下，不给 `flex: 1` 时占位只有**内容宽**（48px）、
+ * 给了才撑满到箭头前（207 / 可用 220）—— 少了它会让选择器的占位区窄成一截。
+ * 父级不是 flex 时 `flex` 属性被忽略，故对单件用法无副作用。
+ * 色与原生 `.mh-input::placeholder` 同档（弱文本），选择器值区的 `--placeholder` 也是这一档。 */
+.mh-input__placeholder {
+  display: block;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ui-base-content-subtle);
+}
+
 /* ===== 触发器形态 · 整箱热区（命中测试重定向，纯 CSS） =====
  *
  * 目的：让**整件**（值 / 标签 + 右侧图标 + 左右内距）都等同于点那个原生触发按钮。

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

@@ -28,9 +28,11 @@
   --ui-input-font-size: var(--ui-font-body); /* 14：控件内容走正文档 */
   --ui-input-font-size-sm: var(--ui-font-caption); /* 13 */
   --ui-input-font-size-lg: var(--ui-font-heading); /* 16 */
-  /* 描边取 base-300（= 设计 `0:3946` 搜索框的 `#e6e6e6`），与卡片 / 表格 / 按钮 / 分页同一条线。
-     ⚠️ 改前是 base-400，而 `filter.css` 的既有裁决早已写明「控件框边 = --ui-base-300」——
-     本件与它是同一条规格，之前的 base-400 属自相矛盾。base-400 从此只服务勾选类小控件框体。 */
+  /* 描边取 base-300 —— 这**不是本件自选**，是库级口径：`base-300` 是全库唯一的「线 / 框」色
+     （输入框、按钮、表格、分页项、卡片、面板、分隔线一律取它），`base-400` 只服务勾选类小控件框体。
+     权威出处是 `@manohub/theme` 的 `default/colors.css` 头「三条口径」第 2 条（改值前先读那三条）。
+     括注的 `#e6e6e6` 是 **default** 套该槽位的值；**farris** 套同槽位取 Ne08（`#e8ebf2`）——
+     两套值不同、槽位语义相同，别按规范原文给输入框的 Ne04 来反推（那正是本件改前的 base-400）。 */
   --ui-input-line: var(--ui-base-300);
   --ui-input-line-hover: var(--ui-primary-hover); /* 滑过 / 聚焦转主色（规范 Th08） */
   --ui-input-textarea-min-height: 56px; /* 多行最小高（两行正文 + 上下内距） */

package/dist/styles/components/pagination.css

@@ -253,7 +253,13 @@
   --ui-pagination-font-size: var(--ui-font-body);
 }
 
-/* ===== 跳页（showQuickJumper） ===== */
+/* ===== 跳页（showQuickJumper） =====
+ *
+ * 跳页框是**输入框**，画线取 `--ui-base-300` —— 与 `Input` 同一条口径（`base-300` 是全库唯一的
+ * 「线 / 框」色，出处 `@manohub/theme` 的 `default/colors.css` 头「三条口径」第 2 条；
+ * `base-400` 只服务勾选类小控件框体）。**改前取的是 `base-400`**：同一个「输入框」在库里因此
+ * 有过两种线色，属跨件口径漏改（2026-09-30 收敛）。
+ * 禁用档与 `Input` 同构：底转 `base-200`、线仍 `base-300` —— 即**靠底色区分禁用**，不再靠线深。 */
 .mh-pagination__jump {
   display: inline-flex;
   align-items: center;
@@ -265,7 +271,7 @@
   width: 56px;
   height: var(--ui-pagination-item-size);
   padding: 0 var(--ui-space-2);
-  border: 1px solid var(--ui-base-400);
+  border: 1px solid var(--ui-base-300);
   border-radius: var(--ui-pagination-item-radius);
   background: var(--ui-base-100);
   font-family: inherit;

package/dist/styles/components/select.css

@@ -23,6 +23,9 @@
  * 表壳挂 `.mh-popup-anchor`（`anchor-name`）、面板挂 `.mh-popup--anchored`（`position-anchor`），
  * 锚点即整件；非锚定场景回落到 240px 兜底值。
  *
+ * **面板有高度上限**：`--ui-select-panel-max-height`（默认 320px）钉在面板根上，超出即内容区
+ * （`.mh-select__body`）滚动、搜索行常驻 —— 列表与树两形态共用这一份，形态里不许各写限高。
+ *
  * **一处有色差异**：规范的选中行是灰底（Ne10），本仓的「选中」统一走**主色浅底**
  * `--ui-primary-subtle`（与列表 / 树的选中态同一语义槽位），否则悬停（Ne11）与选中（Ne10）两档灰
  * 在本仓有限的灰阶里挤成同色、看不出选中。
@@ -66,7 +69,9 @@
   height: calc(var(--ui-select-chip-height) - 4px);
 }
 
-/* 无选中值时的提示文字（组件把 placeholder 渲染进 `__value` 并挂这个修饰类） */
+/* 值区：有值时的单选那一行（占满剩余宽、超出省略）。
+   ⚠️ **无值态不在这里** —— 占位由输入面渲染（`.mh-input__placeholder`，色与截断同档）：
+   2026-09-29 收敛，此前本文件还有一个 `--placeholder` 修饰类专门给占位上灰字。 */
 .mh-select__value {
   flex: 1;
   min-width: 0;
@@ -74,9 +79,6 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.mh-select__value--placeholder {
-  color: var(--ui-base-content-subtle);
-}
 /* 下拉箭头：渲染在输入面的**右侧图标位**（`.mh-input__suffix`，表壳的子元素）里 ——
    位置由表壳的 flex 排布给（控件 `flex: 1 1 auto` 自然把附加位挤到右端），故不再需要 `margin-left: auto`。
    字形由 @manohub/icon 给；展开转向由 popup.css 的 `.mh-popup-caret` 承担（含触发器进表壳后的兄弟档）；
@@ -107,10 +109,25 @@
   background: var(--ui-base-200);
   color: var(--ui-base-content-muted);
 }
-/* ===== 面板皮肤（与操作层并列组合：`class="mh-popup mh-select__panel mh-popup--anchored"`） ===== */
+/* ===== 面板皮肤（与操作层并列组合：`class="mh-popup mh-select__panel mh-popup--anchored"`） =====
+   **面板是列容器 + 限高**：搜索行常驻（不滚），下一条的 `.mh-select__body` 承担滚动 ——
+   列表与树两形态因此共用同一份「长内容不撑破面板」的规格。
+   （历史症状：限高原先只写在树体 `.mh-select__tree` 上，而列表形态的选项是面板的**直接子节点**，
+   面板会被一路撑高；实测 60 条选项的面板高 2212px、视口只有 925px。） */
 .mh-select__panel {
   /* 锚 = `.mh-popup-anchor`（挂在表壳上）→ 面板与**整件**同宽；非锚定场景回落 240 */
   width: anchor-size(width, 240px);
+  /* 列容器：搜索行 `flex: none` + 内容区 `flex: 1 / min-height: 0`。
+     ⚠️ 加 `display: flex` 会以作者源压过 UA 给**收起态**定的 `display: none`，收起态靠操作层
+     `operations/popup.css` 里那条 `:is()` 兜底（把收起的浮层重新钉成 `display: none`，
+     特异性 0-3-0、高于本行）—— **那条兜底不能删**（与 `dialog.css` 同一处坑）。 */
+  display: flex;
+  flex-direction: column;
+  /* 限高（**含搜索行**）：超出即内容区滚动。面板仍贴锚点，只是不再无限长 */
+  max-height: var(--ui-select-panel-max-height);
+  /* UA 给 `[popover]` 的是 `overflow: auto`，必须归零：内容区已是滚动容器，
+     留一层就会与它叠成两条滚动条（同一个面板上实测会同时出现）。 */
+  overflow: hidden;
   padding: var(--ui-space-1) 0;
   border-radius: var(--ui-select-radius);
   background: var(--ui-base-100);
@@ -120,6 +137,15 @@
   box-shadow: var(--ui-shadow-popover);
 }
 
+/* 内容区：**面板里唯一的滚动容器**（列表体的选项行 / 树体的树都装在它里面）。
+   `min-height: 0` 是这一档生效的前提：列容器里弹性项的可收缩下限默认取内容高，
+   不给它，内容就永远压不下去、上面的限高形同虚设（与 `panel.css` 的 `.mh-panel__body` 同款）。 */
+.mh-select__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
 /* 选项行：滑过 / 选中 / 禁用 / 提示 / 空态 */
 .mh-select__option {
   position: relative;
@@ -214,21 +240,24 @@
   cursor: default;
 }
 
-/* 搜索行（选项多于 8 条时由组件渲染） */
+/* 搜索行（**消费方显式 `searchable` 时才由组件渲染**，件不按选项条数自动决断）。
+   `flex: none`：它是面板的**常驻**行 —— 面板限高时收缩与滚动都归内容区，
+   少了它，搜索行会被一起压扁（列容器里它默认是可收缩的）。 */
 .mh-select__search {
+  flex: none;
   padding: var(--ui-space-2) var(--ui-space-2) var(--ui-space-1);
 }
 
 /* ===== 树体（树选择 `SelectTree` 的面板内容）=====
    边界要认清楚：**面板皮肤归本文件**（上一节），**树的行态归 tree 面**（`.mh-tree__*` 那一族，
    本文件一行都不碰 —— 跨族类名须先登记跨面豁免，这里不走那条路）。
-   故本件只做「把树安放进面板」这一件事：内距 + 限高 + 溢出滚动。
-   行高 / 缩进 / 滑过与选中底色全部沿用 tree 面，两处形态不会漂移。 */
+   故本件只做「把树安放进面板」这一件事：内距。
+   行高 / 缩进 / 滑过与选中底色全部沿用 tree 面，两处形态不会漂移；
+   **限高与滚动也不在这里** —— 那是面板（`.mh-select__panel`）与面板内容区（`.mh-select__body`）的事，
+   列表与树两形态共用同一份（形态里各写一条就会漂移，本件此前正是自己写了一条）。 */
 .mh-select__tree {
   /* 行底满宽、只有内容缩进（缩进公式在 tree 面），故左右各留一个最小呼吸位 */
   padding: 0 var(--ui-space-1) var(--ui-space-1);
-  max-height: var(--ui-select-tree-max-height);
-  overflow-y: auto;
 }
 
 /* 命中高亮（搜索命中的那段文字，由组件的 `renderLabel` 落进 `.mh-tree__label` 槽）。

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

@@ -30,7 +30,8 @@
   --ui-select-option-selected: var(--ui-primary-subtle); /* 见头部「有色差异」 */
   --ui-select-chip-height: 24px; /* 多选标签（规范复用标签族 24 档） */
   --ui-select-icon-size: var(--ui-font-icon); /* 下拉箭头：常规图标档 */
-  /* 树形态（SelectTree）：面板内树体的限高 —— 约等于 9 行（行高 34 + 行距 6 的节距 40 见 tree.css），
-     超过即滚动，长树不把面板撑成整屏 */
-  --ui-select-tree-max-height: 320px;
+  /* 面板限高（**列表与树两形态共用**）：面板整体（含搜索行）不超此高，超出即内容区滚动。
+     320px ≈ 8 行选项（选项行 36 + 面板上下内距 8）；树形态可见行数按 tree 面的节距 40 折算
+     （行高 34 + 行距 6），有无搜索行会差一行上下。要改高度改这枚令牌，不要在业务侧压 max-height。 */
+  --ui-select-panel-max-height: 320px;
 }

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

@@ -27,9 +27,11 @@
   --ui-steps-connector-length: 58.383px; /* 规范实测最小段长（其余由 flex 撑开） */
   --ui-steps-connector-width: 2px;
   --ui-steps-connector-arrow: 6px;
-  /* 连接线沿用 base-400：设计稿里**只有三个向导页**画了连接线（`#cdd2de`），而向导页已判定为旧稿；
-     四个品牌页没有步骤条样张 → 按「未覆盖槽位沿用现值并注明」处理，不做推测性改动。 */
-  --ui-steps-connector-line: var(--ui-base-400);
+  /* 连接线取 base-300（全库唯一的「线 / 框」色，见 `@manohub/theme` 的 `default/colors.css`
+     头「三条口径」第 2 条）—— 改前取的是 base-400。设计稿里**只有三个向导页**画了连接线
+     （`#cdd2de`）而向导页已判定为旧稿，四个品牌页没有步骤条样张 → 按库级口径取线色，
+     不做推测性改动（这枚令牌的档位语义与连接线宽度 / 燕尾尺寸一样，只在「线」这一族内变）。 */
+  --ui-steps-connector-line: var(--ui-base-300);
   --ui-steps-connector-line-active: var(--ui-primary); /* 规范 #4999fe */
   --ui-steps-title-gap: var(--ui-space-3); /* 节点与标题间距 12 */
   --ui-steps-seg-width: 140px;

package/dist/styles/components/table.css

@@ -79,10 +79,10 @@
   border: none;
   border-radius: 0;
 }
-/* 紧凑档 */
+/* 紧凑档（`size="sm"`）：三档 30 / 38 / 46 里的最小档，嵌在卡片 / 面板里的表格用它 */
 .mh-table--xs {
-  --ui-table-head-height: 36px;
-  --ui-table-row-height: 38px;
+  --ui-table-head-height: 30px;
+  --ui-table-row-height: 30px;
 }
 /* 窄屏下的最小宽（触发横向滚动，而不是把列压扁） */
 .mh-table--wide {
@@ -94,14 +94,21 @@
  * 列宽从此**受声明约束、不再被内容撑破** ⇒ 长文本不会把表格撑得比容器还宽，
  * 于是「百分比 / 数字权重」可以「吃满容器 + 严格按比例」。
  *
- * 代价（调用方要知道）：长文本列必须显式 `ellipsis: true`，否则会**换行**（行高变高，见下条）。 */
+ * 调用方要知道的：表体**默认不换行**（nowrap + 省略号，见下条）；要换行的列显式标 `wrap: true`。 */
 .mh-table--fixed {
   table-layout: fixed;
 }
-/* 换行兜底：fixed 已保证「不撑破容器」，这条只防**无空格长串**（如 500 字符的 token）
-   溢出单元格、视觉上压到相邻列。`anywhere` 而不是 `break-word`：后者不参与最小内容宽计算。 */
+/* `fixed` 档表体默认**不换行**（nowrap + 省略号）。两条依据：
+ * ① 列宽已被 `<colgroup>` 钉死，换行救不回内容，只会把行高顶高（`td` 的 `height` 只是**下限**）；
+ * ② 换行必然伴随**从字符间断字** —— 实测序号列窄到装不下两位数时，旧的 `overflow-wrap: anywhere`
+ *    把 `10` 拆成 `1` / `0` 两行，行高 30 → **49**。
+ * 于是「换行」改成**列级主动选择**：`TableColumn.wrap: true`（见 `.mh-table__cell-wrap`）。
+ * ⚠️ **只在本档翻默认**：`auto` 档的列宽由内容计算，td 默认 nowrap 会让长文本列不再靠换行收敛、
+ * 表格更容易撑破容器 —— 与本档「表头裁切只加在 fixed」同一条判据（见上一条注释）。 */
 .mh-table--fixed tbody td {
-  overflow-wrap: anywhere;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 /* 前导列（勾选 / 展开）在 auto 下靠内容把 40px 的「建议宽」撑出去；fixed 下是硬宽，
    而 `thead th` / `tbody td` 的标准左右内距各 16px ⇒ 可用内容只有 40 − 32 = 8px，
@@ -248,8 +255,12 @@
   z-index: 2; /* 表头既钉顶又钉左，压住表头其余列 */
   background: var(--ui-table-head-bg);
 }
-/* `--sticky-head`：表头钉顶 */
-.mh-table--sticky-head thead th {
+/* `--sticky-head`：表头钉顶。
+ * ⚠️ 选择器必须带 `tr`（0-1-3）：文件后段「拖拽线的定位上下文」那条
+ * `.mh-table thead th { position: relative }` 是 **0-1-2**，与不写 `tr` 的写法**同特异性且在后**
+ * ⇒ 会把 `position: sticky` 覆盖掉，`stickyHead` 静默失效（0.6.0 起就存在，0.9.0 复核仍在）。
+ * `sticky` 同样是定位元素，照样给表头里的拖拽线当包含块，故加 `tr` 不损失原能力。 */
+.mh-table--sticky-head thead tr th {
   position: sticky;
   top: 0;
   z-index: 1;
@@ -271,16 +282,16 @@
 .mh-table__cell-link:hover {
   text-decoration: underline;
 }
-/* 长文本省略（列定义里 `ellipsis: true` 时下发）。
- * 基础三件套与档位无关；`max-width` **只在 auto 档兜底**：
- * fixed 档的列宽已由 `<colgroup>` 钉死，再来一条 150px 的 max-width 会把宽列又压回 150（自相矛盾）。 */
-.mh-table__cell-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.mh-table:not(.mh-table--fixed) .mh-table__cell-ellipsis {
-  max-width: var(--ui-table-ellipsis);
+/* 列级**放开换行**（列定义里 `wrap: true` 时下发，只作用于表体 `td`；表头始终 nowrap）。
+ * 缺省不换行在面文件的 `.mh-table--fixed tbody td` 里 —— 本档才翻默认，故这里同时把
+ * 「换行三件套」与 `overflow-wrap` 兜底一并给回：换来的是「长文本列自己决定换行」。
+ * ⚠️ 选择器必须带 `td`（0-1-3）：`.mh-table--fixed tbody td` 是 **0-1-2**，
+ * 单个类（0-1-0）压不过它（同 §表头对齐那条的先例）。 */
+.mh-table tbody td.mh-table__cell-wrap {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  overflow-wrap: anywhere;
 }
 .mh-table__cell-icon {
   display: inline-flex;
@@ -399,10 +410,10 @@
   color: var(--ui-warning); /* 规范 #ff6c29 */
 }
 
-/* ===== 尺寸档：大号（详情页 / 展示型表格） ===== */
+/* ===== 尺寸档：大号（详情页 / 展示型表格）—— 三档 30 / 38 / 46 里的最大档 ===== */
 .mh-table--lg {
-  --ui-table-head-height: 52px;
-  --ui-table-row-height: 56px;
+  --ui-table-head-height: 46px;
+  --ui-table-row-height: 46px;
   --ui-table-padding-x: var(--ui-space-6);
 }
 

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

@@ -11,8 +11,12 @@
 [data-manohub-ui] {
   /* 单件令牌 */
   --ui-table-font-size: var(--ui-font-caption);
-  --ui-table-head-height: 34px; /* 设计 1160×34 */
-  --ui-table-row-height: 30px; /* 设计 919×30，节距 31 */
+  /* 尺寸档三档 = 30 / 38 / 46（sm / md / lg），本节是**基础值 = 中档（md）**，
+     与 Button（24 / 32 / 40）、Tree（基础 34、紧凑 28）同一条库内约定：
+     基础令牌承担 md，`.mh-<件>--<档>` 只改写另两档。
+     ⚠️ 两个档位改写分别在面文件的 `.mh-table--xs`（sm）与 `.mh-table--lg` 里，别写回本文件。 */
+  --ui-table-head-height: 38px; /* 中档（md）表头 = 行高 */
+  --ui-table-row-height: 38px; /* 中档（md）行高 */
   --ui-table-line-height: var(--ui-line-caption); /* 单元格行高 = 正文档的 13px 配对（default 20 / farris 18） */
   --ui-table-head-bg: var(--ui-base-200); /* 设计 #f1f2f5 */
   --ui-table-head-text: var(--ui-base-content-muted);
@@ -29,10 +33,6 @@
   --ui-table-link: var(--ui-primary);
   --ui-table-padding-x: var(--ui-space-4); /* 单元格左右内距 16 */
   --ui-table-col-check: 40px;
-  /* 长文本列的兜底上限 —— **只在 `layout="auto"` 下生效**（`.mh-table:not(.mh-table--fixed)`
-     作用域内）。`layout="fixed"` 下列宽由 `<colgroup>` 钉死，本令牌不参与，
-     否则「宽列」会被它压回 150px 而自相矛盾。要按列给宽请用 `TableColumn.width`。 */
-  --ui-table-ellipsis: 150px;
   --ui-table-drag-line: var(--ui-primary);
   --ui-table-drag-line-width: 3px;
   --ui-table-drag-line-height: 40px;

package/dist/styles/components/tag.css

@@ -132,8 +132,10 @@
   appearance: none;
   pointer-events: none;
 }
+/* 悬停底取 `base-200`（中性面）—— 改前是 `base-50`：那档只比内容底低 1.7 L*，
+   在多数屏幕上看不出悬停反馈（`base-50` 不再作为「更轻底」的默认去处，见 colors 口径第 1 条）。 */
 .mh-tag--select:hover {
-  background: var(--ui-base-50);
+  background: var(--ui-base-200);
   border: 1px solid var(--ui-base-300);
 }
 .mh-tag--select:has(input:focus-visible) {
@@ -160,11 +162,13 @@
   cursor: not-allowed;
 }
 
-/* ===== 新增档（虚线框 + 加号由 @manohub/icon 的 plus 渲染）===== */
+/* ===== 新增档（虚线框 + 加号由 @manohub/icon 的 plus 渲染）=====
+ * 虚线框取 `--ui-base-300`（全库唯一的「线 / 框」色，见 `@manohub/theme` 的 `default/colors.css`
+ * 头「三条口径」第 2 条）；改前取 `base-400`，2026-09-30 按口径收敛。 */
 .mh-tag--add {
   height: var(--ui-tag-height);
   padding: 0 var(--ui-space-2);
-  border: 1px dashed var(--ui-base-400);
+  border: 1px dashed var(--ui-base-300);
   border-radius: var(--ui-radius-full);
   background: transparent;
   color: var(--ui-base-content-muted);