@manohub/ui 0.10.1 → 0.10.3

package/dist/styles/components/avatar.css

@@ -64,9 +64,9 @@
 .mh-avatar--icon {
   color: var(--ui-base-100);
 }
-/* 占位：虚线框 + 说明字 */
+/* 占位：虚线框 + 说明字（虚线线色取线型档，口径「实线 base-300 / 虚线 base-400」） */
 .mh-avatar--placeholder {
-  border: 1px dashed var(--ui-base-300);
+  border: 1px dashed var(--ui-line-dashed);
   background: var(--ui-base-100);
   color: var(--ui-base-content-subtle);
   font-size: var(--ui-font-caption);

package/dist/styles/components/badge.css

@@ -20,6 +20,10 @@
   box-sizing: border-box;
   border: 1px solid transparent;
   font-size: var(--ui-font-caption);
+  /* `as="button"`（可点形态，`Tag` 的「新增」用）时根是 `<button>`：UA 会把字形换成 Arial、
+     文字居中、并给 padding/border/background —— 后三样本件已自带（`.mh-badge` 的框与各档内距），
+     只有字族漏在外面，这里补上（对 `<span>` 根无副作用：span 本就继承）。 */
+  font-family: inherit;
   line-height: 1;
   white-space: nowrap;
   color: var(--mh-badge-fg);
@@ -28,16 +32,19 @@
 }
 
 /* 尺寸档的圆角吃**体量档**（`xs` / `sm`），不吃容器档 `md` —— 容器档一改（卡片圆角调整）
-   徽标会跟着变，那是两件无关的事。20 档有设计实证（表格内标签 r3），24 档无实证、按体量就近升一档。 */
+   徽标会跟着变，那是两件无关的事。20 档有设计实证（表格内标签 r3），24 档无实证、按体量就近升一档。
+   高度取**标记体量档**（全局令牌 `--ui-mark-height-sm/md`）：与 `Tag` 的 20 / 24、`Select` 多选
+   标签片的 24 同源 —— 这三处以前各写一份字面量，改一次档要改三处（2026-09-30 收敛）。
+   `Tag` 的基础圆角同日也归到这两档（改前它走控件档 6px）：两族在 20 / 24 上同高同角。 */
 .mh-badge--sm {
-  height: 20px;
+  height: var(--ui-mark-height-sm);
   padding: 0 6px;
   min-width: 36px;
   border-radius: var(--ui-radius-xs);
 }
 
 .mh-badge--md {
-  height: 24px;
+  height: var(--ui-mark-height-md);
   padding: 0 8px;
   border-radius: var(--ui-radius-sm);
 }
@@ -96,8 +103,13 @@
   --mh-badge-fg: var(--ui-base-content-muted);
 }
 
+/* ⚠️ 主色软底取**浅底档** `--ui-primary-weak`（同一槽位的其他消费者：`Tag` 默认底、表壳滑过底、
+   聚焦环）；**不取** `--ui-primary-subtle` —— 那是**选中态底**（树行 / 表格行 / 卡片选中 / 单选卡），
+   两档在 default 主题里差一整档（#EFF5FF → #DBE9FF），取错会让徽标比同排的标签深一档，
+   而徽标表达的是「标记」不是「选中」（2026-09-30 收敛，槽位口径见
+   `@manohub/theme` 的 `default/colors.css` 品牌槽位两条注释）。 */
 .mh-badge--soft.mh-badge--primary {
-  --mh-badge-bg: var(--ui-primary-subtle);
+  --mh-badge-bg: var(--ui-primary-weak);
 }
 
 /* 描边：浅底 + 同色描边；default 退化为白底 + 中性描边 + 正文色（状态胶囊） */
@@ -132,11 +144,23 @@
   --mh-badge-fg: var(--ui-error);
 }
 
+/* ===== 前置点 / 状态点：**光学对齐**（下移 1px）=====
+   两族的圆点都被 flex 居中在**盒中心**（实测偏心 0px），但**文字的墨迹中心在盒中心之下**：
+   中文（`带点（填充）`）约 +0.5px、纯小写（`sm` / `md`）约 +2px、状态点那族（14px）约 +1px
+   —— 于是盒居中读起来是「点偏高」（2026-09-30 用户反馈，文档站 3× 放大逐档比对确认）。
+   下移 1px 是这几种串的**折中**：中文偏下 0.5px、纯小写偏上 1px。
+   没有再细分的办法 —— 小写字母的墨迹中心本就低于盒中心，任何单一常数都盖不住两种极端。
+   位移走 `top`（绘制层）：不参与 flex 布局，点仍被盒居中，只是看起来对着字。
+   ⚠️ 位移取值在**值区**（`badge.tokens.css` 的 `--ui-badge-dot-shift`）：本件有两个互不嵌套的
+   根类（`.mh-badge` / `.mh-badge--status`），声明在任一**根类**上都到不了另一个根。 */
+
 .mh-badge__dot {
   width: 8px;
   height: 8px;
   flex: none;
   border-radius: var(--ui-radius-full);
+  position: relative;
+  top: var(--ui-badge-dot-shift);
 }
 
 .mh-badge--dot-filled .mh-badge__dot {
@@ -226,6 +250,9 @@
   height: 8px;
   border-radius: var(--ui-radius-full);
   background: var(--mh-badge-dot);
+  /* 与前置点同一句光学对齐（位移取值见 `__dot` 一节的注释；令牌在 badge.tokens.css） */
+  position: relative;
+  top: var(--ui-badge-dot-shift);
 }
 
 /* `processing`（映射到 primary）加点呼吸：静态点读不出「正在进行」 */

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

@@ -0,0 +1,24 @@
+/**
+ * badge —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `badge.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值、组内间距变 0）。
+ *
+ * 本件为什么需要本文件：`Badge` 有**两个互不嵌套的根类** —— `.mh-badge`（内容徽标 / 数字角标）
+ * 与 `.mh-badge--status`（状态点 + 文字，它不带 `.mh-badge`）。前置点与状态点共用同一枚
+ * 光学对齐位移，声明在任何**根类**上都到不了另一个根（自定义属性只向下继承），故按本仓口径
+ * 落到容器锚上。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 前置点 / 状态点的**光学对齐**位移（数字见面文件 `__dot` 一节：盒居中读起来偏高）。 */
+  --ui-badge-dot-shift: 1px;
+}

package/dist/styles/components/button.css

@@ -50,12 +50,12 @@
   transition-timing-function: ease;
 }
 
-/* 危险色修饰：换槽位即可，六型与各自 hover / active 一并跟随 */
+/* 危险色修饰：换槽位即可，六型与各自 hover / active 一并跟随
+   （`--ui-button-accent-soft` 随无消费者的孤令牌一并撤除，2026-09-30） */
 .mh-button--danger {
   --ui-button-accent: var(--ui-error);
   --ui-button-accent-hover: color-mix(in srgb, var(--ui-error) 88%, black);
   --ui-button-accent-content: var(--ui-error-content);
-  --ui-button-accent-soft: var(--ui-error-weak);
 }
 
 /* 键盘焦点环：画在按钮自身（与 radio / tag 同一句） */
@@ -166,12 +166,13 @@
 }
 
 /* ===== 虚线：区域内添加内容 =====
- * 虚线也是「框」→ 取 `--ui-base-300`（全库唯一的「线 / 框」色，出处 `@manohub/theme` 的
- * `default/colors.css` 头「三条口径」第 2 条；`base-400` 只服务勾选类小控件框体）。
- * 改前取的是 `base-400`（"虚线要深一档才看得见"），2026-09-30 按库级口径收敛。 */
+ * 虚线取 `--ui-line-dashed`（= `base-400`，比实线深一档）：同样粗细下虚线的墨迹只有实线的一半，
+ * 取实线色（`base-300`）会明显偏浅、整条框看着发虚。
+ * 这条口径 2026-09-30 一天内翻过一次：早些时候按「线框色只留一套」把虚线也收敛到 `base-300`，
+ * 当日晚按实机观感反转 —— 定稿见 `@manohub/theme` 的 `default/colors.css` 头「三条口径」第 2 条。 */
 .mh-button--dashed {
   background: var(--ui-base-100);
-  border: 1px dashed var(--ui-base-300);
+  border: 1px dashed var(--ui-line-dashed);
   color: var(--ui-button-accent);
 }
 .mh-button--dashed:hover,

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

@@ -48,9 +48,12 @@
      等效「主色 65% 透明叠在页面上」，但**只作用于底** —— 字与环保持纯色（见「加载」节）。
      嫌淡嫌深都改这一处，不必去动任何一条色彩规则。 */
   --ui-button-loading-mix: 65%;
-  /* 色彩槽位：危险色只换这四个变量（设计见文件头） */
+  /* 色彩槽位：危险色只换这三个变量（设计见文件头；`danger` 档在 button.css 里成组覆盖）。
+     ⚠️ `--ui-button-accent-soft` 已撤除（2026-09-30）：本件**没有 soft 型**，这枚令牌从声明起就
+     无人读取，而它取的槽位还是「选中态底」`--ui-primary-subtle`（危险色那半区取的却是浅底档
+     `-weak`）—— 无消费者不预置令牌；要浅底档时按档位惯例新开型，别复活它（负向锁见
+     `__tests__/contract-style-form.spec.ts` 的 Button 一组）。 */
   --ui-button-accent: var(--ui-primary);
   --ui-button-accent-hover: var(--ui-primary-hover);
   --ui-button-accent-content: var(--ui-primary-content);
-  --ui-button-accent-soft: var(--ui-primary-subtle); /* 危险的浅底（次级实心档） */
 }

package/dist/styles/components/dialog.css

@@ -25,6 +25,19 @@
      （特异性 0-3-0，高于本行）—— **那条兜底不能删**。 */
   display: flex;
   flex-direction: column;
+  /**
+   * **`margin: auto` 必须写**（靠 `inset: 0` + `margin: auto` 居中）。
+   *
+   * 不能依赖 UA 那条 `dialog { margin: auto }`：作者源无条件压过 UA 源（与特异性无关），
+   * 而**几乎每个宿主的 reset 都有 `* { margin: 0 }`**（Tailwind preflight / 本仓 ui reset 都会发下），
+   * 一旦命中就把 UA 的 `auto` 归零 ⇒ 弹窗**贴上贴左**（`inset: 0` + 无 margin 的必然结果）。
+   * 2026-09-30 实测：在 `apps/skill`（还带 Tailwind）里 `getComputedStyle` 读到 `margin: 0px`、
+   * `rect = (0, 0)`；显式补 `auto` 后立刻回到 `(432, 43)` 的精确居中。
+   *
+   * 与 `Drawer` 那条 `margin: 0` 是**同一件事的两面**：那边要贴侧、必须把 `auto` 归零，
+   * 这边要居中、必须把 `auto` 写实 —— 两边都**不能交给 UA**。`Toast` 同（它也显式归零）。
+   */
+  margin: auto;
   width: var(--ui-dialog-width);
   max-width: var(--ui-dialog-width);
   padding: 0; /* UA 给 <dialog> 的内距一律归零：内距由页头 / 内容 / 底栏各自拥有 */

package/dist/styles/components/divider.css

@@ -4,7 +4,9 @@
  * 出处：设计稿《MH后台-0911》内容区**用了 44 处** 1px 分隔线，取值统一：
  * - 水平：`0:2128 > 标题区 > 直线 2` = 1200×1（筛选区与页头带之间）；
  * - 垂直：`0:3920 > 直线 2备份` = 1×708（树栏与主栏之间）；
- * - 色：`#e6e6e6` = `--ui-base-300`（与页头下边线、表格线、卡片描边同源 —— 本包只有这一条「线」色）。
+ * - 色：`#e6e6e6` = `--ui-base-300`（与页头下边线、表格线、卡片描边同源 —— 实线只有这一条「线」色）。
+ *   虚线档另按**线型档**走 `--ui-line-dashed`（= `base-400`，见 `@manohub/theme` 的 `default/colors.css`
+ *   头「三条口径」第 2 条）：同样粗细下虚线的墨迹只有实线的一半，取实线色会整条发虚。
  *
  * **为什么单独成件**：这条线在业务里被自绘了 44 次（`border-bottom: 1px solid #e6e6e6` 一类），
  * 于是「线色改一处漏一处」必然发生。收进一件后，改线色/改粗细只需要动本文件。
@@ -25,8 +27,10 @@
   width: 100%;
   border-top: 1px solid var(--ui-divider-line);
 }
+/* 虚线档**连同线色一起换**：只写 `border-top-style: dashed` 会让虚线仍吃实线色 `base-300`，
+   同一个分隔位上线型不同、深浅也不同（2026-09-30 实测发现 —— 当时只改了「带中段文字」那条路径）。 */
 .mh-divider--horizontal.mh-divider--dashed {
-  border-top-style: dashed;
+  border-top: 1px dashed var(--ui-line-dashed);
 }
 
 /* 带中段文字：整条改成 flex 行，线由两根 `.mh-divider__line` 承担（左固定 24px、右吃剩余） */
@@ -51,7 +55,7 @@
 }
 .mh-divider--dashed .mh-divider__line {
   height: 0;
-  border-top: 1px dashed var(--ui-divider-line);
+  border-top: 1px dashed var(--ui-line-dashed);
 }
 .mh-divider__label {
   flex: 0 0 auto;
@@ -67,5 +71,5 @@
   vertical-align: middle;
 }
 .mh-divider--vertical.mh-divider--dashed {
-  border-left-style: dashed;
+  border-left: 1px dashed var(--ui-line-dashed);
 }

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

@@ -15,7 +15,8 @@
  */
 [data-manohub-ui] {
   /* 单件令牌 */
-  --ui-divider-line: var(--ui-base-300);
+  --ui-divider-line: var(--ui-base-300); /* **实线**档的线色（与卡片描边、表格线同源）——
+     虚线档不用它：虚线走线型档 `--ui-line-dashed`（`base-400`），在面文件的修饰符块里直接取 */
   --ui-divider-label-gap: var(--ui-space-3); /* 中段文字与两侧线的距离 12 */
   --ui-divider-label-color: var(--ui-base-content-subtle);
 }

package/dist/styles/components/form.css

@@ -155,6 +155,57 @@
   color: var(--ui-required-mark);
 }
 
+/* ===== label 提示位（`Form.Item` 的 `tip`）=====
+ * 图标与气泡都**不新造** —— 图标取 `@manohub/icon` 的 `help`（带圈问号），气泡复用 `Tooltip` 的面
+ * （`.mh-tooltip`）与操作层 `popup.css` 的 hover 档；本件只声明**提示位在 label 行里怎么排**。
+ *
+ * 宿主位（Tooltip 落在 label 里的那个 span）有两件事必做，少一件就有肉眼可见的偏移：
+ * ① `flex: 0 0 auto` —— label 文本过长时走省略号，图标不被挤压；
+ * ② 行高归 1 —— 图标比一行文字矮（图标档对 20px 行盒），留在 label 的行盒里会按基线排，
+ *    中线与 label 文字错开（本仓对这类 1~6px 偏移有实测前科，见 `.mh-form-item__control` 那段）。
+ * 气泡本身是固定定位（操作层 hover 档），不参与本行排布，故宿主宽度恒等于图标宽度。 */
+
+.mh-form-item__tip {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  line-height: 1;
+}
+
+/* 触发器（问号按钮）：`reset` 不代消费方归零控件外观，故边 / 底 / 内距三项自备。
+   颜色取次要色 —— label 旁是**辅助**信息，不与字段名抢层级；悬停 / 聚焦升到正文色。 */
+
+.mh-form-item__tip-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--ui-base-content-muted);
+  cursor: help;
+}
+
+.mh-form-item__tip-btn:hover,
+.mh-form-item__tip-btn:focus-visible {
+  color: var(--ui-base-content);
+}
+
+/* 键盘可达：气泡显形靠操作层的宿主 `:focus-within` 档，这里只管**焦点可见**（主色环）。 */
+
+.mh-form-item__tip-btn:focus-visible {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: 2px;
+}
+
+/* 图标尺寸：常规图标一律取全局图标档。`<Icon>` 的宽高是**属性**，面层能覆盖；
+   不写就会静默落到组件默认的 16（口径见 `contract-icon-direction.spec.ts`）。 */
+
+.mh-form-item__tip-btn > svg {
+  width: var(--ui-font-icon);
+  height: var(--ui-font-icon);
+}
+
 /* label 对齐：基类默认右对齐（贴控件列，`labelAlign` 缺省档）；
    `labelAlign="left"` 时挂这个修饰类改成左对齐 —— 只给「非默认值」挂类，避免两段声明争胜出顺序。
    位置必须在基类规则之后：`.mh-form-item__label {` 是它的子串，测试取规则体时按首次出现命中。 */

package/dist/styles/components/notification.css

@@ -15,7 +15,7 @@
  * **左边线用绝对定位伪元素画，不用 `border-left` + `border-image`**：后者会吃掉圆角（规范踩过这个坑）。
  * 语义八档的线色是规范 04 档**渐变**，色板编号写在令牌注释里；底色复用本仓语义弱底令牌（一处定义）。
  *
- * **标签位与操作位不重复实现**：标签用标签族的 `mh-tag mh-tag--status mh-tag--error|--warning`，
+ * **标签位与操作位不重复实现**：标签用标记族（只读走 `.mh-badge`，要可关闭走 `.mh-tag`），
  * 操作用按钮族（`.mh-button--sm`）—— 本件只给它们的容器与间距。
  */
 .mh-notification {

package/dist/styles/components/select.css

@@ -137,37 +137,38 @@
   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;
+  /* 左右与下各一个最小呼吸位（上不写：面板根已有 4px 上内距）。
+     底部这一档落在**滚动容器**上：现代引擎已把滚动器的 padding-bottom 计入可滚动区
+     （实测 60 条选项 scrollHeight = 2160 + 4），故滚到底时最后一行不会贴着面板下边。 */
+  padding: 0 var(--ui-space-1) var(--ui-space-1);
 }
 
-/* 选项行：滑过 / 选中 / 禁用 / 提示 / 空态 */
+/* 选项行：滑过 / 键盘高亮 / 选中 / 禁用 / 提示 / 空态
+   **行的几何与行态与树行同源**（`mh-tree__row`，2026-09-30 由使用方拍板对齐）：行高 / 圆角 /
+   基础内距 / 字号 / 滑过与选中底色逐项同值 —— 同一个面板里，列表与树两形态不再各是一套行。
+   行元素是 `div[role='option']`、**不是 button**（见 `select-list.tsx`）：listbox 的选项不是交互控件，
+   键盘改由「触发器持焦 + `aria-activedescendant` 指向高亮行」表达。
+   随之退场的两条补丁（都是为 `<button>` 而写的）：
+   ① 按钮 UA 四件套重置（`border` / `background` / `font-family` / `text-align`）—— div 本就没有 UA 外观；
+   ② `width: 100%` —— 那是按钮的 `width: auto` 解析成「包裹内容宽」才要补的，div 是块级、本就满宽
+      （hint / empty 两个 span 靠下面的 display 拿满宽）。 */
 .mh-select__option {
   position: relative;
   display: flex;
   align-items: center;
-  /* **必须显式给宽**：选项是 `<button>`，而按钮的 `width: auto` 解析成「包裹内容宽」
-     （表单控件不参与块级拉伸），不给就会缩成文字那么宽 ——
-     滑过 / 选中的底色只剩一小条，聚焦环也贴着文字。`.mh-select__add` 同理。 */
-  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;
+  border-radius: var(--ui-radius-control);
   font-size: var(--ui-select-font-size);
   color: var(--ui-base-content);
   cursor: pointer;
@@ -186,10 +187,20 @@
   appearance: none;
   pointer-events: none;
 }
+/* 行态三档与树行逐条对应（滑过 / 按下 / 选中）：
+   ① 滑过 = 键盘高亮（`data-active`，见 `select-list.tsx` 的高亮模型）= 主色浅底；
+   ② 按下 = 选中底（与树行的 `:active` 同款）；
+   ③ 选中 = 选中底 + 主色字。 */
 .mh-select__option:hover,
-.mh-select__option.is-hover {
+.mh-select__option.is-hover,
+.mh-select__option[data-active='true'] {
   background: var(--ui-select-option-hover);
 }
+.mh-select__option:active {
+  background: var(--ui-select-option-selected);
+}
+/* 零 JS 静态档的键盘可达：行内含原生 radio / checkbox 时，焦点在它身上即给行描边
+   （组件路径的选项**不可聚焦**，键盘高亮走上面的 `data-active`）。 */
 .mh-select__option:has(input:focus-visible) {
   outline: 2px solid var(--ui-primary);
   outline-offset: -2px;
@@ -201,6 +212,28 @@
   background: var(--ui-select-option-selected);
   color: var(--ui-primary);
 }
+/* 相连的选中行：缝上的圆角**融合抵消**（多选连续勾选时最扎眼 —— 两个 6px 圆角各自让出的
+   凹口拼成一个「蝴蝶结」，看着像渲染坏了）。
+   做法：给自己选中、**下一行也选中**的那一行补一条同色补片，向上下各延伸一个圆角位 ——
+   它同时盖住上行让出的下半凹口与下行让出的上半凹口，两块底因此连成一片。
+   只认「下一行」这一个方向（CSS 只有向后的兄弟组合子）：**单向就够**，补片本来横跨两行。
+   补片不吃事件（`pointer-events: none`）—— 它压在下一行顶上 6px，若可点会把点击算到上一行头上。
+   ⚠️ 零 JS 那一路的下家条件写成 `+ .mh-select__option input:checked`（兄弟组合子后再接后代），
+   **不是** `+ .mh-select__option:has(input:checked)`：`:has()` **不许嵌套**，写了整条规则会被
+   解析器丢掉（浏览器里静默失效 —— 实测踩过，`contract-class-surface` 有机械护栏）。 */
+.mh-select__option.is-selected:has(+ .mh-select__option.is-selected)::after,
+.mh-select__option[data-state='selected']:has(+ .mh-select__option[data-state='selected'])::after,
+.mh-select__option:has(input:checked):has(+ .mh-select__option input:checked)::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(-1 * var(--ui-radius-control));
+  height: calc(2 * var(--ui-radius-control));
+  /* 取本行**算出来**的底色（选中底随主题与状态变，写死色值就对不上了） */
+  background-color: inherit;
+  pointer-events: none;
+}
 .mh-select__option.is-disabled,
 .mh-select__option[data-disabled='true'],
 .mh-select__option:has(input:disabled) {
@@ -213,18 +246,11 @@
 .mh-select__option--empty {
   color: var(--ui-base-content-muted);
 }
-/* 「创建 xxx」行：搜索词无命中时出现，语义与选项行一致但用主色标出 */
+/* 「创建 xxx」行：搜索词无命中时出现 —— 它是 `.mh-select__option` 上的**修饰类**
+   （两件同写：`class="mh-select__option mh-select__add"`），行的几何与三态全沿用基类，
+   这里只改字色为「可创建」的主色。 */
 .mh-select__add {
-  width: 100%;
-  border: none;
-  background: transparent;
   color: var(--ui-primary);
-  font-family: inherit;
-  text-align: left;
-}
-.mh-select__add:hover,
-.mh-select__add.is-hover {
-  background: var(--ui-select-option-hover);
 }
 
 /* ===== 选项分组（组标题不可点，只做分区；组间距靠分隔线给） ===== */
@@ -248,17 +274,14 @@
   padding: var(--ui-space-2) var(--ui-space-2) var(--ui-space-1);
 }
 
-/* ===== 树体（树选择 `SelectTree` 的面板内容）=====
-   边界要认清楚：**面板皮肤归本文件**（上一节），**树的行态归 tree 面**（`.mh-tree__*` 那一族，
-   本文件一行都不碰 —— 跨族类名须先登记跨面豁免，这里不走那条路）。
-   故本件只做「把树安放进面板」这一件事：内距。
-   行高 / 缩进 / 滑过与选中底色全部沿用 tree 面，两处形态不会漂移；
-   **限高与滚动也不在这里** —— 那是面板（`.mh-select__panel`）与面板内容区（`.mh-select__body`）的事，
-   列表与树两形态共用同一份（形态里各写一条就会漂移，本件此前正是自己写了一条）。 */
-.mh-select__tree {
-  /* 行底满宽、只有内容缩进（缩进公式在 tree 面），故左右各留一个最小呼吸位 */
-  padding: 0 var(--ui-space-1) var(--ui-space-1);
-}
+/* ===== 树体壳已退场（2026-09-30）=====
+   原先这里有一个 `.mh-select__tree`：面板里的树包在它里面拿内距（左右 4 / 下 4），
+   而列表形态的选项是面板的**直接子节点**、一路贴到面板边缘 —— 同一个面板里两形态的内距不一样
+   （浏览器实测：面板 240 时树行 232、选项行 240）。
+   内距现归**共用的内容区**（上一节 `.mh-select__body`）：一处规格、两形态同数；
+   树体壳的唯一职责既然已经上移，壳本身一并退场 —— 留一层不承载任何规则的包裹只是噪音。
+   边界不变：**面板皮肤归本文件**，**树的行态归 tree 面**（`.mh-tree__*` 那一族，本文件一行都不碰
+   —— 跨族类名须先登记跨面豁免，这里不走那条路），行高 / 缩进 / 滑过与选中底色全沿用 tree 面。 */
 
 /* 命中高亮（搜索命中的那段文字，由组件的 `renderLabel` 落进 `.mh-tree__label` 槽）。
    底色取主色浅底档（与选中 / 滑过同一套语义槽位）；字色 `inherit` —— 高亮只负责「标出位置」，

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

@@ -20,18 +20,25 @@
        （实测：chrome 里量到 16px 才发现的）；
      - 面板 `.mh-select__panel`：挂在 `.mh-popup-host` 下、与触发器**兄弟**（不在 `.mh-select`
        子树里）—— 否则圆角、行高、字号、选中底全失效。 */
-  /* 单件令牌 */
+  /* 单件令牌
+     ## 选项行与树行同源（2026-09-30 由使用方拍板对齐）
+     面板里的选项行与 `mh-tree__row`（`SelectTree` 的面板内容）现在是**同一套行**：
+     下面的行高 / 基础内距 / 字号 / 滑过底四项都取树行那份值（选中底两处本来就同源），
+     故面板里列表形态与树形态不会再长成两套行。改树行的行几何 = 选项行一起动（有意）。
+     ⚠️ 与全局 `--ui-row-height`（36，Skeleton / Collapse 头行在用）**不是一档**：
+     对齐目标是树行（34），不是全库行高 —— 别再按「行高就该 36」改回来。 */
   --ui-select-height: var(--ui-control-height-md); /* 标准档 32（日期格与面板内部用；触发器的框高归输入面） */
-  --ui-select-padding-x: var(--ui-space-3); /* 12 */
+  --ui-select-padding-x: var(--ui-space-2); /* 8 = 树行的基础内距（缩进之外的左右呼吸位） */
   --ui-select-radius: var(--ui-radius-md); /* 8：设计 `0:4025` 下拉面板 r8（原注释写 8 但取的是控件档 6） */
-  --ui-select-font-size: var(--ui-font-body); /* 14 */
-  --ui-select-option-height: 36px; /* 设计 `0:4024`：选项行 144×36（原为 34） */
-  --ui-select-option-hover: var(--ui-base-200); /* 设计滑过底 #f2f2f2 */
-  --ui-select-option-selected: var(--ui-primary-subtle); /* 见头部「有色差异」 */
-  --ui-select-chip-height: 24px; /* 多选标签（规范复用标签族 24 档） */
+  --ui-select-font-size: var(--ui-font-caption); /* 13 = 树行字号（不是触发器的 14） */
+  --ui-select-option-height: var(--ui-tree-row-height); /* 34 = 树行高（同源引用，两处不会各自漂） */
+  --ui-select-option-hover: var(--ui-primary-weak); /* 滑过 / 键盘高亮：与树行的滑过同档（**不再是中性灰**） */
+  --ui-select-option-selected: var(--ui-primary-subtle); /* 选中底：与树行的选中同档 */
+  --ui-select-chip-height: var(--ui-mark-height-md); /* 多选标签（规范复用标签族 24 档）⇒ 标记体量档，与徽标 / 标签同源 */
   --ui-select-icon-size: var(--ui-font-icon); /* 下拉箭头：常规图标档 */
   /* 面板限高（**列表与树两形态共用**）：面板整体（含搜索行）不超此高，超出即内容区滚动。
-     320px ≈ 8 行选项（选项行 36 + 面板上下内距 8）；树形态可见行数按 tree 面的节距 40 折算
-     （行高 34 + 行距 6），有无搜索行会差一行上下。要改高度改这枚令牌，不要在业务侧压 max-height。 */
+     320px ≈ 8 行（行高 34 + 面板上下内距 8）—— 列表与树两形态的节距现在是同一个数
+     （树行 2026-09-30 起也去掉了行距），有无搜索行会差一行上下。
+     要改高度改这枚令牌，不要在业务侧压 max-height。 */
   --ui-select-panel-max-height: 320px;
 }