@xihan-ui/styles 2.0.0 → 3.0.0

package/css/steps.css

@@ -6,6 +6,16 @@
 /* 定义 steps 样式。 */
 
 @import '../family/action-control.css';
+/* 走过那一步时对号的淡入取共享关键帧。 */
+@import '../family/motion.css';
+
+/* 当前步的完成比例（0–1）由连接层写进圆点的内联样式。登记成数值，进度环的弧才能沿过渡走到新比例；
+   要继承：画弧的是圆点的 ::after。不认 @property 的引擎把它当普通自定义属性，弧照旧落到新比例，只是没有过渡 */
+@property --xh-_steps-progress {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -14,28 +24,38 @@
   }
 
   [data-scope='steps'][data-part='root'] {
-    /* 作者放进标题 / 说明里的图标按档取尺，缺省 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));
+    /* 作者放进标题 / 说明里的图标是控件内图标，随尺寸档取 glyph-size-sm / md / lg，缺省 md；
+       每一档都把 --xh-steps-icon-size 排在档值前面，外层统一改尺的通道不被档值挡住。
+       走过的步里皮肤画的兜底对号不读这支：它是指示符，与序号圆点同走 --xh-control-indicator-* 一族——
+       圆点在自己身上把 --xh-icon-size 改接到 --xh-steps-indicator-mark-size，兜底对号与作者塞进圆点里的
+       XhIcon 读同一把尺 */
+    --xh-icon-size: var(--xh-steps-icon-size, var(--xh-glyph-size-md));
 
     /* 尺寸档只换这三个私有槽，序号圆点、标题与圆点里的序号都从 root 继承它们，
-       换档不必给每个部件各写一条选择器；说明走说明角色（13px），不随档 */
-    --xh-_steps-indicator-size: var(--xh-space-8);
+       换档不必给每个部件各写一条选择器；说明走说明角色（13px），不随档。
+       圆点与 Avatar、带框 Icon 同一把尺：control-h 的 sm / md / lg，随密度换档 */
+    --xh-_steps-indicator-size: var(--xh-control-h-md);
     --xh-_steps-title-font-size: var(--xh-control-font-md);
     --xh-_steps-caption-font-size: var(--xh-text-caption-size);
+    /* 圆点一圈边的宽：序号圆点是细边（多数状态透明占位），点状形态的空心圈要粗一档才读得出是个圈 */
+    --xh-_steps-indicator-border-width: var(--xh-stroke-thin);
+    /* 圆点四周给当前步那圈环留的位置：序号圆点不留，点状形态留出环的宽度，换步不挪版面 */
+    --xh-_steps-indicator-margin: var(--xh-space-0);
+    /* 当前步那圈环：离圆点边一道缝，环本身一道粗描边宽 */
+    --xh-_steps-ring-gap: var(--xh-space-0_5);
+    --xh-_steps-ring-thickness: var(--xh-stroke-thick);
 
     /* 语气落在当前步的标记、走过那几步的对号与连接线上：强调色画描边与填充，
        accent-text 是普通底上的强调文字（走过与当前步的标题），on-accent 是实心底上的前景。
        没写 data-tone 时 --xh-_tone 一族没被声明，三个槽都退回原来的品牌配色。
-       走过的步不再用品牌淡底（§7.3 brand-subtle 退出 completed 语义），淡底那两支私有槽随之撤掉 */
+       走过的步不再用品牌淡底（brand-subtle 退出 completed 语义），淡底那两支私有槽随之撤掉 */
     --xh-_steps-accent: var(--xh-_tone, 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 条）。两支私有槽是这一档的唯一来源——触发器拿它们给
+       （hover 200 → pressed 300）。两支私有槽是这一档的唯一来源——触发器拿它们给
        --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);
@@ -64,20 +84,38 @@
   }
 
   /* —— 尺寸 —— */
-  /* 缺省档写在上面的基础规则里。圆点直径不在 control-h 那把尺上（缺省是 sm 档的 28px），
-     两侧改从 space 档取，缺省档才留得住 */
+  /* 缺省档写在上面的基础规则里 */
   [data-scope='steps'][data-part='root'][data-size='sm'] {
-    --xh-_steps-indicator-size: var(--xh-space-7);
+    --xh-icon-size: var(--xh-steps-icon-size, var(--xh-glyph-size-sm));
+    --xh-_steps-indicator-size: var(--xh-control-h-sm);
     --xh-_steps-title-font-size: var(--xh-control-font-sm);
     /* 字号档最小就是 xs，序号不再往下走，故不重声明 caption */
   }
 
   [data-scope='steps'][data-part='root'][data-size='lg'] {
+    --xh-icon-size: var(--xh-steps-icon-size, var(--xh-glyph-size-lg));
     --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);
   }
 
+  /* —— 点状形态 —— */
+  /* 圆点不盛内容，是纯位置标记：直径不在控件高度那把尺上，与 Timeline 圆点同走空间尺相邻的三格，
+     不随密度换档；描边粗一档，四周留出当前步那圈环的宽度 */
+  [data-scope='steps'][data-part='root'][data-variant='dot'] {
+    --xh-_steps-indicator-size: var(--xh-space-2_5);
+    --xh-_steps-indicator-border-width: var(--xh-stroke-thick);
+    --xh-_steps-indicator-margin: calc(var(--xh-_steps-ring-gap) + var(--xh-_steps-ring-thickness));
+  }
+
+  [data-scope='steps'][data-part='root'][data-variant='dot'][data-size='sm'] {
+    --xh-_steps-indicator-size: var(--xh-space-2);
+  }
+
+  [data-scope='steps'][data-part='root'][data-variant='dot'][data-size='lg'] {
+    --xh-_steps-indicator-size: var(--xh-space-3);
+  }
+
   /* 步骤与连接线必须保持在同一条流程轴上，空间不足时由标题省略而不是拆成两行。 */
   [data-scope='steps'][data-part='list'] {
     display: flex;
@@ -134,7 +172,7 @@
     align-items: flex-start;
   }
 
-  /* 触发器是「序号 + 标题 + 说明」的整块内容行（§9.2）：接 Action Control row 档、ghost 形态，悬停 / 按下 / 禁用面、
+  /* 触发器是「序号 + 标题 + 说明」的整块内容行：接 Action Control row 档、ghost 形态，悬停 / 按下 / 禁用面、
      手型、过渡与焦点环由家族给，按下只换面不缩放（row 档专属按压块 scale: none）；这里只把使用者槽映射到桥接槽。
      触发器既是 Action Control 又是圆点的承载面：自己坐画布走 hover 100 → pressed 200，由 --xh-action-bg-* 钉住；
      --xh-action-host-bg-* 只对圆点生效（圆点自己是 100 的淡底，坐在触发器面上再上一档到 200 / 300）。
@@ -174,6 +212,13 @@
     text-align: start;
   }
 
+  /* 只读展示：trigger 不投影 Action Control，只是「序号 + 标题 + 说明」的排版容器——内距与可操作时同一把尺，
+     在两种形态间切换版面不跳；没有悬停、按压与焦点环，标题与说明不置灰 */
+  [data-scope='steps'][data-part='trigger'][data-readonly] {
+    padding-block: var(--xh-steps-trigger-p, var(--xh-space-1));
+    padding-inline: var(--xh-steps-trigger-p, var(--xh-control-px-sm));
+  }
+
   [data-scope='steps'][data-part='trigger'][hidden] {
     display: none;
   }
@@ -183,13 +228,15 @@
     color: var(--xh-fg-disabled);
   }
 
-  /* 序号圆点：未开始使用中性面，当前步骤实心强调，已完成步骤中性面上画品牌对号（§7.3）。 */
+  /* 序号圆点：未开始使用中性面，当前步骤实心强调，已完成步骤中性面上画品牌对号。 */
   [data-scope='steps'][data-part='indicator'] {
-    /* 圆点里的字形是指示符（§6.5）：对号按指示符档取尺、随密度换档（comfortable 16 / compact 14），
+    /* 圆点里的字形是指示符：对号按指示符档取尺、随密度换档（comfortable 16 / compact 14），
        不读 root 上只管作者标题 / 说明图标的 --xh-steps-icon-size；作者塞进圆点的 XhIcon 与兜底对号同一把尺。
-       圆点自己走 space / control-h 的尺（最小 28px），不随密度，两档字形在三档圆点里都留得出边距 */
+       圆点自己走 control-h 的尺（最小 compact sm 的 28px），两档字形在三档圆点里都留得出边距 */
     --xh-icon-size: var(--xh-steps-indicator-mark-size, var(--xh-control-indicator-size));
 
+    /* 当前步那圈环（::after）以圆点为准绳定位 */
+    position: relative;
     display: inline-flex;
     grid-row: 1 / span 2;
     flex: none;
@@ -197,7 +244,7 @@
     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, transparent);
+    border: var(--xh-_steps-indicator-border-width) 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));
@@ -207,7 +254,7 @@
     font-variant-numeric: tabular-nums;
     line-height: var(--xh-leading-none);
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color 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);
@@ -217,30 +264,31 @@
     display: none;
   }
 
-  /* 圆点是格状当前的标记（§4.1 / §7.3），但不是激活宿主：宿主是投影了 row 档的触发器；圆点在宿主的
-     :hover / :is(:active, [data-pressed]) 下读宿主 host 槽的同一来源换面，同一时间线，不缩放（§9.2）——
+  /* 圆点是格状当前的标记，但不是激活宿主：宿主是投影了 row 档的触发器；圆点在宿主的
+     :hover / :is(:active, [data-pressed]) 下读宿主 host 槽的同一来源换面，同一时间线，不缩放——
      圆点自己是 100 的淡底，坐在触发器的 hover 面（100）上，再上一档到 200 才与承载面分得开，按下到 300；
      当前步的实心面按下换语气 active 档 */
-  [data-scope='steps'][data-part='trigger']:hover:not([data-disabled])
+  [data-scope='steps'][data-part='trigger']:hover:not([data-disabled], [data-readonly])
     [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'] {
+  /* 点状形态里走过的点是实心标记色，悬停不换成中性面：承载它的行换面即是悬停反馈 */
+  [data-scope='steps'][data-part='trigger']:hover:not([data-disabled], [data-readonly])
+    [data-scope='steps'][data-part='indicator'][data-state='completed']:not([data-variant='dot']) {
     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']) {
+  [data-scope='steps'][data-part='trigger']:not([data-disabled], [data-readonly]):is(:active, [data-pressed])
+    [data-scope='steps'][data-part='indicator']:is([data-state='incomplete'], [data-state='completed']:not([data-variant='dot'])) {
     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'] {
+  [data-scope='steps'][data-part='trigger']:not([data-disabled], [data-readonly]):is(:active, [data-pressed])
+    [data-scope='steps'][data-part='indicator'][data-state='current']:not([data-variant='dot']) {
     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);
@@ -253,13 +301,95 @@
     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, transparent);
     background: var(--xh-steps-indicator-bg-completed, var(--xh-bg-subtle));
     color: var(--xh-steps-indicator-fg-completed, var(--xh-_steps-accent-mark));
   }
 
+  /* 点状形态的三态：没走到的空心粗圈（墨色与序号形态的序号同一支），走过的实心标记色（序号形态里那枚对号的颜色），
+     当前步实心品牌（格状当前）外加一圈同色环。空心 / 实心 / 带环是形状通道，不只靠颜色分三态；
+     四周留出环的宽度，换步时版面不挪 */
+  [data-scope='steps'][data-part='indicator'][data-variant='dot'] {
+    margin: var(--xh-_steps-indicator-margin);
+    border-color: var(--xh-steps-indicator-border, var(--xh-fg-muted));
+    background: var(--xh-steps-indicator-bg, transparent);
+  }
+
+  /* 实心的点底与圈同一色，取自 --xh-_steps-dot：走过的标记色、当前步品牌，按下换语气 active 档
+     （与序号圆点当前步按下同一档），动不了的禁用墨色。小圆点上画不下实心那档的内高光 */
+  [data-scope='steps'][data-part='indicator'][data-variant='dot'][data-state='completed'] {
+    --xh-_steps-dot: var(--xh-steps-indicator-bg-completed, var(--xh-_steps-accent-mark));
+  }
+
+  [data-scope='steps'][data-part='indicator'][data-variant='dot'][data-state='current'] {
+    --xh-_steps-dot: var(--xh-steps-indicator-bg-current, var(--xh-_steps-accent));
+
+    box-shadow: none;
+  }
+
+  [data-scope='steps'][data-part='trigger']:not([data-disabled], [data-readonly]):is(:active, [data-pressed])
+    [data-scope='steps'][data-part='indicator'][data-variant='dot'] {
+    --xh-_steps-dot: 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='item'][data-disabled] [data-scope='steps'][data-part='indicator'][data-variant='dot'] {
+    --xh-_steps-dot: var(--xh-steps-indicator-bg-disabled, var(--xh-fg-disabled));
+
+    border-color: var(--xh-steps-indicator-border-disabled, var(--xh-fg-disabled));
+    background: transparent;
+  }
+
+  /* 带上触发器这一层祖先：特指度才压得过上面与下面两条禁用块铺的底 */
+  [data-scope='steps'][data-part='trigger'] [data-scope='steps'][data-part='indicator'][data-variant='dot']:not([data-state='incomplete']) {
+    border-color: var(--xh-_steps-dot);
+    background: var(--xh-_steps-dot);
+  }
+
+  /* 当前步那圈环：离圆点边一道缝、一道粗描边宽，叠在圆点外面、不接指针；环面由一圈角向渐变经环形遮罩挖空中心得来。
+     弧（arc）从 12 点顺时针走到完成比例，其余是轨道（track）：点状形态不带比例，轨道与弧同色，就是整圈实心环；
+     序号圆点带了比例（data-progress），轨道取连接线的底色，弧就是这一步走了多少。时钟式的走向是稳定身份，不随书写方向镜像。
+     静息收着，点状形态的当前步与带比例的当前步才亮出来，走到 / 离开这一步时按状态角色淡入淡出；
+     比例变化时弧按数值角色走（move / continuous），首帧直接落位 */
+  [data-scope='steps'][data-part='indicator']::after {
+    --xh-_steps-ring-arc: var(--xh-steps-indicator-ring-bg, var(--xh-_steps-accent));
+    --xh-_steps-ring-track: var(--xh-_steps-ring-arc);
+
+    content: '';
+    position: absolute;
+    inset: calc(-1 * (var(--xh-_steps-indicator-border-width) + var(--xh-_steps-ring-gap) + var(--xh-_steps-ring-thickness)));
+    border-radius: inherit;
+    background: conic-gradient(
+      var(--xh-_steps-ring-arc) calc(var(--xh-_steps-progress) * 100%),
+      var(--xh-_steps-ring-track) 0%
+    );
+    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--xh-_steps-ring-thickness)), currentColor 0);
+    mask: radial-gradient(farthest-side, transparent calc(100% - var(--xh-_steps-ring-thickness)), currentColor 0);
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      --xh-_steps-progress var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  [data-scope='steps'][data-part='indicator'][data-state='current']:is([data-variant='dot'], [data-progress])::after {
+    opacity: 1;
+  }
+
+  [data-scope='steps'][data-part='indicator'][data-progress]::after {
+    --xh-_steps-ring-track: var(--xh-steps-indicator-ring-track, var(--xh-border-default));
+  }
+
+  [data-scope='steps'][data-part='item'][data-disabled] [data-scope='steps'][data-part='indicator']::after {
+    --xh-_steps-ring-arc: var(--xh-steps-indicator-ring-bg-disabled, var(--xh-fg-disabled));
+  }
+
   /* 单步语气：tones / collection 给某一步标了 data-tone，四个强调槽在这一步重新从语气层取值，
      它的标记、标题与连接线照旧从祖先继承——只有这一步换色，状态那一档照算 */
   [data-scope='steps'][data-part='item'][data-tone] {
@@ -296,6 +426,8 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    /* 走到这一步、走过这一步时标题换色，与圆点的换面同一段淡变 */
+    transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='steps'][data-part='title']:is([data-state='current'], [data-state='completed']) {
@@ -307,7 +439,7 @@
     color: var(--xh-steps-title-fg-toned, var(--xh-_steps-accent-text));
   }
 
-  /* 说明走说明角色（§6.4）：13 / fg-muted / leading-normal，不随 size 档 */
+  /* 说明走说明角色：13 / fg-muted / leading-normal，不随 size 档 */
   [data-scope='steps'][data-part='description'] {
     grid-column: 2;
     color: var(--xh-steps-description-fg, var(--xh-fg-muted));
@@ -318,22 +450,34 @@
     text-overflow: ellipsis;
   }
 
-  /* 连接线属于它前面那一步：那一步走过了就整条点亮，进度因此是连续的一条线 */
+  /* 连接线属于它前面那一步：那一步走过了就点亮，进度因此是连续的一条线。点亮的那一层叠在底线上，
+     沿行向从这一步填到下一步（数值角色：move / continuous，只动 clip-path），回退时反向收回 */
   [data-scope='steps'][data-part='separator'] {
+    position: relative;
     flex: 1;
     min-inline-size: var(--xh-steps-separator-min-length, var(--xh-space-4));
     block-size: var(--xh-steps-separator-thickness, var(--xh-stroke-thick));
     border-radius: var(--xh-steps-separator-radius, var(--xh-shape-pill));
     background: var(--xh-steps-separator-bg, var(--xh-border-default));
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 没走过时把行尾那一侧整段裁掉：inset 的左右两侧乘书写方向符号，ltr 裁右侧、rtl 裁左侧 */
+  [data-scope='steps'][data-part='separator']::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: var(--xh-steps-separator-bg-completed, var(--xh-_steps-accent));
+    clip-path: inset(0 calc(50% + 50% * var(--xh-direction-sign)) 0 calc(50% - 50% * var(--xh-direction-sign)));
+    transition: clip-path var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
   [data-scope='steps'][data-part='separator'][hidden] {
     display: none;
   }
 
-  [data-scope='steps'][data-part='separator'][data-state='completed'] {
-    background: var(--xh-steps-separator-bg-completed, var(--xh-_steps-accent));
+  [data-scope='steps'][data-part='separator'][data-state='completed']::after {
+    clip-path: inset(0);
   }
 
   /* 纵向时连接线转成竖的一条，缩进到与序号圆点同一条竖线上 */
@@ -342,14 +486,24 @@
     inline-size: var(--xh-steps-separator-thickness, var(--xh-stroke-thick));
     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，除号在这儿是无效语法 */
+    /* 圆点半径加上它四周留给环的位置，减去线宽的一半：calc 里的除法要写成乘 0.5，除号在这儿是无效语法 */
     margin-inline-start: calc(
       var(--xh-steps-indicator-size, var(--xh-_steps-indicator-size)) * 0.5
+      + var(--xh-_steps-indicator-margin)
       + var(--xh-steps-trigger-p, var(--xh-control-px-sm))
       - var(--xh-steps-separator-thickness, var(--xh-stroke-thick)) * 0.5
     );
   }
 
+  /* 纵向时从上往下填：没走过时裁掉下端 */
+  [data-scope='steps'][data-part='separator'][data-orientation='vertical']::after {
+    clip-path: inset(0 0 100% 0);
+  }
+
+  [data-scope='steps'][data-part='separator'][data-orientation='vertical'][data-state='completed']::after {
+    clip-path: inset(0);
+  }
+
   /* 面板刻意不给 display：连接层用 hidden 收起，UA 的 [hidden]{display:none} 压得住，
      不必再拿内联样式去盖 */
   [data-scope='steps'][data-part='content'] {
@@ -358,8 +512,9 @@
   }
 
   /* 没写内容就由皮肤画兜底对号；作者往部件里塞了自己的图形，这几条即不命中。
-     尺寸读圆点自己改接过的 --xh-icon-size：指示符档，随密度换档（见圆点块） */
-  [data-scope='steps'][data-part='indicator'][data-state='completed']:empty::before {
+     尺寸读圆点自己改接过的 --xh-icon-size：指示符档，随密度换档（见圆点块）。
+     点状形态不盛内容，走过的点本身就是标记，不画对号 */
+  [data-scope='steps'][data-part='indicator'][data-state='completed']:not([data-variant='dot']):empty::before {
     content: '';
     display: inline-block;
     inline-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
@@ -370,6 +525,11 @@
     mask: var(--xh-glyph-mark-check) center / contain no-repeat;
   }
 
+  /* 走过这一步那一刻：序号撤下、对号淡入，与圆点的换面同一段淡变；首帧就走过的（data-instant）直接呈现 */
+  [data-scope='steps'][data-part='indicator'][data-state='completed']:not([data-instant]):empty::before {
+    animation: xh-fade-in var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
   @media (forced-colors: active) {
     /* 触发器的悬停 / 按下由家族 forced-colors 块涂成 Highlight / HighlightText；标题与说明各自写了颜色，
        这一档里会被换成 CanvasText 压在高亮底上，悬停与按住时一起跟到反色 */
@@ -378,8 +538,8 @@
       color: HighlightText;
     }
 
-    [data-scope='steps'][data-part='trigger']:hover:not([data-disabled])
-      [data-scope='steps'][data-part='indicator'][data-state='incomplete'] {
+    [data-scope='steps'][data-part='trigger']:hover:not([data-disabled], [data-readonly])
+      [data-scope='steps'][data-part='indicator'][data-state='incomplete']:not([data-variant='dot']) {
       border-color: Highlight;
     }
 
@@ -389,9 +549,47 @@
       background: CanvasText;
     }
 
-    [data-scope='steps'][data-part='separator'][data-state='completed'] {
+    [data-scope='steps'][data-part='separator']::after {
       background: Highlight;
     }
+
+    /* 点状形态的点靠底色画实心，这一档里底色被换成 Canvas，走过与当前步的点会与空心的圈混成一样。
+       实心的点与当前步那圈环换成 CanvasText：整行悬停涂成 Highlight 时照样看得见，走过与当前步靠那圈环分开；
+       动不了的取 GrayText */
+    [data-scope='steps'][data-part='trigger'] [data-scope='steps'][data-part='indicator'][data-variant='dot']:not([data-state='incomplete']) {
+      border-color: CanvasText;
+      background: CanvasText;
+    }
+
+    [data-scope='steps'][data-part='item'][data-disabled] [data-scope='steps'][data-part='indicator'][data-variant='dot'] {
+      border-color: GrayText;
+    }
+
+    [data-scope='steps'][data-part='item'][data-disabled]
+      [data-scope='steps'][data-part='trigger'] [data-scope='steps'][data-part='indicator'][data-variant='dot']:not([data-state='incomplete']) {
+      background: GrayText;
+    }
+
+    /* 环是一层角向渐变，这一档里渐变会被当作背景图丢掉：环自己不让系统接管配色，弧与轨道改取系统色——
+       弧 CanvasText、进度环的轨道 GrayText（两者分得开，才读得出走了多少）；动不了的弧 GrayText，
+       轨道退到 Canvas，免得与弧同色读不出比例 */
+    [data-scope='steps'][data-part='indicator']::after {
+      --xh-_steps-ring-arc: CanvasText;
+
+      forced-color-adjust: none;
+    }
+
+    [data-scope='steps'][data-part='indicator'][data-progress]::after {
+      --xh-_steps-ring-track: GrayText;
+    }
+
+    [data-scope='steps'][data-part='item'][data-disabled] [data-scope='steps'][data-part='indicator']::after {
+      --xh-_steps-ring-arc: GrayText;
+    }
+
+    [data-scope='steps'][data-part='item'][data-disabled] [data-scope='steps'][data-part='indicator'][data-progress]::after {
+      --xh-_steps-ring-track: Canvas;
+    }
   }
 
   @media print {
@@ -404,5 +602,26 @@
     [data-scope='steps'][data-part='title'][data-state='current'] {
       font-weight: var(--xh-font-weight-semibold);
     }
+
+    /* 点状形态的点与当前步那圈环都是底色画的，丢了底色走过与当前步就只剩空心圈：这两样照原色印 */
+    [data-scope='steps'][data-part='indicator'][data-variant='dot'],
+    [data-scope='steps'][data-part='indicator']::after {
+      print-color-adjust: exact;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       落在勾选盒自己的实心面上（这一档里是 Canvas），整行悬停不换面，取 CanvasText；
+       禁用取 GrayText */
+    [data-scope='steps'][data-part='indicator'][data-state='completed']:not([data-variant='dot']):empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='steps'][data-part='item'][data-disabled] [data-scope='steps'][data-part='indicator'][data-state='completed']:not([data-variant='dot']):empty::before {
+      background-color: GrayText;
+    }
   }
 }