@xihan-ui/styles 1.0.0 → 2.0.0

package/css/steps.css

@@ -1,3 +1,12 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 steps 样式。 */
+
+@import '../family/action-control.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='steps'] {
@@ -5,21 +14,34 @@
   }
 
   [data-scope='steps'][data-part='root'] {
-    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-steps-icon-size, var(--xh-glyph-size-text));
+    /* 作者放进标题 / 说明里的图标按档取尺，缺省 sm（§6.5）。走过的步里皮肤画的兜底对号不读这支：
+       它是指示符，与序号圆点同走 --xh-control-indicator-* 一族——圆点在自己身上把 --xh-icon-size
+       改接到 --xh-steps-indicator-mark-size，兜底对号与作者塞进圆点里的 XhIcon 读同一把尺 */
+    --xh-icon-size: var(--xh-steps-icon-size, var(--xh-glyph-size-sm));
 
-    /* 尺寸档只换这三个私有槽，序号圆点、标题与说明都从 root 继承它们，
-       换档不必给每个部件各写一条选择器 */
-    --xh-_steps-indicator-size: var(--xh-space-7);
+    /* 尺寸档只换这三个私有槽，序号圆点、标题与圆点里的序号都从 root 继承它们，
+       换档不必给每个部件各写一条选择器；说明走说明角色（13px），不随档 */
+    --xh-_steps-indicator-size: var(--xh-space-8);
     --xh-_steps-title-font-size: var(--xh-control-font-md);
     --xh-_steps-caption-font-size: var(--xh-text-caption-size);
 
-    /* 语气落在走过与当前这两步的标记和连接线上：强调色画描边与填充，
-       accent-text 是普通底上的强调文字（当前步的序号），on-accent 是实心底上的前景。
-       没写 data-tone 时 --xh-_tone 一族没被声明，三个槽都退回原来的品牌配色 */
+    /* 语气落在当前步的标记、走过那几步的对号与连接线上：强调色画描边与填充，
+       accent-text 是普通底上的强调文字（走过与当前步的标题），on-accent 是实心底上的前景。
+       没写 data-tone 时 --xh-_tone 一族没被声明，三个槽都退回原来的品牌配色。
+       走过的步不再用品牌淡底（§7.3 brand-subtle 退出 completed 语义），淡底那两支私有槽随之撤掉 */
     --xh-_steps-accent: var(--xh-_tone, var(--xh-bg-brand));
-    --xh-_steps-accent-text: var(--xh-_tone-fg, var(--xh-bg-brand));
+    --xh-_steps-accent-text: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
+    /* 走过的步里那枚对号：中性淡底上的品牌色标记，不用标题那档更深的字色 */
+    --xh-_steps-accent-mark: var(--xh-_tone-fg, var(--xh-fg-brand));
     --xh-_steps-on-accent: var(--xh-_tone-on, var(--xh-fg-on-brand));
+    /* 触发器是序号圆点的承载面：圆点静息就坐在 --xh-bg-subtle（100）的淡底上，阶梯按淡底容器走
+       （hover 200 → pressed 300，§7.2 第 3 条）。两支私有槽是这一档的唯一来源——触发器拿它们给
+       --xh-action-host-bg-* 赋值（桥接槽只写不读），圆点悬停 / 按下读同一支私有槽，即与宿主的 host 槽同源 */
+    --xh-_steps-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-_steps-host-bg-pressed: var(--xh-bg-subtle-active);
+    /* 走过的那几步是实心圆，顶边画一条极浅的内高光把它衬出厚度 */
+    --xh-_steps-highlight: inset 0 var(--xh-stroke-thin) 0 0
+      color-mix(in oklab, var(--xh-_steps-on-accent) 14%, transparent);
 
     display: flex;
     flex-direction: column;
@@ -30,47 +52,52 @@
     display: none;
   }
 
-  /* 纵向：步骤列与面板并排 */
+  /* 纵向：步骤列与面板并排；两栏一起放不下时面板换到下一行，步骤列因此拿得回整行宽度 */
   [data-scope='steps'][data-part='root'][data-orientation='vertical'] {
     flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  /* 面板的换行基准：一行正文的宽度。步骤列的内容宽加上这一格放不下，两者就分成两行 */
+  [data-scope='steps'][data-part='root'][data-orientation='vertical'] > [data-scope='steps'][data-part='content'] {
+    flex: 1 1 var(--xh-steps-content-min-inline-size, var(--xh-measure-prose));
   }
 
   /* —— 尺寸 —— */
   /* 缺省档写在上面的基础规则里。圆点直径不在 control-h 那把尺上（缺省是 sm 档的 28px），
      两侧改从 space 档取，缺省档才留得住 */
   [data-scope='steps'][data-part='root'][data-size='sm'] {
-    --xh-_steps-indicator-size: var(--xh-space-6);
+    --xh-_steps-indicator-size: var(--xh-space-7);
     --xh-_steps-title-font-size: var(--xh-control-font-sm);
-    /* 字号档最小就是 xs，序号与说明不再往下走，故不重声明 caption */
+    /* 字号档最小就是 xs，序号不再往下走，故不重声明 caption */
   }
 
   [data-scope='steps'][data-part='root'][data-size='lg'] {
-    --xh-_steps-indicator-size: var(--xh-space-8);
+    --xh-_steps-indicator-size: var(--xh-control-h-lg);
     --xh-_steps-title-font-size: var(--xh-control-font-lg);
     --xh-_steps-caption-font-size: var(--xh-text-secondary-size);
   }
 
+  /* 步骤与连接线必须保持在同一条流程轴上，空间不足时由标题省略而不是拆成两行。 */
   [data-scope='steps'][data-part='list'] {
     display: flex;
-    align-items: center;
-    gap: var(--xh-steps-list-gap, var(--xh-space-2));
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    gap: var(--xh-steps-list-gap, var(--xh-space-0));
   }
 
   [data-scope='steps'][data-part='list'][hidden] {
     display: none;
   }
 
+  /* 竖排时列被拉到与面板同高，那是一个确定的块向尺寸；折行在这里会把步骤摊成两列，
+     所以这一档明确关掉 */
   [data-scope='steps'][data-part='list'][data-orientation='vertical'] {
     flex-direction: column;
+    flex-wrap: nowrap;
     align-items: stretch;
   }
 
-  /* 组内无锚点时 list 自己在 Tab 序列里（走到完成位就是这种情形），落焦要看得见 */
-  [data-scope='steps'][data-part='list']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
   /* 每一步与它后面那截连接线一起占一格，等分整行；min-inline-size 允许被压缩，
      标题里的省略号才有生效的余地 */
   [data-scope='steps'][data-part='item'] {
@@ -85,67 +112,84 @@
     display: none;
   }
 
-  /* 末步后面没有"下一步"，那截连接线不该占地方；作者不写它也一样，写了就替他收掉 */
+  /* 末步后面没有"下一步"，那截连接线不该占地方；作者不写它也一样，写了就替他收掉。
+     末步按内容宽摆、不参与伸缩，标题长过整行时由 100% 收住，超出的部分走省略号 */
   [data-scope='steps'][data-part='item']:last-child {
     flex: none;
+    max-inline-size: 100%;
   }
 
   [data-scope='steps'][data-part='item']:last-child [data-scope='steps'][data-part='separator'] {
     display: none;
   }
 
+  /* 横排始终留在同一条轴上，标题与说明负责在自己的格内省略。 */
+  [data-scope='steps'][data-part='item'][data-orientation='horizontal']:not(:last-child) {
+    min-inline-size: var(--xh-steps-item-min-inline-size, var(--xh-space-0));
+  }
+
   [data-scope='steps'][data-part='item'][data-orientation='vertical'] {
     flex-direction: column;
     flex: none;
     align-items: flex-start;
   }
 
-  /* 触发器排成两列：序号占左列并跨两行，标题与说明各占右列一行。
-     用 grid 而不是再包一层节点——解剖里没有那个包裹层，作者也不该被逼着多写一个 div。
-     只有说明缺席时右列的第二行是零高，不会留白 */
+  /* 触发器是「序号 + 标题 + 说明」的整块内容行（§9.2）：接 Action Control row 档、ghost 形态，悬停 / 按下 / 禁用面、
+     手型、过渡与焦点环由家族给，按下只换面不缩放（row 档专属按压块 scale: none）；这里只把使用者槽映射到桥接槽。
+     触发器既是 Action Control 又是圆点的承载面：自己坐画布走 hover 100 → pressed 200，由 --xh-action-bg-* 钉住；
+     --xh-action-host-bg-* 只对圆点生效（圆点自己是 100 的淡底，坐在触发器面上再上一档到 200 / 300）。
+     排成两列：序号占左列并跨两行，标题与说明各占右列一行。用 grid 而不是再包一层节点——解剖里没有那个包裹层，
+     作者也不该被逼着多写一个 div；只有说明缺席时右列的第二行是零高，不会留白 */
   [data-scope='steps'][data-part='trigger'] {
+    /* 纵向留一圈给悬停底色与焦点环，横向走控件内边距尺的小档；一个槽同时盖住两轴 */
+    --xh-action-padding-block: var(--xh-steps-trigger-p, var(--xh-space-1));
+    --xh-action-padding-inline: var(--xh-steps-trigger-p, var(--xh-control-px-sm));
+    --xh-action-radius: var(--xh-steps-trigger-radius, var(--xh-shape-control));
+    /* 列距仍由 column-gap 给：家族的 gap 会连 row-gap 一起把标题与说明撑开 */
+    --xh-action-gap: 0;
+    /* 高度由圆点 + 内距决定，不取 control-h 地板 */
+    --xh-action-visual-size: 0;
+    --xh-action-font-size: inherit;
+    /* 标题 / 说明 / 圆点各自着色，行本身不定字色 */
+    --xh-action-fg-rest: currentColor;
+    --xh-action-fg-hover: currentColor;
+    --xh-action-fg-pressed: currentColor;
+    --xh-action-fg-focus-visible: currentColor;
+    --xh-action-fg-disabled: currentColor;
+    --xh-action-bg-hover: var(--xh-steps-trigger-bg-hover, var(--xh-bg-subtle));
+    --xh-action-bg-pressed: var(--xh-steps-trigger-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-action-host-bg-hover: var(--xh-_steps-host-bg-hover);
+    --xh-action-host-bg-pressed: var(--xh-_steps-host-bg-pressed);
+
+    /* 皮肤规则排在 @import 之后，同特指度盖过 row 档的 display: flex */
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
     align-items: center;
     column-gap: var(--xh-steps-trigger-gap, var(--xh-control-gap-md));
-    /* 纵向留一圈给悬停底色与焦点环，横向走控件内边距尺的小档；一个槽同时盖住两轴 */
-    padding-block: var(--xh-steps-trigger-p, var(--xh-space-1));
-    padding-inline: var(--xh-steps-trigger-p, var(--xh-control-px-sm));
-    border: 0;
-    border-radius: var(--xh-steps-trigger-radius, var(--xh-shape-control));
-    background: transparent;
-    color: inherit;
+    /* row 档铺满容器（inline-size: 100%）会把横排的连接线压到最小长度 */
+    inline-size: auto;
+    /* 纵向连接线的 margin-inline-start 按圆点半径 + trigger-p 对齐圆心，ghost 的 1px 透明边位会让它错 1px */
+    border-width: 0;
     font: inherit;
     text-align: start;
-    cursor: pointer;
   }
 
   [data-scope='steps'][data-part='trigger'][hidden] {
     display: none;
   }
 
-  [data-scope='steps'][data-part='trigger']:hover:not([data-disabled]) {
-    background: var(--xh-steps-trigger-bg-hover, var(--xh-bg-subtle-hover));
-  }
-
-  [data-scope='steps'][data-part='trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  /* 禁用走 aria-disabled 而非原生 disabled：条目仍要可聚焦（它还得当方向键的起点），
-     所以只能挂 data-disabled，写 :disabled 永远不命中 */
-  [data-scope='steps'][data-part='trigger'][data-disabled] {
-    cursor: not-allowed;
-  }
-
   [data-scope='steps'][data-part='item'][data-disabled] [data-scope='steps'][data-part='title'],
   [data-scope='steps'][data-part='item'][data-disabled] [data-scope='steps'][data-part='description'] {
     color: var(--xh-fg-disabled);
   }
 
-  /* 序号圆点：跨两行贴着左侧，未走到时是一圈描边，走过了才填实 */
+  /* 序号圆点：未开始使用中性面，当前步骤实心强调，已完成步骤中性面上画品牌对号（§7.3）。 */
   [data-scope='steps'][data-part='indicator'] {
+    /* 圆点里的字形是指示符（§6.5）：对号按指示符档取尺、随密度换档（comfortable 16 / compact 14），
+       不读 root 上只管作者标题 / 说明图标的 --xh-steps-icon-size；作者塞进圆点的 XhIcon 与兜底对号同一把尺。
+       圆点自己走 space / control-h 的尺（最小 28px），不随密度，两档字形在三档圆点里都留得出边距 */
+    --xh-icon-size: var(--xh-steps-indicator-mark-size, var(--xh-control-indicator-size));
+
     display: inline-flex;
     grid-row: 1 / span 2;
     flex: none;
@@ -153,9 +197,9 @@
     justify-content: center;
     inline-size: var(--xh-steps-indicator-size, var(--xh-_steps-indicator-size));
     block-size: var(--xh-steps-indicator-size, var(--xh-_steps-indicator-size));
-    border: var(--xh-stroke-thin) solid var(--xh-steps-indicator-border, var(--xh-border-control));
-    border-radius: var(--xh-steps-indicator-radius, var(--xh-shape-pill));
-    background: var(--xh-steps-indicator-bg, transparent);
+    border: var(--xh-stroke-thin) solid var(--xh-steps-indicator-border, transparent);
+    border-radius: var(--xh-steps-indicator-radius, var(--xh-shape-circle));
+    background: var(--xh-steps-indicator-bg, var(--xh-bg-subtle));
     color: var(--xh-steps-indicator-fg, var(--xh-fg-muted));
     font-size: var(--xh-steps-indicator-font-size, var(--xh-_steps-caption-font-size));
     font-weight: var(--xh-font-weight-medium);
@@ -165,6 +209,7 @@
     transition:
       background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
@@ -172,22 +217,72 @@
     display: none;
   }
 
-  /* 当前步是空心的品牌色描边，走过的那些是实心——两者一眼分得开，
-     光靠"都填成品牌色"会让人看不出自己停在哪儿 */
+  /* 圆点是格状当前的标记（§4.1 / §7.3），但不是激活宿主：宿主是投影了 row 档的触发器；圆点在宿主的
+     :hover / :is(:active, [data-pressed]) 下读宿主 host 槽的同一来源换面，同一时间线，不缩放（§9.2）——
+     圆点自己是 100 的淡底，坐在触发器的 hover 面（100）上，再上一档到 200 才与承载面分得开，按下到 300；
+     当前步的实心面按下换语气 active 档 */
+  [data-scope='steps'][data-part='trigger']:hover:not([data-disabled])
+    [data-scope='steps'][data-part='indicator'][data-state='incomplete'] {
+    background: var(--xh-steps-indicator-bg-hover, var(--xh-_steps-host-bg-hover));
+    color: var(--xh-steps-indicator-fg-hover, var(--xh-fg-default));
+  }
+
+  [data-scope='steps'][data-part='trigger']:hover:not([data-disabled])
+    [data-scope='steps'][data-part='indicator'][data-state='completed'] {
+    background: var(--xh-steps-indicator-bg-completed-hover, var(--xh-_steps-host-bg-hover));
+  }
+
+  [data-scope='steps'][data-part='trigger']:not([data-disabled]):is(:active, [data-pressed])
+    [data-scope='steps'][data-part='indicator']:is([data-state='incomplete'], [data-state='completed']) {
+    background: var(--xh-steps-indicator-bg-pressed, var(--xh-_steps-host-bg-pressed));
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
+  }
+
+  [data-scope='steps'][data-part='trigger']:not([data-disabled]):is(:active, [data-pressed])
+    [data-scope='steps'][data-part='indicator'][data-state='current'] {
+    background: var(--xh-steps-indicator-bg-current-pressed, var(--xh-_tone-active, var(--xh-bg-brand-active)));
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
+  }
+
   [data-scope='steps'][data-part='indicator'][data-state='current'] {
     border-color: var(--xh-steps-indicator-border-current, var(--xh-_steps-accent));
-    color: var(--xh-steps-indicator-fg-current, var(--xh-_steps-accent-text));
+    background: var(--xh-steps-indicator-bg-current, var(--xh-_steps-accent));
+    color: var(--xh-steps-indicator-fg-current, var(--xh-_steps-on-accent));
+    box-shadow: var(--xh-steps-indicator-shadow, var(--xh-_steps-highlight));
   }
 
+  /* 走过的步：中性淡底（透明边位，§8.3）承一枚品牌色对号；标了语气的步对号跟语气的前景走 */
   [data-scope='steps'][data-part='indicator'][data-state='completed'] {
-    border-color: var(--xh-steps-indicator-border-completed, var(--xh-_steps-accent));
-    background: var(--xh-steps-indicator-bg-completed, var(--xh-_steps-accent));
-    color: var(--xh-steps-indicator-fg-completed, var(--xh-_steps-on-accent));
+    border-color: var(--xh-steps-indicator-border-completed, transparent);
+    background: var(--xh-steps-indicator-bg-completed, var(--xh-bg-subtle));
+    color: var(--xh-steps-indicator-fg-completed, var(--xh-_steps-accent-mark));
+  }
+
+  /* 单步语气：tones / collection 给某一步标了 data-tone，四个强调槽在这一步重新从语气层取值，
+     它的标记、标题与连接线照旧从祖先继承——只有这一步换色，状态那一档照算 */
+  [data-scope='steps'][data-part='item'][data-tone] {
+    --xh-_steps-accent: var(--xh-_tone);
+    --xh-_steps-accent-text: var(--xh-_tone-fg);
+    --xh-_steps-accent-mark: var(--xh-_tone-fg);
+    --xh-_steps-on-accent: var(--xh-_tone-on);
+  }
+
+  /* 标了语气的那一步还没走到也得被看见：空心描边加同色数字，不动实心那档的内高光 */
+  [data-scope='steps'][data-part='item'][data-tone]
+    [data-scope='steps'][data-part='indicator'][data-state='incomplete'] {
+    border-color: var(--xh-steps-indicator-border-toned, var(--xh-_steps-accent));
+    background: var(--xh-steps-indicator-bg-toned, var(--xh-_tone-subtle));
+    color: var(--xh-steps-indicator-fg-toned, var(--xh-_steps-accent-text));
   }
 
   [data-scope='steps'][data-part='item'][data-disabled] [data-scope='steps'][data-part='indicator'] {
-    border-color: var(--xh-steps-indicator-border-disabled, var(--xh-border-subtle));
+    border-color: var(--xh-steps-indicator-border-disabled, var(--xh-border-default));
+    background: var(--xh-steps-indicator-bg-disabled, var(--xh-bg-muted));
     color: var(--xh-steps-indicator-fg-disabled, var(--xh-fg-disabled));
+    /* 这一步动不了，实心那档的内高光跟着收掉 */
+    box-shadow: none;
   }
 
   /* 标题与说明都在右列：不给 display，网格布局会替它们块级化，
@@ -204,14 +299,20 @@
   }
 
   [data-scope='steps'][data-part='title']:is([data-state='current'], [data-state='completed']) {
-    color: var(--xh-steps-title-fg-active, var(--xh-fg-default));
+    color: var(--xh-steps-title-fg-active, var(--xh-_steps-accent-text));
+  }
+
+  /* 标了语气的那一步标题跟着换色，不论走到没走到 */
+  [data-scope='steps'][data-part='item'][data-tone] [data-scope='steps'][data-part='title'] {
+    color: var(--xh-steps-title-fg-toned, var(--xh-_steps-accent-text));
   }
 
+  /* 说明走说明角色（§6.4）：13 / fg-muted / leading-normal，不随 size 档 */
   [data-scope='steps'][data-part='description'] {
     grid-column: 2;
-    color: var(--xh-steps-description-fg, var(--xh-fg-subtle));
-    font-size: var(--xh-steps-description-font-size, var(--xh-_steps-caption-font-size));
-    line-height: var(--xh-leading-tight);
+    color: var(--xh-steps-description-fg, var(--xh-fg-muted));
+    font-size: var(--xh-steps-description-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-leading-normal);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -239,7 +340,8 @@
   [data-scope='steps'][data-part='separator'][data-orientation='vertical'] {
     flex: none;
     inline-size: var(--xh-steps-separator-thickness, var(--xh-stroke-thick));
-    block-size: var(--xh-steps-separator-min-length, var(--xh-space-4));
+    min-inline-size: var(--xh-steps-separator-thickness, var(--xh-stroke-thick));
+    block-size: var(--xh-steps-separator-min-length, var(--xh-space-7));
     /* 圆点半径减去线宽的一半：calc 里的除法要写成乘 0.5，除号在这儿是无效语法 */
     margin-inline-start: calc(
       var(--xh-steps-indicator-size, var(--xh-_steps-indicator-size)) * 0.5
@@ -255,20 +357,52 @@
     color: var(--xh-steps-content-fg, var(--xh-fg-default));
   }
 
-  [data-scope='steps'][data-part='content']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  /* 没写内容就由皮肤画兜底对号；作者往部件里塞了自己的图形，这几条即不命中。
+     尺寸读圆点自己改接过的 --xh-icon-size：指示符档，随密度换档（见圆点块） */
   [data-scope='steps'][data-part='indicator'][data-state='completed']:empty::before {
     content: '';
     display: inline-block;
-    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
     vertical-align: var(--xh-glyph-baseline-shift);
     background-color: currentColor;
     -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
     mask: var(--xh-glyph-mark-check) center / contain no-repeat;
   }
+
+  @media (forced-colors: active) {
+    /* 触发器的悬停 / 按下由家族 forced-colors 块涂成 Highlight / HighlightText；标题与说明各自写了颜色，
+       这一档里会被换成 CanvasText 压在高亮底上，悬停与按住时一起跟到反色 */
+    [data-scope='steps'][data-part='trigger']:not([data-disabled]):is(:hover, :active, [data-pressed])
+      :is([data-scope='steps'][data-part='title'], [data-scope='steps'][data-part='description']) {
+      color: HighlightText;
+    }
+
+    [data-scope='steps'][data-part='trigger']:hover:not([data-disabled])
+      [data-scope='steps'][data-part='indicator'][data-state='incomplete'] {
+      border-color: Highlight;
+    }
+
+    /* 连接线画的是一块纯底色，这一档里底色被统一换成 Canvas，整条进度线消失，
+       只剩一排孤立的圆点。走过的那几截换成系统高亮色，其余换成前景色 */
+    [data-scope='steps'][data-part='separator'] {
+      background: CanvasText;
+    }
+
+    [data-scope='steps'][data-part='separator'][data-state='completed'] {
+      background: Highlight;
+    }
+  }
+
+  @media print {
+    /* 打印默认丢背景：走过那几步的实心底与里面那枚勾都印不出来，
+       当前步与走过的步只剩一模一样的一圈细描边。改用描边的粗细与字重表达同一件事 */
+    [data-scope='steps'][data-part='indicator']:is([data-state='current'], [data-state='completed']) {
+      border-width: var(--xh-stroke-thick);
+    }
+
+    [data-scope='steps'][data-part='title'][data-state='current'] {
+      font-weight: var(--xh-font-weight-semibold);
+    }
+  }
 }