@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/steps.css

@@ -0,0 +1,627 @@
+/*
+ * 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';
+/* 走过那一步时对号的淡入取共享关键帧。 */
+@import '../family/motion.css';
+
+/* 当前步的完成比例（0–1）由连接层写进圆点的内联样式。登记成数值，进度环的弧才能沿过渡走到新比例；
+   要继承：画弧的是圆点的 ::after。不认 @property 的引擎把它当普通自定义属性，弧照旧落到新比例，只是没有过渡 */
+@property --xh-_steps-progress {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-steps {
+    --xh-steps-skin: 1;
+  }
+
+  .xh-scope-steps[data-part='root'] {
+    /* 作者放进标题 / 说明里的图标是控件内图标，随尺寸档取 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），不随档。
+       圆点与 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 一族没被声明，三个槽都退回原来的品牌配色。
+       走过的步不再用品牌淡底（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）。两支私有槽是这一档的唯一来源——触发器拿它们给
+       --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;
+    gap: var(--xh-steps-gap, var(--xh-stack-gap-md));
+  }
+
+  .xh-scope-steps[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 纵向：步骤列与面板并排；两栏一起放不下时面板换到下一行，步骤列因此拿得回整行宽度 */
+  .xh-scope-steps[data-part='root'][data-orientation='vertical'] {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  /* 面板的换行基准：一行正文的宽度。步骤列的内容宽加上这一格放不下，两者就分成两行 */
+  .xh-scope-steps[data-part='root'][data-orientation='vertical'] > .xh-scope-steps[data-part='content'] {
+    flex: 1 1 var(--xh-steps-content-min-inline-size, var(--xh-measure-prose));
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里 */
+  .xh-scope-steps[data-part='root'][data-size='sm'] {
+    --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 */
+  }
+
+  .xh-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 圆点同走空间尺相邻的三格，
+     不随密度换档；描边粗一档，四周留出当前步那圈环的宽度 */
+  .xh-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));
+  }
+
+  .xh-scope-steps[data-part='root'][data-variant='dot'][data-size='sm'] {
+    --xh-_steps-indicator-size: var(--xh-space-2);
+  }
+
+  .xh-scope-steps[data-part='root'][data-variant='dot'][data-size='lg'] {
+    --xh-_steps-indicator-size: var(--xh-space-3);
+  }
+
+  /* 步骤与连接线必须保持在同一条流程轴上，空间不足时由标题省略而不是拆成两行。 */
+  .xh-scope-steps[data-part='list'] {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    gap: var(--xh-steps-list-gap, var(--xh-space-0));
+  }
+
+  .xh-scope-steps[data-part='list'][hidden] {
+    display: none;
+  }
+
+  /* 竖排时列被拉到与面板同高，那是一个确定的块向尺寸；折行在这里会把步骤摊成两列，
+     所以这一档明确关掉 */
+  .xh-scope-steps[data-part='list'][data-orientation='vertical'] {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
+
+  /* 每一步与它后面那截连接线一起占一格，等分整行；min-inline-size 允许被压缩，
+     标题里的省略号才有生效的余地 */
+  .xh-scope-steps[data-part='item'] {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: var(--xh-steps-item-gap, var(--xh-space-2));
+    min-inline-size: 0;
+  }
+
+  .xh-scope-steps[data-part='item'][hidden] {
+    display: none;
+  }
+
+  /* 末步后面没有"下一步"，那截连接线不该占地方；作者不写它也一样，写了就替他收掉。
+     末步按内容宽摆、不参与伸缩，标题长过整行时由 100% 收住，超出的部分走省略号 */
+  .xh-scope-steps[data-part='item']:last-child {
+    flex: none;
+    max-inline-size: 100%;
+  }
+
+  .xh-scope-steps[data-part='item']:last-child .xh-scope-steps[data-part='separator'] {
+    display: none;
+  }
+
+  /* 横排始终留在同一条轴上，标题与说明负责在自己的格内省略。 */
+  .xh-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));
+  }
+
+  .xh-scope-steps[data-part='item'][data-orientation='vertical'] {
+    flex-direction: column;
+    flex: none;
+    align-items: flex-start;
+  }
+
+  /* 触发器是「序号 + 标题 + 说明」的整块内容行：接 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；只有说明缺席时右列的第二行是零高，不会留白 */
+  .xh-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));
+    /* row 档铺满容器（inline-size: 100%）会把横排的连接线压到最小长度 */
+    inline-size: auto;
+    /* 纵向连接线的 margin-inline-start 按圆点半径 + trigger-p 对齐圆心，ghost 的 1px 透明边位会让它错 1px */
+    border-width: 0;
+    font: inherit;
+    text-align: start;
+  }
+
+  /* 只读展示：trigger 不投影 Action Control，只是「序号 + 标题 + 说明」的排版容器——内距与可操作时同一把尺，
+     在两种形态间切换版面不跳；没有悬停、按压与焦点环，标题与说明不置灰 */
+  .xh-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));
+  }
+
+  .xh-scope-steps[data-part='trigger'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-steps[data-part='item'][data-disabled] .xh-scope-steps[data-part='title'],
+  .xh-scope-steps[data-part='item'][data-disabled] .xh-scope-steps[data-part='description'] {
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 序号圆点：未开始使用中性面，当前步骤实心强调，已完成步骤中性面上画品牌对号。 */
+  .xh-scope-steps[data-part='indicator'] {
+    /* 圆点里的字形是指示符：对号按指示符档取尺、随密度换档（comfortable 16 / compact 14），
+       不读 root 上只管作者标题 / 说明图标的 --xh-steps-icon-size；作者塞进圆点的 XhIcon 与兜底对号同一把尺。
+       圆点自己走 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;
+    align-items: center;
+    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-_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));
+    font-size: var(--xh-steps-indicator-font-size, var(--xh-_steps-caption-font-size));
+    font-weight: var(--xh-font-weight-medium);
+    /* 等宽数字：1 与 7 的字形宽度在比例字体里并不相同，不定住会让序号左右抖一格 */
+    font-variant-numeric: tabular-nums;
+    line-height: var(--xh-leading-none);
+    transition:
+      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);
+  }
+
+  .xh-scope-steps[data-part='indicator'][hidden] {
+    display: none;
+  }
+
+  /* 圆点是格状当前的标记，但不是激活宿主：宿主是投影了 row 档的触发器；圆点在宿主的
+     :hover / :is(:active, [data-pressed]) 下读宿主 host 槽的同一来源换面，同一时间线，不缩放——
+     圆点自己是 100 的淡底，坐在触发器的 hover 面（100）上，再上一档到 200 才与承载面分得开，按下到 300；
+     当前步的实心面按下换语气 active 档 */
+  .xh-scope-steps[data-part='trigger']:hover:not([data-disabled], [data-readonly])
+    .xh-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));
+  }
+
+  /* 点状形态里走过的点是实心标记色，悬停不换成中性面：承载它的行换面即是悬停反馈 */
+  .xh-scope-steps[data-part='trigger']:hover:not([data-disabled], [data-readonly])
+    .xh-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));
+  }
+
+  .xh-scope-steps[data-part='trigger']:not([data-disabled], [data-readonly]):is(:active, [data-pressed])
+    .xh-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);
+  }
+
+  .xh-scope-steps[data-part='trigger']:not([data-disabled], [data-readonly]):is(:active, [data-pressed])
+    .xh-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);
+  }
+
+  .xh-scope-steps[data-part='indicator'][data-state='current'] {
+    border-color: var(--xh-steps-indicator-border-current, var(--xh-_steps-accent));
+    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));
+  }
+
+  /* 走过的步：中性淡底（透明边位）承一枚品牌色对号；标了语气的步对号跟语气的前景走 */
+  .xh-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));
+  }
+
+  /* 点状形态的三态：没走到的空心粗圈（墨色与序号形态的序号同一支），走过的实心标记色（序号形态里那枚对号的颜色），
+     当前步实心品牌（格状当前）外加一圈同色环。空心 / 实心 / 带环是形状通道，不只靠颜色分三态；
+     四周留出环的宽度，换步时版面不挪 */
+  .xh-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 档
+     （与序号圆点当前步按下同一档），动不了的禁用墨色。小圆点上画不下实心那档的内高光 */
+  .xh-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));
+  }
+
+  .xh-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;
+  }
+
+  .xh-scope-steps[data-part='trigger']:not([data-disabled], [data-readonly]):is(:active, [data-pressed])
+    .xh-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);
+  }
+
+  /* 动不了的那几步形状不变、墨色退到禁用档：空心的仍是空心。排在单步语气之前、与它同特指度：
+     标了语气又被锁住的那一步与序号形态一样按语气画 */
+  .xh-scope-steps[data-part='item'][data-disabled] .xh-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;
+  }
+
+  /* 带上触发器这一层祖先：特指度才压得过上面与下面两条禁用块铺的底 */
+  .xh-scope-steps[data-part='trigger'] .xh-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），首帧直接落位 */
+  .xh-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);
+  }
+
+  .xh-scope-steps[data-part='indicator'][data-state='current']:is([data-variant='dot'], [data-progress])::after {
+    opacity: 1;
+  }
+
+  .xh-scope-steps[data-part='indicator'][data-progress]::after {
+    --xh-_steps-ring-track: var(--xh-steps-indicator-ring-track, var(--xh-border-default));
+  }
+
+  .xh-scope-steps[data-part='item'][data-disabled] .xh-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，四个强调槽在这一步重新从语气层取值，
+     它的标记、标题与连接线照旧从祖先继承——只有这一步换色，状态那一档照算 */
+  .xh-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);
+  }
+
+  /* 标了语气的那一步还没走到也得被看见：空心描边加同色数字，不动实心那档的内高光 */
+  .xh-scope-steps[data-part='item'][data-tone]
+    .xh-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));
+  }
+
+  .xh-scope-steps[data-part='item'][data-disabled] .xh-scope-steps[data-part='indicator'] {
+    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，网格布局会替它们块级化，
+     [hidden] 时 UA 的 display:none 仍然压得住 */
+  .xh-scope-steps[data-part='title'] {
+    grid-column: 2;
+    color: var(--xh-steps-title-fg, var(--xh-fg-muted));
+    font-size: var(--xh-steps-title-font-size, var(--xh-_steps-title-font-size));
+    font-weight: var(--xh-steps-title-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-tight);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    /* 走到这一步、走过这一步时标题换色，与圆点的换面同一段淡变 */
+    transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-steps[data-part='title']:is([data-state='current'], [data-state='completed']) {
+    color: var(--xh-steps-title-fg-active, var(--xh-_steps-accent-text));
+  }
+
+  /* 标了语气的那一步标题跟着换色，不论走到没走到 */
+  .xh-scope-steps[data-part='item'][data-tone] .xh-scope-steps[data-part='title'] {
+    color: var(--xh-steps-title-fg-toned, var(--xh-_steps-accent-text));
+  }
+
+  /* 说明走说明角色：13 / fg-muted / leading-normal，不随 size 档 */
+  .xh-scope-steps[data-part='description'] {
+    grid-column: 2;
+    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;
+  }
+
+  /* 连接线属于它前面那一步：那一步走过了就点亮，进度因此是连续的一条线。点亮的那一层叠在底线上，
+     沿行向从这一步填到下一步（数值角色：move / continuous，只动 clip-path），回退时反向收回 */
+  .xh-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));
+  }
+
+  /* 没走过时把行尾那一侧整段裁掉：inset 的左右两侧乘书写方向符号，ltr 裁右侧、rtl 裁左侧 */
+  .xh-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);
+  }
+
+  .xh-scope-steps[data-part='separator'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-steps[data-part='separator'][data-state='completed']::after {
+    clip-path: inset(0);
+  }
+
+  /* 纵向时连接线转成竖的一条，缩进到与序号圆点同一条竖线上 */
+  .xh-scope-steps[data-part='separator'][data-orientation='vertical'] {
+    flex: none;
+    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，除号在这儿是无效语法 */
+    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
+    );
+  }
+
+  /* 纵向时从上往下填：没走过时裁掉下端 */
+  .xh-scope-steps[data-part='separator'][data-orientation='vertical']::after {
+    clip-path: inset(0 0 100% 0);
+  }
+
+  .xh-scope-steps[data-part='separator'][data-orientation='vertical'][data-state='completed']::after {
+    clip-path: inset(0);
+  }
+
+  /* 面板刻意不给 display：连接层用 hidden 收起，UA 的 [hidden]{display:none} 压得住，
+     不必再拿内联样式去盖 */
+  .xh-scope-steps[data-part='content'] {
+    padding-block: var(--xh-steps-content-py, var(--xh-stack-gap-md));
+    color: var(--xh-steps-content-fg, var(--xh-fg-default));
+  }
+
+  /* 没写内容就由皮肤画兜底对号；作者往部件里塞了自己的图形，这几条即不命中。
+     尺寸读圆点自己改接过的 --xh-icon-size：指示符档，随密度换档（见圆点块）。
+     点状形态不盛内容，走过的点本身就是标记，不画对号 */
+  .xh-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));
+    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;
+  }
+
+  /* 走过这一步那一刻：序号撤下、对号淡入，与圆点的换面同一段淡变；首帧就走过的（data-instant）直接呈现 */
+  .xh-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 压在高亮底上，悬停与按住时一起跟到反色 */
+    .xh-scope-steps[data-part='trigger']:not([data-disabled]):is(:hover, :active, [data-pressed])
+      :is(.xh-scope-steps[data-part='title'], .xh-scope-steps[data-part='description']) {
+      color: HighlightText;
+    }
+
+    .xh-scope-steps[data-part='trigger']:hover:not([data-disabled], [data-readonly])
+      .xh-scope-steps[data-part='indicator'][data-state='incomplete']:not([data-variant='dot']) {
+      border-color: Highlight;
+    }
+
+    /* 连接线画的是一块纯底色，这一档里底色被统一换成 Canvas，整条进度线消失，
+       只剩一排孤立的圆点。走过的那几截换成系统高亮色，其余换成前景色 */
+    .xh-scope-steps[data-part='separator'] {
+      background: CanvasText;
+    }
+
+    .xh-scope-steps[data-part='separator']::after {
+      background: Highlight;
+    }
+
+    /* 点状形态的点靠底色画实心，这一档里底色被换成 Canvas，走过与当前步的点会与空心的圈混成一样。
+       实心的点与当前步那圈环换成 CanvasText：整行悬停涂成 Highlight 时照样看得见，走过与当前步靠那圈环分开；
+       动不了的取 GrayText */
+    .xh-scope-steps[data-part='trigger'] .xh-scope-steps[data-part='indicator'][data-variant='dot']:not([data-state='incomplete']) {
+      border-color: CanvasText;
+      background: CanvasText;
+    }
+
+    .xh-scope-steps[data-part='item'][data-disabled] .xh-scope-steps[data-part='indicator'][data-variant='dot'] {
+      border-color: GrayText;
+    }
+
+    .xh-scope-steps[data-part='item'][data-disabled]
+      .xh-scope-steps[data-part='trigger'] .xh-scope-steps[data-part='indicator'][data-variant='dot']:not([data-state='incomplete']) {
+      background: GrayText;
+    }
+
+    /* 环是一层角向渐变，这一档里渐变会被当作背景图丢掉：环自己不让系统接管配色，弧与轨道改取系统色——
+       弧 CanvasText、进度环的轨道 GrayText（两者分得开，才读得出走了多少）；动不了的弧 GrayText，
+       轨道退到 Canvas，免得与弧同色读不出比例 */
+    .xh-scope-steps[data-part='indicator']::after {
+      --xh-_steps-ring-arc: CanvasText;
+
+      forced-color-adjust: none;
+    }
+
+    .xh-scope-steps[data-part='indicator'][data-progress]::after {
+      --xh-_steps-ring-track: GrayText;
+    }
+
+    .xh-scope-steps[data-part='item'][data-disabled] .xh-scope-steps[data-part='indicator']::after {
+      --xh-_steps-ring-arc: GrayText;
+    }
+
+    .xh-scope-steps[data-part='item'][data-disabled] .xh-scope-steps[data-part='indicator'][data-progress]::after {
+      --xh-_steps-ring-track: Canvas;
+    }
+  }
+
+  @media print {
+    /* 打印默认丢背景：走过那几步的实心底与里面那枚勾都印不出来，
+       当前步与走过的步只剩一模一样的一圈细描边。改用描边的粗细与字重表达同一件事 */
+    .xh-scope-steps[data-part='indicator']:is([data-state='current'], [data-state='completed']) {
+      border-width: var(--xh-stroke-thick);
+    }
+
+    .xh-scope-steps[data-part='title'][data-state='current'] {
+      font-weight: var(--xh-font-weight-semibold);
+    }
+
+    /* 点状形态的点与当前步那圈环都是底色画的，丢了底色走过与当前步就只剩空心圈：这两样照原色印 */
+    .xh-scope-steps[data-part='indicator'][data-variant='dot'],
+    .xh-scope-steps[data-part='indicator']::after {
+      print-color-adjust: exact;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       落在勾选盒自己的实心面上（这一档里是 Canvas），整行悬停不换面，取 CanvasText；
+       禁用取 GrayText */
+    .xh-scope-steps[data-part='indicator'][data-state='completed']:not([data-variant='dot']):empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    .xh-scope-steps[data-part='item'][data-disabled] .xh-scope-steps[data-part='indicator'][data-state='completed']:not([data-variant='dot']):empty::before {
+      background-color: GrayText;
+    }
+  }
+}