@xihan-ui/styles 2.1.0 → 3.1.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,16 +24,26 @@
   }
 
   [data-scope='steps'][data-part='root'] {
-    /* 作者放进标题 / 说明里的图标按档取尺，缺省 sm。走过的步里皮肤画的兜底对号不读这支：
-       它是指示符，与序号圆点同走 --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 是实心底上的前景。
@@ -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;
@@ -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;
   }
@@ -187,9 +232,11 @@
   [data-scope='steps'][data-part='indicator'] {
     /* 圆点里的字形是指示符：对号按指示符档取尺、随密度换档（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);
@@ -221,26 +268,27 @@
      :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);
@@ -260,6 +308,88 @@
     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']) {
@@ -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;
+    }
   }
 }

package/css/switch.css

@@ -5,16 +5,10 @@
 
 /* 定义 switch 样式。 */
 
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
 @import '../family/action-control.css';
-
-@layer xihan.motion {
-  /* 转圈的关键帧定义在本文件里：引用别处文件的动画名时那份文件不一定在场，动画会静默不跑 */
-  @keyframes xh-switch-rotate {
-    to {
-      transform: rotate(1turn);
-    }
-  }
-}
+@import '../family/loading-ring.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -180,18 +174,22 @@
     line-height: 0;
     /* 状态切换只动位移与表面，按压拉伸另走 inline-size；不使用 transition-all。 */
     transition:
-      translate var(--xh-motion-duration-micro) var(--xh-motion-ease-continuous),
-      inline-size var(--xh-motion-duration-micro) var(--xh-motion-ease-continuous),
+      translate var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous),
+      inline-size var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous),
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
+  /* flex 的 inline-start 随书写方向翻转，物理 translate 乘方向符号跟着反向，checked 才始终走到 inline-end；
+     符号按就近的 dir 继承，rtl 页面里局部写回 ltr 的开关照 ltr 走 */
   [data-scope='switch'][data-part='thumb'][data-state='checked'] {
-    translate: var(--xh-_switch-thumb-size) 0;
+    translate: calc(var(--xh-direction-sign) * var(--xh-_switch-thumb-size)) 0;
   }
 
-  /* flex 的 inline-start 会随 dir 翻转，物理 translate 也要反向，checked 才始终走到 inline-end。 */
-  [dir='rtl'] [data-scope='switch'][data-part='thumb'][data-state='checked'] {
-    translate: calc(-1 * var(--xh-_switch-thumb-size)) 0;
+  /* 拖动与松手落定期间位移由连接层逐帧写进内联 translate，位移不能再叠一层过渡；按住拉长与投影照常过渡 */
+  [data-scope='switch'][data-part='thumb']:is([data-dragging], [data-animating]) {
+    transition:
+      inline-size var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* Naive 同类的橡皮带回执：按住时向行进方向拉长并压平投影，已选中端同步回退同一段，外缘不越出轨道。 */
@@ -203,13 +201,7 @@
 
   [data-scope='switch'][data-part='root'][data-state='checked']:not([data-disabled]):not([data-readonly]):not([data-loading]):is(:active, [data-pressed])
     [data-scope='switch'][data-part='thumb'] {
-    translate: calc(var(--xh-_switch-thumb-size) - var(--xh-_switch-thumb-press-stretch)) 0;
-  }
-
-  [dir='rtl']
-    [data-scope='switch'][data-part='root'][data-state='checked']:not([data-disabled]):not([data-readonly]):not([data-loading]):is(:active, [data-pressed])
-    [data-scope='switch'][data-part='thumb'] {
-    translate: calc(-1 * (var(--xh-_switch-thumb-size) - var(--xh-_switch-thumb-press-stretch))) 0;
+    translate: calc(var(--xh-direction-sign) * (var(--xh-_switch-thumb-size) - var(--xh-_switch-thumb-press-stretch))) 0;
   }
 
   /* 禁用滑块收掉抬起影、前景置灰；描边与底保持，滑块仍是一块读得出位置的实体 */
@@ -227,15 +219,18 @@
     --xh-action-cursor-focus-visible: progress;
   }
 
-  [data-scope='switch'][data-part='thumb'][data-loading]::after {
+  /* 滑块里那枚环由加载环配方画在 ::before 上（连接层投影 data-xh-loading-ring），随 data-loading 淡入淡出、
+     转与停；起始边取强调色、转速认使用者槽。环叠在滑块正中那一格，不挤开作者放进滑块的图形 */
+  [data-scope='switch'][data-part='thumb'] {
+    --xh-_loading-ring-fg: var(--xh-switch-loading-fg, var(--xh-_switch-accent));
+    --xh-_loading-ring-duration: var(--xh-switch-loading-duration, var(--xh-motion-loop-spin));
+  }
+
+  [data-scope='switch'][data-part='thumb']::before {
     content: '';
+    grid-area: 1 / 1;
     inline-size: 60%;
     block-size: 60%;
-    border: var(--xh-stroke-thin) solid transparent;
-    border-block-start-color: var(--xh-switch-loading-fg, var(--xh-_switch-accent));
-    /* 加载环是等宽高的圆（全部加载环取 circle） */
-    border-radius: var(--xh-shape-circle);
-    animation: xh-switch-rotate var(--xh-switch-loading-duration, var(--xh-spin-duration)) var(--xh-motion-ease-loop) infinite;
   }
 
   /* —— 带文字的整行：<label> 包住控件与文字，与 checkbox 的标签、checkbox-group 的条目同一副样子 ——
@@ -291,23 +286,12 @@
     [data-scope='switch'][data-part='root'] {
       --xh-_switch-thumb-press-stretch: var(--xh-motion-distance-sm);
     }
-
-    [data-scope='switch'][data-part='thumb'][data-loading]::after {
-      border-style: dotted;
-      border-color: var(--xh-switch-loading-fg, var(--xh-_switch-accent));
-      animation: none;
-    }
   }
 
   :where([data-motion='reduce']) [data-scope='switch'][data-part='root'] {
     --xh-_switch-thumb-press-stretch: var(--xh-motion-distance-sm);
   }
 
-  :where([data-motion='reduce']) [data-scope='switch'][data-part='thumb'][data-loading]::after {
-    border-style: dotted;
-    border-color: var(--xh-switch-loading-fg, var(--xh-_switch-accent));
-    animation: none;
-  }
 
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
@@ -363,14 +347,5 @@
       box-shadow: none;
     }
 
-    /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
-       取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
-       :where([data-motion='reduce']) 的钩子版本与它成对，打印没有对应的钩子可配，
-       并成一条之后这层配对关系在文本上就断了。 */
-    [data-scope='switch'][data-part='thumb'][data-loading]::after {
-      border-style: dotted;
-      border-color: var(--xh-switch-loading-fg, var(--xh-_switch-accent));
-      animation: none;
-    }
   }
 }