@xihan-ui/styles 2.1.0 → 3.1.0

package/css/layout.css

@@ -18,7 +18,7 @@
      缺哪一段，对应的行/列就没有条目，宽高自动收成 0，不必为"少写一段"另立规则。
 
      侧栏两档宽度与头的高度声明在根上：各段自己读这些槽，换档只改这里。
-     宽度槽用 -w 缩写，与同处的 --xh-layout-header-h 一致。
+     宽度槽用 -w 缩写，与同处的 --xh-layout-header-h 一致；两档宽度的缺省取侧栏令牌 --xh-sider-w / --xh-sider-collapsed-w。
      头的高度之所以也归到根上：头吸顶时头这一行的轨道要按同一个值定高，两处必须同源。 */
   [data-scope='layout'][data-part='root'] {
     display: grid;
@@ -30,9 +30,9 @@
     grid-template-rows: auto minmax(0, 1fr) auto;
     background: var(--xh-layout-bg, var(--xh-bg-page));
     color: var(--xh-layout-fg, var(--xh-fg-default));
-    --xh-_layout-sider-expanded-w: var(--xh-layout-sider-w, 15rem);
+    --xh-_layout-sider-expanded-w: var(--xh-layout-sider-w, var(--xh-sider-w));
     --xh-_layout-sider-w: var(--xh-_layout-sider-expanded-w);
-    --xh-_layout-sider-collapsed-w: var(--xh-layout-sider-collapsed-w, 4rem);
+    --xh-_layout-sider-collapsed-w: var(--xh-layout-sider-collapsed-w, var(--xh-sider-collapsed-w));
     --xh-_layout-header-h: var(--xh-layout-header-h, 3.5rem);
     /* 侧栏吸附时钉在哪条线上：缺省贴滚动容器上沿，头也吸顶时改成让开头的高度 */
     --xh-_layout-sider-offset: 0px;
@@ -97,13 +97,15 @@
   [data-scope='layout'][data-part='sider'] {
     --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
     --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
+    /* 内衬缺省一档，装了 SideNav 的侧栏在下面归零；覆盖档与安全区取大时读的也是这一支 */
+    --xh-_layout-sider-padding: var(--xh-space-3);
 
     grid-area: sider;
     inline-size: var(--xh-_layout-sider-w);
     overflow: hidden;
-    padding: var(--xh-layout-sider-padding, var(--xh-space-3));
+    padding: var(--xh-layout-sider-padding, var(--xh-_layout-sider-padding));
     background: var(--xh-layout-sider-bg, var(--xh-bg-subtle));
-    transition: inline-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous);
+    transition: inline-size var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
   /* 折起来时不换行：窄到放不下的那几个字直接被 overflow 裁掉，不会挤成一列竖排 */
@@ -112,6 +114,19 @@
     white-space: nowrap;
   }
 
+  /* 侧栏里装着 SideNav 时内衬缺省归零：SideNav 自带一圈内衬，宽度又与侧栏同取侧栏令牌，
+     再叠一圈侧栏内衬，导航就比侧栏的内容盒宽出两侧内衬、右缘被裁掉。
+     认后代而不是子代：Web Components 在侧栏与导航根之间隔着 <xh-side-nav> 宿主。
+     不认 :has() 的引擎（Firefox 121 以前）照旧留内衬，导航右缘被裁，与改动前一致 */
+  [data-scope='layout'][data-part='sider']:has([data-scope='side-nav'][data-part='root']) {
+    --xh-_layout-sider-padding: 0;
+  }
+
+  /* 侧栏里的 SideNav 跟着侧栏收放：侧栏这一次开合直接落位（首帧、跨过断点）时，导航的宽度同样直接落位 */
+  [data-scope='layout'][data-part='sider'][data-instant] [data-scope='side-nav'][data-part='root'] {
+    transition: none;
+  }
+
   [data-scope='layout'][data-part='content'] {
     grid-area: content;
     /* 内容列已是 minmax(0, 1fr)，这里再声明一次，宽表格与长串文本才撑不破列 */
@@ -189,6 +204,23 @@
     inset-block-start: 0;
   }
 
+  /* liquid 档：吸顶的顶栏是内容从下面滚过的导航层，换成液态面。贴边铺满的栏不取圆角，
+     边界由下沿那条墨色细线承担。液态面是墨色域，前景在这里按域重取，子孙跟着继承。
+     滚过深浅分界时色调翻转：底色、字色、细线与投影一起淡变，不在同一帧跳 */
+  :where([data-material='liquid']) [data-scope='layout'][data-part='header'][data-fixed][data-xh-liquid] {
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-layout-border, var(--xh-material-liquid-border));
+    background: var(--xh-layout-header-bg, var(--xh-_liquid-bg));
+    color: var(--xh-material-liquid-fg);
+    box-shadow: var(--xh-_liquid-shadow);
+    -webkit-backdrop-filter: var(--xh-material-liquid-backdrop);
+    backdrop-filter: var(--xh-material-liquid-backdrop);
+    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),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
   /* 头也吸顶时侧栏钉在头的下沿，两段不叠在一起 */
   [data-scope='layout'][data-part='root'][data-header-fixed][data-sider-fixed] {
     --xh-_layout-sider-offset: var(--xh-_layout-header-h);
@@ -215,10 +247,10 @@
      参照的是视口，与上面 sticky 那条同一个注意事项：整副骨架装进带 transform / filter 的祖先里时，
      固定定位的包含块会换成那个祖先，面板跟着一起滚。 */
   [data-scope='layout'][data-part='sider'][data-presentation='sheet'] {
-    /* 位移方向的私有槽位：默认按行首 + LTR，行尾与 RTL 在下面翻符号。
-       写成槽位而不是写死 ±100%：贴边用的是逻辑 inset，RTL 下行首落在物理右边，
+    /* 位移方向的私有槽位：默认按行首 + LTR，行尾与 RTL 在下面翻符号。幅度取整幅位移令牌，
+       减弱动效下归零。写成槽位而不是写死物理方向：贴边用的是逻辑 inset，RTL 下行首落在物理右边，
        位移若写死物理方向就会出现「贴在右边、却从左边滑进来」 */
-    --xh-_layout-sheet-shift: -100%;
+    --xh-_layout-sheet-shift: calc(-1 * var(--xh-motion-travel));
     /* 这一档的底是 elevated 白底：交互阶梯按承载面走，把上面占位档下发的 200 → 300 写回
        白底的 hover 100 → pressed 200 */
     --xh-action-host-bg-hover: var(--xh-bg-subtle);
@@ -238,10 +270,10 @@
     /* 贴死视口的那一档，内衬与安全区取大的一头：刘海、圆角与底部横条压住的那一段由系统给出。
        桌面上 env() 恒为 0，取值与内衬槽完全一致。安全区只有物理方向的四个名字，
        行内轴上两侧同取较宽的那一段，RTL 下不会翻错边 */
-    padding-block-start: max(var(--xh-layout-sider-padding, var(--xh-space-3)), env(safe-area-inset-top));
-    padding-block-end: max(var(--xh-layout-sider-padding, var(--xh-space-3)), env(safe-area-inset-bottom));
+    padding-block-start: max(var(--xh-layout-sider-padding, var(--xh-_layout-sider-padding)), env(safe-area-inset-top));
+    padding-block-end: max(var(--xh-layout-sider-padding, var(--xh-_layout-sider-padding)), env(safe-area-inset-bottom));
     padding-inline: max(
-      var(--xh-layout-sider-padding, var(--xh-space-3)),
+      var(--xh-layout-sider-padding, var(--xh-_layout-sider-padding)),
       env(safe-area-inset-left),
       env(safe-area-inset-right)
     );
@@ -256,16 +288,19 @@
        overscroll 不在这里写 contain：这一面与占位档共用同一个部件，scroll-surface-registry 把侧栏整体登记为
        页内结构容器（overscroll=false），门禁按整个部件核，不按档分 */
     overflow-y: auto;
-    /* 推出来与收进去是同一段行程，视口尺度的位移走 slide 档。
-       visibility 与它同拍：收起那一路等位移播完才真正藏起来，展开那一路立刻露出来 */
+    /* 推出来走 slide 档：视口尺度的位移。并列的不透明度取淡变档：
+       缺省两端都是不透明、看不出来，减弱动效下整幅位移归零、由它表达进出。
+       visibility 展开那一路立刻露出来 */
+    opacity: 1;
     transition:
       translate var(--xh-motion-duration-slide) var(--xh-motion-ease-slide),
+      opacity var(--xh-motion-duration-enter) var(--xh-motion-ease-enter),
       visibility var(--xh-motion-duration-slide) var(--xh-motion-ease-slide);
   }
 
   /* 挂在行尾：贴另一条边，位移随之反向，描边也换到贴着内容的那一侧 */
   [data-scope='layout'][data-part='sider'][data-presentation='sheet'][data-placement='end'] {
-    --xh-_layout-sheet-shift: 100%;
+    --xh-_layout-sheet-shift: var(--xh-motion-travel);
 
     inset-inline-start: auto;
     inset-inline-end: 0;
@@ -274,18 +309,24 @@
   }
 
   [data-scope='layout'][data-part='sider'][data-presentation='sheet']:dir(rtl) {
-    --xh-_layout-sheet-shift: 100%;
+    --xh-_layout-sheet-shift: var(--xh-motion-travel);
   }
 
   [data-scope='layout'][data-part='sider'][data-presentation='sheet'][data-placement='end']:dir(rtl) {
-    --xh-_layout-sheet-shift: -100%;
+    --xh-_layout-sheet-shift: calc(-1 * var(--xh-motion-travel));
   }
 
   /* 收起：推出画外并让出无障碍树与 Tab 序列。位移量按面板自身宽度的百分比算，
-     宽度换成任何一档都正好推到画外 */
+     宽度换成任何一档都正好推到画外。收进去是退场，位移与淡出同走退场档，
+     visibility 等这一段播完才真正藏起来；减弱动效下位移归零，只剩淡出 */
   [data-scope='layout'][data-part='sider'][data-presentation='sheet'][data-collapsed] {
     translate: var(--xh-_layout-sheet-shift) 0;
+    opacity: var(--xh-motion-travel-opacity);
     visibility: hidden;
+    transition:
+      translate var(--xh-motion-duration-exit) var(--xh-motion-ease-exit),
+      opacity var(--xh-motion-duration-exit) var(--xh-motion-ease-exit),
+      visibility var(--xh-motion-duration-exit) var(--xh-motion-ease-exit);
   }
 
   /* 覆盖档的遮罩：与面板同一个层号，谁盖谁看文档序——遮罩写在侧栏之前。
@@ -299,10 +340,19 @@
     transition: opacity var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
 
-  /* 收起态：淡出并让开指针，底下的内容照常点得到 */
+  /* 收起态：淡出并让开指针，底下的内容照常点得到；淡出走退场档 */
   [data-scope='layout'][data-part='sider-backdrop'][data-collapsed] {
     opacity: 0;
     pointer-events: none;
+    transition: opacity var(--xh-motion-duration-exit) var(--xh-motion-ease-exit);
+  }
+
+  /* 侧栏与遮罩的过渡只给用户的开合：首帧与跨过断点这类环境引起的开合，连接层投影 data-instant，
+     直接落位。三条各压过同一部件上带过渡的那一档（占位 / 覆盖展开、覆盖收起、遮罩收起） */
+  [data-scope='layout']:is([data-part='sider'], [data-part='sider-backdrop'])[data-instant],
+  [data-scope='layout'][data-part='sider'][data-presentation='sheet'][data-collapsed][data-instant],
+  [data-scope='layout'][data-part='sider-backdrop'][data-collapsed][data-instant] {
+    transition: none;
   }
 
   /* 纸上没有覆盖这回事：遮罩印出来就是盖住正文的一片灰 */

package/css/liquid.css

@@ -0,0 +1,106 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/*
+ * 液态材质层：与组件无关，全库共用一份。
+ *
+ * data-material="liquid" 下，连接层投影了 data-xh-liquid 的导航层部件（浮动钮、回到顶部等浮在内容之上的控制面）
+ * 换成液态面。这里只声明私有槽，各组件皮肤在自己的部件上把 Action Control 的桥接槽指过来；standard 档下
+ * 这些槽没人读，部件保持原材质。
+ *
+ * 静态形态（服务端、挂载前，或液态面还没判定下层）：色调随主题极性，不透明度取可读下限，这一档对任何
+ * 下层都保证标签 4.5:1。组件的状态机把部件挂进 core 的液态面，由它按下层在部件上写：
+ *   data-xh-ink              dark / light：部件成为黑墨或白墨域。墨色域本身是浅色 / 深色主题边界，
+ *                            按主题取值的液态通道随之落到那一种色调
+ *   data-xh-liquid-clarity   clear：下层均匀且色调已知，换通透档
+ *   --xh-_liquid-light-x / -y 光源方向的单位向量，决定 1px 亮边落在哪一侧
+ *   --xh-_liquid-deform      按住时的形变（transform 串），松手弹回后撤掉
+ *
+ * 同一宿主里的几块可以结成液态组（core 的 trackLiquidGoo）：宿主带 data-xh-liquid-goo，最前面多一层
+ * [data-xh-liquid-goo-layer] 色块层，沿整组的外形画底色、墨色细线、亮边与投影；组件皮肤在这一档把块自己的
+ * 面、细线、亮边与投影撤掉，只留磨砂。
+ */
+@layer xihan.components {
+  :where([data-material='liquid']) [data-xh-liquid] {
+    /* 光源缺省在左上方 */
+    --xh-_liquid-light-x: -0.71;
+    --xh-_liquid-light-y: -0.71;
+    --xh-_liquid-bg: var(--xh-material-liquid-bg);
+    /* 1px 亮边是两层零模糊内阴影：阴影形状朝背光方向偏移，露出的一弯落在朝光源的一侧，
+       另一层反过来偏移，在背光一侧留一道弱亮边。面内不加高光 */
+    --xh-_liquid-rim:
+      inset calc(var(--xh-_liquid-light-x) * var(--xh-stroke-thin) * -1) calc(var(--xh-_liquid-light-y) * var(--xh-stroke-thin) * -1) 0 0 var(--xh-material-liquid-highlight),
+      inset calc(var(--xh-_liquid-light-x) * var(--xh-stroke-thin)) calc(var(--xh-_liquid-light-y) * var(--xh-stroke-thin)) 0 0 var(--xh-material-liquid-rim-far);
+    --xh-_liquid-shadow: var(--xh-_liquid-rim), var(--xh-material-liquid-shadow);
+    /* 交互阶梯往部件自己的前景色兑：浅色调变深、深色调变浅 */
+    --xh-_liquid-bg-hover: color-mix(in oklab, var(--xh-_liquid-bg), var(--xh-material-liquid-fg) 8%);
+    --xh-_liquid-bg-pressed: color-mix(in oklab, var(--xh-_liquid-bg), var(--xh-material-liquid-fg) 14%);
+    /* 按住时的黏滞形变：液态面在手指按住期间逐帧写进来（朝手指鼓出、沿指向拉长、另一个方向压扁），
+       松手由弹簧带回后撤掉；组件皮肤拿它当 transform。没按住时为 none */
+    --xh-_liquid-deform: none;
+  }
+
+  /* 通透档：下层均匀且色调已知时由液态面写上，着色按主题取值，已随墨色域落到对应色调 */
+  :where([data-material='liquid']) [data-xh-liquid][data-xh-liquid-clarity='clear'] {
+    --xh-_liquid-bg: color-mix(in oklab, var(--xh-material-liquid-tint) calc(var(--xh-material-liquid-alpha-clear) * 100%), transparent);
+  }
+
+  /* 液态组的色块层：core 在宿主最前面生成（aria-hidden、不接指针），压在各块之下，每块一个色块，
+     跟着块的盒子、圆角与变换走。色块层套 core 放在它旁边的粘连滤镜（行内 filter），滤镜只取色块的轮廓，
+     把靠得够近的连成一片，再沿整体外形画液态面：投影、底色、墨色细线、朝光亮边与背光弱亮边，颜色都在下面
+     按段取液态令牌，投影由色块自己带着、滤镜只留外形之外的那部分。色调（墨色域）与通透档由 core 按源块的
+     读数同步到色块层与装滤镜的 <svg> 上。
+     色块层不设层号，靠排在宿主最前压在各块之下：宿主须是定位元素，组里的块须是定位元素（或装在定位容器里）。
+     层往外多铺一圈，给模糊与投影留出余地。组件可以在自己的宿主上改写投影槽，把使用者的投影槽接进来 */
+  [data-xh-liquid-goo-layer] {
+    --xh-_liquid-goo-shadow: var(--xh-material-liquid-shadow);
+
+    position: absolute;
+    inset: calc(-1 * var(--xh-space-8));
+    pointer-events: none;
+  }
+
+  /* 色块提供轮廓与投影，底色由滤镜铺 */
+  [data-xh-liquid-goo-layer] > span {
+    position: absolute;
+    box-sizing: border-box;
+    background-color: var(--xh-material-liquid-tint);
+    box-shadow: var(--xh-_liquid-goo-shadow);
+  }
+
+  [data-xh-liquid-goo-filter] [data-xh-goo-paint='fill'] {
+    flood-color: var(--xh-material-liquid-tint);
+    flood-opacity: var(--xh-material-liquid-alpha-floor);
+  }
+
+  [data-xh-liquid-goo-filter][data-xh-liquid-clarity='clear'] [data-xh-goo-paint='fill'] {
+    flood-opacity: var(--xh-material-liquid-alpha-clear);
+  }
+
+  [data-xh-liquid-goo-filter] [data-xh-goo-paint='edge'] {
+    flood-color: var(--xh-material-liquid-border);
+  }
+
+  [data-xh-liquid-goo-filter] [data-xh-goo-paint='near'] {
+    flood-color: var(--xh-material-liquid-highlight);
+  }
+
+  [data-xh-liquid-goo-filter] [data-xh-goo-paint='far'] {
+    flood-color: var(--xh-material-liquid-rim-far);
+  }
+
+  /* 强制色：系统配色下只留块自己的边，装饰色块撤掉 */
+  @media (forced-colors: active) {
+    [data-xh-liquid-goo-layer] {
+      display: none;
+    }
+  }
+
+  /* 从右往左排版时光源缺省在右上方 */
+  :where([dir='rtl']) :where([data-material='liquid']) [data-xh-liquid],
+  :where([data-material='liquid']) :where([dir='rtl']) [data-xh-liquid] {
+    --xh-_liquid-light-x: 0.71;
+  }
+}

package/css/list.css

@@ -91,7 +91,7 @@
   }
 
   [data-scope='list'][data-part='root'][data-hoverable] > [data-scope='list'][data-part='item'] {
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition: background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 悬停换底色：只在能用指针的设备上生效，触摸端不留一个按不掉的悬停态 */

package/css/listbox.css

@@ -7,6 +7,8 @@
 
 @import '../family/action-control.css';
 @import '../family/collection-item.css';
+@import '../family/loading-ring.css';
+@import '../family/motion.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -117,7 +119,7 @@
   /* 手写结构按真正的条目判断，空白文本与分组标题都不算候选。
      只排除 content 内部的 hidden 祖先；外层浮层退场时不改变本列表的几何。
      禁用条目仍是有效内容，不参与此处排除。 */
-  [data-scope='listbox'][data-part='content']:not(:has(
+  [data-scope='listbox'][data-part='content']:not([data-xh-virtualized]):not(:has(
     [data-scope='listbox'][data-part='item']:not([hidden]):not([data-scope='listbox'][data-part='content'] [hidden] *)
   )),
   [data-scope='listbox'][data-part='group']:not(:has(
@@ -164,11 +166,18 @@
     display: block;
     padding-block: var(--xh-listbox-group-label-py, var(--xh-space-1));
     padding-inline: var(--xh-listbox-group-label-px, var(--xh-_listbox-item-px));
-    color: var(--xh-listbox-group-label-fg, var(--xh-fg-subtle));
+    color: var(--xh-listbox-group-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-listbox-group-label-font-size, var(--xh-text-caption-size));
     font-weight: var(--xh-listbox-group-label-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-none);
     user-select: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 刷新：已有选项时后台在取，保留上一帧，条目与分组标题按 micro 淡下，数据到了再淡回；在途占位此时让位。
+     淡的是内容不是面：content 自己是描边面，整块淡下去边也跟着淡 */
+  [data-scope='listbox'][data-part='content'][aria-busy='true'] [data-scope='listbox']:is([data-part='item'], [data-part='group-label']) {
+    opacity: var(--xh-state-disabled-opacity);
   }
 
   [data-scope='listbox'][data-part='group-label'][hidden] {
@@ -185,7 +194,7 @@
     display: block;
     padding-block: var(--xh-listbox-empty-py, var(--xh-space-3));
     padding-inline: var(--xh-listbox-empty-px, var(--xh-_listbox-item-px));
-    color: var(--xh-listbox-empty-fg, var(--xh-fg-subtle));
+    color: var(--xh-listbox-empty-fg, var(--xh-fg-muted));
     font-size: var(--xh-listbox-empty-font-size, var(--xh-_listbox-font-size));
     line-height: var(--xh-leading-none);
     text-align: center;
@@ -202,10 +211,13 @@
 
   /* 在途占位：与空态占位同一个位置、同一副观感，两者不同屏 */
   [data-scope='listbox'][data-part='loading'] {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-_listbox-gap);
     padding-block: var(--xh-listbox-loading-py, var(--xh-space-3));
     padding-inline: var(--xh-listbox-loading-px, var(--xh-_listbox-item-px));
-    color: var(--xh-listbox-loading-fg, var(--xh-fg-subtle));
+    color: var(--xh-listbox-loading-fg, var(--xh-fg-muted));
     font-size: var(--xh-listbox-loading-font-size, var(--xh-_listbox-font-size));
     line-height: var(--xh-leading-none);
     text-align: center;
@@ -215,6 +227,15 @@
     display: none;
   }
 
+  /* 首次加载：文案前一枚加载环，由加载环配方画（连接层投影 data-xh-loading-ring 与 data-loading），
+     直径取所在尺寸档的图标档 */
+  [data-scope='listbox'][data-part='loading']::before {
+    content: '';
+    flex: none;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+  }
+
   /* 取下一页的按钮：铺满一行摆在列表尾——铺满一行的独立动作条目，接 Action Control 的 row 档、
      ghost 形态：宽度由容器给、高度随内容、按下只换面不缩放；盒几何、悬停 / 按下 / 禁用面、
      焦点环与粗指针热区全由家族给，白底承载 hover 100 → pressed 200。
@@ -250,7 +271,7 @@
     --xh-collection-inline-padding: var(--xh-listbox-item-px, var(--xh-_listbox-item-px));
     --xh-collection-gap: var(--xh-listbox-item-gap, var(--xh-_listbox-gap));
     --xh-collection-font-size: var(--xh-listbox-item-font-size, var(--xh-_listbox-font-size));
-    --xh-collection-radius: var(--xh-listbox-item-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-listbox-item-radius, var(--xh-shape-inset));
     /* 作者的图标尺槽经桥接槽下发到条目，家族缺省按 data-xh-collection-size 取档 */
     --xh-collection-glyph-size: var(--xh-listbox-icon-size, var(--xh-_collection-glyph-size));
     --xh-collection-fg-rest: var(--xh-listbox-item-fg, var(--xh-fg-default));
@@ -347,4 +368,23 @@
       print-color-adjust: exact;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       条目面上取 CanvasText；按下与没被高亮时的悬停，家族把条目涂成 Highlight，字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='listbox'][data-part='item-indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='listbox'][data-part='item']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted])) [data-scope='listbox'][data-part='item-indicator']:empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='listbox'][data-part='item']:is([aria-disabled='true'], [data-disabled]) [data-scope='listbox'][data-part='item-indicator']:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/loading-bar.css

@@ -40,11 +40,12 @@
     display: none;
   }
 
-  /* 冲到 100 之后进入淡出：机器会在淡出窗口走完之前一直停在 finishing，这段过渡才有时间跑完。
-     窗口（machine 的 LOADING_BAR_FADE_DURATION，200ms）比过渡本身（motion-duration-exit，120ms）
-     宽出一截是有意的余量；两者不是同一个数，改窗口时只要保证它仍不短于过渡 */
+  /* 走满之后才淡出：complete 期间根节点保持不透明，进度段冲到头的平移播完，机器才进 finishing。
+     满格先停一拍（延迟一个 micro）再淡：用户要看清「走完了」，一到头就开始淡读起来像中途断掉。
+     机器等的是浏览器实际起播的这段过渡（含延迟），不按毫秒猜 */
   [data-scope='loading-bar'][data-part='root'][data-state='finishing'] {
     opacity: 0;
+    transition-delay: var(--xh-motion-duration-micro);
   }
 
   /* 背景槽。默认透明：顶部加载条通常直接压在页面顶边上，一条贯穿整屏的浅色底
@@ -57,17 +58,24 @@
   }
 
   /*
-   * 进度段。宽度那条轴（inline-size）由连接层写进内联样式，这里绝不重复写。
-   * 背景色不走内联：要别的颜色改 --xh-loading-bar-range 这个槽，或者换语气。
+   * 进度段。铺满轨道，按连接层交出的比例往行首平移、由轨道裁掉：推进只走合成，
+   * 不重排也不重绘；末端的亮边跟着它一起走。背景色不走内联：要别的颜色改 --xh-loading-bar-range 这个槽，或者换语气。
    *
    * 语气取装饰档 --xh-_tone-soft：那一档压在画布上够 3:1，细带才看得出来。
    * 槽位由 root 上的 data-tone 声明，继承下来。
    * 没写 data-tone 时该槽没被声明，退回原来的品牌色。
    */
   [data-scope='loading-bar'][data-part='range'] {
+    inline-size: 100%;
     block-size: 100%;
     background: var(--xh-loading-bar-range, var(--xh-_tone-soft, var(--xh-bg-brand)));
-    transition: inline-size var(--xh-loading-bar-speed, var(--xh-motion-duration-enter)) var(--xh-motion-ease-continuous);
+    translate: calc((var(--xh-_loading-bar-value, 0) - 1) * 100%) 0;
+    transition: translate var(--xh-loading-bar-speed, var(--xh-motion-duration-move)) var(--xh-motion-ease-continuous);
+  }
+
+  /* translate 只认物理方向：RTL 下行首在右边，平移方向翻转 */
+  [data-scope='loading-bar'][data-part='range']:dir(rtl) {
+    translate: calc((1 - var(--xh-_loading-bar-value, 0)) * 100%) 0;
   }
 
   /* 渲染了亮边才把进度段变成定位面：亮边贴在它的末端 */
@@ -94,7 +102,7 @@
     );
   }
 
-  /* 条子还没起步时亮边一起收着：0% 宽的进度段末端不该先亮出一道边 */
+  /* 条子还没起步时亮边一起收着：进度为 0 的末端不该先亮出一道边 */
   [data-scope='loading-bar'][data-part='peg'][data-state='idle'] {
     opacity: 0;
   }
@@ -103,19 +111,25 @@
     display: none;
   }
 
-  /* 减少动效：宽度与淡出都立刻到位。进度本身照常推进，只是不再有过渡的过程——
-     一条按 200ms 一拍持续变宽的带子正是最容易引发不适的那种动效。
+  /* 减少动效：作者写进两个时长槽的值不作数，退回令牌——进度段的平移随几何时长立刻到位，
+     收尾的淡出保留减弱档的那一小段。一条按 200ms 一拍持续推进的带子正是最容易引发不适的那种动效。
      两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
   @media (prefers-reduced-motion: reduce) {
-    [data-scope='loading-bar'][data-part='root'],
+    [data-scope='loading-bar'][data-part='root'] {
+      transition-duration: var(--xh-motion-duration-exit);
+    }
+
     [data-scope='loading-bar'][data-part='range'] {
-      transition: none;
+      transition-duration: var(--xh-motion-duration-move);
     }
   }
 
-  :where([data-motion='reduce']) [data-scope='loading-bar'][data-part='root'],
+  :where([data-motion='reduce']) [data-scope='loading-bar'][data-part='root'] {
+    transition-duration: var(--xh-motion-duration-exit);
+  }
+
   :where([data-motion='reduce']) [data-scope='loading-bar'][data-part='range'] {
-    transition: none;
+    transition-duration: var(--xh-motion-duration-move);
   }
 
   @media print {