@manohub/ui 0.10.2 → 0.10.4

package/dist/components/tag/index.js

@@ -1,69 +1,34 @@
-import { defineComponent, computed, createVNode, mergeProps, Fragment, isVNode } from "vue";
+import { defineComponent, computed, ref, watch, createVNode, mergeProps, Fragment } from "vue";
 import { Icon } from "@manohub/icon";
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
+import { Badge } from "../badge/index.js";
+import { Input } from "../input/index.js";
 const Tag = /* @__PURE__ */ defineComponent({
   name: "Tag",
   inheritAttrs: false,
   props: {
     shape: {
       type: String,
-      default: "regular"
+      default: "soft"
     },
     tone: {
       type: String,
-      default: void 0
+      default: "default"
     },
+    /* 缺省 `md`（24）而不是跟随 `Badge` 的 `sm`（20）：标签比徽标常用大一号 —— 它是列表项 / 卡片头
+       里承载文字的那一枚，20 档留给「表格内标签」那种密集场景（显式写 `size="sm"`）。 */
     size: {
       type: String,
       default: "md"
     },
-    lg: {
-      type: Boolean,
-      default: false
-    },
-    icon: {
-      type: String,
-      default: void 0
-    },
-    outline: {
-      type: Boolean,
-      default: false
-    },
     closable: {
       type: Boolean,
       default: false
     },
-    color: {
-      type: String,
-      default: void 0
-    },
-    selected: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    name: {
-      type: String,
-      default: void 0
-    },
-    value: {
-      type: [String, Number],
-      default: void 0
-    },
-    onClick: {
-      type: Function,
-      default: void 0
-    },
-    onChange: {
+    onClose: {
       type: Function,
       default: void 0
     },
-    onClose: {
+    onAdd: {
       type: Function,
       default: void 0
     }
@@ -73,68 +38,104 @@ const Tag = /* @__PURE__ */ defineComponent({
     slots,
     attrs
   }) {
-    const resolvedSize = computed(() => props.lg ? "lg" : props.size);
-    const customColor = computed(() => props.color ? {
-      "--ui-tag-bg": `color-mix(in srgb, ${props.color} 14%, white)`,
-      color: props.color
-    } : void 0);
-    const classes = () => ["mh-tag", resolvedSize.value === "md" ? void 0 : `mh-tag--${resolvedSize.value}`, props.shape !== "regular" ? `mh-tag--${props.shape}` : void 0, props.shape === "status" && props.tone ? `mh-tag--${props.tone}` : void 0, props.outline ? "mh-tag--outline" : void 0, props.shape === "select" && props.selected ? "is-selected" : void 0, props.disabled ? "is-disabled" : void 0, attrs.class].filter(Boolean).join(" ");
-    const content = () => createVNode(Fragment, null, [props.icon ? createVNode(Icon, {
-      "name": props.icon,
-      "class": "mh-tag__icon"
-    }, null) : null, slots.default?.(), props.closable ? createVNode("button", {
-      "type": "button",
-      "class": "mh-tag__close",
-      "aria-label": "关闭",
-      "tabindex": -1,
-      "onClick": (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        props.onClose?.();
+    const isAdd = computed(() => props.shape === "add");
+    const baseShape = computed(() => props.shape === "add" ? "plain" : props.shape);
+    const editing = ref(false);
+    const draft = ref("");
+    const editorRef = ref(null);
+    const startEdit = () => {
+      draft.value = "";
+      editing.value = true;
+    };
+    const stopEdit = () => {
+      editing.value = false;
+      draft.value = "";
+    };
+    const submit = () => {
+      const name = draft.value.trim();
+      if (!name) return;
+      props.onAdd?.(name);
+      stopEdit();
+    };
+    watch(editing, (on) => {
+      if (!on) return;
+      editorRef.value?.querySelector("input")?.focus();
+    }, {
+      flush: "post"
+    });
+    const onEditorKeydown = (event) => {
+      if (event.key !== "Escape") return;
+      event.stopPropagation();
+      stopEdit();
+    };
+    const onEditorFocusout = (event) => {
+      const next = event.relatedTarget;
+      if (next && editorRef.value?.contains(next)) return;
+      stopEdit();
+    };
+    const forwardAttrs = computed(() => {
+      const rest = {};
+      for (const [key, value] of Object.entries(attrs)) {
+        if (key !== "class" && key !== "style") rest[key] = value;
       }
-    }, [createVNode(Icon, {
-      "name": "close"
-    }, null)]) : null]);
+      if (isAdd.value) {
+        const consumer = rest.onClick;
+        rest.onClick = (event) => {
+          consumer?.(event);
+          startEdit();
+        };
+      }
+      return rest;
+    });
     return () => {
-      let _slot;
-      const style = {
-        ...customColor.value,
-        ...attrs.style
-      };
-      if (props.shape === "add") {
-        return createVNode("button", {
+      if (isAdd.value && editing.value) {
+        return createVNode("span", {
+          "ref": editorRef,
+          "class": "mh-tag mh-tag--editing",
+          "onKeydown": onEditorKeydown,
+          "onFocusout": onEditorFocusout
+        }, [createVNode(Input, {
+          "class": "mh-tag__input",
+          "size": "sm",
+          "modelValue": draft.value,
+          "placeholder": "输入标签名",
+          "aria-label": "标签名",
+          "onChange": (value) => draft.value = value,
+          "onEnter": () => submit()
+        }, null), createVNode("button", {
           "type": "button",
-          "class": classes(),
-          "style": style,
-          "onClick": props.onClick,
-          "disabled": props.disabled
+          "class": "mh-tag__confirm",
+          "aria-label": "添加",
+          "tabindex": -1,
+          "onMousedown": (event) => event.preventDefault(),
+          "onClick": () => submit()
         }, [createVNode(Icon, {
-          "name": "plus",
-          "size": 14
-        }, null), slots.default?.()]);
-      }
-      if (props.shape === "select") {
-        return createVNode("label", {
-          "class": classes(),
-          "style": style
-        }, [createVNode("input", {
-          "type": "radio",
-          "name": props.name,
-          "value": props.value,
-          "checked": props.selected,
-          "disabled": props.disabled,
-          "onChange": (event) => props.onChange?.(event.target.checked)
-        }, null), content()]);
+          "name": "plus"
+        }, null)])]);
       }
-      const Clickable = props.shape === "chip" ? "button" : "span";
-      return createVNode(Clickable, mergeProps({
-        "class": classes(),
-        "style": style
-      }, props.shape === "chip" ? {
-        type: "button",
-        onClick: props.onClick
-      } : {}), _isSlot(_slot = content()) ? _slot : {
-        default: () => [_slot]
+      const extraClass = attrs.class;
+      return createVNode(Badge, mergeProps(forwardAttrs.value, {
+        "as": isAdd.value ? "button" : "span",
+        "tone": props.tone,
+        "shape": baseShape.value,
+        "size": props.size,
+        "class": ["mh-tag", isAdd.value ? "mh-tag--add" : void 0, extraClass].filter(Boolean).join(" "),
+        "style": attrs.style
+      }), {
+        default: () => createVNode(Fragment, null, [isAdd.value ? createVNode(Icon, {
+          "name": "plus"
+        }, null) : null, slots.default?.(), props.closable && !isAdd.value ? createVNode("button", {
+          "type": "button",
+          "class": "mh-tag__close",
+          "aria-label": "关闭",
+          "tabindex": -1,
+          "onClick": (event) => {
+            event.stopPropagation();
+            props.onClose?.();
+          }
+        }, [createVNode(Icon, {
+          "name": "close"
+        }, null)]) : null])
       });
     };
   }

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

@@ -118,9 +118,9 @@ export declare const Text: import("vue").DefineComponent<import("vue").ExtractPr
     size: TextSize;
     weight: TextWeight;
     tone: TextTone;
+    as: TextTag;
     mono: boolean;
     truncate: number | boolean;
-    as: TextTag;
 }, SlotsType<{
     default?: () => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -115,10 +115,10 @@ export declare const Tooltip: import("vue").DefineComponent<import("vue").Extrac
     title: string;
     align: TooltipAlign;
     action: string;
-    onAction: () => void;
     side: TooltipSide;
     trigger: TooltipTrigger;
     guide: boolean;
+    onAction: () => void;
 }, SlotsType<{
     default?: () => VNodeChild;
     content?: () => VNodeChild;

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

@@ -43,12 +43,25 @@ export interface TreeNode {
  * 应用侧只给节点；操作容器自己做 `stopPropagation`，所以点「删除」不会顺带把这一行选中。
  * 导航件（`Nav`）因此不必重写一份行渲染，把数据与 `renderActions` 透传进来即可。
  *
+ * ## 图标出口（两处，都是「位」而不是「样式」）
+ *
+ * 行内的图标位只有两处，各自独立，缺省都不改变现有几何：
+ * - `renderCaret(node, expanded)` 替掉**箭头字形**（槽位 / 点击 / `data-expanded` 仍归组件）；
+ * - `renderIcon(node)` 是标签**前**的节点图标槽（文件夹 / 文件一类），父子节点共用一位。
+ *
+ * 不在其中之列的（标题里的图标 + 文字）走 `renderLabel`：那属于标签**本体**。
+ *
  * @example 受控展开 + 计数徽标 + 行尾操作
  * <Tree nodes={treeNodes.value} rowKey="id" labelKey="name"
  *   selected={selectedId.value} onSelect={(n) => select(n.id)}
  *   expandedKeys={expandedKeys.value} onExpandChange={(k) => (expandedKeys.value = k)}
  *   renderNode={(n) => <Badge>{countOfDomain(n.id)}</Badge>}
  *   renderActions={(n) => <Button title="删除" onClick={() => removeDomain(n.id)} />} />
+ *
+ * @example 文件夹 / 文件图标 + 方向字形自表达（不靠旋转）
+ * <Tree nodes={tree.value} rowKey="id"
+ *   renderIcon={(n) => <Icon name={hasChild(n) ? 'folder' : 'file-text'} />}
+ *   renderCaret={(_n, expanded) => <Icon name={expanded ? 'chevron-down' : 'chevron-right'} />} />
  */
 export declare const Tree: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     nodes: {
@@ -92,6 +105,31 @@ export declare const Tree: import("vue").DefineComponent<import("vue").ExtractPr
         type: PropType<(node: TreeNode) => unknown>;
         default: undefined;
     };
+    /**
+     * 展开 / 收起箭头的自定义渲染（拿到节点与**当前展开态**）。
+     *
+     * 缺省仍是 `chevron-down` 字形 + 面层收起态转 −90°（默认路径零变化）。
+     * 自定义时**朝向由消费方按 `expanded` 自选字形**（`chevron-right` / `chevron-down`）——
+     * 与包内「方位一律用字形、不靠旋转别的图标」的口径同源；**不要再给内容加
+     * `mh-tree__caret-icon` 类**（那是缺省字形的转向钩子，加上会被转成 −90°）。
+     * 尺寸不必自管：槽位与槽内字形都取全局图标档 `--ui-font-icon`。
+     */
+    renderCaret: {
+        type: PropType<(node: TreeNode, expanded: boolean) => unknown>;
+        default: undefined;
+    };
+    /**
+     * 标签**前**的节点图标槽（文件夹 / 文件一类）。
+     *
+     * 父节点与叶子节点**都由消费方按 `node` 判定**（组件不替它猜「是不是叶子」：同一个图标槽
+     * 在两种节点上都成立，判定依据是数据而不是渲染期形态）。缺省不渲染该槽，几何零变化。
+     * 叶子行的箭头占位仍保留，故图标列跨层级对齐。颜色不写死：跟随行色，
+     * 选中行的主色字与滑过态自动同步。
+     */
+    renderIcon: {
+        type: PropType<(node: TreeNode) => unknown>;
+        default: undefined;
+    };
     /** 节点附加内容（计数徽标等），渲染在标签之后 */
     renderNode: {
         type: PropType<(node: TreeNode) => unknown>;
@@ -225,6 +263,31 @@ export declare const Tree: import("vue").DefineComponent<import("vue").ExtractPr
         type: PropType<(node: TreeNode) => unknown>;
         default: undefined;
     };
+    /**
+     * 展开 / 收起箭头的自定义渲染（拿到节点与**当前展开态**）。
+     *
+     * 缺省仍是 `chevron-down` 字形 + 面层收起态转 −90°（默认路径零变化）。
+     * 自定义时**朝向由消费方按 `expanded` 自选字形**（`chevron-right` / `chevron-down`）——
+     * 与包内「方位一律用字形、不靠旋转别的图标」的口径同源；**不要再给内容加
+     * `mh-tree__caret-icon` 类**（那是缺省字形的转向钩子，加上会被转成 −90°）。
+     * 尺寸不必自管：槽位与槽内字形都取全局图标档 `--ui-font-icon`。
+     */
+    renderCaret: {
+        type: PropType<(node: TreeNode, expanded: boolean) => unknown>;
+        default: undefined;
+    };
+    /**
+     * 标签**前**的节点图标槽（文件夹 / 文件一类）。
+     *
+     * 父节点与叶子节点**都由消费方按 `node` 判定**（组件不替它猜「是不是叶子」：同一个图标槽
+     * 在两种节点上都成立，判定依据是数据而不是渲染期形态）。缺省不渲染该槽，几何零变化。
+     * 叶子行的箭头占位仍保留，故图标列跨层级对齐。颜色不写死：跟随行色，
+     * 选中行的主色字与滑过态自动同步。
+     */
+    renderIcon: {
+        type: PropType<(node: TreeNode) => unknown>;
+        default: undefined;
+    };
     /** 节点附加内容（计数徽标等），渲染在标签之后 */
     renderNode: {
         type: PropType<(node: TreeNode) => unknown>;
@@ -331,6 +394,8 @@ export declare const Tree: import("vue").DefineComponent<import("vue").ExtractPr
     labelKey: string;
     childrenKey: string;
     renderLabel: (node: TreeNode) => unknown;
+    renderCaret: (node: TreeNode, expanded: boolean) => unknown;
+    renderIcon: (node: TreeNode) => unknown;
     renderNode: (node: TreeNode) => unknown;
     renderActions: (node: TreeNode) => unknown;
     expandedKeys: string[];

package/dist/components/tree/index.js

@@ -46,6 +46,31 @@ const Tree = /* @__PURE__ */ defineComponent({
       type: Function,
       default: void 0
     },
+    /**
+     * 展开 / 收起箭头的自定义渲染（拿到节点与**当前展开态**）。
+     *
+     * 缺省仍是 `chevron-down` 字形 + 面层收起态转 −90°（默认路径零变化）。
+     * 自定义时**朝向由消费方按 `expanded` 自选字形**（`chevron-right` / `chevron-down`）——
+     * 与包内「方位一律用字形、不靠旋转别的图标」的口径同源；**不要再给内容加
+     * `mh-tree__caret-icon` 类**（那是缺省字形的转向钩子，加上会被转成 −90°）。
+     * 尺寸不必自管：槽位与槽内字形都取全局图标档 `--ui-font-icon`。
+     */
+    renderCaret: {
+      type: Function,
+      default: void 0
+    },
+    /**
+     * 标签**前**的节点图标槽（文件夹 / 文件一类）。
+     *
+     * 父节点与叶子节点**都由消费方按 `node` 判定**（组件不替它猜「是不是叶子」：同一个图标槽
+     * 在两种节点上都成立，判定依据是数据而不是渲染期形态）。缺省不渲染该槽，几何零变化。
+     * 叶子行的箭头占位仍保留，故图标列跨层级对齐。颜色不写死：跟随行色，
+     * 选中行的主色字与滑过态自动同步。
+     */
+    renderIcon: {
+      type: Function,
+      default: void 0
+    },
     /** 节点附加内容（计数徽标等），渲染在标签之后 */
     renderNode: {
       type: Function,
@@ -237,12 +262,14 @@ const Tree = /* @__PURE__ */ defineComponent({
             event.stopPropagation();
             toggleExpand(key);
           }
-        }, [createVNode(Icon, {
+        }, [props.renderCaret ? props.renderCaret(node, expanded) : createVNode(Icon, {
           "name": "chevron-down",
           "class": "mh-tree__caret-icon"
         }, null)]) : createVNode("span", {
           "class": "mh-tree__caret mh-tree__caret--empty"
-        }, null), createVNode("span", {
+        }, null), props.renderIcon ? createVNode("span", {
+          "class": "mh-tree__icon"
+        }, [props.renderIcon(node)]) : null, createVNode("span", {
           "class": "mh-tree__label"
         }, [props.renderLabel ? props.renderLabel(node) : String(node[props.labelKey] ?? "")]), props.renderNode ? createVNode("span", {
           "class": "mh-tree__extra"

package/dist/index.d.ts

@@ -26,7 +26,7 @@ export { Layout, type LayoutGap, type LayoutAlign, type LayoutJustify, type Layo
 export { Avatar, type AvatarProps, type AvatarSize, type AvatarCompound } from './components/avatar';
 export { Skeleton, type SkeletonProps } from './components/skeleton';
 export { Radio, type RadioProps, type RadioCompound, type RadioCompoundType, type RadioCardItem, type RadioCardValue, } from './components/radio';
-export { Tag, type TagProps } from './components/tag';
+export { Tag, type TagProps, type TagShape } from './components/tag';
 export { Text, type TextProps, type TextSize, type TextTone, type TextWeight, type TextTag, } from './components/text';
 export { Tree, type TreeNode } from './components/tree';
 export { ListView, type ListViewProps, type ListViewStatus, type ListViewStatusTone, type ListViewCardItemProps, type ListViewCompound, } from './components/list-view';
@@ -39,7 +39,7 @@ export { Switch } from './components/switch';
 export { Capsule, type CapsuleOption, type CapsuleShape } from './components/capsule';
 export { Form, type FormProps, type FormHeaderProps, type FormItemProps, type FormValues, type FormItemSlotScope, type FormItemAlign, type FormLabelAlign, type FormColumns, type FormPadding, type FormCompound, } from './components/form';
 export { Checkbox, type CheckboxOption, type CheckboxCompound, type CheckboxCompoundType, } from './components/checkbox';
-export { Filter, FilterItem, FILTER_ALL, normalizeFilterValue, type FilterValue, type FilterValues, type FilterProps, type FilterItemProps, type FilterItemSlotScope, type FilterCompound, } from './components/filter';
+export { Filter, FilterItem, FILTER_ALL, normalizeFilterValue, type FilterValue, type FilterValues, type FilterProps, type FilterItemProps, type FilterItemSlotScope, type FilterTrigger, type FilterCompound, } from './components/filter';
 export { Notice, type NoticeTone } from './components/notice';
 export { Notification, type NotificationTone, } from './components/notification';
 export { Dialog, type DialogWidth } from './components/dialog';

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);
@@ -30,7 +34,8 @@
 /* 尺寸档的圆角吃**体量档**（`xs` / `sm`），不吃容器档 `md` —— 容器档一改（卡片圆角调整）
    徽标会跟着变，那是两件无关的事。20 档有设计实证（表格内标签 r3），24 档无实证、按体量就近升一档。
    高度取**标记体量档**（全局令牌 `--ui-mark-height-sm/md`）：与 `Tag` 的 20 / 24、`Select` 多选
-   标签片的 24 同源 —— 这三处以前各写一份字面量，改一次档要改三处（2026-09-30 收敛）。 */
+   标签片的 24 同源 —— 这三处以前各写一份字面量，改一次档要改三处（2026-09-30 收敛）。
+   `Tag` 的基础圆角同日也归到这两档（改前它走控件档 6px）：两族在 20 / 24 上同高同角。 */
 .mh-badge--sm {
   height: var(--ui-mark-height-sm);
   padding: 0 6px;
@@ -139,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 {
@@ -233,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/capsule.css

@@ -19,9 +19,17 @@
  *
  * **与 `Tabs` 的判据**：`Tabs` 是操作层的**骨架**（只给根、面板组与收起态，不带面），
  * 面可由本件或按钮族的分段形态担任；本件是**带自己轨道与选中胶囊的轻量选择控件**。
+ *
+ * **轨道按内容宽收缩，不被父级拉宽**（缺省档口径的第二半）—— `align-self: flex-start` 就是为这条而写：
+ * 父级若是**列向弹性**（典型是 `Tabs` 的根 `.mh-tabs`），交叉轴缺省 `stretch` 会把唯一的子项拉成通栏，
+ * 轨道底随之变成一条长胶囊（实测：内容 112px 的轨道被拉到 638px）；`TabBar` 同样被拉满，但它规范里
+ * 第 1 条就是「不画轨线」，没有底色，肉眼看不出来。要**主动**撑满仍然走 `block` 档 —— 那条
+ * `width: 100%` 是显式宽度，`align-self` 管不着它（撑满与否只由 `block` 决定）。
  */
 .mh-capsule {
   display: inline-flex;
+  /* 缺省不吃父级交叉轴的拉伸（理由见上）；`align-self` 只对弹性子项生效，独立使用无副作用 */
+  align-self: flex-start;
   align-items: center;
   gap: 0; /* 胶囊相邻无间隙 */
   min-height: var(--ui-capsule-height);

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