@manohub/ui 0.10.2 → 0.10.4

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-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;
 }

package/dist/styles/components/tag.css

@@ -1,61 +1,53 @@
 /**
- * Tag —— 标签（常规 / 状态 / 可选 / 新增 / 轻量筛选片）。
+ * Tag —— **`Badge` 的交互封装**（可关闭 / 可新增）。
  *
- * 出处：`@aihub/theme` 的 `playground/components/tag.css` 与 `src/components/tag.css`
- * （常规 24 高 / 大号 28；状态档 22 高、小圆角、四色语义；可选档胶囊 + 选中实底主色；
- *  新增档虚线框；筛选项贴片底 + 主色字）。
+ * ## 本件不画框（与 `select.css` 同一条纪律）
  *
- * **与 `Badge` 的判据**：`Badge` 是**状态徽标**（固定短、要一眼看出状态色、有圆点/数字档）；
- * 本件是**内容标签**（描述性文字、可能可选/可加/可关闭，长度由内容决定）。两者不同族，别互相顶替。
+ * 底 / 边 / 圆角 / 高度 / 字号 / 内距 / 档位**全归 `badge` 面** —— 徽标是「只读标记」的唯一样式源，
+ * 本件只往它上面加两个交互位。2026-09-30 之前这里有一整套与 `badge` 重复的几何
+ * （`--ui-tag-bg` / `-height` / `-font-size` / `-radius` …）：同一个高度上两件各走一个圆角档、
+ * 同一个「浅主色标签底」两件给了两个色 —— 那批规则已整体撤除，本文件只剩三样东西：
  *
- * **状态档四色**直接用本仓语义令牌（`--ui-{info,success,warning,error}-weak` / 对应主色），
- * 不新造一套色板 —— 与 `Badge` / `Notice` 同一批语义槽位。
+ *   1. `.mh-tag`：内容与操作位之间的间距（比 `Badge` 的通用 gap 紧一档）；
+ *   2. `.mh-tag__close` / `.mh-tag__confirm`：两个操作位（14 圆底 + 悬停蒙层；图标 12 属有意保留的专属尺寸）；
+ *   3. `.mh-tag--add`：新增入口形态（虚线框 + 中性字，滑过转主色）；
+ *   4. `.mh-tag--editing` / `.mh-tag__input`：新增档点开后的编辑态（输入框的框归 input 面，
+ *      这里只给**窄**宽度；输入框 ↔ 确认位沿用 `.mh-tag` 的间距）。
  *
- * **高度三档与图标/关闭位尺寸都在本件令牌上**（`--ui-tag-*`）：档位只覆盖令牌、不复制几何规则。
- * 自定义色（`color` prop）经组件内联覆盖 `--ui-tag-bg`，故底色的取用点只有一处。
+ * ## 特异性：两位本件类，不靠导入顺序
+ *
+ * `--add` 那组写成 **`.mh-tag.mh-tag--add`（0-2-0）**，压过 badge 面的单类规则（0-1-0）。
+ * 两条备选都被否掉：
+ * ① 引用 `.mh-badge`（面文件的类名必须与文件词根同根，跨族引用要进豁免台账）；
+ * ② 靠 `styles/index.css` 的导入顺序（badge 面在前、本面在后）—— 顺序会被人无意调整，
+ *    两位类权重不会。`--add` 转发给 `Badge` 的档是 `plain`（底透明、字取中性），
+ *    需要覆盖的只剩 `border-color` 与字色。
+ *
+ * ⚠️ 新增档的根是**真实 `<button>`**（走 `Badge` 的 `as="button"`）：按钮自带外观的三样
+ * （`border` / `background` / `padding`）由 badge 面提供（`contract-reset.spec.ts` 按标签审计），
+ * `font-family: inherit` 也在那边补 —— 本件只管虚线框与悬停色。
  */
+
+/* ===== 内容 ↔ 关闭位：比 Badge 的通用 gap（6，给前置点的）紧一档 ===== */
 .mh-tag {
-  display: inline-flex;
-  align-items: center;
   gap: var(--ui-tag-gap);
-  height: var(--ui-tag-height);
-  padding: 0 var(--ui-space-3);
-  border-radius: var(--ui-radius-control);
-  background: var(--ui-tag-bg);
-  color: var(--ui-primary);
-  font-size: var(--ui-tag-font-size);
-  line-height: 1;
-  white-space: nowrap;
-}
-
-/* ===== 尺寸档 =====
-   20 档是设计稿里**唯一有实证**的标签尺寸（`0:2723` 36×20）：小圆角 r3 + 12px 字。
-   左右内距取 8 而不是设计反推的 6：6 不在本包的间距阶（4/8/12/16/20/24）上，
-   为 4px 的总宽差破一档刻度不值当。 */
-.mh-tag--sm {
-  height: var(--ui-tag-height-sm);
-  padding: 0 var(--ui-space-2);
-  border-radius: var(--ui-radius-xs);
-  font-size: var(--ui-font-micro);
-}
-.mh-tag--lg {
-  height: var(--ui-tag-height-lg);
 }
 
-/* ===== 前置图标与关闭位 ===== */
-.mh-tag__icon {
-  flex: none;
-  width: var(--ui-tag-icon-size);
-  height: var(--ui-tag-icon-size);
-}
-.mh-tag__close {
+/* ===== 操作位：关闭位（受控：只回调，见 TSX）与添加位（新增档）=====
+   两位共享「按钮重置 + 圆底 + 悬停过渡」，**尺寸与字形各按自己的量级走**：
+   - 关闭位：14 触区 + **12 字形**（贴小控件的字形，见 `contract-icon-direction` 的白名单）——
+     它是标签内的轻量移除操作，不该跟内容抢视觉重量；
+   - 添加位：**常规图标档** `--ui-font-icon`（default 16 / farris 14）+ 由它派生的触区
+     （`+ 4`：16→20 / 14→18）—— 它是这一档的**主操作**（一枚 ＋），与入口的加号同档。
+     触区用 `calc()` 而不是写死 20：farris 的图标档是 14，写死就会让字形顶满圆底。
+   关闭位右端不再回收内距：旧写法是「本件左右内距 12 + 关闭位负外边距 4」凑出 8，
+   现在 `Badge` 的 md 内距就是 8，负外边距一并撤掉。 */
+.mh-tag__close,
+.mh-tag__confirm {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: none;
-  width: var(--ui-tag-close-size);
-  height: var(--ui-tag-close-size);
-  margin-right: calc(-1 * var(--ui-space-1));
   padding: 0;
   border: none;
   border-radius: var(--ui-radius-full);
@@ -65,6 +57,10 @@
   opacity: 0.65;
   transition: opacity 0.15s ease, background-color 0.15s ease;
 }
+.mh-tag__close {
+  width: var(--ui-tag-close-size);
+  height: var(--ui-tag-close-size);
+}
 .mh-tag__close > svg {
   flex: none;
   width: 12px;
@@ -74,131 +70,58 @@
   opacity: 1;
   background: rgb(0 0 0 / 0.08);
 }
-
-/* ===== 描边档（布尔 prop `outline`）：设计稿表格内标签的配方 = 浅主色底 + 浅主色边 =====
-   设计实证 `0:2723`：36×20 / 底 `#eaefff` / 边 `#b7caff` / r3 / 字 12 —— 即
-   `size="sm"` + `outline` 两档合起来的样子。
-   ⚠️ **本条的配方改过**：改前是「透明底 + `1px solid currentColor`」（全色描边）。全色描边在浅底
-   页面上过重，且与 `shape="status"` + `tone` 的观感打架（两者都成了「彩边」）；设计给的正是
-   「同色系浅边」。若某个页面确实需要「透明底 + 全色边」那种更硬的轮廓，请提需求另开形态，
-   不要就地改回去。 */
-.mh-tag--outline {
-  background: var(--ui-primary-weak);
-  border: 1px solid var(--ui-primary-border);
-}
-
-/* ===== 状态标签（22 高 / 四色语义）===== */
-.mh-tag--status {
-  height: var(--ui-tag-height-status);
-  padding: 0 var(--ui-space-2);
-}
-.mh-tag--info {
-  background: var(--ui-info-weak);
-  color: var(--ui-info);
-}
-.mh-tag--success {
-  background: var(--ui-success-weak);
-  color: var(--ui-success);
-}
-.mh-tag--warning {
-  background: var(--ui-warning-weak);
-  color: var(--ui-warning);
-}
-.mh-tag--error {
-  background: var(--ui-error-weak);
-  color: var(--ui-error);
-}
-
-/* ===== 可选标签（胶囊；开关是隐身原生 radio，焦点环画在可见标签上）===== */
-.mh-tag--select {
-  position: relative;
-  border: none;
-  border-radius: var(--ui-radius-full);
-  background: var(--ui-primary-weak);
+/* 添加位是**肯定的**操作：触区与字形都跟图标档走，色取主色、悬停给主色浅底 */
+.mh-tag__confirm {
+  width: calc(var(--ui-font-icon) + var(--ui-space-1));
+  height: calc(var(--ui-font-icon) + var(--ui-space-1));
   color: var(--ui-primary);
-  cursor: pointer;
-  font-family: inherit;
-}
-.mh-tag--select > 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;
-}
-/* 悬停底取 `base-200`（中性面）—— 改前是 `base-50`：那档只比内容底低 1.7 L*，
-   在多数屏幕上看不出悬停反馈（`base-50` 不再作为「更轻底」的默认去处，见 colors 口径第 1 条）。 */
-.mh-tag--select:hover {
-  background: var(--ui-base-200);
-  border: 1px solid var(--ui-base-300);
 }
-.mh-tag--select:has(input:focus-visible) {
-  outline: 2px solid var(--ui-primary);
-  outline-offset: -2px;
+.mh-tag__confirm > svg {
+  flex: none;
+  width: var(--ui-font-icon);
+  height: var(--ui-font-icon);
 }
-/* 选中：实底主色白字；三源等价（真实伪类 / 组件下发 / 静态档） */
-.mh-tag--select.is-selected,
-.mh-tag--select[data-state='selected'],
-.mh-tag--select:has(input:checked) {
-  background: var(--ui-primary);
-  color: var(--ui-primary-content);
+.mh-tag__confirm:hover {
+  opacity: 1;
+  background: var(--ui-primary-weak);
 }
-/* 选中态里的关闭位：底是主色，悬停用白蒙层而不是黑蒙层 */
-.mh-tag--select.is-selected .mh-tag__close:hover,
-.mh-tag--select:has(input:checked) .mh-tag__close:hover {
-  background: rgb(255 255 255 / 0.24);
+
+/* ===== 编辑态（`shape="add"` 点入口后）=====
+   这一档**没有标记片**：输入框的框归 input 面（本件只给宽度），确认位是第二个操作位。
+   宽度令牌设在 `Input` 的**表壳**上（`Input` 的 `class` 落表壳，见它的「属性落点」）。 */
+.mh-tag--editing {
+  display: inline-flex;
+  align-items: center;
 }
-/* 禁用：不可点 + 转弱 */
-.mh-tag--select.is-disabled,
-.mh-tag--select:has(input:disabled) {
-  background: var(--ui-base-200);
-  color: var(--ui-base-content-subtle);
-  cursor: not-allowed;
+/* ⚠️ **两位类选择器**（0-2-0），不是单类：`Input` 的表壳自带宽度规则（`.mh-input__wrap`，0-1-0），
+   而 `styles/index.css` 里 **`input.css` 排在本文件之后**（表单与选择控件那一组）—— 单类写法在
+   同特异性下会被它压掉，实测输入框渲染成 201px 而不是这一档要的 120px（「窄输入」名存实亡）。 */
+.mh-tag .mh-tag__input {
+  width: var(--ui-tag-input-width);
 }
 
-/* ===== 新增档（虚线框 + 加号由 @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-300);
-  border-radius: var(--ui-radius-full);
+/* ===== 新增入口形态（`shape="add"`）=====
+   转发给 `Badge` 的是 `plain`（透明底 + 中性字），这里把框换成虚线、字压成中性档、
+   悬停 / 按下转主色 —— 与旧 `--add` 档同一套观感。 */
+.mh-tag.mh-tag--add {
+  border-style: dashed;
+  border-color: var(--ui-line-dashed); /* 虚线线色：口径「实线 base-300 / 虚线 base-400」 */
   background: transparent;
   color: var(--ui-base-content-muted);
   cursor: pointer;
   font-family: inherit;
-  font-size: var(--ui-tag-font-size);
 }
-.mh-tag--add:hover {
+/* 加号走常规图标档（`--ui-font-icon`）：组件里不写死 `size`（见 AGENTS 第 7 条） */
+.mh-tag.mh-tag--add > svg {
+  flex: none;
+  width: var(--ui-font-icon);
+  height: var(--ui-font-icon);
+}
+.mh-tag.mh-tag--add:hover {
   border-color: var(--ui-primary-hover);
   color: var(--ui-primary);
 }
-.mh-tag--add:active {
+.mh-tag.mh-tag--add:active {
   border-color: var(--ui-primary);
   color: var(--ui-primary);
 }
-
-/* ===== 轻量筛选片（浅底 + 主色字）===== */
-.mh-tag--chip {
-  height: var(--ui-tag-height-sm);
-  padding: 0 var(--ui-space-2);
-  border: none;
-  border-radius: var(--ui-radius-full);
-  background: var(--ui-primary-weak);
-  color: var(--ui-primary);
-  font-family: inherit;
-  font-size: var(--ui-font-caption);
-  cursor: pointer;
-}
-.mh-tag--chip[data-state='active'],
-.mh-tag--chip.is-active {
-  background: var(--ui-primary);
-  color: var(--ui-primary-content);
-}

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

@@ -1,33 +1,24 @@
 /**
  * tag —— 单件令牌（**基础值**）。
  *
- * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ * 本件是 **`Badge` 的交互封装**（可关闭 / 可新增）：底 / 边 / 圆角 / 高度 / 字号 / 内距 / 档位
+ * 全归 `badge` 面，故这里只剩**交互位自己**的两个值 —— 文件这么短是**有意**的：
+ * 2026-09-30 之前它带着一整套与 `badge` 重复的几何（`--ui-tag-bg` / `-height` / `-font-size` …），
+ * 同一高度上还各走一个圆角档，那批令牌已随收口撤除。
  *
  * ## 抽出说明
- * 本文件从面文件里抽出（原先混写在 `tag.css` 顶部）：这些是**基础值**，锚在
- * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
- * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
- * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ * 这些是**基础值**，锚在 `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，
+ * 因此**任何落在容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设。
  *
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
- * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里（搬走会让档位失效）。
  * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
  */
 [data-manohub-ui] {
-  /* 单件令牌。
-     软底**只有一档**：改前是 `#e1edff`(24) 与 `#f0faff`(28) 两个字面量，与主题的主色浅底档
-     `--ui-primary-weak`(#EFF5FF) 差 ≤ 6/255 —— 三个近值并存的典型症状，本轮并入主题档。
-     设计实证：表格内标签 `0:2723` 底 `#eaefff`。 */
-  --ui-tag-bg: var(--ui-primary-weak);
-  /* 20 / 24 两档是**跨件共用**的「标记体量档」（徽标 / 标签 / 多选标签片同源）⇒ 全局值在
-     `@manohub/theme` 的 `spacing.css`，本件只做别名：改档只改主题那一处。
-     28 / 22 两档只服务本件（大号标签 / 状态标签），故字面量留在本文件。 */
-  --ui-tag-height: var(--ui-mark-height-md);
-  --ui-tag-height-sm: var(--ui-mark-height-sm);
-  --ui-tag-height-lg: 28px;
-  --ui-tag-height-status: 22px;
-  --ui-tag-font-size: var(--ui-font-caption);
-  --ui-tag-icon-size: var(--ui-font-icon); /* 常规图标档（本件不再自定数值） */
-  --ui-tag-close-size: 14px;
+  /* 内容 ↔ 操作位：4（`Badge` 的通用 gap 是 6，那是给前置点的；操作位紧一档更像「贴在字尾」） */
   --ui-tag-gap: var(--ui-space-1);
+  /* 关闭位触区；字形 12 属「贴小控件的字形」，见 contract-icon-direction。
+     添加位（新增档）**不占令牌**：它的触区与字形都按常规图标档 `--ui-font-icon` 派生。 */
+  --ui-tag-close-size: 14px;
+  /* 新增档的**窄**输入框宽度：在容器上重设即可加宽（`--ui-tag-input-width: 200px`） */
+  --ui-tag-input-width: 120px;
 }