@manohub/ui 0.9.0 → 0.10.0

package/dist/components/select/index.js

@@ -211,9 +211,7 @@ const Select = /* @__PURE__ */ defineComponent({
           "class": "mh-select__chip"
         }, [option.label])), foldedCount.value > 0 ? createVNode("span", {
           "class": "mh-select__chip mh-select__chip--fold"
-        }, [foldText.value]) : null, !hasValue ? createVNode("span", {
-          "class": "mh-select__value mh-select__value--placeholder"
-        }, [props.placeholder]) : null]) : void 0
+        }, [foldText.value]) : null]) : void 0
       }, null), createVNode(SelectPanel, {
         "id": panelId,
         "elementRef": panelRef,

package/dist/components/select/select-trigger.d.ts

@@ -35,11 +35,12 @@ export declare const SelectTrigger: import("vue").DefineComponent<import("vue").
         type: BooleanConstructor;
         default: boolean;
     };
+    /** 无值时的占位文案（**透传给输入面**：`hasValue === false` 时由它渲染并取代 `default` 插槽） */
     placeholder: {
         type: StringConstructor;
         default: string;
     };
-    /** 单选显示文本（无值时不渲染它，改渲染 `placeholder`） */
+    /** 单选显示文本（只在**有值**时渲染；无值态由输入面的占位承担） */
     label: {
         type: StringConstructor;
         default: undefined;
@@ -93,11 +94,12 @@ export declare const SelectTrigger: import("vue").DefineComponent<import("vue").
         type: BooleanConstructor;
         default: boolean;
     };
+    /** 无值时的占位文案（**透传给输入面**：`hasValue === false` 时由它渲染并取代 `default` 插槽） */
     placeholder: {
         type: StringConstructor;
         default: string;
     };
-    /** 单选显示文本（无值时不渲染它，改渲染 `placeholder`） */
+    /** 单选显示文本（只在**有值**时渲染；无值态由输入面的占位承担） */
     label: {
         type: StringConstructor;
         default: undefined;

package/dist/components/select/select-trigger.js

@@ -38,11 +38,12 @@ const SelectTrigger = /* @__PURE__ */ defineComponent({
       type: Boolean,
       default: false
     },
+    /** 无值时的占位文案（**透传给输入面**：`hasValue === false` 时由它渲染并取代 `default` 插槽） */
     placeholder: {
       type: String,
       default: "请选择"
     },
-    /** 单选显示文本（无值时不渲染它，改渲染 `placeholder`） */
+    /** 单选显示文本（只在**有值**时渲染；无值态由输入面的占位承担） */
     label: {
       type: String,
       default: void 0
@@ -72,6 +73,7 @@ const SelectTrigger = /* @__PURE__ */ defineComponent({
       "disabled": props.disabled,
       "clearable": props.clearable,
       "hasValue": props.hasValue,
+      "placeholder": props.placeholder,
       "class": "mh-popup-anchor mh-select-host",
       "controlClass": controlClass(),
       "controlAttrs": {
@@ -84,9 +86,12 @@ const SelectTrigger = /* @__PURE__ */ defineComponent({
       },
       "onChange": () => props.onClear?.()
     }, {
-      default: () => props.renderValue ? props.renderValue() : createVNode("span", {
-        "class": ["mh-select__value", props.hasValue ? "" : "mh-select__value--placeholder"].filter(Boolean).join(" ")
-      }, [props.hasValue ? props.label : props.placeholder]),
+      default: () => props.renderValue ? props.renderValue() : (
+        /* 只画**有值**时的那一行；无值态在上面被输入面的占位取代（`default` 不会被调用） */
+        createVNode("span", {
+          "class": "mh-select__value"
+        }, [props.label])
+      ),
       /* 箭头沿用输入框的右侧图标位（槽内尺寸收敛见 `select.css` 的 `.mh-select-host` 一节）；
          展开转向由 `popup.css` 的 `.mh-popup-caret` 承担（含触发器进表壳后的兄弟档） */
       suffix: () => createVNode(Icon, {

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/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;
   /* 三态补间（底 / 边 / 字 / 影） */

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

@@ -127,6 +127,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/select.css

@@ -66,7 +66,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 +76,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` 承担（含触发器进表壳后的兄弟档）；

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/text.css

@@ -27,6 +27,16 @@
   color: var(--mh-text-tone-color, inherit);
 }
 
+/* 浏览器给 `h1`-`h6` 的那套字阶（`1.5em` + 粗体）只该是**语义**，视觉由 `size` / `weight` 定：
+   归零搬到了本件（元素级基线不再代管 —— 那条在 Tailwind 的层外，会压住消费方的 `text-*` 工具类）。
+   只点名标题标签：`strong` / `b` 的加粗是它们唯一的表达，不能被归零。
+   档位类在本文件里更靠后、且同特异性，故 `--heading` / `--semibold` 一类照样覆盖它
+   （静态页里手写 `<h2 class="mh-text">` 且不给档位时，也仍是「正文字号 + 继承字重」）。 */
+.mh-text:where(h1, h2, h3, h4, h5, h6) {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
 /* ===== 字号档（每档配一枚行高令牌，两者成对出现才不会出现「字号变了行距没变」） ===== */
 .mh-text--caption {
   font-size: var(--ui-font-caption);

package/dist/styles/components/toast.css

@@ -26,7 +26,12 @@
   display: flex;
   align-items: center;
   gap: var(--ui-toast-gap);
-  width: var(--ui-toast-width);
+  /* 宽度：**内容自适应，240 起、最长 560** —— 即规范原文的「宽 240 / 最大 560」。
+     原写法 `width: var(--ui-toast-width)` 是**固定宽**：文本被锁在 240−40=200px 里折行，
+     而 `max-width` 永远轮不到（内容只会折行，撑不宽元素）⇒ 23 字提示被硬折成两行。
+     改 min/max 夹住的 fit-content 后：短文案仍是 240（样张宽不变），长文案按内容展开、到 560 才折行。 */
+  width: fit-content;
+  min-width: var(--ui-toast-width);
   max-width: var(--ui-toast-width-max);
   min-height: var(--ui-toast-min-height);
   padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-3) var(--ui-space-6);
@@ -37,9 +42,9 @@
 }
 
 /* loading：**不另设样张高**（高度与其它档一致，见文件头的「有意偏差」）—— 本档只差图标（转圈） */
-/* 带动作：更宽的样张宽 */
+/* 带动作：**更宽的样张宽**（360 是下限，长文案仍可展开到 560 上限） */
 .mh-toast--action {
-  width: 360px;
+  min-width: 360px;
 }
 
 /* ===== 图标：圆形色底 + 白色字形（18×18） ===== */
@@ -91,7 +96,10 @@
   /* 占满剩余宽度：动作位 / 关闭位都被顶到右端。
      不写成「每个右侧位各给 margin-left: auto」—— 两个 auto 会平分剩余空间，
      而本族的常驻提示可能同时带动作与关闭位（那样动作钮会被推到卡片中间）。 */
-  flex: 1;
+  /* ⚠️ 必须是 `flex: 1 1 auto`，不能写成 `flex: 1`（= basis 0%）：父级现在是 `width: fit-content`，
+     容器的固有宽按子项的**内容宽**算，basis 为 0 会让文本对容器宽度的贡献退化
+     ⇒ 容器停在 min-width(240)、长文案照旧折行（改宽度就白改了）。 */
+  flex: 1 1 auto;
   min-width: 0;
   margin: 0;
   font-size: var(--ui-toast-text-size);
@@ -115,19 +123,40 @@
   outline-offset: 2px;
 }
 
-/* ===== 堆叠容器（顶部居中、纵向 8） ===== */
+/* ===== 堆叠容器（顶部居中、纵向 8） =====
+   ⚠️ `z-index` 只对**普通层**有效：原生 `<dialog>.showModal()` 的模态层与 `::backdrop` 在 top layer，
+   对它 z-index 再大也没用（toast 会被遮罩压暗）。故本容器带 `popover="manual"` 进 top layer
+   —— `showPopover()` 由组件层负责（见 `ToastStack` 的说明）。 */
 .mh-toast-stack {
   position: fixed;
   top: var(--ui-space-6);
   left: 50%;
   transform: translateX(-50%);
-  z-index: 1080; /* 高于页面内容、低于模态层（原生 <dialog> 的 top layer 不受影响） */
+  z-index: 1080; /* 普通层里仍压过页面内容；popover 不可用的浏览器靠它兜底 */
   display: flex;
   flex-direction: column;
   gap: var(--ui-space-2);
   align-items: center;
   pointer-events: none; /* 容器不挡点击；每条自己恢复 */
 }
+
+/* `[popover]` 档：清掉 UA 给 popover 的默认，否则会变成「全屏居中、带边框的方块」
+   （UA 给的是 `inset: 0; margin: auto; border: solid; padding: .25em; background: Canvas; overflow: auto`）。
+   ⚠️ `inset: auto` 与 `top` / `left` **必须写在同一条规则里**：只写 `inset: auto` 会把上面那条规则里的
+   `left: 50%` 一并压成 auto（同层冲突按顺序/特异性决胜，本块更高），元素就跑到视口左边缘去了。 */
+.mh-toast-stack[popover] {
+  inset: auto;
+  top: var(--ui-space-6);
+  left: 50%;
+  transform: translateX(-50%);
+  margin: 0;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  overflow: visible;
+  max-width: none;
+  max-height: none;
+}
 .mh-toast-stack > .mh-toast {
   pointer-events: auto;
 }

package/dist/styles/components/upload.css

@@ -138,6 +138,7 @@
   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;

package/dist/styles/index.css

@@ -43,10 +43,11 @@
  * （护栏会拦「面里出现不含修饰符类的 `--ui-*` 声明」）。
  *
  * 层序：**基线（`./reset.css`，元素级、零特异性）→ 值 → 面**；面内部**操作层在前**（零 JS 原语、规则走 `:where()` 零特异性，
- * 永远给皮肤让位），组件面在后。
+ * 永远给皮肤让位），组件面在后。基线只有两面（`box-sizing` + 容器基座）—— 其余元素级声明一律归各组件面：
+ * 本文件**在 Tailwind 的层外**（未分层 > 分层），多留一条就会压住消费方的工具类（理由见 `reset.css` 文件头）。
  */
 
-/* ===== 基线：元素级 reset（特异性最低；先于值 → 面，消费方写任何元素选择器都能盖过它） ===== */
+/* ===== 基线：元素级 reset（只有盒模型 + 容器基座；先于值 → 面，消费方写任何元素选择器都能盖过它） ===== */
 @import './reset.css';
 
 /* ===== 值：组件令牌基础值（锚 `[data-manohub-ui]`，与主题令牌同层序） ===== */
@@ -70,7 +71,7 @@
 @import './components/checkbox.tokens.css';
 @import './components/radio.tokens.css';
 @import './components/capsule.tokens.css';
-@import './components/filter.tokens.css';
+/* 筛选条没有自己的令牌：字段区几何一律继承 Form 的默认档 */
 
 /* 反馈与三态 */
 @import './components/notice.tokens.css';
@@ -127,7 +128,7 @@
 @import './components/checkbox.css';
 @import './components/radio.css'; /* 单选一件两形态（`.Group` / `.Card`）同一个面文件 */
 @import './components/capsule.css';
-@import './components/filter.css'; /* 筛选条：条件字段区 + 查询/重置（控件由消费方自放） */
+@import './components/filter.css'; /* 筛选条：**零规则**（字段排布与几何全部沿用 Form，本文件只留说明；见其文件头） */
 
 /* 反馈与三态 */
 @import './components/notice.css';