@xihan-ui/styles 3.2.0 → 4.0.0

package/css/steps.css

@@ -32,36 +32,35 @@
     --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);
+       换档不必给每个部件各写一条选择器；说明走次级标注（12px），不随档。
+       圆点取状态圆那把尺：marker-size 的 sm / md / lg（24 / 28 / 32），比同档控件矮一档，随密度换档；
+       圆里的序号比同档控件字大一档（sm 14、md / lg 16）；标题取区块标题档 heading-3（sm 收回正文字号） */
+    --xh-_steps-indicator-size: var(--xh-marker-size-md);
+    --xh-_steps-title-font-size: var(--xh-text-heading-3-size);
+    --xh-_steps-indicator-font-size: var(--xh-control-font-lg);
     /* 圆点一圈边的宽：序号圆点是细边（多数状态透明占位），点状形态的空心圈要粗一档才读得出是个圈 */
     --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 语义），淡底那两支私有槽随之撤掉 */
+    /* 语气落在当前步的标记、走过那几步的淡底与对号、连接线上：强调色画描边与填充，
+       accent-subtle 一族是走过那几步的淡底三档（静息 / 悬停 / 按下），on-accent 是实心底上的前景。
+       没写 data-tone 时 --xh-_tone 一族没被声明，这几个槽都退回品牌配色 */
     --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-subtle: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
+    --xh-_steps-accent-subtle-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-brand-subtle-hover));
+    --xh-_steps-accent-subtle-active: var(--xh-_tone-subtle-active, var(--xh-bg-brand-subtle-active));
+    /* 走过的步里那枚对号：淡底上的强调色标记 */
     --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）的淡底上，阶梯按淡底容器走
+    /* 触发器是序号圆点的承载面：没走到的圆点静息就坐在 --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;
@@ -87,33 +86,36 @@
   /* 缺省档写在上面的基础规则里 */
   [data-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-_steps-indicator-size: var(--xh-marker-size-sm);
+    --xh-_steps-title-font-size: var(--xh-text-body-size);
+    --xh-_steps-indicator-font-size: var(--xh-control-font-md);
   }
 
+  /* 大档的序号与标题都与中档同档：圆只大一档，字再放大就顶到圆边；标题已是区块标题档 */
   [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);
+    --xh-_steps-indicator-size: var(--xh-marker-size-lg);
   }
 
   /* —— 点状形态 —— */
-  /* 圆点不盛内容，是纯位置标记：直径不在控件高度那把尺上，与 Timeline 圆点同走空间尺相邻的三格，
-     不随密度换档；描边粗一档，四周留出当前步那圈环的宽度 */
+  /* 圆点不盛内容，是纯位置标记：直径不在控件高度那把尺上，走空间尺，不随密度换档；描边粗一档。
+     走过与没走到的点 8px，当前步放大一档到 10px（sm 6 / 8、lg 10 / 12）：大小是当前步与走过的步之间的形状通道。
+     每个点都按当前步的直径占位，小一档的点四周补半档留位，换步时版面不挪、点心仍在同一条线上 */
   [data-scope='steps'][data-part='root'][data-variant='dot'] {
-    --xh-_steps-indicator-size: var(--xh-space-2_5);
+    --xh-_steps-indicator-size: var(--xh-space-2);
+    --xh-_steps-indicator-current-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-_steps-indicator-margin: calc((var(--xh-_steps-indicator-current-size) - var(--xh-_steps-indicator-size)) * 0.5);
   }
 
   [data-scope='steps'][data-part='root'][data-variant='dot'][data-size='sm'] {
-    --xh-_steps-indicator-size: var(--xh-space-2);
+    --xh-_steps-indicator-size: var(--xh-space-1_5);
+    --xh-_steps-indicator-current-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);
+    --xh-_steps-indicator-size: var(--xh-space-2_5);
+    --xh-_steps-indicator-current-size: var(--xh-space-3);
   }
 
   /* 步骤与连接线必须保持在同一条流程轴上，空间不足时由标题省略而不是拆成两行。 */
@@ -199,19 +201,22 @@
     --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;
   }
 
+  /* 两列排版、按内容收宽，盖掉 row 档的 display: flex 与 inline-size: 100%（横排的连接线会被压到最小长度）。
+     从条目往下写，特指度高过 row 档，有层与无层两份产物里都生效；收起的触发器留给下面 [hidden] 那条 */
+  [data-scope='steps'][data-part='item'] [data-scope='steps'][data-part='trigger']:not([hidden]) {
+    display: grid;
+    inline-size: auto;
+  }
+
   /* 只读展示：trigger 不投影 Action Control，只是「序号 + 标题 + 说明」的排版容器——内距与可操作时同一把尺，
      在两种形态间切换版面不跳；没有悬停、按压与焦点环，标题与说明不置灰 */
   [data-scope='steps'][data-part='trigger'][data-readonly] {
@@ -228,14 +233,14 @@
     color: var(--xh-fg-disabled);
   }
 
-  /* 序号圆点：未开始使用中性面，当前步骤实心强调，已完成步骤中性面上画品牌对号。 */
+  /* 序号圆点：没走到的中性淡底配次级字色，当前步品牌实心配反白字，走过的步品牌淡底配品牌对号；三态都无边无影 */
   [data-scope='steps'][data-part='indicator'] {
     /* 圆点里的字形是指示符：对号按指示符档取尺、随密度换档（comfortable 16 / compact 14），
        不读 root 上只管作者标题 / 说明图标的 --xh-steps-icon-size；作者塞进圆点的 XhIcon 与兜底对号同一把尺。
-       圆点自己走 control-h 的尺（最小 compact sm 的 28px），两档字形在三档圆点里都留得出边距 */
+       圆点自己走 marker-size 的尺（最小 compact sm 的 20px），两档字形在三档圆点里都留得出边距 */
     --xh-icon-size: var(--xh-steps-indicator-mark-size, var(--xh-control-indicator-size));
 
-    /* 当前步那圈环（::after）以圆点为准绳定位 */
+    /* 当前步的进度环（::after）以圆点为准绳定位 */
     position: relative;
     display: inline-flex;
     grid-row: 1 / span 2;
@@ -248,7 +253,7 @@
     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-size: var(--xh-steps-indicator-font-size, var(--xh-_steps-indicator-font-size));
     font-weight: var(--xh-font-weight-medium);
     /* 等宽数字：1 与 7 的字形宽度在比例字体里并不相同，不定住会让序号左右抖一格 */
     font-variant-numeric: tabular-nums;
@@ -266,27 +271,34 @@
 
   /* 圆点是格状当前的标记，但不是激活宿主：宿主是投影了 row 档的触发器；圆点在宿主的
      :hover / :is(:active, [data-pressed]) 下读宿主 host 槽的同一来源换面，同一时间线，不缩放——
-     圆点自己是 100 的淡底，坐在触发器的 hover 面（100）上，再上一档到 200 才与承载面分得开，按下到 300；
-     当前步的实心面按下换语气 active 档 */
+     没走到的圆点自己是 100 的淡底，坐在触发器的 hover 面（100）上，再上一档到 200 才与承载面分得开，按下到 300；
+     走过的圆点走品牌淡底的阶梯（12% → 悬停 20% → 按下 28%）；当前步的实心面按下换语气 active 档 */
   [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-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));
+    background: var(--xh-steps-indicator-bg-completed-hover, var(--xh-_steps-accent-subtle-hover));
   }
 
   [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'])) {
+    [data-scope='steps'][data-part='indicator'][data-state='incomplete'] {
     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], [data-readonly]):is(:active, [data-pressed])
+    [data-scope='steps'][data-part='indicator'][data-state='completed']:not([data-variant='dot']) {
+    background: var(--xh-steps-indicator-bg-completed-pressed, var(--xh-_steps-accent-subtle-active));
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
+  }
+
   [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)));
@@ -298,19 +310,19 @@
     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));
+    box-shadow: var(--xh-steps-indicator-shadow, none);
   }
 
-  /* 走过的步：中性淡底（透明边位）承一枚品牌色对号；标了语气的步对号跟语气的前景走 */
+  /* 走过的步：品牌淡底（透明边位）承一枚品牌色对号；标了语气的步淡底与对号跟语气走 */
   [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));
+    background: var(--xh-steps-indicator-bg-completed, var(--xh-_steps-accent-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));
@@ -318,15 +330,16 @@
   }
 
   /* 实心的点底与圈同一色，取自 --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;
+    --xh-_steps-indicator-size: var(--xh-_steps-indicator-current-size);
+    --xh-_steps-indicator-margin: var(--xh-space-0);
   }
 
   [data-scope='steps'][data-part='trigger']:not([data-disabled], [data-readonly]):is(:active, [data-pressed])
@@ -352,11 +365,10 @@
     background: var(--xh-_steps-dot);
   }
 
-  /* 当前步那圈环：离圆点边一道缝、一道粗描边宽，叠在圆点外面、不接指针；环面由一圈角向渐变经环形遮罩挖空中心得来。
-     弧（arc）从 12 点顺时针走到完成比例，其余是轨道（track）：点状形态不带比例，轨道与弧同色，就是整圈实心环；
-     序号圆点带了比例（data-progress），轨道取连接线的底色，弧就是这一步走了多少。时钟式的走向是稳定身份，不随书写方向镜像。
-     静息收着，点状形态的当前步与带比例的当前步才亮出来，走到 / 离开这一步时按状态角色淡入淡出；
-     比例变化时弧按数值角色走（move / continuous），首帧直接落位 */
+  /* 当前步的进度环：离圆点边一道缝、一道粗描边宽，叠在圆点外面、不接指针；环面由一圈角向渐变经环形遮罩挖空中心得来。
+     弧（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);
@@ -378,7 +390,7 @@
       --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 {
+  [data-scope='steps'][data-part='indicator'][data-state='current'][data-progress]::after {
     opacity: 1;
   }
 
@@ -390,28 +402,46 @@
     --xh-_steps-ring-arc: var(--xh-steps-indicator-ring-bg-disabled, var(--xh-fg-disabled));
   }
 
-  /* 单步语气：tones / collection 给某一步标了 data-tone，四个强调槽在这一步重新从语气层取值，
-     它的标记、标题与连接线照旧从祖先继承——只有这一步换色，状态那一档照算 */
+  /* 单步语气：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-subtle: var(--xh-_tone-subtle);
+    --xh-_steps-accent-subtle-hover: var(--xh-_tone-subtle-hover);
+    --xh-_steps-accent-subtle-active: var(--xh-_tone-subtle-active);
     --xh-_steps-accent-mark: var(--xh-_tone-fg);
     --xh-_steps-on-accent: var(--xh-_tone-on);
   }
 
-  /* 标了语气的那一步还没走到也得被看见：空心描边加同色数字，不动实心那档的内高光 */
+  /* 标了语气的那一步还没走到也得被看见：与当前步同一副语气实心面配反白字（出错的那一步是危险色实心）。
+     带上触发器这一层祖先，特指度才压得过没走到的圆点的悬停与按下面：悬停不换中性面，按下换语气 active 档 */
+  [data-scope='steps'][data-part='item'][data-tone] [data-scope='steps'][data-part='trigger']
+    [data-scope='steps'][data-part='indicator'][data-state='incomplete']:not([data-variant='dot']) {
+    border-color: var(--xh-steps-indicator-border-toned, var(--xh-_steps-accent));
+    background: var(--xh-steps-indicator-bg-toned, var(--xh-_steps-accent));
+    color: var(--xh-steps-indicator-fg-toned, var(--xh-_steps-on-accent));
+  }
+
   [data-scope='steps'][data-part='item'][data-tone]
-    [data-scope='steps'][data-part='indicator'][data-state='incomplete'] {
+    [data-scope='steps'][data-part='trigger']:not([data-disabled], [data-readonly]):is(:active, [data-pressed])
+    [data-scope='steps'][data-part='indicator'][data-state='incomplete']:not([data-variant='dot']) {
+    background: var(--xh-steps-indicator-bg-current-pressed, var(--xh-_tone-active));
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
+  }
+
+  /* 点状形态里放不下实心面上的字，标了语气又没走到的点仍是空心圈：圈换语气色、心里只铺语气淡底 */
+  [data-scope='steps'][data-part='item'][data-tone]
+    [data-scope='steps'][data-part='indicator'][data-state='incomplete'][data-variant='dot'] {
     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-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;
   }
 
@@ -430,20 +460,25 @@
     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']) {
-    color: var(--xh-steps-title-fg-active, var(--xh-_steps-accent-text));
+    color: var(--xh-steps-title-fg-active, var(--xh-fg-default));
+  }
+
+  [data-scope='steps'][data-part='title'][data-state='current'] {
+    font-weight: var(--xh-steps-title-font-weight-current, var(--xh-text-heading-3-weight));
   }
 
-  /* 标了语气的那一步标题跟着换色，不论走到没走到 */
+  /* 标了语气的那一步标题取正文色，不论走到没走到：语气由圆点的语气面表达，标题不染色 */
   [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));
+    color: var(--xh-steps-title-fg-toned, var(--xh-fg-default));
   }
 
-  /* 说明走说明角色：13 / fg-muted / leading-normal，不随 size 档 */
+  /* 说明走次级标注：12 / fg-subtle / leading-normal，不随 size 档 */
   [data-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));
+    color: var(--xh-steps-description-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-steps-description-font-size, var(--xh-text-caption-size));
     line-height: var(--xh-leading-normal);
     overflow: hidden;
     white-space: nowrap;
@@ -456,7 +491,7 @@
     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));
+    block-size: var(--xh-steps-separator-thickness, var(--xh-stroke-thin));
     border-radius: var(--xh-steps-separator-radius, var(--xh-shape-pill));
     background: var(--xh-steps-separator-bg, var(--xh-border-default));
   }
@@ -483,15 +518,15 @@
   /* 纵向时连接线转成竖的一条，缩进到与序号圆点同一条竖线上 */
   [data-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));
+    inline-size: var(--xh-steps-separator-thickness, var(--xh-stroke-thin));
+    min-inline-size: var(--xh-steps-separator-thickness, var(--xh-stroke-thin));
     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
+      - var(--xh-steps-separator-thickness, var(--xh-stroke-thin)) * 0.5
     );
   }
 
@@ -554,7 +589,7 @@
     }
 
     /* 点状形态的点靠底色画实心，这一档里底色被换成 Canvas，走过与当前步的点会与空心的圈混成一样。
-       实心的点与当前步那圈环换成 CanvasText：整行悬停涂成 Highlight 时照样看得见，走过与当前步靠那圈环分开；
+       实心的点换成 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;
@@ -593,21 +628,17 @@
   }
 
   @media print {
-    /* 打印默认丢背景：走过那几步的实心底与里面那枚勾都印不出来，
-       当前步与走过的步只剩一模一样的一圈细描边。改用描边的粗细与字重表达同一件事 */
-    [data-scope='steps'][data-part='indicator']:is([data-state='current'], [data-state='completed']) {
-      border-width: var(--xh-stroke-thick);
+    /* 打印默认丢背景：当前步的实心底、走过那几步的淡底与里面那枚勾（mask 挖出的一块底色）都印不出来，
+       走过的步还是透明边位，连圈都不剩。圆点、兜底对号与进度环照原色印，当前步标题再加粗一档 */
+    [data-scope='steps'][data-part='indicator'],
+    [data-scope='steps'][data-part='indicator']::before,
+    [data-scope='steps'][data-part='indicator']::after {
+      print-color-adjust: exact;
     }
 
     [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) {

package/css/switch.css

@@ -17,17 +17,18 @@
   }
 
   [data-scope='switch'][data-part='root'] {
-    /* 尺寸档只换轨道高度这一个私有槽，其余几何都从它算出来：
-       滑块边长 = 轨道高 − 两条留白，轨道宽 = 两倍轨道高 − 两条留白，滑块行程因此正好等于自身边长 */
+    /* 尺寸档只换轨道高度与留白两个私有槽，其余几何都从它们算出来：
+       滑块边长 = 轨道高 − 两条留白，轨道宽 = 两倍轨道高 − 两条留白，滑块行程因此正好等于自身边长。
+       md 留白 4px：24px 轨道配 16px 滑块、40px 宽；sm 留白收到 2px，滑块不至于小到点不准 */
     --xh-_switch-track-h: var(--xh-switch-track-h-md);
-    --xh-_switch-pad: var(--xh-space-0_5);
+    --xh-_switch-pad: var(--xh-space-1);
     --xh-_switch-thumb-size: calc(var(--xh-_switch-track-h) - var(--xh-_switch-pad) * 2);
     --xh-_switch-thumb-press-stretch: var(--xh-switch-thumb-press-stretch, var(--xh-motion-distance-sm));
 
     /* 选中态轨道色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的品牌色 */
     --xh-_switch-accent: var(--xh-_tone, var(--xh-bg-brand));
-    /* 轨道边界以内描边表达，不吃掉滑块行程；checked / readonly / invalid / disabled 只换这一支色。 */
-    --xh-_switch-track-border: var(--xh-switch-border, var(--xh-border-control));
+    /* 轨道的面就是边界：静息内描边透明；readonly / invalid 才换成有色的一圈，不吃掉滑块行程 */
+    --xh-_switch-track-border: var(--xh-switch-border, transparent);
     /* 轨道的面：未选中是 --xh-bg-subtle-active（300）的实体字段控件面；checked / readonly / disabled 换这一支。
        静息已是 300，中性阶梯再无更深一档可换：按下的底缺省仍是轨道静息面（使用者可经 --xh-switch-bg-pressed
        另给），换面的通道由下面滑块的橡皮带拉伸与压平投影承担；选中轨道按下换到语气的 active 档 */
@@ -35,7 +36,7 @@
     --xh-_switch-track-bg-pressed: var(--xh-switch-bg-pressed, var(--xh-_switch-track-bg));
     --xh-_switch-fg: var(--xh-switch-fg, var(--xh-fg-default));
 
-    /* 轨道接 Action Control text 档（定尺轨道）：悬停 / 按下 / 禁用面、0.97 缩放与换底、粗指针热区、
+    /* 轨道接 Action Control text 档（定尺轨道）：悬停 / 按下 / 禁用面、按压与换底、粗指针热区、
        焦点环与过渡由家族配方给，这里只把轨道的私有槽映射到桥接槽。轨道没有实描边（边界以内描边画，不吃行程），
        边位映射 transparent 并把 border 宽度归零；内描边经 shadow 通道各态同一支。悬停不换面（阶梯只给按下） */
     --xh-action-visual-size: var(--xh-_switch-track-h);
@@ -132,6 +133,7 @@
   /* 缺省档写在上面的基础规则里 */
   [data-scope='switch'][data-part='root'][data-size='sm'] {
     --xh-_switch-track-h: var(--xh-switch-track-h-sm);
+    --xh-_switch-pad: var(--xh-space-0_5);
   }
 
   [data-scope='switch'][data-part='root'][data-size='lg'] {
@@ -158,7 +160,7 @@
   }
 
   /* 滑块是 raised 抬起面（可拖起部件，逐部件登记）：--xh-bg-surface-raised 底 + --xh-border-default 描边 +
-     --xh-elevation-raised 影，无顶光；描边必须在，影只是加成 */
+     --xh-elevation-raised 影（缺省 none），无顶光；描边必须在，影只是加成 */
   [data-scope='switch'][data-part='thumb'] {
     position: relative;
     display: grid;

package/css/table.css

@@ -28,6 +28,10 @@
        --xh-control-indicator-* 一族——五颗把手在自己身上把 --xh-icon-size 改接到方盒的尺，排序钮那支叫 --xh-table-sort-size */
     --xh-icon-size: var(--xh-table-icon-size, var(--xh-glyph-size-md));
 
+    /* 表头底比行悬停的淡底浅一档：淡底在表体里是悬停与斑马纹的面，表头再取同一档就压得比数据还重。
+       取淡底的 55% 兑进承载面，与字段静息底同一档深浅；两端都是实色，吸顶时滚过去的行不会从它底下透出来 */
+    --xh-_table-header-bg: color-mix(in srgb, var(--xh-bg-subtle-opaque) 55%, var(--xh-bg-surface));
+
     /* 密度档只换这两个私有槽：单元格与列标题从 root 继承前者，字号靠 font-size 本身继承下去，
        换档不必给每个部件各写一条选择器，列宽那套算法也一点不碰 */
     --xh-_table-cell-py: var(--xh-table-cell-py-md);
@@ -186,7 +190,7 @@
 
     /* 表头与表体之间是内部分隔，与行间横线同一支：外边才取 default */
     border-block-end: var(--xh-stroke-thin) solid var(--xh-table-header-border, var(--xh-border-subtle));
-    background: var(--xh-table-header-bg, var(--xh-bg-subtle-opaque));
+    background: var(--xh-table-header-bg, var(--xh-_table-header-bg));
   }
 
   /* 吸顶：滚动容器是 root，表头钉在它的上沿。背景必须是实色——
@@ -289,7 +293,7 @@
     gap: var(--xh-table-cell-gap, var(--xh-control-gap-md));
     min-inline-size: var(--xh-table-cell-min-w, 3rem);
     padding-block: var(--xh-table-cell-py, var(--xh-_table-cell-py));
-    padding-inline: var(--xh-table-cell-px, var(--xh-control-px-sm));
+    padding-inline: var(--xh-table-cell-px, var(--xh-space-4));
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -300,9 +304,15 @@
     display: none;
   }
 
+  /* 格子里放的字段族控件（就地编辑的单元格）铺满这一格，与放进 Field 时一样；并排几个就平分，各自的压缩底线照旧 */
+  [data-scope='table'][data-part='cell'] {
+    --xh-control-w: 100%;
+  }
+
   [data-scope='table'][data-part='column-header'] {
-    color: var(--xh-table-column-fg, var(--xh-fg-muted));
-    font-weight: var(--xh-table-column-font-weight, var(--xh-text-label-weight));
+    /* 列头与正文同色、加一档字重：表头靠淡底与字重和表体分开，不再靠淡字 */
+    color: var(--xh-table-column-fg, var(--xh-fg-default));
+    font-weight: var(--xh-table-column-font-weight, var(--xh-font-weight-medium));
     text-align: start;
     user-select: none;
   }
@@ -393,7 +403,7 @@
   /* 表头行本身透明（露出表头底），吸附的列头继承到的就是透明——得自己带表头底，
      否则横向滚动时其它列头从它下面穿过去 */
   [data-scope='table'][data-part='column-header'][data-frozen] {
-    background: var(--xh-table-header-bg, var(--xh-bg-subtle-opaque));
+    background: var(--xh-table-header-bg, var(--xh-_table-header-bg));
   }
 
   /* 冻结列的边界：紧挨滚动区的那一列在朝向滚动区的一侧画一道描边，只在确有内容被压住时出现——
@@ -457,9 +467,11 @@
     background: var(--xh-table-bg, var(--xh-bg-subtle));
   }
 
-  /* 竖分隔线：列与列之间一道细线，末列不画 */
+  /* 竖分隔线：列与列之间一道细线，末列不画。线占的那一截从末端内衬里让出来，格子里放字的宽度与不开竖线时一样：
+     否则 60px 的序号列开了竖线只剩 27.33px，「序号」两个字差不到一个像素就出省略号，关掉竖线又放得下 */
   [data-scope='table'][data-part='root'][data-split] [data-scope='table'][data-part='column-header']:not(:last-child),
   [data-scope='table'][data-part='root'][data-split] [data-scope='table'][data-part='cell']:not(:last-child) {
+    padding-inline-end: calc(var(--xh-table-cell-px, var(--xh-space-4)) - var(--xh-stroke-thin));
     border-inline-end: var(--xh-stroke-thin) solid var(--xh-table-row-border, var(--xh-border-subtle));
   }
 
@@ -562,7 +574,7 @@
   [data-scope='table'][data-part='row-select-trigger'],
   [data-scope='table'][data-part='column-visibility-trigger'] {
     --xh-_table-trigger-bg: transparent;
-    --xh-_table-trigger-border: var(--xh-table-trigger-border, var(--xh-border-control));
+    --xh-_table-trigger-border: var(--xh-table-trigger-border, var(--xh-border-strong));
     --xh-_table-trigger-fg: var(--xh-table-trigger-fg, var(--xh-fg-on-brand));
     --xh-action-fg-rest: var(--xh-_table-trigger-fg);
     --xh-action-fg-hover: var(--xh-_table-trigger-fg);
@@ -1063,7 +1075,7 @@
   /* 取下一页的按钮：铺满一行摆在表尾——铺满一行的独立动作条目，接 Action Control 的 row 档、
      ghost 形态：宽度由容器给、高度随内容、按下只换面不缩放；盒几何、悬停 / 按下 / 禁用面、
      焦点环与粗指针热区全由家族给，白底承载 hover 100 → pressed 200。
-     这里只把使用者槽映射到桥接槽并把文案居中：它是一行里唯一的东西，靠起始缘会像一条没对齐的行 */
+     这里只把使用者槽映射到桥接槽，文案居中写在下一条 */
   [data-scope='table'][data-part='load-more-trigger'] {
     --xh-action-gap: var(--xh-table-load-more-trigger-gap, var(--xh-space-2));
     --xh-action-padding-block: var(--xh-table-load-more-trigger-py, var(--xh-space-3));
@@ -1075,12 +1087,17 @@
     --xh-action-fg-pressed: var(--xh-table-load-more-trigger-fg, var(--xh-fg-brand-strong));
     --xh-action-font-size: var(--xh-table-load-more-trigger-font-size, var(--xh-_table-font-size));
 
-    justify-content: center;
-    text-align: center;
     /* row 档允许换行、高度随内容，折行的文案走正文行高 */
     line-height: var(--xh-leading-normal);
   }
 
+  /* 文案居中（单行整段居中，折行逐行居中），盖掉 row 档的靠起始缘排布：它是一行里唯一的东西，
+     靠起始缘会像一条没对齐的行。选择器点名 row 档，有层与无层两份产物里都压得住它 */
+  [data-scope='table'][data-part='load-more-trigger'][data-xh-action-profile='row'] {
+    justify-content: center;
+    text-align: center;
+  }
+
   [data-scope='table'][data-part='load-more-trigger'][hidden] {
     display: none;
   }