@xihan-ui/styles 2.1.0 → 3.1.0

package/css/popconfirm.css

@@ -8,16 +8,8 @@
 /* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
 @import '../family/motion.css';
 @import '../family/action-control.css';
-
-@layer xihan.motion {
-  /* 转圈的关键帧定义在本文件里：引用别处文件的动画名时那份文件不一定在场，动画会静默不跑 */
-  @keyframes xh-popconfirm-rotate {
-    to {
-      transform: rotate(1turn);
-    }
-  }
-}
-
+@import '../family/loading-ring.css';
+@import '../family/material.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -90,9 +82,37 @@
     --xh-_overlay-enter-left: 1;
   }
 
+  /* 交叉轴原点按对齐取：start / end 对齐时面板与锚点在那一端齐平，缩放从那一端涨开，贴着小触发器的面板
+     才像是从触发器里长出来；居中对齐留在中线。上下两侧的 start / end 是行内轴上的逻辑对齐，RTL 下起始缘在右；
+     左右两侧的 start / end 落在块轴上，不随书写方向翻 */
+  /* 起始缘与末尾缘按就近的书写方向取：LTR 起始在左，RTL 起始在右 */
+  [data-scope='popconfirm'][data-part='positioner']:is([data-placement='top-start'], [data-placement='bottom-start']) {
+    --xh-_overlay-origin-x: var(--xh-direction-start);
+  }
+
+  [data-scope='popconfirm'][data-part='positioner']:is([data-placement='top-end'], [data-placement='bottom-end']) {
+    --xh-_overlay-origin-x: var(--xh-direction-end);
+  }
+
+  [data-scope='popconfirm'][data-part='positioner']:is([data-placement='left-start'], [data-placement='right-start']) {
+    --xh-_overlay-origin-y: 0;
+  }
+
+  [data-scope='popconfirm'][data-part='positioner']:is([data-placement='left-end'], [data-placement='right-end']) {
+    --xh-_overlay-origin-y: 100%;
+  }
+
   /* 面板排成三列：左列吃掉剩余宽度，右两列各摆一颗按钮。
      标题、说明与作者塞进来的内容各占一整行，两颗按钮因此并排落在最后一行的右侧。 */
   [data-scope='popconfirm'][data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-popconfirm-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-popconfirm-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-popconfirm-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-popconfirm-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-popconfirm-backdrop, var(--xh-_material-backdrop));
+
     /* 作者塞进面板里的图标按控件档取；两颗动作钮另由家族配方按 sm 档下发字形尺 */
     --xh-icon-size: var(--xh-popconfirm-icon-size, var(--xh-glyph-size-md));
     /* 尺寸档只换这两个私有槽 */
@@ -114,20 +134,7 @@
     overscroll-behavior: contain;
     padding-block: var(--xh-popconfirm-py, var(--xh-_popconfirm-pad));
     padding-inline: var(--xh-popconfirm-px, var(--xh-_popconfirm-pad));
-    border: var(--xh-stroke-thin) solid var(--xh-popconfirm-border, var(--xh-material-frosted-border));
     border-radius: var(--xh-popconfirm-radius, var(--xh-shape-overlay));
-    /* 与 Popover 共用 M2 配方：透明 tint 在底层，内侧一像素顶光只表达材质厚度。 */
-    background:
-      linear-gradient(
-        to bottom,
-        var(--xh-material-frosted-highlight) 0 var(--xh-stroke-thin),
-        transparent var(--xh-stroke-thin)
-      ),
-      var(--xh-popconfirm-bg, var(--xh-material-frosted-bg));
-    color: var(--xh-popconfirm-fg, var(--xh-material-frosted-fg));
-    box-shadow: var(--xh-popconfirm-shadow, var(--xh-material-frosted-shadow));
-    -webkit-backdrop-filter: var(--xh-popconfirm-backdrop, var(--xh-material-frosted-backdrop));
-    backdrop-filter: var(--xh-popconfirm-backdrop, var(--xh-material-frosted-backdrop));
     pointer-events: auto;
     /* 进退场的缩放锚在贴着锚点的那条边上；两个分量由 positioner 按 placement 写进私有槽 */
     transform-origin: var(--xh-_overlay-origin-x, 50%) var(--xh-_overlay-origin-y, 50%);
@@ -152,7 +159,8 @@
     outline: none;
   }
 
-  [data-scope='popconfirm'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='popconfirm'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -254,16 +262,18 @@
     --xh-action-ring-color-focus-visible: currentColor;
   }
 
-  /* 异步确认挂起：确认文案前转一枚圆环；不是禁用，焦点与对比度都保持，在途指针由家族 loading 面给 */
-  [data-scope='popconfirm'][data-part='confirm-trigger'][data-loading]::before {
-    content: '';
-    inline-size: 1em;
-    block-size: 1em;
-    margin-inline-end: var(--xh-space-1);
-    border: var(--xh-stroke-thin) solid transparent;
-    border-block-start-color: currentcolor;
-    border-radius: var(--xh-shape-circle);
-    animation: xh-popconfirm-rotate var(--xh-popconfirm-loading-duration, var(--xh-spin-duration)) var(--xh-motion-ease-loop) infinite;
+  /* 异步确认挂起：环由加载环配方压在确认钮正中（连接层投影 data-xh-loading-ring="overlay"），直径取钮的图标档，
+     起始边取钮的真实前景、转速认使用者槽。不是禁用，焦点与对比度都保持，在途指针由家族 loading 面给。
+     确认文案随前景淡到透明留位：进入挂起等一个 micro 才起淡（快速落定什么都不闪），落定时不等、按 micro 淡回 */
+  [data-scope='popconfirm'][data-part='confirm-trigger'] {
+    --xh-_loading-ring-fg: var(--xh-popconfirm-confirm-fg, var(--xh-_action-variant-fg-loading));
+    --xh-_loading-ring-duration: var(--xh-popconfirm-loading-duration, var(--xh-motion-loop-spin));
+  }
+
+  [data-scope='popconfirm'][data-part='confirm-trigger'][data-loading] {
+    --xh-action-fg-loading: transparent;
+
+    transition-delay: var(--xh-motion-duration-micro);
   }
 
   /* 取消是中性的次要出口，不参与语气：content 上的 data-tone 会把 --xh-_tone-* 一路继承下来，
@@ -285,22 +295,6 @@
     --xh-action-border-focus-visible: var(--xh-popconfirm-cancel-border, var(--xh-border-control));
   }
 
-  /* 减少动效：圆环停下并整圈换成虚线，静止的形状仍然读得出"还没好"。
-     两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='popconfirm'][data-part='confirm-trigger'][data-loading]::before {
-      border-style: dotted;
-      border-color: currentColor;
-      animation: none;
-    }
-  }
-
-  :where([data-motion='reduce']) [data-scope='popconfirm'][data-part='confirm-trigger'][data-loading]::before {
-    border-style: dotted;
-    border-color: currentColor;
-    animation: none;
-  }
-
   @media (forced-colors: active) {
     /* 系统色接管内容边界；装饰顶光在这一档没有额外信息。两颗按钮的强制色由家族配方给 */
     [data-scope='popconfirm'][data-part='content'] {

package/css/popover.css

@@ -8,6 +8,7 @@
 /* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
 @import '../family/motion.css';
 @import '../family/action-control.css';
+@import '../family/material.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -61,6 +62,26 @@
     --xh-_overlay-enter-left: 1;
   }
 
+  /* 交叉轴原点按对齐取：start / end 对齐时面板与锚点在那一端齐平，缩放从那一端涨开，贴着小触发器的面板
+     才像是从触发器里长出来；居中对齐留在中线。上下两侧的 start / end 是行内轴上的逻辑对齐，RTL 下起始缘在右；
+     左右两侧的 start / end 落在块轴上，不随书写方向翻 */
+  /* 起始缘与末尾缘按就近的书写方向取：LTR 起始在左，RTL 起始在右 */
+  [data-scope='popover'][data-part='positioner']:is([data-placement='top-start'], [data-placement='bottom-start']) {
+    --xh-_overlay-origin-x: var(--xh-direction-start);
+  }
+
+  [data-scope='popover'][data-part='positioner']:is([data-placement='top-end'], [data-placement='bottom-end']) {
+    --xh-_overlay-origin-x: var(--xh-direction-end);
+  }
+
+  [data-scope='popover'][data-part='positioner']:is([data-placement='left-start'], [data-placement='right-start']) {
+    --xh-_overlay-origin-y: 0;
+  }
+
+  [data-scope='popover'][data-part='positioner']:is([data-placement='left-end'], [data-placement='right-end']) {
+    --xh-_overlay-origin-y: 100%;
+  }
+
   /*
    * 触发器是页面上的独立文字按钮：盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
    * 由家族配方按连接层投影的 data-xh-action-variant / -size 给出。皮肤没有自己的外观规则，
@@ -76,6 +97,14 @@
   }
 
   [data-scope='popover'][data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-popover-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-popover-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-popover-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-popover-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-popover-backdrop, var(--xh-_material-backdrop));
+
     /* 作者塞进面板里的图标按控件档取；关闭钮另由家族配方按 sm 档下发字形尺 */
     --xh-icon-size: var(--xh-popover-icon-size, var(--xh-glyph-size-md));
 
@@ -98,20 +127,7 @@
     overscroll-behavior: contain;
     padding-block: var(--xh-popover-py, var(--xh-_popover-pad));
     padding-inline: var(--xh-popover-px, var(--xh-_popover-pad));
-    border: var(--xh-stroke-thin) solid var(--xh-popover-border, var(--xh-material-frosted-border));
     border-radius: var(--xh-popover-radius, var(--xh-shape-overlay));
-    /* 顶光只占内侧一像素；透明 tint 是底层，正文自己保持不透明。 */
-    background:
-      linear-gradient(
-        to bottom,
-        var(--xh-material-frosted-highlight) 0 var(--xh-stroke-thin),
-        transparent var(--xh-stroke-thin)
-      ),
-      var(--xh-popover-bg, var(--xh-material-frosted-bg));
-    color: var(--xh-popover-fg, var(--xh-material-frosted-fg));
-    box-shadow: var(--xh-popover-shadow, var(--xh-material-frosted-shadow));
-    -webkit-backdrop-filter: var(--xh-popover-backdrop, var(--xh-material-frosted-backdrop));
-    backdrop-filter: var(--xh-popover-backdrop, var(--xh-material-frosted-backdrop));
     pointer-events: auto;
     /* 进退场的缩放锚在贴着锚点的那条边上；两个分量由 positioner 按 placement 写进私有槽 */
     transform-origin: var(--xh-_overlay-origin-x, 50%) var(--xh-_overlay-origin-y, 50%);
@@ -127,7 +143,8 @@
     outline: none;
   }
 
-  [data-scope='popover'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='popover'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -240,4 +257,23 @@
       display: none;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='popover'][data-part='close-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='popover'][data-part='close-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='popover'][data-part='close-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/progress.css

@@ -8,13 +8,26 @@
 @layer xihan.motion {
   /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
      动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  /* 固定宽度的一段从轨道行首外扫到行尾外：只动 translate，不动布局。
+     百分比参照这一段自身的宽度（轨道的 40%），RTL 下两端由私有槽换号 */
   @keyframes xh-progress-indeterminate {
     from {
-      inset-inline-start: -40%;
+      translate: var(--xh-_progress-sweep-from, -100%) 0;
     }
 
     to {
-      inset-inline-start: 100%;
+      translate: var(--xh-_progress-sweep-to, 250%) 0;
+    }
+  }
+
+  /* 条纹沿行向流动：每轮挪过一整格纹理，首尾两帧的图案重合，循环无缝。RTL 下行尾在左，位移随方向符号翻转 */
+  @keyframes xh-progress-stripes {
+    from {
+      background-position: 0 0;
+    }
+
+    to {
+      background-position: calc(var(--xh-_progress-stripe-size) * var(--xh-direction-sign)) 0;
     }
   }
 }
@@ -30,11 +43,17 @@
   [data-scope='progress'][data-part='root'] {
     --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-thickness));
 
+    /* 目标刻度与环形的刻度值按根落位 */
+    position: relative;
     display: inline-block;
     inline-size: 100%;
   }
 
+  /* 线形轨道把填充放在交叉轴正中：子弹图的填充比轨道窄，压在色带正中 */
   [data-scope='progress'][data-part='track'] {
+    position: relative;
+    display: flex;
+    align-items: center;
     overflow: hidden;
     inline-size: 100%;
     block-size: var(--xh-_progress-thickness);
@@ -45,10 +64,73 @@
   /* 语气槽由 root 上的 data-tone 声明、经继承发下来；没写 data-tone 时退回原来的品牌色。
      轨道不跟着换族：只有已完成的那段换色，底槽保持中性才读得出"完成了多少"。 */
   [data-scope='progress'][data-part='range'] {
-    block-size: 100%;
+    /* 填充铺满轨道，按未完成的比例往行首平移、由轨道裁掉：进度变化只走合成，不重排也不重绘。
+       露出来的前端保留自己的圆角，行首那一侧由轨道的圆角裁出 */
+    /* 定位后才压得住同在轨道里的色带 */
+    position: relative;
+    flex: none;
+    inline-size: 100%;
+    block-size: var(--xh-_progress-range-size, 100%);
     border-radius: var(--xh-progress-range-radius, var(--xh-shape-pill));
     background: var(--xh-progress-range, var(--xh-_tone, var(--xh-bg-brand)));
-    transition: inline-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous);
+    translate: calc((var(--xh-_progress-value, 0) - 1) * 100%) 0;
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* translate 只认物理方向：RTL 下行首在右边，平移与不定进度的扫向一起翻转 */
+  [data-scope='progress'][data-part='range'][data-variant='line']:dir(rtl) {
+    --xh-_progress-sweep-from: 100%;
+    --xh-_progress-sweep-to: -250%;
+
+    translate: calc((1 - var(--xh-_progress-value, 0)) * 100%) 0;
+  }
+
+  /* —— 线形的三样外观：分段、条纹与缓冲 —— */
+  /* 分段：遮罩把轨道切成等宽的格，格间留一道间隙，填充、缓冲与色带随轨道一起被切开。
+     周期是（全长 + 一道间隙）÷ 格数，最后一格恰好收在行尾，图案左右对称，RTL 下不必翻转 */
+  [data-scope='progress'][data-part='track'][data-stepped] {
+    --xh-_progress-step-gap: var(--xh-progress-step-gap, var(--xh-space-0_5));
+    --xh-_progress-step-period: calc((100% + var(--xh-_progress-step-gap)) / var(--xh-_progress-steps, 1));
+    --xh-_progress-step-mask: repeating-linear-gradient(
+      to right,
+      black 0 calc(var(--xh-_progress-step-period) - var(--xh-_progress-step-gap)),
+      transparent 0 var(--xh-_progress-step-period)
+    );
+
+    -webkit-mask-image: var(--xh-_progress-step-mask);
+    mask-image: var(--xh-_progress-step-mask);
+  }
+
+  /* 条纹：填充上铺一层 45° 斜纹，颜色取填充同族更深一档。纹理是正方形平铺，45° 才能首尾相接；
+     RTL 下斜向随方向符号镜像 */
+  [data-scope='progress'][data-part='range'][data-striped] {
+    --xh-_progress-stripe: var(--xh-progress-stripe-color, var(--xh-_tone-active, var(--xh-bg-brand-active)));
+    --xh-_progress-stripe-size: var(--xh-progress-stripe-size, var(--xh-space-4));
+
+    background-image: linear-gradient(
+      calc(45deg * var(--xh-direction-sign)),
+      var(--xh-_progress-stripe) 25%,
+      transparent 25% 50%,
+      var(--xh-_progress-stripe) 50% 75%,
+      transparent 75%
+    );
+    background-size: var(--xh-_progress-stripe-size) var(--xh-_progress-stripe-size);
+  }
+
+  /* 只在进行中流动：完成了就停下；进度未知时整段已在往复扫，不再叠一层流动 */
+  [data-scope='progress'][data-part='range'][data-striped][data-state='loading'] {
+    animation: xh-progress-stripes var(--xh-progress-stripe-duration, var(--xh-motion-loop-shimmer)) var(--xh-motion-ease-loop) infinite;
+  }
+
+  /* 缓冲段与填充同一种画法：铺满轨道、按缓冲比例往行首平移、由轨道裁掉，只走合成。
+     颜色取填充那一族的淡色，排在填充之前、被它压住。物理方向的平移量乘方向符号，RTL 下往右收 */
+  [data-scope='progress'][data-part='buffer'] {
+    position: absolute;
+    inset: 0;
+    border-radius: var(--xh-progress-buffer-radius, var(--xh-progress-range-radius, var(--xh-shape-pill)));
+    background: var(--xh-progress-buffer, var(--xh-_tone-subtle-active));
+    translate: calc((var(--xh-_progress-buffer, 0) - 1) * 100% * var(--xh-direction-sign)) 0;
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
   /* —— 尺寸 —— */
@@ -113,11 +195,157 @@
   [data-scope='progress'][data-part='range'][data-variant='dashboard'] {
     stroke: var(--xh-progress-range, var(--xh-_tone, var(--xh-bg-brand)));
     stroke-linecap: var(--xh-progress-linecap, round);
-    transition: stroke-dashoffset var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+    /* 环形的走完多少由虚线偏移表达，线形那一套按比例的平移在这里归零：SVG 图元的百分比平移按整个 viewBox 算，会把整段弧挪出画面 */
+    translate: none;
+    transition: stroke-dashoffset var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* —— 量的刻画：分段色带、目标刻度、量程刻度与指针 —— */
+  /* 子弹图：有分段时轨道加厚一档，填充收窄成中间一条压在色带上，色带在填充两侧照样读得出。
+     三档厚度各比普通线形高一档，阶梯次序不变 */
+  [data-scope='progress'][data-part='root'][data-variant='line'][data-banded] {
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-3));
+    --xh-_progress-range-size: 50%;
   }
 
-  /* 进度未知：线形条改为一小段来回扫。宽度交给动画，连接层算出的 inline-size 与
-     那条过渡都得让开，否则每帧都在跟动画抢同一个属性 */
+  [data-scope='progress'][data-part='root'][data-variant='line'][data-banded][data-size='sm'] {
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-2));
+  }
+
+  [data-scope='progress'][data-part='root'][data-variant='line'][data-banded][data-size='lg'] {
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-4));
+  }
+
+  /* 色带取本段语气的淡色：同一族颜色里填充是实色、色带浅一档，读得出填充落在哪一段 */
+  [data-scope='progress'][data-part='threshold'] {
+    --xh-_progress-threshold: var(--xh-progress-threshold-color, var(--xh-_tone-subtle-active));
+  }
+
+  [data-scope='progress'][data-part='threshold'][data-variant='line'] {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--xh-_progress-from, 0) * 100%);
+    inline-size: calc((var(--xh-_progress-to, 0) - var(--xh-_progress-from, 0)) * 100%);
+    background: var(--xh-_progress-threshold);
+  }
+
+  [data-scope='progress'][data-part='threshold'][data-variant='circle'],
+  [data-scope='progress'][data-part='threshold'][data-variant='dashboard'] {
+    stroke: var(--xh-_progress-threshold);
+  }
+
+  /* 目标刻度：一道竖线横穿轨道、上下各探出一点，读者一眼看出离目标还差多少 */
+  [data-scope='progress'][data-part='target'] {
+    --xh-_progress-target: var(--xh-progress-target-color, var(--xh-fg-default));
+  }
+
+  [data-scope='progress'][data-part='target'][data-variant='line'] {
+    position: absolute;
+    inset-block-start: calc(-1 * var(--xh-space-1));
+    inset-inline-start: calc(var(--xh-_progress-at, 0) * 100%);
+    inline-size: var(--xh-stroke-thick);
+    block-size: calc(var(--xh-_progress-thickness) + 2 * var(--xh-space-1));
+    border-radius: var(--xh-progress-target-radius, var(--xh-shape-pill));
+    background: var(--xh-_progress-target);
+    translate: -50% 0;
+  }
+
+  [data-scope='progress'][data-part='target'][data-variant='line']:dir(rtl) {
+    translate: 50% 0;
+  }
+
+  [data-scope='progress'][data-part='target'][data-variant='circle'],
+  [data-scope='progress'][data-part='target'][data-variant='dashboard'] {
+    stroke: var(--xh-_progress-target);
+    stroke-width: var(--xh-stroke-thick);
+    stroke-linecap: round;
+    vector-effect: non-scaling-stroke;
+  }
+
+  /* 量程刻度：图表家具，线与字都取图表的标注色，数字等宽，不随进度的语气换色 */
+  [data-scope='progress'][data-part='scale'] {
+    color: var(--xh-chart-label);
+    font-size: var(--xh-text-caption-size);
+    font-variant-numeric: tabular-nums;
+    line-height: var(--xh-leading-tight);
+    pointer-events: none;
+  }
+
+  [data-scope='progress'][data-part='scale'][data-variant='line'] {
+    position: relative;
+    block-size: calc(var(--xh-chart-tick-length) + var(--xh-chart-label-gap) + var(--xh-text-caption-size) * var(--xh-leading-tight));
+    margin-block-start: var(--xh-space-1);
+  }
+
+  [data-scope='progress'][data-part='scale-tick'][data-variant='line'] {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(var(--xh-_progress-at, 0) * 100%);
+    inline-size: var(--xh-stroke-thin);
+    block-size: var(--xh-chart-tick-length);
+    background: var(--xh-chart-axis);
+    translate: -50% 0;
+  }
+
+  [data-scope='progress'][data-part='scale-tick'][data-variant='line']:dir(rtl) {
+    translate: 50% 0;
+  }
+
+  /* 两端的刻度值贴着轨道两端对齐，中间的居中在刻度线上：连接层给出对齐比例 */
+  [data-scope='progress'][data-part='scale-label'][data-variant='line'] {
+    position: absolute;
+    inset-block-start: calc(var(--xh-chart-tick-length) + var(--xh-chart-label-gap));
+    inset-inline-start: calc(var(--xh-_progress-at, 0) * 100%);
+    white-space: nowrap;
+    translate: calc(var(--xh-_progress-label-align) * -100%) 0;
+  }
+
+  [data-scope='progress'][data-part='scale-label'][data-variant='line']:dir(rtl) {
+    translate: calc(var(--xh-_progress-label-align) * 100%) 0;
+  }
+
+  [data-scope='progress'][data-part='scale-tick'][data-variant='circle'],
+  [data-scope='progress'][data-part='scale-tick'][data-variant='dashboard'] {
+    stroke: var(--xh-chart-axis);
+    stroke-width: var(--xh-stroke-thin);
+    vector-effect: non-scaling-stroke;
+  }
+
+  /* 环形的刻度值叠在环上：与画面同一格，按连接层给出的百分比坐标落位。环形不随 RTL 镜像 */
+  [data-scope='progress'][data-part='scale'][data-variant='circle'],
+  [data-scope='progress'][data-part='scale'][data-variant='dashboard'] {
+    position: relative;
+    grid-area: 1 / 1;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  [data-scope='progress'][data-part='scale-label'][data-variant='circle'],
+  [data-scope='progress'][data-part='scale-label'][data-variant='dashboard'] {
+    position: absolute;
+    inset-block-start: var(--xh-_progress-y, 50%);
+    /* stylelint-disable-next-line property-disallowed-list -- 环形不随 RTL 镜像，刻度值横坐标由连接层按物理左缘写入 */
+    left: var(--xh-_progress-x, 50%);
+    white-space: nowrap;
+    translate: -50% -50%;
+  }
+
+  /* 仪表盘的指针：朝 3 点钟画好，按当前值的角度绕环心转过去。转动是数值变化，不是部件原地形变：
+     与圆弧填充同一档时长与曲线，同一次值变化两者一起起步一起落定 */
+  [data-scope='progress'][data-part='needle'] {
+    fill: var(--xh-progress-needle-color, var(--xh-fg-default));
+    transform-box: view-box;
+    transform-origin: 50% 50%;
+    rotate: var(--xh-_progress-needle-angle, 0deg);
+    transition: rotate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* 指针从环心伸出：环心内容让到缺口那一侧 */
+  [data-scope='progress'][data-part='label'][data-indicator='needle'] {
+    align-self: end;
+  }
+
+  /* 进度未知：线形条改为固定宽度的一小段来回扫，位移交给动画，按比例的平移与它的过渡让开 */
   [data-scope='progress'][data-part='track'][data-state='indeterminate'] {
     position: relative;
     overflow: hidden;
@@ -125,9 +353,10 @@
 
   [data-scope='progress'][data-part='range'][data-state='indeterminate'] {
     position: absolute;
+    inset-inline-start: 0;
     inline-size: 40%;
     transition: none;
-    animation: xh-progress-indeterminate var(--xh-progress-indeterminate-duration, var(--xh-shimmer-duration)) var(--xh-motion-ease-loop) infinite;
+    animation: xh-progress-indeterminate var(--xh-progress-indeterminate-duration, var(--xh-motion-loop-shimmer)) var(--xh-motion-ease-loop) infinite;
   }
 
   /* 减弱动效档：不来回扫，改成一条铺满的静态条——进度仍然未知，只是不再动。
@@ -137,6 +366,12 @@
       position: static;
       inline-size: 100%;
       opacity: 0.5;
+      translate: none;
+      animation: none;
+    }
+
+    /* 条纹留着、不再流动：纹理本身是静态的非颜色通道 */
+    [data-scope='progress'][data-part='range'][data-striped][data-state='loading'] {
       animation: none;
     }
   }
@@ -145,10 +380,15 @@
     position: static;
     inline-size: 100%;
     opacity: 0.5;
+    translate: none;
     animation: none;
   }
 
-  /* 零进度：圆角端点会在长度为 0 处画出一个圆点，收掉它 */
+  :where([data-motion='reduce']) [data-scope='progress'][data-part='range'][data-striped][data-state='loading'] {
+    animation: none;
+  }
+
+  /* 零进度：整段不画，从零起步的那一帧也不留一粒圆点 */
   [data-scope='progress'][data-part='range'][data-empty] {
     visibility: hidden;
   }
@@ -156,7 +396,20 @@
 
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
-  [data-scope='progress'][data-part='root'][hidden] {
+  [data-scope='progress'][data-part='root'][hidden],
+  [data-scope='progress'][data-part='track'][hidden] {
+    display: none;
+  }
+
+  /* 指针档由指针指出当前值，弧上的填充收起、只留色带 */
+  [data-scope='progress'][data-part='range'][data-indicator='needle'] {
+    display: none;
+  }
+
+  /* SVG 里的部件不吃 UA 的 [hidden] 规则：作者自己写的目标刻度、指针在不适用时得自己收 */
+  [data-scope='progress'][data-part='target'][hidden],
+  [data-scope='progress'][data-part='scale'][hidden],
+  [data-scope='progress'][data-part='needle'][hidden] {
     display: none;
   }
 
@@ -186,6 +439,46 @@
     [data-scope='progress'][data-part='range'][data-variant='dashboard'] {
       stroke: Highlight;
     }
+
+    /* 色带在这一档里只剩分界：线形每段末端画一道灰线，环形的色带退掉，分段名仍由读屏文字给出 */
+    [data-scope='progress'][data-part='threshold'][data-variant='line'] {
+      forced-color-adjust: none;
+      border-inline-end: var(--xh-stroke-thin) solid GrayText;
+      background: Canvas;
+    }
+
+    [data-scope='progress'][data-part='threshold'][data-variant='circle'],
+    [data-scope='progress'][data-part='threshold'][data-variant='dashboard'] {
+      stroke: transparent;
+    }
+
+    [data-scope='progress'][data-part='target'][data-variant='line'],
+    [data-scope='progress'][data-part='scale-tick'][data-variant='line'] {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+
+    [data-scope='progress'][data-part='target'][data-variant='circle'],
+    [data-scope='progress'][data-part='target'][data-variant='dashboard'],
+    [data-scope='progress'][data-part='scale-tick'][data-variant='circle'],
+    [data-scope='progress'][data-part='scale-tick'][data-variant='dashboard'] {
+      stroke: CanvasText;
+    }
+
+    [data-scope='progress'][data-part='needle'] {
+      fill: CanvasText;
+    }
+
+    /* 条纹在这一档里退掉：填充整段取高亮色才读得出走到哪儿，斜纹会把它切碎 */
+    [data-scope='progress'][data-part='range'][data-striped] {
+      background-image: none;
+    }
+
+    /* 缓冲段取灰：与底槽的 Canvas、填充的高亮色三者分得开 */
+    [data-scope='progress'][data-part='buffer'] {
+      forced-color-adjust: none;
+      background: GrayText;
+    }
   }
 
   @media print {
@@ -197,6 +490,11 @@
       position: static;
       inline-size: 100%;
       opacity: 0.5;
+      translate: none;
+      animation: none;
+    }
+
+    [data-scope='progress'][data-part='range'][data-striped][data-state='loading'] {
       animation: none;
     }
   }