@manohub/ui 0.10.5 → 1.0.1

package/dist/styles/components/steps.css

@@ -1,205 +1,205 @@
-/**
- * Steps —— 步骤条（横向节点式 + 条形燕尾段式 + 进度条）。
- *
- * 出处：`@aihub/theme` 的 `playground/components/steps.css` 与 `src/components/steps.css`
- * （节点 30 圆、字号 14、节点与标题**同行**、标题间距 12；连线是 2px **点线** + 末端 6px 方盒转 45°
- *  的 `>` 折角箭头、最小长 58.383、弹性撑开；段 140×30、相邻**重叠 10**、整条 inline-flex 收宽；
- *  进度条高 9）。
- *
- * **当前步之后那一段才转蓝**（已完成步之后仍是灰线）—— 这是规范实测的取向，别做成"已完成段全蓝"。
- *
- * 状态来源是**单一来源**（组件下发的 `--done` / `--current` / `--active`）：步骤序号不是原生元素能表达的状态，
- * 故这里没有「三源等价」可言 —— 与勾选/开关那类不同，别照抄那份写法。
- *
- * 连线用**独立空元素**（`.mh-steps__connector`）而不是 `.mh-steps__step + ::after`：折角箭头要撑开弹性余量，
- * 且 N 个节点配 N-1 条线，独立元素才能让两端节点各自保持自己的标题宽度。
- *
- * 可点档（`clickable`）下步元素是**原生 `<button>`** —— 归零、焦点环、禁用态见文件中间那节。
- */
-
-/* 几何只挂在 node 档根件上：令牌在同名 `.tokens.css`（锚 `[data-manohub-ui]`），几何若跟着挂会给 bar / 进度条多套一层 flex */
-.mh-steps {
-  display: flex;
-  align-items: center;
-}
-
-/* ===== 横向节点式 ===== */
-.mh-steps__step {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-steps-title-gap);
-  flex: none;
-}
-.mh-steps__node {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: var(--ui-steps-node-size);
-  height: var(--ui-steps-node-size);
-  border-radius: var(--ui-radius-full);
-  background: var(--ui-steps-node-undone);
-  color: var(--ui-steps-node-text);
-  font-size: var(--ui-font-caption);
-  line-height: 1;
-}
-.mh-steps__node-icon {
-  width: var(--ui-steps-node-icon-size);
-  height: var(--ui-steps-node-icon-size);
-}
-.mh-steps__step--done .mh-steps__node,
-.mh-steps__step--current .mh-steps__node {
-  background: var(--ui-steps-node-bg);
-}
-.mh-steps__title {
-  font-size: var(--ui-font-body); /* 规范字号档 md（14） */
-  line-height: var(--ui-line-body);
-  color: var(--ui-base-content);
-  white-space: nowrap;
-}
-
-/* 连线：本体是 ::before 的点线，箭头是 ::after 的方盒去左下两边后转 45°（不是实心三角） */
-.mh-steps__connector {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: var(--ui-steps-connector-length);
-  margin: 0 var(--ui-space-3);
-  color: var(--ui-steps-connector-line);
-}
-.mh-steps__connector::before {
-  content: '';
-  flex: 1;
-  height: 0;
-  border-top: var(--ui-steps-connector-width) dotted currentColor;
-}
-.mh-steps__connector::after {
-  content: '';
-  flex: none;
-  width: var(--ui-steps-connector-arrow);
-  height: var(--ui-steps-connector-arrow);
-  border-top: var(--ui-steps-connector-width) solid currentColor;
-  border-right: var(--ui-steps-connector-width) solid currentColor;
-  transform: rotate(45deg);
-}
-.mh-steps__connector--active {
-  color: var(--ui-steps-connector-line-active);
-}
-
-/* ===== 条形燕尾段式 ===== */
-.mh-steps__bar {
-  display: inline-flex; /* 整条宽度收在段总宽上（块级 flex 会撑满整行） */
-  align-items: center;
-}
-.mh-steps__seg {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-1);
-  width: var(--ui-steps-seg-width);
-  height: var(--ui-steps-seg-height);
-  /* 让开左尖 + 相邻段重叠：段是裁形，靠重叠咬合而不是留缝 */
-  padding-left: calc(var(--ui-steps-seg-overlap) + var(--ui-space-1));
-  margin-left: calc(var(--ui-steps-seg-overlap) * -1);
-  font-size: var(--ui-font-caption);
-  color: var(--ui-base-content);
-  background: var(--ui-steps-seg-bg);
-  clip-path: polygon(
-    0 50%,
-    var(--ui-steps-seg-overlap) 0,
-    calc(100% - var(--ui-steps-seg-overlap)) 0,
-    100% 50%,
-    calc(100% - var(--ui-steps-seg-overlap)) 100%,
-    var(--ui-steps-seg-overlap) 100%
-  );
-}
-.mh-steps__seg:first-child {
-  margin-left: 0;
-  clip-path: polygon(
-    0 0,
-    calc(100% - var(--ui-steps-seg-overlap)) 0,
-    100% 50%,
-    calc(100% - var(--ui-steps-seg-overlap)) 100%,
-    0 100%
-  );
-}
-.mh-steps__seg:last-child {
-  clip-path: polygon(0 50%, var(--ui-steps-seg-overlap) 0, 100% 0, 100% 100%, var(--ui-steps-seg-overlap) 100%);
-}
-.mh-steps__seg--active {
-  position: relative;
-  z-index: 1; /* 压住左右相邻段 */
-  background: var(--ui-steps-seg-bg-active);
-  color: var(--ui-steps-seg-text-active);
-  /* 段是裁形，光晕只能用 drop-shadow 跟随形状（box-shadow 会露方角） */
-  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);
-  border-radius: var(--ui-radius-full);
-  background: var(--ui-steps-node-undone);
-  overflow: hidden;
-}
-.mh-steps__progress-fill {
-  display: block;
-  height: 100%;
-  border-radius: var(--ui-radius-full);
-  background: var(--ui-primary);
-}
-
-/* ===== 尺寸档（只覆盖令牌，几何规则只有一份） ===== */
-.mh-steps--sm {
-  --ui-steps-node-size: calc(var(--ui-steps-node-size-base) * 0.8);
-  font-size: var(--ui-font-caption);
-}
-.mh-steps--lg {
-  --ui-steps-node-size: calc(var(--ui-steps-node-size-base) * 1.15);
-  font-size: var(--ui-font-heading);
-}
+/**
+ * Steps —— 步骤条（横向节点式 + 条形燕尾段式 + 进度条）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/steps.css` 与 `src/components/steps.css`
+ * （节点 30 圆、字号 14、节点与标题**同行**、标题间距 12；连线是 2px **点线** + 末端 6px 方盒转 45°
+ *  的 `>` 折角箭头、最小长 58.383、弹性撑开；段 140×30、相邻**重叠 10**、整条 inline-flex 收宽；
+ *  进度条高 9）。
+ *
+ * **当前步之后那一段才转蓝**（已完成步之后仍是灰线）—— 这是规范实测的取向，别做成"已完成段全蓝"。
+ *
+ * 状态来源是**单一来源**（组件下发的 `--done` / `--current` / `--active`）：步骤序号不是原生元素能表达的状态，
+ * 故这里没有「三源等价」可言 —— 与勾选/开关那类不同，别照抄那份写法。
+ *
+ * 连线用**独立空元素**（`.mh-steps__connector`）而不是 `.mh-steps__step + ::after`：折角箭头要撑开弹性余量，
+ * 且 N 个节点配 N-1 条线，独立元素才能让两端节点各自保持自己的标题宽度。
+ *
+ * 可点档（`clickable`）下步元素是**原生 `<button>`** —— 归零、焦点环、禁用态见文件中间那节。
+ */
+
+/* 几何只挂在 node 档根件上：令牌在同名 `.tokens.css`（锚 `[data-manohub-ui]`），几何若跟着挂会给 bar / 进度条多套一层 flex */
+.mh-steps {
+  display: flex;
+  align-items: center;
+}
+
+/* ===== 横向节点式 ===== */
+.mh-steps__step {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-steps-title-gap);
+  flex: none;
+}
+.mh-steps__node {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--ui-steps-node-size);
+  height: var(--ui-steps-node-size);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-steps-node-undone);
+  color: var(--ui-steps-node-text);
+  font-size: var(--ui-font-caption);
+  line-height: 1;
+}
+.mh-steps__node-icon {
+  width: var(--ui-steps-node-icon-size);
+  height: var(--ui-steps-node-icon-size);
+}
+.mh-steps__step--done .mh-steps__node,
+.mh-steps__step--current .mh-steps__node {
+  background: var(--ui-steps-node-bg);
+}
+.mh-steps__title {
+  font-size: var(--ui-font-body); /* 规范字号档 md（14） */
+  line-height: var(--ui-line-body);
+  color: var(--ui-base-content);
+  white-space: nowrap;
+}
+
+/* 连线：本体是 ::before 的点线，箭头是 ::after 的方盒去左下两边后转 45°（不是实心三角） */
+.mh-steps__connector {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: var(--ui-steps-connector-length);
+  margin: 0 var(--ui-space-3);
+  color: var(--ui-steps-connector-line);
+}
+.mh-steps__connector::before {
+  content: '';
+  flex: 1;
+  height: 0;
+  border-top: var(--ui-steps-connector-width) dotted currentColor;
+}
+.mh-steps__connector::after {
+  content: '';
+  flex: none;
+  width: var(--ui-steps-connector-arrow);
+  height: var(--ui-steps-connector-arrow);
+  border-top: var(--ui-steps-connector-width) solid currentColor;
+  border-right: var(--ui-steps-connector-width) solid currentColor;
+  transform: rotate(45deg);
+}
+.mh-steps__connector--active {
+  color: var(--ui-steps-connector-line-active);
+}
+
+/* ===== 条形燕尾段式 ===== */
+.mh-steps__bar {
+  display: inline-flex; /* 整条宽度收在段总宽上（块级 flex 会撑满整行） */
+  align-items: center;
+}
+.mh-steps__seg {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  width: var(--ui-steps-seg-width);
+  height: var(--ui-steps-seg-height);
+  /* 让开左尖 + 相邻段重叠：段是裁形，靠重叠咬合而不是留缝 */
+  padding-left: calc(var(--ui-steps-seg-overlap) + var(--ui-space-1));
+  margin-left: calc(var(--ui-steps-seg-overlap) * -1);
+  font-size: var(--ui-font-caption);
+  color: var(--ui-base-content);
+  background: var(--ui-steps-seg-bg);
+  clip-path: polygon(
+    0 50%,
+    var(--ui-steps-seg-overlap) 0,
+    calc(100% - var(--ui-steps-seg-overlap)) 0,
+    100% 50%,
+    calc(100% - var(--ui-steps-seg-overlap)) 100%,
+    var(--ui-steps-seg-overlap) 100%
+  );
+}
+.mh-steps__seg:first-child {
+  margin-left: 0;
+  clip-path: polygon(
+    0 0,
+    calc(100% - var(--ui-steps-seg-overlap)) 0,
+    100% 50%,
+    calc(100% - var(--ui-steps-seg-overlap)) 100%,
+    0 100%
+  );
+}
+.mh-steps__seg:last-child {
+  clip-path: polygon(0 50%, var(--ui-steps-seg-overlap) 0, 100% 0, 100% 100%, var(--ui-steps-seg-overlap) 100%);
+}
+.mh-steps__seg--active {
+  position: relative;
+  z-index: 1; /* 压住左右相邻段 */
+  background: var(--ui-steps-seg-bg-active);
+  color: var(--ui-steps-seg-text-active);
+  /* 段是裁形，光晕只能用 drop-shadow 跟随形状（box-shadow 会露方角） */
+  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);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-steps-node-undone);
+  overflow: hidden;
+}
+.mh-steps__progress-fill {
+  display: block;
+  height: 100%;
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-primary);
+}
+
+/* ===== 尺寸档（只覆盖令牌，几何规则只有一份） ===== */
+.mh-steps--sm {
+  --ui-steps-node-size: calc(var(--ui-steps-node-size-base) * 0.8);
+  font-size: var(--ui-font-caption);
+}
+.mh-steps--lg {
+  --ui-steps-node-size: calc(var(--ui-steps-node-size-base) * 1.15);
+  font-size: var(--ui-font-heading);
+}

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

@@ -1,44 +1,44 @@
-/**
- * steps —— 单件令牌（**基础值**）。
- *
- * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
- *
- * ## 抽出说明
- * 本文件从面文件里抽出（原先混写在 `steps.css` 顶部）：这些是**基础值**，锚在
- * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
- * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
- * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
- *
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
- * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
- * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
- */
-[data-manohub-ui] {
-  /* bar 档与独立进度条都是**自己的根节点**（无 `.mh-steps` 祖先）—— 靠容器锚取到值 */
-  /* 单件令牌 */
-  /* 基准尺寸与「当前档尺寸」分开：尺寸档要用基准做 calc，直接自引用会构成环形引用
-     （自定义属性引用自身 → 整条在计算值阶段作废 → 连子节点都继承不到） */
-  --ui-steps-node-size-base: 30px;
-  --ui-steps-node-size: var(--ui-steps-node-size-base);
-  --ui-steps-node-undone: var(--ui-base-300); /* 规范 Ne05 未开始底（节点内也是白字，不是灰字） */
-  --ui-steps-node-text: var(--ui-base-100); /* 反白字：序号 / 勾 / 图标 */
-  --ui-steps-node-icon-size: 16px;
-  --ui-steps-node-bg: var(--ui-primary); /* 规范是近乎平色的主色渐变（#2a83ff→#2a87ff），本仓取主色平色 */
-  --ui-steps-connector-length: 58.383px; /* 规范实测最小段长（其余由 flex 撑开） */
-  --ui-steps-connector-width: 2px;
-  --ui-steps-connector-arrow: 6px;
-  /* 连接线取 base-300（全库唯一的「线 / 框」色，见 `@manohub/theme` 的 `default/colors.css`
-     头「三条口径」第 2 条）—— 改前取的是 base-400。设计稿里**只有三个向导页**画了连接线
-     （`#cdd2de`）而向导页已判定为旧稿，四个品牌页没有步骤条样张 → 按库级口径取线色，
-     不做推测性改动（这枚令牌的档位语义与连接线宽度 / 燕尾尺寸一样，只在「线」这一族内变）。 */
-  --ui-steps-connector-line: var(--ui-base-300);
-  --ui-steps-connector-line-active: var(--ui-primary); /* 规范 #4999fe */
-  --ui-steps-title-gap: var(--ui-space-3); /* 节点与标题间距 12 */
-  --ui-steps-seg-width: 140px;
-  --ui-steps-seg-height: 30px;
-  --ui-steps-seg-overlap: 10px; /* 相邻段重叠（燕尾尖咬合） */
-  --ui-steps-seg-bg: var(--ui-base-200); /* 规范 #e9edf7 */
-  --ui-steps-seg-bg-active: var(--ui-primary);
-  --ui-steps-seg-text-active: var(--ui-base-100);
-  --ui-steps-progress-height: 9px; /* 规范令牌；供进度条形态用 */
-}
+/**
+ * steps —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `steps.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* bar 档与独立进度条都是**自己的根节点**（无 `.mh-steps` 祖先）—— 靠容器锚取到值 */
+  /* 单件令牌 */
+  /* 基准尺寸与「当前档尺寸」分开：尺寸档要用基准做 calc，直接自引用会构成环形引用
+     （自定义属性引用自身 → 整条在计算值阶段作废 → 连子节点都继承不到） */
+  --ui-steps-node-size-base: 30px;
+  --ui-steps-node-size: var(--ui-steps-node-size-base);
+  --ui-steps-node-undone: var(--ui-base-300); /* 规范 Ne05 未开始底（节点内也是白字，不是灰字） */
+  --ui-steps-node-text: var(--ui-base-100); /* 反白字：序号 / 勾 / 图标 */
+  --ui-steps-node-icon-size: 16px;
+  --ui-steps-node-bg: var(--ui-primary); /* 规范是近乎平色的主色渐变（#2a83ff→#2a87ff），本仓取主色平色 */
+  --ui-steps-connector-length: 58.383px; /* 规范实测最小段长（其余由 flex 撑开） */
+  --ui-steps-connector-width: 2px;
+  --ui-steps-connector-arrow: 6px;
+  /* 连接线取 base-300（全库唯一的「线 / 框」色，见 `@manohub/theme` 的 `default/colors.css`
+     头「三条口径」第 2 条）—— 改前取的是 base-400。设计稿里**只有三个向导页**画了连接线
+     （`#cdd2de`）而向导页已判定为旧稿，四个品牌页没有步骤条样张 → 按库级口径取线色，
+     不做推测性改动（这枚令牌的档位语义与连接线宽度 / 燕尾尺寸一样，只在「线」这一族内变）。 */
+  --ui-steps-connector-line: var(--ui-base-300);
+  --ui-steps-connector-line-active: var(--ui-primary); /* 规范 #4999fe */
+  --ui-steps-title-gap: var(--ui-space-3); /* 节点与标题间距 12 */
+  --ui-steps-seg-width: 140px;
+  --ui-steps-seg-height: 30px;
+  --ui-steps-seg-overlap: 10px; /* 相邻段重叠（燕尾尖咬合） */
+  --ui-steps-seg-bg: var(--ui-base-200); /* 规范 #e9edf7 */
+  --ui-steps-seg-bg-active: var(--ui-primary);
+  --ui-steps-seg-text-active: var(--ui-base-100);
+  --ui-steps-progress-height: 9px; /* 规范令牌；供进度条形态用 */
+}