@manohub/ui 0.6.1 → 0.7.1

package/dist/styles/components/select.css

@@ -131,6 +131,17 @@
   width: 100%;
   height: var(--ui-select-option-height);
   padding: 0 var(--ui-select-padding-x);
+  /* **按钮重置四条，必须自带**：本行是 `<button role="option">`，而按钮自带 UA 外观
+     （`border: 2px outset` / `background: ButtonFace` / `font-family: Arial` / `text-align: center`）。
+     reset 层（`styles/reset.css`）虽然也清零了前三条，但组件面**不得依赖它** ——
+     本仓的 0.6.x 就漏了这四条，表现为选项行呈原生按钮外观（灰底 + 立体边框 + 居中 Arial），
+     而同一面板里的 `.mh-select__add` 写齐了 ⇒ 一个面板里两种外观。
+     `text-align` 是 reset 层**没有**的一项（它不属于「元素基线」，属于「列表行」语义），故此处必写。
+     色彩 / 字族这些**值**仍然归令牌，这四条只是把 UA 的默认值归零。 */
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  text-align: left;
   font-size: var(--ui-select-font-size);
   color: var(--ui-base-content);
   cursor: pointer;

package/dist/styles/components/steps.css

@@ -13,6 +13,8 @@
  *
  * 连线用**独立空元素**（`.mh-steps__connector`）而不是 `.mh-steps__step + ::after`：折角箭头要撑开弹性余量，
  * 且 N 个节点配 N-1 条线，独立元素才能让两端节点各自保持自己的标题宽度。
+ *
+ * 可点档（`clickable`）下步元素是**原生 `<button>`** —— 归零、焦点环、禁用态见文件中间那节。
  */
 
 /* 几何只挂在 node 档根件上：令牌在同名 `.tokens.css`（锚 `[data-manohub-ui]`），几何若跟着挂会给 bar / 进度条多套一层 flex */
@@ -132,6 +134,52 @@
   filter: drop-shadow(0 4px 5px color-mix(in srgb, var(--ui-primary) 30%, transparent));
 }
 
+/* ===== 可点档与禁用态（`clickable`）=====
+   可点档把步元素换成**原生 `<button>`**（键盘 Tab/Enter、`:focus-visible`、`disabled` 都交浏览器），
+   于是这里只剩两件事：把 UA 默认外观归零、给禁用与焦点一份视觉。 */
+
+/* 归零。**用 `:where()` 把本档特异性压到 0**：它只该清掉 UA 的 button 默认外观，
+   件自己的几何 / 字号 / 配色（上面 `.mh-steps__seg` 那几条）必须原样生效。
+   若用普通类选择器（0-1-0），这里的 `padding: 0` 会与 `.mh-steps__seg` 的
+   `padding-left`（让开燕尾尖）打平、靠源序决胜 —— `:where()` 让那条稳赢，也省得以后
+   调文件顺序就把段条弄坏。 */
+:where(.mh-steps__step--clickable, .mh-steps__seg--clickable) {
+  appearance: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  cursor: pointer;
+}
+
+/* 键盘焦点环（与 button / radio / tag 同一句）。
+   外扩 2px 而不是按钮那套 `-2px`：步元素没内距，内缩会把环画在节点圆与标题上 */
+.mh-steps__step--clickable:focus-visible,
+.mh-steps__seg--clickable:focus-visible {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: 2px;
+  border-radius: var(--ui-radius-sm);
+}
+
+/* 禁用态：原生 `disabled` 已经挡住了点击与键盘序列，这里只补视觉。
+   节点 / 段底**不动** —— 它的「已完成 / 当前」状态语义仍然成立，禁用只表示
+   「这一步现在不能跳」，不是「这一步不存在」。
+   段条另排 `:not(--active)`：当前段本来是主色底 + 反白字，把它的字色降成 subtle 会读不清；
+   而且「当前段」本来也不该被画成禁用。 */
+.mh-steps__step--disabled,
+.mh-steps__seg--disabled {
+  cursor: not-allowed;
+}
+.mh-steps__step--disabled .mh-steps__title {
+  color: var(--ui-base-content-subtle);
+}
+.mh-steps__seg--disabled:not(.mh-steps__seg--active) {
+  color: var(--ui-base-content-subtle);
+}
+
 /* ===== 进度条（规范只有令牌、无标记示例；与对话框的进程条共用） ===== */
 .mh-steps__progress {
   height: var(--ui-steps-progress-height);

package/dist/styles/components/{tabs.css → tabbar.css}

@@ -1,7 +1,7 @@
 /**
- * Tabs —— 页签条（下划线指示条 + 禁用 + 「更多」页签）。
+ * TabBar —— 页签条（下划线指示条 + 禁用 + 「更多」页签）。
  *
- * 出处：`@aihub/theme` 的 `playground/components/tabs.css` 与 `src/components/tabs.css`
+ * 出处：`@aihub/theme` 的 `playground/components/tabbar.css` 与 `src/components/tabbar.css`
  * （区高 26 / 项间距 30 / 字号 14 / 指示条高 3、距文字 3、两端与文字同宽 / 未选字 `#446a9f` /
  *  滑过 `#529dff` / 选中 `#4e94ff` / 禁用 Te07）。
  *
@@ -17,38 +17,39 @@
  * **三源等价**（本仓通例）：原生 `:checked +` / 组件下发 `[data-state='active']` / 静态档 `.is-selected`
  * 指向同一份声明 —— 原生态给零 JS 用法（原生 radio 互斥 + ← → 换页签），组件态给受控值。
  */
-.mh-tabs {
+.mh-tabbar {
   display: flex;
   align-items: flex-end;
-  gap: var(--ui-tabs-gap);
-  height: var(--ui-tabs-height);
+  gap: var(--ui-tabbar-gap);
+  height: var(--ui-tabbar-height);
+  flex-shrink: 0;
 }
 
-.mh-tabs__tab {
+.mh-tabbar__tab {
   position: relative;
   display: inline-flex;
   align-items: flex-end;
   height: 100%;
-  padding: 0 0 calc(var(--ui-tabs-indicator-gap) + var(--ui-tabs-indicator-height));
+  padding: 0 0 calc(var(--ui-tabbar-indicator-gap) + var(--ui-tabbar-indicator-height));
   border: none;
   background: transparent;
   font-family: inherit;
-  font-size: var(--ui-tabs-font-size);
+  font-size: var(--ui-tabbar-font-size);
   line-height: var(--ui-line-body);
-  color: var(--ui-tabs-text);
+  color: var(--ui-tabbar-text);
   cursor: pointer;
   white-space: nowrap;
 }
 /* 指示条：常驻、与文字同宽（不内缩），靠 opacity + scale 过渡出"滑动感" */
-.mh-tabs__tab::after {
+.mh-tabbar__tab::after {
   content: '';
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
-  height: var(--ui-tabs-indicator-height);
-  border-radius: var(--ui-tabs-indicator-radius);
-  background: var(--ui-tabs-indicator);
+  height: var(--ui-tabbar-indicator-height);
+  border-radius: var(--ui-tabbar-indicator-radius);
+  background: var(--ui-tabbar-indicator);
   opacity: 0;
   scale: 0.75;
   transition-property: opacity, scale;
@@ -56,49 +57,49 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.mh-tabs__tab:hover {
-  color: var(--ui-tabs-text-hover);
+.mh-tabbar__tab:hover {
+  color: var(--ui-tabbar-text-hover);
 }
-.mh-tabs__tab:active {
-  color: var(--ui-tabs-text-active);
+.mh-tabbar__tab:active {
+  color: var(--ui-tabbar-text-active);
 }
 
 /* 选中（三源等价）：字转主色 + 中粗，指示条亮起 */
-.mh-tabs__tab.is-selected,
-.mh-tabs__tab[data-state='active'],
-.mh-tabs > input:checked + .mh-tabs__tab {
-  color: var(--ui-tabs-text-active);
+.mh-tabbar__tab.is-selected,
+.mh-tabbar__tab[data-state='active'],
+.mh-tabbar > input:checked + .mh-tabbar__tab {
+  color: var(--ui-tabbar-text-active);
   font-weight: var(--ui-weight-medium);
 }
-.mh-tabs__tab.is-selected::after,
-.mh-tabs__tab[data-state='active']::after,
-.mh-tabs > input:checked + .mh-tabs__tab::after {
+.mh-tabbar__tab.is-selected::after,
+.mh-tabbar__tab[data-state='active']::after,
+.mh-tabbar > input:checked + .mh-tabbar__tab::after {
   opacity: 1;
   scale: 1;
 }
 
 /* 禁用（三源等价）：字转弱、不可点 */
-.mh-tabs__tab.is-disabled,
-.mh-tabs__tab:disabled,
-.mh-tabs > input:disabled + .mh-tabs__tab {
-  color: var(--ui-tabs-text-disabled);
+.mh-tabbar__tab.is-disabled,
+.mh-tabbar__tab:disabled,
+.mh-tabbar > input:disabled + .mh-tabbar__tab {
+  color: var(--ui-tabbar-text-disabled);
   cursor: not-allowed;
 }
-.mh-tabs__tab.is-disabled::after,
-.mh-tabs__tab:disabled::after,
-.mh-tabs > input:disabled + .mh-tabs__tab::after {
+.mh-tabbar__tab.is-disabled::after,
+.mh-tabbar__tab:disabled::after,
+.mh-tabbar > input:disabled + .mh-tabbar__tab::after {
   opacity: 0;
 }
 
 /* 「更多」页签：文字 + 转向箭头（字形来自 `@manohub/icon`，本层只排布） */
-.mh-tabs__tab--more {
+.mh-tabbar__tab--more {
   display: inline-flex;
   align-items: center;
   gap: var(--ui-space-1);
 }
 
 /* 原生路径的隐身开关：可聚焦但不可见（焦点环画在可见的项上） */
-.mh-tabs > input {
+.mh-tabbar > input {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -113,40 +114,40 @@
 }
 
 /* 键盘焦点环（两条路径各一处，不重叠） */
-.mh-tabs__tab:focus-visible,
-.mh-tabs > input:focus-visible + .mh-tabs__tab {
+.mh-tabbar__tab:focus-visible,
+.mh-tabbar > input:focus-visible + .mh-tabbar__tab {
   outline: 2px solid var(--ui-primary);
   outline-offset: -2px;
 }
 
 /* ===== 居中档：页签少、要撑满整行时用 ===== */
-.mh-tabs--centered {
+.mh-tabbar--centered {
   justify-content: center;
 }
 
 /* ===== 尺寸档（只覆盖令牌） ===== */
-.mh-tabs--sm {
-  --ui-tabs-height: var(--ui-control-height-sm);
-  --ui-tabs-font-size: var(--ui-font-caption);
-  --ui-tabs-gap: var(--ui-space-6);
+.mh-tabbar--sm {
+  --ui-tabbar-height: var(--ui-control-height-sm);
+  --ui-tabbar-font-size: var(--ui-font-caption);
+  --ui-tabbar-gap: var(--ui-space-6);
 }
-.mh-tabs--lg {
-  --ui-tabs-height: var(--ui-control-height-lg);
-  --ui-tabs-font-size: var(--ui-font-heading);
+.mh-tabbar--lg {
+  --ui-tabbar-height: var(--ui-control-height-lg);
+  --ui-tabbar-font-size: var(--ui-font-heading);
 }
 
 /* ===== 选项卡形态（type="card"） =====
  * 与内容区连成一体：页签有边框与浅底，选中项转白底 + 顶部主色条；
  * 底边刻意不画 —— 让内容区自己的上边框接上（面板的 bordered 档就是为此）。 */
-.mh-tabs--card {
+.mh-tabbar--card {
   align-items: flex-end;
   gap: var(--ui-space-1);
   height: auto;
 }
-.mh-tabs--card .mh-tabs__tab {
+.mh-tabbar--card .mh-tabbar__tab {
   align-items: center;
-  height: var(--ui-tabs-height);
-  padding: 0 var(--ui-tabs-card-padding-x);
+  height: var(--ui-tabbar-height);
+  padding: 0 var(--ui-tabbar-card-padding-x);
   border: 1px solid var(--ui-base-300);
   border-bottom: none;
   border-radius: var(--ui-radius-control) var(--ui-radius-control) 0 0;
@@ -154,28 +155,28 @@
   color: var(--ui-base-content-muted);
 }
 /* 卡片档不画指示条：选中由底色与顶边表达（两套选中语汇叠在一起会互相打架） */
-.mh-tabs--card .mh-tabs__tab::after {
+.mh-tabbar--card .mh-tabbar__tab::after {
   content: none;
 }
-.mh-tabs--card .mh-tabs__tab:hover {
+.mh-tabbar--card .mh-tabbar__tab:hover {
   color: var(--ui-primary);
 }
-.mh-tabs--card .mh-tabs__tab.is-selected,
-.mh-tabs--card .mh-tabs__tab[data-state='active'],
-.mh-tabs--card > input:checked + .mh-tabs__tab {
+.mh-tabbar--card .mh-tabbar__tab.is-selected,
+.mh-tabbar--card .mh-tabbar__tab[data-state='active'],
+.mh-tabbar--card > input:checked + .mh-tabbar__tab {
   background: var(--ui-base-100);
   color: var(--ui-primary);
   box-shadow: inset 0 2px 0 var(--ui-primary);
 }
-.mh-tabs--card .mh-tabs__tab.is-disabled {
+.mh-tabbar--card .mh-tabbar__tab.is-disabled {
   background: var(--ui-base-200);
-  color: var(--ui-tabs-text-disabled);
+  color: var(--ui-tabbar-text-disabled);
 }
 
 /* ===== 关闭位 =====
  * 页签自己是 `<button>`，所以关闭位用 `<span role="button">`（按钮里嵌按钮是非法 HTML）；
  * 线上档的文字是「贴底」的，故关闭位要自己把底部内距补回来才与文字同一水平线。 */
-.mh-tabs__close {
+.mh-tabbar__close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -183,7 +184,7 @@
   flex: none;
   width: 16px;
   height: 16px;
-  margin-bottom: calc(var(--ui-tabs-indicator-gap) + var(--ui-tabs-indicator-height));
+  margin-bottom: calc(var(--ui-tabbar-indicator-gap) + var(--ui-tabbar-indicator-height));
   margin-left: var(--ui-space-1);
   border-radius: var(--ui-radius-full);
   color: inherit;
@@ -191,26 +192,26 @@
   opacity: 0.5;
   transition: opacity 0.15s ease, background-color 0.15s ease;
 }
-.mh-tabs--card .mh-tabs__close {
+.mh-tabbar--card .mh-tabbar__close {
   margin-bottom: 0;
 }
-.mh-tabs__close > svg {
+.mh-tabbar__close > svg {
   width: 12px;
   height: 12px;
 }
-.mh-tabs__close:hover {
+.mh-tabbar__close:hover {
   opacity: 1;
   background: rgb(0 0 0 / 0.08);
 }
 
 /* ===== 新增位 ===== */
-.mh-tabs__add {
+.mh-tabbar__add {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: none;
-  width: var(--ui-tabs-height);
-  height: var(--ui-tabs-height);
+  width: var(--ui-tabbar-height);
+  height: var(--ui-tabbar-height);
   padding: 0;
   border: none;
   border-radius: var(--ui-radius-control);
@@ -219,16 +220,16 @@
   cursor: pointer;
   transition: background-color 0.15s ease, color 0.15s ease;
 }
-.mh-tabs__add > svg {
+.mh-tabbar__add > svg {
   width: var(--ui-font-icon); /* 常规图标档 */
   height: var(--ui-font-icon);
 }
 /* 「更多」的折叠箭头：改前无声明、掉到 `<svg>` 默认 16 —— 与新增位同取常规图标档 */
-.mh-tabs__tab--more > svg {
+.mh-tabbar__tab--more > svg {
   width: var(--ui-font-icon);
   height: var(--ui-font-icon);
 }
-.mh-tabs__add:hover {
+.mh-tabbar__add:hover {
   background: var(--ui-base-200);
   color: var(--ui-primary);
 }

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

@@ -0,0 +1,30 @@
+/**
+ * tabs —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `tabbar.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌 */
+  --ui-tabbar-height: var(--ui-control-height-md); /* 标准控件高 32 */
+  --ui-tabbar-gap: 30px; /* 项间距（规范实测） */
+  --ui-tabbar-font-size: var(--ui-font-body);
+  --ui-tabbar-text: var(--ui-base-content); /* 规范未选档 #446a9f（偏蓝的正文色），本仓取正文色 */
+  --ui-tabbar-text-hover: var(--ui-primary-hover); /* 规范 #529dff */
+  --ui-tabbar-text-active: var(--ui-primary); /* 规范 #4e94ff */
+  --ui-tabbar-text-disabled: var(--ui-base-content-subtle); /* 规范 Te07 */
+  --ui-tabbar-indicator: var(--ui-primary);
+  --ui-tabbar-indicator-gap: 3px; /* 指示条与文字的留白 */
+  --ui-tabbar-indicator-height: 3px;
+  --ui-tabbar-indicator-radius: var(--ui-radius-full);
+  --ui-tabbar-card-padding-x: var(--ui-space-4);
+}

package/dist/styles/components/table.css

@@ -89,6 +89,29 @@
   min-width: 620px;
 }
 
+/* ===== 固定布局档（`layout="fixed"`）=====
+ * 列宽由 `<colgroup>` 下发（与档位无关），本档只把布局算法换成 `fixed`：
+ * 列宽从此**受声明约束、不再被内容撑破** ⇒ 长文本不会把表格撑得比容器还宽，
+ * 于是「百分比 / 数字权重」可以「吃满容器 + 严格按比例」。
+ *
+ * 代价（调用方要知道）：长文本列必须显式 `ellipsis: true`，否则会**换行**（行高变高，见下条）。 */
+.mh-table--fixed {
+  table-layout: fixed;
+}
+/* 换行兜底：fixed 已保证「不撑破容器」，这条只防**无空格长串**（如 500 字符的 token）
+   溢出单元格、视觉上压到相邻列。`anywhere` 而不是 `break-word`：后者不参与最小内容宽计算。 */
+.mh-table--fixed tbody td {
+  overflow-wrap: anywhere;
+}
+/* 前导列（勾选 / 展开）在 auto 下靠内容把 40px 的「建议宽」撑出去；fixed 下是硬宽，
+   而 `thead th` / `tbody td` 的标准左右内距各 16px ⇒ 可用内容只有 40 − 32 = 8px，
+   装不下 16px 的勾选框（实测该列溢出 19px，还会被上面的 `overflow: hidden` 裁掉）。
+   故本档把前导列的内距清零，靠既有的 `text-align: center` 居中。 */
+.mh-table--fixed .mh-table__col-check,
+.mh-table--fixed .mh-table__col-expand {
+  padding: 0;
+}
+
 /* ===== 表头 =====
  * `border: 0` **不是冗余**：本件只画「表外框 + 表头分割线 + 每行底线」三条，其余边必须显式清零。
  * 特异性和平局只发生在**同一个属性**上 —— 本件只声明 `border-bottom` 时，宿主给单元格下的整圈边框
@@ -110,6 +133,13 @@
 .mh-table thead th.is-hover {
   background: var(--ui-table-head-bg-hover);
 }
+/* 固定档下表头也要裁切：列宽已被 colgroup 钉死，长表头文字会**溢出到相邻列**
+   （实测溢出 97px），必须靠这两条收住。`white-space: nowrap` 上面已有。
+   ⚠️ 只在本档加 —— auto 档下表头参与列宽计算，加裁切会改动老页面的列宽分配。 */
+.mh-table--fixed thead th {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 /* 多级表头的组头：下边线不加（组头跨列，加线会切断视觉分组） */
 .mh-table thead th.mh-table__th-group {
   border-bottom: 1px solid var(--ui-table-head-divider);
@@ -192,6 +222,20 @@
 .mh-table__col-actions {
   text-align: right;
 }
+
+/* ⚠️ **表头要把对齐重声明一遍**：上面这几条与 `.mh-table__cell-center` / `.mh-table__cell-amount`
+ * 都只有 **0-1-0**，而 `.mh-table thead th { text-align: left }` 是 **0-1-1** ⇒ 表头被强拉成左对齐、
+ * 与表体不齐：勾选框应居中却贴左（实测表头左留白 0 / 右留白 26，与表体错位 13px）、
+ * 右对齐列的标题应靠右却被拉到左边。
+ * 只用补 `text-align` —— `thead th` 没声明过其它会被这些类覆盖的属性（宽度/内距不冲突）。
+ * 写法沿用 `th.mh-table__th-group`（组头居中）那条既有先例。 */
+.mh-table thead th.mh-table__col-check,
+.mh-table thead th.mh-table__cell-center {
+  text-align: center;
+}
+.mh-table thead th.mh-table__col-actions {
+  text-align: right;
+}
 /* `--sticky-col`：首列钉住（必须自带底，见文件头第 4 条） */
 .mh-table--sticky-col thead th:first-child,
 .mh-table--sticky-col tbody td:first-child {
@@ -227,12 +271,17 @@
 .mh-table__cell-link:hover {
   text-decoration: underline;
 }
+/* 长文本省略（列定义里 `ellipsis: true` 时下发）。
+ * 基础三件套与档位无关；`max-width` **只在 auto 档兜底**：
+ * fixed 档的列宽已由 `<colgroup>` 钉死，再来一条 150px 的 max-width 会把宽列又压回 150（自相矛盾）。 */
 .mh-table__cell-ellipsis {
-  max-width: var(--ui-table-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);
+}
 .mh-table__cell-icon {
   display: inline-flex;
   align-items: center;

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

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

package/dist/styles/components/text.css

@@ -0,0 +1,101 @@
+/**
+ * Text —— 文本排版（字号 / 行高 / 字重 / 语义色 / 等宽 / 截断）。
+ *
+ * 本文件是 `@manohub/theme` 那套 `--ui-font-*` / `--ui-line-*` / `--ui-weight-*` 档位令牌的
+ * **第一个消费者**：在此之前它们只有定义、没有件，于是「卡片里的文字层级」在应用侧无合规落点
+ * （契约 L1-5 禁 `font-*` / `color`），每个应用都要留一条定版例外登记。
+ *
+ * ## 取色口径
+ *
+ * 与 `Notice` / `Dialog` 的语义档同一张表：`success` / `warning` 取 `-strong` 档
+ * （直接用 500 档主色在浅底上对比度不足，属可读性缺陷）。
+ *
+ * ## 为什么 tone 走内部变量
+ *
+ * `--mh-text-tone-color` 是**内部状态变量**（`--mh-` 命名空间），由修饰符类赋值、由根类消费 ——
+ * 这样「一条规则管颜色」而不是七条各写一次 `color`。默认值取 `inherit`，
+ * 故**不传 tone 的文字也不会被强行染色**（`tone` 缺省档是 `default`，与正文色一致）。
+ *
+ * ## 截断
+ *
+ * `--truncate`（单行）与 `--clamp`（N 行）都要 `min-width: 0` 才能在被 flex 拉伸的子项里生效
+ * （flex 子项的 `min-width` 默认是 `auto`，不给就会把容器撑开而不是省略）。
+ * N 行的行数经 `--mh-text-lines` 下发（`-webkit-line-clamp` 只吃值，不能由类名表达行数）。
+ */
+
+.mh-text {
+  color: var(--mh-text-tone-color, inherit);
+}
+
+/* ===== 字号档（每档配一枚行高令牌，两者成对出现才不会出现「字号变了行距没变」） ===== */
+.mh-text--caption {
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+}
+.mh-text--body {
+  font-size: var(--ui-font-body);
+  line-height: var(--ui-line-body);
+}
+.mh-text--heading {
+  font-size: var(--ui-font-heading);
+  line-height: var(--ui-line-heading);
+}
+.mh-text--title {
+  font-size: var(--ui-font-title);
+  line-height: var(--ui-line-title);
+}
+
+/* ===== 字重档（缺省不给，即继承上下文） ===== */
+.mh-text--regular {
+  font-weight: var(--ui-weight-regular);
+}
+.mh-text--medium {
+  font-weight: var(--ui-weight-medium);
+}
+.mh-text--semibold {
+  font-weight: var(--ui-weight-semibold);
+}
+
+/* ===== 语义色档 ===== */
+.mh-text--default {
+  --mh-text-tone-color: var(--ui-base-content);
+}
+.mh-text--muted {
+  --mh-text-tone-color: var(--ui-base-content-muted);
+}
+.mh-text--subtle {
+  --mh-text-tone-color: var(--ui-base-content-subtle);
+}
+.mh-text--primary {
+  --mh-text-tone-color: var(--ui-primary);
+}
+.mh-text--success {
+  --mh-text-tone-color: var(--ui-success-strong);
+}
+.mh-text--warning {
+  --mh-text-tone-color: var(--ui-warning-strong);
+}
+.mh-text--error {
+  --mh-text-tone-color: var(--ui-error);
+}
+
+/* ===== 等宽族（代码 / 路径 / ID；字号跟随所在档，不另开一档） ===== */
+.mh-text--mono {
+  font-family: var(--ui-font-mono);
+}
+
+/* ===== 截断 ===== */
+.mh-text--truncate {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mh-text--clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--mh-text-lines, 2);
+  min-width: 0;
+  overflow: hidden;
+}

package/dist/styles/components/toast.css

@@ -42,7 +42,7 @@
   width: 360px;
 }
 
-/* 图标：圆形色底 + 白色字形（18×18） */
+/* ===== 图标：圆形色底 + 白色字形（18×18） ===== */
 .mh-toast__icon {
   display: flex;
   align-items: center;
@@ -55,22 +55,28 @@
   font-size: var(--ui-font-caption);
   line-height: 1;
 }
-.mh-toast__icon--info {
+
+/* ===== 语义档：色落在**根修饰符**上，由它再作用到图标 =====
+ * 本包 tone 维度的统一落点是 `.mh-<件>--<tone>`（`Badge` / `Dialog` / `Notice` / `Notification`
+ * / `Tag` / `Text` 同款）。本件此前写成 `.mh-toast__icon--<tone>`，是唯一一个落子元素修饰符的 ——
+ * 消费方按直觉拼 `.mh-toast--success` 会落空。现改为「根挂 tone、面里用后代选择器取到图标」，
+ * **视觉一字未变**（圆形色底仍然只在图标上）。 */
+.mh-toast--info .mh-toast__icon {
   background: var(--ui-info);
 }
-.mh-toast__icon--success {
+.mh-toast--success .mh-toast__icon {
   background: var(--ui-success);
 }
-.mh-toast__icon--warning {
+.mh-toast--warning .mh-toast__icon {
   background: var(--ui-warning);
 }
-.mh-toast__icon--error {
+.mh-toast--error .mh-toast__icon {
   background: var(--ui-error);
 }
 /* loading 档：透明底 + 主色字形 + 匀速转圈。
    规范此处是「2px 描边 + 上边缺口」的自画法，本仓改用意形（图标包的 `loading`）——
   硬约束是「图标一律来自图标包、不用文字符号或自画形状冒充」，视觉等价（都是转圈环）。 */
-.mh-toast__icon--loading {
+.mh-toast--loading .mh-toast__icon {
   background: transparent;
   color: var(--ui-primary);
   animation: mh-toast-spin 0.8s linear infinite;